/*
Theme Name: GeneratePress Prose
Theme URI: https://generatepress.com/
Description: GeneratePress 자식 테마. 헤더·내비·푸터·사이드바·컨테이너 폭 등 레이아웃은 부모 테마 기본값을 그대로 두고, 글 본문(.entry-content)의 타이포그래피와 리듬만 다듬습니다. 색은 사용자정의하기에서 정한 값을 그대로 물려받아 기존 화면과 어울립니다.
Author: gwang
Author URI: https://example.com
Template: generatepress
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-prose
Tags: blog, custom-menu, custom-colors, editor-style, translation-ready
*/

/* =========================================================
   이 테마가 손대는 범위

   ✅ .entry-content 안쪽 (문단 · 제목 · 목록 · 표 · 인용 · 코드 · 이미지)
   ✅ .entry-title, .entry-meta (글 머리)
   ❌ 헤더 · 내비게이션 · 푸터 · 사이드바 · 컨테이너 폭 · 카드 배치

   레이아웃 규칙을 한 줄도 넣지 않았으므로, GeneratePress 사용자정의하기에서
   정한 폭 · 여백 · 사이드바 배치가 그대로 유지됩니다.
   ========================================================= */

/* =========================================================
   01. 토큰
   색은 새로 정하지 않고 현재 글자색에서 파생시킵니다.
   그래야 사용자정의하기에서 색을 바꿔도 따로 손댈 필요가 없습니다.
   ========================================================= */

:root {
	/* 한글 본문용 고딕. 없으면 시스템 글꼴로 내려갑니다. */
	--prose-sans: "Pretendard Variable", Pretendard, -apple-system,
		BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
		system-ui, sans-serif;

	--prose-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
		"D2Coding", "Malgun Gothic", monospace;

	/* 본문 크기와 리듬. 한글은 라틴보다 조금 크고 넉넉해야 읽힙니다. */
	--prose-size: 1.0625rem;   /* 17px */
	--prose-leading: 1.8;

	/* 문단 사이. 이 값 하나가 글 전체의 호흡을 정합니다. */
	--prose-gap: 1.45em;

	/* 선 · 배경 — 글자색을 옅게 섞어 만듭니다.
	   사이트가 밝든 어둡든 자동으로 어울립니다. */
	--prose-line:    color-mix(in srgb, currentColor 14%, transparent);
	--prose-line-sc: color-mix(in srgb, currentColor 28%, transparent);
	--prose-wash:    color-mix(in srgb, currentColor 4%, transparent);

	--prose-radius: 8px;
}

/* =========================================================
   02. 글 머리 — 제목과 메타
   크기는 크게 건드리지 않고 줄바꿈과 자간만 다듬습니다.
   제목 크기를 부모 테마 기본으로 되돌리려면 font-size 줄만 지우세요.
   ========================================================= */

