/*------------------------------------------------------------------------------
ARCHIVE SERIES（各話の一覧：本編・旧版と、その分類の一覧）
css/archive.css の共通部品（札・ページ送り・空のとき）の上に重ねる、各話の一覧だけの部品。
マークアップは inc/archive/（structure.php・series-nav.php・template-tags.php）、動きは js/archive.js。
- 絞り込み（.lv-filter--series）：PARTS → CHAPTERS の縦二段。狭い画面は横に送る一列。「編から探す」で目次の窓を開く
- 目次の窓（.lv-toc）・左下の札（.lv-toc-toggle）：部 › 編 › 番外編の全階層。今いる区間が光る
- 一覧の見出し：部の扉（.lv-ep-part。輪郭の数字と、罫）・編（.lv-ep-chapter）・番外編（.lv-ep-extra）・続き（.lv-ep-cont）
- 読書の糸（.lv-ep-series::before と、一行の結び目）：金の糸に話が結び目として並び、読んだ話が ○ から ◆ に灯る
- 一行（.lv-ep-card）：PC は「題 ・・・ 日付 →」を一行に（点の罫でつなぐ）。絵のない行は、番号の輪郭の数字
- 次回公開予定の行（.lv-ep-next）：本物の行と同じ高さ。破線は「まだ開かない」の印
- 待合室（.lv-waiting）：本編のエピソードがまだ公開されていない間の、一覧の代わり
動きは transform と opacity だけ。動きを減らす設定では、出現・移り変わりをすべて切る（js/archive.js も同じ）。
------------------------------------------------------------------------------*/
:root {
  /* 読書の糸の位置：内容の左端から、余白の半分だけ外 */
  --spine-x: calc(var(--archive-gutter) * -0.5);
  /* 糸を切る地の色（結び目の周り） */
  --series-ground: var(--lv-color-navy);
}

