/* =================================================================
 * c-list — リスト共通（Figma スタイルガイド 5494:295875 / リスト）
 *   ・ul（点）   : <ul class="c-list">…                  （項目21）
 *   ・ul 小       : <ul class="c-list c-list--sm">          （14px）
 *   ・ol（番号）  : <ol class="c-list c-list--ordered">      （項目22）
 *   ・補足（※）   : <ul class="c-list c-list--note">         （項目24）
 *   ・補足（※n）  : <ul class="c-list c-list--note c-list--note-num">
 *   入れ子は li の中に同じ .c-list を入れれば 24px インデントされる。
 *
 * 説明リスト（dl dt dd・項目23）は本ファイル末尾の .c-desc-list を使う。
 * base.css が ul/ol を list-style:none にリセット済みのため、マーカーは
 * ::before で描画する。
 * =================================================================*/

.c-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                 /* 8px */
  font-size: var(--fs-body);           /* 16px */
  line-height: var(--lh-loose);        /* 1.8 */
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-default);
}

.c-list--sm {
  font-size: var(--fs-body-sm);        /* 14px */
}

.c-list > li {
  position: relative;
  padding-left: 22rem;                  /* マーカー幅14px + ガター8px */
}

/* ● デフォルトの点マーカー（ul） */
.c-list > li::before {
  content: "";
  position: absolute;
  left: 4rem;
  top: calc(var(--lh-loose) * 0.5em);  /* 1行目の中央 */
  width: 6rem;
  height: 6rem;
  margin-top: -3rem;
  border-radius: var(--radius-pill);
  background-color: currentColor;
}

/* 入れ子（24px インデント） */
.c-list .c-list {
  margin-top: var(--space-2);          /* 8px */
  margin-left: var(--space-5);         /* 24px */
}

/* 1. 2. 3. … 番号リスト（ol） */
.c-list--ordered { counter-reset: c-list-ol; }
.c-list--ordered > li { counter-increment: c-list-ol; }
.c-list--ordered > li::before {
  content: counter(c-list-ol) ".";
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  margin-top: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

/* ※ 補足リスト */
.c-list--note { font-size: var(--fs-body-sm); }  /* 14px */
.c-list--note > li::before {
  content: "※";
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  margin-top: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

/* ※1 ※2 … 番号付き補足リスト */
.c-list--note-num { counter-reset: c-list-note; }
.c-list--note-num > li {
  counter-increment: c-list-note;
  padding-left: 30rem;                  /* ※n 分の幅 */
}
.c-list--note-num > li::before {
  content: "※" counter(c-list-note);
}

/* -----------------------------------------------------------------
 * c-desc-list — 説明リスト（dl dt dd・項目23）
 *   <dl class="c-desc-list">
 *     <div><dt>タイトル</dt><dd>説明文…</dd></div>
 *     …
 *   </dl>
 *   dt 先頭に "1." 連番が付き、点線下線が入る。
 * ----------------------------------------------------------------- */
.c-desc-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);                 /* 32px */
  line-height: var(--lh-loose);
  color: var(--color-text-default);
  counter-reset: c-desc;
}

.c-desc-list > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);                 /* 16px */
}

.c-desc-list dt {
  counter-increment: c-desc;
  display: flex;
  gap: var(--space-2);                 /* 8px */
  padding-bottom: var(--space-2);      /* 8px */
  font-size: var(--fs-label);          /* 18px */
  font-weight: var(--fw-bold);
  letter-spacing: var(--letter-spacing-body);
  border-bottom: 2rem dashed color-mix(in srgb, var(--color-neutral-04) 88%, transparent);
}

.c-desc-list dt::before {
  content: counter(c-desc) ".";
  flex-shrink: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.c-desc-list dd {
  margin: 0;
  font-size: var(--fs-body);           /* 16px */
  font-weight: var(--fw-regular);
  letter-spacing: var(--letter-spacing-body);
}