/*
 * 白背景。琥珀と緑はウイスキーらしさのために残すが、白の上では明るい色が読めないので
 * 文字に使う色(--amber / --good / --bad)は暗く、面と枠に使う色(--*-dim / --good-line)は
 * 明るく取ってある。組み合わせはWCAG AAで確認済み(本文4.5:1・大きい文字と枠線3:1)。
 * 色を足すときも「文字に使う色」と「面に使う色」を混ぜないこと。
 */
:root {
  --bg: #ffffff;
  --surface: #fbf8f3;
  --surface-2: #f3ece1;
  --border: #d8cbb6;
  --text: #1f1a13;
  --muted: #6b6154;
  --amber: #8a5410;
  --amber-dim: #cf9a4e;
  --good: #156831;
  --good-dim: #d9edde;
  /* 白の上では --good-dim は枠線として薄すぎるので、枠線用に一段濃い緑を別に持つ */
  --good-line: #8fc6a1;
  --bad: #b8332a;
  --radius: 12px;
  /* OSがダークモードでも、スクロールバーとフォーム部品を明るいまま描かせる */
  color-scheme: light;
  /*
   * 画面の文字の大きさはここ1か所で決まる。style.css の font-size は
   * この1行以外すべて rem/em なので、この値を変えると全ページが一律に伸縮する。
   * 15px から一段上げた(2026-09-05)。グリッドの列幅(minmax)は px のままなので
   * カードの列数は変わらず、中の文字だけが大きくなる。
   */
  font-size: 17px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  line-height: 1.6;
}

.muted {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ topbar */

/*
 * 1段。左にブランド、右にサイト内ナビと設定。**全ページで同じものが出る**
 * (src/pages.js の headerHtml())。トップにしか無いもの — 取得状況・「銘柄一覧へ」・
 * 取得ボタン — はヘッダーではなく本文側に置いてある。
 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(180deg, #f7f1e7, var(--bg));
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  flex: none;
}

/* ロゴ自体にサイト名を含む。透過余白を切り詰めた画像なので、高さだけで表示サイズを決める。 */
.brand-name {
  display: flex;
  margin: 0;
  line-height: 0;
}

.brand-logo {
  display: block;
  width: auto;
  height: 2.75rem;
}

.brand:hover .brand-logo {
  opacity: 0.8;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  /* 720px以下でナビをここに重ねるための基準。オフセットは付けないので並びは動かない */
  position: relative;
}

/* ------------------------------------------------------- ヘッダーのナビゲーション
 *
 * 項目と文言は src/pages.js の navHtml() が1か所で持つ。ここは見た目だけ。
 * 主要3本(ホーム・今日の購入候補・条件で探す)と、区切りの右の1本(サイトについて)で
 * 重みを変えている。サイトについてはフッターにも同じリンクがある。
 */
.sitenav {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  overflow-x: auto;
  /* 狭い画面ではリンク列を横スクロールさせる。スクロールバーは出さない */
  scrollbar-width: none;
}

.sitenav::-webkit-scrollbar {
  display: none;
}

.navlink {
  flex: none;
  padding: 0.15rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  /* 現在地の下線ぶんの高さを最初から取り、切り替わっても行がずれないようにする */
  border-bottom: 2px solid transparent;
}

.navlink:hover {
  color: var(--amber);
}

.navlink.is-current {
  color: var(--amber);
  border-bottom-color: var(--amber);
  font-weight: 700;
}

/* サイトについて・プライバシーは主要3本より一段控えめに置く */
.navlink-sub {
  font-size: 0.8rem;
}

.navsep {
  flex: none;
  width: 1px;
  height: 1rem;
  background: var(--border);
}

/* --------------------------------------------------- ハンバーガー(720px以下)
 *
 * ボタンとナビのDOMは全ページ同じものが1組だけ出ている(src/pages.js の headerHtml())。
 * ここで切り替えるのは見た目だけ。
 *
 * **畳む指定はすべて .js-nav の下に置く。** このクラスは public/nav-menu.js が初期化に
 * 成功したときだけ .topbar に付ける。JSが動かない環境で畳むと、「今日の購入候補」と
 * 「条件で探す」へ到達する手段が無くなる(フッターにあるのはサイトについてと
 * プライバシーだけ)ので、その場合は今までどおり横スクロールのナビを出す。
 *
 * 開いているかどうかを .topbar の nav-open で持ち、畳む指定ごとメディアクエリの中に
 * 閉じ込めてある。721px以上ではナビが常に見えていなければならないので、hidden 属性は使わない。
 */
/* .icon-btn の display: inline-flex がこの後ろにあるので、詳細度を1つ上げないと負ける */
.icon-btn.nav-btn {
  display: none;
}

@media (max-width: 720px) {
  .topbar.js-nav .icon-btn.nav-btn {
    display: inline-flex;
  }

  .topbar.js-nav .sitenav {
    display: none;
  }

  /* 歯車のポップアップ(.settings-pop)と同じ見た目にそろえる */
  .topbar.js-nav.nav-open .sitenav {
    display: flex;
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 20;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: 12rem;
    padding: 0.8rem 0.9rem;
    overflow: visible;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(31, 26, 19, 0.13);
  }

  /* 縦に積むので、区切りは縦線ではなく横線にする */
  .topbar.js-nav.nav-open .navsep {
    width: 100%;
    height: 1px;
  }
}

/* --------------------------------------------------------- 設定メニュー(歯車) */

.settings-menu {
  position: relative;
}

.icon-btn {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
}

.icon-btn:hover,
.icon-btn.is-open {
  border-color: var(--amber-dim);
  color: var(--amber);
}

.settings-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  width: 15rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.8rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(31, 26, 19, 0.13);
}

