/* ============================================================
   HealthBeauty — 레이아웃 & 컴포넌트
   ============================================================ */

.hb-container {
	width: 100%;
	max-width: var(--hb-container);
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* ----- 2단 레이아웃 (본문 + 사이드바) ----- */
.hb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	margin-top: 40px;
	margin-bottom: 64px;
	align-items: start;
}
body.no-sidebar .hb-layout { grid-template-columns: minmax(0, 1fr); }
body.no-sidebar .hb-sidebar { display: none; }

/* ============================================================
   헤더 / 네비게이션
   ============================================================ */
.hb-header {
	position: sticky;        /* 메뉴 바를 상단에 고정 */
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--hb-border);
}
.hb-header.is-scrolled { box-shadow: 0 2px 12px rgba(14,14,15,.06); }

.hb-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 24px;
	min-height: var(--hb-header-h);
	max-width: var(--hb-container);
	margin: 0 auto;
}
.hb-primary-nav { flex-shrink: 0; }

.hb-branding { margin-right: auto; flex-shrink: 0; }
.hb-site-title { margin: 0; font-size: var(--hb-fs-4); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.hb-site-title a { color: var(--hb-900); }
.hb-branding img, .custom-logo { max-height: 44px; width: auto; }

.hb-primary-nav .hb-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0; padding: 0;
}
.hb-menu li { position: relative; }
.hb-menu a {
	display: block;
	padding: 10px 14px;
	font-size: var(--hb-fs-7);
	font-weight: 600;
	color: var(--hb-700);
	border-radius: var(--hb-radius-sm);
	white-space: nowrap;   /* 메뉴 글자가 세로로 깨지지 않게 */
}
.hb-menu a:hover { color: var(--hb-900); background: var(--hb-50); }
.hb-menu .current-menu-item > a,
.hb-menu .current_page_item > a { color: var(--hb-900); }
.hb-menu .current-menu-item > a::after,
.hb-menu .menu-item:hover > a::after { }

/* 서브메뉴 */
.hb-menu .sub-menu {
	position: absolute;
	top: 100%; left: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius-sm);
	box-shadow: var(--hb-shadow);
	padding: 6px;
	list-style: none;
	margin: 6px 0 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: .15s ease;
}
.hb-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* 토글 버튼 (모바일) */
.hb-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px; height: 40px;
	background: none; border: 0; cursor: pointer; padding: 8px;
}
.hb-nav-toggle span { display:block; height: 2px; background: var(--hb-900); border-radius: 2px; transition:.2s; }
body.hb-nav-open .hb-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.hb-nav-open .hb-nav-toggle span:nth-child(2) { opacity: 0; }
body.hb-nav-open .hb-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hb-search-toggle {
	display: inline-flex; align-items:center; justify-content:center;
	width: 40px; height: 40px;
	background: none; border: 0; cursor: pointer; color: var(--hb-700); border-radius: 50%;
}
.hb-search-toggle:hover { background: var(--hb-50); color: var(--hb-900); }

.hb-search-panel {
	border-top: 1px solid var(--hb-border);
	background: #fff;
	padding: 16px 0;
}

/* ============================================================
   검색 폼
   ============================================================ */
.hb-searchform { display: flex; gap: 0; max-width: 560px; }
.hb-searchform__input {
	flex: 1;
	border: 1px solid var(--hb-300);
	border-right: 0;
	border-radius: var(--hb-radius-sm) 0 0 var(--hb-radius-sm);
	padding: 12px 16px;
	font-size: var(--hb-fs-7);
	font-family: inherit;
	outline: none;
}
.hb-searchform__input:focus { border-color: var(--hb-accent); }
.hb-searchform__btn {
	border: 1px solid var(--hb-900);
	background: var(--hb-900);
	color: #fff;
	padding: 0 18px;
	border-radius: 0 var(--hb-radius-sm) var(--hb-radius-sm) 0;
	cursor: pointer;
	display: inline-flex; align-items: center;
}
.hb-searchform__btn:hover { background: var(--hb-accent); border-color: var(--hb-accent); }

/* ============================================================
   페이지 헤더 / 섹션 제목 / 브레드크럼
   ============================================================ */
.hb-page-head { margin: 8px 0 28px; }
.hb-page-title { font-size: var(--hb-fs-2); margin: 0; }
.hb-page-title span { color: var(--hb-accent); }
.hb-page-desc { color: var(--hb-muted); margin-top: 8px; }

