:root{
  --bg:#f5f5f7;
  --paper:#ffffff;
  --ink:#1d1d1f;
  --ink2:#6e6e73;
  --ink3:#a1a1a6;
  --line:#e8e8ed;
  --line-2:#f0f0f3;
  --fill:#f5f5f7;
  --accent:#56ad33;
  --accent-ring:rgba(86,173,51,.18);
  --accent-d:#479026;
  --green:#56ad33;
  --radius:18px;
  --tabbar-h:60px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Apple SD Gothic Neo","Pretendard","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 50% -10%, #ffffff 0%, transparent 60%),
    var(--bg);
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:0; -webkit-font-smoothing:antialiased;
}
/* phone frame */
.phone{
  width:100%; height:100vh; height:100dvh;
  background:var(--paper); border-radius:0;
  box-shadow:none;
  overflow:hidden; position:relative; display:flex; flex-direction:column;
}
.island{display:none}
/* top bar */
.topbar{
  flex:0 0 auto; height:50px; display:flex; align-items:center; justify-content:flex-start; gap:6px;
  padding:0 16px; margin-top:calc(env(safe-area-inset-top, 0px) + 8px); position:relative; z-index:20;
}
.brand{display:flex;align-items:center;gap:8px}
.brand .logo-mark{height:27px;width:auto;display:block}
.brand .logo-word{font-size:17px;font-weight:800;letter-spacing:-.012em;color:var(--ink);line-height:1}
.back{border:none;background:transparent;font-size:24px;line-height:1;color:var(--ink);cursor:pointer;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:background .2s;flex:0 0 auto}
.back:active{background:var(--fill)}
.back.hidden{display:none}
.user-av{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--fill) center top/cover no-repeat;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;flex:0 0 34px;transition:transform .15s}
.user-av:active{transform:scale(.92)}
/* progress */
.steps{flex:0 0 auto;display:flex;gap:4px;padding:4px 22px 12px}
.steps i{height:3px;flex:1;border-radius:3px;background:var(--line);transition:.4s cubic-bezier(.4,0,.2,1)}
.steps i.done{background:var(--ink)}
.steps i.cur{background:var(--accent)}
/* screen container */
.scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--tabbar-h) + 78px + env(safe-area-inset-bottom, 0px))}
.scroll::-webkit-scrollbar{width:0}
.screen{display:none;padding:8px 22px 30px;animation:fade .45s cubic-bezier(.16,1,.3,1)}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1.title{font-size:27px;margin:12px 0 6px;line-height:1.18;font-weight:700;letter-spacing:-.022em}
p.sub{margin:0 0 24px;color:var(--ink2);font-size:15px;line-height:1.5;letter-spacing:-.01em}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border-radius:15px;border:none;font-size:16.5px;font-weight:600;letter-spacing:-.01em;cursor:pointer;font-family:inherit;transition:transform .14s cubic-bezier(.4,0,.2,1), filter .2s, background .2s}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:active{filter:brightness(1.4)}
.btn-primary:disabled{background:var(--line);color:var(--ink3);cursor:not-allowed;filter:none}
.btn-green{background:var(--ink);color:#fff}
.btn-green:active{filter:brightness(1.4)}
.btn-ghost{background:var(--fill);color:var(--ink)}
.btn-kakao{background:#FEE500;color:#1a1700}
.btn-naver{background:#03C75A;color:#fff}
.cta-dock{position:absolute;bottom:var(--tabbar-h);left:0;right:0;padding:14px 22px 18px;background:linear-gradient(to top,var(--paper) 64%,rgba(255,255,255,0));z-index:25}