/* ══════════════════════════════════════════════════════════════════════════
   link_list.css — 병합 템플릿 위의 «데이터 표현» 레이어
   ══════════════════════════════════════════════════════════════════════════

   앞선 레이어가 화면을 이미 다 세워 놓았다. 이 파일은 데이터 고유의 것만 다룬다.

     h5u-tokens.css   색 변수 · 액센트 계열
     h5u.css          Spectral + Forty 원본 (셸·배너·밴드·features·타일·폼)
     h5u-project.css  직각 · 나브바 스위치 · 타일 밀도
     link_list.css    ← 분류 색 · 접속 상태 · 타일 내용 · 조건 칩 · 모달

   레이아웃을 여기서 다시 그리지 않는다. 원본 컴포넌트에 없는 것만 더한다.

   타일의 두 시각 채널 (섞으면 둘 다 못 읽는다)
     · 오버레이 색 `article:before`  = 분류   — Forty 의 nth-child 6색 주기를 덮어쓴다
     · 좌측 띠     `.state-bar`      = 접속 상태
   ══════════════════════════════════════════════════════════════════════════ */

/* ── hidden 속성이 이겨야 한다 ───────────────────────────────────────────────

   UA 기본 규칙 `[hidden] { display: none }` 은 특이도 (0,1,0) 이라, 요소에 display 를
   지정한 어떤 규칙에도 진다. 이 화면은 `hidden` 으로 여닫는 요소가 셋인데
   (`#controls-reset` → .button 의 inline-block, `#active-chips` → .chips 의 flex,
   `#links` → .tiles 의 flex) 전부 display 를 받는다 — 실측 결과 조건이 없는데도
   «조건 초기화» 버튼이 보이고, 결과 0건일 때 목록 컨테이너가 빈 상태와 함께 남았다.
   JS 를 클래스 토글로 바꾸는 대신 여기서 한 번 못박는다.
   ──────────────────────────────────────────────────────────────────────────── */

[hidden] {
	display: none !important;
}

/* ── 접근성 유틸 ─────────────────────────────────────────────────────────── */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10001;
	padding: 0.75em 1.25em;
	background: hsl(var(--accent));
	color: #fff;
	border-bottom: 0;
}

.skip-link:focus {
	left: 0;
}

/* ── 배너: 총 건수 요약 ─────────────────────────────────────────────────── */

/* 배너 보조 줄. 원본에 `#banner br { display: none }` 이 있어 `<br>` 로 줄을 나누면
   좁은 화면에서 두 문장이 «…응답합니다.4개는 인증이…» 처럼 붙는다 — 블록 요소로 나눈다. */
#banner .banner-aside {
	display: block;
	margin-top: 0.35em;
}

#banner #banner-summary strong {
	color: hsl(var(--accent-hi));
}

/* ── 상태 밴드의 점검 표시 ──────────────────────────────────────────────── */

#status .status-checked {
	font-size: 0.7em;
	letter-spacing: 0.2em;
	margin: 0.5em 0 0 0;
	opacity: 0.7;
	text-transform: uppercase;
}

/* ══════════════════════ 분류 색 (12색) ══════════════════════

   Forty 의 타일 오버레이는 `:nth-child(6n-5)`…`(6n)` 6색 주기다. 분류가 12개인
   카탈로그에서 주기색은 "몇 번째 타일인가" 를 뜻하게 되어 분류를 못 읽는다.
   그래서 분류 order 로 정해지는 고정색으로 덮어쓴다.

   특이도가 원본과 같으므로(둘 다 클래스 2 + 타입 1 + 의사요소) **로드 순서**로
   이긴다 — 이 파일은 h5u.css 보다 뒤에 로드된다.
   색은 Forty 의 파스텔 레지스터를 12색으로 늘린 것이다.
   ────────────────────────────────────────────────────────── */

/* 팔레트는 여기 한 번만 정의한다 — 타일 오버레이와 분류 밴드의 색 견본이 같은
   변수를 읽으므로 두 곳이 어긋날 수 없다. Forty 의 파스텔 레지스터를 12색으로 늘렸다. */
