/*
 * 사이트 첫 화면 강사 찾기(x-widget.site.teacher-finder) — SSOT 11절 "영어 교육 브랜드 사이트" · 3절 "강사 검색 조건"(2026-10-30 사용자 지시).
 * 첫 화면도 모든 화면과 같은 좌우 사이드바 틀(x-widget.site.side-frame · 아래 .site-rails — 시작 단계 · 본문 · 회원 패널 세 칸) 안에 그린다 —
 * 본문(main)과 이 위젯은 자리를 차지하지 않고(display: contents) 위 줄(배너 · 검색 양식 · 배너)은 세 칸 전체, 강사 목록은 가운데 칸에 놓인다.
 * 그래서 SPA 로 첫 화면을 오가도 사이드바는 그대로다(SSOT 11절 "SPA 이동", 2026-11-03 사용자 지시).
 * 위 줄은 메인 메뉴 아래에 고정, 사이드바는 위 줄 아래에 고정(가운데만 스크롤).
 * 메인 메뉴·위 줄의 높이는 public/js/site-finder.js 가 틀(.site-rails)에 --site-finder-bar · --site-finder-head 로 넣는다.
 * 한 줄의 강사 수(3~5명)는 site-teachers.css 가 가운데 칸 너비로 정한다.
 */
body:has(.site-finder) { overflow-x: clip; }
/* 본문 칸의 가로 잘림(content.css)을 풀어 준다 — 그대로 두면 칸 밖의 좌우 사이드바와 검색 양식 양 끝이 잘린다. 문서 폭은 위 body 가 지킨다 */
:is(.content, .site-content):has(.site-finder) { overflow-x: visible; }
.site-rails:has(.site-finder) {
	/* 위 줄 아래 여백 — 위 줄 배경 밖에 두어, hover 로 커지는 맨 윗줄 강사 카드의 강조 테두리가 위 줄에 가리지 않게(site-teachers.css) */
	--site-finder-room: var(--wa-space-l);
	--site-finder-stick: calc(var(--site-finder-bar, 4.4rem) + var(--site-finder-head, 9rem) + var(--site-finder-room));
	padding-block-start: var(--wa-space-m);
}
.site-rails > .okay-content:has(> .site-finder),
.site-finder { display: contents; }
/* 본문에 딸린 것(결제 알림 자리 — 떠 있는 창)은 목록 아래 한 줄 */
.site-rails > .okay-content:has(> .site-finder) > :not(.site-finder) { grid-column: 1 / -1; }
.site-finder-top {
	display: grid;
	grid-column: 1 / -1;
	grid-row: 1;
	grid-template-columns: subgrid;
	position: sticky;
	inset-block-start: var(--site-finder-bar, 4.4rem);
	z-index: 15;
	padding-block: var(--wa-space-xs);
	/* 아래로 지나가는 카드를 가린다 — 학생 사이트 바탕과 같은 색(okay.css 의 --okay-page) */
	background: var(--okay-page, var(--wa-color-surface-default));
}

/* 임시 배너·빈 사이드바 — 아직 내용이 없는 자리 */
.site-finder-banner {
	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-m) var(--wa-space-m) var(--wa-space-xs);
	/* 옆의 검색 양식과 같은 평평한 카드(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-s);
	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-body { grid-column: 2; grid-row: 2; min-inline-size: 0; padding-block-start: var(--site-finder-room); }
/* 첫 화면의 좌우 사이드바 — 위 줄 아래 칸에 놓이고 위 줄 아래에 고정된다 */
.site-rails:has(.site-finder) > .site-rails-col {
	grid-row: 2;
	inset-block-start: var(--site-finder-stick);
	max-block-size: calc(100dvh - var(--site-finder-stick) - var(--wa-space-m));
	margin-block-start: var(--site-finder-room);
}
.site-rails:has(.site-finder) > .site-rails-col-start { grid-column: 1; }
.site-rails:has(.site-finder) > .site-rails-col-end { grid-column: 3; }

