/* ==========================================================================
   令和フェチ研究所 スタイル（白地・深い赤・ラテン優先サンセリフ・広い字間）
   値はすべて design/tokens.json から引く。:root の変数はビルド時（src/lib/tokens.mjs）に生成され、
   下の @tokens マーカーへ注入される。ここに色や寸法を直書きしない。
   例外：メディアクエリの幅（CSS 変数は @media で使えない）。tokens.breakpoint に合わせて 640px / 1024px を書く。
   モバイルファースト。375px で横スクロールを出さない。タップ領域 44px 以上。本文 13px 以上。
   フォントの差し替え（InterLatin ⇔ フォールバック）で縦位置が動かないよう、行の高さは line-height と固定の箱で決め、
   異なる大きさの要素どうしをベースラインで揃えない（A-117 K20・R17。preload を入れない根拠を実測で固定している）。
   ========================================================================== */
:root {
  --color-bg-base: #ffffff;
  --color-bg-subtle: #f7f5f3;
  --color-bg-panel: #f2efec;
  --color-bg-band: #f2efec;
  --color-bg-chip: #f4f1ee;
  --color-bg-tintred: #fbf4f4;
  --color-bg-tintyellow: #fdf9f0;
  --color-bg-overlay: rgba(26,20,20,.88);
  --color-bg-footerdark: #1c1a19;
  --color-text-base: #2a2724;
  --color-text-strong: #14110f;
  --color-text-muted: #6b645e;
  --color-text-faint: #746c66;
  --color-text-inverse: #ffffff;
  --color-border-base: #ddd8d3;
  --color-border-light: #e8e4e0;
  --color-border-header: #e8e4e0;
  --color-border-strong: #b3aca6;
  --color-accent-primary: #a8121e;
  --color-accent-primaryhover: #8a0d18;
  --color-accent-primarydeep: #7a0b15;
  --color-accent-hot: #c3202b;
  --color-accent-linkhover: #8a0d18;
  --color-accent-new: #a8121e;
  --color-accent-sale: #b5651d;
  --color-accent-caution: #a8842c;
  --color-accent-pink: #a8121e;
  --color-link-base: #1a4f8a;
  --color-link-visited: #1a4f8a;
  --color-link-hover: #8a0d18;
  --color-status-svod: #a8121e;
  --color-status-svodunknown: #746c66;
  --color-status-stale: #8a6420;
  --color-status-unverified: #6b645e;
  --color-status-ok: #1a6b3a;
  --color-status-soldout: #6b645e;
  --color-ad-bg: #2a2724;
  --color-ad-text: #ffffff;
  --font-family-base: "InterLatin", "Helvetica Neue", "Segoe UI", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
  --font-family-mobilealt: "HiraKakuProN-W3", Verdana, sans-serif;
  --font-family-numeric: inherit;
  --font-family-display: "InterLatin", "Helvetica Neue", "Segoe UI", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 17px;
  --font-size-xl: 21px;
  --font-size-xxl: 26px;
  --font-size-hero: 32px;
  --font-size-price: 17px;
  --font-lineheight-tight: 1.4;
  --font-lineheight-base: 1.85;
  --font-lineheight-loose: 2;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-clamp-cardtitle: 2;
  --font-clamp-listtitle: 1;
  --font-tracking-tight: .02em;
  --font-tracking-base: .06em;
  --font-tracking-wide: .1em;
  --font-tracking-logo: .18em;
  --size-header-mobile: 56px;
  --size-header-desktop: 68px;
  --size-header-logoheight: 28px;
  --size-header-markheight: 40px;
  --size-touch-min: 48px;
  --size-touch-row: 44px;
  --size-bottomnav: 80px;
  --size-chip-height: 26px;
  --size-chip-paddingx: 12px;
  --size-badge-height: 22px;
  --size-card-width: 147px;
  --size-card-widthmin: 120px;
  --size-card-imageratio: 3 / 4;
  --size-card-imageratioexact: 147 / 200;
  --size-button-height: 52px;
  --size-button-heightsm: 32px;
  --size-button-paddingx: 32px;
  --size-icon: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 20px;
  --space-5: 26px;
  --space-6: 32px;
  --space-8: 44px;
  --space-10: 56px;
  --space-12: 72px;
  --space-gutter-mobile: 20px;
  --space-gutter-desktop: 40px;
  --space-cardgap-mobile: 18px;
  --space-cardgap-desktop: 28px;
  --space-section-mobile: 56px;
  --space-section-desktop: 88px;
  --radius-none: 0;
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 20px;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-tooltip: 0 2px 8px rgba(0,0,0,.20);
  --shadow-dropdown: 0 1px 4px 2px rgba(0,0,0,.30);
  --shadow-sticky: none;
  --breakpoint-xs: 375px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --layout-maxwidth-content: 1080px;
  --layout-maxwidth-text: 720px;
  --layout-maxwidth-dialog: min(90vw, 1024px);
  --layout-grid-cards: repeat(auto-fill, minmax(147px, 1fr));
  --layout-grid-cardsmobile: repeat(2, minmax(0, 1fr));
  --layout-grid-cardsdesktop: repeat(auto-fill, minmax(147px, 1fr));
  --layout-grid-chips: repeat(auto-fit, minmax(104px, 1fr));
  --layout-zindex-sticky: 100;
  --layout-zindex-dropdown: 1000;
  --layout-zindex-overlay: 9998;
  --layout-zindex-toast: 9999;
  --layout-cta-perpagemin: 3;
  --layout-cta-perpagemax: 5;
}

