/* 테마의 16:9 상자(.responsive-player)를 Plyr 가 꽉 채우도록 */
.responsive-player > .plyr,
.responsive-player > video.nvi-plyr {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
/* 강조색은 테마 옵션 MAIN COLOR 로 덮어쓴다 (플러그인이 인라인 스타일로 넣음). 아래는 옵션을 못 읽을 때의 기본값 */
.responsive-player .plyr { --plyr-color-main: #FF3565; background: #000; }
.responsive-player .plyr video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.responsive-player .plyr__poster { background-size: contain; background-color: #000; }

/* 탐색바 말풍선 미리보기 (썸네일 시트의 한 칸) */
.plyr__progress { position: relative; }
.nvi-seek-thumb {
	position: absolute; bottom: calc(100% + 14px); left: 0; z-index: 3;
	width: 180px; transform: translateX(-50%);
	padding: 3px; border-radius: 6px; background: rgba(0, 0, 0, .85);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
	opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s;
}
.nvi-seek-thumb.is-shown { opacity: 1; visibility: visible; }
.nvi-seek-thumb::after { /* 말풍선 꼬리 */
	content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
	border: 6px solid transparent; border-top-color: rgba(0, 0, 0, .85);
}
.nvi-seek-img { width: 100%; height: 101px; border-radius: 4px; background: #111 no-repeat; }
.nvi-seek-time { padding-top: 3px; color: #fff; font: 600 12px/1.2 sans-serif; text-align: center; }
.responsive-player.nvi-mobile .nvi-seek-thumb { width: 150px; }

/* 모바일 더블탭 5초 이동 표시 (누른 쪽 절반에 반원). 위치·크기는 스크립트가 영상이 그려진 영역에 맞춘다 */
.nvi-dtap {
	position: absolute; top: 0; height: 100%; width: 42%; z-index: 4;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font: 700 15px/1 sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
	background: rgba(255, 255, 255, .05); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.nvi-dtap.is-left { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.nvi-dtap.is-right { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.nvi-dtap.is-shown { opacity: 1; }

/* 모바일: 탐색바 + 전체화면만. 탐색바를 손가락으로 잡기 쉽게 두껍게 */
.responsive-player.nvi-mobile .plyr__controls { padding: 8px 10px 10px; gap: 8px; }
.responsive-player.nvi-mobile .plyr__progress__container { flex: 1; margin: 0; }
.responsive-player.nvi-mobile .plyr {
	--plyr-range-track-height: 6px;
	--plyr-range-thumb-height: 18px;
	--plyr-control-icon-size: 20px;
}

/* 자막: 태-영화체 (자막에만 적용). 영화 자막처럼 검은 테두리 + 그림자로 밝은 장면에서도 읽히게, 배경 상자는 없앰 */
@font-face {
	font-family: "TaeMovie";
	src: url("fonts/Tae.woff2") format("woff2"), url("fonts/Tae.ttf") format("truetype");
	font-display: swap;
}
.plyr__captions { font-family: "TaeMovie", sans-serif; }
.plyr__captions .plyr__caption {
	background: transparent;
	font-family: "TaeMovie", sans-serif;
	letter-spacing: .02em;
	/* 테두리는 그림자 8개를 겹치면 가장자리가 먼지처럼 번져서, 글자 뒤에 그리는 실제 외곽선으로 */
	-webkit-text-stroke: .18em #000;
	paint-order: stroke fill;   /* 외곽선을 글자 뒤에 → 글자 획이 가늘어지지 않음 */
	text-shadow: 0 .06em .18em rgba(0, 0, 0, .55);
}

/* 테마가 사이트의 모든 button 을 테마 색으로 !important 칠함 → 플레이어 버튼은 원래(투명) 모양으로 되돌린다.
   켜진 상태가 보이도록: 자막(CC)이 켜져 있으면 CC 버튼만 테마 색 배경. 가운데 큰 재생 버튼은 테마 색 유지. */
.plyr .plyr__controls .plyr__control,
.plyr .plyr__menu__container .plyr__control {
	background: transparent !important;
	border-color: transparent !important;
}
.plyr .plyr__controls .plyr__control:hover,
.plyr .plyr__controls .plyr__control:focus-visible,
.plyr .plyr__controls .plyr__control[data-plyr="captions"].plyr__control--pressed {
	background: var(--plyr-color-main, #00b2ff) !important;
	border-color: var(--plyr-color-main, #00b2ff) !important;
	color: #fff;
}
.plyr .plyr__menu__container .plyr__control:hover {
	background: var(--plyr-color-main, #00b2ff) !important;
}
@media (hover: none) {   /* 폰: 누른 뒤 hover 가 남아 꺼진 CC 도 칠해져 보이는 것 방지 */
	.plyr .plyr__controls .plyr__control:hover:not(.plyr__control--pressed) { background: transparent !important; }
}
.plyr .plyr__control--overlaid { background: var(--plyr-color-main, #00b2ff) !important; border-color: transparent !important; }

/* 자막 크기 = 플레이어(영상) 폭에 비례 (폭의 약 2.9% = 처음 정한 3.6% 의 80%). 폰·PC·전체화면 모두 같은 비율.
   플레이어 폭을 기준으로 재기 위해 .plyr 를 컨테이너로 지정 (전체화면이 되면 그 크기로 다시 계산됨). */
.plyr { container-type: inline-size; }
.plyr .plyr__captions { font-size: clamp(13px, 2.88cqw, 48px);   /* 폰은 최소 13px (예전 폰 크기 그대로) */ }
.plyr .plyr__captions .plyr__caption { font-size: inherit; }

/* 자막 글자를 드래그·복사하지 못하게 */
.plyr .plyr__captions, .plyr .plyr__captions * {
	-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}