:root{
  --bg:#03070f;
  --app-bg:#0a1a30;
  --app-bg-2:#06101f;
  --surface:#102844;
  --surface-2:#16314f;
  --surface-hi:#1c3a5e;
  --border:rgba(255,255,255,.09);
  --border-hi:rgba(255,255,255,.16);
  --text:#eef4fb;
  --text-muted:#9fb1c9;
  --text-dim:#6f86a3;
  --accent:#2fe0c0;
  --accent-2:#36e0c0;
  --accent-ink:#042018;
  --accent-soft:rgba(47,224,192,.12);
  --accent-line:rgba(47,224,192,.35);
  --accent-glow:rgba(47,224,192,.5);
  --danger:#ff6b6b;
  --radius:18px;
  --radius-sm:13px;
  --shadow:0 18px 50px -16px rgba(0,0,0,.65);
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100dvh;
  display:flex;
  justify-content:center;
  align-items:stretch;
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
#root{width:100%;display:flex;justify-content:center;}
.app{
  position:relative;
  width:100%;
  max-width:430px;
  min-height:100dvh;
  height:100dvh;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(47,224,192,.10), transparent 60%),
    linear-gradient(180deg,var(--app-bg) 0%,var(--app-bg-2) 100%);
  background-attachment:local;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
@media(min-width:480px){
  body{padding:26px 0;align-items:center;}
  .app{min-height:auto;height:892px;max-height:calc(100dvh - 52px);border-radius:30px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.06);}
}

/* ---- screen scaffold ---- */
.screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
/* 본문: 하단 여백으로 floating 푸터에 가리지 않도록 확보 */
.screen-body{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 22px calc(184px + env(safe-area-inset-bottom));scroll-padding-bottom:184px;}
.screen-body::-webkit-scrollbar{width:0;}
/* 푸터: floating(본문 위에 떠 있음) + 상단 페이드 강화(가려지는 본문이 점점 사라지도록) */
.screen-foot{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:34px 22px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0%,var(--app-bg) 34%,var(--app-bg-2) 64%);-webkit-backdrop-filter:blur(1.5px);}
.enter{animation:scn .42s cubic-bezier(.2,.7,.2,1) both;}
@keyframes scn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---- topbar ---- */
.topbar{position:sticky;top:0;z-index:7;display:flex;align-items:center;gap:12px;padding:16px 22px 10px;background:linear-gradient(180deg,var(--app-bg) 72%,transparent);}
.brand-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:6px 11px 6px 8px;box-shadow:0 4px 14px rgba(0,0,0,.25);}
.brand-pill img{height:19px;display:block;}
.backbtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:.15s;}
.backbtn:active{transform:scale(.94);}
.backbtn:hover{background:var(--surface-2);}
.top-spacer{flex:1;}
.top-hint{font-size:12.5px;color:var(--text-dim);font-weight:500;}

/* ---- stepper ---- */
.stepper{display:flex;align-items:center;gap:7px;padding:6px 22px 14px;}
.step-seg{flex:1;height:4px;border-radius:3px;background:var(--surface-2);overflow:hidden;}
.step-seg > i{display:block;height:100%;width:0;background:var(--accent);border-radius:3px;transition:width .5s cubic-bezier(.3,.7,.2,1);}
.step-seg.done > i{width:100%;}
.step-seg.cur > i{width:100%;}
.step-label{font-size:12px;color:var(--text-dim);font-weight:600;padding:0 22px 2px;letter-spacing:0;}

/* ---- typography ---- */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--accent);text-transform:none;}
.h1{font-size:31px;line-height:1.26;font-weight:800;letter-spacing:-0.028em;margin:8px 0 0;}
.h2{font-size:22px;line-height:1.34;font-weight:800;letter-spacing:-0.02em;margin:6px 0 0;}
.sub{font-size:14.5px;line-height:1.6;color:var(--text-muted);font-weight:500;margin:10px 0 0;}
.mint{color:var(--accent);}
.tiny{font-size:12px;color:var(--text-dim);line-height:1.5;}

/* ---- buttons ---- */
.btn{width:100%;border:none;border-radius:15px;font-family:var(--font);font-size:16.5px;font-weight:700;padding:17px 18px;cursor:pointer;transition:transform .12s,filter .15s,opacity .15s;letter-spacing:-0.01em;}
.btn:active{transform:scale(.985);}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 26px -8px var(--accent-glow);}
.btn-primary:hover{filter:brightness(1.04);}
.btn-primary:disabled{background:var(--surface-2);color:var(--text-dim);box-shadow:none;cursor:not-allowed;}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--surface);color:var(--text);}
.btn-soft{background:var(--surface-2);color:var(--text);}

