/**
 * 빅풋캠핑 — NSKit v2 레이어 골격을 가이드 모양으로 (SCENE · PAGE · PANEL · DIALOG)
 *
 * 레이어 선택 = methodology #3 / LAYOUT_CONTRACT_V2 §0-b
 *   SCENE  = GNB 탭 최상위(홈·매거진·스토리·스크랩·마이)      #scene-area
 *   PAGE   = 1뎁스 풀스크린 상세(스택)                          #sub-page-area
 *   PANEL  = 옵션 선택·폼 — 빅풋은 전부 'bottom' 시트           #side-panel-area
 *   DIALOG = 확인·안내 팝업 / 전면형(로그인·이미지 뷰어)        #dialog-area
 *   PART   = 재사용 조합(templates/parts)
 *
 * 원칙: 프레임워크가 골격(스택·뒤로가기·dim)을 소유하고, 모양만 여기서 입힌다.
 *       화면 안 좌우 여백은 각 화면이 --bf-gutter 로 준다(프레임워크 기본 16/12 패딩을 0 으로).
 */

/* ━━ 앱 셸 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bf-surface); }
.bf-app { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bf-surface); }
.bf-app__scenes { position: relative; flex: 1; min-height: 0; }
.bf-app__scenes > div { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.bf-app__scenes > div::-webkit-scrollbar { display: none; }
/* 스크롤바 = 앱 전체에서 숨김(사용자 결정 2026-09-27). 원본(.pen)은 모바일 앱이라 스크롤바가 없고, PC 프레임에서 페이지·시트·캐러셀마다 기본 막대가 생겨 430 안짝을 갉아먹었다. 스크롤 자체(휠·터치)는 그대로 */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
.bf-app__gnb { flex: none; }
/* 넓은 화면: 셸도 엔진 레이어와 같은 폰 프레임에 가둔다(cm 121 — 폭의 소유자는 --nskit-frame-w 하나).
   엔진(nskit-layout.css)은 PAGE/PANEL/DIALOG 만 가두고 앱 셸은 앱 책임이라고 적어 둔다.
   transform = 셸 안의 fixed 요소(스토리 FAB 등)가 창이 아니라 프레임에 붙게 하는 컨테이닝 블록. */
@media (min-width: 500px) {
    html[data-nskit-mode="mobile"] body { background: var(--bf-fill); }
    html[data-nskit-mode="mobile"] .bf-app { left: 50%; right: auto; width: var(--nskit-frame-w); margin-left: calc(var(--nskit-frame-w) / -2); transform: translateZ(0); }
}

/* 씬 공통 — 상단 안전영역은 씬 헤더가 소유한다 */
.bf-scene { min-height: 100%; background: var(--bf-surface); padding-top: var(--bf-safe-top); box-sizing: border-box; }
.bf-scene--fill2 { background: var(--bf-fill-2); }
.bf-scene__sticky { position: sticky; top: 0; z-index: 5; background: var(--bf-surface); }

/* ━━ PAGE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sub-page-container { background: var(--bf-surface); }
.sub-page-header { height: auto; min-height: 0; padding: var(--bf-safe-top) 0 0; border: 0; background: var(--bf-surface); display: block; }
.sub-page-header .bf-header .ns-icon.page-back { font-style: normal; }
.sub-page-content { padding: 0 !important; background: var(--bf-surface); }
.sub-page-container.bf-page--fill2 .sub-page-content { background: var(--bf-fill-2); }
.sub-page-footer { padding: 0; border: 0; background: var(--bf-surface); }
/* 헤더 없는 풀블리드 페이지(캠핑장·매거진 상세) — 오버레이 헤더가 안전영역을 소유 */
.sub-page-container.no-header .sub-page-content { padding-top: 0 !important; }
.bf-overlay-bar { position: sticky; top: 0; z-index: 10; margin-bottom: calc(-1 * (var(--bf-h-header) + var(--bf-safe-top))); padding-top: var(--bf-safe-top); transition: background .2s, box-shadow .2s; }
.bf-overlay-bar.is-solid { background: var(--bf-surface); box-shadow: inset 0 -1px 0 var(--bf-line); }
.bf-overlay-bar.is-solid .bf-header { background: var(--bf-surface); }

/* 화면 안 공통 블록 */
.bf-section { padding: 32px var(--bf-gutter) 0; }
.bf-section--tight { padding-top: 24px; }
.bf-stack { display: flex; flex-direction: column; gap: 24px; }
.bf-stack--16 { gap: 16px; } .bf-stack--12 { gap: 12px; } .bf-stack--8 { gap: 8px; }
.bf-bottom-space { height: calc(40px + var(--bf-safe-bot)); }

/* ━━ PANEL = 바텀시트 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#side-panel-area .nskit-dim { background: var(--bf-ink); }                     /* opacity 는 show 옵션(0.6 = 원본 #00000099) */
.side-panel-container.bottom { border-radius: var(--bf-r-sheet) var(--bf-r-sheet) 0 0; overflow: hidden; background: var(--bf-surface); }
.side-panel-container.bottom .side-panel-content { padding: 0 !important; display: flex; flex-direction: column; }
.side-panel-container.bottom.bf-sheet--gray,
.side-panel-container.bottom.bf-sheet--gray .side-panel-content { background: var(--bf-fill); }
.bf-sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bf-sheet-foot { flex: none; }

/* ━━ DIALOG ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bf-dialog-center { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 0 16%; box-sizing: border-box; }
.bf-dialog-full { position: fixed; inset: 0; background: var(--bf-surface); overflow-y: auto; padding-top: var(--bf-safe-top); }
.bf-dialog-full--dark { background: var(--bf-ink); }

/* 페이지 하단 고정 바 (BF.pageFooter) — 컨테이너가 flex 열이라 본문 아래에 붙는다 */
.bf-page-foot { flex: none; background: var(--bf-surface); }

/* 프레임워크 DIALOG.toast 는 인라인으로 명조체(Cormorant Garamond)·반경 4 를 박아 둔다(v2 결함) → 가이드로 덮는다 */
.nskit-toast { font-family: var(--bf-font) !important; letter-spacing: 0 !important; border-radius: var(--bf-r) !important;
               bottom: calc(var(--bf-h-gnb) + 20px + var(--bf-safe-bot)) !important; max-width: calc(100% - 48px); text-align: center; }

/* 프레임워크 DIALOG 상자를 벗긴다 — 빅풋 다이얼로그는 자기 골격(.bf-popup-host / 전면형)을 그린다. dlg.$container.addClass('bf-dlg-bare') */
.dialog-container.bf-dlg-bare { position: absolute; inset: 0; max-width: none; max-height: none; background: transparent; box-shadow: none; border-radius: 0; }
.dialog-container.bf-dlg-bare > .dialog-content { width: 100% !important; height: 100%; max-height: none; }
/* PC(모바일 프레임 모드)에서 엔진이 다이얼로그에 max-width 388 을 건다 — 벗긴 다이얼로그(이미지 뷰어 등)는 프레임 430 을 채운다 */
html[data-nskit-mode="mobile"] .dialog-container.bf-dlg-bare { max-width: none; }