/* ==========================================================================
   히어로 라이브 — assets/js/live-player.js 가 .hero-lines 끝에 붙이는 줄
   style.css 는 재임포트 때마다 새로 쓰이므로 따로 둔다.
   ========================================================================== */

/* .hero-lines 는 justify-items: center 그리드라 폭을 잡아 주지 않으면 줄이
   내용 폭으로 줄어든다. 오버롤은 컨테이너 폭을 재서 레이아웃을 고르므로
   줄이 40px 로 줄어 가장 작은 레이아웃(cslw-ms)으로 떨어진다. */
.hero-live {
  width: 100%; max-width: 960px;
  margin: clamp(20px, 3vw, 32px) auto 0;
  /* .hero-lines · .hero-inner 의 글자 크기와 가운데 정렬이 플레이어 UI 로 새지 않게 */
  font-size: 1rem; text-align: left;
}

/* 플레이어 iframe 문서는 color-scheme 을 선언하지 않는데(light) 이 페이지는 :root 가 dark 다.
   둘이 다르면 브라우저가 iframe 바탕을 불투명한 흰색으로 칠해서, 확장뷰(.video-expanded)에서
   투명하게 비워 둔 위아래 레터박스가 흰색으로 보인다. iframe 쪽을 맞춰 주면 바탕이 투명해져
   뒤의 검은 바탕(전체화면에서는 플러그인의 #000)이 비친다. iframe 요소의 background 로는
   덮을 수 없다 — 흰 바탕은 iframe 문서가 그 위에 칠한다.
   #hero-live-player 로 좁히지 않는다: 모바일 커버의 '입장하기'로 body 에 뜨는 전체화면
   플레이어도 같은 페이지의 iframe 이라 같은 문제가 생긴다. */
.cloud-shoplive .player-iframe { color-scheme: normal; }

/* 데스크톱(FeaturedCampaignPlayer)에서는 영상만 16:9 로 줄을 꽉 채운다.
   모바일(뷰포트 480px 이하)은 오버롤이 MobileCampaignCover 를 그리므로 여기에 걸리지 않는다.
   이 판정은 플러그인이 마운트할 때 한 번만 한다 — 창 크기나 화면 방향을 바꿔도 다시 고르지 않는다.
   플러그인 CSS 가 뒤에 로드되고 클래스를 여러 겹 쓰므로 id 로 우선순위를 확보한다.

   데스크톱 전체화면(.sl-desktop-fullscreen)일 때는 이 덮어쓰기를 걸지 않는다. id 우선순위가
   플러그인의 전체화면 규칙(CUS-1054, 영상 박스 100% × 100%, 세로형은 가운데 9:16)까지 이겨서
   전체화면에서도 16:9 박스·모서리가 남기 때문이다. */
#hero-live-player .container-top-campaign { max-width: none; margin: 0; padding: 0; }

#hero-live-player .FeaturedCampaignPlayer:not(.sl-desktop-fullscreen),
#hero-live-player .FeaturedCampaignPlayer:not(.sl-desktop-fullscreen) .wrap-play-goods-list,
#hero-live-player .FeaturedCampaignPlayer:not(.sl-desktop-fullscreen) .wrap-center-campaign-detail,
#hero-live-player .FeaturedCampaignPlayer:not(.sl-desktop-fullscreen) .aspect-center-player {
  width: 100%; max-width: none; height: auto; max-height: none;
  margin: 0; padding: 0;
  background: none; border-radius: 0;
}

#hero-live-player .FeaturedCampaignPlayer:not(.sl-desktop-fullscreen) .aspect-center-player .inner-aspect-ratio {
  width: 100%; height: 0; padding: 56.25% 0 0; /* 16:9 */
  border-radius: 16px;
}
#hero-live-player .FeaturedCampaignPlayer:not(.sl-desktop-fullscreen) .wrap-center-player {
  inset: 0; width: 100%; height: 100%;
  border-radius: 16px;
}

/* 영상 외 UI — 방송 일시·제목, 상품 목록, 편성표.
   위 크기 규칙과 달리 전체화면을 빼지 않는다: 플러그인의 전체화면 규칙(CUS-1054)도 이 셋을
   숨기고 상품은 플레이어 안 버튼으로 연다. 여기서 빼도 전체화면 모습은 같다. */
