/* =========================================================
   OFFER SECTION - 연웨딩 선택 이유 / 수정본
========================================================= */

.yeon-offer {
  position: relative !important;
  padding: 58px 0 56px !important;
  background: #f7f7f7 !important;
  text-align: center !important;
}

.yeon-offer > .inner,
.yeon-offer .inner.narrow {
  position: relative !important;
  display: block !important;
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  min-height: 420px !important;
  margin: 0 auto !important;
  padding: 54px 20px 48px !important;
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  box-sizing: border-box !important;
}

.offer-bubbles {
  position: relative !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto 26px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.offer-bubble {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 0 34px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;

  opacity: 0;
  transform: translateY(14px) rotate(-3deg);
}

.offer-bubble > span:not(.red-check) {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
}

.offer-bubble.bubble-01 {
  background: #f5cfcf !important;
  margin-left: 64px !important;
}

.offer-bubble.bubble-02 {
  background: #f3aaaa !important;
  margin-left: 92px !important;
}

.offer-bubble.bubble-03 {
  background: #e9474b !important;
  font-weight: 800 !important;
  padding: 0 36px !important;
  margin-left: 0 !important;
}

/* 빨간 체크 */
.red-check {
  position: absolute !important;
  left: -38px !important;
  top: 50% !important;
  width: 34px !important;
  height: 28px !important;
  opacity: 0;
  transform: translateY(-50%) rotate(-10deg) scale(0.65);
}

.red-check::before,
.red-check::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  background: #e60012 !important;
  border-radius: 999px !important;
  transform-origin: left center !important;
}

.red-check::before {
  left: 2px !important;
  top: 15px !important;
  width: 13px !important;
  height: 4px !important;
  transform: rotate(45deg) !important;
}

.red-check::after {
  left: 12px !important;
  top: 20px !important;
  width: 28px !important;
  height: 4px !important;
  transform: rotate(-52deg) !important;
}

/* 제목 */
.offer-title {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.offer-title h3 {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111111 !important;
  font-size: 0 !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: -0.065em !important;
  text-align: center !important;
  word-break: keep-all !important;
}

.offer-title h3 > span {
  display: block !important;
  width: 100% !important;
  color: #111111 !important;
  font-size: 50px !important;
  line-height: 1.26 !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.offer-title h3 strong {
  display: inline !important;
  color: #e9474b !important;
  font-weight: 900 !important;
}

.offer-title p {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  color: #8a8a8a !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
}

/* JS 없이도 기본 순차 등장 */
.yeon-offer .bubble-01 {
  animation: offerBubbleUp 0.58s ease 0.15s forwards !important;
}

.yeon-offer .bubble-02 {
  animation: offerBubbleUp 0.58s ease 0.42s forwards !important;
}

.yeon-offer .bubble-03 {
  animation: offerBubbleUp 0.58s ease 0.7s forwards !important;
}

.yeon-offer .bubble-01 .red-check {
  animation: offerCheckPop 0.42s cubic-bezier(0.2, 1.35, 0.4, 1) 0.38s forwards !important;
}

.yeon-offer .bubble-02 .red-check {
  animation: offerCheckPop 0.42s cubic-bezier(0.2, 1.35, 0.4, 1) 0.65s forwards !important;
}

.yeon-offer .bubble-03 .red-check {
  animation: offerCheckPop 0.42s cubic-bezier(0.2, 1.35, 0.4, 1) 0.93s forwards !important;
}

@keyframes offerBubbleUp {
  0% {
    opacity: 0;
    transform: translateY(14px) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(-3deg);
  }
}

@keyframes offerCheckPop {
  0% {
    opacity: 0;
    transform: translateY(-50%) rotate(-18deg) scale(0.45);
  }
  65% {
    opacity: 1;
    transform: translateY(-50%) rotate(-10deg) scale(1.18);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) rotate(-10deg) scale(1);
  }
}

/* 반응형 */
@media (max-width: 1024px) {
  .offer-title h3 > span {
    font-size: 42px !important;
  }

  .offer-bubble {
    font-size: 18px !important;
  }
}

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

  .yeon-offer > .inner,
  .yeon-offer .inner.narrow {
    width: calc(100% - 28px) !important;
    min-height: auto !important;
    padding: 38px 14px 40px !important;
  }

  .offer-bubbles {
    max-width: 100% !important;
    margin-bottom: 24px !important;
    gap: 7px !important;
  }

  .offer-bubble {
    min-height: 34px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }

  .offer-bubble.bubble-01 {
    margin-left: 16px !important;
  }

  .offer-bubble.bubble-02 {
    margin-left: 36px !important;
  }

  .offer-bubble.bubble-03 {
    padding: 0 18px !important;
    max-width: calc(100% - 32px) !important;
  }

  .red-check {
    left: -27px !important;
    width: 26px !important;
    height: 22px !important;
  }

  .red-check::before {
    left: 2px !important;
    top: 12px !important;
    width: 10px !important;
    height: 3px !important;
  }

  .red-check::after {
    left: 9px !important;
    top: 16px !important;
    width: 22px !important;
    height: 3px !important;
  }

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

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

@media (max-width: 480px) {
  .offer-bubble {
    font-size: 13px !important;
  }

  .offer-title h3 > span {
    font-size: 25px !important;
  }

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

/* =========================================================
   YEON HISTORY / COUNT SECTION
========================================================= */

.yeon-history {
  position: relative !important;
  min-height: 430px !important;
  padding: 56px 0 50px !important;
  background: #111 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  text-align: center !important;
}

.yeon-history .history-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: #111 !important;
  opacity: 1 !important;
}

.yeon-history .history-dim {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: rgba(0, 0, 0, 0.72) !important;
}

.yeon-history .history-inner {
  position: relative !important;
  z-index: 3 !important;
  width: min(1360px, calc(100% - 40px)) !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
}

/* 메달 통이미지 */
.medal-wrap {
  position: relative !important;
  width: 520px !important;
  max-width: 100% !important;
  margin: -24px auto 20px !important;
  text-align: center !important;
  z-index: 4 !important;
}

.medal-img {
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.42)) !important;
}

/* 숫자 영역 */
.history-count-list {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  margin: 0 auto 34px !important;
}

.history-count-list li {
  position: relative !important;
  min-height: 118px !important;
  padding: 0 8px !important;
}

.history-count-list li::before,
.history-count-list li::after {
  content: "" !important;
  position: absolute !important;
  top: 58px !important;
  width: 36px !important;
  height: 58px !important;
  opacity: 0.85 !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}

/* =========================================================
   HISTORY COUNT 월계관 이미지 적용
   좌 / 우 공통 적용
========================================================= */

.history-count-list li {
  position: relative !important;
}

/* 기존 border 월계관 제거 + 이미지 적용 */
.history-count-list li::before,
.history-count-list li::after {
  content: "" !important;
  position: absolute !important;
  top: 75% !important;
  width: 48px !important;
  height: 80px !important;
  background-image: url("../img/hs_icon01.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 왼쪽 월계관 */
.history-count-list li::before {
  left: 0 !important;
  transform: translateY(-50%) !important;
}

/* 오른쪽 월계관 - 좌우반전 */
.history-count-list li::after {
  right: 0 !important;
  transform: translateY(-50%) scaleX(-1) !important;
}

.count-number {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

/* 숫자 금색 그라데이션 */
.count-number .count-up {
  display: inline-block !important;
  font-size: 60px !important;
  font-weight: 700 !important;
  letter-spacing: -0.06em !important;

  background: linear-gradient(
    135deg,
    #fff6c7 0%,
    #f3d98b 22%,
    #d7b96f 42%,
    #a97825 62%,
    #f6df9b 82%,
    #8f641f 100%
  ) !important;
  background-size: 180% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* 단위 금색 그라데이션 */
.count-number em {
  display: inline-block !important;
  font-size: 30px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  transform: translateY(-3px) !important;

  background: linear-gradient(
    135deg,
    #fff6c7 0%,
    #f3d98b 22%,
    #d7b96f 42%,
    #a97825 62%,
    #f6df9b 82%,
    #8f641f 100%
  ) !important;
  background-size: 180% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.count-number .count-up,
.count-number em {
  animation: countGoldShine 3s ease-in-out infinite !important;
}

@keyframes countGoldShine {
  0% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }

  100% {
    background-position: 0% center;
  }
}

.history-count-list p {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-size: 25px !important;
  font-weight: 600 !important;
  line-height: 1.34 !important;
  letter-spacing: -0.04em !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.48) !important;
}

/* 하단 카피 */
.history-copy {
  margin-top: 18px !important;
  text-align: center !important;
}

.history-copy h3 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 60px !important;
  line-height: 1.28 !important;
  font-weight: 500 !important;
  letter-spacing: -0.06em !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.48) !important;
  padding-bottom: 15px;
}

.history-copy h3 strong {
  display: inline-block !important;
  color: #ef4249 !important;
  font-size: 78px !important;
  font-weight: 900 !important;
  margin-left: 8px !important;
  transform-origin: center center !important;
}

.yeon-history.is-active .history-copy h3 strong {
  animation: noPop 0.68s cubic-bezier(0.18, 1.55, 0.42, 1) 1.05s both !important;
}

.history-copy p {
  margin-top: 14px !important;
  color: #ffffff !important;
  font-size: 23px !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
  letter-spacing: -0.045em !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.48) !important;
}

