/* SJ 통번역 — "말이 빛이 되는 방송실" 다크 스테이지.
   자막 2층 명도 체계는 설계 불변식: 회색층(유동) 낮은 명도, 검정층(refined, 불변) 최대 명도.
   모든 상시 모션은 transform/opacity 전용(GPU), prefers-reduced-motion 폴백 필수. */
:root {
  --bg: #0a0c11;
  --panel: rgba(19, 23, 31, .72);
  --panel-solid: #14171d;
  --edge: #232833;
  --edge-soft: rgba(255, 255, 255, .06);
  --fg-strong: #f5f7fa;      /* refined 번역 */
  --fg-fluid: #7d8594;       /* interim·committed(회색층) */
  --fg-orig: #9aa3b2;        /* refined 원문 */
  --fg-orig-fluid: #5b626e;
  --accent: #e6a23c;
  --accent-deep: #8a6423;
  --ok: #3ecf8e;
  --warn: #e6a23c;
  --err: #ef5350;
  --idle: #566070;
  /* 언어 색: 명도는 단계(회색층·검정층)에 예약되어 있으므로 언어는 색상으로만 구분한다 */
  --lang-en: #5aa9ff;
  --lang-ko: #e6a23c;
  --lang-vi: #3ecf8e;
  --lang-zh: #c77dff;
  --lang-ja: #ff8fa3;
  --lang-sw: #3ec8d8;
  --cap-scale: 1;                        /* 자막 크기 배율(시청자 선택, 저장됨) */
  --orig-fs: clamp(13px, 2.1vw, 21px);
  --tr-fs: clamp(21px, 3.9vw, 42px);
  --serif: "Gowun Batang", "Nanum Myeongjo", serif;
  --sans: "IBM Plex Sans KR", "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg-strong);
  font-family: var(--sans);
  display: flex; flex-direction: column;
  overflow: hidden;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── 배경 무대: 오로라 블롭 + 필름 그레인 (블러 필터 없이 그라데이션만 — 폰 GPU 배려) ── */
#fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#fx .blob { position: absolute; border-radius: 50%; will-change: transform; }
#fx .blob.a {
  width: 70vmax; height: 70vmax; left: -22vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(230, 162, 60, .13) 0%, rgba(230, 162, 60, .05) 38%, transparent 68%);
  animation: drift-a 52s ease-in-out infinite alternate;
}
#fx .blob.b {
  width: 80vmax; height: 80vmax; right: -30vmax; bottom: -36vmax;
  background: radial-gradient(circle, rgba(43, 66, 120, .20) 0%, rgba(43, 66, 120, .07) 40%, transparent 70%);
  animation: drift-b 64s ease-in-out infinite alternate;
}
#fx .blob.c {
  width: 46vmax; height: 46vmax; left: 30vw; top: 46vh;
  background: radial-gradient(circle, rgba(62, 207, 142, .05) 0%, transparent 62%);
  animation: drift-c 47s ease-in-out infinite alternate;
}
@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1.08); } to { transform: translate(-8vw, -6vh) scale(1); } }
@keyframes drift-c { from { transform: translate(0, 0); } to { transform: translate(-10vw, -8vh) scale(1.18); } }
#fx .grain {
  position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
#topbar, #banner, #gate, main, #hostbar { position: relative; z-index: 1; }

/* ── 상단바: 유리 패널 ── */
#topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge-soft);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .sig { flex: 0 0 auto; display: block; }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.mode {
  font-family: var(--mono); font-size: 11.5px; color: var(--accent); font-weight: 500;
  border: 1px solid var(--accent-deep); border-radius: 999px; padding: 3px 10px;
  letter-spacing: .06em;
}
/* ── 룸 배지 + 룸 패널 ── */
.room-badge {
  background: rgba(230, 162, 60, .1); border: 1px solid var(--accent-deep); border-radius: 999px;
  color: var(--accent); font-family: var(--sans); font-size: 12px; font-weight: 500;
  padding: 4px 11px; cursor: default; max-width: 40vw; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
body.host .room-badge { cursor: pointer; }
body.host .room-badge:hover { filter: brightness(1.15); }
#roomPanel { position: fixed; inset: 0; z-index: 40; background: rgba(6, 8, 12, .62); display: flex;
  align-items: flex-start; justify-content: center; padding: 76px 16px 16px; }
