/* ==========================================================================
   p-glossary — PC/16_GlossaryIndex（/glossary/）・PC/17_GlossaryDetail（/glossary/{slug}/）
   ========================================================================== */

/* ---- 一覧: 索引（c-page-header__filter 内） ----
   Figma: タイトル行 → 索引 64px（c-page-header の 32px + 32px）、見出し → リンク 16px / SP: 32px（24 + 8）・見出し → リンク 8px */
.p-glossary-index {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-32);
}

.p-glossary-index__title {
  color: var(--color-text-base);
}

/* ---- 一覧: 行ごとのブロック（見出し → 用語 64px、ブロック間 64px） ---- */
.p-glossary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.p-glossary-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  scroll-margin-top: var(--space-32); /* ヘッダーの高さ分は html の scroll-padding-top（c-header.css）で取る。見出しとの間の余白だけ */
}

/* ---- 詳細: 用語の定義 ---- */
.p-glossary-term {
  padding-block: var(--space-80);
}

.p-glossary-term__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: calc(var(--layout-container-max) + var(--layout-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
  color: var(--color-text-base);
}

.p-glossary-term__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p-glossary-term__reading {
  color: var(--color-text-muted);
}

/* ---- 詳細: 関連する用語 + 一覧に戻る ---- */
.p-glossary-related {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.p-glossary-related__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
}

.p-glossary-related__back {
  align-self: center;
}

@media (max-width: 1023px) {

  .p-glossary-index {
    gap: var(--space-8);
    margin-top: var(--space-8);
  }

  .p-glossary-list,
  .p-glossary-group,
  .p-glossary-related__group {
    gap: var(--space-32);
  }

  .p-glossary-group .c-glossary-item-list {
    gap: var(--space-8); /* Figma SP 一覧: 用語の間 8px（詳細の関連用語は 16px のまま） */
  }

  .p-glossary-term {
    padding-block: var(--space-64);
  }

  .p-glossary-term__inner {
    padding-inline: var(--space-16); /* Figma SP: 左右 16px */
  }

  .p-glossary-term__head {
    gap: var(--space-16);
  }

  .p-glossary-term__name {
    font-size: 2rem; /* SP: 高さ 144px = 3 行 × 48px → renewal/JP/32/Bold（.t-jp-32-bold） */
    line-height: calc(48 / 32);
  }

  .p-glossary-term__definition {
    font-size: 1rem; /* SP: 4 行 × 28px → renewal/JP/16/Regular（.t-jp-16-regular） */
    line-height: calc(28 / 16);
  }

  .p-glossary-term__text {
    font-size: 0.875rem; /* SP: 4 行 × 24px → renewal/JP/14/Regular（.t-jp-14-regular） */
    line-height: calc(24 / 14);
  }

  .p-glossary-related__back {
    align-self: stretch; /* Figma SP: 幅いっぱい（343×56） */
  }
}