/* ---- fields ---- */
.field{margin-top:18px;}
.field > label{display:block;font-size:13.5px;font-weight:700;color:var(--text-muted);margin-bottom:8px;}
.input{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:16px 15px;font-family:var(--font);font-size:16.5px;font-weight:600;color:var(--text);transition:.16s;outline:none;letter-spacing:-0.01em;}
.input::placeholder{color:var(--text-dim);font-weight:500;}
.input:focus{border-color:var(--accent-line);background:var(--surface-2);box-shadow:0 0 0 4px var(--accent-soft);}
.input.has-suffix{padding-right:52px;}
.field-wrap{position:relative;}
.suffix{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:15px;font-weight:700;color:var(--text-dim);pointer-events:none;}
.helper{font-size:12.5px;color:var(--text-dim);margin-top:7px;display:flex;align-items:center;gap:6px;}

/* ---- generic cards ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.pick{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px;display:flex;align-items:center;gap:15px;cursor:pointer;transition:.16s;text-align:left;width:100%;font-family:var(--font);color:var(--text);}
.pick:hover{border-color:var(--border-hi);background:var(--surface-2);transform:translateY(-1px);}
.pick.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft);}
.pick-ico{width:48px;height:48px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--accent);}
.pick.sel .pick-ico{background:var(--accent);color:var(--accent-ink);}
.pick-t{font-size:16.5px;font-weight:700;}
.pick-d{font-size:12.8px;color:var(--text-muted);margin-top:3px;line-height:1.45;font-weight:500;}
.chev{margin-left:auto;color:var(--text-dim);flex:0 0 auto;}

/* ---- chips (industry / area) ---- */
.chipgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.chip{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:14px 13px;display:flex;align-items:center;gap:11px;cursor:pointer;transition:.15s;font-family:var(--font);color:var(--text);text-align:left;}
.chip:hover{border-color:var(--border-hi);background:var(--surface-2);}
.chip.sel{border-color:var(--accent);background:var(--accent-soft);}
.chip-ico{width:34px;height:34px;border-radius:10px;background:var(--surface-2);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.chip.sel .chip-ico{background:var(--accent);color:var(--accent-ink);}
.chip-t{font-size:14.5px;font-weight:700;}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.qbtn{background:var(--surface);border:1.5px solid var(--border);color:var(--text-muted);border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:700;font-family:var(--font);cursor:pointer;transition:.15s;}
.qbtn:hover{border-color:var(--border-hi);color:var(--text);}
.qbtn.sel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}

/* ---- result ---- */
.amount-card{background:linear-gradient(165deg,var(--surface-2),var(--surface));border:1px solid var(--accent-line);border-radius:22px;padding:24px 22px;position:relative;overflow:hidden;}
.amount-card::after{content:"";position:absolute;width:160px;height:160px;right:-40px;top:-60px;background:radial-gradient(circle,var(--accent-soft),transparent 70%);}
.amt-cap{font-size:13px;font-weight:700;color:var(--text-muted);position:relative;}
.amt-big{font-size:42px;font-weight:800;letter-spacing:-0.03em;margin-top:6px;position:relative;}
.amt-big .won{font-size:24px;font-weight:700;color:var(--text-muted);margin-right:4px;}
.amt-big .per{font-size:17px;font-weight:600;color:var(--text-muted);margin-left:5px;}
.amt-year{font-size:14px;color:var(--text-muted);margin-top:8px;font-weight:600;position:relative;}
.amt-year b{color:var(--text);font-weight:800;}
.ai-tag{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);font-size:12px;font-weight:700;padding:7px 12px;border-radius:999px;margin-top:16px;}

.sec-title{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;margin:26px 0 12px;letter-spacing:-0.01em;}
.badge1{background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:7px;}
.similar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:4px 18px 6px;}
.srow{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);gap:14px;}
.srow:last-child{border-bottom:none;}
.sk{font-size:13.5px;color:var(--text-muted);font-weight:600;flex:0 0 auto;}
.sv{font-size:14.5px;color:var(--text);font-weight:700;text-align:right;}
.sv .small{font-size:12px;color:var(--text-dim);font-weight:600;display:block;margin-top:2px;}
.note{display:flex;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 14px;margin-top:14px;}
.note p{margin:0;font-size:12.5px;color:var(--text-muted);line-height:1.55;font-weight:500;}

/* ---- verifying / loading overlay ---- */
.overlay{position:absolute;inset:0;background:linear-gradient(180deg,var(--app-bg),var(--app-bg-2));z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;animation:fade .3s both;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ring{width:78px;height:78px;border-radius:50%;border:4px solid var(--surface-2);border-top-color:var(--accent);animation:spin .9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.ov-t{font-size:18px;font-weight:800;margin-top:26px;}
.ov-s{font-size:13.5px;color:var(--text-muted);margin-top:9px;font-weight:500;line-height:1.55;}
.scan{display:flex;gap:6px;margin-top:20px;}
.scan i{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.3;animation:blink 1.1s infinite;}
.scan i:nth-child(2){animation-delay:.18s}
.scan i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,100%{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1)}}

