/* ───────── widocs ver 2.0 공통 기준(2026-10-08 사용자 결정 1A·2A) — 세션 1(공용 파일 담당) ─────────
 * functions.php 가 2.0 자식 테마의 모든 페이지에 싣는다(핸들 widocs-v2-common).
 *
 * 1A) .v2-container — PC 본문 좌우 끝을 1.0 헤더 끝선에 맞춘다.
 *     헤더 실측(.container.header__inner, 1.0 main.css): max-width 1200px · 좌우 padding 24px(≤767px 16px) · border-box · 가운데.
 *       1440 → 로고 137 / 로그인 끝 1289 (내용 폭 1152)   1280 → 57 / 1209   1024 → 24 / 985   768 → 24 / 729   390 → 16 / 359
 *     ⇒ 페이지 바깥 틀(max-w-[1140px] mx-auto px-… 등)을 지우고 class="v2-container" 하나로 바꾼다. 배경 띠(w-full)는 바깥에 두고 그 안쪽에 쓴다.
 *
 * 2A) .v2-bbar — 모바일(≤767px) 하단 고정 바 한 가지 모양: 화면 끝까지 흰 바 + 버튼.
 *     바 높이 64px(위아래 8 + 버튼 48) + safe-area · 위쪽 옅은 테두리·그림자 · 버튼 48px·둥글기 12px·글자 14px/600·아이콘 18px(버튼 3개가 390 폭에 한 줄로 다 들어가는 크기).
 *     바가 있으면 #scrollTop 을 바 위로, 푸터 아래 여백(바 + 맨 위로 버튼)을 자동으로 넣는다(아래 규칙 — 페이지 쪽 개별 규칙은 지운다).
 */

/* ── 1A 본문 틀 ── */
.v2-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
@media (max-width: 767px) { .v2-container { padding-left: 16px; padding-right: 16px; } }

/* ── 2A 모바일 하단 바 ──
 *   선택자 앞머리 .v2-bbar.v2-bbar:not(#v2-bbar-boost) = 우선순위 (1,2,0)+ — 페이지 초기화 규칙(#page-…[data-v2] :where(a) · .wd-pd[data-v2] a · button 초기화,
 *   페이지 스코프 Tailwind 유틸리티 #page[data-v2] .x)보다 높게 해서 페이지 CSS 에 공통 값을 다시 적지 않아도 되게 함(10-08 세션 3 보고). */
:root { --v2-bbar-h: 64px; --v2-bbar-safe: env(safe-area-inset-bottom, 0px); }
.v2-bbar { display: none; }
@media (max-width: 767px) {
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; gap: 8px;
    height: calc(var(--v2-bbar-h) + var(--v2-bbar-safe)); padding: 8px 16px calc(8px + var(--v2-bbar-safe));
    background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -4px 16px rgb(15 23 42 / .06);
    box-sizing: border-box; margin: 0; border-radius: 0; max-width: none; width: auto;
  }
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn {
    flex: 1 1 0; min-width: 0; height: 48px; padding: 0 8px; border: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; cursor: pointer; box-shadow: none;
  }
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn svg, .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn .v2-ico { width: 18px; height: 18px; flex: 0 0 auto; }
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--primary { background: #004790; color: #fff; }
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--primary:hover, .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--primary:active { background: #003a75; color: #fff; }
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--sub { background: #eff4ff; color: #004790; }
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--sub:hover, .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--sub:active { background: #e6eeff; color: #004790; }
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--wide { flex-grow: 1.6; }                       /* 주 버튼을 넓게 쓸 때 */
  .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn.v2-bbar__btn--icon { flex: 0 0 48px; width: 48px; padding: 0; } /* 아이콘만(저장·공유 등) — aria-label 필수 */

  /* 바가 있는 페이지: 「맨 위로」를 바 위로 · 푸터 마지막 줄이 바·버튼에 가리지 않게 여백 */
  body:has(.v2-bbar) #scrollTop { bottom: calc(var(--v2-bbar-h) + 12px + var(--v2-bbar-safe)) !important; }
  /* 따라다니는 공유(부모 #shareFab, 2026-10-14 운영 동기화로 전 페이지에 들어옴) — 「맨 위로」 바로 위 칸. 종전엔 바가 있는 2.0 페이지에서 「맨 위로」와 겹쳤다(10-20 실측).
     글쓰기·목차 떠 있는 버튼이 있으면 한 칸 더 위(부모 슬롯 3 규칙과 같은 계산). */
  body:has(.v2-bbar) #shareFab { bottom: calc(var(--v2-bbar-h) + 12px + var(--v2-bbar-safe) + var(--scroll-top-size, 40px) + var(--float-gap, 10px)) !important; }
  body:has(.v2-bbar):has(.write-cta-fab) #shareFab,
  body:has(.v2-bbar):has(.column-article__toc-fab.is-ready) #shareFab { bottom: calc(var(--v2-bbar-h) + 12px + var(--v2-bbar-safe) + 2 * (var(--scroll-top-size, 40px) + var(--float-gap, 10px))) !important; }
  body:has(.v2-bbar) .footer { padding-bottom: calc(var(--v2-bbar-h) + 40px + 24px + var(--v2-bbar-safe) + var(--scroll-top-size, 40px) + var(--float-gap, 10px)) !important; }
}

/* 변형: 모바일에서 좌우 여백 없이 화면 끝까지(가로로 넘기는 카드 띠 등) — PC 는 .v2-container 와 같음 */
@media (max-width: 767px) { .v2-container.v2-container--edge { padding-left: 0; padding-right: 0; } }
/* 아주 좁은 폰(≤374px): 버튼 3개가 한 줄에 다 들어가게 글자·여백만 한 단계 줄임 */
@media (max-width: 374px) { .v2-bbar.v2-bbar:not(#v2-bbar-boost) { gap: 6px; padding-left: 12px; padding-right: 12px; } .v2-bbar.v2-bbar:not(#v2-bbar-boost) .v2-bbar__btn { padding: 0 4px; font-size: 13px; gap: 3px; } }

/* ── 브레드크럼 통일(10-08 사용자 「이런 거 맞춰줘」) ──
 *   .v2-bc      = 브레드크럼 글자 12px(줄 높이 18px) — 안의 링크·구분자·현재 위치까지 같은 크기
 *   .v2-bc-top  = 헤더 바로 아래 첫 줄에 붙여, 헤더 아래 → 브레드크럼 글자 위 간격 PC 16px · 모바일 12px */
.v2-bc, .v2-bc * { font-size: 12px !important; line-height: 18px !important; }
.v2-bc-top { padding-top: 16px !important; }
@media (max-width: 767px) { .v2-bc-top { padding-top: 12px !important; } }