/*
Theme Name: Clean Gallery
Theme URI: https://github.com/leejw1212/dashboard-songhee/tree/main/wordpress
Author: leejw1212
Author URI: https://github.com/leejw1212
Description: 개발 블로그를 위한 갤러리형 워드프레스 테마. 블록 편집기(theme.json), 위젯, 메뉴, 대표 이미지, 애드센스를 워드프레스 방식 그대로 지원합니다. 다크모드 · 자동 목차 · 코드 하이라이트 · 라이트박스 포함.
Version: 2.1.0
Requires at least: 6.1
Tested up to: 6.7
Requires PHP: 8.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: clean-gallery
Tags: blog, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, block-styles, wide-blocks, translation-ready, threaded-comments
*/

/* ==========================================================================
   1. 색 토큰
   밝은 팔레트는 theme.json 이 정의합니다(편집기와 공유). 여기서는 같은 변수를
   다크에서 다시 묶어 주기만 하면 블록 색까지 한 번에 따라옵니다.
   ========================================================================== */
:root {
	--cg-shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
	--cg-shadow:    0 2px 6px rgb(16 24 40 / 5%), 0 12px 28px rgb(16 24 40 / 6%);
	--cg-radius:    14px;
	--cg-radius-sm: 10px;
	--cg-header-h:  60px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--base:       #0f1116;
		--wp--preset--color--surface:    #171a21;
		--wp--preset--color--contrast:   #e7e9ee;
		--wp--preset--color--muted:      #a4adbb;
		--wp--preset--color--faint:      #78818f;
		--wp--preset--color--border:     #262b34;
		--wp--preset--color--accent:     #6f9bff;
		--wp--preset--color--accent-ink: #a8c3ff;
		--wp--preset--color--accent-sub: #1a2540;
		--cg-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
		--cg-shadow:    0 2px 6px rgb(0 0 0 / 35%), 0 12px 28px rgb(0 0 0 / 30%);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--wp--preset--color--base:       #0f1116;
	--wp--preset--color--surface:    #171a21;
	--wp--preset--color--contrast:   #e7e9ee;
	--wp--preset--color--muted:      #a4adbb;
	--wp--preset--color--faint:      #78818f;
	--wp--preset--color--border:     #262b34;
	--wp--preset--color--accent:     #6f9bff;
	--wp--preset--color--accent-ink: #a8c3ff;
	--wp--preset--color--accent-sub: #1a2540;
	--cg-shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
	--cg-shadow:    0 2px 6px rgb(0 0 0 / 35%), 0 12px 28px rgb(0 0 0 / 30%);
	color-scheme: dark;
}

/* ==========================================================================
   2. 기본
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cg-header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
a { color: var(--wp--preset--color--accent); }
a:where(:not(.wp-element-button)):hover { color: var(--wp--preset--color--accent-ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

hr { border: 0; border-top: 1px solid var(--wp--preset--color--border); margin: 2.5rem 0; }

/* ==========================================================================
   3. 접근성 · 관리바
   ========================================================================== */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus {
	position: fixed; inset-inline-start: 1rem; top: 1rem; z-index: 1000;
	width: auto; height: auto; clip-path: none; margin: 0;
	padding: .7rem 1.1rem; background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cg-radius-sm); box-shadow: var(--cg-shadow);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ==========================================================================
   4. 레이아웃
   ========================================================================== */
.site {
	display: flex; flex-direction: column; min-height: 100dvh;
}
.container {
	width: 100%;
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}
.site-main { flex: 1 0 auto; padding-block: 2.5rem 4rem; }

/* 본문 + 사이드바 */
.layout {
	display: grid;
	gap: 3rem;
	align-items: start;
}
/* 그리드 아이템의 자동 최소 크기는 min-content 라, 긴 제목 하나가 단을
   화면 밖으로 밀어낸다. 한 단으로 쌓이는 좁은 화면에서 특히 그렇다. */
.layout > * { min-width: 0; }
@media (min-width: 60rem) {
	.layout.has-sidebar {
		grid-template-columns: minmax(0, 1fr) 17rem;
	}
}