/* ---- 欧文書体（自前ホスト。Google Fonts へのリクエストは発生しない） ----
   Inter の latin サブセット可変フォント 48KB。SIL OFL 1.1、出所とハッシュは data/assets.json、
   ライセンス全文は static/fonts/Inter-LICENSE.txt に同梱している（OFL の要件）。
   unicode-range を latin に限定しているので、和文は指定せずともOS標準へ落ちる。
   font-display:swap にしてあり、読み込みに失敗しても本文はフォールバックで即座に読める。 */
@font-face {
  font-family: "InterLatin";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- リセット・基本 ---- */
*, *::before, *::after { box-sizing: border-box; }
/* # 付きリンク（ジャンルハブの条件チップ → /list/{slug}/#{genre}）で飛んだ先の見出しが、上端に貼り付いたナビの下に隠れないようにする。
   値は画面上端に貼り付く要素の高さ（640px 未満はナビ 48px、640〜1023px はヘッダー全体、1024px 以上はヘッダー 68px） */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--size-touch-min); }
/* hidden 属性は必ず隠す。リスト表は 640px 未満で tr に display:grid を与えるため、ブラウザ既定の [hidden]{display:none} が負け、
   フィルタ（K10）で外した行が画面に残っていた（375px の実測で 35行中 12行） */
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text-base);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--font-lineheight-base);
  min-width: 320px;
  letter-spacing: var(--font-tracking-tight);
  -webkit-font-smoothing: antialiased;
  /* データ由来の長い連続ASCII（品番・英字タイトル・URL 風文字列）で 375px を横に溢れさせない。継承されるので全本文に効く */
  overflow-wrap: anywhere;
}
a { color: var(--color-link-base); text-decoration: none; transition: color .18s ease, border-color .18s ease; }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
/* 見出しはサンセリフ。洗練は書体の装飾ではなく「太さを抑えて字間を広げる」ことで出す。
   太字＋詰め気味は情報密度の記号になり、当サイトの主張（丁寧に確認している）と合わない */
h1, h2, h3, h4 {
  margin: 0; line-height: var(--font-lineheight-tight);
  font-family: var(--font-family-display); font-weight: var(--font-weight-normal);
  letter-spacing: var(--font-tracking-wide); color: var(--color-text-strong);
  font-feature-settings: "palt" 1;
}
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.4em; }
table { border-collapse: collapse; width: 100%; }
button, select { font: inherit; letter-spacing: inherit; }
em { font-style: normal; }
strong { font-weight: var(--font-weight-bold); }
/* 価格・件数・日付は縦に揃えたいので等幅数字。欧文は上のスタックで Helvetica / Segoe UI / Arial に落ちる */
.num, .price, .stat__n, .card__meta, .list-row__n, .history, .breadcrumb, .answer, .filters__count, .verdict-summary { font-variant-numeric: tabular-nums; }

/* ---- 押せる範囲の最小寸法 44×44px（DESIGN 共通規則。A-117 検証の指摘3） ----
   矩形が 44px に届かない操作要素に、見た目・行の高さ・前後の文字送りを変えずに当たり判定だけを足す。中身に応じて3つの型を使い分ける。
   (1) 折り返さない要素（ジャンルナビ 幅41px・パンくず 幅39px・チップ 高さ26px）：中心に合わせた 44×44px の ::before を敷く。
       箱の寸法は --size-touch-row の固定値で書く。width:100% のような割合にすると、2行に折り返したインラインのリンクでは
       「最初の行の左端から最後の行の右端まで」に膨らみ、同じ段落の別のリンクを覆って押せなくする。
   (2) 文章の中のリンク（属性表の文脈リンク・本文の案内文）：上下の padding で行の断片ごとに 44px を確保する。
       インライン要素の上下 padding は行の高さに効かないので組版は動かない。引く値が 1em（font-size）なのは、断片の高さが
       line-height ではなく書体の寸法（ascent+descent）で決まるため。ascent+descent は 1em を下回らないので 44px を割らない
       （行の高さから引いていた以前の式では 36px にしかならなかった。A-117 検証の指摘3）。折り返して複数行になっても、
       同じ要素の断片どうしは当たり判定がつながるので穴が空かない。幅が 44px に満たない短いリンク（例「集計」30px）のために (1) も併せる。
   (3) 行そのものが押し先の一覧（更新履歴）：行（li）を 44px の段にして、リンクの ::after で行全体を覆う
       （作品カード・リスト表と同じ作法。折り返して3行になるリンクでも当たり判定が段全体でつながる）。
   当たり判定どうしが重なると後ろの要素が前の要素の分を奪うので、44px 未満の間隔で並ぶもの（カードのチップの段）は
   間隔の方も 44px 分に開ける（.chips の row-gap）。
   ::before / ::after の使い分けは既存の装飾と衝突しない側を選んでいる（.card__title a::after・.breadcrumb li + li::before）。 */
.genre-nav a, .breadcrumb li a, a.chip, .attr-link, p.text-muted a, .prose p a, .cta-block__text a { position: relative; }
.genre-nav a::before, .breadcrumb li a::before, a.chip::before, .attr-link::before, p.text-muted a::before, .prose p a::before, .cta-block__text a::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--size-touch-row); height: var(--size-touch-row);
  transform: translate(-50%, -50%);
}
.attr-link, p.text-muted a, .prose p a, .cta-block__text a { padding: calc((var(--size-touch-row) - 1em) / 2) 0; }

.container { width: 100%; max-width: var(--layout-maxwidth-content); margin: 0 auto; padding-left: var(--space-gutter-mobile); padding-right: var(--space-gutter-mobile); }
main.container { padding-bottom: var(--space-8); }
.prose { max-width: var(--layout-maxwidth-text); }

