/* Pretendard 선언은 v1/style.css의 가변 폰트 하나로 통합(2026-08-05) — 랜딩은 두 CSS를 함께 로드한다 */

:root{
  --bg:#0a0f1e;
  --ink:#ffffff;
  --muted:rgba(255,255,255,.72);
  --accent:#3b82f6;
  --accent-bright:#5b9bf6;
  --nav-h:64px;
  --edge:clamp(20px,5vw,48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}  /* clip: iOS 뷰포트 확장 차단(넘침 방어) + 스크롤 컨테이너 미생성(sticky 유지) */
body{
  max-width:100%;   /* overflow-x는 html에만 — body에 걸면 body가 스크롤 컨테이너가 되어 position:sticky가 전부 죽는다 */
  background:var(--bg);
  color:var(--ink);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* ===== NAV ===== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--edge);
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(10,15,30,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
}   /* 하단 헤어라인 제거 — 2026-07-28 사장님 지시 */
.nav__logo{display:inline-flex;align-items:center;gap:7px}
.nav__mark{
  width:12px;height:12px;border-radius:3.5px;   /* 워드마크 캡하이트보다 작게 — 피날레 로고와 같은 비율 */
  background:linear-gradient(135deg,var(--accent-bright),var(--accent));
  box-shadow:0 2px 8px rgba(59,130,246,.5);
}
.nav__word{font-size:21px;font-weight:800;letter-spacing:-.5px}
.nav__cta{
  display:inline-flex;align-items:center;height:38px;padding:0 18px;
  border-radius:999px;font-size:14px;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .18s ease, transform .18s ease;
  min-height:44px;   /* 터치 타깃 — 전 구간 유지 */
}
.nav__cta:hover{background:rgba(255,255,255,.18)}
.nav__cta:active{transform:scale(.96)}

/* ===== HERO ===== */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100dvh;   /* dvh: 주소창 접힘 반영해 실제 화면 꽉(svh는 주소창 있을 때라 작음), vh 폴백 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h) + 24px) var(--edge) 120px;
}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:translateZ(0);
}
.hero__poster{z-index:0}
.hero__video{z-index:1;opacity:0;transition:opacity .8s ease}
.hero__video.is-ready{opacity:1}
.hero__overlay{position:absolute;inset:0;z-index:2;background:rgba(6,9,20,.5)}
/* 상단(내비)·하단·중앙 텍스트 가독성용 그라디언트 */
.hero__grad{
  position:absolute;inset:0;z-index:3;
  background:
    linear-gradient(180deg, rgba(6,9,20,.55) 0%, rgba(6,9,20,0) 22%),
    linear-gradient(0deg, rgba(6,9,20,.75) 0%, rgba(6,9,20,0) 42%),
    radial-gradient(120% 80% at 50% 46%, rgba(6,9,20,0) 40%, rgba(6,9,20,.42) 100%);
}

.hero__inner{position:relative;z-index:4;max-width:920px;animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both}
.hero__title{
  font-size:clamp(30px,5.6vw,66px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.14;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero__brand{
  background:linear-gradient(135deg,#9cc0ff,#4f8bf2);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#7aa7ff;
}
.brk{display:inline}
/* ⚠ 폰에서는 강제 줄바꿈을 푼다(166차) — 새 카피는 절 하나가 상자보다 길어서, <br>로 2행을 강제하면
   각 행이 다시 접혀 총 4줄이 된다(사장님이 이미 한 번 물린 모습). 자연 줄바꿈이면 3줄로 정리된다.
   PC는 폭이 넓어 절 단위 2행이 그대로 산다. */
@media(max-width:767.98px){ .hero__title .brk{display:none} }
/* CJK 기본 줄바꿈은 어절 중간을 끊는다('계산까/지') — 히어로는 낱말 단위로(5차 보안 카드와 같은 처방) */
.hero__title, .hero__sub{word-break:keep-all;}
.hero__sub{
  margin-top:22px;
  font-size:clamp(15px,2vw,20px);
  font-weight:500;color:var(--muted);
  letter-spacing:-.01em;
}

/* CTA */
.hero__cta{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(min-width:768px){
  .hero__cta .btn,.story__cta .btn{width:185px;justify-content:center;}   /* 두 스토어 버튼 동일 폭(콘텐츠 폭대로면 App Store<Google Play) — 모바일은 풀폭 스택이라 제외 */
}
.btn{
  display:inline-flex;align-items:center;gap:11px;
  height:50px;padding:0 20px;border-radius:14px;
  font-family:inherit;transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:active{transform:scale(.97)}
.btn__icon{width:21px;height:21px;flex:none}
.btn__label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05;text-align:left}
.btn__label small{font-size:11px;font-weight:500;opacity:.72}
.btn__label strong{font-size:15px;font-weight:700;letter-spacing:-.2px}
.btn--primary{background:#fff;color:#0a0f1e;box-shadow:0 14px 36px -14px rgba(255,255,255,.5)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(255,255,255,.6)}
.btn--ghost{
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn--ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}

/* scroll indicator */
.hero__scroll{
  position:absolute;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:4;
  min-width:44px;min-height:44px;justify-content:flex-end;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero__scroll-mouse{
  width:26px;height:42px;border-radius:14px;
  border:2px solid rgba(255,255,255,.5);
  display:flex;justify-content:center;padding-top:8px;
}
.hero__scroll-dot{
  width:4px;height:8px;border-radius:2px;background:#fff;
  animation:scrollDot 1.8s ease-in-out infinite;
}
.hero__scroll-label{display:none;font-size:11px;font-weight:700;letter-spacing:.34em;text-indent:.34em;
  color:rgba(255,255,255,.6);animation:labelBob 1.8s ease-in-out infinite;}   /* 모바일: 마우스 아이콘 대신 */
@keyframes labelBob{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(4px);opacity:1}}

/* placeholder next section */
.next{
  min-height:60svh;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border-top:1px solid rgba(255,255,255,.05);
}
.next__eyebrow{font-size:12px;font-weight:700;letter-spacing:.28em;color:var(--accent-bright)}
.next__text{color:rgba(255,255,255,.5);font-size:15px;font-weight:500}

/* ===== animations ===== */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ===== responsive ===== */
@media(max-width:767.98px){
  /* 히어로는 100lvh(주소창 접힌 큰 뷰포트)인데 콘텐츠는 가운데 정렬 → 사파리에서 주소창이 보이면
     보이는 영역(svh)은 그만큼 작아 카피가 아래로 처진다(사장님). 하단 패딩에 (lvh−svh)를 얹어
     centering 기준을 '보이는 영역'으로 옮긴다 — 바로 아래 .story-c가 25차부터 쓰던 것과 같은 처방. */
  .hero{padding-bottom:calc(100px + 100lvh - 100svh);}
  .hero__scroll-mouse{display:none}
  .hero__scroll-label{display:block}
  .hero__title{font-size:clamp(22px,5.6vw,44px)}   /* 모바일 전용. 카피가 길어져 한 단계 축소(166차) */
  .hero__cta{gap:12px}
  .btn{width:100%;max-width:300px;justify-content:center;height:50px}   /* 터치 타깃 54px */
  .nav__cta{display:none}
}
/* 태블릿(768~1199): 가로 유지 + 터치 타깃 확보 */
@media(min-width:768px) and (max-width:1199.98px){
  .btn{height:48px}
}
/* 가로 모드(짧은 높이): 히어로 100svh 고정 해제 — 콘텐츠 넘침 방지 */
@media(orientation:landscape) and (max-height:500px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 16px);padding-bottom:56px}
  .hero__cta{margin-top:22px}
  .hero__scroll{display:none}
}

/* ===== reduced motion → 포스터 정지화면 ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__inner{animation:none}
  .hero__scroll-dot,.hero__scroll-label{animation:none;opacity:.9}
}


/* ===================== SCROLL STORY ===================== */
.story{position:relative;height:600svh;background:var(--bg);}
.story__sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#0a0f1e;transition:background-color .6s ease;}   /* dvh: 실제 화면 꽉 */
  /* sticky 요소/조상에 transform·filter·will-change 금지 — Safari sticky 떨림 유발(레이어 승격 실험 롤백) */
.story.is-step6 .story__sticky,.story.is-step6{background:#000;}   /* 주소창으로 뷰포트가 커져도 하단 띠 없음 */
.story__bg{position:absolute;inset:0;z-index:0;background:#0a0f1e url('media/hero_bg_poster.jpg?v=4') center/cover no-repeat;transition:opacity .6s ease;}
.story.is-step6 .story__bg{opacity:0;}
.story__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .8s ease;
  transform:translateZ(0);}
.story__video.is-ready{opacity:1;}
.story__video-blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .5s ease;will-change:opacity;}   /* 사전 블러 영상 — 카피 구간 크로스페이드 */
.story.is-entered .story__video-blur{opacity:1;}
/* 히어로보다 더 어둡게 — 흰 카드/카피 대비 확보 (한층 더 어둡게) */
.story__overlay{position:absolute;inset:0;background:rgba(5,8,18,.62);}

/* 줄6 피날레 리빌 영상 — 화면 중앙에 적당한 크기(과확대 방지), 가장자리는 마스크로 블렌드 */
.story__finale-vid{position:absolute;left:50%;top:min(50%,400px);transform:translate(-50%,-50%) scale(1.25);z-index:2;
  /* top을 50%가 아니라 min(50%,400px)로: 카피는 sticky 흐름 안에 있어 위치가 창 높이에 비례해 내려가지 않는데
     영상만 50%로 따라 내려가 세로로 긴 창에서 폰이 문구·버튼 아래로 겹쳤음(1222×1400·1000×1300 실측).
     16:9(vh≤800)에서는 50%=400px이라 종전과 동일. */
  height:min(90svh,57vw,1000px);width:auto;max-width:76vw;object-fit:contain;   /* 4:3 근접 소스 — contain, 중앙 */
  /* scale(1.25)+90svh: 소스 여백(연기) 때문에 폰이 작아 보임 → 확대(가장자리 연기는 sticky overflow가 클립)
     57vw 상한: 높이(svh)로만 크기를 정하면 창이 세로로 길 때 폰만 커지고 문구 위치는 그대로라
       폰 화면을 글씨가 덮음(1222×1400 실측). 가로도 기준에 넣어 16:9에서는 그대로 두고 세로긴 창만 제한.
       (1280×800: 90svh=720 < 57vw=730 → 종전과 동일. 1222×1400: 1260 → 697로 축소)
     max-width 96→76vw: scale이 max-width '뒤에' 적용돼 96vw가 실제로는 120vw가 되어 화면 밖으로 넘쳤음(76×1.25=95vw) */
  opacity:0;pointer-events:none;transition:opacity .2s ease;}
.story.is-step6.is-ended .story__finale-vid{opacity:0 !important;transition:opacity .8s ease;}  /* 종료 → 0.8s 페이드아웃(검정) */
.story.is-finale .story__finale-vid{opacity:1;}
/* 하단 카피 가독성 스크림 */
.story__scrim{position:absolute;left:0;right:0;bottom:0;height:42%;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:linear-gradient(0deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.32) 45%, rgba(0,0,0,0) 100%);}
.story.is-finale .story__scrim{opacity:1;}
.story.is-ended .story__scrim{opacity:0;}

.story__stage{position:relative;z-index:3;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:calc(var(--nav-h) + 14px) 24px 30px;box-sizing:border-box;}

/* 카드 슬롯: 높이 고정으로 레이아웃 점프 방지 */
.story__cards{position:relative;width:min(420px,88vw);height:clamp(292px,40svh,380px);flex:none;}
.uicard{position:absolute;left:50%;bottom:0;width:min(420px,88vw);box-sizing:border-box;
  transform:translate(-50%,26px);opacity:0;visibility:hidden;pointer-events:none;will-change:transform,opacity;
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1), visibility .5s;
  background:#fff;color:#0e1526;border-radius:22px;padding:22px;text-align:left;
  box-shadow:0 40px 90px -28px rgba(0,0,0,.72), 0 10px 30px -14px rgba(0,0,0,.5);}
.uicard.is-active{opacity:1;visibility:visible;transform:translate(-50%,0);}

/* 카피 라인 */
.story__lines{position:relative;z-index:2;width:min(720px,92vw);text-align:center;
  height:110px;overflow:hidden;   /* 2.4줄 뷰포트(정확 높이는 JS가 셋) */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);}
.story__track{display:flex;flex-direction:column;gap:clamp(3px,0.7svh,7px);will-change:transform;}
@media(pointer:coarse){.story__track{transition:transform .35s cubic-bezier(.2,.7,.2,1);}}   /* 모바일: 줄 전환만 CSS로 — 스크롤 중 JS 쓰기 없음 */
.story__lines::before{content:"";position:absolute;inset:-34% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at center, rgba(5,8,18,.75), transparent 70%);}   /* 글자 주변 스크림 */
.story__line{color:#dfe6f5;opacity:0;font-weight:700;letter-spacing:-.02em;line-height:1.22;
  font-size:clamp(17px,2vw,24px);transition:color .45s ease, opacity .45s ease;text-shadow:0 2px 20px rgba(0,0,0,.3);}
