.sec-hero{
  position:relative;
  overflow:hidden;
  background:var(--c-primary);
  color:#fff;
}

.sec-hero__track{position:relative}

.sec-hero__slide{
  position:relative;
  display:flex;align-items:center;
  min-height:620px;
  padding:80px 0;
}

/* 2장 이상 — 겹쳐 쌓기 */
.sec-hero.has-slider .sec-hero__slide{
  position:absolute;inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .7s ease;
}
.sec-hero.has-slider .sec-hero__slide:first-child{position:relative}
.sec-hero.has-slider .sec-hero__slide.is-active{
  opacity:1;
  pointer-events:auto;
  z-index:1;
}

/* 슬라이드 전환 */
.sec-hero--fx-slide.has-slider .sec-hero__slide{
  transform:translateX(40px);
  transition:opacity .6s ease, transform .6s ease;
}
.sec-hero--fx-slide.has-slider .sec-hero__slide.is-active{transform:translateX(0)}

.sec-hero__bg{
  position:absolute;inset:0;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
}
.sec-hero__bg::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));
}

.sec-hero__inner{
  position:relative;z-index:1;
  width:100%;
  max-width:var(--inner-w);
  margin:0 auto;
  padding:0 var(--inner-px);
}

.sec-hero__eyebrow{
  display:block;
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:18px;
}

.sec-hero__title{
  font-family:var(--f-head);
  font-size:52px;
  font-weight:var(--fw-head);
  line-height:1.28;
  letter-spacing:-.035em;
}

.sec-hero__desc{
  margin-top:20px;
  font-size:20px;
  line-height:1.65;
  opacity:.9;
  max-width:620px;
}

.sec-hero__actions{margin-top:38px}

.sec-hero__btn{
  display:inline-block;
  padding:16px 42px;
  background:#fff;
  color:var(--c-primary);
  border-radius:var(--btn-radius);
  font-size:var(--fs-body);
  font-weight:700;
  transition:var(--tr);
}
.sec-hero__btn:hover{background:var(--c-point);color:#fff}

/* 버튼 화살표 — 문구 뒤에 자동으로 붙는다 */
.sec-hero__btn{display:inline-flex;align-items:center}
.sec-hero__btn::after{
    content:"";
    width:6px;height:6px;
    margin-left:10px;
    border-top:1.5px solid currentColor;
    border-right:1.5px solid currentColor;
    transform:rotate(45deg);
    transition:transform .25s;
}
.sec-hero__btn:hover::after{transform:rotate(45deg) translate(2px,-2px)}

/* 화살표 */
.sec-hero__arrow{
  position:absolute;top:50%;z-index:3;
  width:48px;height:48px;
  transform:translateY(-50%);
  background:rgba(255,255,255,.15);
  border:0;border-radius:50%;
  cursor:pointer;
  transition:var(--tr);
}
.sec-hero__arrow:hover{background:rgba(255,255,255,.3)}
.sec-hero__arrow::before{
  content:'';
  position:absolute;top:50%;left:50%;
  width:10px;height:10px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
}
.sec-hero__arrow--prev{left:24px}
.sec-hero__arrow--prev::before{transform:translate(-40%,-50%) rotate(-135deg)}
.sec-hero__arrow--next{right:24px}
.sec-hero__arrow--next::before{transform:translate(-60%,-50%) rotate(45deg)}

/* ── 컨트롤 바 ─────────────────────────────
   DOM 은 모든 variant 공통. --a~d 는 도트만 남기고 숨긴다 */
.sec-hero__ctrl{
  position:absolute;bottom:32px;left:50%;z-index:3;
  display:flex;align-items:center;gap:14px;
  transform:translateX(-50%);
}
.sec-hero__toggle,
.sec-hero__count{display:none}

.sec-hero__dots{display:flex;gap:10px}
.sec-hero__dot{
  width:10px;height:10px;
  padding:0;
  background:rgba(255,255,255,.4);
  border:0;border-radius:50%;
  cursor:pointer;
  transition:var(--tr);
}
.sec-hero__dot.is-active{background:#fff;width:28px;border-radius:5px}

/* 스크롤 유도 — --e · --f 에서만 */
.sec-hero__scroll{display:none}

/* ── --e 전체화면 · --f 전체화면 영상 ─────────
   ⚠️ 레이아웃은 완전히 같다. 배경이 이미지냐 영상이냐만 다르다.
      규칙을 복제하지 않고 선택자를 함께 건다 — 한쪽만 고치는 사고를 막는다 */
.sec-hero--e .sec-hero__slide,
.sec-hero--f .sec-hero__slide{
  min-height:100svh;
  padding:120px 0 160px;
}

/* 투명 헤더와 함께 쓰면 헤더가 콘텐츠를 덮는다 */
.has-overlay-header .sec-hero--e .sec-hero__slide,
.has-overlay-header .sec-hero--f .sec-hero__slide{padding-top:160px}

.sec-hero--e .sec-hero__bg::after{
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.30) 45%,rgba(0,0,0,.65));
}

