@charset "UTF-8";

/* ===== HERO / SLIDES ===== */
.hero{
  position: relative;
  /* ✅ 모든 섹션과 동일하게: 별도 보정 없이 100svh */
  min-height: 100svh;
  overflow: hidden;
}

/* 슬라이드 베이스 */
.hero .slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 8.5vw;
  z-index: 0;
}
.hero .slide.is-active{ opacity: 1; }

.hero .slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  /* 좌측 텍스트 가독성 그라데이션 */
  background:linear-gradient(
    90deg,
    rgba(8,18,28,.65) 0%,
    rgba(8,18,28,.50) 28%,
    rgba(8,18,28,.18) 56%,
    rgba(8,18,28,0) 82%
  );
}

/* 슬라이드 안 텍스트 */
.hero .content{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0;
}

.hero .eyebrow{
  opacity:.9; font-weight:700; letter-spacing:.06em;
  margin-bottom:.35rem; font-size:.92rem;
}

.hero .content h1{
  font-size:3rem; line-height:1.22; margin:.25rem 0 1.15rem;
}

.hero .content p{
  color:#cfd6de; margin:0 0 1.9rem; line-height:1.75; font-size:1rem;
}

.hero .btn{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:12px 20px; border:2px solid #fff; border-radius:999px;
  color:#fff; text-decoration:none; font-weight:700; transition:.25s;
}
.hero .btn::before{
  content:""; width:34px; height:34px; border:2px solid #fff; border-radius:50%; display:inline-block;
}
.hero .btn::after{ content:"→"; font-weight:800; }
.hero .btn:hover{ background:#fff; color:#000; }

/* 인디케이터 */
.hero .dots{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; gap:6px; z-index:3;
}
.hero .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--dot); opacity:.75; border:0; cursor:pointer;
}
.hero .dot.is-active{ background:var(--dot-active); opacity:1; }

/* 우측 진행바 */
.hero .right-rail{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:1px; height:36vh; background:rgba(255,255,255,.22); z-index:3;
}
.hero .right-rail .progress{
  position:absolute; left:0; bottom:0; width:100%; height:0; background:#fff; will-change:height;
}
.hero .rail-label{
  position:absolute; right:-44px; top:50%;
  transform:translateY(-50%) rotate(90deg);
  letter-spacing:.24em; font-size:.64rem; color:#d5dde6; opacity:.7; white-space:nowrap;
}

/* 반응형 */
@media (max-width:768px){
  .hero .slide{ padding-left:6vw; justify-content:center; text-align:center; }
  .hero .content h1{ font-size:2.1rem; }
  .hero .content p{ font-size:.95rem; }
  .hero .right-rail{ display:none; }
}