/* 異世界ツヅキ Fable案 ------------------------------------------------
   配色は承認済みの方向（§7）に従う。
   面積: 白・明色 50-55% / 明るい青 30-35% / 深い青 5-8% / 黄 5-7% / コーラル 2-3%
   小さい文字のコントラスト確保のため、青・コーラルは文字用の濃色を別に持つ。 */

:root {
  /* 青のポスター（2026-08-19。ops/デザイン方針_青ポスター_2026-08-19.md）。
     参照は青と白の2色で、濁りのない高彩度の青だった。
     **色数を絞るほど書影が立つ。**書影はカラフルなので、
     器の側が色を持つと喧嘩する */
  --blue: #1F35D6;        /* 主役の青。白と 8.9:1 で、小さい文字にも使える */
  --blue-ink: #1F35D6;    /* 文字・ボタン用（主役の青と同一） */
  --blue-vivid: #2E4BFF;  /* 面で置くときの青。文字には使わない（白と 5.6:1） */
  --blue-pale: #DDE2FA;   /* 淡い面 */
  --blue-mist: #f5f6f7;   /* v7で無彩色へ。旧 #EEF0FC */
  --paper: #F7F7F4;       /* 紙の地。純白にしない */
  /* 黄とコーラルは**青の中に畳んだ**。
     12箇所の黄（発見・保存・前進CTA）と2箇所のコーラルが
     「よくあるWebサービス」の顔を作っていた。
     変数は残す——一気に消すと当たりが見えなくなるので、
     まず色だけ青系に寄せて、当たりを見てから使用箇所を整理する */
  --yellow: #2E4BFF;      /* → 青に畳んだ。旧 #F2B632 */
  --coral: #1F35D6;       /* → 青に畳んだ。旧 #E85A52 */
  --coral-ink: #1F35D6;   /* → 青に畳んだ。旧 #C4443C */
  --deep: #252F42;        /* 本文・フッター */
  --deep-soft: #4C5871;
  --line: #D9DFF0;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(37, 47, 66, 0.08);
  --shadow-lift: 0 8px 28px rgba(37, 47, 66, 0.16);
  /* 書体とサイズの決まりは DESIGN.md にまとめてある。
     ここが唯一の定義。以前は下の方にもう一組あって、前の定義が死んでいた */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic",
          "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;

  /* 文字サイズは8段。この外を新しく足さない（DESIGN.md §2） */
  --fs-3xs:  0.625rem;   /* 10px タグ・件数・フッターの注記（最小） */
  --fs-2xs:  0.6875rem;  /* 11px 補助の数字・メタ情報 */
  --fs-xs:   0.75rem;    /* 12px カード題名・ボタン・チップ */
  --fs-sm:   0.8125rem;  /* 13px UIの文字 */
  --fs-base: 0.875rem;   /* 14px 一覧の文字・セクション見出し */
  --fs-md:   1rem;       /* 16px 本文・入力欄・作品題名 */
  --fs-lg:   1.125rem;   /* 18px 小見出し */
  --fs-xl:   1.5rem;     /* 24px ページ見出し */
  /* HOMEの大見出しだけの例外。**増やさない**（DESIGN.md §2） */
  --fs-display: clamp(1.5rem, 5.4vw, 2.75rem);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  /* **飛んだ先がヘッダーに隠れないようにする。**
     ヘッダーは position:sticky で上に居座る（実測 390px=52px / 768px以上=68px）。
     `scroll-padding-top` が無いと、パンくず・スキップリンク・ページ内リンクで
     飛んだ先がヘッダーの下に潜り、見出しが読めない。
     以前は `.tag-cat` にだけ `scroll-margin-top: 84px` を手で足してあったが、
     **飛び先が増えるたびに書き足す形**では必ず漏れる。器の側で一度だけ決める。
     （実ブラウザ検査でも、要素を最上部へスクロールしてから押す動きが
       ヘッダーに阻まれて失敗していた） */
  scroll-padding-top: 64px;
  /* iOSで下に引っ張ったとき、画面上端に出る余白の色。
     指定が無いと白が出る。ヘッダーと同じ青にして境目を消す */
  background-color: var(--blue);
}
@media (min-width: 768px) {
  html { scroll-padding-top: 80px; }   /* ヘッダー68px + 12px */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--deep);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--blue-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--deep); color: #fff; padding: 8px 16px;
  border-radius: 0 0 var(--v7-radius) var(--v7-radius); text-decoration: none;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 247, 0.92);
  /* Safari は 18 まで接頭辞が要る。無いと iOS で効かない */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  max-width: 1160px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--deep); min-width: 0; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: var(--fs-xl); letter-spacing: 0.06em; white-space: nowrap; }
.brand-note { font-size: var(--fs-2xs); color: var(--deep-soft); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 8px; white-space: nowrap; }
.site-nav { display: flex; gap: 4px; }
.site-nav a {
  text-decoration: none; color: var(--deep); font-size: var(--fs-base); font-weight: 600;
  padding: 7px 14px; border-radius: var(--radius-pill);
}
.site-nav a[aria-current="page"] { background: var(--blue); color: #fff; }
.site-nav a:not([aria-current="page"]):hover { background: var(--blue-pale); }
.shelf-count {
  display: inline-block; min-width: 18px; text-align: center;
  background: var(--yellow); color: var(--deep);
  border-radius: var(--radius-pill); font-size: var(--fs-2xs); padding: 0 5px; margin-left: 2px;
}
.site-nav a[aria-current="page"] .shelf-count { background: #fff; }

/* ---------- hero ---------- */
/* **イラストの高さは中身任せにしない。**
   気分チップを書影の入口へ下ろしたとき、その分だけ帯が縮んで
   横長に潰れて見えた（owner指摘 2026-08-19）。画面幅に対する下限を持たせる。
   ただし上げすぎない。**気分の入口を折り返しの近くに保つ**ほうが優先で、
   チップがあった頃の高さまでは戻さない */
.hero {
  position: relative; overflow: hidden; background: #E2E8FA;
  min-height: min(40vw, 500px);
  display: flex; align-items: center;
}
.hero-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 66% 30%; display: block;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(226, 232, 250, 0.10) 0%,
    rgba(250, 250, 247, 0.34) 52%,
    rgba(250, 250, 247, 0.86) 86%,
    #FAFAF7 100%);
}
.hero-inner {
  position: relative; max-width: 860px; margin: 0 auto;
  padding: 76px 20px 60px; text-align: center;
}

/* イラストを外したヒーロー（owner確定 2026-08-19）。
   「イラストはなくていい。その機能は書影が持つことになる」
   **紙の地に、文字と罫線だけで組む。**参照（青のポスター）の言語。
   .hero-art / .hero-veil の定義は残す——**戻せるようにしておく**。 */
.hero-flat {
  background: var(--paper);
  min-height: 0;
  border-bottom: 1px solid var(--line);
}
/* 製図の罫線。**薄く。**書影の区画には敷かない */
.hero-flat::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right, transparent 0 119px, rgba(31,53,214,.06) 119px 120px),
    repeating-linear-gradient(to bottom, transparent 0 119px, rgba(31,53,214,.06) 119px 120px);
}
/* 白いハローは画像に重ねるためのものだった。地が紙なら要らない */
.hero-flat .hero-title, .hero-flat .hero-eyebrow, .hero-flat .hero-lead {
  text-shadow: none;
}
.hero-flat .hero-inner { padding: 64px 20px 52px; }
/* ヒーローの文字。背景は明るい空と白い城で、場所によって明暗が変わる。
   **白いハローを強めて、どこに重なっても読めるようにする。**
   画像を暗くはしない（世界観の明るさが売り）。
   実測：見出しの濃紺は12.84でAAA、**小見出しの青は5.43でAAに届くだけ**。
   小見出しだけ濃くして、青の印象は保つ */
.hero-eyebrow, .hero-title, .hero-lead, .hero-moods-label {
  text-shadow: 0 1px 2px rgba(250, 250, 247, 0.95),
               0 0 10px rgba(250, 250, 247, 0.95),
               0 0 22px rgba(250, 250, 247, 0.9);
}
.hero-eyebrow {
  /* #3763BF は白地で5.43。空の青と同系色でもあるので、一段濃くする（→7.9） */
  font-size: var(--fs-sm); letter-spacing: 0.14em; color: #2B4F9E;
  font-weight: 700; margin: 0 0 14px;
}
.hero-title {
  font-family: var(--serif);
  /* 唯一の可変。トップの主見出しだけは画面幅で伸ばす（DESIGN.md §8）。
     px直書きを残さないため rem で書く（1.875rem=30px / 2.875rem=46px） */
  font-size: var(--fs-display);
  letter-spacing: 0.08em; margin: 0 0 14px; color: var(--deep); font-weight: 700;
}
.hero-lead { margin: 0 auto 30px; max-width: 560px; font-size: var(--fs-md); color: var(--deep); }

.hero-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 620px; margin: 0 auto 28px;
  background: #fff; border: 2px solid var(--blue);
  border-radius: var(--radius-pill); padding: 6px 6px 6px 16px;
  box-shadow: var(--shadow);
}
.search-icon { width: 20px; height: 20px; color: var(--blue-ink); flex: none; }
.hero-search input {
  flex: 1; min-width: 0; border: 0; background: none;
  /* iOS Safariは16px未満の input にフォーカスすると画面を自動で拡大する。
     15pxだったため、スマホで検索するたび画面が飛んでいた（DESIGN.md §2） */
  font-size: var(--fs-md);
  font-family: inherit; color: var(--deep); padding: 8px 0;
}
.hero-search input:focus { outline: none; }
.hero-search input::placeholder { color: #7C8A96; }

/* HOMEは旧サイト型の大型ヒーローを置かず、ヘッダー直下を検索から始める。 */
.home-search {
  padding: 20px 20px 12px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.home-search .hero-search { margin: 0 auto; box-shadow: none; }
.home-search-copy, .home-search-sub, .home-search-tabs, .home-search .hero-search {
  width: min(100%, 760px);
}
.home-search-copy {
  margin: 0 auto 6px; color: var(--deep); font-size: clamp(var(--fs-lg), 2.2vw, var(--fs-xl));
  line-height: 1.55; font-weight: 600;
}
.home-search-copy strong {
  color: #16181c; border-bottom: 4px solid #b8e62e; padding-bottom: 1px;
  font-weight: 800; white-space: nowrap;
}
.home-search-sub {
  margin: 0 auto 12px; color: var(--deep-soft); font-size: var(--fs-sm); line-height: 1.55;
}
.home-search-sub strong { color: var(--deep); font-weight: 800; }
.home-search-tabs {
  display: flex; gap: 18px; align-items: center; margin: 12px auto 8px;
  font-size: var(--fs-sm); font-weight: 700;
}
.home-search-tabs span, .home-search-tabs a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--deep-soft);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.home-search-tabs [aria-current="page"] { color: var(--deep); border-bottom-color: var(--lime, #b8e62e); }
.home-search-tabs a:hover, .home-search-tabs a:focus-visible { color: var(--blue-ink); }

.hero-moods-label { font-size: var(--fs-sm); font-weight: 700; color: var(--deep); margin: 0 0 10px; }
.mood-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-family: inherit; font-size: var(--fs-base); font-weight: 700;
  padding: 10px 22px; border-radius: var(--radius-pill); line-height: 1.4;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-blue { background: var(--blue-ink); color: #fff; }
.btn-yellow { background: var(--yellow); color: var(--deep); }
.btn-outline { background: #fff; color: var(--blue-ink); border: 2px solid var(--blue); }
.btn-text {
  background: none; border: 0; cursor: pointer; font-family: inherit;
  color: var(--blue-ink); font-size: var(--fs-sm); text-decoration: underline; padding: 4px;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); background: #fff; color: var(--deep);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: var(--fs-sm); font-family: inherit;
  cursor: pointer; line-height: 1.4;
  /* 色は0.28sでゆっくり（owner指示）。動きは速いまま */
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
.chip:hover { border-color: var(--blue); background: var(--blue-mist); }
.chip[aria-pressed="true"] { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.chip .chip-count { font-size: var(--fs-2xs); opacity: 0.75; }
/* 気分ボタン。**枠を濃くし、面を不透明にする。**
   #C3CFEE・不透明度92%だと、明るい空の上で境界が溶けて押せる範囲が読めない。
   高さも33pxしかなく、指の目標（44px）に届いていなかった */
.chip-mood {
  border-color: #9FB2E0; background: #fff;
  min-height: 40px; box-shadow: 0 1px 2px rgba(27, 43, 77, 0.06);
}
.chip-mood:hover, .chip-mood:focus-visible {
  border-color: var(--blue); background: var(--blue-mist);
}

/* 主人公タグ（一段上の入口） */
.lead-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lead-tags-label { font-size: var(--fs-base); font-weight: 700; }
.chip-lead {
  font-size: var(--fs-sm); font-weight: 700; padding: 7px 18px;
  border-color: #C7D2EC;
}

/* ---------- discover body ---------- */
.discover-body { max-width: 1160px; margin: 0 auto; padding: 36px 20px 72px; }

.condition-bar {
  background: var(--blue-mist); border: 1.5px solid var(--blue-pale);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 32px;
}
.condition-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.condition-title { font-size: var(--fs-base); margin: 0; }
.condition-count { margin: 0; font-size: var(--fs-sm); color: var(--blue-ink); font-weight: 700; flex: 1; }
.condition-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.condition-chips .chip { background: #fff; }
.condition-chips .chip .x { font-weight: 700; color: var(--coral-ink); }

.section-title {
  font-family: var(--serif); font-size: var(--fs-2xl); letter-spacing: 0.05em;
  margin: 0 0 6px; font-weight: 700;
}
.section-note { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--deep-soft); }
/* 掛け合わせページの1行。件数の下、絞り込みチップの上に置く */
.page-lead { margin: 2px 0 16px; font-size: var(--fs-sm); color: var(--deep-soft); line-height: 1.7; }

.tag-section { margin-bottom: 44px; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* すべてのタグ（/tags/）のカテゴリ見出し。193種が件数順だけで並んでいて
   探しにくいという指摘（2026-08-11）を受けて分類した */
.tag-cat { margin-top: 30px; scroll-margin-top: 84px; }
.tag-cat:first-of-type { margin-top: 20px; }
.tag-cat-title {
  font-family: var(--serif); font-size: var(--fs-lg); font-weight: 700;
  margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px;
}
.tag-cat-count { font-family: var(--sans); font-size: var(--fs-xs); color: var(--deep-soft); font-weight: 400; }
.tag-cat-note { margin: -4px 0 12px; font-size: var(--fs-xs); color: var(--deep-soft); }
.all-tags { margin-top: 14px; }
.all-tags summary {
  cursor: pointer; font-size: var(--fs-base); color: var(--blue-ink); font-weight: 600;
  padding: 6px 2px; width: fit-content;
}
.all-tags-body { padding-top: 12px; }
.all-tags-body input {
  width: min(320px, 100%); font-family: inherit; font-size: var(--fs-base);
  border: 1.5px solid var(--line); border-radius: var(--v7-radius); padding: 9px 14px;
  margin-bottom: 12px; background: #fff; color: var(--deep);
}

/* ---------- 絞り込み（タグページ・気分ページ） ---------- */
/* 見出しの下の行。左に総数、右にページ送り */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  /* 折り返さない。件数とページ送りは同じ行に置く（狭い画面だけ下で解除する） */
  gap: 16px; flex-wrap: nowrap; margin: -8px 0 20px;
}
/* 絞り込みの件数（ページ内）と混同されないよう別扱い */
.page-count { font-size: var(--fs-sm); margin: 0; color: var(--deep-soft); white-space: nowrap; }

/* 検索結果の絞り込み。件数の多い検索から先へ進むための手がかり */
.search-refine { margin: 4px 0 18px; }
.search-refine-label {
  font-size: var(--fs-xs); color: var(--deep-soft); margin: 0 0 8px;
}
.search-refine .chip { font-family: var(--sans); cursor: pointer; }

.pager {
  display: flex; align-items: center; gap: 14px; flex: none;
  font-size: var(--fs-sm); color: var(--deep-soft);
}
.pager .btn { flex: none; }
/* 「2 / 4 ページ」とボタンがくっついて見えるので、ここだけ少し離す */
.pager-label { font-variant-numeric: tabular-nums; margin-right: 4px; white-space: nowrap; }
.works-grid + .pager, .works-empty + .pager { margin-top: 32px; justify-content: center; }

/* 横幅が足りない画面では、件数の下にページ送りを落とす */
@media (max-width: 520px) {
  .page-head { flex-wrap: wrap; gap: 10px; }
  .page-head .pager { width: 100%; }
}

.refine {
  background: var(--blue-mist); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 16px; margin: 0 0 26px;
}
.refine-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.refine-title { font-size: var(--fs-base); font-weight: 700; margin: 0; }
.refine-head .works-status { margin: 0; }
.refine-head .btn-text { margin-left: auto; }
.refine-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.refine-more-toggle {
  display: none; min-width: 44px; min-height: 44px; margin: 10px 0 -4px;
  padding: 8px 4px; border: 0; background: transparent; color: var(--blue-ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; text-align: left;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (max-width: 640px) {
  .refine-more-toggle:not([hidden]) { display: inline-flex; align-items: center; }
}

/* ---------- 本棚の控え（書き出し／読み込み） ---------- */
.shelf-backup {
  margin-top: 40px; padding: 18px 20px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-mist);
}
.shelf-backup-title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 6px; }
.shelf-backup-note { font-size: var(--fs-sm); color: var(--deep-soft); margin: 0 0 14px; line-height: 1.8; }
.shelf-backup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* 読み込みは <label for> でファイル選択を開く。見た目はボタンに揃える */
.shelf-backup-actions label.btn { cursor: pointer; }
/* 文言が短いので、既定の padding だと横に間延びする */
.btn-narrow { padding: 10px 16px; min-width: 104px; text-align: center; }
.shelf-backup-status { font-size: var(--fs-sm); color: var(--deep-soft); margin: 12px 0 0; min-height: 1.4em; }
.shelf-backup-status.is-bad { color: var(--coral-ink); font-weight: 700; }


.ad-note {
  /* バッジと文章は同じ行から始める。文章が長いときは文章側だけが折り返す */
  display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap;
  font-size: var(--fs-xs); color: var(--deep-soft);
  margin: 10px 0 16px;          /* パンくずと詰まっていたので上を空ける */
}
.ad-badge {
  flex: none; font-size: var(--fs-2xs); font-weight: 700;
  color: var(--deep); background: var(--blue-pale);
  border-radius: var(--v7-radius); padding: 4px 9px;
  /* 字送りは最後の文字の後ろにも入るため、そのままだと文字が左に寄って見える。
     同じ量だけ右へ送り返して中央に見えるようにする */
  letter-spacing: 0.08em; text-indent: 0.08em;
  line-height: 1;               /* 行の高さを継がず、上下の余白を padding だけで決める */
}

/* ---------- works grid ---------- */
.works-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.works-tools select {
  font-family: inherit; font-size: var(--fs-sm); color: var(--deep);
  border: 1.5px solid var(--line); border-radius: var(--v7-radius); padding: 8px 12px; background: #fff;
}
.works-status { font-size: var(--fs-sm); color: var(--deep-soft); margin: 4px 0 18px; }

/* 結果操作は、並び替え／表示／操作の3段。複数選択は表示密度を変更しない。 */
.result-toolbar {
  display: grid; gap: 8px; margin: 12px 0 18px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--v7-radius); background: #fff;
}
.result-sort-row label { display: grid; gap: 4px; font-size: var(--fs-xs); font-weight: 700; }
.result-sort-row select {
  min-height: 44px; width: 100%; padding: 8px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: var(--v7-radius); background: #fff;
}
.result-view-row, .result-action-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px;
}
.result-control-label { flex: none; font-size: var(--fs-xs); font-weight: 700; }
.result-view-buttons { display: grid; grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 4px; flex: 1; max-width: 360px; }
.result-view-buttons button, .result-action-row label, .result-bulk-bar button {
  min-height: 44px; border: 1px solid var(--line); border-radius: var(--v7-radius);
  background: #fff; color: var(--deep); font: inherit; font-size: var(--fs-xs);
}
.result-view-buttons button { padding: 6px 8px; font-weight: 700; }
.result-view-buttons button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.result-action-row { justify-content: flex-end; flex-wrap: wrap; }
.result-action-row label { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; cursor: pointer; }
.result-action-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--v7-lime, #b7ef24); }
.result-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.result-bulk-bar [data-result-selected-count] { margin-right: auto; font-size: var(--fs-xs); color: var(--muted); }
.result-bulk-bar button { padding: 5px 12px; }
.result-grid > .work-card { position: relative; }
.result-select {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
.is-result-read-hidden { display: none !important; }
.is-result-read-transitioning {
  opacity: 0 !important;
  transform: translateY(-4px) scale(.985) !important;
  pointer-events: none;
}
/* 列数（owner確定 2026-08-22）。list=1列 / 1=2列 / 2=2列 / 4=4列。
   **狭い幅でも4列は4列のまま。**「4列で表示」を押したのに2列になると、
   ボタンが効いていないように見える（実測で全粒度が2列になっていた） */
.result-grid[data-result-view="list"] { grid-template-columns: minmax(0, 1fr) !important; }
.result-grid[data-result-view="1"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.result-grid[data-result-view="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.result-grid[data-result-view="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 720px) {
  .result-toolbar { padding: 10px; }
  .result-view-row { align-items: flex-start; flex-direction: column; }
  .result-view-buttons { width: 100%; max-width: none; }
  .result-action-row { justify-content: stretch; }
  .result-action-row label { flex: 1 1 132px; justify-content: center; }
}

.works-grid {
  display: grid; gap: 22px 16px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

.work-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; box-shadow: var(--shadow);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.work-cover-button {
  display: block; border: 0; padding: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit; width: 100%;
  /* カード全体が1つの <a> で、表紙・作者名・タグにも既定の下線が付いていた。
     実際にリンクとして機能する語（=作品名）だけに下線を付ける */
  text-decoration: none;
}
.work-title { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.work-cover-button:hover .work-title { text-decoration-color: currentColor; }
.work-cover {
  aspect-ratio: 5 / 7; border-radius: var(--v7-radius); overflow: hidden;
  background: var(--blue-mist); display: grid; place-items: center;
  margin-bottom: 8px;
}
.work-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cover-fallback {
  padding: 12px; text-align: center; font-size: var(--fs-xs); color: var(--deep-soft);
}
.cover-fallback strong { display: block; font-family: var(--serif); font-size: var(--fs-sm); color: var(--deep); margin-bottom: 6px; }

.work-title {
  font-size: var(--fs-base); font-weight: 700; margin: 0; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.work-authors { font-size: var(--fs-xs); color: var(--deep-soft); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.work-tags span {
  font-size: var(--fs-2xs); background: var(--blue-pale); color: var(--deep);
  border-radius: var(--radius-pill); padding: 2px 9px;
  white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}
/* 「＋4」は残りの数であってタグそのものではない。
   タグと同じ見た目にすると誤読されるので、地の色で控えめに出す。
   **文字もタグより一段小さくする。** 同じ大きさだと、
   一覧を眺めるときに数字がタグと同じ強さで目に入る（ノイズになる） */
.work-tags .work-tags-more {
  background: none; color: var(--deep-soft); padding: 2px 4px;
  font-size: var(--fs-3xs);      /* 10px。タグ(11px)より一段小さく */
  font-variant-numeric: tabular-nums;
  /* カード全体がリンクなので下線を継いでしまう。数字はリンクではない */
  text-decoration: none;
}
.work-card-foot { margin-top: auto; padding-top: 8px; }

.save-btn {
  /* 未選択の枠は薄い黄。濃い黄だと押していないのに選ばれて見えるので、
     --line（薄い青）と同じくらいの明るさに落とす。
     文字と絵文字の濃さは「読んだ」と同じ --deep-soft にそろえる。
     色で「押された」を伝えるのは塗りの方（黄／青）に任せる */
  width: 100%; border: 1.5px solid #E9DFC3; background: #fff; color: var(--deep-soft);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  border-radius: var(--radius-pill); padding: 8px 10px; line-height: 1.3;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* 色は0.28sでゆっくり（owner指示 2026-08-22）。
     旧0.12sは一瞬で切り替わり、アニメーションに見えなかった */
  transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
.save-btn:hover { background: color-mix(in srgb, var(--v7-lime) 22%, #fff); border-color: var(--v7-lime-border); }
/* 押されたら黄の塗り。文字は濃く戻す（黄の上で --deep-soft だと読みにくい） */
.save-btn[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--deep); }
.save-btn svg { width: 14px; height: 14px; flex: none; }

.works-more { text-align: center; margin-top: 30px; }
/* 節の下の余白。**これが無いと「タグからさがす」のボタンと次の見出しが詰まり、
   ボタンが次の節のものに見える**（ピックアップ→アニメ化の境目で起きていた）。
   上の tag-section が 44px なので、ボタンの高さぶん広く取る */
.works-section { margin-bottom: 64px; }
.works-empty { text-align: center; padding: 48px 20px; color: var(--deep); }
.works-empty-title { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 700; margin-bottom: 6px; }
.empty-mark { width: 72px; height: 72px; margin-bottom: 8px; }

/* ---------- 詳細ダイアログ ---------- */
.work-dialog {
  border: 0; border-radius: var(--v7-radius); padding: 0;
  width: min(880px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  box-shadow: var(--shadow-lift); background: var(--paper); color: var(--deep);
}
.work-dialog::backdrop { background: rgba(36, 51, 64, 0.55); }
.dialog-inner { padding: 26px; position: relative; }
.dialog-close {
  position: absolute; top: 14px; right: 14px;
  border: 0; background: var(--blue-mist); color: var(--deep);
  width: 38px; height: 38px; border-radius: var(--radius-pill); cursor: pointer;
  font-size: var(--fs-lg); line-height: 1; font-family: inherit;
}
.dialog-close:hover { background: var(--blue-pale); }

.dialog-grid { display: grid; grid-template-columns: 230px 1fr; gap: 26px; }
.dialog-cover { align-self: start; }
.dialog-cover .work-cover { aspect-ratio: 5 / 7; border-radius: var(--v7-radius); box-shadow: var(--shadow); }
.dialog-cover-note { font-size: var(--fs-2xs); color: var(--deep-soft); margin: 8px 0 0; text-align: center; }

.dialog-origin { font-size: var(--fs-xs); font-weight: 700; color: var(--blue-ink); letter-spacing: 0.08em; margin: 0 0 6px; }
.dialog-title { font-family: var(--serif); font-size: var(--fs-2xl); line-height: 1.4; margin: 0 0 8px; padding-right: 40px; font-weight: 700; }
.dialog-meta { font-size: var(--fs-sm); color: var(--deep-soft); margin: 0 0 14px; }
/* 作品紹介。商品説明の原文をそのまま入れている。
   ・white-space: pre-line … 原文の改行を残す。詰めると別の文章になる
   ・-webkit-line-clamp … 長いものを畳む。**原文はHTMLに全部ある**。
     見た目を畳んでいるだけで、末尾を切って「…」を足しているのではない
     （切ると第10条1項(7) の改変にあたる） */
.dialog-blurb { font-size: var(--fs-base); margin: 0 0 6px; white-space: pre-line; }
.dialog-blurb[data-clamp] {
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dialog-blurb[data-clamp].is-open { -webkit-line-clamp: none; overflow: visible; }
/* 畳んだときだけ出す。JSが動かない環境では畳まれたまま読める分が残る */
.blurb-more {
  font: inherit; font-size: var(--fs-xs); color: var(--blue-ink);
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  text-decoration: underline; margin: 0 0 6px;
}
.dialog-blurb-note { font-size: var(--fs-2xs); color: var(--deep-soft); margin: 0 0 14px; }
.role-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  margin: 18px 0 10px;
}
.role-label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--deep-soft);
  letter-spacing: 0.04em;
}
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.role-chips .chip { font-size: var(--fs-xs); padding: 4px 12px; }
/* **上の余白を入れる。** 下(20px)しか指定が無く、直前の「取り扱い書店」の枠に
   タグが貼りついていた（owner指摘 2026-08-17）。
   ヒロイン行があるときは role-row の下マージン(10px)と重なって潰れるので、
   隣接時はそちらに任せる */
.dialog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; }
.role-row + .dialog-tags { margin-top: 0; }
.dialog-tags .chip { font-size: var(--fs-xs); padding: 4px 12px; }

.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.action-box { border: 1.5px solid var(--line); border-radius: var(--v7-radius); padding: 16px; background: #fff; }
/* 枠が続けて並ぶと辺どうしが接して1本の線に見える。間隔を空ける */
.action-box + .action-box { margin-top: 14px; }
/* 1つの枠の中で節を分ける細い線。上の節の注記から近すぎたので広げる */
.action-sep { border: 0; border-top: 1px solid var(--line); margin: 22px 0 20px; }
/* マークアップは h2。h3 だけを指定していたためルールが当たらず、
   ブラウザ既定の24px太字がそのまま出て、リンクより見出しが目立っていた */
.action-box h2, .action-box h3 {
  font-size: var(--fs-sm); font-weight: 700; color: var(--deep-soft);
  letter-spacing: 0.04em; margin: 0 0 4px;
}
.action-box .action-note { font-size: var(--fs-xs); color: var(--deep-soft); margin: 0 0 12px; }
.action-box .save-btn { width: 100%; }
.official-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.official-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1.5px solid var(--line); border-radius: var(--v7-radius); padding: 9px 13px;
  text-decoration: none; color: var(--deep); font-size: var(--fs-sm); font-weight: 600;
}
.official-links a:hover { border-color: var(--blue); background: var(--blue-mist); }
/* 文言・補足・外部の印はすべて flex の子。**文言に幅を優先して割り当てる。**
   包まずに置くと、題名が「電子書籍・試し読み」と同じ重みで縮められ、
   狭い画面で1文字ずつ折り返して縦に伸びていた */
/* basis は 0。auto にすると文言そのものの幅が下限になり、
   題名が長い作品で「外部 ↗」が次の行へ押し出されて空きができる */
.official-links a .ln { flex: 1 1 0; min-width: 0; }
.official-links a { flex-wrap: wrap; }
.official-links a .link-note { flex: 0 0 auto; }
/* 狭い画面では補足（電子書籍・試し読み／まとめ買いはこちら）を必ず次の行へ。
   横に並べたままだと題名の取り分が無くなり、1〜2文字ずつ折り返して縦に伸びる */
@media (max-width: 560px) {
  .official-links a .link-note { flex-basis: 100%; order: 3; margin-top: 2px; }
}

.official-links a::after {
  content: "外部 ↗"; color: var(--blue-ink); font-size: var(--fs-xs); flex: none;
}
.official-links a { text-align: left; }

/* 巻を選ぶ。既定は畳んである。
   32巻ある作品もあるので、開いたときだけ縦に伸びる形にする */
.vol-pick > details > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
  color: var(--blue-ink); padding: 7px 2px; list-style: revert;
}
.vol-pick > details > summary::-webkit-details-marker { color: var(--blue-ink); }
.vol-pick .vol-list { margin-top: 8px; gap: 6px; }
/* 中身は上の2本より控えめにする。主たる導線は1巻と最新巻のまま */
.vol-pick .vol-list a { font-weight: 500; padding: 7px 12px; font-size: var(--fs-xs); }
/* 巻数を先頭に置き、同じ幅で揃える。行が縦に並んだとき数字の左端がそろう */
.vol-pick .vol-list b {
  font-weight: 700; display: inline-block; min-width: 3.4em; color: var(--blue-ink);
}
/* 開いたまま長くなりすぎないように。中でスクロールさせる */
.vol-pick .vol-list { max-height: 320px; overflow-y: auto; }

/* ---------- 本棚 ---------- */
.page-body { max-width: 1160px; margin: 0 auto; padding: 44px 20px 72px; }
.page-title { font-family: var(--serif); font-size: var(--fs-3xl); letter-spacing: 0.06em; margin: 0 0 16px; font-weight: 700; }

.shelf-note { font-size: var(--fs-base); color: var(--deep-soft); margin: 0 0 26px; }

/* ---------- footer ---------- */
.site-footer { background: var(--deep); color: var(--v7-line); margin-top: 40px; }
.footer-inner { max-width: 1160px; margin: 0 auto; padding: 44px 20px 30px; }
.footer-name { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 700; margin: 0; letter-spacing: 0.08em; }
.footer-tag { font-size: var(--fs-sm); color: var(--v7-dim); margin: 4px 0 28px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 28px; }
.footer-col h2 { font-size: var(--fs-sm); color: var(--v7-dim); margin: 0 0 10px; font-weight: 700; }
.footer-col ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); display: flex; flex-direction: column; gap: 6px; }
.footer-col a { color: var(--v7-line); }
.footer-note { font-size: var(--fs-2xs); color: var(--v7-dim); border-top: 1px solid #3D4A6B; padding-top: 18px; margin: 0; }

/* ---------- サブページ ---------- */
.doc-body { max-width: 720px; margin: 0 auto; padding: 44px 20px 80px; }
.doc-body h1 { font-family: var(--serif); font-size: var(--fs-3xl); letter-spacing: 0.05em; }
.doc-body h2 { font-size: var(--fs-lg); margin-top: 32px; }
.doc-body p, .doc-body li { font-size: var(--fs-md); line-height: 1.85; }
.doc-note {
  border: 1.5px solid var(--blue-pale); background: var(--blue-mist);
  border-radius: var(--v7-radius); padding: 12px 16px; font-size: var(--fs-sm);
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  /* 縦積みにするとヘッダーが2段になり、スマホで画面の上を大きく占めていた。
     サイト名を左、さがす・本棚を右に置いて1段に収める */
  /* 背景を下の規則で不透明な青にしているので、ぼかしは効果が無い。
     それでいて sticky と重なると iOS Safari で合成層がずれ、
     スクロール中にヘッダーが半端に隠れることがある。狭い画面では切る */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header-inner { flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; }
  .brand { gap: 7px; flex: 0 1 auto; min-width: 0; }
  .brand-mark { width: 26px; height: 26px; }
  /* 名前が長いので、幅が足りなければ縮める。ロゴだけは必ず残す */
  .brand-name { font-size: var(--fs-lg); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; }
  .site-nav { justify-content: flex-end; flex: none; gap: 0; }
  .site-nav a { padding: 6px 9px; font-size: var(--fs-sm); gap: 5px; }
  .nav-icon { width: 15px; height: 15px; }
  .hero-inner { padding: 40px 16px 40px; }
  .hero-lead { font-size: var(--fs-base); }
  .hero-search { flex-wrap: nowrap; padding-left: 12px; }
  .home-search { padding: 12px 12px 8px; }
  .hero-search .btn { padding: 9px 16px; font-size: var(--fs-sm); }
  /* 14pxだと文字が画面のふちに近く、見出しが左に寄って見えていた */
  .discover-body, .page-body { padding-left: 18px; padding-right: 18px; }
  /* 見出しまでの余白が広く、開いたときに間延びしていた */
  .page-body { padding-top: 26px; }
  /* 30pxは375pxの画面では大きい。「本棚」のような短い題だと特に目立つ */
  .page-title { font-size: var(--fs-2xl); }
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; }
  .dialog-grid { grid-template-columns: 1fr; }
  .dialog-cover { max-width: 200px; margin: 0 auto; }
  .dialog-actions { grid-template-columns: 1fr; }
  .dialog-inner { padding: 20px 16px; }
  .dialog-title { font-size: var(--fs-xl); }
  .footer-cols { grid-template-columns: 1fr; }
}

/* ---------- B2: A v32から移植した要素 ---------- */
.shelf-buttons { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.read-btn {
  border: 1.5px solid var(--line); background: #fff; color: var(--deep-soft);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  border-radius: var(--radius-pill); padding: 8px 16px; line-height: 1.3; white-space: nowrap;
}
.read-btn:hover { border-color: var(--blue); color: var(--deep); background: var(--blue-mist); }
.read-btn[aria-pressed="true"] { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }

.related-count { background: var(--v7-chip) !important; color: var(--v7-dim) !important; font-weight: 700; }

.related-section { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.related-section h3 { font-family: var(--serif); font-size: var(--fs-lg); margin: 0 0 4px; font-weight: 700; }
.related-note { font-size: var(--fs-2xs); color: var(--deep-soft); margin: 0 0 12px; }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.related-list a, .related-list li > div {
  display: grid; gap: 2px; text-decoration: none; color: var(--deep);
  border: 1.5px solid var(--line); border-radius: var(--v7-radius); padding: 12px 14px; background: #fff;
}
.related-list a:hover { border-color: var(--blue); background: var(--blue-mist); }
/* リンクではなくなったので、押せそうな見た目にはしない */
.related-list li > div { cursor: default; }
.related-relation {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--blue-ink);
  letter-spacing: 0.06em;
}
.related-list b { font-size: var(--fs-base); line-height: 1.45; }
.related-meta { font-size: var(--fs-2xs); color: var(--deep-soft); }
.related-desc { font-size: var(--fs-xs); margin-top: 2px; }
.related-list .ext { font-size: var(--fs-2xs); color: var(--deep-soft); font-weight: 500; margin-top: 4px; }

.shelf-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.chip-tab { font-size: var(--fs-base); font-weight: 700; padding: 8px 20px; gap: 7px;
  white-space: nowrap; }
.chip-tab .tab-count { font-size: var(--fs-xs); opacity: 0.7; }
/* カードのボタンと同じピクトを添えて、どちらの棚か一目で分かるようにする */
.tab-icon { width: 13px; height: 13px; flex: none; display: block; }

/* ---------- B2: 仕上げ ---------- */
/* 数字・英字も本文と同じ書体に揃える（フォント揺れの解消） */
body, button, input, select, textarea, .chip, .btn { font-family: var(--sans); font-feature-settings: normal; }
.chip-count, .tab-count, .related-count, .works-status, .condition-count { font-variant-numeric: tabular-nums; }

/* 気分・タグ・カードの動きを一段そろえる */
.chip, .save-btn, .read-btn, .btn, .official-links a, .related-list a {
  /* 色は0.28sでゆっくり（owner指示 2026-08-22「ゆっくり着色される
     アニメーション」）。押し込みの動きだけ .14s のまま残す —— 動きまで
     遅くすると反応が鈍く感じる。 */
  transition: background-color .28s ease, border-color .28s ease, color .28s ease, transform .14s ease, box-shadow .14s ease;
}
.chip:active, .save-btn:active, .read-btn:active, .btn:active { transform: translateY(1px); }
.chip:hover { border-color: #AFBFE8; background: var(--blue-mist); }
/* 選択中のチップは下の方でグラデーションを当てている。
   ここで単色に戻すと、カーソルを乗せるたび グラデ⇔単色 が入れ替わって
   チカチカ見えていた。hoverでもグラデーションのまま、少しだけ濃くする */
.chip[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #38609F 0%, #2C4B87 100%);
  border-color: #2C4B87;
}
.work-card { animation: cardIn .28s ease both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .work-card { animation: none; } }

/* 人気のタグ／主人公の行を同じ形にそろえる */
.popular-tags, .lead-tags {
  display: grid; grid-template-columns: max-content 1fr; gap: 10px; align-items: start;
}
.popular-tags { margin-bottom: 6px; }
.lead-tags { margin-bottom: 14px; }
.lead-tags-label { font-size: var(--fs-sm); font-weight: 700; padding-top: 6px; white-space: nowrap; }

/* すべてのタグ：画面を占有しないよう高さを制限 */
.tag-chips-scroll {
  max-height: 268px; overflow-y: auto; padding: 4px 4px 8px;
  border: 1px solid var(--line); border-radius: var(--v7-radius); background: #fff;
}
.all-tags-note { font-size: var(--fs-xs); color: var(--deep-soft); margin: 10px 2px 0; }

/* カードの保存ボタン2つ */
.work-card-foot.shelf-buttons { grid-template-columns: 1fr auto; }
.work-card .read-btn { padding: 8px 12px; display: inline-flex; align-items: center; gap: 5px; }
.work-card .read-btn svg { width: 13px; height: 13px; }
.read-btn svg { width: 14px; height: 14px; flex: none; }
.action-box .read-btn { display: inline-flex; align-items: center; gap: 6px; }

@media (max-width: 720px) {
  .popular-tags, .lead-tags { grid-template-columns: 1fr; gap: 6px; }
  .lead-tags-label { padding-top: 0; }
  .tag-chips-scroll { max-height: 220px; }
  .work-card .read-btn { padding: 8px 10px; }
  .work-card .read-label { display: none; }
}
.doc-updated { font-size: var(--fs-xs); color: var(--deep-soft); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 28px; }
.doc-body ul { padding-left: 1.2em; }
.doc-body li { margin-bottom: 4px; }

/* ---------- B2: 気分チップとカード操作の整理 ---------- */
/* 気分は8つ。幅任せの折返しをやめ、4＋4（狭い画面では2列）で揃える */
.mood-chips {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 10px;
}
.mood-chips .chip { justify-content: center; text-align: center; }

/* カードの操作は「読みたい」「読んだ」の2つを同じ大きさで並べる */
.work-card-foot.shelf-buttons,
.action-box .shelf-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.save-btn, .read-btn {
  min-width: 0;
  white-space: nowrap;   /* 縦積みになるのを防ぐ */
  padding: 8px 6px;
  font-size: var(--fs-xs);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.work-card .read-btn, .action-box .read-btn { padding: 8px 6px; }
.save-btn svg, .read-btn svg { width: 13px; height: 13px; flex: none; }
/* 押されている状態を色で区別する：読みたい＝黄、読んだ＝青 */
.read-btn[aria-pressed="true"] { background: var(--blue-ink); border-color: var(--blue-ink); color: #fff; }
.save-btn[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--deep); }

@media (max-width: 720px) {
  .mood-chips { grid-template-columns: repeat(2, auto); gap: 8px; }
  .save-btn, .read-btn { font-size: var(--fs-xs); padding: 8px 4px; }
  .work-card .read-label { display: inline; }
}
.hero-lead { max-width: 660px; text-wrap: pretty; }

/* 気分のピクト：線画・単色。文字色に追従させ、装飾が主張しないようにする */
.chip-mood { justify-content: flex-start; gap: 7px; }
.mood-icon { width: 15px; height: 15px; flex: none; color: var(--blue-ink); }
.chip-mood[aria-pressed="true"] .mood-icon { color: #fff; }

/* 「読みたい」が詰まって見えるため、アイコンと文字の間隔・左右の余白を確保 */
.save-btn, .read-btn { padding: 9px 12px; gap: 7px; letter-spacing: 0.02em; }
.work-card .save-btn, .work-card .read-btn { padding: 9px 10px; }
.save-btn svg { width: 12px; height: 12px; }
.read-btn svg { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .save-btn, .read-btn { padding: 9px 8px; gap: 5px; }
}

/* 気分のピクト：線幅・大きさ・位置を8つで完全に統一する */
.mood-icon { width: 16px; height: 16px; flex: none; overflow: visible; }
.mood-icon path { stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.chip-mood { gap: 8px; padding-left: 14px; }

/* ナビにもピクトを添える（気分チップと同じ線幅・単色） */
.site-nav a { display: inline-flex; align-items: center; gap: 6px; }
.nav-icon { width: 15px; height: 15px; flex: none; }
.nav-icon [stroke] { vector-effect: non-scaling-stroke; }

/* ---------- 面積比の是正（実測 青11.5% → 目安30〜35%、濃紺14.4% → 5〜8%） ---------- */
/* ヒーロー：白のベールを弱め、空の青を残す */
.hero-veil {
  background: linear-gradient(180deg,
    rgba(226, 232, 250, 0.04) 0%,
    rgba(250, 250, 247, 0.18) 55%,
    rgba(250, 250, 247, 0.72) 88%,
    #FAFAF7 100%);
}

/* ヘッダー：ブランドの青を常時見せる面にする */
.site-header { background: var(--blue); border-bottom: 0; }
.brand-name, .brand-note { color: #fff; }
.brand-note { border-color: rgba(255,255,255,0.45); }
.site-nav a { color: #fff; }
.site-nav a[aria-current="page"] { background: #fff; color: var(--blue-ink); }
.site-nav a:not([aria-current="page"]):hover { background: rgba(255,255,255,0.16); }
.site-nav a[aria-current="page"] .shelf-count { background: var(--yellow); color: var(--deep); }

/* 探すブロック：淡い青紫の面に乗せて、白一色の広がりを締める */
.tag-section {
  background: var(--blue-pale);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
}
.tag-section .tag-chips-scroll { background: rgba(255,255,255,0.72); border-color: #CBD6F2; }
.tag-section .all-tags-body input { border-color: #CBD6F2; }

/* フッター：高さを詰めて濃色の面積を落とす */
.footer-inner { padding: 30px 20px 22px; }
.footer-tag { margin-bottom: 20px; }
.footer-cols { gap: 18px; margin-bottom: 18px; }
.footer-col ul { gap: 4px; }
.footer-note { padding-top: 14px; }

/* 前進CTAは黄。発見・保存と同じ色でそろえる */
.hero-search .btn-blue { background: var(--yellow); color: var(--deep); }

/* 検索：ボタンを外し、虫眼鏡自体を送信にして入力幅を確保 */
.hero-search { padding: 4px 20px 4px 6px; }
/* 検索ボタン。**面を付ける。**
   虫眼鏡だけ・背景透明だと「入力欄の飾り」に見え、押せると分からない
   （初見の人が Enter を知らないと詰まる）。
   文字は入れない。入れると入力欄の幅を食う */
.search-submit {
  border: 0; cursor: pointer; padding: 8px 12px;
  background: var(--blue-ink); color: #fff;
  display: inline-flex; align-items: center; flex: none;
  border-radius: var(--radius-pill); min-height: 40px; min-width: 44px;
  justify-content: center;
}
.search-submit:hover { background: var(--blue); }
.search-submit:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
/* **アイコンの色をここで上書きする。**
   .search-icon は上のほうで color: var(--blue-ink) を持っていて、
   ボタンを青地にすると青の上に青が乗って**虫眼鏡が消える**（実際に消えた） */
.search-submit .search-icon { color: #fff; }
.search-icon { width: 20px; height: 20px; }
.hero-search input { padding: 10px 0; }

/* チェックをつけた側の詰まりを解消 */
.save-btn, .read-btn { padding: 10px 14px; gap: 8px; }
.work-card .save-btn, .work-card .read-btn { padding: 10px 8px; gap: 6px; }

/* ピクトの位置揺れをなくす（同じ枠・同じ光学サイズ） */
.mood-icon, .nav-icon { width: 16px; height: 16px; flex: none; display: block; }
.chip-mood { align-items: center; }

/* ---------- 書体の質を上げる（外部フォントは読み込まない方針は維持） ----------
   書体の指定は先頭の :root に一本化した。ここに二組目を置かないこと */
body { font-weight: 400; letter-spacing: 0.015em; }
/* 和文は単語の切れ目が無いため、行末に1文字だけ残る折り返しが起きやすい。
   balance: Chrome 114 / Firefox 121 / Safari 17.5 で使える（Chromium系は6行以下だけ）。
   pretty : Firefoxは未対応、Safariも26以降の見込み。**Chromeでしか効かない前提**の
            進歩的強化として置く。未対応環境は無視するだけなので害はない（DESIGN.md §5） */
.hero-title, .page-title, .section-title, .dialog-title,
.work-title, .search-title, .doc-body h1, .doc-body h2 { text-wrap: balance; }
.hero-lead, .doc-body p, .doc-body li, .dialog-blurb, .section-note { text-wrap: pretty; }
/* UIの文字は一段太い字面にして、細さから来る安っぽさを消す */
.chip, .btn, .save-btn, .read-btn, .site-nav a, .works-tools select,
.condition-title, .lead-tags-label, .section-note, .works-status {
  font-weight: 500;
}
.chip { letter-spacing: 0.02em; }
/* 見出しは明朝の字面を活かすため、詰めと行間を個別に整える */
.hero-title { letter-spacing: 0.1em; line-height: 1.5; font-feature-settings: normal; }
/* 和文は文字単位で折り返すので「続きは、異／世界で。」と割れていた。
   意味の切れ目でだけ折り返すよう、2つの塊に分けて中では折り返さない。
   導入文も同じ理由で「ます。」だけが次の行に落ちていた */
.hero-title span, .hero-lead span { display: inline-block; white-space: nowrap; }
.section-title, .page-title, .brand-name, .footer-name {
  letter-spacing: 0.07em; font-feature-settings: normal;
}
/* ヒロイン一覧と気分ページは、意味の途中で折り返さない。
   （「ヒロイ／ン」「スカッと無双した／い」など。2026-08-19 に気分を追加） */
.heroine-page-title span { display: inline-block; white-space: nowrap; }
/* 本文は詰めすぎない（paltは見出し限定にする） */
body, .hero-lead, .work-title, .dialog-blurb, .doc-body p, .doc-body li {
  font-feature-settings: normal;
}
.hero-lead { line-height: 1.85; }
.work-title { letter-spacing: 0.01em; line-height: 1.5; font-weight: 700; }

/* 気分チップ：文字を折り返さず、高さを揃える */
.chip-mood { white-space: nowrap; }

/* 気分チップ：幅を揃えたうえで、ピクトと文字の頭を左で揃える */
.mood-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
/* 最長ラベル「おいしいものが食べたい」が必要とする幅を実測して宣言し、
   足りなければ自動で列を減らす。固定列数だと中間幅で溢れる。
   必要幅はフォントサイズで変わるため、下の430px境界で最小幅も切り替える。
   実測: font 12.5px→167px / font 12px→165px */
@media (max-width: 900px) {
  .mood-chips { grid-template-columns: repeat(auto-fit, minmax(169px, 1fr)); }
}
@media (max-width: 430px) {
  .mood-chips { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
}

/* ---------- 修正：気分チップの頭が8つで揃っていなかった ----------
   `.mood-chips .chip { justify-content: center }`（詳細度0,2,0）が
   `.chip-mood`（0,1,0）に勝っていたため、左揃えの指定が効いていなかった。
   同じ詳細度で上書きし、ピクトと文字の開始位置を8つとも揃える。 */
.mood-chips .chip-mood {
  justify-content: flex-start;
  text-align: left;
  padding-left: 12px;
  padding-right: 12px;
}
/* 8つのうち「おいしいものが食べたい」だけが最長で、4列が詰まる幅で枠からはみ出す。
   余白を詰めたうえ、4列が苦しくなる900px以下では文字を一段落として収める */
@media (max-width: 900px) {
  .mood-chips .chip-mood { font-size: var(--fs-xs); padding-left: 10px; padding-right: 10px; }
}
/* 2列になる幅では最長ラベルがまだ2px超えるため、もう一段だけ文字を落とす */
@media (max-width: 430px) {
  .mood-chips .chip-mood { font-size: var(--fs-xs); }
}
/* 「おいしいものが食べたい」だけ右の余りが4.7pxしかなく、左の11.5pxと
   釣り合っていなかった。字送りとピクトまわりを詰めて幅を稼ぐ */
@media (max-width: 480px) {
  .chip-mood { letter-spacing: 0; gap: 6px; padding-left: 9px; padding-right: 9px; }
  .chip-mood .mood-icon { width: 15px; height: 15px; }
}

/* ---------- 修正：検索欄の中黒が半角に見えていた ----------
   input に palt（プロポーショナル字形）が効いていて「・」が詰められていた。
   入力欄は本文と同じ扱いにして、中黒を全角のまま出す。 */
.hero-search input,
.hero-search input::placeholder,
.all-tags-body input {
  font-feature-settings: normal;
  font-kerning: none;
}

/* ---------- 修正：カードの「読みたい」が枠からはみ出して詰まっていた ----------
   原因は幅不足。6列のときカード内ボタンは実寸72pxしかないのに、
   しおりのピクト＋「読みたい」＋余白では86px必要で、中身が枠に食い込んでいた
   （前回のように左右パディングを足すほど悪化する）。
   ピクトは残したいので、カード自体を広げて必要な幅を確保する。
   1,120pxの本文幅では 5列（カード211px／ボタン90px）で収まる。 */
.works-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.work-card .save-btn,
.work-card .read-btn {
  padding: 10px 7px;
  gap: 5px;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
}
.work-card .save-btn svg { width: 12px; height: 12px; }
.work-card .read-btn svg { width: 13px; height: 13px; }

/* 狭い画面では横に2つ並べる幅が取れないため、上下に積んで
   ピクトと文字の両方を潰さずに出す（縦の余白のほうが安い）。
   カード自体は2列を維持する（minmax(200px)のままだと375px幅で1列に落ちるため上書き） */
@media (max-width: 720px) {
  /* 375px幅で3列＝カード110px・表紙96px。表紙が潰れない下限としてここを採る。
     minmax(0,1fr) にしないと、作者名の white-space:nowrap が最小幅になって
     列幅が揃わない（長い作者名の列だけ広がる） */
  .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
  .work-card { padding: 6px; gap: 6px; }
  .work-card .work-cover { margin-bottom: 6px; }
  .work-card .work-title { font-size: var(--fs-xs); }
  .work-card .work-authors { font-size: var(--fs-2xs); }
  /* :not(.work-tags-more) にしないと、後発のこのルールが「＋N」の
     縮小指定（10px）を11pxへ引き戻してしまう（詳細度は同じで、
     読み込み順で勝つ）。実際にここで戻っていた */
  .work-card .work-tags span:not(.work-tags-more) { font-size: var(--fs-2xs); padding: 2px 7px; }
  /* 3列カードではラベルを縮小・切断せず、残数がある場合だけ表示枚数を減らす。 */
  .work-card > .work-tags:not(.work-tags-extra):has(.work-tags-toggle[aria-expanded="false"])
    > span:nth-of-type(n + 2) { display: none; }
  /* 縦長の画面ではカードが108pxしかなく、札は1つで1行を使う。
     そのまま「転生／男性主人公／＋11」と並べると3行になる。
     残数を先頭の札の隣に回して2行に収める:
         転生 ＋11
         男性主人公
     並べ替えは flex の order で行い、HTMLの順（札・札・残数）は変えない。
     読み上げの順序と、横長のときの並びをそのまま残すため。
     :has() で限定しないと、残数が無いカードの札まで入れ替わる */
  .work-tags:has(.work-tags-more) span:nth-child(2) { order: 1; }
  /* 縦長でも幅によっては1行に収まるカードが出て、丈が揃わなくなる
     （340px幅・カード148pxで実際に起きる）。常に2行分を確保する。
     実測: 札の高さ22.7px＋段の間隔4px → 2行で49px */
  .work-card .work-tags { min-height: 49px; align-content: flex-start; }
  .work-card .work-card-foot.shelf-buttons { grid-template-columns: 1fr; gap: 5px; }
  .work-card .save-btn,
  .work-card .read-btn { padding: 8px 6px; font-size: var(--fs-xs); gap: 5px; }
  .work-card .read-label { display: inline; }
}
/* 極端に狭い端末では3列だと表紙が読めなくなるため2列へ戻す */
@media (max-width: 359px) {
  .works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 本棚：「読みたい」の中に優先度をつけるお気に入り ---------- */
.work-card { position: relative; }

/* ---------- 3つの行のチップを同じ寸法に揃える ----------
   「異世界へ」「主人公」は 13.5px / 余白18px、「人気のタグ」は 13px / 余白14px と
   微妙に違っていた。入口としての格の差は位置と見出しで示し、寸法は揃える。 */
.chip-lead {
  font-size: var(--fs-sm);
  padding: 6px 14px;
  font-weight: 500;
}

/* ---------- ベタ塗りに薄い階調を入れて奥行きを出す ----------
   ポップさを保つため、明度差は上下で4〜6%まで。
   ヘッダー・押した状態のボタンは「下へ向かって少し暗く」する。
   こうすると白文字のコントラストは上がりこそすれ下がらない。 */
/* ヘッダーの階調。**上端は theme-color と同じ #3763BF から始める**ので、
   ステータスバーとの境目にはならない。そこから下へ向かって暗くする。
   （実機で見えていた境目の正体は階調ではなく、隙間に出ていた白だった。
     html の背景色を同じ青にして塞いである） */
.site-header {
  background: linear-gradient(180deg, var(--blue) 0%, #33589E 100%);
}
.site-footer {
  background: linear-gradient(180deg, #2C3850 0%, var(--deep) 100%);
}
.tag-section {
  background: linear-gradient(180deg, #E7ECFB 0%, var(--blue-pale) 100%);
}
.btn-blue,
.chip[aria-pressed="true"],
.read-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #3F6BC6 0%, #33589E 100%);
}
.btn-yellow,
.save-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #F6C254 0%, #EFAE28 100%);
}
/* 白い面（カード・チップ）はごくわずかに。付けすぎると濁る */
.work-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);
}

/* ---------- モバイルのタップ領域 ----------
   通し点検（375px）で、押せる要素の高さが 13〜36px しかなかった。
   iOSの指針は44px、WCAGの最低でも24px。フッターリンクの13pxは両方下回っていた。
   見た目を大きく変えずに、押せる範囲だけを確保する。 */

/* 画面が狭いとサイト名とナビが競合する。ここまで来たらロゴだけ残す
   （ロゴはトップへのリンクなので、名前が消えても導線は死なない） */
@media (max-width: 340px) {
  .site-nav a { padding: 6px 8px; }
}
@media (max-width: 720px) {
  /* 主要な操作は44px */
  .site-nav a,
  .works-tools select,
  .all-tags summary,
  .hero-search input { min-height: 44px; }
  .search-submit { width: 44px; height: 44px; justify-content: center; }
  .work-card .save-btn,
  .work-card .read-btn { min-height: 44px; }

  /* 密度が要るタグ・気分チップは40px。行間8pxと合わせて隣と干渉しない */
  .chip { min-height: 40px; }
  .dialog-tags .chip, .role-chips .chip { min-height: 40px; padding: 4px 14px; }
  .tag-chips-scroll { max-height: 260px; }

  /* フッターのリンクは行の高さしか無く、実質押せなかった */
  .footer-col ul { gap: 0; }
  .footer-col a {
    display: inline-block;
    padding: 10px 0;
    min-height: 40px;
    line-height: 1.5;
  }
  /* リンク列は a の padding-top(10px) が効くので、h2 の余白を消して揃える。
     リンクの無い列（データについて）は padding が無いぶん、
     h2 の余白で同じ見た目にする。
     実測：文字の下端から次の文字の上端まで、両方とも18px */
  .footer-col h2 { margin-bottom: 0; }
  /* 「データについて」の列には <a> を持つクレジット文が別にあるため、
     列に :has(a) を当てると両方が一致してしまい効かなかった。
     リンクを持たない ul（＝データについて）だけを対象にする */
  .footer-col ul:not(:has(a)) { padding-top: 9px; }

  /* カードのタグが10pxで読みにくい。「＋N」だけは対象から外す（上と同じ理由） */
.work-card .work-tags span:not(.work-tags-more) { font-size: var(--fs-2xs); }
}

/* 「＋N」はタグではなく展開操作。タグflow内で、枠・背景・選択色を持たない。 */
.work-tags-toggle {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: 3px; min-width: 44px; min-height: 44px; margin: -8px 0; padding: 8px 4px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--muted); font: inherit; font-size: var(--fs-xs); font-weight: 500;
  line-height: 1.35; cursor: pointer; text-align: left; text-decoration: none;
}
.work-tags-toggle:hover, .work-tags-toggle:focus-visible {
  background: transparent; color: var(--deep); text-decoration: none;
}
.work-tags-chevron { width: 12px; height: 12px; flex: none; transition: transform .16s ease; }
.work-tags-toggle.is-open .work-tags-chevron { transform: rotate(180deg); }
.work-tags-extra { margin-top: 0; padding-bottom: 8px; }

/* ---------- 修正：「主人公：」と「人気のタグ：」でチップの開始位置がずれていた ----------
   それぞれ別のグリッドなので max-content が別々に計算され、
   ラベルの字数差（53px と 79px）がそのまま左列のズレになっていた。
   長いほうに合わせて左列の幅を固定し、2行のチップの頭を揃える。 */
.lead-tags-label { min-width: 84px; }

/* ---------- 押した手応え ---------- */
.chip:active, .save-btn:active, .read-btn:active, .fav-btn:active, .btn:active, .search-submit:active {
  transform: scale(0.96);
}
@keyframes pressPop {
  0%   { transform: scale(1); }
  38%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.press-pop { animation: pressPop 0.24s cubic-bezier(0.34, 1.4, 0.64, 1); }

/* 本棚のバッジ。数字が差し替わるだけでは「入った」ことが伝わらないので、
   増えたときだけ弾ませる。減ったときは静かに変える */
@keyframes badgePop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.45); }
  60%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.badge-pop { animation: badgePop 0.42s cubic-bezier(0.34, 1.5, 0.64, 1); }

/* 本棚状態の各ボタンは、押した瞬間に同じ控えめな動きで色を入れる。 */
.save-btn[aria-pressed="true"],
.read-btn[aria-pressed="true"],
.fav-btn[aria-pressed="true"] { animation: markOn 0.3s ease; }
@keyframes markOn {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .press-pop, .badge-pop { animation: none; }
  .save-btn[aria-pressed="true"], .read-btn[aria-pressed="true"],
  .fav-btn[aria-pressed="true"] { animation: none; }
  .chip:active, .save-btn:active, .read-btn:active, .fav-btn:active, .btn:active { transform: none; }
}

/* ---------- ヘッダー：確認版バッジをフッターへ移したぶん、ブランドを整理 ---------- */
.site-header-inner { padding: 12px 20px; }

/* ---------- フッター：ロゴとサイト名を中央に置く ---------- */
.footer-brand { text-align: center; margin-bottom: 26px; }
.footer-mark { width: 34px; height: 34px; display: block; margin: 0 auto 8px; color: var(--v7-line); }
/* ロゴはインラインSVG。currentColorで描くので、ヘッダーでもフッターでも背景に馴染む
   （PNGだと自前の青い角丸が背景の上に浮いてしまう） */
.brand-mark { color: #fff; }
.footer-brand .footer-name { margin: 0; }
.footer-brand .footer-tag { margin: 6px 0 0; }
/* ---------- 新巻の印。通知はせず、本棚を見たときに気づくだけの控えめな印 ---------- */
/* 新巻の印は「押せるもの」ではないので、ボタンの丸pillにしない。
   カード内のタグと同じ見え方にして、左寄せで置く */
.new-volume-badge {
  display: inline-flex;
  background: var(--v7-lime); color: var(--v7-ink);
  border: 1px solid var(--v7-lime-border);
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.02em;
  line-height: 1.3; border-radius: var(--v7-radius); padding: 2px 8px;
  margin-top: 4px;
  justify-self: start; align-self: flex-start; pointer-events: none;
}
@media (max-width: 720px) {
  .new-volume-badge { font-size: var(--fs-2xs); padding: 2px 8px; }
}


.rws-credit { margin: 12px 0 0; font-size: var(--fs-xs); }



/* 書店リンクの直下に貼りつくと読みにくいので、少し下げる。
   あわせてブロック下の余白を詰め、空白が間延びしないようにする */
/* .action-box .action-note が margin:0 0 12px を当てているので、
   同じ強さで書かないと効かない（実測で 0px のままだった） */
.action-box .dialog-cite { margin: 14px 0 0; }
.action-box { padding-bottom: 14px; }

/* 書誌情報へのリンク。出典の文字に続けて出るので、行内で少し離す。
   **目立たせない。** 購入導線と競合させたくない */
.action-box .dialog-cite .cite-link {
  margin-left: .5em;
  white-space: nowrap;
}

/* 「さがす」を足して3列に戻した（2026-08-11）。
   以前は「まだ提供していないもの」を外して2列にしていたが、そのままだと
   3つ目の「データについて」が2行目へ落ちて、左に寄った歪な形になっていた。
   **中身の幅で3列を組み、まとまりを中央に置く。** 1fr の等分割だと
   「データについて」の1行が長いぶん、左2列がすかすかに空く */
.footer-cols {
  grid-template-columns: repeat(3, auto);
  justify-content: center; justify-items: start;
  gap: 24px 56px;
}
@media (max-width: 860px) {
  .footer-cols { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: 1fr; justify-items: stretch; }
}

.footer-note-badge {
  display: inline-block; margin: 12px 0 0;
  font-size: var(--fs-2xs); color: var(--v7-dim);
  border: 1px solid #3D4A6B; border-radius: var(--radius-pill); padding: 2px 12px;
}

/* フッターは見出しから最初の項目だけ少し離し、同じ列の項目は詰める。
   後勝ちの規則として置き、旧mobile padding/gapに密度を戻されないようにする。 */
.footer-inner { padding-top: 28px; padding-bottom: 20px; }
.footer-brand { margin-bottom: 44px; }
.footer-brand .footer-tag { margin-top: 6px; margin-bottom: 0; }
.footer-cols { align-items: start; column-gap: 48px; row-gap: 22px; margin-bottom: 24px; }
.footer-col { align-self: start; }
.footer-col h2 { margin: 0 0 8px; }
.footer-col ul { gap: 5px; }
.footer-col li { margin: 0; line-height: 1.45; }
.footer-col a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 0; line-height: 1.45;
}
.footer-note { padding-top: 18px; }
@media (max-width: 860px) {
  .footer-cols { column-gap: 36px; row-gap: 22px; }
}
@media (max-width: 720px) {
  .footer-inner { padding-top: 24px; }
  .footer-cols { row-gap: 22px; }
  .footer-col h2 { margin-bottom: 8px; }
  .footer-col ul, .footer-col ul:not(:has(a)) { gap: 5px; padding-top: 0; }
  .footer-col a { padding: 8px 0; min-height: 44px; line-height: 1.45; }
}

/* 新刊・未読新巻を常設しても、狭い画面でページ全体を横へ押し出さない。 */
@media (max-width: 720px) {
  .site-header-inner { overflow: hidden; }
  .brand-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-nav {
    flex: 1 1 auto; min-width: 0; max-width: 100%; justify-content: flex-start;
    overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { flex: 0 0 auto; }
}

/* ---------- 行ラベルと見出しのピクト ---------- */
.row-icon {
  width: 19px; height: 19px; flex: none; display: block;
  color: var(--blue-ink); margin-right: 6px;
}
/* 気分のピクトと同じ実線幅にする。これが無いと24枠を16pxへ縮める分だけ
   線が細くなり（1.7→約1.1px）、行ラベルだけ薄く見える */
.row-icon [stroke] { vector-effect: non-scaling-stroke; }
.lead-tags-label { display: inline-flex; align-items: center; }
.section-icon {
  width: 18px; height: 18px; flex: none;
  color: var(--blue-ink); margin-right: 8px;
  vertical-align: -2px;
}
.section-title { display: flex; align-items: center; }
/* v7のセクション見出しは18pxピクト＋8px gap。marginを重ねない。 */
.section-title .row-icon { width: 18px; height: 18px; margin-right: 0; }
@media (max-width: 720px) {
  .row-icon { width: 18px; height: 18px; margin-right: 6px; }
  .section-icon { width: 16px; height: 16px; margin-right: 6px; }
}
/* ロゴは透過PNG。ヘッダーはグラデ、フッターは濃紺なので、
   単色の角丸背景つきPNGだとどちらでも浮く */
.brand-mark, .footer-mark { object-fit: contain; }

/* ---------- 商品説明（原文） ----------
   当サイトが書いた「あらすじ」とは別物として見せる。
   中央値251字と長いので折りたたみ、開いたときだけ全文を出す。 */
.description-box {
  border: 1.5px solid var(--line); border-radius: var(--v7-radius);
  background: #fff; padding: 10px 14px; margin: 0 0 16px;
}
.description-box summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 700;
  color: var(--blue-ink); padding: 4px 2px; width: fit-content;
  min-height: 32px; display: flex; align-items: center;
}
.description-body {
  font-size: var(--fs-sm); margin: 6px 0 0; white-space: pre-wrap;
  color: var(--deep); line-height: 1.8;
}
.description-note {
  font-size: var(--fs-2xs); color: var(--deep-soft); margin: 10px 0 0;
  border-top: 1px solid var(--line); padding-top: 8px;
}
@media (max-width: 720px) {
  .description-box summary { min-height: 40px; }
}

/* 本棚のタブの色は、一覧のボタンと同じ対応にそろえる。
   読みたい＝黄（.save-btn[aria-pressed]）／読んだ＝青（.read-btn[aria-pressed]）。
   .chip[aria-pressed="true"] が 0,2,0 で青を当てているので、
   属性を1つ足して 0,3,0 で上書きする（順序に依存させない） */
.chip-tab[data-shelf-tab="want"][aria-pressed="true"] {
  background: linear-gradient(180deg, #F6C254 0%, #EFAE28 100%);
  border-color: var(--yellow);
  color: var(--deep);
}
.chip-tab[data-shelf-tab="want"][aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #F6C254 0%, #EFAE28 100%);
  border-color: var(--yellow);
}

/* タップしたときにブラウザが敷く青い膜を消す。
   押した手応えは :active の沈み込みと .press-pop で出しているので、
   膜が重なると「選択された」ように見えてしまう。
   キーボード操作の輪郭は :focus-visible が別に描くので影響しない */
button, a, select, summary, input, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 検索ページ ---------- */
.search-page-form { max-width: 100%; margin: 0 0 18px; }
.search-results { list-style: none; margin: 16px 0 26px; padding: 0; display: grid; gap: 8px; }
.search-results a {
  display: flex; flex-direction: column; gap: 2px;
  border: 1.5px solid var(--line); border-radius: var(--v7-radius); padding: 11px 14px;
  text-decoration: none; color: var(--deep);
}
.search-results a:hover { border-color: var(--blue); background: var(--blue-mist); }
.search-title { font-size: var(--fs-base); font-weight: 700; line-height: 1.5; }
.search-author { font-size: var(--fs-xs); color: var(--deep-soft); }
/* どんな設定の作品かが一目で分かるように、結果にタグを添える */
.search-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.search-tag {
  font-size: var(--fs-2xs); line-height: 1; color: var(--deep-soft);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 9px;
  background: #fff; white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}
@media (max-width: 720px) {
  .search-tags > .search-tag:nth-child(n + 3) { display: none; }
}

/* 打った言葉に当たったタグ。**題名に無い語で当たった作品の理由がこれ。**
   色だけに頼らず、太さでも差を付ける（色の見え方は人によって違う） */
.search-tag.is-hit {
  color: var(--deep); font-weight: 700;
  border-color: var(--deep-soft); background: var(--blue-mist);
}

/* ページを作っていないタグ（作品数が少ない）。押せないので枠だけ弱くする */
.chip-flat { cursor: default; color: var(--deep-soft); background: var(--blue-mist); border-style: dashed; }

.all-tags-link { margin: 14px 0 0; font-size: var(--fs-sm); font-weight: 700; }

/* 生成ページではチップがリンク（aタグ）になるので、下線を消してボタンと同じ見え方にする */
a.chip { text-decoration: none; }
a.chip:hover { text-decoration: none; }

/* トップの本棚の案内。フッターの手前に置く */
.shelf-intro { margin-top: 40px; padding: 22px 20px; background: var(--blue-mist);
  border: 1.5px solid var(--blue-pale); border-radius: var(--radius); }
.shelf-intro .section-title { margin-top: 0; }
/* 枠の中なので最後の段落は下を空けない。
   ただし段落が2つ以上あるときは、間だけ空ける
   （<br> をやめて <p> に分けたため。詰まっていると1文に見える） */
.shelf-intro .section-note { margin-bottom: 0; }
.shelf-intro .section-note + .section-note { margin-top: 10px; }

/* メールアドレスは途中で折り返さない（読み取れなくなるため） */
a.mail, .doc-body a[href^="mailto:"] { white-space: nowrap; }


.official-links .no-link {
  border: 1.5px dashed var(--line); border-radius: var(--v7-radius); padding: 11px 14px;
  color: var(--deep-soft); font-size: var(--fs-sm); line-height: 1.6;
}



.fav-btn {
  /* 配色は青・黄・白・灰に収める（コーラルは廃止）。
     読みたい＝黄、読んだ＝青 と分けるため、お気に入りは**同じ青系の濃い方**。
     未選択の枠は --line より一段濃い青にして、「読んだ」と見分けが付くようにする */
  border: 1.5px solid #B9C6E6; background: #fff; color: var(--deep-soft);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  border-radius: var(--radius-pill); padding: 8px 16px; line-height: 1.3; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.fav-btn svg { width: 14px; height: 14px; flex: none; }
/* 選択中の色。読みたい＝黄、読んだ＝青 と分けるため、
   パレットの3色目（注目の限定強調）を使う。
   --coral #E85A52 は白文字で3.49:1しかなく小さい文字に足りないので、
   文字用に用意されている --coral-ink #C4443C を面に使う（白文字で4.95:1） */
.fav-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #2A3F63 0%, #1B2B4D 100%);
  border-color: #1B2B4D; color: #fff;   /* 白文字で10.35:1 */
}
.fav-btn:hover { border-color: #8FA6DC; background: var(--blue-mist); }
.fav-btn[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #2A3F63 0%, #1B2B4D 100%); border-color: #1B2B4D;
}

.shelf-actions .shelf-buttons { grid-template-columns: 1fr 1fr; }
.shelf-actions .action-note { margin: 10px 0 0; }
.read-progress { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.read-progress-label { display: block; margin-bottom: 4px; font-weight: 700; }
.read-progress input[type="range"] {
  display: block; width: 100%; min-height: 44px; margin: 0; cursor: pointer;
  accent-color: var(--blue-ink); touch-action: pan-y;
}
.read-progress input[type="range"]::-webkit-slider-thumb { width: 44px; height: 44px; }
.read-progress input[type="range"]::-moz-range-thumb { width: 44px; height: 44px; }
.read-progress-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.read-progress-step { min-width: 44px; min-height: 44px; padding: 8px; font-size: var(--fs-lg); }
.read-progress-all { min-height: 44px; }
.work-progress { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.new-priority-unread { font-weight: 700; color: var(--blue-ink); }
.site-nav [data-unread-new-link], .footer-col [data-unread-new-link] {
  display: inline-flex; align-items: center; gap: 7px;
}
.unread-new-dot {
  width: 16px; height: 16px; min-width: 16px; border-radius: 50%;
  background: #B7E437; border: 2px solid #486312; box-shadow: 0 0 0 2px #fff;
}

/* 題名の横の星。題名は2行以上になることがあるので、上端で揃える。
   .dialog-title には元から padding-right: 40px があり、その分を星に使う */
.title-row { display: flex; align-items: flex-start; gap: 10px; }
.title-row .dialog-title { padding-right: 0; flex: 1 1 auto; min-width: 0; }
.fav-btn.fav-icon {
  flex: none; width: 44px; height: 44px; padding: 0; margin-top: 2px;
  border-radius: 50%;
}
.fav-btn.fav-icon svg { width: 20px; height: 20px; }


/* お気に入りタブを足して3つになり、375px幅で文字が折り返していた。
   実測: 必要幅357px＋間隔16px に対し、本文の幅は339px。
   詰めるのは余白と間隔だけにして、文字は縮めない（読めなくなる） */
@media (max-width: 480px) {
  .shelf-tabs { gap: 5px; }
  .chip-tab { padding: 8px 11px; gap: 5px; }
  .chip-tab .tab-count { opacity: 0.85; }
}

/* お気に入りタブ。選択中は「読んだ」と同じ青になっていて見分けが付かなかった */
/* 読みたい＝黄、読んだ＝青 と分ける3色目。--coral の系統だが、
   #E85A52 は文字色 --deep で3.85:1しか出ない。少し淡くして5.11:1にする。
   面の作りは「読みたい」と同じ縦のグラデーションに揃える */
/* お気に入りタブ。「読んだ」と同じ青だと見分けが付かないので、濃い方の青に */
.chip-tab[data-shelf-tab="fav"] { border-color: #B9C6E6; }
.chip-tab[data-shelf-tab="fav"][aria-pressed="true"] {
  background: linear-gradient(180deg, #2A3F63 0%, #1B2B4D 100%);
  border-color: #1B2B4D;
  color: #fff;
}
.chip-tab[data-shelf-tab="fav"][aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #2A3F63 0%, #1B2B4D 100%); border-color: #1B2B4D;
}
/* 「読みたい」タブの未選択枠は、カードのボタンと同じ薄い黄にそろえる */
.chip-tab[data-shelf-tab="want"] { border-color: #E9DFC3; }


/* ---------- 読みたい／読んだ／お気に入り のカーソル時の色をそろえる ----------

   3つの不具合が同じ原因から出ていた。
   ・タブは .chip の一般規則を継いでいて、「読みたい」でも水色になっていた
   ・.chip[aria-pressed="true"]:hover が濃紺(#2C4B87)へ寄せるため、
     選択中の「読んだ」にカーソルを乗せると「お気に入り」と見分けが付かなくなった
   ・「読んだ」と「お気に入り」の未選択hoverがどちらも --blue-mist で同じだった

   決め方:
   ・未選択は、その種類の色を淡くした面と、はっきりした枠
   ・選択中は**色を変えない**。押した状態を色で示しているのに、
     カーソルを乗せただけで変わると別の状態に見える
   ・タブとボタンで同じにする（形が違っても意味は同じ）              */

/* 読みたい＝黄 */
.chip-tab[data-shelf-tab="want"]:not([aria-pressed="true"]):hover,
.save-btn:not([aria-pressed="true"]):hover {
  background: color-mix(in srgb, var(--v7-lime) 22%, #fff); border-color: var(--v7-lime-border);
}
/* 読んだ＝青 */
.chip-tab[data-shelf-tab="read"]:not([aria-pressed="true"]):hover,
.read-btn:not([aria-pressed="true"]):hover {
  background: var(--blue-mist); border-color: var(--blue);
}
/* お気に入り＝濃い方の青。面も枠も一段濃くして「読んだ」と分ける */
.chip-tab[data-shelf-tab="fav"]:not([aria-pressed="true"]):hover,
.fav-btn:not([aria-pressed="true"]):hover {
  background: #DCE4F6; border-color: #1B2B4D;
}

/* 選択中はカーソルを乗せても変えない */
.chip-tab[data-shelf-tab="read"][aria-pressed="true"]:hover {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.chip-tab[data-shelf-tab="want"][aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #F6C254 0%, #EFAE28 100%);
  border-color: var(--yellow); color: var(--deep);
}
.chip-tab[data-shelf-tab="fav"][aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #2A3F63 0%, #1B2B4D 100%);
  border-color: #1B2B4D; color: #fff;
}
/* 選択中はグラデーションが当たっている（下の「面の作り」の節）。
   ここで単色に戻すと、乗せるたびに グラデ⇔単色 が入れ替わってチカチカする。
   同じグラデーションをそのまま書く */
.save-btn[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #F6C254 0%, #EFAE28 100%);
  border-color: var(--yellow); color: var(--deep);
}
.read-btn[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #3F6BC6 0%, #33589E 100%);
  border-color: var(--blue-ink); color: #fff;
}
.fav-btn[aria-pressed="true"]:hover {
  background: linear-gradient(180deg, #2A3F63 0%, #1B2B4D 100%);
  border-color: #1B2B4D; color: #fff;
}


/* ---------- 書店リンクを選びやすくする ----------
   ここが唯一の収益地点なのに、本棚のボタンより弱く見えていた。
   面は付けず、枠と余白と文字で強くする（黄＝読みたい、青＝読んだ と
   ぶつからないよう、リンクは青の実線で「進む先」を示す） */
.official-links a {
  border-width: 1.5px;
  border-color: var(--blue);
  padding: 14px 16px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--blue-ink);
  background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFE 100%);
}
.official-links a:hover {
  background: var(--blue-mist);
  border-color: var(--blue-ink);
  box-shadow: var(--shadow);
}
.official-links a .ext {
  color: var(--blue-ink); font-weight: 700;
}


/* 「本棚」の2文字の途中で改行されていた。和文はどこでも折れるので、
   リンクになっている語だけは割らない（スマホ幅で実際に起きていた） */
.section-note a, .shelf-intro a { white-space: nowrap; }


/* 電子書籍のリンクに付ける小さな印。紙と見分けが付くようにする */
.official-links .link-note {
  margin-left: 8px; font-size: var(--fs-2xs); font-weight: 700;
  color: var(--deep-soft); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 1px 8px; white-space: nowrap;
}

/* 掛け合わせページで、いま効いている条件を出す。
   押すとそのタグが外れて1つ少ない組へ飛ぶ。
   文字のリンクを並べると4つで4行になり、画面がうるさかった */
/* 下の「さらに絞り込む」と同じ下敷きを敷く。
   敷かないとチップが地の上に浮いて、すぐ下のパネルと詰まって見えた。
   ただし**同じ色にはしない**。2つの帯が続くと境目が消えて1つの塊に見える。
   こちらは白地＋枠にして、下のパネル（青地）と区別する */
.applied {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 16px; margin: 0 0 16px;
}
.applied-label { font-size: var(--fs-base); font-weight: 700; color: var(--deep); margin: 0; }
.applied-hint { font-weight: 400; opacity: 0.7; font-size: var(--fs-xs); }
.applied-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* 押した状態のチップと同じ見た目。ただし「外せる」ことが分かるよう × を付ける。
   hover を単色にするとグラデと入れ替わってチカチカするので、濃くするだけにする */
.chip-applied {
  background: var(--v7-dark);
  border-color: #2A4D8F; color: #fff; text-decoration: none;
}
.chip-applied:hover {
  background: linear-gradient(180deg, #38609F 0%, #2C4B87 100%);
  border-color: #2C4B87; color: #fff;
}
.chip-applied .chip-x { font-size: var(--fs-2xs); opacity: 0.8; margin-left: 2px; }

/* 設定の似た作品。**関連作品（出版社公式のスピンオフ）とは別の欄。**
   同じ見た目にすると、機械で選んだものを公式情報と誤解させる */
.similar-section { margin-top: 28px; }
.similar-section h2 { font-size: var(--fs-lg); margin: 0 0 4px; }
.similar-note { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 14px; }
.similar-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px;
}
.similar-list a { display: block; text-decoration: none; color: inherit; }
.similar-list img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: var(--v7-radius); }
.sim-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; font-size: var(--fs-xs); line-height: 1.45; margin-top: 6px;
}
.similar-list a:hover .sim-title { text-decoration: underline; }

/* どのタグが重なって選ばれたか。**題名だけだと「なぜこれ？」になる**。
   本文より一段落として、書影と題名の邪魔をしない */
.sim-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sim-tag {
  font-size: var(--fs-2xs); line-height: 1; color: var(--deep-soft);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px 6px;
  background: #fff; white-space: nowrap;
}

/* ホーム画面に追加の案内。**宣伝ではなくデータ保全の案内**。
   iOS は7日間訪問が無いと localStorage を消すので、本棚が飛ぶ。
   画面の下に控えめに出し、閉じられたら二度と出さない */
.home-hint {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  max-width: 460px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: 0 6px 24px rgba(20, 34, 66, 0.16);
  animation: hintIn .24s ease both;
}
@keyframes hintIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.home-hint-title { font-weight: 700; margin: 0 0 6px; font-size: var(--fs-base); }
/* 行間を広げ、字送りをわずかに詰める。
   日本語は禁則で行末が揃わないので、**単語の途中で折らない**設定も入れる */
.home-hint-body {
  margin: 0; font-size: var(--fs-sm); line-height: 1.75; color: var(--deep);
  letter-spacing: 0.01em; word-break: normal; overflow-wrap: anywhere;
  line-break: strict;
}
.home-hint-body b { font-weight: 700; }
.home-hint-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.home-hint-actions .btn-text { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .home-hint { animation: none; } }

/* 新刊ページ。月ごとに区切る */
.new-month {
  font-size: var(--fs-lg); font-weight: 700; margin: 26px 0 12px;
  padding-bottom: 6px; border-bottom: 2px solid var(--blue-mist);
}
.new-month:first-of-type { margin-top: 8px; }
.new-note { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 4px; }
.new-list-note {
  color: var(--deep-soft); font-size: var(--fs-base); line-height: 1.65; margin: 0 0 14px;
}
.new-list-count { font-size: var(--fs-lg); font-weight: 800; color: var(--deep); margin: 0 0 4px; }
.new-list-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; margin: 0 0 18px; }
.new-period-control { display: flex; gap: 6px; flex-wrap: wrap; }
.new-period-control button, .new-filter-dialog button { min-height: 44px; }
.new-period-control button {
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 14px;
  background: transparent; color: inherit; font: inherit; font-size: var(--fs-sm);
}
.new-period-control button[aria-pressed="true"] { background: var(--blue-ink); color: #fff; border-color: var(--blue-ink); }
.new-list-controls > [data-new-filter-open] { justify-self: start; }
.new-filter-count { align-self: center; color: var(--muted); font-size: var(--fs-xs); }
.new-list-controls .result-toolbar { grid-column: 1 / -1; margin: 0; }
.new-filter-dialog { width: min(620px, calc(100% - 24px)); max-height: min(720px, calc(100% - 24px)); border: 0; border-radius: var(--v7-radius); padding: 20px; }
.new-filter-dialog::backdrop { background: rgb(8 18 34 / .58); }
.new-filter-dialog h2 { margin: 0 0 14px; font-size: var(--fs-lg); }
.new-filter-tags { display: flex; flex-wrap: wrap; gap: 7px; max-height: 50vh; overflow: auto; }
.new-filter-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 560px) {
  .new-list-controls { grid-template-columns: 1fr; gap: 8px; }
  .new-list-controls .result-toolbar { grid-column: 1; }
  .new-filter-dialog { margin: auto 12px 12px; width: calc(100% - 24px); max-height: 82vh; }
}
/* カードの一言（発売日と巻数）。書影の権利者の求めにより、画像には重ねない */
.work-note {
  font-size: var(--fs-xs); font-weight: 700; color: var(--blue-ink);
  margin: 6px 0 0;
}
.home-hint-steps {
  margin: 12px 0 0; padding-left: 1.4em; font-size: var(--fs-sm); line-height: 1.7;
  line-break: strict;
}
.home-hint-steps li { margin-bottom: 4px; }
.home-hint-sub { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }

/* 新巻ページ：端末内の本棚と照合した軽量な案内帯。
   hitの有無で下のlazy書影が動かないよう、常に同じ高さの横1列にする。 */
.new-mine { margin: 10px 0 6px; }
.new-mine-title { font-size: var(--fs-base); font-weight: 700; margin: 0 0 8px; }
.new-mine-title b { color: var(--blue-ink); }
.new-mine-none { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.new-priority {
  block-size: 224px; overflow: hidden; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-mist);
}
.new-priority-message {
  block-size: 3.4em; overflow: auto; font-size: var(--fs-sm); line-height: 1.6;
}
.new-priority-message p { margin: 0; }
.new-priority-grid {
  block-size: 108px; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  align-items: stretch; padding: 2px 0 8px; scrollbar-gutter: stable;
}
.new-priority-card {
  flex: 0 0 min(260px, 78vw); min-width: 0;
  border: 1px solid var(--line); border-radius: var(--v7-radius); background: #fff;
}
.new-priority-link {
  display: flex; flex-direction: column; block-size: 100%; min-width: 0;
  padding: 10px 12px; color: inherit; text-decoration: none;
}
.new-priority-link:hover { border-color: var(--blue-ink); }
.new-priority-card-title {
  margin: 0 0 3px; font-size: var(--fs-sm); line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.new-priority-card-authors {
  margin: 0; font-size: var(--fs-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.new-priority-card-release {
  margin: auto 0 0; font-size: var(--fs-xs); font-weight: 700; color: var(--blue-ink);
}
/* 新巻ページのカード。**本棚の印は付けない。**
   絞り込んだ後は出ているカードが全部が本棚の作品なので、
   一つひとつに印を付けても何も伝えていない
   （印が出るときは必ず全部に出ている）。
   上の「読んだ作品の続きが◯冊出ます。」で足りる */
.work-note { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; }
.shelf-to-new { margin: 18px 0 0; font-size: var(--fs-sm); }
/* 控えの案内と「閉じる」を同じ行に置く。
   **狭い画面では折り返す。** 1行に押し込むと、折り返した文が
   「閉じる」に重なって読めなくなった（375px幅で実際に起きた） */
/* 短くしたので1行に収まる。折り返しても重ならないよう余白は残す */
.home-hint-actions { align-items: baseline; flex-wrap: wrap; row-gap: 6px; margin-top: 14px; }
.home-hint-actions .home-hint-sub { margin: 0; flex: 1 1 auto; }
.home-hint-actions .btn-text { flex: none; margin-left: auto; }
.home-hint.is-going { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }

/* 本棚から新巻への導線。ピクトは文字の左に置く。
   **gap と margin-right を重ねない。** `.row-icon` は自前で
   margin-right:6px を持つので、gap:7px を足すと13px空き、
   ここだけ他の行ラベルより離れて見えていた */
.shelf-to-new a { display: inline-flex; align-items: center; }
.shelf-to-new .row-icon { width: 19px; height: 19px; flex: none; }
/* 誤りの報告。目立たせない。大きく出すと情報への不信を招く */
.report-line { margin-top: 4px; }
.report-line a { color: var(--muted); text-decoration: underline; }
.report-line a:hover { color: var(--blue-ink); }

/* ---------- お問い合わせフォーム ---------- */
/* 作品ページの mailto: をやめて、ここに集約した。
   メールソフトを設定していない人が、そこで止まってしまうため */
.contact-form { max-width: 60ch; margin: 26px 0 34px; }
.contact-form fieldset {
  border: 1.5px solid var(--line); border-radius: var(--v7-radius);
  padding: 14px 16px 12px; margin: 0 0 18px; background: #fff;
}
.contact-form legend {
  font-size: var(--fs-sm); font-weight: 700; padding: 0 6px; color: var(--deep);
}
.radio-row, .check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: var(--fs-sm); cursor: pointer;
}
/* 押せる幅を文字だけに絞らない。指で押す場所が小さいと外す */
.radio-row input, .check-row input { width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: 0 14px; }
.field { margin: 0 0 18px; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 5px; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm);
  border: 1.5px solid var(--line); border-radius: var(--v7-radius);
  padding: 9px 12px; background: #fff; color: var(--deep);
}
.field textarea { resize: vertical; line-height: 1.7; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.field input[readonly] { background: var(--blue-mist); }
.field-note { font-size: var(--fs-2xs); color: var(--deep-soft); margin: 5px 0 0; }
.req { font-size: var(--fs-2xs); color: var(--blue-ink); font-weight: 400; margin-left: 4px; }
/* 機械よけ。**display:none にしない。**
   隠し方が露骨だと避けられるので、画面の外へ出す */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-policy { font-size: var(--fs-2xs); color: var(--deep-soft); margin: 0 0 16px; }
.form-submit { padding: 10px 28px; font-size: var(--fs-sm); }
.form-submit[disabled] { opacity: .55; cursor: default; }
.form-status { font-size: var(--fs-sm); margin: 12px 0 0; min-height: 1.6em; }
.form-status.is-error { color: #b3261e; }
.form-status.is-done { color: var(--blue-ink); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .contact-form fieldset, .field input, .field textarea { background: transparent; }
  .form-status.is-error { color: #ff8a80; }
}
/* 内容欄の前に置く案内。ラベルの直後なので、下の注記より先に読ませる */
.field-note-lead { margin: 0 0 7px; }
/* 送信後の行き先。フォームが消えたあとに出る */
.form-done { margin: 18px 0 30px; }
.form-done .btn { margin-right: 10px; }
.form-status.is-done {
  background: var(--blue-mist); border-radius: var(--v7-radius); padding: 14px 16px;
  margin: 0 0 4px;
}

/* 本棚が空のとき。**行き止まりにしない。**
   初めて開いた人には、空の棚と書き出し／読み込みしか無かった */
.shelf-empty { text-align: center; padding: 26px 16px 8px; }
.shelf-empty p { margin: 0 0 14px; }
.shelf-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.shelf-empty-note { font-size: var(--fs-sm); color: var(--deep-soft); margin-top: 16px; }
/* 3つの札の違いの説明。札のすぐ下に置く */
.shelf-tabs-note { margin: 10px 0 18px; font-size: var(--fs-sm); color: var(--deep-soft); }

/* 電子と紙の巻一覧を見分ける。**同じ見た目で連続していると、
   どこまでが電子でどこからが紙か分からない**（実際に混ざって見えた）。
   色は変えすぎない。書店のブランド色を勝手に当てないため、
   同じ青の濃淡と、左の細い線で区別する */
/* **左の線だけ薄い色にしない。** 枠は1.5pxの青なのに、左だけ3pxの
   薄いグレーになっていて「枠の左が欠けている」ように見えていた
   （owner指摘 2026-08-18）。濃淡で分けるなら、どちらも枠より濃くする */
/* 書店ごとのまとまりの間を空ける。詰まっていると1つの並びに見える */
.official-links > .vol-pick { margin-bottom: 10px; }
/* もう片方の書店に新しい巻があるときの案内。**一覧の続きに見せない** */
.vol-newer { margin-top: 6px; }
.vol-newer a { background: var(--blue-mist); border-style: dashed; }

/* 並びの根拠。**本文より小さく、でも消さない。**
   何を根拠に並べたかを書かないと「サイトが人気を判定している」と読まれる */
.anime-source { font-size: var(--fs-xs); color: var(--deep-soft); margin-top: -10px; }

/* ── 気分別の書影入口（トップ、ヒーローのすぐ下） ─────────────────
   気分チップは文字だけで、どんな作品が出るのか押す前に分からなかった。
   表紙を1枚出すと「この手触りの棚か」が見える。
   **狭い画面では横スクロールにする。** 2列＋2列＋1列に折ると最後の1枚が余り、
   3枚に減らすと8つある気分のうち3つしか見えない（owner 2026-08-18）。
   載せる数は data/mood-featured.json 次第なので、枚数を決め打ちにしない */
.moodpick-section { margin: 0 0 34px; }
.moodpick-row {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 0 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* **幅は文字に合わせる。書影の幅に縛らない。**
   132pxに押し込めていたので「スカッと無双し／たい」と2行に折れていた
   （owner 2026-08-18）。横スクロールなので広がっても困らない */
.moodpick {
  flex: 0 0 auto; width: auto; min-width: 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 9px; align-items: center;
  text-decoration: none; color: inherit;
}
.moodpick-cover {
  width: 132px; height: 188px; object-fit: cover; border-radius: var(--v7-radius);
  background: var(--blue-mist);
  box-shadow: 0 2px 8px rgba(31, 47, 71, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.moodpick:hover .moodpick-cover, .moodpick:focus-visible .moodpick-cover {
  transform: translateY(-3px); box-shadow: 0 6px 16px rgba(31, 47, 71, .24);
}
/* **気分の名前はチップの形にする。**
   太字の見出しとして置き、その下に作品名を添えていたら、
   気分の名前のほうが作品の題名だと読まれた（owner 2026-08-18）。
   ヒーローに置いていた気分チップと同じ見た目にして、
   「これは押すと一覧に行くもの」だと形で分かるようにする */
.moodpick-label {
  display: inline-flex; align-items: center; gap: 6px;
  width: 100%; justify-content: center; text-align: center;
  padding: 7px 10px; border: 1px solid var(--line, #d8e0f0); border-radius: var(--radius-pill);
  background: #fff; color: var(--deep);
  /* **絵と文字の強さを揃える。** 文字だけ太字にすると絵が添え物に見える
     （owner指摘 2026-08-18）。文字を1段落とし、絵を大きく・太くする */
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
  /* **1行に収める。** 折り返すと下の作品名との間が詰まって読みにくい */
  white-space: nowrap;
  transition: background .28s ease, color .28s ease, border-color .28s ease;
}
.moodpick:hover .moodpick-label,
.moodpick:focus .moodpick-label,
.moodpick:focus-visible .moodpick-label,
.moodpick:active .moodpick-label {
  background: var(--blue, #3d5bbf); color: #fff; border-color: var(--blue, #3d5bbf);
}
.moodpick .mood-icon { flex: 0 0 auto; width: 18px; height: 18px; }
/* **青地になったら絵も白にする。** 絵の色は var(--blue-ink) で固定なので、
   背景が同じ青になった瞬間に見えなくなる（owner指摘 2026-08-19）。
   hover だけでは足りない。**スマホには hover が無い。**
   指を置いた瞬間（:active）と、押したあと（:focus）も要る */
.moodpick:hover .mood-icon,
.moodpick:focus .mood-icon,
.moodpick:focus-visible .mood-icon,
.moodpick:active .mood-icon { color: #fff; }
/* 24の座標系を18pxに縮めると線が1.3px相当まで細る。太さを上げて釣り合わせる */
.moodpick .mood-icon path { stroke-width: 2.1; }

/* 書影に出していない気分。**同じ場所から行けること。** */
.moodpick-rest { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.moodpick-rest-label { font-size: var(--fs-xs); color: var(--deep-soft); font-weight: 700; }
.moodpick-rest .mood-chips { display: flex; gap: 8px; flex-wrap: wrap; }

@media (min-width: 721px) {
  .moodpick { min-width: 148px; }
  .moodpick-cover { width: 148px; height: 211px; }
  .moodpick-label { font-size: var(--fs-sm); }
  .moodpick .mood-icon { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .moodpick-cover, .moodpick-label { transition: none; }
  .moodpick:hover .moodpick-cover { transform: none; }
}

/* ── 関連作品。**収録している作品はページへ行ける** ───────────── */
.related-link {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--v7-radius); transition: background .28s ease;
}
.related-link:hover, .related-link:focus-visible { background: var(--blue-mist); }
.related-link b { text-decoration: underline; text-underline-offset: 2px; }
.related-tail { margin-top: 2px; }

/* 「最新巻N巻」と、実際に買える巻数が食い違うときの断り書き。
   **本文より小さく、でも同じ行に置く。** 別の行にすると読み飛ばされ、
   「25巻まで買える」と思って押した人を裏切る */
.vol-gap { font-size: var(--fs-xs); color: var(--deep-soft); margin-left: 4px; }

/* ── 今日の6冊 ─────────────────────────────────────────
   owner の方針（2026-08-19）:
     「シンプルだと何がいいかって、書影を見た時のワクワクを全面に出せる」
   **書影が主役。** 文章は導入の数行だけで、書影より小さく静かに置く。
   カード（.work-card）は使わない。あちらは札とボタンで情報が多い。 */
.pick-date { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 4px; letter-spacing: .08em; }
.pick-tags { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 14px; letter-spacing: .06em; }
.pick-lead { margin: 0 0 28px; max-width: 34em; text-wrap: pretty; }

/* 3列（狭い画面は2列）。**行を詰めない。**書影に余白を与えると大きく見える */
.pick-covers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 20px;
  margin: 0 0 32px;
}
@media (max-width: 640px) { .pick-covers { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; } }
.pick-cover { display: block; text-decoration: none; color: inherit; }
.pick-cover img {
  width: 100%; height: auto; display: block; border-radius: var(--v7-radius);
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pick-cover:hover img { transform: translateY(-3px); box-shadow: 0 8px 20px rgb(0 0 0 / 18%); }
/* 題名は書影の下に小さく。**書影を読む邪魔をしない** */
.pick-title {
  display: block; margin-top: 8px; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--ink); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pick-more { margin: 0 0 24px; }
.pick-nav { display: flex; gap: 16px; }
.pick-nav a { font-size: var(--fs-sm); }

.pick-list { list-style: none; padding: 0; margin: 0; }
.pick-list li + li { border-top: 1px solid var(--line); }
.pick-list a { display: flex; gap: 14px; align-items: baseline; padding: 14px 2px; text-decoration: none; flex-wrap: wrap; }
.pick-list-date { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pick-list-title { font-weight: 500; }
.pick-list-tags { color: var(--muted); font-size: var(--fs-sm); }

/* 本棚の密度指定は固定列数ではなく上限。実件数が少ないと空トラックを
   作らず、幅が狭いときはauto-fitで収まる列数まで減らす。 */
#shelfGrid.shelf-grid {
  --shelf-card-min: 168px;
  --shelf-card-max: 200px;
  --shelf-gap: 22px;
  width: min(100%, calc(var(--shelf-columns, 5) * var(--shelf-card-max) + (var(--shelf-columns, 5) - 1) * var(--shelf-gap)));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--shelf-card-min)), var(--shelf-card-max)));
  gap: var(--shelf-gap);
  justify-content: start;
}
@media (max-width: 720px) {
  #shelfGrid.shelf-grid {
    --shelf-card-min: 104px;
    --shelf-card-max: 160px;
    --shelf-gap: 8px;
  }
}
@media (max-width: 359px) {
  #shelfGrid.shelf-grid { --shelf-card-min: 128px; }
}
@media (min-width: 360px) and (max-width: 480px) {
  #shelfGrid.shelf-grid { --shelf-card-max: 112px; }
}

/* ======================================================================
   v7 実サイト正本
   ----------------------------------------------------------------------
   ops/design/ の v7 モック（2026-08-20 確定版） で確定した見た目を、確認シートの
   外枠に依存せず実ページへ移す。以後の実サイト調整はこの節を正本とし、
   青ポスター期の規則を追加で上書きしない。
   ====================================================================== */
:root {
  --v7-page: #fafafa;
  --v7-ink: #16181c;
  --v7-dim: #71767f;
  --v7-line: #e2e4e8;
  --v7-card: #fff;
  --v7-chip: #f2f3f5;
  --v7-lime: #aff01f;
  --v7-lime-border: #a5d122;
  /* 本文の明るさを保ったまま、新刊・気分だけを区切る補助色。 */
  --v7-warm: #fff8ef;
  --v7-warm-line: #eee1d2;
  --v7-dark: #16181c;
  --v7-radius: 5px;
  /* 角丸は3つだけ（DESIGN.md §9）。**増やすときは文書を先に直す** */
  --radius-pill: 999px;   /* チップ・タグ・pill型のボタン */
  --radius-cover: 8px;    /* 書影だけ */
  --v7-content: 1180px;

  /* 既存部品も同じパレットへ収束させる。 */
  --paper: var(--v7-page);
  --blue: var(--v7-ink);
  --blue-ink: var(--v7-ink);
  --blue-vivid: var(--v7-ink);
  --blue-pale: var(--v7-chip);
  --blue-mist: #f5f6f7;
  --deep: var(--v7-ink);
  --deep-soft: var(--v7-dim);
  --line: var(--v7-line);
  --yellow: var(--v7-lime);
  --lime: var(--v7-lime);
  --radius: var(--v7-radius);
  --shadow: none;
  --shadow-lift: 0 10px 24px rgb(22 24 28 / 9%);
}

html {
  max-width: 100%;
  overflow-x: hidden;
  color: var(--v7-ink);
  background: var(--v7-dark);
}
body {
  max-width: 100%;
  overflow-x: clip;
  color: var(--v7-ink);
  background: var(--v7-page);
  font: 400 var(--fs-base)/1.7 var(--sans);
  letter-spacing: normal;
  font-feature-settings: normal;
  font-style: normal;
  text-transform: none;
}
a { color: inherit; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--v7-lime); outline-offset: 3px; }

/* 着色の応答は全操作で同じ速度にし、押下の短い変形だけは別の時間を保つ。 */
body :is(a, button, input, select, textarea, summary, [role="button"]) {
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease,
    opacity 280ms ease,
    transform 160ms ease;
}
.hero-search,
.moodpick-label,
.mood-icon,
.work-cover-button .work-title {
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

/* 明朝はブランド・ページ名・節見出しだけ。本文と操作はゴシックに固定する。 */
.brand-name,
.page-title,
.section-title,
.tag-cat-title,
.doc-body h1,
.doc-body h2,
.footer-name {
  font-family: var(--serif);
  color: var(--v7-ink);
  font-feature-settings: normal;
}
.home-search-sub,
.work-title,
.work-authors,
.work-note,
.chip,
.btn,
.result-toolbar,
.search-condition-dialog,
.new-filter-dialog,
.site-menu-panel,
.footer-col,
.footer-tag,
.footer-note {
  font-family: var(--sans);
  font-feature-settings: normal;
}

/* ── 共通ヘッダー／メニュー ─────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: #f7f8f8;
  background: var(--v7-dark);
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header-inner {
  width: min(100%, var(--v7-content));
  max-width: none;
  min-height: 44px;
  margin: 0 auto;
  padding: 0 0 0 15px;
  gap: 0;
}
.brand {
  min-width: 0;
  min-height: 44px;
  color: #f7f8f8;
}
.brand { gap: 8px; }
.brand-mark {
    width: 22px; height: 22px;
    /* **白**（owner確定 2026-08-22）。元は黒一色のPNGで黒地のヘッダーだと沈む。
       一度ライムにしたが、ライムは「押せる場所」の印として使っているので、
       ロゴに使うと役割がぶつかる。白なら屋号と一体で読める */
    filter: grayscale(1) brightness(0) invert(1);
  }
.brand-name { color: inherit; font-size: var(--fs-md); font-weight: 800; letter-spacing: .02em; }
.site-nav { min-width: 0; gap: 2px; }
.site-nav a {
  min-height: 44px;
  padding: 8px 11px;
  color: #f7f8f8;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:not([aria-current="page"]):hover,
.site-nav a:not([aria-current="page"]):focus-visible {
  color: #f7f8f8;
  background: #272a30;
}
.site-nav a[aria-current="page"] {
  color: #111;
  background: var(--v7-lime);
}
.site-header-actions { display: flex; align-items: center; margin-left: auto; }
.site-header-action,
.site-menu-toggle,
.site-menu-close {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  padding: 11px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--v7-radius);
  text-decoration: none;
}
@media (hover: hover) {
  .site-header-action:hover,
  .site-menu-toggle:hover { color: #111; background: var(--v7-lime); }
}
.site-header-action:active,
.site-menu-toggle:active { color: #111; background: var(--v7-lime); }
.site-header-action svg,
.site-menu-toggle svg,
.site-menu-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-menu-panel[hidden] { display: none !important; }
.site-menu-panel {
  position: fixed;
  inset: 44px 0 0;
  z-index: 100;
  display: block;
  overflow: hidden;
}
.site-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(22 24 28 / 45%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.site-menu-sheet {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 15px 20px;
  color: var(--v7-ink);
  background: var(--v7-card);
  border-bottom: 1px solid var(--v7-line);
  box-shadow: none;
}
.site-menu-head { min-height: 44px; display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.site-menu-head h2 { flex: 1; margin: 0; color: var(--v7-ink); font: 700 var(--fs-xs)/1.3 var(--sans); }
.site-menu-close {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-basis: 44px;
  padding: 0;
  color: var(--v7-ink);
  background: transparent;
  border: 0;
  font: 400 var(--fs-xl)/1 var(--sans);
}
@media (hover: hover) {
  .site-menu-close:hover { color: var(--v7-lime-border); background: transparent; }
}
.site-menu-links { display: grid; gap: 0; margin-top: 0; }
.site-menu-links h3 {
  margin: 0 0 7px;
  color: var(--v7-dim);
  font: 700 var(--fs-2xs)/1.3 var(--sans);
}
.site-menu-links .site-menu-link + h3,
.site-menu-links h3 + h3 { margin-top: 15px; }
.site-menu-link {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 8px;
  color: var(--v7-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
}
.site-menu-link-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .site-menu-link[href]:hover {
    color: var(--v7-ink);
    background: color-mix(in srgb, var(--v7-lime) 20%, transparent);
  }
}
.site-menu-link[href]:active {
  background: color-mix(in srgb, var(--v7-lime) 34%, transparent);
}
.site-menu-link.is-current,
.site-menu-link[aria-current="page"] {
  color: var(--v7-ink);
  background: color-mix(in srgb, var(--v7-lime) 22%, var(--v7-card));
  font-weight: 700;
}
.site-menu-link-small {
  padding: 8px 4px;
  color: var(--v7-dim);
  font-size: var(--fs-xs);
}
.site-menu-context { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .site-menu-sheet { animation: v7-menu-drop .22s ease; }
  @keyframes v7-menu-drop {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: none; opacity: 1; }
  }
}

/* ドットは文字の右上。枠は付けず、footerでは文字比に合わせて一段小さくする。 */
.site-nav [data-unread-new-link],
.site-menu-links [data-unread-new-link],
.footer-col [data-unread-new-link] { position: relative; }
.unread-new-label { position: relative; display: inline-block; padding-right: 5px; }
.unread-new-dot {
  position: absolute;
  top: -3px;
  right: -4px;
  width: 5px;
  height: 5px;
  min-width: 5px;
  border: 0;
  border-radius: 50%;
  background: var(--v7-lime);
  box-shadow: none;
}
.footer-col .unread-new-dot {
  top: .34em;
  right: -.32em;
  width: 4px;
  height: 4px;
  min-width: 4px;
}

/* ── 方眼の探索面／共通本文 ─────────────────────────────────────── */
.home-search,
.discover-body,
.page-body,
.doc-body {
  width: min(100%, var(--v7-content));
  max-width: none;
  margin-inline: auto;
}
.home-search {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 12px 15px 14px;
  background: var(--v7-page);
  border: 0;
}
.home-search::before,
.v7-grid-paper::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgb(22 24 28 / 11%) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgb(22 24 28 / 11%) 23px 24px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%);
}
.home-search-copy,
.home-search-sub,
.home-search-tabs,
.home-search .hero-search { width: min(100%, 760px); }
.home-search-copy {
  margin: 0 auto 10px;
  color: var(--v7-ink);
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 700;
}
.home-search-copy strong,
.home-search-sub strong {
  color: var(--v7-ink);
  font-weight: 800;
}
.home-search-copy strong { border-bottom: 4px solid var(--v7-lime); padding-bottom: 1px; font-size: var(--fs-lg); white-space: nowrap; }
.home-search-sub { margin: -4px auto 10px; color: var(--v7-dim); font-size: var(--fs-xs); line-height: 1.5; }
.home-search-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 auto 9px;
  border: 0;
}
.home-search-tabs span,
.home-search-tabs a {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  color: var(--v7-dim);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-decoration: none;
}
.home-search-tabs [aria-current="page"] {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-ink);
  font-weight: 700;
}
.hero-search {
  min-height: 44px;
  height: 44px;
  padding: 0 13px;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  box-shadow: none;
}
.hero-search:focus-within {
  /* 検索欄の内側に緑の矩形が浮くと、入力できる面ではなく
     デバッグ用の選択枠に見える。フォーカスは濃い境界だけで示す。 */
  border-color: var(--v7-ink);
  box-shadow: none;
}
.hero-search input:focus-visible { outline: none; }
.search-submit { width: 44px; height: 44px; min-width: 44px; min-height: 44px; color: var(--v7-dim); background: transparent; }
.search-submit:hover,
.search-submit:active { color: var(--v7-ink); background: transparent; }
.search-submit .search-icon { color: currentColor; }
.hero-search input { min-height: 42px; color: var(--v7-ink); font-size: var(--fs-md); }
.hero-search input::placeholder { color: var(--v7-dim); }

.discover-body { padding: 0 0 38px; }
.page-body { padding: 13px 15px 38px; }
.doc-body { width: min(100%, 780px); padding: 24px 20px 38px; }
.crumbs { color: var(--v7-dim); font-size: var(--fs-xs); }
.crumbs a { min-height: 44px; display: inline-flex; align-items: center; }
.page-title,
.doc-body h1 { color: var(--v7-ink); font-size: var(--fs-xl); font-weight: 700; letter-spacing: normal; }
.section-title,
.tag-cat-title,
.doc-body h2 { color: var(--v7-ink); font-weight: 700; letter-spacing: normal; }
.section-note,
.works-status,
.work-authors,
.work-note,
.doc-note { color: var(--v7-dim); }
.works-section,
.moodpick-section,
.tag-section { margin: 0; padding: 19px 0 4px; }
.works-section > .section-title,
.moodpick-section > .section-title,
.tag-section > .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  padding: 0 15px;
  font-size: var(--fs-base);
  line-height: 1.7;
}
.works-section > .section-note,
.moodpick-section > .section-note,
.tag-section > .section-note {
  margin: 9px 15px 0;
  line-height: 1.6;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  padding: 0 15px;
}
.section-head h2,
.section-head .section-title {
  min-height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font: 700 var(--fs-base)/1.7 var(--serif);
}
.section-head h2 > .ic.h,
.section-head .section-title > .ic.h,
.section-title > .ic.h {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.section-head h2 > .row-icon,
.section-head .section-title > .row-icon { margin-right: 0; }
.section-head h2 span { color: var(--v7-dim); font: 400 var(--fs-2xs)/1.4 var(--sans); }
.section-head > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin: -12px 0 -12px auto;
  color: var(--v7-ink);
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-decoration: none;
}
.btn,
.chip { border-radius: var(--v7-radius); }
.btn-blue,
.btn-primary,
.btn-yellow {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
}
.btn-blue:hover,
.btn-primary:hover,
.btn-yellow:hover { color: #111; background: #c5ef43; }
.chip { color: var(--v7-ink); background: var(--v7-chip); border-color: var(--v7-line); }
.chip:hover { border-color: var(--v7-lime-border); background: color-mix(in srgb, var(--v7-lime) 16%, var(--v7-card)); }
.chip[aria-pressed="true"],
.chip[aria-pressed="true"]:hover,
.chip[aria-pressed="true"]:active,
.chip[aria-pressed="true"]:focus-visible,
.chip.is-selected,
.chip.is-selected:hover,
.chip.is-selected:active,
.chip.is-selected:focus-visible {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-ink);
}
.tag-section { margin-bottom: 44px; padding: 0; background: transparent; border-radius: 0; }

/* ── カード／一覧密度 ───────────────────────────────────────────── */
.works-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 11px;
  padding: 0 15px;
}
.rail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  padding: 0 15px 6px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.tile {
  flex: none;
  width: 96px;
  color: inherit;
  text-decoration: none;
}
.tile.no-cover,
.gcard.no-cover {
  padding: 10px;
  color: inherit;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.tile.no-cover {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
}
.tile.no-cover .tl { margin-top: 0; }
.tl {
  min-height: calc(1.45em * 2);
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--v7-ink);
  font-size: var(--fs-2xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.g2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 11px;
  padding: 0 15px;
}
.gcard {
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.gcard.no-cover { min-height: 154px; }
.gt {
  min-height: calc(1.45em * 2);
  display: -webkit-box;
  margin-top: 7px;
  overflow: hidden;
  color: var(--v7-ink);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.gcard.no-cover .gt { margin-top: 0; }
.gcard em {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--v7-dim);
  font-size: var(--fs-2xs);
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.new-release-meta {
  display: block;
  margin-top: 4px;
  color: var(--v7-dim);
  font: 700 var(--fs-2xs)/1.3 var(--sans);
}
.new-release-card-link {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.new-release-card-link:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.new-release-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: auto;
  padding-top: 8px;
}
.new-release-actions > button,
.new-release-actions > button:hover,
.new-release-actions > button:focus-visible,
.new-release-actions > button:active {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  gap: 5px;
  padding: 7px 5px;
  color: #2a2e35;
  background: #f2f3f5;
  border: 1px solid #dde0e4;
  border-radius: var(--v7-radius);
  font: 700 var(--fs-3xs)/1.4 var(--sans);
}
.new-release-actions > button .mark-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.new-release-actions > button[aria-pressed="true"],
.new-release-actions > button[aria-pressed="true"]:hover,
.new-release-actions > button[aria-pressed="true"]:focus-visible,
.new-release-actions > button[aria-pressed="true"]:active {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-ink);
}
.gcard .tags {
  height: 17px;
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  margin-top: 5px;
  overflow: hidden;
}
.gcard .tags i {
  height: 17px;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: var(--v7-dim);
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-3xs);
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}
.moodrail { align-items: flex-start; }
.mtile {
  width: 160px;
  flex: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.mt-cover {
  width: 100%;
  aspect-ratio: 160 / 228;
  display: block;
  overflow: hidden;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.mt-cover > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.mt-name {
  min-height: 44px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  padding: 7px 8px;
  overflow: hidden;
  color: var(--v7-dim);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mt-name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mt-name .mood-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.work-card {
  min-width: 0;
  gap: 0;
  padding: 0;
  overflow: visible;
  color: var(--v7-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.work-card:hover { transform: none; box-shadow: none; }
.work-cover-button { min-width: 0; color: inherit; }
.work-cover {
  width: 100%;
  aspect-ratio: 70 / 100;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.work-cover img { width: 100%; height: 100%; display: block; object-fit: contain; }
.cover-fallback { color: var(--v7-dim); background: linear-gradient(145deg, #f4f5f6, #e9ebee); }
.work-title,
.work-authors,
.work-note,
.work-card > .work-tags { margin-inline: 0; }
.work-title {
  min-height: calc(1.45em * 2);
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--v7-ink);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.work-authors {
  display: block;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--v7-dim);
  font-size: var(--fs-2xs);
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.work-tags {
  height: 18px;
  min-height: 18px;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: 4px;
}
.work-tags span {
  flex: 0 0 auto;
  height: 18px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: #3a3f47;
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: var(--radius-pill);
  font-size: var(--fs-3xs);
  line-height: 1;
  white-space: nowrap;
}
.work-tags-toggle { flex: 0 0 44px; min-width: 44px; min-height: 44px; margin-block: -13px; }
.work-tags-extra { height: auto; min-height: 0; flex-wrap: wrap; overflow: visible; padding: 8px 10px 0; }
.work-tags-extra[hidden] { display: none !important; }
.work-note { margin-top: 2px; font-size: var(--fs-3xs); line-height: 1.35; color: var(--v7-dim); }

/* 表示切替は 1列 / 2列 / 4列 / 一覧の4状態だけ。 */
.result-grid[data-result-view="1"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 15px 11px;
  justify-content: start;
}
.result-grid[data-result-view="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 11px;
}
.result-grid[data-result-view="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 7px;
}
.result-grid[data-result-view="4"] .work-title { font-size: var(--fs-3xs); }
/* ==== 粒度ごとの中身（owner確定 2026-08-22）====
   list = 1列（全部出す）
   1    = 2列（全部出す）
   2    = 2列・**操作ボタンなし**
   4    = 4列・**操作ボタン／タグ／作者なし**＝書影と題名だけ
   書影を主役にするほど、周りの文字を削る。 */
.result-grid[data-result-view="2"] .shelf-buttons,
.result-grid[data-result-view="2"] .result-card-actions,
.result-grid[data-result-view="4"] .shelf-buttons,
.result-grid[data-result-view="4"] .result-card-actions { display: none; }
.result-grid[data-result-view="4"] .work-authors,
.result-grid[data-result-view="4"] .work-tags,
.result-grid[data-result-view="4"] .tags,
.result-grid[data-result-view="4"] .grid-meta em,
.result-grid[data-result-view="4"] .card-vol { display: none; }
.result-grid[data-result-view="list"] { grid-template-columns: minmax(0, 1fr); }
.result-grid[data-result-view="list"] .work-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 12px;
  padding: 12px;
  overflow: hidden;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.result-grid[data-result-view="list"] .work-cover-button { display: contents; }
.result-grid[data-result-view="list"] .work-cover { grid-column: 1; grid-row: 1 / 5; width: 120px; height: 171.43px; margin: 0; }
.result-grid[data-result-view="list"] .work-title { grid-column: 2; margin: 10px 0 0; }
.result-grid[data-result-view="list"] .work-authors,
.result-grid[data-result-view="list"] .work-note { grid-column: 2; margin-inline: 0; }
.result-grid[data-result-view="list"] > .work-card > .work-tags { grid-column: 2; margin: 6px 0 10px; }

/* ── 並べ替え／表示／複数選択 ─────────────────────────────────── */
.result-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "sort sort" "action view" "bulk bulk";
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px 0 13px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.result-sort-row { grid-area: sort; min-width: 0; }
.result-view-row { grid-area: view; align-self: center; justify-self: end; }
.result-action-row {
  grid-area: action;
  justify-self: start;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
}
.result-bulk-bar { grid-area: bulk; }
.result-sort-row select,
.result-toolbar button,
.result-toolbar label { min-height: 44px; }
.result-sort-row select { color: var(--v7-ink); background: var(--v7-card); border-color: var(--v7-line); border-radius: var(--v7-radius); }
.result-select-shell {
  position: relative;
  min-width: 0;
  display: block;
}
.result-sort-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.result-select-trigger {
  position: relative;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 42px 8px 12px;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font: 400 var(--fs-2xs)/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
}
.result-select-trigger:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.result-select-trigger[aria-expanded="true"] .result-select-chevron {
  transform: translateY(-50%);
}
.result-select-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  display: grid;
  padding: 5px;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  box-shadow: 0 10px 28px rgb(22 24 28 / 16%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scaleY(.96);
  transform-origin: top center;
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    visibility 0s linear 280ms;
}
.result-select-menu[hidden] { display: none; }
.result-select-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  transition-delay: 0s;
}
.result-select-menu > button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--v7-ink);
  background: transparent;
  border: 0;
  border-radius: calc(var(--v7-radius) - 2px);
  font: 400 var(--fs-2xs)/1.3 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background-color 280ms ease, color 280ms ease, box-shadow 280ms ease;
}
.result-select-menu > button[aria-selected="true"] {
  background: var(--v7-lime);
  color: var(--v7-ink);
  font-weight: 700;
}
.result-sort-check {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: 0;
}
.result-select-menu > button[aria-selected="true"] .result-sort-check { opacity: 1; }
.result-select-menu > button:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: -2px;
}
.result-select-chevron {
  position: absolute;
  z-index: 1;
  right: 15px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--v7-ink);
  pointer-events: none;
  transform: translateY(-50%) rotate(180deg);
  transition: transform 280ms ease;
}
.result-view-buttons {
  display: grid;
  grid-template-columns: repeat(4, 44px);
  gap: 4px;
  width: auto;
  max-width: none;
}
.result-view-buttons button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 3px 2px;
  color: var(--v7-dim);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.result-view-buttons button > span:not(.visually-hidden) { display: none; }
.result-view-icon { width: 24px; height: 24px; display: block; margin: auto; }
.result-view-buttons button[aria-pressed="true"] {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
}
.result-action-row label {
  color: var(--v7-ink);
  background: transparent;
  border-color: transparent;
  transition: color 280ms ease, background-color 280ms ease, border-color 280ms ease;
}
.result-action-row input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  color: #111;
  background: var(--v7-card);
  border: 1.5px solid var(--v7-dim);
  border-radius: var(--v7-radius);
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.result-action-row input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.55);
  transition: opacity 280ms ease, transform 280ms ease;
}
.result-action-row input[type="checkbox"]:checked {
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
}
.result-action-row input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.result-action-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.result-bulk-bar {
  max-height: 0;
  padding: 0 12px;
  overflow: hidden;
  color: #111;
  background: var(--v7-lime);
  border-radius: var(--v7-radius);
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition:
    max-height 280ms ease,
    padding-block 280ms ease,
    opacity 280ms ease,
    transform 280ms ease,
    visibility 0s linear 280ms;
}
.result-bulk-bar.is-open {
  max-height: 96px;
  padding-block: 10px;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition-delay: 0s;
}
.result-bulk-bar [data-result-selected-count] { color: #111; }
.result-bulk-bar button,
.result-bulk-bar button:hover,
.result-bulk-bar button:focus-visible {
  color: var(--v7-lime);
  background: #14170d;
  border-color: #14170d;
}

/* ── 条件検索／新刊条件 ───────────────────────────────────────── */
.search-condition-entry {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0;
  padding: 14px;
  color: var(--v7-ink);
  background: transparent;
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.search-condition-entry h2 { margin: 0; font-size: var(--fs-base); }
.search-condition-entry p { margin: 4px 0 0; color: var(--v7-dim); }
.search-condition-dialog,
.new-filter-dialog {
  width: min(1120px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 0;
  border-radius: var(--v7-radius);
}
.search-condition-dialog::backdrop,
.new-filter-dialog::backdrop { background: rgb(22 24 28 / 62%); }
.search-condition-dialog > form,
.new-filter-dialog > form {
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}
.search-condition-dialog-head,
.search-condition-actions,
.new-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-condition-dialog-head h2,
.new-filter-dialog h2 { margin: 0; }
.search-condition-groups {
  min-height: 0;
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  padding-bottom: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-condition-group { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--v7-line); border-radius: var(--v7-radius); }
.search-condition-tags,
.new-filter-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
}
.search-condition-tags > button,
.new-filter-tags > button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px;
  border-radius: var(--v7-radius);
  font-size: var(--fs-2xs);
  line-height: 1.3;
}
.search-condition-actions,
.new-filter-actions {
  flex: none;
  margin-top: 12px;
  padding-top: 12px;
  background: var(--v7-card);
  border-top: 1px solid var(--v7-line);
}
.new-filter-dialog .new-filter-tags {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-content: start;
}
.search-condition-tags > button[aria-pressed="true"],
.new-filter-tags > button[aria-pressed="true"] { color: #111; background: var(--v7-lime); border-color: var(--v7-ink); }
@media (min-width: 900px) {
  .search-condition-tags:has(> :nth-child(12)),
  .new-filter-tags:has(> :nth-child(12)) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .search-condition-tags:has(> :nth-child(20)),
  .new-filter-tags:has(> :nth-child(20)) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* SEARCHはモックと同じく「発見」と「条件」の2面。初期選択は0で、
   よく使う3カテゴリだけを開く。結果は同じページの別surfaceへ切り替える。 */
.page-body.search-screen { padding: 0 0 38px; }
.search-tab-surface {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 13px 15px 32px;
  background: var(--v7-page);
}
.search-tab-surface.v7-grid-paper::before {
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgb(22 24 28 / 6%) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgb(22 24 28 / 6%) 23px 24px);
  -webkit-mask-image: none;
  mask-image: none;
}
.search-tab-surface::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(250 250 250 / 0%), var(--v7-page));
}
.search-page-tabs { margin-bottom: 9px; }
.search-condition-surface { min-width: 0; padding: 14px 15px 20px; }
.search-condition-count {
  margin: 0 0 14px;
  color: var(--v7-dim);
  font-size: var(--fs-sm);
}
.search-condition-count b { color: var(--v7-ink); font-size: var(--fs-base); }
.search-condition-count .lead-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
.search-condition-group-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--v7-dim);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.search-condition-group-label.mt { margin-top: 20px; }
.search-condition-groups-primary,
.search-condition-groups-secondary { gap: 0; margin: 0; }
.search-condition-accordion {
  min-width: 0;
  margin: 0 0 7px;
  padding: 0;
  overflow: hidden;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.search-condition-accordion > summary {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  color: var(--v7-ink);
  background: transparent;
  border: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  list-style: none;
}
.search-condition-accordion > summary::-webkit-details-marker { display: none; }
.search-condition-accordion > summary:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: -3px;
}
.search-condition-accordion > summary > .search-condition-category-count {
  margin-left: auto;
  color: var(--v7-dim);
  font-size: var(--fs-2xs);
  font-weight: 400;
}
.search-condition-accordion .cx {
  margin-left: 8px;
  color: var(--v7-dim);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 400;
}
.search-condition-accordion .cx::before { content: "＋"; }
.search-condition-accordion[open] .cx::before { content: "−"; }
.search-category-icon { width: 22px; height: 22px; flex: none; color: var(--v7-dim); }
.search-condition-accordion > .search-condition-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 13px 12px;
}
.search-condition-surface .search-condition-tags > .pill {
  position: relative;
  isolation: isolate;
  width: auto;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  color: #3a3f47;
  background: transparent;
  border-color: transparent;
  border-radius: var(--radius-pill);
  font: 400 var(--fs-xs)/1 var(--sans);
  cursor: pointer;
}
.search-condition-surface .search-condition-tags > .pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 0;
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: inherit;
}
.search-condition-surface .search-condition-tags > .pill u {
  margin-left: 5px;
  color: var(--v7-dim);
  font-size: var(--fs-3xs);
  text-decoration: none;
  opacity: .8;
}
.search-condition-surface .search-condition-tags > .pill[aria-pressed="true"] {
  color: #16181c;
  background: transparent;
  border-color: transparent;
  font-weight: 700;
}
.search-condition-surface .search-condition-tags > .pill[aria-pressed="true"]::before {
  background: var(--v7-lime);
  border-color: var(--v7-ink);
}
.search-condition-surface .search-condition-tags > .pill[aria-pressed="true"] u {
  color: #16181c;
  opacity: 1;
}
.search-condition-surface .search-condition-tags > .pill:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.search-condition-selection {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--v7-line);
}
.search-condition-status { margin: 0 0 7px; color: var(--v7-dim); font-size: var(--fs-2xs); }
.search-condition-status span { color: var(--v7-ink); font-size: var(--fs-base); font-weight: 700; }
.search-condition-selection .applied-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.search-condition-submit { width: 100%; margin-top: 9px; }
.search-condition-submit[aria-disabled="true"] {
  color: var(--v7-dim);
  background: var(--v7-chip);
  border-color: var(--v7-line);
  cursor: default;
}
.search-status-heading { display: flex; align-items: baseline; gap: 7px; }
.search-status-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.search-status-options button {
  min-height: 44px;
  padding: 8px 10px;
  color: var(--v7-dim);
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font: 600 var(--fs-2xs)/1.35 var(--sans);
  cursor: not-allowed;
}
.search-default-result { margin-top: 9px; }
.search-default-result .btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* モック正本の初期表示は固定の「43作品を見る」だけ。条件を選んだ時だけ
   選択中の件数・解除UIへ置き換え、CTAが二重に並ばないようにする。 */
.search-condition-surface:has([data-search-condition-applied]:empty)
  [data-search-condition-selection] { display: none; }
.search-condition-surface:has([data-search-condition-applied]:not(:empty))
  .search-default-result { display: none; }
.search-discovery { min-width: 0; padding-bottom: 20px; }
.search-discovery-intro {
  margin: 0;
  padding: 13px 15px 4px;
  color: var(--v7-dim);
}
.search-discovery-intro b { color: var(--v7-ink); }
.search-discovery > .works-section { padding-top: 22px; }
.search-shelf-guide { padding: 19px 0 4px; }
.search-shelf-guide > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  padding: 0 15px;
  color: var(--v7-ink);
  font-size: var(--fs-base);
  line-height: 1.4;
}
.search-shelf-guide .ic.h { width: 18px; height: 18px; flex: none; color: var(--v7-ink); }
.search-shelf-guide > .pad2 { padding: 0 15px; }
.search-shelf-summary {
  margin: 0 0 10px;
  color: var(--v7-dim);
  font-size: var(--fs-xs);
  line-height: 1.65;
}
.search-shelf-guide .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.search-result-surface,
.search-ranking-surface { min-width: 0; padding: 0 15px 30px; }
.search-result-surface > .result-panes,
.search-ranking-surface > .result-panes { min-width: 0; }
.search-result-surface .result-controls,
.search-ranking-surface .result-controls { min-width: 0; padding-top: 10px; }
.search-query-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 8px;
  margin: 0 0 6px;
  color: var(--v7-dim);
  font: 400 var(--fs-2xs)/1.55 var(--sans);
}
.search-query-summary[hidden] { display: none; }
.search-query-summary strong {
  min-width: 0;
  color: var(--v7-ink);
  font: 700 var(--fs-sm)/1.45 var(--sans);
  overflow-wrap: anywhere;
}
.search-result-surface .result-content,
.search-ranking-surface .result-content { min-width: 0; }
.search-result-surface .search-results { margin: 0; padding: 0; }
.search-ranking-surface .result-grid { padding: 0; }

/* compact gcardは全表示密度で同じ情報を保ち、一覧だけ横長へ組み替える。 */
.result-gcard .grid-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  margin-top: 3px;
  color: var(--v7-dim);
  font-size: var(--fs-2xs);
  line-height: 1.35;
}
.result-gcard .grid-meta em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-gcard .card-vol { flex: none; white-space: nowrap; }
.result-grid[data-result-view="list"] > .gcard {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-content: start;
  column-gap: 10px;
}
.result-grid[data-result-view="list"] > .gcard > .gt { grid-column: 1 / -1; }
.result-grid[data-result-view="list"] > .gcard > .grid-meta { grid-column: 1 / -1; }
.result-grid[data-result-view="list"] > .gcard > .tags { grid-column: 1 / -1; }
.result-grid[data-result-view="list"] > .new-release-card .new-release-card-link,
.result-grid[data-result-view="list"] > .new-release-card .new-release-actions { grid-column: 1 / -1; }
.result-grid[data-result-view="4"] > .gcard { min-height: 132px; padding: 8px; }
.result-grid[data-result-view="4"] > .gcard .gt { font-size: var(--fs-3xs); }

.new-list-controls {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "period sort" "condition view";
  align-items: stretch;
  gap: 10px 18px;
  margin-bottom: 18px;
}
.new-list-controls > .new-period-control {
  grid-area: period;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 5px;
}
.new-list-controls > .new-period-control::before {
  content: "期間";
  grid-column: 1 / -1;
  align-self: start;
  color: var(--v7-dim);
  font: 700 var(--fs-3xs)/1 var(--sans);
}
.new-list-controls > [data-new-filter-open] {
  grid-area: condition;
  width: 100%;
  min-height: 48px;
  justify-self: stretch;
  padding-right: 58px;
}
.new-list-controls > .new-filter-count {
  z-index: 1;
  grid-area: condition;
  align-self: center;
  justify-self: end;
  margin-right: 12px;
  pointer-events: none;
}
.new-list-controls > .new-filter-count:empty { display: none; }
/* result-toolbar自身はJSの状態コンテナとして残し、sort/viewだけを
   new-list-controlsの2×2 grid itemへ投影する。 */
.new-list-controls > .result-toolbar { display: contents; }
.new-list-controls > .result-toolbar > .result-sort-row { grid-area: sort; }
.new-list-controls > .result-toolbar > .result-view-row { grid-area: view; }
/* 表示ボタンの右隣。**ボタンの行と下端を揃える**（表示ボタン側は上に
   見出しがあるぶん背が高いので、上揃えだと複数選択が浮いて見える） */
.new-list-controls > .result-toolbar > .result-action-row {
  grid-area: action;
  align-self: end;
  justify-self: end;
  flex-direction: row;
  margin: 0;
}
.new-list-controls > .result-toolbar > .result-bulk-bar { grid-area: bulk; }
.new-list-controls > .result-toolbar > .result-sort-row label,
.new-list-controls > .result-toolbar > .result-view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
}
.new-list-controls > .result-toolbar > .result-view-row .result-control-label {
  justify-self: start;
}
.new-list-controls > .result-toolbar > .result-view-row .result-view-buttons {
  width: 100%;
  grid-template-columns: repeat(4, minmax(44px, 1fr));
}
.new-list-controls .result-control-label { color: var(--v7-dim); font: 700 var(--fs-3xs)/1 var(--sans); }
.new-period-control button { color: var(--v7-ink); background: var(--v7-card); border-color: var(--v7-line); border-radius: var(--v7-radius); }
.new-period-control button[aria-pressed="true"] { color: #111; background: var(--v7-lime); border-color: var(--v7-ink); }

/* ── 本棚／作品ページ ─────────────────────────────────────────── */
.shelf-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 6px;
  overflow: visible;
  margin-bottom: 12px;
}
.shelf-tabs .chip-tab {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  padding: 6px 8px;
  color: var(--v7-dim);
  background: var(--v7-card);
  border-color: var(--v7-line);
  border-radius: var(--v7-radius);
  opacity: 1;
}
.shelf-screen .shelf-tabs .tab-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.shelf-tabs .chip-tab:hover { opacity: 1; background: color-mix(in srgb, var(--v7-lime) 14%, var(--v7-card)); }
.shelf-tabs .chip-tab[aria-pressed="true"],
.shelf-tabs .chip-tab[aria-pressed="true"]:hover {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
  opacity: 1;
}
.shelf-panes { min-width: 0; }
.shelf-controls > .result-toolbar[data-result-grid="shelfGrid"] {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.shelf-screen .shelf-controls > .result-toolbar[data-result-grid="shelfGrid"] {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "sort sort" "action view" "bulk bulk";
  align-items: center;
  align-content: start;
  grid-auto-rows: max-content;
}
.shelf-screen .shelf-controls .result-view-row {
  justify-self: end;
}
.shelf-screen .shelf-controls .result-view-row > .result-control-label {
  display: none;
}
.shelf-screen .shelf-controls .result-view-buttons {
  grid-template-columns: repeat(4, 44px);
  width: auto;
}
.shelf-screen .shelf-controls .result-view-buttons button {
  width: 44px;
  min-width: 44px;
  height: 44px;
}
.shelf-screen .shelf-controls .result-action-row {
  justify-self: start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-self: center;
  gap: 0;
}
.shelf-screen .shelf-controls .result-action-row label {
  flex: 0 0 auto;
  min-height: 44px;
  padding-block: 0;
  justify-content: flex-start;
}
.shelf-screen .shelf-controls .result-sort-row select:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.result-screen .result-sort-row select:focus-visible,
.new-screen .result-sort-row select:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.shelf-content { min-width: 0; }
.shelf-grid > .shelf-server-fixture[hidden] { display: none; }
.shelf-tabs-note { margin-top: 8px; color: var(--v7-dim); }
.shelf-empty-moods { margin-top: 20px; }
.shelf-empty-moods > div { display: flex; flex-wrap: wrap; gap: 8px; }
.shelf-empty-moods .chip { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; }

.work-screen .work-layout > .crumb {
  margin: 0 0 12px;
  padding: 4px 15px;
  border: 0;
}
.work-screen .work-layout > .crumb a,
.work-screen .work-layout > .crumb a:hover,
.work-screen .work-layout > .crumb a:focus-visible { text-decoration: none; }
.page-body.work-screen { padding-inline: 0; }
.work-screen .work-main { min-width: 0; }
.work-screen .work-return-row {
  min-width: 0;
  padding: 12px 15px 0;
  background: #fafafa;
}
.work-screen .work-return {
  width: fit-content;
  min-height: 44px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font: 700 var(--fs-xs)/1 var(--sans);
  text-decoration: none;
  transition: color 280ms ease, background-color 280ms ease,
    border-color 280ms ease, box-shadow 280ms ease;
}
.work-screen .work-return:hover,
.work-screen .work-return:focus-visible {
  color: var(--v7-ink);
  background: var(--v7-lime);
  border-color: var(--v7-ink);
}
.work-screen .work-return:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.work-screen .wtop {
  display: flex;
  align-items: start;
  gap: 13px;
  min-width: 0;
  margin: 0;
  padding: 17px 15px 15px;
  background: #fafafa;
}
.work-screen .dialog-cover { width: 112px; min-width: 0; flex: none; }
.work-screen .dialog-cover .work-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  border-radius: var(--v7-radius);
  box-shadow: none;
}
.work-screen .work-summary { min-width: 0; flex: 1; }
.work-screen .wtop.no-cover .work-summary { max-width: 720px; }
.work-screen .dialog-title {
  display: block;
  min-width: 0;
  margin: 0;
  color: var(--v7-ink);
  font: 800 var(--fs-md)/1.45 var(--serif);
}
.work-screen .dialog-meta {
  margin: 4px 0 0;
  color: var(--v7-dim);
  font: 400 var(--fs-2xs)/1.7 var(--sans);
}
.work-screen .dialog-meta a { color: inherit; text-decoration: none; }
.work-screen .dialog-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  height: 17px;
  overflow: hidden;
  margin-top: 5px;
}
.work-screen .dialog-tags .chip {
  flex: none;
  min-height: 17px;
  height: 17px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  color: #3a3f47;
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: var(--radius-pill);
  font: 400 var(--fs-3xs)/1 var(--sans);
  white-space: nowrap;
}
/* **高さを固定しない。**19px固定だとチップが収まらず、
   行が重なって読めなくなる（owner指摘 2026-08-22、「設定」行で発生）。
   ヒロインだけでなく設定にも見出しが付いたので、両方この規則で揃う。 */
.work-screen .role-row {
  min-width: 0;
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.work-screen .role-label {
  flex: none;
  color: var(--v7-dim);
  font: 700 var(--fs-3xs)/1 var(--sans);
  letter-spacing: normal;
}
.work-screen .role-chips {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  overflow: hidden;
}
.work-screen .role-chips .chip {
  flex: none;
  min-height: 17px;
  height: 17px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  color: #3a3f47;
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: var(--radius-pill);
  font: 400 var(--fs-3xs)/1 var(--sans);
  white-space: nowrap;
}
.work-screen .dialog-meta.vol { display: inline-block; margin-top: 9px; }
.work-screen .wshelf {
  display: grid;
  gap: 8px;
  margin-top: 11px;
  padding: 15px 0 0;
}
.work-screen .primary-state-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.work-screen .favorite-state-action { display: block; }
.work-screen .wshelf [data-shelf-btn] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #2a2e35;
  background: var(--v7-chip);
  border: 1px solid #dde0e4;
  border-radius: var(--v7-radius);
  font: 700 var(--fs-xs)/1.7 var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.work-screen .wshelf [data-shelf-btn] svg {
  width: 18px;
  height: 18px;
  flex: none;
  overflow: visible;
}
.work-screen .wshelf [data-shelf-btn] svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.work-screen .wshelf [data-shelf-btn][aria-pressed="true"] {
  color: #16181c;
  background: var(--v7-lime);
  border-color: #16181c;
}
.work-screen .reading-progress {
  margin-top: 14px;
  padding: 13px;
  color: var(--v7-ink);
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.work-screen .reading-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font: 400 var(--fs-xs)/1.7 var(--sans);
}
.work-screen .reading-progress-head output {
  font: 800 var(--fs-lg)/1.2 var(--sans);
  white-space: nowrap;
}
.work-screen .reading-progress input[type="range"] {
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin: 6px 0 2px;
  accent-color: var(--v7-lime);
  cursor: pointer;
  touch-action: pan-y;
}
.work-screen .reading-progress input[type="range"]::-webkit-slider-thumb { width: 44px; height: 44px; }
.work-screen .reading-progress input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 40px;
  background: var(--v7-lime);
  border: 2px solid var(--v7-ink);
}
.work-screen .reading-progress-actions {
  display: grid;
  grid-template-columns: 44px 44px minmax(0, 1fr);
  gap: 8px;
}
.work-screen .reading-progress-actions button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font: 700 var(--fs-xs)/1.2 var(--sans);
}
.work-screen .reading-progress-actions button:last-child {
  color: #14170d;
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
}
.work-screen .reading-progress-actions button:focus-visible,
.work-screen .reading-progress input[type="range"]:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.work-screen .volume-section,
.work-screen .similar-section,
.work-screen .official-related-section { margin-top: 24px; }
.work-screen .work-source {
  margin-top: 0;
  padding: 19px 0 4px;
}
.work-screen .volume-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 19px 0 4px;
}
.work-screen .volume-section > h2,
.work-screen .volume-section > .pad2 { position: relative; z-index: 1; }
.work-screen .volume-section > .pad2 { padding: 0 15px; }
.work-screen .volume-section > h2,
.work-screen .similar-section > h2,
.work-screen .official-related-section > h2,
.work-screen .work-source > h2 {
  margin: 0 0 11px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--v7-ink);
  font: 700 var(--fs-base)/1.7 var(--serif);
}
.work-screen .volume-section > h2 .row-icon { width: 18px; height: 18px; flex: none; }
.work-screen .similar-section > h2 .row-icon,
.work-screen .official-related-section > h2 .row-icon,
.work-screen .work-source > h2 .row-icon { width: 18px; height: 18px; flex: none; }
.work-screen .ad-pr {
  min-height: 24px;
  margin-left: 8px;
  padding: 2px 7px;
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font: 700 var(--fs-3xs)/1 var(--sans);
  letter-spacing: .04em;
}
.work-screen .similar-section .rail,
.work-screen .official-related-section .rail { padding-inline: 15px; }
.work-screen .similar-section .rail > .tile,
.work-screen .official-related-section .rail > .tile { width: 112px; }
.work-screen .related-tile { display: flex; flex-direction: column; gap: 5px; }
.work-screen .related-kind { color: var(--v7-dim); font: 400 var(--fs-3xs)/1.35 var(--sans); }
.action-box { color: var(--v7-ink); background: var(--v7-card); border-color: var(--v7-line); border-radius: var(--v7-radius); }
.verified-trial-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.verified-trial-link:hover { background: color-mix(in srgb, var(--v7-lime) 18%, var(--v7-card)); border-color: var(--v7-lime-border); }
.verified-trial-link .ext,
.verified-trial-link svg { width: 15px; height: 15px; flex: 0 0 15px; }

.volume-choices {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 2px 44px 8px 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.volume-choices::-webkit-scrollbar { display: none; }
.volume-item {
  flex: 0 0 112px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  color: inherit;
  scroll-snap-align: start;
}
.work-screen .volume-choice {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 2px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font-family: var(--sans);
  text-align: left;
  text-decoration: none;
}
.work-screen .volume-choice[href] { cursor: pointer; }
.work-screen .volume-choice[href]:hover { border-color: var(--v7-ink); }
.work-screen .volume-choice[href]:focus-visible { outline: 2px solid var(--v7-ink); outline-offset: 2px; }
.work-screen .volume-choice.is-unavailable { color: var(--v7-dim); border-style: dashed; }
.work-screen .volume-cover {
  display: block;
  width: 100%;
  aspect-ratio: 70 / 100;
  object-fit: contain;
  background: var(--v7-card);
  border-radius: calc(var(--v7-radius) - 2px) calc(var(--v7-radius) - 2px) 0 0;
}
.work-screen .volume-cover-unavailable {
  width: 100%;
  aspect-ratio: 70 / 100;
  display: grid;
  place-content: center;
  gap: 5px;
  color: var(--v7-dim);
  background: var(--v7-chip);
  border: 0;
  border-bottom: 1px solid var(--v7-line);
  border-radius: calc(var(--v7-radius) - 2px) calc(var(--v7-radius) - 2px) 0 0;
}
.work-screen .volume-cover-icon { width: 22px; height: 22px; margin-inline: auto; }
.work-screen .volume-cover-unavailable small { font: 400 var(--fs-3xs)/1.2 var(--sans); }
.work-screen .volume-copy {
  min-width: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 6px;
  align-items: start;
}
.work-screen .volume-text { min-width: 0; }
.work-screen .volume-choice strong { display: block; font: 700 var(--fs-sm)/1.7 var(--sans); }
.work-screen .volume-choice .volume-copy small {
  display: block;
  margin-top: 4px;
  color: var(--v7-dim);
  font: 400 var(--fs-3xs)/1.35 var(--sans);
}
.work-screen .volume-external-slot {
  width: 18px;
  height: 18px;
  align-self: center;
  display: grid;
  place-items: center;
  background: transparent;
}
.work-screen .volume-external { width: 18px; height: 18px; display: block; stroke-width: 2.4; }
.work-screen .volume-source {
  display: block;
  padding: 0 7px 7px;
  color: var(--v7-dim);
  font: 500 var(--fs-3xs)/1.35 var(--sans);
}
.volume-trial-link {
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  color: inherit;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font: 700 var(--fs-2xs)/1.2 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.volume-trial-link .external-icon,
.volume-trial-link svg { width: 15px; height: 15px; min-width: 15px; max-width: 15px; flex: none; }
.read-progress { border-color: var(--v7-line); }
.read-progress input[type="range"] { accent-color: var(--v7-lime-border); }
.read-progress-step,
.read-progress-all { color: var(--v7-ink); background: var(--v7-card); border-color: var(--v7-line); border-radius: var(--v7-radius); }

/* ── 濃色の本棚導線からfooterへ切れ目なくつなぐ ─────────────── */
.discover-body:has(> .shelf-intro:last-child),
.discover-body:has(> .home-shelf-cta:last-child),
.page-body:has(> .shelf-intro:last-child),
.page-body:has(> .search-shelf-intro:last-child) { padding-bottom: 0; }
.home-shelf-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: 26px 0 0;
  padding: 27px 15px 32px;
  color: #f7f8f8;
  background: linear-gradient(to bottom, #202329 0%, var(--v7-dark) 100%);
  border: 0;
  box-shadow: none;
  text-align: center;
}
.home-shelf-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgb(255 255 255 / 16%) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgb(255 255 255 / 16%) 23px 24px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 56%, rgb(0 0 0 / 55%) 72%, transparent 94% 100%);
  mask-image: linear-gradient(to bottom, #000 0 56%, rgb(0 0 0 / 55%) 72%, transparent 94% 100%);
}
.home-shelf-cta .ct {
  margin: 0 0 13px;
  color: #f7f8f8;
  font-size: var(--fs-base);
  font-weight: 700;
}
.home-shelf-cta .btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 34px;
  font-size: var(--fs-base);
  font-weight: 700;
  text-decoration: none;
}
.home-shelf-cta .cs {
  margin: 11px 0 0;
  padding-inline: 46px;
  color: #9aa0a8;
  font-size: var(--fs-2xs);
  text-align: center;
}
.shelf-intro {
  position: relative;
  isolation: isolate;
  overflow: clip;
  margin: 40px calc(50% - 50vw) 0;
  padding:
    28px max(15px, calc((100vw - var(--v7-content)) / 2 + 15px))
    72px;
  color: #f7f8f8;
  background: var(--v7-dark);
  border: 0;
  border-radius: 0;
}
.shelf-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgb(255 255 255 / 16%) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgb(255 255 255 / 16%) 23px 24px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 56%, rgb(0 0 0 / 55%) 72%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0 56%, rgb(0 0 0 / 55%) 72%, transparent 96%);
}
.shelf-intro .section-title,
.shelf-intro .section-note { color: inherit; }
.shelf-intro .btn-blue { color: #111; background: var(--v7-lime); border-color: var(--v7-lime); }
.page-top-link {
  position: absolute;
  right: 15px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #9aa0a8;
  background: transparent;
  border: 0;
  text-decoration: none;
  transition: color 280ms ease;
}
.page-top-link:hover,
.page-top-link:focus-visible { color: var(--v7-lime); }
.page-top-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 固定ページの下端も白い帯を挟まず同じ濃色面へフェードする。 */
.doc-body { position: relative; isolation: isolate; overflow: clip; }
.static-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: -24px -20px 24px;
  padding: 12px 15px 32px;
  background: var(--v7-card);
  border-bottom: 0;
}
.static-switch::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(250 250 250 / 0%), var(--v7-page));
}
.static-switch a,
.static-switch button {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 6px 8px;
  color: var(--v7-dim);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font: 400 var(--fs-xs)/1.35 var(--sans);
  text-align: center;
  text-decoration: none;
}

/* 固定ページの5導線は、選択状態にかかわらず同じ中央軸へ置く。 */
.fixed-page-body > .static-switch a,
.fixed-page-body > .static-switch button {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.static-switch > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.static-switch [aria-current="page"],
.static-switch [aria-selected="true"] {
  color: #14170d;
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
  font-weight: 700;
}
.doc-content { min-width: 0; }
.doc-body h1 {
  margin: 0 0 18px;
  color: var(--v7-ink);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.35;
}
.doc-body h2 {
  margin: 27px 0 10px;
  padding-bottom: 7px;
  color: var(--v7-ink);
  border-bottom: 1px solid var(--v7-line);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.5;
}
.doc-body p,
.doc-body li { font-size: var(--fs-base); line-height: 1.85; }
.doc-body p { margin: 0 0 14px; }
.doc-body ul,
.doc-body ol { margin: 0 0 18px; padding-left: 1.45em; }
.doc-body li + li { margin-top: 8px; }
.doc-body a { min-height: 44px; display: inline-flex; align-items: center; color: var(--v7-ink); }
.doc-body::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: 100vw;
  height: 72px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(to bottom, var(--v7-page), var(--v7-dark));
}
.site-footer {
  margin-top: 0;
  color: #e9eaec;
  background: var(--v7-dark);
  border: 0;
}
.footer-inner {
  width: min(100%, var(--v7-content));
  max-width: none;
  margin: 0 auto;
  padding: 10px 15px 12px;
}
.footer-brand {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
  color: #f7f8f8;
  text-align: left;
  text-decoration: none;
}
.footer-mark {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 20px;
  margin: 0;
  filter: grayscale(1) brightness(0) invert(1);
}
.footer-name { margin: 0; color: #f7f8f8; font-size: var(--fs-base); font-weight: 800; text-decoration: none; }
.footer-tag {
  margin-top: 0;
  margin-bottom: 44px;
  color: #878c94;
  font-size: var(--fs-2xs);
  line-height: 1.3;
  text-align: center;
}
.footer-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  justify-items: start;
  align-items: start;
  gap: 0 16px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 24px;
}
.footer-brand,
.footer-tag,
.footer-cols,
.footer-note,
.footer-copyright { width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
.footer-col { width: auto; }
.footer-col .footer-group + .footer-group { margin-top: 22px; }
.footer-col h2 { min-height: 0; margin: 0 0 5px; padding: 0; color: #f7f8f8; font-size: var(--fs-2xs); line-height: 1.2; }
.footer-col ul,
.footer-col ul:not(:has(a)) { gap: 0; padding-top: 0; }
.footer-col li { margin: 0; line-height: 1.45; }
.footer-col a {
  position: relative;
  width: 100%;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: #878c94;
  font-size: var(--fs-2xs);
  line-height: 1.25;
  text-decoration: none;
}
.footer-col a::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.footer-col a:hover { color: var(--v7-lime); }
.footer-note { margin-top: 18px; padding-top: 9px; color: #878c94; border-color: rgb(255 255 255 / 14%); font-size: var(--fs-2xs); line-height: 1.4; }
.footer-copyright { margin-top: 8px; margin-bottom: 0; color: #878c94; text-align: left; }

.search-condition-dialog-head [data-search-condition-close],
.search-condition-dialog-head [data-new-filter-close] {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--v7-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: var(--fs-2xl);
  line-height: 1;
}
.home-hint-actions [data-hint-close],
.blurb-more[aria-expanded="true"] { min-width: 44px; min-height: 44px; font-size: var(--fs-2xl); line-height: 1; }

/* ── 新刊／未読の新巻：モックと同じ情報密度と通常グリッド ─── */
.new-list-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 15px 16px;
  padding: 0;
  color: var(--v7-dim);
}
.new-list-info .new-list-note,
.new-list-info > p {
  flex: 1 1 230px;
  margin: 0;
  color: var(--v7-dim);
  font: 400 var(--fs-xs)/1.65 var(--sans);
}
.new-list-info .new-list-count {
  margin: 0;
  color: var(--v7-dim);
  font: 700 var(--fs-2xs)/1.4 var(--sans);
  white-space: nowrap;
}
.new-filter-empty {
  margin: 8px 15px 16px;
  padding: 18px;
  color: var(--v7-dim);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  text-align: center;
}
.new-priority {
  block-size: auto;
  overflow: visible;
  margin: 0;
  padding: 0 0 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.new-priority-message {
  display: none;
  block-size: auto;
  overflow: visible;
  margin: 0 15px 12px;
  color: var(--v7-dim);
  font: 400 var(--fs-xs)/1.65 var(--sans);
}
.new-priority:has(.new-priority-grid:not(:empty)) .new-priority-message { display: block; }
.new-priority-grid {
  block-size: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 15px 11px;
  overflow: visible;
  padding: 0 15px;
}
.new-priority-card {
  min-width: 0;
  min-height: 154px;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.new-priority-link { min-height: 100%; padding: 13px; color: inherit; text-decoration: none; }
.new-priority-link:hover { border-color: var(--v7-ink); }
.new-priority-card-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.new-priority-card-release { color: var(--v7-dim); }
.new-empty {
  margin: 15px;
  padding: 17px;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.new-page-empty { max-width: 720px; margin-inline: auto; text-align: center; }
.new-empty h2 { margin: 0 0 9px; font: 700 var(--fs-md)/1.45 var(--serif); }
.new-empty h2 { display: flex; align-items: center; gap: 8px; }
.new-empty > p { margin: 0; color: var(--v7-dim); font: 400 var(--fs-xs)/1.75 var(--sans); }
.new-empty .empty-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.new-empty .empty-actions > * { width: 100%; min-height: 44px; }
.unread-new-screen .new-page-empty {
  width: min(calc(100% - 30px), 620px);
  margin: 15px auto 24px;
  padding: 24px 20px;
}
.unread-new-screen .new-page-empty h2 { justify-content: center; }
.unread-empty-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 9px;
}
.unread-empty-heading h2 { margin: 0; }
.unread-empty-heading > b { color: var(--v7-dim); font: 700 var(--fs-xs)/1.4 var(--sans); }
.unread-new-screen .new-page-empty .empty-actions {
  width: min(100%, 240px);
  grid-template-columns: minmax(0, 1fr);
  margin: 18px auto 0;
}
.unread-new-screen .new-page-empty .empty-actions .btn {
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
  white-space: nowrap;
  font: 700 var(--fs-sm)/1.4 var(--sans);
  text-align: center;
}
.new-empty-moods { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--v7-line); text-align: left; }
.new-empty-moods h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 700 var(--fs-md)/1.4 var(--serif); }
.new-empty-moods h3 .row-icon { width: 18px; height: 18px; margin-right: 0; color: var(--v7-dim); }
.new-empty-moods .search-mood-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; }
.search-mood-link { min-height: 44px; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; color: var(--v7-ink); background: var(--v7-chip); border: 1px solid var(--v7-line); border-radius: var(--v7-radius); font: 700 var(--fs-2xs)/1.35 var(--sans); text-decoration: none; }
.search-mood-link .mood-icon { width: 17px; height: 17px; flex: 0 0 17px; color: var(--v7-dim); }

/* ── すべてのタグ：11カテゴリ・全見出しピクト・＋N ───────── */
.tag-category-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.tags-screen .axblock { min-width: 0; margin: 0 0 20px; }
.tags-screen .tag-cat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.tags-screen .tag-category-icon { width: 18px; height: 18px; margin-right: 0; color: var(--v7-dim); }
.tags-screen .tag-cat-count { margin-left: 0; }
.axis-more-items { display: contents; }
.axis-more-items[hidden] { display: none; }
.axis-more {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 3px;
  color: var(--v7-dim);
  background: transparent;
  border: 0;
  font: 500 var(--fs-xs)/1.4 var(--sans);
  cursor: pointer;
}
.axis-more:hover { color: var(--v7-ink); }
.axis-more-icon { width: 14px; height: 14px; flex: none; }
.axis-more-chevron[hidden] { display: none; }
.axis-more-chevron { display: inline-grid; place-items: center; }

/* 固定5頁は各canonical URLを正本にしつつ、同じタブ／tabpanel契約を使う。 */
.static-page { min-width: 0; }
.static-page:focus-visible { outline: 2px solid var(--v7-ink); outline-offset: -4px; }

/* ── responsive：375px正本を768px以上だけPC構成へ展開 ──────── */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-header-actions { display: flex; }
}

@media (max-width: 767px) {
  .home-screen .works-grid.rail { display: flex; }

  .result-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sort sort" "action view" "bulk bulk";
  }
  .result-view-row { align-items: center; flex-direction: row; justify-content: flex-end; }
  .result-view-buttons {
    grid-template-columns: repeat(4, 44px);
    width: auto;
  }
  .result-view-buttons button { width: 44px; min-width: 44px; }
  .result-grid[data-result-view="1"] { grid-template-columns: minmax(0, 1fr); }
  .result-grid[data-result-view="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-grid[data-result-view="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .result-grid[data-result-view="list"] .work-card { grid-template-columns: 120px minmax(0, 1fr); }
  .result-grid[data-result-view="list"] .work-cover { width: 120px; height: 171.43px; }

  .search-condition-entry { align-items: stretch; flex-direction: column; }
  .search-condition-dialog,
  .new-filter-dialog {
    width: 100%;
    max-height: 86dvh;
    margin: auto 0 0;
    border-radius: var(--v7-radius) var(--v7-radius) 0 0;
  }
  .search-condition-dialog > form,
  .new-filter-dialog > form {
    max-height: 86dvh;
    padding: 16px 15px max(16px, env(safe-area-inset-bottom));
  }
  .search-condition-tags,
  .new-filter-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .search-condition-actions,
  .new-filter-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 8px; margin-top: 16px; }
  /* **複数選択（.result-action-row）に置き場所が無かった。**
     新刊の面はツールバーを display:contents にして中身を親のgridへ流すが、
     ここの grid-template-areas に action が無いため、複数選択だけが
     暗黙の行に落ち、`justify-content: flex-end` で右端に独りで浮いていた
     （owner指摘 2026-08-24「複数選択がグリッド横に収まってない」）。
     実測 390px で x=281・表示ボタンの1行下。**表示ボタンの横に置く。** */
  .new-list-controls {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "period period" "condition condition" "sort sort" "view action" "bulk bulk";
    gap: 8px;
  }

  .shelf-tabs { gap: 6px; }
  .shelf-tabs .chip-tab { min-width: 0; padding: 6px 4px; gap: 3px; }
  .shelf-intro { margin-inline: calc(50% - 50vw); padding: 26px 15px 72px; }
  .footer-cols { grid-template-columns: repeat(2, max-content); gap: 0 36px; }
}

@media (min-width: 768px) {
  .site-header-inner { min-height: 60px; padding-left: 32px; }
  .site-header-action,
  .site-menu-toggle { width: 52px; height: 52px; flex-basis: 52px; padding: 15px; }
  .site-menu-panel { inset: 60px 0 0; }
  .site-menu-sheet {
    width: 380px;
    margin-left: auto;
    border: 0;
    border-left: 1px solid var(--v7-line);
  }

  .home-search { padding-inline: 32px; }
  .discover-body.home-screen {
    width: min(100%, 1200px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
  .home-screen > section:not(.home-shelf-cta) { min-width: 0; padding-top: 24px; }
  .home-screen > .shelf-intro,
  .home-screen > .home-shelf-cta { grid-column: 1 / -1; }
  .home-screen .section-title,
  .home-screen .section-note { padding-inline: 24px; }
  .home-screen .section-title,
  .search-screen .section-title,
  .result-screen .section-title,
  .work-screen .section-title,
  .shelf-screen .section-title,
  .tags-screen .section-title,
  .new-screen .section-title { font-size: var(--fs-md); }
  .section-head h2,
  .section-head .section-title { font-size: var(--fs-md); }
  .home-screen .works-grid.rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-inline: 24px;
  }
  .home-screen .works-grid.rail .tile,
  .home-screen .moodrail .mtile { width: 100%; }
  .home-screen .moodrail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-inline: 24px;
  }
  .home-screen .moodrail .mt-name { margin-top: 0; }

  .page-body.search-screen { width: min(100%, 1120px); padding: 0; }
  .search-screen .search-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 420px);
    align-content: start;
    column-gap: 26px;
  }
  .search-screen .search-discovery { grid-column: 1; grid-row: 1; min-width: 0; padding: 6px 0 24px; }
  .search-screen .search-condition-surface { grid-column: 2; grid-row: 1; min-width: 0; padding: 24px 15px 20px; border-left: 1px solid var(--v7-line); }
  .search-screen .search-discovery .works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 24px; }
  .search-screen .search-discovery .works-grid.rail {
    display: grid;
    overflow: visible;
  }
  .search-screen .search-discovery .tile { width: 100%; }
  .search-screen .search-discovery .moodrail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-inline: 24px;
  }
  .search-screen .search-discovery .mtile { width: 100%; }
  .search-screen > .search-result-surface,
  .search-screen > .search-ranking-surface { padding: 0; }
  .search-screen > .search-result-surface > .result-panes,
  .search-screen > .search-ranking-surface > .result-panes {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-content: start;
    gap: 0 26px;
  }
  .search-screen > .search-result-surface .result-controls,
  .search-screen > .search-ranking-surface .result-controls {
    grid-column: 1;
    padding: 10px 24px 24px;
    border-right: 1px solid var(--v7-line);
  }
  .search-screen > .search-result-surface .result-content,
  .search-screen > .search-ranking-surface .result-content {
    grid-column: 2;
    padding: 20px 10px 30px 0;
  }
  .search-screen .result-grid[data-result-view="1"] {
    grid-template-columns: minmax(0, 220px);
    justify-content: center;
  }
  .search-screen .result-grid[data-result-view="2"] {
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: center;
  }
  .search-screen .result-grid[data-result-view="4"] {
    grid-template-columns: repeat(4, minmax(0, 180px));
    justify-content: center;
  }
  .search-screen .result-grid[data-result-view="list"] {
    max-width: 800px;
    margin-inline: auto;
  }

  .page-body.result-screen,
  .page-body.shelf-screen {
    width: min(100%, 1200px);
    padding: 0;
  }
  .result-screen > .result-panes,
  .shelf-screen > .shelf-panes {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-content: start;
    gap: 0 26px;
    min-width: 0;
  }
  .result-screen .result-controls,
  .shelf-screen .shelf-controls {
    grid-column: 1;
    min-width: 0;
    padding: 10px 24px 24px;
    border-right: 1px solid var(--v7-line);
  }
  .result-screen .result-content,
  .shelf-screen .shelf-content { grid-column: 2; min-width: 0; padding: 20px 10px 30px 0; }
  .result-screen .result-grid[data-result-view="1"] { grid-template-columns: minmax(0, 220px); justify-content: center; }
  .result-screen .result-grid[data-result-view="2"] { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: center; }
  .result-screen .result-grid[data-result-view="4"] { grid-template-columns: repeat(4, minmax(0, 180px)); justify-content: center; }
  .result-screen .result-grid[data-result-view="list"] { max-width: 800px; margin-inline: auto; }
  .result-screen .result-grid[data-result-view="list"] .work-cover { width: 140px; height: 200px; }
  .result-screen .result-grid[data-result-view="list"] .work-card { grid-template-columns: 140px minmax(0, 1fr); min-height: 210px; }

  .page-body.work-screen { width: min(100%, 1120px); padding: 0; }
  .work-screen .work-layout { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 24px 30px; }
  .work-screen .wtop { padding-inline: 0; }
  .work-screen .volume-section > h2,
  .work-screen .volume-section > .pad2 { padding-inline: 0; }
  .work-screen .volume-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 120px)); justify-content: start; overflow: visible; padding: 2px; }
  .work-screen .volume-item { width: 100%; min-width: 0; }

  .page-body.tags-screen { width: min(100%, 1120px); padding: 24px; }
  .tags-screen .tag-category-grid,
  .tags-screen .tag-categories,
  .tags-screen .tags-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }

  .page-body.new-screen { width: min(100%, 1100px); padding: 0 32px 38px; }
  .new-screen .new-list-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "period sort sort" "condition view action" "bulk bulk bulk";
    gap: 10px 18px;
  }
  .new-screen .new-period-control { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .new-screen .new-period-control::before { grid-column: 1 / -1; }
  .new-screen .result-grid[data-result-view="1"] { grid-template-columns: minmax(0, 220px); justify-content: start; }
  .new-screen .result-grid[data-result-view="2"] { grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: start; }
  .new-screen .result-grid[data-result-view="4"] { grid-template-columns: repeat(4, minmax(0, 180px)); justify-content: start; gap: 24px 16px; }
  .new-screen .result-grid[data-result-view="list"] { max-width: 800px; }
  .new-priority-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .new-empty-moods .search-mood-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .search-condition-dialog,
  .new-filter-dialog {
    width: min(420px, calc(100% - 24px));
    height: 100dvh;
    max-height: none;
    margin: 0 0 0 auto;
    border-radius: var(--v7-radius) 0 0 var(--v7-radius);
  }
  .search-condition-dialog > form,
  .new-filter-dialog > form { max-height: 100dvh; padding: 24px 22px; }

  .doc-body { width: min(100%, 1000px); padding: 24px; }
  .doc-body:has(> .static-switch) {
    display: grid;
    grid-template-columns: 240px minmax(0, 720px);
    align-items: start;
    gap: 30px;
  }
  .doc-body > .static-switch {
    grid-column: 1;
    position: sticky;
    top: 84px;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .doc-body > .static-switch::after { display: none; }
  .doc-body > .static-switch > :last-child:nth-child(odd) { grid-column: auto; }
  .doc-body > .doc-content { grid-column: 2; padding: 0 0 42px; }
  .footer-inner { padding: 14px 34px 16px; }
  .footer-brand,
  .footer-tag,
  .footer-cols,
  .footer-note,
  .footer-copyright { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
  .footer-cols { max-width: 600px; gap: 0 28px; }
  .footer-col a { min-height: 32px; }
}

@media (max-width: 340px) {
  .result-view-buttons { width: 100%; }
  .page-body > .shelf-tabs .tab-icon { display: none; }
}

/* ======================================================================
   v7 exact typography contract
   Source: ops/design/ の v7 モック（2026-08-20 確定版） embedded CSS.
   Keep this final: it removes pre-v7 type residue without changing geometry.
   ====================================================================== */
:root {
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic",
          "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--sans);
  font-feature-settings: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
}

/* shared chrome */
.brand-name {
  font: 800 var(--fs-md)/1.7 var(--serif);
  font-feature-settings: normal;
  letter-spacing: .02em;
}
.site-menu-head h2 { font: 700 var(--fs-xs)/1.3 var(--sans); letter-spacing: normal; }
.site-menu-close { font: 400 var(--fs-xl)/1 var(--sans); letter-spacing: normal; }
.site-menu-links h3 { font: 700 var(--fs-2xs)/1.7 var(--sans); letter-spacing: normal; }
.site-menu-link { font: 400 var(--fs-sm)/1.7 var(--sans); letter-spacing: normal; }
.site-menu-link-small { font: 400 var(--fs-xs)/1.7 var(--sans); }
.site-menu-link.is-current { font-weight: 700; }
.crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 400 var(--fs-2xs)/1.4 var(--sans);
  letter-spacing: normal;
}
.crumbs a { font: inherit; }
.crumbs i { font-style: normal; opacity: .5; }

/* shared search, headings, notes, controls and cards */
.home-search-tabs a,
.home-search-tabs span,
.search-page-tabs a,
.search-page-tabs span { font: 400 var(--fs-sm)/1.7 var(--sans); letter-spacing: normal; }
.home-search-tabs [aria-current="page"],
.search-page-tabs [aria-current="page"] { font-weight: 700; }
.hero-search,
.hero-search input { font: 400 var(--fs-md)/1.7 var(--sans); letter-spacing: normal; }
.section-title,
.section-head h2,
.search-shelf-guide > h2,
.work-screen .volume-section > h2,
.work-screen .similar-section > h2,
.work-screen .official-related-section > h2,
.work-screen .work-source > h2,
.shelf-unread-new > h2,
.shelf-transfer > h2 {
  font: 700 var(--fs-base)/1.7 var(--serif);
  font-feature-settings: normal;
  letter-spacing: normal;
}
.section-head h2 span,
.section-head .section-title span { font: 400 var(--fs-2xs)/1.7 var(--serif); letter-spacing: normal; }
.section-head > a,
.works-more a,
.more { font: 700 var(--fs-xs)/1.7 var(--sans); letter-spacing: normal; }
.section-note,
.note { font: 400 var(--fs-2xs)/1.6 var(--sans); letter-spacing: normal; }
.tile .tl { font: 400 var(--fs-2xs)/1.45 var(--sans); letter-spacing: normal; }
.gcard .gt,
.work-card .work-title { font: 700 var(--fs-xs)/1.45 var(--sans); letter-spacing: normal; }
.gcard em,
.work-card .work-authors { font: 400 var(--fs-3xs)/1.7 var(--sans); font-style: normal; letter-spacing: normal; }
.card-vol { font: 400 var(--fs-3xs)/1.35 var(--sans); letter-spacing: normal; }
.tags i,
.work-tags span,
.work-tags-toggle { font: 400 var(--fs-3xs)/1 var(--sans); font-style: normal; letter-spacing: normal; }
.work-card .work-note { font: 400 var(--fs-3xs)/1.35 var(--sans); letter-spacing: normal; }
.mt-name { font: 700 var(--fs-2xs)/1.35 var(--sans); letter-spacing: normal; }
.btn { font: 700 var(--fs-base)/1.7 var(--sans); letter-spacing: normal; }
.chip { font: 400 var(--fs-xs)/1.7 var(--sans); letter-spacing: normal; }
.chip[aria-pressed="true"],
.chip[aria-selected="true"],
.chip.is-selected { font-weight: 700; }
.chip-count,
.tab-count { font: 400 var(--fs-3xs)/1.7 var(--sans); }
.shelf-buttons .btn { font: 700 var(--fs-3xs)/1.7 var(--sans); }

/* HOME */
.home-search-copy {
  font: 700 var(--fs-md)/1.5 var(--serif);
  font-feature-settings: normal;
  letter-spacing: normal;
}
.home-search-copy b,
.home-search-copy strong { font-size: var(--fs-lg); font-weight: 800; }
.home-search-sub { font: 400 var(--fs-xs)/1.5 var(--sans); letter-spacing: normal; }
.home-search-sub b,
.home-search-sub strong { font-weight: 700; }
.home-shelf-cta .ct { font: 700 var(--fs-base)/1.7 var(--serif); letter-spacing: normal; }
.home-shelf-cta .btn { font: 700 var(--fs-base)/1.7 var(--sans); }
.home-shelf-cta .cs { font: 400 var(--fs-2xs)/1.7 var(--sans); }

/* SEARCH and TAGS */
.lead2,
.search-condition-count { font: 400 var(--fs-sm)/1.7 var(--sans); letter-spacing: normal; }
.lead2 b,
.lead2 strong,
.search-condition-count strong { font: 700 var(--fs-md)/1.7 var(--sans); }
.search-condition-group-label,
.lbl { font: 700 var(--fs-xs)/1.7 var(--sans); }
.lsub { font: 400 var(--fs-2xs)/1.7 var(--sans); }
.search-condition-accordion > summary { font: 700 var(--fs-sm)/1.7 var(--sans); }
.search-condition-category-count,
.search-condition-accordion > summary > .search-condition-category-count { font: 400 var(--fs-2xs)/1.7 var(--sans); }
.search-condition-accordion > summary::after { font: 400 var(--fs-sm)/1.7 var(--sans); font-style: normal; }
.search-condition-status { font: 400 var(--fs-2xs)/1.7 var(--sans); }
.search-condition-status span { font: 700 var(--fs-md)/1.7 var(--sans); }
.search-mood-link { font: 700 var(--fs-2xs)/1.35 var(--sans); letter-spacing: normal; }
.search-shelf-summary { font: 400 var(--fs-xs)/1.65 var(--sans); }
.tag-cat-title { font: 700 var(--fs-sm)/1.7 var(--serif); letter-spacing: normal; }
.tag-cat-count { font: 400 var(--fs-2xs)/1.7 var(--serif); letter-spacing: normal; }
.axis-more { font: 500 var(--fs-xs)/1.4 var(--sans); letter-spacing: normal; }

/* RESULT and shared result toolbar/dialog */
.page-count { font: 400 var(--fs-sm)/1.7 var(--sans); letter-spacing: normal; }
.page-count { color: var(--v7-ink); }
.page-count strong { font: 700 var(--fs-lg)/1.7 var(--sans); }
.result-controls > [data-search-condition-open],
.new-list-controls > [data-new-filter-open] { font: 700 var(--fs-xs)/1.3 var(--sans); }
.search-condition-dialog-head h2,
.new-filter-dialog .search-condition-dialog-head h2 { font: 700 var(--fs-lg)/1.35 var(--serif); letter-spacing: normal; }
.search-condition-dialog > form > p,
.new-filter-dialog > form > p { font: 400 var(--fs-xs)/1.7 var(--sans); }
.search-condition-dialog-head [data-search-condition-close],
.search-condition-dialog-head [data-new-filter-close] { font: 400 var(--fs-xl)/1 var(--sans); }
.search-condition-group legend,
.search-condition-tags .chip,
.new-filter-tags .chip { font: 700 var(--fs-xs)/1.3 var(--sans); }
.search-condition-actions > *,
.new-filter-actions > * { font: 400 var(--fs-xs)/1.3 var(--sans); }
.search-condition-actions [data-search-condition-reset],
.new-filter-actions [data-new-filter-reset] { font-weight: 600; }
.search-condition-actions [data-search-condition-apply],
.new-filter-actions [data-new-filter-apply] { font-weight: 800; }
.result-control-label { font: 700 var(--fs-3xs)/1.7 var(--sans); }
.result-sort-row select { font: 400 var(--fs-2xs)/1.3 var(--sans); }
.result-action-row label {
  white-space: nowrap;
  font: 400 var(--fs-xs)/1.2 var(--sans);
}
.result-action-row [data-result-read-count] {
  white-space: nowrap;
  font: 400 var(--fs-2xs)/1 var(--sans);
}
.result-bulk-bar [data-result-selected-count] { font: 700 var(--fs-xs)/1.7 var(--sans); }
.result-bulk-bar button { font: 700 var(--fs-3xs)/1.7 var(--sans); }
.result-grid[data-result-view="list"] .gt,
.result-grid[data-result-view="list"] .work-title { font: 700 var(--fs-sm)/1.45 var(--sans); }
.result-grid[data-result-view="list"] em,
.result-grid[data-result-view="list"] .work-authors { font: 400 var(--fs-3xs)/1.35 var(--sans); font-style: normal; }
.result-grid[data-result-view="list"] .work-note { font: 400 var(--fs-2xs)/1.55 var(--sans); }
.result-grid[data-result-view="4"] .gt,
.result-grid[data-result-view="4"] .work-title { font-size: var(--fs-3xs); }

/* WORK */
.work-screen .dialog-origin { font: 400 var(--fs-2xs)/1.7 var(--sans); letter-spacing: normal; }
.work-screen .dialog-title { font: 800 var(--fs-md)/1.45 var(--serif); letter-spacing: normal; }
.work-screen .dialog-meta { font: 400 var(--fs-2xs)/1.7 var(--sans); letter-spacing: normal; }
.work-screen .dialog-tags .chip { font: 400 var(--fs-3xs)/1 var(--sans); }
.work-screen .role-label { font: 700 var(--fs-xs)/1.7 var(--sans); }
.work-screen .role-chips .chip { font: 400 var(--fs-xs)/1.7 var(--sans); }
.work-screen .work-summary > .shelf-buttons .btn { font: 700 var(--fs-xs)/1.7 var(--sans); }
.read-progress-label,
.reading-progress-head { font: 400 var(--fs-xs)/1.7 var(--sans); }
.read-progress-label strong,
.reading-progress-head output { font: 800 var(--fs-lg)/1.2 var(--sans); }
.read-progress-controls button,
.reading-progress-actions button { font: 700 var(--fs-xs)/1.2 var(--sans); }
.read-progress { font: 700 var(--fs-2xs)/1.3 var(--sans); }
.dialog-blurb,
.blurb { font: 400 var(--fs-xs)/1.85 var(--sans); letter-spacing: normal; }
.work-screen .work-source p {
  margin: 9px 15px 0;
  color: var(--v7-dim);
  font: 400 var(--fs-2xs)/1.6 var(--sans);
}
.work-screen .work-shelf-guide {
  margin: 24px 15px 0;
}
.work-screen .work-shelf-guide .btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.ad-pr { font: 700 var(--fs-3xs)/1 var(--sans); letter-spacing: .04em; }
.volume-choice { font-family: var(--sans); font-feature-settings: normal; letter-spacing: normal; }
.volume-choice strong,
.volume-choice b { font: 700 var(--fs-sm)/1.7 var(--sans); }
.volume-choice .volume-copy small { font: 400 var(--fs-3xs)/1.35 var(--sans); }
.volume-source { font: 500 var(--fs-3xs)/1.35 var(--sans); }
.volume-cover-unavailable small { font: 400 var(--fs-3xs)/1.2 var(--sans); }
.volume-trial-link,
.verified-trial-link { font: 700 var(--fs-2xs)/1.2 var(--sans); }

/* SHELF */
.shelf-tabs .chip-tab { font: 400 var(--fs-xs)/1.7 var(--sans); letter-spacing: normal; }
.shelf-tabs .chip-tab[aria-pressed="true"],
.shelf-tabs .chip-tab[aria-selected="true"] { font-weight: 700; }
.shelf-unread-summary p,
.mine { font: 400 var(--fs-xs)/1.7 var(--sans); }
.shelf-unread-summary strong,
.mine b,
.mine strong { font: 700 var(--fs-md)/1.7 var(--sans); }
.shelf-tools label { font: 700 var(--fs-2xs)/1.7 var(--sans); }
.shelf-tools select { font: 400 var(--fs-xs)/1.7 var(--sans); }
.shelf-empty h2 { font: 700 var(--fs-md)/1.45 var(--serif); }
.shelf-empty > p { font: 400 var(--fs-xs)/1.75 var(--sans); }
.shelf-empty h3 { font: 700 var(--fs-md)/1.4 var(--serif); }
.shelf-empty-actions .btn { font: 700 var(--fs-sm)/1.7 var(--sans); }
.shelf-transfer > p { font: 400 var(--fs-2xs)/1.6 var(--sans); }
.shelf-share-action { font: 700 var(--fs-xs)/1.7 var(--sans); }
.shelf-share-url { font: 400 var(--fs-2xs)/1.4 var(--sans); }
.shelf-share-status { font: 400 var(--fs-2xs)/1.5 var(--sans); }

/* NEW */
.new-list-info,
.new-list-info p { font: 400 var(--fs-xs)/1.65 var(--sans); }
.new-list-info b,
.new-list-info .new-list-count { font: 700 var(--fs-2xs)/1.4 var(--sans); }
.new-list-controls > .new-period-control::before,
.new-list-controls .result-control-label { font: 700 var(--fs-3xs)/1 var(--sans); }
.new-period-control button { font: 700 var(--fs-2xs)/1.2 var(--sans); }
.new-filter-count { font: 400 var(--fs-2xs)/1.7 var(--sans); }
.new-empty h2 { font: 700 var(--fs-md)/1.45 var(--serif); }
.new-empty > p { font: 400 var(--fs-xs)/1.75 var(--sans); }
.new-page-empty .empty-actions > * { font: 700 var(--fs-lg)/1.2 var(--sans); }
.new-empty-moods h3 { font: 700 var(--fs-md)/1.4 var(--serif); }
.new-priority-message { font: 400 var(--fs-xs)/1.65 var(--sans); }
.new-release-meta,
.new-priority-card-release { font: 700 var(--fs-2xs)/1.3 var(--sans); }

/* STATIC */
.static-switch a,
.static-switch button { font: 400 var(--fs-xs)/1.35 var(--sans); letter-spacing: normal; }
.static-switch [aria-current="page"],
.static-switch [aria-selected="true"] { font-weight: 700; }
.static-page h1,
.doc-body h1 { font: 700 var(--fs-xl)/1.35 var(--serif); letter-spacing: normal; }
.static-page h2,
.doc-body h2 { font: 700 var(--fs-lg)/1.5 var(--serif); letter-spacing: normal; }
.static-page p,
.static-page li,
.doc-body p,
.doc-body li { font: 400 var(--fs-base)/1.85 var(--sans); letter-spacing: normal; }
.static-page .doc-note,
.static-page .doc-updated,
.static-page .field-note,
.static-page .form-policy,
.doc-body .doc-note,
.doc-body .doc-updated,
.doc-body .field-note,
.doc-body .form-policy { font-size: var(--fs-xs); }
.static-page code,
.doc-body code { font: 400 var(--fs-xs)/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: normal; }
.contact-form legend,
.contact-form label { font: 700 var(--fs-base)/1.7 var(--sans); }
.contact-form .radio-row,
.contact-form .check-row { font-weight: 400; }
.contact-form input:not([type="radio"]):not([type="checkbox"]),
.contact-form textarea { font: 400 var(--fs-md)/1.5 var(--sans); letter-spacing: normal; }
.contact-form .form-submit { font: 700 var(--fs-base)/1.7 var(--sans); }

/* footer */
.footer-name { font: 800 var(--fs-base)/1.7 var(--serif); font-feature-settings: normal; letter-spacing: normal; }
.footer-tag { font: 400 var(--fs-2xs)/1.3 var(--sans); letter-spacing: normal; }
.footer-col h2 { font: 700 var(--fs-2xs)/1.2 var(--sans); letter-spacing: normal; }
.footer-col a,
.footer-link { font: 400 var(--fs-2xs)/1.25 var(--sans); letter-spacing: normal; }
.footer-note { font: 400 var(--fs-3xs)/1.4 var(--sans); letter-spacing: normal; }
.footer-copyright { font: 400 var(--fs-3xs)/1.3 var(--sans); letter-spacing: normal; }

/* The mock changes type at desktop in exactly these three roles. */
@media (min-width: 768px) {
  .section-title,
  .section-head h2,
  .search-shelf-guide > h2,
  .work-screen .volume-section > h2,
  .work-screen .similar-section > h2,
  .work-screen .official-related-section > h2,
  .work-screen .work-source > h2,
  .shelf-unread-new > h2,
  .shelf-transfer > h2 { font-size: var(--fs-lg); }
  .section-note,
  .note { font-size: var(--fs-xs); }
  .work-screen .work-source p { font-size: var(--fs-xs); }
}
/* end v7 exact typography contract */

/* ======================================================================
   RESULT exact geometry
   ----------------------------------------------------------------------
   正本モックの4段階を実ページの同一DOMで再現する。1列だけは作品リンクと
   本棚操作を分離し、2列/4列/一覧では同じ情報を密度に合わせて畳む。
   ====================================================================== */
.page-body.result-screen { padding-top: 0; }
.result-screen > .crumbs {
  min-height: 40px;
  margin: 0;
  padding: 4px 15px;
  border: 0;
}
.result-screen > .crumbs a,
.result-screen > .crumbs a:hover,
.result-screen > .crumbs a:focus-visible { text-decoration: none; }
.result-screen .result-head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 器の余白を打ち消して端まで伸ばす。**-15px の決め打ちをやめる。**
     器（.result-controls）の左右余白は幅によって変わり、実測で
     390px のとき 12px しかなかった。-15px だと左右3pxずつ行き過ぎ、
     画面が **396px** になって横スクロールが出ていた（320pxでも同じ）。
     50% と 50dvw の差を使えば、器の余白がいくつでも過不足なく端に届く
     （本棚誘導で既に使っている手）。 */
  /* 器の余白を打ち消して端まで伸ばす。**-15px の決め打ちをやめる。**
     器（.result-controls）の左右余白は幅で変わり、実測で390pxのとき12px。
     -15px だと左右3pxずつ行き過ぎ、画面が396pxになって横スクロールが出ていた。

     **`width: 100dvw` は付けない。**一度付けたところ、768px以上で
     この要素が収まっている器の桁が崩れ、**結果カードが見出しの上に重なって
     「条件を追加・変更」が押せなくなった**（実ブラウザ検査で発覚）。
     負のマージンだけで幅は自然に画面いっぱいになる
     （器の幅 + 余白×2 = 画面幅）ので、width は要らない。 */
  /* 器の余白を打ち消して端まで伸ばす。**-15px の決め打ちをやめる。**
     実測した器の姿:
       320/390px … `.result-controls` は全幅で、外側に 12px の余白
       768px以上 … `.result-controls` は **320pxの桁**で、内側に 24px の余白
     -15px はどちらにも合っておらず、スマホでは左右3pxずつ行き過ぎて
     画面が396pxになり横スクロールが出ていた。

     **`calc(50% - 50dvw)` の全幅化も使えない。**器が画面の中央に無い
     768px以上では計算が合わず、見出しが幅319pxに縮んだ（実測）。
     さらに `width: 100dvw` を付けた版では桁が崩れ、結果カードが
     見出しの上に重なって「条件を追加・変更」が押せなくなった。
     **式で当てようとせず、実測した余白をそのまま打ち消す。** */
  margin-inline: -12px;
  padding: 13px 12px 32px;
  background: var(--v7-page);
}
@media (min-width: 768px) {
  /* 桁の内側余白（実測 24px）ぶんだけ広げる。画面端までは伸ばさない
     ——ここは全幅の帯ではなく、320pxの桁の中の見出しなので */
  .result-screen .result-head { margin-inline: -24px; padding-inline: 24px; }
}
.result-screen .result-head::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 32px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--v7-page));
}
.result-screen .result-head > * { position: relative; z-index: 1; }
.result-screen .result-condition-open {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.result-screen .result-grid { align-items: stretch; }
.result-screen .result-gcard.work-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  box-shadow: none;
  transform: none;
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.result-screen .result-gcard.work-card:hover { transform: none; box-shadow: none; }
.result-screen .result-gcard.work-card.picked {
  background: color-mix(in srgb, var(--v7-lime) 26%, var(--v7-card));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--v7-lime) 26%, transparent);
}
.result-screen .result-gcard.work-card.picked .result-card-link { background: transparent; }
.result-screen .result-card-link {
  min-width: 0;
  min-height: 154px;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}
.result-screen .result-card-link:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--v7-ink);
  outline-offset: -3px;
}
.result-screen .result-gcard .gt { margin-top: 0; }
.result-screen .result-gcard .tags {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.result-screen .result-card-actions { display: none; }
.result-screen .result-grid[data-result-view="1"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.result-screen .result-grid[data-result-view="1"] > .result-gcard {
  width: min(100%, 800px);
  min-height: 196px;
  justify-self: center;
  padding: 12px;
}
.result-screen .result-grid[data-result-view="1"] .result-card-link {
  min-height: 0;
  padding: 0;
}
.result-screen .result-grid[data-result-view="1"] .result-gcard .gt {
  min-height: calc(1.45em * 2);
  display: flex;
  align-items: center;
  font: 700 var(--fs-xs)/1.45 var(--sans);
  -webkit-line-clamp: unset;
}
.result-screen .result-grid[data-result-view="1"] .result-gcard .tags {
  overflow-x: auto;
  scrollbar-width: none;
}
.result-screen .result-grid[data-result-view="1"] .result-gcard .tags::-webkit-scrollbar { display: none; }
.result-screen .result-grid[data-result-view="1"] .result-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: auto;
  padding-top: 7px;
}
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button {
  /* **flex: none だと縮まない。**親は display:flex の横並びなので、
     width:100% と合わせて「カード幅のボタンを2つ横に並べる」ことになり、
     2つ目がカードから112〜174pxはみ出していた（overflow:hidden で
     切れて見えていた／owner再指摘 2026-08-22）。
     等分して縮む `1 1 0` にする。min-width:0 は既にあるので効く。 */
  width: auto;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 0;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--v7-radius);
  border: 1px solid #dde0e4;
  background: #f2f3f5;
  color: #2a2e35;
  font: 700 var(--fs-3xs)/1.7 var(--sans);
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button:not([aria-pressed="true"]):hover,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button:not([aria-pressed="true"]):focus-visible {
  border-color: #dde0e4;
  background: #f2f3f5;
  color: #2a2e35;
}
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button .mark-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 18px;
  overflow: visible;
}
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button[aria-pressed="true"],
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button[aria-pressed="true"]:hover,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button[aria-pressed="true"]:focus-visible {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-ink);
}
.result-screen .result-grid[data-result-view="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 11px;
}
.result-screen .result-grid[data-result-view="2"] .tags i:nth-child(n + 3) { display: none; }
.result-screen .result-grid[data-result-view="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 7px;
}
.result-screen .result-grid[data-result-view="4"] .result-card-link {
  min-height: 118px;
  padding: 8px;
}
.result-screen .result-grid[data-result-view="4"] .grid-meta,
.result-screen .result-grid[data-result-view="4"] .tags { display: none; }
.result-screen .result-grid[data-result-view="list"] {
  grid-template-columns: repeat(auto-fit, minmax(44px, 100px));
  justify-content: center;
  gap: 10px 3px;
  width: 100%;
  max-width: 924px;
  margin-inline: auto;
}
.result-screen .result-grid[data-result-view="list"] .result-card-link {
  min-height: 88px;
  padding: 6px;
}
.result-screen .result-grid[data-result-view="list"] .result-gcard .gt {
  min-height: calc(1.45em * 2);
  font-size: var(--fs-2xs);
}
.result-screen .result-grid[data-result-view="list"] .grid-meta,
.result-screen .result-grid[data-result-view="list"] .tags { display: none; }

/* 上へ戻る導線は本文とfooterの境界へ重ね、追加の空白を作らない。 */
.page-top-slot {
  position: relative;
  z-index: 2;
  width: min(100%, var(--v7-content));
  height: 0;
  margin: 0 auto;
}
.page-top-slot .page-top-link { bottom: 8px; }

/* 可視パンくずは本文を読み終えた位置へ。階層リンクとJSON-LDは維持する。 */
#main > .footer-breadcrumb,
.fixed-page-body > .footer-breadcrumb {
  grid-column: 1 / -1;
  width: min(100%, var(--v7-content));
  min-height: 44px;
  margin: 20px auto 0;
  padding: 4px 59px 4px 15px;
  overflow-x: auto;
  color: var(--v7-dim);
  background: var(--v7-page);
  border: 0;
  border-top: 1px solid var(--v7-line);
  white-space: nowrap;
  scrollbar-width: none;
}
#main > .footer-breadcrumb::-webkit-scrollbar,
.fixed-page-body > .footer-breadcrumb::-webkit-scrollbar { display: none; }
#main > .footer-breadcrumb a,
#main > .footer-breadcrumb a:hover,
#main > .footer-breadcrumb a:focus-visible,
.fixed-page-body > .footer-breadcrumb a,
.fixed-page-body > .footer-breadcrumb a:hover,
.fixed-page-body > .footer-breadcrumb a:focus-visible {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

/* 44pxのパンくず行／各ページ既存の下端余白へ重ね、カード直後を避ける。 */
.page-top-slot .page-top-link { bottom: 0; }

@media (min-width: 768px) {
  .result-screen > .crumbs { padding-inline: 24px; }
  .result-screen .result-head {
    margin-inline: -24px;
    padding-inline: 24px;
  }
  .result-screen .result-grid[data-result-view="1"] > .result-gcard { min-height: 210px; }
  .result-screen .result-grid[data-result-view="2"] {
    grid-template-columns: repeat(2, minmax(0, 220px));
    justify-content: center;
  }
  .result-screen .result-grid[data-result-view="4"] {
    grid-template-columns: repeat(4, minmax(0, 180px));
    justify-content: center;
  }
}

/* ======================================================================
   SHELF exact geometry
   ----------------------------------------------------------------------
   本棚も結果面と同じ4密度を使う。ただし件数より多い空トラックは作らず、
   PCの3状態タブは横一列のまま、操作面は白い別カードにしない。
   ====================================================================== */
.shelf-screen .shelf-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
}
.page-body.shelf-screen { padding-inline: 0; }
.shelf-screen .shelf-controls,
.shelf-screen .shelf-controls > .result-toolbar[data-result-grid="shelfGrid"] {
  color: var(--v7-ink);
  background: transparent;
}
.shelf-screen .shelf-controls {
  position: relative;
  isolation: isolate;
  background-color: var(--v7-page);
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgba(22,24,28,.06) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgba(22,24,28,.06) 23px 24px);
}
.shelf-screen .shelf-controls::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(250 250 250 / 0%), var(--v7-page));
}
.shelf-screen .shelf-controls > * { position: relative; z-index: 1; }
.shelf-screen .shelf-content { background: var(--v7-page); }
.shelf-screen .new-empty.shelf-empty { text-align: left; }
.shelf-screen .new-empty .empty-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shelf-screen .new-empty .empty-actions > :is(a, button) {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.shelf-screen .new-empty .empty-actions > .btn:not(.btn-outline) {
  color: #111;
  background: var(--v7-lime);
  border: 1px solid var(--v7-lime-border);
}
.shelf-screen .new-empty-moods .search-mood-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.shelf-screen #shelfGrid.shelf-grid {
  --shelf-columns: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0 15px;
  align-items: stretch;
  justify-content: start;
}
.shelf-screen #shelfGrid.shelf-grid > .gcard {
  position: relative;
  min-width: 0;
  min-height: 154px;
  padding: 10px;
  overflow: hidden;
  color: inherit;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  box-shadow: none;
  transform: none;
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.shelf-screen [data-shelf-unread-filter-wrap][hidden] { display: none; }
.shelf-screen .shelf-unread-dot {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  pointer-events: none;
  background: var(--v7-lime);
  border: 0;
  border-radius: 50%;
}
.shelf-screen .shelf-filter-empty {
  margin: 16px 15px 0;
  padding: 14px;
  color: var(--v7-dim);
  text-align: center;
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.shelf-screen .shelf-filter-empty[hidden] { display: none; }
.shelf-screen #shelfGrid.shelf-grid > .gcard:hover { transform: none; box-shadow: none; }
.shelf-screen #shelfGrid.shelf-grid > .gcard > .cv {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  display: block;
  object-fit: cover;
  border-radius: calc(var(--v7-radius) - 2px);
}
.shelf-screen #shelfGrid.shelf-grid .gt { margin-top: 7px; }
.shelf-screen #shelfGrid.shelf-grid .tags {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.shelf-screen #shelfGrid[data-result-view="1"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.shelf-screen #shelfGrid[data-result-view="1"] > .gcard {
  width: min(100%, 800px);
  min-height: 196px;
  justify-self: center;
}
.shelf-screen #shelfGrid[data-result-view="1"] > .gcard:not(.no-cover) {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 13px;
  align-content: start;
}
.shelf-screen #shelfGrid[data-result-view="1"] > .gcard:not(.no-cover) > .cv {
  grid-column: 1;
  grid-row: 1 / -1;
}
.shelf-screen #shelfGrid[data-result-view="1"] > .gcard:not(.no-cover) > :not(.cv) {
  grid-column: 2;
}
.shelf-screen #shelfGrid[data-result-view="1"] .gt {
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-top: 0;
  font-size: var(--fs-sm);
  -webkit-line-clamp: unset;
}
.shelf-screen #shelfGrid[data-result-view="2"] {
  grid-template-columns: repeat(var(--shelf-columns), minmax(0, 220px));
  gap: 15px 11px;
}
.shelf-screen #shelfGrid[data-result-view="4"] {
  grid-template-columns: repeat(var(--shelf-columns), minmax(0, 180px));
  gap: 10px 7px;
}
.shelf-screen #shelfGrid[data-result-view="4"] > .gcard { min-height: 132px; padding: 8px; }
.shelf-screen #shelfGrid[data-result-view="4"] .gt { font-size: var(--fs-2xs); }
.shelf-screen #shelfGrid[data-result-view="4"] .grid-meta,
.shelf-screen #shelfGrid[data-result-view="4"] .tags { display: none; }
.shelf-screen #shelfGrid[data-result-view="list"] {
  width: 100%;
  max-width: 924px;
  grid-template-columns: repeat(auto-fit, minmax(44px, 100px));
  justify-content: start;
  gap: 10px 3px;
}
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard {
  min-height: 88px;
  display: flex;
  padding: 6px;
}
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .cv { border-radius: var(--v7-radius); }
.shelf-screen #shelfGrid[data-result-view="list"] .gt {
  min-height: calc(1.45em * 2);
  font-size: var(--fs-2xs);
}
.shelf-screen #shelfGrid[data-result-view="list"] .grid-meta,
.shelf-screen #shelfGrid[data-result-view="list"] .tags { display: none; }
.shelf-screen .shelf-unread-new,
.shelf-screen .shelf-transfer { margin-top: 24px; padding-inline: 15px; }
.shelf-screen .shelf-transfer > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shelf-screen .shelf-transfer > h2 .row-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-right: 0;
}
.shelf-screen .shelf-unread-summary {
  display: grid;
  gap: 10px;
}
.shelf-screen .shelf-unread-summary p {
  width: 100%;
  margin: 0;
  padding: 13px 14px;
  color: var(--v7-dim);
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
}
.shelf-screen .shelf-unread-summary .btn { width: 100%; }
.shelf-screen .shelf-unread-new .btn-outline,
.shelf-screen .shelf-transfer .btn-outline,
.shelf-screen .new-empty .btn-outline {
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
}

@media (max-width: 767px) {
  .shelf-screen .new-empty .empty-actions { grid-template-columns: minmax(0, 1fr); }
  .shelf-screen #shelfGrid[data-result-view="2"],
  .shelf-screen #shelfGrid[data-result-view="4"] {
    width: 100%;
    grid-template-columns: repeat(var(--shelf-columns), minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .shelf-screen .new-empty-moods .search-mood-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shelf-screen #shelfGrid.shelf-grid { padding-inline: 24px; }
  .shelf-screen .shelf-unread-new,
  .shelf-screen .shelf-transfer { padding-inline: 24px; }
  .shelf-screen #shelfGrid[data-result-view="1"] > .gcard {
    min-height: 210px;
    justify-self: start;
  }
  .shelf-screen #shelfGrid[data-result-view="1"] > .gcard:not(.no-cover) {
    grid-template-columns: 140px minmax(0, 1fr);
    column-gap: 14px;
  }
}

/* ======================================================================
   TAGS exact geometry
   ----------------------------------------------------------------------
   crumbの外側余白とタグ本文を混ぜず、モックのpad・44px chip・5px軸間隔を
   実ページでも同じDOM責務にする。リンク自体はcanonicalのまま保つ。
   ====================================================================== */
.page-body.tags-screen {
  width: min(100%, 1120px);
  padding: 0;
}
.tags-screen .tags-pad { padding: 14px 15px 20px; }
.tags-screen .lead2 { margin: 0 0 14px; }
.tags-screen .lead-stat { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.tags-screen .axis-flow { gap: 5px; }
.tags-screen .tag-chips > .chip,
.tags-screen .axis-more-items > .chip {
  position: relative;
  isolation: isolate;
  gap: 0;
  min-height: 44px;
  padding: 7px 12px;
  color: var(--v7-ink);
  background: transparent !important;
  border-color: transparent !important;
  border-radius: var(--radius-pill);
  font: 400 var(--fs-xs)/1.7 var(--sans);
  letter-spacing: normal;
  text-decoration: none;
}
.tags-screen .tag-chips > .chip::before,
.tags-screen .axis-more-items > .chip::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 0;
  background: var(--v7-chip);
  border: 1px solid var(--v7-line);
  border-radius: inherit;
}
.tags-screen .chip-count {
  margin-left: 5px;
  color: var(--v7-dim);
  opacity: .8;
  font: 400 var(--fs-3xs)/1 var(--sans);
  letter-spacing: normal;
}

/* ======================================================================
   STATIC exact geometry
   ----------------------------------------------------------------------
   mainは外側余白を持たず、crumb / switch / articleがそれぞれモックと
   同じ面・余白を所有する。旧ページ固有のnote枠や更新罫線は解除する。
   ====================================================================== */
.fixed-page-body {
  width: min(100%, 780px);
  max-width: none;
  padding: 0;
  color: var(--v7-ink);
  background: var(--v7-page);
}
/* 固定5ページの本文末尾はページ面のままパンくずへ接続する。
   旧doc-bodyの濃色フェードを重ねると、パンくず上に灰色の帯が出る。 */
.fixed-page-body::after { display: none; }
.fixed-page-body > .crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 15px;
  overflow-x: auto;
  color: var(--v7-dim);
  background: var(--v7-page);
  border-bottom: 1px solid var(--v7-line);
  white-space: nowrap;
  scrollbar-width: none;
  font: 400 var(--fs-2xs)/1.4 var(--sans);
  letter-spacing: normal;
}
.fixed-page-body > .crumbs::-webkit-scrollbar { display: none; }
.fixed-page-body > .crumbs a {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  margin-block: -8px;
  color: var(--v7-dim);
  text-decoration: none;
}
.fixed-page-body > .static-switch {
  margin: 0;
  padding: 12px 15px 32px;
  background-color: var(--v7-page);
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgb(22 24 28 / 6%) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgb(22 24 28 / 6%) 23px 24px);
}
.fixed-page-body > .static-page {
  min-width: 0;
  padding: 24px 20px 38px;
  overflow-wrap: anywhere;
  color: var(--v7-ink);
  background: var(--v7-page);
  font: 400 var(--fs-base)/1.85 var(--sans);
  letter-spacing: normal;
}
.fixed-page-body > .static-page h1 {
  margin: 0 0 18px;
  color: var(--v7-ink);
  font: 700 var(--fs-xl)/1.35 var(--serif);
  letter-spacing: normal;
}
.fixed-page-body > .static-page h2 {
  margin: 27px 0 10px;
  padding-bottom: 7px;
  color: var(--v7-ink);
  border-bottom: 2px solid var(--v7-lime);
  font: 700 var(--fs-lg)/1.5 var(--serif);
  letter-spacing: normal;
}
.fixed-page-body > .static-page p,
.fixed-page-body > .static-page li {
  font: 400 var(--fs-base)/1.85 var(--sans);
  letter-spacing: normal;
}
.fixed-page-body > .static-page p { margin: 0 0 14px; }
.fixed-page-body > .static-page ul,
.fixed-page-body > .static-page ol { margin: 0 0 18px; padding-left: 1.45em; }
.fixed-page-body > .static-page li + li { margin-top: 8px; }
.fixed-page-body > .static-page a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--v7-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--v7-lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.fixed-page-body > .static-page .doc-note,
.fixed-page-body > .static-page .doc-updated {
  padding: 0;
  color: var(--v7-dim);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: 400 var(--fs-xs)/1.85 var(--sans);
  letter-spacing: normal;
}
.fixed-page-body > .static-page .doc-updated { margin-top: 24px; }
.fixed-page-body > .static-page .field-note,
.fixed-page-body > .static-page .form-policy {
  color: var(--v7-dim);
  font: 400 var(--fs-xs)/1.85 var(--sans);
  letter-spacing: normal;
}
.fixed-page-body > .static-page code {
  font: 400 var(--fs-xs)/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: normal;
}

/* 条件タグはリンクでもボタン状のラベルとして扱い、全状態で下線を出さない。 */
.search-condition-surface .search-condition-tags > a.pill,
.search-condition-surface .search-condition-tags > a.pill:visited,
.search-condition-surface .search-condition-tags > a.pill:hover,
.search-condition-surface .search-condition-tags > a.pill:focus-visible,
.search-condition-surface .search-condition-tags > a.pill:active,
.search-condition-surface .search-condition-tags > a.pill u {
  text-decoration: none;
}

/* 固定ページのradio / checkboxもモダングレースケール×ライムへ統一する。 */
.fixed-page-body input[type="radio"],
.fixed-page-body input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  margin: 0;
  color: #111;
  background: var(--v7-card);
  border: 1.5px solid var(--v7-dim);
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}
.fixed-page-body input[type="checkbox"] { border-radius: var(--v7-radius); }
.fixed-page-body input[type="radio"] { border-radius: 50%; }
.fixed-page-body input[type="checkbox"]::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.55);
  transition: opacity 280ms ease, transform 280ms ease;
}
.fixed-page-body input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--v7-ink);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.45);
  transition: opacity 280ms ease, transform 280ms ease;
}
.fixed-page-body input[type="radio"]:checked,
.fixed-page-body input[type="checkbox"]:checked {
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
}
.fixed-page-body input[type="radio"]:checked::after,
.fixed-page-body input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.fixed-page-body input[type="radio"]:checked::after { transform: scale(1); }
.fixed-page-body input[type="radio"]:focus-visible,
.fixed-page-body input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}

/* 本棚状態のON/OFFは全画面で同じ速度・同じプロパティを補間する。 */
[data-shelf-btn],
.shelf-screen .shelf-tabs .chip-tab {
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

/* 複数選択はチェック記号だけでなくカード全面を薄ライムにする。 */
.result-screen .result-gcard.work-card.picked,
.shelf-screen #shelfGrid.shelf-grid > .gcard.picked {
  background: color-mix(in srgb, var(--v7-lime) 20%, var(--v7-card));
  box-shadow: none;
}

/* ホバーだけでトンマナの色は変えない。選択状態の色はaria/state側で維持する。 */
@media (hover: hover) {
  .btn-blue:hover,
  .btn-primary:hover,
  .btn-yellow:hover,
  .home-shelf-cta .btn:hover {
    color: #111;
    background: var(--v7-lime);
    border-color: var(--v7-lime-border);
  }
  .site-header-action:hover,
  .site-menu-toggle:hover { color: #f7f8f8; background: transparent; }
  .site-menu-link:not(.is-current):hover { background: transparent; }
}

@media (min-width: 768px) {
  .tags-screen .tags-pad { padding: 24px; }

  .fixed-page-body {
    width: min(100%, 1000px);
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
    gap: 0 30px;
  }
  .fixed-page-body > .crumbs { grid-column: 1 / -1; }
  .fixed-page-body > .static-switch {
    grid-column: 1;
    position: sticky;
    top: 84px;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 24px 0 0 24px;
    padding: 0;
    background: transparent;
  }
  .fixed-page-body > .static-switch::after { display: none; }
  .fixed-page-body > .static-switch > :last-child:nth-child(odd) { grid-column: auto; }
  .fixed-page-body > .static-page {
    grid-column: 2;
    padding: 24px 24px 42px 0;
  }
}

/* ======================================================================
   B1 secondary responsive parity
   ----------------------------------------------------------------------
   PC本棚の320px操作列、作品詳細の右レール、新刊の可変幅グリッド、
   条件dialogの可読幅を同じbreakpoint契約へ揃える。
   ====================================================================== */
@media (max-width: 767px) {
  .shelf-screen .shelf-controls { padding: 10px 15px 16px; }
  .shelf-screen .shelf-controls > .result-toolbar[data-result-grid="shelfGrid"] {
    width: 100%;
    gap: 6px;
  }
  .shelf-screen .shelf-controls .result-view-row {
    display: block;
    align-items: center;
  }
  .shelf-screen .shelf-controls .result-view-buttons {
    width: auto;
    grid-template-columns: repeat(4, 44px);
  }
  .shelf-screen .shelf-controls .result-action-row { min-height: 44px; }
}

@media (max-width: 1023px) {
  .work-screen .work-main { display: block; }
}

@media (min-width: 768px) {
  .work-screen .work-layout { padding-inline: 40px; }
  .work-screen .work-layout > .crumb { padding-inline: 0; }
  .work-screen .work-return-row { padding-inline: 0; }
  .work-screen .similar-section .rail,
  .work-screen .official-related-section .rail { padding-inline: 0; }
  .result-panes > .result-controls > .result-toolbar {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sort sort" "action view" "bulk bulk";
    align-items: center;
    gap: 8px;
  }
  .result-panes > .result-controls .result-sort-row label {
    display: grid;
    gap: 5px;
  }
  .result-panes > .result-controls .result-sort-row select {
    width: 100%;
    min-width: 0;
  }
  .result-panes > .result-controls .result-view-row {
    display: block;
    align-items: center;
    justify-self: end;
  }
  .result-panes > .result-controls .result-view-buttons {
    width: auto;
    grid-template-columns: repeat(4, 44px);
  }
  .shelf-screen > .shelf-panes {
    grid-template-columns: 320px minmax(0, 1fr);
  }
  .shelf-screen .shelf-controls > .result-toolbar[data-result-grid="shelfGrid"] {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sort sort" "action view" "bulk bulk";
    align-items: center;
    gap: 8px;
  }
  .shelf-screen .shelf-controls .result-sort-row label {
    display: grid;
    gap: 5px;
  }
  .shelf-screen .shelf-controls .result-sort-row select {
    width: 100%;
    min-width: 0;
  }
  .shelf-screen .shelf-controls .result-view-row {
    display: block;
  }
  .shelf-screen .shelf-controls .result-view-buttons {
    width: auto;
    grid-template-columns: repeat(4, 44px);
  }
  .shelf-screen .shelf-tabs { gap: 4px; }
  .shelf-screen .shelf-tabs .chip-tab {
    gap: 2px;
    padding-inline: 4px;
    white-space: nowrap;
    font-size: var(--fs-2xs);
  }
  .shelf-screen .shelf-tabs .tab-icon { width: 18px; height: 18px; }

  .new-screen #newResultsGrid {
    width: 100%;
    max-width: none;
    padding-inline: 0;
  }
  .new-screen .new-list-info { margin-inline: 0; }
  .new-screen .result-grid[data-result-view="1"] {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
  .new-screen .result-grid[data-result-view="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }
  .new-screen .result-grid[data-result-view="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
  }
  .new-screen .result-grid[data-result-view="list"] {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
    margin-inline: 0;
  }

  .search-condition-dialog,
  .new-filter-dialog {
    width: min(560px, calc(100% - 24px));
  }
  .search-condition-dialog .search-condition-tags,
  .new-filter-dialog .new-filter-tags {
    grid-template-columns: repeat(4, minmax(92px, 1fr));
  }
  .search-condition-dialog .search-condition-tags > button,
  .new-filter-dialog .new-filter-tags > button { min-width: 92px; }
}

@media (min-width: 900px) {
  .search-condition-dialog,
  .new-filter-dialog { width: min(720px, calc(100% - 24px)); }
  .search-condition-dialog .search-condition-tags:has(> :nth-child(12)),
  .new-filter-dialog .new-filter-tags:has(> :nth-child(12)),
  .search-condition-dialog .search-condition-tags:has(> :nth-child(20)),
  .new-filter-dialog .new-filter-tags:has(> :nth-child(20)) {
    grid-template-columns: repeat(6, minmax(92px, 1fr));
  }
}

@media (min-width: 1024px) {
  .work-screen .work-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    grid-template-areas:
      "return return"
      "summary similar"
      "volumes related"
      "volumes source"
      "guide guide";
    align-items: start;
    gap: 24px 40px;
  }
  .work-screen .work-return-row { grid-area: return; }
  .work-screen .wtop { grid-area: summary; }
  .work-screen .volume-section { grid-area: volumes; }
  .work-screen .similar-section { grid-area: similar; margin-top: 0; }
  .work-screen .official-related-section { grid-area: related; margin-top: 0; }
  .work-screen .work-source { grid-area: source; }
  .work-screen .work-shelf-guide { grid-area: guide; margin: 0; }
  .work-screen .similar-section > h2,
  .work-screen .official-related-section > h2,
  .work-screen .work-source > h2 { padding-inline: 0; }
  .work-screen .similar-section > .rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    overflow: visible;
  }
  .work-screen .official-related-section > .rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    overflow: visible;
  }
  .work-screen .similar-section > .rail > .tile,
  .work-screen .official-related-section > .rail > .tile { width: 100%; }
  .work-screen .work-source p { margin-inline: 0; }
}

@media (min-width: 1200px) {
  .search-condition-dialog,
  .new-filter-dialog { width: min(1120px, calc(100% - 32px)); }
  .search-condition-dialog .search-condition-tags:has(> :nth-child(20)),
  .new-filter-dialog .new-filter-tags:has(> :nth-child(20)) {
    grid-template-columns: repeat(8, minmax(92px, 1fr));
  }
}

/* ======================================================================
   v7: 本棚状態ボタンの押下中配色を正本化
   旧テーマの save=黄 / read=青 / fav=紺 が :active の一瞬だけ見える
   回帰を防ぐため、通常・hover・focus・active・選択後を同じ部品契約で閉じる。
   ====================================================================== */
.shelf-screen .shelf-tabs .chip-tab:not([aria-pressed="true"]),
.shelf-screen .shelf-tabs .chip-tab:not([aria-pressed="true"]):hover,
.shelf-screen .shelf-tabs .chip-tab:not([aria-pressed="true"]):focus-visible,
.shelf-screen .shelf-tabs .chip-tab:not([aria-pressed="true"]):active,
.work-screen .wshelf [data-shelf-btn]:not([aria-pressed="true"]),
.work-screen .wshelf [data-shelf-btn]:not([aria-pressed="true"]):hover,
.work-screen .wshelf [data-shelf-btn]:not([aria-pressed="true"]):focus-visible,
.work-screen .wshelf [data-shelf-btn]:not([aria-pressed="true"]):active,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button:not([aria-pressed="true"]),
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button:not([aria-pressed="true"]):hover,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button:not([aria-pressed="true"]):focus-visible,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button:not([aria-pressed="true"]):active {
  color: #2a2e35;
  background: #f2f3f5;
  background-image: none;
  border-color: #dde0e4;
}

.shelf-screen .shelf-tabs .chip-tab[aria-pressed="true"],
.shelf-screen .shelf-tabs .chip-tab[aria-pressed="true"]:hover,
.shelf-screen .shelf-tabs .chip-tab[aria-pressed="true"]:focus-visible,
.shelf-screen .shelf-tabs .chip-tab[aria-pressed="true"]:active,
.work-screen .wshelf [data-shelf-btn][aria-pressed="true"],
.work-screen .wshelf [data-shelf-btn][aria-pressed="true"]:hover,
.work-screen .wshelf [data-shelf-btn][aria-pressed="true"]:focus-visible,
.work-screen .wshelf [data-shelf-btn][aria-pressed="true"]:active,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button[aria-pressed="true"],
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button[aria-pressed="true"]:hover,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button[aria-pressed="true"]:focus-visible,
.result-screen .result-grid[data-result-view="1"] .result-card-actions > button[aria-pressed="true"]:active {
  color: #111;
  background: var(--v7-lime);
  background-image: none;
  border-color: var(--v7-ink);
}

/* ======================================================================
   実サイトの一覧カード操作を共通化
   条件検索・ランキング・本棚で同じ「読みたい／読んだ／☆」を使う。
   ====================================================================== */
.search-screen .result-grid[data-result-view="1"] .result-card-actions,
.shelf-screen #shelfGrid[data-result-view="1"] .shelf-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: auto;
  padding-top: 7px;
}

.result-screen .result-grid[data-result-view="1"] .result-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(
  .result-screen .result-grid[data-result-view="1"],
  .search-screen .result-grid[data-result-view="1"],
  .shelf-screen #shelfGrid[data-result-view="1"]
) .result-card-actions > button:not(.result-favorite-button) {
  box-sizing: border-box;
  /* 横並びのflex子。width:100% だとカード幅を要求してはみ出す。
     等分して縮ませる（☆は .result-favorite-button で44px固定なので対象外）*/
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 3px;
  overflow: hidden;
  border: 1px solid #dde0e4;
  border-radius: var(--v7-radius);
  color: #2a2e35;
  background: #f2f3f5;
  font: 700 var(--fs-3xs)/1.7 var(--sans);
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

:is(
  .result-screen .result-grid[data-result-view="1"],
  .search-screen .result-grid[data-result-view="1"],
  .shelf-screen #shelfGrid[data-result-view="1"]
) .result-card-actions > button:not(.result-favorite-button) .mark-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

:is(
  .result-screen .result-grid[data-result-view="1"],
  .search-screen .result-grid[data-result-view="1"],
  .shelf-screen #shelfGrid[data-result-view="1"]
) .result-card-actions > button:not(.result-favorite-button) .shelf-button-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

:is(
  .result-screen .result-grid[data-result-view="1"],
  .search-screen .result-grid[data-result-view="1"],
  .shelf-screen #shelfGrid[data-result-view="1"]
) .result-card-actions > button:not(.result-favorite-button)[aria-pressed="true"] {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-ink);
}

.result-favorite-button {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #2a2e35 !important;
  background: #f2f3f5 !important;
  background-image: none !important;
  border: 1px solid #dde0e4 !important;
  border-radius: var(--v7-radius);
  box-shadow: none;
  transition:
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease,
  transform 160ms ease;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}
.result-favorite-button:hover,
.result-favorite-button:focus-visible,
.result-favorite-button:active {
  color: #2a2e35 !important;
  background: #f2f3f5 !important;
  background-image: none !important;
  border: 1px solid #dde0e4 !important;
  box-shadow: none !important;
}
.result-favorite-button[aria-pressed="true"],
.result-favorite-button[aria-pressed="true"]:hover,
.result-favorite-button[aria-pressed="true"]:focus-visible,
.result-favorite-button[aria-pressed="true"]:active {
  color: var(--v7-ink) !important;
  background: var(--v7-lime) !important;
  background-image: none !important;
  border: 1px solid var(--v7-ink) !important;
  box-shadow: none !important;
}
.result-favorite-button:focus-visible {
  outline: 2px solid var(--v7-ink);
  outline-offset: 2px;
}
.result-favorite-button[aria-pressed="true"] { transform: none; }
.result-favorite-button .mark-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  transition: transform 160ms ease;
}
.result-favorite-button[aria-pressed="true"] .mark-icon { transform: scale(1.06); }
.result-favorite-button .mark-icon path {
  fill: none !important;
  stroke: currentColor !important;
  transition: fill 280ms ease, stroke 280ms ease;
}
.result-favorite-button[aria-pressed="true"] .mark-icon path { fill: none !important; }
.result-favorite-button .shelf-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shelf-screen #shelfGrid > .work-card {
  display: flex;
  flex-direction: column;
}
.shelf-screen .shelf-card-link {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.shelf-screen #shelfGrid[data-result-view="1"] .shelf-card-link,
.shelf-screen #shelfGrid[data-result-view="2"] .shelf-card-link {
  padding: 0;
}

.search-screen .result-card-actions { display: none; }
.search-screen .result-grid[data-result-view="1"] .result-card-actions { display: grid; }

/* 2列・4列は作品情報の比較に集中させ、カード内の状態操作を重ねない。 */
.result-screen .result-grid[data-result-view="2"] .result-card-actions,
.result-screen .result-grid[data-result-view="4"] .result-card-actions,
.search-screen .result-grid[data-result-view="2"] .result-card-actions,
.search-screen .result-grid[data-result-view="4"] .result-card-actions,
.shelf-screen #shelfGrid[data-result-view="2"] .shelf-card-actions,
.shelf-screen #shelfGrid[data-result-view="4"] .shelf-card-actions {
  display: none !important;
}

/* 操作欄を内容高で詰め、selectとグリッドの間の空白を増やさない。 */
.result-panes > .result-controls > .result-toolbar,
.shelf-screen .shelf-controls > .result-toolbar[data-result-grid="shelfGrid"] {
  min-height: 0;
  height: auto;
  align-content: start;
  grid-auto-rows: max-content;
  row-gap: 6px;
  padding-block: 6px 8px;
}
.result-panes > .result-controls,
.shelf-screen .shelf-controls { min-height: 0; }
.result-panes > .result-controls .result-action-row,
.shelf-screen .shelf-controls .result-action-row {
  align-self: center;
  justify-self: start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  min-height: 44px;
}
.result-panes > .result-controls .result-action-row label,
.shelf-screen .shelf-controls .result-action-row label {
  min-height: 44px;
  flex: 0 0 auto;
  justify-content: flex-start;
  padding-block: 0;
}
.result-panes > .result-controls .result-view-row,
.shelf-screen .shelf-controls .result-view-row {
  align-self: center;
  margin-block: 0;
}

/* 未読の新巻が空のときも、主導線は同じライムCTAにする。 */
.unread-new-screen .new-page-empty .empty-actions .btn,
.unread-new-screen .new-page-empty .empty-actions .btn:hover,
.unread-new-screen .new-page-empty .empty-actions .btn:focus-visible,
.unread-new-screen .new-page-empty .empty-actions .btn:active {
  color: #111;
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .result-card-actions > button,
  .result-favorite-button,
  .result-favorite-button .mark-icon,
  .result-favorite-button .mark-icon path { transition: none; }
}

/* ==== v7: 見出しの書体をモックへ揃える ==== */
/* モックは見出し全般に明朝を当てていた（DESIGN.md §1「明朝は見出しだけ」）。
   実サイトは .brand-name など一部にしか当たっておらず、
   owner から「フォントはモックの方がいい」と指摘された（2026-08-22）。
   **本文はゴシックのまま。**明朝は見出しだけに限る（Windowsの游明朝は本文だと細い）。
   v7 は :root で全体に効いているので、ここも素のセレクタで書く。 */
.section-title,
.page-title,
.hero-title,
.work-title-main,
.shelf-cta-title,
.ft-brand,
.axis-title,
main h1,
main h2 {
  font-family: var(--serif);
}
/* **数字と件数はゴシックのまま。**明朝の数字は幅が揃わず、件数の桁で行が揺れる */
/* **数字と件数はゴシック。**明朝の数字は幅が揃わず、桁が変わると行が揺れる。
   .section-title は h2 でもあるので、後から書いても効くよう詳細度を上げる */
h2.section-title span,
h1.page-title span,
.section-head .section-title span,
.page-count,
main h1 span,
main h2 span {
  font-family: var(--sans);
}

/* ==== 見出しブロックの中に注記を入れる（owner指示 2026-08-22） ====
   注記を列の直前に置くと、書影と詰まって「書影の説明」に見えていた。
   見出しと同じ塊に入れ、列との間に余白を取る。 */
.section-head { flex-wrap: wrap; }
.section-head .section-note {
  flex-basis: 100%;
  margin: 6px 0 0;
  order: 3;
}
.section-head + .works-grid,
.section-head + .rail { margin-top: 14px; }

/* 作品ページの「設定」「ヒロイン」は同じ形の行にする（owner指示 2026-08-22）。
   以前は設定だけ .dialog-tags（height:17px の1行枠）に入っていて、
   見出しを足した途端に行が重なった。 */
.work-screen .role-row .role-chips {
  display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0;
}
.work-screen .role-row .chip {
  flex: none; min-height: 17px; height: 17px; padding: 0 6px;
  display: inline-flex; align-items: center; font: 500 var(--fs-3xs)/1 var(--sans);
}


/* ======================================================================
   検索結果の粒度（owner確定 2026-08-22）— **ここが正本**
   ----------------------------------------------------------------------
   list … 1列（書影・題名・作者・タグ・操作）
   1    … 2列（同上）
   2    … 2列。**操作ボタンなし**
   4    … 4列。**操作・タグ・作者なし**＝書影と題名だけ

   以前は view="1" が「1列の大きなカード」として実装され、
   .result-screen を前置した規則が後方にあったため、
   どのボタンを押しても2列のままになっていた（実測）。
   ここで意味を1本に固定する。
   ====================================================================== */
.result-grid[data-result-view="list"],
.result-screen .result-grid[data-result-view="list"] {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
}
.result-grid[data-result-view="1"],
.result-screen .result-grid[data-result-view="1"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  gap: 15px 11px !important;
}
.result-grid[data-result-view="2"],
.result-screen .result-grid[data-result-view="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
}
.result-grid[data-result-view="4"],
.result-screen .result-grid[data-result-view="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-content: stretch !important;
  gap: 10px 7px !important;
}
/* view="1" は2列なので、1列前提の「横に寝たカード」を解除する */
.result-screen .result-grid[data-result-view="1"] > .result-gcard {
  width: auto !important;
  min-height: 0 !important;
  justify-self: stretch !important;
}
/* 中身の出し分け */
.result-grid[data-result-view="2"] .shelf-buttons,
.result-grid[data-result-view="2"] .result-card-actions,
.result-grid[data-result-view="4"] .shelf-buttons,
.result-grid[data-result-view="4"] .result-card-actions { display: none !important; }
.result-grid[data-result-view="4"] .work-authors,
.result-grid[data-result-view="4"] .work-tags,
.result-grid[data-result-view="4"] .tags,
.result-grid[data-result-view="4"] .grid-meta em,
.result-grid[data-result-view="4"] .card-vol { display: none !important; }
/* list と 1 では操作を出す（.result-screen が一律 none にしていた） */
.result-grid[data-result-view="list"] .result-card-actions,
.result-grid[data-result-view="1"] .result-card-actions { display: flex !important; }


/* ======================================================================
   お気に入り（☆）— owner確定 2026-08-22
   ----------------------------------------------------------------------
   ・**文字を出さず「☆」だけ**。枠は正方形
   ・「読みたい」「読んだ」を少し縮めて**同じ行に収める**
   ・☆は「読みたい」「読んだ」のどちらかが付いている必要がある。
     未登録の作品で☆を押すと「読みたい＋お気に入り」になる
     （assets/shelf.js の transitionShelf が既にその挙動）
   ・置く場所は**本棚と作品ページだけ**。検索結果には出さない
   ====================================================================== */
.work-screen .wshelf {
  display: flex !important;
  gap: 8px;
  align-items: stretch;
}
.work-screen .primary-state-actions {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.work-screen .favorite-state-action {
  flex: 0 0 auto;
  display: block;
}
/* ☆は正方形。文字を持たないので幅は高さと同じ */
.work-screen .favorite-state-action [data-shelf-btn],
.shelf-screen .fav-btn,
#shelfGrid .fav-btn {
  width: 44px !important;
  min-width: 44px;
  padding: 0 !important;
  justify-content: center;
  aspect-ratio: 1 / 1;
}
/* ☆の中の文字は読み上げにだけ残す */
.work-screen .favorite-state-action [data-shelf-btn] .shelf-button-label,
.shelf-screen .fav-btn .shelf-button-label,
#shelfGrid .fav-btn .shelf-button-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 「読みたい」「読んだ」は☆のぶん詰める */
.work-screen .primary-state-actions [data-shelf-btn] {
  padding-inline: 8px;
}


/* ==== 新刊カードの操作ボタン（owner指摘 2026-08-22）====
   2列表示で「読みたい」「読んだ」が枠から溢れていた。
   **入らない場合は文字を落として印だけにする。**
   幅が足りるときは文字も出す（コンテナクエリで判定）。 */
.new-release-card .shelf-buttons,
.new-release-card .result-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}
.new-release-card .shelf-buttons [data-shelf-btn],
.new-release-card .result-card-actions [data-shelf-btn] {
  min-width: 0;
  padding-inline: 6px;
  justify-content: center;
  overflow: hidden;
}
/* **狭いときは文字を隠して印だけ。**溢れるより印だけのほうが読める */
@container (max-width: 190px) {
  .new-release-card [data-shelf-btn] .shelf-button-label { display: none; }
  .new-release-card [data-shelf-btn] { aspect-ratio: auto; }
}
.new-release-card { container-type: inline-size; }


/* ランキング一覧の見出し（owner指示 2026-08-22）。
   .page-title の中のピクトにサイズ指定が無く、viewBox のまま巨大化していた。
   見出しの中のSVGは行の高さに合わせる。 */
.result-head { padding: 18px 15px 0; }
.result-head .page-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0; font-size: var(--fs-2xl);
}
.result-head .page-title svg,
.result-head .page-title .ic {
  width: 20px; height: 20px; flex: none;
}
.result-head .section-note { margin: 8px 0 0; }


/* ==== 一覧の書影（owner指示 2026-08-22）====
   **70:100 の枠に contain。**cover・トリミング・角丸マスクを使わない
   （owner確定の表示規則）。書影が無い作品と混ざっても行が揃うよう、
   枠の寸法は書影の有無に関わらず同じ。 */
.list-cover {
  display: block;
  width: 100%;
  aspect-ratio: 70 / 100;
  height: auto;
  object-fit: contain;
  background: var(--v7-chip, #f2f3f5);
  border: 1px solid var(--v7-line, #e2e4e8);
  border-radius: var(--v7-radius);
}
.tile .list-cover { margin-bottom: 6px; }
.new-release-card .list-cover,
.result-gcard .list-cover { margin-bottom: 7px; }
/* 4列（書影と題名だけ）では書影を主役にする */
.result-grid[data-result-view="4"] .list-cover { margin-bottom: 5px; }


/* ======================================================================
   動き（owner指摘 2026-08-22「カテゴリの開閉・タグの選択にアニメーションがない」）
   ----------------------------------------------------------------------
   モックで決めた方針をそのまま持ち込む：
   **状態が変わったことを伝える動きだけ**を入れ、装飾の動きは入れない。
   すべて120〜280ms。prefers-reduced-motion では全部止める。
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- カテゴリの開閉 ---
     <details> はネイティブ要素で高さを補間できないので、
     **中身がほどける動き**で開いたことを伝える。
     閉じるときは即座（details が中身を外すため、待つと消えたあとに動く） */
  .search-condition-accordion[open] > .search-condition-tags,
  .search-condition-accordion[open] > .ab {
    animation: condition-unfold .22s ease;
  }
  @keyframes condition-unfold {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
  /* 開閉の印は回す。**開いている向きが一目で分かる** */
  .search-condition-accordion > summary .cx,
  .acc > summary .cx {
    transition: transform .22s ease;
  }
  .search-condition-accordion[open] > summary .cx,
  .acc[open] > summary .cx {
    transform: rotate(180deg);
  }
  /* 見出し自体もカーソルで反応する */
  .search-condition-accordion > summary,
  .acc > summary {
    transition: background-color .28s ease, color .28s ease;
  }

  /* --- タグの選択・解除 ---
     色は**ゆっくり**（280ms、他の操作要素と揃える）。
     押した瞬間だけ**短く沈む**（120ms）ので、効いたことが分かる */
  .search-condition-tags > .pill,
  .pill[data-chip],
  .chip {
    transition: background-color .28s ease, color .28s ease,
                border-color .28s ease, box-shadow .28s ease,
                transform .12s ease;
  }
  .search-condition-tags > .pill:active,
  .pill[data-chip]:active,
  .chip:active { transform: scale(.96); }

  /* 選んだ瞬間だけ弾む。**状態の変化そのもの**を見せる */
  .search-condition-tags > .pill[aria-pressed="true"],
  .pill[data-chip][aria-pressed="true"] {
    animation: chip-on .24s ease;
  }
  @keyframes chip-on {
    0%   { transform: scale(.94); }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1); }
  }
}


/* ======================================================================
   本棚ボタンの色と動き（owner指摘 2026-08-22）— **ここが正本**
   ----------------------------------------------------------------------
   ホームの新刊で「読みたい」にカーソルを合わせると薄黄色になっていた。
   原因は青ポスター期の残骸（.save-btn:hover { background:#FDF3DC } と
   .read-btn:hover の --blue-mist）。v7 は無彩色＋ライムなので、
   **押していないときは薄灰、押したときだけライム**に統一する。
   ====================================================================== */
.save-btn,
.read-btn,
.fav-btn,
[data-shelf-btn] {
  background: var(--v7-chip, #f2f3f5) !important;
  border: 1px solid var(--v7-line, #e2e4e8) !important;
  color: var(--v7-ink, #16181c) !important;
}
@media (hover: hover) {
  .save-btn:not([aria-pressed="true"]):hover,
  .read-btn:not([aria-pressed="true"]):hover,
  .fav-btn:not([aria-pressed="true"]):hover,
  [data-shelf-btn]:not([aria-pressed="true"]):hover {
    background: color-mix(in srgb, var(--v7-lime, #aff01f) 22%, #fff) !important;
    border-color: var(--v7-lime-border, #a5d122) !important;
  }
}
.save-btn[aria-pressed="true"],
.read-btn[aria-pressed="true"],
.fav-btn[aria-pressed="true"],
[data-shelf-btn][aria-pressed="true"] {
  background: var(--v7-lime, #aff01f) !important;
  border-color: var(--v7-lime-border, #a5d122) !important;
  color: var(--v7-ink, #16181c) !important;
}
/* 動き。**色はゆっくり（280ms）、押下は短く（120ms）**。他の操作要素と揃える */
@media (prefers-reduced-motion: no-preference) {
  [data-shelf-btn] {
    transition: background-color .28s ease, border-color .28s ease,
                color .28s ease, transform .12s ease;
  }
  [data-shelf-btn]:active { transform: scale(.96); }
  /* 付いた瞬間だけ弾む＝状態の変化そのもの */
  [data-shelf-btn][aria-pressed="true"] { animation: shelf-btn-on .24s ease; }
  @keyframes shelf-btn-on {
    0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: scale(1); }
  }
}

/* 一括バーの☆（owner指示 2026-08-22。読みたい・読んだの両ページに置く） */
.result-bulk-bar .bulk-fav {
  min-width: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  font-size: var(--fs-base);
  line-height: 1;
}


/* ======================================================================
   owner指摘 2026-08-22（まとめ）
   ====================================================================== */

/* --- 4列グリッドは全ページでタグ・作者を隠す ---
   view="4" は「書影と題名だけ」。結果一覧だけでなく本棚・新刊でも同じにする */
[data-result-view="4"] .work-authors,
[data-result-view="4"] .work-tags,
[data-result-view="4"] .tags,
[data-result-view="4"] .grid-meta em,
[data-result-view="4"] .card-vol,
[data-result-view="4"] .new-release-meta em {
  display: none !important;
}

/* --- 検索結果の「読みたい」「読んだ」が枠に収まっていなかった ---
   2つを等幅で並べ、はみ出さない。幅が足りないときは文字を落として印だけ */
/* **2列・4列の粒度ではこの規則を当てない。**
   `display: grid !important` が後ろにあるため、契約の
   「2列・4列は操作ボタンを出さない」を打ち消していた（2026-08-23 実測）。 */
.result-grid:not([data-result-view="2"]):not([data-result-view="4"]) .result-card-actions,
.result-grid:not([data-result-view="2"]):not([data-result-view="4"]) .result-gcard .shelf-buttons,
.work-screen .result-card-actions,
.new-screen .result-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  width: 100%;
  margin-top: 8px;
}
.result-card-actions [data-shelf-btn],
.result-gcard .shelf-buttons [data-shelf-btn] {
  min-width: 0;
  width: 100%;
  padding-inline: 6px;
  justify-content: center;
  overflow: hidden;
}
.result-gcard { container-type: inline-size; }
@container (max-width: 200px) {
  .result-gcard [data-shelf-btn] .shelf-button-label { display: none; }
}

/* --- ホームの列（ランキング・アニメ化）に本棚ボタン ---
   幅96pxに文字は入らないので**印だけ**。2つを横に並べる */
.tile { position: relative; }
.tile-link { display: block; text-decoration: none; color: inherit; }
.tile-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 6px;
}
.tile-shelf [data-shelf-btn] {
  min-width: 0; width: 100%;
  min-height: 32px; padding: 0;
  justify-content: center;
}
.tile-shelf [data-shelf-btn] .shelf-button-label { display: none; }


/* ======================================================================
   owner指摘 2026-08-22（一括）
   ====================================================================== */

/* --- 本棚カードの印（★●✓）が巨大化していた ---
   .card-mark の .mark-icon にサイズ指定が無く、書影が無いカードで
   枠いっぱいに広がって「巨大な星」になっていた（owner報告） */
.card-mark {
  position: absolute; top: 8px; right: 8px;
  width: 14px; height: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
}
.card-mark .mark-icon { width: 14px !important; height: 14px !important; flex: none; }
.gcard, .work-card { position: relative; }

/* --- カーソルを合わせたときの着色を全部ライムに揃える ---
   新刊・新巻一覧で薄黄色（青ポスター期の残骸）が出ていた */
@media (hover: hover) {
  .new-release-card [data-shelf-btn]:not([aria-pressed="true"]):hover,
  .new-screen [data-shelf-btn]:not([aria-pressed="true"]):hover,
  .unread-new-screen [data-shelf-btn]:not([aria-pressed="true"]):hover {
    background: color-mix(in srgb, var(--v7-lime, #aff01f) 22%, #fff) !important;
    border-color: var(--v7-lime-border, #a5d122) !important;
  }
  /* フッターのリンク（owner指示：ライムへゆっくり色が付く） */
  .ft a:hover, .site-footer a:hover, footer a:hover { color: var(--v7-lime, #aff01f); }
  /* 上へ戻る・気分など、動きが無かったもの */
  .totop:hover, .mtile:hover .mt-name, .btn:hover, .chip:hover, .nx:hover {
    border-color: var(--v7-lime-border, #a5d122);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ft a, .site-footer a, footer a,
  .totop, .totop .ic, .mtile .mt-name, .btn, .chip, .nx, .crumb a, .more, .section-head a {
    transition: color .28s ease, background-color .28s ease,
                border-color .28s ease, transform .12s ease;
  }
  .totop:active, .mtile:active, .btn:active, .chip:active { transform: scale(.97); }
}

/* --- ランキング一覧の題名・タグに下線が出ていた --- */
.result-gcard .gt, .result-gcard .tags i, .result-gcard .tags span,
.result-card-link, .result-card-link:hover { text-decoration: none; }

/* --- トップが詰まって見える --- */
.home-search { padding-block: 22px 20px; }
.home-search-tabs { margin-top: 14px; }
.hero-search { margin-top: 12px; }


/* ======================================================================
   デザイン規則の正規化（owner指示 2026-08-22「角丸・文字サイズ・ボタン・
   トンマナなどデザイン的なルールは監査して」）
   ----------------------------------------------------------------------
   監査結果（実測）:
     角丸        16種類。v7の既定は 5px（--v7-radius）だが、
                 10/12/14/16/18px が青ポスター期の名残で残っていた
     文字サイズ  27種類。DESIGN.md は「8段。この外を新しく足さない」と
                 定めているのに、9.5/10.5/11.5/12.5/14.5/17px が増えていた
     ボタン高    44px が69箇所で主流。40px が7箇所だけ外れていた

   **全部を機械的に置換すると壊れる**ので、ここでは
   「丸すぎる角丸」と「44px未満の操作領域」だけを正す。
   文字サイズの27種は DESIGN.md 側の更新（トンマナ確定後）で扱う。
   ====================================================================== */

/* 角丸: 丸すぎるものを v7 の 5px へ寄せる。
   ただし**完全な円（99px/999px/50%）は意図的**なので触らない
   （チップ・タブ・アイコンボタン） */
.card, .panel, .box, .surface, .sheet-in,
.result-toolbar, .search-condition-accordion,
.new-empty, .shelf-empty, .home-hint {
  border-radius: var(--v7-radius) !important;
}

/* 操作領域: 44px を下回るものを揃える（44pxが69箇所で主流） */
button, [role="button"], .btn, [data-shelf-btn], .chip-tab, .gsw {
  min-height: 44px;
}
/* 例外: 一覧の中の小さな印・列の中のボタンは意図的に小さい */
.tile-shelf [data-shelf-btn],
.card-mark,
.result-view-buttons .gsw { min-height: 32px; }


/* --- 気分の書影（owner指示 2026-08-22「モックの大きな書影に」）---
   モックは幅146px・書影209pxで、書影が主役だった。
   実サイトは160px枠だが **object-fit:cover でトリミングしていた**。
   owner確定の表示規則（70:100・contain・cover禁止）に戻し、寸法も合わせる。 */
.mtile { width: 146px !important; }
.mt-cover {
  aspect-ratio: 70 / 100 !important;
  background: var(--v7-chip) !important;
}
.mt-cover > img,
.mt-cover .list-cover {
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.moodrail { align-items: flex-start; }


/* ======================================================================
   フッターと上へ戻るのホバー（owner指示 2026-08-22
   「フッターの各リンクにカーソル合わせしたらライムに色がアニメーションで
   つくようにして」「トップへもどるや気分ボタンなど、カーソルを合わせても
   アニメーションしないものがあるので修正」）
   ----------------------------------------------------------------------
   **効いていなかった理由**: 5960行の「ホバーだけでトンマナの色は変えない」
   ブロックが `.footer-col a:hover { color:#878c94 }` で灰色に戻していた。
   詳細度も (0,2,1) で、こちらの `footer a:hover` (0,1,1) より強かった。
   その2行を外したうえで、同じ詳細度で明示する。
   ====================================================================== */
.footer-col a,
.page-top-link,
.footer-brand a {
  transition: color .28s ease;   /* ゆっくり色が乗る */
}
@media (hover: hover) {
  .footer-col a:hover,
  .footer-col a:focus-visible,
  .page-top-link:hover,
  .page-top-link:focus-visible,
  .footer-brand a:hover {
    color: var(--v7-lime);
  }
}
@media (prefers-reduced-motion: reduce) {
  .footer-col a, .page-top-link, .footer-brand a { transition: none; }
}


/* ======================================================================
   ホバーの正本（owner指示 2026-08-22
   「カーソル合わせた時にゆっくりライムになるのが反映されてない」
   「カーソル合わせた時の動きがゆっくり着色されるアニメーションじゃない」
   「トップへもどるや気分ボタンなど、カーソルを合わせてもアニメーション
   しないものがある」）
   ----------------------------------------------------------------------
   **動かなかった理由は2つ**:
   (1) 押せる部品に transition が1つも無く、色が瞬時に切り替わっていた
   (2) 5959行の「ホバーだけでトンマナの色は変えない」ブロックが、
       チップとフッターのホバー色を素の色へ**戻して**いた
   owner の指示が後なので、ここを正本とする。**選択済み（aria-pressed=true）
   の色は触らない** —— 選択とホバーが同じ見た目になると区別できなくなる。
   ====================================================================== */
:where(
  [data-shelf-btn], .chip, .pill, .btn, .totop, .page-top-link,
  .nx, .gsw, .mtile, .footer-col a, .tile-link, .work-card a,
  .result-card-actions button, .site-menu-link
) {
  transition:
    color .28s ease,
    background-color .28s ease,
    border-color .28s ease;
}

@media (hover: hover) {
  /* 未選択の操作は、うっすらライムが差してから戻る */
  [data-shelf-btn]:not([aria-pressed="true"]):hover,
  .chip:not([aria-pressed="true"]):hover,
  .pill:not([aria-pressed="true"]):hover,
  /* .btn-text は枠も背景も無い下線つきの文字ボタン。塗ると別物になる */
  .btn:not(.btn-blue):not(.btn-primary):not(.btn-text):hover,
  .nx:hover,
  .gsw:not([aria-pressed="true"]):hover {
    background-color: color-mix(in srgb, var(--v7-lime) 20%, #fff);
    border-color: var(--v7-lime-border);
    color: var(--v7-ink);
  }
  /* 選択済みはライムのまま。**濃さだけ一段上げて反応を返す** */
  [data-shelf-btn][aria-pressed="true"]:hover,
  .chip[aria-pressed="true"]:hover,
  .pill[aria-pressed="true"]:hover {
    background-color: color-mix(in srgb, var(--v7-lime) 62%, #fff);
    border-color: var(--v7-lime-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-shelf-btn], .chip, .pill, .btn, .totop, .page-top-link,
         .nx, .gsw, .mtile, .footer-col a, .tile-link, .work-card a,
         .result-card-actions button, .site-menu-link) { transition: none; }
}


/* ======================================================================
   未読のライムドットの位置（owner指摘 2026-08-22「ライムドットの位置が
   少し離れてる」）
   ----------------------------------------------------------------------
   **離れていた理由**: ドットは `position:absolute; right:-.32em` で
   リンクの**右端**に貼っていた。フッターとメニューのリンクは列幅いっぱいの
   ブロックなので、右端は題名から遠い。文字の直後に置き直す。
   44pxの操作領域は inline-flex + min-height で保つ。
   ====================================================================== */
.footer-col [data-unread-new-link],
.site-menu-links [data-unread-new-link] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
}
.footer-col .unread-new-dot,
.site-menu-links .unread-new-dot {
  position: static;
  top: auto;
  right: auto;
  width: 5px;
  height: 5px;
  min-width: 5px;
  align-self: flex-start;
  margin-top: 1.05em;   /* 文字の頭に軽く乗る高さ。肩付きの印にする */
}


/* ======================================================================
   丸を疑似要素で描いている部品のホバー（owner指摘 2026-08-22
   「条件でさがすのタグにカーソルを合わせた時に色がはみ出てる」）
   ----------------------------------------------------------------------
   条件でさがすのタグと、すべてのタグの「もっと見る」チップは、
   **見えている丸を ::before（inset: 4px 0）で描いている**。
   要素そのものは透明で、44pxの当たり判定いっぱいの高さがある。
   そこへ背景色を塗ると、丸から上下4pxはみ出す。
   **塗りは ::before に載せる**。要素側は透明のままにする。
   ====================================================================== */
.search-condition-surface .search-condition-tags > .pill::before,
.tags-screen .axis-more-items > .chip::before {
  transition: background-color .28s ease, border-color .28s ease;
}
@media (hover: hover) {
  .search-condition-surface .search-condition-tags > .pill:not([aria-pressed="true"]):hover,
  .tags-screen .axis-more-items > .chip:not([aria-pressed="true"]):hover {
    background-color: transparent;   /* 本体は塗らない */
  }
  .search-condition-surface .search-condition-tags > .pill:not([aria-pressed="true"]):hover::before,
  .tags-screen .axis-more-items > .chip:not([aria-pressed="true"]):hover::before {
    background: color-mix(in srgb, var(--v7-lime) 20%, #fff);
    border-color: var(--v7-lime-border);
  }
  /* 選択済みも同じ約束。濃さだけ一段上げる */
  .search-condition-surface .search-condition-tags > .pill[aria-pressed="true"]:hover,
  .tags-screen .axis-more-items > .chip[aria-pressed="true"]:hover {
    background-color: transparent;
  }
  .search-condition-surface .search-condition-tags > .pill[aria-pressed="true"]:hover::before,
  .tags-screen .axis-more-items > .chip[aria-pressed="true"]:hover::before {
    background: color-mix(in srgb, var(--v7-lime) 62%, #fff);
    border-color: var(--v7-lime-border);
  }
}
@media (prefers-reduced-motion: reduce) {
  .search-condition-surface .search-condition-tags > .pill::before,
  .tags-screen .axis-more-items > .chip::before { transition: none; }
}

@media (hover: hover) {
  /* 文字ボタンは塗らずに文字色だけ動かす */
  .btn-text:hover { color: var(--v7-lime-border); }
}


/* ======================================================================
   ページ番号（owner指示 2026-08-22「検索結果で次へを押した時に何ページか
   わからない。ページネーションを表示して」）
   ----------------------------------------------------------------------
   前へ／次へだけだと、転生タグの10ページ目へ行くのに9回押すことになる。
   「最初・いまの前後・最後」を出し、間は … でつなぐ。
   ====================================================================== */
.pager { flex-wrap: wrap; row-gap: 8px; }
.pager-nums {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--v7-radius);
  color: var(--v7-ink);
  background: transparent;
  font: 700 var(--fs-sm)/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}
.pager-num.is-current {
  /* いまのページは**押せない**ので、リンクではなく塗りで示す */
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
  color: var(--v7-ink);
  cursor: default;
}
@media (hover: hover) {
  a.pager-num:hover {
    background-color: color-mix(in srgb, var(--v7-lime) 20%, #fff);
    border-color: var(--v7-lime-border);
  }
}
.pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 44px;
  color: var(--v7-dim);
  font-size: var(--fs-sm);
}
@media (max-width: 480px) {
  /* 狭い画面では番号の枠を詰める。44pxの当たり判定は高さで確保する */
  .pager-num { min-width: 36px; padding: 0 4px; }
  .pager-label { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pager-num { transition: none; }
}


/* 狭い画面のページ送りの並び。
   1行に収まらないと「次へ」だけが単独で折り返して座りが悪い。
   **番号を1行、前へ／次へをその下**に置く。 */
@media (max-width: 560px) {
  .pager { justify-content: center; column-gap: 8px; }
  .pager-label { order: 0; width: 100%; text-align: center; margin-right: 0; }
  .pager-nums  { order: 1; width: 100%; justify-content: center; }
  .pager-step  { order: 2; }
}


/* ======================================================================
   さがす画面の上の余白（owner指示 2026-08-22
   「異世界転生・転移マンガが〜がヘッダー側に詰まってるので少し下げたい」
   「キーワード、条件でさがすの位置を少し下げたい」）
   ----------------------------------------------------------------------
   条件でさがすページの器は上余白が13pxしかなく、黒いヘッダーの直下に
   文が貼り付いていた。ホーム（padding-block: 22px）と同じところまで下げ、
   さらに文とタブの間も広げて、2つの塊が別物だと分かるようにする。
   ====================================================================== */
.search-tab-surface { padding-top: 26px; }
.home-search { padding-block: 26px 20px; }

/* 見出しの文とタブの間。10pxだと同じ塊に見える */
.home-search-copy,
.search-page-copy { margin-bottom: 18px; }

@media (max-width: 480px) {
  /* 狭い画面では詰めすぎず、かつ画面を食いすぎない中間に置く */
  .search-tab-surface { padding-top: 22px; }
  .home-search { padding-block: 22px 18px; }
  .home-search-copy,
  .search-page-copy { margin-bottom: 16px; }
}


/* ======================================================================
   結果カードの操作ボタンがカードからはみ出す（owner再指摘 2026-08-22）
   ----------------------------------------------------------------------
   **原因は詳細度**。
     6580行  .result-grid[data-result-view="1"] .result-card-actions
             { display: flex !important }        詳細度 (0,3,0)
     6834行  .result-gcard .shelf-buttons
             { display: grid !important; ... }   詳細度 (0,2,0)
   `!important` 同士は**詳細度が高いほうが勝つ**ので、2列に収める grid は
   最初から一度も効いていなかった。ボタンは `flex: 0 0 auto` のまま縮まず、
   実測で **182px のボタン2つを 182px の枠に押し込んで174pxはみ出して**いた。
   カードは overflow:hidden なので、切れて見えていた。

   **flex はそのまま活かし、子が縮むようにする。**
   grid に直すと☆を足したときに列数の指定を直す必要が出るが、
   flex なら子が増えても等分され続ける。
   ====================================================================== */
.result-grid .result-card-actions,
.result-grid .shelf-buttons,
.work-card .result-card-actions,
.work-card .shelf-buttons {
  gap: 6px;
  width: 100%;
  min-width: 0;
}
/* 「読みたい」「読んだ」は等分して縮む。**min-width:0 が要**（既定は auto で、
   中身の最小幅を下回れないため、いくら flex-shrink を効かせても縮まない）。 */
.result-grid .result-card-actions > *,
.result-grid .shelf-buttons > *,
.work-card .result-card-actions > *,
.work-card .shelf-buttons > * {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  overflow: hidden;
}
/* ☆だけは正方形を保つ（owner確定：文字を出さず枠は正方形） */
.result-grid .result-favorite-button,
.work-card .result-favorite-button {
  flex: 0 0 auto;
  width: auto;
}

/* 結果ツールバー：「読んだを隠す 0件」がグリッド選択に詰まる
   （owner指摘 2026-08-22「0件がグリッドに詰まっちゃってる。少し左に」）。
   action と view は同じ行の左右。列の間が6pxしかなく、件数の数字が
   すぐ隣のボタンに触れて見えた。 */
.result-toolbar { column-gap: 20px; }
.result-action-row { padding-right: 4px; }
@media (max-width: 480px) {
  /* 狭い画面では行が分かれるので、間隔は元に戻す */
  .result-toolbar { column-gap: 10px; }
}


/* ======================================================================
   本棚ボタンが丸くなる（owner指摘 2026-08-22 添付3）
   ----------------------------------------------------------------------
   `border-radius: var(--radius-pill)` は「高さが44pxの錠剤」を前提にした値。
   flex/grid の既定 align は stretch なので、**書影の代替表示（縦長の枠）と
   同じ行に置かれると、ボタンが枠の高さまで伸びて幅と釣り合い、丸になる**。
   高さを行に委ねず44pxで固定し、縦位置は中央に置く。
   ====================================================================== */
.result-card-actions,
.shelf-buttons,
.wshelf {
  align-items: center;
}
.result-card-actions > [data-shelf-btn],
.result-card-actions > .save-btn,
.result-card-actions > .read-btn,
.shelf-buttons > [data-shelf-btn],
.shelf-buttons > .save-btn,
.shelf-buttons > .read-btn {
  align-self: center;
  height: 44px;
  max-height: 44px;
  aspect-ratio: auto;   /* ☆（.fav-btn）は別途 1/1 を持つので影響しない */
}


/* ======================================================================
   ホームの「キーワード｜条件でさがす」（owner確定 2026-08-23
   「条件でさがすはホームページと同一ページ。AniList同様に下に広げる」）
   ----------------------------------------------------------------------
   以前は <span>/<a> でページ遷移していた。タブの見た目でページが変わるのは
   約束が違ううえ、/search/ 側には本棚誘導が無く導線が食い違っていた。
   いまは <button role="tab"> で、同じページの中で面を入れ替える。
   ====================================================================== */
.home-search-tabs[role="tablist"] {
  display: inline-flex;
  gap: 0;
}
.home-search-tabs [data-home-tab] {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  color: var(--v7-dim);
  cursor: pointer;
  padding: 8px 14px;
  min-height: 44px;
  transition: color .28s ease, border-color .28s ease;
}
.home-search-tabs [data-home-tab][aria-selected="true"] {
  color: var(--v7-ink);
  font-weight: 700;
  border-bottom-color: var(--v7-lime);
}
@media (hover: hover) {
  .home-search-tabs [data-home-tab]:hover { color: var(--v7-ink); }
}

/* 条件の面。**下へ広がる**ので、上の器と地続きに見せる */
.home-conditions-panel {
  padding: 0 15px 28px;
  background: var(--v7-page);
}
.home-conditions-panel > .search-condition-surface {
  padding-top: 0;
  max-width: var(--v7-content);
  margin-inline: auto;
}
.home-conditions-panel[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  /* 面が入れ替わったことが分かる程度に。**動かしすぎない** */
  [data-home-panel]:not([hidden]) { animation: homePanelIn .24s ease both; }
  @keyframes homePanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}


/* ======================================================================
   方眼を骨格にする（owner依頼 2026-08-23「方眼紙をもっといかすべきとか」）
   ----------------------------------------------------------------------
   方眼のピッチは **24px**（repeating-linear-gradient の 23px/24px）。
   ところが節の余白は 20/28/32/36px と、マスに乗らない値が混ざっていた。
   柄と中身がずれていると、方眼が**ただの模様**に見える。
   縦のリズムを24pxの倍数に揃えると、見出しと本文が同じマスから始まり、
   柄が版面の骨格として読める。
   （8px=1/3, 12px=1/2, 24px=1マス, 48px=2マス を使う）
   ====================================================================== */
:root {
  --grid: 24px;              /* 方眼1マス */
  --grid-half: 12px;
  --grid-third: 8px;
}

/* 節と節のあいだ＝1マス。見出しと中身のあいだ＝1/2マス */
.discover-body > .works-section,
.home-screen > .works-section,
.search-screen .works-section { margin-block: 0 var(--grid); }
.works-section > .section-head { margin-bottom: var(--grid-half); }

/* 一覧の間隔も約数に寄せる。5px/10px/11px/15px はマスに乗らない */
.works-grid,
.result-grid { gap: var(--grid-half) var(--grid-third); }
.rail { gap: var(--grid-third); }

/* 探索面の左右余白＝1マス。柄の線とカードの端が重なる */
.discover-body,
.page-body,
.home-conditions-panel { padding-inline: var(--grid); }

@media (max-width: 480px) {
  /* 狭い画面は半マス。**マスの倍数であることは保つ** */
  .discover-body,
  .page-body,
  .home-conditions-panel { padding-inline: var(--grid-half); }
}


/* ======================================================================
   太さのコントラスト（owner承認 2026-08-23）
   ----------------------------------------------------------------------
   参考にした版面（実験体δ）は、**極太の明朝**と**細いゴシック**の落差で
   紙面を作っている。いまのサイトは見出しが明朝700・説明が400で、
   落差が1段しかなく「明朝を使っている」以上の効果が出ていなかった。
   見出しを900へ、節の説明を細くして、**2段以上の差**をつける。

   Hiragino Mincho ProN は W3/W6 しか無いので、900を指定しても
   ブラウザが合成太字（faux bold）を作る。これは意図どおり——
   合成太字は本物のW9より角が立ち、コラージュ寄りの版面に合う。
   ====================================================================== */
.section-title,
.tag-section > .section-title,
.section-head .section-title {
  font-weight: 800;
  letter-spacing: 0.02em;   /* 太くすると字間が詰まって見えるので少し開ける */
}

/* 節の説明は細く小さく。**見出しに従属していることを字面で示す** */
.section-note,
.section-head .section-note {
  font-weight: 400;
  color: var(--v7-dim);
}

/* 件数の数字はゴシックのまま。明朝の見出しの中で数字だけ立たせる */
.section-title > span,
.section-head .section-title > span {
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--v7-dim);
}

/* トップの一文は版面の主役。ここが一番太い */
.home-search-copy { font-weight: 800; }
.home-search-copy strong { font-weight: 800; }


/* ======================================================================
   ライムを面で使う（owner承認 2026-08-23）
   ----------------------------------------------------------------------
   参考にした版面（MARA）はライムを**面**で置き、斜めに断って figure と
   重ねている。いまのサイトのライムは選択状態の小さな塗りが中心で、
   面として出るのは「本棚をつくる」ボタンだけだった。
   **節の見出しの左に、方眼1マスぶんのライムの帯**を立てる。
   面積は小さいが、縦に連なると紙面の背骨として効く。
   ====================================================================== */
/* ライムの帯は **.section-title の flex の子** として入れる。
   絶対配置だと見出しの行から浮いて、位置合わせを px で調整することになる。
   flexの子なら align-items:center がそのまま効いて、**文字の高さに必ず揃う**。 */
.works-section .section-title::before {
  content: "";
  flex: none;
  width: 5px;
  align-self: stretch;
  min-height: 1.1em;
  margin-right: var(--grid-third);
  background: var(--v7-lime);
  /* 上下を斜めに断つ。まっすぐな帯より版面が動く */
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
}

/* **見出しの下に罫は引かない。**方眼が既に横線を持っているので、
   そこへ罫を重ねると線が二重になって紙面が騒がしくなる。
   見出しと中身の切れ目は余白で示す。 */
.works-section > .section-head { padding-bottom: var(--grid-third); padding-left: 0; }
/* 説明文は見出しの文字の頭に揃える（帯5px + 間隔8px ぶん下げる） */
.works-section > .section-head > .section-note { padding-left: calc(5px + var(--grid-third)); }

/* ======================================================================
   入場（owner承認 2026-08-23）
   ----------------------------------------------------------------------
   参考にした版面は**斜めの断ち**が持ち味。節が視界に入ったときに
   その斜めのマスクを一度だけ通す。**一度だけ**なのは、スクロールの
   たびに動くと読む邪魔になるため（animation-timeline は使わず、
   CSSだけで完結させる）。
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .works-section {
    animation: sectionCut .5s cubic-bezier(.22,.61,.36,1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
  }
  @keyframes sectionCut {
    from {
      opacity: 0;
      /* 左下から右上へ斜めに開く */
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transform: none;
    }
  }
}

/* animation-timeline を解さないブラウザでは、上の animation が
   即座に to の状態で止まる（both）。**何も起きないだけで、消えない。** */
@supports not (animation-timeline: view()) {
  .works-section { animation: none; }
}


/* ======================================================================
   全幅で出す面は、方眼の余白から抜く（owner指摘 2026-08-23
   「本棚誘導のはばが短くなってるのは意図的？」→ 意図ではない）
   ----------------------------------------------------------------------
   .discover-body に padding-inline: var(--grid) を入れたとき、
   **中で全幅だった本棚誘導まで一緒に縮んだ**（実測 430px→406px）。
   フッターは全幅のままなので、誘導だけが浮いて見えていた。
   全幅の面は margin で padding を打ち消して端まで伸ばす。
   ====================================================================== */
.discover-body > .home-shelf-cta,
.discover-body > .shelf-intro,
.page-body > .home-shelf-cta,
.page-body > .shelf-intro {
  margin-inline: calc(var(--grid) * -1);
  width: auto;
}
@media (max-width: 480px) {
  .discover-body > .home-shelf-cta,
  .discover-body > .shelf-intro,
  .page-body > .home-shelf-cta,
  .page-body > .shelf-intro { margin-inline: calc(var(--grid-half) * -1); }
}
/* 中身は方眼のマスに揃える（面は全幅、文字は版面の中） */
.home-shelf-cta > *,
.shelf-intro > * { padding-inline: var(--grid); }


/* ======================================================================
   横に並ぶ列をカルーセルとして成立させる
   （owner指示「本棚の未読の新巻はカルーセルで」＋改善点2「終端の合図が無い」）
   ----------------------------------------------------------------------
   「長く続いている作品 10」は10件あるのに画面には4件しか見えず、
   **右に続くことが分からない**状態だった。横断している異世界漫画好きは
   ここで止まると次の作品に出会えない。
     ・右端をぼかして「まだある」と伝える（左へ寄せたら左端も）
     ・scroll-snap で1件ずつ気持ちよく止める
     ・スクロールバーは出したまま（消すと touch 以外で操作が分からない）
   ====================================================================== */
.rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--grid);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--grid-third);
}
.rail > * {
  scroll-snap-align: start;
  flex: none;
}

/* 端のぼかし。**両端に付けると中身が常に薄くなる**ので、
   スクロール位置に応じて切り替える（animation-timeline: scroll()）。 */
.rail {
  --fade: 28px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .rail {
      animation: railFade linear both;
      animation-timeline: scroll(self inline);
    }
    @keyframes railFade {
      /* 先頭：右だけぼかす */
      from {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
      }
      /* 途中：両端 */
      50% {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
      }
      /* 末尾：左だけ。**右のぼかしを消して「終わり」を伝える** */
      to {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
      }
    }
  }
}

/* 列の中のカードは幅を決める。**中身の量で幅が変わると snap が効かない** */
.rail > .tile,
.rail > .mtile,
.rail > .work-card,
.rail > .gcard { width: 146px; }

@media (min-width: 768px) {
  .rail > .tile,
  .rail > .work-card,
  .rail > .gcard { width: 168px; }
}


/* ======================================================================
   書影の無いカードを「空箱」にしない（改善点1）
   ----------------------------------------------------------------------
   いまホームのレールは白い枠に題名だけで、**面積の7割が空白**。
   書影が入っても、入らない作品は必ず残る。
   参考版面（実験体δ）は写真の無い場所を方眼・星・バーコードで埋めている。
   ここでは**方眼を濃いめに敷き、題名を組む**。
   「読み込みに失敗した枠」ではなく「そういうデザイン」に見せる。
   ====================================================================== */
/* **方眼のマスは全部24pxの正方形に統一する**（owner確定 2026-08-23
   「方眼紙はこれまで通り全部等サイズの正方形にしてほしい」）。
   ここで12pxの細かい方眼を敷いていたが、地の方眼（24px）と大きさが違い、
   同じ紙の上に2種類のマスが乗っていた。書影の無い枠は**トーン**で埋める。
   柄（方眼）とトーンは重ねない —— 重なるとモアレになる。 */
.tile.no-cover,
.gcard.no-cover .work-cover,
.mt-cover:not(:has(img)) {
  background-color: var(--v7-chip);
  background-image: var(--tone-20);
  background-size: var(--tone-pitch) var(--tone-pitch);
}

/* 題名は枠の中で組む。**空白を埋めるのは絵ではなく文字**でよい

   **書影の有無で書体を変えない（2026-08-29）。**ここが明朝だったため、
   同じ「カードの題名」が、書影のある一覧ではゴシック、関連作品
   （常に no-cover）では明朝になっていた。明朝は見出しとリード文だけ
   （DESIGN.md §1）。枠を埋める役目は行数（4行）と太さで足りる。 */
.tile.no-cover .tl {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--fs-sm);
  line-height: 1.45;
  padding: var(--grid-third);
  color: var(--v7-ink);
}

/* 枠の左上にライムの小さな角。書影が入る枠と見分けが付く */
.tile.no-cover {
  position: relative;
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  overflow: hidden;
}
.tile.no-cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--v7-lime);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}


/* ======================================================================
   トーン（網点）の正本 — owner確定 2026-08-23
   ----------------------------------------------------------------------
   前案は「粒1.5px・間隔7px」だったが、owner指摘のとおり**それではトーンに
   見えない**（点描になる）。本物のスクリーントーンは細かく詰まっている。
   モアレの原因は粒の細かさではなく、**方眼と重ねたこと**だった。
   柄同士が重なると干渉縞が出る。だから規則はこう決める:

     ・粒は細かく（1px）、間隔も詰める（3px）＝ 実際のトーンに近い
     ・**トーンと方眼は同じ面に重ねない。**どちらか一方だけ
     ・濃さは3段階だけ。中間を新しく作らない

   方眼のマスは**全部24pxの正方形**（owner確定）。トーンの3pxとは
   別の層に属するので、同じ面に同時に出さない限り干渉しない。
   ====================================================================== */
:root {
  --tone-pitch: 3px;                  /* 詰める。粗くするとトーンに見えない */
  /* **黒はほんの少し抑える。**owner指摘 2026-08-23「文字の可読性を上げたい」。
     粒の大きさと間隔（3px）は変えない——変えるとトーンに見えなくなる。
     濃さだけ 34%→24% / 52%→38% に落とす。トーンの上に文字が乗る場面
     （書影の無い枠の題名）で、地とのコントラストを確保する。 */
  --tone-20: radial-gradient(rgb(22 24 28 / 24%) .5px, transparent .6px);
  --tone-40: radial-gradient(rgb(22 24 28 / 38%) .7px, transparent .8px);
  --tone-lime: radial-gradient(rgb(74 107 0 / 34%) .6px, transparent .7px);
  --tone-white: radial-gradient(rgb(255 255 255 / 22%) .5px, transparent .6px);
}

/* トーンを貼る面。**背景色は面が持ち、粒だけをこの class が足す** */
.tone-20, .tone-40, .tone-lime, .tone-white {
  background-repeat: repeat;
  background-size: var(--tone-pitch) var(--tone-pitch);
}
.tone-20 { background-image: var(--tone-20); }
.tone-40 { background-image: var(--tone-40); }
.tone-lime { background-image: var(--tone-lime); }
.tone-white { background-image: var(--tone-white); }

/* **柄は重ねない。**方眼を持つ面にトーンが乗ったら、方眼を消す。
   逆も同じ。これを破るとモアレになる。 */
.v7-grid-paper.tone-20, .v7-grid-paper.tone-40,
.v7-grid-paper.tone-lime, .v7-grid-paper.tone-white { background-image: none; }


/* ======================================================================
   本棚誘導の断ち切り（owner確定 2026-08-23
   「本棚誘導は今までの方眼紙がいい。斜めに切りたければ切ってもいい」）
   ----------------------------------------------------------------------
   方眼（黒地に白罫・24px正方形）はそのまま。**上端だけ斜めに断つ。**
   欠けた三角からは、その上にある地の方眼が覗く——原稿用紙の上に
   コマが斜めに置かれている、という一枚の絵にする。
   トーンは貼らない（この面は既に方眼を持っており、柄は重ねない）。
   ====================================================================== */
.home-shelf-cta,
.shelf-intro {
  clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--grid) + 14px);   /* 断った14px分だけ中身を下げる */
}
/* 欠けた部分に地の方眼が見えるよう、器の背景を透かす */
.discover-body:has(> .home-shelf-cta),
.page-body:has(> .home-shelf-cta) { position: relative; }

@supports not (clip-path: polygon(0 0, 0 0)) {
  /* 断てない環境では、ただの黒い帯に戻るだけ */
  .home-shelf-cta, .shelf-intro { clip-path: none; padding-top: var(--grid); }
}


/* ======================================================================
   横に並ぶ列は grid ではなく flex（不具合の修正 2026-08-23）
   ----------------------------------------------------------------------
   レールの器は `<div class="works-grid rail">` で**2つのクラスを持つ**。
   .rail に display:flex を書いたが、.works-grid 側の grid 指定が
   詳細度で勝ち、実測で **4列76px** に潰れて題名が縦書きになっていた。
   組み合わせを名指しして、レールのときは必ず flex にする。
   ====================================================================== */
.works-grid.rail,
.result-grid.rail,
div.rail {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.works-grid.rail > *,
.result-grid.rail > *,
div.rail > * {
  flex: 0 0 auto;
  width: 146px;
  max-width: 146px;
}
@media (min-width: 768px) {
  .works-grid.rail > *,
  .result-grid.rail > *,
  div.rail > * { width: 168px; max-width: 168px; }
}
/* 気分の列は書影が主役なので少し細く */
.moodrail > * { width: 146px !important; max-width: 146px !important; }


/* 本棚の復元中。題名が届くまでは**偽の名前を出さず**、
   場所だけ確保しておく（owner指摘 2026-08-23）。 */
.gcard.is-restoring .gt,
.gcard.is-restoring .work-title {
  display: block;
  min-height: 2.6em;
  border-radius: var(--v7-radius);
  background: var(--v7-chip);
}
@media (prefers-reduced-motion: no-preference) {
  .gcard.is-restoring .gt,
  .gcard.is-restoring .work-title { animation: restorePulse 1.1s ease-in-out infinite; }
  @keyframes restorePulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
}


/* ======================================================================
   ヘッダーの断ち切り（owner承認 2026-08-23。ver.1 の範囲）
   ----------------------------------------------------------------------
   B-2＝左上がり14px。**欠けた三角から地の方眼が覗く**ことが要件
   （owner指摘「欠けてる部分まで方眼紙は映っていて欲しい」）。

   実装の勘どころ:
     ・ヘッダーは sticky。clip-path は sticky と併用できるが、
       **backdrop-filter とは併用すると Safari で描画が崩れる**ので、
       断つときは backdrop-filter を切って不透明の黒にする
     ・欠けた部分は「ヘッダーが無い」だけなので、下にある地の方眼が
       そのまま見える。**別途方眼を描き足す必要はない**
     ・14px は方眼1マス（24px）の半分より少し大きい。柄と平行にならず、
       かつマスを跨ぎすぎない
   ====================================================================== */
.site-header {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 0 100%);
  /* 断つと半透明の縁が汚く出るので、不透明にする */
  background: var(--v7-dark);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  /* 欠けたぶん、中身が下に寄って見えないよう底上げする */
  padding-bottom: 14px;
}
/* 直下の面は、欠けた三角に地の方眼が見えるよう**上に食い込ませない** */
.site-header + * { margin-top: 0; }

@supports not (clip-path: polygon(0 0, 0 0)) {
  .site-header { clip-path: none; padding-bottom: 0; }
}

/* ======================================================================
   フッターの断ち切り（owner承認 2026-08-23
   「本棚誘導がない場合はフッターの斜め切りもOK」）
   ----------------------------------------------------------------------
   本棚誘導がある画面では、誘導が既に斜めに断たれている。
   **同じ紙面で2回斜めに切ると、どちらが強い場面か分からなくなる**ので、
   誘導が無い画面のフッターだけを断つ。
   ====================================================================== */
body:not(:has(.home-shelf-cta)):not(:has(.shelf-intro)) .site-footer {
  clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--grid) + 14px);
}
@supports not (selector(:has(*))) {
  /* :has が使えない環境ではフッターを断たない（誘導と二重に切れる危険を避ける） */
  .site-footer { clip-path: none; }
}


/* ======================================================================
   印を表紙の上に置かない（owner指摘 2026-08-23「書影に重ねて大丈夫なの？」）
   ----------------------------------------------------------------------
   `.card-mark` は `position:absolute; top:8px; right:8px` で、
   **書影の右上に重なっていた**（実測：表紙の左から114px・上から-2pxの位置）。
   owner確定の書影規則「表紙上に文字・バッジ・操作アイコンを置かない」と、
   バリューコマース規約 第14条1項（画像・文言の改変禁止）に反する。

   印は**題名の行の中**へ入れる。題名は表紙の下にあるので表紙に触れない。
   flexの子にするので、行の高さに自動で揃う。
   ====================================================================== */
.gcard .gt,
.work-card .work-title {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.card-mark {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: none;
  order: 2;                 /* 題名の**後ろ**。読む順を邪魔しない */
  margin-left: auto;        /* 行の右端へ寄せる */
  align-self: center;
}


/* ======================================================================
   方眼をページの一番下の層に敷く（owner指摘 2026-08-23「隙間がないよう
   方眼紙を敷いて」）
   ----------------------------------------------------------------------
   ヘッダーを斜めに断つと、欠けた三角のところには**何も描かれていない**。
   方眼は `.home-search` など個々の面が持っていて、その面はヘッダーの
   下端（58px）から始まるので、44〜58pxの三角には地の色しか出ていなかった。

   直し方: **方眼は原稿用紙**なので、個々の面ではなく body の一番下に敷く。
   そうすれば「何も無い」ところには必ず方眼が見える。欠けた三角も、
   面と面の隙間も、断ち切りの外側も同じ。
   ====================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;          /* すべての中身の下 */
  pointer-events: none;
  background-color: var(--v7-page);
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgb(22 24 28 / 8%) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgb(22 24 28 / 8%) 23px 24px);
  /* **マスの原点をページ左上に固定する。**面ごとに敷いていたときは
     面の左上が原点になり、面をまたぐとマスがずれていた */
  background-position: 0 0;
}

/* 個々の面が持っていた方眼は不要になる。**二重に敷くとマスがずれて見える** */
.v7-grid-paper,
.home-search,
.search-tab-surface,
.home-conditions-panel { background-image: none; }
.v7-grid-paper::before { background-image: none; }

/* 地の色は body::before が持つので、面は透かす。
   **白く塗る面（カード等）はそのまま**——透けてよいのは器だけ */
.discover-body,
.page-body,
.home-search,
.search-tab-surface,
.home-conditions-panel { background-color: transparent; }


/* ロゴとサイト名の上下位置（owner指摘 2026-08-23「サイト名、ロゴの位置が
   ちょっと気になる」）。
   断ち切りは右へ行くほど深いので、**見える黒の高さが左右で違う**
   （左58px / 右44px）。中身を44pxの中心（22px）に置くと、左側だけ
   黒が14px余って、ロゴが上に張り付いて見えていた。
   両端の中心（22と29）の**あいだ**に置いて釣り合わせる。 */
.site-header { padding-bottom: 8px; }


/* ======================================================================
   ヘッダーの中身を、その位置の黒に合わせて置く
   （owner指摘 2026-08-23「これ寄せれてる？」→ 寄せられていなかった）
   ----------------------------------------------------------------------
   断ち切りが斜めなので、**黒の高さは場所ごとに違う**。
   実測（幅395px・切り欠き14px）:
       ロゴの位置（x=77）  … 黒の高さ49px → 中心は 24.5px
       右の操作（x=329）   … 黒の高さ40px → 中心は 20px
   ひとつの中央揃えでは両方に合わず、ロゴが3px高く、右の操作が2px低かった。
   **左右それぞれを、その位置の中心へ寄せる。**

   ずらす量は「切り欠きの深さ × その位置の割合 ÷ 2」で決まる。
   ロゴは左端寄りなので下へ、操作は右端寄りなので上へ動く。
   ====================================================================== */
.site-header .brand,
.site-header .brand-name,
.site-header > * > a:first-child {
  transform: translateY(3px);
}
.site-header .site-header-action,
.site-header .site-menu-toggle {
  transform: translateY(-2px);
}
/* 押したときの沈み込みは、寄せたぶんを保ったまま重ねる */
.site-header .site-header-action:active,
.site-header .site-menu-toggle:active { transform: translateY(-1px); }

@supports not (clip-path: polygon(0 0, 0 0)) {
  /* 断てない環境では黒は長方形。ずらす必要が無い */
  .site-header .brand,
  .site-header .brand-name,
  .site-header > * > a:first-child,
  .site-header .site-header-action,
  .site-header .site-menu-toggle { transform: none; }
}


/* ======================================================================
   方眼が埋まらなかった本当の原因（owner指摘 2026-08-23「方眼紙で埋まってない」）
   ----------------------------------------------------------------------
   前の直しで `body::before { z-index: -1 }` に方眼を敷いたが、
   **body 自身が不透明な背景色（#fafafa）を持っており、それが方眼を覆って**
   いた。実測: 切り欠きの位置(356,46)で BODY の bg=rgb(250,250,250)、
   backgroundImage=none。擬似要素は body の背景より後ろに回るため見えない。

   擬似要素をやめ、**body の背景そのものに方眼を描く**。
   背景は子より必ず後ろに塗られるので、ヘッダーの欠けた三角のように
   「子が描かれていない場所」には必ず方眼が出る。
   ====================================================================== */
body::before { content: none !important; }

body {
  background-color: var(--v7-page) !important;
  background-image:
    repeating-linear-gradient(to right, transparent 0 23px, rgb(22 24 28 / 8%) 23px 24px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgb(22 24 28 / 8%) 23px 24px) !important;
  /* 原点をページの左上に固定する。**マスは全部24pxの正方形**（owner確定） */
  background-position: 0 0 !important;
  background-repeat: repeat !important;
}

/* 画面外へ引っ張ったときの色も紙に合わせる（黒だと紙が途切れて見える） */
html { background-color: var(--v7-page); }


/* ======================================================================
   フッターを中央に揃える（owner指摘 2026-08-23
   「さがす／サイトについて／つかう、アフィリエイトの注記、著作権が
     中央揃えされてない」）
   ----------------------------------------------------------------------
   器（.footer-inner）は左右84pxで揃っていたが、**中の文字が左揃え**
   （text-align: left / start）だった。ブランド行だけ center で、
   列・注記・著作権が左に寄っており、縦の軸が合っていなかった。
   フッターは面全体を1つの塊として見せるので、**中身も中央へ揃える**。
   ====================================================================== */
.site-footer .footer-cols,
.site-footer .footer-note,
.site-footer .footer-copyright { text-align: center; }

/* 列は中身ごと中央へ。**見出しとリンクの左端を揃えたまま**、
   列そのものを中央に置く（文字だけ中央にすると行ごとに端がずれる） */
.site-footer .footer-cols {
  justify-content: center;
  justify-items: center;
}
.site-footer .footer-col { text-align: center; }
.site-footer .footer-col ul { align-items: center; }

/* 未読の印は文字の直後に置いているので、中央揃えでも文字から離れない */
.site-footer .footer-col [data-unread-new-link] { justify-content: center; }


/* ======================================================================
   全幅で出す面を、器の中央寄せから抜く（owner指摘 2026-08-23
   「PC表示で本棚をつくるが横いっぱいに広がってない」）
   ----------------------------------------------------------------------
   .discover-body は max-width で中央寄せされる（1600px幅のとき
   `margin: 0 200px` / 幅1200px）。中の本棚誘導は `margin-inline: -24px`
   で**paddingぶんしか打ち消しておらず**、親の200pxのマージンは越えられない。
   結果、フッターは1600pxなのに誘導だけ1200pxで、白い帯が左右に残っていた。

   **画面幅ぶん引き延ばす。**器がどれだけ中央へ寄っていても関係なく
   端まで届く。`50%` は器の中心なので、そこから画面の半分ぶん外へ出す。
   ====================================================================== */
.discover-body > .home-shelf-cta,
.discover-body > .shelf-intro,
.page-body > .home-shelf-cta,
.page-body > .shelf-intro {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* 縦スクロールバーぶんはみ出さないよう、あれば差し引く */
  scrollbar-gutter: stable;
}
@supports (width: 100dvw) {
  .discover-body > .home-shelf-cta,
  .discover-body > .shelf-intro,
  .page-body > .home-shelf-cta,
  .page-body > .shelf-intro {
    width: 100dvw;
    max-width: 100dvw;
    margin-inline: calc(50% - 50dvw);
  }
}
/* 中身は版面の幅に収める。**面は全幅、文字は読める幅**で止める */
.home-shelf-cta > *,
.shelf-intro > * {
  max-width: var(--v7-content);
  margin-inline: auto;
}


/* ======================================================================
   書影の枠を実寸に合わせる（owner指摘 2026-08-23
   「書影スペースが大きすぎて画質が低く見える。そもそも画質下がってない？」）
   ----------------------------------------------------------------------
   **画質は下がっていない。枠が大きすぎる。**
   実測: 元画像 180x256 を 376x536 で表示＝**2.09倍に引き伸ばし**ていた。
   BOOK☆WALKERの商品APIは imageFree の1本しか返さず（imageSmall と
   imageLarge は空）、180x256 が取れる最大。**大きく出す手はない**ので、
   枠を実寸に寄せる。

   上限を 180px（＝元画像の幅）に置く。等倍で出れば、書影は本来の
   鮮明さで見える。列は幅が余ったぶん枚数が増えるので、
   一覧としてはむしろ見やすくなる。
   ====================================================================== */
.list-cover,
img.cv,
.work-cover,
.mt-cover > img {
  max-width: 180px;
  /* 高さも比率どおりに止める。70:100 の枠は維持したまま中で contain */
  max-height: 256px;
}

/* 枠そのものも実寸を超えない。**枠だけ大きいと余白が生まれる** */
.result-grid .work-cover-button,
.result-grid .work-cover,
.gcard .work-cover { max-width: 180px; }

/* 一覧の列は、書影が180pxで足りる幅に割る */
.result-grid[data-result-view="1"] { grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); }
.result-grid[data-result-view="2"] { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); }
@media (max-width: 560px) {
  /* 狭い画面では引き伸ばしても粗が目立たない。**2列は保つ** */
  .result-grid[data-result-view="1"],
  .result-grid[data-result-view="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .list-cover, img.cv, .work-cover { max-width: none; }
}


/* ======================================================================
   結果ツールバーの列が中身に足りず重なっていた
   （owner指摘 2026-08-23「読んだを隠すがグリッドの横に入れてない」）
   ----------------------------------------------------------------------
   実測: 器271pxに対し列が `75px 188px`。左の操作の行は中身145pxあり、
   右のグリッド選択（188px）と**83px地点で重なっていた**。
   `minmax(0, 1fr) auto` の 1fr が 75px まで潰れたのが原因。

   **右のグリッド選択は幅が決まっている**（4個×44px＋間隔）ので auto、
   左は残り全部を取り、足りなければ折り返す。
   ====================================================================== */
.result-toolbar {
  grid-template-columns: minmax(max-content, 1fr) auto;
}
.result-action-row {
  /* 中身が入る幅を確保する。潰れたら縦に積む */
  min-width: max-content;
  flex-wrap: wrap;
}
/* 器が狭いときは、操作とグリッド選択を上下に分ける。**重ねない**

   **閾値を 700px から 380px に下げた（2026-08-29）。**
   重なりの原因は器の幅（実測271px）だったのに、画面の幅で切っていた。
   画面が狭いほど器は**広い**（1列組みになるため）ので、条件が逆を向く。
   実測: 画面415px → 器391px。操作144＋間隔6＋表示188＝338 で収まる。
   なのに1列へ落ち、並べ替え・複数選択・読んだを隠す・表示切替が
   4段に積まれていた（owner指摘 2026-08-29「ここ同列に並べてたはず」）。
   画面320px → 器296pxで収まらないので、そこは従来どおり縦に積む。
   （本来は器で切りたい。@container が使えるなら次はそちらへ寄せる） */
/* **2026-08-29: ここは器で切る形（ファイル末尾の @container）に移した。**
   画面の幅で切ると、画面415px→器391px（収まる）と
   画面1024px→器271px（収まらない）を同じ条件で扱えない。
   コンテナクエリが使えない古い環境のための保険として、
   **器が確実に足りない画面幅**だけ残す。 */
@media (max-width: 340px) {
  .result-toolbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sort" "action" "view" "bulk";
  }
  .result-view-row { justify-self: start; }
  .result-action-row { min-width: 0; }
}


/* 結果ツールバーの列（詳細度の修正 2026-08-23）。
   `.result-toolbar`（0,1,0）で書いたが、
   `@media (min-width:768px) .result-panes > .result-controls > .result-toolbar`
   （0,3,0）が勝っており、列は `75px 188px` のままだった。
   **同じ経路・同じ詳細度で書く。** */
@media (min-width: 768px) {
  .result-panes > .result-controls > .result-toolbar,
  .result-controls > .result-toolbar,
  .result-toolbar {
    grid-template-columns: minmax(max-content, 1fr) auto;
  }
}


/* ======================================================================
   方眼の二重を解消（owner指摘 2026-08-23「トップの方眼紙が二重になってる」）
   ----------------------------------------------------------------------
   方眼を body の背景へ一本化したが、**`.home-search::before` と
   `.v7-grid-paper::before` の方眼が残っていた**（2476行）。
   同じマスの線が2枚重なり、線が濃く・太く見えていた。
   実測: body の背景／`.home-search::before`／`.cta::before` の3枚。

   **方眼は body の1枚だけ。**面が持つ擬似要素の方眼は全部止める。
   （柄を1か所に集める規則は「トーンと方眼は重ねない」と同じ考え方）
   ====================================================================== */
.home-search::before,
.v7-grid-paper::before,
.cta::before,
.search-tab-surface::before,
.home-conditions-panel::before {
  background-image: none !important;
}



/* ======================================================================
   本棚の「1列で表示」が1列になっていなかった（Codex監査 P1-5）
   ----------------------------------------------------------------------
   `#shelfGrid[data-result-view="list"]` は
   `grid-template-columns: repeat(auto-fit, minmax(44px, 100px))` で、
   **1列ではなく44〜100pxの多列**だった。375pxでは3〜4列に割れ、
   カードの中身が縦に流れて「読みたい／読んだ」が各8px幅まで潰れていた。

   **カードの直接の子は2つだけ**（`a.shelf-card-link` と操作の `span`）。
   書影・題名・著者・タグはリンクの**中**にあるので、カードに列を切っても
   題名は動かない（最初の直しでそれを踏み、題名が書影の下へ回った）。
   **リンクそのものを「書影＋文字」の2列**にする。
   ====================================================================== */
.shelf-screen #shelfGrid[data-result-view="list"] {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: var(--v7-content);
  gap: var(--grid-third) !important;
  justify-content: stretch !important;
}
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: var(--grid-third);
  row-gap: var(--grid-third);
}
/* リンクの中を「書影 | 文字」に割る */
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .shelf-card-link {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: var(--grid-half);
  row-gap: 2px;
  align-items: start;
  /* 書影は `grid-row: 1 / -1` で右列の全行にまたがる。行を実寸にしないと
     **書影の126pxが行に分配され**、題名と著者の間が間延びする
     （`grid-auto-rows: min-content` では最初の行が余りを吸って直らない）。
     文字の行は実寸、**余りは末尾の伸縮行に落とす** */
  grid-template-rows: auto auto auto 1fr;
  grid-auto-rows: min-content;
  align-content: start;
}
/* 書影は左の列に縦通し。**70:100 を保つ**（owner確定の表示規則） */
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .shelf-card-link > .cv {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 88px;
  aspect-ratio: 70 / 100;
  object-fit: contain;
  align-self: start;
}
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .shelf-card-link > .gt,
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .shelf-card-link > .grid-meta,
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .shelf-card-link > .read-progress,
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .shelf-card-link > .tags {
  grid-column: 2;
}
.shelf-screen #shelfGrid[data-result-view="list"] .gt {
  min-height: 0 !important;
  font-size: var(--fs-sm) !important;
}
/* **1列なら書ける。**多列に割れていたから隠していただけ */
.shelf-screen #shelfGrid[data-result-view="list"] .grid-meta,
.shelf-screen #shelfGrid[data-result-view="list"] .tags {
  display: flex !important;
}
/* 操作は文字の下に敷く。**並びは共通の契約どおり**——
   「読みたい／読んだ」が2列、☆は2行目の左（`.result-favorite-button`）。
   3つを1行にすると v7 の契約から外れる（test_v7_style_contract）。 */
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .result-card-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 0;
}
/* 広い画面では1列カードが器いっぱいに伸び、操作ボタンも横に間延びする。
   押す面は 44px を割らない範囲で、文字の幅に見合う長さに留める */
@media (min-width: 768px) {
  .shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .result-card-actions {
    grid-template-columns: repeat(2, minmax(0, 200px));
    justify-content: start;
  }
}

/* ======================================================================
   節が2列に並んだときの3点（owner指摘 2026-08-23）
   ====================================================================== */

/* (1) **カルーセルが動かなくなっていた。**
   PC用の `.home-screen .works-grid.rail` は「1行4枚のグリッド・
   スクロールなし」で、節が画面いっぱいに1列で並ぶ前提の指定だった。
   節を2列に並べたことで器が576pxになり、中身（1,424px）がはみ出したまま
   `overflow: visible` が残って**横スクロールもできない**状態だった。
   器に収まらないなら横に送れるのが本来の形なので、レールへ戻す。 */
@media (min-width: 768px) {
  .discover-body .works-section .works-grid.rail,
  .search-discovery .works-section .works-grid.rail {
    display: flex;
    overflow-x: auto;
  }
}

/* (2) **「すべて見る」が2行目に落ちていた。**
   `.section-head` は注記を3行目に置くために `flex-wrap: wrap` で、
   節が2列に並んで器が368pxになると、題と件数で幅が尽きて
   リンクが折り返していた。折り返しの判断は flex に任せず、
   **「題｜リンク」の2列**に決めてしまう。注記だけが次の行に落ちる。 */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
}
.section-head > h2,
.section-head > .section-title {
  grid-column: 1;
  min-width: 0;
  /* 中身は flex ではなく**行として流す**。flex のままだと
     題（匿名アイテム）と件数が別々のアイテムになり、幅が足りないと
     件数だけが次の行へ落ちる。行として流せば題の途中で折り返す */
  display: block;
}
.section-head > h2 > .ic.h,
.section-head > h2 > .row-icon,
.section-head > .section-title > .ic.h,
.section-head > .section-title > .row-icon {
  vertical-align: -4px;
  margin-right: 8px;
}
.section-head > h2 > span,
.section-head > .section-title > span { margin-left: 6px; }
/* **見出しは折り返さない**（owner指示 2026-08-23）。
   節が2列に並ぶと器が368pxまで狭まり、題と件数が2行に割れていた。

   **折り返さないだけでは足りない。**`overflow` を決めていなかったため、
   入りきらない分がそのまま右へはみ出し、「すべて見る →」と送りボタンに
   重なっていた（owner指摘 2026-08-29「かぶってる」）。実測で
   320〜390px と ちょうど768px（節が2列になり器が165pxまで狭まる幅）で発生。
   「1行に収まる文言だけを置く約束」は守られる保証が無いので、
   **入らなかったときに何が起きるかをCSSで決めておく**。 */
.section-head > h2,
.section-head > .section-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-head > a {
  grid-column: 2;
  margin-inline: 0;
  white-space: nowrap;
}
/* 注記は行いっぱいに敷く（order で3番目に置く指定はそのまま活きる） */
.section-head > .section-note {
  grid-column: 1 / -1;
}
/* 「すべて見る」も送りボタンも無い節だけ、題が行いっぱいを使う。
   **`> a` だけを見ていると、リンクを `.section-head-actions` で
   包んだ瞬間に「リンクが無い」と判定され**、題が全幅に広がって
   2行目へ落ちる（2026-08-24 に実測で気づいた）。 */
.section-head:not(:has(> a)):not(:has(> .section-head-actions)):not(:has(> .rail-nav)) > h2,
.section-head:not(:has(> a)):not(:has(> .section-head-actions)):not(:has(> .rail-nav)) > .section-title {
  grid-column: 1 / -1;
}

/* (3) **タグを押すと位置が動いていた。**
   `transform: scale()` は中心を基準に縮むので、幅のあるタグほど
   左右の端が動き、押すたびに列がずれて見える。
   状態が変わったことは**色だけ**で伝える（色の遷移280msは残す）。 */
.search-condition-tags > .pill,
.search-condition-tags > .pill:active,
.search-condition-tags > .pill[aria-pressed="true"],
.pill[data-chip],
.pill[data-chip]:active,
.pill[data-chip][aria-pressed="true"],
.chip,
.chip:active,
.chip[aria-pressed="true"] {
  transform: none !important;
  animation: none !important;
}

/* タグは選んでも**幅が変わらない**ようにする。
   選択時に `font-weight: 700` へ変わると文字が太くなって幅が 1.94px 増え、
   後ろのタグがその分だけ右へずれる（owner指摘「位置が少し右に動く」）。
   選ばれていることはライムの面と濃い枠が示すので、太さは動かさない。 */
.search-condition-surface .search-condition-tags > .pill[aria-pressed="true"],
.pill[data-chip][aria-pressed="true"],
.chip.is-selected,
.chip[aria-pressed="true"] {
  font-weight: inherit;
}

/* ======================================================================
   本棚の「1」（＝2列）で、カードの中身が12pxまで潰れていた
   ----------------------------------------------------------------------
   列数は owner確定（2026-08-22）で **list=1列 / 1=2列 / 2=2列 / 4=4列**。
   ところがカードの中は `grid-template-columns: 120px minmax(0,1fr)` の
   **横長のまま**で、これは「1」が1列だった頃の指定だった。
   375pxではカードが167px（2列）しかなく、書影に120pxを取ると残りが
   12pxになり、実測で書影12px・「読みたい」8pxまで潰れていた。

   768px以上は器が広く（本棚は最大1180pxの2列＝約590px）横長が成立するので
   そのまま。**狭い画面だけ「2」「4」と同じ縦積み**に戻す。
   ====================================================================== */
@media (max-width: 767px) {
  .shelf-screen #shelfGrid[data-result-view="1"] > .gcard:not(.no-cover) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .shelf-screen #shelfGrid[data-result-view="1"] > .gcard {
    min-height: 0;
  }
}

/* ======================================================================
   書影を枠にぴったり合わせる（owner指示 2026-08-23）
   ----------------------------------------------------------------------
   これまでは 70:100 の枠に `object-fit: contain` で収めていた。
   BOOK☆WALKERの書影は 180x256（70:100）ばかりではないので、比率の違う
   書影は枠の中に余白が残り、**角丸の枠と書影の角が合っていなかった**。

   owner の判断で「多少隠れてもいいので枠に完全に合わせる」へ変更。
   （2026-08-22 に決めた cover禁止・トリミング禁止を、この指示で上書き）
   枠の角丸は維持し、画像そのものにも同じ角丸を掛けて角まで埋める。
   切るときは**下から**切る——表紙は題名と顔が上にあることが多い。
   ====================================================================== */
.list-cover,
img.cv,
.mt-cover > img,
.mt-cover .list-cover,
.work-cover img,
.similar-list img {
  object-fit: cover !important;
  object-position: center top;
  border-radius: var(--v7-radius) !important;
}
/* 枠側も同じ角丸で切り、はみ出した画像が角を四角く見せないようにする */
.mt-cover,
.work-cover,
.work-cover-button {
  overflow: hidden;
  border-radius: var(--v7-radius);
}
/* 枠線は外す（owner指示 2026-08-23「枠ない方が綺麗」）。
   cover で画像が枠を埋めきるので、外周の線は画像の縁に重なるだけで
   何も示さない。角丸だけを残す。
   **書影が無い枠には線を残す**——そこは「まだ取れていない場所」を
   示す必要があり、線が無いと余白と見分けがつかない。 */
.list-cover,
img.cv {
  border: 0 !important;
}

/* ======================================================================
   書影の見え方を現行サイトに合わせる（owner指示 2026-08-23）
   ----------------------------------------------------------------------
   現行サイト https://isekai-tsuzuki.jp を実測した結果:
     元画像 844x1200 → 表示 132x188（**0.16倍に縮小**）
     object-fit: cover / 角丸 8px / 枠線なし / 影 0 2px 8px rgba(31,47,71,.16)
   新デザインは BOOK☆WALKER の 180x256 を等倍で出しており、
   Retina では実質半分の密度になって眠く見えていた。

   **素材の解像度差（面積で約22倍）はCSSでは埋まらない**が、
   表示を132x188に詰めれば密度は 1.00倍→1.36倍に上がり、
   角丸・枠なし・影も現行と同じ扱いになる。
   ====================================================================== */
.list-cover,
img.cv,
.work-cover,
.mt-cover > img {
  max-width: 132px;
  max-height: 188px;
}
.result-grid .work-cover-button,
.result-grid .work-cover,
.gcard .work-cover { max-width: 132px; }
.list-cover,
img.cv,
.mt-cover > img,
.mt-cover .list-cover,
.work-cover img,
.similar-list img {
  border-radius: var(--radius-cover) !important;
  box-shadow: 0 2px 8px rgb(31 47 71 / 16%);
}

/* ======================================================================
   触ったときの見え方（owner指摘 2026-08-24「ボタンをタップすると変な色に出る」）
   ----------------------------------------------------------------------
   実測（iPhone相当・390px）で `-webkit-tap-highlight-color` が
   **ブラウザ既定の rgba(51,181,229,.4)＝水色**のままだった。
   ライムのボタンに水色がかぶるので、一瞬だけ濁った色に見える。

   もう1つは**文字の選択**。ボタンの中の字が `user-select: auto` なので、
   長押しや二度押しで選択の帯（黒）と拡大鏡が出る。
   押す物であって読む物ではないので、選ばせない。

   **色を消すだけにしない。**既定の反応を消したまま何も返さないと、
   押したかどうか分からなくなる。自前の押し込みを付ける。
   ====================================================================== */
a, button, [role="button"], label, summary, input, select {
  -webkit-tap-highlight-color: transparent;
}
.btn, .chip, .nx, .totop, .mtile, [data-shelf-btn], [data-result-view],
[data-result-sort], [data-new-period], .rail-nav button, .pager a {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
/* 押している間だけ、わずかに沈める。**触った手応えを返す** */
@media (hover: none) {
  .btn:active, .chip:active, .nx:active, .totop:active,
  [data-shelf-btn]:active, [data-result-view]:active,
  [data-new-period]:active, .rail-nav button:active, .pager a:active {
    filter: brightness(.94);
    transform: scale(.985);
  }
}



/* **クレジットのリンクにサイト側のCSSを一切当てない。**
   器の `.yahoo-credit` に「色は触らない」と書いていたが、フッター全体に
   かかる `.site-footer a:hover { color: ライム }` と `transition: color`
   が**クレジットのリンクにも当たっていた**。指を乗せると指定の色が
   ライムに変わる＝改変で、ガイドラインはHTML/CSSの改変を禁じている
   （Codex監査 2026-08-24 P1-7）。

   snippet 自体は触れないので、**href で名指しして UA 既定へ戻す**。
   `all: revert` はサイト由来の指定を全部落とし、ブラウザ既定の
   リンク表示に戻す。hover/focus/active/visited も同じに揃えるので、
   どの状態でも色が動かない。

   **このURLは snippet の一部なので、変えるときは snippet ごと。**
   片方だけ書き換えると、この規則が当たらなくなって静かに元へ戻る。
   `tools/check_multistore_production.py` の `yahoo_credit_issues` が
   規則の実在を検査している。 */

/* 紙で買う導線。巻一覧の下に1行だけ置く。
   **電子の巻カードと同じ重さにしない**——主役は巻一覧で、これは補助。 */
.print-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--grid-half) 0 0;
}
.print-link .ad-pr { flex: 0 0 auto; }

/* ======================================================================
   方眼は body の背景1枚だけ（owner指摘 2026-08-24「方眼紙の形がめちゃくちゃ」）
   ----------------------------------------------------------------------
   面ごとに方眼を描くと、**その要素の左上が原点になる**ので、
   body の方眼と線がずれて交差し、格子が崩れて見える。
   実測（本棚 784px）では body・body::before・.shelf-controls の
   3枚が重なっていた。

   以前 owner から「トップの方眼紙が二重になってる」と言われて
   ホームの面は消したが、**本棚・固定ページ・本棚誘導が残っていた**。
   ここで全部消し、body の1枚に統一する。

   body の背景は子より必ず後ろに塗られるので、
   「子が背景を描いていない場所」には必ず方眼が出る。
   ====================================================================== */
.v7-grid-paper,
.v7-grid-paper::before,
.search-tab-surface,
.search-tab-surface::before,
/* **本体は外す。**`.home-shelf-cta` の黒は
   `linear-gradient(#202329 → var(--v7-dark))`＝background-image で描いている。
   ここに本体を入れていたため、方眼と一緒に**黒ごと消えて**いた
   （owner指摘 2026-08-24「フッター上の本棚誘導が黒じゃなくなってる」）。
   実測で背景 rgba(0,0,0,0)・文字 #f7f8f8 ＝ 白地に白文字になっていた。
   消したいのは方眼だけなので、**方眼を描いている ::before だけ**を対象にする。
   他の面（.home-search / .home-conditions-panel / .search-tab-surface）は
   単色の background-color なので、本体を入れたままでも色は残る。 */
.home-shelf-cta::before,
.shelf-intro::before,
.shelf-screen .shelf-controls,
.fixed-page-body > .static-switch,
.cta::before,
.home-search,
.home-search::before,
.home-conditions-panel,
.home-conditions-panel::before {
  background-image: none !important;
}

/* ======================================================================
   /search/ をホームと同じ流れにする（owner指摘 2026-08-24
   「メニューバーに条件で探すが残ってるんだけど、古いページに飛んでる」）
   ----------------------------------------------------------------------
   `/search/` は「条件を右カラムに固定し、左に節を1列で流す」2列組みだった。
   ホームは「条件が下へ広がり、節は2列で並ぶ」。**同じ機能なのに別の骨格**で、
   メニューから来ると別のサイトに見えていた。

   結果を出す面（`data-search-result-surface`）はこのページが持っているので、
   **骨格だけ**を揃える。中身の削除はしない——それをやったら検索が
   結果を出す場所を失う（2026-08-24 に一度やって実測で気づいた）。
   ====================================================================== */
@media (min-width: 768px) {
  .search-screen .search-layout {
    display: block;                 /* 2列組みをやめ、上から下へ流す */
  }
  .search-screen .search-condition-surface {
    padding: 14px 0 20px;
    border-left: 0;                 /* 右カラムの仕切りは要らなくなる */
  }
  .search-screen .search-discovery {
    padding: 6px 0 24px;
  }
  /* 節はホームと同じ2列に並べる */
  .search-screen .search-discovery > .works-section,
  .search-screen .search-discovery > .sec {
    display: block;
  }
  .search-screen .search-discovery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid);
    align-items: start;
  }
  .search-screen .search-discovery > .search-discovery-intro {
    grid-column: 1 / -1;
  }
  /* 節の中の書影は、ホームと同じレール（横スクロール） */
  .search-screen .search-discovery .works-grid.rail {
    display: flex;
    overflow-x: auto;
  }
}

/* ======================================================================
   カルーセルだと分かるようにする（owner指摘 2026-08-24
   「カルーセルなのがわからず途中で切れてるように見える」）
   ----------------------------------------------------------------------
   実測（1440px・アニメ化の節）: 器576px に対し中身1,448px。
   **6.1枚ぶんが隠れている**のに、`scrollbar-width: none` でつまみを消し、
   端の28pxのぼかしだけで「続きがある」を伝えようとしていた。
   ぼかしは弱く、右端の1枚が中途半端に切れた絵にしか見えない。

   3つ足す:
     1. **細いスクロールバーを出す**（消していたのを戻す）
     2. ぼかしを 28px → 56px に広げ、切れ目でなく「奥へ続く」ように見せる
     3. **送りボタン**を右端に浮かせる（触れる面44px・キーボードでも押せる）
   ====================================================================== */
.rail {
  /* つまみは出す。**消すと、触れる機器以外では送れることが分からない** */
  scrollbar-width: thin;
  --fade: 56px;
}
.rail::-webkit-scrollbar { display: block; height: 6px; }
.rail::-webkit-scrollbar-thumb {
  background: rgb(22 24 28 / 22%);
  border-radius: var(--radius-pill);
}
.rail::-webkit-scrollbar-track { background: transparent; }

/* 送りボタン。**節の右上、「すべて見る」の隣**に置く。
   レールの上に浮かせると書影を隠すので、見出しの行に並べる */
.rail-nav {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}
.rail-nav button {
  width: 32px;
  height: 32px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 1px solid var(--v7-line);
  border-radius: var(--v7-radius);
  cursor: pointer;
  transition: background-color .28s ease, border-color .28s ease, color .28s ease;
}
.rail-nav button:disabled {
  color: var(--v7-dim);
  opacity: .45;
  cursor: default;
}
@media (hover: hover) {
  .rail-nav button:not(:disabled):hover {
    background: var(--v7-lime);
    border-color: var(--v7-ink);
  }
}
.rail-nav svg { width: 16px; height: 16px; }

/* 見出しと補足の距離を詰める（owner指摘 2026-08-24
   「見出しと補足の距離が空いている」）。
   実測で14px空いていた。見出しは `min-height: 44px`（押す面の確保）だが、
   **見出しは押すものではない**。文字は44pxの器の中で上下中央に置かれるため、
   下に余りが出て、そのぶん補足が離れて見えていた。
   行の高さを文字に合わせ、補足を近づける。 */
.section-head > h2,
.section-head > .section-title {
  min-height: 0;
  align-items: baseline;
}
.section-head > .section-note {
  margin-top: 2px;
}

/* 見出しの右側（「すべて見る」＋カルーセルの送りボタン）。
   **2列gridの2列目をここが受ける。**別々に置くと同じ列で重なり、
   3つ目の要素として置くと独立した行を作って見出しと補足の間が
   14px→50pxに広がる（2026-08-24 に実測して気づいた）。 */
.section-head-actions {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.rail-nav-alone { grid-column: 2; grid-row: 1; }


/* ======================================================================
   スマホの書影を大きくする（owner指摘 2026-08-24「書影が小さい」）
   ----------------------------------------------------------------------
   実測（iPhone相当 390px・3x）:
     レールのタイル 146px、その中の書影が **132px**。
     タイルの幅すら使い切っておらず、14px を余らせていた。

   素材は Yahoo!ショッピングの 600x600 で、**書影の実体は 423x600**
   （キャンバスの中で縦いっぱい。2件をデコードして実測）。
   3x の端末では
     146px → 438デバイスpx（素材の97%＝ほぼ等倍）
     168px → 504デバイスpx（素材の84%＝1.19倍に伸ばす）
   1.19倍は 600x600 を 132px に押し込めていた 3.2倍の余りから見れば
   ごくわずかで、粗さより「大きく見える」ほうが効く。

   **168px を採る。**390px の画面で 1.9枚ぶんになり、
   2枚目が半端に切れることで「横に続く」ことも同時に伝わる。

   BOOK☆WALKER しか無い144作品（全体の7%）は素材が180x256なので、
   168px でも 3x では 504/180＝2.8倍に伸びる。ここは元から伸びており
   （132pxでも2.2倍）、素材が無い以上どうにもならない。
   ====================================================================== */
@media (max-width: 767px) {
  .rail > .tile,
  .rail > .mtile,
  .rail > .work-card,
  .rail > .gcard,
  .works-grid.rail > *,
  .result-grid.rail > *,
  div.rail > * { width: 168px !important; max-width: 168px !important; }

  /* **タイルの幅を使い切る。**132px の固定をやめる。
     `max-height: 188px` も外す——外さないと幅だけ168pxに伸びて
     縦が188pxのままになり、書影が 70:100 ではなく 168:188 に潰れる
     （実測でそうなった）。この上限は BOOK☆WALKER の 180x256 しか
     素材が無かった頃のもので、Yahoo!の600x600には当てはまらない。 */
  .rail .list-cover,
  .rail img.cv { width: 100%; max-width: 100%; max-height: none; }

  /* 気分の列も同じ。`.moodpick-cover` は 132x188 の直指定だった */
  .moodrail > * { width: 168px !important; max-width: 168px !important; }
  .moodpick { min-width: 168px; }
  .moodpick-cover { width: 100%; height: auto; aspect-ratio: 70 / 100; }
}


/* ======================================================================
   気分の列は、広い画面では「列」ではなく格子（不具合の修正 2026-08-24）
   ----------------------------------------------------------------------
   設計では 768px以上で `.moodrail` を2列（検索の面は3列）の格子にし、
   タイルを `width: 100%` で伸ばす。横スクロールしないので
   `overflow: visible` でよい——**格子であるかぎりは。**

   ところが 2026-08-23 に「レールは grid ではなく flex」を
   `div.rail { display: flex !important }` で当てたとき、
   **この格子まで flex に戻していた。**器は `overflow: visible` のままなので、
   実測（768px）で器360pxに対し中身1,248px が**はみ出したまま、
   スクロールもできない**状態だった。隣の桁にかぶり、その先の気分には
   どうやっても届かない。`html { overflow-x: hidden }` が最後に切るので、
   ページが横に伸びない代わりに**黙って消えていた。**

   広い画面では格子に戻す。`!important` で潰されたので、こちらも同じ強さで。
   ====================================================================== */
@media (min-width: 768px) {
  .home-screen .moodrail,
  .search-screen .search-discovery .moodrail {
    display: grid !important;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .home-screen .moodrail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .search-screen .search-discovery .moodrail { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .home-screen .moodrail > *,
  .search-screen .search-discovery .moodrail > * {
    width: 100% !important;
    max-width: none !important;
  }
  .home-screen .moodrail .moodpick-cover,
  .search-screen .search-discovery .moodrail .moodpick-cover {
    width: 100%; height: auto; aspect-ratio: 70 / 100;
  }
}


/* ======================================================================
   作品ページの「似ている作品」「公式・関連」も、広い画面では格子
   （不具合の修正 2026-08-24。気分の列と同じ原因）
   ----------------------------------------------------------------------
   1024px以上では2列の格子にしてタイルを `width: 100%` で伸ばす設計だが、
   `div.rail { display: flex !important }` がそれを flex に戻していた。
   器は格子の前提で `overflow: visible` のままなので、実測（1024px）で
   器360pxに中身714px／896px がはみ出し、**似ている作品2件・公式関連3件が
   スクロールもできず届かない**状態だった。

   `html { overflow-x: hidden }` が最後に切るのでページは横に伸びず、
   **欠けていること自体が見えない。**この種は実ブラウザで測らないと出ない。
   ====================================================================== */
@media (min-width: 1024px) {
  .work-screen .similar-section > .rail,
  .work-screen .official-related-section > .rail {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .work-screen .similar-section > .rail > *,
  .work-screen .official-related-section > .rail > * {
    width: 100% !important;
    max-width: none !important;
  }
}


/* ======================================================================
   本棚が空のときの入口（owner確定 2026-08-25）
   ----------------------------------------------------------------------
   空の本棚には「作品をさがす」と「本棚を復元する」しか無く、前者は
   ホームへ戻すだけだった。**何も決まっていない人を出発点へ押し返す**形で、
   本棚が空＝まだ何も見つけていない人にとっていちばん要る場所が空だった。

   置くのは気分8つとアニメ化への入口。**書影は出さない**——
   空の面に書影を並べると本棚そのものと見分けがつかなくなる。
   ここは行き先の一覧であって、作品の一覧ではない。
   ====================================================================== */
.shelf-empty-entries {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--v7-line, #e2e4e8);
}
.shelf-empty-lead {
  margin: 0 0 10px;
  color: var(--v7-dim);
  font: 700 var(--fs-2xs)/1.4 var(--sans);
}
.shelf-empty-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.shelf-empty-moods .chip {
  /* **押せる大きさを確保する。**指で押す面なので44pxを下回らせない */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
}
.shelf-empty-anime { margin: 14px 0 0; }
.shelf-empty-anime a { font: 700 var(--fs-sm)/1.6 var(--sans); }


.work-screen .buy-single { max-width: 320px; }
@media (min-width: 768px) {
  .work-screen .buy-single { max-width: 260px; }
}

/* 送りボタンは、指でなぞれない幅でだけ出す。
   実測（2026-08-29）: 送りボタンは**どの幅でも68px**を占め、
   「すべて見る →」と合わせて右側が172px固定。320pxの端末では
   画面の54%が右側に取られ、見出しの器が101pxしか残らなかった。
   1024px未満はレールを指でなぞれる（.rail は overflow-x:auto で
   スクロールバーも出している）ので、ボタンより見出しに幅を渡す。 */
@media (max-width: 1023.98px) {
  .section-head .rail-nav { display: none; }
}

/* 「すべて見る」の矢印は、幅が足りないときだけ引っ込める。
   実測（2026-08-29）: 矢印を含めた「すべて見る →」は88px。
   320pxと768px（節が2列になる幅）では、見出しが8px・7px 足りずに
   件数が省略記号に化けていた。矢印はリンクであることの装飾で、
   件数は情報。**先に消すのは装飾のほう。** */
@media (max-width: 899.98px) {
  .section-head .more-arrow { display: none; }
}


/* **768〜1023px（タブレット幅）も132pxのままだった。**
   タイルは168pxなのに書影が132pxで、器すら埋めていない
   ——スマホで 2026-08-24 に直したのと同じ形が、この帯だけ残っていた。
   結果、**スマホ(168px)よりタブレットのほうが小さい**状態だった。
   まず全ての広い幅で上限を外し、器を埋めさせる。 */
@media (min-width: 768px) {
  /* 上限を外す。外さないと幅だけ伸びて縦が188pxのままになり、
     書影が 70:100 ではなく 210:188 に潰れる（スマホで実際にそうなった） */
  /* **上限を外すのは、代わりの幅を与える場所だけ。**
     `max-width` を外して幅を決めずにおくと、書影は原寸（839px）まで
     伸びる。ここで外すのはレールと気分——どちらも直後に
     `width: 100%` で器に合わせている。結果カードは幅を決める
     1024px以上でだけ外す。 */
  .rail .list-cover,
  .rail img.cv,
  /* **気分の書影にはclassが付いていない。**`.mt-cover > img` でしか
     掴めず、`.rail .list-cover` では当たらない。当たらないまま器だけ
     270pxに広げたので、書影が132pxのまま左上に寄って灰色の空白が出た */
  .mt-cover > img {
    max-width: none;
    max-height: none;
  }
  .mt-cover > img { width: 100%; height: 100%; }

  /* 器を埋める。768〜1023pxではタイルが168pxなので 168x240 になり、
     スマホと同じ大きさに揃う */
  .rail .list-cover,
  .rail img.cv { width: 100%; aspect-ratio: 70 / 100; }
}

@media (min-width: 1024px) {
  /* レールのタイル。168 → 210px。576pxの器で2.6枚、
     1280px以上で1列になると5.4枚見える */
  .rail > .tile,
  .rail > .mtile,
  .rail > .work-card,
  .rail > .gcard,
  .works-grid.rail > *,
  .result-grid.rail > *,
  div.rail > * { width: 210px; max-width: 210px; }

  /* 気分の列。`.moodpick-cover` は 132x188 の直指定だった */
  .moodpick { min-width: 210px; }
  .moodpick-cover { width: 210px; height: auto; aspect-ratio: 70 / 100; }

  /* 結果のカード。402pxの器に132pxを置いていた。
     180pxにしても文字側に210px残る。
     **上限の解除と幅の指定は必ず同じブロックに置く**（上の注記） */
  .result-grid .list-cover,
  .result-grid img.cv,
  .result-grid .work-cover { max-width: none; max-height: none; }
  .result-grid .gcard .list-cover,
  .result-grid .work-card .list-cover {
    width: 180px;
    height: auto;
    aspect-ratio: 70 / 100;
    flex: 0 0 180px;
  }
}

/* 1280px以上では、HOMEの節を2列組みから**横幅いっぱいの1列**にする。
   実測（1440px）: 器1200pxを2列に割ると1節576pxで、210pxのタイルが
   2.6枚しか見えない。1列なら5.4枚並び、「表紙の壁」になる。
   気分は横スクロールではなく格子なので、列数のほうを増やす。 */
@media (min-width: 1280px) {
  .discover-body.home-screen { grid-template-columns: minmax(0, 1fr); }
  /* 2列の指定が `!important` なので、こちらも同じ強さで上書きする
     （このファイル 8839行）。8件が4列×2行に収まる */
  .home-screen .moodrail { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .result-grid .gcard .list-cover,
  .result-grid .work-card .list-cover { width: 200px; flex-basis: 200px; }
}

/* 本棚ボタンの角丸を、表示モードによらず揃える
   （owner指摘 2026-08-29「この2枚で不揃いでしょ／元々揃ってたよ」）
   ----------------------------------------------------------------------
   実測（2026-08-29・1440px）: 同じ `button.save-btn` が
     2列（値1）  border-radius 5px
     1列（値list）/ 2列操作なし（値2）/ 4列（値4）  **99px**
   土台の `.save-btn { border-radius: var(--radius-pill) }` は旧テーマの名残
   （公開中の旧版は --radius:14px＋99pxのピル）。v7 のトークンは
   `--v7-radius: 5px` で、ツールバー・表示切替・カード・selectは全て5px。

   ズレた経緯: 2026-08-22 に「2列でボタンがカードから112〜174pxはみ出す」
   を直したブロック（5416行）が、ついでに `border-radius: var(--v7-radius)`
   を入れた。**そのブロックが `[data-result-view="1"]` 限定**だったため、
   他の3モードだけ99pxのまま取り残された。

   ここではモードを問わず当てる。値1は上の(0,4,2)の指定が勝つが、
   同じ `var(--v7-radius)` なので結果は全モードで揃う。 */
.result-screen .result-grid .result-card-actions > button,
.search-screen .result-grid .result-card-actions > button,
.shelf-screen #shelfGrid .result-card-actions > button {
  border-radius: var(--v7-radius);
}

/* 文字を入力する欄は 16px を下回らせない（DESIGN.md §2）
   ----------------------------------------------------------------------
   **iOS Safariは、16px未満の `input` にフォーカスすると画面を自動で拡大する。**
   個別に直すと再発する。2026-08-19に検索欄15pxで一度直したのに、
   2026-08-29の実測では **13px**（`.hero-search input` が `--fs-sm`）に
   戻っていた。**欄の種類でまとめて縛る。**

   対象は文字を入力する欄だけ。チェックボックス・ラジオ・レンジは
   文字を入力しないので拡大は起きず、大きくすると操作面がずれる。
   `aria-hidden` の select（並べ替えの実体。見た目は別のボタン）も
   利用者がフォーカスできないので対象外。 */
input:is([type="text"], [type="search"], [type="email"], [type="url"],
         [type="tel"], [type="number"], [type="password"], [type="date"]),
input:not([type]),
textarea,
select:not([aria-hidden="true"]) {
  font-size: var(--fs-md);
}

/* 結果ツールバーは、**画面の幅ではなく器の幅**で折る
   ----------------------------------------------------------------------
   `@media (max-width: 380px)` で折っていたが、これは画面の幅で、
   本当の制約は器の幅。実測（1024px・2026-08-29）:
     .result-controls（器）      320px、その中の .result-toolbar は 271px
     .result-toolbar の列        148px + 188px = **336px**
   列の合計が器より65px大きく、**表示ボタンが器の外へはみ出して
   結果グリッド（x=346〜）に重なっていた。**押しても結果カードが
   クリックを受け取る。5幅ハーネスの「4列で表示」クリックがこれで落ちた。

   重なり自体は前からあり、書体の段を直してボタンが4px右へ動いたことで
   初めて検査に掛かった。**露見しただけで、原因は前からある。**

   器で切れば、画面が広くても器が狭い場面（結果画面の左カラム＝271px）と、
   画面が狭くても器が広い場面（スマホ1列組み＝391px）の**両方**が正しくなる。
   コンテナクエリは Chrome 105 / Safari 16 / Firefox 110 以降で使える。 */
.result-controls,
.new-list-controls,
.shelf-controls {
  container-type: inline-size;
  container-name: resultbar;
}
/* 操作(148px)＋間隔(6px)＋表示切替(188px)＝342px。
   それを下回る器では上下に分ける。**重ねない** */
@container resultbar (max-width: 341px) {
  /* **同じ経路・同じ詳細度で書く。**`.result-toolbar`（0,1,0）だけだと
     `@media (min-width:768px) .result-panes > .result-controls > .result-toolbar`
     （0,3,0）に負ける。このファイルで一度踏んだ罠（8200行の注記）。 */
  .result-panes > .result-controls > .result-toolbar,
  .result-controls > .result-toolbar,
  .new-list-controls > .result-toolbar,
  .shelf-controls > .result-toolbar,
  .result-toolbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sort" "action" "view" "bulk";
  }
  .result-view-row { justify-self: start; }
  .result-action-row { min-width: 0; }
}


.work-screen .buy-single > a,
.work-screen .buy-single > span {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  color: var(--v7-ink);
  background: var(--v7-card);
  border: 2px solid var(--v7-line);
  border-radius: var(--v7-radius);
  font-family: var(--sans);
  text-align: left;
  text-decoration: none;
}
.work-screen .buy-single > a:hover { border-color: var(--v7-ink); }
.work-screen .buy-single > a:focus-visible { outline: 2px solid var(--v7-ink); outline-offset: 2px; }
.work-screen .buy-single.is-unavailable > span { color: var(--v7-dim); border-style: dashed; }
.work-screen .buy-single .volume-cover {
  display: block; width: 100%; aspect-ratio: 70 / 100; object-fit: contain;
  background: var(--v7-card);
  border-radius: calc(var(--v7-radius) - 2px) calc(var(--v7-radius) - 2px) 0 0;
}
.work-screen .buy-single .volume-copy {
  min-width: 0; padding: 7px; display: grid;
  grid-template-columns: minmax(0, 1fr) 18px; gap: 6px; align-items: start;
}
.work-screen .buy-single .volume-text { min-width: 0; }
.work-screen .buy-single .volume-text strong {
  display: block; font: 700 var(--fs-xs)/1.4 var(--sans); overflow-wrap: anywhere;
}
.work-screen .buy-single .volume-text small {
  display: block; margin-top: 2px; color: var(--v7-dim);
  font: 400 var(--fs-3xs)/1.4 var(--sans);
}


/* **注記はボタンの下。**inline要素のままだとボタンの右に回り込み、
   幅が足りず「電子書籍・試し／読み」と2行に割れていた（実測 390px）。 */

/* 新刊のホーム入口は、スマホ2列を維持しつつ、広い画面では書影を
   4〜6列にして一覧性を出す。HTMLには6件を残し、スマホだけ先頭3件を
   入口として見せる（続きは「すべて見る」へ）。 */
.home-screen .home-editorial-sections { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .home-screen .new-section .home-new-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .home-screen .new-section .home-new-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .home-screen .new-section .home-new-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-screen .new-section .home-new-grid > *:nth-child(n + 4) {
    display: none;
  }
}

/* 気分の書影を切らない。**`object-fit: cover` は上下を切る。**
   器は 70:100、素材は 844x1200（≒70:99.5）でほぼ同じ比率なのに、
   cover だと端が落ちる。実測で上下が切れていた
   （owner指摘 2026-08-30「PC版で添付が詰まってる」）。
   7048行の `object-fit: contain !important` が先にあるが、
   そのあとで width/height を100%にしたため cover 側が勝っていた。 */
.moodrail .mt-cover > img,
.moodrail .mt-cover .list-cover {
  object-fit: contain !important;
  background: var(--v7-card);
  /* **器を埋める。**`.mt-cover > img` にはclassが無いので
     `.rail .list-cover` の上限解除に当たらず、スマホでは器168x240に
     対して画像が132x188のままだった（2026-08-30 実測）。
     PC側は ≥768 のブロックで直したが、スマホが取り残されていた。 */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

/* 「すべて見る」の見た目を1つにする。
   実測（2026-08-30）で2種類に割れていた:
     アニメ化・長く続いている  14px / 400 / 下線あり
     新刊・未読の新巻          12px / 700 / 下線なし
   同じ役割のリンクが節によって別物に見えていた
   （owner指摘「文字の大きさもフォントも下線の有無もバラバラ」）。
   `.section-head > a` への指定が2か所にあり、片方だけが
   `.section-head-actions`（送りボタンと同じ器）に包まれた節に効いていた。
   **どの節でも同じになるよう、包まれた場合も含めて1つに揃える。** */
.section-head > a,
.section-head .section-head-actions > a,
.works-more a,
.more {
  font: 700 var(--fs-xs)/1.7 var(--sans);
  letter-spacing: normal;
  text-decoration: none;
  color: var(--v7-ink);
}
.section-head > a:hover,
.section-head .section-head-actions > a:hover,
.works-more a:hover,
.more:hover { text-decoration: underline; }



/* 書影はLinkSwitchが変換する同じ商品の直接リンク。題名の自サイトリンクと分ける。 */
.renta-cover-link,
.yahoo-cover-link {
  position: relative;
  display: block;
  flex: none;
  color: inherit;
  line-height: 0;
  text-decoration: none;
}
.renta-cover-link:focus-visible,
.yahoo-cover-link:focus-visible {
  outline: 3px solid var(--v7-ink);
  outline-offset: 3px;
}
.renta-cover-link .cover-ad-pr,
.yahoo-cover-link .cover-ad-pr {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 2;
  margin: 0;
  padding: 3px 5px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgb(17 17 17 / 82%);
  font: 700 var(--fs-3xs)/1.2 var(--sans);
  letter-spacing: 0;
}
.mt-cover > .renta-cover-link,
.mt-cover > .yahoo-cover-link,
.mt-cover > .renta-cover-link > .list-cover,
.mt-cover > .yahoo-cover-link > .list-cover {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}
.tile > .renta-cover-link,
.tile > .yahoo-cover-link,
.new-release-card > .renta-cover-link,
.new-release-card > .yahoo-cover-link,
.shelf-grid > .work-card > .renta-cover-link {
  width: 100%;
}
.result-gcard > .renta-cover-link,
.result-gcard > .yahoo-cover-link {
  width: min(100%, 200px);
  align-self: center;
}
.tile > .renta-cover-link > .list-cover,
.tile > .yahoo-cover-link > .list-cover,
.new-release-card > .renta-cover-link > .list-cover,
.new-release-card > .yahoo-cover-link > .list-cover,
.result-gcard > .renta-cover-link > .list-cover,
.result-gcard > .yahoo-cover-link > .list-cover,
.shelf-grid > .work-card > .renta-cover-link > img.cv {
  width: 100%;
  max-width: none;
  max-height: none;
}
.mtile > .mt-name { text-decoration: none; }
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .renta-cover-link,
.shelf-screen #shelfGrid[data-result-view="list"] > .gcard > .yahoo-cover-link {
  width: 100%;
  border-radius: var(--v7-radius);
  overflow: hidden;
}


/* New-volume provenance sits beneath the work link on the shelf results. */
.new-priority-card:has(.publisher-release-source) .new-priority-link { min-height: 0; }
.new-priority-card > .publisher-release-source { padding: 0 13px 13px; margin: 0; }


/* ======================================================================
   配色の仕上げ（owner指示 2026-09-16）
   ----------------------------------------------------------------------
   本文は明るい紙面のまま、濃色はヘッダー・フッター・本棚への導線に
   限る。新刊と気分だけにごく薄い暖色を置き、書影の色を邪魔しない。
   ====================================================================== */
/* 新刊と気分の区画だけを薄い暖色で包む。書影そのものは白い器のまま。 */
.home-screen [data-latest-release-section],
.home-screen [data-home-mood],
.home-mood-panel .moodpick-section,
.moodpick-section[data-search-guide="mood"],
.new-screen .new-page-filled {
  background: var(--v7-warm);
  border-block: 1px solid var(--v7-warm-line);
}
.home-screen [data-latest-release-section],
.home-screen [data-home-mood],
.home-mood-panel .moodpick-section,
.moodpick-section[data-search-guide="mood"] {
  padding-block: var(--grid) var(--grid-half);
}

/* 見出しの下に短いライムの線を置き、区画の始まりを見つけやすくする。 */
.works-section .section-head > .section-title::after,
.works-section .section-head > h2::after {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 4px;
  background: var(--v7-lime);
}

/* 新刊カードには、書影へ重ならない小さなライムの目印を添える。 */
.new-release-card .new-release-meta::before,
.new-priority-card .new-priority-card-release::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px 1px 0;
  background: var(--v7-lime);
  vertical-align: middle;
}

/* 選択中の条件は濃色を使わず、他の選択状態と同じライムへ揃える。 */
.chip-applied,
.chip-applied:hover,
.chip-applied:focus-visible,
.chip-applied:active {
  color: var(--v7-ink);
  background: var(--v7-lime);
  border-color: var(--v7-lime-border);
}
/* Reading UI: the catalog, detail and shelf share one visual and action hierarchy.
   Scoped to the new build; the archived live design remains independently reproducible. */
body.reading-ui {
  --v7-page: #f8f9f6; --v7-card: #fff; --v7-ink: #20241f;
  --v7-dim: #626b61; --v7-line: #e0e5dc; --v7-chip: #f0f3eb;
  --v7-lime: #c5ed65; --v7-lime-border: #9ebd55; --v7-dark: #20241f;
  --v7-radius: 10px; --v7-content: 1180px;
  color: var(--v7-ink); background: var(--v7-page) !important;
  font-family: var(--sans); font-size: var(--fs-base); line-height: 1.7;
}
body.reading-ui .site-header {
  height: 72px; padding: 0; background: #20241f; clip-path: none;
  border-bottom: 1px solid #333b30; box-shadow: none;
}
body.reading-ui .site-header-inner {
  display: flex; align-items: center; width: 100%; max-width: 1244px;
  height: 72px; min-height: 0; padding: 0 32px; margin: 0 auto;
}
body.reading-ui .site-header :is(.brand,.brand-name,.site-header-action,.site-menu-toggle) { transform: none; }
body.reading-ui .brand { display:flex; align-items:center; gap:10px; margin-right:auto; }
body.reading-ui .brand-name { font: 700 var(--fs-xl)/1.2 var(--serif); letter-spacing: .02em; }
body.reading-ui .brand-mark { width: 28px; height: 28px; object-fit:contain; }
body.reading-ui .reading-nav { display:flex; align-items:center; gap:30px; margin-right:28px; }
body.reading-ui .reading-nav a { color:#c4cebe; font-size:var(--fs-sm); font-weight:600; padding:22px 0; text-decoration:none; }
body.reading-ui .reading-nav a[aria-current] { color:#d4f29d; box-shadow:inset 0 -3px #c5ed65; }
body.reading-ui .reading-nav a:hover { color:#fff; }
body.reading-ui .site-header-actions { gap:8px; }
body.reading-ui #main { width:100%; max-width:none; }
body.reading-ui #main :is(.page-body,.discover-body,.home-search,.home-conditions-panel,.home-mood-panel) {
  width:100%; max-width:1244px; margin-inline:auto; padding-inline:32px;
  background:none; border:0; clip-path:none;
}
body.reading-ui #main :is(.result-screen,.work-screen,.shelf-screen,.search-screen) { padding-block:34px 64px; }
body.reading-ui #main :is(.v7-grid-paper,.result-head,.result-controls,.shelf-controls,.search-tab-surface,.work-summary) { background:none !important; }
body.reading-ui #main :is(.v7-grid-paper,.home-search)::before { content:none; }
body.reading-ui #main .reading-eyebrow {
  margin:0 0 12px; color:#66765a; font:700 var(--fs-2xs)/1.5 var(--sans); letter-spacing:.12em;
}
body.reading-ui #main .home-search {
  display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;
  padding-block:52px 42px; text-align:left;
}
body.reading-ui #main .reading-home-title { display:flex; align-items:center; gap:.26em; white-space:nowrap; margin:0 0 15px; font:700 var(--fs-display)/1.4 var(--serif); letter-spacing:.015em; }
body.reading-ui #main .reading-home-title .home-title-choices { display:grid; grid-template-rows:auto auto auto; justify-items:center; gap:0; padding-inline:.16em; font-size:.62em; line-height:1; color:#56743b; }
body.reading-ui #main .reading-home-title .home-title-cross { color:#20241f; font:400 .85em/1 var(--sans); letter-spacing:0; }
body.reading-ui #main .reading-home-lead { max-width:360px; margin:0; font-size:var(--fs-sm); color:var(--v7-dim); }
body.reading-ui #main .home-search-copy { margin:0 0 10px; padding:0; font:500 var(--fs-sm)/1.6 var(--sans); text-align:left; }
body.reading-ui #main .home-search-copy strong { font:700 var(--fs-lg)/1.4 var(--sans); background:none; text-decoration:none; }
body.reading-ui #main .home-search-tabs { display:flex; gap:24px; padding:0; margin:0 0 14px; border:0; justify-content:flex-start; }
body.reading-ui #main .home-search-tabs [data-home-tab] { min-height:40px; padding:6px 0; font-size:var(--fs-xs); flex:none; background:none; border-radius:0; }
body.reading-ui #main .home-search-tabs [aria-selected="true"] { border-bottom:2px solid #20241f; color:#20241f; }
body.reading-ui #main .hero-search { width:100%; max-width:none; margin:0; background:#fff; border:1px solid #cad2c2; border-radius: var(--v7-radius); min-height:54px; box-shadow:0 3px 10px #20241f05; }
body.reading-ui #main .hero-search input { height:54px; font-size:var(--fs-md); background:transparent; }
body.reading-ui #main .hero-search:focus-within { border-color:#688741; box-shadow:0 0 0 3px #c5ed6540; }
body.reading-ui #main .home-quick-tags { display:flex; flex-wrap:wrap; align-items:center; gap:2px 14px; margin-top:12px; }
body.reading-ui #main .home-quick-label { flex-basis:100%; color:#727c6a; font:500 var(--fs-2xs)/1.5 var(--sans); }
body.reading-ui #main .home-quick-tags a { position:relative; display:inline-flex; align-items:center; min-height:32px; }
body.reading-ui #main .home-quick-tags .home-quick-more { font-weight:600; border:0; text-decoration:none; }
body.reading-ui #main .home-quick-tags a { font-size:var(--fs-2xs); color:#64725b; text-decoration:none; border-bottom:0; }
body.reading-ui #main .home-quick-tags a::after { content:""; position:absolute; left:0; right:0; bottom:4px; height:1px; background:#b9c5ad; }
body.reading-ui #main .home-quick-tags .home-quick-more { text-underline-offset:0; }
body.reading-ui #main .discover-body { display:block; padding-bottom:56px; }
body.reading-ui #main .discover-body > .sec,
body.reading-ui #main .home-editorial-sections > .sec { padding:28px 0 30px; margin:0; border-top:1px solid var(--v7-line); }
/* The first editorial section needs the same breathing room as the following
   sections; a zero top padding made its divider sit against the heading. */
body.reading-ui #main .home-editorial-sections > .sec:first-child { padding-top:28px; }
body.reading-ui #main .home-mood-panel[hidden] { display:none !important; }
body.reading-ui #main .section-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin:0 0 22px; padding:0; }
body.reading-ui #main .section-head :is(h2,.section-title),
body.reading-ui #main :is(.similar-section,.official-related-section) > h2 { font:700 var(--fs-xl)/1.5 var(--serif); margin:0; padding:0; }
body.reading-ui #main .section-head h2 > span:not([data-ad-group-label]) { color:var(--v7-dim); font:500 var(--fs-xs)/1 var(--sans); margin-left:10px; }
body.reading-ui #main .section-head :is(> a,.section-head-actions) { margin-left:auto; }
body.reading-ui #main .section-head .section-note { flex-basis:100%; margin:0; padding:0; font:400 var(--fs-2xs)/1.6 var(--sans); color:var(--v7-dim); }
body.reading-ui #main .rail { display:grid !important; grid-auto-flow:column; grid-auto-columns:142px; grid-template-columns:none !important; gap:22px; padding:0 0 10px; margin:0; overflow-x:auto; align-items:start; -webkit-mask-image:none !important; mask-image:none !important; }
body.reading-ui #main .rail::after { content:none; }
body.reading-ui #main .rail > * { width:142px !important; max-width:142px !important; min-width:0; grid-area:auto; }
/* The home shelves align the artwork height; cover proportions determine width. */
body.reading-ui #main .home-screen .rail:not(.moodrail) { --shelf-cover-height:200px; grid-auto-columns:max-content; }
body.reading-ui #main .home-screen .rail:not(.moodrail) > .tile { width:calc(var(--shelf-cover-height) * var(--book-ratio, .7)) !important; max-width:none !important; }
body.reading-ui #main .rail > .tile { border:0; border-radius:0; background:none; padding:0; height:auto; box-shadow:none; }
body.reading-ui #main .tile-link { display:block; padding:0; min-height:0; text-decoration:none; }
body.reading-ui #main .tile .tl { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; margin:8px 0 0; padding:0; font:600 var(--fs-xs)/1.65 var(--sans); }
body.reading-ui #main .tile .shelf-buttons:empty { display:none; }
body.reading-ui #main :is(.renta-cover-link,.yahoo-cover-link) { display:block; position:relative; width:100%; height:auto; max-width:100%; align-self:start; color:inherit; text-decoration:none; line-height:1.4; overflow:visible; }
body.reading-ui #main :is(.renta-cover-link,.yahoo-cover-link) > :is(img,.list-cover,.cv) {
  display:block; width:100%; height:auto; aspect-ratio:auto; max-width:none; max-height:none;
  object-fit:contain !important; margin:0; border:0; border-radius: var(--radius-cover); background:#fff; box-shadow:0 2px 6px #20241f12;
}
body.reading-ui #main .cover-store-caption { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2px 5px; padding-top:5px; min-height:0; color:#72796b; }
body.reading-ui #main .tile .tags { display:flex; flex-wrap:wrap; gap:4px; margin:7px 0 0; padding:0; height:auto; max-height:none; }
body.reading-ui #main .tile .tags > i,
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .tags > [data-core-tag] { display:inline-block; padding:3px 5px; border:0; border-radius:var(--radius-cover); background:#e7efda; color:#496035; font:500 var(--fs-2xs)/1.4 var(--sans); }
body.reading-ui #main .cover-placeholder-link { display:block; width:100%; max-width:100%; text-decoration:none; }
body.reading-ui #main .cover-placeholder-link > img { display:block; width:100%; height:auto; aspect-ratio:7/10; border:0; border-radius:var(--radius-cover); }
body.reading-ui #main .cover-placeholder-caption { display:block; padding-top:7px; color:#72796b; font:400 var(--fs-3xs)/1.4 var(--sans); }
body.reading-ui #main [data-cover-unavailable-source][hidden] { display:none !important; }
body.reading-ui #main img[data-cover-unavailable-image][hidden] { display:none !important; }
/* Each labeled section declares its own advertising scope before its covers. */
body.reading-ui #main .section-head h2:has([data-ad-group-label]) { display:flex; align-items:center; flex-wrap:wrap; column-gap:0; row-gap:6px; }
body.reading-ui #main .section-ad-pr { display:inline-flex; flex:none; align-items:center; white-space:nowrap; margin-left:10px; padding:3px 7px; border:1px solid rgba(189,200,181,.62); border-radius:var(--v7-radius); background:rgba(237,241,232,.68); color:#667260; opacity:.78; font:500 var(--fs-2xs)/1.4 var(--sans); letter-spacing:0; vertical-align:middle; }
body.reading-ui #main [data-ad-group] .cover-ad-pr { display:none; }
body.reading-ui #main [data-ad-group] .cover-store-caption { min-height:0; flex-direction:row; padding-top:7px; }
/* Home paper editions are identified after the work information. */
body.reading-ui #main .home-screen .cover-store-caption { display:none; }
body.reading-ui #main [data-ad-group]:not(:has(.renta-cover-link,.yahoo-cover-link,.renta-product-link,[data-volume-store])) > :is(.section-head,.collection-heading,.new-list-info) [data-ad-group-label] { display:none; }
body.reading-ui #main .result-ad-disclosure { margin:0 0 16px; }
body.reading-ui #main .result-ad-disclosure .section-ad-pr { margin-left:0; }
body.reading-ui #main .cover-store-name { font:400 var(--fs-3xs)/1.4 var(--sans); }
body.reading-ui #main .cover-ad-pr { position:static; margin:0; padding:0; border:0; border-radius:0; color:#747d6e; background:none; font:400 var(--fs-3xs)/1.4 var(--sans); }
/* The measured frame excludes only the original image's outer white canvas. */
body.reading-ui #main .yahoo-cover-link > .cover-image-frame {
  display:block; position:relative; width:100%; aspect-ratio:var(--cover-frame-ratio);
  overflow:hidden; border-radius:var(--radius-cover); background:#fff; box-shadow:0 2px 6px #20241f12;
}
body.reading-ui #main .yahoo-cover-link > .cover-image-frame > img {
  position:absolute; left:var(--cover-image-offset-x); top:var(--cover-image-offset-y);
  width:calc(100% * var(--cover-image-scale-x)); height:calc(100% * var(--cover-image-scale-y));
  max-width:none; max-height:none; aspect-ratio:auto; object-fit:contain !important;
  margin:0; border:0; border-radius:0 !important; box-shadow:none;
}
body.reading-ui #main .collection-heading { margin:0 0 28px; padding:0; }
body.reading-ui #main .collection-heading h1 { font:700 var(--fs-xl)/1.4 var(--serif); margin:0 0 10px; }
body.reading-ui #main .collection-heading > p:last-child { font-size:var(--fs-xs); color:var(--v7-dim); margin:0; }
body.reading-ui #main :is(.result-panes,.shelf-panes) { display:grid; grid-template-columns:210px minmax(0,1fr); gap:32px; align-items:start; padding:0; }
body.reading-ui #main :is(.result-controls,.shelf-controls) { position:sticky; top:94px; width:100%; max-width:none; padding:0; border:0; }
body.reading-ui #main .result-head { padding:0 0 20px; margin:0 0 18px; border-bottom:1px solid var(--v7-line); }
body.reading-ui #main .page-count { margin:0 0 14px; font-size:var(--fs-lg); }
body.reading-ui #main .result-listing-note { padding:0; margin:0 0 16px; font-size:var(--fs-2xs); line-height:1.8; }
body.reading-ui #main .search-query-summary { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 12px; color:#66715e; font-size:var(--fs-2xs); }
body.reading-ui #main .search-query-summary strong { color:var(--v7-ink); font-weight:600; }
body.reading-ui #main .search-query-clear,
body.reading-ui #main .search-condition-clear { min-height:34px; padding:6px 10px; border:1px solid #d4ddd0; border-radius:var(--v7-radius); background:#fff; color:#66715e; font:500 var(--fs-2xs)/1.4 var(--sans); }
body.reading-ui #main .search-query-clear { margin-left:auto; }
body.reading-ui #main .search-condition-selection { margin-top:18px; padding:14px; border:1px solid var(--v7-line); border-radius:var(--v7-radius); background:#fff; }
body.reading-ui #main .search-condition-status { margin:0 0 10px; color:#66715e; font-size:var(--fs-2xs); }
body.reading-ui #main .search-condition-clear { margin:0 0 12px; }
body.reading-ui #main .search-zero-alternatives { margin:0 0 18px; padding:14px; border:1px solid var(--v7-line); border-radius:var(--v7-radius); background:#f8faf6; }
body.reading-ui #main .search-zero-alternatives > p { margin:0 0 9px; color:#66715e; font-size:var(--fs-2xs); }
body.reading-ui #main .search-zero-alternatives .tag-chips { display:flex; flex-wrap:wrap; gap:6px; }
body.reading-ui #main .search-zero-alternatives .chip { display:inline-flex; align-items:center; min-height:34px; padding:6px 10px; text-decoration:none; }
body.reading-ui #main .applied-chips { margin:0 0 12px; padding:0; }
body.reading-ui #main .chip { font-size:var(--fs-xs); border:1px solid #dce3d4; background:#f0f3eb; border-radius: var(--v7-radius); color:#46533c; }
body.reading-ui #main .chip-applied { background:#e3edce; border-color:#d0dfaF; min-height:36px; padding:7px 12px; }
body.reading-ui #main .result-condition-open { width:100%; min-height:44px; padding:8px; border:1px solid #9ba891; border-radius: var(--v7-radius); background:#fff; font:600 var(--fs-xs)/1.5 var(--sans); }
body.reading-ui #main .result-toolbar { display:flex; flex-direction:column; gap:14px; padding:0; margin:0; border:0; }
body.reading-ui #main .result-sort-row { display:flex; flex-direction:column; gap:6px; width:100%; margin:0; }
body.reading-ui #main .result-control-label { font-size:var(--fs-2xs); color:#66715e; }
body.reading-ui #main .result-select-shell { width:100%; }
body.reading-ui #main .result-select-trigger { min-height:44px; border:1px solid #dce3d4; border-radius: var(--v7-radius); background:#fff; padding:9px 12px; }
body.reading-ui #main .result-view-row { order:2; width:100%; }
body.reading-ui #main .result-view-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; width:100%; }
body.reading-ui #main .result-view-buttons button { width:100%; height:44px; min-height:44px; border:1px solid #dce3d4; border-radius: var(--v7-radius); background:#fff; color:#798270; }
body.reading-ui #main .result-view-buttons [aria-pressed="true"] { background:#20241f; border-color:#20241f; color:#d5eeab; }
body.reading-ui #main .result-action-row { display:flex; flex-wrap:wrap; flex-direction:row; gap:6px 16px; min-width:0; padding:0; margin:0; }
body.reading-ui #main .result-action-row label { display:flex; align-items:center; min-height:36px; font-size:var(--fs-2xs); }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:24px 20px !important; align-items:stretch; padding:0; margin:0; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > article {
  display:flex; flex-direction:column; width:100%; min-width:0; height:auto; min-height:0; padding:14px;
  --reading-card-background:#fff; background:var(--reading-card-background); border:1px solid #e0e5dc; border-radius: var(--v7-radius); box-shadow:none; container-type:normal;
}
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > article::before,
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > article::after { content:none; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > article > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) { width:min(100%,150px); margin:0 auto 12px; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .work-main { display:flex; flex-direction:column; width:auto; min-height:0; padding:0; margin:0; text-decoration:none; gap:8px !important; color:inherit; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) :is(.gt,.work-title) { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font:700 var(--fs-base)/1.65 var(--sans); padding:0; margin:0; height:auto; min-height:0; max-height:none; letter-spacing:0; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .grid-meta { display:flex; flex-wrap:wrap; gap:4px 10px !important; font:400 var(--fs-2xs)/1.6 var(--sans); padding:0; margin:0; color:#6c7465; height:auto; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .grid-meta em { font-style:normal; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .tags { display:flex; gap:5px !important; flex-wrap:wrap; padding:0; margin:0; height:auto; max-height:none; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .tags > * { display:inline-flex; align-items:center; height:auto; padding:3px 6px; border:0; border-radius: var(--radius-cover); background:#f1f4ed; color:#627255; font:400 var(--fs-3xs)/1.4 var(--sans); }
body.reading-ui #main .work-detail-label { display:block; font:600 var(--fs-2xs)/1.5 var(--sans); color:#537139; padding-top:5px; }
/* Override the legacy two-column grid: labels keep equal padding and wrap as whole buttons. */
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .shelf-buttons { display:flex !important; flex-wrap:wrap; position:static; width:100%; padding:12px 0 0; margin-top:auto; gap:6px !important; border:0; background:none; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .shelf-buttons > button { flex:1 1 auto; width:auto; min-width:max-content; min-height:44px; border-radius: var(--v7-radius); font-size:var(--fs-2xs); padding:8px 12px; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .shelf-button-label { display:inline !important; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] { grid-template-columns:minmax(0,1fr) !important; gap:12px !important; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] > article { display:grid; grid-template-columns:112px minmax(0,1fr) 142px !important; align-items:start; gap:18px !important; padding:18px; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] > article > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) { width:112px; margin:0; grid-row:1/3; grid-column:1; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .work-main { grid-column:2; grid-row:1/3; align-self:center; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .shelf-buttons { grid-column:3; grid-row:1/3; align-self:center; flex-direction:column; padding:0; margin:0; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .shelf-buttons > button { flex:0 0 auto; align-self:flex-start; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .gt { font-size:var(--fs-md); -webkit-line-clamp:4; }
body.reading-ui #main .card-introduction { display:none; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .card-introduction { display:block; margin:2px 0 0; }
body.reading-ui #main .card-introduction-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; font:400 var(--fs-sm)/1.7 var(--sans); color:var(--v7-dim); }
body.reading-ui #main .card-introduction-source { display:block; margin-top:3px; font:400 var(--fs-2xs)/1.5 var(--sans); color:var(--v7-dim); }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="2"] { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="4"] { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:20px 14px !important; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) > article { --reading-card-background:transparent; padding:0; background:var(--reading-card-background); border:0; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) > article > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) { width:100%; margin:0 0 10px; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) .gt { -webkit-line-clamp:2; font-size:var(--fs-xs); line-height:1.65; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) :is(.grid-meta,.work-detail-label,.shelf-buttons) { display:none !important; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) .tags { display:flex !important; margin-top:7px; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) .tags > :not([data-core-tag]) { display:none; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] > article > .cover-placeholder-link { grid-column:1; grid-row:1/3; width:112px; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) > article.no-cover { --reading-card-background:#edf1e7; padding:14px; background:var(--reading-card-background); border:1px solid #e0e5dc; border-radius:var(--v7-radius); }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) > article.no-cover .work-main { justify-content:center; margin-block:auto; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="4"] .gt { font-size:var(--fs-xs); -webkit-line-clamp:2; }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > .no-cover { --reading-card-background:#f0f3eb; background:var(--reading-card-background); }
body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > .no-cover .work-main { min-height:140px; }
body.reading-ui #main .result-bulk-bar { padding:0 10px; flex-wrap:wrap; border-radius: var(--v7-radius); font-size:var(--fs-xs); }
body.reading-ui #main .result-bulk-bar.is-open { max-height:none; overflow:visible; padding-block:10px; }
body.reading-ui #main .result-bulk-bar [data-result-selected-count] { flex-basis:100%; }
body.reading-ui #main .work-layout { display:block; max-width:1020px; margin:auto; padding:0; }
body.reading-ui #main .work-layout > .work-main { display:block; width:100%; padding:0; }
body.reading-ui #main .work-return-row { padding:0; margin:0 0 22px; }
body.reading-ui #main .work-return { min-height:36px; font-size:var(--fs-xs); padding:0; border:0; background:none; color:#64725b; text-decoration:none; }
body.reading-ui #main .reading-work-hero { position:relative; display:grid; grid-template-columns:220px minmax(0,1fr); gap:46px; align-items:start; margin:0 0 46px; padding:28px; background:#fff; border:1px solid #e0e5dc; border-radius: var(--v7-radius); }
body.reading-ui #main .reading-work-hero > .work-ad-disclosure { position:absolute; top:28px; right:28px; display:block; min-height:0; margin:0; padding:0; border:0; border-radius:0; background:none; color:#75806e; opacity:.72; font:400 var(--fs-xs)/1.5 var(--sans); letter-spacing:.02em; white-space:nowrap; }
body.reading-ui #main .reading-work-hero[data-ad-group] .reading-eyebrow { padding-right:76px; }
body.reading-ui #main .reading-work-hero:not(:has(.volume-section)) { grid-template-columns:minmax(0,1fr); }
body.reading-ui #main .reading-work-hero .volume-section { grid-area:auto; grid-column:1; grid-row:1; padding:0; margin:0; border:0; width:220px; }
body.reading-ui #main .reading-work-hero .volume-section h2 { display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:0; font:600 var(--fs-xs)/1.4 var(--sans); }
body.reading-ui #main .reading-work-hero .volume-section h2 svg { width:14px; height:14px; }
body.reading-ui #main .reading-work-hero .volume-section h2 .ad-pr:not([data-ad-group-label]) { font-size:var(--fs-3xs); padding:2px 4px; border:0; color:#75806e; }
body.reading-ui #main .reading-work-hero .pad2 { padding:0; }
body.reading-ui #main .reading-work-hero .buy-single { width:100%; max-width:none; }
body.reading-ui #main .reading-work-hero .buy-single > a { display:block; width:100%; padding:0; border:0; background:none; border-radius:0; }
body.reading-ui #main .reading-work-hero .volume-cover { width:100%; max-width:100%; height:auto; aspect-ratio:auto; object-fit:contain !important; border-radius: var(--radius-cover); margin:0; }
body.reading-ui #main .reading-work-hero .volume-copy { display:flex; align-items:center; margin-top:14px; padding:13px 12px; color:#29351e; background:#c5ed65; border-radius: var(--v7-radius); }
body.reading-ui #main .reading-work-hero .volume-external-slot { flex:0 0 18px; margin-left:auto; }
body.reading-ui #main .reading-work-hero .volume-text { padding-right:12px; }
body.reading-ui #main .reading-work-hero .volume-copy { transition:background-color .16s ease,box-shadow .16s ease; }
body.reading-ui #main .renta-product-link:focus-visible .volume-copy { background:#b6e34f; box-shadow:0 0 0 3px #56743b40; }
@media (hover:hover) and (pointer:fine) {
  body.reading-ui #main .renta-product-link:hover .volume-copy { background:#b6e34f; box-shadow:0 3px 9px #40572b20; }
  body.reading-ui #main :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) { transition:transform .16s ease; }
  body.reading-ui #main :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link):hover { transform:translateY(-2px); }
  body.reading-ui #main :is(.tile-link,.result-card-link,.shelf-card-link):hover :is(.tl,.gt) { color:#496b30; text-decoration:underline; text-underline-offset:3px; }
}
@media (prefers-reduced-motion:reduce) {
  body.reading-ui #main :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link),
  body.reading-ui #main .reading-work-hero .volume-copy { transition:none; }
  body.reading-ui #main :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link):hover { transform:none; }
}
body.reading-ui #main .reading-work-hero .volume-text strong { font:700 var(--fs-sm)/1.5 var(--sans); }
body.reading-ui #main .reading-work-hero .volume-text small { display:block; color:#4d6036; font:400 var(--fs-3xs)/1.5 var(--sans); margin-top:2px; }
body.reading-ui #main .reading-work-hero .volume-section .note { font-size:var(--fs-3xs); line-height:1.7; color:#75806e; margin-top:12px; padding:0; }
body.reading-ui #main .reading-work-hero .work-summary { grid-area:auto; grid-column:2; grid-row:1; padding:0; width:100%; min-width:0; max-width:none; }
body.reading-ui #main .reading-work-hero:not(:has(.volume-section)) .work-summary { grid-column:1; }
body.reading-ui #main .work-summary .wt { font:700 calc(var(--fs-xl) * 1.25)/1.5 var(--serif); margin:0 0 14px; }
body.reading-ui #main .work-summary .work-authors { margin:0 0 24px; font-size:var(--fs-sm); }
body.reading-ui #main .work-summary .role-row { display:block; margin:14px 0; padding:0; }
body.reading-ui #main .work-summary .role-label { display:block; font-size:var(--fs-3xs); letter-spacing:.05em; margin-bottom:6px; color:#7d8776; }
body.reading-ui #main .work-summary .role-chips { display:flex; flex-wrap:wrap; gap:6px; }
body.reading-ui #main .work-summary .role-chips .chip { font-size:var(--fs-2xs); padding:4px 8px; }
body.reading-ui #main .reading-save-note { margin:30px 0 10px; font-size:var(--fs-2xs); color:#75806e; }
body.reading-ui #main .work-summary .wshelf { display:flex; width:100%; max-width:430px; gap:8px; padding:0; margin:0; }
body.reading-ui #main .work-summary .primary-state-actions { flex:1; gap:8px; }
body.reading-ui #main .work-summary .wshelf button { min-height:44px; font-size:var(--fs-xs); border-radius: var(--v7-radius); }
body.reading-ui #main .work-summary .print-link { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:22px 0 0; margin:22px 0 0; border-top:1px solid var(--v7-line); }
body.reading-ui #main .work-summary .print-link > a { border:0; padding:0; min-height:32px; background:none; font:500 var(--fs-xs)/1.5 var(--sans); text-decoration:underline; text-underline-offset:4px; }
body.reading-ui #main .work-summary .print-link .ad-pr { border:0; padding:0; color:#7d8776; font-size:var(--fs-3xs); }
body.reading-ui #main .work-description { margin:0; padding:0 0 30px; }
body.reading-ui #main .work-description h2 { margin:0 0 16px; font:700 var(--fs-xl)/1.5 var(--serif); }
body.reading-ui #main .work-description-text { max-width:780px; white-space:pre-line; font:400 var(--fs-sm)/1.9 var(--sans); }
body.reading-ui #main .work-description-source { margin:12px 0 0; color:var(--v7-dim); font-size:var(--fs-2xs); }
body.reading-ui #main .work-data-provenance { margin:0 0 26px; padding:12px 14px; border:1px solid var(--v7-line); border-radius:var(--v7-radius); background:#fafbf8; color:var(--v7-dim); }
body.reading-ui #main .work-data-provenance dl { display:flex; flex-wrap:wrap; gap:6px 24px; margin:0; }
body.reading-ui #main .work-data-provenance dl > div { display:flex; gap:8px; min-width:190px; font-size:var(--fs-2xs); line-height:1.6; }
body.reading-ui #main .work-data-provenance dt { color:#7b8577; }
body.reading-ui #main .work-data-provenance dd { margin:0; color:#5e695c; }
body.reading-ui #main .work-description-edition { margin:0 0 12px; color:var(--v7-dim); font-size:var(--fs-xs); }
body.reading-ui #main .work-description-fold > summary { cursor:pointer; padding:12px 0; font-size:var(--fs-sm); }
body.reading-ui #main .work-description-fold[open] > summary { margin-bottom:8px; }
body.reading-ui #main :is(.similar-section,.official-related-section,.work-source) { margin:0; padding:26px 0; border-top:1px solid var(--v7-line); }
body.reading-ui #main :is(.similar-section,.official-related-section) .rail { margin-top:20px; }
body.reading-ui #main .official-related-section .related-tile { padding:12px; min-height:130px; background:#fff; border:1px solid var(--v7-line); border-radius:var(--v7-radius); text-decoration:none; }
body.reading-ui #main .official-related-section .related-tile::before { content:none; }
body.reading-ui #main .official-related-section .related-tile .tl { margin:0 0 10px; min-height:0; -webkit-line-clamp:4; }

/* Detail-page recommendation rails mix Renta! and Yahoo! artwork.  Keeping
   each source image at its natural height makes the store caption and title
   jump vertically from card to card.  A shared contain-fitted slot keeps the
   artwork intact while giving the text below one baseline. */
body.reading-ui #main :is(.similar-section,.official-related-section) .rail {
  --detail-rail-cover-height: 200px;
}
body.reading-ui #main :is(.similar-section,.official-related-section) .rail > .tile > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) {
  display: grid;
  grid-template-rows: var(--detail-rail-cover-height) auto;
  align-content: start;
}
body.reading-ui #main :is(.similar-section,.official-related-section) .rail > .tile > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) > :is(img,.cover-image-frame) {
  grid-row: 1;
  width: 100%;
  height: var(--detail-rail-cover-height);
  max-height: none;
  object-fit: contain !important;
}
body.reading-ui #main :is(.similar-section,.official-related-section) .rail > .tile > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) > .cover-image-frame {
  aspect-ratio: auto;
}
body.reading-ui #main :is(.similar-section,.official-related-section) .rail > .tile > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) > :is(.cover-store-caption,.cover-placeholder-caption) {
  grid-row: 2;
}
body.reading-ui #main .work-source h2 { font:600 var(--fs-sm)/1.5 var(--sans); padding:0; margin:0 0 10px; }
body.reading-ui #main .work-source p { padding:0; font-size:var(--fs-2xs); }
body.reading-ui #main .work-shelf-guide { padding:16px 0 0; }
body.reading-ui #main .work-shelf-guide > .btn { width:auto; padding-inline:24px; background:#20241f; color:#e4edda; }
body.reading-ui #main .work-shelf-guide .home-shelf-cta { margin:0; }
body.reading-ui #main .work-shelf-guide [hidden] { display:none !important; }
body.reading-ui #main .shelf-tabs { display:flex; flex-direction:column; gap:6px; padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid var(--v7-line); }
body.reading-ui #main .shelf-tabs button { justify-content:flex-start; width:100%; min-height:46px; padding:8px 12px; background:transparent; border:0; border-radius: var(--v7-radius); color:#64725b; }
body.reading-ui #main .shelf-tabs [aria-selected="true"] { background:#e5edda; color:#263b18; }
body.reading-ui #main .shelf-tabs .tab-count { margin-left:auto; color:inherit; }
body.reading-ui #main .shelf-screen .result-action-row { align-self:stretch; justify-content:flex-start; }
body.reading-ui #main .shelf-screen .result-action-row label { justify-content:flex-start; padding-inline:0; }
/* Selection follows the visible cover edge, including framed Yahoo covers. */
body.reading-ui #main #shelfGrid.is-bulk > article { overflow:visible; cursor:pointer; }
body.reading-ui #main #shelfGrid.is-bulk > article.picked { background:var(--reading-card-background); box-shadow:none; }
body.reading-ui #main #shelfGrid.is-bulk > article.picked
  > :is(.renta-cover-link,.yahoo-cover-link,.shelf-card-link) > :is(img.cv,.cover-image-frame) {
  box-shadow:0 0 0 3px #446525;
}
body.reading-ui #main #shelfGrid.is-bulk > article:focus-visible:has(
  > :is(.renta-cover-link,.yahoo-cover-link,.shelf-card-link):not([hidden])
  > :is(img.cv:not([hidden]),.cover-image-frame)) { outline:none; }
body.reading-ui #main #shelfGrid.is-bulk > article:focus-visible
  > :is(.renta-cover-link,.yahoo-cover-link,.shelf-card-link) > :is(img.cv,.cover-image-frame) {
  outline:2px dashed #263b18; outline-offset:5px;
}
body.reading-ui #main #shelfGrid .shelf-status-marks { display:flex; flex-wrap:wrap; gap:6px; }
body.reading-ui #main #shelfGrid .shelf-status-marks .card-mark {
  display:inline-flex; align-items:center; gap:4px; width:auto; height:auto; min-height:0;
  margin:0; padding:3px 7px; border:0; border-radius:var(--radius-cover); background:#edf1e7;
  color:#496035; font:500 var(--fs-3xs)/1.4 var(--sans);
}
body.reading-ui #main #shelfGrid .shelf-status-marks .is-fav { color:#795715; background:#f5edd7; }
body.reading-ui #main #shelfGrid .shelf-status-marks .mark-icon { width:13px; height:13px; margin:0; }
body.reading-ui #main #shelfGrid .shelf-status-marks .is-fav .mark-icon path { fill:currentColor; }
body.reading-ui #main .shelf-empty { padding:48px 32px; background:#fff; border:1px solid var(--v7-line); border-radius: var(--v7-radius); }
body.reading-ui #main .shelf-empty h2 { font:700 var(--fs-xl)/1.5 var(--serif); }
body.reading-ui #main .shelf-restore { max-width:560px; padding:20px; margin-top:20px; border:1px solid var(--v7-line); border-radius:var(--v7-radius); background:#fff; }
body.reading-ui #main .shelf-restore label { display:block; font:600 var(--fs-sm)/1.5 var(--sans); }
body.reading-ui #main .shelf-restore p { margin:8px 0 12px; font-size:var(--fs-xs); }
body.reading-ui #main .shelf-restore input { display:block; width:100%; min-height:44px; padding:10px; border:1px solid #aeb9a5; border-radius:var(--radius-cover); background:#fff; font-size:var(--fs-base); }
body.reading-ui #main .shelf-restore-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
body.reading-ui #main .shelf-empty p { font-size:var(--fs-sm); }
body.reading-ui #main .shelf-transfer { padding:24px 0 0; margin-top:36px; border-top:1px solid var(--v7-line); background:none; }
body.reading-ui #main .shelf-transfer h2 { font:600 var(--fs-base)/1.5 var(--sans); }
body.reading-ui #main .shelf-transfer p { font-size:var(--fs-xs); }
body.reading-ui #main .home-shelf-cta { display:grid; grid-template-columns:1fr auto; gap:6px 24px; width:100%; max-width:100%; margin:32px 0 0; padding:34px; border-radius: var(--v7-radius); background:#20241f; clip-path:none; text-align:left; }
body.reading-ui #main .home-shelf-cta::before,body.reading-ui #main .home-shelf-cta::after { content:none; }
body.reading-ui #main .home-shelf-cta > * { margin:0; max-width:none; }
body.reading-ui #main .home-shelf-cta .ct { grid-column:1; grid-row:1; padding:0; text-align:left; color:#eef4e6; font:700 var(--fs-xl)/1.5 var(--serif); }
body.reading-ui #main .home-shelf-cta .cs { grid-column:1; grid-row:2; padding:0; text-align:left; color:#aab79f; font-size:var(--fs-xs); }
body.reading-ui #main .home-shelf-cta .btn { grid-column:2; grid-row:1/3; align-self:center; color:#20241f; background:#c5ed65; padding:12px 22px; }
body.reading-ui #main .moodrail { display:grid !important; grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(8,minmax(0,1fr)) !important; width:100%; gap:18px; padding:0; overflow:visible; }
body.reading-ui #main .moodrail > .mtile { container-type:inline-size; width:100% !important; max-width:none !important; padding:0; background:none; border:0; border-radius:0; }
body.reading-ui #main .moodrail .mt-cover { height:auto; width:100%; max-width:100%; margin:auto; aspect-ratio:auto !important; padding:0; background:none !important; border:0; border-radius:0; overflow:visible; }
body.reading-ui #main .moodrail .mt-cover > a { --mood-cover-height:min(220px, calc(100cqw / var(--rail-max-ratio, .8))); width:calc(var(--mood-cover-height) * var(--book-ratio, .7)); height:auto; margin-inline:0; }
body.reading-ui #main .moodrail .mt-name { display:flex; justify-content:flex-start; align-items:flex-start; gap:6px; padding:10px 0 0; margin:0; border:0; background:none; font-size:var(--fs-xs); line-height:1.6; text-decoration:none; white-space:normal; overflow:visible; }
body.reading-ui #main .moodrail .mt-name .mood-icon { flex:none; width:18px; height:18px; margin-top:1px; }
body.reading-ui #main .moodrail .mt-name > span { white-space:normal; display:block; -webkit-line-clamp:unset; overflow:visible; overflow-wrap:anywhere; text-overflow:clip; }
/* Mood glyphs use the same 24px / 2-unit geometry as the other monoline icons. */
body.reading-ui .mood-icon :is(path,circle,rect,line,polyline,polygon,ellipse) { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:none; }
body.reading-ui #main .search-discovery .moodrail { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
body.reading-ui #main .search-tab-surface { padding:0 0 24px; border-bottom:1px solid var(--v7-line); }
body.reading-ui #main .search-screen:has([data-search-result-surface]:not([hidden])) .search-tab-surface { display:none; }
body.reading-ui #main .reading-query-form { display:flex; align-items:center; gap:12px; max-width:740px; margin:0 0 28px; padding:0; }
body.reading-ui #main .search-tab-surface + .reading-query-form { margin-top:24px; }
body.reading-ui #main .reading-query-form input { flex:1; min-width:0; height:50px; padding:12px 16px; border:1px solid #cad2c2; border-radius:var(--v7-radius); background:#fff; font:400 var(--fs-md)/1.5 var(--sans); }
body.reading-ui #main .reading-query-form button { min-height:50px; padding:12px 20px; border:0; border-radius:var(--v7-radius); background:#20241f; color:#fff; font:600 var(--fs-xs)/1.5 var(--sans); }
body.reading-ui #main .search-layout { gap:36px; padding:26px 0; }
body.reading-ui #main .search-discovery { padding:0; min-width:0; }
body.reading-ui #main .search-discovery > .sec { padding:20px 0; border-bottom:1px solid var(--v7-line); }
body.reading-ui #main .search-discovery .section-head h2 { font-size:var(--fs-lg); }
body.reading-ui #main .search-discovery-intro { padding:0; font-size:var(--fs-xs); }
body.reading-ui #main .search-condition-accordion { border:1px solid #e0e5dc; background:#fff; border-radius: var(--v7-radius); margin-bottom:10px; }
body.reading-ui #main .search-condition-accordion > summary { padding:16px; }
body.reading-ui #main .search-condition-tags { gap:7px; padding:0 16px 16px; }
body.reading-ui #main .search-condition-tags .pill { min-height:44px; border:1px solid #e0e5dc; border-radius: var(--v7-radius); background:#f8f9f6; }
body.reading-ui #main .search-condition-surface .search-condition-tags > .pill::before { content:none; }
body.reading-ui #main .search-condition-tags .pill[aria-pressed="true"] { background:#e1edcc; border-color:#9ebd55; }
/* Keep tag geometry stable; indicate selection with both color and a check. */
body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag] {
  position:relative; padding:9px 12px 9px 32px; color:var(--v7-ink);
  background:var(--v7-chip); border:1px solid var(--v7-line);
  transition:background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag]::after {
  content:""; position:absolute; left:13px; top:calc(50% - 5px); width:6px; height:10px;
  border:solid currentColor; border-width:0 2px 2px 0; opacity:0;
  transform:rotate(45deg) scale(.5);
  transition:opacity 180ms ease, transform 180ms ease;
}
body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag][aria-pressed="true"] {
  background:var(--v7-lime); border-color:#56743b; color:var(--v7-ink);
}
body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag][aria-pressed="true"]::after {
  opacity:1; transform:rotate(45deg) scale(1);
}
body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag]:focus-visible {
  outline:2px solid var(--v7-ink); outline-offset:3px;
}
@media (hover:hover) {
  body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag]:hover {
    border-color:#56743b; box-shadow:0 2px 5px #20241f12;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag],
  body.reading-ui #main :is(.search-condition-dialog,.search-condition-surface) .search-condition-tags > [data-search-condition-tag]::after { transition:none; }
}
body.reading-ui .site-footer { background:#20241f; margin:0; padding:44px 32px 28px; clip-path:none; }
/* The conditional work guide must not change the existing detail-page footer. */
body.reading-ui:has([data-work-shelf-guide]) .site-footer { clip-path:polygon(0 14px,100% 0,100% 100%,0 100%); padding-top:calc(var(--grid) + 14px); }
body.reading-ui .footer-inner { max-width:1180px; width:100%; margin:auto; padding:0; }
body.reading-ui .footer-cols { width:100%; max-width:780px; margin:24px auto; gap:40px; }
body.reading-ui .footer-brand { color:#fff; }
body.reading-ui .footer-col a { color:#c0cab9; }
body.reading-ui .footer-note { color:#aab79f; font-size:var(--fs-3xs); max-width:800px; margin-inline:auto; }
body.reading-ui .footer-copyright { color:#aab79f; font-size:var(--fs-3xs); }
body.reading-ui :is(a,button,input,summary):focus-visible { outline:2px solid #749445; outline-offset:4px; }
@media (hover:hover) {
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > article:hover { border-color:#b7c6a7; }
  body.reading-ui #main .work-main:hover :is(.gt,.work-title), body.reading-ui #main .tile-link:hover .tl { color:#527b31; }
  body.reading-ui #main :is(.renta-cover-link,.yahoo-cover-link):hover .cover-store-name { text-decoration:underline; text-underline-offset:3px; }
}
@media (max-width:1000px) {
  body.reading-ui #main .home-search { grid-template-columns:minmax(0,1fr); gap:28px; padding-block:36px; }
  body.reading-ui #main .moodrail { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  body.reading-ui #main :is(.result-panes,.shelf-panes) { grid-template-columns:180px minmax(0,1fr); gap:24px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] > article { grid-template-columns:96px minmax(0,1fr) !important; gap:12px 18px !important; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] > article > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) { width:96px; grid-row:1/3; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .work-main { grid-row:1; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .shelf-buttons { grid-column:2; grid-row:2; flex-direction:row; align-self:end; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="2"] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="4"] { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  body.reading-ui #main .reading-work-hero { gap:30px; grid-template-columns:190px minmax(0,1fr); }
  body.reading-ui #main .reading-work-hero .volume-section { width:190px; }
}
@media (max-width:700px) {
  body.reading-ui .site-header,body.reading-ui .site-header-inner { height:60px; }
  body.reading-ui .site-header-inner { padding:0 18px; }
  body.reading-ui .brand-name { font-size:var(--fs-lg); }
  body.reading-ui .brand-mark { width:24px; height:24px; }
  body.reading-ui .reading-nav { display:none; }
  body.reading-ui #main :is(.page-body,.discover-body,.home-search,.home-conditions-panel,.home-mood-panel) { padding-inline:18px; }
  body.reading-ui #main :is(.result-screen,.work-screen,.shelf-screen,.search-screen) { padding-block:24px 44px; }
  /* Keep the first cover within the first mobile viewport without removing
     the separation above the editorial heading. */
  body.reading-ui #main .home-search { grid-template-columns:minmax(0,1fr); gap:12px; padding-block:20px; }
  body.reading-ui #main .reading-home-title { font-size:var(--fs-xl); margin-bottom:8px; }
  body.reading-ui #main .reading-home-lead { font-size:var(--fs-xs); max-width:300px; }
  body.reading-ui #main .home-search-copy { font-size:var(--fs-2xs); }
  body.reading-ui #main .home-search-copy strong { font-size:var(--fs-md); }
  body.reading-ui #main .hero-search input { font-size:var(--fs-md); }
  body.reading-ui #main .discover-body > .sec { padding:22px 0; }
  body.reading-ui #main .section-head { gap:8px 12px; margin-bottom:16px; }
  body.reading-ui #main .section-head :is(h2,.section-title) { font-size:var(--fs-lg); }
  body.reading-ui #main .section-head :is(> a,.section-head-actions) { font-size:var(--fs-2xs); }
  body.reading-ui #main .rail { grid-auto-columns:132px; gap:16px; }
  body.reading-ui #main .home-screen .rail:not(.moodrail) { --shelf-cover-height:188px; }
  body.reading-ui #main :is(.similar-section,.official-related-section) .rail { --detail-rail-cover-height:188px; }
  body.reading-ui #main .rail > * { width:132px !important; max-width:132px !important; }
  body.reading-ui #main .collection-heading { margin-bottom:20px; }
  body.reading-ui #main .collection-heading h1 { font-size:var(--fs-xl); }
  body.reading-ui #main .collection-heading > p:last-child { font-size:var(--fs-2xs); }
  body.reading-ui #main :is(.result-panes,.shelf-panes) { display:block; }
  body.reading-ui #main :is(.result-controls,.shelf-controls) { position:static; margin:0 0 22px; }
  body.reading-ui #main .result-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-bottom:16px; margin-bottom:14px; }
  body.reading-ui #main .page-count { margin:0; font-size:var(--fs-lg); }
  body.reading-ui #main .result-listing-note { order:3; flex-basis:100%; margin:0; font-size:var(--fs-3xs); }
  body.reading-ui #main .applied-chips { margin:0; }
  body.reading-ui #main .chip-applied { font-size:var(--fs-3xs); padding:6px 8px; }
  body.reading-ui #main .result-condition-open { width:auto; min-height:36px; margin-left:auto; font-size:var(--fs-3xs); padding:7px 9px; }
  body.reading-ui #main .result-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:end; }
  body.reading-ui #main .result-sort-row { grid-column:1; grid-row:1; }
  body.reading-ui #main .result-control-label { display:none; }
  body.reading-ui #main .result-view-row { grid-column:2; grid-row:1; width:auto; }
  body.reading-ui #main .result-view-buttons { grid-template-columns:repeat(4,44px); gap:4px; }
  body.reading-ui #main .result-view-buttons button { width:44px; }
  body.reading-ui #main .result-action-row { grid-column:1/-1; gap:6px 20px; }
  body.reading-ui #main .result-bulk-bar { grid-column:1/-1; }
  body.reading-ui #main .result-select-trigger { font-size:var(--fs-2xs); padding:8px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) { gap:20px 12px !important; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > article { padding:10px; border-radius: var(--v7-radius); }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) > article > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) { width:min(100%,132px); margin-bottom:10px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .gt { font-size:var(--fs-xs); }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .shelf-buttons { gap:4px !important; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .shelf-buttons button { min-height:44px; font-size:var(--fs-3xs); }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] > article { grid-template-columns:90px minmax(0,1fr) !important; gap:10px 16px !important; padding:14px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] > article > :is(.renta-cover-link,.yahoo-cover-link,.cover-placeholder-link) { width:90px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .gt { font-size:var(--fs-base); }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .grid-meta { font-size:var(--fs-3xs); }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="list"] .tags > * { font-size:var(--fs-3xs); padding:3px 5px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="2"] { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="4"] { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:16px 10px !important; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) .gt { font-size:var(--fs-3xs); }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]):is([data-result-view="2"],[data-result-view="4"]) .cover-store-caption { flex-direction:column; align-items:flex-start; justify-content:flex-start; flex-wrap:nowrap; min-height:0; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="4"] .cover-store-caption { gap:2px !important; padding-top:5px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="4"] .cover-store-name { font-size:var(--fs-3xs); }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar])[data-result-view="4"] .cover-ad-pr { font-size:var(--fs-3xs); }
  body.reading-ui #main .reading-work-hero { grid-template-columns:132px minmax(0,1fr); gap:20px; padding:0 0 24px; background:none; border:0; border-radius:0; }
  body.reading-ui #main .reading-work-hero > .work-ad-disclosure { top:0; right:0; }
  body.reading-ui #main .reading-work-hero .volume-section { width:132px; }
  body.reading-ui #main .reading-work-hero .volume-section h2 { font-size:var(--fs-3xs); gap:3px; flex-wrap:wrap; min-height:30px; }
  body.reading-ui #main .reading-work-hero .volume-copy { padding:10px 8px; margin-top:10px; }
  body.reading-ui #main .reading-work-hero .volume-text strong { font-size:var(--fs-2xs); }
  body.reading-ui #main .reading-work-hero .volume-text small { font-size:var(--fs-3xs); }
  body.reading-ui #main .reading-work-hero .volume-external-slot { display:none; }
  body.reading-ui #main .work-summary .reading-eyebrow { font-size:var(--fs-3xs); margin-bottom:12px; }
  body.reading-ui #main .work-summary .wt { font-size:var(--fs-lg); line-height:1.6; }
  body.reading-ui #main .work-summary .work-authors { font-size:var(--fs-2xs); margin-bottom:14px; }
  body.reading-ui #main .work-summary .role-chips .chip { font-size:var(--fs-3xs); padding:3px 6px; }
  body.reading-ui #main .work-summary .wshelf { flex-wrap:wrap; gap:6px; }
  body.reading-ui #main .work-summary .primary-state-actions { flex-direction:column; gap:6px; min-width:100%; }
  body.reading-ui #main .reading-save-note { margin-top:20px; font-size:var(--fs-3xs); }
  body.reading-ui #main .work-summary .print-link { padding-top:14px; margin-top:14px; gap:4px; }
  body.reading-ui #main .work-summary .print-link > a { font-size:var(--fs-3xs); }
  body.reading-ui #main :is(.similar-section,.official-related-section) > h2 { font-size:var(--fs-lg); }
  body.reading-ui #main .shelf-tabs { flex-direction:row; gap:4px; padding-bottom:14px; margin-bottom:14px; }
  body.reading-ui #main .shelf-tabs button { padding:8px; font-size:var(--fs-2xs); gap:4px; }
  body.reading-ui #main .shelf-tabs .tab-icon { width:14px; }
  body.reading-ui #main .shelf-empty { padding:30px 20px; }
  body.reading-ui #main .shelf-empty h2 { font-size:var(--fs-xl); }
  body.reading-ui #main .home-shelf-cta { display:block; padding:28px 24px; }
  body.reading-ui #main .home-shelf-cta .ct { font-size:var(--fs-xl); margin-bottom:8px; }
  body.reading-ui #main .home-shelf-cta .btn { display:inline-flex; margin:14px 0; }
  body.reading-ui #main .home-shelf-cta .cs { font-size:var(--fs-2xs); }
  body.reading-ui #main .moodrail,body.reading-ui #main .search-discovery .moodrail { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px; }
  body.reading-ui #main .moodrail > .mtile { width:100% !important; max-width:none !important; padding:0; }
  body.reading-ui #main .moodrail .mt-cover { width:100%; }
  body.reading-ui #main .moodrail .mt-name { font-size:var(--fs-xs); }
  body.reading-ui #main .search-layout { display:block; }
  body.reading-ui #main .search-discovery { margin-top:30px; }
  body.reading-ui .site-footer { padding:34px 18px 24px; }
  body.reading-ui .footer-cols { gap:18px; }
}
@media (max-width:360px) {
  body.reading-ui #main .reading-work-hero { grid-template-columns:112px minmax(0,1fr); gap:16px; }
  body.reading-ui #main .reading-work-hero .volume-section { width:112px; }
  body.reading-ui #main .work-summary .wt { font-size:var(--fs-lg); }
  body.reading-ui #main .result-view-buttons { grid-template-columns:repeat(4,44px); gap:3px; }
  body.reading-ui #main .result-view-buttons button { width:44px; }
  body.reading-ui #main [data-result-grid]:not([data-result-toolbar]) .shelf-buttons .shelf-button-label { font-size:var(--fs-3xs); }
}
@media (prefers-reduced-motion:reduce) {
  body.reading-ui *,body.reading-ui *::before,body.reading-ui *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Home: quieter headings, readable work information and compact mood choices. */
body.reading-ui #main .home-screen > .sec { padding-block:32px; }
body.reading-ui #main .home-screen .section-head { gap:8px 18px; margin-bottom:20px; }
body.reading-ui #main .home-screen .section-title { font:600 calc(var(--fs-md) * 1.25)/1.5 var(--sans); letter-spacing:.01em; }
body.reading-ui #main .home-screen .section-title::before { content:none; }
body.reading-ui #main .home-screen .section-title > .ic { display:none; }
body.reading-ui #main .home-screen .section-head .section-note { font-size:var(--fs-xs); line-height:1.7; }
body.reading-ui #main .home-screen .section-ad-pr { margin-left:14px; padding:0; border:0; background:none; color:var(--v7-dim); font:400 var(--fs-xs)/1.5 var(--sans); }
body.reading-ui #main .home-screen .section-head > a { font-size:var(--fs-xs); }
body.reading-ui #main .home-work-tile .tl { margin-top:10px; min-height:0; font:500 var(--fs-base)/1.6 var(--sans); -webkit-line-clamp:3; }
body.reading-ui #main .home-work-tile .tags { gap:4px 8px; margin-top:0; }
body.reading-ui #main .home-work-tile .tags > i { padding:0; background:none; border-radius:0; color:#56644c; font-weight:400; }
body.reading-ui #main .home-screen .home-paper-link { display:block; width:fit-content; margin-top:6px; color:var(--v7-dim); font:400 var(--fs-2xs)/1.6 var(--sans); text-decoration:underline; text-underline-offset:3px; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail { grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:0 26px; align-items:stretch !important; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail > .mtile { display:grid; grid-template-columns:68px minmax(0,1fr); align-items:center; gap:0 14px; padding:16px 0; border-bottom:1px solid var(--v7-line); }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-cover { grid-column:1; grid-row:1/3; margin:0; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-cover > a { --mood-cover-height:84px; max-width:100%; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name { grid-column:2; display:flex; flex-direction:column; align-items:flex-start; gap:7px; width:100%; min-height:44px; padding:0; transform:translateY(4px); font:500 var(--fs-base)/1.65 var(--sans); transition:color 160ms ease, transform 160ms ease; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name .mood-icon { margin:0; color:#506547; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name > span { overflow-wrap:normal; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .mood-phrase { display:inline-block; white-space:nowrap; }
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .home-paper-link { grid-column:2; margin-top:4px; }
body.reading-ui #main .home-screen .home-shelf-cta { margin-top:28px; padding:26px 30px; background:linear-gradient(115deg,#344a3a 0%,#26372c 48%,#202820 100%); }
body.reading-ui #main .home-screen .home-shelf-cta .ct { font:600 var(--fs-lg)/1.5 var(--sans); letter-spacing:.02em; }
body.reading-ui #main .home-screen .home-shelf-cta .cs { color:#c0cdb8; font-size:var(--fs-xs); }
body.reading-ui #main .home-screen .home-shelf-cta .btn { margin:0; }
body.reading-ui:has(.home-screen) .site-footer { padding-block:32px 24px; background:#252e27; }
body.reading-ui:has(.home-screen) .footer-inner { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(0,1.1fr); grid-template-rows:auto auto 1fr auto auto; gap:8px 48px; align-items:start; }
body.reading-ui:has(.home-screen) .footer-brand { grid-column:1; grid-row:1; justify-content:flex-start; width:100%; max-width:none; margin:0; }
body.reading-ui:has(.home-screen) .footer-tag { grid-column:1; grid-row:2; max-width:none; margin:0; text-align:left; color:#b8c5b2; font-size:var(--fs-xs); line-height:1.7; }
body.reading-ui:has(.home-screen) .footer-cols { grid-column:2; grid-row:1/4; max-width:none; margin:0; gap:32px; }
body.reading-ui:has(.home-screen) .footer-col { width:100%; text-align:left; }
body.reading-ui:has(.home-screen) .footer-col ul { align-items:flex-start; }
body.reading-ui:has(.home-screen) .footer-col h2 { font-size:var(--fs-xs); }
body.reading-ui:has(.home-screen) .footer-col a { justify-content:flex-start; font-size:var(--fs-xs); color:#c0cdb8; }
body.reading-ui:has(.home-screen) .footer-note { grid-column:1/-1; width:100%; max-width:none; margin:12px 0 0; padding-top:16px; text-align:left; font-size:var(--fs-2xs); line-height:1.7; }
body.reading-ui:has(.home-screen) .yahoo-credit { grid-column:1/-1; grid-row:6; margin:0 0 0 -15px; text-align:left; }
body.reading-ui:has(.home-screen) .footer-copyright { grid-column:1; grid-row:5; width:100%; max-width:none; margin:0; text-align:left; font-size:var(--fs-2xs); }
@media (hover:hover) {
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .mt-name:hover { color:#527b31; }
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .mt-name:hover .mood-label-text { text-decoration:underline; text-underline-offset:4px; }
  body.reading-ui #main .home-screen .home-paper-link:hover { color:var(--v7-ink); }
}
@media (max-width:1000px) {
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:0 28px; }
}
@media (max-width:700px) {
  body.reading-ui #main .home-screen > .sec { padding-block:26px; }
  body.reading-ui #main .home-screen .section-title { font-size:var(--fs-lg); }
  body.reading-ui #main .home-screen .section-head { gap:8px 12px; margin-bottom:18px; }
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail { gap:0 18px; }
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail > .mtile { grid-template-columns:46px minmax(0,1fr); gap:0 10px; padding-block:14px; }
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-cover > a { --mood-cover-height:64px; }
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name { font-size:var(--fs-sm); gap:6px; }
  body.reading-ui #main .home-screen .home-shelf-cta { padding:24px; }
  body.reading-ui #main .home-screen .home-shelf-cta .ct { margin-bottom:6px; }
  body.reading-ui #main .home-screen .home-shelf-cta .btn { margin-top:18px; }
  body.reading-ui #main .home-editorial-sections > .sec { padding-block:22px; }
  body.reading-ui #main .home-editorial-sections > .sec:first-child { padding-top:30px; }
  body.reading-ui:has(.home-screen) .footer-inner { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:8px; }
  body.reading-ui:has(.home-screen) .footer-inner > * { grid-column:1; grid-row:auto; }
  body.reading-ui:has(.home-screen) .footer-cols { margin-top:18px; gap:18px; }
  body.reading-ui:has(.home-screen) .footer-note { margin-top:10px; }
  body.reading-ui:has(.home-screen) .yahoo-credit { text-align:left; }
}
@media (prefers-reduced-motion:reduce) {
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name { transition:none; }
}

/* Lime indicators stay attached to the thing they describe.  The shared
   section rule draws `::after` on the heading; when the heading is a flex
   row (the title, count and disclosure are separate items), that pseudo
   element otherwise becomes one more row item and lands after the PR label.
   Keep it out of the flex flow and anchor it to the heading's lower edge. */
body.reading-ui #main .works-section .section-head > :is(h2,.section-title) {
  position: relative;
  padding-bottom: 8px;
}
body.reading-ui #main .works-section .section-head > :is(h2,.section-title)::after {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  display: block;
  width: 36px;
  height: 3px;
  margin: 0;
}

/* The active header mark follows the label instead of being pinned to the
   bottom edge of the whole dark header.  This keeps its distance stable when
   the header height or font metrics change. */
body.reading-ui .site-header .reading-nav a {
  display: inline-flex;
  align-items: center;
  align-self: center;
  box-sizing: border-box;
  padding: 0 0 7px;
  border-bottom: 3px solid transparent;
  box-shadow: none;
}
body.reading-ui .site-header .reading-nav a[aria-current] {
  border-bottom-color: var(--v7-lime);
}
@media (max-width:420px) {
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail > .mtile { grid-template-columns:44px minmax(0,1fr); column-gap:8px; }
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-cover > a { --mood-cover-height:54px; }
}

/* 気分も本棚・検索などと同じ24px座標・線幅2のモノラインで描く。 */
body.reading-ui .mood-icon {
  box-sizing:border-box;
  width:24px;
  height:24px;
  flex:0 0 24px;
  padding:0;
  color:#506547;
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
}
body.reading-ui .mood-icon :is(path,circle,rect,line,polyline,polygon,ellipse) {
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:none;
}

/* 書影を使った作品欄は、キーワード面の主役としてすぐ見せる。 */
body.reading-ui #main .home-editorial-sections { display:block; }
body.reading-ui #main .home-mood-panel > .sec { padding:28px 0 56px; margin:0; border-top:1px solid var(--v7-line); }
@media (max-width:700px) {
  body.reading-ui #main .home-editorial-sections > .sec { padding-block:22px; }
  body.reading-ui #main .home-mood-panel > .sec { padding-block:22px 42px; }
}

/* 空の本棚では、気分の入口とアニメ化作品の入口をひと続きに見せない。 */
body.reading-ui #main .shelf-empty-anime {
  margin:24px 0 0;
  padding-top:16px;
  border-top:1px solid var(--v7-line);
}

/* 新刊の件数は「新刊がない」と「確認できる正本がない」を混同させない。 */
body.reading-ui #main .new-list-info .new-list-source-note {
  flex:1 1 100%;
  margin:-4px 0 0;
  color:#7a8376;
  font:400 var(--fs-3xs)/1.6 var(--sans);
}
body.reading-ui #main .new-empty-source-note {
  margin:-8px 15px 18px;
  color:#7a8376;
  font:400 var(--fs-3xs)/1.6 var(--sans);
  text-align:center;
}

/* 気分ピクトは文字の左に並べず、名前の背後に薄く置く。
   線画が小さな面として潰れて見えていたため、面・余白・主張を外し、
   テキストの視線を邪魔しない透かしに揃える。 */
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name,
body.reading-ui #main .moodpick-label,
body.reading-ui #main .chip-mood,
body.reading-ui #main .search-mood-link {
  position:relative;
  isolation:isolate;
}
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name {
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0;
  min-height:44px;
}
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name .mood-icon,
body.reading-ui #main .moodpick-label .mood-icon,
body.reading-ui #main .chip-mood .mood-icon,
body.reading-ui #main .search-mood-link .mood-icon {
  position:absolute;
  z-index:0;
  right:4px;
  top:50%;
  width:28px;
  height:28px;
  flex:none;
  margin:0;
  padding:0;
  color:#506547;
  background:none;
  border:0;
  border-radius:0;
  opacity:.20;
  transform:translateY(-50%);
  pointer-events:none;
  transition:opacity 160ms ease, transform 160ms ease;
}
body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name > span,
body.reading-ui #main .moodpick-label > .mood-label-text,
body.reading-ui #main .chip-mood > .mood-label-text,
body.reading-ui #main .search-mood-link > span {
  position:relative;
  z-index:1;
}
body.reading-ui #main .moodpick-label {
  display:block;
}
body.reading-ui #main .chip-mood,
body.reading-ui #main .search-mood-link {
  padding-right:9px;
}
@media (hover:hover) {
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .mt-name:hover .mood-icon,
  body.reading-ui #main .moodpick:hover .mood-icon,
  body.reading-ui #main .chip-mood:hover .mood-icon,
  body.reading-ui #main .search-mood-link:hover .mood-icon {
    opacity:.30;
    transform:translateY(-50%) scale(1.04);
  }
}
@media (prefers-reduced-motion:reduce) {
  body.reading-ui #main :is(.home-screen,.home-mood-panel) .moodrail .mt-name .mood-icon,
  body.reading-ui #main .moodpick-label .mood-icon,
  body.reading-ui #main .chip-mood .mood-icon,
  body.reading-ui #main .search-mood-link .mood-icon {
    transition:none;
  }
}

/* Publisher dates are separate from first-volume store imagery. */
.reading-ui .publisher-release-source { font-size: .75rem; line-height: 1.7; color: var(--muted, #65705f); margin: 8px 0; }
.reading-ui .release-cover-note { display: block; font-size: .68rem; color: var(--muted, #65705f); margin: 5px 0 8px; }
.reading-ui .work-publisher-release { margin-block: 28px; padding-block: 20px; border-block: 1px solid #dedfd6; }
.reading-ui .related-kind { display: block; font-size: .72rem; line-height: 1.7; margin-top: 8px; color: var(--muted, #65705f); }
.measurement-optout { display: flex; gap: 12px; align-items: center; margin-block: 16px; min-height: 44px; }