/* 生成物: scripts/window-bookstore/build.mjs が docs/window/bookstore/books.json から作る。直接は編集しない */
:root {
  --wall: #f6efe2;
  --paper: #fffaf0;
  --ink: #33271c;
  --sub: #5f4d3a;
  --line: #d8c7a8;
  --wood: #8a5a34;
  --wood-dark: #4a2f1a;
  --shelf: #8a5a34;
  --shelf-back: #e6d3b3;
  --shelf-back-alt: #e0cba8;
  --shadow: rgba(51, 39, 28, 0.35);
  --sign-fg: #f6efe2;
  --plaque: #fffaf0;
  --plaque-fg: #4a2f1a;
  --news-bg: #4a2f1a;
  --news-fg: #f6efe2;
  --badge-bg: #fffaf0;
  --badge-fg: #4a2f1a;
  --btn-bg: #4a2f1a;
  --btn-fg: #f6efe2;
  --btn-alt-bg: #fffaf0;
  --btn-alt-fg: #4a2f1a;
  --focus: #1d5fc4;
  --overlay: rgba(0, 0, 0, 0.5);
  --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --cover-w: 8.5rem;
  --cover-w-large: 12rem;
  --bar-h: 3.25rem;
  --btn-min: 2.5rem;
  --panel-w: 26rem;
  --panel-gap: 0.5rem;
  --margin-min: 1.25rem;
  --v-pad: 1rem;
  --max-lines: 26;
  --scene-lines: 2;
  --end-lines: 2;
  --pager-gap-lines: 1;
  --pager-edge-lines: 1;
  --end-mark-gap-compact: 0.5;
  --pager-gap-lines-compact: 0.5;
  --illust-hw: calc(1696 / 2528);
  --illust-max-h: 0.85;
  --illust-max-w: 0.85;
  --fs: 1.15rem;
  --lh: 1.95;
  --line-w: calc(var(--fs) * var(--lh));
  --measure: 38;
  --scene-mark: "◇　◇　◇";
  --to-top-size: 2.75rem;
  --to-top-gap: 1.25rem;
  --to-top-fade: 0.2s;
  --cover-main: 15.5cqw;
  --cover-sub: 8.8cqw;
  --cover-lh: 1.45;
  --cover-col-gap: 4cqw;
  --cover-sub-col-gap: 2.5cqw;
  --cover-head-gap: 5.5cqw;
  --cover-main-ls: 0.14em;
  --cover-sub-ls: 0.08em;
  --cover-pad-top: 9cqw;
  --cover-pad-right: 7cqw;
  --cover-pad-left: 6cqw;
  --cover-pad-bottom: 24cqw;
  --cover-author: 7.5cqw;
  --cover-author-bottom: 6.5cqw;
  --cover-author-side: 6cqw;
  --single-cover-w: 12rem;
  --single-cover-w-sp: 10rem;
  --single-gap: 2.5rem;
  --single-pad: 1.6rem;
  --single-title: 1.7rem;
  --single-subtitle: 1.05rem;
  --single-synopsis-measure: 34em;
  --single-synopsis-lh: 1.95;
  --single-actions-gap: 0.6rem;
  --door-cover-w: 15rem;
  --door-gap: 3rem;
  --door-title: 2.1rem;
  --door-title-sp: 1.6rem;
  --door-measure: 34em;
  --door-lh: 2;
  --door-sticky-top: 1.5rem;
  --head-lift: 3.5rem;
  --head-title: 1.9em;
  --head-gap: 0.55em;
  --head-title-gap: 0.8em;
  --cue-gap: 2.2rem;
  --cue-size: 0.9rem;
  --cue-travel: 0.6rem;
  --cue-cycle: 1.8s;
  --rd-bg: #f3ead6;
  --rd-fg: #3a2f22;
  --rd-sub: #6b5a45;
  --rd-line: #d9ccb0;
  --rd-accent: #8a4b1f;
  --rd-panel: #ebe0c7;
}
html[data-theme="white"] {
  --rd-bg: #ffffff;
  --rd-fg: #1f2328;
  --rd-sub: #555d66;
  --rd-line: #d8dde2;
  --rd-accent: #1f6f5a;
  --rd-panel: #f3f5f6;
}
html[data-theme="sepia"] {
  --rd-bg: #f3ead6;
  --rd-fg: #3a2f22;
  --rd-sub: #6b5a45;
  --rd-line: #d9ccb0;
  --rd-accent: #8a4b1f;
  --rd-panel: #ebe0c7;
}
html[data-theme="night"] {
  --rd-bg: #15181c;
  --rd-fg: #d6d9dc;
  --rd-sub: #9aa1a8;
  --rd-line: #2c3238;
  --rd-accent: #7cc3a8;
  --rd-panel: #1d2227;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --rd-bg: #15181c;
    --rd-fg: #d6d9dc;
    --rd-sub: #9aa1a8;
    --rd-line: #2c3238;
    --rd-accent: #7cc3a8;
    --rd-panel: #1d2227;
  }
}
html[data-size="0"] { --fs: 0.95rem; }
html[data-size="1"] { --fs: 1.05rem; }
html[data-size="2"] { --fs: 1.15rem; }
html[data-size="3"] { --fs: 1.3rem; }
html[data-size="4"] { --fs: 1.5rem; }
html[data-size="5"] { --fs: 1.75rem; }
html[data-lh="tight"] { --lh: 1.7; }
html[data-lh="normal"] { --lh: 1.95; }
html[data-lh="loose"] { --lh: 2.3; }
.rd-article { font-family: var(--font-serif); }
html[data-font="mincho"] .rd-article { font-family: var(--font-serif); }
html[data-font="gothic"] .rd-article { font-family: var(--font-sans); }
.cover--nakama-sagashi { --cover-bg: #2f4a5c; --cover-bg2: #1f3340; --cover-fg: #f4efe4; --cover-accent: #d9b45a; --cover-title-scale: 0.8; }
.cover--keiro-memo { --cover-bg: #1f6f5a; --cover-bg2: #16503f; --cover-fg: #f2faf6; --cover-accent: #a9e0cc; --cover-title-scale: 1; }
/* ── 場面 ── */
:root {
  --sc-ratio: 2528 / 1696;
  --sc-art-radius: 0.5rem; --sc-art-shadow-y: 0.25rem;
  --sc-halo-stop: 70%; --sc-fog-left: -10%; --sc-fog-width: 120%; --sc-fog-stop: 70%;
  --sc-board-lh: 1.25; --sc-board-ls: 0.1em; --sc-name-lh: 1.3;
  --sc-name-sh-wide: 0.35em; --sc-name-sh-narrow: 0.12em;
  --sc-window-hover-s: 0.2s; --sc-window-radius: 0.4rem;
  --sc-fade: 3s;
  --sc-veil-s: 4.5s;
  --sc-glow-s: 3.5s;
  --sc-glow: rgba(255, 190, 100, 0.5); --sc-glow-edge: rgba(255, 190, 100, 0);
  --sc-halo: rgba(255, 200, 110, 0.6); --sc-halo-edge: rgba(255, 200, 110, 0);
  --sc-firefly: rgba(222, 255, 130, 0.95); --sc-firefly-halo: rgba(190, 255, 90, 0.6);
  --sc-fog: rgba(255, 255, 255, 0.55); --sc-fog-edge: rgba(255, 255, 255, 0);
  --sc-window-hover: rgba(255, 220, 150, 0.22); --sc-chalk: #f2efe4;
  --sc-blur: 0.8cqw;
  --sc-ff-blur: 2.5; --sc-ff-spread: 0.8; --sc-ff-rest: 0.85;
  --sc-flick-s: 3.4s; --sc-flick-min: 0.72; --sc-flick-scale: 0.94;
  --sc-enter-s: 1.4s; --sc-zoom: 1.7; --sc-zoom-x: 34%; --sc-zoom-y: 66%; --sc-bright: 1.5;
  --sc-door-glow: rgba(255, 200, 120, 0.9); --sc-door-glow-edge: rgba(255, 200, 120, 0); --sc-door-hover: rgba(255, 228, 170, 0.8); --sc-door-hover-edge: rgba(255, 228, 170, 0);
  --sc-door-blink-s: 3.8s; --sc-door-min: 0.3; --sc-door-hover-op: 1; --sc-door-hover-s: 0.35s;
  --sc-tag-bg: rgba(58, 35, 20, 0.84); --sc-tag-fg: #fff3dc; --sc-tag-border: rgba(255, 220, 160, 0.75); --sc-exit-hover: rgba(96, 60, 34, 0.92);
  --sc-tag-size: 1.7cqw; --sc-tag-floor: 11px; --sc-tag-pad: 0.25em 0.6em; --sc-tag-radius: 0.4em; --sc-tag-bw: 1px; --sc-tag-ls: 0.1em;
  --sc-plaque-bg: rgba(255, 246, 228, 0.93); --sc-plaque-fg: #4a2f1a; --sc-book-shadowc: rgba(20, 10, 4, 0.5);
  --sc-plaque-size: 1.15cqw; --sc-plaque-floor: 9px; --sc-plaque-pad: 0.5em; --sc-plaque-radius: 0.3em; --sc-plaque-lh: 1.4;
  --sc-book-gap: 0.5cqw; --sc-book-font: 0.85cqw; --sc-book-lh: 1.4; --sc-book-border: 0.5cqw; --sc-book-pad: 0.4cqw; --sc-book-radius: 0.3cqw; --sc-book-shadow: 0.4cqw; --sc-book-hover: 1.15;
  --sc-touch-min: 44px; --sc-bl-size: 3.2cqw; --sc-bl-floor: 13px; --sc-bl-gap: 6px; --sc-bl-pad: 6px; --sc-bl-lh: 1.3;
  --sc-exit-size: 2.4cqw; --sc-exit-floor: 12px; --sc-exit-pad: 0.5em; --sc-exit-radius: 0.5em; --sc-exit-gap: 0.5em;
  --sc-exit-door-w: 0.8em; --sc-exit-door-h: 1.15em; --sc-exit-door-bw: 2px; --sc-exit-knob: 0.14em;
  --sc-name-size: 4.4cqw; --sc-name-ls: 0.08em;
  --sc-board-label: 1.5cqw;
}
.bs-scene[data-scene="morning"] { --sc-door: 0.3; --sc-bg: #c5d8e8; --sc-veil: rgba(255, 248, 232, 0.55); --sc-name: #3a2314; --sc-name-shadow: rgba(255, 250, 238, 0.85); }
html:not(.js) .bs-scene[data-scene="morning"] .sc-img--morning { opacity: 1; }
html:not(.js) .bs-scene[data-scene="morning"] .sc-fx--morning, html.js .bs-scene.is-ready[data-scene="morning"] .sc-fx--morning { --sc-on: 1; }
html:not(.js) .bs-scene[data-scene="morning"] .sc-ff.sc-fx--morning, html.js .bs-scene.is-ready[data-scene="morning"] .sc-ff.sc-fx--morning { display: block; }
.bs-scene[data-scene="dusk"] { --sc-door: 0.55; --sc-bg: #b58aa6; --sc-veil: rgba(40, 24, 56, 0.45); --sc-name: #3a2314; --sc-name-shadow: rgba(255, 236, 214, 0.8); }
html:not(.js) .bs-scene[data-scene="dusk"] .sc-img--dusk { opacity: 1; }
html:not(.js) .bs-scene[data-scene="dusk"] .sc-fx--dusk, html.js .bs-scene.is-ready[data-scene="dusk"] .sc-fx--dusk { --sc-on: 1; }
html:not(.js) .bs-scene[data-scene="dusk"] .sc-ff.sc-fx--dusk, html.js .bs-scene.is-ready[data-scene="dusk"] .sc-ff.sc-fx--dusk { display: block; }
.bs-scene[data-scene="night"] { --sc-door: 0.6; --sc-bg: #16224a; --sc-veil: rgba(6, 10, 28, 0.6); --sc-name: #f6efe2; --sc-name-shadow: rgba(8, 12, 32, 0.85); }
html:not(.js) .bs-scene[data-scene="night"] .sc-img--night { opacity: 1; }
html:not(.js) .bs-scene[data-scene="night"] .sc-fx--night, html.js .bs-scene.is-ready[data-scene="night"] .sc-fx--night { --sc-on: 1; }
html:not(.js) .bs-scene[data-scene="night"] .sc-ff.sc-fx--night, html.js .bs-scene.is-ready[data-scene="night"] .sc-ff.sc-fx--night { display: block; }
.sc-window--door, .sc-door-glow, .sc-door-hover { left: 26%; top: 49%; width: 16%; height: 34%; }
.sc-enter-tag { left: 27.5%; top: 67%; }
.sc-shelf { left: 42%; top: 65%; width: 21%; height: 13%; transform: rotate(0deg); }
.sc-plaque { left: 70%; top: 70%; width: 24%; height: 8.5%; transform: rotate(0deg); }
@container (max-width: 600px) { .bs-scene[data-view="in"] .sc-booklist { display: flex; } }
@container (max-width: 600px) { .sc-layer-in .sc-book::before { display: none; } }
@container (max-width: 600px) { .sc-layer-in .sc-plaque { display: none; } }
.sc-exit { left: 13.5%; top: 5%; width: 22%; height: 12%; }
.sc-name { left: 2.5%; top: 4%; width: 26%; }
.sc-board { left: 41.3%; top: 76.2%; width: 4%; height: 7.6%; transform: rotate(-3deg); }
@container (min-width: 600px) { .sc-board .sc-board-label { display: block; } }
.sc-glow--shop-l { left: 43.5%; top: 49%; width: 16%; height: 24%; --sc-strength: 0.9; transition-delay: 0s; }
.sc-window--shop-l { left: 43.5%; top: 49%; width: 16%; height: 24%; }
.sc-glow--shop-r { left: 62%; top: 47%; width: 15%; height: 25%; --sc-strength: 0.9; transition-delay: 0.4s; }
.sc-window--shop-r { left: 62%; top: 47%; width: 15%; height: 25%; }
.sc-glow--up-l { left: 35%; top: 21.5%; width: 19%; height: 9%; --sc-strength: 0.7; transition-delay: 0.9s; }
.sc-window--up-l { left: 35%; top: 21.5%; width: 19%; height: 9%; }
.sc-glow--up-r { left: 67%; top: 24.5%; width: 8%; height: 10.5%; --sc-strength: 0.7; transition-delay: 1.3s; }
.sc-window--up-r { left: 67%; top: 24.5%; width: 8%; height: 10.5%; }
.sc-halo { left: 35.15%; top: 38.9%; width: 11.9%; height: 27.2%; --sc-strength: 1; transition-delay: 1.7s; }
.sc-ff--0 { left: 58.5%; top: 23.7%; --ff-size: 0.7cqw; --ff-dur: 9s; --ff-delay: 0s; --ff-dx: 2.2cqw; --ff-dy: -1.8cqw; }
.sc-ff--1 { left: 56.3%; top: 30%; --ff-size: 0.6cqw; --ff-dur: 11s; --ff-delay: 2.5s; --ff-dx: -1.8cqw; --ff-dy: -2.4cqw; }
.sc-ff--2 { left: 28.5%; top: 40%; --ff-size: 0.7cqw; --ff-dur: 10s; --ff-delay: 1.2s; --ff-dx: 2.6cqw; --ff-dy: -1.4cqw; }
.sc-ff--3 { left: 59%; top: 42.5%; --ff-size: 0.6cqw; --ff-dur: 12s; --ff-delay: 4s; --ff-dx: -2.4cqw; --ff-dy: -2cqw; }
.sc-ff--4 { left: 51.5%; top: 76%; --ff-size: 0.7cqw; --ff-dur: 9.5s; --ff-delay: 3.2s; --ff-dx: 2cqw; --ff-dy: -2.6cqw; }
.sc-ff--5 { left: 88%; top: 73.8%; --ff-size: 0.6cqw; --ff-dur: 10.5s; --ff-delay: 5.5s; --ff-dx: -2.2cqw; --ff-dy: -1.6cqw; }
.sc-ff--6 { left: 83%; top: 80%; --ff-size: 0.7cqw; --ff-dur: 11.5s; --ff-delay: 0.8s; --ff-dx: 1.8cqw; --ff-dy: -2.2cqw; }
.sc-ff--7 { left: 19%; top: 65.6%; --ff-size: 0.6cqw; --ff-dur: 12s; --ff-delay: 6.5s; --ff-dx: 2.4cqw; --ff-dy: -1.2cqw; }
.sc-fog--0 { top: 38%; height: 22%; --sc-strength: 0.5; --fog-dx: 7cqw; --fog-dur: 38s; --fog-delay: 0s; }
.sc-fog--1 { top: 52%; height: 20%; --sc-strength: 0.38; --fog-dx: -6cqw; --fog-dur: 46s; --fog-delay: -12s; }

/* ポールの窓の本屋 ── 見た目の骨組み。色・フォント・寸法・サイズ段は books.json から生成した上の部分で定義する */
/* HTML に style 属性は書かない。切り替えは html の data 属性とクラスだけで行う */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); line-height: 1.8; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 100; padding: 0.5rem 1rem; border-radius: 0.4rem; background: var(--paper); color: var(--ink); }
.skip:focus { top: 0.5rem; }
[hidden] { display: none !important; }

/* ───────── 表紙（CSS だけで作る） ───────── */
.cover { position: relative; flex: 0 0 auto; width: var(--cover-w); aspect-ratio: 2 / 3; overflow: hidden; container-type: inline-size; color: var(--cover-fg); background: linear-gradient(135deg, var(--cover-bg), var(--cover-bg2)); border-radius: 0.15rem 0.4rem 0.4rem 0.15rem; border-left: 0.55rem solid var(--cover-accent); box-shadow: 0.25rem 0.35rem 0.6rem var(--shadow); }
.cover::before { content: ""; position: absolute; top: 0.45rem; right: 0.4rem; bottom: 0.45rem; left: 0.35rem; border: 1px solid var(--cover-accent); opacity: 0.6; pointer-events: none; }
/* 表紙の字は表紙の幅（cqw）に比例させる ── 大きい表紙も小さい表紙も同じ組みになる。折れる位置は books.json の cover_lines で決め、勝手には折らない（nowrap） */
.cover-lines { position: absolute; top: var(--cover-pad-top); right: var(--cover-pad-right); bottom: var(--cover-pad-bottom); left: var(--cover-pad-left); overflow: hidden; writing-mode: vertical-rl; font-family: var(--font-serif); }
.cover-line { display: block; margin-block-end: var(--cover-col-gap); font-size: calc(var(--cover-main) * var(--cover-title-scale)); font-weight: 700; line-height: var(--cover-lh); letter-spacing: var(--cover-main-ls); white-space: nowrap; }
.cover-line--sub { margin-block-end: var(--cover-sub-col-gap); font-size: var(--cover-sub); font-weight: 400; letter-spacing: var(--cover-sub-ls); }
.cover-line--sub-head { margin-block-start: var(--cover-head-gap); }
.cover-author { position: absolute; left: var(--cover-author-side); right: var(--cover-author-side); bottom: var(--cover-author-bottom); margin: 0; font-size: var(--cover-author); line-height: 1.4; text-align: center; letter-spacing: 0.04em; }
.cover--large { --cover-w: var(--cover-w-large); }
/* 画像の表紙（題名入りの絵をそのまま見せる本。文字の表紙の枠・グラデーションは外す） */
.cover--image { border-left: 0; border-radius: 0.2rem; background: none; }
.cover--image::before { display: none; }
.cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ───────── ボタン・バッジ ───────── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.4rem 1.2rem; border: 2px solid var(--btn-bg); border-radius: 0.5rem; background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; text-decoration: none; cursor: pointer; }
.btn--alt { background: var(--btn-alt-bg); color: var(--btn-alt-fg); }
.btn-resume { margin-top: 0.5rem; }
.badge { display: inline-block; padding: 0 0.6rem; border: 1px solid var(--badge-fg); border-radius: 999px; background: var(--badge-bg); color: var(--badge-fg); font-size: 0.75rem; line-height: 1.7; }

/* ───────── 本屋（店先） ───────── */
.page-store, .page-door { background: var(--wall); color: var(--ink); }
.bs-wrap { max-width: 62rem; margin: 0 auto; padding: 0 1rem 3rem; }
.bs-head { padding: 1rem 0 0.5rem; }
/* ───────── 場面（店の外観の絵）。座標・色・秒数は生成した上の部分。ここは骨組みだけ ───────── */
.bs-scene { margin: 0; container-type: inline-size; }
.sc-art { position: relative; width: 100%; aspect-ratio: var(--sc-ratio); overflow: hidden; container-type: inline-size; background: var(--sc-bg); border-radius: var(--sc-art-radius); box-shadow: 0 var(--sc-art-shadow-y) 0 var(--shadow); }
.sc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--sc-fade) ease-in-out; }
.sc-img.is-under { z-index: 1; opacity: 1; transition: none; }
.sc-img.is-top { z-index: 2; }
.sc-img.is-on { opacity: 1; }
.sc-img.is-broken { display: none; }
.bs-scene.is-error .sc-veil, .bs-scene.is-error .sc-fx, .bs-scene.is-error .sc-ff, .bs-scene.is-error .sc-board, .bs-scene.is-error .sc-window, .bs-scene.is-error .sc-door-glow, .bs-scene.is-error .sc-door-hover, .bs-scene.is-error .sc-enter-tag { display: none; }
.bs-scene.is-error-in .sc-door-glow, .bs-scene.is-error-in .sc-door-hover { display: none; }
.sc-veil, .sc-fx, .sc-ff, .sc-board, .sc-name { position: absolute; z-index: 3; pointer-events: none; }
.sc-veil { inset: 0; background: var(--sc-veil); opacity: 0; transition: opacity var(--sc-veil-s) ease-out; }
html.js .bs-scene:not(.is-lit) .sc-veil { opacity: 1; }
.sc-fx { opacity: calc(var(--sc-on, 0) * var(--sc-lit, 1) * var(--sc-strength, 1)); transition: opacity var(--sc-glow-s) ease-in-out; }
html.js .bs-scene:not(.is-lit) .sc-lit-gated { --sc-lit: 0; }
.sc-glow { background: radial-gradient(ellipse at center, var(--sc-glow) 0%, var(--sc-glow-edge) 100%); filter: blur(var(--sc-blur)); mix-blend-mode: screen; }
.sc-halo { mix-blend-mode: screen; }
.sc-halo-core { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--sc-halo) 0%, var(--sc-halo-edge) var(--sc-halo-stop)); animation: sc-flicker var(--sc-flick-s) ease-in-out infinite; }
.sc-fog { left: var(--sc-fog-left); width: var(--sc-fog-width); background: radial-gradient(ellipse at center, var(--sc-fog) 0%, var(--sc-fog-edge) var(--sc-fog-stop)); animation: sc-fog-drift var(--fog-dur) ease-in-out var(--fog-delay) infinite alternate; }
.sc-ff { display: none; width: var(--ff-size); aspect-ratio: 1; border-radius: 50%; background: var(--sc-firefly); box-shadow: 0 0 calc(var(--ff-size) * var(--sc-ff-blur)) calc(var(--ff-size) * var(--sc-ff-spread)) var(--sc-firefly-halo); opacity: var(--sc-ff-rest); animation: sc-ff-drift var(--ff-dur) ease-in-out var(--ff-delay) infinite backwards; }
.sc-board { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; color: var(--sc-chalk); font-family: var(--font-serif); line-height: var(--sc-board-lh); text-align: center; }
.sc-board-label { display: none; font-size: var(--sc-board-label); font-weight: 700; letter-spacing: var(--sc-board-ls); white-space: nowrap; }
.sc-name { margin: 0; font-family: var(--font-serif); font-size: var(--sc-name-size); font-weight: 700; line-height: var(--sc-name-lh); letter-spacing: var(--sc-name-ls); white-space: nowrap; transition: opacity var(--sc-enter-s) ease-in-out; color: var(--sc-name); text-shadow: 0 0 var(--sc-name-sh-wide) var(--sc-name-shadow), 0 0 var(--sc-name-sh-narrow) var(--sc-name-shadow); }
.sc-window { position: absolute; z-index: 3; display: block; border-radius: var(--sc-window-radius); cursor: pointer; transition: background-color var(--sc-window-hover-s); }
.sc-window:hover { background: var(--sc-window-hover); }

