@charset "utf-8";

/* ============================================================
   mcat09 — 태그 클라우드형
   태그가 첫 화면을 꽉 채움 → 클릭 시 접히고 카드 등장
   ============================================================ */

.tc-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 60px;
}

/* ============================================================
   ① 태그 스테이지 (전체 화면)
   ============================================================ */
.tc-stage {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 48px;
	padding: 90px 60px 60px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-bg-main);
}

.tc-stage-head {
	text-align: center;
	opacity: 0;
}

.tc-stage-label {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	margin-bottom: 12px;
}

.tc-stage-tit {
	font-size: clamp(36px, calc(16px + 4vw), 64px);
	font-weight: 900;
	font-family: var(--font-sub-title);
	color: var(--color-text-main);
	margin-bottom: 16px;
}

.tc-stage-hint {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
}

/* ── 태그 클라우드 ── */
.tc-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	justify-content: center;
	align-items: center;
	max-width: 1000px;
}

/* ── 태그 공통 ── */
.tc-tag {
	cursor: pointer;
	border: none;
	background: transparent;
	padding: 4px 0;
	font-weight: 700;
	color: var(--color-text-muted);
	transition: color 0.2s ease, opacity 0.2s ease;
	opacity: 0;
}
.tc-tag:hover {
	color: var(--color-text-main);
}

/* 호버 dim — 나머지 흐려짐 */
.tc-cloud.has-hover .tc-tag:not(.is-hovered) {
	opacity: 0.15;
}

/* ── 크기별 스타일 ── */
.tc-tag--xl {
	font-size: clamp(36px, calc(20px + 3.5vw), 56px);
	font-weight: 900;
	color: var(--color-text-main);
}
.tc-tag--lg {
	font-size: clamp(26px, calc(14px + 2.5vw), 40px);
	font-weight: 800;
	color: var(--color-text-main);
}
.tc-tag--md {
	font-size: clamp(20px, calc(12px + 1.8vw), 30px);
	font-weight: 700;
}
.tc-tag--sm {
	font-size: clamp(18px, calc(10px + 1.2vw), 22px);
	font-weight: 500;
}

/* ============================================================
   ② 선택 후 필터 바 (sticky, 초기 숨김)
   ============================================================ */
/* ── 필터 바 + 그리드 묶음 ── */
.tc-results {
	height: 0;
	overflow: hidden;
}

.tc-filter-bar {
	position: sticky;
	top: 90px;
	z-index: 10;
	background: var(--color-bg-main);
	border-bottom: 1px solid var(--color-border);
	padding: 14px 0;
	opacity: 0;
}

.tc-filter-bar .tc-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
}

.tc-filter-tag {
	font-size: clamp(18px, calc(10px + 1.2vw), 24px);
	font-weight: 800;
	color: var(--color-text-main);
	font-family: var(--font-sub-title);
}

.tc-filter-count {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	margin-left: auto;
}

.tc-all-btn {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	background: none;
	border: 1px solid var(--color-border);
	padding: 4px 14px;
	cursor: pointer;
	margin-left: 16px;
	transition: color 0.2s, border-color 0.2s;
}
.tc-all-btn:hover {
	color: var(--color-text-main);
	border-color: var(--color-text-main);
}

/* ============================================================
   ③ 기사 그리드 (초기 숨김)
   ============================================================ */
.tc-grid-sec {
	padding: 56px 0 100px;
}

.tc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 32px;
}

.tc-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.tc-card-img-wrap {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-bottom: 16px;
}
.tc-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.tc-card-link:hover .tc-card-img-wrap img {
	transform: scale(1.04);
}

.tc-card-cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 700;
	color: var(--color-text-muted);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.tc-card-tit {
	font-size: clamp(18px, calc(10px + 1.2vw), 22px);
	font-weight: 700;
	color: var(--color-text-main);
	word-break: keep-all;
	margin-bottom: 12px;
	transition: color 0.2s;
}
.tc-card-link:hover .tc-card-tit {
	color: var(--color-primary);
}

.tc-card-more {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	color: var(--color-text-muted);
	transition: color 0.2s;
}
.tc-card-link:hover .tc-card-more {
	color: var(--color-text-main);
}

.tc-card {
	opacity: 0;
	transform: translateY(16px);
}

/* ── 결과 없음 ── */
.tc-empty {
	display: none;
	padding: 80px 0;
	text-align: center;
}
.tc-empty p {
	font-size: clamp(16px, calc(10px + 1vw), 20px);
	color: var(--color-text-muted);
}

/* ============================================================
   반응형 — 999px
   ============================================================ */
@media (max-width: 999px) {
	.tc-stage {
		padding: 40px;
	}
	.tc-wrap {
		padding: 0 40px;
	}
	.tc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   반응형 — 768px
   ============================================================ */
@media (max-width: 768px) {
	.tc-stage {
		padding: 70px 20px 40px;
		gap: 32px;
	}
	.tc-filter-bar {
		top: 70px;
	}
	.tc-wrap {
		padding: 0 20px;
	}
	.tc-cloud {
		gap: 10px 14px;
	}
	.tc-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px 16px;
	}
	.tc-grid-sec {
		padding: 40px 0 72px;
	}
}

/* ============================================================
   반응형 — 499px
   ============================================================ */
@media (max-width: 499px) {
	.tc-grid {
		grid-template-columns: 1fr;
	}
}