/**
 * layout-normalize.css — 전 카테고리 페이지 디자인 정합성
 * 기준: 부동산 페이지 (real-estate.css)
 * 적용 페이지: real-estate, used-cars, jobs, life-info, insurance
 */

/* ══════════════════════════════════════════════════════════════
   1. 페이지 제목 (h1) 통일
   real-estate: h1.title   used-cars: h1.page-title
══════════════════════════════════════════════════════════════ */
h1.title,
h1.page-title {
  font-size: var(--font-size-32);
  font-weight: var(--font-weight-bold);
  color: #212121;
  margin-bottom: var(--spacing-2);
}

/* ══════════════════════════════════════════════════════════════
   2. 부제목 통일
   real-estate: .subtitle   used-cars: .page-subtitle
══════════════════════════════════════════════════════════════ */
.subtitle,
.page-subtitle {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  color: var(--color-gray-500);
}

/* ══════════════════════════════════════════════════════════════
   3. 페이지 제목 래퍼 (div) 통일
   real-estate: div.page-title   used-cars: div.page-header
══════════════════════════════════════════════════════════════ */
div.page-title,
.page-header {
  margin-bottom: var(--spacing-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ══════════════════════════════════════════════════════════════
   4. 섹션 타이틀 컬러 통일
   real-estate: color: var(--color-primary)
   used-cars: color: #212121  ← 이것을 primary로 통일
══════════════════════════════════════════════════════════════ */
.section-title {
  color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   5. 모바일 반응형 — 부동산 기준으로 통일
   부동산: h1 크기 유지 (모바일 오버라이드 없음 → 32px 유지)
   중고차: 767px 이하에서 22px으로 축소 → 부동산 기준 32px으로 맞춤
══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* h1 페이지 타이틀 — 모바일에서도 32px 유지 (부동산 기준) */
  h1.title,
  h1.page-title {
    font-size: var(--font-size-32) !important;
  }

  /* 부제목 — 모바일에서도 크기 유지 (부동산 기준 = 오버라이드 없음) */
  .subtitle,
  .page-subtitle {
    font-size: var(--font-size-14);
  }

  /* 페이지 제목 래퍼 — 모바일 여백 조정 */
  div.page-title,
  .page-header {
    margin-bottom: var(--spacing-4);
  }
}

/* ══════════════════════════════════════════════════════════════
   6. 공통 레이아웃 — main-content min-width 보정
   used-cars: min-width: 0 추가되어 있음 (good)
   real-estate: 없음 → flex shrink 문제 방지
══════════════════════════════════════════════════════════════ */
.main-content {
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   7. ad-icon-wrap 공통 보정 (모든 페이지)
══════════════════════════════════════════════════════════════ */
.ad-icon-wrap {
  margin-bottom: 12px;
}
.ad-icon-wrap svg {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   8. ad-purple 색상 공통 정의
   (real-estate.css, used-cars.css에만 있고 jobs.css 등에 없을 수 있음)
══════════════════════════════════════════════════════════════ */
.ad-purple {
  background: linear-gradient(135deg, #9D4EDD 0%, #7209B7 100%);
}

/* ══════════════════════════════════════════════════════════════
   9. 전 페이지 섹션 타이틀 폰트·사이즈·색상 통일
   ─ 이 파일이 모든 front 페이지에서 마지막으로 로드되므로
     개별 페이지 CSS를 안전하게 override 합니다.

   [A] 페이지 대제목 — 32px / 800 / #212121
       · h1.title        부동산
       · h1.page-title   자동차
       · .life-board__title (h3)  생활정보 "제주생활정보"

   [B] 섹션 소제목 — 22px / 800 / #111827
       · .tier-section-title     부동산·자동차·구인구직 "프리미엄 매물" 등
       · .life-tier__head h3     생활정보 "프리미엄", "스페셜"
       · h2.content-title        금융/보험/상조 탭 소제목

   [C] 생활정보 카테고리 그룹 타이틀 — 28px / 800 / #212121
       · .life-group__title      각 카테고리 묶음 제목 (페이지 대제목과 계층 구분)
══════════════════════════════════════════════════════════════ */

/* [A] 페이지 대제목 */
h1.title,
h1.page-title,
.life-front-page .life-board__title {
  font-size: var(--font-size-32);   /* 32px */
  font-weight: 800;
  color: #212121;
  letter-spacing: -0.02em;
}

/* [B] 섹션 소제목 */
.tier-section-title,
.life-front-page .life-tier__head h3,
h2.content-title {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}

/* [C] 생활정보 카테고리 그룹 타이틀 */
.life-front-page .life-group__title {
  font-size: var(--font-size-28);   /* 28px — 대제목(32)과 소제목(22) 사이 계층 */
  font-weight: 800;
  color: #212121;
  letter-spacing: -0.02em;
}

/* 모바일: 대제목만 살짝 축소, 나머지 유지 */
@media (max-width: 768px) {
  h1.title,
  h1.page-title,
  .life-front-page .life-board__title {
    font-size: var(--font-size-28) !important;  /* 28px */
  }
  .life-front-page .life-group__title {
    font-size: var(--font-size-24) !important;  /* 24px */
  }
}