@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
:root{
  /* 방향 B — 따뜻한 다크 · 밤의 모임 (warm dark) */
  --bg:#181310; --panel:#221B15; --panel2:#2A2119; --line:#3A2E24; --line2:#48392C;
  --txt:#F4ECE0; --muted:#B3A390; --accent:#FF6E4D; --accent-strong:#FF5836; --accent2:#F5B056;
  --host:#F5B056; --danger:#F0776A; --green:#4FCD8C; --pink:#F2789B;
  --field:#1B140E; --sunk:#1B140E; --oak:#3B2C1D; --oak2:#2E2318; --oak-edge:#4A3826;
  --radius:12px;
  /* 하단 안전영역 — 아이폰 홈 인디케이터(약 34px). room.html 에 viewport-fit=cover 가 있어야 값이 들어온다.
     그게 없는 페이지에서는 0 이라 아무 영향이 없다. */
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* 화면 하단에 붙는 것들의 공통 기준선 — 한 곳만 고치면 리액션 바·방장 도구 토글이 같이 움직인다. */
  --dock-b: calc(14px + var(--safe-b));
  /* 실제 보이는 뷰포트 높이. room.js 가 visualViewport 로 실측해 넣는다(키보드·주소창 대응).
     안 넣어주면 100vh 로 떨어져 지금과 똑같이 동작한다. */
  --vh: 100vh;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;font-family:'Pretendard Variable',Pretendard,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;color:var(--txt);background:var(--bg);letter-spacing:-.01em}

/* ---------- 스크롤바 공통 (얇고 배경에 녹아들게) ---------- */
html{scrollbar-width:thin;scrollbar-color:rgba(244,236,224,.16) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(244,236,224,.16);border-radius:4px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(244,236,224,.3);background-clip:padding-box}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* ---------- 공용 버튼 ---------- */
.btn{border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  padding:11px 18px;border-radius:10px;font-size:15px;font-weight:600;transition:.15s}
.btn:hover{background:#33281F;border-color:#5a4636}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-strong));border-color:transparent;color:#2A140C;box-shadow:0 8px 20px rgba(255,90,54,.32)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:0 12px 26px rgba(255,90,54,.42)}
.btn.danger{background:transparent;border-color:rgba(240,119,106,.5);color:var(--danger)}
.btn.danger:hover{background:rgba(240,119,106,.12)}
.btn.sm{padding:8px 12px;font-size:13px}
.btn .copy-check{display:inline-block;margin-left:6px;color:var(--green);font-weight:800;
  opacity:0;transform:translateX(-4px) scale(.7);transition:opacity .15s,transform .15s}
.btn .copy-check.show{opacity:1;transform:translateX(0) scale(1)}

/* ---------- 공용 폼 컨트롤 ----------
   여러 화면이 같이 쓴다. 페이지마다 select/input 을 따로 그리지 말고 여기 것을 쓸 것. */
.txin{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--field);color:var(--txt);font-size:14px;font-family:inherit;transition:.15s}
.txin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,110,77,.18)}
.txin::placeholder{color:var(--muted);opacity:.8}
/* 공용 셀렉트 — 브라우저 기본 화살표는 다크 배경에서 흰 네모로 튀어서 직접 그린다 */
.selin{appearance:none;-webkit-appearance:none;
  padding:10px 32px 10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--field) no-repeat right 11px center/11px 7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23B3A390' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color:var(--txt);font-size:14px;font-family:inherit;cursor:pointer;transition:.15s}
.selin:hover{border-color:var(--line2)}
.selin:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,110,77,.18)}
.selin option{background:var(--panel2);color:var(--txt)}

/* ---------- 공용 페이저 ---------- */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:18px 4px 0}
.pager .pg{min-width:34px;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--muted);font-size:13.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.pager .pg:hover:not(:disabled){background:#33281F;border-color:var(--line2);color:var(--txt)}
.pager .pg:disabled{opacity:.35;cursor:default}
.pager .pg.on{background:rgba(255,110,77,.16);border-color:rgba(255,110,77,.5);color:#FFC1B0}
.pager .pg-gap{color:var(--muted);padding:0 2px;font-size:13px}

/* ---------- 랜딩 ---------- */
body.landing{display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(900px 560px at 50% -12%,#2C2117,var(--bg))}
.landing-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.logo{font-size:32px;font-weight:800;text-align:center;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.tag{text-align:center;color:var(--muted);margin:6px 0 24px;font-size:14px}
.panel h2{font-size:15px;margin:0 0 10px;color:var(--txt);font-weight:700}
.landing input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--line2);
  background:var(--field);color:var(--txt);font-size:15px;margin-bottom:10px}
.landing input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,110,77,.18)}
.landing .btn{width:100%}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:20px 0;font-size:13px}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.hint{color:var(--muted);font-size:12.5px;text-align:center;margin-top:20px;line-height:1.6}
.msg{text-align:center;color:var(--accent2);font-size:13px;min-height:18px;margin-top:8px}

/* ---------- 방장 대시보드 ---------- */
body.dash{min-height:100vh;background:var(--bg)}
.dash-top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(24,19,16,.86);backdrop-filter:blur(12px);z-index:5}
.logo.sm{display:flex;align-items:center;gap:6px;font-size:22px;font-weight:800}
.logo.sm span{color:var(--accent)}
.logo.sm em{font-style:normal;font-size:12px;font-weight:700;color:var(--host);
  background:rgba(245,176,86,.12);border:1px solid rgba(245,176,86,.35);
  padding:3px 10px;border-radius:20px;margin-left:2px}

.dash-main{max-width:720px;margin:0 auto;padding:28px 18px 70px}

.create-card{background:linear-gradient(135deg,rgba(255,110,77,.12),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:30px;
  box-shadow:0 8px 26px rgba(0,0,0,.3)}
.muted{color:var(--muted)}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px 22px;margin-bottom:24px}
.stat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px}
.stat-head h2{font-size:16px;margin:0;color:var(--txt)}
.stat-head .muted{font-size:13px;font-weight:400}
.stat-head select{background:var(--field);color:var(--txt);border:1px solid var(--line2);border-radius:9px;padding:7px 10px;font-size:13px}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
@media(max-width:560px){.stat-grid{grid-template-columns:repeat(3,1fr)}}
.stat{background:linear-gradient(135deg,rgba(255,110,77,.12),#1B140E);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.stat-n{font-size:24px;font-weight:800;color:var(--txt)}
.stat-k{font-size:12px;color:var(--muted);margin-top:2px}
.stat-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.stat-cols{grid-template-columns:1fr}}
.stat-col h3{font-size:13px;color:var(--accent2);margin:0 0 8px}
.bar-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-radius:8px;background:#1B140E;border:1px solid var(--line);margin-bottom:6px;font-size:13.5px}
.bar-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:78%}
.bar-row b{color:var(--accent)}
.roster-wrap{max-height:min(50vh,380px);overflow:auto;border:1px solid var(--line);border-radius:12px}
table.roster{width:100%;border-collapse:collapse;font-size:13.5px}
table.roster th,table.roster td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.roster th{background:var(--panel2);color:var(--accent2);position:sticky;top:0}
table.roster tr:last-child td{border-bottom:none}
.create-card h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 14px;color:var(--txt)}
.create-card h2:before{content:"✨";font-size:18px}
.create-row{display:flex;gap:10px}
.create-row input{flex:1;min-width:0;padding:13px 15px;border-radius:12px;border:1px solid var(--line2);
  background:var(--field);color:var(--txt);font-size:15px;transition:.15s}
.create-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,110,77,.2)}
.create-row .btn{white-space:nowrap;padding-left:22px;padding-right:22px}

.list-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:8px;margin:0 4px 14px}
.list-head h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0;color:var(--txt)}
.list-head h2:before{content:"🗂";font-size:16px}
.list-head .count{font-size:13px;color:var(--muted);font-weight:600;margin-left:2px}

/* 내 방 필터 바(TSK-0839) — 이름/코드 검색 + 진행중/종료·만료 상태
   컨트롤은 공용 .txin/.selin 을 쓴다. 여기서는 배치만 잡는다. */
.room-filter-bar{display:flex;gap:8px;align-items:center;margin:0 4px 14px;flex-wrap:wrap}
.fb-search{position:relative;display:flex;align-items:center;flex:1 1 200px;max-width:320px}
.fb-search .fb-ico{position:absolute;left:11px;font-size:12.5px;opacity:.6;pointer-events:none}
.fb-search .txin{padding-left:31px;padding-right:30px}
.fb-clear{position:absolute;right:6px;width:22px;height:22px;border-radius:50%;border:0;
  background:transparent;color:var(--muted);font-size:12px;line-height:1;
  display:none;align-items:center;justify-content:center}
.fb-clear.show{display:flex}
.fb-clear:hover{background:rgba(255,255,255,.08);color:var(--txt)}
/* 오른쪽 끝에 컨트롤을 붙이지 않는다 — 요약 글자로 여백을 채워 균형을 잡는다 */
.fb-sum{margin-left:auto;display:flex;align-items:center;gap:9px;
  color:var(--muted);font-size:12.5px;white-space:nowrap}
.fb-sum b{color:var(--txt);font-weight:700}
.fb-sum .fb-dot{opacity:.45}
@media(max-width:600px){
  /* 좁은 화면에선 검색창이 한 줄을 차지하고, 아랫줄에서 상태 선택 + 요약이 나눠 갖는다 */
  .fb-search{max-width:none;flex:1 1 100%}
  .room-filter-bar .selin{flex:0 1 auto}
  .fb-sum{margin-left:auto}
}

