/* パレットは目視で決めていない。アイコン（note リポジトリの
   accounts/shinshoyome/assets/profile.jpg）から色を実測し、OKLCH に変換して
   ティールの色相 H=184.4 を取り出したうえで、その色相を固定したまま明度だけを
   動かして組んでいる。OKLCH を使うのは、明度を変えても色相がずれず、
   数値上の明度差が知覚の明るさと一致するため。

   地はごく淡いティール、カードは白。真っ白の地に白いカードを置くと境目が
   出ないため、面の階層（--bg / --card）と弱い影で構造を作る。ティールは
   面ではなく点として置き、色を敷き詰めない。
   UI から赤は完全に外してある（赤はアイコンのリボンと背表紙が担う）。

   全ペアの WCAG 2.2 AA を tools/check.py で計算済み。主な実測値:
     本文 fg/bg 16.07:1 ／ 補助文 muted/bg 5.41:1 ／ リンク accent/bg 6.54:1
     カレンダーの塗りセル上の本文 fg/cal-3 10.07:1

   注意:
   - 文字を opacity で薄めない。実効コントラストが落ちる
   - 塗られたセルの中の文字は必ず fg。muted は cal-3 で 3.39:1 まで落ちる
   - 「刊行あり」を伝えるのは件数の数字。セルの塗りと罫は補助でしかない */
/* ---- 全面墨（案A）への移行 ----
   棚めくりトップ（墨）→書籍ページ（紙）で世界が切り替わる問題への答えとして、
   全ページを棚と同じ墨に統一した。地は棚と同一の --ink 値、カードは
   一段明るい面、リンクとボタンはブランドのティール。
   旧・紙パレットの AA 実測値はこの切り替えで失効している。主要ペアの概算:
   fg/bg ≈ 13:1 ／ muted/bg ≈ 6:1 ／ accent(brand)/bg ≈ 8:1。
   公開前に tools/check.py で再計測すること */
:root {
  --bg: #0f1d1b;           /* 棚の墨と同一。ページ間で面が切り替わらない */
  --surface: #1b2f2b;
  --fg: #e6f0ee;
  --muted: #9db5b0;
  --line: #24352f;
  --line-strong: #35514a;
  --brand: #7bc1b7;        /* アイコンの地色そのもの */
  --accent: #7bc1b7;       /* 墨の上ではリンクもブランド色が受け持つ */
  --accent-fg: #0f1d1b;
  --cal-1: #16302c;
  --cal-2: #1d423c;
  --cal-3: #26564e;

  /* 面の階層。墨の地から一段明るくしてカードを浮かせる */
  --card: #182823;
  /* 墨。開いたメニューとフッターに敷く。
     面が全部 0.93〜1.0 の明度帯に収まっていたのが元の失敗で、
     メニュー（旧 --surface）と地の明度比は 1.02:1 しかなく見分けが付かなかった。
     ページの錨をここで作る */
  --ink: #0f1d1b;
  --ink-fg: #e6f0ee;
  --ink-muted: #9db5b0;
  --ink-line: #24352f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 24px rgba(0, 0, 0, 0.35);
  --radius: 10px;

  /* sticky ヘッダーの高さ。ブラウザで実測した値で、狭い画面でも変わらない
     （560px 未満で消えるのは brand__tag だけで、高さはアイコンが決めている）。
     カレンダーから #d-<日付> へ飛んだとき見出しがヘッダーへ潜らないよう、
     .day の scroll-margin-top をこの値から導く */
  --header-h: 67px;

  /* 本文は明朝、数字と UI の文字はサンセリフ。
     件数や日付が明朝だと数字の判別が鈍る。

     日本語 Web フォントは見送った。Zen Old Mincho を Google Fonts から
     読んで実測したところ、347 文字しか出ていないこの画面で 90 スライス
     1,515KB を引いてきた。unicode-range で分割されていても、漢字が
     散らばるページでは大半のスライスに当たってしまい効かない。

     かわりに OS 同梱の明朝を積む。Windows の既定は游明朝だが画面では
     線が痩せて掠れるので、Windows 10/11 に同梱の BIZ UDPMincho を先に置く。
     画面可読性のために設計された明朝で、転送量ゼロで游明朝より読みやすい。
     （このマシンで BIZ UDPMincho / BIZ UDMincho の実在を実測確認済み） */
  --serif: "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", serif;
  --sans: "Hiragino Sans", "BIZ UDPGothic", "Yu Gothic UI", system-ui, sans-serif;
}

/* OS のライト/ダーク設定によるトークン切り替えは廃止した。
   全面墨（案A）でサイトの見た目を一つに固定している */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  line-height: 1.85;
  /* 日本語の行分割を厳密にする。既定だと小書き仮名や長音符が行頭に来る */
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* 見出しは詰め組みにする。約物（「」・）の空きが空きすぎて間延びするため */
.brand__name,
.months h1,
main h1,
main h2,
.book h3,
.entry h2 {
  font-feature-settings: "palt" 1;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.3rem;
}

