/* =========================================================
   캐치 앱 다운로드 랜딩 — /catchy
   인스타그램 광고 전용. 회사 홈(styles.css)·/test(test.css)와
   파일을 공유하지 않습니다. 브랜드 토큰만 같은 값을 복사해 왔습니다.

   레이아웃·인터랙션은 nokosu.app 모바일 버전을 참고했습니다.
     히어로(여러 줄 도입 → 큰 제목 → 배지 → 정면 폰)
     세 가지 기능 카드(카드마다 짧게 반복되는 동작 데모)
     폰 다섯 대 쇼케이스(가운데가 크게)
     마지막 권유(앱 아이콘 → 제목 → 배지)
   배경색은 이전 캐치 랜딩 그대로입니다.
   ========================================================= */

:root{
  --brand:        #45B1FF;
  --brand-deep:   #2B8FDB;
  --brand-tint:   #ECF7FF;
  --brand-tint-2: #C5E7FF;

  --ink:   #121418;
  --ink-2: #2A2E35;
  --ink-3: #565B64;
  --ink-4: #808892;
  --ink-5: #B9C1C9;

  --bg:      #FFFFFF;
  --bg-sub:  #F5F7FA;
  --demo-bg: #EDF1F6;
  --line:    #E1E6EC;
  --line-2:  #EBEFF5;

  --wrap: 520px;
  --gut:  20px;
  --ease: cubic-bezier(.16,1,.3,1);
  --gnb-h: 56px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--gnb-h); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Roboto, sans-serif;
  font-size:16px; line-height:1.6; letter-spacing:-.018em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  word-break:keep-all;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,p,figure,ul{ margin:0; }
ul{ padding:0; list-style:none; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; border-radius:10px; }

.wrap{
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
}

/* ---------- 등장 애니메이션 ----------
   html.js 일 때만 숨깁니다. 스크립트가 막히면 전부 처음부터 보입니다. */
.js .reveal{
  opacity:0; translate:0 18px;
  transition:opacity .8s var(--ease), translate .8s var(--ease);
}
.js .reveal.is-in{ opacity:1; translate:0 0; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.26s; }

/* ---------- 헤더 ---------- */
.gnb{
  position:sticky; top:0; z-index:50;
  height:var(--gnb-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left));
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease);
}
.gnb.is-scrolled{ border-bottom-color:var(--line-2); }
.gnb__logo{ height:22px; width:auto; }

/* 히어로 배지가 화면에서 사라진 뒤에만 나타나는 작은 다운로드 버튼 */
.gnb__cta{
  display:inline-flex; align-items:center;
  height:34px; padding:0 15px;
  border-radius:999px;
  background:var(--ink); color:#fff;
  font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  opacity:0; translate:0 -6px; pointer-events:none;
  transition:opacity .25s var(--ease), translate .25s var(--ease);
}
.gnb__cta.is-on{ opacity:1; translate:0 0; pointer-events:auto; }

