/* 인터컴 화면 — 디자인 「무대 자막」(대표 승인 2026-11-06 — 캔버스 시안 S3 「무대 자막」을 앱에 적용).
   콘셉트: 공연 무대 자막. 검정 무대(밝은 판은 종이색)에 「지금 말하는 사람」 이름이 가장 굵은 큰 글자로 뜬다(#stage — stage.js).
   강조색 0개 — 상태는 밝기 반전 · 글자 굵기 · 채운/빈 네모(10px)로만 말한다. 상자(카드) 대신 가는 선. 색은 이벤트패스 로고 띠에만.
   판은 휴대폰 설정(밝은/어두운 모드)을 따른다 — 단추 없음. 내가 누르는 동안만 화면 전체가 뒤집힌다(<html class="is-live"> — 조명).
   시각 SSOT: intercom/DESIGN.md. 문구는 app.js 의 KO 한 곳 — 이 파일엔 글자 0(content 는 빈 문자열만).
   시니어 1순위: 본문 17px↑ · 보조 15px↑ · 누를 곳 44px↑(e2e 16) · 말하기 막대가 방 화면에서 가장 크다 · 색 단독 신호 금지.
   인라인 style 0(CSP style-src 'self') — 움직이는 막대 높이는 stage.js 가 CSSOM(el.style.transform)으로만 바꾼다. 아이콘 그림은 data: SVG(img-src data:). */

/* 숫자 글꼴 — Barlow Condensed SemiBold(OFL — public/fonts/OFL-BarlowCondensed.txt) 숫자·콜론·빗금·빈칸만 6,508바이트. CSP default-src 'self' 라 자체 호스팅.
   한글은 받지 않는다(휴대폰 기본 글꼴). 글꼴이 늦게 오면 기본 글꼴 숫자로 먼저 그린다(swap) */
@font-face {
  font-family: "Intercom Num";
  src: url("/fonts/barlow-condensed-600-digits.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20, U+2F-3A;
}

:root {
  /* 어두운 판(기본) — 대비는 DESIGN.md 1절(계산값: 글자 4.5:1 · 단독 조작 경계 3:1 이상) */
  --bg: #060606;
  --text: #f2eee6;
  --text-2: #8e8a82;
  --line: #242321;         /* 가는 선(장식 — 구조를 나눈다) */
  --ctl: #6e6b65;          /* 단독 조작 경계 3:1(빈 네모 · 못 누르는 막대 테 · 번호 빈 칸 밑줄) */
  --scrim: rgba(0, 0, 0, 0.66);
  --saver-ink: #7d7d7d;    /* 절전 화면 글자·초점 고리 — 검정 위 5.10(절전 화면은 두 판 모두 검정) */
  --gut: 16px;             /* 좌우 여백 */
  /* 말하기 막대 높이 — 여기엔 vh 만(아래 @supports 에서 svh 로 덮는다). e2e 하한 세로 120px · 가로 96px */
  --ptt-h: clamp(120px, 17.3vh, 146px);
  --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --num: "Intercom Num", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  /* 마스크 아이콘(글자색을 따른다) */
  --i-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Crect x='9' y='2.5' width='6' height='11.5' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7'/%3E%3C/svg%3E");
  --i-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Cpath d='M4 8h15M15 4l4 4-4 4M20 16H5M9 12l-4 4 4 4'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
  --i-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'%3E%3Cpath d='M12 3.5L21.5 20h-19zM12 10v4.5M12 17.3v.2'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.8'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E");
  --i-ear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Cpath d='M7 10a5 5 0 0 1 10 0c0 3-3 3.5-3 6.5a2.5 2.5 0 0 1-5 0M10 10a2 2 0 0 1 4 0'/%3E%3C/svg%3E");
  --i-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20.5c.8-3.8 3.9-6 7.5-6s6.7 2.2 7.5 6'/%3E%3C/svg%3E");
  --i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M9.4 9.4a2.7 2.7 0 0 1 5.2 1c0 1.8-2.6 2.2-2.6 3.9M12 17.2v.2'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2'%3E%3Cpath d='M4 20h4.2L19.4 8.8a2.1 2.1 0 0 0 0-3l-1.2-1.2a2.1 2.1 0 0 0-3 0L4 15.8z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-linecap='round' stroke-width='2.6'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  /* 밝은 색으로 칠한 아이콘(도움말 항목 왼쪽 칸 안 — 칸 배경과 아이콘을 한 의사 요소에 그리려고 색을 박았다) */
  --c-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E");
  --c-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Crect x='9' y='2.5' width='6' height='11.5' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7'/%3E%3C/svg%3E");
  --c-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M8 13.5V6.5a1.5 1.5 0 0 1 3 0V11M11 11V4.5a1.5 1.5 0 0 1 3 0V11M14 11V5.8a1.5 1.5 0 0 1 3 0V12.5M17 10.5a1.5 1.5 0 0 1 3 0v3.5a7 7 0 0 1-7 7h-.8a6 6 0 0 1-4.9-2.6L4.4 15.6a1.6 1.6 0 0 1 2.5-2L8 15'/%3E%3C/svg%3E");
  --c-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4'/%3E%3C/svg%3E");
  --c-screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M13.6 9.2a2.9 2.9 0 1 0 1.6 5.2 3.4 3.4 0 0 1-1.6-5.2z'/%3E%3C/svg%3E");
  --c-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M4 9.5v5h3.5l4.5 3.5v-12L7.5 9.5z'/%3E%3Cpath d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/%3E%3C/svg%3E");
  --c-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3' y='14' width='4.5' height='6.5' rx='1.5'/%3E%3Crect x='16.5' y='14' width='4.5' height='6.5' rx='1.5'/%3E%3C/svg%3E");
  --c-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 7.8-7.5 9.5-4.3-1.7-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E");
  --c-bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f1fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'%3E%3Cpath d='M5 19v-3M10 19v-6M15 19v-9M20 19V5'/%3E%3C/svg%3E");
  color-scheme: dark;
}
/* 밝은 판 — 휴대폰이 밝은 모드일 때(종이색 무대) */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3efe6;
    --text: #0e0d0c;
    --text-2: #5f5b54;
    --line: #dad4c8;
    --ctl: #8a857c;
    --scrim: rgba(0, 0, 0, 0.4);
    color-scheme: light;
  }
}
/* 조명 — 내가 누르는 동안(말하기 막대 aria-pressed · 「전체에 말하기」 누름)만 화면 전체를 뒤집는다. stage.js 가 <html> 에 붙인다(body 바탕까지).
   핸즈프리는 뒤집지 않는다(말소리 감지가 열릴 때마다 큰 화면이 번쩍이면 광과민·피로 위험) */
