/*
Theme Name: Moneyingstock Child
Theme URI: https://moneyingstock.com
Description: GeneratePress 기반의 moneyingstock.com 전용 child theme. 디자인 시스템 기반(docs/design-system.md).
Author: baegh0223
Author URI: https://moneyingstock.com
Template: generatepress
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moneyingstock-child
*/

/* ============================================
   Font Imports
   - Pretendard: 모든 텍스트 (한글/영문 통일)
   - JetBrains Mono: code
   ============================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================
   Design Tokens (CSS Custom Properties)
   원본: docs/design-system.md
   ============================================ */
:root {
	/* === Colors: Brand & Accent === */
	--color-primary: #cc785c;          /* coral */
	--color-primary-active: #a9583e;
	--color-primary-disabled: #e6dfd8;
	--color-accent-teal: #5db8a6;
	--color-accent-amber: #e8a55a;

	/* === Colors: Surface === */
	--color-canvas: #faf9f5;
	--color-surface-soft: #f5f0e8;
	--color-surface-card: #efe9de;
	--color-surface-cream-strong: #e8e0d2;
	--color-surface-dark: #181715;
	--color-surface-dark-elevated: #252320;
	--color-surface-dark-soft: #1f1e1b;
	--color-hairline: #e6dfd8;
	--color-hairline-soft: #ebe6df;

	/* === Colors: Text === */
	--color-ink: #141413;
	--color-body-strong: #252523;
	--color-body: #3d3d3a;
	--color-muted: #6c6a64;
	--color-muted-soft: #8e8b82;
	--color-on-primary: #ffffff;
	--color-on-dark: #faf9f5;
	--color-on-dark-soft: #a09d96;

	/* === Colors: Semantic === */
	--color-success: #5db872;
	--color-warning: #d4a017;
	--color-error: #c64545;

	/* === Spacing === */
	--space-xxs: 4px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-xxl: 48px;
	--space-section: 96px;

	/* === Border Radius === */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-pill: 9999px;

	/* === Typography: Family (Pretendard 통일) === */
	--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	--font-code: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

	/* === Typography: Sizes (Claude 블로그 spec, clamp 반응형) === */
	--font-size-display-xl: clamp(2.125rem, 1.5vw + 1.5rem, 3.25rem);    /* 34px → 52px (h1) */
	--font-size-display-lg: clamp(1.875rem, 1.2vw + 1.3rem, 2.75rem);    /* 30px → 44px (h2) */
	--font-size-display-md: clamp(1.75rem, 0.8vw + 1.3rem, 2.25rem);     /* 28px → 36px (h3) */
	--font-size-display-sm: clamp(1.4375rem, 0.9vw + 1rem, 2rem);        /* 23px → 32px (h4) */
	--font-size-title-lg: clamp(1.25rem, 0.5vw + 1rem, 1.5625rem);       /* 20px → 25px (h5) */
	--font-size-title-md: 1.125rem;                                       /* 18px */
	--font-size-title-sm: clamp(1rem, 0.3vw + 0.9rem, 1.1875rem);        /* 16px → 19px (h6) */
	--font-size-body-lg: clamp(1.1875rem, 0.1vw + 1.15rem, 1.25rem);     /* 19px → 20px (body-1) */
	--font-size-body-md: 1.0625rem;                                       /* 17px (body-2) */
	--font-size-body-sm: 0.9375rem;                                       /* 15px (body-3) */
	--font-size-caption: 0.875rem;                                        /* 14px */
	--font-size-caption-uppercase: 0.75rem;                               /* 12px */

	/* === Layout === */
	--container-max: 1200px;
}

/* ============================================
   Base Typography
   ============================================ */
body {
	background: var(--color-canvas);
	color: var(--color-body);
	font-family: var(--font-sans);
	font-size: var(--font-size-body-md);    /* 17px (body-2) */
	line-height: 1.7;                        /* Korean spec */
	font-weight: 400;
	word-break: keep-all;                    /* prevent mid-word Hangul breaks */
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 500;                        /* Medium — Claude 블로그 spec */
	color: var(--color-ink);
	letter-spacing: 0;
}

h1 { font-size: var(--font-size-display-xl); line-height: 1.2; }
h2 { font-size: var(--font-size-display-lg); line-height: 1.2; }
h3 { font-size: var(--font-size-display-md); line-height: 1.3; }
h4 { font-size: var(--font-size-display-sm); line-height: 1.3; }
h5 { font-size: var(--font-size-title-lg);   line-height: 1.4; }
h6 { font-size: var(--font-size-title-sm);   line-height: 1.4; }

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

a:hover {
	color: var(--color-primary-active);
}

