/*
 * YAMADARIUM 図書館の試作 — 世界観: 夜明け前の空に浮かぶ図書館
 * 深い藍の空・地平線の金の光・霧がかった青。地はぼかした画像と星の粒（どちらもビルド時に作った静的な画像）
 * 動かすのは opacity と transform だけ。backdrop-filter・Canvas・常時のアニメーションは使わない
 */
:root {
  --sky-0: #050812;
  --sky-1: #0a1124;
  --sky-2: #132042;
  --mist: #8ea2c6;
  --dawn: #f2c27b;            /* 地平線の光（金） */
  --dawn-2: #fbe3b6;
  --lamp: 242 194 123;        /* 灯りの光の色（rgb の数字。線の光・にじみ・栞の帯に使う） */
  --lamp-2: 251 227 182;
  --ink: #ece8df;             /* 本文（温かい白） */
  --ink-2: #aab4c8;           /* 補足（霧の青） */
  --ink-3: #74809a;
  --hair: rgb(var(--lamp) / 0.30);   /* 金の細線 */
  --hair-2: rgb(170 190 230 / 0.16); /* 青の細線 */
  --glass: linear-gradient(180deg, rgb(22 34 66 / 0.62) 0%, rgb(9 14 30 / 0.78) 100%);
  --glow: 0 0 0 1px var(--hair), 0 24px 60px -24px rgb(var(--lamp) / 0.35);
  --wide: 1480px;
  --gut: clamp(16px, 4vw, 64px);
  --mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --gothic: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  /* 文字組みの段階（docs/LIBRARY-PROTOTYPE.md §8。スマホ → PC）。文字の大きさ・字間・行の高さはここで決め、各所では変数だけを使う */
  --fs-title: clamp(1.875rem, 1.2rem + 3vw, 3.5rem);     /* 1 表題 30→56px */
  --fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);       /* 2 区画の見出し 24→30px */
  --fs-catch: clamp(1.1875rem, 1rem + 0.9vw, 1.4375rem);  /* 3 キャッチ 19→23px */
  --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);    /* 4 小見出し 18→20px */
  --fs-lyric: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* 5 歌詞 18→20px */
  --fs-prose: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);   /* 6 読み物 17→18px */
  --fs-text: 1rem;        /* 7 説明文 16px */
  --fs-ui: 0.9375rem;     /* 8 押せる物 15px */
  --fs-note: 0.875rem;    /* 9 注記 14px */
  --fs-tag: 0.75rem;      /* 10 小札 12px（これより小さい文字は作らない。ルビだけ例外で 10px まで） */
  --lh-title: 1.4; --lh-h2: 1.4; --lh-catch: 1.75; --lh-h3: 1.5; --lh-prose: 1.9; --lh-text: 1.75; --lh-ui: 1.4; --lh-note: 1.6;
  --ls-title: 0.06em; --ls-h2: 0.12em; --ls-catch: 0.04em; --ls-h3: 0.06em; --ls-lyric: 0.03em; --ls-text: 0.02em; --ls-ui: 0.04em;
  --ls-tag: 0.16em;       /* 字間を広げるのは6字までの小札だけ（0.16em を超えるのはロゴだけ） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* 余白の段 */
  color-scheme: dark;
}
/* ダーク（夜の館）: 深い夜空に金の灯り。JS が無いときは上の :root の値（夜明けの空）で表示する */
:root[data-theme="dark"] {
  --sky-0: #03050c;
  --sky-1: #070c1a;
  --sky-2: #0f1934;
}
/* 差し色: 本ごとの色（暗い地でも見える明るい方 --c-n）。無ければ夜明けの金 */
:root, :root * { --accent: var(--c-n, var(--dawn)); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--sky-0); }
body {
  margin: 0;
  background: transparent; /* 地は html と .world が受け持つ（body に色を塗ると z-index:-1 の背景が隠れる） */
  color: var(--ink);
  font-family: var(--gothic);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-text);
  padding-bottom: 64px;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
/* 長い文は行いっぱいに詰める。文節で改行するのは短い文（見出し・帯・裏返し・歌詞と訳）だけ（対応ブラウザのみ） */h1, h2, h3, .hero-lead, .book-obi, .entry-obi, .obi-q, .flip-text, .lt, .ltr, .pas-l, .pas-tr { word-break: auto-phrase; }
::selection { background: rgb(var(--lamp) / 0.35); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── 世界の地（全ページの一番奥） */
.world { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--sky-0); }
.world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.world-stars { position: absolute; inset: 0; background: url("img/stars-a7d8f4e820.webp") repeat; background-size: 480px; opacity: 0.55; }
.world-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% 108%, rgb(var(--lamp) / 0.16) 0%, transparent 70%),
    linear-gradient(180deg, rgb(5 8 18 / 0.55) 0%, rgb(5 8 18 / 0.25) 45%, rgb(5 8 18 / 0.7) 100%);
}
:root[data-theme="dark"] .world img { opacity: 0.28; }
:root[data-theme="dark"] .world-stars { opacity: 0.85; }
:root[data-theme="dark"] .world-glow { background: radial-gradient(ellipse 60% 35% at 50% 108%, rgb(var(--lamp) / 0.12) 0%, transparent 70%), linear-gradient(180deg, rgb(3 5 12 / 0.6), rgb(3 5 12 / 0.8)); }

/* 地平線（区画の区切り。中央に光がにじむ） */
.horizon { position: relative; height: 1px; max-width: var(--wide); margin: 0 auto; }
.horizon::before {
  content: ""; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--hair) 25%, var(--dawn) 50%, var(--hair) 75%, transparent 100%);
}
.horizon span {
  position: absolute; left: 50%; top: -40px; width: min(560px, 70vw); height: 80px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(var(--lamp) / 0.22) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 頭 */
.top {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 32px;
  max-width: var(--wide); margin: 0 auto; padding: 22px var(--gut);
}
.page-home .top, .page-book .top { position: absolute; left: 0; right: 0; top: 0; }
.brand { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; line-height: 1.35; margin-right: auto; }
.brand-name { font-family: var(--mincho); font-size: 1.15rem; letter-spacing: 0.32em; }
.top-nav { display: none; gap: 36px; }
.top-nav a {
  position: relative; color: var(--ink); text-decoration: none; font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); padding: 4px 0;
}
.top-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--dawn);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.top-nav a:hover::after, .top-nav a:focus-visible::after { transform: scaleX(1); }
.lamp {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair); background: rgb(5 8 18 / 0.35);
  border-radius: 999px; padding: 3px 14px 3px 10px; font-size: var(--fs-tag); letter-spacing: var(--ls-tag); cursor: pointer; color: var(--ink);
}

/* ── 全面の画像（共通） */
.hero-bg, .backdrop, .extra-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img, .backdrop img, .extra-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.backdrop { position: fixed; z-index: -1; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 8 18 / 0.55) 0%, rgb(5 8 18 / 0.35) 40%, rgb(5 8 18 / 0.8) 100%); }

/* ── 入口の大きな画像 */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgb(5 8 18 / 0.5) 0%, rgb(5 8 18 / 0.05) 30%, rgb(5 8 18 / 0.1) 62%, var(--sky-1) 100%);
}
.hero-in { position: relative; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut) 72px; }
.hero-lead {
  font-family: var(--mincho); font-size: clamp(1.7rem, 4.6vw, 2.8rem); line-height: 1.7; letter-spacing: 0.14em; margin: 0 0 22px;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.55);
}
.hero-sub { margin: 0 0 32px; max-width: 30em; color: rgb(236 232 223 / 0.88); }
.hero-go {
  display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font-size: var(--fs-ui); letter-spacing: var(--ls-tag); font-family: var(--gothic);
}
.hero-go::before { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--dawn)); }

/* ── 区画 */
.sec { position: relative; padding: clamp(var(--sp-7), 9vw, 140px) 0; }
.sec-in { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut); }
.sec-head { text-align: center; margin: 0 auto clamp(var(--sp-5), 4vw, 56px); max-width: 44em; }
.kicker {
  display: inline-flex; align-items: center; gap: 14px; margin: 0 0 var(--sp-2);
  font-family: var(--gothic); font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--dawn);
}
.kicker::before, .kicker::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--dawn)); }
.kicker::after { transform: scaleX(-1); }
.sec-title {
  font-family: var(--mincho); font-weight: 500; font-size: var(--fs-h2); letter-spacing: var(--ls-h2); margin: 0 0 var(--sp-3); line-height: var(--lh-h2);
  padding-left: var(--ls-h2); /* 字間ぶん中央をそろえる */
  background: linear-gradient(180deg, #fff 30%, var(--dawn-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-sub { margin: 0; color: var(--ink-2); font-size: var(--fs-text); }

/* ── 本棚（主役） */
/* 棚の札（押せるボタン。スマホは3列にそろえ、広い画面は中央に並べる） */
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 clamp(32px, 4vw, 52px); }
.filters label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 8px 4px;
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--ink); white-space: nowrap; cursor: pointer;
  background: var(--glass); border: 1px solid var(--hair-2); border-radius: 2px;
  transition: border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.filters label::before { /* 札の内側の細い枠（本の表紙と同じ意匠） */
  content: ""; position: absolute; inset: 3px; border: 1px solid rgb(255 255 255 / 0.05); pointer-events: none;
}
.filters label:hover { border-color: var(--hair); transform: translateY(-2px); }
.filters label .count { /* スマホ: 札の右上の小さな印 */
  position: absolute; top: -7px; right: -5px; min-width: 1.6em; padding: 0 0.35em; border-radius: 999px; font-size: var(--fs-tag); line-height: 1.5; letter-spacing: 0;
  font-family: var(--gothic); color: var(--ink-2); background: var(--sky-1); border: 1px solid var(--hair-2); text-align: center;
}
.filters label.is-empty { opacity: 0.38; cursor: default; }
.filters label.is-empty:hover { border-color: var(--hair-2); transform: none; }
.more-shelves { grid-column: 1 / -1; }
@media (min-width: 720px) {
  /* 中くらいの幅は 5 列（9 枚なら 5 + 4）、広い画面は 1 段にそろえる */
  .filters { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 860px; margin-left: auto; margin-right: auto; }
  .filters label { padding: 9px 14px; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); }
  .filters label .count { position: static; min-width: 1.7em; padding: 0 0.45em; font-size: var(--fs-tag); line-height: 1.6; }
}
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(130px, 42vw), 1fr)); gap: clamp(16px, 2vw, 34px); }

