:root{--bg:#F6F7F9;--card:#fff;--ink:#111827;--dim:#6B7280;--dim2:#9CA3AF;--edge:#E7E9EE;--mint:#12B886;--r:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0 auto;max-width:520px;padding:0 16px calc(28px + env(safe-area-inset-bottom));background:transparent;color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:14px;line-height:1.55;letter-spacing:-.01em;overflow-x:hidden}
.top{padding:26px 2px 14px}
.brand{display:flex;align-items:center;gap:8px}
.brand svg{width:26px;height:26px;color:var(--ink)}
h1{margin:0;font-size:21px;font-weight:750;letter-spacing:-.03em}
.tag{margin:4px 0 0 34px;font-size:12.5px;color:var(--dim)}
.card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:16px;margin-bottom:12px}
.lb{display:block;font-size:11px;color:var(--dim2);font-weight:600;margin-bottom:5px}
input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#F3F4F6;border:1px solid transparent;border-radius:12px;padding:11px 12px;outline:none;-webkit-appearance:none}
input:focus{background:#fff;border-color:var(--mint)}
.od{display:grid;grid-template-columns:1fr 40px 1fr;gap:8px;align-items:end}
.swap{height:46px;border:0;border-radius:12px;background:#F3F4F6;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.swap svg{width:20px;height:20px}
.sug{margin-top:8px;border:1px solid var(--edge);border-radius:14px;overflow:hidden;max-height:260px;overflow-y:auto}
.sug button{display:flex;width:100%;align-items:center;gap:8px;background:#fff;border:0;border-bottom:1px solid #F1F2F5;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);text-align:left;cursor:pointer}
.sug button:last-child{border-bottom:0}
.sug button:active,.sug button:hover{background:#F0FBF7}
.dots{display:inline-flex;gap:3px;margin-left:auto}
.ln{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 4px;border-radius:10px;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:0}
.go{width:100%;margin-top:14px;height:50px;border:0;border-radius:14px;background:var(--ink);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.err{margin:10px 0 0;color:#DC2626;font-size:12.5px}

.sum{display:flex;align-items:center;gap:12px}
.sum .big{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.sum .sub{font-size:12.5px;color:var(--dim);margin-top:3px}
.sum .badge{margin-left:auto;background:#E6F8F1;color:#0B8A63;font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 10px;white-space:nowrap}
.sum .badge.warn{background:#FFF4E5;color:#B45309}

.steps{position:relative;margin:0;padding:0;list-style:none}
.step{position:relative;padding:0 0 18px 34px}
.step:last-child{padding-bottom:2px}
.step::before{content:"";position:absolute;left:11px;top:22px;bottom:-2px;width:4px;border-radius:2px;background:var(--c,#D1D5DB)}
.step:last-child::before{display:none}
.step .nd{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--c,#9CA3AF)}
.step.ride .nd{width:12px;height:12px;left:7px;top:7px;border-width:0;background:var(--c)}
.step h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.step p{margin:3px 0 0;color:var(--dim);font-size:12.5px}
.door{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:#111827;color:#fff;border-radius:12px;padding:8px 12px}
.door b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.door span{font-size:11.5px;opacity:.75;line-height:1.3}
.door.mint{background:var(--mint)}
.warnline{margin-top:6px;font-size:12px;color:#B45309;background:#FFF7E8;border-radius:10px;padding:7px 10px}
.train{display:flex;gap:3px;margin-top:9px}
.train i{flex:1;height:14px;border-radius:4px;background:#EEF0F3;position:relative}
.train i.on{background:var(--mint)}
.train i.on::after{content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--mint)}

.note{background:transparent;border-style:dashed}
.note h2{margin:0 0 8px;font-size:13px}
.note ul{margin:0;padding-left:16px;color:var(--dim);font-size:11.5px;line-height:1.65}
.note b{color:var(--ink);font-weight:600}
.share{width:100%;height:46px;border:1px solid var(--edge);border-radius:14px;background:#fff;font:inherit;font-size:13.5px;font-weight:650;color:var(--ink);cursor:pointer;margin-bottom:12px}
.share.done{color:#0B8A63;border-color:#A7E8D0}
footer{text-align:center;font-size:11.5px;color:var(--dim2);padding:6px 0}
footer a{color:var(--dim);text-decoration:none}