.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }
.text-stale { color: var(--color-status-stale); }
.text-unverified { color: var(--color-status-unverified); }
.text-soldout { color: var(--color-status-soldout); }
.text-ok { color: var(--color-status-ok); }

/* ---- 年齢確認オーバーレイ（CSS のみ。下のページはスクロールをロックしない） ---- */
.age-gate {
  position: fixed; inset: 0; z-index: var(--layout-zindex-overlay);
  background: var(--color-bg-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.age-gate__box {
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-base); border-top: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md); width: min(90vw, 460px); padding: var(--space-8) var(--space-6); text-align: center;
}
.age-gate__box p { color: var(--color-text-muted); margin-bottom: var(--space-5); }
/* 見出し相当だが h2 にしない（本文 h1 より前に見出しを置かない）。p の既定色・余白を上書きする */
.age-gate__box .age-gate__title { font-size: var(--font-size-xl); font-family: var(--font-family-display); font-weight: var(--font-weight-normal); letter-spacing: var(--font-tracking-wide); line-height: var(--font-lineheight-tight); color: var(--color-text-strong); margin: var(--space-4) 0; }
.age-gate__actions { display: flex; flex-direction: column; gap: var(--space-3); }
/* 通過済みの印は <html> に付く（app.js を <head> で読み込み、本文を描く前に付ける。body に付けると一度描いてから消えるのでチラつく） */
html.age-ok .age-gate { display: none; }

/* ---- ボタン・CTA（主：赤塗り／副：枠線） ---- */
.btn, .cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--size-button-height); padding: 0 var(--size-button-paddingx);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-weight: var(--font-weight-bold); font-size: var(--font-size-lg);
  letter-spacing: var(--font-tracking-base); transition: background .18s ease, border-color .18s ease, color .18s ease;
  text-decoration: none; cursor: pointer; width: 100%; text-align: center;
}
.btn--primary, .cta--primary { background: var(--color-accent-primary); border-color: var(--color-accent-primary); color: var(--color-text-inverse); }
.btn--primary:hover, .cta--primary:hover { background: var(--color-accent-primaryhover); border-color: var(--color-accent-primaryhover); color: var(--color-text-inverse); text-decoration: none; }
.btn--secondary, .cta--secondary { background: transparent; border-color: var(--color-border-strong); color: var(--color-text-base); }
.btn--secondary:hover, .cta--secondary:hover { background: transparent; border-color: var(--color-accent-primary); color: var(--color-accent-primary); text-decoration: none; }
/* 注記は価格に関わる文なので faint ではなく muted、サイズも xs ではなく sm（モバイルで読める下限） */
.cta-note { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-2) 0 0; }
/* 単品CTA の入れ物。「広告」ラベルをボタンの上に置く（縦に並べ、ボタンの幅はこれまでどおり） */
.cta-row { margin: var(--space-3) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }

.cta-block {
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-base);
  border-top: 1px solid var(--color-accent-primary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--space-5) var(--space-4); margin: var(--space-5) 0;
}
/* p 要素（h2 ではない）なので太字・行間・余白をここで与える */
.cta-block__title { font-size: var(--font-size-lg); font-family: var(--font-family-display); font-weight: var(--font-weight-medium); letter-spacing: var(--font-tracking-base); line-height: var(--font-lineheight-tight); color: var(--color-text-strong); margin: 0 0 var(--space-3); }
.cta-block__text { color: var(--color-text-muted); font-size: var(--font-size-sm); }
/* 小型（リスト・ハブ・作品の CTA-1 など。V02）：ボタン文言「見放題で見る（無料お試し登録）」を 375px でも1行に収める（lg・左右 32px では2行に折れていた） */
.cta-block--small { padding: var(--space-3) var(--space-4); }
.cta-block--small .cta-block__text { margin-bottom: var(--space-2); }
.cta-block--small .cta { font-size: var(--font-size-md); padding: 0 var(--space-4); }
.cta-block--large { padding: var(--space-6) var(--space-4); text-align: center; }
.cta-block--large .cta-block__title { font-size: var(--font-size-xl); }
.cta-block--common { margin-top: var(--space-8); }

/* ---- PR表示バー（全ページ最上部。ラベルは赤にしない） ----
   「広告」ラベルと帯の説明文は本文と同じ font.size.md。H-000 §4-5 は「本文と同等以上の文字サイズと色」を
   契約上の必須としている（DMM 参加規約4条4項。ステマ運用基準は「小さい文字・薄い色」を不明瞭な表示の例に挙げる）。
   ここは font.size.sm で、本文（md）より小さかった（A-117 検証の P0。実測で帯・CTA のラベルとも本文より 2px 小さい）。
   注釈だけでは守れないので、tools/style.test.mjs が「本文と同じトークンであること」を宣言で固定している（sm に戻す変異で赤くなる）。
   色は変えない（白地に対するコントラスト比 14.85:1。争点は色ではなく大きさ） */
.ad-bar { background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-md); color: var(--color-text-muted); }
.ad-bar .container { display: flex; align-items: center; gap: var(--space-3); min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
.ad-label {
  flex: none; background: var(--color-ad-bg); color: var(--color-ad-text); font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-md); line-height: 1.5;
  border-radius: var(--radius-xs); padding: 3px 10px; letter-spacing: var(--font-tracking-wide);
}
/* CTA の「広告」ラベル（H-000 §4-5「CTA にも PR ラベル」。A-117 検証の P1）。見た目は上の帯のラベルと同じで、新しい色やトークンは使わない。
   CTA ブロックの最初の行の先頭に置く。行の上端で揃え（ベースラインで揃えない＝書体の差し替えで行の高さを動かさない）、行を1段増やさない */
