/*
Theme Name: Gongmo Hub (공모전 허브)
Theme URI: https://crowlly.xyz
Description: Twenty Twenty-Five 자식 테마. AI 공모전 안내 블로그(crowlly.xyz 스타일)를 위한 공모전 글타입, 카드형 목록, 상세 정보 박스를 제공합니다.
Author: Dalmaroo
Template: twentytwentyfive
Version: 1.10.0
Text Domain: gongmo-hub-child
*/

/* ===========================================================
   디자인 토큰
   =========================================================== */
:root {
	--gm-ink: #13161f;
	--gm-ink-soft: #5b6472;
	--gm-ink-faint: #8a92a1;
	--gm-line: rgba(19, 22, 31, 0.10);
	--gm-line-strong: rgba(19, 22, 31, 0.18);
	--gm-surface: #ffffff;
	--gm-surface-soft: #f5f6f8;
	--gm-primary: #1857c4;
	--gm-primary-dark: #123f8f;
	--gm-primary-soft: #eaf1fd;
	--gm-warn: #d8451a;
	--gm-warn-soft: #fff1ea;
	--gm-radius-lg: 18px;
	--gm-radius-md: 12px;
	--gm-radius-pill: 999px;
	--gm-shadow-sm: 0 1px 2px rgba(19, 22, 31, 0.06);
	--gm-shadow-md: 0 10px 24px rgba(19, 22, 31, 0.10);
	--gm-shadow-lg: 0 20px 45px rgba(19, 22, 31, 0.16);
}

/* ===========================================================
   공통: 커스텀 요소는 항상 border-box
   부모 테마에 전역 box-sizing이 없어, 패딩/보더가 폭에 포함되지
   않으면 width:100% 요소(지원 버튼 등)가 모바일에서 넘친다.
   =========================================================== */
[class^="gongmo-"],
[class*=" gongmo-"] {
	box-sizing: border-box;
}

/* ===========================================================
   헤더 / 내비게이션
   =========================================================== */
.wp-site-blocks > .wp-block-template-part:first-child,
header.wp-block-template-part {
	background: var(--gm-surface);
	border-bottom: 1px solid var(--gm-line);
}

.wp-block-site-title a {
	font-weight: 700;
	/* 한글(전각 글자)은 음수 자간에서 글자가 서로 겹쳐 보일 수 있어
	   normal로 둔다. */
	letter-spacing: normal;
}

.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 500;
	color: var(--gm-ink);
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--gm-primary);
}

.wp-block-navigation__submenu-container {
	background: var(--gm-surface) !important;
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius-md);
	box-shadow: var(--gm-shadow-md);
	overflow: hidden;
	padding: 6px !important;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--gm-primary-soft);
}

/* ===========================================================
   브레드크럼
   =========================================================== */
.gongmo-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	line-height: 1.5;
	font-size: 0.85rem;
	color: var(--gm-ink-faint);
	margin-bottom: 18px;
}

/* 구분자 '/'가 앞뒤 글자에 달라붙지 않도록 flex 아이템으로 고정하고
   자간을 주지 않는다(한글 링크와 겹침 방지). */
.gongmo-breadcrumb-sep {
	flex: 0 0 auto;
	letter-spacing: normal;
	color: var(--gm-line-strong);
}

.gongmo-breadcrumb a {
	color: var(--gm-ink-faint);
	text-decoration: none;
}

.gongmo-breadcrumb a:hover {
	color: var(--gm-primary);
}

.gongmo-breadcrumb .is-current {
	color: var(--gm-ink-soft);
}

/* ===========================================================
   히어로 (홈)
   =========================================================== */
