/* ══════════════════════════════════════════════════════════════════════════
   home.css — 표지 한 화면(`/`)만.

   문법은 편집 디자인의 색인 표지다. 근거는 셋:
     ① **눈금선이 보인다** — 요소를 가운데 띄우지 않고 격자 위에 앉힌다. 견본처럼 보이는
        배치의 공통점이 «가운데 정렬된 덩어리» 이고, 격자는 그 반대다.
     ② **위계를 크기 하나로 만들지 않는다** — 초대형 표제 옆에 고정폭 소문자 메타를 둔다.
        큰 것과 아주 작은 것이 같은 화면에 있을 때 «조판된» 느낌이 난다.
     ③ **데이터가 그림이다** — 오른쪽 띠는 실제 등록부다. 장식 도형을 쓰지 않는다.

   상자·계조·그림자·둥근 모서리를 쓰지 않는다. 선과 활자만 쓴다.
   ══════════════════════════════════════════════════════════════════════════ */

.cover {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	align-items: center;
	gap: clamp(1rem, 2.5vh, 1.75rem) clamp(1rem, 2vw, 2rem);
	/* 띠의 기하·바탕(전면 흘림·높이·막·사진)은 **셸**이 갖는다(`shell/banner.css` 의 `.band`).
	   마크업이 `class="cover band"` 로 둘을 겹쳐 쓴다 — 여기에는 이 화면의 **배치**만 남는다.

	   **한 화면이 아니라 띠 한 장이다.** 화면 높이를 다 먹으면 표지가 «관문» 이 되어, 등록부를
	   보러 온 사람이 스크롤을 한 번 해야 목록으로 갈 수 있다. 이 도구에서 표지는 관문이 아니라
	   머리글이다. */
}

/* ── 왼쪽 ── */
.cover-body {
	grid-column: 1 / span 4;
	grid-row: 1;
	align-self: center;
	min-width: 0;
	/* 아래 단추의 컨테이너 질의 기준. 화면 폭이 아니라 **이 칸의 폭**으로 판단해야 한다 —
	   배너가 1:2 로 나뉘어 있어 화면이 넓어도 이 칸은 좁을 수 있다.

	   **기준을 단추 묶음 자신에게 걸면 안 된다.** `container-type: inline-size` 는
	   `contain: inline-size` 를 함께 걸어 **내용으로 크기를 정하지 못하게** 만든다 —
	   그러면 `width: max-content` 가 0 으로 풀려 단추가 글자 없이 34px 로 쪼그라든다(실측).

	   **이름은 `coverbody`** 다 — 지면(`page`)과 구별해야 한다. 아래 두 규칙이 각각 다른 폭을
	   본다: 예외 ①은 이 칸의 폭, 예외 ①-ㄴ은 지면의 폭. */
	container: coverbody / inline-size;
}

/* ── 동작 ── 셸의 단추 한 벌(`shell/controls.css`)을 쓴다. 표지 전용 단추 모양을 따로
   만들지 않는다 — 같은 뜻의 단추가 화면마다 다르게 생기는 것이 그렇게 시작된다.

   **두 단추의 폭을 같게 한다.** 나란한 단추의 폭이 다르면 «둘 중 하나가 더 중요하다» 는
   신호가 되는데, 여기서 위계는 색(채운 것 vs 테두리)이 이미 말하고 있다. 폭까지 다르면
   신호가 둘이 되어 서로 방해한다.

   폭은 **글자에 따라 정해진다.** 격자의 칸을 `1fr` 로 두고 격자 자체를 `max-content` 로
   재면, 두 칸 모두 «더 긴 글자» 에 맞춰진다(고정 폭을 박으면 문구를 바꿀 때마다 그 값도
   고쳐야 하고, 대개 안 고친다). */
.cover-acts {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	justify-content: start;
	gap: 0.5rem;
	width: max-content;
	max-width: 100%;
	margin-top: clamp(1.25rem, 3vh, 1.75rem);
}

/* 예외 ① — 글자가 길어 두 단추가 칸을 넘치면 **세로로 쌓는다.** 가로로 욱여넣으면
   두 단추가 함께 좁아져 둘 다 못 읽는 상태가 된다.

   임계값은 **실제로 필요한 폭**이다: 단추 최소 폭 7.5rem 둘 + 사이 0.5rem = 15.5rem.
   16rem 아래로 내려가야 정말 못 들어간다. 22rem(352px)으로 잡아 두었더니 248px 이면
   충분한 자리에서 미리 접혀, 화면 폭 1024~1260px 구간에서만 단추가 두 줄 + 전폭이 되어
   배너 왼쪽이 갑자기 무거워졌다(실측). 폴백은 **필요할 때만** 나와야 한다. */