.ad-label--cta { vertical-align: top; margin-right: var(--space-2); }

/* ---- ヘッダー（サイト名はテキスト、または台帳 data/site_mark.json の自社のロゴ画像。テキストは赤くしない・箱に入れない） ----
   画面上端に貼り付けるのは、640px 未満はジャンルナビ（48px）だけ、640px 以上はヘッダー全体（V01）。
   640px 未満でヘッダー全体（サイト名 56px＋ナビ 48px＋罫 = 105px）を貼り付けると、812px の画面の13%を常に塞いでいた。
   sticky は親の箱の中でしか効かないので、640px 未満はヘッダーと内側の .container を display:contents にし、ナビの親を body にする */
.site-header { background: var(--color-bg-base); border-bottom: 1px solid var(--color-border-header); box-shadow: var(--shadow-sticky); }
.site-header .container { display: flex; flex-direction: column; }
.site-name { display: flex; align-items: center; min-height: var(--size-header-mobile); font-size: var(--font-size-md); font-family: var(--font-family-display); font-weight: var(--font-weight-medium); letter-spacing: var(--font-tracking-logo); }
.site-name a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); color: var(--color-text-base); }
/* サイト名の画像（台帳 data/site_mark.json があるときだけ出る）。高さだけを決め、幅は画像の縦横比に任せる */
.site-name__mark { display: block; height: var(--size-header-markheight); width: auto; }
/* 375px で 3ジャンル＋見放題が 4px 溢れるので、モバイルの間隔は space.3。デスクトップは space.6 */
.genre-nav {
  display: flex; gap: var(--space-3);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 calc(-1 * var(--space-gutter-mobile)); padding: 0 var(--space-gutter-mobile);
}
.genre-nav::-webkit-scrollbar { display: none; }
.genre-nav a {
  flex: none; display: inline-flex; align-items: center; min-height: var(--size-touch-min);
  color: var(--color-text-base); border-bottom: 2px solid transparent; white-space: nowrap;
}
/* hover は文字色を変えず（#ee2200 は下線なしだと 4.32:1）下線で示す */
.genre-nav a { font-size: var(--font-size-sm); letter-spacing: var(--font-tracking-base); }
.genre-nav a:hover { color: var(--color-accent-primary); text-decoration: none; border-bottom-color: var(--color-accent-primary); }
.genre-nav a.is-current { border-bottom-color: var(--color-accent-primary); font-weight: var(--font-weight-bold); }
@media (max-width: 639px) {
  .site-header, .site-header .container { display: contents; }
  .site-name { padding: 0 var(--space-gutter-mobile); }
  /* 下線は box-shadow の内側線で引き、高さを 48px ちょうどに保つ（border だと 49px になる）。現在地の 2px 下線はその上に重なる */
  .genre-nav {
    position: sticky; top: 0; z-index: var(--layout-zindex-sticky);
    height: var(--size-touch-min); margin: 0;
    background: var(--color-bg-base); box-shadow: inset 0 -1px 0 var(--color-border-header);
  }
}

/* ---- パンくず ----
   行の高さを 44px（size.touch.row）の1段にし、リンクのタップ領域もその高さにする（以前は上下の余白＋54px のリンクで 70px） */
.breadcrumb { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-x: auto; white-space: nowrap; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-height: var(--size-touch-row); }
.breadcrumb li + li::before { content: "›"; padding: 0 var(--space-2); color: var(--color-text-faint); }
/* リンクを持つ段は flex にし、44px のリンクを行のベースラインに載せない（載せると書体の寸法で段の高さが端数だけ動く） */
.breadcrumb li:not([aria-current]) { display: flex; align-items: center; }
.breadcrumb li a { display: inline-flex; align-items: center; min-height: var(--size-touch-row); }
/* 末尾（作品名）は表示だけ切る。JSON-LD の name は全文のまま */
.breadcrumb [aria-current] { color: var(--color-text-base); max-width: 60vw; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- 見出し（SP は灰帯、PC は文字のみ） ---- */
.page-title { font-size: var(--font-size-xl); line-height: 1.3; margin: var(--space-3) 0; overflow-wrap: anywhere; }
.page-lead { color: var(--color-text-muted); }
/* 答えの1文（リスト・ジャンルハブ。K09・K13・V02）。件数と内訳を本文より一段大きく、最も濃い文字色で置く */
.answer { font-size: var(--font-size-lg); color: var(--color-text-strong); margin: 0 0 var(--space-3); }
/* リストの「最終更新」の行（リードの直後の text-muted）。答えより目立たせない */
.page-lead + .text-muted { font-size: var(--font-size-sm); }
.section { margin: var(--space-section-mobile) 0; }
/* 帯ではなく細い罫。左端に真鍮の短い線を置いて視線の起点にする。
   件数（.count）は上端で揃える。ベースライン揃えだと大きさの違う2つの書体の寸法で見出しの高さが 1px 動く（フォント差し替えの縦ずれ） */
.section-title {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  color: var(--color-text-strong); font-size: var(--font-size-xl);
  padding: 0 0 var(--space-3); margin: 0 0 var(--space-5);
  border-bottom: 1px solid var(--color-border-base); position: relative;
}
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 1px;
  background: var(--color-accent-primary);
}
/* 件数は折り返さない（「17」と「件」が縦に割れていた） */
.section-title .count { flex: none; white-space: nowrap; font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-normal); }