.gongmo-hero-eyebrow {
	/* inline-flex면 내용 폭만큼만 차지하는 인라인 상자가 되어, 자기 자신의
	   text-align: center가 아니라 부모의 정렬(왼쪽)을 따라가 버린다.
	   그래서 제목·본문·버튼은 가운데인데 이 라벨만 왼쪽 끝에 붙어 있었다.
	   블록 레벨 flex로 두어 컨테이너 전체를 차지하게 하고 내용을 가운데로 모은다. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gm-primary-soft);
	margin-bottom: 8px;
}

/* ===========================================================
   공모전 카드 그리드 (아카이브 / 홈 화면 공용)
   =========================================================== */
.gongmo-grid {
	display: grid;
	/* min(100%, 280px)로 감싸 320px 미만 화면에서도 트랙이 컨테이너를
	   넘지 않게 해 가로 스크롤을 방지합니다. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 28px;
	margin-top: 24px;
	/* 카드 그리드는 본문 폭(645px)이 아니라 넓은 폭을 쓴다.
	   theme.json의 wideSize(1340px)를 따르되 값이 없으면 1200px로 폴백. */
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* Query Loop을 쓰는 경우, 카드는 .gongmo-grid의 직계 자식이 아니라
   그 안의 <ul class="wp-block-post-template">의 자식이다.
   래퍼에만 그리드를 걸면 ul 하나가 첫 트랙을 차지하고 카드는 그 안에서
   세로로 쌓여 1열로 보인다. 그래서 ul을 전체 트랙에 걸치게 한 뒤
   ul 자신에게 동일한 그리드를 다시 선언한다.
   (functions.php의 [gongmo_related_winners]처럼 카드를 직접 넣는
    .gongmo-grid도 그대로 동작하도록 래퍼의 grid 선언은 유지한다) */
.gongmo-grid > .wp-block-post-template {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 그리드 아이템은 <li>이고 카드는 그 안의 div다. li는 행 높이만큼 늘어나지만
   카드는 내용 높이 그대로라, 같은 줄인데도 카드 아래쪽 선이 들쭉날쭉해진다.
   카드를 li 높이에 맞춰 늘여 한 줄의 카드 높이를 맞춘다. */
.gongmo-grid > .wp-block-post-template > li {
	display: flex;
	/* 워드프레스 flow 레이아웃이 형제 li에 margin-block-start를 넣어서
	   첫 카드만 위로 튀어나오고 높이도 달라진다. 간격은 gap이 담당하므로 마진은 0. */
	margin-block-start: 0;
	margin-block-end: 0;
}

.gongmo-grid > .wp-block-post-template > li > .gongmo-card {
	width: 100%;
}

/* Query Loop이 감싸는 개별 카드 그룹 */
.gongmo-card {
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius-lg);
	overflow: hidden;
	background: var(--gm-surface);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	padding-bottom: 20px;
}

.gongmo-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--gm-shadow-lg);
	border-color: var(--gm-line-strong);
}

/* 카드 썸네일 ([gongmo_card_thumb] 쇼트코드가 만드는 영역)
   공식 홍보 포스터는 대개 세로형(예: 외교부 1190×1684)이라, 가로 3:2로 두면
   위쪽만 잘리고 제목이 안 보였다. 포스터에 맞춰 세로 3:4로 둔다. */
.gongmo-card-thumb {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	margin-bottom: 14px;
	background: linear-gradient(135deg, var(--gm-primary-dark), var(--gm-primary));
}

.gongmo-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.gongmo-card:hover .gongmo-card-thumb img {
	transform: scale(1.03);
}

.gongmo-card-thumb.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	text-align: center;
}

.gongmo-card-thumb-initial {
	font-size: 2.75rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.92);
}

/* 대표 이미지가 없을 때 보여주는 주최기관 약칭('외교부', '행안부' 등).
   제목 첫 글자는 대부분 연도('2')라 카드끼리 구별이 안 됐다. */
.gongmo-card-thumb-org {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.95);
	word-break: keep-all;
}

/* 기관 이름을 해시해 6개 색 계열 중 하나로 고정 매핑한다(gongmo_thumb_hue).
   같은 기관은 늘 같은 색, 다른 기관은 다른 색이라 목록에서 구분이 쉬워진다.
   모두 브랜드의 짙은 톤 안에서 색상만 달리해 통일감은 유지한다. */
.gongmo-card-thumb.is-hue-0 {
	background: linear-gradient(135deg, #123f8f, #1857c4); /* 남색(기본) */
}

.gongmo-card-thumb.is-hue-1 {
	background: linear-gradient(135deg, #0f4c4a, #14807a); /* 청록 */
}

.gongmo-card-thumb.is-hue-2 {
	background: linear-gradient(135deg, #3b2a72, #5b43b5); /* 보라 */
}

.gongmo-card-thumb.is-hue-3 {
	background: linear-gradient(135deg, #1f3a55, #2f6690); /* 슬레이트 블루 */
}

.gongmo-card-thumb.is-hue-4 {
	background: linear-gradient(135deg, #7a2f3e, #b04352); /* 자주 */
}

.gongmo-card-thumb.is-hue-5 {
	background: linear-gradient(135deg, #1e4d2b, #2f7d4f); /* 진녹 */
}

/* 마감된 공모전은 썸네일을 눌러 둔다. '마감' 뱃지 하나만으로는
   목록을 훑을 때 눈에 잘 안 들어온다. 대표 이미지가 있는 카드에도 적용된다. */
.gongmo-card-thumb.is-closed {
	filter: saturate(0.25) brightness(0.82);
}

.gongmo-card-thumb.is-closed .gongmo-card-thumb-org,
.gongmo-card-thumb.is-closed .gongmo-card-thumb-initial {
	color: rgba(255, 255, 255, 0.75);
}

.gongmo-card .wp-block-post-title,
.gongmo-card .wp-block-post-excerpt {
	padding-left: 20px;
	padding-right: 20px;
}

.gongmo-card .wp-block-post-title {
	font-size: 1.05rem;
	line-height: 1.4;
	margin-top: 4px;
}

.gongmo-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--gm-ink);
}

.gongmo-card .wp-block-post-title a:hover {
	color: var(--gm-primary);
}

.gongmo-card .wp-block-post-excerpt {
	color: var(--gm-ink-soft);
	font-size: 0.9rem;
}

/* 분야 필터 칩 (아카이브) */
/* 분야 필터(core/categories 블록).
   개수 '(2)'는 <a> 바깥에 그냥 놓이는 텍스트 노드다. 그래서 알약을 <a>에만
   입히면 개수는 알약 밖에 남아 <ul>의 본문 폰트(22px)를 그대로 상속하고,
   13.6px짜리 알약 글자보다 훨씬 커져서 옆 알약과 부딪혀 보였다.
   알약을 <li>에 입혀 링크와 개수를 한 알약 안에 담는다. */
.gongmo-category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 8px;
	padding: 0;
	list-style: none; /* 남아 있던 목록 불릿(•) 제거 */
}

.gongmo-category-filter li {
	display: inline-flex;
	align-items: baseline;
	gap: 4px; /* inline-flex 안에서는 앞뒤 공백이 지워지므로 gap으로 띄운다 */
	margin: 0;
	padding: 6px 16px;
	border-radius: var(--gm-radius-pill);
	background: var(--gm-surface-soft);
	border: 1px solid transparent;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gm-ink-faint); /* 개수 색 (링크보다 옅게) */
}

.gongmo-category-filter a {
	color: var(--gm-ink-soft);
	font: inherit;
	text-decoration: none;
}

.gongmo-category-filter li:hover {
	border-color: var(--gm-primary);
}

.gongmo-category-filter li:hover a {
	color: var(--gm-primary);
}

/* 지금 보고 있는 분야는 채워진 알약으로 표시 */
.gongmo-category-filter li.current-cat {
	background: var(--gm-primary-soft);
	border-color: transparent;
}

.gongmo-category-filter li.current-cat a {
	color: var(--gm-primary-dark);
}

/* ===========================================================
   D-day / 상금 뱃지 (카드용, 상세페이지용 공용)
   =========================================================== */
.gongmo-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 20px;
	margin-bottom: 8px;
}

.gongmo-badge {
	display: inline-flex;
	align-items: center;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	padding: 4px 12px;
	border-radius: var(--gm-radius-pill);
	white-space: nowrap;
	max-width: 100%;
}

/* 상금 배지는 길어질 수 있어 줄바꿈을 허용한다(가로 오버플로우 방지).
   여러 줄로 접힐 때 줄끼리 겹치지 않도록 line-height를 넉넉히 둔다.
   상세 페이지의 정보 박스에서는 전체 내역을 그대로 보여주므로 이 기본값을 쓴다. */
.gongmo-badge.is-prize {
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
	line-height: 1.45;
	border-radius: 14px;
	text-align: center;
}

/* 다만 카드에서는 상금을 짧게 줄여(gongmo_prize_short) 한 줄로 고정한다.
   두 줄로 감기면 같은 줄 카드들의 제목 시작선이 어긋나기 때문이다.
   혹시 그래도 넘치면 잘라서 말줄임표로 보여준다(원문은 title 툴팁). */
.gongmo-card .gongmo-badge.is-prize {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}

.gongmo-badge.is-dday-open {
	background: var(--gm-primary-soft);
	color: var(--gm-primary-dark);
}

.gongmo-badge.is-dday-soon {
	background: var(--gm-warn-soft);
	color: var(--gm-warn);
}

.gongmo-badge.is-dday-closed {
	background: var(--gm-surface-soft);
	color: var(--gm-ink-faint);
}

.gongmo-badge.is-prize {
	background: var(--gm-ink);
	color: #ffffff;
}

/* ===========================================================
   상세 페이지 정보 박스
   =========================================================== */
.gongmo-detail-box {
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius-lg);
	padding: 28px;
	margin: 24px 0 40px;
	background: var(--gm-surface-soft);
}

