/* Folio v0.6.9 — 読みやすい「見開き索引」目次 */
:root {
  --toc-leather: #5b3f2b;
  --toc-paper: #f4ecd9;
  --toc-paper-deep: #e8ddc4;
  --toc-ink: #2f332d;
  --toc-moss: #66745d;
  --toc-brass: #a4864f;
}

.folio-menu-trigger { display: none !important; }

.contents-backdrop {
  background: rgba(31, 22, 15, .46);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.more-sheet,
.more-sheet[data-origin="left"],
.more-sheet[data-origin="right"] {
  --index-line: rgba(77, 68, 52, .18);
  position: fixed;
  z-index: 700;
  inset: clamp(7px, 1.2dvh, 14px) clamp(7px, 1vw, 16px);
  width: auto;
  height: auto;
  max-height: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(7px, .75vw, 13px);
  padding: clamp(12px, 1.25vw, 21px);
  overflow: hidden;
  transform: none;
  clip-path: none;
  border: clamp(5px, .65vw, 10px) solid var(--toc-leather);
  border-radius: clamp(14px, 1.7vw, 26px);
  color: var(--toc-ink);
  background:
    linear-gradient(90deg, #3e2b20, var(--toc-leather) 4%, var(--toc-leather) 96%, #3e2b20),
    var(--toc-leather);
  box-shadow: 0 18px 54px rgba(22, 14, 9, .46), inset 0 0 0 1px rgba(219, 185, 119, .42);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.more-sheet[hidden] { display: none !important; }
.more-sheet:focus { outline: none; }
.more-sheet[data-origin="right"] { animation: toc-open-right .32s cubic-bezier(.2,.78,.22,1) both !important; }
.more-sheet[data-origin="left"] { animation: toc-open-left .32s cubic-bezier(.2,.78,.22,1) both !important; }

.more-sheet::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: clamp(14px, 1.5vw, 25px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(91,63,43,.12), rgba(55,37,25,.44) 48%, rgba(255,255,255,.18) 55%, rgba(91,63,43,.08));
  box-shadow: none;
}

.more-sheet::after { display: none; }

.contents-page {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(18px, 2.2vw, 35px) clamp(19px, 2.5vw, 42px) clamp(12px, 1.5vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(96, 73, 44, .34);
  background:
    linear-gradient(100deg, rgba(255,255,255,.36), transparent 17%, transparent 84%, rgba(91,63,43,.06)),
    radial-gradient(circle at 17% 24%, rgba(85,72,50,.05) 0 1px, transparent 1.6px) 0 0 / 11px 11px,
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(83,75,59,.045) 31px 32px),
    var(--toc-paper);
  box-shadow: inset 0 0 32px rgba(107,78,44,.11);
}

.contents-page-left { border-radius: 10px 3px 3px 10px; }
.contents-page-right { border-radius: 3px 10px 10px 3px; }

.contents-heading {
  position: relative;
  z-index: 3;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 3px 12px;
  padding: 0 3px clamp(13px, 1.55dvh, 20px);
  border-bottom: 1px solid rgba(71,78,68,.26);
}

.contents-heading small {
  grid-column: 1;
  color: #8c5e41;
  font: 600 clamp(8px, .72vw, 11px) var(--utility);
  letter-spacing: .24em;
}

.contents-heading b {
  grid-column: 1;
  font: 400 clamp(29px, 3.1vw, 48px) var(--display);
  letter-spacing: .09em;
  line-height: 1.05;
}

.contents-heading span {
  grid-column: 1;
  padding: 0;
  color: #5b6158;
  font: 500 clamp(9px, .8vw, 12px) var(--display);
  letter-spacing: .07em;
}

.contents-heading .contents-close {
  grid-column: 2;
  grid-row: 1 / 4;
  width: clamp(42px, 3.7vw, 56px);
  min-height: clamp(42px, 3.7vw, 56px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(65,75,65,.29);
  border-radius: 50%;
  color: var(--toc-ink);
  background: rgba(255,252,242,.72);
  box-shadow: 0 3px 9px rgba(66,48,29,.08);
}

.contents-heading .contents-close:active { transform: scale(.94); }
.contents-heading .contents-close svg { width: 18px; height: 18px; }

.contents-list {
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  padding-top: clamp(10px, 1.25dvh, 17px);
}

.contents-page-right .contents-list {
  grid-row: 1 / 3;
  padding-top: clamp(98px, 14dvh, 142px);
}

.contents-list > button:is([data-nav],[data-portal]) {
  position: relative;
  z-index: 2;
  min-height: clamp(55px, 8.2dvh, 86px);
  display: grid;
  grid-template-columns: clamp(40px, 4vw, 60px) minmax(0,1fr) 22px;
  align-items: center;
  gap: clamp(11px, 1.25vw, 20px);
  padding: clamp(7px, .85dvh, 11px) clamp(12px, 1.35vw, 22px);
  border: 0;
  border-bottom: 1px solid var(--index-line);
  border-radius: 0;
  color: var(--toc-ink);
  background: rgba(255,253,246,.26);
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.contents-list > button:is([data-nav],[data-portal]):last-child { border-bottom: 0; }
.contents-list > button:is([data-nav],[data-portal])::after {
  content: "›";
  color: var(--toc-moss);
  font: 300 clamp(24px, 2.3vw, 34px) Georgia, serif;
  line-height: 1;
}

.contents-list > button:is([data-nav],[data-portal]) svg {
  width: clamp(27px, 2.75vw, 40px);
  height: clamp(27px, 2.75vw, 40px);
  justify-self: center;
  color: var(--toc-moss);
  stroke-width: 1.35;
}

.contents-list > button:is([data-nav],[data-portal]) span {
  min-width: 0;
  color: var(--toc-ink);
  font: 500 clamp(15px, 1.65vw, 24px) var(--display);
  letter-spacing: .045em;
  text-align: left;
  white-space: nowrap;
}

.contents-list > button:is([data-nav],[data-portal]):active {
  transform: scale(.988);
  background: rgba(101,119,93,.17);
}

.contents-list > button:is([data-nav],[data-portal]):focus-visible {
  outline: 2px solid var(--toc-brass);
  outline-offset: -4px;
}

.contents-list > button.is-current {
  color: #34452f;
  background: linear-gradient(90deg, rgba(137,151,116,.38), rgba(137,151,116,.17));
  box-shadow: inset 5px 0 0 var(--toc-moss);
}

.contents-page-number {
  justify-self: center;
  padding-top: 5px;
  color: #725f43;
  font: 500 clamp(8px, .75vw, 11px) Georgia, serif;
}

body.dark .more-sheet,
body.dark .contents-page,
body.dark .contents-list > button:is([data-nav],[data-portal]),
body.dark .contents-heading .contents-close {
  color: var(--toc-ink);
}

@keyframes toc-open-right {
  from { opacity: 0; transform: translateX(6%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes toc-open-left {
  from { opacity: 0; transform: translateX(-6%); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 839px) {
  .more-sheet,
  .more-sheet[data-origin="left"],
  .more-sheet[data-origin="right"] {
    inset: max(7px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 8px;
    border-width: 5px;
    border-radius: 17px;
    overflow: hidden;
  }

  .more-sheet::before { display: none; }
  .contents-page {
    display: contents;
  }

  .contents-heading {
    grid-column: 1;
    grid-row: 1;
    z-index: 4;
    margin: 0;
    padding: 15px 16px 11px;
    background: var(--toc-paper);
  }

  .contents-heading b { font-size: clamp(25px, 7vw, 34px); }
  .contents-heading span { font-size: 9px; }
  .contents-heading .contents-close { width: 42px; min-height: 42px; }

  .contents-page-left .contents-list,
  .contents-page-right .contents-list {
    grid-column: 1;
    grid-row: auto;
    display: contents;
    padding: 0;
  }

  .more-sheet {
    align-content: start;
    overflow-y: auto;
    background: var(--toc-paper);
  }

  .more-sheet[data-origin="left"],
  .more-sheet[data-origin="right"] {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .contents-list > button:is([data-nav],[data-portal]) {
    min-height: 66px;
    grid-template-columns: 39px minmax(0,1fr) 18px;
    gap: 11px;
    padding: 8px 15px;
    background: var(--toc-paper);
  }

  .contents-list > button:is([data-nav],[data-portal]) svg { width: 28px; height: 28px; }
  .contents-list > button:is([data-nav],[data-portal]) span { font-size: clamp(15px, 4.25vw, 19px); }
  .contents-page-number { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .more-sheet[data-origin="left"],
  .more-sheet[data-origin="right"],
  .contents-backdrop { animation: none; }
  .contents-list > button:is([data-nav],[data-portal]) { transition: none; }
}