/* ======================================================================
   🎤 pb-venue.css — 곡 예약 · 업장 무대 화면(TV)   v1.29.10  2026-10-22 (🎤 노래방 무대 준비 창 크기 맞춤) · v1.26.2  2026-10-15 (🎤 온라인 노래방 kara=1 · 폰 화면) · v1.26.0 (🎤 노래방 곡 고르기·무대 대기·악기 연결 표시) · v1.1.0  2026-10-07
   경로 : /home/orcax/band-server/public/css/pb-venue.css   (sync.html)
   ====================================================================== */
/* 무대 위 [🎤 예약 N] */
.pbQChip{margin-left:auto;flex:none;width:auto!important;border:0;border-radius:999px;padding:5px 11px!important;font-size:12.5px!important;font-weight:900;cursor:pointer;
  color:#1a1205!important;background:linear-gradient(90deg,#ffd84a,#ffb84a)!important;box-shadow:0 0 14px rgba(255,216,74,.35);white-space:nowrap;margin-top:0!important;margin-bottom:0!important}
.pbQChip b{display:inline-block;min-width:16px;margin-left:3px;padding:0 5px;border-radius:999px;background:#1a1205;color:#ffd84a;font-size:11px}
#stageTop{display:flex;align-items:center;gap:8px}

/* 예약 창 */
.pbQ{position:fixed;inset:0;z-index:75;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,6,16,.6);opacity:0;pointer-events:none;transition:opacity .2s}
.pbQ.open{opacity:1;pointer-events:auto}
.pbQ .qCard{width:min(560px,100%);max-height:82vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#151a2e,#0d111f);border:1px solid #2a3352;border-bottom:0;border-radius:22px 22px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));color:#eef1ff;transform:translateY(20px);transition:transform .25s}
.pbQ.open .qCard{transform:none}
.qHead{display:flex;align-items:center;justify-content:space-between;font-size:17px}
.qClose{width:auto!important;margin:0!important;border:0;background:none;color:#8a93b8;font-size:20px;cursor:pointer;padding:4px 8px!important}
.qTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0;background:#0b0e19;border:1px solid #232a40;border-radius:13px;padding:4px}
.qTabs button{margin:0!important;border:0;border-radius:10px;padding:9px!important;background:transparent;color:#98a1bd;font-weight:900;font-size:14px;cursor:pointer;width:auto}
.qTabs button.on{background:linear-gradient(90deg,#ff4fa3,#ff8a5c);color:#111}
.qFind{width:100%;box-sizing:border-box;background:#0b0e19;border:1px solid #232a40;color:#eef1ff;border-radius:12px;padding:11px;font-size:15px;margin-bottom:8px}
.qBody{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:120px}
.qRow{display:flex;align-items:center;gap:8px;padding:10px 6px;border-bottom:1px solid #1d2338}
.qRow.first{background:linear-gradient(90deg,rgba(255,79,163,.16),transparent);border-radius:12px}
.qN{width:26px;flex:none;text-align:center;font-weight:900;color:#ff9cc8}
.qT{flex:1;min-width:0}.qT b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qT small{display:block;font-size:12px;color:#98a1bd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qA{flex:none;width:auto!important;margin:0!important;border:1px solid #2a3352;background:#151b30;color:#e5e9ff;border-radius:10px;padding:7px 10px!important;font-size:13px;font-weight:800;cursor:pointer}
.qA.add{border:0;color:#111;background:linear-gradient(90deg,#3fe0ff,#6c8cff)}
.qA.add:disabled{opacity:.6}
.qA.go{border-color:#ff4fa3;color:#ffd0e7}.qA.x{color:#ff8a95}
.qEmpty{text-align:center;color:#8a93b8;padding:30px 10px}

/* ── 📺 업장 무대 화면 (sync.html?tv=1) ── */
body.pb-tv{overflow:hidden;background:#000!important}
body.pb-tv .wrap{max-width:none!important;margin:0!important;padding:0!important}
body.pb-tv .wrap > *:not(#stageCard):not(#singBox){display:none!important}
body.pb-tv #ctrlBar,body.pb-tv .ph-tab,body.pb-tv .pbAppBar,body.pb-tv .pbQChip{display:none!important}
body.pb-tv #stageCard{position:fixed;left:0;top:0;width:calc(100vw - min(26vw,420px));height:100vh;margin:0;border:0;border-radius:0;padding:0;background:#000;display:flex;flex-direction:column;z-index:5}
body.pb-tv #stageCard .stageWrap{flex:1;display:flex;align-items:center;justify-content:center}
body.pb-tv #stageCard canvas{width:100%!important;height:auto!important;max-height:100vh}
body.pb-tv #stageCard .stageAct,body.pb-tv #recStatus{display:none!important}
body.pb-tv #stageTop{position:absolute;top:10px;left:14px;right:14px;z-index:6;font-size:18px}
body.pb-tv #singBox{position:fixed;left:0;bottom:0;width:calc(100vw - min(26vw,420px));z-index:7;margin:0;padding:0 3vw 3vh;background:linear-gradient(transparent,rgba(0,0,0,.85) 40%)}
body.pb-tv #lyricBox{background:transparent!important;border:0!important;margin:0!important}
body.pb-tv #lyCur{font-size:clamp(28px,4.4vw,72px)!important;line-height:1.25!important;text-shadow:0 0 24px rgba(255,79,163,.6),0 2px 4px #000}
body.pb-tv #lyNext{font-size:clamp(18px,2.4vw,40px)!important;color:#c9c6ee!important}
body.pb-tv #countdown{font-size:clamp(60px,10vw,160px)!important}
.tvSide{position:fixed;right:0;top:0;bottom:0;width:min(26vw,420px);z-index:8;display:flex;flex-direction:column;gap:1.6vh;padding:2.4vh 1.6vw;box-sizing:border-box;color:#fff;
  background:linear-gradient(180deg,#1a0d33,#0a0b18 60%,#0d0f1f);border-left:1px solid #2a2350;font-family:-apple-system,"Noto Sans KR",sans-serif}
.tvBrand{font-weight:900;font-size:clamp(16px,1.6vw,26px);background:linear-gradient(90deg,#ff4fa3,#3fe0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tvQR{background:#fff;border-radius:18px;padding:1.4vh;text-align:center;color:#111}
.tvQR #tvQr svg{width:100%;height:auto;display:block}
.tvQR b{display:block;font-size:clamp(14px,1.3vw,22px);margin-top:.6vh}
.tvQR small{display:block;font-size:clamp(11px,.9vw,15px);color:#444;font-weight:700}
.tvNowBox{border-radius:14px;padding:1.2vh 1vw;background:rgba(255,79,163,.14);border:1px solid rgba(255,79,163,.4)}
.tvNowBox small{font-size:12px;color:#ffb3d6;font-weight:800}.tvNowBox b{display:block;font-size:clamp(16px,1.6vw,28px);line-height:1.25}
.tvListH{font-weight:900;color:#ffd84a;font-size:clamp(14px,1.2vw,20px)}
.tvSide ol{list-style:none;margin:0;padding:0;flex:1;overflow:hidden;display:flex;flex-direction:column;gap:.8vh}
.tvSide li{padding:1vh .8vw;border-radius:12px;background:#141a2e;border:1px solid #232a40}
.tvSide li b{display:block;font-size:clamp(14px,1.25vw,22px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvSide li small{font-size:clamp(11px,.85vw,15px);color:#98a1bd}
.tvSide li.first{border-color:#ffd84a;background:linear-gradient(90deg,rgba(255,216,74,.16),#141a2e)}
.tvSide li.none{text-align:center;color:#98a1bd;font-size:clamp(13px,1vw,18px);line-height:1.6;border-style:dashed}
.tvClock{text-align:right;font:900 clamp(18px,1.8vw,32px) Consolas,monospace;color:#5c6280}
.tvCd{position:fixed;inset:0;right:min(26vw,420px);z-index:20;display:none;align-items:center;justify-content:center;background:rgba(5,6,16,.78);backdrop-filter:blur(6px)}
.tvCd.on{display:flex}
.tvCd .cdIn{text-align:center;color:#fff}
.tvCd small{font-size:clamp(16px,1.6vw,28px);color:#ffb3d6;font-weight:800}
.tvCd b{display:block;font-size:clamp(34px,5vw,88px);font-weight:900;margin:.6vh 0}
.tvCd span{font-size:clamp(16px,1.6vw,28px);color:#c9c6ee}
.tvCd em{display:block;font-style:normal;font:900 clamp(80px,14vw,240px)/1 Consolas,monospace;color:#ffd84a;text-shadow:0 0 40px rgba(255,216,74,.5);margin:2vh 0}
.tvCd button{width:auto!important;border:1px solid #5c6280;background:transparent;color:#c9c6ee;border-radius:999px;padding:10px 22px!important;font-size:16px;cursor:pointer}
.tvGo{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 110%,#4a1670,#0a0b18 70%);color:#fff;text-align:center}
.tvGo .big{font-size:80px}.tvGo b{display:block;font-size:42px;margin:8px 0}.tvGo span{display:block;color:#c9c6ee;font-size:18px}
.tvGo button{width:auto!important;margin:26px auto 14px!important;border:0;border-radius:999px;padding:18px 48px!important;font-size:24px;font-weight:900;color:#111;background:linear-gradient(90deg,#ff4fa3,#ff8a5c);cursor:pointer;box-shadow:0 10px 40px rgba(255,79,163,.4)}
.tvGo small{display:block;max-width:520px;margin:0 auto;color:#8a86b8;font-size:14px;line-height:1.6}
body.pb-tv #guideRow,body.pb-tv #chordBox,body.pb-tv #lyricBox > :not(#lyCur):not(#lyNext){display:none!important}
.tvSide li .now{display:inline-block;margin-right:6px;font-size:11px;font-weight:900;color:#111;background:#ffd84a;border-radius:6px;padding:1px 6px;vertical-align:middle}

/* ── 🎤 v1.26.0 노래방 터치 화면 (TV) — 곡 고르기 · 무대 대기 · 악기 연결 표시 ── */
.tvPickBtn{width:100%!important;margin:0!important;border:0;border-radius:14px;padding:1.4vh 1vw!important;font-size:clamp(15px,1.3vw,22px);font-weight:900;color:#111;background:#ff4fd8;cursor:pointer}
.tvChips{display:flex;flex-wrap:wrap;gap:.8vh .6vw;justify-content:center;margin:1.6vh 0}
.tvChips.col{justify-content:flex-start;margin:0}
.tvChip{display:inline-flex;align-items:center;gap:.5vw;padding:.7vh 1vw;border-radius:999px;font-size:clamp(13px,1.05vw,19px);font-weight:800;background:#141a2e;border:1px solid #2a3352;color:#eef1ff}
.tvChip i{width:.8vw;height:.8vw;min-width:10px;min-height:10px;border-radius:50%;background:#98a1bd}
.tvChip.on i{background:#3dff9a}.tvChip.on{border-color:#2f7a55}
.tvChip.ai i{background:#8d5cff}.tvChip.ai{border-color:#4a3a86;color:#d9ccff}
.tvChip.voc i{background:#ff4fd8}.tvChip.voc{border-color:#7a2f6c}
.tvChip.none{color:#98a1bd;border-style:dashed}

.tvPick{position:fixed;inset:0;z-index:25;display:none;flex-direction:column;gap:1.8vh;padding:2.4vh 1.8vw;box-sizing:border-box;background:#06070f;color:#eef1ff;font-family:-apple-system,"Noto Sans KR",sans-serif}
.tvPick.open{display:flex}
.tvPick button{font-family:inherit;cursor:pointer}
.pkHead{display:flex;align-items:center;gap:1vw}
.pkBrand{flex:1;display:flex;align-items:center;gap:1vw}
.pkBrand .logo{width:3.4vw;height:3.4vw;min-width:44px;min-height:44px;border-radius:1vw;background:#ff4fd8;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,1.8vw,32px)}
.pkBrand b{display:block;font-size:clamp(20px,2vw,36px);font-weight:900}
.pkBrand small{display:block;color:#98a1bd;font-size:clamp(12px,1vw,17px)}
.pkStat{background:#10131f;border:1px solid #232a40;border-radius:14px;padding:.9vh 1.2vw}
.pkStat small{display:block;color:#98a1bd;font-size:clamp(11px,.85vw,14px)}
.pkStat b{font-size:clamp(18px,1.6vw,28px)}
.pkClose{width:auto!important;margin:0!important;height:6vh;min-height:48px;padding:0 1.4vw!important;border-radius:14px;border:1px solid #3a4466;background:#151a2b;color:#eef1ff;font-size:clamp(14px,1.15vw,20px);font-weight:800}
.pkBody{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) min(30vw,520px);gap:1.2vw}
.pkSongs{min-height:0;display:flex;flex-direction:column;gap:1.4vh;background:#10131f;border:1px solid #232a40;border-radius:20px;padding:1.8vh 1.2vw}
.pkSearch{display:flex;align-items:center;gap:1vw}
.pkSearch input{flex:1;height:6.4vh;min-height:48px;margin:0!important;border-radius:14px;border:1px solid #2a3352;background:#151a2b;color:#eef1ff;font-size:clamp(16px,1.4vw,24px);padding:0 1.2vw;box-sizing:border-box}
.pkSearch span{color:#98a1bd;font-size:clamp(13px,1vw,17px);white-space:nowrap}
.pkList{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1vh;padding-right:.4vw}
.pkRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) auto auto;gap:.8vw;align-items:center;background:#151a2b;border:1px solid #232a40;border-radius:14px;padding:1vh 1vw}
.pkT b{display:block;font-size:clamp(16px,1.45vw,26px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkT small{color:#98a1bd;font-size:clamp(12px,.95vw,16px)}
.pkParts{color:#c9cfe6;font-size:clamp(12px,.9vw,15px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkB{width:auto!important;margin:0!important;min-height:48px;height:6vh;padding:0 1.2vw!important;border-radius:12px;border:1px solid #3a4466;background:transparent;color:#eef1ff;font-size:clamp(14px,1.15vw,20px);font-weight:800;white-space:nowrap}
.pkB.go{border:0;background:#ff4fd8;color:#111}
.pkB.x{color:#ff8a95}
.pkB.sm{height:5vh;min-height:44px;padding:0 .9vw!important;font-size:clamp(13px,1vw,17px)}
.pkB.big{height:7vh;min-height:56px;padding:0 2.4vw!important;font-size:clamp(17px,1.5vw,26px);background:#3dff9a;color:#111;border:0}
.pkB:disabled{opacity:.45;cursor:default}
.pkEmpty{text-align:center;color:#98a1bd;padding:5vh 1vw;font-size:clamp(14px,1.1vw,19px)}
.pkEmpty.sm{padding:2vh 1vw}
.pkSide{min-height:0;display:flex;flex-direction:column;gap:1.4vh}
.pkCard{background:#10131f;border:1px solid #232a40;border-radius:20px;padding:1.6vh 1vw}
.pkCard h3{margin:0 0 1vh;font-size:clamp(15px,1.25vw,22px)}
.pkCard h3 small{color:#98a1bd;font-weight:600;font-size:clamp(12px,.85vw,15px);margin-left:.4vw}
.pkQs{display:flex;flex-direction:column;gap:.8vh;max-height:28vh;overflow-y:auto}
.pkQ{display:flex;align-items:center;gap:.6vw;padding:.6vh .6vw;border-radius:12px}
.pkQ.first{background:#1b1430;border:1px solid #ff4fd8}
.pkQ .n{font-weight:900;color:#98a1bd;width:1.6vw;min-width:18px;text-align:center}
.pkQ .t{flex:1;min-width:0}.pkQ .t b{display:block;font-size:clamp(14px,1.1vw,19px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pkQ .t small{color:#98a1bd;font-size:clamp(11px,.85vw,14px)}
.pkJoin{display:flex;gap:1vw;align-items:center;margin-top:auto}
.pkJoin #pkQr{width:min(8vw,130px);flex:none;background:#fff;border-radius:10px;padding:.5vw}
.pkJoin #pkQr svg{width:100%;height:auto;display:block}
.pkJoin b{display:block;font-size:clamp(14px,1.15vw,20px)}
.pkJoin small{display:block;color:#98a1bd;font-size:clamp(11px,.85vw,14px);margin-top:.3vh}
.pkJoin em{display:inline-block;margin-top:.8vh;font-style:normal;font-weight:900;color:#3fe0ff;font-size:clamp(16px,1.5vw,26px);letter-spacing:.1em}
.pkFoot{display:flex;align-items:center;gap:1.4vw;background:#10131f;border:1px solid #232a40;border-radius:20px;padding:1.2vh 1vw}
.pkFoot span{color:#98a1bd;font-size:clamp(13px,1vw,17px)}

.tvReady{position:fixed;left:0;top:0;right:min(26vw,420px);z-index:19;display:none;justify-content:center;padding-top:4vh;pointer-events:none}
.tvReady.on{display:flex}
.tvReady .rdIn{pointer-events:auto;width:min(46vw,760px);text-align:center;color:#fff;background:rgba(10,12,24,.92);border:1px solid #2a3352;border-radius:24px;padding:2.4vh 2vw}
.tvReady small{font-size:clamp(13px,1.1vw,19px);color:#ffb3ec;font-weight:800}
.tvReady b{display:block;font-size:clamp(26px,3vw,52px);font-weight:900;margin:.4vh 0}
.tvReady span{color:#c9c6ee;font-size:clamp(13px,1.1vw,19px)}
.rdKey{display:flex;align-items:center;justify-content:center;gap:1vw;margin:1vh 0}
.rdKey button{width:auto!important;margin:0!important;min-width:56px;height:6vh;min-height:48px;border-radius:14px;border:1px solid #3a4466;background:#151a2b;color:#eef1ff;font-size:clamp(18px,1.6vw,28px);font-weight:900;cursor:pointer}
.rdKey em{font-style:normal;font-weight:900;font-size:clamp(16px,1.4vw,24px);min-width:5vw}
.rdBtns{display:flex;gap:1vw;justify-content:center;margin-top:1.2vh}
.rdBtns button{width:auto!important;margin:0!important;height:8vh;min-height:56px;border-radius:18px;cursor:pointer;font-weight:900;font-family:inherit}
.rdGo{border:0;background:#3dff9a;color:#111;padding:0 3vw!important;font-size:clamp(20px,2vw,34px)}
.rdGo:disabled{opacity:.45;cursor:default}
.rdBack{border:1px solid #3a4466;background:#151a2b;color:#eef1ff;padding:0 1.6vw!important;font-size:clamp(15px,1.3vw,22px)}
.tvReady p{margin:1.2vh 0 0;color:#98a1bd;font-size:clamp(12px,.95vw,16px)}
.tvCd .tvChips{max-width:60vw;margin:1.6vh auto}

/* ── 🎤 v1.26.2 온라인 노래방 (sync.html?kara=1) — 폰·PC 모두 ── */
body.pb-kara .tvReady,body.pb-kara .tvCd{right:0}
body.pb-kara .tvReady .rdIn{width:min(92vw,760px)}
body.pb-kara .tvCd .tvChips{max-width:92vw}
.pkClose{display:inline-flex;align-items:center;text-decoration:none}
.kaGo{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:#06070f;color:#eef1ff;text-align:center;overflow-y:auto}
.kaGo .in{width:min(560px,100%)}
.kaGo .logo{width:72px;height:72px;margin:0 auto 10px;border-radius:22px;background:#ff4fd8;display:flex;align-items:center;justify-content:center;font-size:38px}
.kaGo .in > b{display:block;font-size:30px;font-weight:900}
.kaGo .in > span{display:block;color:#98a1bd;font-size:15px;margin-top:4px}
.kaRoles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.kaRoles button,.kaInst button{font-family:inherit;cursor:pointer;color:#eef1ff;background:#10131f;border:1px solid #2a3352;border-radius:18px;margin:0!important;width:auto!important}
.kaRoles button{padding:16px 10px!important;display:flex;flex-direction:column;align-items:center;gap:2px}
.kaRoles button i{font-style:normal;font-size:30px}
.kaRoles button b{font-size:18px}
.kaRoles button small{color:#98a1bd;font-size:13px}
.kaRoles button.sing{background:#ff4fd8;border-color:#ff4fd8;color:#111}
.kaRoles button.sing small{color:#3a0f33}
.kaInst{margin-top:14px;background:#10131f;border:1px solid #232a40;border-radius:18px;padding:12px}
.kaInst > small{display:block;color:#98a1bd;font-size:13px;margin-bottom:8px}
.kaInst > div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kaInst button{padding:12px 14px!important;font-size:16px;font-weight:800;min-height:48px}
.kaGo p{color:#98a1bd;font-size:13px;line-height:1.6;margin:14px 0 0}
@media (max-width:900px){
  .tvPick{padding:12px;gap:10px;overflow-y:auto}
  .pkHead{flex-wrap:wrap;gap:8px}
  .pkBrand{flex-basis:100%}
  .pkBrand b{font-size:20px}
  .pkStat{padding:6px 10px}.pkStat b{font-size:17px}
  .pkClose{height:44px;font-size:14px;padding:0 12px!important}
  .pkBody{display:flex;flex-direction:column;min-height:auto;flex:none}
  .pkSongs{min-height:56vh;padding:12px}
  .pkSearch input{height:48px;font-size:16px}
  .pkRow{grid-template-columns:minmax(0,1fr) auto auto;padding:10px}
  .pkRow .pkB{grid-row:2;grid-column:2}.pkRow .pkB.go{grid-column:3}
  .pkRow .pkT{grid-column:1/-1}.pkRow .pkParts{display:none}
  .pkT b{font-size:17px}.pkT small{font-size:13px}
  .pkB{height:46px;font-size:15px;padding:0 12px!important}
  .pkCard{padding:12px}.pkCard h3{font-size:16px}
  .tvChip{font-size:13px;padding:6px 10px}
  .pkJoin #pkQr{width:96px}
  .pkFoot{flex-wrap:wrap;padding:10px}.pkFoot span{font-size:13px}
  .pkB.big{height:52px;font-size:17px}
  .tvReady{padding-top:10px}.tvReady .rdIn{padding:14px}
  .tvReady b{font-size:24px}.rdGo{font-size:20px}.rdBack{font-size:15px}
}

/* ── 🎤 v1.26.3 노래방 '각자 다른 곳' · 목소리 ── */
.kaWhere{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.kaWhere button{font-family:inherit;cursor:pointer;margin:0!important;width:auto!important;padding:12px 8px!important;border-radius:14px;border:1px solid #2a3352;background:#10131f;color:#98a1bd;font-size:15px;font-weight:800}
.kaWhere button.on{border-color:#3fe0ff;color:#eef1ff;background:#0f2430}
.kaPill{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:22;display:none;align-items:center;gap:8px;max-width:calc(100vw - 20px);box-sizing:border-box;padding:8px 10px 8px 14px;border-radius:999px;background:rgba(16,19,31,.94);border:1px solid #2a3352;color:#eef1ff;font-size:13px;box-shadow:0 6px 24px rgba(0,0,0,.4)}
.kaPill.on{display:flex}
.kaPill b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.kaPill small{color:#98a1bd;white-space:nowrap;font-size:12px}
.kaPill button{width:auto!important;margin:0!important;min-width:40px;height:36px;padding:0 10px!important;border-radius:999px;border:1px solid #3a4466;background:#151a2b;color:#eef1ff;font-size:14px;font-weight:800;cursor:pointer}
.kaPill em{font-style:normal;font-weight:900;min-width:34px;text-align:center}
body.pb-kara .pbEnd,body.pb-kara #recBtn,body.pb-kara #recStatus{display:none!important}

/* ⭐ v1.26.7 노래방 단골 */
.kaGo .kaFav{display:block;margin:12px auto 0;min-height:42px;padding:0 16px;border-radius:12px;border:1px solid #3a4466;background:transparent;color:#eef1ff;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.kaGo .kaFav.on{border-color:#ffd84a;color:#ffd84a;background:rgba(255,216,74,.1)}
/* 🐞 v1.26.8 곡 고르기 화면 아래(▶ 예약곡 시작)가 아래 조작 막대(z40)에 가려지던 것 → 곡 고르기 화면을 위로 · 오른쪽 칸은 넘치면 스크롤 */
.tvPick.open{z-index:45}
.pkSide{overflow-y:auto}

/* 🤖 v1.26.17 노래방 PC [AI 반주 맡기] */
.kaGo .kaAiBtn{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin:14px 0 4px;padding:14px 12px;border-radius:16px;border:2px solid #8d5cff;background:rgba(141,92,255,.14);color:#eef1ff;cursor:pointer;font-family:inherit}
.kaGo .kaAiBtn i{font-style:normal;font-size:30px}.kaGo .kaAiBtn b{font-size:17px}.kaGo .kaAiBtn small{color:#b9a8ff;font-size:13px}

/* 🩺 v1.26.22 반주 상태 띠는 곡 고르기 화면(z45) 위에 · 아래쪽에 */
.kaPill{z-index:47}
.tvPick.open ~ .kaPill.on{top:auto;bottom:96px}
.kaPill [data-wake]{margin-left:6px;border:0;border-radius:999px;padding:4px 10px;background:#ff4fd8;color:#111;font-weight:900;cursor:pointer}

/* ── 🎤 v1.29.10 (2026-10-22) 노래방 '무대 준비' 창이 화면보다 길어서 [▶ 시작]이 아래 단추 줄에 가려지던 것 ──
   · 창 높이를 화면 안으로 (아래 단추 줄 자리 비움) · 넘치면 창 안에서 스크롤
   · 악기 줄은 넓은 화면에서 2~3칸으로 나란히 (세로 길이 줄임) · [▶ 시작]·[곡 바꾸기]는 창 아래에 늘 보이게 */
body.pb-kara .tvReady{bottom:0;align-items:flex-start;padding:2vh 12px calc(96px + env(safe-area-inset-bottom));box-sizing:border-box}
body.pb-kara .tvReady .rdIn{max-height:100%;overflow-y:auto;box-sizing:border-box;padding:16px 18px 0;background:rgba(10,12,24,.97);overscroll-behavior:contain}
body.pb-kara .tvReady b{font-size:clamp(24px,3.2vh,44px)}
body.pb-kara #rdChips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin:12px 0}
body.pb-kara #rdChips .tvChip{width:100%;box-sizing:border-box;margin:0;justify-content:flex-start;padding:8px 12px;font-size:clamp(13px,1.8vh,17px);text-align:left}
body.pb-kara .tvReady .rdKey{margin:6px 0}
body.pb-kara .tvReady .rdKey button{height:46px;min-height:46px}
body.pb-kara .tvReady .rdBtns{position:sticky;bottom:0;margin:0 -18px;padding:10px 18px 12px;background:rgba(10,12,24,.98);border-top:1px solid #2a3352}
body.pb-kara .tvReady .rdBtns button{height:58px;min-height:58px}
body.pb-kara .tvReady p{margin:0;padding:0 0 12px}

/* ── 🚪 v1.29.11 (2026-10-22) 노래방 나가기 ── */
#kaExit{position:fixed;left:max(10px,env(safe-area-inset-left));top:max(10px,env(safe-area-inset-top));z-index:26;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 14px;border-radius:999px;
  background:rgba(16,19,31,.92);border:1px solid #3a4466;color:#eef1ff;font-weight:900;font-size:14px;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.4)}
#kaExit:hover{border-color:#ff6b7a;color:#ffb3bb}
.pkClose.kaOut{border-color:#ff6b7a!important;color:#ffb3bb!important}
.kaGo .kaBack{display:inline-block;margin-bottom:14px;color:#98a1bd;text-decoration:none;font-size:14px;font-weight:800;border:1px solid #2a3352;border-radius:999px;padding:7px 14px}
@media (max-width:760px){                                  /* 폰: 나가기는 왼쪽 위, 반주 상태 띠는 그 오른쪽으로 (겹치지 않게) */
  #kaExit{height:36px;padding:0 11px;font-size:13px}
  .kaPill{left:auto;right:10px;transform:none;max-width:calc(100vw - 112px)}
}
