/* ============================================================
   커넥트 광고 — 히어로 v2 (스크롤 확대→축소, 폰 안에서 피드가 흐른다)
   레퍼런스: facilpay.io · 시안: 피그마 hero-top / phone-frame-scene-1 / scene-2

   에셋 3겹 (assets/img/ad/scroll/)
     phone-frame@2x.png   폰 본체 + 빛 (알파 살아 있음, 빛이 밖으로 번짐)
     contents@2x.jpg      피드 콘텐츠 롱 이미지 (설계 889x3903)
     phone-screen-3x.png  화면 마스크 — 여기선 비율·반경 근거로만 쓰고 CSS로 자른다

   좌표는 추측이 아니라 에셋에서 역산한 값이다.
     폰 이미지(1693x2555) 안 화면 창 = left 23.857% / top 12.286%
                                    / width 51.996% / height 74.063%
     화면 모서리 반경 = 화면 폭의 16.76%
     설계 화면 = 889x1911, 콘텐츠 = 889x3903
     scene-1 콘텐츠 오프셋 -1025 / scene-2 -1146  → 스크롤 양끝으로 쓴다

   이 파일은 ads/index-v2.html 에서만 로드한다. 원본은 건드리지 않는다.
   ============================================================ */

body.page-ad-v2 { background: #0C0908; --p: 0; --q: 0; }

/* ---------- 스크롤 무대 ---------- */
.pscroll {
  position: relative;
  height: 200vh;              /* 축소 한 번 + 숫자가 좌르르 */
  background: #0C0908;
}
.pscroll__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

/* 무대 바닥의 넓은 오렌지 온기는 뺐다.
   폰 PNG에 구워진 빛과 .pdev__halo 만으로 충분하고,
   화면 폭 전체로 번지는 겹이 하나 더 있으면 지면이 인위적으로 보인다. */

/* ---------- 카피 ---------- */
.pscroll__copy {
  position: absolute;
  z-index: 3;
  /* 헤더 아래 끝이 82px 이라 vh 로만 잡으면 낮은 화면에서 붙는다 */
  top: 144px; left: 50%;   /* 헤더 아래 60px 고정 */
  width: min(1080px, 90vw);
  transform: translate3d(-50%, calc(var(--p) * -14vh), 0);
  opacity: calc(1 - var(--p) * 2.6);   /* p 0.38 즈음 사라진다 */
  text-align: center;
  pointer-events: none;   /* 사라진 뒤 폰 위에서 클릭을 가로채지 않게 */
  will-change: transform, opacity;
}
.pscroll__eyebrow {
  display: inline-block;
  font-size: 18px; font-weight: 700; letter-spacing: -.18px;
  color: var(--accent);
}
.pscroll__title {
  margin-top: 17px;
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 700; line-height: 1.26; letter-spacing: -1.2px;
  color: #F7F7EF;
}
.pscroll__sub {
  margin-top: 20px;
  font-size: clamp(16px, 1.95vw, 20px);
  font-weight: 400; line-height: 1.5; letter-spacing: -.2px;
  color: #A7A099;
}
.pscroll__btns { margin-top: 33px; display: flex; justify-content: center; gap: 10px; }
.pscroll__btns a { pointer-events: auto; }
.pscroll__btns a {
  min-width: 158px; height: 52px;
  display: grid; place-items: center;
  padding: 0 22px; border-radius: 8px;
  font-size: 19px; font-weight: 600; letter-spacing: -.19px;
  transition: transform .2s, border-color .2s;
}
.pscroll__btns a:hover { transform: translateY(-1px); }
.pbtn--primary {
  background: linear-gradient(120deg, #FF7A3D 0%, #FF5C00 100%);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(252, 93, 17, .7);
}
.pbtn--ghost {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #F7F7EF;
}
.pbtn--ghost:hover { border-color: rgba(255, 255, 255, .45); }

/* ---------- 진입 ----------
   열자마자 완성된 화면이 떠 있으면 죽은 화면으로 읽힌다.
   카피가 차례로 올라오고 폰이 뒤따라 떠오른다. */
.pscroll__eyebrow,
.pscroll__title,
.pscroll__sub,
.pscroll__btns {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .95s cubic-bezier(.22, .61, .36, 1);
}
.pscroll.is-ready .pscroll__eyebrow,
.pscroll.is-ready .pscroll__title,
.pscroll.is-ready .pscroll__sub,
.pscroll.is-ready .pscroll__btns { opacity: 1; transform: none; }
.pscroll.is-ready .pscroll__eyebrow { transition-delay: .06s; }
.pscroll.is-ready .pscroll__title   { transition-delay: .14s; }
.pscroll.is-ready .pscroll__sub     { transition-delay: .24s; }
.pscroll.is-ready .pscroll__btns    { transition-delay: .32s; }

.pdev__float {
  opacity: 0;
  transform: translateY(54px) scale(1.03);
  transition: opacity 1.05s ease .30s, transform 1.35s cubic-bezier(.22, .61, .36, 1) .30s;
}
.pscroll.is-ready .pdev__float { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pscroll__eyebrow, .pscroll__title, .pscroll__sub, .pscroll__btns,
  .pdev__float { opacity: 1; transform: none; transition: none; }
}

/* ---------- 폰 ---------- */
/* 기준 폭 = 끝 상태(p=1). 시작은 scale 로 키운다. 원점을 위로 둬서
   확대해도 폰 윗변이 제자리에 머문다 — 시안 hero-top의 프레이밍. */
.pdev {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--dev-top, 0px);
  width: var(--dev-w, 560px);
  transform: translate3d(calc(-50% + var(--dev-x, 0px)), 0, 0) scale(var(--dev-s, 1));
  transform-origin: top center;
  will-change: transform, top;
}
.pdev__frame { display: block; width: 100%; height: auto; }

/* ---------- 겹마다 다른 빠르기 ----------
   스크롤이 멈춰도 화면이 살아 있어야 한다. 폰·빛·카피가 각자 다른 주기로 돈다.
   진폭은 작게 — 눈에 띄면 산만해지고, 없으면 정지 사진이 된다. */
.pdev__float {
  position: relative;
}   /* 부유는 뺐다 — 고정이 낫다는 판단 */

/* 숨쉬는 빛 — PNG에 구워진 글로우 뒤에서 한 겹 더 번진다 */
.pdev__halo {
  position: absolute;
  z-index: -1;
  inset: -14% -22%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(46% 40% at 50% 52%, rgba(252, 93, 17, .40) 0%, rgba(252, 93, 17, .12) 46%, transparent 72%);
  animation: phalo 7.5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes phalo {
  0%, 100% { opacity: .5;  transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.07); }
}

/* 화면 유리에 아주 느리게 지나가는 반사 */
.pdev__sheen {
  position: absolute;
  inset: -40% -60%;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 42%, rgba(255, 255, 255, .055) 50%, transparent 58%);
  animation: psheen 9s ease-in-out infinite;
  animation-delay: 2s;
  will-change: transform;
}
@keyframes psheen {
  0%       { transform: translate3d(-42%, 0, 0); }
  55%, 100% { transform: translate3d(42%, 0, 0); }
}