.history-copy p span {
  font-weight: bold;
  font-size: 30px !important;
}

@keyframes noPop {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-12deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.35) rotate(4deg);
  }
  78% {
    transform: scale(0.92) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

/* 반응형 */
@media (max-width: 1200px) {
  .history-count-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px 10px !important;
  }

  .history-count-list li::before,
  .history-count-list li::after {
    /* top: 52px !important; */
    height: 52% !important;
  }
}

@media (max-width: 768px) {
  .yeon-history {
    padding: 46px 0 42px !important;
  }

  .medal-wrap {
    width: 320px !important;
    max-width: 86% !important;
    margin: -8px auto 22px !important;
  }

  .medal-img {
    max-width: 320px !important;
  }

  .history-count-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 8px !important;
    margin-bottom: 30px !important;
  }

  .count-number .count-up {
    font-size: 36px !important;
  }

  .count-number em {
    font-size: 22px !important;
  }

  .history-count-list p {
    font-size: clamp(15px, 3.2vw, 25px) !important;
  }

  .history-copy h3 {
    font-size: 27px !important;
  }

  .history-copy h3 strong {
    display: block !important;
    margin: 4px auto 0 !important;
    font-size: 40px !important;
  }

  .history-copy p {
    font-size: 17px !important;
  }
}

@media (max-width: 480px) {
  .medal-wrap {
    width: 270px !important;
    max-width: 90% !important;
  }

  .medal-img {
    max-width: 270px !important;
  }

  .count-number .count-up {
    font-size: 31px !important;
  }

  .count-number em {
    font-size: 19px !important;
  }

  .history-count-list p {
    /* font-size: 13px !important; */
  }

  .history-copy h3 {
    font-size: 23px !important;
  }

  .history-copy p {
    font-size: 15px !important;
  }
}

/* =========================================================
   YEON BENEFIT SECTION - FINAL
   기본 흰색 / CSS hover 시 검정 / TIP 라인 정렬
========================================================= */

.yeon-benefit {
  position: relative !important;
  padding: 82px 0 72px !important;
  background: #cfd6ed !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-benefit::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(255, 255, 255, 0.28),
      transparent 36%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)) !important;
  pointer-events: none !important;
}

.yeon-benefit .benefit-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(1320px, calc(100% - 40px)) !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
}

/* 제목 */
.yeon-benefit .benefit-title {
  text-align: center !important;
  margin-bottom: 34px !important;
  opacity: 1 !important;
  transform: none !important;
}

.yeon-benefit .benefit-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-size: 60px !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  letter-spacing: -0.055em !important;
}

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

.yeon-benefit .benefit-title p {
  margin: 50px 0 0 !important;
  padding: 0 !important;
  color: #111 !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.04em !important;
}

/* 카드 그리드 */
.yeon-benefit .benefit-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  margin: 50px auto 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* li 기본값 */
.yeon-benefit .benefit-grid > li,
.yeon-benefit.is-visible .benefit-grid > li,
.yeon-benefit .benefit-grid > li:nth-child(1),
.yeon-benefit .benefit-grid > li:nth-child(2),
.yeon-benefit .benefit-grid > li:nth-child(3),
.yeon-benefit .benefit-grid > li:nth-child(4) {
  position: relative !important;
  min-height: 330px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* 카드 기본값: 1~4번 전부 흰색 */
.yeon-benefit .benefit-grid > li .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 330px !important;
  padding: 42px 34px 34px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  color: #111111 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  box-sizing: border-box !important;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease !important;
}

/* 상단 작은 문구 */
.yeon-benefit .benefit-grid > li .benefit-card p,
.yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card p,
.yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card p,
.yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card p,
.yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card p {
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #333333 !important;
  font-size: 22px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: -0.05em !important;
  min-height: 40px !important;
}

/* 메인 제목 */
.yeon-benefit .benefit-grid > li .benefit-card strong,
.yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card strong,
.yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card strong,
.yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card strong,
.yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #111111 !important;
  font-size: 35px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  letter-spacing: -0.06em !important;
  min-height: 86px !important;
}

/* TIP 원형 - 카드별 텍스트 길이와 무관하게 같은 라인 */
.yeon-benefit .benefit-grid > li .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card em {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 22px 0 24px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #111111 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: -0.04em !important;
  animation: none !important;
}

/* 하단 설명 */
.yeon-benefit .benefit-grid > li .benefit-card span,
.yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card span,
.yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card span,
.yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card span,
.yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card span {
  display: block !important;
  color: #777777 !important;
  font-size: 20px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em !important;
}

/* CSS hover 효과: hover한 카드만 검정 */
.yeon-benefit .benefit-grid > li:hover .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(1):hover .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(2):hover .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(3):hover .benefit-card,
.yeon-benefit .benefit-grid > li:nth-child(4):hover .benefit-card {
  background: #0c0c0c !important;

  transform: translateY(-8px) !important;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.16) !important;
}

.yeon-benefit .benefit-grid > li:hover .benefit-card p,
.yeon-benefit .benefit-grid > li:hover .benefit-card strong,
.yeon-benefit .benefit-grid > li:hover .benefit-card span {
  color: #ffffff !important;
}

.yeon-benefit .benefit-grid > li:hover .benefit-card p,
.yeon-benefit .benefit-grid > li:hover .benefit-card span {
  opacity: 0.68 !important;
}

.yeon-benefit .benefit-grid > li:hover .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(1):hover .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(2):hover .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(3):hover .benefit-card em,
.yeon-benefit .benefit-grid > li:nth-child(4):hover .benefit-card em {
  background: #ffffff !important;
  color: #111111 !important;
}

