/*
Theme Name: 유이케어 (Yuicare)
Theme URI: https://yuicare.com
Description: 유익해요, 유이케어 — 50·60·70대를 위한 화이트톤 브랜드 매거진 테마. 큰 글씨와 높은 대비로 시니어 가독성에 최적화했습니다.
Author: Yuicare
Version: 1.0.0
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: yuicare
*/

/* ================================================================
   유이케어 디자인 토큰
   화이트톤 명품 매거진 + 시니어 가독성
   ================================================================ */

:root {
	/* 뉴트럴 — 순백이 아닌 온화한 화이트로 눈부심 완화 */
	--yc-white: #ffffff;
	--yc-paper: #faf9f7;
	--yc-mist: #f2f0ec;
	--yc-line: #e3e0d9;

	/* 텍스트 — 순검정 대신 잉크톤 (대비 12:1 이상 유지) */
	--yc-ink: #1a1a18;
	--yc-ink-soft: #4a4843;
	--yc-ink-mute: #6b6862;

	/* 브랜드 — 딥 오렌지 (따뜻함·활력)
	   흰 배경에서 본문 링크로 쓸 수 있도록 대비 6:1 이상을 확보한 톤. */
	--yc-brand: #b84a16;
	--yc-brand-deep: #8f380f;
	--yc-brand-tint: #fdf0e8;

	/* 보조 강조 — 브랜드 오렌지와 같은 색.
	   색을 하나로 통일해 브랜드 인상을 또렷하게 만든다. */
	--yc-gold: #b84a16;
	--yc-gold-tint: #fdf0e8;

	/* 시니어 UX: 본문 20px 기준 (일반 사이트 16px 대비 확대) */
	--yc-fs-body: 1.25rem;      /* 20px */
	--yc-fw-body: 500;          /* Medium — Light(300)는 시니어에게 흐리게 보임 */
	--yc-fs-lead: 1.5rem;       /* 24px */
	--yc-fs-small: 1.0625rem;   /* 17px — 최소 크기 하한 */
	--yc-lh-body: 1.85;         /* 넉넉한 행간 */

	/* 터치 타깃 최소 56px (WCAG 권장 44px 상회) */
	--yc-touch: 56px;
	--yc-radius: 2px;

	/* 레이아웃 기준 — 홈·상세·푸터가 모두 이 값을 공유해
	   섹션마다 왼쪽 끝이 어긋나지 않게 한다. */
	--yc-wrap: 76rem;     /* 넓은 섹션(목록·카드·푸터) */
	--yc-read: 40rem;     /* 본문 한 줄 길이 */
	--yc-gutter: 1.5rem;  /* 좌우 여백 */
}

/* ================================================================
   기본 타이포그래피 — 시니어 가독성 우선
   ================================================================ */

body {
	background-color: var(--yc-white);
	color: var(--yc-ink);
	font-size: var(--yc-fs-body);
	/* 시니어 가독성: 얇은 획(Light 300)은 흐려 보이므로 Medium 이상 사용 */
	font-weight: var(--yc-fw-body);
	line-height: var(--yc-lh-body);
	/* 자간을 살짝 넓혀 글자 구분을 쉽게 */
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
}

/* 부모 테마가 곳곳에 지정한 Light(300) / Regular(400) 를 끌어올린다.
   시니어에게 얇은 획은 초점이 맞지 않는 것처럼 보인다. */
body,
p,
li,
dd,
dt,
figcaption,
blockquote,
cite,
.wp-block-quote,
.wp-block-pullquote,
.wp-block-post-excerpt__excerpt,
.wp-block-post-content {
	font-weight: var(--yc-fw-body);
}

/* 본문 단락 — 한 줄 길이를 제한해 시선 이동 부담 감소 */
.entry-content p {
	font-size: var(--yc-fs-body);
	line-height: var(--yc-lh-body);
	margin-block: 1.5em;
	max-width: 38em;
	/* 한글은 단어 중간 줄바꿈을 막아야 읽기 편함 */
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 첫 문단은 리드문처럼 크게 */
.entry-content > p:first-of-type {
	font-size: var(--yc-fs-lead);
	color: var(--yc-ink-soft);
	line-height: 1.7;
}

/* 제목 — 매거진 감성의 얇은 대비, 단 시니어를 위해 충분히 큼 */
h1, h2, h3, h4, h5, h6 {
	color: var(--yc-ink);
	letter-spacing: -0.02em;
	line-height: 1.35;
	word-break: keep-all;
	margin-block-start: 2em;
	margin-block-end: 0.6em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.875rem, 3.5vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); font-weight: 600; }
h4 { font-size: 1.375rem; font-weight: 600; }

/* 작은 글씨도 17px 밑으로 내려가지 않게 강제 */
small,
.wp-block-post-date,
.wp-block-post-terms,
figcaption,
.wp-element-caption {
	font-size: var(--yc-fs-small) !important;
	color: var(--yc-ink-mute);
	line-height: 1.6;
}

/* ================================================================
   링크 — 색상만으로 구분하지 않고 밑줄 병행 (색각 이상 대응)
   ================================================================ */

.entry-content a:where(:not(.wp-element-button)) {
	color: var(--yc-brand);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
	font-weight: 500;
}

.entry-content a:where(:not(.wp-element-button)):hover {
	color: var(--yc-brand-deep);
	background-color: var(--yc-brand-tint);
}

/* 키보드 포커스 — 명확하게 보이도록 (접근성 필수) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--yc-brand);
	outline-offset: 3px;
	border-radius: var(--yc-radius);
}

/* ================================================================
   버튼 — 큰 터치 영역
   ================================================================ */

