/*
Theme Name: GeneratePress Lumen
Theme URI: https://generatepress.com/
Description: GeneratePress 자식 테마. 밝은 지면 위에 유리질 표면과 은은한 광원, 큰 디스플레이 세리프를 얹은 고급 · 현대 스타일입니다. 아이보리(앤티크 골드) · 미스트(딥 틸) · 블러시(로즈우드) · 세이지(올리브) 네 가지 밝은 팔레트와 잉크(어두운 지면)를 사용자정의하기에서 전환합니다.
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-lumen
Tags: blog, one-column, two-columns, custom-menu, custom-colors, editor-style, translation-ready, full-width-template
*/

/* =========================================================
   01. 팔레트 — 밝은 지면 네 가지 + 어두운 지면 한 가지
   변수 이름이 모두 같으므로, 아래 모든 규칙은 팔레트와 무관하게 동작합니다.
   기본은 아이보리(따뜻한 미색 지면 + 앤티크 골드)입니다.
   사용자정의하기 > Lumen 스타일 에서 전환합니다.
   ========================================================= */

:root,
body.palette-ivory {
	color-scheme: light;

	/* 바탕 — 순백은 쓰지 않습니다. 미색이 섞여야 종이에 가깝고 눈이 덜 부십니다. */
	--c-bg:            #f2efe9;
	--c-bg-deep:       #e7e1d6;
	--c-surface:       #fffdf9;
	--c-surface-alt:   #f7f3ec;

	/* 유리질 표면 — 지면이 비쳐 보이는 반투명 판입니다. */
	--c-glass:         rgba(255, 255, 255, .72);
	--c-glass-strong:  rgba(255, 255, 255, .9);

	/* 글자 — 완전한 검정은 쓰지 않습니다. */
	--c-ink:           #17150f;
	--c-body:          #4a463d;
	--c-muted:         #8b8578;

	/* 강조 — 밝은 지면에서는 채도를 낮춘 진한 색이라야 글자로 읽힙니다.
	   soft 는 마우스를 올렸을 때 쓰는 한 단계 진한 값입니다. */
	--c-accent:        #8a6a3b;
	--c-accent-deep:   #634b28;
	--c-accent-soft:   #6f5530;
	--c-accent-tint:   rgba(138, 106, 59, .10);
	--c-on-accent:     #fffdf8;

	/* 선 — 이 테마의 뼈대입니다. */
	--c-line:          rgba(23, 21, 15, .11);
	--c-line-strong:   rgba(23, 21, 15, .24);

	/* 배경 광원 — 지면 뒤에서 은은하게 번지는 두 개의 빛입니다. */
	--glow-a:          rgba(199, 168, 112, .30);
	--glow-b:          rgba(150, 170, 205, .18);

	--shadow-sm:       0 1px 2px rgba(23, 21, 15, .05);
	--shadow:          0 18px 40px -30px rgba(23, 21, 15, .42);
	--shadow-lg:       0 40px 80px -50px rgba(23, 21, 15, .45);
}

body.palette-mist {
	color-scheme: light;

	--c-bg:            #eef1f4;
	--c-bg-deep:       #e1e6eb;
	--c-surface:       #ffffff;
	--c-surface-alt:   #f5f7f9;

	--c-glass:         rgba(255, 255, 255, .74);
	--c-glass-strong:  rgba(255, 255, 255, .92);

	--c-ink:           #0e1519;
	--c-body:          #445159;
	--c-muted:         #838f99;

	/* 강조 — 하늘색이 아니라 가라앉은 딥 틸. 차갑고 단정합니다. */
	--c-accent:        #1f6272;
	--c-accent-deep:   #14454f;
	--c-accent-soft:   #175462;
	--c-accent-tint:   rgba(31, 98, 114, .10);
	--c-on-accent:     #f6fdff;

	--c-line:          rgba(14, 21, 25, .10);
	--c-line-strong:   rgba(14, 21, 25, .22);

	--glow-a:          rgba(118, 180, 200, .26);
	--glow-b:          rgba(162, 152, 220, .16);

	--shadow-sm:       0 1px 2px rgba(14, 21, 25, .05);
	--shadow:          0 18px 40px -30px rgba(14, 21, 25, .42);
	--shadow-lg:       0 40px 80px -50px rgba(14, 21, 25, .45);
}