.cat-style1  { --cat: #6fc3df; }
.cat-style2  { --cat: #8d82c4; }
.cat-style3  { --cat: #ec8d81; }
.cat-style4  { --cat: #e7b788; }
.cat-style5  { --cat: #8ea9e8; }
.cat-style6  { --cat: #87c5a4; }
.cat-style7  { --cat: #c9a8d8; }
.cat-style8  { --cat: #6fbfb2; }
.cat-style9  { --cat: #d99a9a; }
.cat-style10 { --cat: #a8b96f; }
.cat-style11 { --cat: #7fa8c9; }
.cat-style12 { --cat: #cfa06f; }
.cat-style0  { --cat: #8b98a5; }   /* 미분류 */

.tiles article.cat-style1:before,
.tiles article.cat-style2:before,
.tiles article.cat-style3:before,
.tiles article.cat-style4:before,
.tiles article.cat-style5:before,
.tiles article.cat-style6:before,
.tiles article.cat-style7:before,
.tiles article.cat-style8:before,
.tiles article.cat-style9:before,
.tiles article.cat-style10:before,
.tiles article.cat-style11:before,
.tiles article.cat-style12:before,
.tiles article.cat-style0:before {
	background-color: var(--cat);
}

/* ══════════════════════ 타일 내용 ══════════════════════

   Forty 의 z-index 층
     1  article:after   (어둡게 깔기)
     2  article:before  (분류 색 오버레이 — hover 시 사라짐)
     3  article header  (제목·설명)
     4  a.link.primary  (타일 전면 앵커 — h5u.js 가 만든다)
   보조 링크·버튼·태그는 4보다 위여야 눌린다.
   ────────────────────────────────────────────────────── */

.tiles article {
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: flex-start;
	-webkit-justify-content: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
	-moz-align-items: stretch;
	-webkit-align-items: stretch;
	-ms-align-items: stretch;
	align-items: stretch;
}

.tiles article header.major {
	-moz-flex: 1 1 auto;
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	margin: 0;
	width: 100%;
}

/* Forty 의 타일 h3 는 1.75em · 대문자 · 자간 0.225em 이다. 데모 제목("Aliquam")에는
   맞지만 실제 서비스 이름(`codepresso_marketing_agent`)은 한 낱말이라 어디서도 끊기지
   않고 타일 밖으로 흐른다. 크기·자간을 줄이고 낱말 안에서도 끊기게 한다. */
.tiles article header.major h3 {
	font-size: 1.15em;
	letter-spacing: 0.1em;
	line-height: 1.35;
	margin: 0 0 0.5em 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.tiles article header.major h3 a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.tiles article header.major p {
	font-size: 0.8em;
	letter-spacing: 0.025em;
	line-height: 1.6;
	margin: 0;
	opacity: 0.95;
}

.tiles article .no-desc {
	opacity: 0.6;
	font-style: italic;
}

/* ── 접속 상태: 좌측 띠 ─────────────────────────────────────────────────── */

.tiles article .state-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0.5em;
	z-index: 5;
	/* 폴백은 «미점검» 색이다. 미분류 오버레이(--cat #8b98a5)와 같은 값을 쓰면
	   분류 채널과 상태 채널이 같은 색을 갖게 된다(§2.3 금지). */
	background-color: #6b7683;
}

.tiles article.is-ok        .state-bar { background-color: #35b07a; }
.tiles article.is-auth      .state-bar { background-color: #d99b1f; }
.tiles article.is-down      .state-bar { background-color: #d63b2a; }
.tiles article.is-unchecked .state-bar { background-color: #6b7683; }

/* 접속 불가는 목록에서 즉시 튀어야 한다 — 띠만으로는 스캔에서 놓친다.
   `:after` 는 오버레이(:before) 아래층이라 hover 로 오버레이가 걷힐 때도 남는다. */
.tiles article.is-down:after {
	background-color: rgba(120, 20, 12, 0.45);
}

/* ── 분류 태그 ──────────────────────────────────────────────────────────── */

/* article 직계 flex 아이템이다 — header.major 안에 두면 그 z-index:3 스택 컨텍스트에
   갇혀 전면 앵커(z-index:4) 아래로 내려가 눌리지 않는다. */
.tiles article .tile-tag {
	position: relative;
	z-index: 5;
	-moz-align-self: flex-start;
	-webkit-align-self: flex-start;
	-ms-align-self: flex-start;
	align-self: flex-start;
	display: inline-block;
	margin: 0 0 0.9em 0;
	padding: 0.35em 0.75em;
	background-color: rgba(0, 0, 0, 0.35);
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 0.62em;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
}

.tiles article .tile-tag:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

/* ── 타일 하단: 대표 주소 · 보조 링크 · 편집 ───────────────────────────── */

.tiles article .tile-foot {
	position: relative;
	z-index: 5;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	gap: 0.5em 0.75em;
	margin: 1em 0 0 0;
	padding: 0.85em 0 0 0;
	border-top: solid 1px rgba(255, 255, 255, 0.3);
	width: 100%;
}

.tiles article .tile-primary {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	gap: 0.4em;
	font-size: 0.62em;
	font-weight: 600;
	letter-spacing: 0.16em;
	min-width: 0;
	text-transform: uppercase;
}

/* URL 은 반드시 보여야 한다 — 카탈로그에서 "어느 호스트인가" 가 곧 신원이다.
   길면 줄이되 잘린 사실이 드러나게 ellipsis 로 끊는다. */
.tiles article .tile-host {
	display: inline-block;
	max-width: 14em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 400;
	letter-spacing: 0.05em;
	opacity: 0.9;
	text-transform: none;
	vertical-align: bottom;
}

.tiles article .tile-rest {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.35em;
}

.tiles article .tile-actions {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	gap: 0.4em;
	margin-left: auto;
}

.tiles article .tile-owner {
	font-size: 0.6em;
	letter-spacing: 0.16em;
	opacity: 0.75;
	text-transform: uppercase;
}

.chip-link,
.tile-btn {
	display: -moz-inline-flex;
	display: -webkit-inline-flex;
	display: -ms-inline-flex;
	display: inline-flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	gap: 0.3em;
	padding: 0.3em 0.6em;
	background-color: rgba(0, 0, 0, 0.3);
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 0.6em;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.chip-link:hover,
.tile-btn:hover {
	background-color: rgba(0, 0, 0, 0.55);
}

/* 편집·삭제는 평소 흐리게 두고 타일에 들어왔을 때만 또렷해진다 — 목록을 읽는
   동안 시선을 빼앗지 않으면서, 찾을 때는 늘 같은 자리에 있다. */
.tile-btn {
	opacity: 0.45;
}

.tiles article:hover .tile-btn,
.tile-btn:focus {
	opacity: 1;
}

.tile-btn.is-danger:hover {
	background-color: #a8281a;
}

.chip-code {
	font-weight: 400;
	letter-spacing: 0.05em;
	opacity: 0.8;
}

/* 상태 점 — URL 단위 상태 */
.chip-dot {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	background-color: #6b7683;   /* 폴백 = 미점검. 분류색과 겹치지 않게 */
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

.chip-dot.is-ok,        .chip-link.is-ok .chip-dot        { background-color: #35b07a; }
.chip-dot.is-auth,      .chip-link.is-auth .chip-dot      { background-color: #d99b1f; }
.chip-dot.is-down,      .chip-link.is-down .chip-dot      { background-color: #d63b2a; }
.chip-dot.is-unchecked, .chip-link.is-unchecked .chip-dot { background-color: #6b7683; }

/* Forty 는 좁은 화면에서 타일 높이를 못박고 `overflow: hidden` 을 준다
   (≤736px: `height: 16em`). 데모의 «제목 + 한 줄» 에는 맞지만 이 화면의 타일은
   분류 태그 · 제목 · 설명 · 대표 주소 · 편집까지 담아 실제로 잘렸다 —
   실측: 736px 1개, 600px 20개, 481px 49개 전부 클리핑. 내용 높이를 따르게 한다. */
@media screen and (max-width: 980px) {

	.tiles article {
		height: auto;
		min-height: 16em;
		max-height: none;
	}

}

@media screen and (max-width: 736px) {

	/* 좁은 화면에서는 보조 링크와 담당자를 접는다 — 이름·분류·대표 주소·상태가 우선 */
	.tiles article .tile-rest,
	.tiles article .tile-owner {
		display: none;
	}

	.tiles article .tile-host {
		max-width: 10em;
	}

}

/* ══════════════════════ 접속 상태 — 카드형 대시보드 상단 ══════════════════════

   원본 `ul.features` 의 «계단식 반투명 칸» 대신, 대시보드 상단의 KPI 카드 줄처럼 만든다.
   마크업은 그대로 두고(필터 동작·회귀 검사가 그대로 유지된다) 표현만 카드로 바꾼다.

   높이는 **배너를 기준**으로 맞춘다 — `--banner-h` 는 shell2026.js 가 배너를 실측해
   넣는 값이다. 다른 요소의 높이를 CSS 로 참조할 방법이 없어서 측정해 넘긴다.
   ──────────────────────────────────────────────────────────────────────────── */

/* 높이는 **내용이 정한다.**

   처음에는 `min-height: var(--banner-h)` 로 배너와 같은 높이에 묶었는데, 내용이 281px 인데
   배너가 496px 이라 위아래로 215px 이 빈 채로 남았다 — 지표를 훑는 화면에서 그 공백은
   «뭔가 빠진 것» 처럼 읽힌다. 대시보드 상단은 조밀한 것이 정상이다.

   대신 원본 밴드의 큰 세로 여백(`.wrapper` 자체의 `padding: 6em 0 4em` → 실측 104/69px)만
   덮어 카드 줄에 맞는 여백으로 바꾼다. 배너 높이 변수(`--banner-h`)는 계속 노출되므로
   나중에 다시 묶고 싶으면 min-height 한 줄로 돌아갈 수 있다. */
#status {
	padding: 0;
}

#status .inner {
	padding: 3.25em 0;
}

/* ── 섹션 머리 — 편집형(가운데·큰 제목)에서 대시보드형(좌측·컴팩트)으로 ─────────
   원본 `.special` 은 내용을 가운데 정렬하고 제목 아래에 굵은 구분선을 놓는다. 읽는
   글에는 맞지만 «지표를 훑는» 화면에서는 시선이 매번 가운데로 돌아와 느리다.
   좌측 정렬 + 제목/설명을 한 덩어리로 묶고, 점검 시각은 오른쪽 끝으로 보낸다. */

#status .inner,
#status header.major {
	text-align: left;
}

/* 세 요소를 **명시 배치**한다. 자동 배치에 맡기면 DOM 순서(h2 → p → 점검시각)대로
   1행1열 · 1행2열 · (충돌) 2행 으로 흘러 제목이 오른쪽으로 가 버린다 — 실측으로 그렇게 깨졌다. */
#status header.major {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.45em 1.5em;
	margin-bottom: 1.5em;
}

#status header.major h2 {
	grid-area: 1 / 1;
	/* 원본은 제목에 `border-bottom: solid 2px` + `padding-bottom: 1em` 으로 굵은 구분선을
	   그린다(편집형 헤더). 카드 줄이 이미 구획을 만들므로 선을 걷고 여백을 되돌린다. */
	border-bottom: 0;
	padding-bottom: 0;
	font-size: 1em;
	letter-spacing: 0.26em;
	margin: 0;
}

/* `:not(.status-checked)` 가 필수다. 이 선택자(1,1,2)는 `#status .status-checked`(1,1,0)
   보다 특이도가 높아, 제외하지 않으면 점검 시각까지 «설명문 자리(2행 1열)» 로 끌고 간다 —
   실측에서 점검 시각이 제목 옆이 아니라 설명문 자리로 갔다. */
#status header.major p:not(.status-checked) {
	grid-area: 2 / 1;
	font-size: 0.72em;
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin: 0;
	max-width: 46em;
	opacity: 0.78;
}

/* 점검 시각 — 대시보드의 «데이터 기준 시점». 오른쪽 위 고정 자리.
   선택자에 `p` 를 포함해 위 설명문 규칙과 특이도를 맞춘다. */
#status header.major p.status-checked {
	grid-area: 1 / 2;
	align-self: center;
	font-size: 0.6em;
	letter-spacing: 0.18em;
	margin: 0;
	opacity: 0.7;
	text-align: right;
	white-space: nowrap;
}

/* ── 카드 줄 ─────────────────────────────────────────────────────────────── */

#status .features {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.75em;
	margin-top: 0;
	background: transparent;
}

/* 원본이 li 마다 넣는 계단식 배경·라운딩을 끈다 — 카드는 각자 자기 표면을 갖는다 */
#status .features li {
	width: auto !important;
	padding: 0;
	background-color: transparent !important;
	border-radius: 0 !important;
}

#status .features .feature {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 1.35em 1.15em 1.15em 1.15em;
	background-color: rgba(0, 0, 0, 0.26);
	border: solid 1px rgba(255, 255, 255, 0.1);
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	line-height: inherit;
	text-align: left;
	text-transform: none;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		transform 0.18s ease;
}

/* 카드 상단의 상태 색 띠 — 값·라벨은 잉크 색으로 두고 정체성은 이 마크가 진다 */
#status .features .feature:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--card-accent, rgba(255, 255, 255, 0.35));
}

#status .features .feature:hover,
#status .features .feature:focus-visible {
	background-color: rgba(0, 0, 0, 0.36);
	border-color: rgba(255, 255, 255, 0.26);
	transform: translateY(-2px);
}

#status .features .feature.is-active {
	background-color: rgba(0, 0, 0, 0.48);
	border-color: rgba(255, 255, 255, 0.52);
}

/* 0건 카드는 «물러나» 보이면 되지만 읽히기는 해야 한다. 0.45 는 배경(틸 밴드)에 묻혀
   미점검 카드가 거의 안 보였다 — 카드 전체를 흐리는 대신 **숫자만** 덜 강조하고 카드는
   또렷하게 둔다. */
#status .features .feature.is-zero {
	opacity: 1;
}

#status .features .feature.is-zero .feature-num,
#status .features .feature.is-zero .feature-share {
	opacity: 0.5;
}

#status .features .feature.is-zero:before {
	opacity: 0.55;
}

/* 라벨 — 지표 이름. 실측 8px 은 읽기 어려웠다(자간이 넓어 더 작아 보인다) → 10.4px.
   숫자 크기는 그대로 둔다.
   em 기준은 13.87px 다 — 원본의 bare `button { font-size: 0.8em }` 을 물려받기 때문. */
#status .features .feature h3 {
	display: block;
	font-size: 0.84em;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.2;
	margin: 0 0 0.4em 0;
	opacity: 0.85;
}

/* 값 + 비중을 **한 줄에** 둔다 — 시선이 아래로 두 번 내려가지 않게.
   둘 다 inline 이라 마크업을 바꾸지 않고도 같은 줄에 앉는다. */
#status .features .feature .feature-num {
	display: inline;
	color: #fff;
	font-size: 2.6em;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1;
	margin: 0;
	/* 자릿수가 바뀌어도 카드 사이 숫자 폭이 흔들리지 않게 */
	font-variant-numeric: tabular-nums;
}

/* 비중 % — 실측 8.6px. «조금만» 키운다 → 11.4px. 숫자(36px)와 위계는 유지해야 하므로
   숫자의 1/3 선을 넘기지 않는다. */
#status .features .feature .feature-share {
	display: inline;
	margin-left: 0.4em;
	font-size: 0.88em;
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0.75;
	white-space: nowrap;
}

/* 판정 기준 — 카드 맨 아래 각주. 실측 7.6px 은 사실상 못 읽는 크기였다 → 9.7px. */
#status .features .feature p {
	display: block;
	font-size: 0.77em;
	letter-spacing: 0.01em;
	line-height: 1.55;
	margin: 0.75em 0 0 0;
	opacity: 0.7;
	text-transform: none;
}

/* 비중 바 — 카드 하나가 «지표» 로 완결되게. 숫자만 있으면 «49 중 19» 를 머리로 계산해야
   하는데, 바가 그 몫을 눈으로 보여준다. `--share` 는 JS 가 넣는다.
   dataviz 규칙대로 값·라벨은 잉크 색이고 색은 이 바와 상단 띠(정체성)만 진다. */
#status .features .feature:after {
	content: '';
	position: absolute;
	left: 1.15em;
	right: 1.15em;
	bottom: 1.15em;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.12);
}

#status .features .feature .feature-bar {
	position: absolute;
	left: 1.15em;
	bottom: 1.15em;
	z-index: 1;
	display: block;
	width: calc((100% - 2.3em) * var(--share, 0));
	height: 2px;
	background-color: var(--card-accent, #fff);
	transition: width 0.4s ease;
}

/* 바가 앉을 자리를 비워 둔다 */
#status .features .feature {
	padding-bottom: 2.6em;
}

