/* =========================================================================
   히어로 배경 영상 (video/hero-loop.mp4, 1280x720 / 16:9)
   - 데스크톱: 히어로 전체를 덮는다. 고정 헤더 뒤까지 깔려 상단이 이어져 보인다.
   - 모바일  : 가로 16:9 원본을 세로 화면에 그대로 넣으면 좌우가 심하게 잘리므로,
               영상 영역을 9:16 상자로 잡아 위쪽에 두고 아래는 검정으로 넘긴다.
               (상자 아래 경계는 그라디언트로 흐려 이음매가 보이지 않게)
   - 영상 위 검정 반투명으로 로고·문구 가독성을 확보한다.
   - 히어로 높이는 영상 비율(16:9)에 맞춘 값과 100vh 중 작은 쪽을 최소로 삼는다.
     안의 콘텐츠가 더 길면 그만큼 자연히 늘어난다.

   이 연출을 빼려면: 이 파일과 index.html 의 .hero-bg-swap 블록만 지우면 된다.
   ========================================================================= */

.hero-bg-swap {
  position: absolute;
  inset: 0;            /* 헤더 뒤까지 덮는다 */
  z-index: 0;          /* .hero 배경 위, .hero-overlay 아래 (DOM 순서로 결정) */
  pointer-events: none;
  overflow: hidden;
  background: #000;    /* 영상 로드 전/디코딩 중 빈 화면 방지 */
}

.hero-bg-video {
  display: block;
  width: 100%;
  height: 100%;
  /* 가로를 꽉 채우고 남는 세로는 아래쪽에서만 잘린다 */
  object-fit: cover;
  object-position: center top;
}

/* 영상 위 검정 반투명 — 이 값만 조절하면 전체적으로 어두워지고 밝아진다 */
.hero-bg-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* =========================================================================
   데스크톱
   ========================================================================= */
@media (min-width: 769px) {
  /* 히어로 자체 배경은 검정만 남긴다 — 실제 화면은 위 영상이 그린다 */
  .hero {
    background-image: none;
    background-color: #000;
    /* 높이를 100vh 로 못 박지 않는다. 화면이 세로로 길면 히어로가 짧아져
       아래 섹션이 먼저 드러난다. 콘텐츠가 더 길면 min-height 이므로 늘어난다. */
    min-height: min(100vh, calc(100vw * 9 / 16));
  }

  /* 히어로 아래쪽을 검정으로 흐린다.
     - 히어로 하단 4줄 문구 블록이 시작되는 높이쯤(아래에서 약 220px)부터
       아주 약하게 시작해, 맨 아래에서 검정에 닿는다. (문구 시작 = 아래에서 약 140px)
     - 히어로 다음 섹션이 검정이라 이음매가 보이지 않고,
       흰 문구·카피라이트 가독성도 같이 올라간다.
     - 시작 지점을 바꾸려면 아래 180px 값만 조절하면 된다. */
  .hero-bg-shade {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.45) calc(100% - 180px),
      rgba(0, 0, 0, 0.70) calc(100% - 90px),
      #000 100%
    );
  }
}

/* =========================================================================
   모바일: 영상 영역을 9:16 상자로
   ========================================================================= */
@media (max-width: 768px) {
  .hero {
    /* 영상이 세로 키비주얼을 대신하므로 배경은 검정만 남긴다 */
    background-image: none;
    background-color: #000;
  }

  /* 모바일 전용 영상이 3:4(720×960)이므로 상자도 3:4 로 잡는다.
     가로 100% → 높이 = 가로 × 4/3. 위쪽에 붙이고 아래는 .hero 의 검정이 보인다.
     원본 비율과 같아서 좌우가 잘리지 않고 화질 손실도 없다. */
  .hero-bg-swap {
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100vw * 4 / 3);
  }

  /* 상자와 영상 비율이 같으므로 잘림 없이 그대로 채워진다 */
  .hero-bg-video {
    object-position: center center;
  }

  /* 상자 아래 경계를 흐려 검정으로 자연스럽게 넘긴다 */
  .hero-bg-shade {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.45) 62%,
      rgba(0, 0, 0, 0.85) 86%,
      #000 100%
    );
  }
}

/* =========================================================================
   모션 최소화(prefers-reduced-motion) 에 대해

   배경 영상은 이 설정과 무관하게 항상 재생한다 — 요청 사항.
   예전에는 여기서 영상을 숨기고 정지 이미지를 대신 깔았는데,
   윈도우 "애니메이션 효과 끄기"를 켜 둔 PC 에서 영상이 안 나오는 원인이었다.
   (같은 이유로 hero-video.js 에서도 영상 주소를 넣지 않았었다)

   스캔 리빌도 마찬가지로 항상 재생한다 — hero-fx.css 참고.
   ========================================================================= */