/* ─── 라이트 테마 (기본) ─── */
:root, body.theme-light {
    --primary: #6366f1; --primary-dark: #4f46e5; --primary-light: #ede9fe;
    --accent: #f59e0b; --accent-light: #fef3c7;
    --success: #10b981; --success-light: #d1fae5;
    --danger: #ef4444; --danger-light: #fee2e2;
    --bg: #f0f2ff; --surface: #ffffff; --surface-2: #f8fafc;
    --border: #e4e8f4; --text: #1e1b4b; --text-2: #475569; --text-3: #94a3b8;
    --online: #22c55e;
}

/* ─── 다크 테마 ─── */
body.theme-dark {
    --primary: #818cf8; --primary-dark: #6366f1; --primary-light: #1e1b4b;
    --accent: #fbbf24; --accent-light: #2d2006;
    --success: #34d399; --success-light: #064e3b;
    --danger: #f87171; --danger-light: #450a0a;
    --bg: #0f0f1a; --surface: #1a1a2e; --surface-2: #16213e;
    --border: #2d2d4e; --text: #e2e8f0; --text-2: #94a3b8; --text-3: #64748b;
    --online: #4ade80;
}

/* ─── 엑셀(초록) 테마 ─── */
body.theme-excel {
    --primary: #217346; --primary-dark: #185a34; --primary-light: #e6f4ea;
    --accent: #185a34; --accent-light: #d4edda;
    --success: #34a853; --success-light: #d4edda;
    --danger: #c0392b; --danger-light: #fdecea;
    --bg: #f0f7f0; --surface: #ffffff; --surface-2: #f4faf4;
    --border: #c8e6c9; --text: #1b2e1b; --text-2: #2e5f2e; --text-3: #6aaa6a;
    --online: #34a853;
}

/* 다크 오버라이드 */
body.theme-dark .header, body.theme-dark .panel-left, body.theme-dark .panel-right,
body.theme-dark .story-bar-wrap, body.theme-dark .chat-section,
body.theme-dark .room-card, body.theme-dark .side-panel { background: var(--surface); border-color: var(--border); }
body.theme-dark .panel-center, body.theme-dark body { background: var(--bg); }
body.theme-dark .chat-row.other .chat-bubble { background: var(--surface-2); color: var(--text); border-color: var(--border); }
body.theme-dark textarea, body.theme-dark input, body.theme-dark select { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
body.theme-dark .story-modal-card, body.theme-dark .modal-card { background: var(--surface); color: var(--text); }
body.theme-dark .autocomplete-results { background: var(--surface); border-color: var(--border); }
body.theme-dark .autocomplete-item { color: var(--text); border-color: var(--border); }
body.theme-dark .autocomplete-item:hover { background: var(--primary-light); }
body.theme-dark .tag { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }
body.theme-dark .place-item:hover, body.theme-dark .place-item.active { background: var(--primary-light); }

/* 엑셀 오버라이드 */
body.theme-excel .header { background: #217346; border-color: #185a34; }
body.theme-excel .header-brand h1, body.theme-excel .header-brand h1 span { color: #fff; }
body.theme-excel .header-brand .icon { background: linear-gradient(135deg, #185a34, #34a853); }
body.theme-excel .online-pill { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; }
body.theme-excel .user-badge { background: rgba(255,255,255,0.2); color: #fff; }
body.theme-excel .enter-btn, body.theme-excel .btn-create, body.theme-excel .send-btn,
body.theme-excel .story-submit-btn, body.theme-excel .submit-btn, body.theme-excel .add-btn { background: linear-gradient(135deg, #217346, #34a853); }
body.theme-excel .progress-fill { background: linear-gradient(to right, #217346, #34a853); }
body.theme-excel .room-card.success-card { background: linear-gradient(135deg, #e6f4ea, #d4edda); border-color: #34a853; }
body.theme-excel .chat-row.me .chat-bubble { background: linear-gradient(135deg, #217346, #34a853); }
body.theme-excel .story-avatar-wrap { background: linear-gradient(135deg, #217346, #34a853, #34a853); }

/* 테마 버튼 */
.theme-btn {
    background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text-2);
    padding: 5px 11px; border-radius: 20px; font-size: 12px; font-weight: 700;
    cursor: pointer; font-family: 'Noto Sans KR', sans-serif; white-space: nowrap;
    transition: all .2s; flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--primary); color: var(--primary); }
body.theme-excel .theme-btn { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; }
body.theme-dark .theme-btn { background: var(--surface-2); border-color: var(--border); color: var(--text-2); }