@charset "utf-8";
/* 既存ページの見た目 */
.my-page { background: #ccc; color:#fff; display:flex; align-items:center; justify-content:center; font: 700 32px/1.2 system-ui, sans-serif; }
.p-right { border-left: 0;  box-shadow: inset 7px 0 30px -7px rgba(0,0,0,.5); }
.p-left  { border-right: 0; box-shadow: inset -7px 0 30px -7px rgba(0,0,0,.5); }

/* 本体ラッパー（通常表示） */
.book-wrap {position: relative;width: 800px;max-width: 100%;margin: 80px auto -10px;overflow: hidden;border: #d9d9d9 1px solid;background: rgb(0 0 0 / 4%);}
#book { margin: 0 auto; }
			#book img{
				width: 100%;
				height: auto;
			}

/* 右下ページカウンタ */
.page-counter {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.5); color:#fff; font: 600 12px/1 system-ui, sans-serif;
  padding: 6px 8px; border-radius: 6px; letter-spacing: .04em;
  user-select: none; pointer-events: none;
}

/* 右上 最大化ボタン */
.maximize-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  line-height: 1;
  appearance: none;
  border: 0;
  border-radius: 0.2em;
  padding: 0.5em;
  font: 600 12px/1 system-ui, sans-serif;
  background: rgba(0,0,0,0.5);
  color:#fff;
  cursor: pointer;
  transition: filter .15s ease;
  z-index:2;
  font-size: 1.4em;
  line-height: 0.9;
  padding: 0.4em;
  transition:background .2s;
}
.maximize-btn:hover {filter: brightness(1.2);background: rgba(0,0,0,0.75);}

/* モーダル全体 */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal.open { display: flex; }
.modal__inner {
  position: relative;
  width: min(96vw, 1600px);
  height: min(100vh, 100vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal .page-counter { position: absolute; right: 12px; bottom: 12px; }
.modal .maximize-btn {position: absolute;right: 12px;top: 12px;font-size: 1.9em;font-weight: 100;line-height: 0.8;}

/* PageFlip が伸縮できるように（stretch モード時） */
.stretch-host {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
}