/*
Theme Name: 찐템 (JJinTem)
Theme URI: https://jjintem.kr
Description: 트웬티트웬티파이브 자식 테마. "사도 돼 / 사지 마" 판정을 색으로 보여주는 국내 리뷰 블로그용.
Author: JJinTem
Template: twentytwentyfive
Version: 1.0.0
*/

/* ─────────────────────────────────────────────────────────────
   모바일 가독성

   부모 테마 기본값이 이 사이트에는 안 맞는 곳이 몇 군데 있었다.
   - 글 제목이 16.96px 로 본문(17.12px)보다 작아서 위계가 뒤집혀 있었다
   - 소제목 위 여백이 67.8px 라 모바일 화면의 8% 를 빈칸으로 썼다
   - 메뉴 3개가 전부 햄버거 안으로 숨어서 '오늘의 특가' 가 안 보였다
   방문자 대부분이 모바일이라 여기부터 맞춘다.
   ───────────────────────────────────────────────────────────── */

/* 헤더 — 항목이 3개뿐이라 접을 이유가 없다. 한 줄에 다 들어간다. */
.jt-nav .wp-block-navigation__container {
	gap: clamp(0.7rem, 3.5vw, 1.4rem);
	flex-wrap: nowrap;
}

.jt-nav .wp-block-navigation-item__content {
	font-size: clamp(0.82rem, 3.5vw, 1rem);
	white-space: nowrap;
}

/* 메뉴가 길어져도 사이트 제목이 먼저 줄지 않게 */
.jt-header-row > .wp-block-site-title {
	flex: 0 0 auto;
}

@media (max-width: 480px) {
	.jt-header-row {
		gap: 0.6rem;
	}

	/* 좁은 화면에선 사이트 제목을 조금 줄여 메뉴 자리를 만든다 */
	.wp-block-site-title a {
		font-size: 1rem;
	}
}

/* 글 제목 — 본문보다 작으면 안 된다 */
.wp-block-post-title {
	font-size: clamp(1.45rem, 5.6vw, 2.1rem);
	line-height: 1.4;
	letter-spacing: -0.02em;
	margin-bottom: 0.6em;
}

/* 소제목 — 크기는 살리되 위 여백을 줄인다 */
.entry-content h2,
.wp-block-post-content h2 {
	font-size: clamp(1.25rem, 4.6vw, 1.7rem);
	line-height: 1.42;
	letter-spacing: -0.02em;
	margin-top: 2.1em;
	margin-bottom: 0.55em;
}

@media (max-width: 480px) {
	.entry-content h2,
	.wp-block-post-content h2 {
		margin-top: 1.9em;
	}

	/* 좌우 여백 30px 는 좁은 화면에서 본문 폭을 너무 깎는다 */
	.wp-block-post-content > *,
	.entry-content > * {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}
}

/* 본문 — 한 문장씩 <br> 로 끊어 쓰므로 줄 사이가 촘촘하면 뭉쳐 보인다 */
.wp-block-post-content p,
.entry-content p {
	line-height: 1.85;
}

/* 표 — 좁은 화면에서 글자가 본문만 하면 답답하다 */
@media (max-width: 480px) {
	.wp-block-table td,
	.wp-block-table th {
		font-size: 0.92rem;
		padding: 0.55em 0.6em;
		line-height: 1.55;
	}

	.wp-block-table figcaption {
		font-size: 0.8rem;
	}
}

/* 이미지 캡션 — 근거 이미지를 짚어 주는 자리라 본문과 구분되어야 한다 */
.wp-element-caption {
	font-size: 0.86rem;
	line-height: 1.6;
	color: #8B919B;
}

/* 목록 */
.wp-block-list li {
	margin-bottom: 0.5em;
	line-height: 1.8;
}

/* 손가락으로 누르는 링크는 44px 이상이어야 한다 (터치 목표 최소치) */
@media (max-width: 480px) {
	.wp-block-post-content a[rel~="sponsored"] {
		display: inline-block;
		padding: 4px 0;
	}
}

/* 가이드 안내 — 허브는 고정 페이지라 글 목록에 안 나온다.
   메뉴 드롭다운만 두면 아는 사람만 찾으므로 홈 첫 화면에 펼쳐 놓는다. */
.jt-guides {
	border: 1px solid #E5E7EB;
	border-radius: 14px;
	padding: 22px 20px 12px;
	margin: 0 0 40px;
	background: #FAFBFC;
}

.jt-guides__title {
	font-size: 1.12rem;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.4;
}

.jt-guides__lead {
	font-size: 0.94rem;
	line-height: 1.65;
	color: #6B7280;
	margin: 0 0 14px;
}

.jt-guides__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 14px;
}

@media (max-width: 600px) {
	.jt-guides__list {
		grid-template-columns: 1fr;
	}
}

.jt-guides__list a {
	display: block;
	padding: 11px 0;
	text-decoration: none;
	border-top: 1px solid #EDEFF2;
}

.jt-guides__list strong {
	display: block;
	color: #1B64DA;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.45;
}

.jt-guides__list span {
	display: block;
	color: #6B7280;
	font-size: 0.87rem;
	line-height: 1.55;
	margin-top: 2px;
}

.jt-guides__list a:hover strong {
	text-decoration: underline;
}

/* 가이드 글 맨 아래 — 다른 가이드로 건너갈 자리 */
.jt-more-guides {
	border-top: 1px solid #E5E7EB;
	margin: 40px 0 0;
	padding-top: 20px;
}

.jt-more-guides__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.jt-more-guides ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jt-more-guides li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.jt-more-guides a {
	color: #1B64DA;
	font-weight: 600;
}

/* 메뉴에서 '가이드'가 눈에 띄게 — 다른 항목과 같은 무게면 그냥 지나친다 */
.jt-nav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	font-weight: 700;
	color: #1B64DA;
}