:root{ --gap:12px; --radius:14px; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:#111; color:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial; }

.app{ height:100dvh; display:grid; grid-template-rows:auto 1fr auto; }

.topbar{
  position: relative; z-index: 60;
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top));
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35); backdrop-filter:blur(10px);
}
.counter{ font-variant-numeric:tabular-nums; opacity:.9; font-size:16px; }
.spacer{ width:56px; height:1px; }
.iconBtn{
  min-height:44px; min-width:44px;
  padding:10px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10); color:#fff;
  font-size:15px; line-height:1;
}

.main{ padding:12px; overflow:hidden; position:relative; }

/* viewportは画面を最大限使う（v7.4系の方式） */
.viewport{
  position:absolute;
  left:12px; right:12px;
  top:12px; bottom:12px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  touch-action: pan-x pan-y;
}
.viewport.is-zoomed{ overflow:auto; align-items:flex-start; justify-content:flex-start; }

.stage{ position:relative; width:var(--stageW, auto); height:var(--stageH, auto); }

/* bookはabsoluteでレイアウト影響を受けない（DPRで内部サイズが大きくてもOK） */
.book{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  will-change: transform;
  touch-action: manipulation;
}

.hint{
  position:absolute;
  left:0; right:0;
  bottom:12px;
  padding-bottom:calc(0px + env(safe-area-inset-bottom));
  font-size:12px; opacity:.75; text-align:center; user-select:none;
  pointer-events:none;
}

.bottombar{
  position: relative; z-index: 60;
  display:flex; justify-content:space-between; gap:var(--gap);
  padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35); backdrop-filter:blur(10px);
}
.navBtn{
  min-height:52px;
  flex:1; padding:14px 16px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.10); color:#fff; font-size:18px;
}

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:9999; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }

.sheet{
  position:absolute; left:0; right:0; bottom:0; max-height:78dvh;
  background:rgba(20,20,20,.95);
  border-top-left-radius:18px; border-top-right-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  display:flex; flex-direction:column;
}
.sheet__header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  padding:12px; border-bottom:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
.sheet__title{ font-weight:700; }

.tocList{
  flex:1 1 auto; min-height:0;
  overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding: 10px 12px 14px;
  display:flex; flex-direction: column; gap: 8px;
  touch-action: pan-y;
}
.tocItem{
  min-height:56px;
  display:flex; align-items:center; justify-content: space-between;
  gap: 12px; padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255);
}
.tocItem__left{ display:flex; flex-direction: column; gap: 4px; min-width: 0; }
.tocItem__no{ font-size: 12px; opacity: .75; }
.tocItem__title{
  font-size: 15px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tocItem__go{
  flex: 0 0 auto;
  min-height:36px;
  padding: 10px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(0,0,0,.18);
  color:#fff; font-size: 12px;
}