/*
Theme Name:   LifeGiver Child
Theme URI:    https://livingsolve.com
Description:  LifeGiver(livingsolve.com) 자식 테마 - 생활 문제 해결형 콘텐츠 사이트
Author:       LifeGiver
Template:     blocksy
Version:      1.0.0
Text Domain:  lifegiver-child
*/

/* ==========================================================================
   0. Design Tokens (CLAUDE.md 브랜드 아이덴티티 기준 — 딱 3색만 사용)
   ========================================================================== */
:root {
	--lg-color-bg: #FFFFFF;
	--lg-color-text: #222222;
	--lg-color-primary: #1B3A4B;   /* 딥네이비: 헤더 텍스트, 링크, 카테고리 라벨 */
	--lg-color-accent: #D4A64A;    /* 웜골드: CTA 강조선, 버튼, 밑줄 */
	--lg-color-gray-100: #F5F5F5;
	--lg-color-gray-300: #DDDDDD;
	--lg-color-gray-500: #5C5C5C; /* 흰 배경 대비 WCAG AA(4.5:1) 통과 기준으로 조정 */

	--lg-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
	--lg-font-regular: 400;
	--lg-font-bold: 700;

	--lg-container-max: 1200px;
	--lg-space-1: 8px;
	--lg-space-2: 16px;
	--lg-space-3: 24px;
	--lg-space-4: 40px;
}

/* ==========================================================================
   1. Pretendard 폰트 (Regular/Bold 두 굵기만 로드 — 속도 최우선)
   ========================================================================== */
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
}

/* ==========================================================================
   2. Base / Reset (blocksy 부모 스타일 위에 최소 오버라이드)
   ========================================================================== */
html {
	overflow-x: hidden; /* 긴 URL/텍스트로 인해 화면 전체에 가로 스크롤이 생기지 않도록 하는 안전장치 */
}
body {
	background: var(--lg-color-bg);
	color: var(--lg-color-text);
	font-family: var(--lg-font-family);
	font-weight: var(--lg-font-regular);
	overflow-x: hidden;
}

a {
	color: var(--lg-color-primary);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, .lg-title {
	font-weight: var(--lg-font-bold);
	color: var(--lg-color-primary);
	line-height: 1.3;
}

.lg-container {
	max-width: var(--lg-container-max);
	margin: 0 auto;
	padding: 0 var(--lg-space-2);
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.lg-header {
	border-bottom: 1px solid var(--lg-color-gray-300);
	padding: var(--lg-space-2) 0;
}

.lg-header__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lg-space-2);
	flex-wrap: wrap;
}

.lg-header__brand {
	display: flex;
	align-items: center;
	gap: var(--lg-space-1);
	flex-shrink: 0;
}

.lg-header__brand img {
	height: 36px;
	width: auto;
}

.lg-header__wordmark {
	font-size: 20px;
	font-weight: var(--lg-font-bold);
	color: var(--lg-color-primary);
	white-space: nowrap;
}

/* 검색창: above the fold 조건상 눈에 잘 띄어야 함 */
.lg-search {
	flex: 1 1 320px;
	max-width: 480px;
	min-width: 0;
}

.lg-search__form {
	display: flex;
	border: 2px solid var(--lg-color-primary);
	border-radius: 4px;
	overflow: hidden;
}

.lg-search__input {
	flex: 1;
	min-width: 0; /* 좁은 화면에서 placeholder 때문에 form이 밀려나지 않도록 */
	border: 0;
	min-height: 44px; /* 터치 타겟 최소 44px */
	padding: 10px 14px;
	font-family: var(--lg-font-family);
	font-size: 15px;
	color: var(--lg-color-text);
	background: var(--lg-color-bg);
}
.lg-search__input:focus {
	outline: none;
}

.lg-search__submit {
	border: 0;
	background: var(--lg-color-primary);
	color: #fff;
	padding: 0 18px;
	min-height: 44px; /* 터치 타겟 최소 44px */
	min-width: 44px;
	cursor: pointer;
	font-weight: var(--lg-font-bold);
}
.lg-search__submit:hover {
	background: var(--lg-color-accent);
}

