/*
Theme Name:  Hanboard
Theme URI:   https://example.com/
Description: GeneratePress 자식 테마. 부모 템플릿 파일을 하나도 덮어쓰지 않고 훅으로만 한국형 게시판 목록을 만듭니다. PC 3열(분류·제목·작성일), 모바일 2열(제목·날짜)로 자동 전환되고, 색과 모양은 사용자 정의하기에서 사이트마다 다르게 지정할 수 있습니다. 고치는 방법은 CUSTOMIZE.md, 변경 이력은 CHANGELOG.md 참고.
Author:      Hanboard
Template:    generatepress
Version:     1.8.0
Text Domain: hanboard
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ============================================================
   색상 — 여기만 고치면 전체 색이 바뀝니다
   ============================================================ */

:root {
	--hb-primary:      #17617e;  /* 브랜드 파랑 (머리글 선, 링크 hover) */
	--hb-primary-dark: #104a62;  /* 진한 파랑 (버튼 hover) */
	--hb-notice-bg:    #f2f7fa;  /* 공지 행 배경 */
	--hb-row-hover:    #f5f8fa;  /* 마우스 올린 행 */
	--hb-border:       #e3e7ec;  /* 행 구분선 */
	--hb-border-strong:#d3dae1;  /* 입력창 테두리 */
	--hb-text:         #1f2933;  /* 본문 글자 */
	--hb-text-sub:     #6b7784;  /* 분류·날짜 글자 */
	--hb-surface:      #ffffff;  /* 게시판 배경 */

	--hb-col-cat:      132px;    /* PC 분류 열 너비 */
	--hb-col-date:     104px;    /* PC 작성일 열 너비 */
	--hb-row-h:        50px;     /* PC 행 높이 */
}


/* ============================================================
   부모 테마의 보관함 제목 영역을 가린다

   제목과 분류 설명은 functions.php 6번에서 직접 다시 그립니다.
   부모 테마의 필터에 의존하지 않고 CSS로만 가리므로,
   GeneratePress가 업데이트되어도 동작이 달라지지 않습니다.
   ============================================================ */

.hb-board-page .page-header {
	display: none;
}


/* ============================================================
   상단 도구 막대 — 제목 + 검색창
   ============================================================ */

.hb-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.hb-toolbar__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--hb-text);
	word-break: keep-all;
}

.hb-toolbar__count {
	margin-left: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--hb-primary);
}

.hb-search {
	display: flex;
	align-items: stretch;
	gap: 6px;
	flex: 0 1 320px;
	min-width: 0;
}

/* 카테고리·태그 설명 (워드프레스 기본 기능) */
.hb-toolbar__desc {
	flex: 1 0 100%;
	padding: 12px 14px;
	margin: 2px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: #4b5763;
	background: #f7f9fb;
	border-left: 3px solid var(--hb-primary);
	border-radius: 0 4px 4px 0;
}

.hb-toolbar__desc p:first-child { margin-top: 0; }
.hb-toolbar__desc p:last-child  { margin-bottom: 0; }

/*
 * 화면에는 안 보이고 스크린리더만 읽는 라벨.
 * GeneratePress에도 같은 클래스가 있지만, 부모 CSS 로딩 순서나
 * 최적화 플러그인에 영향받지 않도록 자식 테마에서도 정의합니다.
 */
.hb-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hb-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	font-size: 16px; /* 16px 미만이면 iOS에서 입력 시 화면이 확대됩니다 */
	line-height: 1.4;
	color: var(--hb-text);
	background: #fff;
	border: 1px solid var(--hb-border-strong);
	border-radius: 4px;
	box-shadow: none;
}

.hb-search input[type="search"]:focus {
	border-color: var(--hb-primary);
	outline: 2px solid rgba(23, 97, 126, .18);
	outline-offset: 0;
}

