/* 핸즈업 보드 — 젠스파크 핸드오프 토큰 (2026-09-02 적용)
   판단 기준: 곁눈질 1초 가독성. 신호 3색 = 제품 규칙(초록 다 했어요 · 노랑 진행 중 · 빨강 도움).
   그림자 없음 — 1px 보더만. 외부 폰트·아이콘 CDN 없음(강의장 네트워크 전제). */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:#F7F8FA; --card:#FFFFFF; --line:#E5E7EB; --line2:#D1D5DB; --div:#EEF0F3;
  --ink:#0F172A; --sub:#475569; --mute:#5F6B7A; --mute-deco:#94A3B8; /* mute 5.43:1 on white — 옛 #94A3B8(2.56)은 장식 전용 */
  --primary:#0F172A; --primary-ink:#FFFFFF;
  --go:#137A4A;  --go-bg:#E9F6EF;  --go-line:#B7E1CB;
  --wait:#7A5B00; --wait-bg:#FFF5D8; --wait-line:#F1D98A; /* 5.81:1 on wait-bg — 투사 시 번짐 여유 */
  --stop:#B13D36; --stop-bg:#FFF0EE; --stop-line:#F3C7C2;
  --empty-bg:#F3F4F6;
  --warn-bg:#FFF9E6; --warn-line:#F1D98A; --warn-ink:#7A5B00; --warn-dot:#F59E0B;
  --indigo-bg:#EEF2FF; --indigo:#3730A3; --indigo-line:#C7D2FE;
  --ended-bg:#F1F5F9; --linkbtn-bg:#F8FAFC;
  --code-bg:#0F172A; --code-fg:#E2E8F0; --code-key:#7DD3FC; --code-sub:#FDE68A;
  /* 옛 이름 별칭 — 페이지·개선안 코드가 참조 */
  --canvas:var(--bg); --surface:var(--card); --subtle:var(--empty-bg);
  --muted:var(--sub); --faint:var(--mute);
  --r:10px; --r-sm:6px; --r-base:8px; --r-lg:12px;
  --seat:44px;
  --f:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:14px;line-height:1.5;
  word-break:keep-all;font-feature-settings:"tnum" 1;-webkit-text-size-adjust:100%}
