/* 발표 화면 — 검은 무대 위에 장표 하나. 장식은 최소, HUD는 옅게 */
:root { color-scheme: dark; --hud-bg: rgba(20, 33, 61, .72); --hud-ink: #fff; --blue: #2f6bff; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: #000; color: #fff; overflow: hidden;
  font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
body { cursor: default; }
body.idle { cursor: none; }

#stage { position: fixed; inset: 0; background: #000; }
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000;
  opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; pointer-events: none; visibility: hidden; }
.slide.active { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.slide.hold { opacity: 0; visibility: hidden; }   /* 방문한 시연 장표는 상태 유지를 위해 숨겨 둔다 (visibility로 완전히 가려 뒤에 비치지 않게) */
.slide img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.slide video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* 영상 장표: 재생 전 안내 배지 (재생하면 사라짐) */
.slide.video .cue { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); background: var(--hud-bg); color: #fff;
  font-weight: 700; font-size: 16px; border-radius: 999px; padding: 10px 18px; backdrop-filter: blur(8px); pointer-events: none; }
.slide.video .cue b { color: #9fc0ff; font-weight: 900; }
.slide.video .cue[hidden] { display: none; }

/* 시연 장표: iframe이 화면을 가득 채운다. viewport 옵션이 있으면 가운데 고정 크기 */
.slide.demo { background: #0b0f1a; }
.slide.demo iframe { border: 0; width: 100%; height: 100%; background: #fff; }
.slide.demo .frame { position: relative; flex: none; background: #fff; border-radius: 18px; overflow: hidden;   /* flex:none — 화면이 틀보다 작아도 줄어들지 않게(줄어들면 비율이 깨진다), 크기는 transform 으로만 맞춘다 */
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 6px #1a2340; transform-origin: center; }
.slide.demo .frame iframe { position: absolute; inset: 0; }
.slide.demo .curtain { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #0b0f1a; color: #8b94ab; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.slide.demo .curtain[hidden] { display: none; }

#blackout { position: fixed; inset: 0; background: #000; z-index: 70; }   /* HUD보다 위 — 검은 화면일 땐 번호도 안 보이게 */
/* 관리자 배치도에서 이 모니터를 눌렀을 때 가장자리에 잠깐 뜨는 빨간 테두리 */
.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; } }

/* HUD 공통: 배지·번호·안내 */
.hud { position: fixed; z-index: 60; background: var(--hud-bg); color: var(--hud-ink); font-weight: 700;
  border-radius: 999px; padding: 8px 14px; font-size: 14px; letter-spacing: -.01em; backdrop-filter: blur(8px);
  transition: opacity .3s ease; pointer-events: none; }
.hud.gone { opacity: 0; }
.hud b { color: #9fc0ff; font-weight: 900; }
#counter { right: 18px; bottom: 16px; font-variant-numeric: tabular-nums; opacity: .85; }
#badge { left: 18px; top: 16px; font-size: 15px; padding: 10px 16px; }
#badge .t { color: #fff; } #badge .h { color: #9fc0ff; margin-left: 10px; font-weight: 600; }
#hint { left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; }
#goto { left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 40px; padding: 18px 36px; border-radius: 24px; }
#keycatcher { position: fixed; width: 1px; height: 1px; left: -10px; top: -10px; opacity: 0; outline: 0; }
/* 종료 화면 (관리자·발표자 화면에서 "발표 화면 닫기") */
#blackout .bye { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #8b94ab; font-size: 26px; font-weight: 800; }
#blackout .bye small { font-size: 15px; font-weight: 600; color: #66718c; }
/* 모바일: 안내·번호를 작게. 넘기기는 손가락으로 옆으로 밀기(app.js) */
@media (max-width: 720px) {
  .hud { font-size: 12px; padding: 6px 10px; }
  #hint { white-space: normal; text-align: center; max-width: 92vw; }
  #badge { font-size: 12px; padding: 7px 12px; max-width: 70vw; } #badge .h { display: block; margin-left: 0; }
  .slide.demo .frame { box-shadow: none; border-radius: 10px; }
  #goto { font-size: 28px; padding: 12px 24px; }
}
/* 터치 기기: 시연 장표 아래 띠 — 같은 쪽을 3번 탭하면 이전/다음. 앱 안 탭은 전부 앱 조작 */
.slide.demo .tapbar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; z-index: 5; background: rgba(20,33,61,.92); color: #9fc0ff; font-weight: 800; font-size: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.slide.demo .tapbar span { flex: 1; display: flex; align-items: center; justify-content: center; }
.slide.demo .tapbar span + span { border-left: 1px solid rgba(255,255,255,.15); }
.slide.demo .tapbar.arm { color: #fff; background: rgba(47,107,255,.85); }
body.touch .slide.demo > iframe { height: calc(100% - 56px); }   /* 띠가 앱을 가리지 않게 (틀 안 앱은 여백이 있어 그대로) */
body.touch .slide.demo > .curtain { bottom: 56px; }
body.touch .slide.demo .frame { margin-bottom: 56px; }   /* 아래 띠와 겹치지 않게 */

/* 텍스트 장표 */
.slide.text { padding: 6vh 8vw; }
.slide.text .tx { max-width: 84vw; text-align: center; word-break: keep-all; }
.slide.text .tx.left { text-align: left; }
.slide.text h1 { font-size: 5.2vw; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 3vh; }
.slide.text p { font-size: 2.6vw; font-weight: 600; line-height: 1.55; margin: 0; white-space: pre-wrap; }
.slide.text .size-s h1 { font-size: 4vw; } .slide.text .size-s p { font-size: 2vw; }
.slide.text .size-l h1 { font-size: 6.8vw; } .slide.text .size-l p { font-size: 3.4vw; }
.slide.text .tx:not(:has(h1)) p { font-size: 3.4vw; font-weight: 700; }