/*
 * 내 컴퓨터 터미널(/lab · /lab/device) — SONUB-SSOT.md 23절 "내 컴퓨터 터미널 · 실습 두뇌". 위젯 x-widget.lab.* 가 싣는다.
 * 터미널 화면 틀·색은 공용 .sonub-terminal-screen(content.css)을 그대로 쓰고, 여기서는 높이·상태 줄·설치 단계만 정한다.
 * 선택자는 .sonub-lab 아래로 좁힌다. 방향은 논리 속성만(ar·ur). 명령·경로는 오른쪽→왼쪽 언어에서도 왼쪽부터(dir="ltr").
 */
.sonub-lab {
	display: grid;
	gap: var(--sonub-space-6);
	overflow-wrap: anywhere;
	container-type: inline-size;
}

/* ── 쉘 단원처럼: 왼쪽 Claude Code 설명 · 오른쪽 터미널 ── */
.sonub-lab .lab-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(22rem, 1fr);
	gap: var(--sonub-space-4);
	align-items: start;
}
.sonub-lab .lab-guide { min-inline-size: 0; }
/* 터미널 칸은 넓은 화면에서 따라 내려온다(탑바 아래). 터미널(키 단추·해 보기 줄까지)은 한 화면에 다 보이고,
   그 아래 안내(.lab-full)는 이 열만 스크롤해서 본다 — 열이 화면보다 길면 아래가 잘려 보이지 않는다 */
.sonub-lab .lab-practice {
	position: sticky;
	inset-block-start: 5.5rem;
	display: grid;
	gap: var(--sonub-space-4);
	max-block-size: calc(100vh - 6.5rem);
	overflow-y: auto;
	min-inline-size: 0;
}
.sonub-lab .lab-practice .lab-terminal,
.sonub-lab .lab-practice .lab-full {
	padding: var(--wa-space-s);
	border: 1px solid color-mix(in srgb, var(--wa-color-brand-fill-loud) 22%, var(--sonub-border));
	border-radius: var(--wa-border-radius-l);
	background: var(--sonub-surface);
}
.sonub-lab .lab-practice .lab-screen { block-size: clamp(16rem, calc(100vh - 30rem), 42rem); }
/* 이 클로드 코드의 제한 — 내 컴퓨터에 설치하면 모든 기능 */
.sonub-lab .lab-full-lead {
	display: flex;
	gap: var(--sonub-space-2);
	align-items: baseline;
	margin: 0;
	padding: var(--wa-space-s);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-warning-fill-quiet);
	color: var(--wa-color-warning-on-quiet);
}
.sonub-lab .lab-full h3 { margin: 0; font-size: var(--wa-font-size-m); }
.sonub-lab .lab-full p { margin: 0; }
/* 끝의 /lab 카드(/claude-code 에서만) — 이름 줄·설명 줄 */
.sonub-lab .lab-entry { gap: var(--wa-space-2xs); color: var(--sonub-ink); text-decoration: none; }
.sonub-lab .lab-entry strong { display: inline-flex; align-items: center; gap: 0.5rem; }
.sonub-lab .lab-entry > span:last-child { color: var(--sonub-muted); line-height: 1.7; }
/* 사이드바 둘이 있는 1500px 화면의 본문(약 830px)에서도 두 열 — 그보다 좁으면 한 열 */
@container (max-width: 760px) {
	.sonub-lab .lab-layout { grid-template-columns: minmax(0, 1fr); }
	/* 좁으면 터미널만 먼저 — 설명은 그 아래, 내 컴퓨터 설치 안내(.lab-full)는 설명 뒤(SSOT 23절 "터미널이 위").
	   실습 칸을 통째로 올리면 설치 명령까지 단계 탭 앞에 와서 탭에 닿으려면 한참 내려가야 했다(2026-10-24 디자인 점검) */
	.sonub-lab .lab-practice { display: contents; }
	.sonub-lab .lab-practice > .lab-terminal { order: -1; }
	.sonub-lab .lab-practice .lab-screen { block-size: clamp(18rem, 60vh, 32rem); }
}
:lang(ko) .sonub-lab { word-break: keep-all; }
.sonub-lab section {
	display: grid;
	gap: var(--sonub-space-3);
	min-inline-size: 0;
}
.sonub-lab .lab-heading {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: calc(1.15rem * var(--wa-font-size-scale, 1));
}
.sonub-lab .lab-heading i { color: var(--wa-color-brand-on-quiet); }

