/* ==========================================================================
   브로크라운 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
   ========================================================================== */

/* ① 공통 부품 — 모든 화면 */
/* ==========================================================================
   [4-B 공통 부품] 모든 화면(메인·분류·검색·글·404)이 함께 쓰는 한 벌 — 최종(운영자 확정 2026-10-15)
   새 토큰은 여기 :root 한 곳에서만 정합니다(기존 --bc-text 등은 1.0.4 style.css에 이미 있음).
   여기 있는 부품(꼬리표·다음 글 카드·분류 칸·구역 제목·광고 표시·검색칸)은 다른 CSS 파일에서 다시 정하지 않습니다.
   ========================================================================== */

/* ① 새 토큰 */
:root{
	--bc-line-strong:#7f8f76;     /* 입력칸 테두리: 흰 바탕 대비 3.45, 연초록 바탕 3.23 (장식 선 #dfe6da는 1.28이라 입력칸에는 안 씀) */
	--bc-label-bg:#eef4e8;        /* 꼬리표 바탕: 진초록 글자 대비 7.83 */
	--bc-emph:#b3261e;            /* 강조 빨강 하나: 흰 바탕 6.54, 연초록 6.12 (옛 글의 빨강·주황·분홍 글자를 모음) */
	--bc-r-s:8px; --bc-r-m:12px; --bc-r-pill:999px;   /* 모서리 세 단계 */
	--bc-pad:16px;                /* 상자 안쪽: 휴대폰 16px · PC 20px */
	/* 보조색 = "다른 글로 가는 길"(다음 글 카드·링크 미리보기). 남색(확정): 흰 글자 대비 8.66, 색상각 209°
	   (도시농부 주황 22°와 173°, 올리브 93°와 116° 차이). 글자색으로는 쓰지 않음 */
	--bc-accent:#1f4e79;
	--bc-accent-label-bg:#1f4e79; --bc-accent-label-ink:#ffffff;
	--bc-next-bg:#eef3f9;         /* 카드 바탕(옅은 남색): 제목 대비 14.6, 설명 6.38 */
	--bc-next-line:#c3d1e1;
	--bc-next-left:1px solid #c3d1e1;   /* 왼쪽 띠 없음(도시농부형은 6px 색 띠) */
	--bc-next-arrow-r:8px;        /* 화살표 칸: 네모(모서리 8px). 도시농부형은 동그라미 */
}
@media (min-width:768px){:root{--bc-pad:20px}}

/* ② 머리: 누르는 곳 44×44px 이상 — 사이트 이름 줄 높이 26→48px, 위치 줄(빵부스러기) '홈'은 글자 자리는 그대로 두고 좌우로 넓힘 */
.main-title a{display:inline-flex;align-items:center;min-height:48px}
.bc-breadcrumb p>a:first-child{padding-left:16px;padding-right:16px;margin-left:-16px;margin-right:-16px}

/* ③ 검색칸 테두리(홈·검색·404): 장식 선 대신 진한 선. 누르면 진초록 */
.bc-search .bc-search__input{border-color:var(--bc-line-strong)}
.bc-search .bc-search__input:focus{border-color:var(--bc-green-dark)}

/* ④ 꼬리표 하나(메인 카드·분류 카드·글 첫머리·허브): 15px · 줄높이 1.5 · 2px 10px · 999px */
.bc-label,.bc-next__label{display:inline-block;padding:2px 10px;font-size:.9375rem;font-weight:700;line-height:1.5;border-radius:var(--bc-r-pill);white-space:nowrap}
.bc-label{color:var(--bc-green-dark);background:var(--bc-label-bg)}

/* ⑤ 구역 제목 하나(메인 구역·분류 목록 머리·먼저 읽을 글·다른 분류·글 끝 '함께 보면 좋은 글'): 휴대폰 22px · PC 26px + 위 32×4 초록 막대 */
.bc-sec-title,.bc-related>h2{margin:0;font-size:1.375rem;font-weight:700;line-height:1.4;color:var(--bc-text)}
.bc-sec-title::before,.bc-related>h2::before{content:"";display:block;width:32px;height:4px;margin-bottom:10px;background:var(--bc-green)}
.bc-related>h2{margin-bottom:16px}
.bc-sec-sub{margin:4px 0 0;font-size:1rem;line-height:1.6;color:var(--bc-text-2)}
@media (min-width:1025px){.bc-sec-title,.bc-related>h2{font-size:1.625rem}}