.entry-title {
	font-family: var(--prose-sans);
	font-size: clamp(1.75rem, 1.4rem + 1.1vw, 2.3rem);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -.022em;
	/* 한글은 단어 안에서 끊지 않습니다. 긴 제목의 줄바꿈이 훨씬 자연스럽습니다. */
	word-break: keep-all;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.entry-meta {
	font-family: var(--prose-sans);
	font-size: .82rem;
	letter-spacing: .01em;
	opacity: .72;
}

/* =========================================================
   03. 본문 기본
   ========================================================= */

.entry-content {
	font-family: var(--prose-sans);
	font-size: var(--prose-size);
	line-height: var(--prose-leading);
	letter-spacing: -.003em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.entry-content p,
.entry-content li,
.entry-content dd,
.entry-content figcaption,
.entry-content th,
.entry-content td {
	word-break: keep-all;
	overflow-wrap: break-word;
}

.entry-content p {
	margin: 0 0 var(--prose-gap);
	text-wrap: pretty;
}

.entry-content > *:last-child { margin-bottom: 0; }

.entry-content strong,
.entry-content b {
	font-weight: 700;
	/* 굵게만으로는 한글에서 눈에 잘 안 띄어, 아주 옅게 색을 더합니다. */
	color: color-mix(in srgb, currentColor 88%, #000);
}

.entry-content mark {
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
	padding: .05em .25em;
	border-radius: 3px;
}

.entry-content small { font-size: .86em; opacity: .78; }

/* =========================================================
   04. 본문 소제목
   위 여백은 rem(고정), 제목과 첫 문단 사이는 em(제목 크기 비례).
   em 으로만 주면 제목이 커질수록 위 여백이 같이 부풀어 빈 화면이 됩니다.
   ========================================================= */

.entry-content :is(h2, h3, h4, h5, h6) {
	font-family: var(--prose-sans);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.018em;
	word-break: keep-all;
	overflow-wrap: break-word;
	text-wrap: balance;
	color: inherit;
}

.entry-content h2 {
	font-size: 1.5rem;
	margin: 2.6rem 0 .75em;
	padding-top: 1.1rem;
	/* 장이 바뀌는 표시. 굵은 선 대신 옅은 선 한 줄이면 충분합니다. */
	border-top: 1px solid var(--prose-line);
}

.entry-content h3 {
	font-size: 1.22rem;
	margin: 2rem 0 .65em;
}

.entry-content h4 {
	font-size: 1.06rem;
	margin: 1.7rem 0 .55em;
}

.entry-content :is(h5, h6) {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .68;
	margin: 1.6rem 0 .6em;
}

/* 첫 소제목이 글 맨 앞에 오면 위 여백과 선을 뺍니다. */
.entry-content > :is(h2, h3, h4):first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* 소제목이 연달아 나올 때 사이가 벌어지지 않게 합니다. */
.entry-content :is(h2, h3, h4) + :is(h3, h4) { margin-top: 1.1rem; }

/* =========================================================
   05. 링크
   색은 사용자정의하기 값을 그대로 씁니다. 밑줄 모양만 다듬습니다.
   ========================================================= */

.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	/* 한글 받침에 밑줄이 닿지 않도록 띄웁니다. */
	text-underline-offset: .22em;
	text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
	transition: text-decoration-color .18s ease, background-color .18s ease;
}

.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
	text-decoration-color: currentColor;
}

/* =========================================================
   06. 목록
   ========================================================= */

.entry-content :is(ul, ol) {
	margin: 0 0 var(--prose-gap);
	padding-left: 1.35em;
}

.entry-content li { margin-bottom: .45em; }
.entry-content li:last-child { margin-bottom: 0; }

/* 중첩 목록은 위아래 여백을 줄여 덩어리로 보이게 합니다. */
.entry-content li > :is(ul, ol) {
	margin: .45em 0 0;
}

.entry-content ul > li::marker {
	color: color-mix(in srgb, currentColor 45%, transparent);
}

.entry-content ol > li::marker {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: color-mix(in srgb, currentColor 55%, transparent);
}

.entry-content :is(dt, dd) { margin: 0 0 .5em; }
.entry-content dt { font-weight: 700; }
.entry-content dd { padding-left: 1em; }

/* =========================================================
   07. 인용
   배경 상자 대신 왼쪽 선 하나. 글의 흐름을 끊지 않습니다.
   ========================================================= */

.entry-content blockquote {
	margin: 1.9rem 0;
	padding: .1em 0 .1em 1.15em;
	border-left: 2px solid var(--prose-line-sc);
	font-style: normal;
	opacity: .92;
}

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

.entry-content blockquote cite {
	display: block;
	margin-top: .7em;
	font-size: .86em;
	font-style: normal;
	opacity: .7;
}

.entry-content .wp-block-pullquote {
	border: 0;
	border-top: 1px solid var(--prose-line);
	border-bottom: 1px solid var(--prose-line);
	padding: 1.6rem 0;
	text-align: left;
}

/* =========================================================
   08. 표
   좁은 화면에서 표만 가로로 밀리게 해, 페이지 전체가 흔들리지 않게 합니다.
   ========================================================= */

.entry-content :is(.wp-block-table, .wp-block-table__wrapper, figure.wp-block-table) {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.9rem 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .94em;
	line-height: 1.65;
}

.entry-content :is(th, td) {
	padding: .7em .85em;
	border-bottom: 1px solid var(--prose-line);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	font-weight: 700;
	font-size: .88em;
	letter-spacing: .01em;
	border-bottom: 2px solid var(--prose-line-sc);
	white-space: nowrap;
}

.entry-content tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* 숫자 열은 자릿수가 맞아야 읽힙니다. */
.entry-content td { font-variant-numeric: tabular-nums; }

/* =========================================================
   09. 코드
   ========================================================= */

.entry-content :is(code, kbd, samp) {
	font-family: var(--prose-mono);
	font-size: .88em;
}

.entry-content :not(pre) > code {
	background: var(--prose-wash);
	border: 1px solid var(--prose-line);
	border-radius: 4px;
	padding: .12em .38em;
	word-break: break-all;
}

.entry-content pre {
	margin: 1.9rem 0;
	padding: 1.1rem 1.2rem;
	background: var(--prose-wash);
	border: 1px solid var(--prose-line);
	border-radius: var(--prose-radius);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	font-size: .88rem;
	line-height: 1.7;
	tab-size: 2;
}

.entry-content pre code {
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
	word-break: normal;
}

.entry-content kbd {
	background: var(--prose-wash);
	border: 1px solid var(--prose-line-sc);
	border-bottom-width: 2px;
	border-radius: 4px;
	padding: .1em .4em;
}

/* =========================================================
   10. 이미지 · 그림 설명
   ========================================================= */

.entry-content :is(img, video, iframe) { max-width: 100%; height: auto; }

.entry-content :is(figure, .wp-block-image) { margin: 1.9rem 0; }

.entry-content :is(figure, .wp-block-image) img { border-radius: var(--prose-radius); }

.entry-content figcaption {
	margin-top: .7em;
	font-size: .84em;
	line-height: 1.6;
	opacity: .68;
	text-align: left;
}

.entry-content .wp-block-embed { margin: 1.9rem 0; }

/* =========================================================
   11. 구분선 · 접기 · 단추
   ========================================================= */

.entry-content :is(hr, .wp-block-separator) {
	border: 0;
	border-top: 1px solid var(--prose-line);
	margin: 2.6rem 0;
	height: 0;
}

.entry-content details {
	margin: 1.2rem 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--prose-line);
	border-radius: var(--prose-radius);
}

