/* この記事の図解だけ。共通UI（/assets/report.css）のセレクタは一切持たない。

   規約：
   - セレクタの先頭は必ず .fig- で始まるクラスにする。要素セレクタ単独、:root、body、
     共通UIのクラス（.viz / .sb / .key など）を起点にしたルールは書かない。
     こうしておくと、このファイルを後から読んでも共通UIの余白やタイポグラフィが動かない。
   - 色・書体は /assets/report.css が定義しているカスタムプロパティだけを使う。
     独自の色を足すと、記事だけ配色が浮く。
   - 図の外枠・見出し・注記・出典は共通の .viz / .viz__cap / .viz__note / .viz__foot が持つ。
     ここが受け持つのは、その内側の並べ方だけ。 */

/* ============ 中扉のPART色 ============ */
/* 共通CSSの `.gate .gate__no { color: var(--part-c, var(--chrome-2)) }` が読む変数。
   何色にするかは記事ごとの判断なので、記事側で入れる。指定しなければ共通の既定色になる。
   ここだけは .fig- 始まりではないが、共通UIの指定を上書きせず、変数を渡すだけである。 */

#gate1 { --part-c: #4d5b6b; }
#gate2 { --part-c: #4a5a4f; }
#gate3 { --part-c: #5a5162; }

/* ============ 共通の下ごしらえ ============ */

.fig-loops,
.fig-legend,
.fig-hires,
.fig-fork,
.fig-two,
.fig-loop,
.fig-spill,
.fig-funnel,
.fig-trans,
.fig-play,
.fig-gap {
  font-family: var(--zen);
  color: var(--ink-body);
  font-size: 13.5px;
  line-height: 1.85;
}

.fig-loops p,
.fig-legend p,
.fig-fork p,
.fig-two p,
.fig-loop p,
.fig-spill p,
.fig-play p {
  margin: 0;
}

/* ============ 図1：成長ループの対比 ============ */