.hb-search button {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 18px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	background: var(--hb-primary);
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

.hb-search button:hover,
.hb-search button:focus {
	background: var(--hb-primary-dark);
}


/* ============================================================
   게시판 본체
   ============================================================ */

.hb-board {
	background: var(--hb-surface);
	border-top: 2px solid var(--hb-primary);
	border-bottom: 1px solid var(--hb-border-strong);
}

.hb-head,
.hb-row {
	display: grid;
	/* minmax(0,1fr) — 제목이 길어도 날짜 칸을 밀어내지 않습니다 */
	grid-template-columns: var(--hb-col-cat) minmax(0, 1fr) var(--hb-col-date);
	align-items: center;
	column-gap: 14px;
	padding: 0 16px;
	min-height: var(--hb-row-h);
	border-bottom: 1px solid var(--hb-border);
}

.hb-row:last-child {
	border-bottom: 0;
}

/* 머리글 */
.hb-head {
	min-height: 44px;
	font-size: 14px;
	font-weight: 700;
	color: var(--hb-text);
	background: #fafbfc;
}

.hb-head .hb-c-date,
.hb-row .hb-c-date {
	text-align: center;
}

/* 행 hover */
.hb-row:hover {
	background: var(--hb-row-hover);
}

/* ── 분류 열 ── */
.hb-c-cat {
	overflow: hidden;
	font-size: 13px;
	color: var(--hb-text-sub);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hb-c-cat a {
	color: var(--hb-text-sub);
	text-decoration: none;
}

.hb-c-cat a:hover {
	color: var(--hb-primary);
	text-decoration: underline;
}

/* ── 제목 열 ── */
.hb-c-title {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0; /* grid 자식 축소 허용 — 말줄임의 전제 조건 */
	font-size: 15px;
}

.hb-c-title > a {
	overflow: hidden;
	color: var(--hb-text);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hb-c-title > a:hover {
	color: var(--hb-primary);
	text-decoration: underline;
}

.hb-badge {
	flex: 0 0 auto;
	padding: 2px 7px;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	background: var(--hb-primary);
	border-radius: 3px;
}

.hb-count {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #c0392b;
}

/* ── 작성일 열 ── */
.hb-c-date {
	font-size: 13px;
	color: var(--hb-text-sub);
	white-space: nowrap;
}

/* ── 공지 행 ── */
.hb-row--notice {
	background: var(--hb-notice-bg);
}

.hb-row--notice:hover {
	background: #e9f1f6;
}

.hb-row--notice .hb-c-title > a {
	font-weight: 600;
}


/* ============================================================
   스킨: 썸네일형  (body.hb-skin-thumb)

   켜는 곳: 외모 → 사용자 정의하기 → Hanboard 게시판 → 게시판 모양

   PC에서만 썸네일이 붙습니다. 768px 이하에서는 썸네일 열을 숨겨
   제목 중심 2열로 돌아갑니다 (아래 모바일 구역 참고).

   아래 규칙은 전부 .hb-skin-thumb 안에만 적용되므로
   기본형에는 아무 영향이 없습니다.
   ============================================================ */

.hb-skin-thumb {
	--hb-col-thumb: 76px;   /* 썸네일 열 너비 */
	--hb-row-h:     78px;   /* 썸네일에 맞춰 행을 높인다 */
}

.hb-skin-thumb .hb-head,
.hb-skin-thumb .hb-row {
	grid-template-columns:
		var(--hb-col-thumb)
		var(--hb-col-cat)
		minmax(0, 1fr)
		var(--hb-col-date);
	padding-top: 8px;
	padding-bottom: 8px;
}

.hb-skin-thumb .hb-head {
	min-height: 44px;
	padding-top: 0;
	padding-bottom: 0;
}

/* ── 썸네일 상자 ──
   크기를 고정해 이미지가 늦게 도착해도 행이 밀리지 않습니다(CLS 방지). */
.hb-c-thumb {
	display: block;
	width: 64px;
	height: 48px;
	overflow: hidden;
	background: #eef1f4;
	border: 1px solid var(--hb-border);
	border-radius: 4px;
}

.hb-head .hb-c-thumb {
	background: none;
	border: 0;
	height: auto;
}

.hb-c-thumb a {
	display: block;
	width: 100%;
	height: 100%;
}

.hb-c-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 대표 이미지가 없는 글 — 빈 칸이 아니라 회색 판으로 채워 줄을 맞춥니다 */
.hb-thumb-none {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 46%, var(--hb-border) 46%,
			var(--hb-border) 54%, transparent 54%),
		#f2f5f7;
}

@media (max-width: 1024px) {
	.hb-skin-thumb {
		--hb-col-thumb: 68px;
	}
}

@media (max-width: 768px) {

	.hb-skin-thumb {
		--hb-col-thumb: 62px;
		--hb-row-h: 0;
	}

	/* 모바일: 썸네일 | 제목 | 날짜 (분류 열은 기본형과 동일하게 숨김) */
	.hb-skin-thumb .hb-head,
	.hb-skin-thumb .hb-row {
		grid-template-columns: var(--hb-col-thumb) minmax(0, 1fr) 56px;
		align-items: center;
	}

	.hb-c-thumb {
		width: 56px;
		height: 42px;
	}

	.hb-skin-thumb .hb-c-date {
		align-self: center;
		padding-top: 0;
	}
}

@media (max-width: 400px) {

	.hb-skin-thumb {
		--hb-col-thumb: 54px;
	}

	.hb-skin-thumb .hb-head,
	.hb-skin-thumb .hb-row {
		grid-template-columns: var(--hb-col-thumb) minmax(0, 1fr) 50px;
	}

	.hb-c-thumb {
		width: 48px;
		height: 38px;
	}
}


/* ============================================================
   페이지 번호 — 부모(GeneratePress)가 출력하는 것을 다듬기만 함
   ============================================================ */

.hb-board-page .paging-navigation,
.hb-board-page .navigation.pagination {
	margin-top: 22px;
	text-align: center;
}

.hb-board-page .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.hb-board-page .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	font-size: 14px;
	color: var(--hb-text);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--hb-border-strong);
	border-radius: 4px;
}

