/*
 * 사이트 첫 화면 강사 목록(x-widget.site.teachers) — SSOT 11절 "영어 교육 브랜드 사이트".
 * 자리는 x-widget.site.teacher-finder(가운데 칸, site-finder.css)가 정한다. 카드 모양은 공용 카드 목록(.teacher-card-list, teacher-directory.css).
 * 한 줄의 강사 수는 가운데 칸 너비로 정한다 — 데스크톱은 최소 3명, 넓을수록 4·5명까지(2026-10-30 사용자 지시) · 좁은 화면 2명 · 휴대폰 1명.
 * 큰 정사각형 사진 위·간결한 수업 정보 아래.
 */
.site-teachers { display: grid; min-inline-size: 0; container: site-teachers / inline-size; }
/* 제목 줄은 화면 읽기 프로그램에만 남긴다 */
.site-teachers-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-teachers .teacher-cards { margin: 0; grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-m); align-items: stretch; }
@container site-teachers (width >= 30rem) { .site-teachers .teacher-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container site-teachers (width >= 44rem) { .site-teachers .teacher-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container site-teachers (width >= 70rem) { .site-teachers .teacher-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container site-teachers (width >= 88rem) { .site-teachers .teacher-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.site-teachers .teacher-card-list .teacher-card { box-shadow: var(--wa-shadow-m); }
/* 사진을 크게 두고 수업 선택에 필요한 정보만 아래에 모은다. */
.site-teachers .teacher-card-list .directory-card-link strong { font-size: var(--wa-font-size-m); }
.site-teachers .teacher-card-list .teacher-card-body { gap: var(--wa-space-2xs); padding: var(--wa-space-s); }
.site-teachers .teacher-card-list .teacher-card { align-self: start; }
.site-teachers .teacher-card-list .teacher-card-body .directory-subjects { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.site-teachers .teacher-card-list .teacher-card-body > .tags { margin-block-start: 0; }
.site-teachers .teacher-card-list .directory-card-link { gap: 0; }
.site-teachers .directory-lesson-facts { gap: var(--wa-space-2xs); }
.site-teachers .directory-track-record dt { flex-basis: auto; }
.site-teachers .teacher-card-body > .tags:empty { display: none; }
/* 좁은 카드에서도 이름 · 국가를 한 줄에 — 이름이 줄어든다 */
.site-teachers .directory-identity { flex-wrap: nowrap; }
.site-teachers .directory-country { flex: none; white-space: nowrap; }
.site-teachers .directory-languages { flex-wrap: nowrap; min-inline-size: 0; }
.site-teachers .directory-languages dt { flex-shrink: 0; }
.site-teachers .directory-languages dd { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-teachers .directory-subjects { flex-wrap: nowrap; }
.site-teachers .directory-subjects .tag { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-teachers .directory-subjects-more { flex-shrink: 0; }
.site-teachers .directory-lesson-footer { flex-wrap: nowrap; padding-block-start: var(--wa-space-xs); gap: var(--wa-space-xs); }
.site-teachers .directory-lesson-price { flex: 1; }
.site-teachers .directory-lesson-price > span:first-child { flex-basis: auto; }
.site-teachers .directory-lesson-price b { font-size: var(--wa-font-size-m); }
.site-teachers .directory-schedule-link { flex-shrink: 0; padding: var(--wa-space-xs); font-size: var(--wa-font-size-xs); }
.site-teachers :is(.directory-summary-label, .directory-schedule-link > span) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.directory-photo-badges { position: absolute; inset-inline: var(--wa-space-s); inset-block-end: var(--wa-space-s); }
.site-teachers .directory-photo-badges .tags { display: flex; align-items: center; gap: var(--wa-space-2xs); }
.site-teachers .directory-photo-badges :is(.tag, .stars) { border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-pill); padding: var(--wa-space-2xs) var(--wa-space-xs); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); font-size: var(--wa-font-size-xs); }
/* 사진 오른쪽 아래 별 — 위: SONUB 본사 추천(금색 별만), 아래: 학생 추천(분홍 · 하트 아이콘, 최대 5개). 배경 없이 사진 위에 바로 놓아 세 테마 모두 같은 밝은 색 + 얇은 그림자, 뜻은 title 로(2026-10-31 사용자 지시) */
.site-teachers .directory-photo-badges { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wa-space-2xs); }
.site-teachers .directory-photo-badges .tags { flex-wrap: wrap; min-inline-size: 0; margin: 0; }
.directory-star-rows {
	display: grid;
	justify-items: end;
	flex: none;
	margin-inline-start: auto;
	line-height: 1.25;
}
.directory-stars { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); font-size: var(--wa-font-size-s); letter-spacing: .04em; white-space: nowrap; text-shadow: 0 0 2px var(--wa-color-gray-10), 0 1px 3px var(--wa-color-gray-10); }
.directory-stars > .fa-solid { font-size: var(--wa-font-size-xs); filter: drop-shadow(0 1px 2px var(--wa-color-gray-10)); }
.directory-stars-hq { color: var(--wa-color-yellow-80); }
.directory-stars-students { color: var(--wa-color-pink-70); }
.site-teachers .teacher-card-media .directory-verified { inset-block-start: var(--wa-space-s); inset-block-end: auto; }
@media (max-width: 40rem) {
	.site-teachers .teacher-card-list .teacher-card-body { padding: var(--wa-space-2xs); gap: 0; line-height: 1.4; }
	.site-teachers .directory-lesson-facts { line-height: 1.4; }
	.site-teachers .directory-lesson-footer { padding-block-start: var(--wa-space-2xs); }
	.site-teachers .teacher-card-media .teacher-avatar-initial { font-size: calc(2.6rem * var(--wa-font-size-scale, 1)); }
}

/* 정사각형 사진이 카드의 70% 이상을 차지하고, 수업 정보는 아래에 짧게 모인다. */
.site-teachers .teacher-card-list .teacher-card-media .teacher-avatar { aspect-ratio: 1; }
.site-teachers .teacher-card-media .teacher-avatar img { object-fit: cover; object-position: center; }

/*
 * 학생 홈 카드 hover 연출(x-widget.teacher.directory-card 의 [data-card-movie], 2026-10-30 사용자 지시).
 * 마우스·키보드 초점이 오면 카드가 떠올라 강조 테두리를 두르고(z-index 로 이웃 위), 아래로 카드 높이의 30% 만큼 소개 판(.teacher-card-more)이
 * 펼쳐져 다음 줄 위에 겹친다. 사진 위 [동영상 보기] 단추가 커지며 "동영상 보기" 말풍선이 붙는다.
 * 한 번만 도는 움직임은 webmovie 키트(calm — 단추 blast · 말풍선 stamp, public/js/teacher-card-movie.js 가 재생)뿐이고, 끝나면 멈춘다. 소개 판은 흔들리지 않는다(2026-11-02 사용자 지시).
 * 카드 흔들림·사진 빛·불꽃은 너무 많아 뺐다(2026-10-31 사용자 지시). 움직임 줄이기면 모양만 바뀐다. hover 가 없는 기기(휴대폰)는 단추만 보인다.
 */
.site-teachers .teacher-card-list .teacher-card[data-card-movie] {
	/* hover 색은 테마마다(okay.css 의 --site-card-hover · --site-card-hover-bg — 기본 주황 · 다크 밝은 주황 · 핑크 분홍), 없으면 사이트 강조색 */
	--card-hover: var(--site-card-hover, var(--sonub-accent));
	--card-hover-bg: var(--site-card-hover-bg, var(--wa-color-surface-raised));
	--card-hover-ring: 0 0 0 3px color-mix(in srgb, var(--card-hover) 60%, transparent);
	--card-hover-glow: 0 0.9rem 2.2rem -0.6rem color-mix(in srgb, var(--card-hover) 45%, transparent);
	position: relative;
	overflow: visible;
	transform-origin: 50% 0;
	transition: translate 240ms var(--webmovie-ease-spring), scale 240ms var(--webmovie-ease-spring), box-shadow 200ms ease, border-color 200ms ease;
}
.site-teachers .teacher-card[data-card-movie] .teacher-card-media { border-start-start-radius: var(--sonub-radius-panel); border-start-end-radius: var(--sonub-radius-panel); }
.site-teachers .teacher-card-more {
	position: absolute;
	z-index: 1;
	inset-inline: -1px;
	inset-block-start: calc(100% - 1px);
	block-size: 30%;
	box-sizing: border-box;
	display: grid;
	align-content: start;
	gap: var(--wa-space-2xs);
	padding: var(--wa-space-s);
	overflow: hidden;
	border: 1px solid var(--card-hover);
	border-block-start: 1px dashed color-mix(in srgb, var(--card-hover) 40%, var(--sonub-border));
	border-end-start-radius: var(--sonub-radius-panel);
	border-end-end-radius: var(--sonub-radius-panel);
	background: var(--card-hover-bg);
	/* 카드와 같은 강조 고리 · 그림자 — 카드와 맞닿는 위쪽만 잘라 낸다 */
	box-shadow: var(--card-hover-ring), var(--card-hover-glow);
	clip-path: inset(0 -2rem -3rem -2rem);
	color: var(--sonub-ink);
	text-align: start;
	opacity: 0;
	visibility: hidden;
}
.site-teachers .teacher-card-more p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.site-teachers .teacher-card-more-headline { -webkit-line-clamp: 2; font-weight: var(--wa-font-weight-semibold); font-size: var(--wa-font-size-s); line-height: 1.35; }
.site-teachers .teacher-card-more-about { -webkit-line-clamp: 3; color: var(--sonub-muted); font-size: var(--wa-font-size-xs); line-height: 1.45; }

/* [동영상 보기] — 사진 위 끝 쪽(본인 확인 표시는 시작 쪽). 동그란 단추 · 다홍→장밋빛 그라데이션 · 반투명 흰 테두리 · 위쪽 유리빛(2026-10-30 사용자 지시 —
   빨간 재생 단추에 익숙한 사람들이 바로 알아보되, 유튜브 단추를 흉내 내지 않는다). 흰 삼각형은 두 끝 색 모두 대비 4.5:1 이상 */
.site-teachers .teacher-card-play {
	--play-red: var(--wa-color-red-50);
	--play-rose: var(--wa-color-pink-50);
	position: absolute;
	z-index: 2;
	inset-block-start: var(--wa-space-s);
	inset-inline-end: var(--wa-space-s);
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	padding-inline-start: 0.2rem;
	border: 2px solid color-mix(in srgb, var(--wa-color-neutral-95) 70%, transparent);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--wa-color-neutral-95) 38%, transparent), transparent 60%),
		linear-gradient(140deg, var(--play-red), var(--play-rose));
	box-shadow: 0 0.35rem 0.9rem -0.2rem color-mix(in srgb, var(--play-red) 55%, transparent);
	color: var(--wa-color-neutral-95);
	font-size: var(--wa-font-size-s);
	cursor: pointer;
	transition: box-shadow 200ms ease, border-color 200ms ease;
	--webmovie-burst: var(--play-red), var(--play-rose), var(--wa-color-yellow-80);
}
.site-teachers .teacher-card-play > svg { transition: scale 240ms var(--webmovie-ease-spring); }
.site-teachers .teacher-card-play:focus-visible { outline: 3px solid var(--wa-color-focus); outline-offset: 3px; }
.site-teachers .teacher-card-play-tip {
	position: absolute;
	inset-block: 0;
	inset-inline-end: calc(100% + var(--wa-space-xs));
	block-size: fit-content;
	margin-block: auto;
	padding: var(--wa-space-2xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-neutral-fill-loud);
	box-shadow: var(--wa-shadow-m);
	color: var(--wa-color-neutral-on-loud);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
/* 재생 중 — 사진 자리에서 영상(홈 추천 강사와 같은 homeTeacherVideo) */
.site-teachers .teacher-card.is-playing .teacher-card-media .teacher-avatar { visibility: hidden; }
.site-teachers .teacher-card-video {
	position: absolute;
	z-index: 2;
	inset-block-start: 0;
	inset-inline: 0;
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: auto;
	aspect-ratio: 1;
	border: 0;
	border-start-start-radius: var(--sonub-radius-panel);
	border-start-end-radius: var(--sonub-radius-panel);
	background: var(--wa-color-neutral-fill-loud);
	object-fit: contain;
}

/* 키보드 초점은 :focus-visible 만 — 마우스로 눌러 생긴 초점(:focus-within)은 뒤로 가기로 돌아와도 남아 카드가 계속 강조돼 보였다 */
@media (hover: hover) {
	.site-teachers .teacher-card-list .teacher-card[data-card-movie]:is(:hover, :has(:focus-visible)) {
		z-index: 5;
		translate: 0 0;   /* 위로 뜨면 맨 윗줄이 고정된 검색 줄 밑으로 잘린다 — 위 끝을 기준으로 커진다 */
		scale: 1.02;
		border-color: var(--card-hover);
		border-end-start-radius: 0;
		border-end-end-radius: 0;
		background: var(--card-hover-bg);
		box-shadow: var(--card-hover-ring), var(--card-hover-glow);
	}
	.site-teachers .teacher-card[data-card-movie]:is(:hover, :has(:focus-visible)) .teacher-card-media img { scale: 1.05; }
	.site-teachers .teacher-card[data-card-movie]:is(:hover, :has(:focus-visible)) .teacher-card-more { opacity: 1; visibility: visible; }
	.site-teachers .teacher-card[data-card-movie]:is(:hover, :has(:focus-visible)) .teacher-card-play {
		border-color: var(--wa-color-neutral-95);
		box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--play-rose) 28%, transparent), 0 0.5rem 1.2rem -0.2rem color-mix(in srgb, var(--play-red) 60%, transparent);
	}
	.site-teachers .teacher-card[data-card-movie]:is(:hover, :has(:focus-visible)) .teacher-card-play > svg { scale: 1.15; }
	.site-teachers .teacher-card[data-card-movie]:is(:hover, :has(:focus-visible)) .teacher-card-play-tip { opacity: 1; visibility: visible; }
}