:root[data-theme=dark]{--bg-primary:#060d1a;--bg-secondary:#0a1628d9;--bg-tertiary:#0f1e32b3;--border-color:#648cc81f;--border-hover:#8cb4f04d;--text-primary:#f0f4fc;--text-secondary:#89b;--text-tertiary:#568;--glass-bg:linear-gradient(135deg, #0a1628cc 0%, #060d1ae6 100%);--glass-border:#648cc81a;--shadow-sm:0 4px 16px #00000080;--shadow-md:0 12px 40px #0009;--shadow-lg:0 24px 60px #000000b3;--glow-color:#64a0f033;--card-glow-color:#64a0f01f;--bg-mesh:radial-gradient(circle at 10% 20%, #3c78dc0f 0%, transparent 40%), radial-gradient(circle at 90% 80%, #64a0f00a 0%, transparent 40%), linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px)}:root[data-theme=light]{--bg-primary:#faf8f6;--bg-secondary:#ffffffe6;--bg-tertiary:#f8f5f2d9;--border-color:#8b5cf612;--border-hover:#8b5cf633;--text-primary:#1a1625;--text-secondary:#5a5570;--text-tertiary:#8a8598;--glass-bg:linear-gradient(135deg, #ffffffeb 0%, #faf8f6f0 100%);--glass-border:#8b5cf614;--shadow-sm:0 1px 4px #8b5cf60a;--shadow-md:0 4px 20px #8b5cf612, 0 1px 4px #00000008;--shadow-lg:0 8px 36px #8b5cf617, 0 2px 8px #0000000a;--glow-color:#8b5cf626;--card-glow-color:#8b5cf60f;--card-bg:#fffc;--card-border:#8b5cf60d;--card-hover-shadow:0 12px 40px #8b5cf614;--bg-mesh:radial-gradient(circle at 10% 20%, #8b5cf608 0%, transparent 50%), radial-gradient(circle at 90% 80%, #ec489908 0%, transparent 50%), linear-gradient(#8b5cf604 1px, transparent 1px), linear-gradient(90deg, #ec489903 1px, transparent 1px)}:root{--accent-purple:#7c3aed;--accent-purple-hover:#6d28d9;--accent-blue:#3b82f6;--accent-blue-hover:#2563eb;--accent-indigo:#6366f1;--accent-coral:#f472b6;--accent-rose:#e11d48;--accent-green:#10b981;--accent-yellow:#f59e0b;--font-display:"Outfit", "Noto Sans KR", sans-serif;--font-body:"Inter", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;--transition-fast:.12s ease;--transition-normal:.3s cubic-bezier(.16, 1, .3, 1);--transition-slow:.5s cubic-bezier(.16, 1, .3, 1);--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:26px;--sidebar-width:270px;--sidebar-collapsed-width:84px;--topbar-height:74px}*{box-sizing:border-box;font-family:var(--font-body);margin:0;padding:0}body{background-color:var(--bg-primary);background-image:var(--bg-mesh);color:var(--text-primary);font-family:var(--font-body);min-height:100vh;transition:background-color var(--transition-slow), color var(--transition-normal);-webkit-font-smoothing:antialiased;background-size:100% 100%,100% 100%,50px 50px,50px 50px;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);letter-spacing:-.025em;font-weight:700;line-height:1.2}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.app-container{min-height:100dvh;display:flex;position:relative}.sidebar{width:var(--sidebar-width);background:var(--glass-bg);-webkit-backdrop-filter:blur(30px);border-right:1px solid var(--glass-border);z-index:100;height:100vh;transition:width var(--transition-slow), transform var(--transition-slow);flex-direction:column;display:flex;position:fixed;top:0;left:0}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar-brand{height:var(--topbar-height);border-bottom:1px solid var(--glass-border);align-items:center;gap:14px;padding:0 24px;display:flex}.brand-logo-img{object-fit:contain;width:auto;height:38px;transition:all var(--transition-normal);border-radius:4px}.sidebar.collapsed .brand-logo-img{height:32px}.brand-logo-container{background:linear-gradient(135deg, var(--accent-purple), var(--accent-blue));color:#fff;width:38px;height:38px;font-family:var(--font-display);box-shadow:0 0 20px var(--glow-color);border-radius:10px;justify-content:center;align-items:center;font-size:1.35rem;font-weight:700;display:flex}.brand-text{font-family:var(--font-display);background:linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary) 100%);-webkit-text-fill-color:transparent;white-space:nowrap;letter-spacing:-.5px;transition:opacity var(--transition-fast);-webkit-background-clip:text;font-size:1.3rem;font-weight:700}.sidebar.collapsed .brand-text{opacity:0;pointer-events:none;width:0}.sidebar-menu{flex-direction:column;flex-grow:1;gap:6px;padding:20px 14px;list-style:none;display:flex;overflow-y:auto}.sidebar-item{color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;text-align:left;width:100%;transition:all var(--transition-normal);background:0 0;border:1px solid #0000;align-items:center;gap:16px;padding:12px 16px;font-size:.95rem;font-weight:500;display:flex;position:relative}.sidebar-item:hover{color:var(--text-primary);background:#ffffff05;border-color:#ffffff08}.sidebar-item.active{color:var(--text-primary);background:linear-gradient(135deg,#7c3aed26 0%,#06b6d414 100%);border:1px solid #7c3aed40;font-weight:600;box-shadow:0 4px 15px #0003}.sidebar-item.active:before{content:"";background:linear-gradient(to bottom, var(--accent-purple), var(--accent-blue));border-radius:0 4px 4px 0;width:4px;height:50%;position:absolute;top:25%;left:0}.sidebar-icon{transition:transform var(--transition-normal);flex-shrink:0}.sidebar-item:hover .sidebar-icon{transform:translateY(-1px)scale(1.05)}.sidebar-label{white-space:nowrap;transition:opacity var(--transition-fast)}.sidebar.collapsed .sidebar-label{opacity:0;pointer-events:none;width:0}.sidebar-footer{border-top:1px solid var(--glass-border);padding:16px}.user-profile-small{border-radius:var(--radius-md);border:1px solid var(--border-color);background:#ffffff04;align-items:center;gap:12px;padding:10px;display:flex}.avatar-small{background:linear-gradient(135deg, var(--accent-coral), var(--accent-rose));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;font-size:.9rem;font-weight:700;display:flex}.user-name-small{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:600;overflow:hidden}.sidebar.collapsed .user-profile-small{background:0 0;border-color:#0000;justify-content:center;padding:0}.sidebar.collapsed .user-profile-small .user-name-small{display:none}.main-content{margin-left:var(--sidebar-width);min-height:100vh;transition:margin-left var(--transition-slow);flex-direction:column;flex-grow:1;display:flex}.main-content.collapsed{margin-left:var(--sidebar-collapsed-width)}.topbar{height:var(--topbar-height);background:var(--glass-bg);-webkit-backdrop-filter:blur(28px)saturate(180%);border-bottom:1px solid var(--border-color);z-index:99;box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;padding:0 40px;display:flex;position:sticky;top:0}.topbar-left{align-items:center;gap:20px;display:flex}.toggle-sidebar-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;width:36px;height:36px;transition:all var(--transition-fast);background:0 0;border-radius:8px;justify-content:center;align-items:center;display:flex}.toggle-sidebar-btn:hover{color:var(--text-primary);background:var(--bg-tertiary);border-color:var(--text-tertiary)}.page-title{letter-spacing:-.5px;font-size:1.45rem;font-weight:700}.topbar-right{align-items:center;gap:16px;display:flex}.xp-pill,.streak-pill{border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:transform var(--transition-normal);border:1px solid;align-items:center;gap:8px;padding:6px 16px;font-size:.85rem;font-weight:700;display:flex}.xp-pill:hover,.streak-pill:hover{transform:translateY(-2px)}.xp-pill{color:#fbbf24;background:linear-gradient(135deg,#f59e0b1f,#fbbf2414);border-color:#f59e0b40}.streak-pill{color:#f43f5e;background:linear-gradient(135deg,#f43f5e1f,#fb718514);border-color:#f43f5e40}.theme-toggle-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;width:36px;height:36px;transition:all var(--transition-fast);background:0 0;border-radius:8px;justify-content:center;align-items:center;display:flex}.theme-toggle-btn:hover{color:var(--text-primary);background:var(--bg-tertiary)}.page-container{flex-direction:column;flex-grow:1;padding:40px;display:flex}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(26px)saturate(180%);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:38px;position:relative;overflow:hidden}.glass-panel:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff1a,#0000);height:1px;position:absolute;top:0;left:0;right:0}.glass-card{border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-normal);box-shadow:var(--shadow-sm);background:#ffffff04;padding:28px}.glass-card:hover{border-color:var(--border-hover);box-shadow:0 16px 36px var(--card-glow-color), var(--shadow-md);background:#ffffff08;transform:translateY(-5px)}.text-gradient{background:linear-gradient(135deg,#c084fc 0%,#06b6d4 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.badge{text-transform:uppercase;letter-spacing:.5px;border-radius:6px;align-items:center;gap:6px;padding:6px 12px;font-size:.72rem;font-weight:700;display:inline-flex}.badge-purple{color:#c084fc;background:#7c3aed1f;border:1px solid #7c3aed40}.badge-blue{color:#22d3ee;background:#06b6d41f;border:1px solid #06b6d440}.badge-green{color:#34d399;background:#10b9811f;border:1px solid #10b98140}.btn{border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);font-size:.9rem;font-weight:700;font-family:var(--font-display);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:12px 24px;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-indigo) 100%);color:#fff;box-shadow:0 4px 18px var(--glow-color);position:relative;overflow:hidden}.btn-primary:after{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff1a,#0000);width:200%;height:100%;transition:left .75s;position:absolute;top:0;left:-50%;transform:skew(-25deg)}.btn-primary:hover:after{left:125%}.btn-primary:hover{background:linear-gradient(135deg, var(--accent-purple-hover) 0%, var(--accent-indigo) 100%);transform:translateY(-2px);box-shadow:0 6px 24px #7c3aed80}.btn-primary:active{transform:translateY(1px)}.btn-secondary{color:var(--text-primary);border:1px solid var(--border-color);background:#ffffff05}.btn-secondary:hover{border-color:var(--border-hover);background:#ffffff0d;transform:translateY(-1px)}.btn-icon{border-radius:50%;width:44px;height:44px;padding:0}.progress-container{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;width:100%;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--accent-purple), var(--accent-blue));height:100%;transition:width var(--transition-slow);border-radius:6px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-6px)rotate(1deg)}to{transform:translateY(0)rotate(0)}}.float-anim{animation:4s ease-in-out infinite float}.dashboard-grid{grid-template-columns:2fr 1fr;gap:28px;margin-top:28px;display:grid}@media (width<=992px){.dashboard-grid{grid-template-columns:1fr}}.welcome-banner{border-radius:var(--radius-lg);color:#fff;box-shadow:0 10px 30px #7c3aed33, var(--shadow-md);background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#06b6d4 100%);border:none;justify-content:space-between;align-items:center;padding:38px 42px;display:flex;position:relative;overflow:hidden}.welcome-banner:before{content:"";pointer-events:none;background:radial-gradient(circle,#fff3 0%,#0000 70%);width:250px;height:250px;position:absolute;top:-80px;right:-80px}.welcome-korean{font-family:var(--font-display);color:#c7d2fe;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;font-size:1.15rem;font-weight:700}.welcome-title{letter-spacing:-.5px;color:#fff;margin-bottom:8px;font-size:2rem;font-weight:700;line-height:1.3}.welcome-banner p{color:#ffffffe0;font-size:.95rem;line-height:1.5}.welcome-banner .btn{color:#4f46e5;background:#fff;border:1px solid #fff;box-shadow:0 4px 15px #0000001a}.welcome-banner .btn:hover{color:#7c3aed;background:#f8fafc;transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.stats-row{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:28px;display:grid}.stat-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);align-items:center;gap:18px;padding:22px;display:flex}.stat-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md), 0 8px 24px #7c3aed0d;transform:translateY(-3px)}.stat-icon{border-radius:12px;justify-content:center;align-items:center;width:52px;height:52px;display:flex;box-shadow:inset 0 0 10px #ffffff05}.stat-val{font-family:var(--font-display);letter-spacing:-.5px;font-size:1.6rem;font-weight:700}.stat-lbl{color:var(--text-secondary);font-size:.82rem;font-weight:500}.streak-calendar-grid{grid-template-columns:repeat(7,1fr);gap:10px;margin-top:16px;display:grid}.streak-day{aspect-ratio:1;background:var(--bg-tertiary);border:1px solid var(--border-color);transition:all var(--transition-normal);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;font-size:.8rem;font-weight:700;display:flex}.streak-day.completed{color:#ff758f;background:linear-gradient(135deg,#f43f5e33 0%,#fb71851a 100%);border-color:#f43f5e66;box-shadow:0 0 12px #f43f5e26}.streak-day.today{border-color:var(--accent-blue);background:linear-gradient(135deg,#8b5cf614,#06b6d40a);transform:scale(1.05);box-shadow:0 0 14px #06b6d459,inset 0 0 8px #06b6d41a}.course-selector{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.course-tab-btn{background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;font-weight:700;font-family:var(--font-display);transition:all var(--transition-normal);padding:12px 24px;font-size:.95rem}.course-tab-btn:hover{color:var(--text-primary);border-color:var(--text-tertiary)}.course-tab-btn.active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff;box-shadow:0 6px 20px var(--glow-color);transform:translateY(-1px)}.lessons-list{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px;margin-top:28px;display:grid}.lesson-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);flex-direction:column;gap:14px;padding:24px;display:flex;position:relative;overflow:hidden}.lesson-card:hover{border-color:var(--accent-purple);box-shadow:0 14px 30px var(--glow-color);transform:translateY(-6px)}.lesson-card.completed{border-left:5px solid var(--accent-green)}.lesson-meta{color:var(--text-secondary);font-size:.8rem;font-weight:600}.lesson-detail-view{grid-template-columns:2.2fr 1fr;gap:28px;margin-top:28px;display:grid}@media (width<=992px){.lesson-detail-view{grid-template-columns:1fr}}.video-sim-container{aspect-ratio:16/9;border-radius:var(--radius-md);border:1px solid var(--border-color);width:100%;box-shadow:var(--shadow-lg);background:#020205;position:relative;overflow:hidden}.video-sim-overlay{color:#fff;background:radial-gradient(circle,#0000001a 0%,#0009 100%);flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0}.video-sim-playbtn{background:linear-gradient(135deg, var(--accent-purple), var(--accent-indigo));color:#fff;cursor:pointer;width:70px;height:70px;transition:all var(--transition-normal);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;box-shadow:0 0 25px #7c3aedb3}.video-sim-playbtn:hover{transform:scale(1.15);box-shadow:0 0 35px #7c3aede6}.tabs-header{border-bottom:2px solid var(--border-color);gap:8px;margin-top:28px;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;font-weight:700;font-family:var(--font-display);transition:color var(--transition-fast);background:0 0;border:none;padding:14px 24px;position:relative}.tab-btn:hover,.tab-btn.active{color:var(--text-primary)}.tab-btn.active:after{content:"";background:linear-gradient(90deg, var(--accent-purple), var(--accent-blue));border-radius:3px;height:3px;position:absolute;bottom:-2px;left:0;right:0}.vocab-table,.grammar-table{border-collapse:separate;border-spacing:0 8px;width:100%;margin-top:12px}.vocab-table th,.grammar-table th{text-align:left;font-family:var(--font-display);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;border:none;padding:16px;font-size:.85rem;font-weight:700}.vocab-row{border:1px solid var(--border-color);transition:all var(--transition-fast);background:#ffffff03}.vocab-row td{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:16px}.vocab-row td:first-child{border-left:1px solid var(--border-color);border-top-left-radius:var(--radius-sm);border-bottom-left-radius:var(--radius-sm)}.vocab-row td:last-child{border-right:1px solid var(--border-color);border-top-right-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.vocab-row:hover{background:#ffffff06}.vocab-kr{color:var(--accent-blue);font-size:1.25rem;font-weight:700;font-family:var(--font-display)}.speaker-btn{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);background:#ffffff05;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.speaker-btn:hover{color:#fff;background:var(--accent-purple);border-color:var(--accent-purple);box-shadow:0 0 10px var(--glow-color);transform:scale(1.1)}.quiz-panel{flex-direction:column;gap:24px;display:flex}.quiz-question{color:var(--text-primary);font-size:1.15rem;font-weight:700;line-height:1.4}.quiz-options-list{flex-direction:column;gap:12px;display:flex}.quiz-option{border:1px solid var(--border-color);border-radius:var(--radius-md);text-align:left;cursor:pointer;color:var(--text-secondary);transition:all var(--transition-normal);background:#ffffff04;padding:16px 24px;font-size:.95rem;font-weight:500}.quiz-option:hover{border-color:var(--text-tertiary);color:var(--text-primary);background:#ffffff09;transform:translate(4px)}.quiz-option.selected{border-color:var(--accent-purple);color:var(--text-primary);background:#7c3aed14;font-weight:600;box-shadow:0 4px 15px #7c3aed26}.quiz-option.correct{border-color:var(--accent-green);color:var(--text-primary);background:#10b9811a;font-weight:600}.quiz-option.incorrect{border-color:var(--accent-rose);color:var(--text-primary);background:#f43f5e1a;font-weight:600}.flashcards-layout{flex-direction:column;align-items:center;gap:28px;width:100%;max-width:520px;margin:30px auto;display:flex}.flashcard-deck-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;width:100%;display:grid}.deck-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);text-align:center;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-sm);padding:30px 24px}.flashcard-wrapper{perspective:1500px;aspect-ratio:1.5;width:100%}.flashcard-inner{text-align:center;width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;transition:transform .8s cubic-bezier(.175,.885,.32,1.275);position:relative}.flashcard-inner.is-flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{backface-visibility:hidden;border-radius:var(--radius-lg);width:100%;height:100%;box-shadow:var(--shadow-lg), 0 30px 60px #0006;border:1px solid #ffffff14;flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex;position:absolute}.flashcard-front{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-lg);backface-visibility:hidden}.flashcard-back{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-lg);backface-visibility:hidden;transform:rotateY(180deg)}.flashcard-kr{font-family:var(--font-display);color:var(--text-primary);letter-spacing:-1px;font-size:3.4rem;font-weight:700}.flashcard-roman{color:var(--accent-blue);margin-top:8px;font-size:1.3rem;font-weight:600}.flashcard-meaning{color:var(--accent-coral);letter-spacing:-.5px;font-size:2.1rem;font-weight:700}.flashcard-ex-kr{color:var(--text-primary);font-size:1.05rem;font-weight:500;line-height:1.4}.flashcard-ex-vi{color:var(--text-secondary);margin-top:4px;font-size:.9rem}.test-layout{flex-direction:column;gap:28px;display:flex}.test-grid{grid-template-columns:1.1fr 1fr;gap:28px;display:grid}@media (width<=992px){.test-grid{grid-template-columns:1fr}}.test-left-pane,.test-right-pane{flex-direction:column;gap:24px;max-height:72vh;padding:6px;display:flex;overflow-y:auto}.test-header-bar{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);justify-content:space-between;align-items:center;padding:20px 30px;display:flex}.timer-pill{color:#f43f5e;font-family:var(--font-display);background:#f43f5e1a;border:1px solid #f43f5e33;border-radius:20px;align-items:center;gap:10px;padding:6px 18px;font-size:1.25rem;font-weight:700;display:flex}.test-question-box{border:1px solid var(--border-color);border-radius:var(--radius-md);background:#ffffff03;padding:26px}.audio-sim-player{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:18px;padding:20px;display:flex}.audio-progress{background:#ffffff0d;border-radius:3px;flex-grow:1;height:6px;overflow:hidden}.audio-progress-fill{background:linear-gradient(90deg, var(--accent-purple), var(--accent-blue))}.question-nav-grid{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:10px;display:grid}.question-nav-btn{aspect-ratio:1;background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);transition:all var(--transition-fast);border-radius:8px;font-size:.9rem;font-weight:700}.question-nav-btn.answered{color:#22d3ee;background:#06b6d41f;border-color:#06b6d44d}.question-nav-btn.active{background:var(--accent-purple);border-color:var(--accent-purple);color:#fff;box-shadow:0 0 12px var(--glow-color);transform:scale(1.08)}.ai-space-layout{height:calc(100vh - var(--topbar-height) - 130px);grid-template-columns:1fr 2.8fr;gap:28px;min-height:520px;display:grid}@media (width<=992px){.ai-space-layout{grid-template-columns:1fr;height:auto}}.tutor-bio-card{background:var(--glass-bg);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:30px;display:flex}.tutor-avatar{background:linear-gradient(135deg, var(--accent-purple), var(--accent-blue));border-radius:50%;justify-content:center;align-items:center;width:106px;height:106px;font-size:3.4rem;display:flex;box-shadow:0 0 25px #7c3aed66}.online-indicator{border:4px solid #0f1122;width:18px;height:18px}.chat-panel{flex-direction:column;height:100%;display:flex}.chat-messages{flex-grow:1;padding:24px;overflow-y:auto}.chat-bubble{box-shadow:var(--shadow-sm);border-radius:16px;padding:14px 20px;font-size:.95rem}.chat-bubble-wrapper.tutor .chat-bubble{border:1px solid var(--border-color);background:#ffffff05;border-top-left-radius:2px}.chat-bubble-wrapper.student .chat-bubble{background:linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-indigo) 100%);border-top-right-radius:2px;box-shadow:0 4px 15px #7c3aed33}.grammar-feedback-box{color:#fbbf24;background:#f59e0b0f;border:1px solid #f59e0b33;border-radius:8px;padding:12px 16px}.suggestion-chips{border-top:1px solid var(--border-color);background:#0000001a;padding:14px 24px}.suggestion-chip{background:var(--bg-tertiary);border:1px solid var(--border-color);color:var(--text-secondary);transition:all var(--transition-fast);border-radius:20px;padding:8px 16px;font-size:.85rem;font-weight:600}.suggestion-chip:hover{color:#fff;border-color:var(--text-tertiary);background:#ffffff0a;transform:translateY(-1px)}.chat-input-area{border-top:1px solid var(--border-color);background:#00000026;padding:20px 24px}.chat-input{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-fast);padding:14px 20px}.chat-input:focus{border-color:var(--accent-purple);background:#ffffff05;box-shadow:0 0 0 2px #7c3aed33}.profile-grid{grid-template-columns:1fr 1.8fr;gap:28px;margin-top:28px;display:grid}@media (width<=992px){.profile-grid{grid-template-columns:1fr}}.student-id-card{background:var(--glass-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:40px 30px;position:relative;overflow:hidden}.student-id-card:before{content:"KVN TOPIK CARD";color:#fff;font-family:var(--font-display);background:linear-gradient(90deg,#f43f5e,#fb7185);padding:4px 32px;font-size:.65rem;font-weight:700;position:absolute;top:18px;right:-32px;transform:rotate(45deg);box-shadow:0 2px 10px #f43f5e4d}.student-photo{border:4px solid var(--accent-blue);background:linear-gradient(135deg, var(--accent-coral) 0%, var(--accent-rose) 100%);border-radius:50%;width:130px;height:130px;margin-bottom:20px;font-size:4.5rem;box-shadow:0 8px 24px #06b6d44d}.badge-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:16px;display:grid}.badge-card-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all var(--transition-normal);padding:16px 12px}.badge-card-item.unlocked{background:#f59e0b08;border-color:#f59e0b59;box-shadow:0 6px 20px #f59e0b14}.badge-medal-icon{font-size:2.5rem}.badge-title-item{font-size:.8rem;font-weight:700;font-family:var(--font-display)}.badge-desc-item{color:var(--text-tertiary);margin-top:4px;font-size:.68rem}.certificate-preview-box{color:#3e3223;border:8px double #b2946c;border-image:initial;background:radial-gradient(circle,#fffdf8 0%,#f6f3e5 100%);border-radius:4px;padding:50px 40px;box-shadow:0 30px 70px #000c}.cert-title{letter-spacing:3px;color:#806137;font-size:2.6rem;font-family:var(--font-body);font-weight:700}.cert-korean-watermark{color:#b2946c0d;font-size:12rem;font-weight:700}.mobile-bottom-nav{display:none}@media (width<=768px){.sidebar{transform:translate(-100%)}.sidebar:not(.collapsed){width:var(--sidebar-width);transform:translate(0)}.main-content{margin-left:0!important}.topbar{padding:0 16px}.page-container{padding:16px 16px 90px}.mobile-bottom-nav{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--glass-border);z-index:101;justify-content:space-around;align-items:center;height:70px;padding:0 12px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 15px #0000000d}.mobile-bottom-nav-item{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:8px 0;font-size:.75rem;font-weight:500;display:flex}.mobile-bottom-nav-item.active{color:var(--accent-purple);font-weight:700}}.matching-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:20px;display:grid}.matching-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);font-family:var(--font-display);color:var(--text-primary);text-align:center;cursor:pointer;min-height:100px;box-shadow:var(--shadow-sm);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;padding:24px 16px;font-weight:600;transition:all .2s;display:flex}.matching-card:hover:not(:disabled){border-color:var(--border-hover);background:#7c3aed0d;transform:translateY(-2px)}.matching-card.selected{border-color:var(--accent-purple);background:#7c3aed26;transform:scale(1.02);box-shadow:0 0 15px #7c3aed4d}.matching-card.matched{border-color:var(--accent-green);opacity:.6;background:#10b9811a;transform:scale(.95)}.matching-card.error{border-color:var(--accent-rose);background:#f43f5e26;animation:.4s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}}.chart-header-actions{align-items:center;gap:12px;margin-bottom:8px;display:flex}.goal-label{color:var(--text-secondary);font-size:.85rem;font-weight:500}.goal-btn-group{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);gap:2px;padding:3px;display:flex}.goal-btn{color:var(--text-secondary);border-radius:calc(var(--radius-md) - 3px);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;padding:4px 10px;font-size:.8rem;font-weight:600}.goal-btn:hover{color:var(--text-primary);background:#ffffff0d}.goal-btn.active{background:var(--accent-purple);color:#fff;box-shadow:0 2px 8px #c084fc4d}.chart-bar-rect{cursor:pointer;transition:fill .3s,filter .3s,opacity .3s}.chart-bar-rect.hovered{filter:brightness(1.1)drop-shadow(0 2px 8px #c084fc66);opacity:.95}.chart-bar-rect.today{stroke:var(--accent-purple-hover);stroke-width:1.5px}.svg-tooltip-group{pointer-events:none;animation:.15s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.skill-progress-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px;display:grid}@media (width<=768px){.skill-progress-grid{grid-template-columns:1fr}}.skill-progress-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);text-align:center;transition:all var(--transition-normal);box-shadow:var(--shadow-sm);flex-direction:column;align-items:center;gap:12px;padding:16px;display:flex}.skill-progress-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md);background:#ffffff05;transform:translateY(-4px)}.radial-progress-circle{transform:rotate(-90deg)}.circle-bg{stroke:var(--bg-tertiary);opacity:.4}.circle-progress{transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1)}.goal-meter-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);align-items:center;gap:20px;margin-bottom:16px;padding:20px;display:flex}.goal-meter-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-md)}.goal-meter-info{flex:1}.goal-meter-title{align-items:center;gap:6px;margin-bottom:4px;font-size:1.05rem;font-weight:700;display:flex}.goal-meter-desc{color:var(--text-secondary);font-size:.85rem;line-height:1.4}.analytics-container{grid-template-columns:1.2fr 1fr;gap:24px;margin:24px 0;display:grid}@media (width<=1024px){.analytics-container{grid-template-columns:1fr}}.cloud-status-pill{border-radius:var(--radius-lg);transition:all var(--transition-fast);border:1px solid #0000;align-items:center;gap:6px;padding:6px 12px;font-size:.8rem;font-weight:600;display:flex}.cloud-status-pill.synced{color:var(--accent-green);background:#6ee7b726;border-color:#6ee7b733}.cloud-status-pill.syncing{color:var(--accent-blue);background:#93c5fd26;border-color:#93c5fd33}.cloud-status-pill.unsynced{color:var(--accent-coral);background:#fda4af26;border-color:#fda4af40}.cloud-status-pill.unsynced:hover{background:#fda4af40;transform:translateY(-1px)}.cloud-status-pill.offline{background:var(--bg-tertiary);color:var(--text-tertiary);border-color:var(--border-color)}.auth-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;background:#0f172a99;justify-content:center;align-items:center;animation:.25s ease-out fadeIn;display:flex;position:fixed;inset:0}.auth-modal-card{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-lg);border-radius:var(--radius-xl);width:100%;max-width:420px;padding:32px;animation:.3s cubic-bezier(.16,1,.3,1) scaleUp;position:relative}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.auth-modal-close{color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;padding:4px;position:absolute;top:20px;right:20px}.auth-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.auth-input-group{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.auth-input{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-primary);transition:all var(--transition-fast);padding:12px 16px;font-size:.9rem}.spin-anim{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=500px){.page-title{display:none}.topbar{padding:0 12px}.topbar-left{margin-right:auto}.cloud-lbl{display:none}.cloud-status-pill{padding:6px 8px}.streak-pill,.xp-pill{padding:6px 10px}.streak-pill span,.xp-pill span{font-size:.8rem}.welcome-banner{text-align:center;flex-direction:column;gap:16px;padding:24px 20px}.welcome-banner p{font-size:.85rem}.welcome-korean{font-size:.8rem}.welcome-title{font-size:1.25rem}.welcome-banner .btn{justify-content:center;width:100%}.stats-row{grid-template-columns:repeat(2,1fr);gap:12px}.stat-card{padding:12px}.stat-icon{width:38px;height:38px}.stat-icon svg{width:18px;height:18px}.stat-val{font-size:1.1rem}.stat-lbl{font-size:.7rem}.goal-meter-card{text-align:center;flex-direction:column;gap:12px;padding:16px}.chart-header-actions{justify-content:space-between;width:100%}.goal-label{display:none}.goal-btn-group{justify-content:space-between;width:100%}.goal-btn{text-align:center;flex:1}.skill-progress-grid{gap:12px}.skill-progress-card{text-align:left;flex-direction:row;justify-content:flex-start;padding:12px}.streak-calendar-grid{gap:4px}.streak-day{padding:8px 4px}.glass-card{padding:12px!important}.analytics-container{margin:16px 0}.chart-wrapper{height:200px!important}}.sidebar-overlay{display:none}@media (width<=768px){.sidebar-overlay.active{z-index:99;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0006;display:block;position:fixed;inset:0}}@media (width<=500px){.podium-container{gap:8px!important}.podium-item{max-width:32vw!important}.podium-name{white-space:nowrap;text-overflow:ellipsis;width:100%;padding:0 4px;overflow:hidden;font-size:.75rem!important}}.leaderboard-title{margin-bottom:8px;font-size:2.2rem}.leaderboard-desc{font-size:1rem}@media (width<=500px){.leaderboard-title{font-size:1.5rem}.leaderboard-desc{font-size:.85rem}}body{overscroll-behavior-y:none}*{-webkit-tap-highlight-color:transparent}.mobile-bottom-nav,.topbar,.toggle-sidebar-btn,.streak-pill,.xp-pill{-webkit-user-select:none;user-select:none}.page-container,.chat-messages,.sidebar-menu{-webkit-overflow-scrolling:touch}@media (width<=768px){.chat-panel{height:calc(100vh - 250px);margin-top:16px}button.action-btn{min-height:44px}.glass-card,.glass-panel{padding:16px!important}.modal-content{width:90%;max-height:85vh;margin:auto;overflow-y:auto}}.timeline-container:after{content:"";background-color:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:4px;width:4px;margin-left:-2px;position:absolute;top:0;bottom:0;left:50%}.timeline-item{background-color:inherit;width:50%;padding:10px 40px;position:relative}.timeline-dot{border:4px solid var(--bg-primary);z-index:1;color:#fff;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;position:absolute;top:50%;right:-20px;transform:translateY(-50%);box-shadow:0 0 0 2px #ffffff0d}.timeline-content{background-color:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color);cursor:pointer;padding:24px;transition:all .3s;position:relative}.timeline-item.active .timeline-content{border-width:2px}.timeline-item.locked .timeline-content{opacity:.6;cursor:not-allowed;background-color:#ffffff03}@media screen and (width<=768px){.timeline-container:after{left:31px}.timeline-item{width:100%;padding-left:70px;padding-right:0}.timeline-item.right{left:0%}.timeline-item.left .timeline-dot,.timeline-item.right .timeline-dot{left:11px}}.timeline-container{max-width:900px;margin:0 auto;padding:60px 0;position:relative}@keyframes pulse-glow{0%{box-shadow:0 0 #ec489966}70%{box-shadow:0 0 0 15px #ec489900}to{box-shadow:0 0 #ec489900}}.timeline-content{background:var(--bg-primary);cursor:pointer;border:1px solid #0000000d;border-radius:16px;padding:30px;transition:all .3s;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000014}.timeline-content:before{content:"";pointer-events:none;z-index:0;background:linear-gradient(135deg,#fff6 0%,#fff0 100%);position:absolute;inset:0}.timeline-content>*{z-index:1;position:relative}.timeline-item.locked .timeline-content{background:var(--bg-secondary);border-color:var(--border-color);box-shadow:none;cursor:not-allowed;opacity:.85}.timeline-item.locked .timeline-content:hover{transform:translateX(isLeft ? -5px : 5px)}.timeline-item.active:after{background-color:var(--accent-rose);height:3px}@media screen and (width<=768px){.timeline-container:after{left:40px}.timeline-item{width:100%;margin-bottom:30px;padding-left:90px;padding-right:15px}.timeline-item.right{left:0%}.timeline-item.left .timeline-dot,.timeline-item.right .timeline-dot{left:15px}.timeline-item.left:after,.timeline-item.right:after{width:25px;left:65px}}.roadmap-wrapper{background:0 0;min-height:100vh;padding:40px 20px;position:relative;overflow:hidden}.roadmap-blob{filter:blur(100px);z-index:0;pointer-events:none;border-radius:50%;animation:12s cubic-bezier(.4,0,.2,1) infinite alternate roadmap-float;position:absolute}.blob-1{background:#7c3aed26;width:500px;height:500px;top:5%;left:-10%}.blob-2{background:#06b6d426;width:600px;height:600px;animation-delay:-4s;top:40%;right:-15%}.blob-3{background:#ec489926;width:550px;height:550px;animation-delay:-8s;bottom:0%;left:20%}@keyframes roadmap-float{0%{transform:translate(0)scale(1)}50%{transform:translate(30px,-50px)scale(1.1)}to{transform:translate(-30px,30px)scale(.9)}}.timeline-container{z-index:10;max-width:900px;margin:0 auto;padding:60px 0;position:relative}.timeline-container:after{content:"";background:linear-gradient(180deg, #7c3aed1a 0%, var(--accent-blue) 25%, var(--accent-yellow) 50%, var(--accent-rose) 75%, #ec48991a 100%);border-radius:10px;width:6px;margin-left:-3px;position:absolute;top:0;bottom:0;left:50%;box-shadow:0 0 15px #ffffff80}.timeline-item{box-sizing:border-box;width:50%;padding:15px 50px;position:relative}.timeline-item.left{left:0}.timeline-item.right{left:50%}.timeline-dot{background-color:var(--bg-primary);z-index:2;border:5px solid;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:all .5s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;right:-28px;transform:translateY(-50%);box-shadow:0 0 20px #0000001a}.timeline-item.right .timeline-dot{left:-28px}.timeline-item.active .timeline-dot{animation:2s infinite pulse-glow-premium;transform:translateY(-50%)scale(1.15)}@keyframes pulse-glow-premium{0%{box-shadow:0 0 #ec489999}70%{box-shadow:0 0 0 20px #ec489900}to{box-shadow:0 0 #ec489900}}.timeline-content{background:var(--bg-primary);opacity:.95;cursor:pointer;-webkit-backdrop-filter:blur(20px);border:1px solid #7c3aed1a;border-radius:20px;padding:35px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:visible;box-shadow:0 15px 35px #0000000d,inset 0 0 0 1px #ffffff80}.timeline-item.active .timeline-content:before{content:"✨";z-index:10;font-size:30px;animation:3s ease-in-out infinite float;position:absolute;top:-15px;right:-15px}.timeline-item.active .timeline-content{border:2px solid var(--accent-rose);box-shadow:0 20px 50px #ec489926,inset 0 0 20px #ec48990d}.timeline-item.active .timeline-content:hover{transform:translateY(-10px)scale(1.03);box-shadow:0 30px 60px #ec489940}.timeline-item.locked .timeline-content{background:var(--bg-secondary);border-color:var(--border-color);box-shadow:none;cursor:not-allowed;opacity:.7;filter:grayscale(.5)}.timeline-item.locked .timeline-content:hover{opacity:.9}.timeline-item:after{content:"";background-color:var(--border-color);z-index:1;width:20px;height:2px;position:absolute;top:50%}.timeline-item.left:after{right:30px}.timeline-item.right:after{left:30px}.timeline-item.active:after{background:linear-gradient(90deg, var(--border-color), var(--accent-rose));height:4px}@media screen and (width<=768px){.timeline-container:after{left:40px}.timeline-item{width:100%;margin-bottom:40px;padding-left:90px;padding-right:15px}.timeline-item.right{left:0%}.timeline-item.left .timeline-dot,.timeline-item.right .timeline-dot{left:12px}.timeline-item.left:after,.timeline-item.right:after{width:22px;left:68px}}.roadmap-wrapper .text-gradient{background:linear-gradient(-45deg,#8b5cf6,#3b82f6,#ec4899,#8b5cf6) 0 0/300% 300%!important;-webkit-text-fill-color:transparent!important;-webkit-background-clip:text!important;animation:4s infinite gradient-shimmer!important}@keyframes gradient-shimmer{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}:root{--ease-out-quart:cubic-bezier(.25, 1, .5, 1);--ease-out-back:cubic-bezier(.34, 1.56, .64, 1);--ease-spring:cubic-bezier(.175, .885, .32, 1.275);--hero-gradient:linear-gradient(135deg, #6366f1 0%, #8b5cf6 35%, #a855f7 65%, #ec4899 100%);--hero-gradient-hover:linear-gradient(135deg, #4f46e5 0%, #7c3aed 35%, #9333ea 65%, #db2777 100%);--stat-streak:linear-gradient(135deg, #fb923c 0%, #f43f5e 100%);--stat-xp:linear-gradient(135deg, #fde047 0%, #f59e0b 100%);--stat-lesson:linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);--stat-vocab:linear-gradient(135deg, #6ee7b7 0%, #10b981 100%);--glow-purple:0 0 0 1px #8b5cf614, 0 8px 24px #8b5cf626;--glow-orange:0 0 0 1px #fb923c14, 0 8px 24px #fb923c26;--glow-amber:0 0 0 1px #f59e0b1a, 0 8px 24px #f59e0b2e;--glow-emerald:0 0 0 1px #10b9811a, 0 8px 24px #10b98126}:root[data-theme=dark]{--glow-purple:0 0 0 1px #a78bfa2e, 0 8px 28px #a78bfa38;--glow-orange:0 0 0 1px #fb923c33, 0 8px 28px #fb923c38;--glow-amber:0 0 0 1px #f59e0b38, 0 8px 28px #f59e0b40;--glow-emerald:0 0 0 1px #34d39933, 0 8px 28px #34d39938}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 #8b5cf673}50%{box-shadow:0 0 0 14px #8b5cf600}}@keyframes rotateSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes hangulFloat{0%{opacity:0;transform:translateY(20px)rotate(-5deg)}20%{opacity:.8}to{opacity:0;transform:translateY(-220px)rotate(8deg)}}.stagger>*{opacity:0;animation:fadeUp .55s var(--ease-out-quart) forwards}.stagger>:first-child{animation-delay:40ms}.stagger>:nth-child(2){animation-delay:.1s}.stagger>:nth-child(3){animation-delay:.16s}.stagger>:nth-child(4){animation-delay:.22s}.stagger>:nth-child(5){animation-delay:.28s}.stagger>:nth-child(6){animation-delay:.34s}.stagger>:nth-child(7){animation-delay:.4s}.stagger>:nth-child(8){animation-delay:.46s}.fade-in-up{animation:fadeUp .5s var(--ease-out-quart) both}.hero-banner{border-radius:var(--radius-xl);background:var(--hero-gradient);color:#fff;isolation:isolate;min-height:220px;animation:fadeUp .6s var(--ease-out-quart) both;border:1px solid #ffffff26;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:32px;padding:40px 44px;display:grid;position:relative;overflow:hidden;box-shadow:0 4px #8b5cf633,0 8px 32px #8b5cf626,inset 0 1px #fff3}.hero-banner:before{content:"";z-index:-1;background:radial-gradient(circle at 15% 30%,#ffffff1f,#0000 50%),radial-gradient(circle at 85% 70%,#00000014,#0000 50%);position:absolute;inset:0}.hero-banner:after{content:"";opacity:.4;pointer-events:none;z-index:0;background-image:linear-gradient(#ffffff0d 1px,#0000 1px),linear-gradient(90deg,#ffffff0d 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(#000 25%,#0000 70%);mask-image:radial-gradient(#000 25%,#0000 70%)}.hero-banner>*{z-index:1;position:relative}.hero-title{font-family:var(--font-display);letter-spacing:-.02em;color:#fff;text-shadow:0 2px 12px #00000026;margin-bottom:12px;font-size:1.85rem;font-weight:800;line-height:1.25}.hero-desc{opacity:.85;color:#b0ccf0;max-width:56ch;margin-bottom:22px;font-size:1rem;line-height:1.55}.hero-cta-wrap{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.hero-greeting-tag{-webkit-backdrop-filter:blur(8px);letter-spacing:.02em;color:#fff;background:#fff3;border:1px solid #ffffff4d;border-radius:999px;align-items:center;gap:8px;margin-bottom:16px;padding:6px 16px;font-size:.85rem;font-weight:600;display:inline-flex}.hero-cta{color:#6d28d9;font-weight:700;font-family:var(--font-display);cursor:pointer;transition:transform .25s var(--ease-spring), box-shadow .25s ease;background:#fff;border:none;border-radius:14px;align-items:center;gap:10px;padding:13px 26px;font-size:1rem;display:inline-flex;box-shadow:0 4px 20px #00000026,inset 0 1px #fffc}.hero-cta:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 28px #0003,inset 0 1px #fff}.hero-cta-secondary{-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;background:#ffffff26;border:1px solid #ffffff59;border-radius:14px;align-items:center;gap:8px;padding:12px 22px;font-weight:600;transition:background .2s,transform .2s;display:inline-flex}.hero-cta-secondary:hover{background:#ffffff40;transform:translateY(-1px)}.hero-decor{justify-content:center;align-items:center;height:180px;display:flex;position:relative}.hero-decor-orb{-webkit-backdrop-filter:blur(14px);background:linear-gradient(135deg,#ffffff73,#ffffff1f);border:1px solid #ffffff8c;border-radius:50%;justify-content:center;align-items:center;width:140px;height:140px;animation:5s ease-in-out infinite floaty;display:flex;position:absolute;box-shadow:0 20px 50px #0000002e,inset 0 0 30px #fff6}.hero-decor-orb-text{font-family:var(--font-display);color:#fff;text-shadow:0 4px 12px #0003;font-size:3.8rem;font-weight:800}.hero-decor-ring{border:1.5px dashed #ffffff73;border-radius:50%;width:180px;height:180px;animation:22s linear infinite rotateSlow;position:absolute}.hero-hangul{font-family:var(--font-display);color:#ffffffb3;text-shadow:0 0 12px #ffffff4d;pointer-events:none;font-weight:800;animation:6.5s ease-in-out infinite hangulFloat;position:absolute}.hero-hangul:first-child{font-size:1.9rem;animation-delay:0s;top:8%;left:8%}.hero-hangul:nth-child(2){font-size:1.4rem;animation-delay:1.8s;top:18%;right:12%}.hero-hangul:nth-child(3){font-size:1.6rem;animation-delay:3.4s;bottom:12%;left:18%}.hero-hangul:nth-child(4){font-size:1.3rem;animation-delay:4.6s;bottom:8%;right:6%}@media (width<=900px){.hero-banner{grid-template-columns:1fr;padding:28px 24px}.hero-decor{height:140px}.hero-decor-orb{width:110px;height:110px}.hero-decor-ring{width:140px;height:140px}.hero-decor-orb-text{font-size:3rem}.hero-title{font-size:1.5rem}}.stat-card-premium{border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease-spring), box-shadow .3s ease;cursor:default;padding:22px 20px;position:relative;overflow:hidden}.stat-card-premium:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.stat-card-premium:before{content:"";opacity:.18;pointer-events:none;border-radius:50%;width:120px;height:120px;position:absolute;top:-40%;right:-20%}.stat-card-premium.streak:before{background:var(--stat-streak);opacity:.28}.stat-card-premium.xp:before{background:var(--stat-xp);opacity:.32}.stat-card-premium.lesson:before{background:var(--stat-lesson);opacity:.28}.stat-card-premium.vocab:before{background:var(--stat-vocab);opacity:.28}.stat-card-premium.streak{background:linear-gradient(135deg,#fb923c14,#f43f5e0a)}.stat-card-premium.xp{background:linear-gradient(135deg,#f59e0b1a,#fbbf240a)}.stat-card-premium.lesson{background:linear-gradient(135deg,#8b5cf614,#6366f10a)}.stat-card-premium.vocab{background:linear-gradient(135deg,#10b9811a,#6ee7b70a)}.stat-card-premium .stat-icon-wrap{color:#fff;z-index:1;border-radius:14px;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:14px;display:flex;position:relative;box-shadow:0 6px 14px #0000002e}.stat-card-premium.streak .stat-icon-wrap{background:var(--stat-streak)}.stat-card-premium.xp .stat-icon-wrap{background:var(--stat-xp);color:#78350f}.stat-card-premium.lesson .stat-icon-wrap{background:var(--stat-lesson)}.stat-card-premium.vocab .stat-icon-wrap{background:var(--stat-vocab);color:#064e3b}.stat-card-premium .stat-value{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-primary);z-index:1;font-size:2.1rem;font-weight:800;line-height:1.1;position:relative}.stat-card-premium .stat-value span.unit{color:var(--text-secondary);margin-left:4px;font-size:1rem;font-weight:600}.stat-card-premium .stat-label{color:var(--text-secondary);z-index:1;margin-top:6px;font-size:.85rem;font-weight:600;position:relative}.stat-card-premium .stat-progress{z-index:1;background:#7f7f7f1f;border-radius:999px;height:6px;margin-top:12px;position:relative;overflow:hidden}.stat-card-premium .stat-progress-fill{transform-origin:0;height:100%;animation:stat-fill .9s var(--ease-out-quart) both;border-radius:999px}.stat-card-premium.streak .stat-progress-fill{width:var(--progress,0%);background:linear-gradient(90deg,#fb923c,#f43f5e);box-shadow:0 0 10px #fb923c80}.stat-card-premium.xp .stat-progress-fill{width:var(--progress,0%);background:linear-gradient(90deg,#fde047,#f59e0b);box-shadow:0 0 10px #f59e0b80}.stat-card-premium.lesson .stat-progress-fill{width:var(--progress,0%);background:linear-gradient(90deg,#8b5cf6,#6366f1);box-shadow:0 0 10px #8b5cf680}.stat-card-premium.vocab .stat-progress-fill{width:var(--progress,0%);background:linear-gradient(90deg,#6ee7b7,#10b981);box-shadow:0 0 10px #10b98180}.stat-card-premium .stat-progress,.stat-card-premium .stat-progress-fill{border-radius:999px}@keyframes stat-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.stat-card-premium .stat-trend{color:#059669;z-index:1;background:#10b9811f;border-radius:999px;align-items:center;gap:4px;margin-top:10px;padding:3px 9px;font-size:.78rem;font-weight:600;display:inline-flex;position:relative}.stat-card-premium .stat-trend.down{color:#e11d48;background:#f43f5e1f}.quick-practice-card{border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);padding:22px;position:relative;overflow:hidden}.quick-practice-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#8b5cf62e,#0000 70%);border-radius:50%;width:200px;height:200px;position:absolute;top:-60%;right:-20%}.quick-practice-title{font-family:var(--font-display);align-items:center;gap:8px;margin-bottom:4px;font-size:1.05rem;font-weight:700;display:flex}.quick-practice-subtitle{color:var(--text-secondary);margin-bottom:16px;font-size:.8rem}.quick-practice-list{flex-direction:column;gap:10px;display:flex}.quick-practice-item{cursor:pointer;transition:all .25s var(--ease-out-quart);text-align:left;width:100%;color:inherit;background:#7f7f7f0f;border:1px solid #0000;border-radius:12px;align-items:center;gap:12px;padding:10px 12px;font-family:inherit;display:flex}.quick-practice-item:hover{background:#7f7f7f1f;border-color:#8b5cf640;transform:translate(4px)}.quick-practice-icon{color:#fff;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.quick-practice-icon.purple{background:var(--stat-lesson)}.quick-practice-icon.amber{background:var(--stat-xp);color:#78350f}.quick-practice-icon.green{background:var(--stat-vocab);color:#064e3b}.quick-practice-icon.coral{background:var(--stat-streak)}.quick-practice-text{flex:1;min-width:0}.quick-practice-text-main{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.92rem;font-weight:600;overflow:hidden}.quick-practice-text-sub{color:var(--text-secondary);margin-top:2px;font-size:.75rem}.quick-practice-arrow{color:var(--text-tertiary);flex-shrink:0;transition:transform .2s}.quick-practice-item:hover .quick-practice-arrow{color:var(--accent-purple);transform:translate(3px)}.roadmap-chip{color:var(--text-secondary);background:#7f7f7f14;border:1px solid #7f7f7f1a;border-radius:8px;align-items:center;gap:6px;padding:6px 11px;font-size:.82rem;font-weight:600;display:inline-flex}.roadmap-chip.purple{color:#7c3aed;background:#8b5cf61f;border-color:#8b5cf633}.roadmap-chip.amber{color:#b45309;background:#f59e0b1f;border-color:#f59e0b33}.roadmap-chip.emerald{color:#047857;background:#10b9811f;border-color:#10b98133}.roadmap-chip.coral{color:#be123c;background:#f43f5e1f;border-color:#f43f5e33}.roadmap-progress-card{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);max-width:880px;box-shadow:var(--shadow-sm);border-radius:18px;align-items:center;gap:16px;margin:0 auto 40px;padding:18px 24px;display:flex}.roadmap-progress-bar{background:#7f7f7f26;border-radius:999px;flex:1;height:10px;position:relative;overflow:hidden}.roadmap-progress-fill{background:linear-gradient(90deg, var(--accent-purple), var(--accent-blue));height:100%;animation:stat-fill 1s var(--ease-out-quart) both;border-radius:999px}.roadmap-help-banner{max-width:880px;color:var(--text-secondary);background:linear-gradient(135deg,#8b5cf614,#6366f10a);border:1px dashed #8b5cf64d;border-radius:14px;align-items:flex-start;gap:12px;margin:-20px auto 60px;padding:14px 20px;font-size:.88rem;line-height:1.55;display:flex}.roadmap-help-banner svg{color:var(--accent-purple);flex-shrink:0;margin-top:2px}.course-overall-progress{border-radius:var(--radius-lg);background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm);align-items:center;gap:16px;margin-bottom:22px;padding:18px 22px;display:flex}.course-overall-progress .label{color:var(--text-secondary);white-space:nowrap;font-size:.9rem}.course-overall-progress .label strong{color:var(--text-primary)}.course-overall-progress .bar{background:#7f7f7f26;border-radius:999px;flex:1;height:10px;overflow:hidden}.course-overall-progress .bar-fill{background:linear-gradient(90deg, var(--accent-purple), var(--accent-blue));height:100%;transition:width .6s var(--ease-out-quart);border-radius:999px}.lesson-status-chip{text-transform:uppercase;letter-spacing:.04em;border-radius:999px;align-items:center;gap:5px;padding:4px 10px;font-size:.75rem;font-weight:700;display:inline-flex}.lesson-status-chip.done{color:#047857;background:#10b98124}.lesson-status-chip.active{color:#7c3aed;background:#8b5cf624}.lesson-status-chip.locked{color:var(--text-tertiary);background:#7f7f7f24}.lesson-row{transition:all .25s var(--ease-out-quart)}.lesson-row:hover{transform:translate(4px)}.lesson-row.is-done{opacity:.7}.lesson-row.is-done .lesson-row-title{-webkit-text-decoration:line-through #10b98180;text-decoration:line-through #10b98180;text-decoration-thickness:2px}.lesson-row.is-locked{opacity:.55;pointer-events:none}.sidebar-quick-stats{border-radius:var(--radius-md);background:var(--glass-bg);border:1px solid var(--glass-border);flex-direction:column;gap:10px;margin-top:14px;padding:12px 14px;display:flex}.sidebar-quick-stats .row{justify-content:space-between;align-items:center;font-size:.82rem;display:flex}.sidebar-quick-stats .row .lbl{color:var(--text-secondary);align-items:center;gap:6px;display:inline-flex}.sidebar-quick-stats .row .val{color:var(--text-primary);font-weight:700;font-family:var(--font-display)}.sidebar.collapsed .sidebar-quick-stats{display:none}.glass-panel{transition:box-shadow .3s ease, transform .3s var(--ease-out-quart)}.glass-panel:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.toolbar-premium{border:1px solid var(--glass-border);background:#7f7f7f0f;border-radius:999px;align-items:center;gap:8px;padding:8px 14px;display:flex}.toolbar-premium .dot{background:linear-gradient(135deg, var(--accent-purple), var(--accent-blue));border-radius:50%;width:8px;height:8px;animation:1.8s ease-in-out infinite pulseGlow;box-shadow:0 0 8px #8b5cf680}.skeleton-shimmer{background:linear-gradient(90deg,#7f7f7f0f 0%,#7f7f7f2e 50%,#7f7f7f0f 100%) 0 0/200% 100%;border-radius:8px;animation:1.6s linear infinite shimmer}@media (width<=768px){.page-container{padding:16px 12px!important}.main-content{transition:margin-left .3s;margin-left:0!important}.main-content.collapsed{margin-left:0!important}.sidebar{z-index:200;transition:transform .3s cubic-bezier(.16,1,.3,1);transform:translate(-100%);box-shadow:4px 0 30px #0000004d}.sidebar.open{transform:translate(0)}.sidebar-overlay{z-index:199;background:#00000080;display:none;position:fixed;inset:0}.sidebar-overlay.active{display:block}.topbar{height:56px;padding:0 14px}.page-title{font-size:1.1rem}.toggle-sidebar-btn{width:32px;height:32px}.hero-banner{grid-template-columns:1fr;gap:16px;min-height:auto;padding:24px 20px}.hero-title{font-size:1.25rem}.hero-desc{margin-bottom:14px;font-size:.85rem}.hero-cta-wrap{flex-direction:column;gap:8px}.hero-cta,.hero-cta-secondary{justify-content:center;width:100%;padding:12px 16px;font-size:.9rem}.hero-decor{height:100px}.hero-decor-orb{width:80px;height:80px}.hero-decor-ring{width:110px;height:110px}.hero-decor-orb-text{font-size:2.2rem}.hero-hangul{display:none}.stats-row{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.stat-card-premium{padding:14px 12px}.stat-card-premium .stat-icon-wrap{border-radius:10px;width:38px;height:38px;margin-bottom:10px}.stat-card-premium .stat-icon-wrap svg{width:18px;height:18px}.stat-card-premium .stat-value{font-size:1.4rem}.stat-card-premium .stat-label{font-size:.72rem}.stat-card-premium .stat-progress{height:4px;margin-top:8px}.stat-card-premium .stat-trend{padding:2px 6px;font-size:.68rem}.dashboard-grid{grid-template-columns:1fr;gap:16px;margin-top:16px}.analytics-container{grid-template-columns:1fr;gap:16px;margin:16px 0}.glass-panel{box-shadow:var(--shadow-sm)!important;padding:16px!important;transform:none!important}.glass-card{padding:12px!important}.quick-practice-card{z-index:1;padding:14px;position:relative}.quick-practice-item{z-index:2;gap:10px;min-height:44px;padding:10px 12px;position:relative}.quick-practice-icon{border-radius:8px;width:32px;height:32px}.quick-practice-text-main{font-size:.82rem}.streak-calendar-grid{gap:4px}.streak-day{padding:6px 2px;font-size:.7rem}.course-overall-progress{flex-wrap:wrap;gap:8px;padding:12px 14px;font-size:.8rem}.course-overall-progress .label{font-size:.78rem}.lesson-detail-view{grid-template-columns:1fr;gap:16px;margin-top:16px}.tabs-header{-webkit-overflow-scrolling:touch;gap:4px;overflow-x:auto}.tab-btn{white-space:nowrap;padding:10px 14px;font-size:.78rem}.leaderboard-title{font-size:1.5rem}.leaderboard-desc{font-size:.85rem}.podium-container{gap:6px!important;min-height:200px!important;margin-bottom:30px!important}.podium-item{max-width:30vw!important}.podium-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:.7rem!important}.timeline-container{padding:20px 0}.timeline-container:after{left:24px}.timeline-item{width:100%;margin-bottom:20px;padding-left:60px;padding-right:10px}.timeline-item.right{left:0}.timeline-item.left .timeline-dot,.timeline-item.right .timeline-dot{left:4px}.timeline-content{padding:18px}.timeline-content h3{font-size:1.2rem!important}.roadmap-chip{padding:3px 7px;font-size:.7rem}.roadmap-progress-card{flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:12px 14px}.roadmap-help-banner{margin:0 auto 30px;padding:10px 14px;font-size:.78rem}.test-center-grid{grid-template-columns:1fr!important}.badge-grid{grid-template-columns:repeat(2,1fr);gap:10px}.chat-panel{height:calc(100vh - 220px);margin-top:12px}.chat-input-area{padding:10px}.chat-input{font-size:.85rem}.streak-pill,.xp-pill{gap:4px;padding:4px 8px;font-size:.75rem}.streak-pill span,.xp-pill span{font-size:.72rem}.cloud-status-pill{padding:4px 6px;font-size:.7rem}.cloud-lbl{display:none}.chart-header-actions{justify-content:space-between;width:100%}.goal-label{display:none}.goal-btn-group{justify-content:space-between;width:100%}.goal-btn{text-align:center;flex:1;font-size:.78rem}.skill-progress-grid{gap:10px}.skill-progress-card{text-align:left;flex-direction:row;justify-content:flex-start;padding:10px}}.btn{position:relative;overflow:hidden}.btn:after{content:"";opacity:0;background:radial-gradient(circle,#ffffff4d 0%,#0000 60%);transition:opacity .3s;position:absolute;inset:0}.btn:active:after{opacity:1;transition:opacity}.glass-card{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .3s}.glass-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent-purple);transform:translateY(-4px)}.deck-card:hover{border-color:var(--accent-purple);box-shadow:0 20px 40px var(--glow-color);transform:translateY(-8px)scale(1.02)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent-purple);outline-offset:2px;border-radius:4px}.page-title{letter-spacing:-.025em;font-size:1.55rem}h2{letter-spacing:-.02em;font-size:1.7rem}h3{letter-spacing:-.015em;font-size:1.25rem}body{line-height:1.6}p{line-height:1.65}.stats-row{margin-top:32px}.auth-modal-card:before{content:"";background:linear-gradient(90deg, var(--accent-purple), var(--accent-indigo), var(--accent-coral));height:4px;position:absolute;top:0;left:0;right:0}.auth-input{background:var(--bg-tertiary);border:1.5px solid var(--border-color);border-radius:var(--radius-md);width:100%;color:var(--text-primary);padding:12px 16px;font-size:.92rem;transition:all .2s}.auth-input:focus{border-color:var(--accent-purple);outline:none;box-shadow:0 0 0 3px #8b5cf626}.site-footer{border-top:1px solid var(--border-color);color:var(--text-tertiary);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding:24px 40px;font-size:.82rem;display:flex}.site-footer a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.site-footer a:hover{color:var(--accent-purple)}@media (width<=768px){.site-footer{text-align:center;flex-direction:column;padding:16px 14px}}.breadcrumb-bar{color:var(--text-secondary);background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);align-items:center;gap:8px;padding:10px 24px;font-size:.82rem;display:flex}.breadcrumb-home{color:var(--accent-purple);font-weight:600}.breadcrumb-home:hover{text-decoration:underline}.breadcrumb-sep{color:var(--text-tertiary);font-size:.75rem}.breadcrumb-item.active{color:var(--text-primary);font-weight:600}.tour-overlay{z-index:9999;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.tour-overlay.active{display:flex}.tour-card{background:var(--bg-primary);border-radius:var(--radius-xl);text-align:center;max-width:420px;box-shadow:var(--shadow-xl);border:1px solid var(--border-color);padding:32px}.tour-card h3{margin-bottom:8px;font-size:1.3rem}.tour-card p{color:var(--text-secondary);margin-bottom:20px;line-height:1.6}.tour-steps{justify-content:center;gap:6px;margin-bottom:16px;display:flex}.tour-dot{background:var(--border-color);border-radius:50%;width:8px;height:8px}.tour-dot.active{background:var(--accent-purple);border-radius:4px;width:24px}.reading-progress{background:linear-gradient(90deg, var(--accent-purple), var(--accent-blue));z-index:10000;border-radius:0 2px 2px 0;height:3px;transition:width .15s linear;position:fixed;top:0;left:0}.focus-mode-btn{background:var(--glass-bg);border:1px solid var(--border-color);width:44px;height:44px;box-shadow:var(--shadow-md);cursor:pointer;z-index:100;color:var(--text-primary);border-radius:50%;justify-content:center;align-items:center;font-size:1.3rem;transition:all .3s;display:flex;position:fixed;bottom:20px;right:20px}.focus-mode-btn:hover{border-color:var(--accent-purple);box-shadow:0 0 20px var(--glow-color)}body.focus-mode .sidebar,body.focus-mode .topbar,body.focus-mode .breadcrumb-bar,body.focus-mode .site-footer{display:none!important}body.focus-mode .main-content{margin-left:0!important;padding-top:0!important}