/* 기존 benefit 모션 잔여값 무력화 */
.yeon-benefit.is-visible .benefit-title,
.yeon-benefit.is-visible .benefit-grid > li,
.yeon-benefit.is-visible .benefit-card em {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 태블릿 */
@media (max-width: 1024px) {
  .yeon-benefit {
    padding: 70px 0 64px !important;
  }

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

  .yeon-benefit .benefit-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  .yeon-benefit .benefit-grid > li,
  .yeon-benefit.is-visible .benefit-grid > li,
  .yeon-benefit .benefit-grid > li:nth-child(1),
  .yeon-benefit .benefit-grid > li:nth-child(2),
  .yeon-benefit .benefit-grid > li:nth-child(3),
  .yeon-benefit .benefit-grid > li:nth-child(4) {
    min-height: 300px !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card {
    min-height: 300px !important;
    padding: 34px 28px 30px !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card p {
    font-size: 19px !important;
    min-height: auto !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card strong {
    font-size: 29px !important;
    min-height: auto !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card em {
    margin: 22px 0 20px !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card span {
    font-size: 17px !important;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  .yeon-benefit {
    padding: 54px 0 50px !important;
  }

  .yeon-benefit .benefit-inner {
    width: calc(100% - 28px) !important;
  }

  .yeon-benefit .benefit-title {
    margin-bottom: 26px !important;
  }

  .yeon-benefit .benefit-title h3 {
    font-size: 30px !important;
    line-height: 1.32 !important;
  }

  .yeon-benefit .benefit-title p {
    font-size: 16px !important;
  }

  .yeon-benefit .benefit-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .yeon-benefit .benefit-grid > li,
  .yeon-benefit.is-visible .benefit-grid > li,
  .yeon-benefit .benefit-grid > li:nth-child(1),
  .yeon-benefit .benefit-grid > li:nth-child(2),
  .yeon-benefit .benefit-grid > li:nth-child(3),
  .yeon-benefit .benefit-grid > li:nth-child(4) {
    min-height: 245px !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card {
    min-height: 245px !important;
    padding: 26px 20px 24px !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card p,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card p {
    font-size: 18px !important;
    min-height: auto !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card strong,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card strong {
    font-size: 23px !important;
    min-height: auto !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card em,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card em {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin: 16px 0 16px !important;
    font-size: 13px !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card span,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card span,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card span,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card span,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card span {
    font-size: 16px !important;
  }

  .yeon-benefit .benefit-grid > li.is-scroll-active .benefit-card {
    background: #0c0c0c !important;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.16) !important;
  }

  .yeon-benefit .benefit-grid > li.is-scroll-active .benefit-card p,
  .yeon-benefit .benefit-grid > li.is-scroll-active .benefit-card strong,
  .yeon-benefit .benefit-grid > li.is-scroll-active .benefit-card span {
    color: #ffffff !important;
  }

  .yeon-benefit .benefit-grid > li.is-scroll-active .benefit-card p,
  .yeon-benefit .benefit-grid > li.is-scroll-active .benefit-card span {
    opacity: 0.68 !important;
  }

  .yeon-benefit .benefit-grid > li.is-scroll-active .benefit-card em {
    background: #ffffff !important;
    color: #111111 !important;
  }
}

/* 작은 모바일 */
@media (max-width: 760px) {
  .yeon-benefit .benefit-title h3 {
    font-size: 26px !important;
  }

  .yeon-benefit .benefit-title p {
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .yeon-benefit .benefit-grid {
    grid-template-columns: 1fr !important;
  }

  .yeon-benefit .benefit-grid > li,
  .yeon-benefit.is-visible .benefit-grid > li,
  .yeon-benefit .benefit-grid > li:nth-child(1),
  .yeon-benefit .benefit-grid > li:nth-child(2),
  .yeon-benefit .benefit-grid > li:nth-child(3),
  .yeon-benefit .benefit-grid > li:nth-child(4) {
    min-height: auto !important;
  }

  .yeon-benefit .benefit-grid > li .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(1) .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(2) .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(3) .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(4) .benefit-card {
    padding: 30px 20px 28px !important;
    height: auto !important;
    min-height: auto !important;
  }

  .yeon-benefit .benefit-grid > li:hover .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(1):hover .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(2):hover .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(3):hover .benefit-card,
  .yeon-benefit .benefit-grid > li:nth-child(4):hover .benefit-card {
    transform: none !important;
  }
}

/* =========================================================
   YEON PLANNER SLIDER SECTION
========================================================= */

.yeon-planner {
  position: relative !important;
  padding: 62px 0 56px !important;
  background: #f3f4f8 !important;
  overflow: hidden !important;
}

.yeon-planner .planner-inner {
  width: min(1280px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 220px 1fr !important;
  gap: 28px !important;
  align-items: stretch !important;
}

/* 좌측 영역 */
.planner-side {
  position: relative !important;
  min-height: 470px !important;
  padding-top: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.planner-symbol {
  margin-bottom: 52px !important;
  color: #c7cde0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 400 !important;
  line-height: 0.72 !important;
  letter-spacing: -0.08em !important;
}

.planner-symbol span {
  display: block !important;
  font-size: 92px !important;
}

.planner-side p {
  margin: 0 0 4px !important;
  color: #111111 !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

.planner-side h3 {
  margin: 0 0 10px !important;
  color: #111111 !important;
  font-size: 35px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

.planner-side strong {
  display: block !important;
  color: #212121 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.04em !important;
}

.planner-controls {
  margin-top: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.planner-controls button {
  position: relative !important;
  width: 48px !important;
  height: 48px !important;
  border: 1px solid #b8bdc9 !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease !important;
}

.planner-controls button + button {
  margin-left: -1px !important;
}

.planner-controls button::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  border-top: 2px solid #777d8c !important;
  border-left: 2px solid #777d8c !important;
}

.planner-prev::before {
  transform: translate(-35%, -50%) rotate(-45deg) !important;
}

.planner-next::before {
  transform: translate(-65%, -50%) rotate(135deg) !important;
}

.planner-controls button:hover {
  background: #ffffff !important;
  border-color: #8f96aa !important;
}

/* 슬라이더 */
.planner-slider {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.planner-track {
  display: flex !important;
  align-items: stretch !important;
  gap: 24px !important;
  transition-property: transform !important;
  will-change: transform !important;
}

.planner-card {
  position: relative !important;
  flex: 0 0 calc((100% - 48px) / 3) !important;
  height: 470px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translateY(34px);
}

.planner-card img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transition: transform 0.45s ease !important;
}

.planner-card::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 44% !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.82) 58%,
    rgba(255, 255, 255, 0.98) 100%
  ) !important;
  pointer-events: none !important;
}

.planner-card:hover img {
  transform: scale(1.035) !important;
}

.planner-info {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 28px !important;
  z-index: 2 !important;
  text-align: left !important;
}

.planner-info h4 {
  margin: 0 0 6px !important;
  color: #111111 !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.06em !important;
}

.planner-info h4 span {
  color: #111111 !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: -0.05em !important;
}

.planner-info p {
  margin: 0 !important;
  color: #777777 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: -0.04em !important;
}

/* 등장 모션 */
.yeon-planner.is-visible .planner-side {
  animation: plannerSideIn 0.75s ease forwards !important;
}

.yeon-planner.is-visible .planner-card {
  animation: plannerCardIn 0.7s ease forwards !important;
}

.yeon-planner.is-visible .planner-card:nth-child(1) {
  animation-delay: 0.08s !important;
}

.yeon-planner.is-visible .planner-card:nth-child(2) {
  animation-delay: 0.18s !important;
}

.yeon-planner.is-visible .planner-card:nth-child(3) {
  animation-delay: 0.28s !important;
}

@keyframes plannerSideIn {
  0% {
    opacity: 0;
    transform: translateX(-24px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* 반응형 */
@media (max-width: 1100px) {
  .yeon-planner .planner-inner {
    grid-template-columns: 190px 1fr !important;
    gap: 22px !important;
  }

  .planner-symbol span {
    font-size: 76px !important;
  }

  .planner-card {
    height: 420px !important;
  }

  .planner-info h4 {
    font-size: 24px !important;
  }
}

@media (max-width: 900px) {
  .yeon-planner {
    padding: 52px 0 !important;
  }

  .yeon-planner .planner-inner {
    display: block !important;
    width: calc(100% - 32px) !important;
  }

  .planner-side {
    min-height: auto !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
  }

  .planner-symbol {
    margin-bottom: 18px !important;
    display: none;
  }

  .planner-symbol span {
    display: inline-block !important;
    font-size: 56px !important;
    line-height: 0.8 !important;
  }

  .planner-side h3 {
    font-size: 26px !important;
  }

  .planner-controls {
    margin-top: 18px !important;
  }

  .planner-card {
    flex: 0 0 calc((100% - 16px) / 2) !important;
    height: 420px !important;
  }

  .planner-track {
    gap: 16px !important;
  }
}

@media (max-width: 560px) {
  .planner-card {
    flex: 0 0 100% !important;
    height: 430px !important;
  }

  .planner-track {
    gap: 14px !important;
  }

  .planner-info {
    left: 20px !important;
    right: 20px !important;
    bottom: 24px !important;
  }

  .planner-info h4 {
    font-size: 25px !important;
  }

  .planner-info h4 span {
    font-size: 17px !important;
  }

  .planner-info p {
    font-size: 13px !important;
  }
}
/* =========================================================
   YEON YOUTUBE INTERVIEW SECTION - FIX
========================================================= */

.yeon-youtube {
  position: relative !important;
  padding: 68px 0 70px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-youtube .youtube-inner {
  position: static;
  z-index: 2 !important;
  width: min(1700px, calc(100% - 48px)) !important;
  max-width: 1700px !important;
  margin: 0 auto !important;
}

.youtube-title {
  margin-bottom: 50px !important;
  text-align: center !important;
  opacity: 1 !important;
  transform: none !important;
  animation: youtubeTitleUp 0.7s ease both !important;
}

.youtube-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #aeb9df !important;
  font-size: 60px !important;
  line-height: 1.24 !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
}

.youtube-title h3 span {
  display: block !important;
  color: #111111 !important;
  font-size: 60px !important;
  font-weight: 800 !important;
}

.youtube-list {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

.youtube-list li {
  position: relative !important;
  display: block !important;
  text-align: center !important;
  opacity: 1 !important;
  transform: none !important;
  animation: youtubeCardUp 0.68s ease both !important;
}

.youtube-list li:nth-child(1) {
  animation-delay: 0.08s !important;
}

.youtube-list li:nth-child(2) {
  animation-delay: 0.18s !important;
}

.youtube-list li:nth-child(3) {
  animation-delay: 0.28s !important;
}

.youtube-list li:nth-child(4) {
  animation-delay: 0.38s !important;
}

.youtube-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #eeeeee !important;
  border-radius: 0px !important;
  overflow: hidden !important;
}

.youtube-sample {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 8px !important;
  background:
    linear-gradient(
      135deg,
      rgba(210, 210, 210, 0.92),
      rgba(238, 238, 238, 0.92)
    ),
    #eeeeee !important;
}

.youtube-sample .yt-logo {
  position: absolute !important;
  left: 12px !important;
  top: 10px !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 0.75 !important;
  letter-spacing: -0.05em !important;
  opacity: 0.9 !important;
}

.youtube-sample strong {
  position: relative !important;
  z-index: 2 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

.youtube-time {
  position: absolute !important;
  right: 8px !important;
  bottom: 7px !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 23px !important;
  padding: 0 7px !important;
  border-radius: 3px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.youtube-list li > p {
  margin: 14px 0 2px !important;
  color: #b7bfd9 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.045em !important;
}

.youtube-list li > strong {
  display: block !important;
  color: #111111 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.04em !important;
}

.youtube-btn {
  position: relative !important;
  z-index: 3 !important;
  width: 245px !important;
  height: 50px !important;
  margin: 90px auto 0 !important;
  background: #111111 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}

.youtube-btn:hover {
  background: #e62117 !important;
  transform: translateY(-3px) !important;
}

.youtube-icon {
  position: relative !important;
  width: 27px !important;
  height: 19px !important;
  display: inline-block !important;
  background: #ff0000 !important;
  border-radius: 4px !important;
}

.youtube-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-38%, -50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 8px solid #ffffff !important;
}

.youtube-btn i {
  font-style: normal !important;
  font-size: 24px !important;
  font-weight: 300 !important;
}

.since-text {
  position: absolute !important;
  right: 0 !important;
  bottom: -5% !important;
  z-index: 1 !important;
  color: #eef0f8 !important;
  font-family: "Cinzel", serif, "Times New Roman", serif !important;
  font-size: 170px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

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

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

@media (max-width: 1024px) {
  .youtube-title h3,
  .youtube-title h3 span {
    font-size: 48px !important;
  }

  .youtube-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 26px 16px !important;
  }

  .since-text {
    font-size: 64px !important;
    bottom: -54px !important;
  }
}

@media (max-width: 768px) {
  .yeon-youtube {
    padding: 54px 0 58px !important;
  }

  .yeon-youtube .youtube-inner {
    width: calc(100% - 28px) !important;
  }

  .youtube-title {
    margin-bottom: 28px !important;
  }

  .youtube-title h3,
  .youtube-title h3 span {
    font-size: 30px !important;
    line-height: 1.3 !important;
  }

  .youtube-list {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 12px !important;
  }

  .youtube-list li > p {
    font-size: 13px !important;
    margin-top: 10px !important;
  }

  .youtube-list li > strong {
    font-size: 16px !important;
  }

  .youtube-btn {
    width: 210px !important;
    height: 42px !important;
    font-size: 14px !important;
    margin-top: 40px !important;
  }

  .since-text {
    font-size: 46px !important;
    right: -20px !important;
    bottom: -42px !important;
  }
}

@media (max-width: 480px) {
  .youtube-title h3,
  .youtube-title h3 span {
    font-size: 25px !important;
  }

  .youtube-list {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .youtube-list li > strong {
    font-size: 18px !important;
  }
}

/* =========================================================
   YEON MOVIE PROMO SECTION
========================================================= */

.yeon-movie {
  position: relative !important;
  padding: 72px 0 78px !important;
  background: #e1e7ff !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-movie .movie-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(1500px, calc(100% - 40px)) !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
}

.movie-title {
  margin-bottom: 26px !important;
  text-align: center !important;
  opacity: 0;
  transform: translateY(24px);
}

.movie-title p {
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #6376c6 !important;
  font-size: 30px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
}

.movie-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #111111 !important;
  font-size: 70px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
}

.movie-title span {
  display: block !important;
  margin-top: 8px !important;
  color: #8a8a8a !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  letter-spacing: -0.04em !important;
}

.movie-video-box {
  width: 1000px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border: 6px solid #aeb9df !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #d9dce6 !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translateY(34px);
}

.movie-sample {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 8.7 !important;
  overflow: hidden !important;
  background:
    linear-gradient(135deg, rgba(180, 186, 205, 0.6), rgba(238, 239, 245, 0.9)),
    #dfe2eb !important;
}

.movie-sample img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.movie-sample img[src=""],
.movie-sample img:not([src]) {
  display: none !important;
}

.movie-sample::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.08) !important;
  pointer-events: none !important;
}

.movie-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.82) !important;
  background: rgba(0, 0, 0, 0.22) !important;
  transform: translate(-50%, -50%) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  transition:
    transform 0.28s ease,
    background 0.28s ease !important;
}

.movie-play::before {
  content: "" !important;
  position: absolute !important;
  left: 23px !important;
  top: 18px !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 11px solid transparent !important;
  border-bottom: 11px solid transparent !important;
  border-left: 17px solid #ffffff !important;
}

.movie-play:hover {
  background: rgba(0, 0, 0, 0.42) !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
}

/* 모션 */
.yeon-movie.is-visible .movie-title {
  animation: movieTitleUp 0.68s ease forwards !important;
}

.yeon-movie.is-visible .movie-video-box {
  animation: movieVideoUp 0.75s ease 0.18s forwards !important;
}

.yeon-movie.is-visible .movie-play {
  animation: moviePlayPop 0.58s cubic-bezier(0.18, 1.55, 0.42, 1) 0.75s both !important;
}

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

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

@keyframes moviePlayPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  65% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 반응형 */
@media (max-width: 1024px) {
  .movie-title p {
    font-size: 22px !important;
  }

  .movie-title h3 {
    font-size: 48px !important;
  }

  .movie-video-box {
    width: 780px !important;
  }
}

@media (max-width: 768px) {
  .yeon-movie {
    padding: 54px 0 58px !important;
  }

  .yeon-movie .movie-inner {
    width: calc(100% - 28px) !important;
  }

  .movie-title {
    margin-bottom: 22px !important;
  }

  .movie-title p {
    font-size: 17px !important;
  }

  .movie-title h3 {
    font-size: 33px !important;
    line-height: 1.22 !important;
  }

  .movie-title span {
    margin-top: 7px !important;
    font-size: 14px !important;
  }

  .movie-video-box {
    border-width: 4px !important;
    border-radius: 14px !important;
  }

  .movie-play {
    width: 50px !important;
    height: 50px !important;
  }

  .movie-play::before {
    left: 20px !important;
    top: 15px !important;
    border-top-width: 10px !important;
    border-bottom-width: 10px !important;
    border-left-width: 15px !important;
  }
}

@media (max-width: 480px) {
  .movie-title p {
    font-size: 15px !important;
  }

  .movie-title h3 {
    font-size: 27px !important;
  }

  .movie-title span {
    font-size: 13px !important;
  }

  .movie-video-box {
    border-radius: 12px !important;
  }
}

/* =========================================================
   YEON REASON SECTION
========================================================= */

.yeon-reason {
  position: relative !important;
  padding: 76px 0 72px !important;
  background: #ffffff !important;
  text-align: center !important;
  overflow: hidden !important;
}

.yeon-reason .reason-inner {
  width: min(1500px, calc(100% - 40px)) !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
}

.reason-title {
  margin-bottom: 34px !important;
  opacity: 0;
  transform: translateY(24px);
}

.reason-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #6376c6 !important;
  font-size: 55px !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
}

.reason-title h3 span {
  display: block !important;
  color: #212121 !important;
  font-size: 40px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.yeon-reason .reason-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none !important;
}

.yeon-reason .reason-list li {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translateY(34px);
}

.reason-card {
  width: 100% !important;
  min-height: 250px !important;
  padding: 55px 18px 55px !important;
  background: #f4f5f9 !important;
  border: 0 !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease !important;
  height: 100%;
}

.reason-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 28px rgba(93, 104, 146, 0.14) !important;
}

.reason-icon {
  width: 70px !important;
  height: 70px !important;
  margin: 0 auto 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.reason-icon img {
  display: block !important;
  max-width: 70px !important;
  max-height: 70px !important;
  object-fit: contain !important;
}

.reason-card p {
  margin: 0 0 2px !important;
  color: #222222 !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.045em !important;
}

.reason-card strong {
  display: block !important;
  margin: 0 !important;
  color: #6376c6 !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.055em !important;
}

.reason-card em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 50px !important;
  height: 22px !important;
  margin: 18px 0 10px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #2b2b2b !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1 !important;
}

.reason-card span {
  display: block !important;
  color: #8d8d8d !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.02em !important;
}

/* 웨딩홀 장점 카드: 데스크톱 호버 */
.yeon-reason .reason-list > li:hover .reason-card {
  background: #6376c6 !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 32px rgba(70, 86, 160, 0.24) !important;
}

.yeon-reason .reason-list > li:hover .reason-card p,
.yeon-reason .reason-list > li:hover .reason-card strong,
.yeon-reason .reason-list > li:hover .reason-card span {
  color: #ffffff !important;
}

.yeon-reason .reason-list > li:hover .reason-card p,
.yeon-reason .reason-list > li:hover .reason-card span {
  opacity: 0.78 !important;
}

.yeon-reason .reason-list > li:hover .reason-card em {
  background: #ffffff !important;
  color: #111111 !important;
}

/* 태블릿·모바일: 화면 중앙 카드 자동 활성화 */
@media (max-width: 1024px) {
  .yeon-reason .reason-list > li.is-scroll-active .reason-card {
    background: #6376c6 !important;
    box-shadow: 0 18px 32px rgba(70, 86, 160, 0.24) !important;
  }

  .yeon-reason .reason-list > li.is-scroll-active .reason-card p,
  .yeon-reason .reason-list > li.is-scroll-active .reason-card strong,
  .yeon-reason .reason-list > li.is-scroll-active .reason-card span {
    color: #ffffff !important;
  }

  .yeon-reason .reason-list > li.is-scroll-active .reason-card p,
  .yeon-reason .reason-list > li.is-scroll-active .reason-card span {
    opacity: 0.78 !important;
  }

  .yeon-reason .reason-list > li.is-scroll-active .reason-card em {
    background: #ffffff !important;
    color: #111111 !important;
  }
}

.reason-bottom {
  margin-top: 48px !important;
  text-align: center !important;
  opacity: 0;
  transform: translateY(24px);
}

.reason-bottom > strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: #6376c6 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.05em !important;
}

.reason-bottom h4 {
  margin: 0 !important;
  color: #212121 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.05em !important;
}

.reason-bottom p {
  margin: 14px 0 0 !important;
  color: #8a8a8a !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.04em !important;
}

/* 모션 */
.yeon-reason.is-visible .reason-title {
  animation: reasonTitleUp 0.68s ease forwards !important;
}

.yeon-reason.is-visible .reason-list li {
  animation: reasonCardUp 0.65s ease forwards !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(1) {
  animation-delay: 0.1s !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(2) {
  animation-delay: 0.22s !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(3) {
  animation-delay: 0.34s !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(4) {
  animation-delay: 0.46s !important;
}

.yeon-reason.is-visible .reason-card em {
  animation: reasonTipPop 0.52s cubic-bezier(0.2, 1.45, 0.4, 1) both !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(1) .reason-card em {
  animation-delay: 0.42s !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(2) .reason-card em {
  animation-delay: 0.54s !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(3) .reason-card em {
  animation-delay: 0.66s !important;
}

.yeon-reason.is-visible .reason-list li:nth-child(4) .reason-card em {
  animation-delay: 0.78s !important;
}

.yeon-reason.is-visible .reason-bottom {
  animation: reasonBottomUp 0.72s ease 0.58s forwards !important;
}

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

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

@keyframes reasonTipPop {
  0% {
    transform: scale(0.5);
  }
  65% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

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

/* 반응형 */
@media (max-width: 1024px) {
  .reason-title h3 {
    font-size: 48px !important;
  }

  .reason-title h3 span {
    font-size: 32px !important;
  }

  .yeon-reason .reason-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  .yeon-reason {
    padding: 56px 0 58px !important;
  }

  .yeon-reason .reason-inner {
    width: calc(100% - 28px) !important;
  }

  .reason-title {
    margin-bottom: 28px !important;
  }

  .reason-title h3 {
    font-size: 32px !important;
    line-height: 1.28 !important;
  }

  .reason-title h3 span {
    font-size: 26px !important;
  }

  .reason-card {
    min-height: 230px !important;
    padding: 26px 12px 24px !important;
  }

  .reason-card p {
    font-size: 15px !important;
  }

  .reason-card strong {
    font-size: 19px !important;
  }

  .reason-card span {
    font-size: 13px !important;
  }

  .reason-bottom {
    margin-top: 38px !important;
  }

  .reason-bottom > strong {
    font-size: 20px !important;
  }

  .reason-bottom h4 {
    font-size: 22px !important;
  }

  .reason-bottom p {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .yeon-reason .reason-list {
    grid-template-columns: 1fr !important;
  }

  .reason-title h3 {
    font-size: 28px !important;
  }

  .reason-title h3 span {
    font-size: 23px !important;
  }

  .reason-card {
    min-height: auto !important;
    padding: 28px 16px 26px !important;
  }

  .reason-bottom h4 {
    font-size: 21px !important;
  }
}

/* =========================================================
   YEON PRE RESERVATION SECTION
========================================================= */

.yeon-pre-reservation {
  position: relative !important;
  padding: 80px 0 !important;
  min-height: 560px !important;
  background: linear-gradient(
    180deg,
    #f9f9f9 0%,
    #ffffff 38%,
    #eaf9f2 100%
  ) !important;
  overflow: hidden !important;
  text-align: center !important;
  overflow: hidden;
}

.yeon-pre-reservation .pre-reservation-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.pre-reservation-title {
  position: relative !important;
  text-align: center !important;
  opacity: 0;
  transform: translateY(28px);
}

.pre-reservation-title h3 br.mo {
  display: none;
}
.pre-reservation-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #111111 !important;
  font-size: 55px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: -0.065em !important;
}

.pre-reservation-title h3 strong {
  display: inline-block !important;
  margin-top: 15px !important;
  color: #24cf80 !important;
  font-size: 70px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.04em !important;
}

.reservation-badge {
  --reservation-badge-color: #24cf80;
  --reservation-badge-pulse-clear: rgba(36, 207, 128, 0);
  --reservation-badge-pulse-soft: rgba(36, 207, 128, 0.13);
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 260px !important;
  height: 78px !important;
  margin: 0 8px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: var(--reservation-badge-color) !important;
  color: #ffffff !important;
  font-size: 55px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.065em !important;
  vertical-align: middle !important;
  transform-origin: center center !important;
}
.reservation-badge::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -12px !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 12px solid transparent !important;
  border-right: 12px solid transparent !important;
  border-top: 14px solid #24cf80 !important;
}

.pre-reservation-title p {
  margin: 12px 0 80px !important;
  padding: 0 !important;
  color: #555555 !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.04em !important;
}

.pre-reservation-visual {
  position: relative !important;
  width: 100% !important;
  min-height: 300px !important;
  margin-top: 34px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  opacity: 0;
  transform: translateY(34px);
}

.pre-reservation-visual img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 360px !important;
  object-fit: contain !important;
}

/* 이미지가 아직 없을 때 빈 영역 유지 */
.pre-reservation-visual img[src=""],
.pre-reservation-visual img:not([src]) {
  display: none !important;
}

/* 모션 */
.yeon-pre-reservation.is-visible .pre-reservation-title {
  animation: preTitleUp 0.72s ease forwards !important;
}

.yeon-pre-reservation.is-visible .reservation-badge {
  animation:
    reservationBadgePop 0.72s cubic-bezier(0.18, 1.6, 0.42, 1) 0.25s both,
    reservationBadgePulse 1.8s ease-in-out 1.15s infinite !important;
}

.yeon-pre-reservation.is-visible .pre-reservation-title h3 strong {
  animation: benefitTextGlow 0.85s ease 0.55s both !important;
}

.yeon-pre-reservation.is-visible .pre-reservation-visual {
  animation: preVisualUp 0.78s ease 0.45s forwards !important;
}

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

@keyframes reservationBadgePop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-5deg);
  }
  58% {
    opacity: 1;
    transform: scale(1.16) rotate(2deg);
  }
  78% {
    transform: scale(0.96) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes reservationBadgePulse {
  0%,
  100% {
    box-shadow: 0 0 0 var(--reservation-badge-pulse-clear);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px var(--reservation-badge-pulse-soft);
    transform: scale(1.035);
  }
}

@keyframes benefitTextGlow {
  0% {
    opacity: 0;
    transform: translateY(16px);
    text-shadow: none;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 10px 24px rgba(36, 207, 128, 0.18);
  }
}

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

/* 반응형 */
@media (max-width: 1024px) {
  .pre-reservation-title h3 {
    font-size: 43px !important;
  }

  .pre-reservation-title h3 strong {
    font-size: 48px !important;
  }

  .reservation-badge {
    min-width: 178px !important;
    height: 52px !important;
    font-size: 36px !important;
  }
}

@media (max-width: 768px) {
  .yeon-pre-reservation {
    padding: 56px 0 0 !important;
    min-height: 500px !important;
  }

  .yeon-pre-reservation .pre-reservation-inner {
    width: calc(100% - 28px) !important;
  }

  .pre-reservation-title h3 {
    font-size: 31px !important;
    line-height: 1.35 !important;
  }

  .pre-reservation-title h3 strong {
    display: block !important;
    margin-top: 10px !important;
    font-size: 37px !important;
  }

  .reservation-badge {
    min-width: 138px !important;
    height: 42px !important;
    margin: 0 4px !important;
    padding: 0 16px !important;
    font-size: 28px !important;
  }

  .reservation-badge::after {
    bottom: -4px !important;
    border-left-width: 5px !important;
    border-right-width: 5px !important;
    border-top-width: 5px !important;
  }
  .bouquet-benefit-title span.reservation-badge:after {
    border-top: 5px solid var(--reservation-badge-color) !important;
  }

  .pre-reservation-title p {
    font-size: 14px !important;
  }

  .pre-reservation-visual {
    min-height: 260px !important;
    margin-top: 28px !important;
  }

  .pre-reservation-visual img {
    max-width: 80% !important;
  }
}

@media (max-width: 480px) {
  .pre-reservation-title h3 br.mo {
    /* display:block; */
  }
  .pre-reservation-title h3 {
    font-size: 19px !important;
  }

  .pre-reservation-title h3 strong {
    font-size: 31px !important;
  }

  .reservation-badge {
    min-width: auto !important;
    height: auto !important;
    font-size: 19px !important;
    padding: 6px 10px !important;
  }

  .pre-reservation-visual {
    min-height: 230px !important;
    margin-top: 0 !important;
  }
}

/* =========================================================
   YEON EVENT TAB SECTION
========================================================= */

.yeon-event-section {
  position: relative !important;
  padding: 76px 0 84px !important;
  background: #fff3f4 !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-event-inner {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}

.event-title {
  margin-bottom: 26px !important;
}

.event-title h3 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 52px !important;
  line-height: 1.24 !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
}

.event-title h3 strong {
  display: inline-block !important;
  color: #e94d52 !important;
  font-size: 65px !important;
  font-weight: 800 !important;
}

.event-tabs {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto 30px !important;
}

.event-tabs button {
  position: relative !important;
  height: 45px !important;
  padding: 0 26px !important;
  border-radius: 0px !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 12px rgba(218, 85, 92, 0.06) !important;
  transition: all 0.25s ease !important;
}

.event-tabs button.is-active {
  background: #e9474b !important;
  color: #fff !important;
}

/*.event-tabs button.is-active::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -9px !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 10px solid #e9474b !important;
}*/

.event-panel {
  display: none !important;
}

.event-panel.is-active {
  display: block !important;
}

.event-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.event-grid li {
  margin: 0 !important;
  padding: 0 !important;
}

.event-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 340px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
  text-align: left !important;
  box-shadow: none !important;
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease !important;
}

.event-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 34px rgba(207, 82, 87, 0.16) !important;
}

.event-card img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
}

.event-card img[src=""],
.event-card img:not([src]) {
  display: none !important;
}

.event-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    radial-gradient(
      circle at 70% 46%,
      rgba(255, 230, 0, 0.78) 0 17%,
      transparent 18%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 255, 255, 0.82) 42%,
      rgba(255, 255, 255, 0.24) 100%
    ) !important;
}

.event-card-dark::before {
  background:
    radial-gradient(
      circle at 60% 42%,
      rgba(255, 230, 0, 0.72) 0 18%,
      transparent 19%
    ),
    linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.52) 42%,
      rgba(0, 0, 0, 0.18) 100%
    ) !important;
}

.event-card > div {
  position: relative !important;
  z-index: 3 !important;
  padding: 32px 26px !important;
}

.event-card p {
  margin: 0 0 8px !important;
  color: rgba(0, 0, 0, 0.42) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
}

.event-card h4 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 28px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
}

.event-card h4 strong {
  color: #a990c8 !important;
}

.event-card span {
  display: block !important;
  margin-top: 10px !important;
  color: #6a6a6a !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.event-card em {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 26px !important;
  margin-top: 12px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  background: #b98ad7 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.event-card-dark p,
.event-card-dark h4,
.event-card-dark span {
  color: #fff !important;
}

.event-card-dark h4 strong {
  color: #f0df59 !important;
}

/* 팝업 */
.yeon-event-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
}

.yeon-event-modal.is-open {
  display: block !important;
}

.event-modal-bg {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.56) !important;
}

.event-modal-box {
  position: relative !important;
  z-index: 2 !important;
  width: min(520px, calc(100% - 36px)) !important;
  margin: 12vh auto 0 !important;
  padding: 38px 34px 36px !important;
  border-radius: 20px !important;
  background: #fff !important;
  text-align: center !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22) !important;
  animation: eventModalPop 0.35s cubic-bezier(0.2, 1.3, 0.42, 1) both !important;
}

.event-modal-close {
  position: absolute !important;
  right: 18px !important;
  top: 12px !important;
  color: #333 !important;
  font-size: 32px !important;
  line-height: 1 !important;
}

.event-modal-box p {
  margin: 0 0 10px !important;
  color: #e9474b !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.event-modal-box h4 {
  margin: 0 !important;
  color: #111 !important;
  font-size: 30px !important;
  line-height: 1.3 !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
}

.event-modal-desc {
  margin-top: 16px !important;
  color: #666 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  letter-spacing: -0.04em !important;
}

@keyframes eventModalPop {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 반응형 */
@media (max-width: 1024px) {
  .event-title h3 {
    font-size: 42px !important;
  }

  .event-title h3 strong {
    font-size: 46px !important;
  }

  .event-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .yeon-event-section {
    padding: 56px 0 62px !important;
  }

  .yeon-event-inner {
    width: calc(100% - 28px) !important;
  }

  .event-title h3 {
    font-size: 31px !important;
  }

  .event-title h3 strong {
    font-size: 28px !important;
  }

  .event-tabs {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .event-tabs button {
    min-width: calc(50% - 4px) !important;
    height: 40px !important;
    font-size: 14px !important;
  }

  .event-card {
    height: 270px !important;
  }

  .event-card > div {
    padding: 24px 20px !important;
  }

  .event-card h4 {
    font-size: 23px !important;
  }
}

@media (max-width: 520px) {
  .event-grid {
    grid-template-columns: 1fr !important;
  }

  .event-card {
    height: 260px !important;
  }

  .event-modal-box {
    margin-top: 16vh !important;
    padding: 34px 24px 30px !important;
  }

  .event-modal-box h4 {
    font-size: 24px !important;
  }
}

/* =========================================================
   YEON SECRET BENEFIT SECTION
========================================================= */

.yeon-secret-benefit {
  position: relative !important;
  min-height: 300px !important;
  padding: 72px 0 76px !important;
  background-color: #f8f8fb !important;
  overflow: hidden !important;
  text-align: center !important;
}

.yeon-secret-benefit .secret-gradient {
  position: absolute !important;
  inset: -40% !important;
  z-index: 1 !important;
  background:
    radial-gradient(
      circle at 12% 24%,
      rgba(194, 215, 255, 0.72),
      transparent 28%
    ),
    radial-gradient(circle at 42% 14%, rgb(193 200 238), transparent 26%),
    radial-gradient(
      circle at 72% 20%,
      rgba(228, 199, 255, 0.72),
      transparent 28%
    ),
    radial-gradient(circle at 90% 64%, rgb(255 255 255), transparent 30%),
    radial-gradient(
      circle at 34% 84%,
      rgba(224, 212, 255, 0.58),
      transparent 28%
    ),
    linear-gradient(120deg, #edf3ff 0%, #fbf7ff 45%, #f4f7e8 100%) !important;
  background-size: 130% 130% !important;
  filter: blur(18px) !important;
  animation: secretGradientMove 9s ease-in-out infinite alternate !important;
}

.yeon-secret-benefit::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background-color: rgba(255, 255, 255, 0.18) !important;
  pointer-events: none !important;
}

.secret-benefit-inner {
  position: relative !important;
  z-index: 3 !important;
  width: min(1080px, calc(100% - 40px)) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}

.secret-benefit-title {
  text-align: center !important;
  animation: secretTitleUp 0.8s ease both !important;
}

.secret-benefit-title p {
  margin: 0 0 9px !important;
  padding: 0 !important;
  color: #d0d4e5 !important;
  font-size: 39px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  /* -webkit-text-stroke: 1px #ffb7ca !important; */
  font-family: "Cinzel", serif;
}

.secret-benefit-title h3 {
  margin: 0 !important;
  padding: 0 !important;
  color: #111111 !important;
  font-size: 65px !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;
  letter-spacing: -0.06em !important;
}

.secret-benefit-title h3 strong {
  color: #6376c6 !important;
  font-weight: 900 !important;
}

.secret-benefit-btn {
  position: relative !important;
  width: 235px !important;
  height: 50px !important;
  margin: 24px auto 0 !important;
  border-radius: 0px !important;
  background: #080808 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  overflow: hidden !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18) !important;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease !important;
  animation: secretBtnPulse 1.8s ease-in-out infinite !important;
}

.secret-benefit-btn span {
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  transform: translateY(-1px) !important;
}

.secret-benefit-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -80% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.36),
    transparent
  ) !important;
  transform: skewX(-22deg) !important;
  animation: secretBtnShine 2.6s ease-in-out infinite !important;
}

.secret-benefit-btn:hover {
  background: #6376c6 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 34px rgb(248 244 254) !important;
}

.secret-benefit-btn .secret-ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.42) !important;
  transform: scale(0) !important;
  animation: secretRipple 0.6s ease-out forwards !important;
  pointer-events: none !important;
}

@keyframes secretGradientMove {
  0% {
    transform: translate3d(-2%, -2%, 0) scale(1);
    background-position: 0% 50%;
  }
  50% {
    transform: translate3d(2%, 1%, 0) scale(1.04);
    background-position: 60% 30%;
  }
  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.02);
    background-position: 100% 60%;
  }
}

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

@keyframes secretBtnPulse {
  0%,
  100% {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
  }
  50% {
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.18),
      0 0 0 10px rgba(255, 255, 255, 0.28);
  }
}

@keyframes secretBtnShine {
  0% {
    left: -80%;
  }
  45%,
  100% {
    left: 130%;
  }
}

@keyframes secretRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 반응형 */
@media (max-width: 768px) {
  .yeon-secret-benefit {
    min-height: 260px !important;
    padding: 58px 0 62px !important;
  }

  .secret-benefit-inner {
    width: calc(100% - 28px) !important;
  }

  .secret-benefit-title p {
    font-size: 31px !important;
  }

  .secret-benefit-title h3 {
    font-size: 31px !important;
    line-height: 1.35 !important;
  }

  .secret-benefit-btn {
    width: 210px !important;
    height: 44px !important;
    margin-top: 22px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .secret-benefit-title p {
    font-size: 26px !important;
  }

  .secret-benefit-title h3 {
    font-size: 25px !important;
  }

  .secret-benefit-btn {
    width: 200px !important;
    height: 42px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   HISTORY MEDAL TOP POSITION FIX
   메달 이미지를 섹션 최상단으로 이동
========================================================= */

.yeon-history {
  position: relative !important;
  overflow: hidden !important;
}

/* 메달을 섹션 상단 중앙에 고정 */
.yeon-history .medal-wrap {
  position: absolute !important;
  top: 28px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  width: 520px !important;
  max-width: 70vw !important;
  margin: 0 !important;
  text-align: center !important;
}

.yeon-history .medal-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* 메달이 위로 올라가므로 숫자 영역을 아래로 내려줌 */
.yeon-history .history-count-list {
  margin-top: 210px !important;
}

/* 낮은 해상도 PC */
@media (min-width: 1025px) and (max-height: 820px) {
  .yeon-history .medal-wrap {
    top: 16px !important;
    width: 440px !important;
  }

  .yeon-history .history-count-list {
    margin-top: 165px !important;
  }
}

/* 태블릿 */
@media (max-width: 1024px) {
  .yeon-history .medal-wrap {
    top: 24px !important;
    width: 420px !important;
  }

  .yeon-history .history-count-list {
    margin-top: 170px !important;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  .yeon-history .medal-wrap {
    position: relative !important;
    top: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 280px !important;
    max-width: 78vw !important;
    margin: 0 auto 30px !important;
  }

  .yeon-history .history-count-list {
    margin-top: 0 !important;
    gap: 30px 3vw !important;
  }
}

/* =========================================================
   YEON HISTORY REVIEW FLOW BACKGROUND
   후기 캡쳐 이미지 세로 슬라이드 배경
========================================================= */

.yeon-history.review-motion-section {
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
}

/* 기존 고정 배경은 아주 약하게만 */
.yeon-history.review-motion-section .history-bg {
  z-index: 0 !important;
  opacity: 0.16 !important;
}

/* 후기 이미지 레이어 */
.yeon-history.review-motion-section .review-flow-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 18px 26px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0.34 !important;

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    transparent 100%
  ) !important;
}

.yeon-history.review-motion-section .review-flow-col {
  position: relative !important;
  overflow: hidden !important;
  min-height: 100% !important;
}

.yeon-history.review-motion-section .review-flow-track {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  will-change: transform !important;
}

.yeon-history.review-motion-section .review-flow-col.is-up .review-flow-track {
  animation: yeonReviewFlowUp 20s linear infinite !important;
}

.yeon-history.review-motion-section
  .review-flow-col.is-down
  .review-flow-track {
  animation: yeonReviewFlowDown 20s linear infinite !important;
}

.yeon-history.review-motion-section
  .review-flow-col:nth-child(1)
  .review-flow-track {
  animation-duration: 20s !important;
}

.yeon-history.review-motion-section
  .review-flow-col:nth-child(2)
  .review-flow-track {
  animation-duration: 30s !important;
}

.yeon-history.review-motion-section
  .review-flow-col:nth-child(3)
  .review-flow-track {
  animation-duration: 22s !important;
}

.yeon-history.review-motion-section
  .review-flow-col:nth-child(4)
  .review-flow-track {
  animation-duration: 32s !important;
}

.yeon-history.review-motion-section
  .review-flow-col:nth-child(5)
  .review-flow-track {
  animation-duration: 24s !important;
}

.yeon-history.review-motion-section
  .review-flow-col:nth-child(6)
  .review-flow-track {
  animation-duration: 34s !important;
}

.yeon-history.review-motion-section .review-flow-item {
  width: 100% !important;
  height: 190px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32) !important;
}

.yeon-history.review-motion-section .review-flow-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  filter: saturate(0.88) contrast(0.95) !important;
}

/* 후기 이미지 배경 딤 밝게 조정 */
.yeon-history.review-motion-section .history-dim {
  z-index: 2 !important;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.65) 48%,
    rgba(0, 0, 0, 0.76) 100%
  ) !important;
}