.rp-card { width: min(460px, 100%); background: var(--panel-solid); border: 1px solid var(--edge);
  border-radius: 14px; padding: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.rp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rp-head b { font-size: 14px; letter-spacing: .02em; }
.rp-x { background: transparent; border: 1px solid var(--edge); border-radius: 7px; color: var(--fg-orig);
  font-family: var(--sans); font-size: 12px; padding: 5px 10px; cursor: pointer; }
.rp-list { display: flex; flex-direction: column; gap: 7px; max-height: 46vh; overflow-y: auto; }
.rp-item { display: flex; align-items: center; gap: 8px; }
.rp-go { flex: 1; text-align: left; background: transparent; border: 1px solid var(--edge);
  border-left: 3px solid var(--edge); border-radius: 9px; padding: 9px 12px; cursor: pointer;
  color: var(--fg-strong); font-family: var(--sans); }
.rp-go:hover { background: rgba(255, 255, 255, .04); }
.rp-go.on { border-left-color: var(--accent); background: rgba(230, 162, 60, .08); }
.rp-go b { display: block; font-size: 14px; font-weight: 700; }
.rp-go i { font-style: normal; font-size: 11px; color: var(--fg-orig-fluid); font-family: var(--mono); }
.rp-copy { background: transparent; border: 1px solid var(--edge); border-radius: 7px; color: var(--fg-orig);
  font-family: var(--sans); font-size: 12px; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.rp-copy:hover { color: var(--fg-strong); }
.rp-new { display: flex; gap: 8px; margin-top: 14px; }
.rp-new input { flex: 1; background: #0e1116; border: 1px solid var(--edge); border-radius: 8px;
  color: var(--fg-strong); font-family: var(--sans); font-size: 13px; padding: 9px 11px; }
.rp-new button { background: var(--accent); border: none; border-radius: 8px; color: #1a1205;
  font-family: var(--sans); font-size: 13px; font-weight: 700; padding: 9px 15px; cursor: pointer; }
.rp-note { font-size: 11.5px; color: var(--fg-orig-fluid); line-height: 1.55; margin-top: 13px; }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--fg-orig);
  background: rgba(25, 29, 37, .8); border: 1px solid var(--edge);
  padding: 4px 11px; border-radius: 999px;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); transition: background .2s ease, box-shadow .2s ease; }
.pill[data-state="ok"] .dot { background: var(--ok); box-shadow: 0 0 8px rgba(62, 207, 142, .7); animation: breathe 2.4s ease-in-out infinite; }
.pill[data-state="warn"] .dot { background: var(--warn); box-shadow: 0 0 8px rgba(230, 162, 60, .6); }
.pill[data-state="err"] .dot { background: var(--err); box-shadow: 0 0 8px rgba(239, 83, 80, .6); }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.controls { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.controls button {
  font: inherit; font-size: 13px; font-weight: 700;
  color: var(--fg-strong); background: rgba(38, 42, 53, .85);
  border: 1px solid var(--edge); border-radius: 9px;
  padding: 7px 16px; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.controls button.primary { background: var(--accent); border-color: var(--accent); color: #1a1205; }
.controls button.ghost { background: transparent; }
.controls button:disabled { opacity: .4; cursor: default; }
.controls button:not(:disabled):hover { filter: brightness(1.12); transform: translateY(-1px); }
.controls input[type="text"], .controls select {
  font: inherit; font-size: 13px; color: var(--fg-strong);
  background: rgba(25, 29, 37, .85); border: 1px solid var(--edge); border-radius: 9px;
  padding: 6px 10px; width: 110px;
}
.controls select { width: auto; }
.tts-wrap { font-size: 12px; color: var(--fg-orig); display: inline-flex; gap: 6px; align-items: center; }
/* 대체 음성 안내 — 컨트롤 줄 아래로 통째로 내려 붙는다 */
.tts-note { flex: 1 0 100%; font-size: 11px; color: var(--fg-orig); opacity: .8; text-align: right; }

/* ── 배너 ── */
#banner {
  display: none;
  padding: 8px 18px; font-size: 13px;
  background: rgba(58, 43, 22, .9); color: #f0c98a; border-bottom: 1px solid #57431f;
}
#banner.show { display: block; }

/* ── 비밀번호 게이트: 파형이 흐르는 입장 무대 ── */
#gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 10%, #10141d 0%, var(--bg) 58%);
  overflow: hidden;
}
.gate-wave {
  position: absolute; left: 50%; top: 74%;
  width: min(1200px, 160vw); transform: translate(-50%, -50%);
  opacity: 1; pointer-events: none;
}
.gate-wave .w1 { stroke: var(--accent); stroke-dasharray: 6 14; animation: wave-flow 3.2s linear infinite; }
.gate-wave .w2 { stroke: var(--fg-orig-fluid); stroke-dasharray: 3 9; animation: wave-flow 5.1s linear infinite reverse; opacity: .6; }
@keyframes wave-flow { to { stroke-dashoffset: -200; } }
.gate-card {
  position: relative;
  width: min(360px, 88vw);
  background: rgba(19, 23, 31, .82);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--edge-soft); border-radius: 18px;
  padding: 34px 28px 26px; text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  animation: card-in .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(22px) scale(.97); } }