.room-list{display:flex;flex-direction:column;gap:12px}
.room-item{display:flex;align-items:center;gap:14px;flex-wrap:wrap;row-gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  transition:.15s;position:relative;overflow:hidden}
.room-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(var(--accent),var(--accent-strong))}
/* 만료·동결된 방은 왼쪽 띠를 무채색으로 낮춰 진행중인 방과 한눈에 구분되게(TSK-0839) */
.room-item.frozen:before{background:linear-gradient(var(--muted),var(--line2))}
.room-item:hover{transform:translateY(-2px);border-color:var(--line2);
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
.ri-avatar{width:46px;height:46px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--oak),var(--oak2));display:flex;align-items:center;
  justify-content:center;font-size:22px;border:1px solid var(--oak-edge)}
.ri-main{flex:1 1 200px;min-width:0}
/* 카드 제목 영역도 오른쪽 기본 버튼과 같은 동작을 하도록(TSK-0846) — 매번 작은 버튼을 노리지 않아도 되게 */
.ri-main.ri-click{cursor:pointer}
.ri-name{font-weight:700;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;margin-top:5px}
.ri-code{font-family:'Consolas',monospace;color:var(--accent2);letter-spacing:1.5px;font-weight:700;
  background:rgba(245,176,86,.12);padding:2px 8px;border-radius:6px;white-space:nowrap}
.ri-pill{background:var(--panel2);border:1px solid var(--line);padding:2px 9px;border-radius:20px;white-space:nowrap}
.ri-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
/* 내 방 목록(TSK-0815) — 카드마다 버튼이 4~6개로 달라도 버튼 영역 폭을 고정해서
   좁아질 때 카드가 제각각이 아니라 «다 같이» 두 줄로 내려가게 한다.
   380px 근거: 아이콘 4개(~43)+QR(~44)+입장/Entrar(52~70)+간격 8×5 = 최대 ~330 + 여유.
   버튼을 더 늘리면 이 값을 다시 재야 한다. flex-wrap:wrap 은 안전판이니 절대 nowrap 으로 바꾸지 말 것
   (.room-item 이 overflow:hidden 이라 넘치면 버튼이 잘려 사라진다). */
#view-rooms #roomList .ri-actions{flex:0 0 auto;width:min(380px,100%);
  justify-content:flex-end;margin-left:auto}
.icon-del{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;transition:.15s}
.icon-del:hover{background:rgba(240,119,106,.14);border-color:var(--danger);color:var(--danger)}

.empty{text-align:center;padding:44px 16px;color:var(--muted);
  background:var(--panel);border:1px dashed var(--line2);border-radius:16px}
