/*
 * 사이트 첫 화면 강사 찾기(x-widget.site.teacher-finder) — SSOT 11절 "영어 교육 브랜드 사이트" · 3절 "강사 검색 조건"(2026-10-30 사용자 지시).
 * 본문(.okay-content 64rem)을 벗어나 화면 너비를 꽉 채운다 — 같은 세 칸(사이드 · 가운데 · 사이드)을 위 줄(배너 · 검색 양식 · 배너)과
 * 아래 줄(시작 단계 · 강사 카드 · 회원 패널)이 같이 쓴다. 위 줄은 메인 메뉴 아래에 고정, 사이드바는 위 줄 아래에 고정(가운데만 스크롤).
 * 메인 메뉴·위 줄의 높이는 public/js/site-finder.js 가 --site-finder-bar · --site-finder-head 로 넣는다.
 * 한 줄의 강사 수(3~5명)는 site-teachers.css 가 가운데 칸 너비로 정한다.
 * 첫 화면이 아닌 화면의 좌우 사이드바(x-widget.site.side-frame)도 같은 시작 단계 · 회원 패널 모양을 쓴다(아래 .site-rails).
 */
body:has(.site-finder) { overflow-x: clip; }
/* 본문 칸의 가로 잘림(content.css)을 풀어 준다 — 그대로 두면 칸 밖의 좌우 사이드바와 검색 양식 양 끝이 잘린다. 문서 폭은 위 body 가 지킨다 */
:is(.content, .site-content):has(.site-finder) { overflow-x: visible; }
.site-finder {
	--site-finder-side: clamp(13rem, 18vw, 21rem);
	--site-finder-gap: var(--wa-space-l);
	/* 위 줄 아래 여백 — 위 줄 배경 밖에 두어, hover 로 커지는 맨 윗줄 강사 카드의 강조 테두리가 위 줄에 가리지 않게(site-teachers.css) */
	--site-finder-room: var(--wa-space-s);
	--site-finder-stick: calc(var(--site-finder-bar, 4.4rem) + var(--site-finder-head, 9rem) + var(--site-finder-room));
	display: grid;
	box-sizing: border-box;
	inline-size: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-block-start: calc(-1 * var(--wa-space-xl));
	padding-inline: var(--wa-space-l);
}
.site-finder-top,
.site-finder-body {
	display: grid;
	grid-template-columns: var(--site-finder-side) minmax(0, 1fr) var(--site-finder-side);
	column-gap: var(--site-finder-gap);
}
.site-finder-body { padding-block-start: var(--site-finder-room); }
.site-finder-top {
	position: sticky;
	inset-block-start: var(--site-finder-bar, 4.4rem);
	z-index: 15;
	padding-block: var(--wa-space-m) calc(var(--wa-space-m) - var(--site-finder-room));
	/* 아래로 지나가는 카드를 가린다 — 학생 사이트 바탕과 같은 색(okay.css 의 --okay-page) */
	background: var(--okay-page, var(--wa-color-surface-default));
}

/* 임시 배너·빈 사이드바 — 아직 내용이 없는 자리 */
.site-finder-banner,
.site-finder-rail:empty {
	box-sizing: border-box;
	border: 2px dashed color-mix(in srgb, var(--okay-warm-soft, var(--wa-color-surface-border)) 45%, var(--wa-color-surface-border));
	border-radius: var(--sonub-radius-panel);
	background: color-mix(in srgb, var(--wa-color-surface-raised) 60%, transparent);
}
/* 왼쪽 위 배너 — 8초마다 문장이 넘어가는 webmovie 플레이어(x-widget.site.finder-movie, 2026-10-31 사용자 지시). 움직일 때는 칸 안에 가둬 위 줄 높이를 밀지 않고,
   움직임 줄이기면 세 문장을 차례로 보여 칸이 그만큼 자란다 */
