/* 제이퍼계산기 디자인 토큰 v1 — 로고(#001C51 / #1572F9) 기준, 2026-10-15 확정 */
:root {
  --navy: #001C51;
  --blue: #1572F9;
  --primary: #0D63DC;
  --primary-hover: #0A52B8;
  --primary-tint: #EFF5FF;
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --line: #E5EAF2;
  --text: #1F2A44;
  --text-sub: #667085;
  --text-muted: #8A94A6;
  --ok: #16A34A;   --ok-text: #15803D;   --ok-tint: #EAF7EE;
  --warn: #F59E0B; --warn-text: #B45309; --warn-tint: #FEF5E6;
  --bad: #E5484D;  --bad-text: #C8312F;  --bad-tint: #FDECEC;
  --c-realestate: #EA580C;
  --c-salary: #2563EB;
  --c-tools: #0D9488;
  --c-tax: #16A34A;
  --c-pension-welfare: #0284C7;
  --c-finance: #4F46E5;
  --c-date: #C026D3;
  --c-health: #DB2777;
  --c-ai: #7C3AED;
  --c-pet: #CA8A04;
  --c-auto: #DC2626;
  --c-baby: #65A30D;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.04);
  --font: 'Pretendard', -apple-system, 'Apple SD Gothic Neo', sans-serif;
}

/* 치수 (2026-10-16 확정) */
/* brief "치수는 이미지에서 재지 말고 아래 값" 표. 모바일 기본, 데스크톱은 아래 미디어쿼리 */
:root {
  /* 타이포 (모바일 기본, 데스크톱은 아래 @media) */
  --fs-result: 44px;      --fw-result: 700;
  --fs-result-unit: 20px; --fw-result-unit: 600;
  --fs-result-hero: 56px;
  --fs-title: 22px;       --fw-title: 700;    /* brief 확정: 페이지 제목 22/700 */
  --fs-title-compact: 22px;
  --fs-section: 18px;     --fw-section: 700;
  --fs-input: 17px;       --fw-input: 600;    /* brief 확정: 입력값 17/600 */
  --fs-label: 14px;       --fw-label: 600;    /* brief 확정: 라벨 14/600 */
  --fs-body: 16px;        --fw-body: 400;     --lh-body: 1.7;
  --fs-meta: 13px;        --fw-meta: 500;
  --ls-tight: -0.02em;

  /* 간격 (4 단위) */
  --space-card: 20px;  --space-field: 20px;  --space-section: 40px; /* = --gap-section */  --space-page-x: 16px;
  --space-label: 8px;  --space-help: 6px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;

  /* 간격 기준 (2026-10-20 사용자 확정, 모바일 / 데스크톱은 아래 @media). 검사: design/tools/spacing_audit.py (±4px) */
  --gap-section: 40px;     /* 섹션 사이: 블록 끝 → 다음 섹션 제목 (40 / 48) */
  --gap-title: 12px;       /* 섹션 제목 → 내용 (12 / 16) */
  --gap-h3-top: 24px;      /* 소제목(h3) 위 (24 / 32) */
  --gap-h3-bottom: 8px;    /* 소제목(h3) 아래 (8 / 12) */
  --gap-card: 12px;        /* 카드 사이 (12 / 16) */
  --pad-card: 20px;        /* 카드 안 여백 (20 / 24) */
  --gap-para: 12px;        /* 문단 사이 (12) */
  --gap-h1: 24px;          /* 페이지·허브 제목(h1) 머리 → 첫 섹션 (24 / 32) */

  /* 크기 (brief 확정 치수) */
  --h-header: 52px;        /* 모바일 52, 데스크톱 64 */
  --h-input: 48px;  --h-input-compact: 48px;
  --h-btn: 52px;           /* 주 버튼 */
  --h-seg: 56px;           /* 3분할 선택 버튼 */
  --h-tabbar: 56px;
  --h-tap: 44px;  --h-chip: 36px;  --h-sticky-bar: 56px;  --h-search: 56px;  --h-cookie: 56px;
  --icon-tile: 36px;       /* brief 확정: 제목 옆 아이콘 타일 36 */
  --icon-stroke: 2;        /* 2026-10-16 결정: 1.75 → 2 */
  --gauge-h: 8px;
  --container-max: 1200px; /* H1: 콘텐츠 폭 1200 */
  --read-max: 720px;       /* 읽기 폭: 블로그 글·정보 페이지 */
  --grid-gap: 32px;  --sticky-top: 88px;  --ad-slot-h: 250px;
}
@media (min-width: 1024px) {
  :root { --fs-result: 52px; --fs-title: 32px; --fs-section: 20px; --space-card: 24px; --space-section: 48px; --h-header: 64px;
          --gap-section: 48px; --gap-title: 16px; --gap-h3-top: 32px; --gap-h3-bottom: 12px; --gap-card: 16px; --pad-card: 24px; --gap-h1: 32px; }   /* space-section은 2026-10-20 간격 기준으로 64 → 48 */
}