/* 렉스 판정단 v005 — 칠판 장면(영상이 아닌 방송 화면). 모두 .screen 안에서만 쓴다.
   글자 네 단계: 큰 숫자 7~11cqw · 제목 3.6cqw · 본문 2~2.4cqw(28px 이상) · 보조 1.45~1.8cqw(22px 이상) */
.screen .share-body { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 9cqh 5cqw 5cqh; gap: 3cqh; overflow: hidden; align-content: stretch; }
.screen .share-body > .sc-main:only-child { grid-row: 1 / -1; }
.screen .sc-head { display: grid; gap: .8cqh; }
.screen .vd-sub { font-size: max(var(--m24), 2cqw); color: var(--muted); }
.screen #b-verdict h2.vd-title { font-size: max(var(--m26), 2.6cqw); }
.screen .share h2 { font-size: max(var(--m28), 3.6cqw); line-height: 1.22; }
.screen .share h2.q { font-size: max(var(--m34), 5cqw); }
.screen .sc-sub { font-size: max(var(--m24), 2cqw); color: var(--muted); }
.screen .sc-main { display: grid; align-content: center; gap: 3cqh; min-height: 0; }
.screen .sc-note { font-size: max(var(--m22), 1.7cqw); color: var(--muted); }
.screen .share .lead { font-size: max(var(--m26), 2.4cqw); }
.screen .share .ruler { height: max(var(--m10), 1.6cqh); }
.screen .bl { border-bottom: 2px solid var(--cream); border-radius: .5cqw .5cqw 0 0; font-weight: 700; }
.screen .bl.empty { color: var(--muted); border-bottom-color: var(--line); }
.screen .bl.ok { background: var(--deep); color: var(--char); border-bottom-color: var(--deep); border-radius: .5cqw; }
.screen .bl.bad { border-bottom: 3px solid var(--bad); color: var(--bad); }
.screen .quote { background: var(--surface); border-radius: 1cqw; padding: 1.6cqh 1.4cqw; display: grid; gap: .5cqh; margin: 0; }
.screen .quote cite { font-style: normal; font-size: max(var(--m22), 1.45cqw); font-weight: 700; color: var(--muted); }
.screen .q-from { font-size: max(var(--m22), 1.5cqw); color: var(--muted); font-weight: 700; }
.screen .quote.rex { background: var(--rex); color: var(--char); }
.screen .quote.rex .q-from { color: var(--char); opacity: .75; }
.tv-small { font-size: max(var(--m22), 1.7cqw); color: rgba(240, 240, 216, .74); }
.screen .tv-card .line { font-size: max(var(--m26), 2.6cqw); }
.screen .hype-src { font-size: max(var(--m22), 1.45cqw); background: var(--char); color: rgba(240, 240, 216, .74); padding: .6em 1em; }