/* 후기 이미지 배경 노출감 조정 */
.yeon-history.review-motion-section .review-flow-bg {
  opacity: 0.52 !important;
}

/* 실제 컨텐츠 최상단 */
.yeon-history.review-motion-section .history-inner {
  position: relative !important;
  z-index: 3 !important;
}

/* 메달은 더 위 */
.yeon-history.review-motion-section .medal-wrap {
  z-index: 5 !important;
}

/* 위로 이동 */
@keyframes yeonReviewFlowUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

/* 아래로 이동 */
@keyframes yeonReviewFlowDown {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}

/* 태블릿 */
@media (max-width: 1024px) {
  .yeon-history.review-motion-section .review-flow-bg {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 14px !important;
    opacity: 0.28 !important;
  }

  .yeon-history.review-motion-section .review-flow-item {
    height: 170px !important;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  body .yeon-history.review-motion-section .review-flow-bg {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    opacity: 0.2 !important;
  }

  .yeon-history.review-motion-section .review-flow-track {
    gap: 8px !important;
  }

  .yeon-history.review-motion-section .review-flow-item {
    height: 145px !important;
    border-radius: 8px !important;
  }

  .yeon-history.review-motion-section .review-flow-item img {
    border-radius: 8px !important;
  }
}

@media (max-width: 480px) {
  .yeon-history.review-motion-section .review-flow-bg {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    opacity: 0.18 !important;
  }

  .yeon-history.review-motion-section .review-flow-item {
    height: 130px !important;
  }
}

/* =========================================================
   연웨딩박람회 사전예약 20만원 계약금 지원
========================================================= */

.reservation-cashback-area {
  width: 100%;
  margin-top: clamp(24px, 3vw, 0px);
  text-align: center;
}

.cash-money-stage {
  position: relative;
  width: min(100%, 550px);
  height: clamp(210px, 16vw, 360px);
  margin: 0 auto;
  overflow: visible;
  perspective: 1000px;
}

.cash-note {
  --cash-x: 0px;
  --cash-y: 0px;
  --cash-rotate: 0deg;
  --cash-delay: 0s;

  position: absolute;
  left: 50%;
  bottom: 18px;
  width: clamp(220px, 31vw, 355px);
  max-width: 82%;
  height: auto;
  opacity: 0;
  transform-origin: center center;
  filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.15))
    drop-shadow(0 3px 3px rgba(0, 0, 0, 0.1));
  will-change: transform, opacity;
  pointer-events: none;
}

