/* style-main.css */


/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:clamp(560px,84vh,820px);
  overflow:hidden;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  height: 90vh;
  word-break: keep-all;
}
.hero__bg{ position:absolute; inset:0; }

.hero__bg-item{
  position:absolute; 
  inset:0;
  opacity:0; 
  pointer-events:none;
}

.hero__bg-item.is-active{
  opacity:1; 
  pointer-events:auto;
}
.hero__bg-item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}


.hero__bg-item img{
  position:absolute; 
  inset:0;
  width:100%; 
  height:100%;
  object-fit:cover;

  /* ✅ 여기 추가 */
  transform-origin: center center;
  animation: heroBgZoom 3s ease-in-out infinite alternate;
      overflow: hidden;

}

/* 배경 줌 인/아웃 키프레임 */
@keyframes heroBgZoom {
  0% {
    transform: scale(1);    /* 원래 크기 */
  }
  100% {
    transform: scale(1.2);  /* 1.5배 확대 */
  }
}


/* 첫 번째 줄만 더 두껍게 (볼드 강조) */
.hero__desc-line:first-child {
  font-weight: 800;  /* 700~900 사이에서 원하는 값으로 조절해도 됨 */
}




/* hero__copy가 배경 위로 오도록 */
.hero__copy{
  position: relative;
  z-index: 2;

}