a { color: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- header ---------- */
/* 帯で塗らない。細い罫とアイコンだけで十分に「そのサイト」になる */

header.site {
  position: sticky;
  top: 0;
  /* 他に z-index を使う要素は無いので、重なり順はこの 1 箇所だけで決まる */
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

header.site .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* どのページからも棚（基底レイヤー）への帰り道を左上に置く。
   記事ページの「← 棚」と同じ文法 */
.back-shelf {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  flex: none;
}

/* 記事ページのヘッダーは棚と同じ上部バーを常時表示する（消えるヘッダーは
   「今どのサイトにいるか」と「帰り道」を見失うという実指摘で廃止）。
   棚では書影の上に載るグラデーションだが、記事では本文と喧嘩しない
   半透明の墨面＋罫にする */
.shelf-top--article {
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink-line);
}
.shelf-top__left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.shelf-top a.shelf-top__stack,
.shelf-top a.shelf-top__burger {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* マイ本棚ボタンのアイコン */
.shelf-top__ic {
  width: 14px;
  height: 14px;
  fill: var(--brand);
  margin-right: 0.35rem;
  flex: none;
}
.shelf-top__stack { display: inline-flex; align-items: center; }

/* マイ本棚パネルのタブ（積読｜読んだ本） */
.lib-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.3rem;
}
.lib-tab {
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.lib-tab.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
  font-weight: 700;
}

/* ヘッダーは絶対に1行に保つ。折り返すと背が高くなり、
   セグメントの上端クリアランス（3.8rem）を本文が突き抜ける（実指摘）。
   幅が足りない時は装飾（ロゴ文字）から畳む。PR（広告表記）は畳まない */
.shelf-top--article .rheader__back,
.shelf-top__stack,
.shelf-top__brand span {
  white-space: nowrap;
}
@media (max-width: 500px) {
  .shelf-top--article { padding-left: 0.7rem; padding-right: 0.7rem; }
  .shelf-top--article .shelf-top__left { gap: 0.55rem; }
  .shelf-top--article .shelf-top__right { gap: 0.4rem; }
  .shelf-top--article .shelf-top__brand span { display: none; }
}

/* 書籍ページのレビュータブから没入リーディング（記事ページ）への入口 */
.review__jump { margin: 0.4rem 0 1.2rem; }
.review__jump a {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--brand);
  color: var(--brand);
  text-decoration: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  min-width: 0;
}

.brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  flex: none;
}

.brand__name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.brand__tag {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 560px) {
  .brand__tag { display: none; }
}

/* ステマ規制（2023-10 施行）への対応。アフィリエイトリンクを載せる以上、
   ファーストビューで広告と分かる位置に置く必要がある。
   フッターの表記だけでは「最初に視野に入る画面」の要件を満たさない */
.pr-badge {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  /* 枠は付けない。ピル型のボタン（積読・読了）の隣に枠付きで置くと
     押せるコントロールに見える（実指摘）。テレビの「PR」表示と同じ
     素のテキストにして、ラベルであることを見た目で示す */
  padding: 0.05rem 0.1rem;
  flex: none;
  user-select: none;
}

.pr-note {
  margin: 0.7rem auto 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---------- hamburger ---------- */

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  flex: none;
}

.burger__lines,
.burger__lines::before,
.burger__lines::after {
  display: block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.15s ease;
}

.burger__lines { position: relative; }

.burger__lines::before,
.burger__lines::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger__lines::before { top: -4.5px; }
.burger__lines::after  { top: 4.5px; }

.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after  { transform: translateY(-4.5px) rotate(-45deg); }

.site-nav {
  border-top: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ink-fg);
  font-family: var(--sans);
  /* ヘッダーが sticky なので、開いたメニューが画面外へはみ出すと
     もう届かない。低い画面ではメニュー自身をスクロールさせる */
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-nav[hidden] { display: none; }

.site-nav .wrap { padding-top: 0.5rem; padding-bottom: 0.9rem; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }

.site-nav a {
  display: block;
  padding: 0.62rem 0;
  color: var(--ink-fg);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--ink-line);
}

