/* how-sha1-was-broken 전용. 사이트 공통 모양(시뮬레이터 틀·TL;DR·용어·표 칩 등)은 /assets/site.css (rules/design.md D-004~D-008).
   여기 색·여백은 이 글에만 있는 것 — 규칙이 없는 값은 임시값. */
.lede { font-size: 1.1rem; color: #444; }
.cite { font-size: .8em; text-decoration: none; vertical-align: super; }
.hero { margin: 1.25rem 0 1.5rem; }
.hero img { display: block; width: 100%; height: auto; }

/* ① 두 파일 */
.dumps { display: grid; gap: .6rem; }
@media (min-width: 640px) { .dumps { grid-template-columns: 1fr 1fr; } }
.dump { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.55; background: none; }
.dump div { white-space: nowrap; }
.dump span { padding: 0 .08em; margin-right: .18em; }
.dump span.diff { background: #fff6b8; }
.hexrow { display: grid; gap: .15rem; }
.hexlabel { font-size: .8rem; color: #666; }
.hex { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; word-break: break-all; background: none; }
.verdict { margin: 0; font-weight: 700; padding: .4rem .6rem; }
.verdict.same { background: #fff6b8; }
.verdict.diff { background: #f3f4f6; }

/* 그림 1 흐름 */
.diagram { margin: 1.5rem 0; }
.flow-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.diagram figcaption { font-size: .85rem; color: #666; }

/* 두 파일의 사슬 (조각별 중간 값) */
.steps-wrap { display: grid; gap: 0; font-size: .85rem; }
.st-head, .st-row { display: grid; grid-template-columns: 4.6rem 1fr 3.2rem 1fr; align-items: center; gap: .3rem; }
.st-head span { font-size: .75rem; color: #666; text-align: center; }
.st-row { padding: .25rem .2rem; }
.st-row.diff { background: #fff6b8; }
.st-blk { display: grid; font-weight: 700; line-height: 1.2; }
.st-blk small { font-weight: 400; color: #666; font-size: .72rem; }
.st-box { display: inline-flex; align-items: center; gap: .35rem; justify-content: center; border: 1px solid #c9ced6; background: #fff; padding: .15rem .3rem; }
.st-box.last { border: 2px solid #111; }
.st-box i { width: .8rem; height: .8rem; border-radius: 2px; flex: none; }
.st-box code { font-size: .78rem; background: none; }
.st-eq { text-align: center; font-weight: 800; display: grid; line-height: 1.1; }
.st-eq small { font-size: .66rem; font-weight: 700; }
.st-row.diff .st-eq { color: #c2410c; }
.st-arrow { text-align: center; color: #9ca3af; line-height: 1; font-size: .8rem; padding-left: 4.6rem; }
.st-note { margin: .3rem 0 0; font-size: .78rem; color: #666; }

/* ② 생일 */
.stats { margin: 0; }
.bd-chart { width: 100%; }
.bd-svg { display: block; }
.bd-svg .grid { stroke: #eceef1; }
.bd-svg .half { stroke: #999; stroke-dasharray: 4 4; }
.bd-svg .tick { font-size: 11px; fill: #888; }
.bd-svg .curve { fill: none; stroke: #1a5fb4; stroke-width: 2.5; }
.bd-svg .curve.mine { stroke: #9ca3af; stroke-dasharray: 5 4; }
.bd-svg .clab { font-size: 11.5px; font-weight: 700; fill: #1a5fb4; }
.bd-svg .clab.mine { fill: #6b7280; }
.bd-svg .mark { fill: #ffe866; stroke: #111; stroke-width: 2; }
.bd-svg .mlabel { font-size: 12px; font-weight: 700; fill: #111; }
.live { margin: 0; min-height: 1.5em; font-size: .92rem; overflow-wrap: anywhere; }
.live code { font-size: .85rem; }

/* ③ 충돌 찾기 기록 */
table.mini { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.mini th, table.mini td { border-bottom: 1px solid #e3e6eb; padding: .4rem .4rem; text-align: left; }
table.mini thead th { font-size: .78rem; color: #666; }
.records .muted { font-size: .85rem; color: #777; margin: .4rem 0 0; }

/* 그림 2 차이 번짐 */
.spread-svg { display: block; }
.spread-svg .grid { stroke: #eceef1; }
.spread-svg .half { stroke: #999; stroke-dasharray: 4 4; }
.spread-svg .tick { font-size: 11px; fill: #888; }
.spread-svg .ptitle { font-size: 12.5px; font-weight: 700; fill: #333; }
.spread-svg .note { font-size: 11px; fill: #777; }
.spread-svg .ctrl { fill: #f3f4f6; }
.spread-svg .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.spread-svg .ln.s1 { stroke: #1a5fb4; }
.spread-svg .ln.s256 { stroke: #c2410c; }
.spread-svg .lab { font-size: 12px; font-weight: 700; }
.spread-svg .lab.s1 { fill: #1a5fb4; }
.spread-svg .lab.s256 { fill: #c2410c; }

/* 그림 1 */
.chart { margin: 1.5rem 0; }
.chart figcaption, table caption { font-size: .85rem; color: #666; text-align: left; }
.atk-svg { display: block; }
.atk-svg .grid { stroke: #eceef1; }
.atk-svg .sep { stroke: #d1d5db; stroke-dasharray: 3 4; }
.atk-svg .tick { font-size: 11px; fill: #888; }
.atk-svg .cat { font-size: 12.5px; fill: #333; }
.atk-svg .val { font-size: 12px; fill: #333; }
.atk-svg .val.in { fill: #fff; font-weight: 600; }
.atk-svg .base .bar { fill: #9ca3af; }
.atk-svg .theory .bar { fill: #fff; stroke: #1a5fb4; stroke-dasharray: 4 3; }
.atk-svg .theory .val.in { fill: #1a5fb4; }
.atk-svg .real .bar { fill: #1a5fb4; }
.atk-svg .other .bar { fill: #c2410c; }
.atk-svg .gap { fill: none; stroke: #111; stroke-width: 1.2; }
.atk-svg .gaptxt { font-size: 12px; font-weight: 700; fill: #111; }

/* 표 1 · 2 */
table.cmp2 { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.cmp2 th, table.cmp2 td { border-bottom: 1px solid #e3e6eb; padding: .45rem .45rem; text-align: left; }
table.cmp2 thead th { font-size: .8rem; color: #666; }
.table-wrap { overflow-x: auto; margin: 1.25rem 0; }
table.risk { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.risk th, table.risk td { border-bottom: 1px solid #e3e6eb; padding: .5rem .45rem; text-align: left; vertical-align: top; }
table.risk thead th { font-size: .8rem; color: #666; }
.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; }

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; }
.sources { font-size: .9rem; }
.sources ol { list-style: none; padding: 0; }
.sources li { margin: .3rem 0; }