@container coverbody (max-width: 16rem) {
	.cover-acts {
		grid-auto-flow: row;
		width: 100%;
	}
}

/* 예외 ①-ㄴ — **좁은 지면에서는 전폭으로 쌓는다.** 위 규칙(예외 ①)과 조건이 다르다:
   위는 «이 칸이 좁아 두 단추가 못 들어간다», 이건 «지면 자체가 좁다(모바일)» 다.

   그래서 기준도 다른 것을 본다 — 이건 `#main`(지면 폭)이고 위는 `.cover-body`(칸 폭)다.
   칸 폭으로 이 규칙을 걸 수 없다: 2단 배치에서 왼쪽 칸은 234~485px 이라 모바일 지면
   (288~608px)과 겹치므로, 칸 폭만 보면 넓은 화면에서도 단추가 쌓인다(그 회귀가 위 주석의
   «22rem 으로 잡았다가» 사건이다).

   경계 38rem(608px)은 전 규칙(`@media (max-width: 640px)`)이 담당했던 자리를 지면 폭으로
   옮긴 값이다 — 뷰포트 640px 일 때 지면이 602px 이다(실측). 한때 이 규칙을 «컨테이너 질의
   미지원 브라우저 대비» 라고 적어 두고 지웠는데, 실제로는 **모바일 전폭 단추를 담당**하고
   있었다: 지우자 430px 화면에서 단추가 248px 로 나란히 섰다(지문 비교로 발견). */
@container page (max-width: 38rem) {
	.cover-acts {
		grid-auto-flow: row;
		width: 100%;
	}
}

/* 예외 ② — 한 단추의 글자가 지나치게 길면 그 단추 안에서 줄인다. 격자가 먼저 깨지는 것보다
   낫다(깨지면 옆 단추까지 함께 망가진다). */
