/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com/
Description: GeneratePress 자식 테마. 한글 콘텐츠에 최적화된 현대적이고 깔끔한 디자인 시스템을 적용했습니다.
Author: gwang
Author URI: https://example.com
Template: generatepress
Version: 1.3.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-child
Tags: blog, one-column, two-columns, custom-menu, custom-colors, translation-ready
*/

/* =========================================================
   01. 디자인 토큰
   색상/간격을 바꾸고 싶으면 이 블록의 값만 수정하세요.
   ========================================================= */

:root {
	/* 색상 */
	--c-accent:        #2563eb;
	--c-accent-hover:  #1d4ed8;
	--c-accent-soft:   #eff4ff;
	--c-cta:           #16a34a;
	--c-cta-hover:     #15803d;

	--c-text:          #16191d;
	--c-text-soft:     #3f4650;
	--c-muted:         #6b7280;

	--c-bg:            #f4f5f7;
	--c-surface:       #ffffff;
	--c-surface-alt:   #f8f9fb;
	--c-border:        #e6e8ec;
	--c-border-strong: #d3d7de;

	/* 타이포 */
	--font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
		"Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "D2Coding", monospace;

	/* 형태 */
	--radius-sm: 8px;
	--radius:    12px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
	--shadow:    0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .10);

	/* 리듬 */
	--space:     1.5rem;
	--space-lg:  2.75rem;

	/* ★ 헤더와 본문 카드 사이 여백. 이 값 하나만 바꾸면 됩니다.
	     0으로 하면 헤더에 딱 붙습니다. (GeneratePress 기본값은 40px) */
	--gap-top:    1.25rem;
	--gap-bottom: 2.5rem;
}

/* =========================================================
   02. 기본 골격
   ========================================================= */

body {
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.5;
	color: var(--c-text);
	background-color: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 한글은 어절 단위로 줄바꿈해야 읽기 편합니다. */
body,
.entry-content,
.entry-title,
.widget-title,
h1, h2, h3, h4, h5, h6 {
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 콘텐츠 최대 폭.
   사용자정의하기(레이아웃 > 컨테이너 너비)보다 이 값이 우선합니다.
   좁게 쓰고 싶으면 숫자만 줄이세요. */
.grid-container {
	max-width: 1200px;
}

/* 헤더 아래 여백.
   GeneratePress 는 컨테이너 설정(구분된 컨테이너 / 하나의 컨테이너 / 콘텐츠만)에
   따라 여백을 주는 요소가 달라지므로 세 가지를 모두 맞춰줍니다.
   값 조절은 위 --gap-top 에서 하세요. */
.separate-containers .site-content,
.one-container .site-content,
.contained-content .site-content,
.site-content {
	padding-top: var(--gap-top);
	padding-bottom: var(--gap-bottom);
}

/* 구분된 컨테이너에서는 카드 자체가 여백을 가지므로 좌우 여백은 0. */
.separate-containers .site-content {
	padding-left: 0;
	padding-right: 0;
}

/* 헤더 바로 아래 요소에 붙는 기본 위 여백 제거 —
   위 padding 에 더해져서 간격이 두 배로 보이는 것을 막습니다. */
.site-content > .container,
.site-content .content-area,
.site-content .site-main,
.site-content .site-main > *:first-child,
.site-content .widget-area > *:first-child {
	margin-top: 0;
}

/* 본문 카드.
   GeneratePress 는 <article> 이 아니라 그 안의 .inside-article 에
   배경과 여백을 줍니다. 바깥쪽에 또 여백을 주면 두 번 겹쳐서
   본문 폭이 좁아지므로, 카드 스타일은 .inside-article 에 겁니다. */
.separate-containers .inside-article,
.separate-containers .inside-page,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .site-main > .no-results {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: clamp(1.35rem, 2.6vw, 2.5rem);
}

/* 카드 사이 간격 */
.separate-containers .site-main > *:not(:last-child) {
	margin-bottom: var(--space);
}

/* '하나의 컨테이너' 레이아웃을 쓰는 경우 */
.one-container .site-content .content-area {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: clamp(1.35rem, 2.6vw, 2.5rem);
}

/* =========================================================
   03. 헤더 / 내비게이션
   ========================================================= */

.site-header {
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
}

/* 내비게이션에는 아래 테두리를 넣지 않습니다.
   내비게이션은 전체 폭이 아니라 메뉴 폭만큼만 차지하는 경우가 많아
   햄버거 버튼 아래에 짧은 선이 생기는 원인이 됩니다. */
.main-navigation {
	background: var(--c-surface);
	border-bottom: 0;
}

/* 헤더 안에 들어간 내비게이션은 헤더 배경을 그대로 씁니다. */
.site-header .main-navigation {
	background: transparent;
}

.site-title,
.site-title a {
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--c-text);
}

.site-description {
	color: var(--c-muted);
	font-size: 0.9rem;
}

.main-navigation .main-nav ul li a {
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--c-text-soft);
	transition: color .15s ease;
}

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