.site-finder-banner:has(.site-finder-movie) { position: relative; border: 0; background: none; }
.site-finder-movie {
	--webmovie-burst: var(--okay-warm, var(--site-accent)), var(--site-accent), var(--wa-color-yellow-80);
	display: grid;
	box-sizing: border-box;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-xs) var(--wa-space-s) var(--wa-space-3xs);
	/* 옆의 검색 양식과 같은 평평한 카드(2026-10-31 사용자 지시 "그라디언트 없이 단출하게") */
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-m);
	container-type: inline-size;
}
@media (prefers-reduced-motion: no-preference) {
	html.webmovie-js .site-finder-movie { position: absolute; inset: 0; overflow: clip; }
	html.webmovie-js .site-finder-movie.webmovie-player-on { grid-template-rows: minmax(0, 1fr) auto; gap: 0; }
}
.site-finder-movie-scene {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	min-inline-size: 0;
	min-block-size: 0;
}
.site-finder-movie-icon {
	display: grid;
	flex: none;
	place-items: center;
	color: var(--site-accent);
	font-size: var(--wa-font-size-l);
}
.site-finder-movie-scene h2 {
	min-inline-size: 0;
	margin: 0;
	color: var(--wa-color-text-normal);
	font-size: clamp(calc(0.84rem * var(--wa-font-size-scale, 1)), 5.8cqi, calc(1rem * var(--wa-font-size-scale, 1)));
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.35;
	text-wrap: balance;
}
/* 오른쪽 위 권유 배너 — 장면 전체가 그 화면 링크. 마친 장면을 빼기 전(site-finder.js 가 플레이어로 켜기 전)에는 문장을 감춰 깜빡이지 않게 한다 */
.site-finder-movie-link {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	min-inline-size: 0;
	color: inherit;
	text-decoration: none;
}
.site-finder-movie-link:hover h2,
.site-finder-movie-link:focus-visible h2 { color: var(--site-accent); text-decoration: underline; text-underline-offset: 0.2em; }
@media (prefers-reduced-motion: no-preference) {
	html.webmovie-js .site-finder-movie[data-site-finder-hints]:not([data-webmovie-player]) > .site-finder-movie-scene { visibility: hidden; }
}
.site-finder-movie > .webmovie-controls { gap: var(--wa-space-2xs); padding-block-start: 0; color: var(--site-accent); }
/* 사이트 공통 button 규칙이 키트 단추의 칸·여백을 바꾸므로 조작 줄 크기를 여기서 다시 맞춘다(진행 막대 너비가 0 이 되던 것) */
.site-finder-movie .webmovie-toggle { block-size: 1.5rem; inline-size: 1.5rem; min-block-size: 0; padding: 0; border: 0; background: none; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-2xs); }
.site-finder-movie .webmovie-seg { display: block; block-size: 1.5rem; min-block-size: 0; padding: 0; }
.site-finder-movie .webmovie-seg > span { block-size: 2px; background: var(--wa-color-surface-border); }
/* 키트의 webmovie-bar 는 from 만 있어 시작값 scale 0 그대로 끝난다 — 지금 장면의 막대가 8초 동안 차오르게 끝값을 준다 */
.site-finder-movie .webmovie-seg-on > span::after { animation-name: site-finder-movie-fill; }
@keyframes site-finder-movie-fill { from { scale: 0 1; } to { scale: 1 1; } }
.site-finder-rail {
	position: sticky;
	inset-block-start: var(--site-finder-stick);
	align-self: start;
	box-sizing: border-box;
	max-block-size: calc(100dvh - var(--site-finder-stick) - var(--wa-space-m));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.site-finder-rail:empty { block-size: calc(100dvh - var(--site-finder-stick) - var(--wa-space-m)); }
.site-finder-rail > * { margin: 0; }

/* 검색 양식 — 첫 줄 과목 · 가격, 둘째 줄 국적 · 시간대 · 정렬 · [검색]. 조건마다 칩을 펼쳐 둔다(x-widget.site.finder-chips, SSOT 3절 "강사 검색 조건", 2026-10-31 사용자 지시) */
.site-finder-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wa-space-xs) var(--wa-space-s);
	margin: 0;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-m);
}
.site-finder-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 첫 줄을 과목 · 가격이 다 채워 둘째 줄이 갈린다. 둘째 줄 너비는 칩 글자 길이에 맞춘 비율 */
.site-finder-subject { flex: 1 1 calc(45% - var(--wa-space-s)); }
.site-finder-price { flex: 1 1 55%; }
.site-finder-country { flex: 9 1 0; }
.site-finder-time { flex: 14 1 0; }
.site-finder-sort { flex: 10 1 0; }
.site-finder-field {
	--site-finder-chip-pad: calc(var(--wa-space-2xs) * 1.25);
	position: relative;
	display: flow-root;
	box-sizing: border-box;
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
/* float 이면 legend 가 칸 안의 첫 줄이 된다 */
.site-finder-field > legend {
	float: inline-start;
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	inline-size: 100%;
	margin-block-end: var(--wa-space-3xs);
	padding: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-2xs);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.3;
	white-space: nowrap;
}
.site-finder-field > legend .fa-solid { color: var(--site-accent); }
.site-finder-chips { clear: both; gap: var(--wa-space-3xs); }
/* 칩 — 테두리 없이 옅은 바탕, 고르면 사이트색 바탕으로만 강조한다(2026-10-31 사용자 지시 "좀 더 컴팩트하게"). 라디오는 보이지 않는다 */
.site-finder-chip {
	position: relative;
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-3xs) var(--site-finder-chip-pad);
	border: 0;
	background: color-mix(in srgb, var(--wa-color-text-quiet) 9%, transparent);
	font-size: var(--wa-font-size-2xs);
	line-height: 1.4;
	transition: background-color 160ms ease, color 160ms ease;
}
.site-finder-chip:hover { background: color-mix(in srgb, var(--site-accent) 18%, transparent); }
.site-finder-chip input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }
.site-finder-chip:has(input:focus-visible),
summary.site-finder-chip:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.site-finder-chip:has(input:checked),
.site-finder-chip.is-picked { background: var(--site-accent); color: var(--site-on-accent, var(--wa-color-neutral-95)); font-weight: var(--wa-font-weight-semibold); }
/* [기타] — 패널은 칸(.site-finder-field) 기준으로 펼쳐 칸 폭을 넘지 않고, 위 줄 높이를 밀지 않는다 */
.site-finder-more { margin: 0; padding: 0; border: 0; background: none; }
.site-finder-more > summary,
.site-finder-more[open] > summary { display: flex; margin: 0; padding: var(--wa-space-3xs) var(--site-finder-chip-pad); list-style: none; }
.site-finder-more > summary::-webkit-details-marker { display: none; }
.site-finder-more > summary::after { content: none; }
.site-finder-more > summary .fa-solid { font-size: 0.7em; transition: rotate 160ms ease; }
.site-finder-more[open] > summary .fa-solid { rotate: 180deg; }
.site-finder-more-panel {
	position: absolute;
	inset-block-start: calc(100% + var(--wa-space-2xs));
	inset-inline: 0;
	z-index: 20;
	padding: var(--wa-space-xs);
	border: 1px solid var(--wa-color-surface-border);   /* 아래 칩 위에 겹치므로 경계가 필요하다 */
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-l);
}
.site-finder-submit {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-2xs);
	align-self: center;
	block-size: 2.25rem;
	padding-inline: var(--wa-space-m);
	border: 0;
	border-radius: var(--wa-border-radius-m);
	/* 주황 보조색(학생 기본 테마) — 테마마다 okay.css 의 --okay-warm */
	background: linear-gradient(135deg, var(--okay-warm, var(--site-accent)), color-mix(in srgb, var(--okay-warm, var(--site-accent)) 55%, var(--okay-warm-soft, var(--site-accent))));   /* 끝 색도 흰 아이콘 대비 3:1 이상 */
	color: var(--site-on-accent, var(--wa-color-neutral-95));
	font-size: var(--wa-font-size-s);
	cursor: pointer;
	transition: filter 160ms ease, translate 160ms ease;
}
.site-finder-submit:hover { filter: brightness(1.08); translate: 0 -1px; }
.site-finder-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--site-accent) 45%, transparent); outline-offset: 2px; }
.site-finder-submit > span { font-weight: var(--wa-font-weight-semibold); white-space: nowrap; }

