/**
 * PLUTUS ETF 테마 시스템
 * 테마 변경: html 태그에 data-theme="light" 또는 data-theme="dark" 추가
 * 기본값: light
 */

:root,
[data-theme="light"] {
    /* 기본 배경/텍스트 - 미묘한 블루-퍼플 톤 */
    --bg-primary: #fafbff;
    --bg-secondary: #f0f4ff;
    --bg-tertiary: #e8edfc;
    --bg-card: #ffffff;
    --bg-hover: #f0f4ff;
    
    /* 텍스트 - 인디고 톤으로 통일 */
    --text-primary: #1a1f36;
    --text-secondary: #4f566b;
    --text-tertiary: #8792a2;
    --text-muted: #c1c9d2;
    
    /* 브랜드 색상 - 인디고/바이올렛 계열 */
    --accent-primary: #5046e5;
    --accent-light: #6366f1;
    --accent-dark: #4338ca;
    --accent-gradient: linear-gradient(135deg, #5046e5 0%, #7c3aed 100%);
    
    /* 상태 색상 - 생동감 있는 톤 */
    --color-up: #e11d48;
    --color-up-light: #f43f5e;
    --color-down: #0284c7;
    --color-down-light: #0ea5e9;
    --color-flat: #64748b;
    
    /* 추가 색상 - 세련된 보조색 */
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-info: #06b6d4;
    --color-purple: #8b5cf6;
    --color-success: #10b981;
    --color-coral: #fb7185;
    --color-teal: #14b8a6;
    
    /* 테두리 - 부드러운 블루 톤 */
    --border-color: #d8e0f0;
    --border-light: #e8edfc;
    
    /* 그림자 - 더 부드럽고 현대적인 느낌 */
    --shadow-sm: 0 1px 3px 0 rgba(80, 70, 229, 0.08), 0 1px 2px -1px rgba(80, 70, 229, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(80, 70, 229, 0.1), 0 2px 4px -2px rgba(80, 70, 229, 0.06);
    --shadow-lg: 0 10px 25px -3px rgba(80, 70, 229, 0.12), 0 4px 10px -4px rgba(80, 70, 229, 0.08);
    
    /* 버튼 - 그라데이션 활용 */
    --btn-primary-bg: linear-gradient(135deg, #5046e5 0%, #7c3aed 100%);
    --btn-primary-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    --btn-secondary-bg: #e8edfc;
    --btn-secondary-hover: #d8e0f0;
    --btn-text: #ffffff;
    
    /* 인풋 */
    --input-bg: #ffffff;
    --input-border: #d8e0f0;
    --input-focus: #5046e5;
    
    /* 모달 */
    --modal-overlay: rgba(26, 31, 54, 0.6);
    --modal-bg: #ffffff;
    
    /* 티커 - 미묘한 그라데이션 */
    --ticker-bg: linear-gradient(90deg, #f0f4ff 0%, #e8edfc 50%, #f0f4ff 100%);
    --ticker-border: #d8e0f0;
    
    /* 카드 그라데이션 */
    --card-gradient: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
}

[data-theme="dark"] {
    /* 기본 배경/텍스트 */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-card: #1f2937;
    --bg-hover: #374151;
    
    /* 텍스트 */
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-muted: #4b5563;
    
    /* 브랜드 색상 (강조) */
    --accent-primary: #10b981;
    --accent-light: #34d399;
    --accent-dark: #059669;
    
    /* 상태 색상 */
    --color-up: #f87171;
    --color-up-light: #fca5a5;
    --color-down: #60a5fa;
    --color-down-light: #93c5fd;
    --color-flat: #9ca3af;
    
    /* 추가 색상 */
    --color-warning: #fbbf24;
    --color-warning-light: #fcd34d;
    --color-info: #38bdf8;
    --color-purple: #a78bfa;
    
    /* 테두리 */
    --border-color: #374151;
    --border-light: #4b5563;
    
    /* 그림자 */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
    
    /* 버튼 */
    --btn-primary-bg: #10b981;
    --btn-primary-hover: #059669;
    --btn-secondary-bg: #374151;
    --btn-secondary-hover: #4b5563;
    --btn-text: #ffffff;
    
    /* 인풋 */
    --input-bg: #1f2937;
    --input-border: #374151;
    --input-focus: #10b981;
    
    /* 모달 */
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --modal-bg: #1f2937;
    
    /* 티커 */
    --ticker-bg: linear-gradient(90deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    --ticker-border: #2d3748;
}

/* ============================================
   테마 기반 유틸리티 클래스
   ============================================ */

/* 배경 */
.theme-bg-primary { background-color: var(--bg-primary); }
.theme-bg-secondary { background-color: var(--bg-secondary); }
.theme-bg-tertiary { background-color: var(--bg-tertiary); }
.theme-bg-card { background-color: var(--bg-card); }
.theme-bg-hover:hover { background-color: var(--bg-hover); }

/* 텍스트 */
.theme-text-primary { color: var(--text-primary); }
.theme-text-secondary { color: var(--text-secondary); }
.theme-text-tertiary { color: var(--text-tertiary); }
.theme-text-muted { color: var(--text-muted); }

/* 강조 */
.theme-text-accent { color: var(--accent-primary); }
.theme-text-accent-light { color: var(--accent-light); }

/* 상태 */
.theme-text-up { color: var(--color-up); }
.theme-text-down { color: var(--color-down); }
.theme-text-flat { color: var(--color-flat); }
.theme-text-warning { color: var(--color-warning); }
.theme-text-warning-light { color: var(--color-warning-light); }
.theme-text-info { color: var(--color-info); }
.theme-text-purple { color: var(--color-purple); }

/* 테두리 */
.theme-border { border-color: var(--border-color); }
.theme-border-light { border-color: var(--border-light); }

/* 버튼 - 그라데이션 지원 */
.theme-btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-text);
    border: none;
    box-shadow: 0 2px 8px rgba(80, 70, 229, 0.25);
    transition: all 0.2s ease;
}
.theme-btn-primary:hover {
    background: var(--btn-primary-hover);
    box-shadow: 0 4px 12px rgba(80, 70, 229, 0.35);
    transform: translateY(-1px);
}
.theme-btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}
.theme-btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    border-color: var(--accent-primary);
}

/* 인풋 */
.theme-input {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}
.theme-input:focus {
    border-color: var(--input-focus);
    outline: none;
}
.theme-input::placeholder {
    color: var(--text-tertiary);
}

/* 카드 - 현대적 그라데이션과 그림자 */
.theme-card {
    background: var(--card-gradient);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
}

/* 테이블 - 현대적 스타일 */
.theme-table-header {
    background: linear-gradient(135deg, #e8edfc 0%, #f0f4ff 100%);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.75rem;
}
.theme-table-header th {
    border-bottom: 2px solid rgba(80, 70, 229, 0.15);
}
.theme-table-row {
    border-bottom: 1px solid var(--border-light);
}
.theme-table-row:hover {
    background: linear-gradient(90deg, rgba(80, 70, 229, 0.04) 0%, rgba(124, 58, 237, 0.02) 100%);
}

/* 그림자 */
.theme-shadow-sm { box-shadow: var(--shadow-sm); }
.theme-shadow-md { box-shadow: var(--shadow-md); }
.theme-shadow-lg { box-shadow: var(--shadow-lg); }

/* 모달 - 현대적 블러 효과 */
.theme-modal-overlay {
    background: rgba(26, 31, 54, 0.7);
    backdrop-filter: blur(8px);
}
.theme-modal {
    background: linear-gradient(145deg, #ffffff 0%, #fafbff 100%);
    border: 1px solid rgba(80, 70, 229, 0.1);
}

/* ============================================
   컴포넌트별 스타일
   ============================================ */

/* 배당주기 뱃지 - 그라데이션 스타일 */
.div-badge-monthly {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%);
    color: #b45309;
    font-weight: 600;
    border: 1px solid rgba(251, 191, 36, 0.3);
}
.div-badge-quarterly {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.12) 100%);
    color: #047857;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.div-badge-semiannual {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(14, 165, 233, 0.12) 100%);
    color: #0369a1;
    font-weight: 600;
    border: 1px solid rgba(6, 182, 212, 0.25);
}
.div-badge-annual {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(100, 116, 139, 0.12) 100%);
    color: #475569;
    font-weight: 500;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