/*------------------------------------------------------------------------------
絞り込み：縦に二段。ラベルの行の右に「編から探す」。狭い画面は、札を横に送る一列（右端は薄れる）
------------------------------------------------------------------------------*/
.lv-filter--series {
  display: grid;
  gap: 14px;
  justify-items: stretch;
}
.lv-filter--series .lv-filter__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label toc"
    "list list";
  align-items: center;
  gap: 10px 12px;
}
.lv-filter--series .lv-filter__label {
  grid-area: label;
}
.lv-filter--series .lv-filter__list {
  position: relative;
  grid-area: list;
  flex-wrap: nowrap;
  margin-inline: calc(var(--archive-gutter) * -1);
  padding: 4px var(--archive-gutter);
  overflow-x: auto;
  scroll-padding-inline: var(--archive-gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
.lv-filter--series .lv-filter__list.is-end {
  -webkit-mask-image: none;
  mask-image: none;
}
.lv-filter--series .lv-filter__list::-webkit-scrollbar {
  display: none;
}
.lv-filter--series .lv-filter__list > li {
  flex: 0 0 auto;
}
.lv-filter--series .lv-filter__chip {
  min-height: 40px;
  white-space: nowrap;
}
/* まだ話のない部・編：文字は薄くせず、破線の枠で「準備中」を表す */
.lv-filter--series .lv-filter__chip.is-empty {
  color: var(--archive-ink-soft);
  opacity: 1;
}
/* 開いている編・番外編の親（部・編）：金の縁は付けず、文字だけ明るく */
.lv-filter__chip.is-parent {
  color: var(--archive-title);
  border-color: var(--archive-line);
}
.lv-filter__toc {
  grid-area: toc;
  display: inline-flex;
  align-items: center;
  column-gap: 12px;
  min-height: 44px;
  padding: 0 18px 0 16px;
  color: var(--archive-gold-light);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: none;
  border: 1px solid var(--archive-line);
  border-radius: 22px;
  cursor: pointer;
  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.lv-filter__toc:hover,
.lv-filter__toc[aria-expanded="true"] {
  color: var(--archive-title);
  border-color: var(--archive-gold);
  background-color: rgba(var(--lv-gold-rgb), 0.08);
}
.lv-filter__toc:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--archive-gold);
}
.lv-filter__toc-icon {
  display: grid;
  row-gap: 3px;
  width: 14px;
}
.lv-filter__toc-icon > span {
  display: block;
  height: 1px;
  background-color: var(--archive-gold);
}
.lv-filter__toc-icon > span:nth-child(2) {
  width: 9px;
}
.lv-filter__toc-icon > span:nth-child(3) {
  width: 12px;
}
.lv-filter__toc-count {
  color: var(--archive-ink-soft);
  font-size: 11px;
  letter-spacing: 0.1em;
}

/*------------------------------------------------------------------------------
目次の窓：各話のページの目次（.ep-index）と同じ形・同じ位置。左下の札で左から引き出す
部は輪郭のローマ数字、編は細い縦線に ○、番外編は ◇。今いる区間（.is-here）は ◆ と明るい名前
------------------------------------------------------------------------------*/
.lv-toc-toggle {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  max-width: min(72vw, 340px);
  height: 48px;
  padding: 0 18px 0 16px;
  color: var(--lv-color-white);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  background-color: var(--lv-color-navy);
  border: 1px solid var(--archive-line);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.lv-toc-toggle:hover,
.lv-toc-toggle[aria-expanded="true"] {
  border-color: var(--archive-gold);
}
.lv-toc-toggle:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--archive-gold),
    0 10px 30px rgba(0, 0, 0, 0.35);
}
.lv-toc-toggle__icon {
  display: grid;
  flex: 0 0 auto;
  row-gap: 4px;
  width: 16px;
}
.lv-toc-toggle__icon > span {
  display: block;
  height: 1px;
  background-color: var(--archive-gold);
}
.lv-toc-toggle__icon > span:nth-child(2) {
  width: 11px;
}
.lv-toc-toggle__icon > span:nth-child(3) {
  width: 14px;
}
/* 「IX | 編の名前」：部の名前は番号に任せ、狭い画面でも切れにくくする。文字が変わるときは、古い文字が上へ消え、新しい文字が下から現れる */
.lv-toc-toggle__text {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.lv-toc-toggle__no {
  flex: 0 0 auto;
  padding-right: 10px;
  color: var(--archive-gold);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  border-right: 1px solid var(--archive-line);
}
.lv-toc-toggle__no[hidden] {
  display: none;
}
.lv-toc-toggle__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .lv-toc-toggle.is-compact .lv-toc-toggle__name {
    display: none;
  }
  .lv-toc-toggle.is-compact .lv-toc-toggle__no {
    padding-right: 0;
    border-right: 0;
  }
}
.lv-toc-toggle__text.is-out {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
}
.lv-toc-toggle__text.is-in {
  animation: lv-toc-label-in 0.35s var(--archive-ease) both;
}
@keyframes lv-toc-label-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
}
.lv-toc {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  width: min(84vw, 340px);
  color: var(--lv-color-white);
  background: var(--lv-color-navy) url(../img/bg-black-sp.webp) left center / cover no-repeat;
  border-right: 1px solid var(--archive-line);
  visibility: hidden;
  transform: translate3d(-100%, 0, 0);
  transition:
    transform 0.45s ease,
    visibility 0s linear 0.45s;
}
.lv-toc.is-open {
  visibility: visible;
  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.5);
  transform: none;
  transition: transform 0.6s var(--archive-ease);
}
.lv-toc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1099;
  background-color: rgba(2, 6, 12, 0.66);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.lv-toc-backdrop[hidden] {
  display: none;
}
.lv-toc-backdrop.is-visible {
  opacity: 1;
}
.lv-toc__head {
  position: relative;
  flex: 0 0 auto;
  padding: 26px 0 0;
  border-bottom: 1px solid var(--archive-rule);
}
.lv-toc__close {
  position: absolute;
  top: 18px;
  right: 16px;
}
.lv-toc__label {
  display: flex;
  align-items: center;
  column-gap: 10px;
  margin: 0 76px 30px 22px;
  color: var(--archive-gold);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.32em;
}
.lv-toc__label::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background-color: var(--archive-gold);
  transform: rotate(45deg);
}
.lv-toc__label::after {
  content: "";
  flex: 1 1 auto;
  max-width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--archive-line), transparent);
}
.lv-toc__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 6px 0 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--archive-line) transparent;
}
.lv-toc__parts,
.lv-toc__chapters,
.lv-toc__extras {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv-toc__link,
.lv-toc__all {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
  padding: 13px 22px 13px 26px;
  color: var(--lv-color-white);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(var(--lv-gold-rgb), 0.09);
  transition: background-color 0.3s ease;
}
.lv-toc__all {
  border-bottom: 0;
}
.lv-toc__name {
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color 0.3s ease;
}
.lv-toc__count {
  flex: 0 0 auto;
  color: var(--archive-gold);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}
/* 左端の金の線：重ねると半分、今いる分類は全部 */
.lv-toc__link::before,
.lv-toc__all::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 2px;
  background-color: var(--archive-gold);
  transform: scaleY(0);
  transition: transform 0.4s var(--archive-ease);
}
a.lv-toc__link:hover,
a.lv-toc__all:hover {
  background-color: rgba(var(--lv-gold-rgb), 0.07);
}
a.lv-toc__link:hover::before,
a.lv-toc__all:hover::before {
  transform: scaleY(0.5);
}
.lv-toc__link[aria-current="page"],
.lv-toc__all[aria-current="page"] {
  background: linear-gradient(90deg, rgba(var(--lv-gold-rgb), 0.16), rgba(var(--lv-gold-rgb), 0));
}
.lv-toc__link[aria-current="page"]::before,
.lv-toc__all[aria-current="page"]::before {
  transform: none;
}
.lv-toc__link[aria-current="page"] .lv-toc__name,
.lv-toc__all[aria-current="page"] .lv-toc__name,
.lv-toc__link.is-here .lv-toc__name {
  color: var(--archive-gold-light);
}
.lv-toc__link:focus-visible,
.lv-toc__all:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--archive-gold);
}
.lv-toc__link.is-empty .lv-toc__name {
  color: var(--archive-ink-soft);
}
.lv-toc__link.is-empty .lv-toc__count {
  color: var(--archive-ink-soft);
}
/* 部：左に輪郭のローマ数字。名前は少し大きく太く */
.lv-toc__part {
  padding-top: 8px;
}
.lv-toc__part-head {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  margin: 0;
  border-bottom: 1px solid var(--archive-line);
}
.lv-toc__no {
  padding-left: 22px;
  color: transparent;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1px var(--archive-gold);
}
.lv-toc__part-head .lv-toc__link {
  padding-left: 0;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 0;
}
.lv-toc__part-head--other {
  display: block;
  padding: 13px 22px 6px 26px;
  color: var(--archive-ink-soft);
  font-size: 12px;
  letter-spacing: 0.12em;
}
/* 編：部の名前の頭にそろえ、x=42px の細い縦線に ○ を通す。番外編は一段下げて ◇ */
.lv-toc__chapters {
  position: relative;
}
.lv-toc__chapters::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42px;
  width: 1px;
  background-color: var(--archive-rule);
}
.lv-toc__chapters .lv-toc__link {
  padding-left: 84px;
}
.lv-toc__chapters .lv-toc__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 40px;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background-color: var(--series-ground);
  border: 1px solid var(--archive-line);
  border-radius: 50%;
  transition:
    transform 0.4s var(--archive-ease),
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.lv-toc__extras .lv-toc__link {
  padding-left: 106px;
  color: var(--archive-ink-soft);
  font-size: 13px;
}
.lv-toc__extras .lv-toc__link::after {
  left: 94px;
  border-radius: 0;
  transform: rotate(45deg);
}
/* 今いる区間：○ が ◆ になる */
.lv-toc__chapters .lv-toc__link.is-here::after {
  background-color: var(--archive-gold-light);
  border-color: var(--archive-gold-light);
  border-radius: 0;
  transform: rotate(45deg) scale(1.2);
}
/* 開いたとき、項目が順に現れる（遅れは js/archive.js が --n に入れる。先頭 10 項目まで） */
@media (prefers-reduced-motion: no-preference) {
  .lv-toc.is-open .lv-toc__part-head,
  .lv-toc.is-open .lv-toc__chapter > .lv-toc__link,
  .lv-toc.is-open .lv-toc__extra > .lv-toc__link {
    animation: lv-toc-item-in 0.5s var(--archive-ease) both;
    animation-delay: calc(var(--n, 0) * 30ms + 120ms);
  }
}
@keyframes lv-toc-item-in {
  from {
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
  }
}

