/* ============================================================
 * 호미클럽 — 칼럼 목록 페이지 (상단 태그 필터 + 4열 카드 연속)
 * 카드 컴포넌트(.post-card 등)는 home.css 를 공유한다.
 * ============================================================ */

/* 상단 태그 필터 (가로 스크롤 + 가는 구획선) — 스크롤 시 헤더 아래 스티키 */
.col-filter {
  display: flex; gap: var(--space-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: var(--header-h); z-index: 50;
  background: var(--bg-page);
}
.col-filter::-webkit-scrollbar { display: none; }
.col-filter::-webkit-scrollbar { display: none; }

/* 4열 카드 그리드 (연속) */
.col-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
  padding-bottom: var(--space-10);
}

/* 더 보기 */
.load-more { text-align: center; padding-bottom: var(--space-12); }
.load-more a {
  font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-700);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 12px 28px; display: inline-block;
}
.load-more a:hover { background: var(--ink-100); color: var(--ink-900); border-color: var(--ink-300); }

/* ───────────────────────── 반응형 ───────────────────────── */
@media (max-width: 1023px) { .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  {
  .col-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 필터 칩바 화면 끝까지 흘려 가로 스와이프 단서 + 스냅 */
  .col-filter { margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); scroll-snap-type: x proximity; }
  .col-filter .tag { scroll-snap-align: start; }
}
@media (max-width: 479px)  { .col-grid { grid-template-columns: 1fr; } }