/*
 * 강사 모집 본문(x-widget.site.teacher-pitch) — 브랜드 첫 화면 슬라이드 아래의 광고 랜딩: 브랜드색 무대의 사실 띠 · 링크 다섯 단계 · 사진과 영어 분야 알약.
 * 수익·도구·마지막 안내는 teach.css(.teach) 의 모양을 그대로 쓴다. SSOT 11절 "영어 교육 브랜드 사이트"(2026-10-27 "화려하게 · 많은 정보를 동적으로 강조").
 * 색은 토큰만 — 브랜드 색은 틀(okay.css)이 고른 --wa-color-brand-* 다. 움직임은 webmovie 키트(마크업의 data-webmovie)가 맡고 여기는 색·자리만 정한다.
 */
.site-pitch {
	--pitch-stage: var(--wa-color-brand-fill-loud);
	--pitch-on-stage: var(--wa-color-brand-on-loud);
	--pitch-spark: var(--wa-color-yellow-80);
	/* 무대 빛깔 — 틀(okayteacher.css)이 브랜드에 맞게 다시 정한다 */
	--pitch-glow: var(--wa-color-cyan-70);
	--pitch-shine: var(--pitch-on-stage);
	--pitch-stage-end: color-mix(in srgb, var(--pitch-stage) 68%, var(--wa-color-indigo-20));
	--webmovie-burst: var(--wa-color-yellow-80), var(--wa-color-brand-fill-loud), var(--wa-color-surface-raised);
	--webmovie-cue-color: var(--wa-color-brand-fill-loud);
	inline-size: 100%;
	margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
	margin-inline: auto;
}
.site-pitch h2 { text-wrap: balance; }

/* 사실 띠 — 브랜드색 무대 위 큰 숫자 네 칸 */
.site-pitch-facts {
	--webmovie-cue-color: var(--pitch-spark);
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	gap: var(--wa-space-xl);
	padding: clamp(1.75rem, 4cqi, 3.5rem) clamp(1rem, 3cqi, 3rem);
	border-radius: var(--wa-border-radius-xl);
	background:
		radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--pitch-shine) 24%, transparent), transparent 42%),
		radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--pitch-glow) 34%, transparent), transparent 46%),
		linear-gradient(135deg, var(--pitch-stage), var(--pitch-stage-end));
	color: var(--pitch-on-stage);
	box-shadow: var(--wa-shadow-l);
}
.site-pitch .site-pitch-facts-title {
	color: var(--pitch-on-stage);
	font-size: calc(clamp(1.75rem, 4cqi, 2.6rem) * var(--wa-font-size-scale, 1));
	font-weight: 850;
	line-height: 1.25;
	letter-spacing: -0.03em;
	text-align: center;
}
.site-pitch-fact-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wa-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-pitch-fact {
	display: grid;
	align-content: start;
	justify-items: center;
	gap: var(--wa-space-s);
	min-inline-size: 0;
	padding: var(--wa-space-l) var(--wa-space-m);
	border: 1px solid color-mix(in srgb, var(--pitch-shine) 26%, transparent);
	border-radius: var(--wa-border-radius-l);
	background: color-mix(in srgb, var(--pitch-shine) 12%, transparent);
	font-size: var(--wa-font-size-m);
	font-weight: 650;
	line-height: 1.45;
	text-align: center;
}
.site-pitch-number {
	color: var(--pitch-on-stage);
	font-size: calc(clamp(2.6rem, 6cqi, 4.2rem) * var(--wa-font-size-scale, 1));
	font-weight: 850;
	line-height: 1;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.site-pitch-fact:first-child .site-pitch-number { color: var(--pitch-spark); }
/* 다크 — 무대가 밝은 브랜드색이라 노란 숫자가 묻힌다. 무대 글자색 그대로 두고 칸 바탕을 짙게 */
html[data-sonub-theme='dark'] .site-pitch-fact:first-child .site-pitch-number { color: var(--pitch-on-stage); }
html[data-sonub-theme='dark'] .site-pitch-fact:first-child { background: color-mix(in srgb, var(--pitch-shine) 22%, transparent); }

/* 다섯 단계 — 단계마다 그 화면으로 가는 링크 */
.site-pitch-route { justify-items: center; }
.site-pitch .site-pitch-route-title {
	font-size: calc(clamp(1.75rem, 4cqi, 2.6rem) * var(--wa-font-size-scale, 1));
	font-weight: 850;
	line-height: 1.3;
	letter-spacing: -0.03em;
	text-align: center;
}
.site-pitch-route .dg-flow { inline-size: 100%; }
.site-pitch-route .dg-flow-node {
	border-color: color-mix(in srgb, var(--dg-fill) 45%, var(--wa-color-surface-border));
	background: linear-gradient(180deg, color-mix(in srgb, var(--dg-fill) 16%, var(--wa-color-surface-raised)), var(--wa-color-surface-raised));
	box-shadow: var(--wa-shadow-s);
}
/* 단계마다 다른 색(config 의 tone) — 아이콘 동그라미를 그 색으로 채운다 */
.site-pitch-route .dg-flow-icon { background: var(--dg-fill); color: var(--dg-on-fill); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dg-fill) 22%, transparent); }
.site-pitch-route .dg-flow-n { background: var(--wa-color-surface-raised); color: var(--dg-ink); box-shadow: 0 0 0 1px var(--dg-border); }
.site-pitch-route .dg-flow-label { font-weight: 750; }

