/* ─────────────────────────────────────────────
   「행복을 찾아서」 · 전자칠판(교사) — 자율 진행 · 단일 칠판
   칠판은 교실 전체가 본다: 이름·미공개 분포는 절대 렌더하지 않는다.
   익명 단계 지도 + 참여 카운터 + 도움 요청. 공개는 「함께 여는」 순간.
   ───────────────────────────────────────────── */
:root{
  --ink:#f6f0e3;--ink-dim:#b9c0d6;--gold:#f4c95d;--amber:#e8944a;--navy:#0a1628;
  --card:rgba(255,255,255,.055);--card-line:rgba(246,240,227,.14);
  --sky-top:#0a1628;--sky-mid:#101f3a;--sky-low:#16264a;--sun-y:120%;--sun-glow:0;
  /* §4-2 유동 타이포 토큰(student와 동일 체계) — board는 대시보드라 슬라이드 본문 없음(모든 텍스트 이미 clamp), 루트 배율 미적용(1920×1080 무스크롤 보호) */
  --fs-title:clamp(1.5rem,4.5vw,2.6rem);--fs-body:clamp(1.0625rem,4.4vw,1.3125rem);--fs-sub:clamp(.9375rem,1.9vw,1.06rem);
}
*{margin:0;padding:0;box-sizing:border-box}
/* hidden 속성의 숨김은 브라우저 기본 스타일이라 id·class 의 display 지정에 진다 — 빈 #previewPill(inline-block)·#resumeBar(.resume-bar flex)가
   시작 화면 상단에 노란 알약·노란 테두리 빈 상자로 떠 있었다(2026-09-17). 요소마다 [hidden] 규칙을 붙이지 말고 여기서 한 번에 막는다. */
[hidden]{display:none!important}
html,body{height:100%}
body{font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:var(--ink);background:var(--navy);overflow:hidden;-webkit-font-smoothing:antialiased}
.serif{font-family:'Noto Serif KR','Nanum Myeongjo',serif}
/* 분위기 배경(반 평균 진행도에 따라 밤→일출) */
#sky{position:fixed;inset:0;z-index:0;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-low) 100%);transition:background 1.6s ease}
/* 해: 콘텐츠 밀집 중앙을 피하도록 아래로 밀고(+10%), 광량 완화(×.72) → 패널 뒤에서도 텍스트 대비 유지 */
#sun{position:fixed;left:50%;top:calc(var(--sun-y) + 10%);z-index:0;width:min(28vw,400px);height:min(28vw,400px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffe9b0 0%,var(--gold) 38%,var(--amber) 72%,transparent 74%);opacity:calc(var(--sun-glow) * .72);filter:blur(2px);transition:top 1.8s cubic-bezier(.4,0,.2,1),opacity 1.8s ease;pointer-events:none}

