/* 보드팩토리 커뮤니티 게시판 스킨 (목록형) — 공통 UI 는 테마 css/skin.css */
.bfk-board { margin: 0 auto; }
.bfk-board__search { margin-bottom: 12px; }

/* ---------- 목록: 분류 칩 · 개수와 정렬 · 카드 표 ---------- */
.bfc-board__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bfc-board__bar .bfk-count { font-size: 13px; }
.bfc-board__tools { gap: 6px; }

.bfc-board__card { overflow: hidden; }
.bfk-board__labels, .bfk-board__row { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.bfk-board__labels { height: 44px; border-bottom: 1px solid var(--bfk-border); background: var(--bfk-soft); color: var(--bfk-muted); font-size: 12.5px; font-weight: 600; }
.bfk-board__labels .bfk-board__subject { justify-content: center; }
.bfk-board__row { min-height: 54px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bfc-line-soft, var(--bfk-border)); }
.bfk-board__list > li:last-child { border-bottom: 0; }
.bfk-board__row:hover { background: color-mix(in srgb, var(--bfk-primary) 4%, transparent); }
.bfk-board__row.is-notice .bfk-board__link { font-weight: 700; }
.bfk-board__row.is-current { background: var(--bfk-primary-soft); }
.bfk-board__row.is-current .bfk-board__link { color: var(--bfk-primary); }

.bfk-board__chk { width: 18px; flex-shrink: 0; display: flex; }
.bfk-board__chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--bfk-primary); }
.bfk-board__num { width: 56px; flex-shrink: 0; text-align: center; color: var(--bfk-muted); font-size: 12.5px; }
.bfk-board__subject { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding-left: calc(var(--bfk-depth, 0) * 16px); }
.bfk-board__name { width: 120px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bfk-board__labels .bfk-board__name { text-align: center; }
.bfk-board__date { width: 64px; flex-shrink: 0; text-align: center; color: var(--bfk-muted); font-size: 12.5px; }
.bfk-board__stat { width: 48px; flex-shrink: 0; text-align: center; color: var(--bfk-muted); font-size: 12.5px; }
.bfk-board__row .bfk-board__stat-label { display: none; }

.bfk-board__link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 500; }
.bfk-board__marks { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; }
.bfk-board__cmt { color: var(--bfk-primary); font-size: 12px; font-weight: 800; }
.bfk-board__cmt::before { content: "["; }
.bfk-board__cmt::after { content: "]"; }
.bfk-board__icon { display: inline-flex; color: var(--bfk-muted); }
.bfk-board__reply { flex-shrink: 0; display: inline-flex; color: var(--bfk-muted); }

/* 글쓴이 칸: 그누보드 회원 아이콘/이름 */
.bfk-board__name .sv_wrap, .bfk-board__name .sv_member, .bfk-board__name .sv_guest { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.bfk-board__name img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; vertical-align: middle; }
.bfk-board__labels .bfk-board__chk input { pointer-events: auto; }

.bfk-board__allchk { display: none; }
.bfk-board__manage { margin-top: 12px; }
.bfc-board__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 18px; }
.bfc-board__foot .pg_wrap { grid-column: 2; margin: 0; }
.bfc-board__write { grid-column: 3; justify-content: flex-end; }

