/* 영상 더빙 견본 플레이어 (2026-10-17 더빙 견본 결정표 Q1) — 움직임 = dub-samples.js
   ① /freetts 기능 구역의 영상 더빙 칸(.ff-s-dub.is-real) — 옆 칸(PPT 견본)과 같은 작업 화면 모양. 색은 그 구역 변수(--ff-*)
   ② /videodubbing 히어로(.dsp) — 어두운 띠 위의 큰 플레이어 */

/* ───────── ① 홈 기능 구역 · 영상 더빙 칸 ───────── */
.ff-s-dub.is-real .ff-langs { flex: none; }
.ff-dubv-picks { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ff-dubv-picks::-webkit-scrollbar { display: none; }
.ff-dubv-set { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ff-dubv-set[hidden] { display: none; }
.ff-dubv { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.ff-dubv-stage { position: relative; align-self: start; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0e0f13; cursor: pointer; }
.ff-dubv-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0e0f13; }
/* 멈춰 있을 때만 가운데 재생 표시 — 누르면 아래 재생 단추와 같다 */
.ff-dubv-stage::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; pointer-events: none;
  background: rgba(17, 18, 20, 0.58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.6v12.8c0 .8.9 1.3 1.6.8l9.9-6.4c.6-.4.6-1.3 0-1.7L9.6 4.8C8.9 4.3 8 4.8 8 5.6z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 24px no-repeat;
  transition: opacity 0.2s ease;
}
.ff-dubv-set.is-playing .ff-dubv-stage::after { opacity: 0; }
/* AI 기본법 — 견본 장면도 AI 영상이라 늘 보이게 */
.ff-dubv-ai {
  position: absolute; left: 8px; top: 8px; max-width: calc(100% - 16px); padding: 3px 8px; border-radius: 6px; pointer-events: none;
  background: rgba(0, 0, 0, 0.58); color: #fff; font: 600 11px/1.35 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 문장 칸은 영상 높이에 맞추고 넘치면 그 안에서만 스크롤(지금 문장이 늘 보이게 — js) */
.ff-dubv-side { position: relative; min-width: 0; min-height: 0; }
.ff-dubv-side .ff-label { min-width: 0; }
.ff-dubv-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-dubv-side .ff-label-note { flex: none; }
.ff-dubv-lines {
  position: absolute; left: 0; right: 0; top: 30px; bottom: 0; list-style: none; margin: 0; padding: 0 4px 2px 0;
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin;
}
.ff-dubv-row {
  flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--ff-line); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.ff-dubv-row:hover { background: #f8f8fa; }
.ff-dubv-dst-wrap, .ff-dubv-dst { display: block; }
.ff-dubv-dst[hidden] { display: none; }
.ff-dubv-dst { font: 600 13px/1.5 var(--font-sans); color: var(--ff-ink); word-break: keep-all; overflow-wrap: anywhere; }
.ff-dubv-src { font: 500 12px/1.45 var(--font-sans); color: var(--ff-cap); word-break: keep-all; overflow-wrap: anywhere; }
.ff-dubv-row.is-now { background: #fbfaff; box-shadow: inset 0 0 0 1.5px var(--ff-brand); }
.ff-dubv-row.is-past .ff-dubv-dst { color: var(--ff-faint); }
/* 원본 소리를 들을 땐 원래 말이 위·진하게 */
.ff-dubv-set[data-track="original"] .ff-dubv-src { order: -1; font-weight: 600; font-size: 13px; color: var(--ff-ink); }
.ff-dubv-set[data-track="original"] .ff-dubv-dst { font-weight: 500; font-size: 12px; color: var(--ff-cap); }
.ff-dubv-transport { gap: 12px; }
.ff-dubv-track { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f1f1f4; }
.ff-dubv-track button {
  appearance: none; height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 650 12.5px/1 var(--font-sans); color: var(--ff-sub); white-space: nowrap;
}
.ff-dubv-track button[aria-checked="true"] { background: #fff; color: var(--ff-ink); box-shadow: 0 1px 2px rgba(17, 18, 20, 0.12); }
.ff-dubv-langs { display: flex; gap: 4px; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ff-dubv-langs::-webkit-scrollbar { display: none; }
.ff-dubv-langs .ff-lang { flex: none; box-shadow: inset 0 0 0 1px var(--ff-line); }
.ff-dubv-langs .ff-lang[aria-pressed="true"] { background: var(--ff-band); color: var(--ff-band-ink); box-shadow: inset 0 0 0 1px rgba(79, 55, 255, 0.35); }
.ff-dubv-row:focus-visible, .ff-dubv-track button:focus-visible { outline: 3px solid var(--ff-brand); outline-offset: 2px; }

@media (max-width: 900px) {
  /* 영상 위, 문장 아래(문장 칸은 고정 높이 안에서 스크롤) */
  .ff-dubv { grid-template-columns: minmax(0, 1fr); }
  .ff-dubv-side { height: 236px; }
}
@media (max-width: 640px) {
  .ff-dubv-side { height: 208px; }
  /* 견본 이름은 줄을 다 쓰되 짜부라뜨리지 않고 옆으로 민다 */
  .ff-s-dub.is-real .ff-dubv-picks { justify-content: flex-start; }
  .ff-s-dub.is-real .ff-dubv-picks .ff-lang { flex: none; padding: 0 10px; }
  .ff-dubv-transport { height: auto; min-height: 58px; flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .ff-dubv-langs { margin-left: 0; width: 100%; }
}

/* ───────── ② /videodubbing 히어로 ───────── */
.dsp {
  margin-top: 52px; padding: 16px; border-radius: 22px; color: #fff;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.12);
}
.dsp-picks { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.dsp-picks::-webkit-scrollbar { display: none; }
.dsp-pick {
  appearance: none; flex: 1 0 172px; max-width: 260px; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; text-align: left;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: rgba(255, 255, 255, 0.82); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dsp-pick:hover { border-color: rgba(255, 255, 255, 0.32); }
.dsp-pick b { font: 700 14.5px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.dsp-pick span {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font: 500 12.5px/1.45 var(--font-sans); color: rgba(255, 255, 255, 0.58); word-break: keep-all;
}
.dsp-pick[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--w-cool-5, #12131a); }
.dsp-pick[aria-pressed="true"] span { color: rgba(18, 19, 26, 0.62); }
.dsp-set { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.dsp-set[hidden] { display: none; }
.dsp-main { min-width: 0; }
.dsp-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.dsp-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.dsp-ai {
  position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 7px; pointer-events: none;
  background: rgba(0, 0, 0, 0.58); color: #fff; font: 600 12px/1.35 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dsp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; }
.dsp-track { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); }
.dsp-track button {
  appearance: none; height: 38px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font: 650 14px/1 var(--font-sans); color: rgba(255, 255, 255, 0.74); white-space: nowrap;
}
.dsp-track button[aria-checked="true"] { background: #fff; color: var(--w-cool-5, #12131a); }
.dsp-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.dsp-lang {
  appearance: none; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; cursor: pointer;
  font: 600 13.5px/1 var(--font-sans); color: rgba(255, 255, 255, 0.84); white-space: nowrap;
}
.dsp-lang:hover { border-color: rgba(255, 255, 255, 0.45); }
.dsp-lang[aria-pressed="true"] { border-color: #fff; background: rgba(255, 255, 255, 0.16); color: #fff; }
/* 문장 칸 — 왼쪽(영상+단추) 높이에 맞추고 넘치면 그 안에서 스크롤. contain: size = 문장이 많아도 줄 높이를 키우지 않는다 */
.dsp-side { contain: size; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; }
.dsp-side-head { min-width: 0; }
.dsp-side-title { margin: 0; font: 700 15px/1.35 var(--font-sans); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsp-side-voice { margin: 3px 0 0; font: 500 13px/1.4 var(--font-sans); color: rgba(255, 255, 255, 0.6); }
.dsp-side-voice [hidden] { display: none; }
.dsp-lines {
  position: relative; list-style: none; margin: 0; padding: 0 4px 2px 0; min-height: 0;
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.dsp-row {
  flex: none; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.dsp-row:hover { background: rgba(255, 255, 255, 0.06); }
.dsp-dst, .dsp-dst > span { display: block; }
.dsp-dst > span[hidden] { display: none; }
.dsp-dst { font: 600 14.5px/1.5 var(--font-sans); color: #fff; word-break: keep-all; overflow-wrap: anywhere; }
.dsp-src { font: 500 12.5px/1.45 var(--font-sans); color: rgba(255, 255, 255, 0.55); word-break: keep-all; overflow-wrap: anywhere; }
.dsp-row.is-now { background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55); }
.dsp-row.is-past .dsp-dst { color: rgba(255, 255, 255, 0.62); }
.dsp-set[data-track="original"] .dsp-src { order: -1; font-weight: 600; font-size: 14.5px; color: #fff; }
.dsp-set[data-track="original"] .dsp-dst { font-weight: 500; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.dsp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 16px; }
.dsp-foot p { margin: 0; flex: 1 1 260px; font: 500 13.5px/1.55 var(--font-sans); color: rgba(255, 255, 255, 0.62); word-break: keep-all; }
.dsp-pick:focus-visible, .dsp-track button:focus-visible, .dsp-lang:focus-visible, .dsp-row:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 860px) {
  .dsp { margin-top: 36px; padding: 12px; border-radius: 18px; }
  .dsp-set { grid-template-columns: minmax(0, 1fr); }
  .dsp-side { contain: none; }
  .dsp-lines { max-height: 260px; }
  .dsp-pick { flex: 0 0 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-dubv-stage::after, .ff-dubv-row, .dsp-pick, .dsp-row { transition: none; }
}