.hb-board-page .nav-links .page-numbers:hover {
	border-color: var(--hb-primary);
	color: var(--hb-primary);
}

.hb-board-page .nav-links .page-numbers.current {
	font-weight: 700;
	color: #fff;
	background: var(--hb-primary);
	border-color: var(--hb-primary);
}


/* ============================================================
   본문 화면 넘침 방지 (글 상세)
   ============================================================ */

.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object {
	max-width: 100%;
	height: auto;
}

/* 광고 삽입 코드가 컨테이너를 밀어내는 것을 막습니다 */
.entry-content ins,
.entry-content .adsbygoogle {
	max-width: 100%;
	overflow: hidden;
}

/* 넓은 표와 코드 블록은 가로 스크롤 */
.entry-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content pre {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.entry-content {
	word-break: break-word;
	overflow-wrap: anywhere;
}


/* ============================================================
   태블릿 (769px ~ 1024px)
   ============================================================ */

@media (max-width: 1024px) {
	:root {
		--hb-col-cat:  112px;
		--hb-col-date: 92px;
	}
}


/* ============================================================
   스마트폰 (768px 이하) — 분류 열을 숨기고 2열로
   ============================================================ */

@media (max-width: 768px) {

	.hb-toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.hb-toolbar__title {
		font-size: 18px;
	}

	.hb-search {
		flex: 1 1 auto;
	}

	.hb-search input[type="search"],
	.hb-search button {
		height: 44px; /* 터치 목표 최소 크기 */
	}

	/* 분류 열 제거 → 제목 | 날짜 */
	.hb-head .hb-c-cat,
	.hb-row .hb-c-cat {
		display: none;
	}

	.hb-head,
	.hb-row {
		grid-template-columns: minmax(0, 1fr) 56px;
		column-gap: 10px;
		padding: 10px 12px;
		min-height: 0;
	}

	.hb-head {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/*
	 * 긴 제목은 최대 2줄까지.
	 *
	 * 줄 수 제한을 <a>가 아니라 칸 전체에 겁니다. 그래야 공지 뱃지와
	 * 댓글 수가 제목과 같은 줄에 이어져 흐르고, 행 높이가 들쭉날쭉해지지
	 * 않습니다. (flex로 두면 댓글 수가 혼자 다음 줄로 떨어집니다.)
	 */
	.hb-c-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		font-size: 15px;
		line-height: 1.45;
	}

	.hb-c-title > a {
		display: inline;
		overflow: visible;
		white-space: normal;
		text-overflow: clip;
	}

	.hb-badge,
	.hb-count {
		display: inline;
		vertical-align: baseline;
	}

	.hb-badge {
		margin-right: 2px;
	}

	/* 날짜에서 연도 숨김: 2026.08.03 → 08.03 */
	.hb-year {
		display: none;
	}

	.hb-c-date {
		align-self: flex-start;
		padding-top: 2px;
		font-size: 12px;
	}

	.hb-board-page .nav-links .page-numbers {
		min-width: 40px;
		height: 40px;
	}
}


/* ============================================================
   작은 스마트폰 (400px 이하)
   ============================================================ */

@media (max-width: 400px) {

	.hb-head,
	.hb-row {
		grid-template-columns: minmax(0, 1fr) 50px;
		column-gap: 8px;
		padding: 10px;
	}

	.hb-c-title {
		font-size: 14.5px;
	}

	.hb-c-date {
		font-size: 11.5px;
	}
}


/* ============================================================
   접근성 — 키보드 포커스 표시
   ============================================================ */

.hb-row a:focus-visible,
.hb-search button:focus-visible {
	outline: 2px solid var(--hb-primary);
	outline-offset: 2px;
}


/* ============================================================
   ============================================================
   글 상세 화면 — Daum 기사 레이아웃 기준

   수치는 v.daum.net 기사 페이지를 getComputedStyle로 실측한 값입니다.
   전부 변수로 빼두었으니 값만 고치면 전체가 따라 바뀝니다.
   ============================================================
   ============================================================ */

:root {
	/* ── 폭 ──
	   가로 폭은 사용자 정의하기에서 정합니다. 여기 값은
	   본문 안쪽 여백과 고정 광고 위치 계산에만 씁니다.     */
	--hb-article-pad:   40px;   /* 본문 안쪽 여백 */
	--hb-header-h:      60px;   /* 헤더 높이 — 고정 광고가 멈출 위치 */
	--hb-col-gap:       16px;   /* 고정 광고와 헤더 사이 여유 */

	/* ── 색 ── */
	--hb-page-bg:     #f2f4f7;
	--hb-article-bg:  #ffffff;
	--hb-ink:         #000000;
	--hb-ink-meta:    rgba(0, 0, 0, .56);
	--hb-ink-caption: #828282;

	/* ── 글자 (PC) ── */
	--hb-title-size:    30px;
	--hb-title-lh:      42px;
	--hb-body-size:     17px;
	--hb-body-lh:       27px;
	--hb-para-gap:      30px;
	--hb-h2-size:       22px;
	--hb-h3-size:       19px;
	--hb-caption-size:  14px;
	--hb-meta-size:     14px;

	/* ── 사이드바 ── */
	--hb-aside-title:   17px;
	--hb-aside-gap:     16px;
	--hb-aside-item:    15px;
}


/* ── 폭과 배치는 GeneratePress가 정합니다 ──────────────────

   사이드바 배치와 좌·우 폭(%)은 전부 사용자 정의하기에서 정하세요.
     외모 → 사용자 정의하기 → 레이아웃 → 컨테이너   (전체 폭)
     외모 → 사용자 정의하기 → 레이아웃 → 사이드바   (배치, 좌·우 %)

   테마는 폭을 강제하지 않습니다. 여기서 폭을 정해 버리면
   사용자 정의하기의 값이 무시되기 때문입니다.

   ── 좌 300 / 본문 750 / 우 300 을 원한다면 ──
     컨테이너 너비        1350
     Left Sidebar Width     22 %   → 297px
     Right Sidebar Width    22 %   → 297px
     가운데는 나머지 56 %          → 756px

   위젯이 없는 사이드바는 functions.php 5번이 배치에서 빼므로,
   한쪽만 채우면 가운데가 자동으로 넓어집니다.               */

.hb-single {
	background: var(--hb-page-bg);
}

.hb-single .inside-article {
	padding: var(--hb-article-pad);
	background: var(--hb-article-bg);
}


/* ── 본문 글자 ─────────────────────────────────────────────── */

.hb-single .entry-title {
	font-size: var(--hb-title-size);
	font-weight: 700;
	line-height: var(--hb-title-lh);
	color: var(--hb-ink);
	word-break: keep-all; /* 한글은 단어 중간에서 끊지 않습니다 */
}

.hb-single .entry-meta,
.hb-single .posted-on,
.hb-single .byline {
	font-size: var(--hb-meta-size);
	color: var(--hb-ink-meta);
}

.hb-single .entry-content {
	font-size: var(--hb-body-size);
	line-height: var(--hb-body-lh);
	color: var(--hb-ink);
}

.hb-single .entry-content p {
	margin-top: var(--hb-para-gap);
	margin-bottom: var(--hb-para-gap);
}

.hb-single .entry-content > *:first-child { margin-top: 0; }
.hb-single .entry-content > *:last-child  { margin-bottom: 0; }

/*
 * 소제목 바로 다음 요소의 위 여백을 없앱니다.
 *
 * CSS 여백 상쇄(margin collapsing) 때문에, 이걸 안 하면 소제목의
 * margin-bottom(14px)이 문단의 margin-top(30px)에 먹혀서
 * 제목과 본문이 30px 떨어집니다. 제목이 아래 문단이 아니라
 * 위 문단에 붙어 보이게 됩니다.
 */
.hb-single .entry-content h2 + *,
.hb-single .entry-content h3 + *,
.hb-single .entry-content h4 + * {
	margin-top: 0;
}

/*
 * 소제목 — Daum 기사에는 소제목이 없어 측정값이 없습니다.
 * 본문 17px에 맞춰 정한 값입니다.
 * "증상 / 원인 / 확인사항 / 해결과정" 구조에서 글의 뼈대가 됩니다.
 */
.hb-single .entry-content h2 {
	margin: 40px 0 14px;
	font-size: var(--hb-h2-size);
	font-weight: 700;
	line-height: 1.45;
	color: var(--hb-ink);
	word-break: keep-all;
}

.hb-single .entry-content h3 {
	margin: 30px 0 10px;
	font-size: var(--hb-h3-size);
	font-weight: 700;
	line-height: 1.5;
	color: var(--hb-ink);
	word-break: keep-all;
}

.hb-single .entry-content figcaption,
.hb-single .entry-content .wp-caption-text {
	margin-top: 8px;
	font-size: var(--hb-caption-size);
	line-height: 1.6;
	color: var(--hb-ink-caption);
	text-align: center;
}


/* ── 사이드바 블록 ──────────────────────────────────────────
   Daum: 블록 제목 17px/700, 제목 아래 구분선 없음, 블록 간격 16px */

.hb-single #right-sidebar .widget,
.hb-single #left-sidebar .widget,
.hb-board-page #right-sidebar .widget,
.hb-board-page #left-sidebar .widget {
	padding: 20px;
	margin-bottom: var(--hb-aside-gap);
	background: var(--hb-article-bg);
}

