/*
 * AI 실습(/ai/lab) — 이전 사이트 web/src/routes/ai/lab/+page.svelte · components/ConceptLab.svelte · BigramControls.svelte 의 스타일을 옮겼다.
 * resources/views/ai/lab.blade.php(+ ai/lab/concept · ai/lab/code)만 읽는다. 선택자는 .ai-lab 아래로 좁힌다.
 * 방향이 있는 속성은 논리 속성만(ar·ur). 색은 --pes-* / Web Awesome 토큰 — 다크 테마에서도 읽혀야 한다.
 * 코드·출력·원-핫 벡터는 오른쪽→왼쪽 언어에서도 왼쪽부터 쓴다(dir="ltr").
 */

/* ── 틀 ─────────────────────────────────────────── */
.ai-lab {
	/* 코드·출력 글꼴. 설명 문장은 본문 글꼴로 둔다 — 고정폭 글꼴이 앞에 오면 크롬이 아랍 글자를 이어 쓰지 않는다 */
	--ai-lab-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
	max-inline-size: 72rem;
	display: grid;
	gap: var(--pes-space-6);
}
.ai-lab > section { display: grid; gap: var(--pes-space-6); min-inline-size: 0; }
.ai-lab .ai-lab-hero { margin: 0; }
.ai-lab .ai-lab-tabs { justify-self: start; max-inline-size: 100%; }
.ai-lab .pes-tab { display: inline-flex; align-items: center; gap: 0.5rem; }

/* 화살표는 오른쪽→왼쪽 언어에서 뒤집는다 */
[dir='rtl'] .ai-lab :is(.fa-arrow-left, .fa-arrow-right) { transform: scaleX(-1); }

.ai-lab .ai-lab-note,
.ai-lab .ai-lab-hint,
.ai-lab .ai-lab-desc {
	margin: 0;
	color: var(--pes-muted);
	line-height: 1.7;
}
.ai-lab .ai-lab-note,
.ai-lab .ai-lab-hint { font-size: 0.88rem; }

/* ── 개념 실습 — 단계 표시 ───────────────────────── */
.ai-lab .ai-lab-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pes-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ai-lab .ai-lab-steps li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.8rem;
	border: 1px solid var(--pes-border);
	border-radius: 999px;
	background: var(--pes-surface);
	color: var(--pes-muted);
	font-size: 0.86rem;
	transition: background-color var(--pes-motion), color var(--pes-motion);
}
.ai-lab .ai-lab-steps li.active {
	border-color: transparent;
	background: var(--pes-accent);
	color: var(--pes-on-accent);
}
.ai-lab .ai-lab-steps li.done { color: var(--pes-success); }

.ai-lab .ai-lab-concept-card {
	display: grid;
	gap: var(--pes-space-2);
	padding: var(--pes-space-6);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-accent-soft);
}
.ai-lab .ai-lab-concept-card h2 {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}
.ai-lab .ai-lab-concept-card h2 i { color: var(--pes-accent-ink); }
.ai-lab .ai-lab-concept-card p { margin: 0; line-height: 1.8; }

/* ── 개념 실습 — 단계별 시각화 ───────────────────── */
.ai-lab .ai-lab-stage,
.ai-lab .ai-lab-part { display: grid; gap: var(--pes-space-4); min-inline-size: 0; }

.ai-lab .ai-lab-field {
	display: grid;
	gap: 0.35rem;
	font-weight: 600;
}
.ai-lab .ai-lab-field .pes-control { inline-size: 100%; font-weight: 400; }
.ai-lab .ai-lab-field textarea { resize: vertical; }

