/*
Theme Name:   Kidzventures
Theme URI:    https://kidzventures.ca
Description:  Twenty Twenty-Five 기반 자식 테마. 디자인만 담당하며, 데이터와 계산 로직은 kidzventures-core 플러그인에 있습니다.
Author:       Kidzventures
Template:     twentytwentyfive
Version:      0.1.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kidzventures
*/

/**
 * 디자인 토큰.
 *
 * 플러그인 CSS 가 --kv-* 를 참조하므로, 이 파일이 색과 서체의 단일 출처입니다.
 * 테마를 교체하면 계산기도 새 테마의 색을 따라갑니다.
 */

:root {
	--kv-ink: #10201d;
	--kv-ink-2: #4a5a55;
	--kv-ink-3: #78867f;
	--kv-pine: #1a5049;
	--kv-pine-lift: #2a6d63;
	--kv-pine-wash: #e6ede9;
	--kv-on-pine: #fffdf8;
	--kv-paper: #f5f2ea;
	--kv-surface: #fffdf8;
	--kv-rule: #dfd8c8;
	--kv-rule-soft: #ede7da;

	/* 강조색. 로고의 단풍 점과 같은 색입니다. */
	--kv-accent: #d4622a;
	--kv-accent-bright: #e8a33d; /* 짙은 배경 위에서 쓰는 밝은 변형 */
	--kv-brass: var( --kv-accent ); /* 이전 이름. 플러그인 호환용 */

	/* 브랜드 표면은 테마와 무관하게 고정입니다.
	   로고 엠블럼의 주조색(#133958)을 그대로 씁니다. 로고와 배경이 다른 색이면
	   엠블럼이 나중에 얹은 스티커처럼 보입니다. */
	--kv-brand-bg: #133958;
	--kv-brand-fg: #fffdf8;

	--kv-good: #1b6b4c;
	--kv-caution: #b06a1c;
	--kv-restrict: #b1462c;

	--kv-font-body: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo',
		'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif;
	--kv-font-figure: Georgia, 'Times New Roman', 'Nanum Myeongjo', serif;
}

/* 다크 모드는 뒤집기가 아니라 별도로 고른 값입니다.
   브랜드 표면(--kv-brand-*)은 정체성이므로 바꾸지 않습니다. */
@media ( prefers-color-scheme: dark ) {

	:root {
		--kv-ink: #e7ede9;
		--kv-ink-2: #a3afa9;
		--kv-ink-3: #7a867f;
		--kv-pine: #6fb394;
		--kv-pine-lift: #57a183;
		--kv-pine-wash: #16241f;
		--kv-on-pine: #08120e;
		--kv-paper: #0d1917;
		--kv-surface: #14211e;
		--kv-rule: #27332f;
		--kv-rule-soft: #1e2926;

		--kv-accent: #e8875a;
		--kv-accent-bright: #e8a33d;

		--kv-good: #5fa98b;
		--kv-caution: #d3a256;
		--kv-restrict: #d98a70;
	}
}

/* ---------- 기본 조판 ---------- */

body {
	background: var( --kv-paper );
	color: var( --kv-ink );
	font-family: var( --kv-font-body );
	line-height: 1.7;
}

h1, h2, h3, h4 {
	text-wrap: balance;
	letter-spacing: -0.02em;
	line-height: 1.35;
}

/* 본문 가독 폭. 숫자 표는 예외로 넓게 씁니다. */
.entry-content > p {
	max-width: 65ch;
}

a {
	color: var( --kv-pine );
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 2px solid var( --kv-brass );
	outline-offset: 2px;
}

/* ---------- 머리말 ---------- */

/* 브랜드 바. 라이트·다크 모두 짙은 녹색을 유지합니다. */
.kv-header {
	padding-block: 15px;
	background: var( --kv-brand-bg );
	color: var( --kv-brand-fg );
	border-bottom: 0;
}

.kv-header__inner {
	gap: 14px 28px;
}

.kv-header__right {
	gap: 12px 20px;
}

/* ---------- 로고 ---------- */

.kv-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var( --kv-brand-fg );
	text-decoration: none;
}

/* 원형 엠블럼. 세부가 많은 일러스트라 너무 작으면 뭉개집니다.
   56px 아래로는 내리지 않습니다. */
.kv-mark {
	display: block;
	width: 56px;
	height: 56px;
	flex: none;
}

.kv-mark--sm {
	width: 44px;
	height: 44px;
}

@media ( max-width: 600px ) {

	.kv-mark {
		width: 46px;
		height: 46px;
	}
}

.kv-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.kv-brand__name {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.022em;
}

