/* index.css — オークション一覧ページ固有のスタイル */

.auction-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 64px;
}

.auction-page__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* セクション見出し（オークション一覧／今月の出品苗動画）は同じスタイルで統一する。
   .top-video__title と値を揃えて、一覧ページ内の見出しに一貫性を持たせる。 */
.auction-page__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #111827;
}

/* ── タブ ── */
.auction-tabs {
  display: flex;
  border-bottom: 1px solid #d1d5dc;
}

.auction-tabs__item {
  display: flex;
  align-items: center;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  font-family: "Noto Sans JP", "Inter", sans-serif;
  color: #6a7282;
  background-color: #ffffff;
  border: 1px solid #d1d5dc;
  border-bottom: none;
  line-height: 24px;
  cursor: pointer;
}

/* 表示モードボタン(.auction-toolbar__view-btn--active)と同じトーン: 薄い緑+緑枠+緑文字 */
.auction-tabs__item--active {
  background-color: #f0fdf4;
  color: #008236;
  border-color: #008236;
  border-bottom: 2px solid #008236;
}

/* ── ツールバー ── */
.auction-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
  gap: 16px;
}

.auction-toolbar__label {
  font-size: 16px;
  font-weight: 500;
  color: #364153;
  white-space: nowrap;
  flex-shrink: 0;
}

