/* ══════════════════════════════════════════════════════════════════════════
   lab.css — 실험 탭(`/lab/`).

   카탈로그를 다르게 들여다보는 장치 넷(주사위 · 이름 짓기 버릇 · 주소 짜임 · 팔레트).
   홈의 등록부와 같은 TUI 문법을 쓴다 — 글자로 그린 틀(`╭ ─ │ ╰`) · `⏺` 사건 점 ·
   `⎿` 결과 연결 · 줄 끝의 흐린 메타. 홈이 그 문법의 정본이고 여기는 축소판이라 규격을
   베끼지 않고 **성질만** 가져온다(고정폭 · 색은 신호에만).

   시험 화면이라 규칙이 느슨한 것이 아니다 — 여기서 만든 것이 자기 자리로 옮겨 가므로,
   옮길 때 다시 쓰지 않으려면 처음부터 이 프로젝트의 문법이어야 한다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 격자 ── 넷은 서로 독립이다(하나가 다른 하나의 결과가 아니다). 한 줄로 쌓으면 왼쪽만
   차고 오른쪽이 비므로 나란히 둔다. **경계를 손으로 정하지 않는다** — `auto-fit` 이 폭에
   따라 줄 수를 정하고, 하한(22rem)은 TUI 줄이 접히지 않는 폭에서 온다. */