.story__line.is-active{color:#fff;opacity:1;}
.story__line.is-active + .story__line{opacity:.25;}   /* 다음 줄 25% */

/* ── 메모 카드 ── */
.memo__bar{display:flex;gap:7px;margin-bottom:16px;}
.memo__bar span{width:11px;height:11px;border-radius:50%;background:#e2e6ee;}
.memo__bar span:nth-child(1){background:#ff5f57;}
.memo__bar span:nth-child(2){background:#febc2e;}
.memo__bar span:nth-child(3){background:#28c840;}
.memo__title{font-size:14px;font-weight:800;color:#9aa2b4;letter-spacing:.02em;margin-bottom:16px;}
.memo__list{list-style:none;display:flex;flex-direction:column;gap:15px;margin:0;padding:0;}
.memo__list li{position:relative;font-size:19px;font-weight:600;color:#0e1526;padding-left:32px;min-height:24px;line-height:1.3;}
.memo__list li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:6px;border:2px solid #cfd6e4;box-sizing:border-box;}
.memo__list li.done::before{background:var(--accent);border-color:var(--accent);}
.memo__list li.done::after{content:"";position:absolute;left:6px;top:7px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);}
.memo__list li.typing::after{content:"|";margin-left:3px;color:var(--accent);font-weight:800;animation:caret 1s steps(1) infinite;}
@keyframes caret{50%{opacity:0;}}

/* ── 계산기 카드 ── */
.uicard--calc{padding:20px;}
.calc__display{background:#0e1526;border-radius:14px;padding:16px 18px;min-height:98px;margin-bottom:14px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;}
.calc__expr{color:#cdd5e6;font-size:23px;font-weight:600;min-height:30px;letter-spacing:.5px;font-variant-numeric:tabular-nums;}
.calc__result{color:var(--accent);font-size:34px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(6px);transition:opacity .4s ease, transform .4s ease;}
.calc__result.show{opacity:1;transform:none;}
.calc__result:empty{display:none;}
.calc__result::before{content:"= ";opacity:.55;}
.calc__keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.calc__keys span{height:42px;border-radius:11px;background:#f1f3f8;color:#3a4560;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;}
.calc__keys .op{background:#e8eefb;color:var(--accent);}
.calc__keys .eq{background:var(--accent);color:#fff;}

/* ── 채팅 카드 ── */
.uicard--chat{padding:0;overflow:hidden;}
.chat__head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #eef0f4;}
.chat__ava{width:34px;height:34px;border-radius:50%;flex:none;color:#fff;font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff9f43,#ff7a1a);}
.chat__name{font-size:15px;font-weight:800;color:#0e1526;}
.chat__body{padding:16px;display:flex;flex-direction:column;gap:9px;min-height:236px;}
.bubble{max-width:76%;padding:9px 13px;border-radius:16px;font-size:15px;font-weight:500;line-height:1.35;
  opacity:0;transform:translateY(10px);transition:opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1);word-break:break-word;}
.bubble.show{opacity:1;transform:none;}
.bubble--recv{align-self:flex-start;background:#f0f2f6;color:#0e1526;border-bottom-left-radius:5px;}
.bubble--send{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:5px;}

/* ── 폰 목업 카드 ── */
.uicard--phone{background:transparent;box-shadow:none;padding:0;width:auto;}
.phone{position:relative;height:clamp(288px,40svh,372px);aspect-ratio:1170/2532;margin:0 auto;
  background:#0a0f1e;border:2px solid #23304a;border-radius:36px;overflow:hidden;
  box-shadow:0 44px 100px -26px rgba(0,0,0,.85), 0 0 0 6px rgba(255,255,255,.03);}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:42%;height:22px;
  background:#0a0f1e;border-radius:0 0 14px 14px;z-index:2;}
.phone__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;}

/* ── 줄6 CTA (흐름 안에서 공간 예약 → 라인과 겹치지 않음) ── */
.story__cta{display:flex;gap:12px;justify-content:center;align-items:center;min-height:54px;z-index:3;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;}
.story.is-finale .story__cta{opacity:1;pointer-events:auto;}   /* 흐름 유지(줄6 바로 아래) — 레이아웃 재배치 없음 */
.story__cta .btn{width:185px;justify-content:center;max-width:none;height:46px;}   /* 두 버튼 동일 폭(히어로와 통일) */

/* 모바일 전용 캐러셀 섹션: 기본(데스크탑) 숨김 — 아래 모바일 블록에서만 display:flex로 노출 */
.story-c{overflow:clip;contain:paint;   /* 카드(338px)가 좁은 폭에서 수 px 넘쳐 iOS 뷰포트를 넓히던 것 차단 */
  display:none;}

/* ═══ 모바일 스토리 = 캐러셀(.story-c) ═══ */
@media (max-width:767.98px), (pointer:coarse){
  /* CSS 스크롤 스냅 전면 제거(2026-07-31 실기기 리포트: '경계가 매번 다르고 위로는 안 넘어감').
     원인: v1의 [data-bgcolor]{scroll-snap-align:start}로 모든 섹션이 스냅 지점인데 섹션 높이가
     뷰포트보다 큰 게 많아(capabilities 859·FAQ 1263·pricing 1155) proximity가 멈춘 위치에 따라
     걸렸다 말았다 하고, 위로 스크롤 시엔 임계 밖이라 아예 안 걸림. iOS 관성과도 계속 충돌
     (07-21 되감기·07-30 휠 트랩 전례) → 네이티브 스크롤로 통일. 히어로·스토리는 각각 100lvh라
     스냅 없이도 한 화면 단위로 읽힘. */
  html{scroll-snap-type:none !important;}
  [data-bgcolor],.hero,.story-c{scroll-snap-align:none !important;scroll-snap-stop:normal !important;}
  .story{display:none !important;}                       /* sticky 스크럽 폐기 */
  /* ═══ 스토리(모바일) = 자동 전환 캐러셀 — 4998e9f 복원, .story-c 스코프 ═══ */
  /* lvh(주소창 접힌 큰 뷰포트) = iOS에서 스크롤 중 불변 + 실제 화면 꽉 참.
     (--vhpx 로드시 고정은 '주소창 있는 작은 값'을 얼려 스토리가 화면보다 낮아지던 실기기 문제 → lvh로 교체) */
  .hero{min-height:100vh;min-height:100lvh;}
  .story-c{position:relative;min-height:100vh;min-height:100lvh;height:100lvh;background:#07090f;color:#fff;overflow:hidden;
    display:flex;align-items:center;justify-content:center;box-sizing:border-box;
    touch-action:pan-y;                                   /* 가로 제스처는 브라우저가 스크롤로 처리 못 하게(화면 딸려감 방지) — 세로 스크롤·JS 스와이프는 유지 */
    padding:28px 20px calc(100lvh - 100svh + 26px);}      /* 하단 패딩에 (lvh−svh) 가산: centering 기준을 '보이는 영역(svh)'으로 —
                                                             섹션은 100lvh인데 사파리 하단 내비가 나오면 아래 ~130px이 안 보여
                                                             전체 중앙 배치 콘텐츠가 처져 보이던 것(실기기 리포트) 상향 보정 */

  .caro{position:static;width:min(440px,92vw);display:flex;flex-direction:column;align-items:center;   /* static: 진행 바 absolute 기준을 섹션(.story-c)으로 — 트랙과 절대 안 겹침 */
    gap:clamp(18px,3.2svh,32px);}
  /* 슬라이드 트랙 — 활성 슬라이드만 노출(fade+slide) */
  .caro__track{position:relative;width:100%;min-height:clamp(430px,66svh,540px);touch-action:pan-y;}   /* 가로 스와이프가 페이지를 밀지 않게(조상 pan-y 보강) */
  /* 방향성 전환: 진행 방향에서 들어오고 반대편으로 나감(스와이프 방향과 일치 = 이어지는 흐름).
     나가는 슬라이드(.is-leaving)는 빠르게(.38s), 들어오는 슬라이드는 부드럽게(.6s) — 겹치며 크로스페이드 */
  .caro__slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(18px,3svh,30px);opacity:0;visibility:hidden;transform:translateX(32px) scale(.985);
    transition:opacity .38s ease, transform .38s cubic-bezier(.4,0,.7,1), visibility .38s;}
  .caro__slide.is-leaving{transform:translateX(-32px) scale(.985);}
  .caro__track[data-dir="back"] .caro__slide{transform:translateX(-32px) scale(.985);}
  .caro__track[data-dir="back"] .caro__slide.is-leaving{transform:translateX(32px) scale(.985);}
  .caro__slide.is-active{opacity:1;visibility:visible;transform:none;
    transition:opacity .55s ease, transform .6s cubic-bezier(.22,.61,.36,1), visibility .55s;}
  .caro__track[data-dir] .caro__slide.is-active{opacity:1;visibility:visible;transform:none;}
  /* ↑ 특이도 가드: [data-dir=back] .caro__slide(0,3,0)가 .is-active(0,2,0)를 이겨
     뒤로 스와이프 후 활성 카드가 -32px로 밀려 보이던 버그 — (0,4,0)으로 활성 원위치 확정 */
  .caro__track.caro-warp .caro__slide{transition:none !important;}
  /* ↑ 워프: goTo가 방향 전환 시 대기 슬라이드를 새 방향 위치로 '즉시' 옮길 때 사용(애니 이동 방지) */
  /* 카피 스태거: 카드보다 살짝 늦게 따라옴 — 유기적 흐름 */
  .caro__slide .caro__copy{opacity:0;transform:translateY(10px);transition:opacity .3s ease, transform .3s ease;}
  .caro__slide.is-active .caro__copy{opacity:1;transform:none;
    transition:opacity .45s ease .12s, transform .5s cubic-bezier(.22,.61,.36,1) .12s;}
  .caro__card{width:min(420px,88vw);display:flex;flex-direction:column;align-items:center;}
  /* 카드: 스크럽용 절대배치(.uicard 베이스) 무력화 — 슬라이드가 표시/숨김 제어 */
  .story-c .uicard{position:relative;left:auto;bottom:auto;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;transition:none;will-change:auto;width:min(420px,88vw);margin:0;}
  /* shake: 스크럽 키프레임은 translate(-50%) 전제 → 캐러셀 전용으로 교체 */
  .story-c .uicard--search.shake{animation:cardShakeC .5s ease;}
  /* 피날레 슬라이드: 폰 영상(도달 시 지연 주입, 그 전엔 포스터) — 로고 마크/워드는 영상이 대신 */
  .caro__card--fin{gap:16px;}
  .caro__card--fin .fin__mark,.caro__card--fin .fin__word{display:none;}
  .fin__media{position:relative;width:min(400px,94vw);height:min(360px,42svh);margin-top:-44px;   /* 사장님 요청: 영상 위로(−24→−44) */
    border-radius:18px;overflow:hidden;background:#000;
    box-shadow:0 24px 60px -30px rgba(0,0,0,.8);}   /* 위로 살짝 올리고 박스 확대 */
  /* 줌인 크롭: cover(양옆 잘림) + 1.6배 — 소스 여백(연기) 대신 폰이 화면을 채움. 포스터도 동일(전환 시 점프 없음).
     (사장님 추가 줌 요청 — 영상 후반 폰 자체 확대 구간에서 상하 클리핑 가능성 있음, 실기기 확인) */
  .fin__poster,.fin__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    transform:scale(1.6);transform-origin:center;}
  .fin__video{opacity:0;transition:opacity .45s ease;}
  .fin__video.is-ready{opacity:1;}
  .fin__mark{width:60px;height:60px;border-radius:17px;background:linear-gradient(135deg,var(--accent-bright),var(--accent));
    box-shadow:0 20px 50px -12px rgba(59,130,246,.6);}
  .fin__word{font-size:clamp(38px,8vw,52px);font-weight:800;letter-spacing:-1.5px;color:#fff;}
  /* 카피 라인 */
  .caro__copy{margin:0;color:#fff;font-weight:700;letter-spacing:-.01em;text-align:center;
    font-size:clamp(18px,4.4vw,25px);line-height:1.4;max-width:min(680px,92vw);}
  .caro__copy b{color:var(--accent-bright);font-weight:800;}
  /* 다운로드(피날레만) — 모바일 풀폭 */
  .caro__dl{display:flex;gap:12px;justify-content:center;flex-direction:column;width:100%;max-width:320px;}
  .caro__dl .btn{width:100%;max-width:none;height:54px;}
  /* 더 알아보기(피날레) — PC .end-more와 동일 톤 */
  .caro__more{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;
    font-size:15px;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s ease;}
  .caro__more:hover{color:#fff;}
  /* ── 진행 바(스토리식) — 버튼/도트 대체: 두께 3px 절대배치라 카드·카피와 겹침 불가.
     지나간 칸 채움, 현재 칸은 자동전환 시간에 맞춰 차오름, 이동은 스와이프(칸 탭도 동작) ── */
  /* 앵커는 100svh(하단 내비 나온 상태의 작은 뷰포트) 기준 — 섹션은 100lvh라 하단 ~130px이
     내비 뒤에 깔림 → 섹션 bottom 기준이면 내비가 바·힌트를 가림(실기기 리포트).
     svh는 내비 상태와 무관한 고정값: 내비 나와도 그 위, 숨어도 같은 자리 */
  .caro__prog{position:absolute;left:50%;transform:translateX(-50%);
    top:calc(100svh - 34px);z-index:5;
    display:flex;gap:6px;width:min(300px,72vw);
    transition:opacity .35s ease;}
  /* 스와이프 힌트: 진행 바 위 — 첫 이동(스와이프/자동/탭) 시 사라짐. reduce 기기(자동전환 없음)의 유일한 어포던스 */
  .caro__hint{position:absolute;left:50%;transform:translateX(-50%);
    top:calc(100svh - 64px);z-index:5;
    display:flex;align-items:center;gap:7px;white-space:nowrap;
    font-size:13px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.62);
    pointer-events:none;transition:opacity .4s ease;}
  .caro__hint .hint-arr{display:inline-block;animation:hintNudge 1.6s ease-in-out infinite;}
  .caro__hint.off{opacity:0;}
  @keyframes hintNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
  /* 스토리가 화면을 벗어나면(더 알아보기 점프 후 상단 꼬리 등) 바·힌트 페이드 — 다른 섹션 위에 안 보이게 */
  .story-c.is-away .caro__prog,.story-c.is-away .caro__hint{opacity:0;}
  .caro__seg{position:relative;flex:1;height:3px;border-radius:999px;overflow:hidden;
    background:rgba(255,255,255,.22);cursor:pointer;padding:0;border:0;}
  .caro__seg::before{content:"";position:absolute;inset:-12px 0;}   /* 탭 히트영역 확장(시각 변화 없음) */
  .caro__seg::after{content:"";position:absolute;inset:0;border-radius:999px;background:#fff;
    transform:scaleX(0);transform-origin:left center;}
  .caro__seg.done::after{transform:scaleX(1);}
  .caro__seg.cur.full::after{transform:scaleX(1);}
  .caro__seg.cur.anim::after{animation:segFill linear forwards;}   /* duration은 JS가 DWELL로 인라인 */
  .story-c.seg-paused .caro__seg.cur.anim::after{animation-play-state:paused;}
  @keyframes segFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  @keyframes cardShakeC{
    0%,100%{transform:none;}
    20%{transform:translateX(-3px);}
    40%{transform:translateX(3px);}
    60%{transform:translateX(-2px);}
    80%{transform:translateX(2px);}
  }
}

/* ── 캐러셀: 짧은 화면 가드 (모바일 스코프) ── */
@media (max-width:767.98px) and (max-height:680px), (pointer:coarse) and (max-height:680px){
  .caro__track{min-height:clamp(330px,52svh,460px);}     /* 트랙 바닥 330 — SE급(~553h)에서 피날레 콘텐츠 수용 */
  .caro{gap:clamp(12px,2.2svh,22px);}
  .fin__media{height:min(200px,24svh);margin-top:-10px;} /* 짧은 화면: 줌인 유지하되 박스만 축소, 살짝 상향 */
  /* 더 알아보기는 항상 표시(확대 모드/SE에서 버튼 사라지던 문제) — 대신 콘텐츠를 위로 붙여 진행 바와 분리 */
  .caro__slide--fin{justify-content:flex-start;padding-top:4svh;gap:clamp(12px,2.4svh,20px);}
}
/* ── 캐러셀: 아주 짧은 화면(가로 모드 등) — 100dvh 고정 해제, 도트/화살표 클리핑 방지 ── */
@media (max-width:767.98px) and (max-height:540px), (pointer:coarse) and (max-height:540px){
  .hero{min-height:auto;}                                /* 가로 모드: 고정 높이 해제(콘텐츠 넘침 방지 — 기존 landscape 가드 유지) */
  .story-c{height:auto;min-height:100lvh;padding-top:18px;padding-bottom:14px;}
  .caro__track{min-height:clamp(260px,64svh,380px);}
}
/* ── 캐러셀: 모션 최소화 — 자동전환 없이 세로 나열(인디케이터 숨김) · 모바일 스코프 ── */
/* reduce(동작 줄이기): 자동전환·페이드만 끄고 '수동 캐러셀'은 유지(도트·화살표·스와이프).
   세로 나열로 떨구지 않음 — 실기기 Reduce Motion 사용자도 캐러셀로 보이게. */
@media (prefers-reduced-motion:reduce) and (max-width:767.98px), (prefers-reduced-motion:reduce) and (pointer:coarse){
  .story-c .caro__slide,.story-c .caro__copy,.story-c .fin__video{transition:none;}   /* 슬라이드 전환만 즉시 — 카드 내부 연출(타이핑·말풍선 등)은 유지(사장님 결정) */
  .story-c .caro__seg.cur.anim::after{animation:none;transform:scaleX(1);}   /* reduce: 차오름 대신 현재 칸 즉시 채움 */
  .story-c .caro__hint .hint-arr{animation:none;}                            /* reduce: 화살표 넛지 정지(힌트 자체는 유지) */
}

/* ── 태블릿(768~1199) ── */
@media(min-width:768px) and (max-width:1199.98px){
  .story__stage{justify-content:flex-start;padding-top:11svh;}   /* 카드 상단 1/3 — 모바일과 동일 앵커 */
  .story__cards{width:min(420px,80vw);}
  .uicard{width:min(420px,80vw);}
  .story__line{font-size:clamp(20px,2.9vw,24px);}
}

/* ── 모션 최소화: 정적 표시 ── */
@media(prefers-reduced-motion:reduce){
  /* 데스크탑 스크럽(.story) 한정 — 모바일 캐러셀(.story-c) 카드는 reduce여도 연출 유지(사장님 결정) */
  .story .uicard,.story .bubble,.story .calc__result,.story__line{transition:none;}
}

/* ── 짧은 화면(랩탑) 가드 ── */
@media(max-height:730px) and (min-width:768px){
  .story__cards{height:clamp(240px,34svh,300px);}
  .phone{height:clamp(240px,34svh,300px);}
  .story__line{font-size:clamp(14px,1.9svh,19px);}
  .story__stage{gap:clamp(14px,2.2svh,24px);}
}


/* ── 환율 검색 카드 (줄4) ── */
.uicard--search{padding:20px;}
.search__bar{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:999px;
  background:#f1f3f8;border:1.5px solid #e6eaf2;transition:box-shadow .2s ease, border-color .2s ease;}
.search__icon{width:18px;height:18px;color:#8b93a7;flex:none;}
.search__text{font-size:16px;font-weight:600;color:#0e1526;white-space:nowrap;overflow:hidden;min-height:20px;}
.search__bar.typing .search__text::after{content:"|";margin-left:1px;color:var(--accent);font-weight:700;animation:caret 1s steps(1) infinite;}
.search__bar.ring{animation:focusRing .8s ease;border-color:var(--accent);}
@keyframes focusRing{
  0%{box-shadow:0 0 0 0 rgba(59,130,246,0);}
  15%{box-shadow:0 0 0 4px rgba(59,130,246,.28);}
  30%{box-shadow:0 0 0 0 rgba(59,130,246,0);}
  45%{box-shadow:0 0 0 4px rgba(59,130,246,.28);}
  60%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0);}
}

.search__result{margin-top:16px;opacity:0;transform:translateY(8px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);}
.search__result.show{opacity:1;transform:none;}
.search__rhead{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.search__label{font-size:11px;font-weight:700;color:#9aa2b4;background:#eef1f6;padding:3px 8px;border-radius:6px;}
.search__cur{font-size:13px;font-weight:700;color:#5a6478;}
.search__num{font-size:33px;font-weight:800;color:#111;letter-spacing:-.5px;line-height:1.1;}
.search__won{font-size:18px;font-weight:700;margin-left:2px;}
.search__delta{margin-top:5px;font-size:13px;font-weight:600;color:#5a6478;}
.search__delta .up{color:#d60000;font-weight:700;}
.search__spark{display:block;width:100%;height:50px;margin-top:12px;overflow:visible;}
.search__spark polyline{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s ease .1s;}
.search__result.show .search__spark polyline{stroke-dashoffset:0;}
.search__spark circle{opacity:0;transition:opacity .3s ease .85s;}
.search__result.show .search__spark circle{opacity:1;}
.search__foot{margin-top:10px;font-size:11px;color:#9aa2b4;font-weight:500;}

/* 마무리 비트: shake + 툴팁 */
.uicard--search.shake{animation:cardShake .5s ease;}
@keyframes cardShake{
  0%,100%{transform:translate(-50%,0);}
  20%{transform:translate(calc(-50% - 3px),0);}
  40%{transform:translate(calc(-50% + 3px),0);}
  60%{transform:translate(calc(-50% - 2px),0);}
  80%{transform:translate(calc(-50% + 2px),0);}
}
.search__tooltip{position:absolute;left:50%;top:-16px;transform:translate(-50%,-6px);z-index:5;
  background:#0e1526;color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:12px;white-space:nowrap;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.55);opacity:0;visibility:hidden;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s;}
.search__tooltip::after{content:"";position:absolute;left:50%;bottom:-5px;width:11px;height:11px;
  background:#0e1526;border-radius:2px;transform:translateX(-50%) rotate(45deg);}
.search__tooltip.show{opacity:1;visibility:visible;transform:translate(-50%,0);}

@media(prefers-reduced-motion:reduce){
  /* 데스크탑 스크럽(.story) 한정 — 캐러셀 카드는 연출 유지 */
  .story .uicard--search.shake{animation:none;}
  .story .search__bar.ring{animation:none;}
  .story .search__result,.story .search__spark polyline,.story .search__spark circle,.story .search__tooltip{transition:none;}
}


/* ── 줄6 피날레: 배경 스포트라이트 + 폰 확대 ── */
.story__spotlight{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .7s ease;
  background:radial-gradient(58% 55% at 50% 45%, rgba(9,12,24,.82) 0%, rgba(5,7,15,.96) 62%, rgba(3,4,10,.99) 100%);}
.story.is-step6 .story__spotlight{opacity:0;}

/* 줄6: 3D 렌더 이미지 (가장자리 마스크로 다크 배경과 매끄럽게 블렌드) */
.uicard-render{display:block;margin:0 auto;height:clamp(300px,44svh,410px);width:auto;max-width:94vw;
  -webkit-mask-image:radial-gradient(ellipse 62% 80% at 50% 48%, #000 60%, transparent 90%);
  mask-image:radial-gradient(ellipse 62% 80% at 50% 48%, #000 60%, transparent 90%);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;}
.story.is-step6 .uicard-render{
  transform:scale(1.12);
  filter:drop-shadow(0 46px 90px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(59,130,246,.28));}

/* 피날레에선 폰이 주인공 — 이전 줄들은 사라지고 마지막 줄만 */
.story.is-step6 .story__line{opacity:0;}                       /* 줄1~5: 제자리에서 페이드아웃(이동/재배치 없음) */
.story.is-step6 .story__line.is-active{opacity:1;}             /* 줄6만 그 자리에 그대로 남김 — 영상 재생 내내 유지 */
.story__lines{transition:transform .5s ease;}                  /* 피날레 문구 하향 이동 부드럽게 */
.story.is-step6 .story__lines{transform:translateY(30px);}     /* 피날레: 문구 조금 아래로(사장님 요청 — 확대된 폰 영상과 간격) */



/* 줄6 피날레 모바일 */
@media(max-width:767.98px){
  .story__finale-vid{height:55svh;max-width:100vw;}   /* 경량 소스(finale_smoke_mobile.mp4)와 세트 */
}

/* ── 피날레 엔드: 검정 위 로고/CTA/더 알아보기 스태거 ── */
.story.is-ended .story__lines,.story.is-ended .story__cta{opacity:0;pointer-events:none;transition:opacity .3s ease;}
.story__end{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(22px,4svh,36px);padding:0 max(24px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-bottom));pointer-events:none;}
.end-item{opacity:0;transform:translateY(12px);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);}
.story.is-ended .end-item{opacity:1;transform:none;pointer-events:auto;}
.story.is-ended .end-logo{transition-delay:.8s;}   /* 검정 완료 직후 */
.story.is-ended .end-cta{transition-delay:.95s;}   /* +0.15s */
.story.is-ended .end-more{transition-delay:1.1s;}  /* +0.30s */
.end-logo{display:flex;align-items:center;gap:13px;}
.end-logo__mark{width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,var(--accent-bright),var(--accent));
  box-shadow:0 6px 20px rgba(59,130,246,.5);}   /* 워드마크 캡하이트보다 작게 — 심볼이 이름을 압도하지 않게 */
.end-logo__word{font-size:clamp(40px,5vw,56px);font-weight:800;letter-spacing:-1.5px;color:#fff;}
.end-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
@media(max-width:767.98px){                               /* 모바일: 로고·버튼·더보기 세로 스택 */
  .end-cta{flex-direction:column;width:100%;max-width:320px;}
  .end-cta .btn{width:100%;max-width:none;justify-content:center;height:54px;}
  .end-logo__word{font-size:clamp(34px,9vw,44px);}
  .end-logo{gap:10px;}
  .end-logo__mark{width:19px;height:19px;border-radius:5.5px;box-shadow:0 4px 14px rgba(59,130,246,.45);}
}
.end-more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;
  font-size:15px;font-weight:600;color:rgba(255,255,255,.55);transition-property:opacity,transform,color;}
.end-more:hover{color:#fff;}
.end-more__arrow{display:inline-block;animation:moreBob 1.6s ease-in-out infinite;}
@keyframes moreBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* (FEATURES 섹션 제거 — 2026-07-26 사장님 지시) */
@media(prefers-reduced-motion:reduce){
  .end-more__arrow{animation:none;}
  .end-item{transition:none;}
}