.hb-section-title {
	font-size: var(--hb-fs-4);
	margin: 0 0 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--hb-900);
	display: inline-block;
}

.hb-breadcrumb { font-size: var(--hb-fs-8); color: var(--hb-muted); margin-bottom: 14px; }
.hb-breadcrumb a { color: var(--hb-muted); }
.hb-breadcrumb a:hover { color: var(--hb-accent); }
.hb-breadcrumb .current { color: var(--hb-700); }
.hb-breadcrumb span { margin: 0 4px; color: var(--hb-300); }

/* ============================================================
   카드 그리드
   ============================================================ */
.hb-grid { display: grid; gap: var(--hb-gap); }
.hb-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.hb-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hb-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.hb-grid__full { grid-column: 1 / -1; }

/* ----- 홈: 카테고리 균형 섹션 ----- */
.hb-home { margin-top: 8px; margin-bottom: 64px; }
.hb-cat-section { margin: 48px 0; }
.hb-cat-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 2px solid var(--hb-900);
	margin-bottom: 24px;
	padding-bottom: 10px;
}
.hb-cat-section__head .hb-section-title { border: 0; margin: 0; padding: 0; }
.hb-more { font-size: var(--hb-fs-7); font-weight: 600; color: var(--hb-600); white-space: nowrap; }
.hb-more:hover { color: var(--hb-accent); }
.hb-ad-row { margin: 32px 0; text-align: center; }

/* ----- 카드 ----- */
.hb-card { display: flex; flex-direction: column; }
.hb-card__thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--hb-radius);
	background: var(--hb-100);
}
.hb-card__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s ease;
}
.hb-card:hover .hb-card__thumb img { transform: scale(1.05); }
.hb-card__noimg { display:block; width:100%; height:100%; background: linear-gradient(135deg, var(--hb-100), var(--hb-200)); }

.hb-card__body { padding-top: 16px; }
.hb-card__title {
	font-size: var(--hb-fs-5);
	margin: 10px 0 8px;
	line-height: 1.3;
}
.hb-card__title a { color: var(--hb-900); }
.hb-card__title a:hover { color: var(--hb-accent); }
.hb-card__excerpt { color: var(--hb-muted); font-size: var(--hb-fs-7); margin: 0 0 12px; }

/* 카테고리 뱃지 */
.hb-cat-badge {
	display: inline-block;
	font-size: var(--hb-fs-8);
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--hb-accent-dark);
	background: var(--hb-accent-soft);
	padding: 4px 10px;
	border-radius: 100px;
}
.hb-cat-badge:hover { background: var(--hb-accent); color: #fff; }

/* 메타 */
.hb-meta { font-size: var(--hb-fs-8); color: var(--hb-500); display:flex; flex-wrap:wrap; align-items:center; gap: 6px; }
.hb-meta__author { font-weight: 600; color: var(--hb-700); }
.hb-meta__sep { color: var(--hb-300); }

/* ============================================================
   히어로 (홈 상단)
   ============================================================ */
.hb-hero {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--hb-gap);
	margin-top: 36px;
	margin-bottom: 56px;
}
.hb-hero__feature .hb-card__title { font-size: var(--hb-fs-2); }
.hb-hero__feature .hb-card__thumb { border-radius: var(--hb-radius); }
.hb-hero__list { display: flex; flex-direction: column; gap: 18px; }

/* small 카드: 가로형 */
.hb-card--small { flex-direction: row; gap: 14px; align-items: center; }
.hb-card--small .hb-card__thumb { width: 116px; flex: 0 0 116px; aspect-ratio: 1 / 1; border-radius: var(--hb-radius-sm); }
.hb-card--small .hb-card__body { padding-top: 0; }
.hb-card--small .hb-card__title { font-size: var(--hb-fs-7); margin: 6px 0; }
.hb-hero__list .hb-card--small + .hb-card--small { border-top: 1px solid var(--hb-border); padding-top: 18px; }

/* ============================================================
   단일 글
   ============================================================ */
.hb-single { max-width: 760px; }
.hb-single__head { margin-bottom: 24px; }
.hb-updated { font-size: var(--hb-fs-8); color: var(--hb-500); margin: 8px 0 0; }
.hb-single__title { font-size: var(--hb-fs-1); line-height: 1.15; margin: 14px 0 16px; }
.hb-single__thumb { margin: 0 0 32px; border-radius: var(--hb-radius); overflow: hidden; }
.hb-single__thumb img { width: 100%; }

