/* ============================================
   betting-tips — 썸네일 카드 그리드 (.tg-*) · 2026-09-10
   ============================================
   이 파일은 betting-tips 만 보유한다. 배너·검색·분류탭·툴바·페이징·하단 안내는
   4보드 공유 list.css 가 그대로 담당하고, 여기엔 카드 그리드 규칙만 둔다.
   값의 SSOT 는 tokens.css(#nt_body 스코프) — hex 하드코딩 금지(다크모드 블록만 §7.4 예외).
   카드 관용구는 talent-market/style.css .tm-card 를 미러링했다(카드당 링크 1개 · stretched-link · 썸네일은 div).
   ============================================ */

/* 그리드 — PC 열 수는 list.skin.php 가 게시판설정 bo_gallery_cols 로 붙이는 --cols-N(2~5).
   태블릿 2열·폰 1열은 아래 미디어쿼리. 제목 박은 썸네일(16:9)은 폭 300px 아래에서 글씨가 안 읽혀 폰은 1열이다. */
.tg-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 16px;
	padding: 4px 0 8px;
}
.tg-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tg-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tg-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* 카드 — 그림자·hover 모션은 토토 목록카드(.sbc-cl__card)·재능마켓(.tm-card)과 같은 규약(DESIGN_SYSTEM §5) */
.tg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-10);
	overflow: hidden;
	box-shadow: var(--sh-card);
	transition: transform .15s, box-shadow .15s;
}
.tg-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sh-md);
}
.tg-card--active { border-color: var(--brand); }

/* 관리자 체크박스 — 카드 전체 클릭 오버레이(z-index:1) 위 */
.tg-card-chk {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	margin: 0;
}

/* 썸네일 16:9 — list.skin.php $tg_thumb_w/h(640×360)와 짝. 비율을 바꾸면 그쪽·write.skin.php 안내도 같이 */
.tg-card-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--thumb-bg);
	overflow: hidden;
}
.tg-card-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 이미지 없는 글 — 제목을 타일에 크게 렌더해 "제목 박힌 썸네일"과 같은 무게로 보이게 한다(그리드가 비지 않는다).
   같은 제목이 아래 .tg-card-title 에 텍스트로 한 번 더 있으므로 aria-hidden(중복 낭독 방지). */
.tg-card-thumb-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
	background: linear-gradient(135deg, var(--brand) 0%, var(--brand-hover) 100%);
	color: #fff;
}
.tg-card-thumb-fallback span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	text-align: center;
	font-family: var(--font-ui);
	font-size: clamp(16px, 1.6vw, 22px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* 타일 좌상단 태그 묶음(공지 배지 + 분류칩) — 유튜브 라이브 배지 자리.
   배지·칩은 높이 강제 없음·대칭 패딩·정수 line-height(DESIGN_SYSTEM 「뱃지·칩 만드는 법」) */
.tg-card-tags {
	position: absolute;
	top: 8px;
	left: 8px;
	display: flex;
	gap: 4px;
	pointer-events: none;	/* 카드 클릭 오버레이를 가리지 않는다 */
}
.tg-card-chk + .tg-card-thumb .tg-card-tags { left: 32px; }	/* 관리자 화면에선 체크박스 옆으로 */
.tg-card-badge,
.tg-card-cate {
	display: inline-block;
	padding: 3px 8px;
	border-radius: var(--r-4);
	font-size: 11px;
	font-weight: 700;
	line-height: 14px;
	color: #fff;
}
.tg-card-badge { background: var(--brand); }
.tg-card-badge .fa { margin-right: 4px; font-size: 10px; }
/* 분류칩 — 어떤 썸네일 위에서도 읽히게 반투명 검정(댓글 pill 과 같은 톤) */
.tg-card-cate { background: rgba(0,0,0,.62); font-weight: 600; }
/* 댓글 수 — 유튜브 재생시간 자리(우하단)·반투명 검정 pill */
.tg-card-cmt {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-block;
	padding: 2px 7px;
	border-radius: var(--r-4);
	background: rgba(0,0,0,.72);
	color: #fff;
	font-family: var(--font-num);
	font-size: 11px;
	font-weight: 600;
	line-height: 14px;
}
.tg-card-cmt .fa { margin-right: 4px; font-size: 10px; }

/* 카드 본문 */
.tg-card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px 12px;
	min-width: 0;
}
.tg-card-title {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;	/* 공백 없는 긴 문자열도 clamp 가 걸리게 */
}
.tg-card-title a {
	color: inherit;
	text-decoration: none;
}
/* 부트스트랩 a:hover{underline}(0,1,1) 보다 특이도 한 단계 위 — 로드 순서 무관 */
.tg-card-title a:hover,
.tg-card-title a:focus,
.tg-card-title a:active {
	color: var(--brand);
	text-decoration: none;
}
/* 카드 전체 클릭 — 제목 링크의 투명 오버레이(stretched-link). 기준 컨테이너는 .tg-card 의 position:relative */
.tg-card-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.tg-card-title .na-icon,
.tg-card-title .na-hicon { vertical-align: -1px; margin-right: 3px; }

.tg-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--sub);
	font-family: var(--font-num);
	font-size: 12px;
	line-height: 16px;
}
.tg-card-meta .fa { margin-right: 3px; color: var(--muted); }
.tg-card-meta-sep { color: var(--muted-2); }

/* 반응형 — 태블릿·폰 모두 2열(폰 1열은 한 화면에 글 하나뿐이라 폐기 — 2026-09-10). 폰에선 여백·글자만 줄인다 */
@media (max-width: 991px) {
	.tg-grid,
	.tg-grid--cols-3, .tg-grid--cols-4, .tg-grid--cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tg-card-thumb-fallback span { font-size: clamp(15px, 2.2vw, 20px); }
}
@media (max-width: 575px) {
	.tg-grid { gap: 12px 10px; }
	.tg-card:hover { transform: none; }	/* 터치 기기엔 hover 리프트 무의미 */
	.tg-card-thumb-fallback { padding: 8px 10px; }
	.tg-card-thumb-fallback span { font-size: clamp(13px, 3.8vw, 16px); }
	.tg-card-body { padding: 8px 9px 10px; gap: 3px; }
	.tg-card-title { font-size: 13px; }
	.tg-card-meta { font-size: 11px; }
	.tg-card-tags { top: 6px; left: 6px; }
	.tg-card-chk + .tg-card-thumb .tg-card-tags { left: 30px; }
	.tg-card-badge, .tg-card-cate { padding: 2px 6px; font-size: 10px; line-height: 12px; }
	.tg-card-cmt { right: 6px; bottom: 6px; }
}

/* 다크모드 — 별도 팔레트 토큰 도입 전까지 zinc 리터럴(DESIGN_SYSTEM §7.4 예외, list.css 관행) */
html.dark-mode .tg-card { background: #1F2937; border-color: #374151; }
html.dark-mode .tg-card-title { color: #E2E8F0; }
html.dark-mode .tg-card-meta { color: #94A3B8; }
html.dark-mode .tg-card-thumb { background: #111827; }