/* 外と店の中の 2 層。入る＝外の層が扉に寄って明るくなりながら消え、中の層が現れる。出る＝その逆（状態のクラスだけで動く） */
.sc-layer { position: absolute; inset: 0; isolation: isolate; }
.sc-layer-out { transform-origin: var(--sc-zoom-x) var(--sc-zoom-y); transition: opacity var(--sc-enter-s) ease-in-out, transform var(--sc-enter-s) ease-in-out, filter var(--sc-enter-s) ease-in-out, visibility 0s linear 0s; }
.bs-scene[data-view="in"] .sc-layer-out { opacity: 0; transform: scale(var(--sc-zoom)); filter: brightness(var(--sc-bright)); visibility: hidden; transition-delay: 0s, 0s, 0s, var(--sc-enter-s); }
.sc-layer-in { opacity: 0; visibility: hidden; transition: opacity var(--sc-enter-s) ease-in-out, visibility 0s linear var(--sc-enter-s); }
.bs-scene[data-view="in"] .sc-layer-in { opacity: 1; visibility: visible; transition-delay: 0s; }
.bs-scene.is-no-anim .sc-layer { transition: none; }
html:not(.js) .sc-layer-in, html:not(.js) .sc-door-glow, html:not(.js) .sc-door-hover, html:not(.js) .sc-enter-tag { display: none; }
.sc-img.is-instant { transition: none; }
.bs-scene[data-view="in"] .sc-name { opacity: 0; }