.hb-single__content {
	font-size: 17px;
	line-height: 1.8;
	color: var(--hb-800);
}
.hb-single__content h2 {
	font-size: 25px;
	font-weight: 800;
	line-height: 1.35;
	margin: 2em 0 .7em;
	padding: 4px 0 14px 16px;
	position: relative;
	border-bottom: 2px solid var(--hb-200);
}
.hb-single__content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 16px;
	width: 5px;
	background: var(--hb-accent);
	border-radius: 3px;
}
.hb-single__content h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	margin: 1.8em 0 .5em;
	padding-left: 18px;
	position: relative;
}
.hb-single__content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .38em;
	width: 10px;
	height: 10px;
	background: var(--hb-accent);
	border-radius: 2px;
}
.hb-single__content h4 {
	font-size: 17px;
	font-weight: 700;
	margin: 1.5em 0 .4em;
	color: var(--hb-800);
}

/* 본문 FAQ 아코디언(details/summary) — 화살표 오른쪽 정렬 + 열림 시 회전 */
.hb-single__content details > summary br { display: none; }
.hb-single__content details > summary > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.hb-single__content details > summary > span:last-of-type {
	margin-left: auto;
	flex: 0 0 auto;
	line-height: 1;
	transition: transform .2s ease;
}
.hb-single__content details[open] > summary > span:last-of-type { transform: rotate(180deg); }
.hb-single__content img { border-radius: var(--hb-radius); margin: 1.4em auto; }
.hb-single__content a { color: var(--hb-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.hb-single__content a:hover { color: var(--hb-accent); }
.hb-single__content figure { margin: 1.6em 0; }
.hb-single__content ul, .hb-single__content ol { margin-bottom: 1.4em; }
.hb-single__content li { margin-bottom: .4em; }

/* 태그 */
.hb-tags { margin: 32px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hb-tags a {
	font-size: var(--hb-fs-8);
	color: var(--hb-700);
	background: var(--hb-50);
	border: 1px solid var(--hb-border);
	padding: 5px 12px;
	border-radius: 100px;
}
.hb-tags a:hover { background: var(--hb-900); color: #fff; border-color: var(--hb-900); }

/* 관련 글 */
.hb-related { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--hb-border); }

/* ============================================================
   사이드바
   ============================================================ */
.hb-sidebar { position: sticky; top: 24px; }
.hb-sidebar .widget { margin-bottom: 36px; }
.widget-title {
	font-size: var(--hb-fs-6);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--hb-900);
}
.hb-sidebar ul { list-style: none; margin: 0; padding: 0; }
.hb-sidebar li { padding: 8px 0; border-bottom: 1px solid var(--hb-border); font-size: var(--hb-fs-7); }
.hb-sidebar li:last-child { border-bottom: 0; }
.hb-sidebar a { color: var(--hb-700); }
.hb-sidebar a:hover { color: var(--hb-accent); }

/* 사이드바 제목 3종(최근글·카테고리·인기글) 통일 — 같은 크기 + 같은 밑줄 */
.hb-sidebar .widget-title,
.hb-sidebar .wp-block-heading {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 16px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 2px solid var(--hb-900);
}

/* 사이드바 인기 글 — 번호 매긴 세로 목록 (ol 기본 번호 제거 → 이중번호 방지) */
.hb-side-rank { list-style: none !important; margin: 0; padding: 0; }
.hb-side-rank > li { list-style: none !important; }
.hb-sidebar .hb-side-rank li {
	display: flex; gap: 10px; align-items: baseline;
	padding: 10px 0; border-bottom: 1px solid var(--hb-border); font-size: var(--hb-fs-7);
}
.hb-sidebar .hb-side-rank li:last-child { border-bottom: 0; }
.hb-side-rank__num { flex: 0 0 auto; min-width: 14px; font-weight: 800; font-size: 15px; color: var(--hb-accent); }
.hb-side-rank a { color: var(--hb-700); line-height: 1.4; }
.hb-side-rank a:hover { color: var(--hb-accent); }

/* 검색 블록 — 중복 '검색' 라벨 제거 + 입력칸 높이 축소 */
.wp-block-search__label { display: none; }
.wp-block-search__input { padding: 7px 10px; min-height: 0; line-height: 1.3; border-color: var(--hb-300); }
.wp-block-search__button { padding: 7px 14px; }

/* 태그 클라우드 — 크기 제각각(번잡) → 동일 크기 알약으로 통일 */
.tagcloud,
.wp-block-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; line-height: 1; }
.tagcloud a,
.wp-block-tag-cloud a {
	font-size: 13px !important;   /* 워드프레스가 태그마다 다르게 주는 inline 크기 무력화 */
	background: var(--hb-50);
	border: 1px solid var(--hb-border);
	color: var(--hb-700);
	padding: 6px 12px;
	border-radius: 100px;
	text-decoration: none;
	line-height: 1.2;
}
.tagcloud a:hover,
.wp-block-tag-cloud a:hover { background: var(--hb-accent); color: #fff; border-color: var(--hb-accent); }
.tagcloud .tag-link-count,
.wp-block-tag-cloud .tag-link-count { display: none; }   /* (2) 같은 숫자 숨김 — 더 깔끔 */

/* ============================================================
   광고 슬롯
   ============================================================ */
.hb-ad {
	margin: 28px auto;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}
.hb-ad__label {
	display: block;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hb-400);
	margin-bottom: 6px;
}
.hb-ad ins { min-height: 90px; }
/* 광고를 칸 너비에 맞춰 반응형으로 — 넘쳐서 잘리는 것 방지 */
.hb-ad ins.adsbygoogle { display: block !important; width: 100% !important; max-width: 100%; }
/* CLS 방지 — 광고 로드 전에 자리를 미리 예약해 내용이 밀리지 않게 */
.hb-ad--post_top,
.hb-ad--in_content,
.hb-ad--post_bottom,
.hb-ad--in_feed,
.hb-ad--sidebar { min-height: 280px; }
.hb-ad--header_below { min-height: 120px; }
.hb-ad--sidebar { margin-top: 0; margin-bottom: 36px; }
.hb-ad-leaderboard { margin-top: 16px; }
.hb-ad--header_below { margin: 0 auto; }
@media (max-width: 640px) {
	.hb-ad--post_top,
	.hb-ad--in_content,
	.hb-ad--post_bottom,
	.hb-ad--in_feed,
	.hb-ad--sidebar { min-height: 260px; }
}
.hb-ad--in_feed { background: var(--hb-50); border-radius: var(--hb-radius); padding: 16px; }

/* ============================================================
   페이지네이션
   ============================================================ */
.hb-pagination, .pagination, .nav-links {
	display: flex; flex-wrap: wrap; gap: 8px;
	justify-content: center;
	margin: 48px 0 0;
}
.hb-pagination a, .hb-pagination span,
.nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 12px;
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius-sm);
	font-weight: 600; font-size: var(--hb-fs-7);
	color: var(--hb-700);
}
.hb-pagination a:hover, .nav-links a.page-numbers:hover { border-color: var(--hb-900); color: var(--hb-900); }
.hb-pagination .current, .nav-links .current {
	background: var(--hb-900); color: #fff; border-color: var(--hb-900);
}

