/* 공통 토큰 + 무대 토큰. 테마 색 4종은 JS(theme.js)가 매 프레임 여기에 덮어쓴다.
   초기값은 첫 구간(헬로 워드) — JS가 죽어도 첫 화면은 정상으로 보인다. */

:root {
  /* 테마 (런타임에 교체됨) */
  --bg: #F5F7FF;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --ink-muted: #475569;
  --accent: #4F46E5;
  --accent-ink: #FFFFFF;
  --border: #E2E8F0;
  --glow: rgba(79, 70, 229, .22);
  --glow-2: rgba(236, 72, 153, .16);
  --grid-alpha: 0.045;
  --back-bright: 0.9;
  --tension-glow: 0;
  --tension-scale: 1;

  /* 무대 */
  --win-radius: 14px;
  --win-chrome: 26px;
  --win-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  --ease-stage: cubic-bezier(0.22, 0.61, 0.36, 1);
  --grid-size: 56px;

  /* 형태 */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* 공간 */
  --gutter: clamp(24px, 5vw, 88px);
  --container: 1440px;

  /* 타이포 */
  --font-display: 'Outfit', 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, 'Malgun Gothic', system-ui, sans-serif;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

html, body {
  margin: 0;
}

/* 문서가 흐르지 않는다 — 스크롤은 물리 애니메이션을 구동할 뿐이다.
   ★ #stage가 있는 페이지(인덱스) 전용 규칙이다 — 문의 등 일반 페이지까지 이 셀렉터로
   묶이면 스크롤 자체가 막혀 폼·카드가 뷰포트 아래로 잘린 채 닿지 않게 된다. */
html:has(#stage), body:has(#stage) {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  transition: background-color 120ms linear;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.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;
}

/* 이미지 가장자리가 배경에 번지지 않도록 — 브랜드색으로 물들이지 않는다 */
.tw-body {
  outline: 1px solid rgba(0, 0, 0, .10);
  outline-offset: -1px;
}