/*
 * pg-figure — 手で状態を切り替える図の見た目（techtech.club）
 * 自分で動く前の pg-figure-auto.css（使っていない）を写して直したもの。色と寸法は今と同じ（本番の記事ページ 2026-10-11 のスマホの画面写真）。
 * 図の中の強調（データの ink の塗りと線）はオレンジ（#b0761f）。文字と外枠は黒（2026-10-18 CEO指示。黒と灰色が見分けにくいため）。
 * 部品が描いた図の根には class="pgf pgfm" が付く。中の名前は pgfm- で始め、pg-figure-auto.css と同じページに並べても混ざらない。
 * 使い方は pg-figure.js の頭の説明。図の中の色は pg-figure.js の COL が持つ（ここと同じ値）。
 */
.pgf.pgfm {
  --pgf-ink: #151515;
  --pgf-text: #34312e;
  --pgf-sub: #66625c;
  --pgf-faint: #918b83;
  --pgf-line: #dfddd6;
  --pgf-btn: #bcb7ad;
  --pgf-paper: #fbfaf7;
  --pgf-card: #ffffff;
  --pgf-focus: #3f5a45;
  position: relative;
  background: var(--pgf-card);
  border: 1px solid var(--pgf-line);
  padding: 20px 16px 18px;
  margin: 8px 0 32px;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.pgf.pgfm p { margin: 0; }

/* 頭：題 */
.pgfm-kicker { font-size: 13px; font-weight: 700; color: var(--pgf-sub); letter-spacing: .04em; line-height: 1.2; }
.pgf.pgfm .pgfm-title { margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--pgf-ink); line-height: 1.5; word-break: auto-phrase; }

/* 図の上：図の見方。開閉式で、閉じて出す（2026-10-15 CEO指示） */
.pgfm-guide { padding: 0 12px; background: var(--pgf-paper); border-left: 3px solid var(--pgf-line); }
.pgfm-guide > summary {
  display: flex;
  align-items: center;
  gap: .5em;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pgf-ink);
  letter-spacing: .02em;
  cursor: pointer;
  list-style: none;
}
.pgfm-guide > summary::-webkit-details-marker { display: none; }
.pgfm-guide > summary::after { margin-left: auto; font-weight: 400; color: var(--pgf-sub); content: "開く ＋"; }
.pgfm-guide[open] > summary::after { content: "閉じる −"; }
.pgfm-guide > summary:focus-visible { outline: 3px solid var(--pgf-focus); outline-offset: 2px; }
.pgf.pgfm .pgfm-see { padding-bottom: 10px; font-size: 13.5px; line-height: 1.7; color: var(--pgf-text); }

/* 図 */
.pgfm-stage svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.pgfm-stage svg text { font-family: inherit; }

/* 図の下：押す理由になる問い。並びは 問い → いまの Step の説明 → Step のボタン（2026-10-15 CEO指示） */
.pgfm-ask { display: grid; gap: 2px; margin-bottom: -4px; }
.pgf.pgfm .pgfm-q { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--pgf-ink); word-break: auto-phrase; }
.pgfm-q-tag { display: inline-block; margin-right: .6em; padding: 0 6px; font-size: 12px; line-height: 1.7; color: #ffffff; background: var(--pgf-focus); vertical-align: 2px; letter-spacing: .04em; }

/* Step のボタン（操作はこれだけ）：上に「Step1」、下に状態の名前を小さく。
   同じ幅で1行に並べ、スマホの幅で入らないとき（6個など）は2段に折り返す。
   いまの Step は黒の塗りつぶし、次に押す Step（いまの1つ右）は緑の枠（点滅しない）。最後の Step では目印なし */
.pgfm-states { display: flex; flex-wrap: wrap; gap: 6px; }
.pgfm-state {
  flex: 1 1 0;
  min-width: 56px;
  min-height: 52px;
  padding: 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: inherit;
  color: var(--pgf-sub);
  background: var(--pgf-card);
  border: 1px solid var(--pgf-btn);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.pgfm-state-no { font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.pgfm-state-name { font-size: 12px; line-height: 1.35; }
.pgfm-state[aria-pressed="true"] { color: #ffffff; background: var(--pgf-ink); border-color: var(--pgf-ink); }
.pgfm-state[aria-pressed="true"] .pgfm-state-name { font-weight: 700; }
.pgfm-state.is-next { color: var(--pgf-focus); border-color: var(--pgf-focus); box-shadow: inset 0 0 0 1px var(--pgf-focus); }
.pgfm-state:not([aria-pressed="true"]):hover { border-color: var(--pgf-ink); color: var(--pgf-ink); }
.pgfm-state:focus-visible { outline: 3px solid var(--pgf-focus); outline-offset: 2px; }

/* 問いとボタンの間の決まった場所：いまの状態と、前の状態と比べて何が違うか（ボタンを押す手で隠れない位置） */
.pgfm-panel { display: grid; padding: 12px 14px 14px; background: var(--pgf-paper); border-top: 2px solid var(--pgf-ink); }
/* 全部の説明を同じ升に重ねる。升の高さはいちばん長い説明で決まり、切り替えても下が跳ねない */
.pgfm-stack { display: grid; }
.pgfm-card { grid-area: 1 / 1; display: grid; gap: 4px; align-content: start; min-width: 0; }
.pgfm-card[aria-hidden="true"] { visibility: hidden; }
.pgfm-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pgfm-count { font-size: 13px; font-weight: 700; color: var(--pgf-sub); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.pgfm-name { font-size: 16px; font-weight: 700; color: var(--pgf-ink); line-height: 1.5; }
.pgfm-text { font-size: 15px; line-height: 1.8; color: var(--pgf-ink); }

/* 読み上げだけに出す文 */
.pgfm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pgf.pgfm .pgfm-caption { padding-top: 10px; border-top: 1px solid var(--pgf-line); font-size: 12.5px; line-height: 1.65; color: var(--pgf-sub); }
.pgf .pgf-fallback { font-size: 15px; line-height: 1.8; color: #34312e; }

@media (min-width: 760px) {
  .pgf.pgfm { padding: 24px 28px 22px; }
}