/* ==========================================================================
   브로크라운 4-B 디자인 통일 CSS — 최종(운영자 확정 2026-10-15: 추천안) · 아직 사이트에 올리지 않음(적용은 운영자 승인 뒤)
   고른 안: 글 목록 카드 3열(홈·분류·검색 공통) · 소제목 브로크라운형(H2 폭 전체 진초록 띠 + H3 앞 초록 네모)
            · 보조색 남색 #1f4e79(다음 글 카드·링크 미리보기) · '광고' 표시 15px
   붙이는 순서: brocrown-child 1.0.4 style.css 뒤에 ① 공통부품_최종.css(모든 화면) → ② 목록_최종.css(홈·분류·검색에서만 불러옴)
               → ③ 글본문_통일_최종.css(글 화면에서만 불러옴). 올릴 때는 줄여 쓰기(minify)만 하고 내용은 그대로.
   최종 시안 HTML 안의 CSS는 이 파일들과 같은 내용(글 시안은 화면 틀 이름 .C/.N/.HA만 붙이고 @media를 @container로 바꿈).
   함께 바꿀 GP 설정(파일 아님): 사용자 정의하기 > 색상 > 글 링크 #0066ff → #2c541d(진초록), 링크(마우스) #ee0000 → #1f2024
   ========================================================================== */

/* ② 목록 화면(홈·분류·검색) — 카드 3열(PC) · 그림 왼쪽 120×90(휴대폰) */
/* ==========================================================================
   [4-B 목록 화면] 홈 · 분류(하위 분류 포함) · 검색 결과가 함께 쓰는 CSS — 공통 부품 다음에 붙임
   글 카드는 GP Premium 블로그 열(article.generate-columns)을 그대로 쓰고 모양만 바꿈 → 홈 카드 = 분류 카드 = 검색 카드
   기준 폭: 휴대폰 767px 이하 · 태블릿 768~1024px · PC 1025px 이상(767/768 하나로 맞춰 768px 겹침 C10도 없어짐)
   ========================================================================== */

/* 1. 목록 틀 — GPP 열(음수 여백) 대신 grid. 카드 사이 24px */
:is(.blog,.archive,.search) .generate-columns-container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-left:0}
@media (min-width:768px) and (max-width:1024px){:is(.blog,.archive,.search) .generate-columns-container{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){:is(.blog,.archive,.search) .generate-columns-container{grid-template-columns:minmax(0,1fr);gap:0}}
:is(.blog,.archive,.search) .generate-columns-container>*{grid-column:1/-1;margin-left:0;margin-bottom:0}
:is(.blog,.archive,.search) .generate-columns-container>.generate-columns{grid-column:auto;width:auto;padding-left:0;margin-bottom:0}

/* 2. 분류 첫머리: 제목 · 글 수(최근 90일 안에 고친 글이 있을 때만 '최근 업데이트') · 설명(본문색) */
:is(.archive,.search) .page-header{margin:0}
:is(.archive,.search) .page-header .page-title{margin:0 0 4px}
.bc-hub-meta{margin:0 0 12px;font-size:.9375rem;line-height:1.6;color:var(--bc-text-2)}
.bc-hub-meta strong{color:var(--bc-text)}
.archive .taxonomy-description{max-width:50rem;font-size:1.0625rem;line-height:1.75;color:var(--bc-text)}

/* 3. 주제별로 보기 — 분류 칸(공통 .bc-tile)의 한 줄 모양, 휴대폰 2열 · 태블릿 이상 4열 */
.bc-topics{margin:20px 0 0}
.bc-topics__title{margin:0 0 8px;font-size:1.0625rem;font-weight:700;line-height:1.5;color:var(--bc-text)}
.bc-tiles--topics{gap:8px}
@media (min-width:768px){.bc-tiles--topics{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}}

/* 4. 먼저 읽을 글 — 연초록 상자 + 다음 글 카드(공통 a.bc-next) 3장 */
.bc-picks{margin:24px 0 0;padding:16px;background:var(--bc-bg-soft);border:1px solid var(--bc-line);border-radius:var(--bc-r-m)}
@media (min-width:768px){.bc-picks{padding:20px}}
.bc-picks .bc-sec-title{margin:0}
.bc-picks .bc-sec-sub{margin:4px 0 16px}
.bc-picks__grid{display:grid;gap:12px}
@media (min-width:768px){.bc-picks__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.bc-picks a.bc-next{height:100%}
.bc-picks .bc-next__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:break-word}
@media (max-width:767px){.bc-picks .bc-next__desc{display:none}}

/* 5. 목록 머리 — 구역 제목(공통 .bc-sec-title) + 오른쪽 글 수 */
.bc-list-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 16px;margin:40px 0 0}
.bc-list-head .bc-sec-title{margin:0}
.bc-list-head__meta{margin:0;font-size:.9375rem;line-height:1.6;color:var(--bc-text-2)}
@media (max-width:767px){.bc-list-head{margin:32px 0 4px}}