body.palette-blush {
	color-scheme: light;

	--c-bg:            #f5efec;
	--c-bg-deep:       #eae0db;
	--c-surface:       #fffcfa;
	--c-surface-alt:   #faf3f0;

	--c-glass:         rgba(255, 255, 255, .72);
	--c-glass-strong:  rgba(255, 255, 255, .9);

	--c-ink:           #1c1413;
	--c-body:          #574a47;
	--c-muted:         #9a8b87;

	/* 강조 — 분홍이 아니라 그늘진 로즈우드. 따뜻하되 달지 않습니다. */
	--c-accent:        #8f4f52;
	--c-accent-deep:   #6b3639;
	--c-accent-soft:   #7c4245;
	--c-accent-tint:   rgba(143, 79, 82, .09);
	--c-on-accent:     #fffaf9;

	--c-line:          rgba(28, 20, 19, .11);
	--c-line-strong:   rgba(28, 20, 19, .23);

	--glow-a:          rgba(216, 162, 152, .28);
	--glow-b:          rgba(192, 176, 216, .16);

	--shadow-sm:       0 1px 2px rgba(28, 20, 19, .05);
	--shadow:          0 18px 40px -30px rgba(28, 20, 19, .42);
	--shadow-lg:       0 40px 80px -50px rgba(28, 20, 19, .45);
}

body.palette-sage {
	color-scheme: light;

	--c-bg:            #eef1ea;
	--c-bg-deep:       #e2e7dc;
	--c-surface:       #fdfefb;
	--c-surface-alt:   #f5f8f1;

	--c-glass:         rgba(255, 255, 255, .72);
	--c-glass-strong:  rgba(255, 255, 255, .9);

	--c-ink:           #12160f;
	--c-body:          #474e41;
	--c-muted:         #868d7c;

	/* 강조 — 형광 초록이 아니라 깊은 올리브. 밝은 지면에 차분하게 앉습니다. */
	--c-accent:        #4c6b45;
	--c-accent-deep:   #354c30;
	--c-accent-soft:   #3f5b39;
	--c-accent-tint:   rgba(76, 107, 69, .10);
	--c-on-accent:     #fbfdf8;

	--c-line:          rgba(18, 22, 15, .11);
	--c-line-strong:   rgba(18, 22, 15, .23);

	--glow-a:          rgba(152, 186, 140, .26);
	--glow-b:          rgba(203, 190, 138, .16);

	--shadow-sm:       0 1px 2px rgba(18, 22, 15, .05);
	--shadow:          0 18px 40px -30px rgba(18, 22, 15, .42);
	--shadow-lg:       0 40px 80px -50px rgba(18, 22, 15, .45);
}

/* 어두운 지면 — 밤에 읽는 사이트, 또는 아래 '시스템 설정 따름' 의 전환 대상입니다. */
body.palette-ink {
	color-scheme: dark;

	--c-bg:            #0e1014;
	--c-bg-deep:       #08090c;
	--c-surface:       #15181f;
	--c-surface-alt:   #1b1f28;

	--c-glass:         rgba(255, 255, 255, .05);
	--c-glass-strong:  rgba(255, 255, 255, .08);

	--c-ink:           #f4f1ea;
	--c-body:          #c3bfb6;
	--c-muted:         #8b8880;

	--c-accent:        #d9b98c;
	--c-accent-deep:   #b18f5d;
	--c-accent-soft:   #f0dcbc;
	--c-accent-tint:   rgba(217, 185, 140, .12);
	--c-on-accent:     #14110b;

	--c-line:          rgba(255, 255, 255, .09);
	--c-line-strong:   rgba(255, 255, 255, .19);

	--glow-a:          rgba(217, 185, 140, .14);
	--glow-b:          rgba(120, 148, 255, .09);

	--shadow-sm:       0 1px 2px rgba(0, 0, 0, .4);
	--shadow:          0 18px 40px -28px rgba(0, 0, 0, .9);
	--shadow-lg:       0 40px 80px -48px rgba(0, 0, 0, .95);
}

/* 시스템 설정 따라가기 — 기기가 어두운 모드일 때만 잉크로 내려갑니다.
   ('시스템 설정 따름' 을 켰을 때만 body 에 lumen-auto 가 붙습니다.) */
@media (prefers-color-scheme: dark) {
	body.lumen-auto:not(.palette-ink) {
		color-scheme: dark;

		--c-bg:            #0e1014;
		--c-bg-deep:       #08090c;
		--c-surface:       #15181f;
		--c-surface-alt:   #1b1f28;

		--c-glass:         rgba(255, 255, 255, .05);
		--c-glass-strong:  rgba(255, 255, 255, .08);

		--c-ink:           #f4f1ea;
		--c-body:          #c3bfb6;
		--c-muted:         #8b8880;

		--c-accent:        #d9b98c;
		--c-accent-deep:   #b18f5d;
		--c-accent-soft:   #f0dcbc;
		--c-accent-tint:   rgba(217, 185, 140, .12);
		--c-on-accent:     #14110b;

		--c-line:          rgba(255, 255, 255, .09);
		--c-line-strong:   rgba(255, 255, 255, .19);

		--glow-a:          rgba(217, 185, 140, .14);
		--glow-b:          rgba(120, 148, 255, .09);

		--shadow-sm:       0 1px 2px rgba(0, 0, 0, .4);
		--shadow:          0 18px 40px -28px rgba(0, 0, 0, .9);
		--shadow-lg:       0 40px 80px -48px rgba(0, 0, 0, .95);
	}
}

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