/* ⑥ 다음 글 카드 하나(글 본문·분류 '먼저 읽을 글'·홈 허브): 꼬리표 → 제목 → 설명 → 화살표. 카드 전체가 링크 */
a.bc-next{position:relative;display:block;min-height:72px;padding:12px 64px 12px 16px;color:var(--bc-text);text-decoration:none;background:var(--bc-next-bg);border:1px solid var(--bc-next-line);border-left:var(--bc-next-left);border-radius:var(--bc-r-m)}
.site-main a.bc-next,.site-main a.bc-next:hover{color:var(--bc-text);text-decoration:none}   /* GP 링크 색(.inside-article a, .page-header a)에 덮이지 않게 */
a.bc-next:hover{border-color:var(--bc-accent)}
a.bc-next:is(:hover,:focus-visible) .bc-next__title{text-decoration:underline;text-underline-offset:3px}
.bc-next__label{margin-bottom:4px;color:var(--bc-accent-label-ink);background:var(--bc-accent-label-bg)}
.bc-next__title{display:block;font-size:1.125rem;font-weight:700;line-height:1.45;color:var(--bc-text);word-break:keep-all;overflow-wrap:break-word}
.bc-next__desc{display:block;margin-top:2px;font-size:1rem;line-height:1.55;color:var(--bc-text-2)}
.bc-next__arrow{position:absolute;right:12px;top:50%;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;font-size:1.25rem;font-weight:700;line-height:1;color:#fff;background:var(--bc-accent);border-radius:var(--bc-next-arrow-r);transition:transform .15s}
a.bc-next:hover .bc-next__arrow{transform:translateX(3px)}

/* ⑦ 분류 칸 하나(홈 분류 6칸·분류 화면 '다른 분류'·'주제별로 보기'·404): 흰 바탕 + 1px 선 + 모서리 12px */
.bc-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
@media (min-width:768px){.bc-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bc-tiles li{margin:0}
.bc-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%;min-height:64px;padding:12px;color:var(--bc-text);text-decoration:none;background:#fff;border:1px solid var(--bc-line);border-radius:var(--bc-r-m)}
.bc-tile:hover{color:var(--bc-text);border-color:var(--bc-green-dark)}
.bc-tile__ico{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:8px;color:var(--bc-green-dark);background:var(--bc-label-bg);border-radius:var(--bc-r-s)}
.bc-tile__ico svg{width:22px;height:22px}
.bc-tile__name{font-size:1.125rem;font-weight:700;line-height:1.4;color:var(--bc-green-dark)}
.bc-tile__n{font-size:.9375rem;font-weight:400;color:var(--bc-text-2);white-space:nowrap}
.bc-tile__desc{display:none;margin-top:2px;font-size:.9375rem;line-height:1.5;color:var(--bc-text-2)}
.bc-tile__desc--mo{display:block}
@media (min-width:768px){
	.bc-tile__desc{display:block}
	.bc-tile__desc--mo{display:none}
	.bc-tile--ico{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;align-content:center;align-items:start;padding:16px}
	.bc-tile--ico .bc-tile__ico{grid-row:1/span 3;width:48px;height:48px;margin:0}
	.bc-tile--ico .bc-tile__ico svg{width:26px;height:26px}
}
/* 한 줄 칸(주제별로 보기): 이름 왼쪽 · 글 수 오른쪽 */
.bc-tile--row{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:8px 12px}
.bc-tile--row .bc-tile__name{font-size:1.0625rem;line-height:1.35;word-break:keep-all}
.bc-tile[aria-current="page"]{background:var(--bc-green-dark);border-color:var(--bc-green-dark)}
.bc-tile[aria-current="page"] :is(.bc-tile__name,.bc-tile__n){color:#fff}

/* ⑧ 광고 칸 표시 하나(목록 광고 .bc-list-ad · 본문 광고 .bc-ad): 위에 '광고' 15px, 휴대폰 280px · PC 250px 자리 확보, 안 채워져도 접지 않음 */
.bc-ad{min-height:280px;margin:2em 0;padding:12px 0;text-align:center;border-top:1px solid var(--bc-line);border-bottom:1px solid var(--bc-line)}
@media (min-width:768px){.bc-ad{min-height:250px}}
.bc-ad-label{margin:0 0 8px;font-size:.9375rem;line-height:1.4;color:var(--bc-text-2)}
/* 검토 반영(2026-10-15): 글 안 '광고' 표시 여백을 .entry-content p{margin-bottom:1.5em}(0,1,1)이 덮지 않게(0,2,0).
   자리 높이는 표시 칸이 아니라 광고 칸(.adsbygoogle)에 줘서, 광고가 들어와도 아래 글이 밀리지 않게(CLS) */
.bc-ad>.bc-ad-label,.bc-list-ad>.bc-ad-label{margin:0 0 8px}
.bc-ad .adsbygoogle{display:block;min-height:280px}
@media (min-width:768px){.bc-ad .adsbygoogle{min-height:250px}}

/* ⑨ 단추 링크(404 '홈으로' 등): GP 링크 색(.inside-article a)이 흰 글자를 덮지 않게.
   지금도 파랑 글자(진초록 바탕 대비 1.82)로 보이고, 링크 색 설정을 진초록으로 바꾸면 바탕과 같은 색이 되므로 함께 고침 */
.inside-article a.bc-btn,.inside-article a.bc-btn:is(:hover,:focus){color:#fff}