/* 강사 광고 랜딩(/teach) — 광고로 온 손님이 가입하고 싶어지게: 브랜드색 무대의 첫 화면·사실 띠·사진 카드·큰 100%·번호 타임라인·반복 시작 단추.
   SSOT 11절 "강사 사이트 첫 화면"(— "광고 랜딩 디자인", 2026-10-20)·3·4·6·18절. 이 화면만 design 스킬의 차분한 노트 모양 대신 광고 랜딩으로 그린다 */
.teach {
	--teach-gap: clamp(3.5rem, 6vw, 6rem);
	--teach-stage: var(--wa-color-brand-fill-loud);
	--teach-on-stage: var(--wa-color-brand-on-loud);
	container: teach-page / inline-size;
	display: grid;
	gap: var(--teach-gap);
	max-inline-size: 78rem;
	padding: 0;
	border: 0;
	border-radius: var(--wa-border-radius-l);
	background: transparent;
}
.teach :is(h1, h2, h3, p, figure) { margin: 0; }
.teach :is(p, li, a, h1, h2, h3) { min-inline-size: 0; overflow-wrap: anywhere; }
.teach :is(p, h1, h2, h3) { word-break: keep-all; }
.teach :is(h1, h2, h3) { text-wrap: pretty; }
.teach:is(:lang(ja), :lang(zh)) :is(p, h1, h2, h3) { word-break: normal; }
.teach .teach-section { display: grid; gap: var(--wa-space-2xl); scroll-margin-block-start: 7rem; }
/* 절 제목 — 랜딩의 큰 제목(왼쪽 세로줄 없이) */
.teach .sonub-section-heading { display: grid; gap: var(--wa-space-xs); }
.teach .sonub-section-heading h2 { font-size: calc(clamp(1.75rem, 4cqi, 2.6rem) * var(--wa-font-size-scale, 1)); font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; }
.teach .sonub-section-heading .sonub-eyebrow { margin: 0; color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-s); font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.teach .sonub-lead { color: var(--wa-color-text-normal); font-size: var(--wa-font-size-m); line-height: 1.85; }
.teach .sonub-button {
	min-block-size: 3rem;
	padding: var(--wa-space-s) var(--wa-space-l);
	gap: var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	font-size: var(--wa-font-size-s);
	font-weight: 650;
	line-height: 1.6;
	text-align: center;
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.teach .sonub-button:hover { transform: none; }
.teach :is(a, summary):focus-visible { outline: 2px solid var(--wa-color-focus); outline-offset: 4px; }
.teach .teach-start { align-items: center; flex-wrap: wrap; gap: var(--wa-space-s); }
/* 주 시작 단추 — 페이지 어디서나 크고 눈에 띄게 */
.teach .teach-start-main { min-block-size: 3.5rem; padding-inline: var(--wa-space-xl); border-radius: var(--wa-border-radius-l); font-size: var(--wa-font-size-m); font-weight: 750; box-shadow: var(--wa-shadow-m); }
.teach .teach-start-main:hover { box-shadow: var(--wa-shadow-l); }
.teach :is(.teach-pillar-list, .teach-tool-list, .teach-step-list, .teach-checks, .teach-hero-points, .teach-facts) { margin: 0; padding: 0; list-style: none; }
.teach :is(.teach-pillar-list, .teach-tool-list, .teach-step-list, .teach-checks, .teach-hero-points, .teach-facts) > li { margin: 0; }
.teach .sonub-card { box-shadow: var(--wa-shadow-s); }

/* ── 첫 화면: 브랜드색 무대 위의 큰 제목·큰 시작 단추·알약 사실·큰 사진 ── */
.teach .teach-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: clamp(2rem, 4cqi, 4rem);
	padding: clamp(1.5rem, 4.5cqi, 4rem);
	padding-block-end: calc(clamp(1.5rem, 4.5cqi, 4rem) + 3.5rem);
	border: 0;
	border-radius: var(--wa-border-radius-xl);
	background:
		radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--teach-on-stage) 16%, transparent), transparent 45%),
		radial-gradient(circle at 92% 96%, color-mix(in srgb, var(--wa-color-pink-60) 45%, transparent), transparent 55%),
		linear-gradient(140deg, var(--teach-stage), color-mix(in srgb, var(--teach-stage) 72%, var(--wa-color-pink-60)));
	color: var(--teach-on-stage);
	box-shadow: var(--wa-shadow-l);
}
.teach .teach-hero-text { display: grid; justify-items: start; gap: var(--wa-space-xl); min-inline-size: 0; }
.teach .teach-hero h1 { color: var(--teach-on-stage); font-size: calc(clamp(2.6rem, 6cqi, 4.6rem) * var(--wa-font-size-scale, 1)); font-weight: 850; line-height: 1.12; letter-spacing: -0.04em; }
/* 핵심 문구 세 가지 — 큰 제목(h1) 자리에 겹쳐 두고 8초씩 번갈아 보인다(24초 한 바퀴). 낱말마다 보이지 않는 가림선 아래에서 차례로 솟아오르고,
   이어서 형광펜 밑줄이 글을 읽는 방향으로 글자 뒤를 쓸고 지나간다. 사라질 때는 밑줄이 앞으로 빠져나가고 낱말이 차례로 위로 올라가 숨는다.
   첫 문구·첫 사진은 페이지가 뜨자마자 보이도록 세 줄·세 사진 모두 --teach-lead 만큼 앞당겨 시작한다(빈 첫 화면 금지 — 광고 랜딩 디자인 ①. 2.2초 = 낱말이 솟는 6%×24초 + 여덟째 낱말 지연 0.63초).
   세 줄은 아래(시작 단추 쪽)에 맞춰 짧은 문구 아래가 비지 않는다. 마우스를 올리면 멈춘다 */