/* 入れる目印: 扉の灯りの明滅・触れる／フォーカスで明るくなる・小さな札 */
.sc-door-glow, .sc-door-hover, .sc-enter-tag { position: absolute; z-index: 3; pointer-events: none; }
.sc-door-glow { background: radial-gradient(ellipse at center, var(--sc-door-glow) 0%, var(--sc-door-glow-edge) 100%); mix-blend-mode: screen; opacity: var(--sc-door); animation: sc-door-blink var(--sc-door-blink-s) ease-in-out infinite; }
.sc-door-hover { background: radial-gradient(ellipse at center, var(--sc-door-hover) 0%, var(--sc-door-hover-edge) 100%); mix-blend-mode: screen; opacity: 0; transition: opacity var(--sc-door-hover-s) ease-out; }
.bs-scene:has(.sc-enter:hover) .sc-door-hover, .bs-scene:has(.sc-enter:focus-visible) .sc-door-hover { opacity: var(--sc-door-hover-op); }
.sc-enter-tag { margin: 0; padding: var(--sc-tag-pad); border: var(--sc-tag-bw) solid var(--sc-tag-border); border-radius: var(--sc-tag-radius); background: var(--sc-tag-bg); color: var(--sc-tag-fg); font-family: var(--font-serif); font-size: max(var(--sc-tag-size), var(--sc-tag-floor)); font-weight: 700; letter-spacing: var(--sc-tag-ls); white-space: nowrap; }
@keyframes sc-door-blink { 0%, 100% { opacity: calc(var(--sc-door) * var(--sc-door-min)); } 50% { opacity: var(--sc-door); } }

