/* ========== viewer-theme.css — Light / Sky / Dark 테마 (2026-05-27) ========== */
/* Light: editorial warm · #1a56a8 | Sky: #E6F3FA · #3399CC | Dark: soft #1c1c1c · premium muted */

:root,
html[data-vz-theme="light"] {
  --vz-white: #ffffff;
  --vz-gray-light: #f8f7f4;
  --vz-charcoal: #1c1917;
  --vz-primary: #1a56a8;
  --vz-primary-soft: #2563eb;
  --vz-primary-dark: #0f3d75;
  --vz-accent: #e85d3a;
  --vz-accent-green: #2d9a6f;
  --vz-accent-soft: rgba(232, 93, 58, 0.1);
  --vz-accent-green-soft: rgba(45, 154, 111, 0.12);
  --vz-header-bg: rgba(255, 255, 255, 0.88);
  --vz-header-gradient: linear-gradient(180deg, #ffffff 0%, #faf9f7 55%, #f3f1ec 100%);
  --vz-header-fg: #1c1917;
  --vz-header-fg-muted: #57534e;
  --vz-header-border: rgba(28, 25, 23, 0.07);
  --vz-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 32px rgba(28, 25, 23, 0.06);
  --vz-btn-bg: rgba(255, 112, 67, 0.08);
  --vz-btn-border: rgba(255, 112, 67, 0.18);
  --vz-btn-fg: #212121;
  --vz-btn-hover-bg: rgba(255, 112, 67, 0.14);
  --vz-btn-hover-fg: #ff7043;
  --vz-brand-fg: #1c1917;
  --vz-brand-accent: #1a56a8;
  --vz-bg: #f5f4f1;
  --vz-bg-subtle: #ebeae6;
  --vz-home-main-bg: #f5f4f1;
  --vz-card: #ffffff;
  --vz-ink: #1c1917;
  --vz-ink-muted: #57534e;
  --vz-muted: #a8a29e;
  --vz-border: rgba(28, 25, 23, 0.08);
  --vz-card-title-fg: #1c1917;
  --vz-card-meta-fg: #78716c;
  --vz-card-meta-icon: #2d9a6f;
  --vz-card-news-bg: linear-gradient(165deg, #ffffff 0%, #fff9f6 48%, #fff5f0 100%);
  --vz-card-empty-thumb-bg: linear-gradient(145deg, #f5f4f1 0%, #ebe8e3 42%, #f8f7f4 100%);
  --vz-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04), 0 4px 14px rgba(28, 25, 23, 0.05);
  --vz-shadow-md: 0 6px 20px rgba(28, 25, 23, 0.07), 0 16px 40px rgba(26, 86, 168, 0.06);
  --vz-shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.09), 0 28px 56px rgba(28, 25, 23, 0.08);
  --vz-gradient: linear-gradient(135deg, #2563eb 0%, #1a56a8 52%, #0f3d75 100%);
  --vz-gradient-accent: linear-gradient(135deg, #f97316 0%, #e85d3a 100%);
  --vz-accent-glow: rgba(26, 86, 168, 0.16);
  --vz-card-shadow: var(--vz-shadow-sm);
  --vz-card-shadow-hover: 0 14px 36px rgba(28, 25, 23, 0.1), 0 0 0 1px rgba(26, 86, 168, 0.08);
  --vz-cat-bg: #ffffff;
  --vz-cat-fg: #212121;
  --vz-cat-head: #9e9e9e;
  --vz-cat-border: rgba(33, 33, 33, 0.08);
  --vz-cat-item-hover: rgba(21, 101, 192, 0.06);
  --vz-cat-active-bg: rgba(21, 101, 192, 0.1);
  --vz-cat-active-accent: rgba(255, 112, 67, 0.35);
  --vz-stage-chrome: #fafafa;
  --vz-stage-bg: #eeeeee;
  --vz-viewer-head-shadow: 0 2px 12px rgba(0, 0, 0, 0.07), 0 1px 0 rgba(0, 0, 0, 0.04);
  --vz-viewer-main-divider: rgba(33, 33, 33, 0.1);
  --vz-viewer-head-bar-divider: rgba(33, 33, 33, 0.1);
  --vz-main-foot-divider: rgba(33, 33, 33, 0.12);
  --vz-viewer-wrap-bg: #fafafa;
  --vz-foot-bg: #ffffff;
  --vz-foot-fg: #616161;
  --vz-foot-border: rgba(33, 33, 33, 0.08);
  --vz-foot-pad-top: 10px;
  --vz-overlay: rgba(33, 33, 33, 0.35);
  --vz-share-panel-bg: #ffffff;
  --vz-share-panel-fg: #212121;
  --vz-share-panel-border: rgba(33, 33, 33, 0.08);
  --vz-share-btn-bg: #fafafa;
  --vz-share-input-bg: #fafafa;
  --vz-banner-link: #1565c0;
  --vz-preview-notice-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  --vz-preview-notice-border: rgba(15, 23, 42, 0.1);
  --vz-preview-notice-title: #0f172a;
  --vz-preview-notice-desc: #475569;
  --vz-preview-notice-icon-bg: rgba(21, 101, 192, 0.12);
  --vz-preview-notice-icon-fg: #1565c0;
  --vz-preview-notice-cta-bg: linear-gradient(135deg, #1565c0, #0d47a1);
  --vz-preview-notice-cta-fg: #ffffff;
  --vz-preview-notice-cta-shadow: rgba(21, 101, 192, 0.28);
  --vz-preview-warn-bg: #fff7ed;
  --vz-preview-warn-border: rgba(234, 88, 12, 0.22);
  --vz-preview-warn-title: #9a3412;
  --vz-preview-warn-desc: #b45309;
  --vz-preview-warn-icon-bg: rgba(234, 88, 12, 0.14);
  --vz-preview-warn-icon-fg: #c2410c;
  --vz-page-indicator: rgba(33, 33, 33, 0.65);
  --vz-theme-toggle-bg: #fafafa;
  --vz-sidebar-bg: #ffffff;
  --vz-sidebar-head-bg: #fafafa;
  --vz-sidebar-fg: #212121;
  --vz-sidebar-fg-muted: #616161;
  --vz-sidebar-border: rgba(33, 33, 33, 0.08);
  --vz-sidebar-scroll-thumb: rgba(21, 101, 192, 0.25);
  --vz-sidebar-head-gradient: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --vz-sidebar-close-bg: rgba(21, 101, 192, 0.08);
  --vz-sidebar-close-fg: #1565c0;
  --vz-sidebar-close-border: rgba(21, 101, 192, 0.2);
  --vz-sidebar-close-hover-bg: #1565c0;
  --vz-sidebar-close-hover-fg: #ffffff;
  --vz-sidebar-title-accent: #1565c0;
  --vz-thumb-bg: #fafafa;
  --vz-thumb-empty-bg: #f0f0f0;
  --vz-thumb-border: rgba(33, 33, 33, 0.08);
  --vz-thumb-hover-border: rgba(21, 101, 192, 0.35);
  --vz-thumb-shadow: 0 3px 12px rgba(33, 33, 33, 0.12), 0 1px 4px rgba(33, 33, 33, 0.08);
  --vz-thumb-shadow-hover: 0 6px 18px rgba(33, 33, 33, 0.16), 0 2px 8px rgba(21, 101, 192, 0.12);
  --vz-thumb-shadow-active: 0 4px 16px rgba(21, 101, 192, 0.22), 0 0 0 3px var(--vz-accent-glow);
  --vz-card-thumb-shadow: 0 4px 14px rgba(33, 33, 33, 0.1), 0 2px 6px rgba(33, 33, 33, 0.06);
  --vz-card-thumb-shadow-hover: 0 8px 22px rgba(33, 33, 33, 0.14), 0 4px 10px rgba(255, 112, 67, 0.1);
  --vz-popup-head-bg: var(--vz-header-bg);
  --vz-popup-head-fg: var(--vz-header-fg);
  --vz-popup-head-border: var(--vz-header-border);
  --vz-popup-head-shine: rgba(255, 112, 67, 0.06);
  --vz-search-form-bg: rgba(255, 255, 255, 0.98);
  --vz-search-form-border: rgba(28, 25, 23, 0.08);
  --vz-search-form-shadow: 0 12px 40px rgba(28, 25, 23, 0.08), 0 2px 8px rgba(26, 86, 168, 0.06);
  --vz-search-form-focus-border: rgba(26, 86, 168, 0.35);
  --vz-search-form-focus-shadow: 0 0 0 4px rgba(26, 86, 168, 0.12), 0 14px 40px rgba(28, 25, 23, 0.08);
  --vz-search-field-bg: rgba(245, 244, 241, 0.9);
  --vz-search-field-hover-bg: rgba(26, 86, 168, 0.06);
  --vz-search-field-fg: var(--vz-ink);
  --vz-search-field-icon: #a8a29e;
  --vz-search-focus-icon: var(--vz-primary);
  --vz-search-placeholder: #a8a29e;
  --vz-search-submit-bg: var(--vz-gradient);
  --vz-search-submit-shadow: 0 4px 18px rgba(26, 86, 168, 0.28);
  --vz-search-submit-hover-shadow: 0 8px 28px rgba(26, 86, 168, 0.34);
  --vz-card-thumb-shadow: 0 4px 16px rgba(28, 25, 23, 0.08);
  --vz-card-thumb-shadow-hover: 0 12px 28px rgba(28, 25, 23, 0.12), 0 4px 12px rgba(26, 86, 168, 0.08);
  color-scheme: light;
}

/* Dark — 소프트 다크·프리미엄 (2026-05-27: 과도한 블랙 제거, 대비 유지) */
html[data-vz-theme="dark"] {
  --vz-primary: #5b9fd9;
  --vz-primary-soft: #7eb3e3;
  --vz-primary-dark: #3d7ab5;
  --vz-accent: #e89578;
  --vz-accent-green: #5cb8a8;
  --vz-accent-soft: rgba(232, 149, 120, 0.12);
  --vz-accent-green-soft: rgba(92, 184, 168, 0.12);
  --vz-header-bg: #262626;
  --vz-header-gradient: linear-gradient(180deg, #303030 0%, #262626 58%, #222222 100%);
  --vz-header-fg: #f5f5f5;
  --vz-header-fg-muted: rgba(245, 245, 245, 0.65);
  --vz-header-border: rgba(255, 255, 255, 0.08);
  --vz-header-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.22);
  --vz-btn-bg: rgba(255, 255, 255, 0.08);
  --vz-btn-border: rgba(255, 255, 255, 0.12);
  --vz-btn-fg: #ececec;
  --vz-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --vz-btn-hover-fg: #ffffff;
  --vz-brand-fg: #f5f5f5;
  --vz-brand-accent: #7eb3e3;
  --vz-bg: #1c1c1c;
  --vz-bg-subtle: #242424;
  --vz-home-main-bg: #202020;
  --vz-card: #2a2a2a;
  --vz-card-surface: #2e2e2e;
  --vz-ink: #ececec;
  --vz-ink-muted: rgba(236, 236, 236, 0.72);
  --vz-muted: rgba(236, 236, 236, 0.5);
  --vz-border: rgba(255, 255, 255, 0.09);
  --vz-charcoal: #ececec;
  --vz-card-title-fg: #f5f5f5;
  --vz-card-meta-fg: rgba(236, 236, 236, 0.62);
  --vz-card-meta-icon: #5cb8a8;
  --vz-card-body-bg: #2e2e2e;
  --vz-card-news-bg: #2e2e2e;
  --vz-card-news-body-bg: #323232;
  --vz-card-thumb-fade: linear-gradient(180deg, transparent 48%, rgba(28, 28, 28, 0.45) 78%, #2e2e2e 100%);
  --vz-card-badge-fg: #b8d4f0;
  --vz-card-badge-bg: rgba(91, 159, 217, 0.14);
  --vz-card-badge-border: rgba(91, 159, 217, 0.2);
  --vz-card-badge-accent-fg: #f0c9b8;
  --vz-card-badge-accent-bg: rgba(232, 149, 120, 0.12);
  --vz-card-badge-accent-border: rgba(232, 149, 120, 0.22);
  --vz-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.28);
  --vz-card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 24px rgba(0, 0, 0, 0.32);
  --vz-card-empty-thumb-bg: linear-gradient(160deg, #242424 0%, #323232 50%, #242424 100%);
  --vz-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.16);
  --vz-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.24), 0 14px 32px rgba(0, 0, 0, 0.18);
  --vz-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.28), 0 24px 48px rgba(0, 0, 0, 0.22);
  --vz-gradient: linear-gradient(135deg, #5b9fd9 0%, #3d7ab5 100%);
  --vz-gradient-accent: linear-gradient(135deg, #e89578 0%, #c96a4a 100%);
  --vz-accent-glow: rgba(91, 159, 217, 0.12);
  --vz-cat-bg: #2a2a2a;
  --vz-cat-fg: rgba(245, 245, 245, 0.94);
  --vz-cat-head: rgba(245, 245, 245, 0.5);
  --vz-cat-border: rgba(255, 255, 255, 0.08);
  --vz-cat-item-hover: rgba(255, 255, 255, 0.08);
  --vz-cat-active-bg: rgba(91, 159, 217, 0.16);
  --vz-cat-active-accent: rgba(232, 149, 120, 0.35);
  --vz-stage-chrome: #222222;
  --vz-stage-bg: #181818;
  --vz-viewer-head-shadow: 0 4px 18px rgba(0, 0, 0, 0.26), 0 1px 0 rgba(255, 255, 255, 0.05);
  --vz-viewer-main-divider: rgba(255, 255, 255, 0.08);
  --vz-viewer-head-bar-divider: rgba(255, 255, 255, 0.08);
  --vz-main-foot-divider: rgba(255, 255, 255, 0.08);
  --vz-viewer-wrap-bg: #1c1c1c;
  --vz-foot-bg: #222222;
  --vz-foot-fg: rgba(236, 236, 236, 0.76);
  --vz-foot-border: rgba(255, 255, 255, 0.08);
  --vz-foot-pad-top: 10px;
  --vz-overlay: rgba(0, 0, 0, 0.48);
  --vz-share-panel-bg: #2a2a2a;
  --vz-share-panel-fg: #f5f5f5;
  --vz-share-panel-border: rgba(255, 255, 255, 0.09);
  --vz-share-btn-bg: rgba(255, 255, 255, 0.06);
  --vz-share-input-bg: rgba(0, 0, 0, 0.18);
  --vz-banner-link: #7eb3e3;
  --vz-preview-notice-bg: linear-gradient(180deg, #2a3038 0%, #24282e 100%);
  --vz-preview-notice-border: rgba(255, 255, 255, 0.09);
  --vz-preview-notice-title: #f1f5f9;
  --vz-preview-notice-desc: #c8d0da;
  --vz-preview-notice-icon-bg: rgba(91, 159, 217, 0.16);
  --vz-preview-notice-icon-fg: #9ec5eb;
  --vz-preview-notice-cta-bg: linear-gradient(135deg, #5b9fd9, #3d7ab5);
  --vz-preview-notice-cta-fg: #ffffff;
  --vz-preview-notice-cta-shadow: rgba(0, 0, 0, 0.28);
  --vz-preview-warn-bg: linear-gradient(180deg, #322a22 0%, #2c241c 100%);
  --vz-preview-warn-border: rgba(232, 149, 120, 0.24);
  --vz-preview-warn-title: #f5d4c4;
  --vz-preview-warn-desc: #d4a894;
  --vz-preview-warn-icon-bg: rgba(232, 149, 120, 0.16);
  --vz-preview-warn-icon-fg: #e89578;
  --vz-page-indicator: rgba(236, 236, 236, 0.76);
  --vz-theme-toggle-bg: rgba(255, 255, 255, 0.08);
  --vz-sidebar-bg: #242424;
  --vz-sidebar-head-bg: #202020;
  --vz-sidebar-fg: rgba(245, 245, 245, 0.94);
  --vz-sidebar-fg-muted: rgba(245, 245, 245, 0.55);
  --vz-sidebar-border: rgba(255, 255, 255, 0.08);
  --vz-sidebar-scroll-thumb: rgba(255, 255, 255, 0.22);
  --vz-sidebar-head-gradient: linear-gradient(180deg, #2e2e2e 0%, #242424 100%);
  --vz-sidebar-close-bg: rgba(255, 255, 255, 0.08);
  --vz-sidebar-close-fg: #ececec;
  --vz-sidebar-close-border: rgba(255, 255, 255, 0.12);
  --vz-sidebar-close-hover-bg: rgba(255, 255, 255, 0.14);
  --vz-sidebar-close-hover-fg: #ffffff;
  --vz-sidebar-title-accent: #7eb3e3;
  --vz-thumb-bg: #202020;
  --vz-thumb-empty-bg: #2e2e2e;
  --vz-thumb-border: rgba(255, 255, 255, 0.07);
  --vz-thumb-hover-border: rgba(255, 255, 255, 0.14);
  --vz-thumb-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  --vz-thumb-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.48);
  --vz-thumb-shadow-active: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(91, 159, 217, 0.35);
  --vz-card-thumb-shadow: 0 4px 14px rgba(0, 0, 0, 0.38);
  --vz-card-thumb-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.44);
  --vz-popup-head-bg: var(--vz-header-bg);
  --vz-popup-head-fg: var(--vz-header-fg);
  --vz-popup-head-border: var(--vz-header-border);
  --vz-popup-head-shine: rgba(255, 255, 255, 0.04);
  --vz-search-form-bg: rgba(42, 42, 42, 0.98);
  --vz-search-form-border: rgba(255, 255, 255, 0.07);
  --vz-search-form-shadow: 0 12px 36px rgba(0, 0, 0, 0.42);
  --vz-search-form-focus-border: rgba(91, 159, 217, 0.38);
  --vz-search-form-focus-shadow: 0 0 0 3px rgba(91, 159, 217, 0.12), 0 12px 32px rgba(0, 0, 0, 0.4);
  --vz-search-field-bg: rgba(255, 255, 255, 0.05);
  --vz-search-field-hover-bg: rgba(255, 255, 255, 0.08);
  --vz-search-field-fg: var(--vz-ink);
  --vz-search-field-icon: rgba(236, 236, 236, 0.42);
  --vz-search-focus-icon: var(--vz-primary-soft);
  --vz-search-placeholder: rgba(236, 236, 236, 0.4);
  --vz-search-submit-bg: var(--vz-gradient);
  --vz-search-submit-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
  --vz-search-submit-hover-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

/* Sky — 세련 블루 리뉴얼 (2026-05-27) */
html[data-vz-theme="sky"] {
  --vz-primary: #2a7ba3;
  --vz-primary-soft: #3d92b8;
  --vz-primary-dark: #1e5f7f;
  --vz-accent: #e86f45;
  --vz-accent-green: #3da896;
  --vz-accent-soft: rgba(232, 111, 69, 0.12);
  --vz-accent-green-soft: rgba(61, 168, 150, 0.14);
  --vz-header-bg: #2a7ba3;
  --vz-header-gradient: linear-gradient(135deg, #4a9ec4 0%, #2a7ba3 42%, #1e5f7f 100%);
  --vz-header-fg: #ffffff;
  --vz-header-fg-muted: rgba(255, 255, 255, 0.82);
  --vz-header-border: rgba(255, 255, 255, 0.22);
  --vz-header-shadow: 0 2px 16px rgba(30, 80, 110, 0.32), 0 1px 0 rgba(255, 255, 255, 0.14);
  --vz-btn-bg: rgba(255, 255, 255, 0.16);
  --vz-btn-border: rgba(255, 255, 255, 0.28);
  --vz-btn-fg: #ffffff;
  --vz-btn-hover-bg: rgba(255, 255, 255, 0.24);
  --vz-btn-hover-fg: #ffffff;
  --vz-brand-fg: #ffffff;
  --vz-brand-accent: #e8f4fc;
  --vz-bg: #e0f2f7;
  --vz-bg-subtle: #cce8f2;
  --vz-home-main-bg: #e0f2f7;
  --vz-card: #ffffff;
  --vz-ink: #1e3d4f;
  --vz-ink-muted: #4d6d7f;
  --vz-muted: #6a8a9c;
  --vz-border: rgba(42, 123, 163, 0.18);
  --vz-charcoal: #1e3d4f;
  --vz-card-title-fg: #164a62;
  --vz-card-meta-fg: #4d6d7f;
  --vz-card-meta-icon: #3da896;
  --vz-card-news-bg: linear-gradient(180deg, #ffffff 0%, #f2f9fc 52%, rgba(42, 123, 163, 0.06) 100%);
  --vz-card-empty-thumb-bg: linear-gradient(160deg, #e0f2f7 0%, #cce8f2 48%, #e0f2f7 100%);
  --vz-card-shadow: 0 1px 2px rgba(30, 80, 110, 0.06), 0 6px 18px rgba(42, 123, 163, 0.12);
  --vz-card-shadow-hover: 0 14px 32px rgba(30, 80, 110, 0.14), 0 0 0 1px rgba(42, 123, 163, 0.14);
  --vz-shadow-sm: 0 1px 3px rgba(30, 80, 110, 0.08), 0 4px 12px rgba(42, 123, 163, 0.1);
  --vz-shadow-md: 0 6px 18px rgba(30, 80, 110, 0.12), 0 14px 32px rgba(42, 123, 163, 0.12);
  --vz-shadow-lg: 0 10px 28px rgba(30, 80, 110, 0.16), 0 24px 48px rgba(42, 123, 163, 0.14);
  --vz-gradient: linear-gradient(135deg, #3d92b8 0%, #2a7ba3 52%, #1e5f7f 100%);
  --vz-gradient-accent: linear-gradient(135deg, #e86f45 0%, #c95a32 100%);
  --vz-accent-glow: rgba(42, 123, 163, 0.18);
  --vz-cat-bg: #ffffff;
  --vz-cat-fg: #1e3d4f;
  --vz-cat-head: #6a8a9c;
  --vz-cat-border: rgba(42, 123, 163, 0.14);
  --vz-cat-item-hover: rgba(42, 123, 163, 0.1);
  --vz-cat-active-bg: rgba(42, 123, 163, 0.12);
  --vz-cat-active-accent: rgba(232, 111, 69, 0.38);
  --vz-stage-chrome: #d4eaf5;
  --vz-stage-bg: #b5d9ea;
  --vz-viewer-head-shadow: 0 4px 20px rgba(30, 80, 110, 0.28), 0 1px 0 rgba(255, 255, 255, 0.12);
  --vz-viewer-main-divider: rgba(42, 123, 163, 0.22);
  --vz-viewer-head-bar-divider: rgba(255, 255, 255, 0.24);
  --vz-main-foot-divider: rgba(42, 123, 163, 0.16);
  --vz-viewer-wrap-bg: #e0f2f7;
  --vz-foot-bg: #f0f8fc;
  --vz-foot-fg: #4d6d7f;
  --vz-foot-border: rgba(42, 123, 163, 0.14);
  --vz-foot-pad-top: 10px;
  --vz-overlay: rgba(22, 74, 98, 0.38);
  --vz-share-panel-bg: #ffffff;
  --vz-share-panel-fg: #1e3d4f;
  --vz-share-panel-border: rgba(42, 123, 163, 0.16);
  --vz-share-btn-bg: #e8f4fc;
  --vz-share-input-bg: #e8f4fc;
  --vz-banner-link: #1a6b8f;
  --vz-preview-notice-bg: #ffffff;
  --vz-preview-notice-border: rgba(26, 95, 122, 0.2);
  --vz-preview-notice-title: #0c3d52;
  --vz-preview-notice-desc: #2a5f75;
  --vz-preview-notice-icon-bg: rgba(51, 153, 204, 0.16);
  --vz-preview-notice-icon-fg: #1a6b8f;
  --vz-preview-notice-cta-bg: linear-gradient(135deg, #2b8fc4, #1a6b8f);
  --vz-preview-notice-cta-fg: #ffffff;
  --vz-preview-notice-cta-shadow: rgba(26, 95, 122, 0.32);
  --vz-preview-warn-bg: #fff8f1;
  --vz-preview-warn-border: rgba(234, 88, 12, 0.24);
  --vz-preview-warn-title: #9a3412;
  --vz-preview-warn-desc: #b45309;
  --vz-preview-warn-icon-bg: rgba(234, 88, 12, 0.12);
  --vz-preview-warn-icon-fg: #c2410c;
  --vz-page-indicator: rgba(42, 74, 94, 0.65);
  --vz-theme-toggle-bg: rgba(255, 255, 255, 0.16);
  --vz-sidebar-bg: #ffffff;
  --vz-sidebar-head-bg: #e8f4fc;
  --vz-sidebar-fg: #1e3d4f;
  --vz-sidebar-fg-muted: #4d6d7f;
  --vz-sidebar-border: rgba(42, 123, 163, 0.14);
  --vz-sidebar-scroll-thumb: rgba(42, 123, 163, 0.28);
  --vz-sidebar-head-gradient: linear-gradient(180deg, #f4fafd 0%, #e8f4fc 100%);
  --vz-sidebar-close-bg: rgba(42, 123, 163, 0.12);
  --vz-sidebar-close-fg: #2a7ba3;
  --vz-sidebar-close-border: rgba(42, 123, 163, 0.28);
  --vz-sidebar-close-hover-bg: #2a7ba3;
  --vz-sidebar-close-hover-fg: #ffffff;
  --vz-sidebar-title-accent: #1a6b8f;
  --vz-thumb-bg: #ffffff;
  --vz-thumb-empty-bg: #cce8f2;
  --vz-thumb-border: rgba(42, 123, 163, 0.14);
  --vz-thumb-hover-border: rgba(42, 123, 163, 0.42);
  --vz-thumb-shadow: 0 4px 14px rgba(30, 80, 110, 0.14), 0 1px 4px rgba(42, 123, 163, 0.1);
  --vz-thumb-shadow-hover: 0 8px 20px rgba(30, 80, 110, 0.18), 0 2px 8px rgba(42, 123, 163, 0.12);
  --vz-thumb-shadow-active: 0 6px 18px rgba(42, 123, 163, 0.22), 0 0 0 3px rgba(42, 123, 163, 0.2);
  --vz-card-thumb-shadow: 0 4px 16px rgba(30, 80, 110, 0.12), 0 2px 8px rgba(42, 123, 163, 0.1);
  --vz-card-thumb-shadow-hover: 0 12px 28px rgba(30, 80, 110, 0.16), 0 4px 12px rgba(42, 123, 163, 0.12);
  --vz-popup-head-bg: var(--vz-header-bg);
  --vz-popup-head-fg: var(--vz-header-fg);
  --vz-popup-head-border: var(--vz-header-border);
  --vz-popup-head-shine: rgba(255, 255, 255, 0.12);
  --vz-search-form-bg: rgba(255, 255, 255, 0.95);
  --vz-search-form-border: rgba(42, 123, 163, 0.2);
  --vz-search-form-shadow: 0 12px 36px rgba(30, 80, 110, 0.14), 0 2px 8px rgba(42, 123, 163, 0.1);
  --vz-search-form-focus-border: rgba(42, 123, 163, 0.45);
  --vz-search-form-focus-shadow: 0 0 0 4px rgba(42, 123, 163, 0.14), 0 12px 32px rgba(30, 80, 110, 0.16);
  --vz-search-field-bg: rgba(224, 242, 247, 0.85);
  --vz-search-field-hover-bg: rgba(42, 123, 163, 0.1);
  --vz-search-field-fg: var(--vz-ink);
  --vz-search-field-icon: #7a9aad;
  --vz-search-focus-icon: var(--vz-primary);
  --vz-search-placeholder: #7a9aad;
  --vz-search-submit-bg: var(--vz-gradient);
  --vz-search-submit-shadow: 0 4px 16px rgba(30, 80, 110, 0.28);
  --vz-search-submit-hover-shadow: 0 8px 24px rgba(30, 80, 110, 0.34);
  color-scheme: light;
}

/* Dark — 헤더·검색 (글로우 없는 차분 그라데이션) */
html[data-vz-theme="dark"] .vz-home-header,
html[data-vz-theme="dark"] .vz-search-zone { background-color: var(--vz-header-bg); background-image: var(--vz-header-gradient); background-repeat: no-repeat; background-size: cover; }
html[data-vz-theme="dark"] .vz-topbar .brand span { color: var(--vz-brand-accent); opacity: 1; }
html[data-vz-theme="dark"] .vz-theme-toggle .vz-theme-icon-dark { color: #ececec; }
html[data-vz-theme="dark"] .vz-cat-toggle.is-active { color: #f5f5f5; background: var(--vz-cat-active-bg); }

/* Light — 헤더 그라데이션 (밝은 웜톤, Sky 블루와 구분) */
html[data-vz-theme="light"] .vz-home-header,
html[data-vz-theme="light"] .vz-search-zone { background-color: var(--vz-header-bg); background-image: var(--vz-header-gradient); background-repeat: no-repeat; background-size: cover; }
html[data-vz-theme="light"] .vz-home-topbar { border-bottom-color: var(--vz-header-border); }
html[data-vz-theme="light"] .vz-topbar .brand span { color: var(--vz-brand-accent); opacity: 1; }
html[data-vz-theme="light"] .vz-theme-toggle .vz-theme-icon-light { color: var(--vz-accent); }
html[data-vz-theme="light"] .vz-cat-toggle.is-active { color: var(--vz-accent); background: var(--vz-cat-active-bg); }

/* Sky — 헤더 그라데이션 (홈 검색영역·토글 아이콘) */
html[data-vz-theme="sky"] .vz-home-header,
html[data-vz-theme="sky"] .vz-search-zone { background-color: var(--vz-header-bg); background-image: var(--vz-header-gradient); background-repeat: no-repeat; background-size: cover; }
html[data-vz-theme="sky"] .vz-home-topbar { border-bottom-color: var(--vz-header-border); }
html[data-vz-theme="sky"] .vz-topbar .brand span { color: #ffffff; opacity: 0.95; }
html[data-vz-theme="sky"] .vz-theme-toggle .vz-theme-icon-sky { color: #ffffff; }
html[data-vz-theme="sky"] .vz-theme-toggle:hover .vz-theme-icon-sky { color: #ffffff; }
html[data-vz-theme="sky"] .vz-theme-toggle:hover { background: rgba(255, 255, 255, 0.22); color: #ffffff; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12); }
html[data-vz-theme="sky"] .vz-cat-toggle.is-active { color: #ffffff; background: rgba(255, 255, 255, 0.2); }
html[data-vz-theme="sky"] .vz-user-name,
html[data-vz-theme="sky"] .vz-user-icon { color: #ffffff; }
html[data-vz-theme="sky"] .vz-user-id { color: rgba(255, 255, 255, 0.78); }
html[data-vz-theme="sky"] .vz-cat-item.is-active { color: var(--vz-ink); border-left-color: var(--vz-accent); }

body.vz-body { background: var(--vz-bg); color: var(--vz-ink); }

/* 헤더·푸터 */
.vz-topbar,
.vz-home-header,
.vz-viewer-head,
.vz-card-viewer-head,
#vz-viewer-root .vz-viewer-head { background-color: var(--vz-header-bg); background-image: var(--vz-header-gradient); background-repeat: no-repeat; background-size: cover; color: var(--vz-header-fg); }
.vz-viewer-head.vz-viewer-head--webzine-brand,
.vz-card-viewer-head.vz-viewer-head--webzine-brand,
#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-home-header { box-shadow: var(--vz-header-shadow); }
.vz-home-topbar,
.vz-viewer-head { border-bottom: 1px solid var(--vz-header-border); }
#vz-viewer-root .vz-viewer-head,
#vz-card-viewer .vz-card-viewer-head { box-shadow: var(--vz-viewer-head-shadow, var(--vz-header-shadow)); border-bottom-color: var(--vz-viewer-main-divider, var(--vz-header-border)); }
.vz-topbar .brand,
.vz-card-back { color: var(--vz-brand-fg); }
.vz-topbar .brand span { color: var(--vz-brand-accent, var(--vz-primary)); font-weight: 800; }
.vz-viewer-head-title { color: var(--vz-header-fg); opacity: 0.92; }
.vz-viewer-head .vz-head-back,
.vz-card-back { color: var(--vz-header-fg); }
.vz-viewer-head button,
.vz-card-viewer-head button { background: var(--vz-btn-bg); color: var(--vz-btn-fg); border: 1px solid var(--vz-btn-border); }
.vz-viewer-head button:hover,
.vz-card-viewer-head button:hover { background: var(--vz-btn-hover-bg); color: var(--vz-btn-hover-fg); }
.vz-viewer-head .vz-head-back:hover,
.vz-card-back:hover { background: var(--vz-btn-hover-bg); color: var(--vz-btn-hover-fg); }
.vz-top-btn { color: var(--vz-btn-fg); background: var(--vz-btn-bg); border-color: var(--vz-btn-border); }
.vz-top-btn:hover { background: var(--vz-btn-hover-bg); color: var(--vz-btn-hover-fg); border-color: rgba(255, 138, 101, 0.28); }
.vz-cat-toggle.is-active { background: var(--vz-cat-active-bg); border-color: var(--vz-cat-active-accent); color: var(--vz-primary); }
html[data-vz-theme="dark"] .vz-cat-toggle.is-active { color: #fff; }
.vz-user-box { background: var(--vz-btn-bg); border-color: var(--vz-btn-border); }
.vz-user-box:hover { background: var(--vz-btn-hover-bg); border-color: rgba(255, 138, 101, 0.28); }
.vz-user-id { color: var(--vz-header-fg-muted); }
.vz-user-name,
.vz-user-icon,
.vz-card-viewer-title { color: var(--vz-header-fg); }
.vz-cat-panel { background: var(--vz-cat-bg); border-color: var(--vz-cat-border); box-shadow: var(--vz-shadow-lg); }
.vz-cat-panel-head { color: var(--vz-cat-head); border-bottom-color: var(--vz-cat-border); }
.vz-cat-item { color: var(--vz-cat-fg); }
.vz-cat-item:hover { background: var(--vz-cat-item-hover); color: var(--vz-accent); }
html[data-vz-theme="dark"] .vz-cat-item:hover { color: var(--vz-accent); }
.vz-cat-item.is-active { background: var(--vz-cat-active-bg); color: var(--vz-header-fg); font-weight: 600; border-left: 3px solid var(--vz-accent); }
html[data-vz-theme="dark"] .vz-cat-item.is-active { color: #fff; }
.vz-viewer-main,
.vz-page-swiper-host,
.vz-card-swiper,
#vz-page-swiper.swiper,
.vz-swiper { background: var(--vz-stage-chrome); }
.vz-viewer-wrap { background: var(--vz-viewer-wrap-bg); }
#vz-viewer-root.vz-viewer-wrap--wide-stage { background: var(--vz-viewer-wrap-bg); }
.vz-foot { position: static; background: var(--vz-foot-bg); color: var(--vz-foot-fg, var(--vz-ink-muted)); border-top: 0.5px solid var(--vz-main-foot-divider, var(--vz-foot-border, var(--vz-border))); }
#vz-viewer-root .vz-foot { border-top: 0.5px solid var(--vz-main-foot-divider, var(--vz-foot-border, var(--vz-border))); }
html[data-vz-theme="dark"] .vz-foot { color: var(--vz-foot-fg); }
.vz-banner-link { color: var(--vz-banner-link); }
.vz-banner-link:hover { color: var(--vz-accent); }
#vz-viewer-root .vz-page-indicator { color: var(--vz-page-indicator); }
.vz-sidebar { background: var(--vz-sidebar-bg); color: var(--vz-sidebar-fg); border-right-color: var(--vz-sidebar-border); }
.vz-sidebar-head { background: var(--vz-sidebar-head-gradient, var(--vz-sidebar-head-bg)); border-bottom-color: var(--vz-sidebar-border); }
.vz-sidebar-head-title { color: var(--vz-sidebar-title-accent, var(--vz-sidebar-fg)); font-weight: 800; }
.vz-sidebar-brand-icon { color: var(--vz-sidebar-icon-fg, var(--vz-primary)); }
.vz-sidebar-head-sub { color: var(--vz-sidebar-fg-muted); }
.vz-sidebar-close { background: var(--vz-sidebar-close-bg, var(--vz-btn-bg)); color: var(--vz-sidebar-close-fg, var(--vz-btn-fg)); border-color: var(--vz-sidebar-close-border, var(--vz-btn-border)); }
.vz-sidebar-close:hover { background: var(--vz-sidebar-close-hover-bg, var(--vz-btn-hover-bg)); color: var(--vz-sidebar-close-hover-fg, var(--vz-btn-hover-fg)); border-color: var(--vz-sidebar-close-hover-bg, var(--vz-sidebar-close-border)); }
.vz-thumb-item { background: var(--vz-thumb-bg); border-color: var(--vz-thumb-border); box-shadow: var(--vz-thumb-shadow); }
.vz-thumb-item:hover { border-color: var(--vz-thumb-hover-border); box-shadow: var(--vz-thumb-shadow-hover); }
.vz-thumb-item.is-active { border-color: var(--vz-primary); box-shadow: var(--vz-thumb-shadow-active); }
.vz-thumb-empty { color: var(--vz-sidebar-fg-muted); background: var(--vz-thumb-empty-bg); box-shadow: var(--vz-thumb-shadow); }
.vz-sidebar-backdrop { background: var(--vz-overlay); }
.vz-share-overlay { background: var(--vz-overlay); }
.vz-share-panel { background: var(--vz-share-panel-bg); color: var(--vz-share-panel-fg); border-color: var(--vz-share-panel-border); box-shadow: var(--vz-shadow-lg); }
.vz-share-btns a { color: var(--vz-share-panel-fg); background: var(--vz-share-btn-bg); border-color: var(--vz-share-panel-border); }
.vz-share-btns a:hover { background: var(--vz-accent); color: #fff; border-color: var(--vz-accent); }
.vz-share-url { background: var(--vz-share-input-bg); color: var(--vz-share-panel-fg); border-color: var(--vz-share-panel-border); }
.vz-share-close { color: var(--vz-share-panel-fg); background: var(--vz-share-btn-bg); }
.vz-share-close:hover { background: var(--vz-btn-hover-bg); color: var(--vz-btn-hover-fg); }
.vz-card-counter { background-color: var(--vz-header-bg); background-image: var(--vz-header-gradient); background-repeat: no-repeat; background-size: cover; color: var(--vz-header-fg-muted); border-top: 1px solid var(--vz-header-border); }

/* 2026-05-23: 이용자 뷰어 — 인터랙티브 팝업 헤더 */
#vz-viewer-root .zine-popup-top { flex-shrink: 0; background-color: var(--vz-popup-head-bg, var(--vz-header-bg)); background-image: var(--vz-header-gradient, linear-gradient(180deg, var(--vz-popup-head-shine, rgba(21, 101, 192, 0.08)) 0%, transparent 100%)); background-repeat: no-repeat; background-size: cover; border-bottom: 1px solid var(--vz-popup-head-border, var(--vz-header-border)); }
#vz-viewer-root .zine-popup-top__title { color: var(--vz-popup-head-fg, var(--vz-header-fg)); letter-spacing: -0.02em; font-weight: 600; }
#vz-viewer-root .zine-popup-top__close { display: inline-flex; align-items: center; justify-content: center; background: var(--vz-btn-bg); color: var(--vz-btn-fg); border: 1px solid var(--vz-btn-border); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
#vz-viewer-root .zine-popup-top__close:hover { background: var(--vz-btn-hover-bg); color: var(--vz-btn-hover-fg); border-color: var(--vz-btn-border); }

/* 테마 전환 버튼 */
.vz-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 40px; height: 40px; padding: 0; border: 1px solid var(--vz-btn-border); border-radius: 50%; background: var(--vz-theme-toggle-bg); color: var(--vz-btn-fg); cursor: pointer; font-family: inherit; transition: background 0.2s, transform 0.15s, border-color 0.2s, box-shadow 0.2s, color 0.2s; flex-shrink: 0; box-shadow: var(--vz-shadow-sm); }
.vz-theme-toggle:hover { background: var(--vz-btn-hover-bg); color: var(--vz-btn-hover-fg); transform: scale(1.04); box-shadow: 0 2px 12px rgba(255, 112, 67, 0.15); }
html[data-vz-theme="dark"] .vz-theme-toggle:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32); }
html[data-vz-theme="sky"] .vz-theme-toggle:hover { box-shadow: 0 2px 14px rgba(51, 153, 204, 0.24); }
.vz-theme-toggle i { line-height: 1; font-size: 1.05rem; }
.vz-theme-icon-svg { display: none; width: 20px; height: 20px; flex-shrink: 0; pointer-events: none; }
.vz-theme-toggle .vz-theme-icon-light,
.vz-theme-toggle .vz-theme-icon-dark,
.vz-theme-toggle .vz-theme-icon-sky { display: none; }
html[data-vz-theme="light"] .vz-theme-toggle .vz-theme-icon-light { display: inline-flex; }
html[data-vz-theme="sky"] .vz-theme-toggle .vz-theme-icon-sky { display: inline-flex; }
html[data-vz-theme="dark"] .vz-theme-toggle .vz-theme-icon-dark { display: inline-block; }
.vz-theme-toggle .vz-theme-icon-light { color: var(--vz-primary, #1565c0); }
.vz-theme-toggle .vz-theme-icon-sky { color: var(--vz-primary, #3399cc); }
.vz-theme-toggle .vz-theme-icon-dark { color: #ececec; }

/* 스테이지 네비 */
html[data-vz-theme="light"] .vz-page-nav,
html[data-vz-theme="sky"] .vz-page-nav { background: transparent; color: #212121; border: none; box-shadow: none; }
html[data-vz-theme="light"] .vz-page-nav:hover,
html[data-vz-theme="sky"] .vz-page-nav:hover { background: transparent; color: var(--vz-accent); border: none; box-shadow: none; }
html[data-vz-theme="sky"] .vz-page-nav { color: #2a4a5e; }
html[data-vz-theme="sky"] .vz-page-nav:hover { color: var(--vz-accent, #ff7043); }
html[data-vz-theme="dark"] .vz-page-nav { color: rgba(236, 236, 236, 0.78); }
html[data-vz-theme="dark"] .vz-page-nav:hover { color: var(--vz-accent, #e89578); }

html[data-vz-theme="dark"] .vz-home-topbar { border-bottom-color: var(--vz-header-border); }
html[data-vz-theme="sky"] .vz-home-topbar { border-bottom-color: var(--vz-header-border); }
html[data-vz-theme="sky"] .vz-cat-item.is-active { color: var(--vz-ink); border-left-color: var(--vz-accent); }

/* ========== viewer-theme.css — Page sidebar UI 2026-05-27 ========== */
html[data-vz-theme="sky"] .vz-sidebar { border-radius: 0 22px 22px 0; box-shadow: 10px 0 40px rgba(30, 80, 110, 0.16); }
html[data-vz-theme="sky"] .vz-sidebar::before { background: linear-gradient(180deg, #2a7ba3 0%, #e86f45 100%); }
html[data-vz-theme="sky"] .vz-sidebar-brand-icon { background: linear-gradient(135deg, rgba(42, 123, 163, 0.16) 0%, rgba(232, 111, 69, 0.12) 100%); color: #1a6b8f; border-color: rgba(42, 123, 163, 0.22); box-shadow: 0 4px 16px rgba(42, 123, 163, 0.16); }
html[data-vz-theme="sky"] .vz-sidebar-head-title { background: linear-gradient(120deg, #1a6b8f 0%, #2a7ba3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-vz-theme="sky"] .vz-sidebar-head::after { background: linear-gradient(90deg, transparent, rgba(42, 123, 163, 0.2), transparent); }
html[data-vz-theme="sky"] .vz-thumb-grid { background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(42, 123, 163, 0.08), transparent 55%), linear-gradient(180deg, #eef7fb 0%, #ffffff 40%, #ffffff 100%); }
html[data-vz-theme="sky"] .vz-thumb-item { background: #fff; border-radius: 12px; border-width: 2px; }
html[data-vz-theme="sky"] .vz-thumb-item.is-active { border-color: var(--vz-primary); }
html[data-vz-theme="sky"] .vz-thumb-badge { color: #1a6b8f; border-color: rgba(42, 123, 163, 0.18); }
html[data-vz-theme="sky"] .vz-sidebar-backdrop { background: rgba(22, 74, 98, 0.36); }
html[data-vz-theme="dark"] .vz-sidebar { border-radius: 0 20px 20px 0; box-shadow: 10px 0 40px rgba(0, 0, 0, 0.45); }
html[data-vz-theme="dark"] .vz-sidebar::before { background: linear-gradient(180deg, #5b9fd9 0%, #e89578 100%); opacity: 0.85; }
html[data-vz-theme="dark"] .vz-sidebar-brand-icon { background: rgba(255, 255, 255, 0.06); color: #9ec5eb; border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
html[data-vz-theme="dark"] .vz-sidebar-head::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); }
html[data-vz-theme="dark"] .vz-thumb-grid { background: linear-gradient(180deg, #222222 0%, #242424 100%); }
html[data-vz-theme="dark"] .vz-thumb-badge { color: rgba(242, 242, 242, 0.9); background: rgba(22, 22, 22, 0.9); border-color: rgba(255, 255, 255, 0.08); }
html[data-vz-theme="dark"] .vz-thumb-item::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
html[data-vz-theme="dark"] .vz-sidebar-backdrop { background: rgba(0, 0, 0, 0.55); }
/* ========== viewer-theme.css — Page sidebar UI end ========== */

/* 홈·목록 카드 */
.vz-card .vz-card-title,
.vz-card .vz-card-title-link { color: var(--vz-card-title-fg, var(--vz-ink)); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vz-card .vz-card-meta { color: var(--vz-card-meta-fg, var(--vz-ink-muted)); font-weight: 400; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.vz-home-grid .vz-card .vz-card-meta { justify-content: space-between; gap: 6px; }
.vz-home-grid .vz-card .vz-card-meta span:last-child { margin-left: auto; text-align: right; }
.vz-card .vz-card-meta span { white-space: nowrap; flex-shrink: 0; }
.vz-card .vz-card-meta i { color: var(--vz-card-meta-icon, var(--vz-accent-green)); }
.vz-card--news { background: var(--vz-card-news-bg); }
.vz-card-thumb-empty { background: var(--vz-card-empty-thumb-bg); color: var(--vz-muted); }

/* ========== viewer-theme.css — Sky UI refresh 2026-05-27 ========== */
html[data-vz-theme="sky"] body.vz-body { background: radial-gradient(1200px 480px at 50% -120px, rgba(42, 123, 163, 0.1), transparent 62%), var(--vz-bg); }
html[data-vz-theme="sky"] .vz-home-header { box-shadow: var(--vz-header-shadow); }
html[data-vz-theme="sky"] .vz-home-topbar { padding: 16px 24px; }
html[data-vz-theme="sky"] .vz-topbar .brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.03em; }
html[data-vz-theme="sky"] .vz-topbar .brand span { font-weight: 800; color: #ffffff; text-shadow: 0 1px 2px rgba(22, 74, 98, 0.2); }
html[data-vz-theme="sky"] .vz-top-btn { font-weight: 600; box-shadow: 0 1px 3px rgba(30, 80, 110, 0.12); }
html[data-vz-theme="sky"] .vz-top-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30, 80, 110, 0.18); }
html[data-vz-theme="sky"] .vz-cat-panel { border-radius: 18px; box-shadow: var(--vz-shadow-lg); border-color: rgba(42, 123, 163, 0.12); }
html[data-vz-theme="sky"] .vz-cat-panel-scroll::-webkit-scrollbar-thumb { background: rgba(42, 123, 163, 0.24); }
html[data-vz-theme="sky"] .vz-search-fab { box-shadow: 0 10px 28px rgba(30, 80, 110, 0.28); }
html[data-vz-theme="sky"] .vz-search-fab:hover { box-shadow: 0 14px 32px rgba(30, 80, 110, 0.34); }
html[data-vz-theme="sky"] .vz-home-main { padding-top: 20px; padding-bottom: 56px; }
html[data-vz-theme="sky"] .vz-main-visual { border-radius: 22px; border: 1px solid rgba(42, 123, 163, 0.14); box-shadow: var(--vz-shadow-md); }
html[data-vz-theme="sky"] .vz-main-visual .swiper-pagination-bullet-active { background: var(--vz-primary); }
html[data-vz-theme="sky"] { --vz-home-grid-gap: 22px; }
html[data-vz-theme="sky"] .vz-card { background: var(--vz-card); border-radius: 18px; border: 1px solid rgba(42, 123, 163, 0.16); box-shadow: var(--vz-card-shadow); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.2s ease; }
html[data-vz-theme="sky"] .vz-card:hover { transform: translateY(-6px); box-shadow: var(--vz-card-shadow-hover); border-color: rgba(42, 123, 163, 0.28); }
html[data-vz-theme="sky"] .vz-home-grid .vz-card-thumb { border-radius: 18px 18px 0 0; }
html[data-vz-theme="sky"] .vz-card-body { border-top-color: rgba(42, 123, 163, 0.12); }
html[data-vz-theme="sky"] .vz-card-type-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vz-primary); background: rgba(42, 123, 163, 0.1); border: 1px solid rgba(42, 123, 163, 0.18); padding: 4px 10px; border-radius: var(--vz-radius-pill); }
html[data-vz-theme="sky"] .vz-card-type-badge.is-accent { color: #b45309; background: rgba(232, 111, 69, 0.1); border-color: rgba(232, 111, 69, 0.2); }
html[data-vz-theme="sky"] .vz-card-body > .vz-card-type-badge { margin: 10px 16px 5px; }
html[data-vz-theme="sky"] .vz-card-body > .vz-card-title { font-weight: 500; border-bottom: 1px solid rgba(42, 123, 163, 0.12); padding: 5px 10px 10px; margin: 0; font-size: 0.98rem; line-height: 1.45; }
html[data-vz-theme="sky"] .vz-card:hover .vz-card-title-link { color: var(--vz-primary); }
html[data-vz-theme="sky"] .vz-card-body > .vz-card-meta { font-weight: 500; padding: 11px 18px 15px; }
html[data-vz-theme="sky"] .vz-card-meta span { padding: 0; font-weight: 500; }
html[data-vz-theme="sky"] .vz-card--news { border-color: rgba(232, 111, 69, 0.16); }
html[data-vz-theme="sky"] .vz-card--news:hover { border-color: rgba(232, 111, 69, 0.3); }
html[data-vz-theme="sky"] .vz-empty { padding: 72px 28px; font-size: 1rem; color: var(--vz-ink-muted); background: var(--vz-card); border-radius: 20px; border: 1px dashed rgba(42, 123, 163, 0.2); max-width: 420px; margin: 48px auto; }
html[data-vz-theme="sky"] .vz-viewer-head,
html[data-vz-theme="sky"] .vz-card-viewer-head { box-shadow: var(--vz-viewer-head-shadow); }
html[data-vz-theme="sky"] .vz-share-panel { border-radius: 22px; box-shadow: var(--vz-shadow-lg); }
html[data-vz-theme="sky"] .vz-share-copy-btn { background: var(--vz-gradient); }
html[data-vz-theme="sky"] .vz-share-copy-btn:hover { background: var(--vz-gradient-accent); }
html[data-vz-theme="sky"] .vz-pagination a:hover { background: rgba(42, 123, 163, 0.1); color: var(--vz-primary); }
html[data-vz-theme="sky"] .vz-user-menu { background: var(--vz-card); border-color: var(--vz-border); border-radius: 16px; box-shadow: var(--vz-shadow-md); }
html[data-vz-theme="sky"] .vz-search-form:focus-within .vz-search-input-icon { color: var(--vz-primary); }
html[data-vz-theme="sky"] .vz-infinite-status.is-loading:not([hidden])::before { border-color: rgba(42, 123, 163, 0.16); border-top-color: var(--vz-primary); }
html[data-vz-theme="sky"] .vz-card-viewer { background: var(--vz-stage-chrome); color: var(--vz-ink); box-shadow: var(--vz-shadow-lg); }
html[data-vz-theme="sky"] .vz-card-swiper { padding: 18px 14px 24px; background: radial-gradient(120% 70% at 50% -8%, rgba(42, 123, 163, 0.12), transparent 58%), var(--vz-stage-chrome); }
html[data-vz-theme="sky"] .vz-card-swiper .swiper-slide { align-items: flex-start; }
html[data-vz-theme="sky"] .vz-card-slide-inner { max-width: min(540px, 100%); margin: 0 auto; border-radius: 20px; border: 1px solid rgba(42, 123, 163, 0.18); background: #ffffff; box-shadow: 0 10px 26px rgba(30, 80, 110, 0.14), 0 3px 10px rgba(42, 123, 163, 0.1); overflow: hidden; }
html[data-vz-theme="sky"] .vz-card-slide-caption { background: #ffffff; color: var(--vz-ink); border-top: 1px solid rgba(42, 123, 163, 0.12); padding: 16px 18px 18px; }
html[data-vz-theme="sky"] .vz-card-slide-caption h2 { font-weight: 600; color: var(--vz-card-title-fg); }
html[data-vz-theme="sky"] .vz-card-slide-text { background: #ffffff; color: var(--vz-ink-muted); border-top: 1px solid rgba(42, 123, 163, 0.12); padding: 16px 18px 20px; }
html[data-vz-theme="sky"] .vz-card-counter { background: var(--vz-foot-bg); color: var(--vz-ink-muted); border-top: 1px solid var(--vz-border); }
html[data-vz-theme="sky"] .vz-card-swiper .swiper-pagination-bullet-active { background: var(--vz-primary); }
/* ========== viewer-theme.css — Sky UI refresh end ========== */

/* ========== viewer-theme.css — Light UI refresh 2026-05-27 ========== */
html[data-vz-theme="light"] body.vz-body { background: radial-gradient(1200px 480px at 50% -120px, rgba(26, 86, 168, 0.06), transparent 65%), var(--vz-bg); }
html[data-vz-theme="light"] .vz-home-header { background: var(--vz-header-bg); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--vz-header-shadow); }
html[data-vz-theme="light"] .vz-home-topbar { padding: 16px 24px; border-bottom-color: var(--vz-header-border); }
html[data-vz-theme="light"] .vz-topbar .brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.03em; }
html[data-vz-theme="light"] .vz-topbar .brand span { font-weight: 800; background: linear-gradient(120deg, var(--vz-primary) 0%, var(--vz-primary-soft) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-vz-theme="light"] .vz-top-btn { font-weight: 600; border-color: rgba(28, 25, 23, 0.08); box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04); }
html[data-vz-theme="light"] .vz-top-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232, 93, 58, 0.14); }
html[data-vz-theme="light"] .vz-cat-panel { border-radius: 18px; box-shadow: var(--vz-shadow-lg); border-color: rgba(28, 25, 23, 0.06); }
html[data-vz-theme="light"] .vz-cat-panel-scroll::-webkit-scrollbar-thumb { background: rgba(26, 86, 168, 0.22); }
html[data-vz-theme="light"] .vz-cat-item.is-active { border-left-color: var(--vz-primary); color: var(--vz-primary); }
html[data-vz-theme="light"] .vz-search-fab { box-shadow: 0 10px 28px rgba(26, 86, 168, 0.32); }
html[data-vz-theme="light"] .vz-search-fab:hover { box-shadow: 0 14px 32px rgba(26, 86, 168, 0.38); }
html[data-vz-theme="light"] .vz-home-main { padding-top: 20px; padding-bottom: 56px; }
html[data-vz-theme="light"] .vz-main-visual { border-radius: 22px; border-color: rgba(28, 25, 23, 0.06); box-shadow: var(--vz-shadow-md); }
html[data-vz-theme="light"] .vz-main-visual .swiper-pagination-bullet-active { background: var(--vz-primary); }
html[data-vz-theme="light"] { --vz-home-grid-gap: 22px; }
html[data-vz-theme="light"] .vz-card { background: var(--vz-card); border-radius: 18px; border-color: rgba(28, 25, 23, 0.07); box-shadow: var(--vz-card-shadow, var(--vz-shadow-sm)); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.2s ease; }
html[data-vz-theme="light"] .vz-card:hover { transform: translateY(-6px); box-shadow: var(--vz-card-shadow-hover); border-color: rgba(26, 86, 168, 0.2); }
html[data-vz-theme="light"] .vz-home-grid .vz-card-thumb { border-radius: 18px 18px 0 0; }
html[data-vz-theme="light"] .vz-card-body { border-top-color: rgba(28, 25, 23, 0.07); }
html[data-vz-theme="light"] .vz-card-type-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vz-primary); background: rgba(26, 86, 168, 0.08); border: 1px solid rgba(26, 86, 168, 0.12); padding: 4px 10px; border-radius: var(--vz-radius-pill); }
html[data-vz-theme="light"] .vz-card-type-badge.is-accent { color: #c2410c; background: rgba(232, 93, 58, 0.1); border-color: rgba(232, 93, 58, 0.18); }
html[data-vz-theme="light"] .vz-card-body > .vz-card-type-badge { margin: 10px 16px 5px; }
html[data-vz-theme="light"] .vz-card-body > .vz-card-title { padding: 5px 10px 10px; font-size: 0.98rem; font-weight: 500; line-height: 1.45; border-bottom-color: rgba(28, 25, 23, 0.07); }
html[data-vz-theme="light"] .vz-card:hover .vz-card-title-link { color: var(--vz-primary); }
html[data-vz-theme="light"] .vz-card-body > .vz-card-meta { padding: 11px 18px 15px; font-weight: 500; }
html[data-vz-theme="light"] .vz-card-meta span { padding: 0; font-weight: 500; }
html[data-vz-theme="light"] .vz-home-grid .vz-card-thumb { aspect-ratio: 570 / 720; }
html[data-vz-theme="light"] .vz-card--news { border-color: rgba(28, 25, 23, 0.12); }
html[data-vz-theme="light"] .vz-card--news:hover { border-color: rgba(28, 25, 23, 0.2); }
html[data-vz-theme="light"] .vz-empty { padding: 72px 28px; font-size: 1rem; color: var(--vz-ink-muted); background: var(--vz-card); border-radius: 20px; border: 1px dashed rgba(28, 25, 23, 0.12); max-width: 420px; margin: 48px auto; }
html[data-vz-theme="light"] .vz-viewer-head,
html[data-vz-theme="light"] .vz-card-viewer-head { background: var(--vz-header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--vz-viewer-head-shadow); }
html[data-vz-theme="light"] .vz-viewer-wrap { border-radius: 0; box-shadow: none; background: var(--vz-card); }
html[data-vz-theme="light"] body.vz-body--zine-viewer { background: var(--vz-viewer-wrap-bg); }
html[data-vz-theme="light"] .vz-share-panel { border-radius: 22px; box-shadow: var(--vz-shadow-lg); }
html[data-vz-theme="light"] .vz-share-copy-btn { background: var(--vz-gradient); }
html[data-vz-theme="light"] .vz-share-copy-btn:hover { background: var(--vz-gradient-accent); }
html[data-vz-theme="light"] .vz-sidebar { border-radius: 0 22px 22px 0; box-shadow: 10px 0 44px rgba(26, 86, 168, 0.12); }
html[data-vz-theme="light"] .vz-sidebar::before { background: linear-gradient(180deg, #1a56a8 0%, #e85d3a 100%); }
html[data-vz-theme="light"] .vz-sidebar-brand-icon { background: linear-gradient(135deg, rgba(26, 86, 168, 0.12) 0%, rgba(232, 93, 58, 0.1) 100%); color: var(--vz-primary); border-color: rgba(26, 86, 168, 0.14); box-shadow: 0 4px 16px rgba(26, 86, 168, 0.14); }
html[data-vz-theme="light"] .vz-sidebar-head-title { background: linear-gradient(120deg, var(--vz-primary) 0%, #2b6cb8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-vz-theme="light"] .vz-sidebar-head::after { background: linear-gradient(90deg, transparent, rgba(26, 86, 168, 0.18), transparent); }
html[data-vz-theme="light"] .vz-thumb-grid { background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(26, 86, 168, 0.06), transparent 55%), linear-gradient(180deg, #f8fafc 0%, #ffffff 38%, #ffffff 100%); }
html[data-vz-theme="light"] .vz-thumb-item { border-radius: 12px; border-width: 2px; background: #fff; }
html[data-vz-theme="light"] .vz-thumb-item.is-active { border-color: var(--vz-primary); }
html[data-vz-theme="light"] .vz-thumb-badge { color: var(--vz-primary); border-color: rgba(26, 86, 168, 0.14); }
html[data-vz-theme="light"] .vz-sidebar-backdrop { background: rgba(28, 25, 23, 0.35); }
html[data-vz-theme="light"] .vz-preview-notice { border-bottom-color: var(--vz-preview-notice-border); }
html[data-vz-theme="light"] .vz-pagination a:hover { background: rgba(26, 86, 168, 0.08); color: var(--vz-primary); }
html[data-vz-theme="light"] .vz-user-menu { background: var(--vz-card); border-color: var(--vz-border); border-radius: 16px; box-shadow: var(--vz-shadow-md); }
html[data-vz-theme="light"] .vz-search-form:focus-within .vz-search-input-icon { color: var(--vz-primary); }
html[data-vz-theme="light"] .vz-infinite-status.is-loading:not([hidden])::before { border-color: rgba(26, 86, 168, 0.15); border-top-color: var(--vz-primary); }
html[data-vz-theme="light"] .vz-card-viewer { background: var(--vz-stage-chrome); color: var(--vz-ink); box-shadow: var(--vz-shadow-lg); }
html[data-vz-theme="light"] .vz-card-swiper { padding: 18px 14px 24px; background: radial-gradient(120% 70% at 50% -8%, rgba(26, 86, 168, 0.08), transparent 58%), var(--vz-stage-chrome); }
html[data-vz-theme="light"] .vz-card-swiper .swiper-slide { align-items: flex-start; }
html[data-vz-theme="light"] .vz-card-slide-inner { max-width: min(540px, 100%); margin: 0 auto; border-radius: 20px; border: 1px solid rgba(28, 25, 23, 0.08); background: #ffffff; box-shadow: 0 10px 26px rgba(28, 25, 23, 0.12), 0 3px 10px rgba(26, 86, 168, 0.08); overflow: hidden; }
html[data-vz-theme="light"] .vz-card-slide-caption { background: #ffffff; color: var(--vz-ink); border-top: 1px solid rgba(28, 25, 23, 0.08); padding: 16px 18px 18px; }
html[data-vz-theme="light"] .vz-card-slide-caption h2 { font-weight: 600; color: var(--vz-ink); }
html[data-vz-theme="light"] .vz-card-slide-text { background: #ffffff; color: var(--vz-ink-muted); border-top: 1px solid rgba(28, 25, 23, 0.08); padding: 16px 18px 20px; }
html[data-vz-theme="light"] .vz-card-counter { background: var(--vz-foot-bg); color: var(--vz-ink-muted); border-top: 1px solid var(--vz-border); }
html[data-vz-theme="light"] .vz-card-swiper .swiper-pagination-bullet-active { background: var(--vz-primary); }
/* ========== viewer-theme.css — Light UI refresh end ========== */

/* ========== viewer-theme.css — Dark UI refresh 2026-05-27 ========== */
html[data-vz-theme="dark"] body.vz-body { background: var(--vz-bg); }
html[data-vz-theme="dark"] .vz-home-header { box-shadow: var(--vz-header-shadow); }
html[data-vz-theme="dark"] .vz-home-main { padding-top: 20px; padding-bottom: 56px; }
html[data-vz-theme="dark"] { --vz-home-grid-gap: 20px; }
html[data-vz-theme="dark"] .vz-home-grid .vz-card-thumb,
html[data-vz-theme="dark"] .vz-home-grid .vz-card-thumb-empty { box-shadow: var(--vz-card-thumb-shadow); }
html[data-vz-theme="dark"] .vz-home-grid .vz-card:hover .vz-card-thumb { box-shadow: var(--vz-card-thumb-shadow-hover); }
html[data-vz-theme="dark"] .vz-card { background: var(--vz-card-surface); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: var(--vz-card-shadow); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.2s ease; }
html[data-vz-theme="dark"] .vz-home-grid .vz-card { background: var(--vz-card-surface); }
html[data-vz-theme="dark"] .vz-card:hover { border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--vz-card-shadow-hover); transform: translateY(-4px); }
html[data-vz-theme="dark"] .vz-card:hover .vz-card-title-link { color: var(--vz-primary-soft); }
html[data-vz-theme="dark"] .vz-home-grid .vz-card-thumb { border-radius: 18px 18px 0 0; }
html[data-vz-theme="dark"] .vz-card-thumb { position: relative; }
html[data-vz-theme="dark"] .vz-card-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--vz-card-thumb-fade); pointer-events: none; }
html[data-vz-theme="dark"] .vz-card-thumb-empty::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--vz-card-thumb-fade); pointer-events: none; }
html[data-vz-theme="dark"] .vz-card-thumb-empty { position: relative; color: var(--vz-muted); }
html[data-vz-theme="dark"] .vz-card-body { position: relative; padding: 0; background: var(--vz-card-body-bg); border-top: 1px solid rgba(255, 255, 255, 0.06); }
html[data-vz-theme="dark"] .vz-card--news { background: var(--vz-card-news-bg); border-color: rgba(255, 255, 255, 0.06); }
html[data-vz-theme="dark"] .vz-card--news .vz-card-body { background: var(--vz-card-news-body-bg); }
html[data-vz-theme="dark"] .vz-card--news .vz-card-body::before { display: none; }
html[data-vz-theme="dark"] .vz-card--news:hover { border-color: rgba(232, 149, 120, 0.2); }
html[data-vz-theme="dark"] .vz-card-body > .vz-card-type-badge { margin: 10px 16px 5px; }
html[data-vz-theme="dark"] .vz-card-body > .vz-card-title { font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 5px 10px 10px; margin: 0; }
html[data-vz-theme="dark"] .vz-card-body > .vz-card-meta { font-weight: 500; padding: 10px 16px 14px; }
html[data-vz-theme="dark"] .vz-card-type-badge { color: var(--vz-card-badge-fg); background: var(--vz-card-badge-bg); border: 1px solid var(--vz-card-badge-border); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 10px; }
html[data-vz-theme="dark"] .vz-card-type-badge.is-accent { color: var(--vz-card-badge-accent-fg); background: var(--vz-card-badge-accent-bg); border-color: var(--vz-card-badge-accent-border); }
html[data-vz-theme="dark"] .vz-card .vz-card-title { font-size: 0.92rem; font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.45; min-width: 0; }
html[data-vz-theme="dark"] .vz-card-meta { gap: 8px; font-size: 0.72rem; font-weight: 400; flex-wrap: nowrap; align-items: center; justify-content: center; width: 100%; }
html[data-vz-theme="dark"] .vz-home-grid .vz-card-meta { justify-content: space-between; gap: 6px; }
html[data-vz-theme="dark"] .vz-home-grid .vz-card-meta span:last-child { margin-left: auto; text-align: right; }
html[data-vz-theme="dark"] .vz-card-meta span { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: none; background: transparent; white-space: nowrap; flex-shrink: 0; color: var(--vz-card-meta-fg); }
html[data-vz-theme="dark"] .vz-card-meta i { color: var(--vz-card-meta-icon); margin-right: 0; font-size: 0.7rem; opacity: 0.88; }
html[data-vz-theme="dark"] .vz-empty { padding: 72px 28px; font-size: 1rem; color: var(--vz-ink-muted); background: var(--vz-card); border-radius: 20px; border: 1px dashed rgba(255, 255, 255, 0.1); max-width: 420px; margin: 48px auto; }
html[data-vz-theme="dark"] .vz-viewer-head,
html[data-vz-theme="dark"] .vz-card-viewer-head { box-shadow: var(--vz-viewer-head-shadow); }
html[data-vz-theme="dark"] .vz-share-panel { border-radius: 22px; box-shadow: var(--vz-shadow-lg); }
html[data-vz-theme="dark"] .vz-cat-panel { border-radius: 18px; box-shadow: var(--vz-shadow-lg); border-color: rgba(255, 255, 255, 0.06); }
html[data-vz-theme="dark"] .vz-cat-item.is-active { border-left-color: var(--vz-accent); color: #f5f5f5; }
html[data-vz-theme="dark"] .vz-search-zone { background: var(--vz-bg); }
html[data-vz-theme="dark"] .vz-search-select { background: var(--vz-search-field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23a8a8a8' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center; }
html[data-vz-theme="dark"] .vz-pagination { color: var(--vz-ink-muted); }
html[data-vz-theme="dark"] .vz-pagination a:hover { background: rgba(255, 255, 255, 0.06); color: var(--vz-primary-soft); }
html[data-vz-theme="dark"] .vz-user-menu { background: var(--vz-card); border-color: var(--vz-border); border-radius: 16px; box-shadow: var(--vz-shadow-md); }
html[data-vz-theme="dark"] .vz-board-item { background: var(--vz-card); box-shadow: var(--vz-card-shadow); border: 1px solid rgba(255, 255, 255, 0.06); }
html[data-vz-theme="dark"] .vz-board-item:hover { box-shadow: var(--vz-card-shadow-hover); }
html[data-vz-theme="dark"] .vz-board-article { background: var(--vz-card); box-shadow: var(--vz-card-shadow); border: 1px solid rgba(255, 255, 255, 0.06); }
html[data-vz-theme="dark"] .vz-card-viewer { background: var(--vz-stage-chrome); color: var(--vz-ink); }
html[data-vz-theme="dark"] .vz-card-swiper { padding: 18px 14px 24px; background: var(--vz-stage-chrome); }
html[data-vz-theme="dark"] .vz-card-swiper .swiper-slide { align-items: flex-start; }
html[data-vz-theme="dark"] .vz-card-slide-inner { max-width: min(540px, 100%); margin: 0 auto; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.09); background: #2e2e2e; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); overflow: hidden; }
html[data-vz-theme="dark"] .vz-card-slide-caption { background: #2e2e2e; color: var(--vz-ink); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 16px 18px 18px; }
html[data-vz-theme="dark"] .vz-card-slide-caption h2 { font-weight: 600; color: var(--vz-card-title-fg); }
html[data-vz-theme="dark"] .vz-card-slide-text { background: #2e2e2e; color: var(--vz-ink-muted); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 16px 18px 20px; }
html[data-vz-theme="dark"] .vz-card-counter { background: var(--vz-foot-bg); color: var(--vz-ink-muted); border-top: 1px solid var(--vz-border); }
html[data-vz-theme="dark"] .vz-card-swiper .swiper-pagination-bullet-active { background: var(--vz-primary); }
html[data-vz-theme="dark"] .vz-infinite-status.is-loading:not([hidden])::before { border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--vz-primary); }
/* ========== viewer-theme.css — Dark UI refresh end ========== */

/* ========== viewer-theme.css — 홈 그리드 간격 (태블릿·모바일) 2026-05-29 ========== */
@media (max-width: 992px) {
  html[data-vz-theme="sky"],
  html[data-vz-theme="light"],
  html[data-vz-theme="dark"] { --vz-home-grid-gap: 12px; }
}
@media (max-width: 768px) {
  html[data-vz-theme="sky"],
  html[data-vz-theme="light"],
  html[data-vz-theme="dark"] { --vz-home-grid-gap: 10px; }
  html[data-vz-theme] .vz-home-main { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 480px) {
  html[data-vz-theme="sky"],
  html[data-vz-theme="light"],
  html[data-vz-theme="dark"] { --vz-home-grid-gap: 8px; }
  html[data-vz-theme] .vz-home-main { padding-left: 10px; padding-right: 10px; }
}
/* ========== viewer-theme.css — 홈 그리드 간격 end ========== */

/* ========== viewer-theme.css — 갤러리 레이어 객체 토큰 start (2026-06-01) ========== */
/* 2026-06-01: 갤러리 타이포 — 푸터(.vz-foot) 0.85rem 기준, 좁은 레이어는 viewer-module @container */
html[data-vz-theme="light"],
html[data-vz-theme="sky"],
html[data-vz-theme="dark"] {
  --vz-gallery-font-title: 0.9rem;
  --vz-gallery-font-sub: 0.85rem;
  --vz-gallery-font-card: 0.85rem;
  --vz-gallery-font-badge: 0.72rem;
  --vz-gallery-font-page: 0.85rem;
  --vz-gallery-font-stack: 0.85rem;
  --vz-gallery-head-icon-size: 1.75rem;
  --vz-gallery-head-btn-size: 1.875rem;
}
html[data-vz-theme="light"],
.vz-module-overlay[data-vz-theme="light"],
#preview-modal[data-vz-theme="light"],
#library-preview-modal[data-vz-theme="light"] {
  --vz-gallery-layer-bg: var(--vz-card);
  /* 2026-06-01: 라이트 — 레이어 하단 그라데이션 완화 */
  --vz-gallery-layer-bg-gradient: linear-gradient(180deg, var(--vz-card) 0%, var(--vz-gray-light) 90%, #fff9f6 100%);
  --vz-gallery-layer-body-bg: var(--vz-card);
  --vz-gallery-layer-border: var(--vz-border);
  --vz-gallery-layer-head-bg: linear-gradient(90deg, var(--vz-accent-soft) 0%, rgba(255, 255, 255, 0) 100%);
  --vz-gallery-layer-head-border: var(--vz-border);
  --vz-gallery-layer-icon-bg: var(--vz-accent-soft);
  --vz-gallery-layer-icon-fg: var(--vz-primary);
  --vz-gallery-layer-title-fg: var(--vz-ink);
  --vz-gallery-layer-muted-fg: var(--vz-ink-muted);
  --vz-gallery-layer-btn-bg: var(--vz-btn-bg);
  --vz-gallery-layer-btn-fg: var(--vz-primary);
  --vz-gallery-layer-btn-hover-bg: var(--vz-btn-hover-bg);
  --vz-gallery-layer-btn-hover-fg: var(--vz-btn-hover-fg);
  --vz-gallery-layer-focus: var(--vz-primary);
  --vz-gallery-layer-card-bg: var(--vz-card);
  --vz-gallery-layer-card-shadow: var(--vz-shadow-sm);
  --vz-gallery-layer-card-shadow-hover: var(--vz-card-shadow-hover);
  --vz-gallery-layer-card-media-bg: var(--vz-bg-subtle);
  --vz-gallery-layer-card-shade: linear-gradient(180deg, transparent 38%, rgba(28, 25, 23, 0.52) 100%);
  --vz-gallery-layer-card-title-bg: rgba(255, 255, 255, 0.94);
  --vz-gallery-layer-card-title-fg: var(--vz-ink);
  --vz-gallery-layer-count-bg: rgba(28, 25, 23, 0.55);
  --vz-gallery-layer-count-fg: #ffffff;
  --vz-gallery-layer-photo-bg: var(--vz-bg-subtle);
  --vz-gallery-layer-photo-shadow-hover: 0 4px 14px var(--vz-accent-glow);
  --vz-gallery-layer-photo-idx-bg: rgba(28, 25, 23, 0.62);
  --vz-gallery-layer-widget-bg: linear-gradient(145deg, var(--vz-card) 0%, var(--vz-gray-light) 100%);
  --vz-gallery-layer-widget-border: color-mix(in srgb, var(--vz-primary) 38%, transparent);
  --vz-gallery-layer-widget-icon-fg: var(--vz-primary);
  --vz-gallery-layer-widget-title-fg: var(--vz-ink);
  --vz-gallery-layer-widget-hint-fg: var(--vz-muted);
  --vz-gallery-layer-loading-fg: var(--vz-primary);
  --vz-gallery-layer-empty-icon-bg: var(--vz-accent-soft);
  --vz-gallery-layer-empty-icon-fg: var(--vz-primary);
  --vz-gallery-lightbox-backdrop: rgba(28, 25, 23, 0.88);
  --vz-gallery-lightbox-title-fg: var(--vz-ink);
  --vz-gallery-lightbox-muted-fg: var(--vz-ink-muted);
  --vz-gallery-lightbox-counter-bg: rgba(255, 255, 255, 0.72);
  --vz-gallery-lightbox-nav-bg: var(--vz-btn-bg);
  --vz-gallery-lightbox-nav-border: var(--vz-btn-border);
  --vz-gallery-lightbox-nav-fg: var(--vz-primary);
  --vz-gallery-lightbox-nav-hover-bg: var(--vz-btn-hover-bg);
  --vz-gallery-lightbox-nav-hover-fg: var(--vz-btn-hover-fg);
  --vz-gallery-lightbox-loading-fg: var(--vz-primary);
  --vz-gallery-lightbox-img-bg: rgba(255, 255, 255, 0.5);
  --vz-gallery-lightbox-img-shadow: var(--vz-shadow-lg);
  --vz-gallery-layer-body-bg: var(--vz-card);
  --vz-gallery-layer-scroll-size: 6px;
  --vz-gallery-layer-scroll-track: transparent;
  --vz-gallery-layer-scroll-thumb: color-mix(in srgb, var(--vz-primary) 28%, transparent);
  --vz-gallery-layer-scroll-thumb-hover: color-mix(in srgb, var(--vz-primary) 48%, transparent);
  --vz-board-attach-border: var(--vz-border);
  --vz-board-attach-title-fg: var(--vz-ink);
  --vz-board-attach-link-fg: var(--vz-ink);
  --vz-board-attach-link-bg: var(--vz-bg-subtle);
  --vz-board-attach-link-border: var(--vz-border);
  --vz-board-attach-link-hover-bg: var(--vz-accent-soft);
  --vz-board-attach-link-hover-border: color-mix(in srgb, var(--vz-primary) 42%, transparent);
  --vz-board-attach-link-hover-fg: var(--vz-ink);
  --vz-board-attach-muted-fg: var(--vz-ink-muted);
  --vz-board-attach-icon-fg: var(--vz-primary);
}
html[data-vz-theme="dark"],
.vz-module-overlay[data-vz-theme="dark"],
#preview-modal[data-vz-theme="dark"],
#library-preview-modal[data-vz-theme="dark"] {
  --vz-gallery-layer-bg: var(--vz-card);
  --vz-gallery-layer-bg-gradient: linear-gradient(165deg, var(--vz-card-surface, #2e2e2e) 0%, var(--vz-card) 48%, var(--vz-bg-subtle) 100%);
  --vz-gallery-layer-border: var(--vz-border);
  --vz-gallery-layer-head-bg: linear-gradient(90deg, var(--vz-cat-active-bg) 0%, transparent 100%);
  --vz-gallery-layer-head-border: var(--vz-border);
  --vz-gallery-layer-icon-bg: var(--vz-card-badge-bg);
  --vz-gallery-layer-icon-fg: var(--vz-primary-soft);
  --vz-gallery-layer-title-fg: var(--vz-card-title-fg);
  --vz-gallery-layer-muted-fg: var(--vz-ink-muted);
  --vz-gallery-layer-btn-bg: var(--vz-btn-bg);
  --vz-gallery-layer-btn-fg: var(--vz-primary-soft);
  --vz-gallery-layer-btn-hover-bg: var(--vz-btn-hover-bg);
  --vz-gallery-layer-btn-hover-fg: var(--vz-btn-hover-fg);
  --vz-gallery-layer-focus: var(--vz-primary-soft);
  --vz-gallery-layer-card-bg: var(--vz-card-body-bg, var(--vz-card));
  --vz-gallery-layer-card-shadow: var(--vz-shadow-sm);
  --vz-gallery-layer-card-shadow-hover: var(--vz-card-shadow-hover);
  --vz-gallery-layer-card-media-bg: var(--vz-thumb-empty-bg);
  --vz-gallery-layer-card-shade: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
  --vz-gallery-layer-card-title-bg: rgba(36, 36, 36, 0.88);
  --vz-gallery-layer-card-title-fg: var(--vz-card-title-fg);
  --vz-gallery-layer-count-bg: rgba(0, 0, 0, 0.55);
  --vz-gallery-layer-count-fg: #f5f5f5;
  --vz-gallery-layer-photo-bg: var(--vz-thumb-empty-bg);
  --vz-gallery-layer-photo-shadow-hover: 0 4px 14px var(--vz-accent-glow);
  --vz-gallery-layer-photo-idx-bg: rgba(0, 0, 0, 0.62);
  --vz-gallery-layer-widget-bg: linear-gradient(145deg, var(--vz-card) 0%, var(--vz-bg-subtle) 100%);
  --vz-gallery-layer-widget-border: color-mix(in srgb, var(--vz-primary-soft) 42%, transparent);
  --vz-gallery-layer-widget-icon-fg: var(--vz-primary-soft);
  --vz-gallery-layer-widget-title-fg: var(--vz-ink);
  --vz-gallery-layer-widget-hint-fg: var(--vz-muted);
  --vz-gallery-layer-loading-fg: var(--vz-primary-soft);
  --vz-gallery-layer-empty-icon-bg: var(--vz-cat-active-bg);
  --vz-gallery-layer-empty-icon-fg: var(--vz-primary-soft);
  --vz-gallery-lightbox-backdrop: rgba(0, 0, 0, 0.9);
  --vz-gallery-lightbox-title-fg: var(--vz-card-title-fg);
  --vz-gallery-lightbox-muted-fg: var(--vz-ink-muted);
  --vz-gallery-lightbox-counter-bg: rgba(255, 255, 255, 0.1);
  --vz-gallery-lightbox-nav-bg: var(--vz-btn-bg);
  --vz-gallery-lightbox-nav-border: var(--vz-btn-border);
  --vz-gallery-lightbox-nav-fg: var(--vz-primary-soft);
  --vz-gallery-lightbox-nav-hover-bg: var(--vz-btn-hover-bg);
  --vz-gallery-lightbox-nav-hover-fg: var(--vz-btn-hover-fg);
  --vz-gallery-lightbox-loading-fg: var(--vz-primary-soft);
  --vz-gallery-lightbox-img-bg: rgba(0, 0, 0, 0.35);
  --vz-gallery-lightbox-img-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  --vz-board-attach-border: rgba(255, 255, 255, 0.08);
  --vz-board-attach-title-fg: var(--vz-gallery-layer-title-fg, #cbd5e1);
  --vz-board-attach-link-fg: #e2e8f0;
  --vz-board-attach-link-bg: rgba(0, 0, 0, 0.22);
  --vz-board-attach-link-border: rgba(255, 255, 255, 0.12);
  --vz-board-attach-link-hover-bg: rgba(56, 189, 248, 0.12);
  --vz-board-attach-link-hover-border: rgba(56, 189, 248, 0.35);
  --vz-board-attach-link-hover-fg: #f8fafc;
  --vz-board-attach-muted-fg: var(--vz-gallery-layer-muted-fg, #94a3b8);
  --vz-board-attach-icon-fg: var(--vz-gallery-layer-muted-fg, #94a3b8);
  --vz-gallery-layer-scroll-size: 6px;
  --vz-gallery-layer-scroll-track: rgba(255, 255, 255, 0.04);
  --vz-gallery-layer-scroll-thumb: rgba(148, 163, 184, 0.38);
  --vz-gallery-layer-scroll-thumb-hover: rgba(91, 159, 217, 0.62);
}
html[data-vz-theme="sky"],
.vz-module-overlay[data-vz-theme="sky"],
#preview-modal[data-vz-theme="sky"],
#library-preview-modal[data-vz-theme="sky"] {
  --vz-gallery-layer-bg: var(--vz-card);
  /* 2026-06-01: 스카이 — 하단 투명 그라데이션 완화(긴 본문·첨부 가독) */
  --vz-gallery-layer-bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8fcfe 88%, #f2f9fc 100%);
  --vz-gallery-layer-body-bg: #ffffff;
  --vz-gallery-layer-scroll-size: 6px;
  --vz-gallery-layer-scroll-track: rgba(42, 123, 163, 0.06);
  --vz-gallery-layer-scroll-thumb: rgba(42, 123, 163, 0.32);
  --vz-gallery-layer-scroll-thumb-hover: rgba(42, 123, 163, 0.52);
  --vz-gallery-layer-border: var(--vz-border);
  --vz-gallery-layer-head-bg: linear-gradient(90deg, var(--vz-accent-soft) 0%, transparent 100%);
  --vz-gallery-layer-head-border: var(--vz-border);
  --vz-gallery-layer-icon-bg: rgba(42, 123, 163, 0.14);
  --vz-gallery-layer-icon-fg: var(--vz-primary);
  --vz-gallery-layer-title-fg: var(--vz-ink);
  --vz-gallery-layer-muted-fg: var(--vz-ink-muted);
  --vz-gallery-layer-btn-bg: var(--vz-btn-bg);
  --vz-gallery-layer-btn-fg: var(--vz-primary-dark);
  --vz-gallery-layer-btn-hover-bg: var(--vz-btn-hover-bg);
  --vz-gallery-layer-btn-hover-fg: var(--vz-accent);
  --vz-gallery-layer-focus: var(--vz-primary);
  --vz-gallery-layer-card-bg: var(--vz-card);
  --vz-gallery-layer-card-shadow: var(--vz-shadow-sm);
  --vz-gallery-layer-card-shadow-hover: var(--vz-card-shadow-hover);
  --vz-gallery-layer-card-media-bg: var(--vz-bg-subtle);
  --vz-gallery-layer-card-shade: linear-gradient(180deg, transparent 38%, rgba(30, 80, 110, 0.55) 100%);
  --vz-gallery-layer-card-title-bg: rgba(255, 255, 255, 0.94);
  --vz-gallery-layer-card-title-fg: var(--vz-card-title-fg);
  --vz-gallery-layer-count-bg: rgba(30, 80, 110, 0.58);
  --vz-gallery-layer-count-fg: #ffffff;
  --vz-gallery-layer-photo-bg: var(--vz-bg-subtle);
  --vz-gallery-layer-photo-shadow-hover: 0 4px 14px var(--vz-accent-glow);
  --vz-gallery-layer-photo-idx-bg: rgba(30, 80, 110, 0.62);
  --vz-gallery-layer-widget-bg: linear-gradient(145deg, #ffffff 0%, var(--vz-bg-subtle) 100%);
  --vz-gallery-layer-widget-border: color-mix(in srgb, var(--vz-primary) 35%, transparent);
  --vz-gallery-layer-widget-icon-fg: var(--vz-primary);
  --vz-gallery-layer-widget-title-fg: var(--vz-ink);
  --vz-gallery-layer-widget-hint-fg: var(--vz-muted);
  --vz-gallery-layer-loading-fg: var(--vz-primary);
  --vz-gallery-layer-empty-icon-bg: rgba(42, 123, 163, 0.12);
  --vz-gallery-layer-empty-icon-fg: var(--vz-primary);
  --vz-gallery-lightbox-backdrop: rgba(30, 80, 110, 0.82);
  --vz-gallery-lightbox-title-fg: var(--vz-ink);
  --vz-gallery-lightbox-muted-fg: var(--vz-ink-muted);
  --vz-gallery-lightbox-counter-bg: rgba(255, 255, 255, 0.75);
  --vz-gallery-lightbox-nav-bg: var(--vz-btn-bg);
  --vz-gallery-lightbox-nav-border: var(--vz-btn-border);
  --vz-gallery-lightbox-nav-fg: var(--vz-primary-dark);
  --vz-gallery-lightbox-nav-hover-bg: var(--vz-btn-hover-bg);
  --vz-gallery-lightbox-nav-hover-fg: var(--vz-accent);
  --vz-gallery-lightbox-loading-fg: var(--vz-primary);
  --vz-gallery-lightbox-img-bg: rgba(255, 255, 255, 0.45);
  --vz-gallery-lightbox-img-shadow: var(--vz-shadow-lg);
  --vz-board-attach-border: var(--vz-border);
  --vz-board-attach-title-fg: var(--vz-ink);
  --vz-board-attach-link-fg: var(--vz-ink);
  --vz-board-attach-link-bg: var(--vz-bg-subtle);
  --vz-board-attach-link-border: color-mix(in srgb, var(--vz-primary) 22%, var(--vz-border));
  --vz-board-attach-link-hover-bg: rgba(42, 123, 163, 0.1);
  --vz-board-attach-link-hover-border: color-mix(in srgb, var(--vz-primary) 45%, transparent);
  --vz-board-attach-link-hover-fg: var(--vz-ink);
  --vz-board-attach-muted-fg: var(--vz-ink-muted);
  --vz-board-attach-icon-fg: var(--vz-primary);
}
/* ========== viewer-theme.css — 갤러리 레이어 객체 토큰 end ========== */

/* ========== viewer-theme.css — 에디터 캔버스만 고정 다크 모듈 UI (2026-06-01, 시뮬은 뷰어 테마) ========== */
html[data-vz-editor-ui="1"] #canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget,
#canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget--editor-module-dark {
  color-scheme: dark;
  --vz-ink: #f8fafc;
  --vz-primary: #38bdf8;
  --vz-accent: #fbbf24;
  --vz-gradient: linear-gradient(135deg, #2563eb, #1a56a8);
  --vz-gallery-font-title: 0.9rem;
  --vz-gallery-font-sub: 0.85rem;
  --vz-gallery-font-card: 0.85rem;
  --vz-gallery-font-badge: 0.72rem;
  --vz-gallery-font-page: 0.85rem;
  --vz-gallery-font-stack: 0.85rem;
  --vz-gallery-head-icon-size: 1.75rem;
  --vz-gallery-head-btn-size: 1.875rem;
  --vz-gallery-layer-bg: #0f172a;
  --vz-gallery-layer-bg-gradient: linear-gradient(160deg, #0c1222 0%, #111827 45%, #0f172a 100%);
  --vz-gallery-layer-border: rgba(148, 163, 184, 0.12);
  --vz-gallery-layer-head-bg: linear-gradient(90deg, rgba(14, 165, 233, 0.18) 0%, transparent 100%);
  --vz-gallery-layer-head-border: rgba(148, 163, 184, 0.12);
  --vz-gallery-layer-icon-bg: rgba(56, 189, 248, 0.2);
  --vz-gallery-layer-icon-fg: #7dd3fc;
  --vz-gallery-layer-title-fg: #f8fafc;
  --vz-gallery-layer-muted-fg: #94a3b8;
  --vz-gallery-layer-btn-bg: rgba(255, 255, 255, 0.08);
  --vz-gallery-layer-btn-fg: #bae6fd;
  --vz-gallery-layer-btn-hover-bg: rgba(56, 189, 248, 0.35);
  --vz-gallery-layer-btn-hover-fg: #fff;
  --vz-gallery-layer-focus: #38bdf8;
  --vz-gallery-layer-card-bg: rgba(30, 41, 59, 0.65);
  --vz-gallery-layer-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  --vz-gallery-layer-card-shadow-hover: 0 6px 16px rgba(14, 165, 233, 0.22);
  --vz-gallery-layer-card-media-bg: #1e293b;
  --vz-gallery-layer-card-shade: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.75) 100%);
  --vz-gallery-layer-card-title-bg: rgba(15, 23, 42, 0.55);
  --vz-gallery-layer-card-title-fg: #e2e8f0;
  --vz-gallery-layer-count-bg: rgba(15, 23, 42, 0.72);
  --vz-gallery-layer-count-fg: #f8fafc;
  --vz-gallery-layer-photo-bg: #1e293b;
  --vz-gallery-layer-photo-shadow-hover: 0 4px 12px rgba(14, 165, 233, 0.25);
  --vz-gallery-layer-photo-idx-bg: rgba(15, 23, 42, 0.7);
  --vz-gallery-layer-widget-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
  --vz-gallery-layer-widget-border: rgba(56, 189, 248, 0.45);
  --vz-gallery-layer-widget-icon-fg: #38bdf8;
  --vz-gallery-layer-widget-title-fg: #f8fafc;
  --vz-gallery-layer-widget-hint-fg: #64748b;
  --vz-gallery-layer-loading-fg: #38bdf8;
  --vz-gallery-layer-empty-icon-bg: rgba(56, 189, 248, 0.12);
  --vz-gallery-layer-empty-icon-fg: #38bdf8;
  --vz-gallery-layer-scroll-size: 6px;
  --vz-gallery-layer-scroll-track: rgba(255, 255, 255, 0.04);
  --vz-gallery-layer-scroll-thumb: rgba(148, 163, 184, 0.38);
  --vz-gallery-layer-scroll-thumb-hover: rgba(56, 189, 248, 0.58);
}
html[data-vz-editor-ui="1"] #canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget .vz-module-layer-widget__link,
#canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget--editor-module-dark .vz-module-layer-widget__link { color: #38bdf8; }
html[data-vz-editor-ui="1"] #canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget .vz-module-layer-widget__hint--guide,
#canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget--editor-module-dark .vz-module-layer-widget__hint--guide { color: #fbbf24; }
html[data-vz-editor-ui="1"] #canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget .vz-module-layer-widget__scope,
#canvas-interactive-zone [id^="canvas-obj-"].vz-module-layer-widget--editor-module-dark .vz-module-layer-widget__scope { color: #a5b4fc; }
/* 2026-06-03: 에디터 F9 시뮬·보관소 미리보기 — 게시판·갤러리 뷰어 테마 미적용(캔버스와 동일 고정 다크) */
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-list,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-detail,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-preview,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-preview,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-slide,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-list,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-detail,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-detail-list,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-list,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-detail,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-preview,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-preview,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-slide,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-list,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-detail,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-detail-list,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-list .vz-board-layer-panel,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-detail .vz-board-layer-panel,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-preview .vz-board-layer-panel,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-list .vz-gallery-layer-panel,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-detail .vz-gallery-layer-panel,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-preview .vz-gallery-layer-panel,
#preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-slide .vz-gallery-layer-panel,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-list .vz-board-layer-panel,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-detail .vz-board-layer-panel,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--board-preview .vz-board-layer-panel,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-list .vz-gallery-layer-panel,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-detail .vz-gallery-layer-panel,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-preview .vz-gallery-layer-panel,
#library-preview-modal [id^="preview-obj-"].vz-module-layer-widget--gallery-slide .vz-gallery-layer-panel {
  color-scheme: dark;
  --vz-ink: #f8fafc;
  --vz-primary: #38bdf8;
  --vz-accent: #fbbf24;
  --vz-gallery-font-title: 0.9rem;
  --vz-gallery-font-sub: 0.85rem;
  --vz-gallery-font-card: 0.85rem;
  --vz-gallery-font-badge: 0.72rem;
  --vz-gallery-font-page: 0.85rem;
  --vz-gallery-font-stack: 0.85rem;
  --vz-gallery-head-icon-size: 1.75rem;
  --vz-gallery-head-btn-size: 1.875rem;
  --vz-gallery-head-pad-y: 8px;
  --vz-gallery-head-pad-x: 10px;
  --vz-gallery-layer-bg: #0f172a;
  --vz-gallery-layer-bg-gradient: linear-gradient(160deg, #0c1222 0%, #111827 45%, #0f172a 100%);
  --vz-gallery-layer-body-bg: #0f172a;
  --vz-gallery-layer-border: rgba(148, 163, 184, 0.12);
  --vz-gallery-layer-head-bg: linear-gradient(90deg, rgba(14, 165, 233, 0.18) 0%, transparent 100%);
  --vz-gallery-layer-head-border: rgba(148, 163, 184, 0.12);
  --vz-gallery-layer-icon-bg: rgba(56, 189, 248, 0.2);
  --vz-gallery-layer-icon-fg: #7dd3fc;
  --vz-gallery-layer-title-fg: #f8fafc;
  --vz-gallery-layer-muted-fg: #94a3b8;
  --vz-gallery-layer-btn-bg: rgba(255, 255, 255, 0.08);
  --vz-gallery-layer-btn-fg: #bae6fd;
  --vz-gallery-layer-btn-hover-bg: rgba(56, 189, 248, 0.35);
  --vz-gallery-layer-btn-hover-fg: #fff;
  --vz-gallery-layer-focus: #38bdf8;
  --vz-gallery-layer-card-bg: rgba(30, 41, 59, 0.65);
  --vz-gallery-layer-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  --vz-gallery-layer-card-shadow-hover: 0 6px 16px rgba(14, 165, 233, 0.22);
  --vz-gallery-layer-card-media-bg: #1e293b;
  --vz-gallery-layer-card-shade: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.75) 100%);
  --vz-gallery-layer-card-title-bg: rgba(15, 23, 42, 0.55);
  --vz-gallery-layer-card-title-fg: #e2e8f0;
  --vz-gallery-layer-count-bg: rgba(15, 23, 42, 0.72);
  --vz-gallery-layer-count-fg: #f8fafc;
  --vz-gallery-layer-photo-bg: #1e293b;
  --vz-gallery-layer-photo-shadow-hover: 0 4px 12px rgba(14, 165, 233, 0.25);
  --vz-gallery-layer-photo-idx-bg: rgba(15, 23, 42, 0.7);
  --vz-gallery-layer-widget-bg: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.88));
  --vz-gallery-layer-widget-border: rgba(56, 189, 248, 0.45);
  --vz-gallery-layer-widget-icon-fg: #38bdf8;
  --vz-gallery-layer-widget-title-fg: #f8fafc;
  --vz-gallery-layer-widget-hint-fg: #64748b;
  --vz-gallery-layer-loading-fg: #38bdf8;
  --vz-gallery-layer-empty-icon-bg: rgba(56, 189, 248, 0.12);
  --vz-gallery-layer-empty-icon-fg: #38bdf8;
  --vz-gallery-layer-scroll-size: 6px;
  --vz-gallery-layer-scroll-track: rgba(255, 255, 255, 0.04);
  --vz-gallery-layer-scroll-thumb: rgba(148, 163, 184, 0.38);
  --vz-gallery-layer-scroll-thumb-hover: rgba(56, 189, 248, 0.58);
}
/* ========== viewer-theme.css — 에디터(캔버스·시뮬) 고정 다크 모듈 UI end ========== */

/* ========== viewer-theme.css end ========== */