/* ============================================================
 * 抽選情報一覧（/oripa/box-chusen/ 専用）
 * cardchusen.com のパックページ「抽選販売一覧」と同じ読み方ができる画像カードグリッド。
 *   締切バッジ = 左上の赤ピル（残り◯時間、リクエスト時点で計算）／
 *                締切未確定のものはグレーのステータスピル
 *   抽選方式 = 白抜き（枠線）ピル … 「どこで引くか」
 *   必要条件 = 枠なしのアイコン＋文字チップ … 「何が要るか」
 *   操作     = 応募ページ（オレンジCTA） / 応募方法をみる（テキストリンク）
 * 色・角丸・余白はすべて --ds-* トークン経由で参照する（生hex / 生px 禁止）。
 * ============================================================ */

/* KV直下の余白: 共通の .ranking は padding-top 64px だが、このページは
 * KVをタイトル+執筆者のみに削っているため、他ピラー（比較ランキング主体）と
 * 同じ大きさの余白だと間延びする。このページだけ詰める。 */
.area-article--page-oripa-box-chusen .ranking {
  padding-top: 28px;
}

.chusen-board {
  margin: var(--ds-space-stack-md) 0 var(--ds-space-stack-lg);
}

/* ── フィルタ（JSなし・ラジオ＋:checked の兄弟セレクタで絞り込む） ── */
.chusen-board__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.chusen-filter {
  display: flex;
  align-items: center;
  gap: var(--ds-space-inline-sm);
  flex-wrap: wrap;
  margin-bottom: var(--ds-space-stack-xs);
}

.chusen-filter__label {
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-h3-weight);
  color: var(--ds-color-text-muted);
  margin-right: var(--ds-space-inline-xs);
}

.chusen-filter__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--ds-color-border-strong);
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-bg);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: 1.6;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.chusen-filter__chip:hover {
  border-color: var(--ds-color-text-muted);
}

.chusen-board__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-inline-sm);
  margin: 0 0 var(--ds-space-stack-xs);
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-subtle);
}

.chusen-board__count { font-weight: var(--ds-text-h3-weight); color: var(--ds-color-text-muted); }

/* ── カードグリッド（cardchusen.com のパックページと同じ、画像先行の2カラムカード） ── */
.chusen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ds-space-stack-xs);
}

@media (min-width: 720px) {
  .chusen-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .chusen-grid { grid-template-columns: repeat(4, 1fr); }
}

.chusen-card {
  display: flex;
  flex-direction: column;
  background: var(--ds-color-bg-elevated);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
  overflow: hidden;
}

.chusen-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background-color: var(--ds-color-bg-subtle);
}

.chusen-card__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  text-indent: -9999px;
}

.chusen-card__img--logo {
  background-size: 55%;
  background-repeat: no-repeat;
}

/* 締切バッジ（左上・赤=カウントダウン／グレー=ステータス） */
.chusen-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: var(--ds-radius-chip);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: 1.6;
  white-space: nowrap;
  color: var(--ds-color-text-inverse);
}

.chusen-card__badge--countdown { background: var(--ds-color-danger); }
.chusen-card__badge--countdown.chusen-card__badge--ended { background: var(--ds-color-text-subtle); }
.chusen-card__badge--status {
  background: var(--ds-color-bg-elevated);
  color: var(--ds-color-text-muted);
  border: 1px solid var(--ds-color-border-strong);
}

.chusen-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
}

.chusen-card__deadline {
  margin: 2px 0 4px;
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-subtle);
}

.chusen-card__note {
  display: block;
  margin-top: 1px;
}

.chusen-card__detail {
  display: block;
  margin-top: 6px;
  font-size: var(--ds-text-micro-size);
  color: var(--ds-color-text-muted);
  text-align: center;
  text-decoration: underline;
}

.chusen-row__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

/* 抽選方式ピル（白抜き） */
.chusen-method {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1.5px solid currentColor;
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-bg);
  color: var(--ds-color-state-info-text);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: 1.5;
  white-space: nowrap;
}

