/* ランキングの見た目（2026-10-15 決定：ランキングの枠。順位のデータが入った時だけ /static/ に書く。デザイン方針 4章：
 * ランキングのページは1行1件、トップの抜粋は横1列。角丸2〜3px・影なし・色は使わない）。 */
.rank-col { margin: 0 0 12px; }
/* 右の列の広告（2026-10-25 夜 目視の直し）。1,280px 以上は一覧の右に 300px の列、狭い画面は一覧の下 */
.rank-side { margin: 14px 0 0; }
@media (min-width: 1280px) {
  .rank-layout.has-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 24px; align-items: start; }
  .rank-layout.has-side > .rank-side { margin: 0; position: sticky; top: 12px; }
}
.rank-col h3 { font-size: 15px; line-height: 1.4; margin: 1.2em 0 4px; }      /* トップの段の売り場名（ランキングのページの h2 は読み上げ用 .sr-only。見せる売り場名はタブ） */
.rank-fetched { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.rank-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.rank-empty { margin: 12px 0; padding: 8px 12px; background: var(--panel); border-radius: 2px; }

.rank-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
/* 1行1件：順位・（画像を出す段階は表紙。2列目。images.css）・題名・形式と作者。スマホでは形式と作者を題名の下の行に回す（右の列に押し込むと「単/行/本」と縦に割れた。2026-10-17 h5）。
 * 表紙の枠が無い時は2列目が幅0になる */
/* 2026-10-23：PC は題名の列を題名の幅までにして（長い題名は列の 60% で折り返す）、形式と作者を題名のすぐ右に置く（以前は右端に離れて空白が目立った）。
 * 形式と作者の列は 6em を下回らない（画面が 480px を少し超えた幅で、題名が列を使い切って 0 幅に潰れないように）。
 * 表紙（images.css）は 1〜6 行目をまたぎ、下の余りは最後の行（1fr）が受ける＝題名・値段・ボタンは表紙の上から詰めて並ぶ */
.rank-row { display: grid; grid-template-columns: 2.2em auto fit-content(60%) minmax(6em, 1fr); grid-template-rows: repeat(5, auto) 1fr; align-items: center; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.rank-row .rank-no { grid-column: 1; text-align: right; font-weight: 700; margin-right: 12px; }
.rank-row .rank-title { grid-column: 3; min-width: 0; margin-right: 12px; }
.rank-row .rank-meta { grid-column: 4; }
.rank-row .row-price { grid-column: 3 / -1; margin-top: 2px; }
.rank-row .store-action { grid-column: 3 / -1; margin: 2px 0 0; }      /* 行のストアのボタン（その列のストアのもの。すぐ下に PR の1行。2026-10-18 第2弾 3-1） */
.rank-meta { font-size: 14px; color: var(--muted); }
.rank-meta .kind { display: inline-block; border: 1px solid var(--border); border-radius: 2px; padding: 0 4px; margin-right: 6px; font-size: 13px; color: var(--fg); }

/* 売り場のタブ・切り口の帯・20位ずつのページの番号（2026-10-21 目視の直し：タブとページ切り替え。余白は詰める）。
 * 2026-10-22：帯の横（スマホは下）にテーマの選択と単話・単行本の切り替え、帯の下に選んだ条件の札と「もっと細かく探す」。畳んだ「切り口で絞る」はやめた */
.rank-tabs { display: flex; margin: 4px 0 6px; border-bottom: 1px solid var(--border); }
.rank-tab { flex: 0 1 auto; min-height: 44px; padding: 6px 14px; margin: 0 0 -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; }
.rank-tab[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--brand-dark); font-weight: 700; }
.rank-facets { margin: 0 0 6px; }
.rank-facet-group.rank-views { margin: 0 0 2px; }      /* 畳まない1行：すべて｜新作｜セール中｜順位が上がった */
.rank-facet-group { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rank-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.rank-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.rank-filters .rank-kinds { display: flex; gap: 6px; }
.rank-select { min-height: 44px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; }
.rank-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rank-chip { min-height: 36px; padding: 4px 10px; border: 1px solid var(--brand); border-radius: 3px; background: var(--bg); color: var(--brand-dark); font: inherit; font-size: 14px; cursor: pointer; }
.rank-find { margin: 0 0 4px; font-size: 14px; }
.rank-find a { display: inline-block; padding: 8px 0; }      /* 押せる高さ */
.rank-sub { font-size: 13px; color: var(--muted); margin: 0 0 4px; }      /* トップの段の見出しの下の小さな1行 */
.rank-facet { min-height: 44px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; }
.rank-facet.is-on, .rank-facet[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.rank-view-note { font-size: 13px; color: var(--muted); margin: 2px 0 4px; }
.rank-none { margin: 6px 0; padding: 8px 12px; background: var(--panel); border-radius: 2px; }
.rank-pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rank-page { min-width: 44px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; cursor: pointer; }
.rank-page.is-on, .rank-page[aria-current="page"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.rank-row .rank-rise { grid-column: 3 / -1; font-size: 13px; color: var(--accent); margin-top: 2px; }
.rank-row .rank-contains { grid-column: 3 / -1; margin: 2px 0 0; font-size: 13px; }      /* 「含む」の1行（ほかのカードとそろえる） */


/* トップ：順位つきの大きな縦長のカード（site.css の .bcard。2026-10-18 作り直し 3-2）。番号は表紙の上（カードの1行目） */
.bcard > .rank-no { font-weight: 700; font-size: 15px; line-height: 1.3; }
.rank-more { margin: 4px 0 0; font-size: 15px; }
.rank-more a { display: inline-block; padding: 10px 0; }   /* 押せる高さ（44px前後） */

/* 5件を超える行・順位の無い行は、順位をつけた後に JS が隠す */
.rank-off, .bcard.rank-off { display: none; }

@media (max-width: 480px) {
  /* 切り口の帯とタブは、スマホでも1行（札の中の文字が折れて高くなる。最初の作品を1画面目に入れるため） */
  .rank-facet-group.rank-views { flex-wrap: nowrap; gap: 4px; align-items: stretch; }
  .rank-views .rank-facet { flex: 1 1 auto; min-width: 0; padding: 6px 6px; font-size: 13px; line-height: 1.3; }
  .rank-bar { display: block; }      /* 帯の下にテーマの選択と単話・単行本（1行に収まらなければ折り返す） */
  .rank-filters { gap: 4px; }
  .rank-select { flex: 1 1 auto; min-width: 0; font-size: 14px; }
  .rank-tab { flex: 1 1 0; padding: 6px 4px; font-size: 14px; }
  .rank-page { min-width: 40px; padding: 6px 8px; }
  .rank-row { grid-template-columns: 2.2em auto minmax(0, 1fr); grid-template-rows: none; }
  .rank-row .rank-no { grid-row: 1 / span 2; }
  .rank-row .rank-title { grid-row: 1; align-self: end; margin-right: 0; }
  .rank-row .rank-meta { grid-column: 3; grid-row: 2; align-self: start; }
  /* 値段・ボタン・「含む」・順位の上がりは、表紙の下に行の幅いっぱいで置く（表紙の右の細い列に押し込むと、ボタンの文字が縦に割れた。2026-10-23。
   * シリーズの収録表の行〈images.css の .ep-row.has-cover > .store-action〉と同じ形。表紙の大きさは変えない） */
  .rank-row .row-price, .rank-row .store-action, .rank-row .rank-contains, .rank-row .rank-rise { grid-column: 1 / -1; }
}