@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Plus+Jakarta+Sans:wght@700;800&family=Outfit:wght@400;600;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Anton+SC&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap";:root{--background-gradient-start:#0a0a14;--background-gradient-end:#141022;--background:#0a0a14;--on-background:#f4f2ff;--dark-navy:#f4f2ff;--surface:#ffffff0f;--surface-dim:#ffffff0a;--surface-bright:#ffffff1a;--surface-container-lowest:#0e0d18;--surface-container-low:#12101e;--surface-container:#161326;--surface-container-high:#1b172e;--surface-container-highest:#211c38;--pure-white:#fff;--on-surface:#f4f2ff;--on-surface-variant:#a9a3c2;--inverse-surface:#f4f2ff;--inverse-on-surface:#141022;--primary:#ff2e88;--on-primary:#fff;--primary-container:#ff2e8829;--primary-fixed-variant:#7c4dff;--secondary:#22e4ff;--on-secondary:#08101a;--secondary-container:#22e4ff24;--on-secondary-container:#22e4ff;--error:#ff4d5e;--on-error:#fff;--error-container:#ff4d5e29;--on-error-container:#ff8a94;--outline:#ffffff29;--outline-variant:#ffffff14;--hanji-white:#fff;--hanok-wood:#ffb65c;--cloud-blue:#7c4dff;--surface-color:#161326;--text-color:#f4f2ff;--primary-dark:#b06bff;--text-secondary:#a9a3c2;--text-main:#1c1a2e;--border:#ffffff24;--bg-card:#161326;--bg-primary:#0a0a14;--chrome-surface:#080a10b3;--chrome-border:#ffffff14;--chrome-glow:#ff2e8880;--marketing-bg:#000;--marketing-fg:#fff;--marketing-fg-muted:#ffffff73;--font-heading:"Outfit", "Plus Jakarta Sans", "Apple SD Gothic Neo", sans-serif;--font-body:"Inter", "Apple SD Gothic Neo", sans-serif;--radius-sm:.375rem;--radius-md:.75rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-2xl:2.25rem;--radius-full:9999px;--spacing-xs:4px;--spacing-sm:12px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--shadow-sm:0 2px 8px #00000059;--shadow-md:0 4px 16px #00000073;--shadow-lg:0 8px 32px #0000008c;--shadow-xl:0 16px 48px #0009;--primary-glow:0 0 22px #ff2e8873;--secondary-glow:0 0 22px #22e4ff66;--glass-border:1px solid #ffffff1f}*,:before,:after,::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.left-0{left:0}.left-1\/2{left:50%}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-4{top:1rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-50{z-index:50}.z-\[100\]{z-index:100}.mx-auto{margin-left:auto;margin-right:auto}.my-8{margin-top:2rem;margin-bottom:2rem}.mb-10{margin-bottom:2.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-24{margin-bottom:6rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[100dvh\]{height:100dvh}.h-\[300px\]{height:300px}.h-\[48px\]{height:48px}.h-\[50px\]{height:50px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-16{width:4rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[90\%\]{width:90%}.w-full{width:100%}.min-w-0{min-width:0}.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-\[120px\]{max-width:120px}.max-w-\[200px\]{max-width:200px}.max-w-\[320px\]{max-width:320px}.max-w-\[420px\]{max-width:420px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xl{max-width:36rem}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{0%{opacity:.6}to{opacity:1}}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-wait{cursor:wait}.select-none{-webkit-user-select:none;user-select:none}.resize{resize:both}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-\[10px\]{border-radius:10px}.rounded-\[14px\]{border-radius:14px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-none{border-style:none}.border-red-500\/20{border-color:#ef444433}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/10{border-color:#ffffff1a}.border-white\/20{border-color:#fff3}.border-white\/25{border-color:#ffffff40}.bg-\[\#0064FF\]{--tw-bg-opacity:1;background-color:rgb(0 100 255/var(--tw-bg-opacity,1))}.bg-\[\#0a0a0a\]{--tw-bg-opacity:1;background-color:rgb(10 10 10/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-black\/80{background-color:#000c}.bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-600{--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-neutral-600{--tw-bg-opacity:1;background-color:rgb(82 82 82/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:#ef44441a}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-transparent{background-color:#0000}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:#ffffff1a}.bg-white\/15{background-color:#ffffff26}.bg-white\/20{background-color:#fff3}.bg-white\/5{background-color:#ffffff0d}.bg-white\/\[0\.03\]{background-color:#ffffff08}.bg-white\/\[0\.07\]{background-color:#ffffff12}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-10{padding:2.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-12{padding-left:3rem;padding-right:3rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-32{padding-top:8rem;padding-bottom:8rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-32{padding-bottom:8rem}.pb-8{padding-bottom:2rem}.pt-20{padding-top:5rem}.pt-32{padding-top:8rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono,.font-sans{font-family:Space Mono,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[32px\]{font-size:32px}.text-\[42px\]{font-size:42px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-\[0\.95\]{line-height:.95}.leading-\[1\.15\]{line-height:1.15}.leading-\[1\.1\]{line-height:1.1}.leading-\[1\.35\]{line-height:1.35}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-tight{line-height:1.25}.tracking-\[-0\.01em\]{letter-spacing:-.01em}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-\[-0\.03em\]{letter-spacing:-.03em}.tracking-\[-0\.04em\]{letter-spacing:-.04em}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/25{color:#ffffff40}.text-white\/30{color:#ffffff4d}.text-white\/40{color:#fff6}.text-white\/45{color:#ffffff73}.text-white\/60{color:#fff9}.text-white\/70{color:#ffffffb3}.text-white\/80{color:#fffc}.text-white\/85{color:#ffffffd9}.underline{text-decoration-line:underline}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000), var(--tw-ring-shadow,0 0 #0000), var(--tw-shadow)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-property:transform;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));color:var(--on-background);min-height:100dvh;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em}button{font-family:var(--font-body);cursor:pointer;border:none;transition:all .3s cubic-bezier(.4,0,.2,1)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff05}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.countdown-overlay{-webkit-backdrop-filter:blur(4px);z-index:9999;background:#0003;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.countdown-number{font-family:var(--font-heading);color:#fff;text-shadow:0 0 20px var(--primary), 0 0 40px var(--primary);font-size:72px;font-weight:800;animation:1s cubic-bezier(.2,.8,.2,1) infinite floatNumber}.countdown-number.go{color:#fff;text-shadow:0 0 20px var(--secondary), 0 0 40px var(--secondary);font-size:80px}@keyframes floatNumber{0%{opacity:0;transform:translateY(20px)scale(.9)}20%{opacity:1;transform:translateY(0)scale(1)}80%{opacity:1;transform:translateY(-5px)scale(1.02)}to{opacity:0;transform:translateY(-15px)scale(1.05)}}.mobile-play-screen{touch-action:none;background:var(--bg);overscroll-behavior:none;flex-direction:column;width:100%;height:100dvh;display:flex;position:fixed;inset:0;overflow:hidden}.mobile-top-area{flex-direction:column;align-items:center;gap:.5rem;width:100%;padding:.5rem 1rem;display:flex}.mobile-scaled-area{box-sizing:border-box;flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:.3rem;width:100%;padding:.2rem .5rem .5rem;display:flex}.mobile-scaled-area .flashcard,.mobile-scaled-area .custom-flashcard{box-sizing:border-box;border-width:2px!important;border-radius:.8rem!important;width:100%!important;margin:0!important;padding:.5rem .8rem!important}.mobile-scaled-area .multi-stage-display{gap:.3rem!important;margin-top:0!important}.mobile-scaled-area .text-line{border-width:1px!important;border-radius:.5rem!important;gap:0!important;padding:.3rem .6rem!important}.mobile-scaled-area .stage-label{margin-bottom:2px!important;font-size:.65rem!important}.mobile-scaled-area .stage-content{font-size:1.1rem!important;line-height:1.1!important}.mobile-scaled-area .stage-romaja .stage-content{font-size:.9rem!important}.mobile-scaled-area .korean-word,.mobile-scaled-area .ko-line{margin:0!important;font-size:1.1rem!important}.mobile-scaled-area .romanization,.mobile-scaled-area .romaja-line,.mobile-scaled-area .meaning,.mobile-scaled-area .en-line{margin:0!important;font-size:.75rem!important;line-height:1.1!important}.mobile-typing-display{text-align:center;background:var(--surface-dim);border:2px solid var(--primary);width:100%;color:var(--primary);box-shadow:0 0 10px rgba(var(--primary-rgb,99,102,241), .1);box-sizing:border-box;justify-content:center;align-items:center;font-weight:600;display:flex;border-radius:.6rem!important;min-height:2rem!important;margin-top:.2rem!important;padding:.4rem .8rem!important;font-size:1rem!important}@keyframes pulseIcon{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}.mobile-compact-flashcard{width:100%}.mobile-compact-flashcard .flashcard,.mobile-compact-flashcard .custom-flashcard{border-radius:1rem!important;gap:.2rem!important;padding:.6rem .8rem!important}.mobile-compact-flashcard .flashcard .korean-word,.mobile-compact-flashcard .custom-flashcard .ko-line{margin:0!important;font-size:1.3rem!important}.mobile-compact-flashcard .flashcard .romanization,.mobile-compact-flashcard .custom-flashcard .romaja-line{margin:0!important;font-size:.85rem!important}.mobile-compact-flashcard .flashcard .meaning,.mobile-compact-flashcard .custom-flashcard .en-line{margin:0!important;font-size:.8rem!important}.mobile-typing-display{text-align:center;background:var(--surface-dim);border:2px solid var(--primary);width:100%;min-height:2.8rem;color:var(--primary);box-shadow:0 0 12px rgba(var(--primary-rgb,99,102,241), .15);border-radius:1rem;justify-content:center;align-items:center;padding:.6rem 1rem;font-size:1.2rem;font-weight:600;display:flex}.hover\:bg-\[\#0052D4\]:hover{--tw-bg-opacity:1;background-color:rgb(0 82 212/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.hover\:bg-neutral-200:hover{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.hover\:bg-white\/20:hover{background-color:#fff3}.hover\:bg-white\/\[0\.12\]:hover{background-color:#ffffff1f}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-red-100:hover{--tw-text-opacity:1;color:rgb(254 226 226/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-white\/80:hover{color:#fffc}.active\:scale-\[0\.98\]:active{--tw-scale-x:.98;--tw-scale-y:.98;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:-translate-y-2{--tw-translate-y:-.5rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-110{--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (width>=640px){.sm\:mb-32{margin-bottom:8rem}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:gap-24{gap:6rem}.sm\:p-10{padding:2.5rem}.sm\:p-16{padding:4rem}.sm\:px-12{padding-left:3rem;padding-right:3rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pb-12{padding-bottom:3rem}.sm\:pt-24{padding-top:6rem}.sm\:text-\[14px\]{font-size:14px}.sm\:text-\[15px\]{font-size:15px}.sm\:text-\[17px\]{font-size:17px}.sm\:text-\[18px\]{font-size:18px}.sm\:text-\[20px\]{font-size:20px}.sm\:text-\[30px\]{font-size:30px}.sm\:text-\[48px\]{font-size:48px}}@media (width>=768px){.md\:ml-auto{margin-left:auto}.md\:flex{display:flex}.md\:h-auto{height:auto}.md\:w-1\/2{width:50%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-end{align-items:flex-end}.md\:justify-between{justify-content:space-between}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:text-right{text-align:right}.md\:text-\[36px\]{font-size:36px}}@media (width>=1024px){.lg\:gap-8{gap:2rem}.lg\:text-\[42px\]{font-size:42px}}.language-select-layout{min-height:100dvh;padding:var(--spacing-xl);font-family:var(--font-main);background:linear-gradient(-45deg,#ff2e88,#7c4dff,#22e4ff,#ff2e88) 0 0/400% 400%;justify-content:center;align-items:center;animation:15s infinite gradientBG;display:flex}@keyframes gradientBG{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.language-select-container{-webkit-backdrop-filter:blur(20px);text-align:center;background:#120f1eeb;border:1px solid #fff6;border-radius:24px;flex-direction:column;align-items:center;width:100%;max-width:540px;padding:3rem 2.5rem;display:flex;position:relative;overflow:hidden;box-shadow:0 20px 40px #0006,inset 0 1px 3px #ffffff14}.hero-section{flex-direction:column;align-items:center;margin-bottom:2rem;display:flex}.hero-badge{background:var(--primary-container);color:var(--primary-dark);letter-spacing:.05em;text-transform:uppercase;border-radius:20px;margin-bottom:1.5rem;padding:.4rem 1rem;font-size:.8rem;font-weight:700;box-shadow:0 4px 10px #0000000d}.language-title{font-family:var(--font-heading);background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);-webkit-text-fill-color:transparent;letter-spacing:-.03em;-webkit-background-clip:text;margin:0 0 .5rem;font-size:3.2rem;font-weight:900;line-height:1.1}.hero-subtitle{color:var(--on-surface);margin:.5rem 0 .2rem;font-size:1.15rem;font-weight:700}.hero-subtitle-ko{color:var(--text-secondary);margin:0;font-size:1rem;font-weight:500}.divider{background:linear-gradient(90deg,#0000,#0000001a,#0000);width:100%;height:1px;margin:1.5rem 0}.prompt-section{margin-bottom:1.5rem}.prompt-title{color:var(--on-surface);margin:0 0 .25rem;font-size:1.4rem;font-weight:800}.prompt-subtitle{color:var(--text-secondary);margin:0;font-size:.95rem}.language-options{flex-direction:column;gap:1rem;width:100%;display:flex}.language-btn{background:var(--surface);cursor:pointer;text-align:left;border:2px solid #0000;border-radius:16px;justify-content:space-between;align-items:center;width:100%;padding:1.25rem 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 6px #00000005}.language-btn:hover{border-color:var(--primary);background:var(--surface-bright);transform:translateY(-4px)scale(1.02);box-shadow:0 12px 24px #ff2e882e}.language-btn:active{transform:translateY(0)scale(.98)}.btn-content{align-items:center;display:flex}.lang-icon{margin-right:1.25rem;font-size:2.2rem;transition:transform .3s}.language-btn:hover .lang-icon{transform:scale(1.1)rotate(5deg)}.lang-text-group{flex-direction:column;display:flex}.lang-primary{color:var(--on-surface);margin-bottom:.2rem;font-size:1.15rem;font-weight:700}.lang-secondary{color:var(--text-secondary);font-size:.85rem;font-weight:500}.btn-arrow{color:var(--primary);opacity:0;font-size:1.5rem;transition:all .3s;transform:translate(-10px)}.language-btn:hover .btn-arrow{opacity:1;transform:translate(0)}@media (width<=480px){.language-select-container{padding:2.5rem 1.5rem}.language-title{font-size:2.5rem}.hero-subtitle{font-size:1rem}.prompt-title{font-size:1.2rem}}.leaderboard-modal{background-color:var(--surface);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-xl);flex-direction:column;width:90%;max-width:500px;max-height:80vh;display:flex;position:relative;overflow-y:auto}.leaderboard-modal h2{font-family:var(--font-heading);text-align:center;color:#ff9800;margin-bottom:var(--spacing-lg);font-size:28px}.loading-text,.empty-text{text-align:center;color:var(--outline);padding:var(--spacing-xl)}.leaderboard-list{gap:var(--spacing-sm);flex-direction:column;display:flex}.leaderboard-item{background-color:var(--surface-dim);padding:var(--spacing-md);border-radius:var(--radius-lg);align-items:center;gap:var(--spacing-md);display:flex}.leaderboard-item.rank-1{background:linear-gradient(135deg,#fff3e0,#ffe0b2);border:2px solid #ffb300}.leaderboard-item.rank-2{background:linear-gradient(135deg,#f5f5f5,#e0e0e0)}.leaderboard-item.rank-3{background:linear-gradient(135deg,#efebe9,#d7ccc8)}.rank{font-family:var(--font-heading);color:var(--outline);width:40px;font-size:24px;font-weight:900}.rank-1 .rank{color:#ffb300}.rank-2 .rank{color:#9e9e9e}.rank-3 .rank{color:#8d6e63}.player-info{flex-direction:column;flex:1;display:flex}.player-name{color:var(--on-surface);font-size:16px;font-weight:700}.player-stats{color:var(--outline-variant);font-size:12px}.player-score{font-family:var(--font-heading);color:var(--primary);font-size:24px;font-weight:900}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.myinfo-modal-content{background-color:var(--surface);border-radius:var(--radius-xl);padding:var(--spacing-2xl);width:90%;max-width:400px;box-shadow:var(--shadow-xl);flex-direction:column;align-items:center;animation:.3s cubic-bezier(.175,.885,.32,1.275) slideUp;display:flex;position:relative}.myinfo-modal-content h2{font-family:var(--font-heading);color:var(--on-surface);margin-bottom:var(--spacing-xl);font-size:24px}.close-button{color:var(--outline);cursor:pointer;background:0 0;border:none;padding:4px;font-size:28px;line-height:1;transition:color .2s;position:absolute;top:16px;right:16px}.close-button:hover{color:var(--error)}.myinfo-profile-section{width:100%;margin-bottom:var(--spacing-2xl);flex-direction:column;align-items:center;display:flex}.myinfo-avatar{-o-object-fit:cover;object-fit:cover;border:4px solid var(--primary-container);width:80px;height:80px;margin-bottom:var(--spacing-md);border-radius:50%}.myinfo-avatar-placeholder{background-color:var(--primary);width:80px;height:80px;color:var(--on-primary);margin-bottom:var(--spacing-md);border:4px solid var(--primary-container);border-radius:50%;justify-content:center;align-items:center;font-size:32px;font-weight:800;display:flex}.myinfo-name{color:var(--on-surface);margin:0 0 4px;font-size:22px;font-weight:700}.myinfo-email{color:var(--text-secondary);margin:0;font-size:14px}.myinfo-actions{width:100%}.logout-btn-large{background-color:var(--surface-dim);width:100%;color:var(--error);border-radius:var(--radius-md);cursor:pointer;border:2px solid #0000;padding:14px;font-size:16px;font-weight:700;transition:all .2s}.logout-btn-large:hover{background-color:var(--error-container);border-color:var(--error)}@media (width<=480px){.myinfo-modal-content{padding:var(--spacing-xl)}}.keyboard-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10000;background:#0009;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.keyboard-modal-content{background:var(--surface);border:1px solid #ffffff1a;border-radius:1.5rem;width:90%;max-width:500px;max-height:90vh;padding:2rem;overflow-y:auto;box-shadow:0 20px 40px #0003}.keyboard-modal-content h2{color:var(--text-primary);text-align:center;margin-bottom:1.5rem;font-size:1.5rem}.os-section{background:var(--surface-dim);border-radius:1rem;margin-bottom:1rem;padding:1rem 1.5rem}.os-section h3{color:var(--primary);align-items:center;gap:.5rem;margin-bottom:.8rem;font-size:1.1rem;display:flex}.os-section ol,.os-section ul{color:var(--text-secondary);margin:0;padding-left:1.5rem;font-size:.95rem;line-height:1.5}.os-section li{margin-bottom:.5rem}.os-section strong{color:var(--text-primary)}.os-section kbd{background:var(--bg);color:var(--primary);border:1px solid #ffffff1a;border-radius:.3rem;padding:.2rem .4rem;font-family:monospace;font-size:.85rem}.close-btn{background:var(--primary);width:100%;color:var(--bg);cursor:pointer;border:none;border-radius:1rem;margin-top:1rem;padding:1rem;font-size:1.1rem;font-weight:700;transition:opacity .2s}.close-btn:hover{opacity:.9}.game-header{padding:var(--spacing-lg) var(--spacing-xl);-webkit-backdrop-filter:blur(20px);border-bottom:var(--glass-border);z-index:100;background:#080a10b3;justify-content:space-between;align-items:center;width:100%;display:flex;position:sticky;top:0}.logo-area h1{font-family:var(--font-heading);background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-text-fill-color:transparent;letter-spacing:-1px;filter:drop-shadow(0 2px 8px #ff2e5433);white-space:nowrap;-webkit-background-clip:text;margin:0;font-size:32px;font-weight:800}.stats-area{align-items:center;gap:var(--spacing-xl);display:flex}.score-display{font-family:var(--font-heading);color:var(--on-surface);gap:var(--spacing-xs);border-radius:var(--radius-full);border:var(--glass-border);background:#ffffff0d;padding:6px 14px;font-size:20px;display:flex}.hearts-display{gap:var(--spacing-xs);display:flex}.heart-icon{animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn}@keyframes popIn{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.header-actions{align-items:center;gap:var(--spacing-md);margin-left:auto;display:flex}.leaderboard-btn{border:var(--glass-border);cursor:pointer;background-color:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;transition:all .3s;display:flex}.leaderboard-btn:hover{box-shadow:var(--secondary-glow);background-color:#ffffff26;transform:scale(1.1)rotate(10deg)}.login-btn{background:linear-gradient(135deg, var(--primary), var(--primary-fixed-variant));color:var(--pure-white);border-radius:var(--radius-full);cursor:pointer;box-shadow:var(--primary-glow);border:none;padding:10px 24px;font-size:15px;font-weight:700;transition:all .3s}.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ff2e5499}.user-profile{align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-full);border:var(--glass-border);background-color:#ffffff0d;padding:6px 16px 6px 6px;display:flex}.user-avatar{-o-object-fit:cover;object-fit:cover;border:1px solid #fff3;border-radius:50%;width:32px;height:32px}.user-avatar-placeholder{background:linear-gradient(135deg, var(--secondary), var(--cloud-blue));width:32px;height:32px;color:var(--on-secondary);border-radius:50%;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.user-name{color:var(--on-surface);font-size:14px;font-weight:700}.logout-btn{color:var(--on-surface-variant);cursor:pointer;background:0 0;border:none;margin-left:8px;font-size:12px;text-decoration:none;transition:color .2s}.logout-btn:hover{color:var(--primary);text-decoration:underline}@media (width<=768px){.game-header{padding:var(--spacing-sm) var(--spacing-md);flex-wrap:wrap;gap:8px}.logo-area h1{white-space:nowrap;font-size:20px}.score-display{padding:4px 8px;font-size:12px}.stats-area{gap:var(--spacing-sm);flex-wrap:wrap}.leaderboard-btn{width:32px;height:32px;font-size:14px}.header-actions{flex-wrap:wrap;gap:4px}}.legal-consent{text-align:left;flex-direction:column;gap:.5rem;margin:.25rem 0 1rem;display:flex}.legal-consent-row{cursor:pointer;color:#ffffffb8;align-items:flex-start;gap:.55rem;font-size:.82rem;line-height:1.5;display:flex}.legal-consent-row.optional{color:#ffffff80}.legal-consent-row input[type=checkbox]{accent-color:#ff2d78;cursor:pointer;flex-shrink:0;width:1.05rem;height:1.05rem;margin-top:.15rem}.legal-consent-link{color:#ff6aa0;text-underline-offset:2px;text-decoration:underline}.legal-consent-link:hover{color:#ff9cc2}@media (prefers-color-scheme:light){.legal-consent-on-light .legal-consent-row{color:#4a4556}.legal-consent-on-light .legal-consent-row.optional{color:#6a6478}.legal-consent-on-light .legal-consent-link{color:#d61f66}}.wiz{flex-direction:column;width:100%;max-width:480px;min-height:70dvh;margin:0 auto;padding:1rem 1.25rem 2rem;display:flex}.wiz-top{align-items:center;gap:.75rem;margin-bottom:1.75rem;display:flex}.wiz-back{background:var(--surface);border:1px solid var(--outline-variant);color:var(--on-surface);cursor:pointer;border-radius:50%;flex-shrink:0;width:38px;height:38px;font-size:1.1rem}.wiz-progress{background:var(--surface);border-radius:999px;flex:1;height:10px;overflow:hidden}.wiz-progress-fill{background:linear-gradient(90deg,#ff2e88,#7c4dff);border-radius:999px;height:100%;transition:width .35s cubic-bezier(.4,0,.2,1)}.wiz-count{opacity:.55;flex-shrink:0;font-size:.8rem;font-weight:700}.wiz-step{flex-direction:column;flex:1;animation:.3s wizIn;display:flex}@keyframes wizIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}.wiz-title{letter-spacing:-.02em;text-wrap:balance;margin:0 0 1.25rem;font-size:1.45rem;font-weight:900}.wiz-options{flex-direction:column;gap:.7rem;display:flex}.wiz-card{background:var(--surface);border:2px solid var(--outline-variant);color:var(--on-surface);cursor:pointer;text-align:left;border-radius:1rem;align-items:center;gap:.9rem;padding:1.05rem 1.15rem;font-size:1.05rem;font-weight:700;transition:border-color .15s,background .15s,transform .1s;display:flex}.wiz-card:active{transform:scale(.98)}.wiz-card.selected{border-color:var(--primary);background:var(--primary-container);box-shadow:0 0 18px #ff2e8840}.wiz-icon{font-size:1.6rem}.wiz-label{flex:1}.wiz-sub{opacity:.55;margin-top:3px;font-size:.78rem;font-weight:600;line-height:1.45;display:block}.wiz-check{border:2px solid var(--outline);color:#0000;border-radius:50%;flex-shrink:0;place-items:center;width:26px;height:26px;font-size:.85rem;transition:all .15s;display:grid}.wiz-check.on{background:var(--primary);border-color:var(--primary);color:#fff}.wiz-next,.wiz-start{cursor:pointer;color:#fff;background:linear-gradient(90deg,#ff2e88,#7c4dff);border:none;border-radius:999px;margin-top:1.5rem;padding:1rem;font-size:1.05rem;font-weight:800;box-shadow:0 0 22px #ff2e8859}.wiz-next:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}.wiz-ready{text-align:center;justify-content:center;align-items:center;gap:.5rem}.wiz-ready-icon{font-size:3.2rem}.wiz-summary{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.5rem 0 .75rem;display:flex}.wiz-chip{background:var(--surface);border:1px solid var(--outline-variant);border-radius:999px;padding:.4rem .85rem;font-size:.88rem;font-weight:700}.wiz-ready .wiz-start{width:100%;max-width:340px}.home-layout{background-color:#0000;flex-direction:column;align-items:center;width:100%;min-height:100dvh;display:flex}.dashboard-container{width:100%;max-width:960px;padding:var(--spacing-xl) var(--spacing-lg);gap:var(--spacing-2xl);flex-direction:column;display:flex}.login-prompt{background:var(--surface);-webkit-backdrop-filter:blur(16px);border:var(--glass-border);border-radius:var(--radius-2xl);text-align:center;box-shadow:var(--shadow-xl);margin-top:5vh;padding:60px 40px;animation:.6s fadeIn}.login-prompt h2{font-family:var(--font-heading);background:linear-gradient(135deg, var(--on-surface), var(--secondary));-webkit-text-fill-color:transparent;margin-bottom:var(--spacing-sm);-webkit-background-clip:text;font-size:36px;font-weight:800}.login-prompt p{color:var(--on-surface-variant);margin-bottom:var(--spacing-xl);font-size:16px}.login-btn{justify-content:center;align-items:center;gap:var(--spacing-sm);border-radius:var(--radius-full);border:var(--glass-border);color:var(--on-surface);box-shadow:var(--shadow-md);cursor:pointer;background:#ffffff14;padding:14px 32px;font-size:18px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex}.login-btn:hover{background:#ffffff26;border-color:#fff3;transform:translateY(-2px);box-shadow:0 8px 24px #ffffff1a}.login-btn:active{transform:translateY(1px)}.user-greeting{padding:0 var(--spacing-sm);border-radius:var(--radius-md);border:var(--glass-border);background:#ffffff05;justify-content:space-between;align-items:center;padding:12px 18px;display:flex}.user-greeting span{color:var(--secondary);text-shadow:0 0 10px #00e6c44d;font-size:18px;font-weight:700}.logout-text-btn{color:var(--on-surface-variant);background:0 0;font-size:14px;text-decoration:none;transition:color .2s}.logout-text-btn:hover{color:var(--primary);text-decoration:underline}.section-title{font-family:var(--font-heading);color:var(--on-surface);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-xs);align-items:center;gap:10px;font-size:26px;font-weight:800;display:flex}.section-title:before{content:"";background:linear-gradient(to bottom, var(--primary), var(--secondary));border-radius:var(--radius-full);width:4px;height:24px;display:inline-block}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background-color:#06080ed9;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-2xl);text-align:center;background-color:#111422;border:1px solid #ffffff1a;width:90%;max-width:420px;padding:48px 32px;animation:.3s cubic-bezier(.175,.885,.32,1.275) popUp;position:relative;box-shadow:0 24px 64px #0009}.close-modal-btn{color:var(--on-surface-variant);cursor:pointer;background:0 0;border:none;font-size:22px;transition:color .2s;position:absolute;top:20px;right:20px}.close-modal-btn:hover{color:var(--primary)}.modal-content h2{font-family:var(--font-heading);color:var(--on-surface);margin-bottom:var(--spacing-xs);font-size:28px;font-weight:800}.modal-desc{color:var(--on-surface-variant);margin-bottom:var(--spacing-xl);font-size:14px}.modal-login{background:#ffffff12;justify-content:center;width:100%}.modal-login:hover{box-shadow:var(--primary-glow);background:#ffffff1f}.divider{margin:var(--spacing-lg) 0;color:var(--on-surface-variant);align-items:center;display:flex}.divider:before,.divider:after{content:"";border-bottom:1px solid #ffffff14;flex:1}.divider span{padding:0 var(--spacing-md);font-size:12px;font-weight:700}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popUp{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media (width<=768px){.dashboard-container{padding:var(--spacing-md);gap:var(--spacing-xl)}.login-prompt{padding:40px 20px}.login-prompt h2{font-size:28px}.section-title{font-size:20px}}.brand-hero{background:var(--surface-container-low);border:1px solid var(--outline-variant);cursor:pointer;border-radius:20px;margin-bottom:2rem;padding:2.4rem 2.2rem;transition:transform .2s,box-shadow .25s;position:relative;overflow:hidden}.brand-hero:before,.brand-hero:after{content:"";filter:blur(90px);opacity:.28;pointer-events:none;border-radius:50%;width:340px;height:340px;position:absolute}.brand-hero:before{background:#ff2e88;top:-160px;right:-60px}.brand-hero:after{background:#22e4ff;bottom:-200px;left:-100px}.brand-hero:hover{box-shadow:var(--primary-glow);transform:translateY(-3px)}.brand-hero-jamo{color:#0000;-webkit-text-stroke:1.5px #ffffff17;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:13rem;font-weight:900;line-height:1;position:absolute;top:-3.2rem;right:.5rem}.brand-hero-jamo.two{-webkit-text-stroke-color:#ffffff0f;font-size:9rem;top:auto;bottom:-2.8rem;right:12rem}.brand-hero-inner{z-index:1;position:relative}.brand-hero-eyebrow{letter-spacing:.28em;color:var(--secondary);margin-bottom:.8rem;font-size:.72rem;font-weight:800}.brand-hero-title{letter-spacing:-.02em;background:linear-gradient(90deg,#fff 15%,#ff2e88 55%,#7c4dff 95%);color:#0000;text-wrap:balance;-webkit-background-clip:text;background-clip:text;max-width:22ch;margin:0 0 .6rem;font-size:1.9rem;font-weight:900;line-height:1.2}.brand-hero-desc{opacity:.85;max-width:52ch;margin:0 0 .7rem;font-size:1rem}.brand-hero-story{opacity:.5;max-width:52ch;margin:0 0 1.4rem;font-size:.85rem;font-style:italic}.brand-hero-cta{color:#fff;background:linear-gradient(90deg,#ff2e88,#7c4dff);border-radius:999px;padding:.8rem 1.7rem;font-size:.98rem;font-weight:800;display:inline-block;box-shadow:0 0 24px #ff2e8866}@media (width<=600px){.brand-hero{padding:1.8rem 1.4rem}.brand-hero-title{font-size:1.45rem}.brand-hero-jamo{font-size:8.5rem;right:-1.5rem}.brand-hero-jamo.two{display:none}}.home-main-card{background:linear-gradient(var(--surface-container-low), var(--surface-container-low)) padding-box, linear-gradient(120deg, #ff2e88, #7c4dff, #22e4ff) border-box!important;border:2px solid #0000!important}.kc-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;display:grid}.kc-card{background:var(--surface);border:1px solid var(--outline-variant);cursor:pointer;border-radius:1rem;padding:1.2rem 1.1rem;transition:transform .18s,border-color .2s,box-shadow .25s;position:relative}.kc-card:hover{border-color:#ff2e8880;transform:translateY(-3px);box-shadow:0 8px 26px #ff2e882e}.kc-card.lyrics{background:linear-gradient(var(--surface-container-low), var(--surface-container-low)) padding-box, linear-gradient(120deg, #ff2e88, #7c4dff, #22e4ff) border-box;border:1px solid #0000}.kc-icon{font-size:1.7rem;display:block}.kc-card h4{color:var(--on-surface);margin:.55rem 0 .25rem;font-size:1rem;font-weight:800}.kc-card p{color:var(--on-surface-variant);margin:0;font-size:.8rem;line-height:1.5}.roleplay-banner{cursor:pointer;color:#fff;background:linear-gradient(135deg,#4ade80,#3b82f6);border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:2rem;padding:2rem;transition:transform .2s,box-shadow .2s;display:flex}.roleplay-banner:hover{transform:translateY(-4px);box-shadow:0 10px 25px #3b82f666}.hangul-banner{background:linear-gradient(135deg,#8b5cf6,#6366f1)}.hangul-banner:hover{box-shadow:0 10px 25px #8b5cf666}.hangul-banner .roleplay-banner-btn{color:#6366f1}.lesson-banner{background:linear-gradient(135deg,#f59e0b,#ef4444)}.lesson-banner:hover{box-shadow:0 10px 25px #ef444466}.lesson-banner .roleplay-banner-btn{color:#ef4444}.roleplay-banner-content h2{text-shadow:0 2px 4px #0003;margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.roleplay-banner-content p{opacity:.9;font-size:1rem}.roleplay-banner-btn{color:#3b82f6;white-space:nowrap;background:#fff;border-radius:99px;padding:.75rem 1.5rem;font-weight:700;box-shadow:0 4px 6px #0000001a}@media (width<=600px){.roleplay-banner{text-align:center;flex-direction:column;gap:1rem;padding:1.5rem}}@media (width>=769px){.setup-card{max-width:850px}}@media (width<=768px){.setup-container{align-items:flex-start;padding:12px}.setup-sections-wrapper{flex-direction:column;gap:8px}.setup-card{gap:8px;padding:12px 16px}.setup-card h2{margin-bottom:0;font-size:20px}.setup-section{gap:4px}.setup-section h3{margin:0;font-size:13px}.setup-grid{gap:8px}.setup-btn{color:#333;flex-direction:row;gap:8px;min-width:calc(50% - 4px);padding:10px 8px;font-size:14px;font-weight:800}.setup-btn.active{color:#fff}.setup-btn span[style*=font-size]{font-size:18px!important}.start-play-btn{margin-top:12px;padding:14px 20px;font-size:18px;box-shadow:0 6px #820b1e}}.ad-modal-overlay{z-index:9999;background-color:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.ad-modal-content{background:var(--bg-card);text-align:center;border:1px solid var(--border-color);border-radius:12px;width:90%;max-width:400px;padding:30px;box-shadow:0 10px 25px #00000080}.ad-modal-content h2{color:var(--text-primary);margin-top:0;font-size:1.2rem}.ad-video-mock{background:#000;border:2px dashed #444;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;height:200px;margin:20px 0;display:flex}.ad-video-mock p{color:#fff;font-weight:700}.ad-spinner{border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:30px;height:30px;margin-top:15px;animation:1s ease-in-out infinite spin}.ad-footer{justify-content:center;align-items:center;height:50px;display:flex}.ad-countdown{color:var(--text-muted);font-size:1.1rem;font-weight:700}.ad-close-btn{background-color:var(--text-secondary);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:1.1rem;font-weight:700;transition:all .2s}.ad-close-btn:hover{background-color:var(--text-primary);transform:translateY(-2px)}.legal-footer{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 0;font-size:.8rem;display:flex}.legal-footer a{opacity:.7;text-decoration:none}.legal-footer a:hover{opacity:1;text-underline-offset:2px;text-decoration:underline}.legal-footer .sep{opacity:.35}.legal-footer.dark a{color:#ffffffb8}.legal-footer.dark .sep{color:#fff6}.legal-footer.light a{color:#4a4556}.legal-footer.light .sep{color:#948da6}.sub-modal-overlay{z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.sub-modal-content{background:var(--bg-card,#1a1a1a);text-align:center;color:#fff;border:1px solid var(--border-color,#333);border-radius:16px;width:90%;max-width:600px;padding:30px;box-shadow:0 10px 40px #0009}.sub-modal-content h2{color:#f1c40f;margin-top:0;margin-bottom:10px;font-size:1.8rem}.sub-warning{color:#e74c3c;background:#e74c3c1a;border-radius:8px;margin-bottom:15px;padding:10px;font-weight:700}.sub-desc{color:#aaa;margin-bottom:25px}.sub-tiers{gap:20px;margin-bottom:25px;display:flex}@media (width<=600px){.sub-tiers{flex-direction:column}}.sub-tier-card{background:#ffffff0d;border:1px solid #444;border-radius:12px;flex-direction:column;flex:1;padding:20px;display:flex;position:relative}.premium-card{background:#f1c40f14;border:2px solid #f1c40f;transform:scale(1.02)}.sub-badge{color:#000;background:#f1c40f;border-radius:12px;padding:4px 12px;font-size:.8rem;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.sub-tier-card h3{margin:0;font-size:1.2rem}.sub-price{color:#fff;margin:10px 0;font-size:1.5rem;font-weight:700}.sub-price span{color:#888;font-size:.9rem}.sub-tier-card ul{text-align:left;flex:1;margin:15px 0;padding:0;list-style:none}.sub-tier-card li{color:#ddd;margin-bottom:8px;font-size:.9rem}.sub-tier-card li.disabled{color:#666;text-decoration:line-through}.sub-btn{cursor:pointer;border:none;border-radius:8px;width:100%;padding:12px;font-size:1rem;font-weight:700;transition:all .2s}.sub-btn:disabled{opacity:.5;cursor:not-allowed}.sub-btn.basic{color:#fff;background:#444}.sub-btn.basic:hover:not(:disabled){background:#555}.sub-btn.premium{color:#000;background:#f1c40f}.sub-btn.premium:hover:not(:disabled){background:gold;transform:translateY(-2px);box-shadow:0 4px 15px #f1c40f66}.sub-close{color:#888;cursor:pointer;background:0 0;border:none;font-size:.9rem;text-decoration:underline}.sub-close:hover{color:#fff}.flashcard{background-color:var(--surface-container-high);border:4px solid var(--primary);border-radius:var(--radius-xl);width:100%;max-width:600px;min-height:300px;padding:var(--spacing-xl);flex-direction:column;justify-content:center;align-items:center;margin:0 auto;transition:all .2s;display:flex;position:relative;box-shadow:0 12px 32px #ff2e8826}.speak-btn{top:var(--spacing-lg);right:var(--spacing-lg);color:var(--primary);background:0 0;transition:transform .1s;position:absolute}.speak-btn:hover{transform:scale(1.1)}.speak-btn:active{transform:scale(.9)}.multi-stage-display{gap:var(--spacing-md);width:100%;margin-top:var(--spacing-sm);flex-direction:column;display:flex}.text-line{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);background-color:var(--surface-container);border:2px solid #0000;justify-content:space-between;align-items:center;transition:all .2s;display:flex}.word-display{font-family:var(--font-heading);text-align:center;margin-bottom:var(--spacing-md);font-size:56px;font-weight:800;color:var(--dark-navy)!important}.romaja-display{font-family:var(--font-body);text-align:center;margin-bottom:var(--spacing-sm);letter-spacing:2px;font-size:24px;font-weight:500;color:var(--dark-navy)!important}.meaning-display{font-family:var(--font-body);text-align:center;font-size:20px;font-weight:400;color:var(--dark-navy)!important}.stage-label{font-family:var(--font-body);color:var(--outline);text-transform:uppercase;text-align:left;width:120px;font-size:14px;font-weight:700}.stage-content{text-align:right;font-family:var(--font-heading);word-break:keep-all;white-space:pre-wrap;text-wrap:balance;word-spacing:.3em;flex:1;font-size:28px;font-weight:800;line-height:1.3}.stage-romaja .stage-content{font-size:22px;font-weight:700}.active-stage{background-color:var(--surface-container-highest);border-color:var(--primary);transform:scale(1.02);box-shadow:0 4px 14px #ff2e8833}.active-stage .stage-label,.active-stage .current-typing{color:var(--primary)}.completed-stage{border-color:var(--secondary);background-color:#22e4ff12}.completed-stage .stage-label{color:var(--secondary)}.completed-stage .completed-text{color:var(--on-surface)}.pending-text{color:var(--on-surface-variant)}.active-stage .pending-text{color:var(--on-surface);font-weight:700}.cursor-blink{color:var(--primary);font-weight:300;animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.shake-error{border-color:var(--error);background-color:var(--error-container);animation:.4s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}@media (width<=768px),(height<=700px){.flashcard{min-height:auto;padding:var(--spacing-md);border-width:3px}.speak-btn{top:var(--spacing-sm);right:var(--spacing-sm)}.text-line{padding:var(--spacing-sm) var(--spacing-md);flex-direction:column;align-items:flex-start;gap:4px}.stage-label{width:100%;font-size:12px}.stage-content{text-align:left;width:100%;font-size:20px}.stage-romaja .stage-content{font-size:16px}}.keyboard-container{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-lg);background-color:var(--surface-container);border-radius:var(--radius-lg);margin-top:var(--spacing-xl);flex-direction:column;display:flex;box-shadow:0 8px 24px #8b5a2b14}.keyboard-row{gap:var(--spacing-xs);justify-content:center;display:flex}.keyboard-row:nth-child(2){margin-left:15px}.keyboard-row:nth-child(3){margin-left:30px}.key-btn{background-color:var(--pure-white);border:2px solid var(--hanok-wood);border-radius:var(--radius-md);width:40px;height:44px;font-family:var(--font-heading);color:var(--on-surface);justify-content:center;align-items:center;font-size:16px;font-weight:700;transition:all .1s;display:flex;box-shadow:0 4px #8b5a2b66}.key-btn.target{background-color:var(--cloud-blue);color:var(--pure-white);border-color:var(--primary);box-shadow:0 4px 0px var(--primary), 0 0 12px var(--cloud-blue)}.key-btn.hit{background-color:var(--secondary);border-color:var(--secondary-container);color:var(--pure-white);box-shadow:0 0 20px var(--secondary);transform:translateY(4px)}.key-btn.miss{background-color:var(--error);border-color:var(--error-container);color:var(--pure-white);box-shadow:0 0 20px var(--error);transform:translateY(4px)}.key-btn.active-pressed:not(.hit):not(.miss){background-color:var(--surface-dim);transform:translateY(4px);box-shadow:0 0 #8b5a2b66}@media (width<=768px){.keyboard-container{display:none}}.time-bar-container{background-color:var(--surface-container-high);border-radius:var(--radius-full);width:100%;height:16px;margin-bottom:var(--spacing-lg);border:2px solid var(--surface-dim);overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.time-bar-fill{border-radius:var(--radius-full);height:100%;transition:width 50ms linear,background-color .3s}.time-safe{background-color:var(--secondary)}.time-warning{background-color:var(--tertiary)}.time-danger{background-color:var(--error);animation:.5s infinite alternate pulse-danger}@keyframes pulse-danger{0%{opacity:1}to{opacity:.5}}.word-mode-layout{background-color:var(--background);flex-direction:column;height:100dvh;display:flex;overflow:hidden}@media (width<=768px){.game-stage{padding:var(--spacing-sm);gap:var(--spacing-sm)}.character-left,.character-right{display:none}.center-play-area{gap:var(--spacing-sm);margin-top:10px}.typing-display{padding:var(--spacing-sm) var(--spacing-md)!important;font-size:28px!important}.global-timer-display{padding:6px 16px!important;font-size:20px!important}}@media (width<=1024px){.game-stage{flex-direction:column}.character-left,.character-right{display:none}}@media (width<=768px),(height<=700px){.game-stage{padding:var(--spacing-sm);justify-content:flex-start;gap:var(--spacing-sm)}.typing-display{min-height:50px;padding:var(--spacing-sm);font-size:24px}.center-play-area{gap:var(--spacing-sm);width:100%}.global-timer-display{margin-bottom:2px;font-size:20px}.mobile-tap-guide{color:#fff;z-index:100;pointer-events:none;white-space:nowrap;background:#b7102ae6;border-radius:30px;padding:16px 24px;font-size:18px;font-weight:700;animation:1.5s infinite pulseTap;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 12px #0000004d}}@keyframes pulseTap{0%{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.05)}to{transform:translate(-50%,-50%)scale(1)}}.game-result-overlay{-webkit-backdrop-filter:blur(8px);z-index:9999;background-color:#0009;justify-content:center;align-items:center;width:100%;height:100dvh;min-height:100vh;padding:20px;animation:.4s cubic-bezier(.4,0,.2,1) fadeIn;display:flex;position:fixed;top:0;left:0}.result-signup-cta{border-radius:var(--radius-md,12px);background:linear-gradient(135deg, var(--primary,#ff6b81), var(--primary-fixed-variant,#ff4757));width:100%;color:var(--on-primary,#fff);box-shadow:var(--primary-glow,0 0 15px #ff6b8166);padding:14px 16px;font-size:.95rem;font-weight:800;animation:.5s fadeIn}.result-signup-cta:hover{filter:brightness(1.05);transform:translateY(-2px)}.game-result-card{background-color:var(--surface-container,#fdfbf7);border:4px solid var(--primary-container,#ffd8d8);border-radius:24px;flex-direction:column;gap:24px;width:100%;max-width:400px;max-height:90dvh;padding:32px 24px;animation:.5s cubic-bezier(.34,1.56,.64,1) popIn;display:flex;overflow-y:auto;box-shadow:0 20px 40px #0003}.result-header{text-align:center}.result-header h2{font-family:var(--font-heading,"Quicksand", sans-serif);color:var(--primary,#e4572e);margin:0 0 8px;font-size:1.8rem}.subtitle{color:var(--on-surface-variant,#79746e);margin:0;font-size:.95rem}.custom-mode-info{text-align:center;border:2px dashed var(--primary-container,#ffd8d8);background:linear-gradient(135deg,#fdf3f0 0%,#fffbf8 100%);border-radius:16px;flex-direction:column;align-items:center;gap:8px;padding:20px;display:flex}.custom-badge{background-color:var(--primary,#e4572e);color:#fff;letter-spacing:1px;border-radius:20px;padding:4px 12px;font-size:.8rem;font-weight:700}.custom-title{color:var(--on-surface,#4a3b32);word-break:break-word;margin:0;font-size:1.4rem}.custom-chars{color:var(--secondary,#4caf50);margin:0;font-size:1rem;font-weight:600}.stats-grid{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.stat-box{background-color:var(--surface);min-width:100px;box-shadow:var(--shadow-sm);border:1px solid var(--outline-variant);border-radius:16px;flex-direction:column;flex:1;align-items:center;gap:8px;padding:16px 12px;display:flex}.stat-box.score-box{background-color:#ffb65c1a;border-color:#ffb65c4d}.stat-box.accuracy-box{background-color:#22e4ff14;border-color:#22e4ff40}.stat-label{color:var(--on-surface-variant,#79746e);letter-spacing:1px;font-size:.75rem;font-weight:700}.stat-value{color:var(--on-surface,#4a3b32);font-size:1.8rem;font-weight:800;font-family:var(--font-heading,"Quicksand", sans-serif)}.stat-value .unit{margin-left:2px;font-size:1rem}.result-actions{flex-direction:column;gap:12px;margin-top:8px;display:flex}.share-btn{background-color:var(--cloud-blue,#5dade2);color:#fff;cursor:pointer;border:none;border-radius:16px;padding:16px;font-size:1.1rem;font-weight:700;transition:all .2s;box-shadow:0 4px #2980b980}.share-btn:active{transform:translateY(4px);box-shadow:0 0 #2980b980}.nav-buttons{gap:12px;display:flex}.nav-buttons button{cursor:pointer;border:2px solid #0000;border-radius:16px;flex:1;padding:14px;font-size:1rem;font-weight:700;transition:all .2s}.retry-btn{background-color:var(--primary,#e4572e);color:#fff;box-shadow:0 4px #b83b1780}.retry-btn:active{transform:translateY(4px);box-shadow:0 0 #b83b1780}.home-btn{background-color:var(--pure-white,#fff);color:var(--on-surface,#4a3b32);border-color:var(--hanok-wood,#8b5a2b);box-shadow:0 4px #8b5a2b66}.home-btn:active{transform:translateY(4px);box-shadow:0 0 #8b5a2b66}.word-setup-layout{background:linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));flex-direction:column;min-height:100vh;display:flex}.setup-container{padding:var(--spacing-xl);flex:1;justify-content:center;align-items:center;display:flex}.setup-card{background-color:var(--surface);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-xl);gap:var(--spacing-xl);flex-direction:column;width:100%;max-width:600px;display:flex}.setup-card h2{font-family:var(--font-heading);color:var(--primary);text-align:center;margin-bottom:var(--spacing-sm);font-size:32px}.setup-section{gap:var(--spacing-sm);flex-direction:column;display:flex}.setup-section h3{font-family:var(--font-heading);color:var(--on-surface);font-size:18px}.setup-grid{gap:var(--spacing-sm);flex-wrap:wrap;display:flex}.setup-btn{background-color:var(--surface-dim);border-radius:var(--radius-lg);padding:var(--spacing-md);font-family:var(--font-heading);color:var(--outline);cursor:pointer;border:2px solid #0000;flex-direction:column;flex:1;align-items:center;gap:8px;min-width:100px;font-size:16px;font-weight:700;transition:all .2s;display:flex}.setup-btn:hover{background-color:var(--outline-variant)}.setup-btn.active{border-color:var(--primary);background-color:var(--primary-container);color:var(--primary);box-shadow:0 4px 14px #ff2e8840}.start-play-btn{background-color:var(--primary);color:var(--pure-white);border-radius:var(--radius-full);font-family:var(--font-heading);cursor:pointer;margin-top:var(--spacing-md);border:none;padding:18px 32px;font-size:20px;font-weight:900;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 8px #820b1e}.start-play-btn:hover{transform:translateY(-4px);box-shadow:0 12px #820b1e}.start-play-btn:active{transform:translateY(4px);box-shadow:0 4px #820b1e}.setup-sections-wrapper{gap:var(--spacing-lg);flex-direction:row;justify-content:space-between;width:100%;display:flex}@media (width>=769px){.setup-card{max-width:850px}}@media (width<=768px){.setup-container{align-items:flex-start;padding:12px}.setup-sections-wrapper{flex-direction:column;gap:8px}.setup-card{gap:8px;padding:12px 16px}.setup-card h2{margin-bottom:0;font-size:20px}.setup-section{gap:4px}.setup-section h3{margin:0;font-size:13px}.setup-grid{gap:8px}.setup-btn{min-width:calc(50% - 4px);color:var(--on-surface);flex-direction:row;gap:8px;padding:10px 8px;font-size:14px;font-weight:800}.setup-btn.active{color:var(--primary)}.setup-btn span[style*=font-size]{font-size:18px!important}.start-play-btn{margin-top:12px;padding:14px 20px;font-size:18px;box-shadow:0 6px #820b1e}}.sentence-mode-layout{background-color:var(--background);flex-direction:column;height:100dvh;display:flex;overflow:hidden}.game-stage{padding:var(--spacing-md);justify-content:center;align-items:center;gap:var(--spacing-md);flex:1;width:100%;display:flex;overflow:hidden}.center-play-area{align-items:center;gap:var(--spacing-sm);z-index:20;flex-direction:column;flex:1;width:100%;max-width:800px;min-height:0;display:flex;position:relative}.character-left,.character-right{align-items:flex-end;height:100%;padding-bottom:10vh;display:flex}@media (width<=768px){.game-stage{padding:var(--spacing-sm);gap:var(--spacing-sm)}.character-left,.character-right{display:none}.center-play-area{gap:var(--spacing-sm);margin-top:10px}.typing-display{padding:var(--spacing-sm) var(--spacing-md)!important;font-size:28px!important}.global-timer-display{padding:6px 16px!important;font-size:20px!important}}.category-tabs{justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);display:flex}.category-tabs button{background-color:var(--surface-dim);border-radius:var(--radius-full);font-family:var(--font-heading);color:var(--outline);cursor:pointer;border:none;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:700;transition:all .2s;display:flex}.category-tabs button:hover{background-color:var(--outline-variant);color:var(--on-surface)}.category-tabs button.active{background-color:var(--primary);color:var(--pure-white);box-shadow:0 4px 10px #b7102a4d}.controls-row{gap:var(--spacing-sm);margin-bottom:var(--spacing-md);flex-direction:column;align-items:center;display:flex}.difficulty-controls,.stage-toggles{justify-content:center;align-items:center;gap:var(--spacing-sm);display:flex}.stage-toggles{background-color:var(--surface-dim);border-radius:var(--radius-full);padding:4px}.toggle-label{font-family:var(--font-heading);color:var(--outline);margin-left:10px;font-size:14px}.difficulty-controls button,.stage-toggles button{background-color:var(--surface-container-high);border-radius:var(--radius-full);font-family:var(--font-heading);color:var(--outline);cursor:pointer;border:none;padding:6px 14px;font-size:13px;font-weight:700;transition:all .2s}.difficulty-controls button:hover,.stage-toggles button:hover{background-color:var(--outline-variant);color:var(--on-surface)}.difficulty-controls button.active{background-color:var(--primary);color:var(--pure-white);box-shadow:0 4px 10px #b7102a4d}.stage-toggles button.active{background-color:var(--secondary);color:var(--pure-white);box-shadow:0 4px 10px #0e35724d}.typing-display{background-color:var(--surface-container-high);border:2px solid var(--primary);border-radius:var(--radius-lg);width:100%;padding:var(--spacing-md) var(--spacing-xl);font-family:var(--font-heading);color:var(--on-surface);text-align:center;justify-content:center;align-items:center;min-height:64px;font-size:36px;display:flex;box-shadow:0 4px 12px #b7102a1a}.cursor-blink{color:var(--primary);margin-left:4px;font-weight:300;animation:1s step-end infinite blink}.game-over-modal{background-color:var(--surface-container-high);padding:var(--spacing-xl);border-radius:var(--radius-xl);text-align:center;z-index:20;width:90%;max-width:450px;animation:.4s cubic-bezier(.175,.885,.32,1.275) popUp;box-shadow:0 20px 50px #00000026}.game-over-modal h2{font-family:var(--font-heading);color:var(--error);margin-bottom:var(--spacing-xs);font-size:48px}.game-over-msg{color:var(--outline);margin-bottom:var(--spacing-lg);font-size:16px}.stats-grid{gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);grid-template-columns:1fr 1fr;display:grid}.stat-item{background-color:var(--surface-dim);border-radius:var(--radius-lg);padding:var(--spacing-md);flex-direction:column;justify-content:center;align-items:center;display:flex}.stat-item span{color:var(--outline-variant);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-size:14px}.stat-item strong{font-family:var(--font-heading);color:var(--primary);font-size:32px;line-height:1}.stat-item small{color:var(--outline);font-size:16px}.global-timer-display{font-family:var(--font-heading);color:var(--on-surface);text-align:center;margin-bottom:var(--spacing-xs);letter-spacing:1px;font-size:28px;font-weight:700}.game-over-actions{gap:var(--spacing-sm);flex-direction:column;display:flex}.retry-btn{background-color:var(--primary);color:var(--pure-white);border-radius:var(--radius-full);font-family:var(--font-heading);cursor:pointer;box-shadow:0 4px 0px var(--primary-fixed-variant);border:none;padding:16px;font-size:20px;transition:all .2s}.retry-btn:hover{box-shadow:0 2px 0px var(--primary-fixed-variant);transform:translateY(2px)}.home-btn{color:var(--outline);border:2px solid var(--outline-variant);border-radius:var(--radius-full);font-family:var(--font-heading);cursor:pointer;background-color:#0000;padding:14px;font-size:18px;transition:all .2s}.home-btn:hover{background-color:var(--surface-container);color:var(--on-surface)}.mobile-tap-guide{display:none}@media (width<=1024px){.game-stage{flex-direction:column}.character-left,.character-right{display:none}}@media (width<=768px),(height<=700px){.game-stage{padding:var(--spacing-sm);justify-content:flex-start;gap:var(--spacing-sm)}.typing-display{min-height:50px;padding:var(--spacing-sm);font-size:24px}.center-play-area{gap:var(--spacing-sm);width:100%}.global-timer-display{margin-bottom:2px;font-size:20px}.mobile-tap-guide{color:#fff;z-index:100;pointer-events:none;white-space:nowrap;background:#b7102ae6;border-radius:30px;padding:16px 24px;font-size:18px;font-weight:700;animation:1.5s infinite pulseTap;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 12px #0000004d}}.tutorial-setup-layout{background:linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));flex-direction:column;min-height:100vh;display:flex}.tutorial-setup-container{padding:var(--spacing-2xl) var(--spacing-xl);flex-direction:column;flex:1;justify-content:flex-start;align-items:center;width:100%;max-width:600px;margin:0 auto;display:flex}.tutorial-setup-title{font-family:var(--font-heading);color:var(--on-surface);margin-bottom:var(--spacing-2xl);font-size:32px}.setup-section{background:var(--surface);border-radius:var(--radius-2xl);width:100%;padding:var(--spacing-xl);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl)}.setup-section h3{font-family:var(--font-heading);color:var(--primary);margin-top:0;margin-bottom:var(--spacing-lg);border-bottom:2px solid var(--outline-variant);padding-bottom:8px;font-size:20px}.language-toggle{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);display:flex}.lang-btn{border-radius:var(--radius-lg);border:2px solid var(--outline-variant);cursor:pointer;background:0 0;flex:1;padding:12px;font-size:16px;font-weight:700;transition:all .2s}.lang-btn.active{border-color:var(--primary);background:var(--primary);color:#fff}.curriculum-list{flex-direction:column;gap:12px;display:flex}.curriculum-item{border-radius:var(--radius-lg);border:2px solid var(--outline-variant);background:var(--surface);cursor:pointer;align-items:center;padding:16px;transition:all .2s;display:flex}.curriculum-item:hover{background:var(--surface-dim)}.curriculum-item.active{border-color:var(--primary);background:#b7102a0d}.curriculum-item h4{color:var(--on-surface);margin:0;font-size:18px}.guide-toggle{border-radius:var(--radius-lg);background:var(--surface-dim);justify-content:space-between;align-items:center;padding:16px;display:flex}.guide-toggle-info h4{margin:0 0 4px;font-size:18px}.guide-toggle-info p{color:var(--outline);margin:0;font-size:14px}.switch{width:60px;height:34px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background-color:var(--outline-variant);border-radius:34px;transition:all .4s;position:absolute;inset:0}.slider:before{content:"";background-color:#fff;border-radius:50%;width:26px;height:26px;transition:all .4s;position:absolute;bottom:4px;left:4px}input:checked+.slider{background-color:var(--primary)}input:checked+.slider:before{transform:translate(26px)}.start-btn{color:#fff;background-color:var(--primary);border-radius:var(--radius-full);cursor:pointer;width:100%;margin-top:var(--spacing-xl);border:none;padding:16px;font-size:20px;font-weight:900;transition:all .2s;box-shadow:0 6px #820b1e}.start-btn:hover{transform:translateY(-2px);box-shadow:0 8px #820b1e}.start-btn:active{transform:translateY(4px);box-shadow:0 2px #820b1e}.duration-toggle{justify-content:center;gap:12px;display:flex}.clear-badge{background:var(--primary);color:#fff;border-radius:12px;padding:4px 8px;font-size:.8rem;font-weight:700}.curriculum-item.cleared{border:2px solid var(--primary);background:#90ee901a}.all-cleared-banner{color:#333;text-align:center;cursor:pointer;background:linear-gradient(135deg,#ff9a9e 0%,#fecfef 100%);border-radius:12px;margin-top:30px;padding:20px;font-size:1.1rem;transition:transform .2s,box-shadow .2s;animation:.5s cubic-bezier(.175,.885,.32,1.275) popIn;box-shadow:0 4px 15px #ff9a9e4d}.all-cleared-banner:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff9a9e66}.all-cleared-banner strong{color:#d81b60;margin-top:8px;display:block}@media (width<=768px){.tutorial-setup-container{padding:16px}.tutorial-setup-title{margin-bottom:16px;font-size:24px}.setup-section{margin-bottom:12px;padding:16px}.setup-section h3{margin-bottom:12px;font-size:16px}.lang-btn{color:#333;padding:10px;font-size:14px}.lang-btn.active{color:#fff}.curriculum-item{padding:12px}.curriculum-item h4{color:#333;font-size:16px}.start-btn{margin-top:16px;padding:14px;font-size:18px}}:root{--keyboard-bg-color:var(--surface-container,#fdfbf7);--keyboard-bg-image:none;--key-bg:var(--pure-white,#fff);--key-special-bg:#f2efe9;--key-text:var(--on-surface,#4a3b32);--key-text-ko:var(--primary,#e4572e);--key-border:var(--hanok-wood,#8b5a2b);--key-shadow-color:#8b5a2b66;--key-active-bg:var(--cloud-blue,#5dade2);--key-active-text:#fff;--key-pressed-bg:var(--surface-dim,#f2efe9)}.visual-keyboard-container{background-color:var(--keyboard-bg-color);background-image:var(--keyboard-bg-image);-webkit-user-select:none;user-select:none;touch-action:manipulation;background-position:50%;background-size:cover;border-top-left-radius:24px;border-top-right-radius:24px;flex-direction:column;gap:10px;width:100%;max-width:600px;margin:0 auto;padding:12px 8px 30px;display:flex;box-shadow:0 -4px 20px #0000000d}.visual-keyboard-row{justify-content:center;gap:8px;width:100%;display:flex}.visual-keyboard-row.row-1{padding:0 4%}.keyboard-key{background-color:var(--key-bg);border:2px solid var(--key-border);height:56px;box-shadow:0 4px 0px var(--key-shadow-color);cursor:pointer;color:var(--key-text);border-radius:14px;flex:1;justify-content:center;align-items:center;min-width:0;padding:0;transition:all .1s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.keyboard-key:active,.keyboard-key.pressed{background-color:var(--key-pressed-bg);box-shadow:0 0px 0px var(--key-shadow-color);transform:translateY(4px)}.keyboard-key.active{background-color:var(--key-active-bg);color:var(--key-active-text);box-shadow:0 4px #0003}.keyboard-key.active:active,.keyboard-key.active.pressed{transform:translateY(4px);box-shadow:0 0 #0003}.keyboard-key.special-key{background-color:var(--key-special-bg);border-radius:16px;flex:1.5;font-size:1.4rem}.keyboard-key.special-key:active{background-color:#d1d4db}.keyboard-key.space-key{background-color:var(--key-special-bg);font-family:var(--font-heading,"Quicksand", sans-serif);letter-spacing:2px;border-radius:16px;flex:5;font-size:1.2rem;font-weight:700}.keyboard-key.space-key:active{background-color:#d1d4db}.dual-label{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.dual-label .eng{font-family:var(--font-heading,"Quicksand", sans-serif);font-size:22px;font-weight:700;line-height:1}.dual-label .kor{font-family:var(--font-heading,"Jua", sans-serif);color:var(--key-text-ko);font-size:13px;font-weight:800;position:absolute;top:6px;right:8px}.keyboard-key.active .kor{color:#ffffffe6}@media (width>=480px){.keyboard-key{border-radius:16px;height:64px}.dual-label .eng{font-size:26px}.dual-label .kor{font-size:15px;top:8px;right:10px}}.hands-guide{margin-top:var(--spacing-lg);padding-bottom:var(--spacing-xl);justify-content:center;gap:60px;display:flex}.hand{align-items:flex-end;gap:2px;display:flex;position:relative}.hand:before{content:"";z-index:1;background:linear-gradient(#ffecb3 0%,#ffe082 100%);border-radius:20px 20px 40px 40px;width:100%;height:40px;position:absolute;bottom:-30px;left:0;box-shadow:0 4px 10px #0000000d}.finger{z-index:2;background:linear-gradient(#fff9c4 0%,#ffecb3 100%);border-radius:16px 16px 0 0;width:22px;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;box-shadow:inset -2px 0 4px #0000000d,inset 2px 0 4px #ffffff80}.finger:after{content:"";background-color:#fff9;border-radius:8px 8px 4px 4px;width:14px;height:18px;transition:all .3s;position:absolute;top:6px;left:50%;transform:translate(-50%)}.left-hand .pinky{height:45px}.left-hand .ring{height:65px}.left-hand .middle{height:75px}.left-hand .index{height:65px}.left-hand .thumb{transform-origin:0 100%;border-radius:16px;height:40px;margin-left:15px;transform:rotate(25deg)}.right-hand .thumb{transform-origin:100% 100%;border-radius:16px;height:40px;margin-right:15px;transform:rotate(-25deg)}.right-hand .index{height:65px}.right-hand .middle{height:75px}.right-hand .ring{height:65px}.right-hand .pinky{height:45px}.finger.active{background:var(--primary);z-index:10;transform:translateY(-12px);box-shadow:0 10px 20px #b7102a66,inset 0 5px 10px #fff6}.finger.active:after{background-color:#ffffffe6;box-shadow:0 0 5px #fffc}.left-hand .thumb.active{transform:rotate(25deg)translateY(-12px)scale(1.05)}.right-hand .thumb.active{transform:rotate(-25deg)translateY(-12px)scale(1.05)}.tutorial-layout{background:linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));flex-direction:column;height:100dvh;display:flex;overflow:hidden}.tutorial-play-area{padding:var(--spacing-md);flex-direction:column;flex:1;justify-content:flex-start;align-items:center;width:100%;max-width:800px;margin:0 auto;display:flex;overflow:hidden}.tutorial-play-header{width:100%;margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.tutorial-play-header h2{font-family:var(--font-heading);color:var(--on-surface);margin:0}.back-btn{color:var(--primary);cursor:pointer;border-radius:var(--radius-full);background:0 0;background-color:var(--surface);box-shadow:var(--shadow-sm);border:none;padding:8px 16px;font-weight:700}.guide-bubble{background-color:var(--surface);color:var(--primary);padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-full);font-family:var(--font-heading);text-align:center;margin-bottom:var(--spacing-md);box-shadow:var(--shadow-sm);border:2px solid var(--primary);font-size:20px;font-weight:700}.target-display-complex{background-color:var(--surface);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);margin-bottom:var(--spacing-md);border:4px solid var(--primary);padding:var(--spacing-md);flex-direction:column;align-items:center;min-width:300px;display:flex}.target-word-header{color:var(--outline);text-transform:uppercase;margin-bottom:8px;font-size:14px;font-weight:700}.target-word{font-family:var(--font-heading);color:var(--primary);margin-bottom:8px;font-size:32px;font-weight:900}.target-input-area{background:var(--surface-dim);border-radius:var(--radius-lg);justify-content:center;align-items:center;min-width:120px;min-height:60px;padding:12px 24px;display:flex}.typed-text{font-family:var(--font-heading);color:var(--on-surface);font-size:24px;font-weight:700}.cursor{color:var(--primary);font-size:24px;animation:1s step-end infinite blink}.target-key-hint{color:var(--outline);margin-top:16px;font-size:16px}.target-key-hint strong{color:var(--primary);margin-left:8px;font-size:24px}.guides-container{flex-direction:column;flex:1;align-items:center;width:100%;min-height:0;animation:.3s fadeIn;display:flex}.error-shake{border-color:#f44336;animation:.3s cubic-bezier(.36,.07,.19,.97) both shake}.hidden-mobile-input{opacity:0;pointer-events:none;color:#0000;z-index:-1;background:0 0;border:none;outline:none;width:1px;height:1px;font-size:16px;position:absolute;top:0;left:0}.mobile-tap-guide{color:#fff;z-index:100;pointer-events:none;white-space:nowrap;background:#b7102ae6;border-radius:30px;padding:16px 32px;font-size:20px;font-weight:700;animation:1.5s infinite pulseTap;display:flex;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 12px #0000004d}@media (width<=768px){.tutorial-play-area{padding:var(--spacing-md)}.tutorial-play-header h2{font-size:1.2rem}.guide-bubble{margin-bottom:var(--spacing-md);padding:8px 16px;font-size:16px}.target-display-complex{padding:var(--spacing-md);margin-bottom:var(--spacing-lg);min-width:90%}.target-word{margin-bottom:8px;font-size:36px}.target-input-area{min-height:50px;padding:8px 16px}.typed-text,.cursor{font-size:24px}.target-key-hint{margin-top:8px;font-size:14px}.target-key-hint strong{font-size:18px}}.mobile-scaled-area{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:15px;padding:20px 10px;display:flex;overflow-y:auto}.mobile-visible-input{text-align:center;border:3px solid var(--border);width:95%;max-width:400px;color:var(--text-main);background:#fff;border-radius:16px;outline:none;margin:10px auto;padding:15px;font-size:1.8rem;transition:all .2s;display:block;box-shadow:0 4px 12px #0000001a}.mobile-visible-input.error{color:#ff4757;border-color:#ff4757;animation:.3s ease-in-out shake}.mobile-visible-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px #4a90e233}.custom-setup-layout{background-color:var(--surface);flex-direction:column;min-height:100dvh;display:flex}.custom-setup-main{padding:var(--spacing-lg);flex:1;justify-content:center;align-items:center;display:flex}.setup-container{background:var(--surface-container-high);padding:var(--spacing-2xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center;flex-direction:column;align-items:center;width:90%;max-width:42rem;margin:0 auto;display:flex}.setup-title{font-family:var(--font-heading);color:var(--primary-dark);margin-bottom:var(--spacing-sm);font-size:2rem}.setup-subtitle{color:var(--text-secondary);margin-bottom:var(--spacing-xl)}.textarea-wrapper{width:100%;margin-bottom:var(--spacing-xl);position:relative}.lyrics-textarea{width:100%;height:200px;padding:var(--spacing-md);border:2px solid var(--hanok-wood);border-radius:var(--radius-md);font-family:var(--font-body);resize:vertical;background-color:var(--surface-dim);color:#ffe600;font-size:1rem;transition:border-color .2s}.lyrics-textarea:focus{border-color:var(--primary);background-color:var(--surface-container-high);outline:none}.char-counter{bottom:var(--spacing-sm);right:var(--spacing-md);color:var(--text-secondary);pointer-events:none;white-space:nowrap;font-size:.85rem;position:absolute}.start-btn{width:100%;max-width:300px;padding:var(--spacing-md);background:var(--primary);color:var(--pure-white);border-radius:var(--radius-md);cursor:pointer;border:none;margin:0 auto;font-size:1.2rem;font-weight:700;transition:transform .2s,background-color .2s}.start-btn:disabled{background:var(--hanok-wood);cursor:not-allowed;transform:none}.start-btn:not(:disabled):hover{background:var(--primary-dark);transform:translateY(-2px)}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.premium-modal{background:var(--surface-container-high);padding:var(--spacing-2xl);border-radius:var(--radius-lg);text-align:center;max-width:400px;box-shadow:var(--shadow-lg)}.premium-modal h2{color:var(--primary-dark);margin-bottom:var(--spacing-md)}.premium-modal p{margin-bottom:var(--spacing-xl);color:var(--text-secondary)}.modal-actions{gap:var(--spacing-md);justify-content:center;display:flex}.upgrade-btn{color:#333;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;background:gold;border:none;font-weight:700}.close-btn{background:var(--surface-dim);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);cursor:pointer;border:none}.title-input{border:2px solid var(--hanok-wood);border-radius:var(--radius-md);width:100%;font-family:var(--font-body);background-color:var(--surface-dim);color:#ffe600;margin-bottom:1rem;padding:1rem;font-size:1.1rem;font-weight:700;transition:border-color .2s,background-color .2s}.title-input:focus{border-color:var(--primary);background-color:var(--surface-container-high);outline:none}.custom-setup-main{flex-direction:column}.library-container{background:var(--surface-container-high);border-radius:var(--radius-lg);width:90%;max-width:800px;box-shadow:var(--shadow-sm);margin-top:3rem;padding:2rem}.library-title{color:var(--primary-dark);font-family:var(--font-heading);text-align:center;margin-bottom:1.5rem;font-size:1.8rem}.library-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;display:grid}.library-card{background:var(--surface-dim);border-radius:var(--radius-md);cursor:pointer;border:2px solid #0000;align-items:center;padding:1rem;transition:transform .2s,box-shadow .2s;display:flex}.library-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary);background:var(--surface-container-high);transform:translateY(-3px)}.lib-icon{margin-right:1rem;font-size:2rem}.lib-info{flex:1}.lib-song-title{color:var(--text-primary);margin-bottom:.25rem;font-size:1.1rem;font-weight:700}.lib-song-lines{color:var(--text-secondary);font-size:.85rem}.lib-play-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:20px;padding:.5rem 1rem;font-weight:700;transition:background-color .2s}.lib-play-btn:hover{background:var(--primary-dark)}.lib-actions{align-items:center;gap:.5rem;display:flex}.lib-delete-btn{border:1px solid var(--error,#e53e3e);color:var(--error,#e53e3e);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:.4rem;transition:all .2s;display:flex}.lib-delete-btn:hover{background:var(--error,#e53e3e);color:#fff}.loading-modal{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.spinner{border:5px solid var(--surface-dim);border-top:5px solid var(--primary);border-radius:50%;width:50px;height:50px;margin:0 auto 1.5rem;animation:1s linear infinite spin}@media (width<=768px){.custom-setup-main{padding:.5rem}.setup-container{width:100%;padding:1rem}.setup-title{margin-bottom:.5rem;font-size:1.5rem}.setup-subtitle{margin-bottom:1rem;font-size:.9rem}.lyrics-textarea{height:150px;font-size:.9rem}.start-btn{padding:.8rem;font-size:1rem}.library-container{width:100%;margin-top:1rem;padding:1rem}.library-title{margin-bottom:1rem;font-size:1.4rem}.library-grid{grid-template-columns:1fr;gap:.8rem}.library-card{padding:.8rem}}.custom-tabs{border-bottom:2px solid var(--surface-dim);width:100%;margin-bottom:var(--spacing-lg);display:flex}.tab-btn{padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-body);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;font-size:1.1rem;font-weight:700;transition:all .2s}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-btn:hover:not(.active){color:var(--primary-dark);background-color:var(--surface-dim)}.ai-generate-area{align-items:center;gap:var(--spacing-md);width:100%;margin-bottom:var(--spacing-xl);flex-direction:column;display:flex}.ai-prompt-input{width:100%;padding:var(--spacing-md);border:2px solid var(--primary-light);border-radius:var(--radius-md);font-family:var(--font-body);background-color:var(--surface-container-high);color:#ffe600;font-size:1rem;transition:border-color .2s}.ai-prompt-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(var(--primary-rgb), .1);outline:none}.generate-btn{width:100%;max-width:300px;padding:var(--spacing-md);color:#fff;border-radius:var(--radius-md);cursor:pointer;background:linear-gradient(135deg,#a8c0ff 0%,#3f2b96 100%);border:none;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s}.generate-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.generate-btn:not(:disabled):hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.ai-disclaimer{color:var(--text-secondary);margin-top:-.5rem;font-size:.85rem}.setup-container{min-height:100vh;padding:var(--spacing-xl);background:linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));justify-content:center;align-items:flex-start;display:flex}.setup-content{background-color:var(--surface);border-radius:var(--radius-2xl);width:100%;max-width:720px;padding:var(--spacing-2xl);box-shadow:var(--shadow-xl);flex-direction:column;display:flex}.setup-title{font-family:var(--font-heading);color:var(--primary);text-align:center;text-wrap:balance;margin:0;font-size:30px;font-weight:900}.setup-subtitle{text-align:center;color:var(--on-surface);opacity:.75;margin:.5rem 0 0;font-size:15px}.persona-toggle{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);grid-template-columns:1fr 1fr;display:grid}.persona-card{background-color:var(--surface-dim);border-radius:var(--radius-lg);padding:var(--spacing-md);cursor:pointer;-webkit-user-select:none;user-select:none;border:2px solid #0000;align-items:center;gap:12px;transition:transform .15s,border-color .15s,background-color .15s,box-shadow .15s;display:flex}.persona-card:hover{background-color:var(--outline-variant);transform:translateY(-2px)}.persona-card.selected{border-color:var(--primary);background-color:var(--primary-container);box-shadow:0 6px 18px #ff2e8847}.persona-icon{flex-shrink:0;font-size:1.9rem;line-height:1}.persona-text{flex-direction:column;gap:2px;min-width:0;display:flex}.persona-title{font-family:var(--font-heading);color:var(--on-surface);flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:15px;font-weight:800;display:flex}.persona-card.selected .persona-title{color:var(--primary)}.persona-badge{color:var(--pure-white);background-color:var(--primary);border-radius:var(--radius-full);white-space:nowrap;padding:2px 7px;font-size:10px;font-weight:800}.persona-desc{opacity:.72;color:var(--on-surface);margin:0;font-size:12px}.category-grid{gap:var(--spacing-md);margin-top:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(150px,1fr));display:grid}.category-card{background-color:var(--surface-dim);border-radius:var(--radius-lg);padding:var(--spacing-lg) var(--spacing-md);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;border:2px solid #0000;flex-direction:column;align-items:center;gap:6px;transition:transform .15s,border-color .15s,background-color .15s,box-shadow .15s;display:flex}.category-card:hover{background-color:var(--outline-variant);transform:translateY(-3px)}.category-card.selected{border-color:var(--primary);background-color:var(--primary-container);box-shadow:0 6px 18px #ff2e8847}.category-icon{font-size:2rem;line-height:1}.category-title{font-family:var(--font-heading);color:var(--on-surface);margin:0;font-size:16px;font-weight:800}.category-card.selected .category-title{color:var(--primary)}.start-button{background-color:var(--primary);color:var(--pure-white);border-radius:var(--radius-full);font-family:var(--font-heading);cursor:pointer;margin-top:var(--spacing-lg);border:none;align-self:center;min-width:220px;padding:16px 32px;font-size:19px;font-weight:900;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),box-shadow .2s;box-shadow:0 8px #820b1e}.start-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 11px #820b1e}.start-button:active:not(:disabled){transform:translateY(4px);box-shadow:0 4px #820b1e}@media (width<=768px){.setup-container{padding:12px}.setup-content{padding:16px 14px}.setup-title{font-size:22px}.setup-subtitle{font-size:13px}.persona-toggle{grid-template-columns:1fr;gap:8px;margin-bottom:12px}.persona-card{gap:10px;padding:10px 12px}.persona-icon{font-size:1.6rem}.category-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.category-card{gap:4px;padding:14px 8px}.category-icon{font-size:1.6rem}.category-title{font-size:14px}.category-card p{font-size:.8rem!important}.start-button{width:100%;margin-top:14px;padding:14px 24px;font-size:17px;box-shadow:0 6px #820b1e}}.roleplay-container{background-color:var(--bg-primary,#0f172a);color:#fff;flex-direction:column;min-height:100vh;display:flex}.roleplay-topbar{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:.9rem 1rem;display:flex}.roleplay-back{color:#fff;cursor:pointer;background:#ffffff1a;border:none;border-radius:50%;width:40px;height:40px;font-size:1.3rem}.roleplay-back:hover{background:#fff3}.roleplay-scenario{font-size:1.05rem;font-weight:700}.roleplay-content{flex-direction:column;flex:1;align-items:center;width:100%;max-width:600px;margin:0 auto;padding:1.5rem 2rem 2rem;display:flex}.caption-empty{color:#fff6;text-align:center;margin:auto;font-size:.95rem}.reconnect-btn{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:8px;margin-left:.75rem;padding:.4rem .9rem;font-weight:600}.status-header{margin-bottom:2rem;font-size:1.2rem;font-weight:600}.pulsing-text{animation:1.5s infinite alternate pulse}.pulsing-text.connected{color:#4ade80}.disconnected-text{color:#f87171}.avatar-section{flex:1;justify-content:center;align-items:center;min-height:200px;display:flex}.mic-wave{background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;display:flex;position:relative}.mic-icon{z-index:10;font-size:3rem}.mic-wave.active .wave{border:2px solid #4ade80;border-radius:50%;width:100%;height:100%;animation:2s linear infinite ripple;position:absolute}.mic-wave.ai-speaking .wave{border-color:#60a5fa}.mic-wave.ai-speaking{background:#60a5fa26}.mic-wave.active .wave:first-child{animation-delay:0s}.mic-wave.active .wave:nth-child(2){animation-delay:.6s}.mic-wave.active .wave:nth-child(3){animation-delay:1.2s}@keyframes ripple{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(2)}}.captions-container{background:#0000004d;border-radius:12px;flex-direction:column;gap:1rem;width:100%;height:300px;margin-bottom:2rem;padding:1rem;display:flex;overflow-y:auto}.caption-bubble{cursor:pointer;border-radius:12px;max-width:80%;padding:1rem;font-size:1.1rem;line-height:1.4;transition:filter .15s}.caption-bubble:hover{filter:brightness(1.12)}.caption-hint{text-align:center;color:#fff6;margin-bottom:.25rem;font-size:.8rem}.caption-trans{opacity:.85;border-top:1px solid #ffffff2e;margin-top:.5rem;padding-top:.5rem;font-size:.95rem}.caption-trans.loading{opacity:.6;font-style:italic}.caption-bubble.user{color:#fff;background:#3b82f6;border-bottom-right-radius:2px;align-self:flex-end}.caption-bubble.ai{color:#fff;background:#334155;border-bottom-left-radius:2px;align-self:flex-start}.end-call-button{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:99px;padding:1rem 3rem;font-size:1.2rem;font-weight:600;transition:all .2s}.end-call-button:hover{background:#dc2626;transform:scale(1.05)}.error-message{color:#f87171;background:#f871711a;border-radius:8px;margin-bottom:1rem;padding:1rem}.dashboard-layout{background-color:var(--surface);flex-direction:column;min-height:100dvh;display:flex}.dashboard-main{padding:var(--spacing-xl);flex-direction:column;flex:1;align-items:center;display:flex}.dashboard-container{background:var(--surface-container-high);border-radius:var(--radius-lg);width:100%;max-width:800px;box-shadow:var(--shadow-md);padding:2.5rem}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.profile-info{align-items:center;gap:1rem;display:flex}.profile-avatar{border:3px solid var(--primary);border-radius:50%;width:64px;height:64px}.profile-avatar-placeholder{background-color:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:2rem;font-weight:700;display:flex}.profile-name{font-family:var(--font-heading);color:var(--primary-dark);margin:0 0 .25rem;font-size:1.8rem}.profile-email{color:var(--text-secondary);margin:0;font-size:.9rem}.level-badge{color:#fff;background:linear-gradient(135deg,gold,orange);border-radius:2rem;padding:.5rem 1.5rem;font-size:1.5rem;font-weight:800;box-shadow:0 4px 10px #ffa50066}.xp-section{margin-bottom:2.5rem}.xp-text{color:var(--text-secondary);justify-content:space-between;margin-bottom:.5rem;font-weight:700;display:flex}.xp-bar-container{background-color:var(--surface-dim);border-radius:10px;width:100%;height:20px;overflow:hidden}.xp-bar-fill{background:linear-gradient(90deg, var(--primary), var(--primary-light));height:100%;transition:width .5s ease-out}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.5rem;margin-bottom:3rem;display:grid}.stat-card{background:var(--surface-dim);border-radius:var(--radius-md);text-align:center;padding:1.5rem;transition:transform .2s}.stat-card:hover{box-shadow:var(--shadow-sm);background:var(--surface-container-high);border:1px solid var(--hanok-wood);transform:translateY(-5px)}.stat-card h3{color:var(--text-secondary);text-transform:uppercase;margin-bottom:.5rem;font-size:.9rem}.stat-value{color:var(--primary-dark);font-size:2.5rem;font-weight:900}.stat-unit{color:var(--text-secondary);font-size:1rem;font-weight:400}.weakness-section h2{color:var(--primary-dark);font-family:var(--font-heading);margin-bottom:1rem}.weakness-list{flex-direction:column;gap:.75rem;display:flex}.weakness-item{background:var(--surface-container-high);border-radius:var(--radius-sm);border:2px solid #ff4d4d;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.weakness-key{color:#ff4d4d;font-size:1.2rem;font-weight:700}.weakness-count{color:var(--text-secondary);font-weight:700}.no-errors{color:#4caf50;text-align:center;background:var(--surface-dim);border-radius:var(--radius-md);padding:2rem;font-weight:700}.login-prompt-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:2rem;margin-top:2rem;padding:1rem 2rem;font-size:1.2rem;font-weight:700}.mode-tabs{gap:.5rem;width:100%;margin-bottom:2rem;padding-bottom:.5rem;display:flex;overflow-x:auto}.mode-tabs::-webkit-scrollbar{height:6px}.mode-tabs::-webkit-scrollbar-thumb{background:var(--outline-variant);border-radius:3px}.mode-tab{background:var(--surface-dim);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;white-space:nowrap;border:2px solid #0000;padding:.5rem 1rem;font-size:1rem;font-weight:700;transition:all .2s}.mode-tab:hover{background:var(--surface);border-color:var(--primary-light)}.mode-tab.active{background:var(--primary);color:var(--pure-white);border-color:var(--primary);box-shadow:0 4px 10px #b7102a33}.legal-wrap{background:var(--bg-color,#0e0c14);min-height:100vh;color:var(--text-color,#ece9f1);padding:clamp(1.25rem,4vw,3rem) clamp(1rem,4vw,1.5rem);font-family:-apple-system,Apple SD Gothic Neo,Pretendard,Malgun Gothic,Segoe UI,sans-serif;line-height:1.7}.legal-doc{max-width:46rem;margin:0 auto}.legal-back{color:var(--on-surface-variant,#9a93a8);cursor:pointer;background:0 0;border:none;margin-bottom:.5rem;padding:.4rem 0;font-size:.9rem}.legal-back:hover{color:var(--text-color,#ece9f1)}.legal-tabs{flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem;display:flex}.legal-tab{cursor:pointer;color:var(--on-surface-variant,#9a93a8);border:1px solid var(--outline-variant,#ffffff24);background:0 0;border-radius:999px;padding:.45rem .85rem;font-size:.85rem}.legal-tab:hover{border-color:var(--primary,#ff2d78);color:var(--text-color,#ece9f1)}.legal-tab.active{background:color-mix(in srgb, var(--primary,#ff2d78) 14%, transparent);border-color:var(--primary,#ff2d78);color:var(--primary,#ff2d78);font-weight:600}.legal-head{border-bottom:1px solid var(--outline-variant,#ffffff1f);margin-bottom:1.5rem;padding-bottom:1rem}.legal-head h1{letter-spacing:-.01em;margin:0;font-size:clamp(1.5rem,4vw,2rem);font-weight:700}.legal-updated{color:var(--on-surface-variant,#9a93a8);margin:.5rem 0 0;font-size:.85rem}.legal-fallback{background:color-mix(in srgb, var(--primary,#ff2d78) 10%, transparent);border:1px solid color-mix(in srgb, var(--primary,#ff2d78) 30%, transparent);color:var(--text-color,#ece9f1);border-radius:10px;margin-bottom:1.5rem;padding:.8rem 1rem;font-size:.9rem}.legal-intro{color:var(--on-surface-variant,#b7b0c2);margin:0 0 1.75rem;font-size:.97rem}.legal-section{margin-bottom:1.75rem}.legal-section h2{color:var(--text-color,#ece9f1);margin:0 0 .6rem;font-size:1.08rem;font-weight:700}.legal-section p{color:var(--on-surface-variant,#c3bcce);margin:0 0 .6rem;font-size:.95rem}.legal-section ul{flex-direction:column;gap:.35rem;margin:0 0 .7rem;padding-left:1.1rem;display:flex}.legal-section li{color:var(--on-surface-variant,#c3bcce);font-size:.95rem}.legal-ph{color:#2a2100;white-space:nowrap;background:#ffd84d;border-radius:4px;padding:.05rem .35rem;font-size:.9em;font-weight:600}@media (prefers-color-scheme:light){.legal-wrap{color:#1a1622;background:#fff}.legal-tab{color:#6a6478;border-color:#e2ddec}.legal-tab.active{color:#d61f66;border-color:#d61f66}.legal-head{border-color:#ece8f3}.legal-updated,.legal-intro,.legal-section p,.legal-section li{color:#4a4556}.legal-back{color:#6a6478}.legal-back:hover,.legal-tab:hover{color:#1a1622}}.floating-feedback-btn{color:#fff;cursor:pointer;z-index:1000;background:linear-gradient(135deg,#ff6b6b 0%,#ff8e53 100%);border:none;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:28px;transition:transform .2s,box-shadow .2s;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 4px 15px #ff6b6b66}.floating-feedback-btn:hover{transform:translateY(-5px)scale(1.05);box-shadow:0 8px 25px #ff6b6b99}.feedback-modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1001;background:#00000080;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.feedback-modal-content{background:#fff;border-radius:20px;width:90%;max-width:400px;padding:30px;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;box-shadow:0 20px 40px #0003}.feedback-modal-content h3{color:#333;margin:0 0 10px;font-size:24px;font-weight:700}.feedback-desc{color:#666;margin-bottom:20px;font-size:14px}.feedback-modal-content textarea{resize:none;box-sizing:border-box;border:2px solid #eee;border-radius:12px;width:100%;padding:15px;font-family:Pretendard,sans-serif;font-size:16px;transition:border-color .2s}.feedback-modal-content textarea:focus{border-color:#ff6b6b;outline:none}.feedback-modal-actions{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.feedback-cancel-btn{color:#666;cursor:pointer;background:#f5f5f5;border:none;border-radius:8px;padding:10px 20px;font-weight:600;transition:background .2s}.feedback-cancel-btn:hover{background:#e0e0e0}.feedback-submit-btn{color:#fff;cursor:pointer;background:#ff6b6b;border:none;border-radius:8px;padding:10px 24px;font-weight:600;transition:background .2s}.feedback-submit-btn:hover:not(:disabled){background:#ff5252}.feedback-submit-btn:disabled,.feedback-cancel-btn:disabled{opacity:.7;cursor:not-allowed}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.floating-feedback-btn{width:50px;height:50px;font-size:24px;bottom:20px;right:20px}}.auth-gate-loading{justify-content:center;align-items:center;gap:var(--spacing-lg);height:100vh;color:var(--on-surface);font-family:var(--font-body);flex-direction:column;display:flex}.auth-gate-spinner{border:4px solid #0000001a;border-left-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.auth-gate-overlay{min-height:100vh;padding:var(--spacing-lg);background:linear-gradient(135deg, var(--background-gradient-start), var(--background-gradient-end));justify-content:center;align-items:center;display:flex}.auth-gate-card{background:var(--surface-container-high);border:var(--glass-border);border-radius:var(--radius-2xl);width:100%;max-width:420px;box-shadow:var(--shadow-xl);padding:var(--spacing-2xl) var(--spacing-xl);text-align:center;gap:var(--spacing-md);flex-direction:column;display:flex}.auth-gate-emoji{font-size:2.75rem;line-height:1}.auth-gate-card h2{color:var(--on-surface);font-size:1.5rem;font-family:var(--font-heading)}.auth-gate-desc{color:var(--on-surface-variant);margin-bottom:var(--spacing-sm);font-size:.95rem;line-height:1.5}.auth-gate-login-btn{border-radius:var(--radius-md);background:var(--surface-container-high);color:#333;border:1px solid var(--outline);width:100%;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;gap:10px;padding:14px;font-size:1rem;font-weight:700;display:flex}.auth-gate-login-btn:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}.auth-gate-secondary-btn{border-radius:var(--radius-md);background:var(--primary-container);width:100%;color:var(--primary-fixed-variant);padding:12px;font-size:.95rem;font-weight:700}.auth-gate-secondary-btn:hover{background:var(--primary);color:var(--on-primary)}.auth-gate-back-btn{color:var(--on-surface-variant);background:0 0;padding:4px;font-size:.85rem}.auth-gate-back-btn:hover{color:var(--on-surface)}.counter{color:var(--accent);background:var(--accent-bg);border:2px solid #0000;border-radius:5px;margin-bottom:24px;padding:5px 10px;font-size:16px;transition:border-color .3s}.counter:hover{border-color:var(--accent-border)}.counter:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative}.hero .base,.hero .framework,.hero .vite{margin:0 auto;inset-inline:0}.hero .base{z-index:0;width:170px;position:relative}.hero .framework,.hero .vite{position:absolute}.hero .framework{z-index:1;height:28px;top:34px;transform:perspective(2000px)rotate(300deg)rotateX(44deg)rotateY(39deg)scale(1.4)}.hero .vite{z-index:0;width:auto;height:26px;top:107px;transform:perspective(2000px)rotate(300deg)rotateX(40deg)rotateY(39deg)scale(.8)}#center{flex-direction:column;flex-grow:1;place-content:center;place-items:center;gap:25px;display:flex}@media (width<=1024px){#center{gap:18px;padding:32px 20px 24px}}#next-steps{border-top:1px solid var(--border);text-align:left;display:flex}#next-steps>div{flex:1 1 0;padding:32px}@media (width<=1024px){#next-steps>div{padding:24px 20px}}#next-steps .icon{width:22px;height:22px;margin-bottom:16px}@media (width<=1024px){#next-steps{text-align:center;flex-direction:column}}#docs{border-right:1px solid var(--border)}@media (width<=1024px){#docs{border-right:none;border-bottom:1px solid var(--border)}}#next-steps ul{gap:8px;margin:32px 0 0;padding:0;list-style:none;display:flex}#next-steps ul .logo{height:18px}#next-steps ul a{color:var(--text-h);background:var(--social-bg);border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:16px;text-decoration:none;transition:box-shadow .3s;display:flex}#next-steps ul a:hover{box-shadow:var(--shadow)}#next-steps ul a .button-icon{width:18px;height:18px}@media (width<=1024px){#next-steps ul{flex-wrap:wrap;justify-content:center;margin-top:20px}#next-steps ul li{flex:calc(50% - 8px)}#next-steps ul a{box-sizing:border-box;justify-content:center;width:100%}}#spacer{border-top:1px solid var(--border);height:88px}@media (width<=1024px){#spacer{height:48px}}.ticks{width:100%;position:relative}.ticks:before,.ticks:after{content:"";border:5px solid #0000;position:absolute;top:-4.5px}.ticks:before{border-left-color:var(--border);left:0}.ticks:after{border-right-color:var(--border);right:0}