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

.auction-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px 32px 64px; /* 上パディング0でバナーをヘッダー直下に（ボス指示 2026-07-13） */
}

.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 var(--sand-line, #b9ab8c);
}

.auction-tabs__item {
  display: flex;
  align-items: center;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  font-family: "Shippori Mincho", "Noto Sans JP", serif;
  color: #6a7282;
  background-color: #ffffff;
  border: 1px solid var(--sand-line, #b9ab8c);
  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 var(--sand-line-soft, #cfc3a6);
  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 var(--sand-line, #b9ab8c);
  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 var(--sand-line, #b9ab8c);
  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 var(--sand-line, #b9ab8c);
  background-color: #ffffff;
  font-size: 16px;
  color: #0a0a0a;
  font-family: "Shippori Mincho", "Noto Sans JP", 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;
}

/* リスト表示 */
/* ─────────────────────────────────────────────
   リスト表示モード（既存クラブオークションの「タイトル＋画像」と同じ形）
   ボス指示 2026-07-26。会員さんが見慣れた並びに合わせる。

   1商品 = 枠付きブロック。上に終了日時の帯、その下が左右2カラム。
     左  … 現在価格／残り時間／最高額入札者／入札件数（終了後は落札価格／入札件数／落札者／終了時刻）
     右  … タイトル＋説明、その下に登録画像を横一列
   幅はカード表示の一覧と同じ（.auction-page の内側いっぱい）。

   ラベル（「現在価格：」など）はすべてCSSの ::before で出している。
   理由: これらの行の中身は JS（main.js のカウントダウン、firebase-list.js の
   リアルタイム更新）が textContent を空にして作り直すため、PHP側で
   ラベル要素を置いても消えてしまう。擬似要素ならJSの書き換えを受けない。
───────────────────────────────────────────── */
.auction-grid--list {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ── カード = 「帯」と「本体」の2行グリッド ── */
.auction-grid--list .auction-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head watch count"
    "link link  link";
  align-items: center;
  border: 1px solid var(--sand-line, #b9ab8c);
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.auction-grid--list .auction-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── 上部の帯（終了日時 ＋ ♡） ──
   グリッドの「行」そのものには背景を塗れないので、
   帯に並ぶ3つの要素すべてに同じ背景と下線を当ててつなげる。 */
.auction-grid--list .auction-card__list-head,
.auction-grid--list .auction-card__watch,
.auction-grid--list .auction-card__watch-count {
  background: #f7f4ed;
  border-bottom: 1px solid var(--sand-line-soft, #cfc3a6);
  min-height: 36px;
  /* 3つとも帯の高さいっぱいに伸ばし、中で上下中央に置く。
     こうしないと要素ごとに高さが変わり、文字の縦位置がずれる（ボス指摘 2026-07-26） */
  align-self: stretch;
  line-height: 1;
}

.auction-grid--list .auction-card__list-head {
  grid-area: head;
  display: flex;
  align-items: center;
  padding: 0 14px;
  /* 帯の文字も本文と同じ大きさ・色に揃える（ボス指示 2026-07-26） */
  font-size: 18px;
  color: #364153;
}

/* ♡ボタンとウォッチ人数は、カード表示では画像の上に重ねる絶対配置になっている
   （watchlist.css）。リストでは帯の中に普通に並べたいので解除する。 */
.auction-grid--list .auction-card__watch {
  grid-area: watch;
  position: static;
  transform: none;
  width: auto;
  height: auto;
  padding: 0 6px 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f7f4ed;
  border: none;
  border-bottom: 1px solid var(--sand-line-soft, #cfc3a6);
  border-radius: 0;
  box-shadow: none;
  filter: none;
  color: #364153;
  font-size: 18px;
}
/* ハートの絵は出さず文字だけにする（ボス指示 2026-07-26） */
.auction-grid--list .auction-card__watch svg {
  display: none;
}
/* ボタンの文字はCSSで出す（watchlist.js はクラスと aria しか触らないので壊れない） */
.auction-grid--list .auction-card__watch::after {
  content: "ウォッチリスト";
}
/* 登録済みは文字を緑にして一目で分かるようにする（ボス指示 2026-07-26）。
   watchlist.js がクラスを付け外しするので、押した瞬間に色が変わる。 */
/* 登録済みは文字を緑にして一目で分かるようにする（ボス指示 2026-07-26）。
   watchlist.css にも同じ要素の色指定があるので、クラスを2つ重ねて確実に勝たせる。 */
.auction-grid--list .auction-card__watch.auction-card__watch--active {
  color: #008236;
}
.auction-grid--list .auction-card__watch-count {
  grid-area: count;
  position: static;
  transform: none;
  width: auto;
  display: flex;
  align-items: center;
  /* 上に4pxだけ余白を入れて、隣の「ウォッチリスト」と文字の高さを合わせる（ボス指示 2026-07-26） */
  padding: 4px 14px 0 0;
  font-size: 18px;
  color: #364153;
  text-shadow: none;
}

/* ── 本体 ── */
.auction-grid--list .auction-card__link {
  grid-area: link;
  display: block;
  padding: 12px 14px 14px;
}

/* 左カラム（情報）と右カラム（タイトル・説明・画像）。
   価格や入札件数はPHP上 .auction-card__price-row / __status / __bottom-row に
   包まれているが、display:contents でその箱を透かして中身を直接この
   グリッドに並べる（既存の __id-line と同じ手法）。
   これで既存サイトと同じ「価格→残り時間→入札者→件数」の順に置ける。 */
.auction-grid--list .auction-card__price-row,
.auction-grid--list .auction-card__status,
.auction-grid--list .auction-card__bottom-row {
  display: contents;
}

/* 左の情報4行は、1行目の「現在価格」の上端が右の画像の上端と揃うように置く
   （ボス指示 2026-07-26）。余った高さは最後の余白行(1fr)が引き受ける。 */
.auction-grid--list .auction-card__body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  grid-template-rows: auto auto auto auto auto 1fr;
  grid-template-areas:
    ".      title"
    "price  gallery"
    "timer  gallery"
    "bidder gallery"
    "bids   gallery"
    ".      gallery";
  column-gap: 20px;
  row-gap: 4px;
  align-content: start;
  padding: 0;
}

/* 左カラムの4行（出品中） */
.auction-grid--list .auction-card__price      { grid-area: price;  }
.auction-grid--list .auction-card__timer      { grid-area: timer;  }
.auction-grid--list .auction-card__top-bidder { grid-area: bidder; }
.auction-grid--list .auction-card__bids       { grid-area: bids;   }
/* 左カラムの4行（終了済み）。出品中と同じ場所を使い回す */
.auction-grid--list .auction-card__ended-row--bids    { grid-area: timer;  }
.auction-grid--list .auction-card__ended-row--winner  { grid-area: bidder; }
.auction-grid--list .auction-card__ended-row--endtime { grid-area: bids;   }

/* 各行の共通の形。ラベルを固定幅で右寄せにして「：」の位置を縦に揃える */
.auction-grid--list .auction-card__price,
.auction-grid--list .auction-card__timer,
.auction-grid--list .auction-card__top-bidder,
.auction-grid--list .auction-card__bids,
.auction-grid--list .auction-card__ended-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 4px;
  /* 4行が上下に散らばらないよう、余白は行間(row-gap)だけに任せて詰める（ボス指示 2026-07-26） */
  margin: 0;
  padding: 0;
  border: none;
  /* 「1,000円」と同じ大きさ・色に全行を統一。太字にはしない（ボス指示 2026-07-26） */
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #364153;
  /* 中身が長くても枠を押し広げないようにする（長いIDの表示崩れ対策 2026-07-26） */
  min-width: 0;
}

/* 入札者名・落札者名は長いと崩れるので、はみ出す分は「…」で省略する。
   左カラムを260pxにしてあるので、全角でも7文字前後までは読める。 */
.auction-grid--list .auction-card__top-bidder-name,
.auction-grid--list .auction-card__ended-value {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0;
}
.auction-grid--list .auction-card__price::before,
.auction-grid--list .auction-card__timer::before,
.auction-grid--list .auction-card__top-bidder::before,
.auction-grid--list .auction-card__bids::before,
.auction-grid--list .auction-card__ended-row::before {
  flex: 0 0 6.8em;
  text-align: right;
  font-size: 18px;
  font-weight: 400;
  color: #364153;
}

/* ラベルの文字（状態で出し分ける） */
.auction-grid--list .auction-card[data-status="active"] .auction-card__price::before { content: "現在価格："; }
.auction-grid--list .auction-card[data-status="sold"]   .auction-card__price::before { content: "落札価格："; }
/* 入札が無いまま終了した商品は「落札価格」だと嘘になるので開始価格と書く */
.auction-grid--list .auction-card[data-status="ended"]  .auction-card__price::before { content: "開始価格："; }
.auction-grid--list .auction-card__timer::before      { content: "残り時間："; }
.auction-grid--list .auction-card__top-bidder::before { content: "最高入札者："; }
.auction-grid--list .auction-card__bids::before,
.auction-grid--list .auction-card__ended-row--bids::before { content: "入札件数："; }
.auction-grid--list .auction-card__ended-row--winner::before  { content: "落札者："; }
.auction-grid--list .auction-card__ended-row--endtime::before { content: "終了時刻："; }

/* ── 右カラム: タイトル ＋ 横に説明 ── */
.auction-grid--list .auction-card__title-row {
  grid-area: title;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-bottom: 4px;
}
/* No. と属名の箱を透かして、中身を title-row の並びの要素として扱う */
.auction-grid--list .auction-card__id-line {
  display: contents;
}

/* No.・タイトル・説明・属名は同じ大きさ・色に揃える（ボス指示 2026-07-26）。
   並び順は No. → タイトル → 属名 → 説明。属名はマークアップ上 No. の隣にあるので
   order で並べ替えている。 */
.auction-grid--list .auction-card__number {
  font-size: 18px;
  color: #0a0a0a;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
  order: 1;
}
.auction-grid--list .auction-card__title {
  font-size: 18px;
  font-weight: 400;
  color: #0a0a0a;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  order: 2;
}
.auction-grid--list .auction-card__description {
  /* 最後尾なので余った横幅はここが受け持つ（長ければ「…」で省略） */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  color: #0a0a0a;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  order: 4;
}
/* 属名はタイトルの横に出す（ボス指示 2026-07-26） */
.auction-grid--list .auction-card__genus {
  display: inline;
  /* タイトルのすぐ横に置きたいので、必要な幅だけ使う */
  flex: 0 1 auto;
  min-width: 0;
  font-size: 18px;
  color: #0a0a0a;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  order: 3;
}

/* ── 右カラム: 登録画像を横一列（既存サイトと同じ見せ方） ── */
.auction-grid--list .auction-card__gallery {
  grid-area: gallery;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.auction-grid--list .auction-card__gallery-img {
  height: 200px;
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
  display: block;
  border-radius: 2px;
  background: #f3f4f6;
}

/* ─── リスト表示では出さない要素 ───
   属名（ボス指示）／カード表示用の小さいサムネ1枚（画像帯が全部出すので不要）／
   PHP側のラベル（::before で置き換えるため）／行頭のアイコン（既存サイトに無い） */
.auction-grid--list .auction-card__image-wrap,
.auction-grid--list .auction-card__price-label,
.auction-grid--list .auction-card__ended-label,
.auction-grid--list .auction-card__status-icon,
.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;
}

/* 次回の開催案内。ヘッダーメニュー（17.5px・#222）より少し大きくし、色は揃える
   （ボス指示 2026-08-02） */
.no-result-msg--next {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #222;
}

/* ── レスポンシブ ── */
@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: 14px;
  }
  .auction-card__genus {
    font-size: 14px;
  }
  .auction-card__title {
    font-size: 16px;
    line-height: 22px;
  }
  .auction-card__description {
    font-size: 14px;
  }
  .auction-card__price {
    font-size: 16px;
    line-height: 22px;
  }
  .auction-card__price-label {
    font-size: 10px;
  }
  .auction-card__timer {
    font-size: 14px;
    gap: 2px;
  }
  .auction-card__bids,
  .auction-card__top-bidder {
    font-size: 14px;
    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: 0px 8px 32px; /* 上パディング0でバナーをヘッダー直下に（ボス指示 2026-07-13） */
  }
  .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));
  }
  /* スマホではリスト表示ボタン自体を出さない（下の 1052 行付近）ため、
     スマホ用のリスト表示調整は不要になり削除した（2026-07-26）。 */
  /* スマホでは画像を主役にするため、説明側をコンパクトに詰める */
  .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: 14px;
    line-height: 18px;
  }
  .auction-card__price {
    font-size: 14px;
    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: 13px;
  }
  .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: 13px;
    gap: 2px;
  }
  .auction-card__bids,
  .auction-card__top-bidder {
    font-size: 13px;
    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-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;
  }
  /* さらに画像を主役にするため、小型スマホでは説明側を極力コンパクトに。
     行間はgapで均一にそろえる（要素ごとのpadding詰めはしない） */
  .auction-card__body {
    padding: 5px 6px 6px;
    gap: 2px;
  }
  /* No.行と品種名の間は 768px 用の6pxが効いて他の行(2px)より広く見えるため統一 */
  .auction-card__title-row {
    gap: 2px;
  }
  .auction-card__number {
    /* 小型画面でも商品番号は表示する（ボス指示 2026-07-12。属名と同じ控えめサイズ） */
    font-size: 10px;
    line-height: 12px;
  }
  .auction-card__genus {
    font-size: 10px;
    line-height: 12px;
  }
  .auction-card__title {
    font-size: 14px;
    line-height: 18px;
  }
  /* 商品説明は控えめに（No. はこの幅では非表示） */
  .auction-card__description {
    font-size: 10px;
    line-height: 14px;
  }
  .auction-card__price {
    font-size: 14px;
    line-height: 18px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auction-card__price-label {
    font-size: 8px;
  }
  .auction-card__price-row {
    padding-top: 0; /* 行間はbodyのgapで統一 */
    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: 2px;
    padding-top: 0; /* 行間はbodyのgapで統一 */
  }
  .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-card__ended-row--winner {
    display: none !important;
  }

  /* リスト表示のナンバーは小型スマホでも表示する（グリッド表示では非表示にしているが、
     リスト表示ではナンバーが主要な情報の一つなので維持）。
     サイズはタイトルと揃えて13px（小型スマホ向けグリッドタイトルと同じサイズ） */
}

/* ─────────────────────────────────────────────
   トップページ動画（カスタマイザで設定された場合のみ表示）
   front-page.php の冒頭、ヘッダー直下に出る 16:9 動画。
   月替わりで「今月の出品サボテン紹介」みたいな動画を埋め込む用途。
   構造: section > h2(見出し) + div.frame(角丸+影) > video
───────────────────────────────────────────── */
.top-video {
  width: 100%;
  /* PCで画面幅いっぱいだと大きすぎる（クライアント指摘 2026-07-12）ため
     760pxに抑えて中央に配置。スマホ(〜768px)は画面が狭いので実質全幅のまま */
  max-width: 760px;
  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;
  text-align: center; /* 動画を中央に置いたので見出しも中央で揃える */
}
.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;
    text-align: left; /* スマホは従来どおり左寄せ */
  }
  .top-video__frame {
    border-radius: 0;
    box-shadow: none;
  }
}

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

