/* TCG当たりカード楽天出品価格 — テンプレスタイル v3（DESIGN-BRIEF.md準拠）
   トークン正本= site/_preview/link-v5-d3/index.html の :root。
   タイポグラフィ主導×オフホワイト。ダークはヒーローのみ。主CTAは黒ピル、赤/青の塗りボタンは使わない。
   ゴールドは最高レアバッジと.markのみ。ライト固定。 */

:root {
  --ink: #1B1D1F;
  --sub: #5F6368;
  --bg: #FBFAF6;
  --gold: #f5c842;
  --up: #0a9d6e;
  --down: #e0463c;
  --hair: rgba(27, 29, 31, .1);
  --navy1: #1a2036;
  --navy2: #0b0f1f;
  --card: #fff;
  --accent: #2563eb;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 方眼テクスチャ（28px罫線・不透明度.05） */
  background-image:
    repeating-linear-gradient(0deg, rgba(27, 29, 31, .05) 0px, rgba(27, 29, 31, .05) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(27, 29, 31, .05) 0px, rgba(27, 29, 31, .05) 1px, transparent 1px, transparent 28px);
}

a {
  color: var(--accent);
  -webkit-tap-highlight-color: transparent;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

/* ---- fade-up（上から4段まで・reduced-motionで無効） ---- */
.fade {
  opacity: 0;
  transform: translateY(10px);
  animation: fu .5s ease forwards;
}

.fade.d1 { animation-delay: .05s; }
.fade.d2 { animation-delay: .1s; }
.fade.d3 { animation-delay: .15s; }
.fade.d4 { animation-delay: .2s; }

@keyframes fu {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fade { animation: none; opacity: 1; transform: none; }
}

/* ---- ゴールドのマーカー強調（1画面に1〜2箇所だけ） ---- */
.mark {
  background: linear-gradient(transparent 58%, rgba(245, 200, 66, .55) 58%);
}

/* ---- ダークヒーロー（ページ全体では使わない・ヒーロー1箇所だけ） ---- */
.hero-dark {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  padding: 24px 20px;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--navy1) 0%, var(--navy2) 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}

.pr-disclosure {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  margin: 0 0 8px;
}

.crumb {
  font-size: 12px;
  color: rgba(255, 255, 255, .75);
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

.crumb a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.crumb a:hover,
.crumb a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.crumb [aria-current="page"] {
  color: #fff;
}

.hero-kicker {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 6px;
}

.hero-headline {
  font-weight: 900;
  font-size: clamp(24px, 7vw, 32px);
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0 0 16px;
}

.hero-lead {
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
  margin: 0 0 12px;
}

.hero-updated {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .55);
  text-align: right;
  margin: 12px 0 0;
}

/* ---- ヒーロー内「1位」白パネル ----
   grid（左=サムネ96px・右=本文）。モバイル(≤480px)は1カラムでサムネ→名前→価格の縦積み
   （grid-template-columns:1fr にすると子要素はソース順で自動的に行が積み上がる）。
   ダーク面では.mark（黄色マーカー）を使わない＝白文字の下に黄帯が出て読みにくいため。
   価格が主役なので大きく・白（強調したい場合は文字色を--goldにする逃げ道のみ許可）。 */
.hero-top-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 12px 14px;
  text-decoration: none;
  color: #fff;
}

@media (max-width: 480px) {
  .hero-top-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

.hero-top-thumb {
  position: relative;
  width: 96px;
  height: 128px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
}

.hero-scope-line {
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
  margin: 8px 0 0;
}

.hero-subhead {
  font-weight: 700;
  font-size: 15px;
  color: rgba(255, 255, 255, .9);
  margin: 0 0 10px;
}

.hero-top-shopcount {
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  margin: 2px 0 0;
}

.hero-top-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hero-top-name {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  margin: 0;
  color: #fff;
  overflow-wrap: anywhere;
}

.hero-top-set {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 6px;
}

.hero-top-label {
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  margin: 0;
}

.hero-top-value {
  font-size: clamp(30px, 9vw, 40px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  margin: 0;
  color: #fff;
  line-height: 1.15;
}

.hero-note {
  font-size: 10.5px;
  color: rgba(255, 255, 255, .55);
  margin: 8px 0 0;
}

/* ---- section title ---- */
.section-title {
  font-weight: 900;
  font-size: clamp(20px, 6vw, 24px);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 40px 0 6px;
  color: var(--ink);
}

.section-lead {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.6;
  margin: 0 0 14px;
}

/* ---- 用途の一行 ---- */
.usage-line {
  font-size: 12.5px;
  color: var(--sub);
  line-height: 1.7;
  margin: 16px 0 0;
}

/* ---- 常時注記 ---- */
.always-note {
  font-size: 12px;
  color: var(--sub);
  line-height: 1.6;
  margin: 8px 0 16px;
}

/* ---- 白カード共通 ---- */
.card-surface {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 16px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.card-surface:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(27, 29, 31, .08);
}

/* ---- ボタン・CTA ----
   主CTA=黒ピル。副CTA=テキストリンク（下線なし・hoverでink）。赤/青の塗りボタンは使わない。 */
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(27, 29, 31, .24);
}

.cta-text {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.cta-text:hover,
.cta-text:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ad-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--sub);
  margin-left: 2px;
}

