/* ==========================================================================
   CHAPTER NAV（章ナビ）
   Biography 1〜4 を行き来するためのナビゲーション。
   - PC/タブレット: 画面右端中央の「耳（縦書きタブ）」→ クリックでパネルが左へスライド
   - スマホ(768px以下): 画面下部中央の横長バー → タップで上に章リストがスライドアップ
     ※ 右上のサイト共通ハンバーガーと干渉しない位置に置く
   ページ内アンカー(fixed-toc)を廃止したため、本文は全幅を使える。
   ========================================================================== */

.chapter-nav {
  --cnav-accent: var(--color-accent, #ee8f35);
  --cnav-accent-dark: var(--color-accent-dark, #c46e20);
  /* 半透明＋blurの「ガラス」感を避け、ほぼ不透明のソリッドな面にする */
  --cnav-bg: #fbfaf9;
  --cnav-surface: #ffffff;          /* リスト項目などの前面 */
  --cnav-text: var(--color-text, #333);
  --cnav-muted: var(--color-text-muted, #666);
  --cnav-border: var(--color-border-subtle, #e4dedb);
  --cnav-hairline: rgba(0, 0, 0, 0.08);  /* 繊細な境界線 */
  --cnav-ease: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed;
  z-index: 70; /* 本文より上・サイト共通ヘッダーより下 */
}

/* --- 画面全体を覆う透明のクリック捕捉層（パネル外クリックで閉じる） --- */
.chapter-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  visibility: hidden;
  /* 閉じている間はクリックを一切奪わない（本文やページ下部リンクを操作可能に保つ） */
  pointer-events: none;
  transition: opacity var(--cnav-ease), visibility var(--cnav-ease), background-color var(--cnav-ease);
  z-index: 69;
}

.chapter-nav.is-open ~ .chapter-nav-overlay,
.chapter-nav-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;   /* 開いている間だけ「外側クリックで閉じる」を有効化 */
  background: rgba(0, 0, 0, 0.18);
}

/* ==========================================================================
   PC / タブレット（769px以上）: 右端中央の縦書きタブ
   ========================================================================== */

@media (min-width: 769px) {
  /* ナビ全体を「耳＋パネル」の横並びにし、開くと全体が左へスライドする
     （フォルダのタグのように、耳がパネルと一緒に動く） */
  .chapter-nav {
    --cnav-panel-w: min(340px, 80vw);
    top: 50%;
    /* 閉: パネル幅ぶん右へ逃がし、耳だけが画面右端に出る */
    right: calc(var(--cnav-panel-w) * -1);
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: translateY(-50%);
    transition: right var(--cnav-ease);
  }

  /* 開: 全体が左へ動き、パネルが姿を現す（耳も一緒に動く＝フォルダのタグ） */
  .chapter-nav.is-open {
    right: 0;
  }

  /* --- 耳（トグル）: 縦書き1行。矢印を先頭に置く --- */
  .chapter-nav-toggle {
    appearance: none;
    border: 1px solid var(--cnav-hairline);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--cnav-bg);
    color: var(--cnav-text);
    cursor: pointer;
    padding: 1.1rem 0.7rem;
    display: flex;
    /* writing-mode: vertical-rl 環境では row が「上→下」の並びになる。
       これで「◀（上） → ラベル（下）」の1列に揃う。 */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;   /* ◀ とラベルの間隔 */
    box-shadow: -1px 0 0 var(--cnav-hairline);
    transition: background-color var(--cnav-ease), color var(--cnav-ease), box-shadow var(--cnav-ease);
    /* 縦書き（1行） */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    order: 1;                 /* 耳を左端に（パネルは右へ伸びる） */
    flex: 0 0 auto;
  }

  .chapter-nav-toggle:hover,
  .chapter-nav-toggle:focus-visible {
    background: #fff;
    color: var(--cnav-accent-dark);
    box-shadow: -1px 0 0 var(--cnav-hairline);
  }

  .chapter-nav-toggle:focus-visible {
    outline: 2px solid var(--cnav-accent);
    outline-offset: 2px;
  }

  .chapter-nav-toggle-label {
    /* 「Biography N　邦題」— 英字と日本語が混在するため和欧混植のフォント指定 */
    font-family: var(--font-en, 'Cinzel', serif), var(--font-jp, 'Noto Serif JP', serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    white-space: nowrap;
    order: 2;
  }

  /* 開閉を示す矢印: 閉じているときは「◀」（左に開くことを示す） */
  .chapter-nav-toggle-arrow {
    writing-mode: horizontal-tb;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--cnav-accent-dark);
    transition: transform var(--cnav-ease);
  }

  .chapter-nav-toggle-arrow::before {
    content: '\25C0';  /* ◀ */
  }

  /* 開いたら反転して「▶」（右に閉じる） */
  .chapter-nav.is-open .chapter-nav-toggle-arrow {
    transform: rotate(180deg);
  }

  /* --- パネル: 耳の左隣に並ぶ（通常フロー）。
     ナビ全体の transform で一緒にスライドする。 --- */
  .chapter-nav-panel {
    order: 2;
    width: var(--cnav-panel-w);
    max-height: min(78vh, 620px);
    overflow-y: auto;
    background: var(--cnav-bg);
    border: 1px solid var(--cnav-hairline);
    border-left: 0;          /* 耳との境目は耳側の線に任せる */
    border-radius: 0;
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.08);
    padding: 1.6rem 1.4rem;
    /* 閉じている間は画面外（右）にあるため見えない。
       誤クリック防止のため操作だけ無効化しておく。 */
    pointer-events: none;
  }

  .chapter-nav.is-open .chapter-nav-panel {
    pointer-events: auto;
  }

  /* 耳（幅約31px）が本文に重ならないための余白は、
     songlist / biography と揃えた .chapter-body の左右パディング(110px)で
     十分に確保できるため、ここでの追加指定は行わない。 */
}

/* ==========================================================================
   スマホ（768px以下）: 下部中央の横長バー → タップで上にスライドアップ
   右上のハンバーガーと干渉しない
   ========================================================================== */

@media (max-width: 768px) {
  /* ナビ全体（パネル＋バー）を縦に積み、開くと全体が上へスライドする。
     閉: 全体をパネル高ぶん下げる → バーだけが画面下端に見える
     開: 全体が上がる → バーはパネルの下辺に付いたまま一緒に動く（PCの耳と同じ） */
  .chapter-nav {
    /* 全幅で画面下端に密着させる（左右・下の余白は設けない）。
       スクロールバーの有無で見え方が変わらないよう left/width で指定する。 */
    left: 0;
    right: auto;
    width: 100%;
    --cnav-sp-gap: env(safe-area-inset-bottom, 0px);
    /* 閉: パネル高ぶん下へ逃がす（余白の分だけ手前で止める） */
    bottom: calc(var(--cnav-sp-gap) - var(--cnav-panel-h, 0px));
    display: flex;
    /* バーを上・パネルを下に積む。全体を下げるとバーだけが画面下端に残り、
       開くと全体が上がってバーがパネルの上辺に付いたまま一緒に動く。 */
    flex-direction: column;
    align-items: stretch;
    transition: bottom var(--cnav-ease);
  }

  .chapter-nav.is-open {
    bottom: var(--cnav-sp-gap);
  }

  /* --- Music Context Bar との干渉回避 ---
     章ナビのバー（約56px）の上にプレイヤーを逃がす。
     章ナビを開いたときは、パネルに隠れないようさらに上へ持ち上げる。 */
  .music-player {
    /* 章ナビのバー（約52px＋セーフエリア）の上に逃がす */
    bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 12px);
    transition:
      opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      bottom var(--cnav-ease),
      box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* 章ナビが開いている間はプレイヤーを画面下外へ退避（操作の邪魔をしない） */
  body.chapter-nav-open .music-player {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 24px);
  }

  .chapter-nav-toggle {
    appearance: none;
    border: 0;
    border-top: 1px solid var(--cnav-border);
    /* 全幅で下端に密着するため、角丸は上側のみ */
    border-radius: 12px 12px 0 0;
    background: var(--cnav-bg);
    color: var(--cnav-text);
    cursor: pointer;
    width: 100%;
    padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    box-shadow: 0 -1px 0 var(--cnav-hairline);
    writing-mode: horizontal-tb;
  }

  /* 画面下端に密着するので、角丸は上側のみ（閉時も開時も同じ） */

  .chapter-nav-toggle-label {
    /* PCと同じ明朝系の和欧混植。未指定だとbutton既定のArialになる。 */
    font-family: var(--font-en, 'Cinzel', serif), var(--font-jp, 'Noto Serif JP', serif);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: 1;
  }

  .chapter-nav-toggle-arrow {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--cnav-accent-dark);
    transition: transform var(--cnav-ease);
    flex: 0 0 auto;
    order: 3;   /* SPでは右端に置く */
  }

  /* SPは上へ開くので「▲」 */
  .chapter-nav-toggle-arrow::before {
    content: '\25B2';
  }

  .chapter-nav.is-open .chapter-nav-toggle-arrow {
    transform: rotate(180deg);
  }

  /* パネルはナビ全体の transform で一緒に動くため、
     ここでは自前のスライドを持たない。 */
  .chapter-nav-panel {
    order: 2;               /* バーより下（畳むとここが画面外に出る） */
    background: var(--cnav-bg);
    border: 0;
    border-top: 1px solid var(--cnav-border);   /* バーとの境目 */
    /* 画面高からバー（約52px）とサイトヘッダー（約60px）分を除いた残りまで使う。
       小型端末（高さ667px等）でも全リンクが収まるようにする。 */
    max-height: calc(100dvh - 52px - 60px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    padding: 0.9rem 1.1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.07);
    /* 閉じている間は画面外にあるので、操作だけ無効化しておく */
    pointer-events: none;
  }

  .chapter-nav.is-open .chapter-nav-panel {
    pointer-events: auto;
  }

  .chapter-nav-toggle {
    order: 1;               /* パネルより上＝閉時に画面下端へ残る */
  }

  /* 小型端末でも全項目が収まるよう、パネル内の余白を詰める */
  .chapter-nav-title {
    margin-bottom: 0.6rem;
  }

  .chapter-nav-list {
    gap: 0.4rem;
  }

  .chapter-nav-link {
    padding: 0.65rem 0.9rem;
  }

  .chapter-nav-jp {
    margin-top: 0.2rem;
  }
}