/*------------------------------------------------------------------------------
一覧の見出し：部の扉・編・番外編・続き
強弱は、文字の大きさより、余白と線と数字で付ける。部は輪郭の大きなローマ数字と、全幅の金の罫
------------------------------------------------------------------------------*/
.lv-ep-series {
  position: relative;
  display: block;
}
.lv-ep-part {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "no label"
    "name name"
    "count count";
  align-items: end;
  column-gap: 20px;
  row-gap: 10px;
  margin: 72px 0 20px;
  padding-top: 28px;
}
/* 上の罫：左から右へ、金から薄れていく */
.lv-ep-part::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--archive-gold), var(--archive-line) 35%, transparent);
  transform-origin: left center;
  transition: transform 1.1s var(--archive-ease);
}
.lv-ep-part__no {
  grid-area: no;
  color: transparent;
  font-size: 64px;
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1px var(--archive-gold);
}
.lv-ep-part__label {
  grid-area: label;
  display: flex;
  align-items: center;
  column-gap: 14px;
  align-self: start;
  color: var(--archive-gold);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.36em;
}
.lv-ep-part__label::after {
  content: "";
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--archive-line), transparent);
}
.lv-ep-part__name {
  grid-area: name;
  color: var(--archive-title);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-wrap: balance;
  word-break: auto-phrase;
}
.lv-ep-part__count {
  grid-area: count;
  color: var(--archive-ink-soft);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.1em;
}
/* 部の番号のない部・「ほかの編」 */
.lv-ep-part--plain {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "label"
    "name"
    "count";
}
.lv-ep-part--other {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "name"
    "count";
  margin-top: 56px;
}
.lv-ep-part--other::after {
  background: linear-gradient(90deg, var(--archive-line), transparent 70%);
}
.lv-ep-part--other .lv-ep-part__name {
  font-size: 20px;
}
/* 部の扉の結び目：罫の上の大きな ◆（糸を切る） */
.lv-ep-part::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--spine-x);
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-left: -6px;
  background-color: var(--archive-gold);
  box-shadow: 0 0 0 4px var(--series-ground);
  transform: rotate(45deg);
}