/* display:flex は hidden 属性のUAスタイル(display:none)より詳細度が高いので、明示的に消す */
.settings-pop[hidden] {
  display: none;
}

/* 畳んだぶん幅に余裕があるので、ラベルと入力を両端に寄せる */
.settings-pop .shipping-setting {
  justify-content: space-between;
}

.settings-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}

/*
 * ナビを出しきる幅が無いときは、サイト名を読み上げ用にだけ残す。🥃 のマークが
 * トップへ戻すリンクとして残る。display:none にしないのは、トップではこれが h1 だから。
 *
 * 閾値720pxは実測から決めた(当時はナビ5本で368px要った。いまは4本)。サイト名を出すと可視幅は641pxで337px・
 * 600pxで350pxしか残らず、どちらも最後の「プライバシー」が切れる。サイト名を外すと
 * 375pxでも268pxが空き、主要3本(ホーム・今日の購入候補・条件で探す)は必ず出る。
 * ここだけ640pxのブレークポイントに乗らないのはこのため。
 *
 * **ハンバーガーに畳めているあいだ(.js-nav)は、この理由が消えるのでサイト名を出す。**
 * ナビが display:none になり、幅を取り合う相手が居なくなるため。畳めなかったとき
 * (JSが動かず横スクロールのナビが残る)は上の実測がそのまま効くので、隠したままにする。
 */
