/* CTA Section Component */
.cta-section {
  width: 100%;
  background-color: #ffffff; /* Figma: 흰색 배경 */
  padding: var(--spacing-2xl) 0;
  min-height: auto; /* 반응형 적용 - desktop.css에서 관리 */
  margin-top: 0; /* 반응형 적용 - desktop.css에서 관리 */
}

.cta-section__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-2xl);
}

.cta-section__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xl);
  max-width: 1276px;
  margin: 0 auto;
}

.cta-section__image-area {
  flex: 0 0 588px; /* Figma: 이미지 영역 width 588px */
  position: relative;
  height: 444px; /* Figma: 이미지 영역 height 444px */
}

/* 데스크탑 이미지 컨테이너 (기본 숨김, 모바일용) */
.cta-section__desktop-images {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
}

/* 모바일 이미지 (기본 표시) */
.cta-section__mobile-images {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.cta-section__text-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.cta-section__title {
  font-family: var(--font-pretendard);
  font-weight: 700; /* 기본값, 데스크탑에서 유지 */
  font-size: 32px; /* 기본값, 데스크탑에서 36px로 오버라이드 */
  line-height: 20px; /* 기본값, 데스크탑에서 50.4px로 오버라이드 */
  letter-spacing: 0; /* 기본값, 데스크탑에서 -0.72px로 오버라이드 */
  color: #000000; /* 기본값, 데스크탑에서 #1a1d21로 오버라이드 */
  margin: 0;
}

.cta-section__description {
  font-family: var(--font-pretendard);
  font-weight: 500; /* 기본값, 데스크탑에서 400으로 오버라이드 */
  font-size: 18px; /* 기본값, 데스크탑에서 28px로 오버라이드 */
  line-height: 20px; /* 기본값, 데스크탑에서 39.2px로 오버라이드 */
  letter-spacing: 0; /* 기본값, 데스크탑에서 -0.56px로 오버라이드 */
  color: #000000; /* 기본값, 데스크탑에서 #1a1d21로 오버라이드 */
  margin: 0;
}

.btn--cta-primary {
  font-family: var(--font-pretendard);
  font-weight: 700; /* 기본값, 데스크탑에서 600으로 오버라이드 */
  font-size: 16px; /* 기본값, 데스크탑에서 24px로 오버라이드 */
  line-height: 19.09375px; /* 기본값, 데스크탑에서 33.6px로 오버라이드 */
  letter-spacing: 0;
  background-color: #4d4d4d; /* 기본값, 데스크탑에서 #0159fd로 오버라이드 */
  color: #ffffff;
  border: none;
  border-radius: 9.333333969116211px; /* 기본값, 데스크탑에서 1000px로 오버라이드 */
  padding: 20.5px 73px;
  width: 276px; /* 기본값, 데스크탑에서 200px로 오버라이드 */
  height: 60px; /* 기본값, 데스크탑에서 80px로 오버라이드 */
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn--cta-primary:hover {
  background-color: #3a3a3a; /* 기본값, 데스크탑에서 hover 색상 변경 */
}