code, pre, kbd, samp {
	font-family: var(--font-code);
	font-size: var(--font-size-body-sm);
}

/* ============================================
   {component.top-nav}
   cream canvas, 64px, hairline 하단 보더
   브랜드 좌측 + 메뉴 우측, 모바일 햄버거
   ============================================ */
.site-header {
	background: var(--color-canvas);
	border-bottom: 1px solid var(--color-hairline);
	padding: 0;
}

.inside-header {
	max-width: var(--container-max);
	padding: 0 var(--space-lg);
	min-height: 64px;
	display: flex;
	align-items: center;
}

/* 사이트 브랜딩 */
.site-branding {
	padding: 0;
	margin-right: auto;            /* 메뉴를 우측으로 밀어냄 */
}

.main-title {
	font-size: var(--font-size-title-lg);   /* 20px */
	font-weight: 600;
	margin: 0;
	line-height: 1;
	letter-spacing: -0.01em;
}

.main-title a,
.main-title a:hover,
.main-title a:visited {
	color: var(--color-ink);
	text-decoration: none;
}

.site-description {
	display: none;
}

/* 네비게이션 */
.main-navigation {
	background: transparent;
	min-height: auto;
}

.main-navigation .inside-navigation {
	padding: 0;
}

.main-navigation .main-nav ul {
	margin: 0;
	padding: 0;
}

.main-navigation .main-nav > ul {
	display: flex;
	gap: var(--space-xs);
}

.main-navigation .main-nav > ul > li {
	list-style: none;
}

.main-navigation .main-nav > ul > li > a {
	font-size: 14px;
	font-weight: 500;
	color: var(--color-body);
	padding: 22px 14px;
	line-height: 1;
	transition: color 0.15s ease;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--color-ink);
	background: transparent;
}

/* 모바일 햄버거 */
.menu-toggle {
	color: var(--color-ink);
	background: transparent;
	padding: 0;
	border: 0;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background: transparent;
	color: var(--color-ink);
}

@media (max-width: 768px) {
	.inside-header {
		padding: 0 var(--space-md);
	}

	.main-title {
		font-size: var(--font-size-title-md);  /* 18px */
	}

	/* GP가 두 곳에 햄버거 렌더링 — 두 번째(#site-navigation) 것 숨김 */
	#site-navigation .menu-toggle {
		display: none;
	}
}

@media (min-width: 769px) {
	/* 데스크톱에서는 모바일 토글 wrapper 숨김 */
	.mobile-menu-control-wrapper {
		display: none;
	}
}

/* ============================================
   GP separate-containers 흰색 배경 무효화
   body cream canvas가 page floor로 그대로 보이게
   ============================================ */
.separate-containers .site-main,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.site-content,
.content-area,
.entry-content {
	background: transparent;
}

/* ============================================
   콘텐츠 컨테이너 — site-main을 카드 그리드로
   토스피드 스타일: 3-up desktop, 2-up tablet, 1-up mobile
   ============================================ */
body.blog .site-main,
body.archive .site-main,
body.search .site-main,
body.home .site-main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
	padding: var(--space-xxl) var(--space-lg);
	max-width: var(--container-max);
	margin: 0 auto;
}

/* 페이지네이션은 전체 폭 */
.nav-links,
.paging-navigation,
.post-navigation {
	grid-column: 1 / -1;
}

/* ============================================
   {component.feature-card} — 글 카드
   cream/hairline border, rounded-lg, 호버 시 ink-soft border
   ============================================ */
body.blog .post,
body.archive .post,
body.search .post,
body.home .post {
	background: var(--color-canvas);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color 0.15s, transform 0.15s;
	margin: 0;
}

body.blog .post:hover,
body.archive .post:hover,
body.search .post:hover,
body.home .post:hover {
	border-color: var(--color-muted-soft);
}

/* 카드 내부 패딩 */
.post .inside-article {
	padding: var(--space-xl);
}

/* 썸네일 영역 (featured image 있을 때) */
.post-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-surface-card);   /* 없을 때 placeholder cream */
	margin: 0;
}

.post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-image + .inside-article {
	padding-top: var(--space-lg);
}

/* 글 제목 */
.entry-title {
	font-size: var(--font-size-title-md);   /* 18px */
	font-weight: 600;
	line-height: 1.45;
	margin: 0 0 var(--space-sm) 0;
	letter-spacing: -0.005em;
}

.entry-title a {
	color: var(--color-ink);
	text-decoration: none;
}

/* 카드 내 헤더 메타 (날짜) */
.entry-header .entry-meta {
	font-size: var(--font-size-caption);
	color: var(--color-muted);
	margin: 0;
}

