:root{--font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Hiragino Kaku Gothic ProN", "Noto Sans KR", "Noto Sans JP", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--font-target: "Inter", "Apple SD Gothic Neo", "Hiragino Kaku Gothic ProN", "Noto Sans KR", "Noto Sans JP", system-ui, sans-serif;--fs-xs: .75rem;--fs-sm: .8125rem;--fs-base: .9375rem;--fs-md: 1rem;--fs-lg: 1.125rem;--fs-xl: 1.375rem;--fs-2xl: 1.75rem;--fs-3xl: 2.25rem;--fs-4xl: 3rem;--lh-tight: 1.15;--lh-snug: 1.35;--lh-body: 1.6;--space-2: 2px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--r-xs: 8px;--r-sm: 11px;--r-md: 14px;--r-lg: 18px;--r-xl: 24px;--r-full: 999px;--dur-fast: .14s;--dur: .22s;--dur-slow: .34s;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--z-base: 1;--z-sticky: 20;--z-overlay: 40;--z-modal: 100;--z-toast: 1000;--maxw: 960px;--grad-cta: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);--on-brand: #ffffff}:root,:root[data-theme=dark]{color-scheme:dark;--bg: #0a0e1c;--bg-elev: #0d1224;--glow-1: rgba(99, 102, 241, .22);--glow-2: rgba(168, 85, 247, .16);--glow-3: rgba(52, 211, 153, .1);--surface-1: #121831;--surface-2: #18203f;--surface-3: #1f294f;--surface-inset: #0c1126;--border: rgba(255, 255, 255, .08);--border-strong: rgba(255, 255, 255, .16);--text: #ECEFFB;--text-muted: #9CA6CE;--text-faint: #6d779f;--primary: #818cf8;--primary-strong: #6366f1;--primary-soft: rgba(129, 140, 248, .14);--on-primary: #0a0e1c;--secondary: #c4b5fd;--secondary-soft: rgba(168, 85, 247, .16);--accent: #34d399;--accent-strong: #10b981;--accent-soft: rgba(52, 211, 153, .14);--on-accent: #052e22;--warn: #fbbf24;--warn-soft: rgba(251, 191, 36, .14);--danger: #f87171;--danger-strong: #ef4444;--danger-soft: rgba(248, 113, 113, .14);--ring: #818cf8;--grad-brand: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);--grad-progress: linear-gradient(90deg, #6366f1 0%, #34d399 100%);--grad-surface: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow-md: 0 6px 18px rgba(0, 0, 0, .38);--shadow-lg: 0 18px 48px rgba(0, 0, 0, .5);--shadow-glow: 0 10px 40px rgba(99, 102, 241, .35)}:root[data-theme=light]{color-scheme:light;--bg: #eef2ff;--bg-elev: #e6ecff;--glow-1: rgba(99, 102, 241, .16);--glow-2: rgba(168, 85, 247, .12);--glow-3: rgba(22, 163, 74, .08);--surface-1: #ffffff;--surface-2: #f4f6fe;--surface-3: #ebeffd;--surface-inset: #f7f9ff;--border: #d6def8;--border-strong: #b9c5f0;--text: #1e1b4b;--text-muted: #4b5293;--text-faint: #7d83b3;--primary: #4f46e5;--primary-strong: #4338ca;--primary-soft: rgba(79, 70, 229, .1);--on-primary: #ffffff;--secondary: #7c3aed;--secondary-soft: rgba(124, 58, 237, .1);--accent: #16a34a;--accent-strong: #15803d;--accent-soft: rgba(22, 163, 74, .12);--on-accent: #ffffff;--warn: #b45309;--warn-soft: rgba(180, 83, 9, .12);--danger: #dc2626;--danger-strong: #b91c1c;--danger-soft: rgba(220, 38, 38, .1);--ring: #4f46e5;--grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);--grad-progress: linear-gradient(90deg, #4f46e5 0%, #16a34a 100%);--grad-surface: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));--shadow-sm: 0 1px 2px rgba(49, 46, 129, .08);--shadow-md: 0 8px 24px rgba(49, 46, 129, .1);--shadow-lg: 0 20px 50px rgba(49, 46, 129, .16);--shadow-glow: 0 12px 40px rgba(79, 70, 229, .22)}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%}html,body,#root{height:100%}body{font-family:var(--font-sans);font-size:var(--fs-md);line-height:var(--lh-body);color:var(--text);background-color:var(--bg);background-image:radial-gradient(60rem 36rem at 82% -8%,var(--glow-1),transparent 60%),radial-gradient(46rem 30rem at -8% 8%,var(--glow-2),transparent 55%),radial-gradient(50rem 40rem at 50% 120%,var(--glow-3),transparent 60%);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}::selection{background:var(--primary-soft);color:var(--text)}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r-xs)}:focus:not(:focus-visible){outline:none}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full);border:2px solid transparent;background-clip:padding-box}h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:700}h1{font-size:var(--fs-2xl)}h2{font-size:var(--fs-xl)}h3{font-size:var(--fs-lg)}p{line-height:var(--lh-body)}a{color:var(--primary);text-decoration:none}small,.text-sm{font-size:var(--fs-sm)}.text-xs{font-size:var(--fs-xs)}.muted{color:var(--text-muted)}.faint{color:var(--text-faint)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.lang-target{font-family:var(--font-target)}.uppercase-label{text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)}.app{max-width:var(--maxw);margin:0 auto;padding:0 clamp(14px,4vw,28px) 96px;padding-top:calc(env(safe-area-inset-top) + 8px)}.row{display:flex;align-items:center;gap:var(--space-sm)}.col{display:flex;flex-direction:column;gap:var(--space-md)}.wrap{flex-wrap:wrap}.between{justify-content:space-between}.center{justify-content:center}.spacer{flex:1}.stack-lg{display:flex;flex-direction:column;gap:var(--space-lg)}.stack-sm{display:flex;flex-direction:column;gap:var(--space-sm)}.report-name{width:100%;border:none;background:transparent;padding:2px 0;color:var(--text);font-family:var(--font-display, inherit)}.report-name:focus{outline:none;border-bottom:1px solid var(--primary)}@media print{.topbar,.no-print,footer{display:none!important}body,.app{background:#fff!important}.card{break-inside:avoid;border:1px solid #ddd!important;box-shadow:none!important}}.topbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-sm);padding:12px 0;margin-bottom:var(--space-lg);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--border)}.brand{display:inline-flex;align-items:center;gap:10px;background:none;border:none;color:var(--text);font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);letter-spacing:-.02em;padding:4px;border-radius:var(--r-sm)}.brand .logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad-brand);color:#fff;box-shadow:var(--shadow-glow)}.card{position:relative;background:var(--surface-1);background-image:var(--grad-surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:var(--space-lg)}.card-interactive{cursor:pointer;transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur);text-align:left;width:100%}.card-interactive:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-lg)}.card-interactive:active{transform:translateY(-1px)}.btn{--btn-bg: var(--surface-2);--btn-fg: var(--text);--btn-bd: var(--border);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-sm);border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--btn-fg);font-weight:600;font-size:var(--fs-base);white-space:nowrap;transition:transform var(--dur-fast) var(--ease-out),background var(--dur),border-color var(--dur),box-shadow var(--dur),opacity var(--dur);touch-action:manipulation}.btn:hover{border-color:var(--border-strong);background:var(--surface-3)}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn .icon{flex:none}.btn-primary{--btn-bg: var(--grad-cta);--btn-fg: var(--on-brand);--btn-bd: transparent;box-shadow:var(--shadow-glow)}.btn-primary:hover{--btn-bg: var(--grad-cta);filter:brightness(1.07)}.btn-accent{--btn-bg: var(--accent);--btn-fg: var(--on-accent);--btn-bd: transparent}.btn-accent:hover{--btn-bg: var(--accent-strong)}.btn-ghost{--btn-bg: transparent;--btn-bd: var(--border)}.btn-ghost:hover{--btn-bg: var(--surface-2)}.btn-subtle{--btn-bg: var(--primary-soft);--btn-fg: var(--primary);--btn-bd: transparent}.btn-subtle:hover{--btn-bg: var(--primary-soft);filter:brightness(1.1)}.btn-danger{--btn-bg: transparent;--btn-fg: var(--danger);--btn-bd: var(--danger-soft)}.btn-danger:hover{--btn-bg: var(--danger-soft);--btn-bd: var(--danger)}.btn-sm{min-height:36px;padding:7px 12px;font-size:var(--fs-sm);border-radius:var(--r-xs)}.btn-block{width:100%}.btn-pill{border-radius:var(--r-full)}.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-2);color:var(--text);transition:background var(--dur),border-color var(--dur),transform var(--dur-fast)}.icon-btn:hover{background:var(--surface-3);border-color:var(--border-strong)}.icon-btn:active{transform:scale(.94)}.icon-btn-sm{width:38px;height:38px}.segmented{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:var(--surface-inset);border:1px solid var(--border);border-radius:var(--r-md)}.segmented button{min-height:34px;padding:6px 14px;border:none;background:transparent;color:var(--text-muted);font-weight:600;font-size:var(--fs-sm);border-radius:var(--r-xs);transition:background var(--dur),color var(--dur)}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true],.segmented button.is-active{background:var(--surface-1);color:var(--text);box-shadow:var(--shadow-sm)}.segmented.brand button.is-active{background:var(--grad-cta);color:var(--on-brand)}.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:var(--fs-sm);font-weight:600}.pill.active{color:var(--primary);border-color:transparent;background:var(--primary-soft)}.badge{display:inline-grid;place-items:center;min-width:34px;height:28px;padding:0 10px;border-radius:var(--r-xs);font-weight:800;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}.badge.good{background:var(--accent-soft);color:var(--accent)}.badge.mid{background:var(--warn-soft);color:var(--warn)}.badge.low{background:var(--danger-soft);color:var(--danger)}.field{display:block}.field>.field-label{display:block;margin-bottom:6px;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}textarea,input[type=text],input[type=number],select{width:100%;background:var(--surface-inset);color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;font-size:var(--fs-md);transition:border-color var(--dur),box-shadow var(--dur),background var(--dur)}textarea::placeholder,input::placeholder{color:var(--text-faint)}textarea{min-height:140px;resize:vertical;line-height:var(--lh-body)}textarea:focus,input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}textarea.ok,input.ok{border-color:var(--accent)}textarea.bad,input.bad{border-color:var(--danger)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--r-full);background:var(--surface-inset);border:1px solid var(--border)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--grad-cta);border:3px solid var(--surface-1);box-shadow:var(--shadow-md);cursor:pointer}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);border:3px solid var(--surface-1);cursor:pointer}.progress-track{height:12px;background:var(--surface-inset);border:1px solid var(--border);border-radius:var(--r-full);overflow:hidden}.progress-track>span{display:block;height:100%;border-radius:var(--r-full);background:var(--grad-progress);transition:width var(--dur-slow) var(--ease-out)}.callout{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-sm);background:var(--surface-inset);border:1px solid var(--border);line-height:var(--lh-snug)}.callout .callout-icon{flex:none;margin-top:1px}.callout.success{background:var(--accent-soft);border-color:transparent;color:var(--text)}.callout.success .callout-icon{color:var(--accent)}.callout.warn{background:var(--warn-soft);border-color:transparent}.callout.warn .callout-icon{color:var(--warn)}.callout.err{background:var(--danger-soft);border-color:transparent}.callout.err .callout-icon{color:var(--danger)}.stat{display:flex;flex-direction:column;gap:2px}.stat .stat-n{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}.stat .stat-l{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600}.stat-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md)}.module-card{display:flex;flex-direction:column;gap:8px;min-height:138px;padding:var(--space-lg)}.module-card .module-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--primary-soft);color:var(--primary);margin-bottom:4px;transition:transform var(--dur) var(--ease-spring)}.card-interactive:hover .module-icon{transform:scale(1.08) rotate(-3deg)}.module-card .module-name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg)}.module-card.locked{opacity:.6;cursor:not-allowed}.module-card .lock-tag{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--warn);font-weight:600}.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-md)}.lang-card{display:flex;flex-direction:column;gap:6px;padding:var(--space-lg)}.lang-card.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),var(--shadow-md)}.lang-card .flag{font-size:2rem;line-height:1}.lang-card .native{font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700}.module-header{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--space-lg)}.module-title{display:flex;align-items:center;gap:12px}.module-title .title-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--primary-soft);color:var(--primary)}.module-title h1{font-size:var(--fs-xl)}.prose{white-space:pre-wrap;line-height:var(--lh-body)}.prose-target{font-family:var(--font-target)}.divider{border:none;border-top:1px solid var(--border);margin:var(--space-md) 0}.strike{text-decoration:line-through;color:var(--danger)}.chat-thread{display:flex;flex-direction:column;gap:var(--space-sm)}.chat-msg{display:flex}.chat-msg.user{justify-content:flex-end}.chat-bubble{max-width:84%;display:flex;align-items:flex-end;gap:6px;padding:10px 14px;border-radius:var(--r-lg);line-height:var(--lh-body)}.chat-bubble.ai{background:var(--surface-2);border-bottom-left-radius:var(--r-sm)}.chat-bubble.user{background:var(--primary);color:var(--on-primary, #fff);border-bottom-right-radius:var(--r-sm)}.chat-bubble .chat-play{flex:none;margin-bottom:-2px}.chat-tip{display:flex;gap:6px;align-items:flex-start;font-size:var(--fs-xs);color:var(--text-muted);margin-top:4px;padding-right:4px}.support-vocab{display:flex;flex-direction:column;gap:8px}.support-vocab-item{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}input.answer-correct{border-color:var(--accent);background:var(--accent-soft)}input.answer-wrong{border-color:var(--danger);background:var(--danger-soft, rgba(239, 68, 68, .12))}.shadow-diff{background:var(--warn-soft, rgba(245, 158, 11, .22));color:inherit;border-radius:4px;padding:0 2px}.call-orb{width:132px;height:132px;border-radius:50%;margin:var(--space-lg) auto;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary-strong),var(--primary));transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}.call-orb.speaking{animation:orbTalk 1.1s ease-in-out infinite}.call-orb.listening,.call-orb.hearing{background:linear-gradient(135deg,var(--accent),var(--primary));animation:orbListen 1.6s ease-out infinite}.call-orb.hearing{animation-duration:.9s}.call-orb.thinking{background:linear-gradient(135deg,var(--surface-3, #333),var(--primary-strong));animation:orbThink 1.2s ease-in-out infinite}@keyframes orbTalk{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes orbListen{0%{box-shadow:0 0 0 0 var(--accent-soft)}70%{box-shadow:0 0 0 22px transparent}to{box-shadow:0 0 0 0 transparent}}@keyframes orbThink{0%,to{opacity:1}50%{opacity:.65}}.glyph{font-family:var(--font-target);font-size:clamp(3rem,12vw,4.5rem);line-height:1;text-align:center;padding:var(--space-sm) 0}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm)}.choice{min-height:56px;font-size:var(--fs-md);font-weight:600}.choice.correct{--btn-bg: var(--accent-soft);--btn-bd: var(--accent);--btn-fg: var(--text)}.choice.wrong{--btn-bg: var(--danger-soft);--btn-bd: var(--danger);--btn-fg: var(--text)}.glyph-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--space-md) 8px;min-height:92px}.glyph-tile .g{font-family:var(--font-target);font-size:2rem;line-height:1}.flashcard{perspective:1200px;cursor:pointer;-webkit-user-select:none;user-select:none}.flashcard-inner{position:relative;min-height:170px;transition:transform var(--dur-slow) var(--ease-in-out);transform-style:preserve-3d}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-face{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;padding:var(--space-md);backface-visibility:hidden;-webkit-backface-visibility:hidden}.flashcard-face.back{transform:rotateY(180deg)}.flashcard .term{font-family:var(--font-target);font-size:var(--fs-3xl);font-weight:700;letter-spacing:-.02em}.flashcard .reading{color:var(--text-muted);margin-top:6px;font-size:var(--fs-md)}.spinner{width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;animation:spin .7s linear infinite;display:inline-block;vertical-align:-3px}.skeleton{border-radius:var(--r-sm);background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);background-size:200% 100%;animation:shimmer 1.3s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes pulseRing{0%{box-shadow:0 0 0 0 var(--danger-soft)}70%{box-shadow:0 0 0 14px transparent}to{box-shadow:0 0 0 0 transparent}}.animate-in{animation:fadeInUp var(--dur-slow) var(--ease-out) both}.stagger>*{animation:fadeInUp var(--dur-slow) var(--ease-out) both}.stagger>*:nth-child(1){animation-delay:.03s}.stagger>*:nth-child(2){animation-delay:.07s}.stagger>*:nth-child(3){animation-delay:.11s}.stagger>*:nth-child(4){animation-delay:.15s}.stagger>*:nth-child(5){animation-delay:.19s}.stagger>*:nth-child(6){animation-delay:.23s}.stagger>*:nth-child(7){animation-delay:.27s}.pop-in{animation:pop var(--dur) var(--ease-spring) both}.recording-dot{animation:pulseRing 1.4s ease-out infinite}@media(max-width:560px){.choice-grid,.grid{grid-template-columns:1fr}h1{font-size:var(--fs-xl)}.hide-sm{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}