/* ============================================================================
   base.css — reset, type roles, accessibility floor
   The reference measured 0 heading elements, 0 buttons, 611 empty alts and 0
   reduced-motion rules. That is reproduced as a *system*, not as a defect:
   the visual type roles are class-driven exactly as measured, but they are
   applied to real semantic elements. See README "Deliberate divergences".
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-base);
  font-weight: var(--w-regular);
  line-height: var(--lh-base);
  color: var(--page-fg);
  background-color: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* No vertical scroll exists on this site. The only continuous axis is the
     horizontal filmstrip. [derived: scrollHeight === innerHeight]            */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

img, video { display: block; max-width: 100%; }
picture { display: block; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: inherit;
}

ul, ol { list-style: none; margin: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, figure { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

/* --- type roles ----------------------------------------------------------
   Sizes are the measured em multiples. Because they are em, the whole scale
   is governed by body's single vw-bound base.                                */

.big-title {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  /* Latin-only display text, so the real Lato 900 is available here. */
  font-weight: 900;
  font-synthesis-weight: none;   /* 합성 볼드를 아예 금지 — 조용히 뭉개지는 대신 드러나게 */
  line-height: var(--lh-tight);
  text-transform: uppercase;
  /* Lato Black is a normal-width face, not the condensed display type the
     reference used, so it needs negative tracking to hold together at
     display sizes. The hero size itself is fitted in JS. */
  letter-spacing: -0.035em;
}
/* 한글이 섞인 타이틀은 두 패밀리가 함께 가진 가장 무거운 굵기까지만. */
.big-title.is-hangul { font-weight: var(--w-black); }
.big-title.is-small        { font-size: var(--t-display-m); }
.big-title.is-service-title{ font-size: var(--t-display-s); }
.big-title.is-home-title   { font-size: var(--t-display-xl); }

.text-h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: var(--w-regular); }
.text-h2 { font-size: var(--t-h2); line-height: var(--lh-base); font-weight: var(--w-regular); }
.text-h3 { font-size: var(--t-h3); line-height: var(--lh-base); font-weight: var(--w-regular); }
.text-h4 {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  font-weight: var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.text-h4.is-fk { font-family: var(--font-display); font-size: 1.6em; font-weight: 400; letter-spacing: 0; }
.text-h5 { font-size: var(--t-h5); line-height: var(--lh-base); font-weight: var(--w-regular); }
.text-h6 {
  font-size: var(--t-h6);
  font-weight: var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.text-p-allcaps {
  font-size: var(--t-allcaps);
  line-height: var(--lh-snug);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}
.text-p-big { font-size: var(--t-big); }
.p-xsmall   { font-size: var(--t-xsmall); }
.p-small    { font-size: var(--t-small); }
.p-big      { font-size: var(--t-big); }
.p-xbig     { font-size: var(--t-xbig); }

.text-rich-text p {
  font-size: var(--t-h6);
  line-height: var(--lh-snug);
  font-weight: var(--w-medium);
  text-transform: uppercase;
}
.text-rich-text p + p { margin-top: 1.4em; }

/* --- accessibility floor -------------------------------------------------
   The reference removes focus outlines and defines no visible focus ring.
   Restored here as a token-consistent ring: no shadow (the system has no
   elevation axis), just a hard inverted outline.                             */

:focus { outline: none; }
:focus-visible {
  outline: 0.17em solid var(--yellow);
  outline-offset: 0.25em;
  border-radius: var(--radius);
}
.is-inverted :focus-visible { outline-color: var(--yellow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: var(--s-1);
  left: var(--s-1);
  z-index: calc(var(--z-overlay) + 10);
  padding: var(--s-05) var(--s-1);
  background: var(--black);
  color: var(--ivory);
  font-size: var(--t-allcaps);
  font-weight: var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- reduced motion ------------------------------------------------------
   The reference has zero coverage and gates no GSAP timeline. Added here.
   JS reads the same query (see motion.js) so imperative timelines collapse
   to instant state changes rather than merely running invisibly.             */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}