/* app.css — 교사용 모바일 SPA. mockup(mobile-ui-mockup.html) 디자인 토큰 이식.
   전체 뷰포트 = 휴대폰 세로. 화면 하단에 PTT 고정. 장갑 손가락 대응(큰 타깃). */

:root{
  --primary:#4a90e2; --primary-dark:#357abd;
  --danger:#e74c3c; --danger-dark:#c0392b;
  --success:#2ecc71; --warning:#f39c12;
  --muted:#95a5a6; --line:#e6eaef; --text:#2c3e50;
  --card:#fff; --bg:#f0f2f5;
}
*{box-sizing:border-box}
/* ★버튼은 기본적으로 font-family 를 상속하지 않음(UA 기본폰트) → 일부 환경서 한글 tofu.
   앱 폰트스택을 상속시켜 결정적으로 렌더(playwright 검증서 확인). 교사·운영자 페이지 공통. */
button{font-family:inherit}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  /* 한글 폴백 명시: CDN(Noto Sans KR) 미로드/오프라인·headless 에서도 실기기 OS 폰트로 렌더(□ tofu 방지).
     iOS·mac=Apple SD Gothic Neo / Windows=Malgun Gothic / Android·Linux=Noto Sans CJK KR 순 폴백. */
  font-family:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','Noto Sans CJK KR',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
#app{height:100%}

/* 화면 셸: 세로 꽉 채움. 상단 헤더 / 가운데 본문 / 하단 PTT */
.screen{
  height:100dvh;height:100vh;
  display:flex;flex-direction:column;
  background:var(--bg);
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* 헤더 */
.appbar{background:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);flex-shrink:0}
.school{font-size:17px;font-weight:700;line-height:1.2}
.conn{font-size:12px;display:flex;align-items:center;gap:6px;margin-top:4px}
.conn.on{color:#1e9e5a}
.conn.off{color:var(--muted)}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.logout{border:none;background:#eef1f4;color:#5a6b7b;font-size:13px;font-weight:700;padding:8px 13px;border-radius:10px;cursor:pointer;flex-shrink:0;white-space:nowrap}

.body{flex:1;padding:18px 16px;overflow:auto}
.sec-title{font-size:14px;font-weight:700;color:#7a8794;margin:0 0 12px}

/* 구역 체크박스 — 최소 타깃 큼 */
.zones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.zone{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:16px 14px;font-size:16px;font-weight:500;min-height:64px;user-select:none;cursor:pointer}
.zone .box{width:26px;height:26px;border-radius:8px;border:2px solid #cbd3db;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.zone.checked{border-color:var(--primary);background:#eaf3ff}
.zone.checked .box{background:var(--primary);border-color:var(--primary)}
.zone.locked{opacity:.5;background:#f4f5f7;cursor:not-allowed}
.zone.locked .name{color:#9aa5b1}
.zone:active:not(.locked){transform:scale(.98)}

/* PTT 버튼 — 하단 고정, 큰 타깃 */
.ptt-wrap{padding:16px;background:#fff;border-top:1px solid var(--line);flex-shrink:0}
.ptt-target{font-size:13px;text-align:center;color:#5a6b7b;margin-bottom:10px;font-weight:500;min-height:18px}
.ptt-target b{color:var(--primary)}
.ptt{width:100%;height:170px;border:none;border-radius:22px;color:#fff;font-size:24px;font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 20px rgba(0,0,0,.15);touch-action:none;user-select:none;-webkit-user-select:none}
.ptt .mic{font-size:42px}
.ptt .sub{font-size:14px;font-weight:500;opacity:.9}
.ptt.ready{background:linear-gradient(135deg,#2ecc71,#27ae60)}
.ptt.ready:active{filter:brightness(.96)}/* iOS Safari: transform:scale 중 조기 pointerup 합성 버그 — scale 제거, filter 유지 */
.ptt.live{background:linear-gradient(135deg,#e74c3c,#c0392b);animation:pulse 1s infinite}
.ptt.connecting{background:linear-gradient(135deg,#f39c12,#e08e0b)}
.ptt.disabled{background:#c3cbd3;color:#eef1f4;box-shadow:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.5)}50%{box-shadow:0 0 0 14px rgba(231,76,60,0)}}

/* 배너 */
.banner{border-radius:14px;padding:14px 16px;font-size:14px;font-weight:500;line-height:1.45;margin-bottom:18px}
.banner .h{display:block;font-weight:700;margin-bottom:4px}
.banner.warn{background:#fff4e0;border:1px solid #f0c675;color:#9a6a10}
.banner.err{background:#fadbd8;border:1px solid #e6a49c;color:#a5352a}
.banner.info{background:#eaf3ff;border:1px solid #b9d6f5;color:#2f6ca8}

/* ON AIR 전체 화면 */
.onair{flex:1;background:linear-gradient(160deg,#e74c3c,#a5281d);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.onair-badge{border:3px solid #fff;border-radius:14px;padding:8px 22px;font-size:24px;font-weight:900;letter-spacing:.15em;animation:blink 1.2s infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.35}}
.onair-zones{font-size:26px;font-weight:700;margin:24px 0 8px}
.onair-time{font-size:17px;opacity:.9;font-variant-numeric:tabular-nums}
.meter{display:flex;gap:6px;align-items:flex-end;height:64px;margin:30px 0 10px}
.meter i{width:11px;background:rgba(255,255,255,.85);border-radius:4px;transition:height .1s linear;min-height:6px}
.mic-ok{font-size:13px;background:rgba(255,255,255,.2);padding:6px 14px;border-radius:22px}
.mic-ok.warn{background:rgba(0,0,0,.4);font-weight:700}
.release-hint{margin-top:auto;font-size:15px;background:rgba(0,0,0,.18);padding:16px;border-radius:16px;width:100%}

/* 보조 버튼 */
.minibtn{width:100%;padding:15px;border:none;border-radius:14px;font-size:16px;font-weight:700;background:var(--primary);color:#fff;margin-top:10px}
.minibtn.ghost{background:#eef1f4;color:#5a6b7b}
.note{font-size:12px;color:#9aa5b1;text-align:center;margin-top:12px;line-height:1.5}

/* 로그인 */
.login-screen{justify-content:center}
.login{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px}
.logo{font-size:24px;font-weight:900;color:var(--primary);margin-bottom:6px;text-align:center}
.logo .sub{display:block;font-size:13px;color:#8a95a1;font-weight:500;margin-top:4px}
.inp{width:100%;padding:16px;border:2px solid var(--line);border-radius:14px;font-size:16px;margin-bottom:12px;font-family:inherit}
.inp:focus{border-color:var(--primary);outline:none}
.login .ptt{height:auto}

/* 시작 실패 토스트 (§8-A) */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:200;
  max-width:90%;background:#2c3e50;color:#fff;
  padding:14px 18px;border-radius:14px;font-size:14px;font-weight:500;line-height:1.4;
  box-shadow:0 10px 30px rgba(0,0,0,.3);text-align:center;
  animation:toastIn .2s ease-out;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

@media (min-width:520px){
  /* 데스크톱 미리보기: 폰 폭으로 가운데 정렬 */
  #app{max-width:420px;margin:0 auto;box-shadow:0 0 40px rgba(0,0,0,.08)}
}