.kv-brand__tag {
	font-size: 11.5px;
	letter-spacing: 0.02em;
	opacity: 0.66;
}

.kv-brand:hover .kv-brand__name {
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

/* ---------- 내비 ---------- */

.kv-nav {
	gap: 20px;
}

.kv-nav p {
	margin: 0;
}

.kv-nav a {
	font-size: 14px;
	font-weight: 600;
	color: var( --kv-brand-fg );
	text-decoration: none;
	opacity: 0.82;
}

.kv-nav a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.kv-pill {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	background: rgba( 255, 253, 248, 0.14 );
	color: var( --kv-brand-fg );
	font-size: 11.5px;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.kv-header :focus-visible {
	outline: 2px solid var( --kv-accent-bright );
	outline-offset: 3px;
}

/* ---------- 본문 영역 ---------- */

.kv-main {
	padding-block: 0 0;
}

/* 밴드가 없는 일반 페이지는 위아래 여백이 필요합니다. */
.kv-main > :first-child:not(.alignfull),
.kv-main > .kv-article__head,
.kv-main > .kv-archive__head {
	padding-top: 3.5rem;
}

.kv-main > :last-child:not(.alignfull) {
	padding-bottom: 4rem;
}

/* ---------- 글 (single) ---------- */

.kv-article__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var( --kv-rule );
}

.kv-article__head .wp-block-post-title {
	margin: 0;
}

.kv-article__date {
	margin: 0;
	font-family: var( --kv-font-figure );
	font-size: 13px;
	color: var( --kv-ink-3 );
}

.kv-article__body > * + * {
	margin-top: 1.4em;
}

.kv-article__body h2 {
	margin-top: 2.4em;
	font-size: 1.4rem;
}

.kv-article__body h3 {
	margin-top: 1.8em;
	font-size: 1.1rem;
}

.kv-article__body blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var( --kv-pine );
	font-size: 0.97em;
	color: var( --kv-ink-2 );
}

.kv-article__body blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	font-style: normal;
	color: var( --kv-ink-3 );
}

.kv-article__cta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 56px;
	margin-bottom: 64px;
	padding: 26px;
	background: var( --kv-surface );
	border: 1px solid var( --kv-pine );
	border-radius: 3px;
}

.kv-article__cta p {
	margin: 0;
}

/* ---------- 글 목록 ---------- */

.kv-archive__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 24px;
	margin-bottom: 8px;
	border-bottom: 1px solid var( --kv-rule );
}

.kv-archive__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kv-archive__list > li {
	padding-block: 28px;
	border-bottom: 1px solid var( --kv-rule-soft );
}

.kv-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kv-card .wp-block-post-title {
	margin: 0;
	line-height: 1.4;
}

.kv-card .wp-block-post-title a {
	color: var( --kv-ink );
	text-decoration: none;
}

.kv-card .wp-block-post-title a:hover {
	color: var( --kv-pine );
	text-decoration: underline;
}

.kv-card__excerpt {
	margin: 0;
	font-size: 14.5px;
	color: var( --kv-ink-2 );
}

.kv-card__excerpt .wp-block-post-excerpt__more-link {
	display: none;
}

.kv-card__date {
	margin: 0;
	font-family: var( --kv-font-figure );
	font-size: 12.5px;
	color: var( --kv-ink-3 );
}

.kv-pagination {
	margin-block: 40px 64px;
	font-size: 14px;
}

.kv-pagination a {
	color: var( --kv-pine );
	text-decoration: none;
	font-weight: 600;
}

.kv-pagination a:hover {
	text-decoration: underline;
}

/* 카테고리 라벨을 eyebrow 로 씁니다. */
.wp-block-post-terms.kv-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.wp-block-post-terms.kv-eyebrow a:hover {
	text-decoration: underline;
}

/* ---------- 꼬리말 ---------- */

.kv-footer {
	margin-top: 0;
	padding-block: 40px 48px;
	background: var( --kv-surface );
	border-top: 1px solid var( --kv-rule );
}

.kv-footer__top {
	gap: 24px 40px;
	align-items: flex-start;
	margin-bottom: 28px;
}

.kv-footer__brand {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var( --kv-pine );
}

.kv-footer__name {
	display: block;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var( --kv-pine );
}

.kv-footer__where {
	display: block;
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var( --kv-ink-3 );
}

.kv-footer__links {
	gap: 10px 20px;
}

.kv-footer__links p {
	margin: 0;
}

.kv-footer__links a {
	font-size: 13.5px;
	color: var( --kv-ink-2 );
	text-decoration: none;
}