/* 강사 목록을 받는 동안(site-finder.js) — 금방 받으면 깜빡이지 않게 조금 늦게 옅어진다 */
.site-teachers[aria-busy='true'] > .teacher-card-list { opacity: 0.55; transition: opacity 160ms ease 120ms; }
/* 조건에 맞는 강사가 없을 때 — 칸이 사이드바 높이로 늘어나도 아이콘과 글을 가운데에 함께 */
.site-teachers .directory-empty { align-content: center; }

/* 시작 단계의 [조건으로 강사 검색]을 누르면 검색 양식을 3초 동안 강조한다(site-finder.js 가 is-spotlit 을 붙였다 떼고 webmovie 연출을 재생한다, 2026-10-30 사용자 지시 — 두꺼운 외곽선 대신).
   ① 양식 둘레를 사이트색→주황→노랑 빛 띠가 두 바퀴 돌고(conic 그라데이션 테두리) 양식이 살짝 떠오르며 색 그림자 ② 빛 한 줄기가 훑고 지나감
   ③ 칸이 차례로 젤리처럼 튐 — 칸 아이콘 blast·불꽃, [검색] stamp·불꽃은 webmovie(마크업의 data-webmovie). 끝나면 원래 모습. 움직임 줄이기면 빛 띠만 멈춘 채 보인다 */
