/* pb-panel.css — 폰밴드 합주방 "공연 화면" 배치  v0.24.1  2026-10-07
   경로: /home/orcax/band-server/public/css/pb-panel.css
   무대 위 · 아래 컨트롤 한 줄 · SYNC 표시 · ⚙ 설정 서랍 (기능은 그대로, 위치만 옮김) */
body.pb-live{padding-bottom:84px}
body.pb-live h1{font-size:15px;margin:0 0 6px}
body.pb-live h1 .pill{display:inline-block;max-width:58vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle;font-size:11px}
#stageZone{position:relative;padding:10px 10px 8px;border-color:#3b2a6b;background:radial-gradient(circle at 50% 0%,rgba(141,92,255,.18),transparent 55%),var(--card)}
#stageZone > b, #stageZone > .sub:first-of-type{display:none}
#stageZone canvas#stageCanvas{margin-top:0!important;box-shadow:0 10px 30px rgba(0,0,0,.45)}
#stageTop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
#stageTop .now{flex:1;min-width:0;font-size:14px;color:#e5edf8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stageTop .now b{color:#fbbf24}
#syncBadge{border:1px solid #2a3a55;background:#0b1526;color:#94a3b8;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
#syncBadge.ok{color:#4ade80;border-color:rgba(74,222,128,.45);background:rgba(34,197,94,.08)}
#syncBadge.warn{color:#fbbf24;border-color:rgba(251,191,36,.45)}
#syncBadge.bad{color:#fb7185;border-color:rgba(251,113,133,.45)}
#stageZone .stageAct{display:flex;gap:8px;margin-top:8px}
#stageZone .stageAct button{margin:0;flex:1}
#ctrlBar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:6px;padding:8px max(8px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));background:rgba(7,12,26,.94);backdrop-filter:blur(10px);border-top:1px solid #23324f}
body.pb-live #ctrlBar{display:flex}
#ctrlBar button{flex:1;min-width:0;margin:0;padding:8px 2px;border-radius:12px;border:1px solid #23324f;background:#0f1a30;color:#cbd5e1;font-size:12px;font-weight:800;line-height:1.25;cursor:pointer}
#ctrlBar button i{display:block;font-style:normal;font-size:18px}
#ctrlBar button.go{flex:1.8;border:0;color:#fff;font-size:14px;background:linear-gradient(90deg,#3b6cff,#8d5cff);box-shadow:0 0 18px rgba(141,92,255,.45)}
#ctrlBar button.go.wait{background:#1e293b;box-shadow:none;color:#94a3b8}
#ctrlBar button.on{border-color:#4ade80;color:#4ade80}
#setPanel{padding:0;overflow:hidden}
#setPanel > summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:900;font-size:16px}
#setPanel > summary::-webkit-details-marker{display:none}
#setPanel > summary .sub{font-weight:600}
#setPanel[open] > summary{border-bottom:1px solid var(--line)}
#setPanel .setBody{padding:6px 14px 14px}
#setPanel .setBody > .card{margin:10px 0;background:#0b1526}
#setPanel h3{font-size:14px;margin:14px 0 6px;color:#93c5fd}
.pb-flash{animation:pbflash 1.2s ease}
@keyframes pbflash{0%{box-shadow:0 0 0 0 rgba(141,92,255,.9)}100%{box-shadow:0 0 0 14px rgba(141,92,255,0)}}

/* ── v0.24.1 Phase 3·4: 무대 연출 · 캐릭터 시트 ── */
.stageWrap{position:relative;border-radius:12px;overflow:hidden}
.stageWrap canvas{display:block;touch-action:manipulation}
.stageFx{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:12px}
.stageFx .fxBeam{position:absolute;inset:-20%;opacity:0;transition:opacity .4s;background:
  conic-gradient(from 200deg at 20% -10%,transparent 0 8deg,rgba(141,92,255,.30) 12deg,transparent 18deg 360deg),
  conic-gradient(from 150deg at 80% -10%,transparent 0 8deg,rgba(55,215,255,.28) 12deg,transparent 18deg 360deg),
  radial-gradient(ellipse at 50% 110%,rgba(141,92,255,.25),transparent 60%)}
