:root {
  --bg: #16181d;
  --panel: #23262d;
  --line: #353943;
  --text: #f2f3f5;
  --sub: #a4a9b4;
  --accent: #4f8cff;
  --speak: #3fd17a;
  --danger: #e5484d;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
/* 화면 언어·언어 이름마다 그 글자에 맞는 글꼴 (한자가 한국어 글꼴로 나오지 않게) */
:lang(ja) { font-family: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', sans-serif; }
:lang(zh-Hans), :lang(zh-CN) { font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', sans-serif; }
:lang(zh-Hant), :lang(zh-TW) { font-family: system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', sans-serif; }
[hidden] { display: none !important; }
button { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
input, select { font: inherit; color: var(--text); background: #1b1e24; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; }
input[type='checkbox'] { width: auto; }
label { display: block; margin: 10px 0; color: var(--sub); }
label > input, label > select { margin-top: 4px; }
label.row { display: flex; gap: 8px; align-items: center; color: var(--text); flex-wrap: wrap; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; padding: 8px 12px; }
legend { color: var(--sub); padding: 0 4px; }
small { color: var(--sub); font-size: 13px; }
small.hint { display: block; margin-top: 4px; }
.voice-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.voice-row select { flex: 1; min-width: 0; }
.voice-row .play { flex: none; white-space: nowrap; padding: 8px 10px; }
.voice-row .play[hidden] { display: none; }
@media (max-width: 480px) {
  .voice-row { flex-wrap: wrap; }
  .voice-row select { flex-basis: 100%; }
  .voice-row .play { flex: 1; }
}
.field { margin: 10px 0; color: var(--sub); }
.field-name { display: block; }
small.note { color: #9cc2ff; }
/* '내가 듣는 언어' 버튼 [한국어 ▾] (화면 D) */
.lang-btn { width: 100%; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; background: #1b1e24; border-radius: 8px; padding: 8px 10px; }
.lang-btn .lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-btn .chev { color: var(--sub); flex: none; }
.msg { color: #ffb4b4; }

/* 참가 화면 */
#join { max-width: 460px; margin: 0 auto; padding: 24px 16px 40px; }
#join h1 { font-size: 22px; margin: 4px 0 14px; }
.preview { position: relative; aspect-ratio: 16 / 10; background: #000; border-radius: 12px; overflow: hidden; }
.preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.pv-none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sub); }
.meter { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 6px; background: #ffffff22; border-radius: 3px; }
.meter div { height: 100%; width: 0; background: var(--speak); border-radius: 3px; transition: width 80ms; }
#joinBtn { width: 100%; margin-top: 8px; padding: 12px; }

/* 회의 화면 */
#meet { position: fixed; inset: 0; display: flex; flex-direction: column; }
#grid { flex: 1; display: grid; gap: 8px; padding: 8px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: minmax(200px, 1fr); overflow: auto; }
.tile { position: relative; background: #0d0f12; border: 3px solid transparent; border-radius: 12px; overflow: hidden; min-height: 180px; }
.tile.speaking { border-color: var(--speak); }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile.me video { transform: scaleX(-1); }
.tile .avatar { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; color: var(--sub); }
.tile .label { position: absolute; left: 8px; top: 8px; background: #000a; padding: 2px 8px; border-radius: 6px; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.tile .micoff { color: #ffb4b4; font-size: 13px; }
.tile .badge { position: absolute; right: 8px; top: 8px; background: var(--accent); color: #fff; font-size: 13px; padding: 2px 8px; border-radius: 6px; }
.caps { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px 10px; background: linear-gradient(transparent, #000c 30%); }
.caps:empty, .caps.empty { display: none; }
.cap-orig { color: #c5c9d2; font-size: 14px; }
.cap-interp { color: #fff; font-size: 20px; font-weight: 600; }
.cap-note { color: #9cc2ff; font-size: 13px; }
.cap-name { color: var(--sub); font-size: 12px; margin-right: 6px; }
/* 내 칸 자막 (장면 40~49): 언어마다 통역 글, '통역된 뜻', 경고 */
.cap-mine { color: #fff; font-size: 15px; }
.cap-label { color: var(--sub); font-size: 12px; margin-right: 2px; }
.cap-conv { color: #e8f0ff; font-size: 15px; margin-top: 2px; }
.cap-conv.wait { color: var(--sub); font-size: 13px; }
.cap-conv.warn { color: #ffd166; }
.cap-basis { color: var(--sub); font-size: 12px; }
.cap-warn { color: #ffd166; font-size: 13px; margin-top: 2px; }
.cap-unsure { color: #ffd166; font-size: 13px; margin-top: 2px; } /* 아주 짧은 말이라 잘못 들렸을 수 있음 (듣는 사람 자막) */
#phoneCaps { display: none; }
#bar { display: flex; gap: 8px; justify-content: center; padding: 10px 8px calc(10px + env(safe-area-inset-bottom)); background: #101216; border-top: 1px solid var(--line); flex-wrap: wrap; }
#bar button { display: flex; flex-direction: column; align-items: center; min-width: 76px; padding: 6px 10px; font-size: 13px; }
#bar button .ic { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; margin-bottom: 2px; }
#bar button[data-on='0'] { background: #3a2a2c; border-color: #6b3b3f; color: #ffb4b4; }
/* 꺼진 버튼(마이크·카메라·통역 듣기): 색만 바뀌면 알아보기 어려워 아이콘 위에 X (사용자 10-19) */
#bar button { position: relative; }
#bar button[data-on='0']::after {
  content: ''; position: absolute; top: 4px; left: 50%; width: 26px; height: 26px; transform: translateX(-50%); pointer-events: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1.6px), #ff5a5a calc(50% - 1.6px), #ff5a5a calc(50% + 1.6px), transparent calc(50% + 1.6px)),
    linear-gradient(-45deg, transparent calc(50% - 1.6px), #ff5a5a calc(50% - 1.6px), #ff5a5a calc(50% + 1.6px), transparent calc(50% + 1.6px));
}
/* 통역 준비 중 덮개 (사용자 10-19): 영상 위를 어둡게, 가운데 크게. 누름은 막지 않고 아래 버튼 줄(#bar)이 위에 옴 */
#prep { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #000a; pointer-events: none; text-align: center; padding: 0 16px; }
#prep[hidden] { display: none; }
#prep .prep-main { font-size: clamp(28px, 6vw, 48px); font-weight: 700; color: #fff; }
#prep.ok .prep-main { color: #8ff0b4; font-size: clamp(22px, 4.5vw, 36px); }
#prep .prep-sub { font-size: clamp(14px, 2.6vw, 18px); color: #c5c9d2; }
#bar { position: relative; z-index: 6; }
#bMic { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11z'/%3E%3C/svg%3E"); }
#bCam { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 10.5V7a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11z'/%3E%3C/svg%3E"); }
#bInterp { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-9 9v6a3 3 0 0 0 3 3h2v-8H5v-1a7 7 0 0 1 14 0v1h-3v8h2a3 3 0 0 0 3-3v-6a9 9 0 0 0-9-9z'/%3E%3C/svg%3E"); }
#bLang { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16v11H8l-4 4zM7 9h10v2H7zm0-3h6v2H7z'/%3E%3C/svg%3E"); }
#bPeople { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm7 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2 20c0-3.3 3.1-6 7-6s7 2.7 7 6zm15 0c0-1.9-.7-3.6-1.9-4.9 3 .4 5.9 2.2 5.9 4.9z'/%3E%3C/svg%3E"); }
#bLeave { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4h9v16h-9v-2h7V6h-7zm-1 4 1.4 1.4L8.8 11H15v2H8.8l1.6 1.6L9 16l-4-4z'/%3E%3C/svg%3E"); }
#toasts { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 5; width: min(92vw, 420px); }
.toast { background: #000d; border: 1px solid var(--line); padding: 8px 12px; border-radius: 10px; font-size: 14px; text-align: center; }
/* 통역 준비 중 표시 (사용자 10-19) */
.toast.ready { border-color: #4f8cff88; color: #cfe0ff; }
.toast.ready.ok { border-color: #3fd17a99; color: #b9f3cf; }
#people { position: fixed; right: 0; top: 0; bottom: 0; width: min(88vw, 320px); background: var(--panel); border-left: 1px solid var(--line); padding: 16px; z-index: 6; overflow: auto; }
#people h2 { margin-top: 0; font-size: 18px; }
#people ul { list-style: none; padding: 0; margin: 0 0 12px; }
#people li { padding: 8px 0; border-bottom: 1px solid var(--line); }
#people li small { display: block; }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; width: min(92vw, 420px); padding: 16px; }
dialog::backdrop { background: #0009; }
dialog h2 { font-size: 17px; margin: 6px 0; }
dialog .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* 언어 고르기 창 (화면 D·E) */
dialog.picker { padding: 0; width: min(92vw, 440px); max-height: min(86vh, 700px); overflow: hidden; }
dialog.picker[open] { display: flex; flex-direction: column; }
.pk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.pk-head h2 { margin: 0; font-size: 17px; }
.pk-head small { display: block; margin-top: 2px; }
.icon-btn { flex: none; background: transparent; border-color: transparent; color: var(--sub); padding: 2px 10px; font-size: 18px; line-height: 1.4; }
.icon-btn:hover { color: var(--text); background: #ffffff10; }
.pk-search { padding: 10px 12px; border-bottom: 1px solid var(--line); background: #1d2026; }
.pk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 10px; }
.pk-sec { padding: 12px 8px 4px; font-size: 12px; font-weight: 600; color: var(--sub); }
.pk-item, .su-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; }
.pk-item:hover, .su-item:hover { background: #2b2f38; }
.pk-item.on, .su-item.on { background: #4f8cff22; border-color: #4f8cff66; }
.pk-names, .su-names { flex: 1; min-width: 0; }
.pk-name { display: block; font-weight: 600; font-size: 15px; }
.pk-sub { display: block; font-size: 12px; color: var(--sub); }
.pk-tick { flex: none; color: var(--accent); font-weight: 700; visibility: hidden; }
.pk-item.on .pk-tick, .su-item.on .pk-tick { visibility: visible; }
.pk-none { padding: 32px 8px; text-align: center; color: var(--sub); font-size: 14px; }

/* 처음 열 때 내 언어 고르기 (화면 B) */
#setup { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.setup-in { width: 100%; max-width: 460px; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.setup-head { text-align: center; padding: max(24px, env(safe-area-inset-top)) 16px 12px; }
.setup-head .globe { width: 36px; height: 36px; color: var(--accent); }
.setup-head h1 { font-size: 21px; margin: 6px 0 2px; }
.setup-head p { margin: 0; font-size: 12.5px; color: var(--sub); }
.setup-search { padding: 0 16px 8px; }
.setup-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px max(16px, env(safe-area-inset-bottom)); }
.su-item { border-radius: 12px; padding: 9px 14px; }
.su-item .nat { display: block; font-size: 16px; font-weight: 600; }
.su-item .eng { display: block; font-size: 12px; color: var(--sub); }
.su-sep { border-top: 1px solid var(--line); margin: 8px 14px; }

/* 폰: 말하는 사람 크게 + 나머지 작게, 자막은 화면 아래 */
@media (max-width: 700px) {
  #grid { display: block; position: relative; padding: 6px; }
  .tile { position: absolute; width: 96px; height: 128px; min-height: 0; right: 10px; top: calc(10px + 136px * var(--i, 0)); z-index: 2; }
  .tile.main { position: absolute; inset: 6px; width: auto; height: auto; z-index: 1; }
  .tile .caps { display: none; }
  .tile:not(.main) .label { font-size: 11px; padding: 1px 4px; left: 4px; top: 4px; right: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
  .tile:not(.main) .label .lang, .tile:not(.main) .label .micoff { display: none; }
  .tile:not(.main) .avatar { font-size: 28px; }
  #phoneCaps { display: block; padding: 6px 12px; background: #000; min-height: 0; max-height: 32vh; overflow: hidden; }
  #phoneCaps .line { margin: 4px 0; }
  #bar { gap: 4px; }
  #bar button { min-width: 0; flex: 1; padding: 6px 2px; font-size: 11px; }
}

/* 초대 (10-20): 버튼 아이콘(사람 + 더하기), 초대 창의 링크·비밀번호 줄 */
#bInvite { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-3.3 3.1-6 7-6s7 2.7 7 6v1H2zM19 7h2v3h3v2h-3v3h-2v-3h-3v-2h3z'/%3E%3C/svg%3E"); }
.inv-row { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.inv-row code { display: block; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; word-break: break-all; font-size: 14px; user-select: all; }
.inv-row code.inv-pw { font-size: 22px; letter-spacing: 4px; font-weight: 700; }

/* 초대받은 사람의 첫 화면: 비밀번호 (10-20) */
#pwGate .gate-in { max-width: 420px; margin: 0 auto; }
#gateForm { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 24px; }
#gPw { font-size: 26px; letter-spacing: 6px; text-align: center; padding: 12px; }

/* 방장 '한 사람만 말하기' (10-20): 위쪽 띠, 참가자 목록의 표시·버튼, 막힌 마이크는 X 대신 자물쇠 */
#freezeBar { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 8px 14px; border-radius: 999px; background: #3a2f12; border: 1px solid #8a6d1f; color: #ffe08a; font-size: 14px; }
#freezeBar[hidden] { display: none; }
#freezeBar button { padding: 4px 10px; font-size: 13px; }
.pp-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: #2c3442; color: #b9c6dd; font-size: 11px; }
.pp-tag.on { background: #3a2f12; color: #ffe08a; }
.pp-only { float: right; margin-left: 8px; padding: 3px 8px; font-size: 12px; }
#bar button[data-lock='1']::after {
  content: ''; position: absolute; top: 4px; left: 50%; width: 22px; height: 22px; transform: translateX(-50%); pointer-events: none; background: #ffe08a;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}