.book {
  position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; text-decoration: none; isolation: isolate;
  color: #fff; background: radial-gradient(ellipse 120% 70% at 50% 110%, color-mix(in srgb, var(--c-n) 55%, transparent) 0%, transparent 60%), linear-gradient(170deg, var(--sky-2) 0%, var(--sky-0) 100%);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--hair-2), 0 18px 40px -20px rgb(0 0 0 / 0.8);
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), box-shadow 0.6s ease;
}
.book::after { /* 表紙の内側の細い枠 */
  content: ""; position: absolute; inset: 7px; z-index: 3; border: 1px solid rgb(255 255 255 / 0.16); pointer-events: none;
  transition: border-color 0.6s ease;
}
a.book:hover, a.book:focus-visible { transform: translateY(-8px); box-shadow: var(--glow); }
a.book:hover::after, a.book:focus-visible::after { border-color: rgb(var(--lamp) / 0.55); }
.book-art { position: absolute; inset: 0; } /* 表紙の絵（PC は全面。スマホは上だけ） */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
a.book:hover .cover-img { transform: scale(1.05); }
.book-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(5 8 18 / 0.45) 0%, transparent 26%, transparent 40%, rgb(5 8 18 / 0.92) 100%); }
.book-sheen { /* 表紙に一度だけ光が走る（transform のみ） */
  position: absolute; inset: -20%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgb(var(--lamp-2) / 0.16) 50%, transparent 60%);
  transform: translateX(-70%); transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
a.book:hover .book-sheen { transform: translateX(70%); }
.book-name { /* 題は横書き（英語の題を縦に倒すと読みにくく、縦と横が混ざると落ち着かないため。2026-10-29） */
  position: absolute; z-index: 2; top: 20px; left: 18px; right: 18px; max-height: 44%; overflow: hidden;
  font-family: var(--mincho); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); text-wrap: balance;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.75);
}
.book-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.book-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* 棚の札と「読了」の印を同じ列に（題の位置は読了でも動かさない） */
.book-shelf { /* 棚の名は角の丸い札（題・帯と見分けやすく） */
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.22); background: rgb(5 8 18 / 0.55);
  font-family: var(--gothic); font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--dawn-2); line-height: 1.6;
}
.book-shelf::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-n); box-shadow: 0 0 8px var(--c-n); }
.book-obi { /* 帯は題より控えめに（ゴシック・注記の大きさ） */
  font-family: var(--gothic); font-size: var(--fs-note); line-height: var(--lh-note); letter-spacing: var(--ls-text); color: rgb(255 255 255 / 0.84);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.book-read { /* 読了の印: 記録として控えめに（棚の札より淡く。再読をためらわせない） */
  display: none; padding: 1px 9px; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.16); background: rgb(5 8 18 / 0.35);
  font-family: var(--gothic); font-size: var(--fs-tag); letter-spacing: var(--ls-tag); line-height: 1.6; color: rgb(255 255 255 / 0.66);
}
.book.is-read .book-read { display: inline-block; }

/* ── 別の楽しみ方（おまけ。3つ並び） */
.extras { display: grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: 1fr; }
.extra {
  position: relative; background: var(--glass); border: 1px solid var(--hair-2); padding: clamp(24px, 2.6vw, 40px);
  box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.9);
}
.extra::before { /* 上辺の金の光 */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dawn), transparent); opacity: 0.7;
}
.extra-kicker { display: block; margin: 0 0 var(--sp-1); font-family: var(--gothic); font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--dawn); }
.extra-title { display: block; font-family: var(--mincho); font-weight: 500; font-size: var(--fs-h2); letter-spacing: var(--ls-h2); line-height: var(--lh-h2); margin: 0 0 var(--sp-3); }
.hint { color: var(--ink-2); font-size: var(--fs-text); margin: 0 0 var(--sp-5); }
.extra-michi { display: flex; align-items: flex-start; min-height: 420px; overflow: hidden; text-decoration: none; color: var(--ink); padding: clamp(24px, 2.6vw, 40px); }
.extra-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(5 8 18 / 0.05) 0%, rgb(5 8 18 / 0.35) 45%, rgb(5 8 18 / 0.92) 100%); } /* 見出しは隣の区画と同じく上に置くので、上を暗く */
.extra-bg img { transition: transform 2s cubic-bezier(.2,.7,.2,1); }
.extra-michi:hover .extra-bg img { transform: scale(1.05); }
.extra-michi-in { position: relative; display: flex; flex-direction: column; }
.extra-michi-q { font-family: var(--mincho); font-size: var(--fs-catch); line-height: var(--lh-catch); margin: var(--sp-1) 0 var(--sp-3); letter-spacing: var(--ls-catch); color: var(--dawn-2); text-shadow: 0 2px 16px rgb(0 0 0 / 0.6); }
.extra-michi .hint { color: rgb(236 232 223 / 0.82); }
.extra-michi .btn { align-self: flex-start; }

/* ── 共通の部品 */
.btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 28px; border: 1px solid var(--hair);
  background: rgb(5 8 18 / 0.35); color: var(--ink); text-decoration: none; font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.btn::after { content: ""; width: 22px; height: 1px; background: var(--dawn); transition: transform 0.5s cubic-bezier(.2,.7,.2,1); transform-origin: left; }
.btn:hover, a:hover .btn { border-color: var(--dawn); box-shadow: 0 0 24px -6px rgb(var(--lamp) / 0.6); }
.btn:hover::after, a:hover .btn::after { transform: scaleX(1.6); }
.crumb { display: flex; gap: 12px; align-items: center; font-size: var(--fs-note); letter-spacing: var(--ls-text); margin: 0 0 var(--sp-5); color: rgb(236 232 223 / 0.8); }
.crumb a { color: inherit; }
.crumb span::before { content: "―"; margin-right: 12px; color: var(--dawn); }
.rest { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-note); color: var(--ink-2); margin: var(--sp-6) 0 0; }
.rest span { color: var(--ink-3); }

/* カード（今日の一枚・裏返し） */
/* 表と裏を同じ升目に重ねる（長い一節でも、カードは中身の高い方に合わせて伸び、はみ出さない） */
.card, .flip {
  display: grid; width: 100%; min-height: 240px; margin: 0;
  position: relative; border: 0; padding: 0; background: none; cursor: pointer;
  perspective: 1400px; text-align: left; color: var(--ink);
}
.card-face {
  grid-area: 1 / 1; position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-5); border: 1px solid var(--hair-2);
  background: url("img/stars-a7d8f4e820.webp") repeat 0 0 / 360px, linear-gradient(170deg, var(--sky-2) 0%, var(--sky-0) 100%);
  backface-visibility: hidden; transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.card-face::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgb(255 255 255 / 0.08); pointer-events: none; }
.card-front { align-items: center; }
.card-mark { /* 伏せたカードの紋（円と光） */
  display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  border: 1px solid var(--hair); font-family: var(--mincho); font-size: var(--fs-ui); letter-spacing: var(--ls-tag); padding-left: var(--ls-tag); color: var(--dawn-2);
  background: radial-gradient(circle at 50% 50%, rgb(var(--lamp) / 0.18) 0%, transparent 65%);
  box-shadow: 0 0 40px -10px rgb(var(--lamp) / 0.5);
}
.card-back, .flip-back {
  transform: rotateY(180deg); border-color: var(--hair);
  background: radial-gradient(ellipse 90% 60% at 50% 120%, rgb(var(--lamp) / 0.22) 0%, transparent 70%), linear-gradient(170deg, var(--sky-2) 0%, var(--sky-0) 100%);
}
.is-open .card-front, .is-open .flip-front { transform: rotateY(-180deg); }
.is-open .card-back, .is-open .flip-back { transform: rotateY(0); }
.card-line { white-space: pre-line; overflow-wrap: anywhere; font-family: var(--mincho); font-size: var(--fs-text); line-height: var(--lh-text); letter-spacing: var(--ls-text); }
.card-obi { margin-top: var(--sp-4); font-size: var(--fs-note); color: var(--dawn-2); letter-spacing: var(--ls-text); }
.card-go, .flip-go { text-align: center; font-size: var(--fs-ui); margin: var(--sp-4) 0 0; }
.flip-label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--ink-2); margin-bottom: var(--sp-3); }
.flip-label::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.flip-back .flip-label { color: var(--accent); }
.flip-text { font-family: var(--mincho); font-size: var(--fs-catch); line-height: var(--lh-catch); letter-spacing: var(--ls-catch); }
.flip-hint { margin-top: var(--sp-4); font-size: var(--fs-note); letter-spacing: var(--ls-text); color: var(--ink-3); }

/* 栞の一覧（本ごとにまとめる。題は1度だけ、行に栞の印） */
.shiori-list, .shiori-lines { list-style: none; padding: 0; margin: 0; }
.shiori-book { padding: var(--sp-3) 0; border-bottom: 1px solid var(--hair-2); }
.shiori-book:first-child { padding-top: 0; }
.shiori-head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); font-family: var(--gothic); font-size: var(--fs-note); line-height: var(--lh-note); letter-spacing: var(--ls-text); }
.shiori-head a { min-width: 0; color: var(--ink-2); text-decoration: none; }
.shiori-head a:hover, .shiori-head a:focus-visible { color: var(--dawn-2); }
.shiori-head .count { flex: none; padding: 0 0.6em; border-radius: 999px; font-size: var(--fs-tag); line-height: 1.6; letter-spacing: 0; color: var(--ink-2); background: rgb(255 255 255 / 0.07); }
.shiori-lines li { position: relative; padding: var(--sp-1) 0 var(--sp-1) 22px; }
.shiori-lines li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 14px; background: var(--dawn); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
.shiori-lines a { display: block; text-decoration: none; color: var(--ink); font-family: var(--mincho); line-height: var(--lh-text); white-space: pre-line; overflow-wrap: anywhere; }
.shiori-lines a:hover, .shiori-lines a:focus-visible { color: var(--dawn-2); }
.shiori-list .empty { border: 0; padding: 0; color: var(--ink-3); font-size: var(--fs-text); }
.shiori-more {
  display: block; margin: var(--sp-4) 0 0; padding: 10px 14px; text-align: center; text-decoration: none;
  border: 1px solid var(--hair-2); color: var(--ink-2);
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); line-height: var(--lh-ui);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.shiori-more:hover, .shiori-more:focus-visible { border-color: var(--dawn); color: var(--dawn-2); }

