/* 탭플스테이 공통 — 리셋 · 색 토큰 · 타이포
   00-공통 T1-1. 화면 파일에서 색·간격 값을 직접 쓰지 않는다. */

/* ── 토큰 (라이트가 기본) ───────────────────────── */
:root {
  /* 색 — 한지·먹·단청 */
  --c-bg:        #f2ece0;
  --c-bg-sunken: #e7dfd0;
  --c-panel:     #fbf7ef;
  --c-line:      #d8cdb8;
  --c-ink:       #2a2521;
  --c-ink-dim:   #6b6155;
  --c-accent:    #b0442c;  /* 단청 붉은색. 공덕 숫자·강조 */
  --c-gold:      #b08840;  /* 마일스톤·수료증 */
  --c-glow:      rgba(176, 68, 44, 0.18);

  /* 간격 — 4의 배수 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --r-sm: 8px;
  --r-md: 14px;
  --r-full: 999px;

  /* 타이포 */
  --f-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
            "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --fs-num-xl: clamp(48px, 16vw, 88px);
  --fs-lg: 20px;
  --fs-md: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  --shadow-1: 0 1px 3px rgba(42, 37, 33, 0.10);
  --shadow-2: 0 8px 28px rgba(42, 37, 33, 0.16);

  --dur-tap: 80ms;
  --dur-ui: 200ms;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:        #141210;
    --c-bg-sunken: #0e0d0b;
    --c-panel:     #1e1b17;
    --c-line:      #35302a;
    --c-ink:       #ece4d6;
    --c-ink-dim:   #9a9083;
    --c-accent:    #e0705a;
    --c-gold:      #d4a95e;
    --c-glow:      rgba(224, 112, 90, 0.22);
    --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --c-bg:        #141210;
  --c-bg-sunken: #0e0d0b;
  --c-panel:     #1e1b17;
  --c-line:      #35302a;
  --c-ink:       #ece4d6;
  --c-ink-dim:   #9a9083;
  --c-accent:    #e0705a;
  --c-gold:      #d4a95e;
  --c-glow:      rgba(224, 112, 90, 0.22);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.6);
}

/* ── 리셋 ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* 세로 화면 기준. 가로 스크롤이 생기면 버그다 */
  overflow-x: hidden;
  /* 연타 시 확대·글자 선택·회색 하이라이트 방지 */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

h1, h2, h3, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--c-accent); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ── 공통 유틸 ──────────────────────────────────── */

/* 숫자가 흔들리지 않게 고정폭. 롤링 애니메이션의 전제다 */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }

/* 화면 세로를 꽉 채우는 기본 골격. 주소창 높이 변화를 견딘다 */
.screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── 모션 ───────────────────────────────────────── */
@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;
  }
}