/* ══════════════════════════════════════════════════════════════
   作品详情：盖在作品页上的整页层，3 × 3 编号网格（格子 3:4）
   ══════════════════════════════════════════════════════════════ */
.detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  padding: 72px 16px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
}
.detail.is-open { display: block; }
body.is-busy .detail { overflow: hidden; }

.detail-back {
  position: fixed;
  top: 112px;
  left: 16px;
  z-index: 1;
  font-size: 11px;
  line-height: 1.2;
}

.detail-page {
  padding: clamp(28px, 5.5vw, 72px) clamp(22px, 5.5vw, 72px) 80px;
  background: var(--paper);
}

.detail-grid {
  letter-spacing: 0;
  word-spacing: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.2vw, 34px) clamp(12px, 2.4vw, 30px);
}

.case-cell { margin: 0; min-width: 0; }
.case-cell__no {
  display: block;
  margin-bottom: clamp(4px, .65vw, 8px);
  font-size: clamp(9px, 1.7vw, 12px);
  line-height: 1.2;
}
.case-cell__fig {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cell-empty);
}
.case-cell__fig img { width: 100%; height: 100%; object-fit: cover; }
.case-cell__cap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}
.case-cell__en { font-size: clamp(10px, 1.2vw, 13px); line-height: 1.2; }
.case-cell__cn { font-size: clamp(8px, .9vw, 10px); line-height: 1.2; color: #85867f; }

@media (max-width: 650px) {
  .detail-back { top: 94px; background: var(--paper); }
  .detail-page { padding: 48px 6vw 56px; }   /* 让开固定的 Back，别挡住 01 */
  .detail-grid { gap: 22px 12px; }
}