/* ============================================================
   버튼
   ============================================================ */
.hb-btn {
	display: inline-block;
	background: var(--hb-900); color: #fff;
	padding: 12px 24px; border-radius: var(--hb-radius-sm);
	font-weight: 600;
}
.hb-btn:hover { background: var(--hb-accent); color: #fff; }

/* ============================================================
   404
   ============================================================ */
.hb-404 { text-align: center; padding: 80px 0; max-width: 560px; margin: 0 auto; }
.hb-404__code { font-size: 96px; font-weight: 800; color: var(--hb-200); line-height: 1; margin: 0; }
.hb-404__title { font-size: var(--hb-fs-2); margin: 0 0 12px; }
.hb-404 .hb-searchform { margin: 24px auto; }
.hb-404__home { margin-top: 24px; }

/* ============================================================
   푸터
   ============================================================ */
.hb-footer {
	background: var(--hb-900);
	color: var(--hb-300);
	margin-top: 80px;
	padding: 56px 0 28px;
}
.hb-footer a { color: var(--hb-200); }
.hb-footer a:hover { color: var(--hb-accent); }
.hb-footer__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(255,255,255,.12);
	font-size: var(--hb-fs-7);
}
.hb-footer__cats-label { font-weight: 800; color: #fff; margin-right: 4px; }
.hb-footer__cats a { color: var(--hb-300); font-weight: 600; }
.hb-footer__cats a:hover { color: var(--hb-accent); }

.hb-footer__widgets {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
.hb-footer .widget-title { color: #fff; border-bottom-color: rgba(255,255,255,.2); }
.hb-footer .widget li { border-bottom-color: rgba(255,255,255,.08); }
.hb-footer .widget a { color: var(--hb-300); }

.hb-footer__bottom {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
	padding: 32px 0;
}
.hb-footer__bottom .hb-site-title { color: #fff; font-size: var(--hb-fs-4); }
.hb-footer__desc { color: var(--hb-500); font-size: var(--hb-fs-7); margin: 8px 0 0; max-width: 420px; }
.hb-footer__menu { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; font-size: var(--hb-fs-7); }
.hb-footer__copy {
	text-align: center; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: var(--hb-fs-8); color: var(--hb-500);
}
.hb-footer__copy p { margin: 4px 0; }

/* 위로 가기 */
.hb-top {
	position: fixed; bottom: 24px; right: 24px; z-index: 90;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--hb-900); color: #fff; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: var(--hb-shadow);
}
.hb-top:hover { background: var(--hb-accent); }

/* ============================================================
   댓글 (간단 스타일)
   ============================================================ */
.comments-area { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--hb-border); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 16px 0; border-bottom: 1px solid var(--hb-border); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--hb-300);
	border-radius: var(--hb-radius-sm); font-family: inherit; margin-bottom: 12px;
}
.comment-form .submit, #submit {
	background: var(--hb-900); color: #fff; border: 0;
	padding: 12px 24px; border-radius: var(--hb-radius-sm); cursor: pointer; font-weight: 600;
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 1024px) {
	.hb-layout { grid-template-columns: minmax(0,1fr) 280px; gap: 36px; }
	.hb-hero { grid-template-columns: 1fr; }
	.hb-hero__list { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
	.hb-hero__list .hb-card--small + .hb-card--small { border-top: 0; padding-top: 0; }
	.hb-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
	:root { --hb-fs-1: 30px; --hb-fs-2: 26px; }
	.hb-layout { grid-template-columns: minmax(0,1fr); }
	.hb-sidebar { position: static; }
	.hb-footer__widgets { grid-template-columns: repeat(2,1fr); gap: 28px; }

	/* 모바일 메뉴 */
	.hb-nav-toggle { display: flex; order: -1; }
	.hb-primary-nav {
		position: fixed; inset: var(--hb-header-h) 0 0 auto;
		width: min(82vw, 320px);
		background: #fff;
		border-left: 1px solid var(--hb-border);
		transform: translateX(100%);
		transition: transform .25s ease;
		overflow-y: auto;
		box-shadow: -8px 0 24px rgba(0,0,0,.08);
		padding: 12px;
	}
	body.hb-nav-open .hb-primary-nav { transform: translateX(0); }
	.hb-primary-nav .hb-menu { flex-direction: column; align-items: stretch; gap: 2px; }
	.hb-menu a { padding: 14px; font-size: var(--hb-fs-6); border-radius: var(--hb-radius-sm); }
	.hb-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; border-left: 2px solid var(--hb-border);
		border-radius: 0; margin: 0 0 0 12px; padding: 0;
	}
}

