/* =====================================================================
   base.css — Reset · Grid · Typography · Buttons · Utilities
   모든 값은 design-tokens.css 의 변수만 사용한다.
   ===================================================================== */

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  font-family:    var(--font-sans);
  font-size:      var(--fs-body);
  font-weight:    var(--fw-regular);
  line-height:    var(--lh-loose);
  letter-spacing: var(--ls-normal);
  color:          var(--clr-ink);
  background:     var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 한글 줄바꿈 전역 적용 */
  word-break:   keep-all;
  overflow-wrap: normal;
}
i, em, cite, address { font-style: normal }
img, video { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; background:none; border:none }
ul, ol { list-style:none }
::selection { background:var(--clr-gold); color:#fff }
:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.skip {
  position:absolute; left:-9999px; top:0;
  background:var(--clr-gold); color:#fff;
  padding:10px 18px; z-index:999;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left:0 }

/* ── Typography ─────────────────────────────────────────── */
/* 제목 공통 */
h1, h2, h3, h4, h5 {
  letter-spacing: var(--ls-tight);
  line-height:    var(--lh-tight);
  font-weight:    var(--fw-bold);
  word-break:     keep-all;
  overflow-wrap:  normal;
  text-wrap:      balance;   /* 한글 줄바꿈 균형 */
}
/* 스케일 적용 — 직접 태그 기본값
   (페이지 내 클래스로 오버라이드한다) */
h1 { font-size: var(--fs-page-h1) }
h2 { font-size: var(--fs-h2) }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold) }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold) }
h5 { font-size: var(--fs-caption); font-weight: var(--fw-semibold) }

/* 클래스 오버라이드 (명시적으로 쓸 때) */
.t-hero-h1  { font-size:var(--fs-hero-h1); letter-spacing:var(--ls-tight); line-height:var(--lh-tight) }
.t-page-h1  { font-size:var(--fs-page-h1); letter-spacing:var(--ls-tight); line-height:var(--lh-snug)  }
.t-h2       { font-size:var(--fs-h2) }
.t-h3       { font-size:var(--fs-h3); font-weight:var(--fw-semibold) }
.t-lead     { font-size:var(--fs-lead); line-height:var(--lh-normal); font-weight:var(--fw-regular) }
.t-body     { font-size:var(--fs-body); line-height:var(--lh-loose) }
.t-caption  { font-size:var(--fs-caption); color:var(--clr-ink-3) }
.t-eyebrow  {
  font-family:    var(--font-mono);
  font-size:      var(--fs-eyebrow);
  font-weight:    var(--fw-regular);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--clr-gold);
  display:        block;
  margin-bottom:  var(--sp-16);
}
.t-label {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Grid / Container ────────────────────────────────────── */
/* .wrap          — max 1400px, 좌우 padding */
/* .wrap-content  — max 1200px */
/* .wrap-read     — max 900px */
.wrap {
  max-width: var(--w-full);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap-content {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap-read {
  max-width: var(--w-read);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Section Padding ─────────────────────────────────────── */
.section        { padding-block: var(--sec-py) }
.section-lg     { padding-block: var(--sec-py-lg) }
.section-sm     { padding-block: var(--sec-py-sm) }
.section-tint   { background: var(--clr-bg-2) }
.section-dark   {
  background: var(--clr-dark);
  color:      var(--clr-ink-inv);
}
.section-dark h1, .section-dark h2,
.section-dark h3, .section-dark h4 { color: var(--clr-ink-inv) }
.section-dark .t-eyebrow { color: var(--clr-gold-light) }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-8);
  font-size:       var(--fs-caption);   /* 14px */
  font-weight:     var(--fw-semibold);
  letter-spacing:  -.01em;
  padding:         12px 24px;
  border-radius:   var(--r-sm);
  border:          1.5px solid transparent;
  white-space:     nowrap;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px) }
.btn:active { transform: translateY(0) }

.btn-primary {
  background:   var(--clr-dark);
  color:        var(--clr-ink-inv);
  border-color: var(--clr-dark);
}
.btn-primary:hover {
  background:   var(--clr-dark-2);
  border-color: var(--clr-dark-2);
}
.btn-outline {
  background:   transparent;
  color:        var(--clr-ink);
  border-color: var(--clr-ink);
}
.btn-outline:hover {
  background:   var(--clr-ink);
  color:        var(--clr-ink-inv);
}
.btn-gold {
  background:   var(--clr-gold);
  color:        #fff;
  border-color: var(--clr-gold);
}
.btn-gold:hover {
  background:   var(--clr-gold-dark);
  border-color: var(--clr-gold-dark);
}
.btn-ghost {
  background:   transparent;
  color:        var(--clr-ink-2);
  border-color: var(--clr-line-2);
}
.btn-ghost:hover {
  border-color: var(--clr-gold);
  color:        var(--clr-gold-dark);
}
/* 다크 배경 전용 */
.btn-inv {
  background:   transparent;
  color:        var(--clr-ink-inv);
  border-color: rgba(247,245,240,.35);
}
.btn-inv:hover {
  background:   var(--clr-ink-inv);
  color:        var(--clr-dark);
  border-color: var(--clr-ink-inv);
}

/* ── 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;
}
.ph {
  background:      var(--clr-bg-3);
  border:          1px solid var(--clr-line);
  border-radius:   var(--r-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--clr-ink-3);
  font-family:     var(--font-mono);
  font-size:       var(--fs-label);
  letter-spacing:  .08em;
  text-align:      center;
  min-height:      120px;
}
.section-dark .ph {
  background:    var(--clr-dark-2);
  border-color:  var(--clr-line-dark);
  color:         rgba(247,245,240,.25);
}

/* Image Hover Scale */
.img-wrap {
  overflow:      hidden;
  border-radius: var(--r-lg);
}
.img-wrap img, .img-wrap video {
  width:100%; height:100%; object-fit:cover;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.img-wrap:hover img, .img-wrap:hover video {
  transform: scale(1.038);
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.in { opacity:1; transform:none }
/* 안전장치 — JS가 실행되지 않아도 콘텐츠가 사라지지 않는다.
   (JS 정상 시 .in이 먼저 적용되어 애니메이션은 무시됨) */
@keyframes reveal-failsafe { to { opacity:1; transform:none } }
.reveal { animation: reveal-failsafe .4s var(--ease-out) 1.4s forwards }
.reveal.in { animation: none }
.reveal.d1 { transition-delay:.06s }
.reveal.d2 { transition-delay:.12s }
.reveal.d3 { transition-delay:.18s }
.reveal.d4 { transition-delay:.24s }
@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; transition:none }
  .img-wrap img, .img-wrap video { transition:none }
}

/* Margin spacing helpers */
.mt-16  { margin-top: var(--sp-16) }
.mt-24  { margin-top: var(--sp-24) }
.mt-32  { margin-top: var(--sp-32) }
.mt-40  { margin-top: var(--sp-40) }
.mt-56  { margin-top: var(--sp-56) }
.mt-64  { margin-top: var(--sp-64) }
.mb-16  { margin-bottom: var(--sp-16) }
.mb-24  { margin-bottom: var(--sp-24) }
.mb-40  { margin-bottom: var(--sp-40) }

/* Gold line accent */
.gold-line {
  width:36px; height:2px;
  background: var(--clr-gold);
  margin-block: var(--sp-20);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}