/* ---- レアリティ／版バッジ（白地・1px枠・900・最高レアのみゴールド淡塗り） ---- */
.rarity-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--ink);
  background: #fff;
  white-space: nowrap;
}

.rarity-badge.is-top {
  background: rgba(245, 200, 66, .35);
  border-color: rgba(245, 200, 66, .6);
}

.version-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sub);
  background: #fff;
  white-space: nowrap;
}

.ref-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--sub);
  white-space: nowrap;
}

/* ---- 売切れ出品 参考(2026-09-05追補「出品ないカードの参考値」・灰色ピル) ---- */
.soldout-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  color: var(--sub);
  background: #F5F5F3;
  /* 長文(価格帯+店舗数+注記)になるため折り返す。nowrapだと390px幅で横にはみ出す(2026-10-03) */
  white-space: normal;
  overflow-wrap: anywhere;
  border-radius: 12px;
  max-width: 100%;
}

.soldout-top-note {
  font-size: 12px;
  color: var(--sub);
  margin-top: 8px;
}

.box-soldout-line {
  margin-top: 6px;
}

/* ---- 上昇/下落（色だけに頼らない・記号を併用） ---- */
.diff-up { color: var(--up); font-weight: 700; }
.diff-down { color: var(--down); font-weight: 700; }
.diff-flat { color: var(--sub); }

/* ---- フィルタバー ----
   2026-09-07: 常時 sticky をやめた（PC幅ではチップが縦に約350px積み上がり、半透明の
   sticky バーが一覧の上に居座って「フィルタと一覧が被る」状態になっていた）。
   ≤640px は JS がボトムシートへ移すので静的でよく、641〜959px は一覧の上に静的配置、
   ≥960px は左サイドバーのカード（列内 sticky）＝ /tcg/ 入手情報ボードと同じ構成。 */
.filter-bar {
  margin: 20px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--hair);
}

/* チップ群のグループ見出し（サイドバー化した ≥960px だけ表示。SR向けの名前は各 role="group" が持つ） */
.fgroup-label {
  display: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--sub);
}

.filter-scroll-gap {
  margin-top: 8px;
}

/* セット別ページの絞り込み・並び替え（≤959px: 1行の横並び・並び替えは右端） */
.ranking-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 20px;
}

.ranking-controls .ranking-sort {
  margin-left: auto;
}

/* ボトムシート内だけに出す件数（一覧側 #resultCount の写し） */
.filter-count-sheet {
  display: none;
}

.filter-sheet-body .filter-count-sheet {
  display: block;
}

.filter-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 8px;
  padding-bottom: 2px;
}

.filter-scroll::-webkit-scrollbar {
  display: none;
}

.filter-scroll > * {
  flex: 0 0 auto;
}

.filter-chip {
  appearance: none;
  min-height: 44px;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.filter-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---- 色チップ（ワンピのセット別ページのみ。色は公式色相を淡く＋丸＋文字ラベル併記＝色だけに頼らない） ---- */
.color-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.color-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(27, 29, 31, .22);
}

