:root{
  --bg:#F1F3F4; --sky2:#F1F3F4;
  --paper:#F8F9FA; --card:#FFFFFF; --ink:#202124; --muted:#5F6368; --soft:#E8EAED; --edge:#DADCE0; --coast:#80868B;
  --red:#C5221F; --sun:#FBBC04; --mint:#34A853; --pink:#B80672; --blue:#1A73E8; --plum:#8430CE; --green:#137333; --orange:#C26401;
  --sea:#AADAFF; --sea-tx:#3E7CB1; --line-in:#FFFFFF;
  --p1:#FCF1CF; --p2:#DDEFE0; --p3:#FADFDD; --p4:#DDE8F8; --p5:#EAE2F5; --p6:#FBE5D2;
  --me:#1A73E8; --ans:#EA4335; --ok:#137333; --bad:#C5221F; --chip:#F1F3F4; --lock:#BDC1C6;
  --sel:#E8F0FE; --on-sel:#1967D2; --okbg:#E6F4EA;
  --on-accent:#FFFFFF; --on-sun:#202124;
  --pp:#1D3461; --gold:#E3C477; --visa:#FBFAF5; --guil:#1A73E80F;
  --e1:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15);
  --e2:0 1px 2px rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
  --e3:0 4px 8px 3px rgba(60,64,67,.15),0 1px 3px rgba(60,64,67,.3);
  --f-title:"Inter","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"Inter","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-hand:var(--f-body);
  --f-data:"Inter","Noto Sans KR",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#202124; --sky2:#202124;
    --paper:#28292C; --card:#303134; --ink:#E8EAED; --muted:#9AA0A6; --soft:#3C4043; --edge:#5F6368; --coast:#9AA0A6;
    --red:#F28B82; --sun:#FDD663; --mint:#81C995; --pink:#FF8BCB; --blue:#8AB4F8; --plum:#C58AF9; --green:#81C995; --orange:#FCAD70;
    --sea:#17263C; --sea-tx:#7FA6CF; --line-in:#202124;
    --p1:#3B3626; --p2:#25392D; --p3:#402B2C; --p4:#26334A; --p5:#342C45; --p6:#403126;
    --me:#8AB4F8; --ans:#F28B82; --ok:#81C995; --bad:#F28B82; --chip:#3C4043; --lock:#5F6368;
    --sel:#394457; --on-sel:#D2E3FC; --okbg:#2A3C30;
    --on-accent:#202124; --on-sun:#202124;
    --pp:#1A2C4F; --gold:#E3C477; --visa:#2A2B2E; --guil:#8AB4F812;
    --e1:0 1px 2px rgba(0,0,0,.4),0 1px 3px 1px rgba(0,0,0,.25);
    --e2:0 1px 2px rgba(0,0,0,.4),0 2px 6px 2px rgba(0,0,0,.25);
    --e3:0 4px 8px 3px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#202124; --sky2:#202124;
  --paper:#28292C; --card:#303134; --ink:#E8EAED; --muted:#9AA0A6; --soft:#3C4043; --edge:#5F6368; --coast:#9AA0A6;
  --red:#F28B82; --sun:#FDD663; --mint:#81C995; --pink:#FF8BCB; --blue:#8AB4F8; --plum:#C58AF9; --green:#81C995; --orange:#FCAD70;
  --sea:#17263C; --sea-tx:#7FA6CF; --line-in:#202124;
  --p1:#3B3626; --p2:#25392D; --p3:#402B2C; --p4:#26334A; --p5:#342C45; --p6:#403126;
  --me:#8AB4F8; --ans:#F28B82; --ok:#81C995; --bad:#F28B82; --chip:#3C4043; --lock:#5F6368;
  --sel:#394457; --on-sel:#D2E3FC; --okbg:#2A3C30;
  --on-accent:#202124; --on-sun:#202124;
  --pp:#1A2C4F; --gold:#E3C477; --visa:#2A2B2E; --guil:#8AB4F812;
  --e1:0 1px 2px rgba(0,0,0,.4),0 1px 3px 1px rgba(0,0,0,.25);
  --e2:0 1px 2px rgba(0,0,0,.4),0 2px 6px 2px rgba(0,0,0,.25);
  --e3:0 4px 8px 3px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);background:var(--bg);font-family:var(--f-body);font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