/* «전체» 카드는 합계라 비중 바가 의미 없다 — 100% 를 그리면 다른 카드의 바를 읽는 기준이
   흐려진다. 바를 숨기고 그 자리만큼 padding 을 되돌린다. */
#status .feature-all:after,
#status .feature-all .feature-bar {
	display: none;
}

#status .feature-all {
	padding-bottom: 1.15em;
}

/* 상태색 — 카드 상단 띠에만 쓴다. 라벨이 항상 함께 있으므로 색이 홀로 의미를 지지 않는다. */
#status .feature-all        { --card-accent: rgba(255, 255, 255, 0.55); }
#status .feature-ok         { --card-accent: #0ca30c; }
#status .feature-auth       { --card-accent: #fab219; }
#status .feature-down       { --card-accent: #d03b3b; }
#status .feature-unchecked  { --card-accent: #8894a0; }

/* 숫자·라벨에는 상태색을 쓰지 않는다 — 값은 잉크 색으로 두고 정체성은 카드 상단의 색
   띠가 진다. (숫자에 색을 주면 «색이 곧 의미» 가 되어 색각 이상·흑백 출력에서 무너진다.)
   0인 카드는 `.is-zero` 의 투명도로 물러난다. */

@media screen and (max-width: 1280px) {

	#status .features .feature {
		padding: 1.2em 0.9em 1em 0.9em;
	}

	#status .features .feature .feature-num {
		font-size: 2.15em;
	}

	/* 좁아지면 각주만 접는다 — 라벨·숫자·비중은 남는다 */
	#status .features .feature p {
		display: none;
	}

}

@media screen and (max-width: 980px) {

	#status .inner {
		padding: 2.75em 0;
	}

	#status header.major {
		grid-template-columns: minmax(0, 1fr);
	}

	#status header.major h2 { grid-area: 1 / 1; }
	#status header.major p.status-checked { grid-area: 2 / 1; text-align: left; }
	#status header.major p:not(.status-checked) { grid-area: 3 / 1; }

	#status .features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

@media screen and (max-width: 736px) {

	#status .features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5em;
	}

	#status .features .feature .feature-num {
		font-size: 1.9em;
	}

}

/* ══════════════════════ 분류 칸 (ul.features) ══════════════════════

   분류는 카드가 아니라 원본의 계단식 칸을 유지한다 — 12개가 카드로 늘어서면
   화면이 카드로만 채워져 위계가 사라진다.
   ──────────────────────────────────────────────────────────────── */

#groups .features li {
	padding: 0;
}

#groups .features .feature {
	display: block;
	width: 100%;
	height: 100%;
	padding: 2em 1.5em;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	line-height: inherit;
	text-align: left;
	text-transform: none;
}

#groups .features .feature:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

#groups .features .feature.is-active {
	background-color: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0.35em 0 0 0 #fff;
}

#groups .features .feature.is-zero {
	opacity: 0.45;
}

#groups .features .feature .feature-num {
	display: block;
	font-size: 2.25em;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;
	margin: 0 0 0.35em 0;
}

#groups .features .feature h3 {
	font-size: 0.72em;
	letter-spacing: 0.2em;
	margin: 0 0 0.4em 0;
}

#groups .features .feature p {
	font-size: 0.68em;
	letter-spacing: 0.05em;
	line-height: 1.5;
	margin: 0;
	opacity: 0.75;
	text-transform: none;
}

/* 분류 칸의 색 견본 — 타일 오버레이와 같은 --cat 값을 읽는다 */
#groups .feature-swatch {
	display: block;
	width: 1.1em;
	height: 1.1em;
	margin: 0 0 0.9em 0;
	background-color: var(--cat, #8b98a5);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65);
}

@media screen and (min-width: 981px) {

	#groups .features li { width: 25%; }

}

@media screen and (max-width: 980px) {

	#groups .features li { width: 33.3333%; }

	#groups .features .feature {
		padding: 1.5em 1em;
		text-align: center;
	}

	#groups .feature-swatch {
		margin-left: auto;
		margin-right: auto;
	}

	#groups .features .feature.is-active {
		box-shadow: inset 0 0.35em 0 0 #fff;
	}

}

@media screen and (max-width: 736px) {

	#groups .features li { width: 50%; }

	#groups .features .feature .feature-num { font-size: 1.75em; }

	#groups .features .feature p { display: none; }

}

/* ══════════════════════ 찾기 — 크기를 접속 상태에 맞춘다 ══════════════════════

   실측 비교(1440px):
                        접속 상태        찾기(이전)
     섹션 제목            17.3px          23.4px   ← 한 단계 큼
     설명                 12.5px          17.3px   ← 한 단계 큼
     입력·셀렉트           –              17.3px / 높이 48px
   두 섹션이 나란히 있는데 크기 체계가 다르면 «다른 화면» 처럼 읽힌다. 접속 상태를 기준으로
   맞춘다(그쪽이 지표 화면의 기준 크기다).
   ──────────────────────────────────────────────────────────────────────────── */

#find .inner {
	padding: 1.5em 0;
}

#find header.major {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.45em 1.5em;
	margin-bottom: 1.5em;
}

#find header.major h2 {
	grid-area: 1 / 1;
	/* 원본은 제목에 `border-bottom: solid 2px` + `padding-bottom: 1em` 을 준다(편집형).
	   접속 상태와 같이 선을 걷고 크기를 맞춘다. */
	border-bottom: 0;
	padding-bottom: 0;
	font-size: 1em;
	letter-spacing: 0.26em;
	margin: 0;
}

#find header.major:after {
	display: none;
}

#find header.major p {
	grid-area: 2 / 1;
	font-size: 0.72em;
	letter-spacing: 0.04em;
	line-height: 1.6;
	margin: 0;
	max-width: 46em;
	opacity: 0.78;
}

#find header.major kbd {
	display: inline-block;
	padding: 0.1em 0.4em;
	background-color: rgba(255, 255, 255, 0.1);
	border: solid 1px rgba(255, 255, 255, 0.2);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
}

/* ── 입력 폼 ───────────────────────────────────────────────────────────────

   원본 `.row` 격자 대신 자체 격자를 쓴다. 고친 것 넷:
     ① 보이는 라벨 — 이전엔 전부 `sr-only` 라 셀렉트의 «환경 전체» 가 라벨과 현재값을
        겸해야 했다. 값을 바꾸면 무엇을 고르는 칸인지 알 수 없어진다.
     ② 셀렉트 화살표 — 원본은 FontAwesome 으로 그렸고 그 규칙이 병합 때 제거돼(무의존
        원칙) **화살표가 아예 없었다**(실측 `background-image: none`). 눌리는 칸으로
        보이지 않는다. 여기서 자체 SVG 로 그린다.
     ③ 검색창의 아이콘 + 지우기 버튼 — 무엇을 하는 칸인지, 어떻게 비우는지.
     ④ 정렬 + 방향을 한 덩어리로 — 방향 토글이 «액션» 줄에 떨어져 있어 무엇의 방향인지
        드러나지 않았다.

   높이는 한 곳(`--control-h`)에서 정하고, SC 2.5.8(24×24)보다 넉넉하게 둔다.
   ──────────────────────────────────────────────────────────────────────── */

#find .find-form {
	--control-h: 2.9em;
	--control-bg: rgba(255, 255, 255, 0.06);
	--control-line: rgba(255, 255, 255, 0.18);

	display: grid;
	grid-template-columns: minmax(0, 2.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr);
	gap: 1em;
	align-items: end;
}

#find .field {
	min-width: 0;
}

/* 보이는 라벨 — 대시보드 카드의 라벨과 같은 톤으로 묶는다 */
#find .field > label {
	display: block;
	margin: 0 0 0.5em 0;
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.18em;
	opacity: 0.66;
	text-transform: uppercase;
}

#find .field .control {
	position: relative;
	display: flex;
	align-items: stretch;
	min-width: 0;
}

/* 입력·셀렉트 공통 — 원본은 배경만 있고 테두리가 없어 «칸» 으로 안 읽혔다 */
#find input[type="search"],
#find select {
	height: var(--control-h);
	width: 100%;
	min-width: 0;
	padding: 0 0.9em;
	background-color: var(--control-bg);
	border: solid 1px var(--control-line);
	box-shadow: none;
	color: #fff;
	font-size: 0.78em;
	letter-spacing: 0.04em;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

#find input[type="search"]:hover,
#find select:hover {
	border-color: rgba(255, 255, 255, 0.34);
}

#find input[type="search"]:focus,
#find select:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: hsl(var(--accent));
	box-shadow: inset 0 0 0 1px hsl(var(--accent));
}

#find input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

/* 검색창 — 아이콘 자리와 지우기 버튼 자리를 패딩으로 확보한다 */
#find .field-search input[type="search"] {
	padding-left: 2.6em;
	padding-right: 2.4em;
}

#find .icon-search {
	position: absolute;
	top: 50%;
	left: 0.9em;
	width: 1.05em;
	height: 1.05em;
	margin-top: -0.525em;
	color: rgba(255, 255, 255, 0.5);
	pointer-events: none;
}

#find .search-clear {
	position: absolute;
	top: 0;
	right: 0;
	/* 타깃 24×24 하한(SC 2.5.8) — 아이콘만 작게 두지 않는다 */
	width: 2.3em;
	height: 100%;
	min-width: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	font-size: 1.15em;
	line-height: 1;
}

#find .search-clear:hover,
#find .search-clear:focus-visible {
	color: #fff;
}

/* 셀렉트 화살표 — 원본이 잃어버린 것을 자체 SVG 로 되살린다(무의존: data URI) */
#find select {
	padding-right: 2.4em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - 0.9em) center;
	background-size: 0.75em auto;
	cursor: pointer;
}

/* 정렬 + 방향 — 한 덩어리로 붙여 «무엇의 방향인지» 를 형태로 드러낸다 */
#find .control-group select {
	border-right-width: 0;
}

#find .control-group #sort-dir {
	flex-shrink: 0;
	width: var(--control-h);
	height: var(--control-h);
	min-height: 0;
	padding: 0;
	background-color: var(--control-bg);
	border: solid 1px var(--control-line);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-size: 0.85em;
	line-height: 1;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