/* 6. 글 카드(PC 카드 3열 · 휴대폰 그림 왼쪽 120×90) — 꼬리표 → 제목 → 요약(PC) → 날짜 */
:is(.blog,.archive,.search) .generate-columns-container .generate-columns .inside-article{padding:0 0 16px;border-radius:var(--bc-r-m)}
:is(.blog,.archive,.search) .generate-columns-container .generate-columns .entry-header{display:contents}
:is(.blog,.archive,.search) .generate-columns-container .generate-columns footer.entry-meta{display:block;order:1;margin:16px 16px 0}
:is(.blog,.archive,.search) .generate-columns-container .generate-columns .entry-title{order:2;margin:8px 16px 0}
:is(.blog,.archive,.search) .generate-columns-container .generate-columns .entry-summary{order:3;margin:8px 16px 0}
:is(.blog,.archive,.search) .generate-columns-container .generate-columns .entry-header .entry-meta{order:4;margin:auto 16px 0;padding-top:12px}
:is(.blog,.archive,.search) .generate-columns-container .entry-summary p{word-break:keep-all;overflow-wrap:break-word}
:is(.blog,.archive,.search) .bc-date{word-break:keep-all}
:is(.blog,.archive,.search) .bc-date time{white-space:nowrap}
@media (max-width:767px){
	:is(.blog,.archive,.search) .generate-columns-container .generate-columns .inside-article{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:min-content min-content auto;column-gap:16px;row-gap:4px;align-content:start;align-items:start;padding:16px 0;border:0;border-bottom:1px solid var(--bc-line);border-radius:0}
	:is(.blog,.archive,.search) .generate-columns-container .generate-columns.has-post-thumbnail .inside-article .post-image{grid-column:1;grid-row:1/span 3;width:120px;height:90px;aspect-ratio:auto;border-radius:var(--bc-r-s)}
	:is(.blog,.archive,.search) .generate-columns-container .generate-columns footer.entry-meta{grid-column:2;grid-row:1;margin:0}
	:is(.blog,.archive,.search) .generate-columns-container .generate-columns .entry-title{grid-column:2;grid-row:2;margin:0;font-size:1.125rem}
	:is(.blog,.archive,.search) .generate-columns-container .generate-columns .entry-header .entry-meta{grid-column:2;grid-row:3;margin:0;padding-top:0}
	:is(.blog,.archive,.search) .generate-columns-container .generate-columns .entry-summary{display:none}
}

/* 7. 목록 광고 칸(자리·크기는 지금과 같음, '광고' 표시는 공통 15px) · 쪽 번호 */
:is(.blog,.archive,.search) .generate-columns-container>.bc-list-ad{margin:0}
@media (max-width:767px){:is(.blog,.archive,.search) .generate-columns-container>.bc-list-ad{margin:24px 0}}
:is(.blog,.archive,.search) .generate-columns-container>.paging-navigation{margin-top:16px}
.bc-paging-info{margin:12px 0 0;text-align:center;font-size:.9375rem;line-height:1.6;color:var(--bc-text-2)}

/* 8. 다른 분류 둘러보기 — 분류 칸(공통 .bc-tile, 그림 있음) */
.bc-other{margin:48px 0 24px;padding:24px 0 0;border-top:1px solid var(--bc-line)}
.bc-other .bc-sec-title{margin:0 0 16px}