/*
 * 連載の案内（.c-nettogeSeries）
 * 記事の最後に置く。「次の記事」を teal のバンドで大きく、連載の一覧で現在地を示す。
 * front: lib/nettoge/inc/assets/styles-front.php（本文に c-nettogeSeries があるときだけ読む）
 * editor: lib/nettoge/inc/editor/styles.php
 * 見た目は split-view の章送りの帯（.ntg-split__pagerbar）と対。角は付けない。色は --ntg-* トークン。
 */

.c-nettogeSeries {
  margin: 3em 0 1em;
  border: 1px solid var(--ntg-steel, #6b6f76);
  border-top: 3px solid var(--ntg-teal, #2f7a72);
  background: var(--ntg-surface-1, #fff);
  font-size: 14px;
  line-height: 1.5;
}

.c-nettogeSeries__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-3, #e8e9ea);
}

.c-nettogeSeries__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ntg-ink, #1a1c1e);
}

.c-nettogeSeries__pos {
  font-size: 12px;
  color: var(--ntg-muted, #5c6168);
  font-variant-numeric: tabular-nums;
}

.c-nettogeSeries__lead {
  margin: 0;
  padding: 14px 16px 4px;
  color: var(--ntg-ink, #1a1c1e);
  font-size: 15px;
  font-weight: 700;
}

.c-nettogeSeries__lead .-mark {
  color: var(--ntg-crimson, #a3262c);
}

/* 次の記事。章送りの「次へ」と同じ teal バンド */
.c-nettogeSeries__next {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 12px 16px 16px;
  padding: 14px 18px;
  background: var(--ntg-band-teal, var(--ntg-teal, #2f7a72));
  color: var(--ntg-on-band, #fff);
  text-decoration: none;
  line-height: 1.35;
}

.c-nettogeSeries__next:hover {
  filter: brightness(1.08);
  color: var(--ntg-on-band, #fff);
}

.c-nettogeSeries__next:focus-visible {
  outline: 2px solid var(--ntg-focus, var(--ntg-teal, #2f7a72));
  outline-offset: 2px;
}

.c-nettogeSeries__lbl {
  font-size: 11px;
  opacity: 0.85;
}

.c-nettogeSeries__ttl {
  font-size: 18px;
  font-weight: 700;
}

.c-nettogeSeries__ttl::after {
  content: " ›";
}

/* 最後の記事: 次が無いときの言葉 */
.c-nettogeSeries__end {
  margin: 12px 16px 16px;
  padding: 12px 18px;
  border: 1px dashed var(--ntg-steel, #6b6f76);
  color: var(--ntg-muted, #5c6168);
  font-size: 14px;
}

/* 連載の一覧。現在地は teal の番号 */
.c-nettogeSeries__list {
  margin: 0;
  padding: 6px 0 8px;
  list-style: none;
  border-top: 1px solid var(--ntg-steel, #6b6f76);
}

.c-nettogeSeries__list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-nettogeSeries__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 16px;
  color: var(--ntg-ink, #1a1c1e);
  text-decoration: none;
}

a.c-nettogeSeries__item:hover {
  background: var(--ntg-surface-2, #f4f4f5);
}

.c-nettogeSeries__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--ntg-surface-3, #e8e9ea);
  color: var(--ntg-ink, #1a1c1e);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.c-nettogeSeries__item.is-current {
  font-weight: 700;
}

.c-nettogeSeries__item.is-current .c-nettogeSeries__num {
  background: var(--ntg-teal, #2f7a72);
  color: var(--ntg-on-band, #fff);
}

.c-nettogeSeries__item.is-current::after {
  content: "いまここ";
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  color: var(--ntg-teal, #2f7a72);
}

.c-nettogeSeries__item.is-done .c-nettogeSeries__num {
  background: transparent;
  border: 1px solid var(--ntg-steel, #6b6f76);
  color: var(--ntg-muted, #5c6168);
}

@media (max-width: 599px) {
  .c-nettogeSeries__ttl {
    font-size: 16px;
  }
  .c-nettogeSeries__next {
    margin: 10px 12px 12px;
    padding: 12px 14px;
  }
  .c-nettogeSeries__lead {
    padding: 12px 12px 2px;
  }
}