/* =============================================================
   히어로 — 영상 4개를 이어 붙인 한 개 파일, 챕터 3개
   ============================================================= */
.hero{
  position:relative;background:var(--load);color:#fff;overflow:hidden;
  height:92vh;min-height:560px;max-height:940px;
}
@media (max-width:767px){
  .hero{height:76svh;min-height:440px}
}

.hero__media{position:absolute;inset:0}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);
}
.hero__video{opacity:0;transition:opacity var(--d-settle) var(--e-out)}
.hero.is-playing .hero__video{opacity:1}

/* 덮개 : 원본과 같은 균일한 검정 40% */
.hero__scrim{position:absolute;inset:0;background:rgba(0,0,0,.4)}

.hero__inner{
  position:absolute;inset:0;display:flex;align-items:center;
  width:92%;max-width:var(--wrap-wide);margin-inline:auto;
  padding-top:var(--header-h);      /* 떠 있는 헤더만큼 내려 가운데를 맞춥니다 */
}
@media (max-width:767px){ .hero__inner{align-items:flex-end;padding-bottom:132px} }

.hero__copy{max-width:700px;padding-right:12px}

/* 윗줄 : 원본 17px · 자간 .03em · 대문자 · 아래 여백 10px */
.hero__kicker{
  font-family:var(--f-latin);font-weight:var(--w-body);font-size:17px;line-height:1.4;
  letter-spacing:.03em;text-transform:uppercase;color:#fff;margin-bottom:10px;
}
/* 제목 : 원본 68px · 행간 1 · 자간 .03em */
.hero__title{
  font-family:var(--f-display);font-weight:var(--w-display);
  font-size:clamp(30px,4.8vw,68px);line-height:1;letter-spacing:.03em;
}
/* 부제 : 원본 18px · 행간 1.3 */
.hero__desc{
  margin-top:10px;font-size:18px;line-height:1.3;letter-spacing:.03em;
  color:var(--on-dark-80);max-width:34em;
}

/* 버튼 두 개 : 원본 12px · 최소 폭 180 · 좌우 여백 15 · 위 여백 10 */
.hero__actions{display:flex;flex-wrap:wrap;margin-top:5px}
.hero__btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-width:180px;margin:10px 15px 0 0;padding:10px 15px;
  font-weight:var(--w-bold);font-size:12px;line-height:1.4;letter-spacing:.03em;
  color:#fff;border:1px solid #fff;background:none;overflow:hidden;isolation:isolate;
  transition:color var(--d-switch) var(--e-out);
}
.hero__btn::before{
  content:'';position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);z-index:-1;
  transition:width var(--d-switch) var(--e-out);
}
.hero__btn:hover::before,.hero__btn:focus-visible::before{width:100%}
.hero__btn:hover,.hero__btn:focus-visible{color:var(--ink)}

@media (max-width:599px){
  .hero__kicker{font-size:11px;letter-spacing:.05em;margin-bottom:8px}
  .hero__desc{font-size:15px;margin-top:8px}
  .hero__btn{min-width:125px;padding:11px 17px;font-size:11px;letter-spacing:.05em;margin-right:10px}
}

/* 제목 교체 : 같은 자리에서 위로 올라오며 바뀝니다 */
.hero__copy>*{transition:opacity var(--d-enter) var(--e-out),transform var(--d-enter) var(--e-out)}
.hero__copy.is-swap>*{opacity:0;transform:translateY(12px)}
.hero__copy.is-hidden{opacity:0;transform:translateY(8px);pointer-events:none}

/* --- 챕터 바 : 원본처럼 히어로 하단 --- */
.chapters{position:absolute;left:0;right:0;bottom:0;padding:0 0 18px;z-index:5}
.chapters__list{
  display:flex;gap:clamp(8px,2vw,24px);
  width:80%;max-width:var(--wrap);margin-inline:auto;
}
.chapters__item{flex:1 1 0;min-width:0}
.chapters__btn{
  display:block;width:100%;text-align:center;color:var(--on-dark-60);
  transition:color var(--d-hover) var(--e-out);
}
.chapters__item.is-on .chapters__btn,.chapters__btn:hover{color:#fff}
.chapters__label{
  display:block;padding:8px 4px;
  font-weight:var(--w-bold);font-size:var(--t-label);letter-spacing:-.01em;
}
.chapters__bars{display:flex;gap:4px}
.chapters__bar{position:relative;flex:1 1 0;height:2px;background:rgba(255,255,255,.4);overflow:hidden}
.chapters__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent)}

@media (max-width:767px){
  .chapters{padding-bottom:14px}
  .chapters__list{width:92%;gap:8px}
  .chapters__label{font-size:12px;padding:6px 2px}
  .chapters__bar{height:3px}
}

/* 소리·모션 줄이기 상태에서는 포스터만 */
.hero.is-static .hero__video{display:none}