/* 目次とフロートボタン。版画の輪郭線と硬いズレ影に揃える。 */

/* ══ ページ内の目次 ══════════════════════════ */
.kmz-toc-box {
  border: 2.5px solid var(--ink);
  background: var(--card);
  box-shadow: var(--sh);
  margin: 0 0 2rem;
}
.kmz-toc-title {
  margin: 0; padding: .5rem .8rem;
  background: var(--ink); color: var(--card);
  font-size: .82rem; font-weight: 800; letter-spacing: .06em;
}
.kmz-toc-list {
  margin: 0; padding: .8rem 1rem .9rem 2.2rem;
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .86rem; font-weight: 800;
  counter-reset: kmz-toc;
}
.kmz-toc-list > li { counter-increment: kmz-toc; }
.kmz-toc-list a { color: var(--ink); text-decoration: none; }
.kmz-toc-list a:hover { color: var(--jp); text-decoration: underline; }

.kmz-toc-sub {
  margin: .25rem 0 .5rem; padding: 0 0 0 1rem;
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .2rem .7rem;
  font-size: .74rem; font-weight: 700;
}
.kmz-toc-sub:empty { display: none; }
.kmz-toc-sub a { color: var(--ink-mid); }
.kmz-toc-sub li { position: relative; padding-left: .6rem; }
.kmz-toc-sub li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .28rem; height: .28rem; background: var(--rule);
}

/* ── 畳んだ状態。6件目から先と、小見出しを隠す ──
   JavaScript が動かない環境では畳まれないので、全部そのまま読める。 */
.kmz-toc-box.is-collapsed .kmz-toc-list > li:nth-child(n+6) { display: none; }
.kmz-toc-box.is-collapsed .kmz-toc-sub { display: none; }
.kmz-toc-box.is-collapsed .kmz-toc-list { padding-bottom: .3rem; }

.kmz-toc-more {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; border: 0; border-top: 2.5px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: .78rem; font-weight: 800;
  padding: .5rem; cursor: pointer;
}
.kmz-toc-more:hover { background: var(--ink); color: var(--card); }
.kmz-toc-more[hidden] { display: none; }

/* 開閉の向きを示す三角 */
.kmz-toc-more-mark {
  width: 0; height: 0;
  border-left: .34rem solid transparent;
  border-right: .34rem solid transparent;
  border-top: .4rem solid currentColor;
  transition: transform .12s;
}
.kmz-toc-more[aria-expanded="true"] .kmz-toc-more-mark { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .kmz-toc-more-mark { transition: none; } }

/* 見出しへ飛んだとき、固定要素の下に隠れないようにする。
   上のタブが出ているときは、その高さのぶんだけ余分に空ける。
   --kmz-tabs-h はタブを出したときに JavaScript が入れる。 */
[id^="sec"], [id^="ch"] { scroll-margin-top: calc(1rem + var(--kmz-tabs-h, 0px)); }

/* ══ 上に貼りつくタブ ════════════════════════
   右下の「もくじ」は押して開く二段構え。それとは別に、
   読者がいちばん見たい2〜3か所だけを、押さずに見える形で出す。

   最初は画面の外へ逃がしておき、少しスクロールしたら降りてくる。
   ページの頭ではヘッダーと目次が見えているので、そこでは要らない。 */
.kmz-tabs {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  background: var(--card);
  border-bottom: 2.5px solid var(--ink);
  box-shadow: 0 3px 0 rgba(25, 26, 31, .18);
  transform: translateY(-101%);
  transition: transform .18s ease-out;
}
.kmz-tabs.is-on { transform: none; }
.kmz-tabs-in {
  max-width: 68rem; margin: 0 auto;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
}
.kmz-tab {
  display: block; padding: .72rem .3rem; text-align: center;
  font-size: .82rem; font-weight: 800; line-height: 1.3;
  color: var(--ink); text-decoration: none;
  border-right: 2.5px solid var(--ink);
}
.kmz-tab:last-child { border-right: 0; }
.kmz-tab:hover { background: var(--paper); }
/* いま読んでいる節。クラス2つで (0,2,0)。上の .kmz-tab (0,1,0) に勝たせる */
.kmz-tab.is-here {
  background: var(--jp);
  color: #FFFDF7;
  box-shadow: inset 0 -4px 0 var(--ink);
}
@media (max-width: 26rem) {
  .kmz-tab { font-size: .76rem; padding: .66rem .2rem; }
}
@media (prefers-reduced-motion: reduce) { .kmz-tabs { transition: none; } }

/* ══ フロートボタン ══════════════════════════ */
.kmz-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
.kmz-float-btn {
  display: flex; align-items: center; gap: .45rem;
  border: 2.5px solid var(--ink); background: var(--jp); color: #FFFDF7;
  box-shadow: var(--sh); cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 800;
  padding: .5rem .8rem;
  transition: box-shadow .1s, transform .1s;
}
.kmz-float-btn:hover { box-shadow: var(--sh-in); transform: translate(2px, 2px); }
.kmz-float-icon { display: flex; flex-direction: column; gap: 3px; width: .9rem; }
.kmz-float-icon span { display: block; height: 2.5px; background: #FFFDF7; }
.kmz-float-icon span:nth-child(2) { width: 70%; }

.kmz-float-panel {
  width: 17rem; max-width: calc(100vw - 2rem);
  max-height: min(70vh, 34rem); overflow-y: auto;
  border: 2.5px solid var(--ink); background: var(--card);
  box-shadow: var(--sh);
  order: -1;
}
.kmz-float-panel[hidden] { display: none; }

.kmz-float-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink); color: var(--card);
  padding: .4rem .7rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em;
}
.kmz-float-head + .kmz-float-head { position: static; }
.kmz-float-close {
  background: none; border: 0; color: var(--card);
  font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .2rem;
  font-family: inherit;
}

.kmz-float-toc {
  margin: 0; padding: .6rem .8rem .7rem 2rem;
  display: flex; flex-direction: column; gap: .28rem;
  font-size: .78rem; font-weight: 800;
}
.kmz-float-toc a { color: var(--ink); text-decoration: none; }
.kmz-float-toc a:hover { color: var(--jp); }

.kmz-float-links {
  margin: 0; padding: .6rem .7rem; list-style: none;
  display: flex; flex-direction: column; gap: .28rem;
}
.kmz-float-links a {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 800; color: var(--ink); text-decoration: none;
  padding: .18rem .1rem;
}
.kmz-float-links a:hover { color: var(--jp); }
.kmz-float-links a[aria-current="page"] { color: var(--jp); }
.kmz-float-links i { width: .55rem; height: .55rem; border: 1.5px solid var(--ink); flex: none; }
.kmz-float-links em {
  font-style: normal; font-size: .62rem; color: var(--ink-dim); margin-left: auto;
}

.kmz-float-top {
  display: block; width: 100%;
  border: 0; border-top: 2.5px solid var(--ink);
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: .76rem; font-weight: 800;
  padding: .5rem; cursor: pointer;
}
.kmz-float-top:hover { background: var(--ink); color: var(--card); }

@media (max-width: 34rem) {
  .kmz-float { right: .7rem; bottom: .7rem; }
  .kmz-float-label { display: none; }
  .kmz-float-btn { padding: .6rem .7rem; }
}

@media print { .kmz-float { display: none; } }