/* 셈딱 디자인 토큰. 다른 CSS 는 이 변수만 사용한다(색 값 직접 입력 금지). 문서: assets/DESIGN.md */
:root {
  color-scheme: light dark;

  /* 색: 중립 + 파랑 1색 */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f5f9;
  --color-text: #111827;
  --color-text-muted: #4b5563;
  --color-border: #e2e8f0;
  --color-border-strong: #6b7280; /* 입력 테두리: 흰 배경 대비 3:1 이상 */
  --color-primary: #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-on-primary: #ffffff;
  --color-primary-soft: #eff6ff;
  --color-focus: #1d4ed8;
  --color-paper: #ffffff; /* 바코드·QR 미리보기 배경: 스캔 때문에 다크에서도 흰색 */
  --color-success: #166534;
  --color-success-soft: #f0fdf4;
  --color-warning: #92400e;
  --color-warning-soft: #fffbeb;
  --color-danger: #b91c1c;
  --color-danger-soft: #fef2f2;

  /* 타이포: 외부 폰트 없음, 시스템 스택 */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px, 입력창은 16px 미만 금지(iOS 확대 방지) */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --lh-tight: 1.3;
  --lh-base: 1.7;       /* 한글 본문 */

  /* 간격: 4px 기준 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* 반경·그림자·레이아웃 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08);
  --container: 960px;
  --container-narrow: 720px;
  --tap-min: 44px;      /* 터치 영역 최소 */
  --ad-min-height: 280px;
}

@media (min-width: 768px) {
  :root {
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
  }
}

/* 다크 모드(선택): 시스템 설정을 따른다. 수동 전환 UI 는 없음 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-muted: #172033;
    --color-text: #e5e7eb;
    --color-text-muted: #a3acba;
    --color-border: #334155;
    --color-border-strong: #94a3b8;
    --color-primary: #93c5fd;
    --color-primary-hover: #bfdbfe;
    --color-on-primary: #0f172a;
    --color-primary-soft: #1e3a5f;
    --color-focus: #93c5fd;
    --color-success: #86efac;
    --color-success-soft: #14301f;
    --color-warning: #fcd34d;
    --color-warning-soft: #33280f;
    --color-danger: #fca5a5;
    --color-danger-soft: #3a1a1a;
    --shadow-sm: none;
    --shadow-md: none;
  }
}