/* 앱 틀 — 머리말·메가 메뉴·서랍·하위 비주얼·경로 바·바닥글·떠 있는 단추·관리자 틀(includes/layout.php)
   배치는 참고 사이트(흰 머리 + 큰 메가 메뉴, 하위 상단 비주얼 + 경로 바, 사이트맵 바닥글)를 따르고 값은 토큰으로. */

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }

/* ── 머리말 ── 비주얼 위에서는 투명(흰 글자) → 내리거나 메뉴를 열면 흰 머리 */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; color: var(--on-dark); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--on-dark-line); transition: background var(--dur) var(--ease); }
.topbar-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-5); height: var(--topbar-h); max-width: 1680px; margin: 0 auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; }
.brand img { height: 26px; width: auto; }
@media (min-width: 960px) { .brand img { height: 30px; } }
.brand .logo-light { display: none; }
.topbar.is-solid, body:not(.is-home):not(.has-visual) .topbar { background: var(--bg); color: var(--text); box-shadow: 0 1px 0 var(--line); }
.topbar.is-solid::after, body:not(.is-home):not(.has-visual) .topbar::after { background: transparent; }
.topbar.is-solid .logo-light, body:not(.is-home):not(.has-visual) .topbar .logo-light { display: block; }
.topbar.is-solid .logo-dark, body:not(.is-home):not(.has-visual) .topbar .logo-dark { display: none; }
body:not(.is-home):not(.has-visual) > main { padding-top: var(--topbar-h); }

/* 메가 메뉴 — 넓은 화면(1200px~). 상위 8개가 같은 폭 열, 열면 하위가 그 아래 한꺼번에(흰 판) */
.gnb { display: none; flex: 1; height: 100%; }
.gnb-list { display: flex; justify-content: center; height: 100%; }
.gnb-item { position: relative; width: clamp(96px, 8.6vw, 140px); height: 100%; }
.gnb-top { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 var(--space-2); color: inherit; text-decoration: none; font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: -0.02em; white-space: nowrap; position: relative; }
.gnb-top::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 0; height: 3px; background: var(--brand); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.gnb-item:hover .gnb-top::after, .gnb-item.is-on .gnb-top::after, .gnb-top:focus-visible::after { transform: scaleX(1); }
.gnb-sub { position: absolute; top: 100%; left: 0; right: 0; min-height: 420px; padding: var(--space-6) var(--space-1); display: none; text-align: center; }   /* 판(.mega-back) 높이와 같게 — 열 구분선이 끝까지 */
.gnb-sub a { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: var(--space-1); color: var(--text-2); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.4; border-radius: var(--r-sm); }
.gnb-sub a:hover, .gnb-sub a:focus-visible, .gnb-sub a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); }
.gnb-item + .gnb-item .gnb-sub { border-left: 1px solid var(--line); }
.mega-back { position: absolute; z-index: 1; left: 0; right: 0; top: 100%; height: 420px; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(17, 23, 34, .3); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }   /* 높이 420 = 하위 최대 9개 × 40px + 위아래 여백. 높이는 움직이지 않고 투명도로 연다 */
.topbar.mega-open .gnb-sub { display: block; }
.topbar.mega-open .mega-back { opacity: 1; visibility: visible; }
.topbar-util { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.lang-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); color: inherit; text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .04em; opacity: .9; white-space: nowrap; }
.lang-link:hover { color: inherit; opacity: 1; text-decoration: underline; }
@media (min-width: 1200px) {
  .gnb { display: block; }
  .menu-btn { display: none; }
  .topbar-util { margin-left: 0; }
}

/* ── 모바일 서랍 ── */
.drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.drawer.is-open { display: block; }
.drawer-back { position: absolute; inset: 0; background: var(--overlay); animation: fade-in .2s var(--ease); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(90vw, 400px); background: var(--surface); color: var(--text); display: flex; flex-direction: column; padding: var(--space-3) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; animation: slide-in .24s var(--ease); height: 100vh; height: 100dvh; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; min-height: 56px; margin-bottom: var(--space-3); }
.drawer-head .brand .logo-light { display: block; }
.drawer-head .brand .logo-dark { display: none; }
.drawer-list > li { border-bottom: 1px solid var(--line); }
.drawer-list summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-bold); cursor: pointer; list-style: none; }
.drawer-list summary::-webkit-details-marker { display: none; }
.drawer-list summary svg { width: 20px; height: 20px; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.drawer-list details[open] summary { color: var(--brand-ink); }
.drawer-list details[open] summary svg { transform: rotate(180deg); }
.drawer-list ul { padding: 0 0 var(--space-3); display: grid; }
.drawer-list ul a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); color: var(--text-2); text-decoration: none; border-radius: var(--r-sm); }
.drawer-list ul a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-soft); font-weight: var(--weight-bold); }
.drawer-foot { margin-top: auto; padding-top: var(--space-5); }
.drawer-foot .lang-link { color: var(--text-2); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }

