/* =========================================================================
   viewer.css · 全屏媒体查看器（设计书 §4.5 Gallery / §7.2）
   画面区域保持暗色中性底；只有底部信息区标记归属、地点、时段。
   ========================================================================= */

.viewer {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: #1E1B18; color: #F5F1EA;
  overflow: hidden;
}
.viewer[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.viewer::backdrop { background: #1E1B18; }
.viewer :focus-visible { outline-color: var(--cheese-main); }

.viewer__top {
  display: flex; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
}
.viewer__counter { flex: 1; color: #D8D0C4; font-size: 13px; font-variant-numeric: tabular-nums; }
.viewer__btn {
  display: grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
  background: rgba(255, 255, 255, .1); color: #FFFFFF;
  font-size: 17px; line-height: 1;
}
.viewer__btn:hover { background: rgba(255, 255, 255, .2); }
.viewer__btn:disabled { opacity: .3; cursor: default; }
.viewer__btn[aria-pressed="true"] { background: var(--cheese-main); color: var(--cheese-text); border-color: var(--cheese-main); }

.viewer__stage {
  position: relative; min-height: 0;
  display: grid; place-items: center;
  overflow: hidden;
  touch-action: pan-y;
}
.viewer__frame { display: grid; place-items: center; width: 100%; height: 100%; padding: 0 8px; }
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.viewer__video { max-width: 100%; max-height: 100%; background: #000000; }
.viewer__stage.is-zoomed { overflow: auto; place-items: start; touch-action: auto; }
.viewer__stage.is-zoomed .viewer__frame { width: auto; height: auto; place-items: start; }
.viewer__stage.is-zoomed .viewer__img { max-width: none; max-height: none; width: 200vw; }
.viewer__error { padding: 24px; color: #F5F1EA; text-align: center; }

.viewer__nav {
  position: absolute; z-index: 1; top: 50%;
  transform: translateY(-50%);
  background: rgba(30, 27, 24, .62);
  border-color: rgba(255, 255, 255, .45);
  font-size: 24px;
}
.viewer__nav:hover { background: rgba(30, 27, 24, .8); }
.viewer__nav--prev { left: max(8px, env(safe-area-inset-left)); }
.viewer__nav--next { right: max(8px, env(safe-area-inset-right)); }
.viewer__stage.is-zoomed .viewer__nav { display: none; }

/* 信息区（浅色，才标记归属） */
.viewer__info {
  display: grid; gap: 10px; align-content: start;
  max-height: 44vh; overflow-y: auto;
  padding: 16px var(--gutter) calc(16px + var(--safe-bottom));
  border-radius: 20px 20px 0 0;
  background: var(--bg-page); color: var(--text-main);
}
.viewer.is-info-hidden .viewer__info { display: none; }
.viewer__title { font-size: 18px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.viewer__place { margin-top: -6px; color: var(--text-sub); font-size: 14px; }
.viewer__facts {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px;
  font-size: 14px;
}
.viewer__facts dt { color: var(--text-sub); font-weight: 700; }
.viewer__note { color: var(--text-sub); font-size: 13px; }
.viewer__caption { font-size: 14px; overflow-wrap: anywhere; }
.viewer__actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (min-width: 1024px) {
  .viewer[open] {
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .viewer__top { grid-column: 1; }
  .viewer__stage { grid-column: 1; grid-row: 2; padding-bottom: 16px; }
  .viewer__info {
    grid-column: 2; grid-row: 1 / span 2;
    max-height: none;
    padding: 24px;
    border-radius: 0;
  }
  .viewer.is-info-hidden .viewer__info { display: grid; }
  .viewer__info-toggle { display: none; }
}