/* Hero Slider Component */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

.hero-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75); /* 배경 이미지 위 75% 불투명도 오버레이 */
  pointer-events: none;
  z-index: 0;
}

.hero-slide--active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* 슬라이드별 배경 (배경색 + 배경 이미지) */
.hero-slide--main {
  background-color: var(--color-bg-main);
  background-image: url('../../images/pages/index/main.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-slide--doctors {
  background-color: var(--color-bg-doctors);
  background-image: url('../../images/pages/index/main_Doctors.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-slide--users {
  background-color: var(--color-bg-users);
  background-image: url('../../images/pages/index/main_Users.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 배경 이미지 (디자인 완성 후 적용) */
/* .hero-slide--main {
  background-image: var(--bg-image-main);
  background-size: var(--bg-size);
  background-position: var(--bg-position);
  background-repeat: no-repeat;
} */

.hero-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--header-height) 0 var(--spacing-lg);
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 1; /* 오버레이 위로 텍스트 노출 */
}

.hero-content__container {
  width: 100%;
  max-width: var(--container-max-width);
  padding: 0 var(--spacing-2xl);
}

.hero-content__text {
  display: flex;
  flex-direction: column;
}

.hero-content__title {
  font-family: var(--font-montserrat);
  font-weight: 900; /* Figma: Montserrat Black */
  font-size: clamp(40px, 4.17vw, 80px);
  line-height: clamp(56px, 5.83vw, 112px); /* Figma: 112px @1920px */
  letter-spacing: 0; /* Figma: 0 */
  color: #ffffff;
}

.hero-content__subtitle {
  font-family: var(--font-pretendard);
  font-weight: 800; /* Figma: Pretendard ExtraBold */
  font-size: clamp(20px, 2.08vw, 40px);
  line-height: clamp(28px, 2.92vw, 56px); /* Figma: 56px @1920px */
  letter-spacing: clamp(-0.4px, -0.042vw, -0.8px); /* Figma: -0.8px @1920px */
  color: #ffffff;
}

.hero-content__description {
  font-family: var(--font-pretendard);
  font-weight: 700; /* Figma: Pretendard Bold (첫 번째 설명) */
  font-size: clamp(14px, 1.46vw, 28px);
  line-height: clamp(19.6px, 2.04vw, 39.2px); /* Figma: 39.2px @1920px */
  letter-spacing: clamp(-0.28px, -0.029vw, -0.56px); /* Figma: -0.56px @1920px */
  color: #ffffff;
}

/* 두 번째 설명 텍스트는 Regular (400) - 슬라이드 1번용 */
.hero-slide--main .hero-content__description:last-of-type {
  font-weight: 400; /* Figma: Pretendard Regular */
  font-size: clamp(10px, 1.04vw, 20px);
  line-height: clamp(14px, 1.46vw, 28px); /* Figma: 28px @1920px */
  letter-spacing: clamp(-0.2px, -0.021vw, -0.4px); /* Figma: -0.4px @1920px */
}

/* 슬라이드 2번 (Doctors) 스타일 */
.hero-slide--doctors .hero-content__title {
  font-family: var(--font-pretendard);
  font-weight: 800; /* Figma: Pretendard ExtraBold */
  font-size: clamp(24px, 2.5vw, 48px);
  line-height: 1.4; /* Figma: 67.2px / 48px = 1.4 */
  letter-spacing: -0.02em; /* Figma: -0.96 */
}

.hero-slide--doctors .hero-content__description {
  font-family: var(--font-pretendard);
  font-weight: 500; /* Figma: Pretendard Medium */
  font-size: clamp(14px, 1.46vw, 28px);
  line-height: 1.4; /* Figma: 39.2px / 28px = 1.4 */
  letter-spacing: -0.02em; /* Figma: -0.56 */
}

/* 슬라이드 3번 (Users) 스타일 - 슬라이드 2번과 동일 */
.hero-slide--users .hero-content__title {
  font-family: var(--font-pretendard);
  font-weight: 800; /* Figma: Pretendard ExtraBold */
  font-size: clamp(24px, 2.5vw, 48px);
  line-height: 1.4; /* Figma: 67.2px / 48px = 1.4 */
  letter-spacing: -0.02em; /* Figma: -0.96 */
}

.hero-slide--users .hero-content__description {
  font-family: var(--font-pretendard);
  font-weight: 500; /* Figma: Pretendard Medium */
  font-size: clamp(14px, 1.46vw, 28px);
  line-height: 1.4; /* Figma: 39.2px / 28px = 1.4 */
  letter-spacing: -0.02em; /* Figma: -0.56 */
}

/* Slider Indicators */
.slider-indicators {
  position: absolute;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--indicator-gap);
  z-index: 10;
}

.slider-indicator {
  width: var(--indicator-size);
  height: var(--indicator-size);
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.3;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  padding: 0;
}

.slider-indicator:hover {
  opacity: 0.7;
}

.slider-indicator--active {
  opacity: 1;
}