:root { color-scheme: dark; }

*{ box-sizing: border-box; }

body{
  margin:0;
  background: url('../bookimages/bg.jpg') repeat;
  font-family: system-ui, sans-serif;
  overflow:hidden;
}

/* ===== 上部バー ===== */
.bar{
  position: fixed;
  inset: 12px 12px auto 12px;
  z-index: 200; /* tapzonesより前 */
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(20,20,24,0.78);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.10);
  color:#eaeaf0;
}

.bar .leftgrp,
.bar .rightgrp{
  display:flex;
  gap:8px;
  align-items:center;
}

.bar .centergrp{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  min-width: 260px;
  pointer-events:none;
}

.homeLink{
  color:#eaeaf0;
  text-decoration:none;
  font-size:14px;
  padding: 6px 10px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
}
.homeLink:hover{ background: rgba(0,0,0,0.35); }

button{
  background:#22222a;
  color:#eaeaf0;
  border:1px solid rgba(255,255,255,0.12);
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
}
button:disabled{ opacity:0.45; cursor:not-allowed; }

.status{
  opacity:.9;
  font-size: 13px;
  white-space:nowrap;
}
.worktitle{
  font-size: 16px;
  font-weight: 700;
  opacity: 0.95;
  white-space: nowrap;
  color: #eaeaf0;
}

/* ===== 表示領域（引き締まった見開き） ===== */
.stage{
  position: relative;
  margin-top: 88px;                 /* barの分だけ下げる */
  height: calc(100vh - 88px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 16px 16px;
}

/* 中身の幅で収まる見開き箱 */
.spread{
  position: relative;
  z-index: 5;
  display:flex;
  align-items:stretch;
  justify-content:center;

  height:100%;
  width: fit-content;
  max-width: calc(100vw - 32px);

  background:#111118;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  overflow:hidden;

  gap:0 !important;
  column-gap:0 !important;
}

/* ページ枠 */
.page{
  position: relative;
  flex: 1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;

  height:100%;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background: transparent !important;
  border-radius:0 !important;
  overflow:hidden;
  min-width:0;
}

/* 見開き中央の割れを吸収（1px重ねる） */
#leftBox{
  margin-right:-1px !important;
}

/* 画像：高さ100%で収める */
img.pageimg{
  height: 100%;
  width: auto;
  object-fit: contain;

  display:block;
  user-select:none;
  -webkit-user-drag:none;
  background: transparent;
}

/* 空白ページ */
.page.blank{ background:#000; }

/* 綴じ側に寄せる（中央の不自然な余白対策） */
#leftBox{ justify-content: flex-end !important; }
#rightBox{ justify-content: flex-start !important; }
#leftBox img.pageimg{ object-position: right center !important; }
#rightBox img.pageimg{ object-position: left center !important; }

/* ===== 単ページ（スマホなど） ===== */
.single #rightBox{ display:none; }
.single #leftBox{ flex: 1 1 0; }

/* ===== クリックゾーン（ページ送り） ===== */
.tapzones{
  position:fixed;
  inset:0;
  z-index: 50;        /* spread(5)より前、bar(200)より後 */
  display:flex;
}
.tapzones > div{ flex:1 1 0; }

/* ===== サムネドロワー ===== */
.drawer{
  position: fixed;
  top: 64px;
  right: 12px;
  bottom: 12px;
  width: min(360px, calc(100vw - 24px));
  z-index: 9999;
  border-radius: 16px;
  background: rgba(18,18,22,0.92);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  transform: translateX(calc(100% + 12px));
  transition: transform 180ms ease;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.drawer.open{ transform: translateX(0); }

.drawer .head{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.drawer .grid{
  padding:10px;
  overflow:auto;
  display:grid;
  direction: rtl; /* 右→左 */
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}

.thumb{
  background:#0f0f14;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio: 2 / 3;
  position:relative;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.thumb .n{
  position:absolute;
  left:6px;
  bottom:6px;
  font-size:11px;
  padding:2px 6px;
  border-radius:999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.16);
  color:#fff;
}
.thumb.active{
  outline:2px solid rgba(255,255,255,0.65);
}

/* ===== 画面が狭いときの余白調整 ===== */
@media (max-width: 820px){
  .stage{
    margin-top: 64px;
    height: calc(100vh - 64px);
  }
}