.site-nav li:last-child a { border-bottom: 0; }
.site-nav a:hover { color: #fff; }

.site-nav__external {
  margin-top: 0.8rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.site-nav__external a {
  font-size: 0.82rem;
  color: var(--ink-muted);
  border-bottom: 0;
}

/* 外部リンクであることを示す。内部メニューと同じ見た目だと区別が付かない */
.ext {
  margin-left: 0.35em;
  font-size: 0.85em;
  opacity: 0.7;
}

/* ---------- month nav ---------- */

.months {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 2.4rem 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.8rem;
}

.months h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.months h1 span {
  font-size: 0.9rem;
  color: var(--muted);
  margin-left: 0.35em;
  letter-spacing: 0.08em;
}

.months a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.months__prev::before { content: "◀ "; font-size: 0.7em; }
.months__next::after  { content: " ▶"; font-size: 0.7em; }

/* ---------- status ---------- */

.status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  margin: 0 0 1.6rem;
  font-family: var(--sans);
}

.status__count { font-size: 0.85rem; color: var(--muted); }

.status__count b {
  font-size: 1.7rem;
  color: var(--fg);
  font-weight: 600;
  margin-right: 0.1em;
}

.status__meta { font-size: 0.78rem; color: var(--muted); }

.caveat {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- calendar ---------- */

.cal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
  font-family: var(--sans);
}

.cal th {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--muted);
  padding-bottom: 0.2rem;
  letter-spacing: 0.06em;
}

.cal__pad { background: transparent; }

/* 刊行のない日は枠を描かない。枠だらけにすると「本がある日」が沈む。
   格子は曜日の見出しと余白で十分に読める */
.cal__day {
  vertical-align: top;
  height: 4.6rem;
  border-radius: 5px;
  background: var(--cal-1);
  overflow: hidden;
}

.cal__day[data-weight="2"] { background: var(--cal-2); }
.cal__day[data-weight="3"] { background: var(--cal-3); }

.cal__day--empty,
.cal__day.is-hidden {
  background: transparent;
  height: 4.6rem;
}

.cal__day a {
  display: block;
  height: 100%;
  padding: 0.28rem 0.4rem;
  text-decoration: none;
  color: var(--fg);
}

.cal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem;
}

.cal__num {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.cal__total {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.cal__day--empty .cal__num {
  display: block;
  padding: 0.28rem 0.4rem;
  color: var(--muted);
  font-weight: 500;
}

/* レーベル名を1行1件で。件数だけだと「何が出るか」が伝わらない */
.cal__labels {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.6rem;
  line-height: 1.45;
}

.cal__label,
.cal__more {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal__label b { font-weight: 700; margin-left: 0.2em; }

.cal__more { color: var(--fg); opacity: 0.75; }

.cal__day.is-hidden .cal__labels,
.cal__day.is-hidden .cal__total { display: none; }
.cal__day.is-hidden .cal__num { color: var(--muted); font-weight: 500; }

@media (max-width: 560px) {
  .cal { border-spacing: 2px; }
  .cal__day, .cal__day--empty, .cal__day.is-hidden { height: 3.1rem; }
  .cal__labels { display: none; }
  .cal__num { font-size: 0.74rem; }
}

/* ---------- filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 2.4rem 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.8rem;
}

.toggle {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
}

.toggle button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}

.toggle button span { margin-left: 0.35rem; font-size: 0.85em; }

.toggle button.is-active {
  background: var(--accent);
  color: var(--accent-fg);
}

/* レーベル絞り込み。select をやめてチップにしてある（理由は views.ts 側に記載） */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.7rem 0 0;
  font-family: var(--sans);
}

.chips button {
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.5;
  padding: 0.22rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.chips button:hover { border-color: var(--accent); color: var(--fg); }

.chips button span {
  margin-left: 0.35rem;
  font-size: 0.9em;
  color: var(--muted);
}

.chips button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.chips button.is-active span { color: var(--accent-fg); }

.chips__more {
  border-style: dashed;
}

/* ---------- list ---------- */

.day { margin-top: 2.2rem; scroll-margin-top: calc(var(--header-h) + 1rem); }

.day h2 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line-strong);
}

.day__week { font-weight: 400; color: var(--muted); font-size: 0.75rem; }

.day[hidden] { display: none; }

.books {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

/* 罫で区切らずカードとして立てる。一覧は 1 行が書影・書名・著者・
   購入導線と要素が多く、罫 1 本では 1 冊の範囲が読み取りにくい */
.book {
  display: flex;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  background: var(--card);
  border-radius: var(--radius);
  /* 左端はレーベルの背表紙。新書は棚に背を向けて並ぶ本で、岩波新書は
     青版・赤版・黄版と版そのものが色の名前になっている。一覧を「棚」として
     読ませる唯一の色で、ほかは無彩色のままにする */
  border-left: 4px solid var(--spine, var(--line-strong));
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .book:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }
}

/* 動きを減らす設定を尊重する。浮き上がりは装飾でしかない */
@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
  .book:hover { transform: none; }
}

.book[hidden] { display: none; }

.book__link { flex: none; text-decoration: none; }

/* object-fit は contain。cover にすると縦横比の違う書影が切り抜かれるが、
   出版社各社の書影ガイドラインは「トリミングをしないこと」を条件にしている。
   実測でも 513x600 と 364x600 が混在していて、cover だと確実に端が落ちる */
.cover {
  display: block;
  width: 78px;
  height: 112px;
  object-fit: contain;
  object-position: center;
  background: var(--surface);
}

.book__body { min-width: 0; }

