/* ==========================================================================
   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(--space);
  color: var(--paper);
}

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

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

/* 서브 페이지 상단 제목 영역: 고정 헤더 높이만큼 내려서 시작 */
.page-header {
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-7);
}

/* 상세 페이지 제목 계단 (2026-09-16 사용자 요청): h1 을 Hero 보다 작게 내리고,
   그 비율(약 0.78배)만큼 소제목도 함께 내려 6개 페이지의 계단을 같게 맞춘다.
   Home 은 자체 섹션 머리 크기를 쓰므로 제외한다 */
body:not([data-page="home"]) {
  --fs-display: clamp(2.1875rem, 1.6rem + 2.5vw, 3.3125rem); /* 35–53px  h1 */
  --fs-2xl:     clamp(1.375rem, 1rem + 1.6vw, 2.125rem);     /* 22–34px  h2 */
  --fs-xl:      clamp(1.1875rem, 1rem + 0.85vw, 1.5625rem);  /* 19–25px  h3 */
}

/* ---------- 12열 그리드 (1024px 이상) ---------- */
@media (min-width: 1024px) {
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }
}