:root{--bg:#06050b;--bg2:#0d0a18;--panel:#0b0816;--line:rgba(255,255,255,.08);--txt:#f5f2ff;--mut:#9a94b5;--v:#8b5cf6;--p:#ec4899;--c:#22d3ee;--o:#f97316;--r:#ef4444;--hd:250px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:'Noto Sans KR',sans-serif;font-size:15px}
body{min-height:100vh;overflow-x:hidden}
button,input,textarea,select{font-family:inherit;color:inherit;font-size:inherit}
button{cursor:pointer}
a{color:inherit}
*{scrollbar-width:thin;scrollbar-color:#6d28d9 transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:linear-gradient(#8b5cf6,#ec4899);border-radius:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-corner{background:transparent}
.hide{display:none!important}
.kp{word-break:keep-all}
/* ===== 공통 버튼 ===== */
.btn{text-decoration:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-weight:700;font-size:14px;white-space:nowrap;transition:.15s}
.btn:hover{border-color:rgba(167,139,250,.5)}
.btn.pk{border:0;background:linear-gradient(90deg,#8b5cf6,#ec4899);box-shadow:0 8px 22px rgba(236,72,153,.35);color:#fff}
.btn.gold{border:0;background:linear-gradient(90deg,#f59e0b,#ec4899,#8b5cf6);box-shadow:0 8px 24px rgba(236,72,153,.4);color:#fff}
.btn:disabled{opacity:.45;cursor:default}
.ib{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;font-size:15px;color:#ddd6fe;text-decoration:none;transition:.15s}
.ib:hover{border-color:#a78bfa;color:#fff}
/* ===== 첫 화면 (곡 고르기) ===== */
.pk-wrap{max-width:1080px;margin:0 auto;padding:22px 18px 60px}
.pk-top{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.pk-top .lg{display:flex;align-items:center;gap:10px;font-weight:900;font-size:18px;text-decoration:none}
.pk-top .lg i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:19px;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 6px 20px rgba(236,72,153,.4)}
.pk-top .sp{flex:1}
.hero{position:relative;border-radius:28px;padding:34px 30px;overflow:hidden;background:radial-gradient(ellipse at 0% 0%,rgba(139,92,246,.3),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(236,72,153,.25),transparent 55%),#0e0a1c;border:1px solid rgba(167,139,250,.25);margin-bottom:22px}
.hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000,transparent 80%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%)}
.hero>*{position:relative}
.oa-mini{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:11px;border:2px solid #ef4444;font:800 14px 'Space Grotesk',sans-serif;letter-spacing:3px;background:rgba(239,68,68,.15);box-shadow:0 0 22px rgba(239,68,68,.45);text-shadow:0 0 8px #ff7b7b}
.oa-mini i{width:9px;height:9px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 8px #ff4d4d;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.hero h1{margin:16px 0 8px;font-size:30px;letter-spacing:-.5px;line-height:1.3}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#c4b5fd,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:0;color:#c9c3e3;line-height:1.7;max-width:640px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.flow div{position:relative;padding:14px 14px 13px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.flow b{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:4px}
.flow b span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font:700 12px 'Space Grotesk';background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.flow small{display:block;font-size:12.5px;color:var(--mut);line-height:1.5}
.price-note{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.price-note span{padding:7px 12px;border-radius:99px;font-size:12.5px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}
.price-note b{color:#f9a8d4}
.sec{margin-top:26px}
.sec h2{flex-wrap:wrap;display:flex;align-items:center;gap:10px;font-size:18px;margin:0 0 12px}
.sec h2 small{font-size:12.5px;font-weight:400;color:var(--mut)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;background:#0f0c1e;border:1px solid var(--line);text-align:left;transition:.18s}
.card:hover{transform:translateY(-2px);border-color:rgba(236,72,153,.45);box-shadow:0 10px 30px rgba(236,72,153,.12)}
.card b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:4px}
.card small{font-size:12px;color:var(--mut)}
.card .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.card .tags i{font-style:normal;padding:3px 8px;border-radius:7px;font-size:11px;background:rgba(139,92,246,.15);color:#d8b4fe}
.card .st{position:absolute;top:14px;right:14px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700}
.card .st.on{background:rgba(239,68,68,.16);color:#fca5a5;border:1px solid rgba(239,68,68,.4)}
.card .st.off{background:rgba(255,255,255,.06);color:var(--mut);border:1px solid var(--line)}
.card.has-st b{padding-right:70px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:30px 18px;border-radius:20px;border:2px dashed rgba(167,139,250,.4);background:rgba(139,92,246,.05);text-align:center;cursor:pointer;transition:.2s}
.drop:hover,.drop.ov{border-color:#ec4899;background:rgba(236,72,153,.08)}
.drop b{font-size:16px}.drop small{color:var(--mut);font-size:12.5px;line-height:1.6}
.drop .big{font-size:34px}
.empty{padding:22px;border-radius:16px;border:1px dashed var(--line);color:var(--mut);font-size:13.5px;text-align:center;line-height:1.7}
.empty a{color:#f9a8d4;font-weight:700}
/* ===== 상단 바 ===== */
.bar{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:11px 18px;background:linear-gradient(180deg,#120b24,#0b0716);border-bottom:1px solid var(--line)}
.bar:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -40%,rgba(139,92,246,.25),transparent 60%);pointer-events:none}
.song{display:flex;align-items:center;gap:11px;min-width:0;position:relative}
.song .lg{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 6px 20px rgba(236,72,153,.4)}
.song .tx{min-width:0}
.song b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
.song small{display:block;font-size:12px;color:#a79fc8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.center{display:flex;align-items:center;gap:16px;position:relative}
.onair{display:flex;align-items:center;gap:10px;padding:8px 20px;border-radius:14px;border:2px solid rgba(239,68,68,.25);background:#1a0a10;font:800 19px 'Space Grotesk',sans-serif;letter-spacing:4px;color:rgba(239,68,68,.35);transition:.25s;user-select:none}
.onair i{width:12px;height:12px;border-radius:50%;background:rgba(239,68,68,.3)}
.onair em{font-style:normal;letter-spacing:1px;font-size:15px;color:rgba(255,255,255,.25);font-weight:700;min-width:44px}
.onair.live{color:#fff;border-color:#ef4444;background:radial-gradient(ellipse,#7f1d1d,#3b0a0f);text-shadow:0 0 12px #f87171,0 0 24px #ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.6),0 0 30px rgba(239,68,68,.65),0 0 70px rgba(239,68,68,.35),inset 0 0 20px rgba(239,68,68,.45);animation:oaPulse 2s infinite}
.onair.live i{background:#ff4d4d;box-shadow:0 0 12px #ff4d4d,0 0 22px #ef4444;animation:blink 1s infinite}
.onair.live em{color:#fecaca;text-shadow:0 0 10px #ef4444}
.onair.cnt{color:#fde68a;border-color:#f59e0b;background:#2a1a05;box-shadow:0 0 24px rgba(245,158,11,.45)}
@keyframes oaPulse{50%{box-shadow:0 0 0 1px rgba(239,68,68,.6),0 0 40px rgba(239,68,68,.8),0 0 90px rgba(239,68,68,.45),inset 0 0 24px rgba(239,68,68,.55)}}
.rent{display:flex;align-items:center;gap:10px;cursor:pointer}
.ring{position:relative;width:50px;height:50px}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
.ring .fg{transition:stroke-dashoffset 1s linear}
.rent b{display:block;font:700 19px 'Space Grotesk',sans-serif;letter-spacing:1px}.rent small{display:block;font-size:11px;color:#a79fc8;white-space:nowrap}
.rent.warn b{color:#fb923c}.rent.trial b{color:#fbbf24}
.right{display:flex;justify-content:flex-end;align-items:center;gap:8px;position:relative}
.chip{padding:7px 12px;border-radius:99px;font-size:12.5px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#ddd6fe;white-space:nowrap}
.chip.ok{color:#86efac;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.chip.ing{color:#fde68a;border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.chip.bad{color:#fca5a5;border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08)}
/* 체험 배너 */
.trialbar{display:flex;align-items:center;gap:12px;padding:10px 18px;background:linear-gradient(90deg,rgba(245,158,11,.16),rgba(236,72,153,.12));border-bottom:1px solid rgba(245,158,11,.3);font-size:13.5px;flex-wrap:wrap}
.trialbar b{color:#fde68a}.trialbar .sp{flex:1}
.trialbar .tm{font:700 15px 'Space Grotesk',sans-serif;color:#fbbf24}
.trialbar .btn{padding:9px 16px;font-size:13px}
/* 도우미 한 줄 */
.hint{display:flex;align-items:center;gap:10px;padding:9px 18px;background:linear-gradient(90deg,rgba(34,211,238,.09),rgba(139,92,246,.07));border-bottom:1px solid var(--line);font-size:13.5px;color:#cffafe;min-height:40px}
.hint .em{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(34,211,238,.15);font-size:14px;animation:hintBob 2.4s ease-in-out infinite}
@keyframes hintBob{50%{transform:translateY(-2px)}}
.hint span.t{flex:1;word-break:keep-all;line-height:1.5}
.hint b{color:#fff}
.hint .x{flex:none;border:0;background:transparent;color:var(--mut);font-size:13px;padding:4px 6px}
/* 조작판 */
.tp{display:flex;align-items:center;gap:12px;padding:11px 18px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tb{display:flex;align-items:center;gap:8px}
.bt{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.05);display:grid;place-items:center;font-size:16px;transition:.15s;position:relative}
.bt:hover{border-color:#a78bfa}
.bt.play{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#8b5cf6,#ec4899);border:0;box-shadow:0 8px 22px rgba(139,92,246,.45);font-size:19px;color:#fff}
.bt.rec{width:58px;height:58px;border-radius:50%;border:3px solid rgba(255,255,255,.85);background:radial-gradient(circle,#ef4444 55%,#7f1d1d 56%);box-shadow:0 0 0 4px rgba(239,68,68,.22),0 0 26px rgba(239,68,68,.5)}
.bt.rec.on{background:radial-gradient(circle,#fff 0 30%,#ef4444 31% 55%,#7f1d1d 56%);animation:recGlow 1s infinite}
@keyframes recGlow{50%{box-shadow:0 0 0 7px rgba(239,68,68,.3),0 0 46px rgba(239,68,68,.9)}}
.clock{font:700 28px 'Space Grotesk',sans-serif;letter-spacing:1px;padding:4px 14px;border-radius:12px;background:#05040a;border:1px solid var(--line);min-width:168px;text-align:center;white-space:nowrap}
.clock small{font-size:13px;color:var(--mut);font-weight:500}
.tog{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px;white-space:nowrap;transition:.15s}
.tog.on{border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.1);color:#a5f3fc}
.tog b{font-family:'Space Grotesk',sans-serif}
.tp .sp{flex:1}
.meter{width:90px;height:8px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.meter i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9px;background:linear-gradient(90deg,#22c55e,#facc15 70%,#ef4444);transition:width .06s}
.mic{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
/* 본문 */
.main{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:calc(100vh - var(--top,190px));min-height:480px}
.daw{position:relative;overflow:auto;border-right:1px solid var(--line);background:#08060f}
.ruler{position:sticky;top:0;z-index:6;display:flex;background:var(--panel);border-bottom:1px solid var(--line);min-width:100%;width:max-content}
.ruler .l{position:sticky;left:0;z-index:2;flex:none;width:var(--hd);display:flex;align-items:center;gap:6px;padding:0 10px;font-size:12px;color:var(--mut);background:var(--panel);border-right:1px solid var(--line)}
.ruler .l .sp{flex:1}
.ruler .l button{width:26px;height:24px;border-radius:7px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:13px;line-height:1}
.ruler canvas{display:block;height:30px;cursor:pointer}
.trk{display:flex;border-bottom:1px solid var(--line);min-height:92px;min-width:100%;width:max-content}
.trk.sel{background:rgba(139,92,246,.06)}
.trk.sel .hd{background:#151027}
.hd{position:sticky;left:0;z-index:4;flex:none;width:var(--hd);display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px 10px 10px 16px;background:#0e0b1b;border-right:1px solid var(--line);cursor:pointer}
.hd:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--tc)}
.hd .r1{display:flex;align-items:center;gap:7px}
.hd .ic{font-size:17px}
.hd .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd .nm small{display:block;font-size:10.5px;font-weight:400;color:var(--mut)}
.sm{display:flex;gap:4px}
.sm button{width:26px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--mut);padding:0}
.sm button.arm.on{background:rgba(239,68,68,.22);border-color:#ef4444;color:#fff;box-shadow:0 0 10px rgba(239,68,68,.55)}
.sm button.solo.on{background:rgba(250,204,21,.18);border-color:#facc15;color:#fde68a}
.sm button.mute.on{background:rgba(148,163,184,.2);border-color:#94a3b8;color:#fff}
.hd .r2{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--mut)}
.rng{-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:5px;border-radius:9px;background:linear-gradient(90deg,var(--tc,#a78bfa) var(--pc,50%),rgba(255,255,255,.1) var(--pc,50%));outline:none;margin:0}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.45);cursor:pointer}
.rng::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.fxb{padding:2px 7px;border-radius:6px;font-size:10.5px;background:rgba(139,92,246,.18);color:#d8b4fe;border:1px solid rgba(139,92,246,.35);white-space:nowrap}
.fxb.at{background:rgba(34,211,238,.14);color:#a5f3fc;border-color:rgba(34,211,238,.4)}
.ln{position:relative;flex:none;cursor:pointer}
.ln .lhint{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:12.5px;color:rgba(255,255,255,.28);white-space:nowrap;pointer-events:none}
.clip{position:absolute;top:9px;bottom:9px;border-radius:10px;background:color-mix(in srgb,var(--tc) 20%,transparent);border:1px solid color-mix(in srgb,var(--tc) 55%,transparent);overflow:hidden}
.clip canvas{position:absolute;inset:0;width:100%;height:100%}
.clip small{position:absolute;left:8px;top:3px;font-size:10.5px;color:#fff;opacity:.85;z-index:1;white-space:nowrap}
.clip.off{opacity:.3;filter:grayscale(1)}
.clip.recn{background:rgba(239,68,68,.22);border-color:#ef4444;box-shadow:0 0 18px rgba(239,68,68,.4)}
.ph{position:absolute;top:0;width:2px;background:#fff;box-shadow:0 0 10px #fff,0 0 20px #a78bfa;z-index:5;pointer-events:none;will-change:transform}
.ph:before{content:'';position:absolute;top:0;left:-6px;border:7px solid transparent;border-top:9px solid #fff}
.add{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px;padding:15px;border-radius:14px;border:1.5px dashed rgba(139,92,246,.4);color:#c4b5fd;font-size:14px;font-weight:700;background:rgba(139,92,246,.05);width:calc(100% - 28px);position:sticky;left:14px;max-width:calc(100vw - 370px)}
.add small{font-weight:400;color:var(--mut)}
/* 오른쪽 패널 */
.side{display:flex;flex-direction:column;background:var(--panel);overflow:hidden;min-height:0}
.tabs{display:flex;padding:10px;gap:6px;border-bottom:1px solid var(--line)}
.tabs button{flex:1;padding:10px 6px;border-radius:11px;border:0;background:transparent;color:var(--mut);font-size:13.5px;font-weight:700;white-space:nowrap}
.tabs button.on{background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(236,72,153,.25));color:#fff}
.sb{flex:1;overflow:auto;padding:14px}
.sel-t{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--mut)}.sel-t b{color:#fff;font-size:14.5px}
.tip{padding:10px 12px;border-radius:12px;background:rgba(34,211,238,.07);border:1px solid rgba(34,211,238,.22);color:#cffafe;font-size:12.5px;line-height:1.6;margin-bottom:12px;word-break:keep-all}
.fx{border-radius:14px;padding:12px 13px;margin-bottom:9px;background:rgba(255,255,255,.035);border:1px solid var(--line);transition:.15s}
.fx.on{border-color:rgba(139,92,246,.45);background:rgba(139,92,246,.08)}
.fx .h{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;cursor:pointer;user-select:none}.fx .h small{font-weight:400;color:var(--mut);font-size:11.5px}
.fx .h .sp{flex:1}
.sw{flex:none;width:38px;height:22px;border-radius:99px;background:rgba(255,255,255,.14);position:relative;transition:.2s}.sw:after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.fx.on .sw,.sw.on{background:linear-gradient(90deg,#8b5cf6,#ec4899)}.fx.on .sw:after,.sw.on:after{left:19px}
.fx .bd{display:none}.fx.on .bd{display:block}
.sl{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:11.5px;color:var(--mut)}
.sl label{flex:none;min-width:34px}
.sl em{font-style:normal;flex:none;min-width:34px;text-align:right;color:#ddd6fe;font-family:'Space Grotesk',sans-serif}
.fx.at{border-color:rgba(34,211,238,.35);background:linear-gradient(135deg,rgba(34,211,238,.07),rgba(139,92,246,.07))}
.fx.at.on .sw{background:linear-gradient(90deg,#06b6d4,#8b5cf6)}
.soon{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10.5px;background:rgba(245,158,11,.15);color:#fcd34d;border:1px solid rgba(245,158,11,.35);font-weight:700}
.seg{display:flex;gap:6px;margin-top:10px}.seg button{flex:1;padding:8px 6px;border-radius:10px;font-size:12px;background:rgba(0,0,0,.3);border:1px solid var(--line)}.seg button.on{background:rgba(139,92,246,.22);border-color:#a78bfa;color:#fff}
.lyr textarea{width:100%;min-height:220px;resize:vertical;padding:12px;border-radius:12px;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.12);outline:none;line-height:1.7;font-size:14px}
.lyr textarea:focus{border-color:#ec4899}
.row{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px}
.row .sp{flex:1}
.take{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid var(--line);margin-bottom:8px;font-size:12.5px}
.take.off{opacity:.55}
.take b{font-size:13px}.take small{display:block;color:var(--mut);font-size:11px}
.take .tx{flex:1;min-width:0}
.take button{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:12px;padding:0}
/* 가사 띄우기 */
#lyOv{position:fixed;left:50%;top:var(--top,190px);transform:translateX(-50%);z-index:30;width:min(680px,calc(100vw - 32px));max-height:42vh;overflow:hidden;padding:18px 24px;border-radius:22px;background:rgba(8,6,16,.86);backdrop-filter:blur(10px);border:1px solid rgba(236,72,153,.35);box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:center;font-size:var(--lyfs,22px);line-height:1.75;font-weight:700;pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
#lyOv .in{transition:transform .4s linear;white-space:pre-wrap}
/* 모바일 하단 */
.mb{display:none}
/* ===== 팝업 ===== */
.ov{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(5,4,14,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.md{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;border-radius:26px;padding:28px 24px 22px;text-align:center;background:radial-gradient(ellipse at 0% 0%,rgba(139,92,246,.24),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(236,72,153,.2),transparent 55%),#0e0b1e;border:1px solid rgba(167,139,250,.3);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:pop .32s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.md .ic{width:64px;height:64px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;font-size:30px;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 10px 30px rgba(236,72,153,.4)}
.md .ic.red{background:radial-gradient(circle,#ef4444,#7f1d1d);box-shadow:0 0 30px rgba(239,68,68,.6)}
.md .ic.cy{background:linear-gradient(135deg,#0891b2,#7c3aed);box-shadow:0 10px 30px rgba(34,211,238,.35)}
.md .ic.gd{background:linear-gradient(135deg,#f59e0b,#ec4899);box-shadow:0 10px 30px rgba(245,158,11,.4)}
.md h3{margin:0 0 8px;font-size:20px;word-break:keep-all}
.md p{margin:0 0 18px;font-size:13.5px;line-height:1.7;color:#c4bfdc;word-break:keep-all}
.md p b{color:#fff}
.md .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.07);color:#c4b5fd;font-size:15px}
.md .acts{display:flex;gap:10px}.md .acts .btn{flex:1;padding:13px}
.md .box{text-align:left;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:16px;font-size:13px;line-height:1.7;color:#d6d0ee}
.md .box li{margin:2px 0}
.md .box ul{margin:0;padding-left:18px}
.md .bal{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid var(--line);margin-bottom:8px;font-size:13.5px}
.md .bal b{font:700 17px 'Space Grotesk',sans-serif}
.md .bal.pr b{color:#f9a8d4}
.md .bal.low b{color:#fca5a5}
.md .chk{display:flex;align-items:center;gap:8px;justify-content:center;margin:-6px 0 16px;font-size:12.5px;color:var(--mut);cursor:pointer}
.md.wide{max-width:680px;text-align:left}
.md select,.md input[type=number]{padding:10px 12px;border-radius:11px;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.12);outline:none}
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.kinds button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 6px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px;font-weight:700;transition:.15s}
.kinds button span{font-size:24px}
.kinds button:hover{border-color:#ec4899;background:rgba(236,72,153,.08);transform:translateY(-2px)}
/* 처음 안내 (슬라이드) */
.gd{max-width:470px;padding:0;overflow:hidden;text-align:center}
.gd .art{position:relative;height:200px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 120%,rgba(236,72,153,.35),transparent 60%),radial-gradient(circle at 50% -20%,rgba(139,92,246,.4),transparent 60%),#120c24}
.gd .art .big{font-size:76px;filter:drop-shadow(0 10px 30px rgba(236,72,153,.5));animation:float 3s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.gd .art .eq{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;justify-content:center;gap:5px;height:60px;opacity:.5}
.gd .art .eq i{width:7px;border-radius:4px 4px 0 0;background:linear-gradient(#ec4899,#8b5cf6);animation:eq 1s ease-in-out infinite alternate}
@keyframes eq{from{height:12%}to{height:100%}}
.gd .art .n{position:absolute;top:16px;left:16px;padding:5px 11px;border-radius:99px;font:700 12px 'Space Grotesk',sans-serif;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15)}
.gd .ct{padding:22px 24px 22px}
.gd h3{font-size:21px}
.gd .dots{display:flex;justify-content:center;gap:7px;margin:0 0 16px}
.gd .dots i{width:8px;height:8px;border-radius:9px;background:rgba(255,255,255,.18);transition:.25s}
.gd .dots i.on{width:26px;background:linear-gradient(90deg,#8b5cf6,#ec4899)}
.gd .tipl{display:flex;flex-direction:column;gap:7px;text-align:left;margin:0 0 18px}
.gd .tipl span{display:flex;gap:9px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:13px;line-height:1.55;word-break:keep-all}
/* 사용법 서랍 */
.drw{position:fixed;top:0;right:0;bottom:0;z-index:110;width:min(460px,100vw);display:flex;flex-direction:column;background:#0c0919;border-left:1px solid rgba(167,139,250,.25);box-shadow:-30px 0 80px rgba(0,0,0,.6);animation:slide .28s cubic-bezier(.2,.9,.3,1)}
@keyframes slide{from{transform:translateX(100%)}}
.drw-bg{position:fixed;inset:0;z-index:105;background:rgba(5,4,14,.55);backdrop-filter:blur(3px);animation:fade .2s}
.drw .dh{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 0% 0%,rgba(139,92,246,.25),transparent 70%)}
.drw .dh .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,#7c3aed,#db2777)}
.drw .dh b{display:block;font-size:17px}.drw .dh small{display:block;font-size:12px;color:var(--mut)}
.drw .dh .sp{flex:1}
.drw .db{flex:1;overflow:auto;padding:14px 16px 30px}
.acc{border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);margin-bottom:10px;overflow:hidden}
.acc>button{display:flex;align-items:center;gap:10px;width:100%;padding:14px 14px;border:0;background:transparent;text-align:left;font-size:14.5px;font-weight:700}
.acc>button .n{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:rgba(139,92,246,.18)}
.acc>button .sp{flex:1}
.acc>button i{font-style:normal;color:var(--mut);transition:.2s}
.acc.on>button i{transform:rotate(180deg)}
.acc .ab{display:none;padding:0 14px 14px}
.acc.on .ab{display:block}
.acc.on{border-color:rgba(167,139,250,.35)}
.st-l{list-style:none;margin:0;padding:0;counter-reset:s}
.st-l li{position:relative;padding:8px 0 8px 34px;font-size:13.5px;line-height:1.65;color:#d6d0ee;word-break:keep-all;counter-increment:s}
.st-l li:before{content:counter(s);position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font:700 11.5px 'Space Grotesk',sans-serif;background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff}
.st-l li b{color:#fff}
.kbd{display:inline-block;padding:1px 7px;border-radius:6px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);font:600 12px 'Space Grotesk',sans-serif}
.qa{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);margin-top:8px;font-size:13px;line-height:1.65;color:#d6d0ee;word-break:keep-all}
.qa b{display:block;color:#fde68a;margin-bottom:2px}
/* 불러오기 */
.load{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(6,5,11,.92)}
.load .eqb{display:flex;align-items:flex-end;gap:5px;height:44px}
.load .eqb i{width:8px;border-radius:4px;background:linear-gradient(#ec4899,#8b5cf6);animation:eq .8s ease-in-out infinite alternate}
.load b{font-size:15px}.load small{color:var(--mut);font-size:12.5px}
.pbar{width:240px;height:6px;border-radius:9px;background:rgba(255,255,255,.1);overflow:hidden}.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8b5cf6,#ec4899);transition:width .3s}
/* 알림 */
#toast{position:fixed;left:50%;bottom:28px;z-index:200;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
#toast div{padding:12px 18px;border-radius:14px;background:rgba(20,15,38,.96);border:1px solid rgba(167,139,250,.35);box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:13.5px;animation:pop .3s;max-width:calc(100vw - 32px);word-break:keep-all;text-align:center}
#toast div.err{border-color:rgba(239,68,68,.5)}
/* 아래에서 올라오는 패널 (모바일) */
@media(max-width:860px){
 :root{--hd:100%}
 .bar{grid-template-columns:1fr auto;gap:10px;padding:10px 12px}
 .right .chip{display:none}.right{gap:6px}.right .ib{width:34px;height:34px}
 .sec h2 small{flex-basis:100%}
 .center{gap:10px;grid-column:1/3;justify-content:center;order:3}
 .onair{font-size:15px;padding:7px 14px;letter-spacing:3px}.onair em{font-size:13px}
 .rent b{font-size:16px}.ring{width:40px;height:40px}
 .tp{display:none}
 .hint{padding:8px 12px;font-size:12.5px}
 .trialbar{padding:9px 12px;font-size:12.5px}
 .main{display:block;height:auto;min-height:0}
 .daw{overflow:visible;border:0;padding-bottom:120px;background:transparent}
 .ruler{display:none}
 .trk{flex-direction:column;margin:10px 12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-height:0;width:auto;min-width:0}
 .hd{position:relative;width:auto;border:0}
 .ln{width:100%!important;height:70px;overflow:hidden}
 .ph{display:none}
 .trk .mph{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px #fff;z-index:3}
 .add{position:static;width:auto;max-width:none;margin:12px}
 .side{position:fixed;left:0;right:0;bottom:0;z-index:60;height:72vh;border-radius:24px 24px 0 0;border-top:1px solid rgba(167,139,250,.35);box-shadow:0 -20px 60px rgba(0,0,0,.6);transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
 .side.open{transform:none}
 .side:before{content:'';display:block;width:44px;height:5px;border-radius:9px;background:rgba(255,255,255,.25);margin:10px auto 0}
 .sheet-bg{position:fixed;inset:0;z-index:55;background:rgba(5,4,14,.5)}
 .mb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-around;gap:6px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:rgba(11,8,22,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
 .mb .clock{font-size:19px;min-width:0;padding:5px 10px}
 .mb .bt{width:46px;height:46px}.mb .bt.rec{width:62px;height:62px}
 .mbx{position:fixed;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:49;display:flex;gap:6px;overflow-x:auto;padding:4px 0}
 .mbx .tog{padding:8px 10px;font-size:12px;background:rgba(11,8,22,.92)}
 .mbx .btn{padding:8px 12px;font-size:12px}
 .flow{grid-template-columns:repeat(2,1fr)}
 .hero{padding:26px 18px}.hero h1{font-size:24px}
 #lyOv{font-size:calc(var(--lyfs,22px)*.85)}
}
@media(min-width:861px){.mbx,.sheet-bg{display:none!important}}
.clock,.rent b,.onair em,.trialbar .tm,.sl em{font-variant-numeric:tabular-nums}
.tp .clock{width:205px;min-width:205px}
.mb .clock{width:92px;min-width:92px}

.sm button.del{font-size:11px;filter:grayscale(.3)}.sm button.del:hover{background:rgba(239,68,68,.22);border-color:#ef4444;filter:none}

/* 🎯 오토튠 */
.atoff{margin-top:8px;font-size:12px;color:#a5f3fc;line-height:1.55;word-break:keep-all}.atoff a{color:#22d3ee;font-weight:700;text-decoration:none;white-space:nowrap}.fx.on .atoff{display:none}
.atst{margin-top:10px;padding:9px 11px;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid rgba(34,211,238,.25);font-size:12.5px;color:#cffafe;line-height:1.55;word-break:keep-all}.atst:empty{display:none}.atst b{color:#fff}.atst.busy{border-color:rgba(34,211,238,.55);box-shadow:0 0 14px rgba(34,211,238,.15)}
.spin{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid rgba(34,211,238,.3);border-top-color:#22d3ee;animation:atsp .8s linear infinite;vertical-align:-2px;margin-right:4px}@keyframes atsp{to{transform:rotate(360deg)}}
.atk{margin-top:10px}.atk label{display:block;font-size:11.5px;color:var(--mut);margin-bottom:5px}
.sel{width:100%;appearance:none;-webkit-appearance:none;padding:10px 34px 10px 12px;border-radius:11px;background:#120c22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2322d3ee' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border:1px solid rgba(34,211,238,.3);color:#fff;font:inherit;font-size:13px;outline:none;cursor:pointer}.sel:focus{border-color:#22d3ee}.sel option,.sel optgroup{background:#120c22;color:#fff}
.atp button{font-size:11.5px;white-space:nowrap}.fx.at .seg button.on{background:rgba(34,211,238,.18);border-color:#22d3ee;color:#fff}
.fx.at .rng{--tc:#22d3ee}
.atg{margin-top:12px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid var(--line);padding:8px 8px 6px}.atg canvas{display:block;width:100%;height:110px}
.atg .lg{display:flex;gap:14px;justify-content:center;font-size:11px;color:var(--mut);margin-top:4px}.atg .lg i{display:inline-block;vertical-align:middle;margin-right:5px}.atg .lg i.o{width:5px;height:5px;border-radius:50%;background:rgba(203,213,225,.6)}.atg .lg i.c{width:14px;height:3px;border-radius:2px;background:#22d3ee;box-shadow:0 0 6px #22d3ee}
.atab{font-size:13px;white-space:normal;line-height:1.35;min-width:0}.atab.on{background:rgba(34,211,238,.16);border-color:#22d3ee;color:#cffafe}
.atgl{list-style:none;padding:0;margin:4px 0 14px;display:grid;gap:10px;text-align:left}.atgl li{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.atgl li>span{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(139,92,246,.22))}
.atgl b{display:block;font-size:14px;margin-bottom:3px}.atgl small{display:block;font-size:12.5px;color:var(--mut);line-height:1.6;word-break:keep-all}.atgl small b{display:inline;font-size:inherit;color:#fff;margin:0}
.atul{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.75}

/* 여백 */
@media(min-width:861px){
 .bar,.hint,.tp,.trialbar{padding-left:28px;padding-right:28px}
 .main{gap:14px;padding:14px 24px 18px}
 .daw{border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
 .side{border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
 .ruler{border-radius:18px 18px 0 0}
}
@media(min-width:1600px){.main{padding-left:36px;padding-right:36px}.bar,.hint,.tp,.trialbar{padding-left:40px;padding-right:40px}}

/* 🎼 키 조절 */
.qa.kh b{display:inline;margin:0;color:#fff;font-size:inherit}.qa.kh b.kt{display:block;margin-bottom:6px}
.tog.chg{border-color:rgba(236,72,153,.5);background:rgba(236,72,153,.12);color:#fbcfe8}
.kpk{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 14px}
.kpk button{width:64px;height:56px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.3);font-size:17px;font-weight:800;color:#fff;transition:.15s}
.kpk button:hover:not(:disabled){border-color:#22d3ee;background:rgba(34,211,238,.14)}.kpk button:disabled{opacity:.3}
.kv{min-width:130px;text-align:center}.kv b{display:block;font:800 34px 'Space Grotesk',sans-serif;background:linear-gradient(90deg,#22d3ee,#a78bfa,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent}.kv small{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.kch{display:flex;gap:6px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}.kch button{padding:7px 13px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12.5px;font-weight:700;color:#ddd6fe}.kch button.on{border-color:#22d3ee;background:rgba(34,211,238,.15);color:#fff}

/* 재생선 끌기 */
.ph:after{content:'';position:absolute;top:0;left:-10px;width:22px;height:34px;pointer-events:auto;cursor:ew-resize}
.ph:before{transition:transform .15s}.scrub .ph:before{transform:scale(1.25)}
body.scrub,body.scrub *{cursor:ew-resize!important;user-select:none!important;-webkit-user-select:none!important}
.ln,.ruler canvas{touch-action:pan-y}
/* ON AIR: 입장하면 켜져 있고 테두리가 아주 천천히 돌아요 */
@property --oa{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes oaSpin{to{--oa:360deg}}
.onair{color:#fca5a5;border:2px solid transparent;text-shadow:0 0 8px rgba(239,68,68,.75),0 0 18px rgba(239,68,68,.35);
 background:linear-gradient(#22070d,#160509) padding-box,conic-gradient(from var(--oa),rgba(239,68,68,.12),rgba(239,68,68,.12) 35%,#ef4444 55%,#ffb4b4 62%,#ef4444 69%,rgba(239,68,68,.12) 90%) border-box;
 box-shadow:0 0 18px rgba(239,68,68,.25),inset 0 0 14px rgba(239,68,68,.16);animation:oaSpin 14s linear infinite}
.onair i{background:#ef4444;box-shadow:0 0 8px #ef4444,0 0 16px rgba(239,68,68,.6)}
.onair em{color:rgba(254,202,202,.7)}
.onair.live{border-color:transparent;background:radial-gradient(ellipse,#7f1d1d,#3b0a0f) padding-box,conic-gradient(from var(--oa),rgba(239,68,68,.35),rgba(239,68,68,.35) 35%,#ff6b6b 55%,#fff 62%,#ff6b6b 69%,rgba(239,68,68,.35) 90%) border-box;animation:oaSpin 9s linear infinite,oaPulse 2s infinite}
.onair.cnt{border-color:transparent;background:linear-gradient(#2a1a05,#2a1a05) padding-box,conic-gradient(from var(--oa),rgba(245,158,11,.2),rgba(245,158,11,.2) 35%,#f59e0b 55%,#fde68a 62%,#f59e0b 69%,rgba(245,158,11,.2) 90%) border-box;text-shadow:0 0 10px rgba(245,158,11,.6)}
.onair.cnt i{background:#f59e0b;box-shadow:0 0 10px #f59e0b}
@media(prefers-reduced-motion:reduce){.onair,.onair.live{animation:none}}

/* ✂ 편집 */
.clip.ed{cursor:pointer;transition:box-shadow .15s}.clip.ed:hover{border-color:color-mix(in srgb,var(--tc) 85%,#fff)}
.clip.csel{border:2px solid #fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 55%,transparent),0 0 22px color-mix(in srgb,var(--tc) 60%,transparent);z-index:2}
body.cmove,body.cmove *{cursor:grabbing!important;user-select:none!important}
.cbar{position:absolute;top:50%;transform:translateY(-50%);z-index:7;display:flex;gap:4px;padding:4px;margin-left:8px;border-radius:12px;background:rgba(11,8,22,.94);border:1px solid rgba(167,139,250,.45);box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap}
@media(max-width:860px){.cbar{left:auto!important;right:8px;top:auto;bottom:6px;transform:none;margin:0}}
.cbar button{padding:6px 10px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.cbar button:hover{border-color:#a78bfa;background:rgba(139,92,246,.25)}.cbar button.x{padding:6px 8px;color:var(--mut)}
.pbtn{position:absolute;top:50%;z-index:6;transform:translate(6px,-50%);padding:7px 12px;border-radius:99px;border:1px solid rgba(34,211,238,.6);background:rgba(8,47,73,.92);color:#cffafe;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer;box-shadow:0 6px 20px rgba(34,211,238,.25)}
.pbtn:hover{background:rgba(14,116,144,.95)}
.ruler .l button:disabled{opacity:.3;cursor:default}
.mbx .tog:disabled{opacity:.35}
/* 🥁 메트로놈 창 */
.mtsw{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;margin-bottom:12px;background:linear-gradient(135deg,rgba(34,211,238,.1),rgba(139,92,246,.1));border:1px solid rgba(34,211,238,.3);cursor:pointer}
.mtsw .sp{flex:1}
.mtb{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0}
.mtb button{min-width:44px;height:38px;padding:0 8px;border-radius:11px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:#fff;font-weight:800;font-size:13px}
.mtb button:hover{border-color:#22d3ee}
.mtb input{width:96px;height:42px;text-align:center;border-radius:12px;border:1.5px solid rgba(34,211,238,.45);background:#120c22;color:#fff;font:800 20px 'Space Grotesk',sans-serif;outline:none}
.mtv{min-width:120px;text-align:center;font:700 14px 'Space Grotesk',sans-serif;color:#a5f3fc}
.mtrow{display:flex;gap:6px;flex-wrap:wrap}.mtrow .btn{flex:1;padding:10px 12px;font-size:13px}
.mtn{font-size:12px;color:var(--mut);line-height:1.6;margin-top:6px;word-break:keep-all}
.mtr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mtr>div{padding:10px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line);text-align:center}
.mtr small{display:block;font-size:11px;color:var(--mut)}.mtr b{display:block;margin:4px 0 8px;font:700 15px 'Space Grotesk',sans-serif;color:#fff}.mtr .btn{width:100%;padding:8px;font-size:12px}
.box .seg button.on{background:rgba(34,211,238,.18);border-color:#22d3ee;color:#fff}
@media(max-width:860px){.mtv{min-width:84px;font-size:13px}.mtb{gap:4px}.mtb button{min-width:38px;padding:0 6px}.mtb input{width:84px}}

/* 🧭 화면 둘러보기 */
.tour{position:fixed;inset:0;z-index:300}
.tour .hole{position:fixed;border-radius:14px;box-shadow:0 0 0 9999px rgba(6,4,14,.76),0 0 0 2px #a78bfa,0 0 28px 6px rgba(167,139,250,.55);transition:left .38s cubic-bezier(.2,.8,.2,1),top .38s cubic-bezier(.2,.8,.2,1),width .38s,height .38s;pointer-events:none}
.tour .hole:after{content:'';position:absolute;inset:-6px;border-radius:18px;border:2px solid rgba(236,72,153,.7);animation:tring 1.8s ease-out infinite}
@keyframes tring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
.tcard{position:fixed;width:min(350px,calc(100vw - 24px));padding:16px 16px 14px;border-radius:20px;background:linear-gradient(160deg,#1f1338,#120b22 70%);border:1px solid rgba(167,139,250,.5);box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(139,92,246,.25);transition:left .38s cubic-bezier(.2,.8,.2,1),top .38s cubic-bezier(.2,.8,.2,1)}
.tcard.in{animation:tin .32s ease}@keyframes tin{from{opacity:0;transform:translateY(6px) scale(.98)}}
.tcard .arw{position:absolute;width:14px;height:14px;background:#1f1338;transform:rotate(45deg)}
.tcard .arw.up{top:-8px;border-left:1px solid rgba(167,139,250,.5);border-top:1px solid rgba(167,139,250,.5)}
.tcard .arw.dn{bottom:-8px;background:#130c24;border-right:1px solid rgba(167,139,250,.5);border-bottom:1px solid rgba(167,139,250,.5)}
.tcard .th{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tcard .ti{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:linear-gradient(135deg,#8b5cf6,#ec4899);box-shadow:0 8px 20px rgba(236,72,153,.4)}
.tcard .tn{display:inline-block;font:700 11px 'Space Grotesk',sans-serif;color:#c4b5fd;letter-spacing:.5px}.tcard .tt{display:block;font-size:16.5px;color:#fff;margin-top:1px}
.tcard .td{margin:0 0 12px;font-size:13.5px;line-height:1.65;color:#ddd6fe;word-break:keep-all}.tcard .td b{color:#fff}
.tcard .tbar{height:4px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:12px}.tcard .tbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#22d3ee,#8b5cf6,#ec4899);transition:width .35s}
.tcard .tac{display:flex;align-items:center;gap:6px}.tcard .tac .sp{flex:1}.tcard .tac .btn{padding:9px 14px;font-size:13px}
.tcard .tsk{background:none;border:0;color:var(--mut);font-size:12.5px;text-decoration:underline;cursor:pointer;padding:6px 2px}
/* 둘러보기 권하는 작은 카드 */
.task{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;gap:12px;align-items:flex-start;width:min(360px,calc(100vw - 24px));padding:14px 14px 14px 16px;border-radius:18px;background:linear-gradient(150deg,#1f1338,#120b22);border:1px solid rgba(167,139,250,.5);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 30px rgba(139,92,246,.25);animation:tin .4s ease}
.task .ai{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,#0891b2,#7c3aed)}
.task .at{flex:1;min-width:0}.task b{display:block;font-size:14.5px;color:#fff}.task small{display:block;font-size:12.5px;color:#c4bde0;line-height:1.55;margin:3px 0 10px;word-break:keep-all}
.task .aa{display:flex;gap:6px}.task .aa .btn{padding:8px 14px;font-size:12.5px}
.task .ax{flex:none;background:none;border:0;color:var(--mut);font-size:14px;cursor:pointer;padding:2px}
@media(max-width:860px){.task{right:12px;left:12px;width:auto;bottom:calc(150px + env(safe-area-inset-bottom))}}
/* 새 기능 표시 */
body.tnew #tPre,body.tnew #tMet,body.tnew #tKey,body.tnew #bUndo,body.tnew #mPre,body.tnew #mMet,body.tnew #mKey,body.tnew #mUndo{position:relative}
body.tnew #tPre:after,body.tnew #tMet:after,body.tnew #tKey:after,body.tnew #bUndo:after,body.tnew #mPre:after,body.tnew #mMet:after,body.tnew #mKey:after,body.tnew #mUndo:after{content:'NEW';position:absolute;top:-7px;right:-6px;padding:1px 5px;border-radius:99px;font:800 8.5px 'Space Grotesk',sans-serif;letter-spacing:.5px;color:#fff;background:linear-gradient(90deg,#ec4899,#f97316);box-shadow:0 2px 8px rgba(236,72,153,.5);pointer-events:none}
/* 도움말: 따라하기 */
.hbtn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.hbtn .btn{padding:11px 10px;font-size:13px;white-space:normal}
.acc.rcp{border-color:rgba(236,72,153,.4);background:linear-gradient(135deg,rgba(236,72,153,.07),rgba(139,92,246,.07))}
.rcs{display:grid;gap:10px}.rc{padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.rc b{display:block;font-size:14px;color:#fff;margin-bottom:6px}.rc ol{margin:0;padding-left:20px;font-size:13px;line-height:1.75;color:#d6d0ee}.rc ol b{display:inline;font-size:inherit;margin:0}

/* 강박 고르기 */
.mtac{display:flex;gap:8px;justify-content:center;margin:12px 0 6px}
.mtac button{flex:1;max-width:72px;padding:9px 0 7px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:#fff;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;transition:transform .08s,background .08s,box-shadow .08s}
.mtac button b{font-size:19px;line-height:1}
.mtac button small{font-size:11px;opacity:.6;font-weight:700}
.mtac button:hover{border-color:#22d3ee}
.mtac button:first-child{border:2px solid #22d3ee;background:rgba(34,211,238,.12)}
.mtac button:first-child small{opacity:1;color:#67e8f9}
.mtac button.now{transform:scale(1.1);background:rgba(34,211,238,.3);box-shadow:0 0 14px rgba(34,211,238,.45)}
.mtac button:first-child.now{background:#22d3ee;color:#04151a;box-shadow:0 0 20px rgba(34,211,238,.8)}
.mtac button:first-child.now small{color:#04151a}

/* 노래 박자 따라가기 */
.mtfo{margin:12px 0 0}
.mtfo .ft{display:flex;flex-direction:column;gap:3px;min-width:0}
.mtfo .ft small{font-size:11.5px;color:var(--mut);line-height:1.45}
.mtfo.dis{opacity:.6;background:rgba(0,0,0,.25);border-style:dashed}
.mtfo.dis .sw{opacity:.5}

/* 박자표 · 강박 소리 */
.mtsig{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.mtsig button{padding:10px 4px 8px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.3);color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:.12s}
.mtsig button b{font-size:18px;letter-spacing:.5px}
.mtsig button small{font-size:10.5px;color:var(--mut);text-align:center;line-height:1.3}
.mtsig button:hover{border-color:#22d3ee}
.mtsig button.on{border:2px solid #22d3ee;background:linear-gradient(135deg,rgba(34,211,238,.22),rgba(139,92,246,.18));box-shadow:0 0 14px rgba(34,211,238,.25)}
.mtsig button.on small{color:#a5f3fc}
.mtacs{margin:0}
.mtacs .ft{display:flex;flex-direction:column;gap:3px;min-width:0}
.mtacs .ft small{font-size:11.5px;color:var(--mut);line-height:1.45}
.mtac{flex-wrap:nowrap}
.mtac button{min-width:0}
.mtac.noacc button small{visibility:hidden}
.mtac.noacc button:first-child{border:1px solid var(--line);background:rgba(0,0,0,.3)}
.mtac.noacc button:first-child.now{background:rgba(34,211,238,.3);color:#fff;box-shadow:0 0 14px rgba(34,211,238,.45)}
@media(max-width:600px){.mtsig{grid-template-columns:repeat(2,1fr)}}

/* 선택한 트랙이 옆으로 밀려 보이던 문제 */
.trk.sel{padding:0;width:max-content;min-width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;appearance:none;-webkit-appearance:none;background:rgba(139,92,246,.06);font-size:inherit;cursor:default;outline:none}
@media(max-width:860px){.trk.sel{width:auto;min-width:0;border:1px solid var(--line);border-radius:16px}}
/* 메트로놈 결과 카드 */
.mtres{margin:2px 0 14px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(34,211,238,.14),rgba(139,92,246,.16));border:1px solid rgba(34,211,238,.4);text-align:center}
.mtres .rh{font-size:11.5px;color:#a5f3fc;font-weight:700;letter-spacing:.3px}
.mtres .rs{margin:4px 0 10px;font-size:17px;line-height:1.35}
.mtres .rs b{background:linear-gradient(90deg,#fff,#a5f3fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.mtres .rg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mtres .rg div{padding:8px 4px;border-radius:12px;background:rgba(0,0,0,.28);display:flex;flex-direction:column;gap:2px}
.mtres .rg small{font-size:10.5px;color:var(--mut)}
.mtres .rg b{font:800 17px 'Space Grotesk',sans-serif;color:#fff}
.mtres .rf{margin-top:9px;font-size:11.5px;color:var(--mut)}

/* 🧭 사용법 버튼 (반짝반짝) */
.gdb{position:relative;flex:none;height:38px;padding:0 14px 0 11px;border-radius:12px;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;overflow:hidden;cursor:pointer;color:#fff;font:800 13px inherit;font-family:inherit;
 background:linear-gradient(#1a1035,#1a1035) padding-box,linear-gradient(120deg,#22d3ee,#a855f7,#ec4899,#f59e0b,#22d3ee) border-box;background-size:100% 100%,300% 100%;animation:gdBorder 4s linear infinite,gdGlow 2.4s ease-in-out infinite;transition:transform .15s}
.gdb:hover{transform:translateY(-1px)}
.gdb b{font-weight:800;background:linear-gradient(90deg,#fff,#a5f3fc,#f0abfc,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gdText 3s linear infinite}
.gdb .gi{font-size:15px;display:inline-block;animation:gdSpin 6s ease-in-out infinite}
.gdb .gs{position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:gdShine 3.2s ease-in-out infinite;pointer-events:none}
.gdb.seen{animation:gdBorder 8s linear infinite}.gdb.seen .gs{animation-duration:7s}
.gdb.ping{animation:gdBorder 2s linear infinite,gdPing 1s ease-in-out infinite}
@keyframes gdBorder{to{background-position:0 0,300% 0}}
@keyframes gdGlow{0%,100%{box-shadow:0 0 0 rgba(168,85,247,0)}50%{box-shadow:0 0 18px rgba(168,85,247,.55),0 0 6px rgba(34,211,238,.4)}}
@keyframes gdPing{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.7)}50%{box-shadow:0 0 0 7px rgba(236,72,153,0),0 0 22px rgba(236,72,153,.6)}}
@keyframes gdText{to{background-position:200% 0}}
@keyframes gdShine{0%,55%{left:-60%}85%,100%{left:130%}}
@keyframes gdSpin{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(-20deg)}94%{transform:rotate(15deg)}}
@media(max-width:860px){.gdb{height:34px;padding:0 10px 0 8px;font-size:12px;gap:4px}}
@media(max-width:420px){.gdb b{display:none}.gdb{width:34px;padding:0;justify-content:center}}
@media(prefers-reduced-motion:reduce){.gdb,.gdb b,.gdb .gi,.gdb .gs{animation:none}}

/* 구간별 빠르기 표 */
.mtres .rsec{margin-top:12px;text-align:left}
.mtres .rsec>small{display:block;font-size:11px;color:#a5f3fc;font-weight:700;margin-bottom:6px}
.mtres .rl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;max-height:156px;overflow:auto;padding-right:2px;scrollbar-width:thin;scrollbar-color:rgba(34,211,238,.45) transparent}
.mtres .rl::-webkit-scrollbar{width:6px}.mtres .rl::-webkit-scrollbar-thumb{background:rgba(34,211,238,.45);border-radius:6px}.mtres .rl::-webkit-scrollbar-track{background:transparent}
.mtres .rl button{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.28);color:#fff;font-size:11.5px;cursor:pointer;transition:.12s}
.mtres .rl button:hover{border-color:#22d3ee;background:rgba(34,211,238,.12)}
.mtres .rl button span{color:var(--mut);font-variant-numeric:tabular-nums}
.mtres .rl button b{font:800 12.5px 'Space Grotesk',sans-serif}
/* 반 박 옮기기 */
.mthalf{width:100%;margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 10px}
.mthalf small{font-size:10.5px;color:var(--mut);font-weight:600}

/* 녹음 자동 맞춤 알림 · 직접 맞추기 · 박수 맞추기 */
#toast div.act{pointer-events:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;border-color:rgba(34,211,238,.45)}
#toast div.act button{padding:6px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}
#toast div.act button:hover{border-color:#22d3ee;background:rgba(34,211,238,.18)}
.tpv{text-align:center;margin:4px 0 6px}.tpv b{font:800 26px 'Space Grotesk',sans-serif;color:#fff}
.tps{display:flex;align-items:center;gap:6px}.tps .rng{flex:1}.tps .btn{padding:8px 10px;min-width:40px}
.tpl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin:4px 2px 0}
.tcb{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:4px 0 6px}
.tcb i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#22d3ee,#a78bfa,#ec4899)}

/* 자르기 버튼: 클릭한 자리 바로 위에 말풍선처럼 (노래 조각을 가리지 않게) */
@media(min-width:861px){.cbar{top:6px;transform:translate(-22px,-100%);margin-left:0}
.cbar::after{content:'';position:absolute;left:16px;bottom:-7px;width:12px;height:12px;background:rgba(11,8,22,.94);border-right:1px solid rgba(167,139,250,.45);border-bottom:1px solid rgba(167,139,250,.45);transform:rotate(45deg)}}

/* 녹음 구간 */
#rgn{position:absolute;top:0;z-index:4;pointer-events:none;background:rgba(236,72,153,.1);border-left:2px solid #ec4899;border-right:2px solid #f59e0b}
#rgn.open{border-right:0;background:none}
#rgn i{position:absolute;bottom:4px;font:800 10.5px/1 'Space Grotesk',sans-serif;font-style:normal;padding:4px 7px;border-radius:7px;white-space:nowrap;color:#fff}
#rgn i.a{left:3px;background:#ec4899}
#rgn i.b{right:3px;background:#f59e0b;color:#1a1204}
#rgn.open i.b{display:none}
.rgpop{position:absolute;z-index:9;transform:translateX(-22px);display:flex;align-items:center;gap:5px;padding:5px;border-radius:13px;background:rgba(11,8,22,.96);border:1px solid rgba(236,72,153,.5);box-shadow:0 10px 28px rgba(0,0,0,.55);white-space:nowrap;animation:pop .2s}
.rgpop::before{content:'';position:absolute;left:16px;top:-7px;width:12px;height:12px;background:rgba(11,8,22,.96);border-left:1px solid rgba(236,72,153,.5);border-top:1px solid rgba(236,72,153,.5);transform:rotate(45deg)}
.rgpop b{font:700 12px 'Space Grotesk',sans-serif;color:var(--mut);padding:0 6px}
.rgpop button{padding:7px 11px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer}
.rgpop button.a:hover{border-color:#ec4899;background:rgba(236,72,153,.22)}
.rgpop button.b:hover{border-color:#f59e0b;background:rgba(245,158,11,.2)}
.rgpop button.x{color:var(--mut)}.rgpop button.x:hover{border-color:#a78bfa}

.rgpop.r::before{left:auto;right:16px}

.rgpop .sep{width:1px;align-self:stretch;margin:2px 3px;background:var(--line)}

.rgpop button.off{opacity:.38}.rgpop button.off:hover{border-color:var(--line);background:rgba(255,255,255,.06)}

@media(min-width:861px){.cbar{display:none!important}}

/* 가사: 노래방처럼 */
#lyOv{height:min(36vh,320px);pointer-events:none}
#lyOv .in{position:relative;white-space:normal;transition:transform .35s ease}
#lyOv .ll{padding:3px 10px;margin:0 auto;width:fit-content;max-width:100%;border-radius:10px;color:rgba(255,255,255,.38);transition:color .25s,transform .25s,background .2s;pointer-events:auto;cursor:pointer;white-space:pre-wrap}
#lyOv .ll.past{color:rgba(255,255,255,.2)}
#lyOv .ll.nxt{color:rgba(255,255,255,.62)}
#lyOv .ll.cur{color:#fff;transform:scale(1.08);text-shadow:0 0 18px rgba(236,72,153,.75)}
#lyOv .ll:hover{background:rgba(236,72,153,.16)}
#lyOv .lyx{position:absolute;top:8px;right:10px;z-index:2;pointer-events:auto;width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--mut);font-size:13px;line-height:1;cursor:pointer}
#lyOv .lyx:hover{color:#fff;border-color:#ec4899}

/* 가사 창 */
.lyp{position:fixed;z-index:45;display:flex;flex-direction:column;min-width:280px;min-height:220px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);resize:both;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 0% 0%,rgba(139,92,246,.28),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(236,72,153,.22),transparent 55%),rgba(14,10,28,.97);border:1px solid rgba(236,72,153,.42);box-shadow:0 24px 70px rgba(0,0,0,.65);animation:pop .25s}
.lyp.drag{opacity:.92;box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 2px rgba(236,72,153,.35)}
.lyh{display:flex;align-items:center;gap:6px;padding:12px 12px 10px 16px;cursor:move;user-select:none;border-bottom:1px solid var(--line)}
.lyh b{font-size:14.5px;white-space:nowrap}.lyh .sp{flex:1}
.lyz{display:flex;align-items:center;gap:1px;padding:3px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.lyz button{width:30px;height:26px;border-radius:8px;border:0;background:none;color:#fff;font-weight:800;font-size:12.5px;cursor:pointer}
.lyz button:hover{background:rgba(236,72,153,.25)}
.lyz em{font:700 12px 'Space Grotesk',sans-serif;min-width:22px;text-align:center;color:var(--mut)}
.lyf{padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--mut);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.lyf.on{color:#fff;border-color:#ec4899;background:rgba(236,72,153,.22)}
.lyp .x{width:30px;height:30px;flex:none;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--mut);cursor:pointer}
.lyp .x:hover{color:#fff;border-color:#ec4899}
.lyb{flex:1;overflow:auto;padding:18px 22px 40px;text-align:center;line-height:1.8;font-weight:700;scrollbar-width:thin;scrollbar-color:#a78bfa transparent}
.lyb::-webkit-scrollbar{width:8px}.lyb::-webkit-scrollbar-track{background:transparent}.lyb::-webkit-scrollbar-thumb{background:linear-gradient(#a78bfa,#ec4899);border-radius:9px}
.lyp::-webkit-resizer{background:linear-gradient(135deg,transparent 50%,rgba(236,72,153,.6) 50%);border-radius:0 0 18px 0}
.lyb .pl{padding:2px 8px;border-radius:10px;color:#f4f1ff;white-space:pre-wrap;word-break:keep-all;transition:color .25s,background .25s}
.lyb .pl.gap{height:.9em}.lyb .pl.none{color:var(--mut);font-size:14px}
.lyp.fol .lyb .pl{color:rgba(255,255,255,.45);cursor:pointer}
.lyp.fol .lyb .pl.past{color:rgba(255,255,255,.28)}
.lyp.fol .lyb .pl.cur{color:#fff;background:linear-gradient(90deg,rgba(139,92,246,.28),rgba(236,72,153,.28));text-shadow:0 0 14px rgba(236,72,153,.6)}
.lyp.fol .lyb .pl:hover{background:rgba(236,72,153,.14)}
.lyg{display:flex;align-items:center;gap:8px;padding:9px 14px 12px;font-size:11.5px;line-height:1.45;color:var(--mut);border-top:1px solid var(--line)}
.lyg .sp{flex:1}.lyg button{flex:none;padding:5px 9px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;font-size:11.5px;font-weight:700;cursor:pointer}
.lyg button:hover{border-color:#ec4899}
.lpb{width:100%;margin-top:12px;padding:13px;font-size:14px;font-weight:800;border:0;color:#fff;background:linear-gradient(90deg,#8b5cf6,#ec4899);box-shadow:0 8px 22px rgba(236,72,153,.3)}
.lpb.on{background:rgba(255,255,255,.06);border:1px solid var(--line);box-shadow:none}
@media(max-width:860px){.lyp{resize:none;left:10px!important;right:10px;width:auto!important;top:auto!important;bottom:10px;height:55vh!important}.lyh{cursor:default}}

/* 가사 창: 사방에서 크기 조절 */
.lyp{resize:none;z-index:85}
.lyrz{position:absolute;z-index:4;display:block}
.lyrz.n,.lyrz.s{left:14px;right:14px;height:8px;cursor:ns-resize}.lyrz.n{top:-3px}.lyrz.s{bottom:-3px}
.lyrz.e,.lyrz.w{top:14px;bottom:14px;width:8px;cursor:ew-resize}.lyrz.e{right:-3px}.lyrz.w{left:-3px}
.lyrz.ne,.lyrz.nw,.lyrz.se,.lyrz.sw{width:18px;height:18px}
.lyrz.ne{top:-3px;right:-3px;cursor:nesw-resize}.lyrz.sw{bottom:-3px;left:-3px;cursor:nesw-resize}
.lyrz.nw{top:-3px;left:-3px;cursor:nwse-resize}.lyrz.se{bottom:-3px;right:-3px;cursor:nwse-resize}
.lyrz.se::after{content:'';position:absolute;right:7px;bottom:7px;width:9px;height:9px;border-right:2px solid rgba(236,72,153,.75);border-bottom:2px solid rgba(236,72,153,.75);border-radius:0 0 4px 0}
.lyp:hover{border-color:rgba(236,72,153,.6)}

/* 나가기 안내 */
.lvx{display:block;margin:12px auto 2px;padding:4px 8px;border:0;background:none;color:var(--mut);font-size:12.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lvx:hover{color:#fca5a5}

/* 🎼 악보 */
.btn.scbtn{border-color:rgba(167,139,250,.5);background:linear-gradient(90deg,rgba(139,92,246,.22),rgba(34,211,238,.16))}
#scOv{position:fixed;inset:0;z-index:95;display:flex;padding:22px;background:rgba(5,4,14,.78);backdrop-filter:blur(8px);animation:pop .25s}
.scw{flex:1;display:flex;flex-direction:column;min-height:0;max-width:1240px;margin:0 auto;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 0% 0%,rgba(139,92,246,.26),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(236,72,153,.2),transparent 55%),rgba(14,10,28,.98);border:1px solid rgba(167,139,250,.4);box-shadow:0 30px 90px rgba(0,0,0,.7)}
.sch{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.sct{display:flex;flex-direction:column;gap:2px;min-width:0}.sct b{font-size:16.5px}.sct small{font:600 12.5px 'Space Grotesk',sans-serif;color:#c4b5fd}
.sch .sp{flex:1}
.scb{padding:8px 12px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.scb:hover{border-color:#a78bfa;background:rgba(139,92,246,.22)}.scb.on{border-color:#ec4899;background:rgba(236,72,153,.25)}.scb.ghost{color:var(--mut)}
.sctr{display:flex;align-items:center;gap:2px;padding:3px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.05)}
.sctr button{width:30px;height:30px;border:0;border-radius:8px;background:none;color:#fff;font-size:16px;font-weight:800;cursor:pointer}.sctr button:hover{background:rgba(236,72,153,.25)}
.sctr span{min-width:64px;text-align:center;font-size:12.5px;font-weight:700;color:#e9d5ff}
.scx{width:36px;height:36px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--mut);cursor:pointer}.scx:hover{color:#fff;border-color:#ec4899}
.scn{padding:9px 16px;font-size:12.5px;line-height:1.5;color:#fde68a;background:rgba(245,158,11,.08);border-bottom:1px solid rgba(245,158,11,.2)}
.scbody{flex:1;min-height:0;overflow:auto;padding:22px;scrollbar-width:thin;scrollbar-color:#a78bfa transparent}
.scbody::-webkit-scrollbar{width:9px}.scbody::-webkit-scrollbar-track{background:transparent}.scbody::-webkit-scrollbar-thumb{background:linear-gradient(#a78bfa,#ec4899);border-radius:9px}
.scpaper{max-width:1180px;margin:0 auto;min-height:320px;padding:18px 20px 8px;border-radius:16px;background:#fffdf8;color:#1a1530;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.scpaper svg{display:block;margin:0 auto}
.scpaper .abcjs-note,.scpaper .abcjs-rest{cursor:pointer}
.scpaper .sc-cur,.scpaper .sc-cur path{fill:#ec4899!important;stroke:#ec4899}
.sctip{margin:6px 0 10px;text-align:center;font-size:12px;color:#6b6385}
.scbusy{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:280px;color:#3b2f6b;text-align:center}
.scbusy b{font-size:16px}.scbusy small{font-size:13px;color:#6b6385}.scbusy .spin{width:30px;height:30px;border-width:3px;border-color:rgba(139,92,246,.25);border-top-color:#8b5cf6}
.scbusy.err b{color:#b91c1c}
@media(max-width:860px){#scOv{padding:0}.scw{border-radius:0}.scbody{padding:10px}.scpaper{padding:10px 6px}}
@media print{body.sc-print{background:#fff!important}body.sc-print>*:not(#scOv){display:none!important}
 body.sc-print #scOv{position:static;padding:0;background:#fff;backdrop-filter:none}body.sc-print .scw{border:0;border-radius:0;background:#fff;box-shadow:none;max-width:none}
 body.sc-print .sch,body.sc-print .scn,body.sc-print .sctip{display:none!important}body.sc-print .scbody{overflow:visible;padding:0}body.sc-print .scpaper{box-shadow:none;padding:0;max-width:none}
 body.sc-print .sc-cur,body.sc-print .sc-cur path{fill:#000!important;stroke:none}}

/* 악보 쪽 넘기기 */
.scpg{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 2px;font:600 13px "Space Grotesk",sans-serif;color:#4b4466}
.scpg button{width:38px;height:32px;border:1px solid #d9d2ee;border-radius:10px;background:#f4f0ff;color:#5b3fd6;font-size:13px;cursor:pointer;transition:.15s}
.scpg button:hover:not(:disabled){background:#7c5cff;border-color:#7c5cff;color:#fff}
.scpg button:disabled{opacity:.35;cursor:default}
.scpp{page-break-after:always;break-after:page}.scpp:last-child{page-break-after:auto;break-after:auto}
@media print{body.sc-print .scpg{display:none!important}}

/* 악보 창 띄우기 · 크기 조절 */
#scOv.fl{inset:auto;padding:0;z-index:85;background:none;backdrop-filter:none;min-width:360px;min-height:260px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);animation:pop .2s}
#scOv.fl .scw{max-width:none;margin:0;border-radius:20px;box-shadow:0 22px 60px rgba(0,0,0,.6)}
#scOv.fl .sch{cursor:move;padding:10px 12px;gap:6px}#scOv.fl .sch button,#scOv.fl .sch .sctr{cursor:pointer}
#scOv.fl .sct b{font-size:14.5px}#scOv.fl .scb{padding:6px 9px;font-size:12px}#scOv.fl .sctr button{width:26px;height:26px}#scOv.fl .sctr span{min-width:52px;font-size:11.5px}
#scOv.fl .scn{display:none}#scOv.fl .scbody{padding:12px}#scOv.fl .scpaper{padding:12px 10px 6px}
#scOv.drag,#scOv.drag *{user-select:none}
.scb:disabled{opacity:.6;cursor:wait}
@media(max-width:860px){#scOv.fl{left:8px!important;right:8px;top:auto!important;bottom:8px;width:auto!important;height:60vh!important;min-width:0}#scOv.fl .sch{cursor:default}}

/* 🎭 재미 목소리 */
.fx.vc{border-color:rgba(236,72,153,.35);background:linear-gradient(160deg,rgba(236,72,153,.1),rgba(139,92,246,.08))}
.fx.vc.on{border-color:#ec4899;box-shadow:0 0 0 1px rgba(236,72,153,.25),0 8px 24px rgba(236,72,153,.15)}
.vcg{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:4px 0 10px}
.vcg button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mut);font:600 11px 'Noto Sans KR',sans-serif;line-height:1.2;cursor:pointer;transition:.15s;word-break:keep-all}
.vcg button span{font-size:21px;line-height:1.1}
.vcg button:hover{color:#fff;border-color:rgba(236,72,153,.5)}
.vcg button.on{color:#fff;border-color:#ec4899;background:rgba(236,72,153,.22)}
.vct{margin-top:8px;font-size:11.5px;line-height:1.55;color:var(--mut)}
@media(max-width:860px){.vcg{grid-template-columns:repeat(5,1fr)}.vcg button{font-size:10.5px}}

/* ⚡ SNS용 속도 버전 */
.box.spb{margin-bottom:14px;border-color:rgba(34,211,238,.35);background:linear-gradient(160deg,rgba(34,211,238,.08),rgba(139,92,246,.06))}
.spd{font-size:12px;color:var(--mut);margin:4px 0 10px;line-height:1.55}
.spg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.spg .btn{flex-direction:column;gap:2px;white-space:normal;padding:10px 4px;font-size:12.5px;line-height:1.25;text-align:center;word-break:keep-all}
.spg .btn span{font-size:20px}.spg .btn small{font:600 11px 'Space Grotesk',sans-serif;color:#a5f3fc}
.spg .btn.on{border-color:#22d3ee;background:rgba(34,211,238,.16)}
.sping{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:13px;color:#a5f3fc}.sping .spin{width:18px;height:18px}
.spres{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:12px;border-radius:12px;background:rgba(0,0,0,.25)}
.spres b{font-size:13.5px}.spres audio{width:100%}.spres .btn{justify-content:center}
@media(max-width:860px){.spg{grid-template-columns:repeat(2,1fr)}}

/* 녹음실 사용법 버튼 */
.ib.ibt{width:auto;height:38px;display:inline-flex;gap:6px;padding:0 15px;font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(236,72,153,.24));border-color:rgba(236,72,153,.5);cursor:pointer}
.ib.ibt:hover{background:linear-gradient(135deg,rgba(139,92,246,.45),rgba(236,72,153,.38));border-color:#ec4899}
@media(max-width:860px){.ib.ibt{height:34px;padding:0 11px;font-size:12.5px}}

/* 언어 버튼 (메인과 같은 모양) */
.ib.lgb{width:auto;display:inline-flex;align-items:center;gap:7px;padding:0 13px 0 12px;border-radius:99px;font:700 13px 'Space Grotesk',sans-serif;color:#fff;cursor:pointer}
.ib.lgb svg{width:16px;height:16px;fill:none;stroke:#e9d5ff;stroke-width:1.8;stroke-linecap:round}
.ib.lgb i{font-style:normal;font-size:10px;color:var(--mut);transition:.2s}.ib.lgb.on i{transform:rotate(180deg)}
.ib.lgb:hover,.ib.lgb.on{border-color:rgba(236,72,153,.5);background:rgba(236,72,153,.12)}
.lgdd{position:fixed;z-index:120;min-width:170px;padding:6px;border-radius:16px;background:rgba(16,12,30,.97);border:1px solid rgba(167,139,250,.35);box-shadow:0 18px 50px rgba(0,0,0,.6);backdrop-filter:blur(12px);animation:pop .18s}
.lgdd button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:11px;background:none;color:#e9e5ff;font:500 14px 'Noto Sans KR',sans-serif;text-align:left;cursor:pointer}
.lgdd button b{min-width:24px;font:700 12px 'Space Grotesk',sans-serif;color:#c4b5fd}
.lgdd button:hover{background:rgba(139,92,246,.18);color:#fff}
.lgdd button.on{background:linear-gradient(90deg,rgba(139,92,246,.3),rgba(236,72,153,.22));color:#fff}
.lgdd button i{margin-left:auto;font-style:normal;color:#f9a8d4}
@media(max-width:860px){.ib.lgb{padding:0 10px;gap:5px;font-size:12px}}

/* 🗂 내 녹음 작업 카드 */
.cards.pcs .card.pc{gap:8px;padding:18px 18px 16px 22px;overflow:hidden;background:linear-gradient(160deg,#1b1638,#130f28);border:1.5px solid rgba(167,139,250,.28);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.card.pc:before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(167,139,250,.35)}
.card.pc b{font-size:15.5px;padding-right:0;margin-top:2px}
.card.pc .pcu{font-size:11.5px}
.pcb{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.3px}
.cards.pcs .card.pc.on{background:linear-gradient(160deg,#3a1430,#1d1036 70%);border-color:rgba(251,113,133,.75);box-shadow:0 0 0 1px rgba(251,113,133,.15),0 10px 32px rgba(244,63,94,.25)}
.card.pc.on:before{background:linear-gradient(#fb7185,#e879f9)}
.card.pc.on:hover{border-color:#fb7185;box-shadow:0 0 0 1px rgba(251,113,133,.3),0 14px 40px rgba(244,63,94,.35)}
.pcb.on{background:rgba(244,63,94,.2);color:#fecdd3;border:1px solid rgba(251,113,133,.6)}
.pcb.on i{width:8px;height:8px;border-radius:50%;background:#fb7185;box-shadow:0 0 0 0 rgba(251,113,133,.7);animation:pcPulse 1.6s infinite}
@keyframes pcPulse{0%{box-shadow:0 0 0 0 rgba(251,113,133,.7)}70%{box-shadow:0 0 0 8px rgba(251,113,133,0)}100%{box-shadow:0 0 0 0 rgba(251,113,133,0)}}
.pct{font:800 20px 'Space Grotesk',sans-serif;color:#fff;text-shadow:0 0 18px rgba(251,113,133,.5)}
.cards.pcs .card.pc.off{background:linear-gradient(160deg,#18161f,#121019);border-color:rgba(255,255,255,.2)}
.card.pc.off:before{background:rgba(255,255,255,.18)}
.card.pc.off b{color:#d4d0e2}
.card.pc.off:hover{border-color:rgba(196,181,253,.6);box-shadow:0 10px 30px rgba(139,92,246,.18)}
.pcb.off{background:rgba(255,255,255,.08);color:#c4c0d4;border:1px solid rgba(255,255,255,.22)}
.pcf{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:4px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12)}
.pcf em{font-style:normal;font-size:12.5px;font-weight:700;color:#c4b5fd}
.card.pc.off:hover .pcf em{color:#e9d5ff}
.pck{font-size:11.5px;color:#fbbf24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);padding:2px 8px;border-radius:99px}

/* 🏠 HOME 버튼 */
.ib.ibt.hm{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.5px}
@media(max-width:520px){.pk-top{gap:6px}.pk-top .lg{font-size:0;gap:0}.pk-top .lg i{font-size:19px}.pk-top .ib.ibt{padding:0 9px;font-size:12px;gap:4px}.pk-top .ib.lgb{padding:0 9px;gap:5px;font-size:12px}}

/* 🎨 테마 */
.thd{font-size:13px;color:var(--mut);margin:-4px 0 16px;line-height:1.6}
.thg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.thc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 10px 12px;border-radius:16px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);text-align:left;transition:.15s}
.thc:hover{transform:translateY(-2px);border-color:rgba(236,72,153,.55)}
.thc.on{border-color:#ec4899;box-shadow:0 0 0 3px rgba(236,72,153,.22)}
.thp{position:relative;display:block;width:100%;height:62px;border-radius:11px;overflow:hidden;margin-bottom:4px;border:1px solid rgba(255,255,255,.1)}
.thp i{position:absolute;left:10px;top:12px;width:46%;height:14px;border-radius:7px}
.thp em{position:absolute;right:10px;top:12px;width:22px;height:22px;border-radius:50%}
.thp u{position:absolute;left:10px;bottom:12px;width:62%;height:6px;border-radius:3px;opacity:.7}
.thc b{font-size:13.5px}.thc small{font-size:11.5px;color:var(--mut);line-height:1.4}
.thk{position:absolute;top:4px;right:4px;display:none;width:22px;height:22px;border-radius:50%;place-items:center;font-size:12px;font-weight:900;color:#fff;background:#ec4899;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.thc.on .thk{display:grid}
@media(max-width:620px){.thg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pk-top{flex-wrap:wrap;row-gap:12px}.pk-top .lg{font-size:17px;gap:10px}.pk-top .sp{flex-basis:100%;height:0}.pk-top>.ib{flex:1 1 auto;justify-content:center}.thx{display:none}}

/* 🎨 녹음 화면 테마 버튼 */
#thB i{font-style:normal}
@media(max-width:860px){#thB{padding:0 9px;font-size:12px}}
@media(max-width:560px){#thB{flex-direction:column;width:auto;min-width:38px;padding:0 5px;gap:0;line-height:1.05}#thB i{font-size:14px}#thB span{font-size:9.5px;font-weight:800}}

/* 📋 PC 붙여넣기 버튼 숨김 */
@media(hover:hover) and (pointer:fine){#pBtn,.pbtn{display:none!important}}

/* 🎶 화음 · 코러스 넣기 */
.rgpop .hmr{color:#fbcfe8!important}
.cbar .hmb{border-color:rgba(236,72,153,.5);background:linear-gradient(135deg,rgba(139,92,246,.3),rgba(236,72,153,.28))}
@media(max-width:860px){.cbar .hmb span{display:none}}
.hm{text-align:left}
.hm-sel{font-size:12.5px;color:var(--mut);margin:-4px 0 14px;line-height:1.6}.hm-sel b{color:#fff}
.hm-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid var(--line);margin-bottom:14px}
.hm-tabs button{padding:10px 6px;border-radius:10px;border:0;background:transparent;color:var(--mut);font-weight:800;font-size:13px;cursor:pointer;word-break:keep-all;transition:.15s}
.hm-tabs button.on{color:#fff;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 4px 16px rgba(236,72,153,.3)}
.hm-d{font-size:13px;color:#d6d0ee;line-height:1.6;margin:0 0 12px}.hm-d b{color:#fff}
.hm-os{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
.hmo{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:11px 12px;border-radius:14px;border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);text-align:left;cursor:pointer;transition:.15s;color:#fff}
.hmo span{grid-row:span 2;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:rgba(139,92,246,.18)}
.hmo b{font-size:13.5px}.hmo small{font-size:11.5px;color:var(--mut);line-height:1.4}
.hmo:hover{border-color:rgba(236,72,153,.5)}
.hmo.on{border-color:#ec4899;background:rgba(236,72,153,.1);box-shadow:0 0 0 3px rgba(236,72,153,.15)}.hmo.on span{background:linear-gradient(135deg,#7c3aed,#db2777)}
.hm-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line);margin-bottom:10px;font-size:13px;font-weight:700}
.hm-key select{padding:7px 10px;border-radius:9px;background:#140f28;border:1px solid rgba(167,139,250,.4);color:#fff;font-weight:700}
.hm-key small{flex-basis:100%;font-size:11.5px;font-weight:400;color:var(--mut)}
.hm-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#d6d0ee;margin-bottom:10px;cursor:pointer}.hm-chk input{width:16px;height:16px;accent-color:#ec4899}
.hm-note{font-size:12px;color:var(--mut);line-height:1.6;margin-bottom:14px}.hm-note b{color:#fff}
.hm-go{width:100%;justify-content:center;padding:14px;font-size:15px}
@media(max-width:560px){.hm-os{grid-template-columns:1fr}.hm-tabs button{font-size:12px;padding:9px 4px}}

/* 🎶 자동 화음만 */
.hm-tabs{display:none!important}

/* 🎭 재미 목소리 묶음 */
.vcl{margin:10px 0 5px;font-size:11.5px;font-weight:800;color:#d8b4fe;letter-spacing:.2px}
.vcl:first-of-type{margin-top:4px}
.fx.vc .vcg{margin:0 0 4px}

/* 🎬 영상 만들기 */
.btn.vdb{width:100%;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:left;padding:14px 16px;margin-bottom:14px;white-space:normal;border:1.5px solid rgba(236,72,153,.5);background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(139,92,246,.16))}
.btn.vdb span{grid-row:span 2;font-size:26px}.btn.vdb b{font-size:15px}.btn.vdb small{font-size:12px;font-weight:500;color:var(--mut)}
.vd{text-align:left}.vd-d{font-size:13px;color:#d6d0ee;line-height:1.6;margin:-4px 0 14px}.vd-d b{color:#fff}
.vd-row{margin-bottom:12px}.vd-row>b,.vd-row label>b{display:block;font-size:12.5px;margin-bottom:6px;color:#e9d5ff}
.vd-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vd-seg button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px;border-radius:13px;border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#fff;font-weight:800;font-size:13.5px;cursor:pointer}
.vd-seg button small{font-size:11px;font-weight:500;color:var(--mut)}.vd-seg button.on{border-color:#ec4899;background:rgba(236,72,153,.12)}
.vd-row input[type=range]{width:calc(100% - 60px);vertical-align:middle;accent-color:#ec4899}.vd-row em{font-style:normal;font-weight:800;margin-left:8px}
.vd-bgs{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.vd-bgs button,.vd-up{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border-radius:12px;border:1.5px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--mut);font-size:11px;font-weight:700;cursor:pointer;word-break:keep-all;text-align:center}
.vd-bgs button span,.vd-up span{font-size:22px}.vd-up i{font-style:normal;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.vd-bgs button.on,.vd-up.on{color:#fff;border-color:#ec4899;background:rgba(236,72,153,.14)}
.vd-row.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vd-row input:not([type]){width:100%;padding:10px 12px;border-radius:11px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.14);color:#fff;outline:none}
.vd-row.ly{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.22);border:1px solid var(--line)}.vd-row.ly small{display:block;font-size:11.5px;color:var(--mut);margin:4px 0 0 24px;line-height:1.5}
.vd-chk{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;cursor:pointer;margin-bottom:6px}.vd-chk input{width:16px;height:16px;accent-color:#ec4899}
.vd-sync{margin:8px 0 0 24px;padding:8px 12px;font-size:12.5px}
.vd-note{font-size:12px;color:var(--mut);line-height:1.6;margin:8px 0 12px}.vd-note b{color:#fff}
.vd-pv{margin-bottom:12px}.vd-pv canvas{width:100%;max-height:300px;object-fit:contain;border-radius:12px;background:#000;display:block}
.vd-pb{height:7px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}.vd-pb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ef4444,#ec4899,#8b5cf6)}
.vd-pv small{display:block;margin-top:6px;font-size:12.5px;color:#fbcfe8}
.vd-ok{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.35);margin-bottom:12px;font-weight:800;color:#86efac}
.vd-ok .btn{justify-content:center}.vd-ok small{font-size:11.5px;color:var(--mut);font-weight:500}
.vd-go{width:100%;justify-content:center;padding:14px;font-size:15px}
@media(max-width:620px){.vd-bgs{grid-template-columns:repeat(4,1fr)}.vd-row.two{grid-template-columns:1fr}}
/* 👆 탭해서 가사 맞추기 */
.btn.tsb{width:100%;justify-content:center;margin-top:8px;border-color:rgba(236,72,153,.45)}
.tsh{display:block;font-size:11.5px;color:var(--mut);margin-top:6px;line-height:1.5;text-align:center}
.ts-ov.drawn .md{animation:none}
.md.ts{text-align:center}.ts-d{font-size:13px;color:#d6d0ee;line-height:1.6}.ts-d b{color:#fff}
.ts-cnt{margin:10px 0 8px;font:800 13px 'Space Grotesk',sans-serif;color:#f9a8d4}
.ts-box{padding:14px 12px;border-radius:16px;background:rgba(0,0,0,.3);border:1px solid var(--line);margin-bottom:14px}
.ts-prev,.ts-next{font-size:14px;color:var(--mut);min-height:20px}.ts-prev{opacity:.6}
.ts-cur{font-size:24px;font-weight:900;color:#fff;margin:8px 0;min-height:32px;line-height:1.35}
.ts-tap{width:100%;padding:22px;border:0;border-radius:20px;font-size:24px;font-weight:900;color:#fff;cursor:pointer;background:linear-gradient(135deg,#7c3aed,#db2777);box-shadow:0 10px 30px rgba(236,72,153,.4);transition:transform .06s;margin-bottom:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.ts-tap small{font-size:12px;font-weight:600;opacity:.8}.ts-tap:active{transform:scale(.97)}.ts-tap:disabled{opacity:.35;cursor:default}

/* 🎯 녹음 타이밍 안내 */
.cn p{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--txt,#eee);text-align:center;word-break:keep-all}
.cn-st{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.cn-st li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--line,rgba(255,255,255,.1));font-size:13.5px;line-height:1.5;text-align:left;word-break:keep-all}
.cn-st li span{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;color:#fff;background:linear-gradient(135deg,#22d3ee,#8b5cf6)}
.cn-n{margin-bottom:6px;font-size:12.5px;color:var(--mut,#aaa);text-align:center;line-height:1.55;word-break:keep-all}

/* 🎯 오토튠 구간 */
.atrg{margin:10px 0;padding:11px;border-radius:13px;background:rgba(0,0,0,.18);border:1px solid var(--line,rgba(255,255,255,.08))}
.atrg-t{font-size:12.5px;font-weight:800;margin-bottom:7px}
.atrm{margin-bottom:9px}
.atrl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}.atrl small{font-size:12px;color:var(--mut,#aaa);line-height:1.5}
.atrc{display:inline-flex;align-items:center;gap:6px;padding:4px 5px 4px 10px;border-radius:99px;background:rgba(34,211,238,.14);border:1px solid rgba(34,211,238,.45);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.atrc button{width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:10px;cursor:pointer}.atrc button:hover{background:#ef4444}
.atradd{width:100%;margin-bottom:9px}.atradd small{opacity:.85;margin-left:4px;font-variant-numeric:tabular-nums}
.atrg-g{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.atrg-g li{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.55;color:var(--mut,#bbb);word-break:keep-all}
.atrg-g li span{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;background:linear-gradient(135deg,#22d3ee,#8b5cf6)}
.atrg-g li b,.atrg-m b{color:var(--txt,#fff)}
.atrg-m{font-size:12px;line-height:1.55;color:var(--mut,#bbb)}
.rgpop button.atr{border-color:rgba(34,211,238,.45);color:#a5f3fc}.rgpop button.atr:hover{background:rgba(34,211,238,.2)}

/* 🎭 재미 목소리 테두리 */
.fx.vc{border:2px solid rgba(236,72,153,.8)!important;box-shadow:0 0 0 3px rgba(236,72,153,.1),0 8px 22px rgba(236,72,153,.14)}
.fx.vc.on{border-color:#ec4899!important;box-shadow:0 0 0 3px rgba(236,72,153,.22),0 10px 28px rgba(236,72,153,.28)}

/* 📱 효과 · 가사 창: 아래 녹음 버튼줄은 항상 보이게 */
@media(max-width:860px){
.mb{z-index:62!important}
.side{bottom:calc(84px + env(safe-area-inset-bottom))!important;height:auto!important;max-height:calc(100vh - 150px - env(safe-area-inset-bottom));max-height:calc(100dvh - 150px - env(safe-area-inset-bottom));border-radius:24px!important;margin:0 6px;transform:translateY(calc(100% + 140px))!important;padding-bottom:58px}
.side.open{transform:none!important}
.side:before{width:54px!important;height:6px!important;margin:10px auto 6px!important;background:rgba(255,255,255,.4)!important}
.sh-x{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:63;padding:11px 22px;border-radius:99px;border:0;background:linear-gradient(90deg,#7c3aed,#db2777);color:#fff;font-weight:800;font-size:14px;box-shadow:0 10px 26px rgba(219,39,119,.45);white-space:nowrap;cursor:pointer}
.side.open~.sh-x{display:block}
}
@media(min-width:861px){.sh-x{display:none!important}}

/* 🚪 뒤로가기 확인 창 */
.exq small{display:block;margin:10px 0 6px;font-size:12px;color:var(--mut,#aaa);text-align:center;line-height:1.5}

/* 📱 녹음 조각 버튼줄: 아래에 넓게 */
@media(max-width:860px){
.cbar{position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(146px + env(safe-area-inset-bottom))!important;z-index:58!important;flex-wrap:wrap!important;justify-content:center;gap:6px!important;padding:8px!important;margin:0!important;border-radius:16px!important;white-space:normal!important;transform:none!important;box-shadow:0 12px 30px rgba(0,0,0,.6)!important}
.cbar::after{display:none!important}
.cbar button{flex:1 1 auto;min-width:62px;padding:10px 8px!important;font-size:13px!important;white-space:nowrap}
.cbar .hmb span,.cbar .atb span{display:inline!important}
.cbar button.x{flex:0 0 44px;min-width:44px}
.cbar .atb{border-color:rgba(34,211,238,.55)!important;background:rgba(34,211,238,.15)!important}
/* 켜진 효과: 눈에 보이는 끄기 버튼 */
.fx>.h .sw{order:3}
.fx.on>.h::after{content:'✕ 끄기';order:2;flex:none;padding:5px 10px;border-radius:99px;font-size:11.5px;font-weight:800;color:#fecaca;background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.55);white-space:nowrap}
html[lang=en] .fx.on>.h::after{content:'✕ Off'}
html[lang=zh] .fx.on>.h::after{content:'✕ 关闭'}
html[lang=ja] .fx.on>.h::after{content:'✕ オフ'}
}

/* 📱 모바일 확대 */
@media(max-width:860px){
.mzc{display:inline-flex;align-items:center;gap:2px;flex:none;padding:2px;border-radius:12px;background:rgba(11,8,22,.92);border:1px solid rgba(34,211,238,.45)}
.mzc .tog{padding:7px 12px!important;font-size:15px!important;font-weight:900;background:transparent!important;border:0!important}
.mzc .tog:disabled{opacity:.35}
.mzc b{min-width:34px;text-align:center;font-size:12px;color:#a5f3fc;font-variant-numeric:tabular-nums}
body.mzoom .ln{overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin;scrollbar-color:#8b5cf6 transparent}
body.mzoom .ln::-webkit-scrollbar{height:4px}body.mzoom .ln::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#8b5cf6,#ec4899);border-radius:9px}body.mzoom .ln::-webkit-scrollbar-track{background:transparent}
}

/* 📱 모바일 구간 창 · 구간 표시 */
@media(max-width:860px){
.cbar{display:none!important}
.rgpop{position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(146px + env(safe-area-inset-bottom))!important;transform:none!important;z-index:58!important;flex-wrap:wrap!important;justify-content:center;gap:6px!important;padding:10px 8px 8px!important;border-radius:16px!important;white-space:normal!important;box-shadow:0 12px 30px rgba(0,0,0,.6)!important}
.rgpop::after{display:none!important}
.rgpop>b{flex-basis:100%;text-align:center;font-size:13px;margin-bottom:2px}
.rgpop .sep{flex-basis:100%;height:1px;background:rgba(255,255,255,.08);margin:2px 0}
.rgpop button{flex:1 1 auto;min-width:86px;padding:10px 8px!important;font-size:13px!important;white-space:nowrap}
.rgpop button.off{opacity:.35}
.rgm{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;background:rgba(236,72,153,.18);border-left:2px solid #ec4899;border-right:2px solid #f59e0b}
.rgm.open{background:transparent;border-right:0;width:0!important}
}

/* 재생선이 손가락을 가로채지 않게 */
.mph,.rgm{pointer-events:none}
/* 구간 창 닫기 버튼 */
.rgpop .rgx{flex:none!important;min-width:0!important;width:30px;height:30px;padding:0!important;border-radius:50%!important;display:grid;place-items:center;font-size:13px!important;color:var(--mut,#bbb)}
.rgpop .rgx:hover{color:#fff;border-color:#ef4444;background:rgba(239,68,68,.2)}
@media(max-width:860px){.rgpop .rgx{position:absolute;top:6px;right:6px;width:36px;height:36px;font-size:15px!important;color:#fff;background:rgba(255,255,255,.1)}}

/* 🎧 모바일 내 목소리 듣기 버튼 */
@media(max-width:860px){
.mbx .mmon{flex:none;font-weight:800;border-color:rgba(34,211,238,.6)!important;color:#a5f3fc!important}
.mbx .mmon.on{background:linear-gradient(90deg,#0891b2,#7c3aed)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 4px 14px rgba(34,211,238,.35)}
}