:root{
  --mint:#20B985; --mint-600:#18A675; --mint-text:#0B7A57; --mint-tint:#EBF9F3;
  --bg:#fff; --alt:#F7F8FA; --line:#EDF0F3;
  --t1:#12161B; --t2:#5A6472; --t3:#98A2AE;
  --radius:20px;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--t1);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",Pretendard,"Malgun Gothic",sans-serif;
  line-height:1.62;-webkit-font-smoothing:antialiased;letter-spacing:-.02em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:680px}

/* 내비 */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);backdrop-filter:blur(14px)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px}
.mark{width:26px;height:26px;border-radius:8px;background:var(--mint);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800}
.nav-links{margin-left:auto;display:flex;gap:24px;font-size:14.5px;color:var(--t2);font-weight:500}
.nav-links a:hover{color:var(--t1)}

/* 히어로 */
.hero{padding:80px 0 72px}
.hero-in{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:center}
h1{font-size:clamp(34px,5.2vw,54px);line-height:1.22;letter-spacing:-.045em;margin:0 0 20px;font-weight:800}
.lede{font-size:18px;color:var(--t2);margin:0 0 32px;line-height:1.6}
.cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;border-radius:14px;padding:15px 26px;
  font-size:16px;font-weight:700;transition:.14s}
.btn-primary{background:var(--mint);color:#fff}
.btn-primary:hover{background:var(--mint-600)}
.btn-text{color:var(--t2);padding:15px 8px}
.btn-text:hover{color:var(--t1)}

/* 폰 */
.phone{width:300px;margin:0 auto;border-radius:42px;background:#fff;padding:10px;
  box-shadow:0 30px 70px rgba(18,22,27,.14),0 0 0 1px var(--line)}
.screen{border-radius:33px;background:var(--mint-tint);padding:26px 20px 28px}
.pill{width:80px;height:5px;border-radius:99px;background:#D8DEE5;margin:0 auto 22px}
.dday{font-size:13px;font-weight:700;color:var(--mint-text)}
.dday b{display:block;font-size:34px;color:var(--t1);letter-spacing:-.045em;margin-top:1px;line-height:1.1}
.blob{margin:22px auto;width:116px;height:116px;border-radius:50%;
  background:linear-gradient(160deg,#fff,#D6F0E5);display:grid;place-items:center;font-size:50px}
.bubble{background:#fff;border-radius:16px;padding:13px 15px;font-size:13.5px;color:var(--t2);margin-bottom:16px}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.mini div{background:#fff;border-radius:13px;padding:12px 4px;text-align:center;font-size:10.5px;color:var(--t3)}
.mini span{display:block;font-size:19px;margin-bottom:3px}

/* 섹션 */
section{padding:88px 0}
.alt{background:var(--alt)}
h2{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.04em;margin:0 0 14px;font-weight:800;line-height:1.28}
.sec-lede{color:var(--t2);font-size:17px;margin:0 0 44px;max-width:34ch}

/* 동선 */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step-n{font-size:15px;font-weight:800;color:var(--mint);padding-top:2px}
.step h3{margin:0 0 4px;font-size:19px;letter-spacing:-.03em}
.step p{margin:0;font-size:15px;color:var(--t2)}

/* 기능 */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.feat{background:#fff;border-radius:var(--radius);padding:32px 28px}
.alt .feat{background:#fff}
.ic{font-size:30px;margin-bottom:16px;line-height:1}
.feat h3{margin:0 0 8px;font-size:19px;letter-spacing:-.03em}
.feat p{margin:0;color:var(--t2);font-size:15px}

/* 전환 */
.swap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:32px}
.swap-card{background:#fff;border-radius:14px;padding:16px 22px;font-size:15.5px;font-weight:600}
.alt .swap-card{background:#fff}
.swap-arrow{color:var(--mint);font-size:18px;font-weight:800}

.fine{color:var(--t3);font-size:14px;margin-top:40px;line-height:1.75;max-width:62ch}

/* 문서 */
.doc{padding:64px 0 88px}
.doc h1{font-size:clamp(30px,4.4vw,42px);margin:0 0 10px}
.updated{color:var(--t3);font-size:14.5px;margin:0 0 40px}
.doc-body h2{font-size:20px;margin:44px 0 12px;letter-spacing:-.03em}
.doc-body h2:first-child{margin-top:0}
.doc-body p,.doc-body li{color:var(--t2);font-size:15.5px;line-height:1.72}
.doc-body ul{padding-left:20px;margin:10px 0}
.doc-body li{margin-bottom:6px}
.doc-body b{color:var(--t1);font-weight:700}
.doc-body table{width:100%;border-collapse:collapse;font-size:14.5px;margin:14px 0}
.doc-body th,.doc-body td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left;vertical-align:top}
.doc-body th{color:var(--t3);font-weight:600;font-size:13.5px}
.callout{background:var(--mint-tint);border-radius:16px;padding:20px 22px;font-size:15px;
  color:var(--mint-text);margin:0 0 36px;line-height:1.65}
.callout b{color:var(--mint-text)}

/* 푸터 */
footer{background:var(--alt);padding:56px 0 64px}
.f-links{display:flex;gap:24px;font-size:15px;color:var(--t2);font-weight:500;margin:24px 0 32px;flex-wrap:wrap}
.f-links a:hover{color:var(--t1)}
.f-biz{color:var(--t3);font-size:13px;line-height:1.9}
.f-biz b{color:var(--t2);font-weight:600}
.f-copy{margin-top:16px;color:var(--t3);font-size:13px}

@media(max-width:860px){
  .hero{padding:52px 0 56px}
  .hero-in{grid-template-columns:1fr;gap:44px}
  .phone{width:270px}
  section{padding:60px 0}
  .sec-lede{margin-bottom:32px}
  .step{grid-template-columns:40px 1fr;gap:14px;padding:22px 0}
}