/* ---- success check ---- */
.check{width:96px;height:96px;border-radius:50%;background:var(--accent-soft);border:1px solid var(--accent-line);display:flex;align-items:center;justify-content:center;animation:pop .5s cubic-bezier(.2,1.4,.4,1) both;}
.check svg{width:46px;height:46px;}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.check svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .25s forwards;}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- verified chip ---- */
.vchip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:999px;padding:7px 13px 7px 10px;font-size:13px;font-weight:700;color:var(--accent);}
.vchip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}

/* ---- home specials ---- */
.hero-visual{margin:22px 0 4px;position:relative;height:200px;}
.preview-card{position:absolute;left:0;right:0;top:0;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:0 16px 40px -18px rgba(0,0,0,.7);transform-origin:center center;will-change:transform,opacity;}
.preview-card.shuf{animation:deckshuffle 12s ease-in-out infinite;}
@keyframes deckshuffle{
  0%,100%{transform:translate(0,18px) scale(1) rotate(0deg);opacity:1;z-index:30;}
  16%{transform:translate(13px,12px) scale(.95) rotate(2.5deg);opacity:.82;z-index:30;}
  33%{transform:translate(21px,2px) scale(.87) rotate(4.5deg);opacity:.5;z-index:10;}
  50%{transform:translate(2px,3px) scale(.89) rotate(.5deg);opacity:.6;z-index:10;}
  66%{transform:translate(-18px,9px) scale(.92) rotate(-4deg);opacity:.78;z-index:20;}
  83%{transform:translate(-9px,15px) scale(.97) rotate(-1.8deg);opacity:.92;z-index:20;}
  92%{transform:translate(-3px,17px) scale(.99) rotate(-.6deg);opacity:.98;z-index:30;}
}
@media(prefers-reduced-motion:reduce){.preview-card.shuf{animation:none;}.preview-card.shuf:not(:last-child){opacity:.6;}}

/* ---- flip clock (연 보험료) ---- */
.flipclock{margin-top:48px;}
.fc-cap{display:flex;align-items:center;gap:7px;color:var(--accent);font-size:13px;font-weight:700;margin-bottom:14px;}
.fc-row{display:flex;align-items:flex-end;justify-content:center;gap:5px;}
.fc-won{align-self:flex-end;font-size:34px;font-weight:800;color:var(--text);margin:0 5px 7px 0;}
.fc-comma{align-self:flex-end;font-size:34px;font-weight:800;color:var(--text);margin:0 1px 6px;}
.flip{position:relative;width:44px;height:62px;perspective:300px;border-radius:9px;box-shadow:0 9px 20px -8px rgba(0,0,0,.75);}
.flip-half,.leaf{position:absolute;left:0;right:0;height:31px;overflow:hidden;color:#f3eee1;}
.flip-half .n,.leaf .n{position:absolute;left:0;right:0;top:0;height:62px;display:flex;align-items:center;justify-content:center;line-height:1;font-size:42px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.flip-half.top,.leaf.top{top:0;border-radius:9px 9px 0 0;background:linear-gradient(180deg,#34373f,#23262c);}
.flip-half.bottom,.leaf.bottom{bottom:0;border-radius:0 0 9px 9px;background:linear-gradient(180deg,#1d2026,#101216);}
.flip-half.bottom .n,.leaf.bottom .n{top:-31px;}
.leaf{z-index:4;backface-visibility:hidden;}
.leaf.top{transform-origin:50% 100%;}
.leaf.bottom{transform-origin:50% 0%;transform:rotateX(90deg);}
.flip.go .leaf.top{animation:flipTop .3s ease-in forwards;}
.flip.go .leaf.bottom{animation:flipBottom .32s .3s ease-out forwards;}
.flip.roll .leaf.top{animation:flipTop 80ms ease-in forwards;}
.flip.roll .leaf.bottom{animation:flipBottom 80ms 80ms ease-out forwards;}
.flip::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-1px);background:rgba(0,0,0,.6);z-index:6;}
.flip::before{content:"";position:absolute;left:0;right:0;top:0;height:31px;border-radius:9px 9px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent);z-index:5;pointer-events:none;}
@keyframes flipTop{to{transform:rotateX(-90deg)}}
@keyframes flipBottom{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}
@media(prefers-reduced-motion:reduce){.leaf{display:none;}}
.trustrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.tchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:700;color:var(--text-muted);}
.tchip svg{color:var(--accent);}
.social{font-size:12.5px;color:var(--text-dim);text-align:center;margin-top:2px;font-weight:500;}

.opt-radio{width:24px;height:24px;border-radius:50%;border:2px solid var(--border-hi);flex:0 0 auto;display:flex;align-items:center;justify-content:center;transition:.15s;margin-left:auto;}
.pick.sel .opt-radio{border-color:var(--accent);}
.pick.sel .opt-radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--accent);}

.or-div{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--text-dim);font-size:12.5px;font-weight:700;}
.or-div::before,.or-div::after{content:"";flex:1;height:1px;background:var(--border);}
.consult-pick{border-style:solid;border-color:var(--border);background:var(--surface);}
.consult-pick:hover{border-color:var(--border-hi);background:var(--surface-2);}
.consult-pick .pick-ico{background:var(--surface-2);}