/* ============================================================
   viewer.css · L4 全屏查看器
   色值一律引用 tokens.css
   ============================================================ */

.cmm-viewer {
  position:fixed;
  inset:0;
  z-index:var(--z-viewer);
  background:rgba(36,64,95,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  /* 入场动画 */
  animation:cmm-viewer-in var(--d-base) var(--ease-out) both;
}

@keyframes cmm-viewer-in {
  0%   { opacity:0; }
  100% { opacity:1; }
}

/* ── 图片舞台 ── */
.cmm-viewer__stage {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cmm-viewer__img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  /* JS 拖拽/缩放时用 transform 控制 */
  transition:transform var(--d-fast) var(--ease-out);
  will-change:transform;
  user-select:none;
  -webkit-user-drag:none;
}
.cmm-viewer__img.is-dragging { transition:none; }

/* ── 页码 + 上传者角标（同区域排布，D-03） ── */
.cmm-viewer__meta {
  position:absolute;
  top:calc(var(--safe-t) + var(--sp-4));
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  pointer-events:none;
  color:rgba(255,255,255,.9);
  font-size:14px;
}

.cmm-viewer__page { font-weight:600; }
.cmm-viewer__badge { font-size:12px; color:rgba(255,255,255,.7); }

/* ── 关闭按钮 ── */
.cmm-viewer__close {
  position:absolute;
  top:calc(var(--safe-t) + var(--sp-2));
  right:var(--sp-2);
  z-index:2;
  color:rgba(255,255,255,.9);
}
.cmm-viewer__close svg { width:24px; height:24px; }

/* ── 左右翻页提示（隐式箭头，非按钮） ── */
.cmm-viewer__hint {
  position:absolute;
  bottom:calc(var(--safe-b) + var(--sp-4));
  left:0;
  right:0;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.6);
  pointer-events:none;
}

/* ── 缩放指示 ── */
.cmm-viewer__zoom {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-chip);
  background:rgba(36,64,95,.85);
  color:rgba(255,255,255,.9);
  font-size:14px;
  pointer-events:none;
  opacity:0;
  transition:opacity var(--d-fast) var(--ease-out);
}
.cmm-viewer__zoom.is-visible { opacity:1; }

/* ── 退出动画 ── */
.cmm-viewer.is-leaving {
  animation:cmm-viewer-out var(--d-fast) var(--ease-out) both;
}

@keyframes cmm-viewer-out {
  0%   { opacity:1; }
  100% { opacity:0; }
}