/* 홈 — 모니모 홈페이지 방식.
   한 줄 소개 → 구역마다 [두 줄 제목(둘째 줄에 색) + 한 줄 설명 + 큰 폰] → 혜택 카드 → 단어가 굴러가는 마무리 → 앱 시작.
   모니모는 폰 안 화면을 Lottie 로 만들었는데, 여기서는 페이빈 앱 실제 화면을 CSS 로 넘기고 눌림·말풍선을 얹는다.
   움직임은 transform·opacity 만 쓰고, 화면에 보일 때만(.in) 돈다. 라이브러리 없음. */
.pf{ --ink:#111418; --mute:#5E6870; --mint:#5CBFA4; --mint-ink:#1F7A63; --soft:#F1F7F5; --band:#F6FAF9;
  color:var(--ink); background:#fff; word-break:keep-all; overflow-wrap:break-word; overflow-x:clip; }

/* ---------- 소개 ---------- */
.pf-intro{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px;
  min-height:clamp(420px,62svh,600px); padding:48px 20px 40px; }
.pf-lead{ margin:0; font-size:clamp(20px,5.4vw,28px); font-weight:500; letter-spacing:-.03em; }
.pf-logo{ display:flex; align-items:center; gap:14px; }
.pf-logo img{ width:clamp(64px,18vw,92px); height:auto; display:block; animation:pfFloat 4.6s ease-in-out infinite; will-change:transform; }
.pf-logo b{ font-size:clamp(44px,13vw,68px); font-weight:800; letter-spacing:-.05em; line-height:1; }
@keyframes pfFloat{ 50%{ transform:translate3d(0,-8px,0); } }
.pf-words{ position:relative; width:100%; height:clamp(36px,9vw,46px); margin-top:6px; }
.pf-words span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:clamp(24px,6.6vw,34px); font-weight:800; letter-spacing:-.04em;
  color:var(--mint-ink); opacity:0; animation:pfWord 12s linear infinite; animation-delay:calc(var(--k) * 2s); }
@keyframes pfWord{ 0%{ opacity:0; transform:translate3d(0,45%,0); } 3%{ opacity:1; transform:none; } 14%{ opacity:1; transform:none; } 17%{ opacity:0; transform:translate3d(0,-45%,0); } 100%{ opacity:0; } }

/* ---------- 공통: 구역·제목·설명 ---------- */
.pf-sec{ padding:80px 20px 0; text-align:center; overflow:hidden; }
.pf-sec.band{ background:var(--band); }
.pf-t{ margin:0; font-size:clamp(24px,6.4vw,34px); font-weight:500; letter-spacing:-.04em; line-height:1.32; }
.pf-t .pfh{ display:block; background:none; font-weight:800; color:var(--mint-ink); }
.pf-sub{ margin:14px auto 0; max-width:21em; font-size:15.5px; line-height:1.65; color:var(--mute); text-wrap:pretty; }
.pf-more{ display:inline-flex; align-items:center; min-height:44px; margin:10px 7px 0; font-size:15px; font-weight:800; color:var(--mint-ink); text-decoration:underline; text-underline-offset:4px; }
.pf-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 18px; margin-top:6px; }
.pf-links .pf-more{ margin:4px 0 0; }
.pf-more:focus-visible, .pf-btn:focus-visible{ outline:2px solid var(--mint-ink); outline-offset:3px; }

/* 단어가 하나씩 올라오는 제목 (JS 가 단어를 쪼개 둔다) */
.pf-ready .txt{ display:inline-block; opacity:0; transform:translate3d(0,60%,0); }
.pf-ready .in .txt{ animation:pfTxt .7s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--i) * 90ms); }
@keyframes pfTxt{ to{ opacity:1; transform:none; } }
/* 덩어리째 떠오르기 */
.pf-ready .pf-up{ opacity:0; transform:translate3d(0,56px,0); }
.pf-ready .in .pf-up{ opacity:1; transform:none; transition:opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); transition-delay:var(--dl,0s); }