/* ① 토큰 */
.ai-lab .ai-lab-tokens { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ai-lab .ai-lab-token {
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	font-size: 0.9rem;
}

/* ② 번호와 원-핫 벡터 */
.ai-lab .ai-lab-table-wrap { overflow-x: auto; }
.ai-lab .ai-lab-vectors {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0 2px;
	font-size: 0.9rem;
}
.ai-lab .ai-lab-vectors th {
	padding: 0.3rem 0.75rem;
	color: var(--pes-muted);
	font-weight: 600;
	text-align: start;
}
.ai-lab .ai-lab-vectors td {
	padding: 0.35rem 0.75rem;
	background: var(--pes-surface);
}
.ai-lab .ai-lab-vectors td:first-child { border-start-start-radius: var(--pes-radius-sm); border-end-start-radius: var(--pes-radius-sm); }
.ai-lab .ai-lab-vectors td:last-child { border-start-end-radius: var(--pes-radius-sm); border-end-end-radius: var(--pes-radius-sm); }
.ai-lab .ai-lab-vnum { font-weight: 700; color: var(--pes-accent-ink); }
.ai-lab .ai-lab-vvec {
	font-family: var(--ai-lab-code-font);
	color: var(--pes-muted);
	white-space: nowrap;
	text-align: start;
}

/* ③ 훈련 — 단어 고르기와 다음 단어 확률 막대 */
.ai-lab .ai-lab-words { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ai-lab .ai-lab-word {
	min-block-size: 2.25rem;
	padding: 0.25rem 0.8rem;
	border: 1px solid var(--pes-border);
	border-radius: 999px;
	background: var(--pes-canvas);
	color: var(--pes-ink);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}
.ai-lab .ai-lab-word:hover { border-color: var(--pes-accent); }
.ai-lab .ai-lab-word[aria-pressed='true'] {
	border-color: transparent;
	background: var(--pes-accent);
	color: var(--pes-on-accent);
}
.ai-lab .ai-lab-probs {
	display: grid;
	gap: var(--pes-space-2);
	padding: var(--pes-space-4);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	border: 1px solid var(--pes-border);
}
.ai-lab .ai-lab-prob {
	display: grid;
	grid-template-columns: minmax(4rem, auto) minmax(0, 1fr) 3.2rem;
	align-items: center;
	gap: var(--pes-space-3);
}
.ai-lab .ai-lab-prob[data-end] .ai-lab-pword { color: var(--pes-muted); font-style: italic; }
.ai-lab .ai-lab-bar {
	block-size: 0.7rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--pes-subtle);
}
.ai-lab .ai-lab-fill {
	display: block;
	inline-size: var(--pct, 0%);
	block-size: 100%;
	border-radius: inherit;
	background: var(--pes-accent);
	transition: inline-size var(--pes-motion-medium);
}
.ai-lab .ai-lab-pct { font-size: 0.88rem; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }

/* ④ 생성 */
.ai-lab .ai-lab-controls { display: grid; gap: var(--pes-space-3); max-inline-size: 32rem; }
.ai-lab .ai-lab-controls input[type='range'] { inline-size: 100%; }
.ai-lab .ai-lab-controls output { font-weight: 700; color: var(--pes-accent-ink); }
.ai-lab .ai-lab-gen {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--pes-space-4);
}
.ai-lab .ai-lab-gen .ai-lab-field { flex: 0 1 16rem; min-inline-size: 12rem; }
.ai-lab .ai-lab-generated {
	display: grid;
	gap: var(--pes-space-2);
	padding: var(--pes-space-6);
	border-radius: var(--pes-radius-card);
	background: var(--pes-accent-soft);
}
.ai-lab .ai-lab-generated > span { font-size: 0.88rem; color: var(--pes-muted); }
.ai-lab .ai-lab-generated p { margin: 0; font-size: 1.15rem; line-height: 1.7; }
.ai-lab .ai-lab-again {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	justify-self: start;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pes-accent-ink);
	font: inherit;
	font-size: 0.88rem;
	text-align: start;
	cursor: pointer;
}
.ai-lab .ai-lab-again:hover { text-decoration: underline; }

/* 이전 / 다음 — 앞으로 가는 단추는 늘 끝에 둔다(첫 단계에는 "이전" 이 없다) */
.ai-lab .ai-lab-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pes-space-3); }
.ai-lab .ai-lab-forward { margin-inline-start: auto; }
.ai-lab .ai-lab-restart { border-color: var(--wa-color-success-fill-loud); color: var(--pes-success); }

/* ── 코드 실습 — 상태 ───────────────────────────── */
.ai-lab .ai-lab-status {
	display: flex;
	align-items: center;
	gap: var(--pes-space-3);
	margin: 0;
	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;
}
.ai-lab .ai-lab-status[data-phase='ready'] { border-color: var(--wa-color-success-fill-loud); }
.ai-lab .ai-lab-status[data-phase='ready'] .ai-lab-status-icon { color: var(--wa-color-success-fill-loud); }
.ai-lab .ai-lab-status[data-phase='error'] { border-color: var(--wa-color-danger-fill-loud); color: var(--pes-danger); }

