/* 인증 인터뷰·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-entry { 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-entry > h3 { grid-column: 1 / -1; font-size: var(--wa-font-size-l); }
.certification-interview .certification-entry > 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-entry > 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-entry > ol > li:last-child { padding-block-end: 0; border: 0; }
.certification-interview .certification-entry li::marker { color: var(--sonub-accent-ink); font-weight: 700; }
.certification-interview .certification-entry > p { grid-column: 1; }
.certification-interview .certification-entry > 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; }
/* Quick Tip 칸 — 인터뷰 위젯과 급수 화면의 설계 질문(5급 XSLM 팁)이 같이 쓴다 */
.certification-interview .certification-tip { grid-column: 1; }
.certification-tip { display: grid; gap: var(--wa-space-s); padding: var(--wa-space-l); border: 1px solid var(--wa-color-brand-border-normal); border-radius: var(--sonub-radius-card); background: var(--sonub-accent-soft); }
.certification-tip :is(h3, p) { margin: 0; }
.certification-tip h3 { display: flex; align-items: center; gap: var(--wa-space-xs); color: var(--sonub-accent-ink); }
.certification-tip pre { margin: 0; padding: var(--wa-space-m); white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--sonub-radius-control); background: var(--sonub-surface); color: var(--wa-color-text-normal); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--wa-font-size-s); line-height: 1.7; text-align: start; }
.certification-interview .sonub-reference { grid-column: 1; }
.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-entry { 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; }
}