/* ============================================================================
   condition.css —— 「关于品相识别」页（condition.html，2026-10-22）
   ----------------------------------------------------------------------------
   内容口径全在 HTML 里，这里只管版式。三个色只用三处：
     流通 = 绿（--green）/ 瑕疵 = 金（--gold）/ 残品 = 红（--red）
   —— 与禁限表的「禁/限/解除」同一套颜色语言，别另外发明配色。
   ========================================================================== */

/* 🔴 只设上下内边距，**左右交给 `.wrap`**（桌面 22px、手机 16px，见 brand.css / brand-touch.css）。
   原来这里写的是 `padding: 26px 0 56px` 简写 —— 它把 `.wrap` 的左右 22px
   一起覆盖成 0，手机上正文直接贴屏幕边缘（2026-10-25 店主截图：「别塞太满」）。 */
.cnd { padding-top: 26px; padding-bottom: 56px; max-width: 1020px; }

.cnd-hd h1 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--text);
}
.cnd-lead {
  margin: 0 0 22px;
  max-width: 760px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-2);
}
.cnd-lead b { color: var(--text); }

/* ── 三档：等高三块，手机单列 ─────────────────────────────────── */
.cnd-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}
.cnd-card {
  display: flex;
  flex-direction: column;
  padding: 14px 15px 12px;
  border-radius: 14px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-top: 3px solid var(--ink-4);
}
.cnd-card.nm { border-top-color: var(--green); }
.cnd-card.sp { border-top-color: var(--gold); }
.cnd-card.dmg { border-top-color: var(--red); }

.cnd-tag { display: flex; align-items: baseline; gap: 8px; }
.cnd-tag b {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 5px;
  color: var(--on-accent);
}
.cnd-card.nm .cnd-tag b { background: var(--green); }
.cnd-card.sp .cnd-tag b { background: var(--gold); }
.cnd-card.dmg .cnd-tag b { background: var(--red); color: #fff; }
.cnd-tag span { font-size: 15px; font-weight: 800; color: var(--text); }

.cnd-one {
  margin: 8px 0 4px;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--text-2);
  min-height: 44px;
}
.cnd-one b { color: var(--text); }

/* 示意图：卡面轮廓 + 磨损位置。宽高比照卡面 4:5.6 的视觉习惯，
   但这里用扁一点便于横排，图上只标"看哪里"，不做写实。 */
/* 三档卡片的图区固定高度（2026-10-22）：
   NM 换成实拍竖图之后，如果按原比例撑开，同一排三张卡片的判定要点就会一高一低。
   统一 196px 图窗 + 居中 contain：SP/DMG 的 SVG 缩到同样高，NM 的实拍居中显示，
   三张卡片的要点与价格行才能对齐。缩略图只负责"长什么样"，
   要看细节点卡片 → 弹窗 → 再点开原图。 */
.cnd-fig {
  margin: 6px 0 8px;
  height: 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cnd-fig svg { width: 100%; height: 100%; display: block; }
/* 竖版实拍塞进横排卡片：contain 会缩成一条 110px 的"邮票"（实测），
   左右各留 90px 空白，整块看着比旁边两张还空。
   改成 cover 裁成一块横向的「卡面特写」：宽度铺满、卡名与插画都在画面里 ——
   判品相看的就是闪膜、印字、白边这些细节，特写比整张小图更能说明问题。
   想看整张卡就点开弹窗（角标已经写明"实拍 5 张 ⤢"）。 */
.cnd-fig-shot {
  height: 196px;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--ink-4);
  background: #0a0a0c;
}
.cnd-fig-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
  border: 0;
  border-radius: 0;
}
.cnd-face { fill: #1b1b1e; stroke: var(--ink-4); stroke-width: 1.5; }
.cnd-band { fill: rgba(255, 224, 0, .16); }
.cnd-art { fill: rgba(255, 255, 255, .05); }
.cnd-line { fill: rgba(255, 255, 255, .12); }
.cnd-dot { fill: var(--green); }
.cnd-wear-ring { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 4; }
.cnd-wear { fill: rgba(255, 224, 0, .3); stroke: var(--gold); stroke-width: 1; }
.cnd-crease { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .85; }
.cnd-crease.deep { stroke: var(--red); stroke-width: 2; opacity: 1; }
.cnd-chip { fill: rgba(220, 60, 72, .35); stroke: var(--red); stroke-width: 1.2; }
.cnd-stain { fill: rgba(120, 120, 130, .45); stroke: #9a9aa2; stroke-width: 1; }
.cnd-lbl {
  fill: var(--text-3);
  font-size: 8.5px;
  font-family: inherit;
}

.cnd-pts {
  margin: 0 0 8px;
  padding-left: 16px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-2);
}
.cnd-pts li { margin: 1px 0; }
.cnd-pts b { color: var(--text); font-weight: 700; }

.cnd-price {
  margin: auto 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-4);
  font-size: 11.5px;
  color: var(--text-3);
}
.cnd-price b { color: var(--text); font-size: 13px; }
.cnd-price em {
  font-style: normal;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--red);
  background: rgba(220, 60, 72, .14);
  font-weight: 700;
}

