/* 공략 영상 재생기(Plyr) 사이트 모양: 캐릭터 공략 · 보스 공략(탭 본문)에서만 불러옴 (예전엔 dnd2.css 에 있어 모든 화면이 받았음). vendor/plyr.css 와 같이 씀 */
/* ---------- 공략 영상 재생기 (Plyr, js/dnd2-video.js · css/vendor/plyr.css): 캐릭터 콤보 · 보스 공략 영상 칸 ---------- */
/* 칸(4:3, 게임 화면 비율)을 꽉 채우고, 색은 사이트 보라색. 예전 가운데 ▶ 단추는 Plyr 의 큰 ▶ 로 대신 */
.has-plyr { --plyr-color-main: var(--primary); --plyr-video-background: #000; --plyr-font-family: var(--font); --plyr-control-radius: var(--radius-sm); --plyr-range-thumb-height: 12px; --plyr-video-control-background-hover: var(--primary); }
.has-plyr > .plyr { width: 100%; height: 100%; }
.has-plyr .plyr__video-wrapper { width: 100%; height: 100%; }
.has-plyr .plyr video { width: 100%; height: 100%; object-fit: fill; }
.has-plyr > .cx-dex__play, .has-plyr > .bxt-dex__play, .has-plyr > .cx-vol { display: none; }
.has-plyr .plyr__control--overlaid { padding: var(--sp-4); }
/* 조작 줄 안 사이트 소리 막대 (스피커 = 끄기/켜기, 막대 = 크기) */
.dv-vol { display: flex; align-items: center; gap: 2px; margin-inline: var(--sp-1); }
.dv-vol__btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; cursor: pointer; }
.dv-vol__btn:hover { background: var(--primary); }
.dv-vol__btn svg { width: 18px; height: 18px; }
.plyr--full-ui .dv-vol input.dv-vol__bar { width: 72px; color: var(--primary); }   /* 막대 모양은 Plyr 의 input[type=range] 그대로 (js 가 --value 를 넣음). 폭은 plyr.css 의 100% 보다 세게 */
.dv-vol__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--focus-rgb), .45); }
/* 전체 화면: Plyr 는 영상을 감싼 틀을 키우므로 늘이지 않고 비율대로 */
.has-plyr .plyr--fullscreen-active video, .has-plyr .plyr:fullscreen video { object-fit: contain; }
/* 폰: 누르는 곳 44px, 소리는 스피커 단추만 (막대를 빼서 위치 막대 자리를 넓힘), 길이 글자도 뺌 */
@media (max-width: 768px) {
  .has-plyr .plyr__controls .plyr__control, .dv-vol__btn { min-width: 44px; min-height: 44px; }
  .plyr--full-ui .dv-vol input.dv-vol__bar, .has-plyr .plyr__time--duration { display: none; }
  .dv-vol { margin-inline: 0; }
}