:root {
	/* 서체.
	   제목은 라틴 글자에 Instrument Serif, 한글에 Noto Serif KR 이 걸리도록
	   두 서체를 순서대로 두었습니다. 본문은 전부 산세리프입니다. */
	--font-display: "Instrument Serif", "Noto Serif KR", "Nanum Myeongjo",
		"Apple SD Gothic Neo", Georgia, 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-xs: 6px;
	--radius:    12px;
	--radius-lg: 20px;
	--radius-xl: 28px;
	--radius-pill: 999px;

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

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

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

	/* 헤더와 본문 사이 간격 (화면이 넓을수록 커지고 20px 에서 멈춥니다).
	   사용자정의하기 > Lumen 스타일 > '헤더와 본문 사이 여백' 에서 0 ~ 80px 로
	   조절할 수 있고, 0 으로 두면 헤더에 그대로 붙습니다.
	   ※ 이 값 위에 GeneratePress 자체의 컨테이너 여백이 더해집니다.
	     그쪽은 사용자정의하기 > 레이아웃 > 컨테이너 에서 조절하세요. */
	--gap-top:    clamp(.75rem, 1.5vw, 1.25rem);
	/* 본문과 푸터 사이도 같은 값으로 둡니다. 따로 벌리고 싶을 때만 다른 값을 주세요. */
	--gap-bottom: var(--gap-top);

	/* 글줄 길이 제한값.
	   기본값으로는 '적용되지 않습니다' — 사용자정의하기 > Lumen 스타일 >
	   '낱글 본문 글줄 길이' 에 값을 넣었을 때만 켜집니다(body.lumen-measure).
	   제한이 없는 상태가 GeneratePress 기본 동작이고, 디자인 글처럼 스스로
	   폭을 정하는 본문을 좁히지 않습니다. */
	--measure: 42rem;

	/* 유리 흐림 강도. 사용자정의하기에서 0 으로 내리면 불투명 판이 됩니다. */
	--blur: 16px;

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

/* =========================================================
   03. 기본 골격 · 배경 연출
   ========================================================= */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	background-color: var(--c-bg);
	/* 화면 뒤에서 번지는 두 개의 광원. 스크롤해도 자리를 지킵니다. */
	background-image:
		radial-gradient(58rem 40rem at 12% -8%, var(--glow-a), transparent 62%),
		radial-gradient(52rem 36rem at 92% 4%, var(--glow-b), transparent 60%);
	background-attachment: fixed;
	background-repeat: no-repeat;

	color: var(--c-body);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.75;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* 필름 그레인 — 매끈한 그라데이션에 아주 옅은 입자를 얹어
   화면이 인쇄된 면처럼 보이게 합니다. 켜고 끌 수 있습니다. */
body.lumen-grain::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	opacity: .03;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.palette-ink.lumen-grain::before {
	mix-blend-mode: overlay;
	opacity: .038;
}

@media (prefers-color-scheme: dark) {
	body.lumen-auto.lumen-grain::before {
		mix-blend-mode: overlay;
		opacity: .038;
	}
}

.site-content {
	padding-top: var(--gap-top);
	padding-bottom: var(--gap-bottom);
}

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

/* 스크롤바 — 지면과 같은 색으로 눕힙니다. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--c-line-strong) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: var(--c-line-strong);
	border-radius: var(--radius-pill);
	border: 3px solid transparent;
	background-clip: content-box;
}

/* 키보드 초점 — 눈에 보이되 거슬리지 않게. */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: var(--radius-xs);
}

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

h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--font-display);
	color: var(--c-ink);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.02em;
	text-wrap: balance;
	/* 한글은 단어 안에서 끊기지 않게 둡니다. 긴 제목의 줄바꿈이 훨씬 자연스럽습니다. */
	word-break: keep-all;
	overflow-wrap: break-word;
	margin-bottom: .6em;
}

/* 제목 크기. 넓은 화면에서 46px 정도로 멈춥니다.
   더 크게 쓰고 싶으면 마지막 값(2.85rem)만 올리세요. */
h1, .entry-title { font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.85rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.28rem, 1.05rem + .9vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); }

h5, h6 {
	font-family: var(--font-sans);
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: .8em;
}

/* 본문 안 h2 위에는 짧은 금속선을 하나 둡니다. 장이 바뀌는 표시입니다. */
.entry-content > h2 {
	margin-top: 2.4em;
	padding-top: 1.1em;
	position: relative;
}

.entry-content > h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.5rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--c-accent), transparent);
}

.entry-content > h3 { margin-top: 1.9em; }

p, li, dd, figcaption, .entry-meta, .widget {
	word-break: keep-all;
	overflow-wrap: break-word;
}

p { margin-bottom: 1.4em; text-wrap: pretty; }

strong, b { color: var(--c-ink); font-weight: 600; }

small { color: var(--c-muted); }

a {
	color: var(--c-accent);
	text-decoration: none;
	transition: color .25s var(--ease);
}

a:hover, a:focus { color: var(--c-accent-soft); }

/* 본문 링크는 밑줄을 두되, 글자에 닿지 않게 아래로 내립니다. */
.entry-content a:not(.btn):not(.link-arrow):not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: text-decoration-color .25s var(--ease), color .25s var(--ease);
}

.entry-content a:not(.btn):not(.link-arrow):not(.wp-block-button__link):hover {
	text-decoration-color: var(--c-accent);
}

hr,
.wp-block-separator {
	border: 0;
	height: 1px;
	margin: var(--space-lg) 0;
	background: linear-gradient(90deg, transparent, var(--c-line-strong), transparent);
}

/* 작게 벌려 쓰는 라벨 — 카테고리 · 섹션 이름에 씁니다. */
.lumen-eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--c-accent);
}

/* =========================================================
   05. 헤더 · 내비게이션
   ========================================================= */

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

.site-header .inside-header {
	padding-top: clamp(1.1rem, 2.5vw, 1.9rem);
	padding-bottom: clamp(1.1rem, 2.5vw, 1.9rem);
}

/* 로고(사이트 제목)는 본문과 같은 산세리프를 씁니다.
   제목용 세리프로 되돌리려면 아래 --font-sans 를 --font-display 로 바꾸세요. */
.site-title,
.site-title a {
	font-family: var(--font-sans);
	font-size: clamp(1.45rem, 1.2rem + .8vw, 2rem);
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--c-ink);
	line-height: 1.1;
	margin-bottom: 0;
}

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

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

/* 메인 내비게이션 — 유리판 한 장. */
.main-navigation {
	background: var(--c-glass);
	backdrop-filter: blur(var(--blur)) saturate(1.3);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(1.3);
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	font-size: .88rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--c-body);
	line-height: 1;
	padding-top: 1.15rem;
	padding-bottom: 1.15rem;
	transition: color .25s var(--ease);
}

.main-navigation .main-nav ul li a { position: relative; }

/* 밑줄이 가운데에서 양쪽으로 자라납니다. */
.main-navigation .main-nav ul li a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: .75rem;
	height: 1px;
	background: var(--c-accent);
	transition: left .3s var(--ease-out), right .3s var(--ease-out);
}

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

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

/* 하위 메뉴 */
.main-navigation ul ul {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: .4rem;
	overflow: hidden;
}

.main-navigation ul ul li a {
	padding: .7rem 1rem;
	border-radius: var(--radius-xs);
}

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

.main-navigation ul ul li:hover > a {
	background: var(--c-accent-tint);
	color: var(--c-ink);
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus { color: var(--c-accent); }

/* 헤더 고정 — 사용자정의하기에서 켭니다. */
body.lumen-sticky .site-header {
	position: sticky;
	top: 0;
	z-index: 120;
	background: color-mix(in srgb, var(--c-bg) 93%, transparent);
	backdrop-filter: blur(var(--blur)) saturate(1.3);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(1.3);
	transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}

body.lumen-sticky.is-scrolled .site-header {
	box-shadow: var(--shadow);
}

body.lumen-sticky.is-scrolled .site-header .inside-header {
	padding-top: .85rem;
	padding-bottom: .85rem;
}

/* =========================================================
   06. 지면(카드) — 글 · 위젯 공통의 유리판
   ========================================================= */

.separate-containers .inside-article,
.separate-containers .inside-page,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .inside-page-header,
.separate-containers .site-main > .no-results,
.one-container .site-content {
	background: var(--c-glass);
	backdrop-filter: blur(var(--blur)) saturate(1.25);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(1.25);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow);
	padding: var(--pad);
	position: relative;
	overflow: hidden;
}

/* 판 윗변에 얇은 빛줄기 — 유리 모서리에 반사가 걸린 느낌을 냅니다. */
.separate-containers .inside-article::before,
.separate-containers .comments-area::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent, color-mix(in srgb, var(--c-accent) 55%, transparent), transparent);
	opacity: .7;
}

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

/* 낱글 · 페이지 본문 */
.entry-content {
	font-size: 1.02rem;
}

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

/* 글 머리 */
.entry-header { margin-bottom: 1.6rem; }

.single .entry-header,
.page .entry-header {
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--c-line);
	margin-bottom: 2.2rem;
}

.entry-meta {
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--c-muted);
	margin-top: .9rem;
}

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

.entry-meta .cat-links a,
.entry-meta .tags-links a {
	display: inline-block;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	padding: .18rem .7rem;
	margin-right: .3rem;
	transition: border-color .25s var(--ease), background .25s var(--ease);
}

.entry-meta .cat-links a:hover,
.entry-meta .tags-links a:hover {
	background: var(--c-accent-tint);
	border-color: var(--c-accent);
}

/* 아카이브 제목 */
.page-header .page-title,
.archive .page-title,
.search .page-title {
	font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem);
	margin-bottom: .3em;
}

.page-header .taxonomy-description,
.page-header .author-info { color: var(--c-muted); }