/* ── 本のページ */
.book-hero { position: relative; min-height: 84svh; display: flex; align-items: flex-end; overflow: hidden; }
.book-hero.no-img .hero-bg { background: radial-gradient(ellipse 80% 60% at 70% 110%, color-mix(in srgb, var(--c-n) 45%, transparent) 0%, transparent 70%); }
.book-hero-in { position: relative; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 140px var(--gut) 72px; }
.obi-shelf {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-4);
  font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--dawn-2);
}
.obi-shelf::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-n); box-shadow: 0 0 10px var(--c-n); }
.book-title {
  font-family: var(--mincho); font-weight: 500; font-size: var(--fs-title); letter-spacing: var(--ls-title); margin: 0; line-height: var(--lh-title);
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.6);
}
.book-artist { font-size: var(--fs-note); letter-spacing: var(--ls-tag); margin: var(--sp-2) 0 var(--sp-5); color: rgb(236 232 223 / 0.75); }
.obi-q {
  position: relative; display: inline-block; margin: 0; padding: 14px 26px 14px 30px;
  font-family: var(--mincho); font-size: var(--fs-catch); line-height: var(--lh-catch); letter-spacing: var(--ls-catch);
  background: linear-gradient(90deg, rgb(5 8 18 / 0.7), rgb(5 8 18 / 0.25)); border: 1px solid var(--hair-2);
}
.obi-q::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-n); box-shadow: 0 0 14px var(--c-n); }

.book-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  max-width: var(--wide); margin: 0 auto; padding: clamp(40px, 5vw, 80px) var(--gut) var(--sp-8); /* 下は足の地平線と重ねない */
}
.book-side { display: none; }
.book-main { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.panel {
  position: relative; background: var(--glass); border: 1px solid var(--hair-2);
  padding: clamp(24px, 3vw, 52px); box-shadow: 0 30px 60px -40px rgb(0 0 0 / 0.9);
  scroll-margin-top: 24px;
}
.panel::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.65; }
.panel .sec-head { text-align: left; margin: 0 0 24px; max-width: none; }
.panel .sec-title { padding-left: 0; margin-bottom: var(--sp-2); }
.panel .kicker { margin-bottom: var(--sp-1); }
.panel .kicker::before { display: none; }
.book-intro { margin: 0; font-family: var(--mincho); font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--ink); }
.book-intro p { margin: 0; }
.book-intro p + p { margin-top: var(--sp-5); } /* まえがきの段落の間（空行で分けた所） */

/* 横の目次（広い画面） */
.side-in { position: sticky; top: 28px; display: grid; gap: 28px; }
.side-cover .book { max-width: 220px; }
.toc { border-top: 1px solid var(--hair); padding-top: 18px; }
.toc-h { margin: 0 0 var(--sp-2); font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--dawn); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: flex; gap: 14px; align-items: baseline; padding: 9px 0; text-decoration: none; color: var(--ink-2);
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); border-bottom: 1px solid var(--hair-2); transition: color 0.4s ease, transform 0.4s ease;
}
.toc a:hover { color: var(--ink); transform: translateX(4px); }
.toc-no { font-size: var(--fs-note); color: var(--dawn); min-width: 1.2em; }

/* 本文（歌詞）— 灯りの中で一行ずつ読む */
.lyrics { position: relative; padding-left: 26px; font-family: var(--mincho); font-size: var(--fs-lyric); line-height: 2; letter-spacing: var(--ls-lyric); }
.stanza { margin: 0 0 2.2em; }
.line {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: 8px; align-items: center; position: relative;
  padding: 0.18em 0; scroll-margin-top: 40vh;
  transition: opacity 0.9s ease, color 0.6s ease;
}
.lt { grid-column: 1; }
.ltr { grid-column: 1; display: block; font-size: var(--fs-note); line-height: 1.8; color: var(--ink-2); letter-spacing: var(--ls-text); margin-top: -0.1em; }
.line .shiori-btn { grid-column: 2; grid-row: 1 / span 2; }
ruby rt { font-size: max(0.5em, 10px); letter-spacing: 0.08em; color: var(--dawn-2); opacity: 0.85; font-family: var(--mincho); }
.line:target .lt { color: #fff; text-shadow: 0 0 20px rgb(var(--lamp) / 0.55); }

/* 読み灯り: 灯りの位置より上の行は明るく、下の行（これから読む行）は淡く。上へ戻ると、灯りより下の行はまた淡くなる。
   いまの行だけの印（灯りの点）は付けない（1行ずつ飛ぶ動きが読む邪魔になるため） */
.lyrics.is-reading .line { opacity: 0.34; }
.lyrics.is-reading .line.is-passed { opacity: 1; }
.lyrics.is-reading .line.is-shiori { opacity: 1; }
.line.is-passed .lt { color: #fff; }

/* 栞紐（左の細い線が、読んだところまで伸びる） */
.ribbon { position: absolute; left: 3px; top: 0.4em; bottom: 0.4em; width: 1px; background: var(--hair-2); }
.ribbon span { position: absolute; inset: 0; background: linear-gradient(180deg, var(--dawn), var(--dawn-2)); box-shadow: 0 0 8px var(--dawn); transform-origin: top; transform: scaleY(0); }
.ribbon-tip { /* 栞紐の先端の灯り（行ごとに飛ばず、線と一緒になめらかに進む） */
  position: absolute; left: -3px; top: -3.5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dawn); box-shadow: 0 0 12px 2px var(--dawn); opacity: 0; transition: opacity 0.6s ease;
}
.ribbon-tip.is-on { opacity: 1; }

/* 読んだ行の数 */
.read-meter { display: flex; align-items: center; gap: 14px; margin: -8px 0 var(--sp-6); font-size: var(--fs-note); letter-spacing: var(--ls-text); color: var(--ink-2); }
.read-meter-bar { position: relative; flex: 1; max-width: 240px; height: 1px; background: var(--hair-2); overflow: hidden; }
.read-meter-bar span { position: absolute; inset: 0; background: var(--dawn); transform-origin: left; transform: scaleX(0); transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.read-done { margin: 8px 0 0; padding: 14px 18px; border: 1px solid var(--hair); font-family: var(--mincho); font-size: var(--fs-prose); color: var(--dawn-2); letter-spacing: var(--ls-text); text-align: center; line-height: var(--lh-prose); animation: rise 1s ease both; }
.read-done span { display: inline-block; } /* 文節の途中で折り返さない */

/* 栞の印（どの行にもある、押せる印。いま読んでいる行と、はさんだ行ではっきり見える） */
.shiori-btn {
  position: relative; width: 40px; height: 40px; border: 0; padding: 0; background: none; cursor: pointer; justify-self: end;
  opacity: 0.28; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.shiori-btn::before { /* 栞の形（線） */
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 18px; margin: -9px 0 0 -6px;
  border: 1px solid var(--dawn); border-bottom: 0;
  clip-path: polygon(-10% -10%, 110% -10%, 110% 110%, 50% 72%, -10% 110%);
  background: transparent; transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.shiori-btn::after { /* 栞の切り込みの線 */
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; margin: 5px 0 0 -8px; background: transparent;
}
.line:hover .shiori-btn, .shiori-btn:focus-visible { opacity: 0.9; }
.shiori-btn:hover { transform: translateY(-2px); }
.line.is-shiori .shiori-btn { opacity: 1; }
.line.is-shiori .shiori-btn::before { background: var(--dawn); box-shadow: 0 0 12px var(--dawn); }
.shiori-btn:focus-visible { outline: 1px solid var(--dawn); outline-offset: -4px; }
@media (hover: none) { .shiori-btn { opacity: 0.45; } }
.word { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: underline dotted var(--accent); text-underline-offset: 0.35em; }
.word:hover { color: var(--accent); }

/* あとがき（読み終えると灯る） */
#after.is-lit { border-color: var(--hair); box-shadow: var(--glow); }
#after.is-lit .after-text { color: #fff; }

/* 知らせ */
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px);
  margin: 0; padding: 12px 22px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: linear-gradient(170deg, var(--sky-2), var(--sky-0)); border: 1px solid var(--hair); color: var(--ink);
  font-size: var(--fs-note); letter-spacing: var(--ls-text); box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.9);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1000px) { .toast { bottom: 32px; } }

/* 言葉のつながり（popover） */
.pop {
  border: 1px solid var(--hair); background: linear-gradient(170deg, var(--sky-2), var(--sky-0)); color: var(--ink);
  padding: 26px; max-width: min(460px, calc(100vw - 32px)); width: 100%; font-family: var(--gothic);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.9), 0 0 0 1px var(--hair-2);
}
.pop::backdrop { background: rgb(3 5 12 / 0.55); }
.pop-h { font-family: var(--mincho); margin: 0 0 16px; color: var(--dawn-2); }
.pop ul { list-style: none; padding: 0; margin: 0 0 16px; }
.pop li { margin: 0; border-bottom: 1px solid var(--hair-2); }
.pop a { text-decoration: none; display: block; padding: 10px 0 10px 14px; border-left: 2px solid var(--c-n); }
.pop-line { display: block; font-family: var(--mincho); color: var(--ink); }
.pop-title { color: var(--ink-2); }
.pop-close { border: 1px solid var(--hair); background: transparent; padding: 3px 16px; cursor: pointer; color: var(--ink-2); }

.after-text { margin: 0; font-family: var(--mincho); font-size: var(--fs-prose); line-height: var(--lh-prose); }

.yt { position: relative; display: block; text-decoration: none; max-width: 640px; overflow: hidden; border: 1px solid var(--hair-2); }
.yt img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; filter: brightness(0.75); transition: transform 1.4s cubic-bezier(.2,.7,.2,1), filter 0.6s ease; }
.yt:hover img { transform: scale(1.04); filter: brightness(0.9); }
.yt-play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.7); background: rgb(5 8 18 / 0.35); box-shadow: 0 0 30px -4px rgb(var(--lamp) / 0.6);
}
.yt-play::after { content: ""; position: absolute; left: 29px; top: 24px; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.yt-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 18px; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--ink); background: linear-gradient(transparent, rgb(5 8 18 / 0.85)); }

.facing { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 24px; align-items: end; }
.facing-note { margin: 0; font-family: var(--mincho); font-size: var(--fs-prose); color: var(--ink-2); line-height: var(--lh-prose); }

