/* 積読ゼロ — 革装の背表紙と、生成りの紙。 */
:root{
  --leather:#3B2A1E; --leather2:#2A1E15; --gold:#D8B46A; --paper:#F6F0E2; --card:#FFFBF2; --ink:#2B2118; --sub:#776652; --line:#E2D6BE;
  --green:#2F5B4B; --green-ink:#F6F0E2; --wood:#8A5A36; --wood2:#6E4527;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{--paper:#1E1814;--card:#29211B;--ink:#EFE6D4;--sub:#B5A58C;--line:#43372C;--green:#5FA88A;--green-ink:#10170F;color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.75}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.band{background:linear-gradient(180deg,var(--leather),var(--leather2));color:#F2E6CC;
  padding:calc(env(safe-area-inset-top,0px) + 14px) max(16px,env(safe-area-inset-right,0px)) 22px max(16px,env(safe-area-inset-left,0px));
  border-bottom:4px double var(--gold)}
.band-in{max-width:640px;margin:0 auto}
.back{font-size:12px;letter-spacing:.15em;color:#CDB894;text-decoration:none}
h1{margin:10px 0 0;font-size:38px;line-height:1.1;letter-spacing:.12em;font-weight:700}
.h-a{color:#F2E6CC}.h-b{color:var(--gold);margin-left:.1em}
.tag{margin:6px 0 0;color:#CDB894;font-size:14px;letter-spacing:.1em}
.page{max-width:640px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:grid;gap:30px}
h2{margin:0;font-size:18px;letter-spacing:.14em}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:6px}
.date,.count{font-size:13px;color:var(--sub)}
#portions{display:grid;gap:14px}
.portion{background:var(--card);border:1px solid var(--line);border-left:10px solid var(--c);border-radius:4px 10px 10px 4px;padding:16px 16px 14px;
  display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;box-shadow:0 8px 20px -16px rgba(59,42,30,.6)}
.p-head{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.p-title{margin:0;font-size:17px;line-height:1.4;word-break:break-word}
.p-left{font-size:12px;color:var(--sub);flex:none}
.p-range{margin:0;display:grid}
.p-pages{font-size:15px}
.p-pages b{font-size:34px;font-weight:700;font-feature-settings:"tnum";letter-spacing:.02em}
.p-pages small{font-size:13px;margin-left:4px;color:var(--sub)}
.p-sub{font-size:13px;color:var(--sub)}
.p-done{font-size:15.5px;font-weight:700;color:var(--green)}
.p-done::before{content:"✓ "}
.p-meta{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;color:var(--sub)}
.fin{grid-template-columns:1fr;border-left-color:var(--gold);background:linear-gradient(90deg,rgba(216,180,106,.18),transparent)}
.fin-t{margin:0;font-weight:700}
.btn{font:inherit;font-weight:700;letter-spacing:.1em;min-height:50px;padding:10px 22px;border-radius:999px;border:0;background:var(--green);color:var(--green-ink);cursor:pointer;transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green);font-size:14px;padding:10px 14px}
.tick{min-width:104px}
.first{text-align:center;padding:24px 10px 6px}
.first svg{display:block;margin:0 auto 10px}
.first-h{font-size:20px;font-weight:700;margin:0 0 6px}
.first p{margin:0 auto;max-width:28em;color:var(--sub);font-size:14.5px}
.add-form{display:grid;grid-template-columns:1fr 110px;gap:10px;margin-top:12px;align-items:end}
.add-form label{display:grid;gap:4px;font-size:13px;color:var(--sub)}
.add-form .btn{grid-column:1/-1}
.err{grid-column:1/-1;margin:0;color:#B23A2A;font-size:13px;min-height:0}
.err:empty{display:none}
input{font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-bottom:2px solid var(--sub);border-radius:4px 4px 0 0;padding:10px 12px;width:100%;min-height:48px}
input:focus{border-bottom-color:var(--green);outline:none;box-shadow:0 2px 0 var(--green)}
.books{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.book{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:stretch}
.spine{background:var(--c);color:#F6EBD3;writing-mode:vertical-rl;font-size:13px;letter-spacing:.1em;padding:22px 0;border-radius:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-height:150px;display:flex;align-items:center;justify-content:flex-start;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.15),inset -3px 0 0 rgba(0,0,0,.2);background-image:linear-gradient(transparent 12px,var(--gold) 12px,var(--gold) 14px,transparent 14px,transparent calc(100% - 14px),var(--gold) calc(100% - 14px),var(--gold) calc(100% - 12px),transparent calc(100% - 12px))}
.b-body{padding:4px 0;min-width:0}
.b-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.b-pct{font-size:22px;font-weight:700}
.b-of{font-size:12.5px;color:var(--sub);flex:1}
.b-edit{font:inherit;font-size:13px;background:none;border:1px solid var(--line);color:var(--sub);border-radius:999px;padding:4px 12px;min-height:36px;cursor:pointer}
.grid{display:flex;flex-wrap:wrap;gap:3px;margin-top:6px}
.grid i{width:12px;height:12px;border:1px solid var(--c);border-radius:2px}
.grid i.on{background:var(--c)}
.grid i.part{background:linear-gradient(90deg,var(--c) 50%,transparent 50%)}
.more{font-size:12px;color:var(--sub);margin-left:4px}
.none{color:var(--sub);font-size:14px;margin:0}
.shelf{background:linear-gradient(180deg,#5A3A22,#4A2F1B);border-radius:6px;padding:16px 14px 0;border:6px solid var(--wood2);border-bottom-width:0;overflow-x:auto}
.spines{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:3px;min-height:170px;border-bottom:12px solid var(--wood)}
.sp{background:var(--c);color:#F6EBD3;writing-mode:vertical-rl;font-size:12px;letter-spacing:.08em;padding:12px 0 8px;border-radius:2px 2px 0 0;
  display:block;position:relative;flex:none;overflow:hidden;cursor:pointer;
  box-shadow:inset 2px 0 0 rgba(255,255,255,.18),inset -3px 0 0 rgba(0,0,0,.25);transition:transform .15s}
.sp:hover,.sp:focus-visible{transform:translateY(-6px)}
.sp-t{display:block;height:calc(100% - 40px);overflow:hidden;white-space:nowrap;line-height:30px;width:100%;text-align:start}
.sp-d{position:absolute;bottom:6px;left:0;right:0;text-align:center;line-height:30px;font-size:10px;opacity:.8;font-family:ui-monospace,Menlo,monospace;letter-spacing:0}
.speed{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
.speed-row{display:flex;justify-content:space-between;margin:10px 0 4px;font-size:14px}
output{font-weight:700;color:var(--green)}
input[type=range]{width:100%;accent-color:var(--green);border:0;background:none;padding:0;min-height:36px;box-shadow:none}
.hint{margin:4px 0 0;font-size:12.5px;color:var(--sub)}
.edit{border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);padding:20px;width:min(360px,calc(100vw - 32px))}
.edit::backdrop{background:rgba(30,20,10,.5)}
.edit h3{margin:0 0 12px;font-size:17px;word-break:break-word}
.edit label{display:grid;gap:4px;font-size:13px;color:var(--sub)}
.edit-acts{display:flex;gap:10px;margin-top:16px}
.del{font:inherit;font-size:13px;background:none;border:0;color:#B23A2A;text-decoration:underline;margin-top:14px;padding:8px 0;cursor:pointer}
.foot{font-size:12px;color:var(--sub);border-top:1px solid var(--line);padding-top:12px;line-height:1.7}
.foot p{margin:0}
@media (min-width:700px){.portion{padding:18px 22px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}