/* ===========================================
   Home Layout GP - Styles v1.2.0
   =========================================== */

/* ── 래퍼 & 컨테이너 ─────────────────────── */
.hlgp-outer-wrap {
	width: 100%;
}

/* 히어로 래퍼: max-width 중앙 정렬, 패딩 없음 */
/* 히어로 래퍼: PC/태블릿 좌우 패딩 20px, 모바일은 패딩 없음 */
.hlgp-hero-wrap {
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 20px;
}

/* 카테고리/하단: PC/태블릿 좌우 패딩 20px */
.hlgp-container {
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 20px;
}

/* PC 전용: 히어로와 카테고리 사이 여백 (min-width: 769px) */
@media (min-width: 769px) {
	.hlgp-hero-wrap {
		padding-bottom: 0;
	}
	.hlgp-outer-wrap + .hlgp-outer-wrap {
		margin-top: 40px;
	}
}

/* 모바일: 히어로는 패딩 없음, 카테고리/하단만 15px */
@media (max-width: 768px) {
	.hlgp-hero-wrap {
		padding: 0 5px;
	}
	.hlgp-container {
		padding: 0 15px;
	}
}

/* ── 카테고리 뱃지 ───────────────────────── */
.hlgp-badge {
	display: inline-block;
	background: #111;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 7px;
	border-radius: 2px;
	letter-spacing: 0.3px;
	line-height: 1.4;
}

/* ===========================================
   히어로 섹션
   =========================================== */
.hlgp-hero {
	margin-bottom: 0; /* 래퍼 padding-bottom으로 대신 처리 */
}



/* PC: 왼쪽 메인 + 오른쪽 서브 2×2, 전체 높이 일치 */
.hlgp-hero-grid {
	display: grid;
	grid-template-columns: 51% 1fr;
	gap: 4px;
	aspect-ratio: 16 / 7;
}

/* 메인 카드: 전체 높이 */
.hlgp-hero-main {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	height: 100%;
	border-radius: 4px;
}

/* 서브 그리드: 메인과 동일 높이의 2×2 */
.hlgp-hero-sub-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 4px;
	/* 부모 그리드 aspect-ratio에 맞춰 자동으로 높이 결정 */
	min-height: 0;
}

.hlgp-hero-sub {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	height: 100%;
	border-radius: 4px;
}

/* 이미지: 카드 전체 채움 */
.hlgp-hero-img {
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: block;
}

.hlgp-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: filter 0.3s ease;
}

/* hover: 밝아짐만 (확대 없음) */
.hlgp-hero-main:hover .hlgp-hero-img img,
.hlgp-hero-sub:hover .hlgp-hero-img img {
	filter: brightness(1.12);
}

/* 오버레이 */
.hlgp-hero-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 14px 16px;
	background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.15) 80%, transparent 100%);
	color: #fff;
}

.hlgp-hero-main .hlgp-hero-overlay {
	padding: 28px 28px;
}

.hlgp-hero-overlay .hlgp-badge {
	margin-bottom: 6px;
}

.hlgp-hero-title {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	margin: 6px 0 8px;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hlgp-hero-sub-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	margin: 4px 0 3px;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hlgp-hero-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 4px;
	font-size: 12px;
	color: rgba(255,255,255,0.8);
	margin-top: 6px;
}

.hlgp-hero-overlay .hlgp-date {
	font-size: 12px;
	color: rgba(255,255,255,0.8);
	/* display:block 제거 → flex 컨테이너에서 인라인 유지 */
}

/* ── 모바일 히어로: 메인 1개 + 서브 4개(2열씩) ── */
@media (max-width: 768px) {
	.hlgp-hero-grid {
		grid-template-columns: 1fr;
		aspect-ratio: auto; /* 모바일에서 PC의 aspect-ratio 해제 */
		height: auto;
		gap: 3px;
	}

	/* 모바일: 메인 카드는 위쪽 좌우만 border-radius */
	.hlgp-hero-main {
		height: auto;
		border-radius: 4px 4px 0 0;
	}

	.hlgp-hero-main .hlgp-hero-img {
		aspect-ratio: 16 / 9;
		height: auto;
	}

	/* 서브 4개 모두 표시, 2열 */
	.hlgp-hero-sub-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		height: auto;
		gap: 3px;
	}

	/* 모바일: 서브 카드는 border-radius 없음 */
	.hlgp-hero-sub {
		height: auto;
		border-radius: 0;
	}

	.hlgp-hero-sub .hlgp-hero-img {
		aspect-ratio: 16 / 9;
		height: auto;
	}

	/* 모바일에서 서브 4개 모두 표시 (숨김 해제) */
	.hlgp-hero-sub:nth-child(n+3) {
		display: block;
	}

	.hlgp-hero-title {
		font-size: 1.15rem;
	}

	.hlgp-hero-main .hlgp-hero-overlay {
		padding: 14px 16px;
	}
}