/* ── 分かれ道（JS で段階を切り替える。assets/app.js） */
.page-michi .world img { opacity: 0.2; }
.michi { max-width: 1180px; margin: 0 auto; padding: 24px var(--gut) var(--sp-8); min-height: 72svh; }
.michi .step { display: none; padding: clamp(40px, 10vh, 120px) 0 24px; }
.michi .kicker::after { display: none; }
.step-q { font-family: var(--mincho); font-size: var(--fs-h2); line-height: 1.6; margin: 0 0 var(--sp-6); letter-spacing: var(--ls-catch); text-shadow: 0 2px 24px rgb(0 0 0 / 0.6); }
.choices { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 680px; }
.end-in { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.end-text { position: relative; background: var(--glass); border: 1px solid var(--hair-2); padding: clamp(26px, 3.4vw, 52px); }
.end-text::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.end-line { font-family: var(--mincho); font-size: var(--fs-catch); line-height: var(--lh-catch); color: #fff; margin: var(--sp-3) 0 var(--sp-5); letter-spacing: var(--ls-catch); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 40%, transparent); }
.end-obi { font-family: var(--mincho); color: var(--ink-2); margin: 0 0 26px; }
.end-book .book { max-width: 260px; margin: 0 auto; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── 足 */
.foot { max-width: var(--wide); margin: 0 auto; padding: 56px var(--gut) 40px; text-align: center; color: var(--ink-2); font-size: var(--fs-note); }
.foot-brand { display: flex; flex-direction: column; gap: 4px; margin: 0 0 24px; }
.foot-brand .brand-name { color: var(--ink); }
.foot-care { margin: 0 0 10px; }

/* SNS への導線（YouTube・Instagram。アイコンはインラインの SVG で、色は文字の色） */
.sns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.sns a {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid var(--hair-2); color: var(--ink-2); text-decoration: none;
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); line-height: var(--lh-ui);
  transition: border-color 0.4s ease, color 0.4s ease;
}
.sns a:hover, .sns a:focus-visible { border-color: var(--dawn); color: var(--dawn-2); }
.sns-icon { flex: none; }
.sns-hero { margin-top: var(--sp-5); }
.sns-hero a { /* hero ではアイコンだけの丸いボタン（名前は aria-label。本を探す導線より目立たせない） */
  justify-content: center; width: 40px; padding: 0; color: rgb(236 232 223 / 0.88); border-color: rgb(255 255 255 / 0.22); background: rgb(5 8 18 / 0.35);
}
.sns-hero span { display: none; }
.sns-foot { justify-content: center; margin: 0 0 var(--sp-5); }
.sns-profile { margin-top: var(--sp-2); }

/* 当サイトについて: 運営者（アイコン・名前・SNS） */
.profile { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 var(--sp-5); }
.profile-icon { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hair); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.04); }
.profile-in { min-width: 0; }
.profile-name { margin: 0; font-family: var(--mincho); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.foot .note { font-size: var(--fs-note); color: var(--ink-3); margin: 0; }
.dock {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, rgb(10 17 36 / 0.94), rgb(5 8 18 / 0.98)); border-top: 1px solid var(--hair);
  padding-bottom: env(safe-area-inset-bottom);
}
.dock a { text-align: center; padding: 15px 0; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); line-height: var(--lh-ui); text-decoration: none; color: var(--ink); font-family: var(--gothic); }

/* ── 広い画面 */
@media (min-width: 720px) {
  .books { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 中くらいの幅: 今日の一枚と栞を横に並べ、分かれ道はその下に全幅（片側だけが空く段を作らない） */
  .extras { grid-template-areas: "today shiori" "michi michi"; }
  #today { grid-area: today; display: flex; flex-direction: column; } /* 隣の区画の高さに合わせて、カードを下まで伸ばす（下に空きを作らない） */
  #today .card { flex: 1 0 auto; }
  #shiori { grid-area: shiori; }
  .extra-michi { grid-area: michi; min-height: 300px; }
}
@media (min-width: 1000px) {
  body { padding-bottom: 0; }
  .dock { display: none; }
  .top-nav { display: flex; }
  .books { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .extras { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); align-items: stretch; }
  .extras { grid-template-areas: "today michi shiori"; }
  .extra-michi { min-height: 420px; }

  /* 入口: キャッチコピーは右に縦書き、館の名前と案内は左下 */
  .hero-in { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; gap: 48px; padding-bottom: 96px; }
  .hero-lead { writing-mode: vertical-rl; margin: 0; font-size: clamp(2.1rem, 2.8vw, 3rem); line-height: 1.9; }

  /* 本: 左に表紙と目次（追従）、右に本文 */
  .book-wrap { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); }
  .book-side { display: block; }
  .facing { grid-template-columns: 220px minmax(0, 1fr); }

  .end-in { grid-template-columns: minmax(0, 1fr) 260px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .lyrics.is-reading .line { opacity: 1; }
}

/* ── 追加: 棚の札の冊数・たたんだ棚・分かれ道（JS で段階を切り替える） */
.more-shelves { position: relative; }
.more-shelves summary { list-style: none; cursor: pointer; padding: 6px 2px; font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--ink-2); }
.more-shelves summary::-webkit-details-marker { display: none; }
.more-shelves summary::after { content: "＋"; margin-left: 0.5em; color: var(--dawn); }
.more-shelves[open] summary::after { content: "－"; }
.more-in { display: flex; flex-wrap: wrap; gap: 6px 30px; padding: 12px 0 0; }

.michi .step.is-current { display: block; animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both; }
html:not(.js) .michi [data-first] { display: block; }
.choices button {
  position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; text-align: left; cursor: pointer;
  padding: 20px 26px; border: 1px solid var(--hair-2); color: var(--ink); background: var(--glass);
  font-family: var(--gothic); font-size: var(--fs-text); letter-spacing: var(--ls-ui);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.choices button::after { content: ""; flex: none; width: 26px; height: 1px; background: var(--dawn); opacity: 0.5; transition: transform 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.5s ease; transform-origin: left; }
.choices button:hover, .choices button:focus-visible { border-color: var(--hair); box-shadow: var(--glow); transform: translateX(6px); }
.choices button:hover::after { transform: scaleX(1.8); opacity: 1; }
.linkish { border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; font: inherit; }
.end-line { white-space: pre-line; }
.end-why { font-size: var(--fs-note); color: var(--ink-2); margin: -12px 0 24px; }
.end-alt { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair-2); }
.end-alt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.end-alt-list a { display: block; padding-left: 14px; border-left: 2px solid var(--c-n, var(--dawn)); text-decoration: none; color: var(--ink); font-family: var(--mincho); }
.end-alt-list small { display: block; color: var(--ink-2); font-size: var(--fs-note); font-family: var(--gothic); }
@media (min-width: 1240px) {
  .filters { grid-template-columns: repeat(9, minmax(0, 1fr)); max-width: 1320px; }
  .filters:has(.more-shelves) { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 860px; }
}

/* ════════ 2026-10-29 改訂: 読み灯り・栞・言葉のつながり・本棚への導線・裏返すカード・本棚の段・目録 ════════ */
[hidden] { display: none !important; }

/* ── 読み灯り（灯りより上の行は明るく、これから読む行は淡く） */
.lyrics.is-reading .line { opacity: 0.42; }
.lyrics.is-reading .line.is-passed, .lyrics.is-reading .line.is-shiori { opacity: 1; }
.line { padding: 0.18em 6px 0.18em 12px; margin-left: -12px; border-radius: 2px; cursor: pointer; transition: opacity 0.5s ease, background-color 0.4s ease; }
.line:hover { background: rgb(255 255 255 / 0.035); }

/* ── 栞をはさんだ行: 金の帯 + 左の金の線 + 金の文字 + 右の栞が金色に塗られる */
.line.is-shiori {
  background: linear-gradient(90deg, rgb(var(--lamp) / 0.17) 0%, rgb(var(--lamp) / 0.06) 65%, transparent 100%);
  box-shadow: inset 2px 0 0 var(--dawn);
}
.line.is-shiori .lt { color: var(--dawn-2); }
.shiori-btn::before { width: 14px; height: 21px; margin: -10.5px 0 0 -7px; border-width: 1.5px; }
.line.is-shiori .shiori-btn::before { background: var(--dawn); border-color: var(--dawn); box-shadow: 0 0 14px 2px rgb(var(--lamp) / 0.6); }

