/* ============================================================
   base.css — 공통 타이포그래피 · 레이아웃 프리미티브 · 유틸
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-reg);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-snug);
  color: var(--c-ink);
  background: var(--c-canvas);
}

/* ---------- Headings ---------- */
h1, h2, h3, h4 {
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-ink);
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-display); }
h3 { font-size: var(--fs-section); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-tagline); line-height: var(--lh-snug); }

strong, b { font-weight: var(--fw-semi); }

/* ---------- Links ---------- */
a.link {
  color: var(--c-primary);
  transition: opacity var(--t-fast);
}
a.link:hover { opacity: 0.72; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--sp-section);
}
.section--smoke    { background: var(--c-smoke); }
.section--fade     { background: var(--g-section); }
.section--fade-rev { background: var(--g-section-rev); }
.section--deep     { background: var(--g-section-deep); }

/* 섹션 헤더 (라벨 + 제목 + 서브카피) */
.section-head {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.section-label {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  color: var(--c-primary);
  margin-bottom: var(--sp-12);
}
.section-head h2 { margin-bottom: var(--sp-16); }
.section-sub {
  font-size: var(--fs-lead);
  color: var(--c-ink-soft);
  line-height: var(--lh-snug);
}

/* 그리드 */
.grid { display: grid; gap: clamp(16px, 2.2vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- 골드 키워드 강조 (accent-underline) ---------- */
.accent {
  background: linear-gradient(180deg, transparent 62%,
              rgba(229, 216, 92, 0.55) 62%);
  padding-inline: 1px;
}

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.no-scroll { overflow: hidden; }

/* Skip link */
.skip-link {
  position: absolute; left: 8px; top: -48px;
  background: var(--c-primary); color: var(--c-on-dark);
  padding: 10px 18px; border-radius: var(--r-sm);
  z-index: var(--z-top); transition: top var(--t-fast);
}
.skip-link:focus { top: 8px; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--c-primary-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* 진입 애니메이션 (reveal) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}