/*
Theme Name: GeneratePress Luxe
Theme URI: https://generatepress.com/
Description: GeneratePress 자식 테마. 절제된 여백과 헤어라인, 큰 제목 대비로 구성한 고급 · 세련 스타일. 색상은 브론즈(기본)와 네이비 블루 두 가지를 사용자정의하기에서 전환할 수 있습니다.
Author: gwang
Author URI: https://example.com
Template: generatepress
Version: 2.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-luxe
Tags: blog, one-column, two-columns, custom-menu, custom-colors, editor-style, translation-ready
*/

/* =========================================================
   01. 팔레트 — 두 가지
   기본(브론즈)은 :root, 블루는 body.palette-blue 에 정의합니다.
   사용자정의하기 > 색상 팔레트 에서 전환합니다.
   변수 이름이 같으므로, 아래 모든 규칙은 팔레트와 무관하게 동작합니다.
   ========================================================= */

:root,
body.palette-bronze {
	/* 바탕 — 순백 대신 따뜻한 아이보리. 종이에 가까운 인상을 냅니다. */
	--c-bg:            #f7f4ee;
	--c-surface:       #fffdf9;
	--c-surface-alt:   #f1ece2;

	/* 글자 — 완전한 검정은 쓰지 않습니다. */
	--c-ink:           #171510;
	--c-body:          #423c31;
	--c-muted:         #8b8371;

	/* 강조 — 노란 금색이 아니라 누른 브론즈. 채도가 낮아야 고급스럽습니다. */
	--c-accent:        #9a7b3f;
	--c-accent-deep:   #6f5729;
	--c-accent-soft:   #cdb887;
	--c-accent-tint:   #f3ecdd;

	/* 선 — 이 테마의 뼈대입니다. */
	--c-line:          #e5ded0;
	--c-line-strong:   #cec5b2;

	/* 어두운 면 위에 얹는 글자색 */
	--c-on-dark:       #fdfaf3;

	--shadow-hover: 0 22px 45px -32px rgba(23, 21, 16, .55);
}

body.palette-blue,
.palette-blue {
	--c-bg:            #f4f6fa;
	--c-surface:       #ffffff;
	--c-surface-alt:   #edf1f7;

	--c-ink:           #0e1726;
	--c-body:          #39445a;
	--c-muted:         #7b8698;

	/* 강조 — 형광 파랑이 아니라 가라앉은 세이버 블루. */
	--c-accent:        #2f5c8a;
	--c-accent-deep:   #1d3f63;
	--c-accent-soft:   #a9c3dd;
	--c-accent-tint:   #e9f0f8;

	--c-line:          #dee5ee;
	--c-line-strong:   #c5d0de;

	--c-on-dark:       #f7fafd;

	--shadow-hover: 0 22px 45px -32px rgba(14, 23, 38, .55);
}

/* =========================================================
   02. 공통 토큰 — 서체 · 형태 · 리듬
   ========================================================= */

:root {
	/* 서체 — 제목만 세리프. 나머지는 전부 산세리프로 두어 무겁지 않게 합니다. */
	--font-serif: "Noto Serif KR", "Nanum Myeongjo", "Apple SD Gothic Neo",
		Georgia, "Times New Roman", serif;
	--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:    2px;
	--radius-lg: 4px;

	/* 작은 글자를 넓게 벌리면 고급 인쇄물의 인상이 납니다. */
	--track:      0.14em;
	--track-wide: 0.2em;

	/* 리듬 — 화면 폭에 따라 자연스럽게 늘고 줄어듭니다. */
	--space-xs: 0.75rem;
	--space-sm: 1.25rem;
	--space:    clamp(1.5rem, 3vw, 2.25rem);
	--space-lg: clamp(2.5rem, 5vw, 4rem);

	/* ★ 헤더와 본문 사이 여백. 0 으로 두면 헤더에 붙습니다. */
	--gap-top:    clamp(1rem, 2.5vw, 2rem);
	--gap-bottom: clamp(1.5rem, 3vw, 2.5rem);

	/* 본문 지면 안쪽 여백. 이 값이 글자와 종이 가장자리 사이 거리입니다. */
	--pad:        clamp(1.4rem, 3vw, 2.75rem);

	/* 움직임 곡선 — 처음엔 빠르게, 끝은 천천히 멎습니다. */
	--ease: cubic-bezier(.2, 0, .1, 1);
}

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

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

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

::selection {
	background: var(--c-accent-tint);
	color: var(--c-ink);
}

:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

