/* 2026-06-10: index2.html main visual typography and divider borrowed from Figma Make reference. */
body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .title {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .space {
  width: 0.33em;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .main-visual-divider {
  width: 0;
  height: 1px;
  margin: 24px auto;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  animation: none;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .main-visual-divider.is-visible {
  animation: index2MainVisualDivider 0.9s ease-out 1.3s forwards;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .subtitle {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  line-height: normal;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0;
  text-align: center;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .subtitle-phrase {
  display: inline-block;
  white-space: nowrap;
}

@keyframes index2MainVisualDivider {
  to {
    width: 140px;
    opacity: 1;
  }
}

@media (max-width: 768px) {
  body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-inline: max(24px, env(safe-area-inset-left, 0px));
  }

  body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .title {
    font-size: clamp(2.7rem, 12vw, 4.5rem);
  }

  body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content .subtitle {
    width: min(84vw, 560px);
    max-width: 100%;
    margin-inline: auto;
    white-space: normal;
  }
}

/* 2026-06-10: index2.html main visual background transition, dark overlay, and Figma Make style neon wave. */
body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #0a1f44;
  transform: none !important;
  overflow: hidden;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-bg .slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-bg .bg-slide {
  z-index: 0;
  background-position: center;
  transform: scale(1.02);
  transition: opacity 2.4s ease-in-out, transform 6.2s ease-in-out;
  will-change: opacity, transform;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-bg .bg-slide4 {
  display: none;
  background-image: none;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.36) 46%, rgba(0, 0, 0, 0.66) 100%),
    linear-gradient(135deg, rgba(255, 133, 112, 0.05) 0%, transparent 50%, rgba(30, 80, 200, 0.08) 100%);
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .slide-content {
  z-index: 3;
}

body.index2-main-visual .swiper .swiper-slide.slide-1 .main-visual-wave {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body.index2-main-visual .swiper .swiper-slide.slide-1 .main-visual-wave {
    display: none;
  }
}