/* Professional Tech Lab design-system · data-display.css · tokens applied · no inline hex/font */
/* ===================================================================
 * Professional Tech Lab Design System — Data Display 部品
 * データ表示部品（カード／表／リスト／アコーディオン／空状態／
 *   スケルトン／プログレス／ページヘッダ／アラート／KPI／
 *   タイムライン／凡例）。
 *
 * 正本トークン: ./tokens.css（var() のみ参照。独自 :root 宣言なし）
 * 規律: ./bengo4-corporate-evidence.md
 *   - 要素分離は「余白＋背景色＋タイポ階層」のみ
 *   - border は 0 起点、hairline が要る箇所だけ 1px solid var(--color-gray) を全周
 *   - side-stripe（border-(left|top|right|bottom) 2-6px solid）禁止
 *   - 影は原則なし（浮遊面のみ var(--shadow-sm/md)。本ファイルは平面部品のみ）
 *   - 角丸は標準 0、強調箇所のみ var(--radius-soft)、ピルはバッジ/チップのみ
 *   - 赤は1画面1-2要素まで（赤背景フルブリード禁止＝淡tintまで）
 *   - 緑/橙/info の拡張色は社内ダッシュボードの状態表示専用
 *   - 左揃え基調、数値カラムのみ右揃え
 *   - 全インタラクティブ要素に hover / focus-visible / disabled を実装
 * =================================================================== */

/* ===================================================================
 * 1. ds-card — フラットカード
 * 用途: 情報のまとまり（サマリ／導線／フォーム枠）。
 * 構成: ヘッダ / 本文 / フッタ。枠線最小・影なし・var(--pad-card)。
 * 状態: 既定 / a要素hover（薄背景）/ .ds-card--disabled（不活性）
 * =================================================================== */
