/*
 * 실전 인공지능 개발(/ai/dev) — resources/views/ai/dev.blade.php 만 읽는다.
 * 선택자는 .ai-dev 아래로 좁힌다(app.css·ai-lab.css 와 겹치지 않게). 방향이 있는 속성은 논리 속성만 쓴다(ar·ur).
 * 코드·명령은 오른쪽→왼쪽 언어에서도 왼쪽부터(dir="ltr"), 번역 문장이 든 실행 결과는 줄마다 제 방향(unicode-bidi: plaintext)으로 보인다.
 */

/* ── 공통 틀 · 절 번호 ─────────────────────────── */
.ai-dev {
	max-inline-size: 60rem;
	counter-reset: ai-dev-step;
}
.ai-dev > section {
	margin-block-start: 2.75rem;
}
.ai-dev > section > h2 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.85rem;
	font-size: 1.25rem;
}
/* 절 번호(1~7) — 붙여 준 강의의 흐름을 따라 읽게 */
.ai-dev > section > h2::before {
	counter-increment: ai-dev-step;
	content: counter(ai-dev-step);
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border-radius: 999px;
	background: var(--pes-accent);
	color: var(--pes-on-accent);
	font-size: 0.95rem;
	font-weight: 700;
}
.ai-dev section p {
	margin: 0 0 0.85rem;
	line-height: 1.8;
}
.ai-dev section h3 {
	margin: 1.5rem 0 0.5rem;
	font-size: 1.02rem;
}
.ai-dev code,
.ai-dev samp,
.ai-dev pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── 배울 데이터 ─────────────────────────────── */
.ai-dev .ai-dev-table {
	min-inline-size: 14rem;
	margin: 0.25rem 0 1rem;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.ai-dev .ai-dev-table :is(th, td) {
	padding: 0.5rem 1.5rem;
	border: 1px solid var(--pes-border);
	text-align: center;
}
.ai-dev .ai-dev-table th {
	background: var(--pes-subtle);
	font-weight: 600;
}

/* ── 계산의 틀(모델) ─────────────────────────── */
.ai-dev .ai-dev-formula {
	display: inline-block;
	margin: 0.25rem 0 1rem;
	padding: 0.65rem 1.2rem;
	border-radius: var(--pes-radius-control);
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
	font-size: 1.15rem;
	font-weight: 700;
}
.ai-dev .ai-dev-trace {
	padding: 0.6rem 0.95rem;
	border-inline-start: 4px solid var(--wa-color-danger-fill-loud);
	border-radius: var(--pes-radius-control);
	background: var(--pes-danger-soft);
	font-weight: 600;
}
.ai-dev .ai-dev-trace[data-state='after'] {
	border-inline-start-color: var(--wa-color-success-fill-loud);
	background: var(--pes-success-soft);
}
/* 이 절의 한 줄 요약 — 사람은 틀과 데이터를, 프로그램은 w 를 */
.ai-dev .ai-dev-key {
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--wa-color-brand-border-quiet);
	border-radius: var(--pes-radius-card);
	background: var(--pes-accent-soft);
	font-weight: 700;
	line-height: 1.7;
}

/* ── 코드 · 실행 ─────────────────────────────── */
.ai-dev .ai-dev-status {
	display: flex;
	align-items: center;
	gap: var(--pes-space-3);
	padding: var(--pes-space-3) var(--pes-space-4);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	font-size: 0.9rem;
	line-height: 1.6;
}
.ai-dev .ai-dev-status[data-phase='loading'],
.ai-dev .ai-dev-status[data-phase='running'] {
	border-color: var(--pes-accent);
}
.ai-dev .ai-dev-status[data-phase='ready'] {
	border-color: var(--wa-color-success-fill-loud);
}
.ai-dev .ai-dev-status[data-phase='error'] {
	border-color: var(--wa-color-danger-fill-loud);
	color: var(--pes-danger);
}
.ai-dev .ai-dev-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: var(--pes-space-4);
	align-items: start;
}
.ai-dev .ai-dev-panel {
	display: grid;
	gap: var(--pes-space-3);
	min-inline-size: 0;
	padding: var(--pes-space-4);
}
.ai-dev .ai-dev-panel h3 {
	margin: 0;
}
.ai-dev .ai-dev-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pes-space-2);
}
.ai-dev .ai-dev-editor,
.ai-dev .ai-dev-editor .cm-editor {
	min-block-size: 24rem;
}
/* 편집기가 붙기 전(또는 못 붙었을 때) 보이는 서버가 그린 코드 */
.ai-dev .ai-dev-editor > pre {
	margin: 0;
	padding: var(--pes-space-4);
	overflow: auto;
	font-size: 0.85rem;
	line-height: 1.6;
}
.ai-dev .ai-dev-output {
	min-block-size: 12rem;
	max-block-size: 28rem;
	margin: 0;
	padding: var(--pes-space-4);
	overflow: auto;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-canvas);
	font-size: 0.9rem;
	line-height: 1.7;
	white-space: pre-wrap;
	unicode-bidi: plaintext;
	text-align: start;
}
.ai-dev .ai-dev-output.muted {
	color: var(--pes-muted);
	font-family: inherit;
}

/* ── 코드 조각 · 확인한 결과 ─────────────────── */
.ai-dev .ai-dev-snippet {
	margin: 0.25rem 0 1rem;
	padding: 0.8rem 1rem;
	overflow-x: auto;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-subtle);
	font-size: 0.86rem;
	line-height: 1.65;
	text-align: start;
}
/* 번역 문장이 든 실행 결과 — 줄마다 그 글자의 방향으로 */
.ai-dev .ai-dev-sample {
	unicode-bidi: plaintext;
}

/* ── 핵심 세 가지 ─────────────────────────────── */
.ai-dev .ai-dev-core dl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--pes-space-4);
	margin: 0;
}
.ai-dev .ai-dev-core dl > div {
	padding: 1.1rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
}
.ai-dev .ai-dev-core dt {
	margin-block-end: 0.5rem;
	font-weight: 700;
	line-height: 1.6;
}
.ai-dev .ai-dev-core dt code {
	display: inline-block;
	margin-inline-end: 0.35rem;
	padding: 0.05rem 0.45rem;
	border-radius: var(--pes-radius-sm);
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
}
.ai-dev .ai-dev-core dd {
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.75;
	color: var(--pes-muted);
}

/* ── 실험 ─────────────────────────────────────── */
.ai-dev .ai-dev-lab ol {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--pes-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ai-dev-exp;
}
.ai-dev .ai-dev-lab li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 1.1rem;
}
.ai-dev .ai-dev-lab li h3 {
	margin: 0;
}
.ai-dev .ai-dev-lab li h3::before {
	counter-increment: ai-dev-exp;
	content: counter(ai-dev-exp) '. ';
	color: var(--pes-accent-ink);
}
.ai-dev .ai-dev-lab li :is(p, .ai-dev-snippet) {
	margin: 0;
}
.ai-dev .ai-dev-lab li .ai-dev-snippet {
	align-self: stretch;
}
.ai-dev .ai-dev-lab li p {
	flex: 1;
	font-size: 0.93rem;
	color: var(--pes-muted);
}
.ai-dev .ai-dev-lab details {
	align-self: stretch;
	font-size: 0.9rem;
}

/* ── 다음 과제 ───────────────────────────────── */
.ai-dev .ai-dev-next details > :is(p, pre, button) {
	margin-block: 0 var(--pes-space-3);
}
.ai-dev .ai-dev-next details summary {
	font-weight: 600;
}