@media (max-width: 720px) {
  .topbar:not(.js-nav) .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* 畳んだヘッダーは 🥃 サイト名 … ☰ ⚙ の1行。長い名前で折り返さないよう1行に留める */
  .topbar.js-nav .brand-name {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------ ページの先頭へ戻るボタン
 *
 * 全ページに出る(src/pages.js の backToTopHtml())。出す/隠すは public/scroll.js が
 * hidden 属性で切り替えるので、display は [hidden] 側で必ず打ち消す
 * (クラスセレクタのほうが [hidden] のUAスタイルより詳細度が高い)。
 */
.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 15;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(31, 26, 19, 0.15);
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top:hover {
  border-color: var(--amber-dim);
  color: var(--amber);
}

/* --------------------------------------- トップ本文の取得状況(ヘッダーから移した) */

.run-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.2rem;
}

.shipping-setting {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

/* 送料込みのみに絞っているあいだ、仮定送料は結果に効かないので触れないことを見せる */
.shipping-setting.is-idle {
  opacity: 0.45;
}

.shipped-only {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}

.shipped-only input {
  accent-color: var(--amber);
  cursor: pointer;
}

.shipping-setting input {
  width: 5.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  font-family: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 送料が不明で仮定送料を足していることを示す注記 */
.ship-note {
  display: block;
  font-size: 0.68rem;
  color: var(--amber);
  font-variant-numeric: normal;
}

.btn-primary {
  background: var(--amber);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary:hover:not(:disabled) {
  background: #6f440c;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* 管理者ログイン/ログアウト。取得ボタンより控えめに置く */
.btn-ghost {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.btn-ghost:hover {
  border-color: var(--amber-dim);
  color: var(--amber);
}

/* リンクを同じ見た目のボタンとして使う箇所(ヘッダーの導線)。下線は丸ボタンに合わない */
a.btn-ghost {
  display: inline-block;
  text-decoration: none;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* ------------------------------ 予算から選ぶ購入候補 (/budget) への入口バナー
 *
 * **トップ本文にしか出ない。** クラス名はここでしか使っていないので、銘柄ページ・
 * 一覧ページ・/budget の見た目は1pxも変わらない(走行中のA/B実験の対照群を
 * 巻き込まないため。→ docs/monetization.md §7)。
 * バナー自体は public/index.html の静的なHTMLで、public/app.js は描き直さない
 * (付けるのはクリック計測のリスナだけ。→ CLAUDE.md 決まり4-b)。
 */

.budget-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.6rem;
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 見出しと説明。ボタンを右へ寄せるため、ここだけが伸び縮みする */
.budget-banner-text {
  flex: 1 1 16rem;
}

/* 節の見出し(.section-head h2)と同じ大きさ・同じ琥珀にそろえる */
.budget-banner-text h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.budget-banner-text p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.budget-banner-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* .btn-primary と同じ琥珀の丸ボタン。金額を大きく出すぶん、余白と字だけ一段太らせる */
.budget-banner-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  padding: 0.6rem 1.25rem;
  background: var(--amber);
  color: #ffffff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}

.budget-banner-btn span {
  font-size: 0.78rem;
  font-weight: 600;
}

.budget-banner-btn:hover {
  background: #6f440c;
}

/* 3つの金額から外れる人の逃げ道。ボタンと競らないよう文字リンクのまま置く */
.budget-banner-more {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}

/*
 * 狭い画面。3つを等幅で1行に収める(横並びのままだと2つ+1つで折り返し、
 * 3つを縦に積むと出物カードが画面外まで押し下がる)。
 * 375px では1行の幅が約299pxしかなく、金額と「まで」を横に並べたままでは
 * 1つぶん(約145px)が入らないので、ボタンの中だけ縦積みにして幅を詰める。
 * 金額の文字は本文と同じ大きさのまま変えない。
 */
@media (max-width: 640px) {
  .budget-banner-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
  }

  .budget-banner-btn {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0.5rem 0.4rem;
    line-height: 1.25;
  }
}

/* ----------------------------------------------------------------- notices */

.notice {
  background: var(--surface-2);
  border: 1px solid var(--amber-dim);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.notice h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.notice ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}

.notice code {
  background: #e7ddcc;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ---------------------------------------------------------------- sections */

.section {
  margin-bottom: 2.5rem;
}

.section-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.section-head h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.controls {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.controls input,
.controls select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-family: inherit;
}

/* ------------------------------------------------------------------- deals */

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
  gap: 1rem;
}

/* ------------------------------------------------- 産地で絞り込むタブ(トップだけ)
 *
 * 押すと public/app.js が .deal-card に hidden を付け外しする。.deal-card の
 * display: flex は [hidden] のUAスタイルより強いので、ここで打ち消しておかないと隠れない。
 */
/*
 * 見た目はヘッダーのナビ(.navlink)と同じ「現在地＝琥珀の下線」に揃えてある。
 * 丸いピルだと6個が671pxでも375pxでも2行に折り返し、縦を76px使っていた(2026-09-06実測。
 * 下線タブなら1行33px)。下線ぶんの高さは最初から透明の border で取り、選択が
 * 切り替わっても行がずれないようにする(.navlink と同じ手)。
 */
.deal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.deal-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.2rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.deal-tab:hover {
  color: var(--text);
  border-bottom-color: var(--amber-dim);
}

.deal-tab.is-current {
  border-bottom-color: var(--amber);
  color: var(--amber);
  font-weight: 700;
}

.deal-tab-count {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.deal-tab.is-current .deal-tab-count {
  color: var(--amber);
}

.deal-card[hidden] {
  display: none;
}

.deal-card {
  background: var(--surface);
  border: 1px solid var(--good-line);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}

.deal-card:hover {
  border-color: var(--good);
  transform: translateY(-2px);
}

.deal-card .head {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.deal-card img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 8px;
  flex-shrink: 0;
}

.deal-card .name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
}

/* 銘柄名は銘柄ページ(/w/<slug>)へのリンク。カード内で浮かないよう下線はホバー時だけにする
   (.cell-name a と同じ考え方)。 */
.deal-card .name a {
  color: inherit;
  text-decoration: none;
}

.deal-card .name a:hover {
  text-decoration: underline;
}

/* stretched link。銘柄名のリンクをカード全面に広げ、カードのどこを押しても銘柄ページへ行く
   当たり判定を作る。JSのクリックハンドラではなくリンクの::afterでやるのは、キーボード操作や
   中クリック(新規タブ)がリンクそのものの挙動としてそのまま効くようにするため。 */
.deal-card .name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* .deal-goは上のstretched linkの下に隠れてしまうので、重ねて手前に出す。
   .deal-goは.prose(サイトについて等の本文)でも使われる汎用クラスなので、
   ここは.deal-card配下に限定する。 */
.deal-card .deal-go {
  position: relative;
  z-index: 1;
}

.deal-card .maker {
  color: var(--muted);
  font-size: 0.78rem;
}

.badge {
  background: var(--good);
  color: #ffffff;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
}

.prices {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.price-now {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--good);
  font-variant-numeric: tabular-nums;
}

.price-list {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.deal-card .shop {
  color: var(--muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-go {
  display: block;
  text-align: center;
  background: var(--good-dim);
  color: var(--good);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-go:hover {
  background: var(--good);
  color: #ffffff;
}

.tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.tag {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.05rem 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.tag.warn {
  border-color: var(--amber-dim);
  color: var(--amber);
}

/* 配送地域が限られていて、そもそも買えない可能性がある出品 */
.tag.alert {
  border-color: var(--bad);
  color: var(--bad);
}

.empty {
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  font-size: 0.9rem;
}

/* ------------------------------------------------- 折りたたみ(出物・産地別) */

/* summary を flex にすると既定の ::marker が消えるので、開閉の向きは自前の ▾ で示す */
.brand-group > summary::before {
  content: '▾';
  font-size: 0.95em;
  line-height: 1;
  color: var(--amber);
  transition: transform 0.15s;
}

.brand-group:not([open]) > summary::before {
  transform: rotate(-90deg);
}

/* Safari 以外は list-item のままだと二重に出る */
.brand-group > summary::marker,
.brand-group > summary::-webkit-details-marker {
  content: '';
  display: none;
}

/*
 * 産地別の <details> を縦に並べる器。/list 索引ページの銘柄一覧(#list-brand-groups)と、
 * トップの管理者用の表(public/app.js が描き足す .admin-brand-groups)の両方で使う。
 */
#list-brand-groups,
.admin-brand-groups {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.brand-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.brand-group > summary {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  user-select: none;
  padding: 0.8rem 1rem;
  font-weight: 600;
  transition: background 0.15s;
}

.brand-group > summary:hover {
  background: var(--surface-2);
}

.brand-group[open] > summary {
  border-bottom: 1px solid var(--border);
}

.group-name {
  color: var(--amber);
  letter-spacing: 0.06em;
}

.group-count {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

/* 表の枠は .brand-group 側が持つので、内側の .table-wrap からは外す */
.brand-group .table-wrap {
  border: 0;
  border-radius: 0;
}

.group-more {
  margin: 0;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------------- table */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 760px;
}

th,
td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

thead th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

thead th[data-sort] {
  cursor: pointer;
  user-select: none;
}

thead th[data-sort]:hover {
  color: var(--text);
}

tbody tr {
  cursor: pointer;
}

tbody tr:hover {
  background: var(--surface);
}

tbody tr.is-deal {
  background: rgba(21, 104, 49, 0.06);
}

tbody tr:last-child td {
  border-bottom: none;
}

.cell-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/*
 * 銘柄名は銘柄ページ(/w/<slug>)へのリンク。行のクリックはモーダルなので、
 * リンクだと分かる見た目にはするが、表の中で浮かないよう下線はホバー時だけにする。
 */
.cell-name a {
  color: inherit;
  text-decoration: none;
}

.cell-name a:hover {
  text-decoration: underline;
}

.conf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.conf-high {
  background: var(--good);
}

.conf-medium {
  background: var(--amber);
}

.conf-low {
  background: var(--bad);
}

.pos {
  color: var(--good);
  font-weight: 700;
}

.neg {
  color: var(--muted);
}

.shop-cell {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

/* ------------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* display:flex が [hidden] のUA既定(display:none)に勝ってしまうので明示的に打ち消す */
.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 26, 19, 0.45);
}

.modal-body {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 780px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 1.5rem;
}

/* .section の margin-bottom: 2.5rem がモーダル最下部に余分な余白を作るので打ち消す */
.modal-body .section:last-child {
  margin-bottom: 0;
}

.modal-close {
  /* .modal-body はスクロールするので、absolute だと中身と一緒に流れて画面外へ消える。
     sticky + float にして、スクロールしても右上に貼り付いたまま本文が横に回り込むようにする。 */
  position: sticky;
  top: 0;
  float: right;
  margin: 0 0 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* モバイルで押せる大きさを下回らせない */
  width: 44px;
  height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.modal-close:hover {
  background: var(--surface);
  border-color: var(--amber-dim);
  color: var(--amber);
}

.modal-close:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.modal-section {
  margin-top: 1.5rem;
}

.modal-section h3 {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--amber);
  margin: 0 0 0.6rem;
}

.price-edit {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.price-edit input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.4rem 0.6rem;
  width: 130px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.price-edit button {
  background: var(--surface-2);
  border: 1px solid var(--amber-dim);
  color: var(--amber);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  font-family: inherit;
}

.offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.offer-list li {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.6rem 0.8rem;
}

.offer-list li.under {
  border-color: var(--good-line);
}

.offer-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 92px;
  text-align: right;
}

.offer-meta {
  flex: 1;
  min-width: 0;
}

.offer-meta a {
  color: var(--text);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

.offer-meta a:hover {
  color: var(--amber);
}

.spark {
  width: 100%;
  height: 110px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}

/*
 * 価格推移グラフの線。stroke はCSSプロパティなので、app.js が組み立てるSVGでは
 * 色を属性に書かずここで指定する(配色の変更をこのファイルだけで済ませるため)。
 * 太さと破線の間隔はグラフの意味に属するので app.js 側の属性のまま。
 */
.spark-grid {
  stroke: var(--border);
}

.spark-listprice {
  stroke: var(--amber);
}

.spark-line {
  stroke: var(--good);
}

.spark-wrap {
  position: relative;
}

/* 日付ラベル。SVGは preserveAspectRatio="none" で横に伸ばしているので、
   <text> で描くと文字まで歪む。HTMLで下に置いて位置だけ合わせる。 */
.spark-axis {
  position: relative;
  height: 1.1rem;
  margin-top: 0.2rem;
}

.spark-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* 両端だけは枠の内側に収める */
.spark-label-first {
  transform: none;
}

.spark-label-last {
  transform: translateX(-100%);
}

/*
 * 目盛りの本数の出し分け。public/shared/sparkline.js はDOMに触れられないため
 * matchMedia を使わず、6本用・4本用の両方を常にHTMLへ出しておいて、ここで
 * 画面幅に応じて片方を隠す(<g> の既定値は display: inline)。既定は6本、
 * 640px以下では6本だとラベルどうしが詰まる(375px幅で隙間が1pxしか残らない)ので4本に落とす。
 */
.spark-grid-narrow,
.spark-axis-narrow {
  display: none;
}

@media (max-width: 640px) {
  .spark-grid-wide,
  .spark-axis-wide {
    display: none;
  }

  .spark-grid-narrow {
    display: inline;
  }

  .spark-axis-narrow {
    display: block;
  }
}

details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
}

.reject-table {
  font-size: 0.78rem;
  margin-top: 0.6rem;
  min-width: 0;
}

.reject-table td {
  padding: 0.25rem 0.5rem;
  color: var(--muted);
}

/* -------------------------------------------------------- 管理者ログイン */

.login-body {
  max-width: 380px;
}

/*
 * 旧 .modal-body h2 をここへ付け替えたもの。.modal-body h2 と .section-head h2 は
 * 詳細度が同じ (0,1,1) なので、後勝ちの .modal-body h2 が .section-head h2 の
 * color: var(--amber) を打ち消してしまっていた。詳細モーダルの本文は今回の変更で
 * /w/:slug と同じHTML(.section-head h2 を含む)をサーバから受け取るようになったため、
 * 節見出しが琥珀色を失わないよう、旧 .modal-body h2 の対象を
 * <form class="modal-body login-body"> 配下の <h2 id="login-title"> だけに絞る。
 */
.login-body h2 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.login-body label {
  display: block;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.login-body input {
  width: 100%;
  margin-top: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
}

.login-body input:focus {
  outline: none;
  border-color: var(--amber-dim);
}

.login-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

/* ------------------------------------------------------- 銘柄ページ (/w/…) */

a.brand {
  color: var(--text);
  text-decoration: none;
}

.crumbs {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.crumbs a {
  color: var(--amber);
}

.page-title {
  margin: 0 0 0.3rem;
  font-size: 1.6rem;
}

/* 広告表示(景表法)。出品リンクの直前に置く。目立たせすぎず、見落とされない程度にする。 */
.ad-note {
  color: var(--muted);
  font-size: 0.8rem;
  margin: 0 0 0.7rem;
}

/* 銘柄ページの「Amazonでも探す」。価格を持たない検索リンクなので、
 * 出品一覧の外に一段小さく置き、総額比較の行と見分けが付くようにする。 */
.amazon-search {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
}

.amazon-search a {
  color: var(--amber);
}

/* トップの「実勢価格以下の出物」だけ一段大きくする。このページの主題なので、
 * 他の節(.section-head h2 は 1rem)と同じ大きさだと出物カードに埋もれる。
 * #deals-section は public/index.html にしかないので、/w/・/list・/budget の
 * 節見出しは1バイトも変わらない */
#deals-section .section-head h2 {
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

/* 上の見出しに続く、この一覧が何かの説明。本文と同じ大きさで読ませる。
 * 幅は絞らない — 同じ節の見出し・広告表示・産地タブ・出物カードはどれも main の
 * 幅いっぱいまで伸びるので、ここだけ 46rem で止めると左端しか揃わない */
.deals-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 0.7rem;
}

.deals-note strong {
  color: var(--text);
  font-weight: 600;
}

/* 固定ページ(サイトについて・プライバシーポリシー)は読み物しか置かないので、
 * パンくず・見出し・本文をまとめて中央の1カラムに寄せる。box-sizing: border-box なので
 * 左右の padding(1.5rem × 2)を足して、本文の幅を .prose の 46rem に保つ */
main.static-page {
  max-width: calc(46rem + 3rem);
}

/* 固定ページ(サイトについて・プライバシーポリシー)の本文。読み物なので幅を絞る。 */
.prose {
  max-width: 46rem;
  line-height: 1.8;
}

.prose h2 {
  font-size: 1.05rem;
  margin: 2rem 0 0.6rem;
}

.prose p,
.prose ul {
  margin: 0 0 0.9rem;
}

.prose ul {
  padding-left: 1.2rem;
}

.prose li {
  margin-bottom: 0.3rem;
}

.prose a {
  color: var(--amber);
}

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 0;
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.summary-label {
  font-size: 0.8rem;
  color: var(--muted);
}

.related-links,
.foot-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.related-links a {
  display: inline-block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
}

.related-links a:hover {
  border-color: var(--amber-dim);
  color: var(--amber);
}

/* ------------------------------------------------------------------ footer */

/* 全銘柄への導線。検索エンジンがトップページ以外を見つける入口も兼ねる。 */
.foot-links {
  margin-bottom: 1.5rem;
}

.foot-links h2 {
  font-size: 0.85rem;
  margin: 0 0 0.8rem;
  color: var(--text);
}

.foot-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 2rem;
}

.foot-group h3 {
  font-size: 0.8rem;
  margin: 0 0 0.4rem;
  color: var(--amber);
  font-weight: 600;
}

.foot-group li {
  display: inline;
}

/* 銘柄名どうしが地続きに見えないよう区切る(最後の1件には付けない) */
.foot-group li:not(:last-child)::after {
  content: " ・ ";
  color: var(--border);
}

.sitefoot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
}

.sitefoot p {
  margin: 0 0 0.5rem;
}

.sitefoot p:last-child {
  margin-bottom: 0;
}

.sitefoot a {
  color: var(--amber);
}

/* 広告表示と年齢の注記。他のフッター文より一段強い色にして埋もれさせない。 */
.foot-note {
  color: var(--text);
}

.foot-pages {
  margin-top: 0.8rem;
}

/* 管理者ログイン。閲覧の邪魔をしないよう、フッターの下に小さく畳んで置く */
.admin-foot {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
  text-align: right;
}

.admin-foot .btn-ghost {
  padding: 0.25rem 0.7rem;
  font-size: 0.72rem;
  opacity: 0.55;
}

.admin-foot .btn-ghost:hover {
  opacity: 1;
}

@media (max-width: 640px) {
  /*
   * 1段のまま。ブランドを縮め、ナビは横スクロールさせる。歯車は常に右端に見えている
   * 必要があるので、縮むのはナビの側だけ(.brand と .icon-btn は flex:none)。
   */
  .topbar {
    gap: 0.7rem;
    padding: 0.7rem 1rem;
  }
  .brand-logo {
    width: auto;
    height: 2.375rem;
  }
  .sitenav {
    gap: 0.8rem;
  }
  /* 端で切れて続きがあると分かるよう、右端に余白を1つ足しておく */
  .sitenav::after {
    content: '';
    flex: none;
    width: 0.2rem;
  }
  main {
    padding: 1rem;
  }
  .sitefoot {
    padding: 1rem 1rem 2rem;
  }
  .admin-foot {
    padding: 0 1rem 1.5rem;
  }
  .controls {
    margin-left: 0;
    width: 100%;
  }
  .controls input {
    flex: 1;
  }
  .topbar-actions {
    gap: 0.6rem;
  }
  /* 歯車の幅ぶんだけ左に寄せないと、画面の右端からはみ出す */
  .settings-pop {
    right: -0.25rem;
    width: min(15rem, calc(100vw - 2rem));
  }
}

/* ------------------------------------------ 一覧ページの「おすすめ◯選」本文 (src/content/lists/)
 *
 * セレクタはすべて .prose の中に限定してある。.prose を使っているのは固定ページ
 * (サイトについて・プライバシーポリシー)とこの本文だけで、固定ページ側に h3 と .deal-go は
 * 1つも無いので、登録の無い24ページを含む他の画面の見た目は変わらない。
 */

/* 推薦の1本ずつを区切る。カードにはせず、罫線1本だけで読み物の流れを保つ */
.prose h3 {
  font-size: 1.02rem;
  margin: 1.6rem 0 0.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.prose h3 a {
  text-decoration: none;
}

.prose h3 a:hover {
  text-decoration: underline;
}

/* .deal-go は本来カード内で全幅に敷く帯。本文の中では文章に混ぜて置ける大きさにする */
.prose .deal-go {
  display: inline-block;
  margin-right: 0.8rem;
}

/* ------------------------------------------------ 予算から選ぶ購入候補 (/budget)
 *
 * セレクタはすべて #budget-page 配下に限定してある。このIDが付くのは
 * src/pages.js の renderBudgetPage() が描く <main> だけなので、
 * 銘柄ページ・一覧ページ・トップページの見た目は1pxも変わらない
 * (走行中のA/B実験の対照群を巻き込まないため)。
 */

/* 本文もカード・表と同じ幅・同じ左端にそろえる。.prose は既定で 46rem(=690px)に
 * 絞られるが、このページはカードと表が主役で、読み物だけ幅が違うと段がずれて見える。
 * .prose は固定ページと /list/10000-20000(走行中のA/B実験)も使うので、
 * 解除するのは #budget-page 配下だけにする。
 * パンくずと見出しは既定で全幅なので指定しない */
#budget-page .prose {
  max-width: none;
}

/* 条件のフォーム。狭い画面では1列に落ちる */
#budget-page .budget-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.4rem;
  margin: 1.2rem 0 0.4rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#budget-page .budget-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#budget-page .budget-field > label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

#budget-page .budget-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#budget-page .budget-form input[type='number'] {
  width: 8.5rem;
  padding: 0.45rem 0.6rem;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

#budget-page .budget-form select {
  padding: 0.45rem 0.6rem;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

#budget-page .budget-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
}

/* 候補カード。1枚に金額・送料・販売店・取得日時・選定理由まで入れる */
#budget-page .pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

#budget-page .pick-card {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

#budget-page .pick-rank {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--amber);
}

#budget-page .pick-name {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  line-height: 1.4;
}

#budget-page .pick-name a {
  color: var(--text);
  text-decoration: none;
}

#budget-page .pick-name a:hover {
  text-decoration: underline;
}

#budget-page .pick-total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.7rem 0 0;
}

#budget-page .pick-total-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

#budget-page .pick-total-note {
  margin: 0.15rem 0 0;
}

/* 事実の一覧。ラベルと値を2列で並べ、狭い画面でも折り返さないようにする */
#budget-page .pick-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0.9rem 0 0;
  padding: 0.8rem 0 0;
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

#budget-page .pick-facts > div {
  display: contents;
}

#budget-page .pick-facts dt {
  color: var(--muted);
  white-space: nowrap;
}

#budget-page .pick-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

#budget-page .pick-reasons {
  margin: 0.9rem 0 0;
  padding: 0.8rem 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  border-top: 1px solid var(--border);
}

#budget-page .pick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  /* カードの高さが揃うよう、リンクは常に最下段に置く */
  margin-top: auto;
  padding-top: 0.9rem;
}