/* ─────────────────────────────────────────────
   ツールバー: スマホでの「絞り込み・並び替え」アコーディオン
   （ボス指示 2026-07-26）
   PC = 従来どおり全項目を横並びで常時表示（ボタンは出さない）
   スマホ = 「表示」だけ常時表示し、並び替え・属名・検索はボタンで開閉
───────────────────────────────────────────── */
.auction-toolbar__filter-toggle {
  display: none; /* PCでは出さない */
}

@media (max-width: 768px) {
  /* 常時表示の行: 左に「表示」（左端ぴったり）、右に絞り込みボタン */
  .auction-toolbar--always {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px; /* 「表示」と「並び替えと検索」の間は狭めに */
    flex-wrap: nowrap;
    padding: 0 0 8px; /* 左右余白なし＝コンテンツ左端から始まる */
    border-bottom: 1px solid var(--sand-line-soft, #cfc3a6);
  }

  /* スマホは「カード」と「画像のみ」の2つだけ。リスト表示は出さない（ボス指示 2026-07-26） */
  .auction-toolbar__view-btn[data-view="list"] {
    display: none;
  }

  /* 表示の各項目（ラベル・アイコン）の間隔は広めにとる */
  .auction-toolbar--always .auction-toolbar__view {
    gap: 12px;
  }

  .auction-toolbar--always .auction-toolbar__view-buttons {
    gap: 10px;
  }

  /* 左＝表示 / 右＝絞り込みボタン（ボス指示の並び順） */
  .auction-toolbar--always .auction-toolbar__view {
    width: auto;
    flex: 0 0 auto;
    order: 1;
    /* 「表示:」を画面左端にぴったり詰める（他CSSの余白・中央寄せを打ち消す） */
    margin-left: 0;
    padding-left: 0;
    justify-content: flex-start;
  }

  .auction-toolbar--always .auction-toolbar__label {
    margin-left: 0;
    padding-left: 0;
  }

  .auction-toolbar__filter-toggle {
    order: 2;
  }

  .auction-toolbar__filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--sand-line, #b9ab8c);
    background-color: #ffffff;
    color: #364153;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }

  .auction-toolbar__filter-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  .auction-toolbar__filter-caret {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    transition: transform 0.2s;
  }

  /* 開いている時はキャレットを反転＋押下状態の色に */
  .auction-toolbar__filter-toggle[aria-expanded="true"] {
    background-color: #f0fdf4;
    border-color: #008236;
    color: #008236;
  }

  .auction-toolbar__filter-toggle[aria-expanded="true"] .auction-toolbar__filter-caret {
    transform: rotate(180deg);
  }

  /* アコーディオン本体: 既定は閉じる。is-open で開く。
     max-height のトランジションだけのシンプルな動き（ボス指示 2026-07-26） */
  .auction-toolbar-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
  }

  .auction-toolbar-collapse.is-open {
    max-height: 500px; /* 中身より十分大きい値。実際の高さで止まる */
  }

  /* 開いた中身は縦積みで見やすく */
  .auction-toolbar-collapse .auction-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 12px;
    border-bottom: none;
  }

  /* アニメーションを好まない設定の端末では即座に開閉する */
  @media (prefers-reduced-motion: reduce) {
    .auction-toolbar-collapse {
      transition: none;
    }
  }
}