/* how-blocks-are-chained 전용 — 시뮬레이터 안쪽과 이 글에만 있는 것. 틀·버튼·TL;DR·흐름 띠는 /assets/site.css.
   임시값(규칙 없음): 회색 #444·#555·#666·#888·#ddd·#e5e5e5·#f3f4f6. 형광 #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 { font-size: .85rem; color: #666; }
.fig-svg, .flow-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }

/* 시뮬레이터 공통 */
.sim .controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.kv { display: grid; grid-template-columns: minmax(6.5rem, max-content) 1fr; gap: .3rem .7rem; align-items: baseline; font-size: .9rem; }
.kv .k { color: #666; font-size: .82rem; }
.kv code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; word-break: break-all; background: none; }
.live { margin: 0; font-size: .85rem; color: #555; min-height: 1em; }
.live:empty { display: none; }
.verdict { margin: 0; font-weight: 700; padding: .45rem .6rem; font-size: .92rem; }
.verdict:empty { display: none; }
.verdict.same { background: #fff6b8; }
.verdict.diff { background: #f3f4f6; }
.sim-note { margin: 0; font-size: .8rem; color: #666; }
.pick button[aria-pressed="true"] { background: #111; color: #fff; }

/* ① 블록 다섯 개 */
.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.blk { border: 1px solid #111; padding: .5rem .6rem; display: grid; gap: .35rem; min-width: 0; }
.blk-h { margin: 0; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.blk-mark { font-size: .8rem; color: #555; }
.blk[data-state="bad"] { border-width: 2px; background: #f3f4f6; }
.blk[data-state="bad"] .blk-mark { color: #111; font-weight: 700; }
.blk[data-state="cut"] { border-style: dashed; border-color: #888; }
.blk[data-state="cut"] .blk-mark { color: #888; }
.blk input { font: inherit; font-size: .88rem; color: #111; width: 100%; min-width: 0; box-sizing: border-box; padding: .3rem .45rem; border: 1px solid #999; border-radius: 0; }
.blk.edited input { background: #fff6b8; border-color: #111; }
.blk code.changed { background: #fff6b8; }

/* 표 1 */
.table-wrap { overflow-x: auto; }
table.cmp { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.cmp caption { text-align: left; font-size: .85rem; color: #666; margin-bottom: .4rem; }
table.cmp th, table.cmp td { border-top: 1px solid #ddd; padding: .45rem .4rem; text-align: left; vertical-align: top; }
table.cmp thead th { border-top: 1px solid #111; font-size: .8rem; color: #555; }
table.cmp tbody th { font-weight: 700; }