html[lang="ko"] [data-l="en"],html:not([lang="ko"]) [data-l="ko"]{display:none!important}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
a{color:var(--blue)}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.sh{background:var(--card);box-shadow:var(--e1);position:sticky;top:0;z-index:5}
.sh .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding-top:8px;padding-bottom:6px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;margin-right:auto;letter-spacing:-.01em}
.brand .lg{width:34px;height:34px}
.lb{border:1px solid var(--edge);background:var(--card);color:var(--blue);border-radius:99px;padding:6px 12px;font:600 13.5px/1.2 var(--f-body);cursor:pointer}
.sn{display:flex;gap:2px;flex-wrap:wrap;width:100%;margin:0 -8px}
.sn a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;padding:6px 10px;border-radius:99px;white-space:nowrap}
.sn a[aria-current]{color:var(--on-sel);background:var(--sel)}
@media (min-width:720px){.sn{width:auto;order:-1;margin:0 0 0 12px}.brand{margin-right:0}.lb{margin-left:auto}}
main{padding:28px 16px 48px}
h1{font-size:30px;line-height:1.2;margin:0 0 10px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:21px;line-height:1.3;margin:34px 0 8px;font-weight:700;text-wrap:balance}
h3{font-size:17px;line-height:1.35;margin:0}
p{margin:0 0 12px}
.lede{color:var(--muted);font-size:17.5px;margin:0 0 22px}
.card{background:var(--card);border-radius:16px;box-shadow:var(--e1);padding:18px 20px;margin:14px 0}
.play{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:var(--on-accent);text-decoration:none;font-weight:700;border-radius:99px;padding:12px 24px;margin:6px 0 4px;box-shadow:var(--e1)}
ol.steps{padding-left:22px;margin:0}
ol.steps li{margin:0 0 14px;padding-left:4px}
ol.steps b,ul.pl b{font-weight:700}
ul.pl{padding-left:20px;margin:0 0 12px}
ul.pl li{margin:0 0 6px}
.shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.shapes figure{margin:0;text-align:center;font-size:13.5px;color:var(--muted);font-weight:600}
.shapes svg.stamp{width:100%;max-width:130px;height:auto;aspect-ratio:1}
svg.stamp{display:block;margin:0 auto;transform:rotate(var(--r,0deg));overflow:visible}
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:18px 0}
.st{background:var(--card);border-radius:16px;box-shadow:var(--e1);padding:16px 16px 14px;display:flex;flex-direction:column;gap:3px;scroll-margin-top:110px}
.st svg.stamp{width:136px;height:136px;margin:2px auto 12px}
.st .ko{font-size:14.5px;color:var(--muted);font-weight:500}
.st .wh{font-size:12.5px;color:var(--muted);font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.st p{font-size:14.5px;line-height:1.6;margin:8px 0 0}
.provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:14px 0}
.provs a{display:flex;flex-direction:column;background:var(--card);border-radius:14px;box-shadow:var(--e1);padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:700}
.provs a span.n{font-size:13px;font-weight:500;color:var(--muted)}
.crumb{font-size:14px;margin:0 0 6px}
.pn{display:flex;justify-content:space-between;gap:10px;margin:22px 0 0;font-weight:600}
.sf{border-top:1px solid var(--soft);padding:22px 0 44px;color:var(--muted);font-size:13.5px}
.sf nav{display:flex;gap:6px 16px;flex-wrap:wrap;margin:0 0 8px}
.sf a{color:var(--muted)}
.small{font-size:13.5px;color:var(--muted)}