/* ============================================================
   how.css — 仕組み(なぜ壊れないのか)
   styles.css の :root トークンだけを使う。追加トークン無し。
   ============================================================ */

.how-hero { padding-top: 40px; }

.how-hero .hero-kicker { color: var(--room-make); border-left-color: var(--room-make); }

.answer-band {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0 24px;
  margin: 8px 0 28px;
  max-width: 760px;
}
.answer-label {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.28em;
  color: var(--stamp);
  margin-bottom: 8px;
}
.answer-text {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 38px);
  font-weight: 600; line-height: 1.4; letter-spacing: 0.04em;
}
.answer-text em {
  font-style: normal;
  border-bottom: 4px solid var(--stamp);
  padding-bottom: 2px;
}
.answer-sub { margin-top: 14px; color: var(--ink-2); max-width: 620px; }

.how-lede { max-width: 700px; color: var(--ink-2); margin-bottom: 28px; }

.how-counts { max-width: 760px; }
.how-counts dd { font-size: clamp(24px, 3vw, 38px); }

/* ---------- 共通の小物 ---------- */

.sub-h {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: 0.04em;
  margin: 48px 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}

.plain-p { max-width: 720px; margin-bottom: 14px; }

.ph-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: #FFFFFF;
  background: var(--ink-2);
  padding: 2px 9px;
  border-radius: 2px;
  margin-right: 10px;
  white-space: nowrap;
  vertical-align: middle;
}
.ph-1  { background: var(--room-map); }
.ph-2  { background: var(--room-think); }
.ph-3  { background: var(--room-look); }
.ph-4  { background: var(--room-make); }
.ph-5  { background: var(--room-check); }
.ph-55 { background: var(--room-guard); }
.ph-6  { background: var(--room-ship); }
.ph-7  { background: var(--room-keep); }
.ph-8  { background: var(--ink); }

.pull-quote {
  border-left: 6px solid var(--room-make);
  background: var(--paper-2);
  padding: 22px 26px;
  margin: 28px 0;
  max-width: 800px;
}
.pull-quote > p:first-child {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; line-height: 1.7;
}
.pull-quote-sub {
  margin-top: 12px;
  font-size: 14px; color: var(--ink-2);
}
.pull-quote-red { border-left-color: var(--stamp); }
.pull-quote-red > p:first-child { color: var(--stamp); }

.check-list, .cap-list, .crit-list, .mock-list { list-style: none; max-width: 760px; }
.check-list li, .cap-list li, .crit-list li, .mock-list li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.check-list li:last-child, .cap-list li:last-child,
.crit-list li:last-child, .mock-list li:last-child { border-bottom: none; }
.check-list li::before, .cap-list li::before { content: "—"; position: absolute; left: 0; color: var(--stamp); }
.crit-list li::before { content: "✓"; position: absolute; left: 0; color: var(--room-ship); font-weight: 700; }
.mock-list li::before { content: "×"; position: absolute; left: 0; color: var(--stamp); font-weight: 700; }
.mock-list code { font-size: 13px; background: var(--paper-2); border: 1px solid var(--hairline); padding: 1px 8px; }

.num-list { list-style: none; counter-reset: n; max-width: 760px; }
.num-list li {
  counter-increment: n;
  position: relative;
  padding: 12px 0 12px 40px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px; color: var(--ink-2);
}
.num-list li::before {
  content: counter(n);
  position: absolute; left: 0; top: 12px;
  font-family: var(--font-display);
  font-size: 13px; color: var(--paper);
  background: var(--ink);
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.num-list li strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }

/* ---------- 第1章 バグの3分類 ---------- */

.bug-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--ink);
}
.bug-tab {
  border: none;
  background: var(--paper-2);
  text-align: left;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 2px;
  transition: background var(--dur) ease, color var(--dur) ease;
}
.bug-tab:hover { background: var(--paper-deep); }
.bug-tab-no {
  font-family: var(--font-display);
  font-size: 18px; color: var(--stamp); line-height: 1.2;
}
.bug-tab-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.bug-tab-sub { font-size: 12px; color: var(--ink-2); }
.bug-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.bug-tab[aria-selected="true"] .bug-tab-no,
.bug-tab[aria-selected="true"] .bug-tab-sub { color: var(--paper-deep); }