/* ── 터미널 ───────────────────────────────────── */
/* 바로 시작 — 클라우드 실습 상자(SSOT 23절 "클라우드 실습 터미널"). 설치보다 먼저 눈에 띄게 브랜드 색 띠로 */
.sonub-lab .lab-cloud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sonub-space-3);
	padding: var(--wa-space-m) var(--wa-space-l);
	border: 1px solid color-mix(in srgb, var(--wa-color-brand-fill-loud) 40%, var(--sonub-border));
	border-radius: var(--wa-border-radius-l);
	background: var(--wa-color-brand-fill-quiet);
}
.sonub-lab .lab-cloud-text {
	display: grid;
	gap: 0.35rem;
	flex: 1 1 22rem;
	min-inline-size: 0;
}
.sonub-lab .lab-cloud-text strong {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: calc(1.1rem * var(--wa-font-size-scale, 1));
	color: var(--wa-color-brand-on-quiet);
}
.sonub-lab .lab-left {
	padding-inline: 0.55rem;
	border-radius: var(--wa-border-radius-pill);
	background: var(--sonub-surface);
	font-weight: 600;
}
/* 오늘 남은 시간이 얼마 없다(상자 관리자의 경고) — Claude Code 화면을 덮지 않게 터미널 대신 여기서 알린다 */
.sonub-lab .lab-left.is-warn {
	background: var(--wa-color-warning-fill-loud);
	color: var(--wa-color-warning-on-loud);
}
.sonub-lab .lab-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sonub-space-2);
	padding: var(--wa-space-s) var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
}
.sonub-lab .lab-status p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	min-inline-size: 0;
	font-weight: 600;
}
.sonub-lab .lab-status[data-phase='ready'] {
	border-color: color-mix(in srgb, var(--wa-color-success-fill-loud) 45%, var(--sonub-border));
	background: var(--wa-color-success-fill-quiet);
	color: var(--wa-color-success-on-quiet);
}
.sonub-lab .lab-status:is([data-phase='closed'], [data-phase='replaced'], [data-phase='exited']) {
	border-color: color-mix(in srgb, var(--wa-color-warning-fill-loud) 45%, var(--sonub-border));
	background: var(--wa-color-warning-fill-quiet);
	color: var(--wa-color-warning-on-quiet);
}
.sonub-lab .lab-status[data-phase='connecting'] .fa-spinner { animation: lab-spin 1s linear infinite; }
.sonub-lab .lab-status code { font-weight: 500; }
.sonub-lab .lab-status-actions { display: flex; gap: var(--sonub-space-2); }
.sonub-lab .lab-screen {
	--term-size: 15px;
	block-size: clamp(22rem, 62vh, 40rem);
}
/* 붙기 전에는 빈 검은 칸 대신 옅게 */
.sonub-lab .lab-screen[data-phase='waiting'] { opacity: 0.55; }
/* 지금 누를 단추 하나 — 터미널 화면 한가운데에 크게, 테두리가 천천히 퍼진다(서버 시작 → Claude Code 시작) */
/* 감싸개는 칸 폭을 넘지 않는다 — 내용 폭(min-content)을 따르면 xterm 이 맞출 때마다 넓어지는 반복이 생긴다 */
.sonub-lab .lab-terminal { grid-template-columns: minmax(0, 1fr); }
.sonub-lab .lab-screen-wrap { position: relative; min-inline-size: 0; }
.sonub-lab .lab-launch {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: var(--wa-space-l);
	border-radius: var(--wa-border-radius-m);
	background: color-mix(in srgb, var(--wa-color-surface-lowered) 82%, transparent);
	backdrop-filter: blur(2px);
}
.sonub-lab .lab-launch-body {
	display: grid;
	justify-items: center;
	gap: var(--wa-space-m);
	max-inline-size: 26rem;
	text-align: center;
}
.sonub-lab .lab-launch-body p {
	margin: 0;
	color: var(--wa-color-text-normal);
	font-weight: 600;
	line-height: 1.6;
}
.sonub-lab .lab-launch-button {
	min-block-size: 3.5rem;
	padding-inline: 1.75rem;
	border-radius: var(--wa-border-radius-pill);
	font-size: calc(1.2rem * var(--wa-font-size-scale, 1));
	font-weight: 700;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa-color-brand-fill-loud) 60%, transparent);
	animation: lab-call 1.8s ease-out infinite;
}
.sonub-lab .lab-launch-button:focus-visible {
	outline: 3px solid var(--wa-color-focus);
	outline-offset: 3px;
}
@keyframes lab-call {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa-color-brand-fill-loud) 60%, transparent); }
	70% { box-shadow: 0 0 0 1rem color-mix(in srgb, var(--wa-color-brand-fill-loud) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa-color-brand-fill-loud) 0%, transparent); }
}
.sonub-lab .sonub-terminal-keys,
.sonub-lab .lab-try {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-2xs);
}
.sonub-lab .lab-try > span {
	margin-inline-end: var(--sonub-space-2);
	color: var(--sonub-muted);
	font-size: var(--wa-font-size-s);
	font-weight: 600;
}
.sonub-lab .lab-try-command {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-block-size: 2.5rem;
	padding-inline: 0.8rem;
	border: 1px solid color-mix(in srgb, var(--sonub-accent) 40%, var(--sonub-border));
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-accent-soft);
	color: var(--sonub-accent-ink);
	font: inherit;
	font-size: calc(0.82rem * var(--wa-font-size-scale, 1));
	cursor: pointer;
	transition: border-color var(--sonub-motion), background var(--sonub-motion);
}
.sonub-lab .lab-try-command:hover { border-color: var(--sonub-accent); }
.sonub-lab .lab-try-command:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.sonub-lab .lab-try-command code { text-align: start; }