#app{max-width:560px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh}
#app.wide{max-width:1280px}
.hp #app{max-width:820px}   /* 보조강사 태블릿 폭 */
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--go);outline-offset:2px}
h1,h2,p{margin:0}
small{font-size:inherit}
.pg{padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px}
#app.wide .pg{padding:20px 24px}
.cap{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.sl{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.sl .cap{flex:1}
.sl .sr{font-size:11px;font-weight:600;color:var(--mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vsep{display:inline-block;width:1px;height:14px;background:var(--div)}

/* ── 상단바 ─────────────────────────────────────── */
header.bar{background:var(--card);border-bottom:1px solid var(--div);padding:12px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#app.wide header.bar{padding:14px 24px;gap:20px}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.logo{width:26px;height:26px;border-radius:7px;background:var(--primary);color:#fff;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.bt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.bt small{font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.bt b{font-size:15px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
#app.wide .bt b{font-size:14px;font-weight:800;letter-spacing:-.3px}
.who-badge{font-size:11px;font-weight:600;color:var(--sub);background:var(--ended-bg);
  padding:3px 8px;border-radius:999px;white-space:nowrap;margin-left:2px}
.bright{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;color:var(--mute);white-space:nowrap}
/* 연결 pill — client.js paintNet()이 .dot[data-net]을 직접 찍는다. inline style 금지. */
.dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 8px;border-radius:999px;color:var(--go);background:var(--go-bg);border:1px solid var(--go-line);flex:none}
.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.dot::after{content:"연결됨"}
.dot[data-net="off"]{color:var(--stop);background:var(--stop-bg);border-color:var(--stop-line)}
.dot[data-net="off"]::after{content:"연결 끊김"}
.dot[data-net="wait"]{color:var(--sub);background:var(--ended-bg);border-color:var(--line)}
.dot[data-net="wait"]::after{content:"연결 중"}

/* ── 알림·배너 ─────────────────────────────────── */
.notice{background:var(--warn-bg);color:var(--warn-ink);border-bottom:1px solid var(--warn-line);
  padding:8px 14px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notice::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn-dot);flex:none}
.notice .nr{margin-left:auto;color:var(--sub);font-weight:500}
.notice.ok{background:var(--go-bg);color:var(--go);border-color:var(--go-line)}
.notice.ok::before{background:var(--go)}
.pg .notice{border:1px solid var(--warn-line);border-radius:var(--r)}
.pg .notice.ok{border-color:var(--go-line)}
.empty{color:var(--sub);font-size:13px;margin:0}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--primary);color:var(--primary-ink);border-radius:999px;padding:12px 18px;font-size:13px;font-weight:600;
  display:flex;gap:14px;align-items:center;z-index:40;white-space:nowrap;max-width:calc(100vw - 32px)}
.toast button{color:#fff;text-decoration:underline;font-weight:700}

/* ── 미션 카드 (참가자·보조강사) ─────────────────── */
.stepbar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stepbar .band{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--mute);margin-bottom:6px}
.stepbar .title{font-size:16px;font-weight:800;letter-spacing:-.3px;line-height:1.35}
.stepbar .dw{margin-top:10px;padding:10px 12px;background:var(--go-bg);border:1px solid var(--go-line);border-radius:var(--r-base);
  font-size:13px;font-weight:600;color:var(--go);line-height:1.5}
.stepbar .dw small{display:block;font-size:10px;letter-spacing:.4px;text-transform:uppercase;font-weight:700;margin-bottom:2px}
.stepbar.flash{animation:flash 3s ease-out forwards}
@keyframes flash{from{border-color:var(--go);box-shadow:0 0 0 2px var(--go)}to{border-color:var(--line);box-shadow:none}}
@media (prefers-reduced-motion:reduce){.stepbar.flash{animation:none;border-color:var(--go)}}

/* ── 참가자 ───────────────────────────────────── */
.pt .room{--seat:40px}
.rn .room{--seat:58px}
.ptitle{font-size:20px;font-weight:800;letter-spacing:-.4px;margin-bottom:4px}
.pdesc{font-size:13px;color:var(--sub);line-height:1.5;margin-bottom:4px}
.signal{border-radius:var(--r-lg);padding:20px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;
  background:var(--wait-bg);border:1px solid var(--wait-line);color:var(--wait);transition:background .15s}
.signal[data-s="done"]{background:var(--go-bg);border-color:var(--go-line);color:var(--go)}
.signal[data-s="help"]{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop)}
.signal[data-pending="1"]{border-style:dashed}
.signal .who{font-size:11px;font-weight:700;letter-spacing:.4px;margin-bottom:8px}
.signal .face{font-size:44px;line-height:1;margin-bottom:8px}
.signal .say{font-size:20px;font-weight:800;letter-spacing:-.4px}
.signal .sub{font-size:12px;font-weight:500;margin-top:6px}
.signal .pend{font-size:12px;font-weight:600;margin-top:10px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.7)}
.mini{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  display:flex;align-items:center;gap:14px;font-size:13px;color:var(--sub)}
.mini b{font-size:15px;font-weight:800;margin-left:2px}
.mini span:first-child b{color:var(--go)}
.mini span:nth-of-type(2) b{color:var(--stop)}
.mini .mr{margin-left:auto;font-size:11px;font-weight:600;color:var(--mute)}
.linkish{width:100%;background:transparent;color:var(--sub);border:1px dashed var(--line2);border-radius:var(--r-base);
  padding:10px;font-size:13px;font-weight:600}
.leaveq{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.leaveq .danger{margin-left:auto}
.leaveq .linkish{width:auto;border:0;text-decoration:underline;padding:6px}

/* 참가자 상태 버튼 — 하단 고정(엄지 존). render()가 DOM을 통째로 갈아엎어도 fixed라 흔들리지 않는다 */
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pt .actions{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--div);z-index:30}
.pt #app.seated{padding-bottom:170px}
.pt #app.seated .pg{flex:1}
.pt #app.seated .signal{flex:1;justify-content:center;min-height:180px}   /* 남는 세로 공간은 상태 카드가 채운다 */
.btn{border-radius:var(--r-lg);padding:14px 8px;font-size:15px;font-weight:800;text-align:center;line-height:1.2;
  display:flex;flex-direction:column;align-items:center;gap:6px;border:1px solid transparent;min-height:56px;transition:transform .06s}
.btn:active{transform:scale(.98)}
.btn .ic{font-size:28px;line-height:1}
.btn.done{background:var(--go);color:#fff;border-color:var(--go)}
.btn.help{background:var(--card);color:var(--stop);border:1.5px solid var(--stop)}
.btn.ghost{background:var(--card);border:1px solid var(--line2);color:var(--sub);font-weight:600;font-size:13px;padding:10px;min-height:0}
.btn.wide{grid-column:1/-1}
.btn[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--ink);cursor:default}

