:root{
  --bg:#2a2a2e; --bar:#1f1f22; --bar-fg:#f2f2f2; --muted:#a9a9b0;
  --accent:#e22830; --panel:#fff; --panel-fg:#222; --line:#e5e5e8;
  --bar-h:52px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--bar-fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.app{position:fixed;inset:0;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:4px;padding:0 8px;background:var(--bar);height:var(--bar-h);flex:none;z-index:5}
.bar.top{padding-top:env(safe-area-inset-top);height:calc(var(--bar-h) + env(safe-area-inset-top))}
.bar.bottom{padding-bottom:env(safe-area-inset-bottom);height:calc(var(--bar-h) + env(safe-area-inset-bottom));gap:10px;padding-left:12px;padding-right:14px}
.btn{display:inline-flex;align-items:center;gap:6px;height:40px;min-width:40px;padding:0 9px;border:0;border-radius:8px;background:transparent;cursor:pointer;color:var(--bar-fg);text-decoration:none;font-size:14px}
.btn:hover{background:rgba(255,255,255,.1)}
.btn:focus-visible,.nav:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:1px}
.btn.small{height:34px;min-width:34px;padding:0 8px}
.title{flex:1;min-width:0;margin:0 8px;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.jump{display:flex;align-items:center;gap:2px}
.jump input{width:56px;height:34px;border-radius:8px;border:1px solid #4a4a50;background:#2e2e33;text-align:center;padding:0 6px}
.counter{font-size:13px;color:var(--muted);white-space:nowrap;min-width:92px;text-align:right;font-variant-numeric:tabular-nums}
#slider{flex:1;min-width:0;accent-color:var(--accent);height:28px}

.stage{position:relative;flex:1;overflow:hidden;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.book{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);perspective:2600px}
.slot{position:absolute;top:0;height:100%;background:#fff;overflow:hidden;cursor:zoom-in}
.slot.empty{background:transparent;cursor:default}
.slot img,.leaf img{width:100%;height:100%;display:block;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.slot.l{left:0;box-shadow:-4px 6px 18px rgba(0,0,0,.35)}
.slot.r{right:0;box-shadow:4px 6px 18px rgba(0,0,0,.35)}
.slot.single{left:0;box-shadow:0 6px 22px rgba(0,0,0,.4)}
/* 見開きの綴じ目の陰影 */
.slot.l::after,.slot.r::after{content:"";position:absolute;top:0;bottom:0;width:6%;pointer-events:none}
.slot.l::after{right:0;background:linear-gradient(to left,rgba(0,0,0,.18),transparent)}
.slot.r::after{left:0;background:linear-gradient(to right,rgba(0,0,0,.18),transparent)}
.slot.empty::after{display:none}

/* めくりアニメーション */
.leaf{position:absolute;top:0;height:100%;transform-style:preserve-3d;z-index:3;transition:transform .6s cubic-bezier(.4,.1,.25,1)}
.leaf.fwd{right:0;transform-origin:left center}
.leaf.back{left:0;transform-origin:right center}
.leaf .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;overflow:hidden}
.leaf .face.rear{transform:rotateY(180deg)}
.leaf .face.blank{background:transparent}
.leaf .face::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.leaf.fwd .face.front::after{background:linear-gradient(to left,rgba(0,0,0,.35),transparent 60%)}
.leaf.back .face.front::after{background:linear-gradient(to right,rgba(0,0,0,.35),transparent 60%)}
.leaf.turning .face.front::after{opacity:1}

/* 単ページのスライド */
.slide{position:absolute;inset:0;transition:transform .35s ease}

.nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:88px;border:0;border-radius:10px;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s}
.nav:hover{background:rgba(0,0,0,.55)}
.nav.prev{left:10px}.nav.next{right:10px}
.nav[disabled]{opacity:0;pointer-events:none}
.nav svg{width:28px;height:28px}

/* パネル */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9}
.panel{position:fixed;top:0;left:0;bottom:0;width:min(360px,88vw);background:var(--panel);color:var(--panel-fg);z-index:10;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.3);padding-top:env(safe-area-inset-top)}
.panel.wide{width:min(760px,100vw)}
.panel .btn{color:var(--panel-fg)}
.panel .btn:hover{background:#f0f0f2}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 6px 18px}
.panel-head h2{margin:0;font-size:17px}
.filter{margin:4px 14px 10px;height:38px;border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--panel-fg);background:#fafafa}
.toc{overflow:auto;padding:0 8px 24px}
.toc a{display:flex;align-items:baseline;gap:8px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;font-size:14px}
.toc a:hover,.toc a:focus-visible{background:#f2f2f4;outline:none}
.toc a .pg{margin-left:auto;color:#888;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.toc .sec{font-weight:700;font-size:15px;margin-top:6px;border-left:5px solid var(--c);border-radius:0 8px 8px 0}
.toc .sec .pg{color:var(--c);font-weight:700}
.toc .sub{padding-left:26px}
.toc a.current{background:#fdecec}
.toc .none{padding:12px;color:#888;font-size:14px}
.thumbs{overflow:auto;padding:4px 14px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 10px}
.thumb{border:0;background:none;padding:0;cursor:pointer;color:var(--panel-fg);text-align:center}
.thumb img{width:100%;aspect-ratio:990/1400;display:block;background:#eee;border:1px solid var(--line);border-radius:3px}
.thumb span{display:block;font-size:12px;margin-top:4px;color:#666}
.thumb.current img{outline:3px solid var(--accent);outline-offset:1px}
.thumb:focus-visible img{outline:3px solid #333}

/* 拡大 */
.zoom{position:fixed;inset:0;z-index:20;background:rgba(18,18,20,.97)}
.zoom-canvas{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.zoom-canvas.drag{cursor:grabbing}
.zoom-content{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;will-change:transform}
.zoom-content img{display:block;background:#fff;-webkit-user-drag:none;user-select:none}
.zoom-tools{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;display:flex;gap:6px}
.zoom-tools .btn{background:rgba(0,0,0,.55)}
.zoom-hint{position:absolute;bottom:calc(10px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;margin:0;font-size:12px;color:#aaa;pointer-events:none}

@media (max-width:720px){
  .btn .lbl{display:none}
  .title{font-size:14px;margin:0 4px}
  .nav{width:38px;height:70px;background:rgba(0,0,0,.18)}
  .nav.prev{left:4px}.nav.next{right:4px}
  #btnFull,#btnFirst,#btnLast{display:none}
  .counter{min-width:70px}
  .zoom-hint{display:none}
}
@media (max-width:420px){ .title{display:none} .jump{margin-left:auto} }
@media (prefers-reduced-motion:reduce){ .leaf,.slide,.leaf .face::after{transition:none} }