/* 강사 소개 영상 미리 보기(x-teacher.video-preview — SSOT 3절 "소개 영상", 2026-11-13 사용자 지시).
   마우스를 올린 동안 사진 자리에서 소리 없이 재생한다. 칸(부모가 자리 · 크기를 정한다)을 채우고, 재생이 시작되면(부모의 is-previewing) 나타난다.
   누름은 밑의 사진 · 링크로 지나간다. YouTube 16:9 틀은 칸의 모양(정사각형 강사 카드 · 16:9 강사 상세)에 맞춰 넘치는 쪽을 잘라 가운데를 보인다 */
.teacher-video-preview {
	container-type: size;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}
.is-previewing > .teacher-video-preview { opacity: 1; }
.teacher-video-preview > video { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.teacher-video-preview > iframe {
	position: absolute;
	inset: -100%;
	inline-size: max(100cqi, 100cqb * 16 / 9);
	block-size: max(100cqb, 100cqi * 9 / 16);
	max-inline-size: none;   /* 본문 공용 iframe { max-inline-size: 100% } 를 풀어야 넘치는 쪽을 자를 수 있다 */
	margin: auto;
	border: 0;
}
/* 소리 없이 재생 중일 때 가운데의 큰 볼륨 단추 [소리 켜고 보기] — 누르면 원본 영상을 소리와 함께(브라우저는 누른 뒤에만 소리를 허락한다).
   어두운 반투명 동그라미에 흰 아이콘 · 아래 알약 글자, 마우스를 올리면 사진 재생 단추와 같은 다홍. 나타날 때 빛 고리를 두 번 퍼뜨린다 */
.teacher-video-preview > .teacher-video-sound {
	position: absolute;
	z-index: 1;
	inset: 0;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: var(--wa-space-xs);
	inline-size: fit-content;
	block-size: fit-content;
	margin: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wa-color-neutral-95);
	font: inherit;
	pointer-events: auto;
	cursor: pointer;
}
.teacher-video-sound-icon {
	display: grid;
	place-items: center;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wa-color-neutral-10) 62%, transparent);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--wa-color-neutral-95) 40%, transparent);
	font-size: calc(1.9rem * var(--wa-font-size-scale, 1));
	transition: background-color 160ms ease, scale 200ms ease;
	animation: teacher-video-sound-ring 1s ease-out 2;
}
.teacher-video-sound-text {
	padding: var(--wa-space-2xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-pill);
	background: color-mix(in srgb, var(--wa-color-neutral-10) 72%, transparent);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
	white-space: nowrap;
}
.teacher-video-sound:hover .teacher-video-sound-icon { background: var(--wa-color-red-50); scale: 1.08; }
@keyframes teacher-video-sound-ring {
	from { box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--wa-color-neutral-95) 40%, transparent), 0 0 0 0 color-mix(in srgb, var(--wa-color-red-50) 60%, transparent); }
	to { box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--wa-color-neutral-95) 40%, transparent), 0 0 0 1.2rem transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.teacher-video-preview,
	.teacher-video-sound-icon { transition: none; animation: none; }
}