/* ── 헤더 ──────────────────────────────────────────────────
   시안: 히어로 위에 배경 없이 얹힌다. 로고 좌 / GNB 우, 흰 글자.
   밝은 배경 서브페이지용으로 .site-header--solid 를 함께 둔다. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--brand);color:#fff;border-radius:0 0 var(--radius-xs) 0;
}
.skip-link:focus{left:0}

.site-header{
  position:absolute;top:0;left:0;width:100%;height:var(--header-h);z-index:40;
}
.site-header__inner{
  display:flex;align-items:flex-start;justify-content:space-between;
  height:100%;
}

.brand{display:block;margin-top:10px;flex:none}
.brand__mark{width:124px;height:auto;object-fit:contain}
.brand__tagline{
  display:block;margin-top:8px;width:124px;text-align:center;
  color:var(--text-inverse);
  font-family:var(--font-ui);font-weight:400;
  font-size:var(--fs-12);line-height:1;letter-spacing:var(--ls-wide);
}

/* GNB — 시안 기준 top 40, 항목 간 40px */
.gnb{margin-top:40px}
.gnb__list{display:flex;gap:40px}
.gnb__item{position:relative}
.gnb__link{
  display:block;padding-bottom:30px;         /* 드롭다운까지 포인터가 끊기지 않도록 */
  color:var(--text-inverse);
  font-weight:600;font-size:var(--fs-18);line-height:1.2;letter-spacing:var(--ls-tight);
  white-space:nowrap;
}
.gnb__link:hover{color:var(--brand)}