.lv-ep-chapter,
.lv-ep-extra,
.lv-ep-none {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
}
.lv-ep-chapter {
  position: relative;
  margin: 40px 0 12px;
  padding-top: 16px;
  background: linear-gradient(var(--archive-gold), var(--archive-gold)) left top / 28px 1px no-repeat;
}
/* 編の結び目：糸の上の小さな ◆（輪郭） */
.lv-ep-chapter::before {
  content: "";
  position: absolute;
  top: 25px;
  left: var(--spine-x);
  z-index: 1;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background-color: var(--series-ground);
  border: 1px solid var(--archive-gold);
  transform: rotate(45deg);
}
.lv-ep-chapter__label,
.lv-ep-extra__label {
  color: var(--archive-gold);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.32em;
}
.lv-ep-chapter__name {
  color: var(--archive-title);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}
a.lv-ep-chapter__name:hover,
a.lv-ep-extra__name:hover {
  color: var(--archive-gold-light);
}
a.lv-ep-chapter__name:focus-visible,
a.lv-ep-extra__name:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--archive-gold);
}
.lv-ep-chapter__count,
.lv-ep-extra__count {
  margin-left: auto;
  color: var(--archive-ink-soft);
  font-size: 12px;
  letter-spacing: 0.1em;
}
.lv-ep-extra {
  margin: 30px 0 10px;
}
.lv-ep-extra__name {
  color: var(--archive-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}
.lv-ep-none {
  margin: 12px 0 10px;
  color: var(--archive-ink-soft);
  font-size: 13px;
  letter-spacing: 0.12em;
}
/* 範囲の先頭で、前の範囲から続く部・編：編の見出しと同じ形（CONTINUED → 「VIII · 編の名前」 → の続き） */
.lv-ep-cont {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 4px;
  margin: 26px 0 10px;
  font-weight: 400;
}
.lv-ep-cont__label {
  color: var(--archive-gold);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.32em;
}
.lv-ep-cont__name {
  color: var(--archive-title);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
.lv-ep-cont__suffix {
  color: var(--archive-ink-soft);
  font-size: 12px;
  letter-spacing: 0.1em;
}
/* 見出しの間の余白 */
.lv-ep-part + .lv-ep-chapter {
  margin-top: 26px;
}
.lv-ep-next + .lv-ep-part {
  margin-top: 64px;
}
.lv-ep-series > :first-child {
  margin-top: 8px;
}
.lv-ep-series > .lv-ep-part:first-child {
  margin-top: 24px;
}
/* 部の扉の出現（js/archive.js が is-armed を付け、画面に入ると外す。一度だけ）：罫は左から伸び、数字と名前は下から浮かぶ */
@media (prefers-reduced-motion: no-preference) {
  .lv-ep-part__no,
  .lv-ep-part__name {
    transition:
      opacity 0.9s var(--archive-ease) 0.08s,
      transform 0.9s var(--archive-ease) 0.08s;
  }
  .lv-ep-part__name {
    transition-delay: 0.16s;
  }
  .lv-ep-part.is-armed::after {
    transform: scaleX(0);
  }
  .lv-ep-part.is-armed .lv-ep-part__no,
  .lv-ep-part.is-armed .lv-ep-part__name {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}

/*------------------------------------------------------------------------------
読書の糸：金の細い糸に、話が結び目として並ぶ（装飾。読んだかどうかは、行の文字の印が伝える）
○ まだ ／ 光る ○ NEW ／ ◆ の輪郭 読みかけ ／ 塗った ◆ 読んだ ／ ◇ 番外編。今いる区間は、糸が明るくなる
------------------------------------------------------------------------------*/
.lv-ep-series::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spine-x);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--archive-rule) 48px, var(--archive-rule) calc(100% - 48px), transparent);
  pointer-events: none;
}
.lv-ep-list {
  position: relative;
}
.lv-ep-list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spine-x);
  width: 1px;
  background-color: var(--archive-gold-light);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.lv-ep-list.is-here::after {
  opacity: 0.4;
}
/* 読んだ話の間の糸を金で塗る：戻ってきた読者に、自分が読んだ道筋が一本の金の線として見える。読みかけの話は、中ほどまで */
.lv-ep-list__item {
  position: relative;
}
.lv-ep-list__item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;
  left: var(--spine-x);
  width: 1px;
  background-color: var(--archive-gold);
  opacity: 0;
  transition: opacity 0.6s var(--archive-ease);
  transition-delay: calc(var(--i, 0) * 30ms);
  pointer-events: none;
}
.lv-ep-list__item.is-read::before {
  opacity: 0.9;
}
.lv-ep-list__item.is-reading::before {
  bottom: 50%;
  opacity: 0.9;
}
.lv-ep-row {
  position: relative;
}
.lv-ep-row::before,
.lv-ep-row::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--spine-x);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  pointer-events: none;
}
/* ○：まだ読んでいない話（糸を切る） */
.lv-ep-row::before {
  background-color: var(--series-ground);
  border: 1px solid var(--archive-line);
  border-radius: 50%;
  transition:
    opacity 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.4s var(--archive-ease);
}
/* ◆：読みかけ（輪郭）・読んだ（塗り）。ふだんは見えず、印が付くと灯る */
.lv-ep-row::after {
  background-color: var(--archive-gold);
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition:
    opacity 0.6s var(--archive-ease),
    transform 0.6s var(--archive-ease),
    background-color 0.3s ease;
  transition-delay: calc(var(--i, 0) * 30ms);
}
/* NEW：輪郭の金・中の点・光（ふつうの ○ と見分けがつく） */
.lv-ep-list__item.is-new > .lv-ep-row::before {
  background: radial-gradient(circle, var(--archive-gold-light) 2px, transparent 2.6px), var(--series-ground);
  border-color: var(--archive-gold-light);
  box-shadow: 0 0 10px rgba(var(--lv-gold-light-rgb), 0.85);
}
.lv-ep-list__item.is-reading > .lv-ep-row::before,
.lv-ep-list__item.is-read > .lv-ep-row::before {
  opacity: 0;
}
.lv-ep-list__item.is-reading > .lv-ep-row::after {
  background-color: transparent;
  border: 1px solid var(--archive-gold-light);
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.lv-ep-list__item.is-read > .lv-ep-row::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
/* 番外編：◇ */
.lv-ep-list--extra .lv-ep-row::before {
  border-radius: 0;
  transform: rotate(45deg);
}
@media (hover: hover) {
  .lv-ep-row:hover::before {
    transform: scale(1.5);
  }
  .lv-ep-list--extra .lv-ep-row:hover::before {
    transform: rotate(45deg) scale(1.5);
  }
}

/*------------------------------------------------------------------------------
一行：絵・番号・題・日付。絵のない行は、番号の輪郭の数字
------------------------------------------------------------------------------*/
.lv-ep-card__rule {
  display: none;
}
.lv-ep-card .lv-ep-mark {
  position: absolute;
  top: calc(50% - 26px);
  left: 0;
  z-index: 1;
  padding: 1px 6px;
  font-size: 9px;
  background-color: rgba(var(--lv-navy-rgb), 0.88);
}
/* 絵のない行：地は淡い金のグラデーション、内側に細い枠、中央に番号の数字（輪郭だけ）。番外編には EX を添える */
.lv-ep-card__media--empty,
.lv-ep-next__media {
  background: linear-gradient(135deg, rgba(var(--lv-gold-rgb), 0.1), transparent 60%), rgba(var(--lv-gold-rgb), 0.03);
}
.lv-ep-card__media--empty:not(.lv-ep-card__media--plain)::before {
  top: 6px;
  right: 6px;
  bottom: 6px;
  left: 6px;
  width: auto;
  height: auto;
  margin: 0;
  border: 1px solid rgba(var(--lv-gold-light-rgb), 0.18);
  transform: none;
}
.lv-ep-card__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: transparent;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 1px var(--archive-line);
  transition: -webkit-text-stroke-color 0.4s ease;
}
.lv-ep-card__ghost small {
  color: var(--archive-ink-soft);
  font-size: 9px;
  letter-spacing: 0.3em;
  -webkit-text-stroke: 0;
}
@media (hover: hover) {
  .lv-ep-card:hover .lv-ep-card__ghost {
    -webkit-text-stroke-color: var(--archive-gold-light);
  }
}
.lv-ep-card:focus-visible .lv-ep-card__ghost {
  -webkit-text-stroke-color: var(--archive-gold-light);
}

