:root{--ink2:#17171A;--white:#000000;--black:#F4F4F4;--g1:#000000;--g2:rgba(255,255,255,.20);--g3:rgba(244,244,244,.5);--g4:rgba(244,244,244,.6);--blue:#0915FF;
--f-ko:"Poppins","Noto Sans KR",system-ui,sans-serif;--f-en:"Poppins","Noto Sans KR",sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--f-ko);line-height:1.6;word-break:keep-all;overflow-x:hidden;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 0}
h1,h2,h3,p{margin:0;text-wrap:balance}
a{color:inherit;text-decoration:none}
main{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:72px;padding-block:72px 40px}
.eyebrow{font-family:var(--f-en);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--g4)}
.ph{display:flex;flex-direction:column;gap:18px;max-width:760px}
.ph h1{font-size:clamp(34px,6vw,64px);font-weight:900;line-height:1.15;letter-spacing:-.025em}
.ph p{font-size:clamp(16px,2vw,19px);color:var(--g4);max-width:60ch}
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 30px;border-radius:999px;font-weight:700;font-size:16px;background:var(--black);color:#fff;border:0}
.btn.w{background:#fff;color:var(--black)}
.grp{display:flex;flex-direction:column;gap:22px}
.grp>h2{font-size:clamp(24px,3.4vw,34px);font-weight:900;letter-spacing:-.02em}
.grp>.sub{color:var(--g4);max-width:62ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.c{background:var(--g1);border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.c.k{background:var(--black);color:#fff}
.c h3{font-size:19px;font-weight:700}
.c p{color:var(--g4);font-size:15px}
.c.k p{color:var(--g3)}
.c .two{display:flex;flex-direction:column;gap:6px;margin-top:6px;font-size:14px}
.c .two b{font-weight:700;font-family:var(--f-en);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g3);display:block}
.c .two span{color:var(--black)}
.c.k .two span{color:#fff}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.steps .c::before{counter-increment:s;content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--black);color:#fff;display:grid;place-items:center;font-family:var(--f-en);font-weight:700}
.closer{background:var(--black);color:#fff;border-radius:44px;padding:64px 32px;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.closer h2{font-size:clamp(26px,4vw,40px);font-weight:900}
.closer p{color:var(--g3);max-width:52ch}
@media (max-width:820px){main{gap:56px;padding-block:48px 24px}.c{border-radius:24px;padding:22px}.closer{border-radius:32px;padding:44px 22px}}

/* ---- toss/kakao style layer ---- */
.ph{position:relative;max-width:none;padding-block:24px 8px;isolation:isolate}
.ph::before{content:"";position:absolute;left:50%;top:-140px;width:min(1100px,130%);height:420px;transform:translateX(-50%);background:radial-gradient(ellipse at center,#E4E4E7 0%,rgba(228,228,231,.55) 38%,rgba(255,255,255,0) 70%);filter:blur(30px);z-index:-1;pointer-events:none}
.ph h1{font-size:clamp(40px,8.4vw,104px);line-height:1.08;letter-spacing:-.035em}
.ph p{font-size:clamp(18px,2.4vw,26px);color:var(--black);font-weight:600;max-width:34ch}
.grp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:24px 56px;border-top:1px solid var(--g2);padding-top:36px}
.grp>.gl{display:flex;flex-direction:column;gap:12px;position:sticky;top:96px;align-self:start}
.grp>.gl h2{font-size:16px;font-weight:600;display:flex;align-items:center;gap:10px;letter-spacing:0}
.grp>.gl h2::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--g4)}
.grp>.gl .sub{font-size:20px;font-weight:700;color:var(--black);line-height:1.45;max-width:18ch}
.grp .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 40px}
.c,.c.k{background:none;color:var(--black);border-radius:0;padding:24px 0;border-top:1px solid var(--g2);gap:8px}
.cards .c:nth-child(-n+2){border-top:0}
.c h3{font-size:20px}
.c p,.c.k p{color:var(--g4);font-size:16px}
.c .two{flex-direction:row;gap:28px;flex-wrap:wrap}
.c .two b,.c.k .two span{color:var(--g3)}
.c.k .two span{color:var(--black)}
.steps .c{border-top:1px solid var(--g2);padding:24px 0}
.closer{border-radius:44px}
.rv{opacity:0;filter:blur(10px);transform:translateY(22px);transition:opacity .7s ease,filter .7s ease,transform .8s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;filter:none;transform:none}
.mq{display:flex;flex-direction:column;gap:14px;overflow:hidden;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq .row{display:flex;gap:14px;width:max-content;animation:mq 46s linear infinite}
.mq .row.r{animation-direction:reverse;animation-duration:58s}
.mq.paused .row{animation-play-state:paused}
.mq .b{background:var(--g1);border-radius:26px;padding:16px 26px;font-size:clamp(17px,2vw,24px);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:12px}
.mq .b.k{background:var(--black);color:#fff}
.mq .b img{width:30px;height:30px}
@keyframes mq{to{transform:translateX(-50%)}}
.mqp{align-self:flex-start;height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--g1);color:var(--black);font:inherit;font-weight:700;font-size:14px;cursor:pointer;margin-top:-40px}
@media (max-width:820px){.grp{grid-template-columns:1fr;gap:16px}.grp>.gl{position:static}.cards .c:nth-child(2){border-top:1px solid var(--g2)}.ph::before{top:-90px;height:300px}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;filter:none;transform:none;transition:none}.mq .row{animation:none}}

.st{padding-block:40px;display:flex;justify-content:center}
.st p{font-size:clamp(30px,5.2vw,64px);font-weight:900;line-height:1.3;letter-spacing:-.03em;text-align:center;max-width:18em}
.st .w{color:#A1A1A8;filter:blur(7px);transition:color .35s,filter .35s;display:inline-block;margin-right:.28em}
.st .w.on{color:#0A0A0B;filter:none}
.mq .b{will-change:transform}
@media (prefers-reduced-motion:reduce){.st .w{color:#0A0A0B;filter:none}}

/* ---- main blue accents + store badges ---- */
.stores{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;align-items:center}
.sb{display:inline-flex;position:relative}
.sb img{display:block;height:48px;width:auto}
.sb.soon img{opacity:.38}
.sb.soon i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;color:#fff;background:rgba(9,21,255,.0)}
.dl{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.fine{font-size:13px!important;color:var(--g3)!important}
.cards.one{grid-template-columns:1fr}
.cards.one .c{border-top:0}
.nxNavDesktop+*{}

@media (max-width:820px){.ph::before{width:100%;left:0;transform:none}}
.btn.blue{background:var(--black);color:#fff}

/* ---- app window mock: same grid as the dashboard (sidebar 184, top line 56, gutter 22, chip row 32, card r14/pad20) ---- */
.aw{--ln:rgba(255,255,255,.20);background:#000;color:#F4F4F4;border:1px solid var(--ln);border-radius:14px;display:grid;grid-template-columns:184px minmax(0,1fr);height:604px;overflow:hidden;font-size:15px;line-height:1.4;position:relative}
.aw .sb2{border-right:1px solid var(--ln);display:flex;flex-direction:column;min-width:0;position:relative}
.aw .lr{height:68px;display:flex;align-items:center;padding:0 22px;flex:none}
.aw .lr svg{display:block;color:#F4F4F4}
.aw .nv{flex:1;overflow:hidden;padding:0 8px;display:flex;flex-direction:column;gap:2px}
.aw .it{padding:8px 10px 9px;border-radius:12px;color:#F4F4F4;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap}
.aw .it.on{font-weight:700}
.aw .it b{font-size:11px;line-height:1;background:#FF3B30;color:#fff;border-radius:9999px;padding:4px 7px;font-weight:700}
.aw .it small{font-size:11px;font-weight:500;color:rgba(244,244,244,.5);margin-left:auto;margin-right:6px}
.aw .gh{padding:8px 10px 9px;margin-top:8px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.aw .gh i{width:20px;height:20px;border:1px solid var(--ln);border-radius:9999px;display:grid;place-items:center;color:rgba(244,244,244,.6);font-style:normal;font-size:10px;margin-right:-2px}
.aw .it.s{padding-left:22px}
.aw .st2{flex:none;border-top:1px solid var(--ln);padding:0 18px;height:44px;display:flex;align-items:center;font-size:12px;color:rgba(244,244,244,.6)}
.aw .hd{position:absolute;left:173px;bottom:14px;width:22px;height:22px;border:1px solid var(--ln);border-radius:9999px;background:#000;display:grid;place-items:center;color:rgba(244,244,244,.6);font-size:12px}
.aw .mn{display:flex;flex-direction:column;min-width:0}
.aw .tl{height:56px;border-bottom:1px solid var(--ln);flex:none}
.aw .bd{padding:12px 22px 20px;display:flex;flex-direction:column;gap:12px;min-height:0}
.aw .tt{height:36px;display:flex;align-items:center;font-size:18px;font-weight:700}
.aw .ch{display:flex;gap:8px;height:32px;flex:none}
.aw .ch span{height:32px;padding:0 14px;display:flex;align-items:center;background:#292929;color:#F4F4F4;border-radius:10px;font-size:14px;font-weight:600}
.aw .ch span.on{background:#F4F4F4;color:#111}
.aw .gr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.aw .cd{border:1px solid var(--ln);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:6px;height:116px}
.aw .cd small{color:rgba(244,244,244,.55);font-size:12px}
.aw .cd strong{font-size:15px;font-weight:700}
.aw .cd i{margin-top:auto;font-style:normal;font-size:12px;font-weight:600;background:#292929;border-radius:8px;padding:3px 9px;align-self:flex-start;color:#F4F4F4}
@media (max-width:820px){.aw{grid-template-columns:1fr;height:auto}.aw .sb2{display:none}.aw .gr{grid-template-columns:1fr 1fr;gap:12px}.aw .bd{padding:12px 16px 16px}.aw .tl{height:44px}.aw .cd{height:108px;padding:16px}}

/* ---- dashboard look for sub pages ---- */
.ph::before{background:radial-gradient(ellipse at center,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 38%,rgba(0,0,0,0) 70%)}
.st .w{color:rgba(244,244,244,.3)}.st .w.on{color:#F4F4F4}
.mq .b{background:#000;border:1px solid var(--g2);color:#F4F4F4}
.mq .b.k{background:#F4F4F4;color:#111}
.mqp{background:#292929;color:#F4F4F4;border-radius:10px}
.stores .sb.soon img{opacity:.38}
.steps .c::before{color:#111!important}

/* ---- strict grid: one place for every line and every gap ----
   12 columns in a 1280 wrapper, gutter 16. Column k starts at (k-1) x (1280+16)/12 = 108px steps:
   label = cols 1-3 (x 0), content = cols 4-12 (x 324), card lines at cols 4/7/10 (x 324/648/972).
   Wrappers are square cells that share one 1px line, so the 16px gutter is not drawn as a gap:
   each cell owns its trailing gutter and its left line sits exactly on a column start.
   Vertical rhythm is 8px: --pad (cell inset, measured from the line) 24, --sec (line to content, content to next line) 48. */
:root{--wrap:1280px;--gut:16px;--u:8px;--pad:24px;--sec:48px;--ln:rgba(255,255,255,.20);--h3:32px;--row:24px}
main{gap:var(--sec);padding-block:72px 0}
.st{padding-block:40px}

/* section = line on top, label row and content start var(--sec) below it */
.grp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:var(--gut)!important;border-top:1px solid var(--ln);padding-top:calc(var(--sec) - 1px)}
.grp>*{grid-column:1/-1}
.grp>.gl{grid-column:1/4;gap:var(--u);padding-top:var(--pad)}
.grp>.gl h2{line-height:var(--h3);height:var(--h3)}
.grp>.gl .sub{line-height:32px}
.grp>.cards{grid-column:4/13}
.grp>.cards,.grp>.steps{display:grid;gap:0!important;grid-template-columns:calc((100% + 1px + var(--gut))/3) calc((100% + 1px + var(--gut))/3) minmax(0,1fr)!important;border:0;border-right:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.grp>.cards.one{grid-template-columns:minmax(0,1fr)!important}
.grp>:only-child:not(.steps):not(.cards){grid-column:4/13;justify-self:start}
.grp[style*="grid-template-columns:1fr"]{grid-template-columns:minmax(0,1fr)!important}
.grp[style*="grid-template-columns:1fr"]>*{grid-column:1/-1}

/* cell: left + top line, inset var(--pad) from the line; rows 32 / 24 on an 8px rhythm */
.grp .c,.grp .c.k,.grp .c:nth-child(n){border:0!important;border-left:1px solid var(--ln)!important;border-top:1px solid var(--ln)!important;border-radius:0!important;padding:calc(var(--pad) - 1px) var(--pad) var(--pad) calc(var(--pad) - 1px);gap:var(--u);margin:0}
.grp .c.empty{padding:0!important;min-height:0}
.c h3{line-height:var(--h3)}
.c p,.c.k p{line-height:var(--row)}
.c .fine{line-height:var(--row)}
.c .two{margin-top:0;gap:var(--u) var(--pad);line-height:var(--row)}
.c .stores,.c .dl{margin-top:var(--u);gap:var(--u)}
.c .dl .btn{height:48px}
.steps .c::before{width:40px;height:40px;margin-bottom:var(--u);border-radius:10px}

/* closer: same outer lines (x 0 / 1280) and a line on the label/content boundary (x 324); text starts var(--pad) after it, like the cards */
.closer{position:relative;border:0!important;border-radius:0!important;background:transparent;color:#F4F4F4;text-align:left;align-items:flex-start;gap:var(--u);padding:var(--sec) var(--pad) var(--sec) calc((100% + var(--gut))/4 + var(--pad))}
.closer::before{content:"";position:absolute;inset:0;border:1px solid var(--ln);pointer-events:none}
.closer::after{content:"";position:absolute;top:0;bottom:0;left:calc((100% + var(--gut))/4);width:1px;background:var(--ln);pointer-events:none}
.closer h2{line-height:48px}
.closer p{line-height:var(--row)}
.closer .btn{margin-top:var(--u)}

/* wrappers that are not cells stay square */
.aw,.aw .cd,.mq .b{border-radius:0!important}
.aw .gr{gap:0}.aw .cd{margin:0 -1px -1px 0}
.mq .row{gap:0}.mq .b{margin-left:-1px}
@media (min-width:821px){.mq{margin-inline:0}}

@media (max-width:820px){
  :root{--sec:40px;--pad:20px}
  main{padding-block:48px 0}
  .grp{grid-template-columns:minmax(0,1fr)!important}
  .grp>*,.grp>.gl,.grp>.cards,.grp>:only-child:not(.steps):not(.cards){grid-column:1/-1}
  .grp>.gl{position:static;padding-top:0}
  .grp>.cards,.grp>.steps,.grp>.cards.one{grid-template-columns:minmax(0,1fr)!important}
  .grp .c.empty{display:none}
  .closer{padding:var(--sec) var(--pad)}
  .closer::after{display:none}
  .closer h2{line-height:1.3}
}

/* ---- soft radius (8px) on outer wrappers only; inner cells stay square and share lines ---- */
.grp>.cards:not(.one),.grp>.steps{border:0!important;position:relative;overflow:hidden;border-radius:8px}
.grp>.cards:not(.one)::after,.grp>.steps::after{content:"";position:absolute;inset:0;border:1px solid var(--g2);border-radius:8px;pointer-events:none}
.grp>.cards.one>.c,.closer,.aw{border-radius:8px!important}
.aw .cd{border-radius:0!important}
.grp>.cards.one>.c{width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box}
.grp>.cards.one{border:0!important;padding:0}