.main-visual-inner .swiper-slide{height: 900px;}
.main-visual-inner .swiper-slide img{width: 100%;height: 100%;object-fit: cover;object-position: center;display:block;}
.main-visual-inner .visual-text{position: absolute;top: 363px;left: calc((100% - 1440px) / 2);}
.main-visual-inner .visual-text .text01{padding-bottom: 13px;font-weight: 600;font-size: 26px;line-height: 100%;color: #fff;}
.main-visual-inner .visual-text .text02{padding-bottom: 24px;font-weight: 700;font-size: 70px;line-height: 120%;letter-spacing: -0.02em;color: #fff;}
.main-visual-inner .visual-text .text03{padding-bottom: 48px;font-weight: 700;font-size: 20px;line-height: 36px;letter-spacing: -0.02em;color: #fff;}

/* ==========================================================================
   기부하기 버튼 신규 스타일 
   ========================================================================== */
.main-visual-inner .visual-text .heart {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px; 
  width: 223px;
  height: 60px;
  background: linear-gradient(90deg, #00c3eb 0%, #007aff 100%);
  border: none;
  border-radius: 50px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 100%;
  letter-spacing: -0.5px;
  color: #fff;
  
  /* 손 모양 커서를 정상적으로 표시 */
  cursor: pointer !important; 
  
  box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.main-visual-inner .visual-text .heart:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(0, 122, 255, 0.4);
  cursor: pointer !important; 
}

/* 1. 메인 빨간 하트 (크기 85% 축소) */
.main-visual-inner .visual-text .heart::before {
  content: "\2665";
  display: block;
  font-size: 1.76rem; 
  color: #ff1e1e;
  z-index: 2;
  pointer-events: none; 
  animation: heartBeatPop 0.6s infinite alternate;
}

@keyframes heartBeatPop {
  0% {
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
    transform: scale(1.1);
  }
  100% {
    text-shadow: 0 0 2px #ff4a4a;
    transform: scale(0.9);
  }
}

/* 2. 사방으로 분출되는 파티클 하트 */
.main-visual-inner .visual-text .heart .heart-particles {
  position: absolute;
  left: calc(50% - 38px); 
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none; 
  z-index: 1;
}

.main-visual-inner .visual-text .heart .particle-heart {
  position: absolute;
  left: 0;
  top: 0;
  color: #ff6b8b;
  font-size: 1.8rem;
  pointer-events: none; 
  animation: explodeHeart 1.8s ease-out forwards;
}

@keyframes explodeHeart {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.8);
    opacity: 0;
  }
}

.main-visual-inner .visual-swiper:not(:has(.swiper-slide:nth-child(2))) .visual-control{display: none;}
.main-visual-inner .visual-control{position: absolute;top: 310px;left: calc((100% - 1440px)/2);display: flex;align-items: center;gap: 16px;z-index: 1;}
.main-visual-inner .visual-control > *{cursor: pointer;}
.main-visual-inner .visual-control .prev,
.main-visual-inner .visual-control .next{display: none;width: 35px;height: 35px;background: url(../img/main/visual-arr.png) no-repeat center;border: 1px solid rgba(255, 255, 255, 0.5);border-radius: 50%;}
.main-visual-inner .visual-control .next{transform: rotate(180deg);}
.main-visual-inner .visual-control .progress{display: flex;align-items: center;gap: 16px;}
.main-visual-inner .visual-control .progress .bar{position: relative;width: 165px;height: 2px;background: rgb(255 255 255 / 50%);overflow: hidden;}
.main-visual-inner .visual-control .progress .bar .fill{position: absolute;top: 0;left: 0;display: block;width: 0;height: 100%;background: #fff;transition: width linear;}
.main-visual-inner .visual-control .progress .count {display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 14px;line-height: 17px;color: #fff;}
.main-visual-inner .visual-control .progress .count span{width: 19px;line-height: 1;}
.main-visual-inner .visual-control .pause{width: 10px;height: 10px;background: url("../img/main/visual-pause.png") no-repeat center / 100% auto;}
.main-visual-inner .visual-control .play{display: none;width: 10px;height: 10px;background: url("../img/main/visual-play.png") no-repeat center / 100% auto;}

@media (max-width: 1440px){
	.main-visual-inner .visual-text{left: 0;padding: 0 20px;}
	.main-visual-inner .visual-control{left: 0;padding: 0 35px;}
}
@media (max-width: 1024px){
	.main-visual-inner .visual-text .text02{font-size: 50px;}
}
@media (max-width: 768px){
	.main-visual-inner .swiper-slide{height: 726px;}
	.main-visual-inner .visual-text{top:initial;bottom:251px;width: 100%;text-align: center;}
	.main-visual-inner .visual-text .text01{font-size: 16px;}
	.main-visual-inner .visual-text .text02{font-size: 36px;line-height: 46px;padding-bottom:12px;}
	.main-visual-inner .visual-text .text03{padding-bottom: 0;font-size: 16px;line-height: 24px;font-weight:500;}
	.main-visual-inner .visual-text .text03 br{display: none;}
	
	.main-visual-inner .visual-text .heart{
		font-size: 1rem;
		height: 40px;
		width: 180px;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 20px;
		gap: 6px; 
	}
	.main-visual-inner .visual-text .heart:hover {
		transform: translateX(-50%) scale(1.02);
	}
	.main-visual-inner .visual-text .heart::before {
		font-size: 1.37rem;
	}
	.main-visual-inner .visual-text .heart .heart-particles {
		left: calc(50% - 30px); 
	}

	.main-visual-inner .visual-control{top:initial;bottom:185px;gap: 0;justify-content: space-between;width: 100%;}
	.main-visual-inner .visual-control .prev,
	.main-visual-inner .visual-control .next{display: block;}
	.main-visual-inner .visual-control .progress .bar{width: 92px;}
	.main-visual-inner .visual-control .progress{position: relative;padding-left: 35px;}
	.main-visual-inner .visual-control .progress .count{gap: 0;font-size: 0;}
	.main-visual-inner .visual-control .progress .count span{font-size: 15px;}
	.main-visual-inner .visual-control .progress .count span:nth-child(1){position: absolute; top: 1px; left: 0;}

	.main-visual-inner .visual-swiper {overflow: hidden;}
}
@media(max-width:374px){
	.main-visual-inner .visual-control{padding: 0 20px;}
}

.main-visual-inner .visual-text .text01,
.main-visual-inner .visual-text .text02,
.main-visual-inner .visual-text .text03 {
	text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.65) !important;
}

/* ==========================================================================
   자바스크립트 커스텀 커서(분홍 하트) 제어 및 손 모양 복구 (오류 수정 완결판)
   ========================================================================== */

/* 1. 분홍 하트 기본 상태: 클릭 방지 처리 */
.heart-cursor {
  pointer-events: none !important;
}

/* 2. [수정됨] 링크 호버 시 크기 축소 및 중앙 위치(translate) 유지 */
.heart-cursor.link-hover {
  /* scale만 쓰면 중앙 정렬이 풀리므로, translate(-50%, -50%)를 반드시 같이 써주어야 합니다. */
  transform: translate(-50%, -50%) scale(0.6) !important; 
  transform-origin: center center !important;
}

/* 3. [수정됨] 홈페이지 전체 마우스 기본 화살표(auto) 복구 */
/* 너무 강력했던 * 기호를 빼서, 자식 요소들이 자연스럽게 커서를 물려받게 합니다. */
html.heart-cursor-enabled,
html.heart-cursor-enabled body {
  cursor: auto !important; 
}

/* 4. 링크, 버튼 등 클릭 요소 위에서는 손 모양(pointer) 커서 정상 작동 */
html.heart-cursor-enabled a,
html.heart-cursor-enabled button,
html.heart-cursor-enabled input[type="button"],
html.heart-cursor-enabled input[type="submit"],
html.heart-cursor-enabled .cursor-pointer,
html.heart-cursor-enabled .main-visual-inner .visual-text .heart {
  cursor: pointer !important;
}

/* 5. [추가됨] a 태그 내부의 텍스트나 이미지도 무조건 손 모양을 유지하도록 보장 */
html.heart-cursor-enabled a *,
html.heart-cursor-enabled button * {
  cursor: inherit !important;
}
/* ==========================================================================
   하트 커서 심장박동 애니메이션 (CSS)
   ========================================================================== */
/* 실제 하트 이름인 .heart-cursor에 is-still 상태가 붙었을 때 애니메이션 실행 */
.heart-cursor.is-still {
  /* 0.8초 주기로 무한히 부드럽게 커졌다 작아지는 애니메이션 적용 */
  animation: heartHeartbeat 0.8s infinite alternate ease-in-out !important;
}

@keyframes heartHeartbeat {
  0% {
    /* 원래 위치를 방해하지 않기 위해 translate 값을 유지하며 기본 크기(1배) 적용 */
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    /* 마우스가 제자리에 멈췄을 때 1.08배로 아주 조금 커지게 설정 */
    transform: translate(-50%, -50%) scale(1.08);
  }
}