/* =========================================================
   07. 목록 — 벤토 격자
   첫 글을 두 칸으로 눕혀 지면에 리듬을 만듭니다.
   ========================================================= */

body.lumen-bento.blog .site-main,
body.lumen-bento.archive .site-main,
body.lumen-bento.search-results .site-main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space);
	align-items: stretch;
}

body.lumen-bento .site-main > article { margin-bottom: 0 !important; }

body.lumen-bento .site-main > article:first-of-type { grid-column: 1 / -1; }

/* 페이지네이션 · 알림 같은 것은 격자 전체 폭을 씁니다. */
body.lumen-bento .site-main > .paging-navigation,
body.lumen-bento .site-main > .page-header,
body.lumen-bento .site-main > .no-results { grid-column: 1 / -1; }

body.lumen-bento .site-main > article > .inside-article {
	height: 100%;
	display: flex;
	flex-direction: column;
}

body.lumen-bento .site-main > article .entry-summary { flex: 1 1 auto; }

@media (max-width: 768px) {
	body.lumen-bento.blog .site-main,
	body.lumen-bento.archive .site-main,
	body.lumen-bento.search-results .site-main {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 카드 안 글자 크기는 화면 폭이 아니라 '카드 폭' 을 따릅니다.
   3단 격자처럼 칸이 좁아졌는데 제목만 큰 채로 남으면 두세 글자씩 끊겨 보입니다. */
body.lumen-bento .site-main > article {
	container-type: inline-size;
	container-name: lumen-card;
}

/* 컨테이너 쿼리는 우선순위를 올려 주지 않습니다. 위쪽 목록 규칙(.blog .entry-title 등)이
   같은 값을 잡고 있으므로, 여기서는 body 를 붙여 한 단계 위로 올려 둡니다. */
@container lumen-card (max-width: 30rem) {
	body.lumen-bento .entry-title { font-size: 1.32rem; }

	body.lumen-bento .inside-article { padding: clamp(1.25rem, 5cqi, 1.9rem); }

	body.lumen-bento .entry-summary,
	body.lumen-bento .entry-content { font-size: .95rem; }

	body.lumen-bento .entry-header { margin-bottom: 1.1rem; }
}

/* 목록 카드의 반응 */
.separate-containers .inside-article {
	transition: transform .45s var(--ease-out), border-color .45s var(--ease),
		box-shadow .45s var(--ease-out);
}

.blog article:hover .inside-article,
.archive article:hover .inside-article,
.search-results article:hover .inside-article {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-line));
	box-shadow: var(--shadow-lg);
}

/* 제목 안에 링크가 들어가도 제목 색을 유지합니다. */
.entry-title a { color: var(--c-ink); }
.entry-title a:hover { color: var(--c-accent); }

.blog .entry-title,
.archive .entry-title,
.search-results .entry-title {
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem);
	margin-bottom: .4em;
}

.blog .entry-title a,
.archive .entry-title a,
.search-results .entry-title a { color: var(--c-ink); }

.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search-results .entry-title a:hover { color: var(--c-accent); }

/* 대표 이미지 — 판 안쪽 여백을 넘어 가장자리까지 채웁니다. */
.post-image,
.page-header-image { margin-bottom: 1.4rem; }

.separate-containers .inside-article > .post-image:first-child {
	margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 1.6rem;
}

.post-image img,
.page-header-image img,
.wp-post-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform .7s var(--ease-out), filter .7s var(--ease-out);
}

.separate-containers .inside-article > .post-image:first-child img {
	aspect-ratio: 16 / 9;
}

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

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

figcaption,
.wp-element-caption {
	font-size: .8rem;
	color: var(--c-muted);
	text-align: center;
	margin-top: .7rem;
}

.read-more,
.more-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
	margin-top: 1rem;
}

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

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

/* =========================================================
   07-1. 사이드바를 쓰지 않을 때
   GeneratePress 사용자정의하기 > 레이아웃 > 사이드바 = "콘텐츠(사이드바 없음)"
   를 고르면 body 에 no-sidebar 클래스가 붙습니다. 그때만 적용되는 규칙입니다.
   ========================================================= */

/* 낱글 · 페이지 — 글줄을 읽기 좋은 길이로 모읍니다.
   기본으로는 적용되지 않고, 사용자정의하기에서 '낱글 본문 글줄 길이' 에 값을 넣어
   body 에 lumen-measure 가 붙었을 때만 켜집니다. 제한이 없는 상태가 기본입니다.

   :where(...) 안의 것들은 언제나 제외합니다 — 표 · 이미지처럼 넓어야 읽히는 것,
   그리고 .pts-preset 같은 '스스로 폭과 단을 정하는' 디자인 글 래퍼입니다.
   이런 본문을 글줄 폭에 가두면 안쪽 2단 레이아웃이 함께 찌그러집니다. */