/* ---- 画像スロット（縦長 3:4。素材台帳整備まで空） ---- */
.image-slot {
  aspect-ratio: var(--size-card-imageratio);
  background: var(--color-bg-subtle); border: 1px solid var(--color-border-base); border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); color: var(--color-text-faint);
  position: relative; overflow: hidden; width: 100%;
}
.image-slot--work { width: 96px; flex: none; }
/* 一覧行のスロットは 60px で文言を読めるサイズにできないため、文言を出さず空の装飾にする */
.image-slot--row { width: 48px; flex: none; border-color: var(--color-border-light); background: var(--color-bg-subtle); }
.image-slot--row span { display: none; }
.badges { position: absolute; top: var(--space-1); left: var(--space-1); display: flex; flex-direction: column; gap: 2px; }
.badge {
  display: inline-flex; align-items: center; height: var(--size-badge-height); padding: 0 6px;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); border-radius: var(--radius-xs); line-height: 1; white-space: nowrap;
}
.badge--svod { background: var(--color-status-svod); color: var(--color-text-inverse); }
.badge--new { border: 1px solid var(--color-accent-new); color: var(--color-accent-new); background: var(--color-bg-base); }

/* ---- 作品カード（枠線なし・影なし。作品名 2 行省略） ---- */
.card-grid { display: grid; grid-template-columns: var(--layout-grid-cardsmobile); gap: var(--space-cardgap-mobile); }
/* 作品名リンクを ::after でカード全体に伸ばし、画像スロットもタップ領域にする（リンクは1本のまま。チップは上に重ねる） */
.card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.card__title { font-size: var(--font-size-md); font-weight: var(--font-weight-normal); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: var(--font-clamp-cardtitle); line-clamp: var(--font-clamp-cardtitle); -webkit-box-orient: vertical; overflow: hidden; }
.card__title a { color: var(--color-text-base); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
/* チップは作品によって2〜3個で折り返し量が変わる。2行分を確保して、価格とメタの位置をカード間で揃える
   （2行分＝チップ 26px×2 ＋ 段の間隔。間隔は .chips の row-gap と同じ式で書く。合わせて 70px） */
.card .chips { position: relative; z-index: 1; min-height: calc(var(--size-chip-height) * 2 + (var(--size-touch-row) - var(--size-chip-height))); align-content: flex-start; }
.card:hover .card__title a { text-decoration: underline; }
.card__meta { font-size: var(--font-size-xs); color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; padding-top: var(--space-1); }

/* 段の間隔（row-gap）は、上下のチップの 44px の当たり判定が重ならない値にする（チップの高さ 26px ＋ 18px ＝ 44px）。
   横は space.1 のまま（チップの幅は最短の「靴下」でも 50px あり、44px の当たり判定が隣へはみ出さない） */
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--size-touch-row) - var(--size-chip-height)) var(--space-1); }
.chip {
  display: inline-flex; align-items: center; height: var(--size-chip-height); padding: 0 var(--size-chip-paddingx);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-pill);
  font-size: var(--font-size-xs); color: var(--color-text-base); white-space: nowrap; background: var(--color-bg-base);
}
/* 絞り込めないチップ（リンクなし）は破線＋muted で見分ける */
span.chip { border-style: dashed; color: var(--color-text-muted); }
a.chip:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); text-decoration: none; }

/* ---- 条件チップ（ジャンルハブ。K13・V06） ----
   行き先はリストの該当ジャンルの節（/list/{slug}/#{genre}）。ナビなのでタップ領域は 44px（通常の .chip は 26px）。
   640px 未満は横にスクロールする1段（ジャンルナビと同じ作法）。375px で折り返すと12個で9段・約460px になり、
   「条件で絞る」が作品一覧を画面の外へ押し出していた問題（K13）が形を変えて戻るため */
.cond-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.chip--nav { height: var(--size-touch-row); font-size: var(--font-size-sm); flex: none; }
.cond-chips a:focus-visible { outline: 2px solid var(--color-link-base); outline-offset: -2px; }
@media (max-width: 639px) {
  .cond-chips {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: calc(-1 * var(--space-gutter-mobile)); margin-right: calc(-1 * var(--space-gutter-mobile));
    padding: 0 var(--space-gutter-mobile);
  }
  .cond-chips::-webkit-scrollbar { display: none; }
}

/* ---- 価格（断定できるときだけ赤、できないときは琥珀の注記。注記は 12px を下回らない） ---- */
.price { font-weight: var(--font-weight-bold); color: var(--color-accent-primary); font-size: var(--font-size-md); }
.price .observed { font-weight: var(--font-weight-normal); font-size: var(--font-size-xs); color: var(--color-text-muted); margin-left: var(--space-1); }
.price--stale { color: var(--color-status-stale); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); }
.price--soldout { color: var(--color-status-soldout); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); }
.note-stale {
  background: var(--color-bg-tintyellow); border-left: 1px solid var(--color-status-stale);
  padding: var(--space-2) var(--space-4); border-radius: 0;
}
.status-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.status-list li:not(.note-stale) { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-base); }

/* ---- 属性テーブル（モバイルは縦積み、PC は 2 列） ---- */
.attr-table { font-size: var(--font-size-md); border-top: 1px solid var(--color-border-base); }
.attr-table th, .attr-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-base); vertical-align: top; }
.attr-table th { background: transparent; font-weight: var(--font-weight-normal); color: var(--color-text-muted); width: 34%; letter-spacing: .04em; }
/* 値の横の文脈リンク（K11）。値より一段小さく置く。タップ領域は上の共通規則(2)（上下の padding ＋ 44×44px の ::before）で確保する */
.attr-link { margin-left: var(--space-2); font-size: var(--font-size-sm); }
@media (max-width: 639px) {
  .attr-table, .attr-table tbody, .attr-table tr, .attr-table th, .attr-table td { display: block; width: auto; }
  .attr-table th { border-bottom: 0; padding-bottom: 2px; font-size: var(--font-size-sm); }
}