.submenu{
  position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(6px);
  min-width:260px;padding:14px 0;
  background:var(--surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.gnb__item.has-sub:hover .submenu,
.gnb__item.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{
  display:block;padding:9px 24px;white-space:nowrap;
  font-weight:500;font-size:var(--fs-16);color:var(--text-secondary);
}
.submenu a:hover{color:var(--brand);background:var(--brand-tint-1)}

/* 밝은 배경 위 / 스크롤 후 */
.site-header--solid,
.site-header.is-stuck{
  position:fixed;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.site-header--solid .gnb__link,.site-header.is-stuck .gnb__link{color:var(--text-primary)}
/* 지금 보고 있는 페이지의 메뉴(site.js 가 표시) — 핑크. 하위 페이지면 상위 메뉴도 */
.gnb__item.is-current > .gnb__link,
.site-header--solid .gnb__item.is-current > .gnb__link,
.site-header.is-stuck .gnb__item.is-current > .gnb__link{color:var(--brand)}
.submenu a[aria-current]{color:var(--brand);font-weight:600}
.mnav__head.is-current{color:var(--brand)}
.mnav__sub a[aria-current]{color:var(--brand);font-weight:600}
.site-header--solid .brand__tagline,.site-header.is-stuck .brand__tagline{color:var(--text-secondary)}
.site-header--solid .brand__mark,.site-header.is-stuck .brand__mark{filter:invert(1) brightness(.28)}
.site-header--solid .nav-toggle__bar,.site-header.is-stuck .nav-toggle__bar{background:var(--text-primary)}

/* 햄버거 */
.nav-toggle{display:none;width:44px;height:44px;margin-top:8px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-toggle__bar{display:block;width:22px;height:2px;background:var(--text-inverse);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1279px){ .gnb__list{gap:26px} }
@media (max-width:1023px){
  .gnb{display:none}
  .nav-toggle{display:flex}
  .brand{margin-top:6px}
  .brand__mark{width:92px}
  /* 태그라인이 92px 안에서 두 줄로 접히면 헤더(--header-h 60·72)를 넘어
     히어로 H1 과 겹친다. 한 줄로 고정한다. */
  .brand__tagline{width:92px;margin-top:5px;white-space:nowrap;letter-spacing:.1em}
}
/* 모바일 헤더는 60px — 로고(92px→45px 높이)+태그라인이 68px 까지 내려가
   고정 헤더 아래 섹션 위로 태그라인이 삐져나왔다. 로고를 줄여 60px 안에 넣는다. */
@media (max-width:767px){
  .brand{margin-top:4px}
  .brand__mark{width:84px}
  .brand__tagline{width:84px;margin-top:3px}
}

/* ── 모바일 드로어 ─────────────────────────────────────── */
.mobile-nav{
  position:fixed;inset:0;z-index:39;
  background:var(--surface);overflow-y:auto;
  padding:calc(var(--header-h) + 16px) var(--gutter) 40px;
}
.mobile-nav[hidden]{display:none}
.mnav>li{border-bottom:1px solid var(--line-soft)}
.mnav__head{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding-block:18px;text-align:left;
  font-weight:700;font-size:var(--fs-20);color:var(--text-primary);
}
.mnav__head--plain{display:flex}
.mnav__chev{
  width:9px;height:9px;flex:none;margin-right:4px;
  border-right:2px solid var(--text-tertiary);border-bottom:2px solid var(--text-tertiary);
  transform:rotate(45deg);transition:transform .2s ease;
}
.mnav__head[aria-expanded="true"]{color:var(--brand)}
.mnav__head[aria-expanded="true"] .mnav__chev{transform:rotate(-135deg);border-color:var(--brand)}
.mnav__sub{padding-bottom:12px}
.mnav__sub[hidden]{display:none}
.mnav__sub a{display:block;padding:10px 0 10px 12px;font-size:var(--fs-16);color:var(--text-secondary)}
.mnav__sub a:hover{color:var(--brand)}
.mobile-nav__cta{margin-top:28px}
.mobile-nav__cta .btn{width:100%}
body.nav-open{overflow:hidden}

/* ── 푸터 ──────────────────────────────────────────────── */
.site-footer{background:var(--surface-dark);color:var(--text-inverse);padding-block:71px}
.site-footer__inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.site-footer__logo{width:139px;height:auto;object-fit:contain}
.site-footer__address{
  margin-top:20px;font-style:normal;
  font-weight:400;font-size:var(--fs-16);line-height:1.8;letter-spacing:var(--ls-tight);
  color:rgba(255,255,255,.8);
}
.site-footer__address a:hover{color:var(--brand)}
.site-footer__name{display:block;color:var(--brand)}
.site-footer__copy{
  margin-top:20px;font-size:var(--fs-16);line-height:1.8;color:rgba(255,255,255,.5);
}
.site-footer__links{display:flex;gap:0}
.site-footer__links a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:116px;min-height:28px;
  font-weight:500;font-size:var(--fs-16);line-height:1.8;color:rgba(255,255,255,.5);
}
.site-footer__links a:hover{color:var(--text-inverse)}
@media (max-width:1023px){
  .site-footer{padding-block:52px}
  .site-footer__inner{flex-direction:column-reverse;gap:28px}
  .site-footer__links{justify-content:flex-start;margin-left:-16px}
  .site-footer__links a{min-width:0;padding-inline:16px}
}

/* ── 하단 고정 CTA (모바일) ─────────────────────────────── */
.cta-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:35;display:none;gap:8px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);box-shadow:0 -1px 0 rgba(0,0,0,.08);
}
.cta-dock .btn{flex:1;min-height:48px;padding-inline:12px;font-size:var(--fs-16)}
@media (max-width:767px){ .cta-dock{display:flex} body{padding-bottom:72px} }

/* 푸터 하단 법적 링크 — SNS 줄과 같은 톤·크기로 한 줄 정렬 */
.site-footer__nav{display:flex;flex-direction:column;align-items:flex-end;gap:18px;flex:1 1 auto}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:0 22px;justify-content:flex-end}
.site-footer__legal a{font-weight:500;font-size:var(--fs-16);line-height:1.8;color:rgba(255,255,255,.5);white-space:nowrap}   /* SNS 줄과 같은 톤·크기 */
.site-footer__legal a:hover{color:var(--text-inverse)}
@media (max-width:1023px){
  .site-footer__nav{align-items:flex-start;gap:14px}
  .site-footer__legal{justify-content:flex-start;gap:6px 18px}   /* 폰에서는 2줄 허용, 줄간격만 준다 */
}