/* 카테고리 메뉴 (데이터 기반: wp_list_categories 출력에 적용) */
.lg-cat-nav {
	margin-top: var(--lg-space-2);
}
.lg-cat-nav__list {
	list-style: none;
	display: flex;
	gap: var(--lg-space-2) var(--lg-space-3);
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.lg-cat-nav__list a {
	display: inline-block;
	color: var(--lg-color-primary);
	font-weight: var(--lg-font-bold);
	font-size: 15px;
	padding: 8px 2px; /* 터치 타겟 확보 */
	border-bottom: 2px solid transparent;
}
.lg-cat-nav__list a:hover,
.lg-cat-nav__list .current-cat > a {
	border-bottom-color: var(--lg-color-accent);
	text-decoration: none;
}

/* ==========================================================================
   4. Home — Section bands (흰색/옅은 회색을 번갈아 사용해 영역을 구분)
   ========================================================================== */
.lg-section {
	padding: var(--lg-space-4) 0; /* 콘텐츠가 없을 때 과도하게 비어 보이지 않도록 여백을 줄임 */
	border-top: 1px solid var(--lg-color-gray-300);
}
.lg-section--white {
	background: var(--lg-color-bg);
}
.lg-section--tint {
	background: var(--lg-color-gray-100);
}

.lg-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lg-space-2);
	margin-bottom: var(--lg-space-3);
}
.lg-section__title {
	font-size: 20px;
	margin: 0;
}
.lg-section__head .lg-widget-title {
	margin: 0; /* 위젯 타이틀을 더보기 링크와 한 줄에 나란히 놓기 위한 여백 정리 */
}
.lg-more-link {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: var(--lg-font-bold);
	color: var(--lg-color-primary);
	white-space: nowrap;
	padding: 4px 0; /* 터치 타겟 여유 */
}
.lg-more-link:hover {
	color: var(--lg-color-accent);
	text-decoration: none;
}

.lg-home__featured {
	margin-bottom: var(--lg-space-4);
}

.lg-home__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--lg-space-4);
	align-items: start;
}

.lg-home__aside-right .lg-widget-title {
	font-size: 14px;
	font-weight: var(--lg-font-bold);
	color: var(--lg-color-primary);
	border-bottom: 2px solid var(--lg-color-accent);
	padding-bottom: 8px;
	margin-bottom: var(--lg-space-2);
}

/* 지금 많이 찾는 문제: Compact 카드를 촘촘한 그리드로 */
.lg-quick-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--lg-space-3) var(--lg-space-2);
}

/* 카테고리 미리보기: 대표글(왼쪽, 크게) + 최신글 목록(오른쪽) */
.lg-cat-section__layout {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: var(--lg-space-4);
	align-items: start;
}
.lg-cat-section__list {
	display: flex;
	flex-direction: column;
}
.lg-cat-section__list .lg-card--compact {
	padding: 10px 0;
	border-bottom: 1px solid var(--lg-color-gray-300);
}
.lg-cat-section__list .lg-card--compact:last-child {
	border-bottom: 0;
}

/* ==========================================================================
   4-1. Card 컴포넌트 (Hero / Standard / Compact 공통 시스템)
   공통 요소: 썸네일(1:1 또는 4:3), 카테고리, 제목, 한 줄 설명, 작성일.
   카드 전체(<a>)가 클릭 영역이다.
   ========================================================================== */
.lg-card {
	display: block;
	color: var(--lg-color-text);
}
.lg-card:hover {
	text-decoration: none;
}
.lg-card:hover .lg-card__title {
	text-decoration: underline;
}

.lg-card__thumb {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	background: var(--lg-color-gray-100);
}
.lg-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.lg-card__thumb--4-3  { aspect-ratio: 4 / 3; } /* 카드 공통 썸네일 규격: 1:1 또는 4:3만 사용 (CLAUDE.md 지침) */
.lg-card__thumb--1-1  { aspect-ratio: 1 / 1; }

.lg-card__body {
	display: block;
}

.lg-card__category {
	display: inline-block;
	color: var(--lg-color-primary);
	font-weight: var(--lg-font-bold);
	font-size: 13px;
}

.lg-card__title {
	display: block;
	font-weight: var(--lg-font-bold);
	color: var(--lg-color-primary);
	line-height: 1.35;
}

.lg-card__excerpt {
	display: block;
	color: var(--lg-color-gray-500);
	font-size: 14px;
	margin-top: 4px;
}