/* 店の中: 台の上の本の表紙・絵本の準備中の札・外へ出る札 */
.sc-shelf { position: absolute; z-index: 3; display: flex; align-items: flex-end; justify-content: center; gap: var(--sc-book-gap); }
.sc-book { position: relative; display: block; flex: 0 0 auto; height: 100%; aspect-ratio: 2 / 3; text-decoration: none; cursor: pointer; }
.sc-book::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--sc-touch-min)); height: max(100%, var(--sc-touch-min)); transform: translate(-50%, -50%); }
.sc-book-face { position: absolute; inset: 0; overflow: hidden; color: var(--cover-fg); background: linear-gradient(135deg, var(--cover-bg), var(--cover-bg2)); border-left: var(--sc-book-border) solid var(--cover-accent); border-radius: var(--sc-book-radius); box-shadow: var(--sc-book-shadow) var(--sc-book-shadow) var(--sc-book-shadow) var(--sc-book-shadowc); }
.sc-book-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--sc-book-radius); box-shadow: var(--sc-book-shadow) var(--sc-book-shadow) var(--sc-book-shadow) var(--sc-book-shadowc); }
.sc-book:hover .sc-book-img { filter: brightness(var(--sc-book-hover)); }
.sc-book:hover .sc-book-face { filter: brightness(var(--sc-book-hover)); }
.sc-booklist { display: none; flex-wrap: wrap; gap: var(--sc-bl-gap); padding: var(--sc-bl-pad); background: var(--sc-tag-bg); }
.sc-booklist-note { flex: 1 1 100%; margin: 0; color: var(--sc-tag-fg); font-family: var(--font-serif); font-size: max(var(--sc-bl-size), var(--sc-bl-floor)); line-height: var(--sc-bl-lh); text-align: center; }
.sc-booklist-item { display: flex; flex: 1 1 0; align-items: center; justify-content: center; min-height: var(--sc-touch-min); border: var(--sc-tag-bw) solid var(--sc-tag-border); border-radius: var(--sc-tag-radius); color: var(--sc-tag-fg); font-family: var(--font-serif); font-size: max(var(--sc-bl-size), var(--sc-bl-floor)); font-weight: 700; line-height: var(--sc-bl-lh); text-align: center; text-decoration: none; }
.sc-book-lines { position: absolute; inset: var(--sc-book-pad); overflow: hidden; writing-mode: vertical-rl; font-family: var(--font-serif); font-size: var(--sc-book-font); font-weight: 700; line-height: var(--sc-book-lh); }
.sc-book-line { display: block; }
.sc-plaque { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--sc-plaque-pad); border-radius: var(--sc-plaque-radius); background: var(--sc-plaque-bg); color: var(--sc-plaque-fg); font-family: var(--font-serif); font-size: max(var(--sc-plaque-size), var(--sc-plaque-floor)); line-height: var(--sc-plaque-lh); text-align: center; pointer-events: none; }
.sc-exit { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; gap: var(--sc-exit-gap); padding: var(--sc-exit-pad); border: var(--sc-tag-bw) solid var(--sc-tag-border); border-radius: var(--sc-exit-radius); background: var(--sc-tag-bg); color: var(--sc-tag-fg); font-family: var(--font-serif); font-size: max(var(--sc-exit-size), var(--sc-exit-floor)); font-weight: 700; letter-spacing: var(--sc-tag-ls); white-space: nowrap; min-width: max-content; cursor: pointer; }
.sc-exit:hover { background: var(--sc-exit-hover); }
.sc-exit-door { position: relative; display: inline-block; flex: 0 0 auto; width: var(--sc-exit-door-w); height: var(--sc-exit-door-h); border: var(--sc-exit-door-bw) solid currentColor; border-radius: var(--sc-exit-door-w) var(--sc-exit-door-w) 0 0; }
.sc-exit-door::after { content: ""; position: absolute; right: 15%; top: 55%; width: var(--sc-exit-knob); height: var(--sc-exit-knob); border-radius: 50%; background: currentColor; }
@keyframes sc-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 40% { opacity: var(--sc-flick-min); transform: scale(var(--sc-flick-scale)); } 70% { opacity: calc((1 + var(--sc-flick-min)) / 2); transform: scale(1); } }
@keyframes sc-fog-drift { from { transform: translateX(0); } to { transform: translateX(var(--fog-dx)); } }
@keyframes sc-ff-drift { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(var(--ff-dx), var(--ff-dy)); } }
@media (prefers-reduced-motion: reduce) {
  .bs-scene *, .bs-scene .sc-layer { transition: none !important; animation: none !important; }
}
.bs-greeting { max-width: 36rem; margin: 1.2rem 0 0; font-family: var(--font-serif); }
.bs-suki { display: flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin: 0.6rem 0 0; }
.bs-suki-label { color: var(--sub); font-size: 0.85rem; }
.book-suki { margin: 0; justify-content: center; }
.book > .book-suki { margin-top: 0.4rem; }
.door-suki { justify-content: center; }
.bs-news { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 1.2rem 0 0; padding: 0.6rem 1rem; border-radius: 0.4rem; background: var(--news-bg); color: var(--news-fg); text-decoration: none; }
.bs-news-label { font-weight: 700; letter-spacing: 0.1em; }
.shelf { margin: 2.2rem 0 0; }
.shelf-title { display: inline-block; margin: 0 0 0.8rem; padding: 0.15rem 0.9rem; border-radius: 0.3rem; background: var(--plaque); color: var(--plaque-fg); font-size: 1rem; letter-spacing: 0.1em; }
.shelf-row { display: flex; align-items: flex-end; gap: 1.25rem; margin: 0; padding: 1.2rem 1rem 1rem; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; background: repeating-linear-gradient(90deg, var(--shelf-back), var(--shelf-back) 2.5rem, var(--shelf-back-alt) 2.5rem, var(--shelf-back-alt) 2.6rem); border-bottom: 0.9rem solid var(--shelf); border-radius: 0.3rem 0.3rem 0 0; box-shadow: 0 0.5rem 0.6rem -0.3rem var(--shadow); }
.book { flex: 0 0 auto; width: var(--cover-w); scroll-snap-align: start; }
.book-link { display: block; color: inherit; text-decoration: none; }
.book-link:hover .book-title { text-decoration: underline; }
.book-info { margin-top: 0.7rem; }
.book-title { margin: 0; font-family: var(--font-serif); font-size: 0.95rem; font-weight: 700; line-height: 1.5; }
.book-subtitle { margin: 0; color: var(--sub); font-family: var(--font-serif); font-size: 0.8rem; line-height: 1.5; }
.book-authors, .book-meta { margin: 0.15rem 0 0; color: var(--sub); font-size: 0.78rem; line-height: 1.5; }
.book--empty .cover-empty { display: flex; align-items: center; justify-content: center; width: var(--cover-w); aspect-ratio: 2 / 3; padding: 0.8rem; border: 0.15rem dashed var(--sub); border-radius: 0.3rem; color: var(--sub); font-family: var(--font-serif); font-size: 0.85rem; line-height: 1.6; text-align: center; }
.bs-foot { margin: 2.5rem 0 0; font-size: 0.9rem; }
.bs-foot-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.2rem; color: var(--sub); text-decoration: underline; text-underline-offset: 0.25em; }
.bs-foot-link:hover { color: var(--ink); }
.bs-foot-link::after { content: "→"; margin-inline-start: 0.4em; text-decoration: none; }