/* 작성자 표시 숨김 (1인 사이트) */
.entry-header .entry-meta .byline {
	display: none;
}

/* excerpt 깔끔 정리 + 3줄 clamp */
.entry-summary {
	font-size: var(--font-size-body-sm);
	color: var(--color-body);
	line-height: 1.65;
	margin: var(--space-md) 0 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-summary p {
	margin: 0;
}

/* 인라인 '더 읽기' 숨김 — 카드 전체가 클릭 영역 */
.entry-summary .read-more {
	display: none;
}

/* footer meta (카테고리, 댓글) */
footer.entry-meta {
	font-size: var(--font-size-caption);
	color: var(--color-muted);
	margin: var(--space-md) 0 0 0;
	padding: var(--space-md) 0 0 0;
	border-top: 1px solid var(--color-hairline-soft);
}

footer.entry-meta .gp-icon {
	display: none;
}

footer.entry-meta .comments-link {
	display: none;
}

footer.entry-meta .cat-links a {
	color: var(--color-muted);
	text-decoration: none;
}

footer.entry-meta .cat-links a:hover {
	color: var(--color-ink);
}

/* ============================================
   페이지네이션 정리
   ============================================ */
.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-xxl);
}

.nav-links .page-numbers {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--space-sm);
	font-size: var(--font-size-body-sm);
	font-weight: 500;
	color: var(--color-body);
	background: transparent;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}

.nav-links .page-numbers:hover {
	border-color: var(--color-muted-soft);
	color: var(--color-ink);
}

.nav-links .page-numbers.current {
	background: var(--color-ink);
	color: var(--color-on-dark);
	border-color: var(--color-ink);
}

/* ============================================
   반응형
   ============================================ */
@media (max-width: 1024px) {
	body.blog .site-main,
	body.archive .site-main,
	body.search .site-main,
	body.home .site-main {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	body.blog .site-main,
	body.archive .site-main,
	body.search .site-main,
	body.home .site-main {
		grid-template-columns: 1fr;
		padding: var(--space-xl) var(--space-md);
		gap: var(--space-lg);
	}

	.post .inside-article {
		padding: var(--space-lg);
	}
}

/* ============================================
   단일 글 페이지 (single.php) — Claude 블로그 스타일
   - 좌측 정렬 큰 제목
   - 본문 max-width 700px, 중앙 정렬
   - 풀폭 hero image (있을 때)
   ============================================ */

/* single 페이지의 site-main grid 해제 (홈/아카이브와 다른 동작) */
body.single .site-main {
	display: block;
	grid-template-columns: none;
	max-width: 100%;
	padding: 0;
}

/* article 컨테이너 — 풀폭, 카드 모양 X */
body.single .post {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 auto;
	max-width: var(--container-max);
	padding: var(--space-xxl) var(--space-lg) 0;
}

body.single .post:hover {
	border-color: transparent;
}

body.single .post .inside-article {
	padding: 0;
}

/* Hero (Featured Image, 있을 때만) */
body.single .post .post-image,
body.single .post .featured-image {
	aspect-ratio: 16 / 9;
	max-width: 100%;
	margin: 0 0 var(--space-xxl) 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-surface-card);
}

body.single .post .post-image img,
body.single .post .featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 글 헤더 — Claude 블로그 spec: max-width 720px */
body.single .entry-header {
	max-width: 720px;
	margin: 0 auto var(--space-xxl);
	padding: 0;
	text-align: left;
}

body.single .entry-title {
	font-size: var(--font-size-display-xl);   /* clamp 34px → 52px */
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--color-ink);
	margin: 0 0 2.5rem 0;                      /* h1 bottom 40px */
}

/* 글 메타 (날짜, 카테고리, 읽는 시간) — caption 14px */
body.single .entry-header .entry-meta {
	font-size: var(--font-size-caption);       /* 14px */
	color: var(--color-muted);
	margin: 0;
	display: flex;
	gap: var(--space-md);
	align-items: center;
	flex-wrap: wrap;
}

body.single .entry-header .entry-meta .byline {
	display: none;                              /* 작성자 숨김 (1인 사이트) */
}

/* 본문 — max-width 720px 중앙 정렬, body-1 19-20px */
body.single .entry-content {
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	font-size: var(--font-size-body-lg);       /* clamp 19px → 20px (body-1) */
	line-height: 1.7;                           /* 한국어 spec */
	color: var(--color-body-strong);
}

body.single .entry-content > p,
body.single .entry-content > .wp-block-paragraph {
	margin: 0 0 1.5rem 0;                       /* body bottom 24px */
	font-size: var(--font-size-body-lg);
	line-height: 1.7;
}