/* 카피는 폰보다 느리고 반대 위상으로 — 앞뒤 거리가 생긴다 */
.pscroll__drift {
  animation: pdrift 14s ease-in-out infinite;
  will-change: transform;
}
@keyframes pdrift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, 7px, 0); }
}

/* 화면 창 — 폰 이미지 대비 비율. 이미지를 줄여도 어긋나지 않는다. */
.pdev__screen {
  position: absolute;
  left: 23.857%; top: 12.286%;
  width: 51.996%; height: 74.063%;
  overflow: hidden;
  border-radius: 16.76% / 7.8%;   /* 가로 기준 16.76% — 세로는 비율 환산 */
  background: #000;
}
.pdev__reel {
  position: absolute;
  left: 0; top: 0; width: 100%;
}
.pdev__contents {
  display: block;
  width: 100%; height: auto;
  transform: translate3d(0, calc(-120px * var(--u, .37)), 0);
}
/* 피드가 스스로 흘러 세움은행 게시글 앞에 가서 선다.
   스크롤이 아니라 이 흐름이 주인공을 데려온다 — 히어로가 멈춰 있어도 흐른다.
   설계 좌표: 임세라 5~1167 · 세움은행 1196~2681 (889px 폭 기준)

   곡선 하나로 두면 앞에 몰려서 "이미 서 있는 것"처럼 보인다.
   그래서 구간을 셋으로 나눠 등속 구간을 2초 확보한다.
     0~0.26s   가속      70px
     0.26~4.2s 등속     930px   ← 눈에 보이는 흐름, 약 4초
     4.2~5.2s  감속      90px   ← 툭 멈추지 않고 정착
   끝 -1210 = 세움은행 게시글 머리가 화면 맨 위. 앞 글의 좋아요 줄은 위로 빠진다. */