.teach .teach-hero { --teach-lead: 2.2s; }
.teach .teach-hero-rotator { display: grid; inline-size: 100%; margin: 0; color: var(--teach-on-stage); }
.teach .teach-hero-line { grid-area: 1 / 1; align-self: end; text-wrap: balance; overflow-wrap: anywhere; --line: 0s; }
.teach .teach-hero-line:nth-child(2) { --line: 8s; }
.teach .teach-hero-line:nth-child(3) { --line: 16s; }
.teach .teach-hero-line:lang(ko) { word-break: keep-all; }
.teach .teach-hero-mark { --from: 0%; --to: 100%; padding-inline: 0.04em; background: linear-gradient(90deg, color-mix(in srgb, var(--teach-on-stage) 22%, transparent), color-mix(in srgb, var(--wa-color-pink-60) 70%, transparent)) var(--from) 92% / 0% 0.36em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: teach-hero-mark 24s cubic-bezier(0.65, 0, 0.35, 1) infinite both; animation-delay: calc(var(--line) - var(--teach-lead)); }
.teach .teach-hero-mark:dir(rtl) { --from: 100%; --to: 0%; }
/* 가림선 — 낱말 칸이 넘치는 부분을 잘라 낱말이 선 아래에서 올라오는 것처럼 보인다. 위아래 여유는 악센트·모음 부호(태국어·힌디어·아랍어)가 잘리지 않게 둔다 */
.teach .teach-hero-word { display: inline-block; overflow: clip; padding-block: 0.14em 0.2em; margin-block: -0.14em -0.2em; vertical-align: bottom; }
.teach .teach-hero-word > span { display: inline-block; transform: translateY(170%); animation: teach-hero-word 24s cubic-bezier(0.2, 0.8, 0.2, 1) infinite both; animation-delay: calc(var(--line) + var(--d, 0) * 90ms - var(--teach-lead)); }
.teach .teach-hero-word:nth-child(2) { --d: 1; } .teach .teach-hero-word:nth-child(3) { --d: 2; } .teach .teach-hero-word:nth-child(4) { --d: 3; } .teach .teach-hero-word:nth-child(5) { --d: 4; }
.teach .teach-hero-word:nth-child(6) { --d: 5; } .teach .teach-hero-word:nth-child(7) { --d: 6; } .teach .teach-hero-word:nth-child(8) { --d: 7; } .teach .teach-hero-word:nth-child(9) { --d: 8; }
.teach .teach-hero-word:nth-child(10) { --d: 9; } .teach .teach-hero-word:nth-child(11) { --d: 10; } .teach .teach-hero-word:nth-child(12) { --d: 11; } .teach .teach-hero-word:nth-child(n+13) { --d: 12; }
.teach .teach-hero:has(:is(.teach-hero-rotator, .teach-hero-slides):hover) :is(.teach-hero-mark, .teach-hero-word > span, .teach-hero-slide) { animation-play-state: paused; }
@keyframes teach-hero-word {
	0% { transform: translateY(170%); }
	6%, 29% { transform: none; }
	34%, 100% { transform: translateY(-170%); }
}
@keyframes teach-hero-mark {
	0%, 6.5% { background-position: var(--from) 92%; background-size: 0% 0.36em; }
	13.5%, 27.5% { background-position: var(--from) 92%; background-size: 100% 0.36em; }
	28% { background-position: var(--to) 92%; background-size: 100% 0.36em; }
	32%, 100% { background-position: var(--to) 92%; background-size: 0% 0.36em; }
}
@media (prefers-reduced-motion: reduce) {
	.teach .teach-hero-rotator { gap: var(--wa-space-s); }
	.teach .teach-hero-line { grid-area: auto; }
	.teach .teach-hero-mark { animation: none; background-size: 100% 0.36em; }
	.teach .teach-hero-word > span { transform: none; animation: none; }
}
/* 무대 위 시작 단추 — 바탕을 뒤집어 무대에서 가장 먼저 보이게 */
.teach .teach-hero .teach-start-main { min-block-size: 3.75rem; border-color: transparent; background: var(--wa-color-surface-raised); color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-l); }
.teach .teach-hero .teach-start-main:hover { background: color-mix(in srgb, var(--wa-color-surface-raised) 88%, var(--teach-stage)); }
.teach .teach-hero .teach-start-secondary { justify-content: flex-start; padding-inline: var(--wa-space-s); border-color: transparent; background: transparent; color: var(--teach-on-stage); font-weight: 650; }
.teach .teach-hero-points { display: flex; flex-wrap: wrap; gap: var(--wa-space-s); }
.teach .teach-hero-points li { display: inline-flex; align-items: center; gap: var(--wa-space-xs); padding: var(--wa-space-xs) var(--wa-space-m); border: 1px solid color-mix(in srgb, var(--teach-on-stage) 28%, transparent); border-radius: var(--wa-border-radius-pill); background: color-mix(in srgb, var(--teach-on-stage) 14%, transparent); color: var(--teach-on-stage); font-size: var(--wa-font-size-s); font-weight: 700; line-height: 1.5; }
.teach .teach-hero-points i { color: var(--teach-on-stage); }
.teach .teach-hero-visual { position: relative; display: grid; align-self: center; min-inline-size: 0; gap: var(--wa-space-m); }
/* 문구마다 짝지은 그림 세 장 — 한 자리에 겹쳐 글자와 같은 24초 주기·같은 시작(--line)으로 서서히 바뀐다(hero.blade.php $slides) */
.teach .teach-hero-slides { display: grid; overflow: clip; border: 4px solid color-mix(in srgb, var(--teach-on-stage) 30%, transparent); border-radius: var(--wa-border-radius-xl); box-shadow: var(--wa-shadow-l); }
.teach .teach-hero-slide { grid-area: 1 / 1; display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover; --line: 0s; animation: teach-hero-slide 24s ease-in-out infinite both; animation-delay: calc(var(--line) - var(--teach-lead)); }
.teach .teach-hero-slide:nth-child(2) { --line: 8s; }
.teach .teach-hero-slide:nth-child(3) { --line: 16s; }
@keyframes teach-hero-slide {
	0% { opacity: 0; transform: scale(1.04); }
	4%, 33.4% { opacity: 1; }
	37.4%, 100% { opacity: 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.teach .teach-hero-slide { animation: none; }
	.teach .teach-hero-slide:not(:first-child) { display: none; }
}
/* 사진 위 배지 — 100% 수업료가 모두 강사에게 */
.teach .teach-hero-badge { position: absolute; inset-block-start: var(--wa-space-l); inset-inline-start: calc(-1 * var(--wa-space-l)); display: grid; gap: 0; max-inline-size: 13rem; padding: var(--wa-space-s) var(--wa-space-l); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); color: var(--wa-color-text-normal); box-shadow: var(--wa-shadow-l); line-height: 1.35; }
.teach .teach-hero-badge strong { color: var(--wa-color-success-on-quiet); font-size: calc(2rem * var(--wa-font-size-scale, 1)); font-weight: 850; letter-spacing: -0.03em; line-height: 1.1; }
.teach .teach-hero-badge span { font-size: var(--wa-font-size-s); font-weight: 650; }
.teach .teach-visual-caption { display: grid; gap: var(--wa-space-xs); padding: var(--wa-space-m) var(--wa-space-l); border: 0; border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); color: var(--wa-color-text-normal); box-shadow: var(--wa-shadow-m); }
.teach .teach-visual-title { color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-s); font-weight: 750; line-height: 1.6; }

