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

/* ── 학습 진도 ─────────────────────────────────── */
.learning {
	max-inline-size: 58rem;
	display: grid;
	/* 열을 칸 폭에 묶는다 — 긴 독일어 단추("Reihenfolge für unter 16-Jährige anzeigen")가 머리 카드를 화면 밖으로 밀던 것(2026-10-24) */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sonub-space-6);
}

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

.learning .learning-hint {
	font-size: calc(0.85rem * var(--wa-font-size-scale, 1));
	color: var(--sonub-muted);
}

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

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

/* 단계 목록 */
.learning .learning-steps {
	list-style: none;
	margin: var(--sonub-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(--sonub-radius-control);
	color: inherit;
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
	text-decoration: none;
}
.learning .learning-step:hover,
.learning .learning-step:focus-visible {
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
}
.learning .learning-step i {
	flex: none;
	margin-block-start: 0.2em;
	color: var(--sonub-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(--sonub-muted);
}
.learning .learning-step.done .learning-step-todo {
	display: none;
}
.learning .learning-step.done .learning-step-done {
	display: inline-block;
	color: var(--sonub-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(--sonub-space-3) 0 var(--sonub-space-2);
	color: var(--sonub-muted);
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
	line-height: 1.7;
}
.learning .learning-prep-link {
	font-size: calc(0.9rem * var(--wa-font-size-scale, 1));
	color: var(--sonub-accent-ink);
	font-weight: 600;
}

/* 역할별 공통 카드와 과정 이동(SSOT 11·23절). */
.learning { max-inline-size: 64rem; }
.learning > .sonub-page-header { margin: 0; }
/* 카드 단추 줄 — 긴 독일어 단추("Reihenfolge für unter 16-Jährige anzeigen")도 칸 안에서 줄을 바꾼다. 바꾼 순서(aria-pressed)는 브랜드 색 */
.learning .page-guide-link { max-inline-size: 100%; white-space: normal; text-align: start; }
.learning .page-guide-link[aria-pressed='true'] { border-color: var(--sonub-accent); color: var(--sonub-accent-ink); }
.learning .learning-overall { padding: var(--wa-space-m); border: 1px solid var(--wa-color-brand-border-normal); border-radius: var(--wa-border-radius-l); background: var(--wa-color-brand-fill-quiet); }
.learning .learning-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--wa-space-s); min-inline-size: 0; }
.learning .learning-directory a { display: flex; align-items: center; gap: var(--wa-space-s); min-inline-size: 0; min-block-size: 2.75rem; padding: var(--wa-space-s) var(--wa-space-m); border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-l); background: var(--sonub-surface); color: var(--sonub-accent); text-decoration: none; font-size: calc(1rem * var(--wa-font-size-scale,1)); }
.learning .learning-directory i { flex-shrink: 0; }
.learning .learning-directory a:hover, .learning .learning-back:hover { border-color: var(--sonub-accent); background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
/* anywhere 는 "인공지능 사용 / 법" 처럼 낱말 중간을 끊는다 — 낱말 단위로, 한국어는 어절 단위로(2026-10-24) */
.learning .learning-directory span { min-inline-size: 0; overflow-wrap: break-word; }
.learning .learning-directory span:lang(ko) { word-break: keep-all; }
.learning .learning-track { min-inline-size: 0; padding: var(--wa-space-l); background: var(--sonub-surface); border-radius: var(--sonub-radius-panel); box-shadow: var(--wa-shadow-s); scroll-margin-block: 14rem 6rem; }
.learning .learning-track-head h2 { min-inline-size: 0; flex: 1; font-size: calc(1.125rem * var(--wa-font-size-scale,1)); }
.learning .learning-ord { inline-size: 2rem; block-size: 2rem; background: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet); }
.learning .learning-back { display: grid; place-items: center; flex-shrink: 0; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--sonub-border); border-radius: var(--wa-border-radius-m); color: var(--sonub-accent); text-decoration: none; }
.learning .learning-meter { --track-height: 0.5rem; margin-block-start: var(--wa-space-m); }
.learning .learning-track.is-done .learning-meter { --indicator-color: var(--wa-color-success-fill-loud); }
.learning .learning-meter::part(indicator) { transition: width 160ms ease; }
.learning .learning-step { min-block-size: 2.75rem; padding: var(--wa-space-s); border: 1px solid var(--sonub-border); font-size: calc(1rem * var(--wa-font-size-scale,1)); }
.learning .learning-step.done { background: var(--wa-color-success-fill-quiet); border-color: var(--wa-color-success-border-quiet); color: var(--wa-color-success-on-quiet); }
.learning .learning-prep-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; font-size: calc(1rem * var(--wa-font-size-scale,1)); }
.learning .learning-directory { scroll-margin-block: 14rem 6rem; }
.learning :is(a,button):focus-visible { outline: 2px solid var(--sonub-accent); outline-offset: 2px; }
@media (max-width: 599px) { .learning .learning-directory { grid-template-columns: repeat(2,minmax(0,1fr)); } .learning .learning-track { padding: var(--wa-space-m); } }
@media (prefers-reduced-motion: reduce) { .learning .learning-meter::part(indicator) { transition: none; } }