@media (max-width: 640px) {
	.hb-grid--2, .hb-grid--3, .hb-grid--4 { grid-template-columns: 1fr; }
	.hb-hero__list { grid-template-columns: 1fr; }
	.hb-footer__widgets { grid-template-columns: 1fr; }
	.hb-footer__bottom { flex-direction: column; align-items: flex-start; }
	.hb-single__title { font-size: 26px; }
	.hb-single__content { font-size: 16px; }
}

/* ============================================================
   하이닥풍 뉴스포털 스킨
   ============================================================ */

/* 헤더 레드 상단 보더 + 유틸바 */
.hb-header { border-top: 3px solid var(--hb-accent); }
.hb-utilbar { background: var(--hb-50); border-bottom: 1px solid var(--hb-border); font-size: var(--hb-fs-8); color: var(--hb-500); }
.hb-utilbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
@media (max-width: 640px) { .hb-utilbar__tag { display: none; } }

/* 내비 레드 강조 (밑줄 슬라이드) */
.hb-menu a { font-weight: 700; }
.hb-menu a:hover { color: var(--hb-accent); background: transparent; }
.hb-menu .current-menu-item > a { color: var(--hb-accent); }
.hb-menu > li > a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px;
	background: var(--hb-accent); transform: scaleX(0); transform-origin: left; transition: transform .15s ease;
}
.hb-menu > li:hover > a::after,
.hb-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* 섹션 제목 — 레드 세로바 (뉴스풍) */
.hb-section-title {
	font-size: var(--hb-fs-4); font-weight: 800; line-height: 1.2;
	margin: 0 0 22px; padding: 0 0 0 14px; position: relative; display: inline-block; border: 0;
}
.hb-section-title::before {
	content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px;
	background: var(--hb-accent); border-radius: 2px;
}
.hb-cat-section__head { border-bottom: 2px solid var(--hb-900); }
.hb-cat-section__head .hb-section-title { margin: 0; padding: 0 0 0 14px; }