.book h3 {
  margin: 0 0 0.25rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.55;
}

.book h3 a { text-decoration: none; }

.badge {
  margin-left: 0.5rem;
  font-family: var(--sans);
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: 0.18em;
}

.meta {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
}

.foot {
  margin: 0.55rem 0 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.buy {
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  color: var(--accent);
  font-size: 0.74rem;
}

.buy:hover { border-color: var(--accent); }

/* 書影を借りている先なので楽天を先頭に置く */
.buy--rakuten {
  background: var(--surface);
  border-color: var(--accent);
}

.empty { margin: 3rem 0; color: var(--muted); text-align: center; }

/* ---------- 索引・記事一覧・about ---------- */

/* ページの顔。1.5rem では一覧の見出しとして弱く、カードの書名（1.02rem）と
   差が付かなかった。明朝の字面を活かして大きく置く */
main h1 {
  font-size: 2.1rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 2.4rem 0 0.4rem;
}

@media (max-width: 560px) {
  main h1 { font-size: 1.65rem; }
}

main h2 { font-size: 1.05rem; margin: 2rem 0 0.4rem; }

.lead {
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
}

.index { list-style: none; margin: 0; padding: 0; }

.index a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.idx__count {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- トップ ---------- */

/* トップの h1。main h1 と同じ大きさにする（クラスのほうが強いので、
   片方だけ直しても効かない。指定はここに集約する） */
.home__lead {
  font-size: 2.1rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 2.4rem 0 0;
}

@media (max-width: 560px) {
  .home__lead { font-size: 1.65rem; }
}

.home__block { margin-top: 2.6rem; }

.home__block h2 {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- 主題タグ ---------- */

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.4rem 0 0;
}

.tag {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  padding: 0.22rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  background: var(--card);
  white-space: nowrap;
}

.tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* 索引では冊数を添える。空の棚へ送らないための手がかり */
.tag b {
  margin-left: 0.4em;
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.75;
}

.taglist--index { margin-top: 0; }

.home__more {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 0.82rem;
}

.entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.entry {
  display: flex;
  gap: 1rem;
  padding: 1rem 1rem 1rem 1.1rem;
  background: var(--card);
  border-radius: var(--radius);
  border-left: 4px solid var(--spine, var(--line-strong));
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .entry:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .entry { transition: none; }
  .entry:hover { transform: none; }
}

.entry__cover { flex: none; text-decoration: none; }
.entry__body { min-width: 0; }

.entry h2 { margin: 0 0 0.3rem; font-size: 1.05rem; line-height: 1.55; }
.entry h2 a { text-decoration: none; }

/* 対象の本の書名・著者。レビュー題だけだと何の本か分からない */
.entry__book {
  margin: 0.35rem 0 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
}

.entry .date {
  margin: 0.3rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- 書籍ページ ---------- */

.hero {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  margin: 1.2rem 0 2rem;
}

.hero__cover { flex: 0 0 auto; }

.hero__cover .cover {
  width: 140px;
  height: 200px;
  object-fit: contain;
}

.hero__meta { min-width: 0; }

.hero__meta h1 {
  margin: 0 0 0.6rem;
  font-size: 1.5rem;
  line-height: 1.4;
}

.hero__author,
.hero__label,
.hero__date {
  margin: 0.25rem 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--muted);
}

.hero__author { color: var(--fg); font-size: 0.9rem; }

.hero__buy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
}

@media (max-width: 560px) {
  .hero { gap: 1rem; }
  .hero__cover .cover { width: 96px; height: 138px; }
  .hero__meta h1 { font-size: 1.2rem; }
}

/* タブ。既定は「見出し付きで縦に並んだ文書」で、JS が付いたときだけ畳む */
.tabs {
  margin: 2rem 0;
  padding: 1.1rem 1.2rem 1.4rem;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.tabs__list { display: none; }

.tabs.is-enhanced .tabs__list {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.tabs__list button {
  flex: 0 0 auto;
  padding: 0.7rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
}

.tabs__list button[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.tabs__panel { padding-top: 1.2rem; }
.tabs.is-enhanced .tabs__panel { padding-top: 0; }
.tabs.is-enhanced .tabs__heading { display: none; }

.facts {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

/* 新書嫁レビュー。書誌情報タブと同じ枠に入るが、こちらは読ませる文章なので
   行長ではなく行間で密度を落とす（.wrap の 44rem は本文向けの幅のまま） */
.review__title {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  font-feature-settings: "palt" 1;
}

.review__date {
  margin: 0 0 1.4rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
}

.tabs__panel h2,
.tabs__panel h3:not(.review__title) {
  margin: 2rem 0 0.6rem;
  font-size: 1rem;
}

/* 本文中に差し込むカード。前後の段落から浮かせて、読みの流れを一度止める */
/* 本文中に差し込むカード。.book 自体がカード（地・影・背表紙）になったので、
   外側にも枠と塗りを重ねると二重の箱になる。ここは前後の余白だけ持たせる */
.books--inline { margin: 1.8rem 0; }

.review__note {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--muted);
}

.related { margin-top: 2.6rem; }

.related h2 {
  font-size: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

/* ---------- footer ---------- */

/* フッターは墨で敷く。ページの下端を締め、地に溶けたまま終わらせない */
footer.site {
  margin-top: 4.5rem;
  background: var(--ink);
  color: var(--ink-muted);
  border-top: 0;
  padding: 2.2rem 0 3.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
}

footer.site a { color: var(--ink-fg); }

footer.site p { margin: 0.45rem 0; }

.disclosure { line-height: 1.7; }

/* SNS ボタン。円の大きさは指で押せる下限（38px）に合わせている */
.social {
  display: flex;
  gap: 0.55rem;
  margin: 0.9rem 0 1.2rem;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.social a:hover,
.social a:focus-visible {
  color: var(--accent-fg);
  background: var(--accent);
  border-color: var(--accent);
}

.social svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.social__word {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* 版元の紹介文の出典表示。自分で書いた文章と混同させない */
.source {
  margin: 1.4rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==================================================================
   棚めくり（トップ / アルファ版）
   墨（--ink）を敷いた全画面カード。1画面1冊、縦の scroll-snap。
   ライト/ダークとも同じ墨面なので、テーマ分岐はトークン任せでよい
   ================================================================== */

body.shelf-body {
  background: var(--ink);
  color: var(--ink-fg);
  overflow: hidden;
  font-family: var(--sans);
}

.shelf {
  height: 100vh; /* dvh 非対応ブラウザの逃げ道。対応環境では次行が勝つ */
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
}

.scard {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(3.2rem + env(safe-area-inset-top)) 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* 書影は「上バーとパネルの間の残り空間」を flex で取り、その中央に置く。
   下端を画面高の割合で固定すると、パネルが短い本ほど書影の下だけ余白が
   余って上下非対称に見える（実指摘） */
.scard__coverwrap {
  position: relative; /* 右の縦レールの基準 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0 1.2rem;
  box-sizing: border-box;
}

/* リンクは箱として実体を持たせない。<a> が画像の原寸幅で確保されると、
   高さ制約で縮んだ画像が箱の左端に寄って中央からずれる（実測で確認） */
/* 最初のカードが届くまでの骨組み。墨の上で薄く脈打つ */
.scard--skeleton .skeleton__cover {
  width: 56%;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  animation: sk-pulse 1.4s ease-in-out infinite;
}
.skeleton__line {
  height: 0.9rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.5rem 0;
  animation: sk-pulse 1.4s ease-in-out infinite;
}
.skeleton__line--short { width: 55%; }
@keyframes sk-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.shelf-noscript { list-style: none; padding: 0; margin: 0.5rem 0 1rem; font-family: var(--sans); font-size: 0.85rem; }
.shelf-noscript li { padding: 0.3rem 0; border-bottom: 1px solid var(--ink-line); }
.shelf-noscript a { color: var(--ink-fg); text-decoration: none; }

/* 書影リンクだけ。> を外すとレール内の <a>（書評）まで contents になり、
   丸とラベルがレールの flex に直接ぶら下がって間隔が崩れる（実バグ） */
.scard__coverwrap > a { display: contents; }

.scard__cover {
  max-height: 100%;
  max-width: 64%;
  border-radius: 4px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
}

.scard__panel { position: relative; }

/* 並べ替えの理由。ブラックボックスにしないための一言 */
.scard__why {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--brand);
  margin: 0 0 0.3rem;
}

.scard__hook {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.7;
  font-weight: 600;
  margin: 0 0 0.45rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scard__bib {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
}
.scard__bib a { color: var(--ink-fg); text-decoration: none; }

.scard__actions {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.scard__want,
.scard__btn {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--ink-muted);
  background: transparent;
  color: var(--ink-fg);
  text-decoration: none;
  cursor: pointer;
}

/* 「書評を読む」は遷移するリンク。押せることが一目で分かるよう
   面を持たせ、矢印で行き先があることを示す（枠だけだと押せる感が弱い） */
.scard__btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  font-weight: 600;
}
.scard__btn::after {
  content: "→";
  margin-left: 0.4em;
  color: var(--brand);
}
.scard__want:active,
.scard__btn:active,
.scard__buy:active {
  transform: scale(0.96);
}

.scard__want { border-color: var(--brand); color: var(--brand); font-weight: 600; }
.scard__want[aria-pressed="true"] {
  background: var(--brand);
  color: var(--ink);
}
.scard__want[aria-pressed="true"]::before { content: "✓ "; }

/* 購入ボタンは塗りで目立たせる（枠だけだと沈むという実指摘）。
   両ストアは同格に扱う */
.scard__buys { display: flex; gap: 0.45rem; margin-bottom: 0.55rem; }
.scard__buy {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.62rem 0;
  border-radius: 8px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--ink);
  text-decoration: none;
}

/* 書影右の縦アクションレール（TikTok / ショート動画の文法） */
.scard__rail {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
  z-index: 2;
}
.scard__rbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  /* <a> は本文の行送り(1.85)を継承し <button> は継承しないため、
     ラベルの余白がタグによって微妙にずれる。ここで両者を揃える */
  font: inherit;
  line-height: 1;
}
.scard__rbtn-label { line-height: 1.3; }

/* 書評が無い本の無効状態。押せないことが見た目で分かるよう沈める */
.scard__rbtn--off { cursor: default; }
.scard__rbtn--off .scard__rbtn-circle { opacity: 0.3; }
.scard__rbtn--off .scard__rbtn-label { opacity: 0.45; }
.scard__rbtn--off:active .scard__rbtn-circle { transform: none; }
.scard__rbtn-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-fg);
  transition: transform 0.12s ease;
}
.scard__rbtn:active .scard__rbtn-circle { transform: scale(0.88); }
.scard__rbtn-circle svg { width: 22px; height: 22px; fill: currentColor; }
.scard__rbtn-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  color: var(--ink-fg);
}
.scard__rbtn[aria-pressed="true"] .scard__rbtn-circle {
  background: var(--brand);
  color: var(--ink);
}

/* レールが5段になったので、低い画面では段階的に詰める */
@media (max-height: 700px) {
  .scard__rail { gap: 0.7rem; }
  .scard__rbtn-circle { width: 40px; height: 40px; }
}
@media (max-height: 580px) {
  .scard__rail { gap: 0.55rem; }
  .scard__rbtn-label { display: none; }
}

/* ---- 紹介シート（ボトムシート） ----
   フィードから離れずに紹介文を読む。閉じれば同じカードに居る */
.blurb { position: fixed; inset: 0; z-index: 46; }
.blurb[hidden] { display: none; }
.blurb__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.blurb__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 560px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  padding: 0.9rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  max-height: 72vh;
  max-height: 72dvh;
  overflow-y: auto;
  font-family: var(--sans);
  color: var(--ink-fg);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.blurb.is-open .blurb__sheet { transform: none; }
.blurb__grip {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-muted);
  opacity: 0.5;
  margin: 0 auto 0.9rem;
}
.blurb__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 0.2rem;
}
.blurb__bib { font-size: 0.75rem; color: var(--ink-muted); margin: 0 0 0.9rem; }
.blurb__kind {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 0.5rem;
}
.blurb__body {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.95;
  white-space: pre-line;
  margin-bottom: 1.1rem;
}
.blurb__more { margin: 0; }
.blurb__more a {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .blurb__sheet { transition: none; }
}

/* ---- 共有シート（YouTube の共有ダイアログと同じ文法） ---- */
.sharesheet__row {
  display: flex;
  gap: 1.1rem;
  margin: 0.4rem 0 1.2rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
}
.sharesheet__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: var(--ink-muted);
  text-decoration: none;
  flex: none;
}
.sharesheet__circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff;
}
.sharesheet__circle svg { width: 20px; height: 20px; fill: currentColor; }
.sharesheet__circle--x { background: #000; border: 1px solid var(--ink-line); }
.sharesheet__circle--line { background: #06c755; font-size: 0.6rem; }
.sharesheet__circle--fb { background: #1877f2; font-size: 1.3rem; font-family: serif; }
.sharesheet__circle--hatena { background: #00a4de; }
.sharesheet__circle--mail { background: #5c6f6b; }

.sharesheet__copy {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.sharesheet__copy input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  font-family: var(--sans);
}
.sharesheet__copy button {
  flex: none;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: none;
  background: var(--brand);
  color: var(--ink);
  cursor: pointer;
}

.scard__hint {
  text-align: center;
  font-size: 0.66rem;
  color: var(--ink-muted);
  margin: 0;
}
.scard__hint a { color: var(--ink-muted); }

.scard__panel--end { text-align: center; }
.scard__endtitle {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.scard__endnote { font-size: 0.82rem; color: var(--ink-muted); margin: 0 0 1.2rem; }
.scard__panel--end .scard__actions { justify-content: center; margin-bottom: 1.2rem; }

/* ---- 上端オーバーレイ ---- */

/* パネル（z:30）より上に置く。パネルを開いても積読・メニューのボタンが
   閉じる操作として押せる必要がある */
.shelf-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(0.55rem + env(safe-area-inset-top)) 0.9rem 0.55rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
  transition: opacity 0.25s ease;
}
.shelf-top.is-faded { opacity: 0; pointer-events: none; }

.shelf-top__brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-fg);
  text-decoration: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 0.95rem;
}
.shelf-top__brand img { border-radius: 6px; }

.shelf-top__right { display: flex; align-items: center; gap: 0.55rem; }

.shelf-top__stack,
.shelf-top__burger {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-fg);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  position: relative;
}
.shelf-top__burger { font-size: 0.95rem; padding: 0.3rem 0.65rem; }

.shelf-top__count {
  position: absolute;
  top: -0.45rem;
  right: -0.4rem;
  background: var(--brand);
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.16rem 0.34rem;
  border-radius: 999px;
}

/* ---- 引き出しパネル（メニュー / 積読） ---- */

.shelf-panel {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--ink-fg);
  overflow-y: auto;
  padding: calc(3.6rem + env(safe-area-inset-top)) 1.4rem 2rem;
  box-sizing: border-box;
}
/* パネルの「閉じて棚に戻る」。上端バー（積読・☰）と紛れないよう、
   パネル本文の先頭に置いて帰り道を1つに見せる */
.shelf-panel__close {
  display: block;
  width: 100%;
  margin: 0 0 1.2rem;
  padding: 0.6rem 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-fg);
  background: transparent;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  cursor: pointer;
}

