/* ===== 메인 배너 ===== */
.main-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 890; /* ✅ 화면에 딱 맞게 비율 고정 */
  overflow: hidden;
  z-index: 0;
}

.main-banner::before,
.main-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transition: opacity 2s ease-in-out;
}

/* PC 이미지 전환 */
.main-banner::before {
  animation: bannerFade1 12s infinite;
}
.main-banner::after {
  animation: bannerFade2 12s infinite;
}

@keyframes bannerFade1 {
  0%, 40% { opacity: 1; }     /* 첫 이미지 유지 */
  50%, 100% { opacity: 0.25; } /* 완전 사라지지 않고 살짝 남김 */
}

@keyframes bannerFade2 {
  0%, 45% { opacity: 0; }  /* 1번이 남아있는 동안 미세하게 보이기 시작 */
  55%, 95% { opacity: 1; }    /* 두 번째 이미지 주도 */
  100% { opacity: 0.2; }     /* 다음 루프 시작 전 잔상 유지 */
}

/* ===== 텍스트 영역 ===== */
.banner-text {
  position: absolute;
  top: 50%;
  left: 80px;
  transform: translateY(-50%);
  color: #d0a232;
  z-index: 2;
  max-width: 600px;
}

/* ===== 모바일 ===== */
@media (max-width: 768px) {
  .main-banner {
    aspect-ratio: 720 / 1000; /* ✅ 모바일 비율 */
  }
  .main-banner::before {
    background-position: center center;
  }
  .main-banner::after {
    background-position: center center;
  }
}