/*
 * 인공지능 지식 시험(/ai/exam, /ai/exam/{단계}) — 이전 사이트 routes/ai/exam/+page.svelte · ai/exam/[level]/+page.svelte · components/exam/ExamRules.svelte ·
 * components/diagram/DonutGauge.svelte 의 스코프 CSS 를 옮겼다.
 * 선택자는 .exam-home · .exam · .exam-rules · .exam-callout 아래로 좁힌다(app.css 의 .notice·.chip 과 겹치지 않게).
 * 원형 게이지(.dg-gauge — <x-diagram.donut-gauge>)는 지금 이 화면만 써서 여기에 둔다.
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

/* ── 단계 고르기 ─────────────────────────────── */
.exam-home {
	display: grid;
	gap: clamp(2rem, 4.5vw, 3rem);
}
.exam-home .pes-page-header {
	margin: 0;
}
.exam-block {
	display: grid;
	gap: 1rem;
	min-inline-size: 0;
}
.exam-block h2 {
	margin: 0;
	font-size: clamp(1.2rem, 2.3vw, 1.5rem);
	line-height: 1.3;
}

/* ── 알림 상자(로그인 안내·오류) ───────────────── */
.exam-callout {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--pes-radius-card);
	background: var(--dg-soft);
	color: var(--pes-ink);
}
.exam-callout > i {
	flex: none;
	margin-block-start: 0.2rem;
	color: var(--dg-ink);
	font-size: 1.15rem;
}
.exam-callout > div {
	display: grid;
	justify-items: start;
	gap: 0.5rem;
}
.exam-callout p {
	margin: 0;
	line-height: 1.7;
	color: var(--pes-ink);
}

/* ── 규칙 — 숫자 타일 · 금지 표시 ─────────────── */
.exam-rules {
	display: grid;
	gap: 0.8rem;
}
.exam-rules .exam-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: 0.7rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.exam-rules .exam-stats li {
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	padding: 1rem 0.75rem;
	border: 1px solid var(--dg-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--dg-soft);
	text-align: center;
}
.exam-rules .exam-stats i {
	color: var(--dg-fill);
	font-size: 1.2rem;
}
.exam-rules .exam-stats strong {
	color: var(--wa-color-text-normal);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-variant-numeric: tabular-nums;
	line-height: 1.15;
}
.exam-rules .exam-stats span {
	color: var(--wa-color-text-quiet);
	font-size: 0.82rem;
	line-height: 1.4;
}
.exam-rules .exam-bans {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.exam-rules .exam-bans li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.35rem;
	padding-inline: 0.4rem 0.85rem;
	border: 1px solid var(--dg-border);
	border-radius: 999px;
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: 0.85rem;
	font-weight: var(--wa-font-weight-semibold);
}
.exam-rules .exam-rule-text {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding-inline-start: 1.1rem;
}

/* ── 응시 화면 ───────────────────────────────── */
.exam {
	display: grid;
	gap: 1rem;
}
.exam .exam-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	justify-self: start;
	color: var(--pes-muted);
	font-size: 0.9rem;
	text-decoration: none;
}
.exam .exam-back:hover {
	color: var(--pes-accent-ink);
}
.exam .exam-head {
	padding-block-end: 1rem;
}
.exam .exam-head h1 {
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}
.exam .exam-fallback {
	margin: 0;
	font-size: 0.9rem;
}
.exam .exam-intro {
	display: grid;
	gap: 1rem;
}
.exam .exam-my-best {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	justify-self: center;
	margin: 0;
	color: var(--pes-muted);
	font-size: 0.92rem;
}
.exam .exam-my-best i {
	color: var(--wa-color-warning-fill-loud);
}
.exam .exam-start {
	display: flex;
	justify-content: center;
	padding-block: 0.5rem;
}
.exam .exam-start .pes-button {
	min-inline-size: 12rem;
	font-size: 1rem;
}