.stageFx[data-state="count"]{background:rgba(3,6,15,.45);transition:background .3s}
.stageFx[data-state="count"] .fxBeam{opacity:.9;animation:sweep 2.4s ease-in-out infinite alternate}
.stageFx[data-state="play"] .fxBeam{opacity:1;filter:brightness(1.6)}
.stageFx[data-state="play"]{animation:burst .9s ease-out}
.stageFx[data-state="live"] .fxBeam{opacity:.35;animation:sweep 6s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes burst{0%{background:rgba(255,255,255,.55)}100%{background:transparent}}
.stageFx .fxNum{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:900;font-size:clamp(46px,16vw,150px);letter-spacing:.04em;color:#fff;
  text-shadow:0 0 18px rgba(141,92,255,.95),0 0 46px rgba(55,215,255,.7),0 4px 0 rgba(0,0,0,.4);opacity:0}
.stageFx .fxNum.pop{animation:numpop .95s ease-out forwards}
.stageFx[data-state="play"] .fxNum{color:#fde68a;text-shadow:0 0 22px rgba(251,191,36,.95),0 0 60px rgba(244,114,182,.7)}
@keyframes numpop{0%{opacity:0;transform:translateY(-50%) scale(1.8)}25%{opacity:1;transform:translateY(-50%) scale(1)}80%{opacity:1}100%{opacity:.15;transform:translateY(-50%) scale(.92)}}
.stageFx .fxJoin{position:absolute;left:50%;top:10px;transform:translate(-50%,-140%);padding:7px 14px;border-radius:999px;background:rgba(10,14,30,.82);border:1px solid rgba(141,92,255,.6);
  color:#fff;font-size:14px;white-space:nowrap;box-shadow:0 0 22px rgba(141,92,255,.55);transition:transform .35s cubic-bezier(.2,1.4,.4,1);max-width:92%;overflow:hidden;text-overflow:ellipsis}
.stageFx .fxJoin.show{transform:translate(-50%,0)}
.stageFx .fxJoin .sub{margin:0;color:#a8b3c7}
.stageFx .fxJoin .spot{display:inline-block;animation:spot 1s ease-in-out 2}
@keyframes spot{50%{transform:scale(1.4);filter:drop-shadow(0 0 8px #fde68a)}}
.stageFx .fxTip{position:absolute;right:8px;bottom:8px;font-size:11px;color:#cbd5e1;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:999px;opacity:.85}
.stageFx.tipped .fxTip,.stageFx[data-state="count"] .fxTip,.stageFx[data-state="play"] .fxTip{display:none}
.pbDim{position:fixed;inset:0;background:rgba(2,6,16,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:60}
.pbDim.open{opacity:1;pointer-events:auto}
.pbSheet{--pc:#8d5cff;position:fixed;left:50%;bottom:0;width:min(560px,100%);transform:translate(-50%,105%);transition:transform .32s cubic-bezier(.2,1,.3,1);z-index:61;
  background:linear-gradient(180deg,rgba(20,28,52,.98),rgba(9,14,30,.99));border:1px solid #2b3c63;border-bottom:0;border-radius:22px 22px 0 0;
  box-shadow:0 -14px 40px rgba(0,0,0,.5),0 -1px 0 var(--pc) inset;padding:8px 16px calc(16px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
.pbSheet.open{transform:translate(-50%,0)}
.pbSheet .grab{width:42px;height:5px;border-radius:3px;background:#334155;margin:2px auto 10px}
.pbSheet .sh-head{display:flex;align-items:center;gap:12px}
.pbSheet .sh-emo{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:28px;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--pc) 55%,#fff 0%),var(--pc));box-shadow:0 0 22px color-mix(in srgb,var(--pc) 60%,transparent)}
.pbSheet .sh-tt{flex:1;min-width:0}
.pbSheet .sh-part{font-size:12px;letter-spacing:.12em;font-weight:900;color:color-mix(in srgb,var(--pc) 70%,#fff)}
.pbSheet .sh-name{font-size:19px;font-weight:900;color:#fff}
.pbSheet .sh-name .sub{font-size:13px;font-weight:600}
.pbSheet .sh-x{width:36px;height:36px;border-radius:12px;border:1px solid #334155;background:#0f172a;color:#cbd5e1;font-size:16px;cursor:pointer;margin:0}
.pbSheet .chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.pbSheet .chip{font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px;border:1px solid #334155;color:#64748b;background:#0b1222}
.pbSheet .chip.on{color:#e5edf8;border-color:color-mix(in srgb,var(--pc) 60%,#334155);background:color-mix(in srgb,var(--pc) 14%,#0b1222)}
.pbSheet .sh-body{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.pbSheet .sh-lab{font-size:13px;font-weight:800;color:#cbd5e1;margin-top:4px}
.pbSheet .sh-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pbSheet .sa{margin:0;width:100%;padding:12px 10px;border-radius:14px;border:1px solid #2b3c63;background:#111b33;color:#e5edf8;font-size:14px;font-weight:800;cursor:pointer;text-align:left}
.pbSheet .sa.go{border:0;text-align:center;color:#fff;background:linear-gradient(90deg,#3b6cff,#8d5cff);box-shadow:0 0 18px rgba(141,92,255,.4)}
.pbSheet .volRow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #2b3c63;border-radius:14px;background:#0b1222}
.pbSheet .volRow input{flex:1;accent-color:var(--pc)}
.pbSheet .volRow b{width:34px;text-align:right;color:#fff}

/* ── v0.24.2 Phase 5: 🎉 공연 끝 화면 ── */
.pbEnd{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(2,6,16,.7);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.pbEnd.open{opacity:1;pointer-events:auto}
.pbEnd .endCard{position:relative;overflow:hidden;width:min(520px,100%);max-height:92vh;overflow-y:auto;border-radius:24px;padding:22px 18px 16px;
  background:radial-gradient(circle at 50% -10%,rgba(141,92,255,.45),transparent 55%),radial-gradient(circle at 100% 0%,rgba(55,215,255,.18),transparent 40%),linear-gradient(180deg,#141d38,#0a1024);
  border:1px solid #3b2a6b;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(141,92,255,.25);transform:translateY(16px) scale(.97);transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.pbEnd.open .endCard{transform:none}
.pbEnd .endConf{position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(circle,#fbbf24 2px,transparent 3px),radial-gradient(circle,#f472b6 2px,transparent 3px),radial-gradient(circle,#38bdf8 2px,transparent 3px),radial-gradient(circle,#a78bfa 2px,transparent 3px);
  background-size:90px 110px,120px 90px,70px 130px,110px 70px;background-position:10px 0,40px 20px,70px 10px,20px 50px;opacity:.55;animation:conf 3s linear infinite}
@keyframes conf{to{background-position:10px 220px,40px 200px,70px 270px,20px 190px}}
.pbEnd .endHead{position:relative;text-align:center}
.pbEnd .endBig{font-size:30px;font-weight:900;color:#fff;text-shadow:0 0 22px rgba(141,92,255,.9)}
.pbEnd .endSong{margin-top:4px;font-size:20px;font-weight:900;color:#fde68a}
.pbEnd .endMeta{margin-top:2px;font-size:13px;color:#a8b3c7}
.pbEnd .endCast{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:16px 0 4px}
.pbEnd .ec{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;font-size:13px;color:#e5edf8;background:color-mix(in srgb,var(--pc,#8d5cff) 16%,#0b1222);border:1px solid color-mix(in srgb,var(--pc,#8d5cff) 55%,#334155)}
.pbEnd .ec i{font-style:normal;color:#94a3b8;font-size:12px}
.pbEnd .ec.ai{--pc:#64748b}
.pbEnd .endGrid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.pbEnd .ea{margin:0;padding:14px 10px;border-radius:16px;border:1px solid #2b3c63;background:rgba(15,26,48,.92);color:#fff;font-size:16px;font-weight:900;cursor:pointer;text-align:left;line-height:1.3}
.pbEnd .ea small{display:block;font-size:12px;font-weight:600;color:#94a3b8;margin-top:3px}
.pbEnd .ea.again{border:0;background:linear-gradient(135deg,#3b6cff,#8d5cff);box-shadow:0 0 22px rgba(141,92,255,.45)}
.pbEnd .ea.again small{color:#e0e7ff}
.pbEnd .endX{position:relative;margin:12px 0 0;width:100%;padding:11px;border-radius:14px;border:1px solid #334155;background:transparent;color:#cbd5e1;font-weight:800;cursor:pointer}
/* v0.27.0 반응형 마무리: 좁은 폰(380px 이하)에서 아래 컨트롤 글씨 줄이고 지휘 버튼 한 줄 */
#ctrlBar button.go{white-space:nowrap}
@media(max-width:380px){#ctrlBar{gap:4px;padding-left:6px;padding-right:6px}#ctrlBar button{font-size:11px;padding:7px 1px}#ctrlBar button i{font-size:16px}#ctrlBar button.go{font-size:12.5px;flex:1.6}}

/* v1.2.0 공연 끝 카드: 눈송이·꽃가루가 위에서 떨어짐 (예전 점 무늬 대신) */
.pbEnd .endConf{background:none!important;animation:none!important;opacity:1!important;overflow:hidden;z-index:0}
.pbEnd .endConf i{position:absolute;top:-24px;display:block;font-style:normal;line-height:1;pointer-events:none;animation:pbSnow var(--d,5s) linear var(--w,0s) infinite;will-change:transform}
.pbEnd .endConf i.p{width:var(--s,7px);height:calc(var(--s,7px)*1.6);border-radius:2px;background:var(--c,#ffd84a)}
.pbEnd .endConf i.f{color:#fff;font-size:var(--s,14px);text-shadow:0 0 6px rgba(255,255,255,.8);opacity:.9}
@keyframes pbSnow{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--x,20px),300px) rotate(180deg)}100%{transform:translate(0,640px) rotate(360deg)}}
.pbEnd .endHead,.pbEnd .endCast,.pbEnd .endGrid,.pbEnd .endX{position:relative;z-index:1}