/**
 * 구조 토큰 + 리셋
 *
 * 색과 폰트를 정의하지 않는다. 그건 각 템플릿의 DESIGN.md 소관이다.
 * 여기 있는 것은 10개 템플릿이 겉모습과 무관하게 공유하는 것들이다.
 * 명세는 ../../DESIGN.md 참고.
 */

:root {
  /* 간격 — 4px 기반 */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 24px;
  --sp-2xl: 32px;
  --sp-section: 56px;
  --sp-section-lg: 80px;

  /* 반경 — 템플릿이 덮어쓴다. 각진 템플릿은 전부 0 으로 재정의한다 */
  --r-xs: 2px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* 모션 */
  --t-instant: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-slow: 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-reveal: 800ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-spring: 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --reveal-offset: 24px;
  --reveal-stagger: 80ms;

  /* 층위 */
  --z-base: 1;
  --z-sticky: 10;
  --z-header: 20;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-boot: 900;

  /* 레이아웃 */
  --frame-max: 460px;
  --frame-min: 320px;
  --gutter: 20px;
  --touch-min: 44px;
  --tap-gap: 8px;
}

@media (max-width: 359px) {
  :root { --gutter: 16px; }
}

/* ── 리셋 ── */

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

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

body {
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
* { -webkit-tap-highlight-color: transparent; }

/* ── 프레임 ──
   초대장은 460px 프레임에 갇힌다. 데스크톱 반응형에 시간을 쓰지 않는다. */

.invite-frame {
  width: 100%;
  min-width: var(--frame-min);
  max-width: var(--frame-max);
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
}

.invite-gutter { padding-inline: var(--gutter); }

/* ── 접근성 ──
   여기 있는 것들은 템플릿이 덮어쓰면 안 된다. */

/* iOS Safari 는 16px 미만 입력에 포커스하면 화면을 확대한다.
   스타일 선택이 아니라 버그 방지다. */
input, textarea, select { font-size: 16px; }

/* 아이콘만 있는 작은 버튼도 히트 영역은 44px 을 채운다.
   시각 크기는 그대로 두고 의사요소로 덮는다. */
.tap-target { position: relative; }
.tap-target::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: max(100%, var(--touch-min));
  height: max(100%, var(--touch-min));
  transform: translate(-50%, -50%);
}

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

/* 숫자는 폭을 고정한다. 카운터가 매초 흔들리면 싸구려로 보인다. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ── 스크롤 진입 리빌 ──
   observeReveal() 이 is-visible 을 붙인다. */

[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--t-reveal), transform var(--t-reveal);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ── 스크롤 잠금 보정 ──
   lockScroll() 이 body 에 인라인 스타일을 건다. 이건 가로 스크롤 방지용. */
body[style*="position: fixed"] { overflow: hidden; width: 100%; }

/* ── 모션 축소 ──
   초대장은 애니메이션이 많은 문서라 이 처리가 특히 중요하다.
   부팅 화면, 봉투 열림, 필름 현상 같은 긴 오프닝은 각 템플릿이 추가로 건너뛴다. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}