/* how-passkeys-work 전용 — 시뮬레이터 안쪽과 이 글에만 있는 것. 틀·버튼·TL;DR 은 /assets/site.css.
   임시값(규칙 없음): 회색 #555·#666·#888·#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; }
.flow-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.diagram figcaption, .table-wrap figcaption { font-size: .85rem; color: #666; }

/* 표 1 */
.table-wrap { margin: 1.5rem 0; overflow-x: auto; }
.cmp { border-collapse: collapse; width: 100%; font-size: .9rem; }
.cmp th, .cmp td { border-top: 1px solid #e5e5e5; padding: .45rem .5rem; text-align: left; vertical-align: top; }
.cmp thead th { border-top: 1px solid #111; font-weight: 700; }
.cmp tbody th { font-weight: 400; color: #666; white-space: nowrap; }

/* 시뮬레이터 */
.side-h { margin: .2rem 0 -.3rem; font-size: .8rem; font-weight: 700; color: #111; border-top: 1px solid #e5e5e5; padding-top: .6rem; }
.kv { display: grid; grid-template-columns: minmax(7rem, 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.ok { background: #fff6b8; }
.kv code.no { background: #f3f4f6; text-decoration: line-through; text-decoration-color: #888; }
.live { margin: 0; font-size: .85rem; color: #555; min-height: 1em; }
.live:empty { display: none; }
.what { margin: 0; font-size: .9rem; color: #333; }
.attacks { display: flex; flex-wrap: wrap; gap: .4rem; }
.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; text-align: center; }
.steps .mark.ok { background: #fff6b8; }
.steps .mark.no { background: #f3f4f6; }
.verdict { margin: 0; font-weight: 700; padding: .45rem .6rem; }
.verdict:empty { display: none; }
.verdict.same { background: #fff6b8; }
.verdict.diff { background: #f3f4f6; }
@media (max-width: 420px) { .kv { grid-template-columns: 1fr; gap: .1rem; } .kv .k { margin-top: .3rem; } }