/* 🤖 Claude 분리 (2026-09-06): payment.html <style> 그대로. 결제 화면 — 규칙은 바꾸지 않았다. 캐시 버스팅 = payment.html 의 ?v=<sha1 8자리>, tests/payment-assets-lint 가 강제. */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--sans:'Nanum Gothic',sans-serif;--mono:'IBM Plex Mono',monospace;}
body.dark{--bg:#0a0a0f;--surface:#0f0f1a;--card:#141420;--border:#1e1e30;--border2:#2a2a40;--text:#e8eaf0;--muted:#555570;--muted2:#8890a8;--accent:#00d9f5;--accent-soft:rgba(0,217,245,.08);--green:#00f5a0;--green-soft:rgba(0,245,160,.08);--red:#ff4466;--red-soft:rgba(255,68,102,.08);--amber:#f5c623;--purple:#a78bfa;}
body.light{--bg:#f8f9fb;--surface:#fff;--card:#fff;--border:#e8ecf1;--border2:#d1d9e6;--text:#0f172a;--muted:#94a3b8;--muted2:#64748b;--accent:#3d7fff;--accent-soft:rgba(61,127,255,.08);--green:#10b981;--green-soft:rgba(16,185,129,.08);--red:#f43f5e;--red-soft:rgba(244,63,94,.08);--amber:#f5a623;--purple:#7c6af7;}
/* ============================================
   📌 방 클래스별 액센트 색상
   - 큰방 (1번방 + 3~7번방): 황금/앰버 톤 (프리미엄)
   - 작은방 (8~25번방): 초록 톤 (기본)
============================================ */

/* 작은방: 초록 톤 — 기본값 */
body.room-small {
  --accent: #00f5a0;
  --accent-soft: rgba(0, 245, 160, 0.08);
}
body.light.room-small {
  --accent: #10b981;
  --accent-soft: rgba(16, 185, 129, 0.08);
}

/* 큰방: 황금/앰버 톤 */
body.room-big {
  --accent: #f5c623;
  --accent-soft: rgba(245, 198, 35, 0.1);
}
body.light.room-big {
  --accent: #f5a623;
  --accent-soft: rgba(245, 166, 35, 0.08);
}

/* 큰방의 상단 액센트 라인 (황금 그라데이션) */
body.room-big .cyber-line {
  background: linear-gradient(90deg, #f5c623, #f5a623, #ff9500);
}
/* ============================================
   📌 양옆 라인 조명 띠 (방 인테리어와 동기화)
   - inner 강조 hot core: 라인 가까이 진하고 멀리 부드럽게 페이드
   - 이글거리는 간접조명 felt
============================================ */
body.room-big::before,
body.room-big::after,
body.room-small::before,
body.room-small::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: 5px;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
}

body.room-big::before   { left: 0; }
body.room-big::after    { right: 0; }
body.room-small::before { left: 0; }
body.room-small::after  { right: 0; }

/* 🔥 큰방: hot core — 황금 톤 */
body.room-big::before,
body.room-big::after {
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 35%,
      rgba(255, 255, 200, 0.95) 45%,
      #ffd700 50%,
      rgba(255, 255, 200, 0.95) 55%,
      transparent 65%,
      transparent 100%) 0 -100% / 100% 300% no-repeat,
    linear-gradient(90deg,
      rgba(245, 166, 35, 0.15) 0%,
      rgba(255, 200, 60, 0.55) 30%,
      rgba(255, 240, 130, 1.0) 50%,
      rgba(255, 200, 60, 0.55) 70%,
      rgba(245, 166, 35, 0.15) 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(245, 166, 35, 0.5) 15%,
      rgba(245, 198, 35, 0.7) 50%,
      rgba(245, 166, 35, 0.5) 85%,
      transparent 100%);
  animation: flowBig 10s linear infinite;
  box-shadow:
    0 0 6px rgba(255, 215, 0, 0.7),
    0 0 14px rgba(255, 200, 60, 0.5),
    0 0 28px rgba(245, 166, 35, 0.3),
    0 0 55px rgba(245, 166, 35, 0.12);
}

/* 🔥 작은방: hot core — 초록 톤 */
body.room-small::before,
body.room-small::after {
  background:
    linear-gradient(180deg,
      transparent 0%,
      transparent 35%,
      rgba(200, 255, 230, 0.95) 45%,
      #5eead4 50%,
      rgba(200, 255, 230, 0.95) 55%,
      transparent 65%,
      transparent 100%) 0 -100% / 100% 300% no-repeat,
    linear-gradient(90deg,
      rgba(16, 185, 129, 0.15) 0%,
      rgba(50, 220, 150, 0.55) 30%,
      rgba(180, 255, 230, 1.0) 50%,
      rgba(50, 220, 150, 0.55) 70%,
      rgba(16, 185, 129, 0.15) 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(16, 185, 129, 0.5) 15%,
      rgba(0, 245, 160, 0.7) 50%,
      rgba(16, 185, 129, 0.5) 85%,
      transparent 100%);
  animation: flowSmall 10s linear infinite;
  box-shadow:
    0 0 6px rgba(94, 234, 212, 0.7),
    0 0 14px rgba(50, 220, 150, 0.5),
    0 0 28px rgba(0, 245, 160, 0.3),
    0 0 55px rgba(16, 185, 129, 0.12);
}

/* 🔥 큰방 모닥불: 황금 hot core, inner 강조 비균등 변동 */
@keyframes flowBig {
  0%   { background-position: 0 -100%, 0 0, 0 0;
         box-shadow: 0 0 6px rgba(255,215,0,.65), 0 0 14px rgba(255,200,60,.4), 0 0 28px rgba(245,166,35,.22), 0 0 50px rgba(245,166,35,.1); }
  13%  { background-position: 0 -40%, 0 0, 0 0;
         box-shadow: 0 0 8px rgba(255,230,100,.9), 0 0 18px rgba(255,215,80,.6), 0 0 36px rgba(255,200,60,.35), 0 0 65px rgba(245,198,35,.2); }
  27%  { background-position: 0 10%, 0 0, 0 0;
         box-shadow: 0 0 5px rgba(245,166,35,.55), 0 0 12px rgba(245,166,35,.32), 0 0 24px rgba(245,166,35,.16), 0 0 45px rgba(245,166,35,.08); }
  41%  { background-position: 0 35%, 0 0, 0 0;
         box-shadow: 0 0 10px rgba(255,240,130,.95), 0 0 22px rgba(255,215,80,.7), 0 0 45px rgba(255,200,60,.4), 0 0 80px rgba(255,200,60,.22); }
  58%  { background-position: 0 60%, 0 0, 0 0;
         box-shadow: 0 0 7px rgba(255,215,0,.7), 0 0 16px rgba(245,198,35,.45), 0 0 32px rgba(245,166,35,.25), 0 0 55px rgba(245,166,35,.12); }
  71%  { background-position: 0 90%, 0 0, 0 0;
         box-shadow: 0 0 11px rgba(255,235,120,1), 0 0 24px rgba(255,215,80,.75), 0 0 50px rgba(255,200,60,.42), 0 0 90px rgba(255,200,60,.25); }
  84%  { background-position: 0 130%, 0 0, 0 0;
         box-shadow: 0 0 5px rgba(245,166,35,.5), 0 0 12px rgba(245,166,35,.3), 0 0 22px rgba(245,166,35,.15), 0 0 42px rgba(245,166,35,.08); }
  100% { background-position: 0 200%, 0 0, 0 0;
         box-shadow: 0 0 6px rgba(255,215,0,.65), 0 0 14px rgba(255,200,60,.4), 0 0 28px rgba(245,166,35,.22), 0 0 50px rgba(245,166,35,.1); }
}

/* 🔥 작은방 모닥불: 초록 hot core, inner 강조 비균등 변동 */
@keyframes flowSmall {
  0%   { background-position: 0 -100%, 0 0, 0 0;
         box-shadow: 0 0 6px rgba(94,234,212,.65), 0 0 14px rgba(50,220,150,.4), 0 0 28px rgba(0,245,160,.22), 0 0 50px rgba(16,185,129,.1); }
  17%  { background-position: 0 -30%, 0 0, 0 0;
         box-shadow: 0 0 8px rgba(150,255,220,.9), 0 0 18px rgba(94,234,212,.6), 0 0 36px rgba(50,220,150,.35), 0 0 65px rgba(0,245,160,.2); }
  29%  { background-position: 0 5%, 0 0, 0 0;
         box-shadow: 0 0 5px rgba(16,185,129,.55), 0 0 12px rgba(16,185,129,.32), 0 0 24px rgba(16,185,129,.16), 0 0 45px rgba(16,185,129,.08); }
  44%  { background-position: 0 40%, 0 0, 0 0;
         box-shadow: 0 0 10px rgba(180,255,230,.95), 0 0 22px rgba(94,234,212,.7), 0 0 45px rgba(50,220,150,.4), 0 0 80px rgba(0,245,160,.22); }
  61%  { background-position: 0 65%, 0 0, 0 0;
         box-shadow: 0 0 7px rgba(94,234,212,.7), 0 0 16px rgba(0,245,160,.45), 0 0 32px rgba(16,185,129,.25), 0 0 55px rgba(16,185,129,.12); }
  76%  { background-position: 0 95%, 0 0, 0 0;
         box-shadow: 0 0 11px rgba(200,255,235,1), 0 0 24px rgba(94,234,212,.75), 0 0 50px rgba(50,220,150,.42), 0 0 90px rgba(0,245,160,.25); }
  89%  { background-position: 0 135%, 0 0, 0 0;
         box-shadow: 0 0 5px rgba(16,185,129,.5), 0 0 12px rgba(16,185,129,.3), 0 0 22px rgba(16,185,129,.15), 0 0 42px rgba(16,185,129,.08); }
  100% { background-position: 0 200%, 0 0, 0 0;
         box-shadow: 0 0 6px rgba(94,234,212,.65), 0 0 14px rgba(50,220,150,.4), 0 0 28px rgba(0,245,160,.22), 0 0 50px rgba(16,185,129,.1); }
}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--sans);transition:background .3s,color .3s}
.cyber-line{height:2px;transition:opacity .3s}
body.dark .cyber-line{background:linear-gradient(90deg,#00f5a0,#00d9f5,#7b2ff7);opacity:1}
body.light .cyber-line{opacity:0}
.screen{display:none;flex-direction:column;min-height:100vh;animation:fadeIn .3s ease}
.screen.active{display:flex}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Codex 수정 (2026-08-20): PWA 설치 여부와 무관하게 손님 결제 진입에 cono-pay 브랜드를 짧게 표시한다. */
.cono-pay-splash{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:#080a0f;pointer-events:none;animation:conoPaySplash 1.15s ease forwards}
.cono-pay-splash-brand{font-family:var(--mono);font-size:clamp(24px,8vw,42px);font-weight:700;letter-spacing:.08em;color:#e8eaf0;animation:conoPayBrand .8s cubic-bezier(.2,.8,.2,1) both}
.cono-pay-splash-brand span{color:#00d9f5}
@keyframes conoPayBrand{from{opacity:0;transform:translateY(10px);letter-spacing:.18em}to{opacity:1;transform:none;letter-spacing:.08em}}
@keyframes conoPaySplash{0%,65%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.cono-pay-splash{animation-duration:.35s}.cono-pay-splash-brand{animation:none}}
.top-bar{display:flex;flex-direction:column;align-items:center;padding:16px 20px 14px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10;transition:all .3s}
.top-bar-row1{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.logo{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.theme-btn{background:var(--card);border:1px solid var(--border2);border-radius:20px;padding:5px 12px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted2);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.theme-dot{width:10px;height:10px;border-radius:50%;transition:all .3s}
body.dark .theme-dot{background:var(--accent)}
body.light .theme-dot{background:var(--amber)}
.room-info{display:flex;align-items:center;gap:10px}
.room-number{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--text)}
.room-type-badge{font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 10px;border-radius:10px}
.room-type-badge.big{background:rgba(245,166,35,.1);color:var(--amber);border:1px solid rgba(245,166,35,.25)}
.room-type-badge.small{background:var(--green-soft);color:var(--green);border:1px solid rgba(0,245,160,.2)}
.room-type-badge.vip{background:rgba(167,139,250,.1);color:var(--purple);border:1px solid rgba(167,139,250,.25)}
.main{flex:1;padding:24px 20px;max-width:480px;margin:0 auto;width:100%}
.section-label{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.user-type-wrap{display:flex;gap:12px;margin-bottom:28px}
.user-type-card{flex:1;padding:22px 12px;border-radius:16px;border:2px solid var(--border);background:var(--surface);text-align:center;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:200px;justify-content:space-between}
.user-type-card .utc-icon{margin-top:0}
.user-type-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.user-type-card.selected-member{border-color:var(--purple);background:rgba(167,139,250,.06)}
.user-type-card.selected-guest{border-color:var(--accent);background:var(--accent-soft)}
.utc-icon{font-size:32px;line-height:1}
.utc-title{font-size:16px;font-weight:800;color:var(--text)}
.utc-desc{font-size:11px;color:var(--muted);line-height:1.5}
.utc-badge{font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 8px;border-radius:6px;margin-top:auto}
body.dark .member-badge{background:rgba(167,139,250,.1);color:var(--purple);border:1px solid rgba(167,139,250,.25)}
body.light .member-badge{background:rgba(124,106,247,.08);color:var(--purple);border:1px solid rgba(124,106,247,.2)}
body.dark .guest-badge{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(0,217,245,.25)}
body.light .guest-badge{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(61,127,255,.25)}
.member-bar{border-radius:12px;padding:14px 18px;margin-bottom:20px;display:none;align-items:center;justify-content:space-between;transition:all .3s}
body.dark .member-bar{background:rgba(167,139,250,.08);border:1.5px solid rgba(167,139,250,.25)}
body.light .member-bar{background:rgba(124,106,247,.06);border:1.5px solid rgba(124,106,247,.2)}
.member-bar.show{display:flex}
.mb-name{font-size:14px;font-weight:800;color:var(--text);margin-bottom:4px}
.mb-point{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--purple)}
.btn-change-user{font-family:var(--mono);font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline}
.tab-row{display:flex;gap:4px;margin-bottom:24px;background:var(--surface);padding:4px;border-radius:10px;border:1px solid var(--border)}
.tab{flex:1;padding:11px;border:none;background:transparent;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--muted);border-radius:7px;cursor:pointer;transition:all .2s}
body.dark .tab.on{background:rgba(0,217,245,.1);color:var(--accent);border:1px solid rgba(0,217,245,.2)}
body.light .tab.on{background:var(--card);color:var(--text);border:1px solid var(--border2)}
.option-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.option-grid-1{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:16px}
.option-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:22px 14px;text-align:center;cursor:pointer;transition:all .18s;user-select:none}
.option-card:hover{border-color:var(--border2);transform:translateY(-1px)}
body.dark .option-card.selected{border-color:var(--accent);background:rgba(0,217,245,.06)}
body.light .option-card.selected{border-color:var(--accent);background:var(--accent-soft)}
.opt-val{font-size:22px;font-weight:800;line-height:1.2;margin-bottom:12px;color:var(--text)}
.opt-val span{font-size:15px;font-weight:700;margin-left:2px;color:var(--muted2)}
.opt-unit{font-size:11px;color:var(--muted);margin-bottom:0}
.opt-price{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--muted2)}
body.dark .option-card.selected .opt-price{color:var(--accent)}
body.light .option-card.selected .opt-price{color:var(--accent)}
.service-card{background:var(--surface);border-radius:12px;padding:18px 20px;cursor:pointer;transition:all .18s;user-select:none;display:flex;align-items:center;justify-content:space-between}
body.dark .service-card{border:1.5px solid rgba(0,245,160,.2)}
body.light .service-card{border:1.5px solid rgba(16,185,129,.25)}
body.dark .service-card.selected{border-color:var(--green);background:rgba(0,245,160,.06)}
body.light .service-card.selected{border-color:var(--green);background:var(--green-soft)}
.vip-service-card{background:var(--surface);border-radius:12px;padding:18px 20px;cursor:pointer;transition:all .18s;user-select:none;display:flex;align-items:center;justify-content:space-between}
body.dark .vip-service-card{border:1.5px solid rgba(167,139,250,.25)}
body.light .vip-service-card{border:1.5px solid rgba(124,106,247,.25)}
body.dark .vip-service-card.selected{border-color:var(--purple);background:rgba(167,139,250,.08)}
body.light .vip-service-card.selected{border-color:var(--purple);background:rgba(124,106,247,.06)}
.sc-left{display:flex;align-items:center;gap:14px}
.sc-badge{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap}
body.dark .sc-badge{background:rgba(0,245,160,.1);border:1px solid rgba(0,245,160,.25);color:var(--green)}
body.light .sc-badge{background:var(--green-soft);border:1px solid rgba(16,185,129,.25);color:var(--green)}
.vsc-badge{font-family:var(--mono);font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;white-space:nowrap;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.25);color:var(--purple)}
.sc-songs{display:flex;align-items:baseline;gap:6px}
.sc-base{font-size:19px;font-weight:800;color:var(--text)}
.sc-plus{font-size:13px;color:var(--muted);font-weight:700}
.sc-extra{font-size:17px;font-weight:800;color:var(--green)}
.vsc-extra{font-size:17px;font-weight:800;color:var(--purple)}
.sc-unit{font-size:11px;color:var(--muted)}
.sc-desc{font-size:11px;color:var(--muted);margin-top:3px}
.sc-right{text-align:right;flex-shrink:0}
.sc-price,.vsc-price{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--muted2)}
body.dark .service-card.selected .sc-price{color:var(--green)}
body.light .service-card.selected .sc-price{color:var(--green)}
.sc-total{font-size:10px;color:var(--green);margin-top:2px}
.vsc-total{font-size:10px;color:var(--purple);margin-top:2px}
.extra-section{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px}
.extra-section-title{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px}
.extra-btns{display:flex;gap:10px}
.extra-btn{flex:1;padding:12px 8px;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:700;cursor:pointer;transition:all .18s;text-align:center}
body.dark .extra-btn.selected{border-color:var(--green);background:rgba(0,245,160,.06);color:var(--green)}
body.light .extra-btn.selected{border-color:var(--green);background:var(--green-soft);color:var(--green)}
.extra-btn .extra-price{font-family:var(--mono);font-size:11px;display:block;margin-top:3px;color:inherit}
.combo-bar{border-radius:8px;padding:10px 14px;margin-bottom:20px;display:none;align-items:center;justify-content:space-between}
body.dark .combo-bar{background:rgba(0,245,160,.06);border:1px solid rgba(0,245,160,.2)}
body.light .combo-bar{background:var(--green-soft);border:1px solid rgba(16,185,129,.2)}
.combo-bar.show{display:flex}
.combo-detail{font-size:12px;color:var(--muted);line-height:1.6}
.combo-total{text-align:right;flex-shrink:0;margin-left:12px}
.combo-songs{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--green)}
.combo-price{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:2px}
.point-toggle-wrap{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.toggle-track{position:relative;display:inline-block;width:52px;height:28px;cursor:pointer}
.toggle-track input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;border-radius:14px;background:var(--border2);transition:all .3s}
.toggle-knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .3s}
.pay-methods{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.pay-method{display:flex;align-items:center;gap:14px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .18s}
.pay-method:hover{border-color:var(--border2)}
body.dark .pay-method.selected{border-color:var(--accent);background:rgba(0,217,245,.06)}
body.light .pay-method.selected{border-color:var(--accent);background:var(--accent-soft)}
.pay-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0}
.pay-icon.kakao{background:#fee500;color:#1a1a1a}
.pay-icon.toss{background:#0064ff;color:#fff}
.pay-icon.card{background:#2d3a50;color:#a8c0e0}
.pay-name{font-size:14px;font-weight:700;color:var(--text)}
.pay-desc{font-size:12px;color:var(--muted);margin-top:2px}
.pay-point-badge{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--purple);background:rgba(167,139,250,.1);padding:3px 10px;border-radius:6px;border:1px solid rgba(167,139,250,.2)}
.summary-bar{border-radius:12px;padding:16px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--border2)}
.sum-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.sum-val{font-size:16px;font-weight:800;color:var(--text)}
.sum-amount{font-family:var(--mono);font-size:22px;font-weight:600;text-align:right;color:var(--accent)}
.sum-sub{font-size:11px;color:var(--muted);text-align:right;margin-top:2px}
.pay-btn{width:100%;padding:18px;border:none;border-radius:12px;font-family:var(--sans);font-size:16px;font-weight:800;cursor:pointer;transition:all .18s}
body.dark .pay-btn:not(:disabled){background:linear-gradient(135deg,var(--green),var(--accent));color:#0a0a0f;animation:shimmer 2s ease-in-out infinite}
body.light .pay-btn:not(:disabled){background:var(--text);color:#fff;animation:shimmerLight 2s ease-in-out infinite}
.pay-btn:hover:not(:disabled){transform:translateY(-1px)}
.pay-btn:active:not(:disabled){transform:scale(.98)}
.pay-btn:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}
@keyframes shimmer{0%,100%{box-shadow:0 0 0px rgba(0,245,160,0)}50%{box-shadow:0 0 18px rgba(0,245,160,.5),0 0 40px rgba(0,217,245,.2)}}
@keyframes shimmerLight{0%,100%{box-shadow:0 0 0px rgba(61,127,255,0)}50%{box-shadow:0 0 18px rgba(61,127,255,.4)}}
.center-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}
.spinner{width:52px;height:52px;border-radius:50%;border:3px solid var(--border);animation:spin 1s linear infinite;margin-bottom:24px}
body.dark .spinner{border-top-color:var(--accent)}
body.light .spinner{border-top-color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.proc-title{font-size:18px;font-weight:800;margin-bottom:8px;color:var(--text)}
.proc-sub{font-size:13px;color:var(--muted);text-align:center}
.check-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;margin-bottom:24px;animation:pop .4s cubic-bezier(.34,1.56,.64,1)}
body.dark .check-circle{background:rgba(0,245,160,.1);border:2px solid rgba(0,245,160,.3)}
body.light .check-circle{background:var(--green-soft);border:2px solid rgba(16,185,129,.3)}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.done-title{font-size:22px;font-weight:800;margin-bottom:6px;color:var(--text)}
.done-sub{font-size:13px;color:var(--muted);margin-bottom:28px;text-align:center;line-height:1.6;white-space:pre-line}
.receipt-card{width:100%;max-width:360px;border-radius:14px;padding:20px;margin-bottom:20px;background:var(--card);border:1px solid var(--border2)}
.receipt-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
.receipt-row:last-child{border-bottom:none}
.r-label{font-size:12px;color:var(--muted)}
.r-val{font-family:var(--mono);font-size:13px;font-weight:500;text-align:right;word-break:break-all;color:var(--text)}
.r-val.green{font-size:15px;font-weight:700;color:var(--green)}
.r-val.small{font-size:11px;color:var(--muted)}
.tj-status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:20px}
.tj-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:blink 1s infinite;flex-shrink:0}
.tj-dot.ok{background:var(--green);animation:none}
.tj-dot.fail{background:var(--red);animation:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.btn-again{width:100%;max-width:360px;padding:14px;border-radius:10px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:all .18s;background:transparent;border:1.5px solid var(--border2);color:var(--text)}
body.dark .btn-again:hover{border-color:var(--accent);color:var(--accent)}
body.light .btn-again:hover{border-color:var(--accent);color:var(--accent)}
.error-msg{border-radius:8px;margin-bottom:16px;display:none;text-align:center;font-size:13px;padding:12px 16px;background:var(--red-soft);border:1px solid rgba(255,68,102,.3);color:var(--red)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:100;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s}
.modal-bg.hidden{display:none}
.modal{width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:28px 24px;background:var(--card);border-top:1px solid var(--border2)}
.modal-topline{height:2px;border-radius:2px;margin-bottom:20px}
body.dark .modal-topline{background:linear-gradient(90deg,var(--green),var(--accent),var(--purple))}
body.light .modal-topline{background:var(--accent);opacity:.4}
.modal-title{font-size:18px;font-weight:800;margin-bottom:4px;color:var(--text)}
.modal-sub{font-size:13px;color:var(--muted);margin-bottom:16px}
.modal-error{color:var(--red);font-size:12px;text-align:center;margin-bottom:8px;min-height:16px}
.modal-input{width:100%;background:var(--bg);border:1.5px solid var(--border2);color:var(--text);font-family:var(--sans);font-size:15px;padding:12px 14px;border-radius:8px;outline:none;transition:border-color .15s;margin-bottom:4px}
.modal-input:focus{border-color:var(--accent)}
.modal-hint{font-size:11px;color:var(--muted);padding-left:2px;margin-bottom:10px}
.privacy-check{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:8px;background:var(--bg);border:1px solid var(--border);margin-bottom:12px}
.privacy-check input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:1px;cursor:pointer;accent-color:var(--accent)}
.privacy-check-text{font-size:12px;color:var(--muted);line-height:1.6}
.privacy-check-text a{color:var(--accent);cursor:pointer;text-decoration:underline}
.modal-btns{display:flex;gap:10px;margin-top:4px}
.btn-modal-cancel{flex:1;padding:14px;border-radius:8px;background:transparent;border:1.5px solid var(--border2);color:var(--muted);font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer}
.btn-modal-ok{flex:2;padding:14px;border:none;border-radius:8px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer}
body.dark .btn-modal-ok{background:linear-gradient(135deg,var(--green),var(--accent));color:#0a0a0f}
body.light .btn-modal-ok{background:var(--text);color:#fff}
.btn-modal-ok:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}
.register-link{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}
.register-link a{color:var(--accent);cursor:pointer;text-decoration:underline}
.pin-wrap{position:relative;margin-bottom:10px}
.pin-wrap .modal-input{margin-bottom:0;padding-right:50px}
.btn-pin-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:20px;color:var(--muted);padding:4px;line-height:1}
.privacy-modal{background:var(--card);border-radius:16px;padding:24px;max-width:440px;width:90%;max-height:70vh;overflow-y:auto;border:1px solid var(--border2)}
.privacy-modal h3{font-size:16px;font-weight:800;color:var(--text);margin-bottom:12px}
.privacy-modal p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:8px}
.privacy-modal table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:12px}
.privacy-modal td{padding:6px 8px;border:1px solid var(--border);color:var(--muted)}
.privacy-modal td:first-child{color:var(--text);font-weight:700;white-space:nowrap}
.btn-privacy-close{width:100%;padding:12px;border:none;border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:8px}
.charge-sheet-bg{position:fixed;inset:0;z-index:200;display:none;background:rgba(0,0,0,0);transition:background .3s}
.charge-sheet-inner{position:fixed;bottom:-100%;left:0;right:0;z-index:201;background:var(--card);border-radius:24px 24px 0 0;border-top:1px solid var(--border2);padding:28px 24px;max-width:480px;margin:0 auto;transition:bottom .35s cubic-bezier(.32,1,.23,1)}
.charge-card{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:16px;text-align:center;cursor:pointer;transition:all .18s}
.charge-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.charge-card.selected{border-color:var(--accent);background:var(--accent-soft)}
.cc-amount{font-size:20px;font-weight:800;color:var(--text);margin-bottom:4px}
.cc-bonus{font-size:11px;color:var(--amber);margin-bottom:4px}
.cc-total{font-family:var(--mono);font-size:12px;color:var(--muted)}
.charge-card.selected .cc-total{color:var(--accent)}
.charge-pg-btn{flex:1;display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:10px;cursor:pointer;font-size:13px;font-weight:700;color:var(--muted);transition:all .18s}
.charge-pg-btn:hover{border-color:var(--border2)}
.charge-pg-btn.selected{border-color:var(--accent);color:var(--text)}
/* ==============================================
   📌 Sticky Bottom 결제 버튼
============================================== */
.main {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}

#payBtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  width: auto;
  margin: 0 auto;
  z-index: 90;
  border-radius: 14px 14px 0 0;
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.light #payBtn {
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
}

/* 결제 버튼이 sticky일 때 펄스 그림자가 위쪽으로만 보이게 살짝 조정 */
@keyframes payBtnPulseSticky {
  0%, 100% { box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(61,127,255,.5); }
  50%      { box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45), 0 0 40px rgba(61,127,255,.9), 0 0 80px rgba(16,217,138,.6); }
}
#payBtn:not(:disabled) {
  animation: payBtnPulseSticky 2s ease-in-out infinite !important;
}

/* ==============================================
   📢 손님 요청 시스템 (Phase 3) — 시그니처 톤 자동 분기 (--accent)
============================================== */
.cr-section { margin: 32px 0 16px; padding-top: 20px; border-top: 1px solid var(--border); }
.cr-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cr-section-title {
  font-family: var(--sans); font-size: 13px; font-weight: 800;
  letter-spacing: .01em; color: var(--text);
  text-shadow: 0 0 10px rgba(192,139,255,.25);
}
.cr-cooldown {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--accent); letter-spacing: .05em;
}
.cr-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
/* 🎆 네온 시그니처 — 카테고리별 발광색 (7star 조명 감성) */
.cr-btn-hot    { --cr-neon:#ff5b5b; --cr-glow:255,91,91; }
.cr-btn-cold   { --cr-neon:#3fd9ff; --cr-glow:63,217,255; }
.cr-btn-repair { --cr-neon:#ffc23f; --cr-glow:255,194,63; }
.cr-btn-etc    { --cr-neon:#c08bff; --cr-glow:192,139,255; }
.cr-btn {
  --cr-neon:#c08bff; --cr-glow:192,139,255;   /* 폴백 */
  background: linear-gradient(158deg, #141922, #0c0e13);
  border: 1.5px solid rgba(var(--cr-glow), .42);
  border-radius: 14px; padding: 18px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; transition: all .22s cubic-bezier(.2,.8,.2,1); font-family: var(--sans);
  box-shadow: 0 0 13px rgba(var(--cr-glow), .14), inset 0 0 16px rgba(var(--cr-glow), .05);
}
.cr-btn:hover:not(:disabled) {
  border-color: rgb(var(--cr-glow));
  box-shadow: 0 0 24px rgba(var(--cr-glow), .42), inset 0 0 20px rgba(var(--cr-glow), .12);
  transform: translateY(-2px);
}
.cr-btn:active:not(:disabled) { transform: translateY(0) scale(.97); }
.cr-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.cr-btn-icon { font-size: 26px; line-height: 1; filter: drop-shadow(0 0 7px rgba(var(--cr-glow), .6)); }
.cr-btn-label { font-size: 12.5px; font-weight: 800; color: var(--cr-neon); text-shadow: 0 0 9px rgba(var(--cr-glow), .5); letter-spacing: .01em; }
body.room-small .cr-btn-hot,
body.room-small .cr-btn-cold { display: none; }

/* 손님 요청 모달 */
#crModal .modal { max-width: 380px; }
.cr-modal-cats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px;
}
.cr-modal-cat-hot    { --cr-neon:#ff5b5b; --cr-glow:255,91,91; }
.cr-modal-cat-cold   { --cr-neon:#3fd9ff; --cr-glow:63,217,255; }
.cr-modal-cat-repair { --cr-neon:#ffc23f; --cr-glow:255,194,63; }
.cr-modal-cat-etc    { --cr-neon:#c08bff; --cr-glow:192,139,255; }
.cr-modal-cat {
  --cr-neon:#c08bff; --cr-glow:192,139,255;
  background: linear-gradient(158deg, #141922, #0c0e13);
  border: 1.5px solid rgba(var(--cr-glow), .38);
  border-radius: 12px; padding: 14px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; transition: all .2s cubic-bezier(.2,.8,.2,1);
  box-shadow: inset 0 0 12px rgba(var(--cr-glow), .05);
}
.cr-modal-cat:hover { border-color: rgba(var(--cr-glow), .7); box-shadow: 0 0 14px rgba(var(--cr-glow), .25); transform: translateY(-1px); }
.cr-modal-cat.selected { border-color: rgb(var(--cr-glow)); box-shadow: 0 0 20px rgba(var(--cr-glow), .4), inset 0 0 16px rgba(var(--cr-glow), .12); }
.cr-modal-cat-icon { font-size: 20px; line-height: 1; filter: drop-shadow(0 0 6px rgba(var(--cr-glow), .55)); }
.cr-modal-cat-label { font-size: 11.5px; font-weight: 800; color: var(--cr-neon); text-shadow: 0 0 8px rgba(var(--cr-glow), .45); }
body.room-small #crModal .cr-modal-cat-hot,
body.room-small #crModal .cr-modal-cat-cold { display: none; }
.cr-modal-detail {
  width: 100%; box-sizing: border-box;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px; font-family: var(--sans); font-size: 14px; color: var(--text);
  resize: none; min-height: 70px; margin-bottom: 16px;
}
.cr-modal-detail:focus { outline: none; border-color: var(--accent); }

/* 토스트 */
.cr-toast {
  position: fixed; bottom: 120px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card); border: 1.5px solid var(--accent);
  border-radius: 12px; padding: 14px 20px;
  font-size: 14px; font-weight: 700; color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: all .3s; font-family: var(--sans);
  max-width: 90vw; text-align: center;
}
.cr-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.cr-toast.error { border-color: var(--red); color: var(--red); }

/* Codex 수정 (2026-08-06): 손님 곡 검색·예약 UI */
.reserve-section{margin:30px 0 18px;padding-top:22px;border-top:1px solid var(--border)}
/* 🤖 Claude 추가 (2026-08-26): 예약 잠금 안내 */
.reserve-locked{text-align:center;padding:26px 18px;border:1px dashed var(--border2);border-radius:13px;background:rgba(255,255,255,.02)}
.reserve-locked-icon{font-size:30px;margin-bottom:9px;opacity:.75}
.reserve-locked-title{font-size:15px;font-weight:800;margin-bottom:7px}
.reserve-locked-sub{font-size:13px;color:var(--muted);line-height:1.7}
.reserve-head{margin-bottom:12px}
.reserve-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:5px}
.reserve-desc{font-size:12px;color:var(--muted);line-height:1.6}
.reserve-search-wrap{position:relative}
.reserve-search{width:100%;box-sizing:border-box;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);padding:14px 44px 14px 14px;font-family:var(--sans);font-size:16px}
.reserve-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,217,245,.08)}
.reserve-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.reserve-status{display:none;margin-top:10px;border-radius:10px;padding:11px 12px;font-size:12px;font-weight:700;line-height:1.55}
.reserve-status.info{display:block;background:rgba(0,217,245,.07);border:1px solid rgba(0,217,245,.22);color:var(--accent)}
.reserve-status.success{display:block;background:rgba(0,245,160,.07);border:1px solid rgba(0,245,160,.24);color:var(--green)}
.reserve-status.warning{display:block;background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.25);color:var(--amber)}
.reserve-status.error{display:block;background:rgba(255,91,91,.07);border:1px solid rgba(255,91,91,.25);color:var(--red)}
.reserve-results{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.reserve-result{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px}
.reserve-song-info{flex:1;min-width:0}
.reserve-song-title{font-size:14px;font-weight:800;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reserve-song-meta{font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reserve-btn{flex:0 0 auto;border:1px solid var(--accent);border-radius:9px;background:rgba(0,217,245,.09);color:var(--accent);padding:9px 12px;font-family:var(--sans);font-size:12px;font-weight:800;cursor:pointer}
.reserve-btn:disabled{opacity:.45;cursor:not-allowed}
/* Codex 수정 (2026-08-18): 예약한 곡 바로 아래에서 의도 확인·결과를 보여준다. */
.reserve-confirm{margin-top:-2px;padding:12px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.025)}
.reserve-confirm.info{border-color:rgba(0,217,245,.25);color:var(--accent)}
.reserve-confirm.success{border-color:rgba(0,245,160,.3);color:var(--green)}
.reserve-confirm.warning{border-color:rgba(245,166,35,.35);color:var(--amber)}
.reserve-confirm.error{border-color:rgba(255,91,91,.35);color:var(--red)}
.reserve-confirm-message{font-size:12px;font-weight:700;line-height:1.55}
.reserve-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.reserve-confirm-btn{border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--muted);padding:8px 10px;font-family:var(--sans);font-size:12px;font-weight:800;cursor:pointer}
.reserve-confirm-btn.primary{border-color:var(--accent);background:rgba(0,217,245,.1);color:var(--accent)}
.reserve-confirm-btn:disabled{opacity:.45;cursor:not-allowed}