body.lumen-measure.no-sidebar.single .entry-header,
body.lumen-measure.no-sidebar.page .entry-header,
body.lumen-measure.no-sidebar.single .entry-content > *:not(:where(.alignwide, .alignfull,
	.lumen-hero, .lumen-stats, table, figure, hr, style,
	.wp-block-table, .wp-block-image, .wp-block-gallery, .wp-block-embed,
	.wp-block-separator, .ornament,
	.pts-preset, [class*="-landing"], [class*="pl-wrap"])),
body.lumen-measure.no-sidebar.page .entry-content > *:not(:where(.alignwide, .alignfull,
	.lumen-hero, .lumen-stats, table, figure, hr, style,
	.wp-block-table, .wp-block-image, .wp-block-gallery, .wp-block-embed,
	.wp-block-separator, .ornament,
	.pts-preset, [class*="-landing"], [class*="pl-wrap"])) {
	max-width: var(--measure);
	margin-inline: auto;
}

/* 넓게 쓰는 것들은 글줄 폭에 갇히지 않되, 지면 폭은 넘지 않습니다. */
body.lumen-measure.no-sidebar .entry-content > .alignwide,
body.lumen-measure.no-sidebar .entry-content > .lumen-stats,
body.lumen-measure.no-sidebar .entry-content > table,
body.lumen-measure.no-sidebar .entry-content > .wp-block-table,
body.lumen-measure.no-sidebar .entry-content > figure {
	max-width: min(100%, 62rem);
	margin-inline: auto;
}

/* 댓글도 같은 폭으로 맞춥니다. */
body.lumen-measure.no-sidebar.single .comments-area > *,
body.lumen-measure.no-sidebar.page .comments-area > * {
	max-width: var(--measure);
	margin-inline: auto;
}

/* 목록 · 아카이브 — 사이드바가 빠진 만큼 격자를 한 칸 늘립니다.
   첫 글은 여전히 넓게(3칸 중 2칸) 두어 벤토 배치를 유지합니다. */
@media (min-width: 1100px) {
	body.lumen-bento.no-sidebar.blog .site-main,
	body.lumen-bento.no-sidebar.archive .site-main,
	body.lumen-bento.no-sidebar.search-results .site-main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.lumen-bento.no-sidebar .site-main > article:first-of-type {
		grid-column: span 2;
	}
}

/* 벤토 격자를 끈 경우(세로 목록)에는 요약문만 글줄 폭으로 모읍니다. */
body.no-sidebar:not(.lumen-bento) .entry-summary,
body.no-sidebar:not(.lumen-bento) .blog .entry-header {
	max-width: var(--measure);
}

/* =========================================================
   08. 본문 요소 — 목록 · 인용 · 표 · 코드
   ========================================================= */

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.5em;
	/* 들여쓰기는 padding 으로 줍니다. margin 으로 주면 아래
	   '사이드바 없음' 가운데 정렬(margin-inline:auto)과 부딪힙니다. */
	padding-left: 1.35em;
}

.entry-content li { margin-bottom: .55em; }

.entry-content ul li::marker { color: var(--c-accent); }
.entry-content ol li::marker { color: var(--c-accent); font-variant-numeric: tabular-nums; }

blockquote,
.wp-block-quote {
	position: relative;
	margin: var(--space) 0;
	padding: 1.6rem 1.9rem 1.6rem 2.6rem;
	border: 0;
	border-left: 2px solid var(--c-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--c-accent-tint);
	color: var(--c-ink);
	font-family: var(--font-display);
	font-size: 1.16rem;
	line-height: 1.6;
	letter-spacing: -.01em;
}

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

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: .9rem;
	font-family: var(--font-sans);
	font-size: .78rem;
	font-style: normal;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

.wp-block-pullquote {
	border: 0;
	border-top: 1px solid var(--c-line-strong);
	border-bottom: 1px solid var(--c-line-strong);
	padding: var(--space) 0;
	text-align: center;
}

table,
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--space) 0;
	font-size: .94rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}

th {
	background: var(--c-surface-alt);
	color: var(--c-ink);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	text-align: left;
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--c-line-strong);
}

td {
	padding: .9rem 1.1rem;
	border-bottom: 1px solid var(--c-line);
	font-variant-numeric: tabular-nums;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--c-accent-tint); }

/* 표는 좁은 화면에서 가로로만 밀립니다. 지면 전체는 밀리지 않습니다. */
.wp-block-table { overflow-x: auto; }

code, kbd, samp {
	font-family: var(--font-mono);
	font-size: .88em;
	background: var(--c-surface-alt);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-xs);
	padding: .12em .45em;
	color: var(--c-accent-soft);
}

pre,
.wp-block-code {
	background: var(--c-bg-deep);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 1.3rem 1.5rem;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: .88rem;
	line-height: 1.7;
	margin: var(--space) 0;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

/* =========================================================
   09. 버튼 · 배지 · 숏코드 부품
   ========================================================= */

.btn,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--font-sans);
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	padding: .95rem 1.7rem;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--c-accent);
	color: var(--c-on-accent);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
		background .3s var(--ease), color .3s var(--ease);
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-block-search__button:hover {
	background: var(--c-accent-soft);
	color: var(--c-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--c-accent) 75%, transparent);
}