/* ── 세미나 일정: 진행 시간(KST)과 방문자 시간대의 다음 회차 — 첫 화면 그림 아래·세미나 카드·강사 "내 정보"의 세미나 카드가 같이 쓴다(.teach 밖에서도) ── */
.teach-seminar-time { display: flex; align-items: baseline; gap: var(--wa-space-s); color: var(--wa-color-text-normal); line-height: 1.6; }
.teach-seminar-time > i { flex: none; color: var(--wa-color-brand-on-quiet); }
.teach-seminar-time strong { display: block; font-size: var(--wa-font-size-m); font-weight: 700; }
.teach-seminar-local { display: block; color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); }

/* ── 사실 띠: 첫 화면 아래쪽에 겹쳐 올라온 한 장의 판 — 있는 사실만 크게 ── */
.teach .teach-facts { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: calc(-1 * (var(--teach-gap) + 3.5rem)); margin-inline: clamp(0.75rem, 3cqi, 2.5rem); padding: var(--wa-space-l); border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-l); }
.teach .teach-fact { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--wa-space-s); padding: var(--wa-space-s) var(--wa-space-l); color: var(--wa-color-text-normal); font-size: var(--wa-font-size-m); font-weight: 700; line-height: 1.45; }
.teach .teach-fact + .teach-fact { border-inline-start: 1px solid var(--wa-color-surface-border); }
.teach .teach-fact .sonub-icon-tile { flex: none; }
.teach .teach-fact-number { flex: none; display: flex; align-items: center; min-block-size: 3rem; color: var(--wa-color-success-on-quiet); font-size: calc(clamp(2.2rem, 4.5cqi, 2.9rem) * var(--wa-font-size-scale, 1)); font-weight: 850; letter-spacing: -0.04em; line-height: 1; }

