/*
 * 照片灯箱（2026-10-08）
 * 用户原话（网友反馈）：「我上传照片，每次点击后 自动跳转到另一个单独网页打开放大图片，
 *   没有下一章按钮，帮忙优化一下，然后不跳转其他新窗口，就在一个窗口可以看见所有图片」
 *
 * 问题根因：相册原来是 `<a class="dy-photo" href="..." target="_blank">` ——
 *   点一下就是**打开图片文件本身**，浏览器进了一个只有一张图的空白页，
 *   既不知道这是第几张、也回不去原帖，多图更是完全没法翻。
 *
 * 现在：点任意一张 → 当前窗口内浮一层看图（lightbox），
 *   ← → 键 / 两侧按钮翻页，底部缩略图条直接跳，
 *   点背景或按 Esc 关闭，关闭后**停在原来那张图的网格位置**（不跳页、不失焦）。
 *   单图时也走同一套（没有翻页按钮，但能放大、能 Esc 关）。
 *
 * 焦点与滚动：打开时记住来源元素，关闭后 focus 回去；body 加 overflow:hidden 挡背景滚动。
 * 无障碍：role=dialog + aria-modal，点图时把焦点移到关闭按钮，Esc 关闭。
 */

/* ⚠️ 2026-10-08：原来是 .94，截图实测背景页面（导航栏字、卡片文字）仍清晰透出来，
   看照片时分心 —— 提到 .975：还能看出是浮层，但底下的字不会再抢眼。 */
.dy-lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 14, 20, .975);
  display: flex;
  flex-direction: column;
  /* 手机上浏览器地址栏会伸缩，用 dvh 而不是 100vh，图片区才不会被压扁 */
  height: 100dvh;
  animation: dy-lb-in .16s ease-out;
}
.dy-lb[hidden] { display: none; }
@keyframes dy-lb-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 顶栏：计数 + 关闭 ---- */
.dy-lb-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
}
.dy-lb-count { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.dy-lb-hint {
  flex: 1;
  text-align: center;
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
}
@media (max-width: 700px) { .dy-lb-hint { display: none; } }
/* ⚠️ 2026-10-10：原来 34px / 19px 字，用户反馈「叉子太小」→ 加大到 44px / 26px。 */
.dy-lb-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.dy-lb-close:hover { background: rgba(255, 255, 255, .26); }
.dy-lb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- 图片区 ---- */
/* ⚠️ 2026-10-10 用户反馈：「点击完照片 左下角的图 没有在照片正下方，
   右上角的叉子和左右翻页箭头 太小太远」。

   病根：`.dy-lb-stage` 是 `flex:1`（占满剩余高度），而缩略图条 `.dy-lb-strip`
   原来是它的**兄弟节点** → strip 被挤到屏幕最底部，于是缩略图飘在左下角、
   跟照片隔了一整块黑区。箭头同理 —— `position:absolute; left:0/right:0`
   贴在 stage 边缘，而 stage 横向占满视口，所以箭头离照片（在中间）很远。

   修法：新增 `.dy-lb-fig` 包裹层，把「图片 + 缩略图条」绑成一个整体居中，
        箭头也移进 fig —— 于是箭头贴在**照片边缘**、缩略图在**照片正下方**。 */
.dy-lb-stage {
  position: relative;
  flex: 1;
  min-height: 0;          /* flex 子项要能缩到 0，否则图片会把缩略图条顶出屏幕 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;              /* 图与缩略图条之间的小间距 */
  padding: 10px 8px;
  box-sizing: border-box;
}

/* 包裹层：宽度自适应图片宽度，箭头以它为定位基准 */
.dy-lb-fig {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  /* ⚠️ 必须显式收缩：flex 子项默认 min-height:auto，
     不加这行图片会把 fig 撑破、缩略图条又被顶出屏幕。 */
  min-height: 0;
  /* ⚠️ 2026-10-10 实测：只写 max-height:100% 时 fig 会被拉到 742px
     （而 img 只有 558px），缩略图条被推到照片下方 104px 处 ——
     看着还是"离照片很远"。原因是 fig 作为 stage 的 flex 子项，
     主轴尺寸按内容算但 img 有 max-height 上限，两者对不上时 fig 留了空。
     flex:0 0 auto = 不许拉伸也不许压缩，fig 高度严格等于图片高度
     → 缩略图条就真的贴在照片正下方（gap 12px）。 */
  flex: 0 0 auto;
}

/* ⚠️ 2026-10-08 用户反馈：「照片打开之后直接最大化，不利于观看，不需要全屏稍微放大一点就可以了」
   原来写的是 max-width/height:100% —— 那等于「有多大撑多大」，竖图直接顶满整屏，
   照片边缘贴着上下框，看起来像在看一张被拉满的壁纸而不是在"看照片"。

   改成**居中的大图卡片**：图片只占视口的一小块，四周留出深色余量。
   口径（用户说"稍微放大一点"，即比缩略图大不少、但明确不满屏）：
     · 桌面：最高 62vh、最宽 760px
     · 窄屏：最高 52dvh、最宽 92%（手机上本来就窄，再压就太小了）
   ⚠️ 宽图也必须留余量：1702×1276 这种横图不受高度限制，
     之前 max-width 1080px 时宽图占宽 75%、占高也到 85%，等于还是"铺满"。
     所以宽上限压到 760px（横图高度随之降到 570px / 784px ≈ 73%）。
   object-fit:contain 保留 —— 横图竖图都能看全，且**永远不会被裁**。 */
.dy-lb-stage img {
  max-width: min(100%, 760px);
  /* 🔴 2026-10-10 线上实测踩到的坑：**这里不能用 `min(100%, 62vh)`**。
     `100%` 是相对 fig 的高度，而 fig 的高度正是由这张图决定的（循环依赖）。
     浏览器在算「内在尺寸」时（图片刚拿到 src、还没 decode 完）
     会把百分比当成 none → 上限失效 → img 按**原始像素高**撑开 fig
     （3567×3063 那张实测 fig 撑到 816px），缩略图条被顶到照片下方 141px。
     本地那张图 decode 完就看不出问题（fig=570、间距 18px），线上慢网必现。
     改成纯视口单位：没有百分比 → 没有循环依赖，任何时刻都成立。
     （横向的 min(100%, 760px) 可以留：宽度由 stage 横向 flex 决定，不循环。）
     减 170px 是给顶栏(46) + 缩略图条(62) + 间距/内边距留的位置，
     否则在很矮的窗口里「图 + 缩略图条」会超出 stage 被裁掉。 */
  max-height: min(62vh, calc(100dvh - 170px));
  object-fit: contain;   /* 关键：contain 才不裁图，横图竖图都能看全 */
  display: block;
  border-radius: 6px;
  box-shadow: 0 10px 48px rgba(0, 0, 0, .72);
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 700px) {
  /* 用 dvh 而不是 vh：手机地址栏伸缩时 vh 会算错高度。
     同样不能带 100%（见上面的循环依赖说明）。 */
  .dy-lb-stage img { max-width: 92%; max-height: min(52dvh, calc(100dvh - 170px)); }
}

/* ---- 翻页按钮：贴在**照片边缘**，不再贴视口边缘 ---- */
/* ⚠️ 2026-10-10：原来是 `left:0/right:0`，而定位基准是 `.dy-lb-stage`
   （横向占满视口）→ 箭头离中间的照片非常远，用户反馈「太小太远」。
   现在移到 `.dy-lb-fig` 内（宽度=照片宽度）→ 箭头就在照片左右两侧。
   同时加大热区与字号：桌面 52px / 窄屏 64px。 */
.dy-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 68px;
  border: 0;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s;
}
.dy-lb-nav:hover { background: rgba(255, 255, 255, .24); }
.dy-lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.dy-lb-nav[hidden] { display: none; }
/* ⚠️ 2026-10-10：原来写 left:-14px，箭头 52px 宽 → 有 38px 压在照片上，
   挡住画面。照片左右两侧本来就有大片空余（照片最大 760px，视口 1440px），
   改成完全落在照片外侧、留 12px 缝：left:-64px（= -(52+12)）。 */