/* ---- リスト：節（主ジャンルごと。K09・V03） ---- */
.list-group .section-title { margin-bottom: 0; }
/* 節の見出しの直下に「{ジャンル}の作品一覧へ」。単独の1行なのでタップ領域 44px の高さにする */
.list-group__hub { display: flex; font-size: var(--font-size-sm); margin: var(--space-1) 0 var(--space-2); }
.list-group__hub a { display: inline-flex; align-items: center; min-height: var(--size-touch-row); }
.filters + .list-group { margin-top: var(--space-5); }

/* ---- フィルタ・並べ替え（リスト。K10・V04） ----
   中身は最初から HTML にあり、app.js は is-pending を外して表示を切り替えるだけ。is-pending の間は visibility:hidden で
   場所だけ占める（display:none にすると、JS が走った瞬間に下の表が押し下げられて CLS になる）。高さは2段分を先に確保する。
   ボタンはチップの見た目で高さ 44px。選択中は文字と枠を赤にし、内側に 1px の線を足して太い枠に見せる（色だけに頼らない。
   枠の太さを border で変えると幅が変わって折り返しが動くので box-shadow で描く）。件数は常に最後の1行 */
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  min-height: calc(var(--size-touch-row) * 2 + var(--space-2));
  margin: var(--space-4) 0;
}
.filters.is-pending { visibility: hidden; }
.filters button {
  display: inline-flex; align-items: center; flex: none; height: var(--size-touch-row); padding: 0 var(--size-chip-paddingx);
  border: 1px solid var(--color-border-light); border-radius: var(--radius-pill); background: var(--color-bg-base);
  color: var(--color-text-base); font-size: var(--font-size-sm); line-height: 1; white-space: nowrap; cursor: pointer;
}
.filters button:hover { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
.filters button[aria-pressed="true"] {
  border-color: var(--color-accent-primary); color: var(--color-accent-primary); background: var(--color-bg-tintred);
  box-shadow: inset 0 0 0 1px var(--color-accent-primary);
}
.filters label { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; font-size: var(--font-size-sm); color: var(--color-text-muted); white-space: nowrap; }
.filters select {
  height: var(--size-touch-row); padding: 0 var(--space-2); border: 1px solid var(--color-border-base); border-radius: var(--radius-sm);
  background: var(--color-bg-base); color: var(--color-text-base); font-size: var(--font-size-sm);
}
.filters button:focus-visible, .filters select:focus-visible { outline: 2px solid var(--color-link-base); outline-offset: 2px; }
.filters__count { flex: 0 0 100%; margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--font-lineheight-tight); }

/* ---- リスト表（640px 以上は横に広い表。overflow-x:auto のコンテナに入れる） ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.list-table { min-width: 600px; font-size: var(--font-size-sm); }
/* 作品名列に幅100%を与えると余白がそこへ集まり、判定列が右側にまとまる（列がページ幅に散らばらない） */
.list-table th, .list-table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border-light); vertical-align: middle; white-space: nowrap; }
.list-table tbody tr:hover { background: var(--color-bg-subtle); }
.list-table th { background: transparent; font-weight: var(--font-weight-normal); color: var(--color-text-faint); letter-spacing: .06em; border-bottom-color: var(--color-border-strong); }
.list-table td.col-title { white-space: normal; width: 100%; min-width: 240px; padding-left: 0; }
/* 作品名は2行で省略し、行の高さは 3:4 の画像枠（48×64px）が決める（2行＋メタで 63px）。
   作品名の折り返しがフォントで1行⇔2行に変わっても行の高さが動かない */
.list-table td.col-title a {
  display: -webkit-box; -webkit-line-clamp: var(--font-clamp-cardtitle); line-clamp: var(--font-clamp-cardtitle); -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--font-size-md); line-height: var(--font-lineheight-tight); color: var(--color-text-base);
}
.list-table td.col-title .card__meta { line-height: var(--font-lineheight-tight); }
/* 作品名のリンクを ::after で広げ、作品ページへのタップ領域を 44px 以上にする（作品カードと同じ作法。A-117 検証の P1：
   リンクだけでは高さ 21px（折り返して 42px）で、行の残りは押せなかった）。640px 以上は作品名のセル（画像枠 64px＋余白の高さ）に、
   640px 未満はカード状の行全体に広げる（下の @media で tr を基準にする）。行の中にほかのリンクは無い */
.list-table td.col-title { position: relative; }
.list-table td.col-title a::after { content: ""; position: absolute; inset: 0; }
.list-table td.col-removed, .list-table td.col-svod { font-weight: var(--font-weight-medium); }
/* 着用アイテム（例「タイツ（ベージュ・20デニール）」）は折り返してよい。括弧の前で折れるよう keep-all にし、
   列の最小幅が1文字まで縮まないよう、この列だけ overflow-wrap を既定に戻す（値は列挙と色の表から来る短い語） */
/* 最小幅は「（ベージュ・20デニール）」の12字＋左右の余白。これより狭いと3行に折れ、行の高さが画像枠（64px）を超えて揃わなくなる */
.list-table td.col-garment { white-space: normal; word-break: keep-all; overflow-wrap: normal; min-width: calc(var(--font-size-sm) * 12 + var(--space-3) * 2); }
.list-table .price { font-size: var(--font-size-sm); }
.row-work { display: flex; gap: var(--space-3); align-items: center; }
/* 作品名とメタの箱は幅0から伸ばす。メタは1行省略（nowrap）なので、そのままだと長いメーカー名の全長が作品列の最小幅になり、
   1280px でも表が枠より広がって横スクロールが出ていた（架空の長いメーカー名で実測）。幅0なら列の最小幅は画像枠＋余白だけになり、省略が効く */
