/* =========================================================
   作品页「车辆详情」层（2026-09-17）
   坤哥要求：点作品页某张车图 → 弹出该车型详情。内容取自普象网
   《GST 16寸电动自行车设计》https://www.puxiang.com/galleries/95f4ef8cc52ceb5676732460dfcaf3ca
   样式对齐普象那版：白底、居中单栏、堆叠大图、右侧悬浮操作栏。

   ⚠️ 2026-09-17 二次修改（坤哥）：**不要像新开了一个页面** →
   改成 news.html#news-detail 那种形式：中间一条居中白面板（max 1280px），
   两侧留白 + 半透明黑遮罩，**背景仍能看到作品列表页**。
   即：.vd(滚动容器/透明) > .vd-backdrop(黑遮罩) + .vd-shell(白面板)。
   素材：assets/img/vdetail/<key>/<nn>.(jpg|webp)，16:9
   ⚠️ z-index 必须高于 .wg（140）与 .sidebar（100）
   ========================================================= */

.vd{
  /* 坤哥 2026-09-24：面板左右留白各 5vw（原为 --nav-w≈13vw 太窄），
     内容列随之放大 → 图片同步自适应放大。--vd-gap 供 .vd-rail 复用。 */
  --vd-gap:max(5vw,12px);
  /* 坤哥 2026-09-24（2K@150% 反馈文字贴边）：图片保持吃满面板，文字块（头部/简介/注释/弹幕条）用 --vd-inset 内缩，顶栏与头部对齐同一条线 */
  --vd-inset:clamp(20px,2.6vw,48px);
  position:fixed;inset:0;z-index:150;display:none;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--vd-gap);
  background:transparent;color:#111;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
.vd.open{display:block}

/* 半透明黑遮罩：背景能透出作品列表页 */
.vd-backdrop{
  position:fixed;inset:0;z-index:0;background:rgba(0,0,0,.72);
}
.vd.open .vd-backdrop{animation:vdFade .34s ease both}
@keyframes vdFade{from{opacity:0}to{opacity:1}}

/* 居中白面板（对应新闻详情的 .news-overlay-panel）
   ⚠️ 用 animation 而非 transition：元素从 display:none 变 block 时 transition 不触发。 */
.vd-shell{
  position:relative;z-index:1;width:100%;min-height:100%;margin:0 auto;
  background:#fff;
}
.vd.open .vd-shell{animation:vdRise .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes vdRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 顶栏：返回 + 标题 + 分享（吸在白面板顶部） */
.vd-bar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:14px;
  height:56px;padding:0 max(var(--vd-inset),16px);
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #eee;
}
.vd-back{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 15px;border:1px solid #e3e3e3;border-radius:999px;
  background:#fff;color:#111;font-size:13px;letter-spacing:.5px;cursor:pointer;transition:.2s;
}
.vd-back:hover{border-color:#e60012;color:#e60012}
.vd-back i{font-style:normal;font-size:15px;line-height:1}
.vd-bar-t{
  flex:1;min-width:0;text-align:center;font-size:13px;color:#666;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 坤哥 2026-09-19：原「分享」改「关闭」——hover 时整体变红、✕ 放大强调 */
.vd-close{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 13px 0 16px;border:1px solid #e3e3e3;border-radius:999px;
  background:#fff;color:#111;font-size:13px;letter-spacing:.5px;cursor:pointer;transition:.2s;
}
.vd-close b{font-weight:400;font-size:16px;line-height:1;transition:transform .2s}
.vd-close:hover{border-color:#e60012;color:#e60012}
.vd-close:hover b{transform:scale(1.15)}

/* 内容单栏
   坤哥 2026-09-24：去掉 84% 内缩，内容吃满面板、上限 1600（=素材原生宽，不糊）：
   面板已左右各留 5vw，内容再打 84 折会变成 13% 留白 → 与「左右保留 5%」不符。 */
.vd-doc{
  width:100%;max-width:1600px;margin:0 auto;
  padding:clamp(26px,4vh,52px) 0 clamp(60px,9vh,120px);
}

/* ---- 头部：标题 + 标签 + 数据；右侧作者卡 ---- */
.vd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:0 var(--vd-inset)}
.vd-head-l{min-width:0;flex:1}
.vd-title{
  font-size:clamp(20px,1.9vw,30px);font-weight:800;letter-spacing:.5px;
  line-height:1.35;margin:0;color:#111;
}
.vd-badges{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.vd-badge{
  display:inline-block;height:22px;line-height:22px;padding:0 9px;border-radius:4px;
  background:#e60012;color:#fff;font-size:12px;letter-spacing:1px;
}
.vd-cat{
  display:inline-block;height:22px;line-height:22px;padding:0 9px;border-radius:4px;
  background:#f1f2f4;color:#666;font-size:12px;letter-spacing:1px;
}
.vd-tags{margin-top:11px;font-size:12px;line-height:1.9;color:#8a8a8a;letter-spacing:.5px}
.vd-tags span + span::before{content:"·";margin:0 7px;color:#c8c8c8}
.vd-stats{margin-top:11px;font-size:12px;color:#a0a0a0;letter-spacing:.5px}
.vd-stats span + span::before{content:"|";margin:0 8px;color:#dcdcdc}

.vd-author{flex:none;display:flex;align-items:center;gap:11px}
.vd-ava{
  width:46px;height:46px;border-radius:50%;flex:none;overflow:hidden;
  background:#e60012;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;letter-spacing:.5px;
}
.vd-author-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.vd-author-tx b{font-size:14px;font-weight:700;color:#111;white-space:nowrap}
.vd-author-tx span{font-size:12px;color:#9a9a9a;white-space:nowrap}
.vd-author-btns{display:flex;gap:8px;margin-left:6px}
.vd-btn{
  height:32px;padding:0 15px;border-radius:6px;font-size:13px;cursor:pointer;
  border:1px solid transparent;transition:.2s;white-space:nowrap;
}
.vd-btn.solid{background:#e60012;color:#fff}
.vd-btn.solid:hover{background:#b0000e}
.vd-btn.ghost{background:#fff;border-color:#ddd;color:#444}
.vd-btn.ghost:hover{border-color:#e60012;color:#e60012}

/* ---- 引言（普象正文开头的三行） ---- */
.vd-intro{margin:clamp(38px,6vh,72px) 0 clamp(30px,5vh,56px);padding:0 var(--vd-inset);text-align:center}
.vd-intro p{margin:0;font-size:clamp(13px,1.05vw,16px);line-height:2.1;color:#333;letter-spacing:.6px}
.vd-intro p + p{margin-top:4px}
.vd-intro .en{color:#111;font-weight:600}
.vd-intro .cn{color:#666}

/* ---- 图组：单栏堆叠，间距小、直角，同普象 ----
   img 带 width/height 属性 → 浏览器自己算出宽高比，图没到时也占住位置，滚动条不跳。 */
.vd-figs{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px)}
.vd-figs figure{
  margin:0;width:100%;background:#0d0d0d;border-radius:2px;overflow:hidden;line-height:0;
}
.vd-figs img{display:block;width:100%;height:auto}

.vd-note{
  margin:clamp(34px,5vh,64px) 0 0;padding:22px var(--vd-inset) 0;border-top:1px solid #eee;
  font-size:12px;line-height:2;color:#9a9a9a;text-align:center;letter-spacing:.4px;
}

/* ---- 弹幕（2026-09-19 坤哥：无评论功能 → 普象式弹幕） ----
   ⚠️ 2026-09-21 修复：原 absolute inset:0 盖满整个图组列（几千px高），
   弹幕按总高均分轨道 → 大多飘在视口外，看起来像「不显示/发了没出来」。
   改为 sticky 吸顶视窗带：贴顶栏下方，随滚动始终浮在可视图区，
   发的弹幕立刻在眼前飞过（移动端同理）。 */
.vd-figs{position:relative}
.vd-dm{
  position:sticky;top:56px;z-index:3;order:-1;flex:none;width:100%;
  height:clamp(200px,36vh,340px);
  margin-bottom:calc(-1 * (clamp(200px,36vh,340px) + clamp(8px,1vw,14px)));
  overflow:hidden;pointer-events:none;
}
.vd-dm.off{display:none}
.vd-dm i{
  position:absolute;left:100%;font-style:normal;white-space:nowrap;line-height:1;
  padding:7px 12px;border-radius:999px;background:rgba(17,17,17,.55);color:#fff;
  font-size:13px;letter-spacing:.5px;will-change:transform;
  animation:dmFly linear forwards;
}
@keyframes dmFly{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 130vw))}}

/* 弹幕输入行（图组下方，与内容列同宽） */
.vd-dm-bar{
  display:flex;gap:10px;margin-top:clamp(22px,3vh,36px);padding:0 var(--vd-inset);
}
.vd-dm-in{
  flex:1;min-width:0;height:42px;padding:0 16px;
  border:1px solid #e3e3e3;border-radius:999px;background:#fafafa;
  font-size:13px;color:#111;outline:none;transition:border-color .2s,background .2s;
}
.vd-dm-in::placeholder{color:#b5b5b5}
.vd-dm-in:focus{border-color:#e60012;background:#fff}
.vd-dm-send{
  flex:none;height:42px;padding:0 26px;border:0;border-radius:999px;
  background:#e60012;color:#fff;font-size:13px;letter-spacing:1px;cursor:pointer;transition:background .2s;
}
.vd-dm-send:hover{background:#b0000e}
@media(max-width:900px){
  .vd-dm i{font-size:12px;padding:6px 10px}
}

/* ---- 右侧悬浮操作栏（普象那根竖条）----
   定位：贴住白面板右侧那条缝，不压到面板上。
   缝宽 L = var(--vd-gap)（= 面板左右留白，与 .vd 共用）;
   rail 自身 46px + 间距 14px = 60px → right = L - 60。
   坤哥 2026-09-24：留白由 --nav-w 改为 --vd-gap，rail 跟着回到缝里。 */
.vd-rail{
  position:fixed;top:50%;transform:translateY(-50%);
  right:max(10px, calc(var(--vd-gap,5vw) - 60px));
  z-index:6;display:flex;flex-direction:column;gap:12px;
}
.vd-rail button{
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border:1px solid #e8e8e8;background:#fff;color:#888;transition:.2s;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.vd-rail button:hover{border-color:#e60012;color:#e60012}
.vd-rail button.on{background:#111;border-color:#111;color:#fff}
.vd-rail svg{width:17px;height:17px;display:block}
.vd-rail em{font-style:normal;font-size:10px;letter-spacing:.5px;line-height:1}

/* ---- 轻提示（分享复制链接） ---- */
.vd-toast{
  position:fixed;left:50%;bottom:clamp(86px,12vh,130px);transform:translate(-50%,10px);
  z-index:8;padding:10px 20px;border-radius:999px;background:rgba(17,17,17,.92);color:#fff;
  font-size:13px;letter-spacing:.5px;pointer-events:none;
  opacity:0;transition:opacity .24s ease,transform .24s ease;
}
.vd-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- 中窄屏：悬浮栏转底部横条，避免压到面板 ---- */
@media(max-width:1100px){
  .vd-rail{
    right:auto;left:50%;top:auto;bottom:14px;transform:translateX(-50%);
    flex-direction:row;padding:8px 10px;border-radius:999px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(0,0,0,.12);
  }
  .vd-rail button{box-shadow:none;border-color:#ececec}
  .vd-doc{padding-bottom:110px}
}

/* ---- 手机 / 窄屏 ---- */
@media(max-width:900px){
  .vd{--vd-gap:12px;--vd-inset:0px} /* 手机端文字内缩仍由 .vd-doc 的 margin 提供，避免双重缩进 */
  .vd-head{flex-direction:column-reverse;gap:18px}
  .vd-doc{width:auto;margin:0 clamp(16px,4vw,28px)}
  /* 手机端作者信息与按钮并排；空间不足时地址换行，不遮挡按钮。 */
  .vd-author{width:100%;flex-wrap:nowrap;gap:8px}
  .vd-author-tx{flex:1 1 0;min-width:0}
  .vd-author-tx span{white-space:normal;overflow-wrap:anywhere}
  .vd-author-btns{margin-left:0;flex:0 0 auto}
  .vd-bar-t{display:none}
  /* 坤哥 2026-09-21：标题隐藏后返回/关闭并排靠左 → 两端对齐，关闭按钮归右上角 */
  .vd-bar{justify-content:space-between}
}

/* ---- 挂了详情的车图：hover / 聚焦时给一个极轻的「车辆详情」胶囊 ----
   必要性：style.css 里所有 figure 都是 cursor:pointer（点开图集），
   而本页 16 张图里只有一部分能点开详情，不给提示用户分不清。
   文字压在照片上 → 用深色底提对比，不加描边/阴影。 */
.w-wrap figure[data-vd]{position:relative}
.w-wrap figure[data-vd]::after{
  content:"车辆详情";position:absolute;left:50%;bottom:clamp(10px,1vw,18px);
  transform:translate(-50%,6px);
  padding:6px 14px;border-radius:999px;background:rgba(17,17,17,.84);color:#fff;
  font-size:12px;letter-spacing:1px;line-height:1;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .24s ease,transform .24s ease;
}
.w-wrap figure[data-vd]:hover::after,
.w-wrap figure[data-vd]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media(hover:none){
  /* 触屏没有 hover：常显一个小角标，不然完全看不出来 */
  .w-wrap figure[data-vd]::after{
    opacity:1;transform:translate(-50%,0);bottom:10px;
    padding:5px 11px;font-size:11px;background:rgba(17,17,17,.7);
  }
}

/* Foldable / iOS viewport and home-indicator clearance. */
.vd-bar{height:calc(56px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
.vd-dm{top:calc(56px + env(safe-area-inset-top,0px))}
@media(max-width:1100px){
  .vd-rail{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .vd-doc{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
@media(pointer:coarse){.vd-back,.vd-close,.vd-btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){
  .vd.open .vd-shell,.vd.open .vd-backdrop{animation:none}
  .vd-dm{display:none}
  .vd-toast{transition:none}
}