/* ============================================================
   hub.css — /blog/ 통합 허브 (238lab 통합 Phase 1·2)
   칼럼·가이드·용어를 한 화면에 모으는 층. 카드 자체는 column-list.css 의
   .kdc-* 를 그대로 쓰고, 여기서는 **허브 골격과 카드 변형만** 정의한다.
   Tailwind 유틸을 새로 쓰지 않는다(정적 빌드라 재빌드 전까지 무스타일로 나간다).
   톤은 용어사전(glossary.css)과 같은 모노톤 화이트 + 강조 1색.
   ============================================================ */

/* 고정 헤더 오프셋을 Tailwind 임의값(pt-[var(--header-h)]) 대신 여기서 준다.
   테마에 Tailwind 빌드 스크립트가 없어 새 유틸을 쓰면 무스타일로 나간다. */
.kh-root { background: #fff; padding-top: var(--header-h, 100px); padding-bottom: 96px; }
.kh-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .kh-wrap { padding: 0 48px; } }

/* 전역 `* { letter-spacing:-0.04em }`·`background-size:cover` 되돌리기.
   .kdc-scope 와 같은 이유이고, 허브 루트는 두 클래스를 함께 단다. */
.kh-root [class*="kh-"] { background-size: auto; }

/* ---------- 헤더 ---------- */
.kh-hero { padding: 40px 0 28px; border-bottom: 1px solid #f1f3f5; margin-bottom: 28px; }
.kh-hero__title { margin: 0 0 14px; font-size: 34px; font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #111827; word-break: keep-all; }
@media (min-width: 768px) { .kh-hero__title { font-size: 42px; } }
/* 260915 D1: `.kh-hero__count`(가이드 79편 · 칼럼 9편 …) 삭제. pill 나브가 같은 숫자를 갖고 있다. */
.kh-hero__lede { max-width: 680px; margin: 0; font-size: 16px; line-height: 1.75; color: #6b7280; word-break: keep-all; }

/* ---------- 종류 내비(알약) ----------
   개수 span(`마케팅 가이드 79`)은 260916 소칸 항목3 으로 뺐다. 대분류·카테고리 칩도 같다.
   숫자가 붙어 있던 규칙 5개를 함께 지웠다(매칭 대상이 사라져 죽은 규칙이 된다).
   용어사전 계열만 예외로 숫자를 남긴다(`.kh-tcol__t span`, glossary.css 의 `.kdg-chip span`). */
.kh-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; }
.kh-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: #374151; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.kh-nav a:hover { border-color: #111827; color: #111827; }
.kh-nav a.is-on { background: #111827; border-color: #111827; color: #fff; }

/* ---------- 2단 레이아웃 ----------
   238lab 은 사이드바를 `hidden lg:block` 으로 모바일에서 통째로 숨긴다.
   우리는 숨기지 않는다. 좁아지면 본문 아래로 내려보낸다(order). */
.kh-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
@media (max-width: 1100px) {
  .kh-layout { grid-template-columns: 1fr; gap: 48px; }
  .kh-side { order: 2; }
  .kh-main { order: 1; }
}

.kh-side { position: sticky; top: calc(var(--header-h, 100px) + 24px); display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 1100px) { .kh-side { position: static; } }

/* ---------- 섹션 ---------- */
.kh-sec { margin: 0 0 64px; }
.kh-sec:last-child { margin-bottom: 0; }
/* 260916 소칸 항목4: h2 아래 구분선을 뺐다. 섹션마다 제목 밑에 회색 줄이 그어져 있으면
   화면이 가로줄로 토막나 보이고, 카드 목록 자체가 이미 행 구분선을 갖고 있어 줄이 두 겹이었다.
   줄을 지우면서 padding-bottom(12px)도 함께 지운다. 줄이 없는 여백은 margin 하나로 충분하다. */
.kh-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
/* 260915 D2·D3·D4: `.kh-sechead__t small`(실행 순서가 정해진 글 …)·`.kh-sec__lede` 삭제.
   섹션 제목 옆 설명 한 줄은 제목이 이미 말한 것을 풀어 쓴 것뿐이었다. */
.kh-sechead__t { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: #111827; }
.kh-sechead__t a { color: inherit; text-decoration: none; }
.kh-sechead__t a:hover { color: var(--primary-color, #ff4343); }
.kh-sechead__more { flex-shrink: 0; font-size: 14px; font-weight: 600; color: #6b7280; text-decoration: none; }
.kh-sechead__more:hover { color: var(--primary-color, #ff4343); }

/* F3: CTA 아래로 내려온 전폭 섹션(용어사전). kh-layout 밖이라 사이드 패널이 붙지 않는다. */
.kh-sec--full { margin: 64px 0 0; }

/* ============================================================
   대표 콘텐츠 캐러셀 (.kh-feat / .khs) · 260916 소칸 항목1
   피처드 카드는 kh-layout **밖**, pill 나브 바로 아래에 전폭으로 선다.
   앞 판은 kh-main 안에 있어서 우측 300px 를 「많이 읽은 글」이 차지했고, 대표 콘텐츠가
   본문 카드 한 장과 같은 폭으로 눌려 있었다. kh-layout 밖으로 빼면 사이드바 셀 자체가
   시작되지 않으므로 침범이 구조적으로 불가능하다(용어사전 섹션과 같은 방식이다).
   4초 자동 넘김 + 좌우 버튼 + 하단 인디케이터. 슬라이드가 1장이면 JS 가 버튼·점을 숨긴다.
   ============================================================ */
.kh-feat { margin: 0 0 56px; }
.khs { position: relative; }
.khs__viewport { overflow: hidden; border-radius: 20px; }
/* transform 으로만 움직인다. left/margin 은 레이아웃을 매 프레임 다시 계산한다. */
.khs__track { display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
.khs__slide { flex: 0 0 100%; display: flex; min-width: 0; }
/* 슬라이드 높이는 가장 긴 카드가 정한다(flex stretch). 넘길 때 높이가 튀지 않는다. */
.khs__slide .kdc-featured { flex: 1; min-width: 0; margin: 0; }
.kh-root .khs__slide .kdc-featured-link { height: 100%; border-radius: 0; }

/* 좌우 버튼. 이미지 위(좌)와 본문 칸 위(우)에 얹힌다. */
.khs__arrow { position: absolute; top: 50%; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; padding: 0; border: 1px solid #e5e7eb; border-radius: 999px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #374151; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); transition: background .15s, color .15s, border-color .15s; }
.khs__arrow:hover { background: #fff; border-color: #111827; color: #111827; }
.khs__arrow:focus-visible { outline: 2px solid var(--primary-color, #ff4343); outline-offset: 2px; }
.khs__arrow--next { right: 14px; }
.khs__arrow svg { width: 18px; height: 18px; }

/* 하단 인디케이터. 현재 칸만 막대로 늘어난다. */
.khs__dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
.khs__dot { position: relative; width: 8px; height: 4px; padding: 0; border: 0; border-radius: 999px; background: #e5e7eb; cursor: pointer; transition: width .25s, background .25s; }
/* 4px 짜리 점은 손가락으로 못 누른다. 보이는 크기는 그대로 두고 누를 수 있는 칸만 넓힌다. */
.khs__dot::after { content: ""; position: absolute; inset: -10px -4px; }
.khs__dot.is-on { width: 30px; background: #111827; }
.khs__dot:focus-visible { outline: 2px solid var(--primary-color, #ff4343); outline-offset: 4px; }

/* 모바일은 버튼을 숨기고 손가락 스와이프 + 인디케이터로 넘긴다.
   ≤768px 에서 피처드가 1열로 쌓여(column-list.css:653) 카드 세로 중앙이 본문 한가운데가
   되는데, 거기 버튼을 얹으면 제목 글자를 가린다. */
@media (max-width: 768px) {
  .kh-feat { margin-bottom: 40px; }
  .khs__arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .khs__track { transition: none; }
}

/* ---------- 카드 배치 ---------- */
.kh-rows { display: flex; flex-direction: column; gap: 4px; }
.kh-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
@media (max-width: 768px) { .kh-grid2 { grid-template-columns: 1fr; } }

/* ---------- 가로형 카드 변형 (.kdc-item--row) ----------
   238lab 목록 카드와 같은 형태: 좌측 정사각 소형 썸네일 + 우측 제목·발췌·메타.
   기본 .kdc-item 은 세로형이라 여기서만 덮어쓴다. */
.kdc-item--row { border-bottom: 1px solid #f4f5f7; }
.kdc-item--row:last-child { border-bottom: 0; }
/* 260916 소칸 항목2: 가로형 카드의 둥근 테두리 상자를 없앤다(column-list.css:303 의
   `.kdc-item-link { border:1px; border-radius:20px }` 를 이 변형에서만 되돌린다).
   목록의 행 구분선과 카드 테두리가 겹쳐 한 줄에 선이 두 겹으로 보였고, 테두리 안쪽
   1px 만큼 글이 밀려 섹션 제목과 카드 글줄의 왼쪽 끝이 어긋나 있었다. 테두리를 지우면
   본문이 섹션 좌우 끝에 그대로 맞는다. hover 의 들림(translateY)·그림자도 함께 끈다.
   상자가 없는데 떠오르면 무엇이 떠오르는지 읽히지 않는다. 반응은 제목 색 하나로 남긴다.
   ⚠️ 알약 칩(.kh-cats)은 대상이 아니다(항목3 — 그대로 둔다). */
.kdc-item--row .kdc-item-link { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.kdc-item--row .kdc-item-link:hover { transform: none; box-shadow: none; border-color: transparent; }
/* 썸네일 폭 148px 을 300px 로 키운다(260916 소칸 항목4).
   148px 슬롯은 높이가 78px 인데 제목 + 발췌 2줄 + 메타가 110px 을 넘는다. 그래서 썸네일
   위아래로 빈 자리가 남아 카드가 허전해 보였다("칼럼도 상/하단이 비어 허전해").
   게다가 가이드 대표이미지는 글자가 박힌 자동생성 카드라 148px 에서는 글자가 안 읽혀
   빈 사각형으로 보인다. 소칸이 "딱 알맞다"고 한 허브 칼럼 그리드 카드가 340px 다. */
.kdc-item--row .kdc-item-link { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 0; }
.kdc-item--row .kdc-item-img { aspect-ratio: 1200 / 630; border-radius: 10px; overflow: hidden; }
.kdc-item--row .kdc-item-info { padding: 0; }
.kdc-item--row .kdc-item-tit { margin: 0 0 6px; font-size: 17px; line-height: 1.45; }
.kdc-item--row .kdc-item-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: #6b7280; word-break: keep-all; }
/* 260915 D5: 이미지 위 뱃지를 없애고 메타 한 줄(`카테고리 | 2026.09.11`)로 바꿨다. */
/* 폭이 줄면 썸네일도 함께 줄인다. 300px 를 그대로 두면 텍스트 칸이 먼저 무너진다. */
@media (max-width: 1100px) { .kdc-item--row .kdc-item-link { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 860px)  { .kdc-item--row .kdc-item-link { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; } }
@media (max-width: 560px) {
  .kdc-item--row .kdc-item-link { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .kdc-item--row .kdc-item-tit { font-size: 15.5px; }
  .kdc-item--row .kdc-item-desc { display: none; }
}

/* ---------- 카드 메타 한 줄 (D5 · 238lab 방식) ----------
   `카테고리 | 2026.09.11`. 피처드·그리드·가로형·컴팩트가 같은 마크업을 쓴다.
   기본 .kdc-item-meta 의 gap(10px)은 구분자 `|` 양쪽을 너무 벌려 놓는다. */
.kh-root .kdc-item-meta { gap: 6px; }
.kh-root .kdc-item-cat { font-weight: 600; color: var(--kdc-sub, #6b7280); }
.kh-root .kdc-item-sep { color: #d1d5db; font-weight: 400; }
.kh-root .kdc-featured-meta { margin-top: 2px; }

/* ---------- 사이드 박스 ---------- */
.kh-box { border: 1px solid #f1f3f5; border-radius: 14px; padding: 20px; background: #fff; }
.kh-box__t { margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: #111827; }

/* 인기글 — 조회수 숫자는 표시하지 않는다. 순번만 쓴다. */
.kh-pop { display: flex; flex-direction: column; gap: 2px; }
/* hover 는 성공사례 카드(.kh-case__i)와 같은 처리를 쓴다. 같은 사이드바 안에서
   어떤 줄은 반응하고 어떤 줄은 안 하면 클릭할 수 있는 줄인지 읽히지 않는다(260916 소칸 항목2).
   좌우 여백을 음수 마진으로 빼서, 배경이 켜질 때 글자가 밀리지 않게 한다. */
.kh-pop__i { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 -10px; padding: 9px 10px; border-top: 1px solid #f7f8f9; border-radius: 9px; text-decoration: none; transition: background .15s; }
.kh-pop__i:first-child { border-top: 0; }
.kh-pop__i:hover { background: #f6f7f8; }
.kh-pop__n { font-size: 13px; font-weight: 700; line-height: 1.5; color: #d1d5db; font-variant-numeric: tabular-nums; }
.kh-pop__i:nth-child(-n+3) .kh-pop__n { color: var(--primary-color, #ff4343); }
.kh-pop__b { min-width: 0; }
.kh-pop__k { display: block; margin: 0 0 2px; font-size: 11.5px; font-weight: 600; color: #9ca3af; }
.kh-pop__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.5; color: #374151; word-break: keep-all; }
.kh-pop__i:hover .kh-pop__t { color: #111827; }
.kh-pop__i:hover .kh-pop__k { color: var(--primary-color, #ff4343); }

/* 성공사례 */
.kh-case { display: flex; flex-direction: column; gap: 10px; }
.kh-case__i { display: block; padding: 13px 14px; border: 1px solid #eef0f2; border-radius: 11px; text-decoration: none; transition: border-color .15s, background .15s; }
.kh-case__i:hover { border-color: #d8dbe0; background: #fbfcfd; }
.kh-case__k { display: block; margin: 0 0 5px; font-size: 11.5px; font-weight: 600; color: var(--primary-color, #ff4343); }
.kh-case__t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.55; font-weight: 500; color: #374151; word-break: keep-all; }

/* ---------- 용어사전 블록 ---------- */
.kh-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
@media (max-width: 900px) { .kh-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kh-terms { grid-template-columns: 1fr; } }
.kh-tcol__t { display: flex; align-items: baseline; gap: 7px; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid #f1f3f5; font-size: 14px; font-weight: 700; color: #111827; text-decoration: none; }
.kh-tcol__t span { font-size: 12px; font-weight: 500; color: #9ca3af; }
.kh-tcol__t:hover { color: var(--primary-color, #ff4343); }
.kh-tlist { display: flex; flex-direction: column; gap: 1px; }
.kh-tlist a { display: block; margin: 0 -10px; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 1.55; color: #4b5563; text-decoration: none; word-break: keep-all; transition: background .15s, color .15s; }
.kh-tlist a:hover { background: #f6f7f8; color: #111827; }
.kh-tlist a:hover em { color: #6b7280; }
.kh-tlist a em { font-style: normal; color: #9ca3af; font-size: 12.5px; }

/* ---------- 가이드 대분류 바로가기 ---------- */
.kh-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .kh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kh-cats { grid-template-columns: 1fr; } }
.kh-cats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid #eef0f2; border-radius: 11px; font-size: 14.5px; font-weight: 600; color: #374151; text-decoration: none; transition: border-color .15s, color .15s; }
.kh-cats a:hover { border-color: #111827; color: #111827; }

/* ---------- 하단 CTA ---------- */
.kh-cta { margin-top: 72px; padding: 34px 28px; border: 1px solid #f1f3f5; border-radius: 16px; background: #fafbfc; text-align: center; }
.kh-cta__t { margin: 0 0 6px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #111827; word-break: keep-all; }
.kh-cta__s { margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: #6b7280; word-break: keep-all; }
.kh-cta__b { display: inline-block; padding: 13px 28px; border-radius: 8px; background: var(--primary-color, #ff4343); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.kh-cta__b:hover { background: var(--primary-hover, #e63939); }

/* ---------- 목록 페이지(가이드 아카이브) 공용 ---------- */
/* 260916: `.kh-sec--tight` 를 지웠다. 유일한 사용처가 /blog/ 의 피처드 섹션이었는데
   그 섹션이 캐러셀(.kh-feat)로 바뀌면서 매칭 대상이 0개가 됐다. */

/* ---------- 컴팩트 카드 (이미지 없음 · 가이드 아카이브 79편) ----------
   목록에 썸네일을 넣지 않는 이유: EWWW 가 wp-post-image 를 lazyload 에서 제외해
   두었고(ops/og_cards/README.md), 그 판정의 근거가 "목록 템플릿은 대표이미지를
   쓰지 않는다" 였다. 게다가 79장을 넣으면 모바일 문서 높이를 줄이려던 목표와 반대로 간다. */
.kdc-item--compact { border-bottom: 1px solid #f4f5f7; }
.kdc-item--compact:last-child { border-bottom: 0; }
.kdc-item--compact .kdc-item-link { display: block; padding: 15px 2px; border-radius: 8px; transition: background .15s; }
.kdc-item--compact .kdc-item-link:hover { background: #fafbfc; }
.kdc-item--compact .kdc-item-tit { margin: 0 0 5px; font-size: 16px; font-weight: 600; line-height: 1.5; color: #111827; }
.kdc-item--compact .kdc-item-link:hover .kdc-item-tit { color: var(--primary-color, #ff4343); }
.kdc-item--compact .kdc-item-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 7px; font-size: 14px; line-height: 1.7; color: #6b7280; word-break: keep-all; }
.kdc-item--compact .kdc-item-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #9ca3af; }
.kdc-item--compact .kdc-item-tag { font-weight: 600; color: #6b7280; }

/* ---------- 오늘의 용어 위젯(사이드) ---------- */
.kh-quiz { border: 1px solid #f1f3f5; border-radius: 14px; padding: 20px; background: #fafbfc; }
.kh-quiz .kn-fin { margin: 0; padding: 0; border: 0; background: none; }

/* ---------- 피처드: 이미지 칸이 텍스트 칸보다 낮아지는 문제 (260916 소칸 항목4) ----------
   피처드는 `이미지 | 본문` 2열이고 행 높이는 둘 중 높은 쪽이 정한다. 슬롯을 1200/630 으로
   맞추면서 이미지 칸(195px)이 본문 칸(261px)보다 낮아졌고, 그 차이 66px 가 이미지 아래
   회색 덩어리로 남았다. 이미지를 늘려 채우면 좌우가 잘려 제목 글자가 날아간다(칸 비율 1.42,
   이미지 1.905). 그래서 **이미지 칸을 넓혀 키우고, 남는 차이는 위아래로 나눠** 여백처럼 보이게 한다. */
/* ⚠️ 769px 이상에서만 건다. column-list.css:651 이 768px 이하에서 피처드를 1열로 쌓는데,
   폭 조건 없이 덮으면 모바일에서도 2열이 유지돼 본문 칸이 140px 로 눌린다(실측). */
@media (min-width: 769px) {
  .kh-root .kdc-featured-link { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
  .kh-root .kdc-featured-body { padding: 30px 34px; }
}
@media (min-width: 769px) and (max-width: 900px) { .kh-root .kdc-featured-body { padding: 24px 22px; } }
/* 1열로 쌓인 모바일 피처드는 이미지가 전폭이라 슬롯도 원본 비율로 둔다(16:9 예외 무효화). */
@media (max-width: 768px) { .kh-root .kdc-featured-img { aspect-ratio: 1200 / 630; } }

/* ---------- 슬롯을 원본 비율에 맞춘다 (260915 소칸 F2) ----------
   앞 판(260914)은 반대로 했다. 슬롯을 16:9·16:10·4:3 으로 두고 가이드 이미지만
   `object-fit: contain` + 회색 배경으로 되돌렸는데, 그러면 위아래에 회색 띠가 남고
   칼럼 쪽은 `cover` 라 서브카피가 잘렸다. 자르지도 띠를 두지도 않는 답은 하나다.
   **슬롯을 원본에 맞추는 것**이다. 썸네일 전량이 OG 카드 1200x630(=1.905)이라
   그 값을 슬롯에 그대로 주면 cover 로도 한 픽셀도 잘리지 않는다.
   이미지를 다시 굽지 않고 CSS 로 끝난다. 원본이 16:9 인 칼럼 3편만 상하 3% 잘린다. */
.kh-root .kdc-item-img,
.kh-root .kdc-featured-img { aspect-ratio: 1200 / 630; }
.kh-root .kdc-item-img img,
.kh-root .kdc-featured-img img { object-fit: cover; background: transparent; }

/* ============================================================
   목록 페이지 공용 (/guide/ · /column/) · 260915 허브 통일 2차
   앞 판의 좌측 sticky 트리(.kh-tree)·즉시검색(.kh-find)·접히는 소분류(.kh-gsub)·
   2열 묶음(.kh-gcards)·eyebrow 는 통째로 뺐다. 세 하위 페이지가 /blog/ 와 다른
   얼굴이었던 원인이 그 장치들이었고(소칸 F1), 지금은 네 화면이 같은 셸을 쓴다.
   탐색은 pill 나브 + 대분류 칩 + 페이지네이션 셋으로 충분하다.
   ============================================================ */

/* 대분류 칩의 현재 선택 상태 */
.kh-cats a.is-on { border-color: #111827; background: #111827; color: #fff; }
.kh-cats--gap { margin-top: 22px; }

/* 페이지네이션. 골격은 column-base.css:158 의 .kdc-pagination 을 그대로 쓴다. */
.kh-root .kdc-pagination { margin-top: 40px; }

/* 목록 위 도구 줄(칩 + 검색 폼)
   .kh-cats 의 기본형은 허브 본문의 3열 박스다. 도구 줄에서는 그 모양이 맞지 않는다.
   칸이 3개로 고정돼 네 번째 칩이 혼자 다음 줄로 떨어지고, 그 빈 칸 옆에 검색 폼이 뜬다.
   여기서만 pill 나브와 같은 알약 줄로 되돌린다(같은 줄에 있는 두 장치의 모양을 맞춘다). */
.kh-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 24px; }
.kh-tools .kh-cats { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; }
.kh-tools .kh-cats a { justify-content: flex-start; gap: 6px; padding: 8px 15px; border-radius: 999px; font-size: 14px; }
.kh-tools .kdc-search { flex: 0 0 auto; width: 236px; margin: 0; }
@media (max-width: 560px) { .kh-tools .kdc-search { width: 100%; } }

.kh-gempty { padding: 48px 0; text-align: center; font-size: 15px; color: #9ca3af; }