/* 모바일/기본값: 기존 그대로(원하면 조정) */
:root{
  --hero-base: 60vh;                               /* 영상 높이 */
  --hero-extra: calc(var(--hero-base) * 0.4);
}

/* PC 전용: 비디오 70vh, 공백 = 비디오의 20% (=14vh) */
@media (min-width: 768px){
  :root{
    --hero-base: 70vh !important;
    --hero-extra: calc(var(--hero-base) * 0.2) !important;
  }
}
/* PC전용 헤더 높이 */
@media (min-width: 768px){
  :root{
    --hero-base: 70vh !important;                             /* 비디오 70% */
    --hero-extra: calc(var(--hero-base) * 0.2) !important;    /* 공백 20% */
    --header-h:  calc(var(--hero-base) * 0.1) !important;     /* ⬅ 헤더 = 비디오의 10% */
  }
}


  /* 히어로 전체 높이를 '영상 + 추가영역'으로 확보 */
  .hero{
    position: relative !important;
    min-height: calc(var(--hero-base) + var(--hero-extra)) !important;
    padding-bottom: var(--hero-extra) !important; /* 하단 여백만 늘림 */
    overflow: visible !important;
  }

  /* 섹션을 꽉 채우던 요소들을 '위쪽 base 높이'에만 머물도록 강제 */
  .hero .hero-video,
  .hero .hero-overlay,
  .hero .hero-content,
  .hero .hero-slide{
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: var(--hero-base) !important;
    max-height: var(--hero-base) !important;
  }

  /* 비디오 기본 맞춤 */
  .hero .hero-video{
    width: 100% !important;
    object-fit: cover !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  /* 오버레이와 텍스트가 비디오 위로 */
  .hero .hero-overlay{ z-index: 1 !important; }
  .hero .hero-content,
  .hero .hero-slide{ z-index: 2 !important; }

  /* 스크롤/포지셔닝 충돌 방지용 투명 spacer (시맨틱 영향 없음) */
  .hero::after{
    content: "" !important;
    position: static !important; /* 레이아웃 박스에 포함 */
    display: block !important;
    height: var(--hero-extra) !important;
    pointer-events: none !important;
  }

  /* 반응형 미세 조정 (모바일에서 base 살짝 낮춤 원하면 주석 해제)
  @media (max-width: 768px){
    :root{ --hero-base: 56vh; }
  }
  */