/**
 * GosuSchool Design System
 * 질서, 통일감, 깔끔함을 위한 디자인 토큰
 */

:root {
    /* ============================================
       Color Palette
       ============================================ */

    /* Primary Colors */
    --color-primary: #2556F5;
    --color-primary-dark: #1A45D5;
    --color-primary-light: #4A76FF;

    --color-secondary: #00D4D4;
    --color-secondary-dark: #00A8A8;

    --color-accent: #FF6B6B;

    /* Neutral Colors */
    --color-dark: #0D0D0D;
    --color-gray-900: #1A1A1A;
    --color-gray-800: #333333;
    --color-gray-700: #4D4D4D;
    --color-gray-600: #666666;
    --color-gray-500: #808080;
    --color-gray-400: #999999;
    --color-gray-300: #CCCCCC;
    --color-gray-200: #E0E0E0;
    --color-gray-100: #F5F5F5;
    --color-white: #FFFFFF;

    /* Background */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F5F5;
    --bg-dark: #1A1D3D;

    /* Status Colors */
    --color-success: #00C896;
    --color-warning: #FFB800;
    --color-danger: #FF3B3B;
    --color-info: #2196F3;

    /* ============================================
       Typography
       ============================================ */

    --font-family: 'Spoqa Han Sans Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes */
    --font-h1: 28px;
    --font-h2: 24px;
    --font-h3: 20px;
    --font-h4: 18px;
    --font-body: 16px;
    --font-small: 14px;
    --font-tiny: 12px;

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

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.8;

    /* ============================================
       Spacing Scale
       ============================================ */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

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

    /* ============================================
       Component Sizes
       ============================================ */

    --header-height: 60px;
    --gnb-height: 60px;

    --instructor-profile-sm: 32px;
    --instructor-profile-md: 40px;
    --instructor-profile-lg: 80px;

    --icon-size-sm: 20px;
    --icon-size-md: 24px;
    --icon-size-lg: 32px;

    --button-height: 44px;
    --button-height-sm: 36px;

    /* ============================================
       Border & Shadow
       ============================================ */

    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --border-radius-full: 9999px;

    --border-width: 1px;
    --border-color: var(--color-gray-200);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16);

    /* ============================================
       Transitions
       ============================================ */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ============================================
       Z-Index Scale
       ============================================ */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================
   Icon System (Font Awesome)
   ============================================ */

i {
    display: inline-block;
    line-height: 1;
    width: 20px;
    height: 20px;
    font-size: 20px;
    text-align: center;
}

.icon {
    font-size: 20px;
    vertical-align: middle;
    user-select: none;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.icon-sm {
    font-size: var(--icon-size-sm);
}

.icon-lg {
    font-size: var(--icon-size-lg);
}

.icon-primary {
    color: var(--color-primary);
}

.icon-secondary {
    color: var(--color-secondary);
}

.icon-success {
    color: var(--color-success);
}

/* ============================================
   Reset & Base
   ============================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-body);
    line-height: var(--line-height-normal);
    color: var(--color-dark);
    background: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Utility Classes
   ============================================ */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-bold { font-weight: var(--font-bold); }
.font-semibold { font-weight: var(--font-semibold); }
.font-medium { font-weight: var(--font-medium); }

/* Spacing */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Hide */
.hide { display: none !important; }