/* 현재 메뉴 밑줄 표시 */
.main-navigation .main-nav ul li.current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--c-accent);
}

/* =========================================================
   04. 타이포그래피
   ========================================================= */

.entry-title,
.page-title {
	font-size: clamp(1.9rem, 4.2vw, 2.75rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.035em;
	color: var(--c-text);
	margin-bottom: 1rem;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
}

/* 목록(홈·아카이브·검색) 페이지의 제목은 본문 제목보다 작게.
   목록에서까지 제목이 크면 카드가 제목만으로 가득 찹니다. */
.blog .entry-title,
.archive .entry-title,
.search .entry-title {
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	margin-bottom: 0.75rem;
}

.entry-content h2 {
	font-size: clamp(1.4rem, 2.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.025em;
	margin-top: var(--space-lg);
	margin-bottom: 1rem;
	padding-left: 0.85rem;
	border-left: 4px solid var(--c-accent);
}

.entry-content h3 {
	font-size: clamp(1.15rem, 2vw, 1.35rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.02em;
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
	color: var(--c-text);
}

.entry-content h4 {
	font-size: 1.075rem;
	font-weight: 700;
	margin-top: 1.75rem;
	margin-bottom: 0.6rem;
	color: var(--c-text-soft);
}

/* 첫 제목이 본문 상단에 붙지 않도록 */
.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content p,
.entry-summary p {
	line-height: 1.85;
	color: var(--c-text-soft);
	margin-bottom: 1.15rem;
}

/* 목록의 요약문 안 "더 읽기" 링크 */
.entry-summary .read-more,
.entry-summary a {
	font-weight: 600;
	white-space: nowrap;
}

/* 리드 문단: 첫 문단을 살짝 크게 */
.entry-content > p:first-of-type {
	font-size: 1.075rem;
	color: var(--c-text);
}

.entry-content strong,
.entry-content b {
	font-weight: 700;
	color: var(--c-text);
}

.entry-content a {
	color: var(--c-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(37, 99, 235, .35);
	transition: text-decoration-color .15s ease, color .15s ease;
}

.entry-content a:hover {
	color: var(--c-accent-hover);
	text-decoration-color: currentColor;
}

.entry-meta {
	font-size: 0.85rem;
	color: var(--c-muted);
}

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

.entry-meta a:hover {
	color: var(--c-accent);
}

/* =========================================================
   05. 목록
   ========================================================= */

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.5rem;
	padding-left: 0;
	list-style: none;
}

.entry-content ul li,
.entry-content ol li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.6rem;
	line-height: 1.8;
	color: var(--c-text-soft);
}

.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 0.25rem;
	top: 0.75em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
}

.entry-content ol {
	counter-reset: gp-ol;
}

.entry-content ol > li {
	counter-increment: gp-ol;
	padding-left: 2rem;
}

.entry-content ol > li::before {
	content: counter(gp-ol);
	position: absolute;
	left: 0;
	top: 0.25em;
	width: 1.45rem;
	height: 1.45rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--c-accent);
	background: var(--c-accent-soft);
	border-radius: 50%;
}

/* 중첩 목록 */
.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.6rem;
	margin-bottom: 0;
}

/* =========================================================
   06. 버튼 / CTA
   ========================================================= */

.entry-content .wp-block-button__link,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.75rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	background: var(--c-accent);
	border: none;
	border-radius: var(--radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.entry-content .wp-block-button__link:hover,
.btn:hover {
	background: var(--c-accent-hover);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .5);
}

.btn:focus-visible,
.entry-content .wp-block-button__link:focus-visible {
	outline: 3px solid rgba(37, 99, 235, .35);
	outline-offset: 2px;
}

/* 전체 너비 CTA — 안내글의 "바로가기" 버튼용 */
.btn-cta {
	display: flex;
	width: 100%;
	padding: 1.1rem 1.5rem;
	margin: 1.75rem 0;
	font-size: 1.1rem;
	background: var(--c-cta);
	border-radius: var(--radius);
}

.btn-cta:hover {
	background: var(--c-cta-hover);
	box-shadow: 0 8px 20px -8px rgba(22, 163, 74, .55);
}

/* 보조 버튼 */
.btn-outline {
	color: var(--c-accent);
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--c-border-strong);
}

.btn-outline:hover {
	color: var(--c-accent-hover);
	background: var(--c-accent-soft);
	box-shadow: inset 0 0 0 1.5px var(--c-accent);
}

/* =========================================================
   07. 강조 박스 / 인용 / 형광펜
   ========================================================= */

.entry-content blockquote {
	margin: 1.75rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--c-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: normal;
	color: var(--c-text-soft);
}

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

/* 안내 / 주의 박스 — 문단이나 그룹 블록에 클래스만 추가해서 사용 */
.box-info,
.box-tip,
.box-warn {
	margin: 1.75rem 0;
	padding: 1.15rem 1.35rem;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	line-height: 1.8;
}