.btn:active,
button:active { transform: translateY(0); }

/* 지나가는 빛 — 버튼 위를 한 번 훑고 사라집니다. */
.btn::after,
.wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-18deg);
	transition: left .6s var(--ease-out);
}

.btn:hover::after,
.wp-block-button__link:hover::after { left: 120%; }

/* 전체 너비 버튼 */
.btn-cta {
	width: 100%;
	padding: 1.15rem 1.7rem;
	font-size: .95rem;
}

/* 테두리만 있는 버튼 */
.btn-outline {
	background: transparent;
	color: var(--c-ink);
	border-color: var(--c-line-strong);
}

.btn-outline:hover {
	background: var(--c-accent-tint);
	color: var(--c-ink);
	border-color: var(--c-accent);
}

/* 화살표 텍스트 링크 */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	font-size: .92rem;
	color: var(--c-accent);
}

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

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

/* 배지 */
.lumen-badge {
	display: inline-block;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
	background: var(--c-accent-tint);
	border: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
	border-radius: var(--radius-pill);
	padding: .25rem .8rem;
}

/* 안내 상자 — [box] 숏코드 */
.box-note,
.box-tip,
.box-warn {
	position: relative;
	margin: var(--space) 0;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--c-line);
	border-left: 2px solid var(--c-accent);
	border-radius: var(--radius);
	background: var(--c-surface-alt);
	font-size: .96rem;
}

.box-note > strong,
.box-tip > strong,
.box-warn > strong {
	display: block;
	font-family: var(--font-sans);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-accent);
	margin-bottom: .6rem;
}

.box-tip { border-left-color: #62b6a0; }
.box-tip > strong { color: #62b6a0; }

.box-warn { border-left-color: #d98b6a; }
.box-warn > strong { color: #d98b6a; }

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

/* 핵심 수치 줄 — [stats] 숏코드 */
.lumen-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1px;
	margin: var(--space) 0;
	background: var(--c-line);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}

.lumen-stats > div {
	background: var(--c-surface);
	padding: 1.4rem 1.2rem;
	text-align: center;
}

.lumen-stats strong {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

.lumen-stats small {
	display: block;
	margin-top: .4rem;
	font-size: .74rem;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
}

/* 장식 구분선 — [ornament] 숏코드 */
.ornament {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: var(--space-lg) 0;
	color: var(--c-accent);
}

.ornament::before,
.ornament::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-line-strong), transparent);
}

.ornament span { font-size: .7rem; letter-spacing: var(--track-wide); }

/* 히어로 — [hero] 숏코드 */
.lumen-hero {
	position: relative;
	margin: 0 0 var(--space) 0;
	padding: clamp(2.5rem, 6vw, 5rem) var(--pad);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(40rem 22rem at 15% 0%, var(--c-accent-tint), transparent 65%),
		var(--c-surface);
	overflow: hidden;
	text-align: left;
}

.lumen-hero > .lumen-eyebrow { margin-bottom: 1rem; }

.lumen-hero h2 {
	font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem);
	margin-bottom: .5em;
	max-width: 22ch;
}

.lumen-hero p {
	max-width: 52ch;
	font-size: 1.05rem;
	color: var(--c-body);
}

.lumen-hero .btn { margin-top: 1rem; }

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

.widget-area .widget {
	background: var(--c-glass);
	backdrop-filter: blur(var(--blur)) saturate(1.2);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.6rem;
	font-size: .95rem;
}

.widget-area .widget-title,
.widget .widget-title {
	font-family: var(--font-sans);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--c-muted);
	padding-bottom: .9rem;
	margin-bottom: 1.1rem;
	border-bottom: 1px solid var(--c-line);
}

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

.widget li {
	padding: .55rem 0;
	border-bottom: 1px solid var(--c-line);
}

.widget li:last-child { border-bottom: 0; padding-bottom: 0; }

.widget a { color: var(--c-body); }
.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"],
input[type="date"],
select,
textarea {
	width: 100%;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	color: var(--c-ink);
	font-family: var(--font-sans);
	font-size: .95rem;
	padding: .85rem 1.1rem;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-tint);
	outline: none;
}

::placeholder { color: var(--c-muted); opacity: 1; }

label {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
	color: var(--c-muted);
	margin-bottom: .5rem;
}

.wp-block-search__inside-wrapper { gap: .5rem; }

/* =========================================================
   12. 댓글 · 페이지 이동
   ========================================================= */

.comments-title,
.comment-reply-title {
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
	margin-bottom: 1.4rem;
}

.comment-list { margin: 0; padding: 0; list-style: none; }

.comment-list .comment-body,
.comment-body {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	padding: 1.4rem 1.6rem;
	margin-bottom: 1.1rem;
}