/* ── 하위 상단 비주얼 ── */
.sub-visual { position: relative; display: grid; align-items: center; min-height: var(--sub-visual-h); padding-top: var(--topbar-h); color: var(--on-dark); text-align: center; overflow: hidden; background: var(--dark); }
.sub-visual-bg { position: absolute; inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; transform: scale(1.06); animation: visual-in 2.4s var(--ease) forwards; }
.sub-visual-bg::after { content: ""; position: absolute; inset: 0; background: var(--scrim-center); }
.sub-visual-inner { position: relative; padding-block: var(--space-8); }
.sub-visual-en { font-size: var(--display-en); font-weight: var(--weight-heavy); letter-spacing: -0.01em; line-height: 1; }
.sub-visual-ko { margin-top: var(--space-3); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: -0.02em; }
.sub-visual-ko::after { content: ""; display: block; width: 72px; height: 3px; margin: var(--space-5) auto 0; background: var(--brand-on-dark); }
.sub-visual-lead { margin-top: var(--space-5); color: var(--on-dark-2); font-size: var(--text-md); font-weight: var(--weight-light); }
@media (min-width: 960px) { .sub-visual-ko { font-size: var(--text-3xl); } .sub-visual-lead { font-size: var(--text-lg); } }
@keyframes visual-in { to { transform: scale(1); } }

/* ── 경로 바(홈 · 상위 · 하위 드롭다운) ── */
.crumbs { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.crumbs-inner { display: flex; align-items: stretch; min-height: 56px; }
.crumb-home { display: grid; place-items: center; width: 56px; flex: none; color: var(--text-2); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.crumb-home svg { width: 18px; height: 18px; }
.crumb-drop { position: relative; flex: 1 1 0; min-width: 0; border-right: 1px solid var(--line); }
@media (min-width: 600px) { .crumb-drop { flex: 0 0 240px; } }
.crumb-drop summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: 100%; min-height: 56px; padding: 0 var(--space-4); cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.crumb-drop summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumb-drop summary::-webkit-details-marker { display: none; }
.crumb-drop summary svg { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: transform var(--dur) var(--ease); }
.crumb-drop[open] summary svg { transform: rotate(180deg); }
.crumb-drop ul { position: absolute; left: -1px; right: -1px; top: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-top: 0; box-shadow: var(--shadow-card); padding: var(--space-2) 0; max-height: 60vh; overflow-y: auto; }
.crumb-drop ul a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); color: var(--text-2); text-decoration: none; font-size: var(--text-sm); }
.crumb-drop ul a:hover { background: var(--surface-2); color: var(--text); }
.crumb-drop ul a[aria-current] { color: var(--brand-ink); font-weight: var(--weight-bold); }

/* ── 페이지 제목·본문 ── */
.page-title { padding-top: var(--space-9); text-align: center; }
.page-title h2 { font-size: var(--display-sm); font-weight: var(--weight-heavy); }
.page-body { padding-block: var(--space-8) var(--space-10); }
.narrow-body { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* ── 바닥글 ── */
.foot { background: var(--foot-bg); color: var(--foot-text); font-size: var(--text-sm); }
.foot a { color: var(--foot-text); text-decoration: none; }
.foot a:hover { color: var(--on-dark); }
.foot-main { display: grid; gap: var(--space-7); padding-block: var(--space-8); }
.foot-map { display: none; }
@media (min-width: 960px) {
  .foot-main { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-8); }
  .foot-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-6) var(--space-5); padding-right: var(--space-8); border-right: 1px solid var(--foot-line); }
}
.foot-col-t { color: var(--on-dark); font-size: var(--text-md); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.foot-col ul { display: grid; }
.foot-col a { display: inline-flex; min-height: 40px; min-width: 40px; align-items: center; color: var(--foot-text-2); }
.foot-side { display: grid; gap: var(--space-5); align-content: start; }
.family { position: relative; }
.family summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 var(--space-5); border-radius: var(--r-full); background: var(--foot-pill); color: var(--on-dark); font-weight: var(--weight-bold); font-size: var(--text-sm); letter-spacing: .02em; cursor: pointer; list-style: none; }
.family summary::-webkit-details-marker { display: none; }
.family summary svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.family[open] summary svg { transform: rotate(180deg); }
.family ul { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--foot-pill); border-radius: var(--r); padding: var(--space-2); box-shadow: var(--shadow-2); z-index: 5; }
.family ul a { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--r-sm); }
.family ul a:hover { background: var(--foot-pill-hover); }
.foot-sns { display: flex; gap: var(--space-2); }
.foot-sns a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-full); background: var(--foot-chip); color: var(--on-dark); }
.foot-sns a:hover { background: var(--brand); }
.foot-sns svg { width: 20px; height: 20px; }
.foot-cs p { color: var(--foot-text-2); }
.foot-cs a { color: var(--on-dark); font-size: var(--text-3xl); font-weight: var(--weight-heavy); letter-spacing: -0.02em; display: inline-flex; min-height: 44px; align-items: center; }
.foot-agency { justify-self: start; border-radius: var(--r-full); }
.foot a.btn-primary, .foot a.btn-primary:hover { color: var(--on-brand); }   /* 바닥글 링크 색(.foot a)이 단추 글자를 덮지 않게 */
.foot-bottom { background: var(--foot-bg-2); border-top: 1px solid var(--foot-line); }
.foot-bottom-inner { display: grid; gap: var(--space-3); padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.foot-policy { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.foot-policy a { display: inline-flex; align-items: center; min-height: 40px; color: var(--foot-text); }
.foot-policy a.strong { color: var(--on-dark); font-weight: var(--weight-bold); }
.foot-info { display: grid; gap: var(--space-1); color: var(--foot-text-2); font-size: var(--text-xs); line-height: 1.8; }
.foot-info p { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.foot-info b { color: var(--foot-text); font-weight: var(--weight-medium); margin-right: 2px; }
.fi-name { color: var(--foot-text); font-weight: var(--weight-bold); }
.foot-copy { color: var(--foot-text-2); font-size: var(--text-xs); letter-spacing: .02em; }

/* 떠 있는 「대리점 찾기」 단추(닫을 수 있음 — 닫으면 이번 방문 동안 숨김) */
.float-agency { position: fixed; left: var(--space-4); bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); z-index: 50; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--r-full); background: var(--bg); box-shadow: var(--shadow-2); }
.float-agency a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-size: var(--text-sm); font-weight: var(--weight-bold); text-decoration: none; }
.float-agency a:hover { background: var(--brand-hover); color: var(--on-brand); }
.float-agency a svg { width: 18px; height: 18px; }
.float-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-2); }
.float-close:hover { background: var(--surface-2); }
.float-close svg { width: 18px; height: 18px; }
.float-agency.is-hidden { display: none; }
.float-agency { transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease), transform var(--dur) var(--ease); }
.float-agency.is-away { opacity: 0; visibility: hidden; transform: translateY(12px); }   /* 첫 화면: 본문을 가릴 자리에서는 비킨다(app.js fullpage) */

