/* ==========================================================================
   강남새로 블로그 — 목록 화면(/blog/, /blog/{카테고리}/) 전용 CSS.

   출처: saero-blog-dev 자식 테마(gp-saero-child) style.css에서
   "19. 목록 화면 — 홈·카테고리" 섹션(원본 894~1110행)과 "2. 변수"
   섹션(원본 34~69행)에서 이 섹션이 실제로 쓰는 변수만, 그리고
   "21. 반응형"(원본 1244~1246행 / 1299~1306행 / 1323~1334행 중 목록
   관련 규칙만) 골라 이식. 헤더·GNB·푸터·글 본문 전용 스타일(원본의
   3~18·20번 섹션)은 이식하지 않음 — saero-live 자체 헤더·푸터가
   이 페이지에도 그대로 적용됨.

   원본과 다른 점(선택자 보정):
   - `.blog`/`.archive`(워드프레스가 네이티브 홈·아카이브에만 붙이는
     바디클래스) → 이 사이트의 실제 클래스인
     `.post-type-archive-saero_blog`/`.tax-saero_blog_category`로 교체.
   - 원본의 GP 기본 페이지네이션(`.page-numbers`) 규칙은 제외 —
     이 사이트는 공용 `.pg_wrap`/`.pg_page`(inc/pagination.php)를 쓰고
     이미 사이트 전역 CSS에 스타일이 있어 별도 규칙 불필요.
   - 원본이 쓰는 글꼴 변수(`--saero-font-kr` 등)는 이 섹션 규칙에서
     직접 참조되지 않아 가져오지 않음 — 텍스트는 saero-live 기존
     사이트 글꼴을 그대로 씀(의도된 것).
   - saero-live 기존 `:root` 변수(sub.css의 --font-*, --color-point 등)와
     이름 충돌 없음 확인 완료 — 접두사 없이 원본 변수명 그대로 사용.

   추가(2번째 라운드): 배경 히어로(.saero-blog-hero)를 원본
   "18. 인트로 배경 + 헤더 스크롤 전환" 섹션(원본 764~784행,
   `.saero-hero` 기본 규칙 + 배경 이미지)에서 이식. saero-live는
   모든 페이지의 헤더(.main-header/.ht-inner)가 이미 기본적으로
   투명이고 스크롤 시에만 `.scrolled` 클래스로 흰 배경 전환되는 공용
   규칙을 갖고 있어(common.css:846-891, js/sub_common.js:216 GSAP
   ScrollTrigger), header.php나 공용 CSS/JS를 전혀 건드리지 않고
   이 배경 박스 하나만 얹으면 /ko/와 같은 "배경 위 투명 헤더" 효과가
   재현된다. 스크롤 후 글자색 전환은 형제 결합자(`.main-header.scrolled
   ~ #content`, 파일 하단 참고)로 처리 — header.php 미수정.
   히어로 구조 자체(평범한 고정 height 블록 + 뒤따르는 요소의 음수
   margin으로 겹침 연출)는 이 코드베이스의 다른 커스텀 아카이브
   (archive-media.php의 `.youtube_visual` 등)와 동일한, 검증된 패턴을
   그대로 따른다 — z-index/절대배치 트릭은 실제 크롬에서 헤더가 가려지고
   카드가 배경 뒤에 깔리는 버그를 냈던 시도였고(2026-09-30, 히어로
   섹션 주석 참고) 폐기했다. 배경 이미지 파일(img/blog-hero.jpg.webp)은
   blog-dev 업로드 폴더의 sub06-2_intro.jpg.webp를 그대로 복사(샘플 사진 —
   화질·내용 무관, 구조 확인용).
   ========================================================================== */

:root {
  --saero-text:       #191919;
  --saero-text-sub:   #575757;
  --saero-white:      #ffffff;
  --saero-point:      #99b2c2;
  --saero-point-deep: #6d9ab5;
  --saero-line:       #cecece;
  --saero-bg-light:   #efefef;
}