/*------------------------------------------------------------------------------
次回公開予定の行：本物の行と同じ並び・同じ高さ。破線は「まだ開かない」の印（空の札と同じ表し方）
------------------------------------------------------------------------------*/
.lv-ep-next {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  padding: 9px 0;
  border-top: 1px dashed var(--archive-line);
  border-bottom: 1px dashed var(--archive-line);
}
.lv-ep-next__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--archive-line);
}
.lv-ep-next__media .lv-ep-card__ghost {
  -webkit-text-stroke-color: var(--archive-gold);
  opacity: 0.7;
}
/* 番号がない予定（手で設定した公開予定）：絵の枠に NEXT */
.lv-ep-next__media .lv-ep-card__ghost small {
  color: var(--archive-gold-light);
  font-size: 12px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
.lv-ep-next__body {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto;
  grid-template-areas:
    "head head head"
    "date rule mark";
  align-items: center;
  row-gap: 4px;
  min-width: 0;
}
.lv-ep-next .lv-ep-card__head {
  grid-area: head;
}
/* 「最新話」の印（塗り）に対して、「次回公開予定」は枠だけ */
.lv-ep-next__badge {
  padding: 1px 8px 2px;
  color: var(--archive-gold-light);
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  border: 1px solid var(--archive-line);
}
.lv-ep-next__date {
  grid-area: date;
  color: var(--archive-title);
  font-size: 16px;
  line-height: 1.5;
}
.lv-ep-next__rule {
  grid-area: rule;
  height: 1px;
  margin: 0 14px;
  background: radial-gradient(circle, var(--archive-line) 0.55px, transparent 0.9px) left center / 6px 1px repeat-x;
  opacity: 0.7;
}
.lv-ep-next__mark {
  grid-area: mark;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border: 1px solid var(--archive-gold-light);
  transform: rotate(45deg);
}
/* 糸の上の結び目：◇。画面に入ると一度だけ灯る */
.lv-ep-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--spine-x);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background-color: var(--series-ground);
  border: 1px solid var(--archive-gold-light);
  transform: rotate(45deg);
  transition:
    opacity 0.9s var(--archive-ease),
    transform 0.9s var(--archive-ease);
}
@media (prefers-reduced-motion: no-preference) {
  .lv-ep-next.is-armed::before {
    opacity: 0.3;
    transform: rotate(45deg) scale(0.6);
  }
}

