/* 발표자 화면 — 어두운 방에서 보는 화면. 위: 왼쪽 35% 다음 장표+타이머, 오른쪽 65% 메모 / 아래: 장표 띠(다음 장표만 크게) */
:root { color-scheme: dark; --bg:#0b0f1a; --panel:#141b2e; --ink:#fff; --sub:#8b94ab; --blue:#4a80ff; --ok:#22c55e; --bad:#ef4444; --line:#232c45; }
* { box-sizing: border-box; }
html, body { height:100%; margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; overflow:hidden; }
body { display:flex; flex-direction:column; }
/* 관리자 배치도에서 이 모니터를 눌렀을 때 가장자리에 잠깐 뜨는 빨간 테두리 */
.screen-flash { position:fixed; inset:0; z-index:90; pointer-events:none; border:14px solid #ff3b30; box-shadow:inset 0 0 0 4px rgba(255,59,48,.35); animation:screenFlash .5s ease-in-out infinite alternate; }
.screen-flash[hidden] { display:none; }
@keyframes screenFlash { from { border-color:#ff3b30; } to { border-color:#ff8a80; } }
#bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid var(--line); flex:none; }
#bar .left, #bar .right { display:flex; align-items:center; gap:10px; min-width:0; }
.pill { background:var(--panel); border-radius:999px; padding:6px 12px; font-weight:800; font-size:14px; white-space:nowrap; }
.pill.mono, .mono { font-variant-numeric:tabular-nums; }
.pill.off { color:var(--sub); } .pill.on { color:var(--ok); }
.title { color:var(--sub); font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.font { display:flex; align-items:center; gap:6px; background:var(--panel); border-radius:999px; padding:3px; }
.font button, .ghost, .t-sub button { font:inherit; font-weight:900; border:0; border-radius:999px; padding:5px 12px; cursor:pointer; background:#1f2a48; color:#fff; min-height:32px; }
.font span { font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums; min-width:44px; text-align:center; }
.ghost { background:var(--panel); color:var(--sub); font-weight:800; }
.ghost.danger { color:#f87171; }
/* 위 영역 */
#top { flex:1; min-height:0; display:grid; grid-template-columns:35fr 65fr; gap:0; }
#nextPane { display:flex; flex-direction:column; gap:12px; padding:16px 12px 12px 18px; min-width:0; border-right:1px solid var(--line); }
.timer { background:var(--panel); border-radius:16px; padding:12px 16px; }
.t-main { display:flex; align-items:baseline; gap:12px; }
.t-main span { color:var(--sub); font-weight:800; font-size:14px; white-space:nowrap; }
.t-main b { font-size:clamp(40px, 5.2vw, 76px); line-height:1; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#fff; }
.timer.over .t-main b { color:var(--bad); } .timer.over .t-main span { color:var(--bad); }
.timer.warn .t-main b { color:#fbbf24; }
.timer.idle .t-main b { color:var(--sub); }
.t-sub { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; color:var(--sub); font-weight:700; flex-wrap:wrap; }
.t-sub b { color:#c7cfe2; }
.t-sub input { width:56px; font:inherit; font-weight:800; background:#0b0f1a; color:#fff; border:1px solid var(--line); border-radius:8px; padding:4px 6px; text-align:center; }
.t-sub button { padding:4px 10px; min-height:28px; font-size:13px; }
.nextbig { flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; }
.nextbig .lab { font-size:13px; font-weight:900; color:var(--blue); }
.nextbig .img { flex:1; min-height:0; background:#000; border-radius:14px; border:3px solid var(--blue); box-shadow:0 30px 60px -30px rgba(74,128,255,.7); display:flex; align-items:center; justify-content:center; overflow:hidden; color:#9fc0ff; font-weight:800; font-size:18px; text-align:center; padding:8px; }
.nextbig .img img { width:100%; height:100%; object-fit:contain; display:block; }
.nextbig .img.none { border-color:var(--line); color:var(--sub); box-shadow:none; }
.nextbig .cap { font-size:14px; color:#c7cfe2; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notes { min-height:0; overflow:auto; padding:22px 32px 22px 28px; }
.note-text { white-space:pre-wrap; word-break:keep-all; line-height:1.55; font-weight:600; letter-spacing:-.01em; }
.note-text.empty { color:var(--sub); font-weight:500; }
#noteEdit { width:100%; height:100%; font:inherit; font-size:22px; line-height:1.5; background:var(--panel); color:#fff; border:2px solid var(--blue); border-radius:16px; padding:16px; resize:none; }
#noteEdit[hidden] { display:none; }
/* 아래 장표 띠 */
/* 띠 높이(--strip)에 맞춰 장표 크기를 정한다 — 다음 장표는 띠를 꽉 채우고, 나머지는 그 70% */
:root { --strip: 26vh; --strip-pad: 50px; }
.strip { flex:none; height:var(--strip); min-height:160px; display:flex; align-items:flex-end; gap:12px; padding:10px 18px 12px; overflow-x:auto; overflow-y:hidden; border-top:1px solid var(--line); background:#080b14; scroll-behavior:smooth; }
.strip::-webkit-scrollbar { height:6px; } .strip::-webkit-scrollbar-thumb { background:#2a3554; border-radius:3px; }
.tile { flex:none; width:calc((var(--strip) - var(--strip-pad)) * .7 * 16 / 9); cursor:pointer; opacity:.55; transition:opacity .15s, transform .15s; }
.tile .img { width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; border:2px solid transparent; display:flex; align-items:center; justify-content:center; color:#9fc0ff; font-size:11px; font-weight:800; text-align:center; padding:4px; }
.tile .img img { width:100%; height:100%; object-fit:contain; display:block; }
.tile .cap { display:flex; gap:6px; align-items:center; margin-top:4px; height:18px; font-size:11px; color:var(--sub); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile .cap .n { font-variant-numeric:tabular-nums; color:#c7cfe2; }
.tile .cap .badge { border-radius:999px; padding:0 7px; font-size:10px; font-weight:900; }
.tile.current { opacity:1; } .tile.current .img { border-color:#c7cfe2; }
.tile.current .cap .badge { background:#2a3554; color:#fff; }
.tile.next { width:calc((var(--strip) - var(--strip-pad)) * 16 / 9); opacity:1; }   /* 다음 장표만 크게 — 띠 높이를 꽉 채움 */
.tile.next .img { border-color:var(--blue); border-radius:12px; }
.tile.next .cap { font-size:13px; } .tile.next .cap .badge { background:var(--blue); color:#fff; }
.tile.note-dot .cap::after { content:"메모"; color:var(--ok); }
.tile:hover { opacity:1; transform:translateY(-2px); }
.hint { position:fixed; left:50%; bottom:calc(var(--strip) + 8px); transform:translateX(-50%); background:rgba(20,33,61,.85); color:#fff; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700; transition:opacity .4s; pointer-events:none; }
.hint b { color:#9fc0ff; } .hint.gone { opacity:0; }
/* ---------- 모바일·세로 화면: 위쪽을 한 줄씩 쌓고, 띠는 낮게 ---------- */
.touchnav { display:none; }
@media (max-width: 820px), (orientation: portrait) {
  :root { --strip: 20vh; --strip-pad: 44px; }
  #bar { flex-wrap:wrap; padding:8px 12px; gap:6px; }
  #bar .right { flex-wrap:wrap; gap:6px; }
  #bar .title, #clock { display:none; }
  .pill { font-size:12px; padding:5px 10px; }
  .font button, .ghost, .t-sub button { min-height:34px; padding:5px 10px; font-size:13px; }
  #top { grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow:hidden; }
  #nextPane { border-right:0; border-bottom:1px solid var(--line); padding:10px 12px; flex-direction:row; gap:10px; align-items:stretch; }
  .timer { flex:0 0 46%; padding:10px 12px; }
  .t-main b { font-size:clamp(30px, 9vw, 44px); }
  .t-sub { gap:6px; font-size:12px; } .t-sub input { width:48px; }
  .nextbig { flex:1; min-width:0; }
  .nextbig .img { aspect-ratio:16/9; flex:none; height:auto; border-width:2px; border-radius:10px; }
  .nextbig .cap { font-size:12px; }
  .notes { padding:14px 16px; }
  .strip { min-height:110px; padding:8px 12px 10px; gap:8px; }
  .hint { display:none; }
  .touchnav { display:flex; }
}
/* 터치 기기용 이전·다음 버튼 (키보드가 없으므로) */
.touchnav button { font:inherit; font-weight:900; border:0; border-radius:999px; padding:6px 14px; background:#1f2a48; color:#fff; min-height:34px; }