/* Header/hero frame: 40px desktop gutter, 25px corners. */
/* Reuse the original vector lettering in a horizontal desktop lockup. */
@media (min-width: 761px) {
  .header .logo img {
    content: url('/safe-logo-horizontal.svg');
    width: clamp(180px, 18vw, 220px);
    height: auto;
    max-width: none;
  }
  .header .logo { flex-shrink: 0; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .header .nav { gap: 16px; }
  .header .links { gap: 18px; font-size: 14px; }
  .header .nav .pill { padding: 12px 16px; font-size: 13px; white-space: nowrap; }
}

:root {
  --page-gutter: 40px;
  --panel-inset: 120px;
  --content-max: 1280px; /* 본문 최대 폭 — 섹션 배경은 넓게, 안쪽 내용만 이 폭으로 제한 */
  --panel-radius: 25px;
  --section-space: clamp(80px, 7vw, 132px);
  --header-height: 82px;
}

.home-page .hero,
.home-page main > section,
.home-page .final {
  width: min(1920px, calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
  border-radius: var(--panel-radius);
}

.home-page .final {
  margin-bottom: 150px;
}

.home-page main > section:not(.scrolly) {
  padding-block: var(--section-space);
}

.home-page main > section > .wrap {
  width: min(var(--content-max), calc(100% - var(--panel-inset) * 2));
}

/* 히어로 제목도 본문과 같은 세로선에 맞춥니다 */
@media (min-width: 1200px) {
  .home-page .hero .wrap {
    width: min(var(--content-max), calc(100% - var(--panel-inset) * 2));
    padding-left: 0;
  }
}

.home-page .hero { background-size: cover; }

/* 히어로 등장 — 가운데 좁은 박스가 가로로 쫙 펼쳐지며 배경이 드러나고(1.1초), 그 다음 글자가 올라옵니다 */
.home-page .hero { animation: hero-open 1.1s cubic-bezier(.76, 0, .24, 1) .15s both; }
/* 시작 박스는 화면 가운데, 폭 약 400px (모바일은 가운데 40%) */
@keyframes hero-open {
  from { clip-path: inset(0 max(30%, calc(50% - 200px)) round var(--panel-radius)); }
  to { clip-path: inset(0 0 round var(--panel-radius)); }
}
.home-page .hero-line > span,
.home-page .hero-line > em { animation-delay: 1.2s; }
.home-page .hero-line:nth-child(2) > em { animation-delay: 1.36s; }
.home-page .hero p { animation-delay: 1.6s; }
.home-page .hero-scroll { animation: hero-copy-reveal .6s ease-out 1.85s both; }

@media (max-width: 760px) {
  .home-page .hero { background-position: 62% center; }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero, .home-page .hero-scroll { animation: none; }
}

.home-page main > section[id], .home-page #contact {
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.home-page .benefits-journey { margin-top: 24px; }
.home-page .benefits-journey { background: transparent; } /* 혜택 영역 배경색 제거 — 페이지 흰 배경 그대로 */
.home-page .benefits-journey .scrolly-stage { border-radius: var(--panel-radius); background: transparent; }
.scrolly-ready .home-page .benefits-journey .scrolly-stage {
  top: var(--header-height);
  height: calc(100svh - var(--header-height) - 16px);
}

.home-page .benefits-journey .scrolly-scene {
  padding: 56px var(--panel-inset) 76px;
}

.home-page .benefits-journey .story-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
}

.home-page .story-wrap > *, .home-page .work > * { min-width: 0; }
.home-page .benefit-art { max-width: 480px; width: 100%; margin-inline: auto; }
.home-page .benefits-journey .story-copy h2 {
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: -.045em;
  font-weight: 700;
}
.home-page .journey-track { left: max(var(--panel-inset), calc((100% - var(--content-max)) / 2)); right: max(var(--panel-inset), calc((100% - var(--content-max)) / 2)); }
.home-page .work { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.home-page .heading { font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -.045em; }
.home-page .sub { font-size: 17px; line-height: 1.85; margin-block: 20px 28px; }
.home-page .features { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-page .feature { padding: 28px; min-height: 148px; border-radius: 20px; }
.home-page .feature span { color: #666; font-size: 14px; }
.home-page .merchant .row { align-items: center; }
.home-page .area { margin-top: 0; } /* 지점 섹션은 흰 배경이라 위 가맹점 상자와의 간격은 섹션 안쪽 여백(--section-space) 하나로 충분 */
.home-page .area-list { gap: 12px; max-width: 1000px; }
.home-page .area-list span { padding: 14px 20px; line-height: 1.5; }
.faq details { padding: 26px 0; }
.faq summary { gap: 15px; align-items: center; font-size: 20px; line-height: 1.6; }
.faq summary::after { flex-shrink: 0; }
.faq details p { max-width: 850px; font-size: 16px; margin-bottom: 0; }
.home-page .final { padding: var(--section-space) var(--panel-inset); }
.home-page .final p { line-height: 1.8; }
.home-page .final .btn { margin: 16px 4px 0; }
.home-page .footer { margin-top: 24px; } /* 푸터는 서브페이지처럼 화면 가로 전체 — 위 상담 배너와의 간격만 둡니다 */
.home-page .footer p { overflow-wrap: anywhere; }

@media (min-width: 761px) and (max-width: 1199px) {
  :root { --page-gutter: 28px; --panel-inset: 48px; }
  .home-page .header .wrap { width: calc(100% - var(--page-gutter) * 2); }
  .home-page .hero .wrap { width: 100%; padding: 60px var(--panel-inset) 100px; }
  .home-page .hero h1 { font-size: clamp(38px, 5vw, 56px); }
  .home-page .feature { padding: 22px; }
  .home-page .merchant .row { align-items: flex-start; flex-direction: column; gap: 16px; }
}

/* Tablet/short displays show every benefit in normal document flow. */
@media (max-width: 1023px), (max-height: 759px) {
  .home-page .benefits-journey { height: auto; }
  .home-page .benefits-journey .scrolly-stage { position: relative; top: auto; height: auto; overflow: visible; }
  .home-page .benefits-journey .scrolly-scene { min-height: 0; padding-block: 64px; }
  .home-page .benefits-journey .scrolly-scene + .scrolly-scene { border-top: 1px solid #e8dfd6; }
  .home-page .journey-track { display: none; }
  .home-page .benefits-journey .story-wrap { gap: 28px; }
}

@media (max-width: 760px) {
  :root {
    --page-gutter: 16px;
    --panel-inset: 20px;
    --panel-radius: 20px;
    --section-space: 56px;
    --header-height: 68px;
  }
  .home-page .header .wrap { width: calc(100% - var(--page-gutter) * 2); }
  .home-page .nav { height: var(--header-height); gap: 12px; }
  .home-page .logo { min-width: 0; }
  .home-page .logo img { max-width: 150px; height: 42px; }
  .home-page .nav .pill { flex-shrink: 0; padding: 12px 14px; font-size: 12px; }
  .home-page .hero .wrap {
    width: 100%;
    min-height: 480px;
    min-height: clamp(440px, calc(100svh - 170px), 720px);
    display: flex;
    padding: 214px var(--panel-inset) 172px;
  }
  .home-page .hero .wrap > div { min-width: 0; width: 100%; }
  .home-page .hero h1 { font-size: clamp(26px, 6.7vw, 44px); letter-spacing: -.055em; line-height: 1.4; margin: 0 0 22px; }
  .home-page .hero p { font-size: clamp(13px, 3.5vw, 16px); line-height: 1.8; margin: 0; }
  .home-page .hero-scroll { bottom: 20px; }
  .home-page .benefits-journey, .home-page .footer { margin-top: 16px; }
  .home-page .benefits-journey .scrolly-scene { padding: 48px var(--panel-inset); }
  .home-page .benefits-journey .story-wrap { display: flex; flex-direction: column; gap: 28px; }
  .home-page .benefits-journey .story-copy { text-align: left; width: 100%; }
  .home-page .benefits-journey .story-copy h2 { font-size: clamp(25px, 6vw, 34px); }
  .home-page .benefits-journey .story-copy > p:not(.story-kicker) { font-size: 14px; line-height: 1.8; }
  .home-page .benefits-journey .story-copy br { display: none; }
  .home-page .benefits-journey .story-copy h2 em { display: block; }
  .home-page .benefits-journey .story-kicker { font-size: 11px; line-height: 1.6; }
  .home-page .benefits-journey .condition-line { font-size: 12px; margin-top: 18px; padding-top: 14px; }
  .home-page .benefits-journey .story-copy small { font-size: 12px; }
  .home-page .benefits-journey .story-cta { padding: 14px 18px; font-size: 14px; }
  .home-page .intro-content { min-width: 0; width: 100%; }
  .home-page .intro-content h2 { font-size: clamp(21px, 5.3vw, 32px); letter-spacing: -.04em; }
  .home-page .benefit-art { zoom: 1; width: 100%; max-width: 340px; height: 310px; }
  .home-page .art-disc { width: 240px; height: 240px; }
  .home-page .milestone-card { width: 280px; max-width: 96%; transform: rotate(2deg); }
  .home-page .work { grid-template-columns: 1fr; gap: 28px; }
  .home-page .heading { font-size: clamp(26px, 6.2vw, 34px); line-height: 1.4; }
  .home-page .sub { font-size: 15px; margin-block: 16px 24px; }
  .home-page .features { gap: 10px; }
  .home-page .feature { padding: 20px 16px; min-height: 136px; border-radius: 16px; }
  .home-page .feature b { font-size: 16px; line-height: 1.5; }
  .home-page .feature span { font-size: 13px; }
  .home-page .merchant .btn { margin-top: 0; }
  .home-page .btn { min-height: 48px; padding: 15px 18px; font-size: 14px; }
  .home-page .area-list { gap: 8px; margin-top: 24px; }
  .home-page .area-list span { padding: 10px 14px; font-size: 13px; }
  .faq summary { font-size: 15px; gap: 14px; }
  .faq details { padding: 20px 0; }
  .faq details p { font-size: 14px; }
  .home-page .final { text-align: left; }
  .home-page .final p { font-size: 14px; }
  .home-page .final .btn { display: flex; width: 100%; margin: 12px 0 0; }
}

@media (max-width: 380px) {
  :root { --page-gutter: 12px; --panel-inset: 16px; }
  .home-page .features { grid-template-columns: 1fr; }
  .home-page .feature { min-height: 0; }
}

/* 쿠팡 구간 그래프 — 100건부터 400건까지 막대가 차례로 올라가며 +5만원씩 누적 (동작은 motion.js) */
.home-page .milestone-graph { width: 100%; max-width: 460px; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: none; } /* 흰 박스 없이 그래프만 표시 */
.home-page .milestone-graph .milestone-amount { margin: 0 0 22px; font-size: 16px; }
.home-page .milestone-graph .milestone-amount strong, .home-page .milestone-graph .milestone-total { color: #f08d1d; font-size: 72px; font-variant-numeric: tabular-nums; }
.home-page .milestone-graph .milestone-amount small { font-size: 30px; }
.milestone-bars {
  --bar-step: 22px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 196px;
  margin: 0;
  padding: 0 0 0;
  border-bottom: 2px solid #f3e4d7;
  list-style: none;
}
.milestone-bars li { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.milestone-bars i {
  display: block;
  width: 100%;
  height: calc(16px + var(--i) * var(--bar-step));
  border-radius: 6px 6px 2px 2px;
  background: #f08d1d;
  opacity: calc(.4 + var(--i) * .1);
  transform-origin: bottom;
}
.milestone-bars li:last-child i { opacity: 1; }
.milestone-bars b { color: #f08d1d; font-size: 12px; font-weight: 800; white-space: nowrap; }
.milestone-bars span {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  color: #8a8179;
  font-size: 12px;
  font-weight: 700;
}
.home-page .milestone-graph > p { margin-top: 36px; font-size: 13px; }

/* 재생 전(JS가 켠 상태): 막대·금액 숨김 → 재생: 100건부터 차례로 등장 */
.milestone-graph.is-armed i { transform: scaleY(0); }
.milestone-graph.is-armed b { opacity: 0; transform: translateY(8px) scale(.6); }
.milestone-graph.is-armed span { color: #cfc4bb; }
.milestone-graph.is-playing i {
  transform: scaleY(1);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.25) calc(var(--i) * 280ms + 150ms);
}
.milestone-graph.is-playing b {
  opacity: 1;
  transform: none;
  transition: opacity .25s ease calc(var(--i) * 280ms + 400ms), transform .35s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 280ms + 400ms);
}
.milestone-graph.is-playing span { color: #6e625a; transition: color .2s ease calc(var(--i) * 280ms + 150ms); }
.milestone-graph .milestone-total.is-bump { display: inline-block; animation: milestone-bump .3s ease; }
@keyframes milestone-bump { 50% { transform: scale(1.12); } }

@media (max-width: 760px) {
  .home-page .coupang-art { height: auto; }
  .home-page .milestone-graph { width: 100%; max-width: 340px; padding: 0; transform: none; }
  .home-page .milestone-graph .milestone-amount { margin-bottom: 14px; font-size: 14px; }
  .home-page .milestone-graph .milestone-amount strong, .home-page .milestone-graph .milestone-total { font-size: 52px; }
  .home-page .milestone-graph .milestone-amount small { font-size: 22px; }
  .milestone-bars { --bar-step: 15px; height: 140px; gap: 5px; }
  .milestone-bars b, .milestone-bars span { font-size: 10px; }
  .home-page .milestone-graph > p { margin-top: 28px; font-size: 12px; }
}

/* FAQ 인터랙션 (메인·라이더·가맹점 공통) — Q 배지, 회전하는 +/× 버튼, 부드럽게 열리고 닫히는 답변 (열고 닫는 동작은 motion.js) */
.faq summary { justify-content: flex-start; transition: color .2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: 'Q';
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #f08d1d;
  font-size: 20px;
  font-weight: 900;
  transition: background .25s ease, color .25s ease;
}
.faq summary::after {
  content: '+';
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff4ec;
  color: #f08d1d;
  font-size: 22px;
  line-height: 1;
  transition: transform .3s ease, background .3s ease, color .3s ease;
}
.faq details[open] summary,
.faq summary:hover { color: #f08d1d; }
.faq details[open] summary::after { transform: rotate(135deg); background: #f08d1d; color: #fff; }
.faq details.is-closing summary { color: inherit; }
.faq details.is-closing summary::before { background: #fff4ec; color: #f08d1d; }
.faq details.is-closing summary::after { transform: none; background: #fff4ec; color: #f08d1d; }
.faq summary:focus-visible { outline: 3px solid #f08d1d; outline-offset: 4px; border-radius: 6px; }
.faq details p { padding-left: 48px; }
.faq details.is-animating { overflow: hidden; }

@media (max-width: 760px) {
  .faq summary::before { width: 24px; height: 24px; font-size: 13px; }
  .faq summary::after { width: 30px; height: 30px; font-size: 19px; }
  .faq details p { padding-left: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq summary, .faq summary::before, .faq summary::after { transition: none; }
}

/* 혜택 소개 문구 — 한 줄씩 떠오르고, 스크롤을 내리면 "세이프"·"더 든든한 혜택"만 주황색으로 (동작은 motion.js) */
.home-page .intro-content .intro-title { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.35; letter-spacing: -.045em; color: #242424; }
.home-page .intro-line { display: block; overflow: hidden; padding: .06em .12em .12em; margin: -.06em -.12em -.12em; }
.home-page .intro-line > span, .home-page .intro-line > em { display: inline-block; }
.home-page .intro-title strong { font-weight: inherit; }
.home-page .intro-title em { font-style: normal; font-size: 1.2em; font-weight: 900; }
.home-page .intro-title strong,
.home-page .intro-title em { color: #f08d1d; }

/* JS가 켜지면: 처음엔 검정 → 스크롤로 is-lit 이 붙으면 세·이·프 → 더·든·든·한·혜·택 한 글자씩 주황 (글자 나누기는 motion.js) */
.intro-title.is-armed strong,
.intro-title.is-armed em { color: #242424; }
.intro-title .ch { transition: none; }
.intro-title.is-lit .ch { color: #f08d1d; transition: color 0s linear calc(var(--i) * 90ms); } /* 번지는 효과 없이 한 글자씩 딱딱 바뀜 */

/* 한 줄씩 떠오르기 */
.intro-title.is-armed .intro-line > * { transform: translateY(110%); opacity: 0; }
.intro-title.is-playing .intro-line > * { transform: none; opacity: 1; transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; }
.intro-title.is-playing .intro-line + .intro-line > * { transition-delay: .45s; }

@media (max-height: 700px) and (min-width: 761px) {
  .home-page .intro-content .intro-title { font-size: 40px; }
}
@media (max-width: 760px) {
  .home-page .intro-content .intro-title { font-size: clamp(24px, 6.4vw, 34px); }
}

/* 혜택 01·02 상단 — 번호 + 배민 / 쿠팡이츠 로고 */
.home-page .kicker-logo { display: flex; align-items: center; gap: 12px; }
.home-page .kicker-logo span { padding-right: 12px; border-right: 1px solid #e4d9d1; color: #f08d1d; line-height: 1; }
.home-page .kicker-logo img { display: block; width: auto; height: 20px; }
@media (max-width: 760px) {
  .home-page .kicker-logo { gap: 10px; }
  .home-page .kicker-logo span { padding-right: 10px; }
  .home-page .kicker-logo img { height: 20px; }
}

/* 강조 튀어오름 (친구 소개 30만원 등에서 사용) */
@keyframes ticket-hit {
  0% { transform: scale(.92); }
  45% { transform: scale(1.18); }
  100% { transform: none; }
}

/* 친구 소개 — 친구(왼쪽) 1,000건 → 연결선 → 소개한 기사님(오른쪽) 30만원 (동작은 motion.js) */
.friend-flow { display: flex; align-items: center; width: 100%; max-width: 470px; }
.friend-card {
  flex: 0 0 172px;
  padding: 25px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 40px #0000000f, 0 0 0 1px #0000000a;
  text-align: center;
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
}
.friend-photo {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #eee6df;
  transition: box-shadow .4s ease;
}
.friend-card > span { display: block; color: #222; font-size: 15px; }
.friend-card strong { display: block; margin: 8px 0 4px; color: #242424; font-size: 28px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.friend-card small { display: block; color: #948980; font-size: 11px; }
.friend-referrer strong { color: #f08d1d; }
.friend-referrer .friend-photo { box-shadow: 0 0 0 3px #f08d1d; }

.friend-link { position: relative; flex: 1; height: 44px; margin: 0 -4px; }
.friend-link i { position: absolute; top: 50%; left: 0; right: 0; height: 4px; margin-top: -2px; border-radius: 2px; background: #f1e9e2; overflow: hidden; }
.friend-link i::after { content: ''; position: absolute; inset: 0; background: #f08d1d; transform-origin: left; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.friend-link b {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #f08d1d;
  color: #fff;
  box-shadow: 0 6px 16px #f08d1d55;
  transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) .35s;
}
.friend-link svg { width: 20px; height: 20px; }

/* 재생 전(JS가 켠 상태) */
.friend-flow.is-armed .friend-card { opacity: 0; }
.friend-flow.is-armed .friend-new { transform: translateX(-18px); }
.friend-flow.is-armed .friend-referrer { transform: translateX(18px); }
.friend-flow.is-armed .friend-link i::after { transform: scaleX(0); }
.friend-flow.is-armed .friend-link b { transform: scale(0); }
.friend-flow.is-armed .friend-referrer strong { color: #e6ddd6; transform: scale(.92); }
.friend-flow.is-armed .friend-referrer .friend-photo { box-shadow: 0 0 0 2px #eee6df; }
/* 1) 카드 등장 → 2) 연결선 차오름 → 3) 30만원 강조 */
.friend-flow.is-in .friend-card { opacity: 1; transform: none; }
.friend-flow.is-in .friend-referrer { transition-delay: .12s; }
.friend-flow.is-linked .friend-link i::after { transform: none; }
.friend-flow.is-linked .friend-link b { transform: none; }
.friend-flow.is-paid .friend-referrer strong { color: #f08d1d; transform: none; transition: color .25s ease; animation: ticket-hit .6s cubic-bezier(.3, 1.6, .5, 1); }
.friend-flow.is-paid .friend-referrer .friend-photo { box-shadow: 0 0 0 3px #f08d1d; }

@media (max-width: 760px) {
  .home-page .friend-art { height: auto; padding: 8px 0; }
  .friend-flow { max-width: 340px; }
  .friend-card { flex-basis: 136px; padding: 16px 8px 14px; border-radius: 16px; }
  .friend-photo { width: 64px; height: 64px; margin-bottom: 10px; }
  .friend-card > span { font-size: 11px; }
  .friend-card strong { font-size: 22px; }
  .friend-link b { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .friend-link svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .friend-card, .friend-photo, .friend-link i::after, .friend-link b { transition: none; }
}

/* 배민 보너스 미터 — 0→70(기준, 회색) → 71~(주황) 진행 바 + 추가 보너스 누적 (동작은 motion.js) */
.bm-meter {
  --base: 70;   /* 0~70 구간 채움(%) */
  --extra: 30;  /* 70 이후 채움(%) */
  width: 100%;
  max-width: 440px;
  padding: 30px 30px 26px;
  border: 1px solid #ece6e1;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px -28px #0000002e;
  font-variant-numeric: tabular-nums;
}
.bm-label { color: #8a8179; font-size: 13px; font-weight: 700; }
.bm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bm-count-wrap { margin-left: auto; color: #1d1d1d; font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.bm-count-wrap small, .bm-bonus strong small { margin-left: 2px; font-size: .45em; letter-spacing: 0; }
.bm-badge {
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff1e3;
  color: #f08d1d;
  font-size: 11px;
  font-weight: 800;
}

/* 진행 바: 왼쪽 70% = 기준 구간, 오른쪽 30% = 추가 보너스 구간. 끝은 흐려지며 '계속됨'을 표현 */
.bm-track {
  position: relative;
  height: 14px;
  margin: 26px 0 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f3eeea 0 70%, #fdf1e4 70% 100%);
  isolation: isolate; /* 아래 z-index 순서를 막대 안에서만 적용 */
}
.bm-track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: -14px;
  width: 40px;
  border-radius: 0 999px 999px 0;
  background: repeating-linear-gradient(90deg, #f6c99a 0 4px, transparent 4px 9px);
  -webkit-mask: linear-gradient(90deg, #000, transparent);
  mask: linear-gradient(90deg, #000, transparent);
}
.bm-fill-base, .bm-fill-extra { position: absolute; top: 0; bottom: 0; display: block; }
.bm-fill-base { left: 0; width: calc(var(--base) * 1%); border-radius: 999px 0 0 999px; background: #2b2b2b; }
.bm-fill-extra {
  left: 70%;
  width: calc(var(--extra) * 1%);
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #f6a54a, #f08d1d);
  box-shadow: 0 0 18px #f08d1d66;
}
.bm-fill-extra::after {
  content: '';
  position: absolute;
  top: 50%; right: -4px;
  width: 22px; height: 22px;
  margin-top: -11px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #f08d1d;
  box-shadow: 0 4px 12px #f08d1d80;
  z-index: 2; /* 70건 기준선·끝 줄무늬보다 위에 */
}
.bm-mark { position: absolute; top: -8px; bottom: -8px; left: 70%; width: 2px; margin-left: -1px; background: #1d1d1d; border-radius: 2px; }
.bm-mark::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid #1d1d1d;
  opacity: 0;
}
.bm-scale { position: relative; display: flex; justify-content: space-between; height: 16px; color: #a39990; font-size: 11px; font-weight: 700; }
.bm-scale-mark { position: absolute; left: 70%; transform: translateX(-50%); color: #1d1d1d; white-space: nowrap; }
.bm-scale-end { color: #f08d1d; }
.bm-bonus { margin-top: 22px; padding-top: 20px; border-top: 1px dashed #eadfd6; }
.bm-bonus strong { display: block; width: max-content; margin-top: 4px; color: #f08d1d; font-size: 48px; font-weight: 900; letter-spacing: -.04em; line-height: 1.05; transform-origin: left center; }
.bm-bonus p { margin: 10px 0 0; color: #8a8179; font-size: 13px; }
.bm-bonus p b { color: #1d1d1d; }

/* +1,000 칩 (JS가 바 끝에서 하나씩 띄움) */
.bm-pops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bm-pop {
  position: absolute;
  bottom: 100%;
  margin-bottom: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f08d1d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  transform: translateX(-50%);
  animation: bm-pop-up .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes bm-pop-up {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(.7); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(.95); }
}

/* 재생 단계: is-armed(준비) → is-base(0→70) → is-hit(기준 달성) → is-extra(71~) → is-done */
.bm-meter.is-armed .bm-badge { opacity: 0; transform: translateY(4px) scale(.8); }
.bm-meter.is-armed .bm-fill-extra::after { opacity: 0; }
.bm-meter.is-armed .bm-scale-end { opacity: .35; }
.bm-meter.is-armed .bm-bonus strong { color: #e6ddd6; }
.bm-meter .bm-badge { transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.bm-meter.is-hit .bm-badge { opacity: 1; transform: none; }
.bm-meter.is-hit .bm-mark::after { animation: bm-ring .7s ease-out; }
.bm-meter.is-extra .bm-fill-extra::after { opacity: 1; transition: opacity .2s ease; }
.bm-meter.is-extra .bm-bonus strong { color: #f08d1d; transition: color .3s ease; }
.bm-meter.is-done .bm-bonus strong { animation: ticket-hit .6s cubic-bezier(.3, 1.6, .5, 1); }
.bm-meter.is-done .bm-scale-end { opacity: 1; transition: opacity .4s ease; animation: bm-blink 1.2s ease-in-out .2s 2; }
@keyframes bm-ring {
  0% { opacity: .9; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes bm-blink { 50% { opacity: .35; } }

@media (max-width: 760px) {
  .home-page .baemin-art { height: auto; padding: 22px 0 6px; }
  .bm-meter { max-width: 340px; padding: 22px 20px 20px; border-radius: 20px; }
  .bm-count-wrap { font-size: 36px; }
  .bm-bonus strong { font-size: 38px; }
  .bm-track { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-meter .bm-badge, .bm-pop { transition: none; animation: none; }
}

/* Mobile benefit spacing and readability; original animation selectors stay intact. */
@media (max-width: 760px) {
  .home-page .benefits-journey { overflow-x: clip; }
  .home-page .benefits-journey .scrolly-scene:not(.benefit-intro) {
    padding: 72px 4px 84px;
    border-top: 1px solid #e8dfd6;
  }
  .home-page .benefits-journey .story-wrap {
    max-width: 440px;
    gap: 36px;
  }
  .home-page .benefits-journey .story-copy { order: -1; }
  .home-page .benefits-journey .story-kicker { margin: 0 0 24px; }
  .home-page .benefits-journey .kicker-logo img { height: 26px; max-width: 100%; object-fit: contain; }
  .home-page .benefits-journey .story-copy h2 {
    font-size: clamp(27px, 7.1vw, 34px);
    line-height: 1.45;
    margin: 0 0 20px;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  .home-page .benefits-journey .story-copy > p:not(.story-kicker) {
    font-size: 16px;
    line-height: 1.85;
    margin: 0;
    word-break: keep-all;
  }
  .home-page .benefits-journey .benefit-art {
    max-width: 440px;
    height: auto;
    padding: 0;
  }
  .home-page .bm-meter { max-width: none; padding: 26px 22px; }
  .home-page .bm-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .home-page .bm-head .bm-label { grid-column: 1; }
  .home-page .bm-count-wrap { grid-column: 2; grid-row: 1 / 3; font-size: 44px; }
  .home-page .bm-badge { grid-column: 1; width: max-content; font-size: 12px; }
  .home-page .bm-label { font-size: 15px; }
  .home-page .bm-track { height: 18px; margin-top: 30px; }
  .home-page .bm-scale { height: 36px; font-size: 12px; }
  .home-page .bm-scale-end { margin-top: 18px; }
  .home-page .bm-bonus { margin-top: 18px; padding-top: 24px; }
  .home-page .bm-bonus strong { font-size: 48px; margin-top: 10px; }
  .home-page .bm-bonus p { font-size: 14px; line-height: 1.7; margin-top: 16px; }
  .home-page .milestone-graph { max-width: none; padding: 4px 4px 32px; }
  .home-page .milestone-graph .milestone-amount { font-size: 16px; margin-bottom: 24px; }
  .home-page .milestone-graph .milestone-amount strong,
  .home-page .milestone-graph .milestone-total { font-size: 64px; }
  .home-page .milestone-graph .milestone-amount small { font-size: 28px; }
  .home-page .milestone-bars { --bar-step: 22px; height: 192px; gap: 7px; }
  .home-page .milestone-bars b, .home-page .milestone-bars span { font-size: 12px; }
  .home-page .friend-flow { max-width: none; gap: 0; }
  .home-page .friend-card { flex: 1 1 0; min-width: 0; padding: 24px 8px; }
  .home-page .friend-photo { width: 76px; height: 76px; margin-bottom: 18px; }
  .home-page .friend-card > span { font-size: 13px; }
  .home-page .friend-card strong { font-size: clamp(26px, 7vw, 32px); margin-block: 12px 8px; }
  .home-page .friend-card small { font-size: 13px; }
  .home-page .friend-link { flex: 0 0 30px; margin: 0 -2px; z-index: 1; }
}

/* 라이더 소개 카드 아이콘 — 짧게 반복되는 모션 (움직임 줄이기 설정 시 정지) */
.feature .fi { display: block; width: 56px; height: 56px; margin-bottom: 16px; overflow: visible; }
.fi * { transform-box: view-box; }
.fi-clock .fi-min { transform-origin: 24px 25px; animation: fi-spin 3s linear infinite; }
.fi-clock .fi-hour { transform-origin: 24px 25px; animation: fi-spin 36s linear infinite; }
.fi-people .fi-p1 { animation: fi-hop 2.4s ease-in-out infinite; }
.fi-people .fi-p2 { animation: fi-hop 2.4s ease-in-out 1.2s infinite; }
.fi-people .fi-spark { transform-origin: 40px 9px; animation: fi-twinkle 2.4s ease-in-out infinite; }
.fi-bike .fi-body { animation: fi-ride .5s ease-in-out infinite alternate; }
.fi-bike .fi-wheel { animation: fi-spin .7s linear infinite; }
.fi-bike .fi-speed { animation: fi-speed .9s linear infinite; }
.fi-wallet .fi-coin { animation: fi-drop 2.6s cubic-bezier(.5, 0, .5, 1) infinite; }
.fi-wallet .fi-purse { transform-origin: 24px 42px; animation: fi-catch 2.6s ease-out infinite; }
@keyframes fi-spin { to { transform: rotate(360deg); } }
@keyframes fi-hop { 0%, 60%, 100% { transform: translateY(0); } 25% { transform: translateY(-4px); } }
@keyframes fi-twinkle { 0%, 100% { transform: scale(.5); opacity: 0; } 30%, 60% { transform: scale(1); opacity: 1; } }
@keyframes fi-ride { to { transform: translateY(-1.5px); } }
@keyframes fi-speed { from { transform: translateX(4px); opacity: 1; } to { transform: translateX(-4px); opacity: 0; } }
@keyframes fi-drop {
  0% { transform: translateY(-10px); opacity: 0; }
  20% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(0); opacity: 1; }
  62% { transform: translateY(14px); opacity: 1; }
  63%, 100% { transform: translateY(14px); opacity: 0; }
}
@keyframes fi-catch { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.06, .94); } 78% { transform: scale(.98, 1.02); } }
@media (prefers-reduced-motion: reduce) { .fi * { animation: none !important; } }
@media (max-width: 760px) { .feature .fi { width: 44px; height: 44px; margin-bottom: 12px; } }

/* 라이더·가맹점 버튼 묶음 — 주 버튼(상담 신청) + 보조 버튼(자세히 보기) */
.cta-pair { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-pair .btn { gap: 8px; min-height: 56px; padding: 0 24px; border: 1.5px solid transparent; transition: background-color .2s, border-color .2s, color .2s, transform .2s; }
.cta-pair .btn i { font-style: normal; transition: transform .2s; }
.cta-pair .btn:hover { transform: translateY(-2px); }
.cta-pair .btn:hover i { transform: translateX(3px); }
.cta-pair .btn:not(.btn-line):hover { background: #e07c0c; }
.btn-line { background: transparent; color: #1b1b1b; border-color: #d9d9d9 !important; }
.btn-line:hover { border-color: #1b1b1b !important; }
.home-page .work { grid-template-areas: "copy features" "cta features"; grid-template-rows: auto 1fr; row-gap: 0; }
.home-page .work > div:first-child { grid-area: copy; align-self: end; }
.home-page .work .features { grid-area: features; }
.home-page .work-cta { grid-area: cta; align-self: start; }
.home-page .work .sub { margin-bottom: 32px; }
.merchant-card { flex: 0 0 min(400px, 42%); padding: 32px; border-radius: 20px; background: #2a2a2a; border: 1px solid #383838; }
.merchant-card b { display: block; font-size: 17px; margin-bottom: 18px; }
.merchant-card ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.merchant-card li { position: relative; padding-left: 28px; color: #ccc; font-size: 15px; line-height: 1.5; }
.merchant-card li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #f08d1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.merchant-card .cta-pair .btn { flex: 1 1 auto; }
.merchant .btn-line { color: #fff; border-color: #555 !important; }
.merchant .btn-line:hover { border-color: #fff !important; }
.home-page .merchant .sub { margin-bottom: 0; }
@media (min-width: 761px) and (max-width: 1199px) {
  .home-page .merchant .row { flex-direction: row; align-items: center; gap: 32px; }
  .merchant-card { flex-basis: 46%; padding: 26px; }
}
@media (max-width: 760px) {
  .home-page .work { grid-template-areas: "copy" "features" "cta"; grid-template-rows: auto; row-gap: 0; }
  .home-page .work .sub { margin-bottom: 0; }
  .home-page .work .features { margin-top: 28px; }
  .home-page .work-cta { margin-top: 20px; }
  .cta-pair { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .cta-pair .btn { width: 100%; min-height: 52px; }
  .home-page .merchant .row { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .merchant-card { flex: none; padding: 24px 20px; margin: 0; }
  .merchant-card li { font-size: 14px; }
}

/* 제목 채우기 — 연한 글자 위로 색이 왼쪽부터 차오름 (--fill 은 motion.js 가 스크롤에 맞춰 0~100% 로 바꿉니다)
   --fill-1: 첫 줄 색 / --fill-2: 둘째 줄 색 / --fill-base: 차오르기 전 글자 색 */
.scroll-fill.is-filling span { --fill-color: var(--fill-1, #111); color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; background-image: linear-gradient(90deg, var(--fill-color) var(--fill, 0%), var(--fill-base, #d6d6d6) var(--fill, 0%)); }
.scroll-fill.is-filling span + br + span { --fill-color: var(--fill-2, #f08d1d); }
.area .scroll-fill { --fill-base: #e8d9cd; }
.merchant .scroll-fill { --fill-1: #fff; --fill-base: #4a4a4a; }
.final .scroll-fill { --fill-1: #fff; --fill-2: #fff; --fill-base: rgba(255, 255, 255, .4); }

/* 배경 상자 펼치기 — 가운데 좁은 띠(메인 첫 화면과 같은 폭)로 접혀 있다가, 화면에 들어오면 좌우로 한 번에 확 펼쳐집니다 (시점은 motion.js) */
.scroll-grow.is-growing { clip-path: inset(0 max(30%, calc(50% - 200px)) round var(--panel-radius)); transition: clip-path .95s cubic-bezier(.76, 0, .24, 1); }
.scroll-grow.is-growing.is-open { clip-path: inset(0 0 round var(--panel-radius)); }

/* 섹션 간격 통일 — 흰 배경 섹션이 연달아 오면 위·아래 여백이 겹쳐 두 배가 되므로, 뒤 섹션의 윗여백을 없애 간격을 --section-space 하나로 맞춥니다 */
.home-page .area + .faq { padding-top: 0; }
/* 섹션 사이 간격 — 화면 높이의 약 20%를 위·아래에 두어 스크롤할 때 한 번에 한 섹션씩 보이게 합니다.
   흰 배경 섹션(라이더·지점·FAQ)의 위아래 여백으로 간격을 만들고, 색 있는 상자(가맹점·하단 상담)는 안쪽 여백(--section-space)을 그대로 씁니다. 간격을 바꾸려면 --section-gap 만 수정하세요 */
:root { --section-gap: clamp(140px, 20vh, 240px); }
@media (max-width: 760px) { :root { --section-gap: clamp(96px, 14vh, 140px); } }
.home-page main > section#work, .home-page main > section.area, .home-page main > section.faq { padding-block: var(--section-gap); }
.home-page main > section.area + section.faq { padding-top: 0; }
.fi-key .fi-keyset { transform-origin: 15px 18px; animation: fi-swing 2.4s ease-in-out infinite; }
@keyframes fi-swing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* ==========================================================================
   서브페이지(라이더 모집 · 가맹점, body.sub-page) — 메인과 같은 디자인 언어
   둥근 상자 섹션 · 사진 첫 화면 펼침 · 제목 채우기 · 모션 아이콘 카드 · 검은 진행 절차 상자 펼침
   ========================================================================== */
.sub-page main > .page-hero,
.sub-page main > section,
.sub-page main > .final { width: min(1920px, calc(100% - var(--page-gutter) * 2)); margin-inline: auto; border-radius: var(--panel-radius); }
.sub-page main > section { padding-block: var(--section-gap); }
.sub-page main > section.panel { padding-block: var(--section-space); } /* 색 있는 상자는 안쪽 여백만 */
.sub-page main > .page-hero + section.panel { margin-top: 24px; } /* 상자끼리 붙을 때는 메인처럼 24px 띄움 */
.sub-page main > section:not(.panel) + section:not(.panel) { padding-top: 0; } /* 흰 섹션이 연달아 오면 여백이 겹치지 않게 */
.sub-page main > section > .wrap,
.sub-page main > .page-hero > .wrap { width: min(var(--content-max), calc(100% - var(--panel-inset) * 2)); }
.sub-page .heading { font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -.045em; }
.sub-page .sub { font-size: 17px; line-height: 1.85; }
.sub-page .footer { margin-top: 24px; }

/* 첫 화면 — 사진 배경 + 왼쪽 어둡게, 메인처럼 가운데 좁은 상자가 좌우로 펼쳐진 뒤 글자가 차례로 나타남 */
.page-hero-photo { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(480px, 64vh, 660px); padding: 0; color: #fff; background-color: #222; background-position: center; background-size: cover; background-repeat: no-repeat; animation: hero-open 1.1s cubic-bezier(.76, 0, .24, 1) .1s both; }
.page-hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, .12) 100%); }
.page-hero-photo .wrap { padding-block: 72px; }
.page-hero-photo h1 { color: #fff; margin: 14px 0 18px; }
.page-hero-photo .h1-kw { color: #f08d1d; }
.page-hero-photo .sub { color: rgba(255, 255, 255, .82); margin: 0 0 32px; }
.page-hero-photo .btn-line { color: #fff; border-color: rgba(255, 255, 255, .45) !important; }
.page-hero-photo .btn-line:hover { border-color: #fff !important; }
.page-hero-photo .wrap > * { animation: hero-copy-reveal .6s ease-out both; }
.page-hero-photo .wrap > :nth-child(1) { animation-delay: 1.05s; }
.page-hero-photo .wrap > :nth-child(2) { animation-delay: 1.18s; }
.page-hero-photo .wrap > :nth-child(3) { animation-delay: 1.32s; }
.page-hero-photo .wrap > :nth-child(4) { animation-delay: 1.46s; }

/* 혜택 카드 — 숫자를 크게, 마우스를 올리면 살짝 떠오름 */
.sub-page .benefit .cards { gap: 18px; }
.sub-page .card { padding: 32px; border-radius: 22px; transition: transform .25s, box-shadow .25s; }
.sub-page .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .07); }
.sub-page .card h3 { font-size: 22px; margin-top: 26px; }
.sub-page .card h3 strong { display: inline-block; margin-top: 4px; font-size: clamp(28px, 2.4vw, 34px); letter-spacing: -.04em; }

/* 모션 아이콘 카드 줄 */
.sub-page .features-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.sub-page .features-row.features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-page .features-row .feature { padding: 28px; min-height: 0; border-radius: 20px; }
.sub-page .features-row .feature span { color: #666; font-size: 14px; }

/* 진행 절차 — 검은 상자(화면에 들어오면 좌우로 펼쳐짐) + 번호 타임라인 */
.sub-page .process { background: #1d1d1d; color: #fff; }
.sub-page .process .sub { color: #aaa; }
.process .scroll-fill { --fill-1: #fff; --fill-base: #4a4a4a; }
.process-steps { display: grid; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; margin: 48px 0 0; padding: 0; list-style: none; } /* 단계 수(3·4개)에 맞춰 같은 폭으로 나눔 */
.process-steps li { position: relative; padding: 34px 28px 0 0; border-top: 1px solid #3a3a3a; }
.process-steps li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #f08d1d; box-shadow: 0 0 0 5px rgba(240, 141, 29, .18); }
.process-num { display: block; font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px #f08d1d; }
.process-steps b { display: block; margin: 20px 0 8px; font-size: 20px; }
.process-steps p { margin: 0; color: #aaa; font-size: 15px; line-height: 1.6; }

@media (max-width: 1000px) {
  .sub-page .features-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .page-hero-photo { min-height: 520px; align-items: flex-end; }
  .page-hero-photo::before { background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .25) 100%); }
  .page-hero-photo .wrap { padding-block: 48px 40px; }
  .page-hero-photo .sub br { display: none; }
  .sub-page .heading { font-size: clamp(26px, 6.2vw, 34px); line-height: 1.4; }
  .sub-page .sub { font-size: 15px; }
  .sub-page .card { padding: 26px 22px; }
  .sub-page .features-row, .sub-page .features-row.features-3 { gap: 10px; margin-top: 28px; }
  .sub-page .features-row.features-3 { grid-template-columns: 1fr; }
  .sub-page .features-row .feature { padding: 20px 16px; }
  .process-steps { grid-auto-flow: row; grid-template-columns: 1fr; margin-top: 32px; }
  .process-steps li { padding: 0 0 28px 30px; border-top: 0; border-left: 1px solid #3a3a3a; }
  .process-steps li:last-child { padding-bottom: 0; }
  .process-steps li::before { top: 4px; left: -6px; }
  .process-num { font-size: 34px; }
  .process-steps b { margin-top: 10px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-photo, .page-hero-photo .wrap > * { animation: none; }
}

/* 가맹점 카드 아이콘 — 지도 핀(통통 튀고 그림자가 줄었다 커짐), 계약서(체크 표시가 그려짐) */
.fi-pin .fi-drop { animation: fi-hop 1.8s ease-in-out infinite; }
.fi-pin .fi-shadow { transform-origin: 24px 42px; animation: fi-shadow 1.8s ease-in-out infinite; }
@keyframes fi-shadow { 0%, 60%, 100% { transform: scale(1); opacity: 1; } 25% { transform: scale(.6); opacity: .6; } }
.fi-doc .fi-check { stroke-dasharray: 1; animation: fi-check 2.4s ease-out infinite; }
.fi-doc .fi-badge { transform-origin: 34.5px 35.5px; animation: fi-pop 2.4s ease-out infinite; }
@keyframes fi-check { 0%, 15% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes fi-pop { 0%, 100% { transform: scale(1); } 8% { transform: scale(.85); } 18% { transform: scale(1.08); } 28% { transform: scale(1); } }