.comment-author .fn { color: var(--c-ink); font-weight: 600; font-style: normal; }
.comment-metadata { font-size: .76rem; color: var(--c-muted); }
.comment-author img.avatar { border-radius: var(--radius-pill); }

.comment-reply-link {
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: var(--track);
	text-transform: uppercase;
}

.paging-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 .7rem;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	color: var(--c-body);
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
	transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}

.paging-navigation .page-numbers:hover {
	border-color: var(--c-accent);
	color: var(--c-ink);
}

.paging-navigation .page-numbers.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
	font-weight: 600;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a { color: var(--c-body); }

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover { color: var(--c-accent); }

/* =========================================================
   13. 푸터
   ========================================================= */

.site-footer {
	/* 위쪽 간격은 .site-content 의 --gap-bottom 이 이미 만듭니다.
	   여기서 또 띄우면 두 여백이 더해져 아래만 크게 벌어집니다. */
	margin-top: 0;
	border-top: 1px solid var(--c-line);
	background: linear-gradient(180deg, transparent, var(--c-bg-deep));
	color: var(--c-body);
}

.site-footer .footer-widgets {
	padding-top: var(--space-lg);
	padding-bottom: var(--space);
}

.site-footer .widget {
	background: none;
	border: 0;
	padding: 0;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.site-footer .widget-title {
	color: var(--c-muted);
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: .9rem;
}

.site-info {
	border-top: 1px solid var(--c-line);
	font-size: .8rem;
	letter-spacing: .03em;
	color: var(--c-muted);
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
}

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

/* 위로 가기 단추 */
.generate-back-to-top {
	background: var(--c-glass-strong);
	backdrop-filter: blur(var(--blur));
	-webkit-backdrop-filter: blur(var(--blur));
	border: 1px solid var(--c-line-strong);
	border-radius: var(--radius-pill);
	color: var(--c-ink);
	box-shadow: var(--shadow);
	transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-out);
}

.generate-back-to-top:hover,
.generate-back-to-top:focus {
	background: var(--c-accent);
	color: var(--c-on-accent);
	transform: translateY(-3px);
}

/* =========================================================
   14. 스크롤 진행바 · 등장 · 페이지 전환
   ========================================================= */

/* 읽은 만큼 채워지는 상단 띠. 스크롤 연동 애니메이션이라 JS 가 필요 없습니다. */
@supports (animation-timeline: scroll()) {
	body.lumen-progress::after {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		z-index: 9999;
		transform-origin: 0 50%;
		background: linear-gradient(90deg, var(--c-accent-deep), var(--c-accent), var(--c-accent-soft));
		animation: lumen-progress linear both;
		animation-timeline: scroll(root block);
	}

	@keyframes lumen-progress {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* 화면에 들어오는 만큼 떠오릅니다. 뷰 타임라인을 지원하는 브라우저용. */
	@supports (animation-timeline: view()) {
		body.lumen-anim .inside-article,
		body.lumen-anim .widget-area .widget,
		body.lumen-anim .lumen-hero {
			animation: lumen-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}

	@keyframes lumen-rise {
		from { opacity: 0; transform: translateY(26px) scale(.985); }
		to   { opacity: 1; transform: none; }
	}

	/* 위 기능이 없는 브라우저에서는 JS 가 body 에 lumen-js-reveal 을 붙입니다. */
	body.lumen-js-reveal .inside-article,
	body.lumen-js-reveal .widget-area .widget,
	body.lumen-js-reveal .lumen-hero {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
	}

	body.lumen-js-reveal .is-inview {
		opacity: 1;
		transform: none;
	}
}

/* 움직임을 줄이도록 설정한 사용자에게는 전부 끕니다. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* =========================================================
   15. 반응형 · 인쇄
   ========================================================= */

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

	.separate-containers .inside-article,
	.separate-containers .comments-area,
	.separate-containers .page-header {
		border-radius: var(--radius-lg);
	}

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

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

/* 화면이 아주 좁으면 유리 흐림을 끕니다 — 저사양 기기에서 스크롤이 무거워집니다. */
@media (max-width: 480px) {
	.separate-containers .inside-article,
	.widget-area .widget,
	.main-navigation {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background: var(--c-surface);
	}
}

@media print {
	body {
		background: #fff;
		color: #000;
	}

	body::before,
	body::after,
	.site-header,
	.main-navigation,
	.site-footer,
	.widget-area,
	.generate-back-to-top { display: none !important; }

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

/* =========================================================
   16. 블록 에디터 보정
   편집 화면에서도 같은 글꼴 · 같은 색으로 보이게 합니다.
   ========================================================= */

.editor-styles-wrapper {
	background: var(--c-bg);
	color: var(--c-body);
	font-family: var(--font-sans);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper .editor-post-title__input {
	font-family: var(--font-display);
	color: var(--c-ink);
}

.wp-block-group.has-background { border-radius: var(--radius-lg); }