/* ══════════════════════════════════════════════════════════════════
   THE STEPPER 공통 헤더·바닥글 (2026-11-10, js/stepper-layout.js 가 HTML 을 넣음)
   모양은 첫 화면 헤더(index.html .tg-hero)와 같게: 팔각 로고 + Barlow Condensed 기울임 파랑 THE STEPPER
   + 파랑 채움 알약 CTA + 삼색 줄무늬. 값은 css/stepper-tokens.css 변수만 쓴다(규칙: docs/renewal/design-rules.md 9절).
   클래스 이름(.sa-header·.sa-menu-btn·#sa-overlay·.sa-footer)은 그대로 둔다 — index.html 첫 화면 스크립트·스타일이
   이 이름으로 헤더를 숨기고(body.tg-page …) 햄버거가 .sa-menu-btn 을 누르기 때문.
   휴대폰 배치 기준: css/stepper-tokens.css 주석의 휴대폰 기준 폭을 따른다(미디어 쿼리는 변수를 못 써 숫자로 적음).
   ══════════════════════════════════════════════════════════════════ */

html { scroll-padding-top: calc(var(--hd-h) + var(--stripe-h)); }

/* ── 본문 바로가기 ── */
.sa-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  padding: 12px 16px; border-radius: var(--r-pill);
  background: var(--c-blue); color: var(--c-surface); font-family: var(--f-sans); font-size: var(--fs-small); font-weight: 700;
}
.sa-skip:focus { left: 8px; top: 8px; color: var(--c-surface); }

/* ── 삼색 줄무늬(파랑 6 : 노랑 1 : 빨강 1, 첫 화면 .tg-stripe 와 같은 비율) ── */
.sa-stripe { display: flex; height: var(--stripe-h); }
.sa-stripe span:nth-child(1) { flex: 6; background: var(--c-blue); }
.sa-stripe span:nth-child(2) { flex: 1; background: var(--c-yellow); }
.sa-stripe span:nth-child(3) { flex: 1; background: var(--c-red); }

