/* ========== viewer-stage.css — 시뮬레이터 동등 스테이지 (2026-05-24) ========== */
:root { --vz-viewer-chrome: 168px; --vz-canvas-w: 570px; --vz-accent-glow: rgba(21, 101, 192, 0.14); --vz-device-bezel-border: 11px; --vz-device-topbar-h: 20px; --vz-device-topbar-offset: 28px; --vz-device-host-pad-v: 30px; --vz-device-host-pad-h: 14px; --vz-device-bezel-shell: #2f3742; --vz-device-bezel-edge: #5d6776; --vz-device-bezel-edge-inner: rgba(221, 230, 242, 0.34); --vz-device-bezel-inner: #0f1117; --vz-device-bezel-shadow: 0 36px 64px -16px rgba(2, 6, 23, 0.58), 0 18px 30px rgba(2, 6, 23, 0.36); }
/* 2026-05-24: 디바이스형 — 스테이지 가로 570px 고정(축소 없음) */
html.vz-device-canvas-fixed { --vz-canvas-w: 570px; }
html.vz-device-canvas-fixed #vz-page-swiper-inner { width: 570px !important; max-width: 570px !important; min-width: 570px !important; flex: 0 0 570px !important; }
html.vz-device-canvas-fixed .vz-page-swiper-host { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html.vz-device-canvas-fixed .vz-stage-scale-box { transform: none !important; }
html.vz-device-canvas-fixed .vz-webzine-stage { width: 570px !important; min-width: 570px !important; max-width: 570px !important; }
/* 2026-05-27: 디바이스형 PC — 베젤 상·하 여백 동일 */
.vz-body--device-sim .vz-page-swiper-host { padding: var(--vz-device-host-pad-v, 30px) var(--vz-device-host-pad-h, 14px); background: #e6ebf2; }
/* 2026-05-27: Keep bezel shape/color identical across themes */
.vz-device-bezel { position: relative; box-sizing: border-box; display: inline-flex; flex-direction: column; flex: 0 0 auto; margin: 0; padding: 0; background: linear-gradient(165deg, var(--vz-device-bezel-shell) 0%, #3a4350 44%, #2b323d 100%); border: var(--vz-device-bezel-border) solid var(--vz-device-bezel-edge); border-radius: 34px; box-shadow: var(--vz-device-bezel-shadow), inset 0 0 0 1px var(--vz-device-bezel-edge-inner), inset 0 0 0 3px rgba(11, 16, 26, 0.55), inset 0 -10px 18px rgba(0, 0, 0, 0.24); overflow: hidden; line-height: 0; isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.vz-device-bezel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--vz-device-topbar-offset); pointer-events: none; z-index: 4; border-radius: 22px 22px 0 0; background: linear-gradient(180deg, #0a0f18 0%, #0f1622 62%, #121b28 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.28); }
.vz-device-bezel::after { content: ""; position: absolute; left: 50%; top: calc((var(--vz-device-topbar-offset) - 9px) / 2); transform: translateX(-50%); width: 132px; height: 9px; border-radius: 999px; pointer-events: none; z-index: 5; background: #050910; box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.65), 0 1px 2px rgba(0,0,0,0.45); }
.vz-device-grip-head { position: absolute; left: 0; right: 0; top: 0; height: var(--vz-device-topbar-offset); z-index: 6; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 0 12px; box-sizing: border-box; line-height: 1; }
.vz-device-grip-title { display: block; text-align: center; color: #e5eefb; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-shadow: 0 1px 1px rgba(0,0,0,0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.vz-device-grip-link { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: #ffffff; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; opacity: 1; background: rgba(0, 0, 0, 0.85); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 4px 8px; transition: background 0.2s ease, border-color 0.2s ease; }
.vz-device-grip-link:hover { color: #ffffff; background: #000000; border-color: rgba(255, 255, 255, 0.28); }
.vz-device-grip-link i { font-size: 0.75rem; line-height: 1; }
.vz-device-grip-spacer { display: block; width: 54px; height: 14px; }
.vz-device-bezel .vz-page-swiper-inner { flex: 1 1 auto; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: 0; overflow: hidden; }
.vz-stage-device--bezel { border-radius: 0; overflow: hidden; }
.vz-body--device-sim .vz-device-bezel .vz-swiper,
.vz-body--device-sim .vz-device-bezel #vz-page-swiper,
.vz-body--device-sim .vz-device-bezel .swiper-wrapper,
.vz-body--device-sim .vz-device-bezel .swiper-slide,
.vz-body--device-sim .vz-device-bezel .vz-stage-wrap { border-radius: 0; background: var(--vz-device-bezel-inner); }
/* 2026-05-25: 디바이스형 — 베젤 세로 = page.height (JS syncDeviceBezelOuterSize), 내부 100% 채움 */
html.vz-device-canvas-fixed .vz-device-bezel #vz-page-swiper-inner { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 auto !important; }
html.vz-device-canvas-fixed .vz-device-bezel .vz-page-swiper-inner,
html.vz-device-canvas-fixed .vz-device-bezel #vz-page-swiper,
html.vz-device-canvas-fixed .vz-device-bezel #vz-page-swiper .swiper-wrapper { box-sizing: border-box; }
html.vz-device-canvas-fixed .vz-device-bezel .vz-swiper,
html.vz-device-canvas-fixed .vz-device-bezel .vz-stage-wrap,
html.vz-device-canvas-fixed .vz-device-bezel .vz-stage-scale-shell,
html.vz-device-canvas-fixed .vz-device-bezel .vz-stage-scale-box,
html.vz-device-canvas-fixed .vz-device-bezel .vz-stage-scroll,
html.vz-device-canvas-fixed .vz-device-bezel .vz-webzine-stage { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100%; max-height: 100%; min-height: 0; border-radius: 0; }
html.vz-device-canvas-fixed .vz-device-bezel .vz-stage-scale-box { transform: none !important; }
html.vz-device-canvas-fixed .vz-device-bezel .vz-stage-scroll { overflow-y: visible; overflow-x: hidden; }
html.vz-device-canvas-fixed .vz-device-bezel .swiper-slide { box-sizing: border-box; border-radius: 0; }
@media (max-width: 599px) {
  /* viewer-stage.css start: device mobile full-bleed fit */
  #vz-viewer-root.vz-viewer-wrap--wide-stage .vz-viewer-main { border-top: 0; }
  .vz-body--device-sim .vz-page-swiper-host { background: #000; }
  .vz-body--device-sim .vz-page-swiper-rail { width: 100%; justify-content: center; }
  .vz-body--device-sim .vz-page-swiper-inner { width: 100%; max-width: 100%; min-width: 0; }
  .vz-body--device-sim { --vz-device-topbar-offset: 0px; --vz-device-bezel-border: 0px; }
  .vz-body--device-sim .vz-page-swiper-host { padding: 0; }
  .vz-device-bezel { border-width: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none; }
  .vz-device-grip-head { display: none; }
  .vz-device-bezel::before,
  .vz-device-bezel::after { display: none; }
  .vz-stage-device--bezel { border-radius: 0; }
  /* viewer-stage.css end: device mobile full-bleed fit */
}
/* 2026-05-24: view — 헤더·메인·푸터 사이 여백 없음, 1px 경계만 */
#vz-viewer-root .vz-viewer-head { position: sticky; top: 0; z-index: 55; background-color: var(--vz-header-bg); background-image: var(--vz-header-gradient); background-repeat: no-repeat; background-size: cover; }
#vz-viewer-root .vz-viewer-head.vz-viewer-head--webzine-brand { background-color: var(--vz-head-bg, #2291ff) !important; background-image: none !important; color: var(--vz-head-text, #ffffff); }
#vz-viewer-root .vz-viewer-main { margin: 0; padding: 0; border-top: 1px solid var(--vz-viewer-main-divider, var(--vz-header-border)); background: var(--vz-stage-chrome); }
/* 2026-05-22: 풀 뷰어 — 스테이지 영역만 가로 확장(헤더·푸터는 570 중앙) */
#vz-viewer-root.vz-viewer-wrap--wide-stage { max-width: none; width: 100%; min-height: auto; display: flex; flex-direction: column; }
/* 2026-05-22: 헤더는 전폭(홈 톱바와 동일), 타이틀바만 570 중앙 */
#vz-viewer-root.vz-viewer-wrap--wide-stage .vz-viewer-head { width: 100%; max-width: none; margin-left: 0; margin-right: 0; box-sizing: border-box; }
#vz-viewer-root.vz-viewer-wrap--wide-stage .vz-viewer-main { flex: 0 0 auto; position: static; width: 100%; }
#vz-viewer-root.vz-viewer-wrap--wide-stage .vz-page-swiper-host { flex: 0 0 auto; margin: 0; }
.vz-viewer-main { display: block; width: 100%; margin: 0; padding: 0; background: var(--vz-stage-chrome, var(--vz-gray-light, #f5f5f5)); }
.vz-page-swiper-host { position: relative; width: 100%; background: var(--vz-stage-chrome, var(--vz-gray-light, #f5f5f5)); padding: 0; margin: 0; box-sizing: border-box; overflow: hidden; display: flex; justify-content: center; min-height: var(--vz-stage-reserve-h, var(--vz-page-reserve-h, 930px)); }
/* 2026-06-06: 리스트→뷰어 진입 — 첫 지면 준비 전 중앙 로딩 */
.vz-viewer-boot-loader { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--vz-stage-chrome, var(--vz-gray-light, #f5f5f5)); transition: opacity 0.28s ease, visibility 0.28s ease; }
.vz-viewer-boot-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.vz-viewer-boot-loader__box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; }
.vz-viewer-boot-loader__spinner { width: 40px; height: 40px; border: 3px solid rgba(148, 163, 184, 0.28); border-top-color: var(--vz-primary, #22d3ee); border-radius: 50%; animation: vzViewerBootSpin 0.75s linear infinite; }
.vz-viewer-boot-loader__text { font-size: 13px; font-weight: 600; color: var(--vz-ink-muted, #64748b); letter-spacing: 0.02em; }
@keyframes vzViewerBootSpin { to { transform: rotate(360deg); } }
/* 2026-06-06: 초기 로드 후 — host는 swiper 높이에 맞춤(footer 즉시 붙음, min-height transition 없음) */
#vz-viewer-root.vz-viewer-main--stage-ready .vz-page-swiper-host { min-height: 0; height: auto; }
/* 2026-05-22: V2 zine_swipe — 570 콘텐츠 + 바깥 이전/다음 (flex rail) */
.vz-page-swiper-rail { display: flex; align-items: flex-start; justify-content: center; gap: 0; width: auto; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
.vz-page-swiper-inner { position: relative; flex: 0 0 auto; width: var(--vz-canvas-w, 570px); max-width: var(--vz-canvas-w, 570px); min-width: 0; margin: 0; padding: 0; overflow: hidden; }
/* 2026-05-21: 이전/다음 — 원형 제거, 화살표만(약 2rem), 뷰포트 세로 중앙 고정 */
.vz-page-nav { display: none; width: auto; height: auto; min-width: 44px; min-height: 44px; margin: 0; padding: 6px 10px; border: none; border-radius: 0; background: transparent; color: var(--vz-page-nav-fg, #e2e8f0); font-size: 2rem; line-height: 1; cursor: pointer; box-shadow: none; transition: color 0.2s, transform 0.15s, opacity 0.2s; position: fixed; top: 50%; z-index: 60; transform: translateY(-50%); }
.vz-page-nav i { font-size: 2rem; line-height: 1; pointer-events: none; }
.vz-page-nav--prev { left: max(10px, calc(50% - (var(--vz-canvas-w, 570px) / 2) - 64px)); }
.vz-page-nav--next { right: max(10px, calc(50% - (var(--vz-canvas-w, 570px) / 2) - 64px)); }
.vz-page-nav:hover { background: transparent; border: none; color: var(--vz-accent, #ff7043); box-shadow: none; transform: translateY(-50%) scale(1.06); }
.vz-page-nav:disabled,
.vz-page-nav.swiper-button-disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.vz-page-nav[hidden] { display: none !important; }
@media (min-width: 600px) {
  .vz-page-swiper-host--multi .vz-page-nav { display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 599px) {
  .vz-page-swiper-rail { gap: 0; padding: 0; }
  /* 2026-05-23: 모바일도 논리 570px 기준 scale — applyStageScale이 visualW 설정 */
  .vz-page-nav--prev { left: 6px; }
  .vz-page-nav--next { right: 6px; }
}
.vz-stage-wrap { display: block; margin: 0; padding: 0; background: transparent; overflow: hidden; line-height: 0; }
/* 2026-05-22: scale shell — transform 여백 제거(시각 크기 = 지면 설정값) */
.vz-stage-scale-shell { position: relative; margin: 0; padding: 0; overflow: hidden; line-height: 0; flex-shrink: 0; }
.vz-stage-scale-box { position: relative; margin: 0; padding: 0; transform-origin: top left; flex-shrink: 0; }
/* 2026-05-22: 페이지 설정 height — 초과 시에만 세로 스크롤(viewer-core.js) */
/* 2026-05-22: 스크롤 가능·스크롤바 비표시(페이지/터치 스크롤) */
.vz-stage-scroll { margin: 0; padding: 0; overflow-x: hidden; overflow-y: visible; overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; touch-action: pan-y; line-height: normal; }
.vz-stage-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.vz-webzine-stage { position: relative; width: var(--vz-page-w, var(--vz-canvas-w, 570px)); height: var(--vz-page-h, auto); min-width: var(--vz-page-w, var(--vz-canvas-w, 570px)); max-width: var(--vz-page-w, var(--vz-canvas-w, 570px)); overflow: hidden; background: var(--vz-stage-bg, #0f1117); flex-shrink: 0; margin: 0; padding: 0; line-height: normal; }
.vz-bg-color-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vz-bg-image-container { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
/* 2026-05-22: Tailwind 미로드 뷰어 — 배경 슬라이드·동영상 레이어 (bg_slideshow.js) */
.vz-bg-flip-root { position: absolute; inset: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
.vz-bg-image-container .bg-slide-layer,
.vz-bg-image-container .vz-bg-slide-layer { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; }
.vz-bg-image-container.vz-bg-vertical-stack { overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: none; -ms-overflow-style: none; }
.vz-bg-image-container.vz-bg-vertical-stack::-webkit-scrollbar { display: none; width: 0; height: 0; }
.vz-bg-vertical-row { width: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.vz-bg-video-wrap { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; overflow: hidden; margin: 0; padding: 0; }
/* 2026-05-23: CMS·뷰어 동일 — iframe cover(page_bg_video.js), 좌우 여백 제거 */
.vz-bg-video-wrap iframe { position: absolute; left: 50%; top: 50%; margin: 0; padding: 0; border: 0; max-width: none; max-height: none; transform: translate(-50%, -50%); }
.vz-bg-video-wrap video,
.vz-bg-video-wrap .vz-bg-video-embed { border: 0; object-fit: cover; }
.vz-bg-video-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.85); color: #fda4af; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.5; }
.vz-bg-video-wrap iframe.pointer-events-none,
.vz-bg-video-wrap video.pointer-events-none { pointer-events: none; }
.vz-bg-video-wrap iframe.pointer-events-auto,
.vz-bg-video-wrap video.pointer-events-auto { pointer-events: auto; }
.vz-bg-image-container.bg-video-interactive { pointer-events: auto; }
.vz-bg-image-container.bg-video-interactive iframe,
.vz-bg-image-container.bg-video-interactive video { pointer-events: auto; }
.vz-bg-tint-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vz-bg-swipe-layer { position: absolute; inset: 0; z-index: 3; touch-action: none; cursor: grab; background: transparent; }
.vz-bg-swipe-layer.hidden { display: none !important; pointer-events: none; }
/* 2026-05-23: 시뮬·뷰어 — renderRoot top=0, 객체 Y = editorFrame.y - 28 (canvas_viewport) */
.vz-canvas-render { position: absolute; left: 0; top: var(--vz-stage-offset-top, 0); width: 100%; height: 100%; z-index: 10; overflow: hidden; pointer-events: none; margin: 0; padding: 0; box-sizing: border-box; }
/* 2026-05-23: CMS canvas-interactive-zone 레이어와 동일 border-box */
.vz-canvas-render [id^="vz-obj-"] { position: absolute; margin: 0; padding: 0; border: none; box-sizing: border-box; overflow: visible; }
/* 2026-06-01: 갤러리 목록·상세 — 헤더가 객체 박스 밖으로 나가지 않도록 클립 */
.vz-canvas-render [id^="vz-obj-"].vz-module-layer-widget--gallery-list,
.vz-canvas-render [id^="vz-obj-"].vz-module-layer-widget--gallery-detail { overflow: hidden !important; }
.vz-canvas-render [id^="vz-obj-"].animate__animated { animation-duration: var(--animate-duration, 1s); animation-fill-mode: both; animation-timing-function: ease; }
/* 2026-06-03: 텍스트 — CSS 모션은 shell(외곽 레이어 transform 시 좌표 밀림 방지) */
.vz-canvas-render [id^="vz-obj-"] .kz-text-layer-shell.animate__animated { animation-duration: var(--animate-duration, 1s); animation-fill-mode: both; animation-timing-function: ease; }
.vz-canvas-render [id^="vz-obj-"] .zine-slide-player { overflow: hidden; }
.vz-canvas-render [id^="vz-obj-"] > *,
.vz-canvas-render [id^="vz-obj-"] img,
.vz-canvas-render [id^="vz-obj-"] button,
.vz-canvas-render [id^="vz-obj-"] p { pointer-events: auto; }
/* 2026-06-02: viewer-stage.css — text multiline align start */
.vz-canvas-render [id^="vz-obj-"] .kz-text-layer-inner { width: 100%; min-width: 0; box-sizing: border-box; }
.vz-canvas-render [id^="vz-obj-"] .kz-text-line { display: block; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
/* 2026-06-02: viewer-stage.css — text multiline align end */
.vz-bg-flip-root { transform-style: preserve-3d; width: 100%; height: 100%; }
.vz-bg-flip-root.is-bg-flip-mode { transition: transform 0s; }
.vz-bg-flip-root.is-bg-flip-mode.flipped { transform: rotateY(180deg); }
.vz-bg-flip-root .bg-back-face { transform: rotateY(180deg); }
@keyframes vzCustomBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.vz-canvas-render .blink-4 { animation: vzCustomBlink 0.5s ease-in-out 4; }
.vz-canvas-render .blink-6 { animation: vzCustomBlink 0.5s ease-in-out 6; }
.vz-canvas-render .blink-10 { animation: vzCustomBlink 0.5s ease-in-out 10; }
.vz-canvas-render .blink-infinite { animation: vzCustomBlink 0.5s ease-in-out infinite; }
/* 2026-05-27: 모션 종료 후 계속 숨김 — 인라인·animate.css 덮어쓰기 방지 */
.vz-canvas-render [id^="vz-obj-"].vz-layer-after-motion-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* ========== viewer-stage.css — 링크 레이어 (link_layer.js · 에디터 zine_editor.css와 동일 규칙) ========== */
.vz-canvas-render [id^="vz-obj-"].zine-link-layer { overflow: hidden; box-sizing: border-box; }
.vz-canvas-render .zine-link-btn { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; background: transparent; font-family: inherit; box-sizing: border-box; }
.vz-canvas-render a.zine-link-btn { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; }
.vz-canvas-render .zine-link-btn--transparent { opacity: 0; }
.vz-canvas-render .zine-link-btn--image-only { opacity: 0; }
.vz-canvas-render [id^="vz-obj-"].zine-link-layer--text {
    --link-btn-fs: 11px; --link-btn-r: 10px; --link-btn-px: 10px;
    --link-btn-bg: #06b6d4; --link-btn-text: #070A13; --link-btn-bg-hover: #22d3ee; --link-btn-text-hover: #070A13;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--link-btn-r) !important;
    background: var(--link-btn-bg) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 3px 12px rgba(6, 182, 212, 0.38), 0 1px 0 rgba(255, 255, 255, 0.35) inset !important;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}
.vz-canvas-render [id^="vz-obj-"].zine-link-layer--text:hover {
    background: var(--link-btn-bg-hover) !important;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.48), 0 1px 0 rgba(255, 255, 255, 0.42) inset !important;
    transform: translateY(-1px);
}
.vz-canvas-render [id^="vz-obj-"].zine-link-layer--text:active { transform: translateY(0); }
.vz-canvas-render .zine-link-btn--text {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--link-btn-text);
    font-family: 'Poppins', 'Noto Sans KR', sans-serif; font-weight: 700;
    font-size: var(--link-btn-fs); letter-spacing: 0.04em; line-height: 1.15;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); overflow: hidden;
    transition: color 0.2s ease;
}
.vz-canvas-render .zine-link-layer--text:hover .zine-link-btn--text { color: var(--link-btn-text-hover); }
.vz-canvas-render .zine-link-btn--text::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.06) 42%, transparent 100%);
    pointer-events: none; z-index: 0;
}
.vz-canvas-render .zine-link-btn--text::after {
    content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px;
    background: rgba(7, 10, 19, 0.12); pointer-events: none; z-index: 0;
}
.vz-canvas-render .zine-link-btn__label {
    position: relative; z-index: 1;
    max-width: calc(100% - var(--link-btn-px) * 2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0 var(--link-btn-px);
}
.vz-canvas-render .preview-layer-image img { width: 100%; height: 100%; object-fit: fill; display: block; }
/* ========== viewer-stage.css — 객체 동영상 레이어 (video_layer.js, Tailwind 미로드) ========== */
.vz-canvas-render .zine-video-player.wsh-vp { overflow: visible; }
.vz-canvas-render .zine-video-player { width: 100%; height: 100%; position: relative; overflow: hidden; background: #000; margin: 0; padding: 0; box-sizing: border-box; }
.vz-canvas-render .zine-video-player iframe,
.vz-canvas-render .zine-video-player video { display: block; width: 100%; height: 100%; border: 0; margin: 0; padding: 0; box-sizing: border-box; pointer-events: auto; }
.vz-canvas-render .zine-video-player .wsh-vp__poster,
.vz-canvas-render .zine-video-player .wsh-vp__center-play,
.vz-canvas-render .zine-video-player .wsh-vp__chrome,
.vz-canvas-render .zine-video-player .wsh-vp__btn { pointer-events: auto; touch-action: manipulation; }
.vz-canvas-render .zine-video-player.swiper-no-swiping,
.vz-canvas-render [id^="vz-obj-"].swiper-no-swiping { cursor: pointer; }
.vz-canvas-render .zine-video-player video { object-fit: cover; }
.vz-bg-video-wrap .wsh-vp--background { position: absolute; inset: 0; width: 100%; height: 100%; }
.vz-bg-video-wrap .wsh-vp--background .wsh-vp__media { position: absolute; inset: 0; }
/* 2026-06-06: 뷰어 배경·캔버스풀 동영상 — 좌우 스와이프 통과, 탭만 재생/일시정지 */
#vz-viewer-root .vz-bg-video-wrap .wsh-vp--viewer-swipe,
#vz-viewer-root .vz-canvas-render .wsh-vp--viewer-swipe,
#vz-viewer-root .vz-canvas-render .wsh-vp--canvas-full { pointer-events: none; }
#vz-viewer-root .vz-bg-video-wrap .wsh-vp--viewer-swipe .wsh-vp__iframe,
#vz-viewer-root .vz-bg-video-wrap .wsh-vp--viewer-swipe .wsh-vp__video,
#vz-viewer-root .vz-canvas-render .wsh-vp--viewer-swipe .wsh-vp__iframe,
#vz-viewer-root .vz-canvas-render .wsh-vp--viewer-swipe .wsh-vp__video,
#vz-viewer-root .vz-canvas-render .wsh-vp--canvas-full .wsh-vp__iframe,
#vz-viewer-root .vz-canvas-render .wsh-vp--canvas-full .wsh-vp__video { pointer-events: none !important; }
#vz-viewer-root .wsh-vp__swipe-pass { position: absolute; inset: 0; z-index: 3; background: transparent; touch-action: pan-y pinch-zoom; cursor: default; pointer-events: auto; }
#vz-viewer-root .vz-bg-video-wrap .wsh-vp--viewer-swipe .wsh-vp__chrome,
#vz-viewer-root .vz-bg-video-wrap .wsh-vp--viewer-swipe .wsh-vp__swipe-pass,
#vz-viewer-root .vz-canvas-render .wsh-vp--viewer-swipe .wsh-vp__chrome,
#vz-viewer-root .vz-canvas-render .wsh-vp--viewer-swipe .wsh-vp__swipe-pass,
#vz-viewer-root .vz-canvas-render .wsh-vp--canvas-full .wsh-vp__chrome,
#vz-viewer-root .vz-canvas-render .wsh-vp--canvas-full .wsh-vp__swipe-pass { pointer-events: auto; touch-action: manipulation; }
#vz-viewer-root .vz-canvas-render [id^="vz-obj-"].vz-video-canvas-full { pointer-events: none; }
#vz-viewer-root .vz-canvas-render [id^="vz-obj-"].vz-video-canvas-full > .wsh-vp,
#vz-viewer-root .vz-canvas-render [id^="vz-obj-"].vz-video-canvas-full > .zine-video-player { pointer-events: none; }
.bg-video-unmute-btn,
.vz-bg-video-unmute-btn { position: absolute; right: 10px; bottom: 10px; z-index: 25; pointer-events: auto; touch-action: manipulation; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(15,23,42,0.88); color: #f1f5f9; font-size: 11px; font-weight: 600; cursor: pointer; }
.bg-video-unmute-btn:hover,
.vz-bg-video-unmute-btn:hover { background: rgba(8,145,178,0.82); }
/* 2026-05-23: 이용자 뷰어 — 팝업은 570px 스와이퍼 스테이지(vz-page-swiper-inner) 안만 덮음 */
#vz-page-swiper-inner .zine-popup-overlay.zine-popup-overlay--device { position: absolute; left: 0; top: 0; z-index: 200; margin: 0; padding: 10px; border-radius: 0; align-items: flex-start; justify-content: center; background: rgba(15, 23, 42, 0.88); box-sizing: border-box; }
/* 2026-05-26: 원본 가로 570px 미만 — 스테이지 상단·원본 픽셀·10px 여백 */
#vz-page-swiper-inner .zine-popup-overlay--device.zine-popup-overlay--natural-size { align-items: flex-start; justify-content: center; padding: 10px; }
#vz-page-swiper-inner .zine-popup-overlay--device.zine-popup-overlay--natural-size .zine-popup-panel { width: auto; max-width: 100%; height: auto; max-height: 100%; border-radius: var(--vz-radius-md, 14px); }
#vz-page-swiper-inner .zine-popup-overlay--device.zine-popup-overlay--natural-size .zine-popup-body__img { width: auto; max-width: 100%; }
#vz-page-swiper-inner .zine-popup-overlay--device .zine-popup-panel { width: 100%; max-width: 100%; height: auto; max-height: 100%; border-radius: 0; flex-shrink: 0; }
#vz-page-swiper-inner.zine-popup-stage-open { overflow: hidden; }
#vz-viewer-root .zine-popup-layer { overflow: hidden; box-sizing: border-box; }
.zine-popup-trigger { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; cursor: pointer; background: transparent; }
.zine-popup-trigger--transparent { opacity: 0; }
.zine-popup-overlay { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(10px); box-sizing: border-box; }
.zine-popup-overlay.hidden { display: none !important; }
.zine-popup-panel { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); display: flex; flex-direction: column; border-radius: var(--vz-radius-md, 14px); overflow: hidden; background: var(--vz-card, #ffffff); border: 1px solid var(--vz-border, rgba(33,33,33,0.08)); box-shadow: var(--vz-shadow-lg, 0 20px 40px rgba(0,0,0,0.1)); color: var(--vz-ink, #212121); box-sizing: border-box; }
.zine-popup-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; flex-shrink: 0; border-bottom: 1px solid var(--vz-popup-head-border, var(--vz-header-border, rgba(33,33,33,0.08))); background-color: var(--vz-popup-head-bg, var(--vz-header-bg, #ffffff)); background-image: linear-gradient(180deg, var(--vz-popup-head-shine, rgba(21, 101, 192, 0.08)) 0%, transparent 100%); }
.zine-popup-top__title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--vz-popup-head-fg, var(--vz-header-fg, #000000)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zine-popup-top__close { flex-shrink: 0; width: 32px; height: 32px; border: 1px solid var(--vz-btn-border, transparent); border-radius: 8px; background: var(--vz-btn-bg, rgba(21,101,192,0.08)); color: var(--vz-btn-fg, #212121); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.zine-popup-top__close:hover { background: var(--vz-btn-hover-bg, rgba(255,112,67,0.12)); color: var(--vz-btn-hover-fg, #ff7043); }
.zine-popup-body { flex: 1 1 auto; min-height: 0; overflow: auto; background: rgba(7,10,19,0.45); }
.zine-popup-body__img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.zine-popup-foot { padding: 0.75rem 1rem; border-top: 1px solid rgba(255,255,255,0.08); text-align: center; }
.zine-popup-foot.hidden { display: none !important; }
.zine-popup-top.hidden { display: none !important; }
.zine-popup-overlay--minimal .zine-popup-panel { position: relative; }
.zine-popup-panel__float-close { position: absolute; top: 8px; right: 8px; z-index: 6; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(15, 23, 42, 0.82); color: #f8fafc; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.zine-popup-panel__float-close:hover { background: rgba(244, 63, 94, 0.88); color: #fff; }
.zine-popup-panel__float-close.hidden { display: none !important; }
.zine-popup-overlay--minimal .zine-popup-body { background: transparent; }
.zine-popup-foot__btn { min-width: 120px; padding: 0.55rem 1.25rem; border: none; border-radius: var(--vz-radius-sm, 10px); font-weight: 600; color: #fff; cursor: pointer; background: var(--vz-gradient, linear-gradient(135deg, #1565c0, #0d47a1)); transition: background 0.2s; }
.zine-popup-foot__btn:hover { background: var(--vz-gradient-accent, linear-gradient(135deg, #ff7043, #e64a19)); }
.zine-slide-player { box-sizing: border-box; width: 100%; height: 100%; position: relative; overflow: hidden; }
.zine-slide-viewport { width: 100%; height: 100%; overflow: hidden; }
.zine-slide-track--horizontal { display: flex; height: 100%; transition: transform 0.5s ease; }
.zine-slide-track--horizontal > div { flex-shrink: 0; height: 100%; background-size: cover; background-position: center; }
.zine-slide-track--fade { position: relative; width: 100%; height: 100%; }
.zine-slide-fade-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; }
.zine-slide-fade-img.is-active { opacity: 1; }
.zine-slide-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 12; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(15,23,42,0.65); color: #fff; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zine-slide-prev { left: 6px; }
.zine-slide-next { right: 6px; }
.zine-slide-dots { position: absolute; bottom: 6px; left: 0; right: 0; z-index: 12; display: flex; justify-content: center; gap: 5px; }
.zine-slide-dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: rgba(255,255,255,0.35); cursor: pointer; }
.zine-slide-dot.is-active { background: #22d3ee; }
.swiper-slide { height: auto; margin: 0; padding: 0; }
.vz-swiper .swiper-slide,
.vz-swiper-slide { display: block; margin: 0; padding: 0; height: auto !important; width: 100%; }
.vz-swiper { width: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; touch-action: pan-y pinch-zoom; background: var(--vz-stage-bg, #0f1117); }
#vz-page-swiper.swiper { overflow: hidden; margin: 0; padding: 0; }
#vz-page-swiper .swiper-wrapper { align-items: flex-start; margin: 0; padding: 0; }
#vz-viewer-root.vz-viewer-wrap--wide-stage { overflow-x: hidden; }
/* 2026-05-22: 푸터 — 메인 아래 문서 흐름(비 fixed), 0.5px 구분선 */
#vz-viewer-root.vz-viewer-wrap--wide-stage .vz-foot { position: static; width: 100%; max-width: none; margin: 0; padding-top: var(--vz-foot-pad-top, 20px); padding-left: 0; padding-right: 0; border-top: 0.5px solid var(--vz-main-foot-divider, rgba(44, 44, 44, 0.2)); flex-shrink: 0; }
#vz-viewer-root.vz-viewer-wrap--wide-stage .vz-foot-html,
#vz-viewer-root.vz-viewer-wrap--wide-stage .vz-foot > p { max-width: var(--vz-canvas-w); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
#vz-page-swiper .swiper-pagination,
#vz-viewer-root .swiper-pagination { display: none !important; }
#vz-viewer-root .vz-preview-notice,
.vz-card-viewer .vz-preview-notice { width: 100%; box-sizing: border-box; }
#vz-viewer-root .vz-page-indicator { font-size: 0.72rem; color: var(--vz-page-indicator, rgba(30, 41, 59, 0.65)); font-variant-numeric: tabular-nums; letter-spacing: 0.03em; }
/* ========== viewer-stage.css — map_layer.js ========== */
.vz-canvas-render .zine-map-layer,
.vz-canvas-render .zine-map-layer-host { display: block; box-sizing: border-box; overflow: hidden; }
.vz-canvas-render .zine-map-root { width: 100%; height: 100%; min-height: 0; box-sizing: border-box; }
.vz-canvas-render .zine-map-root > div { width: 100% !important; height: 100% !important; }
.vz-canvas-render .zine-map-iframe { display: block; width: 100%; height: 100%; border: 0; }
/* ========== viewer-stage.css — map_layer.js end ========== */
/* ========== viewer-stage.css — scroll_guide ========== */
.vz-scroll-guide { position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
.vz-scroll-guide.hidden { display: none !important; }
.vz-scroll-guide.is-visible { opacity: 1; pointer-events: auto; }
.vz-scroll-guide__badge { display: flex; align-items: center; justify-content: center; width: 56px; height: 112px; border-radius: 10px; background: rgba(43, 48, 57, 0.54); color: #f7f8fb; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vz-scroll-guide__icon { width: 56px; height: 112px; display: block; opacity: 0.9; animation: vz-scroll-guide-fade 1.2s ease-in-out infinite; }
.vz-scroll-guide__icon rect,
.vz-scroll-guide__icon path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes vz-scroll-guide-fade { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vz-scroll-guide__icon { animation: none; }
}
/* ========== viewer-stage.css — scroll_guide end ========== */
/* ========== viewer-stage.css end ========== */