.bug-panel {
  border: 1px solid var(--ink);
  border-top: none;
  background: var(--paper);
  padding: 26px 28px 30px;
}
.bug-panel[hidden] { display: none; }
.bug-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: 32px;
  align-items: start;
}
.bug-panel-main > p { max-width: 640px; margin-bottom: 12px; font-size: 14.5px; }
.bug-h {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600;
  margin-bottom: 12px;
}
.bug-h4 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600;
  margin: 22px 0 8px;
}
.bug-example {
  border-left: 3px solid var(--hairline);
  padding-left: 12px;
  color: var(--ink-2);
}
.bug-note { color: var(--ink-2); }

.q-list { list-style: none; max-width: 620px; margin: 8px 0 14px; }
.q-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14.5px;
}
.q-mark {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700;
  color: var(--paper); background: var(--stamp);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

.bug-cases { max-width: 640px; }
.bug-case { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.bug-case dt { font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.bug-case dd { font-size: 14px; color: var(--ink-2); }
.bug-case code {
  font-size: 12.5px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  padding: 1px 6px;
}

.boundary-fig {
  margin: 20px 0;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  padding: 16px 18px;
  max-width: 640px;
}
.boundary-cap { font-size: 12.5px; color: var(--ink-2); margin-bottom: 10px; }
.boundary-cap code { font-size: 12px; }
.boundary-scale { list-style: none; display: flex; gap: 3px; }
.boundary-scale li {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 8px 0;
  background: var(--room-ship);
  color: #FFFFFF;
  border-radius: 2px;
}
.boundary-scale li.miss {
  background: var(--paper);
  color: var(--stamp);
  border: 1px dashed var(--stamp);
  font-weight: 700;
}
.boundary-legend {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2);
  margin-top: 10px;
}
.sw { width: 12px; height: 12px; display: inline-block; border-radius: 2px; }
.sw-miss { background: var(--paper); border: 1px dashed var(--stamp); }
.sw-hit { background: var(--room-ship); margin-left: 12px; }

.bug-guard {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 18px 20px;
  position: sticky; top: 96px;
}
.bug-guard-label {
  font-size: 11px; letter-spacing: 0.2em; color: var(--ink-2);
  margin-bottom: 8px;
}
.bug-guard-phase {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  margin-bottom: 10px;
}
.bug-guard-text { font-size: 13.5px; color: var(--ink-2); }

.bugs-summary {
  margin-top: 28px;
  max-width: 800px;
  border-left: 3px solid var(--ink);
  padding-left: 14px;
  font-size: 14.5px; line-height: 1.95;
}

/* ---------- 第2章 TDD ---------- */

.tdd-box {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 20px 22px 24px;
}
.tdd-svg { width: 100%; height: auto; display: block; }

.mk path { fill: var(--ink-2); }

.tdd-node rect {
  fill: var(--paper);
  stroke: var(--hairline);
  stroke-width: 1;
  transition: fill var(--dur) ease, stroke var(--dur) ease;
}
.tdd-node circle { fill: var(--ink-2); transition: fill var(--dur) ease; }
.tdd-node .tdd-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; fill: #FFFFFF; }
.tdd-node .tdd-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; fill: var(--ink); }
.tdd-node .tdd-sub { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-2); }

.tdd-node.is-active rect { stroke-width: 2.5; }
.tdd-node.n-plan.is-active  rect { stroke: var(--ink);       fill: #FFFFFF; }
.tdd-node.n-red.is-active   rect { stroke: var(--stamp);     fill: #FFFFFF; }
.tdd-node.n-green.is-active rect { stroke: var(--room-ship); fill: #FFFFFF; }
.tdd-node.n-ref.is-active   rect { stroke: var(--room-make); fill: #FFFFFF; }
.tdd-node.n-plan.is-active  circle { fill: var(--ink); }
.tdd-node.n-red.is-active   circle { fill: var(--stamp); }
.tdd-node.n-green.is-active circle { fill: var(--room-ship); }
.tdd-node.n-ref.is-active   circle { fill: var(--room-make); }
.tdd-node.is-dim rect { opacity: 0.55; }
.tdd-node.is-dim circle { opacity: 0.55; }

.tdd-arrow, .tdd-loop { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.tdd-loop { stroke-dasharray: 5 4; }
.tdd-loop-label { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-2); }

.tdd-control {
  margin-top: 18px;
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head btns" "text btns";
  gap: 6px 24px;
  align-items: start;
}
.tdd-step-head { grid-area: head; display: flex; align-items: baseline; gap: 12px; }
.tdd-step-badge {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--paper); background: var(--ink);
  padding: 2px 10px; border-radius: 2px;
}
.tdd-step-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.tdd-step-text { grid-area: text; font-size: 14px; color: var(--ink-2); max-width: 640px; min-height: 3.6em; }
.tdd-buttons { grid-area: btns; display: flex; gap: 8px; }

.merit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.merit-card { background: var(--paper-2); padding: 18px 20px 20px; }
.merit-num {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.2em; color: var(--stamp);
  margin-bottom: 6px;
}
.merit-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.merit-card p { font-size: 13.5px; color: var(--ink-2); }

.reason-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: start;
  margin-top: 18px;
}

.ratio-fig { border: 1px solid var(--hairline); background: var(--paper-2); padding: 18px 20px; }
.ratio-cap { font-size: 12.5px; color: var(--ink-2); margin-bottom: 14px; }
.ratio-bars { display: flex; flex-direction: column; gap: 12px; }
.ratio-bar { display: grid; grid-template-columns: 82px 1fr 82px; gap: 10px; align-items: center; }
.ratio-label { font-size: 12.5px; }
.ratio-track { display: block; height: 18px; background: var(--paper); border: 1px solid var(--hairline); }
.ratio-fill { display: block; height: 100%; }
.rf-body { background: var(--ink-2); }
.rf-test { background: var(--stamp); }
.ratio-val { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.ratio-note { font-size: 12.5px; color: var(--ink-2); margin-top: 14px; }

.why-list { list-style: none; }
.why-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px; color: var(--ink-2);
}
.why-list li:last-child { border-bottom: none; }
.why-list strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }

/* ---------- 第3章 バイブコーディング ---------- */

.vibe-box {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 20px 22px 22px;
}
.vibe-svg { width: 100%; height: auto; display: block; }
.vibe-node rect { fill: var(--paper); stroke: var(--hairline); stroke-width: 1; }
.vibe-node circle { fill: var(--ink-2); }
.vibe-num { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: #FFFFFF; }
.vibe-t { font-family: var(--font-ui); font-size: 11.5px; fill: var(--ink); }
.vibe-arrow { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.vibe-loop { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.vibe-loop-label { font-family: var(--font-ui); font-size: 11px; fill: var(--ink-2); }
.vibe-gap-line { fill: none; stroke: var(--stamp); stroke-width: 1.5; stroke-dasharray: 4 4; }
.vibe-x { stroke: var(--stamp); stroke-width: 2.5; }
.vibe-gap-box { fill: none; stroke: var(--stamp); stroke-width: 2; stroke-dasharray: 7 5; }
.vibe-gap-t1 { font-family: var(--font-display); font-size: 16px; font-weight: 600; fill: var(--stamp); }
.vibe-gap-t2 { font-family: var(--font-ui); font-size: 11.5px; fill: var(--stamp); }
.vibe-caption { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }

.miss-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 20px;
}
.miss-card { background: var(--paper-2); padding: 16px 18px; border-top: 3px solid var(--ink-2); }
.miss-card.is-danger { border-top-color: var(--room-guard); }
.miss-card h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }
.miss-card.is-danger h4 { color: var(--room-guard); }
.miss-card p { font-size: 13px; color: var(--ink-2); }

.collapse-chain { list-style: none; max-width: 780px; }
.collapse-chain li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 0 12px 4px;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.cc-n {
  font-family: var(--font-display);
  font-size: 13px; color: var(--paper); background: var(--stamp);
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.cc-t { font-size: 14.5px; }

/* ---------- 第4章 回帰テスト / ドミノ ---------- */

.domino-box {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 24px 24px 22px;
}

.domino-stage {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  min-height: 190px;
  padding: 0 4px 8px;
  border-bottom: 2px solid var(--ink);
  overflow-x: auto;
}

.domino {
  flex: 0 0 108px;
  min-height: 150px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
  transform-origin: bottom left;
  transition: transform 320ms ease, background var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease;
}
.domino-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.domino-note { font-size: 11px; color: var(--ink-2); line-height: 1.6; }
.domino-state {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-2);
}

.domino.is-changed { border-color: var(--room-make); border-width: 2px; }
.domino.is-changed .domino-state { color: var(--room-make); font-weight: 700; }

.domino.is-fallen {
  transform: rotate(76deg) translateY(2px);
  background: #F2E2DE;
  border-color: var(--stamp);
}
.domino.is-fallen .domino-name { color: var(--stamp); }
.domino.is-fallen .domino-state { color: var(--stamp); font-weight: 700; }

.domino.is-safe { border-color: var(--room-ship); background: #EAF0E3; }
.domino.is-safe .domino-state { color: var(--room-ship); font-weight: 700; }

.domino-guard {
  flex: 0 0 96px;
  align-self: stretch;
  border: 2px dashed var(--hairline);
  border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  opacity: 0.35;
  transition: opacity var(--dur) ease, border-color var(--dur) ease, background var(--dur) ease;
  text-align: center;
}
.domino-guard .dg-mark { font-size: 20px; color: var(--ink-2); line-height: 1; }
.domino-guard .dg-text { font-size: 10.5px; color: var(--ink-2); line-height: 1.5; }
.domino-guard.is-on {
  opacity: 1;
  border-color: var(--room-ship);
  border-style: solid;
  background: var(--paper);
}
.domino-guard.is-on .dg-mark,
.domino-guard.is-on .dg-text { color: var(--room-ship); font-weight: 700; }

.domino-status {
  margin-top: 14px;
  font-size: 14px;
  min-height: 3.2em;
  border-left: 3px solid var(--hairline);
  padding-left: 12px;
}
.domino-status.is-bad { border-left-color: var(--stamp); color: var(--stamp); font-weight: 600; }
.domino-status.is-good { border-left-color: var(--room-ship); color: var(--room-ship); font-weight: 600; }
.domino-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.spiral-box {
  border: 1px solid var(--stamp);
  border-left: 6px solid var(--stamp);
  background: var(--paper-2);
  padding: 20px 24px 22px;
  margin-top: 28px;
  max-width: 820px;
}
.spiral-h {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; color: var(--stamp);
  margin-bottom: 10px;
}
.spiral-chain { list-style: none; counter-reset: s; }
.spiral-chain li {
  counter-increment: s;
  position: relative;
  padding: 8px 0 8px 30px;
  font-size: 14px;
  border-bottom: 1px solid var(--hairline);
}
.spiral-chain li:last-child { border-bottom: none; font-weight: 600; }
.spiral-chain li::before {
  content: counter(s) ".";
  position: absolute; left: 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--stamp);
}
.spiral-note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }

.solve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.solve-card { background: var(--paper-2); padding: 18px 20px; }
.solve-card h4 { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.solve-card p { font-size: 13.5px; color: var(--ink-2); }
.solve-card.is-key { background: var(--ink); }
.solve-card.is-key h4 { color: #FFFFFF; }
.solve-card.is-key p { color: var(--paper-deep); }

/* ---------- 第5章 AGI ---------- */

.drift-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.drift-side {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 20px 22px 22px;
}
.drift-side.is-agi { background: var(--paper); border-color: var(--room-make); border-left-width: 6px; }
.drift-label {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.drift-side.is-agi .drift-label { color: var(--room-make); }
.drift-source {
  font-size: 14px;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 10px; margin-bottom: 4px;
}
.drift-source strong { font-family: var(--font-display); font-size: 16px; }
.drift-chain { list-style: none; }
.drift-chain li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0 10px 20px;
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.drift-chain li::before {
  content: "↓";
  position: absolute; left: 0; top: 10px;
  color: var(--ink-2); font-size: 13px;
}
.dc-role { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-2); }
.dc-say { font-size: 14.5px; }
.drift-side.is-agi .dc-say { font-weight: 600; }
.drift-result {
  margin-top: 12px;
  font-size: 13.5px; font-weight: 600;
  padding: 8px 12px;
  border-radius: 2px;
}
.drift-result.is-bad { background: var(--stamp); color: #FFFFFF; }
.drift-result.is-good { background: var(--room-ship); color: #FFFFFF; }

.link-band {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 14px 18px;
  margin: 16px 0;
  max-width: 720px;
}
.link-band-label { font-size: 11px; letter-spacing: 0.2em; color: var(--ink-2); margin-bottom: 4px; }
.link-band-url a {
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}

/* ---------- 第6章 8フェーズ ---------- */

.phase-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
/* 格子・可変の子が中身の幅でページを押し広げないようにする */
.phase-layout > * { min-width: 0; }
.phase-rail { max-width: 100%; }
.domino-box { min-width: 0; }
.domino-stage { max-width: 100%; }

/* 出典の長いURLが狭い画面でページを押し広げないようにする */
.footer-note { overflow-wrap: anywhere; }

.phase-rail {
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--ink);
  position: sticky; top: 62px;
}
.phase-btn {
  border: none;
  background: var(--paper-2);
  text-align: left;
  padding: 10px 12px 11px;
  display: flex; flex-direction: column; gap: 1px;
  transition: background var(--dur) ease, color var(--dur) ease;
}
.phase-btn:hover { background: var(--paper-deep); }
.pb-no { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-2); }
.pb-name { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.35; }
.phase-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.phase-btn[aria-selected="true"] .pb-no { color: var(--paper-deep); }

.phase-stage {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 26px 30px 30px;
  min-height: 480px;
}
.phase-panel[hidden] { display: none; }
.phase-h {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; line-height: 1.4;
  margin-bottom: 12px;
}
.phase-lede { max-width: 680px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 18px; }
.phase-note { font-size: 13.5px; color: var(--ink-2); margin: 16px 0 10px; }
.phase-h4 {
  font-family: var(--font-display);
  font-size: 16.5px; font-weight: 600;
  margin: 24px 0 8px;
  border-left: 3px solid var(--stamp);
  padding-left: 10px;
}
.phase-panel > p, .doc-body > p { max-width: 700px; font-size: 14px; margin-bottom: 10px; }

/* AGIに言う言葉 */

.say-block {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 14px 16px 16px;
  margin: 6px 0 4px;
}
.say-label {
  font-size: 11px; letter-spacing: 0.2em; color: var(--ink-2);
  margin-bottom: 10px;
}
.say-row {
  display: flex; align-items: stretch; gap: 8px;
  margin-bottom: 8px;
}
.say-row:last-child { margin-bottom: 0; }
.say-code {
  flex: 1;
  background: var(--ink);
  color: #EFE7D6;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.75;
  padding: 10px 14px;
  border-radius: 2px;
  word-break: break-word;
}
.copy-btn {
  flex: none;
  background: none;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: 12px; font-weight: 600;
  padding: 0 14px;
  white-space: nowrap;
  transition: background var(--dur) ease, color var(--dur) ease;
}
.copy-btn:hover { background: var(--ink); color: var(--paper); }
.copy-btn.is-done { background: var(--room-ship); border-color: var(--room-ship); color: #FFFFFF; }
.copy-btn.is-failed { background: var(--stamp); border-color: var(--stamp); color: #FFFFFF; }

/* 書類の開閉 */

.doc-det {
  border: 1px solid var(--hairline);
  background: var(--paper);
  margin-top: 10px;
}
.doc-det > summary {
  cursor: pointer;
  list-style: none;
  padding: 11px 16px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.doc-det > summary::-webkit-details-marker { display: none; }
.doc-det > summary::before { content: "▸"; color: var(--stamp); font-size: 11px; }
.doc-det[open] > summary::before { content: "▾"; }
.doc-det[open] > summary { border-bottom: 1px solid var(--hairline); }
.doc-path { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
.doc-path-plain { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.doc-ja { font-size: 12.5px; color: var(--ink-2); margin-left: auto; }
.doc-body { padding: 16px 18px 18px; }

.review-p {
  max-width: 700px;
  font-size: 13.5px;
  background: var(--paper-2);
  border-left: 3px solid var(--room-check);
  padding: 10px 14px;
  margin: 10px 0;
}
.review-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--paper); background: var(--room-check);
  padding: 1px 8px; border-radius: 2px;
  margin-right: 8px;
}

.tri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.tri-card {
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  border-top: 3px solid var(--room-make);
  padding: 14px 16px;
}
.tri-card h5 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 5px; }
.tri-card p { font-size: 13px; color: var(--ink-2); }

.inner-tdd { list-style: none; max-width: 640px; margin-bottom: 12px; }
.inner-tdd li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
}
.it-n {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--paper); background: var(--room-make);
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}

/* Phase 5 粒度 */

.scope-fig {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.scope-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 150px;
  gap: 12px; align-items: center;
  padding: 5px 0;
}
.scope-name { font-size: 13px; font-weight: 600; }
.scope-bar { display: block; height: 16px; border-radius: 2px; }
.sb-1 { background: var(--room-map); }
.sb-2 { background: var(--room-make); }
.sb-3 { background: var(--room-think); }
.sb-4 { background: var(--room-keep); }
.scope-desc { font-size: 12px; color: var(--ink-2); }

.test4-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.test4-card {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 16px 18px;
}
.test4-card h5 { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.test4-card p { font-size: 13.5px; color: var(--ink-2); }
.test4-card strong { color: var(--ink); }

/* Phase 6 Docker */

.docker-fig {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 16px 18px 18px;
  margin-top: 16px;
  max-width: 600px;
}
.docker-cap { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-2); margin-bottom: 10px; }
.docker-box {
  border: 2px solid var(--room-ship);
  border-radius: 2px;
  padding: 26px 14px 14px;
  position: relative;
}
.docker-tag {
  position: absolute; top: -1px; left: -1px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  background: var(--room-ship); color: #FFFFFF;
  padding: 2px 10px;
}
.docker-items { display: flex; gap: 8px; flex-wrap: wrap; }
.docker-item {
  flex: 1 1 120px;
  text-align: center;
  font-size: 13px; font-weight: 600;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  padding: 12px 8px;
  border-radius: 2px;
}
.docker-note { font-size: 12.5px; color: var(--ink-2); margin-top: 10px; }

/* Phase 7 波及 */

.ripple-fig {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 16px 18px 18px;
  margin: 14px 0 6px;
  max-width: 600px;
}
.ripple-src { text-align: center; margin-bottom: 6px; }
.ripple-var {
  display: inline-block;
  font-family: var(--font-mono); font-size: 13px;
  background: var(--room-keep); color: #FFFFFF;
  padding: 5px 14px; border-radius: 2px;
}
.ripple-note { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 4px; }
.ripple-arrows { display: flex; justify-content: space-around; height: 22px; }
.ripple-arrows span {
  width: 1px; height: 100%;
  background: var(--hairline);
  position: relative;
}
.ripple-arrows span::after {
  content: ""; position: absolute; bottom: 0; left: -3px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--ink-2);
}
.ripple-targets { display: flex; gap: 8px; }
.ripple-target {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-bottom: 3px solid var(--room-keep);
  padding: 10px 6px;
  border-radius: 2px;
}

/* ---------- 第7章 書類一覧 ---------- */

.why-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-bottom: 36px;
}
.why-doc-card { background: var(--paper-2); padding: 18px 20px 20px; }
.why-doc-num {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.2em; color: var(--stamp);
  margin-bottom: 6px;
}
.why-doc-card h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.why-doc-card p { font-size: 13.5px; color: var(--ink-2); }

.doc-table-wrap { overflow-x: auto; border: 1px solid var(--ink); }
.doc-table { border-collapse: collapse; width: 100%; min-width: 720px; background: var(--paper); }
.doc-table-cap {
  text-align: left;
  font-size: 12px; letter-spacing: 0.14em; color: var(--ink-2);
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-2);
}
.doc-table th, .doc-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.doc-table thead th {
  font-size: 12px; letter-spacing: 0.1em; color: var(--ink-2);
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.doc-table tbody tr:last-child td, .doc-table tbody tr:last-child th { border-bottom: none; }
.dt-phase {
  white-space: nowrap;
  border-right: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  background: var(--paper-2);
}
.dt-phase .ph-chip { display: block; margin: 0 0 4px; width: max-content; }
.doc-table code { font-size: 12.5px; word-break: break-all; }
.dt-plain { font-size: 13px; }
.doc-total {
  margin-top: 16px;
  font-size: 14.5px;
  border-left: 3px solid var(--ink);
  padding-left: 14px;
  max-width: 720px;
}
.doc-total strong { font-family: var(--font-display); font-size: 20px; }

/* ---------- 第8章 階段 ---------- */

.stair-box {
  border: 1px solid var(--ink);
  background: var(--paper-2);
  padding: 24px 26px 22px;
}
.stair-svg { width: 100%; height: auto; display: block; }
.stair-base { stroke: var(--ink); stroke-width: 1.5; }
.stair-step rect {
  fill: var(--room-map);
  transform-origin: center bottom;
  transform: scaleY(0.06);
  transition: transform 620ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i) * 120ms);
}
.stair-svg.is-shown .stair-step rect { transform: scaleY(1); }
.stair-step:nth-of-type(2) rect { fill: #2F6B52; }
.stair-step:nth-of-type(3) rect { fill: var(--room-check); }
.stair-step:nth-of-type(4) rect { fill: var(--room-think); }
.stair-step.is-worst rect { fill: var(--stamp); }
.stair-val {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600;
  fill: var(--ink);
}
.stair-step.is-worst .stair-val { fill: var(--stamp); font-size: 26px; }
.stair-stage { font-family: var(--font-ui); font-size: 13px; fill: var(--ink); }
.stair-axis { font-family: var(--font-ui); font-size: 11.5px; fill: var(--ink-2); }
.stair-caption { margin-top: 16px; font-size: 14px; color: var(--ink-2); max-width: 720px; }

.closing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 32px;
}
.closing-card { background: var(--paper-2); padding: 22px 24px 24px; }
.closing-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.closing-card p { font-size: 13.5px; color: var(--ink-2); }
.closing-card.is-final { background: var(--ink); }
.closing-card.is-final h3 { color: #FFFFFF; }
.closing-card.is-final p { color: var(--paper-deep); }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .phase-layout { grid-template-columns: 1fr; gap: 16px; }
  .phase-rail {
    flex-direction: row;
    overflow-x: auto;
    position: static;
  }
  .phase-btn { flex: 0 0 140px; }
  .phase-stage { padding: 22px 20px 26px; }

  .bug-panel-grid { grid-template-columns: 1fr; gap: 22px; }
  .bug-guard { position: static; }

  .reason-row { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 860px) {
  .how-hero { padding-top: 24px; }
  .how-lede { display: block; }
  .bug-tabs { grid-template-columns: 1fr; }
  .tdd-control {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "text" "btns";
    gap: 8px;
  }
  .tdd-buttons { justify-content: flex-start; }
  .tdd-step-text { min-height: 0; }
  .scope-row { grid-template-columns: 48px minmax(0, 1fr); }
  .scope-desc { grid-column: 2 / -1; }
}

@media (max-width: 760px) {
  /* 長い章タイトルが横にはみ出さないよう、番号と見出しを分ける */
  .plate-head { flex-wrap: wrap; row-gap: 6px; }
  .plate-title { flex: 1 1 100%; min-width: 0; font-size: clamp(19px, 5.4vw, 26px); }
  .plate-rule { display: none; }
  .topbar-pages, .topbar-nav { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .bug-panel { padding: 20px 18px 22px; }
  .tdd-box, .vibe-box, .domino-box, .stair-box { padding: 16px 14px 18px; }
  .say-row { flex-direction: column; }
  .copy-btn { padding: 7px 14px; align-self: flex-start; }
  .boundary-scale li { font-size: 11px; padding: 6px 0; }
  .domino { flex: 0 0 96px; }
  .domino-guard { flex: 0 0 84px; }
  .doc-det > summary { gap: 6px; }
  .doc-ja { margin-left: 0; width: 100%; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .domino, .stair-step rect { transition: none !important; }
  .stair-step rect { transform: scaleY(1); }
}