.chusen-method__ico { flex: 0 0 auto; width: 13px; height: 13px; }

/* 必要条件チップ（枠なし） */
.chusen-cond {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: 1.5;
  color: var(--ds-color-text-subtle);
  white-space: nowrap;
}

.chusen-cond--free { color: var(--ds-color-state-positive-text); }
.chusen-cond__ico { flex: 0 0 auto; width: 13px; height: 13px; }

.chusen-row__product {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: 1.35;
  color: var(--ds-color-text);
}

.chusen-row__store {
  margin: 2px 0 0;
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
}

.chusen-row__rank {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: var(--ds-radius-chip);
  background: var(--ds-color-bg-subtle);
  color: var(--ds-color-text-subtle);
  font-size: var(--ds-text-micro-size);
  font-weight: var(--ds-text-h3-weight);
}

/* 応募ボタン */
.chusen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  height: 38px;
  margin-top: 6px;
  border-radius: var(--ds-radius-button);
  font-family: inherit;
  font-size: var(--ds-text-caption-size);
  font-weight: var(--ds-text-h3-weight);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, transform .08s ease, box-shadow .08s ease;
}

.chusen-btn--apply {
  position: relative;
  padding: 0 20px 0 8px;
  background: var(--ds-color-cta-bg);
  border: 1px solid transparent;
  color: var(--ds-color-text-inverse);
  box-shadow: 0 3px 0 var(--ds-color-cta-bg-hover);
}

.chusen-btn--apply::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.chusen-btn--apply:hover { background: var(--ds-color-cta-bg-hover); }

.chusen-btn--apply:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--ds-color-cta-bg-hover);
}

.chusen-board__note {
  margin: var(--ds-space-stack-xs) 0 0;
  font-size: var(--ds-text-micro-size);
  line-height: 1.7;
  color: var(--ds-color-text-subtle);
}

/* ── フィルタの絞り込み（ラジオはリストの前に置く） ── */
#chusen-tcg-pokemon:checked   ~ .chusen-list .chusen-row:not([data-tcg~="pokemon"]),
#chusen-tcg-onepiece:checked  ~ .chusen-list .chusen-row:not([data-tcg~="onepiece"]),
#chusen-tcg-yugioh:checked    ~ .chusen-list .chusen-row:not([data-tcg~="yugioh"]),
#chusen-cond-free:checked     ~ .chusen-list .chusen-row:not([data-cond~="free"]),
#chusen-cond-nolimit:checked  ~ .chusen-list .chusen-row:not([data-cond~="nolimit"]) {
  display: none;
}

/* 選択中のチップを反転表示 */
#chusen-tcg-all:checked      ~ .chusen-filter [for="chusen-tcg-all"],
#chusen-tcg-pokemon:checked  ~ .chusen-filter [for="chusen-tcg-pokemon"],
#chusen-tcg-onepiece:checked ~ .chusen-filter [for="chusen-tcg-onepiece"],
#chusen-tcg-yugioh:checked   ~ .chusen-filter [for="chusen-tcg-yugioh"],
#chusen-cond-any:checked     ~ .chusen-filter [for="chusen-cond-any"],
#chusen-cond-free:checked    ~ .chusen-filter [for="chusen-cond-free"],
#chusen-cond-nolimit:checked ~ .chusen-filter [for="chusen-cond-nolimit"] {
  background: var(--ds-color-text);
  border-color: var(--ds-color-text);
  color: var(--ds-color-text-inverse);
}