.cover-acts .btn {
	/* `min-width: 0` 을 두지 않는다 — 그러면 셸이 정한 최소 폭(`controls.css`)을 덮어
	   단추가 글자에 딱 붙는다(실측: 120px 로 잡아 뒀는데 94px 로 나왔다).
	   말줄임은 최소 폭 아래로는 일어나지 않고, 그 아래로 줄어야 할 만큼 좁으면 위의
	   컨테이너 질의가 먼저 세로 배열로 바꾼다. */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ══ 등록부 ══ 전사(transcript) 화면. **모든 규격이 `ch`(글자 한 칸) 단위다.**
   `px`·`rem` 로 폭을 주면 문자 격자가 깨지고, 깨진 순간 이 화면은 표가 된다.

   상자를 그리지 않는다. 오른쪽은 비운다 — 그 비어 있음이 터미널로 읽히게 하는 것이다. */
.tui {
	/* 칸 수. **JS 가 실제 폭을 재서 인라인으로 넣는다** — 여기 값은 첫 페인트용 기본값.
	   폭을 `ch` 로 고정하면 격자 칸을 다 채우지 못하거나 넘친다. */
	--tui-w: 86;
	grid-column: 5 / span 8;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	width: 100%;
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	line-height: 1.55;
	color: var(--fg-2);
}

/* ── 터미널의 막 ── **판이 아니라 겹치는 막이다.**

   띠의 막(0.22)만으로는 문자 격자가 사진 위에서 읽히지 않는다(실측 1.0:1). 여기에 막을 한 겹
   더 얹으면 그 자리만 덮임이 올라간다 — 겹침은 곱으로 계산된다:

       총 덮임 = 1 − (1 − 0.22) × (1 − α)

   그래서 α=0.88 이면 총 0.906, α=0.92 면 0.938 이다. **불투명이 아니므로 사진이 이 아래로도
   비친다** — 판이 아니라 «그 자리만 안개가 낀» 것으로 읽히는 이유다. 앞서 0.96·0.985 로
   두었을 때는 그 안개가 판이 됐다(사용자 지적).

   가장자리는 풀어 둔다(mask) — 시작과 끝이 보이면 그것이 곧 상자다. */
/* 막은 **배너 안의 터미널에만** 붙는다. 대시보드 터미널도 `.tui` 라 그냥 두면 사진도 없는
   자리에 막이 한 겹 생기고, 그 좌우 21.6px 이 지면을 넓힌다(실측: 480px 에서 가로 6px 넘침).
   «무엇을 덮으려는 막인가» 를 선택자가 말하게 한다. */
.band .tui {
	position: relative;
	isolation: isolate;
}

.band .tui::before {
	content: '';
	position: absolute;
	inset: -1rem -1.35rem;
	z-index: -1;
	background: var(--tui-veil, rgba(255, 255, 255, 0.88));
	/* ── 가장자리를 푼다 ── 네 변에서 각각 옅어지게 **가로·세로 두 마스크를 교차**시킨다.

	   세 번을 거쳐 여기로 왔다.
	     ① 원형 마스크 한 겹 → 반경이 상자보다 커서 페이드가 상자 **밖에서** 끝났다
	        (실측: 가장자리에서 알파가 174 → 245 로 한 칸에 튐).
	     ② 선형 램프(직선) → 페이드는 생겼지만 평지와 만나는 지점에 **각**이 남았다.
	        직선은 끝에서 기울기가 갑자기 0 이 되므로 눈이 그 선을 본다.
	     ③ 램프를 여백 안으로만 넣기(상자를 키우고 램프 28·80px) → 글자 덮임은 완전히 균일해
	        지지만, 페이드가 짧아 «걷히는» 느낌이 덜했다. **눈으로 비교해 ②의 곡선 램프가 더
	        자연스러웠다**(사용자 판단) — 그래서 되돌린다.

	   지금: 스톱을 여러 개 두어 **곡선**으로 만들고(가로 10%·세로 15% 가 페이드 구간 —
	   시작점을 가운데에서 두 번에 걸쳐 밀었다: 22/30 → 15/21 → 10/15, 사용자 요청),
	   램프가 글자 위를 조금 지나가는 것은 받아들인다. 덮임이 그만큼 얇아지는 자리는 줄 끝의
	   흐린 메타뿐이고, 그 대가로 경계가 눈에 잡히지 않는다. */
	--fade-x:
		transparent 0,
		rgba(0, 0, 0, 0.12) 2.3%,
		rgba(0, 0, 0, 0.42) 4.5%,
		rgba(0, 0, 0, 0.75) 6.8%,
		rgba(0, 0, 0, 0.94) 8.7%,
		#000 10%,
		#000 90%,
		rgba(0, 0, 0, 0.94) 91.3%,
		rgba(0, 0, 0, 0.75) 93.2%,
		rgba(0, 0, 0, 0.42) 95.5%,
		rgba(0, 0, 0, 0.12) 97.7%,
		transparent 100%;
	--fade-y:
		transparent 0,
		rgba(0, 0, 0, 0.12) 3.5%,
		rgba(0, 0, 0, 0.42) 7%,
		rgba(0, 0, 0, 0.75) 10.5%,
		rgba(0, 0, 0, 0.94) 13%,
		#000 15%,
		#000 85%,
		rgba(0, 0, 0, 0.94) 87%,
		rgba(0, 0, 0, 0.75) 89.5%,
		rgba(0, 0, 0, 0.42) 93%,
		rgba(0, 0, 0, 0.12) 96.5%,
		transparent 100%;
	-webkit-mask-image:
		linear-gradient(to right, var(--fade-x)),
		linear-gradient(to bottom, var(--fade-y));
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, var(--fade-x)),
		linear-gradient(to bottom, var(--fade-y));
	mask-composite: intersect;
}

:root[data-theme='dark'] .band .tui {
	--tui-veil: rgba(13, 17, 23, 0.88);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .band .tui {
		--tui-veil: rgba(13, 17, 23, 0.88);
	}
}

/* 모든 줄의 공통 규칙. `pre` 가 이 화면의 전부다 — 공백이 정렬이므로 접히면 안 된다. */
.tui-line,
.tui-track li {
	margin: 0;
	white-space: pre;
	overflow: hidden;
}

/* 틀 — `╭ ─ │ ├ ╰` 는 글자다. 옅은 잉크로 두어 «화면의 뼈대» 로만 읽히게 한다. */
.tui-frame,
.tui-branch {
	color: var(--fg-3);
}

.tui-meters > p {
	margin: 0;
	white-space: pre;
	overflow: hidden;
}

