/* =========================================================
   100 OFFER FINAL - MOTION COMPLETE
   yeon-offer 전용 최종 CSS
   기존 /web/css/100-offer-final.css 내용 전체 삭제 후 이 파일로 교체
========================================================= */

body .yeon-offer {
  position: relative !important;
  background: #f7f7f7 !important;
  padding: 72px 0 !important;
  overflow: hidden !important;
  text-align: center !important;
}

body.yeon-snap-ready .yeon-offer.snap-section:not(.snap-hero):not(.snap-long),
body .yeon-offer.snap-section:not(.snap-hero):not(.snap-long) {
  min-height: var(--snap-vh, 100vh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

body .yeon-offer > .inner,
body .yeon-offer .inner.narrow {
  position: relative !important;
  width: min(1800px, calc(100% - 80px)) !important;
  max-width: 1800px !important;
  min-height: 820px !important;
  margin: 0 auto !important;
  padding: 88px 40px 74px !important;
  background: #ffffff !important;
  border: 1px solid #e4e4e4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

body .yeon-offer .offer-bubbles {
  position: relative !important;
  width: 100% !important;
  max-width: 760px !important;
  height: 178px !important;
  margin: 0 auto 34px !important;
  display: block !important;
  z-index: 2 !important;
}

body .yeon-offer .offer-bubble {
  position: absolute !important;
  left: 50% !important;
  min-height: 0 !important;
  height: 58px !important;
  padding: 0 42px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 27px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
  white-space: nowrap !important;
  opacity: 1;
  filter: drop-shadow(0 8px 12px rgba(228, 66, 72, 0.08)) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  will-change: transform, opacity !important;
}

body .yeon-offer .offer-bubble > span {
  display: inline-block !important;
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  width: 100%;
}

body .yeon-offer .bubble-01 {
  top: 0 !important;
  width: 560px !important;
  background: #f6cfd0 !important;
  z-index: 1 !important;
  transform: translate(-50%, 0) rotate(-3.5deg) scale(1);
}

body .yeon-offer .bubble-02 {
  top: 58px !important;
  width: 600px !important;
  background: #f3a7a9 !important;
  z-index: 2 !important;
  transform: translate(-50%, 0) rotate(2.5deg) scale(1);
}

body .yeon-offer .bubble-03 {
  top: 116px !important;
  width: 760px !important;
  height: 64px !important;
  background: #e94449 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  z-index: 3 !important;
  transform: translate(-50%, 0) rotate(-1.5deg) scale(1);
}

body .yeon-offer .bubble-03::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -22px !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 15px solid transparent !important;
  border-right: 15px solid transparent !important;
  border-top: 24px solid #e94449 !important;
}

/* 제목: JS가 실패해도 기본은 무조건 보임 */
body .yeon-offer .offer-title {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  text-align: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body .yeon-offer .offer-title h3 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111111 !important;
  font-size: 62px !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
  letter-spacing: -0.075em !important;
  text-align: center !important;
  word-break: keep-all !important;
  visibility: visible !important;
}

body .yeon-offer .offer-title h3 > span {
  display: block !important;
  width: 100% !important;
  color: #111111 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  opacity: 1;
  visibility: visible !important;
  transform: none;
  filter: none;
  will-change: transform, opacity, filter !important;
}

body .yeon-offer .offer-title h3 strong {
  display: inline-block !important;
  color: #e94449 !important;
  font-weight: 900 !important;
}

body .yeon-offer .offer-title p {
  display: block !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  color: #8a8a8a !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.045em !important;
  opacity: 1;
  visibility: visible !important;
  transform: none;
  filter: none;
}

/* 03-main-sections.css의 기본 애니메이션을 이 섹션에서는 끊고,
   yeon-offer가 화면에 들어왔을 때만 다시 실행되게 함 */
body .yeon-offer.offer-motion-ready .offer-bubble,
body .yeon-offer.offer-motion-ready .offer-bubble::before,
body .yeon-offer.offer-motion-ready .offer-title h3 > span,
body .yeon-offer.offer-motion-ready .offer-title p {
  animation: none !important;
}

/* JS가 살아있을 때만 섹션 진입 전 숨김 */
body .yeon-offer.offer-motion-ready:not(.is-visible) .offer-bubble {
  opacity: 0 !important;
}

body .yeon-offer.offer-motion-ready:not(.is-visible) .bubble-01 {
  transform: translate(-50%, -62px) rotate(-3.5deg) scale(0.88) !important;
}

body .yeon-offer.offer-motion-ready:not(.is-visible) .bubble-02 {
  transform: translate(-50%, -62px) rotate(2.5deg) scale(0.88) !important;
}

body .yeon-offer.offer-motion-ready:not(.is-visible) .bubble-03 {
  transform: translate(-50%, -62px) rotate(-1.5deg) scale(0.88) !important;
}

body .yeon-offer.offer-motion-ready:not(.is-visible) .offer-bubble::before {
  opacity: 0 !important;
  transform: translateY(-50%) rotate(-25deg) scale(0) !important;
}

body
  .yeon-offer.offer-motion-ready:not(.is-visible)
  .offer-title
  h3
  > span:nth-child(1) {
  opacity: 0 !important;
  transform: translateY(34px) scale(0.94) !important;
  filter: blur(4px) !important;
}

body
  .yeon-offer.offer-motion-ready:not(.is-visible)
  .offer-title
  h3
  > span:nth-child(2) {
  opacity: 0 !important;
  transform: translateY(44px) scale(0.9) !important;
  filter: blur(5px) !important;
}

body .yeon-offer.offer-motion-ready:not(.is-visible) .offer-title p {
  opacity: 0 !important;
  transform: translateY(18px) !important;
}

/* 말풍선 통통통 */
body .yeon-offer.is-visible .bubble-01 {
  animation: offerBubbleTong01 0.68s cubic-bezier(0.16, 1.65, 0.34, 1) 0.08s
    both !important;
}

body .yeon-offer.is-visible .bubble-02 {
  animation: offerBubbleTong02 0.68s cubic-bezier(0.16, 1.65, 0.34, 1) 0.34s
    both !important;
}

body .yeon-offer.is-visible .bubble-03 {
  animation: offerBubbleTong03 0.72s cubic-bezier(0.16, 1.65, 0.34, 1) 0.6s both !important;
}

/* 체크표시 통통통 */
body .yeon-offer.is-visible .bubble-01::before {
  animation: offerCheckTong 0.42s cubic-bezier(0.16, 1.9, 0.34, 1) 0.36s both !important;
}

body .yeon-offer.is-visible .bubble-02::before {
  animation: offerCheckTong 0.42s cubic-bezier(0.16, 1.9, 0.34, 1) 0.62s both !important;
}

body .yeon-offer.is-visible .bubble-03::before {
  animation: offerCheckTong 0.42s cubic-bezier(0.16, 1.9, 0.34, 1) 0.9s both !important;
}

/* 타이틀 뿅 */
body .yeon-offer.is-visible .offer-title h3 > span:nth-child(1) {
  animation: offerTextPopSoft 0.72s cubic-bezier(0.16, 1.65, 0.34, 1) 0.98s both !important;
}

body .yeon-offer.is-visible .offer-title h3 > span:nth-child(2) {
  animation: offerTextPopStrong 0.82s cubic-bezier(0.16, 1.75, 0.34, 1) 1.18s
    both !important;
}

body .yeon-offer.is-visible .offer-title p {
  animation: offerDescShow 0.5s ease 1.55s both !important;
}

@keyframes offerBubbleTong01 {
  0% {
    opacity: 0;
    transform: translate(-50%, -62px) rotate(-3.5deg) scale(0.88);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, 14px) rotate(-3.5deg) scale(1.07);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -4px) rotate(-3.5deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-3.5deg) scale(1);
  }
}

