/* 縦書きでめくって読む本（2026-10-09 作り直し・二回目） */
:root{
  --desk:#101011; --desk2:#1d1d20; --paper:#fbfbf9; --paper2:#f1f1ee; --ink:#1c1c1e; --sub:#8a8a8f; --rule:#e3e3e0;
  --gold:#e3b24f; --fs:16px; --L:calc(var(--fs) * 1.9); --dur:.8s;
}
:root[data-theme=night]{ --desk:#050505; --desk2:#121214; --paper:#1a1a1c; --paper2:#232326; --ink:#e6e6e3; --sub:#8b8b90; --rule:#323235; }
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:radial-gradient(110% 80% at 50% 45%,var(--desk2),var(--desk));color:var(--ink);overflow:hidden;
  font-family:"Klee One","Zen Old Mincho",serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}

.stage{position:fixed;inset:0;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center}
.book{position:relative;flex:none}
.book::before{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);pointer-events:none}

/* ページ（右・左・めくる葉の表と裏） */
.face{position:absolute;top:0;bottom:0;width:50%;background:var(--paper);overflow:hidden}
.f-right{right:0;border-radius:2px 6px 6px 2px}
.f-left{left:0;border-radius:6px 2px 2px 6px}
.book.single .face{width:100%;border-radius:6px}
.book.single .f-left{display:none}
.face.blank > *{visibility:hidden}

.win{position:absolute;top:7%;bottom:30.5%;overflow:hidden}
.strip{position:absolute;top:0;right:0;height:100%;width:max-content;writing-mode:vertical-rl;
  font-size:var(--fs);line-height:var(--L);font-weight:600;letter-spacing:.05em}
.folio{position:absolute;top:2.6%;font-size:10px;color:var(--sub);font-family:"Zen Old Mincho",serif;letter-spacing:.1em}
.face[data-side=r] .folio,.single .folio{right:8%}
.face[data-side=l] .folio{left:8%}
/* 本の背の影（絵の上にもかかる＝紙に刷ってある感じ） */
.gutter{position:absolute;top:0;bottom:0;width:13%;pointer-events:none;z-index:4}
.face[data-side=r] .gutter{left:0;background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,.05) 35%,transparent)}
.face[data-side=l] .gutter{right:0;background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,.06) 35%,transparent)}
:root[data-theme=night] .face[data-side] .gutter{opacity:1.6}

/* 本文（行の幅 L の倍数だけを使う） */
.text p{margin:0}
.text .gap{color:transparent}
.text h2{margin:0 calc(var(--L) * 2) 0 0;font-family:"Zen Old Mincho",serif;font-size:1.08em;line-height:var(--L);font-weight:700;padding-top:.8em;letter-spacing:.12em}
.text .q{position:relative;z-index:0;padding:.9em var(--L)}
.text .q::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--L) * .3);right:calc(var(--L) * .3);background:var(--paper2);border-radius:5px;z-index:-1}
.text .notice{position:relative;padding:.9em var(--L)}
.text .notice::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--L) * .3);right:calc(var(--L) * .3);border:1.5px solid var(--ink);border-radius:4px}
.text .star{text-align:center;color:var(--sub)}
.text .end{text-align:end;color:var(--sub)}
.tcy{text-combine-upright:all;-webkit-text-combine:horizontal}
.text .toc-i a{color:var(--ink);text-decoration:none}
.text .toc-i .d{color:var(--sub)}
.text .toc-i.read .d::after{content:"・よんだ";font-size:.8em}
.endpage{writing-mode:horizontal-tb;height:100%;display:flex;align-items:center;justify-content:center}
.endpage a{writing-mode:vertical-rl;font-family:"Zen Old Mincho",serif;font-size:calc(var(--fs) * 1.3);color:var(--ink);text-decoration:none;letter-spacing:.3em;padding:20px 12px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}

/* 余白（地）の絵：見開きに一まい。白いところはすき通し（インクだけ）なので、紙にそのまま刷ってあるように見える */
.art{position:absolute;left:0;right:0;bottom:0;height:27.5%;pointer-events:none;z-index:1}
.art img{position:absolute;bottom:0;height:100%;object-fit:cover;object-position:center bottom;opacity:.94}
.art img.color{opacity:1}
:root[data-theme=night] .art img:not(.color){filter:invert(1);opacity:.85}
:root[data-theme=night] .art img.color{opacity:.9}