/* 콘텐츠 최대 폭은 사용자정의하기(레이아웃 > 컨테이너 너비)에서 정합니다.
   예전에는 여기서 1160px 로 덮어써서 커스터마이저 값이 먹지 않았습니다.
   테마 쪽에서 고정하고 싶으면 아래 두 줄의 주석을 푸세요.
.grid-container {
	max-width: 1160px;
} */

/* 사이드바가 없는 글은 기본 테마처럼 지면을 가득 씁니다.
   한 줄이 너무 길어 읽기 불편하면 max-width 를 52rem(832px) · 60rem(960px)
   같은 값으로 되돌리면 다시 가운데로 모입니다. */
.no-sidebar .entry-content,
.no-sidebar .entry-header,
.no-sidebar .page-header {
	max-width: none;
}

/* 헤더 아래 여백. 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);
}

.separate-containers .site-content {
	padding-left: 0;
	padding-right: 0;
}

.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 에 배경을 줍니다. */
.separate-containers .inside-article,
.separate-containers .inside-page,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .site-main > .no-results,
.one-container .site-content .content-area {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: var(--pad);
}

.separate-containers .site-main > *:not(:last-child) {
	margin-bottom: var(--space);
}

/* 읽기 진행 막대 — 스크롤에 따라 상단에 얇은 선이 차오릅니다.
   지원하는 브라우저에서만 나타나고, 아니면 조용히 사라집니다. */
@supports (animation-timeline: scroll()) {
	body::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		z-index: 999;
		background: var(--c-accent);
		transform: scaleX(0);
		transform-origin: 0 50%;
		animation: luxe-read linear both;
		animation-timeline: scroll(root);
	}

	@keyframes luxe-read {
		to { transform: scaleX(1); }
	}
}

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

.site-header {
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-line);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* 헤더 고정 — 사용자정의하기에서 켜면 body 에 luxe-sticky 가 붙습니다.
   반투명 + 배경 흐림으로 아래 글이 비쳐 보입니다. */
.luxe-sticky .site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--c-bg) 78%, transparent);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
}

.admin-bar.luxe-sticky .site-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar.luxe-sticky .site-header { top: 46px; }
}

.site-title,
.site-title a {
	font-family: var(--font-serif);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--c-ink);
}

.site-description {
	margin-top: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--c-muted);
}

/* 내비게이션 — 배경 없이 글자만. 밑줄이 가운데에서 자라납니다. */
.main-navigation {
	background: var(--c-bg);
	border-bottom: 1px solid var(--c-line);
}

.site-header .main-navigation {
	background: transparent;
	border-bottom: 0;
}

.main-navigation .main-nav ul li a {
	position: relative;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-body);
	transition: color .3s var(--ease);
}

.main-navigation .main-nav ul li a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 1rem;
	height: 1px;
	background: var(--c-accent);
	transition: left .35s var(--ease), right .35s var(--ease);
}

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

.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after {
	left: 1.1rem;
	right: 1.1rem;
}

/* 드롭다운 */
.main-navigation ul ul {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	box-shadow: var(--shadow-hover);
}

.main-navigation ul ul li a {
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.main-navigation ul ul li a::after { display: none; }

.menu-toggle {
	font-size: 0.78rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
}

/* =========================================================
   05. 타이포그래피
   제목만 명조, 본문·소제목은 고딕. 크기 대비로 위계를 만듭니다.
   ========================================================= */

.entry-title,
.page-title,
.comments-title,
.comment-reply-title {
	font-family: var(--font-serif);
}

.entry-title,
.page-title {
	font-size: clamp(2rem, 4.6vw, 3.15rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.025em;
	color: var(--c-ink);
	margin-bottom: 0;
}

.entry-title a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--ease);
}

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

/* 글 머리 — 메타를 제목 위에 작게 얹고, 아래는 헤어라인으로 닫습니다. */
.single .entry-header,
.page .entry-header {
	margin-bottom: var(--space);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--c-line);
}

.entry-header .entry-meta {
	margin-bottom: 0.85rem;
}

/* 목록(홈·아카이브·검색)의 제목은 작게 */
.blog .entry-title,
.archive .entry-title,
.search .entry-title {
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	letter-spacing: -0.02em;
	margin-bottom: 0.75rem;
}

.blog .entry-header,
.archive .entry-header,
.search .entry-header {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0.5rem;
}

/* 소제목 — 세리프 대신 굵은 산세리프에 좁은 자간.
   위에 짧은 강조선을 얹어 구간의 시작을 알립니다. */
