/* video — 유튜브 파사드. 이 블록(과 youtube 블록)에서 쓰는 스타일.
   블록이 실제로 그려질 때만 로드된다 (inc/render.php).

   유튜브는 파사드로 넣는다 — 누르기 전에는 썸네일 한 장뿐이라
   모바일에서 굳이 감출 이유가 없다.
   썸네일은 YouTube 가 주는 원본(i.ytimg.com)을 그대로 쓰고, 16:9 칸에 맞추는 것은 CSS(object-fit)로만 한다.
   (데모에서 팔레트 토큰으로 옮겼다 — 테마의 #000 · rgba · #fff 를 --c-black · --nb-scrim · --c-white 로) */

.nb-video {
  position: relative; aspect-ratio: 16/9; background: var(--c-black);
  border-radius: var(--nb-r); overflow: hidden;
}
.nb-video__play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; background: none; cursor: pointer;
}
.nb-video__play img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 썸네일 위의 초점 — 사진 위라 95 의 검은 점선이 묻힌다. 흰 테로 */
.nb-video__play:focus-visible { outline: 2px solid var(--c-white); outline-offset: -6px; }
/* 재생 표시는 그림이다 — 너비 · 높이와 삼각형 치수는 고정값으로 둔다. */
.nb-video__icon {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3rem; height: 2.1rem; border-radius: var(--nb-r); background: var(--nb-scrim);
}
.nb-video__play:hover .nb-video__icon { background: var(--c-black); }
.nb-video__icon::after {
  content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%);
  border-left: .75rem solid var(--c-white);
  border-top: .45rem solid transparent; border-bottom: .45rem solid transparent;
}
.nb-video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 넓어지면 표시만 키운다. 둥글기는 기본값(--nb-r)을 그대로 쓴다. */
@container nb-block (min-width: 640px) {
  .nb-video__icon { width: 4rem; height: 2.8rem; }
  .nb-video__icon::after {
    border-left-width: 1rem; border-top-width: .6rem; border-bottom-width: .6rem;
  }
}

/* 영상이 본문 폭을 넘어 커질 이유는 없다 */
@container nb-block (min-width: 1024px) {
  .nb-video { max-width: 880px; }
}