#hero-live-player .FeaturedCampaignPlayer .wrap-live-desc,
#hero-live-player .FeaturedCampaignPlayer .wrap-displaying-list,
#hero-live-player .FeaturedCampaignPlayer .wrap-calendar { display: none; }

/* ==========================================================================
   플레이어 무대 — 쇼타임 스테이지
   섹션들의 "Showtime Gradient"(검정 → Live Red)를 뒤집어 프레임 윗변을 Live Red 로 켜고,
   아래로 갈수록 헤어라인으로 사그라드는 링을 두른다. 위·아래로 스포트 글로우를 번지게 해
   무대 위 화면처럼 띄우고, 윗변 가운데에 GNB 칩과 같은 모양의 배지를 걸쳐 시청 지점을 알린다.
   링은 방송 상태와 관계없이 4.8초 주기로 숨 쉬듯 천천히 밝아졌다 어두워진다.
   배지·링은 클릭을 막지 않는다.
   데스크톱 플레이어와 모바일 커버(뷰포트 480px 이하) 둘 다 같은 무대에 올린다. 플러그인이 아직
   그리지 않았거나 실패하면 :has 가 맞지 않아 아무 장식도 나오지 않는다.
   ========================================================================== */
.hero-live:has(.FeaturedCampaignPlayer, .MobileCampaignCover) {
  position: relative; isolation: isolate;
  margin-top: clamp(40px, 4.4vw, 56px);   /* 배지 절반이 프레임 위로 올라온다 */
  border-radius: 16px;   /* 데스크톱 영상 박스 모서리 */
  /* 아래 글로우는 .hero 의 overflow: hidden 에 하단 여백(clamp(56px, 8vw, 96px)) 끝에서 잘린다.
     흐림을 여백의 0.91 배로 묶어 그 경계에 닿기 전에 0 으로 사그라들게 한다 — 더 넓으면
     히어로와 #intro 사이에 붉은 가로선이 남는다(모바일에서 특히 보인다). */
  box-shadow:
    0 -28px 90px -48px rgba(234, 21, 37, 0.65),
    0 40px clamp(51px, 7.3vw, 87px) -40px rgba(234, 21, 37, 0.5);
}

/* .hero-live 는 position: relative 라 문구 줄보다 나중에 칠해져, 위 글로우가 바로 위 문구
   글자에 붉은 기를 얹는다. 문구 줄을 한 층 위로 올린다 — 플레이어와 겹치지 않아 클릭은 그대로다. */
.hero-lines:has(.hero-live .container-top-campaign) > p { position: relative; z-index: 1; }

/* 모바일 커버는 플러그인이 모서리를 12px 로 그린다 — 링·글로우가 카드에 딱 붙도록 맞춘다 */
.hero-live:has(.MobileCampaignCover) { border-radius: 12px; }

/* 그라데이션 링 — 위는 Live Red, 아래로 갈수록 페이지 헤어라인 */
.hero-live:has(.FeaturedCampaignPlayer, .MobileCampaignCover)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(234, 21, 37, 0.95) 0%, rgba(234, 21, 37, 0.28) 36%, var(--line-dark) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: hero-live-breathe 4.8s ease-in-out infinite;
}

/* 큰 글로우(box-shadow)를 움직이면 매 프레임 다시 그리므로 1px 링의 opacity 만 움직인다.
   0%·100% 를 가장 밝게 둬서, 모션 줄이기 설정(style.css 가 애니메이션을 곧바로 끝낸다)에서도
   링이 켜진 채로 멈춘다. */
@keyframes hero-live-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* 배지 — .gnb-chip 과 같은 알약, 점은 배경으로 그린다 */
.hero-live:has(.FeaturedCampaignPlayer, .MobileCampaignCover)::after {
  /* 장식이라 스크린리더에는 읽히지 않게 대체 텍스트를 비운다. 이 문법을 모르는 브라우저는
     두 번째 선언을 통째로 버리므로 첫 줄이 남는다. */
  content: "WATCH LIVE";
  content: "WATCH LIVE" / "";
  position: absolute; top: 0; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  pointer-events: none; white-space: nowrap;
  padding: 7px 14px 7px 28px; border-radius: 999px;
  border: 1px solid rgba(234, 21, 37, 0.6);
  background: radial-gradient(circle at 15px 50%, var(--brand) 0 3.5px, transparent 4px), var(--void);
  font-family: var(--label); font-size: 0.6875rem; font-weight: 700; line-height: 1;
  letter-spacing: 0.16em; color: var(--on-dark-1);
}