:root{
  --vw: 100vw;
  --vh: 100vh;
  --bg:#0e1116;
  --bg-2:#151a21;
  --chrome:rgba(16,20,26,.88);
  --line:rgba(255,255,255,.10);
  --fg:#e9edf3;
  --fg-dim:#9aa6b6;
  --accent:#4da3ff;
  --accent-ink:#04121f;
  --bar-h:48px;
  --pad-t:0px; --pad-r:0px; --pad-b:0px; --pad-l:0px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg)}
body{
  color:var(--fg);
  font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",Meiryo,sans-serif;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
  touch-action:manipulation;
}

/* 疑似横表示: UI全体を回転させる（スマホが縦固定でも横向きレイアウトになる） */
#app{
  position:fixed; top:0; left:0;
  width:var(--vw); height:var(--vh);
  transform-origin:0 0;
  display:flex; flex-direction:column;
  background:var(--bg);
  overflow:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  padding:var(--pad-t) var(--pad-r) var(--pad-b) var(--pad-l);
}
body[data-rot="90"]  #app{ width:var(--vh); height:var(--vw); transform:translateX(var(--vw)) rotate(90deg); }
body[data-rot="270"] #app{ width:var(--vh); height:var(--vw); transform:translateY(var(--vh)) rotate(270deg); }

/* バー */
.bar{
  flex:0 0 auto;
  min-height:var(--bar-h);
  display:flex; align-items:center; gap:6px;
  padding:4px 8px;
  background:var(--chrome);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  z-index:20;
  transition:opacity .22s, transform .22s;
}
#toolbar{border-bottom:1px solid var(--line)}
#footbar{border-top:1px solid var(--line)}
.bar-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.bar-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.sep{width:1px;height:22px;background:var(--line);margin:0 2px}

/* 非表示時はレイアウトから外し、表示領域（＝スライド）を最大化する */
body[data-chrome="off"] .bar{position:absolute;left:0;right:0;opacity:0;pointer-events:none}
body[data-chrome="off"] #toolbar{top:0;transform:translateY(-100%)}
body[data-chrome="off"] #footbar{bottom:0;transform:translateY(100%)}

.title{
  margin:0; font-size:13px; font-weight:600; color:var(--fg-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ボタン */
.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  min-width:38px; height:36px; padding:0 9px;
  border:1px solid var(--line); border-radius:9px;
  background:rgba(255,255,255,.05); color:var(--fg);
  font:inherit; font-size:12px; font-weight:600;
  text-decoration:none; cursor:pointer;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:rgba(255,255,255,.11)}
.btn:active{background:rgba(255,255,255,.18)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn .ico{font-size:16px;line-height:1}
.btn .lbl{font-size:11px;letter-spacing:.02em}
.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.btn.primary:hover{background:#68b2ff}
.btn.toggle{color:var(--fg-dim)}
.btn.toggle.is-on{background:rgba(77,163,255,.18);border-color:rgba(77,163,255,.5);color:#bcdcff}
.btn[disabled]{opacity:.35;pointer-events:none}
/* 幅・高さの狭さは「回転後のUI幅」で判定する（JSが data-narrow / data-compact を付与） */
body[data-narrow="1"] .btn .lbl{display:none}
/* 向きと表示倍率のボタンは文字が意味を持つため、狭い画面でもラベルを残す */
body[data-narrow="1"] #btn-orient .lbl,
body[data-narrow="1"] #btn-fit .lbl{display:inline}
body[data-narrow="1"] .title{display:none}

body[data-compact="1"]{--bar-h:38px}
body[data-compact="1"] .bar{padding:3px 6px;gap:4px}
body[data-compact="1"] .btn{height:30px;min-width:32px;padding:0 7px;border-radius:7px}
body[data-compact="1"] .btn .ico{font-size:14px}
body[data-compact="1"] .page-input{height:26px;width:44px}
body[data-compact="1"] .slider{height:26px}
body[data-compact="1"] .title{display:none}

/* 表示領域 */
#stage{
  position:relative; flex:1 1 auto; min-height:0;
  overflow:hidden;
  display:flex;
  background:radial-gradient(120% 100% at 50% 0%, #1a212b 0%, var(--bg) 70%);
  touch-action:none;
  cursor:grab;
}
#stage.is-panning{cursor:grabbing}
#holder{
  position:relative; flex:0 0 auto; margin:auto;
  box-shadow:0 10px 40px rgba(0,0,0,.55);
  background:#fff;
  line-height:0;
}
#page-canvas{display:block;width:100%;height:100%;opacity:1;transition:opacity .12s}
#page-canvas.is-loading{opacity:.45}

/* 画面端のページ送りボタン（マウス環境向け） */
.nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:64px; border:none; border-radius:10px;
  background:rgba(10,14,20,.5); color:#fff; font-size:30px; line-height:1;
  cursor:pointer; opacity:0; transition:opacity .2s, background .2s; z-index:10;
  -webkit-tap-highlight-color:transparent;
}
.nav:hover{background:rgba(10,14,20,.8)}
.nav-prev{left:8px} .nav-next{right:8px}
#stage:hover .nav{opacity:.85}
.nav[disabled]{opacity:0 !important;pointer-events:none}
body[data-chrome="off"] .nav{opacity:0 !important}
@media (hover:none){ .nav{display:none} }

.badge{
  position:absolute; right:10px; bottom:10px; z-index:12;
  padding:5px 9px; border-radius:8px;
  background:rgba(10,14,20,.78); color:#fff; font-size:12px; font-weight:700;
  opacity:0; transition:opacity .25s; pointer-events:none;
}
.badge.show{opacity:1}

/* ページャ */
.pager{display:flex;align-items:center;gap:4px;flex:0 0 auto;color:var(--fg-dim);font-size:12px;font-weight:600}
.page-input{
  width:52px; height:32px; text-align:center;
  border:1px solid var(--line); border-radius:8px;
  background:rgba(255,255,255,.06); color:var(--fg);
  font:inherit; font-weight:700;
  -moz-appearance:textfield;
}
.page-input::-webkit-outer-spin-button,.page-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#page-total{min-width:22px;text-align:left;color:var(--fg)}

.slider{
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:60px; height:32px; background:transparent; margin:0;
}
.slider::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:rgba(255,255,255,.18)}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; margin-top:-7px;
  border-radius:50%; background:var(--accent); border:2px solid #0e1116;
}
.slider::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.18)}
.slider::-moz-range-thumb{width:18px;height:18px;border:2px solid #0e1116;border-radius:50%;background:var(--accent)}

/* トースト / ローダー */
.toast{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%);
  z-index:60; max-width:82%;
  padding:9px 14px; border-radius:10px;
  background:rgba(20,26,34,.95); border:1px solid var(--line);
  color:var(--fg); font-size:12px; text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:pop .22s ease-out;
}
.toast[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1}}

.loader{
  position:absolute; inset:0; z-index:70;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--bg); color:var(--fg-dim); font-size:13px;
  transition:opacity .3s;
}
.loader.is-done{opacity:0;pointer-events:none}
.spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.14); border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader .err{color:#ff9d9d;max-width:80%;text-align:center;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  #app,.bar,.badge,.loader,#page-canvas{transition:none}
  .toast{animation:none}
}