.pf-sym{ position:relative; width:128px; height:128px; margin:30px auto 0; border-radius:50%; background:radial-gradient(circle at 50% 40%, #fff, var(--soft)); display:grid; place-items:center; box-shadow:0 0 0 1px rgba(92,191,164,.25); }
.pf-sym img{ width:62px; height:auto; display:block; animation:pfFloat 4.6s ease-in-out infinite; }
.in .pf-sym::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--mint); opacity:0; animation:ptRing 2.8s ease-out infinite; }

/* ---------- 폰 (모니모처럼 모서리는 덜 둥글게) ---------- */
.mp-wrap{ position:relative; width:min(100%,380px); margin:34px auto 0; }
.mp{ --w:min(62vw,270px); position:relative; width:var(--w); aspect-ratio:390/844; margin:0 auto; padding:calc(var(--w) * .022);
  border-radius:calc(var(--w) * .075); background:#fff; box-shadow:0 0 0 1.5px #C9D0D4, 0 38px 60px -36px rgba(17,40,35,.5); }
.mp-s{ position:relative; width:100%; height:100%; border-radius:calc(var(--w) * .056); overflow:hidden; background:#fff; }
.mp-s img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:translate3d(100%,0,0); backface-visibility:hidden;
  animation:mpScr 10.2s linear infinite; animation-delay:calc(var(--k) * 3.4s); }
.mp-s img:first-child{ opacity:1; transform:none; animation-name:mpScr0; }
@keyframes mpScr0{ 0%,31%{ opacity:1; transform:none; } 34%{ opacity:0; transform:translate3d(-18%,0,0); } 66%{ opacity:0; transform:translate3d(100%,0,0); } 66.1%,100%{ opacity:0; transform:translate3d(100%,0,0); } }
@keyframes mpScr{ 0%{ opacity:1; transform:translate3d(100%,0,0); } 5%{ opacity:1; transform:none; } 31%{ opacity:1; transform:none; } 34%{ opacity:0; transform:translate3d(-18%,0,0); } 34.1%,100%{ opacity:0; transform:translate3d(100%,0,0); } }
/* 손가락이 누르는 자리 */
.mp-tap{ position:absolute; z-index:5; left:50%; top:90%; width:calc(var(--w) * .2); height:calc(var(--w) * .2); margin:calc(var(--w) * -.1) 0 0 calc(var(--w) * -.1);
  border-radius:50%; border:2px solid var(--mint); background:rgba(92,191,164,.25); opacity:0; animation:mpTap 3.4s linear infinite; }
@keyframes mpTap{ 0%,76%{ opacity:0; transform:scale(.6); } 86%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1.9); } }
/* 폰 곁에 떠오르는 말풍선 */
.mp-chip{ position:absolute; z-index:6; max-width:46%; padding:10px 13px; border-radius:14px; background:#fff; text-align:left; font-size:13px; font-weight:800; line-height:1.38; letter-spacing:-.02em;
  box-shadow:0 12px 26px -12px rgba(17,40,35,.5); opacity:0; animation:mpChip 10.2s linear infinite; animation-delay:calc(var(--c) * 3.4s + .6s); }
.mp-chip::before{ content:"✓"; display:inline-grid; place-items:center; width:17px; height:17px; margin-right:6px; border-radius:50%; background:var(--mint-ink); color:#fff; font-size:10px; vertical-align:1px; }
.mp-chip small{ display:block; margin-top:2px; font-size:11.5px; font-weight:600; color:var(--mute); }
/* 말풍선은 폰 화면을 가리지 않게 폰 바로 아래 한 자리에서 차례로 바뀐다 */
.mp-wrap{ padding-bottom:62px; }
.mp-chip{ left:50%; right:auto; top:auto; bottom:0; max-width:none; white-space:nowrap; translate:-50% 0; }
.mp-chip small{ display:inline; margin:0 0 0 6px; }
@keyframes mpChip{ 0%{ opacity:0; transform:translate3d(0,14px,0) scale(.9); } 6%{ opacity:1; transform:none; } 25%{ opacity:1; transform:translate3d(0,-5px,0); } 30%{ opacity:0; transform:translate3d(0,-14px,0); } 100%{ opacity:0; } }
/* 보이지 않을 때는 멈춘다 */
.pf-sec:not(.in) :is(.mp-s img,.mp-tap,.mp-chip,.mp-tag span,.pf-roll span,.pt-ring,.pt-chip,.bc *){ animation-play-state:paused; }
/* 받는 방법 이름표(수기→링크→QR)가 굴러간다 */
.mp-tag{ position:relative; z-index:6; margin:0 auto 18px; width:min(70%,200px); height:34px; border-radius:999px; background:#111418; color:#fff; overflow:hidden; }
.mp-tag span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; letter-spacing:-.02em; opacity:0; animation:mpTag 10.2s linear infinite; animation-delay:calc(var(--k) * 3.4s); }
@keyframes mpTag{ 0%{ opacity:0; transform:translate3d(0,60%,0); } 4%{ opacity:1; transform:none; } 31%{ opacity:1; transform:none; } 34%{ opacity:0; transform:translate3d(0,-60%,0); } 100%{ opacity:0; } }

/* ---------- 혜택 카드 ---------- */
.bc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:520px; margin:30px auto 0; text-align:left; }
.bc{ position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:168px; padding:16px; border-radius:20px; background:#fff; box-shadow:0 14px 30px -20px rgba(17,40,35,.35);
  font-size:16px; font-weight:800; line-height:1.4; letter-spacing:-.03em; }