/* 見開きの中表紙 */
.cov{display:none;position:absolute;inset:0;z-index:2}
.face[data-cov=a] .cov-a,.face[data-cov=b] .cov-b{display:block}
/* 中表紙のときも本文の帯は「見えないだけ」にして、長さを数えられるようにしておく（display:none だと長さが 0 になり、本が 3 ページになる不具合があった） */
.face[data-cov] .win,.face[data-cov] .folio{visibility:hidden}
.cov-a{background:#0b0b0c}
.cov-a img{position:absolute;top:0;bottom:0;left:0;right:26%;width:74%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12)}
.cov-a.noimg img{display:none}
.cov-a .veil{position:absolute;top:0;bottom:0;right:0;width:34%;background:linear-gradient(270deg,#0b0b0c 0,#0b0b0c 76%,rgba(11,11,12,0))}
.cov-a .ttl{position:absolute;top:10%;right:8.5%;bottom:10%;max-width:22%;writing-mode:vertical-rl;color:#fff;display:flex;flex-direction:column;gap:1em;align-items:flex-start}
.cov-a .day{white-space:nowrap;font-family:"Zen Old Mincho",serif;font-size:calc(var(--fs) * 1.1);letter-spacing:.5em;color:var(--gold);margin:0}
.cov-a h1{white-space:nowrap;font-family:"Zen Old Mincho",serif;font-weight:700;font-size:clamp(20px,calc(var(--fs) * 2),46px);line-height:1.3;letter-spacing:.14em;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.cov-a.book h1{font-size:clamp(20px,calc(var(--fs) * 1.8),42px)}
.cov-b{background:radial-gradient(90% 70% at 50% 40%,#1c1c1f,#060607);color:#eee;overflow:hidden}
.shelf3d{position:absolute;inset:7% 4% 30% 4%;perspective:640px;display:flex;align-items:center;justify-content:center}
.shelf3d .g{display:grid;grid-template-columns:repeat(11,1fr);gap:clamp(6px,1.3vw,14px);transform:rotateY(26deg) rotateX(8deg);transform-style:preserve-3d}
.shelf3d i{display:block;width:clamp(9px,1.5vw,18px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}
.shelf3d i.on{background:radial-gradient(circle,#fff7dc 0 22%,var(--gold) 55%,rgba(227,178,79,0) 72%);box-shadow:0 0 14px 3px rgba(227,178,79,.42)}
.face[data-cov=b] .shelf3d i.on{animation:glow 3.2s ease-in-out infinite}
.face[data-cov=b] .shelf3d i.on:nth-child(3n){animation-delay:-1.1s}
.face[data-cov=b] .shelf3d i.on:nth-child(5n){animation-delay:-2.2s}
@keyframes glow{50%{opacity:.72}}
.cov-b .num{position:absolute;left:0;right:0;bottom:9%;text-align:center;font-family:"Zen Old Mincho",serif}
.shelf3d .g.g10{grid-template-columns:repeat(10,1fr)}
.cov-b .num small{display:block;font-size:calc(var(--fs) * .8);letter-spacing:.5em;color:#a9a9ae;margin-bottom:.5em}
.cov-b .num b{font-size:clamp(30px,calc(var(--fs) * 2.8),68px);font-weight:700;letter-spacing:.14em;color:#fff}

/* めくる葉（3 つの細い紙をつないで、しなる） */
.leafwrap{position:absolute;top:0;bottom:0;perspective:2400px;z-index:5;display:none;pointer-events:none}
.seg{position:absolute;top:0;height:100%;transform-style:preserve-3d}
.clip{position:absolute;top:0;bottom:0;left:-1px;right:-1px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.c-back{transform:rotateY(180deg)}
.clip .face{width:var(--pw);border-radius:0}
.sshade{position:absolute;inset:0;pointer-events:none;z-index:8}
.cast{position:absolute;top:0;bottom:0;width:50%;pointer-events:none;z-index:4;display:none;opacity:0}
.cast.on-l{left:0;background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 45%,transparent 80%)}
.cast.on-r{left:50%;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 45%,transparent 80%)}
.cast.sg{left:0;width:100%}

/* 押す所 */
.hit{position:absolute;top:0;bottom:0;width:50%;z-index:6;cursor:pointer}
.hit-next{left:0}
.hit-prev{right:0}

/* 本の外の余白 */
.side{flex:1;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0;padding:0 2vw}
.side-r{flex-direction:column;gap:22px;justify-content:center;padding-top:56px;padding-bottom:24px}
.run{writing-mode:vertical-rl;margin:0;color:#9c9ca2;font-family:"Zen Old Mincho",serif;font-size:16px;letter-spacing:.3em;max-height:52vh;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.run b{color:#d9d9d6;font-weight:400;margin-top:.9em}
.mini-lights{display:none}
.mini-lights i{width:5px;height:5px;border-radius:50%;background:#2b2b2e}
.mini-lights i.on{background:var(--gold);box-shadow:0 0 5px rgba(227,178,79,.6)}
.mini-cap{margin:0;color:#9c9ca2;font-family:"Zen Old Mincho",serif;font-size:13px;letter-spacing:.25em;writing-mode:vertical-rl;display:flex;align-items:center;gap:.6em}
.mini-cap::before{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff7dc 0 22%,var(--gold) 58%,rgba(227,178,79,0) 74%);box-shadow:0 0 10px 2px rgba(227,178,79,.45)}
.mini-cap b{color:#ececea;font-weight:400;font-size:20px;margin-top:.3em}
.arrow{width:50px;height:50px;border-radius:50%;border:1px solid #38383c;background:transparent;color:#bdbdc2;font-size:24px;line-height:1;cursor:pointer;opacity:.28;transition:opacity .3s,background .3s}
.arrow:hover{opacity:1;background:rgba(255,255,255,.05)}
.tools{position:fixed;top:12px;right:14px;display:flex;gap:4px;z-index:20;font-family:"Zen Old Mincho",serif;font-size:12px;opacity:.45;transition:opacity .3s}
.tools:hover,.tools.show{opacity:1}
.tools a,.tools button{color:#d6d6d3;text-decoration:none;background:rgba(0,0,0,.3);border:1px solid #38383c;border-radius:999px;padding:3px 10px;cursor:pointer}
.prog{position:fixed;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.05);z-index:20}
.prog i{position:absolute;right:0;top:0;bottom:0;background:var(--gold);opacity:.65;transition:width .6s}

/* せまい画面：外の余白はしまい、道具は本のまん中を押すと出る */
@media (max-width:900px){
  .side{display:none}
  .tools{top:auto;bottom:12px;right:50%;transform:translateX(50%);opacity:0;pointer-events:none}
  .tools.show{opacity:.95;pointer-events:auto}
}
.text .toc-i.hide .n{display:none}

/* もくじ：見開き 1 つに 30 日 */
.tocsp{writing-mode:horizontal-tb;height:100%;display:flex;flex-direction:row-reverse}
.tocsp .half{width:50%;height:100%;writing-mode:vertical-rl;padding:0 calc(var(--tw) * .025);overflow:hidden}
.tocsp .toc-h{margin:0;font-family:"Zen Old Mincho",serif;font-size:calc(var(--tocfs) * 1.15);line-height:calc(var(--tw) * .07);letter-spacing:.3em;padding-top:0}
.tocsp .toc-i{font-size:var(--tocfs);line-height:calc(var(--tw) * .86 / 15);margin:0;white-space:nowrap;overflow:hidden}
.tocsp .toc-i .d{display:inline-block;min-height:5.6em;color:var(--sub)}
.text .toc-i.read .d::after{content:""}
.tocsp .toc-i.read .n::after{content:"　・";color:var(--sub)}
/* 道具：100 の世界へ（目立たない） */
.tools .to-worlds{border-color:transparent;background:transparent;color:#a8a8ad}
.tools .to-worlds:hover{color:#e3b24f}