.ds-card {
  display: block;
  background-color: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-soft);
  padding: var(--pad-card);
  color: inherit;
  text-decoration: none;
}
.ds-card__header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 3);
}
.ds-card__title {
  font-family: var(--font-noto);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-black);
}
.ds-card__meta {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-snug);
  color: var(--color-subtle);
}
.ds-card__body {
  font-family: var(--font-noto);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-black);
}
.ds-card__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
  margin-top: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 3);
  border-top: var(--border-hairline);
  font-family: var(--font-noto);
  font-size: var(--text-small);
  color: var(--color-subtle);
}
/* a要素や button要素としても使える場合のインタラクション */
a.ds-card,
button.ds-card {
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out-cubic),
              border-color var(--duration-base) var(--ease-out-cubic);
}
a.ds-card:hover,
button.ds-card:hover {
  background-color: var(--color-img-bg);
  border-color: var(--color-gray-300);
  text-decoration: none;
}
a.ds-card:focus-visible,
button.ds-card:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ds-card.ds-card--disabled,
a.ds-card[aria-disabled="true"],
button.ds-card:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* ===================================================================
 * 2. ds-table — データテーブル（ヒートマップ）
 * 用途: 部署×指標などの多列マトリクス。数値カラムは右揃え＋tabular。
 * シグナル: __cell--pos(好調緑) / --warn(注意橙) / --neg(損失赤) は文字色。
 *           pos/warn は社内ダッシュボード専用拡張色。
 * 状態: 既定 / ゼブラ淡背景 / ソート可ヘッダ(aria-sort) / .ds-table--compact
 * =================================================================== */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-noto);
  font-size: var(--text-body);
  color: var(--color-black);
}
.ds-table caption {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  text-align: left;
  color: var(--color-subtle);
  padding-bottom: calc(var(--spacing) * 2);
}
.ds-table thead th {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  text-align: left;
  color: var(--color-subtle);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);
  border-bottom: var(--border-hairline);
  white-space: nowrap;
}
.ds-table th.ds-table__num,
.ds-table td.ds-table__num {
  text-align: right;
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* ソート可ヘッダ（button をヘッダ内に置く想定） */
.ds-table__sort {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  font: inherit;
  color: inherit;
  background: none;
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  transition: color var(--duration-base) var(--ease-in-out);
}
.ds-table__sort:hover { color: var(--color-black); }
.ds-table__sort:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ds-table__sort-arrow {
  font-family: var(--font-en);
  font-size: var(--text-small);
  color: var(--color-gray-400);
  transition: color var(--duration-base) var(--ease-in-out);
}
.ds-table th[aria-sort="ascending"] .ds-table__sort-arrow,
.ds-table th[aria-sort="descending"] .ds-table__sort-arrow {
  color: var(--color-black);
}
.ds-table th[aria-sort="ascending"] .ds-table__sort,
.ds-table th[aria-sort="descending"] .ds-table__sort {
  color: var(--color-black);
}
.ds-table tbody tr {
  border-bottom: var(--border-hairline);
  transition: background-color var(--duration-base) var(--ease-in-out);
}
.ds-table tbody tr:last-child { border-bottom: 0; }
/* ゼブラ（淡背景） */
.ds-table tbody tr:nth-child(even) { background-color: var(--color-gray-050); }
.ds-table tbody tr:hover { background-color: var(--color-img-bg); }
.ds-table tbody td {
  padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2.5);
  vertical-align: middle;
  line-height: var(--leading-snug);
}
.ds-table th.ds-table__row-head,
.ds-table td.ds-table__row-head {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.ds-table__cell--pos  { color: var(--color-success); font-weight: var(--font-weight-medium); } /* 社内ダッシュボード専用 */
.ds-table__cell--warn { color: var(--color-warning); font-weight: var(--font-weight-medium); } /* 社内ダッシュボード専用 */
.ds-table__cell--neg  { color: var(--color-error);   font-weight: var(--font-weight-medium); }
.ds-table__empty {
  text-align: center;
  color: var(--color-subtle);
  padding: calc(var(--spacing) * 8) calc(var(--spacing) * 2.5);
}
/* compact: 高密度表示 */
.ds-table--compact thead th { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); }
.ds-table--compact tbody td { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2); }

/* ===================================================================
 * 3. ds-list — 縦リスト（単純 / 2行 / メタ付き）
 * 用途: 一覧・履歴・通知の縦並び。区切りは行下 hairline、hover は薄背景。
 * 状態: 既定 / a要素hover / .is-active / .ds-list__item--disabled
 * =================================================================== */
.ds-list {
  list-style: none;
  background-color: var(--color-white);
}
.ds-list__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
  border-bottom: var(--border-hairline);
  color: inherit;
  text-decoration: none;
}
.ds-list__item:last-child { border-bottom: 0; }
a.ds-list__item,
button.ds-list__item {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  transition: background-color var(--duration-base) var(--ease-in-out);
}
a.ds-list__item:hover,
button.ds-list__item:hover { background-color: var(--color-img-bg); }
a.ds-list__item:focus-visible,
button.ds-list__item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1);
}
.ds-list__item.is-active { background-color: var(--color-img-bg); }
.ds-list__item.ds-list__item--disabled,
a.ds-list__item[aria-disabled="true"],
button.ds-list__item:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.ds-list__body { flex: 1 1 auto; min-width: 0; }
.ds-list__primary {
  font-family: var(--font-noto);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-black);
}
.ds-list__secondary {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-subtle);
  margin-top: calc(var(--spacing) * 0.5);
}
.ds-list__meta {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: var(--text-small);
  color: var(--color-subtle);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===================================================================
 * 4. ds-accordion — アコーディオン（開閉）
 * 用途: FAQ・詳細の折りたたみ。z-index 不要（インライン展開）。
 * 状態: 閉（既定）/ 開（.is-open or [open]）/ trigger:hover / :focus-visible / :disabled
 * =================================================================== */
.ds-accordion {
  background-color: var(--color-white);
  border: var(--border-hairline);
  border-radius: var(--radius-soft);
}
.ds-accordion__item { border-bottom: var(--border-hairline); }
.ds-accordion__item:last-child { border-bottom: 0; }
.ds-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 4);
  font-family: var(--font-noto);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-black);
  transition: background-color var(--duration-base) var(--ease-in-out);
}
.ds-accordion__trigger:hover { background-color: var(--color-img-bg); }
.ds-accordion__trigger:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1);
}
.ds-accordion__trigger:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.ds-accordion__arrow {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: var(--text-body);
  color: var(--color-subtle);
  transition: transform var(--duration-base) var(--ease-out-cubic),
              color var(--duration-base) var(--ease-in-out);
}
.ds-accordion__item.is-open > .ds-accordion__trigger .ds-accordion__arrow,
.ds-accordion__trigger[aria-expanded="true"] .ds-accordion__arrow {
  transform: rotate(180deg);
  color: var(--color-black);
}
.ds-accordion__panel {
  padding: 0 calc(var(--spacing) * 4) calc(var(--spacing) * 4);
  font-family: var(--font-noto);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-black);
}
.ds-accordion__panel[hidden] { display: none; }