/* パネルの中身はカードと同じ 560px に上限を切って中央へ。
   これが無いと広い画面で項目が左端に張り付く（実指摘） */
.shelf-panel > * {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.shelf-panel ul { list-style: none; margin: 0 auto 1.4rem; padding: 0; }
.shelf-panel li { border-bottom: 1px solid var(--ink-line); }
.shelf-panel a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 0.2rem;
  color: var(--ink-fg);
  text-decoration: none;
  font-size: 0.95rem;
}
.shelf-panel__ic {
  width: 20px;
  height: 20px;
  flex: none;
  fill: var(--ink-muted);
}
.shelf-panel h2 {
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 auto 0.6rem;
}
.shelf-panel__external a { color: var(--ink-muted); font-size: 0.85rem; }
.shelf-panel__stack .when {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}
.shelf-panel__note { font-size: 0.72rem; color: var(--ink-muted); line-height: 1.7; }
.shelf-panel__empty { color: var(--ink-muted); font-size: 0.85rem; }

/* 行全体を1枚のカードとして押せるようにする。
   ホバーで面が浮き、カーソルも変わるので「押せる」ことが分かる */
.shelf-panel__stack li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.7rem 0.7rem;
  margin: 0 -0.7rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.shelf-panel__stack li:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateX(2px);
}
.shelf-panel__stack li:active { background: rgba(255, 255, 255, 0.11); }
.shelf-panel__stack .cv {
  width: 36px;
  height: 52px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.shelf-panel__stack .t { font-size: 0.85rem; line-height: 1.5; flex: 1; }
.shelf-panel__stack .t a { display: inline; padding: 0; }
.shelf-panel__stack .b { display: flex; gap: 0.4rem; flex: none; }
/* 購入ボタンは棚のカードと同じ塗り。積読リストは実質アフィリエイトの
   リンク集（D 節）なので、ここでも枠線だけの沈んだ見た目にしない */
.shelf-panel__stack .b a {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--ink);
  border-radius: 999px;
  text-decoration: none;
}
.shelf-panel__stack .rm {
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
  .shelf { scroll-behavior: auto; }
  .shelf-top { transition: none; }
}

