:root{
  /* Theme tokens */
  --fg:#111;
  --bg:#fafafa;
  --muted:#666;
  --border:#e5e7eb;
  --card:#fff;
  --accent:#0aa;
  --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
}

/* Base / reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP",sans-serif;
  -webkit-font-smoothing:antialiased;  
}
img{max-width:100%; display:block}
button,input,select{font:inherit}

/* Header */
header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--border);
  padding:10px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
header h1{font-size:16px; margin:0 8px 0 0}

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:16px}
.hidden{display:none !important}
.title{font-weight:700}
.pill{font-size:12px; color:#444}

/* Cards / grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.card{
  border:1px solid var(--border); background:var(--card); border-radius:12px; padding:12px;
  box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.06), 0 12px 30px rgba(0,0,0,.08)}
.card h3{margin:0 0 6px; font-size:16px}
.card .meta{color:#555; font-size:12px}

/* Lists */
.list{list-style:none; padding:0; margin:0}
.list li{border-bottom:1px solid var(--border); padding:10px 8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}

/* Buttons */
.btn{
  border:1px solid var(--border); background:#fff; color:#111;
  border-radius:10px; padding:6px 10px; cursor:pointer; user-select:none;
  box-shadow:0 1px 1px rgba(0,0,0,.04);
}
.btn:hover{border-color:#d8dde3}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5; pointer-events:none}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}

/* Toolbar */
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}

/* Reader stage */
.stage{display:flex; gap:12px; align-items:flex-start; justify-content:center; flex-wrap:wrap}
.stage.single .pane{width:min(100%,1024px)}
.stage.spread .pane{width:min(48%,1024px)}
.pane{display:flex; justify-content:center; align-items:center}

/* Page visuals */
.pdfCanvas, .pageImg{
  border:1px solid var(--border); border-radius:8px; background:#fff;
  box-shadow:var(--shadow);
}

/* Navigation row */
.navRow{display:flex; gap:8px; align-items:center; justify-content:center; margin:12px 0}

/* Responsive helpers */
@media (max-width: 480px){
  header{padding:8px 12px}
  .container{padding:12px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{--fg:#e9e9e9; --bg:#0b0b0c; --border:#2a2d31; --card:#121316; --muted:#9aa1a8; --accent:#06b6d4}
  header{background:#0e0f12}
  .btn{background:#15171b; color:#e9e9e9; border-color:#2a2d31}
  .card{background:#121316}
  .pdfCanvas, .pageImg{background:#0f1013}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .btn{transition:none}
}

/* Print (オプション：ページを紙に出す時に余白調整) */
@media print{
  header, .toolbar, .navRow{display:none !important}
  .container{max-width:none; padding:0}
  .stage{gap:0}
  .stage.single .pane, .stage.spread .pane{width:100%}
  .pdfCanvas, .pageImg{box-shadow:none; border:none}
}