/* Blog: /blog/ index and posts. Builds on service.css (single readable column) and the shared tokens. */
.blog{max-width:46rem}
.blog h1{text-wrap:balance}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:0 0 1.5rem;padding:0;list-style:none;font-size:.875rem;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--line-strong)}
.crumbs a{color:var(--muted)}
.crumbs [aria-current]{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:24rem}
.blog .kicker{color:var(--accent)}
.blog .kicker time{font-weight:400;color:var(--muted)}
/* Short answer box: the 40–60 word direct answer that search and answer engines can quote. */
.service .answer{margin:0 0 1.75rem;padding:1.1rem 1.25rem;border-radius:var(--radius-sm);background:var(--accent-soft);border-left:4px solid var(--accent)}
.service .answer h2{margin:0 0 .35rem;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.answer p{margin:0;color:var(--ink);line-height:1.7}
.blog .toc{margin-bottom:2rem}
.blog .toc ol{columns:1}
.blog .toc li+li{margin-top:.2rem}
.post-body h2{margin-top:2.5rem;scroll-margin-top:5rem}
.post-body h2+p{margin-top:.4rem}
.post-body strong{color:var(--ink)}
.post-body td[lang=ko],.post-body td span[lang=ko]{color:var(--ink);font-weight:600}
.post-body td{vertical-align:top;line-height:1.55;font-size:.9375rem;color:var(--ink-2)}
.post-body caption{font-weight:600}
/* Sample chat: Korean bubble, small English gloss underneath. */
.blog-chat{margin:1.75rem 0;padding:1rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.blog-chat ol{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.blog-chat .msg{max-width:86%;margin:0;padding:.6rem .85rem;border-radius:18px 18px 18px 5px;background:var(--surface-2);color:var(--ink);line-height:1.5}
.blog-chat .msg.me{justify-self:end;border-radius:18px 18px 5px 18px;background:var(--accent);color:var(--accent-ink)}
.blog-chat .msg small{display:block;margin-top:.3rem;font-size:.8125rem;line-height:1.4;opacity:.78}
.blog-chat figcaption{margin-top:.85rem;font-size:.8125rem;color:var(--muted)}
.faq{margin-top:3rem!important;padding-top:1.5rem;border-top:1px solid var(--line)}
.faq h3{margin:1.4rem 0 .3rem;font-size:1.0625rem;color:var(--ink)}
.faq p{margin:0}
.cta{margin:3rem 0 0;padding:1.5rem;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--line)}
.cta strong{display:block;font-size:1.125rem;color:var(--ink)}
.cta p{margin:.5rem 0 0}
.cta .btn{margin-top:.5rem}
.related{margin-top:3.5rem!important}
.post-list{display:grid;gap:0;margin:1rem 0 0;padding:0!important;list-style:none}
.post-list li+li{margin-top:0}
.post-list a{display:grid;gap:.3rem;padding:1.25rem 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.post-list a:hover strong{color:var(--accent)}
.post-list strong{font-size:1.125rem;line-height:1.4;letter-spacing:-.01em}
.post-list span{color:var(--muted);font-size:.9375rem;line-height:1.6}
.post-list .card-meta{font-size:.8125rem;font-weight:600;color:var(--accent)}
.blog .note{margin-top:2rem;font-size:.9375rem;color:var(--muted)}
@media (max-width:40em){.answer{padding:1rem}.blog-chat{padding:.75rem}.blog-chat .msg{max-width:94%}}