/* 영상 한 편 — 정지 그림이 먼저, 영상이 나중
   ─────────────────────────────────────────────────────────────────────
   🔴 «영상이 없어도 화면이 비지 않는다» 가 이 규칙표의 전부다.
      정지 그림이 늘 자리를 잡고 있고, 영상이 오면 그 위를 덮는다. */

.gl-media { position: relative; margin: 0; }

.gl-video-el {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md, 18px);
  background: var(--chip);
  /* 정지 그림 위에 겹쳐 선다 */
  position: relative;
  z-index: 1;
}

/* 영상 뒤에 늘 서 있는 정지 그림.
   자동 재생이 막히거나(휴대폰 절전 · 데이터 절약) 영상이 안 오면 이것이 보인다. */
.gl-media-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-md, 18px);
  z-index: 0;
}

/* ── 유튜브 — 누르기 전에는 그림 한 장 ─────────────────────────────
   처음부터 유튜브 틀을 넣어 두면 «보기만 해도» 유튜브가 사람을 추적한다.
   누르는 순간에 넣는다. 그때까지는 그림과 재생 표시뿐이다. */
.gl-video-yt {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-md, 18px);
  overflow: hidden;
  background: var(--chip);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.gl-video-yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-video-yt:focus-visible { outline: 3px solid var(--accent, #ff5a1f); outline-offset: 3px; }

.gl-video-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.2s ease, transform 0.2s ease;
}
.gl-video-play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-42%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.gl-video-yt:hover .gl-video-play { background: var(--accent, #ff5a1f); transform: translate(-50%, -50%) scale(1.06); }

.gl-video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-md, 18px); display: block; }

/* ── 휴대폰 ────────────────────────────────────────────────────────
   🔴 저절로 흐르는 영상을 내보내지 않는다. 보는 분의 데이터를 우리가
      말없이 쓰는 것이 되기 때문이다. 정지 그림만 보인다.
      «누르면 재생» 으로 두신 것은 그대로 둔다 — 그건 본인이 누른 것이다. */
@media (max-width: 720px) {
  .gl-video-el[autoplay] { display: none; }
  .gl-video-el[autoplay] + .gl-media-poster { position: relative; height: auto; }
}

/* 움직임을 원하지 않는다고 기기에 적어 두신 분 — 같은 처리 */
@media (prefers-reduced-motion: reduce) {
  .gl-video-el[autoplay] { display: none; }
  .gl-video-el[autoplay] + .gl-media-poster { position: relative; height: auto; }
}

/* ── 여러 편을 늘어놓을 때 (게시판 listStyle: video) ────────────────
   카드 안의 재생 부분은 위 .gl-video-yt 를 그대로 쓴다. */
.gl-vgrid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.gl-vgrid > *{ min-width: 0; }

.gl-vcard{ display: flex; flex-direction: column; gap: 14px; }
.gl-vcard-title{
  font-size: 17px; font-weight: 700; line-height: 1.45;
  letter-spacing: -0.01em; margin: 0; color: var(--fg);
}
.gl-vcard-desc{ font-size: 14px; line-height: 1.7; color: var(--muted-2); margin: 6px 0 0; }

@media (max-width: 760px){ .gl-vgrid{ grid-template-columns: 1fr; gap: 24px; } }

/* ── 대표 한 편 + 아래 목록 (게시판 위젯 «여러 편일 때 = 대표 + 목록») ─────
   대표 = 맨 앞에 고정한 영상, 없으면 가장 최근 영상 (gl-board.js 가 고른다).
   카드 안 재생 부분은 위 .gl-video-yt 를 그대로 쓴다 — 목록의 영상도 그 자리에서 재생된다. */
.gl-vfeature{ display: flex; flex-direction: column; gap: 44px; }

.gl-vcard-feature{
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 36px;
}
.gl-vcard-feature .gl-vcard-title{ font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; }
.gl-vcard-feature .gl-vcard-desc{ font-size: 16px; margin-top: 12px; }
/* 인스타 글은 세로가 길다 — 영상 쪽 칸을 좁혀 틀이 들어갈 때 화면을 넘지 않게 한다 */
.gl-vcard-feature.is-ig{ grid-template-columns: minmax(0, 440px) minmax(0, 1fr); }

/* 아래 목록은 가로 줄(gl-rail.css)이다 — 좌우 단추 · 끌기 · 붙는 움직임은 그쪽 것을 그대로 쓴다.
   카드 폭만 여기서 정한다: 한 화면에 «3장 반». 네 번째 카드가 반쯤 걸쳐 보여야
   사람이 «옆으로 더 있다» 를 알고 밀어 본다 (가로 줄 기본은 3.2장이라 걸침이 얇다).
   폭 = (줄 폭 − 보이는 틈) ÷ 장수. 3.5장이면 틈이 셋(3장 + 반 장 사이사이)이다.
   줄 속 카드가 글 길이에 따라 들쭉날쭉 늘어나지 않게 위로 맞춘다. */
.gl-vlist-rail .gl-rail-track{ align-items: flex-start; }
.gl-vlist-rail .gl-rail-track > *{ width: calc((100% - 60px) / 3.5); }
@media (max-width: 900px){
  .gl-vlist-rail .gl-rail-track > *{ width: calc((100% - 40px) / 2.5); }   /* 태블릿 2장 반 */
}
@media (max-width: 640px){
  .gl-vlist-rail .gl-rail-track > *{ width: calc((100% - 14px) / 1.5); }   /* 휴대폰 1장 반 — 손가락으로 넘긴다 */
}
/* «대표 영상 설명 — 휴대폰에서 숨기기»(board 위젯 칸 featureDesc → host data-feature-desc="hide-mobile") — 큰 영상 옆 설명 문단만 숨긴다(제목은 남는다) */
@media (max-width: 760px){
  [data-feature-desc="hide-mobile"] .gl-vcard-feature .gl-vcard-desc{ display: none; }
}
@media (max-width: 760px){
  .gl-vfeature{ gap: 32px; }
  .gl-vcard-feature, .gl-vcard-feature.is-ig{ grid-template-columns: 1fr; gap: 14px; }
}

/* ── 어디 영상인가 ──────────────────────────────────────────────────
   유튜브는 자기 그림을 내준다. 인스타는 내주지 않는다 —
   그림·제목을 미리 가져오는 길(oEmbed)은 Meta 앱 심사가 있어야 열린다.
   그래서 인스타는 그림 자리에 인스타 색을 깔고 표시만 크게 둔다.
   빈 네모를 두면 «망가진 것» 으로 보인다. */
.gl-vshell { position: relative; }

.gl-vface {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 16 / 9;
  /* AI-티-예외(장식 아님) — 인스타그램의 색이다. 우리 톤이 아니라 «어디 것인지» 를 알리는
     표시라 밝은 화면·어두운 화면 어느 쪽에서도 같은 색이어야 한다. */
  background: linear-gradient(135deg, #fdc468 0%, #dd2a7b 48%, #6a35cf 100%); /* 의도 — 인스타그램 색(위 주석) */
}
.gl-vface svg { width: 64px; height: 64px; opacity: .96; }

/* 인스타 글은 세로가 길다. 16:9 에 넣으면 위아래가 잘리므로,
   틀이 들어가는 순간 담는 자리를 함께 늘린다 (gl-video.js 가 붙인다). */
.gl-video-tall .gl-video-frame { aspect-ratio: 4 / 5; }
@media (max-width: 640px) { .gl-video-tall .gl-video-frame { aspect-ratio: 3 / 4; } }

/* 제목 옆 작은 표시. 글자로 «유튜브» 라고 적지 않는다 —
   네 나라 말로 나가는 화면이라 그 자리만 한국어가 된다. */
.gl-vmark {
  display: inline-flex; vertical-align: -3px; margin-right: 7px;
  width: 18px; height: 18px; flex: none;
}
.gl-vmark svg { width: 100%; height: 100%; display: block; }

/* 트는 동안 단추는 감춰 둔다. 없애지 않는다 — 없애면 되돌릴 것이
   남지 않아 «멈추기» 를 만들 수 없다.
   [hidden] 은 브라우저 기본 규칙이라 우리 display 선언에 밀린다.
   여기서 한 번 더 못박아 둔다. */
.gl-video-yt[hidden] { display: none !important; }

/* 영상 한 편(위젯) 안의 정지 그림 — 사진 한 장(.gl-figure img)의 테두리 · 둥글기가 단추 안 그림에 번지지 않게 (2026-10-02).
   그대로 두면 그림의 둥글기(--radius-lg)와 단추의 둥글기가 달라 모서리에 단추 바탕(--chip)이 비친다 — 버튼색이 밝은 브랜드(주황)에서 드러났다.
   게시판 영상 카드(.gl-vshell)는 .gl-figure 밖이라 한 글자도 안 바뀐다. */
.gl-figure .gl-video-yt img { border: 0; border-radius: 0; }

/* ── 쇼츠 · 세로 영상 (9:16) ─────────────────────────────────────────
   쇼츠 = 주소가 youtube.com/shorts/ 였던 영상 (medialink.js · gl-core.js 의 short 표시).
   그림 칸(.gl-video-yt)과 트는 틀(.gl-video-frame)을 같은 9:16 으로 낸다 — 그래야 누르는 순간 높이가 튀지 않는다.

   🔴 카드 폭을 묶는다. 묶지 않으면 16:9 칸 하나에 쇼츠가 들어갈 때 칸 폭만큼 틀이 한없이 길어진다
      (폭 600px 이면 높이가 1,000px 을 넘는다). 아래 «세로 영상» 격자(.gl-vshorts)만 칸 폭을 그대로 쓴다. */
.gl-vcard.is-short .gl-video-yt,
.gl-vcard.is-short .gl-vface{ aspect-ratio: 9 / 16; }
.gl-video-short .gl-video-frame{ aspect-ratio: 9 / 16; }

.gl-vcard.is-short{ max-width: 340px; }
.gl-vgrid > .gl-vcard.is-short{ margin-inline: auto; }

/* 대표 한 편이 쇼츠일 때 — 영상 쪽 칸을 340px 로 묶고 글이 나머지를 쓴다 */
.gl-vcard-feature.is-short{ max-width: none; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.gl-vcard-feature.is-short .gl-vshell{ width: 100%; max-width: 340px; }
@media (max-width: 760px){
  .gl-vcard-feature.is-short{ grid-template-columns: 1fr; }
  .gl-vcard-feature.is-short .gl-vshell{ margin-inline: auto; }
}

/* «세로 영상» 진열 (게시판 위젯 — 여러 편일 때 = 세로 영상) — 모든 카드가 세로 칸이다.
   좁은 칸이라 제목만 두 줄까지 보이고 설명은 접는다. */
.gl-vshorts{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.gl-vshorts > .gl-vcard.is-short{ max-width: none; margin-inline: 0; }
.gl-vshorts .gl-vcard{ gap: 10px; }
.gl-vshorts .gl-vcard-title{
  font-size: 15px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gl-vshorts .gl-vcard-desc{ display: none; }
.gl-vshorts .gl-video-play{ width: 52px; height: 52px; }
.gl-vshorts .gl-video-play::after{ border-width: 9px 0 9px 14px; }
@media (max-width: 1000px){ .gl-vshorts{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px){ .gl-vshorts{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

/* «쇼츠 칸 + 휴대폰 틀» (data-rail="phone") — 칸마다 휴대폰 틀을 입힌다. 영상이 틀을 꽉 채우고, 트는 순간에도 높이가 튀지 않게 그림 · 틀을 같은 비율로 낸다.
   틀 모양은 gl-blocks.css 의 .gl-phone 과 같은 규칙(테두리 · 모서리 · 비율)이다. */
.gl-vshorts-phone .gl-vshell{
  position: relative; aspect-ratio: 9 / 19.5; overflow: hidden;
  /* 의도 — 휴대폰 테두리는 «기기» 라 밝게/어둡게와 상관없이 늘 검정이다(역할 색이 아니다) */
  border-radius: 9% / 4.2%; border: 5px solid #0b0b0c; background: #0b0b0c;
  box-shadow: 0 18px 36px -14px rgb(0 0 0 / .35);
}
.gl-vshorts-phone .gl-vshell::after{
  content: ""; position: absolute; top: 2.2%; left: 50%; z-index: 3; width: 24%; height: 2.3%; transform: translateX(-50%);
  border-radius: 999px; background: #0b0b0c; pointer-events: none;
}
.gl-vshorts-phone .gl-video-yt,
.gl-vshorts-phone .gl-vface,
.gl-vshorts-phone .gl-video-frame{ position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.gl-vshorts-phone .gl-video-yt[hidden]{ display: none; }
.gl-vshorts-phone .gl-video-yt img{ width: 100%; height: 100%; object-fit: cover; }

/* 영상 한 편(위젯)에 쇼츠 주소를 넣었을 때 — 가운데에 세로 틀 하나. 넓게 펴지 않는다(폭이 곧 높이가 된다). */
.gl-media-short{ max-width: 360px; margin-inline: auto; }
.gl-media-short .gl-video-yt{ aspect-ratio: 9 / 16; }