/*
Theme Name: 화물차통 블로그
Theme URI: https://blog.trucktong.kr
Description: twentytwentyfive 자식 테마 후보. 좁힌 범위 3건 — 대표이미지 원본비 · 발행일/카테고리 한 줄 · 홈 목록형.
Author: 화물차통 편집팀
Template: twentytwentyfive
Version: 0.2.0
Text Domain: tt-blog
*/

/* 🔴 아래는 코덱스 범위 4(위 3건을 지원하는 최소 CSS)만 담는다.
   헤더·네비·카테고리용 규칙은 범위 밖이라 넣지 않는다. */

/* (1)(3) 대표이미지·썸네일 원본비 — 높이를 강제하지 않는다 */
.wp-block-post-featured-image img { height: auto; }

/* (3) 홈 카드 구분선. 썸네일이 없어도 무너지지 않게 여백만 준다 */
.tt-card { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.tt-card > * { margin-block-start: 0; }

/* (2) 발행일 · 카테고리 — **한 줄**로 붙인다.
   🔴 실측으로 배운 것: 이 한 줄을 WP 가 만들어 주는 `.wp-container-…` 클래스에만 맡기면,
   그 CSS 가 안 실린 화면에서는 날짜 뒤에서 줄이 바뀐다(내 미리보기에서 그렇게 났다).
   그래서 클래스 이름 하나로 직접 잠근다 — 생성 CSS 가 있든 없든 한 줄이다. */
.tt-meta {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: .4rem;
	opacity: .72;
}
.tt-meta > * { margin: 0; }

/* 한국어 본문 가독성 — 영문 기본 줄간격은 한글에서 답답하다 */
.wp-block-post-content p,
.wp-block-post-content li {
	line-height: 1.9;
	word-break: keep-all;        /* 한국어는 단어 중간에서 끊기면 읽기 나쁘다 */
	overflow-wrap: break-word;
}

/* 모바일 overflow — 넓은 표가 화면을 밀어내지 않게 표 안에서만 흐르게 */
.wp-block-post-content figure.wp-block-table { overflow-x: auto; }

/* 🔴 실측(390px)에서 잡힌 것: 발췌에 긴 URL 이 들어가면 줄이 안 끊겨 화면이 밀린다.
   글 본문 첫머리에 공식 게시물 주소가 있어서 그대로 딸려 온다.
   본문은 손대지 않고(post29 무접촉) 화면 쪽에서만 끊어 준다. */
.wp-block-post-excerpt { overflow-wrap: anywhere; }

/* ── r4: 홈 카드 줄 수 제한 (코덱스 r3 잔여 FAIL 2건) ────────────────
   왜: 발췌가 10줄 넘게 나오고 본문 첫머리의 마크다운 기호(>)·URL 이 그대로 보였다.
   글(post29) 본문은 무접촉이라 **화면에서 잘라 보여준다.** */

/* ① 제목 최대 2줄 + 발췌와의 위계
   코덱스 지적이 [2줄]과 [위계 약함] 둘이었다. 크기를 한 단계 줄였으니
   굵기와 간격으로 위계를 세운다 — 크기만으로는 발췌와 구분이 안 된다. */
.tt-card .tt-title,
.tt-card .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.45;
	font-weight: 700;
	margin-block: .7rem .2rem;
}

/* 카드 안 요소가 서로 붙지 않게(썸네일·제목·날짜·발췌) */
.tt-card > * + * { margin-block-start: .45rem; }
.tt-card .tt-meta { margin-block-start: .1rem; }

/* ② 발췌 최대 3줄 — [이어서 읽기]는 잘리면 안 되므로 clamp 대상에서 뺀다 */
.tt-card .tt-excerpt p,
.tt-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.7;
	margin-bottom: .4rem;
}
/* 긴 URL 이 들어와도 가로로 밀지 않게 */
.tt-card .tt-excerpt { overflow: hidden; }
.tt-card .wp-block-post-excerpt__more-text { display: block; }

/* ── r5: 홈 제목·푸터 (코덱스 GO 범위) ──────────────────────────────
   ① 부모의 영문 "Blog" H1 → "최신 글"(home.html 에서 교체). 크기만 눌러 준다.
   ② 자식 footer 로 부모 패턴(영문 8메뉴 + Twenty Twenty-Five 크레딧)을 대체.
      사이트명 + 홈 링크만 남긴다. */
.tt-home-heading {
	margin-block: 0 .8rem;
	line-height: 1.3;
}
.tt-footer {
	border-top: 1px solid rgba(0, 0, 0, .12);
	padding-top: 1rem;
}
.tt-footer p { margin: 0; }

/* ══════════ r8 — 브랜드 통일·카테고리 메뉴·카드 정리 (오빠 0826 지시) ══════════
   색은 지어내지 않았다. **대표 이미지에서 뽑았다**(픽셀 실측):
     네이비 #172645 (본문 배경 최빈색) · 앰버 #e8a33d (상단 액센트 바)
   그 두 색을 사이트 전체로 끌어와 통일감을 준다. */
:root {
	--tt-navy: #172645;
	--tt-navy-d: #10203d;
	--tt-amber: #e8a33d;
	--tt-ink: #1c2330;
	--tt-muted: #5b6577;
	--tt-line: #e3e6ec;
}