/* 지폐가 쌓이는 위치와 기울기 */
.cash-note-1 {
  --cash-x: -39px;
  --cash-y: 14px;
  --cash-rotate: -18deg;
  --cash-delay: 0.05s;
  z-index: 1;
}

.cash-note-2 {
  --cash-x: -15px;
  --cash-y: 7px;
  --cash-rotate: -8deg;
  --cash-delay: 0.3s;
  z-index: 2;
}

.cash-note-3 {
  --cash-x: 16px;
  --cash-y: 2px;
  --cash-rotate: 7deg;
  --cash-delay: 0.55s;
  z-index: 3;
}

.cash-note-4 {
  --cash-x: 42px;
  --cash-y: -5px;
  --cash-rotate: 16deg;
  --cash-delay: 0.8s;
  z-index: 4;
}

/* 영역이 화면에 들어왔을 때 지폐 순차 등장 */
.money-active .cash-note {
  animation: yeonCashDrop 0.9s cubic-bezier(0.2, 0.85, 0.25, 1.25) forwards;
  animation-delay: var(--cash-delay);
}

@keyframes yeonCashDrop {
  0% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--cash-x)),
        calc(-230px + var(--cash-y))
      )
      rotate(calc(var(--cash-rotate) - 12deg)) scale(0.82);
  }

  55% {
    opacity: 1;
  }

  78% {
    transform: translate(calc(-50% + var(--cash-x)), calc(9px + var(--cash-y)))
      rotate(calc(var(--cash-rotate) + 2deg)) scale(1.03);
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% + var(--cash-x)), var(--cash-y))
      rotate(var(--cash-rotate)) scale(1);
  }
}

