/*
 * 영어 교재(/learn/english — 위젯 x-widget.learn.english-course · english-guide · english-page). SONUB-SSOT.md 23절 "교재 주소".
 * 목차·트랙·챕터가 한 화면에 있고 하나만 보인다(public/css/course-chapters.css). 공통 교재 부품(.course-stage·.course-step·.course-choice)은 learn.css.
 * 방향이 있는 속성은 논리 속성만(ar·ur). 색은 --sonub-* / Web Awesome 토큰 — 다크·핑크 테마에서도 읽혀야 한다.
 */

/* ── 틀 ─────────────────────────────────── */
.english-page { max-inline-size: 64rem; }
.course .english-course,
.course .english-course > .course-toc,
.course .english-course > .course-chapter {
	display: grid;
	gap: var(--sonub-space-6);
	min-inline-size: 0;
}
.course .english-course:lang(ko) { word-break: keep-all; }
.course .english-course :is(h2, h3, h4, p, .course-stage-body, .course-track-name) { overflow-wrap: anywhere; }
.course .english-course :is(a, button):focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 2px; }
.course .english-course > .course-toc > h2 { margin: 0; font-size: calc(1.35rem * var(--wa-font-size-scale, 1)); }
.course .english-course-toc > .teacher-guidance { margin: 0; }

/* ── 목차 — 트랙 카드 넷(표지 그림 위, 글 아래) ─────────── */
.course .english-tracks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wa-space-m);
}
.course .english-track-card {
	display: grid;
	align-content: start;
	gap: var(--wa-space-s);
	min-inline-size: 0;
	padding: 0 0 var(--wa-space-l);
	overflow: hidden;
	border-radius: var(--sonub-radius-panel);
	color: inherit;
	text-decoration: none;
	background: var(--wa-color-surface-raised);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.course .english-track-card:hover { transform: translateY(-2px); box-shadow: var(--wa-shadow-m); }
.course .english-track-card > :not(.english-track-cover) { margin-inline: var(--wa-space-l); }
.course .english-track-card .english-track-cover { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.course .english-track-title { display: flex; align-items: center; gap: var(--wa-space-s); }
.course .english-track-title .sonub-icon-tile { flex: none; }
.course .course-track-name { font-size: var(--wa-font-size-l); line-height: 1.5; }
.course .course-track-tagline { color: var(--sonub-ink); line-height: 1.8; }
.course .course-track-audience { color: var(--sonub-muted); font-size: calc(0.9rem * var(--wa-font-size-scale, 1)); line-height: 1.7; }
.course .course-track-go {
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin-block-start: auto;
	padding-block-start: var(--wa-space-s);
	border-block-start: 1px solid var(--wa-color-surface-border);
	color: var(--sonub-accent-ink);
	font-weight: 700;
}

/* ── 트랙 — 소개·등록 옆에 표지 그림, 아래 챕터 목록 ─────────── */
.course .english-track-hero { gap: var(--wa-space-m); }
.course .english-track-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
	align-items: center;
	gap: var(--wa-space-l);
	padding: clamp(1rem, 2.1vw, 1.75rem);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--sonub-surface);
}
.course .english-track-intro > div { display: grid; gap: var(--wa-space-s); min-inline-size: 0; }
.course .english-track-intro h2 { margin: 0; font-size: calc(1.6rem * var(--wa-font-size-scale, 1)); }
.course .english-track-intro .sonub-eyebrow { justify-self: start; }
.course .english-track-intro .english-track-cover { inline-size: 100%; block-size: auto; border-radius: var(--wa-border-radius-l); }
.course .english-course .course-stages { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--wa-space-m); }
.course .english-course .course-stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	align-content: start;
	gap: var(--wa-space-s) var(--wa-space-m);
	block-size: 100%;
	padding: var(--wa-space-m);
	background: var(--wa-color-surface-raised);
}
.course .english-course .course-stage-tier { grid-column: 2; justify-self: start; margin-inline-start: 0; white-space: normal; }
.course .english-course .course-stage-summary { line-height: 1.7; }

/* ── 챕터 — 읽는 폭의 카드 하나 ─────────── */
.course .english-course > .english-chapter {
	inline-size: 100%;
	max-inline-size: var(--sonub-reading-width, 48rem);
	margin-inline: auto;
	padding: clamp(1rem, 2.1vw, 2rem);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--sonub-surface);
	box-shadow: var(--wa-shadow-s);
}
.course .english-chapter-hero h2 { margin: 0; font-size: calc(1.55rem * var(--wa-font-size-scale, 1)); }
.course .english-chapter-hero .course-stage-label { justify-self: start; }
.course .english-course .course-step { min-inline-size: 0; box-shadow: none; background: var(--sonub-canvas); }
.course .english-course .course-step :is(h3, h4) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sonub-space-2); margin: 0; }
.course .english-course .english-key-point { border-inline-start: 4px solid var(--wa-color-brand-fill-loud); }
.course .english-course .english-key-point h3 i { color: var(--sonub-accent-ink); }
.course .english-practice-title {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: var(--sonub-space-4) 0 0;
	font-size: calc(1.2rem * var(--wa-font-size-scale, 1));
}
.course .english-practice-title i { color: var(--sonub-accent-ink); }
.course .english-quiz-no {
	display: inline-grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
}
/* 영어 선택지는 영어 방향(왼쪽→오른쪽)으로 읽는다 — RTL 화면에서도 */
.course .english-course .course-choice { direction: ltr; text-align: start; }
.course .english-course :is(.course-back, .course-pager a, .course-link, .course-choice) { min-block-size: 2.75rem; }
.course .english-course .course-pager { gap: var(--wa-space-m); }
.course .english-course .course-pager a { display: inline-flex; align-items: center; gap: var(--sonub-space-2); }
.course .english-course .course-pager a span { display: grid; }
.course .english-course .course-pager small { color: var(--sonub-muted); font-weight: 400; }