.gate-brand { font-family: var(--serif); font-weight: 700; font-size: 24px; letter-spacing: .01em; }
.gate-tag { margin-top: 8px; font-size: 13.5px; color: var(--fg-orig); }
.gate-tag em { font-style: normal; color: var(--accent); font-weight: 700; }
.gate-sub { font-size: 12.5px; color: var(--fg-orig-fluid); margin: 20px 0 12px; }
#gateForm { display: flex; gap: 8px; }
#gatePass {
  flex: 1; min-width: 0;
  font: inherit; font-size: 17px; text-align: center; letter-spacing: .28em;
  color: var(--fg-strong); background: rgba(12, 14, 19, .85);
  border: 1px solid var(--edge); border-radius: 10px; padding: 11px 12px;
  transition: border-color .2s ease;
}
#gatePass:focus { border-color: var(--accent-deep); }
#gateForm button {
  font: inherit; font-size: 14px; font-weight: 700; color: #1a1205;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 10px;
  padding: 11px 20px; cursor: pointer;
  transition: filter .15s ease;
}
#gateForm button:hover { filter: brightness(1.1); }
.gate-err { min-height: 18px; margin-top: 12px; font-size: 12px; color: var(--err); }
.gate-remember { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 12px; color: var(--fg-orig); cursor: pointer; }
#gate.shake .gate-card { animation: shake .4s ease; }
@keyframes shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-4px); } 90% { transform: translateX(2px); } }

/* ── 자막 무대 ── */
#scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; position: relative; }
#lines {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: clamp(14px, 2.4vh, 26px);
  padding: 22px clamp(16px, 5vw, 64px) 30px;
  max-width: 1400px; margin: 0 auto; width: 100%;
}
.line { line-height: 1.42; position: relative; padding-left: 13px; }
/* 언어 막대: 위 절반 = 원문 언어, 아래 절반 = 지금 보고 있는 자막 언어(같으면 단색) */
.line::before {
  content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--l1, var(--edge)) 0 50%, var(--l2, var(--l1, var(--edge))) 50% 100%);
}
.line .orig {
  font-size: calc(var(--orig-fs) * var(--cap-scale));
  color: var(--fg-orig-fluid);
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
/* 언어 칩: 원문 → 자막 (예: EN → KO). 전광판·자막 띠에서는 감춘다 */
.line .lt {
  display: inline-block; margin-right: 8px; padding: 1px 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .04em;
  color: var(--l1, var(--idle)); border: 1px solid currentColor; border-radius: 3px;
  opacity: .8; white-space: nowrap; vertical-align: 1px;
}
.line .tr {
  font-size: calc(var(--tr-fs) * var(--cap-scale));
  font-weight: 700;
  color: var(--fg-fluid);
  overflow-wrap: anywhere;
  transition: color .25s ease;
}
/* 보조 자막(영어 병기): 주 자막 아래 한 단 작게. 명도는 검정층 원칙을 따르되 주 자막에 양보한다 */
.line .aux {
  margin-top: 3px;
  font-size: calc(var(--tr-fs) * var(--cap-scale) * 0.62);
  font-weight: 500;
  color: var(--fg-orig-fluid);
  overflow-wrap: anywhere;
}
.line.stage-refined .aux { color: var(--fg-orig); }
.line .aux .ac {
  display: inline-block; margin-right: 7px; padding: 0 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .04em;
  color: var(--l3, var(--idle)); border: 1px solid currentColor; border-radius: 3px;
  opacity: .75; white-space: nowrap; vertical-align: 1px;
}
.line .aux[hidden] { display: none !important; }
/* 회색층: interim = committed 동일 톤(설계문서 §4 — 상태 전이를 색 점프로 노출하지 않는다) */
.line.stage-interim .tr .p { opacity: .75; }
/* 검정층: 불변 */
.line.stage-refined .orig { color: var(--fg-orig); }
.line.stage-refined .tr { color: var(--fg-strong); }
@keyframes line-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes refine-glow {
  0% { text-shadow: 0 0 0 rgba(230, 162, 60, 0); }
  35% { text-shadow: 0 0 26px rgba(230, 162, 60, .38); }
  100% { text-shadow: 0 0 0 rgba(230, 162, 60, 0); }
}
.warn-badge {
  display: inline-block; vertical-align: middle;
  margin-left: 10px; padding: 2px 8px;
  font-size: 11px; font-weight: 700;
  color: var(--warn); border: 1px solid var(--warn); border-radius: 6px;
  opacity: .9;
  animation: badge-in .5s ease both;
}
@keyframes badge-in { from { opacity: 0; transform: scale(.8); } to { opacity: .9; transform: scale(1); } }

/* 대기 화면: 첫 자막 전 숨쉬는 링 */
#idle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  pointer-events: none;
}
#scroll:has(.line) #idle { display: none; }
#idle .ring { position: relative; width: 92px; height: 92px; }
#idle .ring::before, #idle .ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--accent-deep);
}
#idle .ring::before { animation: ring-pulse 3.2s ease-out infinite; }
#idle .ring::after { animation: ring-pulse 3.2s ease-out 1.6s infinite; }
@keyframes ring-pulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
#idle .ring .core {
  position: absolute; inset: 32px; border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 162, 60, .8), rgba(230, 162, 60, .12) 70%);
  animation: breathe 3.2s ease-in-out infinite;
}
#idle .t1 { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--fg-orig); }
#idle .t2 { font-size: 12.5px; color: var(--fg-orig-fluid); }

