/*
 * 시니어 친화 디자인 토큰.
 * 모든 미니퍼즐/엔진/UI 가 이 변수를 참조.
 * docs/senior-ux-checklist.md 의 기준 반영.
 */

:root {
  /* 폰트 크기 (시니어 친화 — 본문 ≥18, 버튼 ≥22) */
  --fs-xs: 16px;
  --fs-body: 20px;       /* 본문 — 18 보다 큼 (안전 마진) */
  --fs-button: 24px;     /* 버튼 텍스트 */
  --fs-h2: 28px;
  --fs-h1: 36px;
  --fs-display: 48px;    /* 점수, 큰 강조 */

  /* 줄 간격 */
  --lh-body: 1.6;
  --lh-tight: 1.3;

  /* 폰트 패밀리 — Pretendard 우선, 시스템 한글 폴백 */
  --ff-base: "Pretendard", -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
             "Segoe UI", Roboto, sans-serif;

  /* 색상 — AAA 대비 보장 */
  --c-bg: #FFFFFF;
  --c-bg-elev: #F4F7FA;          /* 카드/입력 배경 */
  --c-text: #1A1F2C;             /* 본문 (vs --c-bg 대비비 = 16:1) */
  --c-text-muted: #4A5161;       /* 보조 (vs --c-bg 대비비 = 8.4:1) */
  --c-primary: #1F6FEB;          /* 주 액션 (vs 흰색 위 7.2:1) */
  --c-primary-hover: #1957C2;
  --c-success: #1A7A3E;          /* 정답 (AAA) */
  --c-success-bg: #DFF5E7;
  --c-warning: #8B5A00;
  --c-error: #B92237;
  --c-border: #C9D1DB;
  --c-shadow: rgba(20, 28, 44, 0.12);

  /* 탭 타깃 — 모두 60×60 이상 권장 */
  --tap-min: 60px;
  --tap-comfort: 72px;

  /* 간격 */
  --sp-xs: 8px;
  --sp-sm: 12px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-2xl: 64px;

  /* 모서리 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* 트랜지션 — 시니어 인지 시간 확보, 너무 빠르지 않게 */
  --t-fast: 180ms;
  --t-norm: 320ms;
  --t-slow: 520ms;
}

/* 글로벌 리셋 (최소) */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
  /* 시니어: 핀치 줌 허용 (user-scalable=no 금지) */
}

button {
  font-family: inherit;
  font-size: var(--fs-button);
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

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

img {
  max-width: 100%;
  height: auto;
}