/* ── 장점 세 가지: 사진 카드 ── */
.teach .teach-pillar-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wa-space-xl); }
.teach .teach-pillar { position: relative; overflow: clip; padding: 0 0 clamp(1.25rem, 2.5cqi, 2rem); border: 0; border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-m); gap: var(--wa-space-m); transition: box-shadow 160ms ease, translate 160ms ease; }
.teach .teach-pillar > :not(.teach-pillar-photo) { margin-inline: clamp(1.25rem, 2.5cqi, 2rem); }
.teach .teach-pillar-photo { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.teach .teach-pillar-head { display: flex; align-self: stretch; justify-content: space-between; align-items: end; margin-block-start: calc(-1 * var(--wa-space-2xl)); }
.teach .teach-pillar-head .sonub-icon-tile { inline-size: 3.5rem; block-size: 3.5rem; font-size: calc(1.5rem * var(--wa-font-size-scale, 1)); box-shadow: var(--wa-shadow-m); outline: 4px solid var(--wa-color-surface-raised); }
.teach .teach-pillar-number { color: var(--wa-color-brand-on-quiet); font-size: calc(2rem * var(--wa-font-size-scale, 1)); font-weight: 850; opacity: 0.35; font-variant-numeric: tabular-nums; line-height: 1; }
.teach .teach-pillar h3 { font-size: var(--wa-font-size-l); font-weight: 800; line-height: 1.45; }
.teach :is(.teach-pillar, .teach-tool) p { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-m); line-height: 1.8; }

