/*
 * 보드팩토리 렌더링 기본 CSS (헤더/푸터 영역, 레이아웃, 블록 영역, 공통 유틸리티)
 * 디자인 값은 CSS 변수(--bf-*)를 쓰고, 사이트 디자인 설정이 :root 에서 덮어쓴다.
 * 기기 구분: PC 1025px 이상, 태블릿 769~1024px, 모바일 768px 이하
 */
:root {
    --bf-color-primary: #0ea5e9;
    --bf-color-text: #1f2937;
    --bf-color-muted: #6b7280;
    --bf-color-border: #e5e7eb;
    --bf-color-bg: #ffffff;
    --bf-color-bg-soft: #f7f8fa;
    --bf-container-width: 1200px;
    --bf-gutter: 20px;
    --bf-radius: 6px;
}

/* 스크롤 막대 자리를 늘 비워 두어 화면을 오갈 때 본문이 옆으로 밀리지 않게 한다 */
html:has(.bf-site) { scrollbar-gutter: stable; }

.bf-site { min-height: 100vh; display: flex; flex-direction: column; background: var(--bf-color-bg); color: var(--bf-color-text); }
.bf-site, .bf-site button, .bf-site input, .bf-site select, .bf-site textarea { font-family: var(--bf-font, inherit); }
.bf-inner { width: 100%; max-width: var(--bf-container-width); margin-left: auto; margin-right: auto; padding-left: var(--bf-gutter); padding-right: var(--bf-gutter); box-sizing: border-box; }
.bf-skip { position: absolute; left: -9999px; top: 0; }
.bf-skip:focus { left: 10px; z-index: 1000; padding: 8px 12px; background: #000; color: #fff; }

/* 헤더 / 푸터 (모양은 각 스킨이 정한다) */
.bf-region--header { position: relative; z-index: 100; }
.bf-region--header.is-sticky { position: sticky; top: 0; }
.bf-region--footer { margin-top: auto; }
.bf-slot { min-width: 0; }

/* 레이아웃 스킨 */
.bf-body { flex: 1; min-width: 0; }
.bf-body--side { display: grid; gap: 40px; align-items: start; padding-top: 30px; padding-bottom: 60px; }
.bf-body--right { grid-template-columns: minmax(0, 1fr) var(--bf-side-w, 280px); }
.bf-body--left { grid-template-columns: var(--bf-side-w, 260px) minmax(0, 1fr); }
.bf-body__main { min-width: 0; }

/* 본문: 그누보드 default.css 의 #container 고정폭 규칙을 덮어쓴다 (스킨 호환을 위해 아이디는 유지) */
#container.bf-container, #container.bf-main { float: none; width: auto; max-width: none; height: auto !important; min-height: 0; margin: 0; }
#container.bf-container.bf-inner { max-width: var(--bf-container-width); margin: 0 auto; padding: 30px var(--bf-gutter) 60px; }
.bf-body--side #container.bf-container { padding: 0; }
.bf-page-title { margin: 0 0 24px; font-size: 1.6rem; }
.bf-page-heading { max-width: var(--bf-container-width); margin: 40px auto 0; padding: 0 var(--bf-gutter); box-sizing: border-box; font-size: 2rem; }
.bf-body--side .bf-page-heading { margin-top: 0; padding: 0; }

/* 블록 영역: 영역 → 줄(row) → 12칸 그리드 블록 */
.bf-area { padding-top: var(--bf-pt, 0); padding-bottom: var(--bf-pb, 0); }
.bf-row { max-width: var(--bf-container-width); margin: 0 auto; padding: 0 var(--bf-gutter); box-sizing: border-box; }
.bf-row + .bf-row { margin-top: var(--bf-gap, 40px); }
.bf-row--bleed { max-width: none; padding: 0; }
.bf-blocks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bf-gap, 40px); align-items: start; }
.bf-block { grid-column: span 12; min-width: 0; margin-top: var(--bf-mt, 0); margin-bottom: var(--bf-mb, 0); }
.bf-block--w-3-4 { grid-column: span 9; }
.bf-block--w-2-3 { grid-column: span 8; }
.bf-block--w-1-2 { grid-column: span 6; }
.bf-block--w-1-3 { grid-column: span 4; }
.bf-block--w-1-4 { grid-column: span 3; }
.bf-row--bleed > .bf-block { margin-top: var(--bf-mt, 0); margin-bottom: var(--bf-mb, 0); }

/* 사이드 영역과 사이드 레이아웃 안의 본문은 바깥 폭을 따르므로 줄 여백을 없앤다 */
.bf-body--side .bf-row, .bf-area--side .bf-row { max-width: none; padding: 0; }
.bf-area--side .bf-block { grid-column: span 12; }

/* 블록 제목 줄 */
.bf-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--bf-color-text); }
.bf-bh__title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.bf-bh__more { display: inline-flex; align-items: center; gap: 2px; color: var(--bf-color-muted); font-size: .85rem; text-decoration: none; white-space: nowrap; }
.bf-bh__more:hover { color: var(--bf-color-primary); }

/* 서식 있는 글 (글 편집기 결과) */
.bf-richtext { line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.bf-richtext > :first-child { margin-top: 0; }
.bf-richtext > :last-child { margin-bottom: 0; }
.bf-richtext img { max-width: 100%; height: auto; }
.bf-richtext a { color: var(--bf-color-primary); }

/* 공통 유틸리티 */
.bf-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
.bf-text-left { text-align: left; }
.bf-text-center { text-align: center; }
.bf-text-right { text-align: right; }
.bf-justify-left { justify-content: flex-start; }
.bf-justify-center { justify-content: center; }
.bf-justify-right { justify-content: flex-end; }
.bf-missing { padding: 12px; border: 1px dashed #f59e0b; border-radius: 4px; color: #b45309; font-size: .85rem; }

/* 태블릿: 1/3, 1/4 블록은 두 개씩 */
@media (min-width: 769px) and (max-width: 1024px) {
    .bf-block--w-1-3, .bf-block--w-1-4 { grid-column: span 6; }
    .bf-body--side { grid-template-columns: minmax(0, 1fr); }
    .bf-hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
    .bf-hide-pc { display: none !important; }
}

/* 모바일: 모든 블록 한 줄 */
@media (max-width: 768px) {
    :root { --bf-gutter: 16px; }

    .bf-area { --bf-gap: var(--bf-gap-m, var(--bf-gap, 40px)); }
    .bf-blocks { grid-template-columns: minmax(0, 1fr); }
    .bf-block, .bf-block[class*="bf-block--w-"] { grid-column: 1 / -1; }
    .bf-body--side { grid-template-columns: minmax(0, 1fr); padding-top: 20px; padding-bottom: 40px; }
    .bf-body--left .bf-body__side { order: 2; }
    .bf-page-heading { margin-top: 24px; font-size: 1.5rem; }
    .bf-hide-mobile { display: none !important; }
}

/* 편집 권한이 있는 관리자에게만 보이는 편집 버튼 */
.bf-edit-fab { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 999px; background: #1f2937; color: #fff !important; font: 600 14px/1 -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transition: transform .15s, background-color .15s; }
.bf-edit-fab:hover, .bf-edit-fab:focus { background: #0ea5e9; transform: translateY(-2px); }
.bf-edit-fab .bf-icon { font-size: 18px; }
.bf-edit-fab--locked { background: #6b7280; }
.bf-edit-fab--locked:hover, .bf-edit-fab--locked:focus { background: #4b5563; }
@media print { .bf-edit-fab { display: none; } }