/* ── 하단(호스트): 유리 콘솔 + 실시간 파형 ── */
#hostbar {
  display: none; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--edge-soft);
}
#micWave { flex: 0 0 auto; width: 220px; height: 36px; border-radius: 6px; background: rgba(12, 14, 19, .6); }
.wave-label { font-size: 10.5px; color: var(--fg-orig-fluid); letter-spacing: .08em; }
.join { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* 완전무료 모드: 표준/무료 전환 링크 + 브라우저 내장 인식용 언어 토글 */
.engine-link {
  font-size: 12px; color: var(--fg-orig); text-decoration: none;
  border: 1px solid var(--edge); border-radius: 9px; padding: 6px 12px;
  white-space: nowrap; transition: filter .15s ease;
}
.engine-link:hover { filter: brightness(1.25); color: var(--fg-strong); }
.lang-tog { gap: 4px; }
.lang-tog button { padding: 7px 10px; }
.join-label { font-size: 11px; color: var(--fg-orig-fluid); }
.join-url { font-family: var(--mono); font-size: 12.5px; color: var(--fg-orig); word-break: break-all; }
#qr { border-radius: 8px; background: #fff; padding: 4px; }

/* 뷰어에서는 호스트 요소 숨김. 고급(adv) 전용 요소는 /host?adv=1 에서만 */
.host-only, .adv-only { display: none; }
body.host .host-only { display: inline-flex; }
body.host .view-lang-wrap { display: none; }   /* 자막 언어 선택은 시청자 전용 */
body.host #hostbar { display: flex; }
body.host .controls .host-only { display: inline-block; }
body.adv .adv-only { display: inline-flex; }
body.adv .controls .adv-only { display: inline-block; }

/* ── 전광판(모니터 팝업): 자막만 크게, 컨트롤 전부 숨김. 더블클릭 = 전체화면 ── */
body.display #topbar, body.display #banner, body.display #hostbar { display: none; }
body.display #lines { max-width: none; padding: 3vh 5vw 5vh; gap: 3.2vh; }
body.display { --orig-fs: clamp(16px, 2.6vw, 30px); --tr-fs: clamp(30px, 5.6vw, 76px); }
body.display .line .tr { line-height: 1.32; }
body.display .line .lt, body.strip .line .lt,
body.display .line .aux .ac, body.strip .line .aux .ac { display: none; }
body.display #idle .t2 { display: none; }

body.display #scroll, body.strip #scroll { scrollbar-width: none; }
body.display #scroll::-webkit-scrollbar, body.strip #scroll::-webkit-scrollbar { display: none; }

/* ── 자막 띠(strip): 하단 캡션 밴드 — OBS 브라우저 소스·빔 하단 배치용 ── */
body.strip #topbar, body.strip #banner, body.strip #hostbar, body.strip #idle, body.strip #fx { display: none; }
body.strip { background: #000; }
body.strip #lines { max-width: none; padding: 10px 4vw 16px; gap: 8px; }
body.strip .line { text-align: center; }
body.strip { --orig-fs: clamp(13px, 1.8vw, 20px); --tr-fs: clamp(24px, 3.6vw, 46px); }
body.strip .line .orig { margin-bottom: 2px; }
body.strip .line .tr { line-height: 1.3; }

@media (max-width: 620px) {
  #topbar { padding: 8px 10px; gap: 8px; }
  .join { display: none; }
  #micWave { width: 150px; }
  #lines { padding-bottom: 18px; }
  .gate-wave { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  #fx .blob, #idle .ring::before, #idle .ring::after, #idle .ring .core,
  .pill[data-state="ok"] .dot, .gate-wave .w1, .gate-wave .w2 { animation: none !important; }
  .line, .line .tr { animation: none !important; }   /* 인라인 등장·글로우도 무력화 */
  .line .tr { transition: none; }
  #scroll { scroll-behavior: auto; }
  .gate-card { animation-duration: .01s; }
}

/* ── 앞문 대시보드 ────────────────────────────────────────────────
   게이트와 같은 무대 위에 선다. 처음 여는 사람이 볼 것은 «어느 통역에 들어갈까» 하나뿐이다. */
#board {
  position: fixed; inset: 0; z-index: 51;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 10%, #10141d 0%, var(--bg) 58%);
  padding: 20px; overflow: auto;
}
.board-card {
  width: min(560px, 100%);
  background: rgba(18, 21, 28, .92); border: 1px solid var(--edge);
  border-radius: 16px; padding: 22px 22px 18px;
}
.board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.board-new {
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  color: #1a1205; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: 9px 14px; cursor: pointer;
}
.board-list { display: flex; flex-direction: column; gap: 8px; }
.board-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; color: var(--fg-strong);
  background: rgba(12, 14, 19, .8); border: 1px solid var(--edge);
  border-radius: 12px; padding: 13px 14px; cursor: pointer;
}
.board-row:hover { border-color: var(--accent); }
.board-row .bn { flex: 1; min-width: 0; }
.board-row .bt { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-row .bs { font-size: 12px; color: var(--fg-orig); margin-top: 3px; }
.board-row .bl { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.board-row .bl[data-on="1"] { color: #1a1205; background: var(--accent); }
.board-row .bl[data-on="0"] { color: var(--fg-orig); border: 1px solid var(--edge); }
.board-empty { font-size: 13px; color: var(--fg-orig); padding: 18px 2px; text-align: center; }
.board-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.board-f { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--fg-orig); }
.board-f input {
  font: inherit; font-size: 15px; color: var(--fg-strong);
  background: rgba(12, 14, 19, .85); border: 1px solid var(--edge);
  border-radius: 10px; padding: 10px 12px;
}
.board-actions { display: flex; gap: 8px; }
.board-actions button {
  font: inherit; font-size: 14px; font-weight: 700;
  color: #1a1205; background: var(--accent); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 16px; cursor: pointer;
}
.board-actions .board-ghost { color: var(--fg-orig); background: transparent; border-color: var(--edge); }
.board-opt { color: var(--fg-orig); opacity: .75; font-weight: 400; }

/* 세션 행: 본체 + 호스트 전용 삭제 */
.board-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.board-item .board-row { flex: 1; min-width: 0; }
.board-del {
  font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--fg-orig); background: transparent;
  border: 1px solid var(--edge); border-radius: 10px; padding: 9px 12px; cursor: pointer;
}
.board-del[data-armed="1"] { color: #1a1205; background: #e07b6a; border-color: #e07b6a; }
.board-del.board-keep { color: var(--fg-orig); background: transparent; border-color: var(--edge); }
.board-note { flex: 1 0 100%; font-size: 11px; color: var(--fg-orig); padding: 0 2px 2px; }