/* ── 직접 결제: 넓은 띠 위의 아주 큰 100% ── */
.teach .teach-earnings { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4cqi, 3.5rem); padding: clamp(1.5rem, 4cqi, 3.5rem); border: 0; border-radius: var(--wa-border-radius-xl); background: linear-gradient(140deg, var(--wa-color-success-fill-quiet), var(--wa-color-surface-raised) 70%); box-shadow: var(--wa-shadow-m); }
.teach .teach-earnings .sonub-eyebrow { color: var(--wa-color-success-on-quiet); }
.teach .teach-earnings-text { display: grid; justify-items: start; gap: var(--wa-space-l); min-inline-size: 0; }
.teach .teach-note { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-s); line-height: 1.8; }
.teach .teach-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: var(--wa-space-m); padding: var(--wa-space-2xl) var(--wa-space-l); border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-l); text-align: center; }
.teach .teach-flow-node { display: grid; justify-items: center; gap: var(--wa-space-xs); font-weight: 650; }
.teach .teach-flow-node .sonub-icon-tile { inline-size: 3.5rem; block-size: 3.5rem; font-size: calc(1.5rem * var(--wa-font-size-scale, 1)); }
.teach .teach-flow-total { grid-column: 1 / -1; justify-self: center; color: var(--wa-color-success-on-quiet); font-size: calc(clamp(4rem, 10cqi, 7rem) * var(--wa-font-size-scale, 1)); font-weight: 850; letter-spacing: -0.05em; line-height: 1; }
.teach .teach-flow-arrow { display: grid; justify-items: center; gap: var(--wa-space-2xs); padding-block-start: var(--wa-space-s); color: var(--wa-color-success-on-quiet); font-size: var(--wa-font-size-s); font-weight: 700; }
.teach .teach-flow-arrow i { font-size: var(--wa-font-size-xl); }
.teach .teach-flow-sonub { grid-column: 1 / -1; justify-self: center; padding: var(--wa-space-xs) var(--wa-space-l); border-radius: var(--wa-border-radius-pill); background: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet); font-size: var(--wa-font-size-m); font-weight: 750; }

/* ── 여섯 단계: 번호가 주인공인 타임라인 카드 ── */
.teach .teach-step-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wa-space-xl); counter-reset: none; }
.teach .teach-step { position: relative; display: grid; align-content: start; gap: var(--wa-space-s); padding: var(--wa-space-xl); border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); transition: box-shadow 160ms ease; }
.teach .teach-step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-m); margin-block-end: var(--wa-space-xs); }
.teach .teach-step-number { order: -1; display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: var(--teach-stage); color: var(--teach-on-stage); font-size: var(--wa-font-size-l); font-weight: 850; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 6px color-mix(in srgb, var(--teach-stage) 18%, transparent); }
.teach .teach-step .sonub-icon-tile { inline-size: 3rem; block-size: 3rem; font-size: calc(1.3rem * var(--wa-font-size-scale, 1)); }
.teach .teach-step h3 { font-size: var(--wa-font-size-l); font-weight: 800; line-height: 1.45; }
.teach .teach-step h3 a { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); min-block-size: 2.75rem; padding-block: var(--wa-space-xs); color: var(--wa-color-text-normal); text-decoration: none; transition: color 160ms ease; }
.teach .teach-step h3 a i { flex: none; color: var(--wa-color-brand-on-quiet); font-size: 0.75em; }
.teach .teach-step p { color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-m); line-height: 1.8; }
/* 같은 줄의 카드 사이 이음선(타임라인) — 마지막 칸 뒤에는 없다 */
.teach .teach-step:not(:nth-child(3n))::after { content: ''; position: absolute; inset-block-start: calc(var(--wa-space-xl) + 1.625rem); inset-inline-start: 100%; inline-size: var(--wa-space-xl); border-block-start: 3px dotted color-mix(in srgb, var(--teach-stage) 55%, transparent); }
.teach .teach-steps-start { justify-content: center; }

