:root {
    /* ========================================
       색상 변수 (Color Variables)
       ======================================== */

    /* 헤더 배경 그라디언트 */
    --header-bg-start: #1e3c72;
    --header-bg-end: #2a5298;
    --header-bg-overlay-opacity: 0.8;

    /* 헤더 배경 이미지 대체 색상 (이미지 로드 실패 시) */
    --header-bg-fallback-start: #1a365d;
    --header-bg-fallback-end: #2c5282;

    /* 헤더 그라디언트 방향 */
    --header-gradient-direction: 135deg;

    /* 넓이 */
    --container-max-width: 1440px;

    /* 색상 */
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --background-color: #f8f9fa;
    --text-color: #333;
    --light-text: #7f8c8d;
    --border-color: #ddd;
    --bg-primary: #f3f3f3;
    --bg-secondary: #f3f3f3;

    /* 타이포그래피 */
    --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;

    /* 간격 */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --container-padding: 20px;

    /* 테두리 */
    --border-radius: 4px;
    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* 애니메이션 */
    --transition-speed: 0.3s;
    --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* ========================================
       모달 변수 (Modal Variables)
       ======================================== */
    --modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --modal-bg: white;
    --modal-border-radius: 8px;
    --modal-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --modal-max-width: 500px;
    --modal-width: 90%;
    --modal-max-height: 80vh;
    --modal-z-index: 1050;
    --modal-padding: 20px 24px;
    --modal-header-padding: 20px 24px 16px;
    --modal-footer-padding: 16px 24px 24px;

    /* ========================================
       카드 변수 (Card Variables)
       ======================================== */
    --card-bg: white;
    --card-border-radius: 12px;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --card-border: 1px solid rgba(0, 0, 0, 0.05);
    --card-padding: 1.5rem;
    --card-hover-transform: translateY(-4px);

    /* ========================================
       하이라이트 변수 (Highlight Variables)
       ======================================== */
    --highlight-title-bg: #fff3cd;
    --highlight-title-color: #856404;
    --highlight-abstract-bg: #fff3cd;
    --highlight-abstract-color: #856404;
    --highlight-keyword-bg: #e3f2fd;
    --highlight-keyword-color: #1565c0;
    --highlight-contributor-bg: #f3e5f5;
    --highlight-contributor-color: #7b1fa2;
    --highlight-padding: 1px 2px;
    --highlight-border-radius: 2px;

    /* ========================================
       버튼 변수 (Button Variables)
       ======================================== */
    --btn-primary-bg: #007bff;
    --btn-primary-bg-hover: #0056b3;
    --btn-primary-color: white;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-bg-hover: #545b62;
    --btn-secondary-color: white;
    --btn-border-radius: 4px;
    --btn-padding: 8px 16px;
    --btn-font-size: 14px;
    --btn-font-weight: 500;
    --btn-min-width: 80px;
    --btn-gap: 4px;

    /* ========================================
       폼 변수 (Form Variables)
       ======================================== */
    --input-border-color: #e9ecef;
    --input-border-color-focus: #007bff;
    --input-border-radius: 4px;
    --input-padding: 0.5rem 0.75rem;
    --input-font-size: 14px;
    --input-bg: white;
    --input-shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

    /* ========================================
       상태 색상 (Status Colors)
       ======================================== */
    --status-success: #28a745;
    --status-warning: #ffc107;
    --status-danger: #dc3545;
    --status-info: #17a2b8;
    --status-success-light: #d4edda;
    --status-warning-light: #fff3cd;
    --status-danger-light: #f8d7da;
    --status-info-light: #d1ecf1;

    /* ========================================
       Z-Index 레이어 (Z-Index Layers)
       ======================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ========================================
       그리드 & 레이아웃 (Grid & Layout)
       ======================================== */
    --grid-gap-sm: 1rem;
    --grid-gap-md: 1.5rem;
    --grid-gap-lg: 2rem;
    --grid-min-width: 300px;
    --list-item-padding: 1rem;
    --list-item-border: 1px solid var(--border-color);
}