.color-dot.is-red { background: #F4C6BC; }
.color-dot.is-green { background: #C6E6C8; }
.color-dot.is-blue { background: #C3DCF4; }
.color-dot.is-purple { background: #DECBEE; }
.color-dot.is-black { background: #D7D7D7; }
.color-dot.is-yellow { background: #F3E6A6; }
.color-dot.is-other { background: #ECEAE0; }

.filter-chip.color-chip.is-active .color-dot {
  border-color: rgba(255, 255, 255, .7);
}

.filter-select {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.filter-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.filter-search {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 6px 14px;
}

.filter-count {
  font-size: 12px;
  color: var(--sub);
  margin: 10px 0 0;
}

.filter-reset {
  font-size: 12px;
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
}

.active-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.active-pills[hidden] {
  display: none;
}

.active-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
}

/* ---- 一覧（順位の常設列は無し。行=白カード） ---- */
.board-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.board-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 12px;
  align-items: start;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--hair);
  padding: 14px;
  margin-bottom: 10px;
}

.board-row[hidden] {
  display: none;
}

.row-thumb {
  position: relative;
  width: 56px;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #f3f1ea;
}

.thumb-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 8px;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, .9);
  background: rgba(27, 29, 31, .55);
  padding: 1px 2px;
}

.thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--sub);
  font-size: 10.5px;
  text-align: center;
  background: repeating-linear-gradient(45deg, #f3f1ea 0, #f3f1ea 8px, #ece9e0 8px, #ece9e0 16px);
}

.row-main {
  min-width: 0;
}

.row-name {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

.row-name:hover,
.row-name:focus-visible {
  text-decoration: underline;
}

span.row-name {
  cursor: default;
}

.row-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.row-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
}

.row-median-label {
  flex-basis: 100%;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sub);
}

.row-median {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.row-shopcount {
  font-size: 11.5px;
  color: var(--sub);
}

/* デスクトップ専用の追加列（型番・セット名・最安・分布・7日差・楽天リンク） */
.row-extra-desktop {
  display: none;
}

/* モバイル専用の展開（<details>・ネイティブ開閉） */
.row-extra-mobile {
  margin-top: 6px;
}

.row-extra-mobile summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 2px;
  list-style: none;
}

.row-extra-mobile summary::-webkit-details-marker {
  display: none;
}

.row-extra-mobile p {
  font-size: 12px;
  color: var(--sub);
  margin: 6px 0 0;
  line-height: 1.6;
}

.row-extra-mobile .row-cta {
  margin-top: 8px;
}

.row-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 32px;
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.row-cta:hover,
.row-cta:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 641px) {
  .board-row {
    grid-template-columns: 56px 1fr auto;
    align-items: center;
  }

  .row-extra-desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--sub);
  }

  .row-extra-mobile {
    display: none;
  }

  .row-extra-desktop .row-min {
    color: var(--sub);
  }

  .row-extra-desktop .row-cta {
    margin-left: auto;
  }
}

.load-more-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.load-more-row[hidden] {
  display: none;
}

/* 一覧の上: 件数＋適用中の条件ピル（/tcg/ の result-count + active-filters と同じ位置） */
.board-status {
  margin-top: 12px;
}

.board-status .filter-count {
  margin: 0;
}

/* 一覧の末尾: 「全n枚を表示中」＋下限で隠れている枚数のボタン */
.board-list-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--sub);
  text-align: center;
}

.board-list-status[hidden] {
  display: none;
}

.board-list-status .filter-reset {
  color: var(--ink);
}

.board-empty {
  margin: 16px 0 0;
  text-align: center;
}

.board-empty[hidden] {
  display: none;
}

.board-empty-text {
  font-size: 12px;
  color: var(--sub);
  margin: 0;
}

.board-empty .filter-reset {
  display: inline-block;
  margin-top: 8px;
  color: var(--ink);
}

/* ---- TOP3（横断ボードのヒーロー以外では未使用／セット別ページで使用） ---- */
.top3-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.top3-scroller::-webkit-scrollbar {
  display: none;
}

.top3-item {
  scroll-snap-align: start;
  flex: 0 0 260px;
  width: 260px;
  padding: 16px;
}

@media (min-width: 641px) {
  .top3-scroller {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }

  .top3-item {
    flex: none;
    width: auto;
  }
}

.top3-rank {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}

.top3-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 200px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #f3f1ea;
}

.top3-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  margin: 10px 0 2px;
}

.top3-number {
  font-size: 12px;
  color: var(--sub);
  margin: 0 0 8px;
}

.top3-median-label {
  font-size: 11px;
  color: var(--sub);
  margin: 0;
}

.top3-median-value {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}

.top3-min {
  font-size: 12px;
  color: var(--sub);
  margin: 0 0 10px;
}