/* ==========================================================================
   5. 헤더 · 내비게이션
   ========================================================================== */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(1.6) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.site-header__inner {
	display: flex; align-items: center; gap: 1rem;
	min-height: var(--cg-header-h);
}

.site-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; margin-inline-end: auto; }
.site-brand:hover { color: inherit; }
.site-brand__logo img { display: block; width: auto; max-height: 34px; border-radius: 8px; }
.site-brand__mark {
	display: grid; place-items: center; width: 34px; height: 34px; flex: none;
	background: var(--wp--preset--color--accent-sub); color: var(--wp--preset--color--accent);
	border-radius: 10px; font-family: var(--wp--preset--font-family--mono);
	font-size: .8rem; font-weight: 700;
}
.site-brand__title { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; line-height: 1.2; }
.site-brand__desc  { display: block; font-size: .78rem; color: var(--wp--preset--color--faint); font-weight: 400; }

.site-nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
	display: block; padding: .45rem .7rem; border-radius: 8px;
	color: var(--wp--preset--color--muted); text-decoration: none;
	font-size: .9rem; font-weight: 500;
}
.site-nav a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a { color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent-sub); }

.header-actions { display: flex; align-items: center; gap: .35rem; }

.icon-btn {
	display: grid; place-items: center; width: 36px; height: 36px; flex: none;
	background: none; border: 1px solid transparent; border-radius: 9px;
	color: var(--wp--preset--color--muted); cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); }
.icon-btn svg { width: 19px; height: 19px; }

/* 다크 토글 — 현재 모드에 맞는 아이콘만 */
.theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* 모바일 */
.nav-toggle { display: none; }
@media (max-width: 47.99rem) {
	.nav-toggle { display: grid; }
	.site-nav {
		display: none; position: absolute; inset-inline: 0; top: 100%;
		background: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--preset--color--border);
		box-shadow: var(--cg-shadow);
		padding: .5rem 1.25rem 1rem;
	}
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav a { padding: .7rem .5rem; font-size: .95rem; }
	.site-brand__desc { display: none; }
}

/* ==========================================================================
   6. 검색 폼
   ========================================================================== */
.search-form { display: flex; gap: .5rem; }
.search-form__field {
	flex: 1; min-width: 0;
	padding: .6rem .9rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	color: inherit; font: inherit; font-size: .95rem;
}
.search-form__field:focus { border-color: var(--wp--preset--color--accent); outline: none; }
.search-form__submit {
	padding: .6rem 1.1rem; border: 0; border-radius: 999px;
	background: var(--wp--preset--color--accent); color: #fff;
	font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.search-form__submit:hover { background: var(--wp--preset--color--accent-ink); }

/* 히어로 검색 (홈) */
.hero { text-align: center; padding-block: 1rem 2.5rem; }
.hero__title { margin: 0 0 1.2rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.hero .search-form { max-width: 32rem; margin-inline: auto; }

/* 카테고리 칩 — PHP 가 렌더합니다 (JS 스크래핑 없음) */
.term-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.term-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .35rem .85rem; border-radius: 999px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	text-decoration: none; font-size: .85rem; font-weight: 500;
}
.term-chip:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent-sub); }
.term-chip.is-current { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.term-chip__count { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   7. 아카이브 머리말 · 브레드크럼
   ========================================================================== */
.breadcrumb { margin-bottom: .75rem; font-size: .82rem; color: var(--wp--preset--color--faint); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-inline-start: .4rem; opacity: .5; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--wp--preset--color--accent); }

.page-header { margin-bottom: 2rem; }
.page-header__title { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.page-header__meta { margin-top: .35rem; font-size: .85rem; color: var(--wp--preset--color--faint); }
.page-header__desc { margin-top: .75rem; color: var(--wp--preset--color--muted); font-size: .95rem; }

/* ==========================================================================
   8. 카드 목록
   ========================================================================== */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem;
}
.layout.has-sidebar .card-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.card {
	display: flex; flex-direction: column;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cg-radius);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--cg-shadow); border-color: transparent; }