.row-work > div:not(.image-slot) { flex: 1 1 0; width: 0; min-width: 0; }
/* 640px 未満：表をカード状の行に組み替える（DESIGN §9）。列見出しは td の data-label から出す。
   3段：価格・見放題／着用範囲・脱衣／着用アイテム（全幅）。横スクロールは発生させない */
@media (max-width: 639px) {
  .table-wrap { overflow: visible; }
  .list-table { min-width: 0; display: block; }
  .list-table thead { display: none; }
  .list-table tbody { display: block; }
  .list-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-base); position: relative; }
  .list-table td { display: block; padding: 0; border-bottom: 0; white-space: normal; line-height: var(--font-lineheight-tight); }
  /* 作品名のリンクの ::after は行（tr）いっぱいに広げる（セルを基準にしない） */
  .list-table td.col-title { grid-column: 1 / -1; min-width: 0; margin-bottom: var(--space-1); position: static; }
  .list-table td[data-label]::before { content: attr(data-label) "："; color: var(--color-text-muted); }
  /* 値の span をベースラインで揃えると、書体の寸法の丸めでセルが 1px 伸び縮みする（行ごとに積み上がって下の位置がずれる） */
  .list-table td[data-label] > span { vertical-align: top; }
  .list-table td.col-price, .list-table td.col-svod { order: 1; }
  .list-table td.col-wear, .list-table td.col-removed { order: 2; }
  .list-table td.col-garment { order: 3; grid-column: 1 / -1; }
}

/* ---- 行リンク（ジャンル・条件の一覧） ---- */
.list-rows { display: grid; border-top: 1px solid var(--color-border-light); }
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  padding: var(--space-4) var(--space-2); min-height: var(--size-touch-min); color: var(--color-text-base);
}
.list-row:hover { text-decoration: none; color: var(--color-accent-primary); background: var(--color-bg-subtle); }
.list-row__q { font-size: var(--font-size-lg); }
.list-row__q { min-width: 0; }
.list-row__q small { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.list-row__n { white-space: nowrap; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---- 空状態 ---- */
.empty { background: transparent; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: var(--space-10) var(--space-4); text-align: center; color: var(--color-text-muted); }

/* ---- トップ ---- */
.hero { padding: var(--space-8) 0 var(--space-8); border-bottom: 1px solid var(--color-border-base); }
.hero h1 { font-size: var(--font-size-xxl); line-height: 1.7; margin-bottom: var(--space-5); font-weight: var(--font-weight-normal); }
.hero .page-lead { max-width: var(--layout-maxwidth-text); }
.stats { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-6); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
/* 数字は細く大きく。太い数字は安売りの記号になる */
.stat__n { font-size: var(--font-size-hero); font-family: var(--font-family-display); font-weight: var(--font-weight-normal); line-height: 1.1; letter-spacing: .01em; color: var(--color-accent-primary); }
.stat__l { font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: var(--font-tracking-base); }
.genre-cards { display: grid; gap: var(--space-3); }
.genre-card { display: block; border: 1px solid var(--color-border-base); border-radius: var(--radius-sm); padding: var(--space-5); color: var(--color-text-base); background: var(--color-bg-subtle); }
.genre-card:hover { border-color: var(--color-accent-primary); text-decoration: none; color: var(--color-text-base); }
.genre-card__t { display: block; font-size: var(--font-size-lg); font-family: var(--font-family-display); font-weight: var(--font-weight-medium); letter-spacing: var(--font-tracking-base); color: var(--color-text-strong); }
.genre-card__d { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); margin: var(--space-1) 0 var(--space-2); }
.genre-card__c { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.freshness { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-3); }
.method { margin: 0; border-top: 1px solid var(--color-border-base); }
.method > div { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-light); }
.method > div:last-child { border-bottom: 0; }
.method dt { font-family: var(--font-family-display); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); letter-spacing: var(--font-tracking-base); color: var(--color-text-strong); }
.method dd { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---- 作品ページ ----
   上部（V05）：画像枠と判定サマリーを 375px でも横に並べる。画像枠は 96px 幅で、3:4 の aspect-ratio が高さ（128px）を先に確保するので、
   画像が入る日も CLS は出ない。以前は 160×213px の枠が上に載り、「途中で脱ぐか」が 1.8 画面下（y=1463）にあった */
.work-head { display: flex; flex-direction: row; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); }
.work-head__body { flex: 1; min-width: 0; }
/* 判定サマリー（K11）：着用アイテム・着用範囲・途中で脱ぐか・破損 の4項目を2列に。根拠と確認日は全幅の小さな行 */
.verdict-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); margin: 0; }
.verdict-summary > div { min-width: 0; border-top: 1px solid var(--color-border-light); padding-top: var(--space-1); }
.verdict-summary dt { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: var(--font-lineheight-tight); }
.verdict-summary dd { margin: var(--space-1) 0 0; font-size: var(--font-size-md); color: var(--color-text-strong); line-height: var(--font-lineheight-tight); }
.verdict-summary > div:only-child, .verdict-summary__source { grid-column: 1 / -1; }
.verdict-summary__source dt, .verdict-summary__source dd { display: inline; margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.verdict-summary__source dt::after { content: "："; }
.work-verdict { margin: var(--space-5) 0; }
.verdict { border: 0; border-left: 1px solid var(--color-accent-primary); border-radius: 0; padding: var(--space-2) 0 var(--space-2) var(--space-4); font-size: var(--font-size-lg); line-height: 1.9; }
.verdict__label { display: block; color: var(--color-accent-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); letter-spacing: var(--font-tracking-logo); margin-bottom: var(--space-2); }
.fits, .history, .work-links { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
/* 行にリンクがある履歴（/updates/）は、リンクの ::after で行全体を覆って段そのものを押し先にする（上の共通規則(3)）。
   リンク自体は 19px の1行しかなく、行の残り（日付・種別）は押せなかった。作品名が長いと3行に折り返すので、
   中心に置く 44×44px の箱では行の端に穴が残る（そのため型(1)ではなくここだけ行を覆う）。
   行を覆う ::after の基準は li（リンク側に position を置くと、基準がリンク自身になって行を覆えない）。
   行の高さは .prose .history li の上下 space.2 で既に 44px を超えている（/updates/ は .prose の中）。
   min-height は .prose の外で使われたときの保証で、今のページでは効いていない。
   リンクの無い履歴（作品ページ・集計の内訳）は詰めたまま */
.history li:has(a) { position: relative; min-height: var(--size-touch-row); }
.history li:has(a) a::after { content: ""; position: absolute; inset: 0; }
/* タップ高さ 44px：行高 21px を引いた分を上下に振る */
.work-links li a { display: block; padding: calc((var(--size-touch-min) - 21px) / 2) 0; }
/* 同じ条件の作品（K12）：条件のチップと作品の一覧のあいだを空ける */
.same-condition .chips { margin: 0 0 var(--space-3); }
/* 更新履歴・集計（/updates/ /stats/。V07）：既存の .history を本文幅で使うときは行を細い罫で区切る（新しいクラスは作らない） */
.prose .history { gap: 0; border-top: 1px solid var(--color-border-light); }
.prose .history li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light); }

