/*
 * 보드팩토리 비즈니스 테마 공통 CSS
 * - 흰 바탕 위에 넓은 구역(section)을 쌓는 회사 홈페이지 모양. 색은 빌더 디자인 값(--bf-color-*)을 따르고 테마 값은 --bfb-* 로 둔다.
 *   편집기 "디자인"에서 대표 색 · 모서리 · 화면 폭을 바꾸면 헤더 · 블록 · 게시판이 함께 바뀐다.
 * - 구역 블록 틀(bfb-sec)과 단추(bfb-btn)는 테마 블록들이 함께 쓴다 (lib/section.lib.php).
 * - 기기 구분: PC 1025px 이상, 태블릿 769~1024px, 모바일 768px 이하 (빌더와 같음)
 */
:root {
    --bfb-primary: var(--bf-color-primary, #125de6);
    --bfb-primary-dark: color-mix(in srgb, var(--bfb-primary) 80%, #000);
    --bfb-primary-soft: color-mix(in srgb, var(--bfb-primary) 8%, #fff);
    --bfb-primary-light: color-mix(in srgb, var(--bfb-primary) 55%, #fff);
    --bfb-ink: var(--bf-color-text, #111111);
    --bfb-ink-2: color-mix(in srgb, var(--bfb-ink) 80%, #fff);
    --bfb-muted: var(--bf-color-muted, #666666);
    --bfb-faint: color-mix(in srgb, var(--bfb-muted) 60%, #fff);
    --bfb-line: var(--bf-color-border, #e5e7eb);
    --bfb-bg: var(--bf-color-bg, #ffffff);
    --bfb-soft: var(--bf-color-bg-soft, #f8f9fa);
    --bfb-dark: #111111;
    --bfb-dark-2: #1d1d20;
    --bfb-radius: var(--bf-radius, 12px);
    --bfb-radius-lg: calc(var(--bfb-radius) + 8px);
    --bfb-shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --bfb-shadow-lg: 0 20px 50px rgba(15, 23, 42, .14);
    --bfb-ease: cubic-bezier(.22, .61, .36, 1);
    /* 구역 위아래 여백: 넓게 · 보통 · 좁게 */
    --bfb-pad-lg: 140px;
    --bfb-pad-md: 100px;
    --bfb-pad-sm: 56px;
    --bfb-title: 40px;
}

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

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

/* 글쓴이 사이드뷰 (그누보드 기본은 검은 상자): 흰 상자 · 테두리 · 그림자 */
html .sv_wrap .sv { padding: 6px; border: 1px solid var(--bfb-line); border-radius: var(--bfb-radius); background: var(--bfb-bg); box-shadow: var(--bfb-shadow-lg); font-size: 13px; line-height: 1.4; }
html .sv_wrap .sv::before { display: none; }
html .sv_wrap .sv a { display: block; width: auto; padding: 7px 12px; border-radius: calc(var(--bfb-radius) - 4px); color: var(--bfb-ink); font-weight: 400; line-height: 1.4; text-decoration: none; }
html .sv_wrap .sv a:hover, html .sv_wrap .sv a:focus-visible { background: var(--bfb-primary-soft); color: var(--bfb-primary); outline: none; }
html .sv_on { top: calc(100% + 6px); }

/* ------------------------------------------------------------------ 구역 틀 (테마 블록 공통) */
.bfb-sec { position: relative; color: var(--bfb-ink); box-sizing: border-box; }
.bfb-sec *, .bfb-sec *::before, .bfb-sec *::after { box-sizing: border-box; }
.bfb-in { width: 100%; max-width: var(--bf-container-width, 1280px); margin: 0 auto; padding: 0 var(--bf-gutter, 20px); }
/* 화면 가득이 아닌 자리(사이트 폭 줄 · 나란한 블록 · 묶음 안)는 줄이 이미 폭과 여백을 주므로 안쪽 틀은 그 폭을 그대로 따른다 */
.bf-row:not(.bf-row--bleed) .bfb-in, .bf-area--side .bfb-in, .bf-group .bfb-in { max-width: none; padding: 0; }
.bfb-sec--pad-lg { padding: var(--bfb-pad-lg) 0; }
.bfb-sec--pad-md { padding: var(--bfb-pad-md) 0; }
.bfb-sec--pad-sm { padding: var(--bfb-pad-sm) 0; }
.bfb-sec--pad-none { padding: 0; }
.bfb-sec--soft { background: var(--bfb-soft); }
.bfb-sec--dark { background: var(--bfb-dark); color: #fff; }
.bfb-sec--primary { background: var(--bfb-primary); color: #fff; }
/* 사이트 폭 안에 놓인 색 있는 구역은 둥근 상자로 (화면 가득일 때는 끝까지 칠한다) */
.bf-row:not(.bf-row--bleed) .bfb-sec:is(.bfb-sec--soft, .bfb-sec--dark, .bfb-sec--primary) { border-radius: var(--bfb-radius-lg); }
.bf-row:not(.bf-row--bleed) .bfb-sec:is(.bfb-sec--soft, .bfb-sec--dark, .bfb-sec--primary) > .bfb-in { padding: 0 clamp(20px, 4vw, 56px); }

.bfb-sec__head { max-width: 860px; margin: 0 auto 56px; }
.bfb-sec__head--center { text-align: center; }
.bfb-sec__head--left { max-width: none; margin-left: 0; text-align: left; }
.bfb-sec__head--right { max-width: none; margin-right: 0; text-align: right; }
.bfb-sec__eyebrow { margin: 0 0 14px; color: var(--bfb-primary); font-size: 15px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
.bfb-sec__title { margin: 0; color: inherit; font-size: var(--bfb-title); font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; word-break: keep-all; }
.bfb-sec__title em { color: var(--bfb-primary); font-style: normal; }
.bfb-sec__desc { margin: 18px 0 0; color: var(--bfb-muted); font-size: 18px; line-height: 1.7; word-break: keep-all; }
.bfb-sec--dark .bfb-sec__eyebrow, .bfb-sec--primary .bfb-sec__eyebrow { color: var(--bfb-primary-light); }
.bfb-sec--primary .bfb-sec__eyebrow { color: rgba(255, 255, 255, .78); }
.bfb-sec--dark .bfb-sec__title em, .bfb-sec--primary .bfb-sec__title em { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.bfb-sec--dark .bfb-sec__title em { color: var(--bfb-primary-light); text-decoration: none; }
.bfb-sec--dark .bfb-sec__desc, .bfb-sec--primary .bfb-sec__desc { color: rgba(255, 255, 255, .72); }
.bfb-sec__more { display: flex; margin-top: 56px; }
.bfb-sec__more--center { justify-content: center; }
.bfb-sec__more--right { justify-content: flex-end; }

/* 빈 자리 안내 */
.bfb-empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; border: 1px dashed var(--bfb-line); border-radius: var(--bfb-radius); color: var(--bfb-muted); font-size: 14px; text-align: center; }

/* ------------------------------------------------------------------ 단추 */
.bfb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: 999px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.bfb-btn .bf-icon { font-size: 18px; transition: transform .25s var(--bfb-ease); }
.bfb-btn:hover .bf-icon { transform: translateX(4px); }
.bfb-btn--solid { background: var(--bfb-primary); color: #fff; }
.bfb-btn--solid:hover { background: var(--bfb-primary-dark); color: #fff; }
.bfb-btn--line { border-color: color-mix(in srgb, var(--bfb-ink) 22%, transparent); background: transparent; color: var(--bfb-ink); }
.bfb-btn--line:hover { border-color: var(--bfb-ink); color: var(--bfb-ink); }
.bfb-btn--white { background: #fff; color: #111; }
.bfb-btn--white:hover { background: #f1f3f5; color: #111; }
.bfb-btn--ghost { border-color: rgba(255, 255, 255, .55); background: transparent; color: #fff; }
.bfb-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.bfb-btn--text { min-height: 0; padding: 0; color: var(--bfb-primary); }
.bfb-btn--text:hover { color: var(--bfb-primary-dark); }
.bfb-sec--dark .bfb-btn--line, .bfb-sec--primary .bfb-btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.bfb-sec--dark .bfb-btn--line:hover, .bfb-sec--primary .bfb-btn--line:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.bfb-sec--primary .bfb-btn--solid { background: #fff; color: var(--bfb-primary); }
.bfb-sec--primary .bfb-btn--solid:hover { background: #f1f3f5; color: var(--bfb-primary-dark); }

/* 화면에 들어올 때 살짝 떠오르기 (theme.js 가 is-in 을 붙인다. 움직임 줄이기 설정 · 편집 화면에서는 끔) */
.bfb-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--bfb-ease), transform .7s var(--bfb-ease); }
.bfb-reveal.is-in { opacity: 1; transform: none; }
.bfe-on .bfb-reveal, .bfb-no-motion .bfb-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
    .bfb-reveal { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ 서브 비주얼 (화면 머리: 하위 페이지 · 게시판 위) */
.bfb-ph { position: relative; overflow: hidden; background-color: var(--bfb-ph-bg, #0d1b3a); background-image: var(--bfb-ph-img, none); background-position: center; background-size: cover; color: #fff; isolation: isolate; }
.bfb-ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--bfb-ph-dim, .45)); }
/* 그림이 없을 때: 바탕색 위에 대표 색 빛 번짐 무늬 (어둡게 막은 덮지 않음) */
.bfb-ph:not(.has-image):not(.bfb-ph--simple) { background-image: radial-gradient(50% 120% at 90% 0%, color-mix(in srgb, var(--bfb-primary) 70%, transparent), transparent 70%), radial-gradient(40% 100% at 0% 100%, color-mix(in srgb, var(--bfb-primary) 35%, transparent), transparent 70%); }
.bfb-ph:not(.has-image)::before { display: none; }
.bfb-ph__in { display: flex; flex-direction: column; justify-content: center; min-height: var(--bfb-ph-h, 340px); padding-top: 48px; padding-bottom: 48px; }
.bfb-ph--center .bfb-ph__in { align-items: center; text-align: center; }
.bfb-ph__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 18px; padding: 0; list-style: none; color: rgba(255, 255, 255, .75); font-size: 14px; }
.bfb-ph--center .bfb-ph__crumb { justify-content: center; }
.bfb-ph__crumb li { display: inline-flex; align-items: center; gap: 4px; }
.bfb-ph__crumb li + li::before { content: ""; width: 5px; height: 5px; margin: 0 6px 0 2px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .7; }
.bfb-ph__crumb a { color: inherit; text-decoration: none; }
.bfb-ph__crumb a:hover { color: #fff; }
.bfb-ph__crumb .bf-icon { font-size: 16px; }
.bfb-ph__title, #container_title.bfb-ph__title { margin: 0; color: inherit; font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.bfb-ph__desc { max-width: 760px; margin: 16px 0 0; color: rgba(255, 255, 255, .82); font-size: 18px; line-height: 1.65; word-break: keep-all; }
/* 휴대폰에서 그누보드 css/mobile.css 가 #container_title 에 주는 흰 상자·그림자·고정 높이를 지운다 */
#container_title.bfb-ph__title, #container_title.bfb-fb-title { position: static; width: auto; height: auto; padding: 0; background: none; box-shadow: none; }
/* 간단한 모양: 그림 없이 흰 바탕에 제목만 */
.bfb-ph--simple { background: var(--bfb-soft); color: var(--bfb-ink); }
.bfb-ph--simple::before { display: none; }
.bfb-ph--simple .bfb-ph__in { min-height: 0; padding-top: 64px; padding-bottom: 56px; }
.bfb-ph--simple .bfb-ph__crumb { color: var(--bfb-faint); }
.bfb-ph--simple .bfb-ph__crumb a:hover { color: var(--bfb-primary); }
.bfb-ph--simple .bfb-ph__desc { color: var(--bfb-muted); }
.bfb-ph__hint { position: absolute; right: 12px; bottom: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; }
/* 같은 묶음 메뉴 탭: 서브 비주얼 아래 흰 줄. 헤더를 따라오게 두면 화면을 내려도 붙어 있다 */
.bfb-ph-tabs { position: relative; z-index: 5; border-bottom: 1px solid var(--bfb-line); background: var(--bfb-bg); }
.bfb-ph-tabs.is-sticky { position: sticky; top: var(--bf-sticky-h, 0px); }
.bfb-ph-tabs ul { display: flex; justify-content: center; gap: 0 40px; margin: 0 auto; list-style: none; overflow-x: auto; scrollbar-width: none; }
.bfb-ph-tabs ul::-webkit-scrollbar { display: none; }
.bfb-ph-tabs a { position: relative; display: block; padding: 20px 2px 19px; color: var(--bfb-muted); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.bfb-ph-tabs a:hover { color: var(--bfb-ink); }
.bfb-ph-tabs a[aria-current="page"] { color: var(--bfb-ink); font-weight: 700; }
.bfb-ph-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--bfb-primary); }

/* ------------------------------------------------------------------ 그누보드 화면 (게시판 · 회원 · 검색 …) */
#container.bf-container.bf-inner { padding-top: 72px; padding-bottom: 120px; }
/* 화면 머리가 큰 제목을 보여 주므로 목록형 화면의 스킨 제목은 숨긴다 (글쓰기·글 보기 카드 제목은 그대로) */
#bf-site:has(> .bfb-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(> .bfb-ph) .bfk-ctt__head { display: none; }
/* 로그인 · 회원가입 같은 회원 화면은 가운데 카드만 보여 준다 (카드 안에 제목이 있음) */
#bf-site:has(#container .bfk-page.bfk-auth) > :is(.bfb-ph, .bfb-ph-tabs) { display: none; }
/* 빌더 페이지 본문: 서브 비주얼 바로 아래 구역이 흰 바탕이면 위 여백을 조금 줄인다 */
.bf-main > .bf-area:first-child > .bf-row:first-child .bfb-sec--light.bfb-sec--pad-lg { padding-top: calc(var(--bfb-pad-lg) - 40px); }

/* ------------------------------------------------------------------ 대체 화면 (빌더가 꺼졌을 때) */
.bfb-fallback { min-height: 100vh; display: flex; flex-direction: column; }
.bfb-fb-hd { border-bottom: 1px solid var(--bfb-line); background: var(--bfb-bg); }
.bfb-fb-hd__row { display: flex; align-items: center; gap: 32px; height: 76px; }
.bfb-fb-hd__logo { color: var(--bfb-ink); font-size: 22px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.bfb-fb-hd__nav { flex: 1; min-width: 0; }
.bfb-fb-hd__nav ul { display: flex; justify-content: center; gap: 6px 40px; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.bfb-fb-hd__nav a { display: block; padding: 10px 0; color: var(--bfb-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bfb-fb-hd__nav a:hover { color: var(--bfb-primary); }
.bfb-fb-hd__util { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.bfb-fb-hd__util a { color: var(--bfb-muted); text-decoration: none; }
.bfb-fb-body { flex: 1; }
.bfb-fb-container { padding-top: 48px; padding-bottom: 80px; }
.bfb-fb-title, #container_title.bfb-fb-title { margin: 0 0 32px; color: var(--bfb-ink); font-size: 32px; font-weight: 700; line-height: 1.3; }
.bfb-fb-ft { padding: 36px 0 44px; background: var(--bfb-dark); color: rgba(255, 255, 255, .6); font-size: 14px; }
.bfb-fb-ft__links { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 10px; padding: 0; list-style: none; }
.bfb-fb-ft__links a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.bfb-fb-ft__copy { margin: 0; }

/* ------------------------------------------------------------------ 반응형 */
@media (max-width: 1024px) {
    :root { --bfb-pad-lg: 100px; --bfb-pad-md: 72px; --bfb-pad-sm: 44px; --bfb-title: 34px; }
    .bfb-sec__head { margin-bottom: 44px; }
    .bfb-ph__title, #container_title.bfb-ph__title { font-size: 36px; }
    .bfb-ph-tabs ul { justify-content: flex-start; gap: 0 28px; }
}

@media (max-width: 768px) {
    :root { --bfb-pad-lg: 72px; --bfb-pad-md: 52px; --bfb-pad-sm: 32px; --bfb-title: 26px; }
    body { font-size: 15px; }
    .bfb-sec__head { margin-bottom: 32px; }
    .bfb-sec__eyebrow { margin-bottom: 10px; font-size: 13px; }
    .bfb-sec__desc { margin-top: 12px; font-size: 15.5px; }
    .bfb-sec__more { margin-top: 36px; }
    .bfb-btn { min-height: 46px; padding: 0 22px; font-size: 15px; }
    .bfb-ph__in { min-height: calc(var(--bfb-ph-h, 340px) * .66); padding-top: 36px; padding-bottom: 36px; }
    .bfb-ph__title, #container_title.bfb-ph__title { font-size: 28px; }
    .bfb-ph__desc { margin-top: 10px; font-size: 15px; }
    .bfb-ph__crumb { margin-bottom: 12px; font-size: 13px; }
    .bfb-ph--simple .bfb-ph__in { padding-top: 40px; padding-bottom: 36px; }
    .bfb-ph-tabs ul { gap: 0 22px; }
    .bfb-ph-tabs a { padding: 15px 2px 14px; font-size: 15px; }
    #container.bf-container.bf-inner { padding-top: 40px; padding-bottom: 72px; }
    .bfb-fb-hd__row { flex-wrap: wrap; height: auto; gap: 8px 16px; padding-top: 12px; padding-bottom: 12px; }
    .bfb-fb-hd__nav { order: 3; flex-basis: 100%; }
    .bfb-fb-hd__nav ul { justify-content: flex-start; gap: 6px 24px; }
}

@media print {
    .bfb-ph-tabs { display: none; }
    .bfb-reveal { opacity: 1; transform: none; }
}

/* 휴대폰: 입력 칸 글자는 16px 이상 (아이폰 사파리는 16px 보다 작은 칸을 누르면 화면을 저절로 확대한다) */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
    select, textarea { font-size: 16px !important; }
}