/* ===============================
   Novel Layout（完成形）
=============================== */

/* ---------- 共通 ---------- */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;              /* 左右スクロール完全禁止 */
}

body {
  font-family: "Noto Serif JP", serif;
  color: var(--text);
  background:
    linear-gradient(to bottom, rgba(2,4,9,0.45), rgba(2,4,9,0.45)),
    url("../kabe-book.png") top center / 100% auto repeat-y fixed;
}


/* ---------- 外枠 ---------- */

.novel-wrap {
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.toc {
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}


/* ---------- 本文（核） ---------- */

.novel {
  writing-mode: vertical-rl;       /* 日本語縦書き：右 → 左 */
  text-orientation: mixed;

  /* ▼ 表示サイズ固定 */
  width: 50em;           /*  1行文字数前提 */
  /*　height: 90vh;　*/

  /* ▼ 右寄せ（日本語書籍的） */
  margin-left: auto;
  margin-right: 0;

  /* ▼ 見た目 */
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: 0.03em;

  padding: 0.5rem;

  /*overflow: hidden;                 横方向を内部で完結 */
}


/* ---------- 見出し ---------- */

.novel h1 {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  letter-spacing: 0.15em;
}

.novel h2 {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: rgba(255,255,255,0.8);
}


/* ---------- 段落 ---------- */

section.page {
  margin: 0 0 2.5rem 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
}

.novel p {
  margin: 0 0 0.1rem 0;             /* 縦書き用段落余白 */
}


/* ---------- 改ページ ---------- */

.page-break {
  margin: 3rem 0;
  text-align: center;
}

.page-break::before {
  content: "＊　＊　＊";
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.4em;
}



.novel-end {
  writing-mode: vertical-rl;
  text-orientation: mixed;

  font-size: 1rem;
  letter-spacing: 0.45em;
  color: rgba(255,255,255,0.85);

  margin: 3rem auto;
}

/* ページ中央 */
.novel-end.center {
  margin-left: auto;
  margin-right: auto;
}

/* 下詰め（縦書き＝左寄せ） */
.novel-end.bottom {
  margin-left: 0;
  margin-right: auto;
}



/* ---------- スマホ最適化 ---------- */

@media (max-width: 1100px) and (max-height: 520px) {
  .novel {
    height: 150vh;
  }
}


@media (max-width: 768px) {

  .novel-wrap {
    padding: 1.2rem 0.6rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem; 
  }

  .novel {
    height: 95vh;

    width: 45em;  /*  ← column-width ではなく width に */

    font-size: 0.98rem;
    line-height: 1.95;
    border-radius: 12px;
  }

  body {
    background-attachment: scroll;
  }
}

@media (max-width: 430px) {

  .novel-wrap {
    padding: 1.2rem 0.6rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem; 
  }

  .novel {
    width: 20em;
    line-height: 1.8;
    border-radius: 12px;
    font-size: 0.95rem;
  }
}