*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0f0e17;--bg-secondary:#1a1a2e;--bg-card:#16213e;--bg-glass:#ffffff0d;--bg-glass-border:#ffffff1a;--accent-primary:#e94560;--accent-secondary:#7c3aed;--accent-gold:#f59e0b;--accent-teal:#06b6d4;--accent-n1:#e94560;--accent-n2:#f59e0b;--accent-n3:#10b981;--accent-n4:#7c3aed;--accent-n5:#06b6d4;--text-primary:#fff;--text-secondary:#ffffffb3;--text-muted:#fff6;--font-jp:"Noto Sans JP", sans-serif;--font-kr:"Noto Sans KR", sans-serif;--font-en:"Outfit", sans-serif;--header-height:60px;--footer-height:50px;--safe-bottom:env(safe-area-inset-bottom,0px);--shadow-glow-primary:0 0 30px #e945604d;--shadow-glow-secondary:0 0 30px #7c3aed4d;--shadow-glow-teal:0 0 30px #06b6d44d;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s ease}html{-webkit-tap-highlight-color:transparent;height:100%;font-size:16px}#root{height:100%}body{font-family:var(--font-en);background-color:var(--bg-primary);color:var(--text-primary);height:100%;min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:-webkit-fill-available}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--accent-secondary);border-radius:2px}.app-wrapper{min-height:100dvh;flex-direction:column;max-width:480px;min-height:-webkit-fill-available;margin:0 auto;display:flex;position:relative}.main-content{padding-top:calc(var(--header-height) + 10px);flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.routes-container{flex-direction:column;flex:1;min-height:0;display:flex}.header{width:100%;max-width:480px;height:var(--header-height);z-index:100;-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--bg-glass-border);background:#0f0e17e6;justify-content:space-between;align-items:center;padding:0 16px;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.header-home-btn{z-index:101;align-items:center;padding:8px;text-decoration:none;display:flex}.header-icon{font-size:1.2rem}.header-title{font-family:var(--font-jp);background:linear-gradient(135deg,#e94560,#7c3aed,#06b6d4);-webkit-text-fill-color:transparent;letter-spacing:.05em;-webkit-background-clip:text;background-clip:text;font-size:1.2rem;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}.hamburger-btn{cursor:pointer;z-index:101;background:0 0;border:none;flex-direction:column;gap:5px;padding:8px;display:flex}.hamburger-line{background-color:var(--text-primary);width:24px;height:2px;transition:all var(--transition-fast);border-radius:2px}.menu-overlay{-webkit-backdrop-filter:blur(4px);z-index:999;opacity:0;visibility:hidden;transition:all var(--transition-normal);background:#0009;position:fixed;inset:0}.menu-overlay.show{opacity:1;visibility:visible}.side-menu{border-left:1px solid var(--bg-glass-border);width:260px;transition:transform var(--transition-normal);background:#0f0e17f2;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0;transform:translate(100%)}.side-menu.show{transform:translate(0)}.side-menu-header{height:var(--header-height);border-bottom:1px solid var(--bg-glass-border);justify-content:space-between;align-items:center;padding:0 20px;display:flex}.side-menu-header h3{color:var(--text-primary);font-size:1rem;font-weight:500}.close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:4px;font-size:1.2rem}.side-menu-links{flex-direction:column;padding:16px 0;display:flex}.side-item{color:var(--text-secondary);font-family:var(--font-kr);transition:background var(--transition-fast), color var(--transition-fast);align-items:center;gap:12px;padding:16px 24px;font-size:1rem;font-weight:500;text-decoration:none;display:flex}.side-item:active{background:#ffffff0d}.side-item.active{background:var(--bg-glass);color:var(--text-primary);border-left:3px solid var(--accent-primary)}.side-icon{font-size:1.2rem}.footer{width:100%;max-width:480px;height:var(--footer-height);padding-bottom:var(--safe-bottom);box-sizing:content-box;background:#0a0a14fa;border-top:1px solid #ffffff0d;flex-shrink:0;justify-content:center;align-items:center;margin-top:auto;display:flex}.footer-text{font-family:var(--font-en);color:var(--text-muted);letter-spacing:.03em;font-size:.6rem}.home-page{flex-direction:column;flex:1;padding:10px 20px 40px;display:flex;overflow-y:auto}.home-hero{text-align:center;padding:20px 0 32px}.home-hero-title{font-family:var(--font-jp);margin-bottom:8px;font-size:2rem;font-weight:700;line-height:1.2}.home-hero-title span{display:block}.home-hero-title .gradient-text{background:linear-gradient(135deg,#e94560,#7c3aed);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.home-hero-sub{font-family:var(--font-kr);color:var(--text-muted);margin-top:8px;font-size:.9rem}.home-cards-grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;display:grid}.level-card{border-radius:var(--radius-lg);cursor:pointer;border:1px solid var(--bg-glass-border);transition:transform var(--transition-normal), box-shadow var(--transition-normal);flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:160px;padding:28px 20px;text-decoration:none;display:flex;position:relative;overflow:hidden}.level-card:before{content:"";opacity:.15;transition:opacity var(--transition-normal);position:absolute;inset:0}.level-card.n1{background:linear-gradient(135deg,#e9456033,#c828461a);box-shadow:0 4px 24px #e9456026}.level-card.n1:before{background:radial-gradient(circle at 50% 0,#e9456080,#0000 70%)}.level-card.n2{background:linear-gradient(135deg,#f59e0b33,#d977061a);box-shadow:0 4px 24px #f59e0b26}.level-card.n2:before{background:radial-gradient(circle at 50% 0,#f59e0b80,#0000 70%)}.level-card.n3{background:linear-gradient(135deg,#10b98133,#0596691a);box-shadow:0 4px 24px #10b98126}.level-card.n3:before{background:radial-gradient(circle at 50% 0,#10b98180,#0000 70%)}.level-card.n4{background:linear-gradient(135deg,#7c3aed33,#6d28d91a);box-shadow:0 4px 24px #7c3aed26}.level-card.n4:before{background:radial-gradient(circle at 50% 0,#7c3aed80,#0000 70%)}.level-card.n5{background:linear-gradient(135deg,#06b6d433,#0e74901a);box-shadow:0 4px 24px #06b6d426}.level-card.n5:before{background:radial-gradient(circle at 50% 0,#06b6d480,#0000 70%)}.level-card:active{transform:scale(.96)}.level-card-badge{width:64px;height:64px;font-family:var(--font-en);z-index:1;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex;position:relative}.level-card.n1 .level-card-badge{background:linear-gradient(135deg,#e94560,#c82846);box-shadow:0 0 20px #e9456080}.level-card.n2 .level-card-badge{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 0 20px #f59e0b80}.level-card.n3 .level-card-badge{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 0 20px #10b98180}.level-card.n4 .level-card-badge{background:linear-gradient(135deg,#7c3aed,#a855f7);box-shadow:0 0 20px #7c3aed80}.level-card.n5 .level-card-badge{background:linear-gradient(135deg,#06b6d4,#0891b2);box-shadow:0 0 20px #06b6d480}.level-card-title{font-family:var(--font-jp);z-index:1;color:var(--text-primary);font-size:1rem;font-weight:600;position:relative}.level-card-count{font-family:var(--font-kr);color:var(--text-muted);z-index:1;font-size:.75rem;position:relative}.home-stats{background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-md);margin-top:24px;padding:20px}.home-stats-title{font-family:var(--font-kr);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;font-size:.8rem}.home-stats-row{justify-content:space-around;display:flex}.home-stat{text-align:center}.home-stat-num{font-family:var(--font-en);background:linear-gradient(135deg,#e94560,#7c3aed);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.6rem;font-weight:700}.home-stat-label{font-family:var(--font-kr);color:var(--text-muted);margin-top:2px;font-size:.7rem}.card-page{flex-direction:column;flex:1;gap:12px;min-height:0;padding:0 16px 10px;display:flex}.options-bar{flex-wrap:wrap;gap:8px;display:flex}.option-group{background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:var(--radius-sm);gap:2px;padding:4px;display:flex}.option-btn{font-family:var(--font-kr);cursor:pointer;transition:all var(--transition-fast);color:var(--text-muted);white-space:nowrap;background:0 0;border:none;border-radius:6px;padding:6px 10px;font-size:.7rem;font-weight:500}.option-btn.active{background:var(--accent-primary);color:#fff;box-shadow:0 2px 8px #e9456066}.progress-bar-outer{background:#ffffff14;border-radius:2px;height:3px;overflow:hidden}.progress-bar-inner{background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));border-radius:2px;height:100%;transition:width .4s}.progress-info{justify-content:space-between;align-items:center;margin-top:4px;display:flex}.progress-text{font-family:var(--font-en);color:var(--text-muted);font-size:.7rem}.card-area{perspective:1000px;touch-action:none;flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.flashcard-wrapper{aspect-ratio:3/4;cursor:pointer;--flip-angle:0deg;width:100%;max-width:360px;max-height:100%;transform-style:preserve-3d;-webkit-user-select:none;user-select:none;transform:rotateY(var(--flip-angle));transition:transform .6s cubic-bezier(.4,0,.2,1);position:relative}.flashcard-wrapper.flipped{--flip-angle:180deg}.flashcard-wrapper.sliding-left{animation:.35s cubic-bezier(.4,0,.2,1) forwards slideLeft}.flashcard-wrapper.sliding-right{animation:.35s cubic-bezier(.4,0,.2,1) forwards slideRight}@keyframes slideLeft{0%{transform:translateX(0) scale(1) rotateY(var(--flip-angle));opacity:1}45%{transform:translateX(-150px) scale(.9) rotateZ(-8deg) rotateY(var(--flip-angle));opacity:0}50%{transform:translateX(150px) scale(.9) rotateZ(8deg) rotateY(var(--flip-angle));opacity:0}to{transform:translateX(0) scale(1) rotateY(var(--flip-angle));opacity:1}}@keyframes slideRight{0%{transform:translateX(0) scale(1) rotateY(var(--flip-angle));opacity:1}45%{transform:translateX(150px) scale(.9) rotateZ(8deg) rotateY(var(--flip-angle));opacity:0}50%{transform:translateX(-150px) scale(.9) rotateZ(-8deg) rotateY(var(--flip-angle));opacity:0}to{transform:translateX(0) scale(1) rotateY(var(--flip-angle));opacity:1}}.flashcard-face{border-radius:var(--radius-xl);backface-visibility:hidden;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:32px 24px;display:flex;position:absolute;inset:0;overflow:hidden}.card-front{background:linear-gradient(145deg,#1e1b4b,#1a1a2e);border:1px solid #7c3aed4d;box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff0d}.card-back{background:linear-gradient(145deg,#0c1624,#0a0f1e);border:1px solid #e945604d;transform:rotateY(180deg);box-shadow:0 20px 60px #00000080,0 0 0 1px #ffffff0d}.card-front:before{content:"";pointer-events:none;background:radial-gradient(#7c3aed1f,#0000 70%);width:140%;height:80%;position:absolute;top:-40%;left:-20%}.card-back:before{content:"";pointer-events:none;background:radial-gradient(#e945601f,#0000 70%);width:140%;height:80%;position:absolute;bottom:-40%;right:-20%}.card-level-badge{font-family:var(--font-en);letter-spacing:.1em;border-radius:20px;padding:4px 10px;font-size:.65rem;font-weight:700;position:absolute;top:16px;left:16px}.card-front .card-level-badge{color:#a78bfa;background:#7c3aed33;border:1px solid #7c3aed66}.card-back .card-level-badge{color:#f87196;background:#e9456033;border:1px solid #e9456066}.card-index-badge{font-family:var(--font-en);color:var(--text-muted);font-size:.65rem;position:absolute;top:16px;right:16px}.card-tap-hint{font-family:var(--font-kr);color:var(--text-muted);align-items:center;gap:4px;font-size:.6rem;display:flex;position:absolute;bottom:14px}.card-front-japan{font-family:var(--font-jp);color:#e2e8f0;text-align:center;letter-spacing:.05em;font-size:3rem;font-weight:500;line-height:1.2}.card-front-kanji{font-family:var(--font-jp);color:#a78bfae6;text-align:center;letter-spacing:.05em;font-size:2.2rem;font-weight:500}.card-divider{background:linear-gradient(90deg,#0000,#fff3,#0000);width:40px;height:1px}.card-back-kor{font-family:var(--font-kr);color:#f1f5f9;text-align:center;font-size:2rem;font-weight:600;line-height:1.3}.card-back-japan-hint{font-family:var(--font-jp);color:var(--text-muted);text-align:center;font-size:1.4rem}.swipe-hints{justify-content:space-between;align-items:center;padding:0 8px;display:flex}.swipe-hint{font-family:var(--font-kr);color:var(--text-muted);background:var(--bg-glass);border:1px solid var(--bg-glass-border);border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:.65rem;display:flex}.loading-spinner{height:100%;color:var(--text-muted);font-family:var(--font-kr);flex-direction:column;justify-content:center;align-items:center;gap:16px;font-size:.9rem;display:flex}.spinner{border:3px solid #ffffff1a;border-top-color:var(--accent-primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.bg-orb{filter:blur(80px);pointer-events:none;z-index:0;border-radius:50%;position:fixed}.bg-orb-1{background:#7c3aed26;width:200px;height:200px;top:10%;right:-50px}.bg-orb-2{background:#e945601a;width:150px;height:150px;bottom:20%;left:-30px}