@keyframes preel {
  0%   { transform: translate3d(0, calc(-120px  * var(--u, .37)), 0); }
  5%   { transform: translate3d(0, calc(-190px  * var(--u, .37)), 0); }
  80%  { transform: translate3d(0, calc(-1120px * var(--u, .37)), 0); }
  100% { transform: translate3d(0, calc(-1210px * var(--u, .37)), 0); }
}
.pscroll.is-flow .pdev__contents {
  animation: preel 2.6s linear forwards;
}

/* --u = 화면 실제 폭 / 설계 폭(889). JS가 넣는다. */

/* 하단 페이드는 뺐다 — 폰을 덮어 어둡게 만들었고, 다음 구간과 지면색이 같아 필요 없다. */

/* 연출이 도는 동안 플로팅 CTA는 숨긴다 — 폰 한가운데를 가로막는다 */
body.page-ad-v2.is-hero .fcta { opacity: 0; pointer-events: none; }

/* ---------- 숫자 셋이 하나씩 (시안 hero-top 1·2·3단계) ----------
   1단계 500만 = 폰 왼쪽, 흰색
   2단계 60%   = 폰 오른쪽, 주황. 앞 숫자는 회색으로 죽는다
   3단계 90%   = 폰 아래 가운데, 흰색. 앞 둘은 사라진다 */
/* ---------- 숫자 열 — 시안 hero-top(1440x1025) 실측 ----------
   블록 791x746, 숫자 열 287 @x0/y88.5, 폰 414x746 @x377.
   시안 폰은 빛이 23px만 번지고 우리 PNG는 21%씩 번진다. 같은 에셋이 아니다.
   그래서 자리는 이미지 폭이 아니라 폰 본체 기준으로 잡는다.
   --k = 블록 실제 폭 / 791 (JS가 넣는다) */
.pflowset {
  position: absolute;
  z-index: 3;
  left: var(--nums-left, 22vw);
  top: var(--nums-top, 20vh);
  width: var(--nums-w, calc(287px * var(--k, 1)));
  display: flex; flex-direction: column;
  gap: calc(52px * var(--k, 1));
  pointer-events: none;
}
.pflow {
  /* 등장을 진행도에 그대로 붙인다 */
  opacity: var(--o, 0);
  transform: translateY(calc((1 - var(--o, 0)) * 20px));
}
.pflow--a { --o: var(--oa, 0); }
.pflow--b { --o: var(--ob, 0); }
.pflow--c { --o: var(--oc, 0); }

