/* kaitori-ranking 第8段階：商品ページ・iPhone一覧・ポケカBOX一覧の見た目
   モックアップ（iPhone 商品ページ SP/PC、ポケカBOX 商品ページ SP、iPhone一覧 SP/PC）とデザイン仕様（配色6色・文字・表の規則）に合わせる。
   色はテーマ kaitori-navi-ranking の変数を使い、テーマが無いときの値も併記。クラスは krp- で始める（テーマの kr- と衝突しない）。 */

.kr-page .kr-main { padding-top: 10px; }
.krp-sp-only { display: inline; }
.krp-pc-only { display: none !important; }
.krp-right { text-align: right; }
.krp-sub { font-size: 12px; color: var(--kr-sub, #64748B); font-weight: 400; }
.krp-label { font-size: 12px; color: var(--kr-sub, #64748B); }
.is-red { color: var(--kr-red, #C81E1E); }
.is-nourl { color: var(--kr-sub2, #334155); }

/* パンくず（12px グレー、現在地は本文色。長いときは末尾を省略） */
.krp-bc { font-size: 12px; color: var(--kr-sub, #64748B); display: flex; gap: 5px; align-items: center; white-space: nowrap; overflow: hidden; margin: 0 0 12px; }
.krp-bc a { color: inherit; text-decoration: none; }
.krp-bc .krp-bc-cur { color: var(--kr-text, #0F172A); overflow: hidden; text-overflow: ellipsis; }

/* 商品情報（画像 84px、H1 19px、チップ 11px） */
.krp-head { display: flex; gap: 12px; align-items: flex-start; }
.krp-img { width: 84px; height: 84px; border-radius: 8px; background: var(--kr-line2, #F1F5F9); border: 1px solid var(--kr-line, #E2E8F0); flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.krp-img img { width: 100%; height: 100%; object-fit: contain; }
.krp-img.is-none { color: var(--kr-muted, #94A3B8); font-size: 11px; text-align: center; line-height: 1.3; }
.krp-head-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.krp-h1 { margin: 0; font-size: 19px; font-weight: 700; color: var(--kr-navy, #0F2A4A); line-height: 1.35; }
.krp-h1--bar { font-size: 20px; display: flex; align-items: center; gap: 8px; }
.krp-h1--bar::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--kr-navy, #0F2A4A); flex: none; }
.krp-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: #475569; }
.krp-chip { border: 1px solid var(--kr-line, #E2E8F0); border-radius: 4px; padding: 2px 6px; }
.krp-chip.is-muted { color: var(--kr-muted, #94A3B8); }
.krp-desc { margin: 0; font-size: 13px; color: var(--kr-sub2, #334155); line-height: 1.6; }

/* 並び（スマホ：価格 → 推移 → 店舗別 → 定価と差額 → 出典 → 関連。PC は2カラム） */
.krp-cols { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.krp-side { display: contents; }
.krp-price { order: 1; }
.krp-summary { order: 1; } /* 価格カードのすぐ下（同じ順番なので、書いた順に並ぶ） */
.krp-reserve { order: 1; } /* 抽選・予約の情報（2026-10-18） */
.krp-articles { order: 1; } /* この機種について書いた記事（2026-10-30）。まとめのすぐ下 */
.krp-articles .krp-link { display: block; margin: 4px 0; }
.krp-chart { order: 2; }
.krp-shops { order: 3; }
.krp-lp { order: 4; }
.krp-source { order: 5; }
.krp-related { order: 6; }
/* 同じ機種のほかの容量・色／同じシリーズのBOX（2026-10-23）。買取店別の表のすぐ下 */
.krp-sibs { order: 3; }
.krp-sib-group { display: flex; flex-direction: column; gap: 6px; }
.krp-sib-label { font-size: 13px; font-weight: 700; color: var(--kr-sub2, #334155); }
.krp-sib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.krp-sib { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--kr-line, #E2E8F0); border-radius: 8px; padding: 7px 10px; background: var(--kr-white, #FFFFFF); text-decoration: none; color: var(--kr-text, #0F172A); min-width: 0; }
a.krp-sib:hover { border-color: var(--kr-navy, #0F2A4A); }
.krp-sib.is-current { border: 2px solid var(--kr-navy, #0F2A4A); padding: 6px 9px; background: #F8FAFC; }
.krp-sib-name { font-size: 12px; color: var(--kr-sub2, #334155); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krp-sib-price { font-size: 14px; font-weight: 700; color: var(--kr-red, #C81E1E); white-space: nowrap; }
.krp-sib-rate { font-size: 11px; color: var(--kr-sub, #64748B); }
.krp-sib-now { font-size: 11px; font-weight: 700; color: var(--kr-navy, #0F2A4A); }
.krp-sib-list { display: flex; flex-direction: column; border: 1px solid var(--kr-line, #E2E8F0); border-radius: 10px; overflow: hidden; background: var(--kr-white, #FFFFFF); }
.krp-sib-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; text-decoration: none; color: var(--kr-text, #0F172A); font-size: 13px; }
.krp-sib-row + .krp-sib-row { border-top: 1px solid var(--kr-line, #E2E8F0); }
a.krp-sib-row:hover { background: #F8FAFC; }
.krp-sib-row-name { min-width: 0; line-height: 1.4; }
.krp-sib-more { align-self: flex-start; font-size: 13px; color: var(--kr-blue, #1D4ED8); text-decoration: none; padding: 4px 0; }

/* セクション見出し（17px 太字ネイビー＋縦バー） */
.krp-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.krp-h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--kr-navy, #0F2A4A); display: flex; align-items: center; gap: 8px; }
.krp-h2::before { content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--kr-navy, #0F2A4A); flex: none; }
.krp-box { border: 1px solid var(--kr-line, #E2E8F0); border-radius: 12px; padding: 12px; background: var(--kr-white, #FFFFFF); display: flex; flex-direction: column; gap: 10px; }
.krp-note { font-size: 11px; color: var(--kr-sub, #64748B); line-height: 1.5; }
/* 注意書き（非表示の商品／最終確認が古い価格）：枠線＋左の赤線。色は既存の6色＋補助色のみ */
.krp-notice { margin-top: 12px; border: 1px solid var(--kr-line, #E2E8F0); border-left: 4px solid var(--kr-label-red, #DC2626); border-radius: 6px; padding: 8px 12px; font-size: 13px; color: var(--kr-sub2, #334155); background: var(--kr-white, #FFFFFF); line-height: 1.6; }
.krp-notice + .krp-cols { margin-top: 12px; }
/* 最終確認が KR_STALE_DAYS 日を超えた行の経過日数（赤文字。補助色の範囲） */
.krp-stale { color: var(--kr-label-red, #DC2626); white-space: nowrap; }
.krp-empty { border: 1px dashed var(--kr-line, #E2E8F0); border-radius: 10px; padding: 16px; font-size: 14px; color: var(--kr-sub, #64748B); background: var(--kr-white, #FFFFFF); }

/* 現在の最高買取価格（白地、ネイビー2px枠、角丸12px、金額 32px 赤） */
.krp-price { border: 2px solid var(--kr-navy, #0F2A4A); border-radius: 12px; padding: 14px; background: var(--kr-white, #FFFFFF); display: flex; flex-wrap: wrap; gap: 8px 14px; }
.krp-price--none { border-style: dashed; border-width: 1px; border-color: var(--kr-line, #E2E8F0); }
/* スマホ：ラベル → 金額＋前回比 → 買取率・定価差（横並び）→ 買取店・確認日時（モックアップの順） */
.krp-price-main { display: contents; }
.krp-price > .krp-label, .krp-price-main > .krp-label, .krp-amount-row { flex-basis: 100%; }
.krp-price-shop { flex-basis: 100%; }
.krp-amount-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.krp-amount { font-size: 32px; font-weight: 700; color: var(--kr-red, #C81E1E); line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.krp-prev { font-size: 13px; font-weight: 700; }
.is-up { color: var(--kr-red, #C81E1E); }
.is-down { color: var(--kr-blue, #1D4ED8); }
.is-flat { color: var(--kr-text, #0F172A); }
.krp-price-shop { font-size: 13px; border-top: 1px solid var(--kr-line, #E2E8F0); padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; order: 9; }
.krp-price-shop a { text-decoration: none; }
.krp-price-tie a, .krp-price-tie .is-nourl { white-space: nowrap; } /* 同額の店が2店以上（2026-10-26）：店名の途中では折り返さない */
.krp-price-item { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.krp-val { font-weight: 700; font-size: 15px; white-space: nowrap; }
.krp-val--rate { color: var(--kr-green, #15803D); font-size: 16px; }

/* 価格推移 */
.krp-chart-ctrl { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.krp-seg { display: flex; border: 1px solid var(--kr-input-line, #CBD5E1); border-radius: 8px; overflow: hidden; }
.krp-seg.is-off { opacity: 0.5; pointer-events: none; }
.krp-seg-btn { appearance: none; border: 0; background: var(--kr-white, #FFFFFF); font: inherit; font-size: 12px; padding: 7px 10px; color: #475569; cursor: pointer; }
.krp-seg-btn.is-active { background: var(--kr-navy, #0F2A4A); color: var(--kr-white, #FFFFFF); font-weight: 700; }
.krp-seg-btn.is-dim:not(.is-active) { color: var(--kr-muted, #94A3B8); }
.krp-svgwrap { position: relative; }
.krp-svg { display: block; width: 100%; height: 210px; }
.krp-svg .krp-dot { cursor: pointer; }
.krp-tip { position: absolute; background: var(--kr-navy, #0F2A4A); color: var(--kr-white, #FFFFFF); font-size: 11px; line-height: 1.4; padding: 5px 8px; border-radius: 4px; pointer-events: none; width: max-content; max-width: 220px; transform: translateY(-100%); } /* 同額の店名が長いときは折り返す。横の位置は pages.js が枠の中に収める（2026-10-26） */
.krp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--kr-sub2, #334155); }
.krp-legend span { color: var(--kr-sub2, #334155); }
.krp-legend span::before { content: ""; display: inline-block; width: 12px; height: 3px; background: currentColor; margin-right: 6px; vertical-align: middle; }
.krp-legend[hidden] { display: none; }
.krp-chart-empty { height: 180px; border: 1px dashed var(--kr-input-line, #CBD5E1); border-radius: 8px; background: #F8FAFC; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 0 20px; color: var(--kr-muted, #94A3B8); }
.krp-chart-empty-title { font-size: 14px; font-weight: 700; color: var(--kr-sub2, #334155); }
.krp-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: 12px; }
.krp-metric { background: #F8FAFC; border-radius: 8px; padding: 8px 10px; min-width: 0; }
.krp-metric-val { font-size: 15px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.krp-metric-val.is-small { font-size: 13px; }
.krp-chart-table summary { font-size: 12px; color: var(--kr-sub, #64748B); cursor: pointer; }
.krp-chart-table table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.krp-chart-table th, .krp-chart-table td { padding: 5px 6px; border-top: 1px solid var(--kr-line2, #F1F5F9); text-align: left; }
.krp-chart-table th { color: var(--kr-sub, #64748B); font-weight: 500; }

/* 買取店別の現在価格（TOP の表と同じ規則。各行に確認日時） */
.krp-table { border: 1px solid var(--kr-line, #E2E8F0); border-radius: 10px; overflow: hidden; background: var(--kr-white, #FFFFFF); }
.krp-thead, .krp-row { display: grid; gap: 6px; align-items: center; }
.krp-thead { padding: 8px 10px; background: var(--kr-navy, #0F2A4A); font-size: 11px; color: var(--kr-white, #FFFFFF); }
.krp-thead--pc { display: none; }
.krp-row { padding: 10px; border-top: 1px solid var(--kr-line, #E2E8F0); }
.krp-row:first-of-type { border-top: 0; }
.krp-table--rate .krp-thead, .krp-table--rate .krp-row { grid-template-columns: 34px minmax(0, 1fr) 66px 100px; }
.krp-table--norate .krp-thead, .krp-table--norate .krp-row { grid-template-columns: 34px minmax(0, 1fr) 100px; }
.krp-shop { min-width: 0; display: flex; flex-direction: column; }
.krp-shop-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krp-price-shop .kr-pr, .krp-shop-name .kr-pr { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; line-height: 1.5; color: var(--kr-sub2, #334155); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; vertical-align: 1px; }
.krp-row.is-first .krp-shop-name { font-weight: 700; }
.krp-shop-time { font-size: 11px; color: var(--kr-sub, #64748B); }
.krp-rate { text-align: right; font-size: 18px; font-weight: 700; color: var(--kr-green, #15803D); }
.krp-rate small { font-size: 12px; }
.krp-cell-price { text-align: right; display: flex; flex-direction: column; line-height: 1.25; }
.krp-cell-amount { font-size: 16px; font-weight: 700; color: var(--kr-red, #C81E1E); }
.krp-cell-diff { font-size: 13px; font-weight: 500; color: var(--kr-text, #0F172A); }
.krp-cell-diff.is-none { font-size: 12px; font-weight: 400; color: var(--kr-muted, #94A3B8); }
.krp-cell-time { text-align: right; font-size: 12px; color: var(--kr-sub, #64748B); }
/* テーマが無いときの順位バッジ */
/* 順位の丸は全順位で同じ見た目（2026-10-13 統一） */
.kr-page .kr-rank { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--kr-white, #FFFFFF); border: 2px solid var(--kr-navy, #0F2A4A); color: var(--kr-navy, #0F2A4A); box-sizing: border-box; }

/* 定価と差額（スマホ3列） */
.krp-lp-box { padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12px; }
.krp-lp-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.krp-lp-item b { font-size: 15px; }
.krp-lp-box > .krp-sub { grid-column: 1 / -1; }

/* 出典・関連 */
.krp-source-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--kr-sub2, #334155); line-height: 1.7; }
.krp-btn { height: 44px; border: 1px solid var(--kr-navy, #0F2A4A); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--kr-navy, #0F2A4A); text-decoration: none; background: var(--kr-white, #FFFFFF); }
.krp-link { height: 44px; border: 1px solid var(--kr-input-line, #CBD5E1); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--kr-text, #0F172A); text-decoration: none; background: var(--kr-white, #FFFFFF); }

/* ===== 一覧 ===== */
.krp-list-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.krp-lead { margin: 8px 0 10px; font-size: 13px; color: #475569; line-height: 1.6; }
.krp-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.krp-filters--one { grid-template-columns: 1fr; }
.krp-search { grid-column: 1 / -1; height: 44px; border: 1px solid var(--kr-input-line, #CBD5E1); border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--kr-navy, #0F2A4A); background: var(--kr-white, #FFFFFF); }
.krp-search-input { flex: 1; min-width: 0; border: 0; background: none; font-size: 13px; color: var(--kr-text, #0F172A); outline: none; }
.krp-search-input::placeholder { color: var(--kr-muted, #94A3B8); }
.krp-sel { height: 44px; border: 1px solid var(--kr-input-line, #CBD5E1); border-radius: 8px; background: var(--kr-white, #FFFFFF); font-size: 13px; color: #475569; padding: 0 10px; width: 100%; min-width: 0; }
.krp-sel.is-set { border-color: var(--kr-navy, #0F2A4A); color: var(--kr-navy, #0F2A4A); font-weight: 700; }
.krp-sel--sort { grid-column: 1 / -1; color: var(--kr-text, #0F172A); }
.krp-count { font-size: 12px; color: var(--kr-sub, #64748B); margin: 10px 0 8px; }
.krp-cond { margin: -4px 0 8px; }
.krp-list-thead { display: none; }
.krp-list-body { display: flex; flex-direction: column; gap: 8px; }
.krp-group { font-size: 13px; font-weight: 700; color: var(--kr-navy, #0F2A4A); padding-top: 4px; }
.krp-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img name price" "img shop rate"; gap: 2px 10px; align-items: center; border: 1px solid var(--kr-line, #E2E8F0); border-radius: 10px; padding: 10px; text-decoration: none; color: var(--kr-text, #0F172A); background: var(--kr-white, #FFFFFF); }
.krp-item-img { grid-area: img; width: 56px; height: 56px; border-radius: 6px; background: var(--kr-line2, #F1F5F9); border: 1px solid var(--kr-line, #E2E8F0); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.krp-item-img img { width: 100%; height: 100%; object-fit: contain; }
.krp-item-name { grid-area: name; font-size: 14px; font-weight: 700; line-height: 1.35; }
.krp-item-shop { grid-area: shop; font-size: 11px; color: var(--kr-sub, #64748B); }
.krp-item-price { grid-area: price; text-align: right; font-size: 16px; font-weight: 700; color: var(--kr-red, #C81E1E); white-space: nowrap; }
.krp-item-rate { grid-area: rate; text-align: right; font-size: 12px; font-weight: 700; color: var(--kr-green, #15803D); white-space: nowrap; }
.krp-item-rate.is-none { color: var(--kr-muted, #94A3B8); font-weight: 400; }
.krp-item-diff { font-weight: 500; }
.krp-item-diff.is-none { color: var(--kr-muted, #94A3B8); }
.krp-list-none { font-size: 14px; color: var(--kr-sub, #64748B); padding: 16px; border: 1px dashed var(--kr-line, #E2E8F0); border-radius: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.krp-more { display: flex; justify-content: center; padding: 6px 0 0; }
.krp-btn-small { appearance: none; height: 44px; padding: 0 24px; border: 1px solid var(--kr-input-line, #CBD5E1); border-radius: 8px; background: var(--kr-white, #FFFFFF); font: inherit; font-size: 14px; color: var(--kr-text, #0F172A); cursor: pointer; }
.krp-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px 0 0; font-size: 13px; }
.krp-pagination a { height: 36px; padding: 0 14px; border: 1px solid var(--kr-input-line, #CBD5E1); border-radius: 8px; display: flex; align-items: center; text-decoration: none; color: var(--kr-text, #0F172A); background: var(--kr-white, #FFFFFF); }
.krp-list + .krp-note, .krp-list ~ .krp-note { margin-top: 10px; }
#krp-pokeca-list .kr-row[hidden], #krp-pokeca-list .kr-best-item[hidden] { display: none !important; }
.krp-summary-line { margin: 0 0 8px; font-size: 14px; line-height: 1.75; color: var(--kr-text, #0F172A); }
.krp-eval { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--kr-line, #E2E8F0); }
.krp-eval-badge { flex: none; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 12px; border: 1px solid currentColor; background: var(--kr-white, #FFFFFF); }
.krp-eval-text { font-size: 14px; line-height: 1.6; font-weight: 500; }
.krp-item-more { color: var(--kr-sub2, #334155); font-weight: 500; }

/* ===== PC（768px以上） ===== */
@media (min-width: 768px) {
  .kr-page .kr-main { padding-top: 16px; }
  .krp-sp-only { display: none !important; }
  .krp-pc-only { display: inline !important; }
  div.krp-pc-only, .krp-price-item.krp-pc-only, .krp-list-thead.krp-pc-only { display: flex !important; }
  span.krp-pc-only.krp-sub { display: inline !important; }
  .krp-bc { font-size: 13px; gap: 6px; margin-bottom: 16px; }
  .krp-head { gap: 16px; align-items: center; background: var(--kr-white, #FFFFFF); border: 1px solid var(--kr-line, #E2E8F0); border-radius: 12px; padding: 16px 20px; }
  .krp-img { width: 88px; height: 88px; }
  .krp-h1 { font-size: 24px; line-height: 1.3; }
  .krp-h1--bar { gap: 10px; }
  .krp-h1--bar::before { width: 5px; height: 24px; }
  .krp-chips { gap: 8px; font-size: 12px; }
  .krp-chip { padding: 3px 8px; }
  .krp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "price side" "summary side" "reserve side" "chart side" "shops side" "sibs side" "source side"; gap: 16px 20px; align-items: start; margin-top: 16px; }
  .krp-sibs { grid-area: sibs; }
  .krp-sib-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .krp-price { grid-area: price; }
  .krp-summary { grid-area: summary; }
  .krp-reserve { grid-area: reserve; }
  .krp-chart { grid-area: chart; }
  .krp-shops { grid-area: shops; }
  .krp-source { grid-area: source; }
  .krp-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .krp-section { background: var(--kr-white, #FFFFFF); border: 1px solid var(--kr-line, #E2E8F0); border-radius: 12px; padding: 18px 20px; gap: 12px; }
  .krp-side .krp-section { padding: 16px 18px; gap: 10px; }
  .krp-side .krp-h2 { font-size: 15px; }
  .krp-side .krp-h2::before { display: none; }
  .krp-h2 { font-size: 18px; }
  .krp-h2::before { height: 18px; }
  .krp-box { border: 0; padding: 0; gap: 12px; }
  .krp-side .krp-box { border: 0; padding: 0; }
  /* 価格カード：金額＋店 ｜ 買取率 ｜ 定価差 ｜ 前回比 */
  .krp-price { gap: 12px 20px; align-items: center; padding: 16px 20px; }
  .krp-price-main { display: flex; flex-direction: column; flex: 1 1 260px; gap: 4px; }
  .krp-price-shop { flex-basis: auto; }
  .krp-amount-row { gap: 0; }
  .krp-amount { line-height: 1.1; }
  .krp-price-shop { border-top: 0; padding-top: 0; justify-content: flex-start; order: 0; }
  .krp-price-item { flex: 1 1 120px; flex-direction: column; align-items: flex-start; gap: 2px; border-left: 1px solid var(--kr-line, #E2E8F0); padding-left: 16px; }
  .krp-val { font-size: 20px; }
  .krp-val--rate { font-size: 20px; }
  .krp-svg { height: 260px; }
  .krp-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .krp-metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; }
  .krp-metric-val { font-size: 16px; }
  .krp-metric-val.is-small { font-size: 14px; }
  .krp-thead { padding: 9px 12px; gap: 8px; }
  .krp-thead--sp { display: none; }
  .krp-thead--pc { display: grid; }
  .krp-row { padding: 12px; gap: 8px; }
  .krp-table--rate .krp-thead, .krp-table--rate .krp-row { grid-template-columns: 40px minmax(0, 1fr) 72px 96px 90px 110px; }
  .krp-table--norate .krp-thead, .krp-table--norate .krp-row { grid-template-columns: 40px minmax(0, 1fr) 96px 90px 110px; }
  .kr-page .kr-rank { width: 30px; height: 30px; }
  .krp-rate { font-size: 19px; }
  .krp-cell-price { display: contents; }
  .krp-cell-amount { font-size: 17px; text-align: right; }
  .krp-cell-diff { font-size: 14px; text-align: right; }
  .krp-cell-time { display: block !important; }
  .krp-lp-box { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
  .krp-lp-item { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .krp-lp-item b { font-size: 13px; }
  .krp-lp-item.is-total { border-top: 1px solid var(--kr-line, #E2E8F0); padding-top: 8px; }
  .krp-btn { height: 40px; font-size: 13px; }
  .krp-link { height: auto; border: 0; justify-content: flex-start; font-size: 13px; color: var(--kr-blue, #1D4ED8); }
  .krp-source-list { line-height: 1.8; }
  /* 一覧 */
  .krp-lead { font-size: 14px; }
  .krp-filters { background: var(--kr-white, #FFFFFF); border: 1px solid var(--kr-line, #E2E8F0); border-radius: 12px; padding: 14px 16px; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: center; }
  .krp-filters--one { grid-template-columns: minmax(0, 1fr); }
  .krp-search { grid-column: auto; height: 40px; }
  .krp-sel { height: 40px; }
  .krp-sel--sort { grid-column: auto; width: auto; }
  .krp-count { margin: 12px 0 8px; }
  .krp-list { background: var(--kr-white, #FFFFFF); border: 1px solid var(--kr-line, #E2E8F0); border-radius: 12px; overflow: hidden; }
  .krp-list-thead, .krp-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) 140px 80px 110px 120px 90px 100px 110px; grid-template-areas: none; gap: 10px; padding: 10px 16px; align-items: center; }
  .krp-list-thead { background: var(--kr-navy, #0F2A4A); font-size: 11px; color: var(--kr-white, #FFFFFF); }
  .krp-list-body { gap: 0; }
  .krp-item { border: 0; border-top: 1px solid var(--kr-line, #E2E8F0); border-radius: 0; font-size: 13px; }
  .krp-item > * { grid-area: auto !important; }
  .krp-item-img { width: 44px; height: 44px; }
  .krp-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .krp-item-model, .krp-item-storage, .krp-item-color { color: #475569; }
  .krp-item-rate { font-size: 15px; }
  .krp-item-diff { text-align: right; }
  .krp-item-shop { font-size: 12px; color: #475569; }
  .krp-item-date { display: block; }
  .krp-group { padding: 8px 16px; border-top: 1px solid var(--kr-line, #E2E8F0); background: #F8FAFC; }
  .krp-list-none, .krp-more { margin: 12px 16px; }
  .krp-pagination { border-top: 1px solid var(--kr-line, #E2E8F0); padding: 12px; }
}
/* タブレット（768〜1079px）：一覧の列を詰める */
@media (min-width: 768px) and (max-width: 1079px) {
  .krp-list-thead, .krp-item { grid-template-columns: 48px minmax(0, 1fr) 70px 90px 100px 80px 90px 100px; }
  .krp-list-thead > :nth-child(3), .krp-item-model { display: none !important; }
}