/* 表の中の補助表記(「合計」「概算」「楽天」)は、金額・店名の下に小さく回す */
#budget-page table .ship-note {
  display: block;
}

@media (max-width: 640px) {
  #budget-page .budget-form {
    flex-direction: column;
    align-items: stretch;
  }
  #budget-page .budget-form select {
    width: 100%;
  }
  /* 「円まで」を金額の右に置いたまま、入力欄だけを残り幅いっぱいに伸ばす */
  #budget-page .budget-form input[type='number'] {
    flex: 1;
    width: auto;
  }
  /* 1列に落として、金額と購入条件が横スクロールなしで読めるようにする */
  #budget-page .pick-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   新発売・抽選販売情報 (/news) — 2026-09-06
   すべて .news-* に閉じてある。既存の銘柄ページ・一覧ページ・トップの
   セレクタには一切かからない(触るとA/B実験の対照群を巻き込むため)。
   ========================================================================== */

/*
 * トップに置く新発売・抽選販売の抜粋(最大5件)。#deals の外なのでJSの描き直しに
 * 巻き込まれない(決まり4-b)。カードの見た目は /news の .news-card に寄せてあるが、
 * こちらは1枚がまるごと /news へのリンクなので別クラスにしてある。
 */
.news-banner {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 告知が1件も無いときは従来どおりの1行の案内に縮退する */
.news-banner--empty {
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}

.news-banner-head {
  margin-bottom: 0.8rem;
}

/* 節の見出し(.section-head h2)・予算バナーと同じ大きさ・同じ琥珀にそろえる */
.news-banner-head h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.news-banner-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.news-banner-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
}