/* ── 목록 콘텐츠 폭 — /ko/ 실측 원본은 GeneratePress 기본
   `.grid-container`(부모 테마 inc/defaults.php의 기본값
   container_width=1200, assets/css/all.css:38-44에서 max-width:1200px +
   padding-left/right:10px + margin auto 확인)로 제목·탭·카드 그리드
   폭을 제한한다. saero-live엔 이 클래스가 없어(자체 sub_cont_wrap 계열
   과는 별개 체계) 값만 그대로 이식. ── */
.saero-archive-head,
.saero-tabs,
.saero-grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

/* ── 상단 제목 — 히어로 안에서 제목+탭 묶음이 flex로 세로 중앙정렬되므로
   (아래 히어로 섹션 참고) 자체 margin-top은 두지 않고, 탭과의 간격만
   margin-bottom으로 준다. */
.saero-archive-head {
  margin: 0 0 36px;
  text-align: center;
}
.saero-archive-head__title {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--saero-text);
}

/* ── 카테고리 탭 — 버튼형, 가운데 정렬 (원본 936~971행). 히어로 안
   마지막 요소라 아래쪽 margin은 필요 없음(중앙정렬이 처리). ── */
.saero-tabs {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
}
.saero-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.saero-tabs__list li { margin: 0; }
.saero-tabs__item {
  display: block;
  padding: 11px 24px;
  border: 1px solid var(--saero-line);
  border-radius: 999px;
  background: var(--saero-white);
  font-size: 15px;
  color: var(--saero-text-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
.saero-tabs__item:hover {
  border-color: var(--saero-point);
  color: var(--saero-text);
}
.saero-tabs__item.is-active {
  background: var(--saero-point-deep);
  border-color: var(--saero-point-deep);
  color: var(--saero-white);
  font-weight: 500;
}

/* ── 카드 그리드 (원본 995~1063행)
   🔴 2026-09-30i: 이 사이트는 font-weight 숫자로 굵기를 조절하는 폰트가
   아니다 — common.css:33-78 @font-face 확인 결과 Light/Medium/Bold가
   전부 별도 font-family 이름(font-weight:normal로만 등록)이라, 숫자만
   올리면 실제 파일이 안 바뀌어 브라우저 가짜 볼드(약하거나 안 먹힘)만
   걸린다. 그래서 제목·카테고리·날짜는 font-weight 숫자 대신 font-family
   를 한 단계 굵은 파일로 바꾸고(제목: Bold, 카테고리/날짜: Medium),
   합성 볼드 중복을 막기 위해 font-weight는 normal로 명시한다. ── */
.saero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
}
.saero-grid__item { margin: 0; }

.saero-gcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: var(--saero-white);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.saero-gcard:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  transform: translateY(-3px);
}
.saero-gcard__thumb {
  display: block;
  /* 2026-10-01: 실제 업로드 사진 비율(720x406 ≈ 16:9)과 맞춤(요청) —
     기존 4:3은 사진 좌우가 잘려 보였다. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--saero-bg-light);
}
.saero-gcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.saero-gcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* 2026-10-01: 위아래 30px, 양옆 40px로 변경(요청) — 기존 4방향 동일값. */
  padding: 30px 40px;
}
.saero-gcard__cat {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-family: 'Pretendard-Medium';
  font-weight: normal;
  color: var(--saero-point-deep);
}
.saero-gcard__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  margin-bottom: 14px;
  font-size: 17px;
  font-family: 'Pretendard-Bold';
  font-weight: normal;
  line-height: 1.5;
  color: var(--saero-text);
  word-break: keep-all;
}
.saero-gcard:hover .saero-gcard__title { color: var(--saero-point-deep); }
.saero-gcard__date {
  display: block;
  font-size: 12px;
  font-family: 'Pretendard-Medium';
  font-weight: normal;
  color: var(--saero-text-sub);
}

.saero-empty {
  padding: 60px 0;
  text-align: center;
  color: var(--saero-text-sub);
}

/* ── 반응형 (원본 1244~1246 / 1299~1306 / 1323~1334행 중 목록 관련만) ── */
@media (max-width: 900px) {
  .saero-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
}