/* ── AI 교육·세미나: 두 장의 카드 ── */
.teach .teach-learn > .sonub-lead { max-inline-size: 52rem; margin-block-start: calc(-1 * var(--wa-space-m)); }
.teach .teach-learn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-xl); }
.teach .teach-learn-grid > article { position: relative; padding: clamp(1.25rem, 3cqi, 2.5rem); gap: var(--wa-space-m); border: 0; border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-m); }
.teach .teach-learn-grid > .teach-seminar { background: linear-gradient(160deg, var(--wa-color-brand-fill-quiet), var(--wa-color-surface-raised) 60%); }
.teach .teach-learn-grid h3 { font-size: var(--wa-font-size-xl); font-weight: 800; line-height: 1.4; }
.teach .teach-learn-grid p { color: var(--wa-color-text-normal); font-size: var(--wa-font-size-m); line-height: 1.8; }
.teach .teach-seminar .teach-seminar-time { inline-size: 100%; box-sizing: border-box; padding: var(--wa-space-m) var(--wa-space-l); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); }
.teach .teach-seminar .teach-seminar-time strong { font-size: var(--wa-font-size-l); }
.teach .teach-checks { display: grid; gap: var(--wa-space-s); }
.teach .teach-checks li { display: flex; align-items: baseline; gap: var(--wa-space-s); font-size: var(--wa-font-size-m); font-weight: 600; line-height: 1.7; }
.teach .teach-checks i { flex: none; color: var(--wa-color-success-on-quiet); }
.teach .teach-seminar .teach-seminar-join { font-size: var(--wa-font-size-s); color: var(--wa-color-text-quiet); }
.teach .teach-learn-grid .teach-start { margin-block-start: auto; }
.teach .teach-course .sonub-button { margin-block-start: auto; align-self: flex-start; }
.teach .teach-learn-grid > .teach-course { background: linear-gradient(160deg, var(--wa-color-success-fill-quiet), var(--wa-color-surface-raised) 60%); }
.teach .teach-course-preview { display: grid; gap: var(--wa-space-s); inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.teach .teach-course-preview li { margin: 0; }
.teach .teach-course-preview a { display: flex; align-items: center; gap: var(--wa-space-m); min-block-size: 3.5rem; padding: var(--wa-space-s) var(--wa-space-m); border-radius: var(--wa-border-radius-l); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); color: var(--wa-color-text-normal); font-size: var(--wa-font-size-m); font-weight: 650; line-height: 1.5; text-decoration: none; transition: color 160ms ease, box-shadow 160ms ease; }
.teach .teach-course-preview a > span:nth-child(2) { flex: 1; min-inline-size: 0; }
.teach .teach-course-preview i { flex: none; color: var(--wa-color-brand-on-quiet); }
.teach .teach-course-number { flex: none; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--wa-border-radius-m); background: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud); font-size: var(--wa-font-size-s); font-weight: 850; font-variant-numeric: tabular-nums; }

/* ── 강사 도구: 3×2 카드 ── */
.teach .teach-tool-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wa-space-l); }
.teach .teach-tool { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: center; gap: var(--wa-space-s) var(--wa-space-m); padding: var(--wa-space-xl); border: 0; border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); transition: box-shadow 160ms ease; }
.teach .teach-tool .sonub-icon-tile { inline-size: 3.25rem; block-size: 3.25rem; font-size: calc(1.4rem * var(--wa-font-size-scale, 1)); }
.teach .teach-tool h3 { font-size: var(--wa-font-size-l); font-weight: 800; line-height: 1.45; }
.teach .teach-tool p { grid-column: 1 / -1; }

/* ── 자주 묻는 질문: 한 장의 판 위 줄 목록 ── */
.teach .teach-faq-list { max-inline-size: var(--sonub-reading-width, 54rem); padding-inline: clamp(1rem, 3cqi, 2rem); border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-s); }
.teach .teach-faq-item { margin: 0; padding: 0; border: 0; border-block-end: 1px solid var(--wa-color-surface-border); border-radius: 0; background: transparent; }
.teach .teach-faq-item:last-child { border-block-end: 0; }
.teach .teach-faq-item summary { display: flex; align-items: center; gap: var(--wa-space-m); min-block-size: 3.75rem; margin: 0; padding: var(--wa-space-m) 0; cursor: pointer; font-size: var(--wa-font-size-m); font-weight: 750; line-height: 1.7; list-style: none; }
.teach .teach-faq-item summary::-webkit-details-marker { display: none; }
.teach .teach-faq-item summary span { flex: 1; text-align: start; }
.teach .teach-faq-item summary::after { display: none; }
.teach .teach-faq-item p + p { margin-block-start: calc(-1 * var(--wa-space-s)); }
.teach .teach-faq-item p a { display: inline-flex; align-items: center; gap: var(--wa-space-xs); color: var(--wa-color-brand-on-quiet); font-weight: 600; }
.teach .teach-faq-chevron { flex: none; color: var(--wa-color-brand-on-quiet); font-size: 0.75em; }
.teach .teach-faq-item[open] .teach-faq-chevron { transform: rotate(180deg); }
.teach .teach-faq-item p { padding: 0 0 var(--wa-space-l); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-m); line-height: 1.85; }