@property --site-finder-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.site-finder-form { position: relative; isolation: isolate; }
.site-finder-form::before,
.site-finder-form::after {
	content: '';
	position: absolute;
	pointer-events: none;
	opacity: 0;
}
.site-finder-form::before {
	z-index: -1;
	inset: -3px;
	padding: 3px;
	border-radius: calc(var(--sonub-radius-panel) + 3px);
	background: conic-gradient(from var(--site-finder-spin), var(--site-accent), var(--okay-warm, var(--site-accent)), var(--wa-color-yellow-80), var(--site-accent) 55%, color-mix(in srgb, var(--site-accent) 20%, transparent) 75%, var(--site-accent));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.site-finder-form::after {
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--wa-color-surface-raised) 75%, transparent) 50%, transparent 60%) 150% 0 / 250% 100% no-repeat;   /* 양식 안에서만 지나가게 배경 위치로 */
}
.site-finder-form.is-spotlit::before { opacity: 1; }
.site-finder-form.is-spotlit {
	border-color: transparent;
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--site-accent) 10%, transparent), 0 1.1rem 2.4rem -1rem color-mix(in srgb, var(--okay-warm, var(--site-accent)) 45%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
	.site-finder-form.is-spotlit { animation: site-finder-lift 3s cubic-bezier(.2, .8, .3, 1) both; }
	.site-finder-form.is-spotlit::before { animation: site-finder-ring 3s linear both; }
	.site-finder-form.is-spotlit::after { animation: site-finder-sheen 900ms ease-out 100ms both; }
	.site-finder-form.is-spotlit .site-finder-field { animation: site-finder-jelly 720ms linear both; animation-delay: calc(150ms + var(--i, 0) * 80ms); }
}
/* 칸 순서(--i) — 아이콘 blast 의 data-webmovie-delay(150·230·310·390·470)와 같은 80ms 간격 */
.site-finder-field:nth-of-type(2) { --i: 1; }
.site-finder-field:nth-of-type(3) { --i: 2; }
.site-finder-field:nth-of-type(4) { --i: 3; }
.site-finder-field:nth-of-type(5) { --i: 4; }
@keyframes site-finder-ring {
	0% { opacity: 0; --site-finder-spin: 0deg; }
	10% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; --site-finder-spin: 720deg; }
}
@keyframes site-finder-lift {
	0% { translate: 0 0; scale: 1; }
	18% { translate: 0 -4px; scale: 1.012; }
	85% { translate: 0 -4px; scale: 1.012; }
	100% { translate: 0 0; scale: 1; }
}
@keyframes site-finder-sheen { from { opacity: 1; background-position: 150% 0; } to { opacity: 1; background-position: -50% 0; } }
/* 젤리 — 눌렸다(가로로 퍼짐) 튀어 오르고(세로로 늘어남) 잦아든다, 바탕이 사이트색으로 잠깐 물든다 */
@keyframes site-finder-jelly {
	0% { scale: 1; }
	22% { scale: 1.08 0.9; background: color-mix(in srgb, var(--site-accent) 12%, var(--wa-color-surface-default)); }
	42% { scale: 0.95 1.06; }
	60% { scale: 1.03 0.98; }
	78% { scale: 0.99 1.01; }
	100% { scale: 1; }
}