@keyframes offerBubbleTong02 {
  0% {
    opacity: 0;
    transform: translate(-50%, -62px) rotate(2.5deg) scale(0.88);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, 14px) rotate(2.5deg) scale(1.07);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -4px) rotate(2.5deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(2.5deg) scale(1);
  }
}

@keyframes offerBubbleTong03 {
  0% {
    opacity: 0;
    transform: translate(-50%, -62px) rotate(-1.5deg) scale(0.88);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, 14px) rotate(-1.5deg) scale(1.07);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -4px) rotate(-1.5deg) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-1.5deg) scale(1);
  }
}

@keyframes offerCheckTong {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(-25deg) scale(0);
  }
  54% {
    opacity: 1;
    transform: translateY(-50%) rotate(-13deg) scale(1.42);
  }
  76% {
    opacity: 1;
    transform: translateY(-50%) rotate(-13deg) scale(0.88);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) rotate(-13deg) scale(1);
  }
}

@keyframes offerTextPopSoft {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.94);
    filter: blur(4px);
  }
  58% {
    opacity: 1;
    transform: translateY(-7px) scale(1.045);
    filter: blur(0);
  }
  78% {
    opacity: 1;
    transform: translateY(2px) scale(0.99);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes offerTextPopStrong {
  0% {
    opacity: 0;
    transform: translateY(44px) scale(0.9);
    filter: blur(5px);
  }
  52% {
    opacity: 1;
    transform: translateY(-10px) scale(1.07);
    filter: blur(0);
  }
  74% {
    opacity: 1;
    transform: translateY(3px) scale(0.985);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes offerDescShow {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1280px) {
  body .yeon-offer > .inner,
  body .yeon-offer .inner.narrow {
    width: calc(100% - 64px) !important;
  }

  body .yeon-offer .offer-title h3 {
    font-size: 54px !important;
  }
}

@media (max-width: 1024px) {
  body .yeon-offer > .inner,
  body .yeon-offer .inner.narrow {
    width: calc(100% - 48px) !important;
    min-height: 560px !important;
    padding: 72px 24px 64px !important;
  }

  body .yeon-offer .offer-bubbles {
    max-width: 660px !important;
    height: 154px !important;
  }

  body .yeon-offer .offer-bubble {
    height: 50px !important;
    font-size: 22px !important;
  }

  body .yeon-offer .bubble-01 {
    width: 500px !important;
  }
  body .yeon-offer .bubble-02 {
    top: 50px !important;
    width: 540px !important;
  }
  body .yeon-offer .bubble-03 {
    top: 100px !important;
    width: 640px !important;
    height: 56px !important;
    font-size: 23px !important;
  }

  body .yeon-offer .offer-title h3 {
    font-size: 48px !important;
  }

  body .yeon-offer .offer-title p {
    font-size: 18px !important;
  }
}

@media (max-width: 768px) {
  body .yeon-offer {
    padding: 44px 0 !important;
  }

  body .yeon-offer > .inner,
  body .yeon-offer .inner.narrow {
    width: calc(100% - 28px) !important;
    min-height: auto !important;
    padding: 54px 16px 50px !important;
  }

  body .yeon-offer .offer-bubbles {
    height: 126px !important;
    margin-bottom: 24px !important;
  }

  body .yeon-offer .offer-bubble {
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
  }

  body .yeon-offer .offer-bubble::before {
    left: -24px !important;
    font-size: 30px !important;
  }

  body .yeon-offer .bubble-01 {
    top: 0 !important;
    width: 82% !important;
  }
  body .yeon-offer .bubble-02 {
    top: 39px !important;
    width: 88% !important;
  }
  body .yeon-offer .bubble-03 {
    top: 78px !important;
    width: 97% !important;
    height: 44px !important;
    font-size: 15px !important;
  }
  body .yeon-offer .bubble-03::after {
    bottom: -15px !important;
    border-left-width: 10px !important;
    border-right-width: 10px !important;
    border-top-width: 16px !important;
  }
  body .yeon-offer .bubble-03::before {
    left: -27px !important;
  }

  body .yeon-offer .offer-title h3,
  body .yeon-offer .offer-title h3 > span {
    font-size: 31px !important;
    line-height: 1.34 !important;
    white-space: normal !important;
  }

  body .yeon-offer .offer-title p {
    margin-top: 16px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  body .yeon-offer .offer-bubble,
  body .yeon-offer .bubble-03 {
    font-size: 13px !important;
    white-space: unset !important;
    line-height: 1.2 !important;
    width: 100% !important;
  }

  body .yeon-offer .offer-title h3,
  body .yeon-offer .offer-title h3 > span {
    font-size: clamp(21px, 6vw, 29px) !important;
  }

  body .yeon-offer .offer-title p {
    font-size: 13px !important;
  }
}

/* 문구 위에 작게 터지는 하트 효과 */
body .yeon-offer .offer-heart-pop {
  position: absolute !important;
  left: 50% !important;
  top: -84px !important;
  width: 180px !important;
  height: 76px !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

body .yeon-offer .offer-heart-pop span {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  display: block !important;
  color: #ef3f49 !important;
  font-size: 17px !important;
  line-height: 1 !important;
  opacity: 0;
  text-shadow: 0 5px 12px rgba(233, 68, 73, 0.2) !important;
  transform: translate(-50%, 8px) scale(0.15) rotate(-8deg);
  will-change: transform, opacity !important;
}

body .yeon-offer.is-visible .offer-heart-pop span {
  animation: offerHeartPop 5.2s cubic-bezier(0.22, 0.65, 0.28, 1) infinite both !important;
}

body .yeon-offer .offer-heart-pop span:nth-child(1) {
  margin-left: -32px !important;
  font-size: 14px !important;
  animation-delay: 2.85s !important;
}

body .yeon-offer .offer-heart-pop span:nth-child(2) {
  margin-left: 2px !important;
  font-size: 20px !important;
  animation-delay: 3.02s !important;
}

body .yeon-offer .offer-heart-pop span:nth-child(3) {
  margin-left: 35px !important;
  font-size: 15px !important;
  animation-delay: 3.19s !important;
}

body .yeon-offer .offer-heart-pop span:nth-child(4) {
  margin-left: -8px !important;
  font-size: 12px !important;
  animation-delay: 5.05s !important;
}

body .yeon-offer .offer-heart-pop span:nth-child(5) {
  margin-left: 25px !important;
  font-size: 13px !important;
  animation-delay: 5.22s !important;
}

@keyframes offerHeartPop {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.45) rotate(-5deg);
  }

  10% {
    opacity: 0.88;
    transform: translate(-50%, -3px) scale(1.04) rotate(3deg);
  }

  24% {
    opacity: 0.72;
    transform: translate(-50%, -19px) scale(0.94) rotate(-2deg);
  }

  40%,
  99% {
    opacity: 0;
    transform: translate(-50%, -38px) scale(0.78) rotate(4deg);
  }
}

@media (max-width: 768px) {
  body .yeon-offer .offer-heart-pop {
    top: -58px !important;
    width: 120px !important;
    height: 52px !important;
  }

  body .yeon-offer .offer-heart-pop span {
    font-size: 12px !important;
  }

  body .yeon-offer .offer-heart-pop span:nth-child(1) {
    margin-left: -22px !important;
    font-size: 10px !important;
  }

  body .yeon-offer .offer-heart-pop span:nth-child(2) {
    font-size: 14px !important;
  }

  body .yeon-offer .offer-heart-pop span:nth-child(3) {
    margin-left: 23px !important;
    font-size: 11px !important;
  }

  body .yeon-offer .offer-heart-pop span:nth-child(n + 4) {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .yeon-offer.is-visible .offer-heart-pop span {
    animation: none !important;
  }
}

/* =========================================================
   OFFER 말풍선 애니메이션 속도 조절
   퉁~ 퉁~ 퉁~ 자연스럽게
========================================================= */

/* 말풍선 1,2,3 등장 속도 */
body .yeon-offer.is-visible .bubble-01 {
  animation: offerBubbleTong01 1.08s cubic-bezier(0.22, 1.18, 0.28, 1) 0.12s
    both !important;
}

body .yeon-offer.is-visible .bubble-02 {
  animation: offerBubbleTong02 1.08s cubic-bezier(0.22, 1.18, 0.28, 1) 0.72s
    both !important;
}

body .yeon-offer.is-visible .bubble-03 {
  animation: offerBubbleTong03 1.12s cubic-bezier(0.22, 1.18, 0.28, 1) 1.32s
    both !important;
}

/* 체크표시도 말풍선 속도에 맞춰 조금 늦게 */
body .yeon-offer.is-visible .bubble-01::before {
  animation: offerCheckTong 0.58s cubic-bezier(0.22, 1.35, 0.28, 1) 0.58s both !important;
}

body .yeon-offer.is-visible .bubble-02::before {
  animation: offerCheckTong 0.58s cubic-bezier(0.22, 1.35, 0.28, 1) 1.18s both !important;
}

body .yeon-offer.is-visible .bubble-03::before {
  animation: offerCheckTong 0.58s cubic-bezier(0.22, 1.35, 0.28, 1) 1.82s both !important;
}

/* 말풍선 끝난 뒤 타이틀 등장 타이밍 */
body .yeon-offer.is-visible .offer-title h3 > span:nth-child(1) {
  animation: offerTextPopSoft 0.78s cubic-bezier(0.22, 1.25, 0.28, 1) 2.25s both !important;
}

body .yeon-offer.is-visible .offer-title h3 > span:nth-child(2) {
  animation: offerTextPopStrong 0.86s cubic-bezier(0.22, 1.28, 0.28, 1) 2.48s
    both !important;
}

body .yeon-offer.is-visible .offer-title p {
  animation: offerDescShow 0.58s ease 2.92s both !important;
}

/* 1번 말풍선 */
@keyframes offerBubbleTong01 {
  0% {
    opacity: 0;
    transform: translate(-50%, -70px) rotate(-3.5deg) scale(0.94);
  }

  48% {
    opacity: 1;
    transform: translate(-50%, 9px) rotate(-3.5deg) scale(1.025);
  }

  66% {
    opacity: 1;
    transform: translate(-50%, -5px) rotate(-3.5deg) scale(0.992);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, 2px) rotate(-3.5deg) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-3.5deg) scale(1);
  }
}

/* 2번 말풍선 */
@keyframes offerBubbleTong02 {
  0% {
    opacity: 0;
    transform: translate(-50%, -70px) rotate(2.5deg) scale(0.94);
  }

  48% {
    opacity: 1;
    transform: translate(-50%, 9px) rotate(2.5deg) scale(1.025);
  }

  66% {
    opacity: 1;
    transform: translate(-50%, -5px) rotate(2.5deg) scale(0.992);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, 2px) rotate(2.5deg) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(2.5deg) scale(1);
  }
}

/* 3번 말풍선 */
@keyframes offerBubbleTong03 {
  0% {
    opacity: 0;
    transform: translate(-50%, -70px) rotate(-1.5deg) scale(0.94);
  }

  48% {
    opacity: 1;
    transform: translate(-50%, 9px) rotate(-1.5deg) scale(1.025);
  }

  66% {
    opacity: 1;
    transform: translate(-50%, -5px) rotate(-1.5deg) scale(0.992);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, 2px) rotate(-1.5deg) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-1.5deg) scale(1);
  }
}