/* 이름표(너도양 모양 규칙): 흰 카드 + 주황 테두리 + 펀치 구멍. 판정단 이름에만 */
.ntag { display: inline-flex; align-items: center; position: relative; background: #fff; color: var(--char); border: 3px solid var(--orange); border-radius: .9cqw; padding: .08em .7em .08em 1.75em; font-weight: 700; font-size: max(var(--m22), 1.7cqw); white-space: nowrap; line-height: 1.5; }
.ntag::before { content: ""; position: absolute; left: .6em; top: 50%; width: .62em; height: .62em; transform: translateY(-50%); border: 3px solid var(--orange); border-radius: 50%; box-sizing: border-box; }
.ntag.big { font-size: max(var(--m26), 2.3cqw); }
.ntag.wait { background: transparent; color: var(--muted); border-style: dashed; border-color: var(--line); }
.ntag.wait::before { border-color: var(--line); }

/* 입장 */
.screen .share.sh-lobby .sc-main { justify-items: center; text-align: center; gap: 2.2cqh; }
.screen .join-how { font-size: max(var(--m26), 2.4cqw); color: var(--muted); }
.screen .join-url { font-size: max(var(--m30), 3.8cqw); font-weight: 700; white-space: nowrap; }
.screen .room-code { font-size: 30cqh; font-weight: 700; line-height: 1; letter-spacing: .06em; color: var(--deep); }
.screen .joined { display: flex; gap: 1.6cqw; justify-content: center; margin-top: 1cqh; }

/* 순위 */
.screen .rank { list-style: none; padding: 0; margin: 0; display: grid; gap: 2cqh; max-width: none; }
.screen .rank li { display: grid; grid-template-columns: 6cqw 1fr auto; align-items: center; border: 0; border-radius: 1.2cqw; background: var(--surface); padding: 2.4cqh 2.6cqw; font-size: max(var(--m28), 3.2cqw); }
.screen .rank li.rex { background: var(--rex); color: var(--char); }
.screen .rank-n { font-weight: 700; color: var(--muted); }
.screen .rank li.rex .rank-n { color: var(--char); }
.screen .rank-name { font-weight: 700; display: flex; align-items: center; gap: 1.2cqw; }
.screen .rank .av { width: 6cqw; height: 6cqw; border-radius: 50%; object-fit: cover; border: .25cqw solid var(--char); }
.screen .rank-t { font-weight: 700; font-size: max(var(--m32), 4.6cqw); font-variant-numeric: tabular-nums; }
.screen .rank-t small { font-size: .5em; margin-left: .1em; }

/* 배움 문제 */
.screen .share.sh-question h2.q { font-size: max(var(--m40), 6.4cqw); text-wrap: balance; }
.screen .share.sh-question .sc-main { gap: 4cqh; }
.screen .crit-q { font-size: max(var(--m28), 3.2cqw); color: var(--muted); font-weight: 700; }
.screen .crit-a { font-size: max(var(--m32), 4cqw); font-weight: 700; color: var(--char); background: var(--deep); justify-self: start; padding: .2em .6em; border-radius: 1cqw; animation: rise .35s ease-out; }

/* 예측 */
.screen .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.4cqw; align-items: stretch; }
.screen .vs-card { border: 0; border-radius: 1.2cqw; padding: 3cqh 2.4cqw; display: grid; gap: 1cqh; background: var(--surface); }
.screen .vs-card.rex { background: var(--rex); color: var(--char); }
.screen .vs-name { font-weight: 700; font-size: max(var(--m28), 3cqw); }
.screen .vs-num { font-weight: 700; font-size: max(var(--m26), 2.3cqw); }
.screen .vs-sub { font-size: max(var(--m22), 1.8cqw); font-weight: 500; border-top: 2px solid currentColor; padding-top: .5em; color: inherit; }
.screen .vs-x { font-weight: 700; font-size: 3cqw; align-self: center; color: var(--muted); }
.screen .votes, .screen .tr-ans { display: grid; gap: 1.8cqh; }
.screen .vote { display: flex; flex-wrap: wrap; gap: 1cqh 1.4cqw; align-items: center; border: 0; padding: 0; font-size: max(var(--m26), 2cqw); }
.screen .vote .blanks { line-height: 1.6; }
.screen .vote.wait { color: var(--muted); }
.screen .vote-why { color: var(--muted); font-size: max(var(--m22), 1.7cqw); }
.screen .vote .pick { font-weight: 700; padding: .05em .6em; border-radius: .6cqw; }
.screen .vote .pick.ok { background: var(--deep); color: var(--char); }
.screen .vote .pick.bad { color: var(--bad); border-bottom: 3px solid var(--bad); }