/* 카테고리 뱃지 — 솔리드 레드 작은 라벨 */
.hb-cat-badge {
	background: var(--hb-accent); color: #fff; border-radius: 3px;
	padding: 3px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.hb-cat-badge:hover { background: var(--hb-accent-dark); color: #fff; }

/* 본문 링크는 블루 허용 */
.hb-single__content a { color: var(--hb-blue-dark); }
.hb-single__content a:hover { color: var(--hb-accent); }

/* 톱 스토리 */
.hb-top { display: grid; grid-template-columns: 1.7fr 1fr; gap: 32px; margin: 28px 0 36px; align-items: start; }
.hb-top__lead, .hb-top__side { min-width: 0; }   /* 칸이 콘텐츠보다 작게 줄어들 수 있게 (찌그러짐 방지) */
.hb-top__lead .hb-card__title { font-size: var(--hb-fs-2); }
.hb-top__side { display: flex; flex-direction: column; }
.hb-list-item__title a { word-break: keep-all; overflow-wrap: anywhere; }

/* 리스트형 헤드라인 */
.hb-list-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hb-border); align-items: flex-start; }
.hb-list-item:first-child { padding-top: 0; }
.hb-list-item:last-child { border-bottom: 0; }
.hb-list-item__thumb { flex: 0 0 88px; width: 88px; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; background: var(--hb-100); }
.hb-list-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hb-list-item__body { min-width: 0; }
.hb-list-item__title { font-size: var(--hb-fs-7); line-height: 1.35; margin: 6px 0 4px; }
.hb-list-item__title a { color: var(--hb-900); }
.hb-list-item__title a:hover { color: var(--hb-accent); }

/* 인기 기사 랭킹 — 가로 스트립 */
.hb-ranking { margin: 44px 0; }
.hb-ranking__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); border-top: 2px solid var(--hb-900); }
.hb-ranking__item { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border-right: 1px solid var(--hb-border); min-width: 0; }
.hb-ranking__item:last-child { border-right: 0; }
.hb-ranking__num { flex: 0 0 auto; font-size: 20px; font-weight: 800; color: var(--hb-accent); line-height: 1; }
.hb-ranking__link { font-size: var(--hb-fs-7); line-height: 1.4; color: var(--hb-800); min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.hb-ranking__link:hover { color: var(--hb-accent); }

/* 홈 카테고리 카드는 제목 위주(뉴스풍 밀도) */
.hb-home .hb-card__title { font-size: var(--hb-fs-6); }
.hb-home .hb-card--default .hb-card__excerpt { display: none; }

/* 카테고리 섹션 안에서는 카드 뱃지 숨김(섹션 제목과 중복) — 섞인 목록엔 유지 */
.hb-cat-section--cat .hb-cat-badge { display: none; }

@media (max-width: 860px) {
	.hb-top { grid-template-columns: 1fr; gap: 24px; }
	.hb-ranking__list { grid-template-columns: repeat(2,1fr); }
	.hb-ranking__item:nth-child(2n) { border-right: 0; }
	.hb-ranking__item { border-bottom: 1px solid var(--hb-border); }
}
@media (max-width: 480px) {
	.hb-ranking__list { grid-template-columns: 1fr; }
	.hb-ranking__item { border-right: 0; }
}