:root {
    --primary: #6B64EF;
    --primary-dark: #564fd6;
    --secondary: #136F63;
    --background-light: #ffffff;
    --background-offset: #f8f9fa;
    --text-main: #1a1a1a;
    --text-muted: #6b7280;
    --border-color: #f1f1f5;
    --card-bg: #ffffff;
}

/* Dark Mode Variables */
.dark {
    --background-light: #0f172a;
    --background-offset: #020617;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #1e293b;
    --card-bg: #1e293b;
}

html.dark, body.dark {
    background-color: var(--background-light) !important;
    color: var(--text-main) !important;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--background-light);
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
    word-break: keep-all;
}

/* Theme Backgrounds - High Quality Animated Gradients */
.love-theme-bg {
    background: linear-gradient(-45deg, #FF4D6D, #FF758C, #6B64EF, #FF4D6D) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite !important;
}

.healing-theme-bg {
    background: linear-gradient(-45deg, #10B981, #34D399, #6EE7B7, #10B981) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite !important;
}

.room-theme-bg {
    background: linear-gradient(-45deg, #F59E0B, #FBBF24, #FCD34D, #F59E0B) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite !important;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Common Components (Dark/Light Overrides) */
.dark header { background-color: rgba(15, 23, 42, 0.8) !important; border-bottom-color: #1e293b !important; }
.dark .mega-menu-panel { background-color: #0f172a !important; border-top: 1px solid #1e293b !important; border-bottom: 1px solid #1e293b !important; }
.dark .nav-item { color: #cbd5e1 !important; }
.dark .bg-white, .dark .glass-card { background-color: #1e293b !important; border-color: #334155 !important; }
.dark .text-gray-900 { color: #f8fafc !important; }

/* Mega Menu & Sidebar Layouts */
.page-container { display: flex; justify-content: center; width: 100%; max-width: 1680px; margin: 0 auto; position: relative; }
.content-main { flex: 1; max-width: 1120px; min-width: 0; padding: 0 24px; }

.mega-menu-panel { opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; position: absolute; top: 100%; left: 0; width: 100%; z-index: 40; }
.header-container:hover .mega-menu-panel { opacity: 1 !important; visibility: visible !important; transform: translateY(0); pointer-events: auto; }

.nav-sync-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 850px; margin: 0 auto; gap: 2.5rem; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; font-weight: 700; color: #1a1a1a; transition: color 0.3s; }
.nav-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--primary); transition: width 0.3s; }
.nav-item:hover::after { width: 30px; }
.nav-item:hover { color: var(--primary); }

.sidebar-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 1rem; color: #6b7280; font-weight: 600; transition: all 0.2s; }
.sidebar-item:hover { background: #6B64EF0D; color: #6B64EF; }
.sidebar-item.active { background: #6B64EF; color: white; box-shadow: 0 4px 12px #6B64EF40; }

.glass-card { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
#progress-bar { transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }