/* ============================================================
   素材详情专属（docs/14 §6）
   —— 左图右文：主图区最大 70vh，元信息用 mono 键值对
   —— 棋盘格同画廊：透明底一眼可见；壁纸竖版 9:16
   —— 收藏 / 复制链接是页面级两行 JS，存 localStorage（NaiwaFav 在共享层）
   ============================================================ */
.mhead{ padding:calc(var(--nav-h) + clamp(40px,6vh,72px)) 0 clamp(40px,6vh,72px); }
.mdetail{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,3.4vw,48px);
  align-items:start; margin-top:var(--sp-5);
}
/* 主图区：纸白衬底（docs/23 §3.1 主体衬纸白）+ 3px 墨框 + sd-3。
   图片一律保自然比例居中（width/height 属性由构建期写实，CLS 归零），
   横竖混排也不用 aspect-ratio + cover 去裁（docs/19 §10.3 的教训）。 */
.mstage{
  margin:0; position:relative; border-radius:var(--r-lg);
  background:var(--paper); border:var(--bw) solid var(--ink); box-shadow:var(--sd-3);
  overflow:hidden; cursor:zoom-in;
}
.mstage img{ display:block; margin-inline:auto; width:auto; height:auto; max-width:100%; max-height:70vh; }
/* 透明底：棋盘格是共享类 .chk（构建期随 is-alpha chk 一起加上） */
.mstage .zoom{
  position:absolute; right:10px; bottom:10px;
  font-family:var(--mono); font-size:var(--fs-xs); font-weight:700;
  background:var(--ink); color:var(--yellow);
  border:2px solid var(--ink); border-radius:var(--r-pill);
  padding:.4em .8em; pointer-events:none;
}

/* 右栏 */
.mpanel h1{ font-size:var(--fs-2xl); letter-spacing:0; margin:.1em 0 0; }
.mtags{ display:flex; flex-wrap:wrap; gap:.45em; margin-top:var(--sp-5); }
.mtags .chip{ cursor:pointer; text-decoration:none; }
.mmeta{ margin-top:var(--sp-6); display:grid; gap:0; }
.mmeta > div{
  display:grid; grid-template-columns:4.5em 1fr; gap:var(--sp-4);
  padding:.72em 0; border-bottom:2px solid var(--ink); align-items:baseline;
}
.mmeta > div:last-child{ border-bottom:0; }
.mmeta dt{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
.mmeta dd{ margin:0; font-size:var(--fs-sm); color:var(--ink); font-weight:600; }
.mactions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:var(--sp-6); }
.mactions .mfav svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; }
.mactions .mfav.is-on svg{ fill:currentColor; }
.mmsg{ margin:var(--sp-3) 0 0; font-size:var(--fs-xs); color:var(--text-2); min-height:1.6em; }
/* 「点一下」计数的落位（组件本身在共享层 .laugh-*） */
.mlaugh-w{ margin-top:var(--sp-5); }

/* 上一张 / 下一张 */
.mnav{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  margin-top:clamp(28px,3.4vw,44px); padding-top:var(--sp-5);
  border-top:3px solid var(--ink);
}
.mnav-a{ display:flex; flex-direction:column; gap:.2em; max-width:48%; }
.mnav-a.r{ text-align:right; margin-left:auto; }
.mnav-a span{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
.mnav-a b{ font-size:var(--fs-sm); font-weight:800; letter-spacing:0; }
.mnav-a:hover b{ text-decoration:underline; text-underline-offset:.28em; }

/* 相关推荐 */
.meme-rel-grid{ --col:170px; margin-top:clamp(24px,2.6vw,36px); }
.meme-rel-card{ text-decoration:none; }
.meme-rel-card .rel-img{ display:block; background:var(--paper); }
.meme-rel-card .rel-img img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.meme-rel-card b{ display:block; padding:.7rem .8rem .85rem; font-size:var(--fs-sm); letter-spacing:0; font-weight:800; }
.meme-rel-card:hover b{ text-decoration:underline; text-underline-offset:.28em; }

@media (max-width:860px){
  .mdetail{ grid-template-columns:1fr; }
  .mstage img{ max-height:56vh; }
}