/*
 * 보드팩토리 커뮤니티 테마 공통 CSS
 * - 회색 바탕 위에 흰 카드를 올리는 구성. 색은 빌더 디자인 값(--bf-color-*)을 따르고 테마 값은 --bfc-* 로 둔다.
 * - 다크 모드: <html data-bfc-theme="dark"> 일 때 빌더 변수와 테마 변수를 함께 바꾼다 (head.php 가 화면 그리기 전에 지정).
 * - 기기 구분: PC 1025px 이상, 태블릿 769~1024px, 모바일 768px 이하 (빌더와 같음)
 */
:root {
    --bfc-page: #f5f5f6;
    --bfc-surface: var(--bf-color-bg, #ffffff);
    --bfc-surface-2: var(--bf-color-bg-soft, #fafafb);
    --bfc-line: var(--bf-color-border, #e6e6ea);
    --bfc-line-soft: #f1f1f3;
    --bfc-ink: var(--bf-color-text, #27272a);
    --bfc-ink-2: #52525b;
    --bfc-muted: var(--bf-color-muted, #6e6e77);
    --bfc-faint: #9c9ca5;
    --bfc-primary: var(--bf-color-primary, #3e9fde);
    --bfc-primary-soft: color-mix(in srgb, var(--bfc-primary) 10%, transparent);
    --bfc-primary-line: color-mix(in srgb, var(--bfc-primary) 28%, transparent);
    --bfc-primary-dark: color-mix(in srgb, var(--bfc-primary) 82%, #000);
    --bfc-point: #ff6b5b;
    --bfc-radius: var(--bf-radius, 4px);
    --bfc-shadow: 0 4px 14px rgba(0, 0, 0, .07);
    --bfc-shadow-lg: 0 10px 30px rgba(0, 0, 0, .10);
    --bfc-gap: 24px;
}

html[data-bfc-theme="dark"] .bf-logo-w__img--light { display: none; }
html[data-bfc-theme="dark"] .bf-logo-w__img--dark { display: inline; }

html[data-bfc-theme="dark"] {
    color-scheme: dark;
    --bf-color-text: #e4e4e7;
    --bf-color-muted: #a1a1aa;
    --bf-color-border: #2c2c32;
    --bf-color-bg: #18181b;
    --bf-color-bg-soft: #202024;
    --bfc-page: #0f0f11;
    --bfc-line-soft: #232328;
    --bfc-ink-2: #c4c4cc;
    --bfc-faint: #71717a;
    --bfc-primary-soft: color-mix(in srgb, var(--bfc-primary) 18%, transparent);
    --bfc-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    --bfc-shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
}

html[data-bfc-theme="dark"] body { background: var(--bfc-page); color: var(--bfc-ink); }
html[data-bfc-theme="dark"] .sv_member, html[data-bfc-theme="dark"] .sv_guest { color: inherit; }

/* 스크롤 막대 자리를 늘 비워 두어, 짧은 화면과 긴 화면을 오갈 때 본문이 옆으로 밀리지 않게 한다 */
html { scrollbar-gutter: stable; }

/* 바탕: 회색 위에 카드 */
body { font-size: 15px; }
html .bf-site { background: var(--bfc-page); color: var(--bfc-ink); }
/* 그누보드 default.css 가 제목(h1~h6)을 맑은 고딕으로 고정하므로 사이트 글꼴을 따르게 한다 */
.bf-site :is(h1, h2, h3, h4, h5, h6), .bfc-fallback :is(h1, h2, h3, h4, h5, h6) { font-family: inherit; }
.bfc-inner { width: 100%; max-width: var(--bf-container-width, 1200px); margin: 0 auto; padding: 0 var(--bf-gutter, 20px); box-sizing: border-box; }
.bfc-card { background: var(--bfc-surface); border: 1px solid var(--bfc-line); border-radius: var(--bfc-radius); }
/* 그누보드 default.css 가 section 등을 display:block 으로 고정하므로 숨김 속성을 다시 살린다 */
.bf-site [hidden] { display: none !important; }

/* 그누보드 화면 본문 (사이드 레이아웃 안) */
.bf-site #container.bf-container { color: var(--bfc-ink); }

/* ------------------------------------------------------------------ 블록 공통 카드 (테마 블록이 함께 쓴다) */
.bfc-box { padding: 22px 24px; border: 1px solid var(--bfc-line); border-radius: var(--bfc-radius); background: var(--bfc-surface); color: var(--bfc-ink); }
.bfc-box--tight { padding: 18px 20px; }
.bfc-side .bfc-box { padding: 18px 18px; }
.bfc-box__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.bfc-box__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--bfc-ink); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.bfc-box__title em { color: var(--bfc-primary); font-style: normal; }
.bfc-box__title .bf-icon { color: var(--bfc-primary); font-size: 18px; }
.bfc-side .bfc-box__title { font-size: 15px; }
.bfc-box__sub { color: var(--bfc-faint); font-size: 12.5px; font-weight: 500; }
.bfc-box__more { display: inline-flex; align-items: center; gap: 2px; color: var(--bfc-muted); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.bfc-box__more:hover { color: var(--bfc-primary); }
.bfc-box__plus { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--bfc-radius); color: var(--bfc-primary); font-size: 18px; text-decoration: none; }
.bfc-box__plus:hover { background: var(--bfc-primary-soft); }
.bfc-box__empty { padding: 34px 10px; color: var(--bfc-faint); font-size: 13px; text-align: center; }
/* 블록 안 탭 (최신글·순위) */
.bfc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bfc-tabs button { height: 30px; padding: 0 12px; border: 1px solid var(--bfc-line); border-radius: var(--bfc-radius); background: var(--bfc-surface); color: var(--bfc-muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.bfc-tabs button:hover { border-color: var(--bfc-primary); color: var(--bfc-primary); }
.bfc-tabs button[aria-selected="true"] { border-color: var(--bfc-primary); background: var(--bfc-primary); color: #fff; }
.bfc-tabs--small button { height: 26px; padding: 0 10px; font-size: 12px; }
/* 작은 표시 (블록용: 스킨의 .bfc-tag 와 같은 모양) */
.bfc-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 3px; background: var(--bfc-primary-soft); color: var(--bfc-primary); font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; flex-shrink: 0; }
.bfc-chip--soft { background: var(--bfc-surface-2); color: var(--bfc-muted); }
.bfc-dot-new { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: #17bfa0; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; flex-shrink: 0; }

/* ------------------------------------------------------------------ 화면 머리 (위치 · 제목 · 탭) */
.bfc-ph { background: var(--bfc-surface); border-bottom: 1px solid var(--bfc-line); }
.bfc-ph__head { padding-top: 22px; padding-bottom: 26px; }
.bfc-ph__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--bfc-faint); font-size: 12.5px; }
.bfc-ph__crumb li { display: inline-flex; align-items: center; gap: 4px; }
.bfc-ph__crumb li + li::before { content: ""; width: 5px; height: 5px; margin: 0 4px 0 2px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .7; }
.bfc-ph__crumb a { color: inherit; text-decoration: none; }
.bfc-ph__crumb a:hover { color: var(--bfc-primary); }
.bfc-ph__crumb li:last-child { color: var(--bfc-ink); font-weight: 600; }
.bfc-ph__home { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid var(--bfc-line); border-radius: 3px; color: var(--bfc-primary) !important; }
.bfc-ph__home .bf-icon { font-size: 13px; }
.bfc-ph__title { margin: 0; color: var(--bfc-ink); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.bfc-ph__desc { margin: 8px 0 0; color: var(--bfc-muted); font-size: 14px; }
.bfc-ph__tabs { border-top: 1px solid var(--bfc-line-soft); }
.bfc-ph__tabs ul { display: flex; gap: 6px 28px; margin: 0 auto; padding-top: 0; padding-bottom: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.bfc-ph__tabs ul::-webkit-scrollbar { display: none; }
.bfc-ph__tabs a { position: relative; display: block; padding: 15px 2px 14px; color: var(--bfc-muted); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bfc-ph__tabs a:hover { color: var(--bfc-ink); }
.bfc-ph__tabs a[aria-current="page"] { color: var(--bfc-ink); font-weight: 700; }
.bfc-ph__tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--bfc-primary); }

/* 화면 머리가 큰 제목을 보여 주므로 목록형 화면의 스킨 제목은 숨긴다 (글쓰기·글 보기 카드 제목은 그대로) */
#bf-site:has(> .bfc-ph) :is(.bfk-faq, .bfk-qa:not(.bfk-qa-view, .bfk-qa-write), .bfk-new, .bfk-sch, .bfk-connect--page) > .bfk-head .bfk-title,
#bf-site:has(> .bfc-ph) .bfk-ctt__head { display: none; }
/* 로그인 · 회원가입 같은 회원 화면은 가운데 카드만 보여 준다 (카드 안에 제목이 있음) */
#bf-site:has(#container .bfk-page.bfk-auth) > .bfc-ph { display: none; }

/* ------------------------------------------------------------------ 다크 모드 버튼 */
.bfc-dark-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.bfc-dark-btn:hover { color: var(--bfc-primary); }
.bfc-dark-btn .bfc-dark-btn__sun { display: none; }
html[data-bfc-theme="dark"] .bfc-dark-btn .bfc-dark-btn__sun { display: inline-block; }
html[data-bfc-theme="dark"] .bfc-dark-btn .bfc-dark-btn__moon { display: none; }

/* ------------------------------------------------------------------ 대체 화면 (빌더가 꺼졌을 때) */
.bfc-fallback { min-height: 100vh; display: flex; flex-direction: column; }
.bfc-fb-hd { background: var(--bfc-surface); border-bottom: 1px solid var(--bfc-line); }
.bfc-fb-hd__top { border-bottom: 1px solid var(--bfc-line-soft); font-size: 12.5px; color: var(--bfc-muted); }
.bfc-fb-hd__top-row { display: flex; justify-content: flex-end; height: 36px; align-items: center; }
.bfc-fb-hd__util { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
.bfc-fb-hd__util a { color: inherit; text-decoration: none; }
.bfc-fb-hd__main { display: flex; align-items: center; gap: 24px; height: 76px; }
.bfc-fb-hd__logo { color: var(--bfc-ink); font-size: 22px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.bfc-fb-hd__search { display: flex; flex: 1; max-width: 520px; }
.bfc-fb-hd__search input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 2px solid var(--bfc-primary); border-right: 0; border-radius: var(--bfc-radius) 0 0 var(--bfc-radius); background: var(--bfc-surface); color: var(--bfc-ink); }
.bfc-fb-hd__search button { padding: 0 18px; border: 0; border-radius: 0 var(--bfc-radius) var(--bfc-radius) 0; background: var(--bfc-primary); color: #fff; font-weight: 700; cursor: pointer; }
.bfc-fb-hd__nav ul { display: flex; gap: 6px 34px; margin: 0 auto; list-style: none; overflow-x: auto; }
.bfc-fb-hd__nav a { display: block; padding: 14px 0; color: var(--bfc-ink); font-weight: 700; text-decoration: none; white-space: nowrap; }
.bfc-fb-hd__nav a:hover { color: var(--bfc-primary); }
.bfc-fb-body { flex: 1; }
.bfc-fb-container { padding-top: 30px; padding-bottom: 60px; }
.bfc-fb-title { margin: 0 0 24px; font-size: 26px; font-weight: 800; }
.bfc-fb-ft { padding: 30px 0 40px; border-top: 1px solid var(--bfc-line); background: var(--bfc-surface); color: var(--bfc-muted); font-size: 13px; }
.bfc-fb-ft__links { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 10px; padding: 0; list-style: none; }
.bfc-fb-ft__links a { color: inherit; text-decoration: none; }
.bfc-fb-ft__copy { margin: 0; }

/* ------------------------------------------------------------------ 반응형 */
@media (max-width: 1024px) {
    .bfc-ph__title { font-size: 24px; }
}

@media (max-width: 768px) {
    .bfc-ph__head { padding-top: 16px; padding-bottom: 18px; }
    .bfc-ph__crumb { margin-bottom: 10px; }
    .bfc-ph__title { font-size: 22px; }
    .bfc-ph__tabs ul { gap: 20px; }
    .bfc-ph__tabs a { padding: 12px 2px 11px; font-size: 14px; }
    .bfc-fb-hd__main { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; gap: 12px; }
    .bfc-fb-hd__search { flex-basis: 100%; max-width: none; }
}

@media print {
    .bfc-ph__tabs, .bfc-dark-btn { display: none; }
}