.lab-grid {
	display: grid;
	/* `minmax(22rem, …)` 만 쓰면 트랙이 **컨테이너보다 작아질 수 없어** 좁은 화면에서 지면을
	   넘긴다(실측: 320px 화면에서 가로로 80px). `min(100%, …)` 을 씌우면 하한이 «22rem 또는
	   담긴 폭 중 작은 것» 이 되어 넘치지 않는다. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: var(--gap-act) 2.5rem;
	align-items: start;
}

/* 막마다 자기 라벨 막(`.act-title`, 셸)을 갖는다 — 넷이 나란히 서므로 «여기부터 무엇인가»
   가 각자 있어야 한다. */
.lab-card {
	min-width: 0;
}

/* ── 터미널 ── 공백이 정렬이므로 접히면 안 된다(`pre`). 좁은 칸에서 줄이 접히면 문자 격자가
   무너져 «틀» 로 안 읽힌다.

   그래서 넘칠 때는 **자기 안에서 가로로 스크롤한다.** 주석은 「넘치면 자른다」고 적혀 있었지만
   실제로는 `overflow` 가 없어 지면 밖으로 흘렀다 — 문서에 가로 스크롤바가 생겼다(실측). */
/* ── 틀은 **사각형이다**(LAB 에서만) ──
   홈의 등록부는 오른쪽 테두리를 찍지 않는다: 한글이 1.664ch 라(박스 문자 1.0ch) 문자 수로
   맞춘 오른쪽 끝이 줄마다 흔들린다. 여기서는 그 문제를 **글자로 세지 않는 방법**으로 피한다 —
   JS 가 틀 폭을 `--lab-w`(문자 수)로 알려 주고, 오른쪽 선은 그 위치에 절대 배치한다.
   위치가 `ch` 단위 px 계산이라 내용에 한글이 섞여도 오른쪽 끝이 한 줄로 선다.

   모서리(`╭╮╰╯`)는 JS 가 찍는다 — 그 줄은 전부 ASCII 라 폭이 정확하다. */
.lab-term {
	position: relative;
	overflow-x: auto;
	margin-top: 0.9rem;
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	line-height: 1.65;
	color: var(--fg-2);
}

.lab-line {
	margin: 0;
	overflow: hidden;
	white-space: pre;
}

/* 틀·가지·메타는 **뼈대**다 — 옅은 잉크로 두어 값이 먼저 읽힌다. */
.lab-frame {
	color: var(--lab-hue, var(--line-strong));
}

.lab-branch,
.lab-dim {
	color: var(--fg-3);
}

.lab-name {
	font-weight: 600;
	color: var(--fg);
}

/* 막대도 **글자**다(`█░`) — 홈의 계기와 같은 방식이다. 색을 주지 않는 이유는 이 수치가
   상태가 아니라 «버릇·짜임» 이기 때문이다: 색은 상태에만 쓴다. */
/* ── 색 ── **한 블록 = 한 색.** 장치마다 색을 달리해 «다른 것을 재고 있다» 를 색으로도 말한다.
   LAB 에서만 이렇게 한다: 목록·상세에서 색은 상태 전용이라 장치를 색으로 가르지 않는다.

   색은 **이미 있는 토큰만** 쓴다(`--accent`·`--poc`·`--ok`·`--warn`). 새 색을 만들면 테마 두
   벌을 다시 맞춰야 하고, 이 토큰들은 두 테마에서 이미 대비가 확인된 값이다.
   글자(라벨·숫자)는 색을 갖지 않는다 — 색은 틀과 막대에만 준다. 읽는 값이 색에 따라
   읽기 쉬워지고 어려워지면 안 된다. */
#client-term { --lab-hue: var(--accent); }
#field-term { --lab-hue: var(--poc); }
#dice-term { --lab-hue: var(--ok); }

/* 통계는 블록 수가 늘 수 있으므로 **네 색을 돌려 쓴다**(`4n+…`). 격자가 세 열이라 같은 색이
   가로·세로로 붙지 않는다. 색을 더 만들지 않는 이유: 새 색은 테마 두 벌을 다시 맞춰야 하고,
   이 넷은 두 테마에서 대비가 이미 확인된 값이다. */
.lab-stat:nth-child(4n + 1) { --lab-hue: var(--accent); }
.lab-stat:nth-child(4n + 2) { --lab-hue: var(--poc); }
.lab-stat:nth-child(4n + 3) { --lab-hue: var(--ok); }
.lab-stat:nth-child(4n + 4) { --lab-hue: var(--warn); }

/* 찬 칸은 그 블록의 색, 빈 칸은 선 색 — 두 조각을 JS 가 따로 낸다(`bar()`). */
.lab-bar-on {
	color: var(--lab-hue, var(--accent));
}

.lab-bar-off {
	color: var(--line);
}

.lab-bar {
	color: var(--line-strong);
}

/* 색은 **점에만.** 굴려 나온 곳의 접속 상태가 점 색으로 읽힌다. */
.lab-dot.is-ok { color: var(--ok); }
.lab-dot.is-dev { color: var(--idle); }
.lab-dot.is-auth { color: var(--warn); }
.lab-dot.is-down { color: var(--bad); }
.lab-dot.is-unchecked { color: var(--line-strong); }
.lab-dot.is-none { color: var(--fg-3); }

/* 굴리기는 **칸 가운데**다 — 이 칸의 주인공이고, 왼쪽에 붙여 두면 위 터미널의 왼쪽 끝과
   한 줄로 이어져 «틀에 딸린 것» 처럼 읽힌다. 아래 메모도 같이 가운데로 두어야 셋이 한
   덩어리가 된다(단추만 가운데면 메모가 떨어져 나온 것으로 보인다). */
.lab-acts {
	justify-content: center;
	margin-top: 1rem;
}

/* 「이 서비스로」는 굴린 뒤에만 나온다 — 굴리기 전에 눌러 갈 곳이 없다. */
.lab-acts .btn[hidden] {
	display: none;
}

.lab-note {
	margin-top: 0.75rem;
	text-align: center;
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	letter-spacing: 0.04em;
	color: var(--fg-3);
}

/* ── 팔레트 ── **줄 전체를 쓴다.** 다른 셋은 TUI 틀이라 폭이 정해져 있지만 이건 표라
   늘어날수록 값이 잘 읽힌다 — 한 칸만 쓰면 그 줄의 오른쪽이 통째로 빈다.
   토큰이 열셋이라 안에서 다시 여러 열로 접는다(`auto-fit`). */
/* 통계 넷은 **격자로** 놓는다. 한 칸에 한 블록이고, 각 블록이 자기 칸 폭으로 틀을 그린다
   (`lab.js` 의 `renderStats`). 하한에 `min(100%, …)` 을 씌우는 이유는 좁은 화면에서 트랙이
   컨테이너보다 작아질 수 없어 넘치기 때문이다(LAB 이 320px 에서 80px 넘쳤던 그 원인). */
.lab-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	gap: 0.9rem 2rem;
}

.lab-card#stats {
	grid-column: 1 / -1;
}







/* 내용 줄의 오른쪽 선 — 틀의 마지막 칸에 세운다(`--lab-w` 는 JS 가 잰 문자 수).
   틀 줄(`.lab-frame`)에는 붙이지 않는다: 그 줄은 모서리 글자로 이미 닫혀 있다. */
.lab-term > .lab-line:not(.lab-frame),
.lab-stat .lab-line:not(.lab-frame) {
	position: relative;
}

.lab-term > .lab-line:not(.lab-frame)::after,
.lab-stat .lab-line:not(.lab-frame)::after {
	content: '│';
	position: absolute;
	top: 0;
	left: calc((var(--lab-w, 24) - 1) * 1ch);
	color: var(--lab-hue, var(--line-strong));
	pointer-events: none;
}