/*!
 * 주소핫 - 카테고리 그리드 반응형 레이아웃
 * PC 4열 / 태블릿 3열~2열 / 모바일 2열
 * 원본 CSS(assets/index-*.css)는 수정하지 않고 이 파일로 덮어씁니다.
 */

/* ── 기본(대형 화면): 4열 ───────────────────────────── */
.directory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

/* PC 컨테이너 폭을 넓혀 4열이 충분히 들어가도록 확장 */
main.portal-shell,
.directory-section {
  max-width: 1560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4열에서는 카드 폭이 좁아지므로 내부 여백/글자 크기를 소폭 축소 */
.directory-grid .category-card__title,
.directory-grid .category-card h3 {
  font-size: 15.5px !important;
  letter-spacing: -0.3px !important;
}

.directory-grid .category-card a {
  font-size: 12.5px !important;
}

/* 링크 라벨이 길 경우 줄바꿈 없이 말줄임 처리 */
.directory-grid .category-card li > a,
.directory-grid .category-card a {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ── 900px 이하: 3열 ───────────────────────────────── */
@media (max-width: 900px) {
  .directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── 860px 이하: 2열 ──────────────────────────────── */
@media (max-width: 860px) {
  .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .directory-grid .category-card__title,
  .directory-grid .category-card h3 {
    font-size: 16px !important;
  }
  .directory-grid .category-card a {
    font-size: 13px !important;
  }
}

/* ── 820px 이하(모바일): 2열 유지 (원본 1열 규칙 덮어씀) ── */
@media (max-width: 820px) {
  .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .directory-grid .category-card__title,
  .directory-grid .category-card h3 {
    font-size: 14px !important;
    letter-spacing: -0.4px !important;
  }
  .directory-grid .category-card a {
    font-size: 12px !important;
  }
}

/* ── 480px 이하(소형 모바일): 2열 유지 + 더 촘촘하게 ──── */
@media (max-width: 480px) {
  .directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .directory-grid .category-card__title,
  .directory-grid .category-card h3 {
    font-size: 13px !important;
  }
  .directory-grid .category-card a {
    font-size: 11.5px !important;
  }
}