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

/* ── 글꼴 (2026-09-01 추가) ─────────────────────
   원래 --f-sans 첫 자리가 "Pretendard" 였는데 그 파일을 아무 데서도 안 받아왔다.
   맥은 -apple-system 으로 떨어져 봐줄 만했지만 윈도우는 맑은 고딕까지 밀려서
   PC 화면만 촌스러웠다. 이제 실제로 받아온다.

   본문 Pretendard — 동적 서브셋이라 화면에 뜨는 글자만 내려받는다.
     ⚠ Google Fonts 에 없어서 jsdelivr 를 쓴다. STACK.md 의 "외부 폰트는 Google Fonts"
       규칙에 예외가 하나 늘었다. 못 받아오면 예전처럼 맑은 고딕으로 떨어질 뿐 안 깨진다.
   제목 Gowun Batang — 한지·먹 톤에 맞는 명조. Google Fonts.

   @import 는 CSS 를 순서대로 받게 만들어 조금 느리다. 그래도 화면 파일 11개에
   <link> 를 흩뿌리는 것보다 한 곳에서 관리하는 편이 낫다고 봤다. */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");
@import url("https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap");

/* ── 토큰 (라이트가 기본) ───────────────────────── */
: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 Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  /* 제목·수료증에만 쓴다. 본문에 쓰면 작은 글자가 읽기 나빠진다.
     ⚠ 굴러가는 숫자(.num)에는 쓰지 않는다 — 고정폭 숫자를 안 줘서 자릿수가 흔들린다 */
  --f-serif: "Gowun Batang", "Nanum Myeongjo", "Apple SD Gothic Neo", 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;
  }
}