.lg-card__date {
	display: block;
	color: var(--lg-color-gray-500);
	font-size: 13px;
	margin-top: 4px;
}

/* Hero: 오늘의 핵심 콘텐츠 1개를 크게 노출 */
.lg-card--hero .lg-card__body {
	margin-top: var(--lg-space-2);
}
.lg-card--hero .lg-card__title {
	font-size: clamp(21px, 4.5vw, 26px); /* 화면 크기에 따라 자동 조절, 모바일 하한 21px 유지 */
	margin-top: 6px;
}
.lg-card--hero .lg-card__excerpt {
	font-size: 15px;
}

/* Standard: 주요 콘텐츠 그리드/카테고리 리스트 */
.lg-card--standard .lg-card__body {
	margin-top: 8px;
}
.lg-card--standard .lg-card__title {
	font-size: 16px;
}

/* Compact: 관련 글 등 밀도 높은 리스트 — 가로 배치, 설명 생략 */
.lg-card--compact {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.lg-card--compact .lg-card__thumb {
	flex-shrink: 0;
	width: 64px;
}
.lg-card--compact .lg-card__title {
	font-size: 14px;
}

.lg-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lg-space-2);
}
.lg-card-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 접근성: 시각적으로 숨기되 스크린리더에는 노출 (페이지당 H1 1개 규칙 준수용) */
.lg-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 광고 슬롯: 실제 광고 코드가 삽입돼도 레이아웃이 깨지지 않도록 최소한의 안전장치만 둔다 (CLS 방지) */
.lg-ad-slot {
	margin: var(--lg-space-3) 0;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
}

/* 오른쪽: 인기글/최근글/빠른 해결 메뉴 */
.lg-mini-list {
	list-style: none;
	margin: 0 0 var(--lg-space-3);
	padding: 0;
	counter-reset: lg-rank;
}
.lg-mini-list li {
	counter-increment: lg-rank;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--lg-color-gray-300);
}
.lg-mini-list li::before {
	content: counter(lg-rank);
	flex-shrink: 0;
	color: var(--lg-color-accent);
	font-weight: var(--lg-font-bold);
}
.lg-mini-list a {
	display: block; /* 줄 전체가 탭 영역이 되도록 (모바일 터치 타겟) */
	flex: 1;
	padding: 10px 0;
	font-size: 14px;
	color: var(--lg-color-text);
}
.lg-mini-list a:hover {
	color: var(--lg-color-primary);
}

/* ==========================================================================
   5. Footer
   ========================================================================== */
.lg-footer {
	border-top: 1px solid var(--lg-color-gray-300);
	margin-top: var(--lg-space-4);
	padding: var(--lg-space-2) 0; /* 본문보다 시각적 우선순위가 낮으므로 컴팩트하게 */
}
/* 소개/사이트메뉴/운영정보/정책 4단 정보 */
.lg-footer__info {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--lg-space-3);
}
.lg-footer .lg-widget-title {
	font-size: 14px; /* 본문 대비 과하게 크지 않도록 축소 */
	margin: 0 0 10px;
}
.lg-footer__intro {
	font-size: 13px;
	line-height: 1.6;
	color: var(--lg-color-gray-500);
	margin: 0;
}
.lg-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}
.lg-footer__list li {
	margin-bottom: 6px;
}
.lg-footer__list a {
	color: var(--lg-color-text);
}
.lg-footer__list a:hover {
	color: var(--lg-color-primary);
}
.lg-footer__list--meta li {
	color: var(--lg-color-gray-500);
}
.lg-footer__list--meta a {
	color: var(--lg-color-gray-500);
}

.lg-footer__bottom {
	border-top: 1px solid var(--lg-color-gray-300);
	margin-top: var(--lg-space-2);
	padding-top: 12px;
	font-size: 12px;
	color: var(--lg-color-gray-500);
}

/* ==========================================================================
   5-1. Article(글) 페이지
   본문 폭은 PC에서 과도하게 넓지 않게 제한한다.
   ========================================================================== */
.lg-breadcrumb {
	font-size: 13px;
	color: var(--lg-color-gray-500);
	margin: var(--lg-space-2) 0;
}
.lg-breadcrumb a {
	color: var(--lg-color-gray-500);
}
.lg-breadcrumb a:hover {
	color: var(--lg-color-primary);
}

