/*
 * 발행호 목록구성 토큰/게이트 스타일 (작업 97 §3.3 · §8.4).
 *
 * ── 가장 중요한 계약: 무설정 완전 무개입 ──────────────────────────────
 * 이 파일의 모든 규칙은 실제 설정이 있을 때만 붙는 data-* 속성 아래에 있다.
 * 설정이 없으면 서버가 속성 자체를 출력하지 않으므로 어떤 규칙도 매칭되지 않는다.
 * 그래서 `var(--wzl-*, 기본값)` 형태의 "항상 켜져 있는 fallback" 을 쓰지 않는다.
 * (fallback 방식은 토큰 부재 시에도 declaration 이 살아 있어 계산값을 바꿀 수 있다.)
 *
 * 의미 hook 자체(`[data-wzl-hero]`, `[data-wzl-media]`, `[data-wzl-copy]`, `[data-wzl-tools]`)
 * 에는 어떤 스타일도 주지 않는다. 항상 존재해도 시각 결과가 변하지 않아야 하기 때문이다.
 */

/* ── 히어로 기하 ───────────────────────────────────────────── */

body [data-wzl-hero][data-wzl-height] {
  min-block-size: var(--wzl-hero-min-height);
}

@media (max-width: 767px) {
  body [data-wzl-hero][data-wzl-height] {
    min-block-size: var(--wzl-hero-min-height-mobile, var(--wzl-hero-min-height));
  }
}

body [data-wzl-hero][data-wzl-width="full"] {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body [data-wzl-hero][data-wzl-width="contained"] {
  width: min(var(--wzl-hero-max-width), calc(100% - 48px));
  margin-inline: auto;
}

body [data-wzl-hero][data-wzl-radius] {
  overflow: hidden;
  border-radius: var(--wzl-hero-radius);
}

/* ── 미디어 표현 ───────────────────────────────────────────── */

/* Family A 는 ::before 가 배경을 그린다. 요소 미디어를 쓰는 스킨은 img/video 를 직접 제어한다. */
[data-wzl-hero][data-wzl-fit="cover"]::before { background-size: cover; }
[data-wzl-hero][data-wzl-fit="contain"]::before { background-size: contain; background-repeat: no-repeat; }
[data-wzl-hero][data-wzl-position]::before { background-position: var(--wzl-media-position); }

[data-wzl-hero][data-wzl-fit] [data-wzl-media] > img,
[data-wzl-hero][data-wzl-fit] [data-wzl-media] > video,
[data-wzl-hero][data-wzl-fit] [data-wzl-media] > picture > img {
  object-fit: var(--wzl-media-fit);
}

[data-wzl-hero][data-wzl-position] [data-wzl-media] > img,
[data-wzl-hero][data-wzl-position] [data-wzl-media] > video,
[data-wzl-hero][data-wzl-position] [data-wzl-media] > picture > img {
  object-position: var(--wzl-media-position);
}

/*
 * 영상 레이어. 스킨의 미디어 slot 자리를 그대로 쓰므로 자체 배치를 강제하지 않는다.
 * 요소는 <figure> 다 — mixed9 의 `.m9-release-billboard > div` 같은 직접 자식 selector 에
 * 걸리지 않아야 하기 때문이다. UA 기본 margin 은 반드시 제거한다.
 * 스킨 선택자(`body.wz-template--x .x__media`)가 더 구체적이라 배치는 스킨이 계속 소유한다.
 */
.wzl-media--video {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #05070c;
}

.wzl-media--video > img.wzl-media__poster,
.wzl-media--video > video,
.wzl-media--video > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* 재생 전까지는 포스터만 보인다(점진적 향상). 승격되면 JS 가 is-playing 을 붙인다. */
.wzl-media--video > iframe,
.wzl-media--video > video { opacity: 0; transition: opacity .35s ease; }
.wzl-media--video.is-playing > iframe,
.wzl-media--video.is-playing > video { opacity: 1; }

/* mixed9 처럼 배경을 CSS 가 소유하는 스킨에서 영상 레이어를 겹칠 때 쓴다. */
.wzl-media--overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── 오버레이 ──────────────────────────────────────────────── */

/*
 * 오버레이는 absolute 라 grid/flex 흐름에서 빠진다(= 암묵적 트랙이 생기지 않는다).
 * 다만 기준 상자가 필요하므로 오버레이가 설정된 히어로만 position:relative 로 만든다.
 * 이미 positioned 인 스킨(.listing-visual 등)에는 아무 변화가 없다.
 */
[data-wzl-hero][data-wzl-overlay] { position: relative; }

[data-wzl-hero][data-wzl-overlay] > .wzl-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--wzl-overlay-color, #05070c);
  opacity: var(--wzl-overlay-opacity, .45);
  backdrop-filter: blur(var(--wzl-overlay-blur, 0px));
}

