/* 교실 도구 4종(학급 타이머·자리 배치·소음 신호등·칭찬 점수판) 전용 스타일 */
/* 공통 무대 — 전체 화면 버튼이 이 영역만 키운다 */
.cl-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:300px}
.cl-stage:fullscreen{background:var(--card);padding:24px;justify-content:center;gap:20px;border-radius:0}
.cl-stage.cl-top{justify-content:flex-start}
.cl-state{margin:0;font-size:14px;font-weight:600;color:var(--ink2);text-align:center}
.cl-u{font-size:13px;font-weight:600;color:var(--ink2)}
/* 타이머 */
.cl-ringw{position:relative;width:min(100%,300px);aspect-ratio:1}
.cl-ring{display:block;width:100%;height:100%}
.cl-ring .bg{fill:none;stroke:var(--soft);stroke-width:14}
.cl-ring .fg{fill:none;stroke:var(--mint);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .15s linear,stroke .3s}
.cl-warn .cl-ring .fg{stroke:var(--red)}
.cl-time{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Hahmlet',Pretendard;font-size:clamp(40px,13vw,66px);font-variant-numeric:tabular-nums}
/* 60분을 넘으면 h:mm:ss 로 7글자가 된다 — 66px 그대로면 글자 상자 모서리가 고리 선을 넘어 겹친다 */
.cl-time.cl-h{font-size:clamp(33px,13vw,54px)}
.cl-warn .cl-time{color:var(--red)}
.cl-msg{font-size:clamp(17px,4.5vw,26px);font-weight:700;text-align:center;word-break:keep-all;min-height:1.3em}
.cl-done{animation:cl-blink 1s steps(1,end) infinite}
@keyframes cl-blink{50%{background:color-mix(in srgb,var(--yellow) 40%,transparent)}}
@media(prefers-reduced-motion:reduce){.cl-done{animation:none;background:color-mix(in srgb,var(--yellow) 30%,transparent)}}
/* 자리 배치 */
.cl-desk{width:100%;text-align:center;font-size:12.5px;font-weight:700;color:var(--ink2);background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px}
.cl-grid{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:5px;width:100%}
.cl-grid[hidden],.cl-pairs[hidden],.cl-cards[hidden]{display:none}
.cl-seat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:54px;padding:6px 3px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden}
.cl-seat.g1{background:var(--soft)}
.cl-seat small{font-size:10px;line-height:1;color:var(--muted)}
.cl-seat b{font-size:13px;line-height:1.2;text-align:center;word-break:keep-all;overflow:hidden}
.cl-seat.e{border-style:dashed;color:var(--muted)}
.cl-seat.e b{font-weight:500;color:var(--muted)}
button.cl-seat:hover{border-color:var(--ink2)}
.cl-seat.fix{border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 22%,var(--card))}
.cl-pin{font-style:normal;font-size:9.5px;font-weight:700;color:#1F1B16;background:var(--yellow);border:1px solid var(--ink);border-radius:999px;padding:0 5px;line-height:1.5}
/* 짝 정하기 */
.cl-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:100%}
.cl-pair{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.cl-pair h4{margin:0 0 4px;font-size:13.5px;color:var(--ink2)}
.cl-pair ul{margin:0;padding-left:16px}
.cl-pair li{font-size:14.5px;font-weight:600;word-break:keep-all}
.cl-sex{font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px;color:var(--ink)}
.cl-sex.m{background:color-mix(in srgb,var(--blue) 24%,transparent)}
.cl-sex.f{background:color-mix(in srgb,var(--coral) 24%,transparent)}
/* 소음 신호등 */
.cl-lights{display:flex;gap:12px;align-items:center;justify-content:center}
.cl-light{width:clamp(46px,14vw,74px);aspect-ratio:1;border-radius:50%;border:2px solid var(--line);background:var(--soft);opacity:.25;transition:opacity .15s}
.cl-light.on{opacity:1;border-color:var(--ink2)}
.cl-light.cl-z-ok{background:var(--mint)}
.cl-light.cl-z-warn{background:var(--yellow)}
.cl-light.cl-z-alert{background:var(--red)}
/* 마이크 버튼은 primary·yellow 를 쓰지 않는다 — 스모크가 누르는 첫 버튼이 권한 요청이면 안 된다 */
.cl-mic{border-color:var(--ink);box-shadow:2px 2px 0 var(--yellow)}
.cl-mic:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--yellow)}
.cl-meter{position:relative;width:100%;height:18px;border-radius:999px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.cl-meter i{display:block;height:100%;background:var(--mint);border-radius:999px;transition:width .1s linear,background .25s}
.cl-meter.cl-z-warn i{background:var(--yellow)}
.cl-meter.cl-z-alert i{background:var(--red)}
.cl-mk{position:absolute;top:0;bottom:0;width:2px;background:var(--ink2);opacity:.55}
/* 칭찬 점수판 */
.cl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
.cl-card{border:1.5px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;min-width:0}
.cl-card.hit{border-color:var(--yellow);background:color-mix(in srgb,var(--yellow) 18%,transparent)}
.cl-rk{display:block;font-size:11px;font-weight:700;color:var(--muted)}
.cl-card>b{display:block;font-size:14px;word-break:keep-all;overflow:hidden}
.cl-sc{display:block;font-family:'Hahmlet',Pretendard;font-size:30px;line-height:1.25;font-variant-numeric:tabular-nums}
.cl-card .row{justify-content:center;gap:6px;margin-top:4px;flex-wrap:nowrap}
/* 교실 프로젝터용 큰 글씨 모드 */
.cl-big .cl-seat{min-height:72px}
.cl-big .cl-seat b{font-size:clamp(15px,2.4vw,21px)}
.cl-big .cl-pair li{font-size:19px}
.cl-big .cl-msg{font-size:clamp(23px,6.5vw,42px)}
.cl-big .cl-state{font-size:19px}
.cl-big .cl-card>b{font-size:18px}
.cl-big .cl-sc{font-size:42px}
.cl-big .bignum{font-size:58px}
@media(max-width:420px){
  .cl-grid{gap:4px}
  .cl-seat{min-height:46px;padding:5px 2px}
  /* 열이 9개를 넘으면 칸이 이름보다 좁아진다 — 잘라 내지 말고 접어서 다 보이게 */
  .cl-seat b{font-size:11.5px;word-break:break-all}
  .cl-big .cl-seat b{font-size:14px}
  .cl-lights{gap:8px}
}