body {
  margin: 0; /* ページ全体の余白をなくす（デフォルトの8pxなどを消す） */
  font-family: system-ui, sans-serif; /* OS標準の読みやすいフォントを使う */
  background:#f7f7f7; /* 背景色を薄いグレーに */
  color:#333; /* 文字色を濃いグレー（黒よりやわらかい） */
}

/* ヘッダー内の配置を横並びに */
header {
  display: flex;
  align-items: center;     /* 縦方向中央 */
  gap: 5px;               /* ボタンとタイトルの間隔 */
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #ddd;
}



.back-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  padding: 8px 12px;
  margin-right: 10px;
  border-radius: 6px;
  transition: background 0.2s;
}

.back-btn:hover {
  background: #eee;
}


h1 {
  margin: 0; /* 見出しのデフォルト余白を消す */
  font-size: 20px; /* 文字サイズを20pxに */
}

main {
  padding: 20px; /* main全体の余白 */
  display:flex; /* Flexboxで縦方向レイアウトを作る */
  flex-direction:column; /* 縦並び（column） */
  align-items:center; /* 子要素を中央揃え */
  gap:12px; /* 要素同士の間隔を12pxに */
}

#comic-page {
  max-width: min(100%, 1000px); /* 幅は画面幅か1000pxの小さい方に制限 */
  max-height: 80vh; /* 高さを画面の80%までに制限（スクロール防止） */
  object-fit: contain; /* 画像の比率を保って全体を収める */
  display:block; /* インライン要素ではなくブロックに */
}

.controls {
  display: flex;
  justify-content: space-between; /* 左右に配置 */
  width: min(100%, 1000px);
  margin: 0 auto;
}

button {
  padding: 8px 14px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  border-radius: 8px;
}

button:disabled {
  opacity: .5;
  cursor: not-allowed;
}


.page-indicator {
  min-width: 6ch; /* 最小幅を文字6文字分確保（例: "10 / 30"） */
  text-align:center; /* 中央揃え */
  color:#666; /* 少し薄いグレーの文字色 */
}

#prev, #next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%); /* 垂直中央 */
  z-index: 1000;               /* 画像より前に出す */
  padding: 10px 14px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

#prev { left: 12px; }   /* 左ボタン（あなたの運用では「次」） */
#next { right: 12px; }  /* 右ボタン（あなたの運用では「前」） */

#prev:disabled,
#next:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* スマホで少し内側に寄せる */
@media (max-width: 600px) {
  #prev { left: 6px; }
  #next { right: 6px; }
}