/*
 * 인공지능 자격증(/cert, /cert/{급수}) — 이전 사이트 routes/cert/+page.svelte · cert/[grade]/+page.svelte ·
 * components/cert/RequiredLanguages.svelte 의 스코프 CSS 를 옮겼다.
 * 선택자는 .cert 아래로 좁힌다(app.css 의 .chip·.notice 와 겹치지 않게). 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 */

/* ── 공통 틀 ─────────────────────────────────── */
.cert {
	max-inline-size: 56rem;
}
.cert > section,
.cert > .cert-two {
	margin-block-start: 2.5rem;
}
.cert section h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
}
.cert section h2 i {
	color: var(--pes-accent-ink);
}
.cert section > p {
	margin: 0 0 1rem;
	line-height: 1.75;
	color: var(--pes-muted);
}

/* ── 공통 문제 ───────────────────────────────── */
.cert blockquote {
	margin: 0;
	padding: 1.1rem 1.25rem;
	border-inline-start: 4px solid var(--pes-accent);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: var(--pes-radius-control);
	border-end-end-radius: var(--pes-radius-control);
	background: var(--pes-subtle);
	/* Web Awesome 기본(native.css)은 인용문에 긴 글 글꼴을 준다 — 본문 글꼴로 */
	font-family: inherit;
	font-style: normal;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.6;
}
.cert .cert-question .pes-note {
	margin: 0.75rem 0 0;
	font-size: 0.92rem;
}

/* ── 제약 ─────────────────────────────────────── */
.cert .cert-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cert .cert-chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--pes-border);
	border-radius: 999px;
	background: var(--pes-surface);
	font-size: 0.9rem;
}
.cert .cert-chips i {
	color: var(--pes-accent-ink);
}

/* ── 필수 언어 ───────────────────────────────── */
.cert .cert-langs-all {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}
.cert .cert-lang {
	display: flex;
	gap: 1rem;
	padding: 1.15rem;
	/* 급수와 관계없이 반드시 통과해야 하는 과목이라 다른 카드보다 한 단 강조한다 */
	border: 1px solid var(--wa-color-brand-border-quiet);
	border-radius: var(--pes-radius-card);
	background: var(--pes-accent-soft);
}
.cert .cert-lang-mark {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--pes-radius-control);
	background: var(--pes-accent);
	color: var(--pes-on-accent);
	font-size: 1.2rem;
}
.cert .cert-lang-body {
	min-inline-size: 0;
}
.cert .cert-lang h3 {
	margin: 0;
	font-size: 1.05rem;
	/* 이전 사이트는 고정폭 글꼴이었지만 언어마다 이름을 번역해(ar·hi …) 본문 글꼴로 둔다 — 고정폭이면 아랍 글자가 끊겨 보인다 */
}
.cert .cert-lang-tagline {
	margin: 0.25rem 0 0;
	font-weight: 600;
	line-height: 1.6;
	color: var(--pes-accent-ink);
}
.cert .cert-lang-desc {
	margin: 0.55rem 0 0;
	font-size: 0.93rem;
	line-height: 1.75;
	color: var(--pes-muted);
}
.cert .cert-lang a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 0.85rem;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--pes-accent-ink);
}
.cert .cert-lang a:hover {
	text-decoration: underline;
}
@media (max-width: 560px) {
	.cert .cert-lang {
		flex-direction: column;
		gap: 0.75rem;
	}
}

/* ── 시험 방식 ───────────────────────────────── */
.cert .cert-stages,
.cert .cert-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
}
.cert .cert-parts {
	margin-block-start: 1rem;
}
.cert .cert-stage,
.cert .cert-part {
	padding: 1.15rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
}
.cert .cert-stage-num {
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 999px;
	background: var(--pes-accent);
	color: var(--pes-on-accent);
	font-size: 0.9rem;
	font-weight: 700;
}
.cert .cert-stage h3,
.cert .cert-part h3 {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.7rem 0 0.4rem;
	font-size: 1rem;
}
.cert .cert-stage p,
.cert .cert-part p {
	margin: 0.35rem 0 0;
	font-size: 0.93rem;
	line-height: 1.7;
	color: var(--pes-muted);
}