/* 1학기 단서 */
.screen .clue-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.screen .slot { display: grid; gap: .6cqh; padding: 1.4cqh 1.4cqw; border: 2px solid var(--line); border-radius: 1cqw; background: transparent; color: var(--cream); }
.screen .slot.now { border-color: var(--cream); }
.screen .slot.on { border-color: var(--deep); background: var(--deep); color: var(--char); }
.screen .slot-n { font-weight: 700; font-size: max(var(--m22), 1.45cqw); color: var(--muted); }
.screen .slot.on .slot-n { color: var(--char); }
.screen .slot-name { font-weight: 700; font-size: max(var(--m24), 2cqw); }
.screen .clue-slots.big .slot { padding: 4cqh 2cqw; gap: 2.4cqh; }
.screen .clue-slots.big .slot-name { font-size: 9cqw; line-height: 1; text-align: center; color: var(--muted); }
.screen .clue-slots.big .slot-n { font-size: max(var(--m24), 1.9cqw); }
.screen .clue-play, .screen .clue-got { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--char); border-radius: inherit; animation: scene-in .32s ease-out both; }
.screen .clue-play .clue-slots, .screen .clue-got .clue-slots { padding: 2cqh 2cqw 1.6cqh; }
.screen .clue-play .player { position: relative; inset: auto; animation: none; }
.screen .got-row { display: grid; grid-template-columns: 47% minmax(0, 1fr); gap: 2.4cqw; padding: 0 2cqw 2cqh; min-height: 0; }
.screen .got-left { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2.2cqh; min-height: 0; }
.screen .got-video { position: relative; aspect-ratio: 16 / 9; border-radius: 1cqw; overflow: hidden; }
.screen .got-video .player { position: absolute; inset: 0; animation: none; }
.screen .got-video .tv-ready { gap: 2.4cqh; }
.screen .got-video .tv-ready img { width: 13cqw; }
.screen .got-video .tv-ready .btn { font-size: max(var(--m22), 1.9cqw); min-height: 7cqh; }
.screen .got-video .live-pill { top: 1.6cqh; left: 1cqw; }
.screen .answers { display: grid; gap: 1.6cqh; align-content: start; border: 0; padding: 0; font-size: max(var(--m24), 1.9cqw); }
.screen .ans-row { display: flex; flex-wrap: wrap; gap: 1cqh 1cqw; align-items: center; }
.screen .clue-card { padding: 0; border: 0; display: grid; gap: 1.6cqh; align-content: start; overflow: visible; min-height: 0; }
.screen .clue-card .got { font-weight: 700; font-size: max(var(--m22), 1.6cqw); color: var(--muted); text-decoration: none; margin-top: -1cqh; }
.screen .clue-card h3 { font-size: max(var(--m28), 3.2cqw); }
.screen .got-line { font-weight: 700; background: var(--deep); color: var(--char); padding: .35em .7em; border-radius: .8cqw; font-size: max(var(--m24), 1.9cqw); text-decoration: none; }
.screen .clue-card .quote { font-size: max(var(--m24), 1.75cqw); }
.screen .clue-note { font-size: max(var(--m22), 1.5cqw); color: var(--muted); }
.screen .share.sh-sim h2 { font-size: max(var(--m28), 2.9cqw); }
.screen .clue-live, .screen .note-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.screen .live-card { border: 0; border-radius: 1.2cqw; background: var(--surface); padding: 2.6cqh 2cqw; display: grid; gap: 1.6cqh; font-size: max(var(--m24), 2cqw); justify-items: start; }
.screen .live-card > * { width: 100%; }
.screen .live-card > .ntag { width: auto; }
.screen .lc-line { font-size: max(var(--m26), 2.1cqw); font-weight: 700; }
.screen .lc-sub { font-size: max(var(--m22), 1.6cqw); color: var(--muted); }
.screen .live-card .ruler { height: 2.4cqh; }
.screen .np-num { font-size: 9cqw; font-weight: 700; line-height: 1; color: var(--deep); }
.screen .np-num small { font-size: .3em; color: var(--muted); margin-left: .2em; }
.screen .mini-road { position: relative; height: 9cqh; background: var(--char); border-top: .5cqh solid #D8CCB4; border-bottom: .5cqh solid #D8CCB4; margin: 4.4cqh 0 1cqh; }
.screen .mini-road::after { content: ""; position: absolute; inset: 0; background: rgba(196, 64, 52, .56); }
.screen .mr-flag { position: absolute; left: 0; top: -3cqh; bottom: -1cqh; width: 3px; background: var(--cream); z-index: 2; }
.screen .mr-flag.end { background: var(--live); }
.screen .mr-car { position: absolute; top: 50%; height: 7.2cqh; width: auto; transform: translate(-100%, -50%) rotate(90deg); z-index: 3; }
.screen .mr-lab { position: absolute; right: .8cqw; top: -4.4cqh; font-weight: 700; font-size: max(var(--m22), 1.8cqw); }
.screen .mini-cmp { display: grid; gap: 1.2cqh; margin: 1cqh 0; }
.screen .mini-bar { display: grid; grid-template-columns: 15cqw 1fr 6cqw; gap: 1cqw; align-items: center; font-size: max(var(--m22), 1.6cqw); }
.screen .mb-track { height: 2.4cqh; border: 0; background: rgba(240, 240, 216, .12); border-radius: 99px; overflow: hidden; }
.screen .mb-fill { display: block; height: 100%; background: var(--cream); }
.screen .mini-bar.rex .mb-fill { background: var(--rex); }
.screen .mini-bar.real .mb-fill { background: var(--deep); }
.screen .mini-bar b { text-align: right; }
.screen .hypo-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2.4cqw; align-items: stretch; font-size: max(var(--m26), 2.4cqw); font-weight: 700; }
.screen .hypo-vs .quote { align-content: center; padding: 3cqh 2cqw; }