.hb-single #right-sidebar .widget:last-child,
.hb-single #left-sidebar .widget:last-child,
.hb-board-page #right-sidebar .widget:last-child,
.hb-board-page #left-sidebar .widget:last-child {
	margin-bottom: 0;
}

.hb-single #right-sidebar .widget-title,
.hb-single #left-sidebar .widget-title,
.hb-board-page #right-sidebar .widget-title,
.hb-board-page #left-sidebar .widget-title {
	margin: 0 0 14px;
	font-size: var(--hb-aside-title);
	font-weight: 700;
	line-height: 1.4;
	color: var(--hb-ink);
	border-bottom: 0; /* Daum은 제목 아래 선이 없습니다 */
}

/* 목록 */
.hb-side-list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hb-rank;
}

.hb-side-item {
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid #f0f2f5;
}

.hb-side-item:first-child { padding-top: 0; }
.hb-side-item:last-child  { padding-bottom: 0; border-bottom: 0; }

.hb-side-item a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: var(--hb-aside-item);
	line-height: 1.5;
	color: #26313b;
	text-decoration: none;
	word-break: keep-all;
}

.hb-side-item a:hover {
	color: var(--hb-primary);
	text-decoration: underline;
}

/* 순위 번호 — 많이 본 게시물에만 */
.hb-side-list--ranked .hb-side-item {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr);
	align-items: start;
	column-gap: 8px;
}

