/* 펀처 회원 웹. 폰은 영상 위에 채팅을 얹고, 넓은 화면은 영상과 채팅을 나란히 둔다. */
:root{
  color-scheme:dark;
  --bg:#05070c;--panel:#0d1320;--panel2:#161e2e;--line:#ffffff26;
  --ink:#f1f5f9;--mute:#a9b4c6;--live:#e0245e;--err:#fca5a5;
  --pad-t:env(safe-area-inset-top,0px);--pad-b:env(safe-area-inset-bottom,0px);
  --pad-l:env(safe-area-inset-left,0px);--pad-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* 가입·로그인 */
.gate{min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;padding:max(24px,var(--pad-t)) 16px max(24px,var(--pad-b));overflow:auto}
.gateCard{width:100%;max-width:420px;margin:auto 0}
.gateCard h1{margin:0 0 6px;font-size:26px;font-weight:800}
.gateLead{margin:0 0 20px;color:var(--mute);font-size:14px}
.gateTabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
.gateTabs button{min-height:46px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--mute);font-weight:700}
.gateTabs button[aria-selected="true"]{background:#334155;color:#fff}
.gateCard label{display:block;margin-bottom:14px;font-size:14px;font-weight:600;color:#cbd5e1}
.gateCard input{display:block;width:100%;min-height:48px;margin-top:6px;padding:0 14px;border:1px solid #475569;border-radius:10px;background:var(--panel);font-size:16px}
.gateCard small{display:block;margin-top:5px;font-size:12px;font-weight:400;color:var(--mute)}
.gateMsg{min-height:21px;margin:2px 0 12px;font-size:14px;color:var(--err)}
.primary{width:100%;min-height:52px;border:0;border-radius:12px;background:var(--live);color:#fff;font-size:17px;font-weight:800}
.primary:disabled{opacity:.6}

.gateCard label.agree{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:400}
.gateCard label.agree input{width:22px;height:22px;min-height:0;margin:0;flex:none}
.gateCard a{color:#93c5fd}

/* 내 계정·주문 판 */
.acct{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:#000a}
.acctCard{box-sizing:border-box;width:100%;max-width:520px;max-height:90dvh;overflow:auto;padding:16px 16px calc(20px + var(--pad-b));border-radius:16px 16px 0 0;background:var(--panel)}
.acctCard h2{margin:0;font-size:18px}
.acctCard label{display:block;margin:12px 0 0;font-size:14px;font-weight:600;color:#cbd5e1}
.acctCard input{display:block;width:100%;min-height:46px;margin-top:6px;padding:0 12px;border:1px solid #475569;border-radius:10px;background:var(--bg);font-size:16px}
.acctCard .primary{margin-top:14px}
.acctList button{display:block;width:100%;min-height:48px;margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-weight:700}
.acctRow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;overflow-wrap:anywhere}
.acctRow small{display:block;margin-top:2px;color:var(--mute);font-size:13px}
.acctNote{margin:10px 0 0;font-size:14px;line-height:1.5;color:#cbd5e1}
.shop li button{grid-column:1 / -1;min-height:44px;border:0;border-radius:10px;background:var(--live);color:#fff;font-weight:800}

/* 화면 틀 */
.app{position:relative;height:100dvh;overflow:hidden;background:#000}
.stage{position:absolute;inset:0;background:#000}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.waiting{position:absolute;left:16px;right:16px;top:30%;display:grid;gap:6px;text-align:center;pointer-events:none}
.waiting strong{font-size:22px;font-weight:800}
.waiting span{font-size:14px;color:var(--mute)}

/* 위 줄 */
.top{position:absolute;z-index:4;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;min-height:60px;padding:calc(8px + var(--pad-t)) calc(12px + var(--pad-r)) 8px calc(12px + var(--pad-l));background:linear-gradient(#000a,transparent)}
.brand{font-weight:800;font-size:16px;white-space:nowrap}
.pill{padding:3px 10px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:800;background:#0006;white-space:nowrap}
.pill.on{border-color:var(--live);background:var(--live);color:#fff}
.count{font-size:13px;color:#e2e8f0;white-space:nowrap}
.grow{flex:1;min-width:0}
.me{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#e2e8f0}
.ghost{flex:none;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#0006;font-size:13px;font-weight:700;white-space:nowrap}

.roomInfo{position:absolute;z-index:3;left:calc(12px + var(--pad-l));right:76px;top:calc(62px + var(--pad-t));display:grid;gap:1px;text-shadow:0 1px 3px #000}
.roomInfo b,.roomInfo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roomInfo b{font-size:15px}
.roomInfo span{font-size:13px;color:#e2e8f0}

/* 오른쪽 단추. 폰에서는 채팅 위에 둔다 */
.stageBtns{position:absolute;z-index:4;right:calc(12px + var(--pad-r));bottom:calc(46dvh + 8px);display:grid;gap:10px}
.round{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:#000a}
.round svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.round[aria-pressed="true"]{background:#fff2}
#heartCount{position:absolute;right:-4px;top:-6px;min-width:20px;padding:0 5px;border-radius:999px;background:var(--live);font-size:11px;font-weight:800;line-height:18px;text-align:center}
#heartCount:empty{display:none}

/* 폰: 채팅을 영상 아래쪽에 얹는다 */
.side{position:absolute;z-index:3;left:0;right:0;bottom:0;height:46dvh;display:flex;flex-direction:column;padding:0 calc(12px + var(--pad-r)) calc(8px + var(--pad-b)) calc(12px + var(--pad-l));background:linear-gradient(transparent,#000c 22%)}
.sideTabs{flex:none;display:none}
.pin{flex:none;display:flex;align-items:center;gap:10px;margin-top:auto;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:#000a}
.pinText{flex:1;min-width:0;display:grid}
.pinText b,.pinText span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pinText b{font-size:14px}
.pinText span{font-size:13px;color:#e2e8f0}
#btnPin{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--live);color:#fff;font-size:14px;font-weight:800;white-space:nowrap}
.chatPane{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:6px}
.pin:not([hidden]) + .chatPane{flex:1}
.chat{flex:1;min-height:0;margin:0;padding:0;overflow-y:auto;list-style:none;display:flex;flex-direction:column;gap:6px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.chat::before{content:"";margin-top:auto}
.chat li{font-size:14px;line-height:1.4;overflow-wrap:anywhere;text-shadow:0 1px 2px #000}
.chat b{margin-right:6px;font-weight:700;color:#cbd5e1}
.chat li.host b{color:#fda4af}
.chat .empty{color:var(--mute)}
.say{flex:none;display:flex;gap:8px;margin-top:8px}
.say input{flex:1;min-width:0;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#000a;font-size:16px}
.say button{flex:none;min-height:46px;padding:0 16px;border:0;border-radius:999px;background:var(--live);color:#fff;font-size:14px;font-weight:800}
.sayMsg{flex:none;margin:4px 0 0;font-size:12px;color:var(--err)}
.sayMsg:empty{display:none}

/* 상품: 폰에서는 아래에서 올라오는 판 */
.shopPane{position:fixed;z-index:6;left:0;right:0;bottom:0;height:78dvh;display:flex;flex-direction:column;padding:14px calc(14px + var(--pad-r)) calc(14px + var(--pad-b)) calc(14px + var(--pad-l));border-radius:16px 16px 0 0;background:var(--panel)}
.shopHead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.shopHead h2{margin:0;font-size:18px}
.shopNote{flex:none;margin:6px 0 10px;font-size:13px;color:var(--mute)}
.shop{flex:1;min-height:0;margin:0;padding:0;overflow-y:auto;list-style:none;display:grid;gap:10px;align-content:start}
.shop li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.shop img{display:block;width:72px;height:72px;border-radius:8px;object-fit:cover;background:#fff}
.shop b{display:block;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.shop span{display:block;margin-top:3px;font-size:14px;font-weight:700}
.shop s{margin-left:6px;font-size:12px;font-weight:400;color:var(--mute)}

/* 넓은 화면과 가로로 눕힌 폰: 영상과 채팅을 나란히 */
@media (min-width:900px),(orientation:landscape) and (max-height:520px){
  .app{display:grid;grid-template-columns:minmax(0,1fr) 380px}
  .stage{position:relative;inset:auto;min-width:0;height:100dvh}
  .stage video{object-fit:contain}
  .stageBtns{bottom:calc(16px + var(--pad-b))}
  .side{position:relative;left:auto;right:auto;bottom:auto;height:100dvh;padding:calc(12px + var(--pad-t)) calc(14px + var(--pad-r)) calc(12px + var(--pad-b)) 14px;background:var(--panel);border-left:1px solid var(--line)}
  .sideTabs:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
  .sideTabs button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--mute);font-weight:700}
  .sideTabs button.on{background:#334155;color:#fff}
  .pin{margin:0 0 8px;background:var(--panel2)}
  .chat li{text-shadow:none}
  .say input{background:var(--panel2)}
  .shopPane{position:static;flex:1;min-height:0;height:auto;padding:0;border-radius:0;background:transparent}
  #btnShopClose{display:none}
  .chatPane[hidden]{display:none!important}
}
@media (orientation:landscape) and (max-height:520px){
  .app{grid-template-columns:minmax(0,1fr) 300px}
  .roomInfo{display:none}
}
@media (min-width:1400px){
  .app{grid-template-columns:minmax(0,1fr) 440px}
}
/* 폰에서 상품 판이 열리면 영상 위 단추가 판을 덮지 않게 한다 */
.shopOpen .stageBtns{display:none}
@media (max-width:400px){
  .me,.count{display:none}
  .brand{font-size:15px}
}