/*
Theme Name: Tips&Tips (child of Twenty Twenty-Five)
Template: twentytwentyfive
Description: Twenty Twenty-Five 자식 테마. 한국 인기 워드프레스 정보 사이트(어피티·요즘IT·디에디트)
  레이아웃을 벤치마킹해 홈/게시글/아카이브를 히어로 + 메인·사이드바 2단 구조로 바꾼다.
  부모 파일은 건드리지 않으므로 외모 → 테마에서 Twenty Twenty-Five를 다시 활성화하면 즉시 원복된다.
Author: Tips&Tips
Version: 2.0
Text Domain: tipstips-child
*/

/* ─────────────────────────────────────────────
   0. 공통 토큰
   ───────────────────────────────────────────── */
:root {
	--tt-accent: var(--wp--preset--color--accent-3);   /* #503AA8 보라 */
	--tt-highlight: var(--wp--preset--color--accent-1);/* #FFEE58 노랑 */
	--tt-muted: var(--wp--preset--color--accent-4);    /* #686868 */
	--tt-line: color-mix(in srgb, currentColor 12%, transparent);
	--tt-surface: var(--wp--preset--color--accent-5);  /* #FBFAF3 */
}

/* ─────────────────────────────────────────────
   1. 헤더 — 로고 + 카테고리 내비게이션
   어피티·요즘IT 모두 로고 옆/아래 카테고리 바가 상시 노출된다.
   ───────────────────────────────────────────── */
.tt-header {
	border-bottom: 1px solid var(--tt-line);
}
.tt-nav .wp-block-navigation-item__content {
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	padding: 0.2em 0;
	border-bottom: 2px solid transparent;
}
.tt-nav .wp-block-navigation-item__content:hover {
	color: var(--tt-accent);
	border-bottom-color: var(--tt-accent);
}
.tt-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--tt-accent);
	border-bottom-color: var(--tt-accent);
}

/* ─────────────────────────────────────────────
   2. 카테고리 라벨 — 어피티식 컬러 텍스트
   알약 배지보다 한국 정보 사이트에서 훨씬 흔한 형태다.
   ───────────────────────────────────────────── */
.tt-cat {
	margin: 0 0 0.45em;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
}
.tt-cat a {
	color: var(--tt-accent);
	text-decoration: none;
}
.tt-cat a:hover {
	text-decoration: underline;
}
/* 이미지 위에 얹는 경우(히어로)는 반전 */
.tt-hero .tt-cat a {
	color: var(--tt-accent);
}

/* ─────────────────────────────────────────────
   3. 히어로 — 최신 글 1개를 크게 (어피티 홈 상단)
   ───────────────────────────────────────────── */
.tt-hero {
	background: var(--tt-surface);
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--50);
}
.tt-hero .wp-block-post-featured-image {
	margin: 0;
}
/* ★비율을 강제하지 않는다★ 대표 썸네일에 제목 글자가 새겨져 있어(image_stage 산출물)
   크롭하면 글자가 잘린다. 실측 원본 비율은 1.79~1.90 이다. */
.tt-hero .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}
.tt-hero-body {
	padding: clamp(1.2rem, 3vw, 2.4rem);
}
.tt-hero-body .wp-block-post-title {
	margin: 0 0 0.5em;
	line-height: 1.32;
	word-break: keep-all;   /* 한글 단어 중간 줄바꿈 방지 */
}
.tt-hero-body .wp-block-post-title a {
	text-decoration: none;
}
.tt-hero-body .wp-block-post-excerpt {
	color: var(--tt-muted);
}
.tt-hero-body .wp-block-post-date {
	color: var(--tt-muted);
	margin-top: 0.8em;
}

/* ─────────────────────────────────────────────
   4. 글 목록 카드 — 요즘IT식 둥근 카드
   ───────────────────────────────────────────── */