.entry-content h2 {
	font-family: var(--font-sans);
	font-size: clamp(1.4rem, 2.6vw, 1.8rem);
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: -0.03em;
	color: var(--c-ink);
	margin-top: var(--space-lg);
	margin-bottom: 1.1rem;
}

.entry-content h2::before {
	content: "";
	display: block;
	width: 2rem;
	height: 2px;
	margin-bottom: 1.15rem;
	background: var(--c-accent);
}

.entry-content h3 {
	font-family: var(--font-sans);
	font-size: clamp(1.14rem, 2vw, 1.32rem);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.025em;
	color: var(--c-ink);
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}

.entry-content h4 {
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent-deep);
	margin-top: 2rem;
	margin-bottom: 0.6rem;
}

.entry-content > *:first-child { margin-top: 0; }

.entry-content p,
.entry-summary p {
	line-height: 1.88;
	color: var(--c-body);
	margin-bottom: 1.25rem;
}

/* 리드 문단 — 첫 문단만 크게, 색을 진하게. */
.single .entry-content > p:first-of-type,
.page .entry-content > p:first-of-type {
	font-size: 1.12rem;
	line-height: 1.82;
	color: var(--c-ink);
}

/* 드롭캡 — 문단에 dropcap 클래스를 주면 첫 글자가 커집니다. */
.entry-content .dropcap::first-letter {
	float: left;
	font-family: var(--font-serif);
	font-size: 3.3em;
	line-height: 0.88;
	font-weight: 600;
	color: var(--c-accent-deep);
	margin: 0.05em 0.06em 0 0;
}

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

.entry-content a {
	color: var(--c-accent-deep);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	text-decoration-color: var(--c-accent-soft);
	transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}

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

/* 메타 — 작게, 넓은 자간, 대문자. 인쇄물의 캡션 규칙입니다. */
.entry-meta,
.posted-on,
.byline {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

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

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

/* 눈썹 — 소제목 위에 얹는 작은 분류 표시 */
.eyebrow {
	display: block;
	margin-bottom: 0.55rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--c-accent-deep);
}

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

.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.85;
	color: var(--c-body);
}

/* 점 대신 짧은 선 — 가장 조용한 불릿입니다. */
.entry-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.95em;
	width: 0.7rem;
	height: 1px;
	background: var(--c-accent);
}

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

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

/* 번호는 원 안에 가두지 않고 작은 숫자로 — 목차의 인상 */
.entry-content ol > li::before {
	content: counter(luxe-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.42em;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--c-accent);
}

.entry-content li > ul,
.entry-content li > ol {
	margin-top: 0.6rem;
	margin-bottom: 0;
}

/* =========================================================
   07. 버튼
   .entry-content a 규칙이 우선순위가 높아 버튼 색을 덮어쓰므로,
   버튼 선택자에 a.btn 형태를 함께 적어 확실히 이기게 합니다.
   ========================================================= */

.entry-content .wp-block-button__link,
.entry-content a.btn,
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1rem 2.25rem;
	font-family: var(--font-sans);
	font-size: 0.79rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--c-on-dark);
	background: var(--c-ink);
	border: 1px solid var(--c-ink);
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .35s var(--ease), border-color .35s var(--ease),
		color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}

.entry-content .wp-block-button__link:hover,
.entry-content a.btn:hover,
.btn:hover {
	color: var(--c-on-dark);
	background: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--shadow-hover);
}

/* 전체 너비 CTA — 안내글의 '바로가기' 버튼용 */
.entry-content a.btn-cta,
.btn-cta {
	display: flex;
	width: 100%;
	padding: 1.2rem 1.5rem;
	margin: 2.25rem 0;
	font-size: 0.86rem;
	color: var(--c-on-dark);
	background: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
}

.entry-content a.btn-cta:hover,
.btn-cta:hover {
	background: var(--c-ink);
	border-color: var(--c-ink);
}

/* 보조 버튼 — 테두리만 */
.entry-content a.btn-outline,
.btn-outline {
	color: var(--c-accent-deep);
	background: transparent;
	border-color: var(--c-accent-soft);
}

.entry-content a.btn-outline:hover,
.btn-outline:hover {
	color: var(--c-on-dark);
	background: var(--c-accent-deep);
	border-color: var(--c-accent-deep);
}

/* 화살표가 따라 움직이는 텍스트 링크 — 목록의 '더 읽기'에 어울립니다. */
.entry-content a.link-arrow,
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent-deep);
	text-decoration: none;
}

.link-arrow::after {
	content: "→";
	transition: transform .35s var(--ease);
}

.link-arrow:hover::after { transform: translateX(4px); }

