/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ========== 기존 변수 (하위 호환성 유지) ========== */
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --secondary-color: #64748b;
    --success-color: #22c55e;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;

    /* ========== 배경 계층 (Light Mode) ========== */
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-muted: #e2e8f0;
    --bg-color: var(--bg-base);
    --card-bg: var(--bg-surface);

    /* ========== 텍스트 계층 ========== */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #6b7280; /* 라이트 모드: 대비 강화 (4.5:1 이상) */
    --text-inverse: #ffffff;
    --text-on-gradient: #ffffff; /* 그라디언트 배경 위 텍스트 (항상 흰색) */
    --text-on-gold: #ffffff; /* 금/은/동 그라디언트 배경 위 텍스트 (항상 흰색) */

    /* ========== 테두리 ========== */
    --border-default: #e2e8f0;
    --border-subtle: #f1f5f9;
    --border-strong: #cbd5e1;
    --border-color: var(--border-default);

    /* ========== 오버레이 (다크모드 핵심) ========== */
    --overlay-subtle: rgba(0, 0, 0, 0.04);
    --overlay-light: rgba(0, 0, 0, 0.08);
    --overlay-medium: rgba(0, 0, 0, 0.16);
    --overlay-strong: rgba(0, 0, 0, 0.32);
    --overlay-heavy: rgba(0, 0, 0, 0.64);

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

    /* ========== 상태 색상 (고정) ========== */
    --primary: #6366f1;
    --primary-light: #e0e7ff;
    --primary-dark: #4f46e5;
    --success: #22c55e;
    --success-light: #dcfce7;
    --success-dark: #16a34a;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --danger-dark: #dc2626;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-dark: #d97706;
    --info: #3b82f6;
    --info-light: #dbeafe;
    --info-dark: #2563eb;

    /* ========== 뱃지 배경/텍스트 ========== */
    --badge-success-bg: #dcfce7;
    --badge-success-text: #166534;
    --badge-danger-bg: #fee2e2;
    --badge-danger-text: #991b1b;
    --badge-warning-bg: #fef3c7;
    --badge-warning-text: #b45309;
    --badge-info-bg: #dbeafe;
    --badge-info-text: #1d4ed8;
    --badge-gray-bg: #f1f5f9;
    --badge-gray-text: #475569;
    --badge-indigo-bg: #e0e7ff;
    --badge-indigo-text: #3730a3;
    --badge-pink-bg: #fce7f3;
    --badge-pink-text: #9d174d;
    --pink: #ec4899;
    --pink-dark: #be185d;

    /* ========== 보조 색상 ========== */
    --secondary-hover: #4b5563;
    --correct-row-bg: #f0fdf4;

    /* ========== 입력 필드 ========== */
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --input-focus-border: var(--primary-color);
    --input-placeholder: #6b7280; /* 라이트 모드: 대비 강화 */

    /* ========== 테이블 ========== */
    --table-header-bg: #f8fafc;
    --table-row-hover: #f1f5f9;
    --table-border: #e2e8f0;

    /* ========== 그라디언트 ========== */
    --gradient-client: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-game: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    --gradient-sidebar: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    --gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --gradient-silver: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    --gradient-bronze: linear-gradient(135deg, #f97316 0%, #ea580c 100%);

    /* ========== 랭킹 배경용 Light 그라디언트 ========== */
    --gradient-gold-light: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    --gradient-silver-light: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    --gradient-bronze-light: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    --gradient-success-light: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);

    /* ========== 포디움 카드 배경 ========== */
    --podium-gold-bg: var(--gradient-gold-light);
    --podium-silver-bg: var(--gradient-silver-light);
    --podium-bronze-bg: var(--gradient-bronze-light);
    --podium-gold-stand: var(--gradient-gold);
    --podium-silver-stand: var(--gradient-silver);
    --podium-bronze-stand: var(--gradient-bronze);

    /* ========== 포디움 다크모드용 색상 ========== */
    --podium-gold-bg-dark: rgba(146, 112, 12, 0.25);
    --podium-silver-bg-dark: rgba(75, 85, 99, 0.3);
    --podium-bronze-bg-dark: rgba(146, 64, 14, 0.25);
    --podium-gold-stand-dark: linear-gradient(135deg, #92700c 0%, #6b5209 100%);
    --podium-silver-stand-dark: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    --podium-bronze-stand-dark: linear-gradient(135deg, #92400e 0%, #78350f 100%);

    /* ========== Primary Shadow ========== */
    --shadow-primary: 0 6px 20px rgba(99, 102, 241, 0.4);

    /* ========== 티어 색상 (브랜드 고정) ========== */
    --tier-bronze: #CD7F32;
    --tier-silver: #C0C0C0;
    --tier-gold: #FFD700;
    --tier-platinum: #E5E4E2;
    --tier-diamond: #B9F2FF;
    --tier-master: #FF6B6B;
    --tier-challenger: #00BFFF;

    /* ========== 티어 텍스트 (라이트 모드용 - 밝은 배경 가시성) ========== */
    --tier-bronze-dark: #b87333;
    --tier-silver-dark: #4B5563;
    --tier-gold-dark: #B45309;
    --tier-platinum-dark: #475569;
    --tier-diamond-dark: #0284C7;
    --tier-challenger-dark: #0369A1;

    /* ========== 티어 그라디언트 ========== */
    --tier-bronze-gradient: linear-gradient(135deg, #CD7F32 0%, #B8860B 100%);
    --tier-silver-gradient: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    --tier-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --tier-platinum-gradient: linear-gradient(135deg, #E5E4E2 0%, #73C2FB 100%);
    --tier-diamond-gradient: linear-gradient(135deg, #B9F2FF 0%, #87CEEB 100%);
    --tier-master-gradient: linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%);
    --tier-challenger-gradient: linear-gradient(135deg, #00BFFF 0%, #1E90FF 100%);

    /* ========== 그레이톤 (다크 텍스트용) ========== */
    --gray-900: #1f2937;
    --gray-700: #374151;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;

    /* ========== 슬레이트 (라이트 텍스트용) ========== */
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;

    /* ========== 희귀도 색상 (브랜드 고정) ========== */
    --rarity-common: #9CA3AF;
    --rarity-rare: #3B82F6;
    --rarity-epic: #A855F7;
    --rarity-legendary: #F59E0B;

    /* ========== 체커보드 패턴 (그리드 지그재그) ========== */
    --checker-base-bg: #f8fafc;
    --checker-base-hover: #e0e7ff;
    --checker-alt-bg: #fef9c3;
    --checker-alt-hover: #fde68a;

    /* ========== 팬 챌린지/랭크 모드 색상 ========== */
    --ranked-gradient: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    --amber-bg: #fef9c3;
    --amber-text: #92400e;
    --amber-text-dark: #78350f;
    --info-bg: #eff6ff;
    --success-bg: #ecfdf5;
    --success-text-dark: #065f46;
    --info-text-dark: #1e40af;
    --danger-text-dark: #991b1b;
    --danger-bg: #fecaca;

    /* ========== 타이머/게임 색상 ========== */
    --timer-success: linear-gradient(90deg, #2ed573, #7bed9f);
    --timer-warning: linear-gradient(90deg, #ffa502, #ffcc00);
    --timer-answering: linear-gradient(90deg, #8b5cf6, #a78bfa);
    --timer-critical: linear-gradient(90deg, var(--danger), #ff6b81);
    --violet: #8b5cf6;
    --violet-light: #c4b5fd;

    /* ========== 상태 색상 투명 배경 ========== */
    --success-bg-transparent: rgba(34, 197, 94, 0.15);
    --violet-bg-transparent: rgba(139, 92, 246, 0.15);

    /* ========== 티어 배경 (투명도 포함) ========== */
    --tier-bronze-bg: rgba(205, 127, 50, 0.15);
    --tier-bronze-bg-hover: rgba(205, 127, 50, 0.25);
    --tier-silver-bg: rgba(192, 192, 192, 0.2);
    --tier-silver-bg-hover: rgba(192, 192, 192, 0.3);
    --tier-gold-bg: rgba(255, 215, 0, 0.2);
    --tier-gold-bg-hover: rgba(255, 215, 0, 0.3);
    --tier-platinum-bg: rgba(229, 228, 226, 0.3);
    --tier-platinum-bg-hover: rgba(229, 228, 226, 0.4);
    --tier-diamond-bg: rgba(185, 242, 255, 0.3);
    --tier-diamond-bg-hover: rgba(185, 242, 255, 0.4);
    --tier-master-bg: rgba(255, 107, 107, 0.2);
    --tier-master-bg-hover: rgba(255, 107, 107, 0.3);
    --tier-challenger-bg: rgba(0, 191, 255, 0.2);
    --tier-challenger-bg-hover: rgba(0, 191, 255, 0.3);

    /* ========== 티어 배경 강조 (뱃지용, 0.7 opacity) ========== */
    --tier-bronze-bg-strong: rgba(205, 127, 50, 0.7);
    --tier-silver-bg-strong: rgba(192, 192, 192, 0.7);
    --tier-gold-bg-strong: rgba(255, 215, 0, 0.7);
    --tier-platinum-bg-strong: rgba(229, 228, 226, 0.7);
    --tier-diamond-bg-strong: rgba(185, 242, 255, 0.7);
    --tier-master-bg-strong: rgba(255, 107, 107, 0.7);
    --tier-challenger-bg-strong: rgba(0, 191, 255, 0.7);

    /* ========== 상태 표시 배경 (Admin/UI용) ========== */
    --status-primary-bg: rgba(99, 102, 241, 0.2);
    --status-primary-bg-hover: rgba(99, 102, 241, 0.3);
    --status-danger-bg: rgba(239, 68, 68, 0.2);
    --status-danger-bg-hover: rgba(239, 68, 68, 0.3);
    --status-warning-bg: rgba(251, 191, 36, 0.2);
    --status-warning-bg-hover: rgba(251, 191, 36, 0.3);
    --status-success-bg: rgba(34, 197, 94, 0.2);
    --status-success-bg-hover: rgba(34, 197, 94, 0.3);
    --status-info-bg: rgba(59, 130, 246, 0.2);
    --status-info-bg-hover: rgba(59, 130, 246, 0.3);

    /* ========== 게임 상태/효과 색상 ========== */
    --game-correct-glow: rgba(34, 197, 94, 0.3);
    --game-incorrect-glow: rgba(239, 68, 68, 0.3);
    --game-incorrect-border: rgba(239, 68, 68, 0.5);
    --game-focus-outline: rgba(99, 102, 241, 0.3);
    --game-focus-outline-light: rgba(99, 102, 241, 0.1);
    --shadow-purple: rgba(139, 92, 246, 0.4);

    /* ========== 흰색 오버레이 (게임 페이지용) ========== */
    --overlay-white-subtle: rgba(255, 255, 255, 0.04);
    --overlay-white-light: rgba(255, 255, 255, 0.1);
    --overlay-white-light-medium: rgba(255, 255, 255, 0.15);
    --overlay-white-medium: rgba(255, 255, 255, 0.2);
    --overlay-white-strong: rgba(255, 255, 255, 0.3);
    --overlay-white-text: rgba(255, 255, 255, 0.7);
    --overlay-white-text-strong: rgba(255, 255, 255, 0.8);

    /* ========== 검정 오버레이 (라이트 모드용) ========== */
    --overlay-black-subtle: rgba(0, 0, 0, 0.04);
    --overlay-black-light: rgba(0, 0, 0, 0.1);
    --overlay-black-medium: rgba(0, 0, 0, 0.2);
    --overlay-black-strong: rgba(0, 0, 0, 0.3);
    --overlay-black-heavy: rgba(0, 0, 0, 0.4);

    /* ========== 흰색 텍스트 중간 투명도 ========== */
    --overlay-white-text-muted: rgba(255, 255, 255, 0.5);

    /* ========== 랭킹 로우 그라데이션 (다크모드 포디움용) ========== */
    --ranking-gold-gradient: linear-gradient(135deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.15) 100%);
    --ranking-gold-border: rgba(251, 191, 36, 0.3);
    --ranking-silver-gradient: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(100, 116, 139, 0.15) 100%);
    --ranking-silver-border: rgba(148, 163, 184, 0.3);
    --ranking-bronze-gradient: linear-gradient(135deg, rgba(217, 119, 6, 0.2) 0%, rgba(180, 83, 9, 0.15) 100%);
    --ranking-bronze-border: rgba(217, 119, 6, 0.3);

    /* ========== 모바일 컴팩트 레이아웃 색상 ========== */
    --compact-teal-border: rgba(78, 205, 196, 0.3);
    --compact-teal-glow: rgba(78, 205, 196, 0.5);
    --compact-hint-gradient: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.2) 100%);
    --compact-hint-border: rgba(139, 92, 246, 0.3);
    --compact-teal: #4ecdc4;
    --compact-teal-dark: #44a08d;
    --compact-progress-gradient: linear-gradient(90deg, #4ecdc4, #44a08d);
    --compact-text-light: #f0f0f0;
    --compact-hint-text: #e0e0ff;
    --compact-gold: #ffd700;

    /* ========== 블루 라이트 그라디언트 (준비 완료 배경) ========== */
    --gradient-blue-light: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%);

    /* ========== Vivid 색상 (고정값 - 다크 배경 위 텍스트/그라디언트용) ========== */
    --primary-vivid: #818cf8;
    --success-vivid: #4ade80;
    --success-vivid-light: #86efac;
    --warning-vivid: #fbbf24;
    --info-vivid: #93c5fd;
    --danger-vivid: #fca5a5;
    --pink-vivid: #f472b6;
    --pink-vivid-light: #f9a8d4;

    /* ========== Subtle 배경색 (테마 적응형) ========== */
    --primary-bg-subtle: #e0e7ff;
    --success-bg-subtle: #dcfce7;
    --warning-bg-subtle: #fef3c7;
    --info-bg-subtle: #dbeafe;
    --danger-bg-subtle: #fee2e2;
    --pink-bg-subtle: #fce7f3;

    /* ========== Readable 텍스트색 (테마 적응형) ========== */
    --primary-text-readable: #4f46e5;
    --success-text-readable: #16a34a;
    --warning-text-readable: #d97706;
    --info-text-readable: #2563eb;
    --danger-text-readable: #dc2626;
    --pink-text-readable: #be185d;

    /* ========== Deprecated Aliases (하위 호환성) ========== */
    --primary-bright: var(--primary-vivid);
    --success-bright: var(--success-vivid);
    --success-light-bright: var(--success-vivid-light);
    --warning-bright: var(--warning-vivid);
    --info-bright: var(--info-vivid);
    --pink-bright: var(--pink-vivid);
    --pink-light-bright: var(--pink-vivid-light);

    /* ========== 벤토 카드용 그라디언트 ========== */
    --gradient-pink-light: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    --gradient-green-light: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    --gradient-blue-card: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    --gradient-indigo-light: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);

    /* ========== 대중성 평점 색상 (1=대중적 ~ 5=매니악) ========== */
    --rating-1: #22c55e;        /* 매우 대중적 - 녹색 */
    --rating-2: #84cc16;        /* 대중적 - 연두 */
    --rating-3: #f59e0b;        /* 보통 - 노랑 */
    --rating-4: #f97316;        /* 매니악 - 주황 */
    --rating-5: #ef4444;        /* 매우 매니악 - 빨강 */
    --rating-star: #f59e0b;     /* 별 채워진 색상 */

    /* 라이트 모드 - 평점 배지 배경/텍스트 */
    --rating-1-bg: #dcfce7;
    --rating-1-text: #166534;
    --rating-2-bg: #ecfccb;
    --rating-2-text: #3f6212;
    --rating-3-bg: #fef3c7;
    --rating-3-text: #92400e;
    --rating-4-bg: #ffedd5;
    --rating-4-text: #9a3412;
    --rating-5-bg: #fee2e2;
    --rating-5-text: #991b1b;
}

/* ========== 다크 모드 ========== */
[data-theme="dark"] {
    /* 배경 계층 */
    --bg-base: #0f172a;
    --bg-surface: #1e293b;
    --bg-elevated: #334155;
    --bg-muted: #475569;
    --bg-color: var(--bg-base);
    --card-bg: var(--bg-surface);

    /* 텍스트 계층 */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0f172a;

    /* 테두리 */
    --border-default: #334155;
    --border-subtle: #1e293b;
    --border-strong: #475569;
    --border-color: var(--border-default);

    /* 오버레이 반전 */
    --overlay-subtle: rgba(255, 255, 255, 0.04);
    --overlay-light: rgba(255, 255, 255, 0.08);
    --overlay-medium: rgba(255, 255, 255, 0.16);
    --overlay-strong: rgba(255, 255, 255, 0.32);
    --overlay-heavy: rgba(255, 255, 255, 0.64);

    /* 그림자 (더 진하게) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);

    /* 뱃지 반전 */
    --badge-success-bg: #166534;
    --badge-success-text: #dcfce7;
    --badge-danger-bg: #991b1b;
    --badge-danger-text: #fee2e2;
    --badge-warning-bg: #92400e;
    --badge-warning-text: #fef3c7;
    --badge-info-bg: #1e40af;
    --badge-info-text: #dbeafe;
    --badge-gray-bg: #334155;
    --badge-gray-text: #e2e8f0;
    --badge-indigo-bg: #3730a3;
    --badge-indigo-text: #e0e7ff;
    --badge-pink-bg: #9d174d;
    --badge-pink-text: #fce7f3;

    /* 체커보드 패턴 (다크) */
    --checker-base-bg: #1e293b;
    --checker-base-hover: #3730a3;
    --checker-alt-bg: #334155;
    --checker-alt-hover: #475569;

    /* 보조 색상 */
    --secondary-hover: #9ca3af;
    --correct-row-bg: #166534;

    /* 입력 필드 */
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-placeholder: #64748b;

    /* 테이블 */
    --table-header-bg: #1e293b;
    --table-row-hover: #334155;
    --table-border: #475569;

    /* 포디움 카드 배경 (다크) */
    --podium-gold-bg: var(--podium-gold-bg-dark);
    --podium-silver-bg: var(--podium-silver-bg-dark);
    --podium-bronze-bg: var(--podium-bronze-bg-dark);
    --podium-gold-stand: var(--podium-gold-stand-dark);
    --podium-silver-stand: var(--podium-silver-stand-dark);
    --podium-bronze-stand: var(--podium-bronze-stand-dark);

    /* 정보 박스 (info-box) */
    --info: #1d4ed8;
    --info-light: #1e3a5f;
    --info-dark: #93c5fd;

    /* 상태 색상 투명 배경 (다크) */
    --success-bg-transparent: rgba(34, 197, 94, 0.2);
    --violet-bg-transparent: rgba(139, 92, 246, 0.2);

    /* ========== Subtle 배경색 (다크 모드) ========== */
    --primary-bg-subtle: #3730a3;
    --success-bg-subtle: #166534;
    --warning-bg-subtle: #92400e;
    --info-bg-subtle: #1e40af;
    --danger-bg-subtle: #991b1b;
    --pink-bg-subtle: #9d174d;

    /* ========== Readable 텍스트색 (다크 모드) ========== */
    --primary-text-readable: #a5b4fc;
    --success-text-readable: #86efac;
    --warning-text-readable: #fcd34d;
    --info-text-readable: #93c5fd;
    --danger-text-readable: #fca5a5;
    --pink-text-readable: #f9a8d4;

    /* ========== 대중성 평점 배지 (다크 모드) ========== */
    --rating-1-bg: rgba(34, 197, 94, 0.2);
    --rating-1-text: #86efac;
    --rating-2-bg: rgba(132, 204, 22, 0.2);
    --rating-2-text: #bef264;
    --rating-3-bg: rgba(245, 158, 11, 0.2);
    --rating-3-text: #fcd34d;
    --rating-4-bg: rgba(249, 115, 22, 0.2);
    --rating-4-text: #fdba74;
    --rating-5-bg: rgba(239, 68, 68, 0.2);
    --rating-5-text: #fca5a5;
}

/* ========== 게임 페이지 다크 고정 ========== */
.game-page {
    --bg-base: #0f172a;
    --bg-surface: #1e293b;
    --bg-elevated: #334155;
    --bg-muted: #475569;
    --bg-color: var(--bg-base);
    --card-bg: var(--bg-surface);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-color: var(--border-default);
    --overlay-light: rgba(255, 255, 255, 0.1);
    --overlay-medium: rgba(255, 255, 255, 0.2);
    --overlay-strong: rgba(255, 255, 255, 0.3);
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.6;
    word-break: keep-all;
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    font-family: inherit;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

.btn-search {
    background: var(--info-color);
    color: white;
}

.btn-search:hover {
    background: var(--info-dark);
}

.btn-reset {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.btn-reset:hover {
    background: var(--bg-muted);
}

.btn-cancel {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}

.btn-cancel:hover {
    background: var(--bg-muted);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-edit {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}

.btn-edit:hover {
    background: var(--info-light);
}

.btn-toggle {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
}

.btn-toggle:hover {
    background: var(--warning-light);
}

.btn-delete {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}

.btn-delete:hover {
    background: var(--danger-light);
}

.btn-view {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.btn-view:hover {
    background: var(--badge-info-bg);
}

/* ========== 뱃지 토스트 알림 ========== */
.badge-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-xl);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    z-index: 10000;
    max-width: 20rem;
}

.badge-toast.show {
    transform: translateX(0);
}

.badge-toast-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.badge-toast-content {
    flex: 1;
    min-width: 0;
}

.badge-toast-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.badge-toast-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

/* 희귀도별 색상 */
.badge-rarity-common {
    border-left: 4px solid var(--rarity-common);
}

.badge-rarity-rare {
    border-left: 4px solid var(--rarity-rare);
}

.badge-rarity-epic {
    border-left: 4px solid var(--rarity-epic);
}

.badge-rarity-legendary {
    border-left: 4px solid var(--rarity-legendary);
    animation: legendary-glow 2s infinite;
}

@keyframes legendary-glow {
    0%, 100% { box-shadow: 0 10px 40px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 10px 40px rgba(245, 158, 11, 0.5); }
}

/* ========== 테마 토글 버튼 ========== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--overlay-light);
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.theme-toggle:hover {
    background: var(--overlay-medium);
    transform: scale(1.05);
}

.theme-toggle:active {
    transform: scale(0.95);
}

.theme-icon {
    line-height: 1;
}

.theme-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-on-gradient);
}

.theme-icon.moon {
    display: none;
}

[data-theme="dark"] .theme-icon.sun {
    display: none;
}

[data-theme="dark"] .theme-icon.moon {
    display: block;
}

/* ========== 유틸리티 클래스 ========== */
.hidden {
    display: none !important;
}