/* ==========================================================================
   가탈작 가이드 — 기본 스타일

   [기준 화면 너비] 모바일 우선(mobile-first), min-width 미디어쿼리만 사용
     모바일   ~767px       미디어쿼리 없는 기본 스타일
     태블릿   768px 이상    @media (min-width: 768px)
     PC       1024px 이상   @media (min-width: 1024px)   — 사이드바가 옆으로 붙는 폭
     넓은 PC  1200px 이상   @media (min-width: 1200px)   — 목록이 3열이 되는 폭

   파일 전체에서 이 네 단계만 씁니다. 다른 기준값(640px 등)은 쓰지 않습니다.
   **1024 와 1200 은 뜻이 다릅니다.** 1024 부터 사이드바가 본문 옆에 붙어 폭을
   300px 가져가므로, 거기서 바로 3열로 가면 카드가 너무 좁습니다 (아이패드 세로
   1024px 에서 글자가 겹쳤습니다). 그래서 3열과 목록 디자인 설정은 1200 부터입니다.
   미디어쿼리 조건에는 CSS 변수를 쓸 수 없어 숫자를 그대로 적습니다.
   ========================================================================== */

/* 1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
	/* 색상 — 새 색이 필요하면 임의로 만들지 말고 이 목록에서 고릅니다.
	   퍼플과 핑크는 서로 붙여 쓰지 않습니다(명암비 2.2:1). 자세한 규칙은 CLAUDE.md 참고. */
	--gz-color-text: #151515;          /* 본문 글자, 제목 */
	--gz-color-muted: #67637a;         /* 작성일, 요약글, 캡션, 메타 정보 */
	--gz-color-brand: #34296c;         /* 브랜드 퍼플 — 링크, 기본 버튼, 로고, 현재 위치 */
	--gz-color-brand-hover: #4a3d94;   /* 퍼플 호버 / 포커스 */
	--gz-color-accent: #c2255c;        /* 포인트 핑크 — 강조가 꼭 필요한 곳에만 */
	--gz-color-accent-hover: #a81e4e;  /* 핑크 호버 / 포커스 */
	--gz-color-border: #e4e2ec;        /* 카드, 표, 구분선, 입력창 */
	--gz-color-surface: #f6f5fa;       /* 푸터, 표 머리, 인용문 */
	--gz-color-brand-tint: #efedf7;    /* 정보 박스, 목차 배경, 텍스트 선택 */
	--gz-color-accent-tint: #fceef3;   /* 꿀팁 / 주의 박스 배경 */
	--gz-color-bg: #ffffff;            /* 페이지 배경 */

	/* 목록 아이콘 전용. 이 색은 목록 아이콘에만 쓰고 다른 곳에는 쓰지 않습니다.
	   theme.json 팔레트에도 넣지 않아 글 쓸 때 글자색으로 고를 수 없습니다.
	   체크 아이콘은 전에 쓰던 초록 전용 색을 버리고 핑크(--gz-color-accent)를 씁니다. */
	--gz-color-icon-warning: #f2b233;   /* 주의 노랑 */
	--gz-color-shadow: rgba(21, 21, 21, 0.1);

	/* 헤더 4색 띠 — 사용자 정의하기 > 헤더 디자인 에서 덮어씁니다.
	   CSS 에는 이 변수만 쓰고 띠 색상을 직접 적지 않습니다.
	   왼쪽부터 핑크 · 퍼플 · 띠 전용 중간톤 · 블랙 순입니다. */
	--gz-band-1: var(--gz-color-accent);
	--gz-band-2: var(--gz-color-brand);
	--gz-band-3: #4a3e8c;               /* 헤더 띠 전용 색. 다른 곳에는 쓰지 않습니다 */
	--gz-band-4: var(--gz-color-text);

	--gz-font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;

	--gz-container: 1200px;
	--gz-content: 800px;
	--gz-sidebar: 300px;
	--gz-hub-width: 520px; /* 허브 페이지 본문 폭. 헤더도 같은 값을 씁니다 */
	--gz-widget-thumb: 40%;  /* 사이드바 최신 글 썸네일 폭 (나머지가 제목) */
	--gz-gutter: 1rem;   /* 좌우 여백 모바일 16px */
	--gz-gap: 1.5rem;
	--gz-card-gap: 1.25rem; /* 목록 카드 사이 여백. 가로 · 세로 같은 값이라 한 곳에서만 정합니다 */
	--gz-radius: 2px;    /* 카드 · 버튼 · 입력창 모서리. 이 값 하나가 전부에 적용됩니다 */
	--gz-touch: 44px;    /* 터치 영역 최소 높이 */

	/* 본문 목록을 문단보다 바깥으로 들여쓰는 여백 (모바일 12px → PC 24px).
	   불릿 자리(1.5em)는 이와 별개이며, 이 값은 그 바깥에 붙습니다.
	   editor-style.css 에도 같은 값이 있으므로 한쪽을 고치면 함께 고칩니다. */
	--gz-list-indent: clamp(0.75rem, 0.4rem + 1.4vw, 1.5rem);
}

@media (min-width: 768px) {
	:root {
		--gz-gutter: 1.5rem; /* 태블릿 24px */
		--gz-gap: 2rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--gz-gutter: 2rem;   /* PC 32px */
		--gz-gap: 2.5rem;
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--gz-font-sans);
	/* 본문 글자 크기 — 모든 기기에서 17px 입니다.
	   기기별로 나누고 싶으면 clamp 로 되돌립니다
	   (예: clamp(1rem, 0.964rem + 0.154vw, 1.0625rem) 이면 모바일 16px · PC 17px).
	   **표 · 목록 · 인용은 여기서 물려받습니다.** 그쪽에 따로 적지 않습니다
	   (적는 순간 편집창의 글자 크기 설정이 먹지 않고, 값이 두 곳으로 갈라집니다).
	   제목 · 카드 · 사이드바는 각자 rem 으로 정해 두어 여기에 영향받지 않습니다. */
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--gz-color-text);
	background: var(--gz-color-bg);
	word-break: keep-all;       /* 한글 단어 중간 줄바꿈 방지 */
	overflow-wrap: break-word;  /* 긴 URL 등은 줄바꿈 허용 */
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

embed,
object,
svg {
	max-width: 100%;
}

a {
	color: var(--gz-color-brand);
	text-decoration: none;
}

/* 밑줄이 없으므로 호버·키보드 포커스 때 핑크로 바뀌어 링크임을 알립니다.
   목차는 퍼플 틴트 박스 안이라 예외로 퍼플을 유지합니다 (14번 항목). */
a:hover,
a:focus-visible {
	color: var(--gz-color-accent);
}

/* 키보드 포커스 표시는 항상 퍼플 2px 외곽선 */
:focus-visible {
	outline: 2px solid var(--gz-color-brand);
	outline-offset: 2px;
}

::selection {
	background: var(--gz-color-brand-tint);
	color: var(--gz-color-text);
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.35;
	margin: 0 0 0.75em;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* 3. 접근성 (워드프레스 표준 클래스)
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--gz-color-bg);
	clip: auto !important;
	clip-path: none;
	color: var(--gz-color-text);
	display: block;
	height: auto;
	left: 8px;
	top: 8px;
	padding: 0.75rem 1rem;
	width: auto;
	z-index: 100000;
	box-shadow: 0 0 0 2px var(--gz-color-brand);
}

/* 4. 레이아웃
   -------------------------------------------------------------------------- */
/* box-sizing: border-box 이므로 max-width 에 좌우 여백을 더해야
   안쪽 콘텐츠 폭이 정확히 --gz-container 가 됩니다.
   --gz-gutter 가 화면폭별로 바뀌므로 자동으로 따라갑니다. */
.container {
	width: 100%;
	max-width: calc(var(--gz-container) + var(--gz-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gz-gutter);
}

.site-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gz-gap);
	padding-block: 2rem 4rem;
}

/* 그리드 칸이 내용 때문에 늘어나 가로 스크롤이 생기는 것을 막음 */
.site-main,
.widget-area {
	min-width: 0;
}

/* 글 상세 / 고정 페이지 / 404 의 본문은 읽기 좋은 폭으로 묶습니다.
   제목·대표 이미지·본문·태그·글 이동·댓글이 모두 이 폭 안에 들어옵니다.
   목록 화면은 제한하지 않아야 PC 에서 카드가 칸을 다 씁니다.

   `.gz-list-page` 를 빼는 이유: "인기 글 목록" 은 고정 페이지라 `page` 클래스가
   붙지만 화면은 홈 · 카테고리와 같은 목록입니다. 이 한 칸이 없으면 카드 목록이
   800px 로 좁아져 헤더보다 안쪽으로 들어가고 사이드바와의 틈이 벌어집니다.
   (클래스는 inc/template-tags.php 의 gatalzak_list_page_body_class()) */
.single .site-main,
.page:not(.gz-list-page) .site-main,
.error404 .site-main {
	/* margin-inline: auto 를 주면 그리드 아이템의 stretch 가 풀려 내용 크기로 줄어듭니다.
	   내용이 짧은 글에서도 폭이 고정되도록 width: 100% 를 함께 지정합니다. */
	width: 100%;
	max-width: var(--gz-content);
	margin-inline: auto;
}

/* 글이 없을 때 안내문도 한 줄 길이 제한 */
.no-results .page-content,
.error-404 .page-content {
	max-width: var(--gz-content);
}

/* 사이드바는 PC 에서만 오른쪽. 그 아래 화면폭에서는 본문 다음에 세로로 쌓임 */
@media (min-width: 1024px) {
	.site-content.has-sidebar {
		grid-template-columns: minmax(0, 1fr) var(--gz-sidebar);
	}
}

/* 5. 헤더 / 내비게이션
   --------------------------------------------------------------------------
   모바일·태블릿(1023px 이하): 한 줄 헤더 [검색 아이콘 | 로고 | 햄버거]
   PC(1024px 이상): 1단 로고 가운데 + 2단 가로 메뉴
   두 경우 모두 헤더 아래에 퍼플 2px 보더가 전체 너비로 깔립니다.
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	padding-bottom: 5px; /* 3색 띠 자리를 미리 확보해 레이아웃이 흔들리지 않게 */
	background: var(--gz-color-bg);
}

/* 헤더 아래 3색 띠 — 블랙 | 퍼플 | 핑크 를 정확히 3등분.
   헤더 맨 아래에 붙으므로 모바일에서 메뉴나 검색창이 펼쳐지면 그 아래로 함께 내려갑니다.
   메뉴가 지정되지 않아도 항상 보입니다.
   장식 요소라 핑크와 퍼플을 맞붙여 쓰는 색상 규칙의 예외입니다 (CLAUDE.md 참고). */
.site-header::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 5px;
	/* 색마다 시작 · 끝 위치를 둘 다 지정해 경계가 그라데이션 없이 딱 끊깁니다 */
	background: linear-gradient(
		to right,
		var(--gz-band-1) 0 25%,
		var(--gz-band-2) 25% 50%,
		var(--gz-band-3) 50% 75%,
		var(--gz-band-4) 75% 100%
	);
}

/* 좌우 아이콘 칸을 48px 로 고정해 로고가 항상 화면 정중앙에 오게 함.
   아이콘이 하나만 있어도 가운데가 밀리지 않습니다. */
.site-header__bar {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 48px;
	align-items: center;
	column-gap: 0.5rem;
	row-gap: 0; /* 펼친 검색창이 2행으로 내려올 때 위쪽에 빈틈이 생기지 않게 */
	min-height: 56px;
	padding-block: 0.5rem;
}

.site-branding {
	grid-column: 2;
	justify-self: center;
	min-width: 0;
}

/* 홈 화면에서 로고를 감싸는 h1 — 제목 기본 여백을 없앰 */
.site-logo {
	margin: 0;
	line-height: 0;
}

.custom-logo-link {
	display: block;
	line-height: 0;
}

/* 로고는 height 로만 크기를 정하고 width 는 비율에 맡깁니다.
   img 의 width/height 속성이 남아 있어 로딩 중에도 자리가 잡혀 있습니다. */
.custom-logo {
	display: block;
	width: auto;
	height: 50px;
	max-width: 100%;
}

/* 로고를 등록하지 않았을 때 쓰는 사이트 제목 */
.site-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.site-title a {
	color: var(--gz-color-brand);
	text-decoration: none;
}

/* 아이콘 버튼 — 터치 영역 44x44, 아이콘은 인라인 SVG */
.header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gz-touch);
	height: var(--gz-touch);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--gz-radius);
	color: var(--gz-color-text);
	cursor: pointer;
}

.header-icon:hover,
.header-icon:focus-visible {
	color: var(--gz-color-brand);
}

.header-icon--search {
	grid-column: 1;
	justify-self: start;
}

.header-icon--menu {
	grid-column: 3;
	justify-self: end;
}

/* 메뉴가 열리면 햄버거가 X 로 바뀜 */
.menu-toggle .header-icon__close {
	display: none;
}

.menu-toggle[aria-expanded="true"] .header-icon__bars {
	display: none;
}

.menu-toggle[aria-expanded="true"] .header-icon__close {
	display: block;
}

/* 펼침 영역 — 메뉴와 검색은 한 번에 하나만 열립니다(JS 가 보장) */
.main-navigation,
.header-search {
	display: none;
	border-top: 1px solid var(--gz-color-border);
}

.main-navigation.is-open,
.header-search.is-open {
	display: block;
}