/* カード全体がリンク。文字色は本文のままにして、リンクだと分かるのは枠の反応で示す */
.news-banner-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  height: 100%;
  padding: 0.7rem 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.news-banner-card:hover {
  border-color: var(--amber);
}

.news-banner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* 商品名。長い告知名でも3行までに留めて、カードの高さをそろえる */
.news-banner-name {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.news-banner-when {
  font-size: 0.82rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.news-banner-when-label {
  margin-right: 0.35rem;
  color: var(--muted);
}

.news-banner-seller {
  margin-top: auto;
  font-size: 0.78rem;
  color: var(--muted);
}

.news-banner-more {
  color: var(--amber);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.news-banner-more:hover {
  text-decoration: underline;
}


/*
 * 狭い画面では横スクロールの1行にする。縦に5枚積むと375pxで921px(≒1.1画面)になり、
 * 出物カード(#deals-section)が2画面目まで押し下がる。ここは収益に直結する節なので、
 * 告知のためにその位置を明け渡さない。1.15枚ぶんの幅にして、右にまだ続くことを見せる。
 *
 * 閾値はヘッダーをハンバーガーに畳む720pxに合わせてある。格子のままだと
 * 654pxで2列×3行=609px、721pxで3列と、この帯だけ縦に伸びるため。
 */
@media (max-width: 720px) {
  .news-banner-list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* カードの影と枠が切れないぶんの余白 */
    padding-bottom: 0.2rem;
  }

  .news-banner-item {
    flex: 0 0 min(86%, 15rem);
    scroll-snap-align: start;
  }

  .news-banner-card {
    padding: 0.6rem 0.7rem;
  }

  /* 横に流すぶん、1枚の高さは名前2行までにそろえる */
  .news-banner-name {
    -webkit-line-clamp: 2;
    font-size: 0.88rem;
  }
}

.news-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.2rem 1rem 3rem;
}
.news-lead {
  margin: 0 0 0.8rem;
}
.news-caution {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--muted);
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0 0 0.8rem;
}
.news-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.news-filter-label {
  font-size: 0.8rem;
  color: var(--muted);
}
/* ヘッダーのナビと同じ「下線タブ」の語彙にそろえる。選択で行がずれないよう、
   下線ぶんの高さは最初から透明の border-bottom で確保する(.navlink と同じ手) */
