/* pb-stage.css — 폰밴드 합주방 모양  v0.24.0  2026-10-07
   경로: /home/orcax/band-server/public/css/pb-stage.css
   v0.24.0: 예전 sync.html <style> 를 그대로 옮김 */
:root{--bg:#0b1120;--card:#111827;--line:#2a3a55;--text:#e5edf8;--muted:#a8b3c7;--blue:#60a5fa;--green:#34d399;--gold:#f4c76b;--red:#fb7185}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Pretendard","Malgun Gothic",sans-serif;line-height:1.5}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px 60px}
h1{font-size:21px;margin:6px 0 2px}
.sub{color:var(--muted);font-size:13px;margin:0 0 12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:12px 0}
label{display:block;font-size:13px;color:var(--muted);margin:8px 0 4px}
input,select{width:100%;background:#0b1526;color:var(--text);border:1px solid #2a3a55;border-radius:10px;padding:10px;font-size:16px}
.row{display:flex;gap:8px}.row>*{flex:1}
button{width:100%;border:0;border-radius:12px;padding:13px;font-size:16px;font-weight:800;cursor:pointer;margin-top:10px}
.b1{background:var(--blue);color:#04121f}.b2{background:var(--green);color:#03170f}.b3{background:var(--red);color:#1f0409}.b4{background:#1f2a3d;color:var(--text)}
button:disabled{opacity:.45}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}
.stat div{background:#0b1526;border:1px solid #22324a;border-radius:10px;padding:8px}
.stat b{display:block;font-size:17px}
.ok{color:var(--green)}.warn{color:var(--gold)}.bad{color:var(--red)}
.big{font-size:44px;font-weight:900;text-align:center;margin:8px 0}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th,td{border-bottom:1px solid #22324a;padding:6px 4px;text-align:left;vertical-align:middle}
th{color:var(--muted);font-weight:700}
.adj{display:flex;gap:4px}.adj button{margin:0;padding:6px 0;font-size:12px;border-radius:8px;background:#1f2a3d;color:var(--text)}
.hide{display:none}
.fitbox{margin-top:8px;border:1px solid #f59e0b;border-radius:12px;padding:8px 10px;background:rgba(245,158,11,.06)}
.fitbox summary{cursor:pointer;font-size:15px;list-style:none}.fitbox summary::-webkit-details-marker{display:none}
.fitbtn{background:linear-gradient(90deg,#f59e0b,#f472b6);color:#1a0b00}
.fm-back{position:fixed;inset:0;background:rgba(2,6,16,.78);display:flex;align-items:center;justify-content:center;z-index:200;padding:10px}
.fm-back.hide{display:none}
.fm{background:var(--card);border:1px solid #f59e0b;border-radius:18px;width:100%;max-width:460px;max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
.fm-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.fm-head b{font-size:17px}.fm-x{width:auto;margin:0;padding:4px 12px;background:#1f2a3d;color:var(--text);font-size:18px}
.fm-prev{background:#0b1024;flex:none}
.fm-sex{display:flex;gap:6px;padding:8px 12px 0}.fm-sex button{flex:1;margin:0;padding:9px 0;font-size:14px;background:#1f2a3d;color:var(--text)}
.fm-sex button.on{outline:2px solid #f472b6;background:#3b1d33}
.fm-tabs{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;flex:none}
.fm-tabs button{flex:1 0 auto;width:auto;margin:0;padding:8px 12px;font-size:14px;border-radius:999px;background:#1f2a3d;color:var(--text);white-space:nowrap}
.fm-tabs button.on{background:#f59e0b;color:#1a0b00}
.fm-body{flex:1;overflow-y:auto;padding:0 12px 8px;min-height:120px}
.fm-foot{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.fm-foot button{margin:0;padding:11px 0;font-size:14px}
.fitrow{margin-top:8px}.fitrow .fl{font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:700}
.fitrow .fo{display:flex;flex-wrap:wrap;gap:6px}
.fitrow .fo button{width:auto;margin:0;padding:7px 10px;font-size:13px;border-radius:999px;background:#1f2a3d;color:var(--text);font-weight:700}
.fitrow .fo button.sw{width:30px;height:30px;padding:0;border:2px solid #334155}
.fitrow .fo button.on{outline:3px solid #fbbf24;outline-offset:1px}
.keyrow{margin-top:10px;padding:10px;border:1px solid #a78bfa;border-radius:12px;background:rgba(167,139,250,.08)}
.keyrow .kb{display:flex;gap:6px;align-items:stretch}.keyrow .kb button{flex:1;width:auto;margin:0;padding:12px 0;font-size:15px;background:#1f2a3d;color:var(--text)}
.keyrow .kv{flex:0 0 92px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b1526;border:1px solid #2a3a55;border-radius:12px;font-size:20px;font-weight:900;color:#c4b5fd}
.keyrow .kv small{font-size:11px;color:var(--muted);font-weight:700}
.keyrow .kq{display:flex;gap:6px;margin-top:6px}.keyrow .kq button{flex:1;width:auto;margin:0;padding:8px 0;font-size:13px;background:#1f2a3d;color:var(--text)}
.pill{display:inline-block;font-size:11px;font-weight:800;padding:2px 7px;border-radius:999px;background:#1f2a3d}
.chatq button{width:auto;margin:0;padding:7px 10px;font-size:13px;border-radius:999px}
.cm{padding:3px 0;word-break:break-all}.cm b{color:#93c5fd}.cm.me b{color:#fbbf24}.cm.sys{color:#94a3b8;font-size:12.5px;text-align:center}
.log{font:12px/1.5 Consolas,monospace;color:var(--muted);white-space:pre-wrap;max-height:120px;overflow:auto}