/* 시작 단계(wizard 체크리스트) — 사이드바 폭에 맞춰 글자·여백을 줄이고, 사이트 색을 쓴다(색 토큰은 키트 변수로).
   wizard.css 가 이 파일보다 뒤에 실리므로 .wizard 를 붙여 키트의 기본 변수보다 앞서게 한다 */
.wizard.site-start-steps {
	--wizard-accent: var(--site-accent);
	--wizard-accent-2: color-mix(in srgb, var(--site-accent) 55%, var(--wa-color-brand-fill-loud));
	--wizard-ok: var(--wa-color-success-fill-loud);
	--wizard-ok-ink: var(--wa-color-success-on-loud);
	--wizard-surface: var(--wa-color-surface-raised);
	--wizard-line: var(--wa-color-surface-border);
	--wizard-muted: var(--wa-color-text-quiet);
	--wizard-soft: color-mix(in srgb, var(--site-accent) 10%, var(--wa-color-surface-raised));
	--wizard-radius: var(--sonub-radius-panel);
	--wizard-dot: 1.5rem;
	--wizard-gap: var(--wa-space-m);
	--site-steps-text: calc((var(--wa-font-size-s) + var(--wa-font-size-xs)) / 2);   /* 13px — s 와 xs 사이 */
	margin: 0;
	padding: var(--wa-space-m);
	font-size: var(--site-steps-text);
}
/* 컴팩트하게 — 글자를 한 단계씩 줄이고 여백을 좁힌다. 단계 사이 간격(--wizard-gap)만은 여유 있게 둔다(2026-10-31 사용자 지시). 휴대폰은 아래에서 누르기 쉬운 줄 높이를 지킨다 */
.site-start-steps .wizard-head { gap: var(--wa-space-3xs); margin-block-end: var(--wa-space-s); }
.site-start-steps .wizard-eyebrow { font-size: var(--wa-font-size-2xs); }
.site-start-steps .wizard-title { font-size: var(--wa-font-size-m); }
.site-start-steps .wizard-sub { font-size: var(--wa-font-size-xs); line-height: 1.4; }
.site-start-steps .wizard-progress-text { font-size: var(--wa-font-size-xs); }
.site-start-steps .wizard-group-title { margin-block: var(--wa-space-m) var(--wa-space-xs); font-size: var(--wa-font-size-2xs); }
.site-start-steps .wizard-item { column-gap: var(--wa-space-xs); }
.site-start-steps .wizard-item:not(:last-child)::before,
.site-start-steps .wizard-item:not(:last-child)::after { inset-block: calc(var(--wizard-dot) + 2px) 2px; }
.site-start-steps .wizard-marker { font-size: var(--wa-font-size-2xs); }
.site-start-steps .wizard-item-body { padding-block-start: var(--wa-space-3xs); }
.site-start-steps .wizard-item-title { font-size: var(--site-steps-text); }
.site-start-steps .wizard-item-desc { margin-block-start: var(--wa-space-3xs); font-size: var(--wa-font-size-xs); line-height: 1.4; }
.site-start-steps .wizard-item[aria-current="step"] .wizard-item-body { margin-block-start: 0; padding: var(--wa-space-2xs) var(--wa-space-xs); }
.site-start-steps .wizard-peek { padding: var(--wa-space-2xs) var(--wa-space-s); }
@media (max-width: 48rem) {
	.wizard.site-start-steps { --wizard-dot: 1.75rem; }
}
.site-start-steps-link .fa-solid { color: var(--site-accent); }
/* 마친 단계도 다시 그 화면으로 갈 수 있다 */
.site-start-steps .wizard-item[data-done] .wizard-link { pointer-events: auto; }
.site-start-steps .wizard-item { cursor: pointer; }
/* 묶음이 둘(ol 둘)이어도 번호를 이어서 센다 · 열 단계라 설명은 지금 할 단계에만 보여 강사 목록이 너무 밀리지 않게 한다 */
.site-start-steps { counter-reset: wizard-item; }
.site-start-steps .wizard-item:not([aria-current]) .wizard-item-desc { display: none; }

