/* R4 WP-B §3 — 홈·목록 키워드 정본 전용 CSS.
   담당 파일: app/page.tsx, app/cars/page.tsx (신규 클래스만 여기서 스타일한다) */

/* 홈 히어로: H1 하단으로 강등된 기존 리드 문단 */
.hero .hero-detail {
  color: var(--color-text-muted, #526071);
  font-size: 15px;
  line-height: 1.75;
  margin: 0 0 22px;
}

/* 홈 내부링크 허브 — <ul> 대신 <p> 반복으로 만든 차종별 가격 링크 목록.
   불릿·화살표는 CSS로 복원한다 (AD_FRIENDLY_HTML_RULE). */
.car-price-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 18px;
}

.car-price-hub .heading,
.car-price-hub > p:not(.car-price-link) {
  grid-column: 1 / -1;
}

.car-price-hub > p:not(.car-price-link) {
  margin: 0 0 14px;
  color: var(--color-text-muted, #526071);
  font-size: 15px;
  line-height: 1.7;
}

.car-price-hub p.car-price-link {
  position: relative;
  margin: 0;
  padding: 12px 14px 12px 30px;
  background: var(--color-brand-soft, #eff6ff);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm, 10px);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text, #111827);
}

.car-price-hub p.car-price-link::before {
  content: "\203A";
  position: absolute;
  left: 12px;
  top: 11px;
  color: var(--color-brand-strong, #1d4ed8);
  font-weight: 700;
}

.car-price-hub p.car-price-link a {
  color: var(--color-brand-strong, #1d4ed8);
  font-weight: 600;
  text-decoration: none;
}

.car-price-hub p.car-price-link a:hover {
  text-decoration: underline;
}

@media (width <= 600px) {
  .car-price-hub {
    grid-template-columns: 1fr;
  }
}