/* 그래프 */
.screen .g-row { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 2.4cqw; align-items: stretch; min-height: 0; }
.screen .share.sh-graph .graph { height: 54cqh; aspect-ratio: auto; }
.screen .sec-bars { border: 0; border-radius: 1.2cqw; background: var(--surface); padding: 2.4cqh 1.6cqw; display: grid; gap: 1.8cqh; align-content: center; }
.screen .sec-title { font-weight: 700; font-size: max(var(--m22), 1.7cqw); }
.screen .sec-bar { display: grid; grid-template-columns: 5.4em 1fr 3.6em; gap: .8cqw; align-items: center; font-size: max(var(--m22), 1.6cqw); }
.screen .sec-lab { font-weight: 700; }
.screen .sec-track { height: 2.2cqh; border: 0; background: rgba(240, 240, 216, .12); border-radius: 99px; overflow: hidden; }
.screen .sec-fill { display: block; height: 100%; }
.screen .sec-val { text-align: right; font-weight: 700; }
.screen .legend { display: flex; flex-wrap: wrap; gap: .4em .6em; align-items: center; color: var(--muted); font-size: max(var(--m22), 1.6cqw); }
.lg-dot { width: 1em; height: 1em; border-radius: 50%; background: var(--orange); border: 2px solid var(--cream); display: inline-block; }
.lg-dot.ring { background: transparent; border: 4px solid var(--orange); margin-left: .8em; }
.lg-line { width: 2.4em; border-top: 3px dashed var(--cream); display: inline-block; margin-left: .8em; }