.pflow__label {
  font-weight: 600;
  font-size: calc(24px * var(--k, 1));
  line-height: 1.6;
  letter-spacing: calc(-0.48px * var(--k, 1));
  color: #C8C8C8;
  margin-bottom: calc(-8px * var(--k, 1));
}
.pflow__num {
  font-weight: 700;
  font-size: calc(104px * var(--k, 1));
  line-height: 1.2;
  letter-spacing: calc(-2.08px * var(--k, 1));
  color: #fff;
}
.pflow--b .pflow__num { color: #FC5D11; }

/* 숫자 셋이 히어로 안으로 들어왔으니 아래 스탯 구간은 통째로 감춘다.
   전엔 데스크탑에서만 감췄는데, 모바일에도 히어로 박스가 생겨 중복이 됐다. */
body.page-ad-v2 .adstats { display: none; }

/* 세로가 아주 짧은 화면(가로로 든 폰)에서는 숫자 박스를 접고 폰만 남긴다 */
.pscroll.is-tiny .pflowset { display: none; }

/* ---------- 어두운 구간 위의 헤더 ---------- */
body.page-ad-v2 .gnb {
  background: rgba(22, 17, 15, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .09);
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}
body.page-ad-v2 .gnb__brand-name,
body.page-ad-v2 .gnb__link.is-active { color: #F7F7EF; }
body.page-ad-v2 .gnb__link { color: #A7A099; }
body.page-ad-v2 .gnb__logo { filter: invert(1) brightness(1.6); }
/* 햄버거 막대가 검정이라 어두운 헤더에서 안 보였다 */
body.page-ad-v2 .gnb__burger span { background: #F7F7EF; }
body.page-ad-v2 .gnb.is-past-dark {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
body.page-ad-v2 .gnb.is-past-dark .gnb__brand-name,
body.page-ad-v2 .gnb.is-past-dark .gnb__link.is-active { color: #0A0A0A; }
body.page-ad-v2 .gnb.is-past-dark .gnb__link { color: var(--text-nav); }
body.page-ad-v2 .gnb.is-past-dark .gnb__logo { filter: none; }
body.page-ad-v2 .gnb.is-past-dark .gnb__burger span { background: #0A0A0A; }

/* (구 스탯 구간 색 규칙은 뺐다 — 구간 자체를 감췄으니 죽은 코드다) */

/* ---------- 움직임을 줄여달라고 한 사용자 ----------
   스크롤 연출까지 없애면 히어로가 통째로 멈춘 화면이 된다(구간 0).
   스스로 도는 반복 애니메이션만 끄고, 스크롤에 붙은 이야기는 남긴다.
   확대·이동은 JS가 START_S=1 로 낮춰 흔들림을 줄인다. */
@media (prefers-reduced-motion: reduce) {
  .pdev__halo, .pdev__sheen, .pscroll__drift { animation: none; }
  .pscroll.is-flow .pdev__contents { animation: none; transform: translate3d(0, calc(-1210px * var(--u, .37)), 0); }
  .pflow { transform: none; }
  .pscroll__eyebrow, .pscroll__title, .pscroll__sub, .pscroll__btns,
  .pdev__float { transform: none; }
}

/* ---------- 히어로 다음 섹션의 지면 전환 ----------
   히어로의 어둠이 다음 섹션까지 이어져 올라오다가, 경계가 화면 하단 1/3 선을
   지나면 밝은 지면으로 풀린다. --lit 은 JS가 0~1 로 넣는다.
   글자도 같이 건너가야 어두운 구간에서 안 보이는 일이 없다. */
body.page-ad-v2 .adsec--handoff {
  --lit: 0;
  position: relative;
  background: color-mix(in srgb, #0C0908, var(--surface) calc(var(--lit) * 100%));
}
/* 경계가 곧은 가로선이라 색만 바꾸면 선이 쓸고 지나가는 것으로 보인다.
   위쪽에 어둠을 한 겹 깔아 아래로 흐리게 풀어, 경계 자체를 지운다.
   다 밝아지면(--lit 1) 이 겹은 사라진다. */
body.page-ad-v2 .adsec--handoff::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc((1 - var(--lit)) * min(340px, 32vh));
  pointer-events: none;
  /* 투명도를 낮추면 위쪽 끝이 히어로보다 밝아져 선이 보인다.
     불투명도는 그대로 두고 높이를 줄여, 위쪽 끝이 늘 히어로와 같은 색이게 한다. */
  background: linear-gradient(to bottom, #0C0908 0%, rgba(12, 9, 8, .78) 34%, rgba(12, 9, 8, 0) 100%);
}
body.page-ad-v2 .adsec--handoff > * { position: relative; z-index: 1; }
/* 배경과 같은 속도로 글자색을 넘기면 중간에 대비가 1:1 이 되어 글자가 사라진다.
   글자는 배경보다 늦게(0.46 이후), 짧게(0.12 구간) 넘긴다. */
body.page-ad-v2 .adsec--handoff {
  --lit-text: clamp(0, calc((var(--lit) - 0.46) * 8.3), 1);
}
body.page-ad-v2 .adsec--handoff .adsec__title,
body.page-ad-v2 .adsec--handoff .adfeed__copy strong {
  color: color-mix(in srgb, #F7F7EF, #0A0A0A calc(var(--lit-text) * 100%));
}
body.page-ad-v2 .adsec--handoff .adsec__sub,
body.page-ad-v2 .adsec--handoff .adfeed__copy p,
body.page-ad-v2 .adsec--handoff li {
  color: color-mix(in srgb, #A7A099, var(--text-sub) calc(var(--lit-text) * 100%));
}

/* 좁은 화면에서는 지정 줄바꿈을 풀어 자연스럽게 흐르게 둔다 */
@media (max-width: 760px) {
  body.page-ad-v2 .cta__title br { display: none; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 760px), (max-height: 620px) {
  /* 좌우로 놓으면 폰이 너무 작아진다. 폰을 크게 두고 숫자는 아래로 내린다.
     왼쪽 정렬만으로는 흩어져 보여서, 약한 대비의 박스로 묶는다. */
  .pflowset {
    flex-direction: row;
    gap: 0;
    padding: 15px 4px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .085);
  }
  .pflow { flex: 1 1 0; min-width: 0; padding: 0 6px; text-align: center; }
  .pflow__label {
    font-size: clamp(10px, 3vw, 12px); font-weight: 600; letter-spacing: -.2px;
    margin-bottom: 0; color: #A7A099;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pflow__num { margin-top: 3px; font-size: clamp(23px, 6.6vw, 28px); letter-spacing: -1px; }

  /* 모바일 헤더는 더 얇게 */
  /* 후광이 작은 화면에서 폰보다 커 보인다 — 좁히고 낮춘다 */
  .pdev__halo { inset: -8% -12%; opacity: .62; }
  @keyframes phalo {
    0%, 100% { opacity: .42; transform: scale(1); }
    50%      { opacity: .72; transform: scale(1.04); }
  }

  /* 데스크탑 값(최소 146px)이 그대로 먹어서 헤더와 너무 벌어졌다.
     헤더 아래 끝이 74px 이니 40px 안팎만 띄운다. */
  .pscroll__copy { top: clamp(116px, 12vh, 140px); }

  /* 좁은 박스 안에서는 주황 하나만 튀어 정돈이 깨진다 — 셋 다 흰색 */
  .pflow--b .pflow__num { color: #fff; }

  /* 아이브로우·타이틀·서브는 한 덩어리로 읽혀야 하고, 버튼은 따로 서야 한다.
     셋의 간격이 비슷하면 경계가 안 보인다 — 안쪽을 좁히고 버튼만 떼어놓는다. */
  .pscroll__title { margin-top: 13px; }
  .pscroll__sub   { margin-top: 12px; }

  /* 세로로 쌓으면 104px 을 먹어 주인공인 폰이 아래로 밀린다.
     한 줄에 반씩 나눠 48px 로 줄이고, 둘의 위계는 색으로 남긴다. */
  .pscroll__btns { margin-top: 26px; flex-direction: row; gap: 8px; }
  .pscroll__btns a { flex: 1 1 0; width: auto; min-width: 0; height: 48px; font-size: 16px; padding: 0 12px; }
}