/* 렉스 판정단 v005 — 방향 A 「밤 방송」 (2026-11-11).
   칠판 = 살구 벽에 걸린 숯색 방송 창(너도양 "어두운 판": 숯 바탕 + 크림·흰 글자 + 주황 선). 노트북 = 살구 책상 위 흰 기록지.
   규칙: 글자 크기 네 단계, 상자는 테두리 대신 면 색으로, 선은 2px 한 굵기, 모서리 12·16px, 주황은 선에만.
   style.css(v004) 뒤에 읽힌다. 시안 뒤 전체를 만들 때 한 파일로 합친다. */
:root {
  --char: #33373A;
  --radius: 12px;
  --tint: color-mix(in srgb, var(--apricot) 55%, #fff); /* 흰 종이 위 옅은 살구 면 */
}
.ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -0.12em; }

/* ---------- 단추: 한 가지 모양 ---------- */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4em; border: 2px solid var(--char); border-radius: var(--radius); background: #fff; color: var(--char); font-weight: 700; }
.btn.small { min-height: 40px; font-size: 15px; }
.btn.primary { background: var(--char); color: #fff; border-color: var(--char); }
.btn.primary:hover { background: #24272a; filter: none; }

/* ================= 전자칠판 틀 ================= */
.board { --bar-h: 92px; --ch-h: 78px; --chat-w: clamp(280px, 17vw, 336px);
  --H: min(calc(100dvh - var(--bar-h) - var(--ch-h) - 16px), calc((100vw - 32px - var(--chat-w)) * 9 / 16)); }
.b-main { display: grid; grid-template-columns: auto var(--chat-w); grid-template-rows: var(--H) var(--ch-h); justify-content: center; align-content: start; padding: 16px 16px 0; min-height: 0; }
.b-stagearea { display: block; padding: 0; min-width: 0; }
.screen { width: calc(var(--H) * 16 / 9); height: var(--H); aspect-ratio: auto; margin: 0; border-radius: 16px 0 0 16px; background: var(--char); color: var(--cream);
  /* 무대 안에서는 색 이름의 뜻을 뒤집는다: 글·선 = 크림, 바탕 = 숯 */
  --ink: #F0F0D8; --paper: #33373A; --surface: rgba(240, 240, 216, .09); --line: rgba(240, 240, 216, .28); --muted: rgba(240, 240, 216, .74); --mint: #F7C9A8; --mint-ink: #F0F0D8; --bad: #ff6b5c; }
.screen :is(.rank li.rex, .vs-card.rex, .quote.rex, .slot.on, .got-line, .bl.ok, .chip.on, .vote .pick.ok, .tv-ready .btn) { color: var(--char); }
.screen .slot.on .slot-n { color: var(--char); }
.screen .g-linelab, .screen .g-rexlab { stroke: var(--char); }
.screen .btn { background: transparent; color: var(--cream); border-color: var(--line); }
.screen .btn.primary { background: var(--deep); color: var(--char); border-color: var(--deep); }
.b-chat { margin: 0; height: var(--H); border: 0; border-left: 2px solid rgba(240, 240, 216, .16); border-radius: 0 16px 16px 0; background: var(--char); color: var(--cream); }
.chat-head { padding: 16px 20px 14px; font-size: 22px; font-weight: 700; border-bottom: 2px solid var(--orange); }
.chatlist { padding: 12px 14px; gap: 8px; }
.chatlist li { font-size: 20px; line-height: 1.4; padding: 4px 6px; border-radius: 8px; }
.chatlist li b { color: var(--deep); font-weight: 700; }
.chatlist li.judge b { color: var(--deep); text-decoration: none; }
.chatlist li.hot { background: var(--rex); color: var(--char); }
.chatlist li.hot b { color: var(--char); }
.chatlist .pin { font-size: 20px; font-weight: 700; color: var(--char); opacity: .78; }

/* 채널 줄(살구 벽 위): 방송 제목 + 영상 조작 단추 + 판정단 표시 */
.channel { grid-column: 1 / -1; width: auto; margin: 0; height: var(--ch-h); gap: 16px; padding: 0 4px; }
.ch-face { width: 54px; height: 54px; }
.ch-text { min-width: 0; margin-right: auto; }
.ch-title { font-size: 24px; font-weight: 700; }
.ch-name { font-size: 18px; }
.ch-ctrl:empty { display: none; }
.tv-ctrl { display: flex; gap: 10px; align-items: center; padding: 0; background: none; }
.tv-btn { min-height: 56px; padding: 0 18px; display: inline-flex; align-items: center; gap: .4em; font: 700 20px var(--font); background: #fff; color: var(--char); border: 2px solid var(--char); border-radius: var(--radius); white-space: nowrap; }
.tv-btn.primary { background: var(--char); color: #fff; border-color: var(--char); }
.tv-btn:disabled { opacity: .4; }
.tv-pos { margin: 0 4px 0 0; font-size: 18px; color: var(--muted); opacity: 1; white-space: nowrap; }
.board .chip { min-height: 44px; display: inline-flex; align-items: center; font-size: 18px; border-radius: 99px; padding: 0 16px; border-width: 2px; }

/* 선생님 줄: 손가락으로 누르기 쉽게 크게. 다음이 가장 크다 */
.b-teacher { height: var(--bar-h); flex-wrap: nowrap; gap: 16px; padding: 0 20px; border-top: 2px solid var(--orange); }
.t-logo { width: 40px; }
.t-room { font-size: 20px; white-space: nowrap; }
.t-room b { font-size: 28px; }
.t-stage { font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { gap: 8px; min-width: 0; }
.dot { width: 12px; height: 12px; flex: none; }
.status { font-size: 18px; white-space: nowrap; }
.t-tools, .t-nav { display: flex; gap: 12px; flex: none; }
.t-tools { margin-right: 20px; }
.b-teacher .t-btn { min-height: 60px; padding: 0 20px; font-size: 20px; border-width: 2px; border-color: var(--char); background: #fff; color: var(--char); white-space: nowrap; }
.b-teacher #b-prev { font-size: 22px; min-width: 132px; }
.b-teacher #b-next { font-size: 28px; min-width: 196px; background: var(--char); color: #fff; border-color: var(--char); border-width: 2px; }
.b-teacher .t-btn:disabled { opacity: .35; }

/* ---------- 방송 화면(영상): 16:9 무대를 꽉 채운다 ---------- */
.player { grid-template-rows: 1fr; background: var(--char); border-radius: inherit; }
.tv-frame { border-radius: inherit; }
.tv-video, .tv iframe { background: var(--char); }
.live-pill { top: 2.6cqh; left: 1.6cqw; font-size: max(var(--m18), 1.45cqw); border-radius: 8px; padding: .28em .7em .28em .28em; background: rgba(36, 39, 42, .78); }
.live { border-radius: 6px; }
.caption { font-size: max(var(--m22), 2.3cqw); border-radius: 10px; font-weight: 700; }
.callout { left: 3cqw; top: 20cqh; max-width: 36cqw; background: var(--cream); color: var(--char); border: 3px solid var(--orange); border-radius: 1.1cqw; padding: 1.6cqh 1.6cqw; font-size: max(var(--m22), 2.3cqw); font-weight: 700; }
.callout b { font-size: .72em; color: var(--char); opacity: .72; }
.co-tag { font-size: .66em; background: var(--char); color: #fff; border-radius: 6px; padding: .12em .6em; }
.tv-ready { gap: 4cqh; }
.tv-ready img { width: 24cqw; border: .5cqw solid var(--live); }
.tv-ready .btn { font-size: max(var(--m24), 2.6cqw); min-height: 9cqh; padding: 0 1.5em; border-radius: 1.3cqw; background: var(--deep); border: 0; }
.tv-card { font-size: max(var(--m24), 2.4cqw); }
.tv-card .lead { font-size: max(var(--m26), 2.8cqw); font-weight: 700; }
.tv-comment { background: transparent; }

/* ---------- 방송 화면 공유(영상이 아닌 장면) ---------- */
.share { background: var(--char); color: var(--cream); border-radius: inherit; animation: scene-in .32s ease-out both; }
.player { animation: scene-in .32s ease-out both; }
.share-body { padding: 10cqh 5cqw 5cqh; gap: 2.4cqh; }
.share h2 { font-size: max(var(--m28), 3.6cqw); }
.share .lead { font-size: max(var(--m24), 2.3cqw); }
.share .muted { font-size: max(var(--m22), 1.6cqw); }
.ruler-fill { transition: width .8s cubic-bezier(.2, .7, .2, 1); }

/* 판정판 */
.share.sh-verdict .share-body { align-content: stretch; }
#b-verdict { display: grid; gap: 2.2cqh; align-content: center; height: 100%; }
.m-who { display: flex; gap: 1.1cqw; align-items: center; min-width: 0; }
.m-who .av { width: 4.8cqw; height: 4.8cqw; border-radius: 50%; object-fit: cover; border: .22cqw solid var(--rex); flex: none; }
.m-who b { display: block; font-size: max(var(--m24), 2.3cqw); font-weight: 700; line-height: 1.25; }
.m-who span { display: block; font-size: max(var(--m22), 1.7cqw); color: var(--muted); line-height: 1.3; }
.m-num, .duel-num { white-space: nowrap; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.m-num { font-size: max(var(--m40), 5.2cqw); }
.m-num small, .duel-num small { font-size: .38em; margin-left: .06em; letter-spacing: 0; }
.m-note { font-size: max(var(--m22), 1.45cqw); color: var(--muted); justify-self: end; }
#b-verdict .ruler { height: 3.4cqh; color: rgba(240, 240, 216, .8); }
#b-verdict .rex .ruler-fill { background: var(--rex); }
#b-verdict .judge .ruler-fill { background: var(--deep); }
#b-verdict .ruler.chatbar .ruler-fill { background: var(--live); }
.finding { font-size: max(var(--m24), 2.2cqw); line-height: 1.4; text-wrap: balance; }
.finding.dim { font-size: max(var(--m22), 1.8cqw); color: var(--muted); }
/* 좌우 대결 */
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.6cqw; align-items: stretch; }
.duel-side { display: grid; gap: 1.4cqh; padding: 2.6cqh 2.4cqw 3cqh; border-radius: 1.2cqw; background: var(--surface); }
.duel-num { font-size: 10cqw; }
.duel-side.rex .duel-num { color: var(--rex); }
.duel-side.judge .duel-num { color: var(--deep); }
.duel-vs { align-self: center; font-size: 3cqw; font-weight: 700; color: var(--muted); }
.duel-chat { display: grid; grid-template-columns: auto 1fr auto; gap: 2.2cqw; align-items: center; padding: 1.8cqh 2.4cqw; border-radius: 1.2cqw; background: var(--surface); }
.duel-chat .m-num { color: var(--live); }
/* 막대 + 그래프 */
.v-grid { grid-template-columns: 1.12fr 1fr; gap: 3.4cqw; align-items: center; }
.vrows { display: grid; gap: 3cqh; }
.vrow { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who num" "bar bar"; gap: 1.2cqh 1.4cqw; align-items: end; }
.vrow .m-who { grid-area: who; } .vrow .ruler { grid-area: bar; } .vrow .m-num { grid-area: num; }
.vrow.rex .m-num { color: var(--rex); } .vrow.judge .m-num { color: var(--deep); } .vrow.chatbar .m-num { color: var(--live); }
.v-grid .graph, .share .graph { width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: none; background: transparent; border: 2px solid var(--line); border-radius: 1cqw; }
.g-grid { stroke: var(--line); }
.g-tick { fill: var(--muted); font-family: var(--font); }
.g-axis, .g-rexlab { fill: var(--ink); font-family: var(--font); }
.g-linelab { font-family: var(--font); }

@keyframes scene-in { from { opacity: 0; transform: translateY(1.2cqh); } to { opacity: 1; transform: none; } }

/* ================= 노트북: 운전 화면(1366×768에서 스크롤 없이) ================= */
.s-headbar { padding: 8px 20px; min-height: 54px; border-bottom: 2px solid var(--orange); }
.s-headbar .status { font-size: 15px; }
.s-view:has(.s-drive) { width: min(1340px, calc(100% - 24px)); margin: 10px auto; padding: 14px 22px 16px; }
.s-drive { gap: 10px; }
.drive-top { gap: 12px; min-height: 46px; flex-wrap: nowrap; }
.speeds { margin-right: 0; flex: none; }
.speeds .lab { font-size: 16px; }
.speed { min-height: 44px; padding: 0 .6em; font-size: 22px; font-weight: 700; border: 2px solid var(--deep); background: #fff; }
.speed small { font-size: 13px; font-weight: 500; }
.speed.on { background: var(--char); color: #fff; border-color: var(--char); }
.rex-quip { position: static; min-width: 0; margin: 0; padding: 7px 14px; background: var(--rex); color: var(--char); border: 0; border-radius: var(--radius); font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: rise .25s ease-out; }
.scale-note { margin-left: auto; font-size: 18px; font-weight: 700; white-space: nowrap; }
.road-box { margin: 0 -22px; border-top: 0; border-bottom: 0; }
.road { height: 300px; }
.drive-chat { top: 8px; right: 14px; }
.chat-q { font-size: 20px; border: 0; border-radius: var(--radius); background: #fff; padding: 10px 12px; border: 2px solid var(--char); }
.chat-opts button { min-height: 46px; min-width: 64px; font-size: 22px; font-weight: 700; border: 2px solid var(--char); border-radius: 10px; background: var(--tint); }
.drive-bottom { grid-template-columns: minmax(0, 1fr) minmax(360px, 34%); gap: 14px; align-items: stretch; }
.result, .drive-side { height: 268px; min-height: 0; border: 0; border-radius: 16px; background: var(--tint); overflow: hidden; }
.result { padding: 12px 18px; gap: 8px; }
.result > .muted { font-size: 18px; }
.res-head { gap: 36px; }
.res-head .muted { font-size: 16px; }
.big-num { font-size: 44px; font-weight: 700; }
.big-num small { font-size: 18px; font-weight: 700; }
.ruler-form { background: #fff; border-radius: var(--radius); padding: 8px 12px; font-size: 17px; }
.record { font-size: 19px; font-weight: 700; }
.record .tag { border-radius: 6px; font-size: 15px; padding: 2px 8px; }
.reveal p { font-size: 17px; }
.result .small { font-size: 16px; }
.drive-side { padding: 10px 14px 8px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 2px; }
.drive-side h3 { font-size: 16px; }
.drive-side .graph { width: 100%; height: 100%; min-height: 0; background: transparent; border: 0; aspect-ratio: auto; }
.mine-note { font-size: 15px; color: var(--muted); }

/* ---------- 좁은 칠판 창·좁은 노트북 ---------- */
@media (max-width: 1100px) {
  .board { --bar-h: 76px; }
  .b-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 200px; }
  .screen { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px 16px 0 0; }
  .b-chat { margin: 0; height: 200px; grid-row: 3; border-left: 0; border-radius: 0 0 16px 16px; }
  .channel { grid-row: 2; height: auto; min-height: 64px; flex-wrap: wrap; padding: 8px 4px; }
  .b-teacher .t-btn { min-height: 52px; padding: 0 14px; }
  .b-teacher #b-next { min-width: 140px; font-size: 24px; }
  .t-tools { margin-right: 0; }
  .status { display: none; }
}
@media (prefers-reduced-motion: reduce) { .share, .player { animation: none !important; } }

/* --- 시안 다듬기 --- */
.live-pill { color: #fff; }
.chatlist li.rec { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; padding: 8px 10px; background: rgba(240, 240, 216, .08); }
.rec-cond { font-size: 20px; color: rgba(240, 240, 216, .74); }
.rec-val { grid-column: 1 / -1; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.drive-steps { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 12px; align-content: start; font-size: 22px; font-weight: 700; }
.drive-steps li { display: flex; gap: 12px; align-items: center; }
.drive-steps b { width: 36px; height: 36px; border-radius: 50%; background: var(--char); color: #fff; display: grid; place-items: center; font-size: 19px; flex: none; }
.dots { overflow: hidden; }
.t-stage { flex-shrink: 1; min-width: 0; }
@media (max-width: 1560px) { .dots { display: none; } .t-stage { margin-right: auto; } .t-tools { margin-right: 8px; } }
@media (max-width: 1560px) {
  .ch-title { font-size: 20px; }
  .ch-name { font-size: 16px; }
  .tv-btn { min-height: 52px; padding: 0 12px; font-size: 17px; }
  .tv-pos { display: none; }
  .tv-ctrl { gap: 6px; }
  .board .chip { font-size: 16px; padding: 0 12px; }
}
.road { height: clamp(250px, 39vh, 300px); }
.result, .drive-side { height: clamp(236px, 35vh, 268px); }