/* 총 20만원 배지 */
.cash-total-badge {
  position: absolute;
  right: 2px;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(104px, 12vw, 132px);
  aspect-ratio: 1 / 1;
  padding: 15px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    #d8bd7b 0%,
    #fff2bd 28%,
    #b88a32 58%,
    #f4d98d 100%
  );
  box-shadow:
    0 12px 28px rgba(90, 57, 15, 0.24),
    inset 0 0 0 4px rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: translateY(25px) scale(0.65) rotate(8deg);
}

.money-active .cash-total-badge {
  animation: yeonCashBadge 0.75s 1.55s cubic-bezier(0.2, 0.9, 0.3, 1.35)
    forwards;
}

.cash-total-badge span {
  display: block;
  margin-bottom: 2px;
  color: #5f431b;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.cash-total-badge strong {
  display: block;
  color: #3f2910;
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.07em;
  white-space: nowrap;
}

@keyframes yeonCashBadge {
  0% {
    opacity: 0;
    transform: translateY(25px) scale(0.65) rotate(8deg);
  }

  70% {
    opacity: 1;
    transform: translateY(-5px) scale(1.07) rotate(-3deg);
  }

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

/* 계약금 지원 문구 */
.reservation-cashback-text {
  position: relative;
  margin-top: clamp(88px, 13vw, 35px);
  opacity: 0;
  transform: translateY(24px);
}

.money-active .reservation-cashback-text {
  animation: yeonCashTextUp 0.8s 1.85s ease forwards;
}

.reservation-cashback-text p {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin: 0 0 11px;
  color: #222;
  font-size: clamp(14px, 1.25vw, 22px);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.045em;
}

.reservation-cashback-text p span {
  display: inline-block;
}

.reservation-cashback-text p i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #27211f;
  color: #fff;
  font-size: 17px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}