/* ---------- 글 보기: 카드 ---------- */
.bfc-view__card { padding: 26px 28px 0; }
.bfk-view__head { padding-bottom: 18px; border-bottom: 1px solid var(--bfk-border); }
.bfk-view__board { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.bfk-view__title { font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.bfk-view__info { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.bfk-view__info .bfk-avatar { width: 34px; height: 34px; border-radius: 6px; }
.bfk-view__who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.bfk-view__name { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.bfk-view__who .bfk-meta { font-size: 12.5px; }
.bfk-view__ip, .bfk-cmt__ip { color: var(--bfk-muted); font-size: 12px; font-weight: 400; }
.bfk-view__tools { flex-shrink: 0; gap: 2px; }

.bfk-view__body { padding: 28px 0 30px; }
.bfk-view__images { display: grid; gap: 12px; margin-bottom: 24px; }
.bfk-view__images img { display: block; max-width: 100%; height: auto; border-radius: var(--bfk-radius); }
.bfk-view__content { min-height: 100px; font-size: 15px; }
.bfk-view__sign { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--bfk-border); color: var(--bfk-muted); font-size: 13px; }

.bfk-view__vote { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 36px -28px 0; padding: 22px 28px; border-top: 1px solid var(--bfk-border); }
.bfk-vote {
    display: inline-flex; align-items: center; gap: 6px; min-width: 96px; height: 40px; justify-content: center; padding: 0 16px;
    border: 1px solid var(--bfk-primary-line, var(--bfk-border)); border-radius: var(--bfk-radius); background: var(--bfk-primary-soft); color: var(--bfk-primary); font-size: 13.5px; font-weight: 700;
}
.bfk a.bfk-vote:hover { border-color: var(--bfk-primary); background: var(--bfk-primary); color: #fff; }
.bfk a.bfk-vote:hover strong { color: #fff; }
.bfk-vote strong { color: var(--bfk-primary); }
.bfk-vote.is-static { border-color: var(--bfk-border); background: none; color: var(--bfk-muted); }
.bfk-view__vote-msg { flex-basis: 100%; min-height: 1.2em; text-align: center; color: var(--bfk-primary); font-size: 13px; }
.bfk-view__share { margin-top: 16px; text-align: center; }
.bfk-view__share:empty { display: none; }

.bfk-view__sub { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 15px; font-weight: 800; }
.bfk-view__sub span { color: var(--bfk-primary); }
.bfk-view__attach { margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-soft); }
.bfk-view__attach li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 5px 0; }
.bfk-view__file { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; }
.bfk-view__file strong { font-weight: 600; overflow-wrap: anywhere; }
.bfk-view__file-size, .bfk-view__file-meta { color: var(--bfk-muted); font-size: 12px; }

.bfk-view__buttons { padding: 16px 0; }
.bfk-view__nav { overflow: hidden; border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-bg); }
.bfk-view__nav a { display: flex; align-items: center; gap: 14px; padding: 13px 18px; font-size: 14px; }
.bfk-view__nav a + a { border-top: 1px solid var(--bfk-border); }
.bfk-view__nav-label { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; width: 64px; color: var(--bfk-muted); font-size: 12.5px; }
.bfk-view__nav-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfk-view__nav-date { flex-shrink: 0; color: var(--bfk-muted); font-size: 12px; }

/* ---------- 댓글: 카드 ---------- */
.bfk-cmt { margin-top: 16px; padding: 22px 28px 24px; border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-bg); }
.bfk-cmt > .bfk-view__sub { margin-bottom: 14px; font-size: 16px; }
.bfk-cmt__list { border-top: 1px solid var(--bfk-border); }
.bfk-cmt__item { display: flex; gap: 12px; padding: 16px 0 16px calc(var(--bfk-depth, 0) * 28px); border-bottom: 1px solid var(--bfc-line-soft, var(--bfk-border)); }
.bfk-cmt__item.is-reply { background: linear-gradient(90deg, transparent calc(var(--bfk-depth, 0) * 28px - 14px), var(--bfk-soft) 0); }
.bfk-cmt__item .bfk-avatar { width: 32px; height: 32px; border-radius: 6px; }
.bfk-cmt__main { flex: 1; min-width: 0; }
.bfk-cmt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.bfk-cmt__name { font-weight: 700; }
.bfk-cmt__date { color: var(--bfk-muted); font-size: 12px; }
.bfk-cmt__text { margin-top: 6px; font-size: 14.5px; overflow-wrap: anywhere; }
.bfk-cmt__text .bfk-badge { margin-right: 4px; }
.bfk-cmt__acts { display: flex; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--bfk-muted); }
.bfk-cmt__slot:not(:empty) { margin-top: 12px; }
.bfk-cmt__empty { padding: 26px 0; border-top: 1px solid var(--bfk-border); text-align: center; color: var(--bfk-muted); font-size: 14px; }

.bfk-cmt__form { display: grid; gap: 10px; margin-top: 18px; }
.bfk-cmt__slot .bfk-cmt__form { margin-top: 0; }
.bfk-cmt__mode { color: var(--bfk-primary); font-size: 12.5px; font-weight: 700; }
.bfk-cmt__write { border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-soft); overflow: hidden; }
.bfk-cmt__write:focus-within { border-color: var(--bfk-primary); box-shadow: 0 0 0 3px var(--bfk-primary-soft); }
.bfk-cmt__write .bfk-textarea { min-height: 96px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.bfk-cmt__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--bfk-border); background: var(--bfk-bg); }