/* ── 설치 3단계 ───────────────────────────────── */
.sonub-lab .lab-steps {
	display: grid;
	gap: var(--sonub-space-4);
	margin: 0;
	padding-inline-start: 1.5rem;
}
.sonub-lab .lab-steps > li {
	display: grid;
	gap: 0.3rem;
	padding-inline-start: 0.25rem;
}
.sonub-lab .lab-steps > li::marker {
	color: var(--wa-color-brand-on-quiet);
	font-weight: 700;
}
.sonub-lab .lab-steps > li > span { color: var(--sonub-muted); line-height: 1.6; }
.sonub-lab .lab-commands {
	display: grid;
	gap: var(--sonub-space-3);
	margin-block-start: var(--sonub-space-2);
}
.sonub-lab .lab-command { display: grid; gap: 0.35rem; min-inline-size: 0; }
.sonub-lab .lab-command-os {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
	font-weight: 650;
}
.sonub-lab .lab-command-os small { color: var(--sonub-muted); font-weight: 400; }
.sonub-lab .lab-command-line {
	display: flex;
	align-items: center;
	gap: var(--sonub-space-2);
	min-inline-size: 0;
	padding: var(--wa-space-xs) var(--wa-space-s);
	border: 1px solid var(--wa-color-surface-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--wa-color-surface-lowered);
}
.sonub-lab .lab-command-line code {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow-x: auto;
	white-space: nowrap;
	font-family: var(--wa-font-family-code);
	font-size: calc(0.86rem * var(--wa-font-size-scale, 1));
}

.sonub-lab .lab-install-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: var(--sonub-space-2) 0 0;
	font-size: var(--wa-font-size-s);
	color: var(--sonub-muted);
}
.sonub-lab .lab-install-note[data-state='ready'] { color: var(--wa-color-success-on-quiet); font-weight: 600; }

/* ── 한도와 안전 ──────────────────────────────── */
.sonub-lab .lab-limit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: var(--sonub-space-4);
}
.sonub-lab .lab-list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding-inline-start: 1.2rem;
	line-height: 1.6;
}

/* ── 기기 승인 ────────────────────────────────── */
.sonub-lab-device { max-inline-size: var(--sonub-form-width); }
.sonub-lab .lab-device-form { display: grid; gap: var(--sonub-space-3); }
.sonub-lab .lab-device-form label { font-weight: 650; }
.sonub-lab .lab-device-name { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.sonub-lab .lab-device-name span { color: var(--sonub-muted); }
.sonub-lab .lab-device-code {
	min-block-size: 3rem;
	padding-inline: var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-radius: var(--sonub-radius-control);
	background: var(--sonub-surface);
	color: var(--sonub-ink);
	font-family: var(--wa-font-family-code);
	font-size: calc(1.3rem * var(--wa-font-size-scale, 1));
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sonub-lab .lab-device-code:focus-visible {
	outline: 2px solid var(--wa-color-focus);
	outline-offset: 2px;
}
.sonub-lab .lab-device-hint { margin: 0; color: var(--sonub-muted); font-size: var(--wa-font-size-s); }
.sonub-lab .lab-device-form .sonub-button { justify-self: start; }
.sonub-lab .lab-device-result {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--sonub-space-3);
	font-weight: 650;
}
.sonub-lab .lab-device-result[data-state='done'] { color: var(--wa-color-success-on-quiet); }
.sonub-lab .lab-device-result[data-state='failed'] { color: var(--wa-color-danger-on-quiet); }

@keyframes lab-spin { to { transform: rotate(1turn); } }

@media (max-width: 599px) {
	.sonub-lab .lab-screen { block-size: clamp(18rem, 55vh, 30rem); --term-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.sonub-lab .lab-try-command { transition: none; }
	.sonub-lab .lab-status[data-phase='connecting'] .fa-spinner { animation: none; }
	.sonub-lab .lab-launch-button { animation: none; }
}