/* ===================================================================
 * 5. ds-empty — 空状態
 * 用途: 一覧/検索結果ゼロ件。代理ダミーで埋めず「無い」ことを淡く伝える。
 * 構成: メッセージ＋補助＋任意CTA。中央寄せ・余白主体。
 * =================================================================== */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 12) var(--gap-card);
}
.ds-empty__title {
  font-family: var(--font-noto);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-subtle-strong);
}
.ds-empty__message {
  font-family: var(--font-noto);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-subtle-strong);
}
.ds-empty__hint {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-subtle);
}
.ds-empty__action { margin-top: calc(var(--spacing) * 3); }

/* ===================================================================
 * 6. ds-skeleton — 読み込み中スケルトン
 * 用途: データ取得中のプレースホルダ。控えめなパルス（opacityのみ）。
 * バリエーション: __line（テキスト行）/ __row（行）/ __card（カード）
 * =================================================================== */
.ds-skeleton { animation: ds-skeleton-pulse 1.8s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) {
  .ds-skeleton { animation: none; }
}
.ds-skeleton__line,
.ds-skeleton__row,
.ds-skeleton__card {
  background-color: var(--color-gray);
  border-radius: var(--radius-soft);
}
.ds-skeleton__line {
  height: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 2);
}
.ds-skeleton__line:last-child { margin-bottom: 0; }
.ds-skeleton__line--sm { width: 40%; }
.ds-skeleton__line--md { width: 70%; }
.ds-skeleton__line--lg { width: 100%; }
.ds-skeleton__row {
  height: calc(var(--spacing) * 12);
  margin-bottom: calc(var(--spacing) * 3);
}
.ds-skeleton__row:last-child { margin-bottom: 0; }
.ds-skeleton__card {
  height: calc(var(--spacing) * 28);
  border-radius: var(--radius-soft);
}
@keyframes ds-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ===================================================================
 * 7. ds-progress — プログレスバー
 * 用途: 進捗・達成率の水平バー。トラック薄グレー・塗り墨黒。
 * 状態: 既定(墨黒) / --success(緑) / --warning(橙) ※社内ダッシュボード専用
 * =================================================================== */
