/*
 * 언어 교재(/english · /korean)와 내 학습(/learn) — 이전 사이트 web/src/routes/{english,korean,learn}/** 의 스타일을 옮겼다.
 * 읽는 화면: resources/views/english/index · learn/course/{track,level} · learn/index. 선택자는 .course · .learn 아래로 좁힌다.
 * 방향이 있는 속성은 논리 속성만(ar·ur). 색은 --sonub-* / Web Awesome 토큰 — 다크 테마에서도 읽혀야 한다.
 */

/* ── 교재 공통 ─────────────────────────────────── */
.course {
	display: grid;
	gap: var(--sonub-space-6);
}
.course:not(.sonub-page-reading) { max-inline-size: 60rem; }

.course .course-hero {
	display: grid;
	gap: var(--sonub-space-2);
}
.course .course-back {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-2);
	color: var(--sonub-muted);
	font-size: 0.9rem;
	text-decoration: none;
}
.course .course-back:hover { color: var(--sonub-accent-ink); }
.course .course-hero .sonub-eyebrow { justify-self: start; }

.course .course-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: var(--sonub-success-soft);
	color: var(--sonub-success);
	font-size: 0.8rem;
	font-weight: 700;
	vertical-align: middle;
}

.course .course-status,
.course .course-note {
	margin: 0;
	color: var(--sonub-muted);
	font-size: 0.92rem;
}
.course .course-note {
	padding: var(--sonub-space-2) var(--sonub-space-3);
	border-inline-start: 3px solid var(--sonub-accent);
	border-radius: var(--sonub-radius-sm);
	background: var(--sonub-accent-soft);
	color: var(--sonub-ink);
}
.course .course-error { color: var(--sonub-danger); }
.course .course-note.course-error {
	border-inline-start-color: var(--sonub-danger);
	background: var(--sonub-danger-soft);
}

/* 한국어 교재 위쪽 탭(기초 | 중급) */
.course .course-tabs {
	justify-self: center;
	max-inline-size: 100%;
}
.course .course-tabs .sonub-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-2);
}

/* ── 허브(/english) ─────────────────────────────── */
.course .course-tracks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--sonub-space-4);
}
.course .course-track-card {
	display: grid;
	align-content: start;
	gap: var(--sonub-space-1);
	padding: var(--sonub-space-6);
	color: inherit;
	text-decoration: none;
}
.course .course-track-card .sonub-icon-tile { margin-block-end: var(--sonub-space-2); }
.course .course-track-name { font-size: 1.15rem; }
.course .course-track-tagline { color: var(--sonub-ink); }
.course .course-track-audience {
	color: var(--sonub-muted);
	font-size: 0.87rem;
}
.course .course-track-go {
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin-block-start: var(--sonub-space-2);
	color: var(--sonub-accent-ink);
	font-weight: 700;
}

/* ── 트랙(/english/{트랙} · /korean/{트랙}) ─────────── */
.course .course-enroll {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sonub-space-2) var(--sonub-space-4);
	margin-block-start: var(--sonub-space-2);
}
.course .course-enroll .course-status { flex-basis: 100%; }
.course .course-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-2);
	color: var(--sonub-accent-ink);
	font-weight: 700;
	text-decoration: none;
}
.course .course-link:hover { text-decoration: underline; }

.course .course-stages {
	display: grid;
	gap: var(--sonub-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Web Awesome 기본 스타일(wa-native)이 li 에 주는 들여쓰기를 없앤다 */
.course .course-stages > li { margin-inline-start: 0; }
.course .course-stage {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-4);
	padding: var(--sonub-space-3) var(--sonub-space-4);
	color: inherit;
	text-decoration: none;
}
.course .course-stage-no {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 50%;
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.course .course-stage-body {
	flex: 1;
	min-inline-size: 0;
	display: grid;
	gap: 0.15rem;
}
.course .course-stage-summary {
	color: var(--sonub-muted);
	font-size: 0.87rem;
}
.course .course-stage-tier {
	flex: none;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--dg-fill, var(--sonub-accent)) 14%, transparent);
	color: var(--sonub-ink);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.course .course-stage { flex-wrap: wrap; }
	.course .course-stage-tier { margin-inline-start: calc(2.25rem + var(--sonub-space-4)); }
}