.fig-loops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fig-loops__col {
  padding: 20px 20px 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green);
  border-radius: 3px;
}
.fig-loops__col--warn {
  border-top-color: var(--quit);
  background: var(--amber-wash, #f8f0e8);
}
.fig-loops__h {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 14px;
}
/* 横に並べて → でつなぐと、折り返した行の先頭に矢印が残る。
   縦に積んで ↓ でつなぐと、幅がいくつでも同じ読み方になる。 */
.fig-chain {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 15px;
  justify-items: start;
}
.fig-chain li {
  position: relative;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 12.5px;
  line-height: 1.4;
}
.fig-chain li + li::before {
  content: "↓";
  position: absolute;
  left: 13px;
  top: -14px;
  color: var(--green-pale-2, #b3aea3);
  font-size: 11px;
  line-height: 1;
}
.fig-chain--warn li {
  border-style: dashed;
  color: var(--muted-2);
}
.fig-loops__note {
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.7;
}

/* ============ 図2：バッジの見取り図 ============ */

.fig-legend {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
}
.fig-legend__grp {
  padding: 16px 18px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.fig-legend__grp--own {
  background: var(--amber-wash, #f8f0e8);
  border-color: var(--quit-pale, #e6cdba);
}
.fig-legend__t {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  margin-bottom: 12px;
}
.fig-legend__items {
  display: grid;
  gap: 10px;
}
.fig-legend__it p {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted-2);
  margin-top: 4px;
}

/* ============ 図3：定型職と判断職の対比 ============ */

/* 図の中で複数の系列群を分ける小見出し（図3で使用） */
.fig-grp {
  margin: 20px 2px 8px;
  font: 700 12px/1.6 var(--zen);
  letter-spacing: 0.06em;
  color: var(--muted-2);
  padding-left: 10px;
  border-left: 3px solid var(--rule-2);
}
.fig-grp:first-of-type {
  margin-top: 6px;
}

.fig-hires {
  display: grid;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.fig-hires__row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: var(--panel);
}
.fig-hires__name {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
}
.fig-hires__name small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 2px;
}
.fig-hires__bars {
  display: grid;
  gap: 7px;
}
.fig-hires__b {
  position: relative;
  width: var(--w);
  min-width: 120px;
  padding: 7px 12px;
  background: var(--green);
  color: #fff;
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.fig-hires__b b {
  font-size: 13px;
  font-weight: 700;
}
.fig-hires__b span {
  font-family: var(--grotesk);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.fig-hires__b--down {
  background: var(--quit);
}
.fig-hires__b--up {
  background: var(--green-deep);
}
/* ============ 図6：同じ技術、逆の結果 ============ */

.fig-fork {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.fig-fork__side {
  padding: 16px 18px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.fig-fork__side--down {
  border-top: 3px solid var(--quit);
}
.fig-fork__side--up {
  border-top: 3px solid var(--green);
}
.fig-fork__h {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 10px;
}
.fig-fork__side ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fig-fork__side li {
  font-size: 12.5px;
  line-height: 1.6;
  padding-left: 12px;
  border-left: 2px solid var(--rule-2);
}
.fig-fork__side small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 2px;
}
.fig-fork__mid {
  padding: 16px 18px 14px;
  background: var(--chrome);
  color: #fff;
  border-radius: 3px;
}
.fig-fork__midh {
  font-family: var(--grotesk);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--green-pale);
  margin-bottom: 12px;
}
.fig-fork__mid ol {
  counter-reset: fk;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.fig-fork__mid li {
  counter-increment: fk;
  position: relative;
  padding-left: 24px;
}
.fig-fork__mid li::before {
  content: counter(fk);
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  font-family: var(--grotesk);
  font-size: 9.5px;
}
.fig-fork__mid b {
  display: block;
  font-size: 13px;
  color: #fff;
}
.fig-fork__mid span {
  display: block;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

/* ============ 図8：二つの経路と、その証拠 ============ */
/* 経路の色は列ごとに --acc で渡す。以下のルールは色名を直に書かないので、
   配色を変えるときは --acc の3行だけを触ればよい。 */

.fig-two__col--hollow {
  --acc: var(--chrome);
  --acc-soft: var(--green-wash-2, #e2dfd8);
  --acc-line: var(--rule-2);
}
.fig-two__col--curve {
  --acc: var(--amber, #a8522f);
  --acc-soft: var(--amber-wash, #f8f0e8);
  --acc-line: var(--quit-pale, #e6cdba);
}

.fig-two__top {
  padding: 12px;
  background: var(--chrome);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 3px;
}
.fig-two__split {
  height: 22px;
  margin: 0 25%;
  border-left: 1px solid var(--rule-2);
  border-right: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}
.fig-two__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fig-two__col {
  padding: 16px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--acc);
  border-radius: 3px;
}
.fig-two__h {
  font-weight: 700;
  font-size: 14px;
  color: var(--acc);
  margin-bottom: 10px;
}
.fig-two__choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.fig-two__choices li {
  font-size: 12.5px;
  line-height: 1.6;
  padding-left: 15px;
  position: relative;
}
.fig-two__choices li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acc-line);
}
.fig-two__sum {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.6;
}
.fig-two__sum b {
  color: var(--acc);
}
/* 上段（設計の選択）と下段（証拠）の境目。ここで図の話が変わる。 */
.fig-two__evh {
  margin: 18px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--acc);
  font-family: var(--grotesk);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--acc);
}
.fig-two__card {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--acc-soft);
  border: 1px solid var(--acc-line);
  border-radius: 3px;
}
.fig-two__card + .fig-two__card {
  margin-top: 10px;
}
.fig-two__card--slim {
  grid-template-columns: 1fr;
}
.fig-two__n {
  font-family: var(--grotesk);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--acc);
}
.fig-two__n small {
  font-size: 12px;
  font-weight: 500;
  margin-left: 2px;
}
.fig-two__card p {
  font-size: 12.5px;
  line-height: 1.75;
}

/* ============ 図9：市場失敗ループ ============ */

.fig-loop__src {
  padding: 11px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-weight: 700;
  font-size: 13px;
}
.fig-loop__gate {
  margin: 10px auto;
  padding: 9px 18px;
  width: max-content;
  max-width: 100%;
  background: var(--chrome);
  color: #fff;
  border-radius: 3px;
  font-size: 12.5px;
}
.fig-loop__ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.fig-loop__way {
  padding: 14px 16px;
  border-radius: 3px;
  border: 1px solid var(--rule);
  background: var(--panel);
}
.fig-loop__way--good {
  border-top: 3px solid var(--green);
}
.fig-loop__way--bad {
  border-top: 3px solid var(--quit);
  background: var(--amber-wash, #f8f0e8);
}
.fig-loop__wt {
  display: block;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 5px;
}
.fig-loop__way p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted-2);
}
.fig-loop__cycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.fig-loop__cycle li {
  position: relative;
  padding: 13px 14px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-radius: 3px;
}
.fig-loop__cycle li + li::before {
  content: "→";
  position: absolute;
  left: -11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rule-2);
  font-size: 12px;
}
.fig-loop__cycle b {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}
.fig-loop__cycle span {
  display: block;
  margin-top: 6px;
  font-family: var(--grotesk);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.fig-loop__dash {
  border-style: dashed;
  background: var(--grid);
}
.fig-loop__back {
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px dashed var(--rule-2);
  border-radius: 3px;
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
}

/* ============ 図10：3つの派生 ============ */

.fig-spill {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.fig-spill__c {
  padding: 16px 18px 14px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green-pale-2, #b3aea3);
  border-radius: 3px;
}
.fig-spill__t {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 9px;
}
.fig-spill__p {
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted-2);
}
.fig-spill__e {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-body);
}

/* ============ 図12：変換ファネル ============ */

.fig-funnel__eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--chrome);
  border-radius: 3px;
}
.fig-funnel__eq span {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  font-size: 12.5px;
  color: #fff;
}
.fig-funnel__eq .fig-funnel__lead {
  background: var(--green-pale);
  border-color: var(--green-pale);
  color: var(--chrome);
  font-weight: 700;
}
.fig-funnel__eq i {
  font-style: normal;
  font-family: var(--grotesk);
  color: var(--green-pale);
  font-size: 13px;
}

