/* how-blocks-spread 전용 — 시뮬레이터 안쪽과 이 글에만 있는 것. 틀·버튼·TL;DR·흐름 띠·곁질문은 /assets/site.css.
   임시값(규칙 없음): 회색 #444·#555·#666·#888·#9ca3af·#c9ced6·#e4e8ee·#f1f1f1, 초록 #1e7b34·#e6f4ea(흐름 띠와 같은 값), 파랑 #1a5fb4(히어로와 같은 값).
   노랑 #ffd400·#fff6b8 은 D-006 과 같은 값 */
.lede { font-size: 1.1rem; color: #444; }
.cite { font-size: .8em; text-decoration: none; vertical-align: super; }
.diagram { margin: 1.5rem 0; }
.diagram figcaption, .sim > figcaption:not(.sim-q) { font-size: .85rem; color: #666; margin-top: .5rem; }
.diagram svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.two-nets { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; max-width: 520px; margin: 0 auto; }
.two-nets p { margin: .3rem 0 0; text-align: center; font-size: .85rem; }
.fig-msg { max-width: 460px; }
.diagram svg text { font-family: inherit; font-size: 13px; fill: #111; }
.diagram svg text.small { font-size: 11px; fill: #555; }
.diagram svg text.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* 시뮬레이터 ①·② 그물 */
.rl-net { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; touch-action: manipulation; }
.rl-edge { stroke: #c9ced6; stroke-width: 1.5; }
.rl-edge.live { stroke: #111; stroke-width: 2; }
.rl-edge.used { stroke: #111; stroke-width: 2; }
.rl-edge.dead { stroke: #9ca3af; stroke-width: 2; stroke-dasharray: 4 3; }
.rl-node { cursor: pointer; outline: none; }
.rl-hit { fill: transparent; }
.rl-dot { fill: #fff; stroke: #111; stroke-width: 1.5; transition: fill .2s; }
.rl-num { font-size: 9px; text-anchor: middle; fill: #111; pointer-events: none; font-family: inherit; }
.rl-mark { font-size: 11px; font-weight: 700; fill: #111; pointer-events: none; }
.rl-node.picked .rl-dot { stroke-width: 3.5; }
.rl-node.s-origin .rl-dot { fill: #111; }
.rl-node.s-origin .rl-num { fill: #fff; }
.rl-node.s-ok .rl-dot { fill: #ffd400; }
.rl-node.s-ok .rl-mark { fill: #1e7b34; }
.rl-node.s-no .rl-dot { fill: #e4e8ee; stroke: #888; stroke-dasharray: 3 2; }
.rl-node.s-no .rl-num { fill: #888; }
.rl-node.s-off .rl-dot { fill: #e4e8ee; stroke: #888; stroke-dasharray: 3 2; }
.rl-node.s-off .rl-num { fill: #888; }
.rl-node.s-off .rl-mark { font-size: 9px; fill: #555; }
.rl-node[aria-disabled="true"] { cursor: default; }
.rl-node:focus-visible .rl-hit { stroke: #1a5fb4; stroke-width: 2; }
.rl-fly { fill: #ffd400; stroke: #111; stroke-width: 1; pointer-events: none; }
.rl-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; padding: 0; list-style: none; font-size: .8rem; color: #555; }
.rl-legend i { display: inline-block; width: .8em; height: .8em; border-radius: 50%; border: 1.5px solid #111; margin-right: .3em; vertical-align: -.05em; }
.rl-legend .l-origin { background: #111; }
.rl-legend .l-ok { background: #ffd400; }
.rl-legend .l-pick { border-width: 3px; }
.rl-legend .l-no { background: #e4e8ee; border-color: #888; border-style: dashed; }
.live { margin: 0; font-size: .9rem; color: #111; min-height: 2.6em; }
.sim-note { margin: 0; font-size: .8rem; color: #666; }

/* 흐름 띠의 마지막 칸 — 받은 노드의 검증 */
#rl-flow .flow-cell.wide { flex-direction: column; align-items: stretch; gap: .25rem; }
#rl-flow .flow-cell.wide em { flex: none; }
#rl-flow .flow-cell.wide code { font-size: .85rem; white-space: normal; }
#rl-flow .flow-cell.wide code b { background: #fff6b8; padding: 0 .1em; }
/* 표 1 — 방법 이름은 한 줄로, 메시지 이름은 끊기지 않게 */
table.ways th[scope="row"] { white-space: nowrap; }
table.ways td code { white-space: nowrap; }

/* 시뮬레이터 ② — 사슬 두 줄 · 판정 */
.ms-chains { display: grid; gap: .25rem; }
.ms-chains p { margin: .2rem 0 0; font-size: .8rem; color: #555; }
.ms-chain { display: flex; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.ms-chain li { position: relative; flex: 1 1 0; min-width: 0; max-width: 8rem; display: grid; gap: .05rem; padding: .25rem .35rem; border: 1.5px solid #111; background: #fff; font-size: .78rem; }
.ms-chain li + li::before { content: "←"; position: absolute; left: -1.05rem; top: 50%; transform: translateY(-50%); width: 1rem; text-align: center; color: #111; }
.ms-chain li b { font-weight: 700; white-space: nowrap; }
.ms-chain li code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; background: none; color: #555; white-space: nowrap; }
.ms-chain li.gap { border-color: #9ca3af; border-style: dashed; color: #888; }
.ms-chain li.gap::before { color: #9ca3af; }
.ms-chain li.new { background: #fff6b8; }
.verdict { margin: 0; font-weight: 700; padding: .45rem .6rem; }
.verdict:empty { display: none; }
.verdict.same { background: #fff6b8; }
.verdict.diff { background: #f3f4f6; }
#ms-flow .flow-cell.wide { flex-direction: column; align-items: stretch; gap: .25rem; }
#ms-flow .flow-cell.wide em { flex: none; }
#ms-flow .flow-cell.wide code { font-size: .85rem; white-space: normal; }