.lg-article__inner {
	max-width: 760px; /* 본문 폭 제한 — 잡지처럼 과도하게 넓어지지 않도록 */
	padding-top: var(--lg-space-3);
	padding-bottom: var(--lg-space-4);
}

.lg-article__header {
	margin-bottom: var(--lg-space-3);
}
.lg-article__title {
	font-size: clamp(24px, 5vw, 30px); /* 화면 크기에 따라 자동 조절, 모바일 하한 24px 유지 */
	margin: 10px 0 8px;
}
.lg-article__date {
	display: block;
	color: var(--lg-color-gray-500);
	font-size: 13px;
}
.lg-article__summary {
	margin-top: var(--lg-space-2);
	padding: var(--lg-space-2) 0;
	border-top: 1px solid var(--lg-color-gray-300);
	border-bottom: 1px solid var(--lg-color-gray-300);
	font-size: 16px;
	line-height: 1.6;
	color: var(--lg-color-text);
}

/* 본문 기본 타이포 — 모바일에서도 글자 축소 금지 */
.lg-article__body {
	font-size: 17px;
	line-height: 1.8;
	color: var(--lg-color-text);
}
.lg-article__body h2 {
	font-size: clamp(19px, 3.5vw, 22px);
	margin: var(--lg-space-4) 0 var(--lg-space-2);
}
.lg-article__body h3 {
	font-size: clamp(17px, 3vw, 19px);
	margin: var(--lg-space-3) 0 var(--lg-space-1);
}
.lg-article__body p,
.lg-article__body li,
.lg-article__body a {
	overflow-wrap: break-word; /* 긴 URL/텍스트로 인한 가로 스크롤 방지 */
	word-break: break-word;
}
.lg-article__body p {
	margin: 0 0 var(--lg-space-2);
}
.lg-article__body img {
	border-radius: 6px;
	margin: var(--lg-space-2) 0;
}
.lg-article__body iframe,
.lg-article__body video,
.lg-article__body embed,
.lg-article__body object {
	max-width: 100%; /* 임베드 콘텐츠(광고 포함)가 화면 폭을 넘지 않도록 */
}

/* 표: 모바일에서 표 영역 안에서만 가로 스크롤 (본문 전체 스크롤 방지) */
.lg-article__body .wp-block-table {
	overflow-x: auto;
	margin: var(--lg-space-2) 0;
}
.lg-article__body table {
	width: 100%;
	border-collapse: collapse;
}
.lg-article__body th,
.lg-article__body td {
	padding: 8px 12px;
	border: 1px solid var(--lg-color-gray-300);
	text-align: left;
}

/* 버튼(코어 버튼 블록): 손가락으로 누르기 편한 크기 */
.lg-article__body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 24px;
	border-radius: 4px;
}

/* CTA 박스: 배경 없음, 왼쪽 포인트 컬러 세로선만. 도입부 직후 배치. */
.lg-article__body .lg-cta {
	border-left: 3px solid var(--lg-color-accent);
	padding: 4px 0 4px var(--lg-space-2);
	margin: var(--lg-space-3) 0;
}

/* 체크리스트: 단순 체크 아이콘, 배경 없음 */
.lg-article__body .lg-checklist {
	list-style: none;
	margin: var(--lg-space-2) 0;
	padding: 0;
}
.lg-article__body .lg-checklist li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 8px;
}
.lg-article__body .lg-checklist li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--lg-color-accent);
	font-weight: var(--lg-font-bold);
}

/* FAQ: Rank Math FAQ 블록 기본 테두리/배경 제거, Q/A 굵은 라벨 + 여백으로만 구분 */
.lg-article__body .wp-block-rank-math-faq-block,
.lg-article__body .rank-math-list {
	border: 0;
	background: transparent;
	padding: 0;
}
.lg-article__body .rank-math-list-item {
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0 0 var(--lg-space-3);
}
.lg-article__body .rank-math-question {
	font-size: 17px;
	margin: 0 0 6px;
}
.lg-article__body .rank-math-question::before {
	content: 'Q. ';
	color: var(--lg-color-primary);
	font-weight: var(--lg-font-bold);
}
.lg-article__body .rank-math-answer {
	color: var(--lg-color-text);
}
.lg-article__body .rank-math-answer::before {
	content: 'A. ';
	color: var(--lg-color-accent);
	font-weight: var(--lg-font-bold);
}

