/*
 * もくじ (TOC)。 post_content の h2 見出しを自動でリスト化する。
 * 各アイテムは上に細い gray-300 のボーダー、テキストはブランドグリーン、
 * ol の連番マーカーは非表示。
 *
 * `.entry-body` を prefix しているのは、テーマ側で
 * `section.single-feature .entry-body a { text-decoration: underline }` と
 * `.entry-body ol { padding-left: 24px }` が (0,0,2,2) の specificity で
 * 効いており、単なる `.lazyblock-toc ...` (最大でも 0,0,2,1) では負けるため。
 * TOC は entry-body 配下でしか使わない前提でスコープを絞る。
 *
 * Figma 参照: 786:7326 (index)
 */
.entry-body .lazyblock-toc {
  background: var(--color-background-light);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-default);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  & .title {
    margin: 0;
    font-size: var(--font-size-text-20);
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
  }

  & .list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  & .item {
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-neutral-gray-300);
  }

  & .item a {
    color: var(--color-text-brand-primary-green);
    text-decoration: none;
  }

  & .item a:hover,
  & .item a:focus-visible {
    text-decoration: underline;
  }
}