/* ---- 収録カード・出品状況比較（帯グラフ） ---- */
.compare-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.compare-card {
  padding: 16px;
}

.compare-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.compare-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.compare-release {
  font-size: 11.5px;
  color: var(--sub);
}

.compare-top {
  font-size: 12.5px;
  color: var(--sub);
  margin: 6px 0 0;
}

.compare-top strong {
  color: var(--ink);
  font-weight: 900;
}

.compare-band {
  margin-top: 12px;
}

.band-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--hair);
}

.band-seg {
  height: 100%;
}

.band-seg.b-ge10000 { background: #1B1D1F; }
.band-seg.b-3000 { background: #565a5f; }
.band-seg.b-1000 { background: #9a9d9f; }
.band-seg.b-lt1000 { background: #d4d5d3; }
.band-seg.b-unpriced { background: repeating-linear-gradient(45deg, #eceae2 0, #eceae2 4px, #e2dfd5 4px, #e2dfd5 8px); }

.band-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--sub);
}

.band-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.band-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid var(--hair);
}

.band-legend-swatch.b-ge10000 { background: #1B1D1F; }
.band-legend-swatch.b-3000 { background: #565a5f; }
.band-legend-swatch.b-1000 { background: #9a9d9f; }
.band-legend-swatch.b-lt1000 { background: #d4d5d3; }
.band-legend-swatch.b-unpriced { background: repeating-linear-gradient(45deg, #eceae2 0, #eceae2 3px, #e2dfd5 3px, #e2dfd5 6px); }

.compare-unavailable {
  font-size: 12px;
  color: var(--sub);
  margin-top: 12px;
}

.compare-box {
  font-size: 12.5px;
  color: var(--sub);
  margin: 10px 0 0;
}

.compare-box strong {
  color: var(--ink);
  font-weight: 900;
}

.compare-cta {
  margin-top: 12px;
}

.compare-note {
  font-size: 12px;
  color: var(--sub);
  margin: 10px 0 0;
}

/* ---- BOX section（セット別ページ） ---- */
.box-section {
  margin-top: 8px;
}

.box-stats {
  padding: 16px;
}

.box-min-label {
  font-size: 12px;
  color: var(--sub);
  margin: 0;
}

.box-min-value {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 4px;
  font-variant-numeric: tabular-nums;
}

.box-median,
.box-ratio {
  font-size: 13px;
  color: var(--sub);
  margin: 2px 0;
}

.box-ratio .mark {
  color: var(--ink);
  font-weight: 700;
  padding: 0 2px;
}

.box-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 12px;
}

.box-fixed-note {
  font-size: 11.5px;
  color: var(--sub);
  margin: 10px 0 0;
  line-height: 1.6;
}

/* ---- box chart（依存なしSVG。系列色=ink/sub） ---- */
.box-chart-wrap {
  position: relative;
  margin-top: 16px;
}

.box-chart-svg {
  display: block;
  width: 100%;
  height: 180px;
}

@media (min-width: 641px) {
  .box-chart-svg {
    height: 240px;
  }
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--sub);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
}

.chart-legend-swatch.is-min { background: var(--ink); }
.chart-legend-swatch.is-msrp { background: var(--sub); }

.chart-point {
  cursor: pointer;
}

.chart-crosshair {
  stroke: var(--hair);
  stroke-width: 1;
  pointer-events: none;
}

.chart-crosshair[hidden] {
  display: none;
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(27, 29, 31, .25);
  white-space: nowrap;
  transform: translate(-50%, -100%);
}

.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip-value {
  font-weight: 700;
}

.box-table-details {
  margin-top: 10px;
}

.box-table-details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--sub);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.box-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 12px;
}

.box-table th,
.box-table td {
  text-align: left;
  padding: 6px 4px;
  border-bottom: 1px solid var(--hair);
  font-variant-numeric: tabular-nums;
}

.box-chart-empty {
  font-size: 12px;
  color: var(--sub);
  margin-top: 12px;
}

/* ---- 収録カード一覧（セット別ページ・台帳の全カードを番号順・2026-09-05 v2.7追補） ---- */
.section-lead {
  font-size: 12.5px;
  color: var(--sub);
  margin: 6px 0 0;
}

.cardlist-controls {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cardlist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}

.cardlist-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}

.cardlist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--hair);
}

.cardlist-row[hidden] {
  display: none;
}

.cardlist-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 56px;
  border-radius: 6px;
}

.cardlist-num {
  flex: 0 0 auto;
  width: 34px;
  text-align: right;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--sub);
}