/* 분석 의견 셀 - 콤팩트 스타일 */
.op-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    width: 52px;
    line-height: 1.2;
}
.op-cell .op-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -0.3px;
}
.op-cell .op-pct {
    font-size: 11px;
    font-weight: 700;
    font-family: 'Roboto Mono', monospace;
}
.op-strong-buy .op-label { color: #e11d48; }
.op-strong-buy .op-pct { color: #be123c; }
.op-buy .op-label { color: #10b981; }
.op-buy .op-pct { color: #059669; }
.op-sell .op-label { color: #0ea5e9; }
.op-sell .op-pct { color: #0284c7; }
.op-strong-sell .op-label { color: #3b82f6; }
.op-strong-sell .op-pct { color: #2563eb; }

/* 에러 메시지 */
.error-message {
    background-color: rgba(220, 38, 38, 0.1);
    border: 1px solid var(--color-up);
    color: var(--color-up);
}

/* 로딩 스피너 - 인디고 그라데이션 */
.loading-spinner {
    border-color: rgba(80, 70, 229, 0.2);
    border-top-color: #5046e5;
    border-right-color: #7c3aed;
}

/* 애널리스트 패널 - 그라데이션 */
.analyst-panel {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.04) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.1);
}

/* 테마 전환 버튼 (선택사항) */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--btn-primary-bg);
    color: var(--btn-text);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
    z-index: 1000;
}
.theme-toggle:hover {
    transform: scale(1.1);
    background-color: var(--btn-primary-hover);
}