/* 공용 경기 영상 팝업 (static/js/video-popup.js) — 모든 페이지 _footer.html / login.html 에서 로드 */
.ddv-overlay {
    position: fixed;
    inset: 0;
    z-index: 3100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    overscroll-behavior: contain;
}
/* 안쪽 스크롤 영역 — 끝에 닿아도 뒤 화면으로 스크롤이 넘어가지 않게 (뒤 페이지 잠금은 video-popup.js lockPageScroll) */
.ddv-list, .ddv-sfilters, .ddv-sel-menu, .ddv-ps-dd { overscroll-behavior: contain; }
.ddv-box {
    width: min(1180px, 100%);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: #101214;
    color: #e9edf2;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
    font-size: 13px;
}
.ddv-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: #16181b;
    border-bottom: 1px solid #2a2e33;
}
/* 제목(일자·경기명 / 투수→타자) — 헤더가 아니라 재생바 아래. 항상 2줄을 차지해 높이가 흔들리지 않는다. */
.ddv-title { padding: 8px 10px 0; font-size: 12.5px; line-height: 1.4; min-width: 0; }
.ddv-title b { color: #fff; }
.ddv-title-main, .ddv-title-sub {
    display: block; min-height: 1.4em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ddv-title-sub { color: #9fb3c8; margin-left: 0; }
.ddv-src { display: flex; gap: 4px; flex: 1; min-width: 0; }
.ddv-src-btn, .ddv-cam-btn, .ddv-chip {
    border: 1px solid #3a4048;
    background: #1c1f23;
    color: #cfd6de;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
}
.ddv-src-btn.is-on, .ddv-cam-btn.is-on, .ddv-chip.is-on { background: #1d467d; border-color: #1d467d; color: #fff; }
.ddv-src-btn.is-off { opacity: 0.4; }
.ddv-close { border: none; background: none; color: #fff; font-size: 22px; cursor: pointer; line-height: 1; flex-shrink: 0; }
.ddv-foot { display: flex; flex: 0 0 auto; }
.ddv-close-bottom, .ddv-foot-btn { display: none; }  /* 모바일에서만 하단 줄로 등장 (창 닫기 / 검색 탭은 3등분) */

/* 박스 높이는 영상 열(.ddv-main)만 결정 — 리스트 패널은 절대배치라 결과가 늘어나도 높이에 관여하지 못한다 */
.ddv-body { display: flex; min-height: 0; flex: 1; position: relative; }
.ddv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-right: 320px; container-type: inline-size; }
/* 영상 칸 = 항상 전폭, 높이 = 폭의 16:9(56.25cqw — .ddv-main 컨테이너 폭 기준)와 상한 중 작은 값. 영상은 object-fit:contain 으로 가운데.
   ★옛 방식(aspect-ratio + max-height)은 상한에 걸리면 폭까지 줄어 좌측에 붙었고, 이를 margin-inline:auto 로 가운데 맞추자
   flex 늘이기가 풀려 폭이 내용(영상)을 따라가 → 투구 이동 중 영상을 숨기는 순간 칸이 접혔다 펴졌다 (09-11). */
.ddv-player {
    position: relative; background: #000; width: 100%; height: min(56.25cqw, 62vh);
    overflow: hidden;            /* 핀치로 확대된 영상이 칸 밖으로 나가지 않게 */
    touch-action: none;          /* 끌어내리기·핀치를 직접 계산한다 (video-popup.js bindSwipeClose/bindPinch) */
}
.ddv-player.is-zoomed video { will-change: transform; }
.ddv-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ddv-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9fb3c8;
    font-size: 13px;
    text-align: center;
    padding: 12px;
}
.ddv-cams {
    position: absolute;
    left: 8px;
    top: 8px;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}
.ddv-cam-hint { font-size: 11px; color: #9fb3c8; }
/* ★ display:flex 가 UA 의 [hidden]{display:none} 을 이겨서 안내 오버레이가 투명하게 영상 위를 덮고
   재생바 조작을 가로채던 버그 — hidden 이면 확실히 숨기고, 보일 때도 클릭은 통과 */
.ddv-empty[hidden], .ddv-cams[hidden] { display: none; }
.ddv-empty { pointer-events: none; }

/* ── 재생바 — TMAN DEEP .pb-controls 이식 (기능 동일, 색만 팝업 팔레트) ──────────
   구성: [▶ ■ 연속] [슬라이더 0.000 s] [0.1× 0.5× 1×]  — playback.css 의 밝은 테마를 다크로 옮김. */
.ddv-ctl {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 7px 10px; background: #16181b; border-bottom: 1px solid #2a2e33;
}
.ddv-ctl-transport { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ddv-cbtn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 9px; box-sizing: border-box;
    border: 1px solid #3a4048; background: #1c1f23; color: #cfd6de;
    border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1;
}
.ddv-cbtn:hover { border-color: #4f79b8; }
.ddv-ic { width: 13px; height: 13px; fill: currentColor; display: block; }
.ddv-play { min-width: 42px; background: #1d467d; border-color: #1d467d; color: #fff; }
/* 정지 상태 — 정지버튼이 활성색, 재생버튼은 평범하게 (playback.css .pb-stopped 와 같은 규칙) */
.ddv-ctl-transport.is-stopped .ddv-stop { background: #1d467d; border-color: #1d467d; color: #fff; }
.ddv-ctl-transport.is-stopped .ddv-play { background: #1c1f23; border-color: #3a4048; color: #fff; }
.ddv-mode { min-width: 44px; }
.ddv-mode.is-on { background: #1d467d; border-color: #1d467d; color: #fff; }          /* 연속 */
.ddv-mode.is-repeat { background: #00a3e0; border-color: #00a3e0; color: #fff; }      /* 반복 */
.ddv-ctl-slider { display: flex; align-items: center; gap: 6px; flex: 1 1 200px; min-width: 0; }
.ddv-ctl .ddv-sel-speed { margin-left: auto; }
.ddv-seek {
    -webkit-appearance: none; appearance: none;
    flex: 1; min-width: 0; height: 6px; margin: 0;
    border-radius: 3px; background: #2a2e33; outline: none; cursor: pointer;
}
.ddv-seek::-webkit-slider-runnable-track { height: 6px; background: transparent; border-radius: 3px; }
.ddv-seek::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; margin-top: -4px; border-radius: 50%;
    background: #4fb3ff; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}
.ddv-seek::-moz-range-track { height: 6px; background: transparent; border-radius: 3px; }
.ddv-seek::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #4fb3ff; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}
.ddv-time {
    flex: 0 0 auto; min-width: 62px; text-align: right;
    font-family: "Courier New", monospace; font-size: 12px; color: #9fb3c8;
}
/* ── 커스텀 드롭다운 (.ddv-sel) — 배속 · 투수 · 타자 공용 ──────────────────
   네이티브 select 는 옵션 목록이 OS 테마로 그려져 다크 팝업과 겉돌아 목록까지 직접 그린다. */
.ddv-sel { position: relative; flex: 0 0 auto; min-width: 0; }
.ddv-sel-btn {
    display: flex; align-items: center; gap: 6px; width: 100%;
    height: 30px; padding: 0 8px; box-sizing: border-box;
    border: 1px solid #3a4048; border-radius: 6px;
    background: #1c1f23; color: #cfd6de;
    font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer;
}
.ddv-sel-btn:hover, .ddv-sel.is-open .ddv-sel-btn { border-color: #4f79b8; }
.ddv-sel.is-set .ddv-sel-btn { background: #1d467d; border-color: #1d467d; color: #fff; }
.ddv-sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ddv-sel-caret { width: 9px; height: 6px; fill: #9fb3c8; flex: 0 0 auto; margin-left: auto; }
.ddv-sel.is-set .ddv-sel-caret { fill: #cfe0f5; }
.ddv-sel.is-open .ddv-sel-caret { transform: rotate(180deg); }
.ddv-sel-menu {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0;
    min-width: 100%; max-height: min(300px, 44vh); overflow-y: auto;
    padding: 4px; box-sizing: border-box;
    background: #1a1d21; border: 1px solid #3a4048; border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
/* 메뉴는 열릴 때 floatMenu 가 fixed 좌표로 띄운다(모달·작은 화면에 잘리지 않게) */
.ddv-sel-speed .ddv-sel-btn { min-width: 62px; }
.ddv-sel-opt {
    display: flex; align-items: baseline; gap: 10px; width: 100%;
    padding: 7px 9px; border: 0; border-radius: 5px;
    background: none; color: #cfd6de; font-size: 12px;
    text-align: left; white-space: nowrap; cursor: pointer;
}
.ddv-sel-opt:hover { background: #23282f; }
.ddv-sel-opt.is-on { background: #1d467d; color: #fff; }
.ddv-sel-opt.is-dead { color: #6b7785; cursor: default; }
.ddv-sel-opt.is-dead:hover { background: none; }
.ddv-sel-sub { margin-left: auto; color: #6b7785; font-size: 11px; }
.ddv-sel-more { padding: 8px; text-align: center; color: #6b7785; font-size: 11px; min-height: 1em; }   /* 경기 목록 끝(무한 스크롤 감시) */
.ddv-sel-opt.is-on .ddv-sel-sub { color: #cfe0f5; }
/* 여러 개 고르기(.ddv-sel-multi, 10-01) — 모양은 단일 선택과 같다(고른 항목 = 파란 배경 .is-on, 여러 개 켜질 수 있음) */
.ddv-sel-menu::-webkit-scrollbar { width: 9px; }
.ddv-sel-menu::-webkit-scrollbar-thumb { background: #303a48; border-radius: 5px; }
.ddv-sel-menu::-webkit-scrollbar-track { background: transparent; }

/* 이전/다음 투구 — 재생바 트랜스포트 안 아이콘 버튼 (.ddv-cbtn 스타일을 그대로 쓴다) */
.ddv-nav-btn:disabled { opacity: 0.35; cursor: default; }
.ddv-nav-btn:disabled:hover { border-color: #3a4048; }
.ddv-mute.is-off { color: #6b7785; }                 /* 음소거 중 — 아이콘만 흐리게 */
.ddv-full.is-on { background: #1d467d; border-color: #1d467d; color: #fff; }
/* 전체화면 — .ddv-main(영상+재생바)이 통째로. ★영상이 화면을 꽉 채우고 재생바는 영상 위에 겹치는 띠 (09-12 — 아래 고정 배치는
   재생바가 화면 높이를 너무 먹었다). 남기는 것 = [이전·재생·다음] [슬라이더] [음소거] [전체화면 해제]. 정지·모드·배속은
   전체화면 들어가기 전에 정해두는 값이라 숨긴다(설정은 유지됨).
   .is-fs = 네이티브 전체화면(video-popup.js ctlFull 이 붙인다 — :fullscreen/:-webkit-full-screen 은 모르는 브라우저가 규칙째 버려
   한 규칙에 못 적는다), .is-pfull = 요소 전체화면이 안 되는 iPhone 용 CSS 전체화면. */
.ddv-main.is-fs, .ddv-main.is-pfull { background: #000; justify-content: center; }   /* position 은 건드리지 않는다 — 전체화면 요소는 브라우저가 fixed 로 만든다(겹치는 재생바의 기준) */
.ddv-main.is-pfull {
    position: fixed; inset: 0; z-index: 3150; margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
.ddv-main.is-fs .ddv-player,
.ddv-main.is-pfull .ddv-player { flex: 1 1 0; width: 100%; height: auto; margin: 0; max-height: none; aspect-ratio: auto; min-height: 0; }
.ddv-main.is-fs .ddv-title, .ddv-main.is-fs .ddv-info,
.ddv-main.is-pfull .ddv-title, .ddv-main.is-pfull .ddv-info { display: none; }
/* 겹치는 재생바 — 바닥에 절대배치 + 위로 사라지는 어둠(아이콘 가독성). 레이아웃 공간을 먹지 않는다. */
.ddv-main.is-fs .ddv-ctl,
.ddv-main.is-pfull .ddv-ctl {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0));
    border-bottom: none; padding: 22px 12px 10px; gap: 6px 8px;
}
.ddv-main.is-fs .ddv-stop, .ddv-main.is-fs .ddv-mode, .ddv-main.is-fs .ddv-sel-speed,
.ddv-main.is-pfull .ddv-stop, .ddv-main.is-pfull .ddv-mode, .ddv-main.is-pfull .ddv-sel-speed { display: none; }
/* 조작이 없으면 띠가 사라진다 (video-popup.js barPoke — 투구가 넘어가는 것은 조작이 아니라서 다시 나타나지 않는다) */
.ddv-main.is-fs.is-barhide .ddv-ctl,
.ddv-main.is-pfull.is-barhide .ddv-ctl { opacity: 0; pointer-events: none; }
.ddv-main.is-fs.is-barhide, .ddv-main.is-pfull.is-barhide { cursor: none; }
.ddv-main.is-fs .ddv-ctl, .ddv-main.is-pfull .ddv-ctl { transition: transform 0.18s ease, opacity 0.25s ease; }
/* 전체화면에서 끌어내리기 — 영상과 겹친 띠가 함께 딸려 내려온다 (전체화면 요소 자체와 그 조상은 브라우저가
   transform 을 !important 로 고정해 움직일 수 없다 — video-popup.js bindSwipeClose) */
.ddv-main.is-fs .ddv-player, .ddv-main.is-pfull .ddv-player { transition: transform 0.18s ease, opacity 0.18s ease; }
.ddv-player.is-swiping, .ddv-ctl.is-swiping { transition: none; will-change: transform, opacity; }

/* 투구정보 = [로케이션 그림] + [격자] — 퀵서치 세이버 격자(.saber-stat-cell) 배치를 다크 팔레트로 (09-11) */
.ddv-info {
    display: flex; gap: 8px; align-items: stretch;
    padding: 8px 10px 10px;
    min-height: 100px;                /* 격자 2줄 = 로케이션 그림 높이 — 내용이 갈리는 순간에도 박스 높이 유지 */
    transition: opacity 0.15s;
}
.ddv-info.is-stale { opacity: 0.4; }  /* 다음 투구 정보가 오는 동안 이전 값을 흐리게 */
.ddv-loc { flex: 0 0 auto; }
.ddv-loc svg { display: block; width: 80px; height: 100px; }   /* 등축 세로형(존 실제 비율) — 높이 = 격자 2줄(47×2+6) */
.ddv-loc-bg { fill: #16181b; stroke: #2a2e33; stroke-width: 1; }
.ddv-loc-zone { fill: #1f2630; }
.ddv-loc-grid { stroke: #34404d; stroke-width: 0.8; }
.ddv-loc-edge { fill: none; stroke: #9fb3c8; stroke-width: 1.4; }
.ddv-loc-cap { font-size: 8px; fill: #6b7785; }
.ddv-stats {
    flex: 1; min-width: 0;
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 47px; gap: 6px;   /* 줄 높이 고정 — 그림 높이와 항상 같게 */
    container-type: inline-size;       /* 글씨 크기를 격자 폭(cqw)에 맞춰 줄인다 — 좁을 때 글씨가 칸에 가려지던 문제 (09-11) */
}
.ddv-cell {
    display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0;
    padding: 5px 4px; border: 1px solid #2a2e33; border-radius: 6px; background: #16181b; text-align: center;
}
.ddv-cell .ddv-k {
    max-width: 100%; font-size: clamp(9px, 2.1cqw, 10.5px); color: #8a97a6; font-weight: 600; margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddv-cell .ddv-v {
    max-width: 100%; font-size: clamp(11px, 3cqw, 14px); color: #f2f5f8; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ddv-cell .ddv-v.is-hit { color: #3fb950; }
.ddv-cell .ddv-v.is-k { color: #f85149; }
.ddv-u, .ddv-sub { margin-left: 2px; font-size: clamp(8px, 1.9cqw, 10px); font-weight: 600; color: #8a97a6; }
@container (max-width: 460px) { .ddv-u { display: none; } }   /* 격자가 좁으면 단위(km/h·rpm·cm)를 숨겨 숫자 자리 확보 */
.ddv-pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }

.ddv-side {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 320px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #2a2e33;
    background: #131619;
    min-height: 0;
}
/* 우측 패널 탭 — [이 경기 | 검색] */
.ddv-tabs { display: flex; background: #131619; border-bottom: 1px solid #2a2e33; }
.ddv-tab {
    flex: 1; padding: 8px 0; border: 0; border-bottom: 2px solid transparent;
    background: none; color: #9fb3c8; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ddv-tab:hover { color: #e9edf2; }
.ddv-tab.is-on { color: #fff; border-bottom-color: #4fb3ff; }
.ddv-tab-n {
    display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
    background: #23272d; color: #9fb3c8; font-size: 10.5px; font-weight: 600; vertical-align: 1px;
}
.ddv-tab.is-on .ddv-tab-n { background: #1d467d; color: #fff; }
.ddv-grip { display: none; }                          /* 높이 조절 손잡이 — 모바일에서만 (데스크톱 패널은 이미 영상 열 전체 높이) */
/* 검색 조건 — 드롭다운 두 개씩 한 줄, 아래 [초기화] [결과 보기] */
.ddv-sfilters {
    display: flex; gap: 5px; padding: 8px; flex-wrap: wrap; border-bottom: 1px solid #2a2e33;
    flex: 0 1 auto; min-height: 0; overflow-y: auto; align-content: flex-start;   /* 조건이 많아도 버튼까지 스크롤로 닿는다 */
    -webkit-overflow-scrolling: touch;
}
.ddv-sfilters::-webkit-scrollbar { width: 9px; }
.ddv-sfilters::-webkit-scrollbar-thumb { background: #303a48; border-radius: 5px; }
.ddv-sfilters .ddv-sel { flex: 1 1 calc(50% - 5px); min-width: 0; }
/* 필터 적용·초기화 = 필터 맨 위, 각각 전폭 한 줄 (필터 적용이 위) — 09-11, 살짝 둥근 네모 */
.ddv-sacts { flex: 1 1 100%; display: flex; flex-direction: column; gap: 5px; margin-bottom: 2px; }
.ddv-sfilters .ddv-sacts .ddv-chip { width: 100%; height: auto; text-align: center; padding: 7px 10px; border-radius: 6px; }
/* 색 구분 — 필터 적용=파랑(주동작), 초기화=붉은 글씨 (09-12) */
.ddv-sacts .ddv-chip-go { background: #1d467d; border-color: #1d467d; color: #fff; font-weight: 700; }
.ddv-sacts .ddv-chip-go:hover { background: #235699; border-color: #235699; }
.ddv-sacts .ddv-chip[data-sreset] { color: #ff9b9b; border-color: #5a3a3f; }
.ddv-sacts .ddv-chip[data-sreset]:hover { border-color: #8b4a52; background: #2a2023; }
.ddv-sfilters .ddv-sel-game { flex: 1 1 100%; }
/* ── TMAN DEEP 세부필터 이식 (09-11) — 볼/스트/아웃 3개 한 줄, 경기장 전폭, 구속 바, 스트라이크존 13분할 ── */
.ddv-sfilters .ddv-sel.ddv-sel-3 { flex: 1 1 calc(33.33% - 4px); }
.ddv-sfilters .ddv-sel.ddv-sel-full { flex: 1 1 100%; }
.ddv-vel {
    flex: 1 1 100%; box-sizing: border-box; padding: 6px 8px 3px;
    border: 1px solid #3a4048; border-radius: 6px; background: #1c1f23;
}
.ddv-vel.is-set { border-color: #1d467d; }
.ddv-vel-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 600; color: #9fb3c8; }
.ddv-vel-val { font-size: 12px; font-weight: 700; color: #e9edf2; }
.ddv-vel.is-set .ddv-vel-val { color: #4fb3ff; }
.ddv-vel-track { position: relative; height: 24px; margin: 0 8px; }
.ddv-vel-track::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
    border-radius: 2px; background: #2a2e33;
}
.ddv-vel-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #4fb3ff; }
/* 두 range 를 겹쳐 두 손잡이 — 트랙은 투명·클릭 통과, 손잡이만 잡힌다 */
.ddv-vel-in {
    position: absolute; left: -8px; top: 0; z-index: 2; width: calc(100% + 16px); height: 24px; margin: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none; outline: none;
}
.ddv-vel-in::-webkit-slider-runnable-track { height: 24px; background: none; }
.ddv-vel-in::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: pointer;
    width: 16px; height: 16px; margin-top: 4px; border-radius: 50%;
    background: #4fb3ff; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}
.ddv-vel-in::-moz-range-track { background: none; }
.ddv-vel-in::-moz-range-thumb {
    pointer-events: auto; cursor: pointer; width: 13px; height: 13px; border-radius: 50%;
    background: #4fb3ff; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}
.ddv-vel-scale { display: flex; justify-content: space-between; font-size: 10px; color: #6b7785; }
.ddv-zone {
    flex: 1 1 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    border: 1px solid #3a4048; border-radius: 6px; background: #1c1f23;
}
.ddv-zone.is-set { border-color: #1d467d; }
/* 스트라이크존 — TMAN DEEP .pb-sz-* 와 같은 모양(바깥 4방향 사다리꼴 clip-path + 가운데 3×3 번호 1~9) · 포수 시점.
   안쪽 = 빨강, 바깥 = 네이비 (TMAN 색을 다크 배경에 맞춰 조금 진하게). clip-path 는 클릭 영역도 잘라 사다리꼴만 눌린다. */
.ddv-zone-pad { position: relative; flex: 0 0 auto; width: 132px; height: 132px; }
.ddv-zc {
    box-sizing: border-box; padding: 0; border: 0; font-family: inherit; line-height: 1;
    cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s;
}
.ddv-zo {
    position: absolute; inset: 0; display: flex;
    font-size: 10px; font-weight: 700; color: #8a97a6; background: rgba(47, 109, 181, 0.16);
}
.ddv-zo:hover { background: rgba(47, 109, 181, 0.32); }
.ddv-zo.is-on { background: rgba(29, 70, 125, 0.9); color: #fff; }
.ddv-zo-top    { clip-path: polygon(0.5% 0.5%, 99.5% 0.5%, 85.5% 14%, 14.5% 14%); align-items: flex-start; justify-content: center; padding-top: 3px; }
.ddv-zo-right  { clip-path: polygon(99.5% 0.5%, 99.5% 99.5%, 86% 85.5%, 86% 14.5%); align-items: center; justify-content: flex-end; padding-right: 5px; }
.ddv-zo-bottom { clip-path: polygon(0.5% 99.5%, 99.5% 99.5%, 85.5% 86%, 14.5% 86%); align-items: flex-end; justify-content: center; padding-bottom: 3px; }
.ddv-zo-left   { clip-path: polygon(0.5% 0.5%, 0.5% 99.5%, 14% 85.5%, 14% 14.5%); align-items: center; justify-content: flex-start; padding-left: 5px; }
.ddv-zgrid {
    position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%);
    display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 2px;
}
.ddv-zi {
    display: flex; align-items: center; justify-content: center; border-radius: 3px;
    font-size: 11px; font-weight: 600; color: #8a97a6;
    background: rgba(209, 36, 47, 0.14); border: 1px solid rgba(209, 36, 47, 0.4);
}
.ddv-zi:hover { background: rgba(209, 36, 47, 0.3); }
.ddv-zi.is-on { background: rgba(209, 36, 47, 0.85); border-color: #d1242f; color: #fff; }
.ddv-zbtn:hover { border-color: #4f79b8; }
.ddv-zone-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ddv-zone-cap { font-size: 11px; font-weight: 600; color: #9fb3c8; }
.ddv-zone-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ddv-zbtn {
    height: 26px; padding: 0 6px; border: 1px solid #3a4048; border-radius: 5px; background: #16181b;
    color: #cfd6de; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
/* ── 기간 줄 — 퀵서치 QSFilter 와 같은 구성 [달력][1주][3주][최근1년][연도▾][전체] KBO. 달력은 period-calendar.js(.pcal-*) ── */
.ddv-qsf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 1 100%; }
.ddv-qsf .pcal-wrap { display: inline-block; }
.ddv-qsf .pcal-trigger {
    height: 28px; padding: 0 10px; border: 1px solid #3a4048; border-radius: 6px;
    background: #1c1f23; color: #cfd6de; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ddv-qsf .pcal-trigger.has-val { background: #1d467d; border-color: #1d467d; color: #fff; }
.pcal-panel { z-index: 3300 !important; }              /* 팝업(3100) 위 — 패널은 body 로 옮겨진다 */
.ddv-preset {
    height: 28px; padding: 0 9px; border: 1px solid #3a4048; border-radius: 6px;
    background: #1c1f23; color: #cfd6de; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ddv-preset:hover { border-color: #4f79b8; }
.ddv-preset.is-on { background: #1d467d; border-color: #1d467d; color: #fff; }
.ddv-yr-slot { display: inline-flex; }
.ddv-yr .gdd-trigger { height: 28px; background: #1c1f23; color: #cfd6de; border-color: #3a4048; font-size: 12px; font-weight: 600; }
.ddv-yr.active .gdd-trigger { background: #1d467d; color: #fff; border-color: #1d467d; }
/* 달력 패널 — period-calendar 가 주입하는 밝은 테마를 모달 다크 팔레트로 (패널은 열릴 때 body 로 옮겨지므로 자체 클래스로 잡는다) */
.pcal-panel.ddv-pcal-panel {
    background: #1a1d21; border: 1px solid #3a4048; border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); padding: 8px; min-width: 236px;
}
.ddv-pcal-panel .pcal-title { color: #e9edf2; }
.ddv-pcal-panel .pcal-nav { background: #1c1f23; border-color: #3a4048; color: #9fb3c8; border-radius: 5px; }
.ddv-pcal-panel .pcal-nav:hover { background: #23282f; color: #fff; }
.ddv-pcal-panel .pcal-wd { color: #6b7785; }
.ddv-pcal-panel .pcal-day { color: #cfd6de; border-radius: 5px; }
.ddv-pcal-panel .pcal-day:hover:not(.disabled):not(.empty) { background: #23282f; }
.ddv-pcal-panel .pcal-day.in-range { background: #24395a; color: #dbe6f3; border-radius: 0; }
.ddv-pcal-panel .pcal-day.end { background: #1d467d; color: #fff; border-radius: 5px; }
.ddv-pcal-panel .pcal-day.disabled { color: #4a5360; }
.ddv-pcal-panel .pcal-foot { border-top-color: #2a2e33; }
.ddv-pcal-panel .pcal-reset, .ddv-pcal-panel .pcal-cancel { background: #1c1f23; border-color: #3a4048; color: #cfd6de; border-radius: 5px; }
.ddv-pcal-panel .pcal-reset:hover, .ddv-pcal-panel .pcal-cancel:hover { background: #23282f; }
.ddv-pcal-panel .pcal-apply { background: #1d467d; border-color: #1d467d; border-radius: 5px; }
.ddv-qsf .pcal-trigger { background-image: none; padding-right: 10px; min-width: 0; }
/* 연도 드롭다운(createGuideDropdown .gdd) 도 다크로 */
.ddv-yr .gdd-trigger:hover, .ddv-yr.open .gdd-trigger { background: #23282f; color: #fff; border-color: #4f79b8; }
/* 패널은 열릴 때 body 로 옮겨져 .ddv-yr 조상이 없다 → 패널 자체 클래스(.ddv-yr-panel, video-popup.js 가 붙임)로 지정 */
.ddv-yr-panel.gdd-panel { background: #1a1d21; border: 1px solid #3a4048; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); overscroll-behavior: contain; }
.ddv-yr-panel .gdd-item { color: #cfd6de; }
.ddv-yr-panel .gdd-item:hover { background: #23282f; }
.ddv-yr-panel .gdd-item.active { color: #fff; background: #1d467d; }
/* ── 선수 입력 — AI SEARCH 배너 선수검색과 같은 구성: 입력칸 + 후보(현역/비현역, 팀색 좌측선, 이름·생년|드래프트·투수/야수·팀 배지) ── */
.ddv-ps { position: relative; flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 4px;
          height: 30px; padding: 0 6px 0 8px; box-sizing: border-box; border: 1px solid #3a4048; border-radius: 6px; background: #1c1f23; }
.ddv-ps:focus-within { border-color: #4f79b8; }
.ddv-ps.is-set { background: #1d467d; border-color: #1d467d; }
.ddv-ps-lab { flex: 0 0 auto; font-size: 11px; color: #9fb3c8; }
.ddv-ps.is-set .ddv-ps-lab { color: #cfe0f5; }
.ddv-ps-input { flex: 1; min-width: 0; border: 0; background: none; color: #e9edf2; font-size: 12px; outline: none; -webkit-appearance: none; }
.ddv-ps-input::placeholder { color: #6b7785; }
.ddv-ps-input::-webkit-search-cancel-button { display: none; }
.ddv-ps-clear { flex: 0 0 auto; border: 0; background: none; color: #cfe0f5; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ddv-ps-dd {
    position: absolute; z-index: 25; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px;
    max-height: min(320px, 46vh); overflow-y: auto; padding: 4px;
    background: #1a1d21; border: 1px solid #3a4048; border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
}
.ddv-ps-grp { padding: 5px 8px 3px; font-size: 10.5px; font-weight: 700; color: #e9edf2; }
.ddv-ps-grp.is-inactive { color: #6b7785; }
.ddv-ps-item {
    display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: 1px 0; border-left: 3px solid #8a8f98; border-radius: 4px;
    background: #202429; cursor: pointer; font-size: 12px;
}
.ddv-ps-item:hover, .ddv-ps-item.is-hi { background: #2a3038; }
.ddv-ps-item.is-inactive .ddv-ps-name { color: #9fb3c8; }
.ddv-ps-name { font-weight: 700; color: #fff; }
.ddv-ps-extra { font-size: 10px; color: #6b7785; }
.ddv-ps-pos { margin-left: auto; font-size: 10.5px; color: #cfd6de; font-weight: 700; }
.ddv-ps-team { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 3px; min-width: 36px; text-align: center; }
/* 날짜 지정 — 네이티브 date 입력(달력을 못 쓰는 페이지 폴백) */
.ddv-dates { display: flex; align-items: center; gap: 4px; flex: 1 1 100%; }
.ddv-dates-sep { color: #6b7785; font-size: 12px; }
.ddv-date {
    flex: 1; min-width: 0; height: 30px; padding: 0 6px; box-sizing: border-box;
    border: 1px solid #3a4048; border-radius: 6px; background: #1c1f23; color: #cfd6de; font-size: 12px;
    color-scheme: dark;
}
.ddv-date:focus { outline: none; border-color: #4f79b8; }
/* 관리자 메모 배지 — 영상 오른쪽 위 ! 원. 호버(title)/클릭(토스트)으로 내용 */
.ddv-flag {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 22px; height: 22px; border-radius: 50%; padding: 0;
    border: 2px solid #f0883e; background: rgba(16, 18, 20, 0.75); color: #f0883e;
    font-size: 13px; font-weight: 800; line-height: 18px; text-align: center; cursor: pointer;
}
.ddv-flag:hover { background: #f0883e; color: #101214; }
.ddv-chip-go { background: #1d467d; border-color: #1d467d; color: #fff; }
/* 검색형 드롭다운 — 메뉴 맨 위 이름 입력칸 */
.ddv-sel-input {
    display: block; width: 100%; box-sizing: border-box; margin: 2px 0 4px;
    padding: 7px 9px; border: 1px solid #3a4048; border-radius: 5px;
    background: #101214; color: #e9edf2; font-size: 12px; outline: none;
}
.ddv-sel-input:focus { border-color: #4f79b8; }
.ddv-sel-input::placeholder { color: #6b7785; }
/* 검색 결과 행 — 2줄: [날짜 경기 · 이닝/타석/구 … 결과] / [투수→타자 · 구종 구속 · 카운트] */
.ddv-srow { display: block; padding: 6px 10px; }
.ddv-srow-1 { display: flex; align-items: baseline; gap: 6px; font-size: 12px; min-width: 0; }
.ddv-srow-1 b { color: #fff; flex: 0 0 auto; }
.ddv-srow-res { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }
.ddv-srow-res.is-hit { color: #3fb950; }
.ddv-srow-res.is-k { color: #f85149; }
.ddv-srow-2 { margin-top: 2px; font-size: 11.5px; color: #9fb3c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ddv-srow.no-video { opacity: 0.45; cursor: default; }
.ddv-srow-nv { margin-left: 6px; color: #f0883e; font-size: 10.5px; }
.ddv-row.is-cur .ddv-srow-2,
.ddv-row.is-cur .ddv-srow-res,
.ddv-row.is-cur .ddv-srow-res.is-hit,
.ddv-row.is-cur .ddv-srow-res.is-k { color: #fff; }
/* 목록 끝 — 로딩/마지막/결과 없음. 무한 스크롤 감시 대상(IntersectionObserver) */
.ddv-more { padding: 12px; text-align: center; color: #6b7785; font-size: 11.5px; min-height: 1em; }
.ddv-chip:disabled { opacity: 0.35; cursor: default; }
.ddv-chip:disabled:hover { background: #1c1f23; border-color: #3a4048; }
.ddv-list { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 8px; }
/* 리스트 행 공통 — 선택 표시 자리(왼쪽 3px)를 미리 확보해 선택이 바뀌어도 글자가 밀리지 않는다 */
.ddv-row {
    cursor: pointer;
    border-bottom: 1px solid #1d2024;
    box-shadow: inset 3px 0 0 transparent;
}
.ddv-row:hover { background: #1f242a; }
.ddv-row.is-cur { background: #1d467d; color: #fff; box-shadow: inset 3px 0 0 #4fb3ff; }
/* 스크롤바 — 다크 배경에 밝은 기본 스크롤바가 튀어서 */
.ddv-list::-webkit-scrollbar { width: 9px; }
.ddv-list::-webkit-scrollbar-thumb { background: #303a48; border-radius: 5px; }
.ddv-list::-webkit-scrollbar-track { background: transparent; }

.ddv-toast {
    position: fixed;
    left: 50%;
    bottom: 40px;
    transform: translate(-50%, 8px);
    z-index: 3200;
    padding: 9px 16px;
    background: rgba(33, 37, 41, 0.92);
    color: #fff;
    font-size: 13px;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}
.ddv-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* 영상 연결된 Plotly 스캐터 — 점 위 커서 */
.ddv-clickable .scatterlayer .points path { cursor: pointer; }

/* ★폭 820 이하 + 폰 가로(높이 500 이하) — 폭이 820 을 넘는 폰을 눕히면 데스크톱 배치가 되어 영상이 작았다 (09-11).
   JS MOBILE_MQ(video-popup.js) 와 같은 조건을 유지할 것. */
@media (max-width: 820px), (max-height: 500px) and (orientation: landscape) {
    /* 모바일: 전체화면 시트.
       [소스탭] → [영상] → [재생바] → [제목 2줄] → [투구정보 밀집] 까지 상단 고정,
       그 아래 [필터] + [목록]만 스크롤, 맨 아래 [창 닫기] 전폭 버튼.
       ★상단 노치/다이내믹 아일랜드·하단 홈 인디케이터 safe-area 만큼 시트 안쪽 여백 (viewport-fit=cover) */
    .ddv-overlay { padding: 0; align-items: stretch; }
    .ddv-box {
        width: 100%; max-height: none; height: 100%; border-radius: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
    }
    .ddv-head { padding: 8px 10px; flex-shrink: 0; }
    .ddv-src { flex: 1 1 100%; }
    .ddv-src-btn { flex: 1; text-align: center; padding: 8px 4px; font-size: 13px; border-radius: 8px; }
    .ddv-close { display: none; }                                /* 헤더 × 는 숨기고 하단 버튼으로 */
    /* 하단 줄 — 리스트 탭은 [창 닫기] 전폭, 검색 탭은 [필터 적용|필터 초기화|창 닫기] 3등분 (09-12) */
    .ddv-foot { background: #1c1f23; border-top: 1px solid #2a2e33; }
    .ddv-close-bottom, .ddv-box[data-stab="search"] .ddv-foot-btn {
        display: block; flex: 1 1 0; min-width: 0;
        width: auto; padding: 13px 4px; margin: 0;
        background: none; border: none; border-radius: 0;
        color: #e9edf2; font-size: 14px; font-weight: 700; line-height: 1;
    }
    .ddv-box[data-stab="search"] .ddv-foot > * + * { border-left: 1px solid #2a2e33; }
    /* 색 구분 — 필터 적용=파랑(주동작), 필터 초기화=붉은 글씨, 창 닫기=기본 회색 */
    .ddv-box[data-stab="search"] .ddv-chip-go.ddv-foot-btn { background: #1d467d; color: #fff; }
    .ddv-box[data-stab="search"] .ddv-chip-go.ddv-foot-btn:active { background: #17395f; }
    .ddv-box[data-stab="search"] .ddv-foot-btn[data-sreset] { background: #24282d; color: #ff9b9b; }
    .ddv-box[data-stab="search"] .ddv-foot-btn[data-sreset]:active { background: #2e3338; }
    .ddv-sacts { display: none; }                                /* 필터 적용·초기화는 하단 줄로 옮겼다 */
    /* 영상을 잡고 아래로 끌어 닫기 — 끄는 중에는 전환을 끄고 손가락을 그대로 따라온다 */
    .ddv-box { transition: transform 0.18s ease, opacity 0.18s ease; }
    .ddv-box.is-swiping { transition: none; will-change: transform, opacity; }
    .ddv-body { flex-direction: column; overflow: hidden; }
    .ddv-main { flex: none; margin-right: 0; }                   /* 영상 + 재생바 + 제목 + 투구정보 = 고정 */
    .ddv-player { height: min(56.25cqw, 42svh); }                /* 16:9, 가로 모드에서 영상이 화면을 다 먹지 않게 */
    .ddv-cams { left: 6px; top: 6px; }
    .ddv-cam-btn { padding: 6px 10px; }
    .ddv-cam-hint { display: none; }
    /* 재생바: 슬라이더를 윗줄 전폭으로 올리고 아랫줄에 [⏮ ▶ ■ ⏭ 모드] … [배속] */
    .ddv-ctl { padding: 7px 10px; gap: 6px 8px; }
    .ddv-ctl-slider { flex: 1 1 100%; order: -1; }
    .ddv-cbtn { height: 34px; font-size: 12.5px; padding: 0 10px; }
    .ddv-sel-speed .ddv-sel-btn { height: 34px; font-size: 12.5px; }
    .ddv-title { padding: 7px 10px 0; font-size: 12.5px; }
    /* 투구정보 — [로케이션 72px] + 격자 5열×2줄. 투수/타자는 바로 위 제목과 겹쳐 생략, 단위는 좁아서 숨김(항목명으로 충분). */
    .ddv-info { gap: 6px; padding: 6px 10px 8px; border-bottom: 1px solid #2a2e33; min-height: 74px; }
    .ddv-loc svg { width: 59px; height: 74px; }                  /* 등축 세로형 — 높이 = 격자 2줄(35×2+4) */
    .ddv-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 35px; gap: 4px; }
    .ddv-cell { padding: 3px 2px; }
    .ddv-cell[data-k="투수"], .ddv-cell[data-k="타자"] { display: none; }
    .ddv-cell .ddv-k { font-size: clamp(8px, 3.1cqw, 9.5px); margin-bottom: 1px; }   /* 폭 290px → 9px, 235px(작은 폰) → 8px */
    .ddv-cell .ddv-v { font-size: clamp(9.5px, 4.1cqw, 12px); }
    .ddv-u { display: none; }
    /* ★패널 = 바텀시트 (09-11). 높이는 [리스트]·[검색] 탭과 무관하게 같고, 손잡이(.ddv-grip)를 끌어 조절한다.
       .ddv-body 바닥에 붙은 절대배치 — 올리면 제목·투구정보 위를 덮고 영상·재생바는 항상 보인다.
       높이(인라인 px)는 video-popup.js applySheet 가 단계별로 계산: full=재생바 바로 밑 / mid=투구정보 밑(기본) / min=손잡이만.
       overflow:hidden 이어도 필터 드롭다운은 position:fixed(floatMenu)라 잘리지 않는다. */
    .ddv-side {
        position: absolute; top: auto; left: 0; right: 0; bottom: 0; width: auto; z-index: 2;
        height: 50%; min-height: 0; border-left: none; border-top: 1px solid #2a2e33;
        display: flex; flex-direction: column; overflow: hidden;
        box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.35);
        transition: height 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .ddv-side.is-dragging, .ddv-side.is-snap-now { transition: none; }       /* 끄는 동안은 손가락을 그대로 따라온다 */
    /* 손잡이 — 얇은 전폭 띠 + 가운데 '=' 두 줄. 잡고 있으면(또는 누르면) 띠·줄 색이 파랗게 */
    .ddv-grip {
        display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
        height: 18px; background: #16181b; cursor: ns-resize;
        touch-action: none; user-select: none; -webkit-user-select: none;
        transition: background 0.15s;
    }
    .ddv-grip span {
        display: block; width: 56px; height: 6px; box-sizing: border-box;
        border-top: 2px solid #4a5360; border-bottom: 2px solid #4a5360; border-radius: 1px;
        transition: border-color 0.15s;
    }
    .ddv-grip:active, .ddv-side.is-dragging .ddv-grip { background: #1c2a3a; }
    .ddv-grip:active span, .ddv-side.is-dragging .ddv-grip span { border-color: #4fb3ff; }
    .ddv-tabs { touch-action: none; transition: background 0.15s; }   /* 탭 줄도 끌기 손잡이 — 브라우저 스크롤이 가로채지 않게 */
    .ddv-side.is-dragging .ddv-tabs { background: #1c2a3a; }
    .ddv-tab { padding: 10px 0; font-size: 13px; }
    .ddv-sfilters { padding: 7px 10px; gap: 5px; flex: 0 1 auto; }   /* 시트가 낮아도 줄어들며 스크롤 — 초기화·필터 적용까지 닿게 */
    .ddv-sfilters .ddv-sel { flex: 1 1 calc(50% - 5px); }
    .ddv-sel-input { padding: 9px 10px; font-size: 13px; }
    .ddv-srow { padding: 7px 10px; }
    .ddv-srow-1 { font-size: 12.5px; }
    .ddv-srow-2 { font-size: 11.5px; }
    .ddv-chip { flex: 0 0 auto; text-align: center; padding: 0 10px; font-size: 12px; border-radius: 8px; }
    .ddv-sel-btn, .ddv-chip, .ddv-date, .ddv-ps, .ddv-preset, .ddv-qsf .pcal-trigger { height: 34px; }
    .ddv-sel-opt { padding: 10px 10px; font-size: 12.5px; }
    .ddv-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
/* 폰 가로 — 영상 우선: 재생바 한 줄, 영상 높이 = 화면 − (소스탭 49 · 재생바 49 · 손잡이 19 · 창닫기 41 ≈ 162px), 좌우 노치 여백.
   (영상 칸은 항상 전폭 — 영상은 object-fit:contain 으로 가운데) */
@media (max-height: 500px) and (orientation: landscape) {
    .ddv-box { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
    .ddv-player { height: min(56.25cqw, calc(100svh - 162px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); }
    .ddv-ctl-slider { flex: 1 1 200px; order: 0; }
}