:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary:#2563eb;--accent:#7c3aed;--teal:#0d9488;--primary-ink:#2563eb;--accent-ink:#7c3aed;--bg:#f6f7fb;--card:#fff;--card-border:#e5e7eb;--card-shadow:0 4px 24px #0f172a0f;--text:#111827;--text-body:#374151;--text-muted:#6b7280;--text-faint:#9ca3af;--field-bg:#fff;--field-border:#d1d5db;--hover-bg:#f9fafb;--chip-bg:#f3f4f6;--info-bg:#eff6ff;--info-ink:#1d4ed8;--success-ink:#15803d;--success-bg:#f0fdf4;--warn-ink:#92400e;--warn-bg:#fffbeb;--warn-border:#fde68a;--danger-ink:#b91c1c;--danger-bg:#fef2f2;--danger-border:#fecaca;--accent-soft:#f8faff;--accent-soft-border:#c7d2fe;font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--primary-ink:#60a5fa;--accent-ink:#a78bfa;--bg:#0f1117;--card:#171b24;--card-border:#2a2f3c;--card-shadow:0 4px 24px #0006;--text:#e5e7eb;--text-body:#cbd5e1;--text-muted:#94a3b8;--text-faint:#798294;--field-bg:#1e2330;--field-border:#3a4150;--hover-bg:#222836;--chip-bg:#232836;--info-bg:#1c2942;--info-ink:#93c5fd;--success-ink:#4ade80;--success-bg:#14261a;--warn-ink:#fcd34d;--warn-bg:#2a2311;--warn-border:#574a1a;--danger-ink:#f87171;--danger-bg:#2b1618;--danger-border:#5f2b2b;--accent-soft:#1a2030;--accent-soft-border:#34406b}}*{box-sizing:border-box}body{background:var(--bg);min-height:100svh;color:var(--text);margin:0}.app{flex-direction:column;gap:20px;max-width:1000px;margin:0 auto;padding:24px 20px 60px;display:flex}.app__header{text-align:center;position:relative}.app__logo{letter-spacing:-.02em;background:linear-gradient(90deg,#2563eb,#7c3aed);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:40px;font-weight:800}.app__tagline{color:var(--text-muted);margin:4px 0 0;font-size:15px}.controls,.controls__group{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px;display:flex}.controls__sep{background:var(--card-border);flex-shrink:0;width:1px;height:28px}.btn{font:inherit;cursor:pointer;color:#fff;background:var(--primary);border:none;border-radius:999px;padding:12px 30px;font-size:17px;font-weight:700;transition:transform 80ms,background .15s,box-shadow .15s;box-shadow:0 6px 16px #2563eb47}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn--play{padding:12px 24px}.btn--play.is-playing{background:#dc2626;box-shadow:0 6px 16px #dc262647}.speed{color:var(--text-body);align-items:center;gap:10px;font-size:14px;display:flex}.speed__val{font-variant-numeric:tabular-nums;color:var(--primary-ink);min-width:44px;font-weight:700}.speed input[type=range]{accent-color:var(--primary);width:90px}.banner{text-align:center;background:var(--info-bg);color:var(--info-ink);border-radius:10px;padding:10px 14px;font-size:14px}.banner--error{background:var(--danger-bg);color:var(--danger-ink)}.banner--info{background:var(--success-bg);color:var(--success-ink)}.banner--busy{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.spinner{border:2px solid;border-right-color:#0000;border-radius:50%;flex-shrink:0;width:14px;height:14px;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.sheet-wrap{border:1px solid var(--card-border);box-shadow:var(--card-shadow);background:#fff;border-radius:14px;padding:16px;position:relative;overflow-x:auto}.sheet{min-height:200px}.app__footer{text-align:center;color:var(--text-faint);font-size:13px;line-height:1.6}.confirmbar,.undobar{border-radius:10px;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 14px;font-size:14px;display:flex}.confirmbar{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-ink)}.undobar{background:var(--chip-bg);border:1px solid var(--card-border);color:var(--text-body)}.confirmbar__msg{flex:1;min-width:200px;line-height:1.5}.confirmbar__btns{flex-shrink:0;gap:8px;display:flex}.confirmbar__url{min-width:200px;font:inherit;border:1px solid var(--field-border);background:var(--field-bg);color:var(--text);border-radius:8px;flex:1;padding:8px 10px;font-size:13px}.editor{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:14px;flex-direction:column;gap:12px;padding:16px 18px;display:flex}.editor__row{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.selbox{background:var(--chip-bg);border:2px solid #0000;border-radius:10px;align-items:center;gap:10px;min-width:150px;padding:8px 14px;display:flex}.selbox.is-active{background:var(--info-bg);border-color:var(--primary)}.selbox__pitch{color:var(--primary-ink);font-variant-numeric:tabular-nums;font-size:22px;font-weight:800}.selbox__lyric{color:var(--text-muted);font-size:14px}.editor-cta{text-align:center;color:var(--text-faint);font-size:13px}.stepper{gap:8px;display:flex}.btn--step{background:var(--primary);padding:10px 18px;font-size:18px;box-shadow:0 4px 12px #2563eb40}.btn--ghost{color:var(--text-body);background:var(--card);border:1px solid var(--field-border);box-shadow:none;padding:10px 16px;font-size:14px;font-weight:600}.btn--ghost:hover:not(:disabled){background:var(--hover-bg)}.btn--reset{color:var(--danger-ink);background:var(--card);border:1px solid var(--danger-border);box-shadow:none;margin-left:auto;padding:10px 16px;font-size:14px;font-weight:600}.btn--reset:hover:not(:disabled){background:var(--danger-bg)}kbd{border:1px solid var(--field-border);background:var(--hover-bg);color:var(--text-body);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:ui-monospace,monospace;font-size:12px;display:inline-block}.note-highlight{pointer-events:none;z-index:5;background:#2563eb2e;border:2px solid #2563eb;border-radius:6px;transition:left 80ms,top 80ms,width 80ms,height 80ms;display:none;position:absolute}.selbox__dur{color:var(--accent-ink);white-space:nowrap;background:#7c3aed1f;border-radius:999px;padding:2px 8px;font-size:13px;font-weight:700}.btn--dur{background:var(--accent);align-items:center;gap:5px;display:inline-flex;box-shadow:0 4px 12px #7c3aed40}.btn--dur small{font-size:13px;font-weight:700}.editor__notice{color:var(--warn-ink);background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:8px;padding:8px 12px;font-size:13px}.ctl{flex-direction:column;align-items:center;gap:3px;display:flex}.ctl__label{color:var(--text-muted);letter-spacing:.04em;font-size:11px;font-weight:700}.ctl--end{margin-left:auto}.btn--pick{color:var(--accent-ink);background:var(--card);border:1px solid var(--accent-soft-border);box-shadow:none;padding:10px 14px;font-size:17px;font-weight:700;line-height:1}.btn--pick:hover:not(:disabled){background:var(--accent-soft)}.btn--pick.is-current{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 4px 12px #7c3aed40}@media (width>=641px){.editor{z-index:10;position:sticky;top:10px}}.imgpanel{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:14px;flex-direction:column;gap:10px;padding:14px 16px;display:flex}.imgpanel__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.imgpanel__title{color:var(--text);overflow-wrap:anywhere;font-size:14px;font-weight:700}.imgpanel__title small{color:var(--text-faint);font-weight:500}.imgpanel__btns{flex-wrap:wrap;flex-shrink:0;gap:8px;display:flex}.imgpanel__body{border:1px solid var(--card-border);background:#f8fafc;border-radius:10px;justify-content:center;max-height:460px;display:flex;overflow:auto}.imgpanel__body img{cursor:zoom-in;max-width:100%;height:auto;display:block}.imgpanel__note{color:var(--text-muted);background:var(--chip-bg);border-radius:8px;padding:8px 12px;font-size:13px;line-height:1.5}.btn--sm{padding:7px 12px;font-size:13px}.btn--danger{color:var(--danger-ink);border-color:var(--danger-border)}.btn--danger:hover:not(:disabled){background:var(--danger-bg)}.dragveil{z-index:100;color:#1d4ed8;pointer-events:none;background:#dbeafed9;border:4px dashed #2563eb;border-radius:18px;justify-content:center;align-items:center;font-size:22px;font-weight:800;display:flex;position:fixed;inset:0}.inst{color:var(--text-body);align-items:center;gap:10px;font-size:14px;display:flex}.inst select{font:inherit;color:var(--text);border:1px solid var(--field-border);background:var(--field-bg);cursor:pointer;border-radius:10px;padding:9px 12px;font-weight:600}.inst select:disabled{opacity:.5;cursor:not-allowed}.login{justify-content:center;padding:40px 0 20px;display:flex}.login__card{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);text-align:center;border-radius:18px;flex-direction:column;gap:18px;width:100%;max-width:380px;padding:40px 44px;display:flex}.login__desc{color:var(--text-muted);margin:0;font-size:14px;line-height:1.6}.login__buttons{flex-direction:column;gap:10px;display:flex}.login__btn{border-radius:12px;justify-content:center;align-items:center;gap:10px;padding:13px 16px;font-size:15px;font-weight:700;text-decoration:none;transition:transform 80ms,filter .15s;display:flex}.login__btn:hover{filter:brightness(.97);transform:translateY(-1px)}.login__btn--google{color:#111827;background:#fff;border:1px solid #d1d5db}.login__btn--kakao{color:#191919;background:#fee500}.login__btn-mark{background:#00000014;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:13px;font-weight:900;display:inline-flex}.login__hint{color:var(--text-faint);margin:0;font-size:12px}.login__demo{color:var(--primary-ink);font-size:13px;font-weight:700;text-decoration:none}.login__demo:hover{text-decoration:underline}.app__user{align-items:center;gap:10px;display:flex;position:absolute;top:6px;right:0}.app__user-name{color:var(--text-muted);align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.app__user-badge{color:var(--accent-ink);background:#7c3aed1f;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800}.scorelist{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:14px;flex-direction:column;gap:16px;padding:20px 22px;display:flex}.scorelist__head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.scorelist__title{color:var(--text);margin:0;font-size:19px;font-weight:800}.scorelist__empty{text-align:center;color:var(--text-muted);flex-direction:column;align-items:center;gap:12px;padding:36px 0 28px;display:flex}.scorelist__empty-icon{font-size:40px}.scorelist__empty-hint{color:var(--text-faint);max-width:380px;font-size:12px;line-height:1.6}.scorelist__items{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.scorecard{border:1px solid var(--card-border);border-radius:12px;align-items:center;gap:12px;padding:10px 14px;transition:border-color .15s,box-shadow .15s;display:flex}.scorecard:hover{border-color:var(--primary);box-shadow:0 2px 12px #2563eb14}.scorecard__main{cursor:pointer;font:inherit;color:inherit;text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:12px;min-width:0;padding:4px 0;display:flex}.scorecard__icon{font-size:26px}.scorecard__text{flex-direction:column;gap:2px;min-width:0;display:flex}.scorecard__name{color:var(--text);overflow-wrap:anywhere;font-size:15px;font-weight:700}.scorecard__date{color:var(--text-faint);font-size:12px}.scorecard__actions{flex-shrink:0;gap:6px;display:flex}.editor-topbar{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:14px;align-items:center;gap:12px;padding:12px 16px;display:flex}.editor-topbar__title{min-width:0;font:inherit;color:var(--text);background:0 0;border:1px solid #0000;border-radius:8px;flex:1;padding:8px 10px;font-size:17px;font-weight:700}.editor-topbar__title:hover{border-color:var(--card-border)}.editor-topbar__title:focus{border-color:var(--primary);background:var(--field-bg);outline:none}.savestate{white-space:nowrap;color:var(--success-ink);font-size:12px;font-weight:700}.savestate--pending,.savestate--saving{color:var(--warn-ink)}.savestate--error{color:var(--danger-ink)}.savestate--conflict{color:var(--danger-ink);font-weight:600}.scorelist__head-btns{flex-wrap:wrap;gap:8px;display:flex}.newscore{border:1px solid var(--accent-soft-border);background:var(--accent-soft);border-radius:12px;flex-direction:column;gap:12px;padding:16px;display:flex}.newscore__fields{flex-wrap:wrap;gap:14px;display:flex}.newscore__field{color:var(--text-muted);flex-direction:column;gap:5px;font-size:12px;font-weight:700;display:flex}.newscore__field--title{flex:1;min-width:160px}.newscore__field input,.newscore__field select{font:inherit;color:var(--text);border:1px solid var(--field-border);background:var(--field-bg);border-radius:8px;padding:9px 10px;font-size:14px;font-weight:600}.newscore__field input[type=number]{width:84px}.newscore__actions{gap:8px;display:flex}.newscore__hint{color:var(--text-muted);margin:0;font-size:12px;line-height:1.6}.btn--make{background:var(--teal);padding:10px 12px;font-size:13px;box-shadow:0 4px 12px #0d948840}.tempo{color:var(--text-body);align-items:center;gap:8px;font-size:14px;display:flex}.tempo__unit{color:var(--text);font-weight:700}.tempo input{font:inherit;color:var(--text);border:1px solid var(--field-border);background:var(--field-bg);border-radius:10px;width:64px;padding:8px 10px;font-weight:700}.range{color:var(--text-body);align-items:center;gap:6px;font-size:14px;display:flex}.range input{font:inherit;color:var(--text);border:1px solid var(--field-border);background:var(--field-bg);text-align:center;border-radius:10px;width:52px;padding:8px 6px;font-weight:700}.range input:disabled{opacity:.5}.btn--ghost.is-active{color:var(--primary-ink);border-color:var(--primary);background:var(--info-bg)}.range-highlight{pointer-events:none;z-index:4;background:#2563eb12;border-top:2px solid #2563eb73;border-bottom:2px solid #2563eb73;position:absolute}.accomp{color:var(--text-body);cursor:pointer;align-items:center;gap:7px;font-size:14px;font-weight:600;display:flex}.accomp input{accent-color:var(--primary);width:16px;height:16px}.btn--acc{padding:10px 12px;font-size:16px}.editor__textrow{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.txtfield{color:var(--text-muted);align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.txtfield input{font:inherit;color:var(--text);border:1px solid var(--field-border);background:var(--field-bg);border-radius:8px;width:150px;padding:8px 10px;font-size:14px;font-weight:600}.editor__texthint{color:var(--text-muted);font-size:12px}.scorecard__shared{color:var(--success-ink);vertical-align:2px;background:#16a34a1f;border-radius:999px;margin-left:8px;padding:2px 8px;font-size:11px;font-weight:800}.shared{flex-direction:column;gap:16px;display:flex}.shared__head{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px;display:flex}.shared__meta{flex-direction:column;gap:3px;min-width:0;display:flex}.shared__title{color:var(--text);overflow-wrap:anywhere;margin:0;font-size:20px;font-weight:800}.shared__owner{color:var(--text-muted);font-size:13px}.shared__actions{flex-shrink:0;align-items:center;gap:10px;display:flex}.shared__login{border:1px solid var(--accent-soft-border);background:var(--accent-soft);color:var(--text-body);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;font-size:14px;display:flex}.shared__login-btns{flex-wrap:wrap;gap:10px;display:flex}.shared__login-btns .login__btn{padding:9px 14px;font-size:13px}.history{background:var(--card);border:1px solid var(--card-border);box-shadow:var(--card-shadow);border-radius:14px;flex-direction:column;gap:16px;padding:20px 22px;display:flex}.history__head{align-items:center;gap:12px;display:flex}.history__title{color:var(--text);margin:0;font-size:19px;font-weight:800}.history__count{color:var(--text-muted);margin-left:8px;font-size:13px;font-weight:700}.history__tablewrap{overflow-x:auto}.history__table{border-collapse:collapse;width:100%;font-size:13px}.history__table th{text-align:left;letter-spacing:.04em;color:var(--text-muted);border-bottom:1px solid var(--card-border);white-space:nowrap;padding:8px 10px;font-size:11px;font-weight:800}.history__table td{border-bottom:1px solid var(--chip-bg);vertical-align:top;padding:9px 10px}.history__time{white-space:nowrap;color:var(--text-muted);font-variant-numeric:tabular-nums}.history__user{color:var(--text);font-weight:700}.history__email{color:var(--text-faint);font-size:12px}.history__score{overflow-wrap:anywhere;color:var(--text-body)}.history__action{background:var(--chip-bg);color:var(--text-body);white-space:nowrap;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;display:inline-block}.history__action--create{background:var(--info-bg);color:var(--info-ink)}.history__action--update{background:var(--warn-bg);color:var(--warn-ink)}.history__action--delete,.history__action--restore{background:var(--danger-bg);color:var(--danger-ink)}.history__action--play{background:var(--success-bg);color:var(--success-ink)}.history__action--omr{color:var(--accent-ink);background:#7c3aed1f}.history__action--share,.history__action--unshare,.history__action--copy,.history__action--shared_view{color:#0e7490;background:#0e74901f}.history__more{justify-content:center;display:flex}@media (prefers-color-scheme:dark){.history__action--share,.history__action--unshare,.history__action--copy,.history__action--shared_view{color:#67e8f9}}@media (width<=640px){.app{gap:14px;padding:16px 12px 40px}.app__logo{font-size:30px}.app__tagline{font-size:13px}.app__user{flex-wrap:wrap;justify-content:center;margin-top:8px;position:static}.btn{padding:11px 22px;font-size:15px}.controls{gap:10px 12px}.controls__sep{display:none}.editor{z-index:60;border-bottom:none;border-radius:16px 16px 0 0;max-height:45vh;padding:12px 14px;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;box-shadow:0 -8px 32px #0f172a4d}.editor__row{gap:10px 12px}.selbox{justify-content:center;width:100%}.stepper{flex-wrap:wrap}.ctl--end,.btn--reset{margin-left:0}.editor-topbar{gap:8px;padding:10px 12px}.scorelist{padding:14px}.scorelist__head{flex-direction:column;align-items:stretch}.scorecard{flex-direction:column;align-items:stretch;gap:6px}.scorecard__actions{flex-wrap:wrap;justify-content:flex-end}.shared__head{padding:12px 14px}.history{padding:14px}.imgpanel{padding:10px 12px}.sheet-wrap{border-radius:10px;padding:10px}.login__card{padding:28px 22px}}