.ds-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 1.5);
}
.ds-progress__label {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-subtle);
}
.ds-progress__value {
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ds-progress {
  width: 100%;
  height: calc(var(--spacing) * 1.5);
  background-color: var(--color-gray);
  border-radius: var(--radius-soft);
  overflow: hidden;
}
.ds-progress__fill {
  height: 100%;
  background-color: var(--color-black);
  transition: width var(--duration-slow) var(--ease-out-cubic);
}
.ds-progress--success .ds-progress__fill { background-color: var(--color-success); } /* 社内ダッシュボード専用 */
.ds-progress--warning .ds-progress__fill { background-color: var(--color-warning); } /* 社内ダッシュボード専用 */

/* ===================================================================
 * 8. ds-page-header — ページ見出し（h1 ＋ サブ ＋ アクション枠）
 * 用途: ダッシュボード/一覧ページ最上部。下罫線は全周 hairline のみ。
 * 正しい使い方: SaaS定型ナビ（左ロゴ＋中央リンク＋右CTA）にしない。
 * =================================================================== */
.ds-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 4);
  padding: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 4);
  border-bottom: var(--border-hairline);
}
.ds-page-header__lead { min-width: 0; }
.ds-page-header__title {
  font-family: var(--font-noto);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-black);
}
.ds-page-header__sub {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-snug);
  color: var(--color-subtle);
  margin-top: calc(var(--spacing) * 1);
}
.ds-page-header__actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  flex: 0 0 auto;
}

/* ===================================================================
 * 9. ds-alert — 状態通知バー（1画面1本）
 * 用途: 画面上部の状態通知。状態tint背景＋アイコン＋本文＋閉じる。
 * 正しい使い方: 赤背景フルブリード禁止（淡tint --color-error-bg まで）。
 * 状態: --info / --success / --warning / --error（info/success/warning は社内専用）
 * =================================================================== */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 2.5);
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
  border-radius: var(--radius-soft);
  font-family: var(--font-noto);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--color-black);
}
.ds-alert[hidden] { display: none; }
.ds-alert__icon {
  flex: 0 0 auto;
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  margin-top: calc(var(--spacing) * 1);
  border-radius: 50%;
}
.ds-alert__body { flex: 1 1 auto; min-width: 0; }
.ds-alert__title {
  font-weight: var(--font-weight-bold);
  margin-bottom: calc(var(--spacing) * 0.5);
}
.ds-alert__text { color: var(--color-subtle-strong); }
.ds-alert__close {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: var(--text-body);
  line-height: 1;
  color: var(--color-subtle);
  background: none;
  cursor: pointer;
  padding: calc(var(--spacing) * 0.5);
  border-radius: var(--radius-soft);
  transition: color var(--duration-base) var(--ease-in-out),
              background-color var(--duration-base) var(--ease-in-out);
}
.ds-alert__close:hover {
  color: var(--color-black);
  background-color: var(--color-gray-100);
}
.ds-alert__close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.ds-alert--info    { background-color: var(--color-info-bg); }    /* 社内ダッシュボード専用 */
.ds-alert--info    .ds-alert__icon { background-color: var(--color-info); }
.ds-alert--success { background-color: var(--color-success-bg); } /* 社内ダッシュボード専用 */
.ds-alert--success .ds-alert__icon { background-color: var(--color-success); }
.ds-alert--warning { background-color: var(--color-warning-bg); } /* 社内ダッシュボード専用 */
.ds-alert--warning .ds-alert__icon { background-color: var(--color-warning); }
.ds-alert--error   { background-color: var(--color-error-bg); }   /* 淡tintまで・フルブリード禁止 */
.ds-alert--error   .ds-alert__icon { background-color: var(--color-error); }
.ds-alert--error   .ds-alert__title { color: var(--color-error); }

/* ===================================================================
 * 10. ds-kpi — KPIタイル（社内ダッシュボード専用）
 * 用途: 主要指標のラベル＋大数値＋増減。数値は .num（tabular）。
 * 状態: __delta--up(好調緑) / --down(赤) / --flat(subtle)
 * =================================================================== */