/* キーボード操作でもフォーカス位置が分かるようにする（対応するラベルだけを囲む） */
#chusen-tcg-all:focus-visible      ~ .chusen-filter [for="chusen-tcg-all"],
#chusen-tcg-pokemon:focus-visible  ~ .chusen-filter [for="chusen-tcg-pokemon"],
#chusen-tcg-onepiece:focus-visible ~ .chusen-filter [for="chusen-tcg-onepiece"],
#chusen-tcg-yugioh:focus-visible   ~ .chusen-filter [for="chusen-tcg-yugioh"],
#chusen-cond-any:focus-visible     ~ .chusen-filter [for="chusen-cond-any"],
#chusen-cond-free:focus-visible    ~ .chusen-filter [for="chusen-cond-free"],
#chusen-cond-nolimit:focus-visible ~ .chusen-filter [for="chusen-cond-nolimit"] {
  outline: 2px solid var(--ds-color-link);
  outline-offset: 2px;
}

/* 絞り込み中は件数表示を「絞り込み中」に切り替える（総件数の誤読を防ぐ） */
.chusen-board__count--filtered { display: none; }
.chusen-board:not(:has(#chusen-tcg-all:checked)) .chusen-board__count--total,
.chusen-board:not(:has(#chusen-cond-any:checked)) .chusen-board__count--total { display: none; }
.chusen-board:not(:has(#chusen-tcg-all:checked)) .chusen-board__count--filtered,
.chusen-board:not(:has(#chusen-cond-any:checked)) .chusen-board__count--filtered { display: inline; }

/* ============================================================
 * 各オリパの抽選販売の特徴（#sec-sites）
 * best-pillar テーマの dt/dd と同じリズムで、見出し＋本文＋強みリストを並べる。
 * ============================================================ */

#sec-sites h3 {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--ds-color-border);
  font-size: var(--ds-text-h3-size);
  font-weight: var(--ds-text-h3-weight);
  line-height: 1.5;
  color: var(--ds-color-text);
  scroll-margin-top: 96px;
}

#sec-sites h3:first-of-type { border-top: 1px solid var(--ds-color-text); }

#sec-sites .chusen-site__lead {
  margin: 8px 0 0;
  font-size: var(--ds-text-caption-size);
  color: var(--ds-color-text-muted);
}

#sec-sites .chusen-site__lead a { color: var(--ds-color-link); }

#sec-sites p {
  margin: 12px 0 0;
  font-size: var(--ds-text-body-sm-size);
  line-height: 1.85;
}

#sec-sites ul {
  margin: 16px 0 0;
  padding: 16px 20px;
  list-style: none;
  background: var(--ds-color-bg-elevated);
  border-radius: var(--ds-radius-card);
}

#sec-sites ul li {
  position: relative;
  padding-left: 26px;
  margin-top: 8px;
  font-size: var(--ds-text-caption-size);
  line-height: 1.8;
  color: var(--ds-color-text);
}

#sec-sites ul li:first-child { margin-top: 0; }

#sec-sites ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--ds-color-positive);
  border-bottom: 2px solid var(--ds-color-positive);
  transform: rotate(-45deg);
}

/* ── モバイル ── */
@media (max-width: 600px) {
  .chusen-card__body { padding: 8px 10px 10px; }
  .chusen-row__product { font-size: var(--ds-text-caption-size); }
  .chusen-btn { height: 40px; }

  /* ── 5サイト比較早見表: style.css の共通スマホ用グリッド化（列非表示・折返し）は
     8列・順位バッジ前提の他ピラー用で、この表（7列・「必要ポイント」「公式」を含む）と
     列構成が合わず崩れる／CTA列が消えるため、この表だけ横スクロール表示に戻す。
     #sec-compare の ID セレクタで style.css のクラスのみのルールより優先させる。 */
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare {
    min-width: 760px;
    width: auto;
    table-layout: auto;
    font-size: 12px;
  }
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare thead th,
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare tbody td {
    display: table-cell;
    white-space: nowrap;
    padding: 10px 12px;
    text-align: left;
  }
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare__rank,
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare__score,
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare__tj {
    text-align: center;
  }
  .area-article--page-oripa-box-chusen #sec-compare .oripa-compare__kg {
    white-space: normal;
    min-width: 180px;
  }
}