/* ==========================================================================
   (주)후트웍 — 미디어 (media) 페이지 전용 CSS
   톤: daehan 클론. main.css 토큰/공유 클래스(.dl-sub·.dl-sec·.dl-footer) 재사용.
   스토리보드 §9: 게시글 목록(제목·날짜·요약·썸네일) + 카테고리 필터 + 페이지네이션.
   카드 호버는 비즈니스·방산 제품카드와 통일(1px 블루 테두리 + 이미지 줌). radius 0.
   ========================================================================== */

/* ==========================================================================
   1. 게시글 목록 — 섹션 헤드(좌) + 카테고리 필터(우) + 카드 그리드
   ========================================================================== */
.md-list__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px 40px;
	flex-wrap: wrap;
	margin-bottom: 52px;
}
.md-list__title-wrap .dl-sec__title {
	margin-top: 12px;
}

/* 카테고리 필터 (시안 — 실제 필터는 개발 단계 구현) */
.md-filter {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.md-filter__btn {
	display: inline-block;
	padding: 11px 22px;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink-soft);
	border: 1px solid var(--line);
	transition: color .3s, border-color .3s, background .3s;
}
.md-filter__btn:hover {
	color: var(--accent);
	border-color: var(--accent);
}
.md-filter__btn.is-active {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

/* ==========================================================================
   2. 카드 그리드 (3열) — 썸네일 + 카테고리/날짜 + 제목(2줄) + 요약(2줄)
   ========================================================================== */
.md-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 26px;
}
.md-card {
	background: #fff;
}
.md-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	border: 1px solid var(--line);
	transition: border-color .35s ease;
}
.md-card__link:hover {
	border-color: var(--accent);
}

/* 썸네일 — 직각, 줌 인 */
.md-card__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e7eef3;
}
.md-card__img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.md-card__link:hover .md-card__img {
	transform: scale(1.06);
}

/* 카드 본문 */
.md-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 26px 30px;
}
.md-card__meta {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 16px;
}
.md-card__cat {
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--accent);
	padding: 5px 11px;
	border: 1px solid rgba(0, 130, 186, 0.35);
}
.md-card__date {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}
.md-card__title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin: 0;
	/* 제목 2줄 고정 — 카드 높이 통일 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.md-card__summary {
	flex: 1;
	margin: 13px 0 0;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-soft);
	/* 요약 2줄 고정 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ==========================================================================
   3. 페이지네이션 (시안 — 실제 동작은 개발 단계)
   ========================================================================== */
.md-page {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 72px;
}
.md-page__num,
.md-page__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-family: var(--font-display);
	font-size: 15px;
	color: var(--ink-soft);
	border: 1px solid var(--line);
	transition: color .3s, border-color .3s, background .3s;
}
.md-page__num:hover,
.md-page__arrow:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.md-page__num.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.md-page__arrow svg {
	width: 16px;
	height: 16px;
}
.md-page__arrow[aria-disabled="true"] {
	opacity: 0.4;
	pointer-events: none;
}

/* ==========================================================================
   반응형 — 1200 / 768
   ========================================================================== */
@media (max-width: 1200px) {
	.md-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 22px;
	}
}
@media (max-width: 768px) {
	.md-list__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
		margin-bottom: 36px;
	}
	.md-filter__btn {
		padding: 9px 16px;
		font-size: 13.5px;
	}
	.md-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
	.md-card__title {
		font-size: 18px;
	}
	.md-page {
		margin-top: 50px;
	}
}