/* =========================================================
   OFFER 타이틀 애니메이션
   말풍선 퉁~ 퉁~ 퉁~ 이후 제목 뿅 등장
========================================================= */

body .yeon-offer .offer-title {
  overflow: visible !important;
}

body .yeon-offer .offer-title h3 {
  overflow: visible !important;
}

body .yeon-offer .offer-title h3 > span {
  display: block !important;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

body .yeon-offer .offer-title h3 strong {
  display: inline-block !important;
  transform-origin: center center;
  will-change: transform;
}

/* 1번째 줄 : 한 해 평균 1,000쌍의 선택 */
body .yeon-offer.is-visible .offer-title h3 > span:nth-child(1) {
  animation: offerTitlePop01 0.9s cubic-bezier(0.18, 1.45, 0.32, 1) 2.48s both !important;
}

/* 2번째 줄 : 누적 15,000건 이상의 웨딩 성사 */
body .yeon-offer.is-visible .offer-title h3 > span:nth-child(2) {
  animation: offerTitlePop02 0.95s cubic-bezier(0.18, 1.5, 0.32, 1) 2.74s both !important;
}

/* 숫자 강조 뿅 */
body .yeon-offer.is-visible .offer-title h3 > span:nth-child(1) strong {
  animation: offerNumberPop 0.65s cubic-bezier(0.18, 1.6, 0.32, 1) 2.82s both !important;
}

body .yeon-offer.is-visible .offer-title h3 > span:nth-child(2) strong {
  animation: offerNumberPop 0.7s cubic-bezier(0.18, 1.6, 0.32, 1) 3.08s both !important;
}

/* 설명 문구 */
body .yeon-offer .offer-title p {
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}

body .yeon-offer.is-visible .offer-title p {
  animation: offerDescSoftUp 0.75s ease 3.35s both !important;
}

/* 제목 1줄 뿅 */
@keyframes offerTitlePop01 {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.82);
    filter: blur(5px);
  }

  55% {
    opacity: 1;
    transform: translateY(-8px) scale(1.08);
    filter: blur(0);
  }

  72% {
    opacity: 1;
    transform: translateY(3px) scale(0.98);
  }

  86% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 제목 2줄 더 강하게 뿅 */
