/* Shared image viewer (see image-viewer.js). */
html.kcv-open { overflow: hidden; }
.kc-viewer { width: min(96vw, 1600px); height: min(92vh, 1100px); max-width: none; max-height: none; padding: 0; border: 1px solid #22324a; border-radius: 12px; background: #0b111c; color: #fff; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 25px 80px #0009; }
.kc-viewer[open] { display: flex; }
.kc-viewer::backdrop { background: rgb(2 6 12 / 0.86); }
.kcv-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px 14px 24px; border-bottom: 1px solid #22324a; }
.kcv-title { margin: 0; font: 600 14px/1.4 "Inter", "Noto Sans TC", system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcv-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.kcv-close:hover { background: #1b2638; }
.kcv-tools { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 24px; border-bottom: 1px solid #22324a; font: 500 13px/1 "Inter", "Noto Sans TC", system-ui, sans-serif; }
.kcv-tools button { min-width: 36px; height: 32px; padding: 0 12px; border: 1px solid #33496a; border-radius: 6px; background: #13203a; color: #fff; font: inherit; cursor: pointer; }
.kcv-tools button:hover { background: #1c2d4d; }
.kcv-level { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.kcv-count { color: #c6d2e4; font-variant-numeric: tabular-nums; }
.kcv-nav { position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 64px; border: 0; border-radius: 10px; background: rgb(19 32 58 / 0.85); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }
.kcv-nav:hover { background: #1c2d4d; }
.kcv-prev { left: 12px; }
.kcv-next { right: 12px; }
.kcv-hint { margin-left: auto; color: #8a9bb4; font-size: 12px; white-space: nowrap; }
.kcv-body { position: relative; flex: 1; min-height: 0; display: flex; }
.kcv-stage { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: safe center; padding: 16px; overscroll-behavior: contain; }
.kcv-stage img { display: block; max-width: none; max-height: none; border-radius: 4px; }
@media (max-width: 760px) {
  .kc-viewer { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .kcv-bar { padding: 10px 10px 10px 16px; }
  .kcv-tools { padding: 8px 16px; }
  .kcv-hint { display: none; }
}