/* ── 단계(/english/{트랙}/{단계} · /korean/…) ───────── */
.course .course-stage-label {
	color: var(--sonub-accent-ink);
	font-weight: 700;
}
.course .course-steps {
	display: grid;
	gap: var(--sonub-space-4);
}
.course .course-step {
	display: grid;
	gap: var(--sonub-space-3);
	padding: var(--sonub-space-6);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-card);
	background: var(--sonub-surface);
	transition: border-color var(--sonub-motion);
}
.course .course-step.done { border-color: var(--wa-color-success-border-loud); }
.course .course-step h2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: 0;
	font-size: 1.15rem;
}
.course .course-prompt {
	margin: 0;
	line-height: 1.75;
}
.course .course-choices {
	display: grid;
	gap: var(--sonub-space-2);
}
.course .course-choice {
	display: block;
	inline-size: 100%;
	padding: var(--sonub-space-3) var(--sonub-space-4);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-canvas);
	color: var(--sonub-ink);
	font: inherit;
	font-size: 1.05rem;
	text-align: start;
	cursor: pointer;
	transition: border-color var(--sonub-motion), background var(--sonub-motion);
}
.course .course-choice:not(:disabled):hover { border-color: var(--sonub-accent); }
.course .course-choice:disabled {
	cursor: default;
	opacity: 0.7;          /* wa-native 의 disabled 0.5 는 답을 읽기 어렵다 */
}
.course .course-choice:is(.correct, .wrong) { opacity: 1; }
.course .course-choice.correct {
	border-color: var(--wa-color-success-border-loud);
	background: var(--sonub-success-soft);
}
.course .course-choice.wrong {
	border-color: var(--wa-color-danger-border-loud);
	background: var(--sonub-danger-soft);
}
.course .course-ok,
.course .course-retry { justify-self: start; }
.course .course-explain {
	margin: 0;
	color: var(--sonub-muted);
	line-height: 1.7;
}
.course .course-result-correct { color: var(--sonub-success); }
.course .course-result-wrong { color: var(--sonub-danger); }

.course .course-pager {
	display: flex;
	justify-content: space-between;
	gap: var(--sonub-space-4);
}
.course .course-pager a {
	display: inline-flex;
	align-items: center;
	gap: var(--sonub-space-2);
	color: var(--sonub-accent-ink);
	font-weight: 700;
	text-decoration: none;
}
.course .course-pager a:hover { text-decoration: underline; }

/* ── 내 학습(/learn) ─────────────────────────────── */
.learn {
	display: grid;
	gap: var(--sonub-space-4);
}
.learn .learn-block {
	display: grid;
	gap: var(--sonub-space-3);
	padding: var(--sonub-space-6);
}
.learn .learn-block h2 {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	margin: 0;
	font-size: 1.1rem;
}
.learn .learn-block h2 i { color: var(--sonub-accent-ink); }
.learn .learn-textbooks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--sonub-space-4);
}
.learn .learn-textbook {
	display: grid;
	align-content: start;
	gap: var(--sonub-space-1);
	padding: var(--sonub-space-6);
	color: inherit;
	text-decoration: none;
}
.learn .learn-textbook .sonub-icon-tile { margin-block-end: var(--sonub-space-2); }
.learn .learn-textbook strong { font-size: 1.15rem; }
.learn .learn-textbook span { color: var(--sonub-muted); }
.learn .learn-guest { justify-items: start; }
.learn .learn-guest p { margin: 0; }
.learn .learn-muted,
.learn .learn-next {
	margin: 0;
	color: var(--sonub-muted);
}
.learn .learn-next a { color: var(--sonub-accent-ink); }
.learn .learn-error {
	margin: 0;
	color: var(--sonub-danger);
}

