/* ============================================================
   2026-07-09 consolidated page — local additions.
   Inherits the warm-paper identity from ../2026-07-03/style.css
   (loaded first). Everything here is page-specific: pipeline
   node cells, four-lane board, fault-map cards, invariant rail.
   ============================================================ */

/* ---------- 01 pipeline nodes (ported from pipeline.html, light theme) ---------- */
.pnode {
  border: 1.5px solid var(--rule-2); border-radius: 7px; background: #fbfaf5;
  padding: 0.8rem 1rem 0.9rem; margin: 0;
}
.pnode.acc   { border-color: var(--accent); }
.pnode.amber { border-color: #c08400; background: var(--amber-bg); }
.pnode.guard { border-style: dashed; border-color: #2f8a2f; }
.pnode-title { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; margin: 0 0 0.5rem; }
.pnode.guard .pnode-title { color: var(--green); }
.pnode.amber .pnode-title { color: var(--amber); }
.pflow { display: flex; flex-direction: column; margin: 1.2rem 0; }
.pfarr { font-family: var(--mono); color: var(--ink-3); font-size: 0.74rem; padding: 0.25rem 0 0.25rem 1.6rem; }
.pfarr.loop { color: var(--accent); }
.pcells { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.65rem; }
@media (max-width: 820px) { .pcells { grid-template-columns: 1fr; } }
.pcell { border: 1px solid var(--rule); border-radius: 5px; background: var(--paper); padding: 0.45rem 0.6rem; }
.pcell .lab {
  display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 0.22rem;
}
.pcell.ideal .lab { color: var(--ink-3); }
.pcell.code  .lab { color: var(--amber); }
.pcell.real  .lab { color: var(--green); }
.pcell p { margin: 0; font-size: 0.82rem; color: var(--ink-2); line-height: 1.5; }
.pcell code { font-size: 0.72rem; color: var(--amber); word-break: break-all; font-family: var(--mono); }
.pcell.real p b { color: var(--ink); }
details.pnode-d { margin: 0.55rem 0; }
details.pnode-d > summary {
  cursor: pointer; list-style: none;
  border: 1.5px solid var(--rule-2); border-radius: 7px; background: #fbfaf5;
  padding: 0.55rem 0.9rem;
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; gap: 0.6rem;
}
details.pnode-d > summary::-webkit-details-marker { display: none; }
details.pnode-d > summary::after { content: "이상 · 코드 · 실측 \25BE"; margin-left: auto; font-weight: 400; font-size: 0.62rem; color: var(--ink-3); }
details.pnode-d[open] > summary { border-radius: 7px 7px 0 0; border-bottom-style: dashed; }
details.pnode-d[open] > summary::after { content: "닫기 \25B4"; }
details.pnode-d .pnode { border-radius: 0 0 7px 7px; border-top: none; }
details.pnode-d.d-acc   > summary { border-color: var(--accent); }
details.pnode-d.d-amber > summary { border-color: #c08400; background: var(--amber-bg); color: var(--amber); }
details.pnode-d.d-guard > summary { border-style: dashed; border-color: #2f8a2f; color: var(--green); }
details.pnode-d.d-acc[open] > summary { border-color: var(--accent); }
details.pnode-d.d-acc .pnode { border-color: var(--accent); }
details.pnode-d.d-amber .pnode { border-color: #c08400; }
details.pnode-d.d-guard .pnode { border-style: dashed; border-color: #2f8a2f; }

/* ---------- 02 four-lane phase board ---------- */
.lanewrap { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--rule-2); border-radius: 8px; background: #fbfaf5; }
table.lanes { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 0.82rem; }
table.lanes th, table.lanes td { border-bottom: 1px solid var(--rule); padding: 0.55rem 0.65rem; vertical-align: top; text-align: left; }
table.lanes thead th {
  font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 2px solid var(--ink); background: var(--paper-2); position: sticky; top: 0;
}
table.lanes tbody th.lanehead {
  font-family: var(--mono); font-size: 0.72rem; width: 148px; min-width: 148px;
  background: var(--paper-2); border-right: 1px solid var(--rule);
}
table.lanes tbody th.lanehead .sys { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink); }
table.lanes tbody th.lanehead .sub { display: block; font-weight: 400; color: var(--ink-3); font-size: 0.6rem; margin-top: 0.15rem; }
table.lanes tbody th.lanehead a.dive {
  display: inline-block; margin-top: 0.45rem; font-size: 0.6rem; color: var(--accent);
  text-decoration: none; border: 1px solid var(--accent); border-radius: 3px; padding: 0.12rem 0.35rem;
  background: rgba(146,18,49,0.05);
}
table.lanes tbody th.lanehead a.dive:hover { background: rgba(146,18,49,0.12); }
table.lanes td .fn { font-family: var(--mono); font-size: 0.68rem; color: var(--accent); display: block; margin-bottom: 0.12rem; word-break: break-all; }
table.lanes td p { margin: 0; font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; }
table.lanes tr.ours { background: rgba(146,18,49,0.045); }
table.lanes tr.ours th.lanehead { background: rgba(146,18,49,0.08); }
table.lanes td.mediacell { width: 132px; min-width: 132px; text-align: center; }
table.lanes td.mediacell img { width: 120px; height: 120px; image-rendering: pixelated; border: 1px solid var(--ink); border-radius: 3px; display: block; margin: 0 auto; }
table.lanes td.mediacell .cap { display: block; font-family: var(--mono); font-size: 0.55rem; color: var(--ink-3); margin-top: 0.25rem; line-height: 1.4; }
table.lanes td.mediacell .nogif { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-3); border: 1px dashed var(--rule-2); border-radius: 3px; padding: 0.8rem 0.4rem; }

/* ---------- 03 narrative: layout + invariant rail ---------- */
.storygrid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 1.6rem; align-items: start; }
@media (max-width: 980px) { .storygrid { grid-template-columns: 1fr; } .invrail { position: static !important; } }
.invrail {
  position: sticky; top: 64px;
  border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper-2);
  padding: 0.8rem 0.95rem 0.9rem;
}
.invrail h4 { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.55rem; color: var(--ink); }
.invrail ol { margin: 0; padding-left: 1.15rem; }
.invrail li { font-size: 0.74rem; line-height: 1.45; margin: 0.45rem 0; color: var(--ink-2); }
.invrail li b { font-family: var(--mono); font-size: 0.68rem; color: var(--ink); }
.invrail li.first b { color: var(--accent); }
.invrail li .src { display: block; font-family: var(--mono); font-size: 0.56rem; color: var(--ink-3); }
.invrail li.pending { border-left: 3px solid #c08400; padding-left: 0.45rem; list-style: none; margin-left: -1.15rem; padding-left: 1.3rem; background: var(--amber-bg); border-radius: 0 4px 4px 0; }

/* ---------- crisis cards ---------- */
.crisis {
  border: 1.5px solid var(--rule-2); border-radius: 8px; background: #fbfaf5;
  margin: 0 0 1.6rem; padding: 1rem 1.15rem 1.1rem; position: relative;
}
.crisis .cnum {
  position: absolute; top: -13px; left: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
}
.crisis h3 { margin: 0.1rem 0 0.2rem 1.9rem; font-size: 1.06rem; }
.crisis .analogy { font-style: italic; color: var(--ink-2); margin: 0.35rem 0 0.15rem; font-size: 0.95rem; }
.crisis .analogy::before { content: "비유 — "; font-style: normal; font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.crisis .probline { margin: 0.35rem 0 0.6rem; font-size: 0.92rem; color: #7a1020; font-weight: 700; }
.crisis .probline::before { content: "문제 — "; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; }
.crisis .fixrow { margin: 0.7rem 0 0.35rem; font-size: 0.92rem; color: var(--green); }
.crisis .fixrow b { font-weight: 700; }
.crisis .fixrow::before { content: "해결 — "; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--green); }
.crisis .commit {
  font-family: var(--mono); font-size: 0.62rem; color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: 3px; padding: 0.02rem 0.35rem; background: var(--paper-2);
  white-space: nowrap;
}
.crisis .verifyrow { margin: 0.55rem 0 0; font-size: 0.86rem; color: var(--ink-2); border-top: 1px dashed var(--rule); padding-top: 0.55rem; }
.crisis .verifyrow::before { content: "검증 — "; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink); }
.crisis .verifyrow b { color: var(--ink); }
.crisis details.raw { margin: 0.55rem 0; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--paper-2); padding: 0.5rem 0.8rem; }
.crisis details.raw summary { cursor: pointer; font-family: var(--mono); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.crisis details.raw[open] summary { margin-bottom: 0.4rem; }
.crisis details.raw blockquote {
  margin: 0.5rem 0; padding: 0.45rem 0.7rem; border-left: 3px solid var(--rule-2);
  font-size: 0.8rem; color: var(--ink-2); background: #fff; border-radius: 0 4px 4px 0;
}
.crisis details.raw blockquote code { font-family: var(--mono); font-size: 0.9em; }
.crisis details.raw .src { display: block; font-family: var(--mono); font-size: 0.6rem; color: var(--ink-3); margin-top: 0.25rem; }
.crisis details.raw pre {
  margin: 0.4rem 0; padding: 0.55rem 0.7rem; overflow-x: auto;
  background: #1c1a14; color: #e7e2d2; border-radius: 4px;
  font-family: var(--mono); font-size: 0.62rem; line-height: 1.55;
}

/* placeholder convention: amber badge + dashed border, never dummy numbers */
.ph {
  border: 1.5px dashed #c08400; border-radius: 6px; background: var(--amber-bg);
  padding: 0.6rem 0.85rem; margin: 0.55rem 0; font-size: 0.84rem;
}
.ph .phbadge {
  display: inline-block; font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber);
  border: 1.5px solid #c08400; border-radius: 3px; padding: 0.08rem 0.4rem; background: rgba(255,220,0,0.15);
  margin-right: 0.5rem;
}
.ph ul { margin: 0.35rem 0 0.1rem; padding-left: 1.2rem; }
.ph li { margin: 0.2rem 0; font-size: 0.8rem; }
.ph a { color: var(--amber); }

/* ---------- fault-map svg states ---------- */
.fmapbox { margin: 0.55rem 0; border: 1px solid var(--rule); border-radius: 6px; background: #fff; padding: 0.35rem 0.45rem 0.15rem; overflow-x: auto; }
.fmapbox svg { display: block; width: 100%; min-width: 520px; height: auto; }
.fmapbox .fmcap { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-3); padding: 0.15rem 0.2rem 0.3rem; display: block; }
.fmapbox.green { border-color: #9cc492; background: #f4faf2; }
.fmapbox.green svg { max-width: 560px; }

/* base node look */
.fm-node rect, .fm-node path.shape { fill: #f5f3ec; stroke: #17150f; stroke-width: 1.5; }
.fm-node text { font-family: var(--mono); font-size: 10.5px; font-weight: 700; fill: #17150f; }
.fm-node text.s { font-size: 7.5px; font-weight: 400; fill: #6f6a58; }
.fm-arr { stroke: #17150f; stroke-width: 1.5; fill: none; }
.fm-ret { stroke: #921231; stroke-width: 1.5; fill: none; stroke-dasharray: 5 3; }
.fm-sleepbox { fill: #fdf3d7; stroke: #c08400; stroke-width: 1.5; }
.fm-sleeplab { font-family: var(--mono); font-size: 8px; font-weight: 700; fill: #8a5a00; }
/* overlays hidden by default */
.fm-ov { display: none; }
/* fault (red) node paint */
.fault-node rect, .fault-node path.shape { fill: #fbe4e2 !important; stroke: #b3261e !important; stroke-width: 2 !important; }
.fault-node text { fill: #7a1020 !important; }
/* fixed (green) node paint */
.fix-node rect, .fix-node path.shape { fill: #e3efe0 !important; stroke: #2f8a2f !important; stroke-width: 2 !important; }
.fix-node text { fill: #1f6a1f !important; }
/* red / green auxiliary strokes */
.fm-red { stroke: #b3261e; fill: none; stroke-width: 1.6; }
.fm-redd { stroke: #b3261e; fill: none; stroke-width: 1.6; stroke-dasharray: 4 3; }
.fm-redt { font-family: var(--mono); font-size: 8px; font-weight: 700; fill: #b3261e; }
.fm-grn { stroke: #2f8a2f; fill: none; stroke-width: 1.6; }
.fm-grnd { stroke: #2f8a2f; fill: none; stroke-width: 1.6; stroke-dasharray: 4 3; }
.fm-grnt { font-family: var(--mono); font-size: 8px; font-weight: 700; fill: #1f6a1f; }
.fm-ambt { font-family: var(--mono); font-size: 7.5px; font-weight: 700; fill: #8a5a00; }

/* per-state visibility + node painting.
   states: f1..f6 (fault) and g1..g6 (fixed) — ONE svg, states via CSS. */
.st-f1 .fm-score rect { fill: #fbe4e2; stroke: #b3261e; stroke-width: 2; }
.st-f1 .fm-score text { fill: #7a1020; }
.st-f1 .ov-f1 { display: inline; }
.st-g1 .fm-score rect { fill: #e3efe0; stroke: #2f8a2f; stroke-width: 2; }
.st-g1 .fm-score text { fill: #1f6a1f; }
.st-g1 .ov-g1 { display: inline; }

.st-f2 .fm-mine rect, .st-f2 .fm-accept rect { fill: #fbe4e2; stroke: #b3261e; stroke-width: 2; }
.st-f2 .fm-mine text, .st-f2 .fm-accept text { fill: #7a1020; }
.st-f2 .ov-f2 { display: inline; }
.st-g2 .fm-mine rect, .st-g2 .fm-score rect, .st-g2 .fm-accept rect { fill: #e3efe0; stroke: #2f8a2f; stroke-width: 2; }
.st-g2 .fm-mine text, .st-g2 .fm-score text, .st-g2 .fm-accept text { fill: #1f6a1f; }
.st-g2 .ov-g2 { display: inline; }

.st-f3 .fm-store rect { fill: #fbe4e2; stroke: #b3261e; stroke-width: 2; }
.st-f3 .fm-store text { fill: #7a1020; }
.st-f3 .fm-wake rect { stroke: #b3261e; stroke-width: 2; }
.st-f3 .ov-f3 { display: inline; }
.st-g3 .fm-accept rect { fill: #e3efe0; stroke: #2f8a2f; stroke-width: 2; }
.st-g3 .fm-accept text { fill: #1f6a1f; }
.st-g3 .ov-g3 { display: inline; }

.st-f4 .fm-prompt rect { fill: #fbe4e2; stroke: #b3261e; stroke-width: 2; }
.st-f4 .fm-prompt text { fill: #7a1020; }
.st-f4 .ov-f4 { display: inline; }
.st-g4 .fm-prompt rect { fill: #e3efe0; stroke: #2f8a2f; stroke-width: 2; }
.st-g4 .fm-prompt text { fill: #1f6a1f; }
.st-g4 .ov-g4 { display: inline; }

.st-f5 .fm-accept rect { fill: #fbe4e2; stroke: #b3261e; stroke-width: 2; }
.st-f5 .fm-accept text { fill: #7a1020; }
.st-f5 .ov-f5 { display: inline; }
.st-g5 .fm-accept rect { fill: #e3efe0; stroke: #2f8a2f; stroke-width: 2; }
.st-g5 .fm-accept text { fill: #1f6a1f; }
.st-g5 .ov-g5 { display: inline; }

.st-f6 .fm-wake rect { fill: #fbe4e2; stroke: #b3261e; stroke-width: 2; }
.st-f6 .fm-wake text { fill: #7a1020; }
.st-f6 .ov-f6 { display: inline; }
.st-g6 .ov-g6 { display: inline; }

/* ---------- 04 explorer cards ---------- */
.exgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.9rem; margin: 1.2rem 0; }
.excard {
  display: block; border: 1.5px solid var(--rule-2); border-radius: 8px; background: #fbfaf5;
  padding: 0.75rem 0.9rem; text-decoration: none; color: var(--ink);
}
.excard:hover { border-color: var(--accent); }
.excard .xh { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; display: block; margin-bottom: 0.25rem; }
.excard .xs { display: block; font-size: 0.78rem; color: var(--ink-2); line-height: 1.45; }
.excard .xgo { display: block; margin-top: 0.45rem; font-family: var(--mono); font-size: 0.62rem; color: var(--accent); }
.excard.phslot { border-style: dashed; border-color: #c08400; background: var(--amber-bg); }