.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"] {
	min-height: var(--yc-touch);
	padding: 0.9em 2em;
	font-size: var(--yc-fs-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--yc-radius);
	background-color: var(--yc-brand);
	color: var(--yc-white);
	border: 2px solid var(--yc-brand);
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--yc-brand-deep);
	border-color: var(--yc-brand-deep);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--yc-brand);
}

/* ================================================================
   내비게이션 — 넓은 터치 간격
   ================================================================ */

.wp-block-navigation {
	font-size: var(--yc-fs-body);
	font-weight: 500;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.75em 1em;
	min-height: var(--yc-touch);
	display: flex;
	align-items: center;
	color: var(--yc-ink);
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--yc-brand);
}

/* 서브메뉴도 충분한 크기로 */
.wp-block-navigation__submenu-container {
	border: 1px solid var(--yc-line);
	box-shadow: 0 8px 28px rgba(26, 26, 24, 0.09);
	min-width: 15rem;
}

/* ================================================================
   사이트 타이틀 — 브랜드 각인
   ================================================================ */

.wp-block-site-title {
	letter-spacing: -0.03em;
	font-weight: 700;
}

.wp-block-site-title a {
	color: var(--yc-ink);
	text-decoration: none;
}

.wp-block-site-tagline {
	color: var(--yc-ink-mute);
	font-size: var(--yc-fs-small);
	letter-spacing: 0.02em;
}

/* ================================================================
   매거진 레이아웃 — 카드형 글 목록
   ================================================================ */

.wp-block-post-template li {
	padding-block-end: 2.5rem;
	margin-block-end: 2.5rem;
	border-block-end: 1px solid var(--yc-line);
}

.wp-block-post-title {
	line-height: 1.35;
	margin-block: 0.4em;
	word-break: keep-all;
}

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

.wp-block-post-title a:hover {
	color: var(--yc-brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-post-excerpt__excerpt {
	font-size: var(--yc-fs-body);
	line-height: 1.75;
	color: var(--yc-ink-soft);
	word-break: keep-all;
}

/* 카테고리 라벨 — 골드 악센트의 매거진 태그 */
.wp-block-post-terms a {
	display: inline-block;
	color: var(--yc-gold);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: none;
	padding: 0.3em 0;
}

.wp-block-post-terms a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 이미지 — 매거진다운 여백 */
.wp-block-post-featured-image img,
.wp-block-image img {
	border-radius: var(--yc-radius);
}

/* ================================================================
   인용문 — 매거진 스타일
   ================================================================ */

.wp-block-quote {
	border-inline-start: 3px solid var(--yc-gold);
	padding-inline-start: 1.5em;
	margin-block: 2em;
	font-size: var(--yc-fs-lead);
	line-height: 1.7;
	color: var(--yc-ink-soft);
	font-style: normal;
}

/* 강조 박스 — 시니어에게 핵심 정보 전달용 */
.wp-block-group.is-style-yc-notice {
	background-color: var(--yc-gold-tint);
	border-inline-start: 4px solid var(--yc-gold);
	padding: 1.5em 1.75em;
	border-radius: var(--yc-radius);
}

/* ================================================================
   목록 — 넉넉한 간격
   ================================================================ */

.entry-content ul,
.entry-content ol {
	font-size: var(--yc-fs-body);
	line-height: var(--yc-lh-body);
	padding-inline-start: 1.4em;
	max-width: 38em;
}

.entry-content li {
	margin-block: 0.7em;
	word-break: keep-all;
}

/* ================================================================
   표 — 모바일에서 가로 스크롤
   ================================================================ */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	font-size: var(--yc-fs-small);
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.9em 1em;
	border: 1px solid var(--yc-line);
	word-break: keep-all;
}

.wp-block-table th {
	background-color: var(--yc-mist);
	font-weight: 600;
}

/* ================================================================
   폼 — 큰 입력 영역
   ================================================================ */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
	min-height: var(--yc-touch);
	padding: 0.75em 1em;
	font-size: var(--yc-fs-body);
	color: var(--yc-ink);
	background-color: var(--yc-white);
	border: 2px solid var(--yc-line);
	border-radius: var(--yc-radius);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--yc-brand);
}

label {
	font-size: var(--yc-fs-body);
	font-weight: 500;
	margin-block-end: 0.4em;
	display: inline-block;
}

/* ================================================================
   푸터
   ================================================================ */

.wp-block-template-part footer,
footer.wp-block-template-part {
	background-color: var(--yc-paper);
	border-block-start: 1px solid var(--yc-line);
}

/* ================================================================
   반응형 — 모바일에서도 글씨를 줄이지 않음 (시니어 UX 핵심)
   ================================================================ */

@media (max-width: 781px) {
	:root {
		/* 데스크톱과 동일하게 유지, 행간만 미세 조정 */
		--yc-lh-body: 1.8;
	}

	.entry-content > p:first-of-type {
		font-size: 1.375rem;
	}

	/* 모바일에서 터치 간격 추가 확보 */
	.wp-block-navigation .wp-block-navigation-item__content {
		padding: 1em;
	}
}

/* ================================================================
   접근성 — 사용자 설정 존중
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 고대비 모드 대응 */
@media (prefers-contrast: more) {
	:root {
		--yc-ink-soft: #2a2a27;
		--yc-ink-mute: #3a3a36;
		--yc-line: #b9b5ac;
	}
}

/* 인쇄 — 시니어는 출력해서 보는 경우가 많음 */
@media print {
	body {
		font-size: 12pt;
		line-height: 1.6;
		color: #000;
	}

	.wp-block-navigation,
	.wp-block-template-part footer {
		display: none;
	}

	.entry-content a::after {
		content: " (" attr(href) ")";
		font-size: 10pt;
	}
}

/* 스크린리더 전용 텍스트 */
.yc-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;
}