/* how-hash-functions-work 전용. 사이트 공통 모양(시뮬레이터 틀·TL;DR·용어 등)은 /assets/site.css (rules/design.md D-004~D-007) */
.lede { font-size: 1.1rem; color: #444; }
.aside { background: #f5f6f8; border-radius: 6px; padding: .75rem 1rem; font-size: .95rem; }
.cite { font-size: .8em; text-decoration: none; vertical-align: super; }
.next { font-weight: 700; }

.field input[type=range] { width: 100%; max-width: 16rem; }
.howto, .legend { font-size: .85rem; color: #666; margin: 0; }

.hexrow { display: grid; gap: .15rem; }
.hexlabel { font-size: .8rem; color: #777; }
.hex { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; word-break: break-all; line-height: 1.5; background: none; }
.hex .diff { color: #b4471d; font-weight: 700; }
.muted { color: #888; }

.bitgrid { display: grid; grid-template-columns: repeat(32, 1fr); gap: 2px; max-width: 32rem; }
.bitgrid span { aspect-ratio: 1; background: #e3e6eb; border-radius: 1px; }
.bitgrid span.on { background: #b4471d; }
.stats { margin: 0; }

.target { margin: 0; }
.live { margin: 0; min-height: 3em; font-size: .92rem; overflow-wrap: anywhere; }
.live code { font-size: .85rem; }
.records { display: grid; gap: .5rem; }
.rec-row { display: grid; grid-template-columns: 3.2rem 1fr; grid-template-areas: "n bars" "n num"; gap: .15rem .5rem; align-items: center; }
.rec-n { grid-area: n; font-size: .85rem; color: #555; }
.rec-bars { grid-area: bars; display: grid; gap: 2px; }
.rec-num { grid-area: num; font-size: .85rem; }
.bar { display: block; height: 7px; border-radius: 2px; }
.bar.expect, .sw.expect { background: #9db7e0; }
.bar.got, .sw.got { background: #1a5fb4; }
.bar.preimage, .sw.preimage { background: #e5c7b8; }
.sw { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: middle; margin: 0 .2em 0 .6em; }

.verify { margin-top: 3rem; padding: 1rem; background: #f5f6f8; border-radius: 8px; }
.verify h2 { margin-top: 0; font-size: 1.1rem; }
.sources { font-size: .9rem; }
.sources ol { list-style: none; padding: 0; }
.sources li { margin: .3rem 0; }

/* v2 — 그림·표·그래프 (임시값) */
.chart { margin: 1.5rem 0; }
.chart figcaption, table caption { font-size: .85rem; color: #666; text-align: left; }

.table-wrap { overflow-x: auto; margin: 1.25rem 0; }
table.cmp, table.choose, table.mini { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.cmp { min-width: 36rem; }
table.cmp th, table.cmp td, table.choose th, table.choose td, table.mini th, table.mini td { border-bottom: 1px solid #e3e6eb; padding: .45rem .5rem; text-align: left; vertical-align: top; }
table.cmp thead th, table.choose thead th, table.mini thead th { font-size: .8rem; color: #666; font-weight: 700; }
table.cmp td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip { display: inline-block; font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.chip.ok { background: #e3f3ea; color: #1f6b44; }
.chip.no { background: #fbe6dd; color: #9a3a14; }
.chip.na { background: #eceef1; color: #4b5563; }

.chart { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg .grid { stroke: #eceef1; stroke-width: 1; }
.chart-svg .axis { stroke: #c9ced6; stroke-width: 1; }
.chart-svg .tick { font-size: 11px; fill: #888; }
.chart-svg .cat { font-size: 13px; fill: #333; }
.chart-svg .val { font-size: 12px; fill: #555; font-variant-numeric: tabular-nums; }
.chart-svg .bar { fill: #9db7e0; }
.chart-svg .bar-row.hl .bar { fill: #1a5fb4; }
.chart-svg .hit { fill: transparent; }
.chart-svg .bar-row:focus { outline: none; }
.chart-svg .bar-row:focus .cat, .chart-svg .bar-row:hover .cat { font-weight: 700; }
.chart-tip { position: absolute; z-index: 5; background: #fff; border: 1px solid #c9ced6; border-radius: 6px; padding: .3rem .55rem; font-size: .82rem; box-shadow: 0 2px 10px rgba(0,0,0,.1); pointer-events: none; max-width: 18rem; }

details.verify { margin-top: 2.5rem; background: #f5f5f5; padding: .6rem 1rem; }
details.verify summary { cursor: pointer; font-weight: 700; }
details.verify p { font-size: .9rem; }

/* 히어로 그림 — 제목 바로 아래 */
.hero { margin: 1rem 0 1.5rem; }
.hero img { display: block; width: 100%; height: auto; }
.hero figcaption { font-size: .78rem; color: #888; margin-top: .35rem; }