@media (max-width: 768px) {
  .saero-archive-head__title { font-size: 28px; }
  .saero-tabs { margin-bottom: 32px; }
  .saero-tabs__list { gap: 8px; }
  .saero-tabs__item { padding: 9px 18px; font-size: 14px; }
  .saero-gcard__title { font-size: 16px; }
  /* 모바일 확인(2026-09-30) — 마지막 카드가 푸터에 바로 붙던 문제.
     원본 blog-dev style.css:1141 `.blog/.archive .content-area
     {padding-bottom:150px}` 값 그대로 이식(모바일 전용 override는
     원본에도 없어 데스크톱 값과 동일 — 데스크톱은 sticky-footer
     flex로 이미 해결돼 있어 여기선 건드리지 않음). */
  .saero-blog-list-wrap { padding-bottom: 150px; }
}

@media (max-width: 560px) {
  .saero-grid { grid-template-columns: 1fr; gap: 20px; }
  .saero-gcard__thumb { aspect-ratio: 16 / 9; }
  /* 카테고리가 늘어 탭이 4개(전체+3)가 되면 한 줄에 안 들어가므로
     가로 스크롤 대신 2×2 격자로(같은 폭, 가운데 정렬) — 기존 가로
     스크롤 규칙 제거. */
  .saero-tabs__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .saero-tabs__item {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  /* 2026-10-12: 탭이 5개(전체+4)가 되면서 2열 격자 마지막 칸이 혼자
     남던 문제 — "전체"를 첫 줄 전체 폭으로 두고 분류는 2열(1+2+2).
     분류 수가 홀수가 되면 마지막 탭도 한 줄 전체 폭으로 맞춘다. */
  .saero-tabs__list li:first-child,
  .saero-tabs__list li:last-child:nth-child(even) {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   배경 히어로 — 배경 이미지·높이·display는 이 파일에서 관리하지 않는다.
   🔴 2026-09-30f: blog.css에서 `.saero-blog-hero{background:...
   height:460px}`를 아무리 이식해도(::before 방식·평범한 블록 방식 둘
   다) 실제 크롬에서는 배경이 가운데 1200px 폭 안에만 나오는 원인불명
   현상이 반복됨. blog.css 자체를 껐다 켜서 원인이 blog.css라는 것만
   확인됨(어느 선택자인지는 특정 못함). 이 사이트의 유일하게 검증된
   해결책은 archive-media.php(ON AIR)의 실제 방식 — 배경 규칙을
   enqueue되는 CSS 파일이 아니라 **템플릿 파일 자체의 인라인 `<style>`
   블록**(archive-media.php:54 `.youtube_visual{...}`)으로 선언하는
   것뿐이었다. 그래서 `.saero-blog-hero`의 배경·높이·display 규칙은
   blog.css에서 완전히 빼고 archive-saero_blog.php·
   taxonomy-saero_blog_category.php 안의 인라인 `<style>`로 옮겼다
   (원인은 특정 못했으나 검증된 방식 그대로 재현). 카드가 히어로
   하단에 걸치는 배치(음수 margin)는 카드 쪽 규칙이라 여기 남긴다. */
.saero-blog-list-wrap {
  margin-top: -130px;
  /* 2026-10-01: 탭(전체/라미네이트 등)과 아래 썸네일 그리드 사이 간격
     벌림(요청). */
  padding-top: 50px;
  /* 2026-10-01: 썸네일 그리드~푸터 사이 간격 — 글 화면(blog-single.css)과
     같은 값(150px)으로 통일. 기존엔 이 값이 @media(max-width:768px)
     안에만 있어 데스크톱엔 간격이 전혀 없었다 — 기본값으로 올림. */
  padding-bottom: 150px;
  box-sizing: border-box;
}

/* ==========================================================================
   🔴 2026-09-30h: 크롬 DevTools 실측으로 확정 — 뷰포트가 넓어지면(약
   1921px 이상) main#content.board_wrap가 1200×460으로 고정됨. 로드되는
   모든 CSS(common.css·sub.css·sub_responsive.css·default.css·GP 코어·
   플러그인)를 전부 뒤졌으나 `.board_wrap`이나 `section`을 1200px로
   제한하는 규칙 자체는 못 찾았다 — 유일하게 찾은, 넓은 화면에서만
   켜지는 규칙은 sub_responsive.css:1~2
   `@media (min-width:1921px){ main{max-width:100%; margin:0 auto;} }`
   뿐(공용 파일이라 손대지 않음). 원인 요소를 특정 못했으므로, 블로그
   화면에서만 히어로를 감싸는 section과 main.board_wrap의 폭 제한을
   무조건 무력화한다(카드 그리드의 1200px 제한은 위 .saero-grid 규칙이
   그대로 담당, 안 건드림). */
body.post-type-archive-saero_blog main#content.board_wrap,
body.tax-saero_blog_category main#content.board_wrap,
body.post-type-archive-saero_blog main#content.board_wrap > section,
body.tax-saero_blog_category main#content.board_wrap > section {
  width: 100% !important;
  max-width: none !important;
}

/* 히어로 안 제목·탭 — 흰 글자(기본, = 스크롤 전) */
.saero-archive-head__title { color: var(--saero-white); }
.saero-tabs__item {
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.92);
  color: var(--saero-text);
}
.saero-tabs__item:hover {
  background: var(--saero-white);
  border-color: var(--saero-white);
}
.saero-tabs__item.is-active {
  /* 회색빛 도는 검정 — blog-dev style.css:47 --saero-text-dark 실측값 */
  background: #373737;
  border-color: #373737;
  color: var(--saero-white);
}

/* 스크롤 후(.main-header.scrolled) — 헤더가 흰 배경으로 바뀌는 것과
   같은 타이밍에 제목만 원래(어두운) 색으로 되돌린다. header.php를
   건드리지 않고, 헤더와 #content가 형제라는 구조로 형제 결합자(~)만
   써서 처리(위 파일 상단 주석 참고). */
.main-header.scrolled ~ #content .saero-archive-head__title {
  color: var(--saero-text);
}