/* 치는 중 */
.exam .exam-quiz {
	display: grid;
	gap: 0.75rem;
}
.exam .exam-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}
.exam .exam-progress {
	font-weight: 600;
}
.exam .exam-score {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--pes-muted);
}
.exam .exam-timer {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-inline-start: auto;
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.exam .exam-timer.danger {
	color: var(--wa-color-danger-fill-loud);
}
.exam .exam-dots {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 3px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.exam .exam-dots li {
	block-size: 6px;
	border-radius: 3px;
	background: var(--pes-border);
}
.exam .exam-dots li.done {
	background: color-mix(in srgb, var(--pes-accent) 45%, var(--pes-border));
}
.exam .exam-dots li.now {
	background: var(--pes-accent);
}
.exam .exam-timebar {
	block-size: 6px;
	border-radius: 3px;
	background: var(--pes-border);
	overflow: hidden;
}
.exam .exam-timebar span {
	display: block;
	block-size: 100%;
	inline-size: var(--pct, 100%);
	border-radius: 3px;
	background: var(--wa-color-warning-fill-loud);
	transition: inline-size 0.1s linear;
}
.exam .exam-timebar span.danger {
	background: var(--wa-color-danger-fill-loud);
}
.exam .exam-timeout {
	margin: 0;
	font-weight: 700;
	color: var(--wa-color-danger-fill-loud);
}
.exam .exam-prompt {
	margin: 0.5rem 0 0;
	font-size: 1.2rem;
	line-height: 1.5;
	white-space: pre-wrap;
}
.exam .exam-choices {
	display: grid;
	gap: 0.6rem;
}
.exam .exam-choice {
	display: flex;
	align-items: center;
	justify-content: flex-start;   /* Web Awesome 의 기본 button 은 가운데 맞춤이다 */
	gap: 0.7rem;
	inline-size: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	color: inherit;
	font: inherit;
	font-size: 1rem;
	text-align: start;
	cursor: pointer;
	transition: border-color var(--pes-motion), background-color var(--pes-motion);
}
.exam .exam-choice:hover:not(:disabled),
.exam .exam-choice:focus-visible {
	border-color: var(--pes-accent);
	background: var(--pes-accent-soft);
}
.exam .exam-choice:disabled {
	opacity: 0.6;
	cursor: default;
}
.exam .exam-choice-no {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
	font-size: 0.85rem;
	font-weight: 700;
}
.exam .exam-choice-text {
	white-space: pre-wrap;
}

/* 끝 — 결과 */
.exam .exam-result {
	display: grid;
	gap: 1rem;
}
.exam .exam-verdict {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.25rem 2rem;
	padding: 1.2rem;
	border-radius: var(--pes-radius-card);
	background: var(--wa-color-danger-fill-quiet);
}
.exam .exam-verdict.passed {
	background: var(--wa-color-success-fill-quiet);
}
.exam .exam-verdict-text {
	display: grid;
	gap: 0.3rem;
}
.exam .exam-verdict h2 {
	margin: 0;
}
.exam .exam-verdict h2 > span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.exam .exam-score-line {
	margin: 0;
	font-weight: 600;
}
.exam .exam-pass-line {
	margin: 0;
	color: var(--pes-muted);
	font-size: 0.88rem;
}
.exam .exam-strip ol {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.exam .exam-strip a {
	display: grid;
	justify-items: center;
	gap: 0.1rem;
	padding-block: 0.3rem;
	border: 1px solid transparent;
	border-radius: var(--wa-border-radius-m);
	font-size: 0.72rem;
	font-weight: 700;
	text-decoration: none;
}
.exam .exam-strip a.ok {
	background: var(--wa-color-success-fill-quiet);
	color: var(--wa-color-success-on-quiet);
}
.exam .exam-strip a.bad {
	background: var(--wa-color-danger-fill-quiet);
	color: var(--wa-color-danger-on-quiet);
}
.exam .exam-strip a.late {
	background: var(--wa-color-warning-fill-quiet);
	color: var(--wa-color-warning-on-quiet);
}
.exam .exam-strip a:hover,
.exam .exam-strip a:focus-visible {
	border-color: currentColor;
}
.exam .exam-actions {
	justify-content: center;
}
.exam .exam-review-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
}
.exam .exam-review {
	display: grid;
	gap: 0.8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.exam .exam-review-item {
	display: grid;
	gap: 0.5rem;
	padding: 0.8rem 1rem;
	border: 1px solid var(--pes-border);
	border-inline-start: 4px solid var(--wa-color-danger-fill-loud);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	scroll-margin-block-start: 6rem;
}
.exam .exam-review-item.ok {
	border-inline-start-color: var(--wa-color-success-fill-loud);
}
.exam .exam-review-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
}
.exam .exam-q-no {
	font-weight: 700;
}
.exam .exam-q-prompt {
	flex: 1 1 auto;
	white-space: pre-wrap;
}
.exam .exam-badge {
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--dg-soft);
	color: var(--dg-ink);
	font-size: 0.72rem;
	white-space: nowrap;
}
.exam .exam-review-choices {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding-inline-start: 1.2rem;
	font-size: 0.92rem;
}
.exam .exam-review-choices li.answer {
	color: var(--wa-color-success-on-quiet);
	font-weight: 600;
}
.exam .exam-review-choices li.mine {
	color: var(--wa-color-danger-on-quiet);
}
.exam .exam-no-answer {
	margin: 0;
	color: var(--wa-color-warning-on-quiet);
	font-size: 0.85rem;
}
.exam .exam-explain {
	margin: 0;
	color: var(--pes-muted);
	font-size: 0.9rem;
}

/* ── 도표: 원형 게이지 <x-diagram.donut-gauge> ─── */
.dg-gauge {
	position: relative;
	inline-size: 8.5rem;
	max-inline-size: 100%;
	aspect-ratio: 1;
	margin: 0;
}
.dg-gauge svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}
.dg-gauge circle {
	fill: none;
	stroke-width: 12;
}
.dg-gauge-track {
	stroke: var(--wa-color-surface-border);
}
.dg-gauge-value {
	stroke: var(--dg-fill);
	stroke-linecap: round;
	stroke-dasharray: calc(var(--pct, 0) * 100) 100;
	transition: stroke-dasharray var(--pes-motion-slow);
}
.dg-gauge-tick {
	stroke: var(--wa-color-text-normal);
	stroke-width: 3;
	stroke-linecap: round;
}
.dg-gauge-center {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	line-height: 1.1;
}
.dg-gauge-center strong {
	color: var(--wa-color-text-normal);
	font-size: 2rem;
	font-variant-numeric: tabular-nums;
}
.dg-gauge-center span {
	color: var(--wa-color-text-quiet);
	font-size: 0.85rem;
}

/* ── 목록 여백 — Web Awesome 기본(native.css)이 모든 li 에 margin-inline-start 를 준다 ─── */
.exam-rules .exam-stats li,
.exam-rules .exam-bans li,
.exam .exam-dots li,
.exam .exam-strip li,
.exam .exam-review > li {
	margin: 0;
}
.exam-rules .exam-rule-text li,
.exam .exam-review-choices li {
	margin-inline-start: 0;
}

/* 순서도 아래의 반복 표시 — 글자 폭만큼만 */
.exam-block > .dg-flow-loop {
	justify-self: start;
	margin: 0;
}
/* 공용 도표(계단·순서도)의 li 도 같은 여백을 받아 한쪽으로 밀린다 — 공용 content.css 에서 고칠 때까지 이 화면에서만 지운다 */
.exam-home .dg-stair-list > li,
.exam-home .dg-flow-list > li {
	margin: 0;
}