/* 펼친 검색창은 바 아래 2행에 전체 폭으로 */
.header-search {
	grid-column: 1 / -1;
	padding-block: 0.75rem 1rem;
}

.main-navigation {
	padding-bottom: 0.5rem;
}

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

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--gz-touch);
	padding-block: 0.25rem;
	color: var(--gz-color-text);
	text-decoration: none;
	font-size: 1.0625rem;
}

/* 펼침 버튼과 글자가 겹치지 않게 오른쪽 자리를 비워 둠 */
.main-navigation .menu-item-has-children > a {
	padding-right: calc(var(--gz-touch) + 0.25rem);
}

/* 현재 보고 있는 메뉴는 핑크 + 굵게 (색만으로 구분하지 않음).
   퍼플은 본문 블랙과 명암비가 1.5:1 이라 어느 항목이 켜져 있는지 알아보기 어렵습니다. */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	color: var(--gz-color-accent);
	font-weight: 700;
}

/* 하위 메뉴 펼침 버튼 — 터치로 열고 닫음 (호버 없음) */
.submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gz-touch);
	height: var(--gz-touch);
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.submenu-toggle__icon {
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.15s ease;
}

.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon {
	transform: translateY(2px) rotate(-135deg);
}

.main-navigation .sub-menu {
	display: none;
	padding-left: 1rem;
}

.main-navigation .menu-item-has-children.is-open > .sub-menu {
	display: block;
}

/* 태블릿 — 로고를 모바일(50px)보다 조금 키웁니다.
   바 높이는 로고 + 위아래 여백(8px)이 들어가도록 잡습니다. */
@media (min-width: 768px) {
	.site-header__bar {
		min-height: 68px;
	}

	.custom-logo {
		height: 52px;
	}
}

/* PC — 1단: 검색창(왼쪽) + 로고(가운데), 2단: 가로 메뉴.
   예외가 둘 있고, 둘 다 아래 규칙을 비켜 가서 모바일 기본 스타일(펼침 메뉴)을 물려받습니다.
     body.single-post  글 상세 — 본문에 집중하도록 한 줄 헤더
     body.gz-hub-page  허브 페이지 — SNS 프로필에서 들어온 사람이 보는 휴대폰 화면과 같게 */
@media (min-width: 1024px) {
	body:not(.single-post):not(.gz-hub-page) .header-icon {
		display: none;
	}

	/* 양쪽 1fr 이 같은 폭이라 가운데 auto 칸(로고)이 화면 정중앙에 놓입니다.
	   허브 페이지는 PC 에서도 모바일과 같은 헤더를 쓰므로 비켜 갑니다. */
	body:not(.gz-hub-page) .site-header__bar {
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		min-height: 0;
		padding-block: 20px;
	}

	body:not(.gz-hub-page) .site-branding {
		grid-column: 2;
	}

	/* 검색창은 1단 왼쪽 칸의 시작 정렬.
	   컨테이너 안쪽 왼쪽 끝선(메뉴 첫 항목 시작, 3색 띠 왼끝)과 맞습니다. */
	body:not(.gz-hub-page) .header-search {
		display: block;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		width: 220px;
		padding-block: 0;
		border-top: 0;
	}

	/* 로고 높이 72px = 폭 273px 로 컨테이너(1200px)의 22.7% 입니다.
	   90px 일 때는 28.4% 를 차지해 헤더만 205px 이었고, 900px 화면에서
	   첫 카드가 화면 4분의 1 아래에서 시작했습니다.
	   로고 이미지 안에 태그라인 글자가 들어 있어 이보다 더 줄이면 읽기 어려워집니다. */
	body:not(.gz-hub-page) .custom-logo {
		height: 72px;
	}

	/* 3색 띠를 컨테이너 안쪽 폭에 맞춤.
	   .site-header 가 화면 전체 너비이므로 아래 계산식이
	   .container 의 안쪽 폭과 정확히 같은 값이 됩니다. */
	.site-header::after {
		inset-inline: auto;
		left: 50%;
		width: min(var(--gz-container), 100% - var(--gz-gutter) * 2);
		transform: translateX(-50%);
	}

	body:not(.single-post):not(.gz-hub-page) .main-navigation {
		display: block;
		padding-bottom: 0;
		border-top: 0;
	}

	/* 컨테이너 폭을 꽉 채워 양끝 정렬 + 등간격.
	   링크에 좌우 padding 이 없고 submenu-toggle 도 숨기므로
	   첫 항목 왼쪽과 마지막 항목 오른쪽이 컨테이너 끝선과 정확히 맞습니다.
	   클릭 영역은 링크의 min-height(44px)가 담당합니다. */
	body:not(.single-post):not(.gz-hub-page) .main-navigation > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		column-gap: 1rem;  /* 항목이 서로 붙지 않게 하는 최소 간격 */
		row-gap: 0.25rem;  /* 항목이 많아 줄바꿈될 때만 쓰임 */
		padding-bottom: 10px;  /* 메뉴와 3색 띠 사이 간격 */
	}

	/* PC 메뉴 글자 크기 (1단 메뉴만) */
	body:not(.single-post):not(.gz-hub-page) .main-navigation > ul > li > a {
		font-size: 1.25rem;
		font-weight: 600;
		transition: color 0.15s ease;
	}

	/* 1단 항목은 글자색만 바뀝니다 (배경 없음).
	   현재 항목과 같은 핑크를 써서 호버할 때 색이 튀지 않게 합니다.
	   하위 메뉴는 퍼플 틴트 배경 위라 아래에서 퍼플을 그대로 씁니다. */
	body:not(.single-post):not(.gz-hub-page) .main-navigation > ul > li > a:hover,
	body:not(.single-post):not(.gz-hub-page) .main-navigation > ul > li > a:focus-visible {
		color: var(--gz-color-accent);
	}

	body:not(.single-post):not(.gz-hub-page) .main-navigation .submenu-toggle {
		display: none;
	}

	body:not(.single-post):not(.gz-hub-page) .main-navigation .menu-item-has-children > a {
		padding-right: 0;
	}

	/* 양끝 정렬이라 첫 항목은 왼쪽 끝에 붙습니다.
	   가운데 기준으로 열면 화면 밖으로 넘치므로 왼쪽 기준을 기본으로 씁니다. */
	body:not(.single-post):not(.gz-hub-page) .main-navigation .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 100;
		min-width: 220px;
		padding: 0.5rem 0;
		background: var(--gz-color-bg);
		border: 1px solid var(--gz-color-border);
		border-radius: var(--gz-radius);
		box-shadow: 0 6px 16px var(--gz-color-shadow);
		overflow: hidden; /* 호버 배경이 둥근 모서리 밖으로 삐져나오지 않게 */
	}

	/* 마지막 항목만 오른쪽 기준으로 열어 오른쪽으로 넘치지 않게.
	   :last-child 라서 메뉴 항목 수가 바뀌어도 그대로 적용됩니다. */
	body:not(.single-post):not(.gz-hub-page) .main-navigation > ul > li:last-child > .sub-menu {
		left: auto;
		right: 0;
	}

	body:not(.single-post):not(.gz-hub-page) .main-navigation li:hover > .sub-menu,
	body:not(.single-post):not(.gz-hub-page) .main-navigation li:focus-within > .sub-menu {
		display: block;
	}

	body:not(.single-post):not(.gz-hub-page) .main-navigation .sub-menu a {
		min-height: 0;
		padding: 0.5rem 1rem;
		font-size: 0.9375rem; /* 하위 메뉴는 1단보다 조금 작게 */
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	/* 하위 항목은 배경까지 바뀝니다. 링크가 블록 레벨이라 좌우 끝까지 꽉 찹니다. */
	body:not(.single-post):not(.gz-hub-page) .main-navigation .sub-menu a:hover,
	body:not(.single-post):not(.gz-hub-page) .main-navigation .sub-menu a:focus-visible {
		background: var(--gz-color-brand-tint);
		color: var(--gz-color-brand);
	}

	/* 글 상세 전용 — 한 줄 헤더 [검색창 | 로고 | 햄버거].
	   글 상세에도 사이드바가 생겨 콘텐츠 폭이 다른 화면과 같은 1200px 이므로
	   헤더도 같은 기준선을 씁니다. 메뉴는 펼치지 않고 햄버거 안에 둡니다. */
	.single-post .header-search {
		width: 200px;
	}

	/* 검색창이 항상 보이므로 검색 아이콘만 숨기고 햄버거는 그대로 보입니다.
	   햄버거의 grid-column: 3 / justify-self: end 는 모바일 기본 규칙을 그대로 씁니다. */
	.single-post .header-icon--search {
		display: none;
	}
}


/* 6. 글 목록 (홈 / 카테고리 / 검색)
   -------------------------------------------------------------------------- */
.page-header {
	margin-bottom: 1.5rem;
}

/* 목록 고정 페이지(인기 글 목록 · 추천 글 목록)의 머리말은
   **어느 폭에서도 화면에 보이지 않습니다.**
   바로 위 정렬 탭이 "지금 어느 목록" 을 이미 알려 주므로
   "많이 본 글 / 인기 글" 처럼 같은 말이 두 번 나옵니다.

   **제목(h1)은 지우지 않고 화면 밖으로 밀어냅니다.** display: none 으로 지우면
   검색엔진과 스크린리더에서 "이 화면이 무엇인지" 가 함께 사라집니다
   (카테고리 뱃지에서와 같은 생각입니다). 작은 라벨은 장식이라 그냥 없앱니다. */
.gz-list-page .page-header {
	margin-bottom: 0;
}

.gz-list-page .page-header__label {
	display: none;
}

.gz-list-page .page-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

.page-title {
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	margin: 0 0 0.5rem;
}

/* 카테고리 · 태그 보관함 제목 위의 작은 라벨.
   워드프레스 기본 접두사("[카테고리:]")를 없애고 이 라벨로 대신합니다. */
.page-header__label {
	margin: 0 0 0.25rem;
	color: var(--gz-color-accent);
	font-size: 0.875rem;
	font-weight: 700;
}

/* 제목 옆 글 개수. 제목이 크고 굵으므로 여기서 되돌립니다. */
.page-header__count {
	color: var(--gz-color-muted);
	font-size: 0.875rem;
	font-weight: 400;
}

.archive-description {
	margin-top: 0.75rem;
	color: var(--gz-color-muted);
}

/* 같은 묶음의 카테고리 뱃지 (카테고리 화면 머리말 안)

   묶음은 주 메뉴가 정합니다 — gatalzak_category_siblings() 참고.
   항목이 많아도 가로 스크롤 대신 줄바꿈합니다. 스크롤이면 화면 밖 항목을 놓칩니다. */
/* 뱃지 위의 묶음 이름 — 모바일 · 태블릿에서만 보입니다.
   그 폭에서는 주 메뉴가 햄버거 안에 숨어 있어 화면에 묶음이 드러나지 않습니다.
   제목(h1)은 감춰져 있으므로 이 줄이 제목 자리를 대신하고 크기도 같습니다. */
.page-header__group {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	font-weight: 700;
	line-height: 1.3;
}

.gz-cat-badges {
	margin-top: 0;
}

/* PC 는 메뉴 바가 늘 보이므로 묶음 이름을 또 쓰지 않습니다 */
@media (min-width: 1024px) {
	.page-header__group {
		display: none;
	}
}

.gz-cat-badges__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gz-cat-badge {
	display: block;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
	color: var(--gz-color-text);
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
}

/* 링크 호버는 핑크 (밑줄이 없는 대신 색으로 알립니다) */
.gz-cat-badge:hover,
.gz-cat-badge:focus-visible {
	border-color: var(--gz-color-accent);
	color: var(--gz-color-accent);
}

/* 지금 보고 있는 카테고리. 주 메뉴의 현재 항목과 같은 규칙(핑크 + 굵게)입니다 */
.gz-cat-badge.is-active {
	background: var(--gz-color-accent);
	border-color: var(--gz-color-accent);
	color: var(--gz-color-bg);
	font-weight: 700;
}

/* 활성 뱃지 안의 글 개수. 숫자가 이름보다 세게 보이지 않도록 한 단계 연하게 */
.gz-cat-badge__count {
	opacity: 0.75;
	font-weight: 400;
}

.gz-cat-badge.is-active:hover,

.gz-cat-badge.is-active:focus-visible {
	background: var(--gz-color-accent-hover);
	border-color: var(--gz-color-accent-hover);
	color: var(--gz-color-bg);
}

/* 모바일 1열 -> 태블릿 2열 -> PC 2열(사이드바 있음) / 3열(없음) */
.post-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gz-card-gap);
}