/* ---------- 배경 빛 ---------- */
.glow{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.glow i{ position:absolute; display:block; border-radius:50%; filter:blur(60px); }
.glow i:nth-child(1){ width:300px; height:300px; top:-120px; right:-110px; background:#CFE8FF; opacity:.7; }
.glow i:nth-child(2){ width:260px; height:260px; top:300px; left:-150px; background:#E3ECFF; opacity:.6; }

/* 폰·앱 아이콘 뒤에서 천천히 숨쉬는 빛 */
.halo{
  position:absolute; z-index:-1; inset:-6% -34%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(69,177,255,.34), rgba(69,177,255,0));
  filter:blur(8px);
  animation:halo 8s ease-in-out infinite;
}
@keyframes halo{ 0%,100%{ opacity:.5; scale:1; } 50%{ opacity:.9; scale:1.06; } }

/* ---------- 1. 히어로 ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:36px 0 52px;
  text-align:center;
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F8FF 58%, var(--bg-sub) 100%);
}
.hero__inner{ position:relative; }

.hero__eyebrow{
  font-size:clamp(15px, 4.2vw, 17px);
  line-height:1.75; color:var(--ink-3); font-weight:500;
}
.hero__title{
  margin-top:10px;
  font-size:clamp(28px, 8.2vw, 38px);
  line-height:1.3; font-weight:800; letter-spacing:-.04em;
}
.hero__lead{
  margin-top:10px;
  font-size:clamp(14px, 3.9vw, 16px); color:var(--ink-4);
}

.hero__phone{
  position:relative; isolation:isolate;
  width:min(64%, 260px);
  margin:34px auto 0;
}
.hero__phone img{ width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(18,20,24,.14)); }

/* ---------- 스토어 배지 (가로 나란히) ---------- */
.badges{
  margin-top:22px;
  display:flex; justify-content:center; align-items:center; gap:10px;
}
/* 두 배지는 바깥 상자를 똑같이(155×46) 맞춥니다.
   App Store 이미지는 테두리 안쪽 여백이 넓어서 로고·글자가 작아 보이므로, 상자 안에서 이미지만 6% 키우고
   넘치는 가장자리(원래 테두리)는 잘라낸 뒤 같은 회색 테두리를 다시 그립니다.
   구글플레이 원본 위아래 투명 여백 10px 은 잘라낸 이미지를 씁니다. */
.badge{
  position:relative; overflow:hidden;
  display:block; flex:none;
  width:155px; height:46px;
  border-radius:7px;
  transition:scale .15s var(--ease), opacity .15s var(--ease);
}
.badge img{ width:100%; height:100%; object-fit:fill; }
.badge[data-store="ios"]{ background:#000; }
.badge[data-store="ios"] img{
  position:absolute; left:50%; top:50%;
  width:106%; height:auto; max-width:none;
  translate:-50% -50%;
}
.badge[data-store="ios"]::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:inset 0 0 0 1px #A6A6A6; pointer-events:none;
}
.badge:active{ scale:.96; }
@media (hover:hover){ .badge:hover{ opacity:.86; } }
@media (max-width:340px){ .badge{ width:132px; height:39px; border-radius:6px; } }

/* 기기에 맞는 스토어를 왼쪽에 */
html[data-os="android"] .badge[data-store="android"]{ order:-1; }

/* ---------- 섹션 머리 ---------- */
.head{ text-align:center; }
.head__eyebrow{
  display:inline-block;
  padding:6px 13px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink-3); letter-spacing:-.01em;
}
.head__title{
  margin-top:14px;
  font-size:clamp(24px, 6.8vw, 30px);
  line-height:1.3; font-weight:800; letter-spacing:-.04em;
}
.head__lede{
  margin-top:10px;
  font-size:clamp(14px, 3.9vw, 16px); line-height:1.7; color:var(--ink-3);
}

/* ---------- 2. 네 가지 기능 ---------- */
.feat{ padding:60px 0 56px; background:var(--bg-sub); }
.cards{ display:grid; gap:16px; margin-top:34px; }

.card{
  padding:28px 22px 22px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 1px 2px rgba(18,20,24,.03), 0 12px 30px rgba(18,20,24,.05);
}
.card__no{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; color:var(--ink-4);
}
.card__no span{ color:var(--ink); font-weight:800; }
.card__title{
  margin-top:16px;
  font-size:clamp(21px, 5.9vw, 24px);
  line-height:1.35; font-weight:800; letter-spacing:-.035em;
}
.card__desc{ margin-top:10px; font-size:15px; line-height:1.72; color:var(--ink-3); }

/* 데모 영역 공통. 화면 밖에 있으면 애니메이션을 멈춥니다(catchy.js 가 .is-playing 을 붙임). */
.demo{
  position:relative;
  margin-top:22px; height:220px;
  border-radius:20px;
  background:var(--demo-bg);
  overflow:hidden;
  container-type:size;
}
.demo:not(.is-playing) *,
.demo:not(.is-playing) *::before,
.demo:not(.is-playing) *::after{ animation-play-state:paused !important; }

/* 임시 캡처 썸네일 — 실제 이미지로 교체할 자리. 색만 달리해 무엇을 넣을지 구분합니다. */
.shot{
  display:block; flex:none;
  border-radius:8px;
  background:linear-gradient(150deg, var(--a), var(--b));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.shot--food { --a:#FFB38A; --b:#E0714A; }
.shot--shop { --a:#C9B8FF; --b:#8C74E0; }
.shot--cal  { --a:#9ED4FF; --b:#4A9AE0; }

/* --- 01 분류 --- */
.sort__lines{
  position:absolute; inset:0; width:100%; height:100%;
  fill:none; stroke:var(--ink-5); stroke-width:1.2; stroke-dasharray:3 4;
  vector-effect:non-scaling-stroke;
}
.chip{
  position:absolute; z-index:2;
  translate:-50% -50%;
  display:inline-flex; align-items:center; gap:6px;
  height:34px; padding:0 13px 0 11px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 1px 2px rgba(18,20,24,.05), 0 6px 16px rgba(18,20,24,.08);
  font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap;
  /* 오른쪽 끝에 붙은 칩은 남은 폭만큼 줄어들어 아이콘이 찌그러진다. 내용 폭을 고정한다 */
  width:max-content;
  animation:drift 4.5s ease-in-out infinite, catch 6s ease-in-out infinite both;
  animation-delay:var(--fd), var(--d);
}
.chip img{ width:16px; height:16px; flex:none; }
.chip--a{ left:20.7%; top:31.8%; --fd:0s;   }
.chip--b{ left:50%;   top:22.7%; --fd:-1.5s; }
.chip--c{ left:79.3%; top:31.8%; --fd:-3s;   }

/* translate(가운데 맞춤)·scale(받기)과 겹치지 않게 transform 으로만 띄웁니다 */
@keyframes drift{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
/* 캡처가 도착하는 순간 폴더가 살짝 커지며 파랗게 받아 줍니다 */
@keyframes catch{
  0%,30%,46%,100%{ scale:1; box-shadow:0 1px 2px rgba(18,20,24,.05), 0 6px 16px rgba(18,20,24,.08); }
  36%{ scale:1.1; box-shadow:0 0 0 2px var(--brand), 0 8px 20px rgba(69,177,255,.3); }
}

.sort__stack{
  position:absolute; left:50%; top:76.4%;
  width:44px; height:58px;
  translate:-50% -50%;
}
/* 뒤에 깔린 캡처 더미 — 멈춰 있는 장식 */
.sort__stack::before,
.sort__stack::after{
  content:""; position:absolute; inset:0;
  border-radius:8px; background:#fff;
  box-shadow:0 4px 12px rgba(18,20,24,.1);
}
.sort__stack::before{ rotate:-9deg; translate:-7px 3px; }
.sort__stack::after { rotate:7deg;  translate:6px 2px; }

.sort__stack .shot{
  position:absolute; inset:0; z-index:1;
  width:auto; height:auto;
  opacity:0;
  animation:fly 6s var(--ease) infinite both;
  animation-delay:var(--d);
}
.sort__stack .shot--food{ --tx:-29.3cqw; --ty:-44.5cqh; }
.sort__stack .shot--shop{ --tx:0cqw;     --ty:-53.6cqh; }
.sort__stack .shot--cal { --tx:29.3cqw;  --ty:-44.5cqh; }
/* 더미에서 한 장이 떠올라 → 자기 폴더로 날아가 작아지며 사라집니다 */
@keyframes fly{
  0%      { opacity:0; translate:0 0;   scale:1;   }
  6%      { opacity:1; translate:0 0;   scale:1;   }
  14%     { opacity:1; translate:0 -8px; scale:1.04; }
  36%     { opacity:1; translate:var(--tx) var(--ty); scale:.32; }
  42%,100%{ opacity:0; translate:var(--tx) var(--ty); scale:.2; }
}

/* --- 04 검색 --- */
.demo--search{ height:auto; container-type:normal; padding:16px; }
.sbar{
  display:flex; align-items:center; gap:8px;
  height:46px; padding:0 16px;
  border-radius:999px; background:#fff;
  box-shadow:0 1px 2px rgba(18,20,24,.04), 0 6px 16px rgba(18,20,24,.06);
  font-size:15px; font-weight:600; color:var(--ink);
}
.sbar__ico{ width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-4); stroke-width:1.8; stroke-linecap:round; }
.sbar__text{ white-space:nowrap; overflow:hidden; }
.sbar__caret{ width:2px; height:18px; background:var(--brand); border-radius:1px; animation:caret 1s steps(1) infinite; }
@keyframes caret{ 50%{ opacity:0; } }

.sres{ margin-top:12px; display:grid; gap:8px; }
.sres__row{
  display:flex; align-items:center; gap:12px;
  padding:10px; border-radius:14px; background:#fff;
  opacity:0; translate:0 28px;
  transition:opacity .5s ease, translate .5s ease;        /* 사라질 때는 한꺼번에 */
}
/* 나타날 때는 아래에서 위로 한 줄씩 */
.demo--search.is-found .sres__row{
  opacity:1; translate:0 0;
  transition:opacity 1.1s ease calc(var(--i) * .6s), translate 1.3s cubic-bezier(.22,1,.36,1) calc(var(--i) * .6s);
}
.sres__thumb{ width:42px; height:42px; flex:none; border-radius:10px; object-fit:cover; }
.sres__row b{ display:block; font-size:14px; font-weight:700; letter-spacing:-.02em; }
.sres__row small{ display:block; font-size:12px; color:var(--ink-4); }

/* --- 02 연결 ---
   catchy.js 가 단계마다 클래스를 붙입니다.
     .is-rows   정보 세 줄이 올라옴 (썸네일을 빛이 한 번 훑음)
     .is-press  링크 버튼이 눌림 (물결)
     .is-on     버튼이 파란색으로 바뀜
     .is-pop    링크 팝업이 버튼 위로 튀어나옴 */
.demo--link{
  height:auto; container-type:normal;
  padding:16px;
}
.lcard{
  width:max-content;                /* 내용 폭만큼만 — 오른쪽은 팝업 자리 */
  padding:14px 14px 12px;
  border-radius:18px; background:#fff;
  box-shadow:0 1px 2px rgba(18,20,24,.04), 0 10px 24px rgba(18,20,24,.07);
}
.lcard__top{ display:flex; align-items:center; gap:10px; }
.lcard__shot{
  position:relative; overflow:hidden; flex:none;
  width:42px; height:42px; border-radius:10px;
}
.lcard__shot img{ width:100%; height:100%; object-fit:cover; }
/* AI 가 캡처를 읽는 느낌 — 정보가 붙기 직전 위에서 아래로 한 번 훑는 빛 */
.lcard__shot::after{
  content:""; position:absolute; left:0; right:0; top:-45%; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
}
.demo--link.is-rows .lcard__shot::after{ animation:scan 1.1s ease-in-out; }
@keyframes scan{ from{ top:-45%; } to{ top:110%; } }
.lcard__name small{ display:block; font-size:11px; color:var(--ink-4); }
.lcard__name b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.03em; }

.lcard__info{ margin-top:10px; display:grid; gap:5px; }
.lcard__info li{
  display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--ink-2);
  opacity:0; translate:0 6px;
  transition:opacity .45s var(--ease), translate .45s var(--ease);
  transition-delay:calc(.35s + var(--i) * .22s);
}
.demo--link.is-rows .lcard__info li{ opacity:1; translate:0 0; }
.lcard__info svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--brand-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.lcard__foot{ margin-top:18px; display:flex; justify-content:center; }
.linkbtn{
  position:relative;
  width:32px; height:32px; border-radius:50%;
  transition:scale .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.linkbtn img{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .22s var(--ease); }
.linkbtn__on{ opacity:0; }
.demo--link.is-on .linkbtn__on{ opacity:1; }
.demo--link.is-on .linkbtn__off{ opacity:0; }
.demo--link.is-press .linkbtn{ scale:.86; }
.linkbtn__ripple{
  position:absolute; inset:-4px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(69,177,255,.45);
  opacity:0; pointer-events:none;
}
.demo--link.is-press .linkbtn__ripple{ animation:ripple .7s ease-out; }
@keyframes ripple{
  0%  { opacity:1; box-shadow:0 0 0 0 rgba(69,177,255,.45); }
  100%{ opacity:0; box-shadow:0 0 0 18px rgba(69,177,255,0); }
}

/* 링크 팝업 — 디자인 시안 자리: 데모 폭의 62%, 오른쪽 3%, 세로 가운데. 카드 오른쪽 위에 겹쳐 뜹니다.
   그림자는 filter:drop-shadow 대신 box-shadow 로 둡니다. iOS Safari 에서 drop-shadow 를 단 요소가
   사라질 때 사각 자국이 남았습니다. 닫힌 뒤에는 visibility 까지 꺼서 남는 레이어가 없게 합니다.
   모서리 반경은 원본(1444×848)의 둥근 모서리 96px 을 비율로 옮긴 값입니다. */
.linkpop{
  position:absolute; z-index:3;
  right:3%; top:50%;
  width:62%;
  margin-top:-18.2%;              /* 세로 가운데: 높이(폭 62% × 470/800 = 데모 폭의 36.4%)의 절반. margin % 는 폭 기준 */
  overflow:hidden;
  border-radius:6.6% / 11.3%;
  box-shadow:0 12px 28px rgba(18,20,24,.14), 0 2px 6px rgba(18,20,24,.06);
  transform-origin:20% 60%;
  opacity:0; scale:.92; translate:0 6px;
  visibility:hidden;
  pointer-events:none;
  /* 튕기지 않고 스르륵 — ease-out-quint 계열 */
  transition:opacity .5s ease, scale .7s cubic-bezier(.22,1,.36,1), translate .7s cubic-bezier(.22,1,.36,1), visibility 0s linear .7s;
}
/* 두 장을 겹쳐 둡니다: 아래는 강조 없는 팝업, 위는 '네이버에서 정보 더 알아보기' 가 눌린 팝업.
   팝업이 열리고 잠시 뒤 .is-hover 가 붙으면 위 장이 나타나 그 줄이 눌린 것처럼 보입니다. */
.linkpop img{ display:block; width:100%; height:auto; }
.linkpop .linkpop__hover{
  position:absolute; inset:0;
  opacity:0; transition:opacity .25s ease;
}
.demo--link.is-hover .linkpop__hover{ opacity:1; }
.demo--link.is-pop .linkpop{
  opacity:1; scale:1; translate:0 0; visibility:visible;
  transition:opacity .5s ease, scale .7s cubic-bezier(.22,1,.36,1), translate .7s cubic-bezier(.22,1,.36,1), visibility 0s;
}

/* --- 03 요약 ---
   앱 상세 화면(summary.svg)은 처음부터 그대로 보이고, 두 곳만 움직입니다.
     1) 제목 '브랜드 세일' — 이미지 속 제목을 흰 조각으로 가리고, 같은 자리에 글자를 한 자씩 칩니다(catchy.js)
     2) '이 정보 캐치!' — 빛이 한 번 스치고 주변에 작은 별이 반짝입니다
   위치·크기는 원본(393×406)에서 잰 값을 %·cqw 로 옮긴 것이라 카드 폭이 바뀌어도 맞습니다. */
.demo--sum{
  height:auto; container-type:normal;
  padding:16px;
}
.sumcard{
  position:relative; overflow:hidden;
  container-type:inline-size;
  border-radius:7.6% / 7.4%;       /* SVG 안 카드 모서리(rx 30 / 393×406)와 같게 */
  background:#fff;
  box-shadow:0 1px 2px rgba(18,20,24,.04), 0 10px 24px rgba(18,20,24,.07);
}
.sumcard__img{ width:100%; height:auto; }

/* 제목 타이핑 — 글자를 따로 쓰지 않고, SVG 안의 원래 제목('브랜드 세일')을 흰 덮개로 가렸다가
   덮개 왼쪽 끝을 글자 경계로 한 칸씩 옮겨 드러냅니다. 그래서 굵기·선명도가 나머지 글씨와 똑같습니다.
   원본 제목 자리 x 11.8~114, y 77~104. 글자 경계(원본 x): 브 32.6 · 랜 48.3 · 드 66.5 · 세 84.2 · 일 114
   --l 은 catchy.js 가 바꾸고, 기본값(29%)은 덮개 폭 0 = 제목이 다 보이는 상태입니다. */
.sumtitle{
  position:absolute;
  --l:29%;
  left:var(--l); top:19%; width:calc(29% - var(--l)); height:6.6%;
  background:#fff;
}

/* 뒤로 번지는 그라데이션 — 디자인 파일(psd/마케팅/03 요약/섀도우.svg) 그대로.
   요약 화면과 같은 좌표계라 원본 위치(x -7, y 154, 151×57)를 %로 옮겼습니다.
   multiply 로 겹쳐 흰 바탕에만 물들고 글자는 그대로 보입니다. */
.sumglow{
  position:absolute;
  left:calc(-7 / 393 * 100%); top:calc(154 / 406 * 100%);
  width:calc(151 / 393 * 100%); height:auto; max-width:none;
  mix-blend-mode:multiply;
  opacity:.55; scale:.9;
  animation:glow 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glow{
  0%, 100%{ opacity:.55; scale:.9; }
  40%     { opacity:1;   scale:1.08; }
}
/* '이 정보 캐치!' 글자만 반짝 — 글자 모양(catch-text.svg, 원본에서 뽑은 글자 경로)으로 마스크를 씌워
   빛 띠가 글자 안에서만 보입니다. 자리는 원본 x 35~111, y 172~194 */
.sumcatch{
  position:absolute;
  left:calc(35 / 393 * 100%); top:calc(172 / 406 * 100%);
  width:calc(76 / 393 * 100%); height:calc(22 / 406 * 100%);
  overflow:hidden; pointer-events:none;
  -webkit-mask:url(/assets/catchy/catch-text.svg) center / 100% 100% no-repeat;
          mask:url(/assets/catchy/catch-text.svg) center / 100% 100% no-repeat;
}
.sumcatch::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:55%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(215,238,255,.95) 50%, rgba(255,255,255,0) 100%);
  translate:-110% 0;
  animation:shine 2.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes shine{
  0%, 12%  { translate:-110% 0; }
  46%, 100%{ translate:260% 0; }
}
.twinkle{
  position:absolute; width:var(--s); height:var(--s);
  left:var(--x); top:var(--y);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:var(--c, var(--brand));
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity:0; scale:0;
  animation:twinkle 2.6s ease-in-out var(--d) infinite;
  pointer-events:none;
}
@keyframes twinkle{
  0%, 8%   { opacity:0; scale:0;  rotate:0deg; }
  22%      { opacity:1; scale:1;  rotate:45deg; }
  40%, 100%{ opacity:0; scale:.2; rotate:90deg; }
}

/* ---------- 3. 마지막 권유 ---------- */
.end{ padding:20px 0 24px; }
.end__box{
  padding:40px 22px 32px;
  border-radius:28px;
  text-align:center;
  background:linear-gradient(160deg, #EAF5FF 0%, #F6FAFF 60%, #FFFFFF 100%);
  border:1px solid var(--line-2);
}
.end__icon{ position:relative; isolation:isolate; display:block; width:76px; margin:0 auto; }
.end__icon .halo{ inset:-40%; }
.end__icon img{ width:76px; height:76px; border-radius:18px; background:#fff; box-shadow:0 0 0 1px var(--line-2), 0 10px 24px rgba(69,177,255,.24); }
.end__title{
  margin-top:22px;
  font-size:clamp(22px, 6.4vw, 28px);
  line-height:1.35; font-weight:800; letter-spacing:-.04em;
}

/* ---------- 푸터 ---------- */
.ft{
  padding:12px var(--gut) calc(28px + env(safe-area-inset-bottom));
  text-align:center; font-size:13px; color:var(--ink-4);
}
.ft nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:0 16px; }
.ft a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; }

/* ---------- 데스크톱 ---------- */
@media (min-width:900px){
  .hero{ padding-top:64px; }
  .feat{ padding-top:88px; }
}

/* ---------- 움직임 줄이기 ----------
   반복 데모를 멈추고 최종 장면을 그대로 보여 줍니다. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; translate:0 0; }
  .sres__row, .lcard__info li{ opacity:1; translate:0 0; }
  .twinkle, .sumcatch{ display:none; }
  .sumglow{ opacity:.8; scale:1; }
}