/* ==========================================================================
   layout.css — 그리드, 컨테이너, 섹션
   모바일 우선. 브레이크포인트 640 / 1024 / 1280 (tokens.css 참고)
   ========================================================================== */

html {
  scroll-padding-top: var(--header-h); /* 앵커 이동 시 고정 헤더에 가리지 않게 */
}

/* ---------- 컨테이너 ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 섹션 ----------
   섹션 경계는 배경색 전환으로만 표현한다 (구분선 금지) */
.section {
  padding-block: var(--section-y);
}

.section--space {
  background-color: var(--orbit-navy);
  color: var(--paper);
}

/* 2026-09-28: Deep Navy 를 면으로 깔면 채도가 높아 "Orbit Navy 60%" 비율이 깨지고,
   그 위에서 Electric Blue Dark 가 3.58:1 로 AA 에 미달한다 (pa11y 확인).
   Orbit Navy 에서 한 단계 들뜬 색으로 면을 만들고, Deep Navy 는 그라데이션에만 쓴다 */
.section--navy {
  background-color: #101A2E;
  color: var(--paper);
}

.section--light {
  background-color: var(--paper);
  color: var(--ink);
}

/* 어두운 섹션의 글자색 (2026-09-29 — Home 의 원칙을 전 페이지로 승격).
   Home 이 `.why, .how` 에서 쓰던 기법을 여기로 올렸다: 밝은 배경 전제로 짜인 토큰들을
   **그 섹션 안에서만** 어두운 짝으로 다시 정의하면, 아래 규칙(글자색·선)이 알아서 따라온다 —
   about.css 의 --text-muted 6곳과 --text-subtle 4곳을 한 줄도 고치지 않고 파란 기가 빠진다.
   스코프가 이 선택자 **안쪽**이므로 푸터·.flow·도면 라벨·partners·contact 는 영향받지 않는다.
   :root 에서 --text-muted 를 바꾸는 것은 금지 — 6개 페이지가 한꺼번에 흔들린다.
   .page-header 도 같은 어두운 면이므로 함께 넣는다 — h1·리드가 색 선언 없이 상속만으로 맞는다
   ("제목이라고 더 하얗게 쓰지 않는다" = 순백 --paper 를 제목에 쓰지 않는다) */
.page-header,
.section--space,
.section--navy {
  --ink:                 var(--ink-on-dark);
  --text-muted:          var(--ink-on-dark);
  --text-muted-on-light: var(--ink-on-dark);
  --text-subtle:         var(--ink-on-dark-faint);
  --line-on-light:       var(--line-on-dark);
  color: var(--ink-on-dark);
}

/* 서브 페이지 상단 제목 영역 (2026-09-28 브랜드 v1.0 으로 다시 짰다).
   종전에는 Home Hero 와 같은 6칸×4행 격자 박스로 나눴으나, 새 시안에 격자가 없어
   격자 시스템을 통째로 폐기했다 (page-grid.njk 도 삭제).
   지금은 Orbit Navy 단색 위에 eyebrow · h1 · 리드를 왼쪽으로 쌓는다 */
.page-header {
  padding-top: calc(var(--header-h) + var(--sp-9));
  padding-bottom: var(--sp-8);
  background-color: var(--orbit-navy);
}


.page-header h1 {
  max-width: 20ch;
}

/* 리드: h1 바로 아래 한 줄.
   2026-09-29: 파란 기가 도는 --text-muted 선언을 지웠다 — 위 블록의 color 를 상속받는다.
   이것으로 6개 페이지 머리 리드가 한꺼번에 같아진다 */
.page-header h1 + p {
  max-width: 62ch;
  margin-top: var(--sp-5);
}

/* 상세 페이지 제목 계단 (2026-09-16 사용자 요청): h1 을 Hero 보다 작게 내리고,
   그 비율(약 0.78배)만큼 소제목도 함께 내려 6개 페이지의 계단을 같게 맞춘다.
   Home 은 자체 섹션 머리 크기를 쓰므로 제외한다 */
body:not([data-page="home"]) {
  --fs-h1:  clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);      /* 28–36px  h1 */
  --fs-2xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.625rem);    /* 22–26px  h2 */
}