@media (min-width: 768px) {
	.post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* PC 는 **3열이 기본**이고, 사용자 정의하기 > 목록 디자인에서 2열로 바꿀 수 있습니다
   (`body.gz-cols-2`). 기본값은 `GATALZAK_LIST_COLUMNS_DEFAULT` 와 같아야 합니다 —
   설정을 건드린 적 없는 사이트에서 클래스와 CSS 가 어긋납니다.

   **1200px 미만에는 설정이 닿지 않습니다 — 거기까지는 2열입니다.** 태블릿에서 3열이면
   카드가 너무 좁아 썸네일과 제목이 뭉갭니다 (아이패드 세로 1024px 에서 확인).
   사이드바가 1024px 부터 붙어 본문 폭을 300px 가져가는 것도 겹칩니다. */
@media (min-width: 1200px) {
	.post-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.gz-cols-2 .site-content.has-sidebar .post-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 3열에서는 카드가 273px(글 칸 241px)이라 **20px 제목이 세 줄로 넘어갑니다.**
	   제목 크기가 `vw` 로 커지는 clamp 라 카드가 좁아진 것을 모릅니다.
	   **16px 입니다** — 묶음 안 제휴 · 이슈 카드 제목과 같은 크기라 한 화면에서
	   제목 크기가 두 가지로 보이지 않습니다.
	   2열(카드 420px)은 글 칸이 388px 이라 20px 그대로 둡니다. */
	.gz-cols-3 .post-card .entry-title {
		font-size: 1rem;
	}

	/* 사용자 정의하기 > 목록 디자인 > "카드에 요약글 보이기" 를 끈 경우.
	   **끌 때만 클래스가 붙습니다** — 기본값은 CSS 를 건드리지 않습니다.
	   열 수 설정과 같이 **1200px 이상에만** 닿습니다. 좁은 화면은 카드가 가로를
	   다 써서 요약글이 제 구실을 하므로 뺄 이유가 없습니다. */
	.gz-no-excerpt .post-card .entry-summary {
		display: none;
	}
}

.post-card {
	/* 순위 번호를 왼쪽 위에 얹기 위한 기준입니다 (.post-card__rank). */
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--gz-color-bg);
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
	overflow: hidden;
}

/* 카테고리 화면에 끼워 넣는 제휴 글 · 이슈 글 (inc/cross-posts.php)
   --------------------------------------------------------------------------
   **가로형 카드**입니다 — 왼쪽 썸네일, 오른쪽 글.
   목록 카드(세로형)와 섞이지 않도록 가로 한 줄을 다 씁니다.

   카드를 바깥 그리드에 직접 넣지 않고 **묶음(.post-card-cross-group)으로 감쌉니다.**
   목록이 2열일 수도 3열일 수도 있어 **카드 두 장이 1.5칸씩 차지할 수가 없기** 때문입니다.
   묶음 하나가 바깥 칸 하나를 차지하고, 안에서 자체 그리드로 나누면 바깥 열 수와
   상관없이 언제나 "2열씩" 이 지켜집니다.

   768px 미만(1열)에서는 들어갈 자리가 넓은 화면과 달라, PHP 가 넘겨 준 `--gz-cross-row`
   줄에 끌어올려 놓습니다. HTML 은 넓은 화면 기준으로 한 번만 나갑니다.
   -------------------------------------------------------------------------- */
.post-card-cross-group {
	/* 2열 · 3열 어디서나 가로를 다 씁니다. */
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/* **바깥 목록과 같은 토큰입니다.** 따로 적으면 묶음 안쪽만 간격이 달라져
	   카드 줄이 어긋나 보입니다. */
	gap: var(--gz-card-gap);
}

/* **묶음 안쪽이 2열이 되는 것은 목록이 3열이 되는 폭부터입니다.**
   그 아래(태블릿 · 모바일)에서는 1열로 쌓입니다 — 2열로 두면 카드가 반 토막이 나
   썸네일 옆 글 칸이 백 몇십 px 밖에 안 됩니다 (아이패드 세로에서 글자가 겹쳤습니다). */
@media (min-width: 1200px) {
	.post-card-cross-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 카드 두 장이 한 줄을 나눠 쓰면서 **카드가 가로 전체 때의 절반**이 됩니다
	   (1280px 화면에서 860px -> 418px). 그래서 묶음 안에서는 글 칸 셈이 다릅니다.

	   제목 크기가 `vw` 로 커지는 값이라 그대로 두면 418px 카드에 20px 제목이 들어가
	   한글 제목이 열 글자 만에 두 줄로 넘어가고 잘립니다. 글 칸을 넓히고
	   제목을 한 단계 내립니다. **1열로 쌓이는 폭에서는 카드가 가로를 다 써서
	   이 보정이 필요 없습니다.** */
	.post-card-cross-group .post-card__cross-body {
		padding: 0.875rem 1.25rem 0.875rem 1.5rem;
	}

	.post-card-cross-group .post-card__cross-title {
		font-size: 1rem;
	}
}

/* **태블릿은 묶음이 1열이라 카드가 가로를 다 씁니다** (1024px 화면에서 605px).
   그래서 셈이 둘 다 달라집니다.

   썸네일 45% 는 그 폭에서 272px 짜리 큰 그림이 되어 카드가 사진에 먹힙니다.
   40% 로 줄여 글 칸을 280 -> 311px 로 넓히고, 거기에 **요약글까지** 넣습니다.

   제목 크기는 `vw` 로만 커지는 clamp 라 **카드가 커진 것을 모릅니다**(18.6px).
   큰 썸네일 옆에서 작아 보여, 같은 화면 목록 카드 제목(19.6px)에 맞춥니다.
   1200px 부터는 카드가 절반으로 줄어 썸네일 45% · 제목 16px · 요약글 없음으로
   돌아갑니다. */
@media (min-width: 768px) and (max-width: 1199px) {
	.post-card-cross-group .post-card__cross {
		grid-template-columns: 40% 60%;
	}

	.post-card-cross-group .post-card__cross-title {
		font-size: 1.25rem;
	}

	/* 제목 · 카테고리 다음입니다 (마크업 순서가 곧 화면 순서). */
	.post-card-cross-group .post-card__cross-summary {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		margin-top: 0.35rem;
		color: var(--gz-color-muted);
		font-size: 0.9375rem;
		line-height: 1.5;
		word-break: normal;
	}
}

/* **1열로 쌓이는 폭에서는 묶음마다 3장까지만 보여 줍니다.**
   넓은 화면은 묶음마다 4장(한 행 2장 x 2행)이지만, 1열에서 그대로 쌓이면
   가로형 카드 여덟 장이 줄줄이 이어져 목록이 통째로 묻힙니다.
   PHP 로 거르지 않는 이유: 폭에 따라 달라지는 일이라 서버에서 정하면 한 화면에서만
   맞고 다른 쪽이 틀어집니다 (사이드바 추천글 · 인기글과 같은 방식). */
@media (max-width: 1199px) {
	.post-card-cross-group .post-card--cross:nth-child(n + 4) {
		display: none;
	}
}

.post-card__cross {
	display: grid;
	/* 어느 폭에서나 45% 입니다. 폭마다 다르게 두면 덮어쓰기가 늘기만 합니다. */
	grid-template-columns: 45% 55%;
	/* 썸네일이 카드 높이를 다 쓰므로 가운데로 띄우지 않습니다 (아래 썸네일 규칙). */
	align-items: stretch;
	/* **링크가 카드 높이를 다 차지하게 합니다.** 카드(.post-card)는 세로 flex 이고
	   한 행의 카드들은 바깥 그리드가 높이를 맞춰 주는데, 그 늘어난 높이는 카드에만
	   생깁니다. 이걸 빠뜨리면 제목이 짧은 카드에서 **썸네일 아래에 빈 자리가 남습니다**
	   (실측 41px). */
	flex-grow: 1;
	color: inherit;
}

.post-card__cross-thumb {
	display: block;
	/* 대표 이미지가 없는 글을 끼워 넣어도 카드 높이가 같습니다. */
	aspect-ratio: 16 / 9;
	/* **폭을 칸에 묶습니다.** 아래 `height: 100%` 로 높이가 정해지면 `aspect-ratio` 가
	   거기서 폭까지 끌어내 칸을 넘칩니다 — 30% 로 적어도 34% 로 나왔습니다
	   (제목이 길어 카드가 높아진 카드에서만 그래서 더 헷갈립니다).
	   폭을 못박아도 **칸 높이를 정하는 일은 그대로 `aspect-ratio` 가 합니다** —
	   줄 높이를 잴 때는 `height: 100%` 가 아직 정해지지 않아 비율이 살아납니다. */
	width: 100%;
	min-width: 0;
	/* **썸네일이 카드 위아래 테두리에 닿습니다.**
	   제목이 길어 칸이 높아지면 16:9 를 버리고 그 높이를 그대로 채웁니다 —
	   비율을 지키면 위아래에 빈 자리가 남습니다 (폭과 높이가 모두 정해지면
	   `aspect-ratio` 는 비켜섭니다). 제목이 짧을 때는 높이가 정해지지 않아
	   비율이 그대로 살아나므로 썸네일이 납작해지지 않습니다. */
	height: 100%;
	background: var(--gz-color-surface);
	overflow: hidden;
}

.post-card__cross-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__cross-body {
	display: block;
	min-width: 0;
	/* **글은 세로 가운데에 놓습니다.** 그리드가 `align-items: stretch` 라
	   (썸네일이 카드 높이를 다 쓰게 하려고) 그냥 두면 글 칸도 늘어나
	   **제목이 위쪽에 붙습니다.** 썸네일보다 글이 짧은 카드에서 눈에 띕니다. */
	align-self: center;
	padding: 0.75rem 1rem;
}

/* **어느 폭에서도 줄 수를 제한하지 않습니다.** 썸네일이 45% 를 가져가 글 칸이
   좁아(1024px 에서도 186px) 두 줄로 묶으면 긴 제목이 금방 `…` 로 잘려 무슨 글인지
   알 수가 없습니다. 제목이 길어지면 카드가 세로로 늘어나는 쪽을 택합니다 —
   한 행 안의 카드들은 그리드가 높이를 맞춰 주므로 줄이 어긋나지 않습니다. */
.post-card__cross-title {
	display: block;
	/* 목록 카드 제목(17 → 20px)보다 **좁은 화면에서 2px 작습니다** (375px 15px).
	   가로형이라 글 칸이 카드의 60% 뿐이라 같은 크기로는 제목이 금방 두 줄로 넘어갑니다.
	   넓은 화면에서는 20px 로 같아집니다 — 거기서는 칸이 충분합니다. */
	font-size: clamp(0.9375rem, 0.808rem + 0.553vw, 1.25rem);
	font-weight: 700;
	line-height: 1.4;
	/* 좁은 칸이라 어절 단위로 끊으면 오른쪽에 큰 여백이 남습니다. */
	word-break: normal;
}

/* 좁은 화면(1열)은 **제목만** 보여 줍니다. 카드가 짧아야 목록이 안 묻힙니다.
   카테고리는 768px 부터, 요약글은 **묶음이 1열로 쌓이는 폭(768~1199px)에서만**
   나옵니다 — 1200px 부터는 묶음이 2열이라 글 칸이 186px 뿐이라 몇 글자 만에 잘립니다. */
.post-card__cross-meta,
.post-card__cross-summary {
	display: none;
}

/* 좁은 화면 전용 — 제목 하나만 들어가는 카드라 넓은 화면과 셈이 다릅니다. */
@media (max-width: 767px) {
	/* 제목만 들어가는 칸이라 여백을 줄입니다 (세로 가운데는 기본 규칙에 있습니다). */
	.post-card__cross-body {
		padding: 0.5rem 0.875rem;
	}

	.post-card__cross-title {
		line-height: 1.35;
	}
}

@media (min-width: 768px) {
	/* 썸네일과 글이 붙어 보이지 않게 안쪽 여백을 키웁니다.
	   **grid 에 column-gap 을 주지 않습니다** — 칸이 40% + 60% 라 간격을 더하면
	   합이 100% 를 넘어 카드 밖으로 밀려납니다. 썸네일은 정확히 40% 로 두고
	   글 쪽 왼쪽 여백만 넓히는 쪽이 안전합니다. */
	.post-card__cross-body {
		padding: 1rem 1.5rem 1rem 1.75rem;
	}

	.post-card__cross-meta {
		display: block;
		margin-top: 0.35rem;
		color: var(--gz-color-accent);
		font-size: 0.8125rem;
		font-weight: 700;
	}

}

/* 1200px 미만에서는 들어갈 자리가 다릅니다. PHP 가 센 줄로 끌어올립니다.
   HTML 상의 자리는 **설정된 열 수(넓은 화면)** 기준이라, 2열 · 1열에서는 한참
   아래로 밀립니다. 줄 번호는 "글 2줄 뒤" 라서 **열 수와 상관없이 3 · 6** 입니다 —
   줄은 어디서나 줄이기 때문입니다.
   줄 번호를 받는 것은 카드가 아니라 **묶음**입니다 — 묶음이 그리드 칸 하나라
   카드를 몇 장 담든 셈이 그대로입니다.
   `--gz-cross-row` 가 0 이면(글이 자리보다 적어 끝에 붙은 묶음) 손대지 않습니다. */
@media (max-width: 1199px) {
	.post-card-cross-group {
		grid-row: var(--gz-cross-row);
	}

	.post-card-cross-group[style*="--gz-cross-row:0"] {
		grid-row: auto;
	}
}

/* 순위 번호 — 인기 글 목록처럼 순서가 뜻을 갖는 화면에서만 붙습니다
   (`gatalzak_rank()` 로 켠 화면. 홈 · 카테고리 · 검색에는 나오지 않습니다).
   **사이드바 인기글의 순위 번호와 같은 모양**이라 두 곳이 따로 놀지 않습니다.
   대표 이미지가 없는 카드에도 같은 자리에 놓이도록 카드 기준으로 띄웁니다. */
.post-card__rank {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	min-width: 1.75em;
	padding: 0.15em 0.4em;
	background: var(--gz-color-brand);
	color: var(--gz-color-bg);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* 썸네일 비율을 대표 이미지 규격(16:9)으로 고정.
   이미지가 늦게 와도 자리를 미리 잡아 레이아웃이 밀리지 않습니다(CLS 방지). */
.post-card .post-thumbnail {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--gz-color-surface);
}