.ds-kpi {
  padding: calc(var(--spacing) * 5) var(--pad-card);
  background-color: var(--color-img-bg);
  border-radius: var(--radius-soft);
}
.ds-kpi__label {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-subtle);
  margin-bottom: calc(var(--spacing) * 1.5);
}
.ds-kpi__value {
  font-family: var(--font-en);
  font-size: var(--text-kpi);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.ds-kpi__unit {
  font-family: var(--font-en);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
  color: var(--color-subtle);
  margin-left: calc(var(--spacing) * 1);
}
.ds-kpi__sub {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-normal);
  line-height: var(--leading-snug);
  color: var(--color-subtle);
  margin-top: calc(var(--spacing) * 1);
}
.ds-kpi__delta {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--spacing) * 1);
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-top: calc(var(--spacing) * 1);
}
.ds-kpi__delta--up   { color: var(--color-success); } /* 社内ダッシュボード専用（好調=緑） */
.ds-kpi__delta--down { color: var(--color-error); }
.ds-kpi__delta--flat { color: var(--color-subtle); }

/* ===================================================================
 * 11. ds-timeline — 縦ステップ ＋ signal dot
 * 用途: 年表/工程の時系列。各ステップに状態シグナル（緑/橙/赤）を添える。
 * 正しい使い方: 軸の縦線は hairline。dot で状態を示す。
 * 状態: dot--pos / --warn / --neg、データなし
 * =================================================================== */
.ds-timeline {
  display: flex;
  flex-direction: column;
}
.ds-timeline__step {
  display: grid;
  grid-template-columns: calc(var(--spacing) * 4) 1fr;
  gap: var(--gap-card);
  padding: 0 0 calc(var(--spacing) * 5) calc(var(--spacing) * 0.5);
}
.ds-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.ds-timeline__rail::before {
  content: "";
  position: absolute;
  top: calc(var(--spacing) * 0.5);
  bottom: calc(var(--spacing) * -5);
  width: 1px;
  background-color: var(--color-gray);
}
.ds-timeline__step:last-child .ds-timeline__rail::before { display: none; }
.ds-timeline__dot {
  position: relative;
  z-index: 1;
  width: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 3);
  border-radius: 50%;
  background-color: var(--color-subtle);
  margin-top: calc(var(--spacing) * 1);
}
.ds-timeline__dot--pos  { background-color: var(--color-success); } /* 社内ダッシュボード専用 */
.ds-timeline__dot--warn { background-color: var(--color-warning); } /* 社内ダッシュボード専用 */
.ds-timeline__dot--neg  { background-color: var(--color-error); }
.ds-timeline__year {
  font-family: var(--font-en);
  font-size: var(--text-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-subtle);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-bottom: calc(var(--spacing) * 0.5);
}
.ds-timeline__event {
  font-family: var(--font-noto);
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-black);
  margin-bottom: calc(var(--spacing) * 0.5);
}
.ds-timeline__detail {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--color-subtle);
}

/* ===================================================================
 * 12. ds-legend — 凡例
 * 用途: ヒートマップ/シグナルの色凡例。図表と必ず対で置く。
 * 状態: dot--pos(緑) / --warn(橙) / --neg(赤) / --neutral(subtle)
 *       pos/warn は社内ダッシュボード専用拡張色。
 * =================================================================== */
.ds-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-card);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
  background-color: var(--color-img-bg);
  border-radius: var(--radius-soft);
}
.ds-legend__label {
  font-family: var(--font-noto);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-subtle);
}
.ds-legend__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  font-family: var(--font-noto);
  font-size: var(--text-small);
  color: var(--color-black);
}
.ds-legend__dot {
  width: calc(var(--spacing) * 2);
  height: calc(var(--spacing) * 2);
  border-radius: 50%;
  flex-shrink: 0;
}
.ds-legend__dot--pos     { background-color: var(--color-success); } /* 社内ダッシュボード専用 */
.ds-legend__dot--warn    { background-color: var(--color-warning); } /* 社内ダッシュボード専用 */
.ds-legend__dot--neg     { background-color: var(--color-error); }
.ds-legend__dot--neutral { background-color: var(--color-subtle); }