/* ───────── 入口の棚: 本が少ない段は横いっぱいのカード（何冊までかは layout.single_layout_max_books） ───────── */
.shelf-row--single { display: block; overflow-x: visible; padding: var(--single-pad); }
.book--single { display: flex; flex-direction: column; align-items: center; width: auto; gap: 1.2rem; text-align: center; }
.book--single .cover { --cover-w: var(--single-cover-w-sp); }
.book--single .book-cover-link { display: block; flex: 0 0 auto; }
.book--single .book-info { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 0; }
.book--single .book-link { display: block; width: 100%; }
.book--single .book-title { font-size: var(--single-title); }
.book--single .book-subtitle { font-size: var(--single-subtitle); }
.book--single .book-authors, .book--single .book-meta { margin-top: 0.3rem; font-size: 0.85rem; }
.book-synopsis { max-width: calc(var(--single-synopsis-measure) * 1em); margin: 0.9rem auto 0; color: var(--ink); font-family: var(--font-serif); font-size: 0.95rem; line-height: var(--single-synopsis-lh); text-align: left; }
.book-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--single-actions-gap); margin: 1.1rem 0 0; }
.book-actions .btn, .door-actions .btn, .btn-resume { white-space: nowrap; }
.book-slot { display: contents; }
.book-actions .btn-resume { margin-top: 0; }

