/* Tailwind CDN 으로 안 되는 규칙 (컨테이너 쿼리·:has) — 화면 폭이 아니라 칸 폭으로 열 수를 정한다 */

/* ── AI 벤치마크 섹션 (public/js/tab-benchmark.js) ── */

/* 섹션 카드를 직접 그리는 화면은 바깥 목록 카드 테두리·바탕을 뺀다 (카드 안 카드 방지) */
#listCard:has(> #mainContentArea.bench-flat) { border-color: transparent; background: transparent; }

/* 세 열은 섹션 폭이 넉넉할 때만 나란히 — 화면 폭이 아니라 섹션 폭으로 (양쪽 칸 유무에 따라 가운데 폭이 달라서).
 * 한 줄 고정 요소(순위·로고·게이지·값 ≈ 180px) + 이름 130px 이상 + 여백 → 열당 약 330px */
.bench-section { container-type: inline-size; }
.bench-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.bench-grid > * + * { border-top: 1px solid #f1f5f9; }
.dark .bench-grid > * + * { border-color: #1e293b; }
@container (min-width: 1000px) {
  .bench-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bench-grid > * + * { border-top: 0; border-left: 1px solid #f1f5f9; }
  .dark .bench-grid > * + * { border-color: #1e293b; }
}

/* ── 핫딜 카드 (public/js/tab-feeds.js feedDealCardHtml) — 레퍼런스처럼 2 → 3(560px) → 4열(900px) ── */
.deal-wrap { container-type: inline-size; }
.deal-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container (min-width: 560px) { .deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 900px) { .deal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; } }

/* ── 왼쪽 카테고리 글 수 (index.html renderCategoryNav) — 고른 행(연한 코랄 바탕)에선 slate-500 이 4.3:1 이라 한 단계 진하게 ── */
.menu-item.active .cat-count { color: #475569; }
.dark .menu-item.active .cat-count { color: #94a3b8; }