:root{--ink:#1D1D1F;--sub:#5c6b7d;--line:#e3e8ee;--blue:#0066CC;--blue-d:#0A4DB0;--tint:#EEF4FE;--bg:#F5F5F7;--card:#fff;--red:#E5342B}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
.wrap{max-width:860px;margin:0 auto;padding:0 18px 60px}
.top{background:#1D1D1F;color:#fff;padding:14px 18px}
.top .in{max-width:860px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.top a{color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;border:1.5px solid rgba(255,255,255,.5);padding:6px 13px;border-radius:999px;white-space:nowrap}
.top .k{font-size:12px;letter-spacing:2px;color:#2997FF;font-weight:700}
header{background:linear-gradient(135deg,#1D1D1F,#2A2A2C);color:#fff;padding:30px 18px 44px;text-align:center}
header .step{display:inline-block;background:var(--blue);font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px}
header h1{font-size:clamp(25px,5.5vw,36px);font-weight:900;letter-spacing:-1px;margin:12px 0 10px;line-height:1.3}
header p{font-size:15px;color:#c8cdd4;max-width:560px;margin:0 auto}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:22px 0}
.box.first{margin-top:-26px;box-shadow:0 6px 24px rgba(20,30,50,.07)}
.box h2{font-size:17px;font-weight:900;margin-bottom:8px}
.box p,.box li{font-size:14.8px;color:var(--sub)}
.box b{color:var(--ink)}
.box ul{padding-left:18px}.box li{margin:4px 0}
.st{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;margin:18px 0}
.st .hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.st .n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900;font-size:17px;display:flex;align-items:center;justify-content:center}
.st h3{font-size:19px;font-weight:900;letter-spacing:-.4px;line-height:1.35}
.st ol{list-style:none;counter-reset:s;margin:6px 0 4px}
.st ol li{counter-increment:s;position:relative;padding:7px 0 7px 32px;font-size:15.5px;color:#2f3a46}
.st ol li:before{content:counter(s);position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:12.5px;font-weight:900;display:flex;align-items:center;justify-content:center}
.st ol li b{color:var(--ink)}
.btnlike{display:inline-block;background:#fff;border:1.5px solid #c9d2dc;border-radius:7px;padding:0 7px;font-weight:700;color:var(--ink);font-size:14px;white-space:nowrap}
figure{margin:12px 0 6px;border:1px solid #d9dfe6;border-radius:12px;overflow:hidden;background:#111}
figure img{display:block;width:100%;height:auto}
figcaption{background:#fff;font-size:13px;color:var(--sub);padding:8px 12px;border-top:1px solid #e7ebf0}
.copy{display:flex;align-items:center;gap:8px;background:var(--tint);border-radius:10px;padding:10px 12px;margin:8px 0}
.copy code{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:14.5px;color:var(--blue-d);word-break:break-all}
.copy button{flex:none;background:var(--blue);color:#fff;border:none;border-radius:999px;padding:8px 14px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit}
.tip{background:#FFF8E1;border-left:4px solid #F4C430;border-radius:0 10px 10px 0;padding:11px 14px;margin:10px 0;font-size:14px;color:#6b5518}
.tip b{color:#5a4510}
.ok{background:#EAF7EF;border-left:4px solid #1a8a4a;border-radius:0 10px 10px 0;padding:11px 14px;margin:10px 0;font-size:14.2px;color:#20553a}
.say{display:inline-block;background:var(--blue);color:#fff;font-weight:700;font-size:15px;padding:9px 16px;border-radius:4px 16px 16px 16px;margin:6px 0}
.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 20px;margin:22px 0}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:'▸ ';color:var(--blue)}
.faq details[open] summary:before{content:'▾ '}
.faq p{font-size:14.3px;color:var(--sub);margin-top:6px}
.next{display:block;background:linear-gradient(135deg,#0A4DB0,#0066CC);color:#fff;text-decoration:none;border-radius:14px;padding:18px 22px;margin:26px 0 0}
.next small{font-size:12.5px;opacity:.85;font-weight:700}
.next b{display:block;font-size:18px;margin-top:3px}
footer{margin-top:40px;padding-top:18px;border-top:2px solid var(--ink);text-align:center;font-size:13.5px;color:var(--sub)}
footer b{color:var(--ink)}
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:rgba(25,30,38,.93);color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:99}
#toast.on{opacity:1}
@media (max-width:640px){.st{padding:18px 15px 14px}.st h3{font-size:17.5px}.st ol li{font-size:15px}.box{padding:17px 16px}}