/* ==========================================================================
   videos.css — 영상 쪽 /ko/videos/ (B6 · DESIGN 8-5)
   - 운영 10묶음 순서 칸(h2 = 묶음 이름) · 줄 = 포스터 240(16:9) + 편 이름 + 「가이드 보기 →」
   - 줄 누름 → 그 줄의 포스터가 그 자리에서 16:9 플레이어로 커짐(한 도형 — 크기 · 글자 움직임은 pages/videos.js 가 스프링으로)
   - 길이 표기는 겉면 알약 하나(P4 「길이 표기 하나」) · 상태 · 대역 표시 0(주석 층에만 — B2)
   - ≥1280 묶음 이름 왼쪽 끈끈 · 1024–1279 한 열 · ≤1023 줄 오른쪽 84 비움(채팅 길 3-8) · ≤600 포스터 위 · 글 아래
   - 머리 v- 만 씀(.tx-player 꼴은 B2 player.css — 여기서는 .v-row 안에서만 덮음)
   - 판단(10/18 총괄 ②): 공용 포스터에 구운 자막 띠 · 「3/3」 글자 · 진행 막대 · 왼쪽 검은 띠가 있던 6편
     (onboard-03 · callback · lc-install · lc-style · limits · general)은 mp4 에서 그것이 없는 프레임을 다시 뽑아 자른
     /ko/videos/posters/<vid>.jpg(B6 폴더 · 1280×720)를 겉면에 씀 — 공용 media/posters(B1) 교체는 requests/B6.md
   ========================================================================== */

.v-main { padding: 56px 0 24px; }
.v-head { max-width: 760px; margin: 0 0 40px; }
.v-head h1 { margin: 0; }
.v-lead { margin: 12px 0 0; font-size: 18px; font-weight: 550; line-height: 1.5; letter-spacing: -.01em; color: var(--ink-2); }

/* ── 묶음 칸 ── */
.v-group {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  padding: 36px 0 44px; border-top: 1px solid var(--line);
}
.v-group__h { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.03em; color: var(--ink); }
@media (min-width: 1280px) {
  .v-group { grid-template-columns: 220px minmax(0, 1fr); gap: 0 48px; }
  .v-group__h { position: sticky; top: calc(var(--sticky-top) + 24px); align-self: start; padding-top: 2px; }
}
.v-drop { height: 0; }                                   /* 뺀 묶음 자리(주석 층 점선 한 줄 — data-mock) */

/* ── 줄 ── */
.v-list { display: grid; gap: 28px; }
.v-row { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 24px; align-items: center; }
.v-row:not(.is-open) { cursor: pointer; }
.v-row > .tx-player { width: 240px; }
.v-row__text { position: relative; min-width: 0; }
.v-row__name {
  margin: 0; font-size: 18px; font-weight: 750; line-height: 1.4; letter-spacing: -.015em; color: var(--ink);
  word-break: keep-all; text-wrap-style: balance;
}
.v-row__eyebrow { display: block; margin: 0 0 3px; font-size: 13px; font-weight: 650; line-height: 1.4; letter-spacing: 0; color: var(--ink-3); }
.v-row__more { margin-top: 6px; }
.v-row:not(.is-open):hover .v-row__name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* 접힌 줄 겉면 — 240 썸네일 크기에 맞춘 원 · 알약(B2 꼴을 줄 안에서만 줄임) */
@media (min-width: 601px) {
  .v-row:not(.is-open) > .tx-player { border-radius: 14px; box-shadow: var(--sh-1); transition: box-shadow var(--ui-fast) ease-out; }
  .v-row:not(.is-open):hover > .tx-player { box-shadow: var(--sh-2); }
  .v-row:not(.is-open) .tx-player__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .v-row:not(.is-open) .tx-player__play::before { margin: -7px 0 0 -4px; border-width: 7px 0 7px 11px; }
  .v-row:not(.is-open) .tx-player__len { left: 8px; bottom: 8px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 12px; line-height: 22px; }
  .v-row:not(.is-open):hover .tx-player__play { box-shadow: 0 0 0 3px var(--accent), 0 6px 18px rgba(0,0,0,.26); }
}

/* 판단: 겉면 초점 고리 — B2 의 outline(-6px 안쪽)은 위에 깔린 포스터(position:absolute img)에 가려 안 보임 →
   이 쪽 줄 안에서만 같은 3px --focus 고리를 포스터 위 층으로 그림(B2 에 요청 줄) */
.v-row .tx-player__face:focus-visible { outline: none; }
.v-row .tx-player__face:focus-visible::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--focus), inset 0 0 0 5px var(--surface);
}

/* 열린 줄 — 포스터가 줄 너비 16:9 플레이어로(글은 아래) */
.v-row.is-open { grid-template-columns: minmax(0, 1fr); align-items: start; }
.v-row.is-open > .tx-player { width: 100%; }
.v-row.is-open .v-row__text { margin-top: 16px; }
.v-row.is-moving > .tx-player { z-index: 1; }            /* 커지는 겉면이 나가는 글자 위로(그 글자는 흐려지며 덮임) */
.v-row__ghost { z-index: 0; }

/* ── 폭별 ── */
@media (max-width: 1023.98px) {
  .v-main { padding-top: 40px; }
  .v-head, .v-list { max-width: calc(100% - var(--lane-cut)); }   /* 채팅 길 — 줄 · 글은 오른쪽 84 에서 끝남(3-8) */
  .v-group { padding: 32px 0 40px; gap: 18px; }
  .v-group__h { font-size: 22px; }
}
@media (max-width: 600.98px) {
  .v-main { padding-top: 28px; }
  .v-head { margin-bottom: 28px; }
  .v-lead { font-size: 17px; }
  .v-group { padding: 28px 0 36px; }
  .v-list { gap: 32px; }
  .v-row, .v-row.is-open { grid-template-columns: minmax(0, 1fr); align-items: start; }   /* 포스터 위 · 글 아래(8-5) */
  .v-row > .tx-player { width: 100%; }
  .v-row .v-row__text { margin-top: 12px; }
  .v-row__name { font-size: 17px; }
}

/* 줄인 움직임 — 크기 · 글자 바뀜 즉시(JS 도 즉시) */
html.rm .v-row > .tx-player { transition: none; }