.reservation-cashback-text > strong {
  display: inline-block;
  position: relative;
  padding: 12px 27px 13px;
  border-radius: 100px;
  background: #292321;
  color: #fff;
  box-shadow: 0 9px 24px rgba(34, 28, 25, 0.16);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.06em;
}

.reservation-cashback-text > strong em {
  color: #f5d37f;
  font-size: 1.15em;
  font-style: normal;
  font-weight: 900;
}

@keyframes yeonCashTextUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 반짝이는 빛 효과 */
.cash-money-stage::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 50%;
  z-index: 9;
  width: 70%;
  height: 72%;
  background: radial-gradient(
    circle,
    rgba(255, 232, 160, 0.4) 0%,
    rgba(255, 232, 160, 0) 67%
  );
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  pointer-events: none;
}

.money-active .cash-money-stage::after {
  animation: yeonCashGlow 1.3s 1.2s ease forwards;
}

@keyframes yeonCashGlow {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
  }

  45% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.35);
  }
}

/* 태블릿 */
@media (max-width: 1024px) {
  .cash-money-stage {
    width: min(100%, 420px);
    height: 245px;
  }
}

/* 모바일 */
@media (max-width: 767px) {
  .reservation-cashback-area {
    margin-top: 0;
  }

  .cash-money-stage {
    width: min(100%, 340px);
    height: 205px;
    margin-bottom: 30px;
  }

  .cash-note {
    bottom: 17px;
    width: 245px;
    max-width: 76%;
  }

  .cash-note-1 {
    --cash-x: -27px;
    --cash-y: 12px;
    --cash-rotate: -17deg;
  }

  .cash-note-2 {
    --cash-x: -10px;
    --cash-y: 6px;
    --cash-rotate: -7deg;
  }

  .cash-note-3 {
    --cash-x: 10px;
    --cash-y: 1px;
    --cash-rotate: 7deg;
  }

  .cash-note-4 {
    --cash-x: 27px;
    --cash-y: -4px;
    --cash-rotate: 16deg;
  }

  .cash-total-badge {
    right: 3px;
    width: 94px;
    padding: 10px;
  }

  .reservation-cashback-text {
    margin-top: 14px;
    padding: 0 10px;
  }

  .reservation-cashback-text p {
    display: block;
    font-size: 14px;
    line-height: 1.7;
  }

  .reservation-cashback-text p span {
    display: block;
  }

  .reservation-cashback-text p i {
    width: 22px;
    height: 22px;
    margin: 5px auto;
    font-size: 15px;
  }

  .reservation-cashback-text > strong {
    width: 100%;
    max-width: 330px;
    padding: 12px 15px 13px;
    font-size: 21px;
  }
}

/* 작은 모바일 */
@media (max-width: 380px) {
  .cash-money-stage {
    height: 190px;
  }

  .cash-note {
    width: 220px;
  }

  .cash-total-badge {
    width: 86px;
  }

  .cash-total-badge strong {
    font-size: 20px;
  }

  .reservation-cashback-text > strong {
    font-size: 19px;
  }
}

/* 모션 최소화 설정 사용자 */
@media (prefers-reduced-motion: reduce) {
  .cash-note,
  .cash-total-badge,
  .reservation-cashback-text,
  .cash-money-stage::after {
    animation: none !important;
    transition: none !important;
  }

  .cash-note {
    opacity: 1;
    transform: translate(calc(-50% + var(--cash-x)), var(--cash-y))
      rotate(var(--cash-rotate));
  }

  .cash-total-badge,
  .reservation-cashback-text {
    opacity: 1;
    transform: none;
  }
}