/* Why Section Component */
.why-section {
  width: 100%;
  padding: clamp(60px, 6.25vw, 120px) 0; /* Figma: 상하 패딩 스케일링 */
  background-color: #ffffff;
  min-height: auto;
  position: relative; /* 구분선 위치 지정을 위해 */
}

.why-section__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative; /* 구분선 위치 지정을 위해 */
}

/* 구분선 (컨테이너 상단에 붙음) */
.why-section__container::before {
  content: '';
  position: absolute;
  top: 0; /* 컨테이너 상단에 붙음 */
  left: 50%;
  transform: translateX(-50%);
  width: 2px; /* 구분선 굵기 증가 */
  height: clamp(30px, 3.13vw, 60px); /* Figma: 높이 60px @1920px */
  background-color: #1a1d21;
}

/* 섹션 제목 */
.why-section__title {
  font-family: var(--font-montserrat); /* Figma: Montserrat */
  font-weight: 800; /* Figma: Montserrat ExtraBold */
  font-size: clamp(14px, 1.46vw, 28px); /* Figma: 28px @1920px */
  line-height: clamp(19.6px, 2.04vw, 39.2px); /* Figma: 39.2px @1920px */
  letter-spacing: 0; /* Figma: 0 */
  color: #1a1d21; /* Figma: #1a1d21 */
  margin: 0;
  margin-top: clamp(80px, 8.33vw, 160px); /* Figma: 구분선(17742)에서 제목(17902)까지 160px */
  text-align: center; /* Figma: 중앙 정렬 */
}

/* 섹션 헤딩 */
.why-section__heading {
  font-family: var(--font-pretendard);
  font-weight: 700; /* Figma: Pretendard Bold */
  font-size: clamp(22px, 2.29vw, 44px); /* Figma: 44px @1920px */
  line-height: clamp(30.8px, 3.21vw, 61.6px); /* Figma: 61.6px @1920px */
  letter-spacing: clamp(-0.44px, -0.046vw, -0.88px); /* Figma: -0.88px @1920px */
  color: #1a1d21; /* Figma: #1a1d21 */
  text-align: center; /* Figma: 중앙 정렬 */
  margin: 0;
  margin-top: clamp(33.5px, 3.49vw, 67px); /* Figma: 제목(17902)에서 헤딩(17969)까지 67px */
  max-width: 100%; /* 제한 제거 */
}

/* 섹션 설명 */
.why-section__description {
  font-family: var(--font-pretendard);
  font-weight: 400; /* Figma: Pretendard Regular */
  font-size: clamp(14px, 1.46vw, 28px); /* Figma: 28px @1920px */
  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: #1a1d21; /* Figma: #1a1d21 */
  text-align: center; /* Figma: 중앙 정렬 */
  margin: 0;
  margin-top: clamp(39px, 4.06vw, 78px); /* Figma: 헤딩(18047)에서 설명(18125)까지 78px */
  max-width: 100%; /* 제한 제거 */
}

/* Why Image Section (분리된 이미지 영역) */
.why-image-section {
  width: 100%;
  background-color: #e6e6e6;
  background-image: url('../../images/pages/doctors/doctors-banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 1; /* Figma: 1920px / 480px = 4:1 비율 */
  min-height: 0; /* aspect-ratio가 작동하도록 */
  padding: 0; /* 데스크탑에서 padding 제거 (높이를 정확히 맞추기 위해) */
  gap: var(--spacing-lg);
  position: relative;
}

/* 60% 불투명도 오버레이 */
.why-image-section__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.why-image-section__background {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 배경색은 why-image-section에 적용 */
}

.why-image-section__placeholder {
  font-family: var(--font-pretendard);
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  color: var(--color-text-primary);
  text-align: center;
  /* 나중에 이미지로 교체될 영역 */
}

.why-image-section__text {
  font-family: var(--font-pretendard);
  font-weight: 700;
  font-size: 36px;
  line-height: 43px;
  color: #ffffff; /* 배경 이미지 위에서 가독성을 위해 흰색 */
  text-align: center;
  margin: 0;
  max-width: var(--container-max-width);
  padding: 0 var(--spacing-2xl);
  width: 100%;
  position: relative;
  z-index: 1; /* 오버레이 위에 표시 */
}