/* 오버레이는 배경 미디어 위, 읽을 콘텐츠 아래에 있어야 한다. */
[data-wzl-hero][data-wzl-overlay] [data-wzl-copy],
[data-wzl-hero][data-wzl-overlay] [data-wzl-overlay-content] {
  position: relative;
  z-index: 2;
}

/* ── 텍스트 조판 ───────────────────────────────────────────── */

[data-wzl-hero][data-wzl-align="left"] [data-wzl-copy] { text-align: left; }
[data-wzl-hero][data-wzl-align="center"] [data-wzl-copy] { text-align: center; margin-inline: auto; }
[data-wzl-hero][data-wzl-align="right"] [data-wzl-copy] { text-align: right; margin-inline-start: auto; }

[data-wzl-hero][data-wzl-copy-width] [data-wzl-copy] { max-width: var(--wzl-copy-max-width); }
[data-wzl-hero][data-wzl-copy-width][data-wzl-align="center"] [data-wzl-copy] { margin-inline: auto; }

/* ── 모션 ──────────────────────────────────────────────────── */

/*
 * Family A의 ::before는 기본적으로 scale(1.02)다. 하나의 키프레임을 이미지 요소와
 * 공유하면 애니메이션 시작 때 1.02 → 1로 튀므로 렌더·미리보기 갱신 시 떨림처럼 보인다.
 * 배경형과 요소형의 시작 배율을 분리하고 translate3d로 안정적인 합성 레이어를 유지한다.
 */
@keyframes wzl-ken-burns-background {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to { transform: translate3d(0, 0, 0) scale(var(--wzl-motion-scale, 1.06)); }
}

@keyframes wzl-ken-burns-media {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, 0, 0) scale(var(--wzl-motion-scale, 1.06)); }
}

[data-wzl-hero][data-wzl-motion="ken_burns"]::before {
  transform-origin: center center;
  animation: wzl-ken-burns-background 20s cubic-bezier(.2, .65, .3, 1) 1 normal both;
  backface-visibility: hidden;
  will-change: transform;
}

[data-wzl-hero][data-wzl-motion="ken_burns"] [data-wzl-media] img {
  transform-origin: center center;
  animation: wzl-ken-burns-media 20s cubic-bezier(.2, .65, .3, 1) 1 normal both;
  backface-visibility: hidden;
  will-change: transform;
}

[data-wzl-hero].wzl-motion-paused::before,
[data-wzl-hero].wzl-motion-paused [data-wzl-media] img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  [data-wzl-hero][data-wzl-motion="ken_burns"]::before,
  [data-wzl-hero][data-wzl-motion="ken_burns"] [data-wzl-media] img { animation: none; }
}

/* 모션 일시정지 컨트롤. 미디어 영역 "밖" 에 두어 배경 aria-hidden 과 충돌하지 않게 한다. */
.wzl-motion-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  margin: 8px 0 0;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.wzl-motion-control:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wzl-motion-control__icon { font-size: 11px; }

.wzl-hero-copy__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin-top: 14px;
  padding: 8px 18px;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.wzl-hero-copy__cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── 목록 도구 ─────────────────────────────────────────────── */

/* 18개 템플릿의 도구 root가 모두 같은 의미 속성을 사용한다. */
body [data-wzl-tools][data-wzl-empty="1"] { display: none !important; }

body [data-wzl-tools][data-wzl-surface="transparent"] { background: transparent; border-color: transparent; }
body [data-wzl-tools][data-wzl-surface="subtle"] { background: rgba(127, 127, 127, .08); }
body [data-wzl-tools][data-wzl-surface="solid"] { background: var(--bg-secondary, rgba(127, 127, 127, .18)); }

body [data-wzl-tools][data-wzl-density="compact"] { padding-block: 10px; gap: 10px; }
body [data-wzl-tools][data-wzl-density="comfortable"] { padding-block: 26px; gap: 26px; }