/* ---- ブログの記事（/blog/{slug}/。src/pages/blog.mjs）：本文は Markdown を描画した HTML で class を持たないので、.blog-post の中の要素に当てる ----
   コードと表は 375px で横に溢れさせない（その要素の中だけで横に送る）。表の揃え（描画器が th・td に付ける style="text-align: …"）と食い違わないよう text-align は書かない */
.blog-post pre, .blog-post table { display: block; max-width: 100%; overflow-x: auto; }
.blog-post pre { padding: var(--space-3); background: var(--color-bg-subtle); }
.blog-post blockquote { margin: var(--space-3) 0; padding-left: var(--space-3); border-left: 1px solid var(--color-border-base); color: var(--color-text-muted); }
.blog-post th, .blog-post td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-base); vertical-align: top; }

/* ---- フッター（白地に灰枠。濃灰帯は使わない） ---- */
.site-footer { border-top: 1px solid var(--color-border-base); padding: var(--space-8) 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.site-footer p { margin: 0 0 var(--space-2); }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: var(--space-2) 0 var(--space-3); }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--size-touch-min); }
.footer-disclaimer { color: var(--color-text-base); font-weight: var(--font-weight-bold); }
.footer-site { color: var(--color-text-faint); }
.adult-mark { display: inline-block; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs); padding: 2px 8px; font-size: var(--font-size-xs); color: var(--color-text-base); line-height: 1.4; }

/* ---- タブレット以上（tokens.breakpoint.sm = 640px） ---- */
@media (min-width: 640px) {
  html { scroll-padding-top: calc(var(--size-header-mobile) + var(--size-touch-min)); }
  .site-header { position: sticky; top: 0; z-index: var(--layout-zindex-sticky); }
  .card-grid { grid-template-columns: var(--layout-grid-cardsdesktop); gap: var(--space-cardgap-desktop); }
  .genre-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-head { gap: var(--space-5); }
  .image-slot--work { width: 200px; }
}

/* ---- デスクトップ（tokens.breakpoint.lg = 1024px） ---- */
@media (min-width: 1024px) {
  html { scroll-padding-top: var(--size-header-desktop); }
  .container { padding-left: var(--space-gutter-desktop); padding-right: var(--space-gutter-desktop); }
  .btn, .cta { width: auto; }
  .age-gate__actions { flex-direction: row; justify-content: center; }
  .site-header .container { flex-direction: row; align-items: center; gap: var(--space-6); min-height: var(--size-header-desktop); }
  .site-name { min-height: var(--size-header-desktop); }
  .genre-nav { margin: 0; padding: 0; overflow: visible; gap: var(--space-6); flex: 1; }
  .genre-nav a { min-height: var(--size-header-desktop); }
  .genre-nav a.nav-svod { margin-left: auto; }
  .page-title { font-size: var(--font-size-hero); }
  .section { margin: var(--space-section-desktop) 0; }
  .section-title { font-size: var(--font-size-xxl); padding: 0 0 var(--space-3); margin: 0 0 var(--space-6); }
  .list-group .section-title { font-size: var(--font-size-xl); margin-bottom: 0; }
  .image-slot--work { width: 240px; }
  .hero h1 { font-size: var(--font-size-hero); }
}

/* ---- 640px 未満の詰め（最後に置き、上の既定を上書きする） ---- */
@media (max-width: 639px) {
  /* 節の見出しは本文の h1（21px）より小さく（17px）。見出しの階層を大きさで保つ */
  .list-group .section-title { font-size: var(--font-size-lg); }
  .cta-block--small { padding: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
  /* 行リンクの説明（リストの lead）は2行で省略し、高さも2行分に固定する。数字（「20デニール以下」など）を含む説明は
     書体の差し替えで3行⇔2行に変わり、下の要素がすべて 22px 動いていた */
  .list-row__q small {
    display: -webkit-box; -webkit-line-clamp: var(--font-clamp-cardtitle); line-clamp: var(--font-clamp-cardtitle); -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(var(--font-size-xs) * var(--font-lineheight-base) * var(--font-clamp-cardtitle));
  }
}