/* 가르칠 영어 분야 — 사진 | 제목 · 설명 · 알약 */
.site-pitch-subjects {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: clamp(1.5rem, 4cqi, 3.5rem);
}
.site-pitch-photo {
	overflow: clip;
	border-radius: var(--wa-border-radius-xl);
	box-shadow: var(--wa-shadow-l);
}
.site-pitch-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.site-pitch-subjects-text { display: grid; justify-items: start; gap: var(--wa-space-l); min-inline-size: 0; }
.site-pitch-chips { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); margin: 0; padding: 0; list-style: none; }
.site-pitch-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-xs) var(--wa-space-m);
	border: 1px solid var(--wa-color-brand-border-normal);
	border-radius: var(--wa-border-radius-pill);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
	font-size: var(--wa-font-size-s);
	font-weight: 700;
	line-height: 1.5;
}
.site-pitch-chip i { color: var(--chip-tone, var(--wa-color-brand-fill-loud)); }
/* 알약마다 색을 돌려 화사하게 — 바탕·테두리는 그 색을 옅게, 글자는 본문색 */
.site-pitch-chip:nth-child(4n + 1) { --chip-tone: var(--wa-color-yellow-60); }
.site-pitch-chip:nth-child(4n + 2) { --chip-tone: var(--wa-color-cyan-60); }
.site-pitch-chip:nth-child(4n + 3) { --chip-tone: var(--wa-color-pink-60); }
.site-pitch-chip:nth-child(4n + 4) { --chip-tone: var(--wa-color-green-60); }
.site-pitch-chip:nth-child(n) {
	border-color: color-mix(in srgb, var(--chip-tone) 45%, var(--wa-color-surface-border));
	background: color-mix(in srgb, var(--chip-tone) 14%, var(--wa-color-surface-raised));
	color: var(--wa-color-text-normal);
}
.site-pitch .site-pitch-more {
	display: flex;
	align-items: baseline;
	gap: var(--wa-space-xs);
	color: var(--wa-color-text-quiet);
	font-size: var(--wa-font-size-s);
	line-height: 1.7;
}
.site-pitch-more i { flex: none; color: var(--wa-color-brand-fill-loud); }
.site-pitch-more a { color: var(--wa-color-brand-on-quiet); font-weight: 700; }

@container teach-page (max-width: 56rem) {
	.site-pitch-fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-pitch-subjects { grid-template-columns: minmax(0, 1fr); }
}
@container teach-page (max-width: 25rem) {
	.site-pitch-fact { padding: var(--wa-space-m) var(--wa-space-xs); font-size: var(--wa-font-size-s); }
}