/* ── 헤더 ── */
.sa-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--c-bg); border-bottom: 1px solid var(--c-line);
  font-family: var(--f-sans); color: var(--c-navy);
}
.sa-header__inner {
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--hd-h); display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.sa-brand {
  display: inline-flex; align-items: center; gap: var(--hd-brand-gap); flex-shrink: 0; min-height: var(--hd-burger);  /* 누르는 영역 44px 이상 */
  text-decoration: none; color: var(--c-navy);
}
.sa-brand__logo { display: block; width: var(--hd-logo); height: var(--hd-logo); }
.sa-brand__txt { display: flex; flex-direction: column; gap: 2px; }
.sa-brand__name {
  font-family: var(--f-display); font-style: italic; font-weight: var(--brand-weight);
  font-size: var(--hd-brand-fs); line-height: 1; letter-spacing: .02em; color: var(--c-blue); white-space: nowrap;
}
.sa-brand__sub { font-size: var(--hd-sub-fs); line-height: 1.4; letter-spacing: .02em; color: var(--c-sub); white-space: nowrap; }
.sa-nav { display: flex; align-items: center; gap: var(--hd-nav-gap); }
/* 메뉴 링크마다 좌우 8px 여백(누르는 영역 44px 이상) — 그만큼 간격을 16px 줄여 글자 사이 거리는 첫 화면과 같은 34px 유지 */
.sa-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: calc(var(--hd-nav-gap) - 16px); }
.sa-nav__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--hd-burger); min-width: var(--hd-burger); padding: 0 8px;
  font-size: var(--hd-nav-fs); font-weight: 500; line-height: 1.2; text-decoration: none; color: var(--c-navy); white-space: nowrap;
}
/* 관리자 전용 링크가 숨어 있을 때(admin-nav.js 가 style display:none) 빈 칸이 간격·구분선을 차지하지 않게 감싼 li 도 숨김 */
.sa-nav__list li:has(> .admin-only-nav[style*="none"]), .sa-overlay__list li:has(> .admin-only-nav[style*="none"]) { display: none; }
.sa-nav__link:hover { color: var(--c-blue); }
.sa-nav__link[aria-current="page"] { color: var(--c-blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sa-cta {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  height: var(--hd-cta-h); padding: 0 var(--hd-cta-px); border-radius: var(--r-pill);
  background: var(--c-blue); color: var(--c-surface); font-family: var(--f-sans); font-size: var(--hd-nav-fs); font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.sa-cta:hover { background: var(--c-blue-hover); color: var(--c-surface); }
.sa-menu-btn, .sa-overlay__close {
  width: var(--hd-burger); height: var(--hd-burger); padding: 0; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--c-navy); cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.sa-overlay__close { display: inline-flex; }
.sa-header :focus-visible, .sa-overlay :focus-visible, .sa-footer :focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
.sa-footer :focus-visible { outline-color: var(--c-yellow); }

/* ── 전체 화면 메뉴(휴대폰) ── */
.sa-overlay {
  position: fixed; inset: 0; z-index: 1100; overflow-y: auto;
  display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-navy); font-family: var(--f-sans);
}
.sa-overlay[hidden] { display: none; }
.sa-overlay .sa-stripe { flex: none; height: var(--stripe-h-m); }
.sa-overlay__top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: var(--hd-h-m); padding: 0 var(--hd-pad-r-m) 0 var(--hd-pad-l-m); border-bottom: 1px solid var(--c-line);
}
.sa-overlay .sa-brand { gap: var(--hd-brand-gap-m); }
.sa-overlay .sa-brand__logo { width: var(--hd-logo-m); height: var(--hd-logo-m); }
.sa-overlay .sa-brand__name { font-size: var(--hd-brand-fs-m); }
.sa-overlay__list { list-style: none; margin: 8px 0 0; padding: 0 var(--gutter-m); }
.sa-overlay__list li { border-bottom: 1px solid var(--c-line); }
.sa-overlay__link {
  display: flex; align-items: center; min-height: 56px;
  font-size: var(--fs-card-m); font-weight: 700; text-decoration: none; color: var(--c-navy);
}
.sa-overlay__link:hover, .sa-overlay__link[aria-current="page"] { color: var(--c-blue); }
.sa-overlay .sa-cta { margin: 24px var(--gutter-m) 32px; height: var(--btn-h-m); font-size: var(--fs-body); }

/* ── 바닥글 — 남색 바탕, 흰 글자, 노랑은 작은 강조만, 빨강 안 씀(줄무늬 제외) ── */
.sa-footer { background: var(--c-navy); color: var(--c-surface); font-family: var(--f-sans); font-size: var(--fs-small); line-height: 1.7; }
.sa-footer .sa-stripe { height: var(--stripe-h); }
.sa-footer__wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 72px var(--gutter) 48px; }
.sa-footer a { color: var(--c-surface); text-decoration: none; }
.sa-footer a:hover { color: var(--c-yellow); }
.sa-footer__grid { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.sa-footer__brand { display: flex; align-items: center; gap: var(--hd-brand-gap); margin-bottom: 20px; }
.sa-footer__brand .sa-brand__logo { width: var(--hd-logo); height: var(--hd-logo); }
.sa-footer__brand span {
  font-family: var(--f-display); font-style: italic; font-weight: var(--brand-weight);
  font-size: var(--hd-brand-fs); line-height: 1; letter-spacing: .02em; color: var(--c-yellow);
}
.sa-footer__info p { margin: 0 0 6px; font-size: var(--fs-body); color: var(--c-on-dark-sub); }
.sa-footer__info a { display: inline-flex; align-items: center; min-height: var(--hd-burger); color: var(--c-surface); font-weight: 700; }  /* 전화 링크 누르는 영역 44px */
.sa-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sa-footer__links a { display: inline-flex; align-items: center; min-height: var(--hd-burger); font-size: var(--fs-body); font-weight: 500; }
.sa-footer__sub { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-on-dark-line); }
.sa-footer__sub ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.sa-footer__sub a { display: inline-flex; align-items: center; min-height: var(--hd-burger); font-size: var(--fs-small); color: var(--c-on-dark-sub); }
.sa-footer__sub a:hover { color: var(--c-yellow); }
.sa-footer__copy { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--c-on-dark-line); font-size: var(--fs-caption); color: var(--c-on-dark-sub); }

/* ── 폭이 좁은 PC: 메뉴 간격·좌우 여백을 줄여 한 줄 유지 ── */
@media (max-width: 1279px) {
  .sa-header__inner { padding: 0 var(--gutter-m); gap: 16px; }
  .sa-nav { gap: 24px; }
  .sa-nav__list { gap: 8px; }   /* 글자 사이 24px(링크 여백 8+8 포함) */
  .sa-brand__sub { display: none; }
}
@media (max-width: 1023px) {
  .sa-nav { gap: 16px; }
  .sa-nav__list { gap: 0; }     /* 글자 사이 16px(링크 여백 8+8) */
}

/* ── 휴대폰 배치 899px 이하 — 기준 출처: css/stepper-tokens.css 주석·js/stepper-layout.js MOBILE_MAX ── */
@media (max-width: 899px) {
  html { scroll-padding-top: calc(var(--hd-h-m) + var(--stripe-h-m)); }
  .sa-header .sa-stripe { height: var(--stripe-h-m); }
  .sa-header__inner { height: var(--hd-h-m); padding: 0 var(--hd-pad-r-m) 0 var(--hd-pad-l-m); }
  .sa-header .sa-brand { gap: var(--hd-brand-gap-m); }
  .sa-header .sa-brand__logo { width: var(--hd-logo-m); height: var(--hd-logo-m); }
  .sa-header .sa-brand__name { font-size: var(--hd-brand-fs-m); }
  .sa-header .sa-brand__sub { display: block; }
  .sa-nav, .sa-header .sa-cta { display: none; }
  .sa-menu-btn { display: inline-flex; }
  .sa-footer__wrap { padding: 56px var(--gutter-m) 40px; }
  .sa-footer__grid { flex-direction: column; gap: 24px; }
  .sa-footer .sa-stripe { height: var(--stripe-h-m); }
}