#topbar{position:fixed;top:0;left:0;right:0;z-index:10;height:64px;display:flex;align-items:center;gap:16px;padding:0 22px;background:#0a1628;border-bottom:1px solid var(--card-line)}
.brand{font-weight:700;font-size:clamp(1rem,1.35vw,1.35rem);white-space:nowrap}.brand span{color:var(--gold)}
.session-chip{font-size:clamp(.85rem,1.1vw,1.15rem);color:var(--ink-dim);background:rgba(255,255,255,.05);border:1px solid var(--card-line);border-radius:999px;padding:7px 15px;white-space:nowrap}
.session-chip b{color:var(--gold);font-weight:700;letter-spacing:.2em;font-size:clamp(1rem,1.3vw,1.4rem);margin-left:5px}
.mode-pill{font-size:clamp(.8rem,1.05vw,1.1rem);font-weight:700;padding:6px 14px;border-radius:999px;white-space:nowrap}
.mode-lobby{background:rgba(120,140,200,.2);color:#9fb4e6}.mode-free{background:rgba(62,203,122,.16);color:#5fe0a0}
.mode-gather{background:rgba(244,201,93,.18);color:var(--gold)}.mode-ended{background:rgba(255,120,100,.16);color:#ff9d8a}
#pcount{font-size:clamp(.9rem,1.2vw,1.3rem);color:var(--ink);font-weight:600;white-space:nowrap;margin-left:auto}
#helpCount{font-size:clamp(.9rem,1.2vw,1.3rem);font-weight:700;color:var(--gold);white-space:nowrap;padding:6px 13px;border-radius:999px;border:1px solid rgba(244,201,93,.4);background:rgba(244,201,93,.08);display:none}
#helpCount.show{display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.5}}
/* 도움 요청 배너 (크게) */
#helpBanner{position:fixed;top:64px;left:0;right:0;z-index:9;background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;font-weight:800;font-size:clamp(15px,1.6vw,19px);text-align:center;padding:13px;transform:translateY(-100%);transition:transform .35s ease;box-shadow:0 6px 20px rgba(0,0,0,.3)}
#helpBanner.show{transform:translateY(0);animation:pulse 1.6s infinite}
#helpBanner b{font-size:1.25em}
.ghost-btn{appearance:none;cursor:pointer;font-family:inherit;background:rgba(255,255,255,.06);border:1px solid var(--card-line);color:var(--ink);border-radius:10px;padding:9px 15px;font-size:clamp(.9rem,1.15vw,1.2rem);font-weight:600;white-space:nowrap;transition:background .2s}
.ghost-btn:hover{background:rgba(255,255,255,.13)}

/* 본문 — 전체화면 · 시거리 가독(교실 뒷자리) · 모든 텍스트는 반투명 패널 위 */
#board{position:fixed;top:64px;left:0;right:0;bottom:78px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,2.2vh,26px) clamp(16px,3.4vw,58px);overflow-y:auto}
.board-inner{width:100%;max-width:none;text-align:center;display:flex;flex-direction:column;gap:clamp(14px,2.6vh,34px)}
/* 헤더 패널(밝은 하늘 위에서도 대비 확보) */
.board-head{align-self:center;max-width:min(1100px,94%);background:rgba(9,18,35,.55);border:1px solid rgba(246,240,227,.14);border-radius:clamp(16px,1.5vw,22px);backdrop-filter:blur(8px);padding:clamp(12px,1.8vh,22px) clamp(18px,3vw,40px)}
.headline{font-size:clamp(1.5rem,3.4vw,3rem);font-weight:700;line-height:1.15}
.headline .serif{color:var(--gold)}
.sub{font-size:clamp(.95rem,1.6vw,1.5rem);color:var(--ink-dim);margin-top:clamp(4px,.8vh,10px);word-break:keep-all}
/* 단계 지도 — 카운터 숫자가 화면 최대 요소 */
.stage-map{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,28px)}
.stage{background:rgba(9,18,35,.60);border:1px solid rgba(246,240,227,.16);border-radius:clamp(16px,1.6vw,26px);padding:clamp(14px,2.4vh,32px) clamp(8px,1vw,18px);backdrop-filter:blur(8px)}
.stage .ico{font-size:clamp(2rem,3.4vw,3.4rem);margin-bottom:clamp(4px,1vh,12px)}
.stage .num{font-size:clamp(3.2rem,min(9vw,15vh),9rem);font-weight:800;line-height:.95;color:var(--gold);font-family:'Noto Serif KR',serif}
.stage .lab{font-size:clamp(1rem,1.7vw,1.7rem);color:var(--ink-dim);margin-top:clamp(4px,1vh,12px);word-break:keep-all}
/* 인터랙션 참여 카운터(공개 전) / 차트(공개 후) */
.polls{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,28px);text-align:left}
.poll{background:rgba(9,18,35,.60);border:1px solid rgba(246,240,227,.16);border-radius:clamp(14px,1.4vw,22px);padding:clamp(14px,1.8vh,24px) clamp(14px,1.6vw,26px);backdrop-filter:blur(8px)}
.poll-head{display:flex;align-items:center;gap:clamp(8px,1vw,16px)}
.poll-head .t{font-weight:700;font-size:clamp(1.1rem,1.7vw,1.7rem);flex:1;white-space:nowrap}
.poll-cnt{font-size:clamp(1.3rem,2.1vw,2.1rem);color:var(--gold);font-weight:800;white-space:nowrap}
/* §4-5 관제 패널 원 발문(슬라이드 h2에서 추출) — 반투명 어두운 스트립·2줄 말줄임·클릭 전체보기(칠판 가독성 규칙) */
.poll-q{margin:clamp(5px,.9vh,11px) 0;font-size:clamp(.92rem,1.15vw,1.32rem);line-height:1.34;color:var(--ink);font-weight:600;cursor:pointer;background:rgba(9,18,35,.5);border-left:3px solid var(--gold);border-radius:8px;padding:clamp(6px,.9vh,11px) clamp(9px,1vw,14px);backdrop-filter:blur(4px);word-break:keep-all;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.poll-q.expanded{-webkit-line-clamp:unset;overflow:visible}
.reveal-btn{appearance:none;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;font-weight:700;font-size:clamp(1rem,1.4vw,1.4rem);border:none;padding:clamp(8px,1.1vh,14px) clamp(14px,1.4vw,24px);border-radius:999px;white-space:nowrap}
.reveal-btn:disabled{opacity:.55;cursor:default;background:rgba(255,255,255,.1);color:var(--ink-dim)}
/* 공개됨 상태: 재클릭=닫기. 호버 시 「닫기」로 표시 */
.reveal-btn.revealed{position:relative;background:rgba(62,203,122,.2);color:#bfeecf}
.reveal-btn.revealed:hover{color:transparent;background:rgba(255,120,100,.24)}
.reveal-btn.revealed:hover::after{content:'닫기 ✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#ffd9d0;font-weight:700}
.poll-chart{max-height:0;overflow:hidden;opacity:0;transition:max-height .8s ease,opacity .6s ease,margin .6s ease;margin-top:0}
.poll-chart.open{max-height:60vh;opacity:1;margin-top:clamp(10px,1.4vh,18px)}
.bar-row{display:flex;align-items:center;gap:clamp(8px,1vw,14px);margin-bottom:clamp(8px,1.1vh,14px);font-size:clamp(1rem,1.5vw,1.5rem)}
.bar-row .lab{width:clamp(96px,10vw,180px);color:var(--ink-dim);flex:none;text-align:right;word-break:keep-all;font-size:clamp(.9rem,1.3vw,1.3rem)}
.bar-track{flex:1;height:clamp(16px,1.6vh,24px);border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.bar-fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--amber),var(--gold));transition:width 1s cubic-bezier(.3,0,.2,1)}
.bar-row .val{width:clamp(40px,4vw,64px);flex:none;color:var(--gold);font-weight:700;font-size:clamp(.9rem,1.3vw,1.3rem);text-align:left}
/* 글쓰기 제출 수 — 반드시 패널 위(배경 맨글자 금지) */
.write-cnt{align-self:center;background:rgba(9,18,35,.60);border:1px solid rgba(246,240,227,.16);border-radius:999px;backdrop-filter:blur(8px);padding:clamp(10px,1.4vh,18px) clamp(20px,2.4vw,40px);font-size:clamp(1.1rem,1.7vw,1.7rem);color:var(--ink-dim)}.write-cnt b{color:var(--gold);font-size:clamp(1.6rem,2.6vw,2.8rem);font-weight:800;margin:0 .1em}
/* 대표 이유 칩 / 소수 의견 / 토론 발문 (공개 후에만 렌더) */
.chips-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.reason-chip{background:rgba(62,203,122,.14);border:1px solid rgba(62,203,122,.38);border-radius:clamp(14px,1.4vw,22px);padding:clamp(6px,.8vh,11px) clamp(12px,1.2vw,18px);font-size:clamp(.9rem,1.3vw,1.35rem);color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;max-width:100%;line-height:1.5}
.mini-note{margin-top:10px;font-size:clamp(.9rem,1.3vw,1.35rem);color:var(--gold);background:rgba(244,201,93,.10);border:1px dashed rgba(244,201,93,.4);border-radius:10px;padding:clamp(8px,1vh,14px) clamp(12px,1.4vw,18px);word-break:keep-all}
.mini-note b{color:var(--ink)}
.disc-wrap{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.disc-card{appearance:none;cursor:pointer;font-family:inherit;text-align:left;background:rgba(255,255,255,.06);border:1px solid var(--card-line);border-radius:12px;padding:clamp(11px,1.3vh,18px) clamp(14px,1.4vw,22px);font-size:clamp(1rem,1.4vw,1.45rem);color:var(--ink);word-break:keep-all;transition:border-color .2s,background .2s}
.disc-card:hover{border-color:rgba(244,201,93,.55);background:rgba(244,201,93,.08)}

/* 하단 컨트롤 */
#ctrl{position:fixed;left:0;right:0;bottom:0;z-index:10;height:78px;display:flex;align-items:center;gap:clamp(5px,0.7vw,10px);padding:0 clamp(12px,1.5vw,22px);background:#0a1628;border-top:1px solid var(--card-line);overflow-x:auto}
.cbtn{appearance:none;cursor:pointer;font-family:inherit;border-radius:12px;padding:clamp(9px,1.3vh,16px) clamp(11px,1vw,26px);font-size:clamp(.88rem,1.05vw,1.4rem);font-weight:700;white-space:nowrap;min-height:44px;flex-shrink:0;border:1px solid var(--card-line);background:rgba(255,255,255,.06);color:var(--ink);transition:background .2s}
.cbtn:hover{background:rgba(255,255,255,.13)}
.cbtn.primary{background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;border:none}
.cbtn.on{background:rgba(62,203,122,.16);border-color:rgba(62,203,122,.5);color:#5fe0a0}
.cbtn.warn{border-color:rgba(255,120,100,.4);color:#ff9d8a}.cbtn.warn:hover{background:rgba(255,120,100,.12)}
.cbtn:disabled{opacity:.4;cursor:default}
.csep{width:1px;height:36px;background:var(--card-line);flex:none}
.clabel{font-size:clamp(.85rem,1.05vw,1.1rem);color:var(--ink-dim);white-space:nowrap}
/* 배경음악 컨트롤 (드러워 안 — 어두운 바 위라 가독성 규약 충족) */
.bgm-wrap{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex:none}
.bgm-vol{width:clamp(54px,6vw,150px);accent-color:var(--gold);cursor:pointer}
.bgm-rem{font-size:clamp(.8rem,1vw,1.05rem);color:var(--ink-dim);white-space:nowrap}
.bgm-wrap.bgm-off .bgm-vol,.bgm-wrap.bgm-off .bgm-rem{opacity:.4}

/* 오버레이 */
.overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:30px;background:rgba(6,13,27,.9);backdrop-filter:blur(8px);overflow-y:auto}
.overlay.hidden{display:none}
.panel{width:100%;max-width:540px;background:linear-gradient(180deg,#0d1a30,#101f3a);border:1px solid var(--card-line);border-radius:22px;padding:34px;text-align:center;margin:auto}
.panel h1{font-size:clamp(26px,4vw,40px);margin-bottom:6px}
.eyebrow{display:inline-block;font-size:clamp(.75rem,1vw,1.05rem);letter-spacing:.24em;color:var(--gold);border:1px solid rgba(244,201,93,.4);padding:6px 14px;border-radius:999px;margin-bottom:14px}
/* 시작 화면 · 영화 선택 (전체화면 그리드) — 고정 px 폰트 금지, clamp/vw/rem */
#startScreen{align-items:stretch;justify-content:flex-start;padding:0}
.start-panel{width:100%;min-height:100%;display:flex;flex-direction:column;background:none;border:none;border-radius:0;padding:0;text-align:left;max-width:none}
.start-head{position:sticky;top:0;z-index:5;background:rgba(9,18,35,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--card-line);padding:clamp(14px,2.4vh,28px) clamp(16px,3.5vw,52px)}
.start-head h1{font-size:clamp(1.9rem,3.6vw,3.2rem);margin:0}
.start-head .start-sub{margin:.35em 0 0;font-size:clamp(.9rem,1.2vw,1.25rem);color:var(--ink-dim)}
/* 지난 수업 기록(report) 진입 — 수업 시작 전에도 기록을 열 수 있는 유일한 경로.
   .start-head 가 sticky(=positioned)라 absolute 가 여기에 걸린다. 왼쪽 eyebrow 와 같은 줄. */
.start-head .head-link{position:absolute;top:clamp(14px,2.4vh,28px);right:clamp(16px,3.5vw,52px);display:inline-flex;align-items:center;gap:.4em;font-size:clamp(.85rem,1.1vw,1.15rem);color:var(--ink-dim);text-decoration:none;background:rgba(6,13,27,.5);border:1.5px solid var(--card-line);border-radius:999px;padding:clamp(7px,.9vw,12px) clamp(13px,1.6vw,22px);transition:color .15s,border-color .15s}
.start-head .head-link:hover{color:var(--gold);border-color:rgba(244,201,93,.55)}
.start-ctrls{display:flex;flex-wrap:wrap;gap:clamp(10px,1.5vw,22px);align-items:flex-end;margin-top:clamp(12px,1.8vh,20px)}
.grade-tabs{display:inline-flex;border:1.5px solid var(--card-line);border-radius:12px;overflow:hidden;align-self:flex-end}
.grade-tabs button{appearance:none;font-family:inherit;cursor:pointer;background:transparent;color:var(--ink-dim);border:none;padding:clamp(9px,1.1vw,14px) clamp(16px,2vw,28px);font-size:clamp(.95rem,1.35vw,1.35rem);font-weight:700;transition:background .15s,color .15s}
.grade-tabs button.on{background:var(--gold);color:#0a1220}
.gc-field{display:flex;flex-direction:column;gap:5px;font-size:clamp(.82rem,1vw,1.1rem);color:var(--ink-dim)}
.gc-field input{background:rgba(6,13,27,.5);border:1.5px solid var(--card-line);border-radius:10px;color:var(--ink);font-family:inherit;font-size:clamp(1.15rem,1.7vw,1.7rem);padding:clamp(9px,1.1vw,13px);text-align:center}
#gradeIn{width:clamp(66px,6vw,100px)}
#classIn{width:clamp(82px,8vw,124px)}
.movie-search{flex:1 1 clamp(160px,20vw,340px);min-width:150px;display:flex;flex-direction:column;gap:5px;font-size:clamp(.82rem,1vw,1.1rem);color:var(--ink-dim)}
.movie-search input{width:100%;background:rgba(6,13,27,.5);border:1.5px solid var(--card-line);border-radius:10px;color:var(--ink);font-family:inherit;font-size:clamp(1rem,1.35vw,1.35rem);padding:clamp(9px,1.1vw,13px) 14px}
.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(16rem,22vw,24rem),1fr));gap:clamp(10px,1.1vw,18px);align-content:start;padding:clamp(14px,2vh,26px) clamp(16px,3.5vw,52px) clamp(122px,17vh,190px)}
.movie-group{display:contents}
.movie-group[hidden]{display:none}
.mg-head{grid-column:1/-1;font-size:clamp(1rem,1.55vw,1.55rem);font-weight:700;color:var(--gold);letter-spacing:.02em;padding:clamp(6px,1vh,14px) 4px .45em;border-bottom:1px solid rgba(244,201,93,.28);margin-top:clamp(8px,1.4vh,20px)}
.movie-group:first-of-type .mg-head{margin-top:0}
.mg-head small{font-weight:400;font-size:.7em;color:var(--ink-dim);letter-spacing:.01em;margin-left:.7em}
.mg-head.filtered,.movie-opt.filtered{display:none}
.movie-opt{appearance:none;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);background:rgba(255,255,255,.05);border:1.5px solid var(--card-line);border-radius:14px;padding:clamp(14px,1.4vw,22px);transition:border-color .18s,background .18s,box-shadow .18s,transform .12s;display:flex;flex-direction:column;justify-content:center;min-height:clamp(5rem,7vw,7.5rem)}
.movie-opt b{display:block;font-size:clamp(1.05rem,1.5vw,1.55rem);font-weight:700;line-height:1.2}
.movie-opt span{display:block;font-size:clamp(.82rem,1.05vw,1.15rem);color:var(--ink-dim);margin-top:.35em;line-height:1.3}
.movie-opt:hover:not(:disabled){border-color:rgba(244,201,93,.5);background:rgba(244,201,93,.08)}
.movie-opt.sel{border-color:var(--gold);background:rgba(244,201,93,.18);box-shadow:0 0 0 3px rgba(244,201,93,.4),0 10px 28px rgba(244,201,93,.2);transform:translateY(-2px)}
.movie-opt.sel b{color:var(--gold)}
.movie-opt:disabled{opacity:.5;cursor:default}
/* 관리자 미리보기(?preview=1): 가린 편 표시 */
.movie-opt.hidden-ep{border-style:dashed;opacity:.85}
.movie-opt .ep-lock{display:inline-block;margin-top:.5em;font-style:normal;font-size:clamp(.75rem,.95vw,1rem);font-weight:700;color:#0a1220;background:var(--gold);border-radius:999px;padding:.15em .6em}
#previewPill{display:inline-block;font-size:clamp(.8rem,1vw,1.05rem);font-weight:700;color:#0a1220;background:var(--gold);border-radius:999px;padding:.25em .8em;margin-top:.4em}
.movie-empty{grid-column:1/-1;text-align:center;color:var(--ink-dim);padding:clamp(40px,9vh,100px) 0;font-size:clamp(1.05rem,1.5vw,1.5rem)}
.start-bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:clamp(10px,1.5vw,22px);align-items:center;justify-content:space-between;background:rgba(9,18,35,.9);backdrop-filter:blur(10px);border-top:1px solid var(--card-line);padding:clamp(12px,1.9vh,22px) clamp(16px,3.5vw,52px)}
.start-summary{font-size:clamp(.95rem,1.35vw,1.4rem);color:var(--ink);min-width:0;flex:1 1 auto}
.start-summary b{color:var(--gold)}
.start-summary .miss{color:var(--ink-dim);font-weight:400}
.start-bar .gold-btn{margin:0;white-space:nowrap;font-size:clamp(1.05rem,1.5vw,1.6rem);padding:clamp(13px,1.4vw,20px) clamp(26px,3.2vw,52px)}
.start-bar .gold-btn:disabled{opacity:.45;cursor:not-allowed}
/* 학교급 전환 초기화 안내(일시) — 오류가 아니므로 붉은 start-err 와 톤을 구분 */
.start-note{color:#ffd97a;font-size:clamp(.85rem,1.1vw,1.15rem);flex-basis:100%;margin:.3em 0 0;display:none}
/* 반(class) 연결 게이트 — 4-B: 신규 세션 반 연결 필수 (B-2·B-3) · 시작 확인창(#startGate)도 같은 규격 사용 */
#classGate,#startGate,#teacherGate{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(6,12,24,.74);backdrop-filter:blur(6px);padding:24px}
/* 교사 계정 미연동 경고(#teacherGate)의 「jinrohub.com으로 이동」은 링크라 버튼 모양을 맞춘다 */
a.cg-btn{text-decoration:none;display:flex;align-items:center;justify-content:center}
.cg-box{width:min(92vw,560px);background:rgba(12,22,40,.98);border:1px solid var(--card-line);border-radius:18px;padding:clamp(22px,3vw,40px);color:#eef2f6;text-align:center}
.cg-box h3{font-size:clamp(1.3rem,2.4vw,1.95rem);margin:0 0 14px}
.cg-box p{font-size:clamp(.98rem,1.5vw,1.16rem);line-height:1.62;color:#cdd6e4;margin:0}
.cg-row{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.cg-btn{font-size:clamp(1rem,1.6vw,1.28rem);padding:15px 20px;border-radius:12px;border:1px solid var(--card-line);background:rgba(255,255,255,.06);color:#eef2f6;cursor:pointer}
.cg-btn.primary{background:linear-gradient(135deg,#e8b84a,#d99a2b);color:#1a1205;border:none;font-weight:700}
.cg-code{font-size:clamp(2rem,5vw,3.3rem);letter-spacing:.14em;font-weight:800;color:#ffd97a;margin:18px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cg-input{width:100%;box-sizing:border-box;font-size:1.35rem;letter-spacing:.12em;text-align:center;text-transform:uppercase;padding:14px;border-radius:12px;border:1px solid var(--card-line);background:rgba(9,18,35,.6);color:#fff;margin-top:12px}
.cg-err{color:#ff9a8a;font-size:1rem;min-height:1.2em;margin-top:8px}
.cg-link{background:none;border:none;color:#9fb4d4;text-decoration:underline;cursor:pointer;font-size:.95rem;margin-top:14px}
/* 시작 확인창 — 설정 요약(라벨/값 2열) · 되돌릴 수 없음 경고 · 가로 2버튼 */
.sg-list{margin:18px 0 0;text-align:left;display:grid;grid-template-columns:auto 1fr;gap:8px clamp(14px,2vw,26px);align-items:baseline}
.sg-list dt{color:#9fb4d4;font-size:clamp(.9rem,1.3vw,1.1rem)}
.sg-list dd{margin:0;color:#ffd97a;font-weight:700;font-size:clamp(1.05rem,1.7vw,1.4rem)}
.sg-warn{margin-top:20px;padding-top:16px;border-top:1px solid var(--card-line);color:#cdd6e4;font-size:clamp(.92rem,1.35vw,1.1rem);line-height:1.6}
.cg-row.sg-row{flex-direction:row;justify-content:center;gap:clamp(10px,1.6vw,18px)}
.cg-row.sg-row .cg-btn{flex:1 1 0;min-width:0}
/* 진행 중 수업 이어서 진행 바(시작 화면 · 이 기기가 연 활성 세션이 있을 때만 DOM 생성) */
.resume-bar{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.4vw,18px);margin-top:clamp(10px,1.6vh,18px);padding:clamp(12px,1.6vh,18px) clamp(14px,1.8vw,22px);background:rgba(244,201,93,.1);border:1.5px solid rgba(244,201,93,.55);border-radius:14px}
.resume-bar .rb-txt{flex:1 1 260px;min-width:0;color:#eef2f6;font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.5}
.resume-bar .rb-txt b{color:var(--gold)}
.resume-bar .cg-btn{padding:clamp(9px,1.2vh,13px) clamp(14px,1.6vw,22px);font-size:clamp(.92rem,1.25vw,1.12rem)}
.start-err{color:#ff9d8a;font-size:clamp(.85rem,1.1vw,1.15rem);flex-basis:100%;margin:.3em 0 0;display:none}
/* ══ JoinBoard 표준 · 전 화면 학생 입장 안내 ══════════════════════
   모든 크기는 상대 단위(clamp / cqw / vw·vh). 고정 px 폰트·폭 금지.
   조절 지점: --jb-qr-w(QR·시작버튼 공유 폭), --jb-gap(단 간격)  */
#joinInfo{display:block;padding:0;background:#0a1628;backdrop-filter:none;overflow-y:auto}
#joinInfo.hidden{display:none}
.jb{
  --jb-qr-w:clamp(260px,min(33vw,40vh),560px);
  --jb-gap:clamp(24px,4vw,80px);
  --jb-mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  min-height:100vh;height:100vh;display:flex;flex-direction:column;overflow:hidden;
  padding:clamp(18px,2.6vh,40px) clamp(24px,3.2vw,72px);
  background:radial-gradient(120% 90% at 50% -20%,#1b2b52 0%,rgba(27,43,82,0) 55%),#0a1628;
}
.jb *{box-sizing:border-box}
.jb-header{display:flex;align-items:center;gap:16px;padding-bottom:clamp(10px,1.6vh,22px);border-bottom:1px solid var(--card-line)}
.jb-brand{display:flex;align-items:center;gap:.7em}
.jb-logo{width:clamp(34px,3vw,52px);aspect-ratio:1;border-radius:26%;background:linear-gradient(135deg,var(--gold),var(--amber));display:grid;place-items:center;font-size:clamp(1rem,1.5vw,1.7rem)}
.jb-brand b{font-size:clamp(1rem,1.5vw,1.6rem);font-weight:700;display:block}
.jb-brand span{display:block;color:var(--ink-dim);font-size:clamp(.7rem,.95vw,1rem);margin-top:2px}
.jb-sess{text-align:right;margin-left:auto}
.jb-sess b{font-size:clamp(1rem,1.5vw,1.65rem);font-weight:700;display:block}
.jb-sess span{display:block;color:var(--ink-dim);font-size:clamp(.72rem,1vw,1.05rem);margin-top:3px}
.jb-x{flex:none}
/* 가로 2단: 왼쪽 정보 / 오른쪽 QR */
.jb-main{flex:1;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:var(--jb-gap);min-height:0}
.jb-left{min-width:0;container-type:inline-size}   /* cqw 기준 컨테이너 */
.jb-badge{display:inline-flex;align-items:center;gap:.5em;color:var(--gold);background:rgba(244,201,93,.1);border:1px solid rgba(244,201,93,.35);border-radius:999px;padding:.4em 1em;font-weight:600;font-size:clamp(.8rem,1.2vw,1.3rem);margin-bottom:clamp(14px,2.2vh,30px)}
.jb-badge::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,201,93,.18)}
.jb-field+.jb-field{margin-top:clamp(16px,2.8vh,36px)}
.jb-label{color:var(--ink-dim);font-weight:600;letter-spacing:.14em;font-size:clamp(.85rem,1.35vw,1.55rem);display:flex;align-items:center;gap:.5em;margin-bottom:.35em}
.jb-n{color:var(--gold);font-family:var(--jb-mono);font-weight:700}
/* 주소·코드: 항상 한 줄(nowrap) + 컨테이너 폭 기준 자동 축소 */
.jb-addr{font-family:var(--jb-mono);font-weight:600;color:var(--amber);line-height:1;white-space:nowrap;font-size:min(4.8cqw,3.2rem)}
.jb-code{font-family:var(--jb-mono);font-weight:800;color:var(--ink);line-height:1;letter-spacing:.06em;white-space:nowrap;font-size:min(20cqw,12rem);text-shadow:0 0 40px rgba(244,201,93,.3);padding-bottom:.06em;border-bottom:3px solid rgba(244,201,93,.3)}
.jb-hint{margin-top:clamp(14px,2.2vh,30px);color:var(--ink-dim);font-size:clamp(.8rem,1.15vw,1.3rem);line-height:1.5;word-break:keep-all}
/* QR: 폭을 --jb-qr-w 로 고정 공유 */
.jb-right{display:flex;flex-direction:column;align-items:center}
.jb-qr{width:var(--jb-qr-w);aspect-ratio:1;background:#fff;border-radius:clamp(16px,1.6vw,28px);padding:clamp(14px,1.6vw,26px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.jb-qr img,.jb-qr canvas{width:100%!important;height:100%!important;display:block}
.jb-qrcap{margin-top:clamp(12px,1.6vh,22px);color:var(--gold);font-weight:600;font-size:clamp(1rem,1.5vw,1.7rem);white-space:nowrap}
/* 푸터: main과 동일한 2열 그리드 → 시작 버튼이 QR과 좌우 정확히 일치 */
.jb-footer{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--jb-gap);align-items:center;padding-top:clamp(12px,1.8vh,24px);border-top:1px solid var(--card-line)}
.jb-count{display:flex;align-items:baseline;gap:.4em;color:var(--ink-dim)}
.jb-lbl{font-size:clamp(.9rem,1.3vw,1.4rem);font-weight:600}
.jb-num{font-family:var(--jb-mono);font-weight:800;color:var(--ink);font-size:clamp(2rem,4vw,4.4rem);line-height:1}
.jb-tot{font-size:clamp(1rem,1.6vw,1.9rem);font-weight:600}
.jb-live{display:inline-flex;align-items:center;gap:.4em;margin-left:.8em;color:var(--gold);font-size:clamp(.75rem,1vw,1.05rem);font-weight:600}
.jb-dot{width:.55em;height:.55em;border-radius:50%;background:#3ecb7a;animation:pulse 1.8s ease-in-out infinite}
/* 입장 학생 이름 칩 — 카운트 헤더 아래 전폭 행. 40칩까지 무스크롤(1920 기준 3줄) */
.jb-roster{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:clamp(.3em,.5vw,.5em);align-content:flex-start;
  max-height:clamp(4.4rem,13vh,9.5rem);overflow-y:auto;overscroll-behavior:contain;
  margin-top:clamp(8px,1.2vh,16px);padding-right:.2em}
.jb-roster:empty{display:none}
.jb-chip{display:inline-flex;align-items:baseline;gap:.4em;white-space:nowrap;
  font-size:clamp(.74rem,1vw,1.1rem);font-weight:600;line-height:1.25;
  padding:.3em .8em;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--card-line);color:var(--ink);
  transition:background .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease}
.jb-chip .jc-no{font-family:var(--jb-mono);font-weight:800;color:var(--ink-dim);font-size:.92em;transition:color .5s ease}
.jb-chip.is-new{background:rgba(244,201,93,.18);border-color:rgba(244,201,93,.55);color:var(--gold);box-shadow:0 0 0 3px rgba(244,201,93,.12)}
.jb-chip.is-new .jc-no{color:var(--gold)}
/* 같은 이름이 서로 다른 출석번호로 입장 — 번호 오타 의심(동명이인일 수도 있어 강조만) */
.jb-chip.is-dup{border-color:rgba(232,148,74,.7);background:rgba(232,148,74,.14)}
.jb-chip.is-dup::after{content:'⚠';margin-left:.15em;color:#ffb87a;font-size:.9em}
@media (prefers-reduced-motion:reduce){.jb-chip{transition:none}}
.jb-footright{display:flex;justify-content:center}
.jb-cta{width:var(--jb-qr-w);text-align:center;border:0;cursor:pointer;color:#241505;font-family:inherit;font-weight:800;white-space:nowrap;font-size:clamp(0.95rem,min(1.9vw,3.0vh),2.05rem);padding:clamp(.7em,1.5vh,1em) clamp(1em,2vw,1.6em);border-radius:clamp(12px,1.2vw,20px);background:linear-gradient(100deg,var(--gold),var(--amber));box-shadow:0 14px 40px rgba(232,148,74,.32)}
.jb-cta:hover{transform:translateY(-2px)}
/* 좁은 화면(노트북·태블릿): 세로 스택 */
@media(max-width:900px){
  .jb{height:auto;min-height:100vh;overflow:auto}
  .jb-main{grid-template-columns:1fr;gap:32px;padding:24px 0}
  .jb-right{order:-1}
  .jb-addr{font-size:min(6.4cqw,2rem)}
  .jb-code{font-size:min(18cqw,6rem)}
  .jb-hint{white-space:normal}
  .jb-footer{grid-template-columns:1fr;gap:18px}
  .jb-footright{justify-content:stretch}
  .jb-cta{width:100%}
}
.gold-btn{appearance:none;border:none;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,var(--gold),var(--amber));color:#241505;font-weight:700;font-size:clamp(1rem,1.6vw,1.5rem);padding:clamp(13px,1.5vh,18px) clamp(26px,3vw,40px);border-radius:999px;transition:transform .15s}
.gold-btn:hover{transform:translateY(-2px)}.gold-btn:disabled{opacity:.5;cursor:default}
.waitcount{margin-top:16px;font-size:clamp(.95rem,1.4vw,1.4rem);color:var(--ink-dim)}.waitcount b{color:var(--gold)}
.link-btn{background:none;border:none;color:var(--ink-dim);font-family:inherit;font-size:clamp(.9rem,1.2vw,1.2rem);cursor:pointer;text-decoration:underline;margin-top:14px}
.end-emoji{font-size:clamp(3rem,6vw,5rem);margin-bottom:16px}.join-err{display:none;color:#ff9d8a;margin-top:16px;font-size:clamp(.9rem,1.2vw,1.2rem)}
.end-code-box{margin:22px auto 4px;padding:14px 20px;background:rgba(9,18,35,.5);border:1px solid var(--card-line);border-radius:14px;display:inline-flex;flex-direction:column;gap:4px}
.end-code-box .ecl{font-size:clamp(.8rem,1vw,1rem);color:var(--ink-dim)}
.end-code{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:.14em;color:var(--gold);font-variant-numeric:tabular-nums}
.end-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.end-hint{margin-top:14px;font-size:clamp(.82rem,1.05vw,1.05rem)}

/* 공유(gather) 뷰 */
#shareView{position:fixed;inset:0;z-index:20;background:linear-gradient(180deg,#0a1628,#101f3a 70%,#16264a);padding:clamp(12px,2vh,24px) 40px 30px;overflow-y:auto;display:none}   /* 상단 여백 80→2vh: #topbar(z10)를 덮는 화면이라 헤더 자리를 비울 이유가 없고, 고정 바가 맨 위에 붙는다 */
#shareView.on{display:block}
.sv-wrap{max-width:min(1600px,94%);margin:0 auto}
/* gather 상단 고정 바 — 「모니터로 돌아가기」가 스크롤해도 보이게(교사가 돌아갈 길을 못 찾아 창을 닫던 문제 · 2026-09-10).
   #shareView 가 스크롤 컨테이너(overflow-y:auto)라 sticky 기준이 된다. 제목보다 위(흐름상 별도 행)라 어느 해상도에서도 겹치지 않는다. */
.sv-bar{position:sticky;top:0;z-index:5;display:flex;justify-content:flex-end;align-items:center;margin:0 0 clamp(6px,1.2vh,14px);padding:clamp(8px,1.2vh,14px) 0;background:linear-gradient(180deg,#0a1628 70%,rgba(10,22,40,0));pointer-events:none}
.sv-bar .cbtn{pointer-events:auto;box-shadow:0 6px 22px rgba(244,201,93,.28)}
#shareView h1{font-size:clamp(1.9rem,4.4vw,3.6rem);text-align:center;margin-bottom:6px}
.sv-sub{text-align:center;color:var(--ink-dim);margin-bottom:clamp(20px,3vh,34px);font-size:clamp(1rem,1.6vw,1.5rem)}
.sv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px);margin-bottom:clamp(20px,3vh,34px)}
.sv-card{background:rgba(9,18,35,.5);border:1px solid var(--card-line);border-radius:18px;padding:clamp(18px,2vw,30px)}
.bar-row.sc-correct .lab{color:#7fe0a4;font-weight:700}
.bar-row.sc-correct .bar-fill{background:linear-gradient(90deg,#3ecb7a,#7fe0a4)}
.sc-explain{margin-top:14px;font-size:clamp(.95rem,1.2vw,1.15rem);line-height:1.6;color:#eef2f6;background:rgba(9,18,35,.55);border-left:4px solid var(--gold);border-radius:12px;padding:12px 16px;word-break:keep-all}
.sc-explain b{color:var(--gold)}
.sv-card h3{font-size:clamp(1.2rem,1.9vw,1.9rem);color:var(--gold);margin-bottom:clamp(12px,1.6vh,20px)}
.sv-card .bar-row{font-size:clamp(1.1rem,1.7vw,1.7rem)}.sv-card .bar-row .lab{width:clamp(140px,13vw,220px);font-size:clamp(1rem,1.4vw,1.4rem)}.sv-card .bar-row .val{width:clamp(52px,4.5vw,72px);font-size:clamp(1rem,1.4vw,1.4rem)}
.sv-top h3{font-size:clamp(1.25rem,2vw,2rem);color:var(--gold);margin-bottom:8px}
.compare-hint{font-size:clamp(.9rem,1.3vw,1.35rem);color:var(--ink-dim);margin-bottom:12px}
.ans-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.ans-card{background:var(--card);border:1px solid var(--card-line);border-radius:14px;padding:16px;cursor:pointer;transition:border-color .2s,transform .12s;animation:fadeUp .4s ease}
.ans-card:hover{border-color:rgba(244,201,93,.55);transform:translateY(-2px)}
.ans-card.sel{border-color:var(--gold);background:rgba(244,201,93,.1)}
.ans-card .who{font-size:clamp(.95rem,1.3vw,1.3rem);color:var(--gold);font-weight:600;margin-bottom:7px}
.ans-card .txt{font-size:clamp(1.05rem,1.5vw,1.5rem);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.ans-empty{grid-column:1/-1;text-align:center;color:var(--ink-dim);font-size:clamp(1rem,1.4vw,1.4rem);padding:20px 0}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 답변 전체화면 확대 모달 */
#bigModal .big-answer{max-width:1200px;width:100%;text-align:center;padding:20px;margin:auto}
.ba-q{color:var(--gold);font-size:clamp(18px,2.4vw,30px);font-weight:600;line-height:1.5;margin-bottom:30px;word-break:keep-all}
.ba-txt{font-family:'Noto Serif KR','Nanum Myeongjo',serif;font-size:clamp(24px,min(4.4vw,6vh),60px);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;color:var(--ink)}
#baClose{margin-top:32px}
@media(prefers-reduced-motion:reduce){*,#sun,#sky{transition:none!important;animation:none!important}}