/* ── 言葉のつながり（金色の言葉 + ほかの本の冊数） */
.word {
  color: var(--dawn-2); text-decoration: underline dotted rgb(var(--lamp) / 0.8); text-decoration-thickness: 1.5px; text-underline-offset: 0.32em;
}
.word:hover, .word:focus-visible { color: #fff; text-decoration-style: solid; }
.word-n {
  display: inline-block; vertical-align: 0.6em; margin-left: 0.15em; padding: 0.1em 0.42em; border-radius: 999px;
  font-family: var(--gothic); font-size: var(--fs-tag); line-height: 1.2; letter-spacing: 0; color: var(--sky-0); background: var(--dawn);
}

/* 目録カード（無地の紙のカード。罫線は文字と揃わず崩れて見えるため使わない。夜の館の中で「別の本の案内」だと一目で分かるように） */
.pop {
  padding: 0; border: 0; color: #2b2622; width: min(520px, calc(100vw - 24px)); max-width: none;
  background: #f1e7d1;
  box-shadow: 0 30px 70px -20px rgb(0 0 0 / 0.85); font-family: var(--gothic);
}
.pop::backdrop { background: rgb(3 5 12 / 0.6); }
.pop-head { padding: 14px 18px 10px; background: #f6efdf; border-bottom: 2px solid #b5463a; }
.pop-k { margin: 0; font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: #b5463a; }
.pop-h { margin: 2px 0 0; font-family: var(--mincho); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); color: #2b2622; }
.pop-h span { font-family: var(--gothic); font-size: var(--fs-note); color: #7a6a55; margin-left: 6px; }
.pop ul { list-style: none; margin: 0; padding: 4px 0; max-height: min(52vh, 360px); overflow-y: auto; }
.pop li { border-bottom: 1px dashed #cdbb97; }
.pop a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 18px; text-decoration: none; color: inherit; border-left: 0; }
.pop a:hover { background: rgb(181 70 58 / 0.07); }
.pop-cover { position: relative; width: 38px; aspect-ratio: 2 / 3; overflow: hidden; background: linear-gradient(160deg, var(--c), #1a1f2e); box-shadow: 1px 1px 0 rgb(0 0 0 / 0.2); }
.pop-cover .cover-img { position: absolute; inset: 0; }
.pop-body { display: flex; flex-direction: column; min-width: 0; }
.pop-title { font-family: var(--mincho); font-size: var(--fs-text); color: #1f1a16; }
.pop-title small { margin-left: 8px; font-family: var(--gothic); font-size: var(--fs-tag); color: #7a6a55; }
.pop-line { font-family: var(--mincho); font-size: var(--fs-note); color: #5b4f43; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-go { font-size: var(--fs-note); color: #b5463a; white-space: nowrap; }
.pop-go::after { content: " →"; }
.pop-close { display: block; margin: 8px 18px 14px auto; padding: 4px 16px; border: 1px solid #b9a37c; background: #f6efdf; color: #5b4f43; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); cursor: pointer; }

/* ── 本棚へ戻る道（本のページの上に付いてくる細い帯） */
.book-bar { position: sticky; top: 0; z-index: 15; background: linear-gradient(180deg, rgb(7 11 23 / 0.94), rgb(7 11 23 / 0.86)); border-bottom: 1px solid var(--hair-2); }
.book-bar-in { display: flex; align-items: center; gap: 18px; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut); height: 52px; }
.bar-back {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--hair); color: var(--ink); text-decoration: none;
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); white-space: nowrap; background: rgb(var(--lamp) / 0.06);
}
.bar-back::before { content: ""; width: 7px; height: 7px; border-left: 1px solid var(--dawn); border-bottom: 1px solid var(--dawn); transform: rotate(45deg); }
.bar-back:hover { border-color: var(--dawn); box-shadow: 0 0 18px -6px rgb(var(--lamp) / 0.7); }
.bar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mincho); color: var(--ink-2); font-size: var(--fs-note); letter-spacing: var(--ls-text); }
.bar-link { color: var(--ink-2); font-size: var(--fs-note); letter-spacing: var(--ls-text); white-space: nowrap; text-decoration: none; }
.bar-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 719px) { .bar-link { display: none; } }
.side-in { top: 72px; }
/* 画面が低いときは、左の列だけでスクロールできる（下の帯の分＋余白を引いた高さに収める） */
.side-in {
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
  margin: -12px -12px 0; padding: 12px 12px 24px; /* 表紙の影・目次の動きが切れないように */
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.side-back { justify-content: center; }
.next-go { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* 行き先は同じ幅に揃える */
.next-go .btn { justify-content: space-between; padding: 14px 18px; }
@media (min-width: 720px) { .next-go { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 見方を裏返す（押せるカード: 角が少しめくれ、下に「裏返す」ボタン。画面に入ると一度だけ少しめくれて見せる） */
.flip { min-height: 300px; }
.flip-front { border-color: var(--hair); }
.flip-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 11px 20px;
  border: 1px solid var(--dawn); background: rgb(var(--lamp) / 0.1); color: var(--dawn-2);
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); box-shadow: 0 0 22px -8px rgb(var(--lamp) / 0.7);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.flip-cta-icon::before { content: "↻"; font-family: var(--gothic); font-size: 1.05rem; }
.flip-cta.is-back { border-color: var(--hair-2); background: transparent; color: var(--ink-2); box-shadow: none; font-size: var(--fs-note); }
.flip:hover .flip-cta:not(.is-back) { background: rgb(var(--lamp) / 0.2); box-shadow: 0 0 30px -6px rgb(var(--lamp) / 0.9); }
.flip-corner { /* めくれた角 */
  position: absolute; right: 0; bottom: 0; width: 54px; height: 54px;
  background: linear-gradient(135deg, transparent 50%, rgb(var(--lamp) / 0.35) 50%, rgb(var(--lamp-2) / 0.85) 100%);
  box-shadow: -4px -4px 10px -4px rgb(0 0 0 / 0.6); transform-origin: right bottom; transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.flip:hover .flip-corner { transform: scale(1.4); }
.flip:hover:not(.is-open) .flip-front { transform: rotateY(-8deg); }
.flip.is-hint:not(.is-open) .flip-front { animation: peek 1.6s cubic-bezier(.2,.7,.2,1) 0.3s 1 both; }
@keyframes peek { 0% { transform: rotateY(0); } 40% { transform: rotateY(-24deg); } 100% { transform: rotateY(0); } }

/* ── 入口の本棚の段（新着・おすすめ・まだ読んでいない本。横に流れる） */
.row { margin: 0 0 clamp(var(--sp-6), 5vw, 72px); }
.row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 0 var(--sp-3); margin: 0 0 var(--sp-4); border-bottom: 1px solid var(--hair-2); position: relative; }
.row-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 1px; background: linear-gradient(90deg, var(--dawn), transparent); }
.row-kicker { margin: 0; font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--dawn); }
.row-title { margin: 2px 0 0; font-family: var(--mincho); font-weight: 500; font-size: var(--fs-h3); letter-spacing: var(--ls-h3); line-height: var(--lh-h3); }
.row-sub { margin: 2px 0 0; font-size: var(--fs-text); color: var(--ink-2); }
.row-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.row-more { color: var(--ink); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); margin-right: 8px; white-space: nowrap; }
.row-more::after { content: " →"; color: var(--dawn); }
.row-arrow { display: none; position: relative; width: 38px; height: 38px; border: 1px solid var(--hair); background: rgb(5 8 18 / 0.4); cursor: pointer; }
.row-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -2px; border-left: 1px solid var(--dawn); border-bottom: 1px solid var(--dawn); transform: rotate(45deg); }
.row-arrow.is-next::before { margin-left: -6px; transform: rotate(-135deg); }
.row-arrow:disabled { opacity: 0.25; cursor: default; }
.row.is-fit .row-arrow { visibility: hidden; }
@media (min-width: 720px) { .row-arrow { display: inline-block; } }
.row-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(138px, 40vw, 212px); gap: clamp(14px, 1.6vw, 26px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 12px 2px 16px;
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.row-track > * { scroll-snap-align: start; }
.row-empty { margin: 0; padding: 18px; border: 1px dashed var(--hair-2); color: var(--ink-2); font-size: var(--fs-text); text-align: center; }
.all-go { text-align: center; margin: 8px 0 0; }

/* ── 本を探す（気分・棚の札。押すと一覧ページへ） */
.find { display: grid; gap: 30px; }
.find-h { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--sp-3); font-family: var(--mincho); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); color: var(--dawn-2); }
.find-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair), transparent); }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.chip {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 10px 14px 10px 16px;
  background: var(--glass); border: 1px solid var(--hair-2); color: var(--ink); text-decoration: none;
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui);
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.chip::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgb(255 255 255 / 0.05); pointer-events: none; }
a.chip:hover, a.chip:focus-visible { border-color: var(--dawn); box-shadow: var(--glow); transform: translateY(-2px); }
.chip .count { flex: none; min-width: 1.8em; padding: 0 0.45em; border-radius: 999px; font-family: var(--gothic); font-size: var(--fs-tag); line-height: 1.6; text-align: center; color: var(--ink-2); background: rgb(255 255 255 / 0.07); letter-spacing: 0; }
.chip[aria-current] { border-color: var(--dawn); color: var(--dawn-2); background: linear-gradient(180deg, rgb(var(--lamp) / 0.16), rgb(9 14 30 / 0.8)); }
.chip[aria-current] .count, a.chip:hover .count { color: var(--sky-0); background: var(--dawn); }
.chip.is-empty { opacity: 0.36; }
.chip-all { justify-self: center; min-width: min(320px, 100%); justify-content: center; gap: 14px; border-color: var(--hair); }

/* ── 一覧ページ（目録） */
.list-page { max-width: var(--wide); margin: 0 auto; padding: 96px var(--gut) var(--sp-8); } /* 下は足の地平線と重ねない */
.list-h { margin-top: var(--sp-6); }
.list-h span { margin-left: var(--sp-3); font-family: var(--gothic); font-size: var(--fs-note); letter-spacing: var(--ls-text); color: var(--ink-2); }
.page-list .top { position: absolute; left: 0; right: 0; top: 0; }
.list-page .sec-head { margin-top: 24px; }
.find-fold { margin: 0 0 28px; border: 1px solid var(--hair-2); background: rgb(5 8 18 / 0.35); }
.find-fold summary { cursor: pointer; padding: 14px 18px; font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.find-fold summary::-webkit-details-marker { display: none; }
.find-fold summary::after { content: "＋"; color: var(--dawn); }
.find-fold[open] summary::after { content: "－"; }
.find-fold .find { padding: 4px 18px 20px; }
.list-count { margin: 0 0 var(--sp-3); font-size: var(--fs-note); letter-spacing: var(--ls-text); color: var(--ink-2); }
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.entry-a {
  position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px;
  background: var(--glass); border: 1px solid var(--hair-2); color: var(--ink); text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.entry-a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-n); opacity: 0.8; }