/* ── 实拍对照（2026-10-22 重排：店主「看起来好累」）─────────────────
   原来的排法是「按图的高度定位」：竖图 560 高、特例 210 高 ——
   实际效果是一张背面图吃掉半屏、三张图高矮宽窄各不相同、说明居中挤在图下，
   整页的视觉节奏全被图的高度带着跑，这就是"累"的来源。

   现在改成**统一的图窗网格**：
     · 每张图一个卡片，图窗比例固定（主组 3/4 竖窗、特例组 2/1 横窗），
       图在里面 contain 居中 —— 高矮永远一致，页面节奏由格子决定，不由图决定；
     · 说明左对齐挂在图窗下面（居中的小字最费眼睛）；
     · 右下角一个 ⤢ 角标 + zoom-in 光标，明示"能点开看大图" ——
       判品相终究要看细节，缩略图负责"知道看哪里"，原图负责"看清"。
   黑边不是浪费：本页是暗色主题，图窗本来就是黑的，contain 的留白融进背景，
   比一张 560px 的巨图把版面顶开要舒服得多。 */
.cnd-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}
.cnd-shots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.cnd-shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ink-4);
  border-radius: 13px;
  background: var(--ink-2);
}
.cnd-shot a {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: #0a0a0c;
  cursor: zoom-in;
}
.cnd-shots.two .cnd-shot a { aspect-ratio: 2 / 1; }
.cnd-shot a::after {
  content: '⤢';
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  line-height: 21px;
  text-align: center;
  font-size: 11px;
  color: var(--text-2);
  background: rgba(0, 0, 0, .58);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 7px;
  pointer-events: none;
  opacity: .85;
}
.cnd-shot a:hover::after { color: var(--gold-ink); border-color: rgba(255, 224, 0, .4); }
.cnd-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cnd-shot figcaption {
  flex: 1 1 auto;
  padding: 10px 12px 12px;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-2);
  border-top: 1px solid var(--ink-4);
}
.cnd-shot figcaption b {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  color: var(--text);
}
@media (max-width: 560px) {
  .cnd-shots, .cnd-shots.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cnd-shot a { aspect-ratio: 3 / 4; }
  .cnd-shots.two .cnd-shot a { aspect-ratio: 4 / 3; }
  .cnd-shot figcaption { padding: 8px 9px 10px; font-size: 11.5px; }
  .cnd-shot figcaption b { font-size: 12px; }
}

/* 档位卡里指向实拍的那一行 */
.cnd-jump {
  margin: 2px 0 6px;
  font-size: 11.5px;
  color: var(--text-3);
}
.cnd-jump a { color: var(--gold-ink); text-decoration: none; border-bottom: 1px dashed rgba(255, 224, 0, .5); }
.cnd-jump a:hover { border-bottom-style: solid; }
/* 弹窗入口做成**按钮**（2026-10-22）：它不再是页内锚点，
   用 <a href="#…"> 会让人以为只是跳到下面某一段，点了才发现弹出窗口。 */
.cnd-jump-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--gold-ink);
  background: rgba(255, 224, 0, .07);
  border: 1px solid rgba(255, 224, 0, .32);
}
.cnd-jump-btn:hover { background: rgba(255, 224, 0, .15); }
.cnd-jump-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* 手机上这个按钮是点开弹窗的主要入口之一，28px 高太小（视口守卫把它记成了
   <40px 的小触控目标），撑到 36px —— 再高会像个主按钮，压过卡片本身。 */