/* 가지·연결선(`⎿`)은 구조를 만드는 글자다. 옅게 둬서 뼈대로만 읽히게 한다. */
.tui-dim { color: var(--fg-3); }
.tui-name { color: var(--fg); }

/* 상태색은 **점과 코드에만.** 색이 인색한 것이 이 문법의 특징이라, 이름·메타는 색을 갖지
   않는다(전부 칠하면 어느 것이 신호인지 사라진다). */
.tui-dot-ok, .tui-code-ok { color: var(--ok); }
.tui-dot-dev, .tui-code-dev { color: var(--idle); }
.tui-dot-auth, .tui-code-auth { color: var(--warn); }
.tui-dot-down, .tui-code-down { color: var(--bad); }
.tui-dot-unchecked, .tui-code-unchecked { color: var(--line-strong); }

/* htop 의 계기 — 비율을 **글자로** 그린다(`█░`). 도형을 쓰면 터미널이 아니다. */
.tui-bar-ok { color: var(--ok); }
.tui-bar-auth { color: var(--warn); }
.tui-bar-down { color: var(--bad); }
.tui-bar-rest { color: var(--line-strong); }
.tui-num { color: var(--fg-2); }

.tui-view {
	--tui-fade: 2rem;
	height: clamp(7.5rem, 21vh, 11rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tui-fade)), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--tui-fade)), transparent);
}

/* 목록을 두 벌 넣고 절반만큼 올린다 — 한 벌이면 마지막 줄 뒤에 빈 화면이 한 번 지나간다.
   아래로만 흐리게 한 이유: 위쪽까지 흐리면 `⎿` 바로 아래 첫 줄이 읽히지 않는다.

   **흐름은 CSS 가 아니라 JS 가 소유한다.** 자동 흐름과 마우스 휠이 같은 `transform` 을
   각자 건드리면 서로를 덮어써서 값이 튄다(CSS 애니메이션은 인라인 transform 을 이긴다).
   그래서 애니메이션을 걷어내고 `home.js` 가 위치 하나를 계산해 넣는다. */
.tui-track {
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

/* 휠을 목록에서 쓰므로 커서로 «여기서 잡힌다» 를 알린다. */
.tui-view {
	cursor: ns-resize;
}

/* 오른쪽 사실 셋 — 라벨은 흐리게(`.tui-dim`), 값은 한 단계 올린다. 막대와 같은 무게로
   칠하면 어느 쪽을 먼저 봐야 하는지 알 수 없다. */
.tui-fact {
	color: var(--fg-2);
}

/* 이음매 줄 — 틀과 같은 옅은 잉크. 줄 하나이므로 목록의 리듬을 깨지 않는다. */
.tui-seam {
	color: var(--fg-3);
}

/* ══ 입력칸 ══ Claude Code 의 입력 상자.
   위 전사는 오른쪽이 열려 있고 **이 상자만 닫혀 있다** — 읽는 곳과 쓰는 곳을 그렇게 가른다. */
.tui-prompt {
	margin-top: 0.9rem;
}

/* 세로선이 없다 — 위아래 가로선 사이의 한 줄이다. 오른쪽 끝이 없으니 한글이 섞여도
   어긋날 자리가 없다. */
.tui-prompt-row {
	position: relative;           /* 떠오르는 글자의 기준점 */
	display: flex;
	align-items: baseline;
	gap: 0.7ch;
	/* 두 가로선 사이는 **글줄 하나 높이**뿐이다. 여백을 더 두면 상자처럼 보이는데,
	   이 칸은 상자가 아니라 두 선 사이의 한 줄이다. */
	padding-block: 0;
	cursor: text;
}

.tui-caret {
	color: var(--accent);
}

/* 입력칸은 **틀 안에 앉은 글자**여야 한다 — 테두리·배경·그림자를 갖는 순간 이 화면에서
   혼자 웹 양식이 된다. */
.tui-prompt input {
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--fg);
	caret-color: var(--accent);
}

.tui-prompt input:focus {
	outline: none;               /* 초점 표시는 아래 상자 전체가 받는다 */
}

/* 초점 표시는 **색 하나로만** 한다. 앞서 `--fg-3 → --fg-2` 는 색차가 작아 안 보였고,
   액센트색에 굵기까지 올렸더니 이번엔 획이 굵어지면서 오히려 «풀린 것» 처럼 보였다
   (`─` 는 굵어질수록 획이 길어져 선이 성글어 보인다). 색만 바꾸면 그 문제가 없다. */
