body.landing_pages.test1 {
  --color-primary-50: #ffe0b2;
  --color-primary-100: #ffcc80;
  --color-primary-200: #ffb74d;
  --color-primary-500: #ff9800; /* Product A의 주색상 */
  --color-primary-700: #fb8c00;

  --color-accent-500: #4caf50; /* 초록색 강조색 */
  --color-text-base: #222222;
  --color-bg-default: #f5f5f5;
}
/* --- Test1 랜딩 페이지에만 필요한 추가 스타일 및 애니메이션 --- */

/* 히어로 섹션 배경 및 텍스트 스타일 */
.test1-hero-section {
  background-image: url("/assets/test1_hero_bg.jpg"); /* 랜딩 페이지 전용 배경 이미지 */
  background-size: cover;
  background-position: center;
  color: white; /* 텍스트는 흰색으로 */
  padding: 8rem 0; /* 상하 패딩 */
}

/* 섹션 제목에 애니메이션 적용 */
.test1-section-title {
  position: relative; /* 의사 요소를 위한 기준점 */
  padding-bottom: 0.5rem;
}

.test1-section-title::after {
  content: '';
  position: absolute;
  left: 50%; /* 중앙 정렬 */
  transform: translateX(-50%);
  bottom: 0;
  width: 50px; /* 초기 너비 */
  height: 4px;
  background-color: var(--color-accent-500); /* 강조색 사용 */
  border-radius: 2px;
  animation: expandLine 1s ease-out forwards; /* 애니메이션 적용 */
  animation-delay: 1.5s; /* 로드 후 지연 */
  opacity: 0; /* 시작 시 숨김 */
}

@keyframes expandLine {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100px; /* 최종 너비 */
    opacity: 1;
  }
}

/* CTA 버튼 애니메이션 (플로팅 효과) */
.test1-cta-button {
  animation: floatEffect 2s ease-in-out infinite; /* 무한 반복 플로팅 */
}

@keyframes floatEffect {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}