/*
 * 저널 목록 (pages/journal-list.html) — 전체 목록, 카테고리별 목록, 검색 결과가 함께 쓴다
 *
 * 순서는 6개 언어 공통이다 (공통 문서 00_공통.md 4장):
 *   제목 + 한 줄 설명 → 도구 줄(검색창 · 카테고리 탭 · 글 개수) → 카드 목록 → 페이지 번호 → Contact 섹션
 * 요약이 보이는 카드로 보여 준다: 모바일 줄 목록 → 태블릿 2열 → 데스크톱 3열.
 * 카드가 길어진 만큼 제목·탭 영역의 간격을 줄여, 첫 화면에 다음 줄 사진이 걸쳐 보이게 한다.
 */

/* 화면 머리: 왼쪽에 제목과 설명, 오른쪽에 검색창. 좁은 화면에서는 위아래로 쌓는다 */
.bj-list-head {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-10);
}

.bj-list-head__title {
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-line-height);
  letter-spacing: var(--text-display-letter-spacing);
}

.bj-list-head__desc {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-lead-size);
}

/* 도구 줄: 카테고리 탭 + 글 개수 */
.bj-main > .bj-list-tools {
  margin-top: var(--space-6);
}

.bj-list-tools__count {
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
}

.bj-main > .bj-list-body {
  margin-top: var(--space-4);
}

.bj-list-body__pagination {
  margin-top: var(--space-16);
}

/* 검색 결과가 없을 때 */
.bj-list-empty {
  padding-block: var(--space-16);
  color: var(--color-text-secondary);
  text-align: center;
}

@media (min-width: 768px) {
  .bj-list-head {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .bj-list-head .bj-search {
    width: var(--search-max-width);
  }
}