.dy-lb-prev { left: -64px; border-radius: 10px; }
.dy-lb-next { right: -64px; border-radius: 10px; }
/* ⚠️ 视口不够宽时（照片几乎占满），箭头突出到 fig 外会被裁掉
   → 760px 以下改成压在照片内侧（这时照片已接近满屏，压着反而不出框）。 */
@media (max-width: 900px) {
  .dy-lb-nav { width: 60px; height: 76px; font-size: 38px; }
  .dy-lb-prev { left: 6px; }
  .dy-lb-next { right: 6px; }
}

/* ---- 底部缩略图条：紧贴在**照片正下方** ---- */
/* ⚠️ 2026-10-10：原来是 `.dy-lb-stage` 的兄弟节点 + `flex-shrink:0`，
   被 `flex:1` 的 stage 挤到屏幕最底部 → 缩略图飘在左下角、离照片很远。
   现在它是 `.dy-lb-stage` 的 flex 子项（stage 改成 column + justify-content:center），
   紧跟在 `.dy-lb-fig` 下面 → 就在照片正下方。
   `width:max-content` + `max-width:100%`：条本身只占内容宽（与照片同宽），
   不再铺满整行；图多时横向滚动。 */
.dy-lb-strip {
  flex-shrink: 0;
  width: max-content;
  max-width: 100%;
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  overflow-x: auto;
  scrollbar-width: thin;
}
.dy-lb-strip::-webkit-scrollbar { height: 5px; }
.dy-lb-strip::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 3px; }
.dy-lb-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s, border-color .15s;
}
.dy-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dy-lb-thumb:hover { opacity: .85; }
.dy-lb-thumb.on { opacity: 1; border-color: #fff; }
.dy-lb-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ============================================================
   相册缩略图从 <a> 改成 <button>（灯箱）之后的样式重置
   ------------------------------------------------------------
   原来 .dy-photo 是 <a class="dy-photo">，换成 <button> 后浏览器会加：
     · 默认边框（灰边，破坏拍立得网格的干净感）
     · 默认背景色（灰块）
     · 默认内边距（格子被撑开）
     · font-size 不继承（img 本身没事，但 aria-label 无影响）
   所以必须在这里全部抹掉。button 是 inline-block，
   而 .dy-photo 原规则里有 display:block —— 同优先级下按顺序，以这条为准。
   ============================================================ */
button.dy-photo {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
button.dy-photo:focus-visible {
  outline: 2px solid var(--blue-d);
  outline-offset: 2px;
}

/* 单图时缩略图条没有意义 */
.dy-lb[data-single="1"] .dy-lb-strip { display: none; }

/* 打开时锁住背景滚动（否则手机上滑动会带着底层页面一起动） */
body.dy-lb-open { overflow: hidden; }