/**
 * CSS Variables & Browser Compatibility
 * 크로스 브라우저 호환성을 위한 CSS 변수 및 폴백
 */

:root {
    /* Color Palette */
    --charcoal: #1A1A1A;
    --warm-gray: #4A4A4A;
    --deep-orange: #D35400;
    --off-white: #F8F8F8;
    --light-gray: #E0E0E0;

    /* Semantic Colors */
    --text-primary: var(--charcoal);
    --text-secondary: var(--warm-gray);
    --accent: var(--deep-orange);
    --background: var(--off-white);
    --border: var(--light-gray);

    /* Typography */
    --font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: clamp(16px, 1.1vw, 64px);
    --line-height-base: 1.6;

    /* Spacing */
    --spacing-xs: 0.25em;
    --spacing-sm: 0.5em;
    --spacing-md: 1em;
    --spacing-lg: 2em;
    --spacing-xl: 4em;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Z-index layers */
    --z-background: 0;
    --z-content: 1;
    --z-navigation: 50;
    --z-overlay: 100;
    --z-modal: 200;
}

/* IE11 및 구형 브라우저를 위한 폴백 */
@supports not (--css: variables) {
    body {
        font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: #F8F8F8;
        color: #1A1A1A;
    }
}