.cardlist-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cardlist-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardlist-price {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 11px;
  color: var(--sub);
  text-align: right;
}

.cardlist-price .soldout-pill {
  text-align: right;
}

.cardlist-price .row-median-label {
  font-size: 10px;
}

.cardlist-price .row-median {
  font-size: 15px;
}

.cardlist-dash {
  font-size: 15px;
  font-weight: 700;
  color: var(--sub);
}

.cardlist-reason {
  font-size: 10px;
  color: var(--sub);
}

/* ---- 出品少・出品なし・判定保留（旧枠。収録カード一覧に統合済みのため未使用。CSSはロールバック用に残置） ---- */
.others-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  list-style: none;
}

.others-row:first-child {
  border-top: none;
}

.others-main {
  flex: 1 1 auto;
  min-width: 0;
}

.others-name {
  font-weight: 700;
  color: var(--ink);
}

.others-reason {
  display: block;
  color: var(--sub);
  margin-top: 2px;
}

/* ---- <details> 共通（レアリティ・出典） ---- */
.section-details {
  margin-top: 20px;
  border-top: 1px solid var(--hair);
  padding-top: 8px;
}

.section-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 0;
}

.section-details p {
  font-size: 13px;
  color: var(--sub);
  margin: 6px 0;
}

.source-section {
  margin-top: 16px;
}

.source-note {
  font-size: 12px;
  color: var(--sub);
  margin: 0;
}

/* ---- footer ---- */
.site-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  color: var(--sub);
}

.site-footer p {
  margin: 0 0 6px;
}