#find .control-group #sort-dir:hover,
#find .control-group #sort-dir:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.34);
}

#find .actions {
	margin-top: 1.4em;
}

#find .actions .button {
	height: auto;
	min-height: 2.4em;
	padding: 0 1.3em;
	font-size: 0.68em;
	line-height: 2.4em;
	letter-spacing: 0.18em;
}

@media screen and (max-width: 1280px) {

	#find .find-form {
		grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr);
		gap: 0.8em;
	}

}

@media screen and (max-width: 980px) {

	#find .find-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#find .field-search {
		grid-column: 1 / -1;
	}

}

@media screen and (max-width: 560px) {

	#find .find-form {
		grid-template-columns: minmax(0, 1fr);
	}

}

@media screen and (max-width: 980px) {

	#find .inner {
		padding: 2.75em 0;
	}

	#find header.major {
		grid-template-columns: minmax(0, 1fr);
	}

	#find header.major p {
		grid-area: 2 / 1;
	}

}

/* ══════════════════════ 조건 칩 ══════════════════════ */

.chips {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 1.5em 0 0 0;
}

.chip {
	display: -moz-inline-flex;
	display: -webkit-inline-flex;
	display: -ms-inline-flex;
	display: inline-flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	gap: 0.5em;
	padding: 0.4em 0.8em;
	background-color: hsl(var(--accent));
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 0.65em;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.chip:hover {
	background-color: hsl(var(--accent-lo));
}

.chip-x {
	font-size: 1.3em;
	line-height: 1;
	opacity: 0.8;
}

/* ══════════════════════ 결과 수 · 빈 상태 ══════════════════════ */

.result-note {
	padding: 2.5em 0 !important;
}

.result-note .inner p {
	font-size: 0.75em;
	letter-spacing: 0.2em;
	margin: 0;
	opacity: 0.7;
	text-transform: uppercase;
}

.empty-state {
	margin: 1.5em 0 0 0;
}

.empty-state h3 {
	margin: 0 0 0.5em 0;
}

.empty-state p {
	margin: 0;
	opacity: 0.75;
}

/* ══════════════════════ 모달 ══════════════════════

   Spectral·Forty 에는 모달이 없다 — 이 프로젝트가 더하는 유일한 컴포넌트다.
   `hidden` 속성 대신 `.show` 클래스로 여닫는다 (display 지정이 UA 의
   `[hidden]{display:none}` 을 덮어써 항상 보이는 사고를 피한다).
   ────────────────────────────────────────────────────────── */

.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10002;
	display: none;
	padding: 3em 1.5em;
	background-color: rgba(20, 25, 30, 0.85);
	overflow-y: auto;
}

.modal.show {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: flex-start;
	-webkit-align-items: flex-start;
	-ms-align-items: flex-start;
	align-items: flex-start;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}

.modal-content {
	background-color: hsl(var(--slate));
	border: solid 1px rgba(255, 255, 255, 0.25);
	max-width: 46em;
	width: 100%;
}

.modal-header {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	gap: 1em;
	padding: 1.5em 2em;
	border-bottom: solid 1px rgba(255, 255, 255, 0.25);
}

.modal-header h2 {
	font-size: 1em;
	margin: 0;
}

.close-btn {
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	font-size: 1.75em;
	line-height: 1;
	padding: 0 0.25em;
}

.modal-body {
	padding: 2em;
}

.modal-body label {
	display: block;
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.2em;
	margin: 0 0 0.5em 0;
	text-transform: uppercase;
}

.form-group {
	margin: 0 0 1.5em 0;
}

.form-error {
	background-color: rgba(214, 59, 42, 0.2);
	border-left: solid 0.35em #d63b2a;
	font-size: 0.8em;
	margin: 0 0 1.5em 0;
	padding: 1em 1.25em;
	white-space: pre-line;
}

/* ══════════════════════ 결과 툴바 — 개수 + 보기 방식 ══════════════════════ */

#find .result-bar {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: center;
	align-items: center;
	gap: 0.8em 1.2em;
	margin: 1.6em 0 0 0;
	padding: 1em 0 0 0;
	border-top: solid 1px rgba(255, 255, 255, 0.14);
}

#find .result-bar .result-line {
	margin: 0;
	font-size: 0.72em;
	letter-spacing: 0.14em;
	opacity: 0.8;
	text-transform: uppercase;
}

.view-switch {
	display: -webkit-flex;
	display: flex;
	margin-left: auto;
}

/* 세그먼티드 컨트롤 — 이웃끼리 테두리를 겹쳐 «한 덩어리» 로 읽히게 한다 */
.view-btn {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 0.5em;
	/* SC 2.5.8 — 24×24 하한. 실제로는 그보다 넉넉하게 둔다 */
	min-height: 2.6em;
	padding: 0 1em;
	background-color: rgba(255, 255, 255, 0.06);
	border: solid 1px rgba(255, 255, 255, 0.18);
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	transition: background-color 0.16s ease, border-color 0.16s ease;
}

.view-btn + .view-btn {
	margin-left: -1px;
}

.view-btn svg {
	width: 1.05em;
	height: 1.05em;
	fill: currentColor;
	opacity: 0.8;
}

