/* 인증 인터뷰·5급 실기 공통 위젯 — SSOT 3·11·23절. */
.certification-interview {
	container: certification-interview / inline-size;
	display: grid;
	gap: var(--wa-space-xl);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--sonub-radius-panel);
	background: var(--wa-color-surface-raised);
	color: var(--wa-color-text-normal);
}
.certification-interview :is(h2, h3, p, ol) { margin: 0; }
.certification-interview :is(h2, h3, p, li) { min-inline-size: 0; overflow-wrap: anywhere; }
.certification-interview h2 { font-size: var(--wa-font-size-l); line-height: 1.5; }
.certification-interview h3 { font-size: var(--wa-font-size-m); }
.certification-interview :is(p, li) { line-height: 1.85; }
.certification-interview .certification-intro { display: flex; align-items: start; gap: var(--wa-space-m); }
.certification-interview .certification-intro > div { display: grid; gap: var(--wa-space-s); }
.certification-interview .certification-intro p { max-inline-size: 70ch; color: var(--sonub-muted); }
.certification-interview .certification-supervision { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wa-space-m); padding: 0; list-style: none; counter-reset: cert-supervision; }
.certification-interview .certification-supervision li { counter-increment: cert-supervision; display: grid; align-content: start; gap: var(--wa-space-m); margin: 0; padding: var(--wa-space-l); border-radius: var(--sonub-radius-card); background: var(--sonub-subtle); }
.certification-interview .certification-supervision li::before { content: counter(cert-supervision, decimal-leading-zero); display: inline-grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border: 1px solid var(--wa-color-brand-border-normal); border-radius: var(--sonub-radius-control); background: var(--sonub-surface); color: var(--sonub-accent-ink); font-size: var(--wa-font-size-s); font-weight: 700; font-variant-numeric: tabular-nums; }
.certification-interview .certification-level-five { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: var(--wa-space-l); padding-block-start: var(--wa-space-xl); border-block-start: 1px solid var(--wa-color-surface-border); }
.certification-interview .certification-level-five > h3 { grid-column: 1 / -1; font-size: var(--wa-font-size-l); }
.certification-interview .certification-level-five > ol { grid-column: 1; display: grid; gap: var(--wa-space-l); padding-inline-start: var(--wa-space-xl); list-style-type: decimal; }
.certification-interview .certification-level-five > ol > li { padding-inline-start: var(--wa-space-xs); padding-block-end: var(--wa-space-l); border-block-end: 1px solid var(--sonub-border); }
.certification-interview .certification-level-five > ol > li:last-child { padding-block-end: 0; border: 0; }
.certification-interview .certification-level-five li::marker { color: var(--sonub-accent-ink); font-weight: 700; }
.certification-interview .certification-level-five > p { grid-column: 1; }
.certification-interview .certification-level-five > p:not(:has(strong)) { color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
.certification-interview .certification-stop { align-self: start; grid-column: 2; grid-row: 2 / span 3; display: grid; align-content: start; gap: var(--wa-space-m); padding: var(--wa-space-l); border: 1px solid var(--wa-color-warning-border-normal); border-radius: var(--sonub-radius-card); background: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet); }
.certification-interview .certification-stop h3 { color: inherit; }
.certification-interview > [data-exam-topic='deployment'] { padding: var(--wa-space-l); border-radius: var(--sonub-radius-card); background: var(--sonub-accent-soft); color: var(--sonub-accent-ink); }
@container certification-interview (max-width: 760px) {
	.certification-interview .certification-supervision { grid-template-columns: minmax(0, 1fr); }
	.certification-interview .certification-supervision li { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
	.certification-interview .certification-level-five { grid-template-columns: minmax(0, 1fr); }
	.certification-interview .certification-stop { align-self: start; grid-column: 1; grid-row: auto; }
}
@container certification-interview (max-width: 400px) {
	.certification-interview .certification-intro { flex-direction: column; }
	.certification-interview .certification-supervision li { padding: var(--wa-space-m); }
	.certification-interview .certification-supervision li::before { inline-size: 2rem; block-size: 2rem; }
}