/* ───────── 本の扉 ───────── */
.door-nav { padding: 1.2rem 0 0; font-size: 0.9rem; }
.door { display: grid; grid-template-columns: 1fr; gap: 1.8rem; justify-items: center; padding: 1.5rem 0; text-align: center; }
.door > .cover { --cover-w: var(--cover-w-large); }
.door-main { width: 100%; max-width: calc(var(--door-measure) * 1em); }
.door-title { margin: 0; font-family: var(--font-serif); font-size: var(--door-title-sp); line-height: 1.4; }
.door-subtitle { margin: 0.2rem 0 0; color: var(--sub); font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: 0.05em; }
.door-authors { margin: 0.3rem 0 0; color: var(--sub); }
.door-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.8rem; margin: 0.9rem 0 0; font-size: 0.85rem; }
.door-synopsis-title { margin: 1.8rem 0 0.4rem; font-size: 0.9rem; color: var(--sub); letter-spacing: 0.1em; }
.door-synopsis { margin: 0; font-family: var(--font-serif); line-height: var(--door-lh); line-break: strict; text-align: left; }
.door-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 1.4rem 0 0; }
.door-main [data-resume-slot] { display: flex; justify-content: center; margin: 0.6rem 0 0; }
.door-main [data-resume-slot] .btn-resume { margin-top: 0; }
.door-toc { margin: 2.2rem 0 0; text-align: left; }
.toc-title { margin: 0 0 0.4rem; font-size: 1.1rem; text-align: center; }
.toc-part { margin: 1rem 0 0.2rem; text-align: center; color: var(--sub); font-size: 0.9rem; letter-spacing: 0.08em; }
.toc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.toc-item { display: flex; align-items: center; gap: 0.3rem; border-bottom: 1px solid var(--line); }
.toc-item .toc-suki { flex: 0 0 auto; }
.toc-item a { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 0.9rem; padding: 0.8rem 0.2rem; border-bottom: 0; text-decoration: none; }
.toc-item a:hover .toc-ep-title { text-decoration: underline; }
.toc-ep-no { color: var(--sub); font-size: 0.85rem; white-space: nowrap; }
.toc-ep-title { font-family: var(--font-serif); font-weight: 700; }
.toc-new { margin-inline-start: 0.6em; vertical-align: middle; font-weight: 400; }
.toc-ep-meta { color: var(--sub); font-size: 0.8rem; white-space: nowrap; }

