/* =========================================================
   hero2 메인 슬라이더 — 오버레이 + 캡션(h2/h3) 편집 전용
   · index2.html 에서만 사용 / 값 비교하며 직접 조정하는 파일
   ========================================================= */

/* ── 1) 이미지 오버레이 (색상 · 투명도) ──
   rgba(R, G, B, A) → R,G,B=색상 / A=투명도(0~1)
   예) 진한파랑 rgba(0,62,107,0.3) · 검정 rgba(0,0,0,0.4) */
.hero-swiper--simple .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(54, 54, 54, 0.4); /* ← 색상·투명도 수정 */
}

/* ── 2) 캡션 공통 (위치 · 색상 · 정렬) ── */
.hero2-cap {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 34%; /* 세로 위치 (기존 24% → 10% 하향) */
  width: 100%;
  padding: 0 6%; /* 좌우 여백 */
  color: #fff; /* 글자색(밝은 색) */
  text-align: center; /* 가운데 정렬 */
  text-shadow: 0 0.2rem 1rem rgba(0, 30, 60, 0.35);
}

/* ── 3) h2 (큰 제목) ── */
.hero2-cap h2 {
  font-size: 60px; /* 크기 */
  font-weight: 700; /* 굵기 */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ── 4) h3 (보조 문구) ── */
.hero2-cap h3 {
  margin-top: 6rem; /* h2 와의 간격 */
  font-size: 30px; /* 크기 */
  font-weight: 400; /* 굵기 */
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* ── 5) CTA 버튼 (진료예약 · 오시는 길) ──
   슬라이드 하단 기준 30% 위치에 고정 배치 */
.hero2-cta {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 30%; /* 아래쪽 기준 세로 위치 */
  width: 100%;
  padding: 0 6%;
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  text-shadow: none;
}

/* ── 6) 모바일 (≤768px) ── */
@media (max-width: 768px) {
  .hero2-cap {
    top: 24%;
    padding: 0 6%;
  }
  .hero2-cap h2 {
    font-size: 30px;
  }
  .hero2-cap h3 {
    margin-top: 2.4rem;
    font-size: 17px;
  }
  .hero2-cta {
    bottom: 30%;
    gap: 1rem;
  }
}