*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{color:#1a1d23;-webkit-font-smoothing:antialiased;font-family:Pretendard,Apple SD Gothic Neo,-apple-system,Inter,system-ui,sans-serif}.home,.screen{flex-direction:column;align-items:center;height:100%;padding:32px 24px 48px;display:flex;overflow-y:auto}.home-hero{text-align:center;max-width:520px;margin:24px 0 32px}.home-logo{font-size:56px}.home-hero h2{color:#1a1d23;margin:8px 0 6px;font-size:28px;font-weight:800}.home-hero p{color:#64748b;margin:0;font-size:15px;line-height:1.6}.role-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;width:100%;max-width:760px;display:grid}.role-card{color:#1a1d23;background:#fff;border:2px solid #e2e8f0;border-radius:18px;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.role-card:hover{border-color:#3b82f6;transform:translateY(-3px);box-shadow:0 12px 28px #0206171a}.role-card .role-icon{font-size:40px}.role-card .role-title{font-size:17px;font-weight:700}.role-card .role-desc{color:#64748b;font-size:13px}.role-card.trial{background:linear-gradient(135deg,#eff6ff,#fff)}.screen-head{text-align:center;margin-bottom:24px}.screen-head h2{margin:0 0 6px;font-size:24px;font-weight:800}.screen-head p{color:#64748b;margin:0;font-size:14px}.card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;width:100%;max-width:760px;display:grid}.lesson-card{color:#1a1d23;background:#fff;border:2px solid #e2e8f0;border-radius:16px;flex-direction:column;gap:6px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex}.lesson-card:hover{border-color:#3b82f6;transform:translateY(-3px);box-shadow:0 12px 28px #0206171a}.lesson-card .lesson-icon{font-size:36px}.lesson-card .lesson-title{font-size:18px;font-weight:700}.lesson-card .lesson-desc{color:#64748b;font-size:13px;line-height:1.5}.lesson-card .lesson-badge{color:#2563eb;background:#eff6ff;border-radius:999px;align-self:flex-start;padding:2px 10px;font-size:11px;font-weight:700}.entry-box{flex-direction:column;gap:12px;width:100%;max-width:360px;display:flex}.entry-input{text-align:center;letter-spacing:.04em;border:1.5px solid #e2e8f0;border-radius:12px;padding:14px 16px;font-family:inherit;font-size:16px}.entry-input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f626}.entry-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:12px;padding:14px;font-family:inherit;font-size:16px;font-weight:700}.entry-btn:hover{background:#2563eb}.entry-note{color:#94a3b8;text-align:center;margin:0;font-size:12px;line-height:1.5}@media (width<=600px){.home-hero h2{font-size:24px}.home,.screen{padding:24px 16px 40px}}.rhythm{box-sizing:border-box;gap:20px;width:100%;height:100%;padding:20px;display:flex}.rhythm-stage{background:#0a0a0e;border-radius:16px;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.rhythm-video{object-fit:contain;width:100%;height:100%;transform:scaleX(-1)}.rhythm-canvas{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.rhythm-overlay{color:#fff;text-align:center;background:linear-gradient(135deg,#4f46e5,#7c3aed);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.rhythm-overlay p{max-width:360px;font-size:16px;font-weight:500;line-height:1.5}.rhythm-overlay-icon{font-size:56px}.rhythm-hint{opacity:.7;font-size:12px}.rhythm-lost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ad1;border-radius:999px;padding:16px 28px;font-size:22px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.rhythm-hud{color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex;position:absolute;top:12px;left:12px}.hud-dot{background:#64748b;border-radius:50%;width:8px;height:8px}.hud-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e99}.hud-fps{opacity:.6;font-variant-numeric:tabular-nums}.rhythm-score{gap:8px;font-size:13px;font-weight:700;display:flex;position:absolute;top:12px;right:12px}.rhythm-score .sc{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;padding:6px 12px}.sc.perfect{color:#4ade80}.sc.good{color:#fbbf24}.sc.miss{color:#f87171}.sc.combo{color:#93c5fd}.rhythm-panel{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-shrink:0;width:320px;padding:20px;overflow-y:auto}.rhythm-panel h2{margin:0 0 4px;font-size:18px}.rhythm-panel h2 span{color:#94a3b8;font-size:11px;font-weight:500}.panel-desc{color:#475569;margin:0 0 16px;font-size:13px;line-height:1.6}.ctrl-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.ctrl-row label{color:#475569;flex-shrink:0;width:64px;font-size:13px}.ctrl-row select{background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:13px}.ctrl-row input[type=range]{accent-color:#3b82f6;flex:1}.ctrl-val{font-variant-numeric:tabular-nums;color:#3b82f6;text-align:right;width:36px;font-size:13px;font-weight:600}.toggle{cursor:pointer;color:#64748b;background:#fff;border:1.5px solid #e2e8f0;border-radius:999px;padding:6px 16px;font-family:inherit;font-size:13px;font-weight:600}.toggle.on{color:#fff;background:#f59e0b;border-color:#f59e0b}.level-desc{color:#64748b;background:#f8fafc;border-radius:8px;margin:-4px 0 12px;padding:8px 10px;font-size:12px;line-height:1.5}.ctrl-actions{gap:8px;margin:16px 0;display:flex}.btn-primary{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;flex:1;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:700;transition:background .15s}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-ghost{color:#64748b;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600}.guide{color:#475569;background:#f8fafc;border-radius:12px;padding:14px;font-size:12px;line-height:1.6}.guide ol{margin:8px 0 0;padding-left:18px}.guide li{margin-bottom:4px}.rhythm-result{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#080a129e;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.result-card{text-align:center;background:#fff;border-radius:18px;width:360px;max-width:100%;padding:28px 30px;box-shadow:0 24px 60px #0006}.result-grade{margin-bottom:4px;font-size:56px;font-weight:900;line-height:1}.result-grade.g-A{color:#22c55e}.result-grade.g-B{color:#3b82f6}.result-grade.g-C{color:#f59e0b}.result-grade.g-D{color:#ef4444}.result-score{color:#1a1d23;font-size:22px;font-weight:800}.result-msg{color:#475569;margin:6px 0 16px;font-size:14px}.result-stats{flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:12px;display:flex}.result-stats .rs{background:#f1f5f9;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:700}.rs.perfect{color:#16a34a}.rs.good{color:#d97706}.rs.miss{color:#dc2626}.rs.combo{color:#2563eb}.result-tendency{color:#334155;margin-bottom:12px;font-size:13px}.result-tendency .rt-ms{color:#94a3b8;margin-left:4px}.result-reflection{color:#1e40af;text-align:left;background:#eff6ff;border:1px solid #bfdbfe;border-radius:10px;margin-bottom:16px;padding:12px;font-size:13px;line-height:1.6}.spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=860px){.rhythm{flex-direction:column}.rhythm-panel{width:100%}}.melody{box-sizing:border-box;gap:20px;width:100%;height:100%;padding:20px;display:flex}.melody-stage{background:#0a0a0e;border-radius:16px;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.melody-video{object-fit:contain;width:100%;height:100%;transform:scaleX(-1)}.melody-canvas{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.melody-overlay{color:#fff;text-align:center;background:linear-gradient(135deg,#0ea5e9,#6366f1);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.melody-overlay p{max-width:360px;font-size:16px;font-weight:500;line-height:1.5}.melody-overlay-icon{font-size:56px}.melody-hint{opacity:.75;font-size:12px}.melody-lost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ad1;border-radius:999px;padding:16px 28px;font-size:22px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.melody-hud{color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex;position:absolute;top:12px;left:12px}.melody-hud .hud-dot{background:#64748b;border-radius:50%;width:8px;height:8px}.melody-hud .hud-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e99}.melody-hud .hud-fps{opacity:.6;font-variant-numeric:tabular-nums}.melody-panel{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-shrink:0;width:320px;padding:20px;overflow-y:auto}.melody-panel h2{margin:0 0 4px;font-size:18px}.melody-panel h2 span{color:#94a3b8;font-size:11px;font-weight:500}.melody-panel .panel-desc{color:#475569;margin:0 0 16px;font-size:13px;line-height:1.6}.melody-panel .ctrl-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.melody-panel .ctrl-row label{color:#475569;flex-shrink:0;width:48px;font-size:13px}.melody-panel .ctrl-row select{background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:13px}.melody-panel .ctrl-actions{margin:12px 0}.melody-history{background:#f8fafc;border-radius:12px;margin-bottom:16px;padding:12px}.mh-label{color:#475569;margin-bottom:8px;font-size:12px;font-weight:700}.mh-chips{flex-wrap:wrap;align-items:center;gap:6px;min-height:30px;display:flex}.mh-empty{color:#94a3b8;font-size:12px}.mh-chip{color:#0369a1;background:#e0f2fe;border-radius:8px;padding:4px 10px;font-size:14px;font-weight:700}.melody-panel .reflection{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;margin-bottom:16px;padding:14px;font-size:13px;line-height:1.6}.melody-panel .reflection-label{margin-bottom:4px;font-weight:700}.melody-panel .guide{color:#475569;background:#f8fafc;border-radius:12px;padding:14px;font-size:12px;line-height:1.6}.melody-panel .guide ol{margin:8px 0 0;padding-left:18px}.melody-panel .guide li{margin-bottom:4px}.melody .btn-primary{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:700}.melody .btn-primary:hover{background:#2563eb}.melody .btn-ghost{color:#64748b;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600}.melody .spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@media (width<=860px){.melody{flex-direction:column}.melody-panel{width:100%}}.signs{box-sizing:border-box;gap:20px;width:100%;height:100%;padding:20px;display:flex}.signs-stage{background:#0a0a0e;border-radius:16px;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative;overflow:hidden}.signs-video{object-fit:contain;width:100%;height:100%;transform:scaleX(-1)}.signs-canvas{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.signs-overlay{color:#fff;text-align:center;background:linear-gradient(135deg,#9333ea,#4f46e5);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.signs-overlay p{max-width:360px;font-size:16px;font-weight:500;line-height:1.5}.signs-overlay-icon{font-size:56px}.signs-hint{opacity:.8;font-size:12px;line-height:1.5}.signs-lost{color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ad1;border-radius:999px;padding:16px 28px;font-size:22px;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.signs-hud{color:#e2e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172a99;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:flex;position:absolute;top:12px;left:12px}.signs-hud .hud-dot{background:#64748b;border-radius:50%;width:8px;height:8px}.signs-hud .hud-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e99}.signs-hud .hud-fps{opacity:.6;font-variant-numeric:tabular-nums}.signs-panel{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-shrink:0;width:320px;padding:20px;overflow-y:auto}.signs-panel h2{margin:0 0 4px;font-size:18px}.signs-panel h2 span{color:#94a3b8;font-size:11px;font-weight:500}.signs-panel .panel-desc{color:#475569;margin:0 0 16px;font-size:13px;line-height:1.6}.signs-panel .ctrl-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.signs-panel .ctrl-row label{color:#475569;flex-shrink:0;width:48px;font-size:13px}.signs-panel .ctrl-row select{background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;flex:1;padding:8px 10px;font-family:inherit;font-size:13px}.signs-panel .ctrl-actions{margin:12px 0}.signs-guide-card{background:#faf5ff;border:1px solid #e9d5ff;border-radius:12px;margin-bottom:14px;padding:12px 14px}.sg-label{color:#6b21a8;margin-bottom:6px;font-size:12px;font-weight:700}.sg-list{color:#581c87;flex-direction:column;gap:4px;font-size:13px;display:flex}.sg-sign{margin-right:4px;font-size:16px}.signs-history{background:#f8fafc;border-radius:12px;margin-bottom:16px;padding:12px}.sh-label{color:#475569;margin-bottom:8px;font-size:12px;font-weight:700}.sh-chips{flex-wrap:wrap;align-items:center;gap:6px;min-height:30px;display:flex}.sh-empty{color:#94a3b8;font-size:12px}.sh-chip{color:#6b21a8;background:#f3e8ff;border-radius:8px;padding:4px 10px;font-size:14px;font-weight:700}.signs-panel .reflection{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;margin-bottom:16px;padding:14px;font-size:13px;line-height:1.6}.signs-panel .reflection-label{margin-bottom:4px;font-weight:700}.signs-panel .guide{color:#475569;background:#f8fafc;border-radius:12px;padding:14px;font-size:12px;line-height:1.6}.signs-panel .guide ol{margin:8px 0 0;padding-left:18px}.signs-panel .guide li{margin-bottom:4px}.signs .btn-primary{color:#fff;cursor:pointer;background:#9333ea;border:none;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:700}.signs .btn-primary:hover{background:#7e22ce}.signs .btn-ghost{color:#64748b;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;padding:12px 16px;font-family:inherit;font-size:14px;font-weight:600}.signs .spinner{border:4px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:36px;height:36px;animation:.8s linear infinite spin}@media (width<=860px){.signs{flex-direction:column}.signs-panel{width:100%}}.app{flex-direction:column;height:100dvh;display:flex}.app-header{background:#fff;border-bottom:1px solid #e2e8f0;flex-shrink:0;align-items:center;gap:12px;min-height:52px;padding:10px 20px;display:flex}.hdr-back{color:#475569;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;flex-shrink:0;width:34px;height:34px;font-size:18px;line-height:1}.hdr-back:hover{color:#3b82f6;border-color:#3b82f6}.hdr-logo{color:inherit;align-items:center;gap:8px;text-decoration:none;display:flex}.hdr-mark{font-size:22px}.hdr-title{font-size:16px;font-weight:700}.hdr-title em{color:#94a3b8;margin-left:4px;font-size:11px;font-style:normal;font-weight:400}.app-main{background:#f1f5f9;flex:1;min-height:0;display:flex}.app-main>*{flex:1;min-width:0;min-height:0}