/* 회원 패널(x-widget.site.member-panel) — 오른쪽 사이드바. 로그인했으면 site-finder.js 가 개인 패널로 바꿔 끼운다 */
.site-member-panel {
	display: grid;
	gap: var(--wa-space-m);
	padding: var(--wa-space-m);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--wa-color-surface-raised);
	box-shadow: var(--wa-shadow-m);
	font-size: var(--wa-font-size-s);
}
.site-member-head { display: flex; align-items: center; gap: var(--wa-space-s); min-inline-size: 0; }
.site-member-photo.teacher-photo { flex: none; inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--wa-font-size-xl); box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-accent) 25%, transparent); }
.site-member-who { display: grid; justify-items: start; gap: var(--wa-space-2xs); min-inline-size: 0; }
.site-member-who h2 { margin: 0; overflow: hidden; max-inline-size: 100%; font-size: var(--wa-font-size-l); text-overflow: ellipsis; white-space: nowrap; }
.site-member-link,
.site-member-more { color: var(--site-accent); font-size: var(--wa-font-size-xs); font-weight: var(--wa-font-weight-semibold); }
.site-member-login { font-size: var(--wa-font-size-xs); }
.site-member-support { display: flex; align-items: center; justify-content: center; gap: var(--wa-space-xs); min-block-size: 2.75rem; }
.site-member-block { display: grid; gap: var(--wa-space-xs); }
.site-member-block h3 { display: flex; align-items: center; gap: var(--wa-space-xs); margin: 0; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.site-member-block h3 .fa-solid { color: var(--site-accent); }
.site-member-list { display: grid; gap: var(--wa-space-2xs); margin: 0; padding: 0; list-style: none; }
.site-member-list a {
	display: grid;
	gap: var(--wa-space-3xs);
	padding: var(--wa-space-xs) var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-default);
	color: var(--wa-color-text-normal);
	text-decoration: none;
	transition: background 160ms ease;
}
.site-member-list a:hover,
.site-member-list a:focus-visible { background: color-mix(in srgb, var(--site-accent) 10%, var(--wa-color-surface-default)); }
.site-member-list :is(time, strong) { color: var(--site-accent); font-weight: var(--wa-font-weight-semibold); }
.site-member-list span { overflow: hidden; color: var(--wa-color-text-quiet); text-overflow: ellipsis; white-space: nowrap; }
.site-member-empty { margin: 0; color: var(--wa-color-text-quiet); }
.site-member-note {
	display: flex;
	gap: var(--wa-space-xs);
	margin: 0;
	padding: var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	background: color-mix(in srgb, var(--site-accent) 8%, var(--wa-color-surface-default));
	line-height: 1.5;
}
.site-member-note .fa-solid { margin-block-start: 0.2em; color: var(--site-accent); }