/* 검색 양식 — 왼쪽 강사 수 · 학생 수, 오른쪽 조건 한 줄: 배울 과목 · 튜터 국적 · 레슨 시간대([전체] [더 보기]) · [검색] · 상세 검색 옵션 단추
   (가격 · 정렬은 그 창 안 — SSOT 3절, 2026-11-05 사용자 지시). 양식이 좁아 한 줄에 다 들어가지 않으면 조건 줄이 통계 아래로 내려가 오른쪽에 붙는다. */
.site-finder-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wa-space-s) var(--wa-space-l);
	margin: 0;
	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-s);
}
.site-finder-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 강사 수 · 학생 수 — 이름은 작게, 숫자는 크고 굵게(x-widget.site.stats 의 dl) */
.site-finder-stats { flex: none; margin-inline-end: auto; }
.site-finder-stats dl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-2xs) var(--wa-space-l); margin: 0; }
.site-finder-stats dl > div { display: flex; align-items: baseline; gap: var(--wa-space-xs); }
.site-finder-stats dl > div + div { padding-inline-start: var(--wa-space-l); border-inline-start: 1px solid var(--wa-color-surface-border); }
.site-finder-stats dt { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); font-weight: var(--wa-font-weight-semibold); white-space: nowrap; }
.site-finder-stats dt > i { color: var(--site-accent); }
.site-finder-stats dd { margin: 0; color: var(--okay-ink, var(--wa-color-text-normal)); font-size: var(--wa-font-size-xl); font-weight: var(--wa-font-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
/* 조건 한 줄 */
.site-finder-line { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--wa-space-s) var(--wa-space-s); min-inline-size: 0; }
/* 한 줄의 칸 — 이름 옆에 칩(float 이 flex 안에서 풀려 legend 도 한 칸이 된다). 칸 안은 늘 한 줄이고, 자리가 모자라면 칸째 다음 줄로 넘어간다 */
.site-finder-line > .site-finder-field { display: flex; flex: none; flex-wrap: nowrap; align-items: center; gap: var(--wa-space-2xs) var(--wa-space-xs); }
.site-finder-line > .site-finder-field > legend { inline-size: auto; margin: 0; }
.site-finder-line > .site-finder-field > .site-finder-chips { flex-wrap: nowrap; }
/* [검색]과 상세 검색 옵션 단추는 한 묶음 — 줄이 넘어갈 때 함께 다닌다 */
.site-finder-actions { display: flex; flex: none; align-items: center; gap: var(--wa-space-s); }
/* 조건마다 한 묶음 — 이름 · [전체] · [더 보기]를 테두리 있는 알약 하나에 넣어 어느 조건의 칩인지 바로 보이게 한다(2026-11-05 사용자 지시).
   [더 보기]는 아무것도 고르지 않았으면 화살표 아이콘만(글자는 화면 읽기 프로그램용으로 남긴다), 그 안에서 골랐으면 고른 이름이 보인다(site-finder.js 가 is-picked) */
.site-finder-line > .site-finder-field {
	padding-block: var(--wa-space-3xs);
	padding-inline: var(--wa-space-s) var(--wa-space-3xs);
	border: 1px solid var(--okay-line, var(--wa-color-surface-border));
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-surface-raised);
}
.site-finder-line > .site-finder-field > legend { padding-inline-end: var(--wa-space-2xs); }
.site-finder-line .site-finder-more > summary:not(.is-picked) { justify-content: center; min-inline-size: 1.75rem; padding-inline: var(--wa-space-2xs); }
.site-finder-line .site-finder-more > summary:not(.is-picked) > bdi { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-finder-line .site-finder-more > summary:not(.is-picked) .fa-solid { font-size: 0.8em; }
.site-finder-field {
	--site-finder-chip-pad: var(--wa-space-xs);
	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-2xs);
	padding: 0;
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-xs);
	font-weight: var(--wa-font-weight-semibold);
	line-height: 1.5;
	white-space: nowrap;
}
.site-finder-field > legend .fa-solid { color: var(--site-accent); }
.site-finder-chips { clear: both; gap: var(--wa-space-2xs); }
/* 칩 — 고른 조건만 색으로 묶고, 나머지는 글자와 여백으로 구분한다. 작은 글자 대신 간결한 표면으로 밀도를 낮춘다. */
.site-finder-chip {
	position: relative;
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	gap: var(--wa-space-3xs);
	min-block-size: 1.75rem;
	padding: var(--wa-space-2xs) var(--site-finder-chip-pad);
	border: 0;
	background: transparent;
	font-size: var(--wa-font-size-xs);
	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-2xs) 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;
	min-inline-size: min(22rem, 86vw);   /* 한 줄 양식의 칸은 좁다 — [더 보기]의 칩이 너무 길게 쌓이지 않게 */
	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;
	align-items: center;
	justify-content: center;
	gap: var(--wa-space-2xs);
	align-self: end;
	block-size: 2.5rem;
	padding-inline: var(--wa-space-s);
	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; }
/* 상세 검색 옵션 단추 — 아이콘만. 창 안에서 가격·정렬을 골랐으면 점으로 알린다(JS 없이 :has) */
.site-finder-advanced-open {
	position: relative;
	display: inline-grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0;
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-pill);
	background: transparent;
	color: var(--wa-color-text-normal);
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}
.site-finder-advanced-open:hover { border-color: var(--site-accent); background: color-mix(in srgb, var(--site-accent) 10%, transparent); }
.site-finder-advanced-open:focus-visible { outline: 3px solid color-mix(in srgb, var(--site-accent) 45%, transparent); outline-offset: 2px; }
.site-finder-form:has(.site-finder-advanced input:checked:not([value=''])) .site-finder-advanced-open::after {
	content: '';
	position: absolute;
	inset-block-start: 0.3rem;
	inset-inline-end: 0.3rem;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--okay-warm, var(--site-accent));
}
/* 상세 검색 옵션 창 — 가격 · 정렬 칩을 모두 펼친다 */
.site-finder-advanced { --width: min(32rem, calc(100vw - 2rem)); }
.site-finder-advanced .site-finder-field + .site-finder-field { margin-block-start: var(--wa-space-l); }
.site-finder-advanced .site-finder-chips { flex-wrap: wrap; }

/* 강사 목록을 받는 동안(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: var(--wa-font-size-s);
	margin: 0;
	padding: var(--wa-space-m);
	font-size: var(--site-steps-text);
	box-shadow: var(--wa-shadow-s);
}
/* 작은 제목과 단계 번호는 유지하고, 읽는 줄 사이와 묶음 사이에 여백을 둔다. */
.site-start-steps .wizard-head { gap: var(--wa-space-2xs); margin-block-end: var(--wa-space-m); }
.site-start-steps .wizard-eyebrow { font-size: var(--wa-font-size-2xs); }
.site-start-steps .wizard-title { font-size: var(--wa-font-size-m); line-height: 1.5; }
.site-start-steps .wizard-sub { font-size: var(--wa-font-size-xs); line-height: 1.6; }
.site-start-steps .wizard-progress-text { font-size: var(--wa-font-size-xs); }
.site-start-steps .wizard-group-title { margin-block: var(--wa-space-l) var(--wa-space-s); font-size: var(--wa-font-size-xs); }
.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); line-height: 1.5; }
.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-l);
	padding: var(--wa-space-l);
	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-s);
	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: 3rem; block-size: 3rem; font-size: var(--wa-font-size-l); box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent) 18%, 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-m); 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 { padding: var(--wa-space-xs) var(--wa-space-s); font-size: var(--wa-font-size-xs); line-height: 1.5; word-break: keep-all; }
