@font-face { font-family: 'HelveticaRounded'; src: url('../assets/fonts/Helvetica Rounded Bold.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'NanumSquare'; src: url('../assets/fonts/NanumSquareRoundL.ttf') format('truetype'); font-weight: 300; }
@font-face { font-family: 'NanumSquare'; src: url('../assets/fonts/NanumSquareRoundR.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'NanumSquare'; src: url('../assets/fonts/NanumSquareRoundB.ttf') format('truetype'); font-weight: 700; }
@font-face { font-family: 'NanumSquare'; src: url('../assets/fonts/NanumSquareRoundEB.ttf') format('truetype'); font-weight: 800; }

/* ===== 디자인 토큰 (조화면/나성능 합의 — spacing xs/sm/md 매핑) ===== */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  /* clamp 헬퍼: 축소 시 최소값 보장, 1920px 기준 최대값 캡 */
  --fs-tiny: clamp(11px, 0.677vw, 15px);
  --fs-small: clamp(13px, 1.0417vw, 18px);
  --fs-base: clamp(14px, 1.146vw, 22px);
  --fs-h2: clamp(16px, 1.5vw, 26px);
  --fs-h1: clamp(20px, 1.875vw, 36px);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
  color: #1d1d1f;
  user-select: none;
}

.page {
  display: none;
  width: 100%;
  height: 100%;
}

.page.active {
  display: flex;
  flex-direction: column;
}