/* =========================================================
   08. 인용 / 상자 / 장식
   ========================================================= */

/* 인용은 상자가 아니라 지면에서 떼어낸 발췌문처럼 */
.entry-content blockquote {
	margin: 2.5rem 0;
	padding: 0 0 0 1.75rem;
	border: none;
	border-left: 2px solid var(--c-accent-soft);
	background: none;
	font-family: var(--font-serif);
	font-size: 1.14rem;
	line-height: 1.85;
	font-style: normal;
	color: var(--c-ink);
}

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

.entry-content blockquote cite {
	display: block;
	margin-top: 0.85rem;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

/* 안내 상자 — 색을 칠하지 않고 선과 여백으로만 구분합니다. */
.box-note,
.box-tip,
.box-warn {
	margin: 2.25rem 0;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--c-line);
	border-left: 2px solid var(--c-line-strong);
	border-radius: var(--radius);
	background: var(--c-surface-alt);
	font-size: 0.96rem;
	line-height: 1.85;
}

.box-tip  { border-left-color: var(--c-accent); background: var(--c-accent-tint); }
.box-warn { border-left-color: #a2543f; background: color-mix(in srgb, #a2543f 7%, var(--c-surface)); }

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

/* 상자 제목 — 작고 넓은 자간 */
.box-note > strong:first-child,
.box-tip  > strong:first-child,
.box-warn > strong:first-child {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.68rem;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--c-accent-deep);
}

.box-warn > strong:first-child { color: #a2543f; }

/* 형광펜 대신 옅은 밑칠 */
.hl {
	background: linear-gradient(transparent 62%, var(--c-accent-tint) 62%);
	box-shadow: inset 0 -1px 0 var(--c-accent-soft);
	padding: 0 .12em;
	font-weight: 700;
	color: var(--c-ink);
}

/* 장식 구분선 — [ornament] 숏코드가 이 마크업을 출력합니다. */
.ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin: var(--space-lg) 0;
	color: var(--c-accent);
}

.ornament::before,
.ornament::after {
	content: "";
	width: 3rem;
	height: 1px;
	background: var(--c-line-strong);
}

.ornament span {
	font-size: 0.5rem;
	letter-spacing: 0.3em;
}

/* 통계·핵심 수치를 나란히 놓는 줄. 그룹 블록에 luxe-stats 클래스. */
.luxe-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	margin: 2.25rem 0;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}

.luxe-stats > * {
	background: var(--c-surface);
	padding: 1.35rem 1.25rem;
	margin: 0;
}

.luxe-stats strong {
	display: block;
	font-family: var(--font-serif);
	font-size: 1.65rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	line-height: 1.2;
}

.luxe-stats small {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

/* =========================================================
   09. 표 — 세로선을 없애고 가로 헤어라인만 남깁니다.
   ========================================================= */

.entry-content table,
.entry-content .wp-block-table table {
	width: 100%;
	margin: 2.25rem 0;
	border-collapse: collapse;
	border: none;
	font-size: 0.94rem;
}

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

.entry-content th {
	background: none;
	border-bottom: 1px solid var(--c-ink);
	padding-bottom: 0.65rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink);
}

.entry-content tr:last-child td { border-bottom: 1px solid var(--c-line-strong); }

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

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

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

.post-image,
.featured-image { margin-bottom: var(--space); }

/* 목록의 썸네일 — 마우스를 올리면 아주 조금 확대됩니다. */
.blog .post-image,
.archive .post-image {
	overflow: hidden;
	border-radius: var(--radius);
}

.blog .post-image img,
.archive .post-image img {
	transition: transform .7s var(--ease);
}

.blog article:hover .post-image img,
.archive article:hover .post-image img {
	transform: scale(1.03);
}

.wp-block-image figcaption,
figcaption {
	margin-top: 0.7rem;
	font-size: 0.73rem;
	letter-spacing: 0.05em;
	color: var(--c-muted);
	text-align: center;
}

.entry-content code {
	font-family: var(--font-mono);
	font-size: 0.87em;
	padding: 0.15em 0.4em;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	color: var(--c-accent-deep);
}

.entry-content pre {
	padding: 1.5rem 1.6rem;
	background: var(--c-ink);
	border-radius: var(--radius);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: 0.86rem;
	line-height: 1.75;
	color: var(--c-on-dark);
}

.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-line);
	border: none;
}

/* =========================================================
   11. 목록 페이지 — 마우스를 올리면 지면이 살짝 떠오릅니다.
   ========================================================= */

