/*
 * 휴플러스유의원 v25_tv.4
 * 신록 히어로에 메인·준메인·서브카피 위계를 적용한 테스트 스타일
 */

/* PC — 이미지 카드의 테두리와 그림자를 없애 페이지에 자연스럽게 연결 */
.hero{
  min-height:820px!important;
  background:#fff!important;
  border-bottom:1px solid rgba(8,75,49,.10)!important;
}
.hero:after{
  background:
    radial-gradient(circle at 78% 50%,rgba(104,184,91,.13),transparent 31%),
    linear-gradient(180deg,#fff 0%,#fbfdfb 100%)!important;
}
.hero-image{
  left:0!important;
  right:0!important;
  top:82px!important;
  bottom:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
.hero-image:after{
  background:
    linear-gradient(90deg,#fff 0%,rgba(255,255,255,.99) 31%,rgba(255,255,255,.88) 47%,rgba(255,255,255,.38) 64%,transparent 80%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;
}
.hero-image picture{
  position:absolute;
  inset:0;
  display:block;
}
.hero-image img{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:right center!important;
  filter:saturate(.9) contrast(1.01) brightness(1.02)!important;
}
.hero-copy{
  max-width:720px!important;
  padding:54px 0!important;
}
.hero-main-copy{
  max-width:none!important;
  margin:0 0 28px!important;
  font-size:clamp(52px,4.1vw,62px)!important;
  line-height:1.15!important;
  letter-spacing:-.052em!important;
}
.hero-main-line{display:block;color:var(--ink)!important}
.hero-main-line--lead{white-space:nowrap}
.hero-rest,.hero-you,.hero-space{
  color:var(--ink)!important;
  white-space:nowrap;
}
.hero-main-copy .hero-kanji{color:var(--pine)!important}
.hero-support-copy{
  margin:0 0 22px!important;
  color:var(--pine)!important;
  font-size:clamp(30px,2.35vw,34px)!important;
  font-weight:650!important;
  line-height:1.34!important;
  letter-spacing:-.035em!important;
}
.hero-support-copy strong{font-weight:800}
.hero-desc{
  max-width:650px!important;
  margin:0 0 30px!important;
  font-size:19px!important;
  line-height:1.78!important;
}
.hero-rest-phrase{white-space:nowrap}

/* 태블릿·모바일 — 신록을 배경으로 연결하되 텍스트 영역은 깨끗하게 확보 */
@media(max-width:980px){
  .hero{
    height:auto!important;
    min-height:max(860px,100svh)!important;
    padding:112px 0 78px!important;
    align-items:flex-start!important;
    background:#fff!important;
  }
  .hero:after{
    z-index:1!important;
    background:
      linear-gradient(180deg,#fff 0%,rgba(255,255,255,.99) 49%,rgba(255,255,255,.94) 68%,rgba(255,255,255,.58) 100%),
      linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.28))!important;
  }
  .hero-image{
    z-index:0!important;
    inset:76px 0 0!important;
    opacity:.9;
  }
  .hero-image:after{
    background:
      linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.28) 45%,rgba(255,255,255,.04) 100%),
      linear-gradient(90deg,rgba(255,255,255,.56),transparent 70%)!important;
  }
  .hero-image img{
    inset:auto -12% 0 auto!important;
    width:150%!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    filter:saturate(.92) contrast(1.01) brightness(1.03)!important;
  }
  .hero-copy{
    max-width:none!important;
    padding:28px 0 0!important;
  }
  .hero-main-copy{
    max-width:none;
    margin-bottom:22px!important;
    font-size:clamp(38px,9.7vw,43px)!important;
    line-height:1.16!important;
    letter-spacing:-.056em!important;
  }
  .hero-main-line--lead{white-space:normal}
  .hero-rest,.hero-you,.hero-space{display:block}
  .hero-support-copy{
    margin-bottom:18px!important;
    font-size:clamp(25px,6.7vw,28px)!important;
    line-height:1.35!important;
  }
  .hero-desc{
    max-width:none!important;
    margin-bottom:26px!important;
    font-size:17.5px!important;
    line-height:1.76!important;
  }
  .hero-actions{gap:10px!important}
  .hero .btn{
    min-height:58px!important;
    border-radius:9px!important;
    font-size:18px!important;
  }
}

@media(max-width:420px){
  .hero{
    min-height:max(900px,100svh)!important;
    padding-top:104px!important;
  }
  .hero-main-copy{font-size:clamp(37px,9.6vw,40px)!important}
  .hero-support-copy{font-size:25px!important}
  .hero-desc{font-size:17px!important}
}

@media(prefers-reduced-motion:reduce){
  .motion-on .hero-image{animation:none!important}
  .hero-image,.hero-image img,.hero-copy{
    transform:none!important;
    opacity:1!important;
  }
}