/* 판정: 같은 거리·가설·안전장치 */
.screen #b-verdict h2 { font-size: max(var(--m30), 4cqw); line-height: 1.2; }
.screen .same { display: grid; gap: 2.4cqh; }
.screen .same-row { display: grid; grid-template-columns: 22cqw minmax(0, 1fr) auto; gap: 2cqw; align-items: end; }
.screen .same-track { position: relative; padding-top: 5.8cqh; }
.screen .same-car { position: absolute; bottom: 2.6cqh; width: 4.4cqh; height: auto; margin-left: -4.03cqh; transform: translateX(-50%) rotate(90deg); transition: left .8s cubic-bezier(.2, .7, .2, 1); }
.screen .ask { font-weight: 700; font-size: max(var(--m28), 3cqw); }
.screen .ask.dim { font-weight: 500; color: var(--muted); font-size: max(var(--m26), 2.3cqw); }
.screen .hypo-line { font-size: max(var(--m26), 2.4cqw); line-height: 1.45; text-wrap: balance; }
.screen .quote.big { font-size: max(var(--m28), 3.2cqw); font-weight: 700; padding: 3cqh 2.4cqw; }
.screen .stamp { display: inline-block; justify-self: start; font-weight: 700; font-size: max(var(--m26), 2.8cqw); color: var(--bad); border: .35cqw solid var(--bad); border-radius: .8cqw; padding: .15em .7em; transform: rotate(-2deg); animation: stamp .45s cubic-bezier(.2, 1.4, .4, 1) both .3s; }
@keyframes stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.6); } to { opacity: 1; transform: rotate(-2deg) scale(1); } }
.screen .safety { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; }
.screen .safety article { border: 0; border-radius: 1.2cqw; background: var(--surface); padding: 3cqh 1.8cqw; display: grid; gap: 1.4cqh; align-content: start; font-size: max(var(--m24), 1.8cqw); }
.screen .safety h3 { font-size: max(var(--m26), 2.2cqw); }
.screen .safety-videos { display: flex; gap: 1cqw; align-items: center; flex-wrap: wrap; }
.screen .sv-lab { font-size: max(var(--m22), 1.6cqw); color: var(--muted); }
.screen .safety-videos .btn { min-height: max(var(--m56), 7cqh); font-size: max(var(--m22), 1.6cqw); padding: 0 1.2em; }
.video-dlg { border: 0; border-radius: 16px; padding: 16px; background: #fff; color: var(--char); }
.video-dlg .btn { justify-self: end; min-height: 60px; min-width: 160px; font-size: 22px; }

/* 댓글·노트·새 상황·정리 */
.screen .tv-comment { grid-template-columns: 30% minmax(0, 1fr); gap: 4cqw; padding: 6cqh 5cqw; }
.screen .rex-read { border: 0; border-radius: 1.4cqw; }
.screen .cm-pop { background: var(--cream); color: var(--char); border: .3cqw solid var(--orange); border-radius: 1.4cqw; padding: 4cqh 3cqw; gap: 2.4cqh; font-size: max(var(--m28), 2.8cqw); font-weight: 700; }
.screen .cm-pop p b { display: block; font-size: max(var(--m22), 1.6cqw); opacity: .7; }
.screen .cm-pop .cm-who { font-size: max(var(--m22), 1.7cqw); font-weight: 700; display: flex; align-items: center; gap: .5em; color: var(--char); }
.screen .cm-pop .cm-next { font-size: max(var(--m22), 1.5cqw); font-weight: 500; opacity: .7; }
.screen .clist, .screen .wrap-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; align-items: stretch; }
.screen .cm { min-height: 34cqh; border: 0; border-radius: 1.2cqw; background: var(--surface); padding: 3cqh 2cqw; display: grid; gap: 1.8cqh; align-content: start; font-size: max(var(--m26), 2.2cqw); justify-items: start; }
.screen .cm.wait { color: var(--muted); }
.screen .cm p b { display: block; font-size: max(var(--m22), 1.5cqw); color: var(--muted); font-weight: 700; }
.screen .wa-final { font-weight: 700; font-size: max(var(--m28), 2.6cqw); }
.screen .wa-self { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; font-size: max(var(--m22), 1.6cqw); color: var(--muted); }
.screen .wa-dots { display: inline-flex; gap: .3em; }
.screen .dotc { display: inline-block; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; border: 2px solid var(--cream); background: transparent; padding: 0; }
.screen .dotc.on { background: var(--deep); border-color: var(--deep); }
.screen .wa-me { font-size: max(var(--m24), 1.9cqw); }
.screen .share.sh-note .share-body { padding: 9cqh 3.4cqw 3cqh; gap: 1.6cqh; }
.screen .share.sh-note h2 { font-size: max(var(--m28), 3cqw); }
.screen .note-rows { display: grid; }
.screen .note-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 12.5cqw 12.5cqw; gap: 1.2cqw; align-items: center; padding: 1.2cqh 0; border-top: 2px solid var(--line); font-size: max(var(--m22), 1.8cqw); }
.screen .note-row.head { border-top: 0; padding: 0 0 .8cqh; }
.screen .nr-n { font-weight: 700; color: var(--muted); }
.screen .note-row .blanks { line-height: 1.42; }
.screen .note-row .blanks .bl.empty { min-width: 2.4em; }
.screen .nr-pick { display: flex; flex-direction: column; gap: .4cqh; align-items: flex-start; font-size: max(var(--m22), 1.6cqw); }
.screen .nr-pick .bl { min-width: 0; margin: 0; }
.screen .rex-line { display: grid; grid-template-columns: auto 1fr; gap: 1.6cqw; align-items: center; font-size: max(var(--m26), 2.2cqw); background: var(--surface); border-radius: 1.2cqw; padding: 2cqh 1.8cqw; }
.screen .rex-line img { width: 7cqw; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: .25cqw solid var(--rex); }
.screen .tr-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.screen .tr-box { border: 0; border-radius: 1.2cqw; background: var(--surface); padding: 2.4cqh 2cqw; min-width: 0; display: grid; gap: .6cqh; }
.screen .tr-box.warn { outline: .3cqw solid var(--live); outline-offset: -.3cqw; }
.screen .tr-lab, .screen .tr-sub { font-size: max(var(--m22), 1.7cqw); color: var(--muted); }
.screen .tr-num { font-weight: 700; font-size: 7cqw; line-height: 1; }
.screen .tr-num small { font-size: .4em; }
.screen .tr-box.warn .tr-num { color: var(--live); }
.screen .final-card { display: grid; grid-template-columns: 30cqw 1fr; gap: 5cqw; align-items: center; }
.screen .final-card img { width: 100%; aspect-ratio: 1; border-radius: 50%; border: .6cqw solid var(--deep); object-fit: cover; }
.screen .final-card > div { display: grid; gap: 2cqh; justify-items: start; }
.screen .final-kicker { font-size: max(var(--m22), 1.8cqw); color: var(--muted); }
.screen .final-old { font-size: max(var(--m26), 2.6cqw); color: var(--muted); text-decoration: line-through; }
.screen .final-new { font-weight: 700; font-size: 8cqw; line-height: 1.05; }
.screen .final-card .btn { min-height: max(var(--m56), 8cqh); font-size: max(var(--m22), 1.8cqw); padding: 0 1.4em; }
.b-manual { border: 2px solid var(--char); border-radius: var(--radius); bottom: calc(var(--bar-h, 92px) + 12px); font-size: 18px; }
.b-manual select, .b-manual input { font-size: 18px; min-height: 44px; }

/* 글자 바닥값(1920 칠판에서 22px 아래로 내려가지 않게). 무대가 좁은 작은 칠판에서는 바닥값을 낮춰 넘치지 않게 한다. */
.screen, .ntag { --m10: 10px; --m18: 18px; --m22: 22px; --m24: 24px; --m26: 26px; --m28: 28px; --m30: 30px; --m32: 32px; --m34: 34px; --m40: 40px; --m56: 56px; }
@container (max-width: 1200px) { .screen > * { --m10: 7px; --m18: 12px; --m22: 15px; --m24: 16px; --m26: 17px; --m28: 18px; --m30: 20px; --m32: 21px; --m34: 22px; --m40: 26px; --m56: 48px; } }