/* "라이프가이버는 이렇게 생각합니다" 박스: 왼쪽 세로선 + 회색조 텍스트, 배경 없음 */
.lg-article__body .lg-take {
	border-left: 3px solid var(--lg-color-gray-300);
	padding: 4px 0 4px var(--lg-space-2);
	margin: var(--lg-space-3) 0;
	color: var(--lg-color-gray-500);
}
.lg-article__body .lg-take strong {
	display: block;
	color: var(--lg-color-primary);
	margin-bottom: 4px;
}

/* 마무리 인용구: 큰 텍스트 + 포인트 컬러 밑줄 하나 */
.lg-article__body .lg-closing-quote {
	font-size: 22px;
	font-weight: var(--lg-font-bold);
	color: var(--lg-color-primary);
	border-bottom: 3px solid var(--lg-color-accent);
	display: inline-block;
	padding-bottom: 6px;
	margin: var(--lg-space-4) 0;
}

/* 다음 행동 링크 */
.lg-next-action {
	margin: var(--lg-space-4) 0;
	text-align: center;
}
.lg-next-action a {
	display: inline-block;
	background: var(--lg-color-primary);
	color: #fff;
	font-weight: var(--lg-font-bold);
	padding: 14px 28px;
	border-radius: 4px;
}
.lg-next-action a:hover {
	background: var(--lg-color-accent);
	text-decoration: none;
}

/* 관련 글 / 추천 콘텐츠 */
.lg-related,
.lg-recommend {
	margin-top: var(--lg-space-4);
	padding-top: var(--lg-space-3);
	border-top: 1px solid var(--lg-color-gray-300);
}
.lg-related__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lg-space-2) var(--lg-space-3);
}

/* ==========================================================================
   5-2. 카테고리 페이지
   ========================================================================== */
.lg-category {
	padding-top: var(--lg-space-3);
	padding-bottom: var(--lg-space-4);
}
.lg-category__header {
	margin-bottom: var(--lg-space-3);
}
.lg-category__title {
	font-size: clamp(22px, 4.5vw, 26px);
}
.lg-category__desc {
	margin-top: 8px;
	color: var(--lg-color-gray-500);
	font-size: 15px;
}
.lg-category .lg-card--hero {
	margin-bottom: var(--lg-space-3);
}
.lg-category__empty {
	color: var(--lg-color-gray-500);
}

/* 페이지네이션 (the_posts_pagination 기본 마크업 스타일링) */
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: var(--lg-space-4);
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--lg-color-gray-300);
	border-radius: 4px;
	color: var(--lg-color-text);
	font-size: 14px;
}
.page-numbers.current {
	background: var(--lg-color-primary);
	border-color: var(--lg-color-primary);
	color: #fff;
	font-weight: var(--lg-font-bold);
}
.page-numbers:hover:not(.current) {
	border-color: var(--lg-color-accent);
	text-decoration: none;
}

/* ==========================================================================
   6. Mobile (모바일 우선 원칙 — 1단계 최소 대응, 세부 최적화는 4단계에서)
   ========================================================================== */
@media (max-width: 960px) {
	.lg-home__grid {
		grid-template-columns: 1fr;
	}
	.lg-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.lg-card-grid--2 {
		grid-template-columns: repeat(2, 1fr);
	}
	.lg-footer__info {
		grid-template-columns: repeat(2, 1fr);
	}
	.lg-quick-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.lg-cat-section__layout {
		grid-template-columns: 1fr;
	}
	.lg-section {
		padding: 32px 0;
	}
}

@media (max-width: 600px) {
	.lg-header__wordmark {
		font-size: 17px;
	}
	.lg-card-grid,
	.lg-card-grid--2 {
		grid-template-columns: 1fr;
	}
	.lg-quick-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.lg-related__list {
		grid-template-columns: 1fr;
	}
	.lg-footer__info {
		grid-template-columns: 1fr;
	}
	.lg-section {
		padding: 24px 0;
	}
	.lg-section__head {
		flex-wrap: wrap;
	}
}
/* 홈페이지 대표사진만 가로형으로 축소 */
.lg-card-hero .lg-card_thumb--4-3 {
    display: block;
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.lg-card-hero .lg-card_thumb--4-3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}