/* ── 가르칠 과목과 자격(강사 인증서와 같은 위젯) — 강사 소개에서는 다른 절처럼 머리를 두고 한 장의 판으로 ── */
.teach .teaching-scope { gap: var(--wa-space-xl); padding: clamp(1.5rem, 4cqi, 3rem); border: 0; border-radius: var(--wa-border-radius-xl); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-m); scroll-margin-block-start: 7rem; }
.teach .teaching-scope .teaching-scope-overview > p { color: var(--wa-color-text-normal); }
.teach .teaching-scope .teaching-qualification { padding: var(--wa-space-l); border-radius: var(--wa-border-radius-l); background: var(--wa-color-brand-fill-quiet); }
.teach .teaching-scope .teaching-english-note { background: var(--wa-color-surface-lowered); }

/* ── 마지막 시작 안내: 첫 화면과 같은 브랜드색 무대 ── */
.teach .teach-cta { position: relative; isolation: isolate; overflow: clip; display: grid; justify-items: center; text-align: center; gap: var(--wa-space-l); padding: clamp(2rem, 6cqi, 5rem) clamp(1.25rem, 4cqi, 3rem); border-radius: var(--wa-border-radius-xl); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--teach-on-stage) 16%, transparent), transparent 55%), linear-gradient(140deg, var(--teach-stage), color-mix(in srgb, var(--teach-stage) 72%, var(--wa-color-pink-60))); color: var(--teach-on-stage); box-shadow: var(--wa-shadow-l); }
.teach .teach-cta > .sonub-icon-tile { display: grid; inline-size: 4.5rem; block-size: 4.5rem; font-size: calc(2rem * var(--wa-font-size-scale, 1)); background: var(--wa-color-surface-raised); box-shadow: var(--wa-shadow-m); }
.teach .teach-cta h2 { color: var(--teach-on-stage); font-size: calc(clamp(2rem, 5cqi, 3.4rem) * var(--wa-font-size-scale, 1)); font-weight: 850; line-height: 1.2; letter-spacing: -0.035em; }
.teach .teach-cta p { max-inline-size: 40rem; color: var(--teach-on-stage); font-size: var(--wa-font-size-l); line-height: 1.7; }
.teach .teach-cta .teach-start { justify-content: center; margin-block-start: var(--wa-space-s); }
.teach .teach-cta .teach-start-main { min-block-size: 3.75rem; border-color: transparent; background: var(--wa-color-surface-raised); color: var(--wa-color-brand-on-quiet); font-size: var(--wa-font-size-l); }
.teach .teach-cta .teach-start-main:hover { background: color-mix(in srgb, var(--wa-color-surface-raised) 88%, var(--teach-stage)); }