.card__thumb {
	position: relative; display: block; aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface); overflow: hidden;
	text-decoration: none; color: inherit;
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__thumb--empty {
	display: grid; place-items: center;
	color: var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono); font-size: 1.5rem; font-weight: 700;
}

.card__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.15rem 1.25rem; flex: 1; }
.card__term {
	align-self: flex-start; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
	text-transform: uppercase; color: var(--wp--preset--color--accent); text-decoration: none;
}
.card__title { margin: 0; font-size: 1.02rem; font-weight: 700; line-height: 1.45; letter-spacing: -.01em; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--wp--preset--color--accent); }
.card__excerpt {
	margin: 0; font-size: .88rem; line-height: 1.65; color: var(--wp--preset--color--muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__meta {
	margin-top: auto; padding-top: .6rem;
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	font-size: .78rem; color: var(--wp--preset--color--faint);
}
.card__meta .sep { opacity: .5; }
.card--sticky .card__term::before { content: "📌 "; }

/* ==========================================================================
   9. 글 · 페이지
   ========================================================================== */
.entry { max-width: var(--wp--style--global--content-size); margin-inline: auto; }
.layout:not(.has-sidebar) .entry { }

.entry-header { margin-bottom: 2rem; }
.entry-header__term {
	display: inline-block; margin-bottom: .7rem;
	font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	color: var(--wp--preset--color--accent); text-decoration: none;
}
.entry-title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; }
.entry-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
	margin-top: .9rem; font-size: .85rem; color: var(--wp--preset--color--faint);
}
.entry-meta .sep { opacity: .5; }
.entry-meta a { color: inherit; text-decoration: none; }
.entry-meta a:hover { color: var(--wp--preset--color--accent); }

.entry-thumb { margin: 0 0 2rem; }
.entry-thumb img { width: 100%; border-radius: var(--cg-radius); display: block; }

.entry-content { font-size: 1.0625rem; line-height: 1.85; }
.entry-content > * { margin-block: 0 1.4em; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content h2 { margin-block: 2.2em .7em; padding-bottom: .3em; border-bottom: 1px solid var(--wp--preset--color--border); }
.entry-content h3 { margin-block: 1.8em .6em; }
.entry-content h4 { margin-block: 1.6em .5em; }
.entry-content ul, .entry-content ol { padding-inline-start: 1.4em; }
.entry-content li { margin-block: .35em; }
.entry-content li > ul, .entry-content li > ol { margin-block: .35em; }
.entry-content img { border-radius: var(--cg-radius-sm); }
.entry-content :where(h2, h3, h4) { scroll-margin-top: calc(var(--cg-header-h) + 1rem); }

.entry-content :not(pre) > code {
	padding: .15em .45em; border-radius: 5px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono); font-size: .88em;
	word-break: break-word;
}
.entry-content pre {
	overflow-x: auto; padding: 1.1rem 1.2rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cg-radius-sm);
	font-family: var(--wp--preset--font-family--mono); font-size: .9rem; line-height: 1.65;
	-moz-tab-size: 4; tab-size: 4;
}
.entry-content pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.entry-content table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.entry-content :where(th, td) { padding: .6rem .8rem; border: 1px solid var(--wp--preset--color--border); text-align: start; }
.entry-content th { background: var(--wp--preset--color--surface); font-weight: 700; }
.entry-content .wp-block-table { overflow-x: auto; }

/* 인용문 — theme.json 의 core/quote 스타일은 블록 마크업(.wp-block-quote)에만 걸린다.
   Claude Log 플러그인처럼 마크다운을 순수 HTML 로 바꿔 넣는 경우 <blockquote> 가
   그대로 들어오므로, 요소 자체에도 같은 모양을 준다. */
.entry-content blockquote {
	margin-inline: 0;
	padding: .2em 0 .2em 1.25rem;
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--muted);
	font-style: normal;
}
.entry-content blockquote > :last-child { margin-bottom: 0; }
.entry-content blockquote cite {
	display: block; margin-top: .6em;
	font-size: .88em; font-style: normal; color: var(--wp--preset--color--faint);
}