.news-filter {
  padding: 0.25rem 0.1rem;
  border-bottom: 2px solid transparent;
  color: var(--text);
  font-size: 0.9rem;
  text-decoration: none;
}
.news-filter:hover {
  border-bottom-color: var(--border);
}
.news-filter.is-current {
  border-bottom-color: var(--amber-dim);
  font-weight: 600;
}

.news-count {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.news-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.news-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.news-kind,
.news-state {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
/*
 * 種類は**塗り**、状態は**薄い面か枠だけ**。役割で塗り方を分けているので、抽選の琥珀と
 * 「受付中」の緑が同じカードに並んでも、どちらが何かが読める。色は既存の2色
 * (琥珀・緑)から出ていて、白抜き文字のコントラストは 白/#8a5410 = 7.5:1、
 * 白/#156831 = 7.9:1(いずれもWCAG AAの本文4.5:1を満たす)。
 */
.news-kind {
  background: var(--surface-2);
  color: var(--text);
}

.news-kind--lottery {
  background: var(--amber);
  color: #ffffff;
}

.news-kind--release {
  background: var(--good);
  color: #ffffff;
}
.news-state {
  border: 1px solid var(--border);
  color: var(--muted);
}
/* 受付中だけを緑にする。「受付状況は公式で確認」は緑にしない
   (締切の時刻が公式に書かれていないものを「まだ間に合う」と見せないため) */
.news-state--open {
  background: var(--good-dim);
  border-color: var(--good-line);
  color: var(--good);
}
.news-state--closed {
  color: var(--muted);
}

.news-name {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  line-height: 1.4;
}
.news-seller {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.news-dates {
  margin: 0 0 0.6rem;
}
.news-dates div {
  display: flex;
  gap: 0.6rem;
  padding: 0.15rem 0;
  font-size: 0.9rem;
}
.news-dates dt {
  flex: 0 0 5.2rem;
  color: var(--muted);
}
.news-dates dd {
  margin: 0;
}

.news-price {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.news-conditions {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.news-conditions li {
  margin-bottom: 0.2rem;
}
.news-checked {
  margin: auto 0 0.6rem;
  padding-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.news-links {
  margin: 0;
}
.news-official {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--amber);
  border-radius: 8px;
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
}
.news-official:hover {
  text-decoration: underline;
}
.news-empty {
  padding: 2rem 0;
}

.news-pager {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.news-pager-link {
  color: var(--amber);
  text-decoration: none;
}
.news-pager-link.is-off {
  color: var(--muted);
}
.news-pager-now {
  font-size: 0.85rem;
  color: var(--muted);
}

/* カードの左端にも種類の色を通す。バッジまで目を落とさなくても、面で種類が分かる */
.news-card--lottery,
.news-banner-card--lottery {
  border-left: 3px solid var(--amber-dim);
}

.news-card--release,
.news-banner-card--release {
  border-left: 3px solid var(--good-line);
}

@media (max-width: 640px) {
  .news-list {
    grid-template-columns: 1fr;
  }
  .news-dates dt {
    flex-basis: 4.6rem;
  }
}