/* 2026-09-08: 카테고리 목록형 게시판 (칸반 231)
   목록 = 상단 분류 탭 + 검색 + 텍스트 목록(board.css 의 .post-list 재사용).
   탭 모양은 board-gallery-category.css 와 같게 두되 스코프만 .list-category-page 다 —
   그쪽은 썸네일 전용 CSS 를 통째로 물고 있어 목록형에서 불러올 수 없다. */

/* ── 상단 카테고리 탭 ── */
.list-category-page .category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--spacing-2xl, 32px);
  border: 1px solid var(--border-medium, #ddd);
  border-radius: 8px;
  overflow: hidden;
}
.list-category-page .category-tab {
  appearance: none;
  flex: 1 1 0;
  min-width: 120px;
  border: none;
  border-right: 1px solid var(--border-medium, #ddd);
  background: var(--bg-white, #fff);
  color: var(--text-light, #666);
  padding: 14px 18px;
  font-size: var(--font-small, 16px);
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.list-category-page .category-tab:last-child { border-right: none; }
.list-category-page .category-tab:hover { color: var(--accent-tertiary, #294579); }
.list-category-page .category-tab.active {
  background: var(--accent-tertiary, #294579);
  color: #fff;
}

/* ── 분류 제목 ── */
.list-category-page .category-list-head {
  margin: var(--spacing-2xl, 32px) 0 var(--spacing-lg, 24px);
  padding-bottom: var(--spacing-md, 16px);
  border-bottom: 2px solid var(--border-dark, #333);
}
.list-category-page .category-list-title {
  margin: 0;
  /* base.css 의 전역 `h2 { font-size: ... !important }` 를 이겨야 선언값이 적용된다 (칸반 079 와 같은 사유) */
  font-size: var(--font-h3, 24px) !important;
  font-weight: 700;
  color: var(--text-dark, #222);
}

/* ── 목록 비었을 때 ── */
.list-category-page .category-empty {
  padding: 50px 0;
  text-align: center;
  color: var(--text-light, #666);
}

@media (max-width: 860px) {
  .list-category-page .category-tab {
    min-width: 0;
    flex: 1 1 33%;
    padding: 12px 10px;
    font-size: var(--font-xs, 14px);
  }
}