.hb-side-list--ranked .hb-side-item::before {
	counter-increment: hb-rank;
	content: counter(hb-rank);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--hb-primary);
}

/* 키워드 칩 */
.hb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}

.hb-chip {
	padding: 5px 11px;
	font-size: 13px;
	line-height: 1.4;
	color: #37474f;
	text-decoration: none;
	background: #eef1f4;
	border-radius: 20px;
}

.hb-chip:hover {
	color: #fff;
	background: var(--hb-primary);
}


/* ── 사이드바 하단 고정 광고 ────────────────────────────────
   구글 자동 광고의 "사이드 레일" 형식과 같은 방식입니다.
   부모(#right-sidebar)가 본문 높이만큼 늘어나 있어야 움직입니다. */

.hb-sticky-wrap {
	position: sticky;
	top: calc(var(--hb-header-h) + var(--hb-col-gap));
}

.hb-single #right-sidebar .hb-sticky-ad {
	margin-bottom: 0;
}


/* ============================================================
   모바일 (768px 이하)
   ============================================================ */

@media (max-width: 768px) {

	:root {
		--hb-page-bg:     #ffffff;  /* 모바일은 흰 카드 개념을 없앱니다 */
		--hb-article-pad:    16px;

		--hb-title-size:     26px;
		--hb-title-lh:       35px;
		--hb-body-size:      18px;  /* PC 17px보다 큽니다 — 손에 들고 읽는 거리 */
		--hb-body-lh:        29px;
		--hb-h2-size:        21px;
		--hb-h3-size:      18.5px;
		--hb-meta-size:      13px;
	}

	/*
	 * 모바일 세로 배치는 GeneratePress가 알아서 합니다.
	 * 사이드바 안쪽 여백만 좁혀 줍니다.
	 */
	#left-sidebar .widget,
	#right-sidebar .widget {
		padding: 16px;
		border-top: 8px solid #f2f4f7;
	}

	/* 모바일에서는 따라다니지 않습니다 (화면을 가림) */
	.hb-sticky-wrap {
		position: static;
	}

	/* 목록: PC만 썸네일, 모바일은 제목 중심 2열 */
	.hb-skin-thumb .hb-c-thumb {
		display: none;
	}

	.hb-skin-thumb .hb-head,
	.hb-skin-thumb .hb-row {
		grid-template-columns: minmax(0, 1fr) 56px;
	}
}


/* ── 모바일 메뉴 아래 광고 ──────────────────────────────────
   메뉴를 펼쳤을 때만 나옵니다. GeneratePress가 메뉴를 열면
   .main-navigation 에 .toggled 클래스를 붙입니다. */

.hb-menu-ad {
	display: none;
	padding: 12px 16px;
	overflow: hidden;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid var(--hb-border);
}

.main-navigation.toggled ~ .hb-menu-ad {
	display: block;
}

.hb-menu-ad img,
.hb-menu-ad ins,
.hb-menu-ad iframe {
	max-width: 100%;
}

@media (min-width: 769px) {
	.hb-menu-ad {
		display: none !important; /* PC에서는 쓰지 않습니다 */
	}
}


/* ── 작은 스마트폰 (400px 이하) ─────────────────────────────── */

@media (max-width: 400px) {

	:root {
		--hb-title-size: 24px;
		--hb-title-lh:   33px;
	}

	.hb-skin-thumb .hb-head,
	.hb-skin-thumb .hb-row {
		grid-template-columns: minmax(0, 1fr) 50px;
	}
}