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

/* 헤더 80바이트 — 칸마다 색 (그림 1, 시뮬레이터 ①·②) */
.f-version { background: #e9e9e9; }
.f-prev { background: #fff6b8; }
.f-merkle { background: #d9ecff; }
.f-time { background: #dff1dc; }
.f-bits { background: #f6dff0; }
.f-nonce { background: #ffd9b8; }
.hexrow { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92rem; line-height: 1.9; word-spacing: -.1em; overflow-wrap: break-word; }
.hexrow span { padding: .15em .25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hexrow.small { font-size: .78rem; line-height: 1.75; }
.hexrow i { font-style: normal; }
.hexrow b { font-weight: 700; outline: 2px solid #111; outline-offset: -1px; background: #fff; }
table.fields th span { padding: .1em .35em; font-weight: 400; white-space: nowrap; }
table.fields code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; word-break: break-all; background: none; }
table.fields td:nth-child(2) { text-align: right; color: #555; }

/* 표 */
.table-wrap { overflow-x: auto; margin-top: .8rem; }
table.cmp { border-collapse: collapse; width: 100%; font-size: .9rem; }
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; }

/* 시뮬레이터 공통 */
.side-h { margin: .2rem 0 -.3rem; font-size: .8rem; font-weight: 700; color: #111; }
.kv { display: grid; grid-template-columns: minmax(5.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: .8rem; word-break: break-all; background: none; color: #555; }
.kv code b { color: #111; font-weight: 700; }
.kv mark { background: #fff6b8; color: #111; }
.kv small { color: #888; display: block; }
.kv small:empty { display: 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; }

/* ② 논스 줄 · 칸 고르기 */
.nonce-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nonce-row .k { color: #666; font-size: .82rem; }
.nonce-row output { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; font-weight: 700; padding: .3rem .5rem; background: #ffd9b8; min-width: 8.2em; text-align: center; }
.nonce-row button { min-width: 2.75rem; min-height: 2.75rem; }
.nonce-row small { color: #888; font-size: .8rem; }
.pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.pick button { font-size: .85rem; padding: .4rem .6rem; }
.pick button[aria-pressed="true"] { background: #111; color: #fff; }

/* ② 머클 트리 — 고른 거래에서 루트까지의 길 */
.nonce-row output.mk { background: #d9ecff; min-width: 3.6em; }
table.path { font-size: .85rem; }
table.path th { font-weight: 400; color: #555; white-space: nowrap; }
table.path code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; background: none; }
table.path mark, #sm-txid mark, #sm-root mark { background: #fff6b8; color: #111; }
table.cmp caption { caption-side: top; text-align: left; font-size: .85rem; color: #666; padding-bottom: .4rem; }
#tbl-sum th span { padding: .1em .35em; font-weight: 400; white-space: nowrap; }
#tbl-sum th { font-weight: 400; }