/* when-the-chain-split 전용 — 시뮬레이터 안쪽과 이 글에만 있는 것. 틀·버튼·TL;DR·흐름 띠·곁질문은 /assets/site.css.
   (.lede·.cite·.diagram·.live·.verdict·.sim-note 는 how-double-spending-is-prevented 의 article.css 와 같은 값)
   임시값(규칙 없음): 회색 #555·#666·#888·#999·#bbb·#ddd·#f3f4f6, 파랑 #1a5fb4(히어로 그림과 같은 값), 형광 #fff6b8·노랑 #ffd400 은 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 { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.live { margin: 0; font-size: .85rem; color: #555; min-height: 1em; }
.live:empty { display: none; }
.verdict { margin: 0; font-weight: 700; padding: .45rem .6rem; }
.verdict:empty { display: none; }
.verdict.same { background: #e6f4ea; }
.verdict.diff { background: #f3f4f6; }
.sim-note { margin: 0; font-size: .8rem; color: #666; }
.sim input[type=range] { width: 100%; max-width: 100%; min-height: 2.75rem; }

/* ① 두 사슬 — «여기서 견줍니다» 상자(.vs, site.css) 안에 위아래로 나란히, 왼쪽 끝을 맞춰 놓는다 */
#fk-vs { gap: .55rem; }
#fk-vs .bdg { vertical-align: 0; }
.fk-lane { display: grid; gap: .25rem; min-width: 0; }
.fk-head { margin: 0; font-size: .8rem; display: flex; flex-wrap: wrap; gap: .1rem .7rem; align-items: baseline; }
.fk-head b { font-size: .85rem; }
.fk-head .k { color: #666; }
.fk-head .who { font-weight: 700; color: #1a5fb4; }
.fk-cells { display: grid; grid-template-columns: repeat(var(--cols, 25), minmax(0, 1fr)); gap: 1px; height: 18px; }
.fk-cell { display: block; background: #111; min-width: 0; }
.fk-cell.trunk { background: #bbb; }
.fk-cell.bigblock { background: #ffd400; box-shadow: inset 0 0 0 1px #111; }
.fk-cell.fresh { animation: fk-in .3s ease-out; }
@keyframes fk-in { from { transform: translateY(-5px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fk-cell.fresh { animation: none; } }
.fk-lane.lost .fk-cell:not(.trunk):not(.bigblock) { background: #ddd; box-shadow: inset 0 0 0 1px #999; }
.fk-lane.lost .fk-head { color: #888; }
.fk-lane.lost .fk-head .who { color: #888; }
.fk-key { margin: 0; font-size: .76rem; color: #666; display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.fk-key i { display: inline-block; width: .7rem; height: .7rem; vertical-align: -1px; margin-right: .25rem; }
.fk-key .t { background: #bbb; }
.fk-key .b { background: #ffd400; box-shadow: inset 0 0 0 1px #111; }
.fk-key .n { background: #111; }

/* 표 1 — how-digital-signatures-work 의 article.css 와 같은 값 */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
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; }