:root {
    /* =========================
       Typography
    ========================= */
    --font-family-base: "Pretendard", "Noto Sans KR", sans-serif;

    --font-size-display: 48px;
    --font-size-heading-lg: 32px;
    --font-size-heading-md: 24px;
    --font-size-title-lg: 20px;
    --font-size-title-md: 18px;
    --font-size-body-lg: 16px;
    --font-size-body-md: 14px;
    --font-size-caption: 12px;
    --font-size-button: 14px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-1: 1.3;
    --line-height-2: 1.4;
    --line-height-3: 1.5;
    --line-height-4: 1.6;

    /* =========================
       Base Color
    ========================= */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-bg: #ffffff;
    --color-subtle: #f8f9fa;
    --color-surface: #ffffff;
    --color-border: #e5e7eb;

    /* =========================
       Gray Scale
    ========================= */
    --gray-100: #F7F8FA;
    --gray-200: #EEF1F4;
    --gray-300: #E5E7EB;
    --gray-400: #D1D5DB;
    --gray-500: #9CA3AF;
    --gray-600: #6B7280;
    --gray-700: #4B5563;
    --gray-800: #374151;

    /* =========================
       Primary Color
    ========================= */
    --primary-100: #EEF2FF;
    --primary-300: #C7D2FE;
    --primary-500: #4F6EF7;
    --primary-600: #3B5BDB;
    --primary-700: #2F4ACF;

    --color-primary: var(--primary-500);
    --color-primary-hover: var(--primary-600);
    --color-primary-light: var(--primary-100);

    /* =========================
       Accent / CTA
    ========================= */
    --accent-500: #22C55E;
    --accent-600: #16A34A;
    --accent-700: #15803D;

    --color-accent: var(--accent-500);
    --color-accent-hover: var(--accent-600);
    --color-accent-active: var(--accent-700);

    /* =========================
       Semantic Color
    ========================= */
    --color-success: #34D399;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #4F6EF7;

    /* =========================
       Text Color
    ========================= */
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-500);
    --text-disabled: var(--gray-400);
    --text-inverse: var(--color-white);

    /* =========================
       Spacing
    ========================= */
    --space-0: 0;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    /* =========================
       Radius
    ========================= */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* =========================
       Shadow
    ========================= */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.12);

    /* =========================
       Layout
    ========================= */
    --container-width: 1280px;
}

@media (max-width: 1024px) {
    :root {
        --font-size-display: 40px;   /* 48 → 40 */
        --font-size-heading-lg: 28px; /* 32 → 28 */
        --font-size-heading-md: 22px; /* 24 → 22 */
        --font-size-title-lg: 18px;   /* 20 → 18 */
        --font-size-title-md: 16px;   /* 18 → 16 */
        --font-size-body-lg: 15px;    /* 16 → 15 */
        --font-size-body-md: 13px;    /* 14 → 13 */
        --font-size-caption: 11px;    /* 12 → 11 */
        --font-size-button: 16px;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-display: 28px;   /* 48 → 28 */
        --font-size-heading-lg: 22px; /* 32 → 22 */
        --font-size-heading-md: 18px; /* 24 → 18 */
        --font-size-title-lg: 16px;   /* 20 → 16 */
        --font-size-title-md: 14px;   /* 18 → 14 */
        --font-size-body-lg: 14px;    /* 유지 (핵심) */
        --font-size-body-md: 13px;
        --font-size-caption: 11px;
        --font-size-button: 16px;     /* 버튼은 줄이지 않음 */
    }

    /* 모바일 가독성 핵심 */
    body {
        line-height: 1.6;
    }
}