/*------------------------------------------------------------------------------
待合室：本編のエピソードがまだ公開されていない間（一覧が空のとき）。inc/archive/template-tags.php の lv_archive_render_waiting
次回公開予定の行（.lv-ep-next）をそのまま使い、読書の糸の始点だけを置く（枠の中は小さな ◇）。公開を知る札と世界への札は、
公開後の「最新話を読む」と同じ場所・同じ部品（.lv-archive-actions）。動きは、一行目の結び目が一度だけ灯る既存のもの（js/archive.js）だけ
------------------------------------------------------------------------------*/
.lv-waiting {
  padding-top: 24px;
}
/* 狭い画面（600px 未満）：空の枠を上に小さく置き、文字は幅いっぱいに流す（600px 以上は .lv-ep-next の二列を使う） */
@media (max-width: 599px) {
  .lv-waiting__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
    padding: 16px 0;
  }
  .lv-waiting__row .lv-ep-next__media {
    width: 92px;
  }
}
.lv-waiting__diamond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid var(--archive-gold-light);
  transform: rotate(45deg);
}
.lv-waiting__lead {
  display: grid;
  row-gap: 8px;
  min-width: 0;
  padding: 6px 0;
}
.lv-waiting__title {
  margin: 0;
  color: var(--archive-title);
  font-size: clamp(16px, 15px + 0.4vw, 19px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-wrap: balance;
  word-break: auto-phrase;
}
.lv-waiting__lead .lv-next {
  margin-top: 4px;
}

/*------------------------------------------------------------------------------
600px 以上：絵を大きく
------------------------------------------------------------------------------*/
@media (min-width: 600px) {
  .lv-ep-card,
  .lv-ep-next {
    grid-template-columns: 128px minmax(0, 1fr);
    column-gap: 16px;
    padding: 10px 0;
  }
  .lv-ep-card__title {
    font-size: 16px;
  }
  .lv-ep-card .lv-ep-mark {
    top: calc(50% - 36px);
  }
  .lv-ep-card__ghost {
    font-size: 30px;
  }
  .lv-ep-part {
    margin: 96px 0 20px;
    padding-top: 36px;
  }
  .lv-ep-part__no {
    font-size: 88px;
  }
  .lv-ep-part__name {
    font-size: 26px;
  }
  .lv-ep-next__date {
    font-size: 18px;
  }
}

/*------------------------------------------------------------------------------
769px 以上
------------------------------------------------------------------------------*/
@media (min-width: 769px) {
  /* 絞り込み：ラベル | 札 | 編から探す の三列。札は折り返して並べる */
  .lv-filter--series {
    gap: 14px;
  }
  .lv-filter--series .lv-filter__group {
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-areas: "label list toc";
    column-gap: 20px;
  }
  .lv-filter--series .lv-filter__group--chapters {
    grid-template-areas: "label list list";
  }
  .lv-filter--series .lv-filter__list {
    flex-wrap: wrap;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .lv-toc-toggle {
    bottom: 28px;
    left: 28px;
  }
  .lv-toc {
    width: 380px;
    background-image: url(../img/bg-black-pc.webp);
  }
  .lv-toc__no {
    font-size: 20px;
  }

  /* 一覧の見出し */
  .lv-ep-part {
    grid-template-columns: auto minmax(0, max-content) minmax(0, 1fr);
    grid-template-areas:
      "no label label"
      "no name count";
    column-gap: 32px;
    row-gap: 8px;
  }
  .lv-ep-part--plain,
  .lv-ep-part--other {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    column-gap: 20px;
  }
  .lv-ep-part--plain {
    grid-template-areas:
      "label label"
      "name count";
  }
  .lv-ep-part--other {
    grid-template-areas: "name count";
    margin-top: 72px;
  }
  .lv-ep-part__count {
    align-self: end;
    margin-left: -12px;
    padding-bottom: 0.45em;
  }
  .lv-ep-chapter {
    margin: 56px 0 14px;
    padding-top: 18px;
  }
  .lv-ep-chapter::before {
    top: 29px;
  }
  .lv-ep-chapter__name,
  .lv-ep-cont__name {
    font-size: 20px;
  }
  .lv-ep-extra {
    margin-top: 36px;
  }
  .lv-ep-extra__name {
    font-size: 16px;
  }
  .lv-ep-part + .lv-ep-chapter {
    margin-top: 32px;
  }
  .lv-ep-next + .lv-ep-part {
    margin-top: 96px;
  }
  .lv-ep-series > .lv-ep-part:first-child {
    margin-top: 32px;
  }

  /* 一行：絵 184×103、上下 10px で約 124px。本文は二段（番号と印 ／ 題 ・・・ 日付 →）。点の罫が右の空きをつなぐ */
  .lv-ep-card,
  .lv-ep-next {
    grid-template-columns: 184px minmax(0, 1fr);
    column-gap: 28px;
  }
  .lv-ep-card::before {
    left: 0;
    right: -24px;
  }
  .lv-ep-card__body {
    grid-template-columns: minmax(0, max-content) minmax(24px, 1fr) auto auto;
    grid-template-areas:
      "head head head head"
      "title rule meta go";
    align-items: end;
    row-gap: 6px;
    column-gap: 0;
  }
  .lv-ep-card__top {
    display: contents;
  }
  .lv-ep-card .lv-ep-card__head {
    grid-area: head;
    align-self: start;
  }
  .lv-ep-card__no {
    font-size: 12px;
  }
  .lv-ep-card .lv-ep-mark {
    position: static;
    padding: 1px 7px 2px;
    font-size: 10px;
    background-color: transparent;
  }
  .lv-ep-card__title {
    grid-area: title;
    font-size: 18px;
    line-height: 1.5;
  }
  .lv-ep-card__rule {
    display: block;
    grid-area: rule;
    align-self: end;
    height: 1px;
    margin: 0 18px 0.7em;
    background: radial-gradient(circle, var(--archive-line) 0.55px, transparent 0.9px) left center / 6px 1px repeat-x;
    opacity: 0.55;
    transition: opacity 0.4s ease;
  }
  .lv-ep-card .lv-ep-card__meta {
    grid-area: meta;
    align-self: end;
    margin: 0;
    font-size: 13px;
    gap: 2px 12px;
    white-space: nowrap;
  }
  .lv-ep-card__updated {
    display: inline;
  }
  .lv-ep-row__updated {
    display: none;
  }
  /* 末尾の矢印：ふだんは淡く、重ねたとき・フォーカスしたときに、矢印が伸びて濃くなり、点の罫も濃くなる */
  .lv-ep-card__go {
    position: relative;
    display: flex;
    grid-area: go;
    align-self: end;
    align-items: center;
    margin-left: 16px;
    padding-right: 8px;
    color: var(--archive-gold);
    opacity: 0.6;
    transform: translateX(-8px);
    transition:
      opacity 0.4s ease,
      transform 0.6s var(--archive-ease);
  }
  .lv-ep-card__ghost {
    font-size: 40px;
  }
  .lv-ep-card:hover .lv-ep-card__rule,
  .lv-ep-card:focus-visible .lv-ep-card__rule {
    opacity: 1;
  }
  .lv-ep-card:focus-visible .lv-ep-card__go {
    opacity: 1;
    transform: none;
  }
  /* あらすじのボタンの列は、ボタンのない行にも残す（矢印の位置が 50 行で一直線にそろう） */
  .lv-ep-row {
    grid-template-columns: minmax(0, 1fr) 112px;
    column-gap: 20px;
  }
  .lv-ep-row__toggle {
    justify-self: end;
    width: auto;
    height: 40px;
    padding: 0 16px 0 18px;
    border-radius: 20px;
  }
  .lv-ep-row__toggle-text {
    display: inline;
  }
  /* あらすじは、題の列（絵 184px + すき間 28px）にそろえて開く */
  .lv-ep-row__synopsis-text {
    max-width: 44em;
    margin: -4px 0 22px 212px;
    font-size: 15px;
  }
  .lv-ep-next__date {
    font-size: 20px;
  }
}

@media (min-width: 1100px) {
  .lv-ep-part {
    margin: 120px 0 36px;
    padding-top: 44px;
  }
  .lv-ep-part__no {
    font-size: 112px;
  }
  .lv-ep-part__name {
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lv-toc,
  .lv-toc.is-open,
  .lv-toc-backdrop,
  .lv-toc-toggle__text,
  .lv-ep-list::after,
  .lv-ep-row::before,
  .lv-ep-row::after {
    transition: none;
  }
  .lv-toc-toggle__text.is-in {
    animation: none;
  }
}