/* CSS 변수 전체 정의 — 색상, 타이포그래피, 간격, 그림자 (계산·레이아웃 금지) */

:root {
  /* =========================================================
     색상 — 배경
     ========================================================= */
  --color-bg-base: #FAFAF8;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F4F4F1;
  --color-bg-muted: #EBEBEA;
  --color-bg-elevated: #EEEEED;        /* 소계 행 등 강조 배경 */

  /* =========================================================
     색상 — 텍스트
     ========================================================= */
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #4A4A68;
  --color-text-tertiary: #8A8AA0;
  --color-text-disabled: #BCBCCC;
  --color-text-inverse: #FFFFFF;
  --color-text-muted: #8A9CC0;         /* 다크 배경 위 보조 텍스트 */
  --color-text-placeholder: #BCBCCC;  /* 인풋 플레이스홀더 */

  /* =========================================================
     색상 — 강조(accent)
     ========================================================= */
  --color-accent-primary: #0F7B6C;
  --color-accent-primary-hover: #0A6459;
  --color-accent-primary-light: #E8F5F3;
  --color-accent-secondary: #1A1A2E;

  /* =========================================================
     색상 — 결과 영역
     ========================================================= */
  --color-result-bg: #1A1A2E;
  --color-result-number: #FFFFFF;
  --color-result-label: #8A9CC0;
  --color-result-accent: #4ECDC4;
  --color-accent-teal-light: #4ECDC4;  /* 다크 배경 위 틸 강조 */

  /* =========================================================
     색상 — 시맨틱 상태
     ========================================================= */
  --color-success: #10B981;
  --color-success-light: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-light: #FEF3C7;
  --color-error: #EF4444;
  --color-error-light: #FEE2E2;

  /* =========================================================
     색상 — 테두리
     ========================================================= */
  --color-border-default: #E4E4E0;
  --color-border-focus: #0F7B6C;
  --color-border-error: #EF4444;
  --color-border-subtle: #F0F0EC;

  /* =========================================================
     색상 — 광고 슬롯
     ========================================================= */
  --color-ad-bg: #F7F7F5;
  --color-ad-border: #E0E0DB;
  --color-ad-text: #A0A09A;

  /* =========================================================
     타이포그래피 — 폰트 패밀리
     ========================================================= */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Noto Sans KR', sans-serif;
  --font-numeric: 'Pretendard', monospace;

  /* =========================================================
     타이포그래피 — 폰트 크기 (모듈러 스케일 1.25)
     ========================================================= */
  --text-4xl: 2.441rem;   /* 39px */
  --text-3xl: 1.953rem;   /* 31px */
  --text-2xl: 1.563rem;   /* 25px */
  --text-xl:  1.25rem;    /* 20px */
  --text-lg:  1.125rem;   /* 18px */
  --text-md:  1rem;       /* 16px */
  --text-sm:  0.875rem;   /* 14px */
  --text-xs:  0.75rem;    /* 12px */

  --text-base: 1rem;           /* --text-md 별칭 (16px) */

  /* 결과 숫자 전용 크기 */
  --text-result-hero:    2.75rem;  /* 44px */
  --text-result-hero-lg: 3.5rem;   /* 56px, 1024px+ */

  /* =========================================================
     타이포그래피 — 폰트 굵기
     ========================================================= */
  --font-regular:   400;
  --font-normal:    400;  /* --font-regular 별칭 */
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* =========================================================
     타이포그래피 — 행간(line-height)
     ========================================================= */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* =========================================================
     타이포그래피 — 자간(letter-spacing)
     ========================================================= */
  --tracking-tight:   -0.03em;
  --tracking-normal:  -0.01em;
  --tracking-wide:     0.02em;
  --tracking-widest:   0.08em;

  /* =========================================================
     테두리 반경
     ========================================================= */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* =========================================================
     그림자
     ========================================================= */
  --shadow-card:
    0 1px 3px rgba(26, 26, 46, 0.04),
    0 4px 16px rgba(26, 26, 46, 0.06),
    0 0 0 1px rgba(26, 26, 46, 0.03);

  --shadow-card-hover:
    0 4px 8px rgba(26, 26, 46, 0.06),
    0 12px 32px rgba(26, 26, 46, 0.10),
    0 0 0 1px rgba(15, 123, 108, 0.15);

  /* =========================================================
     트랜지션
     ========================================================= */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;

  /* =========================================================
     간격 (spacing) — 레이아웃·컴포넌트 공용
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* =========================================================
     레이아웃 — 최대 너비 / 사이드바 너비
     ========================================================= */
  --layout-max-width:    1200px;
  --layout-sidebar-width: 300px;
  --layout-header-height-mobile: 56px;
  --layout-header-height-desktop: 64px;
  --layout-sticky-top:   80px; /* 헤더 높이 + 여백 */
}