/* =========================================================================
   cardlist.css — 新弾の収録カードリスト（DB型ページ）
   satei-card.css（sc-*）＋ kakaku.css（kk-*）の上に乗せる差分のみ。
   値は var(--ds-*) 経由でのみ参照する。
   ========================================================================= */

/* ---------- 見出し直下のページ内リンク ---------- */
.cl-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-inline-xs) var(--ds-space-inline-md);
  margin: 0 0 var(--ds-space-stack-md);
  font-size: var(--ds-text-body-sm-size);
}
.cl-jump a {
  color: var(--ds-color-text-link);
  text-decoration: underline;
}
.cl-jump a::after { content: " ›"; }

/* ---------- 判明状況サマリー ---------- */
.cl-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-space-inline-sm);
  margin: 0 0 var(--ds-space-stack-lg);
}
.cl-stat {
  padding: var(--ds-space-stack-sm);
  background: var(--ds-color-bg-subtle);
  border-radius: var(--ds-radius-card);
  text-align: center;
}
.cl-stat--on { background: var(--ds-color-accent-sky); }
.cl-stat__num {
  display: block;
  font-size: var(--ds-text-h2-size);
  line-height: var(--ds-text-h2-lh);
  font-weight: var(--ds-text-h2-weight);
  color: var(--ds-color-text);
}
.cl-stat__label {
  display: block;
  margin-top: var(--ds-space-inline-xs);
  font-size: var(--ds-text-micro-size);
  line-height: var(--ds-text-micro-lh);
  color: var(--ds-color-text-muted);
}

/* ---------- 絞り込みコントロール（kk-controls の拡張） ---------- */
.cl-controls {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-stack-sm);
  margin: 0 0 var(--ds-space-stack-sm);
}
.cl-control {
  display: flex;
  align-items: center;
  gap: var(--ds-space-inline-sm);
  flex-wrap: wrap;
}
.cl-search {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--ds-touch-target-min);
  padding: var(--ds-space-inline-xs) var(--ds-space-inline-md);
  font: inherit;
  font-size: var(--ds-text-body-sm-size);
  color: var(--ds-color-text);
  background: var(--ds-color-bg-paper);
  border: var(--ds-border-width) solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-input);
}
.cl-search:focus-visible { outline: var(--ds-border-width-heading-accent) solid var(--ds-color-text-link); }
.cl-count {
  margin: 0 0 var(--ds-space-stack-sm);
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-subtle);
}

/* ---------- カードリスト本体 ---------- */
.cl-table { table-layout: auto; }
.cl-col-no {
  width: 4.5em;
  text-align: center;
  white-space: nowrap;
  color: var(--ds-color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.cl-col-num { text-align: center; white-space: nowrap; }
.cl-col-img {
  width: 72px;
  min-width: 72px;   /* table-layout:auto で列が潰れると、img{max-width:100%} で画像が消えるため */
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}
.cl-col-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-table thead th { text-align: center; }
.cl-table thead .sc-table__namecol { text-align: left; }

.cl-namecell { text-align: left !important; }
.cl-name { display: block; font-weight: var(--ds-text-body-sm-weight); }

/* 未判明の枠。名前がないことを「情報が無い」と分かる形で見せる */
.cl-row--unknown { color: var(--ds-color-text-subtle); }
.cl-row--unknown .sc-table__namecell { font-weight: var(--ds-text-body-weight); }
.cl-unknown { font-size: var(--ds-text-body-sm-size); color: var(--ds-color-text-subtle); }

/* レアリティバッジ。塗るのは希少な3つだけ（RR・再録は中立） */
.cl-rarity--fur { background: var(--ds-color-accent-pink); border-color: var(--ds-color-accent-pink); }
.cl-rarity--sar { background: var(--ds-color-accent-lavender); border-color: var(--ds-color-accent-lavender); }
.cl-rarity--ar  { background: var(--ds-color-accent-sky); border-color: var(--ds-color-accent-sky); }

/* 推定値であることの注記バッジ */
.cl-est {
  display: inline-block;
  margin-left: var(--ds-space-inline-xs);
  padding: 0 var(--ds-space-inline-xs);
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-subtle);
  background: var(--ds-color-bg-subtle);
  border-radius: var(--ds-radius-chip);
}

/* カードサムネ（クリック/タップで app.js が拡大表示する）。
   max-width:none は style.css の img{max-width:100%} を打ち消すため（列が狭いと画像が縮む） */
.cl-thumb {
  display: block;
  width: 64px;
  max-width: none;
  height: auto;
  margin: 0 auto;
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-bg-subtle);
  cursor: zoom-in;
}
.cl-thumb:focus-visible { outline: var(--ds-border-width-heading-accent) solid var(--ds-color-text-link); }
.sc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- FV: 001〜165の番号早見表 ---------- */
.cl-map { margin: 0 0 var(--ds-space-stack-lg); }
.cl-map__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cl-map__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ds-border-width);
  margin: 0 0 var(--ds-space-stack-sm);
  padding: 0;
  list-style: none;
}
.cl-map__cell {
  display: flex;
  align-items: center;
  gap: var(--ds-space-inline-xs);
  min-height: 36px;
  padding: 0 var(--ds-space-inline-xs);
  background: var(--ds-color-bg-subtle);
  border-radius: var(--ds-radius-chip);
  font-size: var(--ds-text-micro-size);
  line-height: var(--ds-text-micro-lh);
  color: var(--ds-color-text);
}
.cl-map__no {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ds-color-text-subtle);
}
.cl-map__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--ds-text-body-sm-weight);
}
.cl-map__thumb {
  flex: 0 0 auto;
  width: 26px;
  max-width: none;
  height: auto;
  border-radius: 2px;
  cursor: zoom-in;
}
.cl-map__thumb:focus-visible { outline: var(--ds-border-width-heading-accent) solid var(--ds-color-text-link); }
/* 番号帯ごとの塗り分け。カードリスト表のレアリティバッジと同じ色を使う */
.cl-map__cell--ar      { background: var(--ds-color-accent-sky); }
.cl-map__cell--sar     { background: var(--ds-color-accent-lavender); }
.cl-map__cell--fur     { background: var(--ds-color-accent-pink); }
.cl-map__cell--reprint { background: var(--ds-color-accent-cream); }
/* 未判明は塗らずに枠だけ残す（「情報が無い」ことが見て分かる状態にする） */
.cl-map__cell.is-empty {
  background: transparent;
  box-shadow: inset 0 0 0 var(--ds-border-width) var(--ds-color-border);
  color: var(--ds-color-text-disabled);
}
.cl-map__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-inline-xs) var(--ds-space-inline-md);
  margin: 0 0 var(--ds-space-stack-xs);
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-muted);
}
.cl-map__key {
  display: inline-block;
  width: 1.4em;
  height: 1em;
  margin-right: var(--ds-space-inline-xs);
  border-radius: 2px;
  vertical-align: -0.1em;
}
.cl-map__key.is-empty { box-shadow: inset 0 0 0 var(--ds-border-width) var(--ds-color-border); }

/* ---------- 番号帯の構成表 ---------- */
.cl-blocks .kk-rarity { white-space: nowrap; }
.cl-blocks__range { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cl-blocks__note { font-size: var(--ds-text-body-sm-size); color: var(--ds-color-text-muted); }

/* ---------- 収録が予想されているカード（未確定） ---------- */
.cl-col-basis { white-space: nowrap; }
.cl-basis {
  display: inline-block;
  padding: 0 var(--ds-space-inline-xs);
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-state-warning-text);
  background: var(--ds-color-state-warning-bg);
  border-radius: var(--ds-radius-chip);
}

/* ---------- プロモ表 ---------- */
.cl-promos .cl-name { white-space: nowrap; }
.cl-promos__product { font-size: var(--ds-text-body-sm-size); color: var(--ds-color-text-muted); }
.cl-promos__detail { display: block; font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }

/* ---------- CTA（このページはホロではなくオレンジ単色。kakaku と同方針） ---------- */
.cardlist .sc-cta__btn,
.cardlist .sc-prose-cta a { background: var(--ds-color-cta-bg); }
.cardlist .sc-cta__btn:hover,
.cardlist .sc-prose-cta a:hover { background: var(--ds-color-cta-bg-hover); opacity: 1; }

/* ---------- モバイル ---------- */
@media (max-width: 640px) {
  .cl-stats { grid-template-columns: repeat(2, 1fr); }
  /* 早見表はSPでも4列を保ち、収まらない分は横スワイプで見せる。
     2列に折り返すと83行になって画面を占有しすぎるため（列数ではなく高さを優先） */
  .cl-map__grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    width: max-content;
    min-width: 100%;
  }
  .cl-col-img { width: 56px; min-width: 56px; }
  .cl-thumb { width: 48px; }
  .cl-table { font-size: var(--ds-text-caption-size); }
  .cl-col-no { width: 3.6em; }
  .cl-blocks__note { display: none; }
  .cl-blocks thead th:last-child { display: none; }
}