/* ============ 表（図4・図7・図11・図12） ============ */

.fig-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.7;
  background: var(--panel);
}
.fig-tbl th,
.fig-tbl td {
  padding: 11px 14px;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.fig-tbl thead th {
  background: var(--grid);
  font-family: var(--zen);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.fig-tbl tbody th {
  width: 168px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
}
.fig-tbl tbody th small {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.fig-tbl td small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.fig-tbl--hire tbody th {
  width: 190px;
}
.fig-tbl--watch tbody th {
  width: 92px;
}
.fig-neg {
  color: var(--quit);
}
.fig-up {
  color: var(--green-deep) !important;
  font-weight: 700;
}

/* ============ 図13・図14：翻訳表 ============ */

.fig-trans {
  display: grid;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.fig-trans__r {
  display: grid;
  grid-template-columns: 1fr 42px 1.35fr;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--panel);
}
.fig-trans__r span {
  font-size: 12.5px;
  color: var(--muted-2);
}
.fig-trans__r i {
  font-style: normal;
  text-align: center;
  color: var(--green-pale-2, #b3aea3);
}
.fig-trans__r b {
  font-size: 13px;
  color: var(--ink);
}

/* ============ 図15：2つの仕組み ============ */

.fig-play {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fig-play__c {
  padding: 20px 22px 18px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--green);
  border-radius: 3px;
}
.fig-play__c--alt {
  border-top-color: var(--quit);
}
.fig-play__no {
  font-family: var(--grotesk);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.fig-play__t {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 8px;
  line-height: 1.4;
}
.fig-play__d {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-body);
}
.fig-play__steps {
  counter-reset: pl;
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fig-play__steps li {
  counter-increment: pl;
  position: relative;
  padding: 0 0 0 26px;
  font-size: 12.5px;
  line-height: 1.65;
}
.fig-play__steps li::before {
  content: counter(pl);
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grid);
  border: 1px solid var(--rule-2);
  font-family: var(--grotesk);
  font-size: 10px;
  color: var(--muted-2);
}
.fig-play__meta {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 4px 12px;
  font-size: 12px;
  line-height: 1.7;
}
.fig-play__meta dt {
  font-family: var(--grotesk);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding-top: 3px;
}
.fig-play__meta dd {
  margin: 0;
  color: var(--ink-body);
}

/* ============ 図16：置いていないもの ============ */

.fig-gap {
  display: grid;
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.fig-gap__r {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 13px 18px;
  background: var(--panel);
}
.fig-gap__q {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted-2);
  padding-left: 16px;
  position: relative;
}
.fig-gap__q::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--quit);
  font-weight: 700;
}
.fig-gap__a {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink);
  padding-left: 16px;
  border-left: 2px solid var(--rule-2);
}

/* ============ モバイル ============ */
/* 共通CSSのブレークポイント（700px）に合わせる。列を1つにたたみ、
   矢印の向きを縦へ変える。表は .viz__scroll が横スクロールを持つ。 */

@media (max-width: 700px) {
  .fig-loops,
  .fig-legend,
  .fig-two__cols,
  .fig-play,
  .fig-loop__ways {
    grid-template-columns: 1fr;
  }
  .fig-spill,
  .fig-loop__cycle {
    grid-template-columns: 1fr;
  }
  .fig-loop__cycle li + li::before {
    left: 50%;
    top: -9px;
    transform: translateX(-50%);
    content: "↓";
  }
  .fig-fork {
    grid-template-columns: 1fr;
  }
  .fig-hires__row,
  .fig-gap__r {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fig-gap__a {
    border-left: 0;
    padding-left: 16px;
  }
  .fig-trans__r {
    grid-template-columns: 1fr 30px 1fr;
    gap: 6px;
    padding: 12px 14px;
  }
  .fig-two__split {
    margin: 0 30%;
  }
  .fig-two__card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fig-play__meta {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .fig-play__meta dt {
    padding-top: 8px;
  }
  .fig-funnel__eq {
    padding: 14px;
  }
}