/* drain24 허브 페이지 보조 CSS (2026-10-25). d24-v4.css 뒤에 불러온다. 토큰은 d24-v4.css 의 :root 를 쓴다. */

/* 카드 격자: 시도·시군구·동·대표 서비스 */
.d24b__main ul.d24c-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px;
  list-style: none; margin: 16px 0 26px; padding: 0;
}
.d24b__main ul.d24c-grid > li { margin: 0; }
.d24b__main ul.d24c-grid--dong { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.d24b__main ul.d24c-grid--svc { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.d24b__main .d24c-card a {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 76px; height: 100%;
  padding: 12px 16px; border: 1px solid var(--t-grout); border-radius: var(--t-r); background: #fff;
  color: var(--t-ink); text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.d24b__main .d24c-card a:hover { border-color: var(--t-cobalt); background: var(--t-tile); }
.d24b__main .d24c-card strong { font-size: 16.5px; font-weight: 750; line-height: 1.35; letter-spacing: -0.02em; }
.d24b__main .d24c-card span { font-size: 14px; line-height: 1.4; color: var(--t-slate); }
.d24b__main ul.d24c-grid--dong .d24c-card a { min-height: 52px; padding: 8px 10px; align-items: center; text-align: center; }
.d24b__main ul.d24c-grid--dong .d24c-card strong { font-size: 15px; font-weight: 700; }
/* 대표 서비스: 아이콘 + 이름 */
.d24b__main ul.d24c-grid--svc .d24c-card a { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.d24b__main ul.d24c-grid--svc .d24c-card img { width: 44px; height: 44px; flex: none; border-radius: 11px; display: block; }
.d24b__main .d24c-card__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: inherit; color: inherit; }
.d24b__main .d24c-card__t span { font-size: 13.5px; color: var(--t-slate); }

/* 지역 요약: 숫자 카드 */
.d24b__main dl.d24c-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 22px;
}
.d24b__main .d24c-facts > div { padding: 14px 16px; background: var(--t-tile); border: 1px solid var(--t-grout); border-radius: var(--t-r); }
.d24b__main .d24c-facts dt { margin: 0 0 4px; font-size: 13.5px; font-weight: 650; color: var(--t-slate); }
.d24b__main .d24c-facts dd { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--t-ink); line-height: 1.3; }
.d24b__main .d24c-facts dd.d24c-facts__sub { margin-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--t-slate); }

/* 접이식 전체 목록, 기존 본문 블록 */
.d24b__main details.d24c-more { margin: 4px 0 22px; }
.d24b__main details.d24c-more ul { padding: 0 18px 6px; }
.d24b__main .d24c-intro > :first-child { margin-top: 0; }

@media (max-width: 767px) {
  .d24b__main ul.d24c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .d24b__main ul.d24c-grid--dong { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .d24b__main ul.d24c-grid--svc { grid-template-columns: minmax(0, 1fr); }
  .d24b__main dl.d24c-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d24b__main .d24c-card a { padding: 10px 12px; min-height: 68px; }
  .d24b__main .d24c-card strong { font-size: 15.5px; }
  .d24b__main ul.d24c-grid--dong .d24c-card a { min-height: 48px; padding: 6px 4px; }
  .d24b__main ul.d24c-grid--dong .d24c-card strong { font-size: 14.5px; }
}

/* 테마가 li 앞뒤에 붙이는 점 표시 제거 */
.d24b__main ul.d24c-grid > li { list-style: none !important; }
.d24b__main ul.d24c-grid > li::before, .d24b__main ul.d24c-grid > li::after { content: none !important; display: none !important; }