/* ==================================================================
   記事専用ページ（読む画面 / アルファ版）
   1行 30〜35 字・行送り 1.9・本文中は装置ゼロ。
   棚と同じ墨（--ink）に敷く。棚→記事で画面が切り替わった感を出さない
   （紙色にしたら「明らかに別画面」という実指摘を受けた）。
   カード面は白の 5% を重ねるだけにして、面の階層は墨の中で作る
   ================================================================== */

body.rbody {
  background: var(--ink);
  color: var(--ink-fg);
}

/* 墨の上では、一覧ページ用の購入ピル（--accent は明地用）が沈む。ブランド色に張り替える */
.rbody .buy { color: var(--brand); border-color: var(--ink-line); }
.rbody .buy--rakuten { background: transparent; border-color: var(--brand); }
.rbody .buy:hover { border-color: var(--brand); }

.rprogress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 50;
  background: transparent;
}
.rprogress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 0.1s linear;
}

.rheader {
  position: fixed;
  top: 3px;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1rem;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--sans);
  transition: transform 0.25s ease;
}
.rheader.is-hidden { transform: translateY(-110%); }
.rheader__back {
  font-size: 0.85rem;
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
}
.rheader__brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-fg);
  text-decoration: none;
}
.rheader__brand img { border-radius: 5px; }