.empty .big{font-size:40px;display:block;margin-bottom:10px;opacity:.7}
.empty .sub{font-size:13px;margin-top:4px;opacity:.8}
.skeleton{height:78px;border-radius:16px;background:linear-gradient(90deg,#221B15,#2A2119,#221B15);
  background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* 아주 좁은 폰(≈430px 이하) — 버튼 6개짜리 카드만 버튼줄이 두 줄로 갈라지지 않도록
   내 방 목록 버튼의 좌우 여백·간격을 조금 줄인다(TSK-0815). 높이는 그대로라 누르기 편한 크기는 유지. */
@media(max-width:430px){
  #view-rooms #roomList .ri-actions{gap:6px}
  #view-rooms #roomList .ri-actions .btn.sm{padding:8px 9px}
}

@media(max-width:520px){
  .create-row{flex-direction:column}
  .create-row .btn{width:100%}
  .ri-actions .btn.primary.sm{padding:8px 14px}
  .ri-avatar{width:38px;height:38px;font-size:18px}
  .ri-main{flex:1 1 calc(100% - 52px)}
  /* 내 방 목록은 위 #view-rooms #roomList 규칙(더 구체적)이 이긴다 — 거기서 width 가 100% 로 떨어져 결과는 같다 */
  .ri-actions{flex:1 1 100%}
}

/* ---------- 방 화면 ---------- */
body.room{overflow:hidden;touch-action:none}
#stage{position:fixed;inset:0;display:block;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
#stage:active{cursor:grabbing}

.topbar{position:fixed;top:0;left:0;right:0;height:54px;z-index:10;
  display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  background:rgba(24,19,16,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.tb-left{display:flex;align-items:center;gap:8px;min-width:0}
.room-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.badge{font-size:11px;padding:3px 9px;border-radius:20px;background:var(--panel2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}
.badge.host{background:rgba(245,176,86,.16);color:var(--host);border-color:rgba(245,176,86,.4)}
.tb-right{display:flex;gap:6px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);font-size:17px;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{background:#33281F}
.icon-btn.danger{color:var(--danger);border-color:rgba(240,119,106,.35)}
.icon-btn.danger:hover{background:rgba(240,119,106,.14);border-color:var(--danger)}

/* 상단바 "더보기" — 자주 안 쓰는 버튼(초대·화면맞춤·캐릭터·방설정·언어)을 여기 몰아
   방 이름이 모바일 좁은 폭에서 밀려 안 보이던 문제를 없앤다(TSK-0778). */
.tb-more{position:relative}
.tb-more-menu{position:fixed;display:none;flex-direction:column;gap:2px;min-width:190px;z-index:14;
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:6px;
  box-shadow:0 16px 44px rgba(0,0,0,.5)}
.tb-more-menu.open{display:flex}
.tb-more-menu .tb-more-item{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;padding:10px 11px;border:0;border-radius:9px;
  background:transparent;color:var(--txt);font-family:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;text-decoration:none;box-sizing:border-box}
.tb-more-menu .tb-more-item:hover{background:#33281F}
.tb-more-item .tmi-ic{font-size:17px;width:22px;text-align:center;flex:none}
/* 알림 켜짐 표시 (TSK-0789) — 초록 점 */
.tb-more-item#notifyBtn.on{color:var(--green)}
.tb-more-item#notifyBtn.on .tmi-ic{position:relative}
.tb-more-item#notifyBtn.on .tmi-ic::after{content:'';position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:var(--green);border:1.5px solid var(--panel)}
/* 아직 알림을 안 켠 사람에게 남기는 앰버 점 — 제안 pill 을 놓쳐도 여기서 찾게 (TSK-0789) */
.tb-more-item#notifyBtn.hint .tmi-ic{position:relative}
.tb-more-item#notifyBtn.hint .tmi-ic::after{content:'';position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:var(--accent2);border:1.5px solid var(--panel)}

/* 접속 인원 pill */
.floor-live-pill{position:fixed;top:62px;right:12px;z-index:8;display:flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:800;color:var(--green);background:rgba(79,205,140,.14);
  border:1px solid rgba(79,205,140,.34);padding:5px 12px 5px 10px;border-radius:999px;
  backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.floor-live-pill i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:livebeat 1.8s ease-out infinite}
@keyframes livebeat{0%{box-shadow:0 0 0 0 rgba(79,205,140,.5)}70%{box-shadow:0 0 0 7px rgba(79,205,140,0)}100%{box-shadow:0 0 0 0 rgba(79,205,140,0)}}

/* 일시·장소 메타 박스 (좌상단, TSK-0901 — 낱개 알약 대신 한 박스로 묶어서 작게) */
.meta-pill{position:fixed;top:62px;left:12px;z-index:8;display:flex;flex-direction:column;gap:3px;max-width:60vw;
  background:rgba(24,19,16,.72);border:1px solid var(--line2);border-radius:10px;padding:7px 11px;
  backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.meta-pill span{font-size:11.5px;font-weight:700;color:var(--txt);line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 바이럴 CTA pill (게스트 전용 · 좌하단) */
.viral-pill{position:fixed;left:12px;bottom:calc(66px + var(--safe-b));z-index:10;display:flex;align-items:center;gap:2px;
  background:rgba(255,110,77,.16);border:1px solid rgba(255,110,77,.42);border-radius:999px;
  padding:6px 6px 6px 14px;backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(0,0,0,.4);
  animation:viralIn .5s ease-out}
.viral-pill a{font-size:12.5px;font-weight:800;color:var(--accent);text-decoration:none;white-space:nowrap}
.viral-pill a:hover{filter:brightness(1.15)}
.viral-pill button{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;padding:2px 7px;line-height:1}
@keyframes viralIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:520px){.viral-pill{bottom:calc(76px + var(--safe-b))}}

/* PWA 설치·알림 제안 pill (TSK-0789 · 상단 우측, 접속 pill 밑 · 한 줄 · 10초 뒤 자동 소멸)
   하단은 리액션 바·대기실 승인 패널·바이럴 pill·채팅 패널이 이미 다투는 자리라 상단으로 뺐다.
   z-index 9 = 멤버/대기실 패널보다 아래 — 그것들이 열리면 자연히 가려진다. */
.pwa-pill{position:fixed;top:98px;right:12px;z-index:9;display:flex;align-items:center;gap:7px;
  max-width:calc(100vw - 24px);
  background:rgba(245,176,86,.15);border:1px solid rgba(245,176,86,.36);border-radius:999px;
  padding:5px 6px 5px 12px;backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.35);
  animation:viralIn .45s ease-out;transition:opacity .38s ease,transform .38s ease}
.pwa-pill.out{opacity:0;transform:translateY(-6px)}
.pwa-pill-ic{font-size:14px;line-height:1;flex:none}
.pwa-pill-txt{font-size:12.5px;font-weight:700;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pwa-pill .btn.sm{flex:none;padding:5px 12px;font-size:12px;border-radius:999px}
.pwa-pill-close{flex:none;background:none;border:none;color:var(--muted);font-size:11px;
  cursor:pointer;padding:3px 6px;line-height:1}

/* 리액션 바 (전원 · 좌우 스와이프 스크롤) */
.react-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:var(--dock-b);z-index:11;display:flex;align-items:center;gap:2px;
  max-width:min(520px,calc(100vw - 20px));
  background:rgba(24,19,16,.9);border:1px solid var(--line2);border-radius:999px;padding:5px 6px;
  backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.react-nav{flex:0 0 auto;width:30px;height:38px;border:0;background:transparent;color:var(--muted);
  font-size:24px;line-height:1;cursor:pointer;border-radius:999px;display:flex;align-items:center;justify-content:center;
  transition:background .12s,color .12s;font-family:inherit}
.react-nav:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.react-nav:disabled{opacity:.25;cursor:default;background:transparent}
.react-bar{display:flex;gap:4px;min-width:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;cursor:grab}
.react-bar:active{cursor:grabbing}
.react-bar::-webkit-scrollbar{display:none}
.react-bar button{flex:0 0 auto;width:38px;height:38px;border:0;background:transparent;border-radius:50%;font-size:19px;
  cursor:pointer;transition:transform .12s,background .12s;line-height:1}
.react-bar button:hover{background:rgba(255,255,255,.08);transform:scale(1.15)}
.react-bar button:active{transform:scale(.9)}
/* 모바일: 방장 도구가 이제 기본 숨김(⋯ 토글)이라 리액션 바를 더 아래로 붙이고,
   우하단 ⋯ 토글 버튼과 안 겹치게 오른쪽 폭을 줄인다(TSK-0773). */
@media(max-width:759px){
  .react-wrap{left:10px;right:10px;transform:none;max-width:none;bottom:var(--dock-b)}
  /* 우하단 ⋯ 토글은 방장 화면에만 뜬다 — 그때만 그 폭만큼 좁힌다(참석자는 가로 꽉 차게) */
  .react-wrap.rw-narrow{right:70px}
  /* 방장이 ⋯ 눌러 도구바를 펼친 동안은 자리가 겹치므로 잠깐 숨긴다 */
  .react-wrap.rw-hidden{display:none}
}
/* 태블릿 폭(760~940px 안팎)에서는 방장 도구가 우하단에 세로로 펼쳐져(190px+여백)
   가운데 정렬된 리액션 바와 겹친다 — 방장 화면일 때만 그만큼 최대폭을 좁혀 겹침을 피한다(TSK-0792) */
@media(min-width:760px){
  .react-wrap.rw-narrow-dock{max-width:min(520px,calc(100vw - 420px))}
}

/* 배경 테마 스와치 */
.bg-swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:6px}
@media(max-width:420px){.bg-swatches{grid-template-columns:repeat(3,1fr)}}
.bg-sw{aspect-ratio:1.15;border:2px solid var(--line2);border-radius:10px;cursor:pointer;position:relative;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;overflow:hidden;transition:.12s}
.bg-sw span{font-size:10.5px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.bg-sw:hover{border-color:var(--line2);transform:translateY(-1px)}
.bg-sw.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,110,77,.3)}

/* 배경 이미지 채우기 방식 (TSK-0844) */
.bgfit-row{display:flex;gap:7px;margin-top:6px}
.bgfit-sw{flex:1;padding:9px 4px;border:2px solid var(--line2);border-radius:10px;cursor:pointer;
  background:var(--panel2);color:var(--muted);font-size:12.5px;font-weight:700;transition:.12s}
.bgfit-sw:hover{border-color:#5a4636;color:var(--txt)}
.bgfit-sw.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,110,77,.3);color:var(--txt)}

/* 배경 이미지 크기 슬라이더 (TSK-0844) */
.bgscale-row{display:flex;gap:9px;align-items:center;margin-top:6px}
.bgscale-row input[type=range]{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));outline:none;padding:0;margin:0;border:0}
.bgscale-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;
  background:var(--txt);border:3px solid var(--accent);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.bgscale-row input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;
  background:var(--txt);border:3px solid var(--accent);cursor:pointer}
.bgscale-val{min-width:52px;text-align:right;font-weight:800;font-size:13px;color:var(--txt);font-variant-numeric:tabular-nums}
.bgscale-hint{margin:6px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45}
/* 슬라이더를 잡고 있는 동안 설정창을 비켜 준다 — 안 그러면 모바일에서 결과가 안 보인다 */
.modal-bg.peek .modal{opacity:.12;transition:opacity .1s}
.modal-bg.peek{background:transparent;backdrop-filter:none}
/* 배경 이미지가 없으면 채우기 방식·크기·판 넓이는 할 일이 없다 — 흐리게 잠근다 (TSK-0844) */
.bg-ctl-off{opacity:.4;pointer-events:none}

/* 테이블 색 프리셋 스와치 */
#epSwatches{gap:6px;align-items:center}
.ep-sw{width:24px;height:24px;border-radius:50%;border:2px solid var(--line2);cursor:pointer;padding:0;flex-shrink:0;transition:.12s}
.ep-sw:hover{transform:scale(1.15);border-color:#fff}

/* 데코 스티커 선택 피커 */
#epStickerRow{gap:6px}
.ep-deco{width:34px;height:34px;font-size:18px;line-height:1;border-radius:9px;border:2px solid var(--line2);
  background:var(--field);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;transition:.12s}
.ep-deco:hover{transform:scale(1.1);border-color:#fff}
.ep-deco.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,110,77,.32)}

/* 줌 컨트롤 (우측 세로) */
.zoom-ctl{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;gap:1px;
  background:rgba(24,19,16,.9);border:1px solid var(--line2);border-radius:12px;overflow:hidden;backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.zoom-ctl button{width:40px;height:40px;border:0;background:transparent;color:var(--txt);font-size:18px;cursor:pointer;font-family:inherit;transition:.12s}
.zoom-ctl button:hover{background:rgba(255,255,255,.08)}
.zoom-ctl button:active{background:rgba(255,110,77,.2)}
.zoom-ctl button+button{border-top:1px solid var(--line)}
/* 모바일에서도 다시 노출 — 핀치줌만으론 자신을 못 찾는 경우가 있어 되살림(TSK-0814).
   우하단 ⋯ 토글·리액션 바(둘 다 bottom:14px대)와 안 겹치게 더 위쪽에 둔다. */
@media(max-width:759px){.zoom-ctl{top:auto;bottom:calc(120px + var(--safe-b));transform:none}}

/* 참석자 목록 패널 */
.member-panel{position:fixed;top:62px;right:12px;z-index:13;width:240px;max-width:calc(100vw - 24px);
  max-height:calc(var(--vh) * .6);display:flex;flex-direction:column;background:rgba(24,19,16,.96);border:1px solid var(--line2);
  border-radius:14px;overflow:hidden;backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.55)}
.member-panel .mp-h{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:800}
.member-panel .mp-h b{color:var(--green,#4FCD8C)}
.member-panel .mp-list{overflow-y:auto;padding:6px}
.member-panel .mp-row{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:0;background:transparent;
  color:var(--txt);cursor:pointer;border-radius:9px;font-family:inherit;font-size:14px;text-align:left}
.member-panel .mp-row:hover{background:rgba(255,255,255,.06)}
.member-panel .mp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.member-panel .mp-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.member-panel .mp-me{font-size:11px;color:var(--accent);font-weight:700;margin-left:2px}
/* 착석 (TSK-1309) — 참석자 목록의 좌석 칩 · 사람 정보바의 «지금 3번 · 아까 5번» */
.member-panel .mp-seat{flex-shrink:0;font-size:12px;font-weight:800;color:var(--txt);background:rgba(244,236,224,.1);
  border:1px solid var(--line2);border-radius:999px;padding:2px 8px;white-space:nowrap}
#partPanel .pp-who{flex:1;min-width:70px;display:flex;flex-direction:column;gap:2px;line-height:1.25}
#partPanel .pp-seat{font-size:12px;font-weight:700;color:var(--green,#4FCD8C)}
@media (max-width:520px){#partPanel .ep-row{flex-wrap:wrap}#partPanel .pp-who{flex:1 1 100%}#partPanel .pp-seat{white-space:nowrap}}

/* 대기실 승인 패널 (방장) */
.pending-panel{position:fixed;top:62px;right:12px;z-index:12;width:260px;max-width:calc(100vw - 24px);
  background:rgba(24,19,16,.95);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;
  backdrop-filter:blur(10px);box-shadow:0 12px 36px rgba(0,0,0,.5)}
.pending-panel .pp-h{font-size:13px;font-weight:800;margin-bottom:10px;color:var(--amber,#F5B056)}
.pending-panel .pp-row{display:flex;align-items:center;gap:6px;margin-bottom:7px;font-size:13.5px}
.pending-panel .pp-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pending-panel .pp-row .btn{padding:5px 9px;font-size:12px}
@media(max-width:520px){.pending-panel{top:auto;bottom:calc(70px + var(--safe-b));right:8px;left:8px;width:auto}}

/* 대기 중 오버레이 (참석자) */
.pending-overlay{position:fixed;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(600px 400px at 50% 40%,#2B2117,#181310)}
.pending-overlay .po-box{text-align:center;max-width:340px}
.pending-overlay h2{font-size:20px;margin:16px 0 8px}
.pending-overlay p{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.pending-overlay .po-spin{width:48px;height:48px;margin:0 auto;border-radius:50%;
  border:5px solid rgba(255,110,77,.2);border-top-color:var(--accent);animation:spin .8s linear infinite}

/* 방장 도구 */
.host-toolbar{position:fixed;bottom:0;left:0;right:0;z-index:10;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px calc(10px + var(--safe-b));
  background:rgba(24,19,16,.93);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.tool{border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  padding:10px 14px;border-radius:10px;font-size:14px;font-weight:600}
.tool:hover{background:#33281F}
/* 모바일: 이 바는 우하단 ⋯ 를 눌렀을 때만 펼쳐지므로(평소엔 숨김) 예전처럼
   여러 줄로 감싸 버튼 전부를 한눈에 보여준다 — 가로 스크롤은 뒤쪽 버튼이 잘려 보였다.
   오른쪽 66px 는 우하단 ✕(토글, right:12 + width:46 = 58px) 자리라 비워 둔다(TSK-0773). */
@media(max-width:759px){
  .host-toolbar{flex-wrap:wrap;padding-right:66px}
}

/* 방장 도구 토글 (모바일 전용 · 우하단 동그라미 ⋯) — 평소엔 이 버튼만 보이고,
   눌러야 위 .host-toolbar 가 펼쳐진다. 데스크탑에선 room.js 가 display 를 아예 안 켠다(TSK-0773). */
.host-toolbar-toggle{position:fixed;right:12px;bottom:var(--dock-b);z-index:12;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(24,19,16,.92);color:var(--txt);font-size:22px;line-height:1;
  cursor:pointer;align-items:center;justify-content:center;backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.45);font-family:inherit}
.host-toolbar-toggle:active{background:rgba(255,110,77,.25)}

/* 테이블 편집 패널 (사람 정보바 #partPanel 도 이 클래스 공유)
   bottom 은 방장 도구 실제 높이(--tb-h, room.js 가 실측해 넣음)에 딱 붙임 —
   고정 px 를 쓰면 기기 글꼴 크기 차로 도구 높이가 달라질 때 패널이 붕 뜨거나 겹친다(TSK-0777). */
.edit-panel{position:fixed;left:12px;right:12px;bottom:calc(var(--tb-h,58px) + 8px + var(--safe-b));z-index:11;
  background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.ep-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ep-row label{font-size:13px;color:var(--muted)}
.ep-row input[type=range]{flex:1;min-width:80px;accent-color:var(--accent)}
.ep-row input[type=text]{flex:1;min-width:120px;padding:9px 11px;border-radius:9px;border:1px solid var(--line2);background:var(--field);color:var(--txt)}
.ep-seats-val{font-size:13px;font-weight:700;color:var(--accent2);min-width:34px;text-align:center}
#epRotV{font-size:13px;color:var(--accent2);min-width:36px}

/* ---------- 모달 ---------- */
.modal-bg{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,3,.66);backdrop-filter:blur(4px);padding:18px}
.modal{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line2);
  border-radius:18px;padding:24px 22px;box-shadow:0 20px 60px rgba(0,0,0,.6);
  max-height:calc(var(--vh) * .9);overflow-y:auto}
.modal h2{margin:0 0 6px;font-size:20px}
.modal-sub{color:var(--muted);font-size:13px;margin:0 0 16px}
.modal input[type=text],.modal input[type=password]{width:100%;padding:13px 14px;border-radius:11px;border:1px solid var(--line2);
  background:var(--field);color:var(--txt);font-size:15px;margin-bottom:14px;color-scheme:dark}
.row-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.row-btns .btn{flex:1 1 auto;white-space:nowrap}
.fld{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.fld input{margin-top:6px}
.chk-row{display:flex;align-items:center;gap:8px;font-size:14px;margin:10px 0 16px}
.chk-row input{width:18px;height:18px;accent-color:var(--accent)}

/* ── 입장/캐릭터 모달: 아바타 옵션이 길어도 입장·저장 버튼은 스크롤 없이 늘 보이게 (TSK-0803) ──
   모달 전체를 세로로 스크롤하던 걸, 아바타 편집 영역만 내부 스크롤하도록 바꿨다.
   제목·닉네임·버튼은 고정, 모자/눈/입 선택 영역만 좁으면 그 안에서 스크롤된다.
   그런데 그 내부 스크롤조차 웬만한 폰에서는 안 나오는 게 맞다(반려 3회). 그래서
   ① 모달이 쓸 수 있는 높이를 화면의 90% → 거의 전체로 넓히고
   ② 빈 오류줄과 군더더기 여백을 걷어냈다. (칸 제목을 왼쪽으로 옮긴 건 아래 '아바타 에디터' 절) */
#joinModal,#meModal{padding:12px}
#joinModal .modal,#meModal .modal{display:flex;flex-direction:column;overflow-y:hidden;
  max-height:calc(var(--vh) - 24px);padding:20px 20px 18px}
#joinModal .modal>*,#meModal .modal>*{flex:0 0 auto}
#joinModal h2,#meModal h2{margin-bottom:4px}
/* TSK-0904 반려: "그래도 타이틀인데 좀 이쁘게" — 밋밋한 흰 글씨 대신 브랜드 그라데이션(코랄→앰버)으로 */
#joinModal h2{font-size:25px;font-weight:800;letter-spacing:-.3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:var(--accent2)}
#joinModal .modal-sub{margin-bottom:12px}
/* TSK-0904: 초대 받아 처음 들어온 사람이 "아~ 이런 방이구나"를 닉네임 입력 전에 먼저 알도록,
   방 이름·장소·일시·안내문을 낱줄 텍스트가 아니라 눈에 띄는 박스 하나로 보여준다. */
.join-room-info{font-size:13px;font-weight:700;color:var(--txt);line-height:1.55;white-space:pre-line;
  background:rgba(255,110,77,.08);border:1px solid var(--line2);border-radius:12px;
  padding:10px 12px;margin:0 0 14px}
/* ── 인앱 브라우저 «다른 브라우저로 열기» ──
   카톡 등 인앱 브라우저로 들어온 사람에게만 보인다(room.js 가 켠다). 왜 눌러야 하는지가
   같이 보여야 눌리므로 제목 + 한 줄 이유 두 단으로 짠다. 앰버(--accent2) 쪽으로 눕혀
   코랄인 방 정보 박스와 «다른 성격»으로 읽히게 한다. */
.inapp-esc{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  font:inherit;color:var(--txt);padding:9px 11px;margin:0 0 12px;
  background:rgba(245,176,86,.10);border:1px solid var(--line2);border-radius:11px;
  transition:background .15s ease}
.inapp-esc:hover{background:rgba(245,176,86,.18)}
.inapp-esc:active{transform:translateY(1px)}
.inapp-esc .ie-ic{font-size:18px;flex:none;line-height:1}
.inapp-esc .ie-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.inapp-esc .ie-t{font-size:13px;font-weight:700;line-height:1.3;color:var(--accent2)}
.inapp-esc .ie-s{font-size:11px;font-weight:500;line-height:1.35;color:var(--muted)}
/* ── 입장 모달 2단계 (TSK-0904) ──
   .modal 의 data-step 하나로 «지금 몇 페이지인가»를 정한다 — JS 는 속성만 바꾸고, 보이기와
   점 강조는 전부 여기서 결정한다(두 군데서 display 를 토글하면 재진입 경로마다 어긋난다).
   ⚠️ 위 '#joinModal .modal>*{flex:0 0 auto}' 보다 선택자가 세야 한다 — 안 그러면 2단계가
   안 줄어들어 아바타 영역이 모달을 밀어내고 '입장' 버튼이 잘린다(TSK-0803 이 고쳤던 증상). */
#joinModal .modal>.join-step{display:flex;flex-direction:column;min-height:0}
#joinModal .modal>#joinStep1{flex:0 1 auto}   /* 안내문이 길면 정보 박스가 안에서 스크롤 */
#joinModal .modal>#joinStep2{flex:1 1 auto}   /* 아바타 편집이 남는 높이를 차지 */
#joinModal .modal[data-step="1"]>#joinStep2,
#joinModal .modal[data-step="2"]>#joinStep1{display:none}
#joinModal #joinStep1 .join-room-info{flex:0 1 auto;min-height:0;overflow-y:auto}
#joinModal #joinStep1 #passInput{margin-bottom:4px}
#joinModal #joinStep1 .btn{margin-top:6px}
/* 단계 표시 점 — 지금 칸은 브랜드 그라데이션 막대로 길어진다 */
#joinModal .join-dots{display:flex;gap:6px;justify-content:center;margin:2px 0 14px}
#joinModal .join-dots span{width:7px;height:7px;border-radius:50%;background:rgba(244,236,224,.2);
  transition:width .18s ease,background .18s ease}
#joinModal .modal[data-step="1"] .join-dots span:nth-child(1),
#joinModal .modal[data-step="2"] .join-dots span:nth-child(2){width:18px;border-radius:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent2))}
#joinModal .modal input[type=text],#joinModal .modal input[type=password],
#meModal .modal input[type=text]{margin-bottom:10px}
/* 오류가 없을 때까지 18px 자리를 잡고 있던 빈 줄 — 접는다(오류가 나면 다시 나타난다) */
#joinModal .msg:empty{display:none}
#joinModal .avatar-editor,#meModal .avatar-editor{flex:1 1 auto;min-height:0;overflow-y:auto;margin-bottom:12px;
  scrollbar-width:thin;scrollbar-color:rgba(244,236,224,.13) transparent}
#joinModal .avatar-editor::-webkit-scrollbar,#meModal .avatar-editor::-webkit-scrollbar{width:5px}
#joinModal .avatar-editor::-webkit-scrollbar-track,#meModal .avatar-editor::-webkit-scrollbar-track{background:transparent}
#joinModal .avatar-editor::-webkit-scrollbar-thumb,#meModal .avatar-editor::-webkit-scrollbar-thumb{background:rgba(244,236,224,.13);border-radius:3px}
#joinModal .avatar-editor::-webkit-scrollbar-thumb:hover,#meModal .avatar-editor::-webkit-scrollbar-thumb:hover{background:rgba(244,236,224,.26)}

/* ── 방 설정 모달 정돈 (host-only 로 방 전용 스코프) ── */
#settingsModal.host-only .modal{max-width:430px}
#settingsModal.host-only h2{margin-bottom:18px}
#settingsModal.host-only .fld{display:block;margin:0 0 15px;font-size:12.5px;font-weight:600;color:var(--muted)}
#settingsModal.host-only .fld .muted{font-weight:400}
#settingsModal.host-only input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),
#settingsModal.host-only textarea,
#settingsModal.host-only select{
  display:block;width:100%;margin:7px 0 0;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line2);background:var(--field);color:var(--txt);
  font-size:14.5px;font-family:inherit;color-scheme:dark}
#settingsModal.host-only input:focus,#settingsModal.host-only textarea:focus{outline:none;border-color:var(--accent)}
#settingsModal.host-only textarea{min-height:66px;line-height:1.5;resize:none}
#settingsModal.host-only .bg-swatches{margin-top:8px}
#settingsModal.host-only .bgimg-actions{display:flex;gap:8px;margin-top:8px}
#settingsModal.host-only .bgimg-actions .btn{flex:1}
#settingsModal.host-only .chk-group{display:flex;flex-direction:column;gap:9px;margin:4px 0 18px}
#settingsModal.host-only .chk-row{margin:0;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);font-size:13.5px;font-weight:600}
/* 저장·닫기 버튼도 하나의 «덩어리»로 보이게 그룹 사이 간격(14px)과 똑같이 띄운다
   — 옵션 카드에 딱 붙어 있어서 «여기서부터 다른 것»이 안 보였다(TSK-0868 3차 반려). */
#settingsModal.host-only .row-btns{margin-top:14px}
/* 방 설정 그룹 처리 — 기본정보·모임정보·배경·옵션 네 덩어리를 전부 «접었다 펼 수 있는 카드»로
   통일한다(TSK-0868). 1차 반려 "그룹마다 그룹처리해달라" → 네 개 다 카드로,
   2차 반려 "접고 피는 느낌을 전혀 모르겠다" → 호박색 헤더바 + 화살표 + 접기/펼치기 글자,
   3차 반려 "기본정보·모임정보도 접히게(기본 펼침), 배경·옵션은 기본 접힘" → 여는 상태는 room.html
   의 details[open] 로 정한다(기본정보·모임정보만 open). */
#settingsModal.host-only .set-sec{margin:0 0 14px;border-radius:14px;padding:0;overflow:hidden;
  border:1px solid rgba(245,176,86,.32);
  background:linear-gradient(180deg,rgba(245,176,86,.1),rgba(245,176,86,.03))}
#settingsModal.host-only .set-sec:last-of-type{margin-bottom:0}
#settingsModal.host-only .set-sec-h{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:.02em;color:var(--accent2);text-transform:uppercase;margin:0;
  cursor:pointer;list-style:none;padding:14px;background:rgba(245,176,86,.12);
  transition:background .15s;user-select:none}
#settingsModal.host-only .set-sec-h:hover{background:rgba(245,176,86,.2)}
#settingsModal.host-only .set-sec-h::-webkit-details-marker{display:none}
#settingsModal.host-only .set-sec[open] > .set-sec-h{border-bottom:1px solid rgba(245,176,86,.32)}
#settingsModal.host-only .set-acc-body{padding:14px}
#settingsModal.host-only .set-acc-body > *:last-child{margin-bottom:0}
#settingsModal.host-only .acc-tog{display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  font-size:11px;font-weight:700;color:var(--accent2);text-transform:none;letter-spacing:0}
#settingsModal.host-only .acc-chev{display:inline-block;font-size:12px;line-height:1;transition:transform .2s ease}
#settingsModal.host-only .set-sec:not([open]) .acc-chev{transform:rotate(-90deg)}
#settingsModal.host-only .acc-txt-fold{display:none}
#settingsModal.host-only .set-sec[open] .acc-txt-fold{display:inline}
#settingsModal.host-only .set-sec[open] .acc-txt-expand{display:none}

/* ── 새 방 만들기 모달 — 입력 정돈 (datetime·textarea 깨짐 방지) ── */
#createModal .fld{display:block;margin:0 0 14px;font-size:12.5px;font-weight:600;color:var(--muted)}
#createModal .fld .muted{font-weight:400}
#createModal input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),
#createModal textarea{
  display:block;width:100%;margin:6px 0 0;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line2);background:var(--field);color:var(--txt);
  font-size:14.5px;font-family:inherit;color-scheme:dark;box-sizing:border-box}
#createModal input:focus,#createModal textarea:focus{outline:none;border-color:var(--accent)}
#createModal textarea{min-height:60px;line-height:1.5;resize:vertical}
#createModal details{margin:2px 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel2)}
#createModal details[open]{padding-bottom:4px}
#createModal summary{list-style:none;cursor:pointer;font-weight:600}
#createModal summary::-webkit-details-marker{display:none}
#createModal .bg-swatches{margin-top:8px}
#createModal .bgimg-actions{display:flex;gap:8px;margin-top:8px}
#createModal .bgimg-actions .btn{flex:1}
#createModal .chk-group{display:flex;flex-direction:column;gap:9px;margin:4px 0 14px}
#createModal .chk-group .chk-row{margin:0;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);font-size:13.5px;font-weight:600}

/* 채팅창: PC에서 헤더 잡고 드래그 이동 */
@media(min-width:521px){ .chat-head{cursor:move;user-select:none} }
.chat-head .chat-x{cursor:pointer}

.share-code{text-align:center;font-size:34px;font-weight:800;letter-spacing:6px;color:var(--accent2);
  background:#1B140E;border:1px dashed var(--line2);border-radius:12px;padding:14px;margin-bottom:14px}
#shareUrl{font-size:13px;color:var(--muted)}
.qr-box{display:flex;justify-content:center;margin:4px 0 16px}
.qr-box img{background:#fff;padding:10px;border-radius:12px;width:min(65vw,300px);height:min(65vw,300px)}
.invite-share-btn{width:100%;font-size:17px;padding:15px 12px;margin:2px 0 14px}
/* TSK-0879: 초대문구 미리보기/편집 칸 — #noteText 와 같은 톤 */
.share-msg-box{width:100%;margin-top:10px;padding:12px 14px;border-radius:11px;border:1px solid var(--line2);
  background:var(--field);color:var(--txt);font-size:13.5px;font-family:inherit;line-height:1.5;resize:vertical}
.share-msg-box:focus{outline:none;border-color:var(--accent)}

/* ---------- 아바타 에디터 ---------- */
.avatar-editor{background:#1B140E;border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:16px;
  --av-cols:4;--av-gap:8px}
@media(max-width:340px){ .avatar-editor{--av-cols:3} }
.av-preview{display:block;width:78px;height:78px;margin:0 auto 4px}
.av-section{margin-top:8px}
/* 이모지가 든 제목(👀 눈 / 👄 입)이 줄높이를 6px씩 밀어올려 4줄이면 12px을 먹었다 → 줄높이 고정 */
.av-title{font-size:12px;line-height:1.35;color:var(--muted);margin-bottom:5px}
.av-row{display:flex;gap:var(--av-gap,8px)}
/* ── 가로 스크롤 + 좌우 화살표 (아래로 늘어나지 않게) ──
   칸 폭을 44px 로 고정하면 오른쪽 끝 아이템이 늘 반쯤 잘려 보인다(TSK-0803 반려 2회).
   그래서 '한 화면에 딱 --av-cols 개가 들어차는' 반응형 폭으로 바꾸고 스크롤 스냅을 걸었다.
   칸 폭이 모두 같으니 끝까지 스크롤한 위치도 정확히 스냅 지점이라 어디서 멈춰도 안 잘린다. */
/* 섹션 제목(색상/모자/눈/입)을 행 위가 아니라 왼쪽에 둔다 — 제목 줄 4개가 통째로 사라져
   폰에서 아바타 영역이 세로로 스크롤되지 않는다(TSK-0803 반려 4회차 대응).
   :has() 를 모르는 옛 브라우저에서는 예전처럼 제목이 위에 오고 스크롤만 생긴다 — 깨지지 않는다.
   '📷 내 사진으로' 섹션은 .av-scroller 가 없어서 자동으로 빠진다. */
.av-section:has(> .av-scroller){display:flex;align-items:center;gap:8px;margin-top:6px}
.av-section:has(> .av-scroller)>.av-title{flex:0 0 38px;margin:0;white-space:nowrap}
.av-section:has(> .av-scroller)>.av-scroller{flex:1 1 auto;min-width:0}
.av-scroller{display:flex;align-items:center;gap:3px}
.av-scroll{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:2px 0;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.av-scroll::-webkit-scrollbar{display:none}
.av-arrow{flex:0 0 auto;width:22px;align-self:stretch;border:0;background:transparent;color:var(--muted);
  font-size:22px;line-height:1;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:inherit}
.av-arrow:hover{background:rgba(255,255,255,.08);color:var(--txt)}
.av-arrow:disabled{opacity:.22;cursor:default;background:transparent}
.av-opt{flex:0 0 auto;width:44px;height:44px;border-radius:10px;border:2px solid transparent;background:#33281F;
  display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
/* 스크롤 행 안에서는 폭을 칸 수에 맞춘다 (44px 고정 해제) */
.av-scroll>.av-opt{width:calc((100% - (var(--av-cols) - 1) * var(--av-gap)) / var(--av-cols));
  height:auto;aspect-ratio:1;scroll-snap-align:start}
.av-scroll>.av-opt canvas{width:100%;height:100%}
.av-opt.swatch{border:2px solid rgba(255,255,255,.1)}
/* 선택 링을 바깥 글로우로 두면 좌우 끝 칸에서 그 링이 잘려 보인다 → 안쪽으로 */
.av-opt.sel{border-color:var(--accent);box-shadow:inset 0 0 0 2px rgba(255,110,77,.32)}
.av-opt canvas{display:block}
/* 직접 색 선택(컬러 피커) 칩 */
.av-custom{position:relative;background:conic-gradient(from 0deg,#ff6b6b,#ffd43b,#4fcd8c,#22d3ee,#4c8dff,#c77dff,#ff6b6b)!important;
  border:2px solid rgba(255,255,255,.25)!important}
.av-custom::after{content:"🎨";font-size:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.av-color-in{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;border:0;cursor:pointer}
/* min-width 를 풀어둔다 — 안 그러면 좁은 폰에서 버튼 3개가 두 줄로 접힌다 */
.av-photo-btn{flex:1 1 64px;min-width:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;
  height:42px;border-radius:10px;border:1px solid var(--accent);background:rgba(255,110,77,.14);color:var(--accent);
  font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.av-photo-btn:hover{background:rgba(255,110,77,.24)}
.av-photo-rm{flex:0 0 auto;height:42px;padding:0 10px;border-radius:10px;border:1px solid var(--line2);white-space:nowrap;
  background:var(--panel2);color:var(--muted);font-size:13px;cursor:pointer}
.av-photo-rm:hover{color:var(--danger);border-color:var(--danger)}
.crop-overlay{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(8,5,3,.86);backdrop-filter:blur(4px);padding:18px}
.crop-box{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:18px;
  display:flex;flex-direction:column;gap:14px;align-items:center;max-width:340px;width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.crop-title{font-weight:700;font-size:15px}
.crop-canvas{width:280px;height:280px;max-width:78vw;max-height:78vw;border-radius:12px;
  background:#000;touch-action:none;cursor:grab}
.crop-canvas:active{cursor:grabbing}
.crop-zoom{display:flex;align-items:center;gap:10px;width:100%;color:var(--muted);font-size:14px}
.crop-zoom input{flex:1;accent-color:var(--accent)}
.crop-btns{display:flex;gap:10px;width:100%}
.crop-btns .btn{flex:1}

/* ---------- 한마디 / 쪽지함 ---------- */
#noteText{width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line2);
  background:var(--field);color:var(--txt);font-size:15px;font-family:inherit;resize:none;margin-bottom:6px}
#noteText:focus{outline:none;border-color:var(--accent)}
.mail-count{font-size:14px;color:var(--host);font-weight:700}
.mailbox-list{max-height:min(340px, calc(var(--vh) * .5));overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:6px 0 16px}
.mail-item{background:#1B140E;border:1px solid var(--line);border-left:3px solid var(--pink);
  border-radius:10px;padding:11px 13px;font-size:14.5px;line-height:1.45;color:var(--txt);word-break:break-word}
.mail-item .when{display:block;color:var(--muted);font-size:11.5px;margin-top:5px}
.mail-item.unread .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px}
.mail-empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:14px}

/* ---------- 채팅 패널 ---------- */
.chat-panel{position:fixed;left:12px;bottom:calc(12px + var(--safe-b));z-index:12;width:300px;max-width:calc(100vw - 24px);
  height:min(380px, calc(var(--vh) * .55));display:flex;flex-direction:column;
  background:rgba(24,19,16,.95);backdrop-filter:blur(10px);
  border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.chat-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.chat-x{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 6px}
.chat-x:hover{color:var(--txt)}
.chat-msgs{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:7px;
  scrollbar-width:thin;scrollbar-color:rgba(244,236,224,.13) transparent}
/* 스크롤바는 얇고 배경에 녹아들게 — 있는 듯 없는 듯 */
.chat-msgs::-webkit-scrollbar{width:5px}
.chat-msgs::-webkit-scrollbar-track{background:transparent}
.chat-msgs::-webkit-scrollbar-thumb{background:rgba(244,236,224,.13);border-radius:3px}
.chat-msgs::-webkit-scrollbar-thumb:hover{background:rgba(244,236,224,.26)}
.chat-line{font-size:13.5px;line-height:1.4;word-break:break-word}
.chat-line .who{font-weight:700;color:var(--accent2);margin-right:5px}
.chat-line.host .who{color:var(--host)}
.chat-line.mine .who{color:var(--accent)}
.chat-empty{color:var(--muted);font-size:13px;text-align:center;margin:auto 0}
.chat-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-input input{flex:1;min-width:0;padding:10px 12px;border-radius:9px;border:1px solid var(--line2);
  background:var(--field);color:var(--txt);font-size:14px}
.chat-input input:focus{outline:none;border-color:var(--accent)}
#chatBtn.has-unread{position:relative}
#chatBtn.has-unread:after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;
  border-radius:50%;background:var(--danger);border:1px solid var(--panel)}
/* 하단은 한 번에 하나만 — 좁은 폭에서 채팅 패널은 리액션 바를 그대로 덮는다(room.js 가 body.chat-open 을 켠다) */
@media(max-width:520px){ body.room.chat-open .react-wrap{display:none} }
@media(max-width:520px){
  /* 키보드가 올라와 --vh(보이는 높이)가 확 줄어도 메시지 목록이 안 뭉개지게 최소 높이를 둔다 (TSK-0903) */
  .chat-panel{left:8px;right:8px;width:auto;bottom:calc(8px + var(--safe-b));height:max(150px, min(calc(var(--vh) * .23),170px))}
  /* 헤더는 빼고(공간 확보), 닫기 버튼만 우상단에 작게 띄운다 — 채팅창인 게 뻔하니 제목 불필요 */
  .chat-head{padding:0;border-bottom:none}
  .chat-head span{display:none}
  .chat-x{position:absolute;top:4px;right:13px;z-index:2;width:24px;height:24px;padding:0;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:rgba(0,0,0,.35);font-size:14px}
  .chat-msgs{padding-top:26px}
}

/* ---------- 로딩 스피너 ---------- */
.spinner-overlay{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(600px 400px at 50% 38%,#2B2117,#181310)}
.spinner-ring{width:54px;height:54px;border-radius:50%;
  border:5px solid rgba(255,110,77,.2);border-top-color:var(--accent);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-overlay p{color:var(--muted);font-size:15px;font-weight:600;margin:0;
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- 토스트 ---------- */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#2E2419;color:#fff;border:1px solid var(--line2);padding:10px 18px;border-radius:22px;font-size:14px;z-index:60;
  opacity:0;pointer-events:none;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* 팝업이 열려 있을 때는 화면 위쪽에 띄운다 — 아래쪽 버튼(닫기 등)이 가려지는 걸 막는다 (TSK-0779) */
.toast.toast-top{bottom:auto;top:16px;transform:translateX(-50%) translateY(-14px)}
.toast.toast-top.show{transform:translateX(-50%) translateY(0)}

/* ---------- 데스크탑 ---------- */
@media(min-width:760px){
  .host-toolbar{left:auto;right:12px;bottom:12px;border-radius:14px;border:1px solid var(--line);flex-direction:column;align-items:stretch;width:190px}
  .edit-panel{left:auto;right:12px;bottom:auto;top:66px;width:300px}
}

/* ══════════════ 게임 (마니또) ══════════════
   화면은 «바텀시트 하나». 모달(inset:0)을 안 쓰는 이유 — 마니또는 «누가 어디 있는지»와
   떼어놓을 수 없어서 지도가 살아 있어야 한다. 위쪽 200px 는 지도에 양보한다. */
.tb-more-sep{height:1px;background:var(--line);margin:5px 4px}
.tb-more-item.gm-item{position:relative;color:var(--accent2)}
.gm-dot{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:7px;height:7px;
  border-radius:50%;background:var(--accent);display:none}
.gm-dot.on{display:block}

/* 진행 중 스트립 — pwa-pill 과 같은 층(z9), 상단 중앙 */
.game-strip{position:fixed;top:98px;left:50%;transform:translateX(-50%);z-index:9;
  display:flex;align-items:center;gap:7px;max-width:calc(100vw - 24px);
  background:rgba(255,110,77,.16);border:1px solid rgba(255,110,77,.42);border-radius:999px;
  padding:6px 14px;backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer}
.game-strip .gs-txt{font-size:12.5px;font-weight:800;color:var(--accent);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.game-strip .gs-dot{width:7px;height:7px;border-radius:50%;background:var(--accent2);flex:none}
.game-strip .gs-go{font-size:16px;line-height:1;color:var(--accent);flex:none;opacity:.8}
.game-strip:active{transform:translateX(-50%) scale(.96)}
/* 게임창을 닫았을 때만 «여기를 누르면 다시 열려요» 를 몸으로 알린다.
   열려 있는 동안 계속 깜빡이면 잔소리가 된다 — 닫힌 동안만. */
.game-strip.callout{animation:gsCallout 2.4s ease-out 3}
@keyframes gsCallout{
  0%{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(255,110,77,.55)}
  12%{transform:translateX(-50%) scale(1.06)}
  24%{transform:translateX(-50%) scale(1)}
  55%{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 14px rgba(255,110,77,0)}
  100%{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(255,110,77,0)}
}
@media(prefers-reduced-motion:reduce){.game-strip.callout{animation:none;border-color:var(--accent)}}

/* 시트 본체 — z14: 멤버 패널(13)보다 위, 모달(50)보다 아래 */
.game-sheet{position:fixed;left:0;right:0;bottom:0;z-index:14;
  max-height:min(72vh,560px);display:flex;flex-direction:column;
  background:var(--panel);border-top:1px solid var(--line2);border-radius:20px 20px 0 0;
  box-shadow:0 -18px 48px rgba(0,0,0,.55);
  transform:translateY(101%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  padding-bottom:var(--safe-b)}
.game-sheet.open{transform:none}
/* 세 번째 상태 — 최소화. 높이를 고정하지 않고 «남는 내용만큼»만 차지한다.
   예전엔 184px 로 못박아서, 참가자 화면처럼 내용이 짧으면 아래가 텅 비어 붕 떠 보였다. */
.game-sheet.peek{transform:none}
.game-sheet.peek .gs-body{display:none}
/* 🔴 범위 세그먼트와 «지금 뭘 골랐는지» 요약이 사는 자리.
   peek 로 내려가면 .gs-body 가 통째로 숨으므로, 화면을 계속 바꿀 수 있어야 하는 것(세그먼트)은
   반드시 여기 있어야 한다 — body 에 두면 테이블을 고르는 순간 다시 못 바꾼다. */
.gs-peek{display:none;flex:none;padding:0 16px 12px}
.gs-peek.on{display:block}
.gs-peek .g-seg{margin:0 0 10px}
.gs-peek b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.gs-peek span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.gs-peek .g-pill{display:inline-block;font-size:11.5px;font-weight:800;color:var(--green);
  background:rgba(79,205,140,.18);border:1px solid rgba(79,205,140,.45);
  padding:2px 9px;border-radius:11px;margin-left:7px;vertical-align:2px}
/* 헤더 — 무슨 게임인지 이름이 있고, 접기·닫기가 «눈에 보이는 버튼»으로 있다.
   예전엔 가운데 손잡이를 탭해야 접혔는데 그걸 알 방법이 없었다.
   본문과 헤더가 붙어 보이지 않게 아래에 선을 긋고 살짝 다른 바닥색을 준다. */
.gs-head{flex:none;display:flex;align-items:center;gap:6px;padding:11px 10px 11px 16px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));
  border-radius:20px 20px 0 0}
.gs-h-title{flex:1;min-width:0;font-size:15.5px;font-weight:800;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
.gs-back-h{flex:none;width:32px;height:36px;padding:0;border:0;background:transparent;
  color:var(--muted);display:flex;align-items:center;justify-content:center;margin-left:-6px}
.gs-back-h svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.gs-back-h:hover{color:var(--txt)}
.gs-min,.gs-x{flex:none;width:36px;height:36px;padding:0;border-radius:10px;
  border:1px solid var(--line2);background:var(--field);color:var(--muted);
  display:flex;align-items:center;justify-content:center;transition:.14s}
.gs-min svg,.gs-x svg{width:18px;height:18px;display:block;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gs-min svg{transition:transform .24s cubic-bezier(.32,.72,0,1)}
.gs-min:hover,.gs-x:hover{color:var(--txt);border-color:#5a4636;background:var(--panel2)}
.gs-x:hover{color:var(--danger);border-color:rgba(240,119,106,.5)}
.gs-min:active,.gs-x:active{transform:scale(.92)}
/* 접힌 상태에서는 «펼치기»가 되므로 화살표가 위를 본다 */
.game-sheet.peek .gs-min svg{transform:rotate(180deg)}
.gs-head+.gs-peek{padding-top:12px}
/* 접었는데 아래에 아무 내용도 없으면 구분선이 허공에 뜬다 — 그럴 땐 선을 지운다 */
.game-sheet.peek .gs-peek:not(.on)+.gs-cta:empty{display:none}
.game-sheet.peek:has(.gs-peek:not(.on)):has(.gs-cta:empty) .gs-head{border-bottom:0}
/* 본문 위쪽에도 숨 쉴 틈 */
.gs-head+.gs-body{padding-top:14px}
/* 🔴 body.room 의 touch-action:none 때문에 여기 pan-y 를 «명시»해야 스크롤된다 */
.gs-body{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
  overscroll-behavior:contain;padding:0 16px 14px}
.gs-cta{flex:none;padding:11px 16px calc(11px + var(--safe-b));border-top:1px solid var(--line);
  background:var(--panel);display:flex;gap:8px;flex-direction:column}
.gs-cta .btn{width:100%;min-height:54px;font-size:16px}
.gs-cta .btn.sm{min-height:40px;font-size:13.5px}
.gs-title{font-size:19px;font-weight:800;margin:4px 0 5px;letter-spacing:-.02em}
.gs-sub{color:var(--muted);font-size:12.8px;margin:0 0 14px}
.gs-back{background:none;border:0;color:var(--muted);font-size:13px;font-weight:700;padding:2px 0 8px}

/* 목록 카드 */
.g-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:14px 15px;margin-bottom:9px;color:var(--txt);font-family:inherit}
.g-card.pick{border-color:var(--accent)}
.g-card.live{border-color:var(--green);background:rgba(79,205,140,.09)}
.g-card.off{opacity:.55}
.g-card.past{opacity:.8;padding:11px 15px}
.g-card-ic{font-size:23px;flex:none}
.g-card-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.g-card-b b{font-size:15.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-card-b span{font-size:12.5px;color:var(--muted)}
.g-card-b em{font-size:11.5px;color:var(--dim,#7E6E5E);font-style:normal}
.g-chev{color:var(--muted);font-size:19px;flex:none}
.g-lock{font-size:14px;flex:none;opacity:.7}
.g-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;
  animation:livebeat 1.8s ease-out infinite}
.g-sec{font-size:12px;font-weight:800;color:var(--accent2);margin:18px 0 8px;display:flex;
  align-items:baseline;gap:8px}
.g-sec.sm{color:var(--muted)}
.g-sec em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted)}
.g-note{font-size:12.5px;color:var(--muted);margin:8px 0;line-height:1.6}
.g-hint{font-size:12px;color:var(--accent2);background:rgba(245,176,86,.1);
  border:1px solid rgba(245,176,86,.3);border-radius:10px;padding:9px 12px;margin:10px 0;font-weight:700}
.g-warn{font-size:12px;color:var(--accent2);background:rgba(245,176,86,.12);
  border:1px solid rgba(245,176,86,.4);border-radius:11px;padding:11px 13px;margin:14px 0 0;font-weight:700}
.g-empty{text-align:center;color:var(--dim,#7E6E5E);font-size:13px;padding:22px 10px}
.g-count{font-size:13px;font-weight:700;margin:12px 0 0}
.g-dim{color:var(--muted);font-weight:400}
.g-big{text-align:center;font-size:44px;font-weight:800;color:var(--accent);margin:10px 0 16px}
.g-big em{display:block;font-size:12.5px;font-weight:600;color:var(--muted);font-style:normal;margin-top:2px}

/* 세그먼트 (범위) */
.g-seg{display:flex;gap:4px;background:var(--field);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:6px 0 10px}
.g-seg-b{flex:1;min-height:42px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font-size:12.5px;font-weight:700;font-family:inherit;padding:0 6px}
.g-seg-b.on{background:var(--accent);color:#2A140C;font-weight:800}

/* 검색·필터·목록 (참가자 고르기 공통 부품) */
.g-search{display:flex;align-items:center;gap:9px;background:var(--field);
  border:1px solid var(--line2);border-radius:12px;padding:0 12px;margin:6px 0 9px}
.g-search span{font-size:14px;flex:none}
.g-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--txt);
  font-size:16px;padding:13px 0;outline:none}
.g-search button{border:0;background:var(--panel2);color:var(--muted);width:22px;height:22px;
  border-radius:50%;font-size:10px;flex:none}
.g-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.g-chip{min-height:32px;padding:0 14px;border-radius:16px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--muted);font-size:12px;font-weight:700;font-family:inherit}
.g-chip.on{background:var(--accent);border-color:transparent;color:#2A140C;font-weight:800}
.g-bulk{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 8px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.g-bulk span{font-size:11.5px;color:var(--dim,#7E6E5E)}
.g-bulk button{border:0;background:none;color:var(--accent);font-size:12px;font-weight:800;font-family:inherit}
.g-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;min-height:56px;
  background:var(--panel2);border:1px solid transparent;border-radius:12px;padding:8px 12px;
  margin-bottom:7px;color:var(--txt);font-family:inherit}
.g-row.sel{border-color:var(--accent);background:rgba(255,110,77,.08)}
.g-row.off{opacity:.5;background:var(--field)}
.g-av{width:34px;height:34px;border-radius:50%;flex:none;display:block}
.g-av.big{width:74px;height:74px}
.g-row-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.g-row-b b{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-row-b em{font-size:11.5px;color:var(--muted);font-style:normal;display:flex;align-items:center;gap:5px}
.g-row-b em i.on{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.g-chk{width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:transparent}
.g-chk.on{background:var(--accent);border-color:transparent;color:#2A140C}

/* 모일 자리 — 참가자를 고르는 방법과 «별개»라 눈에 따로 잡히게 */
.g-gather{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:64px;
  background:var(--panel2);border:1px dashed var(--line2);border-radius:14px;padding:12px 15px;
  margin:2px 0 4px;color:var(--txt);font-family:inherit}
.g-gather.set{border-style:solid;border-color:var(--host);background:rgba(245,176,86,.08)}
.g-gather.auto{border-style:solid;border-color:var(--line2);flex-direction:column;align-items:flex-start;gap:2px}
.g-gather-ic{font-size:21px;flex:none}
.g-gather-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.g-gather b{font-size:15px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-gather em{font-size:11.5px;color:var(--muted);font-style:normal}

/* 토글 (나도 참여) */
.g-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--panel2);border:1px solid var(--green);border-radius:14px;padding:14px 15px;margin:6px 0}
.g-toggle b{display:block;font-size:14.5px;font-weight:800}
.g-toggle span{font-size:11.5px;color:var(--muted)}
.g-sw{width:52px;height:30px;border-radius:15px;background:var(--line2);flex:none;position:relative;transition:.18s}
.g-sw::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:var(--panel);transition:.18s}
.g-sw.on{background:var(--green)}
.g-sw.on::after{left:25px;background:#0F1A12}

/* 탭 */
.g-tabs{display:flex;gap:4px;background:var(--field);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:6px 0 12px}
.g-tab{flex:1;min-height:42px;border:0;border-radius:9px;background:transparent;position:relative;
  color:var(--muted);font-size:12.3px;font-weight:700;font-family:inherit;padding:0 4px}
.g-tab.on{background:var(--accent);color:#2A140C;font-weight:800}
.g-badge{position:absolute;top:5px;right:6px;min-width:16px;height:16px;border-radius:8px;
  background:var(--accent2);color:#2A140C;font-size:9.5px;font-weight:800;font-style:normal;
  display:flex;align-items:center;justify-content:center;padding:0 4px}
.g-tab.on .g-badge{background:#2A140C;color:var(--accent2)}

/* 봉투 */
.g-envelope{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:100%;min-height:190px;background:var(--panel2);border:2px solid var(--accent2);
  border-radius:18px;color:var(--txt);font-family:inherit;padding:20px;margin:4px 0 12px;
  background-image:linear-gradient(160deg,rgba(245,176,86,.08),transparent 60%)}
.g-envelope .g-env-ic{font-size:44px;line-height:1}
.g-envelope b{font-size:16.5px;font-weight:800;color:var(--accent2);margin-top:6px}
.g-envelope em{font-size:11.5px;color:var(--dim,#7E6E5E);font-style:normal}

/* 대상 카드 */
.g-target{display:flex;align-items:center;gap:16px;background:var(--panel2);
  border:1px solid var(--host);border-radius:16px;padding:16px;margin:4px 0 10px}
/* 봉투를 연 순간 «뒤집히며» 나온다 — 결과가 그냥 툭 나타나면 여는 맛이 없다 */
.g-target.reveal{animation:gTargetFlip .62s cubic-bezier(.2,.8,.25,1)}
@keyframes gTargetFlip{
  0%{transform:perspective(700px) rotateY(-88deg) scale(.94);opacity:0;
     box-shadow:0 0 0 0 rgba(245,176,86,.6)}
  60%{opacity:1}
  100%{transform:perspective(700px) rotateY(0) scale(1);opacity:1;
     box-shadow:0 0 0 6px rgba(245,176,86,0)}
}
/* 봉투는 «열어달라»고 살짝 숨쉰다 — 다만 «영원히»는 잔소리다. 여덟 번(약 21초)만 하고 멎는다. */
.g-envelope{animation:gEnvBreath 2.6s ease-in-out 8}
@keyframes gEnvBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
.g-envelope:active{transform:scale(.97)}
.g-envelope .g-env-ic{animation:gEnvNudge 2.6s ease-in-out 8}
@keyframes gEnvNudge{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){
  .g-target.reveal,.g-envelope,.g-envelope .g-env-ic{animation:none}
}
.g-target-b{flex:1;min-width:0}
.g-target-b b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em}
.g-target-b em{display:block;font-size:12.5px;color:var(--muted);font-style:normal;margin:2px 0 9px}
.g-mini{border:1px solid var(--line2);background:var(--field);color:var(--host);
  font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:10px;font-family:inherit}
.g-hide,.g-chat{width:100%;margin-top:7px}
.g-chat{border-color:rgba(111,168,220,.5);color:#6FA8DC}

/* 공지 */
.g-notice{background:var(--panel2);border:1px solid var(--line);border-radius:13px;
  padding:11px 14px;margin-bottom:8px}
.g-notice.sys{background:var(--field);border-style:dashed}
.g-notice em{display:block;font-size:11px;color:var(--dim,#7E6E5E);font-style:normal;margin-bottom:4px}
.g-notice p{margin:0;font-size:14px;line-height:1.55}
.g-compose{display:flex;gap:7px;margin-top:10px}
.g-compose input{flex:1;min-width:0;background:var(--field);border:1px solid var(--line2);
  border-radius:11px;color:var(--txt);font-size:16px;padding:11px 12px}
.g-compose .btn{flex:none;min-height:44px}

/* 힌트 */
.g-hintbox{background:rgba(185,140,224,.09);border:1px solid rgba(185,140,224,.45);
  border-radius:15px;padding:14px;margin:4px 0 10px}
.g-hintbox b{display:block;font-size:13.5px;font-weight:800;color:#B98CE0;margin-bottom:8px}
.g-hintbox textarea{width:100%;background:var(--field);border:1px solid var(--line2);
  border-radius:11px;color:var(--txt);font-size:16px;padding:11px;resize:none;font-family:inherit}
.g-hintbox-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.g-hintbox-f span{font-size:11px;color:var(--dim,#7E6E5E)}
.g-hintbox-f .btn.primary{background:linear-gradient(180deg,#B98CE0,#A272D4);color:#1A0F20;box-shadow:none}

/* 리더 도구 */
.g-leader-tag{font-size:12px;font-weight:800;color:var(--host);background:rgba(245,176,86,.15);
  border:1px solid rgba(245,176,86,.4);border-radius:10px;padding:8px 12px;margin:0 0 12px}
.g-bar{height:13px;border-radius:7px;background:var(--field);overflow:hidden;border:1px solid var(--line)}
.g-bar i{display:block;height:100%;background:var(--green);transition:width .3s}
.g-tools{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.g-tool{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:13px;color:var(--txt);
  font-size:12.5px;font-weight:700;font-family:inherit}
.g-tool span{font-size:19px}

/* 공개 결과 */
.g-pairs{display:flex;flex-direction:column;gap:6px}
.g-pair{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:10px 13px;font-size:14px}
.g-pair b{font-weight:800}
.g-pair i{color:var(--host);font-style:normal;font-weight:800}
.g-pair span{color:var(--muted)}

/* 초대 카드 · 배너 · 되돌리기 토스트 */
.game-invite{position:fixed;left:12px;right:12px;top:66px;z-index:16;display:none;
  background:var(--panel);border:2px solid var(--accent);border-radius:18px;padding:16px 18px;
  box-shadow:0 16px 44px rgba(0,0,0,.55);max-width:420px;margin:0 auto}
.game-invite.show{display:block;animation:viralIn .35s ease-out}
.game-invite .gi-h{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:800}
.game-invite .gi-ic{font-size:22px}
.game-invite .gi-sub{color:var(--muted);font-size:13px;margin:8px 0 14px}
.game-invite .gi-btns{display:flex;gap:9px}
.game-invite .gi-btns .btn{flex:1;min-height:46px}
.game-banner{position:fixed;left:14px;right:14px;top:64px;z-index:15;max-width:420px;margin:0 auto;
  background:rgba(245,176,86,.17);border:1.5px solid rgba(245,176,86,.6);border-radius:16px;
  padding:13px 16px;backdrop-filter:blur(8px);display:none;text-align:center}
.game-banner.show{display:block;animation:viralIn .35s ease-out}
.game-banner b{display:block;font-size:15.5px;font-weight:800;color:var(--accent2)}
.game-banner span{display:block;font-size:12px;color:var(--txt);margin-top:3px}
.game-banner .gb-undo{margin-top:9px;border:1px solid rgba(245,176,86,.55);background:transparent;
  color:var(--accent2);font-size:12.5px;font-weight:800;font-family:inherit;
  padding:8px 18px;border-radius:10px;min-height:38px}
.game-undo{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + var(--safe-b));z-index:15;
  display:none;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line2);
  border-radius:14px;padding:11px 14px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100vw - 28px)}
.game-undo.show{display:flex}
.game-undo span{font-size:12.5px;color:var(--muted);white-space:nowrap}
.game-undo button{border:0;background:none;color:var(--accent);font-size:12.5px;font-weight:800;font-family:inherit}

/* 하단은 한 번에 하나 — 게임 시트가 열리면 나머지를 접는다 */
body.room.game-open .react-wrap,
body.room.game-open .viral-pill,
body.room.game-open .host-toolbar-toggle,
body.room.game-open .host-toolbar,
body.room.game-open .chat-panel{display:none !important}
/* 범위 고르기 중에는 지도를 최대한 열어 준다 */
body.room.game-open .zoom-ctl{display:none}

@media(min-width:760px){
  .game-sheet{left:auto;right:16px;bottom:16px;width:380px;border-radius:18px;
    max-height:min(76vh,620px);padding-bottom:0}
  .game-sheet.peek{transform:none}
  .gs-cta{padding-bottom:12px}
  .game-invite{right:16px;left:auto;width:380px;margin:0}
}