/* Pitchset 웹 발표 뷰어 (2026-10-14 영원한찬송님 «HTML 웹페이지로 제공 … PDF, PPT 로 내보내기 할수 있는 구조»)
 * 엔진이 만든 덱 HTML(.slide 1280×720 이 세로로 쌓인 문서)에 scripts/web_deck.py 가 이 파일과 viewer.js 를 붙인다.
 * 🔴 .slide 를 하나씩 감싸지 말 것 — 덱 CSS 의 `.slide:nth-of-type(even) .bg` 가 형제 순서로 모티프 방향을 바꾼다.
 *    슬라이드는 #pv-stage 안에서 형제로 남고, 크기는 zoom 으로 맞춘다. */
html, body { background: #0f1520; }
body.pv { margin: 0; min-height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; }

/* 발표 모드 — 한 장씩, 화면 맞춤 */
body.pv #pv-stage { position: fixed; inset: 0 0 56px 0; display: flex; align-items: center; justify-content: center; }
body.pv.pv-full #pv-stage { inset: 0; }
body.pv #pv-stage > .slide { display: none; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45); flex: none; }
body.pv #pv-stage > .slide.pv-on { display: block; }

/* 스크롤 모드 — 폰 기본. 전부 세로로, 폭 맞춤 */
body.pv.pv-scroll { overflow-y: auto; }
body.pv.pv-scroll #pv-stage { position: static; display: block; padding: 16px 0 88px; }
body.pv.pv-scroll #pv-stage > .slide { display: block; margin: 0 auto 14px; }

/* 아래 막대 */
#pv-bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56px; z-index: 50;
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: rgba(15, 21, 32, 0.92); color: #e8ecf2; backdrop-filter: blur(8px);
  font: 500 13px/1 'Pretendard', -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0;
  transition: opacity 0.25s;
}
body.pv-full.pv-idle #pv-bar { opacity: 0; pointer-events: none; }
#pv-bar .pv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9c2cf; padding: 0 6px; }
#pv-bar .pv-count { font-variant-numeric: tabular-nums; color: #b9c2cf; min-width: 52px; text-align: center; }
#pv-bar button, #pv-bar a {
  appearance: none; border: 1px solid rgba(232, 236, 242, 0.22); background: transparent; color: #e8ecf2;
  height: 36px; min-width: 36px; padding: 0 12px; border-radius: 6px; cursor: pointer;
  font: inherit; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
#pv-bar button:hover, #pv-bar a:hover { background: rgba(232, 236, 242, 0.1); }
#pv-bar .pv-export { background: #6d2550; border-color: #6d2550; }
#pv-bar .pv-export:hover { background: #82305f; }
#pv-bar .pv-made { border: 0; color: #8e98a6; font-size: 12px; padding: 0 4px; }
body.pv-scroll #pv-bar .pv-nav, body.pv-scroll #pv-bar .pv-count, body.pv-scroll #pv-bar .pv-full-btn { display: none; }
@media (max-width: 720px) {
  #pv-bar .pv-title, #pv-bar .pv-made { display: none; }
  #pv-bar { justify-content: space-between; }
}

/* 좌우 탭 영역 — 발표 모드에서 화면 반쪽 클릭으로 넘기기 */
#pv-tap-l, #pv-tap-r { position: fixed; top: 0; bottom: 56px; width: 22%; z-index: 40; cursor: pointer; }
#pv-tap-l { left: 0; } #pv-tap-r { right: 0; }
body.pv-full #pv-tap-l, body.pv-full #pv-tap-r { bottom: 0; }
body.pv-scroll #pv-tap-l, body.pv-scroll #pv-tap-r { display: none; }

@media print {
  #pv-bar, #pv-tap-l, #pv-tap-r { display: none !important; }
  html, body { background: none; }
  body.pv { overflow: visible; }
  body.pv #pv-stage { position: static; display: block; }
  body.pv #pv-stage > .slide { display: block !important; zoom: 1 !important; box-shadow: none; margin: 0; }
}