:root.is-live {
  --bg: #efe9dc;
  --text: #0b0b0a;
  --text-2: #5d5951;
  --line: #d3ccbe;
  --ctl: #8a857c;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root.is-live {
    --bg: #0e0d0c;
    --text: #f3efe6;
    --text-2: #9a958c;
    --line: #2a2927;
    --ctl: #6e6b65;
    color-scheme: dark;
  }
}
@supports (height: 1svh) {
  :root { --ptt-h: clamp(120px, 17.3svh, 146px); }
}
@media (min-width: 375px) {
  :root { --gut: 20px; }
}
/* 방 화면에서 Tab·화면 읽기 초점이 고정 하단(아래 판) 뒤로 숨지 않게 — 초점이 가면 판 높이만큼 위에 오도록 스크롤 */
html:has(#screen-room:not([hidden])) { scroll-padding-bottom: calc(var(--ptt-h) + 160px + env(safe-area-inset-bottom)); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
html { font-family: var(--font); font-size: 18px; line-height: 1.45; -webkit-text-size-adjust: 100%; word-break: keep-all; overflow-wrap: anywhere; }
body { min-height: 100%; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
button, input, summary { font: inherit; color: inherit; }
button { margin: 0; touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; }
summary { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
p, h1, h2 { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 조명이 켜지고 꺼질 때 바탕·글자색만 180ms 로 바뀐다(크기·자리는 그대로). 움직임 줄이기면 0(맨 아래) */
html, body, .screen-room, .screen-room * { transition: background-color 180ms ease-out, color 180ms ease-out, box-shadow 180ms ease-out; }

/* 키보드 초점 — 모든 조작에(색 없이 글자색 고리) */
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

.app { display: flex; flex-direction: column; min-height: 100%; min-height: 100dvh; width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--gut); padding-top: env(safe-area-inset-top); padding-left: max(var(--gut), env(safe-area-inset-left)); padding-right: max(var(--gut), env(safe-area-inset-right)); }
.screen { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 100%; min-height: calc(100vh - env(safe-area-inset-top)); min-height: calc(100dvh - env(safe-area-inset-top)); }

/* ── 아이콘 · 네모 ──────────────────────────────────────────────── */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: 0 0 auto; }
.ico-spin { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* 글 앞 아이콘(장식) — 내용 없는 ::before 라 화면 읽기에 잡히지 않는다 */
.has-ico { display: flex; align-items: flex-start; gap: 10px; }
.has-ico::before { content: ""; flex: none; width: 1.2em; height: 1.2em; margin-top: 0.1em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-mic { --i: var(--i-mic); }
.i-swap { --i: var(--i-swap); }
.i-phone { --i: var(--i-phone); }
.i-warn { --i: var(--i-warn); }
.i-check { --i: var(--i-check); }
.i-info { --i: var(--i-info); }
.i-ear { --i: var(--i-ear); }
.i-person { --i: var(--i-person); }
/* 상태 줄 앞 네모(10px) — 채운 네모 = 지금 그런 상태 · 빈 네모 = 사실 한 줄. 아이콘 대신 이 화면의 공통 표시다 */
.chip.has-ico::before, .note-strong.has-ico::before, .note-empty.has-ico::before, .foot-note.has-ico::before, .reason.has-ico::before,
.band-main.has-ico::before, .card-warn .has-ico::before {
  width: 10px; height: 10px; margin-top: 0.42em; -webkit-mask: none; mask: none; background-color: currentColor;
}
.chip.has-ico::before, .note-empty.has-ico::before { background-color: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
#listen-only-note.has-ico::before, #ptt-other.has-ico::before { background-color: currentColor; box-shadow: none; }

/* 숨김 재생 요소 — display:none 금지(원격 소리 요소는 그려져 있어야 재생이 막히지 않는다) */
.audio-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }

/* ── 글자 ───────────────────────────────────────────────────────── */
.label, .slate-lbl { display: block; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-2); }
.note { font-size: 17px; line-height: 1.45; color: var(--text); }
.note-dim { color: var(--text-2); }
/* 안내 줄(#notice) — 상자 없이 채운 네모 + 글자 */
.note-strong { font-weight: 700; }
.note-empty { color: var(--text-2); font-weight: 600; }
/* 결과 줄(#g-note) — 기본은 중립 안내 모양(i). 바로 아래 주소 줄(#g-url)이 숨어 있으면 성공(체크), 보이면 실패(세모) — 색 없이 그림만.
   :has 를 모르는 브라우저는 중립 모양 — 성공·실패 어느 쪽도 거꾸로 말하지 않는다 */
.note-result { padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 700; --i: var(--i-info); }
.note-result:has(+ .url-text[hidden]) { --i: var(--i-check); }
.note-result:has(+ .url-text:not([hidden])) { --i: var(--i-warn); }
.fine { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.reason { font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--text); }
.big-text { font-size: 19px; line-height: 1.5; font-weight: 700; color: var(--text); }
.url-text { font-size: 17px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.selectable { user-select: all; -webkit-user-select: all; }
/* 사실 한 줄(들어옴·나감 · 복사함 · 받은 번호 · 듣기만) — 상자 없이 네모 + 글자 */
.chip { font-size: 15px; line-height: 1.45; font-weight: 700; color: var(--text); }
.foot-note { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--text-2); }
.help-attn { font-weight: 700; }

/* ── 버튼 ───────────────────────────────────────────────────────── */
/* 기본 = 테두리 단추(안쪽 2px 글자색 테 — box-shadow 라 상자 크기는 늘 같다). 주 단추 = 글자색으로 채움 + 바탕색 글자 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; min-width: 48px; padding: 8px 20px; border: 0; border-radius: 6px; background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text); font-size: 18px; line-height: 1.25; font-weight: 800; text-align: center; }
.btn .ico { width: 1.3em; height: 1.3em; vertical-align: 0; }
.btn-ico .btn-ico-slot { display: inline-flex; flex: none; }
.btn-lg { min-height: 56px; }
.btn-xl { min-height: 60px; font-size: 19px; }
.btn:active:not(:disabled) { background: var(--line); }
.btn-primary, .btn-danger { background: var(--text); color: var(--bg); box-shadow: none; }
.btn-primary:active:not(:disabled), .btn-danger:active:not(:disabled) { background: var(--text-2); }
.btn-secondary { background: transparent; color: var(--text); }
.btn-ghost { box-shadow: inset 0 0 0 1.5px var(--ctl); font-weight: 700; }
/* 지금은 못 누름: 채움 없음 · 흐린 테 · 흐린 글자(이유 글자가 따로 말한다) */
.btn:disabled { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--ctl); cursor: not-allowed; }
.row { display: flex; gap: 12px; }
.row > .btn { flex: 1 1 0; }

/* 아이콘만 있는 단추(도움말) — 44×44 · 테두리 없음 · 이름은 화면 읽기에만 */
.cap-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text); }
.cap-ico { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.cap-ico .ico { width: 21px; height: 21px; vertical-align: 0; }
.cap-ico.i-help::before { content: ""; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--i-help) center / contain no-repeat; mask: var(--i-help) center / contain no-repeat; }
.cap-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cap-btn:active { background: var(--line); }

/* ── 카드 → 선 묶음 ──────────────────────────────────────────────── */
/* 상자 대신 위아래 가는 선(오류 · 비보안 주소 · 같은 번호로 새로 만들기 · 초대 폴백) */
.card { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card-quiet { gap: 6px; }
.card-quiet .code-display { font-size: 36px; line-height: 40px; }
.overlay { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 16px; padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 50; overflow: auto; }
/* 전면 카드(E·F·G) — 뒤가 어두워 판이 필요하다: 바탕색 판 + 조작 경계 테 */
.card-full { width: 100%; max-width: 520px; margin: auto 0; padding: 24px 20px 20px; gap: 14px; border: 0; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--ctl), 0 24px 60px -24px rgba(0, 0, 0, 0.6); }
.card-full .big-text { font-size: 21px; line-height: 1.5; }

/* ── 띠 — 지금 무엇인지(설명이 아니다) ─────────────────────────────
   핸즈프리(마이크가 계속 켜져 있다)·전체 방송(내 채널 밖에서 소리가 온다) = 반전 띠(글자색 바탕 + 바탕색 글자 + 채운 네모).
   서버와 다시 잇는 중 = 테두리 띠(반전이 아니다 — 내 소리·남의 소리 상태와 구분) */
.band { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 4px; font-size: 15px; line-height: 22px; font-weight: 800; }
.band-ico { display: inline-flex; flex: none; }
.band-ico .ico { width: 1.25em; height: 1.25em; vertical-align: 0; }
.band-ws { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
.band-hf, .band-all { background: var(--text); color: var(--bg); }
.band-main { font-size: 15px; line-height: 22px; font-weight: 800; }

/* ── 화면 A(입장) ────────────────────────────────────────────────── */
.screen-a { padding-bottom: 0; }
.a-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.a-brandline { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 이벤트패스 글자 로고 — 운영실 왼쪽 위와 같은 흰 띠(로고 104px · 띠 안쪽 8×12 · 모서리 10px). 두 판 모두 흰 띠(로고 색이 박혀 있다) — 이 화면에서 색은 여기뿐 */
.ep-band { display: inline-flex; align-items: center; flex: none; padding: 8px 12px; border-radius: 10px; background: #fff; line-height: 0; box-shadow: inset 0 0 0 1px rgba(20, 22, 25, 0.1); }
.ep-wordmark { display: block; width: 104px; height: 13px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.a-brand-sep, .a-brand-app { display: none; }
.title { margin: 30px 0 0; font-size: 78px; line-height: 80px; font-weight: 900; letter-spacing: -0.06em; }
.a-actions { flex: 0 0 auto; display: flex; flex-direction: column; padding-top: 34px; }   /* 바닥에 붙이지 않는다 — 남는 공간은 맨 아래에 자연스럽게 */
/* 이름 칸(2026-11-07) — 방 안 「이름 바꾸기」 칸과 같은 밑줄 모양, 글자는 번호보다 작게 */
.name-card { display: flex; flex-direction: column; margin-bottom: 28px; }
.name-card .label { margin-bottom: 6px; }
.name-input { height: 56px; padding: 0 2px; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; color: var(--text); font-size: 26px; font-weight: 800; }
.name-input:placeholder-shown { border-bottom-color: var(--ctl); }
.name-input::placeholder { color: var(--text-2); font-size: 22px; font-weight: 700; }
.name-input:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.join-card { display: flex; flex-direction: column; }
.join-card .label { margin-bottom: 10px; }
/* 방 목록(2026-11-07 — docs/방목록-설계.md). 번호 칸은 없앴다 — 들어가는 길은 초대받은 방 카드 · 지금 열린 방 목록 */
/* 초대받은 방(링크로 열었을 때만): 방 이름 크게 · 인원 작게 · 「이 방에 들어가기」가 화면에서 유일한 채운 단추 */
.invite-room { margin-bottom: 28px; }
.invite-room-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.invite-room-title { font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.invite-room-count { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-2); }
.invite-room-count:empty { display: none; }
#invite-room-note { margin-top: 6px; }
.btn-join { margin-top: 16px; min-height: 60px; font-size: 19px; }
/* 지금 열린 방 — 머리(이름표 · 새로 고침) · 줄마다 단추(방 이름 · 인원 · 만든 지, 오른쪽 꺾쇠). 줄 사이 가는 선 */
.room-list-card { display: flex; flex-direction: column; }
.room-list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.room-list-head .label { margin: 0; }
.cap-btn.btn-rooms-refresh { width: auto; margin-right: -8px; padding: 0 8px; }
.btn-rooms-refresh .cap-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 15px; line-height: 1.2; font-weight: 700; color: var(--text-2); }
.room-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.room-list:empty { display: none; }
.room-list > li { border-bottom: 1px solid var(--line); }
.room-row { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 64px; padding: 10px 36px 10px 0; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.room-row::after { content: ""; position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; background-color: var(--text-2); transform: rotate(-90deg); -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; }
.room-row-title { font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.room-row-meta { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-2); }
.room-row:active:not(:disabled) { background: var(--line); }
.room-row:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.room-row:disabled { color: var(--text-2); }
.room-list-note { margin-top: 10px; }
/* 새 방 만들기: 방 이름(선택) + 테두리 단추. 목록 다음 고정 간격 */
.a-foot { margin-top: 36px; }
.create-card { display: flex; flex-direction: column; }
.create-card .label { margin-bottom: 6px; }
.title-input { font-size: 22px; }
.title-fixed { margin: 0; min-height: 56px; display: flex; align-items: center; padding: 0 2px; border-bottom: 2px solid var(--line); font-size: 22px; line-height: 28px; font-weight: 800; overflow-wrap: anywhere; }   /* 칸과 같은 높이 — 바뀌어도 아래 단추가 움직이지 않게 */
.btn-create { margin-top: 16px; min-height: 60px; font-size: 19px; gap: 8px; }
.btn-create::before { content: ""; flex: none; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat; }
/* 초대받은 방이 떠 있으면 「이 방에 들어가기」가 유일한 굵은 단추가 되게 만들기를 한 단계 낮춘다(흐린 테 · 흐린 글자) */
.a-actions:has(#invite-room:not([hidden])) .btn-create:not(:disabled) { color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--ctl); }
/* 채널 크레딧 — 한 줄(세로 구분선은 그림) · 운영국의 「전체에 말하기」는 그 아래 작은 줄 */
.a-credits { margin-top: 22px; padding: 12px 0 calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.a-channels { position: relative; list-style: none; margin: 4px 0 0; padding: 0 0 24px; display: flex; flex-wrap: wrap; align-items: center; }
.a-ch { display: inline-flex; align-items: center; font-size: 17px; line-height: 26px; font-weight: 800; }
.a-ch + .a-ch::before { content: ""; flex: none; width: 1px; height: 15px; margin: 0 10px; background: var(--ctl); }
.a-ch-all { position: absolute; left: 0; bottom: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-2); }
@media (max-height: 700px) {
  .title { margin-top: 20px; font-size: 62px; line-height: 66px; }
  .a-actions { padding-top: 24px; }
  .a-foot { margin-top: 28px; }
  .a-credits { margin-top: 16px; }
}
/* 아주 낮은 화면(600px 이하 — 320×568 등) */
@media (max-height: 600px) {
  .a-bar { min-height: 48px; }
  .title { margin-top: 12px; font-size: 52px; line-height: 56px; }
  .a-actions { padding-top: 18px; }
  .btn-join { margin-top: 14px; min-height: 56px; }
  .btn-create { margin-top: 12px; min-height: 56px; }
  .room-row { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
  .a-foot { margin-top: 24px; }
  .a-credits { margin-top: 12px; padding-top: 8px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ── 방 화면 ─────────────────────────────────────────────────────── */
.screen-room { gap: 0; }
.room-main { flex: 1 0 auto; display: flex; flex-direction: column; min-width: 0; }
.room-head { display: flex; flex-direction: column; gap: 6px; container-type: inline-size; container-name: roomhead; }
/* 맨 윗줄 〔나가기 · 로고 · 도움말〕 — 로고가 가운데에 오게 세 칸(1fr auto 1fr) */
.room-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; min-height: 52px; padding-top: 4px; }
.room-top > .leave-area, .room-top > .head-btns { display: contents; }
.room-top .btn-leave { grid-column: 1; grid-row: 1; justify-self: start; }
.room-brand { grid-column: 2; grid-row: 1; justify-self: center; }
#btn-help-room { grid-column: 3; grid-row: 1; justify-self: end; margin-right: -8px; }   /* 칸을 박아 둔다 — 나가기 확인 중(나가기 숨김)에도 로고·도움말이 제자리 */
/* 나가기 — 글자 + 아이콘(빨강 아님). 44px */
.cap-btn.btn-leave { width: auto; margin-left: -4px; padding: 0 6px 0 4px; }
.btn-leave .cap-text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: 16px; line-height: 1.2; font-weight: 700; }
.leave-confirm { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.leave-confirm .big-text { font-size: 18px; }
/* 슬레이트 — 위아래 가는 선 · 두 칸(방 번호 | 채널). 방 번호 칸은 숫자 폭만큼, 채널 칸이 나머지 */
.slate { display: grid; grid-template-columns: max-content minmax(0, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.slate-cell { min-width: 0; min-height: 66px; padding-top: 8px; padding-bottom: 8px; display: flex; flex-direction: column; justify-content: center; }
.slate-code { padding-right: 14px; }
.slate-ch { padding-left: 14px; box-shadow: inset 1px 0 0 var(--line); }
.slate-ch:has(> .ch-badge[hidden]) { display: none; }   /* 채널을 고르기 전엔 칸째 없앤다(빈 칸·세로선이 남지 않게) */
/* 슬레이트 폭이 300px 보다 좁으면(320 폭 화면 등) 채널 칸을 숫자 아래 줄로 — 세로선 대신 위 가는 선.
   두 칸에 필요한 폭(측정): 숫자 칸 166~192px + 채널 칸 115~130px(이름 81~90px + 꺾쇠 자리 + 여백) */
@container roomhead (max-width: 299.98px) {
  .slate { grid-template-columns: minmax(0, 1fr); }
  .slate .slate-code { padding-right: 0; }                 /* .slate 을 앞에 붙여 아래 좁은 화면 여백 규칙보다 이긴다 */
  .slate .slate-ch { padding-left: 0; box-shadow: inset 0 1px 0 var(--line); }
}
/* 방 이름(슬레이트 위 한 줄 — 2026-11-07). 길면 줄을 바꾼다(20자까지) */
.room-title { margin: 2px 0 0; font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
/* 방 번호 = 숫자 글꼴(e2e 16 하한 36px) */
.code-display { font-family: var(--num); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; font-synthesis: none; white-space: nowrap; }
/* 지금 채널 이름표 — 글자는 채널 이름만(꺾쇠는 그림). 누르면 채널 고르기 시트 */
.ch-badge { position: relative; display: block; width: 100%; min-width: 0; min-height: 44px; padding: 0 26px 0 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 20px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-badge::after { content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background-color: var(--text-2); -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; }
.ch-badge:active { background: var(--line); }
/* 방 동작 — 오른쪽 정렬 글자 단추(아이콘 + 글자) */
.room-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 22px; }
.act { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 2px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 16px; line-height: 1.2; font-weight: 700; }
.act-ico { display: inline-flex; flex: none; }
.act-ico .ico { width: 21px; height: 21px; vertical-align: 0; }
.act:active:not(:disabled) { background: var(--line); }
.foot-note::before { width: 10px; height: 10px; }

/* ── 무대(#stage — stage.js) ───────────────────────────────────────
   아래 정렬(자막 자리): 큐 줄(네모 + 15px) → 자막(66px 900) → 보조 줄 → 소리 기록 선(2px 막대 60개) → (내가 말할 때만) 경과 시간 막대.
   무대는 남는 세로 공간을 차지해 자막을 판 바로 위로 내린다. 장면마다 자리 높이는 같다(보조 줄·경과 막대는 비어도 자리를 지킨다) */
.stage { --cap: clamp(44px, 7vh, 66px); --trace: clamp(40px, 6.4vh, 84px); flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 0 4px; }
/* 자막·기록 선 크기는 화면 높이(dvh)를 따른다 — 390×844 에서 자막 약 59px · 선 약 54px, 667 높이에서 47px · 43px(참가자 줄이 아래 판 위에 남게) */
@supports (height: 1dvh) {
  .stage { --cap: clamp(44px, 7dvh, 66px); --trace: clamp(40px, 6.4dvh, 84px); }
}
.stage-cue { display: flex; align-items: center; gap: 10px; min-height: 22px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--text-2); }
.stage-cue::before { content: ""; flex: none; width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px currentColor; }
.stage:not(.is-idle) .stage-cue { color: var(--text); }
.stage:not(.is-idle) .stage-cue::before { background: currentColor; box-shadow: none; }
.stage-blk.is-empty .stage-cue::before { visibility: hidden; }
/* 경과 시간 「00:07 / 2:00」 — 숫자 글꼴. 빗금은 그림(글자 아님) */
.stage-time { margin-left: auto; display: inline-flex; align-items: center; font-family: var(--num); font-size: 22px; line-height: 22px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; font-synthesis: none; color: var(--text); }
.stage-time-max { display: inline-flex; align-items: center; font-size: 16px; letter-spacing: 0.02em; color: var(--text-2); }
.stage-time-max::before { content: ""; flex: none; width: 1.5px; height: 15px; margin: 0 7px 0 8px; background: currentColor; transform: rotate(20deg); }
.stage-time-max:empty { display: none; }
.stage-cap { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin-top: 6px; font-size: var(--cap); line-height: 1.04; font-weight: 900; letter-spacing: -0.05em; color: var(--text); }
.stage-cap > span:first-child { min-width: 0; }
.stage-cap.cap-m { font-size: calc(var(--cap) * 0.8); }
.stage-cap.cap-s { font-size: calc(var(--cap) * 0.64); letter-spacing: -0.04em; }
.stage.is-idle .stage-cap { color: var(--text-2); }
.stage.is-claim .stage-cap { opacity: 0.72; }            /* 누른다고 알렸지만 소리는 아직 — 조금 흐리게(글자 자체는 늘 보인다) */
/* 작은 테두리 표 「전체」 · 내 이름 뒤 「(나)」는 테두리 없이 작게 */
.stage-tag { flex: none; padding: 3px 8px 4px; font-size: 18px; line-height: 20px; font-weight: 800; letter-spacing: 0; box-shadow: inset 0 0 0 1.5px currentColor; }
.stage-tag.is-self { padding: 0; font-size: calc(var(--cap) * 0.36); line-height: 1.15; box-shadow: none; }
.stage-sub { margin-top: 6px; min-height: 24px; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--text-2); }
/* 소리 기록 선 — 오른쪽이 지금, 왼쪽으로 흐른다. 높이는 stage.js 가 transform: scaleY 로만 */
.stage-trace { display: flex; align-items: center; justify-content: space-between; height: var(--trace); margin-top: 10px; }
.stage-trace i { flex: none; width: 2px; height: 100%; border-radius: 1px; background: var(--text); transform: scaleY(0.03); transition: transform 90ms linear, background-color 180ms ease-out; }
.stage.is-idle .stage-trace i { background: var(--text-2); }
.stage-limit { height: 2px; margin-top: 8px; overflow: hidden; background: var(--line); visibility: hidden; }
.stage.is-me .stage-limit { visibility: visible; }
.stage-limit i { display: block; height: 2px; background: var(--text); transform: scaleX(0); transform-origin: left center; }

/* ── 참가자 — 상자 없는 얇은 세로 목록(줄 최소 48px · 가는 구분선) ─────────
   줄: 네모(연결됨 = 채운 네모, 그 밖 = 빈 네모) + 이름 + 오른쪽 상태. 소리가 오는 줄은 글자색으로 올라선다. 나머지 줄은 이름 아래(들여서) */
.peers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.peer { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.peer > * { flex: 1 1 calc(100% - 20px); min-width: 0; margin-left: 20px; }
.peer > .peer-avatar { flex: none; margin-left: 0; width: 10px; height: 10px; overflow: hidden; font-size: 0; line-height: 0; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.peer:has(> .peer-status-connected) > .peer-avatar, :root.is-live .peer-self > .peer-avatar { background: currentColor; box-shadow: none; }
.peer:has(> .peer-sound:not([hidden])), :root.is-live .peer-self { color: var(--text); }
.peer > .peer-name { flex: 1 1 auto; margin-left: 0; font-size: 17px; line-height: 1.35; font-weight: 600; color: inherit; }
.peer > .peer-ch { flex: 0 0 auto; margin-left: 0; padding: 1px 7px; font-size: 15px; line-height: 1.4; font-weight: 700; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--ctl); }
.peer-line { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; font-weight: 600; }
.peer-line .ico { width: 1.1em; height: 1.1em; vertical-align: 0; }
/* 상태: 이름 옆에 들어가면 그 자리, 안 들어가면 다음 줄로 — 「{이름}와 다시 잇는 중」이 320px 에서 넘치지 않게 */
.peer > .peer-line[role="status"] { flex: 0 1 auto; max-width: 100%; margin-left: auto; min-height: 32px; color: var(--text-2); }
.peer-status-failed { color: var(--text); font-weight: 700; }
.peer-sub { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.peer-talking, .peer-sound, .peer-nosound { color: var(--text); font-weight: 700; }
.peer-talking.peer-talking-hf { font-weight: 600; }
.peer-listening { color: var(--text-2); }
/* 「듣는 중」은 상태 바로 뒤 같은 줄에(자리가 모자라면 다음 줄) — 상대 줄 높이를 한 줄(약 49px)로 지켜 참가자가 아래 판 위에 더 남게 */
.peer > .peer-listening { flex: 0 0 auto; margin-left: 0; min-height: 32px; }
.peer > .peer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.peer .peer-actions .btn { width: auto; min-height: 44px; padding: 6px 16px; font-size: 16px; }
/* 내 줄: 이름 오른쪽에 연필 단추(글자는 화면 읽기용 — 크기 0). 이름 바꾸기 칸은 다음 줄 전체 */
.peer-self > .peer-actions { display: contents; }
.peer-self > .peer-line { order: 3; }
.peer .peer-actions > .btn-rename { flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; margin: -6px -10px -6px auto; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0; gap: 0; }
.btn-rename::before { content: ""; width: 20px; height: 20px; background-color: var(--text-2); -webkit-mask: var(--i-pencil) center / contain no-repeat; mask: var(--i-pencil) center / contain no-repeat; }
.rename-form { order: 2; flex: 1 1 100%; margin: 6px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rename-form input { grid-column: 1 / -1; min-width: 0; height: 56px; padding: 0 2px; border: 0; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; color: var(--text); font-size: 20px; font-weight: 600; }
.peer .rename-form .btn { width: 100%; min-height: 56px; }
/* 빈 방 — 무대 보조 줄이 같은 말을 크게 한다(무대는 aria-hidden) → 화면에서는 감추고 화면 읽기에만 남긴다(두 번 보이지 않게) */
#empty-room { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#listen-only-note { padding-top: 10px; }

/* ── 아래 판 — 위 가는 선 · 스위치 두 칸 · 화면 폭 전체 말하기 막대 · 사유 한 줄 ─────────────
   글이 길면 위 영역이 스크롤되고 판은 화면 아래에 붙어 있다(sticky — 참가자 6명이어도 막대가 화면 안) */
.ptt-dock { position: sticky; bottom: 0; z-index: 5; margin: auto calc(-1 * var(--gut)) 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0 var(--gut) calc(18px + env(safe-area-inset-bottom)); background: var(--bg); color: var(--text); box-shadow: 0 -1px 0 var(--line); }
.ptt-dock > * { width: 100%; }
/* 이름을 고치는 동안은 고정을 푼다 — 화면 키보드가 올라와 화면이 줄면 고정 판이 입력칸을 덮었다 */
.screen-room:has(.rename-form:not([hidden])) .ptt-dock { position: static; }
.note-hf { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.note-hf .ico { width: 1.25em; height: 1.25em; vertical-align: 0; }
/* 스위치 두 칸 — 위에 이름, 아래 「켜짐/꺼짐」 + 네모(켜짐 = 채운 네모 · 굵은 글자색). 글자는 한 줄(꺾이지 않는다) */
.switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.btn-switch { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 58px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 15px; line-height: 20px; font-weight: 600; text-align: left; white-space: nowrap; }
.sw-label { max-width: 100%; }
.switch-state { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; color: var(--text-2); }
.switch-state::before { content: ""; flex: none; width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px var(--ctl); }
.btn-switch[aria-checked="true"] .switch-state { color: var(--text); }
.btn-switch[aria-checked="true"] .switch-state::before { background: var(--text); box-shadow: none; }
.btn-switch:active:not(:disabled) { background: var(--line); }
.btn-switch:disabled { color: var(--text-2); cursor: not-allowed; }
.btn-switch:disabled .switch-state::before { box-shadow: inset 0 0 0 1.5px var(--line); }

/* 말하기 = 화면 폭 전체 막대. 상자 크기는 네 상태 모두 같다 — 누르는 자리가 움직이면 손을 뗀 것으로 잡힐 수 있다(ptt.js 는 pointerleave 도 손 뗌으로 본다).
   테두리·눌림은 전부 box-shadow(실제 border 0). 평소 = 안쪽 2px 글자색 테 · 누름 = 글자색으로 채움 + 바탕색 글자(화면 전체도 반전) ·
   핸즈프리 = 안쪽 테 6px(「마이크 끄기」) · 못 누름 = 흐린 테 · 흐린 글자 */
.ptt { position: relative; flex: none; width: 100%; height: var(--ptt-h); min-height: var(--ptt-h); margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text); font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ptt-ico { flex: none; display: inline-flex; }
.ptt .ico { width: 30px; height: 30px; vertical-align: 0; }
.ptt-label { max-width: 100%; text-align: center; text-wrap: balance; }
.ptt-talking { background: var(--text); color: var(--bg); }
.ptt-handsfree { box-shadow: inset 0 0 0 6px var(--text); }
.ptt:focus-visible { outline: 3px solid var(--text); outline-offset: 5px; }
.ptt:disabled, .ptt:disabled.ptt-talking, .ptt:disabled.ptt-handsfree { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 2px var(--ctl); outline: none; cursor: not-allowed; }
/* 「전체에 말하기」(운영국만) — 같은 말: 테두리 단추, 누르는 동안 글자색으로 채움. 테두리는 box-shadow(누르는 동안 상자가 움직이지 않게) */
.ptt-dock > .ptt-all { width: auto; align-self: center; }
.ptt-all { min-height: 52px; padding: 10px 24px; border: 0; border-radius: 6px; background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--text); font-size: 17px; line-height: 1.3; font-weight: 800; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ptt-all.ptt-all-talking { background: var(--text); color: var(--bg); }
.ptt-all:disabled { color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--ctl); cursor: not-allowed; }
@media (max-width: 359px) {
  .switches { column-gap: 12px; }
  .ptt { font-size: 24px; }
}
/* 키가 낮은 세로 화면(700px 이하 — 375×667 · 320×568): 자막 46px · 기록 선 48px · 판을 줄인다. 막대는 e2e 하한 120px 까지 */
@media (max-height: 700px) {
  :root { --ptt-h: clamp(120px, 17vh, 136px); }
  @supports (height: 1svh) { :root { --ptt-h: clamp(120px, 17svh, 136px); } }
  .ptt-dock { gap: 6px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .btn-switch { min-height: 56px; }
  .slate-cell { min-height: 60px; padding-top: 6px; padding-bottom: 6px; }   /* 좌우 여백(.slate-code·.slate-ch)은 그대로 둔다 */
}
/* 390px 보다 좁은 화면(375 등): 방 번호 38px — 채널 칸에 이름이 들어가게 */
@media (max-width: 389px) {
  .code-display { font-size: 38px; line-height: 42px; letter-spacing: 0.04em; }
}
/* 아주 좁은 화면(360px 미만 — 320 폭): 방 번호 36px(e2e 하한) · 채널 이름 18px */
@media (max-width: 359px) {
  .code-display { font-size: 36px; line-height: 40px; letter-spacing: 0.03em; }
  .slate-code { padding-right: 12px; }
  .slate-ch { padding-left: 12px; }
  .ch-badge { font-size: 18px; padding-right: 22px; }
  .ch-badge::after { width: 18px; height: 18px; margin-top: -9px; }
  .room-acts { gap: 0 14px; }
}
/* 가로로 낮은 화면(844×390 등): 두 칸 — 왼쪽 정보·무대·참가자(스크롤) · 오른쪽 스위치 + 막대(화면 높이에 붙어 있다). 막대 96px 이상 */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --ptt-h: max(96px, 22vh); }
  @supports (height: 1svh) { :root { --ptt-h: max(96px, 22svh); } }
  .app { max-width: 960px; }
  .screen-a { width: 100%; max-width: 560px; margin: 0 auto; }
  .screen-room { flex-direction: row; align-items: flex-start; column-gap: 20px; }
  .room-main { flex: 1 1 0; align-self: stretch; }
  .ptt-dock { top: 0; bottom: auto; align-self: flex-start; flex: 0 0 min(44%, 380px); width: auto; height: 100vh; height: 100dvh; margin: 0; justify-content: center; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)) 20px; box-shadow: -1px 0 0 var(--line); }
  .btn-switch { min-height: 52px; }
  .ptt { flex-direction: row; gap: 14px; }
}
/* 아주 낮은 세로 화면(높이 600px 이하 — 320×568 등): 처음 화면에서 무대 큐·자막·보조 줄과 참가자 첫 줄이 아래 판 위에 보이게 줄인다.
   세로일 때만(orientation: portrait) — 가로 844×390 은 높이가 390 이라 max-height 만 쓰면 여기에 걸린다. 375×667 이상은 그대로.
   ① 슬레이트 한 줄: 방 번호 36px(e2e 하한) | 채널 이름표 — 「방 번호」·「채널」 머리는 화면에서만 감춘다(화면 읽기에는 남는다 · 채널 이름이 길면 말줄임)
   ② 무대: 소리 기록 선을 빼고 자막 40px · 줄 간격을 좁힌다 ③ 아래 판: 스위치 칸 48px(누를 곳 44px 이상) · 막대 120px(하한) · 「전체에 말하기」 44px */
@media (orientation: portrait) and (max-height: 600px) {
  .room-top { min-height: 48px; padding-top: 2px; }
  .room-head .slate { grid-template-columns: max-content minmax(0, 1fr); }   /* 좁은 폭 두 줄 규칙(@container)보다 이긴다 — 한 줄로 */
  .room-head .slate .slate-cell { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .room-head .slate .slate-code { padding-right: 10px; }
  .room-head .slate .slate-ch { padding-left: 10px; box-shadow: inset 1px 0 0 var(--line); }
  #code-label, #ch-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .code-display { font-size: 36px; line-height: 40px; letter-spacing: 0.02em; }
  .room-title { margin: 0; font-size: 17px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 한 줄(길면 말줄임) — 무대가 아래 판 뒤로 밀리지 않게 */
  .stage { --cap: 40px; padding: 6px 0 2px; }
  .stage-cap { margin-top: 2px; }
  .stage-cap.cap-m { font-size: calc(var(--cap) * 0.92); }
  .stage-cap.cap-s { font-size: calc(var(--cap) * 0.75); }
  .stage-tag.is-self { font-size: 15px; }                 /* 글자 하한 15px */
  .stage-sub { margin-top: 2px; min-height: 22px; line-height: 22px; }
  .stage-trace { display: none; }
  .stage-limit { margin-top: 6px; }
  .btn-switch { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
  .ptt-dock { gap: 6px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .ptt-all { min-height: 44px; padding: 6px 20px; }
}

/* ── 채널 고르기 시트(#ch-pick — 채널-설계 6절) ─────────────────────
   열린 동안 방 화면 아래쪽을 이 시트가 차지한다(.is-picking — ui.channelCard). 윗줄 〔나가기 · 도움말〕과 방 번호·띠·안내 줄은 남는다
   (들어가자마자 고르는 동안에도 나갈 수 있고 방 번호를 볼 수 있게). 큰 제목 → 채널 줄(이름 38px + 인원) → 아래 이유 줄.
   고른 줄(aria-checked) = 글자색 + 채운 네모(색 단독 아님) */
.screen-room.is-picking .room-main { flex: 0 0 auto; }
.screen-room.is-picking .slate-ch, .screen-room.is-picking .room-acts, .screen-room.is-picking #invite-note, .screen-room.is-picking #invite-fallback,
.screen-room.is-picking #wake-note, .screen-room.is-picking .stage, .screen-room.is-picking .peers, .screen-room.is-picking #listen-only-note { display: none !important; }
.screen-room.is-picking .ptt-dock { position: static; flex: 1 0 auto; margin-top: 0; box-shadow: none; }
.ptt-dock.is-picking > :not(.ch-pick):not(.reason) { display: none !important; }
.ch-pick { display: flex; flex-direction: column; flex: 1 0 auto; }
.ch-pick-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 22px 0 18px; }
.ch-pick-title { min-width: 0; font-size: 40px; line-height: 46px; font-weight: 900; letter-spacing: -0.05em; color: var(--text); }
.btn-ch-close { flex: none; display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 16px; font-weight: 700; }
.btn-ch-close::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--i-close) center / contain no-repeat; mask: var(--i-close) center / contain no-repeat; }
.btn-ch-close:active { background: var(--line); }
.ch-pick-note { margin: 0; padding-top: 16px; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--text); }
.ch-row { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ch-opt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; column-gap: 14px; row-gap: 2px; width: 100%; min-height: 100px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--text); text-align: left; }
.ch-opt::before { content: ""; grid-row: 1 / span 2; width: 12px; height: 12px; box-shadow: inset 0 0 0 1.5px var(--ctl); }
.ch-opt .ch-name { display: block; font-size: 38px; line-height: 44px; font-weight: 900; letter-spacing: -0.045em; white-space: nowrap; }
.ch-opt .ch-count { display: block; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-2); }
/* 이미 채널이 있으면(옮기기) 지금 채널만 글자색, 나머지는 한 단계 낮춘다 — 처음 고를 때는 셋 다 글자색 */
.ch-row:has([aria-checked="true"]) .ch-opt:not([aria-checked="true"]) { color: var(--text-2); }
.ch-opt[aria-checked="true"] { color: var(--text); }
.ch-opt[aria-checked="true"]::before { background: var(--text); box-shadow: none; }
.ch-opt[aria-checked="true"] .ch-count { color: var(--text); font-weight: 800; }
.ch-opt:active:not(:disabled) { background: var(--line); }
.ch-opt:disabled, .ch-row:has([aria-checked="true"]) .ch-opt:disabled { color: var(--ctl); cursor: not-allowed; }
.ch-opt:disabled::before { box-shadow: inset 0 0 0 1.5px var(--line); }
.ch-opt:disabled .ch-count { color: var(--text-2); }
@media (max-height: 700px) {
  .ch-pick-head { padding: 14px 0 12px; }
  .ch-pick-title { font-size: 34px; line-height: 40px; }
  .ch-opt { min-height: 84px; }
  .ch-opt .ch-name { font-size: 34px; line-height: 40px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .screen-room.is-picking { flex-direction: column; }
  .screen-room.is-picking .ptt-dock { align-self: stretch; width: 100%; height: auto; padding: 0 0 calc(12px + env(safe-area-inset-bottom)); justify-content: flex-start; }
  .ch-pick-head { padding: 8px 0 8px; }
  .ch-pick-title { font-size: 28px; line-height: 34px; }
  .ch-opt { min-height: 64px; }
  .ch-opt .ch-name { font-size: 28px; line-height: 34px; }
}

/* ── 도움말 시트(#help) ─────────────────────────────────────────────
   아래에서 올라온 판 · 뒤는 어둡게. 열린 동안 두 화면은 inert(ui.js). 제목 줄은 판 안에서 위에 붙어 있다.
   항목은 접히는 목록(details) — 가는 선으로 나눈다. 항목 아이콘은 보조 글자색 선 그림(칸 없음) */
.help { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: flex-end; background: var(--scrim); padding-top: max(24px, env(safe-area-inset-top)); }
.help-sheet { width: 100%; max-width: 560px; margin: 0 auto; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--text); border-radius: 10px 10px 0 0; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: inset 0 1px 0 var(--line), 0 -12px 40px rgba(0, 0, 0, 0.3); }
.help-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.help-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--ctl); }
.help-title { font-size: 32px; line-height: 1.15; font-weight: 900; letter-spacing: -0.04em; }
.btn-close { width: auto; flex: none; min-height: 48px; padding: 0 16px; gap: 8px; }
.close-ico { width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--i-close) center / contain no-repeat; mask: var(--i-close) center / contain no-repeat; }
.help-item { border-bottom: 1px solid var(--line); }
.help-sum { list-style: none; min-height: 60px; display: flex; align-items: center; gap: 14px; padding: 10px 0; font-size: 18px; line-height: 1.3; font-weight: 700; cursor: pointer; }
.help-sum::-webkit-details-marker { display: none; }
.help-sum::before { content: ""; flex: none; width: 22px; height: 22px; background-color: var(--text-2); -webkit-mask: var(--sum-ico) center / contain no-repeat; mask: var(--sum-ico) center / contain no-repeat; }
.help-sum > span { flex: 1 1 auto; min-width: 0; }
.help-sum::after { content: ""; flex: none; width: 18px; height: 18px; background-color: var(--text-2); -webkit-mask: var(--i-chevron) center / contain no-repeat; mask: var(--i-chevron) center / contain no-repeat; transform: rotate(-90deg); transition: transform 150ms ease; }
.help-item[open] > .help-sum::after { transform: rotate(0deg); }
.help-sum:focus-visible { outline-offset: -3px; }
.i-sum-start { --sum-ico: var(--c-info); }
.i-sum-talk { --sum-ico: var(--c-mic); }
.i-sum-hf { --sum-ico: var(--c-hand); }
.i-sum-noise { --sum-ico: var(--c-noise); }
.i-sum-screen { --sum-ico: var(--c-screen); }
.i-sum-quiet { --sum-ico: var(--c-speaker); }
.i-sum-ear { --sum-ico: var(--c-headset); }
.i-sum-privacy { --sum-ico: var(--c-shield); }
.i-sum-conn { --sum-ico: var(--c-bars); }
.help-body { display: flex; flex-direction: column; gap: 10px; padding: 0 0 18px 36px; }
.help-text { font-size: 17px; line-height: 1.6; color: var(--text); }
.plain-list { margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.5; color: var(--text); }
.plain-list li + li { margin-top: 4px; }
/* 도움말 안 「알림음」 스위치 — 아래 판 스위치와 같은 모양 */
.sw-chime { margin-top: 6px; }
/* 연결 정보는 방 안에서만(입장 화면에서는 잴 상대가 없다). :has 를 모르는 브라우저는 그냥 보인다(비어 있을 뿐) */
body:has(#screen-room[hidden]) .help-room-only { display: none; }
/* 시트 위에 비추는 「마이크가 계속 켜져 있어요」(핸즈프리일 때만) — 방 화면 핸즈프리 띠와 같은 반전 띠 + 끄는 단추 */
.help-live { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 14px 0; padding: 12px 14px; border-radius: 4px; background: var(--text); color: var(--bg); }
.help-live .band-main::before { width: 10px; height: 10px; margin-top: 0.42em; -webkit-mask: none; mask: none; background-color: currentColor; }
.btn-live-off { width: auto; min-height: 52px; padding: 8px 20px; background: var(--bg); color: var(--text); box-shadow: none; }
@media (max-width: 360px) {
  .help-body { padding-left: 0; }
}

/* ── 절전 화면(방 화면 전용 · saver.js) ─────────────────────────────
   두 판 모두 화면 전체를 검정으로 덮고 가운데에 흐린 글자만(검정 위 5.10). 애니메이션 없음. 전면 카드(50)·도움말(45)보다 위.
   전체가 누를 곳이다(누르면 걷기만 한다). 배터리를 얼마 아끼는지는 잰 적이 없다 */
.saver { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #000; color: var(--saver-ink); cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.saver-btn { flex: 1 1 auto; width: 100%; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 16px 8px;
  border: 0; border-radius: 0; background: transparent; color: inherit; font-size: 20px; line-height: 1.45; font-weight: 500; text-align: center; cursor: pointer; }
.saver-btn:focus-visible { outline: 3px solid var(--saver-ink); outline-offset: -10px; }
.saver-title { font-size: 22px; line-height: 1.3; font-weight: 600; }
.saver-hint { max-width: 22em; }
.saver-talk { flex: none; min-height: calc(1.45em + 32px); padding: 0 16px 32px; font-size: 20px; line-height: 1.45; font-weight: 600; text-align: center; color: var(--saver-ink); }

/* ── 빈 줄 숨김(글자가 없으면 자리를 차지하지 않는다) — 위의 display 규칙보다 뒤·같거나 높은 우선순위 ── */
.fine:empty, .note:empty, .reason:empty, .has-ico:empty, .chip:empty, .help-text:empty, .foot-note:empty, .slate-lbl:empty { display: none; }
.peer-line:empty, .peer-sub:empty, .peer > .peer-line:empty, .peer > .peer-sub:empty { display: none; }
.peers:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ico-spin { animation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}