/* ── ① 헤더: 네이비 바 + 앰버 밑줄 ───────────────────────────── */
.tt-header {
	background: var(--tt-navy);
	border-bottom: 3px solid var(--tt-amber);
}
.tt-header .wp-block-site-title a { color: #fff; font-weight: 700; text-decoration: none; }
/* 🔴 실측으로 걸린 것: 이 규칙만으로는 코어의 링크 색이 이겨서 **대비 1.26:1** 이 나왔다
   (네이비 배경에 거의 검정 글씨 = 안 보인다). 블록 클래스까지 붙여 특정도를 올린다. */
.tt-header .tt-nav a,
.tt-header .wp-block-navigation a,
.tt-header .wp-block-navigation .wp-block-navigation-item__content,
.tt-header .wp-block-navigation-item__label {
	color: #ffffff;
	text-decoration: none;
}
.tt-header .tt-nav a:hover,
.tt-header .wp-block-navigation a:hover,
.tt-header .wp-block-navigation a:hover .wp-block-navigation-item__label,
.tt-header .tt-nav .current-menu-item a { color: var(--tt-amber); }
/* 모바일 햄버거·오버레이도 같은 색으로 */
.tt-header .wp-block-navigation__responsive-container-open svg { fill: #fff; }
.tt-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--tt-navy); }
.tt-header .wp-block-navigation__responsive-container.is-menu-open a { color: #fff; }
.tt-header .wp-block-navigation__responsive-container-close svg { fill: #fff; }

/* ── ④ 홈 상단 소개 ─────────────────────────────────────────── */
.tt-hero {
	padding: 1.6rem 0 1.2rem;
	border-bottom: 1px solid var(--tt-line);
	margin-bottom: .4rem;
}
.tt-hero .tt-home-heading { margin: 0 0 .45rem; color: var(--tt-navy); }
/* 🔴 r9: 문장은 지시받은 그대로 두고 **CSS 로만** 모바일을 맞춘다.
   두 문장이라 길어졌으므로 읽기 폭을 제한하고 줄간격을 넉넉히 준다. */
.tt-hero .tt-lede {
	margin: 0;
	color: var(--tt-muted);
	line-height: 1.75;
	max-width: 34rem;          /* 한 줄이 너무 길어지지 않게 */
	word-break: keep-all;      /* 한국어는 단어 중간에서 끊기면 읽기 나쁘다 */
	overflow-wrap: break-word;
}
@media (max-width: 480px) {
	.tt-hero { padding: 1.2rem 0 1rem; }
	.tt-hero .tt-lede { font-size: .95rem; line-height: 1.8; }
}

/* ── ③ 카드: 여백·구분선·배지 ──────────────────────────────── */
.tt-card {
	border-bottom: 1px solid var(--tt-line);
	padding-block: 1.5rem;
}
.tt-card:last-of-type { border-bottom: 0; }
.tt-card .wp-block-post-featured-image { margin-bottom: .85rem; }
.tt-card .wp-block-post-featured-image img { border-radius: 6px; }
.tt-card .tt-title a { color: var(--tt-navy); text-decoration: none; }
.tt-card .tt-title a:hover { text-decoration: underline; }

/* 카테고리 배지 — 앰버 테두리에 네이비 글씨 */
.tt-cardmeta { align-items: center; margin-block: .5rem .55rem; }
.tt-badge a {
	display: inline-block;
	padding: .12rem .5rem;
	border: 1px solid var(--tt-amber);
	border-radius: 999px;
	background: rgba(232,163,61,.12);
	color: var(--tt-navy);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.6;
}
.tt-badge a:hover { background: var(--tt-amber); color: #fff; }
.tt-cardmeta .tt-meta { color: var(--tt-muted); opacity: 1; }

/* 글 화면의 발행일·카테고리 줄도 같은 결로 */
.tt-meta .wp-block-post-terms a { color: var(--tt-navy); }

/* ── 푸터 ───────────────────────────────────────────────────── */
.tt-footer { border-top: 2px solid var(--tt-navy); padding-top: 1rem; }
.tt-footer .wp-block-site-title a { color: var(--tt-navy); font-weight: 700; text-decoration: none; }

/* ══════════ r10 — 글 하단 공유 상자 ══════════
   외부 SDK 없이 버튼 두 개 + 눈으로 선택 가능한 주소. single 에만 나온다. */
.tt-share {
	margin-top: 2.2rem;
	padding: 1.2rem 1.1rem 1.3rem;
	border: 1px solid var(--tt-line);
	border-top: 3px solid var(--tt-amber);
	border-radius: 8px;
	background: #fbfbfc;
}
.tt-share__h {
	margin: 0 0 .8rem;
	font-size: 1rem;
	color: var(--tt-navy);
}
.tt-share__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tt-share__btn {
	appearance: none;
	border: 1px solid var(--tt-navy);
	background: var(--tt-navy);
	color: #fff;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	padding: .5rem .95rem;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1.4;
}
.tt-share__btn:hover { background: var(--tt-amber); border-color: var(--tt-amber); color: var(--tt-navy); }
.tt-share__btn:focus-visible { outline: 2px solid var(--tt-amber); outline-offset: 2px; }
.tt-share__label { margin: .55rem 0 .25rem; font-size: .82rem; color: var(--tt-muted); }
/* 🔴 긴 URL·인용문이 모바일에서 화면을 밀지 않게 — 상자 안에서만 접힌다 */
.tt-share__url,
.tt-share__cite {
	display: block;
	padding: .5rem .6rem;
	background: #fff;
	border: 1px solid var(--tt-line);
	border-radius: 6px;
	font-size: .85rem;
	line-height: 1.6;
	color: var(--tt-ink);
	overflow-wrap: anywhere;
	word-break: break-word;
	user-select: all;              /* 한 번 클릭으로 전체 선택 */
}
.tt-share__msg { margin: .7rem 0 0; min-height: 1.2em; font-size: .87rem; color: var(--tt-navy); font-weight: 600; }