/* ── 코드 실습 — 미션 ───────────────────────────── */
.ai-lab .ai-lab-mission {
	display: grid;
	gap: var(--pes-space-3);
	padding: var(--pes-space-6);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-accent-soft);
}
.ai-lab .ai-lab-mission-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pes-space-3);
}
.ai-lab .ai-lab-badge {
	color: var(--pes-accent-ink);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ai-lab .ai-lab-xp {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}
.ai-lab .ai-lab-xp i { color: var(--wa-color-warning-fill-loud); }
.ai-lab .ai-lab-mission h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}
.ai-lab .ai-lab-done { color: var(--wa-color-success-fill-loud); }
.ai-lab .ai-lab-mission > p { margin: 0; line-height: 1.75; }
.ai-lab .ai-lab-mission-actions,
.ai-lab .ai-lab-examples { display: flex; flex-wrap: wrap; gap: var(--pes-space-2); }
.ai-lab :is(.ai-lab-mission-actions, .ai-lab-examples, .ai-lab-actions) .pes-button {
	min-block-size: 2.25rem;
	padding: 0.35rem 0.8rem;
	font-size: 0.84rem;
}
.ai-lab .ai-lab-plain { border-color: transparent; background: none; }
.ai-lab .ai-lab-success {
	border-color: transparent;
	background: var(--wa-color-success-fill-loud);
	color: var(--wa-color-success-on-loud);
}
.ai-lab .ai-lab-success:not(:disabled):hover {
	background: color-mix(in srgb, var(--wa-color-success-fill-loud) 86%, #000);
	color: var(--wa-color-success-on-loud);
}
.ai-lab .ai-lab-hints {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding-inline-start: var(--pes-space-6);
	font-size: 0.9rem;
	line-height: 1.6;
}
.ai-lab .ai-lab-hints code {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: var(--pes-radius-sm);
	background: var(--pes-surface);
	font-family: var(--ai-lab-code-font);
	font-size: 0.86rem;
}
.ai-lab .ai-lab-grade {
	margin: 0;
	padding: var(--pes-space-3) var(--pes-space-4);
	border-radius: var(--pes-radius-control);
	font-size: 0.9rem;
	font-weight: 650;
}
.ai-lab .ai-lab-grade[data-state='pass'] { background: var(--pes-success-soft); color: var(--pes-success); }
.ai-lab .ai-lab-grade[data-state='fail'] { background: var(--pes-warning-soft); color: var(--pes-warning); }

/* ── 코드 실습 — 편집기와 실행 결과 ─────────────── */
.ai-lab .ai-lab-panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pes-space-6);
	align-items: start;
}
.ai-lab .ai-lab-panel { display: grid; gap: var(--pes-space-3); padding: var(--pes-space-4); min-inline-size: 0; }
.ai-lab .ai-lab-panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pes-space-3);
	min-block-size: 2.2rem;
}
.ai-lab .ai-lab-panel-head h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
.ai-lab .ai-lab-actions { display: flex; flex-wrap: wrap; gap: var(--pes-space-2); }
.ai-lab .ai-lab-editor,
.ai-lab .ai-lab-editor .cm-editor { min-block-size: 16rem; }

.ai-lab .ai-lab-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);
	white-space: pre-wrap;
	word-break: break-word;
	font-family: var(--ai-lab-code-font);
	font-size: 0.88rem;
	line-height: 1.6;
	text-align: start;
}
/* 안내 문장(출력이 아니다)은 본문 글꼴 · 그 언어의 방향으로 */
.ai-lab .ai-lab-output.muted { color: var(--pes-muted); font-family: inherit; unicode-bidi: plaintext; }

.ai-lab .ai-lab-figures { display: grid; gap: var(--pes-space-3); }
.ai-lab .ai-lab-figures img {
	max-inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: #fff; /* matplotlib 그림은 흰 바탕이다 — 다크 테마에서도 흰 바탕 */
}

/* ── 더 배우기 ──────────────────────────────────── */
.ai-lab .ai-lab-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pes-space-2) var(--pes-space-4);
	padding-block-start: var(--pes-space-4);
	border-block-start: 1px solid var(--pes-border);
	color: var(--pes-muted);
	font-size: 0.9rem;
}
.ai-lab .ai-lab-foot a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--pes-accent-ink);
	font-weight: 600;
	text-decoration: none;
}
.ai-lab .ai-lab-foot a:hover { text-decoration: underline; }

/* ── 좁은 화면 ──────────────────────────────────── */
@media (max-width: 800px) {
	.ai-lab .ai-lab-panels { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.ai-lab .ai-lab-concept-card,
	.ai-lab .ai-lab-mission,
	.ai-lab .ai-lab-generated { padding: var(--pes-space-4); }
	.ai-lab .ai-lab-prob { grid-template-columns: minmax(3rem, auto) minmax(0, 1fr) 2.8rem; gap: var(--pes-space-2); }
	.ai-lab .ai-lab-gen .ai-lab-field { flex: 1 1 100%; }
}