/* 콜아웃 — 마크다운의 > [!NOTE] 를 서버에서 이 구조로 바꿔 넣는다.
   JS 가 없어도 완성된 모양으로 보인다. */
.entry-content blockquote.callout {
	padding: 1rem 1.2rem; border-inline-start-width: 4px;
	background: var(--wp--preset--color--surface);
	border-radius: 0 var(--cg-radius-sm) var(--cg-radius-sm) 0;
	color: var(--wp--preset--color--contrast);
}
.entry-content .callout__head {
	margin: 0 0 .4em; font-weight: 700; font-size: .92em;
	display: flex; align-items: center; gap: .4em;
}
.entry-content .callout--note      { border-color: #3b82f6; }
.entry-content .callout--note      .callout__head { color: #3b82f6; }
.entry-content .callout--tip       { border-color: #16a34a; }
.entry-content .callout--tip       .callout__head { color: #16a34a; }
.entry-content .callout--important { border-color: #8b5cf6; }
.entry-content .callout--important .callout__head { color: #8b5cf6; }
.entry-content .callout--warning   { border-color: #f59e0b; }
.entry-content .callout--warning   .callout__head { color: #d97706; }
.entry-content :is(.callout--caution, .callout--danger) { border-color: #dc2626; }
.entry-content :is(.callout--caution, .callout--danger) .callout__head { color: #dc2626; }

/* 작업 화면 사진. 스크린샷은 테두리가 있어야 배경과 구분된다. */
.entry-content figure { margin: 2rem 0; }
.entry-content figure img {
	/* max-width 라야 작은 그림이 억지로 늘어나 흐려지지 않는다. */
	display: block; max-width: 100%; height: auto; margin-inline: auto;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}
.entry-content figcaption {
	margin-top: .6rem; text-align: center;
	font-size: .84rem; line-height: 1.5; color: var(--wp--preset--color--faint);
}
.entry-content del { color: var(--wp--preset--color--faint); }
.entry-content mark { background: var(--wp--preset--color--accent-sub); color: inherit; padding: 0 .2em; border-radius: 3px; }

/* 제목 앵커 */
.entry-content .heading-anchor {
	margin-inline-start: .4em; opacity: 0; text-decoration: none;
	color: var(--wp--preset--color--faint); font-weight: 400;
}
.entry-content :where(h2, h3):hover .heading-anchor { opacity: 1; }

/* 코드 복사 */
.code-wrap { position: relative; }
.code-copy {
	position: absolute; inset-block-start: .55rem; inset-inline-end: .55rem;
	padding: .3rem .6rem; border-radius: 7px;
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted); font-size: .74rem; font-weight: 600;
	cursor: pointer; opacity: 0; transition: opacity .15s;
}
.code-wrap:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy.is-done { color: #16a34a; border-color: currentColor; }

/* 읽기 진행률 */
.reading-bar {
	position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 200;
	background: var(--wp--preset--color--accent); transform-origin: 0 50%;
	transform: scaleX(0); pointer-events: none;
}

/* 목차 */
.toc {
	margin-bottom: 2rem; padding: 1rem 1.2rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cg-radius-sm);
	font-size: .9rem;
}
.toc__title { font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--faint); }
.toc ol { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.toc li[data-level="3"] { padding-inline-start: 1rem; }
.toc a { color: var(--wp--preset--color--muted); text-decoration: none; }
.toc a:hover, .toc a.is-active { color: var(--wp--preset--color--accent); }

/* 태그 · 공유 */
.entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.5rem; }
.entry-tags a {
	padding: .3rem .75rem; border-radius: 999px; font-size: .82rem; text-decoration: none;
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}
.entry-tags a:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

.entry-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.entry-share__label { font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--wp--preset--color--faint); }
.share-btn {
	padding: .35rem .8rem; border-radius: 999px; cursor: pointer;
	background: none; border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted); font: inherit; font-size: .82rem;
}
.share-btn:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.share-btn.is-done { color: #16a34a; border-color: currentColor; }

/* 이전/다음 */
.post-nav { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 40rem) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav__item {
	padding: 1rem 1.1rem; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cg-radius-sm); text-decoration: none; color: inherit;
	display: grid; gap: .3rem;
}
.post-nav__item:hover { border-color: var(--wp--preset--color--accent); color: inherit; }
.post-nav__item--next { text-align: end; grid-column: 2; }
.post-nav__label { font-size: .76rem; color: var(--wp--preset--color--faint); }
.post-nav__title { font-size: .93rem; font-weight: 600; line-height: 1.5; }

/* 관련 글 */
.related { margin-top: 3.5rem; }
.related__title { margin: 0 0 1.2rem; font-size: 1.1rem; font-weight: 700; }
.related__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.related__link { text-decoration: none; color: inherit; display: grid; gap: .5rem; }
.related__thumb { aspect-ratio: 16/9; border-radius: var(--cg-radius-sm); overflow: hidden; background: var(--wp--preset--color--surface); }
.related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.related__t { font-size: .9rem; font-weight: 600; line-height: 1.5; }
.related__link:hover .related__t { color: var(--wp--preset--color--accent); }
.related__d { font-size: .76rem; color: var(--wp--preset--color--faint); }

/* ==========================================================================
   10. 댓글
   ========================================================================== */
.comments { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--wp--preset--color--border); }
.comments__title { margin: 0 0 1.5rem; font-size: 1.1rem; font-weight: 700; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.comment-list .children { list-style: none; margin: 1.25rem 0 0 2.75rem; padding: 0; display: grid; gap: 1.25rem; }
.comment-item { display: flex; gap: .85rem; }
.comment-item__avatar { border-radius: 50%; flex: none; }
.comment-item__body { flex: 1; min-width: 0; }
.comment-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.comment-item__name { font-weight: 600; font-size: .92rem; }
.comment-item__name a { color: inherit; text-decoration: none; }
.comment-item__date { font-size: .78rem; color: var(--wp--preset--color--faint); }
.comment-item__text { font-size: .93rem; line-height: 1.7; }
.comment-item__text > :first-child { margin-top: .35rem; }
.comment-item__actions { display: flex; gap: .75rem; font-size: .78rem; }
.comment-item__actions a { color: var(--wp--preset--color--faint); text-decoration: none; }
.comment-item__actions a:hover { color: var(--wp--preset--color--accent); }
.comment-item--pending .comment-item__text::after { content: " (승인 대기 중)"; color: var(--wp--preset--color--faint); font-size: .85em; }

.comment-respond { margin-top: 2rem; }
.comment-reply-title { font-size: 1rem; font-weight: 700; margin: 0 0 .9rem; }
.comment-reply-title small { font-weight: 400; font-size: .82rem; margin-inline-start: .5rem; }
.comment-form { display: grid; gap: .75rem; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] {
	width: 100%; padding: .7rem .9rem;
	background: var(--wp--preset--color--base); color: inherit;
	border: 1px solid var(--wp--preset--color--border); border-radius: var(--cg-radius-sm);
	font: inherit; font-size: .93rem;
}
.comment-form textarea { min-height: 8rem; resize: vertical; }
.comment-form :where(input, textarea):focus { border-color: var(--wp--preset--color--accent); outline: none; }
.comment-form__identity { display: grid; gap: .75rem; }
@media (min-width: 34rem) { .comment-form__identity { grid-template-columns: 1fr 1fr; } }
.comment-form .form-submit { margin: 0; }
.comment-form .submit {
	padding: .65rem 1.5rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--accent); color: #fff; font: inherit; font-weight: 600;
}
.comment-form .submit:hover { background: var(--wp--preset--color--accent-ink); }
.comment-notes, .comment-form-cookies-consent, .logged-in-as { font-size: .82rem; color: var(--wp--preset--color--faint); margin: 0; }
.comment-form-cookies-consent { display: flex; align-items: center; gap: .5rem; }
.comments .required { color: #dc2626; }

/* ==========================================================================
   11. 페이지네이션
   ========================================================================== */
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.pagination .page-numbers {
	display: grid; place-items: center; min-width: 2.35rem; height: 2.35rem; padding-inline: .75rem;
	border: 1px solid var(--wp--preset--color--border); border-radius: 999px;
	color: var(--wp--preset--color--muted); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.pagination .page-numbers:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.pagination .page-numbers.current { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }

.post-page-links { display: flex; gap: .5rem; align-items: center; margin-top: 2rem; font-size: .88rem; }
.post-page-links a, .post-page-links > span {
	padding: .25rem .7rem; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; text-decoration: none;
}

/* ==========================================================================
   12. 사이드바 · 위젯
   ========================================================================== */
.sidebar { display: grid; gap: 1.75rem; align-content: start; position: sticky; top: calc(var(--cg-header-h) + 1.5rem); }
@media (max-width: 59.99rem) { .sidebar { position: static; } }
.widget { font-size: .92rem; }
.widget-title { margin: 0 0 .75rem; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--wp--preset--color--faint); }
.widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.widget li { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.widget li a { min-width: 0; overflow-wrap: anywhere; color: var(--wp--preset--color--muted); text-decoration: none; }
.widget li a:hover { color: var(--wp--preset--color--accent); }
/* 카테고리 글 수. 이름과 떨어뜨려 오른쪽에 붙인다. */
.widget-count {
	margin-left: auto; flex: none;
	font-size: .72rem; font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--faint);
}
.widget li.is-current > a { color: var(--wp--preset--color--accent); font-weight: 600; }
/* 최근 글은 제목이 길다. 두 줄까지만 보이고 그 뒤는 줄인다. */
.widget_recent_entries li a {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; line-height: 1.45;
}
.widget .wp-block-tag-cloud a, .widget .tagcloud a {
	display: inline-block; margin: 0 .3rem .4rem 0; padding: .22rem .65rem;
	border: 1px solid var(--wp--preset--color--border); border-radius: 999px;
	font-size: .8rem !important; text-decoration: none; color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   13. 광고 (애드센스)
   ========================================================================== */
.ad-slot { margin-block: 2rem; text-align: center; }
.ad-slot--in-feed { grid-column: 1 / -1; }
.ad-slot__label {
	display: block; margin-bottom: .4rem;
	font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}
.ad-slot ins { display: block; }
/* 광고가 비어 있을 때 빈 공간이 남지 않도록 */
.ad-slot ins[data-ad-status="unfilled"] { display: none !important; }

/* ==========================================================================
   14. 푸터
   ========================================================================== */
.site-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: 2rem;
	font-size: .85rem; color: var(--wp--preset--color--faint);
}
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.site-footer a { color: inherit; }
.site-footer__widgets { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 2rem; }

/* 맨 위로 */
.to-top {
	position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 90;
	width: 40px; height: 40px; display: grid; place-items: center;
	background: var(--wp--preset--color--base); color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--border); border-radius: 50%;
	box-shadow: var(--cg-shadow-sm); cursor: pointer;
}
.to-top[hidden] { display: none; }
.to-top:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* ==========================================================================
   15. 라이트박스
   ========================================================================== */
.lightbox {
	position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
	background: rgb(0 0 0 / 82%); padding: 2rem; cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 90dvh; border-radius: 8px; }
.entry-content img:not(.no-zoom) { cursor: zoom-in; }

/* ==========================================================================
   16. 상태 · 알림
   ========================================================================== */
.notice-box {
	padding: 1.25rem 1.4rem; border-radius: var(--cg-radius-sm);
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
}
.post-password-form { display: grid; gap: .75rem; max-width: 26rem; }
.post-password-form input[type="password"] {
	padding: .7rem .9rem; border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--cg-radius-sm); background: var(--wp--preset--color--base); color: inherit; font: inherit;
}

/* Claude 로그 메타 칩 */
.claude-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.claude-meta__chip {
	display: inline-flex; align-items: center; gap: .35rem;
	padding: .28rem .7rem; border-radius: 999px;
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono); font-size: .74rem; text-decoration: none;
}
.claude-meta__chip:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.claude-meta__chip--brand { background: var(--wp--preset--color--accent-sub); border-color: transparent; color: var(--wp--preset--color--accent-ink); }