.tt-card {
	border: 1px solid var(--tt-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	height: 100%;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.tt-card:hover {
	border-color: color-mix(in srgb, var(--tt-accent) 45%, transparent);
	box-shadow: 0 6px 20px rgba(17, 17, 17, 0.08);
}
.tt-card .wp-block-post-featured-image {
	margin: 0;
}
.tt-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;   /* 원본 1.79~1.90 — 세로 크롭 최소 */
	object-fit: cover;
}
.tt-card-body {
	padding: 1em 1.1em 1.2em;
}
.tt-card-body .wp-block-post-title {
	margin: 0 0 0.4em;
	line-height: 1.4;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tt-card-body .wp-block-post-title a {
	text-decoration: none;
}
.tt-card-body .wp-block-post-excerpt {
	color: var(--tt-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.tt-card-body .wp-block-post-excerpt__more-text {
	display: none;
}
.tt-card-body .wp-block-post-date {
	color: var(--tt-muted);
	margin-top: 0.7em;
}

/* ─────────────────────────────────────────────
   5. 섹션 제목 — "뉴스 ······ 더 보기" (어피티)
   ───────────────────────────────────────────── */
.tt-section-head {
	border-bottom: 2px solid currentColor;
	padding-bottom: 0.5em;
	margin-bottom: var(--wp--preset--spacing--40);
}
.tt-section-head .wp-block-heading {
	margin: 0;
}

/* ─────────────────────────────────────────────
   6. 사이드바 위젯 — 어피티 "지금 인기있는 칼럼" / 요즘IT "이번주 인기"
   ───────────────────────────────────────────── */
.tt-side {
	position: sticky;
	top: 2rem;
}
.tt-widget {
	border: 1px solid var(--tt-line);
	border-radius: 12px;
	padding: 1.1em 1.2em 1.3em;
	margin-bottom: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}
.tt-widget > .wp-block-heading {
	margin: 0 0 0.8em;
	font-size: 0.98rem;
	font-weight: 700;
	padding-bottom: 0.55em;
	border-bottom: 2px solid var(--tt-accent);
}

/* 최신 글 위젯 (core/latest-posts) */
.tt-widget .wp-block-latest-posts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tt-widget .wp-block-latest-posts__list li {
	padding: 0.62em 0;
	border-bottom: 1px solid var(--tt-line);
	line-height: 1.45;
}
.tt-widget .wp-block-latest-posts__list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.tt-widget .wp-block-latest-posts__list a {
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	word-break: keep-all;
}
.tt-widget .wp-block-latest-posts__list a:hover {
	color: var(--tt-accent);
}
.tt-widget .wp-block-latest-posts__post-date {
	display: block;
	font-size: 0.78rem;
	color: var(--tt-muted);
	margin-top: 0.2em;
}

/* 카테고리 목록 — core/categories 대신 직접 적은 순서 목록(parts/sidebar.html) */
.tt-widget .tt-catlist {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tt-widget .tt-catlist li {
	padding: 0;
	border-bottom: 1px solid var(--tt-line);
}
.tt-widget .tt-catlist li:last-child {
	border-bottom: none;
}
.tt-widget .tt-catlist a {
	display: block;
	padding: 0.62em 0.2em 0.62em 0;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	position: relative;
	transition: color 0.12s ease, padding-left 0.12s ease;
}
/* 오른쪽 꺾쇠 — 아이콘 파일 없이 CSS 만으로 (요즘IT·어피티의 "더 보기" 어포던스) */
.tt-widget .tt-catlist a::after {
	content: "";
	position: absolute;
	right: 0.35em;
	top: 50%;
	width: 0.42em;
	height: 0.42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-50%) rotate(-45deg);
	opacity: 0.28;
	transition: opacity 0.12s ease, right 0.12s ease;
}
.tt-widget .tt-catlist a:hover {
	color: var(--tt-accent);
	padding-left: 0.35em;
}
.tt-widget .tt-catlist a:hover::after {
	opacity: 0.85;
	right: 0.15em;
}

/* ─────────────────────────────────────────────
   7. 게시글 — 어피티식 좁은 본문 + 메타
   ───────────────────────────────────────────── */
.tt-post-head .wp-block-post-title {
	line-height: 1.34;
	word-break: keep-all;
	margin-bottom: 0.4em;
}
.tt-post-meta {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex-wrap: wrap;
	color: var(--tt-muted);
	font-size: 0.88rem;
	padding-bottom: 1.1em;
	border-bottom: 1px solid var(--tt-line);
	margin-bottom: var(--wp--preset--spacing--40);
}
.tt-post-meta .tt-cat {
	margin: 0;
}
.tt-post-meta .wp-block-post-date {
	margin: 0;
}

/* ★본문 지면은 건드리지 않는다★ 서버의 mu-plugin `tipstips-readability.php` 가
   본문 폭·타이포·리듬·H2 좌측 바·H3·표·목차·참고자료·목록·본문이미지·반응형을 전부
   담당한다(`.single-post .entry-content` 스코프, 근거 주석까지 붙어 있음).
   여기서 같은 것을 또 쓰면 **특이도가 같아 소스 순서로 승부가 갈리고**, 표 헤더 색이
   한쪽은 보라 한쪽은 파랑으로 엇갈린다. 실제로 그 충돌이 있었다(2026-08-19).
   본문 관련 스타일이 필요하면 이 파일이 아니라 그 mu-plugin 을 고칠 것.
   ─ 표가 생 <table> 이라 코어 CSS 가 안 걸리는 문제도 그쪽이 `the_content` 필터로
     <figure class="wp-block-table"> 래퍼를 씌워 해결한다. CSS 만으로는 못 한다. */

/* ─────────────────────────────────────────────
   8. 관련 글 — linker_bot 이 본문 끝에 삽입하는 원시 HTML
   ───────────────────────────────────────────── */
.related-posts {
	margin: 2.4em 0 0;
	padding: 1.2em 1.4em;
	background: var(--tt-surface);
	border-left: 4px solid var(--tt-accent);
	border-radius: 4px;
}
.related-posts ul {
	list-style: none;
	margin: 0.6em 0 0;
	padding: 0;
}
.related-posts li {
	padding: 0.5em 0;
	border-bottom: 1px solid var(--tt-line);
}
.related-posts li:last-child {
	border-bottom: none;
}
.related-posts a {
	text-decoration: none;
	font-weight: 600;
	word-break: keep-all;
}
.related-posts a:hover {
	color: var(--tt-accent);
}

/* ─────────────────────────────────────────────
   9. 푸터
   ───────────────────────────────────────────── */
.tt-footer {
	border-top: 1px solid var(--tt-line);
	background: var(--tt-surface);
}
.tt-footer-links a {
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}
.tt-footer-links a:hover {
	color: var(--tt-accent);
}

/* ─────────────────────────────────────────────
   10. 모바일 — 한국 정보 사이트 트래픽은 대부분 모바일이다
   ───────────────────────────────────────────── */
@media (max-width: 781px) {
	.tt-side {
		position: static;
	}
	.tt-hero-body {
		padding: 1.1rem 1.1rem 1.4rem;
	}
	.tt-card-body .wp-block-post-title {
		-webkit-line-clamp: 3;
	}
}