/* 메인 홈 리뉴얼(2B 시안) 다크 테마 */
/* 페이지네이션(.pager)은 사이트 공용 site.css 로 이동됨 */
.home-page a { text-decoration: none; }
/* 본문 래퍼 패딩(인라인에서 이전) — 모바일에서 좌우 여백 축소 */
.home-wrap { padding: 28px 30px 60px; }
@media (max-width: 640px) { .home-wrap { padding: 22px 14px 50px; } }
/* ══ 사이트 소개 한 줄 ══
   소셜 로그인 공급자의 심사가 홈페이지만 보고 판단하는 자리다 — 이름과 하는 일을 한 줄에 둔다.
   글 목록이 이 화면의 주인공이므로 상자로 키우지 않고 필터 행 위에 얇게 얹는다.
   좁은 화면에서는 이름만 남기고 설명을 접는다(자리를 두 줄 이상 쓰지 않게). */
.home-about { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #1a2450; }
.ha-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ha-title { margin: 0; font-family: 'Press Start 2P', monospace; font-size: 13px; color: #f5c542; letter-spacing: .5px; white-space: nowrap; }
.ha-lead { font-size: 13px; line-height: 1.7; color: #8da0d6; }
/* 계정으로 무엇을 받아 어디에 쓰는지 — 인증이 요구하는 항목이라 빼지 말 것.
   읽어야 할 사람에게는 보이되 화면의 주인공(글 목록)을 밀지 않도록 한 단계 낮춘다. */
.ha-account { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: #6f7ea8; }
@media (max-width: 640px) {
	.ha-title { font-size: 11px; }
	.ha-lead { font-size: 12px; }
	.ha-account { font-size: 11.5px; }
}

.pill { font-size: 13px; color: #c3cdec; border: 1px solid #23306a; padding: 8px 15px; border-radius: 20px; display: inline-flex; align-items: center; gap: 7px; }
.pill.active { font-weight: 700; background: #f5c542; color: #0a1130; border-color: #f5c542; }

/* 상단 필터 행: 카테고리 pill 영역 + 검색폼 */
.home-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.home-cats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.home-cats .pill { flex: 0 0 auto; white-space: nowrap; }
.home-filter > form { flex: 0 0 auto; }
/* 모바일: 카테고리를 한 줄로 두고 좌우 스와이프(가로 스크롤). 스크롤바는 숨김 */
@media (max-width: 768px) {
	.home-filter { flex-wrap: nowrap; }
	.home-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
	.home-cats::-webkit-scrollbar { display: none; }
}

/* 대표 글(가로 2단) · 최근 글(3열) — 모바일에서는 1열로 세로 스택.
   fr 트랙은 minmax(0,1fr) 로 두어 긴 제목(콘텐츠 min-content)에 트랙이 늘어나 뷰포트를 넘치지 않게 함. */
.home-featured { display: grid; grid-template-columns: 44% minmax(0, 1fr); }
.home-recent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* 긴 제목이 옆으로 넘치지 않고 줄바꿈되도록 */
.home-featured h2, .home-recent h3 { overflow-wrap: anywhere; }
@media (max-width: 768px) {
	.home-recent { grid-template-columns: minmax(0, 1fr); }

	/* 대표 글도 최근 글 카드와 동일한 세로 컴팩트 카드로.
	   이미지 영역은 240px 기준으로 배치된 큰 로고(80px)·절대위치 배지가 있어,
	   높이만 줄이면 겹쳐서 잘려 보임 → 최근 카드 비율(46px 로고)에 맞춰 내부까지 축소.
	   본문은 세로중앙정렬(justify-content:center) 때문에 제목이 잘려 보여 flex-start 로.
	   값이 요소 인라인 스타일이라 !important 로 덮어씀. */
	.home-featured { grid-template-columns: minmax(0, 1fr); }
	/* 그리드/flex 자식이 콘텐츠보다 좁아질 수 있게(min-width:auto 무력화) → 로고 중앙정렬·제목 줄바꿈 정상화 */
	.home-featured > a, .home-featured > div { min-width: 0; }
	.home-featured > a { min-height: 120px !important; }
	.home-featured > a > div:nth-of-type(2) { gap: 7px !important; }
	.home-featured > a > div:nth-of-type(2) > div:first-child {
		width: 46px !important; height: 46px !important; font-size: 14px !important;
		border-radius: 10px !important; box-shadow: 0 3px 0 rgba(0,0,0,0.35) !important;
	}
	.home-featured > a > div:nth-of-type(2) > div:last-child { font-size: 9px !important; }
	.home-featured > a > span:last-of-type { display: none !important; } /* ★ FEATURED 배지 숨김 */
	.home-featured > div { padding: 15px 16px 17px !important; justify-content: flex-start !important; }
	.home-featured h2 { font-size: 15.5px !important; margin: 8px 0 8px !important; line-height: 1.45 !important; }
	.home-featured p { font-size: 12.5px !important; margin: 0 0 14px !important; }
}