.learn .learn-list {
	display: grid;
	gap: var(--sonub-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.learn .learn-list > li {
	margin-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sonub-space-1) var(--sonub-space-3);
	padding-block: var(--sonub-space-2);
	border-block-end: 1px solid var(--sonub-border);
}
.learn .learn-list > li:last-child { border-block-end: 0; }
.learn .learn-list a { color: inherit; }
.learn .learn-list a:hover { color: var(--sonub-accent-ink); }

.learn .learn-item {
	display: grid;
	gap: 0.1rem;
	text-decoration: none;
}
.learn .learn-meta {
	color: var(--sonub-muted);
	font-size: 0.85rem;
}
.learn .learn-tag {
	padding: 0.05rem 0.4rem;
	border-radius: var(--sonub-radius-sm);
	background: var(--sonub-subtle);
	font-family: var(--wa-font-family-code);
	font-size: 0.8rem;
}

/* 계획 대비 막대 — 값은 --pct 하나로 받는다 */
.learn .learn-list > li.learn-plan {
	display: grid;
	gap: var(--sonub-space-1);
}
.learn .learn-bar {
	display: block;
	block-size: 0.4rem;
	border-radius: 999px;
	background: linear-gradient(to right, var(--sonub-accent) var(--pct), var(--sonub-subtle) var(--pct));
}
[dir='rtl'] .learn .learn-bar { background: linear-gradient(to left, var(--sonub-accent) var(--pct), var(--sonub-subtle) var(--pct)); }

/* 복습 — 제목과 등급 단추 */
.learn .learn-reviews > li { justify-content: space-between; }
.learn .learn-review-body {
	display: grid;
	gap: 0.1rem;
	min-inline-size: 0;
}
.learn .learn-grades {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sonub-space-1);
}
.learn .learn-grades .sonub-button {
	min-block-size: 2rem;
	padding: 0.25rem 0.7rem;
	font-size: 0.82rem;
}

/* 차원별 숙련도 칩 */
.learn .learn-skills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sonub-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.learn .learn-skills > li {
	margin-inline-start: 0;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font-size: 0.85rem;
	font-weight: 600;
}

/* ── 한국어 음성 대화(/korean/voice) — 이전 사이트 VoiceStage 의 마이크 콘솔(3D 무대는 옮기지 않았다) ─── */
.course-voice .ko-voice {
	display: grid;
	justify-items: center;
	gap: var(--wa-space-m);
	max-inline-size: 40rem;
	margin: var(--wa-space-xl) auto;
	padding: var(--wa-space-2xl) var(--wa-space-l);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-l);
	background: radial-gradient(130% 90% at 50% 0%, var(--wa-color-brand-fill-quiet) 0%, transparent 60%), var(--wa-color-surface-raised);
	text-align: center;
}
.course-voice .ko-voice h1 { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.course-voice .ko-voice .sonub-lead { margin: 0; }
.course-voice .ko-voice-mic {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-xs);
	min-block-size: 3.5rem;
	padding: 0 var(--wa-space-xl);
	border: 0;
	border-radius: 999px;
	background: var(--wa-color-brand-fill-loud);
	color: var(--wa-color-brand-on-loud);
	font: inherit;
	font-size: 1.05rem;
	font-weight: var(--wa-font-weight-semibold);
	cursor: pointer;
	box-shadow: 0 12px 28px -14px var(--wa-color-brand-fill-loud);
	transition: transform 160ms, background-color 160ms;
}
.course-voice .ko-voice-mic:hover { transform: translateY(-1px); }
.course-voice .ko-voice-mic[aria-pressed='true'] { background: var(--wa-color-danger-on-quiet); box-shadow: 0 0 0 6px color-mix(in srgb, var(--wa-color-danger-on-quiet) 18%, transparent); }
.course-voice .ko-voice-status { margin: 0; font-weight: 600; color: var(--wa-color-brand-on-quiet); }
.course-voice .ko-voice-partial { margin: 0; color: var(--wa-color-text-quiet); font-style: italic; }
.course-voice .ko-voice-error { margin: 0; color: var(--wa-color-danger-on-quiet); }
.course-voice .ko-voice small { color: var(--wa-color-text-quiet); }
@media (prefers-reduced-motion: reduce) {
	.course-voice .ko-voice-mic { transition: none; }
}

/* ── 교재 · 내 학습 — 단계와 피드백의 읽기 표면 ───────────── */
.course .course-step { box-shadow: var(--sonub-shadow-card); }
.course .course-prompt { line-height: 1.9; }
.course .course-choice { min-block-size: 2.75rem; white-space: normal; }
.learn .learn-block { padding: clamp(1.25rem, 2vw, 2rem); }
.course .course-tracks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }