:root{--bg:#f6f4fb;--surface:#fff;--ink:#252430;--muted:#6e6a7c;--line:#e6e1ef;--mint:#95dbc9;--mint-deep:#4d9f8b;--lav:#b8a6ea;--lav-deep:#6652a4}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 5% 0,rgba(149,219,201,.24),transparent 24rem),radial-gradient(circle at 100% 8%,rgba(184,166,234,.22),transparent 28rem),var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif;line-height:1.8;font-size:16px}
a{color:var(--lav-deep)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:50}
.top{position:sticky;top:0;z-index:10;background:rgba(246,244,251,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.top-in{max-width:880px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.02em;color:var(--ink);text-decoration:none;font-size:14px}
.brand i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--mint),var(--lav))}
.nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;font-weight:700}
.nav a{color:#5f5a6d;text-decoration:none;padding:4px 2px}.nav a:hover,.nav a[aria-current]{color:var(--lav-deep);text-decoration:underline}
.nav .cta{background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px}.nav .cta:hover{color:#fff}
main{max-width:760px;margin:0 auto;padding:36px 20px 56px}
article{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:32px 34px;box-shadow:0 18px 50px rgba(81,66,112,.10)}
h1{font-size:28px;line-height:1.35;margin:0 0 10px}
h2{font-size:20px;margin:34px 0 8px;padding-left:10px;border-left:4px solid var(--mint)}
.lead{font-size:17px;color:var(--muted);margin:0 0 8px}
p,li{word-break:keep-all}
ul,ol{padding-left:22px}li{margin:4px 0}
.todo{background:#fff6d6;border:1px dashed #d9b840;border-radius:6px;padding:1px 8px}
.try{margin:30px 0 0;text-align:center}.try a{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:800;border-radius:999px;padding:12px 26px}
footer{max-width:760px;margin:0 auto;padding:0 20px 44px;text-align:center;color:var(--muted);font-size:13px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;margin-bottom:8px}
footer a{color:var(--lav-deep);font-weight:700}
@media (max-width:600px){article{padding:22px 18px;border-radius:16px}h1{font-size:23px}main{padding-top:22px}body{font-size:15.5px}}