@keyframes offerTitlePop02 {
  0% {
    opacity: 0;
    transform: translateY(34px) scale(0.78);
    filter: blur(6px);
  }

  52% {
    opacity: 1;
    transform: translateY(-10px) scale(1.1);
    filter: blur(0);
  }

  70% {
    opacity: 1;
    transform: translateY(4px) scale(0.97);
  }

  86% {
    opacity: 1;
    transform: translateY(-2px) scale(1.025);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 숫자 부분만 한 번 더 강조 */
@keyframes offerNumberPop {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(1.18) rotate(-1.5deg);
  }

  62% {
    transform: scale(0.96) rotate(1deg);
  }

  82% {
    transform: scale(1.07) rotate(0deg);
  }

  100% {
    transform: scale(1);
  }
}

/* 하단 설명 부드럽게 */
@keyframes offerDescSoftUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* =========================================================
   OFFER VISUAL SCALE-UP
   넓은 흰 여백을 숫자 중심의 브랜드 무대로 활용
========================================================= */

body .yeon-offer > .inner,
body .yeon-offer .inner.narrow {
  isolation: isolate !important;
  border-radius: 0 !important;
  background:
    radial-gradient(
      circle at 8% 14%,
      rgba(233, 68, 73, 0.09) 0%,
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 86%,
      rgba(246, 167, 169, 0.13) 0%,
      transparent 31%
    ),
    linear-gradient(145deg, #ffffff 0%, #fffefe 48%, #fff8f8 100%) !important;
  border-color: rgba(233, 68, 73, 0.15) !important;
  box-shadow: 0 28px 80px rgba(35, 28, 28, 0.07) !important;
}

body .yeon-offer .offer-bubbles {
  max-width: 880px !important;
  height: 202px !important;
  margin-bottom: 42px !important;
}

body .yeon-offer .offer-bubble {
  height: 66px !important;
  font-size: 29px !important;
  box-shadow: 0 14px 32px rgba(233, 68, 73, 0.13) !important;
}

body .yeon-offer .bubble-01 {
  width: 630px !important;
}

body .yeon-offer .bubble-02 {
  top: 66px !important;
  width: 690px !important;
}

body .yeon-offer .bubble-03 {
  top: 132px !important;
  width: 860px !important;
  height: 70px !important;
  font-size: 30px !important;
}

body .yeon-offer .offer-title h3 {
  font-size: 72px !important;
  line-height: 1.24 !important;
}

body .yeon-offer .offer-title h3 strong {
  text-shadow: 0 10px 28px rgba(233, 68, 73, 0.16) !important;
}

body .yeon-offer .offer-title p {
  margin-top: 28px !important;
  font-size: 24px !important;
}

@media (max-width: 1280px) {
  body .yeon-offer .offer-title h3 {
    font-size: 60px !important;
  }
}

@media (max-width: 1024px) {
  body .yeon-offer .offer-bubbles {
    max-width: 660px !important;
    height: 166px !important;
    margin-bottom: 32px !important;
  }

  body .yeon-offer .offer-bubble {
    height: 54px !important;
    font-size: 22px !important;
  }

  body .yeon-offer .bubble-01 {
    width: 510px !important;
  }
  body .yeon-offer .bubble-02 {
    top: 54px !important;
    width: 560px !important;
  }
  body .yeon-offer .bubble-03 {
    top: 108px !important;
    width: 650px !important;
    height: 58px !important;
    font-size: 23px !important;
  }

  body .yeon-offer .offer-title h3 {
    font-size: 50px !important;
  }

  body .yeon-offer .offer-title p {
    font-size: 18px !important;
  }
}

@media (max-width: 768px) {
  body .yeon-offer > .inner,
  body .yeon-offer .inner.narrow {
  }

  body .yeon-offer .offer-bubbles {
    height: 132px !important;
    margin-bottom: 26px !important;
  }

  body .yeon-offer .offer-bubble {
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }

  body .yeon-offer .bubble-01 {
    top: 0 !important;
    width: 84% !important;
  }
  body .yeon-offer .bubble-02 {
    top: 42px !important;
    width: 90% !important;
  }
  body .yeon-offer .bubble-03 {
    top: 84px !important;
    width: 98% !important;
    height: 46px !important;
    font-size: 15px !important;
  }

  body .yeon-offer .offer-title h3,
  body .yeon-offer .offer-title h3 > span {
    font-size: 32px !important;
  }

  body .yeon-offer .offer-title p {
    margin-top: 18px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 420px) {
  body .yeon-offer .offer-bubble,
  body .yeon-offer .bubble-03 {
    font-size: 13px !important;
  }

  body .yeon-offer .offer-title h3,
  body .yeon-offer .offer-title h3 > span {
    font-size: clamp(23px, 6.5vw, 30px) !important;
  }
}