/* ==========================================================================
   figure-switch.css — 左に図解、右がスクロールで切り替わる
   --------------------------------------------------------------------------
   CLAUDE.md が許可している唯一のスクロール連動の形。
   JS は assets/js/scroll-switch.js（案C 由来・無改変）。契約：
     [data-switch-figure]   図の要素（1 つ）。この中の [data-switch-step] が切り替わる
     [data-switch-step="i"] 図の中の各段。現在地に is-current が付く
     [data-switch-panel="i"] 右の各パネル。画面中央に来たものが現在地になる
   切り替わりは «面の反転» だけ。移動・拡大・視差は入れない。

   レイアウト：
     .figure-switch            2 列（900px 以上）。左 0.85fr ／ 右 1.15fr
     .figure-switch__figure    左。900px 以上で sticky
     .figure-switch__panels    右
     .figure-switch__panel     各パネル。900px 以上で min-height 60vh（1 枚が中央を占める時間を作る）
   図の一種（帯の積み上げ）：
     .band-stack / .band-stack__band / .band-stack__key / .band-stack__name / .band-stack__result

   ★900px 未満では貼り付けない。図が画面の大半を占めて本文が読めなくなる。
     素直な縦積み（図 → 5 つの説明）に落ちる。
   ========================================================================== */

.figure-switch {
  display: grid;
  gap: var(--space-10);
}

.figure-switch__figure {
  margin: 0;
  padding: var(--space-8);
  background-color: var(--color-bg-tint);
}

.figure-switch__figure-title {
  margin-bottom: var(--space-6);
  color: var(--color-text-strong);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

.figure-switch__panels {
  display: grid;
  gap: var(--space-10);
}

.figure-switch__panel {
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.figure-switch__panel-key {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
}

.figure-switch__panel-key .u-numeric {
  color: var(--navy-400);
  font-size: var(--text-lg);
}

.figure-switch__panel-title {
  margin-bottom: var(--space-4);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  word-break: auto-phrase;
}

.figure-switch__panel-body {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: var(--lh-body);
}

@media (min-width: 900px) {
  .figure-switch {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--space-16);
    align-items: start;
  }

  .figure-switch__sticky {
    position: sticky;
    /* ヘッダー 80px ＋ 余白 40px。ヘッダーは sticky/fixed なので、詰めると図の頭が潜る */
    inset-block-start: calc(var(--header-height) + var(--space-10));
  }

  .figure-switch__panels {
    gap: 0;
  }

  /*
    パネル 1 枚あたりの高さを画面の 6 割ほど確保する。
    ★これが無いと全パネルが一気に画面へ入り、切り替わりが «飛ぶ»。
      scroll-switch.js は画面中央に来たパネルを現在地にするので、
      1 枚が中央を占める時間を作る必要がある。
  */
  .figure-switch__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60vh;
    padding-block: var(--space-10);
  }
}

/* --------------------------------------------------------------------------
   band-stack — 帯の積み上げ（«売上が決まる構造» など、要因 → 結果 の図）
   ★角丸を付けない。塗りと文字色だけで «現在地» を出す。
   ★既定は白地・紺文字。現在地は紺ベタ・白文字（白 on navy-800 = 17.90:1）。
   -------------------------------------------------------------------------- */
.band-stack {
  display: grid;
  gap: var(--space-2);
}

.band-stack__band {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background-color: var(--white);
  color: var(--color-text-strong);
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

.band-stack__band.is-current {
  background-color: var(--color-action);
  color: var(--white);
}

.band-stack__key {
  flex-shrink: 0;
  min-width: 6.5em;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  transition: color var(--duration-base) var(--ease-out);
}

.band-stack__band.is-current .band-stack__key {
  color: var(--navy-200); /* navy-800 の上で 12.64:1 */
}

.band-stack__name {
  font-size: var(--text-base);
  font-weight: var(--fw-medium);
}

/*
  結果。帯と同じ形にしない。要因（積み上がるもの）と結果（そこから出るもの）を
  同じ見た目にすると構造が読めない。下向きの三角 ＋ 罫線だけの行。
*/
.band-stack__result {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.band-stack__result-arrow {
  width: 0;
  height: 0;
  border-inline: 7px solid transparent;
  border-top: 9px solid var(--navy-400);
}

.band-stack__result-label {
  width: 100%;
  padding-block: var(--space-3);
  border-top: var(--border-width-thick) solid var(--color-action);
  color: var(--color-text-strong);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .band-stack__band,
  .band-stack__key {
    transition: none;
  }
}