/* 뱃지 줄 + 지원 버튼을 한 줄로. 버튼은 오른쪽 끝에 붙인다.
   폭이 모자라면 wrap으로 버튼이 아랫줄로 자연스럽게 내려간다. */
.gongmo-detail-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.gongmo-detail-box .gongmo-badges {
	padding: 0;
	margin-bottom: 0;
	/* 뱃지가 남는 공간을 차지해 버튼을 오른쪽 끝으로 민다.
	   min-width: 0이 있어야 긴 상금 뱃지가 버튼을 밀어내지 않는다. */
	flex: 1 1 auto;
	min-width: 0;
}

.gongmo-detail-row {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--gm-line);
	font-size: 0.95rem;
}

.gongmo-detail-row:last-of-type {
	border-bottom: none;
}

.gongmo-detail-row dt {
	flex: 0 0 96px;
	font-weight: 600;
	color: var(--gm-ink-soft);
}

.gongmo-detail-row dd {
	margin: 0;
	flex: 1;
	min-width: 0;
	color: var(--gm-ink);
	/* 주최란의 긴 문자열('기관 · 기관 · 기관')이 넘치거나 겹치지
	   않도록 한글 단어 단위로 줄바꿈한다. */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.gongmo-apply-button {
	/* inline-block이면 앵커 안의 줄바꿈·들여쓰기 공백이 두 번째 줄로 잡혀
	   버튼이 세로로 길쭉해졌다. flex + nowrap으로 한 줄 높이를 고정한다. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	flex: 0 0 auto;
	max-width: 100%;
	padding: 12px 28px;
	border-radius: var(--gm-radius-pill);
	background: var(--gm-primary);
	color: #ffffff !important;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--gm-shadow-sm);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.gongmo-apply-button:hover {
	background: var(--gm-primary-dark);
	box-shadow: var(--gm-shadow-md);
}

.gongmo-apply-button.is-disabled {
	background: var(--gm-ink-faint);
	box-shadow: none;
	pointer-events: none;
}

/* ===========================================================
   수상작 관련 스타일
   =========================================================== */
.gongmo-winners-section {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--gm-line);
}

.gongmo-winners-heading {
	margin-bottom: 4px;
}

.gongmo-winner-entrant {
	padding: 0 20px;
	color: var(--gm-ink-soft);
	font-size: 0.88rem;
}

/* ===========================================================
   출처/안내 문구 (콘텐츠 신뢰도)
   =========================================================== */
.gongmo-source-note {
	font-size: 0.82rem;
	color: var(--gm-ink-faint);
	border-left: 3px solid var(--gm-line-strong);
	padding-left: 12px;
	margin: 8px 0 24px;
}

/* ===========================================================
   푸터
   =========================================================== */
footer.wp-block-template-part {
	background: var(--gm-surface-soft);
	border-top: 1px solid var(--gm-line);
}

/* ===========================================================
   반응형: 태블릿 (~782px)
   =========================================================== */
@media (max-width: 782px) {
	/* 래퍼와 Query Loop의 ul 양쪽 모두 간격을 줄인다
	   (실제 카드 트랙은 ul에 있으므로 ul을 빠뜨리면 간격이 안 줄어든다) */
	.gongmo-grid,
	.gongmo-grid > .wp-block-post-template {
		gap: 20px;
	}
}

/* ===========================================================
   반응형: 모바일 (~600px)
   - 상세 정보 박스 패딩 축소
   - 상세 행(dt/dd)을 세로로 쌓아 라벨/값이 겹치지 않게 함
   - 지원 버튼을 가로 전체 폭으로(터치 타겟 확대)
   - 카드/배지 좌우 패딩을 줄여 텍스트 폭 확보
   =========================================================== */
@media (max-width: 600px) {
	.gongmo-detail-box {
		padding: 20px;
	}

	.gongmo-detail-row {
		flex-direction: column;
		gap: 2px;
	}

	.gongmo-detail-row dt {
		flex-basis: auto;
		font-size: 0.82rem;
	}

	/* 버튼은 가로 전체로 늘이지 않고 글자에 맞춘 자연스러운 크기로 두되,
	   패딩만 살짝 줄이고 터치 높이는 확보한다(넘침은 box-sizing이 방지). */
	.gongmo-apply-button {
		padding: 12px 22px;
	}

	.gongmo-card .wp-block-post-title,
	.gongmo-card .wp-block-post-excerpt,
	.gongmo-badges,
	.gongmo-winner-entrant {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* 대표 이미지가 없는 카드의 플레이스홀더는 기관명 몇 글자가 내용의 전부인데,
	   1열이 되는 모바일에서 세로 3:4를 그대로 쓰면 색상 박스 하나가 화면을 거의
	   다 덮는다(390px 폭에서 약 477px). 정보량에 견줘 스크롤 낭비가 너무 커서
	   모바일에서만 가로형 배너로 눕힌다.
	   실제 포스터가 걸린 카드는 이미지 자체가 정보이므로 3:4를 그대로 둔다
	   (여기서 눕히면 object-fit:cover가 포스터 제목을 잘라낸다).
	   600px 이하는 그리드가 항상 1열이라(2열은 640px부터) 썸네일 높이가 카드마다
	   달라도 한 행 안에서 아래쪽 선이 어긋나는 문제가 생기지 않는다. */
	.gongmo-card-thumb.is-placeholder {
		aspect-ratio: 16 / 9;
	}

	.gongmo-card-thumb-initial {
		font-size: 2.25rem;
	}

	.gongmo-card-thumb-org {
		font-size: 1.35rem;
	}

	.gongmo-breadcrumb {
		font-size: 0.8rem;
	}

	/* 한글 제목/본문은 모바일에서 자간을 표준으로 두고 단어 단위로
	   줄바꿈해, 축소 시 글자끼리·특수기호와 겹치는 현상을 막는다. */
	.gongmo-card .wp-block-post-title,
	.gongmo-card .wp-block-post-excerpt,
	.gongmo-winner-entrant,
	.gongmo-hero-eyebrow {
		letter-spacing: normal;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
}