/* Pretendard 로컬 번들 (CDN 차단 환경에서도 시안 그대로 렌더되도록)
   - Variable 1개 파일, weight 45~920 전부 커버
   - KS X 1001 상용 한글 2350자 + 본문 사용 문자 + 라틴/기호 서브셋 (450KB) */
@font-face{
  font-family:"Pretendard Variable";
  font-style:normal;font-display:swap;font-weight:45 920;
  src:url("assets/fonts/PretendardVariable.subset.woff2") format("woff2-variations");
}

/* ============================================================
   카드통합포인트 랜딩
   - MO (~1023px) : 모바일/태블릿 플로우 레이아웃, 1rem = 10px @375
   - PC (1024px~) : Figma 최종안 1920×1080 절대좌표, 1rem = 100vw/192
                    → 화면 폭에 비례해 여백·폰트·이미지가 함께 축소/확대
   ============================================================ */

:root{
  /* Text */
  --navy:#231B4D;
  --tag:#574ADC;
  --gray:#75777C;
  --ink:#17113C;
  --stat-label:#B0B0D5;
  --note:#6B6490;
  --num-blue:#596EFA;
  --num-violet:#723FF3;
  --ghost-1:#D9D2F7;
  --ghost-2:#D0C5FF;
  --usecase-no:#B1CBEE;
  --faq-line:#E5E4FE;
  --faq-ans:#6B6490;
  --cta-btn:#111748;
  --acc-icon:#6D36F3;

  /* Surface */
  --lav:#F6F6FE;
  --white:#fff;

  /* Gradient — Figma 원본 각도/스톱 그대로 */
  --g-hero:linear-gradient(-64.52191948860758deg,#8074FE 10.788%,#4D6CF8 94.452%);
  --g-29:linear-gradient(-29.618757462772166deg,#8074FE 10.788%,#4D6CF8 94.452%);
  --g-32:linear-gradient(-32.6951306959801deg,#8074FE 10.788%,#4D6CF8 94.452%);
  --g-42:linear-gradient(-42.51791489175551deg,#8074FE 10.788%,#4D6CF8 94.452%);
  --g-43:linear-gradient(-43.006134796711024deg,#8074FE 10.788%,#4D6CF8 94.452%);
  --g-44:linear-gradient(-44.853416200881014deg,#8074FE 10.788%,#4D6CF8 94.452%);
  --g-74:linear-gradient(-74.995432622023deg,#8074FE 10.788%,#4D6CF8 94.452%);

  --ease:cubic-bezier(.16,.84,.44,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:min(12px, calc(100vw / 31.25));}     /* MO: 1rem = 12px @375 */
body{
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--navy);background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;word-break:keep-all;
}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
img{display:block;max-width:100%;}
.grad,.faq-btn span,.ws-pill .gt{-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(2.4rem);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s);}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;}}

/* ============================================================
   ==============  MO : 기본(모바일 우선)  ====================
   ============================================================ */
.snap{overflow:visible;}
.sec{position:relative;width:100%;padding:7rem 2rem 8rem;overflow:hidden;}
.stage{position:static;}

.sec-tag{font-size:1.3rem;font-weight:700;letter-spacing:.06em;color:var(--tag);margin-bottom:1.4rem;}
.sec-tag.grad{background-image:var(--g-44);}
.sec-title{font-size:2.4rem;font-weight:700;line-height:1.4;letter-spacing:-.048rem;color:var(--navy);margin-bottom:1.6rem;}
.sec-desc{font-size:1.4rem;font-weight:400;line-height:1.7;color:var(--gray);}
.sec-desc br{display:none;}
br.mo{display:none;}

/* ---------- GNB ---------- */
.gnb{
  position:fixed;top:0;left:0;right:0;z-index:100;height:7.2rem;pointer-events:none;
  transform:translateY(0);
  transition:transform .45s var(--ease),opacity .35s var(--ease),height .35s var(--ease);
  will-change:transform;
}
/* 헤더 바탕 : 반투명 흰색 + 블러 (아래쪽은 자연스럽게 페이드) */
.gnb::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.10) 62%,rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  transition:background .35s var(--ease);
}
.gnb.solid::before{
  background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 62%,rgba(255,255,255,0) 100%);
}
.gnb.hide{transform:translateY(-130%);opacity:0;}
.gnb-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 2rem;}
.gnb-logo{pointer-events:auto;width:9.4rem;}
.gnb-logo img{width:100%;height:auto;}
.gnb-logo .logo-dark{display:none;}
.gnb.solid .gnb-logo .logo-white{display:none;}
.gnb.solid .gnb-logo .logo-dark{display:block;}
/* 모바일에서는 헤더에 버튼을 두지 않고 히어로(.hero-cta)에서 노출 */
.gnb-pill{
  pointer-events:auto;display:none;align-items:center;gap:1rem;
  padding:.7rem 1.3rem;border-radius:5rem;
  background:rgba(255,255,255,.3);border:1px solid #fff;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s;
}
.gnb-pill a{font-size:1.1rem;font-weight:700;color:#fff;white-space:nowrap;transition:color .3s;}
.gnb-pill i{width:1px;height:1.1rem;background:rgba(255,255,255,.6);transition:background .3s;}
.gnb.solid{height:6.2rem;}
.gnb.solid .gnb-pill{background:rgba(255,255,255,.75);border-color:var(--faq-line);box-shadow:0 .4rem 2rem rgba(87,74,220,.1);padding:.6rem 1.2rem;}
.gnb.solid .gnb-pill a{color:var(--navy);}
.gnb.solid .gnb-pill i{background:var(--faq-line);}

.dot-nav{display:none;}
.scroll-hint{display:none;}


/* ============================================================
   HERO 인트로 : 오브젝트 상승 → 타이틀 글리치(지지직) 등장
   ============================================================ */
body:not(.ready) .sec-hero .anim{opacity:0;}
body.ready .hero-visual{animation:heroRise 1.15s var(--ease) both;}
body.ready .hero-ghosts{animation:ghostIn 1.8s ease-out .4s both;}
body.ready .hero-t1{animation:glitchIn 1.05s linear .78s both;}
body.ready .hero-t2{animation:glitchIn 1.05s linear .96s both;}
body.ready .hero-desc{animation:fadeUp .8s var(--ease) 1.95s both;}

/* 모바일 : 텍스트가 폰 위에 세로로 쌓이므로 "글자 → (쉬고) → 폰" 순서로 시차를 크게 */
@media (max-width:1023px){
  body.ready .hero-ghosts{animation-delay:.2s;}
  body.ready .hero-t1{animation-delay:.32s;}
  body.ready .hero-t2{animation-delay:.52s;}
  body.ready .hero-desc{animation:fadeUp .7s var(--ease) 1.5s both;}
  body.ready .hero-cta{animation:fadeUp .6s var(--ease) 1.9s both;}
  body.ready .hero-visual{animation:heroRise 1.15s var(--ease) 2.35s both;}
}

@keyframes heroRise{
  0%  {opacity:0;transform:translate3d(0,9rem,0) scale(.965);}
  60% {opacity:1;}
  100%{opacity:1;transform:none;}
}
@keyframes ghostIn{ from{opacity:0;} to{opacity:1;} }
@keyframes fadeUp{ from{opacity:0;transform:translate3d(0,2.4rem,0);} to{opacity:1;transform:none;} }

@keyframes glitchIn{
  0%  {opacity:0;transform:translate3d(-.9rem,0,0) skewX(9deg);filter:blur(.25rem);
       text-shadow:.6rem 0 rgba(255,60,170,.9),-.6rem 0 rgba(60,220,255,.9);}
  7%  {opacity:1;transform:translate3d(.55rem,0,0) skewX(-7deg);filter:blur(0);}
  11% {opacity:.12;}
  17% {opacity:1;transform:translate3d(-.4rem,0,0) skewX(5deg);
       text-shadow:.36rem 0 rgba(255,60,170,.85),-.36rem 0 rgba(60,220,255,.85);}
  23% {opacity:.28;}
  29% {opacity:1;transform:translate3d(.25rem,0,0) skewX(-3deg);}
  36% {opacity:.5;}
  44% {opacity:1;transform:none;
       text-shadow:.2rem 0 rgba(255,60,170,.6),-.2rem 0 rgba(60,220,255,.6);}
  52% {opacity:.78;}
  60% {opacity:1;}
  68% {opacity:.9;}
  76% {opacity:1;text-shadow:.08rem 0 rgba(255,60,170,.4),-.08rem 0 rgba(60,220,255,.4);}
  86% {opacity:.97;}
  100%{opacity:1;transform:none;text-shadow:none;filter:none;}
}
@media (prefers-reduced-motion:reduce){
  body.ready .hero-visual,body.ready .hero-ghosts,
  body.ready .hero-t1,body.ready .hero-t2,body.ready .hero-desc,
  body.ready .hero-cta{animation:none;}
  body:not(.ready) .sec-hero .anim{opacity:1;}
}


/* ============================================================
   인라인 SVG 다이어그램 시퀀스 애니메이션
   - SERVICE      : 카드 둥둥 → 연결선 → 아이콘/라벨 → 화살표 → 결제완료 → "하나로!"
   - WHY SPECIAL 1: 카드사 등장 → 연결선 → 통합 API → 화살표 → 조회창 로딩
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* 컨테이너는 페이드 없이, 내부 시퀀스가 연출을 담당 */
.ws1-visual.rv,.service-visual.rv{opacity:1;transform:none;transition:none;}
.ws1-svg *,.svc-svg *{transform-box:fill-box;}

/* ---- 초기 상태 ---- */
.ws1-svg .wsc,.ws1-svg .wsapi,.ws1-svg .wsapitx,.ws1-svg .wsarrow,
.ws1-svg .wscard,.ws1-svg .wstitle,.ws1-svg .wsrow,.ws1-svg .wsdots,.ws1-svg .wsbtn{opacity:0;}
.ws1-svg .wsline path{stroke-dasharray:440;stroke-dashoffset:440;}
.ws-kg{opacity:0;}

.svc-svg .svc-chip,.svc-svg .svc-pill,.svc-svg .svc-picon,
.svc-svg .svc-arrow,.svc-svg .svc-box,.svc-svg .svc-hanaro{opacity:0;}
.svc-svg .svc-lines path{stroke-dasharray:760;stroke-dashoffset:760;}

/* ---- WHY SPECIAL 1 시퀀스 ---- */
.ws1-visual.in .wsc{animation:svgSlideL .6s var(--ease) both;}
.ws1-visual.in .wsc.c1{animation-delay:.05s;}
.ws1-visual.in .wsc.c2{animation-delay:.17s;}
.ws1-visual.in .wsc.c3{animation-delay:.29s;}
.ws1-visual.in .wsc.c4{animation-delay:.41s;}
.ws1-visual.in .wsline path{animation:svgDash .75s ease-out .68s both;}
/* 화살표·박스·로고·통합API 는 한 박자에 같이 등장 */
.ws1-visual.in .wsapi,
.ws1-visual.in .wsapitx,
.ws1-visual.in .ws-kg{animation:svgSlideL .55s var(--ease) 1.02s both;}
.ws1-visual.in .wsarrow{animation:svgGrowX .55s var(--ease) 1.02s both;}
.ws1-visual.in .wscard{animation:svgPop .55s var(--ease) 1.42s both;}
.ws1-visual.in .wstitle{animation:svgRise .45s var(--ease) 1.6s both;}
.ws1-visual.in .wsrow{animation:svgLoadRow .5s var(--ease) both;}
.ws1-visual.in .wsrow.r1{animation-delay:1.8s;}
.ws1-visual.in .wsrow.r2{animation-delay:1.98s;}
.ws1-visual.in .wsrow.r3{animation-delay:2.16s;}
.ws1-visual.in .wsdots{animation:svgBlink .9s ease-in-out 2.4s both;}
.ws1-visual.in .wsbtn{animation:svgPop .5s var(--ease) 2.7s both;}

/* ---- SERVICE 시퀀스 ---- */
.service-visual.in .svc-chip{animation:svgRiseIn .75s var(--ease) both;}
.service-visual.in .svc-chip.c1{animation-delay:.2s;}
.service-visual.in .svc-chip.c2{animation-delay:.35s;}
.service-visual.in .svc-chip.c3{animation-delay:.5s;}
.service-visual.in .svc-chip.c4{animation-delay:.05s;}
.service-visual.in .svc-lines path{animation:svgDashS .9s ease-out .95s both;}
.service-visual.in .svc-picon{animation:svgPop .5s var(--ease) 1.35s both;}
.service-visual.in .svc-pill{animation:svgRise .55s var(--ease) 1.5s both;}
.service-visual.in .svc-arrow{animation:svgDrop .5s var(--ease) 1.95s both;}
.service-visual.in .svc-box{animation:svgPop .55s var(--ease) 2.2s both;}
.service-visual.in .svc-hanaro{animation:svgHanaro .6s var(--ease) 2.7s both;}

/* ---- keyframes ---- */
@keyframes svgFade{from{opacity:0;}to{opacity:1;}}
@keyframes svgSlideL{from{opacity:0;transform:translateX(-26px);}to{opacity:1;transform:none;}}
@keyframes svgRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes svgRiseIn{from{opacity:0;transform:translateY(28px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes svgDrop{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:none;}}
@keyframes svgPop{0%{opacity:0;transform:scale(.86);}70%{opacity:1;transform:scale(1.03);}100%{opacity:1;transform:none;}}
@keyframes svgGrowX{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:none;}}
@keyframes svgDash{from{stroke-dashoffset:440;}to{stroke-dashoffset:0;}}
@keyframes svgDashS{from{stroke-dashoffset:760;}to{stroke-dashoffset:0;}}
@keyframes svgLoadRow{
  0%{opacity:0;transform:translateX(-20px) scaleX(.9);}
  55%{opacity:1;}
  100%{opacity:1;transform:none;}
}
@keyframes svgBlink{0%{opacity:0;}18%{opacity:1;}34%{opacity:.2;}52%{opacity:1;}70%{opacity:.35;}100%{opacity:1;}}
@keyframes svgFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}
@keyframes svgHanaro{0%{opacity:0;transform:scale(.6) rotate(-16deg);}65%{opacity:1;transform:scale(1.06) rotate(3deg);}100%{opacity:1;transform:none;}}

.ws1-svg .wsarrow{transform-origin:left center;}
.ws1-svg .wsrow{transform-origin:left center;}

@media (prefers-reduced-motion:reduce){
  .ws1-svg .wsc,.ws1-svg .wsapi,.ws1-svg .wsapitx,.ws1-svg .wsarrow,.ws1-svg .wscard,
  .ws1-svg .wstitle,.ws1-svg .wsrow,.ws1-svg .wsdots,.ws1-svg .wsbtn,.ws-kg,
  .svc-svg .svc-chip,.svc-svg .svc-pill,.svc-svg .svc-picon,.svc-svg .svc-arrow,
  .svc-svg .svc-box,.svc-svg .svc-hanaro{opacity:1!important;animation:none!important;transform:none!important;}
  .ws1-svg .wsline path,.svc-svg .svc-lines path{stroke-dashoffset:0!important;animation:none!important;}
}

/* ---------- 1. HERO ---------- */
.sec-hero{
  background:var(--g-hero);color:#fff;padding:12rem 2rem 6rem;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
}
/* 본문은 위, 폰 목업은 섹션 바닥에 붙도록 */
.sec-hero>.stage{width:100%;flex:1 1 auto;display:flex;flex-direction:column;}
.hero-glow{position:absolute;left:50%;top:-6rem;width:32rem;height:32rem;margin-left:-16rem;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(9rem);}
.hero-ghosts{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero-ghosts .g{
  position:absolute;white-space:nowrap;user-select:none;
  font-size:3.6rem;font-weight:900;letter-spacing:-.144rem;line-height:4.4rem;
  color:rgba(255,255,255,.09);
}
.hero-ghosts .g1{left:-6rem;top:5rem;}
.hero-ghosts .g2{left:22rem;top:5rem;}
.hero-ghosts .g3{left:-14rem;top:12rem;}
.hero-ghosts .g4{left:14rem;top:12rem;}
.hero-ghosts .g5{left:-10rem;top:52rem;}
.hero-ghosts .g6{left:18rem;top:52rem;}
.hero-ghosts .g7{left:-18rem;top:59rem;}
.hero-ghosts .g8{left:10rem;top:59rem;}
.hero-t1,.hero-t2{position:relative;z-index:2;font-size:3.6rem;font-weight:900;letter-spacing:-.144rem;line-height:1.25;color:#fff;}
.hero-desc{position:relative;z-index:2;margin-top:1.6rem;font-size:1.4rem;line-height:1.7;color:rgba(255,255,255,.82);}
/* 모바일 전용 : 헤더 대신 메인에 노출되는 CTA (텍스트 + 화살표) */
.hero-cta{position:relative;z-index:2;display:flex;align-items:center;gap:1.4rem;margin:2rem 0 1.4rem;}
.hero-cta-div{width:1px;height:1.4rem;background:rgba(255,255,255,.4);}
/* 헤더 pill과 동일한 라운드 박스 */
.hero-link{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.6rem;border-radius:5rem;
  background:rgba(255,255,255,.3);border:1px solid #fff;
  font-size:1.3rem;font-weight:700;letter-spacing:-.03rem;color:#fff;white-space:nowrap;
  transition:opacity .2s,background .2s var(--ease);
}
.hero-link::after{
  content:"";width:.6rem;height:.6rem;
  border-top:.15rem solid #fff;border-right:.15rem solid #fff;
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.hero-link:active{opacity:.7;background:rgba(255,255,255,.45);}
.hero-link:active::after{transform:rotate(45deg) translate(.15rem,-.15rem);}
/* 폰 목업 : 바닥에 붙이되 남는 세로 여백은 위/아래로 균등 분배 */
.hero-t1{margin-top:auto;}
.hero-visual{
  position:relative;z-index:2;
  width:min(86vw,40rem);max-width:none;
  margin-top:auto;margin-bottom:0;
  margin-left:calc(50% - min(43vw,20rem));margin-right:0;   /* 좌우 패딩을 넘어 가운데 정렬 */
}
.hero-visual img{width:100%;height:auto;}

/* ---------- 2. SERVICE ---------- */
.sec-service{background:var(--white);}
.service-visual{width:108%;margin:1rem -4% 0;}
.service-visual svg{width:100%;height:auto;display:block;overflow:visible;}

/* ---------- 3. WHY NOW ---------- */
.sec-whynow{background:var(--lav);}
.stats{margin-top:3.6rem;display:grid;grid-template-columns:1fr;gap:3rem;}
.stat-label{font-size:1.3rem;line-height:1.6;letter-spacing:-.052rem;color:var(--stat-label);}
.stat-num{margin-top:.4rem;font-weight:700;letter-spacing:-.08rem;line-height:1.2;white-space:nowrap;}
.stat-num .big{font-size:3.6rem;}
.stat-num .unit{font-size:2.2rem;}
.stat-num.blue{color:var(--num-blue);}
.stat-num.violet{color:var(--num-violet);}
.stat-note{margin-top:2.8rem;font-size:1.2rem;line-height:1.5;color:var(--note);}

/* ---------- 4. BENEFIT ---------- */
.sec-benefit{background:var(--white);}
.bf-list{margin-top:4rem;display:flex;flex-direction:column;gap:5rem;}
.bf-item{position:relative;}
.bf-glow{position:absolute;left:50%;top:0;width:15rem;height:15rem;margin-left:-7.5rem;border-radius:50%;filter:blur(4rem);opacity:.8;}
.bf-item:nth-child(1) .bf-glow{background:radial-gradient(circle,#D9C8F6 0%,#EFE2F7 60%,rgba(239,226,247,0) 100%);}
.bf-item:nth-child(2) .bf-glow{background:radial-gradient(circle,#F3C9E4 0%,#F7DDEE 60%,rgba(247,221,238,0) 100%);}
.bf-item:nth-child(3) .bf-glow{background:radial-gradient(circle,#CBD8F7 0%,#E3E8FB 60%,rgba(227,232,251,0) 100%);}
.bf-img{position:relative;width:100%;max-width:17rem;margin:0 auto 1.8rem;}
.bf-img img{width:100%;height:auto;}
.bf-no{position:relative;font-size:1.6rem;font-weight:700;color:var(--num-violet);}
.bf-t{position:relative;margin-top:.8rem;font-size:1.8rem;font-weight:700;color:var(--navy);}
.bf-d{position:relative;margin-top:.8rem;font-size:1.4rem;line-height:1.7;color:var(--gray);}
.bf-d br{display:none;}

/* ---------- 5·6. WHY SPECIAL ---------- */
.sec-ws{
  background:
    radial-gradient(29% 26% at  7.1% 40.1%, #DDD6F9 0%, rgba(221,214,249,0) 72%),
    radial-gradient(29% 26% at 54.7% 40.1%, #EFEAFB 0%, rgba(239,234,251,0) 72%),
    radial-gradient(29% 26% at  2.0% 60.1%, #F1DCF0 0%, rgba(241,220,240,0) 72%),
    radial-gradient(29% 26% at 49.8% 64.7%, #F4D8EC 0%, rgba(244,216,236,0) 72%),
    radial-gradient(29% 26% at 76.5% 57.6%, #D7E4FA 0%, rgba(215,228,250,0) 72%),
    var(--white);
  background-size:100% 200%;
  background-repeat:no-repeat;
}
/* 모바일 : 1·2가 한 섹션처럼 이어지도록 배경을 래퍼에 한 번만 깐다 */

.sec-ws{background:none;}
/* 1 → 2 사이 여백만 줄여 한 흐름으로 (배경이 이어져 있어 연결선은 불필요) */
.ws1{padding-bottom:4rem;}
.ws2{padding-top:2rem;}
.ws2 .ws-num{margin-top:0;}
.ws-bg{display:none;}
.ws-num{position:relative;font-size:7rem;font-weight:900;font-style:italic;line-height:1;margin-bottom:1.6rem;transform:scaleX(.82);transform-origin:left center;}
.ws1 .ws-num{color:var(--ghost-1);}
.ws2 .ws-num{color:var(--ghost-2);}
.sec-ws .sec-title,.sec-ws .sec-desc,.sec-ws .sec-tag{position:relative;}
.ws1-visual{position:relative;margin-top:3rem;aspect-ratio:956/426;}
.ws-kg{position:absolute;left:35.3%;top:42.1%;width:14.44%;height:5.08%;}
.ws-kg img{width:100%;height:100%;object-fit:contain;}
.ws2-visual{position:relative;margin:3rem auto 0;width:100%;max-width:26rem;}
.ws2-visual img{width:100%;height:auto;}
.ws-pills{position:relative;margin-top:2rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.ws-pill{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:1rem 1.6rem;border-radius:6rem;
  background:rgba(255,255,255,.55);border:1px solid #fff;
  font-size:1.4rem;font-weight:700;line-height:1.6;white-space:nowrap;
}
.ws-pill .gt{display:inline-flex;align-items:center;gap:.8rem;}
.ws-pill b{font-weight:700;}
.ws-pill.p1 .gt{background-image:var(--g-43);}
.ws-pill.p2 .gt{background-image:var(--g-29);}
.ws-pill.p3 .gt{background-image:var(--g-32);}
.ws-pill.p2{margin-left:2rem;}
.ws-pill.p3{margin-left:4rem;}

/* ---------- 7. FLOW ---------- */
.sec-flow{background:var(--lav);padding-left:0;padding-right:0;}
.sec-flow .sec-tag,.sec-flow .sec-title,.sec-flow .sec-desc,.sec-flow .flow-note{margin-left:2rem;margin-right:2rem;}
.flow-arrow{display:none;}   /* 모바일에서는 배경 화살표 미노출 */
.flow-arrow img{width:100%;height:auto;}
.flow-list{
  position:relative;margin-top:3.2rem;display:flex;gap:1.6rem;
  overflow-x:auto;padding:0 2rem 1.5rem;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.flow-list::-webkit-scrollbar{display:none;}
.flow-card{
  position:relative;flex:0 0 100%;height:40rem;
  background:#fff;border-radius:2rem;box-shadow:0 0 4rem rgba(87,74,220,.08);
  scroll-snap-align:center;scroll-snap-stop:always;
}

/* 페이지네이션 + 화살표 */
.flow-nav{position:relative;display:flex;align-items:center;justify-content:center;gap:1.8rem;margin-top:2.2rem;}
.flow-ar{
  width:3.6rem;height:3.6rem;border-radius:50%;flex:0 0 auto;
  background:#fff;border:1px solid var(--faq-line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 .4rem 1.6rem rgba(87,74,220,.12);
  transition:opacity .25s var(--ease),transform .2s var(--ease);
}
.flow-ar::before{content:"";width:.9rem;height:.9rem;border-left:.2rem solid var(--tag);border-bottom:.2rem solid var(--tag);}
.flow-ar.prev::before{transform:rotate(45deg);margin-left:.3rem;}
.flow-ar.next::before{transform:rotate(-135deg);margin-right:.3rem;}
.flow-ar:active{transform:scale(.92);}
.flow-ar[disabled]{opacity:0;pointer-events:none;}
.flow-dots{display:flex;align-items:center;gap:.8rem;}
.flow-dots button{width:.8rem;height:.8rem;border-radius:.4rem;background:rgba(87,74,220,.22);transition:width .25s var(--ease),background .25s var(--ease);}
.flow-dots button.active{width:2.4rem;background:var(--tag);}
.flow-badge{
  position:absolute;left:2rem;top:2rem;width:3.4rem;height:3.4rem;border-radius:50%;
  background:var(--g-74);display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;font-weight:700;color:#fff;
}
.flow-cap .fcbr{display:none;}
.flow-cap{position:absolute;left:2rem;right:2rem;top:6.6rem;font-size:1.6rem;font-weight:700;color:var(--navy);white-space:normal;word-break:keep-all;line-height:1.35;}
.flow-shot{position:absolute;left:50%;top:12rem;width:16.6rem;height:26.2rem;margin-left:-8.3rem;}
.flow-shot img{width:100%;height:100%;object-fit:contain;object-position:top center;}
.flow-note{position:relative;margin-top:2.4rem;font-size:1.3rem;line-height:1.6;color:var(--gray);}

/* ---------- 8. USE CASE ---------- */
.sec-usecase{background:var(--white);}
.uc-list{margin-top:3.6rem;display:flex;flex-direction:column;gap:2rem;}
.uc-item{position:relative;border-radius:2.4rem;overflow:hidden;}
.uc-photo{opacity:.8;}
.uc-photo img{width:100%;height:auto;}
.uc-no{position:absolute;left:2.4rem;top:2.6rem;font-size:1.6rem;font-weight:700;color:var(--usecase-no);}
.uc-title{position:absolute;left:7.2rem;top:2.5rem;font-size:1.8rem;font-weight:700;color:var(--ink);}
.uc-desc{position:absolute;left:7.2rem;top:6rem;font-size:1.3rem;line-height:1.7;color:var(--ink);}

/* ---------- 9. PARTNER ---------- */
.sec-partner{background:var(--white);}
.pt-visual{position:relative;margin-top:3.2rem;border-radius:2.4rem;overflow:hidden;}
.pt-bg{position:absolute;inset:0;}
.pt-bg img{width:100%;height:100%;object-fit:cover;}
.ci-grid{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;padding:2.4rem 2rem;}
/* 9개라 마지막 한 칸이 홀로 남으므로 가운데 정렬 */
.ci-grid .ci:last-child{grid-column:1 / -1;justify-self:center;width:calc(50% - .6rem);}
.ci{
  display:flex;align-items:center;justify-content:center;height:6.2rem;
  border-radius:1.2rem;background:rgba(255,255,255,.25);border:1px solid #fff;
}
.ci img{width:76%;height:auto;max-height:70%;object-fit:contain;}


/* ---------- 11. CONTACT (신청 · 문의하기) ---------- */
.sec-contact{background:var(--lav);}
.ct-form{position:relative;margin-top:2.8rem;}
.ct-grid{display:flex;flex-direction:column;gap:1.4rem;}
.ct-col{display:flex;flex-direction:column;gap:1.4rem;}
.ct-field{display:flex;flex-direction:column;gap:.7rem;}
.ct-field[hidden]{display:none;}
.ct-bizrow{display:flex;flex-direction:column;gap:1.4rem;}   /* display:flex 가 UA의 [hidden] 을 덮어쓰므로 명시 */
.ct-field label{font-size:1.3rem;font-weight:700;color:var(--navy);}
.ct-field label em{font-style:normal;color:#F0526D;}
.ct-sub{font-weight:400;font-size:1.1rem;color:var(--stat-label);margin-left:.4rem;}
/* 모바일은 iOS 자동 확대를 막기 위해 입력 글자를 16px로 고정한다.
   태블릿·PC는 해상도에 따라 rem으로 스케일(아래 미디어쿼리 참고). */
.ct-field input,.ct-field select,.ct-field textarea{
  width:100%;height:4.4rem;padding:0 1.3rem;border:1px solid var(--faq-line);border-radius:.9rem;
  background:#fff;font:inherit;font-size:16px;color:var(--navy);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.ct-field textarea{height:9.5rem;padding:1rem 1.2rem;line-height:1.6;resize:vertical;}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:#B8B8D0;font-size:16px;}
/* 셀렉트 : 브라우저 기본 화살표를 숨기고 커스텀 화살표를 배경으로 깐다 */
.ct-field select{
  font-size:16px;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  padding-right:4.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1.25 1.5L7 7.25L12.75 1.5' stroke='%23908CB4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.5rem center;background-size:1.3rem auto;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s;
}
.ct-field select::-ms-expand{display:none;}
.ct-field select:hover{border-color:#C9C5E4;}
.ct-field select:focus{background-color:#fff;}
.ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{
  outline:none;border-color:var(--tag);box-shadow:0 0 0 .3rem rgba(87,74,220,.12);
}
.ct-field [aria-invalid="true"]{border-color:#F0526D;}
/* 입력 오류 안내 : 비어 있어도 한 줄 높이를 유지해 노출 시 덜컹거리지 않게 한다 */
.ct-err{margin-top:-.3rem;font-size:1.1rem;line-height:1.5;min-height:1.65em;font-weight:400;color:#F0526D;word-break:keep-all;letter-spacing:-.02em;}
.ct-err-agree{min-height:0;margin-top:.6rem;text-align:center;}
.ct-err-agree:empty{display:none;}
.ct-radios{display:flex;flex-wrap:wrap;gap:1.1rem;margin-bottom:.2rem;}
.ct-radio{display:inline-flex;align-items:center;gap:.5rem;font-size:1.2rem;font-weight:400;color:var(--note);cursor:pointer;}
.ct-radio input{width:1.5rem;height:1.5rem;accent-color:var(--tag);}
.ct-agree{margin-top:2.6rem;padding:2.2rem 1.8rem;background:#fff;border-radius:1.4rem;border:1px solid var(--faq-line);}
.ct-agree-t{font-size:1.2rem;font-weight:700;color:var(--navy);text-align:center;margin-bottom:1.4rem;}
.ct-table{width:100%;border-collapse:collapse;font-size:1rem;line-height:1.6;color:var(--note);}
.ct-table th,.ct-table td{border:1px solid var(--faq-line);padding:1rem .6rem;vertical-align:middle;}
.ct-table th{background:var(--lav);font-weight:700;color:var(--navy);text-align:center;}
.ct-table td{text-align:center;}
.ct-table td:first-child{text-align:left;}
.ct-note{margin-top:1.4rem;font-size:1rem;line-height:1.6;color:var(--stat-label);text-align:center;}
.ct-check{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.8rem;font-size:1.2rem;font-weight:700;color:var(--navy);cursor:pointer;}
.ct-check input{width:1.5rem;height:1.5rem;accent-color:var(--tag);}
.ct-submit{margin-top:3.4rem;text-align:center;}
.ct-btn{
  width:100%;height:5.4rem;border-radius:1.2rem;background:var(--cta-btn);color:#fff;
  font-size:1.4rem;font-weight:700;transition:transform .2s var(--ease),opacity .2s;
}
.ct-btn:active{transform:scale(.98);}
.ct-msg{margin-top:.9rem;font-size:1.2rem;font-weight:700;color:var(--tag);}
.ct-msg:empty{display:none;}
.ct-msg.err{color:#F0526D;}

/* ---------- 문의 등록 완료 팝업 ---------- */
.ct-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:2.4rem;}
.ct-modal[hidden]{display:none;}
.ct-modal-dim{position:absolute;inset:0;background:rgba(20,16,50,.5);animation:ctFade .22s ease both;}
.ct-modal-box{
  position:relative;width:100%;max-width:32rem;padding:3.2rem 2.4rem 2.4rem;
  border-radius:2rem;background:#fff;text-align:center;
  box-shadow:0 2rem 6rem rgba(35,27,77,.28);animation:ctPop .3s var(--ease) both;
}
.ct-modal-ico{display:block;width:6.4rem;height:6.4rem;margin:0 auto 1.8rem;}
.ct-modal-t{font-size:1.7rem;font-weight:700;line-height:1.4;color:var(--navy);word-break:keep-all;}
.ct-modal-d{margin-top:1rem;font-size:1.3rem;line-height:1.7;color:var(--note);word-break:keep-all;}
.ct-modal-btn{
  width:100%;height:4.6rem;margin-top:2.4rem;border-radius:1.1rem;
  background:var(--cta-btn);color:#fff;font-size:1.4rem;font-weight:700;
  transition:transform .2s var(--ease),opacity .2s;
}
.ct-modal-btn:active{transform:scale(.98);}
.ct-modal-btn:focus-visible{outline:.2rem solid var(--tag);outline-offset:.3rem;}
@keyframes ctFade{from{opacity:0;}to{opacity:1;}}
@keyframes ctPop{from{opacity:0;transform:translateY(1.6rem) scale(.96);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .ct-modal-dim,.ct-modal-box{animation:none;}
}

/* ---------- 10. FAQ ---------- */
.sec-faq{background:var(--white);}
.faq-glow{position:absolute;right:-8rem;top:6rem;width:26rem;height:26rem;border-radius:50%;background:radial-gradient(circle,#DCD9FA 0%,#EEEDFD 60%,rgba(238,237,253,0) 100%);filter:blur(5rem);opacity:.8;}
.accordion{position:relative;margin-top:3rem;}
.acc{
  border:1px solid var(--faq-line);border-radius:1.6rem;padding:1.8rem 2rem;
  margin-bottom:1.2rem;overflow:hidden;height:6rem;transition:height .4s var(--ease);
}
.acc-q{width:100%;height:2.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;}
.acc-q b{font-size:1.5rem;font-weight:700;color:var(--navy);}
.acc-ico{position:relative;flex:0 0 auto;width:2.4rem;height:2.4rem;}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;left:.4rem;top:1.05rem;width:1.6rem;height:.3rem;background:var(--acc-icon);transition:transform .3s var(--ease),opacity .3s;}
.acc-ico::after{transform:rotate(90deg);}
.acc.open .acc-ico::after{transform:rotate(0);opacity:0;}
.acc-a{margin-top:.8rem;font-size:1.4rem;line-height:1.7;color:var(--faq-ans);opacity:0;transition:opacity .25s var(--ease);}
.acc.open .acc-a{opacity:1;transition-delay:.12s;}
.faq-aside{position:relative;margin-top:4rem;text-align:center;}
.faq-img{width:100%;max-width:20rem;margin:0 auto;}
.faq-img img{width:100%;height:auto;}
.faq-q{margin-top:1rem;font-size:1.7rem;font-weight:700;color:var(--navy);}
.faq-sub{margin-top:.8rem;font-size:1.4rem;line-height:1.6;color:var(--note);}
.faq-btn{
  display:inline-flex;align-items:center;justify-content:center;margin-top:2rem;
  padding:1.3rem 3rem;border-radius:1.4rem;border:2px solid #516CF8;
  box-shadow:0 0 3rem rgba(22,30,79,.06);font-size:1.6rem;font-weight:700;
  transition:transform .3s var(--ease);
}
.faq-btn span{background-image:var(--g-42);}
.faq-btn:hover{transform:translateY(-.3rem);}

/* ---------- 11. CTA + FOOTER ---------- */
.sec-cta{background:var(--white);padding:4rem 2rem 4rem;}
.cta-card{position:relative;border-radius:2.8rem;background:var(--lav);padding:4rem 2.4rem 3.2rem;overflow:hidden;}
.cta-blob{position:absolute;left:-10%;top:-14%;width:130%;height:82%;pointer-events:none;}
.cta-blob i{position:absolute;display:block;width:44%;height:56%;border-radius:50%;filter:blur(4rem);}
.cta-blob .e1{left:64%;top:44%;background:#A9DDF3;}
.cta-blob .e2{left:-4%;top:0;background:#E7E0F9;}
.cta-blob .e3{left:48%;top:26%;background:#F2BCDD;}
.cta-blob .e4{left:66%;top:-6%;background:#F9E6A8;}
.cta-blob .e5{left:46%;top:-4%;background:#D3C7F5;}
.cta-h1{position:relative;font-size:2.2rem;font-weight:700;line-height:1.4;letter-spacing:-.044rem;color:#000;}
.cta-desc{position:relative;margin-top:1.2rem;font-size:1.4rem;line-height:1.6;color:#000;}
.cta-btns{position:relative;margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem;}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.4rem 2.6rem;border-radius:1.2rem;background:var(--cta-btn);
  font-size:1.6rem;font-weight:700;color:#fff;white-space:nowrap;
  transition:transform .3s var(--ease),background .25s var(--ease);
}
.cta-btn.ghost{background:#fff;color:var(--cta-btn);border:1px solid var(--cta-btn);}
.cta-btn:hover{transform:translateY(-.3rem);}
/* 모바일 : 로고를 한 줄 차지하게 해서 링크들이 다음 줄부터 시작하도록 한다 */
.cta-foot{position:relative;margin-top:3.6rem;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;}
.cta-foot-logo{flex:0 0 100%;width:auto;line-height:0;margin-bottom:1.4rem;}
.cta-foot-logo img{width:8rem;height:auto;}
.cta-link{position:relative;font-size:1.1rem;color:#000;}
.cta-biz{margin-top:1.6rem;font-size:1rem;line-height:1.75;color:rgba(35,27,77,.65);word-break:keep-all;}
.cta-copy{margin-top:1rem;font-size:1rem;line-height:1.75;color:rgba(35,27,77,.5);}
.cta-illust{position:relative;margin:-1rem auto 0;width:52%;max-width:17rem;pointer-events:none;}
.cta-illust img{width:100%;height:auto;}

/* ---------- 태블릿 여백 보정 ---------- */
@media (min-width:480px){
  .sec-title{font-size:3rem;}
  .hero-t1,.hero-t2{font-size:4.6rem;}
  .cta-h1{font-size:2.8rem;}
}
@media (min-width:768px) and (max-width:1023px){
  /* 태블릿은 뷰포트에 비례해 커지되 12px(=모바일 최대치)~14px 사이로 제한 */
  html{font-size:clamp(12px, calc(100vw / 64), 13.5px);}
  .sec{padding:9rem 4rem 10rem;}
  .stage>*:not(.ws-bg):not(.hero-ghosts):not(.hero-glow):not(.flow-arrow):not(.faq-glow):not(.flow-list),
  .sec-flow .sec-tag,.sec-flow .sec-title,.sec-flow .sec-desc,.sec-flow .flow-note{
    max-width:60rem;margin-left:auto;margin-right:auto;
  }
  .hero-visual{max-width:34rem;}
  /* 이 구간은 본문 블록이 가운데 정렬되므로 히어로 텍스트도 가운데로 (모바일은 좌측 정렬 유지) */
  .sec-hero .hero-t1,.sec-hero .hero-t2,.sec-hero .hero-desc{text-align:center;}
  /* 이 구간에서는 히어로를 화면 높이에 억지로 맞추지 않는다 (상하 여백 과다) */
  .sec-hero{min-height:0;padding:9rem 4rem 6rem;}
  .sec-cta{padding:4rem;}
  /* BENEFIT / USE CASE 를 가로 3단으로 바꾸면 한 칸이 너무 좁아져 글자가 한두 자씩 끊긴다.
     → 모바일과 같은 1단 레이아웃을 유지하고 가운데 정렬만 한다. */
  .bf-list{flex-direction:column;gap:2.4rem;}
  .bf-item{flex:0 0 auto;}
  .uc-list{flex-direction:column;gap:1.6rem;}
  .uc-item{flex:0 0 auto;}
  .ci-grid{grid-template-columns:repeat(3,1fr);}
  .ci-grid .ci:last-child{grid-column:auto;justify-self:stretch;width:auto;}
  .stats{grid-template-columns:1fr 1fr;gap:3rem 2rem;}
  /* CONTACT — 16px 고정 해제. 이 구간부터는 라벨과 같은 배율(rem)로 스케일 */
  .ct-grid{flex-direction:row;gap:3rem;}
  .ct-col{flex:1 1 0;}
  .ct-field label{font-size:1.4rem;}
  .ct-sub{font-size:1.2rem;}
  .ct-field input,.ct-field select,.ct-field textarea{height:4.2rem;font-size:1.4rem;padding:0 1.3rem;}
  .ct-field textarea{height:10rem;padding:1rem 1.3rem;}
  .ct-field input::placeholder,.ct-field textarea::placeholder{font-size:1.4rem;}
  .ct-field select{font-size:1.4rem;padding-right:4rem;background-position:right 1.4rem center;background-size:1.3rem auto;}
  .ct-err{font-size:1.2rem;}
  .ct-radios{gap:.9rem;}
  .ct-radio{font-size:1.15rem;gap:.4rem;}
  .ct-radio input{width:1.4rem;height:1.4rem;}
  .ct-agree{padding:2rem 2.6rem;}
  .ct-btn{width:32rem;font-size:1.5rem;}
}


/* ============================================================
   ==============  MO 보정 (~1023px)  =========================
   ============================================================ */
@media (max-width:1023px){

br.mo{display:inline;}

/* 1. HERO — 고스트 문구 한 줄에 하나씩(겹침 제거), 타이틀/본문 밴드는 비움 */
/* 고스트 텍스트 : 히어로 전체에 균등하게 깔리도록 (행끼리 겹치지 않게 세로 분산)
   - 폭이 넓어져도 왼쪽에만 뭉치지 않게 글자 크기를 화면 폭에 비례시키고
   - 한 줄을 두 번 반복해 어떤 offset 에서도 화면 끝까지 덮이게 한다 */
.hero-ghosts .g{
  font-size:max(3.2rem, 6.2vw);line-height:1.25;letter-spacing:-.04em;
  color:rgba(255,255,255,.07);
}
.hero-ghosts .g::after{content:"\00a0\00a0흩어진 포인트가 하나의 결제가 되다";}
.hero-ghosts .g1{left:-9rem;top:1%;}
.hero-ghosts .g2{left:-26rem;top:13%;}
.hero-ghosts .g3{left:-4rem;top:25%;}
.hero-ghosts .g4{left:-20rem;top:37%;}
.hero-ghosts .g5{left:-13rem;top:49%;}
.hero-ghosts .g6{left:-30rem;top:61%;}
.hero-ghosts .g7{left:-6rem;top:73%;}
.hero-ghosts .g8{left:-23rem;top:85%;}

/* 2. WHY NOW — 2×2 + 의미 단위 줄바꿈 */
.stats{grid-template-columns:repeat(2,1fr);gap:2.6rem 1.2rem;}
.stat-label{font-size:1.1rem;line-height:1.55;letter-spacing:-.022rem;min-height:3.4rem;}
.stat-num{margin-top:.6rem;letter-spacing:-.05rem;}
.stat-num .big{font-size:2.4rem;}
.stat-num .unit{font-size:1.4rem;}

/* 3. BENEFIT — 아이콘 좌 / 텍스트 우 가로형 카드 (강제 줄바꿈 제거) */
.bf-list{gap:2.8rem;}
.bf-item{
  display:grid;grid-template-columns:9.6rem 1fr;column-gap:1.8rem;
  align-items:center;
}
.bf-glow{left:4.8rem;top:50%;width:13rem;height:13rem;margin:-6.5rem 0 0 -6.5rem;filter:blur(3.6rem);}
.bf-img{grid-column:1;grid-row:1 / span 3;align-self:center;width:9.6rem;max-width:none;margin:0;}
.bf-no{grid-column:2;grid-row:1;font-size:1.4rem;}
.bf-t{grid-column:2;grid-row:2;margin-top:.3rem;font-size:1.6rem;}
.bf-d{grid-column:2;grid-row:3;margin-top:.6rem;font-size:1.25rem;line-height:1.7;}
.bf-d br{display:none;}

/* 4. WHY SPECIAL — 모바일 전용 배경 : 1·2를 감싼 래퍼에 한 번만 깔아 끊김 없이 이어지게 */
.sec-ws{background:none;}
.ws-wrap{
  background:
    radial-gradient(58% 16% at 10%  8%, #E7DFFB 0%, rgba(231,223,251,0) 72%),
    radial-gradient(62% 16% at 92% 24%, #DAE7FB 0%, rgba(218,231,251,0) 74%),
    radial-gradient(70% 16% at 12% 46%, #F7DCEF 0%, rgba(247,220,239,0) 76%),
    radial-gradient(62% 16% at 88% 66%, #E7DFFB 0%, rgba(231,223,251,0) 74%),
    radial-gradient(76% 18% at 18% 93%, #F7DCEF 0%, rgba(247,220,239,0) 76%),
    linear-gradient(180deg,#fff 0%,#FBF9FD 50%,#F8F2F9 100%);
  background-repeat:no-repeat;
}

/* 5. WHY SPECIAL 2 — 다이어그램 위 왼쪽 상단에 단계 뱃지 */
.ws2-visual{position:relative;z-index:1;margin:2.4rem 0 0 auto;width:27rem;max-width:100%;opacity:.88;}
.ws-pills{position:relative;z-index:2;margin:-22rem 0 6.5rem 0;align-items:flex-start;padding:0;}
.ws-pill{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(.6rem);backdrop-filter:blur(.6rem);
  box-shadow:0 .6rem 2rem rgba(87,74,220,.14);
}
.ws-pill.p1{margin-left:0;}
.ws-pill.p2{margin-left:1.4rem;}
.ws-pill.p3{margin-left:2.8rem;}

/* 6. FLOW — 흰 박스는 고정, 안쪽 슬라이드만 스와이프 / 하단 여백 제거 */
.flow-stage{position:relative;}
.flow-list{
  margin:3.2rem 2rem 0;padding:0;gap:0;
  background:#fff;border-radius:2rem;box-shadow:0 0 4rem rgba(87,74,220,.08);
  overflow-x:auto;overflow-y:hidden;
}
.flow-card{
  flex:0 0 100%;height:38.2rem;
  background:none;box-shadow:none;border-radius:0;
  scroll-snap-align:start;scroll-snap-stop:always;
}
/* 슬라이드는 박스 등장과 함께 이미 보여야 함 — 카드별 등장 애니메이션 해제 */
.flow-card.rv,.flow-card.rv.in{opacity:1;transform:none;transition:none;}
.flow-shot{left:50%;top:11.8rem;width:16.6rem;height:26.2rem;margin-left:-8.3rem;}
.flow-ar{
  position:absolute;top:25.1rem;transform:translateY(-50%);
  width:3.4rem;height:3.4rem;z-index:3;
}
.flow-ar.prev{left:4.5rem;}
.flow-ar.next{right:4.5rem;}
.flow-ar:active{transform:translateY(-50%) scale(.92);}
.flow-nav{gap:0;margin-top:1.8rem;}

/* 7. USE CASE — 카드 높이를 줄이고 일러스트는 우하단만 노출 */
.uc-list{gap:1.4rem;}
.uc-item{border-radius:2rem;}
.uc-photo{height:18rem;overflow:hidden;}
.uc-photo img{width:100%;height:100%;object-fit:cover;object-position:88% 82%;}
.uc-no{left:2rem;top:2.2rem;font-size:1.4rem;}
.uc-title{left:6.2rem;top:2.1rem;font-size:1.7rem;}
.uc-desc{left:2rem;top:5.8rem;right:auto;max-width:20rem;font-size:1.25rem;line-height:1.65;}
.uc-desc br{display:none;}

/* 8. CTA — 카드 일러스트 숨김. 푸터는 로고 다음 줄부터 링크 */
.cta-illust{display:none;}
/* iOS Safari 대응 :
   .cta-blob 의 filter:blur() 위에 opacity/transform 이 걸린 요소(.rv)가 겹치면
   그 요소의 박스 크기만큼 블러 배경이 네모나게 떠 보이는 렌더링 버그가 있다.
   (제목 / 설명 / 버튼 영역 뒤에 밝은 사각형이 생기는 현상)
   → 모바일에서는 CTA 카드 안의 등장 애니메이션을 쓰지 않아 합성 레이어를 만들지 않고,
     블러 레이어는 자체 레이어로 한 번만 래스터화되게 한다. */
.cta-card .rv{opacity:1;transform:none;transition:none;}
.cta-blob{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.cta-foot{gap:.6rem 1.2rem;}
.cta-foot-logo{flex:0 0 100%;width:auto;margin-bottom:1.2rem;}
.cta-foot-logo img{width:9rem;}
.cta-link{font-size:1.05rem;}

}

/* ============================================================
   ==============  PC : Figma 1920 절대좌표  ==================
   1rem = 100vw/192 → 1920에서 시안과 1:1, 그 외 폭에서는 비율 축소
   ============================================================ */
@media (min-width:1024px){

/* 1rem = 화면에 16:9(1920×1080) 스테이지가 꽉 들어가는 크기.
   가로·세로 중 작은 쪽이 기준이라 어떤 해상도에서도 시안 비율이 유지된다. */
html{font-size:min(calc(100vw / 192), calc(100vh / 108));}
@supports (height:100dvh){ html{font-size:min(calc(100vw / 192), calc(100dvh / 108));} }
/* 자유 스크롤 구간(문의하기 + 푸터) 전용 단위.
   1rem 은 화면이 작아질수록 같이 줄어들어 노트북에서 글자가 너무 작아지므로
   px 하한선을 둔 단위를 따로 쓴다. 1920 에서는 1rem(=10px) 과 동일하다.
   --ctu : 폼 본문용 (하한 9px)   --cu : 버튼처럼 두 섹션이 공유하는 요소용 (하한 7.5px) */
html{--ctu:max(1rem, 9px); --cu:max(1rem, 7.5px);}

body{overflow-x:hidden;}

/* 스크롤 스냅 (스크롤바 숨김) */
/* 섹션 이동은 script.js 가 휠/키를 받아 한 칸씩 처리한다.
   CSS scroll-snap 은 (a) 자유 스크롤 뒤 보정하는 2단 움직임이 생기고
   (b) 휠 한 칸처럼 작은 이동은 원래 자리로 되돌려버려서 쓰지 않는다. */
.snap{
  height:100vh;height:100dvh;overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:none;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-y:contain;
}
.snap::-webkit-scrollbar{display:none;}
.panel{scroll-snap-align:none;}

/* 섹션(패널) = 화면 전체 / 스테이지 = 1920×1080 비율 고정 */
/* 섹션 높이 = 화면 높이. 단 화면이 세로로 너무 길면(스테이지의 1.2배 초과) 상하 여백이
   과해지므로 거기서 멈춘다. 16:9 / 16:10 / 3:2 등 일반적인 모니터는 모두 1.2배 안쪽이라
   "한 화면 = 한 섹션" 스냅이 그대로 유지된다. */
.sec{
  width:100%;min-height:min(100vh,129.6rem);margin:0;padding:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
@supports (height:100dvh){ .sec{min-height:min(100dvh,129.6rem);} }
.stage{position:relative;flex:0 0 auto;width:192rem;height:108rem;overflow:visible;}
.stage>*{position:absolute;}

/* 공통 타이포 */
.sec-tag{left:16.8rem;top:12.8rem;margin:0;font-size:2rem;font-weight:700;letter-spacing:0;line-height:1.2;white-space:nowrap;}
.sec-title{left:16.8rem;top:20rem;margin:0;font-size:5.2rem;line-height:1.4;letter-spacing:-.104rem;white-space:nowrap;}
.sec-desc{left:16.8rem;margin:0;font-size:2rem;line-height:1.6;white-space:nowrap;}
.sec-desc br{display:inline;}

/* ---------- GNB ---------- */
.gnb{height:14.2rem;top:0;transition:transform .45s var(--ease),opacity .35s var(--ease),height .35s var(--ease);}
.gnb-inner{display:block;position:relative;width:192rem;margin:0 auto;padding:0;}
.gnb-logo{position:absolute;left:8rem;top:6.2rem;width:10.21rem;height:1.8rem;transition:top .35s var(--ease);}
.gnb-logo img{width:100%;height:100%;object-fit:contain;}
.gnb-pill{
  position:absolute;left:auto;right:8rem;top:4.4rem;width:auto;height:5.2rem;
  display:flex;align-items:center;gap:1.7rem;padding:0 2.4rem;
  border-radius:5.5522rem;border-width:.0925rem;
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s,
             top .35s var(--ease),height .35s var(--ease),padding .35s var(--ease);
}
.gnb-pill a{position:static;transform:none;font-size:1.7rem;line-height:1;transition:color .3s,font-size .35s var(--ease);}
.gnb-pill a:hover{opacity:.7;}
.gnb-pill i{position:static;transform:none;width:.1rem;height:1.4rem;}

/* 메인(HERO) 외 섹션에서는 헤더 영역을 컴팩트하게 */
.gnb.solid{height:9.4rem;}
.gnb.solid .gnb-logo{top:3.6rem;}
.gnb.solid .gnb-pill{top:2.6rem;height:4.6rem;padding:0 2.1rem;gap:1.5rem;}
.gnb.solid .gnb-pill a{font-size:1.6rem;}
.gnb.solid .gnb-pill i{height:1.2rem;}

/* 우측 도트 네비 */
.dot-nav{display:flex;position:fixed;right:max(1.2rem, calc((100vw - 192rem) / 2 + 1.2rem));top:min(50%, 54rem);transform:translateY(-50%);z-index:90;flex-direction:column;gap:1.3rem;}
.dot-nav button{width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center;}
.dot-nav button span{width:.6rem;height:.6rem;border-radius:50%;background:rgba(87,74,220,.25);transition:all .3s var(--ease);}
.dot-nav button.active span{background:var(--tag);width:.8rem;height:.8rem;box-shadow:0 0 0 .4rem rgba(87,74,220,.15);}
.dot-nav.on-dark button span{background:rgba(255,255,255,.35);}
.dot-nav.on-dark button.active span{background:#fff;box-shadow:0 0 0 .4rem rgba(255,255,255,.2);}

/* 전체 덮개형 레이어가 하위 요소 클릭을 막지 않도록 */
.bf-list,.uc-list,.ws-pills,.flow-list,.faq-aside{pointer-events:none;}
.bf-list>*,.uc-list>*,.ws-pills>*,.flow-list>*,.faq-aside>*{pointer-events:auto;}

/* ---------- 1. HERO ---------- */
.hero-glow{left:71.1rem;top:10.3rem;width:49.8rem;height:49.8rem;margin:0;filter:blur(15rem);background:rgba(255,255,255,.55);}
.hero-ghosts{inset:0;}
/* 16:9 보다 넓은 화면에서는 섹션이 스테이지보다 넓어서, 스테이지 안에만 있던 고스트
   텍스트가 좌우 끝에서 뚝 끊겨 보였다. → 스테이지 밖으로 넘치게 두고(overflow:visible)
   왼쪽 열은 왼쪽으로, 오른쪽 열은 오른쪽으로 문구를 한 번 더 이어 붙여 화면 끝까지 덮는다. */
.hero-ghosts{overflow:visible;}
.hero-ghosts .g{font-size:9.7376rem;letter-spacing:-.3895rem;line-height:11.6rem;color:rgba(255,255,255,.085);}
.hero-ghosts .g1::before,.hero-ghosts .g3::before,
.hero-ghosts .g5::before,.hero-ghosts .g7::before{content:"흩어진 포인트가 하나의 결제가 되다\00a0\00a0";}
.hero-ghosts .g2::after,.hero-ghosts .g4::after,
.hero-ghosts .g6::after,.hero-ghosts .g8::after{content:"\00a0\00a0흩어진 포인트가 하나의 결제가 되다";}
.hero-ghosts .g1{left:-154.2rem;top:13.1rem;}
.hero-ghosts .g2{left:113rem;top:13.1rem;}
.hero-ghosts .g3{left:-169.3rem;top:29.7rem;}
.hero-ghosts .g4{left:97.9rem;top:29.7rem;}
.hero-ghosts .g5{left:-194.9rem;top:69.8rem;}
.hero-ghosts .g6{left:72.3rem;top:69.8rem;}
.hero-ghosts .g7{left:-160.2rem;top:85.5rem;}
.hero-ghosts .g8{left:107rem;top:85.5rem;}
.hero-t1,.hero-t2{font-size:9.7376rem;letter-spacing:-.3895rem;line-height:11.6rem;height:11.6rem;white-space:nowrap;}
.hero-t1{left:16rem;top:47.1rem;}
.hero-t2{left:118.1rem;top:47.1rem;}
.hero-desc{left:119.2rem;top:59.3rem;width:90.6rem;margin:0;font-size:1.9709rem;line-height:1.6;}
.hero-desc br{display:inline;}
.hero-cta{display:none;}
/* [버그 수정] 모바일용 .sec-hero>.stage{width:100%} 가 특이도(0,2,0)로 .stage{width:192rem}(0,1,0)
   를 이겨서, 16:9 가 아닌 화면에선 히어로 스테이지만 화면 전체 폭이 되어
   컨텐츠가 통째로 왼쪽으로 밀렸다. PC에서는 원래 스테이지 규격으로 되돌린다. */
.sec-hero>.stage{width:192rem;flex:0 0 auto;display:block;}
/* 시각 보정 : 기준은 "좌·우 타이틀과 폰 본체 사이 여백이 같아 보이는 축".
   폰 본체는 이미지의 28.6%~74.4% 구간이라 박스가 아니라 본체 기준으로 역산한다.
   t1 오른쪽 끝 73.1rem / t2 왼쪽 끝 115.4rem → 양쪽 여백 5.43rem 동일 (축 94.25rem) */
.hero-visual{left:60.67rem;top:20.5rem;width:68.6rem;max-width:none;margin:0;}
.scroll-hint{display:flex;left:96rem;transform:translateX(-50%);bottom:3.2rem;flex-direction:column;align-items:center;gap:.8rem;font-size:1.1rem;letter-spacing:.1em;color:rgba(255,255,255,.55);}
.scroll-hint i{display:block;width:.1rem;height:3rem;background:rgba(255,255,255,.28);overflow:hidden;position:relative;}
.scroll-hint i::after{content:"";position:absolute;left:0;width:100%;height:1.2rem;background:#fff;animation:sd 1.6s ease-in-out infinite;}
@keyframes sd{0%{transform:translateY(-1.2rem);}100%{transform:translateY(3rem);}}

/* ---------- 2. SERVICE ---------- */
.sec-service .sec-desc{top:53.9rem;}
.service-visual{left:89.8rem;top:-.2rem;width:100rem;height:108rem;margin:0;}
.service-visual svg{width:100%;height:100%;display:block;overflow:visible;}

/* ---------- 3. WHY NOW ---------- */
.sec-whynow .sec-desc{top:37.8rem;}   /* 타이틀 2줄 처리에 맞춰 하강 */
.stats{left:65.9rem;top:48.2rem;margin:0;display:grid;grid-template-columns:repeat(2,60rem);row-gap:6.9rem;column-gap:0;}
.stat{position:relative;}
.stat-label{margin-left:.3rem;font-size:2rem;line-height:1.6;letter-spacing:-.08rem;white-space:nowrap;}
.stat-num{margin-top:-1rem;height:11.6rem;line-height:11.6rem;letter-spacing:-.1164rem;}
.stat-num .big{font-size:9.7003rem;letter-spacing:-.19401rem;}
.stat-num .unit{font-size:5.8202rem;letter-spacing:-.1164rem;}
.stat-note{left:66.2rem;top:88rem;margin:0;font-size:1.6rem;line-height:1.2;white-space:nowrap;}

/* ---------- 4. BENEFIT ---------- */
.bf-list{left:0;top:0;width:192rem;height:108rem;margin:0;display:block;}
.bf-item{position:absolute;top:46.3rem;width:52rem;}
.bf-item:nth-child(1){left:34rem;}
.bf-item:nth-child(2){left:85.04rem;}
.bf-item:nth-child(3){left:135.99rem;}
.bf-glow{width:24rem;height:24rem;margin:0;top:5.6rem;filter:blur(6rem);opacity:.75;}
.bf-item:nth-child(1) .bf-glow{left:9.4rem;}
.bf-item:nth-child(2) .bf-glow{left:6.96rem;}
.bf-item:nth-child(3) .bf-glow{left:4.71rem;}
.bf-img{position:absolute;max-width:none;margin:0;}
.bf-item:nth-child(1) .bf-img{left:6.8rem;top:2.2rem;width:36.1rem;height:24.1rem;}
.bf-item:nth-child(2) .bf-img{left:10.96rem;top:1.8rem;width:29.6rem;height:24.5rem;}
.bf-item:nth-child(3) .bf-img{left:2.81rem;top:0;width:41.6rem;height:27.7rem;}
.bf-img img{width:100%;height:100%;object-fit:contain;}
.bf-no{position:absolute;left:0;top:28.01rem;margin:0;font-size:2.4rem;line-height:1.2;white-space:nowrap;}
.bf-t{position:absolute;left:0;top:37rem;margin:0;font-size:2.4rem;line-height:1.2;white-space:nowrap;}
.bf-d{position:absolute;left:0;top:41.9rem;margin:0;font-size:2rem;line-height:1.6;white-space:nowrap;}
.bf-d br{display:inline;}

/* ---------- 5·6. WHY SPECIAL ---------- */
/* PC : WHY SPECIAL 은 패널 2장이므로 섹션별 배경으로 되돌린다 */
.ws-wrap{background:none;}
.ws2::before{display:none;}
.ws1{padding-bottom:0;}
.ws2{padding-top:0;}
.sec-ws{
  background:
    radial-gradient(29% 26% at  7.1% 40.1%, #DDD6F9 0%, rgba(221,214,249,0) 72%),
    radial-gradient(29% 26% at 54.7% 40.1%, #EFEAFB 0%, rgba(239,234,251,0) 72%),
    radial-gradient(29% 26% at  2.0% 60.1%, #F1DCF0 0%, rgba(241,220,240,0) 72%),
    radial-gradient(29% 26% at 49.8% 64.7%, #F4D8EC 0%, rgba(244,216,236,0) 72%),
    radial-gradient(29% 26% at 76.5% 57.6%, #D7E4FA 0%, rgba(215,228,250,0) 72%),
    var(--white);
  background-size:100% 200%;background-repeat:no-repeat;
}
.ws1{background-position:center top;}
.ws2{background-position:center bottom;}
.ws-num{margin:0;font-size:12rem;line-height:14.4rem;height:14.4rem;white-space:nowrap;}
.ws1 .ws-num{left:16.8rem;top:17.26rem;}
.ws2 .ws-num{right:16.8rem;left:auto;top:12.8rem;transform:scaleX(.82);transform-origin:right center;}
.ws1 .sec-title{top:35.26rem;}
.ws1 .sec-desc{top:65.2rem;}
.ws2 .sec-title{left:auto;right:16.8rem;top:30.8rem;text-align:right;}
.ws2 .sec-desc{left:auto;right:16.8rem;top:60.74rem;text-align:right;}
.ws1-visual{left:79rem;top:52.6rem;width:95.6rem;height:42.6rem;margin:0;}
.ws2-visual{left:21.8rem;top:32rem;width:61.8rem;height:52.7rem;max-width:none;margin:0;}
.ws2-visual img{width:100%;height:100%;object-fit:contain;}
.ws-pills{left:0;top:0;width:192rem;height:108rem;margin:0;display:block;}
.ws-pill{position:absolute;height:6.6rem;padding:0 2rem;gap:0;border-radius:6rem;margin:0;font-size:2rem;line-height:1.6;background:rgba(255,255,255,.5);}
.ws-pill .gt{gap:.9rem;}
.ws-pill.p1{left:69.6rem;top:41.8rem;}
.ws-pill.p2{left:77.6rem;top:51.8rem;margin:0;}
.ws-pill.p3{left:85.6rem;top:61.8rem;margin:0;}

/* ---------- 7. FLOW ---------- */
.flow-nav,.flow-ar{display:none;}
.sec-flow{padding:0;}
.sec-flow .sec-tag,.sec-flow .sec-title,.sec-flow .sec-desc,.sec-flow .flow-note{margin:0;}
.sec-flow .sec-desc{top:30.6rem;}
.flow-arrow{display:block;position:absolute;left:50%;transform:translateX(-50%);top:30.1rem;width:max(192rem, 100vw);height:80.9rem;opacity:1;pointer-events:none;}
.flow-arrow img{width:100%;height:100%;object-fit:cover;object-position:center;}
.flow-stage{left:0;top:0;width:192rem;height:108rem;pointer-events:none;}
.flow-stage>*{pointer-events:auto;}
.flow-list{position:absolute;left:0;top:0;width:192rem;height:108rem;margin:0;padding:0;display:block;overflow:visible;}
.flow-card{position:absolute;top:44.4rem;width:28.9rem;height:50.8rem;border-radius:2rem;}
.flow-card:nth-child(1){left:16.8rem;}
.flow-card:nth-child(2){left:49.2rem;}
.flow-card:nth-child(3){left:81.6rem;}
.flow-card:nth-child(4){left:114rem;}
.flow-card:nth-child(5){left:146.4rem;}
.flow-badge{left:2.4rem;top:2.5rem;width:4rem;height:4rem;border-radius:3rem;font-size:2.7rem;}
.flow-cap{left:2.4rem;right:2.4rem;top:8.1rem;font-size:2.4rem;line-height:1.2;}
.flow-cap .fcbr{display:inline;}
.flow-shot{left:3.6rem;top:16.5rem;width:21.7rem;height:34.3rem;margin:0;}
.flow-note{left:106.4rem;top:98rem;margin:0;font-size:2rem;line-height:1.6;white-space:nowrap;}

/* ---------- 8. USE CASE ---------- */
.uc-list{left:0;top:0;width:192rem;height:108rem;margin:0;display:block;}
.uc-item{position:absolute;top:46.8rem;width:51.8rem;border-radius:3rem;overflow:visible;}
.uc-item:nth-child(1){left:16.8rem;}
.uc-item:nth-child(2){left:70.1rem;}
.uc-item:nth-child(3){left:123.5rem;}
.uc-photo{opacity:.8;}
.uc-photo{position:absolute;left:0;top:0;width:51.7rem;height:48.4rem;border-radius:3rem;overflow:hidden;}
.uc-item:nth-child(2) .uc-photo{width:51.8rem;}
.uc-photo img{width:100%;height:100%;object-fit:cover;}
.uc-no{left:4.8rem;top:5.4rem;width:4.8rem;height:4.8rem;display:flex;align-items:center;justify-content:center;font-size:2.4rem;filter:drop-shadow(0 0 3rem rgba(41,8,255,.1));}
.uc-title{left:11.2rem;top:6.3rem;font-size:2.4rem;white-space:nowrap;}
.uc-desc{left:11.2rem;top:11rem;font-size:2rem;line-height:1.6;white-space:nowrap;}

/* ---------- 9. PARTNER ---------- */
.sec-partner .sec-title,.sec-partner .sec-desc{z-index:2;}
/* 혹시 폰트가 못 떠서 글자가 넓어지더라도 사진 영역을 침범하지 않도록 폭 제한 */
.sec-partner .sec-title{white-space:normal;max-width:56rem;}
.sec-partner .sec-desc{white-space:normal;max-width:56rem;}
.sec-partner .sec-desc{top:39.4rem;}
.pt-visual{left:75.8rem;top:20rem;width:99.4rem;height:65.1rem;margin:0;border-radius:6rem;overflow:visible;}
.pt-bg{border-radius:6rem;overflow:hidden;}
/* 9개사 → 3x3. 세로가 한 줄 늘어난 만큼 시작 위치와 칸 높이를 줄여 카드 안에 맞춘다 */
.ci-grid{position:absolute;left:3.5rem;top:21.6rem;width:92.4rem;padding:0;display:grid;grid-template-columns:repeat(3,29.47rem);column-gap:2rem;row-gap:2.6rem;}
.ci-grid .ci:last-child{grid-column:auto;justify-self:stretch;width:auto;}
.ci{height:11rem;border-radius:1.8333rem;border-width:.1833rem;background:rgba(255,255,255,.2);}
.ci img{width:auto;max-width:17rem;height:auto;max-height:5.2rem;}


/* ---------- 11. CONTACT ---------- */
/* 이 섹션만 한 화면(108rem) 고정에서 빠진다.
   - 내용 높이에 맞춰 늘어나고(min-height 로 최소 한 화면은 유지)
   - 스테이지 절대좌표를 풀고 일반 흐름으로 쌓는다
   - 세로 제약이 없어졌으므로 글자/입력칸에 px 하한선(--ctu)을 넉넉히 준다
   스냅 이동은 script.js 가 이 섹션을 마지막 스냅 지점으로 처리하고,
   여기서부터 아래(푸터)까지는 일반 스크롤로 넘긴다. */
.sec-contact{
  display:block;height:auto;overflow:visible;
  padding:calc(11 * var(--ctu)) 0 calc(18 * var(--ctu));
}
.sec-contact .stage{width:192rem;height:auto;margin:0 auto;overflow:visible;}
.sec-contact .stage>*{position:static;}
.sec-contact .sec-tag{left:auto;top:auto;margin:0 0 2.2rem 16.8rem;}
.sec-contact .sec-title{left:auto;top:auto;margin:0 0 4.6rem 16.8rem;}
.ct-form{left:auto;top:auto;width:158.4rem;margin:0 0 0 16.8rem;}
.ct-grid{flex-direction:row;gap:4rem;}
.ct-col{flex:1 1 0;gap:calc(1.4 * var(--ctu));}
/* 사업자등록번호 · 법인등록번호는 한 줄에 나란히 (법인 선택 시 2단) */
.ct-bizrow{flex-direction:row;gap:2rem;}
.ct-bizrow>.ct-field{flex:1 1 0;min-width:0;}
.ct-field{gap:calc(.8 * var(--ctu));}
.ct-field label{font-size:calc(1.6 * var(--ctu));line-height:1.3;}
.ct-sub{font-size:calc(1.4 * var(--ctu));}
.ct-field input,.ct-field select{height:calc(5 * var(--ctu));font-size:calc(1.6 * var(--ctu));padding:0 calc(1.6 * var(--ctu));}
.ct-field textarea{height:calc(10 * var(--ctu));font-size:calc(1.6 * var(--ctu));padding:calc(1.2 * var(--ctu)) calc(1.6 * var(--ctu));}
/* PC는 모바일의 16px 고정을 해제하고 해상도에 따라 스케일하되,
   노트북에서 읽기 어려워지지 않도록 --ctu 의 px 하한선이 걸린다 */
.ct-field input::placeholder,.ct-field textarea::placeholder{font-size:calc(1.6 * var(--ctu));}
.ct-field select{font-size:calc(1.6 * var(--ctu));padding-right:calc(4.4 * var(--ctu));background-position:right calc(1.7 * var(--ctu)) center;background-size:calc(1.5 * var(--ctu)) auto;}
.ct-err{margin-top:calc(-.2 * var(--ctu));font-size:calc(1.3 * var(--ctu));line-height:1.35;}
.ct-radios{gap:calc(2.4 * var(--ctu));margin-bottom:0;}
.ct-radio{font-size:calc(1.5 * var(--ctu));}
.ct-agree{margin-top:calc(3.2 * var(--ctu));padding:calc(2.4 * var(--ctu)) calc(2.8 * var(--ctu));border-radius:calc(1.6 * var(--ctu));}
.ct-agree-t{font-size:calc(1.5 * var(--ctu));margin-bottom:calc(1.6 * var(--ctu));}
.ct-table{font-size:calc(1.35 * var(--ctu));}
.ct-table th,.ct-table td{padding:calc(1.1 * var(--ctu)) calc(1.2 * var(--ctu));}
.ct-note{font-size:calc(1.3 * var(--ctu));margin-top:calc(1.4 * var(--ctu));}
.ct-note br{display:none;}   /* PC 폭에서는 한 줄로 */
.ct-check{font-size:calc(1.5 * var(--ctu));margin-top:calc(1.8 * var(--ctu));}
/* 완료 팝업 — PC 비율에 맞춰 확대 */
.ct-modal-box{max-width:48rem;padding:5rem 4rem 4rem;border-radius:3rem;}
.ct-modal-ico{width:9rem;height:9rem;margin-bottom:2.6rem;}
.ct-modal-t{font-size:2.4rem;}
.ct-modal-d{margin-top:1.4rem;font-size:1.7rem;}
.ct-modal-btn{height:6rem;margin-top:3.4rem;border-radius:1.4rem;font-size:1.8rem;}
.ct-submit{margin-top:calc(3.4 * var(--ctu));}
.ct-btn{width:calc(24.7293 * var(--cu));height:calc(7.0849 * var(--cu));border-radius:calc(1.2 * var(--cu));font-size:calc(2.4 * var(--cu));}
.ct-msg{font-size:calc(1.5 * var(--ctu));margin-top:calc(1 * var(--ctu));}

/* ---------- 10. FAQ ---------- */
.faq-glow{left:142.9rem;right:auto;top:40.2rem;width:33.9rem;height:33.9rem;filter:blur(8rem);opacity:.85;}
.accordion{left:16.8rem;top:41.6rem;width:106.3rem;margin:0;}
.acc{position:relative;height:8.2rem;padding:2rem 3rem;border-radius:2rem;margin-bottom:1.2rem;}
.acc-q{height:4rem;}
.acc-q b{font-size:2.4rem;white-space:nowrap;}
.acc-ico{width:4rem;height:4rem;}
.acc-ico::before,.acc-ico::after{left:1rem;top:1.8rem;width:2rem;height:.4rem;}
.acc-a{margin-top:.8rem;font-size:2rem;line-height:1.6;}
.faq-aside{left:0;top:0;width:192rem;height:108rem;margin:0;text-align:left;}
.faq-img{position:absolute;left:129.1rem;top:28rem;width:50.4rem;height:33.6rem;max-width:none;margin:0;}
.faq-img img{width:100%;height:100%;object-fit:contain;}
.faq-q{position:absolute;left:140.1rem;top:60.3rem;margin:0;font-size:2.4rem;line-height:1.2;white-space:nowrap;}
.faq-sub{position:absolute;left:144.1rem;top:64.4rem;width:20.1rem;margin:0;font-size:2rem;line-height:1.6;text-align:center;white-space:nowrap;}
.faq-btn{position:absolute;left:141.8rem;top:75.5rem;width:24.7293rem;height:6.5rem;margin:0;padding:0;border-radius:1.6rem;box-shadow:0 0 4.7556rem rgba(22,30,79,.04);font-size:2.4rem;}

/* ---------- 11. CTA + FOOTER ---------- */
/* 문의하기부터는 일반 스크롤 구간이므로, 푸터도 한 화면을 통째로 쓰지 않고
   문의하기 바로 아래에 이어 붙는다. */
.sec-cta{min-height:0;height:auto;display:block;overflow:visible;padding:calc(12 * var(--ctu)) 0 calc(10 * var(--ctu));}
.sec-cta .stage{height:74rem;margin:0 auto;}
.cta-card{left:9rem;top:0;width:174rem;height:64rem;padding:0;border-radius:6rem;}
.cta-card>*{position:absolute;}
.cta-blob{left:-11.7rem;top:-3.1rem;width:194.8rem;height:43.5275rem;}
.cta-blob i{width:25.55rem;height:25.55rem;filter:blur(6.5rem);}
.cta-blob .e1{left:165.91rem;top:17.98rem;}
.cta-blob .e2{left:0;top:0;}
.cta-blob .e3{left:134.8rem;top:14.66rem;}
.cta-blob .e4{left:169.25rem;top:0;}
.cta-blob .e5{left:138.12rem;top:0;}
.cta-h1{left:7.7rem;top:8rem;margin:0;font-size:5.2rem;line-height:1.4;letter-spacing:-.104rem;white-space:nowrap;}
.cta-desc{left:7.7rem;top:17rem;margin:0;font-size:2rem;line-height:1.6;white-space:nowrap;}
.cta-btns{left:7.7rem;top:24.3rem;margin:0;display:flex;gap:calc(1.6 * var(--cu));}
.cta-btn{position:relative;width:calc(24.7293 * var(--cu));height:calc(7.0849 * var(--cu));margin:0;padding:0;border-radius:calc(1.2 * var(--cu));font-size:calc(2.4 * var(--cu));}
.cta-foot{left:7.709rem;top:39.7rem;width:auto;height:3rem;margin:0;
  display:flex;align-items:center;gap:3.6rem;flex-wrap:nowrap;}
.cta-foot>*{position:relative;}
.cta-foot-logo{width:10.21rem;height:1.8rem;flex:0 0 auto;margin-bottom:0;line-height:0;}
.cta-foot-logo img{width:100%;}
.cta-link{top:0;font-size:1.8rem;line-height:1.6;white-space:nowrap;}
.cta-link::before{content:"";position:absolute;left:-1.8rem;top:50%;transform:translateY(-50%);width:.1rem;height:1.2rem;background:#000;opacity:.4;}
.cta-biz{left:7.709rem;top:45.8rem;margin:0;font-size:1.6rem;line-height:2.6rem;color:rgba(35,27,77,.65);white-space:nowrap;}
.cta-copy{left:7.709rem;top:56rem;margin:0;font-size:1.6rem;line-height:2.6rem;color:rgba(35,27,77,.5);white-space:nowrap;}
.cta-illust{left:122.17rem;top:3.17rem;width:56.85rem;height:49.25rem;max-width:none;margin:0;}
.cta-illust img{width:100%;height:100%;object-fit:contain;}

/* .mo 전용 줄바꿈은 PC에서 항상 숨김 (섹션별 br 복원 규칙보다 우선) */
.hero-desc br.mo,.sec-desc br.mo,.sec-title br.mo,
.flow-note br.mo,.stat-label br.mo{display:none;}

}


/* ============================================================
   WHY SPECIAL 01 다이어그램 (Figma 최종_수정중 / 956x426 기준)
   ============================================================ */
.ws1-dia{position:absolute;inset:0;container-type:inline-size;--u:calc(100cqw / 956);}
.ws1-dia>*{position:absolute;}

/* 9개 카드사 3x3 */
.ws1-grid{left:0;top:11.502%;width:30.962%;height:70.892%;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:3.311% 3.378%;}
.ws1-grid .wsc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:20.213% 0 19.149%;background:rgba(255,255,255,.9);border-radius:calc(18 * var(--u));}
.ws1-grid .wsc i{display:block;width:32.609%;aspect-ratio:1;}
.ws1-grid .wsc i img{width:100%;height:100%;object-fit:contain;display:block;}
.ws1-grid .wsc em{margin-top:9.574%;font-style:normal;font-size:calc(14 * var(--u));line-height:1.3;
  color:#2E2E33;white-space:nowrap;letter-spacing:-.01em;}

/* 연결 화살표 — 통합 API 박스 좌/우 두 구간으로 분리 (박스 위를 지나가지 않음) */
.ws1-arrow{top:45.305%;height:3.286%;z-index:1;transform-origin:left center;}
.ws1-arrow::before{content:"";position:absolute;left:0;top:50%;height:calc(2 * var(--u));
  transform:translateY(-50%);background:#7B79FF;}
.ws1-arrow.a1{left:30.962%;width:5.021%;}
.ws1-arrow.a1::before{width:100%;}
.ws1-arrow.a2{left:54.812%;width:4.916%;}
.ws1-arrow.a2::before{width:calc(100% - 10 * var(--u));}
.ws1-arrow.a2::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  border-left:calc(10 * var(--u)) solid #7B79FF;
  border-top:calc(5 * var(--u)) solid transparent;border-bottom:calc(5 * var(--u)) solid transparent;}

/* 통합 API 박스 */
.ws1-api{left:35.983%;top:25.822%;width:18.828%;height:42.254%;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10 * var(--u));
  border-radius:calc(30 * var(--u));background:linear-gradient(135deg,#8074FE 0%,#4D6CF8 100%);}
.ws1-api img{width:80%;height:auto;display:block;}
.ws1-api b{font-size:calc(24 * var(--u));font-weight:700;color:#fff;letter-spacing:-.01em;}

/* 조회 결과 패널 */
.ws1-panel{left:59.728%;top:0;width:40.272%;height:100%;
  border-radius:calc(20 * var(--u));background:rgba(255,255,255,.4);
  border:calc(2 * var(--u)) solid #fff;
  box-shadow:0 0 calc(40 * var(--u)) rgba(87,74,220,.08);}
.ws1-panel>*{position:absolute;}
.ws1-pt{left:6.494%;top:7.512%;margin:0;font-size:calc(24 * var(--u));font-weight:700;color:#231B4D;letter-spacing:-.01em;}
.ws1-panel .wsrow{left:5.714%;width:88.831%;height:12.207%;border-radius:calc(10 * var(--u));
  display:flex;align-items:center;justify-content:space-between;
  padding:0 calc(20 * var(--u));transform-origin:left center;}
.ws1-panel .wsrow span{font-size:calc(16 * var(--u));color:#000;letter-spacing:-.01em;}
.ws1-panel .wsrow b{font-size:calc(20 * var(--u));font-weight:700;color:#000;letter-spacing:-.01em;}
.ws1-panel .wsrow.r1{top:21.831%;background:#F7F3EF;}
.ws1-panel .wsrow.r2{top:37.793%;background:#ECF0FF;}
.ws1-panel .wsrow.r3{top:53.756%;background:#E2F2FF;}
.ws1-panel .wsdots{left:49.351%;top:69.718%;width:calc(5 * var(--u));height:5.634%;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;}
.ws1-panel .wsdots i{width:calc(5 * var(--u));height:calc(5 * var(--u));border-radius:50%;background:#6770FC;}
.ws1-panel .wsbtn{left:5.714%;top:78.873%;width:88.831%;height:15.493%;border-radius:calc(10 * var(--u));
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8074FE 0%,#4D6CF8 100%);
  font-size:calc(24 * var(--u));font-weight:700;color:#fff;letter-spacing:-.01em;}

/* ---- 등장 시퀀스 ---- */
.ws1-dia .wsc,.ws1-arrow,.ws1-api,.ws1-panel,.ws1-pt,
.ws1-panel .wsrow,.ws1-panel .wsdots,.ws1-panel .wsbtn{opacity:0;}
.ws1-visual.in .wsc{animation:svgRiseIn .55s var(--ease) both;animation-delay:calc(.1s + var(--i) * .07s);}
/* 카드사 → API 진입선 → 통합 API 박스 → API → 패널 진출선 → 패널 순서 */
.ws1-visual.in .ws1-arrow.a1{animation:svgGrowX .32s var(--ease) .82s both;}
.ws1-visual.in .ws1-api{animation:svgPop .5s var(--ease) 1.1s both;}
.ws1-visual.in .ws1-arrow.a2{animation:svgGrowX .32s var(--ease) 1.52s both;}
.ws1-visual.in .ws1-panel{animation:svgPop .55s var(--ease) 1.78s both;}
.ws1-visual.in .ws1-pt{animation:svgRise .45s var(--ease) 1.98s both;}
.ws1-visual.in .ws1-panel .wsrow{animation:svgLoadRow .5s var(--ease) both;}
.ws1-visual.in .ws1-panel .wsrow.r1{animation-delay:2.13s;}
.ws1-visual.in .ws1-panel .wsrow.r2{animation-delay:2.28s;}
.ws1-visual.in .ws1-panel .wsrow.r3{animation-delay:2.43s;}
.ws1-visual.in .ws1-panel .wsdots{animation:svgBlink .9s ease-in-out 2.63s both;}
.ws1-visual.in .ws1-panel .wsbtn{animation:svgPop .5s var(--ease) 2.88s both;}

@media (prefers-reduced-motion:reduce){
  .ws1-dia .wsc,.ws1-arrow,.ws1-api,.ws1-panel,.ws1-pt,
  .ws1-panel .wsrow,.ws1-panel .wsdots,.ws1-panel .wsbtn{opacity:1!important;animation:none!important;transform:none!important;}
}

/* WHY SPECIAL 1 카드사 운영 정책 안내 */
.ws1 .ws1-notice{display:block;margin-top:1.4rem;color:#C7444E;font-size:1.6rem;font-weight:500;line-height:1.6;white-space:normal;}