.entry-content summary {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8em;
}

.entry-content summary::-webkit-details-marker { display: none; }

.entry-content summary::after {
	content: "+";
	font-weight: 400;
	font-size: 1.25em;
	line-height: 1;
	opacity: .55;
	transition: transform .2s ease;
}

.entry-content details[open] summary::after { transform: rotate(45deg); }

.entry-content details[open] summary { margin-bottom: .9em; }

.entry-content details > *:last-child { margin-bottom: 0; }

/* 단추는 부모 테마 색을 그대로 두고 모서리와 눌림만 다듬습니다. */
.entry-content :is(.wp-block-button__link, .wp-element-button) {
	border-radius: 999px;
	padding: .78em 1.6em;
	font-weight: 600;
	transition: transform .18s ease, filter .18s ease;
}

.entry-content :is(.wp-block-button__link, .wp-element-button):hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

/* =========================================================
   12. 좁은 화면
   레이아웃은 부모 테마가 처리합니다. 여기서는 글자 크기만 조금 줄입니다.
   ========================================================= */

@media (max-width: 600px) {
	:root {
		--prose-size: 1rem;
		--prose-leading: 1.75;
	}

	.entry-content h2 { font-size: 1.32rem; margin-top: 2.2rem; }
	.entry-content h3 { font-size: 1.12rem; }
	.entry-content pre { padding: .9rem 1rem; font-size: .84rem; }
}

/* 움직임을 줄이도록 설정한 기기에서는 전환 효과를 끕니다. */
@media (prefers-reduced-motion: reduce) {
	.entry-content * { transition: none !important; }
}

/* =========================================================
   13. 인쇄
   ========================================================= */

@media print {
	.entry-content {
		font-size: 11pt;
		line-height: 1.6;
	}

	.entry-content :is(pre, blockquote, details) { break-inside: avoid; }
	.entry-content :is(h2, h3, h4) { break-after: avoid; }
}