.library{height:100%;padding:16px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));overflow-y:auto}.library.drag-over{outline:3px dashed var(--amber);outline-offset:-8px}.library-head{flex-wrap:wrap;align-items:center;gap:10px;max-width:1100px;margin:0 auto 12px;display:flex}.library-head h1{flex:auto;margin:0;font-size:24px}.library-head h1 .muted{font-size:15px;font-weight:500}.search{flex:260px;align-items:center;max-width:380px;display:flex;position:relative}.search svg{color:var(--text-sub);position:absolute;left:12px}.search .input{width:100%;padding-left:38px}.menu-wrap{position:relative}.menu{z-index:20;border-radius:var(--radius-sm);background:var(--surface-3);flex-direction:column;min-width:190px;padding:6px;display:flex;position:absolute;top:44px;right:0;box-shadow:0 12px 40px #00000080}.menu button{text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;height:42px;padding:0 12px;display:flex}.menu button:hover{background:var(--surface-2)}.chips{gap:8px;max-width:1100px;margin:0 auto 14px;display:flex}.song-list{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;max-width:1100px;margin:0 auto;display:grid}.song-card{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);align-items:center;gap:4px;padding-right:6px;display:flex}.song-open{text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:14px;min-width:0;padding:12px;display:flex}.song-thumb{background:var(--paper);color:#334155;border-radius:6px;flex:none;justify-content:center;align-items:center;width:54px;height:66px;display:flex}.song-thumb.tab{color:var(--amber-dark)}.song-text{flex-direction:column;min-width:0;display:flex}.song-title{text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:700;overflow:hidden}.song-artist{color:var(--text-sub);font-size:14px}.song-meta{color:var(--text-sub);flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px;font-size:12px;display:flex}.badge{background:var(--surface-3);border-radius:10px;padding:1px 7px;font-weight:700}.badge.tab{color:var(--amber);background:#f59e0b2e}.tag{color:var(--amber)}.empty{color:var(--text-sub);text-align:center;grid-column:1/-1;padding:48px 16px}.empty p{line-height:1.7}.busy{background:var(--surface-3);border-radius:20px;padding:10px 16px;position:fixed;bottom:16px;right:16px}.metronome{border:1px solid var(--line);background:var(--surface-2);contain:paint;border-radius:22px;align-items:center;gap:4px;min-width:0;height:44px;padding:0 4px;display:flex;position:relative;overflow:hidden}.metronome.running{border-color:#f59e0b8c}.metro-toggle{background:var(--surface-3);width:36px;height:36px}.beat-dots{flex:none;align-items:center;gap:7px;padding:0 8px;display:flex;position:relative}.beat-dot{background:#3a4762;border-radius:50%;width:11px;height:11px;transition:background 60ms linear}.beat-dot.first{background:0 0;border:2px solid #f59e0b99;width:15px;height:15px}.beat-dot.on{background:var(--amber-light);box-shadow:0 0 8px #fef3c7b3}.beat-dot.first.on{background:var(--amber);border-color:var(--amber-light);box-shadow:0 0 14px 4px var(--amber-glow);animation:.26s cubic-bezier(.2,1.6,.4,1) accent-pop}@keyframes accent-pop{0%{transform:scale(1)}35%{transform:scale(1.9)}to{transform:scale(1)}}.accent-ring{border:2px solid var(--amber);pointer-events:none;border-radius:50%;width:16px;height:16px;margin:-8px 0 0 -8px;animation:.48s ease-out forwards accent-ring;position:absolute;top:50%;left:15.5px}@keyframes accent-ring{0%{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}.accent-flash{pointer-events:none;background:radial-gradient(circle at 70px,#f59e0b6b,#0000 60%);animation:.38s ease-out forwards accent-flash;position:absolute;inset:0}@keyframes accent-flash{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.beat-dot.first.on,.accent-ring,.accent-flash{animation-duration:1ms}}.bpm{flex:none;align-items:baseline;gap:3px;display:flex}.bpm-input{text-align:right;font-variant-numeric:tabular-nums;background:0 0;border:none;border-radius:6px;width:46px;height:34px;padding:0;font-size:22px;font-weight:700}.bpm-input:focus{background:var(--surface-3);outline:none}.bpm-unit{color:var(--text-sub);font-size:11px}.tap-btn{min-height:34px;padding:0 10px}.volume-wrap{position:static}.volume-pop{z-index:2;background:var(--surface-3);border-radius:18px;align-items:center;gap:8px;padding:0 12px;display:flex;position:absolute;top:4px;bottom:4px;right:44px}.volume-pop input{width:120px}.volume-pop span{text-align:right;width:38px;font-size:13px}.metronome .select{height:32px}@media (max-width:860px){.metronome .tap-btn{padding:0 8px}}.settings{height:100%;padding:16px 16px 48px;overflow-y:auto}.settings>*{max-width:760px;margin-left:auto;margin-right:auto}.settings h1{margin-top:0;margin-bottom:12px;font-size:24px}.settings section{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);margin-bottom:18px;padding:6px 18px}.settings h2{color:var(--amber);margin:12px 0 4px;font-size:15px}.set-row{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding:12px 0;display:flex}.set-row:last-child{border-bottom:none}.set-label{flex-direction:column;display:flex}.set-label small{color:var(--text-sub)}.set-control{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.input.num{width:90px}.a4-value{text-align:center;min-width:70px}.ok{color:var(--success);font-weight:700}.segmented{border-radius:var(--radius-sm);border:1px solid var(--line);flex-wrap:wrap;display:flex;overflow:hidden}.segmented button{background:var(--surface-2);border:none;min-height:38px;padding:0 14px;font-weight:600}.segmented button+button{border-left:1px solid var(--line)}.segmented button.on{background:var(--amber);color:#1f1300}.app{height:100%;flex-direction:column;height:100dvh;display:flex;overflow:hidden}.topbar{height:var(--bar-h);padding:4px 8px;padding-top:max(4px, env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line);flex:none;align-items:center;gap:6px;display:flex}.topbar-spacer{flex:1}.brand{width:40px;height:40px;color:var(--amber);justify-content:center;align-items:center;display:inline-flex}.screen{flex:1;min-height:0;position:relative;overflow:hidden}.loading{text-align:center;color:var(--text-sub);padding:40px}.update-banner{left:50%;top:calc(var(--bar-h) + 10px);z-index:90;background:var(--surface-3);border:1px solid var(--amber);border-radius:28px;align-items:center;gap:12px;padding:8px 8px 8px 18px;font-weight:600;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 10px 30px #00000073}@font-face{font-family:Pretendard Variable;font-weight:45 920;font-style:normal;font-display:swap;src:url(/assets/PretendardVariable-CJuje-Rk.woff2)format("woff2-variations")}:root{--amber:#f59e0b;--amber-dark:#d97706;--amber-light:#fef3c7;--amber-glow:#f59e0b73;--success:#22c55e;--warning:#f97316;--error:#ef4444;--info:#3b82f6;--bg:#0b1220;--surface:#111a2c;--surface-2:#1a2438;--surface-3:#243049;--line:#2b3852;--text:#f3f4f6;--text-sub:#9aa4b5;--paper:#fff;--radius:12px;--radius-sm:8px;--bar-h:52px;--font:"Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-size:15px;line-height:1.45}input,select,textarea{-webkit-user-select:text;user-select:text}button,input,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.btn{border-radius:var(--radius-sm);background:var(--surface-3);white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;min-height:40px;padding:0 16px;font-weight:600;display:inline-flex}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--amber);color:#1f1300}.btn-primary:active{background:var(--amber-dark)}.btn-outline{border-color:var(--amber);color:var(--amber);background:0 0}.btn-danger{background:var(--error);color:#fff}.btn-ghost{background:0 0}.icon-btn{border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text);background:0 0;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.icon-btn:active,.btn:active{transform:scale(.96)}.icon-btn.active{background:var(--amber);color:#1f1300}.icon-btn.round{border-radius:50%}.icon-btn.play{background:var(--amber);color:#1f1300;border-radius:50%}.chip{border:1px solid var(--line);background:var(--surface-2);border-radius:17px;height:34px;padding:0 14px;font-size:14px;font-weight:600}.chip.active{background:var(--amber);border-color:var(--amber);color:#1f1300}.input{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-2);height:40px;padding:0 12px}.select{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-2);height:36px;padding:0 8px}input[type=range]{accent-color:var(--amber)}.dialog-backdrop{z-index:100;background:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{border-radius:var(--radius);background:var(--surface-2);width:min(420px,100%);padding:22px;box-shadow:0 20px 60px #00000080}.dialog h2{margin:0 0 8px;font-size:18px}.dialog p{color:var(--text-sub);white-space:pre-line;margin:0 0 18px}.dialog-actions{justify-content:flex-end;gap:8px;display:flex}.toasts{z-index:120;pointer-events:none;flex-direction:column;gap:8px;width:min(560px,100% - 32px);display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast{border-radius:var(--radius-sm);background:var(--surface-3);border-left:4px solid var(--info);white-space:pre-line;pointer-events:auto;padding:12px 16px;box-shadow:0 8px 30px #0006}.toast.error{border-left-color:var(--error)}.toast.success{border-left-color:var(--success)}.muted{color:var(--text-sub)}