/* 좁은 데스크톱·태블릿(80rem 이하) — 배너를 빼고, 시작 단계 · 회원 패널을 강사 목록 위 한 줄에 */
@media (max-width: 80rem) {
	.site-finder-top { grid-template-columns: minmax(0, 1fr); }
	.site-finder-body { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--wa-space-m); }
	.site-finder-body > .site-teachers { grid-column: 1 / -1; grid-row: 2; }
	.site-finder-banner,
	.site-finder-rail:empty { display: none; }
	.site-finder-rail { position: static; max-block-size: none; overflow: visible; }
}
/* 휴대폰(48rem 이하) — 양식을 고정하지 않고 두 칸으로, 회원 패널 · 시작 단계(접힌 채 시작 — site-finder.js)가 목록 위에 */
@media (max-width: 48rem) {
	.site-finder { margin-block-start: calc(-1 * var(--wa-space-m)); padding-inline: var(--wa-space-m); }
	.site-finder-top { position: relative; inset-block-start: auto; padding-block-start: 0; }
	.site-finder-body { grid-template-columns: minmax(0, 1fr); }
	.site-finder-body > .site-teachers { grid-row: auto; }
	.site-finder-rail-end { order: -1; }
	/* 칸마다 한 줄 전체. 칩은 글자를 조금 키우고 손가락으로 누를 높이만 더한다 — 양식이 강사 목록을 너무 밀지 않게 촘촘히 */
	.site-finder-form { padding-inline: var(--wa-space-xs); }
	.site-finder-field,
	.site-finder-submit { flex: 1 1 100%; }
	.site-finder-chip,
	.site-finder-more > summary,
	.site-finder-more[open] > summary { min-block-size: 1.875rem; font-size: var(--wa-font-size-xs); }
	.site-finder-submit { block-size: 2.25rem; }
}
/* 첫 화면이 아닌 화면의 좌우 사이드바(x-widget.site.side-frame — 2026-11-02 사용자 지시) — 첫 화면과 같은 세 칸(시작 단계 · 본문 · 회원 패널).
   사이드바는 메인 메뉴 아래에 고정하고, 본문(.okay-content)은 가운데 칸 안에서 원래 너비(64rem)까지만 넓어진다 */
.site-rails {
	--site-rails-width: clamp(13rem, 18vw, 21rem);
	--site-rails-top: calc(4.4rem + var(--wa-space-m));
	display: grid;
	grid-template-columns: var(--site-rails-width) minmax(0, 1fr) var(--site-rails-width);
	column-gap: var(--wa-space-l);
	flex: 1 0 auto;
	box-sizing: border-box;
	inline-size: 100%;
	padding-inline: var(--wa-space-l);
}
.site-rails > .okay-content { box-sizing: border-box; inline-size: 100%; min-inline-size: 0; padding-inline: 0; }
.site-rails-col {
	position: sticky;
	inset-block-start: var(--site-rails-top);
	align-self: start;
	box-sizing: border-box;
	max-block-size: calc(100dvh - var(--site-rails-top) - var(--wa-space-m));
	margin-block-start: var(--wa-space-2xl);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.site-rails-col > * { margin: 0; }
/* 80rem 이하 — 본문을 밀어내지 않게 사이드바 둘을 본문 아래 한 줄에 */
@media (max-width: 80rem) {
	.site-rails { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--wa-space-m); padding-block-end: var(--wa-space-l); }
	.site-rails > .okay-content { grid-column: 1 / -1; grid-row: 1; }
	.site-rails-col { grid-row: 2; position: static; max-block-size: none; margin-block-start: 0; overflow: visible; }
}
/* 휴대폰(48rem 이하) — 한 칸으로 본문 → 회원 패널 → 시작 단계(접힌 채 시작 — site-finder.js) */
@media (max-width: 48rem) {
	.site-rails { grid-template-columns: minmax(0, 1fr); padding-inline: var(--wa-space-m); }
	.okay-study .site-rails > .okay-content { padding: var(--wa-space-l) 0 0; }
	.site-rails-col { grid-row: auto; }
	.site-rails-col-end { order: 1; }
	.site-rails-col-start { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.site-teachers[aria-busy='true'] > .teacher-card-list,
	.site-finder-chip,
	.site-finder-more > summary .fa-solid,
	.site-finder-submit { transition: none; }
}