/* ═══════════════════════════════════════════════════════════════════════════
 * 모바일 첫 화면 밀도 — 진단 2026-07-30 A-2 · C-1 · C-2 (2차)
 * ───────────────────────────────────────────────────────────────────────────
 * 증상(진단): 자료실 허브 @390에서 **첫 화면(844px)에 자료가 한 장도 안 보인다**.
 *   필터가 세로로 18줄 쌓여 721px, 첫 카드가 y=1,149. @768은 오히려 더 나빠
 *   문서가 7,619px(필터가 1열로 떨어져 가로 70%를 버린다).
 *
 * 첫 화면 예산을 분해해 보니 원인이 필터만이 아니었다(@390 실측):
 *   헤더 61 + 히어로 263 + 섹션 여백 80 + 필터 721 → 첫 카드 1,149
 *   히어로 263 = 브레드크럼 53 + 여백 16 + h1 34 + 여백 16 + 설명문 96 + 하단 48
 *
 * 🔑 **모바일 타입·여백 스케일이 사실상 없다**(2026-07-30 전수 실측). 9개 요소 중
 *   폭에 따라 갈리는 건 3개뿐이고 의미 있는 건 h1(50→28)뿐 — 브레드크럼 16px,
 *   히어로 설명문 14px, **필터 헤딩 22px**, 카드 발췌 16px, 푸터 15px은 전 폭 동일.
 *   특히 필터 헤딩 22px은 데스크톱 사이드바 치수(`--resource-filter-h3-size`,
 *   석현 15번)가 모바일까지 그대로 내려온 것이다.
 *
 * 실효(prod 실측, @390 → @768):
 *   필터 721 → 232 / 232 · 히어로 263 → 199 / 151 · 첫 카드 1,149 → 529 / 481
 *   필터 링크 히트 19px × 18개 전부 AA 미달 → 36px × 18개 전부 충족
 *
 * ⚠️ **쿠키 동의 배너가 남는다.** @390에서 배너가 y=522부터 아래 342px(화면의 40%)를
 *   덮으므로 첫 카드 529는 **첫 방문 화면에서는 여전히 안 보인다**(@768은 배너 상단이
 *   594라 113px 보인다). 배너 높이는 CookieYes **설정**이라 코드 밖이고 별도 항목이다.
 *   여기서 "첫 화면에 자료가 들어온다"고 쓰지 않는 이유다.
 *
 * 🚨 **전부 ≤991 스코프다.** 허브 필터 정렬은 김석현 이사님 스펙 15·16번으로 픽셀까지
 *   맞춰 0727 배포된 영역(`design-260708.css` §C, `@media (min-width:992px)`)이라,
 *   폭 조건 없이 건드리면 그 작업이 깨진다. 검증기가 ≥992 불변을 따로 단언한다
 *   (`scripts/test/mobile-p2/verify_hub_density.py` ⑥ · `verify_hub_1516.py`).
 *
 * 값은 전부 **실측 박스에서 유도**했다 — 추정으로 넣었다가 히어로가 263 → 311로
 * 오히려 커진 판이 있었다(padding이 0인 곳에 padding을 더했다). 아래 주석의 「지금」이
 * 그 실측값이다.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

	/* ── 전역 히어로 밀도 ────────────────────────────────────────────────────
	 * 브레드크럼은 **전 페이지 53px 고정**이었다(허브·택소노미·블로그·서비스·About·
	 * 문서형 전부 동일). 16px 텍스트 24px 줄 + 상하 16/16 패딩 = 데스크톱 값 그대로.
	 * 허브만 얇게 하면 페이지끼리 높이가 갈려 새 불일치를 만들므로 전역으로 간다. */
	.page-breadcrumb ul,
	.page-breadcrumb p {
		padding-top: 6px;    /* 지금 16 */
		padding-bottom: 6px; /* 지금 16 */
	}

	/* h1 ↔ 설명문 사이 여백은 인접 마진이 합쳐지므로(실측 간격 16) 양쪽을 같이 줄인다. */
	.page-header h1 {
		margin-top: 8px;    /* 지금 16 */
		margin-bottom: 8px; /* 지금 16 */
	}

	.page-header .page-title > h4,
	.page-header .page-title > p {
		margin-top: 8px;    /* 지금 16 */
		margin-bottom: 8px; /* 지금 16 */
	}

	.page-header .page-title {
		padding-bottom: 12px; /* 지금 32 */
	}

	/* ── 자료실 필터 ─────────────────────────────────────────────────────────
	 * `#resources-filter`는 **허브(post-type-archive-case_studies)와 택소노미 랜딩
	 * (tax-casetype-categories) 두 곳에만** 있다(실측). 블로그 아카이브도
	 * `.sidebar-menu`를 쓰지만 이 ID 안이 아니라 안 걸린다 — `.sidebar-menu`를 맨
	 * 셀렉터로 잡으면 안 된다는 기존 경고(design-260708.css §C)와 같은 이유다. */

	/* 히어로 하단 → 필터 사이의 빈칸. 근원 = index.css
	 * `.post-type-archive-case_studies section{padding-top:5rem}` = 80px.
	 * ≥992의 111px(석현 16번)은 별도 규칙이라 무접촉. */
	section:has(#resources-filter) {
		padding-top: 24px; /* 지금 80 */
	}

	#resources-filter .sidebar-menu {
		margin-bottom: 14px; /* 지금 24 */
	}

	/* 데스크톱 사이드바 치수(22px)가 모바일까지 내려와 있던 것. ≥992는 변수가 계속 쓴다. */
	#resources-filter .sidebar-menu h3 {
		font-size: 16px;     /* 지금 22 */
		line-height: 1.2;
		margin-bottom: 8px;  /* 지금 16 */
	}

	/* 축마다 한 줄 가로 스크롤(레일). 세로를 가장 아끼면서 **축 3개가 계속 보인다** —
	 * 자료실은 유형·산업으로 찾아 들어오는 페이지라 필터 자체가 안내 역할을 한다.
	 * (접기 방식은 더 짧지만 무엇이 있는지 안 보여서 기각.) */
	#resources-filter .resources-filter-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#resources-filter .resources-filter-container::-webkit-scrollbar {
		display: none;
	}

	#resources-filter .resources-filter-container ul.resources-filter {
		display: flex;
		flex-wrap: nowrap;
		width: max-content;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#resources-filter .resources-filter-container .menu-item {
		margin: 0;
		padding: 0;
	}

	/* 알약 = 히트 영역이 곧 배경이라 눈에 보이는 것과 누를 수 있는 것이 일치한다.
	 * 19px → 36px (WCAG 2.2 SC 2.5.8 최소 24px 충족, HIG 권장 44에는 못 미침 —
	 * 44로 키우면 축 3개가 다시 세로를 먹는다). */
	#resources-filter .resources-filter-container .menu-item > a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		padding: 7px 14px;
		border: 1px solid #e2e8f0;
		border-radius: 999px;
		line-height: 1.2;
		font-size: 14px;
		color: #333;
		text-decoration: none;
		white-space: nowrap;
	}

	/* 선택 상태 — 종전은 `font-weight:700`뿐(resources-hub.css:13)이라 알약 위에서는
	 * 약하다. 브랜드 블루 채움으로 바꾼다(#0072ce = FAQ 질문 색과 같은 CI 블루). */
	#resources-filter .resources-filter-container .menu-item.current-menu-item > a {
		background: #0072ce;
		border-color: #0072ce;
		color: #fff;
	}
}