/* ── 온라인 연습 단추 ─────────────────────────── */
.cert .cert-cta {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--pes-motion), transform var(--pes-motion-fast);
}
.cert .cert-cta:hover {
	border-color: var(--pes-accent);
	transform: var(--pes-lift);
}
.cert .cert-cta > i {
	color: var(--pes-accent-ink);
	font-size: 1.25rem;
}
.cert .cert-cta span {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.cert .cert-cta small {
	font-size: 0.88rem;
	color: var(--pes-muted);
}

/* ── 급수 목록(허브) ─────────────────────────── */
.cert .cert-grade-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.cert .cert-grade-card {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.95rem 1.1rem;
}
.cert .cert-badge {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--pes-radius-control);
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
	font-size: 1.1rem;
}
.cert .cert-grade-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 1;
	min-inline-size: 0;
}
.cert .cert-grade-focus {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--pes-muted);
}
.cert .cert-grade-age {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.83rem;
	color: var(--pes-muted);
}
.cert .cert-go {
	flex: none;
	color: var(--pes-muted);
}

/* ── 급수 상세 ───────────────────────────────── */
.cert .cert-crumb a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	color: var(--pes-muted);
	text-decoration: none;
}
.cert .cert-crumb a:hover {
	color: var(--pes-accent-ink);
}
.cert .cert-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-start: 1.25rem;
}
.cert .cert-head .cert-badge {
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 1rem;
	font-size: 1.5rem;
}
.cert .cert-head .pes-lead {
	margin-block-start: 0.3rem;
}
.cert .cert-eligibility p {
	margin: 0;
	color: var(--pes-ink);
}
.cert .cert-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
	gap: 1.5rem;
}
.cert .cert-two > section {
	margin: 0;
}
.cert .cert-two :is(ol, ul) {
	margin: 0;
	padding-inline-start: 1.25rem;
	line-height: 1.9;
	color: var(--pes-muted);
}
.cert .cert-exam .cert-stages {
	margin-block-start: 1rem;
}
.cert .cert-siblings {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 2.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--pes-border);
}
.cert .cert-siblings a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--pes-accent-ink);
}
@media (max-width: 640px) {
	.cert .cert-head h1 {
		font-size: 1.45rem;
	}
}

/* ── 예상 문제(급수 상세) ─────────────────────── */
.cert .cert-samples h3 {
	margin: 1.75rem 0 0.75rem;
	font-size: 1rem;
	color: var(--pes-accent-ink);
}
.cert .cert-samples ol {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cert .cert-samples li {
	display: flex;
	gap: 0.85rem;
	margin: 0;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
}
.cert .cert-sample-num {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 999px;
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
	font-size: 0.88rem;
	font-weight: 700;
}
.cert .cert-sample-body {
	flex: 1;
	min-inline-size: 0;
}
.cert .cert-sample-body > p {
	margin: 0.2rem 0 0;
	font-weight: 600;
	line-height: 1.65;
}
/* Web Awesome 기본(native.css)의 details 는 테두리 상자다 — 카드 안에서는 작은 펼침 글자로 */
.cert .cert-samples details,
.cert .cert-samples details[open] {
	margin-block-start: 0.55rem;
	padding: 0;
	border: 0;
	background: none;
}
.cert .cert-samples summary,
.cert .cert-samples details[open] summary {
	display: inline-flex;
	gap: 0.35rem;
	margin: 0;
	padding: 0.15rem 0;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--pes-accent-ink);
}
.cert .cert-samples summary::after {
	background-color: currentColor;
	inline-size: 0.8rem;
	block-size: 0.8rem;
}
.cert .cert-samples summary:hover {
	text-decoration: underline;
}
.cert .cert-sample-answer {
	margin-block-start: 0.45rem;
	padding: 0.75rem 0.9rem;
	border-inline-start: 3px solid var(--pes-accent);
	border-radius: var(--pes-radius-control);
	background: var(--pes-subtle);
	font-size: 0.93rem;
	line-height: 1.75;
	color: var(--pes-muted);
}
.cert .cert-sample-answer p {
	margin: 0;
}
/* 정답 한 줄 — 풀이보다 크고 진하게. "정답" 표시는 작은 배지로 */
.cert .cert-sample-answer p:first-child {
	margin-block-end: 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--pes-ink);
}
.cert .cert-sample-answer strong {
	display: inline-block;
	margin-inline-end: 0.4rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--pes-accent);
	color: var(--pes-on-accent);
	font-size: 0.78rem;
	vertical-align: 0.1em;
}
@media (max-width: 560px) {
	.cert .cert-samples li {
		gap: 0.65rem;
		padding: 0.85rem 0.9rem;
	}
}

/* ── 목록 여백 — Web Awesome 기본(native.css)이 모든 li 에 margin-inline-start 를 준다 ─── */
.cert .cert-chips li {
	margin: 0;
}
.cert .cert-two li {
	margin-inline-start: 0;
}