/* how-double-spending-is-prevented 전용 — 시뮬레이터 안쪽과 이 글에만 있는 것. 틀·버튼·TL;DR·흐름 띠는 /assets/site.css.
   (.lede·.cite·.diagram·.kv·.live·.verdict·.sim-note 는 how-digital-signatures-work 의 article.css 와 같은 값)
   임시값(규칙 없음): 회색 #555·#666·#888·#999·#ccc·#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 { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }

/* 시뮬레이터 공통 */
.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; }
.sim 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; }
.verdict:empty { display: none; }
.verdict.same { background: #fff6b8; }
.verdict.diff { background: #f3f4f6; }
.sim-note { margin: 0; font-size: .8rem; color: #666; }

/* ① 두 가게가 받은 거래 */
.txs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tx { border: 1px solid #ccc; padding: .5rem .6rem; min-width: 0; font-size: .85rem; }
.tx.sent { border-color: #111; }
.tx-h { margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; }
.tx-body { margin: 0; color: #888; display: grid; gap: .15rem; }
.tx.sent .tx-body { color: #111; }
.tx-body .k { color: #666; font-size: .76rem; }
.tx-body mark { background: #fff6b8; color: #111; }
.tx-body .res { font-weight: 700; margin-top: .2rem; padding: .15rem .35rem; }
.tx-body .res.ok { background: #e6f4ea; }
.tx-body .res.no { background: #f1f1f1; }
@media (max-width: 420px) { .txs { grid-template-columns: 1fr; } }

/* ② 갈라진 사슬 — 위에서 아래로 자란다 */
.chain { display: grid; gap: 0; justify-items: center; }
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6rem; width: 100%; }
.lane { display: grid; gap: 0; justify-items: center; align-content: start; min-width: 0; }
.lane-h { margin: 0; font-size: .76rem; font-weight: 700; color: #555; }
.blk { box-sizing: border-box; width: 100%; max-width: 15rem; border: 1px solid #111; background: #fff; padding: .35rem .5rem; font-size: .8rem; display: grid; gap: .1rem; min-width: 0; }
.blk b { font-size: .82rem; }
.blk .k { display: block; color: #666; font-size: .72rem; }
.blk .txline { background: #fff6b8; padding: 0 .25rem; justify-self: start; }
.blk .txline.none { background: none; color: #888; padding: 0; }
.blk.new { animation: blk-in .5s ease-out; }
@keyframes blk-in { from { background: #fff6b8; transform: translateY(-6px); opacity: 0; } to { background: #fff; transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .blk.new { animation: none; } }
.link { width: 2px; height: 1rem; background: #111; }
.lane.lost .blk { border-color: #999; border-style: dashed; color: #888; background: #f7f7f7; }
.lane.lost .blk .txline { background: #e5e5e5; text-decoration: line-through; }
.lane.lost .link { background: #bbb; }
.lane.lost .lane-h::after { content: " — 버려짐"; }
.lane.won .lane-h::after { content: " — 남음"; }