.kv-footer__links a:hover {
	color: var( --kv-pine );
	text-decoration: underline;
}

.kv-footer__note {
	max-width: 70ch;
	margin: 0 0 10px;
	padding-top: 20px;
	border-top: 1px solid var( --kv-rule-soft );
	font-size: 12.5px;
	line-height: 1.7;
	color: var( --kv-ink-3 );
}

.kv-footer__copy {
	margin: 0;
	font-family: var( --kv-font-figure );
	font-size: 12.5px;
	color: var( --kv-ink-3 );
}

/* ---------- 신뢰 고지 배지 ---------- */

.kv-disclosure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var( --kv-rule );
	border-radius: 100px;
	background: var( --kv-paper );
	color: var( --kv-ink-2 );
	font-size: 12.5px;
}

.kv-disclosure::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --kv-good );
	flex: none;
}

/*
 * 근거 수치(.kv-evidence)와 비교표(.kv-table)의 스타일은 플러그인의
 * components.css 에 있습니다. 플러그인이 만든 컴포넌트는 플러그인이 입힙니다.
 * 이 파일은 토큰과 페이지 레벨 레이아웃만 담당합니다.
 */

/* ---------- 페이지 섹션 ---------- */

.kv-eyebrow {
	margin: 0;
	font-family: var( --kv-font-figure );
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --kv-ink-3 );
}

.kv-lede {
	max-width: 62ch;
	font-size: 1.05rem;
	color: var( --kv-ink-2 );
}

.kv-band {
	background: var( --kv-surface );
	border-block: 1px solid var( --kv-rule );
}

.kv-callout {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	border-left: 3px solid var( --kv-pine );
	border-radius: 0 3px 3px 0;
	background: var( --kv-pine-wash );
}

.kv-callout p {
	margin: 0;
	font-size: 15px;
}

.kv-callout strong {
	color: var( --kv-pine );
}

/* ---------- 적합도 진단 ---------- */

.kv-ready {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 230px, 1fr ) );
	gap: 16px;
}

.kv-ready__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	background: var( --kv-surface );
	border: 1px solid var( --kv-rule );
	border-radius: 3px;
}

.kv-ready__q {
	font-size: 15px;
	font-weight: 600;
}

.kv-ready__a {
	font-size: 13.5px;
	color: var( --kv-ink-2 );
}

/* ---------- 운영자 소개 ---------- */

.kv-profile {
	display: grid;
	grid-template-columns: minmax( 0, 240px ) minmax( 0, 1fr );
	gap: 32px;
	align-items: start;
}

/* 사진이 아직 없을 때는 2단 격자를 쓰지 않습니다. 빈 칸이 보이면 미완성으로 읽힙니다. */
.kv-profile--nophoto {
	grid-template-columns: 1fr;
	max-width: 68ch;
}

.kv-profile__photo {
	overflow: hidden;
	border-radius: 3px;
}

.kv-profile__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.kv-profile__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kv-profile__body p {
	margin: 0;
}

.kv-profile__name {
	font-family: var( --kv-font-figure );
	font-size: 26px;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.kv-profile__meta {
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var( --kv-ink-3 );
}

@media ( max-width: 700px ) {

	.kv-profile {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.kv-profile__photo {
		min-height: 180px;
	}
}

/* ---------- 상담 ---------- */

.kv-consult {
	display: grid;
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr );
	gap: 40px;
	align-items: start;
}

.kv-honest {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kv-honest h3 {
	margin: 0;
	font-size: 17px;
}

.kv-honest p {
	margin: 0;
	font-size: 14.5px;
	color: var( --kv-ink-2 );
}

.kv-hr {
	height: 1px;
	background: var( --kv-rule );
}

.kv-price {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	background: var( --kv-paper );
	border: 1px solid var( --kv-pine );
	border-radius: 3px;
}

.kv-price__figure {
	font-family: var( --kv-font-figure );
	font-size: 34px;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.kv-price__figure small {
	font-size: 0.42em;
	letter-spacing: 0;
	color: var( --kv-ink-3 );
}

.kv-price__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: var( --kv-ink-2 );
}

.kv-price__list li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
}

.kv-price__list li::before {
	content: "—";
	color: var( --kv-pine );
	flex: none;
}

.kv-btn {
	display: inline-block;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	color: var( --kv-on-pine );
	background: var( --kv-pine );
	border: 1px solid var( --kv-pine );
	border-radius: 3px;
	transition: background 0.14s;
}

.kv-btn:hover {
	background: var( --kv-pine-lift );
	color: var( --kv-on-pine );
}

@media ( max-width: 860px ) {

	.kv-consult {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}