/* ── 좁은 화면의 아래 고정 시작 막대(teachStickyStart) — .teach 밖에 놓인다(sticky-start 위젯). 넓은 화면에서는 숨긴다 ── */
.teach-sticky-start { display: none; }
@media (max-width: 60rem) {
	.teach { padding-block-end: 5.5rem; }
	html:has(.teach-sticky-start.is-shown) { scroll-padding-block-end: 6rem; }
	.teach-sticky-start { position: fixed; z-index: 50; inset-inline: 0; inset-block-end: 0; display: block; padding: var(--wa-space-s) var(--wa-space-m) calc(var(--wa-space-s) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--wa-color-surface-raised) 94%, transparent); box-shadow: var(--wa-shadow-l); backdrop-filter: blur(8px); translate: 0 110%; transition: translate 200ms ease; }
	.teach-sticky-start.is-shown { translate: 0 0; }
	.teach-sticky-start .teach-start { gap: var(--wa-space-s); }
	.teach-sticky-start .teach-start-main { inline-size: 100%; min-block-size: 3.25rem; justify-content: center; font-size: var(--wa-font-size-m); font-weight: 750; }
}
@media (hover: hover) {
	.teach :is(.teach-step h3 a, .teach-course-preview a):hover { color: var(--wa-color-brand-on-quiet); text-decoration: underline; text-underline-offset: 0.25em; }
	.teach .teach-course-preview a:hover { box-shadow: var(--wa-shadow-m); }
	.teach .teach-hero .teach-start-secondary:hover { text-decoration: underline; text-underline-offset: 0.25em; }
	.teach .teach-pillar:hover { box-shadow: var(--wa-shadow-l); translate: 0 -4px; }
	.teach :is(.teach-step, .teach-tool):hover { box-shadow: var(--wa-shadow-m); }
}
@container teach-page (max-width: 62rem) {
	.teach .teach-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--wa-space-s); }
	.teach .teach-fact:nth-child(3) { border-inline-start: 0; }
	.teach .teach-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container teach-page (max-width: 50rem) {
	.teach .teach-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: var(--wa-space-l); }
	.teach .teach-hero h1 { font-size: calc(2.3rem * var(--wa-font-size-scale, 1)); }
	.teach .teach-hero-badge { inset-inline-start: var(--wa-space-s); }
	.teach .teach-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.teach .teach-step::after { display: none; }
	.teach .teach-pillar-list { grid-template-columns: minmax(0, 1fr); gap: var(--wa-space-l); }
	.teach .teach-pillar-photo { aspect-ratio: 2 / 1; }
	.teach .teach-earnings { grid-template-columns: minmax(0, 1fr); }
}
@container teach-page (max-width: 37rem) {
	.teach .teach-hero { grid-template-columns: minmax(0, 1fr); padding-block-end: calc(1.5rem + 3.5rem); }
	.teach .teach-hero h1 { font-size: calc(clamp(2rem, 9cqi, 2.6rem) * var(--wa-font-size-scale, 1)); }
	.teach .teach-hero-text { gap: var(--wa-space-l); }
	.teach .teach-hero-slide { aspect-ratio: 4 / 3; }
	.teach .teach-hero-badge { inset-block-start: var(--wa-space-s); max-inline-size: 11rem; padding: var(--wa-space-xs) var(--wa-space-m); }
	.teach .teach-hero-badge strong { font-size: calc(1.6rem * var(--wa-font-size-scale, 1)); }
	.teach .teach-facts { grid-template-columns: minmax(0, 1fr); margin-inline: var(--wa-space-s); padding: var(--wa-space-s); }
	.teach .teach-fact + .teach-fact { border-inline-start: 0; border-block-start: 1px solid var(--wa-color-surface-border); }
	.teach :is(.teach-learn-grid, .teach-tool-list, .teach-step-list) { grid-template-columns: minmax(0, 1fr); }
	.teach .teach-step { padding: var(--wa-space-l); }
}
@container teach-page (max-width: 25rem) {
	.teach .teach-hero .teach-start { inline-size: 100%; }
	.teach .teach-hero .teach-start-main { inline-size: 100%; justify-content: center; }
	.teach :is(.teach-hero, .teach-cta) .teach-start-main { padding-inline: var(--wa-space-m); font-size: var(--wa-font-size-m); overflow-wrap: normal; hyphens: auto; }
	.teach .teach-learn-grid > article { padding: var(--wa-space-m); }
	.teach .teach-flow { padding-inline: var(--wa-space-s); }
}
:lang(ur) .teach :is(h1, h2, h3, a) { line-height: 1.9; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
	.teach :is(.sonub-button, .teach-step h3 a, .teach-course-preview a, .teach-pillar, .teach-step, .teach-tool) { transition: none; }
	.teach-sticky-start { transition: none; }
	.teach .teach-pillar:hover { translate: none; }
}