@media (max-width: 560px) {
  .cnd-jump-btn { padding: 8px 16px; font-size: 12.5px; }
}

/* ── 段落 ─────────────────────────────────────────────────────── */
.cnd-sec { margin-bottom: 28px; }
.cnd-sec h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}
.cnd-sec p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--text-2);
}
.cnd-sec p b { color: var(--text); }
.cnd-note {
  padding: 10px 12px;
  border-left: 3px solid var(--ink-4);
  background: var(--ink-2);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  color: var(--text-3);
}

/* 检查表：第一列是行标题，后三列按档位着色（绿 / 金 / 红）。
   手机上横向滚动，不拆成卡片 —— 这是"对照表"，拆开会失去对齐的意义。 */
.cnd-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cnd-tbl {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 12.5px;
}
.cnd-tbl th, .cnd-tbl td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--ink-4);
  vertical-align: top;
  line-height: 1.7;
}
.cnd-tbl thead th {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-3);
}
.cnd-tbl tbody th { font-weight: 700; color: var(--text); white-space: nowrap; }
.cnd-tbl td { color: var(--text-2); }
.cnd-tbl td:first-of-type { color: var(--text-3); }
.cnd-tbl .ok { color: #6FD79B; }
.cnd-tbl .mid { color: var(--gold-ink); }
.cnd-tbl .bad { color: #FF8B96; }

.cnd-tip {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
}
.cnd-tip b { color: var(--gold-ink); }

/* ── FAQ ──────────────────────────────────────────────────────── */
.cnd-q {
  border: 1px solid var(--ink-4);
  border-radius: 10px;
  background: var(--ink-2);
  padding: 2px 14px;
  margin-bottom: 8px;
}
.cnd-q summary {
  cursor: pointer;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  list-style: none;
}
.cnd-q summary::-webkit-details-marker { display: none; }
.cnd-q summary::before {
  content: "＋";
  display: inline-block;
  width: 16px;
  color: var(--text-3);
}
.cnd-q[open] summary::before { content: "－"; color: var(--gold-ink); }
.cnd-q[open] summary { color: var(--gold-ink); }
.cnd-q p {
  margin: 0 0 12px 16px;
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--text-2);
}

.cnd-back { margin: 26px 0 0; }
.cnd-back a {
  font-size: 12.5px;
  color: var(--text-3);
  text-decoration: none;
}
.cnd-back a:hover { color: var(--gold-ink); }

/* ── 响应式 ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* 单列后卡片别挤在一起：原来 gap 10 让三档像一整块长条 */
  .cnd-tiers { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cnd-one { min-height: 0; }
  .cnd-hd h1 { font-size: 21px; }
  /* 同上：只设上下（左右由 .wrap 提供） */
  .cnd { padding-top: 18px; padding-bottom: 44px; }
  /* 实拍图在手机上单列；竖图给 420 高（宽约 236），再矮就看不清闪膜了 */
  .cnd-shots { flex-direction: column; gap: 12px; }
  .cnd-shot { width: 100%; }
  .cnd-shot img { height: 420px; max-width: 100%; }
  .cnd-shots.two .cnd-shot img { height: 240px; }
}

/* ── NM 卡片：整张可点 → 弹窗（2026-10-22）─────────────────────────
   店主：「这个窗口需要点击流通品相窗口之后在弹出来」。
   整卡可点（article 带 role=button tabindex=0，键盘 Enter/空格 同样能开），
   右上角一个角标把「能点」这件事说出来 —— 只在 hover 变色，是真找不到入口。 */
.cnd-card.nm[data-shots-open] {
  position: relative;
  cursor: pointer;
  transition: border-color .16s ease;
}
.cnd-card.nm[data-shots-open]:hover { border-color: rgba(52, 199, 123, .55); }
.cnd-card.nm[data-shots-open]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.cnd-card.nm[data-shots-open]::after {
  content: '实拍 5 张 ⤢';
  position: absolute;
  right: 11px;
  top: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--green);
  background: rgba(52, 199, 123, .1);
  border: 1px solid rgba(52, 199, 123, .35);
  pointer-events: none;
}