/* ---- ゲームタブ（横断ボード・単一選択） ---- */
.game-tabs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.game-tab {
  min-height: 44px;
  flex: 1 1 auto;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.game-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---- index.html: 一覧ページ（ゲーム別タブ・旧テンプレ互換の名残） ---- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.tab-btn {
  appearance: none;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.tab-btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ---- mobile safety (390px 横スクロール防止・フィルタ行だけ横スクロール可) ---- */
@media (max-width: 480px) {
  .row-median {
    font-size: 18px;
  }

  .board-row {
    padding: 10px;
  }
}

/* ================================================================
   v2.3/v2.4 追加: セット絞り込みUI（ゲーム→グループ→セット・検索パネル）・
   モバイルのボトムシート・行内訳グループ・回遊リンク・収録数まとめ
   ================================================================ */

/* ---- モバイル用の1行サマリー（≤640pxのみ表示・JSがhidden切替） ---- */
.filter-summary-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
}

@media (max-width: 640px) {
  .filter-summary-mobile:not([hidden]) {
    display: flex;
  }
}

.filter-summary-text {
  margin: 0;
  font-size: 12px;
  color: var(--sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-summary-btn {
  flex: 0 0 auto;
  appearance: none;
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

/* ---- セットを選ぶ トリガーボタン ---- */
.set-picker-trigger {
  appearance: none;
  min-height: 44px;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

/* ---- <dialog> 共通リセット ---- */
dialog.filter-sheet-dialog,
dialog.set-picker-dialog {
  color: var(--ink);
  font-family: inherit;
}

dialog.filter-sheet-dialog::backdrop,
dialog.set-picker-dialog::backdrop {
  background: rgba(27, 29, 31, .45);
}

/* ---- モバイルのボトムシート（フィルタ全体） ---- */
dialog.filter-sheet-dialog {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  border: none;
  border-radius: 16px 16px 0 0;
  padding: 0;
  box-shadow: 0 -8px 24px rgba(27, 29, 31, .18);
  overflow: hidden;
}

.filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hair);
}

.filter-sheet-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.filter-sheet-close,
.set-picker-close {
  appearance: none;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  font-size: 20px;
  color: var(--sub);
  cursor: pointer;
}

.filter-sheet-body {
  padding: 12px 16px 20px;
  max-height: calc(85vh - 60px);
  overflow-y: auto;
}

.filter-sheet-body .filter-bar {
  position: static;
  margin: 0;
  padding: 0;
  background: none;
  border-top: none;
}

/* ---- デスクトップ 2カラム（2026-09-07・/tcg/ 入手情報ボードの desktop layout と同型） ----
   .page 全体を 280px + 1fr のグリッドにし、ヒーロー・フッターは全幅、
   検索セクションは自身も同じ列幅のグリッド＝フィルタ一式を左サイドバーのカードに置き、
   見出し・一覧・以降のセクションは右カラムに揃える。 */
@media (min-width: 960px) {
  /* .page-board = 横断ボード(index.html)だけ。セット別/未開封商品ページは従来の1カラム720pxのまま */
  .page-board {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .page-board > * {
    grid-column: 2;
    min-width: 0;
  }

  .page-board > .hero-dark,
  .page-board > .site-footer,
  .page-board > .board-section {
    grid-column: 1 / -1;
  }

  /* セット別ページ(.page-set)も同型。.set-body の中で .set-side(絞り込み・並び替え)を左列へ */
  .page-set {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .page-set > * {
    grid-column: 2;
    min-width: 0;
  }

  .page-set > .hero-dark,
  .page-set > .site-footer,
  .page-set > .set-body {
    grid-column: 1 / -1;
  }

  .board-section,
  .set-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
  }

  .board-section > *,
  .set-body > * {
    grid-column: 2;
    min-width: 0;
  }

  /* セット別: TOP3 の行から本文末尾まで左列を占める（DOM順は ≤959px の表示順のまま） */
  .set-body > .set-side {
    grid-column: 1;
    grid-row: 1 / 20;
  }

  .set-side.ranking-controls {
    display: block;
  }

  .set-side .ranking-sort {
    margin-left: 0;
  }

  /* フィルタ一式＝左サイドバーのカード。見出し行から一覧の末尾まで（1〜5行目）を占め、
     列内で sticky。ビューポートより背が高い環境ではカード内部でスクロールする */
  .board-section > .board-side {
    grid-column: 1;
    grid-row: 1 / 6;
  }

  .board-section > .board-side,
  .set-body > .set-side {
    align-self: start;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    margin: 40px 0 0;
    padding: 14px 14px 16px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(27, 29, 31, .06), 0 8px 24px rgba(27, 29, 31, .06);
  }

  .board-side .filter-bar {
    margin: 0;
    padding: 0;
    border-top: none;
  }

  /* サイドバー内は縦積み＋グループ見出し。チップは横スクロールではなく折り返す */
  .fgroup-label {
    display: block;
    margin-top: 12px;
  }

  .fgroup-label:first-child {
    margin-top: 0;
  }

  .board-side .filter-scroll,
  .set-side .filter-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    padding-bottom: 0;
  }

  .board-side .filter-scroll-gap {
    margin-top: 6px;
  }

  .board-side .filter-chip,
  .board-side .set-picker-trigger,
  .set-side .filter-chip {
    min-height: 36px;
    padding: 5px 10px;
    font-size: 12px;
    white-space: normal;
    text-align: left;
  }

  .board-side .filter-scroll-controls > * {
    flex: 1 1 100%;
  }

  .board-side .filter-select,
  .set-side .filter-select {
    width: 100%;
  }

  .board-side .filter-search-row {
    margin-top: 6px;
  }

  .board-main {
    margin-top: 0;
  }
}

/* ---- セットを選ぶ ダイアログ（デスクトップ・モバイル共通の中央モーダル） ---- */
dialog.set-picker-dialog {
  width: min(480px, 92vw);
  max-height: 80vh;
  margin: auto;
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(27, 29, 31, .18);
  overflow-y: auto;
}

.set-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.set-picker-title {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.set-picker-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.set-picker-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 16px 0 6px;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--ink);
}

.set-picker-group-all {
  appearance: none;
  border: none;
  background: none;
  color: var(--sub);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
  cursor: pointer;
  min-height: 32px;
}

.set-picker-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.set-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 4px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
  cursor: pointer;
}

.set-picker-item-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.set-picker-item-meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--sub);
}

.set-picker-empty {
  font-size: 12px;
  color: var(--sub);
  margin: 12px 0 0;
}

/* ---- 収録カード・出品状況比較（ゲーム/グループ単位のdetails） ---- */
.compare-group-details {
  margin-top: 14px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 12px 14px;
  background: #fff;
}

.compare-group-details summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 900;
  list-style: none;
}

.compare-group-details summary::-webkit-details-marker {
  display: none;
}

.compare-group-details .compare-list {
  margin-top: 12px;
}

/* ---- セット別ページ: 収録数まとめ ---- */
.set-coverage {
  font-size: 12.5px;
  color: var(--sub);
  margin: 10px 0 0;
}