/* ── 좌석 지도 ──────────────────────────────────── */
.room{display:block;width:100%;overflow:hidden}
.roomfit{display:block;overflow:hidden}
.roomgrid{display:inline-flex;flex-direction:column;align-items:stretch;gap:10px;vertical-align:top}
.roomgrid.side{flex-direction:row}
.mapbody{display:block}
.screen{align-self:stretch;height:26px;border-radius:var(--r-sm);background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:2px;padding-left:2px;opacity:.9}
.pt .screen{width:100%;height:auto;padding:8px 0 8px 2px;opacity:1}
.screen.v{width:26px;height:auto;align-self:stretch;writing-mode:horizontal-tb;padding:10px 0;font-size:11px;line-height:1.35;letter-spacing:0;display:flex;align-items:center;justify-content:center;text-align:center}
.tables{display:grid;gap:14px;justify-content:start;width:max-content}
.hp .tables{gap:16px}
.rn .tables{gap:22px}
.pt .tables{gap:10px}
.maproom{display:grid;gap:6px;justify-content:start;width:max-content;max-width:100%;overflow-x:auto;padding:6px}  /* padding: 점멸 그림자·포커스 링이 스크롤 박스에 잘리지 않게 */
.gap{display:block;width:var(--seat);height:var(--seat)}
/* 참가자(.pt)는 roomHTML이 폰 폭에 맞춰 --seat·조 열 수를 인라인으로 계산한다. 태블릿·노트북 화면만 좁아지면 2열로 접는다 */
@media (max-width:520px){.hp .tables,.rn .tables{grid-template-columns:repeat(2,auto) !important}}
.table{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.pt .table{padding:8px;gap:6px}
.tname{font-size:11px;font-weight:600;color:var(--sub);letter-spacing:-.2px}
.pt .tname{font-size:10px;font-weight:700}
.seatgrid{display:grid;gap:6px}
.pt .seatgrid{gap:5px}
.seat{width:var(--seat);height:var(--seat);border-radius:9px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--empty-bg);border:1px solid var(--line);color:var(--mute);padding:0}
.seat .n{font-size:11px;font-weight:700;letter-spacing:-.2px;line-height:1}
.seat .m{font-size:13px;line-height:1;margin-top:3px}
.seat .m:empty{display:none}
.seat[data-s=""] .n{font-size:14px}
.seat .by{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:999px;background:var(--primary);color:#fff;
  font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin:0}
.seat[data-mine="1"]{outline:2px solid var(--ink);outline-offset:-2px}
.seat[data-focus="1"]{outline:3px solid var(--ink);outline-offset:2px}
/* 참가자 자리 고르기: 상태 색 없음 — 고를 수 있는 자리 / 이미 앉은 자리 */
.pt .seat{border-radius:var(--r-base)}
.seat[data-s=""]{background:var(--card);border:1px solid var(--line2);color:var(--ink);cursor:pointer}
.seat[data-s="taken"]{background:var(--line);border:1px solid var(--line2);color:var(--sub);cursor:default}
.pt .seat[data-s="taken"] .n{font-size:10px}
.pt .seat[data-s="taken"] .m{font-size:12px;margin-top:2px;font-weight:700}   /* ✕ — 색이 아니라 기호로 구분 */
/* 신호등 (강사·보조강사·어드민 미리보기) */
.lamp .seat[data-s=""]{background:var(--empty-bg);border:1px solid var(--line);color:var(--mute);cursor:default}
.lamp .seat[data-s="done"]{background:var(--go-bg);border-color:var(--go-line);color:var(--go)}
.lamp .seat[data-s="wait"]{background:var(--wait-bg);border-color:var(--wait-line);color:var(--wait)}
.lamp .seat[data-s="help"]{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(177,61,54,.30)}50%{box-shadow:0 0 0 6px rgba(177,61,54,0)}}
@media (prefers-reduced-motion:reduce){.lamp .seat[data-s="help"]{animation:none}}
.mapcard.only-left .lamp .seat[data-s="done"]{opacity:.3}
/* 범례 칩 */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;
  background:var(--empty-bg);color:var(--sub);border:1px solid var(--line)}
.chip i{font-style:normal;font-size:12px;line-height:1}
.chip.ok{background:var(--go-bg);color:var(--go);border-color:var(--go-line)}
.chip.wip{background:var(--wait-bg);color:var(--wait);border-color:var(--wait-line)}
.chip.help{background:var(--stop-bg);color:var(--stop);border-color:var(--stop-line)}
.chip.empty{color:var(--mute)}
.legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--mute);white-space:nowrap}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--go)}

