@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/**
 * Design Tokens
 * 숨카(SUMCAR) 프로젝트 디자인 시스템
 *
 * PHP 5.6 환경 / IE11 호환
 * CSS Variables with Fallback
 */
:root {
    /* ========================================
       Primary Colors
       ======================================== */
    --c-primary: #00B8C6;
    --c-primary-light: #33C9D5;
    --c-primary-dark: #00A0AD;

    /* ========================================
       Background Colors
       ======================================== */
    --c-bg: #0E0E0E;
    --c-bg-light: #1A1A1A;
    --c-card: #1C1C1C;
    --c-card-hover: #252525;

    /* ========================================
       Text Colors
       ======================================== */
    --c-text: #FFFFFF;
    --c-text-muted: #C7D2D9;
    --c-text-disabled: #6B7280;

    /* ========================================
       Semantic Colors
       ======================================== */
    --c-success: #10B981;
    --c-warning: #F59E0B;
    --c-error: #EF4444;
    --c-info: #3B82F6;

    /* ========================================
       Overlay
       ======================================== */
    --c-overlay: rgba(0, 0, 0, 0.7);
    --c-overlay-light: rgba(0, 0, 0, 0.4);

    /* ========================================
       Font Sizes
       ======================================== */
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-caption: 13px;

    /* ========================================
       Line Heights
       ======================================== */
    --lh-h1: 48px;      /* 1.2 */
    --lh-h2: 40px;      /* 1.25 */
    --lh-h3: 32px;      /* 1.33 */
    --lh-h4: 28px;      /* 1.4 */
    --lh-body: 24px;    /* 1.5 */
    --lh-small: 20px;   /* 1.43 */
    --lh-caption: 18px; /* 1.38 */

    /* ========================================
       Font Weights
       ======================================== */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ========================================
       Spacing Scale
       ======================================== */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-96: 96px;

    /* ========================================
       Border Radius
       ======================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ========================================
       Shadows
       ======================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);

    /* Card Specific */
    --shadow-card: 0 4px 12px rgba(0, 184, 198, 0.1);
    --shadow-card-hover: 0 8px 24px rgba(0, 184, 198, 0.2);

    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* ========================================
       Container
       ======================================== */
    --container-max-width: 1200px;
    --container-padding: 24px;

    /* ========================================
       Grid
       ======================================== */
    --grid-columns: 12;
    --grid-gutter: 24px;

    /* ========================================
       Breakpoints
       ======================================== */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
}

/* ========================================
   Mobile Adjustments
   ======================================== */
@media (max-width: 767px) {
    :root {
        /* Font Sizes */
        --fs-h1: 32px;
        --fs-h2: 28px;
        --fs-h3: 20px;
        --fs-h4: 18px;

        /* Line Heights */
        --lh-h1: 40px;
        --lh-h2: 36px;
        --lh-h3: 28px;
        --lh-h4: 26px;

        /* Container */
        --container-padding: 16px;

        /* Grid */
        --grid-gutter: 16px;
    }
}

/* ========================================
   Font Family
   ======================================== */
body {
    font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   IE11 Fallback Examples
   개발 시 다음 패턴 사용
   ======================================== */

/*
.example {
    /* Fallback for IE11
    background-color: #00B8C6;

    /* Modern browsers
    background-color: var(--c-primary);
}
*/