/* 縦の余白は各セグメントが自前で持つ（1画面=1節）ので、外枠は横だけ */
.rmain { padding: 0 1.25rem; }

/* ---- セグメント読み（スライド型） ----
   1 画面 = 1 節。棚のカード送りと同じ mandatory スナップで、画面には
   常にひとつの節だけが載る（画面に出る文字量をあえて制限する実指摘）。
   短い節は画面中央に組み、画面より長い節だけは節の中で自由に
   スクロールできる（snap 領域が snapport より大きい場合、途中で
   止まれるのは CSS scroll-snap の仕様）*/
html:has(body.rbody) {
  scroll-snap-type: y mandatory;
}
.rseg {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(3.8rem + env(safe-area-inset-top));
  padding-bottom: calc(3.6rem + env(safe-area-inset-bottom));
}
.rbody-text .rseg > h2 { margin-top: 0; }

/* 冒頭画面の下端に置くスクロールガイド。↓がゆっくり呼吸し、
   タップで本文の最初の節へ。冒頭セグメントと一緒に流れて消える */
.rseg--lead { position: relative; }
.rseg__cue {
  position: absolute;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.rseg__cue svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  animation: rcue-bob 2.2s ease-in-out infinite;
}
@keyframes rcue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rseg__cue svg { animation: none; }
}

