/*
 * 학습 진도(/learning) — 이전 사이트 web/src/routes/learning/+page.svelte 의 스타일을 옮겼다.
 * resources/views/learning/index.blade.php 만 읽는다. 선택자는 .learning 아래로 좁힌다.
 * 방향이 있는 속성은 논리 속성만(ar·ur). 색은 --pes-* / Web Awesome 토큰 — 다크 테마에서도 읽혀야 한다.
 */

/* ── 학습 진도 ─────────────────────────────────── */
.learning {
	max-inline-size: 58rem;
	display: grid;
	gap: var(--pes-space-6);
}

.learning .learning-overall {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--pes-space-2);
	margin: 0;
}
.learning .learning-overall strong {
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
}
.learning .learning-overall span {
	color: var(--pes-muted);
	font-size: 0.9rem;
}

.learning .learning-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pes-space-2) var(--pes-space-3);
}
.learning .learning-switch {
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--pes-border);
	border-radius: 999px;
	background: var(--pes-surface);
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	cursor: pointer;
}
.learning .learning-switch:hover,
.learning .learning-switch:focus-visible {
	border-color: var(--pes-accent);
	color: var(--pes-accent-ink);
}
.learning .learning-hint {
	font-size: 0.85rem;
	color: var(--pes-muted);
}

.learning .learning-guest {
	display: grid;
	gap: var(--pes-space-3);
	max-inline-size: 36rem;
	padding: var(--pes-space-4);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
}
.learning .learning-guest p {
	margin: 0;
	line-height: 1.7;
}

/* 트랙 카드 */
.learning .learning-tracks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pes-space-4);
}
/* Web Awesome 기본 li 들여쓰기를 없앤다 */
.learning .learning-tracks > li,
.learning .learning-steps > li {
	margin: 0;
}
.learning .learning-track {
	padding: var(--pes-space-4) var(--pes-space-4) var(--pes-space-4);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-canvas);
}
.learning .learning-track.is-done {
	border-color: var(--wa-color-success-border-quiet, var(--pes-border));
}
.learning .learning-track-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pes-space-2);
}
.learning .learning-track-head h2 {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.05rem;
}
/* 순번 동그라미 — 테마를 따르는 테두리 색으로 칠한다(고정 회색이면 다크에서 순번이 안 보인다) */
.learning .learning-ord {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 999px;
	background: var(--pes-border);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}
.learning .learning-count {
	flex: none;
	color: var(--pes-muted);
	font-variant-numeric: tabular-nums;
}
.learning .learning-count.prep {
	font-variant-numeric: normal;
}
.learning .learning-track.is-done .learning-count {
	color: var(--pes-success);
	font-weight: 600;
}

/* 단계 목록 */
.learning .learning-steps {
	list-style: none;
	margin: var(--pes-space-3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: 0.4rem;
}
.learning .learning-steps[hidden] {
	display: none;
}
.learning .learning-step {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	padding: 0.4rem 0.55rem;
	border-radius: var(--pes-radius-control);
	color: inherit;
	font-size: 0.9rem;
	text-decoration: none;
}
.learning .learning-step:hover,
.learning .learning-step:focus-visible {
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
}
.learning .learning-step i {
	flex: none;
	margin-block-start: 0.2em;
	color: var(--pes-muted);
}
/* 아직인 단계는 속이 빈 동그라미(Font Awesome 의 regular 굵기) */
.learning .learning-step .learning-step-todo {
	--fa-style: 400;
}
.learning .learning-step .learning-step-done {
	display: none;
}
.learning .learning-step.done {
	color: var(--pes-muted);
}
.learning .learning-step.done .learning-step-todo {
	display: none;
}
.learning .learning-step.done .learning-step-done {
	display: inline-block;
	color: var(--pes-success);
}
/* 긴 이름(아랍어·힌디어 등)을 자르지 않고 줄을 바꾼다 */
.learning .learning-step-name {
	min-inline-size: 0;
	line-height: 1.45;
	overflow-wrap: anywhere;
}
/* 화면 읽기 프로그램에만 "완료" 를 읽어 준다 */
.learning .learning-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 자격증 */
.learning .learning-prep-note {
	margin: var(--pes-space-3) 0 var(--pes-space-2);
	color: var(--pes-muted);
	font-size: 0.9rem;
	line-height: 1.7;
}
.learning .learning-prep-link {
	font-size: 0.9rem;
	color: var(--pes-accent-ink);
	font-weight: 600;
}