/* ---- セット別ページ: 同じグループの他セット・前後のセット ---- */
.section-title-sm {
  font-weight: 900;
  font-size: 16px;
  margin: 32px 0 8px;
  color: var(--ink);
}

.sibling-sets-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sibling-set-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  text-decoration: none;
}

.sibling-set-link:hover,
.sibling-set-link:focus-visible {
  border-color: var(--ink);
}

.prev-next-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 12.5px;
}

.prev-next-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}

.prev-next-nav a:hover,
.prev-next-nav a:focus-visible {
  text-decoration: underline;
}

.prev-next-nav .prev-next-next {
  margin-left: auto;
  text-align: right;
}

/* ================================================================
   v2.5 追加: 未開封商品ページ（products.html）・横断ボードの商品要約ブロック
   ================================================================ */

/* ---- ヒーロー内の2CTA（暗色背景用。cta-text/row-ctaは明色前提のため専用色） ---- */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 12px;
}

.hero-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(255, 255, 255, .8);
}

.hero-cta-link.is-primary {
  color: #fff;
}

.hero-cta-link:hover,
.hero-cta-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-cta-row .ad-label {
  color: rgba(255, 255, 255, .55);
}

/* ---- 未開封商品の行（product-row。board-rowと同じ白カード＋グリッドだが項目が異なる専用コンポーネント） ---- */
.product-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 12px;
  align-items: start;
  padding: 14px;
  margin-bottom: 10px;
}

.product-meta {
  font-size: 11.5px;
  color: var(--sub);
  margin: 0 0 6px;
}

.product-price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 2px 0;
}

.product-price-label {
  flex-basis: 100%;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sub);
}

.product-price-value {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.product-ratio {
  font-size: 12.5px;
  color: var(--sub);
  margin: 8px 0 0;
}

.product-ratio .mark {
  color: var(--ink);
  font-weight: 700;
  padding: 0 2px;
}

.product-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 10px;
}

/* ---- 横断ボード: 未開封商品（BOX以外）の要約ブロック ---- */
.product-summary-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.product-summary-cta {
  margin-top: 14px;
}

/* ---- v2.11追補「発売前ページ」(status:"pending"・未発売セット) ----
   .page-prerelease は独自グリッドを持たない(=.pageの720px単カラムのまま。サイドバーが無いため) */
.prerelease-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border: 1px solid rgba(37, 99, 235, .5);
  border-radius: 999px;
  background: rgba(37, 99, 235, .15);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
}

.prerelease-badge.is-past-release {
  border-color: rgba(245, 200, 66, .6);
  background: rgba(245, 200, 66, .2);
}

.prerelease-official-link {
  margin: 14px 0;
}

.prerelease-notice {
  font-size: 12.5px;
  color: var(--sub);
  line-height: 1.7;
  margin: 24px 0;
  padding: 12px 14px;
  border: 1px dashed var(--hair);
  border-radius: 12px;
}

.prerelease-cardlist-section,
.prerelease-related-section {
  margin-top: 28px;
}

.prerelease-card-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px 12px;
}

.prerelease-card-item {
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--hair);
}

.prerelease-card-count {
  margin-left: 6px;
  font-size: 11px;
  color: var(--sub);
}

.prerelease-related-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.prerelease-related-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: 12px;
  align-items: start;
  padding: 12px;
}

.prerelease-related-thumb {
  position: relative;
  width: 56px;
  height: 78px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: #f3f1ea;
}

.prerelease-related-name {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}

.prerelease-related-price {
  font-size: 13px;
  color: var(--ink);
  margin: 0 0 6px;
}

.prerelease-related-cta {
  margin: 0;
}

/* ---- 横断ボード: 近日発売（発売前セットへの導線） ---- */
.upcoming-sets-section {
  margin-top: 28px;
}

.upcoming-sets-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.upcoming-set-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
}

.upcoming-set-name {
  font-size: 14px;
  font-weight: 700;
}

.upcoming-set-date {
  font-size: 12px;
  color: var(--sub);
  white-space: nowrap;
}

/* レアリティは横スクロールの末尾へ隠さず、全選択肢を折り返す。 */
#rarityChipScroll {
  flex-wrap: wrap;
  overflow-x: visible;
}

.board-load-notice {
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 8px;
  font-size: 13px;
}
.board-load-notice[hidden] { display: none; }
.board-load-notice p { margin: 0 0 8px; }