.post-card .post-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem 1rem;
}

.post-card .entry-header {
	margin: 0;
}

.post-card .entry-title {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	margin: 0 0 0.35rem;
	/* 본문과 같이 글자 단위로 줄바꿈해 좁은 카드에서 오른쪽이 비지 않게.
	   영문 단어는 그대로 붙어 있고 한글만 채워집니다. */
	word-break: normal;
}

.post-card .entry-title a {
	color: var(--gz-color-text);
	text-decoration: none;
}

.post-card .entry-title a:hover {
	color: var(--gz-color-accent);
}

.post-card .entry-summary {
	margin: 0;
}

/* 카드 높이를 고르게 맞추려고 요약글을 3줄로 제한.
   본문(1.75)보다 좁은 행간을 써서 3줄이 한 덩어리로 읽히게 합니다. */
.post-card .entry-summary p {
	/* 요약글은 카드의 보조 정보라 본문(17px)보다 한 단계 작게 둡니다.
	   모바일은 카드가 가로를 다 써서 한 줄이 길어지므로 14px 로 한 번 더 줄이고,
	   태블릿(약 714px)부터 15px 로 고정됩니다. 제목과의 크기 차이도 이때 뚜렷해집니다. */
	font-size: clamp(0.875rem, 0.8125rem + 0.28vw, 0.9375rem);
	line-height: 1.5;
	/* 제목과 같은 이유로 글자 단위 줄바꿈 */
	word-break: normal;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--gz-color-muted);
}

.entry-summary p {
	margin: 0.5rem 0 0;
	color: var(--gz-color-muted);
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	font-size: 0.875rem;
	color: var(--gz-color-muted);
}

.entry-meta a {
	color: inherit;
}

/* 카테고리 라벨만 포인트 핑크.
   위 .entry-meta a 와 우선순위가 같으므로 반드시 뒤에 와야 적용됩니다. */
.cat-links a {
	color: var(--gz-color-accent);
}

.cat-links a:hover,
.cat-links a:focus-visible {
	color: var(--gz-color-accent-hover);
}

/* 7. 글 상세 본문
   -------------------------------------------------------------------------- */
/* 아래 두 규칙은 글 한 편의 제목 영역만 노립니다.
   `.gz-list-page` 를 빼지 않으면 "인기 글 목록" 의 카드 제목까지
   36px 로 커지고 제목 아래 여백이 24px 로 벌어집니다. */
.single .entry-header,
.page:not(.gz-list-page) .entry-header {
	margin-bottom: 1.5rem;
}

/* 제휴 글 고지 문구 — 제목 위 회색 띠 (inc/template-tags.php)
   본문이 아니라 안내 글이라 연한 배경으로 한 단 낮춰 둡니다.
   광고가 아니므로 퍼플 · 핑크를 쓰지 않는 규칙과는 무관합니다. */
.gz-affiliate-notice {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border-radius: 5px;
	background: var(--gz-color-surface);
	color: var(--gz-color-muted);
	font-size: 0.875rem;
	line-height: 1.7;
	text-align: center;
	word-break: keep-all;
}

.single .entry-title,
.page:not(.gz-list-page) .entry-title {
	font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
	margin-bottom: 0.5rem;
	/* 글자가 커서 어절 하나가 길다. keep-all 로 두면 오른쪽에 한 어절만큼
	   큰 여백이 남는다. 글자 단위로 채워 줄 끝을 맞춘다 (본문 · 카드와 같은 처리).
	   영문 단어는 normal 에서도 통째로 남아 중간에 잘리지 않는다. */
	word-break: normal;
}

figure.post-thumbnail {
	margin: 0 0 2rem;
	aspect-ratio: 16 / 9;
	background: var(--gz-color-surface);
	border-radius: var(--gz-radius);
	overflow: hidden;
}

figure.post-thumbnail img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry-content > * {
	margin-block: 0 1.25em;
	max-width: 100%;
}

/* 본문 속 링크는 퍼플, 밑줄 없음. 호버하면 핑크로 바뀝니다.
   퍼플과 블랙은 명암비가 1.5:1 이라 색만으로는 링크가 잘 구분되지 않으므로
   본문에서 링크를 쓸 때는 "자세히 보기" 처럼 링크임을 알 수 있는 글로 씁니다. */
.entry-content a {
	color: var(--gz-color-brand);
	text-decoration: none;
}

.entry-content a:hover,
.entry-content a:focus-visible {
	color: var(--gz-color-accent);
}

/* 본문 문단만 글자 단위로 줄바꿈해 오른쪽 끝까지 채움.
   body 의 keep-all 은 그대로 두고 여기서만 풀기 때문에
   제목·메뉴·목차·버튼·카드 제목은 계속 어절 단위로 줄이 바뀝니다.
   양쪽 정렬(justify)과 letter-spacing/word-spacing 을 쓰지 않으므로
   자간과 띄어쓰기 간격은 변하지 않습니다. */
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content blockquote,
/* **소제목도 넣습니다.** 글자가 커서 한 줄에 몇 어절 안 들어가는데, 어절 단위로만
   끊으면 오른쪽에 큰 여백이 남아 제목이 한가운데서 끊긴 것처럼 보입니다
   (좁은 화면일수록 심합니다). 글 상세 `h1` 도 같은 이유로 `normal` 입니다. */
.entry-content h2,
.entry-content h3 {
	word-break: normal;
}

.entry-content h2 {
	/* 모바일 375px 23px → PC 1024px 이상 25px */
	font-size: clamp(1.4375rem, 1.365rem + 0.308vw, 1.5625rem);
	margin-top: 2.5em;
}

.entry-content h3 {
	/* 모바일 375px 20px → PC 1024px 이상 21px */
	font-size: clamp(1.25rem, 1.214rem + 0.154vw, 1.3125rem);
	margin-top: 2em;
}

/* 목록은 불릿·아이콘까지 문단과 왼쪽 끝이 같아 덩어리로 구분되지 않습니다.
   바깥으로 조금 들여써서 "여기부터 목록" 이 한눈에 들어오게 합니다.
   padding-left 는 불릿이 앉는 자리, margin-left 는 그 바깥의 들여쓰기입니다. */
.entry-content ul,
.entry-content ol {
	margin-left: var(--gz-list-indent);
	padding-left: 1.5em;
}

/* 하위 목록은 이미 부모 안쪽에 있으므로 더 들여쓰지 않습니다.
   단계마다 더하면 모바일에서 글자 칸이 금방 좁아집니다. */
.entry-content li ul,
.entry-content li ol {
	margin-left: 0;
}

.entry-content li + li {
	margin-top: 0.35em;
}

.entry-content blockquote {
	margin-inline: 0;
	padding: 0.75rem 1.25rem;
	border-left: 4px solid var(--gz-color-border);
	background: var(--gz-color-surface);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	/* **여기에 font-size 를 적지 않는다.** 표에 직접 적으면 편집창에서 고른
	   글자 크기가 닿지 못한다 — 그 값은 바깥 figure 에 붙어 상속으로 내려오는데,
	   상속은 직접 선언을 절대 이기지 못한다. 기본값은 아래 figure 쪽에 건다. */
}

/* 표 글자 크기는 **어디에도 적지 않는다.** body 에서 본문 크기(17px)를 그대로
   물려받는다.

   적지 않는 것이 중요하다.
   - 본문과 표가 **언제나** 같은 크기가 된다. 값을 두 곳에 적으면 한쪽만 고쳐진다
   - **표 블록은 글자 크기 설정을 지원한다.** 그 값은 바깥 figure 에 붙어 상속으로
     내려오는데 **상속은 직접 선언을 절대 이기지 못한다.** 표나 figure 에 기본값을
     적어 두면 편집창에서 크기를 골라도 아무 일도 일어나지 않는다 */

/* 세로는 **가운데 맞춤**입니다 (editor-style.css 와 같은 값).
   한 행 안에서 어떤 칸만 두 줄이 되면 위 맞춤에서는 한 줄짜리 칸들이 윗줄에
   붙어 칸 안이 아래로 치우쳐 보입니다. 글자가 칸의 중심에 놓이는 쪽이 읽기 좋습니다. */
.entry-content th,
.entry-content td {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--gz-color-border);
	vertical-align: middle;
}

/* 표 안 글자는 가운데가 기본입니다.
   **셀마다 고른 정렬이 이깁니다.** 편집창에서 정렬을 고르면 코어가 셀에
   has-text-align-* 클래스를 붙이는데, 그 규칙(0,1,0)보다 이 셀렉터(0,1,1)가
   세서 그냥 두면 고른 정렬을 덮어씁니다. 그래서 그 클래스가 없는 셀에만 겁니다. */
.entry-content th:not([class*="has-text-align"]),
.entry-content td:not([class*="has-text-align"]) {
	text-align: center;
}

.entry-content th {
	background: var(--gz-color-surface);
}

/* 넓은 표와 코드는 페이지 전체가 아니라 그 요소만 가로 스크롤 */
.wp-block-table,
.entry-content > table,
.entry-content pre,
.wp-block-code,
.wp-block-preformatted {
	max-width: 100%;
	overflow-x: auto;
}

/* 클래식 에디터에서 들어온 맨 표 (figure 로 감싸여 있지 않다) */
.entry-content > table {
	display: block;
}

/* --------------------------------------------------------------------------
   모바일 카드형 표 (4열 이상)

   4열 이상 표는 모바일에서 칸이 좁아 글자가 어절 중간에 끊기고 한 행이
   4~5줄로 늘어납니다. 그런 표만 **행 하나를 카드 한 장**으로 바꿉니다.
   3열 이하 표와 641px 이상 화면은 이 규칙에 닿지 않습니다.

   클래스(gz-card-table)와 data-label 은 inc/table-cards.php 가 **서버에서**
   붙입니다. HTML 이 도착할 때부터 완성형이라 레이아웃 밀림(CLS)이 없습니다.

   **글자 크기를 px 로 적지 않고 em 으로 둡니다.** 편집창에서 고른 글자 크기는
   바깥 figure 에 붙어 상속으로 내려오는데, px 로 박으면 그 설정이 카드에서
   죽습니다 (표 글자 크기 규칙과 같은 이유).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

	.entry-content .gz-card-table,
	.entry-content .gz-card-table tbody {
		display: block;
	}

	/* 머리줄은 **화면에서만** 감춥니다. 라벨로 이미 보이지만 표의 뼈대라
	   스크린리더에는 남겨 둡니다 (.screen-reader-text 와 같은 방식). */
	.entry-content .gz-card-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		border: 0;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* 행 하나 = 카드 한 장 */
	.entry-content .gz-card-table tbody tr {
		display: block;
		margin-bottom: 0.625rem;
		padding: 0.25rem 0.75rem;
		border: 1px solid var(--gz-color-border);
		border-radius: 8px;
	}

	.entry-content .gz-card-table tbody tr:last-child {
		margin-bottom: 0;
	}

	.entry-content .gz-card-table tbody td {
		display: block;
		padding: 0.4rem 0;
		border: 0;
		word-break: keep-all;
	}

	/* 첫 칸은 카드 제목 — 라벨 없이 굵은 퍼플 */
	.entry-content .gz-card-table tbody td:first-child {
		color: var(--gz-color-brand);
		font-size: 0.95em;
		font-weight: 700;
		text-align: left;
	}

	/* 나머지 칸 — 라벨(왼쪽 회색) | 값(오른쪽), 칸 사이 얇은 구분선 */
	.entry-content .gz-card-table tbody td[data-label] {
		display: flex;
		flex-wrap: wrap;
		gap: 0 0.75rem;
		align-items: baseline;
		justify-content: space-between;
		border-top: 1px solid var(--gz-color-border);
	}

	/* 라벨은 **값과 같은 크기 · 같은 색**이고 굵기만 다릅니다.
	   표의 머리줄에서 온 글자라 카드 안에서도 머리줄처럼 읽혀야 합니다.
	   작고 흐린 회색으로 두면 값보다 뒤로 물러나 무슨 항목인지 잘 안 보입니다.
	   크기와 색을 적지 않아 값과 함께 움직입니다 (편집창 글자 크기 설정 포함). */
	.entry-content .gz-card-table tbody td[data-label]::before {
		content: attr(data-label);
		flex: 0 1 auto;
		max-width: 55%;
		font-weight: 700;
		text-align: left;
	}

	/* 값은 오른쪽 정렬을 유지한 채 줄바꿈됩니다.
	   **기준 크기가 auto 라 "한 줄로 쓸 때의 길이" 로 자리를 따집니다.**
	   짧은 값은 라벨 오른쪽에 그대로 붙고, 라벨 옆에 다 못 들어가는 긴 값만
	   아랫줄로 내려가 카드 폭을 다 씁니다. 고정값(예: 11rem)으로 두면 짧은 값까지
	   줄줄이 내려가 표가 오히려 길어집니다 (실제로 겪었다).
	   값을 감싸는 span 은 inc/table-cards.php 가 넣습니다. */
	.entry-content .gz-card-table .gz-card-value {
		flex: 1 1 auto;
		min-width: 0;
		text-align: right;
	}
}

/* 클래식 에디터에서 들어온 맨 iframe(유튜브 등)도 화면 폭에 맞춤.
   블록 에디터 임베드는 responsive-embeds 테마 지원이 처리합니다. */
.entry-content > iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.entry-footer {
	margin-top: 2.5rem;
	font-size: 0.875rem;
	color: var(--gz-color-muted);
}

/* 본문 삽입용 내부링크 카드 — [gatalzak_link] 숏코드 (inc/link-card.php).
   본문 안에서만 쓰이므로 목록 스타일 앞, 글 상세 본문 섹션에 둡니다. */
.gz-link-card__label {
	margin: 0 0 0.35rem;
	color: var(--gz-color-accent);
	font-size: 0.875rem;
	font-weight: 700;
}

/* 모바일은 2행 — 위에 [썸네일 40% | 제목 60%], 아래에 요약글이 폭을 다 씁니다.
   좁은 칸에서 요약글이 몇 글자 만에 잘리지 않게 하려는 배치입니다.
   .entry-content 로 한 번 더 묶는 이유: 본문 링크 규칙(.entry-content a)이
   퍼플을 칠하는데 그쪽 우선순위가 더 높아서 제목까지 퍼플이 됩니다. */
.entry-content .gz-link-card {
	display: grid;
	grid-template-columns: 40% 1fr;
	grid-template-areas:
		"thumb title"
		"text  text";
	background: var(--gz-color-bg);
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
	overflow: hidden;
	color: var(--gz-color-text);
	text-decoration: none;
}

/* 목록 카드와 같은 16:9 비율이라 사진이 잘리지 않고,
   대표 이미지가 없는 글을 가리켜도 카드 모양이 그대로입니다. */
.gz-link-card__thumb {
	grid-area: thumb;
	aspect-ratio: 16 / 9;
	background: var(--gz-color-surface);
}

.gz-link-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 줄 수를 제한한 칸에는 아래쪽 padding 을 주면 안 됩니다.
   잘려 나간 다음 줄이 그 여백 자리에 그대로 비쳐 보입니다. 여백은 margin 으로 줍니다. */
.gz-link-card__title {
	grid-area: title;
	align-self: center;
	padding-inline: 1rem;
	margin-block: 0.75rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	/* 제목은 두 줄까지만 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 요약글은 자르지 않습니다 (모바일에서 줄 수 제한 없음) */
.gz-link-card__text {
	grid-area: text;
	padding: 0.5rem 1rem 0.875rem;
	color: var(--gz-color-muted);
	font-size: 0.875rem;
	line-height: 1.5;
	/* 본문과 같이 글자 단위로 줄바꿈해 오른쪽이 비지 않게 */
	word-break: normal;
}

.gz-link-card:hover .gz-link-card__title,
.gz-link-card:focus-visible .gz-link-card__title {
	color: var(--gz-color-accent);
}

/* 태블릿 이상은 한 줄 — 썸네일 왼쪽, 제목과 요약글이 오른쪽에 쌓입니다 */
@media (min-width: 768px) {
	.entry-content .gz-link-card {
		grid-template-columns: 30% 1fr;
		grid-template-areas:
			"thumb title"
			"thumb text";
	}

	.gz-link-card__thumb {
		max-width: 240px;
	}

	/* 제목은 위 칸 아래쪽, 요약글은 아래 칸 위쪽에 붙여
	   둘이 한 덩어리로 카드 가운데에 오게 합니다. */
	.gz-link-card__title {
		align-self: end;
		margin-block: 0 0.15rem;
	}

	.gz-link-card__text {
		align-self: start;
		/* 여기도 줄 수를 제한하므로 아래쪽 padding 을 두지 않습니다 */
		padding: 0.15rem 1rem 0;
		/* 넓은 화면에서는 두 줄까지만 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* 8. 목록 스타일 (core/list 블록 스타일)
   --------------------------------------------------------------------------
   글 편집 화면에서 목록 블록의 "스타일" 로 골라 쓰는 모양입니다.
   등록은 inc/block-styles.php, 에디터 화면용 복사본은 editor-style.css 에 있습니다.
   한쪽을 고치면 반드시 다른 쪽도 함께 고쳐야 합니다.

     기본            워드프레스 기본 불릿 (등록하지 않음)
     is-style-check         체크 — 준비물, 신청 조건, 체크리스트
     is-style-arrow         화살표 — 절차, 방법 순서
     is-style-warning       주의 — 주의사항, 제외 대상
     is-style-circle-number 원형 번호 — 단계별 가이드
     is-style-number        숫자 — 원 없이 번호만. 항목이 많거나 글이 긴 목록
     is-style-none          없음 — 들여쓰기만

   .entry-content 안으로만 범위를 묶어 목차 · 메뉴 · 위젯 · 푸터 목록에는 닿지 않습니다.
   아이콘은 이모지나 이미지 파일이 아니라 CSS 로 그려 기기마다 모양이 달라지지 않습니다.
   색이 하나인 아이콘은 mask 로, 두 색이 겹치는 아이콘은 배경색 + 흰색 SVG 로 그립니다.
   data URI 안에 넣는 색은 흰색(%23fff)뿐이고 나머지는 모두 토큰에서 옵니다.
   -------------------------------------------------------------------------- */

/* 아이콘·번호가 붙는 다섯 스타일의 공통 뼈대 */
.entry-content .is-style-check,
.entry-content .is-style-arrow,
.entry-content .is-style-warning,
.entry-content .is-style-circle-number,
.entry-content .is-style-number {
	/* --gz-list-line 은 본문 행간(1.75)과 같아야 아이콘이 첫 줄 정중앙에 옵니다.
	   --gz-list-icon 은 아이콘 한 변의 길이이며 글자 크기에 비례합니다. */
	--gz-list-line: 1.75em;
	--gz-list-icon: 1.15em;

	list-style: none;
	padding-left: 0;
}

.entry-content .is-style-check > li,
.entry-content .is-style-arrow > li,
.entry-content .is-style-warning > li,
.entry-content .is-style-circle-number > li,
.entry-content .is-style-number > li {
	position: relative;
	/* 왼쪽에 아이콘 자리를 비워 둬 줄바꿈된 둘째 줄도 첫 줄 글자에 맞습니다 */
	padding-left: calc(var(--gz-list-icon) + 0.5em);
}

/* 아이콘 세 개(체크 · 화살표 · 주의)의 위치와 크기 */
.entry-content .is-style-check > li::before,
.entry-content .is-style-arrow > li::before,
.entry-content .is-style-warning > li::before,
.entry-content .is-style-warning > li::after {
	content: "";
	position: absolute;
	left: 0;
	top: calc((var(--gz-list-line) - var(--gz-list-icon)) / 2);
	width: var(--gz-list-icon);
	height: var(--gz-list-icon);
}

/* mask 로 그리는 아이콘 공통 (색은 background-color 가 비쳐 나옵니다) */
.entry-content .is-style-arrow > li::before,
.entry-content .is-style-warning > li::before,
.entry-content .is-style-warning > li::after {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* 체크 — 핑크 둥근 사각형 + 흰 체크.
   두 색이 겹치므로 바탕은 background-color, 체크만 흰색 SVG 로 얹습니다. */
.entry-content .is-style-check > li::before {
	background-color: var(--gz-color-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.4l4 4 8-8.8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border-radius: 0.28em;
}

/* 화살표 — 퍼플 → */
.entry-content .is-style-arrow > li::before {
	background-color: var(--gz-color-brand);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12h15M12.5 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12h15M12.5 5.5l6.5 6.5-6.5 6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 주의 — 노란 삼각형 위에 블랙 윤곽선 + 느낌표를 겹칩니다.
   노랑은 흰 배경과 명암비가 1.9:1 이라 그것만으로는 모양이 흐릿합니다.
   그래서 (1) 아이콘을 글자보다 크게 잡고 (2) 같은 좌표에 블랙 윤곽선을 덧그립니다.
   느낌표는 규칙대로 흰색을 쓰지 않고 블랙을 씁니다. */
.entry-content .is-style-warning {
	--gz-list-icon: 1.3em;
}

.entry-content .is-style-warning > li::before {
	background-color: var(--gz-color-icon-warning);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6 21.6 20.4H2.4Z' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6 21.6 20.4H2.4Z' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.entry-content .is-style-warning > li::after {
	background-color: var(--gz-color-text);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6 21.6 20.4H2.4Z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.6v4.2' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.15' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6 21.6 20.4H2.4Z' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 9.6v4.2' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.15' fill='%23fff'/%3E%3C/svg%3E");
}

/* 원형 번호 — 퍼플 원 안에 흰 숫자.
   counter(list-item) 은 브라우저 내장 카운터라 <ol start="5"> 의 시작 번호를 그대로 따르고
   글머리 기호 목록(ul)에 적용해도 1부터 셉니다. 역순(reversed)만 아래에서 따로 처리합니다. */
.entry-content .is-style-circle-number {
	--gz-list-icon: 1.6em;
}

.entry-content .is-style-circle-number > li::before {
	content: counter(list-item);
	position: absolute;
	left: 0;
	/* 숫자만 작게 줄이므로 아래 em 은 전부 0.8em 기준입니다.
	   원 지름 2em = 본문 글자의 1.6배, 첫 줄 높이 2.1875em = 본문 1.75em */
	font-size: 0.8em;
	top: calc((2.1875em - 2em) / 2);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	background-color: var(--gz-color-brand);
	border-radius: 50%;
	color: var(--gz-color-bg);
	font-weight: 700;
	/* 두 자리(10 이상)도 원 안에 들어갑니다 */
	line-height: 1;
}

/* 역순 번호(reversed) — 크롬은 <ol reversed> 의 번호를 내부에서만 매겨
   counter(list-item) 으로 읽으면 0, -1, -2 가 나옵니다.
   그래서 inc/block-styles.php 가 "항목 수 + 1" 을 --gz-list-start 로 넘겨 주고
   여기서 항목마다 1씩 거꾸로 셉니다. (에디터에서는 이 값이 없어 실제 화면과 다를 수 있습니다) */
/* 숫자 — 원형 번호에서 원만 뺀 모양.
   원이 없어 가벼우므로 항목이 많거나 글이 긴 목록에 어울립니다.
   번호 칸을 오른쪽 정렬해 10 이상이 와도 글자 시작선이 흐트러지지 않습니다. */
.entry-content .is-style-number {
	/* 두 자리 숫자 + 마침표(굵게)가 한 줄에 들어갈 폭.
	   좁으면 "10." 의 마침표가 아래로 밀려 떨어집니다. */
	--gz-list-icon: 1.9em;
}

.entry-content .is-style-number > li::before {
	content: counter(list-item) ".";
	position: absolute;
	left: 0;
	top: 0;
	width: var(--gz-list-icon);
	/* 본문 행간과 같게 둬 번호가 첫 줄 글자의 기준선에 맞습니다 */
	line-height: var(--gz-list-line);
	color: var(--gz-color-brand);
	font-weight: 700;
	text-align: right;
	/* 세 자리가 와도 줄이 갈라지지 않고 왼쪽으로 삐져나오게 둡니다 */
	white-space: nowrap;
}

.entry-content .is-style-circle-number[reversed],
.entry-content .is-style-number[reversed] {
	counter-reset: gz-list var(--gz-list-start, 1);
}

.entry-content .is-style-circle-number[reversed] > li,
.entry-content .is-style-number[reversed] > li {
	counter-increment: gz-list -1;
}

.entry-content .is-style-circle-number[reversed] > li::before {
	content: counter(gz-list);
}

.entry-content .is-style-number[reversed] > li::before {
	content: counter(gz-list) ".";
}

/* 없음 — 불릿도 번호도 없이 들여쓰기만 정리 */
.entry-content .is-style-none {
	list-style: none;
	padding-left: 0;
}

/* 하위 목록은 부모 스타일을 물려받지 않습니다.
   list-style 은 상속되는 속성이라 여기서 기본 불릿으로 되돌립니다.
   하위 목록에 스타일을 따로 지정했으면(is-style-*) 건드리지 않습니다. */
.entry-content :is(.is-style-check, .is-style-arrow, .is-style-warning, .is-style-circle-number, .is-style-number, .is-style-none) :is(ul, ol):not([class*="is-style-"]) {
	padding-left: 1.4em;
}

.entry-content :is(.is-style-check, .is-style-arrow, .is-style-warning, .is-style-circle-number, .is-style-number, .is-style-none) ul:not([class*="is-style-"]) {
	list-style: disc;
}

.entry-content :is(.is-style-check, .is-style-arrow, .is-style-warning, .is-style-circle-number, .is-style-number, .is-style-none) ol:not([class*="is-style-"]) {
	list-style: decimal;
}

.entry-content :is(.is-style-check, .is-style-arrow, .is-style-warning, .is-style-circle-number, .is-style-number, .is-style-none) :is(ul, ol):not([class*="is-style-"]) > li::marker {
	color: var(--gz-color-muted);
	font-size: 0.85em;
}

/* 9. 워드프레스 정렬 / 캡션 / 갤러리
   -------------------------------------------------------------------------- */
.alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.aligncenter {
	display: block;
	margin-inline: auto;
	clear: both;
}

.wp-caption,
.wp-block-image figcaption,
.wp-element-caption {
	font-size: 0.875rem;
	color: var(--gz-color-muted);
	text-align: center;
}

.wp-caption {
	max-width: 100%;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.75rem;
}

.sticky .entry-title::before {
	content: "📌 ";
}

.bypostauthor {
	/* 글쓴이 댓글 구분용 (테마 검사 필수 클래스) */
}

/* 10. 페이지네이션 / 글 이동
   -------------------------------------------------------------------------- */
.pagination {
	margin-top: 2rem;
}

.pagination .nav-links,
.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--gz-touch);
	min-height: var(--gz-touch);
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
	text-align: center;
	text-decoration: none;
}

/* 현재 페이지 = 현재 위치이므로 퍼플 */
.pagination .page-numbers.current {
	background: var(--gz-color-brand);
	border-color: var(--gz-color-brand);
	color: var(--gz-color-bg);
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* 같이 보면 좋은 글 — 같은 카테고리 최신 글.
   바로 아래 이전/다음 글 카드에는 테두리가 있으므로 여기는 테두리 없이
   썸네일만 두어 두 영역이 섞여 보이지 않게 합니다. */
.related-posts {
	margin-block: 3rem;
	/* 위아래 구분선으로 본문 · 이전/다음 글과 영역을 나눕니다 */
	padding-block: 2rem;
	border-block: 1px solid var(--gz-color-border);
}

.related-posts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
}

.related-posts__title {
	margin: 0;
	font-size: 1.25rem;
}

.related-posts__more {
	flex: none;
	font-size: 0.9375rem;
	font-weight: 600;
}

.related-posts__list {
	display: grid;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 모바일은 썸네일 왼쪽 + 제목 오른쪽 가로형 */
.related-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--gz-color-text);
	text-decoration: none;
}

.related-card__thumb {
	display: block;
	flex: 0 0 35%;
	aspect-ratio: 16 / 9;
	background: var(--gz-color-surface);
	border-radius: var(--gz-radius);
	overflow: hidden;
}

.related-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-card__title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
	/* 긴 제목은 2줄까지만 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 이 규칙이 전역 a:hover 보다 우선순위가 높아 호버 색을 따로 지정합니다 */
.related-card:hover .related-card__title,
.related-card:focus-visible .related-card__title {
	color: var(--gz-color-accent);
}

/* 태블릿 이상은 3열 카드 — 썸네일 위, 제목 아래 */
@media (min-width: 768px) {
	.related-posts__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.related-card {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.related-card__thumb {
		flex: none;
	}
}

.post-navigation {
	margin-block: 3rem;
}

/* 모바일 1열 -> 태블릿 이상 2열.
   한쪽 글만 있어도 "다음 글" 은 오른쪽 칸을 지킵니다. */
.post-navigation .nav-links {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 2;
	}
}

/* 글 목록 카드와 같은 얼개 — 썸네일 · 뱃지 · 제목 · 요약글 */
.post-nav {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--gz-color-bg);
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
	overflow: hidden;
	color: var(--gz-color-text);
	text-decoration: none;
}

/* 대표 이미지가 없으면 빈 채로 남아 두 카드 높이를 맞춥니다 */
.post-nav__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--gz-color-surface);
}

.post-nav__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-nav__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	padding: 0.875rem 1rem 1rem;
}

/* 이전 / 다음을 한눈에 구분하는 핑크 뱃지 */
.post-nav__badge {
	padding: 0.1rem 0.5rem;
	background: var(--gz-color-accent);
	border-radius: var(--gz-radius);
	color: var(--gz-color-bg);
	font-size: 0.75rem;
	font-weight: 700;
}

.post-nav__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
}

.post-nav__excerpt {
	color: var(--gz-color-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
	/* 본문과 같이 글자 단위로 줄바꿈해 좁은 카드에서 오른쪽이 비지 않게 */
	word-break: normal;
}

/* 제목 2줄, 요약글 2줄까지만 — 두 카드 높이가 크게 어긋나지 않게 */
.post-nav__title,
.post-nav__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-nav:hover .post-nav__title,
.post-nav:focus-visible .post-nav__title {
	color: var(--gz-color-accent);
}

/* 10-1. 목록 정렬 탭 (최신순 · 인기순 · 추천순)
   --------------------------------------------------------------------------
   홈 · 인기 글 목록 · 추천 글 목록을 잇는 탭 줄입니다 (gatalzak_list_tabs()).

   **모든 폭에서 보입니다.** 좁은 화면에서는 세 칸이 가로를 똑같이 나눠 가지고,
   1024px 이상에서는 글자 길이만큼만 차지하고 왼쪽에 모입니다 — 본문 폭이 800px 이라
   늘려 두면 탭 하나가 260px 짜리 큰 막대가 됩니다.

   아이콘은 이모지나 이미지 파일을 쓰지 않고 CSS mask 로 그립니다.
   `background-color: currentColor` 라 글자색을 따라가므로, 활성 탭에서는
   아이콘도 함께 흰색이 됩니다 — 색을 두 번 적지 않습니다.
   -------------------------------------------------------------------------- */
.gz-tabs {
	display: flex;
	gap: 0.5rem;
	/* 탭 줄 **위아래 간격을 같게** 맞춥니다.
	   위쪽 32px 은 `.site-content` 의 `padding-block: 2rem` 에서 오고 모든 폭에서 같습니다.
	   그래서 아래도 2rem 을 그대로 적습니다 — `--gz-gap` 을 쓰면 24 / 32 / 40px 으로
	   폭마다 달라져 탭이 위아래 가운데에 놓이지 않습니다.
	   위쪽 값을 바꾸면 여기도 같이 고칩니다. */
	margin-bottom: 2rem;
}

.gz-tab {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: var(--gz-touch);
	padding: 0.5rem 0.25rem;
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
	background: var(--gz-color-bg);
	color: var(--gz-color-text);
	font-size: 0.9375rem;
	font-weight: 500;
	/* 좁은 화면에서 "최신순" 이 "최신 / 순" 으로 갈라지지 않게 */
	white-space: nowrap;
}

/* 아이콘 — 글자 왼쪽. 크기는 em 이라 글자에 비례합니다. */
.gz-tab::before {
	content: "";
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* 최신순 — 시계 */
.gz-tab--latest::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/g%3E%3C/svg%3E");
}

/* 인기순 — 불꽃 */
.gz-tab--popular::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5s5.5 4.2 5.5 9.2a5.5 5.5 0 0 1-11 0c0-1.7.7-3.2 1.6-4.4.3 1.2 1 2.1 1.9 2.1 1.1 0 1.7-1 1.7-2.4 0-1.6-.5-3.1 .3-4.5z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5s5.5 4.2 5.5 9.2a5.5 5.5 0 0 1-11 0c0-1.7.7-3.2 1.6-4.4.3 1.2 1 2.1 1.9 2.1 1.1 0 1.7-1 1.7-2.4 0-1.6-.5-3.1 .3-4.5z' fill='%23fff'/%3E%3C/svg%3E");
}

/* 추천순 — 별 */
.gz-tab--pillars::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.6l6.5-.9z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L2.6 9.6l6.5-.9z' fill='%23fff'/%3E%3C/svg%3E");
}

/* 지금 보고 있는 탭 — 테두리를 없애고 핑크로 채웁니다.
   흰 글자를 쓰려면 바탕이 이만큼 진해야 합니다 (명암비 5.8:1).
   연한 핑크 틴트 위 흰 글자는 1.05:1 이라 글씨가 보이지 않습니다. */
.gz-tab.is-current {
	border-color: transparent;
	background: var(--gz-color-accent);
	color: var(--gz-color-bg);
	font-weight: 700;
}

.gz-tab:hover,
.gz-tab:focus-visible {
	color: var(--gz-color-accent);
}

.gz-tab.is-current:hover,
.gz-tab.is-current:focus-visible {
	background: var(--gz-color-accent-hover);
	color: var(--gz-color-bg);
}

/* PC 는 본문 폭이 넓어 세 칸으로 늘리면 막대처럼 보입니다.
   글자 길이만큼만 차지하고 왼쪽에 모읍니다. 되돌리려면 이 블록만 지우면 됩니다. */
@media (min-width: 1024px) {
	.gz-tab {
		flex: 0 0 auto;
		padding-inline: 1rem;
	}
}

/* 11. 위젯 / 검색폼
   -------------------------------------------------------------------------- */
.widget {
	margin-bottom: 2rem;
}

.widget-title {
	font-size: 1rem;
	margin-bottom: 0.75rem;
}

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

.widget li {
	padding-block: 0.3rem;
}

/* 사이드바 블록 (목차 · 인기글 · 최신글)
   위젯이 아니라 테마가 sidebar.php 에서 직접 출력합니다.
   글 목록은 --gz-widget-thumb 로 썸네일 폭을 맞춰 위젯과 같은 모양을 씁니다. */
.gz-side {
	display: block;
	margin-bottom: 2rem;
}

.gz-side__title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
}

.gz-side__title a {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	color: var(--gz-color-text);
}

.gz-side__title a:hover,
.gz-side__title a:focus-visible {
	color: var(--gz-color-accent);
}

/* 더 보기 꺾쇠 — 글자가 아니라 CSS 로 그려 기기마다 모양이 같습니다 */
.gz-side__chevron {
	width: 0.5em;
	height: 0.5em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

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

.gz-side__item {
	display: flex;
	/* 제목이 1줄이어도 썸네일과 가운데가 맞게 */
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.5rem;
	color: var(--gz-color-text);
	text-decoration: none;
}

.gz-side__thumb {
	position: relative;
	display: block;
	flex: 0 0 var(--gz-widget-thumb);
	aspect-ratio: 16 / 9;
	background: var(--gz-color-surface);
	border-radius: var(--gz-radius);
	overflow: hidden;
}

.gz-side__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 인기글 순위 — 썸네일 왼쪽 위 모서리 */
.gz-side__rank {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 1.5em;
	padding: 0.1em 0.3em;
	background: var(--gz-color-brand);
	color: var(--gz-color-bg);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.gz-side__text {
	min-width: 0;
}

.gz-side__item-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	/* 칸이 152px 밖에 안 되는 자리라 어절 단위로만 끊으면 오른쪽이 크게 빕니다 */
	word-break: normal;
}

/* 사용자 정의하기 > 조회수 를 켰을 때만 나옵니다 */
.gz-side__views {
	display: block;
	margin-top: 0.15rem;
	color: var(--gz-color-muted);
	font-size: 0.8125rem;
}

/* 이 규칙들이 전역 a:hover 보다 우선순위가 높아 호버 색을 따로 지정합니다 */
.gz-side__item:hover .gz-side__item-title,
.gz-side__item:focus-visible .gz-side__item-title {
	color: var(--gz-color-accent);
}

/* 사이드바 "최신 글" — 썸네일 + 제목 2단.
   블록 자체의 대표 이미지 표시는 inc/widgets.php 가 켭니다.
   비율을 바꾸려면 :root 의 --gz-widget-thumb 하나만 고치면 됩니다. */
.widget-area .wp-block-latest-posts__list li {
	display: flex;
	/* 제목이 1줄이어도 썸네일과 가운데가 맞게 */
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.5rem;
}

.widget-area .wp-block-latest-posts__featured-image {
	/* 대표 이미지가 없는 글은 이 칸 자체가 없어서 제목이 폭을 다 씁니다. */
	flex: 0 0 var(--gz-widget-thumb);
	margin: 0;
}

.widget-area .wp-block-latest-posts__featured-image a,
.widget-area .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100%;
}

.widget-area .wp-block-latest-posts__featured-image img {
	height: auto;
	/* 목록 카드와 같은 비율로 잘라 줄이 들쭉날쭉해지지 않게 합니다. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--gz-radius);
}

/* 이 규칙이 전역 a:hover 보다 우선순위가 높아 호버 색을 여기서 따로 지정합니다 */
.widget-area .wp-block-latest-posts__post-title:hover,
.widget-area .wp-block-latest-posts__post-title:focus-visible {
	color: var(--gz-color-accent);
}

.widget-area .wp-block-latest-posts__post-title {
	flex: 1 1 0;
	min-width: 0;
	color: var(--gz-color-text);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	/* 긴 제목은 2줄까지만 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 태블릿에서는 본문 아래에 위젯이 2열로 들어감 */
@media (min-width: 768px) {
	.widget-area {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--gz-gap);
	}
}

@media (min-width: 1024px) {
	.widget-area {
		display: block;
	}

	/* 글 상세에서만 사이드바를 화면에 붙여 둡니다.
	   목차는 맨 위에 고정하고 그 아래(인기글 · 최신글 · 위젯)만 스크롤시켜,
	   긴 글을 읽는 동안 지금 위치를 계속 볼 수 있게 합니다.

	   홈 · 카테고리 · 검색에는 목차가 없어 고정할 이유가 없으므로
	   사이드바가 본문과 함께 그냥 흐릅니다.

	   align-self: start 가 없으면 그리드가 칸을 늘려 sticky 가 동작하지 않습니다. */
	.single-post .site-content.has-sidebar .widget-area {
		position: sticky;
		top: 1.5rem;
		align-self: start;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 3rem);
	}

	/* 목차가 먼저 자리를 차지하고, 남은 높이를 아래 칸이 갖습니다.
	   제목이 아주 많은 글에서는 인기글 · 최신글 쪽이 그만큼 짧아집니다.

	   max-height 는 사이드바와 같은 값이고 overflow 는 auto 라,
	   보통은 목차가 통째로 보이고 스크롤바도 생기지 않습니다.
	   목차만으로 화면을 넘길 만큼 제목이 많은 글에서만 목차 안에 스크롤이 생겨,
	   아랫부분이 화면 밖으로 나가 닿지 못하는 일을 막습니다.
	   (부모 높이가 auto 라 max-height: 100% 는 먹지 않습니다. 화면 기준으로 적습니다) */
	.single-post .widget-area .gz-side--ad {
		flex: 0 0 auto;
	}

	/* 광고가 먼저 자리를 잡고 목차가 남은 높이를 갖습니다.
	   **flex-shrink 가 1 이라 광고 + 목차가 화면을 넘기면 목차 쪽이 줄어듭니다.**
	   0 으로 두면 목차가 안 줄어 아래 칸이 화면 밖으로 밀립니다. */
	.single-post .widget-area .gz-side--toc {
		flex: 0 1 auto;
		min-height: 0;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
	}

	/* 글 상세 PC 에서는 추천글 · 인기글 · 최신글을 숨깁니다.
	   고정된 광고 · 목차 아래에 목록까지 쌓으면 읽는 길잡이가 묻힙니다.
	   **좁은 화면에서는 그대로 둡니다** — 거기서는 본문 아래로 내려가
	   다른 글로 가는 길이 되어 줍니다. 그래서 PHP 가 아니라 CSS 로 거릅니다. */
	.single-post .widget-area .gz-side--pillars,
	.single-post .widget-area .gz-side--popular,
	.single-post .widget-area .gz-side--latest {
		display: none;
	}

	/* 스크롤은 여기에만 생깁니다. 목차 높이를 뺀 만큼이라 스크롤바도 짧습니다.
	   min-height: 0 이 없으면 flex 칸이 내용만큼 늘어나 스크롤이 생기지 않습니다. */
	.single-post .widget-area__rest {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}

	/* 스크롤바를 얇고 은은하게. 기본 회색 막대는 사이드바에서 너무 두껍습니다.
	   목차에는 스크롤이 없으므로 아래 칸에만 적용합니다. */
	.single-post .widget-area__rest {
		scrollbar-width: thin;
		scrollbar-color: var(--gz-color-border) transparent;
		/* 스크롤바가 나타나도 칸 폭이 흔들리지 않게 */
		scrollbar-gutter: stable;
	}

	.single-post .widget-area__rest::-webkit-scrollbar {
		width: 6px;
	}

	.single-post .widget-area__rest::-webkit-scrollbar-track {
		background: transparent;
	}

	.single-post .widget-area__rest::-webkit-scrollbar-thumb {
		background: var(--gz-color-border);
		border-radius: 3px;
	}

	.single-post .widget-area__rest::-webkit-scrollbar-thumb:hover {
		background: var(--gz-color-muted);
	}
}

/* 검색 폼 — 박스 왼쪽에 입력칸, 오른쪽 끝 안쪽에 돋보기 제출 버튼.
   헤더, 검색 결과, 404 에서 모두 같은 모양으로 쓰입니다. */
.search-form {
	position: relative;
}

.search-field {
	width: 100%;
	min-width: 0;
	min-height: var(--gz-touch);
	/* 오른쪽은 아이콘 자리. 긴 검색어가 아이콘 밑으로 들어가지 않게 비워 둡니다. */
	padding: 0.55rem calc(var(--gz-touch) + 0.25rem) 0.55rem 0.75rem;
	font-size: 1rem; /* 16px 미만이면 iOS 에서 입력칸을 누를 때 화면이 확대됩니다 */
	color: var(--gz-color-text);
	background: var(--gz-color-bg);
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
}

.search-field::placeholder {
	color: var(--gz-color-muted);
	opacity: 1; /* 파이어폭스는 기본으로 흐리게 처리합니다 */
}

.search-field:focus {
	border-color: var(--gz-color-brand);
}

/* 브라우저 기본 지우기(X) 버튼이 돋보기와 겹치지 않게 감춤 */
.search-field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* 돋보기 = 실제 제출 버튼. 박스 안 오른쪽 끝에 세로 가운데 정렬 */
.search-submit {
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gz-touch);
	height: var(--gz-touch);
	padding: 0;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	border-radius: var(--gz-radius);
	color: var(--gz-color-muted);
	cursor: pointer;
}

.search-submit:hover,
.search-submit:focus-visible {
	color: var(--gz-color-brand);
}

/* 사이드바 검색 블록 위젯의 버튼 — 코어 기본색(#32373c)을 덮습니다.
   테마 검색 폼과는 별개 컴포넌트라 퍼플 채움 버튼을 유지합니다. */
.wp-block-search__button {
	min-height: var(--gz-touch);
	padding: 0.55rem 1rem;
	border: 0;
	border-radius: var(--gz-radius);
	background: var(--gz-color-brand);
	color: var(--gz-color-bg);
	cursor: pointer;
}

.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
	background: var(--gz-color-brand-hover);
}

/* 12. 댓글
   -------------------------------------------------------------------------- */
.comments-area {
	margin-top: 3rem;
}

.comment-list,
.comment-list .children {
	list-style: none;
	padding-left: 0;
}

.comment-list .children {
	padding-left: 1rem;
}

@media (min-width: 768px) {
	.comment-list .children {
		padding-left: 1.5rem;
	}
}

.comment-body {
	padding-block: 1rem;
	border-bottom: 1px solid var(--gz-color-border);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	min-height: var(--gz-touch);
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
}

.comment-form .submit {
	min-height: var(--gz-touch);
	padding: 0.55rem 1.25rem;
	border: 0;
	border-radius: var(--gz-radius);
	background: var(--gz-color-brand);
	color: var(--gz-color-bg);
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form .submit:focus-visible {
	background: var(--gz-color-brand-hover);
}

/* 13. 푸터
   -------------------------------------------------------------------------- */
.site-footer {
	padding-block: 2.5rem;
	background: var(--gz-color-surface);
	font-size: 0.875rem;
	color: var(--gz-color-muted);
}

.site-footer a {
	color: inherit;
}

/* 위젯: 모바일 1열 -> 태블릿 2열 -> PC 가로 배치 */
.footer-widgets {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 var(--gz-gap);
}

@media (min-width: 768px) {
	.footer-widgets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.footer-widgets {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}
}

/* 아래쪽 한 줄 — 왼쪽 링크, 오른쪽 저작권.
   좁은 화면에서는 위아래로 쌓입니다 (한 줄에 넣으면 글자가 잘게 끊깁니다). */
.site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 손가락으로 누를 자리를 모바일에서만 넉넉히 둡니다.
   PC 는 한 줄에 나란히 서야 해서 높이를 키우지 않습니다. */
.footer-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--gz-touch);
}

.site-info .copyright {
	margin: 0;
}

@media (min-width: 768px) {
	.footer-navigation a {
		min-height: 0;
	}
}

/* 14. 목차 (TOC)
   --------------------------------------------------------------------------
   두 가지가 있습니다.
     .gz-side--toc  사이드바 목차 — 글 상세 사이드바 맨 위 (스크롤을 따라다님)
     .gz-toc-inline [gatalzak_toc] 숏코드 — 본문 안 접이식 박스, 모든 화면에서 표시
   -------------------------------------------------------------------------- */

/* 목차로 이동했을 때 제목이 화면 맨 위에 딱 붙지 않게 */
.entry-content h2,
.entry-content h3 {
	scroll-margin-top: 5rem;
}

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

.gz-toc__item a {
	display: block;
	padding-block: 0.3rem;
	text-decoration: none;
}

/* 본문 삽입용 접이식 목차 (숏코드) */
.gz-toc-inline {
	margin-block: 0 1.25em;
	padding: 0.75rem 1rem;
	background: var(--gz-color-brand-tint);
	border-radius: var(--gz-radius);
}

/* 기본 펼침 삼각형을 없애고 글자를 가운데 정렬한 뒤,
   접힘 여부는 오른쪽에 직접 그린 화살표로 알립니다.
   좌우 padding 을 같게 둬야 글자가 실제로 가운데에 놓입니다. */
.gz-toc-inline .gz-toc__title {
	position: relative;
	margin: 0;
	padding-inline: 1.5rem;
	color: var(--gz-color-brand);
	font-weight: 700;
	text-align: center;
	list-style: none;
	cursor: pointer;
}

.gz-toc-inline .gz-toc__title::-webkit-details-marker {
	display: none; /* 구형 사파리 */
}

.gz-toc-inline .gz-toc__title::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	transition: transform 0.15s ease;
}

.gz-toc-inline[open] .gz-toc__title::after {
	transform: translateY(-25%) rotate(-135deg);
}

.gz-toc-inline[open] .gz-toc__title {
	margin-bottom: 0.5rem;
}

.gz-toc-inline .gz-toc__item a {
	color: var(--gz-color-text);
}

.gz-toc-inline .gz-toc__item a:hover,
.gz-toc-inline .gz-toc__item a:focus-visible {
	color: var(--gz-color-brand);
}

/* 사이드바 광고 — 목차 바로 위. **목차와 같은 폭 규칙을 따릅니다.**
   1024px 미만에서는 사이드바가 본문 아래로 내려가 목차를 숨기는데,
   광고만 글 끝에 남으면 스티키 광고처럼 보여 어색합니다. 그래서 함께 숨깁니다.
   (숨겨진 자리의 <ins> 는 폭이 0 이라 애드센스가 채우지 않습니다.) */
.gz-side--ad {
	display: none;
	/* 광고와 목차 사이 간격. .gz-side 의 기본값(2rem)보다 좁게 둡니다. */
	margin-bottom: 10px;
}

/* 간격은 **바깥 칸이 혼자 정합니다.**
   .gz-ad 의 세로 여백(1.5rem)을 남겨 두면 바깥 margin 과 겹쳐지거나 위로 흘러나와
   목차와의 간격이 10px 이 되지 않습니다. */
.gz-side--ad .gz-ad {
	margin-block: 0;
}

@media (min-width: 1024px) {
	.gz-side--ad {
		display: block;
	}
}

/* 사이드바 목차 — 글 상세에서는 화면에 붙어 제자리를 지킵니다.
   고정과 스크롤 규칙은 "11. 위젯 / 검색폼" 의 1024px 미디어쿼리에 있습니다.
   이 블록에는 광고를 넣지 않습니다.

   1024px 미만에서는 사이드바가 본문 아래로 내려가 목차가 글 끝에 오게 됩니다.
   그 자리의 목차는 쓸모가 없고 본문 삽입 목차([gatalzak_toc])와 겹치므로 숨깁니다. */
.gz-side--toc {
	display: none;
}

@media (min-width: 1024px) {
	.gz-side--toc {
		display: block;
	}
}

/* 목차 제목은 가운데 정렬하고 아래에 구분선을 둡니다. */
.gz-side--toc .gz-side__title {
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--gz-color-border);
	text-align: center;
}

.gz-side--toc .gz-toc__list {
	font-size: 0.9375rem;
	line-height: 1.5;
	/* body 의 word-break: keep-all 때문에 어절 단위로만 줄이 바뀌어
	   좁은 칸에서 오른쪽에 큰 여백이 남습니다. 글자 단위로 바꿔 채웁니다. */
	word-break: normal;
}

.gz-side--toc .gz-toc__item a {
	border-left: 2px solid transparent;
	padding-left: 0.625rem;
	color: var(--gz-color-muted);
}

.gz-side--toc .gz-toc__item a:hover,
.gz-side--toc .gz-toc__item a:focus-visible {
	color: var(--gz-color-brand);
}

/* 지금 읽고 있는 제목 */
.gz-side--toc .gz-toc__item a[aria-current="true"] {
	border-left-color: var(--gz-color-brand);
	color: var(--gz-color-brand);
	font-weight: 700;
}

/* 14-1. 제휴 CTA 카드 ([gatalzak_cta] · inc/cta-card.php)
   --------------------------------------------------------------------------
   `[썸네일] [제목 · 가격 · 별점] [버튼]` 가로형 카드입니다.
   768px 미만에서는 버튼이 아래 한 줄을 다 씁니다 (손가락으로 누르기 좋게).

   **버튼 색은 플랫폼 색입니다.** 사이트 팔레트 밖의 색이지만, 어디로 가는
   링크인지 색으로 바로 알아보게 하려고 일부러 그 브랜드 색을 씁니다.
   `.entry-content a` 규칙이 더 세므로 색은 `.entry-content` 로 한 번 더 묶습니다
   (내부링크 카드와 같은 이유).
   -------------------------------------------------------------------------- */
.gz-cta {
	--gz-cta-button: var(--gz-color-accent);

	/* 좁은 화면 배치 — 제목과 썸네일이 한 줄을 다 쓰고,
	   그 아래 왼쪽에 가격 · 별점, 오른쪽에 버튼이 섭니다. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.75rem 0.875rem;
	align-items: center;
	margin-block: 1.5rem;
	padding: 0.875rem;
	border: 1px solid var(--gz-color-border);
	border-radius: 5px;
	background: var(--gz-color-bg);
}

.gz-cta--coupang {
	--gz-cta-button: #e8282b;
}

/* 네이버 공식 초록입니다. 흰 글자와 명암비가 2.3:1 이라 넉넉하지는 않은데,
   플랫폼을 색으로 알아보게 하는 것이 이 버튼의 목적이라 브랜드 색을 그대로 씁니다.
   더 또렷하게 하려면 #0B8043(흰 글자와 5.0:1)으로 한 줄만 바꾸면 됩니다. */
.gz-cta--naver {
	--gz-cta-button: #03c75a;
}

/* **어느 폭에서도 줄 수를 제한하지 않습니다.** 상품 이름이 잘리면 무슨 물건인지
   알 수가 없습니다 — 이 카드에서 가장 중요한 글자입니다.
   제목이 길면 카드가 세로로 늘어나는 쪽을 택합니다. */
.gz-cta__title {
	grid-column: 1 / -1;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	/* 좁은 칸이라 어절 단위로 끊으면 오른쪽에 큰 여백이 남습니다. */
	word-break: normal;
}

/* 좁은 화면에서는 상품이 주인공이라 썸네일이 한 줄을 다 씁니다.
   비율을 미리 잡아 그림이 늦게 와도 카드가 밀리지 않습니다(CLS 방지). */
.gz-cta__thumb {
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 5px;
	background: var(--gz-color-surface);
}

/* **상품 사진은 잘리지 않습니다** — contain 이라 비율이 달라도 통째로 들어가고
   남는 자리는 연한 배경으로 채웁니다. 테마의 다른 썸네일은 cover(잘라 채우기)지만
   여기는 상품이 무엇인지 보여 주는 것이 목적이라 반대로 갑니다. */
.gz-cta__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.gz-cta__meta {
	display: block;
	min-width: 0;
}

.gz-cta__title + .gz-cta__meta {
	/* 썸네일이 없는 카드에서도 제목 아래가 비지 않게 */
	grid-column: 1;
}

/* 가격은 한국 상거래 관례대로 빨강입니다. 버튼 색과 별개로 늘 같은 색입니다 —
   네이버 카드에서 가격만 초록이 되면 오히려 읽기 어렵습니다. */
.gz-cta__price {
	display: block;
	color: #e8282b;
	font-size: 1.125rem;
	font-weight: 700;
}

/* 좁은 화면에서는 별과 리뷰 수가 위아래로 쌓입니다 (가격 칸이 좁아서). */
.gz-cta__rate {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
	margin-top: 0.3rem;
}

/* 별은 그림 파일이 아니라 CSS 로 그립니다.
   별 하나짜리 mask 를 가로로 다섯 번 되풀이하고, 그 위에 "채운 색 → 빈 색"
   그라데이션을 깔아 경계를 --gz-cta-fill 비율로 옮깁니다.
   그래서 4.5 같은 반 칸도 그대로 보입니다.

   **viewBox 가 별의 왼쪽 끝에서 시작합니다**(`4.6 0 23.4 24`). 0 에서 시작하면
   별 왼쪽에 빈 자리가 생겨 **첫 별이 제목 · 가격 선보다 안쪽으로 밀립니다.**
   오른쪽에만 남긴 여백이 별과 별 사이 간격이 됩니다.

   `preserveAspectRatio='none'` 이 없으면 그림이 칸 안에서 가운데로 맞춰지며
   또 여백이 생깁니다. 폭(5.36em)은 칸 하나가 viewBox 와 같은 비율이 되도록
   맞춘 값이라 늘어나 보이지 않습니다. */
.gz-cta__stars {
	display: block;
	width: 5.36em;
	height: 1.1em;
	background: linear-gradient(
		90deg,
		#ffb400 var(--gz-cta-fill, 0%),
		var(--gz-color-border) var(--gz-cta-fill, 0%)
	);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.6 0 23.4 24' preserveAspectRatio='none'%3E%3Cpath d='M14 2.8l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L4.6 9.6l6.5-.9z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.6 0 23.4 24' preserveAspectRatio='none'%3E%3Cpath d='M14 2.8l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5-5.8-3.1-5.8 3.1 1.1-6.5L4.6 9.6l6.5-.9z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: 20% 100%;
	mask-size: 20% 100%;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

.gz-cta__reviews {
	color: var(--gz-color-muted);
	font-size: 0.8125rem;
}

.gz-cta__button {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 가격 묶음 오른쪽에 서고, 그 높이에 맞춰 늘어납니다.
	   **폭을 정해 둡니다** — auto 로 두면 긴 문구가 한 줄로 쭉 늘어나
	   카드의 절반을 넘게 차지합니다. 정해 두면 두 줄로 접힙니다. */
	align-self: stretch;
	width: 9rem;
	padding: 0.75rem 1rem;
	border-radius: 5px;
	font-size: 0.9375rem;
	font-weight: 700;
	/* 두 줄로 접히는 문구라 줄 간격을 넉넉히 둡니다. 1.35 에서는 붙어 보입니다. */
	line-height: 1.6;
	text-align: center;
	word-break: keep-all;
}

/* 본문 링크 규칙(.entry-content a)이 더 세므로 한 번 더 묶습니다. */
.entry-content .gz-cta__button,
.gz-cta__button {
	background: var(--gz-cta-button);
	color: var(--gz-color-bg);
}

.entry-content .gz-cta__button:hover,
.entry-content .gz-cta__button:focus-visible {
	color: var(--gz-color-bg);
	filter: brightness(0.92);
}

/* 768px 이상 — 가로 한 줄로 돌아갑니다.
   `[썸네일] [제목 / 가격·별점] [버튼]` 이고 썸네일과 버튼이 두 줄을 걸칩니다.

   **썸네일을 크게 둡니다(150px).** 작게 두면 무슨 상품인지 알아볼 수가 없어
   카드가 제 구실을 못 합니다. 카드가 그만큼 세로로 길어지는 것은 감수합니다. */
@media (min-width: 768px) {
	.gz-cta {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb title  button"
			"thumb meta   button";
		gap: 0.35rem 1.25rem;
		padding: 1rem;
	}

	.gz-cta__title {
		grid-area: title;
		align-self: end;
		font-size: 1.0625rem;
		text-align: left;
	}

	.gz-cta__thumb {
		grid-area: thumb;
		width: 150px;
		aspect-ratio: 1 / 1;
	}

	.gz-cta__meta,
	.gz-cta__title + .gz-cta__meta {
		grid-area: meta;
		align-self: start;
	}

	.gz-cta__price {
		font-size: 1.375rem;
	}

	.gz-cta__rate {
		flex-direction: row;
		align-items: center;
		gap: 0.45rem;
		margin-top: 0.35rem;
	}

	.gz-cta__reviews {
		font-size: 0.875rem;
	}

	/* 폭은 **위에서 묶기만** 합니다. 11rem 으로 못박아 두니 두 줄짜리 문구 양옆에
	   빈 자리가 크게 남았고, 반대로 풀어 두면 한 줄로 쭉 늘어나 줄바꿈이 사라집니다.
	   max-width 면 긴 문구는 접히고 짧은 문구는 제 크기로 섭니다.
	   세로 여백은 넉넉히 둬 버튼이 납작해 보이지 않게 합니다. */
	.gz-cta__button {
		grid-area: button;
		align-self: center;
		width: auto;
		max-width: 10rem;
		padding: 1rem;
		font-size: 1rem;
	}
}

/* 15. 광고 자리 (애드센스)
   --------------------------------------------------------------------------
   본문 광고는 [gatalzak_ad] 숏코드가 이 마크업을 만들어 줍니다 (inc/ads.php).
   높이를 미리 잡아 두어 광고가 뜰 때 본문이 밀리지 않습니다(CLS 방지).

     gz-ad--inline     반응형 (디스플레이) — 숏코드 기본값
     gz-ad--article    인아티클
     gz-ad--multiplex  멀티플렉스
     gz-ad--top        본문 상단 (직접 넣을 때)
     gz-ad--sidebar    사이드바 (직접 넣을 때)

   "광고" 같은 라벨은 붙이지 않습니다.
   -------------------------------------------------------------------------- */
/* 광고 영역에는 퍼플·핑크 테두리나 배경을 쓰지 않습니다.
   브랜드 색을 두르면 광고가 사이트 버튼처럼 보여 오인 클릭을 유발합니다. */
.gz-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block: 1.5rem;
	overflow: hidden; /* 광고가 칸보다 넓어도 가로 스크롤이 생기지 않게 */
	text-align: center;
}

.gz-ad > * {
	max-width: 100%;
}

/* 300x250 / 336x280 반응형 광고 기준 */
.gz-ad--top,
.gz-ad--inline {
	min-height: 280px;
}

/* 인아티클은 문단 사이에 끼는 광고라 반응형보다 낮게 잡습니다 */
.gz-ad--article {
	min-height: 250px;
}

/* 멀티플렉스는 여러 칸이 격자로 들어가 세로로 깁니다 */
.gz-ad--multiplex {
	min-height: 500px;
}

@media (min-width: 768px) {
	.gz-ad--multiplex {
		min-height: 350px;
	}
}

/* 광고 칸 안에서 <ins> 가 폭을 다 쓰도록.
   flex 가운데 정렬만 두면 반응형 광고가 폭을 0 으로 잡는 일이 있습니다. */
.gz-ad .adsbygoogle {
	width: 100%;
}

/* 사이드바: 300x250 기준으로만 자리를 잡아 둡니다.
   **PC 에서 600px 을 미리 잡지 않습니다.** 이 광고는 스티키 칸을 목차와 나눠 쓰는데,
   600px 을 잡아 두면 화면이 낮은 PC 에서 목차가 설 자리를 잃습니다.
   실제로 더 큰 광고가 들어오면 칸이 늘어나고 목차가 그만큼 줄어듭니다. */
.gz-ad--sidebar {
	min-height: 250px;
}

/* 16. 허브 페이지 (SNS 프로필 링크용 링크 모음)
   --------------------------------------------------------------------------
   인스타그램 · 쇼츠 · 틱톡에서 "프로필 링크 7번 글" 을 보고 들어오는 화면입니다.
   번호 하나만 기억하고 온 사람이 모바일에서 한 손으로 찾는다고 보고 만들었습니다.
   그래서 폭을 좁게 잡아 가운데 두고, 번호를 가장 크게 보여 줍니다.

   이 화면에는 광고를 넣지 않습니다 (inc/tracking.php 의 gatalzak_ads_allowed()).
   -------------------------------------------------------------------------- */
.gz-hub {
	max-width: var(--gz-hub-width);
	margin-inline: auto;
}

/* 헤더 · 푸터도 본문과 같은 폭에 맞춥니다.
   .container 는 안쪽 폭이 --gz-container 와 같으므로 이 한 줄이면
   헤더 바 · 메뉴 · 4색 띠 · 푸터 내용이 모두 본문 카드와 같은 끝선에 놓입니다.
   푸터의 연한 배경은 화면 전체를 덮은 채로 두고 안쪽 내용만 좁힙니다. */
.gz-hub-page .site-header,
.gz-hub-page .site-footer {
	--gz-container: var(--gz-hub-width);
}

/* 4색 띠와 안내 문구 사이 간격을, 안내 문구와 검색창 사이 간격과 같게 */
.gz-hub-page .site-content {
	padding-top: 1.25rem;
}

/* 안내 문구 위아래 간격을 같게 맞춥니다.
   위는 .gz-hub-page .site-content 의 padding-top(1.25rem)이 만들고,
   아래는 이 margin-bottom(1.25rem)이 만듭니다. 둘을 함께 고쳐야 합니다. */
.gz-hub__lead {
	margin: 0 0 1.25rem;
	color: var(--gz-color-muted);
	font-size: 0.9375rem;
	text-align: center;
}

.gz-hub__intro {
	margin-bottom: 1.25rem;
}

/* 번호로 찾기 */
.gz-hub__find {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.gz-hub__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--gz-touch);
	padding: 0.55rem 0.75rem;
	font-size: 1rem; /* 16px 미만이면 iOS 에서 입력칸을 누를 때 화면이 확대됩니다 */
	color: var(--gz-color-text);
	background: var(--gz-color-bg);
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
}

.gz-hub__input:focus {
	border-color: var(--gz-color-brand);
	outline: 2px solid var(--gz-color-brand);
	outline-offset: 1px;
}

.gz-hub__submit {
	flex: none;
	min-height: var(--gz-touch);
	padding-inline: 1.25rem;
	background: var(--gz-color-brand);
	border: 0;
	border-radius: var(--gz-radius);
	color: var(--gz-color-bg);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.gz-hub__submit:hover,
.gz-hub__submit:focus-visible {
	background: var(--gz-color-brand-hover);
}

.gz-hub__error {
	margin: 0 0 0.75rem;
	color: var(--gz-color-accent);
	font-size: 0.875rem;
	font-weight: 700;
}

/* 카드 목록 */
.gz-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.625rem;
}

/* 번호 · 썸네일 · 제목 한 줄. 카드 전체가 누르는 영역입니다. */
.gz-hub__card {
	display: grid;
	grid-template-columns: auto 96px minmax(0, 1fr);
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.875rem 0.625rem 0.625rem;
	background: var(--gz-color-bg);
	border: 1px solid var(--gz-color-border);
	border-radius: var(--gz-radius);
	color: var(--gz-color-text);
	text-decoration: none;
}

.gz-hub__card:hover,
.gz-hub__card:focus-visible {
	border-color: var(--gz-color-brand);
}

/* 번호가 이 화면의 주인공이라 가장 크고 진하게 둡니다 */
.gz-hub__no {
	min-width: 1.8em;
	color: var(--gz-color-brand);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.gz-hub__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--gz-color-surface);
	border-radius: var(--gz-radius);
	overflow: hidden;
}

.gz-hub__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gz-hub__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.45;
	word-break: normal;
}

/* 이 규칙이 전역 a:hover 보다 우선순위가 높아 호버 색을 따로 지정합니다 */
.gz-hub__card:hover .gz-hub__title,
.gz-hub__card:focus-visible .gz-hub__title {
	color: var(--gz-color-accent);
}

/* 화면이 넓어지면 번호와 썸네일만 조금 키웁니다 */
@media (min-width: 480px) {
	.gz-hub__card {
		grid-template-columns: auto 120px minmax(0, 1fr);
	}

	.gz-hub__no {
		font-size: 1.5rem;
	}
}

/* 17. 모션 최소화 설정 존중
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}