:root{
  --bg:#FFFFFF; --ink:#141414; --muted:#777777; --faint:#9A9A9A;
  --butter:#FFF6DC; --pink:#FFE9F0; --sky:#EAF2FF; --mint:#E8F6EA; --lavender:#F3ECFF;
  --red:#E0442E; --yellow:#F5B800; --green:#2E9E44;
  --line:1.5px solid var(--ink); --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans KR",-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:480px;margin:0 auto;padding:24px 20px 56px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-size:20px;letter-spacing:-.02em}
.brand img{width:36px;height:36px;border-radius:10px;border:var(--line)}
.hand{font-family:"Gaegu","Noto Sans KR",sans-serif;font-weight:700}
.title{font-family:"Jua","Noto Sans KR",sans-serif;font-weight:400;font-size:34px;line-height:1.25;margin:28px 0 8px;letter-spacing:-.01em}
.lede{color:var(--muted);margin:0 0 20px;font-size:15px}
.cell{border:var(--line);border-radius:var(--radius);padding:20px;position:relative;background:var(--bg)}
.cell.butter{background:var(--butter)}.cell.pink{background:var(--pink)}.cell.sky{background:var(--sky)}.cell.mint{background:var(--mint)}.cell.lavender{background:var(--lavender)}
.sticker{position:absolute;top:-12px;right:14px;background:var(--red);color:#fff;font-family:"Gaegu",sans-serif;font-weight:700;font-size:15px;border-radius:999px;padding:2px 12px;transform:rotate(8deg)}
.sticker.y{background:var(--yellow);color:var(--ink);transform:rotate(-7deg)}
.code{font-size:40px;font-weight:900;letter-spacing:8px;text-align:center;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 18px;border-radius:999px;border:var(--line);
  background:var(--ink);color:#fff;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;margin-top:10px;font-family:inherit}
.btn.ghost{background:var(--bg);color:var(--ink)}
.btn.soft{background:var(--butter);color:var(--ink)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.steps{margin:24px 0 0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #EFEFEF}
.steps li::before{content:counter(s);flex:0 0 28px;height:28px;border:var(--line);border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px}
.steps b{display:block}
.steps span{color:var(--muted);font-size:13.5px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--line);border-radius:var(--radius);overflow:hidden;margin:20px 0}
.grid div{padding:14px 12px;border-right:var(--line);border-bottom:var(--line);font-size:13px}
.grid div:nth-child(2n){border-right:0}.grid div:nth-last-child(-n+2){border-bottom:0}
.grid .e{font-size:30px;line-height:1;display:block;margin-bottom:6px}
.foot{margin-top:40px;color:var(--faint);font-size:12px;display:flex;gap:14px;flex-wrap:wrap}
.foot a{text-decoration:none}
.doc h1{font-family:"Jua",sans-serif;font-weight:400;font-size:30px;margin:24px 0 4px}
.doc .meta{color:var(--muted);font-size:13px;margin:0 0 20px}
.doc h2{font-size:17px;margin:26px 0 8px;padding-left:10px;border-left:4px solid var(--red)}
.doc p,.doc li{font-size:14.5px}
.doc ul{padding-left:18px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;transition:.25s;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}