/* ==========================================================================
   c-toc — Figma: Toc/Article (24413:6927) 記事の目次（h2 / h3 の 2 階層・アンカーリンク）
   PC: 余白 32px・見出し renewal/JP/Label/20/Bold・項目 renewal/JP/16/Regular・h3 のインデント 32px
   SP: 余白 24px・見出し renewal/JP/Label/18/Bold・項目 renewal/JP/14/Regular・h3 のインデント 16px
   WP では本文の見出しから自動生成（プラグイン or テーマ関数）
   ========================================================================== */

.c-toc {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
  border: 1px solid var(--color-border-default);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-base);
}

.c-toc__list,
.c-toc__children {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.c-toc__children {
  margin-top: var(--space-8);
  padding-left: var(--space-32);
}

.c-toc__link {
  position: relative;
  display: block;
  padding-left: 14px; /* マーカー 6px + 間隔 8px */
  color: var(--color-text-base);
}

.c-toc__link::before {
  content: "";
  position: absolute;
  top: 11px; /* (28 − 6) ÷ 2 */
  left: 0;
  width: 6px; /* Figma 固有寸法: マーカー */
  height: 6px;
  background-color: var(--color-bg-brand);
}

.c-toc__child-link {
  display: block;
  color: var(--color-text-base);
}

/* Figma: ホバーで color/bg/brand + 下線 */
.c-toc__link:hover,
.c-toc__child-link:hover {
  color: var(--color-text-brand);
  text-decoration: underline;
}

@media (max-width: 1023px) {

  .c-toc {
    gap: var(--space-16);
    padding: var(--space-24);
  }

  .c-toc__title {
    font-size: 1.125rem; /* SP: renewal/JP/Label/18/Bold（.t-jp-label-18-bold） */
    line-height: calc(30 / 18);
  }

  .c-toc__link,
  .c-toc__child-link {
    font-size: 0.875rem; /* SP: renewal/JP/14/Regular（.t-jp-14-regular） */
    line-height: calc(24 / 14);
  }

  .c-toc__link {
    padding-left: 10px; /* マーカー 4px + 間隔 6px（Figma SP） */
  }

  .c-toc__link::before {
    top: 10px; /* (24 − 4) ÷ 2 */
    width: 4px; /* Figma 固有寸法: SP のマーカー */
    height: 4px;
  }

  .c-toc__children {
    padding-left: var(--space-16);
  }
}

/* 目次のリンク先（Easy Table of Contents が見出しの中に入れる span）。追従するヘッダーの高さ分は
   html の scroll-padding-top（c-header.css）で取り、見出しとの間に 32px のすき間を空ける（c-heading-h2 と同じ） */
.ez-toc-section {
  scroll-margin-top: var(--space-32);
}