.auction-toolbar__sort {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auction-toolbar__dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auction-toolbar__dropdown {
  appearance: none;
  width: 184px;
  height: 40px;
  padding: 0 40px 0 16px;
  border: 1px solid #d1d5dc;
  background-color: #ffffff;
  font-size: 16px;
  color: #0a0a0a;
  cursor: pointer;
}

/* セレクトボックスのフォーカス時は検索インプットと同じ緑枠で統一する
   （iOSデフォルトの青枠を上書き） */
.auction-toolbar__dropdown:focus,
.auction-toolbar__dropdown:focus-visible {
  outline: 2px solid #00a63e;
  outline-offset: -2px;
  border-color: #00a63e;
}

.auction-toolbar__dropdown-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.auction-toolbar__view {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auction-toolbar__view-buttons {
  display: flex;
  gap: 6px;
}

.auction-toolbar__view-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5dc;
  background-color: #ffffff;
  color: #364153;
  transition: background-color 0.2s;
}

.auction-toolbar__view-btn:hover {
  background-color: #f3f4f6;
}

.auction-toolbar__view-btn--active {
  background-color: #f0fdf4;
  border-color: #008236;
  color: #008236;
}

.auction-toolbar__search,
.auction-toolbar__genus {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auction-toolbar__genus-input {
  width: 180px;
  padding-right: 16px;
}

/* 属名selectが未選択（value="" がchecked）のときだけ、検索のplaceholderと同じグレーで表示。
   属名を選択すると通常色に戻る */
/* 属名・並び替えなど select の value="" 選択時は、検索inputのplaceholderと同じグレーで表示。
   詳細度の上書き対策で .auction-toolbar__dropdown を二重指定し他のクラス指定に勝てるようにする */
.auction-toolbar__dropdown.auction-toolbar__dropdown:has(option[value=""]:checked) {
  color: rgba(10, 10, 10, 0.5);
}

.auction-toolbar__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auction-toolbar__search-input {
  width: 232px;
  height: 40px;
  padding: 8px 40px 8px 16px;
  border: 1px solid #d1d5dc;
  background-color: #ffffff;
  font-size: 16px;
  color: #0a0a0a;
  font-family: "Noto Sans JP", "Inter", sans-serif;
  /* type="search" のiOSデフォルト見た目（角丸・内側影）をリセット */
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.auction-toolbar__search-input::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

/* type="search" の内蔵クリアボタン（iOS）を非表示。検索アイコン用の余白に重ならないように */
.auction-toolbar__search-input::-webkit-search-cancel-button,
.auction-toolbar__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.auction-toolbar__search-input:focus {
  outline: 2px solid #00a63e;
  outline-offset: -2px;
}

.auction-toolbar__search-icon {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

/* 検索/属名 共通の虫眼鏡サブミットボタン。押すとフォーム送信 = 検索実行 */
.auction-toolbar__search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: #6a7282;
  cursor: pointer;
}

.auction-toolbar__search-btn:hover {
  color: #008236;
  background-color: rgba(0, 130, 54, 0.08);
}

.auction-toolbar__search-btn:focus-visible {
  outline: 2px solid #00a63e;
  outline-offset: 0;
}

/* 属名selectラッパー（虫眼鏡を絶対配置で内包するため相対配置） */
.auction-toolbar__select-wrap {
  position: relative;
  display: flex;
}

/* 属名selectは標準矢印▼を消して虫眼鏡だけにする。右paddingで虫眼鏡分の余白確保
   幅は検索inputと同じ 232px に揃える */
.auction-toolbar__genus-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
  padding-right: 40px;
  width: 232px;
  height: 40px;
}

/* ── グリッド ── */
.auction-panel {
  display: none;
}

.auction-panel--visible {
  display: block;
}

.auction-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

/* 画像のみ表示 */
.auction-grid--image-only {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.auction-grid--image-only .auction-card__image-wrap {
  aspect-ratio: 4 / 3;
}

.auction-grid--image-only .auction-card__body {
  display: none;
}

/* リスト表示 */
/* ─────────────────────────────────────────────
   リスト表示モード（シンプル構成）
   表示するのは「No. + 種名・品種名」「画像」「♡ボタン」だけ。
   属名・価格・件数・残り時間・入札者などは非表示にして、
   タイトル一覧のような見た目にする（一画面に多くの商品を詰め込める）。
───────────────────────────────────────────── */
.auction-grid--list {
  grid-template-columns: 1fr;
  gap: 8px;
  /* PC で画面いっぱいに広がると1行が間延びして読みづらいので、最大幅で抑えて中央寄せ。
     スマホでは max-width が画面幅より広いので影響しない（自動で全幅になる） */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* リスト表示時は、グリッドだけでなく上下のページネーションも同じ最大幅・中央寄せに揃える。
   :has()で「リスト表示中のグリッドを子に持つ要素」の直下のペジネーションだけを対象にする
   （他の表示モードのペジには影響しない）。 */
*:has(> .auction-grid--list) > .auction-pagination {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.auction-grid--list .auction-card {
  border: 1px solid #d1d5dc;
  background: #fff;
  border-radius: 4px;
  transition: box-shadow 0.15s;
  /* カード自体を flex 化して「情報 → 画像」を横一列に。
     ♡ボタンとウォッチ件数バッジは絶対配置で右端の縦コラムに置くため、
     その分 padding-right を広めに確保しておく（56px = 8px右余白 + 40pxボタン幅 + 8px左余白）。 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-right: 56px;
}
.auction-grid--list .auction-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* リンク本体（情報＋画像）。flex-direction: row-reverse で画像を右に、情報を左に */
.auction-grid--list .auction-card__link {
  order: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  padding: 10px 14px;
  gap: 14px;
}

/* ♡ボタン: 絶対配置でカード右側の縦コラム（上段）に置く。
   下段にウォッチ件数バッジが来るので、ハートはカード上下中央から少し上にずらす。
   transform: translateY(calc(-50% - 10px)) で「縦中央 -10px」にハートの中心を置き、
   バッジを「縦中央 +20px」に置けばちょうどハート(40px)の真下にバッジ(20px)が密着して、
   ハート上端 → バッジ下端 が 60px の縦塊としてカード中央に揃う。 */
.auction-grid--list .auction-card__watch {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(calc(-50% - 10px));
  order: 2;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-self: auto; /* flex の縦中央寄せは絶対配置で不要なので解除 */
  /* 白背景に白い輪郭は見えないのでグレー寄りに上書き */
  color: #9ca3af;
  filter: none;
}
.auction-grid--list .auction-card__watch:not(.auction-card__watch--active) {
  color: #9ca3af;
}
.auction-grid--list .auction-card__watch:not(.auction-card__watch--active) svg path {
  stroke-width: 1.8;
}
.auction-grid--list .auction-card__watch--active {
  color: #ef4444;
}
/* 白背景上では active のときの白縁取りが消えて赤い内側だけが見え、
   未追加のグレー輪郭ハートより一回り小さく見えてしまう。
   stroke を currentColor（赤）にして stroke-width も未追加と同じ 1.8 に揃え、
   ハートの外径が active／未追加で完全に一致するようにする。 */
.auction-grid--list .auction-card__watch--active svg path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* リスト表示のウォッチ件数バッジ：ハートの真下に密着、上下合わせてカード中央に。
   ベース(.auction-card__watch-count)の top:38px;right:2px;width:44px と
   白文字＋drop-shadow をリスト用にすべて上書きする。
   ハートのSVG自体は40pxの枠に対し中央に小さめに描かれているので、
   transform を「-50%+14px」にしてハートの枠よりやや内側へ食い込ませると、
   ハートのアイコンと数字の見た目の隙間が詰まる。 */
.auction-grid--list .auction-card__watch-count {
  top: 50%;
  right: 8px;
  width: 40px;
  transform: translateY(calc(-50% + 14px));
  /* リスト表示は白背景なので、白文字＋影だと見えない。濃いグレーに変更 */
  color: #4b5563;
  text-shadow: none;
}

/* リスト表示の小さなサムネ */
.auction-grid--list .auction-card__image-wrap {
  display: block;
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
  background: #f3f4f6;
}
.auction-grid--list .auction-card__image-wrap .auction-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.auction-grid--list .auction-card__image-wrap .auction-card__image--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #6a7282;
}

/* カード本体: 「No. + 種名・品種名」だけを1行で表示 */
.auction-grid--list .auction-card__body {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0;
  min-width: 0;
}

/* No. と種名・品種名を横並びで表示するエリア */
.auction-grid--list .auction-card__title-row {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
/* id-line（No.+属名のラッパー）を「透明な箱」にして中身を flex 子要素として扱う。
   このあと属名は display:none で非表示にするので、結果的に No. のみが残る */
.auction-grid--list .auction-card__id-line {
  display: contents;
}
/* 番号と種名・品種名を同じフォントサイズにする（画像+情報表示時のタイトルサイズに合わせる） */
.auction-grid--list .auction-card__number {
  font-size: 20px;
  color: #6a7282;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 28px;
}
.auction-grid--list .auction-card__title {
  font-size: 20px;
  font-weight: 500;
  color: #0a0a0a;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
  min-width: 0;
}

/* ─── リスト表示では使わない要素はすべて非表示 ─── */
.auction-grid--list .auction-card__genus,
.auction-grid--list .auction-card__description,
.auction-grid--list .auction-card__price-row,
.auction-grid--list .auction-card__status,
.auction-grid--list .auction-card__bottom-row,
.auction-grid--list .auction-card__top-bidder,
.auction-grid--list .auction-card__price,
.auction-grid--list .auction-card__bids,
.auction-grid--list .auction-card__timer,
.auction-grid--list .auction-card__end-inline,
.auction-grid--list .auction-card__meta,
.auction-grid--list .auction-card__end-date {
  display: none;
}
/* ページネーションのスタイルは components.css に共通化 */

/* ── 結果なし ── */
.no-result {
  padding: 48px 24px;
  text-align: center;
}

.no-result-msg {
  font-size: 14px;
  color: #6a7282;
}

/* ── レスポンシブ ── */
@media (max-width: 1200px) {
  .auction-grid--image-only {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .auction-card__body {
    padding: 8px 10px;
    gap: 3px;
  }
  /* No.・種名・品種名・商品説明はすべて同じフォントサイズで揃える */
  .auction-card__number {
    font-size: 12px;
  }
  .auction-card__genus {
    font-size: 12px;
  }
  .auction-card__title {
    font-size: 16px;
    line-height: 22px;
  }
  .auction-card__description {
    font-size: 12px;
  }
  .auction-card__price {
    font-size: 16px;
    line-height: 22px;
  }
  .auction-card__price-label {
    font-size: 10px;
  }
  .auction-card__timer {
    font-size: 12px;
    gap: 2px;
  }
  .auction-card__bids,
  .auction-card__top-bidder {
    font-size: 12px;
    gap: 2px;
  }
  .auction-card__status-icon {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 900px) {
  .auction-toolbar {
    flex-wrap: wrap;
  }
  .auction-toolbar__sort {
    order: 1;
  }
  .auction-toolbar__view {
    order: 2;
    margin-left: auto;
  }
  .auction-toolbar__genus {
    order: 3;
    width: 100%;
    margin-top: 8px;
  }
  .auction-toolbar__search {
    order: 4;
    width: 100%;
  }
  .auction-toolbar__search-input,
  .auction-toolbar__genus-select {
    flex: 1;
    width: 100%;
  }
  .auction-toolbar__search-wrap,
  .auction-toolbar__select-wrap {
    flex: 1;
  }
  .auction-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }
  .auction-grid--image-only {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .auction-grid--list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .auction-page {
    padding: 16px 8px 32px;
  }
  .auction-page__inner {
    gap: 12px;
  }
  .auction-page__title {
    font-size: 18px;
  }
  .auction-tabs__item {
    padding: 10px 14px;
    font-size: 14px;
  }
  .auction-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 4px;
  }
  .auction-toolbar__sort,
  .auction-toolbar__view,
  .auction-toolbar__genus,
  .auction-toolbar__search {
    width: 100%;
  }
  .auction-toolbar__dropdown {
    flex: 1;
    width: 100%;
  }
  .auction-toolbar__search-input,
  .auction-toolbar__genus-select {
    flex: 1;
    width: 100%;
  }
  .auction-toolbar__search-wrap,
  .auction-toolbar__select-wrap {
    flex: 1;
  }
  .auction-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 6px;
  }
  .auction-grid--image-only {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* リスト表示（スマホ）: PC と同じく「No. + 種名・品種名」「画像」「♡」だけのシンプル構成。
     PC側のCSSの寸法だけスマホ向けに微調整する（画像・ハートを少し小さく、padding 詰め）。
     非表示にする要素（属名・価格・件数・残り時間など）はPC側のルールがそのまま効く。 */
  .auction-grid--list {
    grid-template-columns: 1fr;
    gap: 12px 6px;
  }
  .auction-grid--list .auction-card {
    gap: 6px;
    /* スマホはハート 36px + 余白で右側に 48px 確保（PC は 56px） */
    padding-right: 48px;
  }
  .auction-grid--list .auction-card__link {
    padding: 8px 10px;
    gap: 10px;
  }
  .auction-grid--list .auction-card__image-wrap {
    width: 64px;
    height: 48px;
  }
  /* スマホ用ハート: 36x36。縦中央から少し上にずらして件数バッジと縦に並べる */
  .auction-grid--list .auction-card__watch {
    width: 36px;
    height: 36px;
    transform: translateY(calc(-50% - 8px));
  }
  /* スマホ用件数バッジ: 16px 文字、ハート(36px)の下に密着させる位置 */
  .auction-grid--list .auction-card__watch-count {
    width: 36px;
    transform: translateY(calc(-50% + 12px));
  }
  /* リスト表示でも、画像+情報表示時と同じタイトルサイズ(=タブレット幅で16px)に揃える。
     ナンバーも同じサイズで横並びすることで、視線の高さが一定になる */
  .auction-grid--list .auction-card__number {
    font-size: 16px;
    line-height: 22px;
  }
  .auction-grid--list .auction-card__title {
    font-size: 16px;
    line-height: 22px;
  }
  /* スマホでは画像を主役にするため、説明側をコンパクトに詰める */
  .auction-card__body {
    padding: 5px 6px;
    gap: 1px;
  }
  /* No. と属名は1行に横並び固定。属名がはみ出る場合は末尾を「…」で省略 */
  .auction-card__id-line {
    flex-wrap: nowrap;
    min-width: 0;
    max-width: 100%;
  }
  /* No.・種名・品種名・商品説明を同じフォントサイズで揃える */
  .auction-card__number {
    font-size: 10px;
    line-height: 14px;
    flex-shrink: 0;
  }
  .auction-card__genus {
    font-size: 10px;
    line-height: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auction-card__title {
    font-size: 13px;
    line-height: 18px;
  }
  .auction-card__price {
    font-size: 13px;
    line-height: 18px;
    /* 終了カードの落札価格が隣の行に折り返さないように */
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auction-card__price-label {
    font-size: 9px;
  }
  /* スマホでは body 自体を CSS Grid にして、各要素の表示順を:
     1行目: タイトル（No. の下に種名・品種名を縦並び）
     2行目: 商品説明（1行省略）
     3行目: 価格
     4行目: 入札件数 | 最高入札者  ← 横並び
     5行目: タイマー（左右中央）
     にする。display: contents で price-row / status の親要素を「ないこと」にして、
     中の子要素を直接 grid に配置する。
     bids 列は中身ぶんだけ取り、 bidder は残り全部使う */
  .auction-card__body {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-areas:
      "title  title"
      "desc   desc"
      "price  price"
      "bids   bidder"
      "timer  timer";
    /* 行間の余白を均等に */
    gap: 6px 6px;
    align-items: center;
  }
  /* 全行の line-height をフォントサイズ比例で統一して余白をムラなく見せる
     （各要素に元から指定されていた px の line-height を上書きする） */
  .auction-card__title-row,
  .auction-card__title,
  .auction-card__number,
  .auction-card__description,
  .auction-card__price,
  .auction-card__bids,
  .auction-card__top-bidder,
  .auction-card__top-bidder-name,
  .auction-card__timer {
    line-height: 1.3;
  }
  .auction-card__price-row,
  .auction-card__status {
    display: contents;
  }
  /* スマホでは title-row 自体を grid item にして縦並びに（PCの display: contents を解除）
     これで No.246 の下に種名・品種名が縦に並ぶ。
     gap: 6px は他の行間と揃えるため（block では効かないので flex に） */
  .auction-card__title-row {
    grid-area: title;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .auction-card__description {
    grid-area: desc;
    font-size: 11px;
  }
  .auction-card__price {
    grid-area: price;
  }
  .auction-card__bids {
    grid-area: bids;
    justify-self: start;
  }
  /* 入札件数の右に最高入札者を配置。長い名前は「…」で省略 */
  .auction-card__top-bidder {
    grid-area: bidder;
    min-width: 0;
    overflow: hidden;
  }
  /* テキスト本体に省略表示を効かせる（flex 親の中で省略するためテキストを span でラップ済み） */
  .auction-card__top-bidder-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* タイマーは行全体の左右中央に配置。フォントサイズはタイトルと揃える（11px） */
  .auction-card__timer {
    grid-area: timer;
    justify-self: center;
    font-size: 11px;
    gap: 2px;
  }
  .auction-card__bids,
  .auction-card__top-bidder {
    font-size: 11px;
    gap: 2px;
  }
  .auction-card__status-icon {
    width: 10px;
    height: 10px;
  }
  /* ── 終了済みカードの表示を1行にまとめる ── */
  .auction-card__bottom-row {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-top: 2px;
  }
  /* 落札価格の行: ラベルを左、金額を右寄せ（入札数/終了時刻と同じレイアウト） */
  .auction-card__bottom-row .auction-card__price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
  }
  .auction-card__bottom-row .auction-card__price-label {
    flex-shrink: 0;
  }
  .auction-card__ended-row {
    font-size: 10px;
    line-height: 14px;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auction-card__ended-label {
    font-size: 9px;
    margin-right: 2px;
    flex-shrink: 0;
  }
  /* リスト表示のみ: 終了済みカード内のラベル幅を揃えて、値の縦列を揃える */
  .auction-grid--list .auction-card__bottom-row .auction-card__price-label,
  .auction-grid--list .auction-card__bottom-row .auction-card__ended-label {
    display: inline-block;
    min-width: 44px;
    margin-right: 4px;
  }
  .auction-card__ended-row--winner,
  .auction-grid--list .auction-card__bottom-row .auction-card__ended-row--winner {
    display: none !important;
  }
}

@media (max-width: 400px) {
  .auction-page {
    padding-left: 4px;
    padding-right: 4px;
  }
  .auction-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 4px;
  }
  .auction-grid--image-only {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .auction-grid--list {
    grid-template-columns: 1fr;
  }
  /* さらに画像を主役にするため、小型スマホでは説明側を極力コンパクトに */
  .auction-card__body {
    padding: 4px 5px;
    gap: 0;
  }
  .auction-card__number {
    display: none; /* 商品番号は小型画面では省略 */
  }
  .auction-card__genus {
    font-size: 10px;
    line-height: 14px;
  }
  .auction-card__title {
    font-size: 12px;
    line-height: 16px;
  }
  /* 商品説明は控えめに（No. はこの幅では非表示） */
  .auction-card__description {
    font-size: 10px;
    line-height: 14px;
  }
  .auction-card__price {
    font-size: 12px;
    line-height: 16px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auction-card__price-label {
    font-size: 8px;
  }
  .auction-card__price-row {
    padding-top: 1px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .auction-card__status {
    height: auto;
    gap: 4px;
  }
  /* タイマーはタイトルと同じフォントサイズ（10px）で揃える */
  .auction-card__timer {
    font-size: 10px;
    gap: 1px;
  }
  .auction-card__bids,
  .auction-card__top-bidder {
    font-size: 10px;
    gap: 1px;
  }
  .auction-card__status-icon {
    width: 9px;
    height: 9px;
  }
  /* 3列カードの幅では最高入札者を表示するスペースが足りないため非表示
     （その分タイマーがはっきり見えるようになる） */
  .auction-card__top-bidder {
    display: none;
  }
  .auction-card__ended-info {
    gap: 1px;
  }
  .auction-card__bottom-row {
    gap: 0;
    padding-top: 1px;
  }
  .auction-card__ended-row {
    font-size: 9px;
    line-height: 13px;
    gap: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auction-card__ended-label {
    font-size: 8px;
    margin-right: 1px;
    flex-shrink: 0;
  }
  /* リスト表示のみ: 終了済みカード内のラベル幅を揃えて、値の縦列を揃える */
  .auction-grid--list .auction-card__bottom-row .auction-card__price-label,
  .auction-grid--list .auction-card__bottom-row .auction-card__ended-label {
    display: inline-block;
    min-width: 38px;
    margin-right: 3px;
  }
  .auction-card__ended-row--winner,
  .auction-grid--list .auction-card__bottom-row .auction-card__ended-row--winner {
    display: none !important;
  }

  /* リスト表示のナンバーは小型スマホでも表示する（グリッド表示では非表示にしているが、
     リスト表示ではナンバーが主要な情報の一つなので維持）。
     サイズはタイトルと揃えて13px（小型スマホ向けグリッドタイトルと同じサイズ） */
  .auction-grid--list .auction-card__number {
    display: inline;
    font-size: 13px;
    line-height: 18px;
  }
  .auction-grid--list .auction-card__title {
    font-size: 13px;
    line-height: 18px;
  }
}

/* ─────────────────────────────────────────────
   トップページ動画（カスタマイザで設定された場合のみ表示）
   front-page.php の冒頭、ヘッダー直下に出る 16:9 動画。
   月替わりで「今月の出品サボテン紹介」みたいな動画を埋め込む用途。
   構造: section > h2(見出し) + div.frame(角丸+影) > video
───────────────────────────────────────────── */
.top-video {
  width: 100%;
  max-width: 1280px;
  margin: 16px auto 24px;
  padding: 0 16px;
  box-sizing: border-box;
}
.top-video__title {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
}
.top-video__frame {
  width: 100%;
  background: #000;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.top-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (max-width: 768px) {
  .top-video {
    margin: 8px auto 16px;
    padding: 0;
  }
  .top-video__title {
    font-size: 18px;
    margin: 0 12px 8px;
  }
  .top-video__frame {
    border-radius: 0;
    box-shadow: none;
  }
}

/* ─────────────────────────────────────────────
   ツールバーはPC・スマホとも常時表示。
   旧仕様のスマホ用「メニュー」開閉トグル＋アコーディオンは
   開閉アニメのカクつきが解消できず廃止した（2026-07-06 ボス指示）。
   .auction-toolbar-collapse ラッパーはHTML互換のため残るが、素のdiv＝装飾なし。
───────────────────────────────────────────── */