/* ===========================================
   섹션 공통
   =========================================== */
.hlgp-cat-section {
	margin-bottom: 40px;
}

/* 섹션 헤더 */
.hlgp-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid #111;
}

.hlgp-section-title {
	font-size: 22px;
	font-weight: 800;
	color: #111;
	margin: 0;
	line-height: 1.2;
}

/* 모두 보기 링크/텍스트 */
.hlgp-view-all {
	font-size: 13px;
	color: #666;
	text-decoration: none;
	white-space: nowrap;
	margin-left: 16px;
}

/* hover 시 underline 없음 */
.hlgp-view-all:hover {
	color: #111;
	text-decoration: none;
}

.hlgp-view-all-text {
	font-size: 13px;
	color: #888;
	white-space: nowrap;
	margin-left: 16px;
}

/* ===========================================
   카드 그리드
   =========================================== */
.hlgp-card-grid {
	display: grid;
	gap: 20px;
}

.hlgp-card-grid.col-3 {
	grid-template-columns: repeat(3, 1fr);
}

.hlgp-card-grid.col-4 {
	grid-template-columns: repeat(4, 1fr);
}

/* ===========================================
   카드 아이템
   =========================================== */
.hlgp-card {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	overflow: hidden;
	transition: box-shadow 0.2s ease;
}

.hlgp-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* 썸네일 */
.hlgp-card-thumb-link {
	display: block;
	text-decoration: none;
}

.hlgp-card-img-wrap {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #f0f0f0;
}

.hlgp-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* hover 밝아짐만 (확대 없음) */
	transition: filter 0.3s ease;
}

.hlgp-card:hover .hlgp-card-img-wrap img {
	filter: brightness(1.08);
}

.hlgp-card-no-thumb {
	width: 100%;
	height: 100%;
	background: #e0e0e0;
}

/* 뱃지 */
.hlgp-card-img-wrap .hlgp-badge {
	position: absolute;
	bottom: 8px;
	left: 8px;
}

/* 카드 본문 */
.hlgp-card-body {
	padding: 12px 14px 14px;
}

.hlgp-card-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 8px;
	color: #111;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hlgp-card-title a {
	color: #111;
	text-decoration: none;
	transition: color 0.15s;
}

.hlgp-card-title a:hover {
	color: #c0392b;
}

.hlgp-card-author {
	font-size: 12px;
	color: #888;
	margin: 0;
}

/* 모바일 카드 */
@media (max-width: 768px) {
	.hlgp-card-grid.col-3,
	.hlgp-card-grid.col-4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.hlgp-card-title {
		font-size: 14px;
	}
}

/* ===========================================
   더보기 버튼 (벤치마크 스타일)
   =========================================== */
.hlgp-load-more-wrap {
	text-align: center;
	margin-top: 28px;
}

#hlgp-load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 32px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	min-width: 200px;
}

#hlgp-load-more-btn:hover {
	background: #fafafa;
	border-color: #bbb;
}

#hlgp-load-more-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Material Icons 아이콘 */
#hlgp-load-more-btn::after {
	content: 'expand_more';
	font-family: 'Material Icons Round';
	font-size: 20px;
	font-weight: 400;
	line-height: 1;
	margin-left: 2px;
	vertical-align: middle;
}

/* 로딩 중: 아이콘 숨기고 스피너 표시 */
#hlgp-load-more-btn.loading::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid #ccc;
	border-top-color: #555;
	border-radius: 50%;
	animation: hlgp-spin 0.7s linear infinite;
	vertical-align: middle;
	margin-left: 4px;
}

@keyframes hlgp-spin {
	to { transform: rotate(360deg); }
}

/* ── 모바일: GP 테마 #content 기본 패딩 제거 ── */
@media (max-width: 768px) {
	.home #content {
		padding-left: 0;
		padding-right: 0;
	}

	/* 히어로 하단 여백: 모바일 */
	.hlgp-hero-wrap {
		padding-bottom: 20px;
	}

	/* 카테고리 섹션 간격: 모바일 40px */
	.hlgp-cat-section {
		margin-bottom: 40px;
	}
}