/* =========================================================================
   kakaku.css — /kakaku/ ポケカ買取相場表（相場ランキングハブ）
   satei-card.css（sc-*）の上に乗せる差分のみ。値は var(--ds-*) のみ。
   ========================================================================= */

/* ---------- 重要な前提コールアウト ---------- */
.kk-callout {
  margin: 0 0 var(--ds-space-stack-lg);
  padding: var(--ds-space-stack-md);
  background: var(--ds-color-bg-subtle);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-left: var(--ds-border-width-divider) solid var(--ds-color-accent-brand);
  border-radius: var(--ds-radius-card);
}
.kk-callout__title {
  margin: 0 0 var(--ds-space-stack-sm);
  font-weight: var(--ds-text-h3-weight);
  font-size: var(--ds-text-body-size);
}
.kk-callout__list {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--ds-text-body-sm-size);
  color: var(--ds-color-text-muted);
}
.kk-callout__list li { margin: 0 0 var(--ds-space-stack-xs); }
.kk-callout__list li:last-child { margin-bottom: 0; }

/* ---------- ランキング表（sc-table を拡張） ---------- */
.kk-table { table-layout: auto; }
.kk-col-rank { width: 2.2em; text-align: center; color: var(--ds-color-text-subtle); }
.kk-table thead .kk-col-rank,
.kk-table thead .kk-col-price,
.kk-table thead .kk-col-chg,
.kk-table thead .kk-col-count { text-align: center; }
.kk-col-price { text-align: right; white-space: nowrap; }
.kk-col-chg { text-align: right; white-space: nowrap; }
.kk-col-count { text-align: right; white-space: nowrap; color: var(--ds-color-text-subtle); }

/* 名前セルは左寄せ（sc-table__namecell の中央寄せを上書き） */
.kk-namecell { text-align: left !important; }
.kk-name { display: block; font-weight: var(--ds-text-body-sm-weight); }
.kk-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-inline-xs);
  margin-top: var(--ds-space-inline-xs);
}
.kk-set { font-size: var(--ds-text-micro-size); color: var(--ds-color-text-subtle); }

/* レアリティバッジ */
.kk-rarity {
  display: inline-block;
  padding: 0 var(--ds-space-inline-xs);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-body-weight);
  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-chip);
  letter-spacing: .04em;
}
.kk-rarity--sar { background: var(--ds-color-accent-pink); border-color: var(--ds-color-accent-pink); }
.kk-rarity--sr  { background: var(--ds-color-accent-sky); border-color: var(--ds-color-accent-sky); }
.kk-rarity--hr  { background: var(--ds-color-accent-gold); border-color: var(--ds-color-accent-gold); }
.kk-rarity--ur  { background: var(--ds-color-accent-lavender); border-color: var(--ds-color-accent-lavender); }
.kk-rarity--promo { background: var(--ds-color-accent-mint); border-color: var(--ds-color-accent-mint); }

/* 相場レンジ・少数フラグ */
.kk-range {
  display: block;
  margin-top: var(--ds-space-inline-xs);
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-subtle);
  font-weight: var(--ds-text-body-weight);
}
.kk-flag {
  display: block;
  margin-top: var(--ds-space-inline-xs);
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-subtle);
}
.kk-chg__period {
  display: block;
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-subtle);
}

/* ---------- 業者比較表 ---------- */
.kk-svc__name a { color: var(--ds-color-text-link); text-decoration: none; font-weight: var(--ds-text-body-sm-weight); }
.kk-svc__name a:hover { text-decoration: underline; }
.kk-svc__type { white-space: nowrap; color: var(--ds-color-text-muted); }

/* ---------- モバイル ---------- */
@media (max-width: 640px) {
  .kk-table { font-size: var(--ds-text-caption-size); }
  .kk-col-count { display: none; } /* 件数列は狭い画面では省略 */
  .kk-table thead .kk-col-count { display: none; }
  .kk-chg__period { display: none; }
  .kk-svc__type { white-space: normal; }
}