/* 강사 광고 랜딩(/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; }
/* 수업 관련 안내는 읽는 동안 바뀌지 않는다. 제목만 공용 160ms 등장(SSOT 11절). */
.teach .teach-hero-rotator { inline-size: 100%; margin: 0; color: var(--teach-on-stage); }
.teach .teach-hero-copy { display: grid; gap: var(--wa-space-l); }
.teach .teach-hero-line { display: block; text-wrap: balance; overflow-wrap: anywhere; }
.teach .teach-hero-line + .teach-hero-line { font-size: 0.48em; line-height: 1.6; letter-spacing: 0; font-weight: 650; }
.teach .teach-hero-line:lang(ko) { word-break: keep-all; }
.teach .teach-hero-mark { padding-inline: 0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.teach .teach-hero-word, .teach .teach-hero-word > span { display: inline-block; }
/* 무대 위 시작 단추 — 바탕을 뒤집어 무대에서 가장 먼저 보이게 */
.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); }
/* 같은 강사의 세 장면 — 자동 재생 없이 함께 읽는 사진 묶음. */
.teach .teach-hero-slides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-s); }
.teach .teach-hero-slide { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wa-border-radius-l); }
.teach .teach-hero-slide:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
/* 사진 위 배지 — 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; }
.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: 2px solid 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; }
/* 무료 체험 카드의 규정 링크 — 미입금 수업 의무의 원본(결제 안내 #payment-deadline-title)으로 */
.teach .teach-tool-rule { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--wa-space-2xs); justify-self: start; color: var(--wa-color-brand-on-quiet); font-weight: var(--wa-font-weight-semibold); }

/* ── 자주 묻는 질문: 한 장의 판 위 줄 목록 ── */
.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); visibility: hidden; }
	.teach-sticky-start.is-shown { visibility: visible; }
	.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); }
	.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; }
}
