/* 발표 화면 — 검은 무대 위에 장표 하나. 장식은 최소, 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: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR", Roboto, "Helvetica Neue", Arial, 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; }
.slide.demo .curtain { flex-direction: column; gap: 22px; padding: 0 10vw; text-align: center; line-height: 1.45; }   /* 안내 글 + 버튼이 세로로 */
.slide.demo .curtain .open-ext { font: inherit; font-size: 20px; padding: 12px 26px; border-radius: 999px; border: 0; background: #2f6bff; color: #fff; cursor: pointer; }   /* iframe 금지 주소 → 새 창 열기 */

#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; }
/* 언어 버튼(왼쪽 아래) — 청중·발표자가 눌러 언어판을 바꾼다. 마우스가 멈추면 번호와 함께 숨지 않고 옅어진다 */
#langs { left: 18px; bottom: 16px; padding: 4px; display: flex; gap: 4px; opacity: .85; }
#langs button { font: inherit; font-weight: 800; font-size: 13px; border: 0; border-radius: 999px; padding: 4px 10px; min-height: 0; background: transparent; color: #fff; cursor: pointer; opacity: .75; }
#langs button.on { background: #fff; color: #14213d; opacity: 1; }
#langs[hidden], #langNotice[hidden], #shareBox[hidden] { display: none; }
#shareBox { right: 18px; bottom: 16px; padding: 4px; opacity: .85; } body.idle #shareBox { opacity: .35; }
#shareBox button { font: inherit; font-weight: 800; font-size: 13px; border: 0; border-radius: 999px; padding: 4px 12px; min-height: 0; background: transparent; color: #fff; cursor: pointer; }
.share-dlg { border: 0; border-radius: 16px; padding: 0; max-width: min(92vw, 420px); color: #14213d; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "Noto Sans KR", Roboto, "Helvetica Neue", Arial, sans-serif; }
.share-dlg::backdrop { background: rgba(0,0,0,.55); } .share-dlg form { padding: 20px 22px; display: grid; gap: 10px; } .share-dlg h2 { margin: 0; font-size: 18px; } .share-dlg p { margin: 0; font-size: 13px; color: #66718c; }
.share-dlg input { font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid #e3e7f0; border-radius: 10px; width: 100%; box-sizing: border-box; }
.share-dlg .share-err { color: #dc2626; font-weight: 700; } .share-out { display: flex; gap: 6px; } .share-out input { flex: 1; min-width: 0; }
.share-dlg button { font: inherit; font-weight: 800; border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; background: #e8efff; color: #2f6bff; } .share-dlg #shareGo { background: #2f6bff; color: #fff; }
.share-btns { display: flex; justify-content: flex-end; gap: 8px; }
body.idle #langs { opacity: .35; }
#langNotice { left: 50%; top: 14px; transform: translateX(-50%); background: #fff8eb; color: #8a6116; font-size: 13px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#badge { left: 2.6vw; top: calc(3vh + max(20px, 3vh) + 10px); font-size: 15px; padding: 10px 16px; }   /* 좌상단 CI 로고 아래로 — 로고를 가리지 않는다 */
#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; }
/* 발표 세션(§16): 세션 고르기 창 · 열람 모드 표시 */
.sess-pick { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 24px; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif; }
.sess-pick .card { width: min(680px, 100%); background: #111827; border: 1px solid #334155; border-radius: 18px; padding: 26px 28px; display: grid; gap: 16px; }
.sess-pick h2 { margin: 0; font-size: 22px; font-weight: 800; }
.sess-pick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sess-pick li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; background: #0f172a; border: 1px solid #1f2a44; border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.sess-pick li b { color: #93c5fd; }
.sess-pick .ops { display: flex; gap: 6px; }
.sess-pick button { font: inherit; font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: 10px; border: 1px solid #334155; background: #1e293b; color: #fff; cursor: pointer; }
.sess-pick button.primary { background: #2f6bff; border-color: #2f6bff; }
.sess-pick button.danger { background: #3b1113; border-color: #7f1d1d; color: #fca5a5; }
.sess-pick button:disabled { opacity: .45; cursor: default; }
.sess-pick .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sess-pick .acts button { flex: 1 1 240px; padding: 14px 16px; font-size: 15px; }
.sess-pick .hint { margin: 0; color: #94a3b8; font-size: 13px; line-height: 1.5; }
.view-badge { position: fixed; top: 12px; right: 14px; z-index: 80; font: 800 13px/1 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; color: #cbd5e1; background: rgba(15,23,42,.72); padding: 9px 12px; border-radius: 999px; pointer-events: none; transition: opacity .4s; }
body.idle .view-badge { opacity: .35; }
#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; }   /* 아래 띠와 겹치지 않게 */

/* 티오더 AI CI 로고 — 좌측 상단(사내 관례), 화면 높이의 3%(최소 20px), 여백은 로고 높이의 1/2쯤. 이미지 파일로만 쓴다 */
#brandmark { position: fixed; left: 2.6vw; top: 3vh; height: max(20px, 3vh); width: auto; z-index: 65; pointer-events: none; user-select: none;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.35)); transition: opacity .3s ease; }
#brandmark.soft { opacity: .6; }                              /* 시연 앱·영상 위에서는 옅게 — 조작을 가리지 않게 */
#brandmark[hidden] { display: none; }
/* 맨 끝 티오더 AI 장표: 밝은 회색 무대, 딥네이비 글자, 컬러 로고 */
.slide.brand { background: radial-gradient(140% 90% at 50% -20%, #f8fafd 0%, #eef0f4 65%); color: #14213d; }
.slide.brand .brand-end { text-align: center; padding: 6vh 8vw; max-width: 84vw; word-break: keep-all; }
.slide.brand .brand-end img { height: clamp(28px, 7vh, 90px); width: auto; display: block; margin: 0 auto 5vh; }
.slide.brand h1 { font-size: clamp(22px, 4.2vw, 64px); font-weight: 900; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 2.5vh; }
.slide.brand p { font-size: clamp(14px, 1.9vw, 30px); font-weight: 600; line-height: 1.6; margin: 0; color: #66718c; }
.slide.brand p b { color: #2f6bff; font-weight: 900; }

/* 텍스트 장표 */
.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; }

/* 시연 조작 모드 — 키가 앱으로 가는 중임을 가장자리 테두리로 알린다 (발표자가 지금 어느 모드인지 늘 보이게) */
body.demo-pass::after { content: ''; position: fixed; inset: 0; border: 4px solid var(--blue); border-radius: 2px; pointer-events: none; z-index: 40; animation: demoPulse 2.4s ease-in-out infinite; }
@keyframes demoPulse { 0%, 100% { opacity: .85; } 50% { opacity: .35; } }
body.demo-pass #badge { background: var(--blue); color: #fff; }
body.demo-pass #badge .h b { background: rgba(255,255,255,.22); border-radius: 6px; padding: 1px 6px; }

/* 리모컨 커서 — 방향키로 움직여 시연 앱을 누른다 (마우스 없는 레이저 포인터용).
   청중도 어디를 가리키는지 봐야 하므로 크고 또렷하게: 파란 화살표 + 흰 테두리 그림자 + 뒤에 옅은 링 */
#remote-cursor { position: fixed; z-index: 46; width: 26px; height: 38px; pointer-events: none;
  background: var(--blue); clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 66% 88%, 48% 52%, 78% 48%);
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 3px #fff) drop-shadow(0 3px 7px rgba(0,0,0,.7));
  transition: left .08s linear, top .08s linear; }
#remote-cursor[hidden] { display: none; }
body.cursor-on::after { content: ''; position: fixed; inset: 0; border: 4px solid var(--blue); pointer-events: none; z-index: 40; opacity: .5; }
/* 누른 자리 표시 — 어디를 눌렀는지 청중도 보이게 */
.click-flash { position: fixed; z-index: 47; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid var(--blue); border-radius: 50%;
  pointer-events: none; animation: clickRing .6s ease-out forwards; }
@keyframes clickRing { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }