/*
 * 한글 본문·제목은 Noto Sans KR 한 서체로 맞춘다.
 * 폰트 CSS 는 @import 가 아니라 inc/v0-fonts.php 가 <link> 로 먼저 불러온다
 * (@import 는 이 파일을 다 받은 뒤에야 폰트를 요청해 첫 화면과 레이아웃 안정성이 나빠진다).
 */

/**
 * v0-design → 워드프레스 순수 CSS
 *
 * 출처: v0-design/app/globals.css, page.tsx, layout.tsx, components/ui/button.tsx
 * Tailwind(@import, @apply, @theme)는 블록 에디터에서 해석되지 않으므로
 * 같은 시각 값을 CSS 변수와 클래스 규칙으로 옮겼다.
 *
 * 본문 카드 레이아웃은 .site-shell / .v0-query-grid 안에만 적용한다.
 * GeneratePress 순정 헤더(#masthead) · 푸터(div.site-footer) 스타일은
 * 파일 하단 "GP 순정 헤더/푸터" 섹션에서 따로 입힌다.
 */

/* -------------------------------------------------------------------------
 * 디자인 토큰
 * 페이지에 실제로 쓰인 hex를 기준으로 두고, shadcn oklch는 hex로 근사한다.
 * ------------------------------------------------------------------------- */
:root {
	/* 캔버스·텍스트 */
	--v0-color-page: #f1f2f5;
	--v0-color-surface: #ffffff;
	--v0-color-ink: #191919;
	--v0-color-ink-strong: #111111;
	--v0-color-ink-nav: #151515;
	--v0-color-muted: #777777;
	--v0-color-muted-2: #888888;
	--v0-color-muted-3: #999999;
	--v0-color-accent: #1684c5;
	--v0-color-button: #147ee0;
	--v0-color-border: #dfe1e5;
	--v0-color-border-hero: #e0e2e5;
	--v0-color-border-card: #d7d9dd;
	--v0-color-footer-1: #141d63;
	--v0-color-footer-2: #3911bd;
	--v0-color-footer-3: #d719ca;
	--v0-color-on-footer: #ffffff;

	/* shadcn/neutral (button.tsx 변환용, oklch → hex) */
	--v0-background: #ffffff;
	--v0-foreground: #171717;
	--v0-card: #ffffff;
	--v0-card-foreground: #171717;
	--v0-primary: #2e2e2e;
	--v0-primary-foreground: #fafafa;
	--v0-secondary: #f5f5f5;
	--v0-secondary-foreground: #2e2e2e;
	--v0-muted: #f5f5f5;
	--v0-muted-foreground: #737373;
	--v0-accent: #f5f5f5;
	--v0-accent-foreground: #2e2e2e;
	--v0-destructive: #dc3c3c;
	--v0-border-ui: #e5e5e5;
	--v0-input: #e5e5e5;
	--v0-ring: #a3a3a3;

	/* 본문·제목·발췌를 Noto Sans KR 하나로 통일한다. 기존 Arial/Georgia 참조도 이 변수를 탄다. */
	--v0-font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--v0-font-serif: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* 본문 폭 1080px, 카드 라운드 6px가 레이아웃 기준점 */
	--v0-content-width: 1080px;
	--v0-space-xs: 8px;
	--v0-space-sm: 16px;
	--v0-space-md: 20px;
	--v0-space-lg: 28px;
	--v0-space-xl: 34px;
	--v0-radius-sm: 4px;
	--v0-radius-md: 5px;
	--v0-radius-lg: 6px;
	--v0-radius-ui: 0.625rem;
	--v0-radius-ui-sm: calc(var(--v0-radius-ui) * 0.6);
	--v0-radius-ui-md: calc(var(--v0-radius-ui) * 0.8);

	/* 평소엔 그림자 없음. 카드 hover만 살짝 띄운다. */
	--v0-shadow-none: none;
	--v0-shadow-card: 0 9px 22px rgb(0 0 0 / 9%);
	--v0-ring-focus: 0 0 0 3px color-mix(in srgb, var(--v0-ring) 50%, transparent);
}

/*
 * 사이트 전체 글자를 Noto Sans KR 로 고정한다.
 * GeneratePress·카드 CSS 가 Arial/Georgia 를 나중에 적어도 !important 가 이긴다.
 * :where() 는 특이도를 0 으로 둬서, 색·크기 규칙은 그대로 두고 서체만 바꾼다.
 */
body,
.editor-styles-wrapper,
:where(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	a,
	span,
	li,
	button,
	input,
	textarea,
	label,
	figcaption,
	time,
	.wp-block-post-title,
	.wp-block-post-excerpt,
	.wp-block-post-terms,
	.wp-block-button__link,
	.v0-button,
	.site-header,
	.main-navigation,
	.site-footer,
	.site-info,
	.v0-footer-title,
	.v0-footer-desc,
	.v0-footer-heading
) {
	font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 카드 제목은 굵게, 요약은 보통, 카테고리는 중간 굵기로 구분한다. */
.wp-block-post-title,
.wp-block-post-title a {
	font-weight: 700 !important;
}

.wp-block-post-excerpt,
.wp-block-post-excerpt__excerpt,
.post-excerpt {
	font-weight: 400 !important;
}

.wp-block-post-terms,
.wp-block-post-terms a,
.post-tags,
.post-tags a {
	font-weight: 500 !important;
}

/* -------------------------------------------------------------------------
 * 문서 기본
 * 사이트 전체 body를 바꾸면 GeneratePress 레이아웃이 무너지므로,
 * v0 셸이 있을 때와 블록 에디터 캔버스에만 페이지 색을 준다.
 * ------------------------------------------------------------------------- */
body:has(.site-shell) {
	background: var(--v0-color-page);
	color: var(--v0-color-ink);
	font-family: var(--v0-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.editor-styles-wrapper {
	background: var(--v0-color-page);
	color: var(--v0-color-ink);
	font-family: var(--v0-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.antialiased {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.site-shell .post-card,
	.editor-styles-wrapper .post-card {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 셸: 에디터에 붙여 넣은 HTML과 프론트 마크업이 같은 클래스명을 쓴다.
 * ------------------------------------------------------------------------- */
.site-shell {
	min-height: 100vh;
	background: var(--v0-color-page);
	color: var(--v0-color-ink);
	font-family: var(--v0-font-sans);
}

.site-shell .site-header,
.editor-styles-wrapper .site-header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	gap: var(--v0-space-xl);
	padding: 0 var(--v0-space-lg);
	background: var(--v0-color-surface);
	border-bottom: 1px solid var(--v0-color-border);
}

.site-shell .brand,
.editor-styles-wrapper .brand {
	color: var(--v0-color-ink-strong);
	font-family: var(--v0-font-serif);
	font-size: 22px;
	font-style: italic;
	font-weight: 800;
	white-space: nowrap;
	text-decoration: none;
}

.site-shell .site-header nav,
.editor-styles-wrapper .site-header nav {
	display: flex;
	align-items: center;
	gap: 25px;
}

.site-shell .site-header nav a,
.editor-styles-wrapper .site-header nav a {
	color: var(--v0-color-ink-nav);
	font-size: 10px;
	text-decoration: none;
	white-space: nowrap;
}

.site-shell .site-header nav a:hover,
.site-shell .site-footer a:hover,
.editor-styles-wrapper .site-header nav a:hover,
.editor-styles-wrapper .site-footer a:hover {
	color: var(--v0-color-accent);
}

.site-shell .content-wrap,
.editor-styles-wrapper .content-wrap {
	max-width: var(--v0-content-width);
	margin: 0 auto;
	padding: var(--v0-space-sm) 0 66px;
}

/* -------------------------------------------------------------------------
 * 히어로
 * ------------------------------------------------------------------------- */
.site-shell .hero-card,
.editor-styles-wrapper .hero-card {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	min-height: 382px;
	overflow: hidden;
	background: var(--v0-color-surface);
	border: 1px solid var(--v0-color-border-hero);
	border-radius: var(--v0-radius-lg);
	box-shadow: var(--v0-shadow-none);
}

.site-shell .hero-card > img,
.editor-styles-wrapper .hero-card > img {
	width: 100%;
	height: 100%;
	min-height: 382px;
	object-fit: cover;
}

.site-shell .hero-copy,
.editor-styles-wrapper .hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 54px;
}

.site-shell .hero-copy h1,
.editor-styles-wrapper .hero-copy h1 {
	max-width: 430px;
	margin: 0 0 18px;
	font-size: 27px;
	font-weight: 800;
	line-height: 1.28;
}

.site-shell .hero-copy p,
.editor-styles-wrapper .hero-copy p {
	max-width: 410px;
	margin: 0;
	color: var(--v0-color-muted);
	font-family: var(--v0-font-serif);
	font-size: 12px;
	line-height: 1.65;
}

.site-shell .hero-meta,
.editor-styles-wrapper .hero-meta {
	display: flex;
	justify-content: space-between;
	margin-top: 32px;
	color: var(--v0-color-muted);
	font-size: 9px;
}

/* -------------------------------------------------------------------------
 * 섹션 / 최신글
 * ------------------------------------------------------------------------- */
.site-shell .latest-section,
.site-shell .all-section,
.editor-styles-wrapper .latest-section,
.editor-styles-wrapper .all-section {
	margin-top: 25px;
}

.site-shell .section-heading,
.editor-styles-wrapper .section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 10px;
}

.site-shell .section-heading h2,
.editor-styles-wrapper .section-heading h2 {
	margin: 0;
	font-size: 13px;
}

.site-shell .section-heading a,
.editor-styles-wrapper .section-heading a {
	color: var(--v0-color-muted-3);
	font-size: 9px;
	text-decoration: none;
}

.site-shell .latest-panel,
.editor-styles-wrapper .latest-panel {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--v0-space-md);
	padding: 19px;
	background: var(--v0-color-surface);
	border: 1px solid var(--v0-color-border);
	border-radius: var(--v0-radius-lg);
	box-shadow: var(--v0-shadow-none);
}

.site-shell .latest-feature img,
.editor-styles-wrapper .latest-feature img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: var(--v0-radius-md);
}

.site-shell .latest-feature p,
.site-shell .mini-post p,
.editor-styles-wrapper .latest-feature p,
.editor-styles-wrapper .mini-post p {
	margin: 5px 0;
	color: var(--v0-color-muted-3);
	font-family: var(--v0-font-serif);
	font-size: 8px;
}

.site-shell .latest-feature h3,
.site-shell .mini-post h3,
.editor-styles-wrapper .latest-feature h3,
.editor-styles-wrapper .mini-post h3 {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
}

.site-shell .mini-post img,
.editor-styles-wrapper .mini-post img {
	width: 100%;
	height: 113px;
	object-fit: cover;
	border-radius: var(--v0-radius-md);
}

.site-shell .latest-mini-row,
.editor-styles-wrapper .latest-mini-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column: 1 / -1;
	gap: var(--v0-space-md);
}

.site-shell .latest-mini-row .mini-post img,
.editor-styles-wrapper .latest-mini-row .mini-post img {
	height: 123px;
}

/* -------------------------------------------------------------------------
 * 글 카드 그리드
 * ------------------------------------------------------------------------- */
.site-shell .posts-grid,
.editor-styles-wrapper .posts-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 24px;
}

.site-shell .post-card,
.editor-styles-wrapper .post-card {
	display: flex;
	flex-direction: column;
	min-height: 389px;
	overflow: hidden;
	background: var(--v0-color-surface);
	border: 1px solid var(--v0-color-border-card);
	border-radius: var(--v0-radius-lg);
	box-shadow: var(--v0-shadow-none);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-shell .post-card:hover,
.editor-styles-wrapper .post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--v0-shadow-card);
}

.site-shell .post-image,
.editor-styles-wrapper .post-image {
	flex: none;
	width: 100%;
	height: 170px;
	object-fit: cover;
}

.site-shell .post-body,
.editor-styles-wrapper .post-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px 17px 13px;
}

.site-shell .post-tags,
.editor-styles-wrapper .post-tags {
	margin: 0 0 9px;
	color: var(--v0-color-accent);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0.3px;
}

.site-shell .post-card h3,
.editor-styles-wrapper .post-card h3 {
	margin: 0;
	font-size: 17px;
	line-height: 1.15;
}

.site-shell .post-excerpt,
.editor-styles-wrapper .post-excerpt {
	margin: 13px 0 0;
	color: var(--v0-color-muted);
	font-family: var(--v0-font-serif);
	font-size: 9px;
	line-height: 1.6;
}

.site-shell .post-meta,
.editor-styles-wrapper .post-meta {
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 17px;
	color: var(--v0-color-muted-2);
	font-family: var(--v0-font-serif);
	font-size: 8px;
}

.site-shell .load-more,
.editor-styles-wrapper .load-more {
	display: block;
	margin: 29px auto 0;
	padding: 8px 22px;
	color: var(--v0-color-on-footer);
	font-size: 9px;
	background: var(--v0-color-button);
	border: 0;
	border-radius: var(--v0-radius-sm);
	cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 푸터 (그라데이션 세 색)
 * ------------------------------------------------------------------------- */
.site-shell .site-footer,
.editor-styles-wrapper .site-footer {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 95px;
	min-height: 190px;
	padding: 34px max(52px, calc((100vw - var(--v0-content-width)) / 2));
	color: var(--v0-color-on-footer);
	background: linear-gradient(125deg, var(--v0-color-footer-1) 0%, var(--v0-color-footer-2) 44%, var(--v0-color-footer-3) 100%);
}

.site-shell .site-footer h2,
.editor-styles-wrapper .site-footer h2 {
	margin: 0 0 14px;
	font-family: var(--v0-font-serif);
	font-size: 16px;
	font-style: italic;
}

.site-shell .site-footer h3,
.editor-styles-wrapper .site-footer h3 {
	margin: 0 0 10px;
	font-size: 10px;
	font-weight: 500;
}

.site-shell .site-footer p,
.site-shell .site-footer a,
.editor-styles-wrapper .site-footer p,
.editor-styles-wrapper .site-footer a {
	display: block;
	max-width: 300px;
	margin: 0 0 7px;
	color: var(--v0-color-on-footer);
	font-family: var(--v0-font-serif);
	font-size: 9px;
	line-height: 1.55;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * shadcn Button (Tailwind cva → 순수 클래스)
 * 페이지 본문에는 안 쓰였지만, 에디터 버튼이 Tailwind 없이도 보이게 둔다.
 * ------------------------------------------------------------------------- */
.v0-button {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	height: 32px;
	padding: 0 10px;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	background-clip: padding-box;
	border: 1px solid transparent;
	border-radius: var(--v0-radius-ui);
	outline: none;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.v0-button:focus-visible {
	border-color: var(--v0-ring);
	box-shadow: var(--v0-ring-focus);
}

.v0-button:disabled {
	pointer-events: none;
	opacity: 0.5;
}

.v0-button:active:not([aria-haspopup]) {
	transform: translateY(1px);
}

.v0-button svg {
	pointer-events: none;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.v0-button--default {
	color: var(--v0-primary-foreground);
	background: var(--v0-primary);
}

.v0-button--default:hover {
	background: color-mix(in srgb, var(--v0-primary) 80%, transparent);
}

.v0-button--outline {
	color: var(--v0-foreground);
	background: var(--v0-background);
	border-color: var(--v0-border-ui);
}

.v0-button--outline:hover {
	background: var(--v0-muted);
}

.v0-button--secondary {
	color: var(--v0-secondary-foreground);
	background: var(--v0-secondary);
}

.v0-button--secondary:hover {
	background: color-mix(in srgb, var(--v0-secondary) 80%, transparent);
}

.v0-button--ghost {
	color: var(--v0-foreground);
	background: transparent;
}

.v0-button--ghost:hover {
	background: var(--v0-muted);
}

.v0-button--destructive {
	color: var(--v0-destructive);
	background: color-mix(in srgb, var(--v0-destructive) 10%, transparent);
}

.v0-button--destructive:hover {
	background: color-mix(in srgb, var(--v0-destructive) 20%, transparent);
}

.v0-button--link {
	height: auto;
	padding: 0;
	color: var(--v0-primary);
	background: transparent;
	text-underline-offset: 4px;
}

.v0-button--link:hover {
	text-decoration: underline;
}

.v0-button--xs {
	height: 24px;
	padding: 0 8px;
	font-size: 12px;
	border-radius: min(var(--v0-radius-ui-md), 10px);
}

.v0-button--sm {
	height: 28px;
	padding: 0 10px;
	font-size: 0.8rem;
	border-radius: min(var(--v0-radius-ui-md), 12px);
}

.v0-button--lg {
	height: 36px;
	padding: 0 10px;
}

.v0-button--icon {
	width: 32px;
	padding: 0;
}

.v0-button--icon-xs {
	width: 24px;
	height: 24px;
	padding: 0;
	border-radius: min(var(--v0-radius-ui-md), 10px);
}

.v0-button--icon-sm {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: min(var(--v0-radius-ui-md), 12px);
}

.v0-button--icon-lg {
	width: 36px;
	height: 36px;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * 반응형: 원본 800px / 540px
 * ------------------------------------------------------------------------- */
@media (max-width: 800px) {
	.site-shell .site-header,
	.editor-styles-wrapper .site-header {
		flex-wrap: wrap;
		height: auto;
		gap: 10px 18px;
		padding: 12px var(--v0-space-sm);
	}

	.site-shell .site-header nav,
	.editor-styles-wrapper .site-header nav {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 13px;
	}

	.site-shell .content-wrap,
	.editor-styles-wrapper .content-wrap {
		padding: 14px var(--v0-space-sm) 50px;
	}

	.site-shell .hero-card,
	.editor-styles-wrapper .hero-card {
		grid-template-columns: 1fr;
	}

	.site-shell .hero-card > img,
	.editor-styles-wrapper .hero-card > img {
		height: 250px;
		min-height: 250px;
	}

	.site-shell .hero-copy,
	.editor-styles-wrapper .hero-copy {
		padding: 25px;
	}

	.site-shell .hero-copy h1,
	.editor-styles-wrapper .hero-copy h1 {
		font-size: 22px;
	}

	.site-shell .latest-panel,
	.editor-styles-wrapper .latest-panel {
		grid-template-columns: 1fr;
	}

	.site-shell .latest-mini-row,
	.editor-styles-wrapper .latest-mini-row {
		grid-column: auto;
		grid-template-columns: 1fr 1fr;
	}

	.site-shell .posts-grid,
	.editor-styles-wrapper .posts-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-shell .site-footer,
	.editor-styles-wrapper .site-footer {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		padding: 30px 24px;
	}
}

@media (max-width: 540px) {
	.site-shell .brand,
	.editor-styles-wrapper .brand {
		font-size: 20px;
	}

	.site-shell .latest-mini-row,
	.site-shell .posts-grid,
	.editor-styles-wrapper .latest-mini-row,
	.editor-styles-wrapper .posts-grid {
		grid-template-columns: 1fr;
	}

	.site-shell .latest-mini-row .mini-post img,
	.editor-styles-wrapper .latest-mini-row .mini-post img {
		height: 180px;
	}

	.site-shell .post-image,
	.editor-styles-wrapper .post-image {
		height: 190px;
	}

	.site-shell .site-footer,
	.editor-styles-wrapper .site-footer {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Gutenberg 블록 래퍼
 * core/image는 img를 figure로 감싸므로, React의 직계 img 선택자를 보완한다.
 * 글 본문(.entry-content)에 패턴을 넣어도 같은 레이아웃이 보이게 한다.
 * ------------------------------------------------------------------------- */
.entry-content .site-shell,
.entry-content .site-header,
.entry-content .hero-card,
.entry-content .latest-section,
.entry-content .all-section,
.entry-content .site-footer {
	max-width: none;
}

.site-shell .wp-block-heading,
.editor-styles-wrapper .wp-block-heading,
.entry-content .wp-block-heading {
	margin-top: 0;
}

.site-shell .site-header p,
.editor-styles-wrapper .site-header p,
.entry-content .site-header p,
.site-shell .hero-meta p,
.editor-styles-wrapper .hero-meta p,
.entry-content .hero-meta p,
.site-shell .post-meta p,
.editor-styles-wrapper .post-meta p,
.entry-content .post-meta p,
.site-shell .section-heading p,
.editor-styles-wrapper .section-heading p,
.entry-content .section-heading p {
	margin: 0;
}

.site-shell .hero-card > .wp-block-image,
.editor-styles-wrapper .hero-card > .wp-block-image,
.entry-content .hero-card > .wp-block-image {
	margin: 0;
	height: 100%;
}

.site-shell .hero-card > .wp-block-image img,
.editor-styles-wrapper .hero-card > .wp-block-image img,
.entry-content .hero-card > .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 382px;
	object-fit: cover;
}

.site-shell .latest-feature .wp-block-image,
.editor-styles-wrapper .latest-feature .wp-block-image,
.entry-content .latest-feature .wp-block-image,
.site-shell .mini-post .wp-block-image,
.editor-styles-wrapper .mini-post .wp-block-image,
.entry-content .mini-post .wp-block-image,
.site-shell .post-card .wp-block-image,
.editor-styles-wrapper .post-card .wp-block-image,
.entry-content .post-card .wp-block-image {
	margin: 0;
	width: 100%;
}

.site-shell .latest-feature .wp-block-image img,
.editor-styles-wrapper .latest-feature .wp-block-image img,
.entry-content .latest-feature .wp-block-image img {
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: var(--v0-radius-md);
}

.site-shell .mini-post .wp-block-image img,
.editor-styles-wrapper .mini-post .wp-block-image img,
.entry-content .mini-post .wp-block-image img {
	width: 100%;
	height: 113px;
	object-fit: cover;
	border-radius: var(--v0-radius-md);
}

.site-shell .latest-mini-row .mini-post .wp-block-image img,
.editor-styles-wrapper .latest-mini-row .mini-post .wp-block-image img,
.entry-content .latest-mini-row .mini-post .wp-block-image img {
	height: 123px;
}

.site-shell .post-card .wp-block-image,
.editor-styles-wrapper .post-card .wp-block-image,
.entry-content .post-card .wp-block-image,
.site-shell .post-image,
.editor-styles-wrapper .post-image,
.entry-content .post-image {
	height: 170px;
}

.site-shell .post-card .wp-block-image img,
.editor-styles-wrapper .post-card .wp-block-image img,
.entry-content .post-card .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.site-shell .wp-block-buttons,
.editor-styles-wrapper .wp-block-buttons,
.entry-content .wp-block-buttons {
	display: flex;
	justify-content: center;
	margin: 29px 0 0;
}

.site-shell .wp-block-button.load-more .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.load-more .wp-block-button__link,
.entry-content .wp-block-button.load-more .wp-block-button__link {
	padding: 8px 22px;
	color: var(--v0-color-on-footer);
	font-size: 9px;
	background: var(--v0-color-button);
	border-radius: var(--v0-radius-sm);
	text-decoration: none;
}

@media (max-width: 800px) {
	.site-shell .hero-card > .wp-block-image img,
	.editor-styles-wrapper .hero-card > .wp-block-image img,
	.entry-content .hero-card > .wp-block-image img {
		height: 250px;
		min-height: 250px;
	}
}

@media (max-width: 540px) {
	.site-shell .latest-mini-row .mini-post .wp-block-image img,
	.editor-styles-wrapper .latest-mini-row .mini-post .wp-block-image img,
	.entry-content .latest-mini-row .mini-post .wp-block-image img {
		height: 180px;
	}

	.site-shell .post-card .wp-block-image,
	.editor-styles-wrapper .post-card .wp-block-image,
	.entry-content .post-card .wp-block-image,
	.site-shell .post-image,
	.editor-styles-wrapper .post-image,
	.entry-content .post-image {
		height: 190px;
	}
}

/* WP 그룹 기본 flow(block)가 그리드/플렉스를 덮지 않게 특이도를 한 단계 올린다. */
.site-shell .wp-block-group.hero-card,
.editor-styles-wrapper .wp-block-group.hero-card,
.entry-content .wp-block-group.hero-card {
	display: grid;
}

.site-shell .wp-block-group.latest-panel,
.editor-styles-wrapper .wp-block-group.latest-panel,
.entry-content .wp-block-group.latest-panel,
.site-shell .wp-block-group.latest-mini-row,
.editor-styles-wrapper .wp-block-group.latest-mini-row,
.entry-content .wp-block-group.latest-mini-row,
.site-shell .wp-block-group.posts-grid,
.editor-styles-wrapper .wp-block-group.posts-grid,
.entry-content .wp-block-group.posts-grid,
.site-shell .wp-block-group.site-footer,
.editor-styles-wrapper .wp-block-group.site-footer,
.entry-content .wp-block-group.site-footer {
	display: grid;
}

.site-shell .wp-block-group.site-header,
.editor-styles-wrapper .wp-block-group.site-header,
.entry-content .wp-block-group.site-header,
.site-shell .site-header nav.wp-block-group,
.editor-styles-wrapper .site-header nav.wp-block-group,
.entry-content .site-header nav.wp-block-group,
.site-shell .wp-block-group.section-heading,
.editor-styles-wrapper .wp-block-group.section-heading,
.entry-content .wp-block-group.section-heading,
.site-shell .wp-block-group.hero-copy,
.editor-styles-wrapper .wp-block-group.hero-copy,
.entry-content .wp-block-group.hero-copy,
.site-shell .wp-block-group.hero-meta,
.editor-styles-wrapper .wp-block-group.hero-meta,
.entry-content .wp-block-group.hero-meta,
.site-shell .wp-block-group.post-card,
.editor-styles-wrapper .wp-block-group.post-card,
.entry-content .wp-block-group.post-card,
.site-shell .wp-block-group.post-body,
.editor-styles-wrapper .wp-block-group.post-body,
.entry-content .wp-block-group.post-body,
.site-shell .wp-block-group.post-meta,
.editor-styles-wrapper .wp-block-group.post-meta,
.entry-content .wp-block-group.post-meta {
	display: flex;
}

/* -------------------------------------------------------------------------
 * Custom Block Styles (register_block_style → .is-style-*)
 * 사이드바에서 고른 스타일이 커스텀 className 없이도 보이게 한다.
 * ------------------------------------------------------------------------- */
.wp-block-button.is-style-v0-load-more .wp-block-button__link {
	padding: 8px 22px;
	color: var(--v0-color-on-footer);
	font-size: 9px;
	background: var(--v0-color-button);
	border-radius: var(--v0-radius-sm);
	text-decoration: none;
}

.wp-block-button.is-style-v0-primary .wp-block-button__link {
	color: var(--v0-primary-foreground);
	background: var(--v0-primary);
	border-radius: var(--v0-radius-ui);
	font-size: 14px;
	font-weight: 500;
}

.wp-block-button.is-style-v0-primary .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--v0-primary) 80%, transparent);
}

.wp-block-button.is-style-v0-outline .wp-block-button__link {
	color: var(--v0-foreground);
	background: var(--v0-background);
	border: 1px solid var(--v0-border-ui);
	border-radius: var(--v0-radius-ui);
	font-size: 14px;
	font-weight: 500;
}

.wp-block-button.is-style-v0-outline .wp-block-button__link:hover {
	background: var(--v0-muted);
}

.wp-block-button.is-style-v0-ghost .wp-block-button__link {
	color: var(--v0-foreground);
	background: transparent;
	border-radius: var(--v0-radius-ui);
	font-size: 14px;
	font-weight: 500;
}

.wp-block-button.is-style-v0-ghost .wp-block-button__link:hover {
	background: var(--v0-muted);
}

.wp-block-button.is-style-v0-link .wp-block-button__link {
	padding: 0;
	color: var(--v0-color-accent);
	background: transparent;
	border: 0;
	box-shadow: none;
	text-underline-offset: 4px;
}

.wp-block-button.is-style-v0-link .wp-block-button__link:hover {
	text-decoration: underline;
}

.wp-block-group.is-style-v0-page-shell {
	min-height: 100vh;
	background: var(--v0-color-page);
	color: var(--v0-color-ink);
	font-family: var(--v0-font-sans);
}

.wp-block-group.is-style-v0-header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	gap: var(--v0-space-xl);
	padding: 0 var(--v0-space-lg);
	background: var(--v0-color-surface);
	border-bottom: 1px solid var(--v0-color-border);
}

.wp-block-group.is-style-v0-content {
	max-width: var(--v0-content-width);
	margin: 0 auto;
	padding: var(--v0-space-sm) 0 66px;
}

.wp-block-group.is-style-v0-hero {
	display: grid;
	grid-template-columns: 1fr 1.08fr;
	min-height: 382px;
	overflow: hidden;
	background: var(--v0-color-surface);
	border: 1px solid var(--v0-color-border-hero);
	border-radius: var(--v0-radius-lg);
}

.wp-block-group.is-style-v0-hero > .wp-block-image {
	margin: 0;
	height: 100%;
}

.wp-block-group.is-style-v0-hero > .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 382px;
	object-fit: cover;
}

.wp-block-group.is-style-v0-hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 54px;
}

.wp-block-group.is-style-v0-panel {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--v0-space-md);
	padding: 19px;
	background: var(--v0-color-surface);
	border: 1px solid var(--v0-color-border);
	border-radius: var(--v0-radius-lg);
}

.wp-block-group.is-style-v0-post-card {
	display: flex;
	flex-direction: column;
	min-height: 389px;
	overflow: hidden;
	background: var(--v0-color-surface);
	border: 1px solid var(--v0-color-border-card);
	border-radius: var(--v0-radius-lg);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-group.is-style-v0-post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--v0-shadow-card);
}

.wp-block-group.is-style-v0-posts-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px 24px;
}

.wp-block-group.is-style-v0-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0 10px;
}

.wp-block-group.is-style-v0-footer {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 95px;
	min-height: 190px;
	padding: 34px max(52px, calc((100vw - var(--v0-content-width)) / 2));
	color: var(--v0-color-on-footer);
	background: linear-gradient(125deg, var(--v0-color-footer-1) 0%, var(--v0-color-footer-2) 44%, var(--v0-color-footer-3) 100%);
}

.wp-block-group.is-style-v0-footer h2,
.wp-block-group.is-style-v0-footer h3,
.wp-block-group.is-style-v0-footer p,
.wp-block-group.is-style-v0-footer a {
	color: var(--v0-color-on-footer);
}

@media (max-width: 800px) {
	.wp-block-group.is-style-v0-hero {
		grid-template-columns: 1fr;
	}

	.wp-block-group.is-style-v0-hero > .wp-block-image img {
		height: 250px;
		min-height: 250px;
	}

	.wp-block-group.is-style-v0-hero-copy {
		padding: 25px;
	}

	.wp-block-group.is-style-v0-panel,
	.wp-block-group.is-style-v0-posts-grid {
		grid-template-columns: 1fr 1fr;
	}

	.wp-block-group.is-style-v0-footer {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
		padding: 30px 24px;
	}
}

@media (max-width: 540px) {
	.wp-block-group.is-style-v0-panel,
	.wp-block-group.is-style-v0-posts-grid,
	.wp-block-group.is-style-v0-footer {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-v0-post-card {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 히어로 이미지를 링크로 감싼 경우 (블록 패턴)
 * ------------------------------------------------------------------------- */
.site-shell .hero-card > a,
.editor-styles-wrapper .hero-card > a {
	display: block;
	height: 100%;
	min-height: 382px;
}

.site-shell .hero-card > a img,
.editor-styles-wrapper .hero-card > a img {
	width: 100%;
	height: 100%;
	min-height: 382px;
	object-fit: cover;
}

.site-shell .hero-copy h1 a,
.site-shell .latest-feature h3 a,
.site-shell .mini-post h3 a,
.site-shell .post-card h3 a,
.editor-styles-wrapper .hero-copy h1 a,
.editor-styles-wrapper .latest-feature h3 a,
.editor-styles-wrapper .mini-post h3 a,
.editor-styles-wrapper .post-card h3 a {
	color: inherit;
	text-decoration: none;
}

.site-shell a.load-more,
.editor-styles-wrapper a.load-more {
	display: block;
	width: fit-content;
	text-align: center;
	text-decoration: none;
}

@media (max-width: 800px) {
	.site-shell .hero-card > a,
	.site-shell .hero-card > a img,
	.editor-styles-wrapper .hero-card > a,
	.editor-styles-wrapper .hero-card > a img {
		height: 250px;
		min-height: 250px;
	}
}

/* -------------------------------------------------------------------------
 * 쿼리 루프 패턴 (v0 Post Card Grid Pattern)
 * .site-shell 밖 일반 페이지 본문에서도 카드가 보이도록 .v0-query-grid 로 범위를 잡는다.
 * 코어 블록이 출력하는 래퍼(li, figure, div.wp-block-post-*)에 맞춘 선택자다.
 * ------------------------------------------------------------------------- */
/*
 * container-type: 이 상자를 "기준 자"로 삼아 아래 @container 규칙이 화면 폭이 아니라
 * 카드 묶음 자체의 폭으로 열 개수를 정하게 한다.
 * 에디터 캔버스(iframe)는 관리자 사이드바 때문에 실제 화면보다 좁아서,
 * @media 로 판단하면 에디터만 2열이 되는 불일치가 생기기 때문이다.
 */
.v0-query-grid {
	container-type: inline-size;
	container-name: v0-grid;
	max-width: var(--v0-content-width);
	margin-right: auto;
	margin-left: auto;
	font-family: var(--v0-font-sans);
	color: var(--v0-color-ink);
}

/*
 * 데스크톱은 무조건 3열. minmax(0, 1fr) 은 긴 영어 단어·URL 이 있어도
 * 한 칸만 넓어지지 않고 세 칸이 같은 폭을 유지하게 한다(그냥 1fr 은 내용 폭만큼 늘어난다).
 */
.v0-query-grid .wp-block-post-template,
.wp-block-post-template.v0-post-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 프론트에서 카드 묶음은 좌우 20px 여백 안에 있어 "묶음 폭 = 화면 폭 - 40px" 이다.
 * 그래서 984px / 600px 은 화면 폭 1024px(태블릿) / 640px(모바일)과 같은 지점에서 열이 바뀐다.
 * 기본 12장은 2열에서 6줄, 3열에서 4줄, 1열에서 12줄로 마지막 줄이 비지 않는다.
 * 열 판단은 @media 가 아니라 @container 다. 에디터 iframe 폭과 프론트 폭을 같은 기준으로 맞추기 위함이다.
 */
@container v0-grid (max-width: 984px) {
	.v0-query-grid .wp-block-post-template,
	.wp-block-post-template.v0-post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@container v0-grid (max-width: 600px) {
	.v0-query-grid .wp-block-post-template,
	.wp-block-post-template.v0-post-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/*
 * 그리드 한 줄의 li 는 가장 긴 카드 높이로 늘어난다.
 * 그 안의 카드가 flex:1 로 li 를 꽉 채워야 같은 줄 카드 높이가 같아지고,
 * 날짜(margin-top:auto)도 모두 같은 바닥선에 놓인다.
 */
.v0-query-grid .wp-block-post-template > .wp-block-post,
.wp-block-post-template.v0-post-grid > .wp-block-post {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100% !important;
	max-width: none;
	margin: 0;
	box-sizing: border-box !important;
}

/*
 * GeneratePress(theme.json 없는 클래식 테마)는 그룹 블록마다 .wp-block-group__inner-container 를
 * 한 겹 더 만들고, 인라인 CSS 로 padding:30px · max-width:1200px 을 준다.
 * 카드→본문→메타 그룹이 겹치면 좌우 여백만 180px 이 되어 글자가 세로로 찌그러진다.
 * display:contents 로 이 상자를 "없는 것처럼" 만들어 자식이 카드의 flex 항목이 되게 한다.
 */
.v0-query-grid .wp-block-group__inner-container,
.site-shell .wp-block-group__inner-container {
	display: contents;
	max-width: none;
	margin: 0;
	padding: 0;
}

/*
 * GP 안쪽 상자는 display:contents 로 화면에서만 사라지고 DOM 에는 남는다.
 * 그래서 "카드 > 자식" 선택자는 실제로 "카드 > 안쪽상자 > 자식" 이 되어 맞지 않는다.
 * 두 경로를 모두 적어 프론트·에디터 어느 쪽 구조에서도 규칙이 걸리게 한다.
 * 에디터의 GP 규칙 body .wp-block { max-width: 840px } 도 여기서 함께 푼다.
 */
.v0-query-grid .post-card > *,
.v0-query-grid .post-card > .wp-block-group__inner-container > *,
.v0-query-grid .post-body > *,
.v0-query-grid .post-body > .wp-block-group__inner-container > *,
.v0-query-grid .wp-block {
	max-width: none;
}

.v0-query-grid .post-card {
	display: flex;
	flex: 1;
	flex-direction: column;
		min-height: 389px;
	margin: 0;
	/* 평소엔 숨겨 카드 모서리를 둥글게 자른다. 제목 호버 때 툴팁이 잘리지 않도록 아래에서 visible 로 푼다. */
	overflow: hidden;
	background: var(--v0-color-surface);
	border: 1px solid var(--v0-color-border-card);
	/* 썸네일 상단 라운딩(8px)과 맞춰야 모서리에 흰 틈이 보이지 않는다. */
	border-radius: 8px;
	box-shadow: var(--v0-shadow-none);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v0-query-grid .post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--v0-shadow-card);
}

/*
 * 썸네일 이탈 방지: 상자(figure)를 200px 로 고정하고 넘치는 부분은 잘라낸다.
 * 원본 비율이 제각각이어도 object-fit: cover 로 비율을 유지한 채 상자를 꽉 채운다.
 * 에디터는 이미지 블록에 인라인 width/height 를 붙이기도 해서 !important 로 덮는다.
 */
.v0-query-grid .wp-block-post-featured-image {
	display: block !important;
	flex: none;
	width: 100% !important;
	height: 200px !important;
	margin: 0 !important;
	overflow: hidden !important;
	border-radius: 8px 8px 0 0 !important;
	background: var(--v0-color-page);
}

.v0-query-grid .wp-block-post-featured-image a,
.v0-query-grid .wp-block-post-featured-image img {
	display: block !important;
	width: 100% !important;
	height: 200px !important;
	max-width: none !important;
	object-fit: cover !important;
	border-radius: 8px 8px 0 0 !important;
}

/* 대표 이미지가 없는 글의 에디터 자리표시(회색 상자)도 같은 200px 안에 가둔다. */
.v0-query-grid .wp-block-post-featured-image .components-placeholder,
.v0-query-grid .wp-block-post-featured-image .wp-block-post-featured-image__placeholder,
.v0-query-grid .wp-block-post-featured-image .block-editor-media-placeholder {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	border-radius: inherit;
}

.v0-query-grid .post-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	padding: 16px 17px 13px;
}

.v0-query-grid .post-body > *,
.v0-query-grid .post-body > .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * 카드 안 간격: 카테고리 → 8px → 제목 → 8px → 요약 → 12px → 날짜.
 * 위 .post-body > * 초기화(margin 0)보다 뒤에 있고 !important 라서 이 값이 이긴다.
 */
.v0-query-grid .post-tags,
.v0-query-grid .wp-block-post-terms {
	margin: 0 0 8px !important;
	color: var(--v0-color-accent);
	font-size: 7px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.v0-query-grid .post-tags a {
	color: inherit;
	text-decoration: none;
}

/*
 * 제목은 최대 2줄, 넘치면 ... 으로 자른다.
 * height 2.8em = 줄높이 1.4 × 2줄 이라 제목이 1줄이어도 2줄 자리를 차지해,
 * 옆 카드와 요약·날짜 시작 위치가 같아진다.
 *
 * 자르기(overflow:hidden)는 제목 상자(h3)가 아니라 안쪽 링크에 건다.
 * h3 에 걸면 h3 위로 띄우는 커스텀 툴팁(::after)까지 같이 잘려 보이지 않기 때문이다.
 */
.v0-query-grid .wp-block-post-title {
	position: relative;
	display: block !important;
	overflow: visible !important;
	height: 2.8em !important;
	margin: 0 0 8px !important;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

.v0-query-grid .wp-block-post-title > a,
.v0-query-grid .wp-block-post-title:not(:has(> a)) {
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.v0-query-grid .wp-block-post-title a {
	color: var(--v0-color-ink);
	text-decoration: none;
}

/*
 * 카드 overflow:hidden 이 제목 위 ::after 툴팁을 잘라 낸다.
 * 제목에 마우스가 올라간 칸만 잠시 풀고, 그 칸을 옆 카드보다 앞에 둔다.
 */
.v0-query-grid .wp-block-post:has(.wp-block-post-title:hover),
.v0-query-grid .wp-block-post:has(.wp-block-post-title:focus-within) {
	position: relative;
	z-index: 5;
}

.v0-query-grid .wp-block-post:has(.wp-block-post-title:hover) .post-card,
.v0-query-grid .wp-block-post:has(.wp-block-post-title:focus-within) .post-card {
	overflow: visible;
}

/*
 * 잘린 제목 전체를 보여 주는 커스텀 툴팁. 글자는 PHP/JS 가 넣은 title 속성 값을 그대로 쓴다.
 * 제목 바로 위(대표 이미지 쪽)로 띄워 아래 요약을 가리지 않게 한다.
 * pointer-events:none 이라 툴팁이 마우스를 가로채 링크 클릭을 막지 않는다.
 */
.v0-query-grid .wp-block-post-title[title]:hover::after,
.v0-query-grid .wp-block-post-title[title]:focus-within::after {
	content: attr(title);
	position: absolute;
	bottom: 100%;
	left: 0;
	z-index: 100;
	width: max-content;
	max-width: 280px;
	margin-bottom: 6px;
	padding: 6px 10px;
	background: rgba(17, 24, 39, 0.9);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	color: #ffffff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
	pointer-events: none;
}

.v0-query-grid .wp-block-post-title a:hover {
	color: var(--v0-color-accent);
}

/*
 * 요약은 최대 3줄, 넘치면 ... 으로 자른다. height 4.2em = 줄높이 1.4 × 3줄.
 * 코어 블록은 글자를 바깥 div 가 아니라 안쪽 <p> 에 넣으므로,
 * 바깥 div 는 높이를 고정하고 실제 말줄임은 안쪽 <p> 에 건다.
 */
.v0-query-grid .post-excerpt,
.v0-query-grid .wp-block-post-excerpt {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	height: 4.2em !important;
	margin: 0 0 12px !important;
	color: var(--v0-color-muted);
	font-size: 9px;
	line-height: 1.4;
}

.v0-query-grid .wp-block-post-excerpt__excerpt {
	display: -webkit-box !important;
	-webkit-line-clamp: 3 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	margin: 0 !important;
}

/* "더 읽기" 링크가 켜져 있으면 3줄 칸을 밀어내므로 카드 안에서는 숨긴다. */
.v0-query-grid .wp-block-post-excerpt__more-text {
	display: none;
}

/* margin-top: auto 가 남는 세로 공간을 모두 위로 밀어 날짜를 카드 바닥에 붙인다. */
.v0-query-grid .post-meta {
	display: flex;
	justify-content: space-between;
	margin-top: auto !important;
	padding-top: 0;
	color: var(--v0-color-muted-2);
	font-size: 8px;
}

.v0-query-grid .post-meta .wp-block-post-date,
.v0-query-grid .wp-block-post-date {
	margin: 0 !important;
	font-size: inherit;
}

/*
 * '글 더보기' 버튼 (inc/v0-load-more.php 가 쿼리 루프 맨 아래에 넣는다).
 * v0 포인트 파랑(--v0-color-button) → 푸터 보라(--v0-color-footer-2) 그라데이션으로 사이트 색과 맞춘다.
 */
.v0-query-grid .v0-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.v0-query-grid .v0-load-more-btn {
	min-width: 180px;
	min-height: 48px;
	padding: 12px 32px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--v0-color-button), var(--v0-color-footer-2));
	box-shadow: 0 6px 16px rgb(57 17 189 / 22%);
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.v0-query-grid .v0-load-more-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgb(57 17 189 / 30%);
}

/* 키보드로 이동했을 때도 위치가 보이도록 포커스 링을 남긴다(접근성). */
.v0-query-grid .v0-load-more-btn:focus-visible {
	outline: 3px solid var(--v0-color-accent);
	outline-offset: 3px;
}

.v0-query-grid .v0-load-more-btn[aria-busy="true"] {
	opacity: 0.75;
	cursor: progress;
}

/* "마지막 글입니다" 상태: 눌리지 않는 버튼임을 회색으로 보여 준다. */
.v0-query-grid .v0-load-more-btn:disabled:not([aria-busy="true"]) {
	background: var(--v0-color-border);
	box-shadow: none;
	color: var(--v0-color-muted);
	cursor: default;
}

/* 새로 붙은 카드는 살짝 떠오르며 나타나 "추가됐다" 는 것을 알려 준다. */
.v0-query-grid .wp-block-post.v0-is-new {
	animation: v0-card-in 0.35s ease both;
}

@keyframes v0-card-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.v0-query-grid .post-card,
	.v0-query-grid .v0-load-more-btn {
		transition: none;
	}

	.v0-query-grid .wp-block-post.v0-is-new {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * GeneratePress 컨테이너 제한 해제 (Full Width)
 * v0 패턴(.v0-query-grid / .site-shell)이 들어간 페이지에서만 동작한다.
 * 다른 글·페이지는 원래 GP 레이아웃(사이드바, 흰 상자)을 그대로 유지한다.
 * :has() 를 모르는 오래된 브라우저에서는 이 블록 전체가 무시되고 기본 레이아웃으로 보인다.
 * ------------------------------------------------------------------------- */
body:has(.v0-query-grid),
body:has(.site-shell) {
	background: var(--v0-color-page);
}

/* 빈 오른쪽 사이드바가 30% 를 차지해 본문이 70% 로 갇히는 문제를 없앤다. */
body:has(.v0-query-grid) #right-sidebar,
body:has(.v0-query-grid) #left-sidebar,
body:has(.site-shell) #right-sidebar,
body:has(.site-shell) #left-sidebar {
	display: none;
}

body:has(.v0-query-grid) .site.grid-container,
body:has(.v0-query-grid) .site-content,
body:has(.site-shell) .site.grid-container,
body:has(.site-shell) .site-content {
	max-width: none;
	width: 100%;
	padding: 0;
}

body:has(.v0-query-grid) .site-content .content-area,
body:has(.site-shell) .site-content .content-area {
	width: 100%;
	max-width: none;
}

/* separate-containers 의 흰 상자(padding 30~40px, margin 20px)를 투명하게 펼친다. */
body:has(.v0-query-grid) .site-main,
body:has(.site-shell) .site-main {
	margin: 0;
}

body:has(.v0-query-grid) .inside-article,
body:has(.site-shell) .inside-article {
	padding: 0;
	background: transparent;
	box-shadow: none;
}

body:has(.v0-query-grid) .entry-content,
body:has(.site-shell) .entry-content {
	margin: 0;
}

body:has(.v0-query-grid) .entry-content > *,
body:has(.site-shell) .entry-content > * {
	max-width: none;
}

/* 펼친 화면에서 카드 묶음은 v0 본문 폭(1080px) 가운데에 두고 위아래·좌우 숨 쉴 공간을 준다. */
body:has(.v0-query-grid) .entry-content > .v0-query-grid {
	box-sizing: border-box;
	max-width: calc(var(--v0-content-width) + 40px);
	padding: 32px 20px 66px;
}

/* -------------------------------------------------------------------------
 * 에디터 너비 동기화
 * GP 는 에디터 블록 최대폭을 "컨테이너 1200 - 사이드바 25% - 여백 60 = 840px" 로 잡는다.
 * 프론트 v0 페이지는 사이드바를 숨겨 카드 묶음이 1080px 이므로, 에디터의 쿼리 블록도
 * 같은 1080px 로 맞춰야 카드 폭·열 개수가 똑같이 보인다.
 * (functions.php 의 generate_block_editor_content_width 필터가 페이지 전체 폭도 함께 맞춘다.
 *  이 CSS 는 패턴을 막 넣고 아직 저장 전이라 필터가 모르는 경우를 위한 것이다.)
 * ------------------------------------------------------------------------- */
.editor-styles-wrapper .wp-block-query.v0-query-grid {
	box-sizing: content-box;
	width: auto;
	max-width: var(--v0-content-width) !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding-right: 0;
	padding-left: 0;
}

/* -------------------------------------------------------------------------
 * GP 순정 헤더 / 푸터
 * 선택자를 #masthead · body > .site-footer 로 좁혀, 본문 패턴의
 * .site-shell .site-header / .site-footer 규칙은 그대로 둔다.
 * ------------------------------------------------------------------------- */

/* 헤더: v0 의 흰 바 + 아래 얇은 선. GP 커스터마이저 배경보다 이 값이 이기게 한다. */
#masthead.site-header {
	background: var(--v0-color-surface) !important;
	border-bottom: 1px solid var(--v0-color-border);
	box-shadow: none;
}

#masthead .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--v0-content-width) + 40px);
	min-height: 58px;
	margin-right: auto;
	margin-left: auto;
	padding: 10px 20px !important;
	gap: 34px;
}

/* 로고 이미지는 58px 헤더 안에 들어가게 높이를 맞춘다. 텍스트 로고는 v0 brand 굵기를 쓴다. */
#masthead .site-logo img,
#masthead .header-image {
	display: block;
	width: auto !important;
	max-height: 36px;
	height: auto !important;
}

#masthead .main-title,
#masthead .main-title a,
#masthead .site-branding .main-title a {
	color: var(--v0-color-ink-strong);
	font-family: var(--v0-font-sans) !important;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
}

#masthead .main-navigation,
#masthead .main-navigation .inside-navigation {
	background: transparent !important;
}

/* display:flex 를 모바일에까지 주면 GP 가 숨긴 메뉴가 햄버거 옆에 항상 보인다. */
@media (min-width: 769px) {
	#masthead .main-navigation .main-nav > ul {
		display: flex;
		align-items: center;
		gap: 25px;
	}
}

#masthead .main-navigation .main-nav > ul > li {
	margin: 0;
}

#masthead .main-navigation .main-nav > ul > li > a {
	padding: 0 !important;
	color: var(--v0-color-ink-nav) !important;
	font-family: var(--v0-font-sans) !important;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	background: transparent !important;
}

#masthead .main-navigation .main-nav > ul > li > a:hover,
#masthead .main-navigation .main-nav > ul > li.sfHover > a,
#masthead .main-navigation .main-nav > ul > li.current-menu-item > a,
#masthead .main-navigation .main-nav > ul > li.current-menu-ancestor > a {
	color: var(--v0-color-accent) !important;
	background: transparent !important;
}

/* 하위 메뉴도 같은 서체·호버 색을 쓴다. */
#masthead .main-navigation .main-nav ul ul a {
	color: var(--v0-color-ink-nav) !important;
	font-family: var(--v0-font-sans) !important;
	font-size: 13px !important;
}

#masthead .main-navigation .main-nav ul ul a:hover {
	color: var(--v0-color-accent) !important;
}

#masthead .menu-toggle,
#mobile-menu-control-wrapper .menu-toggle {
	color: var(--v0-color-ink-nav);
	background: transparent;
	border: 0;
}

#masthead .menu-toggle:hover,
#mobile-menu-control-wrapper .menu-toggle:hover,
#masthead .menu-toggle:focus,
#mobile-menu-control-wrapper .menu-toggle:focus {
	color: var(--v0-color-accent);
}

/* 푸터: v0 보라 그라데이션. 위젯 칸 + 카피라이트 바를 한 덩어리로 칠한다. */
body > .site-footer {
	color: var(--v0-color-on-footer);
	background: linear-gradient(125deg, var(--v0-color-footer-1) 0%, var(--v0-color-footer-2) 44%, var(--v0-color-footer-3) 100%);
}

body > .site-footer .footer-widgets,
body > .site-footer .site-info {
	background: transparent !important;
	color: inherit;
}

/*
 * 커스터마이저가 .footer-widgets-container 를 flex 로 잠가 그리드가 깨진다.
 * html+body 를 붙여 그 규칙보다 구체적으로 덮는다.
 */
html body > .site-footer .footer-widgets,
html body > .site-footer .footer-widgets-container {
	display: block !important;
	width: 100% !important;
}

body > .site-footer .footer-widgets-container,
body > .site-footer .inside-site-info,
body > .site-footer .v0-footer-columns {
	box-sizing: border-box;
	width: 100% !important;
	max-width: var(--v0-content-width) !important;
	margin-right: auto;
	margin-left: auto;
	/* v0 처럼 좌우를 넉넉히 비워 소개글이 화면 끝에 붙지 않게 한다. */
	padding: 40px 52px 12px !important;
}

/*
 * PC 푸터는 [소개(넓음) | 카테고리 | 메뉴] 세 열.
 * 오른쪽 두 칸은 글자 폭만큼만 잡아 '카테고리'·'개인정보 보호정책'이 줄바꿈되지 않게 한다.
 */
html body > .site-footer .footer-widgets .inside-footer-widgets,
html body > .site-footer .v0-footer-columns {
	display: grid !important;
	grid-template-columns: minmax(280px, 1fr) max-content max-content;
	gap: 40px 72px;
	align-items: start;
	width: 100% !important;
	margin: 0 !important;
}

html body > .site-footer .footer-widgets .inside-footer-widgets:has(.footer-widget-3) {
	grid-template-columns: minmax(280px, 1fr) max-content max-content;
	gap: 32px 48px;
}

/*
 * 커스터마이저: footer-widget-1 40% / footer-widget-2 80% + flex-end.
 * 선택자를 더 구체화해 위젯이 그리드 칸 전체를 쓰게 한다.
 */
html body > .site-footer .footer-widgets .inside-footer-widgets > div.footer-widget-1,
html body > .site-footer .footer-widgets .inside-footer-widgets > div.footer-widget-2,
html body > .site-footer .footer-widgets .inside-footer-widgets > div:first-child,
html body > .site-footer .footer-widgets .inside-footer-widgets > div:last-child {
	flex: none !important;
	flex-basis: auto !important;
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	padding: 0;
	justify-content: flex-start !important;
}

/*
 * 2번 위젯 상자만 지워서(contents) 카테고리·메뉴가 바로 그리드 칸이 되게 한다.
 * 상자 안에서 다시 40% 로 줄어드는 일을 막기 위함이다.
 */
html body > .site-footer .footer-widgets .inside-footer-widgets > div.footer-widget-2 {
	display: contents !important;
}