.view-btn:hover {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.34);
}

/* 켜진 것은 «색만» 으로 알리지 않는다 — aria-pressed 로도 알리고, 시각적으로는
   채움 + 테두리 + 아이콘 불투명도 세 축이 함께 바뀐다. */
.view-btn[aria-pressed="true"] {
	position: relative;
	z-index: 1;
	background-color: hsl(var(--accent));
	border-color: hsl(var(--accent));
}

.view-btn[aria-pressed="true"] svg {
	opacity: 1;
}

@media screen and (max-width: 560px) {

	/* 좁으면 글자를 접고 아이콘만 남긴다 — 타깃 크기는 유지한다 */
	.view-btn span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.view-btn {
		-webkit-justify-content: center;
		justify-content: center;
		width: 3.2em;
		padding: 0;
	}

}

/* ══════════════════════ 보기 방식 ══════════════════════════════════════════

   마크업은 세 방식 모두 **동일하다** — `tileHtml()` 하나만 유지하면 되고, h5u.js 의
   타일 동작(배경 승격 + 전면 앵커)도 그대로 걸린다. 바뀌는 것은 이 CSS 뿐이다.

     card  3열 격자 · 배경 이미지 · 분류색 오버레이   (원본 Forty 그대로 = 기본값)
     list  1열 조밀 행 · 이미지 없음 · 한 줄 요약
     feed  1열 전폭 · 배경 이미지 유지 · 설명 전체

   `list` 는 표면을 **불투명**하게 둬야 한다. 반투명으로 두면 뒤의 WebGL 씬이 비쳐
   대비가 «움직이는 값» 이 되어 어떤 알파를 써도 최소 대비를 약속할 수 없다.
   ──────────────────────────────────────────────────────────────────────── */

/* ── 리스트 ────────────────────────────────────────────────────────────── */

#links[data-view="list"] {
	display: block;
	background-color: hsl(var(--slate));
}

#links[data-view="list"] article {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	gap: 1.2em;
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	padding: 0.7em 1.6em 0.7em 2em;
	border-bottom: solid 1px rgba(255, 255, 255, 0.09);
	/* h5u.js 가 인라인으로 올린 배경이라 !important 로만 이긴다 */
	background-image: none !important;
}

#links[data-view="list"] article:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

/* 분류색은 전면 오버레이(:before) 대신 상태 띠 옆의 얇은 표시로 바꾼다 */
#links[data-view="list"] article:before {
	left: 0.5em;
	width: 0.3em;
	opacity: 1;
}

#links[data-view="list"] article:after {
	display: none;
}

#links[data-view="list"] article .tile-tag {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	margin: 0;
	width: 9em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 이름과 설명을 **한 줄에** 놓는다 — 행 높이를 낮추는 것이 이 방식의 목적이다.
   두 줄로 두면 행이 104px 이 되어 «조밀한 목록» 이 아니게 된다(실측). */
#links[data-view="list"] article header.major {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: baseline;
	align-items: baseline;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	gap: 1em;
	min-width: 0;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

/* Spectral 은 제목에 `padding-bottom: 1em` + `::after` 1px 밑줄을 준다(실측 h3 42px).
   카드에서는 장식이지만 한 줄 행에서는 높이의 절반을 먹는다. */
#links[data-view="list"] article header.major h3 {
	-webkit-flex: 0 1 auto;
	flex: 0 1 auto;
	max-width: 24em;
	margin: 0;
	padding: 0;
	font-size: 0.95em;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#links[data-view="list"] article header.major h3:after {
	display: none;
}

#links[data-view="list"] article header.major p {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 0.68em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#links[data-view="list"] article .tile-foot {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	width: auto;
	margin: 0;
	padding: 0;
	border-top: 0;
}

/* 편집·삭제는 이 방식에서 늘 또렷하게 둔다 — 행 hover 로만 드러내면
   좁은 화면(hover 없음)에서 찾을 수 없다 */
#links[data-view="list"] article .tile-btn {
	opacity: 0.7;
}

@media screen and (max-width: 980px) {

	#links[data-view="list"] article .tile-tag {
		display: none;
	}

	#links[data-view="list"] article {
		padding-left: 1.6em;
	}

}

@media screen and (max-width: 736px) {

	#links[data-view="list"] article .tile-host {
		display: none;
	}

}

/* ── 피드 ──────────────────────────────────────────────────────────────── */

#links[data-view="feed"] article {
	width: 100%;
	height: auto;
	min-height: 13em;
	max-height: none;
	padding: 2.5em 3em 2em 3em;
}

#links[data-view="feed"] article + article {
	border-top: solid 1px rgba(255, 255, 255, 0.12);
}

#links[data-view="feed"] article header.major h3 {
	font-size: 1.35em;
}

#links[data-view="feed"] article header.major p {
	font-size: 0.85em;
	max-width: 48em;
}

@media screen and (max-width: 736px) {

	#links[data-view="feed"] article {
		padding: 2em 2em 1.5em 2em;
	}

}

@media screen and (max-width: 736px) {

	/* 좁으면 한 줄에 이름·설명을 다 못 담는다 — 설명을 접고 이름만 남긴다 */
	#links[data-view="list"] article header.major p {
		display: none;
	}

}