:root {
  --novel-slider-h: 70px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #f7f3ea;
  color: #222;
}

#novel-reader {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#novel-text {
  /* column-widthによる段組みはvertical-rlとの相性が実装によって不安定なため使わない。
     右端を起点に、幅は内容に応じたmax-contentで自然に折り返させ(通常の縦書き行送り)、
     JS側でoffsetWidthを見て#novel-readerの表示幅に収まるようフォントサイズを調整する */
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: max-content;
  box-sizing: border-box;
  padding: 5vh 4vw;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 2;
  letter-spacing: 0.08em;
}

#novel-text p {
  margin: 0;
  text-indent: 1em;
  white-space: pre-wrap;
}

/* 空行(場面転換の間隔など)も1カラムぶんの空白として表示する */
#novel-text p:empty::before {
  content: '\00a0';
}

/* 左右クリックでのページ送り領域(下部のスライダー分は除く) */
#novel-click-left,
#novel-click-right {
  position: fixed;
  top: 0;
  bottom: var(--novel-slider-h);
  width: 50%;
  z-index: 5;
}

#novel-click-left {
  left: 0;
  /* 太い左矢印 → クリックで次のページへ */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Ctext%20y%3D%2226%22%20font-size%3D%2228%22%3E%E2%AC%85%3C%2Ftext%3E%3C%2Fsvg%3E") 6 20, pointer;
}

#novel-click-right {
  right: 0;
  /* 太い右矢印 → クリックで前のページへ */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%3E%3Ctext%20y%3D%2226%22%20font-size%3D%2228%22%3E%E2%9E%A1%3C%2Ftext%3E%3C%2Fsvg%3E") 26 20, pointer;
}

/* 画面下部にカーソルを乗せると現れるページ送りスライダー */
#novel-slider-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--novel-slider-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-bottom: 10px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 10;
}

#novel-slider-wrap:hover,
#novel-slider-wrap:focus-within {
  opacity: 1;
}

#novel-slider {
  width: min(80vw, 600px);
  /* 縦書き(右→左)の進行方向に合わせて左右を反転する */
  transform: scaleX(-1);
}

#novel-page-num {
  font-size: 0.8em;
  color: #555;
  background: rgba(255, 255, 255, 0.75);
  padding: 0.1em 0.7em;
  border-radius: 1em;
}

/* 左下・右下に常時表示するページ番号(見開きの左右を1ページずつと数えた本のページ数)。
   本文と地続きに見えるよう、背景なし・本文と同じフォントサイズにする */
#novel-page-left,
#novel-page-right {
  position: fixed;
  bottom: 10px;
  z-index: 6;
  pointer-events: none; /* ホバー領域・クリック領域の判定を邪魔しない */
}

#novel-page-left {
  left: 12px;
}

#novel-page-right {
  right: 12px;
}