.hero__title{font-weight:400;font-size: clamp(28px,3.2vw,44px);line-height:0.3;transition:opacity .5s ease;letter-spacing: -0.5px;;margin: auto 0;padding-bottom: 20px;     font-family: "Noto Serif KR", serif;

  /* ✅ 추가 */
  opacity: 0;
  transform: translateY(16px);
  animation: heroTitleFade 0.4s ease-out 0.3s forwards;}
  @keyframes heroTitleFade {
    0% {
      opacity: 0;
      transform: translateY(16px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
.hero__title p {color: #10578d;}
.hero__desc{/* margin-top:18px; */font-size: 19.5px;line-height:1.7;transition:opacity .5s ease;letter-spacing: -0.5px;margin: auto 0;    font-weight: 500;position: relative;
  overflow: hidden;
  min-height: 3.4em; /* 줄 바뀔 때 높이 튀는 거 방지용, 필요시 조정 */}
.hero__desc strong {display: block; margin-bottom: 20px; font-weight: 700;}
.hero__desc span {display: block; margin-top: 20px;}

.hero__title .higligt{font-weight:400; color: #2086c8;

}


/* 교체될 한 줄 */
.hero__desc-line{
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  margin-bottom: 8px; /* 줄 사이 간격, 필요하면 조절 */
}

/* 활성화된 줄 */
.hero__desc-line.is-active{
  opacity: 1;
  transform: translateY(0);
}





.hero__content{
  position: relative;      /* 배경 위에 올라오도록 */
  z-index: 2;
  max-width: 1200px;
  width: min(1360px, 94%); /* ★ 헤더(.mhd__inner)와 동일한 폭 규칙 */
  margin: 100px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero__copy{
  flex: 0 0 35%;
}

.hero__doctors{
  flex: 0 0 40%;
  display: flex;
  justify-content: flex-end;
}

.hero__doctor-list{
  position: relative;      /* ★ 추가 */
  width: 420px; /* 겹칠 영역의 가로폭 — 필요시 조절 */
  height: 600px; /* 이미지 높이에 맞게 조절 */}

.hero__doctor{
  position: absolute;
  top: 8%;
  width: 320px;   /* 각 의사 카드의 가로폭 */
  height: 520px;  /* 카드 전체 높이(이미지 + 캡션) */
}



.hero__doctor:nth-child(1){
  left: -60%;        /* 첫 번째 원장 위치 */
  z-index: 2;     /* 앞쪽 */
}

.hero__doctor:nth-child(2){
  left: 20%;     /* 두 번째 원장 이미지가 겹쳐지도록 */
  z-index: 1;     /* 뒤쪽 */
}
.hero__doctor img{
  display: block;
  max-width: 400px; /* 필요에 따라 조절 */
  height: auto;
  margin: 0 auto;
}

.hero__doctor-caption{
  position: absolute;          /* ★ 추가 */
  bottom: 2%;
  left: 63%;
  transform: translateX(-50%); /* 가운데 정렬 */
  width: 100%;
  font-size: 22px;
  text-align: center;


}

.hero__doctor-caption span{
  font-weight: 700;
  color: #10578d;
}





/* 테마별 색상 */
.hero[data-theme="light"] .hero__title{
  color:#0f1012;
  text-shadow: 0px 2px 17px rgb(255 255 255);
} 
.hero[data-theme="light"] .hero__desc{
  color:#2b2e34;
  text-shadow:7px 7px 20px rgb(255 255 255 / 72%);
}
.hero[data-theme="dark"] .hero__title{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero[data-theme="dark"] .hero__desc{
  color:#f1f5f9;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}
@media(max-width:1024px){
  .hero{min-height: 80vh;}
  .hero__copy{ padding-top:92px; }
}


@media (max-width: 768px){

  /* 섹션 전체 높이/패딩 재정의 */
  .hero{
    position: relative;
    min-height: auto;
    height: auto;
    padding: 90px 0 40px;    /* 상단은 헤더 높이만큼 여유 */
    align-items: flex-start; /* 위에서부터 쌓이게 */
    min-height:720px;
  }

  /* 내용 레이아웃 : 위/아래 1열 */
  .hero__content{
    max-width: 1200px;
    width: min(1360px, 94%);
    margin: 0 auto;          /* 🔥 margin-top 없애기 (마진 붕괴 방지) */
    padding: 40px 0 30px;    /* 대신 안쪽 패딩으로 여백 주기 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }

  /* 텍스트 영역 */
  .hero__copy{
    flex: 0 0 auto;
    width: 100%;
    padding: 0 16px;
  }

  .hero__title{
        line-height: 0.5;
        padding-top: 58px;
  }

  .hero__desc{
    margin-top: 18px;
  }

  /* 원장님 영역 : 텍스트 아래에 위치 */
  .hero__doctors{
    flex: 0 0 auto;
    width: 100%;
    justify-content: center;
    margin-top: 200px;
    padding: 0 15px 10px;
    position: absolute;
    top: 50%;
    left: 12%;
  }

  /* 두 분 사진 나란히 */
  .hero__doctor-list{
    position: static;        /* 겹치지 않게 absolute 해제 */
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 420px;
    height: auto;
    top: 60%;
  }

  .hero__doctor{
    width: 187px;
    max-width: 343px;
    height: 262px;
    text-align: center;
  }

  .hero__doctor img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* 캡션을 사진 아래로 */
  .hero__doctor-caption{
    left: auto;
    transform: none;
    width: 100%;
    font-size: 14px;
    text-align: center;
  }

  .hero__doctor-caption span{
    display: inline-block;
    margin-left: 4px;
  }

  .hero__doctor:nth-child(1) {
    left: -18%;
    z-index: 1;
  }
  .hero__doctor:nth-child(2) {
    left: 25%;
    z-index: 1;

}
}


@media(max-width:480px){
  .hero__desc{/* margin-top:18px; */font-size: 18.5px;line-height:1.7;transition:opacity .5s ease;letter-spacing: -0.5px;margin: auto 0;}

}
@media(max-width:410px){
  .hero__desc{
    font-size: 15.5px;
  }
}

@media(max-width:360px){
  .hero__title{
    font-size: clamp(25px,3.2vw,44px);
  }
  .hero__desc{
    font-size: 13.5px;
  }
}

@media(max-width:320px){
  .hero__copy{padding-left:16px;padding-top: 0px;}
  .hero__copy::before{width: 3px;/* height: 330px; */}
  .hero__title{font-weight:400;font-size: clamp(23px,0.2vw,30px);line-height:1.35;transition:opacity .5s ease;letter-spacing: -1.2px;margin: auto 0;}
  .hero__desc{/* margin-top:18px; */font-size: 15.5px;line-height:1.7;transition:opacity .5s ease;letter-spacing: -0.5px;margin: auto 0;}

}