/* ── 간단 틀(관리자 로그인) ── */
.simple { display: grid; place-items: center; padding: var(--space-8) var(--gutter); background: var(--admin-bg); }
.simple-box { width: min(100%, 420px); }

/* ── 관리자 틀(§5 — 따로 사이드바·머리말 「관리자」 표시) ── */
.shell-admin { background: var(--admin-bg); }
.adminbar { position: sticky; top: 0; z-index: 50; background: var(--admin-bar); color: var(--admin-bar-text); }
.adminbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 60px; padding-inline: var(--space-4); }
.admin-title { display: flex; align-items: center; gap: var(--space-3); }
.admin-brand { display: inline-flex; align-items: center; min-height: 44px; }
.admin-brand img { height: 22px; width: auto; }
.admin-tag { padding: 2px var(--space-2); border-radius: var(--r-sm); border: 1px solid var(--admin-tag); color: var(--admin-tag); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.admin-util { display: flex; align-items: center; gap: var(--space-2); }
.admin-util .to-site { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); color: var(--on-dark-2); font-size: var(--text-sm); text-decoration: none; }
.admin-util .to-site:hover { color: var(--on-dark); }
.admin-util .icon-btn:hover, .admin-title .icon-btn:hover { background: rgba(255, 255, 255, .1); }
.admin { display: grid; min-height: calc(100vh - 60px); }
.admin-side { display: none; background: var(--admin-side); border-right: 1px solid var(--line); padding: var(--space-4) var(--space-3); }
.admin-side.is-open { display: block; }
.admin-side .nav-group { margin: var(--space-4) var(--space-3) var(--space-2); color: var(--text-3); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .04em; }
.admin-side .nav-group:first-child { margin-top: 0; }
.admin-side a { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3); border-radius: var(--r-sm); color: var(--text-2); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.admin-side a:hover { background: var(--surface-2); color: var(--text); }
.admin-side a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--weight-bold); }
.admin-side a svg { width: 18px; height: 18px; flex: none; }
.admin-side .count { margin-left: auto; min-width: 24px; padding: 0 6px; border-radius: var(--r-full); background: var(--danger); color: var(--on-dark); font-size: var(--text-xs); font-weight: var(--weight-bold); text-align: center; line-height: 22px; }
.admin-main { min-width: 0; padding: var(--space-6) var(--space-4) var(--space-9); display: grid; gap: var(--space-5); align-content: start; }
.admin-main > h1, .admin-main .row-between > h1 { font-size: var(--text-2xl); }
@media (min-width: 960px) {
  .admin { grid-template-columns: 240px minmax(0, 1fr); }
  .admin-side { display: block; position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; }
  .admin-menu-btn { display: none; }
  .admin-main { padding: var(--space-7) var(--space-7) var(--space-9); }
}