/* Layout and typography */
:root { color-scheme: light; --paper:#faf9f6; --ink:#242826; --muted:#626961; --line:#dedfd6; --accent:#386749; --code:#1f252b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:.22em; }
a:hover { color:var(--accent); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:2px; }
.shell { max-width:864px; padding-inline:32px; margin-inline:auto; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding-top:30px; padding-bottom:28px; }
.site-name { font-size:19px; font-weight:750; letter-spacing:-.7px; text-decoration:none; }
.name-dot { color:var(--accent); }
.site-header nav { display:flex; gap:25px; font-size:14px; }
.site-header nav a { text-decoration:none; }
.site-header nav [aria-current] { color:var(--accent); text-decoration:underline; }
.eyebrow { margin:0 0 18px; font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--accent); }
.home-list { padding-top:32px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:16px; }
.section-heading h1 { margin:0; font-size:15px; }
.section-heading a { font-size:13px; text-decoration:none; color:var(--muted); }
.post-item { padding:30px 0 32px; border-bottom:1px solid var(--line); }
.post-meta { display:flex; flex-wrap:wrap; gap:9px; color:var(--muted); font-size:12px; line-height:1.7; }
.post-item h2 { margin:11px 0 10px; font-size:23px; line-height:1.55; letter-spacing:-.65px; word-break:keep-all; }
.post-item h2 a { text-decoration:none; }
.post-item p { margin:0; color:var(--muted); font-size:15px; line-height:1.85; word-break:keep-all; }
.post-topics { display:flex; flex-wrap:wrap; gap:7px; margin-top:17px; }
.post-topics span { font-size:11px; padding:4px 8px; color:#4e5e50; background:#ecefe7; border-radius:4px; }
.site-footer { display:flex; justify-content:space-between; margin-top:72px; padding-top:22px; padding-bottom:30px; color:var(--muted); font-size:12px; }
.site-footer a { text-decoration:none; }
.archive-header { padding:65px 0 30px; }
.archive-header h1 { margin:0 0 17px; font-size:34px; letter-spacing:-1px; word-break:keep-all; }
.archive-header p:not(.eyebrow) { color:var(--muted); line-height:1.8; }
.post { max-width:736px; margin:auto; }
.post-header { padding:40px 0 36px; border-bottom:1px solid var(--line); margin-bottom:40px; }
.back-link { display:inline-block; margin-bottom:35px; color:var(--muted); font-size:13px; text-decoration:none; }
.post-header h1 { margin:16px 0; font-size:clamp(27px,4.5vw,36px); line-height:1.5; letter-spacing:-1.25px; word-break:keep-all; }
.post-description { color:var(--muted); font-size:16px; line-height:1.8; word-break:keep-all; }
.prose { font-size:16px; line-height:1.95; overflow-wrap:anywhere; }
.prose p { margin:1.3em 0; }
.prose h2 { font-size:24px; line-height:1.6; letter-spacing:-.7px; margin:2.6em 0 1em; word-break:keep-all; }
.prose h3 { font-size:19px; line-height:1.7; margin:2em 0 .8em; word-break:keep-all; }
.prose a { color:var(--accent); }
.prose ul,.prose ol { padding-left:1.6em; }
.prose li { margin:.6em 0; }
.prose strong { font-weight:700; }
.prose :not(pre)>code { font-size:.87em; padding:.16em .35em; background:#eaece5; border-radius:4px; color:#38563e; }
code,pre { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.prose pre { margin:1.5em 0; padding:21px 23px; background:var(--code); color:#e3e8ed; border-radius:8px; overflow-x:auto; font-size:13px; line-height:1.85; tab-size:4; -webkit-overflow-scrolling:touch; }
.prose pre code { padding:0; background:none; color:inherit; white-space:pre; }
.prose blockquote { margin:1.5em 0; border-left:3px solid #91ab8b; padding:1px 20px; color:var(--muted); background:#f0f2eb; }
.prose table { border-collapse:collapse; display:block; max-width:100%; overflow-x:auto; margin:1.5em 0; font-size:14px; }
.prose th,.prose td { border:1px solid var(--line); padding:11px 13px; min-width:100px; text-align:left; vertical-align:top; }
.prose th { background:#edf0e8; }
.post-end { margin-top:48px; padding:23px; background:#edf0e8; border-radius:6px; font-size:14px; line-height:1.8; }
.post-end p { margin:0 0 6px; font-weight:650; }
.post-end a { color:var(--accent); }
.article-nav { display:grid; gap:8px; border-top:1px solid var(--line); padding-top:26px; margin-top:40px; line-height:1.8; }
.article-nav .eyebrow { margin-bottom:4px; }
.article-nav a { font-size:16px; text-decoration:none; }
.skip-link { position:absolute; left:16px; top:-80px; padding:12px; background:var(--ink); color:white; z-index:10; }
.skip-link:focus { top:10px; }
/* Syntax highlighting: generated at build time, with no client-side script. */
.token.comment,.token.prolog,.token.doctype,.token.cdata { color:#a3b09c; }
.token.punctuation { color:#cbd3df; }
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol { color:#e9b78c; }
.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin { color:#b7d39c; }
.token.operator,.token.entity,.token.url { color:#a9d9e0; }
.token.atrule,.token.attr-value,.token.keyword { color:#c6a7df; }
.token.function,.token.class-name { color:#e6cb8c; }
.token.regex,.token.important,.token.variable { color:#9bc4e5; }
@media(max-width:600px) {
 .shell { padding-inline:22px; }
 .site-header { padding-top:24px; padding-bottom:20px; }
 .site-header nav { gap:19px; }
 .post-item h2 { font-size:21px; }
 .post-header { padding-top:24px; }
 .back-link { margin-bottom:25px; }
 .prose { font-size:15px; }
 .prose h2 { font-size:22px; }
 .prose pre { padding:18px; font-size:12px; }
 .archive-header { padding-top:45px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.diagram { margin: 2rem 0; }
.diagram svg { display: block; width: 100%; height: auto; }