/* 본문 헤딩 — Claude 블로그 spec */
body.single .entry-content h2,
body.single .entry-content h2.wp-block-heading {
	font-size: var(--font-size-display-lg);    /* clamp 30px → 44px */
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--color-ink);
	margin: 2.5rem 0 1rem 0;                    /* h2 top 40px / bottom 16px */
}

body.single .entry-content h3,
body.single .entry-content h3.wp-block-heading {
	font-size: var(--font-size-display-md);    /* clamp 28px → 36px */
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-ink);
	margin: 2rem 0 0.75rem 0;
}

body.single .entry-content h4 {
	font-size: var(--font-size-display-sm);    /* clamp 23px → 32px */
	font-weight: 500;
	line-height: 1.3;
	margin: 1.75rem 0 0.5rem 0;
}

body.single .entry-content h2 strong,
body.single .entry-content h3 strong,
body.single .entry-content h4 strong {
	font-weight: 500;                            /* 헤딩 안 strong도 같은 weight */
}

/* 본문 이미지 (figure) */
body.single .entry-content figure,
body.single .entry-content .wp-block-image {
	margin: var(--space-xl) 0;
}

body.single .entry-content figure img,
body.single .entry-content .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
	display: block;
}

body.single .entry-content figcaption {
	font-size: var(--font-size-caption);
	color: var(--color-muted);
	text-align: center;
	margin-top: var(--space-sm);
}

/* 본문 인라인 링크 — coral */
body.single .entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

body.single .entry-content a:hover {
	color: var(--color-primary-active);
}

/* mark 강조 (사용자가 본문에서 mark+strong 자주 씀) */
body.single .entry-content mark {
	background: transparent;
	color: var(--color-ink);
	font-weight: 600;
	padding: 0 2px;
	box-shadow: inset 0 -10px 0 var(--color-surface-card);
}

body.single .entry-content mark strong {
	font-weight: 600;
}

/* 본문 강조 (strong, b) */
body.single .entry-content strong,
body.single .entry-content b {
	color: var(--color-ink);
	font-weight: 600;
}

/* 인용 (blockquote) — pull quote */
body.single .entry-content blockquote {
	margin: var(--space-xl) 0;
	padding: var(--space-md) 0 var(--space-md) var(--space-lg);
	border-left: 3px solid var(--color-primary);
	color: var(--color-ink);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
}

body.single .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* 리스트 */
body.single .entry-content ul,
body.single .entry-content ol {
	margin: 0 0 var(--space-lg) 0;
	padding-left: var(--space-lg);
}

body.single .entry-content li {
	margin-bottom: var(--space-xs);
	line-height: 1.85;
}

/* 구분선 (hr) */
body.single .entry-content hr,
body.single .entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--color-hairline);
	margin: var(--space-xxl) 0;
}

/* 인라인 코드 / 코드 블록 */
body.single .entry-content code:not(pre code) {
	background: var(--color-surface-card);
	color: var(--color-ink);
	font-family: var(--font-code);
	font-size: 14px;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

body.single .entry-content pre,
body.single .entry-content .wp-block-code {
	background: var(--color-surface-dark);
	color: var(--color-on-dark);
	font-family: var(--font-code);
	font-size: 14px;
	line-height: 1.6;
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	overflow-x: auto;
	margin: var(--space-xl) 0;
}

/* 글 푸터 (카테고리, 댓글) */
body.single footer.entry-meta {
	max-width: 700px;
	margin: var(--space-xxl) auto 0;
	padding: var(--space-lg) 0;
	border-top: 1px solid var(--color-hairline);
	font-size: var(--font-size-caption);
	color: var(--color-muted);
}

body.single footer.entry-meta .comments-link {
	display: none;
}

/* 댓글 영역은 일단 숨김 (콘텐츠 정해진 후 다시 설계) */
body.single #comments {
	max-width: 700px;
	margin: var(--space-xxl) auto 0;
}

/* 모바일 */
@media (max-width: 640px) {
	body.single .post {
		padding: var(--space-xl) var(--space-md) 0;
	}

	body.single .entry-title {
		font-size: 28px;
	}

	body.single .entry-content > p,
	body.single .entry-content > .wp-block-paragraph {
		font-size: 16px;
	}

	body.single .entry-content h2 {
		font-size: 20px;
		margin-top: var(--space-xl);
	}
}

/* ============================================
   다음 컴포넌트
   - single.php PHP override (breadcrumb, related posts, CTA callout)
   - 메인 홈 (front-page.php)
   - 카테고리 페이지
   - 푸터
   ============================================ */