:root {
    --bg-color: #05070a;
    --panel-bg: rgba(20, 24, 31, 0.8);
    --border-color: rgba(255, 255, 255, 0.08);
    --melon: #CBFF75;
    --yellow: #f0b90b;
    --text-main: #f1f1f1;
    --text-dim: #848e9c;
    --extreme-fear: #ff3e3e;
    --extreme-greed: #CBFF75;
}

/* 전역 스타일 */
body { 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    font-family: 'Pretendard', sans-serif; 
    margin: 0; 
    padding: 0;
    background-image: 
    radial-gradient(circle at 10% 20%, rgba(203, 255, 117, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(240, 185, 11, 0.05) 0%, transparent 40%);
}

.dashboard-wrapper {
    max-width: 100%;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
}

/* 헤더 스타일 */
header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 40px;
    animation: fadeInDown 0.8s ease-out;
}

.brand h1 { font-size: 2rem; margin: 0; font-weight: 800; letter-spacing: -1px; }
.brand span { color: var(--text-dim); font-size: 1rem; }

.status-pill { 
    background: rgba(255, 255, 255, 0.03); 
    padding: 10px 20px; 
    border-radius: 5px; 
    border: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 10px;
}
.pulse-dot { width: 8px; height: 8px; background: var(--melon); border-radius: 50%; animation: pulse 1.5s infinite; }

/* 레이아웃 그리드 */
.main-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.card { 
    background: var(--panel-bg); 
    border-radius: 5px; 
    border: 1px solid var(--border-color); 
    padding: 35px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.8s ease-out backwards;
}
.card:hover { border-color: rgba(203, 255, 117, 0.3); transform: translateY(-5px); }

/* 현대적 링 그래프 */
.gauge-section { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.ring-container { position: relative; width: 280px; height: 280px; }
.ring-svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring-track { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 12; }
.ring-progress { 
    fill: none; stroke: var(--melon); stroke-width: 12; 
    stroke-linecap: round; stroke-dasharray: 754; stroke-dashoffset: 754;
    transition: stroke-dashoffset 2s cubic-bezier(0.19, 1, 0.22, 1), stroke 1s ease;
    filter: drop-shadow(0 0 8px var(--melon));
}

.ring-content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center;
}
.score-big { font-size: 5.5rem; font-weight: 900; margin: 0; line-height: 1; }
.score-label { font-size: 1.2rem; font-weight: 700; margin-top: 10px; text-transform: uppercase; letter-spacing: 2px; }

/* 히스토리 & 리스트 */
.section-header { font-size: 1.1rem; font-weight: 700; color: var(--yellow); margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
.section-header::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }

.data-row { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.data-row:last-child { border-bottom: none; }
.data-label { color: var(--text-dim); font-weight: 500; }
.data-value { font-weight: 700; font-size: 1.1rem; }

/* 활용 가이드 와이드 */
.guide-full { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
.guide-item { background: rgba(255,255,255,0.02); padding: 25px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.03); }
.guide-item h4 { margin: 0 0 12px 0; color: var(--melon); font-size: 1.1rem; }
.guide-item p { margin: 0; font-size: 0.95rem; color: var(--text-dim); line-height: 1.6; }

/* [NEW] 특징 비교 분석 스타일 (추가됨) */
.analysis-full { grid-column: span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: -5px; }
.analysis-box { padding: 25px; border-radius: 5px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.03); }
.box-fear { border-left: 4px solid var(--extreme-fear); }
.box-greed { border-left: 4px solid var(--extreme-greed); }
.analysis-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.analysis-list { list-style: none; padding: 0; margin: 0; }
.analysis-list li { margin-bottom: 10px; font-size: 0.95rem; color: var(--text-dim); display: flex; align-items: flex-start; gap: 8px; }
.analysis-list li::before { content: '•'; color: rgba(255,255,255,0.2); }
.highlight-fear { color: var(--extreme-fear); font-weight: bold; }
.highlight-greed { color: var(--extreme-greed); font-weight: bold; }

/* 애니메이션 */
@keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }

/* 지수 등급별 테마 */
.theme-fear { --theme-color: #ff3e3e; }
.theme-neutral { --theme-color: #f0b90b; }
.theme-greed { --theme-color: #CBFF75; }

@media (max-width: 1100px) {
    .main-grid { grid-template-columns: 1fr; }
    .guide-full, .analysis-full { grid-template-columns: 1fr; grid-column: span 1; }
}