:root{--blue:#2563FF;--navy:#0B1B3D;--text:#0A0B0D;--muted:#3C4148;--line:#E3E6EA;--surface:#F6F7F9;--teal:#0E9F8E;--teal-soft:#E2F6F3;--amber-soft:#FFF4DE;--amber:#8A5A00}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--text);font-family:'IBM Plex Sans KR','Noto Sans KR',system-ui,sans-serif;font-size:16px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
main{max-width:680px;margin:0 auto;padding:24px 16px 56px;display:grid;gap:34px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px}
header img{height:28px}
header nav a{font-size:14px;color:var(--muted);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.3;text-wrap:balance}
h1{font-size:28px}h2{font-size:20px}h3{font-size:16px}
p{margin:0}
section,.intro{display:grid;gap:14px}
.eyebrow{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.04em}
.lead{font-size:17px;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:step}
.steps li{counter-increment:step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px}
.steps li::before{content:counter(step);width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700}
.steps .body{display:grid;gap:4px;padding-top:4px}
.steps .body p,.muted{color:var(--muted)}
.path b{color:var(--blue)}
.box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:8px}
.keep{background:var(--teal-soft);border-radius:14px;padding:16px;display:grid;gap:8px}
.keep h3{color:var(--teal)}
.warn{background:var(--amber-soft);border-radius:14px;padding:16px;display:grid;gap:6px}
.warn h3{color:var(--amber)}
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.compare{grid-template-columns:1fr}}
ul{margin:0;padding-left:20px;display:grid;gap:4px}
details{border-bottom:1px solid var(--line);padding:12px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600}
details p{margin-top:8px;color:var(--muted)}
.cards{display:grid;gap:12px}
.cards a{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none}
.cards a:hover,.cards a:focus-visible{border-color:var(--blue)}
.cards a b{color:var(--blue)}
.cta{display:inline-block;padding:13px 18px;border-radius:12px;background:var(--blue);color:#fff;font-weight:700;text-decoration:none}
a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
footer{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 12px}
footer a{color:var(--muted)}