/* ==========================================================================
   パネル内の共通スタイル（章リスト）
   ========================================================================== */

.chapter-nav-title {
  font-family: var(--font-en, 'Cinzel', serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--cnav-accent-dark);
  margin: 0 0 1rem;
  text-align: center;
  writing-mode: horizontal-tb;
}

.chapter-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  writing-mode: horizontal-tb;
}

.chapter-nav-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--cnav-text);
  padding: 0.9rem 0.9rem 0.9rem 1rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition: background-color var(--cnav-ease), color var(--cnav-ease);
}

.chapter-nav-link:hover,
.chapter-nav-link:focus-visible {
  background: rgba(0, 0, 0, 0.035);
}

.chapter-nav-link:focus-visible {
  outline: 2px solid var(--cnav-accent);
  outline-offset: 2px;
}

/* 現在表示中の章 */
.chapter-nav-item.is-current .chapter-nav-link {
  background: rgba(238, 143, 53, 0.06);
  cursor: default;
}

/* 現在地は左端の細いアクセントバーで示す（塗りつぶしより軽い） */
.chapter-nav-item.is-current .chapter-nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 2px;
  border-radius: 2px;
  background: var(--cnav-accent);
}

.chapter-nav-item.is-current .chapter-nav-link:hover {
  transform: none;
}

.chapter-nav-en {
  display: block;
  font-family: var(--font-en, 'Cinzel', serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--cnav-muted);
  line-height: 1.3;
}

.chapter-nav-period {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--cnav-muted);
  margin-top: 0.15rem;
}

.chapter-nav-jp {
  display: block;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* 現在地バッジ */
.chapter-nav-current-badge {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cnav-accent-dark);
  background: transparent;
  border: 0;
  padding: 0 0 0 0.6em;
  margin-left: 0.4em;
  vertical-align: middle;
}

/* 「Biographyトップへ」だけ少し控えめに */
/* 「Biographyトップへ」は章リストと区切って、控えめなテキストリンクに */
.chapter-nav-item--top {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--cnav-hairline);
}

.chapter-nav-item--top .chapter-nav-link {
  background: transparent;
  text-align: center;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.chapter-nav-item--top .chapter-nav-jp {
  font-size: 1.25rem;
  margin-top: 0;
  color: var(--cnav-muted);
}

/* 動きを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .chapter-nav-panel,
  .chapter-nav-toggle,
  .chapter-nav-toggle-arrow,
  .chapter-nav-link,
  .chapter-nav-overlay {
    transition: none;
  }
}