.tui-prompt:focus-within .tui-frame {
	color: var(--accent);
}

.tui-prompt:focus-within .tui-caret {
	color: var(--accent);
}

/* ── 엔터 ── 기능은 없지만 **아무 일도 안 일어난 것처럼 보이지는 않는다.**
   친 글자가 그 자리에서 위로 떠오르며 사라진다(게임의 데미지 숫자와 같은 장치).
   «받았고, 그리고 아무 데도 가지 않았다» 를 한 동작으로 말한다. */
/* 이미 떠 있는 개수(`--stack`)만큼 위에서 시작한다. 같은 자리에서 시작하면 연달아 칠 때
   글자가 겹쳐 둘 다 못 읽는다(실측 결함) — 게임의 데미지 숫자도 같은 이유로 쌓는다. */
.tui-float {
	position: absolute;
	left: 2.2ch;
	/* 칸 간격 = **올라가는 거리 + 글줄 높이보다 커야 한다.**
	   ① 1.25em(16px): 줄 높이(20px)보다 작아 바로 겹쳤다.
	   ② 1.7em(22px): 줄 높이는 넘겼지만 **올라가는 거리(35px)** 보다 작아, 아래 칸의
	      오래된 글자가 위 칸의 새 글자를 따라잡아 다시 겹쳤다(실측).
	   ③ 4.5em(58px): 겹치진 않지만 칸 사이가 너무 벌어져 세 글자가 흩어져 보였다.
	   ④ 2.6em(34px) + **올라가는 거리를 1.4rem(22px)로 줄임**: 34 − 22 = 12px 남고
	      글줄이 20px 이라 아슬하므로, 글줄이 겹치지 않도록 이동 거리를 함께 낮춘 것이
	      핵심이다. 간격만 좁히면 다시 따라잡는다. */
	bottom: calc(100% + var(--stack, 0) * 2.6em);
	margin-bottom: 0.1rem;
	white-space: pre;
	color: var(--accent);
	pointer-events: none;
	/* 느리게 — 0.85초는 «떴다» 를 알아보기 전에 사라졌다. 올라가는 거리도 함께 늘린다:
	   시간만 늘리면 같은 자리에서 오래 머무는 것으로 보인다. */
	animation: tui-float 1.9s var(--ease) forwards;
}

@keyframes tui-float {
	/* 처음 4분의 1은 **불투명하게 유지**한다 — 읽을 시간을 준 뒤에 사라지기 시작해야
	   «떴다가 사라졌다» 로 읽힌다. 바로 옅어지기 시작하면 «흐릿하게 지나갔다» 가 된다. */
	0% { opacity: 0; transform: translateY(0.4rem); }
	12% { opacity: 1; transform: translateY(0.15rem); }
	45% { opacity: 1; transform: translateY(-0.3rem); }
	100% { opacity: 0; transform: translateY(-1.4rem); }
}

/* 움직임을 줄인 설정에서는 뜨지 않고 **잠깐 보였다 사라진다** — 사라지는 사실 자체는
   정보이므로 지우지 않는다. */
@media (prefers-reduced-motion: reduce) {
	.tui-float {
		animation: tui-fade 1.9s steps(2, end) forwards;
	}

	@keyframes tui-fade {
		from { opacity: 1; }
		to { opacity: 0; }
	}
}

/* 커서 — 이 화면에서 «지금 살아 있다» 를 말하는 유일한 움직임. */
.tui-cursor {
	color: var(--accent);
	animation: tui-blink 1.1s steps(1, end) infinite;
}

@keyframes tui-blink {
	0%, 55% { opacity: 1; }
	56%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.tui-cursor { animation: none; }
}

/* ══ 등장 ══ 위에서부터 차례로 올라온다. **JS 없이** — 첫 화면의 연출을 스크립트에 걸면
   스크립트가 늦은 만큼 빈 화면이 길어진다. */
@keyframes cover-in {
	from { opacity: 0; transform: translateY(0.75rem); }
	to { opacity: 1; transform: none; }
}

[data-in] {
	animation: cover-in 0.62s var(--ease) both;
}

[data-in='1'] { animation-delay: 0.02s; }
[data-in='2'] { animation-delay: 0.10s; }
[data-in='3'] { animation-delay: 0.20s; }
[data-in='4'] { animation-delay: 0.28s; }
[data-in='5'] { animation-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
	[data-in] { animation: none; }
}

