:root{
  --ink:#101114; --soft:#6E7178; --mute:#9B9EA4;
  --bg:#FFFFFF; --wash:#F5F5F2; --line:#E6E6E2;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
.top{padding:22px 24px 0;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:13px;font-weight:700;letter-spacing:.28em;padding-left:.28em;}
.count{font-size:13px;color:var(--mute);}

.bar{height:3px;background:var(--line);margin:18px 24px 0;border-radius:99px;overflow:hidden;}
.fill{height:3px;background:var(--ink);width:25%;transition:width .35s cubic-bezier(.2,.8,.3,1);}

main{flex:1;display:flex;align-items:center;padding:24px;}
.wrap{max-width:520px;margin:0 auto;width:100%;}

.step{display:none;animation:in .3s cubic-bezier(.2,.8,.3,1) both;}
.step.on{display:block;}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

h1{font-size:clamp(26px,5vw,34px);line-height:1.16;letter-spacing:-1.1px;font-weight:600;}
.opts{margin-top:26px;display:flex;flex-direction:column;gap:10px;}
.opt{
  border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  font-size:17px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s;
  background:var(--bg);
}
.opt:hover{border-color:var(--ink);}
.opt:active{transform:scale(.99);}
.opt.sel{border-color:var(--ink);background:var(--wash);}

.price{font-size:52px;font-weight:600;letter-spacing:-2px;line-height:1;}
.per{font-size:17px;color:var(--soft);font-weight:500;}
.note{font-size:16px;color:var(--soft);margin-top:14px;line-height:1.5;}
input{
  width:100%;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  font-size:17px;font-family:inherit;margin-top:24px;outline:none;background:var(--bg);color:var(--ink);
}
input:focus{border-color:var(--ink);}
.err{font-size:14px;color:#B03A2C;margin-top:8px;display:none;}
.err.on{display:block;}
.btn{
  width:100%;background:var(--ink);color:#fff;border:none;border-radius:14px;
  padding:19px;font-size:17px;font-weight:600;font-family:inherit;cursor:pointer;margin-top:12px;
  transition:transform .1s;
}
.btn:active{transform:scale(.99);}
.small{font-size:13.5px;color:var(--mute);margin-top:14px;text-align:center;}

.done{text-align:center;}
.tick{font-size:40px;line-height:1;}
.done .tick{font-size:40px;}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden;}
.btn:disabled{opacity:.55;cursor:wait;}
.small.skip{cursor:pointer;}