/* how-digital-signatures-work 전용 (-c 의 article.css + -a 의 그림 1·표 1) — 시뮬레이터 안쪽과 이 글에만 있는 것. 틀·버튼·TL;DR 은 /assets/site.css.
   임시값(규칙 없음): 회색 #555·#666·#888·#ddd·#e5e5e5·#f3f4f6, 도장 빨강 #c62828, 형광 #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; }
.flow-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.diagram figcaption { font-size: .85rem; color: #666; }

/* 시뮬레이터 공통 */
.sim textarea { font: inherit; font-size: 1rem; color: #111; width: 100%; box-sizing: border-box; padding: .5rem .6rem; border: 1px solid #999; border-radius: 0; resize: vertical; }
.side-h { margin: .4rem 0 -.3rem; font-size: .8rem; font-weight: 700; color: #111; border-top: 1px solid #e5e5e5; padding-top: .6rem; }
.side-h:first-of-type { border-top: 0; padding-top: 0; }
.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; }
.kv code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; word-break: break-all; background: none; }
.kv code.full { line-height: 1.35; }
.kv small { color: #888; font-weight: 400; }
.kv mark { background: #fff6b8; color: #111; }
.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; }

/* ② 꾸러미 고르기 */
.pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.pick button[aria-pressed="true"] { background: #111; color: #fff; }
.steps { margin: 0; padding-left: 1.4rem; font-size: .9rem; display: grid; gap: .3rem; }
.steps .mark { display: inline-block; width: 1.2em; font-weight: 700; }
.steps .mark.ok { background: #fff6b8; text-align: center; }
.steps .mark.no { background: #f3f4f6; text-align: center; }

/* 그림 3 — 열쇠 속 수 */
.keys { border: 1px solid #e5e5e5; padding: .8rem; display: grid; gap: .6rem; }
.keys .controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.keys button { font: inherit; padding: .45rem .9rem; border: 1px solid #111; background: #111; color: #fff; cursor: pointer; }
.keys button.secondary { background: #fff; color: #111; }

/* 그림 1 — 오려 붙인 도장 */
.fig-svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }

/* 시뮬레이터 ① 아래 메모 */
.sim-note { margin: 0; font-size: .8rem; color: #666; }

/* 표 1 */
.table-wrap { overflow-x: auto; }
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; }