/* ══ 좁은 지면 ══ 격자를 접는다. 띠는 남긴다 — 이 화면에서 유일하게 이 제품인 부분이다.

   **기준은 뷰포트가 아니라 지면 폭이다**(`#main` 컨테이너). 전에는 `@media (max-width: 64rem)`
   였고 그 시점의 지면 폭이 **963px** 이라, 경계는 그 값을 담는 61rem(976px)이다. 60rem(960px)
   으로 잡았다가 3px 차이로 1024px 화면에서 접히지 않는 것을 지문 비교로 잡았다(실측).

   여유는 실측으로 확인했다: 12단을 강제한 채 좁히면 **지면 782px 까지 제목이 2줄을 유지**하고
   752px 에서 3줄로 깨진다. 즉 960px 은 조판이 버티는 한계보다 178px 이른, 안전한 값이다. */
@container page (max-width: 61rem) {
	.cover {
		grid-template-columns: 1fr;
		align-items: start;
		gap: clamp(1.75rem, 5vh, 2.5rem);
	}

	.cover-body {
		grid-column: 1;
		grid-row: 1;
	}

	.tui {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		font-size: var(--t-micro);
	}

	.tui-view {
		height: 9rem;
	}

}

/* ══ 대시보드 ══ 배너와 같은 TUI 문법. 다른 것은 **폭과 자리**뿐이다 —
   배너의 패널은 오른쪽 칸에 갇혀 있지만 이쪽은 지면 폭을 쓴다. */
.board {
	/* 셸과의 사이는 지면(`#main`)이 낸다. 여기서 또 패딩을 주면 홈만 두꺼워진다
	   (실측: 아래가 목록 95px · 홈 88px 로 갈려 있었다). */
	padding-block: 0;
}

/* 배너의 `.tui` 규칙을 그대로 물려받고 격자 자리만 푼다. */
.tui-board {
	--tui-w: 104;
	grid-column: auto;
	grid-row: auto;
	align-self: auto;
	justify-self: start;
}

.tui-rows > p {
	margin: 0;
	white-space: pre;
	overflow: hidden;
}

/* **한글이 들어오는 칸은 글자 수로 맞출 수 없다.** 한글은 1.664ch(실측)라 `padEnd` 로
   채우면 이름 길이마다 뒤 열이 밀린다 — 고객사명이 전부 한글이라 이 표에서 바로 드러났다.
   그래서 이 칸만 **CSS 로 폭을 고정**한다(칸 수는 JS 가 인라인으로 넣는다). */
.tui-fixed {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: bottom;
}

/* **고정폭 서체라고 모든 글자가 1칸은 아니다.** 실측: `│─┬┴█░▏▌·×…` 는 1.000ch 인데
   `⏺` 는 1.536ch, `⎿` 는 1.664ch 다. 이 둘이 든 줄만 그만큼 밀려서 열이 깨진다.
   그래서 이 글자들은 **한 칸짜리 상자에 넣는다** — 잉크는 상자를 조금 넘지만(점·갈고리라
   넘치는 부분이 거의 없다) 자리는 정확히 한 칸이다. */
.tui-glyph {
	display: inline-block;
	width: 1ch;
	text-align: center;
}

/* 고객사 막대 — 계기와 같은 `█░` 이지만 **상태색이 아니라 잉크색**이다. 여기서 막대는
   «얼마나 많은가» 이고 상태는 오른쪽 숫자가 말한다. 둘을 같은 색으로 칠하면 무엇을 재는
   막대인지 알 수 없다. */
.tui-share { color: var(--fg-2); }

/* 좁은 지면에서는 글자를 줄인다. 칸 수는 JS 가 그 글자 크기로 다시 재므로 여기서
   지정하지 않는다 — 두 곳에서 정하면 어긋난다.

   **넘침을 막는 규칙이 아니다**(JS 가 칸 수를 다시 재므로 넘치지 않는다 — 실측: 판 폭 368px
   까지 넘침 0). 좁을 때 같은 폭에 줄을 더 담기 위한 밀도 조정이고, 표지 접기와 **같은 사실**
   («지면이 좁다»)에 반응하므로 경계도 같은 60rem 이다. */
@container page (max-width: 61rem) {
	.tui-board {
		font-size: var(--t-micro);
	}
}