.entry-a:hover, .entry-a:focus-visible { border-color: var(--hair); box-shadow: var(--glow); transform: translateY(-2px); }
.entry-cover { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: radial-gradient(ellipse 120% 70% at 50% 110%, color-mix(in srgb, var(--c-n) 55%, transparent), transparent 60%), linear-gradient(170deg, var(--sky-2), var(--sky-0)); box-shadow: 3px 3px 0 -1px rgb(0 0 0 / 0.4); }
.entry-cover .cover-img { position: absolute; inset: 0; }
.entry-spine { /* 背表紙（表紙の左の帯に縦書きの題） */
  position: absolute; left: 0; top: 0; bottom: 0; width: 22px; display: flex; justify-content: center; padding-top: 6px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 92%, black), color-mix(in srgb, var(--c) 70%, transparent)); box-shadow: 1px 0 0 rgb(255 255 255 / 0.15);
}
.entry-spine span { writing-mode: vertical-rl; font-family: var(--mincho); font-size: var(--fs-tag); letter-spacing: var(--ls-text); color: #fff; max-height: 92%; overflow: hidden; }
.entry-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: var(--fs-note); color: var(--ink-3); letter-spacing: var(--ls-text); }
.entry-read { padding: 0 6px; border: 1px solid var(--hair); color: var(--dawn); font-size: var(--fs-tag); letter-spacing: var(--ls-tag); }
.entry-a:not(.is-read) .entry-read { display: none; }
.entry-title { font-family: var(--mincho); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); line-height: var(--lh-h3); }
.entry-obi { font-family: var(--mincho); font-size: var(--fs-text); line-height: 1.6; color: var(--dawn-2); }
.entry-sum { font-size: var(--fs-text); line-height: var(--lh-text); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.entry-tags span { font-size: var(--fs-tag); padding: 0 8px; border: 1px solid var(--hair-2); color: var(--ink-2); letter-spacing: var(--ls-text); }
.entry-go { display: none; }
.pager { display: flex; justify-content: center; gap: 8px; margin: 28px 0 0; }
.pager a, .pager span { min-width: 40px; padding: 6px 10px; text-align: center; border: 1px solid var(--hair-2); color: var(--ink); text-decoration: none; }
.pager [aria-current] { border-color: var(--dawn); color: var(--dawn-2); }
@media (min-width: 720px) {
  .entry-a { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 22px; padding: 14px 18px 14px 14px; }
  .entry-go { display: flex; align-items: center; gap: 8px; font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); color: var(--ink-2); }
  .entry-go::after { content: ""; width: 22px; height: 1px; background: var(--dawn); }
  .entry-a:hover .entry-go { color: var(--dawn-2); }
}
@media (min-width: 1100px) { .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── 2026-10-29 改訂（2）: 入口の案内を2つに・キャッチコピーは中央に
   画像が変わっても読めるように、文字のまわりにだけ薄い影を落とす（縁取り・枠・画面を覆う膜は使わない） */
.hero-lead { text-shadow: 0 1px 3px rgb(5 8 18 / 0.35), 0 2px 22px rgb(5 8 18 / 0.45); }
.hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0; }
.hero-all {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  border: 1px solid var(--dawn); background: rgb(var(--lamp) / 0.1); color: var(--dawn-2); text-decoration: none;
  font-family: var(--gothic); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); box-shadow: 0 0 22px -8px rgb(var(--lamp) / 0.7);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
.hero-all:hover { background: rgb(var(--lamp) / 0.2); box-shadow: 0 0 30px -6px rgb(var(--lamp) / 0.9); }
.hero-all .count { font-family: var(--gothic); font-size: var(--fs-note); color: var(--ink-2); }
@media (max-width: 999px) {
  .hero { align-items: stretch; }
  .hero-in { display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; padding-top: calc(76px + 6svh); }
  .hero-lead { margin: 0; text-align: center; font-size: min(6.2vw, 2.8rem); white-space: nowrap; } /* 一行を途中で折らない */
}
@media (min-width: 1000px) {
  .hero-in { flex-direction: row; min-height: 100svh; padding-top: 120px; }
  .hero-lead { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); } /* 縦書きのまま、画面の中央に */
  .hero-text { max-width: calc(50% - 90px); }
}

.toast { width: max-content; } /* 画面の中央寄せで幅が縮み、細長くならないように */

/* ════════ 2026-10-29 改訂（4）: ダーク／ライト（assets/app.js。既定は端末の設定、ボタンで選べる）
   ダーク = 夜の館（深い夜空に金の灯り）。
   ライト = 紙の書庫（生成りの紙・墨の文字・焦茶の細線・朱の栞）。光らせず、細い罫と紙の薄い影で見せる。
   星・光のにじみは使わない。区画は「本の見返し」のように内側に細い罫を引き、白い箱に見せない。
   画像の上の所（入口と本の上の画像・表紙・分かれ道の札・動画）は、画像が暗いのでダークの配色のまま */