/* ───────── 読書画面 ───────── */
.page-reader { background: var(--rd-bg); color: var(--rd-fg); }
.page-reader :focus-visible { outline-color: var(--rd-accent); }
html:not(.paged) .rd-paged-only, html:not(.js) .rd-panel-btn, html.in-frame .rd-panel-btn, html:not(.in-frame) .rd-frame-only { display: none; }
.rd-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.4rem; height: var(--bar-h); padding: 0 0.75rem; border-bottom: 1px solid var(--rd-line); background: var(--rd-bg); }
.rd-btn, .rd-opt { display: inline-flex; align-items: center; justify-content: center; gap: 0.3em; min-width: var(--btn-min); min-height: 2.25rem; padding: 0.25rem 0.6rem; border: 1px solid var(--rd-line); border-radius: 0.4rem; background: transparent; color: var(--rd-fg); font-size: 0.85rem; text-decoration: none; white-space: nowrap; cursor: pointer; }
.rd-btn:hover, .rd-opt:hover { border-color: var(--rd-accent); }
.rd-opt[aria-pressed="true"] { border-color: var(--rd-accent); background: var(--rd-accent); color: var(--rd-bg); font-weight: 700; }
.rd-bar-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--rd-sub); font-size: 0.8rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.rd-nav { align-items: center; gap: 0.3rem; }
html.paged .rd-nav { display: flex; }
html.paged[data-wm="vertical"] .rd-nav { flex-direction: row-reverse; }
.rd-count { min-width: 4.5em; margin: 0; color: var(--rd-sub); font-size: 0.85rem; text-align: center; white-space: nowrap; }
.rd-sym--v { display: none; }
html[data-wm="vertical"] .rd-sym--h { display: none; }
html[data-wm="vertical"] .rd-sym--v { display: inline; }
.rd-next .rd-sym { order: 2; }
html[data-wm="vertical"] .rd-next .rd-sym { order: 0; }
html[data-wm="vertical"] .rd-prev .rd-sym { order: 2; }
.rd-progress { display: none; }
html.paged .rd-progress { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 0.25rem; border: 0; appearance: none; -webkit-appearance: none; background: var(--rd-line); color: var(--rd-accent); }
html.paged[data-wm="vertical"] .rd-progress { transform: scaleX(-1); }
.rd-progress::-webkit-progress-bar { background: var(--rd-line); }
.rd-progress::-webkit-progress-value { background: var(--rd-accent); }
.rd-progress::-moz-progress-bar { background: var(--rd-accent); }
.rd-stage { outline: none; }
.rd-article { max-width: calc(var(--measure) * 1em); margin: 0 auto; padding: 2rem 1.25rem 4rem; font-size: var(--fs); }
.rd-head { margin-block-end: 2.5rem; }
.rd-part, .rd-epno, .rd-meta { margin: 0; color: var(--rd-sub); font-size: 0.8em; letter-spacing: 0.08em; }
.rd-title { margin: 0.2em 0 0.5em; font-size: 1.5em; font-weight: 700; line-height: 1.5; }
.rd-text { line-height: var(--lh); line-break: strict; overflow-wrap: anywhere; text-combine-upright: digits 2; }
.rd-text p { margin: 0 0 0.35em; }
.rd-text ruby rt { font-size: 0.5em; }
.rd-text .boten { font-style: normal; text-emphasis: filled sesame; text-emphasis-position: over right; }
.rd-text .rd-sub { margin: 1.8em 0 0.5em; font-size: 1.05em; font-weight: 700; line-height: 1.6; }
.rd-text .rd-code { padding: 0 0.3em; border-radius: 0.25em; background: var(--rd-panel); font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.9em; }
.rd-text .rd-table { border-spacing: 0; margin: 1em auto; writing-mode: horizontal-tb; font-size: 0.95em; }
.rd-text .rd-table th, .rd-text .rd-table td { height: var(--line-w); padding: 0 1em; text-align: left; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--rd-line); }
.rd-text .rd-table th { color: var(--rd-sub); font-weight: 700; }
.rd-text .scene { margin-block: 1.6em; color: var(--rd-sub); text-align: center; }
/* 挿絵（絵だけ・キャプションなし）。スクロールで読むときは本文の幅いっぱい、ページめくりのときは下の paged の規則が 1 ページに収まる大きさに揃える */
.rd-text .rd-illust { margin-block: 1.5em; margin-inline: auto; max-width: 100%; }
.rd-text .rd-illust-img { display: block; width: 100%; height: auto; }
.rd-text .scene::before { content: var(--scene-mark); letter-spacing: 0.2em; }
.rd-text .end-mark { margin-block-start: 3em; color: var(--rd-sub); font-size: 0.9em; text-align: center; letter-spacing: 0.1em; }
/* 扉の下の「下へ」の印（ページめくりのときだけ。1 ページ進んだら消える）。色は読書画面のテーマ、動きの値は config（layout.vars の cue_*） */
.rd-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 0.9em; margin-block-start: var(--cue-gap); padding: 0.4em 0.8em; border: 0; background: transparent; color: var(--rd-sub); font: inherit; font-size: 0.8em; letter-spacing: 0.12em; cursor: pointer; }
.rd-cue:hover { color: var(--rd-fg); }
.rd-cue-mark { display: block; width: var(--cue-size); height: var(--cue-size); border-right: 2px solid var(--rd-accent); border-bottom: 2px solid var(--rd-accent); transform: rotate(45deg); animation: rd-cue-down var(--cue-cycle) ease-in-out infinite; }
.rd-cue-text--v { display: none; }
html[data-wm="vertical"] .rd-cue { writing-mode: vertical-rl; }
html[data-wm="vertical"] .rd-cue-text--h { display: none; }
html[data-wm="vertical"] .rd-cue-text--v { display: inline; }
html[data-wm="vertical"] .rd-cue-mark { transform: rotate(135deg); animation-name: rd-cue-left; }
html.is-cue-off .rd-cue { display: none; }
@keyframes rd-cue-down { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.35; } 50% { transform: translateY(var(--cue-travel)) rotate(45deg); opacity: 1; } }
@keyframes rd-cue-left { 0%, 100% { transform: translateX(0) rotate(135deg); opacity: 0.35; } 50% { transform: translateX(calc(-1 * var(--cue-travel))) rotate(135deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rd-cue-mark { animation: none; opacity: 1; } }
.rd-pager { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; margin-block-start: 3rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--rd-line); }
.rd-pager-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.rd-pager-note { color: var(--rd-sub); font-size: 0.9em; }
.rd-suki { display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 2.75rem; }
.rd-suki-label { color: var(--rd-sub); font-size: 0.85rem; }
.rd-btn--next { min-height: 2.75rem; padding: 0.5rem 1.4rem; border-color: var(--rd-accent); background: var(--rd-accent); color: var(--rd-bg); font-size: 1rem; font-weight: 700; white-space: normal; text-align: center; }
.rd-btn--next:hover { border-color: var(--rd-fg); }
.rd-pad { display: block; margin: 0; padding: 0; border: 0; user-select: none; }

/* ページめくり ── JS が使えて、額縁の外で開かれたときだけ。1 画面 = 1 ページ、行は境目で切らない */
html.paged body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; touch-action: manipulation; }
html.paged .rd-bar { position: relative; flex: 0 0 auto; }
html.paged .rd-stage { flex: 0 0 auto; overflow: hidden; }
html.paged .rd-article { max-width: none; margin: 0; padding: 0; }
html.paged .rd-head { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding-bottom: var(--head-lift); text-align: center; }
html.paged .rd-head > * { margin: 0; }
html.paged .rd-part { letter-spacing: 0.18em; }
html.paged .rd-epno { margin-block-start: var(--head-gap); letter-spacing: 0.14em; }
html.paged .rd-title { margin-block: var(--head-title-gap); font-size: var(--head-title); letter-spacing: 0.08em; line-height: 1.5; }
html.paged .rd-meta { letter-spacing: 0.12em; }
html.paged .rd-text p { margin: 0; }
/* 小見出しは 1 行ぶん（行の高さの整数倍）にして、ページの境目で行が切れないようにする。上に空き 1 行 */
html.paged .rd-text .rd-sub { margin: var(--line-w) 0 0; font-size: 1em; line-height: var(--lh); }
html.paged .rd-text .rd-table { margin: 0 auto; }
html.paged .rd-text .scene { display: grid; place-items: center; margin: 0; }
html.paged .rd-text .scene::before { line-height: var(--lh); }
/* 挿絵（ページめくり）: 1 ページの中に収まる大きさで、絵の「ページを進む向きの長さ」は 1 行の整数倍にそろえる（あとに続く本文の行がずれない）。縦書きでも絵は回さない。2 ページにまたがるときは JS が空行で次のページの頭へ送る */
html.paged .rd-text .rd-illust { margin-block: 0; margin-inline: auto; }
html.paged .rd-text .rd-illust-img { height: 100%; }
html.paged[data-wm="horizontal"] .rd-text .rd-illust { height: var(--illust-h); width: calc(var(--illust-h) / var(--illust-hw)); }
html.paged[data-wm="vertical"] .rd-text .rd-illust { width: var(--illust-w); height: calc(var(--illust-w) * var(--illust-hw)); }
html.paged .rd-text .end-mark { margin-block: calc(var(--end-lines) * var(--line-w)) 0; font-size: 1em; }
html.paged .rd-pager { writing-mode: horizontal-tb; margin: 0; padding: 0; border: 0; }
html.paged .rd-pager .rd-btn { min-width: 10rem; }
html.paged .rd-btn--next { max-width: 100%; }

/* 縦書き: 本文の箱の高さは画面（バーを除く）に固定。幅は 1 行の幅の整数倍にそろえ、余りは左右の余白へ。右の余白 = 左の余白 */
html.paged[data-wm="vertical"] { --stage-h: calc(100dvh - var(--bar-h) - 2 * var(--v-pad)); --illust-w: round(down, min(calc(var(--stage-h) / var(--illust-hw) * var(--illust-max-h)), calc(var(--page-w) * var(--illust-max-w))), var(--line-w)); }
html.paged[data-wm="vertical"] { --page-w: min(round(down, calc(100vw - 2 * var(--margin-min)), var(--line-w)), calc(var(--max-lines) * var(--line-w))); }
html.paged[data-wm="vertical"] .rd-stage { flex: 1 1 auto; min-height: 0; width: var(--page-w); margin: var(--v-pad) auto; writing-mode: vertical-rl; }
html.paged[data-wm="vertical"] .rd-article { height: 100%; }
html.paged[data-wm="vertical"] .rd-head { width: var(--page-w); height: 100%; }
html.paged[data-wm="vertical"] .rd-text .scene { width: calc(var(--scene-lines) * var(--line-w)); }
html.paged[data-wm="vertical"] .rd-pager { width: max-content; max-width: calc(var(--page-w) - var(--pager-edge-lines) * var(--line-w)); height: 100%; justify-content: center; margin-right: calc(var(--pager-gap-lines) * var(--line-w)); }
html.paged[data-wm="vertical"] .rd-pager.is-page-top { margin-right: 0; }

/* 横書き: 見える高さを 1 行の高さの整数倍にそろえ、余りは上下の余白へ */
html.paged[data-wm="horizontal"] { --text-w: min(calc(100vw - 2 * var(--margin-min)), calc(var(--measure) * var(--fs))); --illust-h: round(down, min(calc(var(--text-w) * var(--illust-hw)), calc(var(--page-h) * var(--illust-max-h))), var(--line-w)); }
html.paged[data-wm="horizontal"] { --page-h: round(down, calc(100dvh - var(--bar-h) - 2 * var(--v-pad)), var(--line-w)); }
html.paged[data-wm="horizontal"] .rd-stage { height: var(--page-h); width: min(calc(100vw - 2 * var(--margin-min)), calc(var(--measure) * var(--fs))); margin: auto; }
html.paged[data-wm="horizontal"] .rd-head { height: var(--page-h); }

