/* ══════════════════════════════════════════════════════════════════════════
   section.css — **구획 문법.** 문서형 화면 둘(목록·상세)이 함께 쓴다.

   구획끼리의 사이(`.act + .act`)와 구획의 라벨 막(`.act-title`). 한때 목록 CSS 에만
   있었는데 상세에도 같은 장치가 필요해지면서 여기로 올렸다 — 화면마다 한 벌씩 두면
   갈린다(배너가 두 화면 CSS 에 복사돼 있다가 폭이 80px 어긋났다).
   홈은 이 막을 박스 문자로 그리므로 여기 오지 않는다(같은 형태, 다른 매체).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   구획 문법 — **문서형 화면 둘(목록·상세)이 함께 쓴다.**

   목록 CSS 에만 있던 것을 여기로 올렸다. 상세에 페이지 CSS 를 만들면서 같은 장치가
   필요해졌는데, 화면 CSS 에 한 벌씩 두면 갈린다 — 배너가 정확히 그렇게 갈렸다(두 화면
   CSS 에 복사돼 있다가 폭이 80px 어긋났다). 홈은 이 막을 박스 문자로 그리므로 여기 오지
   않는다(같은 형태, 다른 매체).
   ══════════════════════════════════════════════════════════════════════════ */

/* 구획은 **자기 바깥 여백을 갖지 않는다** — 셸과의 사이는 지면(`#main`)이,
   구획끼리의 사이는 이 규칙이 낸다. */
.act + .act {
	margin-top: var(--gap-act);
}

/* **도구 구획**(`is-tool`)과 그 결과 사이는 좁다 — 목록의 「검색 조건」→「검색 결과」,
   상세의 「다른 서비스로」→「이 서비스」가 같은 짜임이다. 근거와 값은 `--gap-act-tight`
   주석에 있다. 두 화면이 같은 것을 쓰므로 **여기 한 벌만** 둔다: 값을 화면 CSS 에 복사하면
   갈린다(배너가 두 화면 CSS 에 복사돼 있다가 폭이 80px 어긋났다). */
.act.is-tool + .act {
	margin-top: var(--gap-act-tight);
}

/* ── 구획 라벨 막 ── 홈의 `── by client ─────────` 과 같은 모양이다: 짧은 선 · 라벨 ·
   남은 폭을 채우는 선. 제목을 크게 세우지 않는 이유는 홈과 같다 — 이 화면에서 큰 것은
   등록부의 내용이어야 하고, 구획 이름은 «여기서부터 무엇인가» 만 말하면 된다.
   (홈은 이 막을 박스 문자로 그린다. 여기서는 1px 선이다 — 라벨에 한글이 들어와도 흔들리지
   않아야 하고, 문자로 그린 선은 한글 옆에서 길이가 어긋난다.) */
.act-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: 1;
	margin: 0;
	font-family: var(--font-mono);
	font-size: var(--t-micro);
	font-weight: 400;
	/* **자간은 0.04em 이다 — 0.2em 이 아니다.** 홈의 라벨(`env`·`codes`·`by client`)은 라틴
	   글자라 자간을 크게 벌려도 낱말로 읽히지만, 한글은 음절이 갈라져 「찾 기」·「고객 사」로
	   보인다(실측). 라벨의 성질(고정폭·아주 작게·흐린 잉크)은 그대로 두고 자간만 줄인다. */
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fg-3);
}

.act-title::before {
	content: '';
	width: 1.5rem;
	height: 1px;
	background: var(--line-strong);
}

/* 라벨 뒤의 선은 **남은 폭을 다 먹는다** — 그래야 구획의 시작이 한 줄로 그려진다. */
.act-title::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--line-strong);
}