.box-info { background: #eff6ff; border-color: #d3e2fd; }
.box-tip  { background: #f0fdf4; border-color: #cdead8; }
.box-warn { background: #fff8eb; border-color: #f5e2b8; }

.box-info > *:last-child,
.box-tip  > *:last-child,
.box-warn > *:last-child { margin-bottom: 0; }

/* 형광펜 강조 */
.hl {
	background: linear-gradient(transparent 58%, #ffeaa0 58%);
	padding: 0 .1em;
	font-weight: 700;
	color: var(--c-text);
}

/* =========================================================
   08. 표
   ========================================================= */

.entry-content table,
.entry-content .wp-block-table table {
	width: 100%;
	margin: 1.75rem 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	overflow: hidden;
	font-size: 0.95rem;
}

.entry-content th,
.entry-content td {
	padding: 0.85rem 1rem;
	border: none;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	line-height: 1.7;
}

.entry-content th {
	background: var(--c-surface-alt);
	font-weight: 700;
	color: var(--c-text);
}

.entry-content tr:last-child td {
	border-bottom: none;
}

/* 좁은 화면에서 표가 넘칠 때 가로 스크롤 */
.wp-block-table {
	overflow-x: auto;
}

/* =========================================================
   09. 이미지 / 코드 / 구분선
   ========================================================= */

.entry-content img,
.wp-block-image img {
	border-radius: var(--radius);
	height: auto;
}

.wp-block-image figcaption,
figcaption {
	font-size: 0.85rem;
	color: var(--c-muted);
	text-align: center;
	margin-top: 0.6rem;
}

.entry-content code {
	font-family: var(--font-mono);
	font-size: 0.88em;
	padding: 0.15em 0.4em;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-border);
	border-radius: 5px;
	color: #b4344b;
}

.entry-content pre {
	padding: 1.15rem 1.35rem;
	background: #16191d;
	border-radius: var(--radius);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 0.88rem;
	line-height: 1.7;
	color: #e6e8ec;
}

.entry-content pre code {
	padding: 0;
	background: none;
	border: none;
	color: inherit;
}

.entry-content hr,
.wp-block-separator {
	height: 1px;
	margin: var(--space-lg) 0;
	background: var(--c-border);
	border: none;
}

/* =========================================================
   10. 사이드바 / 위젯
   ========================================================= */

.widget-area .widget {
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	margin-bottom: var(--space);
	box-shadow: var(--shadow-sm);
}

.widget-area .widget-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--c-border);
}

.widget-area .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget-area .widget ul li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--c-surface-alt);
	font-size: 0.93rem;
	line-height: 1.6;
}

.widget-area .widget ul li:last-child {
	border-bottom: none;
}

.widget-area .widget a {
	color: var(--c-text-soft);
	text-decoration: none;
}

.widget-area .widget a:hover {
	color: var(--c-accent);
}

/* =========================================================
   11. 폼 요소
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.7rem 0.9rem;
	color: var(--c-text);
	background: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}

button,
input[type="submit"],
.button {
	background: var(--c-accent);
	border-radius: var(--radius-sm);
	font-weight: 700;
	padding: 0.8rem 1.5rem;
	transition: background-color .15s ease;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
	background: var(--c-accent-hover);
}

/* =========================================================
   12. 페이지네이션 / 댓글 / 푸터
   ========================================================= */

.paging-navigation .nav-links > *,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.7rem;
	margin-right: 0.35rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--c-text-soft);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
	color: #fff;
	background: var(--c-accent);
	border-color: var(--c-accent);
}

.comments-area {
	padding: clamp(1.35rem, 2.6vw, 2.5rem);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

.comment-body {
	padding: 1.25rem;
	background: var(--c-surface-alt);
	border-radius: var(--radius);
	margin-bottom: 1rem;
}

.site-footer,
.site-info {
	background: var(--c-surface);
	border-top: 1px solid var(--c-border);
	color: var(--c-muted);
	font-size: 0.88rem;
}

.site-info a {
	color: var(--c-text-soft);
	text-decoration: none;
}

.site-info a:hover {
	color: var(--c-accent);
}

/* =========================================================
   13. 반응형
   ========================================================= */

@media (max-width: 768px) {
	body {
		font-size: 16px;
	}

	.separate-containers .inside-article,
	.separate-containers .inside-page,
	.separate-containers .page-header,
	.one-container .site-content .content-area {
		border-radius: var(--radius);
		padding: 1.35rem 1.15rem;
	}

	.entry-content h2 {
		margin-top: 2.25rem;
		padding-left: 0.7rem;
		border-left-width: 3px;
	}

	.btn-cta {
		font-size: 1rem;
		padding: 1rem 1.25rem;
	}
}

@media (max-width: 480px) {
	.site-content {
		padding-inline: 0.5rem;
	}
}

/* =========================================================
   14. 접근성 / 인쇄
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	.site-header,
	.main-navigation,
	.widget-area,
	.site-footer,
	.comments-area {
		display: none !important;
	}

	body {
		background: #fff;
		font-size: 12pt;
	}

	.separate-containers .inside-article,
	.separate-containers .inside-page {
		border: none;
		box-shadow: none;
		padding: 0;
	}
}