.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-s); }
.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.65;
}
.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-column: 1 / -1; grid-row: 3; padding-block-start: 0; }
	.site-finder-banner { display: none; }
	.site-rails:has(.site-finder) > .site-rails-col { max-block-size: none; margin-block-start: 0; }
	.site-rails:has(.site-finder) > .site-rails-col-end { grid-column: 2; }
}
/* 휴대폰(48rem 이하) — 양식을 고정하지 않고 두 칸으로, 회원 패널 · 시작 단계(접힌 채 시작 — site-finder.js)가 목록 위에 */
@media (max-width: 48rem) {
	.site-rails:has(.site-finder) { padding-block-start: var(--wa-space-s); }
	.site-finder-top { position: relative; inset-block-start: auto; padding-block-start: 0; }
	.site-finder-body { grid-row: 4; }
	.site-rails:has(.site-finder) > :is(.site-rails-col-start, .site-rails-col-end) { grid-column: 1; }
	.site-rails:has(.site-finder) > .site-rails-col-end { grid-row: 2; }
	.site-rails:has(.site-finder) > .site-rails-col-start { grid-row: 3; }
	/* 칸마다 한 줄 전체. 칩은 글자를 조금 키우고 손가락으로 누를 높이만 더한다 — 양식이 강사 목록을 너무 밀지 않게 촘촘히 */
	.site-finder-form { justify-content: stretch; padding: var(--wa-space-m); gap: var(--wa-space-s); }
	.site-finder-stats { flex: 1 1 100%; padding-block-end: var(--wa-space-s); border-block-end: 1px solid var(--wa-color-surface-border); }
	.site-finder-stats dl { justify-content: center; }
	.site-finder-line {
		display: grid;
		flex: 1 1 100%;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'subject' 'country' 'time' 'actions';
		gap: var(--wa-space-s);
	}
	.site-finder-chip,
	.site-finder-more > summary,
	.site-finder-more[open] > summary { min-block-size: 2rem; font-size: var(--wa-font-size-xs); }
	.site-finder-submit { block-size: 2.5rem; }
	/* 조건 이름의 너비를 맞춰 칩이 같은 세로선에서 시작한다 */
	.site-finder-line > .site-finder-subject { grid-area: subject; }
	.site-finder-line > .site-finder-country { grid-area: country; }
	.site-finder-line > .site-finder-time { grid-area: time; }
	.site-finder-line > .site-finder-actions { grid-area: actions; }
	.site-finder-actions > .site-finder-submit { flex: 1; }
	.site-finder-line > .site-finder-field { flex-wrap: nowrap; }
	.site-finder-line > .site-finder-field > legend { flex: none; inline-size: 6.5rem; white-space: normal; }
}
/* 모든 화면의 좌우 사이드바(x-widget.site.side-frame — 2026-11-02 사용자 지시) — 세 칸(시작 단계 · 본문 · 회원 패널).
   사이드바는 메인 메뉴 아래에 고정하고, 본문(.okay-content)은 가운데 칸 안에서 원래 너비(64rem)까지만 넓어진다. 첫 화면의 놓임은 위 .site-rails:has(.site-finder) */
.site-rails {
	--site-rails-width: clamp(13rem, 16vw, 18rem);
	--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-xl);
	flex: 1 0 auto;
	box-sizing: border-box;
	inline-size: 100%;
	padding-inline: var(--wa-space-xl);
}
.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; }
}
/* 좌우 사이드바 틀이 없는 화면 — sonub.com 첫 화면의 강사 목록(x-widget.home.page, 메인 레이아웃의 컨텐츠 안 — SSOT 3절 "강사 찾기 목록"·"강사 검색 조건", 2026-11-05·06 사용자 지시).
   위젯이 스스로 세 칸 격자(배너 · 양식 · 배너)이고 강사 목록은 세 칸 전체에 놓인다. 옆에 메인 사이드바가 있어 컨텐츠가 좁으므로 96rem 이하는 배너를 빼고 양식만 */
.site-finder.site-finder-solo {
	/* 사이트 색이 없는 메인 사이트 — SONUB 테마 색(기본 보라 · 다크 · 핑크, theme.css)을 쓴다 */
	--site-accent: var(--theme-accent);
	--site-on-accent: var(--theme-on-accent);
	--okay-page: var(--wa-color-surface-default);
	--site-finder-room: var(--wa-space-l);
	display: grid;
	grid-template-columns: clamp(11rem, 13vw, 15rem) minmax(0, 1fr) clamp(11rem, 13vw, 15rem);
	column-gap: var(--wa-space-l);
}
.site-finder-solo .site-finder-body { grid-column: 1 / -1; }
/* [강사 목록](/#teachers)으로 왔을 때 목록 머리가 탑바 밑에 숨지 않게 */
.site-finder.site-finder-solo { scroll-margin-block-start: calc(var(--sonub-header-height, var(--bar-height, 4rem)) + var(--wa-space-m)); }
@media (max-width: 96rem) {
	.site-finder.site-finder-solo { grid-template-columns: minmax(0, 1fr); }
	.site-finder-solo .site-finder-banner { display: none; }
}
@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,
	.site-finder-advanced-open { transition: none; }
}