/* ══════════════════════════════════════════════════════════════════
   기멱기멱 LIVE — 시청자 플레이어
   폰 우선(375) → 태블릿(768) → PC(1440) 가운데정렬. 가로스크롤 0.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --g:#f97316; --g2:#ef4444;
  --card:rgba(18,18,24,.74);
  --line:rgba(255,255,255,.13);
  --muted:#b6b6be;
  --ink:#f5f5f7;
  --rail-w:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* GLOBAL-HIDDEN-FIX */
[hidden]{display:none !important}

html,body{margin:0;padding:0;height:100%;background:#08080c;color:var(--ink);
  overflow-x:hidden;overscroll-behavior:none;
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
button,input,select{font-family:inherit}
img{max-width:100%}

/* ── 무대 / 폰 ─────────────────────────────────────────────────── */
.stage{min-height:100vh;min-height:100dvh;width:100%;display:flex;justify-content:center;align-items:stretch}
.phone{position:relative;width:100%;max-width:440px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;background:#000;overflow:hidden}
.viewport{position:relative;flex:1;min-height:0}

/* ── 미디어 (PiP 대상) ─────────────────────────────────────────── */
.media{position:absolute;inset:0;z-index:1;overflow:hidden;
  background:linear-gradient(145deg,#1c1c24,#0a0a0e);transition:all .28s cubic-bezier(.2,.8,.3,1)}
#ivs{width:100%;height:100%;object-fit:cover;display:none;background:#000}
#ivs.on{display:block}
.video-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#55555f;font-size:16px;font-weight:700;line-height:1.9;padding:10px}
.video-ph small{font-size:11.5px;font-weight:400;color:#44444d}

.muted-ov{position:absolute;inset:0;z-index:9;display:none;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(0,0,0,.42);backdrop-filter:blur(1px);cursor:pointer}
.muted-ov.show{display:flex}
.muted-ico{font-size:34px;margin-bottom:8px}
.muted-t{font-size:14px;font-weight:800}
.muted-s{font-size:12px;color:#ddd;margin-top:3px}

/* PiP : 결제 시트가 열리면 영상만 우상단으로 축소 (오디오 유지) */
.pip-bar,.pip-up{display:none}
.phone.pip .media{
  top:10px;right:10px;left:auto;bottom:auto;
  width:106px;height:188px;border-radius:14px;z-index:60;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.72)}
.phone.pip .media .muted-ov{display:none}
.phone.pip .video-ph{font-size:11px;line-height:1.5}
.phone.pip .video-ph small{display:none}
.phone.pip .pip-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:4px;
  justify-content:center;background:linear-gradient(transparent,rgba(0,0,0,.85));
  font-size:8.5px;color:#e9e9ef;padding:10px 3px 4px;font-weight:700;letter-spacing:-.2px}
.pip-dot{width:5px;height:5px;border-radius:50%;background:#22c55e;animation:blink 1.2s infinite}
.phone.pip .pip-up{position:absolute;top:3px;right:3px;display:block;background:rgba(0,0,0,.55);
  border:none;color:#fff;width:20px;height:20px;border-radius:6px;font-size:11px;cursor:pointer;line-height:1}
.phone.pip .layer{opacity:0;pointer-events:none}

/* ── 오버레이 레이어 ───────────────────────────────────────────── */
.layer{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .2s}
.layer > *{pointer-events:auto}

/* 상단 */
.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:7px;
  padding:calc(10px + env(safe-area-inset-top)) 11px 10px;background:linear-gradient(#000c,transparent);z-index:6}
.live-badge{display:flex;align-items:center;gap:4px;background:var(--g2);color:#fff;
  font-weight:800;font-size:11px;padding:4px 8px;border-radius:7px;letter-spacing:.3px;flex:none}
.live-badge .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.title{flex:1;min-width:0;font-size:12.5px;font-weight:600;text-shadow:0 1px 4px #000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 누적 시청자 — 숫자 + 명 */
.vwrap{display:flex;align-items:baseline;gap:3px;background:rgba(0,0,0,.42);border-radius:20px;
  padding:4px 10px;white-space:nowrap;flex:none;backdrop-filter:blur(6px)}
.veye{font-size:11px;align-self:center}
.vwrap b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.vwrap b.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.22);color:#fdba74}}
.vu{font-size:10.5px;color:#c9c9d2}

.pin{position:absolute;top:calc(46px + env(safe-area-inset-top));left:10px;right:10px;z-index:6;
  background:rgba(249,115,22,.94);color:#fff;font-size:12.5px;font-weight:600;padding:8px 12px;
  border-radius:11px;box-shadow:0 4px 14px #0007}

.coupon{position:absolute;top:calc(82px + env(safe-area-inset-top));left:10px;right:10px;z-index:6;cursor:pointer;
  display:flex;align-items:center;gap:7px;background:linear-gradient(95deg,var(--g),var(--g2));color:#fff;
  font-size:12.5px;font-weight:700;padding:9px 11px;border-radius:12px;box-shadow:0 5px 18px #0008;animation:pop .3s}
.c-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-amt{background:#fff;color:var(--g2);border-radius:7px;padding:3px 7px;font-size:11.5px;font-weight:900;white-space:nowrap}
.c-get{background:#0003;border-radius:7px;padding:3px 8px;font-size:11px;font-weight:800;white-space:nowrap}
@keyframes pop{from{transform:scale(.92);opacity:0}}

.timer{position:absolute;top:calc(126px + env(safe-area-inset-top));right:10px;z-index:6;background:#000c;
  color:#ffe9c7;font-size:11.5px;padding:5px 10px;border-radius:20px;border:1px solid #ffffff22}
.timer b{color:#fff;font-variant-numeric:tabular-nums}

/* 게임 참여 배너 */
.gamebar{position:absolute;top:calc(126px + env(safe-area-inset-top));left:10px;right:10px;z-index:6;
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:14px;
  background:linear-gradient(95deg,rgba(124,58,237,.95),rgba(219,39,119,.92));
  box-shadow:0 6px 22px #0009;animation:pop .3s}
.g-ico{font-size:19px;flex:none}
.g-i{flex:1;min-width:0}
.g-n{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-s{font-size:10.5px;opacity:.9;margin-top:1px}
.g-btns{display:flex;gap:5px;flex:none}
.g-btn{background:#fff;color:#7c3aed;border:none;border-radius:10px;padding:7px 13px;
  font-size:12px;font-weight:900;cursor:pointer;min-width:44px}
.g-btn.o{background:#38bdf8;color:#06283d}
.g-btn.x{background:#fb7185;color:#450a12}
.g-btn:disabled{opacity:.55}
.g-btn.done{background:rgba(255,255,255,.22);color:#fff}

/* ── 토스트 ────────────────────────────────────────────────────── */
.toasts{position:absolute;left:10px;right:calc(var(--rail-w) + 10px);bottom:214px;z-index:7;
  display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{align-self:flex-start;max-width:100%;background:rgba(0,0,0,.7);border:1px solid var(--line);
  padding:7px 11px;border-radius:16px;font-size:12.5px;animation:slideup .35s;word-break:break-word}
.toast.purchase{background:linear-gradient(95deg,#15803d,#22c55e);border:none;font-weight:700}
.toast.enter{background:rgba(255,255,255,.1);font-size:11.5px;color:#ddd}
.toast.lottery{background:linear-gradient(95deg,#7c3aed,#db2777);border:none;font-weight:900;font-size:15px;
  align-self:center;text-align:center;box-shadow:0 8px 30px #000a;padding:12px}
.toast.rolling{background:linear-gradient(95deg,#4c1d95,#9d174d);border:none;font-weight:800;font-size:14px;
  align-self:center;text-align:center;padding:11px}
@keyframes slideup{from{transform:translateY(14px);opacity:0}}

/* ── 채팅 ──────────────────────────────────────────────────────── */
.chat{position:absolute;left:8px;right:calc(var(--rail-w) + 6px);bottom:12px;z-index:5;max-height:40%;
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  -webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.line{font-size:12.5px;line-height:1.5;text-shadow:0 1px 3px #000;animation:slideup .22s;word-break:break-word}
.badge{display:inline-flex;align-items:center;gap:2px;font-weight:800;font-size:10.5px;
  padding:1px 6px;border-radius:6px;margin-right:5px;vertical-align:1px}
.nick{font-weight:700;margin-right:5px}
.txt{color:#f1f1f5}

/* 트리니티 — 채팅 글자색을 특별하게 */
.line.trinity .txt{
  background:linear-gradient(92deg,#f9a8fc,#d8b4fe,#a5b4fc,#f9a8fc);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:800;letter-spacing:-.1px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.95));
  animation:shine 3.4s linear infinite}
@keyframes shine{to{background-position:220% 0}}
.line.trinity .badge{box-shadow:0 0 12px rgba(168,85,247,.55)}

/* 진행자(기멱) 댓글 — 눈에 띄게 */
.line.staff{background:linear-gradient(95deg,rgba(249,115,22,.34),rgba(239,68,68,.16));
  border:1px solid rgba(249,115,22,.6);border-radius:12px;padding:5px 9px;
  box-shadow:0 4px 16px rgba(249,115,22,.28)}
.line.staff .txt{font-weight:700;color:#fff}
.host-tag{display:inline-block;background:#fff;color:var(--g2);font-size:9.5px;font-weight:900;
  padding:1px 5px;border-radius:5px;margin-right:5px;vertical-align:1px}

/* 응원 채팅 (히스토리용) */
.line.dono{background:rgba(255,255,255,.09);border-left:3px solid var(--g);border-radius:8px;padding:4px 8px}
.line.dono .amt{color:#fdba74;font-weight:900;margin-right:5px}

/* ── ★ 응원 메시지 중앙 대형 표시 (아프리카TV 방식) ─────────────── */
/* 우측 레일을 가리지 않도록 채팅 컬럼 폭 안에서 가운데 정렬 */
.dono-stage{position:absolute;left:10px;right:calc(var(--rail-w) + 4px);top:42%;transform:translateY(-50%);
  z-index:14;display:flex;justify-content:center;pointer-events:none}
.dono{width:100%;max-width:330px;border-radius:18px;padding:13px 15px;text-align:center;
  background:rgba(14,14,20,.86);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 18px 55px rgba(0,0,0,.62);
  animation:donoIn .42s cubic-bezier(.2,1.3,.4,1)}
.dono.out{animation:donoOut .4s forwards}
@keyframes donoIn{from{transform:scale(.86) translateY(16px);opacity:0;filter:blur(6px)}}
@keyframes donoOut{to{transform:scale(.96) translateY(-10px);opacity:0}}
.dono-top{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.dono-nick{font-size:12.5px;font-weight:800}
.dono-amt{font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.14);color:#ffd9b0}
.dono-msg{font-size:19px;font-weight:800;line-height:1.4;word-break:break-word;
  text-shadow:0 2px 8px rgba(0,0,0,.7)}
.dono-bar{height:3px;border-radius:3px;margin-top:10px;background:rgba(255,255,255,.16);overflow:hidden}
.dono-bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;
  animation:donoTime linear forwards}
@keyframes donoTime{to{transform:scaleX(0)}}
/* 금액 티어 */
.dono.t1{border-color:rgba(148,163,184,.5)}
.dono.t2{border-color:rgba(249,115,22,.65);box-shadow:0 18px 55px rgba(249,115,22,.22)}
.dono.t2 .dono-bar i{background:var(--g)}
.dono.t3{border-color:rgba(239,68,68,.7);background:linear-gradient(160deg,rgba(60,16,16,.9),rgba(14,14,20,.9));
  box-shadow:0 18px 60px rgba(239,68,68,.28)}
.dono.t3 .dono-bar i{background:var(--g2)}
.dono.t3 .dono-msg{font-size:21px}
.dono.t4{border-color:rgba(168,85,247,.8);background:linear-gradient(160deg,rgba(46,16,74,.92),rgba(14,14,20,.92));
  box-shadow:0 20px 70px rgba(168,85,247,.36)}
.dono.t4 .dono-bar i{background:linear-gradient(90deg,#c4b5fd,#f0abfc)}
.dono.t4 .dono-msg{font-size:23px;
  background:linear-gradient(92deg,#f0abfc,#c4b5fd,#f0abfc);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 2.6s linear infinite}

/* ── 우측 레일 ─────────────────────────────────────────────────── */
.rail{position:absolute;right:8px;bottom:104px;z-index:6;width:var(--rail-w);
  display:flex;flex-direction:column;align-items:center;gap:12px}
.rb{width:44px;background:none;border:none;color:#fff;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:2px}
.rb i{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;
  font-size:19px;font-style:normal;transition:transform .12s}
.rb:active i{transform:scale(.88)}
.rb b{font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
.rb s{font-size:9px;text-decoration:none;color:#d8d8e0;text-shadow:0 1px 3px #000}
.rb .hb.pulse{animation:hbeat .34s}
@keyframes hbeat{45%{transform:scale(1.3)}}
#donoBtn i{background:rgba(249,115,22,.24);border-color:rgba(249,115,22,.45)}

.hearts{position:absolute;right:2px;bottom:74px;width:48px;height:230px;pointer-events:none;overflow:hidden}
.heart{position:absolute;bottom:0;left:12px;font-size:20px;animation:fly 2.4s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),-220px) scale(.45) rotate(var(--rt));opacity:0}}

/* ── 대표상품 카드 ─────────────────────────────────────────────── */
.product{position:absolute;left:10px;right:10px;bottom:12px;z-index:8;display:flex;align-items:center;gap:9px;
  background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:16px;padding:8px;box-shadow:0 10px 34px #000a;animation:slideup .3s}
.p-flag{position:absolute;top:-11px;left:10px;background:linear-gradient(95deg,var(--g),var(--g2));
  color:#fff;font-size:10px;font-weight:900;border-radius:20px;padding:2px 9px;box-shadow:0 3px 10px #0008}
.p-thumb{width:52px;height:52px;border-radius:12px;background:#2a2a33 center/cover no-repeat;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden}
.p-info{flex:1;min-width:0}
.p-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-price{display:flex;align-items:baseline;gap:5px;margin-top:2px;flex-wrap:wrap}
.p-rate{color:#fb7185;font-size:14px;font-weight:900}
.p-list{font-size:11px;color:var(--muted);text-decoration:line-through}
.p-now{font-size:16px;font-weight:900}
.p-meta{display:flex;gap:5px;margin-top:3px;align-items:center}
.p-bundle{background:#2563eb;color:#fff;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:5px}
.p-stock{font-size:10px;color:var(--muted)}
.p-stock.low{color:#fca5a5;font-weight:700}
.p-buy{flex:none;background:linear-gradient(160deg,var(--g),var(--g2));color:#fff;border:none;
  border-radius:13px;padding:9px 13px;font-weight:800;font-size:12.5px;line-height:1.25;cursor:pointer}
.p-buy:active{transform:scale(.96)}
.p-buy:disabled{background:#3a3a44;color:#8b8b95}

/* ── 입력 ──────────────────────────────────────────────────────── */
.composer{position:relative;z-index:10;background:#0c0c11;border-top:1px solid var(--line);
  padding:7px 8px calc(8px + env(safe-area-inset-bottom))}
.me-row{display:flex;align-items:center;gap:6px;padding:1px 3px 7px;flex-wrap:nowrap;overflow:hidden}
.me-badge{font-size:10px;font-weight:800;padding:1px 6px;border-radius:6px;white-space:nowrap;flex:none}
.me-nick{font-size:11.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88px}
.me-pt{font-size:10.5px;color:#fdba74;white-space:nowrap;flex:none}
.me-link{margin-left:auto;background:none;border:none;color:#9a9aa4;font-size:10.5px;cursor:pointer;
  padding:2px 0;white-space:nowrap;flex:none}
.me-link.ghost{margin-left:8px;color:#6e6e78;text-decoration:underline}
.c-row{display:flex;gap:6px}
.msg{flex:1;min-width:0;background:#1a1a22;color:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 12px;font-size:13px;outline:none}
.msg:focus{border-color:rgba(249,115,22,.6)}
.msg.guest{color:#9a9aa4;cursor:pointer}
.send{background:var(--g);color:#fff;border:none;border-radius:12px;padding:0 16px;
  font-weight:800;font-size:13px;cursor:pointer;flex:none}
.send.locked{background:#26262f;color:#cfcfd6}

/* ── 시트 공통 ─────────────────────────────────────────────────── */
.sheet{position:absolute;inset:0;z-index:20}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.62);animation:fadein .2s}
@keyframes fadein{from{opacity:0}}
.sheet-body{position:absolute;left:0;right:0;bottom:0;max-height:78%;background:#15151c;
  border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:up .26s cubic-bezier(.2,.9,.3,1);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -12px 40px rgba(0,0,0,.55)}
.sheet-body.tall{max-height:88%;top:auto}
@keyframes up{from{transform:translateY(100%)}}
.grab{width:38px;height:4px;border-radius:4px;background:#3a3a45;margin:8px auto 2px;flex:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;
  border-bottom:1px solid var(--line);font-size:14px;flex:none}
.sheet-head.quiet{border-bottom:none;padding-bottom:2px}
.sheet-head em{font-style:normal;color:var(--g);font-weight:900;margin-left:3px}
.sheet-head button{background:none;border:none;color:#aaa;font-size:17px;cursor:pointer;padding:0 2px}
.sheet-list{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:8px 12px 20px}

/* 필터칩 */
.chips{display:flex;gap:6px;padding:10px 14px 4px;flex:none;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{background:#20202a;border:1px solid var(--line);color:#c9c9d2;border-radius:20px;
  padding:6px 13px;font-size:11.5px;font-weight:700;cursor:pointer;white-space:nowrap;flex:none}
.chip.on{background:var(--g);border-color:var(--g);color:#fff}

/* 스토어 행 */
.row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid #ffffff0f}
.row.sold{opacity:.52}
.row.promo{background:linear-gradient(95deg,rgba(249,115,22,.13),transparent);
  border-radius:12px;padding-left:8px;padding-right:8px;border-bottom-color:transparent}
.row .t{width:52px;height:52px;border-radius:11px;background:#2a2a33 center/cover no-repeat;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;overflow:hidden}
.row .t .soldout{position:absolute;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:900;color:#fff}
.row .i{flex:1;min-width:0}
.tags{display:flex;gap:4px;margin-bottom:3px;flex-wrap:wrap}
.tag{font-size:9px;font-weight:900;padding:1px 6px;border-radius:5px;letter-spacing:-.2px}
.tag.promo{background:linear-gradient(95deg,var(--g),var(--g2));color:#fff}
.tag.up{background:#2563eb;color:#fff}
.tag.flash{background:#a855f7;color:#fff}
.tag.ship{background:#26262f;color:#b9b9c3}
.row .n{font-size:12.5px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row .p{font-size:12px;margin-top:3px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.row .p .r{color:#fb7185;font-weight:900}
.row .p .l{color:var(--muted);text-decoration:line-through;font-size:10.5px}
.row .p .w{font-weight:900;font-size:13.5px}
.row .s{font-size:10px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:5px}
.row .s b{color:#fca5a5}
.stockbar{width:52px;height:3px;border-radius:3px;background:#2e2e38;overflow:hidden;flex:none}
.stockbar i{display:block;height:100%;background:linear-gradient(90deg,var(--g),var(--g2))}
.row button{background:var(--g);color:#fff;border:none;border-radius:10px;padding:9px 12px;
  font-size:12px;font-weight:800;cursor:pointer;flex:none}
.row button.ghost{background:#26262f;color:#ddd}
.row button:disabled{background:#2b2b34;color:#7b7b85}
.cinfo{font-size:11px;color:var(--muted);margin-top:2px}
.empty{text-align:center;color:#6e6e78;font-size:12.5px;padding:38px 0}

/* ── 간편 로그인 ───────────────────────────────────────────────── */
.login-h{padding:6px 18px 12px}
.login-h b{font-size:17px;display:block;margin-bottom:6px}
.login-h p{margin:0;font-size:12px;color:#a8a8b2;line-height:1.65}
.login-h em{font-style:normal;color:var(--g);font-weight:700}
.sso-wrap{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.sso{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:13px;
  padding:14px;font-size:14px;font-weight:800;cursor:pointer;width:100%}
.sso:active{transform:scale(.985)}
.sso.kakao{background:#fee500;color:#181600}
.sso.naver{background:#03c75a;color:#fff}
.sso.gimeok{background:linear-gradient(95deg,var(--g),var(--g2));color:#fff}
.login-or{display:flex;align-items:center;gap:10px;padding:16px 18px 8px;color:#63636d;font-size:11px}
.login-or::before,.login-or::after{content:"";flex:1;height:1px;background:#26262f}
.demo-list{display:flex;gap:7px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.demo-list::-webkit-scrollbar{display:none}
.demo{background:#1c1c24;border:1px solid var(--line);border-radius:12px;padding:9px 11px;
  cursor:pointer;color:#eee;display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;min-width:76px}
.demo .e{font-size:16px}
.demo .n{font-size:11.5px;font-weight:800}
.demo .g{font-size:9.5px;color:#8f8f99}
.login-note{padding:16px 18px 20px;font-size:10.5px;color:#6e6e78;line-height:1.7}
.login-note b{color:#a8a8b2}

/* ── 응원 시트 (절제된 톤) ─────────────────────────────────────── */
.dono-form{padding:10px 16px 20px}
.dono-guide{margin:0 0 14px;font-size:12px;color:#a8a8b2;line-height:1.7}
.dono-guide b{color:#e7e7ee}
.dono-amts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.amt-b{background:#1c1c24;border:1px solid var(--line);border-radius:12px;padding:11px 4px;
  color:#dcdce4;font-size:13px;font-weight:800;cursor:pointer;font-variant-numeric:tabular-nums}
.amt-b.on{background:rgba(249,115,22,.16);border-color:var(--g);color:#fff}
.amt-b:disabled{opacity:.35;cursor:default}
.dono-input{width:100%;margin-top:10px;background:#1a1a22;color:#fff;border:1px solid var(--line);
  border-radius:12px;padding:12px;font-size:13px;outline:none}
.dono-input:focus{border-color:rgba(249,115,22,.6)}
.dono-bal{text-align:right;font-size:11px;color:#8f8f99;margin-top:8px}
.dono-bal b{color:#fdba74;font-weight:800}
.dono-send{width:100%;margin-top:12px;background:#2a2a34;color:#fff;border:1px solid rgba(249,115,22,.5);
  border-radius:13px;padding:14px;font-size:14px;font-weight:800;cursor:pointer}
.dono-send.ready{background:linear-gradient(95deg,var(--g),var(--g2));border-color:transparent}
.dono-send:disabled{opacity:.45}
.dono-note{margin-top:12px;font-size:10.5px;color:#63636d;text-align:center;line-height:1.6}

/* ── 결제 ──────────────────────────────────────────────────────── */
.pay-hint{margin:6px 14px 0;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);
  color:#a7f3c9;font-size:11px;padding:8px 11px;border-radius:10px;flex:none}
.pay-sum{display:flex;gap:11px;align-items:center;padding:12px 4px;border-bottom:1px solid #ffffff0f}
.pay-sum .t{width:56px;height:56px;border-radius:12px;background:#2a2a33 center/cover no-repeat;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:21px}
.qty{display:flex;align-items:center;gap:10px;padding:13px 4px;border-bottom:1px solid #ffffff0f;font-size:12.5px}
.qty .sp{flex:1}
.qty button{width:32px;height:32px;border-radius:9px;background:#25252e;border:1px solid var(--line);
  color:#fff;font-size:16px;cursor:pointer;line-height:1}
.qty b{min-width:26px;text-align:center;font-size:14px;font-variant-numeric:tabular-nums}
.opt{padding:12px 4px;border-bottom:1px solid #ffffff0f}
.opt-h{font-size:11.5px;color:#9a9aa4;margin-bottom:7px}
.opt select{width:100%;background:#1c1c24;color:#eee;border:1px solid var(--line);border-radius:10px;
  padding:11px;font-size:12.5px;outline:none}
.lines{padding:12px 4px 4px;font-size:12px}
.li{display:flex;justify-content:space-between;padding:5px 0;color:#c2c2cb}
.li b{color:#fff;font-weight:700}
.li.free b{color:#4ade80}
.li.disc b{color:#fdba74}
.pay-foot{flex:none;border-top:1px solid var(--line);padding:11px 14px calc(12px + env(safe-area-inset-bottom));background:#15151c}
.pay-tot{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px;font-size:12.5px;color:#b6b6be}
.pay-tot b{font-size:19px;color:#fff;font-weight:900}
.pay-go{width:100%;background:linear-gradient(95deg,var(--g),var(--g2));color:#fff;border:none;
  border-radius:13px;padding:15px;font-size:15px;font-weight:900;cursor:pointer}
.pay-go:disabled{background:#2b2b34;color:#7b7b85}

/* ══ 반응형 ═══════════════════════════════════════════════════════ */
/* 소형 폰 (≤380) */
@media (max-width:380px){
  :root{--rail-w:50px}
  .rb i{width:36px;height:36px;font-size:17px}
  .dono-msg{font-size:17px}
  .dono.t3 .dono-msg{font-size:18px}
  .dono.t4 .dono-msg{font-size:19px}
  .p-buy{padding:9px 10px;font-size:12px}
  .dono-amts{grid-template-columns:repeat(2,1fr)}
}
/* 태블릿 이상 — 폰 폭 유지 + 가운데 정렬 */
@media (min-width:768px){
  .phone{max-width:430px}
  .chat{max-height:44%}
}
/* PC — 카드형 무대 */
@media (min-width:1024px){
  body{background:radial-gradient(1200px 700px at 50% -10%,#1b1420 0%,#08080c 62%)}
  .stage{align-items:center;padding:22px 0}
  .phone{height:min(94dvh,900px);border-radius:26px;
    border:1px solid rgba(255,255,255,.09);box-shadow:0 34px 90px rgba(0,0,0,.75)}
  .sheet-body{border-radius:20px 20px 0 0}
  .msg{font-size:13.5px}
}
@media (min-width:1440px){
  .phone{height:min(90dvh,940px)}
}
/* ── ★ 게임 결과 모달 (본인 전용 · 당첨/낙첨) ───────────────────── */
.gres{position:absolute;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:22px}
.gres[hidden]{display:none}
.gres-bg{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(3px);animation:fadein .18s}
.gres-card{position:relative;width:100%;max-width:310px;border-radius:20px;padding:22px 18px 18px;
  text-align:center;animation:grpop .34s cubic-bezier(.2,1.3,.4,1);
  background:linear-gradient(160deg,#1e1e27,#141419);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 70px rgba(0,0,0,.8)}
@keyframes grpop{0%{transform:scale(.82) translateY(14px);opacity:0}100%{transform:none;opacity:1}}
.gres-card.win{background:linear-gradient(160deg,#3a2410,#1a1410);
  border:1px solid rgba(249,115,22,.62);box-shadow:0 24px 70px rgba(249,115,22,.3)}
.gres-ico{font-size:44px;line-height:1;margin-bottom:8px}
.gres-card.win .gres-ico{animation:grbounce 1.1s ease-in-out infinite}
@keyframes grbounce{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
.gres-title{font-size:18px;font-weight:900;letter-spacing:-.3px;margin-bottom:6px;color:#fff}
.gres-card.win .gres-title{background:linear-gradient(92deg,#fdba74,#fff,#fdba74);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3s linear infinite}
.gres-msg{font-size:13px;line-height:1.6;color:#c9c9d4;word-break:keep-all}
/* 낙첨 — 내 등수만 (다른 사람 순위·명단 없음) */
.gres-rank{margin-top:12px;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.07);
  font-size:12.5px;color:#c2c2cf;font-weight:700}
.gres-rank b{font-size:19px;font-weight:900;color:#fdba74;margin:0 3px;font-variant-numeric:tabular-nums}
.gres-rank span{font-size:11px;color:#8d8d9b;font-weight:600}
/* 당첨 상품 */
.gres-prod{display:flex;align-items:center;gap:9px;margin-top:13px;padding:9px;border-radius:13px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.09);text-align:left}
.gres-pt{width:44px;height:44px;border-radius:9px;flex:none;background:#26262f center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;font-size:19px}
.gres-pi{min-width:0;flex:1}
.gres-pn{font-size:12.5px;font-weight:700;color:#f1f1f5;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gres-pp{font-size:12.5px;font-weight:900;color:#fdba74;margin-top:2px}
.gres-ok{width:100%;margin-top:16px;padding:13px;border:none;border-radius:13px;cursor:pointer;
  font-size:14px;font-weight:800;background:#2c2c37;color:#e9e9f0;letter-spacing:-.2px}
.gres-ok.win{background:linear-gradient(95deg,var(--g),var(--g2));color:#fff;
  box-shadow:0 8px 22px rgba(249,115,22,.42)}
.gres-ok:disabled{opacity:.6;cursor:default}

/* 접근성 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}