:root[data-theme="light"] {
  --sky-0: #ece5d6;
  --sky-1: #f2ece0;
  --sky-2: #f8f4ea;
  --mist: #8a8172;
  --dawn: #7a4e2d;            /* 焦茶（書棚の木と革の背） */
  --dawn-2: #5c381c;
  --lamp: 122 78 45;
  --lamp-2: 150 108 72;
  --shu: #a8402f;             /* 朱（栞） */
  --ink: #2b2720;             /* 墨 */
  --ink-2: #5d5548;
  --ink-3: #6f6656;           /* 注記（紙の上でコントラスト比 4.5 以上） */
  --hair: rgb(122 78 45 / 0.34);
  --hair-2: rgb(43 39 32 / 0.14);
  --glass: linear-gradient(180deg, rgb(247 243 234 / 0.94) 0%, rgb(243 237 226 / 0.96) 100%);
  --glow: 0 0 0 1px var(--hair), 0 14px 28px -22px rgb(60 44 28 / 0.5);
  color-scheme: light;
}
:root[data-theme="light"], :root[data-theme="light"] * { --accent: color-mix(in srgb, var(--c, var(--dawn)) 80%, #000); } /* 本の色を紙の上で読める濃さに（コントラスト比 4.5 以上） */

/* 画像の上の所はダークのまま */
:root[data-theme="light"] :is(.page-home .top, .page-book:not(:has(.no-img)) .top, .hero, .book-hero:not(.no-img), .book, .entry-cover, .extra-michi, .yt, .pop-cover) {
  --sky-0: #050812; --sky-1: #0a1124; --sky-2: #132042;
  --dawn: #f2c27b; --dawn-2: #fbe3b6; --lamp: 242 194 123; --lamp-2: 251 227 182;
  --ink: #ece8df; --ink-2: #aab4c8; --ink-3: #74809a;
  --hair: rgb(242 194 123 / 0.30); --hair-2: rgb(170 190 230 / 0.16);
  --glass: linear-gradient(180deg, rgb(22 34 66 / 0.62) 0%, rgb(9 14 30 / 0.78) 100%);
  --glow: 0 0 0 1px var(--hair), 0 24px 60px -24px rgb(242 194 123 / 0.35);
  color: var(--ink);
}
:root[data-theme="light"] :is(.page-home .top, .page-book:not(:has(.no-img)) .top, .hero, .book-hero:not(.no-img), .book, .entry-cover, .extra-michi, .yt, .pop-cover),
:root[data-theme="light"] :is(.page-home .top, .page-book:not(:has(.no-img)) .top, .hero, .book-hero:not(.no-img), .book, .entry-cover, .extra-michi, .yt, .pop-cover) * { --accent: var(--c-n, var(--dawn)); }

/* 地: 紙。画像と星は使わない（分かれ道の背景の画像だけ、紙に薄く透かす） */
:root[data-theme="light"] .world img, :root[data-theme="light"] .world-stars { opacity: 0; }
:root[data-theme="light"] .world-glow { background: radial-gradient(ellipse 90% 60% at 50% 0%, #faf7f0 0%, transparent 70%), linear-gradient(180deg, #f2ece0 0%, #ece5d6 100%); }
:root[data-theme="light"] .backdrop img { opacity: 0.14; }
:root[data-theme="light"] .backdrop::after { background: linear-gradient(180deg, rgb(242 236 224 / 0.55), rgb(236 229 214 / 0.85)); }
:root[data-theme="light"] .horizon span { background: none; }
:root[data-theme="light"] .horizon::before { background: linear-gradient(90deg, transparent 0%, var(--hair-2) 20%, var(--hair) 50%, var(--hair-2) 80%, transparent 100%); }
:root[data-theme="light"] ::selection { background: rgb(122 78 45 / 0.2); color: inherit; }

/* 入口・本の上の画像: 下を紙に溶かさない（画像のまま終わり、区切りの細線へ） */
:root[data-theme="light"] .hero-bg::after,
:root[data-theme="light"] .book-hero:not(.no-img) .hero-bg::after {
  background: linear-gradient(to bottom, rgb(5 8 18 / 0.5) 0%, rgb(5 8 18 / 0.05) 30%, rgb(5 8 18 / 0.15) 60%, rgb(5 8 18 / 0.72) 100%);
}
:root[data-theme="light"] .book-hero.no-img .hero-bg { background: none; }
:root[data-theme="light"] :is(.list-page .crumb, .no-img .crumb, .michi .crumb, .no-img .book-artist) { color: var(--ink-2); }
:root[data-theme="light"] .no-img .book-title { text-shadow: none; }
:root[data-theme="light"] .no-img .obi-q { background: var(--glass); }
:root[data-theme="light"] .no-img :is(.obi-q, .obi-shelf)::before { box-shadow: none; }

/* 区画: 紙の見返し（内側に細い罫）。影は紙の薄い影だけ */
:root[data-theme="light"] :is(.panel, .extra:not(.extra-michi), .end-text) {
  box-shadow: inset 0 0 0 6px rgb(247 243 234 / 0.9), inset 0 0 0 7px rgb(43 39 32 / 0.08), 0 16px 30px -26px rgb(60 44 28 / 0.55);
}
:root[data-theme="light"] .sec-title { background-image: linear-gradient(180deg, var(--ink) 40%, var(--dawn) 100%); }
:root[data-theme="light"] .step-q { text-shadow: none; }

/* 光るものを、光らせない */
:root[data-theme="light"] :is(.page-list, .page-michi, .page-book:has(.no-img)) .lamp { background: rgb(247 243 234 / 0.8); }
:root[data-theme="light"] :is(.btn, .row-arrow, .find-fold) { background: rgb(247 243 234 / 0.8); }
:root[data-theme="light"] .extra-michi .btn { background: rgb(5 8 18 / 0.35); }
:root[data-theme="light"] .btn:hover, :root[data-theme="light"] a:hover .btn { box-shadow: 0 10px 22px -16px rgb(60 44 28 / 0.7); }
:root[data-theme="light"] .extra-michi:hover .btn { box-shadow: 0 0 24px -6px rgb(242 194 123 / 0.6); }
:root[data-theme="light"] .book { box-shadow: 0 0 0 1px rgb(43 39 32 / 0.12), 0 14px 26px -18px rgb(60 44 28 / 0.6); }
:root[data-theme="light"] a.book:hover, :root[data-theme="light"] a.book:focus-visible { box-shadow: 0 0 0 1px var(--dawn), 0 22px 36px -20px rgb(60 44 28 / 0.65); }
:root[data-theme="light"] .chip .count { background: rgb(43 39 32 / 0.07); }
:root[data-theme="light"] .chip[aria-current] { background: linear-gradient(180deg, rgb(122 78 45 / 0.10), rgb(247 243 234 / 0.95)); }
:root[data-theme="light"] :is(.chip[aria-current] .count, a.chip:hover .count, .word-n) { color: #fff; }
:root[data-theme="light"] .bar-back { background: rgb(122 78 45 / 0.05); }
:root[data-theme="light"] .bar-back:hover { box-shadow: 0 8px 18px -14px rgb(60 44 28 / 0.7); }
:root[data-theme="light"] .book-bar { background: linear-gradient(180deg, rgb(244 239 229 / 0.97), rgb(240 234 222 / 0.94)); }
:root[data-theme="light"] .dock { background: linear-gradient(180deg, rgb(244 239 229 / 0.97), rgb(236 229 214 / 0.99)); }
:root[data-theme="light"] .toast { background: #f8f4ea; box-shadow: 0 16px 34px -20px rgb(60 44 28 / 0.6); }
:root[data-theme="light"] .pop::backdrop { background: rgb(43 39 32 / 0.35); }

/* カード（今日の一枚・裏返す）: 紙のカード。印は焦茶の線 */
:root[data-theme="light"] .card-face { background: linear-gradient(170deg, #faf7f0 0%, #efe8da 100%); }
:root[data-theme="light"] :is(.card-back, .flip-back) { background: linear-gradient(170deg, #fbf8f2 0%, #f1ebde 100%); }
:root[data-theme="light"] .card-face::after { border-color: rgb(43 39 32 / 0.10); }
:root[data-theme="light"] .card-mark { background: none; box-shadow: none; }
:root[data-theme="light"] .flip-cta { background: rgb(122 78 45 / 0.06); box-shadow: none; }
:root[data-theme="light"] .flip:hover .flip-cta:not(.is-back) { background: rgb(122 78 45 / 0.12); box-shadow: 0 8px 18px -14px rgb(60 44 28 / 0.7); }
:root[data-theme="light"] .flip-corner { background: linear-gradient(135deg, transparent 50%, #e2d8c4 50%, #faf7f0 100%); box-shadow: -3px -3px 8px -4px rgb(60 44 28 / 0.45); }

/* 本文: 灯りより上の行は墨を濃く。栞紐は光らせない。栞は朱 */
:root[data-theme="light"] .line:hover { background: rgb(43 39 32 / 0.04); }
/* これから読む行: 紙の上では夜より淡く見えるため、濃く残す（本文のコントラスト比 約4.5。灯りを過ぎた行はさらに濃い墨） */
:root[data-theme="light"] .lyrics.is-reading .line:not(.is-passed, .is-shiori) { opacity: 0.72; }
:root[data-theme="light"] :is(.line.is-passed .lt, .line:target .lt) { color: #15120d; text-shadow: none; }
:root[data-theme="light"] :is(.ribbon span, .ribbon-tip) { box-shadow: none; }
:root[data-theme="light"] .line.is-shiori { background: linear-gradient(90deg, rgb(168 64 47 / 0.10) 0%, rgb(168 64 47 / 0.04) 65%, transparent 100%); box-shadow: inset 2px 0 0 var(--shu); }
:root[data-theme="light"] .line.is-shiori .lt { color: #8a3324; }
:root[data-theme="light"] .line.is-shiori .shiori-btn::before { background: var(--shu); border-color: var(--shu); box-shadow: none; }
:root[data-theme="light"] .shiori-lines li::before { background: var(--shu); }
:root[data-theme="light"] .shiori-head .count { background: rgb(43 39 32 / 0.07); }
:root[data-theme="light"] .word:hover, :root[data-theme="light"] .word:focus-visible { color: var(--ink); }
:root[data-theme="light"] #after.is-lit .after-text, :root[data-theme="light"] .end-line { color: var(--ink); text-shadow: none; }

/* ── 表示の切り替え（文字を使わない、月と陽のスイッチ）
   夜の館: 左に三日月（金）。紙の書庫: 右に陽（焦茶の円と細い輪）。動かすのは transform だけ */
.lamp {
  position: relative; width: 58px; height: 28px; padding: 0; gap: 0; border-radius: 999px;
  border: 1px solid var(--hair); background: rgb(5 8 18 / 0.35); cursor: pointer;
}
.lamp::before, .lamp::after { /* 行き先の印（うすく） */
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; opacity: 0.45;
}
.lamp::before { left: 11px; background: var(--ink-2); }
.lamp::after { right: 11px; border: 1px solid var(--ink-2); }
.lamp-knob {
  position: absolute; z-index: 1; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: transparent; box-shadow: inset -6px -1px 0 0 var(--dawn); /* 三日月 */
  filter: drop-shadow(0 0 4px rgb(var(--lamp) / 0.8));
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), box-shadow 0.6s ease, background-color 0.6s ease;
}
.lamp:hover { border-color: var(--dawn); }
.lamp:focus-visible { outline: 1px solid var(--dawn); outline-offset: 3px; }
:root[data-theme="dark"] .lamp::before, :root:not([data-theme]) .lamp::before { opacity: 0; } /* いる側の印は隠す */
:root[data-theme="light"] .lamp-knob {
  transform: translateX(30px); background: var(--dawn); box-shadow: 0 0 0 3px rgb(var(--lamp) / 0.18); filter: none; /* 陽 */
}
:root[data-theme="light"] .lamp::after { opacity: 0; }
:root[data-theme="light"] :is(.page-list, .page-michi, .page-book:has(.no-img)) .lamp { background: rgb(247 243 234 / 0.8); }

/* ════════ 2026-10-29 改訂（5）: 言葉の寄り道（docs/LIBRARY-PROTOTYPE.md §7）
   歌詞の言葉から枝分かれする豆知識。出発点はいつも歌詞、行き先はその歌（YouTube）。新しい色は使わない */

/* 本文の中の寄り道の言葉: 言葉のつながり（金の点線＋塗りの冊数）と区別して、枠だけの小さな「寄」 */
.yori {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--dawn-2);
  text-decoration: underline dotted rgb(var(--lamp) / 0.8); text-decoration-thickness: 1.5px; text-underline-offset: 0.32em;
}
.yori:hover, .yori:focus-visible { color: var(--ink); text-decoration-style: solid; }
.yori-n {
  display: inline-block; vertical-align: 0.6em; margin-left: 0.15em; padding: 0.05em 0.3em;
  font-family: var(--mincho); font-size: var(--fs-tag); line-height: 1.2; letter-spacing: 0; color: var(--dawn); border: 1px solid var(--dawn);
}

/* 寄り道の目録カード（本の中のポップアップ） */
.pop-yori-w { font-size: var(--fs-h2); line-height: 1.9; letter-spacing: var(--ls-h2); }
.pop-yori-w rt { font-size: max(0.45em, 10px); }
.pop-yori-body { padding: 14px 18px 4px; }
.pop-yori-hee { margin: 0 0 var(--sp-3); font-family: var(--mincho); font-size: var(--fs-catch); line-height: var(--lh-catch); color: #2b2622; }
.pop .pop-yori-go { display: inline-block; grid-template-columns: none; padding: 6px 16px; border: 1px solid #b5463a; color: #b5463a; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); text-decoration: none; }
.pop .pop-yori-go::after { content: " →"; }
.pop .pop-yori-go:hover { background: rgb(181 70 58 / 0.07); }

/* 本のページ: 歌を聴く（上の帯。スマホでも出す）・読了の知らせから歌へ */
.bar-listen {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--dawn); color: var(--dawn-2);
  font-size: var(--fs-ui); letter-spacing: var(--ls-ui); white-space: nowrap; text-decoration: none;
}
.bar-listen::before { content: ""; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.bar-listen:hover { background: rgb(var(--lamp) / 0.1); }
@media (max-width: 719px) { .book-bar-in { gap: 10px; } .bar-back { padding: 6px 10px; } }
.read-done a { display: inline-block; margin-top: 6px; color: var(--dawn); white-space: nowrap; }

/* 寄り道の札の一覧（あとがきの下・一覧ページの最後・寄り道ページ） */
.yori-more { margin: 28px 0 0; }
.yori-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.yori-item {
  position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 12px 16px 12px 18px;
  background: var(--glass); border: 1px solid var(--hair-2); color: var(--ink); text-decoration: none;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.yori-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-n, var(--dawn)); opacity: 0.8; }
.yori-item:hover, .yori-item:focus-visible { border-color: var(--hair); box-shadow: var(--glow); transform: translateY(-2px); }
.yori-item-w { font-family: var(--mincho); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
.yori-item-w rt { font-size: max(0.5em, 10px); color: var(--ink-2); }
.yori-item-hee { font-size: var(--fs-text); line-height: var(--lh-text); color: var(--ink-2); }
.yori-item-from { font-size: var(--fs-note); letter-spacing: var(--ls-text); color: var(--dawn); }
/* 言葉は1つの塊で折る（ルビのある語と無い語が別々に並んで崩れないように）。ルビが親文字より長くても親文字の間を空けない */
.chip-w { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.chips-yori { grid-auto-flow: row dense; container-type: inline-size; }
@container (min-width: 306px) { .chip-yori.is-wide { grid-column: span 2; } } /* 札が2列以上並ぶ幅のときだけ（1列では列を増やしてはみ出すため） */
:is(.chip-w, .yori-item-w) ruby { ruby-align: center; }
.chip-yori rt { font-size: max(0.5em, 10px); letter-spacing: 0; }

/* 寄り道の一覧ページ: テーマの札・本ごとのまとまり */
.yori-themes { margin: 0 0 28px; }
.yori-groups { display: grid; gap: 22px; }
.yori-group { display: grid; gap: 12px; }
.yori-group-book { display: flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.yori-group-book .entry-cover { width: 44px; flex: none; }
.yori-group-book > span:last-child { display: flex; flex-direction: column; }
.yori-group-k { font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--ink-3); }
.yori-group-t { font-family: var(--mincho); font-size: var(--fs-h3); letter-spacing: var(--ls-h3); }
.yori-group-book:hover .yori-group-t { color: var(--dawn-2); text-decoration: underline; }

/* 寄り道ページ（幅はほかの一覧と同じ --wide。PC では由来と「いまのあなたへ」を2列に） */
.yori-from {
  display: block; margin: 24px 0 18px; padding: 14px 18px; border-left: 3px solid var(--c-n); background: var(--glass); border-top: 1px solid var(--hair-2);
  border-right: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); color: var(--ink); text-decoration: none;
}
.yori-from-k { display: block; font-size: var(--fs-note); letter-spacing: var(--ls-text); color: var(--ink-2); }
.yori-from-line { display: block; margin-top: 4px; font-family: var(--mincho); font-size: var(--fs-lyric); line-height: var(--lh-prose); letter-spacing: var(--ls-lyric); }
.yori-from:hover .yori-from-line { color: var(--dawn-2); }
.yori-page mark, .yori-pas mark { background: none; color: var(--dawn-2); text-decoration: underline rgb(var(--lamp) / 0.8); text-decoration-thickness: 1.5px; text-underline-offset: 0.32em; }

/* 言葉: 目録カードと同じ紙のカード（夜の館でも紙の書庫でも同じ紙） */
.yori-card {
  margin: 0 0 clamp(20px, 2.4vw, 32px); color: #2b2622;
  background: #f1e7d1;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.75);
}
.yori-card-head { padding: 18px clamp(18px, 4vw, 40px) 16px; background: #f6efdf; border-bottom: 2px solid #b5463a; }
.yori-card .pop-k a { color: inherit; }
.yori-word { margin: 6px 0 0; font-family: var(--mincho); font-weight: 500; font-size: var(--fs-title); line-height: 1.6; letter-spacing: var(--ls-h2); color: #1f1a16; }
.yori-word rt { font-size: max(0.35em, 10px); letter-spacing: var(--ls-tag); color: #7a6a55; }
.yori-yomi { margin: 0; font-size: var(--fs-note); letter-spacing: var(--ls-tag); color: #7a6a55; }
.yori-yomi span { margin-left: 14px; font-style: italic; letter-spacing: var(--ls-text); }
.yori-hee { margin: 0; padding: var(--sp-4) clamp(18px, 4vw, 40px) var(--sp-5); font-family: var(--mincho); font-size: var(--fs-catch); line-height: var(--lh-catch); color: #2b2622; }

.yori-panels { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.yori-text p { margin: 0 0 1em; font-family: var(--mincho); font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--ink); }
.yori-text p:last-child { margin-bottom: 0; }
.yori-anata p { color: var(--dawn-2); }
.yori-shosetsu { display: inline-block; margin: 16px 0 0; padding: 1px 10px; border: 1px solid var(--hair); font-size: var(--fs-tag); letter-spacing: var(--ls-tag); color: var(--dawn); }
.yori-src { margin: 18px 0 0; padding-top: 12px; border-top: 1px dashed var(--hair-2); font-size: var(--fs-note); color: var(--ink-2); }
.yori-src-h { margin: 0 0 4px; letter-spacing: var(--ls-tag); color: var(--ink-3); }
.yori-src ul { margin: 0; padding-left: 1.2em; }
.yori-src a { color: var(--ink-2); }
.yori-src-draft { list-style: none; margin-left: -1.2em; }

/* この言葉が出てくる歌（寄り道の行き先。YouTube を一番強く） */
.yori-song-in { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
/* 曲名は押す言葉と同じゴシックの小さな名札にして、明朝の歌詞と混ざらないようにする */
.yori-song-t { margin: 0 0 var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--hair-2); font-family: var(--gothic); font-size: var(--fs-ui); line-height: var(--lh-ui); letter-spacing: var(--ls-ui); color: var(--ink-2); }
.yori-song-t small { margin-left: 10px; font-size: var(--fs-note); color: var(--ink-3); letter-spacing: var(--ls-text); }
.yori-pas { margin: 0 0 20px; padding: 4px 0 4px 18px; border-left: 2px solid var(--c-n); font-family: var(--mincho); font-size: var(--fs-lyric); line-height: var(--lh-prose); letter-spacing: var(--ls-lyric); color: var(--ink); }
.yori-pas .pas-l { display: block; }
.yori-pas .pas-tr { display: block; margin-bottom: var(--sp-2); font-family: var(--gothic); font-size: var(--fs-note); line-height: 1.8; letter-spacing: var(--ls-text); color: var(--ink-2); } /* 和訳は本文（.ltr）と同じ小ささ */
.yori-pas .pas-tr:last-child { margin-bottom: 0; }
.yori-song .yt { max-width: none; }
.yori-song-go { margin: 16px 0 0; }
.yori-song-book { display: none; }
.yori-all { margin: 8px 0 0; text-align: center; font-size: var(--fs-ui); letter-spacing: var(--ls-ui); }
.yori-all a { color: var(--ink-2); }
@media (min-width: 1000px) {
  .yori-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .yori-song { grid-column: 1 / -1; }
  /* 歌: 左に曲名・一節・本をひらく、右に動画（広い幅で動画だけが横いっぱいに伸びないように） */
  .yori-song-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--sp-6); align-items: start; }
  .yori-song-text > :not(.yt) { grid-column: 1; }
  .yori-song-text > .yt { grid-column: 2; grid-row: 1 / span 3; }
  .yori-song-text.no-yt { display: block; } /* 動画がまだ無い歌は2列にしない（右に空きを作らない） */
}
@media (min-width: 720px) {
  .yori-song-in { grid-template-columns: minmax(0, 1fr) 200px; align-items: start; }
  .yori-song-book { display: block; }
}
:root[data-theme="light"] .yori-card { box-shadow: 0 0 0 1px rgb(43 39 32 / 0.12), 0 18px 34px -24px rgb(60 44 28 / 0.6); }
:root[data-theme="light"] .bar-listen:hover { background: rgb(122 78 45 / 0.08); }

/* ── スマホの本文: 入れ子の余白を外し、歌詞に横幅を返す（区画の箱・栞紐の余白・栞の列をすべて細く） */
@media (max-width: 719px) {
  .panel-text { padding: 28px 0 32px; background: none; border: 0; box-shadow: none; }
  .panel-text::before { display: none; }
  /* 紙の見返しの罫（:is(.extra:not(…)) で詳細度が高い）にも勝つように、.panel を重ねて指定する */
  :root[data-theme="light"] .panel.panel-text { box-shadow: none; }
  .lyrics { padding-left: 14px; line-height: 1.85; }
  .stanza { margin-bottom: 1.8em; }
  .line { grid-template-columns: minmax(0, 1fr) 22px; column-gap: 4px; padding: 0.42em 0 0.42em 8px; margin-left: -8px; }
  .ltr { line-height: 1.7; margin-top: 0.15em; }
  .line .shiori-btn { width: 22px; height: 32px; }
}

/* ── スマホ: 狭い段組み・揃わない幅・寄せの不一致を直す */
@media (max-width: 719px) {
  /* 向かいの棚: 表紙と文を横に並べると文が数文字で折れるため、縦に積む */
  .facing { grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; }
  .facing > :first-child { width: min(220px, 100%); }
  .facing-note { width: 100%; text-align: center; word-break: auto-phrase; text-wrap: balance; }
}
@media (max-width: 999px) {
  /* 入口: キャッチコピーが中央なので、その下の文と導線も中央に揃える */
  .hero-text { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; word-break: auto-phrase; text-wrap: balance; }
  .hero-links { flex-direction: column; justify-content: center; }
  .sns-hero { justify-content: center; }
  .hero-sub span { display: inline-block; } /* 文の途中で折り返さない（一文ずつ） */
  .hero-go::after { content: ""; width: 56px; height: 1px; background: linear-gradient(90deg, var(--dawn), transparent); } /* 中央寄せでは左右に線 */
}

/* ── スマホの本棚カード: 縦書きと横書きを混ぜない（docs/LIBRARY-PROTOTYPE.md §8）
   上に表紙の絵、下の無地の所に題・棚・帯を横書きで。幅は画面の6割（次の1冊が少し覗く） */
@media (max-width: 719px) {
  .row-track { grid-auto-columns: min(60vw, 240px); }
  .book { display: flex; flex-direction: column; aspect-ratio: auto; background: linear-gradient(170deg, var(--sky-2) 0%, var(--sky-0) 100%); }
  .book-art { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; } /* 絵を低めにして、段の高さ（スクロール量）を抑える */
  .book-art .book-veil { background: linear-gradient(to bottom, rgb(5 8 18 / 0.45) 0%, transparent 30%, transparent 70%, rgb(5 8 18 / 0.5) 100%); }
  .book.no-img .book-art { background: radial-gradient(ellipse 120% 70% at 50% 110%, color-mix(in srgb, var(--c-n) 55%, transparent) 0%, transparent 60%); }
  .book-name {
    position: static; max-height: none; padding: var(--sp-3) var(--sp-4) 0;
    font-size: var(--fs-h3); letter-spacing: var(--ls-h3); line-height: var(--lh-h3); text-shadow: none;
  }
  .book-foot { position: static; padding: var(--sp-2) var(--sp-4) var(--sp-4); }
  .book-obi { -webkit-line-clamp: 2; }
  .entry-spine span { display: none; } /* 背表紙は色の帯だけ */
}

/* ── 2026-10-31 改訂: 紙の上の棚の札（本棚の一覧）・入口の説明文の影 */
/* 本棚の一覧の棚の札は紙の上にある（表紙の上ではない）。夜の札のままだと暗い地に焦茶の字で読めないため、紙の札にする */
:root[data-theme="light"] .entry-meta .book-shelf { border-color: var(--hair); background: rgb(122 78 45 / 0.06); color: var(--ink-2); }
:root[data-theme="light"] .entry-meta .book-shelf::before { box-shadow: none; }
/* 入口の説明文: 画像の明るい所（光）に重なっても読めるよう、文字のまわりにだけ薄い影（キャッチコピーと同じ考え方） */
.hero-sub { color: rgb(240 236 228 / 0.94); text-shadow: 0 1px 2px rgb(5 8 18 / 0.55), 0 0 14px rgb(5 8 18 / 0.6), 0 0 28px rgb(5 8 18 / 0.35); }
/* 下の案内（スマホ）: 項目ごとにアイコンと名前を縦に積み、間に上下が消える細い縦線（押せる範囲を見せる） */
.dock a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; font-size: var(--fs-note); color: var(--dawn); } /* 名前もアイコンと同じ色（白だと浮く） */
.dock a + a::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(180deg, transparent, var(--hair) 50%, transparent); }
.dock-icon { flex: none; }
.dock a:hover, .dock a:focus-visible { color: var(--dawn-2); }
/* 画面の枠がずれる環境（X などのアプリ内ブラウザ。assets/app.js が .is-unfixed を付ける）: 固定をやめ、下の案内はページの最後に置く */
.is-unfixed body { padding-bottom: 0; }
.is-unfixed .dock { position: static; }
.is-unfixed .book-bar { position: relative; }