/* style-main.css */


/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:clamp(560px,84vh,820px);
  overflow:hidden;
  cursor:pointer;
  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;
  transform:scale(1.03);
  transition:opacity 1.2s ease, transform 3s ease;
}
.hero__bg-item.is-active{
  opacity:1; pointer-events:auto;
  transform:scale(1);
}
.hero__bg-item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

.hero__copy{
  position:relative;
  z-index:10;
  width:min(1360px,90%);
  margin:0 auto;
  /* padding-top:120px; */
  transition:color .5s ease;
}
.hero__title{font-weight:400;font-size: clamp(30px,3.2vw,44px);line-height:1.35;transition:opacity .5s ease;letter-spacing: -1.2px;margin: auto 0;}
.hero__desc{/* margin-top:18px; */font-size: 19.5px;line-height:1.7;transition:opacity .5s ease;letter-spacing: -0.5px;margin: auto 0;}
.hero__title .higligt{font-weight:400; color: #f47321;}
.hero__title .higligt2{font-weight:400; font-size: 20px; font-size: 19px;}


.hero[data-theme="light"] .hero__title{color:#0f1012;text-shadow: 0px 2px 17px rgb(255 255 255); font-size: 40px;} 
.hero[data-theme="light"] .hero__desc{ color:#2b2e34;text-shadow:7px 7px 20px rgb(255 255 255 / 72%); }
.hero[data-theme="light"] .hero__title .higligt{color: #f47321; font-weight: 700; font-size: 40px;}
.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); }
.hero[data-theme="dark"] .hero__title .higligt{color: #f5caaf; font-weight: 700;}


@media(max-width:1024px){
  .hero{min-height: 80vh;}
  .hero__copy{ padding-top:92px; }
}
.hero__copy{
  position:relative;
  padding-left: 52px; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}
.hero__copy::before{
  content:"";
  position:absolute;
  top: 0px;
  bottom:0;
  left:0;
  width: 6px;
  /* border-radius:3px; */
  transform-origin:top;
  transform:scaleY(1);
  transition:transform .6s ease, background-color .3s ease, opacity .3s ease;
  opacity:.95;
}

.hero[data-theme="light"] .hero__copy::before{
  background:linear-gradient(180deg, #f47321 0%, #f47321 100%);
}
.hero[data-theme="dark"] .hero__copy::before{
  background:linear-gradient(180deg, #f5caaf 0%, #f5caaf 100%);
}

.hero.is-switching .hero__copy::before{ transform:scaleY(0); }
.hero.is-switched .hero__copy::before{ transform:scaleY(1); }

@media(max-width:768px){
  .hero__copy{padding-left:16px;padding-top: 0px;}
  .hero__copy::before{width: 3px;/* height: 330px; */}
}

@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: 18.5px;
  }
    .hero[data-theme="light"] .hero__title{font-size: 30px;}
  .hero[data-theme="light"] .hero__title .higligt{font-size: 30px;}
  .hero__title .higligt2{font-size:16px;}
}

@media(max-width:360px){
  .hero__title{
    font-size: clamp(28px,3.2vw,44px);
  }
  .hero__desc{
    font-size: 18.5px;
  }
  .hero[data-theme="light"] .hero__title{font-size: 26px;}
  .hero[data-theme="light"] .hero__title .higligt{font-size: 28px;}
  .hero__title .higligt2{font-size:16px;}
}

@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(28px,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: 16.5px;line-height:1.7;transition:opacity .5s ease;letter-spacing: -0.5px;margin: auto 0;}

}


/* hero가 스크롤을 소비할 때(핀) 페이지 스크롤 잠금 */
html.hero-locked,
body.hero-locked {
  overflow: hidden;
  height: 100%;
}

/* 모바일에서 터치 스크롤이 밀고 내려가는 걸 막기 위해 */
#section-hero.is-pinned {
  touch-action: none;
}