/* ── 완료율 ─────────────────────────────────────── */
.rate{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.rrow{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.rpct{font-size:56px;font-weight:800;line-height:1;letter-spacing:-2px;color:var(--go)}
.runit{font-size:20px;font-weight:800;color:var(--go)}
.rdetail{margin-left:auto;font-size:12px;font-weight:600;color:var(--sub)}
.rbar{height:8px;border-radius:999px;overflow:hidden;border:1px solid var(--line);display:flex;margin-top:12px;background:var(--card)}
.rbar i{display:block;height:100%;background:var(--go);transition:width .3s;flex:none}
.rbar i.wip{background:var(--wait)}
.rbar i.hlp{background:var(--stop)}

/* ── 80% 게이트 콜아웃 ──────────────────────────── */
.gate{background:var(--wait-bg);border:1px solid var(--wait-line);border-radius:var(--r);padding:14px;color:var(--wait)}
.gate .ghead{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:15px}
.gate b{font-size:13px;font-weight:800}
.gate p{font-size:12px;line-height:1.5}
.gate.open{background:var(--go-bg);border-color:var(--go-line);color:var(--go)}
.gbar{height:6px;background:#fff;border-radius:999px;overflow:hidden;border:1px solid var(--wait-line);margin-top:10px}
.gbar i{display:block;height:100%;background:var(--wait);transition:width .3s}
.gate.open .gbar{border-color:var(--go-line)} .gate.open .gbar i{background:var(--go)}
.glab{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;font-weight:700}
.gchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.seatchip{font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;border:1px solid var(--wait-line);background:#fff;color:var(--wait);line-height:1.3}
.seatchip[data-s="help"]{color:var(--stop);border-color:var(--stop-line);background:var(--stop-bg)}
.seatchip.more{color:var(--sub);border-color:var(--line);background:var(--empty-bg);cursor:default}

/* ── 대기열 ─────────────────────────────────────── */
.kpis{display:flex;gap:10px;flex-wrap:wrap}
.kpi{flex:1;min-width:120px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
@media (max-width:520px){.kpis{display:grid;grid-template-columns:1fr 1fr}.kpi{min-width:0}}
.kpi .v{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:4px;line-height:1.1}
.kpi .u{font-size:13px;font-weight:600;color:var(--sub);margin-left:4px;letter-spacing:0}
.kpi[data-k="help"] .v{color:var(--stop)} .kpi[data-k="wip"] .v{color:var(--wait)} .kpi[data-k="done"] .v{color:var(--go)}
.queue{display:flex;flex-direction:column}
.qhead{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.qhead h2{font-size:18px;font-weight:800;letter-spacing:-.4px}
.qhead .qsub{font-size:13px;font-weight:600;color:var(--sub)}
.qcount{background:var(--stop-bg);color:var(--stop);border:1px solid var(--stop-line);
  min-width:26px;height:26px;border-radius:999px;display:inline-grid;place-items:center;font-weight:800;font-size:13px;padding:0 8px;align-self:center}
.qcount[data-zero="1"]{background:var(--empty-bg);color:var(--sub);border-color:var(--line)}
.qfresh{margin-left:auto;font-size:11px;font-weight:600;color:var(--mute)}
.qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qrow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;flex-wrap:wrap}
.qrow[data-urgent="1"]{border-color:var(--stop-line);box-shadow:inset 3px 0 0 var(--stop)}
.qrow[data-claimed="1"]{background:var(--bg)}
.qrow.mine{border-color:var(--go-line);background:var(--go-bg)}
.qico{width:44px;height:44px;border-radius:10px;background:var(--stop-bg);border:1px solid var(--stop-line);display:grid;place-items:center;font-size:16px;flex:none}
.qmain{flex:1;min-width:140px}
.qmain .l1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seatname{font-size:17px;font-weight:800;letter-spacing:-.3px}
.scode{font-size:12px;font-weight:600;color:var(--sub);font-family:var(--mono)}
.qmain .l2{margin-top:4px;font-size:12px;color:var(--sub)}
.qtag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--wait-bg);color:var(--wait);border:1px solid var(--wait-line)}
.qtag.lag{background:var(--indigo-bg);color:var(--indigo);border-color:var(--indigo-line)}
.qtag.stop{background:var(--stop-bg);color:var(--stop);border-color:var(--stop-line)}
.wait{min-width:64px;text-align:right}
.wait b{display:block;font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1.1}
.wait small{font-size:11px;font-weight:600;color:var(--mute)}
.qrow[data-urgent="1"] .wait b{color:var(--stop)}
.qbtn{border-radius:var(--r-base);padding:9px 14px;font-size:14px;font-weight:600;line-height:1.2;background:var(--stop);color:#fff;border:1px solid var(--stop);min-width:140px}
.qbtn.sec{background:var(--card);border-color:var(--line2);color:var(--ink)}
.qbtn.big{width:100%;min-height:56px;font-size:17px}
.qbtn[disabled]{opacity:.45;cursor:default}
.qbtns{display:flex;gap:8px;flex-wrap:wrap}
.qbtns .qbtn{min-width:0}
.qhero{border:2px solid var(--stop);background:var(--stop-bg);border-radius:var(--r-lg);padding:16px}
.qhero .seatname{font-size:26px}
.qhero .wait b{font-size:26px}
.qrow .qtitle{font-size:12px;color:var(--sub);width:100%}
/* 강사용 얇은 리스트 */
.rn .qrow{padding:10px 12px;border-radius:var(--r-base);gap:10px}
.rn .qrow[data-urgent="1"]{background:var(--stop-bg);box-shadow:none}
.rn .seatname{font-size:13px;font-family:var(--mono)}
.rn .qrow .qtag{font-size:11px;font-weight:600;background:transparent;border:0;padding:0;color:var(--wait)}
.rn .qrow .qtag.stop{color:var(--stop)}
.rn .wait{min-width:0;margin-left:auto}
.rn .wait b{font-size:13px;letter-spacing:-.3px;display:inline}
.rn .wait small{display:none}
.rn .qbtn{min-width:0;padding:6px 10px;font-size:12px;background:var(--card);color:var(--ink);border-color:var(--line2)}
.rn .queue{padding:14px}
.rn .qhead{align-items:center;margin-bottom:10px}
.rn .qhead h2{flex:1;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.rn .qcount{display:inline;white-space:nowrap;background:transparent;border:0;color:var(--stop);font-size:12px;font-weight:700;min-width:0;height:auto;padding:0}
.rn .qcount::after{content:"건"}
.rn .qcount[data-zero="1"]{color:var(--mute)}

/* ── 강사 화면 ──────────────────────────────────── */
.runbar{flex:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.runbar .grow{flex:1;min-width:260px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.runbar .band{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--mute);white-space:nowrap}
.runbar .vd{width:1px;height:20px;background:var(--line)}
.runbar .mtitle{font-size:15px;font-weight:800;letter-spacing:-.3px;flex:1;min-width:120px}
.clock,.tbudget{min-width:150px;font-size:12px;font-weight:600;color:var(--sub);white-space:nowrap}
.tbudget .tbar{display:block;height:4px;background:var(--line);border-radius:2px;margin-top:4px;overflow:hidden}
.tbudget .tbar i{display:block;height:100%;background:var(--sub)}
.tbudget[data-state="due"] .tbar i{background:var(--wait)}
.tbudget[data-state="over"] .tbar i{background:var(--stop)}
.tbudget[data-state="over"] .txt{color:var(--stop);font-weight:700}
.steps-nav{display:flex;gap:8px;align-items:center}
.steps-nav button{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-base);padding:9px 14px;font-weight:600;font-size:14px;line-height:1.2}
.steps-nav button[disabled]{opacity:.4;cursor:default}
.steps-nav .next{min-width:160px;min-height:44px}
.next{background:var(--primary) !important;color:var(--primary-ink);border-color:var(--primary) !important}
.next.ready{background:var(--go) !important;border-color:var(--go) !important;box-shadow:0 0 0 4px rgba(19,122,74,.15)}
.confirm{background:var(--wait-bg);border:1px solid var(--wait-line);border-radius:var(--r);padding:13px 15px;color:var(--wait);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;font-weight:600}
.confirm.danger-c{background:var(--stop-bg);border-color:var(--stop-line);color:var(--stop)}
.confirm .cseats{display:flex;gap:6px;flex-wrap:wrap}
.confirm .cbtns{margin-left:auto;display:flex;gap:8px}
.confirm .go{background:var(--primary);color:var(--primary-ink);border-radius:var(--r-base);padding:8px 14px;font-weight:700}
.confirm .cancel{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-base);padding:8px 14px;font-weight:600;color:var(--ink)}
.split{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:14px}
.mapcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px 28px;
  display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:16px;align-items:start}
.hp .mapcard{padding:18px;border-radius:var(--r)}
.mapcard .mhead{display:flex;flex-direction:column;gap:4px}
.mapcard .mhead h2{font-size:18px;font-weight:800;letter-spacing:-.3px}
.hp .mapcard .mhead h2{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}
.mapcard .mhead span{font-size:12px;color:var(--sub)}
.mapcard .mtools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;font-weight:600;color:var(--mute);margin-top:6px}
.mapcard .mtools label{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--sub);margin:0;font-weight:600;cursor:pointer}
.mapcard .room{grid-column:1/-1;justify-self:center;width:100%}
.mapcard .legend{grid-column:1/-1}
.rn .mapcard .legend{grid-column:2;grid-row:1;justify-self:end}
.mapcard .sbanner{grid-column:1/-1;background:var(--go-bg);border:1px solid var(--go-line);border-radius:var(--r);padding:12px 14px;
  display:flex;gap:12px;align-items:flex-start;color:var(--go)}
.sbanner .ic{font-size:16px;line-height:1.3}
.sbanner .cap{color:var(--go);letter-spacing:.4px}
.sbanner p{font-size:13px;font-weight:700;margin-top:2px}
.mapcard .table{background:var(--card)}
.tail{display:flex;justify-content:space-between;align-items:center;color:var(--sub);font-size:13px;gap:12px;flex-wrap:wrap}
/* 위험 구역 */
.dangerzone{background:var(--card);border:1px solid var(--stop-line);border-radius:var(--r);padding:14px}
.dangerzone summary{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--stop);cursor:pointer;list-style:none}
.dangerzone summary::-webkit-details-marker{display:none}
.dangerzone summary::after{content:" ▸";font-size:11px} .dangerzone[open] summary::after{content:" ▾"}
.dangerzone .dz{margin-top:6px}
.dangerzone h3{margin:0;font-size:13px;font-weight:700;letter-spacing:-.2px;color:var(--ink)}
.dangerzone p{font-size:12px;color:var(--sub);margin-top:4px;line-height:1.5}
.dangerzone .dbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.danger{color:var(--stop);border:1px solid var(--stop-line);background:var(--card);border-radius:var(--r-base);padding:6px 10px;font-size:12px;font-weight:600}
/* 빔 모드(.big) — 프로젍터·5m 가독성: 파스텔 대신 채움색(흰 글자 대비 go 5.37 · wait 5.24 · stop 5.85), 타일 96px, 기호 32px */
.big .rpct{font-size:96px} .big .room{--seat:96px} .big .seat .n{font-size:18px} .big .seat .m{font-size:32px;margin-top:4px}
.big .lamp .seat[data-s="done"]{background:var(--go);border-color:var(--go);color:#fff}
.big .lamp .seat[data-s="wait"]{background:var(--wait);border-color:var(--wait);color:#fff}
.big .lamp .seat[data-s="help"]{background:var(--stop);border-color:var(--stop);color:#fff}
.big .lamp .seat[data-s=""]{border-color:var(--line2)}
.big .seat[data-mine="1"]{outline-color:#fff}
.big .tables{gap:26px} .big .seatgrid{gap:8px}
.big .seatname,.big .wait b{font-size:19px} .big .qcount{min-width:40px;height:40px;font-size:20px} .big .tname{font-size:13px}
.big .split{grid-template-columns:1fr 380px}
.who-badge.tog{cursor:pointer;border:1px solid var(--line)} .who-badge.tog[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── 폼·어드민 ──────────────────────────────────── */
label{display:block;font-size:12px;font-weight:700;margin-bottom:6px;letter-spacing:-.1px}
input[type=text],input[type=password],input[type=number],textarea{
  width:100%;font:inherit;font-size:13px;padding:8px 10px;border-radius:var(--r-base);
  border:1px solid var(--line2);background:var(--card);color:var(--ink)}
input:focus-visible,textarea:focus-visible{border-color:var(--go)}   /* 링은 공통 :focus-visible(2px --go)이 그린다 */
input.mono{font-family:var(--mono)}
textarea{min-height:220px;font-family:var(--mono);font-size:12px;line-height:1.65}
#y{background:var(--code-bg);color:var(--code-fg);border-color:var(--code-bg);padding:12px 14px}
#y:focus-visible{outline-color:var(--code-key)}   /* 어두운 코드 뷰 위에서는 초록 링이 묻힌다 */
.ad .card{display:flex;flex-direction:column;gap:12px;padding:18px}
.ad .pg{padding:22px 24px 28px}
.ptitle2{font-size:22px;font-weight:800;letter-spacing:-.5px}
.ptitle2 + p{font-size:13px;color:var(--sub);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 400px;gap:20px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.sticky{position:sticky;top:14px}
.sep{border:0;border-top:1px solid var(--div);margin:0}
.qh{font-size:14px;font-weight:800;letter-spacing:-.3px}
.g2{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.g22{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:18px}
@media (max-width:640px){.g2,.g22{grid-template-columns:1fr}}
.q{display:flex;flex-direction:column;gap:6px}
.dims{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;font-weight:700;color:var(--mute)}
.step{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:var(--r-base);background:var(--card)}   /* overflow:hidden 금지 — 포커스 링이 잘린다 */
.step button{width:32px;height:34px;font-size:16px;color:var(--sub);border:0}
.step button:last-child{border-left:1px solid var(--div);border-radius:0 7px 7px 0}
.step button:first-child{border-right:1px solid var(--div);border-radius:7px 0 0 7px}
.step button:focus-visible,.step input:focus-visible{outline-offset:-2px}
.step input[type=number]{width:44px;min-width:32px;text-align:center;font-weight:700;font-size:14px;border:0;border-radius:0;padding:0 4px;-moz-appearance:textfield;color:var(--ink)}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step input:focus-visible{border:0}
.calc{font-weight:700;color:var(--go);font-size:13px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-base);overflow:hidden;background:var(--card)}
.rad{margin:0;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;color:var(--ink);border-left:1px solid var(--div)}
.rad:first-child{border-left:0}
.rad input{position:absolute;opacity:0;width:0;height:0;margin:0}
.rad:has(input:checked){background:var(--primary);color:#fff}
.rad:has(input:focus-visible){outline:2px solid var(--go);outline-offset:-2px}
.hint{font-size:11px;color:var(--mute);margin:0}
.hint2{font-weight:400;color:var(--mute);font-size:11px}
.ghostbtn{font-size:12px;font-weight:600;color:var(--sub);background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 8px}
.pbox{background:var(--bg);border-radius:var(--r-base);padding:18px 12px;border:1px dashed var(--line)}
#prev .room{--seat:30px}
#prev .screen{width:80%;height:22px;font-size:10px;letter-spacing:3px;border-radius:5px}
#prev .tables{gap:12px} #prev .table{padding:6px;gap:5px;border-radius:var(--r-base)} #prev .tname{font-size:9px;font-weight:700}
#prev .seatgrid{gap:4px} #prev .seat{border-radius:5px;cursor:pointer}
#prev .lamp .seat[data-s="wait"]{background:var(--card);border-color:var(--line2);color:var(--ink);animation:none}
#prev .seat .n{font-size:9px} #prev .seat .m{display:none}
#prev .gap{border-radius:5px;border:1px solid var(--line);background:repeating-linear-gradient(45deg,#F3F4F6 0 4px,#E5E7EB 4px 8px);
  display:grid;place-items:center;color:var(--mute);font-size:9px;font-weight:700;cursor:pointer}
#prev .gap::after{content:"×"}
#prev .legend{display:none}
.ctabar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ctabar p{font-size:12px;color:var(--sub)}
.pbtn{background:var(--primary);color:var(--primary-ink);border-radius:var(--r-base);padding:9px 14px;font-size:14px;font-weight:600;line-height:1.2;border:1px solid var(--primary)}
.pbtn[disabled]{opacity:.5;cursor:default}
summary{cursor:pointer;font-size:12px;color:var(--sub)}
.urlrow{display:flex;align-items:center;gap:7px;min-width:0;background:var(--linkbtn-bg);border:1px solid var(--line);padding:6px 10px;border-radius:7px;font-size:12px;font-weight:600}
.urlrow b{white-space:nowrap}
.urlrow code{flex:1 1 0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-weight:400;font-family:var(--mono);color:var(--sub)}
.urlrow button{font-size:11px;font-weight:600;color:var(--sub);white-space:nowrap;padding:2px 4px}
/* 방 목록 안에서는 URL을 숨긴 컴팩트 버튼 — 행 전체 클릭이 복사 */
.rlinks .urlrow{display:inline-flex;cursor:pointer;padding:7px 10px}
.rlinks .urlrow code,.rlinks .urlrow .lw{display:none}   /* 좁은 열(≈250px)에 칩 2개가 들어가도록 '링크' 단어도 숨김 */
.rlinks .urlrow:hover{border-color:var(--line2)}
.urlrow button::after{content:" ⧉";font-size:12px}
.ok-out{display:flex;flex-direction:column;gap:8px}
.ok-out .qrwrap{text-align:center;margin-top:6px}
.ok-out img{border:1px solid var(--line);border-radius:var(--r-sm)}

/* 방 목록 */
.rlist-h{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.rlist-h .qh{font-size:14px} .rlist-h span{font-size:11px;font-weight:600;color:var(--mute)}
.roomcard{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-bottom:10px;overflow:hidden}
.roomcard.closed{background:var(--ended-bg)}
.rhead{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:16px;cursor:pointer;align-items:center;width:100%;text-align:left;border-radius:var(--r)}
.rhead:focus-visible{outline-offset:-2px}
.rhead:hover{background:var(--linkbtn-bg)}
.rtop{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:600;color:var(--mute);grid-column:1}
.rstate{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--go-bg);color:var(--go);border:1px solid var(--go-line)}
.rstate::before{content:"● "} .closed .rstate::before{content:"✓ "}
.closed .rstate{background:var(--ended-bg);color:var(--sub);border-color:var(--line)}
.rtitle{font-size:16px;font-weight:800;letter-spacing:-.3px;grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta{grid-column:1;font-size:12px;color:var(--sub);display:flex;gap:14px;flex-wrap:wrap}
.rcode{font-weight:700;font-family:var(--mono);color:var(--ink)}
.rchev{grid-column:2;grid-row:1/4;color:var(--mute);transition:transform .15s;font-size:14px}
.open .rchev{transform:rotate(180deg)}
.rbody{border-top:1px dashed var(--line);padding:16px}
.rgrid{display:grid;grid-template-columns:1fr 96px;gap:16px;align-items:start}
@media (max-width:700px){.rgrid{grid-template-columns:1fr}}
.rlinks{display:flex;flex-wrap:wrap;gap:6px;min-width:0;align-content:flex-start}
.rlinks .ractions{width:100%}
.ractions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.ractions .qbtn{min-width:0;padding:6px 10px;font-size:12px;background:var(--card);color:var(--ink);border-color:var(--line2)}
.rqr{text-align:center;border-left:1px dashed var(--line);padding-left:16px;display:flex;flex-direction:column;align-items:center;gap:6px}
.rqr img{border:1px solid var(--line);border-radius:var(--r-sm);width:76px;height:76px}
.rqr .hint{font-size:10px;font-weight:600}
.bigqr{position:fixed;inset:0;background:rgba(15,23,42,.6);display:grid;place-items:center;z-index:50;padding:20px}
.bigqr[hidden]{display:none}
.bigbox{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:30px 38px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:13px;max-width:560px}
.bigbox h2{font-size:22px;letter-spacing:-.4px;font-weight:800}
.mono{font-family:var(--mono);font-size:12px;color:var(--sub);word-break:break-all;margin:0}

/* 서버 4건 */
.plan{display:block;font-size:12px;color:var(--mute,#68736D);margin-top:2px}
.tundo{margin-left:10px;padding:4px 10px;border-radius:6px;background:#fff;color:var(--ink,#18211D);font-weight:700;font-size:13px;border:1px solid var(--line,#DDE2DF)}

/* 어드민: YAML 배지 · 실시간 메타 */
.badge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid transparent}
.badge:empty{display:none}
.badge.ok{background:var(--go-bg,#E9F6EF);color:var(--go,#137A4A);border-color:var(--go-line,#B8DFC9)}
.badge.err{background:var(--stop-bg,#FFF0EE);color:var(--stop,#B13D36);border-color:var(--stop-line,#EDC0BC)}
.rlive{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mute,#68736D);padding:4px 0 12px;border-bottom:1px solid var(--line,#DDE2DF);margin-bottom:12px}
.rlive b{color:var(--ink,#18211D)}

/* 참가자 자리 고르기 2탭 */
.seat[data-picked="1"]{outline:3px solid var(--ink,#18211D);outline-offset:-1px;background:var(--go-bg,#E9F6EF)!important;color:var(--go,#137A4A)!important;font-weight:800}
.pickcard{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface,#fff);border:1px solid var(--line,#DDE2DF);border-radius:12px;padding:12px 14px;margin-top:12px;font-size:14.5px}
.pickcard .pk{color:var(--go,#137A4A);font-size:18px;line-height:1}
.pickcard .hint{flex-basis:100%;margin:0}
.pickhint{margin-top:12px;text-align:center}
.actions.one{grid-template-columns:1fr}
.btn.primary{background:var(--primary,#1F2B25);color:#fff}
.btn.primary[disabled]{background:var(--subtle,#F3F5F7);color:var(--mute,#68736D);border:1px solid var(--line,#DDE2DF);cursor:default}

/* 좌석 모양 확장 — 테두리(회의실·ㄷ자·ㅁ자) · 원형 · 원탁 */
.perim{display:inline-grid;gap:6px;margin:0;justify-content:center}
.perim .ptable{background:var(--subtle,#F3F5F7);border:1px solid var(--line,#DDE2DF);border-radius:10px;display:grid;place-items:center;color:var(--mute,#68736D);font-size:12px;font-weight:700;letter-spacing:.1em;min-width:44px;min-height:44px}
.perim .seat,.perim .gap{width:var(--seat);height:var(--seat);min-height:0}
.perim .gap{border:1px dashed var(--line,#DDE2DF);border-radius:8px;opacity:.5}
.circ{position:relative;margin:0}
.circ .ctable,.roundt .ctable{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52%;height:52%;border-radius:50%;background:var(--subtle,#F3F5F7);border:1px solid var(--line,#DDE2DF);display:grid;place-items:center;color:var(--mute,#68736D);font-size:12px;font-weight:700}
.circ .seat,.circ .gap,.roundt .seat,.roundt .gap{position:absolute;width:var(--seat);height:var(--seat);min-height:0;transform:translate(-50%,-50%);border-radius:50%}
.circ .gap,.roundt .gap{border:1px dashed var(--line,#DDE2DF);opacity:.5}
.circ .seat .n,.roundt .seat .n{font-size:11px}
.roundt{position:relative;margin:0 auto}
.table.round{display:flex;flex-direction:column;align-items:center}

.wrapx{max-width:100%;overflow:auto}

/* 스크린이 옆 벽(좌·우)일 때 — 세로 바 */


/* 스크린을 지도 폭에 맞춤 (테두리·원형) */

/* 원형: 폭이 줄어도 정원 유지 */

/* 첨부 대화 보기 (보조강사) */
.ctxb{white-space:nowrap}
.ctxmodal{position:fixed;inset:0;background:rgba(24,33,29,.5);display:grid;place-items:center;z-index:60;padding:16px}
.ctxbox{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(24,33,29,.25)}
.ctxhead{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ctxhead b{font-size:15px}.ctxhead .hint{flex:1}
.ctxpre{margin:0;padding:14px 16px;overflow:auto;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);font-size:12.5px;line-height:1.55;background:var(--subtle);border-radius:0 0 14px 14px}