.sec-hero--e .sec-hero__eyebrow,
.sec-hero--f .sec-hero__eyebrow{letter-spacing:.32em;font-size:13px}

.sec-hero--e .sec-hero__title,
.sec-hero--f .sec-hero__title{font-size:clamp(38px,5.2vw,76px);line-height:1.14}

.sec-hero--e .sec-hero__desc,
.sec-hero--f .sec-hero__desc{margin-top:24px;font-size:20px}

.sec-hero--e .sec-hero__actions,
.sec-hero--f .sec-hero__actions{margin-top:44px;display:flex;gap:12px;flex-wrap:wrap}

/* 라운드 버튼 */
.sec-hero--e .sec-hero__btn,
.sec-hero--f .sec-hero__btn{
  padding:17px 40px;
  border-radius:999px;
  border:1px solid transparent;
}
.sec-hero--e .sec-hero__btn--fill,
.sec-hero--f .sec-hero__btn--fill{background:var(--c-point);color:#fff}
.sec-hero--e .sec-hero__btn--fill:hover,
.sec-hero--f .sec-hero__btn--fill:hover{
  background:var(--c-primary);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.sec-hero--e .sec-hero__btn--line,
.sec-hero--f .sec-hero__btn--line{
  background:transparent;color:#fff;
  border-color:rgba(255,255,255,.75);
}
.sec-hero--e .sec-hero__btn--line:hover,
.sec-hero--f .sec-hero__btn--line:hover{background:#fff;color:var(--c-primary);border-color:#fff}

/* 컨트롤 바 — 좌측 정렬 + 재생/정지 + 카운터 */
.sec-hero--e .sec-hero__ctrl{
  left:50%;bottom:56px;
  width:100%;
  max-width:var(--inner-w);
  padding:0 var(--inner-px);
  transform:translateX(-50%);
  justify-content:flex-start;
}
.sec-hero--e .sec-hero__toggle{
  position:relative;
  display:block;
  width:36px;height:36px;
  padding:0;
  background:rgba(255,255,255,.18);
  border:0;border-radius:50%;
  cursor:pointer;
  transition:var(--tr);
}
.sec-hero--e .sec-hero__toggle:hover{background:rgba(255,255,255,.34)}

/* 일시정지 아이콘 (막대 2개) */
.sec-hero--e .sec-hero__toggle::before,
.sec-hero--e .sec-hero__toggle::after{
  content:'';
  position:absolute;top:50%;
  width:3px;height:12px;
  margin-top:-6px;
  background:#fff;
}
.sec-hero--e .sec-hero__toggle::before{left:14px}
.sec-hero--e .sec-hero__toggle::after{right:14px}

/* 멈춘 상태 = 재생 아이콘 (삼각형) */
.sec-hero--e.is-paused .sec-hero__toggle::before{
  left:14px;
  width:0;height:0;
  margin-top:-6px;
  background:transparent;
  border-left:11px solid #fff;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.sec-hero--e.is-paused .sec-hero__toggle::after{display:none}

.sec-hero--e .sec-hero__count{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.sec-hero--e .sec-hero__count i{font-style:normal;opacity:.45}
.sec-hero--e .sec-hero__total{opacity:.6}

/* 스크롤 유도 */
.sec-hero--e .sec-hero__scroll,
.sec-hero--f .sec-hero__scroll{
  position:absolute;bottom:34px;left:50%;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transform:translateX(-50%);
}
.sec-hero--e .sec-hero__scroll-text,
.sec-hero--f .sec-hero__scroll-text{
  font-size:11px;font-weight:600;
  letter-spacing:.28em;
  opacity:.75;
}
.sec-hero--e .sec-hero__scroll-arrow,
.sec-hero--f .sec-hero__scroll-arrow{
  width:9px;height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
  animation:heroScroll 1.6s ease-in-out infinite;
}

/* ── --f 영상 전용 ────────────────────────
   ⚠️ 어둡게 처리를 __bg::after 로 못 한다. 영상이 그 위를 덮기 때문이다.
      슬라이드 자신의 ::after 로 영상 위에 깔고, 글자는 z-index 2 로 올린다 */
.sec-hero--f .sec-hero__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
}

.sec-hero--f .sec-hero__slide::after{
  content:'';
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.30) 45%,rgba(0,0,0,.65));
  pointer-events:none;
}

.sec-hero--f .sec-hero__inner{z-index:2}

/* ── 특징 아이콘 ───────────────────────── */
.sec-hero__features{
  display:flex;flex-direction:row;flex-wrap:wrap;
  align-items:flex-start;
  margin:26px 0 0;padding:0;
  list-style:none;
}
.sec-hero__feature{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
  padding:0 22px;
  font-size:12px;font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.22);
}
.sec-hero__feature:first-child{padding-left:0;border-left:0}
.sec-hero__feature svg{width:30px;height:30px;stroke-width:1.4}

@media (max-width:1024px){
  .sec-hero__features{margin-top:20px}
  .sec-hero__feature{padding:0 14px;font-size:10px;gap:7px}
  .sec-hero__feature svg{width:24px;height:24px}
}

/* 영상은 켄번즈를 쓰지 않는다 — 포스터가 확대되면 영상과 어긋난다 */
.sec-hero--f .sec-hero__slide.is-active .sec-hero__bg{animation:none}

/* 모바일 — 기본은 영상을 감추고 포스터만. video-mobile 이면 그대로 재생 */
@media (max-width:1024px){
  .sec-hero--f:not(.video-mobile) .sec-hero__video{display:none}
}

/* 모션 최소화 설정이면 영상을 안 튼다 */
@media (prefers-reduced-motion:reduce){
  .sec-hero--f .sec-hero__video{display:none}
}

@keyframes heroScroll{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.35}
  50%    {transform:rotate(45deg) translate(4px,4px);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .sec-hero--e .sec-hero__scroll-arrow,
  .sec-hero--f .sec-hero__scroll-arrow{animation:none}
}

@media (max-width:1024px){
  .sec-hero--e .sec-hero__slide,
  .sec-hero--f .sec-hero__slide{min-height:100svh;padding:100px 0 150px}

  .has-overlay-header .sec-hero--e .sec-hero__slide,
  .has-overlay-header .sec-hero--f .sec-hero__slide{padding-top:120px}

  .sec-hero--e .sec-hero__ctrl{bottom:100px}

  .sec-hero--e .sec-hero__btn,
  .sec-hero--f .sec-hero__btn{padding:14px 30px}

  .sec-hero--e .sec-hero__scroll,
  .sec-hero--f .sec-hero__scroll{bottom:26px}
}

/* --a  좌측 정렬 (기본) */

/* --b  중앙 정렬 */
.sec-hero--b .sec-hero__inner{text-align:center}
.sec-hero--b .sec-hero__desc{margin-left:auto;margin-right:auto}

/* --c  짧은 배너형 */
.sec-hero--c .sec-hero__slide{min-height:420px}
.sec-hero--c .sec-hero__title{font-size:40px}

/* --d  하단 정렬 */
.sec-hero--d .sec-hero__slide{align-items:flex-end;padding-bottom:110px}

/* 켄번즈 — 활성 슬라이드만 천천히 확대 */
.sec-hero__slide .sec-hero__bg{
  transform:scale(1);
  transition:transform .8s ease;
}
.sec-hero__slide.is-active .sec-hero__bg{
  animation:heroZoom 12s ease-out forwards;
}

@keyframes heroZoom{
  from{transform:scale(1)}
  to  {transform:scale(1.08)}
}

@media (prefers-reduced-motion:reduce){
  .sec-hero__slide.is-active .sec-hero__bg{animation:none}
}

@media (max-width:1024px){
  .sec-hero__slide{min-height:420px;padding:60px 0}
  .sec-hero__title{font-size:32px}
  .sec-hero__desc{font-size:16px;margin-top:16px}
  .sec-hero__actions{margin-top:28px}
  .sec-hero__btn{padding:14px 32px;font-size:var(--fs-sm)}
  .sec-hero--c .sec-hero__slide{min-height:320px}
  .sec-hero--c .sec-hero__title{font-size:28px}
  .sec-hero--d .sec-hero__slide{padding-bottom:80px}
  .sec-hero__arrow{display:none}
  .sec-hero__ctrl{bottom:20px}
}

@media (max-width:768px){
  .sec-hero__slide{min-height:360px}
  .sec-hero__title{font-size:26px}
  .sec-hero--e .sec-hero__title,
  .sec-hero--f .sec-hero__title{font-size:clamp(30px,8vw,44px)}
}