body > .site-footer .v0-footer-title,
body > .site-footer .widget-title,
body > .site-footer h2,
body > .site-footer h3,
body > .site-footer h6 {
	margin: 0 0 12px;
	color: var(--v0-color-on-footer) !important;
	font-family: var(--v0-font-sans) !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	background: none;
}

body > .site-footer .v0-footer-heading,
body > .site-footer .footer-widget-2 .widget-title {
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

body > .site-footer .v0-footer-desc,
body > .site-footer p,
body > .site-footer .widget,
body > .site-footer li {
	color: rgba(255, 255, 255, 0.88);
	font-family: var(--v0-font-sans) !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.65;
}

body > .site-footer .v0-footer-desc {
	max-width: none;
	margin: 0;
}

body > .site-footer .v0-footer-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

body > .site-footer a,
body > .site-footer .custom-footer-links a,
body > .site-footer .v0-footer-list a {
	display: block;
	width: max-content;
	max-width: none;
	margin: 0 0 7px;
	color: var(--v0-color-on-footer) !important;
	font-family: var(--v0-font-sans) !important;
	font-size: 13px !important;
	font-weight: 400;
	line-height: 1.55;
	text-decoration: none !important;
	white-space: nowrap;
}

body > .site-footer a:hover,
body > .site-footer .custom-footer-links a:hover {
	color: #e8d7ff !important;
}

body > .site-footer .custom-footer-links {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0;
}

body > .site-footer .footer-widget-1 .wp-block-image img,
body > .site-footer .footer-widget-1 .site-logo img {
	max-width: 160px;
	height: auto;
	/* 어두운 로고를 그라데이션 위 흰 실루엣으로 바꿔 읽히게 한다. */
	filter: brightness(0) invert(1);
}

/* GP 커스터마이저가 .site-info { display:none } 로 숨긴 경우가 있어, 카피라이트 칸을 다시 연다. */
body > .site-footer .site-info {
	display: block !important;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body > .site-footer .inside-site-info {
	padding-top: 16px;
	padding-bottom: 24px;
	text-align: left;
}

body > .site-footer .copyright-bar,
body > .site-footer .copyright-bar a {
	margin: 0;
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 12px !important;
}

body > .site-footer .widget {
	margin: 0 0 16px;
	padding: 0;
}

.generate-back-to-top {
	background: var(--v0-color-footer-2) !important;
	color: #fff !important;
}

/* 모바일: 헤더는 줄바꿈, 메뉴는 흰 패널, 푸터는 한 열. */
@media (max-width: 800px) {
	#masthead .inside-header {
		flex-wrap: wrap;
		min-height: 0;
		padding: 12px 16px !important;
		gap: 10px 18px;
	}

	#masthead .main-navigation .main-nav > ul {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 8px 16px;
	}

	#masthead .main-navigation.toggled .main-nav > ul,
	#masthead .main-navigation.toggled .main-nav > ul > li > a {
		background: var(--v0-color-surface) !important;
	}

	#masthead .main-navigation.toggled .main-nav > ul > li > a {
		display: block;
		padding: 12px 4px !important;
		font-size: 14px !important;
	}

	html body > .site-footer .footer-widgets .inside-footer-widgets,
	html body > .site-footer .footer-widgets .inside-footer-widgets:has(.footer-widget-3),
	html body > .site-footer .v0-footer-columns {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* 모바일에서는 상자를 되살려 카테고리·메뉴가 세로로 쌓이게 한다. */
	html body > .site-footer .footer-widgets .inside-footer-widgets > div.footer-widget-2 {
		display: flex !important;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 24px;
	}

	body > .site-footer a,
	body > .site-footer .custom-footer-links a,
	body > .site-footer .v0-footer-list a,
	body > .site-footer .v0-footer-heading {
		white-space: normal;
	}

	body > .site-footer .footer-widgets-container,
	body > .site-footer .inside-site-info,
	body > .site-footer .v0-footer-columns {
		padding: 30px 24px 12px;
	}

	body > .site-footer .inside-site-info {
		padding-top: 16px;
		padding-bottom: 24px;
	}

	body > .site-footer .v0-footer-desc {
		max-width: none;
	}
}

@media (max-width: 540px) {
	#masthead .main-title,
	#masthead .main-title a {
		font-size: 20px;
	}

	#masthead .site-logo img,
	#masthead .header-image {
		max-height: 30px;
	}
}

/* -------------------------------------------------------------------------
 * 애드센스 / 광고 영역 (CLS 방지)
 * 광고는 나중에 채워지면서 높이가 갑자기 생기면 아래 글이 밀려 내려가(CLS) 점수가 깎인다.
 * 광고를 넣을 자리(그룹/사용자 정의 HTML 블록)에 class="v0-ad-slot" 을 주면
 * 광고가 오기 전부터 높이를 예약해 둔다. 높이는 --v0-ad-min-height 로 바꾼다.
 * ------------------------------------------------------------------------- */
.v0-ad-slot {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: var(--v0-ad-min-height, 280px);
	margin: 24px auto;
	overflow: hidden;
	text-align: center;
}

.v0-ad-slot--banner {
	--v0-ad-min-height: 100px;
}

/* 광고 코드(ins)는 칸 안에서 가운데에 두고, 칸 밖으로 넘치지 않게 한다. */
.v0-ad-slot ins.adsbygoogle {
	display: block;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

/*
 * 애드센스 자동 광고가 글 목록(ul) 안 li 사이에 끼어들면 3열 그리드의 한 칸을 차지해
 * 카드 줄이 깨진다. 끼어들더라도 한 줄 전체를 쓰게 해 열 정렬을 지킨다.
 */
.v0-query-grid .wp-block-post-template > ins,
.v0-query-grid .wp-block-post-template > .google-auto-placed,
.v0-query-grid .wp-block-post-template > .adsbygoogle {
	grid-column: 1 / -1;
	min-width: 0;
}

/* 광고가 컨테이너(container-type) 폭을 늘리지 못하게 한다. */
.v0-query-grid .google-auto-placed,
.v0-query-grid ins.adsbygoogle {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * 모바일 터치 영역 (구글 권장 최소 48 x 48px)
 * 눈에 보이는 크기는 그대로 두고, 클릭 가능한 영역만 넓힌다.
 * 터치 기기(pointer: coarse) 또는 800px 이하 화면에만 적용해 PC 디자인은 바꾸지 않는다.
 * ------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 800px) {
	/* 헤더 로고: 이미지 높이는 그대로, 링크 영역만 48px 이상으로. */
	#masthead .site-logo a {
		display: inline-flex;
		align-items: center;
		min-height: 48px;
	}

	/* 헤더 검색창(워드프레스 검색 블록) */
	#masthead .wp-block-search__input,
	#masthead .wp-block-search__button,
	#masthead .search-field,
	#masthead .search-submit {
		min-height: 48px;
	}

	#masthead .wp-block-search__button {
		min-width: 48px;
	}

	/*
	 * 카드 카테고리 링크(글자 11px 안팎): 위·아래 패딩으로 터치 영역을 키우고
	 * 같은 크기의 음수 마진으로 상쇄해 카드 안 간격은 그대로 유지한다.
	 */
	.v0-query-grid .post-tags a,
	.v0-query-grid .wp-block-post-terms a {
		display: inline-block;
		padding: 15px 8px;
		margin: -15px -8px;
	}

	/* 푸터 링크: 줄마다 48px 이상. 위 줄과 간격이 붙어 있어 오탭도 줄어든다. */
	html body > .site-footer a,
	html body > .site-footer .custom-footer-links a,
	html body > .site-footer .v0-footer-list a {
		display: flex;
		align-items: center;
		width: max-content;
		max-width: 100%;
		min-width: 48px;
		min-height: 48px;
		margin: 0;
	}

	/* 글 더보기 버튼도 48px 보장 */
	.v0-query-grid .v0-load-more-btn {
		min-height: 48px;
	}

	/* 맨 위로 버튼: GP 기본 40px 를 48px 로 */
	html body a.generate-back-to-top {
		width: 48px;
		height: 48px;
		line-height: 48px;
	}
}