.bc small{ display:block; margin-top:3px; font-size:12px; font-weight:600; color:var(--mute); }
.bc-vis{ position:relative; height:46px; }
/* 1 흐름 */
.bc-flow{ display:flex; align-items:center; gap:6px; }
.bc-flow i{ flex:none; width:16px; height:16px; border-radius:50%; background:var(--soft); box-shadow:inset 0 0 0 2px var(--mint); }
.bc-flow i:last-child{ background:var(--mint-ink); box-shadow:none; }
.bc-flow s{ position:relative; flex:1; height:0; border-top:2px dashed rgba(31,122,99,.4); }
.bc-flow s::after{ content:""; position:absolute; top:-5px; left:0; width:8px; height:8px; border-radius:50%; background:var(--mint); opacity:0; }
.in .bc-flow s::after{ animation:bcDot 1.8s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes bcDot{ 0%{ opacity:1; left:0; } 80%,100%{ opacity:1; left:calc(100% - 8px); } }
/* 2 막대 */
.bc-bar{ height:12px; border-radius:99px; background:var(--soft); overflow:hidden; margin-top:14px; }
.bc-bar b{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--mint),var(--mint-ink)); transform:scaleX(0); transform-origin:left; }
.in .bc-bar b{ animation:bcBar 1.4s cubic-bezier(.22,1,.36,1) .3s forwards; }
@keyframes bcBar{ to{ transform:scaleX(.78); } }
.bc-num{ margin-top:6px; font-size:13px; color:var(--mint-ink); font-weight:800; }
/* 3 서류 */
.bc-doc{ position:relative; width:34px; height:44px; border-radius:6px; background:#fff; box-shadow:inset 0 0 0 2px var(--mint); }
.bc-doc::before{ content:""; position:absolute; left:7px; right:7px; top:10px; height:2px; background:var(--mint); box-shadow:0 7px 0 var(--mint), 0 14px 0 var(--mint); opacity:.55; }
.bc-doc::after{ content:"✓"; position:absolute; right:-9px; bottom:-6px; width:20px; height:20px; border-radius:50%; background:var(--mint-ink); color:#fff; display:grid; place-items:center; font-size:12px; transform:scale(0); }
.in .bc-doc::after{ animation:bcPop .5s cubic-bezier(.34,1.6,.5,1) .7s forwards; }
@keyframes bcPop{ to{ transform:scale(1); } }
/* 4 개월 칸 */
.bc-mo{ display:grid; grid-template-columns:repeat(6,1fr); gap:5px; margin-top:12px; }
.bc-mo i{ height:22px; border-radius:6px; background:var(--soft); }
.in .bc-mo i{ animation:bcMo .4s ease both; animation-delay:calc(.2s + var(--n) * .16s); }
@keyframes bcMo{ to{ background:var(--mint); } }
.bc-mo i:nth-child(1){--n:0}.bc-mo i:nth-child(2){--n:1}.bc-mo i:nth-child(3){--n:2}.bc-mo i:nth-child(4){--n:3}.bc-mo i:nth-child(5){--n:4}.bc-mo i:nth-child(6){--n:5}
.pf-fine{ margin:16px auto 0; max-width:30em; font-size:13px; line-height:1.6; color:var(--mute); text-wrap:pretty; }

/* ---------- 한 곳에서: 굴러가는 단어 ---------- */
.pf-one{ padding:96px 20px 8px; text-align:center; }
.pf-one .big{ margin:0; font-size:clamp(30px,9vw,44px); font-weight:800; letter-spacing:-.05em; line-height:1.25; }
.pf-one .big span.s{ display:block; font-size:.62em; font-weight:500; color:var(--mute); letter-spacing:-.03em; }
.pf-one h4{ margin:34px 0 0; font-size:clamp(22px,6vw,30px); font-weight:500; letter-spacing:-.04em; line-height:1.4; }
.pf-roll{ position:relative; display:block; height:1.5em; font-weight:800; color:var(--mint-ink); }
.pf-roll span{ position:absolute; inset:0; display:flex; justify-content:center; align-items:center; opacity:0; animation:pfWord 12s linear infinite; animation-delay:calc(var(--k) * 2s); }

/* ---------- 카드단말기 ---------- */
.pt{ position:relative; width:min(64vw,260px); margin:30px auto 0; }
.pt img{ display:block; width:100%; height:auto; }
.pt-ring{ position:absolute; left:50%; top:34%; width:48%; aspect-ratio:1; margin:-24% 0 0 -24%; border-radius:50%; border:2px solid var(--mint); opacity:0; animation:ptRing 2.8s ease-out infinite; animation-delay:calc(var(--k) * .9s); }
@keyframes ptRing{ 0%{ opacity:.8; transform:scale(.4); } 100%{ opacity:0; transform:scale(1.7); } }
.pt-chip{ position:absolute; right:-6%; top:12%; padding:9px 13px; border-radius:14px; background:#fff; font-size:13px; font-weight:800; box-shadow:0 12px 26px -12px rgba(17,40,35,.5); opacity:0; animation:ptChip 4s linear infinite; }
.pt-chip::before{ content:"✓"; display:inline-grid; place-items:center; width:17px; height:17px; margin-right:6px; border-radius:50%; background:var(--mint-ink); color:#fff; font-size:10px; vertical-align:1px; }
@keyframes ptChip{ 0%,22%{ opacity:0; transform:translate3d(0,12px,0) scale(.9); } 30%{ opacity:1; transform:none; } 75%{ opacity:1; } 85%,100%{ opacity:0; transform:translate3d(0,-10px,0); } }

/* ---------- 마무리 ---------- */
.pf-end{ padding:88px 20px 72px; text-align:center; }
.pf-btns{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:28px; }
.pf-btn{ display:inline-flex; align-items:center; justify-content:center; width:min(100%,360px); min-height:54px; border-radius:999px; font-size:17px; font-weight:800; letter-spacing:-.02em; transition:transform .15s ease; }
.pf-btn:active{ transform:scale(.98); }
.pf-btn.main{ background:#111418; color:#fff; }
.pf-btn.sub{ color:#111418; box-shadow:inset 0 0 0 1px rgba(17,20,24,.18); }

/* ---------- 넓은 화면: 글 왼쪽, 폰 오른쪽(번갈아) ---------- */
@media (min-width:900px){
  .pf-intro{ min-height:520px; }
  .pf-sec{ padding:110px 40px 0; }
  .pf-sec.two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center; max-width:1080px; margin:0 auto; text-align:left; }
  .pf-sec.two .pf-sub{ margin-left:0; }
  .pf-sec.two .mp-wrap{ margin-top:0; }
  .pf-sec.two.flip > .txt-col{ order:2; }
  .pf-sec.band.two{ max-width:none; padding-inline:max(40px,calc((100vw - 1080px) / 2)); }
  .mp{ --w:270px; }
  .bc-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1080px; }
}

/* '움직임 줄이기' 설정(윈도우의 '애니메이션 효과 끄기' 포함)이어도 폰 화면 넘김은 그대로 돈다.
   이 설정이 켜진 기기에서 화면이 멈춰 보이던 것이 원인이었다. 모니모도 같은 방식이다. */