/* ── 实拍弹窗（原生 <dialog>）─────────────────────────────────────
   只做外观；Esc / 焦点锁 / 遮罩点击都由浏览器负责，这里不重写。 */
.cnd-dlg {
  width: min(1080px, 94vw);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ink-4);
  border-radius: 16px;
  background: var(--ink-2);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.cnd-dlg[open] { display: flex; flex-direction: column; }
.cnd-dlg::backdrop { background: rgba(0, 0, 0, .74); }
/* 🔴 打开弹窗时 `open()` 会把焦点收到对话框容器上（为了不让 ✕ 一开始就带框）。
   容器自己会吃到全局 `:focus-visible` 的「金色外描边 + offset 2」——
   整圈黄边，比 ✕ 上那个框更难看（2026-10-25 实测）。
   容器不是可操作控件，不需要焦点环；内部按钮的环照旧（`.cnd-dlg-x:focus-visible`）。
   ⚠️ 同一个坑在 `.cd-sheet` 上也踩过一次（单卡弹窗），凡是用 JS `focus()` 容器的都要清这一条。 */
.cnd-dlg:focus,
.cnd-dlg:focus-visible { outline: none; }
.cnd-dlg-hd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--ink-4);
}
.cnd-dlg-hd b { font-size: 15px; font-weight: 800; }
.cnd-dlg-x {
  margin-left: auto;
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--ink-4);
}
.cnd-dlg-x:hover { color: var(--text); border-color: var(--text-3); }
/* 打开弹窗时脚本会把焦点放到关闭按钮（键盘用户要先能 Tab 到它），
   而全局 `:focus-visible` 是「金色外描边 + offset 2」—— 在手机上就是
   一个突兀的黄框，看着像"这个按钮被选中了"（2026-10-25 截图里那一圈）。
   焦点保留，改成**内描边**：仍然可见，但不往外扩。 */
.cnd-dlg-x:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}
.cnd-dlg-bd {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 20px;
}
.cnd-dlg-lead { margin: 0 0 4px; font-size: 12.5px; line-height: 1.8; color: var(--text-2); }
.cnd-dlg-lead b { color: var(--text); }
.cnd-dlg-h3 {
  margin: 24px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-4);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.cnd-dlg .cnd-shots { margin-top: 12px; }

@media (max-width: 560px) {
  /* 弹窗两侧各让 14：96vw 的时候几乎贴边，看着"塞满" */
  .cnd-dlg { width: calc(100vw - 28px); max-height: 88vh; border-radius: 14px; }
  .cnd-dlg-bd { padding: 14px 14px 18px; }

  /* 🔴 两列 → **单列**（2026-10-25 店主：「这 2 个页面在手机端都有问题…别塞太满」）。
     两列时每张图只有 159px 宽：品相要看闪膜/白边/划痕，159px 根本看不清；
     更糟的是 `.cnd-shot img { height: 420px }`（860 断点）把 3:4 的图窗**撑破**，
     contain 之后上下各留 70px 纯黑 —— 一半高度是空的。
     单列 + 图按自身比例（下面的 aspect-ratio:auto / height:auto）：
     图 330 宽、约 590 高，一屏一张，看清楚；黑边归零。 */
  .cnd-dlg .cnd-shots,
  .cnd-dlg .cnd-shots.two {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    max-width: none;
  }
  .cnd-dlg .cnd-shot a {
    aspect-ratio: auto;        /* 高度交给图片自己算 */
    background: transparent;   /* 不再露出一圈黑底 */
  }
  .cnd-dlg .cnd-shot img {
    height: auto;
    width: 100%;
    object-fit: contain;
  }
}

/* ══ 2026-10-25 全站对比度扫描顺手修的两处（深色主题）════════════════════
   来源：`_dev/_probe_contrast_all.cjs dark`，两处都是"差一点点"但确实不达标。 */
/* DMG 徽章：`--red`(#E5484D) 压白字只有 3.91（12px 正文需 4.5）——
   底压深一档，色相不变，白字升到 5.6 */
.cnd-card.dmg .cnd-tag b { background: #c02a32; }
/* 「暂停在售」这行小字在深色主题下拿到的是深红 #b4232a，压 #1c1c1c 只有 4.35 */
html:not([data-theme="light"]) .cnd-price em { color: #ff8b96; }