/* ── 차근차근 배우기(x-widget.learn.english-guide) — 설명·그림·예문·대화·자주 하는 실수 ── */
.english-guide {
	display: grid;
	gap: var(--sonub-space-4);
	max-inline-size: var(--sonub-reading-width, 48rem);
}
.english-guide :is(h3, h4) {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: 0;
}
.english-guide h3 { font-size: calc(1.25rem * var(--wa-font-size-scale, 1)); }
.english-guide h4 { font-size: calc(1.05rem * var(--wa-font-size-scale, 1)); }
.english-guide :is(h3, h4) i { color: var(--sonub-accent-ink); }
.english-guide > p,
.english-guide > .sonub-rich-text { margin: 0; line-height: 1.9; }
.english-guide .sonub-figure { margin: 0; }
.english-guide-examples {
	display: grid;
	gap: var(--sonub-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.english-guide-examples li {
	margin: 0;
	padding: var(--sonub-space-3) var(--sonub-space-4);
	border-inline-start: 4px solid var(--wa-color-brand-fill-loud);
	border-radius: var(--wa-border-radius-s);
	background: var(--wa-color-surface-raised);
}
.english-guide-examples p { margin: 0; }
/* 영어 예문은 왼쪽에서 오른쪽 — RTL 화면에서도 글줄의 시작 쪽에 붙인다 */
.english-guide .english-guide-en {
	font-size: calc(1.15rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	text-align: start;
	unicode-bidi: isolate;
}
.english-guide .english-guide-note {
	margin-block-start: var(--sonub-space-1);
	color: var(--wa-color-text-quiet);
	line-height: 1.75;
}
.english-guide-trap {
	display: grid;
	gap: var(--sonub-space-2);
	padding: var(--sonub-space-4);
	border-inline-start: 4px solid var(--dg-fill);
	border-radius: var(--wa-border-radius-s);
	background: var(--dg-soft);
}
.english-guide-trap h4 i { color: var(--dg-fill); }
.english-guide-trap p { margin: 0; line-height: 1.8; }
.english-guide :is(p, li, h3, h4) { word-break: keep-all; overflow-wrap: anywhere; }
:is(:lang(ja), :lang(zh), :lang(th)) .english-guide :is(p, li, h3, h4) { word-break: normal; }

/* 짧은 대화 — A 는 글줄 시작 쪽, B 는 끝 쪽으로 조금 밀어 말을 주고받는 모양을 보인다 */
.english-guide-dialogue {
	display: grid;
	gap: var(--sonub-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.english-guide-dialogue li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: var(--sonub-space-3);
	margin: 0;
	padding: var(--sonub-space-3);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-raised);
}
.english-guide-dialogue li[data-speaker="B"] {
	margin-inline-start: var(--sonub-space-6);
	background: var(--wa-color-brand-fill-quiet);
}
.english-guide-dialogue p { margin: 0; }
/* 말하는 사람(A·B) 동그라미 — 화면 읽기도 이 글자를 먼저 읽는다 */
.english-guide-speaker {
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font-weight: 700;
}
.english-guide-dialogue li[data-speaker="B"] .english-guide-speaker {
	background: var(--wa-color-success-fill-loud);
	color: var(--wa-color-success-on-loud);
}
.english-guide-dialogue .english-guide-en { font-size: calc(1.05rem * var(--wa-font-size-scale, 1)); }

/* ── 좁은 화면 ─────────── */
@media (max-width: 720px) {
	.course .english-track-intro { grid-template-columns: minmax(0, 1fr); }
	.course .english-track-intro .english-track-cover { order: -1; }
}
@media (max-width: 600px) {
	.course .english-tracks { grid-template-columns: minmax(0, 1fr); }
	.course .english-course .course-step { padding: var(--wa-space-m); }
	.course .english-course > .english-chapter { padding: var(--wa-space-m); }
}
@media (max-width: 480px) {
	.english-guide-dialogue li[data-speaker="B"] { margin-inline-start: var(--sonub-space-3); }
}
@media (prefers-reduced-motion: reduce) {
	.course .english-track-card { transition: none; }
	.course .english-track-card:hover { transform: none; }
}