/* ==========================================================================
   목록 화면이 짧아(카드 3장) 큰 모니터에서 뷰포트보다 문서가 짧으면
   푸터 아래에 흰 여백이 남는다 — 이 사이트엔 어떤 페이지에도 푸터를
   화면 바닥에 붙이는 공용 규칙이 없어(sticky-footer 자체가 사이트
   전역에 없음, .smooth-scroll엔 position:relative+overflow:hidden만
   있고 높이 관련 규칙 없음) 확인됨. 공용 CSS(.smooth-scroll)는
   건드리지 않고, 이 페이지의 body 클래스로만 범위를 좁혀 같은 효과를
   낸다: header.php 구조상 헤더·GNB 패널은 `.smooth-scroll` 바깥(그
   앞)에 있어 그 안 자식은 `<main id="content">`·`<footer>` 둘뿐이다 —
   이 둘을 flex로 나눠 main이 늘어나 푸터를 바닥까지 밀어낸다.
   ========================================================================== */
body.post-type-archive-saero_blog .smooth-scroll,
body.tax-saero_blog_category .smooth-scroll {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.post-type-archive-saero_blog .smooth-scroll > main#content,
body.tax-saero_blog_category .smooth-scroll > main#content {
  flex: 1 0 auto;
}

/* ==========================================================================
   배경색 — blog-single.css와 같은 원인·같은 값(rgb(247,248,249)).
   sub.css:26-28 `body, main, #content {background:#fff}`가 main 전체를
   흰색으로 덮어써서 body 배경만으로는 안 보였다 — main#content.board_wrap
   에도 같이 줘야 함(단일 글 화면에서 이미 확인된 원인, 그대로 재적용).
   ========================================================================== */
body.post-type-archive-saero_blog,
body.tax-saero_blog_category {
  background: rgb(247, 248, 249);
}
body.post-type-archive-saero_blog main#content.board_wrap,
body.tax-saero_blog_category main#content.board_wrap {
  background: rgb(247, 248, 249) !important;
}