/* ---------- 글쓰기: 카드 ---------- */
.bfk-write { padding: 26px 28px 28px; border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-bg); }
.bfk-write .bfk-head { padding-bottom: 16px; border-bottom: 1px solid var(--bfk-border); }
.bfk-write .bfk-title { font-size: 20px; }
.bfk-write__subject .bfk-btn { flex-shrink: 0; }
.bfk-write__autosave { position: relative; z-index: 20; padding: 14px; border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-bg); box-shadow: 0 10px 30px rgba(15, 23, 42, .1); }
.bfk-write__autosave ul { margin: 8px 0; }
.bfk-write__autosave li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bfk-border); font-size: 13.5px; }
.bfk-write__autosave li span { color: var(--bfk-muted); font-size: 12px; white-space: nowrap; }
.bfk-write__autosave .autosave_del { margin-left: 6px; border: 0; background: none; color: var(--bfk-danger); }
.bfk-write__editor.is-plain textarea { width: 100%; min-height: 360px; padding: 14px; border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-bg); color: var(--bfk-text); font: inherit; line-height: 1.7; resize: vertical; }
.bfk-write__editor.is-plain textarea:focus { outline: 0; border-color: var(--bfk-primary); box-shadow: 0 0 0 3px var(--bfk-primary-soft); }
.bfk-write__editor iframe { max-width: 100%; }
.bfk-write__count { text-align: right; }
.bfk-write__options { padding: 12px 14px; border-radius: var(--bfk-radius); background: var(--bfk-soft); }
.bfk-write__ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; flex-shrink: 0; color: var(--bfk-muted); }
.bfk-write .bfk-field > .bfk-field__row + .bfk-field__row { margin-top: 2px; }
.bfk-write__files { display: grid; gap: 10px; }
.bfk-write__files li { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--bfk-border); border-radius: var(--bfk-radius); }
.bfk-write__del { color: var(--bfk-danger); font-size: 12.5px; }
.bfk-write__submit { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--bfk-border); }
.bfk-write__submit .bfk-btn { min-width: 120px; }

@media (max-width: 768px) {
    .bfk-board__labels { display: none; }
    .bfk-board__allchk { display: block; padding: 10px 14px; border-bottom: 1px solid var(--bfk-border); }
    .bfk-board__row { flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; }
    .bfk-board__row .bfk-board__num { display: none; }
    .bfk-board__row.is-notice .bfk-board__num, .bfk-board__row.is-current .bfk-board__num { display: block; width: auto; }
    .bfk-board__subject { flex-basis: calc(100% - 40px); order: 1; }
    .bfk-board__chk { order: 0; }
    .bfk-board__row.is-notice .bfk-board__subject, .bfk-board__row.is-current .bfk-board__subject { flex-basis: auto; }
    .bfk-board__link { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .bfk-board__name, .bfk-board__date, .bfk-board__stat { order: 2; width: auto; text-align: left; font-size: 12px; color: var(--bfk-muted); }
    .bfk-board__name { max-width: 40%; }
    .bfk-board__name img { width: 18px; height: 18px; }
    .bfk-board__row .bfk-board__stat-label { display: inline; }
    .bfk-board__name + .bfk-board__stat::before, .bfk-board__stat + .bfk-board__stat::before, .bfk-board__stat + .bfk-board__date::before { content: "·"; margin-right: 8px; color: var(--bfk-border); }
    .bfc-board__foot { grid-template-columns: minmax(0, 1fr); }
    .bfc-board__foot .pg_wrap, .bfc-board__write { grid-column: 1; }
    .bfc-board__write .bfk-btn { flex: 1; }

    .bfc-view__card { padding: 18px 16px 0; }
    .bfk-view__title { font-size: 19px; }
    .bfk-view__body { padding: 22px 0 24px; }
    .bfk-view__vote { margin-left: -16px; margin-right: -16px; padding: 18px 16px; }
    .bfk-cmt { padding: 18px 16px 20px; }
    .bfk-cmt__item { padding-left: calc(var(--bfk-depth, 0) * 14px); }
    .bfk-view__nav a { padding: 12px 14px; }
    .bfk-view__nav-date { display: none; }
    .bfk-write { padding: 18px 16px 20px; }
    .bfk-write__subject { flex-wrap: wrap; }
    .bfk-write__subject .bfk-btn { width: 100%; }
    .bfk-write__submit .bfk-btn { flex: 1; min-width: 0; }
}

/* ---------- 여분 필드 (게시판 설정에서 제목을 붙인 칸) ---------- */
.bfk-write__extras { padding: 14px 16px; border: 1px solid var(--bfk-border); border-radius: var(--bfk-radius); background: var(--bfk-soft); }
.bfc-view__extras { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 22px; padding: 12px 16px; border-radius: var(--bfk-radius); background: var(--bfk-primary-soft); font-size: 13.5px; }
.bfc-view__extras div { display: flex; gap: 8px; }
.bfc-view__extras dt { color: var(--bfk-muted); font-weight: 600; }
.bfc-view__extras dd { margin: 0; color: var(--bfk-text); font-weight: 700; }