/* 右端の節ナビ。現在地が分かり、タップで節へ飛べる */
.rdots {
  position: fixed;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 35;
}
.rdots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-line);
  border: none;
  padding: 0;
  cursor: pointer;
}
.rdots button.is-active {
  background: var(--brand);
  height: 22px;
  border-radius: 5px;
}

/* 1行 30〜35 字。44rem の一覧ページより意図的に狭い。
   行送りと段落間は詰まって見えるという実指摘を受けて広めに取る */
.rarticle {
  max-width: 34em;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 2.05;
}
.rarticle__kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
}
.rarticle h1 {
  font-size: 1.55rem;
  line-height: 1.5;
  font-weight: 600;
  margin: 0 0 1.4rem;
  text-wrap: balance;
}
.rbody-text p { margin: 0 0 2em; }
.rbody-text h2, .rbody-text h3 {
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.7;
  margin: 2.2em 0 1.2em;
}

/* 冒頭の書誌カード。何の本の話かを示す控えめな一枚 */
.rbook {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin: 0 0 2.2rem;
  font-family: var(--sans);
}
.rbook__cover { width: 64px; height: auto; border-radius: 3px; flex: none; }
.rbook__title { font-family: var(--serif); font-weight: 600; font-size: 0.95rem; line-height: 1.5; margin: 0 0 0.15rem; }
.rbook__title a { color: var(--ink-fg); text-decoration: none; }
.rbook__bib { font-size: 0.76rem; color: var(--ink-muted); margin: 0 0 0.4rem; }

/* 読了後ブロック。ここが購入の主戦場 */
.after {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink-line);
  font-family: var(--sans);
}
.after__label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 0.8rem;
}
/* 購入ブロックの主語。「次の一冊」のカードと取り違えないよう、
   ボタンの真上にこの本の顔（書影＋書名）を置く */
.after__target {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  margin-bottom: 0.9rem;
}
.after__targetcover { width: 48px; height: auto; border-radius: 3px; flex: none; }
.after__targetmeta b {
  display: block;
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-fg);
}
.after__targetmeta span {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

.after__buys { display: flex; gap: 0.6rem; margin-bottom: 2rem; }
/* 両ストアは同格。片方だけ塗ると「推してる方」に見える（実指摘） */
.after__buy {
  flex: 1;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.8rem 0;
  border-radius: 10px;
  border: 1.5px solid var(--brand);
  background: var(--brand);
  color: var(--ink);
  text-decoration: none;
}

.after__next { margin-bottom: 2rem; }
.after__nextlink {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--ink-fg);
}
.after__cover { width: 52px; height: auto; border-radius: 3px; flex: none; }
.after__nextbody b { font-family: var(--serif); font-size: 0.92rem; line-height: 1.5; display: block; }
.after__nextbody span { display: block; font-size: 0.74rem; color: var(--ink-muted); margin-top: 0.15rem; }
.after__nextbody .after__nexthint { color: var(--brand); font-weight: 600; margin-top: 0.4rem; }

.after__shelf { text-align: center; margin: 0; }
.after__shelf a { color: var(--ink-muted); font-size: 0.85rem; }

/* ---- 常設の購入バー ----
   「こちらから読めます」を本文から消した分、購入導線は画面の枠が持つ。
   冒頭（書誌カードと重複する間）と読了後ブロック表示中は引っ込み、
   本文を読んでいる間だけ下端に静かに居る */
.rbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 38;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 34em;
  margin: 0 auto;
  padding: 0.45rem 0.8rem calc(0.45rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ink-line);
  font-family: var(--sans);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}
.rbar.is-visible { transform: translateY(0); }
.rbar__cover { width: 26px; height: 38px; object-fit: cover; border-radius: 2px; flex: none; }
.rbar__title {
  flex: 1;
  min-width: 0;
  font-size: 0.74rem;
  color: var(--ink-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rbar__buys { display: flex; gap: 0.4rem; flex: none; }
.rbar__buy {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--ink);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .rbar { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rheader { transition: none; }
  .rprogress i { transition: none; }
}