html.paged[data-wm="horizontal"] .rd-text .scene { height: calc(var(--scene-lines) * var(--line-w)); }
html.paged[data-wm="horizontal"] .rd-pager { margin-top: calc(var(--pager-gap-lines) * var(--line-w)); }
html.paged[data-wm="horizontal"] .rd-pager.is-page-top { margin-top: 0; }
/* 横書きは案内を横に並べて低くする（2026-11-07: 幅 876×高さ 400 では縦 3 段の案内が 155px あり、話の最後のページの残りに入らなかった）。入りきらないときだけ次のページへ送る決まりは変えない */
html.paged[data-wm="horizontal"] .rd-pager { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; }
html.paged[data-wm="horizontal"] .rd-pager-sub { display: contents; }
/* 画面が低いとき（高さが end_guide.compact_max_height_px 以下）: 案内は 1 行（ハート＋次の話）。戻る系は上のバーに同じものが在るので出さない。前の空きも小さくする */
html.paged.is-guide-compact .rd-pager-sub { display: none; }
html.paged.is-guide-compact[data-wm="horizontal"] .rd-text .end-mark { margin-block: calc(var(--end-mark-gap-compact) * var(--line-w)) 0; }
html.paged.is-guide-compact[data-wm="horizontal"] .rd-pager:not(.is-page-top) { margin-top: calc(var(--pager-gap-lines-compact) * var(--line-w)); }

/* 目次・表示設定 ── バーのすぐ下の中央に出る。画面の外へは出ない */
.rd-panel, .rd-backdrop, .rd-toast { display: none; }
html.js .rd-backdrop.is-open { display: block; position: fixed; inset: 0; z-index: 40; background: var(--overlay); }
html.js .rd-panel.is-open { display: block; position: fixed; top: calc(var(--bar-h) + var(--panel-gap)); left: 0; right: 0; z-index: 50; width: min(var(--panel-w), calc(100vw - 2 * var(--panel-gap))); max-height: calc(100vh - var(--bar-h) - 2 * var(--panel-gap)); max-height: calc(100dvh - var(--bar-h) - 2 * var(--panel-gap)); margin: 0 auto; padding: 1rem; overflow-y: auto; background: var(--rd-panel); color: var(--rd-fg); border: 1px solid var(--rd-line); border-radius: 0.6rem; box-shadow: 0 0.5rem 1.5rem var(--shadow); }
html.js .rd-toast.is-on { display: block; position: fixed; bottom: var(--panel-gap); left: 0; right: 0; z-index: 60; width: max-content; max-width: calc(100vw - 2 * var(--panel-gap)); margin: 0 auto; padding: 0.5rem 1rem; border-radius: 0.5rem; background: var(--rd-fg); color: var(--rd-bg); font-size: 0.9rem; }
.rd-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.8rem; }
.rd-panel-head h2 { margin: 0; font-size: 1.05rem; }
.rd-drawer-book { margin: 0 0 0.6rem; color: var(--rd-sub); font-size: 0.85rem; }
.rd-toc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rd-line); }
.rd-toc a { display: block; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--rd-line); color: var(--rd-fg); text-decoration: none; }
.rd-toc a[aria-current="page"] { color: var(--rd-accent); font-weight: 700; }
.rd-drawer-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.rd-group { margin: 0 0 0.9rem; padding: 0; border: 0; }
.rd-group legend { margin: 0 0 0.4rem; padding: 0; color: var(--rd-sub); font-size: 0.85rem; }
.rd-opts { display: flex; flex-wrap: wrap; gap: 0.4rem; }
html:not(.paged) .rd-group--wm { display: none; }

@media (min-width: 720px) {
  .shelf-row { flex-wrap: wrap; overflow-x: visible; }
  .shelf-row--single { padding: var(--single-pad); }
  .book--single { flex-direction: row; align-items: center; gap: var(--single-gap); text-align: left; }
  .book--single .cover { --cover-w: var(--single-cover-w); }
  .book--single .book-info { flex: 1 1 0; min-width: 0; align-items: flex-start; }
  .book-synopsis { margin: 0.9rem 0 0; }
  .book-actions { justify-content: flex-start; }
  .door { grid-template-columns: var(--door-cover-w) 1fr; gap: var(--door-gap); align-items: start; justify-items: stretch; text-align: left; }
  .door > .cover { --cover-w: var(--door-cover-w); position: sticky; top: var(--door-sticky-top); }
  .door-main { max-width: none; }
  .door-title { font-size: var(--door-title); }
  .door-badges, .door-actions, .door-suki, .door-main [data-resume-slot] { justify-content: flex-start; }
  .door-synopsis { max-width: calc(var(--door-measure) * 1em); }
  .toc-title, .toc-part { text-align: left; }
  html:not(.paged) .rd-article { padding-block-start: 3rem; }
}
@media (max-width: 560px) {
  .rd-hide-narrow, .rd-txt { display: none; }
  .rd-bar { gap: 0.25rem; padding: 0 0.4rem; }
  .rd-btn { padding: 0.25rem 0.4rem; }
  .rd-nav { gap: 0.15rem; }
  .rd-count { min-width: 3.8em; font-size: 0.8rem; }
  .toc-item a { grid-template-columns: auto 1fr; }
  .toc-ep-meta { grid-column: 1 / -1; white-space: normal; }
}
@media (prefers-reduced-motion: no-preference) {
  .rd-btn, .rd-opt, .btn { transition: background-color 0.15s, border-color 0.15s; }
}

/* 右下の「上へ」── 額縁の外で単独に開いたときだけ JS が hidden を外し、一定量進んだら出る（出し入れは is-on の付け外し） */
.to-top { position: fixed; right: var(--to-top-gap); bottom: var(--to-top-gap); z-index: 30; display: flex; align-items: center; justify-content: center; width: var(--to-top-size); height: var(--to-top-size); margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 0.25rem 0.75rem var(--shadow); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--to-top-fade), visibility 0s linear var(--to-top-fade); }
.to-top::before { content: ""; width: 0.65rem; height: 0.65rem; margin-block-start: 0.2rem; border-block-start: 0.18rem solid currentColor; border-inline-start: 0.18rem solid currentColor; transform: rotate(45deg); }
.to-top.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.to-top:focus-visible { outline: 0.15rem solid var(--focus); outline-offset: 0.2rem; }
.page-reader .to-top { background: var(--rd-accent); color: var(--rd-bg); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* 印刷 ── 本文だけをきれいに */
@media print {
  .to-top, .rd-bar, .rd-progress, .rd-cue, .rd-panel, .rd-backdrop, .rd-toast, .rd-pager, .rd-pad, .skip { display: none !important; }
  html body { display: block !important; height: auto !important; overflow: visible !important; background: Canvas !important; color: CanvasText !important; }
  html .rd-stage { width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; writing-mode: horizontal-tb !important; }
  html .rd-article { width: auto !important; height: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; font-size: 1rem !important; }
  html .rd-head { display: block !important; width: auto !important; height: auto !important; }
  html .rd-text .scene { display: block !important; width: auto !important; height: auto !important; margin-block: 1.6em !important; }
  html .rd-text p { margin: 0 0 0.35em !important; }
  html .rd-text .scene, html .rd-text .end-mark, html .rd-part, html .rd-epno, html .rd-meta { color: CanvasText !important; }
}