@charset "utf-8";

/* ============================================
   HERO TRAILER POPUP
   Ours, not the design's. Re-apply the three HTML
   fragments after every re-mirror (CLAUDE.md, Delta 6).

   Deliberately a separate file rather than an addition to the mirrored
   common.css: the overlay/close-button rules below are a copy of that file's
   `.popup-img` block (screenshot popup) with the class swapped, so if the
   design ever restyles its popup, diff the two and follow it here.
   ============================================ */
.popup-video {
  visibility: hidden;
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-video.is-open {
  visibility: visible;
  opacity: 1;
}

.popup-video .popup-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
}

/* 16:9 이므로 가로 폭만 제한하면 세로가 화면 밖으로 나간다. 뷰포트 높이에서
   닫기 버튼 자리를 뺀 만큼을 16/9로 환산해 폭 상한에 함께 건다.
   선언이 셋인 것은 폴백이다: min()을 모르는 파서는 첫 줄만, svh를 모르는
   파서는 둘째 줄까지 취한다. iOS에서 100vh는 주소창을 뺀 큰 뷰포트라
   실제보다 크게 잡히므로, 쓸 수 있으면 svh가 안전하다. */
.popup-video .popup-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1280px;
  max-width: calc(100% - 120px);
  max-width: min(calc(100% - 120px), calc((100vh - 200px) * 16 / 9));
  max-width: min(calc(100% - 120px), calc((100svh - 200px) * 16 / 9));
  -webkit-transform: translate(-50%, -50%) scale(0.94);
  transform: translate(-50%, -50%) scale(0.94);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
}

.popup-video.is-open .popup-inner {
  -webkit-transform: translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
}

.popup-video .popup-view {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--color-primary);
  background: #000;
}

.popup-video .popup-view iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 마케팅 동의 전에 iframe 대신 보이는 포스터 (쿠키 없는 i.ytimg.com 썸네일).
   누르면 동의 대화상자가 뜨고, 수락하면 그대로 재생된다 — ui.js:initTrailerPopup() */
.popup-video .popup-view iframe[hidden],
.popup-video .popup-poster[hidden] { display: none; }

.popup-video .popup-poster {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.popup-video .popup-poster > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-video .popup-poster .ico {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  object-fit: contain;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.popup-video .popup-poster:hover .ico,
.popup-video .popup-poster:focus-visible .ico {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

.popup-video .btn-popup-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
}

.popup-video .btn-popup-close::before,
.popup-video .btn-popup-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  margin: -1px 0 0 -15px;
  background: var(--color-text);
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.popup-video .btn-popup-close::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.popup-video .btn-popup-close::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.popup-video .btn-popup-close:hover::before,
.popup-video .btn-popup-close:hover::after { background: var(--color-primary); }

@media (max-width: 1024px) {
  .popup-video .popup-inner {
    max-width: calc(100% - 80px);
    max-width: min(calc(100% - 80px), calc((100vh - 160px) * 16 / 9));
    max-width: min(calc(100% - 80px), calc((100svh - 160px) * 16 / 9));
  }
}

@media (max-width: 768px) {
  .popup-video .popup-inner {
    max-width: calc(100% - 40px);
    max-width: min(calc(100% - 40px), calc((100vh - 140px) * 16 / 9));
    max-width: min(calc(100% - 40px), calc((100svh - 140px) * 16 / 9));
  }
  .popup-video .popup-view { border-width: 1px; }
  .popup-video .popup-poster .ico { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .popup-video .btn-popup-close { top: -44px; width: 32px; height: 32px; }
  .popup-video .btn-popup-close::before,
  .popup-video .btn-popup-close::after { width: 24px; margin: -1px 0 0 -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .popup-video,
  .popup-video .popup-inner { -webkit-transition: none; transition: none; }
  .popup-video .popup-inner { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
  .popup-video .popup-poster .ico { -webkit-transition: none; transition: none; }
}