/* Layout: white editorial canvas, oversized SUITE headlines, rounded mist tiles, one dark night-sky stage per page as the accent */
@font-face{font-family:'SUITE';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/SUITE-Variable.woff2) format('woff2')}
:root{
  --paper:#ffffff;--mist:#f4f6fa;--line:#e3e7ef;--ink:#0d1117;--sub:#4b5363;--mute:#8a92a3;
  --blue:#1747ff;--blue-d:#0e33cc;--blue-soft:#eaf0ff;--navy:#102054;--night:#070b1a;--gold:#ffb21e;--green:#14a06a;
  --f:'SUITE','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --hd:80px;--r:28px;--ease:cubic-bezier(.2,.8,.2,1);color-scheme:light
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 64px);overflow-x:clip}
body{background:var(--paper);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.65;letter-spacing:-.025em;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}ul,ol{list-style:none}img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:600;letter-spacing:-.045em;text-wrap:balance;line-height:1.25}
.wrap{width:100%;max-width:1520px;margin:0 auto;padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}
.ico{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.arr{display:inline-block;width:18px;height:18px;margin-left:6px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s var(--ease)}
a:hover .arr,button:hover .arr{transform:translateX(4px)}

/* buttons: .pill (home) and .btn (sub pages) share one look */
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:48px;padding:0 24px;border-radius:999px;font-weight:600;font-size:16px;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s;white-space:nowrap}
.pill--lg{height:58px;padding:0 30px;font-size:18px}
.btn--sm{height:40px;padding:0 18px;font-size:16px}.btn--full{width:100%}
.pill--blue,.btn--blue{background:var(--blue);color:#fff}.pill--blue:hover,.btn--blue:hover{background:var(--blue-d);transform:translateY(-2px);box-shadow:0 12px 28px rgba(23,71,255,.28)}
.pill--dark,.btn--navy{background:var(--ink);color:#fff}.pill--dark:hover,.btn--navy:hover{background:var(--blue)}
.pill--line,.btn--line{border-color:var(--line);background:#fff;color:var(--ink)}.pill--line:hover,.btn--line:hover{border-color:var(--ink)}
.pill--white{background:#fff;color:var(--ink)}.pill--white:hover{background:var(--blue-soft)}
.pill--wline,.btn--wline{border-color:rgba(255,255,255,.4);color:#fff}.pill--wline:hover,.btn--wline:hover{border-color:#fff}
.more{display:inline-flex;align-items:center;font-weight:600;font-size:18px}
.more:hover{color:var(--blue)}

/* header */
.hd{position:fixed;inset:0 0 auto;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .3s}
.hd.is-scrolled{box-shadow:0 1px 0 var(--line)}
.hd__in{height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:2}
.logo .lg{height:42px;width:auto;display:block;overflow:visible}
.gnb__list{display:flex;gap:2px}
.gnb__list>li{position:relative}
.gnb__list>li>a{display:block;padding:10px 18px;border-radius:999px;font-weight:600;font-size:18px;transition:background .2s,color .2s}
.gnb__list>li>a:hover,.gnb__list>li:hover>a{background:var(--mist)}
.gnb__list>li>a.is-cur{color:var(--blue)}
.sub{position:absolute;left:8px;top:calc(100% + 30px);display:none;flex-direction:column;gap:2px;min-width:150px}
.sub a{display:block;padding:6px 10px;border-radius:8px;font-size:16px;font-weight:500;color:var(--sub);white-space:nowrap;transition:background .2s,color .2s}
.sub a:hover{background:var(--mist);color:var(--blue)}
.hd__panel{position:absolute;left:0;right:0;top:100%;height:0;background:#fff;box-shadow:0 30px 60px -24px rgba(13,17,23,.18);overflow:hidden;transition:height .3s var(--ease);z-index:1;border-top:1px solid transparent}
@media(min-width:1101px){
  .gnb:hover .sub,.gnb:focus-within .sub{display:flex;animation:subIn .35s var(--ease) both}
  .hd:has(.gnb:hover) .hd__panel,.hd:has(.gnb:focus-within) .hd__panel{height:250px;border-top-color:var(--line)}
}
@keyframes subIn{from{opacity:0;transform:translateY(-6px)}}
.hd__r{display:flex;align-items:center;gap:16px}
.hd__tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.hd__tel small{font-size:14px;color:var(--mute)}.hd__tel b{font-size:18px}
.hd__r .btn{background:var(--ink)}
.burger{display:none;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:19px}.burger span:nth-child(3){top:25px}
.hd.is-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}.hd.is-open .burger span:nth-child(2){opacity:0}.hd.is-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
main{padding-top:var(--hd)}

/* hero */
.hero{padding-top:84px}
.hero__kicker{font-size:17px;font-weight:600;color:var(--blue);margin-bottom:26px;letter-spacing:-.01em}
.hero__title{font-size:clamp(40px,7vw,96px);line-height:1.12;font-weight:600}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .ln>span{display:inline-block;animation:rise 1.1s var(--ease) both}
.hero__title .ln:nth-child(2)>span{animation-delay:.12s}
.hero__title em{font-style:normal;color:var(--blue)}
@keyframes rise{from{transform:translateY(105%)}}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:40px;flex-wrap:wrap}
.hero__lead{font-size:21px;color:var(--sub);max-width:34em;animation:fade 1s .4s both}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;animation:fade 1s .55s both}
@keyframes fade{from{opacity:0;transform:translateY(16px)}}
.stage{position:relative;margin-top:64px;height:min(560px,62vw);min-height:340px;border-radius:var(--r);background:radial-gradient(120% 90% at 70% 0%,#16245e 0%,var(--night) 60%);overflow:hidden;animation:fade 1.2s .6s both}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage__label{position:absolute;left:28px;top:24px;color:rgba(255,255,255,.6);font-size:16px;font-weight:500}
.stage__hint{position:absolute;right:28px;top:24px;color:rgba(255,255,255,.4);font-size:14px}
.toasts{position:absolute;left:28px;bottom:28px;display:flex;flex-direction:column-reverse;gap:10px;width:min(340px,calc(100% - 56px))}
.toast{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 18px 40px rgba(0,0,0,.35);animation:toastIn .6s var(--ease) both;font-size:15px}
.toast.out{animation:toastOut .5s ease forwards}
.toast i{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-style:normal;font-weight:600;color:#fff;background:var(--blue);font-size:13px}
.toast i.pos{background:var(--ink)}.toast i.acc{background:var(--green)}
.toast div{flex:1;min-width:0}.toast b{display:block;font-size:16px}.toast small{color:var(--mute)}
.toast em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-10px) scale(.96)}}
.ticker{margin-top:100px;border-block:1px solid var(--line);overflow:hidden;padding-block:26px}
.ticker__track{display:flex;align-items:center;gap:40px;width:max-content;animation:tick 40s linear infinite}
.ticker span{font-size:28px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.ticker i{font-style:normal;color:var(--blue);font-size:20px}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding-block:150px}.sec--mist{background:var(--mist)}.sec--tight{padding-block:90px}
.head{margin-bottom:60px}
.head h2{font-size:clamp(32px,4.2vw,56px);line-height:1.2;font-weight:600}
.head__sub{margin-top:16px;font-size:20px;color:var(--sub)}
.head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.head--light h2{color:#fff}

.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{position:relative;border-radius:var(--r);background:var(--mist);padding:40px;min-height:250px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .45s var(--ease)}
.tile:hover{transform:translateY(-6px)}
.tile--xl{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;min-height:420px}
.tile--tall{grid-row:span 2}
.tile--blue{background:var(--blue);color:#fff}.tile--dark{background:var(--ink);color:#fff}
.tile__k{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--blue);margin-bottom:20px}
.tile--blue .tile__k{color:#c7d4ff}.tile--dark .tile__k{color:var(--gold)}
.tile h3{font-size:32px;font-weight:600;margin-bottom:12px}
.tile p{color:var(--sub);font-size:18px}.tile--blue p{color:#dbe3ff}.tile--dark p{color:#aab2c3}
.tile__more{display:inline-flex;align-items:center;margin-top:22px;font-weight:600}
.tile--photo{justify-content:flex-start}
.tile__img{width:78%;margin:24px auto -60px;transition:transform .6s var(--ease)}
.tile--photo:hover .tile__img{transform:translateY(-10px) rotate(-3deg)}
.ck{width:100%;max-width:300px;margin:0 auto;background:#fff;color:var(--ink);border-radius:20px;padding:22px;box-shadow:0 30px 60px rgba(4,20,90,.35);transform:rotate(3deg);transition:transform .5s var(--ease)}
.tile:hover .ck{transform:rotate(0) scale(1.03)}
.ck--big{max-width:380px;transform:none}
.ck__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}.ck__h span{font-weight:600;font-variant-numeric:tabular-nums}
.ck__opt{padding:11px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;font-weight:500;margin-bottom:8px;background:#fff}
.ck__opt.is-on{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.ck__btn{margin-top:6px;text-align:center;padding:13px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;font-size:16px}

/* sticky story */
.how{padding-block:150px;background:var(--ink);color:#fff}
.how__in{display:grid;grid-template-columns:1fr 1.05fr;gap:80px}
.how__steps .head{margin-bottom:30px}
.step{padding-block:12vh;opacity:.3;transition:opacity .5s}
.step.is-on{opacity:1}.step:last-child{padding-bottom:20vh}
.step__k{display:block;font-size:16px;font-weight:600;color:var(--gold);margin-bottom:14px}
.step h3{font-size:clamp(26px,2.6vw,36px);font-weight:600;margin-bottom:16px}
.step p{color:#aab2c3;font-size:20px;max-width:28em}
.how__sticky{position:relative}
.device{position:sticky;top:calc(var(--hd) + 60px);height:min(560px,70vh);border-radius:var(--r);background:linear-gradient(160deg,#1b2440,#0f1529);border:1px solid #232c48;overflow:hidden}
.scr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:36px;opacity:0;transform:translateY(30px) scale(.97);transition:opacity .6s,transform .7s var(--ease)}
.device[data-show="0"] .scr0,.device[data-show="1"] .scr1,.device[data-show="2"] .scr2{opacity:1;transform:none}
.scr0{flex-direction:column;gap:18px}.scr0 img{width:min(340px,70%);filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.scr0__tag{padding:8px 16px;border-radius:999px;background:var(--green);font-weight:600;font-size:16px}
.paybtn{position:relative;margin-top:10px;height:52px;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;overflow:hidden}
.paybtn span{position:absolute;inset:0;display:grid;place-items:center}
.paybtn .ok{background:var(--green);transform:translateY(100%)}
.device[data-show="1"] .paybtn .ok{animation:approve 4s 1s infinite}
@keyframes approve{0%,30%{transform:translateY(100%)}40%,85%{transform:none}95%,100%{transform:translateY(100%)}}
.rep{width:100%;max-width:460px;background:#fff;color:var(--ink);border-radius:20px;padding:28px}
.rep__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}.rep__h b{font-size:22px}.rep__h span{color:var(--mute);font-size:16px}
.rep__list li{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:14px;padding-block:11px;border-bottom:1px solid var(--line);font-size:16px}
.rep__list span{color:var(--sub)}.rep__list b{font-variant-numeric:tabular-nums;text-align:right}
.rep__list i{height:8px;border-radius:4px;background:var(--blue-soft);position:relative;overflow:hidden}
.rep__list i::after{content:'';position:absolute;inset:0;width:var(--w);border-radius:4px;background:var(--blue);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.device[data-show="2"] .rep__list i::after{transform:scaleX(1)}
.rep__note{margin-top:12px;font-size:14px;color:var(--mute);text-align:right}

/* VAN vs PG */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vs__col{border-radius:var(--r);background:var(--mist);padding:44px}
.vs__col--pg{background:var(--blue);color:#fff}
.vs__tag{display:inline-block;font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--blue);margin-bottom:16px}
.vs__col--pg .vs__tag{color:#c7d4ff}
.vs h3{font-size:28px;font-weight:600;margin-bottom:28px}
.vs dl div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-block:16px;border-top:1px solid rgba(13,17,23,.08)}
.vs__col--pg dl div{border-color:rgba(255,255,255,.2)}
.vs dt{color:var(--sub);font-size:16px}.vs__col--pg dt{color:#c7d4ff}
.vs dd{font-weight:600}.vs dd small{display:block;font-weight:500;font-size:16px;opacity:.75}

/* license band */
.lic{background:var(--night);color:#fff;padding-block:130px;position:relative;overflow:hidden}
.lic::before{content:'';position:absolute;right:-10%;top:-40%;width:60%;aspect-ratio:1;max-width:100%;border-radius:50%;background:radial-gradient(circle,rgba(23,71,255,.35),transparent 65%)}
.lic__in{position:relative;display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:center}
.lic h2{font-size:clamp(30px,3.6vw,48px);font-weight:600;line-height:1.25}
.lic__l p{color:#aab2c3;font-size:20px;margin:20px 0 32px;max-width:28em}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.facts>div{padding:28px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.facts small{display:block;color:#8a92a3;font-size:16px;margin-bottom:6px}
.facts b{font-size:clamp(24px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* platform cards */
.plat{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.plat__item{display:block;border-radius:var(--r);background:var(--mist);overflow:hidden}
.plat__shot{aspect-ratio:1265/712;max-width:100%;overflow:hidden;margin:28px 28px 0;border-radius:16px 16px 0 0;box-shadow:0 20px 40px -20px rgba(13,17,23,.35)}
.plat__shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .6s var(--ease)}
.plat__item:hover .plat__shot img{transform:scale(1.04)}
.plat__txt{padding:28px 32px 32px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.plat__txt h3{font-size:28px;font-weight:600}.plat__txt p{color:var(--sub);font-size:16px}
.plat__btns{display:flex;gap:8px;flex-wrap:wrap}

/* home flow */
ol.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative}
ol.flow::before{content:'';position:absolute;left:0;right:0;top:27px;height:2px;background:var(--line)}
ol.flow::after{content:'';position:absolute;left:0;top:27px;height:2px;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .2s linear}
ol.flow li{position:relative;z-index:1}
.flow__n{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--line);font-size:22px;font-weight:600;margin-bottom:22px;transition:background .4s,border-color .4s,color .4s}
ol.flow li.is-on .flow__n{background:var(--blue);border-color:var(--blue);color:#fff}
ol.flow b{display:block;font-size:22px;margin-bottom:6px}ol.flow p{color:var(--sub);font-size:16px;padding-right:12px}

/* news cards */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.nc{display:flex;flex-direction:column;gap:14px;min-height:230px;padding:32px;border:1px solid var(--line);border-radius:var(--r);transition:border-color .3s,transform .4s var(--ease),box-shadow .4s}
.nc:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:0 20px 40px -16px rgba(13,17,23,.18)}
.nc__cat{font-size:16px;font-weight:600;color:var(--blue)}
.nc b{flex:1;font-size:22px;line-height:1.45}.nc time{color:var(--mute);font-size:16px;font-variant-numeric:tabular-nums}

/* cta */
.cta{background:var(--ink);color:#fff;padding-block:110px}
.cta__in{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.cta h2{font-size:clamp(32px,4.4vw,60px);font-weight:600;line-height:1.15}
.cta h2 span{color:#7d9bff;user-select:all}
.cta p{color:#aab2c3;margin-top:14px}
.cta__btns{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- sub pages ---------- */
.sv{padding-block:100px 56px}
.crumb{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--mute);margin-bottom:22px}
.crumb a:hover{color:var(--ink)}.crumb b{color:var(--sub);font-weight:500}.crumb span{opacity:.5}
.sv h1{font-size:clamp(40px,6vw,80px);font-weight:600;line-height:1.1;animation:fade .9s var(--ease) both}
.sv p{margin-top:20px;font-size:22px;color:var(--sub);max-width:36em;animation:fade .9s .1s var(--ease) both}
.snav{position:sticky;top:var(--hd);z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.snav__in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.snav__in::-webkit-scrollbar{display:none}
.snav a{flex:none;padding:9px 18px;border-radius:999px;font-weight:600;font-size:16px;color:var(--sub);transition:background .2s,color .2s}
.snav a:hover{background:var(--mist);color:var(--ink)}.snav a.is-on{background:var(--ink);color:#fff}
.blk{padding-block:120px}
.blk--gray{background:var(--mist)}
.blk-hd{margin-bottom:48px}
.blk-hd h2{font-size:clamp(30px,3.6vw,46px);font-weight:600}
.blk-hd p{margin-top:14px;color:var(--sub);font-size:20px;max-width:42em}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards--4{grid-template-columns:repeat(4,1fr)}.cards--2{grid-template-columns:repeat(2,1fr)}
.cards>*{min-width:0}
.box{border-radius:24px;background:var(--mist);padding:34px;transition:transform .4s var(--ease)}
.blk--gray .box,.sec--mist .box{background:#fff}
.box:hover{transform:translateY(-4px)}
.box h3{font-size:24px;font-weight:600;margin-bottom:10px}
.box p{color:var(--sub);font-size:18px}
.box .ico{width:46px;height:46px;padding:10px;border-radius:14px;background:var(--blue);color:#fff;stroke-width:1.8;margin-bottom:22px}
.box__no{display:block;font-size:16px;font-weight:600;color:var(--blue);margin-bottom:14px}
.box small{display:block;color:var(--mute);font-size:16px}
.card{display:flex;flex-direction:column;border-radius:var(--r);background:var(--mist);overflow:hidden}
.card__img{height:250px;display:flex;align-items:center;justify-content:center;padding:28px}
.card__img img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 20px 24px rgba(13,17,23,.18));transition:transform .5s var(--ease)}
.card:hover .card__img img{transform:translateY(-6px) rotate(-2deg)}
.card__body{padding:4px 32px 34px;display:flex;flex-direction:column;gap:8px}
.card__k{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--blue)}
.card h3{font-size:28px;font-weight:600}
.prod__specs{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.prod__specs li{position:relative;padding-left:16px;font-size:16px;color:var(--sub)}
.prod__specs li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.note{margin-top:18px;font-size:16px;color:var(--mute)}
.center{display:flex;justify-content:center;gap:10px;margin-top:44px;flex-wrap:wrap}
.narrow{max-width:1000px}

.tbl-wrap{overflow-x:auto;border-radius:24px;border:1px solid var(--line);background:#fff}
.tbl{width:100%;min-width:760px;border-collapse:collapse;font-size:18px}
.tbl th,.tbl td{padding:20px 24px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl thead th{font-size:16px;font-weight:600;color:var(--mute);letter-spacing:.04em}
.tbl thead th.hl{color:var(--blue)}
.tbl tbody th{font-weight:600;width:180px;color:var(--sub)}
.tbl td.hl{color:var(--ink);font-weight:600;background:var(--blue-soft)}
.tbl td small{display:block;color:var(--mute);font-weight:500;font-size:16px}

.ov{display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px}
.ov div{display:grid;grid-template-columns:140px 1fr;gap:16px;padding-block:20px;border-bottom:1px solid var(--line)}
.ov dt{color:var(--mute);font-size:16px}.ov dd{font-weight:500}
.ov div.wide{grid-column:span 2}
.hist{display:grid;gap:0}
.hist li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding-block:32px;border-top:1px solid var(--line)}
.hist li:last-child{border-bottom:1px solid var(--line)}
.hist time{font-size:40px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.hist li:first-child time{color:var(--blue)}
.hist b{display:block;font-size:22px}.hist p{color:var(--sub);font-size:16px}
.licbox{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.licbox .box{background:var(--ink);color:#fff}.licbox .box small{color:#8a92a3}
.licbox .box b{display:block;font-size:clamp(26px,3vw,40px);margin-top:10px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.org{display:flex;flex-direction:column;align-items:center}
.org__node{padding:14px 26px;border-radius:16px;font-weight:600;text-align:center;background:#fff}
.org__node--top{background:var(--ink);color:#fff;min-width:200px}
.org__node small{display:block;font-weight:500;font-size:14px;color:var(--mute)}
.org__node--top small{color:#8a92a3}
.org__v{width:2px;height:28px;background:#cfd5e0}
.org__side{display:flex;gap:120px;align-items:center;position:relative}
.org__side::before{content:'';position:absolute;left:50%;top:-28px;bottom:-28px;width:2px;margin-left:-1px;background:#cfd5e0}
.org__side .org__node{position:relative;z-index:1;min-width:140px}
.org__row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;position:relative;padding-top:28px}
.org__row::before{content:'';position:absolute;top:0;left:16.66%;right:16.66%;height:2px;background:#cfd5e0}
.org__col{display:flex;flex-direction:column;align-items:center;position:relative}
.org__col::before{content:'';position:absolute;top:-28px;left:50%;height:28px;width:2px;margin-left:-1px;background:#cfd5e0}
.org__col>.org__node{width:100%;background:var(--blue);color:#fff}.org__col>.org__node small{color:#c7d4ff}
.org__teams{display:flex;gap:8px;margin-top:12px;width:100%}
.org__teams .org__node{flex:1;font-size:16px;padding:12px 10px}
.loc{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.loc>*{min-width:0}
.loc__card{border-radius:var(--r);padding:40px;background:var(--ink);color:#fff}
.loc__card h3{font-size:27px;font-weight:600}.loc__card p{color:#aab2c3}
.loc__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.loc__card .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.loc__card .btn--navy{background:var(--blue)}
.spec div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.spec div:first-child{border-top:1px solid var(--line)}
.spec dt{color:var(--mute);font-size:16px}.spec dd{font-weight:500}

.pm{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pm ul{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.pm li,.feat li{position:relative;padding-left:26px;font-size:18px;color:var(--sub)}
.pm li::before,.feat li::before{content:'';position:absolute;left:3px;top:8px;width:11px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.names{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.names span{padding:7px 14px;border-radius:999px;font-size:16px;font-weight:600;background:#fff;border:1px solid var(--line)}
.blk--gray .names span{background:var(--mist);border-color:transparent}
.flowline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:16px}
.flowline span{padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600}
.flowline i{width:14px;height:2px;background:var(--mute)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split>*{min-width:0}
.split--r>:first-child{order:2}
.feat{display:flex;flex-direction:column;gap:0}
.feat li{padding-block:14px;border-bottom:1px solid var(--line);padding-left:30px}
.feat li::before{top:22px}
.feat-t{font-size:24px;font-weight:600;margin:0 0 12px}
.shot{border-radius:var(--r);overflow:hidden;background:var(--mist);padding:20px}
.shot img{width:100%;border-radius:14px;box-shadow:0 20px 40px -20px rgba(13,17,23,.35)}
.shot__cap{padding:14px 4px 0;font-size:14px;color:var(--mute)}
div.flow{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.steps{display:flex;flex-direction:column;gap:10px;margin-top:18px;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--sub)}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center}
.pts{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.pts li{font-size:16px;color:var(--mute);padding-left:12px;position:relative}
.pts li::before{content:'·';position:absolute;left:0;font-weight:600}

.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.proc li{border-radius:22px;background:var(--mist);padding:28px 24px}
.blk--gray .proc li{background:#fff}
.proc span{display:block;font-size:14px;font-weight:600;color:var(--blue);margin-bottom:10px}
.proc b{display:block;font-size:22px;margin-bottom:6px}.proc p{font-size:16px;color:var(--sub)}

.pkg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pkg button{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-radius:16px;background:#fff;border:1.5px solid transparent;text-align:left;font-variant-numeric:tabular-nums;transition:border-color .2s,background .2s}
.pkg button:hover{border-color:var(--ink)}
.pkg button b{font-size:20px}.pkg button span{color:var(--sub)}
.pkg button.is-on{background:var(--blue);color:#fff}.pkg button.is-on span{color:#dbe3ff}
.pkg em{font-style:normal;font-size:14px;font-weight:600;color:var(--gold);margin-left:6px}
.calc{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:14px;padding:22px 26px;background:var(--ink);color:#fff;border-radius:20px}
.calc__q{display:flex;align-items:center;background:#fff;border-radius:999px;overflow:hidden;color:var(--ink)}
.calc__q button{width:46px;height:46px;font-size:22px;font-weight:600}
.calc__q input{width:110px;height:46px;border:0;text-align:center;font-weight:600;font-size:20px;font-variant-numeric:tabular-nums}
.calc__q input:focus{outline:0;background:var(--blue-soft)}
.calc__sum{color:#aab2c3}.calc__sum b{font-size:28px;color:#fff;margin-left:10px;font-variant-numeric:tabular-nums}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.adv{display:flex;flex-direction:column}
.adv li{display:grid;grid-template-columns:80px 280px 1fr;gap:24px;padding-block:30px;border-top:1px solid var(--line);align-items:start}
.adv li:last-child{border-bottom:1px solid var(--line)}
.adv span{font-size:40px;font-weight:600;color:var(--blue);line-height:1;letter-spacing:-.04em}
.adv b{display:block;font-size:22px}.adv small{display:block;color:var(--blue);font-weight:600;font-size:16px;margin-top:4px}
.adv p{color:var(--sub);font-size:18px}
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border-radius:20px;background:#fff;transition:box-shadow .3s}
.faq details[open]{box-shadow:0 20px 40px -24px rgba(13,17,23,.25)}
.faq summary{list-style:none;display:flex;align-items:center;gap:16px;padding:24px 28px;font-weight:600;font-size:20px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;flex:none;width:32px;height:32px;border-radius:50%;background:var(--mist);display:grid;place-items:center;font-size:22px;font-weight:500;transition:transform .3s,background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq details p{padding:0 28px 26px;color:var(--sub)}

.board-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--mist)}
.tabs button,.tabs a{padding:9px 20px;border-radius:999px;font-weight:600;font-size:16px;color:var(--sub);transition:background .2s,color .2s}
.tabs .is-on{background:var(--ink);color:#fff}
.search{display:flex;align-items:center;border-radius:999px;background:var(--mist);padding:4px 4px 4px 18px}
.search input{border:0;background:transparent;padding:8px 0;width:220px;font-size:16px}
.search input:focus{outline:0}
.search button{padding:8px 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:16px}
.board{display:flex;flex-direction:column}
.board li a{display:grid;grid-template-columns:60px 90px 1fr 120px;align-items:center;gap:12px;padding:24px 8px;border-top:1px solid var(--line);transition:background .2s}
.board li:last-child a{border-bottom:1px solid var(--line)}
.board li a:hover{background:var(--mist)}
.board .no{color:var(--mute);font-size:16px;text-align:center;font-variant-numeric:tabular-nums}
.board .cat{font-size:16px;font-weight:600;color:var(--blue)}
.board b{font-weight:600;font-size:20px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board time{color:var(--mute);font-size:16px;text-align:right;font-variant-numeric:tabular-nums}
.board .new{display:inline-block;margin-left:6px;font-style:normal;font-size:14px;font-weight:600;color:#fff;background:var(--blue);border-radius:6px;padding:0 5px;vertical-align:2px}
.board-empty{padding:60px 0;text-align:center;color:var(--mute)}
.pager{display:flex;justify-content:center;gap:4px;margin-top:40px}
.pager a{min-width:40px;height:40px;display:grid;place-items:center;border-radius:50%;font-size:16px;font-weight:600}
.pager a.is-on{background:var(--ink);color:#fff}
.art-hd{padding-bottom:32px;border-bottom:1px solid var(--line)}
.art-hd .cat{font-size:16px;font-weight:600;color:var(--blue)}
.art-hd h1{font-size:clamp(28px,3.4vw,44px);font-weight:600;margin:10px 0 14px}
.art-hd p{color:var(--mute);font-size:16px;display:flex;gap:16px}
.art-body{padding-block:48px;font-size:20px;color:var(--sub);display:flex;flex-direction:column;gap:18px;border-bottom:1px solid var(--line)}
.art-body h2{font-size:24px;color:var(--ink);margin-top:12px}
.art-body ul{display:flex;flex-direction:column;gap:8px;padding-left:22px;list-style:disc}
.art-body a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.art-nav a{display:flex;flex-direction:column;gap:4px;padding:22px 24px;border-radius:20px;background:var(--mist);transition:background .2s}
.art-nav a:hover{background:var(--blue-soft)}
.art-nav small{color:var(--mute);font-size:14px}.art-nav b{font-size:18px}

.ct{display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:start}
.ct>*{min-width:0}
.ct__side{display:flex;flex-direction:column;gap:16px}
.cs{border-radius:var(--r);background:var(--ink);color:#fff;padding:34px;display:flex;flex-direction:column}
.cs h3{font-size:18px;color:#8a92a3;font-weight:600}
.cs strong{display:block;font-size:40px;letter-spacing:-.03em;margin:6px 0 2px;user-select:all}
.cs p{color:#aab2c3;font-size:16px}
.cs .btn{margin-top:22px}
.cs__links{display:flex;flex-direction:column;border-radius:20px;background:var(--mist);overflow:hidden;margin:0!important}
.cs__links a{display:flex;justify-content:space-between;padding:18px 22px;font-weight:600;border:0!important;border-bottom:1px solid var(--line)!important}
.cs__links a:last-child{border-bottom:0!important}
.cs__links a:hover{color:var(--blue)}
.form{display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label,.form legend{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:16px}
.form label em{font-style:normal;color:var(--blue)}
.form input:not([type=checkbox]),.form select,.form textarea{width:100%;height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:16px;font-weight:500;transition:border-color .2s,box-shadow .2s}
.form textarea{height:auto;padding:10px 14px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.form input::placeholder,.form textarea::placeholder{color:#a5acba}
.form input.bad{border-color:#e5484d}
.checks{border:0;display:flex;flex-direction:column;gap:10px}
.checks__list{display:flex;flex-wrap:wrap;gap:8px}
.checks__list label{flex-direction:row!important;align-items:center;cursor:pointer;font-weight:500!important}
.checks__list input{position:absolute;opacity:0;pointer-events:none}
.checks__list label{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);transition:.2s}
.checks__list label:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.checks__list label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.agree{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important;color:var(--sub)}
.agree input{width:18px;height:18px;accent-color:var(--blue)}
.agree a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.agreebox{border-radius:14px;background:var(--mist);padding:16px 18px;font-size:16px;color:var(--sub)}
.form__msg{font-weight:600;color:var(--green)}.form__msg.err{color:#e5484d}

.legal{display:grid;grid-template-columns:230px 1fr;gap:64px;align-items:start}
.legal>*{min-width:0}
.legal__toc{position:sticky;top:calc(var(--hd) + 24px);display:flex;flex-direction:column;gap:2px}
.legal__toc a{padding:8px 14px;border-radius:10px;font-size:16px;font-weight:500;color:var(--sub)}
.legal__toc a:hover{background:var(--mist);color:var(--ink)}
.legal__body section{padding-bottom:36px}
.legal__body h2{font-size:22px;margin-bottom:10px}
.legal__body p,.legal__body li{color:var(--sub);font-size:18px}
.legal__body ul{padding-left:22px;list-style:disc;display:flex;flex-direction:column;gap:4px;margin-top:6px}
.legal__body a{color:var(--blue);text-decoration:underline}
.draft{padding:18px 22px;border-radius:16px;background:#fff6e0;font-size:16px;margin-bottom:40px;color:#6b5300}
.legal__date{color:var(--mute);font-size:16px}

.band{background:var(--ink);color:#fff}
.band__in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-block:80px}
.band h2{font-size:clamp(26px,3vw,40px);font-weight:600}.band p{color:#aab2c3;margin-top:6px}
.band__btns{display:flex;gap:10px;flex-wrap:wrap}
.band .btn--navy{background:var(--blue)}
.band .btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.band .btn--line:hover{border-color:#fff}

/* footer */
.ft{background:var(--mist);color:var(--sub);font-size:16px}
.ft__top{border-bottom:1px solid var(--line)}
.ft__top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:20px}
.ft__links{display:flex;flex-wrap:wrap;gap:6px 24px}
.ft__links a:hover{color:var(--ink)}.ft__links b{color:var(--ink)}
.family{position:relative}
.family summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:30px;min-width:200px;padding:10px 16px;border-radius:999px;background:#fff;cursor:pointer;font-weight:500}
.family summary::-webkit-details-marker{display:none}
.family summary::after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-135deg) translateY(-2px)}
.family[open] summary::after{transform:rotate(45deg) translateY(-2px)}
.family ul{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:#fff;border-radius:16px;box-shadow:0 20px 40px -16px rgba(13,17,23,.25);overflow:hidden}
.family a{display:block;padding:12px 16px}.family a:hover{background:var(--mist);color:var(--blue)}
.ft__main{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-block:44px 56px}
.ft__logo{height:36px;width:auto;margin-bottom:22px;display:block;overflow:visible}
.ft address{font-style:normal;line-height:1.9}
.ft address span{display:inline-block;margin-right:16px}
.ft__cp{margin-top:14px;color:var(--mute)}
.ft__cs{text-align:right}
.ft__cs small{display:block;color:var(--mute)}.ft__cs b{display:block;font-size:32px;color:var(--ink);letter-spacing:-.03em;user-select:all}
.totop{position:fixed;right:max(24px,env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:600;box-shadow:0 10px 24px rgba(13,17,23,.3);opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s;z-index:40}
.totop.is-on{opacity:1;visibility:visible;transform:none}

/* reveal: visible at rest, light lift on scroll */
.js .rv{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.js .rv:not(.in){transform:translateY(36px);opacity:.25}

@media(max-width:1100px){
  :root{--hd:66px}
  .logo .lg{height:34px}
  .burger{display:block}.hd__tel,.hd__r .btn{display:none}
  .gnb{position:fixed;left:0;right:0;top:var(--hd);bottom:0;background:#fff;overflow:auto;padding:8px max(20px,env(safe-area-inset-left,0px)) 40px;transform:translateX(100%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
  .hd.is-open .gnb{transform:none;visibility:visible}
  .gnb__list{flex-direction:column;gap:0}
  .gnb__list>li{border-bottom:1px solid var(--line)}
  .gnb__list>li>a{padding:18px 0 6px;font-size:24px;border-radius:0}.gnb__list>li>a:hover,.gnb__list>li:hover>a{background:none}
  .sub{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:2px 4px;padding:4px 0 14px;min-width:0}
  .sub a{padding:6px 10px 6px 0}
  .hd__panel{display:none}
  .bento{grid-template-columns:1fr 1fr}.tile--xl{grid-column:span 2}.tile--tall{grid-row:auto}
  .cards--4{grid-template-columns:1fr 1fr}.proc{grid-template-columns:1fr 1fr 1fr}
  .adv li{grid-template-columns:60px 1fr}.adv p{grid-column:2}
  .lic__in,.legal{grid-template-columns:1fr;gap:48px}.legal__toc{position:static;flex-direction:row;flex-wrap:wrap}
}
@media(max-width:820px){
  :root{--r:22px}
  .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .hero{padding-top:48px}.hero__lead{font-size:18px}.hero__lead br{display:none}
  .hero__cta{width:100%}.hero__cta .pill{flex:1}
  .stage{margin-top:40px;height:420px}.stage__hint{display:none}
  .ticker{margin-top:64px;padding-block:18px}.ticker span{font-size:22px}
  .sec,.how,.lic,.blk{padding-block:88px}.sec--tight{padding-block:56px}.head{margin-bottom:36px}.head__sub{font-size:18px}
  .bento,.cards,.cards--2,.cards--4,.vs,.plat,.news,.pm,div.flow,.split,.roles,.licbox,.loc,.ov,.facts{grid-template-columns:1fr}
  .tile--xl{grid-column:auto;grid-template-columns:1fr;min-height:0}.tile{padding:30px;min-height:0}.tile h3{font-size:28px}
  .tile__img{width:60%;margin-bottom:-40px}
  .how__in{grid-template-columns:1fr;gap:0}.how__sticky{order:-1;position:sticky;top:var(--hd);z-index:2;padding-block:12px;background:var(--ink)}
  .device{position:relative;top:0;height:300px}.scr{padding:20px}.scr>*{transform:scale(.8)}
  .step{padding-block:8vh}.step p{font-size:18px}
  .vs__col{padding:30px}.vs h3{font-size:24px}
  ol.flow{grid-template-columns:1fr;gap:26px}ol.flow::before,ol.flow::after{left:27px;right:auto;top:0;bottom:0;width:2px;height:auto}ol.flow::after{transform:scaleY(var(--p,0));transform-origin:top}
  ol.flow li{display:grid;grid-template-columns:56px 1fr;column-gap:20px}.flow__n{grid-row:span 2;margin:0}
  .nc{min-height:0}
  .cta{padding-block:80px}
  .sv{padding-block:56px 36px}.sv p{font-size:18px}
  .snav a{padding:8px 14px;font-size:16px}
  .ov div.wide{grid-column:auto}.ov div{grid-template-columns:110px 1fr}
  .hist li{grid-template-columns:1fr;gap:10px}.hist time{font-size:32px}
  .org__side{gap:16px}.org__row{grid-template-columns:1fr;padding-top:0;gap:16px}.org__row::before,.org__col::before,.org__side::before{display:none}.org__v{height:16px}
  .org__teams{flex-wrap:wrap}.org__teams .org__node{flex:1 1 40%}
  .split--r>:first-child{order:0}
  .proc{grid-template-columns:1fr}
  .pkg{grid-template-columns:1fr 1fr}.pkg button{padding:14px 16px}.pkg button b{font-size:18px}
  .adv li{grid-template-columns:1fr;gap:8px}.adv p{grid-column:auto}
  .board li a{grid-template-columns:60px 1fr;row-gap:4px}.board .no{display:none}.board b{grid-column:1/-1;white-space:normal;font-size:18px}.board time{text-align:left;grid-row:1;grid-column:2}
  .board-top{flex-direction:column;align-items:stretch}.search input{width:100%}
  .art-nav{grid-template-columns:1fr}
  .ct{grid-template-columns:1fr;gap:40px}.form__row{grid-template-columns:1fr}
  .band__in{padding-block:56px}
  .ft__main{flex-direction:column}.ft__cs{text-align:left}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .rv:not(.in){transform:none;opacity:1}}
.form label{display:block}
.form label>input,.form label>select,.form label>textarea{display:block;margin-top:6px}
.form label.agree{display:flex}
.checks__list label{display:inline-flex}
/* keep the 2-depth menu open while the pointer crosses the gap into the panel */
@media(min-width:1101px){
  .gnb__list{position:relative;z-index:2}
  .gnb{position:relative;align-self:stretch;display:flex;align-items:center}
  .gnb::after{content:'';position:absolute;left:-60px;right:-60px;top:100%;height:240px;display:none;z-index:1}
  .gnb:hover::after{display:block}
}
/* 2-depth columns: top item and its sub list share one fixed-width column so hovers never overlap */
@media(min-width:1101px){
  .gnb__list{gap:0}
  .gnb__list>li{width:clamp(122px,9.4vw,136px)}
  .gnb__list>li>a{padding:10px 14px;text-align:left}
  .sub{left:0;right:0;min-width:0;padding-right:6px}
  .sub a{padding:6px 14px;white-space:normal;line-height:1.4}
}
@media(min-width:1101px) and (max-width:1320px){
  .hd__tel{display:none}
  .gnb__list>li>a{font-size:18px}
  .sub a{font-size:16px;padding:6px 10px}
  .gnb__list>li>a{padding:10px 10px}
}

/* ---------- sub page motion (scroll-driven) ---------- */
.sv h1,.sv p,.sv .crumb{transform-origin:left bottom;will-change:transform,opacity}
.sv h1{transform:scale(calc(1 - var(--hs,0) * .12));opacity:calc(1 - var(--hs,0) * .55)}
.sv p{opacity:calc(1 - var(--hs,0) * .8)}

/* statement: words fill in as you scroll */
.stmt{padding-block:140px 40px}
.stmt__t{font-size:clamp(32px,5vw,68px);font-weight:600;line-height:1.25;letter-spacing:-.045em;max-width:16em;text-wrap:balance}
.stmt__t .w{color:#d4d9e3;transition:color .35s}
.stmt__t .w.on{color:var(--ink)}
.stmt__t .w.on.hl{color:var(--blue)}

/* heading rise */
.rise{display:block;overflow:hidden;padding-bottom:.08em}
.rise>span{display:inline-block;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.js .blk-hd:not(.in) .rise>span{transform:translateY(70%);opacity:.12}
.blk-hd p{transition:opacity 1s .15s var(--ease),transform 1s .15s var(--ease)}
.js .blk-hd:not(.in) p{opacity:.15;transform:translateY(20px)}

/* staggered children */
.js .st>*{transition:transform 1s var(--ease),opacity 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .st:not(.in)>*{transform:translateY(48px) scale(.96);opacity:.12}

/* table rows */
.tbl tbody tr{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .tbl-wrap:not(.in) tbody tr{opacity:.15;transform:translateY(14px)}
.tbl tbody tr:nth-child(2){transition-delay:.06s}.tbl tbody tr:nth-child(3){transition-delay:.12s}.tbl tbody tr:nth-child(4){transition-delay:.18s}.tbl tbody tr:nth-child(5){transition-delay:.24s}.tbl tbody tr:nth-child(6){transition-delay:.3s}.tbl tbody tr:nth-child(7){transition-delay:.36s}
.tbl td.hl{transition:background .6s .4s}
.js .tbl-wrap:not(.in) td.hl{background:transparent}

/* steps light up in order */
.steps li::before{transition:background .4s,transform .4s var(--ease)}
.js .box:not(.in) .steps li::before{background:#cfd5e0;transform:scale(.7)}
.steps li:nth-child(2)::before{transition-delay:.15s}.steps li:nth-child(3)::before{transition-delay:.3s}.steps li:nth-child(4)::before{transition-delay:.45s}.steps li:nth-child(5)::before{transition-delay:.6s}

/* history: the year passing the middle of the screen lights up */
.hist li{transition:opacity .5s}
.js .hist li{opacity:.35}
.js .hist li.on{opacity:1}
.hist time{transition:color .5s,transform .6s var(--ease);transform-origin:left center;display:inline-block}
.js .hist li:first-child time{color:var(--ink)}
.js .hist li.on time{color:var(--blue);transform:scale(1.08)}

/* org chart draws itself */
.org>*{transition:transform .7s var(--ease),opacity .7s var(--ease)}
.js .org:not(.in)>*{opacity:0;transform:translateY(16px)}
.org>:nth-child(2){transition-delay:.1s}.org>:nth-child(3){transition-delay:.2s}.org>:nth-child(4){transition-delay:.3s}.org>:nth-child(5){transition-delay:.4s}.org>:nth-child(6){transition-delay:.5s}.org>:nth-child(7){transition-delay:.6s}
.org__v{transform-origin:top}
.js .org:not(.in) .org__v{transform:scaleY(0)}
.org__row::before{transition:transform .8s .7s var(--ease)}
.js .org:not(.in) .org__row::before{transform:scaleX(0)}

/* product showcase (service VAN) */
.show{display:grid;grid-template-columns:1fr 1.15fr;gap:60px}
.show>*{min-width:0}
.show__step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s}
.show__step.is-on{opacity:1}
.show__step h3{font-size:clamp(32px,3.6vw,52px);font-weight:600;line-height:1.15;margin:10px 0 22px}
.show__step .prod__specs li{font-size:18px}
.show__sticky{position:sticky;top:calc(var(--hd) + 90px);height:min(560px,64vh);border-radius:var(--r);background:radial-gradient(80% 70% at 50% 40%,#fff 0%,var(--mist) 70%);overflow:hidden}
.show__sticky img{position:absolute;left:50%;top:50%;width:min(420px,68%);transform:translate(-50%,-44%) scale(.86) rotate(-6deg);opacity:0;transition:transform 1s var(--ease),opacity .6s;filter:drop-shadow(0 40px 40px rgba(13,17,23,.22))}
.show__sticky[data-show="0"] .s0,.show__sticky[data-show="1"] .s1,.show__sticky[data-show="2"] .s2{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.show__dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:8px}
.show__dots i{width:8px;height:8px;border-radius:4px;background:#cfd5e0;transition:width .4s,background .4s}
.show__sticky[data-show="0"] .show__dots i:nth-child(1),.show__sticky[data-show="1"] .show__dots i:nth-child(2),.show__sticky[data-show="2"] .show__dots i:nth-child(3){width:26px;background:var(--ink)}

/* zoom-in screenshot (platform) */
.blk--zoom{padding-top:0}
.zoom{position:relative;height:190vh}
.zoom__sticky{position:sticky;top:var(--hd);height:calc(100vh - var(--hd));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;overflow:hidden}
.zoom__fig{width:min(1180px,90vw);aspect-ratio:1265/712;max-width:100%;border-radius:calc(44px - 28px * var(--p,0));overflow:hidden;background:#fff;box-shadow:0 40px 80px -30px rgba(13,17,23,.35);transform:scale(calc(.58 + .42 * var(--p,0))) translateY(calc((1 - var(--p,0)) * 40px));will-change:transform}
.zoom__fig img{width:100%;height:100%;object-fit:cover;object-position:top left}
.zoom__cap{font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.03em;opacity:calc(var(--p,0) * 1.4 - .3)}

/* image parallax inside split shots */
.shot img{transform:translateY(calc((var(--p,.5) - .5) * -40px));transition:transform .1s linear}

/* sliding indicator for the sub tab bar */
.snav__in{position:relative}
.snav__ind{position:absolute;top:10px;height:calc(100% - 20px);border-radius:999px;background:var(--ink);transition:left .45s var(--ease),width .45s var(--ease);z-index:0}
.snav.has-ind a{position:relative;z-index:1}
.snav.has-ind a.is-on{background:transparent}

/* card hover lift with soft light */
.box,.card{position:relative}
.box::after,.card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(23,71,255,.08),transparent 45%);opacity:0;transition:opacity .3s}
.box:hover::after,.card:hover::after{opacity:1}

@media(max-width:820px){
  .stmt{padding-block:80px 10px}
  .show{grid-template-columns:1fr;gap:0}
  .show__stage{order:-1;position:sticky;top:calc(var(--hd) + 58px);z-index:2}
  .show__sticky{position:relative;top:0;height:260px}
  .show__step{min-height:60vh}
  .zoom{height:150vh}
  .zoom__fig{width:92vw;transform:scale(calc(.8 + .2 * var(--p,0)))}
  .hist li{opacity:1!important}
}
@media(prefers-reduced-motion:reduce){
  .sv h1,.sv p{transform:none!important;opacity:1!important}
  .stmt__t .w{color:var(--ink)}
  .zoom{height:auto}.zoom__sticky{position:static;height:auto;padding-block:40px}.zoom__fig{transform:none;border-radius:20px}.zoom__cap{opacity:1}
  .show__step{min-height:0;opacity:1;padding-block:30px}
  .js .st:not(.in)>*,.js .blk-hd:not(.in) .rise>span,.js .blk-hd:not(.in) p,.js .tbl-wrap:not(.in) tbody tr,.js .org:not(.in)>*{opacity:1;transform:none}
  .js .hist li{opacity:1}
}
@media(max-width:820px){.js .hist li.on time{transform:none}}

/* cut-out product photos sit directly on the stage */
.scr0 img{width:min(380px,74%);filter:drop-shadow(0 40px 40px rgba(0,0,0,.55))}
.show__sticky img{filter:drop-shadow(0 34px 30px rgba(13,17,23,.25))}
.show__sticky::after{content:'';position:absolute;left:50%;bottom:16%;width:46%;height:24px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(13,17,23,.18),transparent);pointer-events:none}
.ov__en{margin-left:8px;font-weight:500;color:var(--mute)}
/* back-office mock (settlement) */
.bo{border-radius:var(--r);background:var(--ink);padding:14px;color:var(--ink);box-shadow:0 40px 80px -40px rgba(13,17,23,.5)}
.bo__bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-radius:14px 14px 0 0;border-bottom:1px solid var(--line);font-size:14px}
.bo__bar img{height:20px;width:auto}.bo__bar span{font-weight:600}.bo__bar em{margin-left:auto;font-style:normal;color:var(--mute)}
.bo__body{display:grid;grid-template-columns:120px 1fr;background:var(--mist);border-radius:0 0 14px 14px;overflow:hidden}
.bo__nav{display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:#fff;border-right:1px solid var(--line);font-size:13px;color:var(--sub)}
.bo__nav b,.bo__nav span{padding:7px 10px;border-radius:8px}.bo__nav b{background:var(--blue-soft);color:var(--blue)}
.bo__main{padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bo__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bo__kpis div{background:#fff;border-radius:12px;padding:12px}
.bo__kpis small{display:block;font-size:12px;color:var(--mute)}.bo__kpis b{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bo__kpis div:last-child b{color:var(--blue)}
.bo__tbl{background:#fff;border-radius:12px;padding:6px 12px;font-size:13px}
.bo__tbl>div{display:grid;grid-template-columns:.7fr 1.2fr 1.2fr .8fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.bo__tbl>div:last-child{border-bottom:0}
.bo__th{color:var(--mute);font-weight:600}
.bo__tbl .ok{color:var(--green);font-weight:600}.bo__tbl .cx{color:#e5484d;font-weight:600}
.bo .shot__cap{color:#8a92a3;padding:12px 6px 2px}
.bo__tbl>div:not(.bo__th){transition:opacity .5s,transform .5s var(--ease)}
.js .bo:not(.in) .bo__tbl>div:not(.bo__th){opacity:0;transform:translateX(-10px)}
.bo__tbl>div:nth-child(3){transition-delay:.12s}.bo__tbl>div:nth-child(4){transition-delay:.24s}.bo__tbl>div:nth-child(5){transition-delay:.36s}
@media(max-width:820px){.bo__body{grid-template-columns:1fr}.bo__nav{display:none}.bo__kpis{grid-template-columns:1fr 1fr}.bo__kpis div:last-child{grid-column:span 2}}

/* ===== settlement infographics ===== */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--mist)}
.seg button{padding:8px 18px;border-radius:999px;font-weight:600;font-size:16px;color:var(--sub);transition:background .25s,color .25s}
.seg button.is-on{background:var(--ink);color:#fff}
.seg button:disabled{opacity:.35;cursor:not-allowed}

/* VAN dashboard with auto-advancing tabs */
.sx{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:stretch}
.sx>*{min-width:0}
.sx__tabs{display:flex;flex-direction:column;gap:6px}
.sx__tabs button{position:relative;text-align:left;padding:18px 20px;border-radius:18px;overflow:hidden;transition:background .3s}
.sx__tabs button b{display:block;font-size:20px;color:var(--mute);transition:color .3s}
.sx__tabs button span{display:block;font-size:14px;color:var(--mute);margin-top:2px}
.sx__tabs button:hover{background:var(--mist)}
.sx__tabs button.is-on{background:var(--mist)}
.sx__tabs button.is-on b{color:var(--ink)}
.sx__tabs button i{position:absolute;left:20px;right:20px;bottom:10px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0}
.sx__tabs button.is-on i{opacity:1}
.sx__tabs button i::after{content:'';position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(var(--t,0))}
.sx__screen{position:relative;border-radius:var(--r);background:var(--ink);padding:26px;color:#fff;min-height:440px;overflow:hidden}
.sx__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.sx__top b{font-size:18px}.sx__top span{font-size:14px;color:#8a92a3}
.sx__pane{position:absolute;left:26px;right:26px;top:70px;bottom:44px;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .5s,transform .6s var(--ease),visibility .5s;display:flex;flex-direction:column}
.sx__pane.is-on{opacity:1;visibility:visible;transform:none}
.sx__cap{margin-top:auto;font-size:14px;color:#8a92a3}
.sx__note{position:absolute;right:26px;bottom:16px;font-size:14px;color:#5f6778}
.sx__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.sx__kpis div{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06)}
.sx__kpis small{display:block;font-size:14px;color:#8a92a3}.sx__kpis b{font-size:22px;font-variant-numeric:tabular-nums}
.vbars{flex:1;display:flex;align-items:flex-end;gap:8px;min-height:150px;padding-bottom:20px}
.vb{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.vb i{display:block;width:100%;height:0;border-radius:6px 6px 2px 2px;background:linear-gradient(#7d9bff,var(--blue));transition:height .9s var(--ease)}
.sx__pane.is-on .vb i{height:var(--h)}
.vb:nth-child(n) i{transition-delay:calc(var(--k,0) * 40ms)}
.vb span{font-size:14px;color:#8a92a3}
.dep{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dep__day{border-radius:14px;background:rgba(255,255,255,.05);padding:12px;display:flex;flex-direction:column;gap:8px}
.dep__day b{font-size:14px;color:#aab2c3}
.dep__day.is-today{background:rgba(23,71,255,.25);outline:1px solid rgba(125,155,255,.5)}
.dep__day.is-today b{color:#fff}
.dep__chip{padding:10px 12px;border-radius:10px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;opacity:0;transform:translateY(-14px);transition:opacity .5s,transform .6s var(--ease);transition-delay:calc(var(--d) * 110ms)}
.dep__chip em{display:block;font-style:normal;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}
.sx__pane.is-on .dep__chip{opacity:1;transform:none}
.sx__sum{display:flex;gap:18px;align-items:baseline;margin-top:14px;font-size:14px;color:#8a92a3;flex-wrap:wrap}
.sx__sum b{font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.miss{display:flex;flex-direction:column;gap:8px}
.miss__row{display:grid;grid-template-columns:60px 1fr 1fr 90px;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);font-size:16px;font-variant-numeric:tabular-nums}
.miss__row em{font-style:normal;font-weight:600;font-size:14px}
.miss__row .ok{color:#3ddc97}.miss__row .bad{color:#ff6b6b}
.miss__row.is-miss{grid-template-columns:60px 1fr 1fr 70px 90px;background:rgba(229,72,77,.14);outline:1px solid rgba(255,107,107,.45);animation:missPulse 2s infinite}
.miss__row.is-done{animation:none;background:rgba(61,220,151,.12);outline-color:rgba(61,220,151,.4)}
.miss__row button{height:32px;border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px}
.miss__row.is-done button{display:none}
@keyframes missPulse{50%{outline-color:rgba(255,107,107,.1)}}
.tree{flex:1;display:flex;flex-direction:column;align-items:center;gap:26px;padding-top:6px}
.tree__root,.tree__n{border-radius:14px;padding:12px 18px;text-align:center;background:#fff;color:var(--ink)}
.tree__root{background:var(--blue);color:#fff;min-width:200px;position:relative}
.tree small{display:block;font-size:14px;opacity:.7}.tree b{font-variant-numeric:tabular-nums}
.tree__kids{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;position:relative}
.tree__kids::before{content:'';position:absolute;left:16.6%;right:16.6%;top:-14px;height:2px;background:#3a4560;transform:scaleX(0);transition:transform .7s .2s var(--ease)}
.tree__root::after{content:'';position:absolute;left:50%;bottom:-14px;width:2px;height:14px;background:#3a4560}
.sx__pane.is-on .tree__kids::before{transform:scaleX(1)}
.tree__n{position:relative;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s var(--ease)}
.tree__n::before{content:'';position:absolute;left:50%;top:-14px;width:2px;height:14px;background:#3a4560}
.sx__pane.is-on .tree__n{opacity:1;transform:none}
.tree__n:nth-child(2){transition-delay:.12s}.tree__n:nth-child(3){transition-delay:.24s}
.tree__n:hover{outline:2px solid var(--blue)}
.tree__leaf{display:flex;gap:4px;justify-content:center;margin-top:8px}
.tree__leaf span{font-size:14px;padding:3px 8px;border-radius:999px;background:var(--mist);color:var(--sub)}
.sx .seg{background:rgba(255,255,255,.08);align-self:flex-start;margin-bottom:12px}
.sx .seg button{color:#aab2c3}.sx .seg button.is-on{background:#fff;color:var(--ink)}
.rbars{flex:1;display:flex;align-items:flex-end;gap:6px;min-height:160px;padding-bottom:22px}
.rbars .vb i{height:var(--h);transition:height .7s var(--ease)}

/* PG back office: clickable nav */
.bo__nav button{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;font-size:13px;color:var(--sub);font-weight:500;transition:background .2s,color .2s}
.bo__nav button:hover{background:var(--mist)}
.bo__nav button.is-on{background:var(--blue-soft);color:var(--blue)}
.bo__main{position:relative;min-height:290px}
.bo__view{display:none;flex-direction:column;gap:12px;animation:boIn .45s var(--ease)}
.bo__view.is-on{display:flex}
@keyframes boIn{from{opacity:0;transform:translateY(8px)}}
.bo__donut{display:flex;align-items:center;gap:18px;background:#fff;border-radius:12px;padding:14px}
.bo__donut svg{width:110px;height:110px;flex:none;transform:rotate(-90deg)}
.bo__donut circle{fill:none;stroke-width:6}
.bo__donut .d0{stroke:#e9ecf3}
.bo__donut .d1,.bo__donut .d2,.bo__donut .d3{stroke-dasharray:0 100;stroke-dashoffset:calc(var(--o,0) * -1);transition:stroke-dasharray 1.1s var(--ease)}
.bo__donut .d1{stroke:var(--blue)}.bo__donut .d2{stroke:#7d9bff}.bo__donut .d3{stroke:var(--gold)}
.bo.in .bo__donut .d1,.bo.in .bo__donut .d2,.bo.in .bo__donut .d3{stroke-dasharray:var(--v) calc(100 - var(--v))}
.bo__donut ul{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--sub)}
.bo__donut li{display:flex;align-items:center;gap:8px}
.bo__donut li i{width:10px;height:10px;border-radius:3px}
.bo__donut .c1{background:var(--blue)}.bo__donut .c2{background:#7d9bff}.bo__donut .c3{background:var(--gold)}.bo__donut .c4{background:#e9ecf3}
.bo__chips{display:flex;gap:6px;flex-wrap:wrap}
.bo__chips button{padding:6px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--sub)}
.bo__chips button.is-on{background:var(--ink);color:#fff}
.bo__tbl>div[hidden]{display:none}
.bo__settle{display:flex;flex-direction:column;gap:8px}
.bo__settle div{display:grid;grid-template-columns:1fr 1fr 80px;align-items:center;gap:10px;padding:14px;border-radius:12px;background:#fff;font-size:14px;font-variant-numeric:tabular-nums}
.bo__settle b{text-align:right}.bo__settle em{font-style:normal;font-size:13px;font-weight:600;color:var(--green);text-align:right}
.bo__settle .is-next{outline:2px solid var(--blue)}.bo__settle .is-next em{color:var(--blue)}

/* animated flow diagram */
.fd{border-radius:var(--r);background:var(--mist);padding:32px}
.fd__top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.fd .seg{background:#fff}
.fd__play{font-weight:600;font-size:16px;color:var(--sub);padding:8px 14px;border-radius:999px}
.fd__play:hover{background:#fff;color:var(--ink)}
.fd__stage{position:relative;padding-block:40px}
.fd__nodes{display:flex;justify-content:space-between;gap:12px;position:relative}
.fd__nodes::before{content:'';position:absolute;left:8%;right:8%;top:50%;height:2px;background:repeating-linear-gradient(90deg,#c9d0dc 0 8px,transparent 8px 14px)}
.fd__node{position:relative;z-index:1;flex:1;max-width:170px;padding:18px 10px;border-radius:20px;background:#fff;text-align:center;font-weight:600;font-size:16px;transition:transform .35s var(--ease),box-shadow .35s,background .35s,color .35s}
.fd__node small{display:block;font-weight:500;font-size:14px;color:var(--mute);margin-top:2px}
.fd__node.is-hot{transform:translateY(-6px);box-shadow:0 18px 30px -14px rgba(23,71,255,.45);background:var(--ink);color:#fff}
.fd__node.is-hot small{color:#aab2c3}
.fd__node.is-us{outline:2px solid var(--blue)}
.fd__dot{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(23,71,255,.18);z-index:2;opacity:0;transition:left .75s var(--ease),background .3s,opacity .3s}
.fd__dot.res{background:var(--green);box-shadow:0 0 0 6px rgba(20,160,106,.18)}
.fd__dot.pay{background:var(--gold);box-shadow:0 0 0 6px rgba(255,178,30,.25)}
.fd__steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:6px;counter-reset:f}
.fd__steps li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#fff;font-size:16px;color:var(--mute);transition:color .3s,box-shadow .3s}
.fd__steps li::before{counter-increment:f;content:counter(f);flex:none;width:22px;height:22px;border-radius:50%;background:#e1e5ee;color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center;transition:background .3s}
.fd__steps li.done{color:var(--sub)}.fd__steps li.done::before{background:#9aa5bb}
.fd__steps li.on{color:var(--ink);box-shadow:0 0 0 2px var(--blue)}
.fd__steps li.on::before{background:var(--blue)}
.fd__steps li.res.on{box-shadow:0 0 0 2px var(--green)}.fd__steps li.res.on::before{background:var(--green)}
.fd__steps li.pay.on{box-shadow:0 0 0 2px var(--gold)}.fd__steps li.pay.on::before{background:var(--gold)}
.fd__pts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fd__pts li{padding:8px 14px;border-radius:999px;background:#fff;font-size:14px;font-weight:500;color:var(--sub)}

/* settlement calendar */
.cal{border-radius:var(--r);background:#fff;padding:28px;overflow-x:auto}
.cal__head,.cal__row{display:grid;grid-template-columns:200px repeat(5,minmax(90px,1fr));gap:8px;min-width:680px}
.cal__head b{text-align:center;font-size:16px;color:var(--mute);padding-bottom:10px}
.cal__row{padding-block:14px;border-top:1px solid var(--line);align-items:center}
.cal__k{font-weight:600;font-size:20px}.cal__k small{display:block;font-weight:500;font-size:14px;color:var(--mute)}
.cal__cell{min-height:70px;border-radius:14px;background:var(--mist);display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:8px}
.cal__cell i{font-style:normal;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;display:grid;place-items:center;opacity:0;transform:translateY(-30px);transition:opacity .4s,transform .6s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(var(--d) * 140ms + .2s)}
.cal.in .cal__cell i{opacity:1;transform:none}
.cal__span{grid-column:span 3;min-height:70px;border-radius:14px;background:var(--blue-soft);display:flex;align-items:center;padding:8px;overflow:hidden}
.cal__span i{font-style:normal;height:54px;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;font-size:16px;display:flex;align-items:center;justify-content:center;width:100%;transform-origin:left;transform:scaleX(0);transition:transform 1.1s 1.1s var(--ease)}
.cal.in .cal__span i{transform:scaleX(1)}

/* installment calculator */
.ins{display:grid;grid-template-columns:380px 1fr;gap:24px}
.ins>*{min-width:0}
.ins__ctl{border-radius:var(--r);background:var(--ink);color:#fff;padding:30px;display:flex;flex-direction:column;gap:12px}
.ins__ctl label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:16px;color:#aab2c3}
.ins__ctl label b{font-size:28px;color:#fff;font-variant-numeric:tabular-nums}
.ins__ctl input[type=range]{width:100%;accent-color:#7d9bff;height:24px}
.ins__k{font-size:16px;font-weight:600;color:#aab2c3;margin-top:8px}
.ins__ctl .seg{background:rgba(255,255,255,.08)}.ins__ctl .seg button{color:#aab2c3}.ins__ctl .seg button.is-on{background:#fff;color:var(--ink)}
.ins__months{display:flex;flex-wrap:wrap;gap:6px}
.ins__months button{min-width:52px;height:40px;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:16px;transition:background .2s,opacity .2s}
.ins__months button.is-on{background:var(--blue)}
.ins__months button:disabled{opacity:.25;cursor:not-allowed}
.ins__res{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:14px}
.ins__res div{padding:14px;border-radius:14px;background:rgba(255,255,255,.06)}
.ins__res small{display:block;font-size:14px;color:#8a92a3}.ins__res b{font-size:22px;font-variant-numeric:tabular-nums}
.ins__chart{border-radius:var(--r);background:var(--mist);padding:30px;display:flex;flex-direction:column}
.ins__bars{flex:1;display:flex;align-items:flex-end;gap:8px;min-height:260px}
.ins__bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.ins__bar i{display:block;width:100%;max-width:56px;height:0;border-radius:10px 10px 4px 4px;background:var(--blue);transition:height .6s var(--ease),background .3s}
.ins__bar.p i{background:var(--gold)}
.ins__bar span{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.ins__legend{display:flex;gap:18px;margin-top:16px;font-size:14px;color:var(--sub)}
.ins__legend span{display:flex;align-items:center;gap:6px}
.ins__legend i{width:12px;height:12px;border-radius:4px;background:var(--blue)}.ins__legend i.p{background:var(--gold)}

@media(max-width:1100px){.sx{grid-template-columns:1fr}.sx__tabs{flex-direction:row;overflow-x:auto;scrollbar-width:none}.sx__tabs button{flex:none;width:200px}.ins{grid-template-columns:1fr}}
@media(max-width:820px){
  .sx__screen{min-height:470px;padding:20px}.sx__pane{left:20px;right:20px;top:60px}
  .sx__kpis b{font-size:16px}.dep{grid-template-columns:1fr 1fr}
  .miss__row,.miss__row.is-miss{grid-template-columns:48px 1fr 1fr;font-size:14px}.miss__row em{grid-column:2}.miss__row button{grid-column:3}
  .tree__kids{grid-template-columns:1fr 1fr 1fr;gap:6px}.tree__n{padding:10px 6px}.tree__n b{font-size:14px}.tree__leaf{flex-wrap:wrap}
  .fd{padding:20px}.fd__nodes{gap:6px}.fd__node{padding:12px 4px;font-size:14px;border-radius:14px}.fd__node small{display:none}
  .bo__donut svg{width:84px;height:84px}
}
@media(prefers-reduced-motion:reduce){.vb i{height:var(--h)!important}.dep__chip,.tree__n,.cal__cell i{opacity:1;transform:none}.cal__span i{transform:none}}
@media(max-width:820px){.sx__kpis{gap:6px}.sx__kpis div{padding:10px}.sx__kpis b{font-size:14px;white-space:nowrap}}

/* 3D-style illustrations */
:root{--peach:#ffb07a;--mint:#b8d98f;--sky:#9cc3ec;--lilac:#c3b5f5;--butter:#ffd88a;--rose:#f7b0c0}
.ill-img{animation:bob 5.5s ease-in-out infinite;transition:transform .5s var(--ease)}
@keyframes bob{50%{translate:0 -10px;rotate:-2deg}}
.tile--ill{justify-content:flex-start;padding-bottom:0}
.tile--ill .ill-img{width:min(190px,62%);margin:6px 0 -14px auto;display:block}
.tile--ill:hover .ill-img{transform:scale(1.08) rotate(-4deg)}
.tile--peach{background:var(--peach)}.tile--mint{background:var(--mint)}.tile--sky{background:var(--sky)}.tile--lilac{background:var(--lilac)}
.tile--ill p{color:rgba(13,17,23,.68)}.tile--ill .tile__k{color:rgba(13,17,23,.55)}
.tile--ill:nth-child(odd) .ill-img{animation-delay:-2.5s}
.box--ill{padding:0;overflow:hidden;background:#fff}
.blk--gray .box--ill{background:#fff}
.box--ill .ill{height:200px;display:grid;place-items:center;margin-bottom:22px}
.box--ill .ill-img{width:170px}
.box--ill h3,.box--ill p,.box--ill .names{margin-left:28px;margin-right:28px}
.box--ill>:last-child{margin-bottom:30px}
.box--ill:hover .ill-img{transform:scale(1.08) rotate(-4deg)}
.ill--peach{background:var(--peach)}.ill--mint{background:var(--mint)}.ill--sky{background:var(--sky)}.ill--lilac{background:var(--lilac)}
.cards>.box--ill:nth-child(2) .ill-img{animation-delay:-1.4s}.cards>.box--ill:nth-child(3) .ill-img{animation-delay:-2.8s}.cards>.box--ill:nth-child(4) .ill-img{animation-delay:-4.2s}
@media(prefers-reduced-motion:reduce){.ill-img{animation:none}}

/* illustrations everywhere */
.ill--butter{background:var(--butter)}.ill--rose{background:var(--rose)}
.sv--ill .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.sv__txt{min-width:0}
.sv__ill{flex:none;width:240px;height:240px;border-radius:40px;display:grid;place-items:center;transform:rotate(4deg);animation:fade 1s .2s var(--ease) both;opacity:calc(1 - var(--hs,0) * .6)}
.sv__ill .ill-img{width:200px}
.box--ill .box__no{display:inline;margin:0 8px 0 0}
.loc__card{position:relative;overflow:hidden}
.loc__pin{position:absolute;right:-10px;top:-14px;width:150px;opacity:.95}
.loc__card h3,.loc__card p{position:relative;max-width:70%}
.proc--ill{position:relative;padding-top:14px}
.proc__ill{display:block;width:92px;margin:-6px 0 6px -8px}
.lic__ill{width:120px;margin:-20px 0 6px -14px}
.cta__in{position:relative}
.cta__ill{width:160px;flex:none;margin-left:auto;margin-right:-20px;align-self:center}
.head__ill{width:84px;margin:0 0 4px -10px;display:block}
@media(max-width:820px){
  .sv--ill .wrap{flex-direction:column-reverse;align-items:flex-start;gap:20px}
  .sv__ill{width:120px;height:120px;border-radius:26px}.sv__ill .ill-img{width:100px}
  .cta__ill{display:none}.proc__ill{width:72px}
  .loc__pin{width:110px}
}
@media(max-width:820px){.pkg button{min-width:0;flex-wrap:wrap;gap:2px}.pkg button b{font-size:16px}.pkg button span{font-size:14px}.tabs{flex-wrap:wrap;border-radius:20px}.tabs a,.tabs button{padding:8px 14px;font-size:14px}}

/* flow diagram v2: illustrated nodes + travelling token */
.fd{padding:36px}
.fd__ctl{display:flex;gap:6px}
.fd__ctl button{width:42px;height:42px;border-radius:50%;background:#fff;font-size:20px;font-weight:600;color:var(--ink);transition:background .2s,color .2s}
.fd__ctl button:hover{background:var(--ink);color:#fff}
.fd__stage{position:relative;padding-block:20px 70px}
.fd__lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.fd__lines line,.fd__lines path{fill:none;stroke:#cfd5e0;stroke-width:3;stroke-dasharray:3 9;stroke-linecap:round;transition:stroke .3s}
.fd__lines .on{stroke-dasharray:none;stroke-width:5;animation:dash 1s linear infinite}
.fd__lines .on.req{stroke:var(--blue)}.fd__lines .on.res{stroke:var(--green)}.fd__lines .on.pay{stroke:var(--gold)}
@keyframes dash{to{stroke-dashoffset:-24}}
.fd__nodes::before{display:none}
.fd__nodes{display:flex;justify-content:space-between;gap:10px;position:relative;z-index:1}
.fd__node{flex:1;max-width:180px;padding:0;background:none;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;box-shadow:none!important;transform:none!important}
.fd__pic{width:112px;height:112px;border-radius:32px;display:grid;place-items:center;margin-bottom:10px;transition:transform .45s var(--ease),box-shadow .45s}
.fd__pic img{width:84px;height:84px;object-fit:contain}
.fd__pic.is-us{background:#fff;outline:3px solid var(--blue);outline-offset:-3px}
.fd__pic.is-us img{width:80px;height:auto}
.fd__node b{font-size:18px}.fd__node small{display:block;font-size:14px;color:var(--mute);font-weight:500}
.fd__node.is-from .fd__pic,.fd__node.is-to .fd__pic{transform:translateY(-8px) scale(1.06);box-shadow:0 24px 34px -18px rgba(13,17,23,.45)}
.fd__token{position:absolute;left:0;top:0;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:18px;background:#fff;display:grid;place-items:center;z-index:3;opacity:0;box-shadow:0 14px 28px -10px rgba(13,17,23,.4);transition:left .9s var(--ease),top .4s var(--ease),opacity .3s}
.fd__token img{width:44px;height:44px}
.fd__token.req{outline:3px solid var(--blue)}.fd__token.res{outline:3px solid var(--green)}.fd__token.pay{outline:3px solid var(--gold)}
.fd__cap{display:flex;align-items:center;gap:16px;padding:22px 26px;border-radius:20px;background:#fff;min-height:80px}
.fd__no{flex:none;font-size:16px;font-weight:600;color:#fff;background:var(--blue);padding:6px 12px;border-radius:999px;font-variant-numeric:tabular-nums;transition:background .3s}
.fd[data-phase="res"] .fd__no{background:var(--green)}.fd[data-phase="pay"] .fd__no{background:var(--gold);color:var(--ink)}
.fd__cap b{font-size:22px;line-height:1.4}
.fd__phases{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.fd__ph{position:relative;text-align:left;padding:16px 18px 20px;border-radius:18px;background:#fff;overflow:hidden;opacity:.6;transition:opacity .3s}
.fd__ph.is-on,.fd__ph:hover{opacity:1}
.fd__ph b{display:block;font-size:16px}.fd__ph span{font-size:14px;color:var(--mute)}
.fd__ph i{position:absolute;left:18px;right:18px;bottom:10px;height:4px;border-radius:2px;background:var(--mist);overflow:hidden}
.fd__ph i::after{content:'';position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s var(--ease);background:var(--blue)}
.fd__ph--res i::after{background:var(--green)}.fd__ph--pay i::after{background:var(--gold)}
.fd__pts{margin-top:18px}
@media(max-width:820px){
  .fd{padding:20px}.fd__stage{padding-bottom:56px}
  .fd__pic{width:56px;height:56px;border-radius:18px;margin-bottom:6px}.fd__pic img{width:42px;height:42px}.fd__pic.is-us img{width:46px}
  .fd__node b{font-size:14px}.fd__node small{display:none}
  .fd__token{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:12px}.fd__token img{width:28px;height:28px}
  .fd__cap{padding:16px;gap:10px}.fd__cap b{font-size:16px}.fd__phases{grid-template-columns:1fr}.fd__ph{padding:12px 14px 16px}
}

/* calmer content cards: no pastel slabs, small art, plain step text */
.hd,.snav{background:rgba(255,255,255,.97)}
.box--ill{padding:32px;background:var(--mist)}
.blk--gray .box--ill{background:#fff}
.box--ill .ill{height:auto;background:none!important;display:block;margin:0 0 14px}
.box--ill .ill-img{width:76px;animation:none}
.box--ill:hover .ill-img{transform:translateY(-4px) rotate(-6deg)}
.box--ill h3,.box--ill p,.box--ill .names{margin-left:0;margin-right:0}
.box--ill>:last-child{margin-bottom:0}
.flowline{counter-reset:fl;gap:6px 10px}
.flowline span{display:inline-flex;align-items:center;gap:6px;padding:0;background:none;color:var(--ink);font-weight:600;font-size:16px}
.flowline span::before{counter-increment:fl;content:counter(fl);width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--blue)}
.flowline i{width:14px;height:1.5px;background:#c0c6d2;position:relative}
.flowline i::after{content:'';position:absolute;right:-1px;top:-3px;width:6px;height:6px;border-top:1.5px solid #c0c6d2;border-right:1.5px solid #c0c6d2;transform:rotate(45deg)}
.names{gap:4px 0}
.names span,.blk--gray .names span{padding:0;border:0;background:none;border-radius:0;font-size:16px;font-weight:500;color:var(--sub)}
.names span:not(:last-child)::after{content:'·';margin:0 10px;color:#c0c6d2}
.box--ill .ill{display:flex!important;justify-content:flex-start}
.box--ill .ill-img{margin:0 0 0 -6px}

/* ===== service page additions ===== */
/* finder */
.fnd{display:grid;grid-template-columns:1fr 380px;gap:24px;align-items:start}
.fnd>*{min-width:0}
.fnd__q{display:flex;flex-direction:column;gap:26px}
.fnd fieldset{border:0}
.fnd legend{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:600;margin-bottom:12px}
.fnd legend span{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;display:grid;place-items:center}
.fnd legend em{font-style:normal;font-weight:500;font-size:16px;color:var(--mute)}
.opt{display:flex;flex-wrap:wrap;gap:8px}
.opt label{position:relative;display:flex;flex-direction:column;gap:2px;min-width:140px;padding:16px 20px;border-radius:18px;background:#fff;border:2px solid transparent;cursor:pointer;transition:border-color .2s,transform .2s}
.opt label:hover{transform:translateY(-2px)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label b{font-size:18px}.opt label small{font-size:14px;color:var(--mute)}
.opt label:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.opt label:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.fnd__r{position:sticky;top:calc(var(--hd) + 80px);border-radius:var(--r);background:var(--ink);color:#fff;padding:28px;display:flex;flex-direction:column;gap:14px}
.fnd__k{font-size:16px;font-weight:600;color:#8a92a3}
.fnd__r ul{display:flex;flex-direction:column;gap:8px}
.fnd__r li{animation:boIn .45s var(--ease) both}
.fnd__r li a{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;background:rgba(255,255,255,.07);transition:background .2s}
.fnd__r li a:hover{background:rgba(255,255,255,.14)}
.fnd__r li img{width:46px;height:46px;flex:none}
.fnd__r li b{display:block;font-size:18px}.fnd__r li span{font-size:14px;color:#aab2c3}
/* terminal recommender */
.rec{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:80px;padding:44px;border-radius:var(--r);background:var(--mist)}
.rec>*{min-width:0}
.rec__chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px}
.rec__chips button{padding:10px 18px;border-radius:999px;background:#fff;font-weight:600;font-size:16px;color:var(--sub);transition:background .2s,color .2s}
.rec__chips button.is-on{background:var(--ink);color:#fff}
.rec__why{display:flex;flex-direction:column;gap:10px}
.rec__why li{position:relative;padding-left:28px;font-size:18px;color:var(--sub);animation:boIn .4s var(--ease) both}
.rec__why li::before{content:'';position:absolute;left:3px;top:9px;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.rec__r{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.rec__r img{width:min(320px,80%);height:260px;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(13,17,23,.22));transition:opacity .25s,transform .5s var(--ease)}
.rec__r img.swap{opacity:0;transform:translateY(16px) scale(.95) rotate(-4deg)}
.rec__r b{font-size:24px;margin-top:10px}.rec__r span{color:var(--mute)}
.tbl--spec th:first-child{width:150px}
/* supported payments */
.pays{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pays li{padding:22px;border-radius:18px;background:var(--mist);display:flex;flex-direction:column;gap:2px;transition:background .2s,transform .3s var(--ease)}
.pays li:hover{background:var(--blue-soft);transform:translateY(-3px)}
.pays b{font-size:18px}.pays span{font-size:14px;color:var(--mute)}
/* checkout simulator */
.ck2{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:center}
.ck2>*{min-width:0}
.ck2__tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck2__tabs button{text-align:left;padding:20px;border-radius:20px;background:#fff;border:2px solid transparent;transition:border-color .2s}
.ck2__tabs button b{display:block;font-size:20px}.ck2__tabs button span{font-size:14px;color:var(--mute)}
.ck2__tabs button.is-on{border-color:var(--blue)}
.ck2__steps{display:flex;gap:8px;margin-top:22px;counter-reset:c}
.ck2__steps li{flex:1;padding:12px 14px;border-radius:14px;background:#fff;font-size:14px;font-weight:600;color:var(--mute);position:relative;overflow:hidden}
.ck2__steps li::before{counter-increment:c;content:counter(c) '  ';color:var(--blue)}
.ck2__steps li::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.ck2__steps li.on{color:var(--ink)}.ck2__steps li.on::after{animation:fill 1.6s linear forwards}
.ck2__steps li.done{color:var(--sub)}.ck2__steps li.done::after{transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.ck2__phone{position:relative;width:300px;height:600px;margin:0 auto;border-radius:48px;background:var(--ink);padding:14px;box-shadow:0 50px 80px -40px rgba(13,17,23,.6)}
.ck2__notch{position:absolute;left:50%;top:22px;width:90px;height:24px;margin-left:-45px;border-radius:12px;background:#000;z-index:2}
.ck2__screen{position:relative;height:100%;border-radius:36px;background:#fff;overflow:hidden}
.scn{position:absolute;inset:0;padding:60px 22px 22px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateX(30px);transition:opacity .4s,transform .5s var(--ease)}
.scn.on{opacity:1;transform:none}
.scn.out{opacity:0;transform:translateX(-30px)}
.scn h5{font-size:18px;font-weight:600}
.scn .amt{display:flex;justify-content:space-between;padding:14px;border-radius:14px;background:var(--mist);font-size:14px}.scn .amt b{font-variant-numeric:tabular-nums}
.scn .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.scn .grid span,.scn .row{padding:14px 10px;border-radius:12px;border:1.5px solid var(--line);font-size:14px;font-weight:600;text-align:center}
.scn .grid span.pick,.scn .row.pick{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.scn .pin{display:flex;justify-content:center;gap:10px;margin:16px 0}
.scn .pin i{width:14px;height:14px;border-radius:50%;background:var(--line)}
.scn.on .pin i{animation:pinOn .3s forwards}
.scn.on .pin i:nth-child(2){animation-delay:.2s}.scn.on .pin i:nth-child(3){animation-delay:.4s}.scn.on .pin i:nth-child(4){animation-delay:.6s}.scn.on .pin i:nth-child(5){animation-delay:.8s}.scn.on .pin i:nth-child(6){animation-delay:1s}
@keyframes pinOn{to{background:var(--ink)}}
.scn .btn2{margin-top:auto;padding:16px;border-radius:14px;background:var(--blue);color:#fff;font-weight:600;text-align:center;font-size:16px}
.scn .muted{font-size:14px;color:var(--mute);text-align:center}
.scn--done{align-items:center;justify-content:center;text-align:center}
.scn--done svg{width:84px;height:84px}
.scn--done circle{fill:none;stroke:var(--green);stroke-width:4;stroke-dasharray:240;stroke-dashoffset:240}
.scn--done path{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.scn--done.on circle{animation:dr2 .6s .1s forwards}.scn--done.on path{animation:dr2 .4s .6s forwards}
@keyframes dr2{to{stroke-dashoffset:0}}
.scn--done b{font-size:22px}
/* extra service tabs */
.ex{display:grid;grid-template-columns:280px 1fr;gap:24px}
.ex>*{min-width:0}
.ex__tabs{display:flex;flex-direction:column;gap:8px}
.ex__tabs button{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;background:var(--mist);text-align:left;border:2px solid transparent;transition:border-color .2s,background .2s}
.ex__tabs button img{width:52px;height:52px;flex:none;transition:transform .4s var(--ease)}
.ex__tabs button b{font-size:18px}
.ex__tabs button.is-on{background:#fff;border-color:var(--ink)}
.ex__tabs button.is-on img{transform:scale(1.12) rotate(-6deg)}
.ex__panes{border-radius:var(--r);background:var(--mist);padding:40px;position:relative;min-height:420px}
.ex__pane{display:none;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ex__pane.is-on{display:grid;animation:boIn .5s var(--ease)}
.ex__txt h3{font-size:32px;font-weight:600;margin-bottom:12px}
.ex__txt>p{color:var(--sub);font-size:18px;margin-bottom:22px}
.ex__txt h4{font-size:16px;color:var(--blue);margin-bottom:6px}
.ex__flow{display:flex;flex-direction:column;align-items:center;gap:26px;position:relative}
.ex__flow::before{content:'';position:absolute;top:24px;bottom:24px;left:50%;width:2px;margin-left:-1px;background:repeating-linear-gradient(#b6bfcf 0 6px,transparent 6px 12px)}
.exn{position:relative;z-index:1;min-width:200px;padding:14px 22px;border-radius:16px;background:#fff;text-align:center;font-weight:600;box-shadow:0 10px 24px -16px rgba(13,17,23,.4);opacity:0;transform:translateY(14px)}
.exn small{display:block;font-weight:500;font-size:14px;color:var(--mute)}
.exn--us{background:var(--blue);color:#fff}.exn--us small{color:#c7d4ff}
.exn--ok{background:var(--green);color:#fff}
.ex__pane.is-on .exn{animation:exIn .5s var(--ease) forwards}
.ex__pane.is-on .exn:nth-child(2),.ex__pane.is-on .exn__fan .exn:nth-child(1){animation-delay:.25s}
.ex__pane.is-on .exn:nth-child(3),.ex__pane.is-on .exn__fan .exn:nth-child(2){animation-delay:.5s}
.ex__pane.is-on .exn:nth-child(4),.ex__pane.is-on .exn__fan .exn:nth-child(3){animation-delay:.75s}
@keyframes exIn{to{opacity:1;transform:none}}
.exn__fan{display:flex;gap:10px}
.exn__fan .exn{min-width:0;padding:12px 14px}
.ex__flow--fan .exn__fan .exn{animation-delay:.6s}
/* care timelines */
.tl2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.tl2__col{border-radius:var(--r);background:var(--mist);padding:34px}
.tl2 ol{display:flex;flex-direction:column;counter-reset:t;position:relative}
.tl2 ol::before{content:'';position:absolute;left:15px;top:16px;bottom:16px;width:2px;background:#d4d9e3}
.tl2 li{position:relative;padding:0 0 22px 50px}
.tl2 li:last-child{padding-bottom:0}
.tl2 li::before{counter-increment:t;content:counter(t);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue);font-weight:600;font-size:14px;display:grid;place-items:center}
.tl2 b{display:block;font-size:18px}.tl2 p{font-size:16px;color:var(--sub)}
@media(max-width:1100px){.fnd,.ck2,.ex{grid-template-columns:1fr}.fnd__r{position:static}.ex__tabs{flex-direction:row;overflow-x:auto}.ex__tabs button{flex:none}}
@media(max-width:820px){
  .opt label{min-width:0;flex:1 1 40%;padding:14px}
  .rec{grid-template-columns:1fr;padding:26px;margin-top:56px}.rec__r{order:-1}.rec__r img{height:200px}
  .pays{grid-template-columns:1fr 1fr}
  .ck2__tabs{grid-template-columns:1fr 1fr}.ck2__tabs button{padding:14px}.ck2__tabs button b{font-size:16px}.ck2__tabs button span{display:none}
  .ck2__steps{flex-wrap:wrap}.ck2__steps li{flex:1 1 40%}
  .ck2__phone{width:260px;height:520px}
  .ex__panes{padding:24px}.ex__pane{grid-template-columns:1fr;gap:28px}
  .exn{min-width:160px}
  .tl2{grid-template-columns:1fr}
}

/* 3D hero */
.stage{cursor:pointer;background:radial-gradient(90% 80% at 65% 10%,#18266a 0%,var(--night) 62%)}
.stage:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.stage #scene{position:absolute;inset:0;width:100%;height:100%}
.stage__hint{transition:opacity .4s}.stage__hint.hide{opacity:0}
.paybadge{position:absolute;right:28px;bottom:28px;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 14px;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(16px) scale(.96);transition:opacity .35s,transform .45s var(--ease);pointer-events:none}
.paybadge.on{opacity:1;transform:none}
.paybadge svg{width:36px;height:36px;padding:7px;border-radius:50%;background:var(--green);fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.paybadge b{display:block;font-size:16px}.paybadge span{font-size:14px;color:var(--mute)}
.stage.no3d{background:radial-gradient(90% 80% at 65% 10%,#18266a 0%,var(--night) 62%)}
@media(max-width:820px){.paybadge{right:16px;bottom:auto;top:56px}}
@media(max-width:820px){.stage .toasts{display:none}}

/* ===== join page ===== */
.jp__tabs{position:relative;display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
.jp__tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:0 10px 22px 0;text-align:left;color:var(--mute);transition:color .25s}
.jp__tab img{width:76px;height:76px;margin:0 0 10px -6px;filter:grayscale(1) opacity(.45);transition:filter .35s,transform .45s var(--ease)}
.jp__tab span{font-size:14px;font-weight:600}
.jp__tab b{font-size:22px;color:var(--mute);transition:color .25s}
.jp__tab:hover img{filter:grayscale(.3) opacity(.8)}
.jp__tab.is-on{color:var(--blue)}.jp__tab.is-on b{color:var(--ink)}
.jp__tab.is-on img{filter:none;transform:translateY(-6px) rotate(-4deg)}
.jp__bar{position:absolute;left:0;bottom:-1px;height:3px;width:20%;background:var(--ink);transition:transform .5s var(--ease)}
.jp__panes{padding-top:44px;min-height:300px}
.jp__pane{display:none}
.jp__pane.is-on{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;animation:boIn .45s var(--ease)}
.jp__head span{font-size:14px;font-weight:600;color:var(--blue)}
.jp__head h3{font-size:clamp(30px,3.4vw,44px);font-weight:600;margin:6px 0 12px}
.jp__head p{font-size:18px;color:var(--sub)}
.jp__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.jp__cols h4{font-size:16px;color:var(--mute);margin-bottom:6px}
.jp__note{grid-column:2;margin-top:-20px;padding-top:16px;border-top:1px solid var(--line);font-size:16px;color:var(--sub)}
.jp__note::before{content:'TIP  ';font-weight:600;color:var(--blue);font-size:14px}
/* readiness check */
.rd{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.rd>*{min-width:0}
.rd__ill{width:96px;margin:0 0 14px -10px}
.rd h2{font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.2;margin-bottom:14px}
.rd__l>p{font-size:18px;color:var(--sub)}
.rd__meter{display:flex;align-items:center;gap:16px;margin:34px 0 10px}
.rd__track{flex:1;height:6px;border-radius:3px;background:#dfe3ea;overflow:hidden}
.rd__track i{display:block;height:100%;width:0;background:var(--blue);transition:width .5s var(--ease),background .3s}
.rd.done .rd__track i{background:var(--green)}
.rd__meter b{font-size:28px;font-variant-numeric:tabular-nums;min-width:72px;text-align:right}
.rd__msg{font-size:16px;color:var(--sub);margin-bottom:22px;min-height:1.6em}
.rd.done .rd__msg{color:var(--green);font-weight:600}
#rdCta{opacity:.4;pointer-events:none;transition:opacity .3s}
.rd.done #rdCta{opacity:1;pointer-events:auto}
.rd__list,.dc__list{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);padding:8px 28px}
.rd__list li,.dc__list li{border-bottom:1px solid var(--line)}
.rd__list li:last-child,.dc__list li:last-child{border-bottom:0}
.rd__list label,.dc__list label{display:flex;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-size:18px;font-weight:500}
.rd__list input,.dc__list input{appearance:none;flex:none;width:24px;height:24px;border-radius:6px;border:2px solid #c0c6d2;display:grid;place-items:center;transition:background .2s,border-color .2s;cursor:pointer}
.rd__list input::after,.dc__list input::after{content:'';width:10px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.rd__list input:checked,.dc__list input:checked{background:var(--blue);border-color:var(--blue)}
.rd__list input:checked::after,.dc__list input:checked::after{opacity:1}
.rd__list input:focus-visible,.dc__list input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rd__list input:checked+span,.dc__list input:checked+span{color:var(--mute);text-decoration:line-through;text-decoration-color:#c0c6d2}
/* merit with art */
.adv--ill li{grid-template-columns:96px 280px 1fr;align-items:center}
.adv--ill img{width:84px;transition:transform .45s var(--ease)}
.adv--ill li:hover img{transform:translateY(-4px) rotate(-6deg)}
.adv--ill li{transition:background .3s}
/* documents */
.dc{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.dc>*{min-width:0}
.dc__ill{width:96px;margin:0 0 14px -10px}
.dc h2{font-size:clamp(30px,3.6vw,46px);font-weight:600;margin-bottom:14px}
.dc__l>p:not(.note):not(.dc__left){font-size:18px;color:var(--sub)}
.dc__left{margin-top:28px;font-size:22px;font-weight:600}
.dc__left em{font-style:normal;color:var(--blue)}
.dc__tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:16px}
.dc__tabs button{padding:0 0 12px;font-size:18px;font-weight:600;color:var(--mute);border-bottom:3px solid transparent;margin-bottom:-1px}
.dc__tabs button.is-on{color:var(--ink);border-color:var(--ink)}
.dc__list{display:none}.dc__list.is-on{display:flex;animation:boIn .4s var(--ease)}
/* faq search */
.faq__search{display:block;margin-bottom:18px}
.faq__search input{width:100%;height:56px;padding:0 20px 0 52px;border-radius:16px;border:1.5px solid var(--line);font-size:18px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a92a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 18px center/22px no-repeat}
.faq__search input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
#faq .faq details{background:var(--mist)}
.faq mark{background:#fff1b8;color:inherit;border-radius:3px}
.faq__none{margin-top:18px;color:var(--sub)}
@media(max-width:1100px){.jp__pane.is-on{grid-template-columns:1fr;gap:28px}.jp__note{grid-column:auto;margin-top:0}.adv--ill li{grid-template-columns:80px 1fr}.adv--ill li p{grid-column:2}}
@media(max-width:820px){
  .jp__tabs{overflow-x:auto;grid-template-columns:repeat(5,minmax(110px,1fr));scrollbar-width:none}
  .jp__tab img{width:56px;height:56px}.jp__tab b{font-size:18px}
  .jp__cols{grid-template-columns:1fr;gap:20px}
  .rd,.dc{grid-template-columns:1fr;gap:32px}.rd__list,.dc__list{padding:4px 20px}.rd__list label,.dc__list label{font-size:16px;padding:16px 0}
  .adv--ill li{grid-template-columns:60px 1fr}.adv--ill img{width:56px}
}

/* refined line charts in the VAN dashboard */
.lc__head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:8px}
.lc__head small{display:block;font-size:14px;color:#8a92a3}
.lc__big{font-size:32px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lc__delta{font-size:14px;font-weight:600;padding-bottom:6px}
.lc__delta.up{color:#3ddc97}.lc__delta.down{color:#ff6b6b}
.lc{position:relative;flex:1;min-height:170px}
.lc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc .grid line{stroke:rgba(255,255,255,.07);stroke-width:1}
.lc .line{fill:none;stroke:#7d9bff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lc .lbl{fill:#6f7889;font-size:14px;font-family:inherit}
.lc .end{fill:#fff;stroke:#7d9bff;stroke-width:3}
.lc .halo{fill:#7d9bff;opacity:.25;animation:halo 2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes halo{50%{transform:scale(1.8);opacity:0}}
.lc .cross{stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 4;opacity:0;transition:opacity .15s}
.lc .hov{fill:#fff;stroke:#7d9bff;stroke-width:3;opacity:0;transition:opacity .15s}
.lc.is-hover .cross,.lc.is-hover .hov{opacity:1}
.lc__tip{position:absolute;top:0;padding:8px 12px;border-radius:10px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;transform:translate(-50%,-110%);pointer-events:none;opacity:0;transition:opacity .15s;font-variant-numeric:tabular-nums;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.lc__tip small{display:block;font-weight:500;color:var(--mute);font-size:14px}
.lc.is-hover .lc__tip{opacity:1}
.mix{margin-top:14px}
.mix__bar{display:flex;gap:3px;height:8px;border-radius:4px;overflow:hidden}
.mix__bar i{width:0;background:var(--c);transition:width 1s var(--ease)}
.sx__pane.is-on .mix__bar i{width:var(--w)}
.mix ul{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px;color:#aab2c3}
.mix li{display:flex;align-items:center;gap:6px}.mix li i{width:8px;height:8px;border-radius:2px;background:var(--c)}
.lc__tabs{display:flex;gap:22px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:16px}
.lc__tabs button{padding:0 0 10px;font-size:16px;font-weight:600;color:#8a92a3;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s}
.lc__tabs button:hover{color:#fff}.lc__tabs button.is-on{color:#fff;border-color:#7d9bff}
@media(max-width:820px){.lc__big{font-size:24px}.lc{min-height:150px}}

/* join process: clear step cards + attached detail panel */
.jp__tabs{gap:12px;border-bottom:0}
.jp__bar{display:none}
.jp__tab{position:relative;padding:22px 22px 24px;border-radius:22px;background:var(--mist);color:var(--sub);transition:background .3s,color .3s,transform .3s var(--ease)}
.jp__tab:not(:last-of-type)::after{content:'';position:absolute;right:-10px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:2px solid #b6bfcf;border-right:2px solid #b6bfcf;transform:rotate(45deg);z-index:1}
.jp__tab img{filter:none;opacity:1;width:72px;height:72px;margin:0 0 12px -6px}
.jp__tab:hover img{filter:none}
.jp__tab span{color:var(--blue)}
.jp__tab b{color:var(--ink);font-size:20px}
.jp__tab:hover{transform:translateY(-3px)}
.jp__tab.is-on{background:var(--ink);color:#fff}
.jp__tab.is-on span{color:#8fa8ff}.jp__tab.is-on b{color:#fff}
.jp__tab.is-on img{transform:translateY(-4px) rotate(-4deg)}
.jp__panes{position:relative;margin-top:18px;padding:40px 44px;border-radius:var(--r);background:var(--mist);min-height:0}
.jp__panes::before{content:'';position:absolute;top:-9px;left:calc((var(--i,0) + .5) * (100% + 12px) / 5 - 6px);width:18px;height:18px;margin-left:-9px;background:var(--mist);transform:rotate(45deg);border-radius:3px;transition:left .45s var(--ease)}
.jp__note{border-top-color:#dde2ea}
@media(max-width:820px){.jp__tab{padding:16px}.jp__tab:not(:last-of-type)::after{display:none}.jp__panes{padding:26px 22px}.jp__panes::before{display:none}}

/* flow: richer phases + feature cards */
.fd__ph{display:flex;align-items:center;gap:14px;padding:16px 18px 20px;opacity:.75}
.fd__ph img{width:56px;height:56px;flex:none;transition:transform .45s var(--ease)}
.fd__ph.is-on img{transform:translateY(-3px) rotate(-6deg) scale(1.08)}
.fd__ph small{display:block;font-size:14px;font-weight:600;color:var(--mute)}
.fd__ph b{font-size:18px}
.fd__dots{display:flex;gap:5px;margin-top:6px}
.fd__dots em{width:8px;height:8px;border-radius:50%;background:#dfe3ea;transition:background .3s,transform .3s}
.fd__ph--req .fd__dots em.on{background:var(--blue)}.fd__ph--res .fd__dots em.on{background:var(--green)}.fd__ph--pay .fd__dots em.on{background:var(--gold)}
.fd__dots em.on{transform:scale(1.15)}
.fd__pts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px}
.fd__pts li{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:20px;background:#fff;font-size:16px;color:var(--sub);font-weight:500;animation:boIn .5s var(--ease) both;animation-delay:calc(var(--d) * 70ms)}
.fd__pts li img{width:60px;height:60px;margin:-4px 0 8px -6px}
.fd__pts li b{font-size:18px;color:var(--ink)}
.fd__pts li span{font-size:16px;line-height:1.5}
@media(max-width:820px){.fd__pts{grid-template-columns:1fr 1fr}.fd__ph img{width:44px;height:44px}}

/* monthly card installment table */
.icards{margin-bottom:28px}
.icards__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.icards__hd h3{font-size:24px;font-weight:600}.icards__hd span{color:var(--mute);font-size:16px}
.icards__pick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.icards__pick button{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:14px;background:var(--mist);font-weight:600;font-size:16px;border:2px solid transparent;transition:border-color .2s,background .2s}
.icards__pick button::before{content:'';width:34px;height:22px;border-radius:5px;background:linear-gradient(135deg,#2f5bff,#0d1640);box-shadow:inset 6px -6px 0 -3px rgba(255,210,100,.9)}
.icards__pick button.is-on{border-color:var(--ink);background:#fff}
.tbl--ins th[scope=row]{width:160px;color:var(--ink)}
.tbl--ins td{font-variant-numeric:tabular-nums}

/* HTML service screens (crisp at any size). 1em = container width / 75 */
.mk{container-type:inline-size;width:100%;height:100%;overflow:hidden;background:#f6f7f9;text-align:left}
.mk__s{font-size:calc(100cqw / 75);width:75em;height:42.2em;display:grid;grid-template-columns:12.5em 1fr;color:#16191f;letter-spacing:-.02em;line-height:1.4}
.mk svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mk-side{background:#fff;border-right:1px solid #eceef2;padding:1.4em 1em;display:flex;flex-direction:column}
.mk-logo{display:flex;align-items:center;gap:.4em;font-weight:600;font-size:1.25em;margin:0 0 1.2em .4em}
.mk-logo svg{width:1.3em;height:1.3em;stroke:none}
.mk-side ul{display:flex;flex-direction:column;gap:.15em}
.mk-side li{display:flex;align-items:center;gap:.7em;padding:.6em .8em;border-radius:.6em;font-size:.88em;color:#4b5363}
.mk-side li em{margin-left:auto;font-style:normal;font-size:.72em;font-weight:600;padding:.1em .45em;border-radius:.3em;background:#ff3b3b;color:#fff}
.mk-main{padding:1.3em 1.8em;display:flex;flex-direction:column;gap:1em;min-width:0}
.mk-top{display:flex;justify-content:space-between;align-items:center}
.mk-top b{display:block;font-size:1.05em}.mk-top small{font-size:.75em;color:#8a92a3}
.mk-btns{display:flex;gap:.4em}.mk-btns span{font-size:.75em;font-weight:600;padding:.5em .9em;border-radius:.5em;border:1px solid #e3e7ef;background:#fff}.mk-btns .dk{background:#16191f;color:#fff;border-color:#16191f}
/* starpay */
.mk--pay .mk-logo svg{fill:#2fb35c}
.mk--pay .mk-side li.on{background:#3cbf67;color:#fff;font-weight:600}
.mk-cs{margin-top:auto;padding:.8em;border-radius:.7em;background:#f4f6fa}.mk-cs small{display:block;font-size:.7em;color:#2f5bff;font-weight:600}.mk-cs b{font-size:.8em}
.mk-hero{display:grid;grid-template-columns:1fr 1.15fr;gap:.8em;height:10.4em}
.mk-pt,.mk-bn{position:relative;border-radius:1em;padding:1.1em 1.3em;color:#fff;overflow:hidden;display:flex;flex-direction:column}
.mk-pt{background:#1d2026}.mk-pt::after{content:'';position:absolute;right:-2em;top:-2em;width:8em;height:8em;border-radius:50%;background:rgba(255,255,255,.06)}
.mk-pt small,.mk-bn small{font-size:.7em;opacity:.7;font-weight:600;letter-spacing:.06em}
.mk-pt b,.mk-bn b{font-size:1.15em;margin:.5em 0 auto;line-height:1.35}
.mk-pt span{display:block;text-align:center;padding:.65em;border-radius:.6em;background:#3cbf67;font-size:.8em;font-weight:600}
.mk-bn{background:linear-gradient(120deg,#13224f,#284a9e)}
.mk-bn span{align-self:flex-start;padding:.45em .8em;border-radius:2em;background:#ffc94d;color:#16191f;font-size:.72em;font-weight:600}
.mk-bn img{position:absolute;right:.6em;bottom:-.4em;width:9.5em}
.mk-qs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.mk-q{display:flex;align-items:center;gap:.7em;padding:.85em 1em;border-radius:.8em;background:#fff;font-size:.82em}.mk-q svg{width:1.5em;height:1.5em}.mk-q b{font-weight:600}.mk-q i{margin-left:auto;color:#b6bcc8;font-style:normal}
.mk-cats{display:flex;justify-content:space-between;padding:.2em 1em}
.mk-cat{display:flex;flex-direction:column;align-items:center;gap:.35em}
.mk-cat span{width:4.3em;height:4.3em;border-radius:50%;background:#fff;border:.35em solid var(--c);display:grid;place-items:center;font-weight:600;font-size:.9em;color:var(--c)}
.mk-cat small{font-size:.72em;color:#4b5363}
.mk-sec{display:flex;justify-content:space-between;align-items:baseline}.mk-sec b{font-size:1.05em}.mk-sec small{font-size:.72em;color:#8a92a3}
.mk-gs{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em}
.mk-g{background:#fff;border-radius:.8em;padding:.6em;font-size:.78em}.mk-g b{display:block;margin-top:.5em}.mk-g small{color:#8a92a3}
.mk-g__img{height:4.6em;border-radius:.6em;background:linear-gradient(135deg,var(--c),#fff 170%)}
/* star tv */
.mk--tv .mk-logo svg{fill:#ffc61a}
.mk--tv .mk-logo span{font-size:.5em;font-weight:600;background:#ffe14d;padding:.25em .5em;border-radius:.3em;margin-left:.3em}
.mk--tv .mk-side li.on{background:#ffe14d;color:#16191f;font-weight:600}
.mk-my{margin-top:auto;padding:.8em;border-radius:.7em;background:#fff8d6}.mk-my small{font-size:.7em;color:#8a6d00}.mk-my b{display:block;font-size:1em;margin:.2em 0 .5em}.mk-my b i{font-style:normal;font-size:.7em;color:#8a92a3}
.mk-my span{display:block;text-align:center;padding:.5em;border-radius:.5em;background:#ffd21a;font-size:.75em;font-weight:600}
.mk-search{display:flex;align-items:center;gap:.6em;width:26em;padding:.55em 1em;border-radius:2em;background:#f0f2f6;color:#8a92a3;font-size:.8em}
.mk-tabs{display:flex;gap:.4em;align-items:center}.mk-tabs span{font-size:.75em;font-weight:600;padding:.45em .9em;border-radius:.5em;border:1px solid #e3e7ef;background:#fff;color:#4b5363}.mk-tabs .on{background:#16191f;color:#fff;border-color:#16191f}
.mk-tabs em{margin-left:auto;font-style:normal;font-size:.72em;padding:.45em .8em;border:1px solid #e3e7ef;border-radius:.5em;background:#fff}
.mk-sub{display:flex;gap:1em;font-size:.72em;color:#8a92a3;margin-top:-.4em}.mk-sub b{color:#16191f}
.mk-lvs{display:grid;grid-template-columns:repeat(3,1fr);gap:1em 1.1em}
.mk-lv__th{position:relative;height:7.4em;border-radius:.7em;background:linear-gradient(135deg,var(--a),var(--b));overflow:hidden}
.mk-lv__th i{position:absolute;right:-1.5em;top:-1.5em;width:7em;height:7em;border-radius:50%;background:rgba(255,255,255,.18)}
.mk-lv__th i::after{content:'';position:absolute;left:-2.6em;top:3.6em;width:3.4em;height:3.4em;border-radius:50%;background:rgba(255,255,255,.14)}
.mk-lv__th em{position:absolute;left:.6em;top:.6em;font-style:normal;font-size:.62em;font-weight:600;color:#fff;background:#ff3b3b;padding:.2em .5em;border-radius:.3em}
.mk-chip{position:absolute;bottom:.55em;font-size:.6em;font-weight:600;padding:.25em .55em;border-radius:.35em}
.mk-chip.y{left:.6em;background:#ffe14d}.mk-chip.p{left:6.4em;background:#7c5cff;color:#fff}
.mk-lv__t{display:flex;gap:.5em;margin-top:.45em;font-size:.72em}.mk-lv__t b{display:block;font-weight:600}.mk-lv__t small{color:#8a92a3}
.mk-lv__t .av{width:2em;height:2em;border-radius:50%;background:#eceef2;display:grid;place-items:center;font-weight:600;color:#4b5363;flex:none}
/* containers that used the screenshots */
.plat__shot .mk,.zoom__fig .mk,.shot .mk{border-radius:inherit}
.shot{aspect-ratio:auto}.shot .mk{aspect-ratio:1265/712;height:auto;border-radius:14px;box-shadow:0 20px 40px -20px rgba(13,17,23,.35)}
.shot .mk{transform:translateY(calc((var(--p,.5) - .5) * -40px))}
.ft__admin{color:var(--mute)}

/* language switch */
.lang{display:flex;align-items:center;gap:2px;font-size:14px;font-weight:500;letter-spacing:.02em}
.lang a{padding:6px 7px;color:var(--mute);border-radius:6px;transition:color .2s}
.lang a:hover{color:var(--ink)}
.lang a.is-on{color:var(--ink);font-weight:600}
.lang a{position:relative;line-height:1}
.lang a+a::before{content:'';position:absolute;left:-1px;top:50%;width:1px;height:10px;margin-top:-5px;background:var(--line)}
@media(max-width:1640px){.hd__tel{display:none}}
.hd__tel b,.hd__tel small{white-space:nowrap}
@media(min-width:1101px){
  :lang(en) .gnb__list>li>a,:lang(ja) .gnb__list>li>a{white-space:nowrap;font-size:18px;padding:10px 10px}
  :lang(ja) .gnb__list>li>a{font-size:16px}
  :lang(en) .sub a,:lang(ja) .sub a{font-size:16px;padding:6px 10px;line-height:1.35}
  :lang(ja) .gnb__list{gap:4px}
  :lang(ja) .gnb__list>li{width:auto;min-width:clamp(100px,8.6vw,126px)}
  :lang(ja) .sub a{white-space:nowrap}
  .logo{flex-shrink:0}
}
@media(min-width:1101px) and (max-width:1320px){
  :lang(en) .gnb__list>li>a{font-size:16px;padding:10px 8px}
  :lang(ja) .gnb__list>li>a{font-size:16px;padding:10px 6px}
  :lang(en) .sub a,:lang(ja) .sub a{font-size:14px;padding:6px 8px}
  :lang(en) .hd__r .btn,:lang(ja) .hd__r .btn{display:none}
  :lang(ja) .sub a{white-space:normal}
}
:lang(ja) .hero__title{font-size:clamp(34px,5.6vw,80px);line-height:1.18}
:lang(ja) .hero__title .ln>span,:lang(en) .hero__title .ln>span{white-space:normal;max-width:100%}
@media(max-width:600px){:lang(ja) .hero__title{font-size:30px}:lang(en) .hero__title{font-size:36px}}
:lang(ja) body,:lang(ja) body *{word-break:normal;line-break:strict}
:lang(ja) .hero__title .ln>span{display:block}:lang(ja) .hero__title em{white-space:nowrap}

/* ---------- home intro film (full-bleed video, shrinks into a rounded frame on scroll) ---------- */
.intro{position:relative;height:190vh;background:var(--paper,#fff);--p:0;margin-top:calc(var(--hd)*-1)}
.intro__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-end}
.intro__media{position:absolute;inset:0;clip-path:inset(calc(var(--p)*7vh) calc(var(--p)*6vw) calc(var(--p)*7vh) calc(var(--p)*6vw) round calc(var(--p)*36px));will-change:clip-path}
.intro__media video{width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block;background:#05081a}
.intro__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,26,.92) 0%,rgba(5,8,26,.72) 34%,rgba(5,8,26,.15) 62%,rgba(5,8,26,0) 80%),linear-gradient(0deg,rgba(5,8,26,.7) 0%,rgba(5,8,26,0) 45%);opacity:calc(1 - var(--p)*.6)}
.intro__txt{position:relative;z-index:2;padding-bottom:clamp(64px,12vh,128px);color:#fff;opacity:calc(1 - var(--p)*1.6);transform:translateY(calc(var(--p)*-60px))}
.intro__kicker{font-size:17px;font-weight:600;color:#8ea6ff;margin-bottom:22px}
.intro__title{color:#fff;font-size:clamp(40px,6.4vw,104px)}
.intro__title em{color:#7d9bff}
.intro__lead{margin-top:28px;font-size:21px;line-height:1.6;color:rgba(255,255,255,.78);max-width:34em;animation:fade 1s .4s both}
.intro .hero__cta{margin-top:36px}
.pill--ghost{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff}.pill--ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.intro__toggle{position:absolute;z-index:3;right:max(40px,calc((100vw - 1520px)/2 + 40px));bottom:clamp(64px,12vh,128px);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:none;cursor:pointer;opacity:calc(1 - var(--p)*1.6)}
.intro__toggle i{display:block;width:12px;height:14px;margin:auto;border-left:3px solid #fff;border-right:3px solid #fff}
.intro__toggle.is-paused i{width:0;height:0;border:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:17px}
.intro__scroll{position:absolute;z-index:3;left:50%;bottom:26px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.55);border-radius:14px;opacity:calc(1 - var(--p)*3)}
.intro__scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:scrollDot 1.6s infinite}
@keyframes scrollDot{0%{transform:translateY(0);opacity:1}80%{transform:translateY(14px);opacity:0}100%{opacity:0}}
.hero--tap{padding-top:120px}
.hero--tap .stage{margin-top:0}
.head--split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.head--split h2{margin:0}.head--split .head__sub{max-width:28em;margin:0}
/* header over the dark film */
.hd.on-dark:not(:hover):not(.is-open){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.hd.on-dark:not(:hover):not(.is-open) .gnb__list>li>a,.hd.on-dark:not(:hover):not(.is-open) .lang a.is-on,.hd.on-dark:not(:hover):not(.is-open) .hd__tel b{color:#fff}
.hd.on-dark:not(:hover):not(.is-open) .lang a,.hd.on-dark:not(:hover):not(.is-open) .hd__tel small{color:rgba(255,255,255,.6)}
.hd.on-dark:not(:hover):not(.is-open) .logo .lg{filter:brightness(0) invert(1)}
.hd.on-dark:not(:hover):not(.is-open) .hd__r .btn{background:#fff;color:var(--ink)}
.hd.on-dark:not(:hover):not(.is-open) .burger span{background:#fff}
.hd{transition:background .3s,box-shadow .3s}
@media(max-width:820px){
  .intro{height:170vh}
  .intro__media video{object-position:70% 50%}
  .intro__shade{background:linear-gradient(0deg,rgba(5,8,26,.92) 0%,rgba(5,8,26,.6) 50%,rgba(5,8,26,.15) 100%)}
  .intro__lead{font-size:17px}.intro__toggle{display:none}
  .hero--tap{padding-top:80px}
}
@media(prefers-reduced-motion:reduce){.intro{height:auto}.intro__sticky{position:relative}.intro__scroll span{animation:none}}
/* intro v2: bright film — dark text on a soft white veil */
.intro--light .intro__media video{background:#eef3ff}
.intro--light .intro__shade{background:linear-gradient(90deg,rgba(247,249,255,.95) 0%,rgba(247,249,255,.8) 28%,rgba(247,249,255,0) 46%)}
.intro--light .intro__txt{color:var(--ink)}
.intro--light .intro__kicker{color:var(--blue)}
.intro--light .intro__title{color:var(--ink)}.intro--light .intro__title em{color:var(--blue)}
.intro--light .intro__lead{color:var(--sub)}
.intro--light .pill--ghost{border-color:var(--line);background:#fff;color:var(--ink)}.intro--light .pill--ghost:hover{border-color:var(--ink)}
.intro--light .intro__toggle{border-color:rgba(13,17,23,.25)}.intro--light .intro__toggle i{border-color:var(--ink)}.intro--light .intro__toggle.is-paused i{border-left-color:var(--ink)}
.intro--light .intro__scroll{border-color:rgba(13,17,23,.35)}.intro--light .intro__scroll span{background:var(--ink)}
@media(max-width:820px){.intro--light .intro__shade{background:linear-gradient(0deg,rgba(247,249,255,.97) 0%,rgba(247,249,255,.9) 56%,rgba(247,249,255,.45) 74%,rgba(247,249,255,0) 88%)}.intro--light .intro__media video{object-position:66% 30%}}
@media(min-width:821px){
  .intro--light .intro__title{font-size:clamp(40px,5.1vw,86px)}
  .intro--light .intro__shade{background:linear-gradient(90deg,rgba(247,249,255,.96) 0%,rgba(247,249,255,.86) 32%,rgba(247,249,255,.5) 44%,rgba(247,249,255,0) 56%)}
}

/* ---------- join: onboarding journey (sticky illustrated stage + scroll timeline) ---------- */
.jx{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:start}
.jx__stage{position:sticky;top:calc(var(--hd) + 84px)}
.jx__frame{position:relative;border-radius:var(--r);background:var(--mist);aspect-ratio:1/0.86;overflow:hidden}
.jx__top{position:absolute;left:28px;right:28px;top:24px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.jx__cur{font-size:14px;font-weight:600;color:var(--blue)}
.jx__dots{display:flex;gap:6px}.jx__dots i{width:22px;height:4px;border-radius:2px;background:#d5dbe7;transition:background .3s,width .4s var(--ease)}.jx__dots i.is-on{background:var(--ink);width:40px}
.jx__scenes{position:absolute;inset:0}
.jx__scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:70px 36px 36px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s,transform .6s var(--ease);pointer-events:none}
.jx__scene.is-on{opacity:1;transform:none}
.sc{width:100%;max-width:470px}
/* timeline */
.jx__steps{position:relative;list-style:none;margin:0;padding:0 0 0 64px}
.jx__line{position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--line);border-radius:1px}
.jx__line i{position:absolute;left:0;top:0;width:100%;height:calc(var(--fill,0)*100%);background:var(--blue);border-radius:1px;transition:height .2s linear}
.jx__step{position:relative;padding:26px 0 40px;min-height:30vh}
.jx__head{display:block;width:100%;text-align:left;cursor:pointer}
.jx__no{position:absolute;left:-64px;top:24px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:600;background:#fff;color:var(--mute);border:2px solid var(--line);transition:background .3s,color .3s,border-color .3s,transform .4s var(--ease)}
.jx__step.is-done .jx__no{border-color:var(--blue);color:var(--blue)}
.jx__step.is-on .jx__no{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.08)}
.jx__k{display:block;font-size:14px;font-weight:600;color:var(--blue)}
.jx__head b{display:block;font-size:clamp(24px,2.4vw,32px);font-weight:600;margin:4px 0 8px;color:var(--mute);transition:color .3s}
.jx__step.is-on .jx__head b,.jx__step.is-done .jx__head b{color:var(--ink)}
.jx__desc{display:block;font-size:18px;color:var(--sub)}
.jx__body{display:grid;grid-template-rows:0fr;opacity:.0;transition:grid-template-rows .5s var(--ease),opacity .4s}
.jx__body>*{min-height:0;overflow:hidden}
.jx__step.is-on .jx__body{grid-template-rows:1fr;opacity:1}
.jx__body{display:block;max-height:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .4s}
.jx__step.is-on .jx__body{max-height:420px}
.jx__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:22px}
.jx__cols h4{font-size:14px;color:var(--mute);margin-bottom:6px}
.jx__body .jp__note{grid-column:auto;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* scene 1: chat */
.sc-chat{display:flex;flex-direction:column;gap:12px}
.sc-msg{display:flex;align-items:flex-end;gap:10px;opacity:0;transform:translateY(10px)}
.sc-msg img{width:44px;height:44px;flex:none}
.sc-msg p{padding:13px 17px;border-radius:20px;font-size:15.5px;line-height:1.5;max-width:76%;background:#fff;box-shadow:0 8px 20px -14px rgba(13,17,23,.3)}
.sc-msg.me p{border-bottom-left-radius:6px}
.sc-msg.us{justify-content:flex-end}.sc-msg.us p{background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.sc-msg.typing p{display:flex;gap:5px;padding:16px 18px}.sc-msg.typing i{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.5;animation:typing 1.2s infinite}.sc-msg.typing i:nth-child(2){animation-delay:.15s}.sc-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.4;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.is-on .sc-msg{animation:msgIn .5s var(--ease) forwards}
.is-on .sc-msg:nth-child(2){animation-delay:.6s}.is-on .sc-msg:nth-child(3){animation-delay:1.3s}.is-on .sc-msg:nth-child(4){animation-delay:1.9s}
@keyframes msgIn{to{opacity:1;transform:none}}
/* scene 2: pick a terminal */
.sc-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sc-pick figure{position:relative;margin:0;padding:18px 10px 14px;border-radius:20px;background:#fff;text-align:center;border:2px solid transparent;transition:border-color .3s,transform .5s var(--ease),box-shadow .3s}
.sc-pick img{height:120px;width:auto;max-width:100%;object-fit:contain}
.sc-pick figcaption{margin-top:8px;font-size:13px;font-weight:600;color:var(--sub)}
.sc-pick em{position:absolute;top:-12px;left:50%;transform:translateX(-50%) scale(.6);opacity:0;padding:4px 12px;border-radius:999px;background:var(--blue);color:#fff;font-style:normal;font-size:12.5px;font-weight:600;transition:opacity .3s 1.2s,transform .45s var(--ease) 1.2s}
.is-on .sc-pick figure{animation:scan 1.2s var(--ease) both}
.is-on .sc-pick figure:nth-child(2){animation-delay:.25s}.is-on .sc-pick figure:nth-child(3){animation-delay:.5s}
@keyframes scan{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.is-on .sc-pick .best{border-color:var(--blue);transform:translateY(-10px);box-shadow:0 22px 36px -22px rgba(43,85,255,.5);transition-delay:1.1s}
.is-on .sc-pick em{opacity:1;transform:translateX(-50%) scale(1)}
.sc-pick__opts{display:flex;justify-content:center;gap:8px;margin-top:22px}
.sc-pick__opts span{padding:8px 14px;border-radius:12px;background:#fff;font-size:14px;font-weight:600;color:var(--sub);opacity:0}
.is-on .sc-pick__opts span{animation:msgIn .4s var(--ease) forwards}
.is-on .sc-pick__opts span:nth-child(1){animation-delay:1.5s}.is-on .sc-pick__opts span:nth-child(2){animation-delay:1.65s}.is-on .sc-pick__opts span:nth-child(3){animation-delay:1.8s}
/* scene 3: documents + signature + stamp */
.sc-paper{position:relative;max-width:360px;margin:0 auto;padding:30px 30px 26px;border-radius:18px;background:#fff;box-shadow:0 30px 50px -34px rgba(13,17,23,.35)}
.sc-paper h5{font-size:19px;font-weight:600;margin-bottom:16px}
.sc-paper ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-paper li{position:relative;padding:10px 12px 10px 40px;border-radius:10px;background:var(--mist);font-size:15px;color:var(--sub)}
.sc-paper li::before{content:'';position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px solid #c6cddb;transition:background .3s,border-color .3s}
.sc-paper li::after{content:'';position:absolute;left:18px;top:50%;width:6px;height:10px;margin-top:-7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) scale(0);transition:transform .3s var(--ease)}
.is-on .sc-paper li{animation:tick .01s forwards}
.is-on .sc-paper li:nth-child(1){animation-delay:.4s}.is-on .sc-paper li:nth-child(2){animation-delay:.75s}.is-on .sc-paper li:nth-child(3){animation-delay:1.1s}.is-on .sc-paper li:nth-child(4){animation-delay:1.45s}
@keyframes tick{to{color:var(--ink)}}
.is-on .sc-paper li{--d:0s}
.is-on .sc-paper li::before{animation:tickC .3s forwards}.is-on .sc-paper li::after{animation:tickM .3s var(--ease) forwards}
.is-on .sc-paper li:nth-child(1)::before,.is-on .sc-paper li:nth-child(1)::after{animation-delay:.4s}
.is-on .sc-paper li:nth-child(2)::before,.is-on .sc-paper li:nth-child(2)::after{animation-delay:.75s}
.is-on .sc-paper li:nth-child(3)::before,.is-on .sc-paper li:nth-child(3)::after{animation-delay:1.1s}
.is-on .sc-paper li:nth-child(4)::before,.is-on .sc-paper li:nth-child(4)::after{animation-delay:1.45s}
@keyframes tickC{to{background:var(--blue);border-color:var(--blue)}}@keyframes tickM{to{transform:rotate(45deg) scale(1)}}
.sc-sign{margin-top:18px;padding-top:6px;border-top:1px dashed #cfd5e1;display:flex;align-items:flex-end;justify-content:space-between}
.sc-sign svg{width:190px;height:52px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.is-on .sc-sign svg{animation:sign 1.1s ease-in-out 1.8s forwards}
@keyframes sign{to{stroke-dashoffset:0}}
.sc-sign small{font-size:12px;color:var(--mute)}
.sc-stamp{position:absolute;right:24px;bottom:58px;padding:8px 14px;border:3px solid #e8484f;border-radius:10px;color:#e8484f;font-size:17px;font-weight:600;transform:rotate(-12deg) scale(1.8);opacity:0}
.is-on .sc-stamp{animation:stamp .35s cubic-bezier(.3,1.6,.5,1) 3s forwards}
@keyframes stamp{to{opacity:.92;transform:rotate(-12deg) scale(1)}}
/* scene 4: terminal ↔ code */
.sc-link{display:grid;grid-template-columns:1fr 70px 1.25fr;align-items:center}
.sc-link figure{margin:0;padding:16px 10px 12px;border-radius:20px;background:#fff;text-align:center;opacity:0}
.sc-link figure img{height:130px;width:auto}
.sc-link figcaption{font-size:13px;font-weight:600;color:var(--sub);margin-top:6px}
.sc-wire{position:relative;height:2px;background:repeating-linear-gradient(90deg,#b9c4dc 0 6px,transparent 6px 11px)}
.sc-wire i{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--blue);opacity:0}
.is-on .sc-wire i{animation:wire 1.4s ease-in-out .9s infinite}
@keyframes wire{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
.sc-code{position:relative;padding:16px 18px 18px;border-radius:16px;background:#0f1424;color:#c9d3ef;font:500 13.5px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:0}
.sc-code__bar{display:flex;gap:5px;margin-bottom:8px}.sc-code__bar i{width:9px;height:9px;border-radius:50%;background:#2c3550}
.sc-code p{white-space:nowrap;overflow:hidden;width:0}
.sc-code .k{color:#ff9b6b}.sc-code .n{color:#ffd166}.sc-code .s{color:#7ee0a8}
.sc-code__ok{position:absolute;right:12px;bottom:-14px;padding:6px 12px;border-radius:10px;background:#16b67a;color:#fff;font:800 13px var(--f);opacity:0;transform:translateY(6px)}
.is-on .sc-link figure{animation:msgIn .45s var(--ease) .1s forwards}
.is-on .sc-code{animation:msgIn .45s var(--ease) .35s forwards}
.is-on .sc-code p{animation:type .5s steps(24) forwards}
.is-on .sc-code p:nth-of-type(1){animation-delay:.7s}.is-on .sc-code p:nth-of-type(2){animation-delay:1.15s}.is-on .sc-code p:nth-of-type(3){animation-delay:1.6s}.is-on .sc-code p:nth-of-type(4){animation-delay:2.05s}
@keyframes type{to{width:100%}}
.is-on .sc-code__ok{animation:msgIn .4s var(--ease) 2.6s forwards}
/* scene 5: test payment + open */
.sc-open{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center}
.sc-store{position:relative;text-align:center}
.sc-store img{width:100%;max-width:230px}
.sc-board{position:relative;width:118px;height:44px;margin:-6px auto 0;perspective:400px}
.sc-board b{position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;font-size:16px;font-weight:600;backface-visibility:hidden;transition:transform .7s var(--ease) 1.8s}
.sc-board .f{background:#e3e7ef;color:var(--sub)}
.sc-board .b{background:#16b67a;color:#fff;transform:rotateX(180deg)}
.is-on .sc-board .f{transform:rotateX(-180deg)}.is-on .sc-board .b{transform:rotateX(0)}
.sc-rcpt{padding:20px 18px 16px;background:#fff;border-radius:6px 6px 0 0;box-shadow:0 26px 40px -30px rgba(13,17,23,.4);clip-path:inset(0 0 100% 0);-webkit-mask:linear-gradient(#000 calc(100% - 8px),transparent 0),radial-gradient(circle 6px at 6px 100%,transparent 6px,#000 0) bottom/12px 8px repeat-x}
.sc-rcpt h6{font-size:15px;font-weight:600;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed #d0d6e2}
.sc-rcpt p{display:flex;justify-content:space-between;font-size:14px;color:var(--sub);margin:6px 0}.sc-rcpt p b{color:var(--ink)}
.sc-rcpt em{display:block;margin-top:12px;padding:8px;border-radius:8px;background:#e8f8f1;color:#0f9a63;text-align:center;font-style:normal;font-weight:600;font-size:14px}
.is-on .sc-rcpt{animation:print 1.2s steps(14) .3s forwards}
@keyframes print{to{clip-path:inset(0 0 0 0)}}
@media(max-width:1100px){
  .jx{grid-template-columns:1fr;gap:28px}
  .jx__stage{top:calc(var(--hd) + 60px);z-index:3}
  .jx__frame{aspect-ratio:auto;height:330px}
  .jx__scene{padding:56px 18px 18px}
  .sc{transform:scale(.82);transform-origin:center}
  .jx__step{min-height:0;padding-bottom:28px}
  .jx__cols{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.jx__scene,.jx__scene *{animation-duration:.01s!important;animation-delay:0s!important;transition-delay:0s!important}}

/* ---------- settlement: VAN Q&A (questions + phone answers) ---------- */
.qa{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:center}
.qa__q{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.qa__q button{display:flex;align-items:center;gap:18px;width:100%;padding:16px 22px 16px 16px;border-radius:22px;text-align:left;background:transparent;transition:background .3s,transform .4s var(--ease)}
.qa__q button:hover{background:var(--mist)}
.qa__q button.is-on{background:var(--mist);transform:translateX(6px)}
.qa__q img{width:58px;height:58px;flex:none;filter:grayscale(1) opacity(.5);transition:filter .3s,transform .4s var(--ease)}
.qa__q button.is-on img,.qa__q button:hover img{filter:none}.qa__q button.is-on img{transform:rotate(-6deg) scale(1.06)}
.qa__q b{display:block;font-size:clamp(20px,1.9vw,26px);font-weight:600;color:var(--mute);transition:color .3s}
.qa__q button.is-on b{color:var(--ink)}
.qa__q small{display:block;margin-top:2px;font-size:14.5px;color:var(--mute)}
.qa__q button.is-on small{color:var(--blue);font-weight:600}
.qa__phone{position:relative;justify-self:center;width:100%;max-width:360px;aspect-ratio:9/16.2;padding:12px;border-radius:52px;background:#151a26;box-shadow:0 50px 80px -50px rgba(13,17,23,.6),inset 0 0 0 2px #2a3142}
.qa__notch{position:absolute;top:22px;left:50%;width:96px;height:26px;margin-left:-48px;border-radius:14px;background:#151a26;z-index:2}
.qa__app{position:relative;height:100%;border-radius:40px;background:#f5f7fb;overflow:hidden;padding:60px 22px 22px}
.qa__bar{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}.qa__bar b{font-size:16px;font-weight:600}.qa__bar span{font-size:12.5px;color:var(--mute)}
.qa__a{position:absolute;left:22px;right:22px;top:104px;bottom:22px;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .5s var(--ease);pointer-events:none}
.qa__a.is-on{opacity:1;transform:none;pointer-events:auto}
.qa__lbl{display:block;font-size:13.5px;color:var(--mute);font-weight:500}
.qa__big{display:block;margin:4px 0 2px;font-size:34px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qa__big--warn{color:#e5484d}
.qa__sub{display:block;font-size:12.5px;color:var(--mute);line-height:1.5}
.qa__rows,.qa__br,.qa__dep,.qa__miss{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.qa__rows li,.qa__br li{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;font-size:13.5px}
.qa__rows li span,.qa__br li span{color:var(--sub);font-weight:500}.qa__rows li b,.qa__br li b{font-size:13.5px;font-variant-numeric:tabular-nums}
.qa__rows li i,.qa__br li i{height:8px;border-radius:4px;background:#e8ecf4;position:relative;overflow:hidden}
.qa__rows li i::after,.qa__br li i::after{content:'';position:absolute;inset:0;width:0;border-radius:4px;background:var(--blue);transition:width .9s var(--ease)}
.qa__a.in li i::after{width:var(--w)}
.qa__a.in li:nth-child(2) i::after{transition-delay:.12s}.qa__a.in li:nth-child(3) i::after{transition-delay:.24s}
.qa__dep li,.qa__miss li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#fff;font-size:13.5px;opacity:0;transform:translateY(8px)}
.qa__a.in .qa__dep li,.qa__a.in .qa__miss li{animation:msgIn .45s var(--ease) forwards}
.qa__a.in li:nth-child(2){animation-delay:.1s!important}.qa__a.in li:nth-child(3){animation-delay:.2s!important}
.qa__dep li:first-child{background:var(--ink);color:#fff}.qa__dep li:first-child .qa__d small,.qa__dep li:first-child span{color:#aeb8d6}
.qa__d{font-weight:600;font-size:14px;line-height:1.1}.qa__d small{display:block;font-size:11px;color:var(--mute);font-weight:500}
.qa__dep span:not(.qa__d){color:var(--sub)}.qa__dep b,.qa__miss b{font-variant-numeric:tabular-nums}
.qa__note{margin-top:14px;font-size:12.5px;color:var(--mute);line-height:1.5}
.qa__miss li{grid-template-columns:44px 1fr auto auto}.qa__miss li span{color:var(--sub)}
.qa__miss em{font-style:normal;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:6px}
.qa__miss em.ok{background:#e8f8f1;color:#0f9a63}.qa__miss em.bad{background:#ffecec;color:#e5484d}
.qa__miss li.is-miss{box-shadow:inset 0 0 0 2px #ffcfd0}
.qa__miss li.is-done{box-shadow:none}.qa__miss li.is-done em{background:#e8f8f1;color:#0f9a63}
.qa__btn{margin-top:16px;width:100%;padding:13px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.qa__seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:#e8ecf4;margin-bottom:16px}
.qa__seg button{flex:1;padding:8px 0;border-radius:9px;font-size:13px;font-weight:600;color:var(--sub);cursor:pointer}.qa__seg button.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 6px -2px rgba(13,17,23,.15)}
.qa__chart{display:flex;align-items:flex-end;gap:5px;height:240px;margin-top:16px;padding:14px 10px 26px;border-radius:16px;background:#fff}
.qa__col{position:relative;flex:1;height:100%;display:flex;align-items:flex-end}
.qa__col i{display:block;width:100%;height:0;border-radius:6px 6px 3px 3px;background:#c9d4f7;transition:height .8s var(--ease) calc(var(--k)*40ms)}
.qa__col.is-max i{background:var(--blue)}
.qa__chart.in .qa__col i{height:var(--h)}
.qa__col span{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-size:10.5px;color:var(--mute);white-space:nowrap}

/* ---------- settlement: payment route (approval lane + settlement lane) ---------- */
.rt{padding:36px 40px 40px;border-radius:var(--r);background:var(--mist)}
.rt__top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.rt__replay{padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;cursor:pointer}
.rt__map{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto 92px 92px;row-gap:6px;margin-top:34px}
.rt__node{display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2}
.rt__ill{width:120px;height:120px;border-radius:32px;background:#fff;display:grid;place-items:center;box-shadow:0 22px 40px -30px rgba(13,17,23,.4)}
.rt__ill img{width:78px;height:78px;object-fit:contain}
.rt__node--mid .rt__ill img.m-pg{width:92px;height:auto}
.rt__node b{margin-top:14px;font-size:20px;font-weight:600}.rt__node small{font-size:14px;color:var(--mute)}
.rt__lane{grid-column:1/-1;position:relative;display:flex;align-items:center;margin:0 calc(100%/6)}
.rt__lane--a{grid-row:2;margin-top:18px}.rt__lane--b{grid-row:3}
.rt__track{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:repeating-linear-gradient(90deg,#c6cfe2 0 8px,transparent 8px 14px)}
.rt__tag{position:absolute;left:50%;top:auto;bottom:calc(50% + 12px);padding:4px 12px;border-radius:999px;background:#fff;transform:translateX(-50%);font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap}
.rt__tag em{margin-left:6px;font-style:normal;font-weight:600;color:var(--blue)}
.rt__lane--b .rt__tag em{color:#0f9a63}
.rt__tok{position:absolute;top:50%;left:0;width:44px;height:30px;margin:-15px 0 0 -22px;border-radius:6px;background:linear-gradient(135deg,#3b5bff,#1b2f9e);box-shadow:0 8px 14px -6px rgba(43,85,255,.6);opacity:0}
.rt__tok::after{content:'';position:absolute;left:6px;top:8px;width:10px;height:8px;border-radius:2px;background:#ffd166}
.rt.play .rt__tok{animation:tokGo 2.4s var(--ease) .3s forwards}
@keyframes tokGo{0%{left:0;opacity:0}8%{opacity:1}45%{left:100%;background:linear-gradient(135deg,#3b5bff,#1b2f9e)}55%{left:100%;background:#16b67a}92%{left:0;background:#16b67a;opacity:1}100%{left:0;opacity:0}}
.rt__coins{position:absolute;inset:0}
.rt__coins i{position:absolute;top:50%;left:100%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:600;color:#7a5200;background:radial-gradient(circle at 35% 30%,#ffe7a3,#f2b632);box-shadow:0 6px 12px -6px rgba(160,110,0,.6);opacity:0}
.rt.play .rt__coins.m-pg i{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:18px;animation:coinGo 1.6s var(--ease) 3.1s forwards}
.rt.play .rt__coins.m-van i{animation:coinGo 1.5s var(--ease) forwards}
.rt.play .rt__coins.m-van i:nth-child(1){animation-delay:3s}.rt.play .rt__coins.m-van i:nth-child(2){animation-delay:3.6s}.rt.play .rt__coins.m-van i:nth-child(3){animation-delay:4.2s}
@keyframes coinGo{0%{left:100%;opacity:0}12%{opacity:1}100%{left:0;opacity:1}}
.rt[data-mode="van"] .m-pg,.rt[data-mode="pg"] .m-van{display:none!important}
.rt__sum{margin-top:30px;padding-top:24px;border-top:1px solid #dde2ea}
.rt__sum b{display:block;font-size:20px;font-weight:600;margin-bottom:6px}.rt__sum p{font-size:18px;color:var(--sub);max-width:52em}
.blk-hd p b{color:var(--ink)}

/* ---------- settlement: VAN vs PG rows ---------- */
.vp{border-radius:var(--r);background:#fff;padding:12px 36px 20px}
.vp__hd,.vp__row{display:grid;grid-template-columns:200px 1fr 1fr;gap:28px;align-items:center}
.vp__hd{padding:18px 0 14px;border-bottom:1px solid var(--line)}
.vp__hd b{font-size:18px;font-weight:600;color:var(--sub)}.vp__hd b.pg{color:var(--blue)}
.vp__row{padding:18px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s var(--ease),background .25s}
.vp__row:last-child{border-bottom:0}
.vp.in .vp__row{opacity:1;transform:none}
.vp.in .vp__row:nth-child(3){transition-delay:.06s}.vp.in .vp__row:nth-child(4){transition-delay:.12s}.vp.in .vp__row:nth-child(5){transition-delay:.18s}.vp.in .vp__row:nth-child(6){transition-delay:.24s}.vp.in .vp__row:nth-child(7){transition-delay:.3s}.vp.in .vp__row:nth-child(8){transition-delay:.36s}
.vp__k{display:flex;align-items:center;gap:14px}.vp__k img{width:48px;height:48px;transition:transform .4s var(--ease)}.vp__k b{font-size:18px;font-weight:600}
.vp__row:hover .vp__k img{transform:rotate(-6deg) scale(1.08)}
.vp__row p{font-size:18px;color:var(--sub);line-height:1.5}
.vp__row p small{display:block;font-size:14px;color:var(--mute)}
.vp__row p.pg{position:relative;padding:12px 16px 12px 44px;border-radius:14px;background:#eef2ff;color:var(--ink);font-weight:600}
.vp__row p.pg small{color:#5b6b9a;font-weight:500}
.vp__row p.pg::before{content:'';position:absolute;left:16px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--blue)}
.vp__row p.pg::after{content:'';position:absolute;left:21px;top:50%;width:4px;height:7px;margin-top:-5px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
@media(max-width:1100px){
  .qa{grid-template-columns:1fr;gap:28px}.qa__phone{max-width:340px}
  .rt{padding:26px 18px 28px}.rt__ill{width:84px;height:84px;border-radius:24px}.rt__ill img{width:56px;height:56px}.rt__node b{font-size:16px}.rt__node small{font-size:14px}
  .rt__tag{font-size:14px}
  .vp{padding:8px 18px 14px}.vp__hd{display:none}.vp__row{grid-template-columns:1fr;gap:10px}
  .vp__row p:not(.pg)::before{content:'VAN  ';font-weight:600;color:var(--mute);font-size:14px}
}

/* ---------- service: PG method details beside the checkout demo ---------- */
.ck2__dets{position:relative;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.ck2__det{display:none;animation:boIn .45s var(--ease)}.ck2__det.is-on{display:block}
.ck2__det>p{font-size:18px;color:var(--sub);margin-bottom:12px}
.ck2__brands{display:flex;flex-wrap:wrap;gap:8px}
.ck2__brands span{padding:8px 14px;border-radius:12px;background:#fff;font-size:16px;font-weight:600;opacity:0;transform:translateY(6px);animation:msgIn .4s var(--ease) forwards}
.ck2__brands span:nth-child(2){animation-delay:.05s}.ck2__brands span:nth-child(3){animation-delay:.1s}.ck2__brands span:nth-child(4){animation-delay:.15s}.ck2__brands span:nth-child(5){animation-delay:.2s}.ck2__brands span:nth-child(6){animation-delay:.25s}.ck2__brands span:nth-child(7){animation-delay:.3s}
.ck2__chain{display:flex;align-items:center;flex-wrap:wrap;gap:6px 4px;margin:4px 0 10px}
.ck2__chain span{padding:8px 12px;border-radius:12px;background:#fff;font-size:14px;font-weight:600}
.ck2__chain span:nth-of-type(3){background:var(--blue);color:#fff}
.ck2__chain i{width:22px;height:2px;background:#c6cfe2;position:relative}.ck2__chain i::after{content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:2px solid #c6cfe2;border-right:2px solid #c6cfe2;transform:rotate(45deg)}
.ck2__small{display:block;font-size:14px;color:var(--mute)}
.ck2__more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;color:var(--blue)}

/* ---------- service: global — pick where the customer is ---------- */
.gw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.gw__map{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fff 0,#eef2fb 62%,transparent 63%)}
.gw__globe{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;animation:spinY 24s linear infinite}
@keyframes spinY{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.gw__pin{position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#c9d1e6;border:3px solid #fff;box-shadow:0 4px 10px -4px rgba(13,17,23,.4);transition:background .3s,transform .4s var(--ease)}
.gw__pin::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--blue);opacity:0}
.gw[data-r="0"] .gw__pin[data-r="0"],.gw[data-r="1"] .gw__pin[data-r="1"],.gw[data-r="2"] .gw__pin[data-r="2"],.gw[data-r="3"] .gw__pin[data-r="3"]{background:var(--blue);transform:scale(1.35)}
.gw[data-r="0"] .gw__pin[data-r="0"]::after,.gw[data-r="1"] .gw__pin[data-r="1"]::after,.gw[data-r="2"] .gw__pin[data-r="2"]::after,.gw[data-r="3"] .gw__pin[data-r="3"]::after{animation:pinPulse 1.6s ease-out infinite}
@keyframes pinPulse{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.gw__home{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-160%);padding:3px 8px;border-radius:6px;background:var(--ink);color:#fff;font-size:14px;font-weight:600;letter-spacing:.06em}
.gw__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.gw__chips button{padding:12px 20px;border-radius:999px;background:#fff;font-size:16px;font-weight:600;color:var(--sub);cursor:pointer;transition:background .25s,color .25s}
.gw__chips button.is-on{background:var(--ink);color:#fff}
.gw__card{padding:30px 32px;border-radius:var(--r);background:#fff}
.gw__pay{display:none}.gw__pay small{font-size:14px;color:var(--mute);font-weight:500}
.gw[data-r="0"] .gw__pay[data-r="0"],.gw[data-r="1"] .gw__pay[data-r="1"],.gw[data-r="2"] .gw__pay[data-r="2"],.gw[data-r="3"] .gw__pay[data-r="3"]{display:block;animation:boIn .45s var(--ease)}
.gw__m{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 12px}
.gw__m b{padding:12px 18px;border-radius:14px;background:#eef2ff;color:var(--blue);font-size:clamp(18px,1.8vw,24px);font-weight:600}
.gw__pay p{font-size:18px;color:var(--sub)}
.gw__steps{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:g}
.gw__steps li{position:relative;counter-increment:g}
.gw__steps li::before{content:counter(g);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mist);font-size:14px;font-weight:600;color:var(--blue);margin-bottom:8px;transition:background .3s,color .3s}
.gw__steps li.is-on::before{background:var(--blue);color:#fff}
.gw__steps li:not(:last-child)::after{content:'';position:absolute;left:36px;right:-6px;top:13px;height:2px;background:linear-gradient(90deg,var(--blue) var(--gwf,0%),#e3e8f2 var(--gwf,0%));transition:--gwf .6s}
.gw__steps li.is-done::after{--gwf:100%}
.gw__steps b{display:block;font-size:16px;font-weight:600}.gw__steps span{display:block;font-size:14px;color:var(--mute);line-height:1.45;margin-top:2px}
@property --gwf{syntax:'<percentage>';inherits:false;initial-value:0%}
.gw__svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.gw__svc>div{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:20px 22px;border-radius:22px;background:#fff}
.gw__svc img{grid-row:1/3;width:56px;height:56px}.gw__svc b{font-size:18px;font-weight:600}.gw__svc span{font-size:14px;color:var(--mute)}

/* ---------- service: support scenarios ---------- */
.sup{padding:34px 40px 36px;border-radius:var(--r);background:var(--mist)}
.sup__flow{position:relative;display:none;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.sup[data-s="0"] .sup__flow[data-s="0"],.sup[data-s="1"] .sup__flow[data-s="1"]{display:grid}
.sup__line{position:absolute;left:12.5%;right:12.5%;top:55px;height:3px;border-radius:2px;background:#dbe1ec;z-index:0}
.sup__line i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--k,0)*100%/3);background:var(--blue);border-radius:2px;transition:width .7s var(--ease)}
.sup__st{position:relative;z-index:1;text-align:center;opacity:.45;transition:opacity .4s}
.sup__st.is-on,.sup__st.is-done{opacity:1}
.sup__ill{width:112px;height:112px;margin:0 auto 16px;border-radius:30px;background:#fff;display:grid;place-items:center;box-shadow:0 18px 34px -26px rgba(13,17,23,.4);transition:transform .5s var(--ease),box-shadow .4s}
.sup__ill img{width:70px;height:70px}
.sup__st.is-on .sup__ill{transform:translateY(-8px) scale(1.06);box-shadow:0 0 0 3px var(--blue),0 26px 40px -26px rgba(43,85,255,.6)}
.sup__st b{display:block;font-size:20px;font-weight:600}.sup__st span{display:block;margin-top:4px;font-size:16px;color:var(--sub);line-height:1.5}
.sup__call{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px;padding-top:24px;border-top:1px solid #dde2ea}
.sup__call small{display:block;font-size:14px;color:var(--mute)}.sup__call b{font-size:28px;font-weight:600;margin-right:12px}.sup__call span{font-size:16px;color:var(--sub)}
.sup__promise{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sup__promise li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:18px 20px;border-radius:20px;border:1px solid var(--line)}
.sup__promise img{grid-row:1/3;width:52px;height:52px;transition:transform .4s var(--ease)}.sup__promise li:hover img{transform:rotate(-8deg) scale(1.08)}
.sup__promise b{font-size:18px;font-weight:600}.sup__promise span{font-size:14px;color:var(--mute)}
@media(max-width:1100px){
  .gw{grid-template-columns:1fr;gap:20px}.gw__map{max-width:340px}.gw__steps{grid-template-columns:1fr 1fr}.gw__svc{grid-template-columns:1fr}
  .sup{padding:24px 18px}.sup__flow{grid-template-columns:1fr 1fr;row-gap:28px}.sup__line{display:none}.sup__ill{width:84px;height:84px}.sup__ill img{width:54px;height:54px}
  .sup__promise{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.sup__promise{grid-template-columns:1fr}.gw__card{padding:22px 20px}}

/* ---------- about: illustrated map ---------- */
.mapx{border-radius:var(--r);overflow:hidden;background:#eef2f9}
.mapx__svg{display:block;width:100%;height:auto;font-family:var(--f)}
.mx-bg{fill:#eef2f9}
.mx-blocks rect{fill:#fff;opacity:0;transition:opacity .6s}
.mx-blocks .mx-park{fill:#dff3e8}
.mapx.in .mx-blocks rect{opacity:1}
.mx-r{fill:none;stroke:#d5dceb;stroke-width:16;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.4s var(--ease)}
.mx-r--main{stroke-width:34;stroke:#c9d2e4}
.mapx.in .mx-r{stroke-dashoffset:0}
.mx-rl text{font-size:14px;fill:#8a93a6;font-weight:500;opacity:0;transition:opacity .5s .9s}.mapx.in .mx-rl text{opacity:1}
.mx-lot{fill:#e9eeff;stroke:var(--blue);stroke-width:2;stroke-dasharray:6 5}
.mx-bld .b1{fill:var(--blue)}.mx-bld .b2{fill:#6f8cff}.mx-win rect{fill:#dfe6ff}
.mx-bld{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .7s cubic-bezier(.3,1.4,.5,1) .7s}
.mapx.in .mx-bld{transform:none}
.mx-hq__t{font-size:14px;font-weight:600;fill:var(--ink)}
.mx-route path{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 7;opacity:0}
.mapx.walk .mx-route path{opacity:1;animation:mxDash .6s linear infinite}
@keyframes mxDash{to{stroke-dashoffset:-11}}
.mx-walker{opacity:0}
.mapx.walk .mx-walker{opacity:1}
.mx-exit rect{fill:#ffc53d}.mx-exit text{font-size:14px;font-weight:600;fill:var(--ink);text-anchor:middle}
.mx-exit__t{font-size:14px;font-weight:600;fill:#e6186c}
.mx-stn{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(-14px);transition:opacity .4s .5s,transform .6s cubic-bezier(.3,1.5,.5,1) .5s}
.mapx.in .mx-stn{opacity:1;transform:none}
.mx-stn rect{fill:#e6186c}.mx-stn circle{fill:#fff}.mx-stn .n{font-size:18px;font-weight:600;fill:#e6186c;text-anchor:middle}.mx-stn .t{font-size:20px;font-weight:600;fill:#fff}
.mx-pin{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(-40px)}
.mx-pin path{fill:var(--blue);filter:drop-shadow(0 6px 6px rgba(43,85,255,.35))}.mx-pin circle{fill:#fff}
.mapx.in .mx-pin{animation:pinDrop .7s cubic-bezier(.3,1.5,.5,1) 1.2s forwards,pinBob 2.4s ease-in-out 2.2s infinite}
@keyframes pinDrop{to{opacity:1;transform:none}}@keyframes pinBob{0%,100%{transform:none}50%{transform:translateY(-5px)}}
.mx-lm g{opacity:0;transform:translateY(6px);transition:opacity .4s calc(1s + var(--k)*.12s),transform .5s var(--ease) calc(1s + var(--k)*.12s);cursor:default}
.mapx.in .mx-lm g{opacity:1;transform:none}
.mx-lm circle{fill:#5b6478;transition:fill .2s,r .2s}.mx-lm text{font-size:14px;font-weight:500;fill:#3d4557;transition:fill .2s}
.mx-lm g:hover circle{fill:var(--blue);r:8}.mx-lm g:hover text{fill:var(--blue);font-weight:600}
.mapx__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 24px;background:#fff;border-top:1px solid var(--line)}
.mapx__legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:15px;font-weight:500;color:var(--sub)}
.mapx__legend i{width:1px;height:14px;background:var(--line);margin:0 8px}
.lg-stn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#e6186c;color:#fff;font-size:12px;font-weight:600}
.lg-pin{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--blue)}
@media(max-width:700px){.mapx{margin-inline:-20px;border-radius:0}.mx-lm text{font-size:16px}.mapx__bar{padding:14px 20px}}

/* ---------- home: VAN vs PG mini money-flow diagrams ---------- */
.vsd{display:block;width:100%;height:auto;margin:-6px 0 18px;border-radius:20px;background:#f3f6fc}
.vs__col--pg .vsd{background:rgba(255,255,255,.08)}
.vsd-l{fill:none;stroke:#cdd5e4;stroke-width:2.5;stroke-dasharray:5 6}
.vs__col--pg .vsd-l{stroke:rgba(255,255,255,.3)}
.vsd-card text{font-size:14px;font-weight:600;fill:#fff}
.vsd-d text{font-size:14px;font-weight:600;fill:var(--sub);opacity:0;transition:opacity .3s}
.vsd-d text.on{opacity:1}
.vsd-d--one rect{fill:#16b67a;opacity:0;transition:opacity .3s}.vsd-d--one text{fill:#fff;text-anchor:middle;font-size:14px}
.vsd-d--one.on rect,.vsd-d--one.on text{opacity:1}
.vsd-hub{fill:#fff;filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}
.vsd-coin{opacity:0}.vsd-coin.on{opacity:1}
.vsd-coin circle{fill:#f2b632;stroke:#fff;stroke-width:2}.vsd-coin text{font-size:14px;font-weight:600;fill:#7a5200;text-anchor:middle}
.vsd-coin--big text{font-size:16px}
.vs__col{transition:transform .4s var(--ease)}.vs__col:hover{transform:translateY(-4px)}



/* ---------- platform: StarPay app flow ---------- */
.blk-hd--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.pf{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:64px;align-items:center}
.pf__steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pf__steps button{display:flex;align-items:center;gap:16px;width:100%;padding:14px 18px 14px 14px;border-radius:20px;text-align:left;cursor:pointer;transition:background .3s,transform .4s var(--ease)}
.pf__steps button:hover{background:var(--mist)}.pf__steps button.is-on{background:var(--mist);transform:translateX(6px)}
.pf__steps img{width:52px;height:52px;flex:none;filter:grayscale(1) opacity(.45);transition:filter .3s,transform .4s var(--ease)}
.pf__steps button.is-on img{filter:none;transform:rotate(-6deg) scale(1.06)}
.pf__steps small{display:block;font-size:12.5px;font-weight:600;color:var(--blue)}
.pf__steps b{display:block;font-size:clamp(19px,1.7vw,23px);font-weight:600;color:var(--mute);transition:color .3s}.pf__steps button.is-on b{color:var(--ink)}
.pf__steps em{display:block;font-style:normal;font-size:14.5px;color:var(--mute)}
.pf__phone{position:relative;justify-self:center;width:100%;max-width:330px;aspect-ratio:9/17;padding:11px;border-radius:48px;background:#151a26;box-shadow:0 50px 80px -50px rgba(13,17,23,.6),inset 0 0 0 2px #2a3142}
.pf__notch{position:absolute;top:20px;left:50%;width:88px;height:24px;margin-left:-44px;border-radius:12px;background:#151a26;z-index:2}
.pf__app{position:relative;height:100%;border-radius:38px;background:#f6f4ff;overflow:hidden;padding:56px 22px 22px}
.pf__bar{display:flex;justify-content:space-between;align-items:baseline}.pf__bar b{font-size:16px;font-weight:600;color:#5b3df5;letter-spacing:.04em}.pf__bar span{font-size:14px;color:var(--mute)}
.pf__s{position:absolute;left:22px;right:22px;top:100px;bottom:26px;display:flex;flex-direction:column;opacity:0;transform:translateX(24px);transition:opacity .35s,transform .5s var(--ease);pointer-events:none}
.pf[data-i="0"] .pf__s[data-i="0"],.pf[data-i="1"] .pf__s[data-i="1"],.pf[data-i="2"] .pf__s[data-i="2"],.pf[data-i="3"] .pf__s[data-i="3"],.pf[data-i="4"] .pf__s[data-i="4"]{opacity:1;transform:none}
.pf__s h5{font-size:22px;font-weight:600;line-height:1.35;margin-bottom:22px}
.pf__s small{font-size:13px;color:var(--mute);font-weight:500}
.pf__in{height:48px;border-radius:14px;background:#fff;margin-bottom:10px;padding:0 16px;display:flex;align-items:center}.pf__in i{display:block;height:8px;width:0;border-radius:4px;background:#d9d4f5}
.pf.go .pf__s[data-i="0"] .pf__in i{animation:fillW .6s var(--ease) forwards}.pf.go .pf__s[data-i="0"] .pf__in:nth-of-type(2) i{animation-delay:.35s}.pf.go .pf__s[data-i="0"] .pf__in:nth-of-type(3) i{animation-delay:.7s}
@keyframes fillW{to{width:60%}}
.pf__btn{margin-top:auto;padding:15px;border-radius:16px;background:#5b3df5;color:#fff;text-align:center;font-size:16px;font-weight:600}
.pf__amts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 16px}.pf__amts span{padding:14px 0;border-radius:14px;background:#fff;text-align:center;font-weight:600;font-size:16px;transition:background .3s,color .3s}
.pf.go .pf__amts .on{background:#5b3df5;color:#fff;transition-delay:.4s}
.pf__acct{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:14px;background:#fff;font-weight:600;font-size:16px}.pf__acct i{width:26px;height:26px;border-radius:8px;background:#e8e3ff}.pf__acct b{margin-left:auto;color:#5b3df5}
.pf__spin{width:76px;height:76px;margin:30px auto 12px;border-radius:50%;border:6px solid #e3defb;border-top-color:#5b3df5;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pf__wait{text-align:center;display:block}
.pf__chk{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px}.pf__chk li{display:flex;justify-content:space-between;padding:14px 16px;border-radius:14px;background:#fff;font-size:16px}.pf__chk span{color:var(--sub)}
.pf__st{position:relative;display:inline-block;min-width:70px;text-align:right}.pf__st em{font-style:normal;transition:opacity .3s}.pf__st .b{position:absolute;right:0;color:#0f9a63;opacity:0}
.pf.go .pf__s[data-i="2"] .pf__st .a{opacity:0;transition-delay:1.4s}.pf.go .pf__s[data-i="2"] .pf__st .b{opacity:1;transition-delay:1.4s}
.pf.go .pf__s[data-i="2"] .pf__spin{animation:spin 1s linear 2,stopSpin .01s 1.4s forwards}@keyframes stopSpin{to{border-color:#16b67a}}
.pf__pts{display:block;margin-top:8px;font-size:46px;font-weight:600;color:#5b3df5;font-variant-numeric:tabular-nums}
.pf__coin{width:110px;height:110px;margin:26px auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b8,#f2b632);box-shadow:0 20px 30px -18px rgba(160,110,0,.6);position:relative}
.pf__coin::after{content:'P';position:absolute;inset:0;display:grid;place-items:center;font-size:46px;font-weight:600;color:#a06f00}
.pf.go .pf__s[data-i="3"] .pf__coin{animation:coinPop .8s cubic-bezier(.3,1.6,.5,1)}@keyframes coinPop{from{transform:scale(.2) rotateY(180deg)}}
.pf__bal{text-align:center;font-size:16px;color:var(--sub)}.pf__bal b{color:var(--ink)}
.pf__gift{position:relative;padding:22px;border-radius:22px;background:linear-gradient(140deg,#8a6cff,#5b3df5);color:#fff;box-shadow:0 26px 40px -26px rgba(91,61,245,.7)}
.pf__gc{display:inline-block;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.2);font-size:14px;font-weight:600;margin-bottom:34px}
.pf__gift b{display:block;font-size:20px}.pf__gift small{color:rgba(255,255,255,.8)}
.pf.go .pf__s[data-i="4"] .pf__gift{animation:giftFly 1s var(--ease) 1.2s forwards}@keyframes giftFly{to{transform:translate(40px,-30px) rotate(8deg) scale(.6);opacity:0}}
.pf__s[data-i="4"] .pf__btn{margin-top:22px}
.pf__sent{align-self:center;margin-top:18px;padding:8px 16px;border:3px solid #16b67a;border-radius:12px;color:#16b67a;font-size:18px;font-weight:600;transform:rotate(-8deg) scale(1.6);opacity:0}
.pf.go .pf__s[data-i="4"] .pf__sent{animation:stamp .35s cubic-bezier(.3,1.6,.5,1) 2s forwards}
.pf__more{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:40px}
.pf__q{border-radius:20px;background:var(--mist);padding:6px 20px}
.pf__q summary{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer;list-style:none}.pf__q summary::-webkit-details-marker{display:none}
.pf__q summary img{width:40px;height:40px}.pf__q summary b{font-size:18px}
.pf__q summary::after{content:'+';margin-left:auto;font-size:22px;color:var(--mute);transition:transform .3s}.pf__q[open] summary::after{transform:rotate(45deg)}
.pf__chain{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;padding:4px 0 18px}
.pf__chain span{padding:8px 12px;border-radius:12px;background:#fff;font-size:14px;font-weight:600;opacity:0;transform:translateY(6px)}
.pf__q[open] .pf__chain span{animation:msgIn .4s var(--ease) forwards}.pf__q[open] .pf__chain span:nth-of-type(2){animation-delay:.15s}.pf__q[open] .pf__chain span:nth-of-type(3){animation-delay:.3s}.pf__q[open] .pf__chain span:nth-of-type(4){animation-delay:.45s}
.pf__chain i{width:18px;height:2px;background:#c6cfe2}

/* ---------- platform: StarTV support demo ---------- */
.tvx{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px}
.tvx__live,.tvx__rank{border-radius:var(--r);background:#fff;padding:20px}
.tvx__screen{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#3b2a8f,#7a5cff 45%,#ff6b9a)}
.tvx__badge{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:6px;background:#ff2d55;color:#fff;font-size:12px;font-weight:600;letter-spacing:.06em}
.tvx__src{position:absolute;right:14px;top:14px;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.35);color:#fff;font-size:12px;font-weight:600}
.tvx__play{position:absolute;left:50%;top:46%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:rgba(255,255,255,.9)}
.tvx__play::after{content:'';position:absolute;left:30px;top:22px;border-left:22px solid #7a5cff;border-top:15px solid transparent;border-bottom:15px solid transparent}
.tvx__who{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;color:#fff}.tvx__who i{width:38px;height:38px;border-radius:50%;background:#ffd166;border:2px solid #fff}.tvx__who b{display:block;font-size:15px}.tvx__who small{font-size:12px;opacity:.85}
.tvx__fly{position:absolute;inset:0;pointer-events:none}
.tvx__fly span{position:absolute;bottom:-20px;font-size:26px;color:#ffd166;text-shadow:0 2px 8px rgba(0,0,0,.25);animation:starUp 1.4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes starUp{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-240px) scale(1.2) rotate(30deg);opacity:0}}
.tvx__ctl{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.tvx__bal{margin-right:auto}.tvx__bal small{display:block;font-size:12.5px;color:var(--mute)}.tvx__bal b{font-size:24px;font-weight:600;color:#e0a100}.tvx__bal b::before{content:'★ '}
.tvx__btn{padding:13px 20px;border-radius:14px;background:#fff4d6;color:#8a5a00;font-size:15px;font-weight:600;cursor:pointer;transition:transform .2s}.tvx__btn:active{transform:scale(.95)}
.tvx__btn--b{background:#ffc53d;color:#5a3b00}.tvx__btn:disabled{opacity:.4;cursor:not-allowed}
.tvx__note{margin-top:10px;font-size:13.5px;color:var(--mute)}
.tvx__rank h4{font-size:18px;font-weight:600;margin-bottom:12px}.tvx__rank h4 small{font-size:13px;color:var(--mute);font-weight:500;margin-left:6px}
.tvx__rank ol{list-style:none;margin:0;padding:0;position:relative}
.tvx__rank li{display:grid;grid-template-columns:28px 34px 1fr auto;align-items:center;gap:10px;padding:12px 10px;border-radius:14px;transition:transform .5s var(--ease),background .3s}
.tvx__rank li.me{background:#f3efff}
.tvx__rank .r{font-weight:600;color:var(--mute);text-align:center}.tvx__rank li:first-child .r{color:#e0a100}
.tvx__rank i{width:34px;height:34px;border-radius:50%;background:var(--c)}.tvx__rank b{font-size:15.5px}.tvx__rank em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}.tvx__rank em::before{content:'★ ';color:#e0a100}
.tvx__rank li.bump em{animation:bump .4s}@keyframes bump{50%{transform:scale(1.25)}}
.tvx__earn{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--sub)}.tvx__earn b{float:right;color:var(--ink);font-size:17px}
/* support → payout pipeline */
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:28px 24px 30px;border-radius:var(--r);background:#fff}
.pipe__st{position:relative;z-index:1;text-align:center}.pipe__st img{width:72px;height:72px;margin:0 auto 10px;display:block;background:var(--mist);border-radius:22px;padding:8px;transition:transform .4s var(--ease),box-shadow .3s}
.pipe__st b{display:block;font-size:18px;font-weight:600}.pipe__st span{display:block;font-size:14px;color:var(--sub);line-height:1.5;margin-top:2px}
.pipe__st.is-on img{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 3px var(--blue)}
.pipe__track{position:absolute;left:12.5%;right:12.5%;top:64px;height:3px;background:repeating-linear-gradient(90deg,#d5dbe7 0 7px,transparent 7px 12px)}
.pipe__tok{position:absolute;top:50%;left:calc(var(--k,0)*100%/3);width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#ffc53d;display:grid;place-items:center;font-style:normal;font-weight:600;color:#5a3b00;transition:left .9s var(--ease),background .3s;z-index:2}
.pipe__tok .w{display:none}.pipe.paid .pipe__tok{background:#16b67a;color:#fff}.pipe.paid .pipe__tok .s{display:none}.pipe.paid .pipe__tok .w{display:inline}
.pipe__ret{margin-top:12px;font-size:16px;color:var(--sub)}.pipe__ret b{margin-right:8px;padding:3px 10px;border-radius:8px;background:#ffecec;color:#e5484d;font-size:14px}
@media(max-width:1100px){.pf{grid-template-columns:1fr;gap:28px}.pf__phone{max-width:300px}.pf__more{grid-template-columns:1fr}.tvx{grid-template-columns:1fr}.pipe{grid-template-columns:1fr 1fr;row-gap:24px}.pipe__track{display:none}}
.vsd-day rect{fill:var(--ink)}.vsd-day text{fill:#fff;font-size:14px;font-weight:600;text-anchor:middle;font-variant-numeric:tabular-nums}
.vs__col--pg .vsd-day rect{fill:#fff}.vs__col--pg .vsd-day text{fill:var(--blue)}
.vsd-day.tick rect{animation:dayTick .35s}@keyframes dayTick{50%{transform:scale(1.08)}}
.vsd-day{transform-box:fill-box;transform-origin:center}
.vsd-d text{font-size:14px}
.intro__gl{position:absolute;inset:0;width:100%;height:100%;display:block;background:#eef3ff}

/* VAN showcase: calm float on the active terminal */
.show__sticky[data-show="0"] .s0,.show__sticky[data-show="1"] .s1,.show__sticky[data-show="2"] .s2{animation:termFloat 5s ease-in-out 1s infinite}
@keyframes termFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-53%)}}
@media(prefers-reduced-motion:reduce){.show__sticky img{animation:none!important}}

/* ===== service ticker (tk) ===== */
.tk{margin-top:100px;border-block:1px solid var(--line);overflow:hidden;position:relative;--sk:0deg}
.tk::before,.tk::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.tk::before{left:0;background:linear-gradient(90deg,var(--bg,#fff),transparent)}.tk::after{right:0;background:linear-gradient(-90deg,var(--bg,#fff),transparent)}
.tk__row{padding-block:22px;overflow:hidden}
.tk__track{display:flex;align-items:center;gap:34px;width:max-content;will-change:transform}
.tk__it{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);transform:skewX(var(--sk));transition:opacity .35s,color .25s}
.tk__ic{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--tkb,#eef2ff);flex:none;transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .3s}
.tk__ic img{width:48px;height:48px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.tk__it[data-c=mint]{--tkb:#e3f8f1;--tkc:#0f9f78}.tk__it[data-c=sky]{--tkb:#e2f3ff;--tkc:#0b84d9}.tk__it[data-c=gold]{--tkb:#fff4d9;--tkc:#d98a00}.tk__it[data-c=coral]{--tkb:#ffe9e4;--tkc:#e5533a}.tk__it[data-c=blue]{--tkc:var(--blue)}
.tk__t{font-size:32px;font-weight:600;letter-spacing:-.03em;white-space:nowrap;position:relative}
.tk__t::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:2px;background:var(--tkc);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.tk__star{width:26px;height:26px;flex:none;transform:rotate(var(--rot,0deg))}
.tk__star path{fill:var(--blue)}.tk__star circle{fill:#ffb21e}
.tk.is-hover .tk__row:not(.tk__row--sub) .tk__it{opacity:.35}
.tk .tk__it.is-on{opacity:1!important;color:var(--tkc)}
.tk__it.is-on .tk__ic{transform:translateY(-6px) rotate(-6deg) scale(1.08)}
.tk__it.is-on .tk__ic img{transform:scale(1.12) rotate(6deg)}
.tk__it.is-on .tk__t::after{transform:scaleX(1)}
.tk__it.is-pop .tk__ic{animation:tkPop .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes tkPop{40%{transform:translateY(-10px) scale(1.12)}}
.tk__row--sub{padding-block:16px;border-top:1px dashed var(--line)}
.tk__row--sub .tk__track{gap:26px}
.tk2__t{font-size:20px;font-weight:600;color:var(--muted,#6b7280);white-space:nowrap;letter-spacing:-.02em}
.tk2__d{width:6px;height:6px;border-radius:50%;background:var(--line);flex:none}
@media (max-width:760px){.tk{margin-top:64px}.tk::before,.tk::after{width:40px}.tk__row{padding-block:16px}.tk__track{gap:22px}.tk__ic{width:44px;height:44px;border-radius:13px}.tk__ic img{width:34px;height:34px}.tk__t{font-size:22px}.tk__it{gap:11px}.tk__star{width:18px;height:18px}.tk2__t{font-size:16px}.tk__row--sub{padding-block:12px}}
/* ===== prepaid (pq) ===== */
.pq-w{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.pq-h{font-size:clamp(36px,4.4vw,64px);font-weight:600;line-height:1.18;letter-spacing:-.04em}
.pq-acts{display:flex;gap:12px;margin-top:40px}
.pq-acts button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 10px 18px;border-radius:22px;background:var(--mist);border:2px solid transparent;transition:transform .35s var(--ease),background .25s,border-color .25s}
.pq-acts img{width:64px;height:64px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.pq-acts b{font-size:22px;font-weight:600}.pq-acts small{font-size:14px;color:var(--mute);font-weight:600;font-variant-numeric:tabular-nums}
.pq-acts button:hover{transform:translateY(-4px)}
.pq-acts button.is-on{background:#fff;border-color:var(--blue);box-shadow:0 14px 34px rgba(23,71,255,.14)}
.pq-acts button.is-on img{transform:scale(1.1) rotate(-6deg)}.pq-acts button.is-on small{color:var(--blue)}
.pq-trust{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}
.pq-trust li{display:flex;align-items:center;gap:10px}.pq-trust img{width:44px;height:44px}
.pq-trust span{display:flex;flex-direction:column;line-height:1.35}.pq-trust b{font-size:16px}.pq-trust small{font-size:14px;color:var(--mute)}
.pq-w__vis{position:relative;display:grid;place-items:center;padding:20px 0}
.pq-ph{width:min(330px,100%);border-radius:40px;background:#fff;border:10px solid var(--ink);padding:22px 22px 26px;box-shadow:0 40px 80px rgba(13,17,23,.16);min-height:520px;display:flex;flex-direction:column}
.pq-ph__top img{height:22px}
.pq-ph>small{margin-top:28px;font-size:14px;color:var(--mute);font-weight:600}
.pq-bal{font-size:40px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .3s}
.pq-bal.up{color:var(--blue)}.pq-bal.down{color:#e5533a}
.pq-ph__card{margin-top:16px;height:118px;border-radius:16px;background:linear-gradient(135deg,var(--blue),#5a7bff);position:relative;color:#fff;padding:16px 18px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.pq-ph__card i{display:block;width:34px;height:24px;border-radius:5px;background:#ffd36e}
.pq-ph__card span{position:absolute;right:18px;bottom:14px;font-weight:600;letter-spacing:.08em;font-size:14px}
.pq-w[data-s="1"] .pq-ph__card{transform:translateY(-6px) rotate(-3deg)}
.pq-log{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.pq-log li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;background:var(--mist);font-size:15px;font-weight:600;animation:pqIn .45s var(--ease) both}
.pq-log li b{font-variant-numeric:tabular-nums}.pq-log li.p b{color:var(--blue)}.pq-log li.m b{color:#e5533a}.pq-log li.r b{color:var(--green)}
@keyframes pqIn{from{opacity:0;transform:translateY(-10px)}}
.pq-fly{position:absolute;left:50%;top:26%;z-index:3;font-size:28px;font-weight:600;pointer-events:none;opacity:0}
.pq-fly.go{animation:pqFly 1s var(--ease)}
@keyframes pqFly{0%{opacity:0;transform:translate(-50%,40px) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-70px) scale(1.1)}}

.pq-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pq-n{background:#fff;border-radius:var(--r);padding:32px 32px 28px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.pq-n:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(13,17,23,.08)}
.pq-n small{font-size:16px;font-weight:600;color:var(--sub)}
.pq-n>b{font-size:clamp(48px,5vw,72px);font-weight:600;letter-spacing:-.04em;color:var(--blue);line-height:1.15;margin:8px 0 22px;font-variant-numeric:tabular-nums}
.pq-n__bars{display:flex;align-items:flex-end;gap:14px;height:110px;margin-top:auto}
.pq-n__bars i{flex:1;height:var(--h);border-radius:12px 12px 4px 4px;background:#dbe3ff;position:relative;transform-origin:bottom;transform:scaleY(.05);transition:transform 1s var(--ease)}
.pq-n__bars i.on{background:var(--blue)}
.pq-n__bars em{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-style:normal;font-size:14px;font-weight:600;color:var(--navy)}.pq-n__bars i.on em{color:#fff}
.pq-n__line{width:100%;height:110px;margin-top:auto;overflow:visible}
.pq-n__line path{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.3s var(--ease)}
.pq-n__line circle{fill:var(--gold);opacity:0;transition:opacity .3s 1.1s}
.pq-n__cmp{display:flex;flex-direction:column;gap:12px;margin-top:auto;height:110px;justify-content:center}
.pq-n__cmp span{display:block;position:relative;height:40px;border-radius:12px;background:var(--mist);overflow:hidden}
.pq-n__cmp i{position:absolute;inset:0 auto 0 0;width:var(--w);background:#c9d3ee;transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.pq-n__cmp .on i{background:var(--blue)}
.pq-n__cmp em{position:relative;font-style:normal;font-weight:600;font-size:14px;line-height:40px;padding-left:14px;color:var(--navy)}.pq-n__cmp .on em{color:#fff}
.pq-num.in .pq-n__bars i,.pq-num.in .pq-n__cmp i{transform:none}.pq-num.in .pq-n__line path{stroke-dashoffset:0}.pq-num.in .pq-n__line circle{opacity:1}
.pq-num.in .pq-n__bars i.on,.pq-num.in .pq-n__cmp .on i{transition-delay:.25s}

.pq-tabs{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.pq-tabs button{display:flex;align-items:center;gap:10px;padding:10px 22px 10px 12px;border-radius:999px;background:var(--mist);font-size:18px;font-weight:600;color:var(--sub);transition:background .25s,color .25s,transform .25s}
.pq-tabs img{width:40px;height:40px;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.pq-tabs button:hover{transform:translateY(-2px)}
.pq-tabs button.is-on{background:var(--ink);color:#fff}.pq-tabs button.is-on img{transform:rotate(-10deg) scale(1.12)}
.pq-pan{display:grid}
.pq-p{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s,transform .5s var(--ease),visibility 0s .4s}
.pq-p.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .5s var(--ease)}
.pq-vis{border-radius:var(--r);background:var(--mist);min-height:440px;position:relative;overflow:hidden}
.pq-txt h3{font-size:clamp(28px,3vw,42px);font-weight:600;line-height:1.25;letter-spacing:-.035em}
.pq-pts{list-style:none;margin-top:28px;display:flex;flex-direction:column;gap:12px}
.pq-pts li{font-size:20px;color:var(--sub);padding-left:34px;position:relative}
.pq-pts li::before{content:"";position:absolute;left:0;top:5px;width:22px;height:22px;border-radius:50%;background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231747ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pq-pts b{color:var(--ink)}
.pq-soon{display:inline-block;margin-top:26px;font-size:14px;font-weight:600;color:var(--blue);border:1.5px solid currentColor;border-radius:8px;padding:5px 12px}

.pq-game{display:grid;place-items:center;padding:30px}
.pq-gs{width:250px;height:330px;border-radius:30px;background:#151a33;border:8px solid #0b0f22;position:relative;box-shadow:0 30px 60px rgba(13,17,23,.25)}
.pq-g{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;text-align:center;padding:24px;opacity:0;transform:scale(.94);transition:opacity .4s,transform .4s}
.pq-game[data-i="0"] .pq-g[data-i="0"],.pq-game[data-i="1"] .pq-g[data-i="1"],.pq-game[data-i="2"] .pq-g[data-i="2"],.pq-game[data-i="3"] .pq-g[data-i="3"]{opacity:1;transform:none}
.pq-g small{font-size:14px;color:#9aa6d6;font-weight:600}.pq-g>b{font-size:28px;font-weight:600}
.pq-btn{display:inline-block;padding:10px 22px;border-radius:12px;background:var(--blue);color:#fff;font-weight:600;font-size:16px}
.pq-tag{font-size:14px;font-weight:600;color:#7ef0b9;background:rgba(126,240,185,.12);padding:4px 10px;border-radius:6px}
.pq-sword{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.07);border-radius:14px;padding:12px 16px;text-align:left}
.pq-sword i{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#ffd36e,#ff9d2e);flex:none}
.pq-sword b{display:block;font-size:16px}
.pq-ok{width:72px;height:72px;border-radius:50%;background:var(--green);display:grid;place-items:center;font-size:40px;font-weight:600;animation:none}
.pq-game[data-i="2"] .pq-ok{animation:pqPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pqPop{from{transform:scale(.3)}}
.pq-dots{list-style:none;display:flex;gap:6px;margin-top:22px}
.pq-dots li{font-size:14px;font-weight:600;color:var(--mute);padding:6px 12px;border-radius:999px;background:#fff;cursor:pointer;transition:background .25s,color .25s}
.pq-dots li.is-on{background:var(--blue);color:#fff}

.pq-cd{display:flex;flex-direction:column;align-items:center;padding:26px}
.pq-cd__sw{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pq-cd__sw .seg{background:#fff}
.pq-cd__stage{position:relative;width:100%;flex:1;min-height:330px;display:grid;place-items:center;perspective:1000px}
.pq-plastic,.pq-app{grid-area:1/1;transition:transform .7s var(--ease),opacity .5s}
.pq-plastic{width:340px;max-width:88%;aspect-ratio:1.586;border-radius:20px;background:linear-gradient(135deg,#1747ff,#0b1f7a);color:#fff;position:relative;padding:22px 24px;box-shadow:0 26px 50px rgba(23,71,255,.3);animation:pqTilt 6s ease-in-out infinite}
@keyframes pqTilt{0%,100%{transform:rotateY(-8deg) rotateX(4deg)}50%{transform:rotateY(8deg) rotateX(-4deg)}}
.pq-chip{display:block;width:44px;height:32px;border-radius:7px;background:linear-gradient(135deg,#ffe29a,#e9ac3c)}
.pq-plastic b{position:absolute;top:24px;right:24px;font-weight:600;letter-spacing:.1em;font-size:15px}
.pq-plastic img{position:absolute;right:22px;bottom:20px;height:20px}
.pq-nm,.pq-gf{position:absolute;left:24px;bottom:22px;font-style:normal;font-weight:600;letter-spacing:.08em;font-size:16px;transition:opacity .3s,transform .3s}
.pq-gf{color:#ffd36e}
.pq-cd[data-kind=named] .pq-gf,.pq-cd[data-kind=anon] .pq-nm{opacity:0;transform:translateY(6px)}
.pq-cd[data-kind=anon] .pq-plastic{background:linear-gradient(135deg,#ff8a5b,#e5533a);box-shadow:0 26px 50px rgba(229,83,58,.3)}
.pq-app{width:200px;height:320px;border-radius:30px;background:#fff;border:8px solid var(--ink);padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 26px 50px rgba(13,17,23,.18)}
.pq-app>small{font-size:14px;font-weight:600;color:var(--mute)}
.pq-mini{width:100%;height:84px;border-radius:12px;background:linear-gradient(135deg,#1747ff,#0b1f7a);color:#fff;position:relative;padding:10px 12px;transition:background .4s}
.pq-mini b{font-size:14px;letter-spacing:.1em}.pq-mini .pq-nm,.pq-mini .pq-gf{left:12px;bottom:10px;font-size:10px}
.pq-cd[data-kind=anon] .pq-mini{background:linear-gradient(135deg,#ff8a5b,#e5533a)}
.pq-qr{width:96px;height:96px;background:conic-gradient(var(--ink) 25%,#fff 0 50%,var(--ink) 0 75%,#fff 0) 0 0/24px 24px;border:6px solid #fff;outline:2px solid var(--ink);border-radius:4px}
.pq-cd[data-form=real] .pq-app{opacity:0;transform:rotateY(90deg) scale(.8)}
.pq-cd[data-form=app] .pq-plastic{opacity:0;transform:rotateY(-90deg) scale(.8);animation:none}
.pq-kv{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pq-kv div{background:var(--mist);border-radius:18px;padding:18px 20px}
.pq-kv dt{font-size:14px;font-weight:600;color:var(--mute)}
.pq-kv dd{font-size:28px;font-weight:600;letter-spacing:-.03em;position:relative;height:38px;overflow:hidden}
.pq-kv dd span{position:absolute;left:0;top:0;transition:transform .45s var(--ease),opacity .3s}
.pq-kv .k-anon{transform:translateY(100%);opacity:0}
.pq-kv.anon .k-named{transform:translateY(-100%);opacity:0}.pq-kv.anon .k-anon{transform:none;opacity:1}
.pq-kv .k-named{color:var(--blue)}.pq-kv .k-anon{color:#e5533a}

.pq-mk{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:40px 24px;gap:8px}
.pq-mk::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:3px;margin-top:-30px;background:repeating-linear-gradient(90deg,#c9d3ee 0 10px,transparent 10px 18px)}
.pq-mk__st{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.pq-mk__st img{width:84px;height:84px;background:#fff;border-radius:24px;padding:8px;box-shadow:0 8px 20px rgba(13,17,23,.06);transition:box-shadow .3s}
.pq-mk__st b{margin-top:10px;font-size:18px;font-weight:600}.pq-mk__st small{font-size:14px;color:var(--mute);font-weight:600}
.pq-mk__st.is-on{transform:translateY(-8px)}.pq-mk__st.is-on img{box-shadow:0 0 0 3px var(--blue),0 14px 30px rgba(23,71,255,.2)}
.pq-mk__st.is-on b{color:var(--blue)}
.pq-cp{position:absolute;top:50%;left:calc(12.5% + var(--k,0) * 25%);margin:-130px 0 0 -38px;width:76px;height:46px;border-radius:10px;background:var(--gold);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;box-shadow:0 10px 20px rgba(255,178,30,.35);transition:left .9s var(--ease);animation:pqBob 1.6s ease-in-out infinite}
.pq-cp b{font-size:17px;font-weight:600}.pq-cp small{font-size:9px;font-weight:600;letter-spacing:.1em}
.pq-cp::before,.pq-cp::after{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--mist)}
.pq-cp::before{left:-6px}.pq-cp::after{right:-6px}
@keyframes pqBob{50%{transform:translateY(-6px)}}

.pq-where{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.pq-where li{background:#fff;border-radius:24px;padding:26px 12px 22px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;cursor:default}
.pq-where img{width:72px;height:72px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.pq-where b{font-size:18px;font-weight:600}
.pq-where li:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(13,17,23,.08)}
.pq-where li:hover img{transform:scale(1.15) rotate(-8deg)}
.pq-where.in li{animation:pqUp .6s var(--ease) both;animation-delay:calc(var(--k) * 70ms)}
@keyframes pqUp{from{opacity:0;transform:translateY(24px)}}

@media(max-width:1100px){.pq-w,.pq-p{grid-template-columns:1fr;gap:32px}.pq-where{grid-template-columns:repeat(3,minmax(0,1fr))}.pq-num{grid-template-columns:1fr}.pq-n__bars,.pq-n__line,.pq-n__cmp{height:90px}}
@media(max-width:600px){
  .pq-acts{gap:8px}.pq-acts button{padding:14px 4px}.pq-acts img{width:46px;height:46px}.pq-acts b{font-size:18px}.pq-acts small{font-size:14px}
  .pq-ph{min-height:440px;border-width:8px}.pq-bal{font-size:32px}
  .pq-tabs button{font-size:16px;padding:8px 14px 8px 8px}.pq-tabs img{width:30px;height:30px}
  .pq-vis{min-height:380px}.pq-mk{grid-template-columns:1fr 1fr;row-gap:30px;padding:70px 14px 30px}.pq-mk::before,.pq-cp{display:none}
  .pq-kv dd{font-size:22px}.pq-pts li{font-size:18px}
  .pq-where{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.pq-plastic,.pq-cp{animation:none}}
/* ===== VAN: 360 spin (sp3) + lineup (tl) ===== */
.vl-pay{margin-top:40px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.vl-pay>small{font-size:16px;font-weight:600;color:var(--sub)}
.vl-pay ul{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.vl-pay li{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;background:var(--mist);font-weight:600;font-size:16px;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .3s}
.vl-pay li i{width:26px;height:26px;border-radius:50%;background:#fff center/16px no-repeat}
.vl-pay li[data-p=card] i{background-color:#1747ff}.vl-pay li[data-p=nfc] i{background-color:#0d1117}.vl-pay li[data-p=qr] i{background-color:#ffd400}.vl-pay li[data-p=local] i{background-color:#14a06a}.vl-pay li[data-p=receipt] i{background-color:#ffb21e}
.vl-pay li:hover,.vl-pay li.is-on{transform:translateY(-4px);background:#fff;box-shadow:0 10px 22px rgba(13,17,23,.08)}
.sp3{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 48px;margin-bottom:64px}
.sp3__stage{position:relative;display:grid;place-items:center;min-height:440px;cursor:grab;touch-action:pan-y;user-select:none}
.sp3__stage:active{cursor:grabbing}
.sp3__view{width:min(380px,90%);aspect-ratio:454/512;background-repeat:no-repeat;background-color:#fff;transition:opacity .3s}
.sp3__view.is-load{opacity:0}
.sp3__stage::after{content:"";position:absolute;left:50%;bottom:22px;width:56%;height:18px;margin-left:-28%;border-radius:50%;background:radial-gradient(closest-side,rgba(13,17,23,.12),transparent);pointer-events:none}
.sp3__hint{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);white-space:nowrap;transition:opacity .4s}
.sp3__hint i{width:34px;height:14px;position:relative}
.sp3__hint i::before{content:"";position:absolute;inset:6px 0;border-top:2px solid currentColor;border-radius:2px}
.sp3__hint i::after{content:"";position:absolute;left:0;top:2px;width:10px;height:10px;border-radius:50%;background:var(--blue);animation:spHint 1.8s ease-in-out infinite}
@keyframes spHint{50%{left:24px}}
.sp3.is-used .sp3__hint{opacity:0}
.sp3__deg{position:absolute;top:8px;left:0;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sp3__sub{font-size:14px;letter-spacing:.14em;color:var(--blue);font-weight:500}
.sp3__name{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.03em;margin-top:4px}
.sp3__f{list-style:none;margin:20px 0 32px;display:flex;flex-direction:column;gap:8px}
.sp3__f li{font-size:18px;color:var(--sub);padding-left:18px;position:relative}
.sp3__f li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--blue)}
.sp3__pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sp3__pick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:16px;background:var(--mist);border:2px solid transparent;font-size:14px;color:var(--sub);transition:border-color .25s,background .25s,transform .3s var(--ease)}
.sp3__pick img{height:84px;width:auto;object-fit:contain;transition:transform .4s var(--ease)}
.sp3__pick button:hover img{transform:translateY(-4px)}
.sp3__pick button.is-on{background:#fff;border-color:var(--blue);color:var(--ink)}
.sp3.swap .sp3__txt>*:not(.sp3__pick){animation:pqIn .45s var(--ease) both}
.tl-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tl-tabs button{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:var(--mist);font-size:16px;font-weight:500;color:var(--sub);transition:background .25s,color .25s}
.tl-tabs em{font-style:normal;font-size:14px;min-width:22px;padding:1px 6px;border-radius:999px;background:#fff;color:var(--mute);text-align:center}
.tl-tabs button.is-on{background:var(--ink);color:#fff}.tl-tabs button.is-on em{background:rgba(255,255,255,.18);color:#fff}
.tl-g{list-style:none;display:none;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tl-g.is-on{display:grid}
.tl-g li{animation:pqUp .5s var(--ease) both;animation-delay:calc(var(--k) * 45ms)}
.tl-g figure{margin:0;aspect-ratio:1/1;border-radius:22px;background:var(--mist);display:grid;place-items:center;overflow:hidden;transition:background .3s}
.tl-g img{width:78%;height:78%;object-fit:contain;transition:transform .5s var(--ease);filter:drop-shadow(0 14px 18px rgba(13,17,23,.12))}
.tl-g li:hover figure{background:var(--blue-soft)}
.tl-g li:hover img{transform:translateY(-8px) scale(1.06)}
.tl-g b{display:block;margin-top:12px;font-size:18px;font-weight:500}
.tl-g small{font-size:14px;color:var(--mute)}
@media(max-width:1100px){.sp3{grid-template-columns:1fr;padding:22px;gap:10px}.sp3__stage{min-height:360px}}
@media(max-width:600px){.tl-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tl-g figure{border-radius:16px}.tl-g b{font-size:16px}.tl-g small{font-size:14px}.sp3__pick img{height:62px}.sp3__pick button{font-size:14px}.tl-tabs button{font-size:14px;padding:8px 14px}}
.tl-g img.is-mul,.sp3__pick img.is-mul{mix-blend-mode:multiply;filter:none}
.tl-g img.is-mul{width:80%;height:80%}

b,strong{font-weight:600}h3{font-weight:600}
.tl-g img.is-photo{width:100%;height:100%;object-fit:cover;filter:none}
.tl-g li:hover img.is-photo{transform:scale(1.05)}
.tl-g figure{position:relative}
.tl-g img{position:absolute;left:11%;top:11%}
.tl-g img.is-mul{left:10%;top:10%}
.tl-g img.is-photo{left:0;top:0}
/* 오시는 길: 지도 + 정보 나란히 */
.locx{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:32px;align-items:start}
.locx .loc{grid-template-columns:1fr;gap:20px}
.locx .mapx{max-width:820px}
@media(max-width:1000px){.locx{grid-template-columns:1fr}.locx .mapx{max-width:none}}

/* ===== 로고 인터랙션 ===== */
.lg .lg-ln{transform-box:fill-box;transform-origin:right center;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.lg .lg-star{transform:rotate(var(--lr,0deg));transition:transform .7s cubic-bezier(.3,1.5,.4,1)}
.lg .lg-word text{transition:opacity .4s}
/* 첫 등장 */
.lg.lg-intro .lg-ln{animation:lgLn .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.35s + var(--i) * 70ms)}
.lg.lg-intro .lg-star{animation:lgIn 1s cubic-bezier(.3,1.4,.4,1) both}
.lg.lg-intro .lg-en{animation:lgTx .7s cubic-bezier(.2,.8,.2,1) .45s both}
.lg.lg-intro .lg-ko{animation:lgTx .7s cubic-bezier(.2,.8,.2,1) .6s both}
@keyframes lgLn{from{transform:scaleX(0);opacity:0}}
@keyframes lgIn{from{transform:translateX(-60px) rotate(-216deg) scale(.3);opacity:0}}
@keyframes lgTx{from{opacity:0;transform:translateY(10px)}}
/* 마우스 */
a:hover>.lg .lg-star,.lg.is-hov .lg-star{transform:rotate(calc(var(--lr,0deg) + 72deg))}
a:hover>.lg .lg-ln{transform:scaleX(1.45);animation:lgFl .5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * 90ms)}
@keyframes lgFl{to{opacity:.45}}
a:hover>.lg .lg-shine{animation:lgSh .9s ease-out}
@keyframes lgSh{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(560px)}}
/* 클릭 대시 */
.lg.is-dash .lg-star{animation:lgDash .8s cubic-bezier(.3,1.3,.4,1)}
.lg.is-dash .lg-ln{animation:lgDl .8s ease-out;animation-delay:calc(var(--i) * 40ms)}
@keyframes lgDash{35%{transform:translateX(26px) rotate(calc(var(--lr,0deg) + 144deg)) scale(1.08)}100%{transform:rotate(calc(var(--lr,0deg) + 144deg))}}
@keyframes lgDl{35%{transform:scaleX(2.2);opacity:.6}}
@media(prefers-reduced-motion:reduce){.lg *{animation:none!important;transition:none!important}}
/* ===== 선불 정산 (ps) ===== */
.ps{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:stretch}
.ps__flow{background:var(--mist);border-radius:var(--r);padding:40px 36px 32px;display:flex;flex-direction:column;gap:30px}
.ps__nodes{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;position:relative;z-index:1}
.ps__nodes li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.ps__nodes span{width:76px;height:76px;border-radius:24px;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(13,17,23,.06);transition:box-shadow .3s,background .3s}
.ps__nodes img{width:56px;height:56px}
.ps__nodes b{font-size:16px;font-weight:600}.ps__nodes small{font-size:14px;color:var(--mute)}
.ps__nodes li.is-on{transform:translateY(-6px)}
.ps__nodes li.is-on span{box-shadow:0 0 0 3px var(--blue),0 14px 28px rgba(23,71,255,.18)}
.ps__nodes li.is-on b{color:var(--blue)}
.ps__track{position:relative;height:6px;margin:-12px 10% 0;border-radius:3px;background:repeating-linear-gradient(90deg,#c9d3ee 0 10px,transparent 10px 18px)}
.ps__coin{position:absolute;top:50%;left:var(--x,0%);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--gold);color:var(--ink);font-style:normal;font-weight:600;font-size:15px;display:grid;place-items:center;box-shadow:0 6px 14px rgba(255,178,30,.4);opacity:0;transition:left .7s var(--ease),opacity .3s}
.ps.is-move .ps__coin{opacity:1}
.ps__acts{display:flex;gap:10px;flex-wrap:wrap}
.ps__acts button{flex:1;min-width:110px;display:flex;flex-direction:column;align-items:center;padding:14px 10px;border-radius:16px;background:#fff;border:2px solid transparent;transition:border-color .25s,transform .25s}
.ps__acts button:hover{transform:translateY(-3px);border-color:var(--blue)}
.ps__acts b{font-size:18px;font-weight:600}.ps__acts small{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.ps__acts button[disabled]{opacity:.4;pointer-events:none}
.ps__acts .ps__reset{flex:0 0 auto;min-width:0;background:transparent;font-size:14px;color:var(--mute);padding:14px 8px}
.ps__led{background:var(--ink);color:#fff;border-radius:var(--r);padding:32px 30px;display:flex;flex-direction:column;gap:18px}
.ps__led h3{font-size:20px;font-weight:600}
.ps__led dl{display:flex;flex-direction:column;gap:10px}
.ps__led dl div{display:flex;justify-content:space-between;align-items:baseline;font-size:16px;color:#aab2c3}
.ps__led dd{font-variant-numeric:tabular-nums;color:#fff;font-weight:500}
.ps__led dd::after{content:"원";margin-left:2px;color:#8a92a3;font-size:14px}
.ps__led .ps__sum{border-top:1px solid rgba(255,255,255,.14);padding-top:12px;margin-top:4px;color:#fff}
.ps__led .ps__sum dd{font-size:28px;font-weight:600;color:#7fa2ff}
.ps__led dd.flash{animation:psFl .6s}
@keyframes psFl{40%{color:var(--gold)}}
.ps__safe{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:14px;color:#aab2c3}
.ps__safe i{height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.ps__safe em{display:block;height:100%;width:0;background:#3ddc97;border-radius:5px;transition:width .6s var(--ease)}
.ps__safe b{font-weight:500;color:#3ddc97;font-variant-numeric:tabular-nums}
.ps__st{margin-top:auto;background:rgba(255,255,255,.06);border-radius:16px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.ps__st span{font-size:14px;color:#aab2c3}.ps__st b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.ps__st b::after{content:"원";font-size:14px;color:#8a92a3;margin-left:2px}
.ps__st small{grid-column:1/-1;font-size:14px;color:#8a92a3}
.ps__mg{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.ps__mg li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:18px;border-radius:20px;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .3s}
.ps__mg li:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(13,17,23,.06)}
.ps__mg img{grid-row:1/3;width:52px;height:52px;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.ps__mg li:hover img{transform:rotate(-8deg) scale(1.1)}
.ps__mg b{font-size:16px;font-weight:600}.ps__mg span{font-size:14px;color:var(--mute)}
@media(max-width:1100px){.ps{grid-template-columns:1fr}.ps__mg{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ps__flow{padding:24px 14px}.ps__nodes{gap:2px}.ps__nodes span{width:52px;height:52px;border-radius:16px}.ps__nodes img{width:38px;height:38px}.ps__nodes b{font-size:14px}.ps__nodes small{display:none}.ps__mg{grid-template-columns:1fr}.ps__acts button{min-width:80px}}

/* ===== 선불 사업 모델 (pm) ===== */
.pm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.pm__orb{position:relative;width:min(520px,100%);aspect-ratio:1;margin:0 auto}
.pm__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pm__ring circle{fill:none;stroke:#d5dcee;stroke-width:1.5;stroke-dasharray:4 7}
.pm__ring .pm__spin{stroke:var(--blue);stroke-width:3;stroke-dasharray:80 900;stroke-linecap:round;transform-origin:200px 200px;transform:rotate(var(--rot,-90deg));transition:transform .8s var(--ease);stroke-dashoffset:40}
.pm__hub{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 20px 50px rgba(23,71,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.pm__hub::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(23,71,255,.15);animation:pmPulse 2.6s ease-out infinite}
@keyframes pmPulse{from{transform:scale(.9);opacity:1}to{transform:scale(1.25);opacity:0}}
.pm__hub img{width:72%;height:auto}.pm__hub small{font-size:14px;color:var(--mute)}
.pm__n{position:absolute;left:50%;top:50%;width:112px;margin:-56px 0 0 -56px;display:flex;flex-direction:column;align-items:center;gap:6px;transform:rotate(var(--a)) translateX(min(37.5vw,195px)) rotate(calc(var(--a) * -1))}
.pm__n span{width:76px;height:76px;border-radius:24px;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(13,17,23,.07);transition:transform .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.pm__n img{width:56px;height:56px}
.pm__n b{font-size:14px;font-weight:600;color:var(--sub);text-align:center;line-height:1.3}
.pm__n:hover span{transform:translateY(-4px)}
.pm__n.is-on span{transform:scale(1.12);box-shadow:0 0 0 3px var(--blue),0 16px 32px rgba(23,71,255,.2)}
.pm__n.is-on b{color:var(--blue)}
.pm__pan{position:relative;min-height:280px}
.pm__p{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s,transform .5s var(--ease),visibility 0s .4s}
.pm__p.is-on{position:relative;opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .5s var(--ease)}
.pm__p small{font-size:14px;letter-spacing:.14em;color:var(--blue);font-weight:600}
.pm__p h3{font-size:clamp(28px,3vw,40px);margin-top:4px}
.pm__p p{font-size:20px;color:var(--sub);margin-top:10px}
.pm__p ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:26px}
.pm__p li{font-size:18px;padding:14px 18px;border-radius:14px;background:#fff;display:flex;align-items:center;gap:12px;animation:pqIn .45s var(--ease) both}
.pm__p li:nth-child(2){animation-delay:.08s}.pm__p li:nth-child(3){animation-delay:.16s}
.pm__p li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none}
.pm__note{font-size:14px;color:var(--mute);margin-top:18px}
@media(max-width:1100px){.pm{grid-template-columns:1fr;gap:20px}}
@media(max-width:600px){.pm__n{width:84px;margin:-42px 0 0 -42px;transform:rotate(var(--a)) translateX(38vw) rotate(calc(var(--a) * -1))}.pm__n span{width:54px;height:54px;border-radius:16px}.pm__n img{width:40px;height:40px}.pm__n b{font-size:14px}.pm__orb{width:100%}}
.pm__p li::before{position:static;margin:0;transform:none}
.pm__ring .pm__spin{display:none}
:lang(en) .ps__led dd::after,:lang(en) .ps__st b::after{content:" KRW"}
:lang(ja) .ps__led dd::after,:lang(ja) .ps__st b::after{content:"ウォン"}
/* ===== 회사소개서 다운로드 (bro) ===== */
.bro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;margin-top:48px;padding:40px 48px;border-radius:var(--r);background:var(--mist)}
.bro__vis{position:relative;display:block;aspect-ratio:16/10;perspective:1200px;margin-top:24px}
.bro__vis img{position:absolute;left:8%;top:10%;width:78%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 18px 40px rgba(13,17,23,.16);transition:transform .7s cubic-bezier(.3,1.3,.4,1)}
.bro__vis .b1{z-index:3;transform:rotate(-2deg)}
.bro__vis .b2{z-index:2;transform:translate(4%,-4%) rotate(2deg)}
.bro__vis .b3{z-index:1;transform:translate(8%,-8%) rotate(5deg)}
.bro__vis:hover .b1,.bro.in .bro__vis .b1{transform:translate(-6%,6%) rotate(-6deg)}
.bro__vis:hover .b2,.bro.in .bro__vis .b2{transform:translate(8%,-2%) rotate(3deg)}
.bro__vis:hover .b3,.bro.in .bro__vis .b3{transform:translate(20%,-12%) rotate(10deg)}
.bro__txt small{font-size:14px;letter-spacing:.14em;color:var(--blue);font-weight:600}
.bro__txt h3{font-size:clamp(28px,3vw,38px);margin-top:4px}
.bro__txt>p{font-size:18px;color:var(--sub);margin-top:10px}
.bro__meta{list-style:none;display:flex;gap:8px;margin:20px 0 28px}
.bro__meta li{font-size:14px;color:var(--sub);padding:4px 10px;border-radius:6px;background:#fff}
.bro__btn{display:inline-flex;align-items:center;gap:10px}
.bro__ic{width:16px;height:16px;position:relative}
.bro__ic::before{content:"";position:absolute;left:50%;top:0;width:2px;height:11px;margin-left:-1px;background:currentColor;border-radius:1px}
.bro__ic::after{content:"";position:absolute;left:50%;top:5px;width:8px;height:8px;margin-left:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.bro__btn:hover .bro__ic{animation:broDn .7s ease-in-out infinite}
@keyframes broDn{50%{transform:translateY(3px)}}
.bro__btn.is-busy{opacity:.7;pointer-events:none}
.bro__msg{font-size:14px;color:var(--mute);margin-top:12px;min-height:1.4em}
@media(max-width:900px){.bro{grid-template-columns:1fr;padding:24px;gap:16px}}
/* ===== 지도 일러스트 ===== */
.mx-deco{opacity:0;transition:opacity .8s .6s}.mapx.in .mx-deco{opacity:1}
.mx-tree{transform-box:fill-box;transform-origin:50% 100%;animation:mxSway 3.6s ease-in-out infinite;animation-delay:calc(var(--k) * -.9s)}
@keyframes mxSway{50%{rotate:3deg}}
.mx-house{transition:transform .3s}
.mx-cloud ellipse{fill:#fff;opacity:.9}
.mx-cloud.c1{animation:mxCloud 38s linear infinite}.mx-cloud.c2{animation:mxCloud 52s linear -20s infinite}
@keyframes mxCloud{from{transform:translate(-60px,24px)}to{transform:translate(860px,24px)}}
.mx-cloud.c2{animation-name:mxCloud2}@keyframes mxCloud2{from{transform:translate(-60px,318px)}to{transform:translate(860px,318px)}}
.mx-car.dn{animation:mxDn 7s linear infinite}.mx-car.dn.d2{animation-delay:-3.5s}
.mx-car.up{animation:mxUp 8s linear -2s infinite}
@keyframes mxDn{from{transform:translate(462px,-30px) rotate(180deg)}to{transform:translate(462px,590px) rotate(180deg)}}
@keyframes mxUp{from{transform:translate(478px,590px)}to{transform:translate(478px,-30px)}}
.mx-bus{animation:mxBus 11s linear infinite}
@keyframes mxBus{from{transform:translate(0px,192px)}to{transform:translate(500px,192px)}}
.mx-car.lr{animation:mxLr 9s linear -4s infinite}
@keyframes mxLr{from{transform:translate(480px,422px) rotate(-90deg)}to{transform:translate(-20px,422px) rotate(-90deg)}}
.mx-traffic{opacity:0;transition:opacity .6s 1.2s}.mapx.in .mx-traffic{opacity:1}
.mx-bub{opacity:0;transform-box:fill-box;transform-origin:0 100%}
.mx-bub rect,.mx-bub path{fill:#0d1117}.mx-bub text{font-size:14px;font-weight:600;fill:#fff;text-anchor:middle}
.mapx.in .mx-bub{animation:mxBub .5s cubic-bezier(.3,1.6,.5,1) 2s forwards,mxBob 2.2s ease-in-out 2.6s infinite}
@keyframes mxBub{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes mxBob{0%,100%{opacity:1;transform:none}50%{opacity:1;transform:translateY(-4px)}}
.mx-walker circle{stroke:none}.mx-walker path{stroke:none}
.mx-kid{animation:mxHop .35s ease-in-out infinite alternate}
@keyframes mxHop{to{transform:translateY(-2px)}}
.mx-stairs{opacity:0;transition:opacity .4s 1s}.mapx.in .mx-stairs{opacity:1}
@media(prefers-reduced-motion:reduce){.mx-tree,.mx-cloud,.mx-car,.mx-bus,.mx-kid,.mx-bub{animation:none!important}.mx-bub{opacity:1}}
/* ===== 선불전자지급수단이란 (pw) ===== */
.pw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.pw__def small{font-size:14px;letter-spacing:.14em;color:var(--blue);font-weight:600}
.pw__def h2{font-size:clamp(32px,3.6vw,50px);margin-top:6px}
.pw__lead{font-size:clamp(19px,1.6vw,23px);color:var(--sub);margin-top:18px;line-height:1.6}
.pw__lead mark{background:linear-gradient(transparent 60%,#ffe08a 60%);color:var(--ink);padding:0 2px;background-size:0 100%;background-repeat:no-repeat;transition:background-size .8s var(--ease)}
.pw.in .pw__lead mark{background-size:100% 100%}.pw.in .pw__lead mark+mark,.pw.in .pw__lead mark:last-child{transition-delay:.4s}
.pw__law{display:flex;gap:12px;align-items:flex-start;margin-top:28px;padding:18px 20px;border-radius:18px;background:var(--mist);font-size:16px;color:var(--sub)}
.pw__law img{width:40px;height:40px;flex:none}
.pw__ex{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pw__ex li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 12px 24px;border-radius:24px;background:var(--mist);transition:transform .4s cubic-bezier(.3,1.5,.5,1),background .3s,box-shadow .3s;opacity:0;transform:translateY(24px)}
.pw.in .pw__ex li{opacity:1;transform:none;transition:opacity .5s calc(var(--k) * .12s + .2s),transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--k) * .12s + .2s),background .3s,box-shadow .3s}
.pw__ill{width:104px;height:104px;border-radius:32px;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(13,17,23,.06);margin-bottom:8px}
.pw__ill img{width:76px;height:76px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.pw__ex li:nth-child(1) .pw__ill img{animation:pwFloat 3s ease-in-out infinite}
.pw__ex li:nth-child(2) .pw__ill img{animation:pwFloat 3s ease-in-out -1s infinite}
.pw__ex li:nth-child(3) .pw__ill img{animation:pwFloat 3s ease-in-out -2s infinite}
@keyframes pwFloat{50%{transform:translateY(-6px)}}
.pw__ex li:hover{background:var(--blue-soft);transform:translateY(-8px)!important}
.pw__ex li:hover .pw__ill img{animation:none;transform:scale(1.14) rotate(-8deg)}
.pw__ex b{font-size:18px;font-weight:600}.pw__ex small{font-size:14px;color:var(--mute)}
@media(max-width:1000px){.pw{grid-template-columns:1fr;gap:28px}}
@media(max-width:600px){.pw__ex{gap:8px}.pw__ill{width:72px;height:72px;border-radius:22px}.pw__ill img{width:52px;height:52px}.pw__ex b{font-size:14px}.pw__ex small{font-size:14px}.pw__ex li{padding:18px 6px}}
@media(prefers-reduced-motion:reduce){.pw__ex li{opacity:1;transform:none}.pw__ill img{animation:none!important}}
/* ===== 실물 선불카드 (pc) ===== */
.pq-cd__stage{min-height:420px}
.pq-plastic.pc{width:400px;max-width:92%;aspect-ratio:1.586;padding:0;background:none;border-radius:20px;box-shadow:none;animation:none;transform-style:preserve-3d;--rx:0deg;--ry:0deg;--mx:50%;--my:50%}
.pc__face{position:absolute;inset:0;border-radius:20px;overflow:hidden;color:#fff;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1);
  background:radial-gradient(120% 140% at 0% 0%,#2d5bff 0%,#1238d6 38%,#0a1f86 72%,#071457 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 -1px 0 rgba(0,0,0,.25) inset,0 30px 60px -12px rgba(11,40,180,.45),0 12px 24px rgba(13,17,23,.18)}
.pq-plastic.pc.is-move .pc__face{transition:transform .08s linear}
.pc__pat{position:absolute;inset:0;width:100%;height:100%}
.pc__logo{position:absolute!important;left:7%;top:10%;right:auto!important;bottom:auto!important;height:auto!important;width:36%}
.pc__type{position:absolute;right:7%;top:11%;font-size:13px;font-weight:600;letter-spacing:.24em;opacity:.92}
.pc__chip{position:absolute;left:8%;top:38%;width:13%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pc__nfc{position:absolute;left:24%;top:41%;width:7%;color:rgba(255,255,255,.8)}
.pc__no{position:absolute;left:8%;top:62%;font-family:"OCR A Std","Courier New",ui-monospace,monospace;font-size:clamp(15px,1.55vw,21px);letter-spacing:.08em;color:#eef2ff;text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.45),0 2px 3px rgba(0,0,0,.25)}
.pc__exp{position:absolute;left:52%;top:77%;display:flex;align-items:center;gap:6px;font-family:"Courier New",ui-monospace,monospace;font-size:13px;letter-spacing:.06em;text-shadow:0 -1px 0 rgba(0,0,0,.4)}
.pc__exp small{font-family:var(--f);font-size:6.5px;line-height:1.1;letter-spacing:.04em;opacity:.8}
.pq-plastic.pc .pc__nm,.pq-plastic.pc .pc__gf{left:8%;bottom:10%;font-size:13px;letter-spacing:.14em;text-shadow:0 -1px 0 rgba(0,0,0,.4)}
.pc__holo{position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.35;background:linear-gradient(115deg,transparent 30%,rgba(255,120,220,.5) 42%,rgba(120,220,255,.55) 50%,rgba(255,240,140,.5) 58%,transparent 70%);background-size:250% 250%;background-position:var(--mx) var(--my);transition:background-position .3s}
.pc__glare{position:absolute;inset:0;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.32),transparent 45%);mix-blend-mode:overlay}
.pq-cd[data-kind=anon] .pc__face{background:radial-gradient(120% 140% at 0% 0%,#ffb37a 0%,#ff7a4f 40%,#e2493a 75%,#b8322b 100%);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 30px 60px -12px rgba(226,73,58,.45),0 12px 24px rgba(13,17,23,.18)}
.pq-cd[data-kind=anon] .pq-plastic.pc{background:none;box-shadow:none}
.pq-cd[data-form=real] .pq-plastic.pc .pc__face{animation:pcIdle 6s ease-in-out infinite}
.pq-plastic.pc.is-move .pc__face{animation:none}
@keyframes pcIdle{0%,100%{transform:rotateX(6deg) rotateY(-10deg)}50%{transform:rotateX(-4deg) rotateY(10deg)}}

/* ===== 앱카드: 매장 현장결제 (pa) ===== */
.pq-app.pa{width:300px;height:auto;border-radius:38px;border:9px solid var(--ink);background:#f3f5f9;padding:14px 12px 16px;gap:10px;align-items:stretch;box-shadow:0 30px 60px rgba(13,17,23,.2)}
.pa__hd{display:flex;align-items:center;justify-content:space-between;padding:2px 4px}
.pa__hd b{font-size:15px;font-weight:600}
.pa__bk,.pa__x{width:14px;height:14px;position:relative}
.pa__bk::before{content:"";position:absolute;inset:3px 2px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.pa__x::before,.pa__x::after{content:"";position:absolute;left:6px;top:0;width:2px;height:14px;background:var(--ink);transform:rotate(45deg)}.pa__x::after{transform:rotate(-45deg)}
.pa__pt{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:16px;padding:12px 14px;border:1px solid #e6e9f0}
.pa__pt small{font-size:11px;color:var(--sub)}
.pa__pt b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pa__pt b em{font-style:normal;font-size:13px;margin-left:2px}
.pa__auto{font-size:11px;font-weight:600;color:#fff;background:#7b3fe4;border-radius:999px;padding:6px 10px;display:flex;align-items:center;gap:5px;white-space:nowrap}
.pa__auto::before{content:"";width:6px;height:6px;border-radius:50%;background:#e4d4ff;box-shadow:0 0 6px #fff;animation:paBlink 1.4s ease-in-out infinite}
@keyframes paBlink{50%{opacity:.3}}
.pq-cd .k-a{display:none}.pq-cd[data-kind=anon] .k-a{display:inline}.pq-cd[data-kind=anon] .k-n{display:none}
.pq-cd[data-kind=anon] .pa__auto{visibility:hidden}
.pa__box{background:#fff;border-radius:16px;border:1px solid #e6e9f0;padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}
.pa__tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#eef0f4;border-radius:10px;padding:3px}
.pa__tabs button{font-size:12px;font-weight:600;color:var(--mute);padding:6px 0;border-radius:8px;transition:background .2s,color .2s}
.pa__tabs button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(13,17,23,.08)}
.pa__body{display:flex;flex-direction:column;gap:10px;min-height:250px;justify-content:center}
.pa__bar svg{display:block;width:100%;height:56px;transition:opacity .25s}
.pa__body[data-v=bar] .pa__bar svg{height:96px}
.pa__num{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px dashed #cfd5e0;border-radius:8px;padding:6px 8px}
.pa__num span{font-size:14px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pa__num button{font-size:11px;font-weight:600;background:#e9edf4;border-radius:6px;padding:3px 7px;color:var(--sub)}
.pa__num button.ok{background:var(--blue);color:#fff}
.pa__qr{display:flex;flex-direction:column;align-items:center;gap:6px;border-top:1px solid #eef0f4;padding-top:10px}
.pa__qrb{width:110px;height:110px;border-radius:12px;border:1px solid #e3e7ef;display:grid;place-items:center;transition:width .3s,height .3s}
.pa__qrb svg{width:78%;height:78%;display:block;transition:opacity .25s}
.pa__qr small{font-size:10.5px;color:var(--mute)}
.pa__body[data-v=bar] .pa__qr,.pa__body[data-v=qr] .pa__bar{display:none}
.pa__body[data-v=qr] .pa__qr{border-top:0;padding-top:0}.pa__body[data-v=qr] .pa__qrb{width:190px;height:190px}
.pa__body.swap svg{opacity:.15}
.pa__tm{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eef0f4;padding-top:10px;font-size:12px;color:var(--sub)}
.pa__tm b{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pa__clk{display:inline-block;width:11px;height:11px;border:1.6px solid currentColor;border-radius:50%;margin-right:5px;vertical-align:-1px;position:relative}
.pa__clk::after{content:"";position:absolute;left:3.5px;top:1px;width:3px;height:3.5px;border-left:1.4px solid currentColor;border-bottom:1.4px solid currentColor}
.pa__tm button{font-size:11.5px;font-weight:600;background:#eef0f4;border-radius:8px;padding:5px 9px;display:flex;align-items:center;gap:4px;transition:background .2s}
.pa__tm button:hover{background:#e2e6ee}
.pa__rf{width:10px;height:10px;border:1.6px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;transition:transform .5s}
.pa__tm button.spin .pa__rf{transform:rotate(360deg)}
.pa__pg{height:5px;border-radius:3px;background:#e6e9f0;overflow:hidden}
.pa__pg i{display:block;height:100%;width:87%;border-radius:3px;background:linear-gradient(90deg,#1747ff,#3fb6e8);transition:width 1s linear}
.pa__note{font-size:10.5px;color:var(--mute);line-height:1.5}
.pq-cd[data-form=app] .pq-cd__stage{min-height:640px}
@media(max-width:600px){.pq-app.pa{width:280px}.pq-plastic.pc{max-width:100%}}
@media(prefers-reduced-motion:reduce){.pc__face{animation:none!important}}
@media(min-width:1101px){.sub a{overflow-wrap:anywhere}}
.pa__num span{white-space:nowrap;font-size:13.5px;letter-spacing:.04em}
/* ===== PG 결제수단 일러스트 · 애니메이션 ===== */
.ck2__tabs button{display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;transition:border-color .2s,background .25s,transform .3s var(--ease)}
.ck2__ic{grid-row:1/3;width:56px;height:56px;border-radius:18px;background:var(--mist);display:grid;place-items:center;transition:background .25s}
.ck2__ic img{width:44px;height:44px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.ck2__tabs button:hover{transform:translateY(-3px)}
.ck2__tabs button:hover .ck2__ic img{transform:rotate(-8deg) scale(1.08)}
.ck2__tabs button.is-on{background:#fff;box-shadow:0 14px 30px rgba(23,71,255,.1)}
.ck2__tabs button.is-on .ck2__ic{background:var(--blue-soft)}
.ck2__tabs button.pop .ck2__ic img{animation:ckPop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes ckPop{30%{transform:scale(.8) rotate(-10deg)}70%{transform:scale(1.18) rotate(6deg)}}
.ck2{grid-template-columns:minmax(0,1fr) 440px}
.ck2__stage{position:relative;width:440px;height:640px;display:grid;place-items:center;margin:0 auto}
.ck2__stage .ck2__phone{z-index:2;margin:0}
.fx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
.ck2__stage[data-t="0"] .fx--0,.ck2__stage[data-t="1"] .fx--1,.ck2__stage[data-t="2"] .fx--2,.ck2__stage[data-t="3"] .fx--3{opacity:1}
/* 신용카드 */
.fx-card{position:absolute;left:-6px;top:300px;width:110px;z-index:3;filter:drop-shadow(0 14px 18px rgba(13,17,23,.18));animation:fxCard 4.8s cubic-bezier(.5,0,.2,1) infinite}
@keyframes fxCard{0%{transform:translate(-30px,40px) rotate(-18deg);opacity:0}15%{opacity:1}35%,55%{transform:translate(70px,-10px) rotate(-4deg)}70%{transform:translate(90px,-20px) rotate(0) scale(.6);opacity:0}100%{opacity:0}}
.fx-shield{position:absolute;right:-4px;top:90px;width:76px;animation:fxBob 3s ease-in-out infinite}
@keyframes fxBob{50%{transform:translateY(-10px)}}
.fx-spark{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--gold);animation:fxTw 1.8s ease-in-out infinite}
.fx-spark.s1{left:40px;top:180px}.fx-spark.s2{right:30px;top:420px;background:#7fa2ff;animation-delay:-.9s}
@keyframes fxTw{50%{transform:scale(.3);opacity:.3}}
/* 간편결제 */
.fx-app{position:absolute;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-weight:700;font-size:17px;box-shadow:0 12px 24px rgba(13,17,23,.14);animation:fxBob 3.2s ease-in-out infinite}
.fx-app.a1{left:6px;top:150px;background:#ffe14d;color:#3a1d1d;font-size:15px}
.fx-app.a2{right:2px;top:250px;background:#03c75a;color:#fff;animation-delay:-1s}
.fx-app.a3{left:16px;top:430px;background:#fa2828;color:#fff;animation-delay:-2s}
.fx-tap{position:absolute;left:28px;top:172px;width:14px;height:14px;border-radius:50%;border:2px solid var(--blue);animation:fxTap 1.6s ease-out infinite}
@keyframes fxTap{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}
/* 휴대폰 결제 */
.fx-wave{position:absolute;right:20px;top:120px;width:60px;height:60px}
.fx-wave i{position:absolute;inset:0;border:3px solid #7fa2ff;border-radius:50%;clip-path:polygon(50% 50%,100% 0,100% 100%);animation:fxWave 2s ease-out infinite}
.fx-wave i:nth-child(2){animation-delay:.5s}.fx-wave i:nth-child(3){animation-delay:1s}
@keyframes fxWave{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.fx-sms{position:absolute;left:-10px;top:250px;z-index:3;background:#fff;border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:13px;color:var(--sub);box-shadow:0 14px 30px rgba(13,17,23,.14);white-space:nowrap;animation:fxSms 4.8s cubic-bezier(.3,1.5,.5,1) infinite}
.fx-sms b{color:var(--blue);letter-spacing:.12em;margin-left:4px}
@keyframes fxSms{0%,20%{opacity:0;transform:translateY(16px) scale(.8)}30%,80%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-8px)}}
/* 해외카드 */
.fx-globe{position:absolute;right:-10px;top:70px;width:110px;animation:fxSpin 14s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fx-plane{position:absolute;left:0;top:200px;width:64px;offset-path:path("M0 40 C 80 -40, 300 -60, 420 40");animation:fxFly 6s ease-in-out infinite}
@supports not (offset-path:path("M0 0")){.fx-plane{animation:fxBob 3s ease-in-out infinite}}
@keyframes fxFly{0%{offset-distance:0%;opacity:0}10%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
.fx-brand{position:absolute;padding:6px 12px;border-radius:10px;background:#fff;font-size:13px;font-weight:700;box-shadow:0 10px 20px rgba(13,17,23,.1);animation:fxBob 3.4s ease-in-out infinite}
.fx-brand.b1{left:-4px;top:330px;color:#1a1f71;font-style:italic}.fx-brand.b2{right:-14px;top:440px;color:#eb001b;animation-delay:-1.2s}.fx-brand.b3{left:20px;top:500px;color:#0b6f3c;animation-delay:-2.2s}
/* 완료 */
.fx-ok{position:absolute;left:50%;top:40px;z-index:4;display:flex;align-items:center;gap:8px;padding:10px 16px 10px 10px;border-radius:999px;background:var(--ink);color:#fff;font-size:14px;white-space:nowrap;transform:translate(-50%,-14px) scale(.7);opacity:0;transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.fx-ok i{width:22px;height:22px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.fx-ok b{color:#3ddc97;font-weight:600}
.ck2__stage.is-done .fx-ok{opacity:1;transform:translate(-50%,0)}
.fx-conf{position:absolute;left:50%;top:50%;z-index:3;width:0;height:0}
.fx-conf i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0}
.fx-conf i:nth-child(odd){background:var(--gold)}.fx-conf i:nth-child(even){background:#7fa2ff}.fx-conf i:nth-child(3n){background:#ff8a7a;border-radius:50%;width:9px;height:9px}
.ck2__stage.is-done .fx-conf i{animation:fxConf 1.2s cubic-bezier(.2,.8,.2,1) forwards}
.fx-conf i:nth-child(1){--x:-170px;--y:-160px}.fx-conf i:nth-child(2){--x:160px;--y:-180px}.fx-conf i:nth-child(3){--x:-200px;--y:-20px}.fx-conf i:nth-child(4){--x:200px;--y:-40px}.fx-conf i:nth-child(5){--x:-150px;--y:140px}
.fx-conf i:nth-child(6){--x:170px;--y:120px}.fx-conf i:nth-child(7){--x:-60px;--y:-230px}.fx-conf i:nth-child(8){--x:70px;--y:-220px}.fx-conf i:nth-child(9){--x:-210px;--y:80px}.fx-conf i:nth-child(10){--x:210px;--y:60px}
@keyframes fxConf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(400deg)}}
/* 화면 속 */
.scn .amt{align-items:center;gap:10px}.scn .amt span{flex:1}
.scn .amt .prod{width:34px;height:34px;border-radius:10px;background:#dfe9ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3l-5 3 2 4 2-1v12h10V9l2 1 2-4-5-3c0 2-1.5 3-4 3S8 5 8 3z' fill='%231747ff'/%3E%3C/svg%3E") center/22px no-repeat;flex:none}
.scn .grid span{position:relative;padding-left:28px}
.scn .grid span::before{content:"";position:absolute;left:10px;top:50%;width:12px;height:9px;margin-top:-4.5px;border-radius:2px;background:#c9d3ee}
.scn .grid span:nth-child(1)::before{background:#1747ff}.scn .grid span:nth-child(2)::before{background:#ff8a00}.scn .grid span:nth-child(3)::before{background:#e5533a}.scn .grid span:nth-child(4)::before{background:#14a06a}.scn .grid span:nth-child(5)::before{background:#7b3fe4}.scn .grid span:nth-child(6)::before{background:#0d1117}
.scn--done .cf{position:absolute;left:50%;top:38%;width:0;height:0}
.scn--done .cf i{position:absolute;width:7px;height:10px;border-radius:2px;background:var(--gold);opacity:0}
.scn--done .cf i:nth-child(even){background:#7fa2ff}
.scn--done.on .cf i{animation:fxConf 1s cubic-bezier(.2,.8,.2,1) .5s forwards}
.scn--done .cf i:nth-child(1){--x:-80px;--y:-70px}.scn--done .cf i:nth-child(2){--x:80px;--y:-80px}.scn--done .cf i:nth-child(3){--x:-100px;--y:10px}.scn--done .cf i:nth-child(4){--x:100px;--y:0}.scn--done .cf i:nth-child(5){--x:-40px;--y:-110px}.scn--done .cf i:nth-child(6){--x:40px;--y:-110px}
@media(max-width:1100px){.ck2{grid-template-columns:1fr}.ck2__stage{width:min(440px,100%)}}
@media(max-width:600px){.ck2__stage{height:560px}.fx-card{width:84px}.fx-globe{width:84px}.fx-shield{width:56px}.fx-app{width:46px;height:46px;font-size:14px;border-radius:14px}.fx-app.a1{font-size:12px}}
@media(prefers-reduced-motion:reduce){.fx *,.fx-conf i,.scn--done .cf i{animation:none!important}}
/* ===== 해외 결제 일러스트 · 애니메이션 ===== */
.gw__map{background:none}
.gw__orbit{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;animation:fxSpin 60s linear infinite}
.gw__orbit ellipse{fill:none;stroke:#c9d3ee;stroke-width:.8;stroke-dasharray:2 4}
.gw__orbit .o2{stroke:#dbe2f3;transform-origin:100px 100px;transform:rotate(-18deg)}
.gw__globe{z-index:1}
.gw__pin,.gw__home{z-index:3}
.gw__fly{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.gw__fly path{fill:none;stroke:var(--blue);stroke-width:.7;stroke-dasharray:1.6 1.8;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-width:2.4;animation:gwDash 1s linear infinite}
@keyframes gwDash{to{stroke-dashoffset:-6.8}}
.gw__plane{position:absolute;z-index:4;width:44px;height:44px;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(13,17,23,.2))}
.gw__coin{position:absolute;left:var(--x);top:var(--y);z-index:4;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:700;font-size:14px;display:grid;place-items:center;box-shadow:0 6px 12px rgba(255,178,30,.4);opacity:0;transform:scale(.3)}
.gw.is-arrive .gw__coin{animation:gwCoin 1.2s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes gwCoin{0%{opacity:0;transform:translateY(0) scale(.3)}40%{opacity:1;transform:translateY(-34px) scale(1.1)}100%{opacity:0;transform:translateY(-50px) scale(.9)}}
.gw__who{position:absolute;left:var(--x,60%);top:var(--y,40%);z-index:5;display:flex;align-items:center;gap:6px;transform:translate(-50%,calc(-100% - 16px));transition:left .5s var(--ease),top .5s var(--ease);pointer-events:none}
.gw__who.pop{animation:gwPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes gwPop{from{transform:translate(-50%,calc(-100% - 4px)) scale(.6);opacity:0}}
.gw__face{width:34px;height:34px;border-radius:50%;background:#ffd9b8;border:3px solid #fff;box-shadow:0 6px 12px rgba(13,17,23,.15);position:relative;overflow:hidden}
.gw__face::before{content:"";position:absolute;left:-2px;right:-2px;top:-6px;height:16px;border-radius:50%;background:#3b2a20}
.gw__face i{position:absolute;left:8px;top:15px;width:3px;height:3px;border-radius:50%;background:#2b2b2b;box-shadow:11px 0 0 #2b2b2b}
.gw__say{position:relative;padding:6px 11px;border-radius:12px;background:#fff;font-size:14px;font-weight:700;color:var(--c,#1747ff);box-shadow:0 8px 18px rgba(13,17,23,.12);white-space:nowrap}
.gw__say::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,#1747ff);margin-right:6px;vertical-align:1px}
.gw__m b{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:1.5px solid #e6e9f2;transition:transform .3s cubic-bezier(.3,1.6,.5,1),border-color .2s;animation:pqIn .45s var(--ease) both}
.gw__m b:nth-child(2){animation-delay:.08s}.gw__m b:nth-child(3){animation-delay:.16s}
.gw__m b::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c,#1747ff)}
.gw__m b:hover{transform:translateY(-3px);border-color:var(--c,#1747ff)}
.gw__steps li::before{display:none}
.gw__si{display:block;width:40px;height:40px;padding:4px;border-radius:12px;background:var(--mist);margin-bottom:8px;transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .3s,box-shadow .3s}
.gw__steps li.is-on .gw__si{background:#fff;box-shadow:0 0 0 2px var(--blue),0 8px 16px rgba(23,71,255,.18);transform:translateY(-4px) scale(1.08)}
.gw__steps li.is-done .gw__si{background:var(--blue-soft)}
.gw__steps li:not(:last-child)::after{top:20px;left:48px}
.gw__svc>div{transition:transform .35s var(--ease),box-shadow .3s}
.gw__svc>div:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(13,17,23,.07)}
.gw__svc>div:hover img{animation:ckPop .6s cubic-bezier(.3,1.6,.5,1)}
@media(prefers-reduced-motion:reduce){.gw__orbit,.gw__fly path{animation:none}}
.gw__fly path{stroke:#ffc53d;stroke-width:3;stroke-dasharray:5 6}
/* ===== 사업 모델: 빔 + 미니 화면 ===== */
.pm__beam{position:absolute;left:50%;top:50%;height:2px;width:min(37.5vw,195px);transform-origin:0 50%;transform:rotate(var(--ba,-90deg));transition:transform .7s cubic-bezier(.3,1.3,.4,1);z-index:0;background:linear-gradient(90deg,rgba(23,71,255,.0),rgba(23,71,255,.35))}
.pm__beam i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px rgba(23,71,255,.6);animation:pmDot 1.6s linear infinite}
.pm__beam i:nth-child(2){animation-delay:-.53s}.pm__beam i:nth-child(3){animation-delay:-1.06s}
@keyframes pmDot{from{left:20%;opacity:0}20%{opacity:1}to{left:78%;opacity:0}}
.pm__n{z-index:2}.pm__hub{z-index:1}
.pm__p ul{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:18px}
.pm__p li{padding:9px 14px 9px 12px;font-size:16px;border-radius:999px;border:1px solid #e3e8f2}
.pm__p li::before{width:16px;height:16px;background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231747ff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.mm{margin-top:22px;height:150px;border-radius:20px;background:#fff;display:grid;place-items:center;position:relative;overflow:hidden}
.pm__p.is-on .mm>*{animation:mmIn .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes mmIn{from{opacity:0;transform:translateY(24px) rotate(-6deg) scale(.9)}}
/* 위탁운영 */
.mm-card{width:190px;height:118px;border-radius:14px;padding:14px 16px;color:#fff;position:relative;animation-name:mmIn,mmHue!important;animation-duration:.7s,6s!important;animation-iteration-count:1,infinite!important;background:#1747ff;box-shadow:0 14px 26px rgba(13,17,23,.18)}
@keyframes mmHue{0%,100%{background:#1747ff}33%{background:#14a06a}66%{background:#e5533a}}
.mm-card b{display:block;font-size:15px;letter-spacing:.06em}.mm-card span{position:absolute;right:14px;bottom:12px;font-size:10px;letter-spacing:.2em;opacity:.85}
.mm-card i{position:absolute;left:16px;bottom:16px;width:28px;height:20px;border-radius:4px;background:#ffd36e}
.mm-pow{position:absolute;right:14px;bottom:10px;font-size:11px;color:var(--mute)}
/* 지역화폐 */
.mm-vou{width:230px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,#e9f8ef,#c9efd9);position:relative;box-shadow:0 12px 22px rgba(20,160,106,.18)}
.mm-vou b{display:block;font-size:14px;color:#0b6f3c}.mm-vou em{font-style:normal;font-size:24px;font-weight:700;color:#0d1117}
.mm-pin{position:absolute;right:16px;top:14px;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#e5533a}
.mm-stamp{position:absolute;right:12px;bottom:12px;font-style:normal;font-size:11px;font-weight:700;color:#e5533a;border:2px solid #e5533a;border-radius:8px;padding:2px 6px;transform:rotate(-8deg);animation:mmStamp 2.4s ease-in-out infinite}
@keyframes mmStamp{0%,60%{transform:rotate(-8deg) scale(1)}70%{transform:rotate(-8deg) scale(1.25)}80%{transform:rotate(-8deg) scale(1)}}
/* 모바일 상품권 */
.mm-tk{width:250px;display:flex;align-items:center;gap:12px;padding:16px 16px 16px 20px;border-radius:14px;background:#fff6e0;position:relative;box-shadow:0 12px 22px rgba(255,178,30,.22)}
.mm-tk::before,.mm-tk::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:#fff}.mm-tk::before{left:-9px}.mm-tk::after{right:-9px}
.mm-tk b{display:block;font-size:14px}.mm-tk small{font-size:11px;color:var(--mute)}
.mm-bc{width:70px;height:44px;flex:none;background:repeating-linear-gradient(90deg,#0d1117 0 2px,transparent 2px 4px,#0d1117 4px 5px,transparent 5px 8px);border-left:2px dashed #e7c48a;padding-left:8px;background-clip:content-box}
/* 글로벌 */
.mm-bp{width:250px;border-radius:14px;background:#fff;border:1px solid #e3e8f2;box-shadow:0 12px 22px rgba(13,17,23,.08);overflow:hidden}
.mm-bp__r{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#e6f6ff}
.mm-bp__r b{font-size:22px;font-weight:700;letter-spacing:.04em}
.mm-bp__pl{flex:1;height:2px;margin:0 10px;background:repeating-linear-gradient(90deg,#7fa2ff 0 5px,transparent 5px 9px);position:relative}
.mm-bp__pl::after{content:"✈";position:absolute;top:-11px;left:0;font-size:16px;color:var(--blue);animation:mmPl 2.4s ease-in-out infinite}
@keyframes mmPl{from{left:0}to{left:calc(100% - 14px)}}
.mm-bp__f{display:flex;justify-content:space-between;align-items:baseline;padding:10px 18px}
.mm-bp__f small{font-size:11px;color:var(--mute);letter-spacing:.14em}.mm-bp__f em{font-style:normal;font-size:16px;font-weight:600}
/* 시스템 */
.mm-db{width:250px;padding:12px 14px;border-radius:14px;background:#0d1117;color:#aab2c3}
.mm-db__h{display:flex;gap:5px;margin-bottom:10px}.mm-db__h i{width:8px;height:8px;border-radius:50%;background:#ff5f57}.mm-db__h i:nth-child(2){background:#febc2e}.mm-db__h i:nth-child(3){background:#28c840}
.mm-db__b{display:flex;align-items:flex-end;gap:8px;height:60px}
.mm-db__b i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(#5b84ff,#1747ff);transform-origin:bottom;animation:mmBar 2.8s ease-in-out infinite}
.mm-db__b i:nth-child(2){animation-delay:.2s}.mm-db__b i:nth-child(3){animation-delay:.4s}.mm-db__b i:nth-child(4){animation-delay:.6s}.mm-db__b i:nth-child(5){animation-delay:.8s}
@keyframes mmBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.6)}}
.mm-db small{display:block;margin-top:8px;font-size:11px}
/* ===== 이런 곳에 씁니다: 뒤집히는 카드 ===== */
.pq-where li{background:none;padding:0;box-shadow:none!important;perspective:900px;outline:none}
.pq-where li:hover{transform:none}
.wc{position:relative;height:190px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.4,1)}
.pq-where li:hover .wc,.pq-where li:focus .wc{transform:rotateY(180deg)}
.wc__f,.wc__b{position:absolute;inset:0;border-radius:24px;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:16px}
.wc__f{background:#fff}
.wc__ill{width:92px;height:92px;border-radius:28px;background:var(--bg);display:grid;place-items:center}
.wc__ill img{width:70px;height:70px;animation:pwFloat 3s ease-in-out infinite;animation-delay:calc(var(--k) * -.5s)}
.wc__f b{font-size:18px;font-weight:600}
.wc__b{background:var(--blue);color:#fff;transform:rotateY(180deg)}
.wc__b b{font-size:18px;font-weight:600}.wc__b span{font-size:15px;opacity:.9;line-height:1.5}
.pq-where li:hover .wc__ill img{animation:none}
.pq-where.in li{animation:wcIn .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--k) * 90ms)}
@keyframes wcIn{from{opacity:0;transform:translateY(40px) scale(.8)}}
@media(max-width:600px){.wc{height:160px}.wc__ill{width:70px;height:70px;border-radius:22px}.wc__ill img{width:52px;height:52px}.wc__b span{font-size:13px}}
@media(prefers-reduced-motion:reduce){.pm__beam i,.mm *{animation:none!important}}
/* ===== 가맹 문의 균형 ===== */
.ct{grid-template-columns:300px minmax(0,1fr);gap:40px}
.ctc{position:relative;border-radius:24px;background:var(--mist);padding:26px 24px 24px;overflow:hidden}
.ctc__ill{position:absolute;right:12px;top:14px;width:72px;animation:pwFloat 3.4s ease-in-out infinite}
.ctc small{font-size:14px;color:var(--mute);font-weight:500}
.ctc strong{display:block;font-size:32px;font-weight:600;letter-spacing:-.02em;margin:4px 0 6px;user-select:all}
.ctc p{font-size:14px;color:var(--sub);line-height:1.6}
.ctc__copy{margin-top:16px;padding:8px 14px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-size:14px;font-weight:600;transition:border-color .2s,color .2s}
.ctc__copy:hover{border-color:var(--blue);color:var(--blue)}
.ctf{list-style:none;border-radius:24px;border:1px solid var(--line);padding:18px 20px;display:flex;flex-direction:column;gap:4px;position:relative}
.ctf::before{content:"";position:absolute;left:43px;top:42px;bottom:42px;border-left:2px dashed #d5dcee}
.ctf li{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:6px 0;position:relative}
.ctf span{grid-row:1/3;width:48px;height:48px;border-radius:14px;background:#fff;box-shadow:0 4px 12px rgba(13,17,23,.06);display:grid;place-items:center}
.ctf img{width:36px;height:36px}
.ctf b{font-size:16px;font-weight:600}.ctf small{font-size:14px;color:var(--mute)}
.ctf li:hover img{animation:ckPop .6s cubic-bezier(.3,1.6,.5,1)}
.cs__links a{padding:14px 18px;font-size:16px}
.form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px 32px 28px;gap:16px;max-width:880px}
.form label,.form legend{font-size:14px}
.form input:not([type=checkbox]),.form select,.form textarea{height:42px;font-size:16px;border-radius:10px}
.form textarea{height:auto}
.checks__list label{padding:7px 14px;font-size:14px}
.agreebox{font-size:14px;padding:12px 14px;line-height:1.6}
.form__end{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.form__end .agree{font-size:14px}
.form__send{height:48px;padding:0 26px;font-size:16px;display:inline-flex;align-items:center;gap:10px}
@media(max-width:900px){.ct{grid-template-columns:1fr}.form{padding:22px 18px}.form__send{width:100%;justify-content:center}}
@media(max-width:600px){.form__row{grid-template-columns:1fr}}
.pq-where li{display:block;text-align:initial}
.wc{width:100%}
/* ===== 게임 캐시 장면 (gm) ===== */
.pq-game{position:relative}
.pq-gs.gm{width:280px;height:420px;border-radius:34px;border:9px solid #0b0f22;background:linear-gradient(#7fc8ff 0%,#bfe6ff 55%,#e9f8ff 100%);position:relative;overflow:hidden;box-shadow:0 30px 60px rgba(13,17,23,.25)}
.gm__hud{position:absolute;left:10px;right:10px;top:10px;display:flex;justify-content:space-between;align-items:center;z-index:5}
.gm__lv{font-size:12px;font-weight:700;color:#fff;background:rgba(13,17,23,.45);padding:4px 9px;border-radius:999px}
.gm__cash{display:flex;align-items:center;gap:6px;background:rgba(13,17,23,.55);color:#fff;padding:4px 10px 4px 5px;border-radius:999px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.gm__cash i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc53d 55%,#e8921c)}
.gm__cash.bump{animation:gmBump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes gmBump{40%{transform:scale(1.15)}}
.gm__cl{position:absolute;width:54px;height:18px;border-radius:20px;background:#fff;opacity:.9;animation:gmCl 14s linear infinite}
.gm__cl::before{content:"";position:absolute;left:12px;top:-10px;width:26px;height:22px;border-radius:50%;background:#fff}
.gm__cl.c1{top:62px;left:-60px}.gm__cl.c2{top:110px;left:-60px;animation-delay:-7s;transform:scale(.7)}
@keyframes gmCl{to{left:300px}}
.gm__hill{position:absolute;left:-40px;right:-40px;bottom:66px;height:120px;border-radius:50% 50% 0 0;background:#8fdcab}
.gm__ground{position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(#6cc896,#4fb27f);z-index:1}
.gm__hero{position:absolute;left:50%;bottom:64px;width:60px;height:86px;margin-left:-30px;z-index:3}
.gm__kid{position:absolute;inset:0;animation:gmIdle .9s ease-in-out infinite alternate}
@keyframes gmIdle{to{transform:translateY(-4px)}}
.gm__kid .h{position:absolute;left:12px;top:0;width:36px;height:36px;border-radius:50%;background:#ffd9b8;box-shadow:inset 0 9px 0 #3b2a20}
.gm__kid .h::before,.gm__kid .h::after{content:"";position:absolute;top:19px;width:4px;height:5px;border-radius:2px;background:#2b2b2b}.gm__kid .h::before{left:10px}.gm__kid .h::after{right:10px}
.gm__kid .b{position:absolute;left:14px;top:34px;width:32px;height:30px;border-radius:10px 10px 6px 6px;background:#1747ff}
.gm__kid .l1,.gm__kid .l2{position:absolute;top:62px;width:9px;height:18px;border-radius:4px;background:#0f1c55}.gm__kid .l1{left:18px}.gm__kid .l2{right:18px}
.gm__sword{position:absolute;right:-10px;top:24px;width:10px;height:46px;border-radius:3px 3px 2px 2px;background:linear-gradient(#fff,#cfe3ff);transform-origin:50% 90%;transform:rotate(30deg) scale(0);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s;z-index:4;box-shadow:0 0 12px #9fd0ff}
.gm__sword::after{content:"";position:absolute;left:-6px;bottom:6px;width:22px;height:5px;border-radius:2px;background:#ffc53d}
.gm__get{position:absolute;left:50%;top:-30px;transform:translateX(-50%) scale(.5);opacity:0;font-size:15px;font-weight:800;color:#fff;-webkit-text-stroke:1px #e8921c;text-shadow:0 2px 0 #e8921c;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);white-space:nowrap}
.pq-game[data-i="2"] .gm__sword,.pq-game[data-i="3"] .gm__sword{opacity:1;transform:rotate(30deg) scale(1)}
.pq-game[data-i="2"] .gm__get{opacity:1;transform:translateX(-50%) scale(1);animation:gmGet 1s ease-in-out infinite alternate}
@keyframes gmGet{to{transform:translateX(-50%) translateY(-4px) scale(1.05)}}
.pq-game[data-i="2"] .gm__kid{animation:gmJump .5s cubic-bezier(.3,1.6,.5,1) 2 alternate}
@keyframes gmJump{to{transform:translateY(-16px)}}
.gm__sc{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .35s}
.pq-game[data-i="0"] .gm__sc[data-i="0"],.pq-game[data-i="1"] .gm__sc[data-i="1"],.pq-game[data-i="3"] .gm__sc[data-i="3"]{opacity:1}
.gm__pop,.gm__shop{position:absolute;left:16px;right:16px;top:58px;background:rgba(13,17,23,.82);color:#fff;border-radius:16px;padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;backdrop-filter:blur(2px)}
.pq-game[data-i="0"] .gm__pop,.pq-game[data-i="1"] .gm__shop{animation:gmPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes gmPop{from{transform:scale(.7);opacity:0}}
.gm__pop small,.gm__shop small{font-size:11px;color:#9aa6d6}.gm__pop b{font-size:24px;color:#ffd25a}
.gm__shop{flex-direction:row;text-align:left;gap:10px}.gm__shop>div{flex:1}.gm__shop b{display:block;font-size:14px}
.gm__item{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#ffd36e,#ff9d2e);position:relative;flex:none;box-shadow:0 0 0 2px #ffe9a8}
.gm__item::after{content:"";position:absolute;left:18px;top:6px;width:4px;height:26px;border-radius:2px;background:#fff;transform:rotate(30deg)}
.gm__shop .pq-btn{padding:7px 12px;font-size:13px}
.gm__rain i{position:absolute;top:-20px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc53d 55%,#e8921c);animation:gmRain 1.4s ease-in infinite}
.gm__rain i:nth-child(1){left:20%;animation-delay:.1s}.gm__rain i:nth-child(2){left:40%;animation-delay:.5s}.gm__rain i:nth-child(3){left:60%;animation-delay:.2s}.gm__rain i:nth-child(4){left:80%;animation-delay:.7s}.gm__rain i:nth-child(5){left:30%;animation-delay:.9s}.gm__rain i:nth-child(6){left:70%;animation-delay:1.1s}
@keyframes gmRain{to{transform:translateY(440px) rotate(360deg)}}
.gm__flow{position:absolute;left:12px;right:12px;top:70px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:16px;padding:14px 10px;box-shadow:0 10px 20px rgba(13,17,23,.15)}
.gm__flow span{font-size:11px;font-weight:700;text-align:center;line-height:1.2;color:var(--ink)}
.gm__flow>i{flex:1;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,#c9d3ee 0 5px,transparent 5px 9px)}
.gm__coin{position:absolute;top:50%;left:12%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#ffc53d;font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center;animation:gmCoin 1.8s ease-in-out infinite}
@keyframes gmCoin{from{left:12%}to{left:82%}}
.gm__set{position:absolute;left:50%;top:150px;transform:translateX(-50%);white-space:nowrap;font-size:13px;background:#14a06a;color:#fff;padding:6px 12px;border-radius:999px}
.gm-fx{position:absolute;z-index:3;color:#ffc53d;font-size:22px;animation:fxBob 3s ease-in-out infinite;pointer-events:none}
.gm-fx.f1{left:14%;top:18%}.gm-fx.f3{right:14%;top:58%;font-size:16px;color:#7fa2ff;animation-delay:-1.4s}
.gm-fx.f2,.gm-fx.f4{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc53d 55%,#e8921c)}
.gm-fx.f2{right:16%;top:22%;animation-delay:-.8s}.gm-fx.f4{left:18%;bottom:24%;animation-delay:-2s}
.pq-chain{position:relative;display:flex;align-items:center;margin-top:26px;padding:16px;border-radius:18px;background:#fff;gap:6px}
.pq-chain>span{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:78px}
.pq-chain img{width:40px;height:40px}.pq-chain b{font-size:13.5px;font-weight:600}.pq-chain small{font-size:11.5px;color:var(--mute)}
.pq-chain .us b{color:var(--blue)}
.pq-chain>i{flex:1;height:2px;background:repeating-linear-gradient(90deg,#c9d3ee 0 6px,transparent 6px 11px);margin-bottom:22px}
.pq-chain>em{position:absolute;top:30px;left:16%;width:24px;height:24px;border-radius:50%;background:var(--gold);font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center;box-shadow:0 4px 10px rgba(255,178,30,.4);animation:pqChain 3s ease-in-out infinite}
@keyframes pqChain{0%{left:14%;opacity:0}10%{opacity:1}45%,55%{left:47%}90%{opacity:1}100%{left:80%;opacity:0}}
@media(max-width:600px){.pq-gs.gm{width:250px;height:380px}.pq-chain>span{min-width:62px}}
@media(prefers-reduced-motion:reduce){.gm *,.gm-fx,.pq-chain>em{animation:none!important}}
/* ===== 업종 확인 (bz) ===== */
.bz{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.bz__q{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:14px;border:1.5px solid var(--line);background:#fff;transition:border-color .2s,box-shadow .2s}
.bz__q:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.bz__qi{width:16px;height:16px;border:2px solid var(--mute);border-radius:50%;position:relative;flex:none}
.bz__qi::after{content:"";position:absolute;right:-6px;bottom:-5px;width:7px;height:2px;background:var(--mute);transform:rotate(45deg)}
.bz__q input{flex:1;border:0;outline:0;font:inherit;font-size:16px;background:none}
.bz__lg{display:flex;gap:14px;margin:18px 0 12px;font-size:14px;color:var(--sub)}
.bz__lg span{display:flex;align-items:center;gap:6px}.bz__lg span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.bz--ok{--c:#14a06a;--s:#e6f7ef}.bz--chk{--c:#e8921c;--s:#fff3e0}.bz--no{--c:#e5484d;--s:#ffecec}
.bz__list{display:flex;flex-wrap:wrap;gap:8px}
.bz__c{padding:9px 14px 9px 12px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:16px;display:inline-flex;align-items:center;gap:7px;transition:transform .25s cubic-bezier(.3,1.6,.5,1),border-color .2s,background .2s;animation:pqIn .4s var(--ease) both}
.bz__c::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.bz__c:hover{transform:translateY(-2px);border-color:var(--c)}
.bz__c.is-on{background:var(--s);border-color:var(--c);color:var(--ink)}
.bz__c[hidden]{display:none}
.bz__none{margin-top:12px;font-size:14px;color:var(--mute)}
.bz__res{position:sticky;top:calc(var(--hd) + 80px);border-radius:24px;background:var(--mist);padding:30px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-height:300px;justify-content:center}
.bz__ic{position:relative;width:96px;height:96px;margin-bottom:6px}
.bz__ic i{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;opacity:0;transform:scale(.4) rotate(-30deg);transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.bz__ic i::after{font-style:normal;font-size:44px;font-weight:700;color:#fff}
.bz__ic .i-ok{background:#14a06a}.bz__ic .i-ok::after{content:"✓"}
.bz__ic .i-chk{background:#e8921c}.bz__ic .i-chk::after{content:"?"}
.bz__ic .i-no{background:#e5484d}.bz__ic .i-no::after{content:"✕";font-size:40px}
.bz__ic .i-q{background:#fff;box-shadow:0 10px 24px rgba(13,17,23,.08)}.bz__ic .i-q::after{content:"···";color:var(--mute);font-size:32px}
.bz__res[data-k=""] .i-q,.bz__res[data-k="ok"] .i-ok,.bz__res[data-k="chk"] .i-chk,.bz__res[data-k="no"] .i-no{opacity:1;transform:none}
.bz__res[data-k="ok"] .i-ok{animation:bzRing 1.4s ease-out}
@keyframes bzRing{0%{box-shadow:0 0 0 0 rgba(20,160,106,.45)}100%{box-shadow:0 0 0 26px rgba(20,160,106,0)}}
.bz__res[data-k="no"] .i-no{animation:bzShake .5s}
@keyframes bzShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.bz__t{font-size:22px;font-weight:600}
.bz__st em,.bz__why span{display:none}
.bz__res[data-k="ok"] .bz__st em[data-k="ok"],.bz__res[data-k="chk"] .bz__st em[data-k="chk"],.bz__res[data-k="no"] .bz__st em[data-k="no"]{display:inline-block}
.bz__st em{font-style:normal;font-size:14px;font-weight:600;padding:4px 12px;border-radius:999px;color:#fff}
.bz__st em[data-k="ok"]{background:#14a06a}.bz__st em[data-k="chk"]{background:#e8921c}.bz__st em[data-k="no"]{background:#e5484d}
.bz__res[data-k="ok"] .bz__why span[data-k="ok"],.bz__res[data-k="chk"] .bz__why span[data-k="chk"],.bz__res[data-k="no"] .bz__why span[data-k="no"]{display:inline}
.bz__why{font-size:16px;color:var(--sub);max-width:300px}
.bz__go{margin-top:10px;opacity:0;pointer-events:none;transition:opacity .3s}
.bz__res[data-k="ok"] .bz__go,.bz__res[data-k="chk"] .bz__go{opacity:1;pointer-events:auto}
.bz__res.swap>*{animation:pqIn .4s var(--ease) both}
@media(max-width:900px){.bz{grid-template-columns:1fr}.bz__res{position:static;min-height:0}}
/* ===== 이용 장점 (mt) ===== */
.mt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:stretch}
.mt__l{display:flex;flex-direction:column;gap:8px}
.mt__b{position:relative;display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;background:#fff;text-align:left;border:2px solid transparent;overflow:hidden;transition:border-color .2s,transform .25s var(--ease)}
.mt__b:hover{transform:translateX(4px)}
.mt__ic{width:52px;height:52px;border-radius:16px;background:var(--mist);display:grid;place-items:center;flex:none;transition:background .25s}
.mt__ic img{width:40px;height:40px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.mt__b b{display:block;font-size:18px;font-weight:600}.mt__b small{font-size:14px;color:var(--blue)}
.mt__b.is-on{border-color:var(--blue)}.mt__b.is-on .mt__ic{background:var(--blue-soft)}.mt__b.is-on .mt__ic img{transform:scale(1.12) rotate(-6deg)}
.mt__bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left}
.mt__b.is-on .mt__bar{animation:fill 4s linear forwards}
.mt.is-man .mt__bar{display:none}
.mt__r{position:relative;border-radius:24px;background:#fff;padding:28px;min-height:380px}
.mt__p{position:absolute;inset:28px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,transform .45s var(--ease),visibility 0s .35s;display:flex;flex-direction:column;gap:18px}
.mt__p.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .45s var(--ease)}
.mt__p>p{font-size:16px;color:var(--sub);line-height:1.65}
.mv{flex:1;min-height:220px;border-radius:18px;background:var(--mist);position:relative;display:grid;place-items:center;overflow:hidden}
/* 결제수단 */
.mv-ph{width:84px;height:150px;border-radius:18px;border:6px solid var(--ink);background:#fff;position:relative;z-index:1}
.mv-ph i{position:absolute;left:10px;right:10px;bottom:12px;height:20px;border-radius:6px;background:var(--blue)}
.mv-c{position:absolute;padding:6px 12px;border-radius:999px;background:#fff;font-size:13px;font-weight:600;box-shadow:0 8px 18px rgba(13,17,23,.1);opacity:0;transform:scale(.4)}
.mt__p.is-on .mv-c{animation:mvPop .5s cubic-bezier(.3,1.6,.5,1) forwards,fxBob 3s ease-in-out infinite}
.mv-c.c1{left:16%;top:22%;animation-delay:.1s,.6s}.mv-c.c2{right:16%;top:18%;animation-delay:.3s,.8s}.mv-c.c3{left:12%;top:58%;animation-delay:.5s,1s}.mv-c.c4{right:12%;top:52%;animation-delay:.7s,1.2s}.mv-c.c5{left:50%;bottom:10%;margin-left:-26px;animation-delay:.9s,1.4s}
@keyframes mvPop{to{opacity:1;transform:none}}
/* 무이자 */
.mv-ins{width:min(320px,90%);background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 10px 24px rgba(13,17,23,.06)}
.mv-ins small{font-size:12px;color:var(--mute)}
.mv-mo{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:10px 0 12px}
.mv-mo i{height:22px;border-radius:4px;background:#e3e8f2}
.mt__p.is-on .mv-mo i{animation:mvMo .3s forwards;animation-delay:calc(var(--k) * 90ms + .2s)}
@keyframes mvMo{to{background:var(--blue)}}
.mv-ins__r{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--sub)}.mv-ins__r b{font-size:22px;color:var(--ink)}
.mv-stamp{position:absolute;right:14%;top:16%;padding:6px 12px;border:3px solid #e5484d;border-radius:10px;color:#e5484d;font-weight:800;font-size:18px;transform:rotate(-12deg) scale(2);opacity:0}
.mt__p.is-on .mv-stamp{animation:mvStamp .4s cubic-bezier(.3,1.6,.5,1) 1.5s forwards}
@keyframes mvStamp{to{transform:rotate(-12deg) scale(1);opacity:1}}
/* 환불 */
.mv-rc{width:min(280px,90%);background:#fff;border-radius:12px;padding:16px 18px 20px;box-shadow:0 10px 24px rgba(13,17,23,.06);position:relative}
.mv-rc::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:10px;background:radial-gradient(circle at 6px 0,transparent 6px,#fff 6.5px) 0 0/12px 10px repeat-x}
.mv-rc small{font-size:12px;color:var(--mute)}
.mv-rc__r{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.mv-rc__o{position:relative}
.mv-rc__o::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:#e5484d;transform:scaleX(0);transform-origin:left}
.mt__p.is-on .mv-rc__o::after{animation:mvStrike .5s .6s forwards}
@keyframes mvStrike{to{transform:scaleX(1)}}
.mv-rc__x{color:#e5484d;opacity:0}.mt__p.is-on .mv-rc__x{animation:mvPop .4s 1s forwards}
.mv-rc__t{border:0;font-weight:600;opacity:0}.mv-rc__t b{font-size:20px;color:var(--blue)}.mt__p.is-on .mv-rc__t{animation:mvPop .4s 1.4s forwards}
/* 정산 데이터 */
.mv--data{grid-template-columns:1fr 1fr;padding:0 24px;gap:10px}
.mv-lines{width:100%;height:150px}
.mv-lines path{fill:none;stroke:#7fa2ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140}
.mt__p.is-on .mv-lines path{animation:mvDraw 1s forwards}.mt__p.is-on .mv-lines path:nth-child(2){animation-delay:.2s}.mt__p.is-on .mv-lines path:nth-child(3){animation-delay:.4s}
@keyframes mvDraw{to{stroke-dashoffset:0}}
.mv-db{height:150px;display:flex;align-items:flex-end;gap:8px;background:#fff;border-radius:14px;padding:14px;box-shadow:0 10px 24px rgba(13,17,23,.06)}
.mv-db i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(#5b84ff,#1747ff);transform:scaleY(0);transform-origin:bottom}
.mt__p.is-on .mv-db i{animation:mvBar .6s cubic-bezier(.3,1.4,.5,1) forwards}.mt__p.is-on .mv-db i:nth-child(2){animation-delay:.1s}.mt__p.is-on .mv-db i:nth-child(3){animation-delay:.2s}.mt__p.is-on .mv-db i:nth-child(4){animation-delay:.3s}
.mt__p.is-on .mv-db i{animation-delay:1s}
@keyframes mvBar{to{transform:scaleY(1)}}
/* 개발 연동 */
.mv--dev{background:#0d1117}
.mv-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.7;color:#cdd6f4;white-space:pre;margin:0;clip-path:inset(0 100% 0 0)}
.mv-code .k{color:#7fd1a0;font-weight:700}
.mt__p.is-on .mv-code{animation:mvType 1.6s steps(30) forwards}
@keyframes mvType{to{clip-path:inset(0 0 0 0)}}
.mv-ok{position:absolute;right:18px;bottom:16px;padding:5px 12px;border-radius:8px;background:#14a06a;color:#fff;font-size:13px;font-weight:700;opacity:0}
.mt__p.is-on .mv-ok{animation:mvPop .4s cubic-bezier(.3,1.6,.5,1) 1.8s forwards}
@media(max-width:900px){.mt{grid-template-columns:1fr}.mt__r{min-height:420px}}
@media(prefers-reduced-motion:reduce){.mv *{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;stroke-dashoffset:0!important}}
/* ===== 회사 개요 정리 ===== */
.ovs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ovs li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:20px 22px;border-radius:20px;background:var(--mist);transition:transform .35s var(--ease),box-shadow .3s}
.ovs li:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(13,17,23,.06);background:#fff}
.ovs img{grid-row:1/3;width:52px;height:52px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.ovs li:hover img{transform:rotate(-8deg) scale(1.1)}
.ovs small{font-size:14px;color:var(--mute)}
.ovs b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ovs.in li{animation:pqUp .6s var(--ease) both;animation-delay:calc(var(--k) * 80ms)}
.ov2{margin-top:28px;border-top:1px solid var(--ink)}
.ov2 div{display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line)}
.ov2 dt{font-size:16px;color:var(--mute)}
.ov2 dd{font-size:18px;font-weight:500;line-height:1.6}
.ov2 .ov__en{margin-left:12px;font-size:16px;color:var(--mute);font-weight:400}
@media(max-width:900px){.ovs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ovs li{padding:16px;grid-template-columns:40px 1fr;column-gap:10px}.ovs img{width:40px;height:40px}.ovs b{font-size:18px}.ov2 div{grid-template-columns:1fr;gap:4px}.ov2 .ov__en{display:block;margin:2px 0 0}}
/* ===== 해외 결제 카드 균형 보정 ===== */
.gw__chips{gap:6px;margin-bottom:14px}
.gw__chips button{padding:10px 18px;font-size:16px}
.gw__card{padding:28px 30px 26px}
.gw__pay small{font-size:14px}
.gw__m{gap:8px;margin:10px 0 14px}
.gw__m b{font-size:18px;padding:9px 16px 9px 14px;border-radius:12px;gap:8px;font-weight:600}
.gw__m b::before{width:9px;height:9px}
.gw__pay p{font-size:16px}
.gw__steps{margin-top:22px;padding-top:24px;gap:0}
.gw__steps li{padding-right:12px}
.gw__si{width:48px;height:48px;padding:6px;border-radius:14px;margin-bottom:12px}
.gw__steps li:not(:last-child)::after{top:24px;left:58px;right:4px;height:2px}
.gw__steps b{font-size:16px}
.gw__steps span{font-size:14px;margin-top:3px}
@media(max-width:600px){
  .gw__chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .gw__chips button{padding:10px 4px;font-size:14px;white-space:nowrap}
  .gw__card{padding:22px 18px}
  .gw__steps{grid-template-columns:1fr;gap:14px}
  .gw__steps li{display:grid;grid-template-columns:48px 1fr;column-gap:14px;align-items:center;padding-right:0}
  .gw__si{grid-row:1/3;margin:0}
  .gw__steps li:not(:last-child)::after{left:23px;right:auto;top:52px;width:2px;height:14px}
  .gw__steps span{margin-top:0}
}
/* ===== RPG 게임 화면 (rp) ===== */
.pq-game{padding:26px 18px}
.rp{width:min(560px,100%);aspect-ratio:2/1;border-radius:34px;border:10px solid #0b0f22;background:#0b0f22;position:relative;box-shadow:0 30px 60px rgba(13,17,23,.28);z-index:2}
.rp::before{content:"";position:absolute;left:-6px;top:50%;width:4px;height:38px;margin-top:-19px;border-radius:2px;background:#1c2240}
.rp__scr{position:absolute;inset:0;border-radius:24px;overflow:hidden;container-type:inline-size}
.rp__bg{position:absolute;inset:0;width:100%;height:100%}
.rp__hud{position:absolute;left:3%;right:3%;top:5%;display:flex;justify-content:space-between;align-items:flex-start;z-index:6}
.rp__me{display:flex;gap:6px;align-items:center;background:rgba(10,12,30,.55);padding:4px 10px 4px 4px;border-radius:12px}
.rp__face{width:30px;height:30px;border-radius:8px;background:#ffd9b8;box-shadow:inset 0 10px 0 #3b2a20;border:2px solid #ffd25a}
.rp__me b{display:block;font-size:10px;color:#fff;font-weight:600;line-height:1.2}
.rp__hp,.rp__mp{display:block;width:84px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin-top:3px;overflow:hidden}
.rp__hp em,.rp__mp em{display:block;height:100%;width:78%;background:linear-gradient(90deg,#ff5f6d,#ff9a5a)}.rp__mp em{width:55%;background:linear-gradient(90deg,#4f7bff,#6fd3ff)}
.rp__cur{display:flex;gap:6px}
.rp__gold,.rp__cash{display:flex;align-items:center;gap:4px;background:rgba(10,12,30,.55);color:#fff;font-size:11px;font-weight:600;padding:4px 8px 4px 4px;border-radius:999px;font-variant-numeric:tabular-nums}
.rp__gold i,.rp__cash i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc53d 55%,#e8921c)}
.rp__cash i{background:radial-gradient(circle at 35% 35%,#d9f3ff,#5fc4ff 55%,#2b7fd9)}
.rp__cash u{text-decoration:none;width:15px;height:15px;border-radius:4px;background:#ffc53d;color:#3a2600;display:grid;place-items:center;font-size:12px;margin-left:2px}
.rp__cash.bump{animation:gmBump .5s cubic-bezier(.3,1.6,.5,1)}
.rp__map{position:absolute;right:3%;top:22%;width:50px;height:50px;border-radius:50%;background:rgba(10,12,30,.45);border:2px solid rgba(255,255,255,.35);z-index:6}
.rp__map i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ffd25a;box-shadow:12px -8px 0 -1px #ff6b6b}
.rp__joy{position:absolute;left:4%;bottom:7%;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.35);z-index:6}
.rp__joy i{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;background:rgba(255,255,255,.7);animation:rpJoy 3s ease-in-out infinite}
@keyframes rpJoy{25%{transform:translate(8px,-3px)}50%{transform:translate(2px,6px)}75%{transform:translate(-7px,0)}}
.rp__sk{position:absolute;right:4%;bottom:7%;display:flex;align-items:flex-end;gap:6px;z-index:6}
.rp__sk span{width:30px;height:30px;border-radius:50%;background:rgba(10,12,30,.55);border:2px solid #ffd25a;position:relative;overflow:hidden}
.rp__sk span::after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.55) var(--cd,0%),transparent 0);animation:rpCd 4s linear infinite}
.rp__sk .s2::after{animation-delay:-1.5s}.rp__sk .big{width:44px;height:44px;border-color:#ff8a5b;background:radial-gradient(circle,#ff8a5b55,rgba(10,12,30,.6))}
.rp__sk .big::after{animation:none}
@property --cd{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes rpCd{from{--cd:100%}to{--cd:0%}}
.rp__hero{position:absolute;left:30%;bottom:16%;width:40px;height:60px;z-index:4}
.rp__kn{position:absolute;inset:0;animation:gmIdle .8s ease-in-out infinite alternate}
.rp__kn .hd{position:absolute;left:8px;top:0;width:24px;height:24px;border-radius:50%;background:#ffd9b8;box-shadow:inset 0 7px 0 #3b2a20}
.rp__kn .hd::after{content:"";position:absolute;left:6px;top:12px;width:3px;height:3px;border-radius:50%;background:#222;box-shadow:8px 0 0 #222}
.rp__kn .bd{position:absolute;left:9px;top:22px;width:22px;height:22px;border-radius:7px 7px 4px 4px;background:linear-gradient(#b8c3d9,#7d8aa6)}
.rp__kn .cp{position:absolute;left:2px;top:22px;width:10px;height:26px;border-radius:4px 2px 6px 6px;background:#e5484d;transform:rotate(8deg)}
.rp__kn .l1,.rp__kn .l2{position:absolute;top:42px;width:7px;height:14px;border-radius:3px;background:#3a3f55}.rp__kn .l1{left:12px}.rp__kn .l2{right:12px}
.rp__sw{position:absolute;right:-12px;top:10px;width:7px;height:36px;border-radius:2px;background:linear-gradient(#fff,#bfe0ff);transform-origin:50% 90%;transform:rotate(35deg);box-shadow:0 0 0 1px #8fb8e6;transition:box-shadow .4s}
.rp__sw::after{content:"";position:absolute;left:-5px;bottom:4px;width:17px;height:4px;border-radius:2px;background:#8a5a2b}
.pq-game[data-i="2"] .rp__sw,.pq-game[data-i="3"] .rp__sw{background:linear-gradient(#fff6c8,#ffc53d);box-shadow:0 0 14px #ffd25a,0 0 0 1px #e8921c;animation:rpSwing .6s ease-in-out 2}
@keyframes rpSwing{50%{transform:rotate(95deg)}}
.rp__slime{position:absolute;left:52%;bottom:15%;width:48px;height:38px;z-index:4}
.rp__slime i{position:absolute;inset:0;border-radius:50% 50% 40% 40%/70% 70% 30% 30%;background:radial-gradient(circle at 35% 30%,#d6ffe0,#57d58a 50%,#2aa865);animation:rpSlime 1s ease-in-out infinite}
.rp__slime i::after{content:"";position:absolute;left:13px;top:13px;width:5px;height:6px;border-radius:50%;background:#123;box-shadow:14px 0 0 #123}
@keyframes rpSlime{50%{transform:scale(1.08,.9) translateY(3px)}}
.rp__dmg{position:absolute;left:50%;top:-8px;transform:translateX(-50%);font-size:15px;font-weight:800;color:#ffe066;-webkit-text-stroke:1px #a33;opacity:0;white-space:nowrap}
.pq-game[data-i="2"] .rp__dmg{animation:rpDmg 1s ease-out .6s 2}
@keyframes rpDmg{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
.pq-game[data-i="2"] .rp__slime i{animation:rpHit .3s 3}
@keyframes rpHit{50%{transform:translateX(5px);filter:brightness(2)}}
.rp .gm__sc{z-index:7}
.rp__win{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:58%;background:linear-gradient(#2a2f55,#1b1f3d);border:2px solid #c9a24d;border-radius:12px;padding:8px 10px 10px;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.pq-game[data-i="0"] .rp__shop .rp__win,.pq-game[data-i="1"] .rp__item .rp__win{animation:rpWin .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes rpWin{from{transform:translate(-50%,-44%) scale(.85);opacity:0}}
.rp__wt{display:block;text-align:center;font-size:11px;color:#ffd25a;letter-spacing:.06em;margin-bottom:6px}
.rp__pk{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.rp__pk span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:8px;background:rgba(255,255,255,.08);font-size:11px;font-weight:700;border:1.5px solid transparent}
.rp__pk span i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9f3ff,#5fc4ff 55%,#2b7fd9)}
.rp__pk span small{font-size:9px;color:#aab2c3;font-weight:500}
.rp__pk .on{border-color:#ffd25a;background:rgba(255,210,90,.15)}
.rp__pay{margin-top:6px;display:flex;align-items:center;justify-content:space-between;gap:6px;background:#fff;color:var(--ink);border-radius:8px;padding:5px 8px;font-size:10px;position:relative;overflow:hidden;animation:rpPay .5s cubic-bezier(.3,1.4,.5,1) .5s both}
@keyframes rpPay{from{transform:translateY(20px);opacity:0}}
.rp__pl{font-weight:700;color:var(--blue)}
.rp__pay b{font-size:10.5px}
.rp__pay em{position:absolute;inset:0;display:grid;place-items:center;background:#14a06a;color:#fff;font-style:normal;font-weight:700;opacity:0;animation:pqIn .3s 1.4s both;animation-name:rpDone}
@keyframes rpDone{to{opacity:1}}
.rp__win--s{width:52%}
.rp__it{display:flex;gap:8px;align-items:center}
.rp__ic{width:40px;height:40px;border-radius:9px;background:radial-gradient(circle,#ffe9a8,#e8921c);position:relative;flex:none;box-shadow:0 0 12px #ffc53d}
.rp__ic::after{content:"";position:absolute;left:18px;top:5px;width:4px;height:28px;border-radius:2px;background:#fff;transform:rotate(35deg)}
.rp__it small{font-size:8.5px;color:#ffb347;font-weight:700;letter-spacing:.08em}.rp__it b{display:block;font-size:12px}.rp__it span{font-size:9.5px;color:#9fe0b1}
.rp__buy{margin-top:7px;display:flex;justify-content:space-between;align-items:center}
.rp__buy span{display:flex;gap:4px;align-items:center;font-size:11px;font-weight:700}.rp__buy span i{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9f3ff,#5fc4ff 55%,#2b7fd9)}
.rp__buy b{font-size:11px;background:linear-gradient(#ffd25a,#e8921c);color:#3a2600;padding:4px 14px;border-radius:7px}
.rp__get{display:flex;flex-direction:column;align-items:center;justify-content:center}
.rp__rays{position:absolute;left:50%;top:44%;width:240px;height:240px;margin:-120px;background:repeating-conic-gradient(rgba(255,230,140,.35) 0 10deg,transparent 10deg 20deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%);animation:fxSpin 8s linear infinite}
.rp__get b{position:relative;font-size:30px;font-weight:800;color:#fff;-webkit-text-stroke:1.5px #c27a12;text-shadow:0 3px 0 #c27a12;margin-top:-30%}
.rp__get small{position:relative;font-size:12px;color:#fff;background:rgba(10,12,30,.55);padding:3px 10px;border-radius:999px;margin-top:4px}
.pq-game[data-i="2"] .rp__get b{animation:gmPop .5s cubic-bezier(.3,1.6,.5,1)}
.rp__toast{position:absolute;left:50%;top:22%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 10px 24px rgba(0,0,0,.25);white-space:nowrap}
.pq-game[data-i="3"] .rp__toast{animation:rpWin .45s cubic-bezier(.3,1.5,.5,1)}
.rp__toast i{width:26px;height:26px;border-radius:50%;background:#14a06a;color:#fff;font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center}
.rp__toast b{display:block;font-size:12px}.rp__toast small{font-size:10px;color:var(--mute)}
@media(max-width:600px){.rp{border-width:7px;border-radius:24px}.rp__scr{border-radius:18px}.rp__me b{font-size:8px}.rp__hp,.rp__mp{width:56px}.rp__gold{display:none}.rp__map{display:none}.rp__win{width:78%}.rp__joy{width:40px;height:40px}.rp__sk span{width:22px;height:22px}.rp__sk .big{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.rp *{animation:none!important}}
/* ===== 사업 모델 일러스트 크게 ===== */
.pm{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
.pm__orb{width:min(620px,100%)}
.pm__hub{width:42%}
.pm__n{width:140px;margin:-70px 0 0 -70px;transform:rotate(var(--a)) translateX(min(37vw,238px)) rotate(calc(var(--a) * -1))}
.pm__n span{width:100px;height:100px;border-radius:30px}
.pm__n img{width:78px;height:78px}
.pm__n b{font-size:16px}
.pm__beam{width:min(37vw,238px)}
.mm{height:200px}
.mm>*{transform:scale(1.25)}
.pm__p.is-on .mm>*{animation-name:mmIn2}
@keyframes mmIn2{from{opacity:0;transform:translateY(24px) rotate(-6deg) scale(1.1)}to{transform:scale(1.25)}}
.mm-card{animation-name:mmIn2,mmHue!important}
@media(max-width:1100px){.pm{grid-template-columns:1fr}}
@media(max-width:600px){.pm__n{width:84px;margin:-42px 0 0 -42px;transform:rotate(var(--a)) translateX(36vw) rotate(calc(var(--a) * -1))}.pm__n span{width:58px;height:58px;border-radius:18px}.pm__n img{width:44px;height:44px}.pm__n b{font-size:14px}.pm__beam{width:36vw}.mm{height:170px}.mm>*{transform:scale(1)}@keyframes mmIn2{to{transform:none}}}
.mm>.mm-pow,.pm__p.is-on .mm>.mm-pow{transform:none;animation:none}
.pm__n.is-on b{margin-top:6px}
/* ===== 스타페이 앱 화면 (starstoa 스타일) ===== */
.pf{--sp:#4cb963;--spd:#2e9a4a}
.pf__steps img{filter:none!important;opacity:1!important}
.pf__steps button.is-on img{animation:ckPop .6s cubic-bezier(.3,1.6,.5,1)}
.pf__app{background:#f6f8f7!important}
.sp-bar{display:flex!important;align-items:center;gap:6px;padding:0 4px}
.sp-bar b{color:#14321c!important;font-weight:800!important;letter-spacing:.02em}
.sp-star{width:22px;height:22px}
.sp-cart{margin-left:auto;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.06);position:relative}
.sp-cart::after{content:"";position:absolute;left:7px;top:8px;width:12px;height:8px;border:1.6px solid #333;border-top:0;border-radius:0 0 3px 3px}
.sp-s{gap:10px}
.sp-h{font-size:19px!important;font-weight:700!important;line-height:1.3;color:#111}
.sp-h.sm{font-size:16px!important}
.sp-in{display:block;background:#fff;border:1.5px solid #e4e8e5;border-radius:12px;padding:8px 12px}
.sp-in small{display:block;font-size:10.5px;color:#8a92a3}
.sp-type{display:block;height:18px;font-size:13px;color:#111;font-weight:600}
.pf.go[data-i="0"] .sp-type::after{content:"star@starpay.kr";display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:top;animation:spType 1.2s steps(15) both}
@keyframes spType{from{width:0}to{width:16ch}}
.sp-dots{display:flex;gap:4px;height:18px;align-items:center}
.sp-dots i{width:7px;height:7px;border-radius:50%;background:#111;opacity:0}
.pf.go[data-i="0"] .sp-dots i{animation:pinOn .2s forwards}
.pf.go[data-i="0"] .sp-dots i:nth-child(1){animation-delay:1.3s}.pf.go[data-i="0"] .sp-dots i:nth-child(2){animation-delay:1.4s}.pf.go[data-i="0"] .sp-dots i:nth-child(3){animation-delay:1.5s}.pf.go[data-i="0"] .sp-dots i:nth-child(4){animation-delay:1.6s}.pf.go[data-i="0"] .sp-dots i:nth-child(5){animation-delay:1.7s}.pf.go[data-i="0"] .sp-dots i:nth-child(6){animation-delay:1.8s}.pf.go[data-i="0"] .sp-dots i:nth-child(7){animation-delay:1.9s}.pf.go[data-i="0"] .sp-dots i:nth-child(8){animation-delay:2s}
@keyframes pinOn{to{opacity:1}}
.sp-btn{display:block;text-align:center;padding:12px;border-radius:12px;background:var(--sp)!important;color:#fff;font-weight:700;font-size:14px;transition:transform .2s}
.pf.go .sp-btn{animation:spPress .3s ease-in-out 2.4s}
@keyframes spPress{50%{transform:scale(.95)}}
.sp-soc{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sp-soc span{font-size:11px;font-weight:700;text-align:center;padding:9px 4px;border-radius:10px}
.sp-soc .k{background:#fee500;color:#3a1d1d}.sp-soc .n{background:#03c75a;color:#fff}
.sp-pc{position:relative;overflow:hidden;background:#20242b;border-radius:16px;padding:14px 16px;color:#fff}
.sp-pc small{font-size:11px;color:#aab2c3}.sp-pc b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:#fff}
.sp-pc i{position:absolute;right:-20px;top:-24px;width:90px;height:90px;border-radius:50%;background:rgba(76,185,99,.25)}
.sp-pc.big{padding:20px 16px}.sp-pc.big b{font-size:28px;color:#7fe39a}
.sp-coin{position:absolute;right:22px;top:18px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc53d 55%,#e8921c);opacity:0}
.pf.go[data-i="3"] .sp-coin{animation:spCoin .9s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes spCoin{from{opacity:0;transform:translate(-60px,-40px) scale(.5)}to{opacity:1;transform:none}}
.sp-lb{font-size:11.5px;color:#6b7280;font-weight:600}
.sp-amt{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sp-amt span{text-align:center;padding:10px 0;border-radius:10px;background:#fff;border:1.5px solid #e4e8e5;font-size:13px;font-weight:700}
.sp-amt .on{border-color:var(--sp);color:var(--spd);background:#eefaf1}
.pf.go[data-i="1"] .sp-amt .on{animation:gmBump .5s cubic-bezier(.3,1.6,.5,1) .5s}
.sp-acct{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;border:1.5px solid #e4e8e5}
.sp-bank{width:30px;height:30px;border-radius:9px;background:#e7f0ff;color:#1747ff;font-size:9px;font-weight:800;display:grid;place-items:center}
.sp-acct div{flex:1}.sp-acct b{display:block;font-size:13px}.sp-acct small{font-size:10.5px;color:#8a92a3}
.sp-acct i{width:20px;height:20px;border-radius:50%;background:var(--sp);color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center}
.sp-steps{display:flex;align-items:center;gap:4px;padding:12px;background:#fff;border-radius:12px}
.sp-steps span{font-size:11px;font-weight:700;color:#aab2c3;transition:color .3s}
.sp-steps i{flex:1;height:3px;border-radius:2px;background:#e4e8e5;position:relative;overflow:hidden}
.sp-steps i::after{content:"";position:absolute;inset:0;background:var(--sp);transform:scaleX(0);transform-origin:left}
.pf.go[data-i="2"] .sp-steps span{animation:spLit .3s forwards}.pf.go[data-i="2"] .sp-steps span:nth-child(3){animation-delay:.7s}.pf.go[data-i="2"] .sp-steps span:nth-child(5){animation-delay:1.4s}
@keyframes spLit{to{color:var(--spd)}}
.pf.go[data-i="2"] .sp-steps i::after{animation:fill .6s forwards}.pf.go[data-i="2"] .sp-steps i:nth-of-type(2)::after{animation-delay:.7s}
.sp-chk{background:#fff;border-radius:12px;padding:6px 14px}
.sp-chk div{display:flex;justify-content:space-between;padding:9px 0;font-size:12.5px;border-bottom:1px solid #eef0ef}.sp-chk div:last-child{border:0}
.sp-chk span{color:#6b7280}
.sp-note{font-size:10.5px;color:#8a92a3;text-align:center}
.sp-hist{list-style:none;background:#fff;border-radius:12px;padding:4px 12px}
.sp-hist li{display:flex;justify-content:space-between;padding:9px 0;font-size:12px;border-bottom:1px solid #eef0ef}.sp-hist li:last-child{border:0}
.sp-hist b{color:var(--spd)}.sp-hist b.m{color:#e5484d}
.pf.go[data-i="3"] .sp-hist .new{animation:pqIn .5s var(--ease) .7s both;background:#eefaf1;margin:0 -12px;padding:9px 12px}
.sp-brand{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sp-brand span{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:8px;font-weight:800;line-height:1.1;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.sp-brand .b1{background:#1f1f1f;color:#fff;font-size:10px}.sp-brand .b2{background:#fff;color:#111}.sp-brand .b3{background:#fff;color:#2b2b2b}.sp-brand .b4{background:#f6c445;color:#1f1f1f}
.pf.go[data-i="4"] .sp-brand span{animation:mvPop .4s cubic-bezier(.3,1.6,.5,1) both}.pf.go[data-i="4"] .sp-brand span:nth-child(2){animation-delay:.08s}.pf.go[data-i="4"] .sp-brand span:nth-child(3){animation-delay:.16s}.pf.go[data-i="4"] .sp-brand span:nth-child(4){animation-delay:.24s}
.sp-prod{display:flex;gap:10px;align-items:center;background:#fff;border-radius:12px;padding:10px}
.sp-cup{width:44px;height:44px;border-radius:10px;background:#f3ead9;position:relative;flex:none}
.sp-cup::before{content:"";position:absolute;left:13px;top:12px;width:18px;height:22px;border-radius:2px 2px 6px 6px;background:#5a3a22}
.sp-cup::after{content:"";position:absolute;left:11px;top:9px;width:22px;height:5px;border-radius:3px;background:#fff;box-shadow:0 0 0 1px #ddd}
.sp-prod small{font-size:10px;color:#8a92a3}.sp-prod b{display:block;font-size:13px}.sp-prod em{font-style:normal;font-size:12px;font-weight:700;color:var(--spd)}
.sp-env{position:absolute;left:50%;bottom:120px;width:40px;height:28px;margin-left:-20px;border-radius:4px;background:#ffd25a;opacity:0}
.sp-env::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:linear-gradient(to bottom right,transparent 49%,#e8b030 50%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,#e8b030 50%) right/50% 100% no-repeat}
.pf.go[data-i="4"] .sp-env{animation:spEnv 1.2s cubic-bezier(.4,0,.2,1) 1s forwards}
@keyframes spEnv{0%{opacity:0;transform:translateY(20px) scale(.6)}30%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translate(70px,-160px) rotate(20deg) scale(.6)}}
.pf .pf__sent{color:var(--spd)!important;border-color:var(--sp)!important}
#insMode{display:grid;grid-template-columns:1fr 1fr;width:100%}
#insMode button{text-align:center;padding:10px 0}
/* ===== 할부 회차 카드 ===== */
.ins__sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:22px;font-variant-numeric:tabular-nums}
.ins__sum b{font-size:32px;font-weight:600;letter-spacing:-.02em}
.ins__sum i{font-style:normal;font-size:20px;color:var(--mute)}
.ins__sum span{font-size:20px;font-weight:600;color:var(--blue)}
.ins__bars{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;height:auto!important;align-items:stretch}
.ins__cd{position:relative;background:#fff;border-radius:16px;padding:12px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;border-top:5px solid #14a06a;box-shadow:0 6px 16px rgba(13,17,23,.05)}
.ins__cd.p{border-top-color:#ffb21e}
.ins__cd small{font-size:14px;font-weight:600;color:var(--sub)}
.ins__coins{position:relative;width:40px;height:34px}
.ins__coins i{position:absolute;left:4px;width:32px;height:10px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fff3b0,#ffc53d 60%,#e8921c);box-shadow:0 2px 0 #c97c16;opacity:0}
.ins__coins i:nth-child(1){bottom:0}.ins__coins i:nth-child(2){bottom:8px}.ins__coins i:nth-child(3){bottom:16px}
.ins__bars.go .ins__coins i{animation:insDrop .45s cubic-bezier(.3,1.5,.5,1) forwards;animation-delay:calc(var(--k) * 120ms + var(--d,0ms))}
.ins__coins i:nth-child(2){--d:80ms}.ins__coins i:nth-child(3){--d:160ms}
@keyframes insDrop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}
.ins__cd b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.ins__cd em{font-style:normal;font-size:14px;font-weight:600;padding:3px 8px;border-radius:999px;background:#e6f7ef;color:#0f8a57;white-space:nowrap}
.ins__cd.p em{background:#fff3e0;color:#b86b00}
.ins__bars.go .ins__cd{animation:pqIn .4s var(--ease) both;animation-delay:calc(var(--k) * 60ms)}
.ins__legend i.f{background:#14a06a!important}.ins__legend i.p{background:#ffb21e!important}
@media(max-width:600px){.ins__bars{grid-template-columns:repeat(3,1fr)}.ins__sum b{font-size:22px}.ins__sum span{font-size:16px}}
/* 지갑 폰: 스타페이 앱 스타일 */
.pq-ph.spw{background:#f4f5f8;padding:18px 16px 20px;gap:12px;width:min(350px,100%);min-height:600px}
.spw__pt{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:16px;padding:14px 16px;border:1px solid #e6e9f0}
.spw__pt small{font-size:12px;color:var(--sub)}
.spw .pq-bal{display:block;font-size:30px;line-height:1.2}.spw .pq-bal em{font-style:normal;font-size:16px;margin-left:3px}
.spw__card{position:relative;height:150px;border-radius:18px;padding:16px 18px;color:#fff;overflow:hidden;background:linear-gradient(130deg,#2a1c6e 0%,#5b34d6 55%,#8f5cff 100%);box-shadow:0 14px 28px -12px rgba(91,52,214,.55);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.spw__card::before{content:"";position:absolute;right:-40px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.1)}
.spw__card::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-100%);animation:spwSh 3.6s ease-in-out infinite}
@keyframes spwSh{60%,100%{transform:translateX(100%)}}
.spw__chip{display:block;width:34px;height:25px;border-radius:5px;background:linear-gradient(135deg,#ffe08a,#e8b54a)}
.spw__star{position:absolute;right:18px;top:16px;width:26px;height:26px;background:#ffd36e;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:fxSpin 6s linear infinite}
.spw__card b{position:absolute;left:18px;bottom:36px;font-size:15px;font-weight:600;letter-spacing:.1em}
.spw__card small{position:absolute;left:18px;bottom:16px;font-size:12px;letter-spacing:.08em;opacity:.8}
.spw__card em{position:absolute;right:18px;bottom:16px;font-style:normal;font-size:11px;letter-spacing:.12em;opacity:.85}
.pq-w[data-s="1"] .spw__card{transform:translateY(-4px) rotate(-3deg) scale(.98)}
.pq-w[data-s="2"] .spw__card{transform:translateX(8px) rotate(2deg)}
.spw__amt{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.spw__amt span{text-align:center;font-size:12px;font-weight:600;padding:8px 0;border-radius:10px;background:#fff;border:1px solid #e6e9f0;color:var(--sub);transition:.3s}
.pq-w[data-s="0"] .spw__amt .on{background:#ede6ff;border-color:#7b3fe4;color:#5b34d6;transform:scale(1.06)}
.spw__go{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:12px;padding:4px;border:1px solid #e6e9f0}
.spw__go span{text-align:center;font-size:13px;font-weight:600;padding:9px 0;border-radius:9px;color:var(--mute);transition:background .3s,color .3s}
.pq-w[data-s="0"] .spw__go [data-s="0"]{background:#7b3fe4;color:#fff}
.pq-w[data-s="1"] .spw__go [data-s="1"]{background:#e5533a;color:#fff}
.pq-w[data-s="2"] .spw__go [data-s="2"]{background:var(--green);color:#fff}
.spw__h{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 0}.spw__h b{font-size:14px;font-weight:600}.spw__h small{font-size:11px;color:var(--mute)}
.spw .pq-log{margin-top:0;background:#fff;border-radius:16px;border:1px solid #e6e9f0;padding:4px 12px;gap:0}
.spw .pq-log li{background:none;border-radius:0;padding:11px 0;font-size:14px;gap:10px;justify-content:flex-start;border-bottom:1px solid #f0f2f6}
.spw .pq-log li:last-child{border-bottom:0}
.spw .pq-log li i{flex:none;width:30px;height:30px;border-radius:50%;background:#ede6ff;display:grid;place-items:center}
.spw .pq-log li i::before{content:"+";font-style:normal;font-weight:600;color:#7b3fe4}
.spw .pq-log li.m i{background:#ffece8}.spw .pq-log li.m i::before{content:"₩";color:#e5533a;font-size:12px}
.spw .pq-log li.r i{background:#e3f6ec}.spw .pq-log li.r i::before{content:"↺";color:var(--green)}
.spw .pq-log li span{display:flex;flex-direction:column;line-height:1.3}.spw .pq-log li span small{font-size:11px;color:var(--mute);font-weight:500}
.spw .pq-log li b{margin-left:auto}.spw .pq-log li.p b{color:#7b3fe4}
.spw .pq-bal.up{color:#5b34d6}
@media(max-width:640px){.pq-ph.spw{min-height:0}.spw__card{height:130px}}
/* 쿠폰 흐름: 일러스트 크게 */
.pq-mk{padding:60px 20px;gap:4px}
.pq-mk::before{top:50%;margin-top:-34px;height:4px;left:12.5%;right:12.5%}
.pq-mk__st img{width:clamp(96px,10vw,136px);height:clamp(96px,10vw,136px);border-radius:34px;padding:12px;box-shadow:0 14px 30px rgba(13,17,23,.08)}
.pq-mk__st b{margin-top:14px;font-size:20px}.pq-mk__st small{font-size:14px;font-weight:500}
.pq-mk__st.is-on img{animation:gmBump .6s cubic-bezier(.3,1.6,.5,1)}
.pq-cp{width:96px;height:58px;margin:-170px 0 0 -48px;border-radius:12px}
.pq-cp b{font-size:21px}.pq-cp small{font-size:10px}
.pq-cp::before,.pq-cp::after{width:14px;height:14px;margin-top:-7px}.pq-cp::before{left:-7px}.pq-cp::after{right:-7px}
@media(max-width:600px){.pq-mk__st img{width:96px;height:96px;border-radius:26px}}
/* 사업 모델: 노드 · 미니 일러스트 크게, 패널 겹침 제거 */
.pm__orb{width:min(680px,100%)}
.pm__n{width:160px;margin:-80px 0 0 -80px;transform:rotate(var(--a)) translateX(min(37vw,262px)) rotate(calc(var(--a) * -1))}
.pm__n span{width:124px;height:124px;border-radius:36px}
.pm__n img{width:100px;height:100px}
.pm__n b{font-size:16px}
.pm__beam{width:min(37vw,262px)}
.pm__p{transition:none}
.pm__p.is-on{transition:opacity .45s,transform .55s var(--ease)}
.mm{height:230px}.mm>*{transform:scale(1.4)}
@media(max-width:1100px){.pm__n{transform:rotate(var(--a)) translateX(min(34vw,262px)) rotate(calc(var(--a) * -1))}.pm__beam{width:min(34vw,262px)}}
@media(max-width:600px){.pm__n{width:84px;margin:-42px 0 0 -42px;transform:rotate(var(--a)) translateX(36vw) rotate(calc(var(--a) * -1))}.pm__n span{width:64px;height:64px;border-radius:20px}.pm__n img{width:50px;height:50px}.pm__n b{font-size:14px}.pm__beam{width:36vw}.mm{height:170px}.mm>*{transform:scale(1)}}
.spw~.pq-fly,.pq-w__vis .pq-fly{top:42%}
/* 정산관리: 일러스트 · 글자 크게 */
.ps__nodes span{width:100px;height:100px;border-radius:30px}
.ps__nodes img{width:76px;height:76px}
.ps__nodes b{font-size:18px}.ps__nodes small{font-size:14px}
.ps__track{margin-top:-6px}
.ps__coin{width:40px;height:40px;margin:-20px 0 0 -20px;font-size:17px}
.ps__acts button{padding:18px 12px}.ps__acts b{font-size:20px}.ps__acts small{font-size:16px}
.ps__acts .ps__reset{font-size:16px}
.ps__led h3{font-size:22px}
.ps__led dl div{font-size:18px}
.ps__led dd::after,.ps__st b::after{font-size:14px}
.ps__led .ps__sum dd{font-size:32px}
.ps__safe{font-size:16px}
.ps__st span{font-size:16px}.ps__st b{font-size:24px}.ps__st small{font-size:14px}
.ps__mg li{grid-template-columns:64px 1fr;padding:20px}
.ps__mg img{width:64px;height:64px}
.ps__mg b{font-size:18px}.ps__mg span{font-size:16px}
.rt__ill{width:150px;height:150px;border-radius:40px}
.rt__ill img{width:104px;height:104px}
.rt__node--mid .rt__ill img.m-pg{width:120px}
.rt__node b{font-size:24px;margin-top:16px}.rt__node small{font-size:16px}
.rt__tag{font-size:16px;padding:6px 14px}
.rt__tok{width:54px;height:36px;margin:-18px 0 0 -27px}
.rt__coins i{width:42px;height:42px;margin:-21px 0 0 -21px;font-size:15px}
.rt__replay{font-size:16px}
.rt__sum b{font-size:22px}.rt__sum p{font-size:18px}
.vp__hd,.vp__row{grid-template-columns:230px 1fr 1fr}
.vp__hd b{font-size:20px}
.vp__k img{width:64px;height:64px}.vp__k b{font-size:20px}
.vp__row p{font-size:20px}.vp__row p small{font-size:16px}
.vp__row p.pg{padding:15px 18px 15px 48px}
/* 할부 회차 카드: 빈 공간 없애고 크게 */
.ins__bars{min-height:0!important;align-content:start;grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.ins__cd{padding:18px 10px 16px;gap:10px;border-radius:20px}
.ins__cd small{font-size:14px}
.ins__coins{width:60px;height:52px}
.ins__coins i{left:6px;width:48px;height:15px}
.ins__coins i:nth-child(2){bottom:12px}.ins__coins i:nth-child(3){bottom:24px}
.ins__cd b{font-size:16px}
.ins__cd em{font-size:14px;padding:4px 10px}
.ins__sum b{font-size:32px}.ins__sum i,.ins__sum span{font-size:22px}
@media(max-width:640px){.ps__nodes span{width:64px;height:64px;border-radius:20px}.ps__nodes img{width:48px;height:48px}.ps__nodes b{font-size:14px}.rt__ill{width:96px;height:96px;border-radius:28px}.rt__ill img{width:66px;height:66px}.rt__node b{font-size:18px}.vp__hd,.vp__row{grid-template-columns:1fr}.vp__k img{width:48px;height:48px}.ins__bars{grid-template-columns:repeat(3,1fr)}}
.ins__legend{font-size:16px}.ins__legend i{width:14px;height:14px}
.ins__chart{justify-content:center}.ins__bars{flex:none!important}.ins__res b{font-size:24px}.ins__res small{font-size:14px}.ins__k{font-size:16px}
/* 로고(원본 벡터): 별은 항상 바로 선 상태로 돌아옴 */
.logo .lg{height:40px}
.lg .lg-star{transform:none;transition:none}
.lg .lg-word path{transition:opacity .4s}
a:hover>.lg .lg-star,.lg.is-hov .lg-star{transform:none;animation:lgSpin .9s cubic-bezier(.3,1.3,.4,1)}
@keyframes lgSpin{from{transform:rotate(-360deg) scale(.85)}}
@keyframes lgIn{from{transform:translateX(-120px) rotate(-360deg) scale(.3);opacity:0}}
@keyframes lgSh{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(1100px)}}
@keyframes lgDash{35%{transform:translateX(60px) rotate(180deg) scale(1.08)}100%{transform:rotate(360deg)}}
@media(max-width:640px){.logo .lg{height:32px}}
/* 공통 글자 크기 보정: 본문 최소 14px */
.pq-chain b{font-size:16px}.pq-chain small{font-size:14px}
.best figcaption,.join figcaption,figcaption{font-size:14px}
.tvx__live p.tvx__note{font-size:14px}
.pf__st em{font-size:13px}
/* 상단 메뉴: 칸 안에서 가운데 정렬 (글자 길이와 상관없이 간격이 고르게 보이도록) */
@media(min-width:1101px){
  .gnb__list>li{text-align:center}
  .gnb__list>li>a{display:inline-block;text-align:center}
  .sub{align-items:center;padding-right:0}
  .sub a{text-align:center}
}
/* 영문 · 일문 상단: 칸 폭 조정, 하위메뉴 줄바꿈 허용, 오른쪽 버튼 잘림 방지 */
@media(min-width:1101px){
  :lang(en) .gnb__list>li{width:clamp(108px,8.6vw,128px)}
  :lang(ja) .gnb__list>li{width:clamp(108px,8.8vw,130px);min-width:0}
  :lang(ja) .sub a,:lang(en) .sub a{white-space:normal}
  :lang(en) .hd__r .btn,:lang(ja) .hd__r .btn{white-space:nowrap;font-size:15px;padding-left:16px;padding-right:16px}
  :lang(en) .hd__r,:lang(ja) .hd__r{gap:10px}
}
/* 상단 메뉴: 화면 폭에 맞춰 칸이 고르게 늘고 줄도록 (넘침 방지) */
@media(min-width:1101px){
  .gnb{flex:1 1 auto;min-width:0;justify-content:center}
  .gnb__list{width:100%;max-width:980px}
  .gnb__list>li,:lang(en) .gnb__list>li,:lang(ja) .gnb__list>li{flex:1 1 0;width:auto;min-width:0}
  .gnb__list>li>a{white-space:nowrap;padding-left:10px;padding-right:10px}
  .hd__r{flex:none}
}
@media(min-width:1101px) and (max-width:1360px){
  .gnb__list>li>a{font-size:16px;padding-left:8px;padding-right:8px}
  :lang(ja) .gnb__list>li>a{font-size:14px;padding-left:4px;padding-right:4px}
  :lang(en) .gnb__list>li>a{font-size:15px;padding-left:4px;padding-right:4px}
  .sub a,:lang(en) .sub a,:lang(ja) .sub a{font-size:14px;padding:6px 6px}
}
@media(min-width:1101px) and (max-width:1260px){
  .hd__r .btn{display:none}
}
/* 동의 체크박스: 글자와 세로 중심 맞춤 */
.agree{align-items:center;line-height:1.4}
.agree input{margin:0;flex:none;align-self:center;position:relative;top:-1px}
@media(min-width:1101px){:lang(ja) .gnb__list>li>a{font-size:15px;padding-left:6px;padding-right:6px}}
@media(min-width:1101px) and (max-width:1360px){:lang(ja) .gnb__list>li>a{font-size:14px;padding-left:4px;padding-right:4px}}
.agree input{top:-3px}
/* 가맹 문의: 글자 키우고 양식이 남는 폭을 채우도록 */
.ct{grid-template-columns:340px minmax(0,1fr);gap:40px}
.form{max-width:none;padding:40px 40px 34px;gap:20px}
.form__row{gap:18px}
.form label,.form legend{font-size:16px;gap:8px}
.form label>input,.form label>select,.form label>textarea{margin-top:8px}
.form input:not([type=checkbox]),.form select{height:52px;font-size:17px;padding:0 16px;border-radius:12px}
.form textarea{font-size:17px;padding:14px 16px;min-height:170px;line-height:1.6}
.checks{gap:12px}
.checks__list{gap:10px}
.checks__list label{padding:10px 18px;font-size:16px}
.agreebox{font-size:15px;padding:16px 18px;line-height:1.65}
.form__end .agree,.agree{font-size:16px}
.agree input{width:20px;height:20px}
.form__send{height:54px;padding:0 30px;font-size:17px}
.ctc{padding:30px 28px 28px}
.ctc__ill{width:84px}
.ctc small{font-size:15px}
.ctc strong{font-size:36px}
.ctc p{font-size:16px}
.ctc__copy{font-size:15px;padding:9px 16px}
.ctf{padding:22px 24px}
.ctf::before{left:51px}
.ctf li{grid-template-columns:56px 1fr;column-gap:14px;padding:8px 0}
.ctf span{width:56px;height:56px;border-radius:16px}
.ctf img{width:42px;height:42px}
.ctf b{font-size:18px}.ctf small{font-size:15px}
.cs__links a{font-size:17px;padding:20px 24px}
@media(max-width:900px){.ct{grid-template-columns:1fr}.form{padding:26px 20px}.form__row{grid-template-columns:1fr}}
/* 상단 메뉴 배경: 모서리 라운드 줄임 */
@media(min-width:1101px){.gnb__list>li>a{border-radius:10px}}
/* 일문 · 영문 상단 메뉴도 한국어와 같은 글자 크기: 일문은 글자 길이에 맞춰 칸 폭을 나눔 */
@media(min-width:1101px){
  :lang(ja) .gnb__list>li{flex:1 1 auto}
  :lang(ja) .gnb__list>li>a{font-size:18px;padding-left:8px;padding-right:8px}
  :lang(en) .hd__r .btn,:lang(ja) .hd__r .btn{font-size:16px}
}
@media(min-width:1101px) and (max-width:1360px){
  :lang(ja) .gnb__list>li>a,:lang(en) .gnb__list>li>a{font-size:16px;padding-left:6px;padding-right:6px}
  .sub a,:lang(en) .sub a,:lang(ja) .sub a{font-size:16px}
}
@media(min-width:1101px){:lang(en) .gnb__list>li{flex:1 1 auto}}
/* 하위메뉴: 단어 중간에서 끊기지 않도록, 메뉴 글자 가운데 기준으로 펼침 */
@media(min-width:1101px){
  .sub,:lang(en) .sub,:lang(ja) .sub{left:50%;right:auto;width:max-content;max-width:220px;transform:translateX(-50%);padding-right:0}
  .sub a,:lang(en) .sub a,:lang(ja) .sub a{white-space:nowrap;overflow-wrap:normal}
}
/* 하위메뉴 칸 폭: JS(sizeGnb)가 메뉴 글자 · 하위메뉴 중 긴 쪽에 맞춰 칸을 나눔 */
@media(min-width:1101px){
  .sub,:lang(en) .sub,:lang(ja) .sub{left:0;right:0;width:auto;max-width:none;transform:none}
  .sub a,:lang(en) .sub a,:lang(ja) .sub a{white-space:normal;overflow-wrap:normal;word-break:keep-all}
  .gnb.is-sized .gnb__list>li{flex-grow:1;flex-shrink:1}
}
@media(min-width:1101px){
  .gnb.is-sized .sub{left:6px;right:6px}
  :lang(ja) .sub a{word-break:normal;line-break:strict}
}
/* 일문: 하위메뉴를 한 줄로 두기 위해 폭 확보 (문의 버튼은 サポート 메뉴 안에도 있음) */
@media(min-width:1361px){:lang(ja) .sub a{white-space:nowrap}:lang(ja) .gnb__list{max-width:none}}
@media(min-width:1101px) and (max-width:1680px){:lang(ja) .hd__r .btn{display:none}}
@media(min-width:1101px){
  .hd:has(.gnb:hover) .hd__panel,.hd:has(.gnb:focus-within) .hd__panel{height:var(--subH,250px)}
  .gnb::after{height:calc(var(--subH,250px) - 10px)}
}
@media(min-width:1101px) and (max-width:1680px){:lang(en) .hd__r .btn{display:none}}
/* 모바일 메뉴: 헤더의 흐림 효과가 고정 메뉴 높이를 헤더 높이로 가두던 문제 수정 */
@media(max-width:1100px){
  .hd.is-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .hd.is-open .gnb{height:calc(100dvh - var(--hd))}
}
/* 모바일: 페이지 상단 큰 일러스트 숨김 (공간 확보) */
@media(max-width:768px){.sv__ill{display:none}}
/* 결제 흐름 '다시 보기': 아이콘 버튼 */
.rt__replay{width:44px;height:44px;padding:0;display:grid;place-items:center;flex:none;transition:border-color .2s,color .2s}
.rt__replay svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.rt__replay:hover{border-color:var(--blue);color:var(--blue)}.rt__replay:hover svg{transform:rotate(-180deg)}
.rt__replay:active svg{transform:rotate(-360deg)}
.rt__rl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:768px){.rt__top{flex-wrap:nowrap;gap:8px}.rt__top .seg{flex:1 1 auto;min-width:0}.rt__replay{width:40px;height:40px}}
@media(max-width:768px){
  .rt{padding:22px 16px 24px}
  .rt__top .seg button{white-space:nowrap;padding:9px 12px;font-size:15px}
}
/* 모바일 쿠폰 흐름: 위아래 빈 공간 줄이고 줄 간격 확보 */
@media(max-width:768px){
  .pq-vis.pq-mk{min-height:0;padding:32px 12px 28px;row-gap:28px;align-content:center}
  .pq-mk__st img{width:88px;height:88px;border-radius:24px;padding:8px}
  .pq-mk__st b{margin-top:10px;font-size:18px}
}
@media(max-width:768px){.pq-p:not(.is-on){display:none}}
/* 모바일: 화면 확대 연출 끄고 바로 보여줌 (위아래 빈 공간 제거) */
@media(max-width:768px){
  .zoom{height:auto}
  .zoom__sticky{position:static;height:auto;padding-block:24px 8px;gap:14px}
  .zoom__fig{width:100%;transform:none!important;border-radius:14px}
  .zoom__cap{opacity:1!important}
  .stmt{padding-block:56px 0}
}
@media(max-width:768px){.zoom__sticky{padding-inline:20px}}
@media(max-width:768px){.zoom__sticky{padding-block:32px 28px}}
/* 본문 굵기 정리: 문장 안의 굵은 글씨 · 설명 문장은 보통 굵기로 (제목 · 버튼 · 카드 제목은 유지) */
main p b,main p strong,main p em,
.pq-pts li b,.pq-pts li strong,
.pq-trust span>b+small,.pw__law b,main span>b:not(:only-child),
.pipe__ret b,.rt__tag em,.dc__left em,.draft>b,
.vs dd,.vp__row p.pg,.qa__q small,.ss small{font-weight:400}
.rt__tag em,.dc__left em{font-style:normal}
/* 서브 메뉴로 이동했을 때 섹션 제목 위 빈 공간 줄이기 (모든 서브 페이지 공통) */
main section[id]{scroll-margin-top:-64px}
@media(max-width:820px){main section[id]{scroll-margin-top:-48px}}
@media(min-width:821px){.stmt{padding-top:100px}}
.snav+section.blk{padding-top:72px}
@media(max-width:820px){.snav+section.blk{padding-top:48px}
  .ovs li{grid-template-columns:40px 1fr;column-gap:10px;padding:16px 14px}.ovs img{width:40px;height:40px}.ovs b{white-space:nowrap;font-size:18px}}
/* 모바일 첫 화면: 스크롤 축소 연출을 끄고 화면 한 장으로 (아래 빈 카드 영역 제거) */
@media(max-width:820px){
  .intro{height:auto}
  .intro__sticky{position:relative;height:100svh;min-height:600px}
  .intro__media{clip-path:none!important}
  .intro__txt{opacity:1!important;transform:none!important}
}
/* 모바일 PG 결제수단 탭: 숨긴 아이콘 칸 때문에 줄바꿈되던 문제 → 작은 아이콘 + 한 줄, 칸 높이 통일 */
@media(max-width:820px){
  .ck2__tabs{grid-auto-rows:1fr}
  .ck2__tabs button{grid-template-columns:36px 1fr;column-gap:10px;padding:12px}
  .ck2__tabs button .ck2__ic{display:grid;width:36px;height:36px;border-radius:12px}
  .ck2__tabs button .ck2__ic img{width:28px;height:28px}
  .ck2__tabs button b{white-space:nowrap;font-size:16px}
}
/* 약관 · 개인정보처리방침: 긴 문서용 글자 크기 */
.legal__body p,.legal__body li{font-size:16px;line-height:1.75}
.legal__body h2{font-size:20px}
.legal__body section{padding-bottom:28px}
.legal__toc a{font-size:15px}
.legal .draft,.draft{font-size:15px}
@media(max-width:820px){
  .legal{gap:28px}
  .legal__body p,.legal__body li{font-size:15px}
  .legal__body h2{font-size:18px}
  .legal__toc{gap:0 4px}.legal__toc a{font-size:14px;padding:6px 10px}
}
/* 약관류 페이지: 표 · 상단 제목도 문서 크기에 맞춤 */
.legal__body table th,.legal__body table td{font-size:15px;line-height:1.6}
main:has(.legal) .sv h1{font-size:clamp(34px,4.2vw,56px)}
main:has(.legal) .sv p{font-size:18px}
@media(max-width:820px){
  .legal__body table th,.legal__body table td{font-size:14px}
  main:has(.legal) .sv h1{font-size:32px}
  main:has(.legal) .sv p{font-size:16px}
}
.legal--solo{display:block;max-width:960px}
/* 약관 문서 탭: 좌우 꽉 차게, 3칸 균등 */
.legal__tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;max-width:960px;margin-bottom:40px}
.legal__tabs a{text-align:center;padding:12px 8px}
@media(max-width:820px){.legal__tabs{margin-bottom:28px}.legal__tabs a{font-size:14px;padding:10px 4px;line-height:1.35;word-break:keep-all}}
.legal__tabs,.legal--solo{max-width:none}
/* 푸터 글자 크기: 한 단계 작게 */
.ft{font-size:14px}
.ft__links{gap:6px 20px}.ft__links a{font-size:14px}
.family summary{font-size:14px;padding:9px 14px;min-width:180px}.family a{font-size:14px;padding:10px 14px}
.ft__cs b{font-size:28px}.ft__cs small{font-size:13px}
@media(max-width:820px){.ft__links{gap:4px 16px}.ft__links a{font-size:13px}.ft__cs b{font-size:24px}}
/* 푸터 로고: 마우스를 올리거나 보이는 동안 가끔 속도선 · 반짝임 */
.lg.is-hov .lg-ln{transform:scaleX(1.45);animation:lgFl .5s ease-in-out infinite alternate;animation-delay:calc(var(--i) * 90ms)}
.lg.is-hov .lg-shine{animation:lgSh .9s ease-out}
/* 모바일 푸터 회사 정보 글자 */
@media(max-width:820px){.ft address{font-size:13px;line-height:1.8}.ft address span{margin-right:12px}.ft__cp{font-size:12px}.ft__cs small{font-size:12px}}
/* 모바일: 푸터 관리자 링크 숨김 */
@media(max-width:820px){.ft__links li:has(.ft__admin),.ft__admin{display:none}}
/* 자주 묻는 질문: 흰 카드 + Q/A 표시, 차분한 아이콘 */
.faq{gap:12px}
.faq details,#faq .faq details{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:none;transition:border-color .25s,box-shadow .3s}
.faq details:hover{border-color:#cdd5e5}
.faq details[open],#faq .faq details[open]{border-color:rgba(23,71,255,.35);box-shadow:0 18px 36px -26px rgba(23,71,255,.35)}
.faq summary{gap:14px;padding:22px 24px;font-size:19px}
.faq summary::before{content:'Q';flex:none;width:30px;height:30px;border-radius:9px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-size:15px;font-weight:600}
.faq summary::after{content:'';width:30px;height:30px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%234b5363' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;font-size:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1),background-color .25s}
.faq details[open] summary::after{transform:rotate(180deg);background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%231747ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;color:inherit}
.faq summary{align-items:flex-start}.faq summary::before,.faq summary::after{margin-top:1px}
.faq details p{position:relative;margin:0 24px;padding:16px 0 22px 44px;border-top:1px dashed var(--line);color:var(--sub);font-size:17px;line-height:1.7}
.faq details p::before{content:'A';position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:9px;background:#fff3e0;color:#b86b00;display:grid;place-items:center;font-size:15px;font-weight:600}
.faq details[open] p{animation:pqIn .35s var(--ease) both}
@media(max-width:820px){.faq summary{padding:18px 16px;gap:10px}.faq summary::before,.faq details p::before{width:26px;height:26px;font-size:13px;border-radius:8px}.faq details p{margin:0 16px;padding:14px 0 18px 36px}.faq details p::before{top:14px}}
/* ==== 모바일 글자 크기 (mobile_type.py 생성) ==== */
@media(max-width:820px){body{font-size:16px}}
@media(max-width:820px){.pill,.btn{font-size:15px}}
@media(max-width:820px){.pill--lg{font-size:16px}}
@media(max-width:820px){.btn--sm{font-size:15px}}
@media(max-width:820px){.more{font-size:16px}}
@media(max-width:820px){.gnb__list>li>a{font-size:16px}}
@media(max-width:820px){.sub a{font-size:15px}}
@media(max-width:820px){.hd__tel b{font-size:16px}}
@media(max-width:820px){.hero__kicker{font-size:15px}}
@media(max-width:820px){.hero__lead{font-size:18px}}
@media(max-width:820px){.stage__label{font-size:15px}}
@media(max-width:820px){.ticker span{font-size:22px}}
@media(max-width:820px){.ticker i{font-size:17px}}
@media(max-width:820px){.head__sub{font-size:17px}}
@media(max-width:820px){.tile h3{font-size:24px}}
@media(max-width:820px){.tile p{font-size:16px}}
@media(max-width:820px){.ck__opt{font-size:15px}}
@media(max-width:820px){.ck__btn{font-size:15px}}
@media(max-width:820px){.step__k{font-size:15px}}
@media(max-width:820px){.step p{font-size:17px}}
@media(max-width:820px){.scr0__tag{font-size:15px}}
@media(max-width:820px){.rep__h b{font-size:19px}}
@media(max-width:820px){.rep__h span{font-size:15px}}
@media(max-width:820px){.rep__list li{font-size:15px}}
@media(max-width:820px){.vs h3{font-size:22px}}
@media(max-width:820px){.vs dt{font-size:15px}}
@media(max-width:820px){.vs dd small{font-size:15px}}
@media(max-width:820px){.lic__l p{font-size:17px}}
@media(max-width:820px){.facts small{font-size:15px}}
@media(max-width:820px){.plat__txt h3{font-size:22px}}
@media(max-width:820px){.plat__txt p{font-size:15px}}
@media(max-width:820px){.flow__n{font-size:19px}}
@media(max-width:820px){ol.flow b{font-size:19px}}
@media(max-width:820px){ol.flow p{font-size:15px}}
@media(max-width:820px){.nc__cat{font-size:15px}}
@media(max-width:820px){.nc b{font-size:19px}}
@media(max-width:820px){.nc time{font-size:15px}}
@media(max-width:820px){.crumb{font-size:15px}}
@media(max-width:820px){.sv p{font-size:19px}}
@media(max-width:820px){.snav a{font-size:15px}}
@media(max-width:820px){.blk-hd p{font-size:17px}}
@media(max-width:820px){.box h3{font-size:20px}}
@media(max-width:820px){.box p{font-size:16px}}
@media(max-width:820px){.box__no{font-size:15px}}
@media(max-width:820px){.box small{font-size:15px}}
@media(max-width:820px){.card h3{font-size:22px}}
@media(max-width:820px){.prod__specs li{font-size:15px}}
@media(max-width:820px){.note{font-size:15px}}
@media(max-width:820px){.tbl{font-size:16px}}
@media(max-width:820px){.tbl thead th{font-size:15px}}
@media(max-width:820px){.tbl td small{font-size:15px}}
@media(max-width:820px){.ov dt{font-size:15px}}
@media(max-width:820px){.hist time{font-size:28px}}
@media(max-width:820px){.hist b{font-size:19px}}
@media(max-width:820px){.hist p{font-size:15px}}
@media(max-width:820px){.org__teams .org__node{font-size:15px}}
@media(max-width:820px){.spec dt{font-size:15px}}
@media(max-width:820px){.pm li,.feat li{font-size:16px}}
@media(max-width:820px){.names span{font-size:15px}}
@media(max-width:820px){.flowline{font-size:15px}}
@media(max-width:820px){.feat-t{font-size:20px}}
@media(max-width:820px){.steps li{font-size:15px}}
@media(max-width:820px){.pts li{font-size:15px}}
@media(max-width:820px){.proc b{font-size:19px}}
@media(max-width:820px){.proc p{font-size:15px}}
@media(max-width:820px){.pkg button b{font-size:17px}}
@media(max-width:820px){.calc__q button{font-size:19px}}
@media(max-width:820px){.calc__q input{font-size:17px}}
@media(max-width:820px){.calc__sum b{font-size:22px}}
@media(max-width:820px){.adv span{font-size:28px}}
@media(max-width:820px){.adv b{font-size:19px}}
@media(max-width:820px){.adv small{font-size:15px}}
@media(max-width:820px){.adv p{font-size:16px}}
@media(max-width:820px){.faq summary{font-size:17px}}
@media(max-width:820px){.faq summary::after{font-size:19px}}
@media(max-width:820px){.tabs button,.tabs a{font-size:15px}}
@media(max-width:820px){.search input{font-size:15px}}
@media(max-width:820px){.search button{font-size:15px}}
@media(max-width:820px){.board .no{font-size:15px}}
@media(max-width:820px){.board .cat{font-size:15px}}
@media(max-width:820px){.board b{font-size:17px}}
@media(max-width:820px){.board time{font-size:15px}}
@media(max-width:820px){.pager a{font-size:15px}}
@media(max-width:820px){.art-hd .cat{font-size:15px}}
@media(max-width:820px){.art-hd p{font-size:15px}}
@media(max-width:820px){.art-body{font-size:17px}}
@media(max-width:820px){.art-body h2{font-size:20px}}
@media(max-width:820px){.art-nav b{font-size:16px}}
@media(max-width:820px){.cs h3{font-size:16px}}
@media(max-width:820px){.cs strong{font-size:28px}}
@media(max-width:820px){.cs p{font-size:15px}}
@media(max-width:820px){.form label,.form legend{font-size:15px}}
@media(max-width:820px){.form input:not([type=checkbox]),.form select,.form textarea{font-size:15px}}
@media(max-width:820px){.agreebox{font-size:15px}}
@media(max-width:820px){.draft{font-size:15px}}
@media(max-width:820px) and (max-width:1100px){.gnb__list>li>a{font-size:20px}}
@media(max-width:820px) and (max-width:820px){.hero__lead{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.ticker span{font-size:19px}}
@media(max-width:820px) and (max-width:820px){.head__sub{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.tile h3{font-size:22px}}
@media(max-width:820px) and (max-width:820px){.step p{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.vs h3{font-size:20px}}
@media(max-width:820px) and (max-width:820px){.sv p{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.snav a{font-size:15px}}
@media(max-width:820px) and (max-width:820px){.hist time{font-size:24px}}
@media(max-width:820px) and (max-width:820px){.pkg button b{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.board b{font-size:16px}}
@media(max-width:820px){.show__step .prod__specs li{font-size:16px}}
@media(max-width:820px){.seg button{font-size:15px}}
@media(max-width:820px){.sx__tabs button b{font-size:17px}}
@media(max-width:820px){.sx__top b{font-size:16px}}
@media(max-width:820px){.sx__kpis b{font-size:19px}}
@media(max-width:820px){.sx__sum b{font-size:20px}}
@media(max-width:820px){.miss__row{font-size:15px}}
@media(max-width:820px){.fd__play{font-size:15px}}
@media(max-width:820px){.fd__node{font-size:15px}}
@media(max-width:820px){.fd__steps li{font-size:15px}}
@media(max-width:820px){.cal__head b{font-size:15px}}
@media(max-width:820px){.cal__k{font-size:17px}}
@media(max-width:820px){.cal__span i{font-size:15px}}
@media(max-width:820px){.ins__ctl label{font-size:15px}}
@media(max-width:820px){.ins__ctl label b{font-size:22px}}
@media(max-width:820px){.ins__k{font-size:15px}}
@media(max-width:820px){.ins__months button{font-size:15px}}
@media(max-width:820px){.ins__res b{font-size:19px}}
@media(max-width:820px) and (max-width:820px){.sx__kpis b{font-size:15px}}
@media(max-width:820px) and (max-width:820px){.pkg button b{font-size:15px}}
@media(max-width:820px){.fd__ctl button{font-size:17px}}
@media(max-width:820px){.fd__node b{font-size:16px}}
@media(max-width:820px){.fd__no{font-size:15px}}
@media(max-width:820px){.fd__cap b{font-size:19px}}
@media(max-width:820px){.fd__ph b{font-size:15px}}
@media(max-width:820px) and (max-width:820px){.fd__cap b{font-size:15px}}
@media(max-width:820px){.flowline span{font-size:15px}}
@media(max-width:820px){.names span,.blk--gray .names span{font-size:15px}}
@media(max-width:820px){.fnd legend{font-size:17px}}
@media(max-width:820px){.fnd legend em{font-size:15px}}
@media(max-width:820px){.opt label b{font-size:16px}}
@media(max-width:820px){.fnd__k{font-size:15px}}
@media(max-width:820px){.fnd__r li b{font-size:16px}}
@media(max-width:820px){.rec__chips button{font-size:15px}}
@media(max-width:820px){.rec__why li{font-size:16px}}
@media(max-width:820px){.rec__r b{font-size:20px}}
@media(max-width:820px){.pays b{font-size:16px}}
@media(max-width:820px){.ck2__tabs button b{font-size:17px}}
@media(max-width:820px){.scn h5{font-size:16px}}
@media(max-width:820px){.scn .btn2{font-size:15px}}
@media(max-width:820px){.scn--done b{font-size:19px}}
@media(max-width:820px){.ex__tabs button b{font-size:16px}}
@media(max-width:820px){.ex__txt h3{font-size:24px}}
@media(max-width:820px){.ex__txt>p{font-size:16px}}
@media(max-width:820px){.ex__txt h4{font-size:15px}}
@media(max-width:820px){.tl2 b{font-size:16px}}
@media(max-width:820px){.tl2 p{font-size:15px}}
@media(max-width:820px) and (max-width:820px){.ck2__tabs button b{font-size:15px}}
@media(max-width:820px){.paybadge b{font-size:15px}}
@media(max-width:820px){.jp__tab b{font-size:19px}}
@media(max-width:820px){.jp__head p{font-size:16px}}
@media(max-width:820px){.jp__cols h4{font-size:15px}}
@media(max-width:820px){.jp__note{font-size:15px}}
@media(max-width:820px){.rd__l>p{font-size:16px}}
@media(max-width:820px){.rd__meter b{font-size:22px}}
@media(max-width:820px){.rd__msg{font-size:15px}}
@media(max-width:820px){.rd__list label,.dc__list label{font-size:16px}}
@media(max-width:820px){.dc__l>p:not(.note):not(.dc__left){font-size:16px}}
@media(max-width:820px){.dc__left{font-size:19px}}
@media(max-width:820px){.dc__tabs button{font-size:16px}}
@media(max-width:820px){.faq__search input{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.jp__tab b{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.rd__list label,.dc__list label{font-size:15px}}
@media(max-width:820px){.lc__big{font-size:24px}}
@media(max-width:820px){.lc__tabs button{font-size:15px}}
@media(max-width:820px) and (max-width:820px){.lc__big{font-size:20px}}
@media(max-width:820px){.jp__tab b{font-size:17px}}
@media(max-width:820px){.fd__ph b{font-size:16px}}
@media(max-width:820px){.fd__pts li{font-size:15px}}
@media(max-width:820px){.fd__pts li b{font-size:16px}}
@media(max-width:820px){.fd__pts li span{font-size:15px}}
@media(max-width:820px){.icards__hd h3{font-size:20px}}
@media(max-width:820px){.icards__hd span{font-size:15px}}
@media(max-width:820px){.icards__pick button{font-size:15px}}
@media(max-width:820px) and (max-width:600px){:lang(en) .hero__title{font-size:26px}}
@media(max-width:820px){.intro__kicker{font-size:15px}}
@media(max-width:820px){.intro__lead{font-size:18px}}
@media(max-width:820px) and (max-width:820px){.intro__lead{font-size:15px}}
@media(max-width:820px){.jx__no{font-size:15px}}
@media(max-width:820px){.jx__desc{font-size:16px}}
@media(max-width:820px){.rt__node b{font-size:17px}}
@media(max-width:820px){.rt__tag{font-size:15px}}
@media(max-width:820px){.rt__sum b{font-size:17px}}
@media(max-width:820px){.rt__sum p{font-size:16px}}
@media(max-width:820px){.vp__hd b{font-size:16px}}
@media(max-width:820px){.vp__k b{font-size:16px}}
@media(max-width:820px){.vp__row p{font-size:16px}}
@media(max-width:820px) and (max-width:1100px){.rt__node b{font-size:15px}}
@media(max-width:820px){.ck2__det>p{font-size:16px}}
@media(max-width:820px){.ck2__brands span{font-size:15px}}
@media(max-width:820px){.gw__chips button{font-size:15px}}
@media(max-width:820px){.gw__pay p{font-size:16px}}
@media(max-width:820px){.gw__steps b{font-size:15px}}
@media(max-width:820px){.gw__svc b{font-size:16px}}
@media(max-width:820px){.sup__st b{font-size:17px}}
@media(max-width:820px){.sup__st span{font-size:15px}}
@media(max-width:820px){.sup__call b{font-size:22px}}
@media(max-width:820px){.sup__call span{font-size:15px}}
@media(max-width:820px){.sup__promise b{font-size:16px}}
@media(max-width:820px){.mx-stn .n{font-size:16px}}
@media(max-width:820px){.mx-stn .t{font-size:17px}}
@media(max-width:820px) and (max-width:700px){.mx-lm text{font-size:15px}}
@media(max-width:820px){.vsd-coin--big text{font-size:15px}}
@media(max-width:820px){.pf__bar b{font-size:15px}}
@media(max-width:820px){.pf__btn{font-size:15px}}
@media(max-width:820px){.pf__amts span{font-size:15px}}
@media(max-width:820px){.pf__acct{font-size:15px}}
@media(max-width:820px){.pf__chk li{font-size:15px}}
@media(max-width:820px){.pf__pts{font-size:30px}}
@media(max-width:820px){.pf__coin::after{font-size:30px}}
@media(max-width:820px){.pf__bal{font-size:15px}}
@media(max-width:820px){.pf__gift b{font-size:17px}}
@media(max-width:820px){.pf__q summary b{font-size:16px}}
@media(max-width:820px){.pf__q summary::after{font-size:19px}}
@media(max-width:820px){.pipe__st b{font-size:16px}}
@media(max-width:820px){.pipe__ret{font-size:15px}}
@media(max-width:820px){.tk__t{font-size:24px}}
@media(max-width:820px){.tk2__t{font-size:17px}}
@media(max-width:820px) and (max-width:760px){.tk__t{font-size:19px}}
@media(max-width:820px) and (max-width:760px){.tk2__t{font-size:15px}}
@media(max-width:820px){.pq-acts b{font-size:19px}}
@media(max-width:820px){.pq-trust b{font-size:15px}}
@media(max-width:820px){.pq-bal{font-size:28px}}
@media(max-width:820px){.pq-n small{font-size:15px}}
@media(max-width:820px){.pq-tabs button{font-size:16px}}
@media(max-width:820px){.pq-pts li{font-size:17px}}
@media(max-width:820px){.pq-g>b{font-size:22px}}
@media(max-width:820px){.pq-btn{font-size:15px}}
@media(max-width:820px){.pq-sword b{font-size:15px}}
@media(max-width:820px){.pq-ok{font-size:28px}}
@media(max-width:820px){.pq-nm,.pq-gf{font-size:15px}}
@media(max-width:820px){.pq-kv dd{font-size:22px}}
@media(max-width:820px){.pq-mk__st b{font-size:16px}}
@media(max-width:820px){.pq-where b{font-size:16px}}
@media(max-width:820px) and (max-width:600px){.pq-acts b{font-size:16px}}
@media(max-width:820px) and (max-width:600px){.pq-bal{font-size:24px}}
@media(max-width:820px) and (max-width:600px){.pq-tabs button{font-size:15px}}
@media(max-width:820px) and (max-width:600px){.pq-kv dd{font-size:19px}}
@media(max-width:820px) and (max-width:600px){.pq-pts li{font-size:16px}}
@media(max-width:820px){.vl-pay>small{font-size:15px}}
@media(max-width:820px){.vl-pay li{font-size:15px}}
@media(max-width:820px){.sp3__f li{font-size:16px}}
@media(max-width:820px){.tl-tabs button{font-size:15px}}
@media(max-width:820px){.tl-g b{font-size:16px}}
@media(max-width:820px) and (max-width:600px){.tl-g b{font-size:15px}}
@media(max-width:820px){.ps__nodes b{font-size:15px}}
@media(max-width:820px){.ps__acts b{font-size:16px}}
@media(max-width:820px){.ps__led h3{font-size:17px}}
@media(max-width:820px){.ps__led dl div{font-size:15px}}
@media(max-width:820px){.ps__led .ps__sum dd{font-size:22px}}
@media(max-width:820px){.ps__st b{font-size:17px}}
@media(max-width:820px){.ps__mg b{font-size:15px}}
@media(max-width:820px){.pm__p p{font-size:17px}}
@media(max-width:820px){.pm__p li{font-size:16px}}
@media(max-width:820px){.bro__txt>p{font-size:16px}}
@media(max-width:820px){.pw__law{font-size:15px}}
@media(max-width:820px){.pw__ex b{font-size:16px}}
@media(max-width:820px){.pm__p li{font-size:15px}}
@media(max-width:820px){.ctc strong{font-size:24px}}
@media(max-width:820px){.ctf b{font-size:15px}}
@media(max-width:820px){.cs__links a{font-size:15px}}
@media(max-width:820px){.form input:not([type=checkbox]),.form select,.form textarea{font-size:15px}}
@media(max-width:820px){.form__send{font-size:15px}}
@media(max-width:820px){.bz__q input{font-size:15px}}
@media(max-width:820px){.bz__c{font-size:15px}}
@media(max-width:820px){.bz__ic i::after{font-size:28px}}
@media(max-width:820px){.bz__ic .i-no::after{font-size:28px}}
@media(max-width:820px){.bz__ic .i-q::after{font-size:24px}}
@media(max-width:820px){.bz__t{font-size:19px}}
@media(max-width:820px){.bz__why{font-size:15px}}
@media(max-width:820px){.mt__b b{font-size:16px}}
@media(max-width:820px){.mt__p>p{font-size:15px}}
@media(max-width:820px){.ovs b{font-size:19px}}
@media(max-width:820px){.ov2 dt{font-size:15px}}
@media(max-width:820px){.ov2 dd{font-size:16px}}
@media(max-width:820px){.ov2 .ov__en{font-size:15px}}
@media(max-width:820px) and (max-width:600px){.ovs b{font-size:16px}}
@media(max-width:820px){.gw__chips button{font-size:15px}}
@media(max-width:820px){.gw__m b{font-size:16px}}
@media(max-width:820px){.gw__pay p{font-size:15px}}
@media(max-width:820px){.gw__steps b{font-size:15px}}
@media(max-width:820px){.pm__n b{font-size:15px}}
@media(max-width:820px){.ins__sum b{font-size:24px}}
@media(max-width:820px){.ins__sum i{font-size:17px}}
@media(max-width:820px){.ins__sum span{font-size:17px}}
@media(max-width:820px) and (max-width:600px){.ins__sum b{font-size:19px}}
@media(max-width:820px) and (max-width:600px){.ins__sum span{font-size:15px}}
@media(max-width:820px){.pq-mk__st b{font-size:17px}}
@media(max-width:820px){.pm__n b{font-size:15px}}
@media(max-width:820px){.ps__nodes b{font-size:16px}}
@media(max-width:820px){.ps__acts b{font-size:17px}}
@media(max-width:820px){.ps__acts small{font-size:15px}}
@media(max-width:820px){.ps__acts .ps__reset{font-size:15px}}
@media(max-width:820px){.ps__led h3{font-size:19px}}
@media(max-width:820px){.ps__led dl div{font-size:16px}}
@media(max-width:820px){.ps__led .ps__sum dd{font-size:24px}}
@media(max-width:820px){.ps__safe{font-size:15px}}
@media(max-width:820px){.ps__st span{font-size:15px}}
@media(max-width:820px){.ps__st b{font-size:20px}}
@media(max-width:820px){.ps__mg b{font-size:16px}}
@media(max-width:820px){.ps__mg span{font-size:15px}}
@media(max-width:820px){.rt__node b{font-size:20px}}
@media(max-width:820px){.rt__node small{font-size:15px}}
@media(max-width:820px){.rt__tag{font-size:15px}}
@media(max-width:820px){.rt__replay{font-size:15px}}
@media(max-width:820px){.rt__sum b{font-size:19px}}
@media(max-width:820px){.rt__sum p{font-size:16px}}
@media(max-width:820px){.vp__hd b{font-size:17px}}
@media(max-width:820px){.vp__k b{font-size:17px}}
@media(max-width:820px){.vp__row p{font-size:17px}}
@media(max-width:820px){.vp__row p small{font-size:15px}}
@media(max-width:820px){.ins__cd b{font-size:15px}}
@media(max-width:820px){.ins__sum b{font-size:24px}}
@media(max-width:820px){.ins__sum i,.ins__sum span{font-size:19px}}
@media(max-width:820px) and (max-width:640px){.rt__node b{font-size:16px}}
@media(max-width:820px){.ins__legend{font-size:15px}}
@media(max-width:820px){.ins__res b{font-size:20px}}
@media(max-width:820px){.ins__k{font-size:15px}}
@media(max-width:820px){.pq-chain b{font-size:15px}}
@media(max-width:820px){.form label,.form legend{font-size:15px}}
@media(max-width:820px){.form input:not([type=checkbox]),.form select{font-size:15px}}
@media(max-width:820px){.form textarea{font-size:15px}}
@media(max-width:820px){.checks__list label{font-size:15px}}
@media(max-width:820px){.form__end .agree,.agree{font-size:15px}}
@media(max-width:820px){.form__send{font-size:15px}}
@media(max-width:820px){.ctc strong{font-size:26px}}
@media(max-width:820px){.ctc p{font-size:15px}}
@media(max-width:820px){.ctf b{font-size:16px}}
@media(max-width:820px){.cs__links a{font-size:15px}}
@media(max-width:820px) and (max-width:768px){.pq-mk__st b{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.ovs b{font-size:16px}}
@media(max-width:820px) and (max-width:820px){.ck2__tabs button b{font-size:15px}}
@media(max-width:820px){.faq summary{font-size:17px}}
@media(max-width:820px){.faq details p{font-size:15px}}
@media(max-width:820px){body{font-size:16px}}