.blog .separate-containers .inside-article,
.archive .separate-containers .inside-article,
.search .separate-containers .inside-article {
	transition: transform .4s var(--ease), box-shadow .4s var(--ease),
		border-color .4s var(--ease);
}

.blog .separate-containers article:hover .inside-article,
.archive .separate-containers article:hover .inside-article,
.search .separate-containers article:hover .inside-article {
	transform: translateY(-2px);
	border-color: var(--c-line-strong);
	box-shadow: var(--shadow-hover);
}

.entry-summary .read-more,
.more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent-deep);
	text-decoration: none;
	white-space: nowrap;
}

.entry-summary .read-more::after,
.more-link::after {
	content: "→";
	transition: transform .35s var(--ease);
}

article:hover .read-more::after,
article:hover .more-link::after { transform: translateX(4px); }

/* 아카이브 머리 */
.page-header .page-title {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

/* =========================================================
   12. 사이드바 — 상자를 없애고 헤어라인으로만 구분합니다.
   ========================================================= */

.widget-area .widget {
	background: none;
	border: none;
	border-top: 1px solid var(--c-line-strong);
	border-radius: 0;
	box-shadow: none;
	padding: 1.4rem 0 0;
	margin-bottom: 2.5rem;
}

.widget-area .widget:first-child {
	border-top: none;
	padding-top: 0;
}

.widget-area .widget-title {
	font-family: var(--font-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--c-accent-deep);
	margin-bottom: 1rem;
	padding-bottom: 0;
	border-bottom: none;
}

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

.widget-area .widget ul li {
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--c-line);
	font-size: 0.92rem;
	line-height: 1.65;
}

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

.widget-area .widget a {
	color: var(--c-body);
	text-decoration: none;
	transition: color .3s var(--ease);
}

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

/* =========================================================
   13. 폼 요소
   ========================================================= */

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.94rem;
	padding: 0.85rem 1rem;
	color: var(--c-ink);
	background: var(--c-surface);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius);
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 16%, transparent);
}

button,
input[type="submit"],
.button {
	font-size: 0.79rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.95rem 2rem;
	color: var(--c-on-dark);
	background: var(--c-ink);
	border: 1px solid var(--c-ink);
	border-radius: var(--radius);
	transition: background-color .35s var(--ease), border-color .35s var(--ease);
}

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

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

.paging-navigation .nav-links > *,
.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 0.75rem;
	margin-right: 0.4rem;
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--c-body);
	background: transparent;
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius);
	text-decoration: none;
	transition: color .3s var(--ease), background-color .3s var(--ease),
		border-color .3s var(--ease);
}

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

.comments-area {
	padding: var(--pad);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
}

.comments-title,
.comment-reply-title {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.comment-body {
	padding: 1.4rem 0;
	background: none;
	border-bottom: 1px solid var(--c-line);
	border-radius: 0;
	margin-bottom: 0;
}

.comment-author .fn {
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--c-ink);
}

.comment-metadata {
	font-size: 0.7rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-muted);
}

/* 푸터 — 어두운 면으로 페이지를 닫습니다. */
.site-footer,
.site-info {
	background: var(--c-ink);
	border-top: none;
	color: color-mix(in srgb, var(--c-on-dark) 62%, transparent);
	font-size: 0.76rem;
	letter-spacing: 0.05em;
}

.site-footer .footer-widgets {
	background: var(--c-ink);
	padding-top: 3rem;
	padding-bottom: 1rem;
}

.site-footer .widget {
	border-top-color: color-mix(in srgb, var(--c-on-dark) 14%, transparent);
}

.site-footer .widget-title { color: var(--c-accent-soft); }

.site-footer a,
.site-info a {
	color: color-mix(in srgb, var(--c-on-dark) 85%, transparent);
	text-decoration: none;
	transition: color .3s var(--ease);
}

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

.site-info {
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
}

/* =========================================================
   15. 반응형
   ========================================================= */

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

	.entry-content blockquote {
		padding-left: 1.25rem;
		font-size: 1.06rem;
	}

	.entry-content .dropcap::first-letter { font-size: 2.9em; }

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

	/* 손가락으로 넘기는 화면에서는 떠오르는 효과를 끕니다. */
	.blog .separate-containers article:hover .inside-article,
	.archive .separate-containers article:hover .inside-article {
		transform: none;
		box-shadow: none;
	}
}

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

	.ornament::before,
	.ornament::after { width: 2rem; }
}

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

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

	body::before { display: none; }
}

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

	body {
		background: #fff;
		color: #000;
		font-size: 11.5pt;
	}

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

	.entry-content a {
		color: #000;
		text-decoration: underline;
	}
}