/* ============================================================
   gnb.css — 통합 상단바(GNB) + 전체메뉴 오버레이 단일 소스
   랜딩(index/alt_flow) · 전 서브페이지 공통 로드. AP.header(common.js)가 마크업 주입.
   토큰(--gnb-h,--line,--accent,--ink,--bg,--bg-2,--dark,--w-line,--w-65,--r,--ease,--fs-*)은
   각 페이지 :root(랜딩 인라인 / style.css)에서 제공.
   투명 모드: (a)서브 body[data-nav="dark"]+.clear  (b)랜딩 body.gnb-fixed+body.nav-dark(FLOW 밝기 토글)
   ============================================================ */

/* ---- 아이콘 기본(랜딩은 style.css 미로드 → gnb.css가 .ic 제공. 서브는 style.css와 동일값) ---- */
.ic { display: inline-flex; flex: none; }
.ic svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 포커스 링(접근성 — 랜딩 포함 전 페이지 일관, style.css와 동일값) ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- 페이지 전환 진행바(AP.header 주입 .pgbar — 내부 링크 클릭 시 발화) ---- */
.pgbar { position: fixed; top: 0; left: 0; right: 0; height: 2.5px; z-index: 220; pointer-events: none; }
.pgbar i { display: block; height: 100%; width: 0; background: var(--accent); opacity: 0; }
.pgbar.on i { animation: pgfill 1.4s cubic-bezier(.2, .65, .3, 1) forwards; }
@keyframes pgfill { 0% { width: 0; opacity: 1; } 55% { width: 58%; } 100% { width: 84%; opacity: 1; } }
html.shot .pgbar { display: none; }
@media (prefers-reduced-motion: reduce) { .pgbar { display: none; } }

/* ---- 폼 제출 도트 로더(AP.busy — 라벨 숨김은 font-size:0, 도트=currentColor) ---- */
.btn.btn-busy { font-size: 0; }
.btn.btn-busy .ic { display: none; }
.btn-dots { display: inline-flex; gap: 6px; }
.btn-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: btndot .9s infinite both; }
.btn-dots i:nth-child(2) { animation-delay: .15s; }
.btn-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes btndot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }

/* ---- 토스트(AP.toast — KOR 버튼 등 GNB 유틸이 사용, 랜딩은 style.css 미로드라 여기서 제공) ---- */
.toast { position: fixed; left: 50%; bottom: 32px; z-index: 300; transform: translate(-50%, 16px); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px); background: var(--dark); color: #fff; padding: 14px 24px; border-radius: var(--r); font-size: var(--fs-small); font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { color: var(--accent); }

/* ---- 본문 바로가기 ---- */
.skip { position: fixed; left: 16px; top: -64px; z-index: 200; display: inline-flex; align-items: center; height: 44px; padding: 0 24px; background: var(--dark); color: #fff; font-size: var(--fs-small); font-weight: 700; border-radius: var(--r); transition: top .3s var(--ease); }
.skip:focus-visible { top: 16px; }

/* 고정/스티키 GNB에 가려지지 않도록 앵커·키보드 포커스 착지 보정 */
html { scroll-padding-top: calc(var(--gnb-h, 76px) + 12px); }

/* ---- GNB ---- */
.gnb { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: background-color .35s var(--ease), border-color .35s var(--ease); }
.gnb-in { display: flex; align-items: stretch; height: var(--gnb-h); padding-left: 40px; }
.brand { display: inline-flex; align-items: center; align-self: center; }
.logo-img { display: block; height: 32px; width: auto; }
.logo-w { display: none; }
.gnb-nav { margin-left: 64px; display: flex; }
.gnb-nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.gnb-nav li { display: flex; }
.gnb-nav a { position: relative; display: inline-flex; align-items: center; height: var(--gnb-h); font-size: var(--fs-body); font-weight: 400; color: inherit; transition: color .3s var(--ease); }
.gnb-nav a:hover { color: var(--accent-ink); }
body.nav-dark .gnb .gnb-nav a:hover, .gnb.clear .gnb-nav a:hover { color: var(--accent); }
.gnb-nav li.on a { font-weight: 700; }
.gnb-nav li.on a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }

/* ── GNB 소제목 드롭다운 — hover/focus 시 해당 탭 아래 패널, 클릭=섹션 앵커 스크롤 ── */
.gnb-nav li { position: relative; }
/* 하위 메뉴 — 헤더 아래 전폭 서브바 (2026-08-25: 본문 위에 뜨는 패널 폐지, D안) */
.gnb-drop {
  position: fixed; left: 0; right: 0; top: var(--gnb-h, 72px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  padding: 12px 24px 12px 0; border-radius: 0; /* padding-left는 common.js가 상위 메뉴 위치로 맞춤 */
  background: rgba(255, 255, 255, .98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0; box-shadow: 0 10px 20px rgba(10, 20, 15, .05);
  opacity: 0; visibility: hidden; transition: opacity .18s var(--ease), visibility .18s;
  z-index: 120;
}
.gnb-nav li:hover .gnb-drop, .gnb-nav li:focus-within .gnb-drop { opacity: 1; visibility: visible; }
.gnb-drop a {
  display: inline-flex; align-items: center; height: auto; padding: 8px 20px;
  font-size: var(--fs-small); font-weight: 400; color: var(--ink); white-space: nowrap;
  transition: color .2s var(--ease);
}
.gnb-drop a:hover { background: transparent; color: var(--accent-ink); }
.gnb-nav li.on .gnb-drop a { font-weight: 400; } /* on 탭 굵기 상속 차단 */
.gnb-nav li.on .gnb-drop a::after { display: none; }
/* 다크(투명) 헤더 — 서브바도 다크 글래스 30% (배경 영상이 비치는 유리 띠, 2026-08-25) */
body.nav-dark .gnb .gnb-drop, .gnb.clear .gnb-drop {
  background: rgba(10, 15, 13, .30);
  backdrop-filter: blur(20px) saturate(1.1); -webkit-backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
body.nav-dark .gnb .gnb-drop a, .gnb.clear .gnb-drop a { color: #fff; }
body.nav-dark .gnb .gnb-drop a:hover, .gnb.clear .gnb-drop a:hover { background: transparent; color: var(--accent); }
.gnb-util { margin-left: auto; display: flex; align-items: stretch; }
.ucell { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 76px; padding: 0 24px; border-left: 1px solid var(--line); font-size: var(--fs-small); font-weight: 400; color: inherit; transition: background-color .3s var(--ease), color .3s var(--ease); }
.ucell:hover { background: var(--bg-2); }
.ucell-ic { width: 76px; min-width: 0; padding: 0; }

/* ---- 다크 히어로 위 투명 모드 ----
   (a) 서브: body[data-nav="dark"] → fixed, .clear(스크롤 상단, common.js가 토글)
   (b) 랜딩: body.gnb-fixed(항상 fixed) + body.nav-dark(FLOW 엔진 밝기 토글) */
body[data-nav="dark"] .gnb { position: fixed; top: 0; left: 0; right: 0; }
body[data-nav="dark"] .hero { min-height: 100dvh; }
body.gnb-fixed .gnb { position: fixed; top: 0; left: 0; right: 0; }

.gnb.clear, body.nav-dark .gnb { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: rgba(255, 255, 255, .14); color: #fff; }
/* 랜딩 다크 구간에서 히어로를 지나 스크롤되면 스크림 — 본문(클로징 밴드 제목 등)이 메뉴 글자와 겹쳐 보이는 것 방지 */
body.nav-dark.gnb-scrolled .gnb { background: rgba(13, 19, 16, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gnb.clear .logo-c, body.nav-dark .gnb .logo-c { display: none; }
.gnb.clear .logo-w, body.nav-dark .gnb .logo-w { display: block; }
.gnb.clear .ucell, body.nav-dark .gnb .ucell { border-left-color: rgba(255, 255, 255, .18); }
.gnb.clear .ucell:hover, body.nav-dark .gnb .ucell:hover { background: rgba(255, 255, 255, .08); }

/* ---- 전체메뉴 오버레이 ---- */
/* 전체메뉴 — 대메뉴 아래 소제목: 소자·옅은 톤·가로 나열(대메뉴 fs-h2 700과 위계 분리) */
.am-subs { list-style: none; margin: 2px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.am-subs a {
  display: inline-flex; font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; line-height: 1.5;
  color: rgba(255, 255, 255, .62); text-decoration: none; border-bottom: 0;
  transition: color .2s var(--ease);
}
.am-subs a:hover { color: #fff; }

.allmenu { position: fixed; inset: 0; z-index: 150; background: var(--dark); color: #fff; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease); overflow-y: auto; }
.allmenu.open { opacity: 1; visibility: visible; }
.allmenu-top { display: flex; align-items: stretch; justify-content: space-between; height: var(--gnb-h); padding-left: 40px; border-bottom: 1px solid var(--w-line); }
.allmenu-top .brand { align-self: center; }
.allmenu .ucell { border-left: 1px solid var(--w-line); }
.allmenu .ucell:hover { background: rgba(255, 255, 255, .08); }
.ic-x { transform: rotate(45deg); }
.allmenu-body { max-width: 1280px; margin: 0 auto; padding: 64px 40px 96px; }
.allmenu-search { display: flex; align-items: center; gap: 12px; max-width: 560px; border: 1px solid var(--w-line); border-radius: var(--r); padding: 0 8px 0 24px; height: 48px; }
.allmenu-search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; color: #fff; font-size: var(--fs-body); }
.allmenu-search input::placeholder { color: var(--w-65); }
.allmenu-search button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--w-65); transition: color .3s var(--ease); }
.allmenu-search button:hover { color: var(--accent); }
.allmenu-nav, .allmenu-nav ul { list-style: none; margin: 0; padding: 0; }
.allmenu-nav { margin-top: 8px; } /* 통합검색 폼 숨김 후 여백 축소 */
.allmenu-nav > li { border-bottom: 1px solid var(--w-line); }
.allmenu-nav > li:first-child { border-top: 1px solid var(--w-line); }
.allmenu-nav > li > a { display: inline-flex; align-items: center; gap: 16px; padding: 18px 0 14px; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: inherit; transition: color .3s var(--ease), transform .3s var(--ease); }
.allmenu-nav > li > a:hover { color: var(--accent); transform: translateX(16px); }
.allmenu .allmenu-nav > li { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.allmenu.open .allmenu-nav > li { opacity: 1; transform: none; }
.allmenu.open .allmenu-nav > li:nth-child(2) { transition-delay: .04s; }
.allmenu.open .allmenu-nav > li:nth-child(3) { transition-delay: .08s; }
.allmenu.open .allmenu-nav > li:nth-child(4) { transition-delay: .12s; }
.allmenu.open .allmenu-nav > li:nth-child(5) { transition-delay: .16s; }
.allmenu.open .allmenu-nav > li:nth-child(6) { transition-delay: .2s; }
.allmenu.open .allmenu-nav > li:nth-child(n+7) { transition-delay: .24s; }
.allmenu-sub { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 48px; }
.allmenu-sub a { font-size: var(--fs-body); font-weight: 400; color: var(--w-65); transition: color .3s var(--ease); }
.allmenu-sub a:hover { color: #fff; }

/* ============================================================
   통합 푸터(AP.footer — 랜딩·서브 공통 단일 소스)
   랜딩 워드마크·3열 사이트맵 + 서브 법정정보·연락처 병합.
   랜딩은 배경 보간이 다크를 제공하므로 인라인에서 .ft{background:transparent} 오버라이드.
   ============================================================ */
.ft { background: var(--dark); color: #fff; padding: 96px 0 40px; }
.ft-in { max-width: 1360px; margin: 0 auto; padding: 0 48px; }
.ft-mark { font-size: clamp(40px, 11vw, 164px); font-weight: 700; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.ft-mark .ap { color: var(--accent); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px 24px; margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--w-line); }
.ft-info p { color: var(--w-65); font-size: 13.5px; line-height: 1.9; }
.ft-info .ft-name { color: #fff; font-weight: 700; font-size: var(--fs-small); margin-bottom: 6px; }
.ft-info a { color: inherit; transition: color .3s var(--ease); }
.ft-info a:hover { color: #fff; }
.ft h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--w-65); }
.ft ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ft ul a { font-size: 14px; color: var(--w-65); transition: color .3s var(--ease); }
.ft ul a:hover { color: #fff; }
.ft ul a.em { color: rgba(255, 255, 255, .88); font-weight: 700; }
.ft-base { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--w-line); display: flex; justify-content: space-between; font-size: 12px; color: var(--w-65); flex-wrap: wrap; gap: 10px; }
.ft-adminlink { color: inherit; }
@media (max-width: 900px) {
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-grid > .ft-info { grid-column: 1 / -1; }
}
@media (max-width: 768px) { .ft { padding: 72px 0 32px; } .ft-in { padding: 0 20px; } }
@media (max-width: 560px) { .ft-grid { grid-template-columns: 1fr; } }

/* ---- 반응형 ---- */
@media (max-width: 1024px) { .gnb-nav { display: none; } }
@media (max-width: 768px) {
  .gnb-in { padding-left: 20px; }
  .ucell { min-width: 0; padding: 0 16px; }
  .ucell-ic { width: 56px; }
  .allmenu-top { padding-left: 20px; }
  .allmenu-body { padding: 48px 20px 72px; }
  .allmenu-nav { margin-top: 8px; }
}
@media (max-width: 480px) {
  .ucell { padding: 0 12px; font-size: var(--fs-label); }
  .ucell-ic { width: 44px; }
  .logo-img { height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .allmenu .allmenu-nav > li { opacity: 1; transform: none; } }