/* ============================================================
   사장님 지원노트 — 글 목록 (한 줄에 하나)
   ------------------------------------------------------------
   설계 의도
   이 블로그의 제목은 "265만원", "가산세 20%", "시급 1.5배"처럼
   구체적인 숫자가 곧 핵심 정보입니다. 사장님들이 공고문에서
   중요한 금액에 형광펜을 긋는 그 행위를 인터페이스로 옮겼습니다.
   화면에서 색을 쓰는 곳은 형광펜 자국과 카테고리 점, 두 군데뿐이고
   나머지는 전부 갱지 톤과 헤어라인으로 조용하게 둡니다.

   한 줄에 하나씩 놓이므로 카드를 박스로 가두지 않습니다.
   구분선 하나면 충분하고, 테두리를 없앤 만큼 제목이 더 크게 읽힙니다.
   왼쪽 열은 사실(이미지·카테고리·날짜·조회수),
   오른쪽 열은 내용(제목·발췌)으로 역할을 나눴습니다.
   ========================================================== */

:root {
	--sjn-paper:  #FCFCFA;  /* 갱지에 가까운 배경 */
	--sjn-card:   #FFFFFF;
	--sjn-ink:    #16181D;  /* 본문 잉크 */
	--sjn-ink-2:  #565D6B;  /* 보조 텍스트 */
	--sjn-ink-3:  #8E949F;  /* 메타 */
	--sjn-rule:   #E7E5DF;  /* 헤어라인 */
	--sjn-rule-2: #D5D2CA;
	--sjn-hover:  #F5F3EE;  /* 줄 위에 마우스를 올렸을 때 */
	--sjn-band:   #F4F2ED;  /* 헤더·푸터 띠 */
	--sjn-mark:   #FFE86B;  /* 형광펜 */

	--sjn-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
	            system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

body,
button, input, select, textarea {
	font-family: var(--sjn-font);
}

body {
	background-color: var(--sjn-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── 카테고리 내비게이션 ─────────────────────────────────── */

.sjn-catnav {
	margin: 0 0 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--sjn-rule);
}

.sjn-catnav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjn-catnav__list li {
	margin: 0;
	list-style: none;
}

.sjn-catnav__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border: 1px solid var(--sjn-rule);
	border-radius: 999px;
	background: var(--sjn-card);
	color: var(--sjn-ink-2);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.sjn-catnav__item:hover,
.sjn-catnav__item:focus-visible {
	border-color: var(--sjn-rule-2);
	color: var(--sjn-ink);
	text-decoration: none;
}

.sjn-catnav__item.is-current {
	background: var(--sjn-ink);
	border-color: var(--sjn-ink);
	color: #fff;
}

.sjn-catnav__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cat, var(--sjn-ink-3));
	flex: none;
}

.sjn-catnav__item.is-current .sjn-catnav__dot {
	background: #fff;
}

.sjn-catnav__count {
	font-size: 0.72rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	opacity: .55;
}

/* ── 목록 ────────────────────────────────────────────────── */

.sjn-list {
	display: block;
	margin: 0;
}

/* ── 한 줄 ───────────────────────────────────────────────── */

.sjn-list .pcard {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	grid-template-areas:
		"media body"
		"facts body";
	column-gap: 26px;
	row-gap: 11px;
	align-items: start;

	margin: 0;
	padding: 24px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sjn-rule);
	border-radius: 3px;
	transition: background-color .15s ease, box-shadow .15s ease;
}

.sjn-list .pcard:last-child {
	border-bottom: 0;
}

/* 왼쪽 — 이미지 */
.pcard__media {
	grid-area: media;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	background: #F1EFE9;
	text-decoration: none;
}

.pcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

/* 왼쪽 — 사실 정보 */
.pcard__facts {
	grid-area: facts;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.pcard__cat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--cat, var(--sjn-ink-3));
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.3;
}

.pcard__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.pcard__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--sjn-ink-3);
	font-size: 0.76rem;
	font-weight: 500;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.pcard__sep {
	opacity: .5;
}

/* 오른쪽 — 제목과 내용 */
.pcard__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

/* 가변 폰트의 굵기 축을 크게 써서 발췌문과 대비를 만듭니다 */
.pcard__title {
	margin: 0;
	font-size: 1.24rem;
	font-weight: 750;
	line-height: 1.4;
	letter-spacing: -0.023em;
	word-break: keep-all;      /* 한국어는 어절 단위로 줄바꿈 */
	overflow-wrap: break-word;
}

.pcard__title a {
	color: var(--sjn-ink);
	text-decoration: none;
}

.pcard__title a:hover {
	text-decoration: none;
}

.pcard__title a:focus-visible {
	outline: 2px solid var(--sjn-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ★ 형광펜 — 이 화면의 유일한 강조 장치.
   글자를 덮는 색 박스가 아니라, 텍스트 아래를 지나가는 마커 자국처럼
   기준선 부근에만 색을 깝니다. */
.pcard__mark {
	background: linear-gradient(
		to bottom,
		transparent 56%,
		var(--sjn-mark) 56%,
		var(--sjn-mark) 95%,
		transparent 95%
	);
	color: inherit;
	padding: 0 1px;
}

.pcard__excerpt {
	margin: 0;
	color: var(--sjn-ink-2);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.68;
	word-break: keep-all;
	overflow-wrap: break-word;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 호버 — 마우스가 있는 기기에서만 */
@media (hover: hover) {
	/* 호버 배경을 좌우로 조금 흘려보냅니다. box-shadow는 레이아웃을
	   차지하지 않으므로 음수 마진과 달리 가로 스크롤을 만들지 않습니다. */
	.sjn-list .pcard:hover {
		background-color: var(--sjn-hover);
		box-shadow: 0 0 0 13px var(--sjn-hover);
	}

	.sjn-list .pcard:hover .pcard__media img {
		transform: scale(1.035);
	}
}

/* ── 태블릿 ──────────────────────────────────────────────── */

@media (max-width: 880px) {
	.sjn-list .pcard {
		grid-template-columns: 190px minmax(0, 1fr);
		column-gap: 20px;
		padding: 20px 0;
	}

	.pcard__title {
		font-size: 1.13rem;
	}
}

/* ── 모바일 ──────────────────────────────────────────────── */

@media (max-width: 600px) {
	/* 이미지가 너무 작아지지 않도록, 사실 정보를 아래 한 줄로 내립니다 */
	.sjn-list .pcard {
		grid-template-columns: 148px minmax(0, 1fr);
		grid-template-areas:
			"media body"
			"facts facts";
		column-gap: 14px;
		row-gap: 10px;
		padding: 17px 0;
	}

	/* 가로폭만 늘리면 제목이 좁아지므로, 비율을 4:3으로 바꿔
	   가로는 조금만 쓰면서 세로로 키웁니다. 면적은 약 두 배가 됩니다. */
	.pcard__media {
		aspect-ratio: 4 / 3;
		border-radius: 7px;
	}

	.pcard__facts {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.pcard__title {
		font-size: 1.02rem;
		line-height: 1.42;
	}

	.pcard__body {
		gap: 7px;
	}

	.pcard__excerpt {
		font-size: 0.83rem;
		line-height: 1.6;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.sjn-catnav {
		margin-bottom: 16px;
		padding-bottom: 14px;
	}

	/* 카테고리 칩이 많아지면 가로 스크롤로 흘립니다 */
	.sjn-catnav__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.sjn-catnav__list::-webkit-scrollbar {
		display: none;
	}

	.sjn-catnav__item {
		white-space: nowrap;
	}
}

/* 아주 좁은 화면 — 발췌문은 접고 제목에 집중합니다 */
@media (max-width: 380px) {
	.sjn-list .pcard {
		grid-template-columns: 126px minmax(0, 1fr);
		column-gap: 12px;
	}

	.pcard__title {
		font-size: 0.98rem;
	}

	/* 이미지가 세로로 커진 만큼 오른쪽도 한 줄 더 채웁니다 */
	.pcard__excerpt {
		-webkit-line-clamp: 3;
		line-clamp: 3;
		font-size: 0.8rem;
	}
}

/* "전체 글" 페이지의 안내 문구 */
.sjn-intro {
	margin-bottom: 24px;
	color: var(--sjn-ink-2);
}

/* ── 페이지네이션 (부모 테마 기본 마크업에 톤만 맞춥니다) ── */

.paging-navigation {
	margin-top: 32px;
	font-variant-numeric: tabular-nums;
}

.paging-navigation .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 11px;
	margin: 0 3px 6px 0;
	border: 1px solid var(--sjn-rule);
	border-radius: 8px;
	background: var(--sjn-card);
	color: var(--sjn-ink-2);
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.paging-navigation .page-numbers:hover {
	border-color: var(--sjn-rule-2);
	color: var(--sjn-ink);
}

.paging-navigation .page-numbers.current {
	background: var(--sjn-ink);
	border-color: var(--sjn-ink);
	color: #fff;
}

.paging-navigation .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ── 접근성 ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.sjn-list .pcard,
	.pcard__media img,
	.sjn-catnav__item,
	.paging-navigation .page-numbers {
		transition: none;
	}

	.sjn-list .pcard:hover .pcard__media img {
		transform: none;
	}
}

/* ============================================================
   페이지 헤더 — 검색 결과 / 패밀리 사이트 공용
   본문 목록과 같은 위계를 쓰도록, 작은 눈썹 문구 → 큰 제목 →
   보조 설명 순으로 고정합니다.
   ========================================================== */

.sjn-phead {
	margin: 0 0 24px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--sjn-rule);
}

.sjn-phead__eyebrow {
	margin: 0 0 6px;
	color: var(--sjn-ink-3);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.sjn-phead__title {
	margin: 0;
	color: var(--sjn-ink);
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.026em;
	word-break: keep-all;
}

.sjn-phead__sub {
	margin: 7px 0 0;
	color: var(--sjn-ink-2);
	font-size: 0.88rem;
	font-variant-numeric: tabular-nums;
}

/* 검색 결과 0건 */
.sjn-empty {
	padding: 8px 0 0;
}

.sjn-empty__msg {
	margin: 0 0 18px;
	color: var(--sjn-ink-2);
	font-size: 0.95rem;
}

.sjn-empty .sjn-catnav {
	border-bottom: 0;
	padding-bottom: 0;
}

/* ============================================================
   사이드바 위젯
   ========================================================== */

.widget-area .widget {
	margin-bottom: 30px;
	padding: 0;
	background: none;
	border: 0;
}

.widget-area .widget:last-child {
	margin-bottom: 0;
}

.sjn-wtitle {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--sjn-rule);
	color: var(--sjn-ink);
	font-size: 1.04rem;
	font-weight: 750;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.sjn-wlist {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sjn-wlist li {
	margin: 0;
	list-style: none;
}

.sjn-witem {
	display: flex;
	align-items: flex-start;
	padding: 11px 0;
	border-bottom: 1px solid #F0EEE9;
}

.sjn-witem:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sjn-wtext {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
}

.sjn-wlink {
	color: var(--sjn-ink);
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.48;
	letter-spacing: -0.015em;
	text-decoration: none;
	word-break: keep-all;
	overflow-wrap: break-word;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sjn-wlink:hover,
.sjn-wlink:focus-visible {
	color: var(--sjn-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sjn-wmeta {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--sjn-ink-3);
	font-size: 0.79rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.sjn-wsep {
	opacity: .5;
}

/* 인기 글 순위 — 조회수 옆에 둡니다.
   왼쪽에 숫자 칼럼을 두면 '최신 글'(제목만 있는 목록)과 들여쓰기가 어긋나
   두 위젯이 따로 노는 느낌이 납니다. 메타 줄로 옮기면 구조가 같아집니다.
   상위 3위만 진하게 해서 순위가 신호로 읽히게 합니다. */
.sjn-wrank {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sjn-wrank.is-top {
	color: var(--sjn-ink);
}

/* 카테고리 */
.sjn-wcat {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	color: var(--sjn-ink);
	font-size: 0.97rem;
	font-weight: 600;
	text-decoration: none;
}

.sjn-wcat:hover {
	color: var(--sjn-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sjn-wdot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cat, var(--sjn-ink-3));
	flex: none;
}

.sjn-wcount {
	margin-left: auto;
	color: var(--sjn-ink-3);
	font-size: 0.79rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   검색 폼 — 사이드바 / 결과 페이지 공통
   ========================================================== */

.wp-block-search__inside-wrapper {
	border: 1px solid var(--sjn-rule);
	border-radius: 9px;
	background: var(--sjn-card);
	overflow: hidden;
	transition: border-color .15s ease;
}

.wp-block-search__inside-wrapper:focus-within {
	border-color: var(--sjn-ink-3);
}

.wp-block-search .wp-block-search__input {
	border: 0;
	background: none;
	padding: 10px 13px;
	font-size: 0.9rem;
	font-family: var(--sjn-font);
	color: var(--sjn-ink);
	min-width: 0;
}

.wp-block-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.wp-block-search .wp-block-search__button {
	margin: 0;
	border: 0;
	border-left: 1px solid var(--sjn-rule);
	border-radius: 0;
	background: var(--sjn-paper);
	color: var(--sjn-ink-2);
	padding: 10px 15px;
	font-size: 0.85rem;
	font-weight: 650;
	font-family: var(--sjn-font);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.wp-block-search .wp-block-search__button:hover {
	background: var(--sjn-hover);
	color: var(--sjn-ink);
}

/* ============================================================
   패밀리 사이트
   ========================================================== */

.sjn-family {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjn-family__item {
	display: grid;
	grid-template-columns: 168px minmax(0, 1fr);
	align-items: center;
	column-gap: 26px;
	margin: 0;
	padding: 22px 0;
	list-style: none;
	border-bottom: 1px solid var(--sjn-rule);
}

.sjn-family__item:last-child {
	border-bottom: 0;
}

.sjn-family__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 74px;
	padding: 12px 16px;
	border: 1px solid var(--sjn-rule);
	border-radius: 10px;
	background: var(--sjn-card);
}

.sjn-family__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.sjn-family__text {
	min-width: 0;
}

.sjn-family__name {
	margin: 0 0 6px;
	font-size: 1.08rem;
	font-weight: 750;
	line-height: 1.35;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.sjn-family__name a {
	color: var(--sjn-ink);
	text-decoration: none;
}

.sjn-family__name a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.sjn-family__ext {
	display: inline-block;
	margin-left: 3px;
	color: var(--sjn-ink-3);
	font-size: 0.82em;
	font-weight: 600;
}

.sjn-family__desc {
	margin: 0 0 5px;
	color: var(--sjn-ink-2);
	font-size: 0.9rem;
	line-height: 1.62;
	word-break: keep-all;
}

.sjn-family__url {
	margin: 0;
	color: var(--sjn-ink-3);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: .01em;
}

@media (max-width: 600px) {
	.sjn-family__item {
		grid-template-columns: 1fr;
		row-gap: 13px;
		padding: 20px 0;
	}

	.sjn-family__logo {
		height: 62px;
		justify-content: flex-start;
		width: max-content;
		max-width: 100%;
	}
}

/* ============================================================
   푸터 — 한 덩어리
   ------------------------------------------------------------
   이전에는 세 겹(자식 테마 링크 / GP 푸터 위젯 / GP site-info)이 각자
   여백을 갖고 쌓여 있었고, 안쪽 컨테이너가 grid-container 안에 또
   grid-container 로 들어가 여백이 이중으로 잡혔습니다.
   셋을 걷어내고 사업자 정보 한 덩어리만 남깁니다.
   ========================================================== */

.sjn-foot {
	margin-top: 56px;
	border-top: 1px solid var(--sjn-rule);
	background-color: var(--sjn-band);
}

.sjn-foot__inner {
	padding-top: 34px;
	padding-bottom: 34px;
}

.sjn-foot__name {
	margin: 0 0 12px;
	color: var(--sjn-ink);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* 구분자(|)가 줄 끝에 홀로 남지 않도록 조각 단위로 흘립니다 */
.sjn-foot__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
	margin: 0 0 5px;
	color: var(--sjn-ink-2);
	font-size: 0.82rem;
	line-height: 1.7;
	word-break: keep-all;
}

.sjn-foot__sep {
	color: var(--sjn-rule-2);
}

.sjn-foot__copy {
	margin: 16px 0 0;
	color: var(--sjn-ink-3);
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.sjn-foot {
		margin-top: 40px;
	}

	.sjn-foot__inner {
		padding-top: 26px;
		padding-bottom: 26px;
	}

	.sjn-foot__row {
		font-size: 0.78rem;
		gap: 0 8px;
	}

	/* 좁은 화면에서는 구분자를 감추고 줄로 나눕니다 —
	   주소가 길어 한 줄에 안 들어가는데 | 만 떠 있으면 지저분합니다 */
	.sjn-foot__sep {
		display: none;
	}

	.sjn-foot__row > span:not(.sjn-foot__sep) {
		flex: 0 0 100%;
	}
}


/* ============================================================
   본문 영역 좌우 여백
   ------------------------------------------------------------
   GeneratePress(separate-containers)는 .inside-article 에 30px 여백을 주는데,
   목록을 카드 마크업으로 바꾸면서 그 요소가 사라졌습니다. 그 결과 창을 좁히면
   이미지가 브라우저 끝에 그대로 붙어 답답해집니다. 여기서 되살립니다.
   ========================================================== */

.separate-containers .site-content .content-area {
	padding-left: 30px;
	padding-right: 30px;
}

/* 사이드바도 같이 — .widget 의 자체 여백을 0으로 만들었으므로
   바깥 컨테이너가 여백을 맡습니다. */
.separate-containers .site-content .inside-right-sidebar,
.separate-containers .site-content .inside-left-sidebar {
	padding: 30px;
}

/* GeneratePress가 이미 자체 여백을 갖고 있는 요소들 — 이중 여백 방지 */
.separate-containers .site-main .paging-navigation,
.separate-containers .site-main .page-header {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 768px) {
	.separate-containers .site-content .content-area {
		padding-left: 18px;
		padding-right: 18px;
	}

	.separate-containers .site-content .inside-right-sidebar,
	.separate-containers .site-content .inside-left-sidebar {
		padding: 24px 18px;
	}
}

@media (max-width: 480px) {
	.separate-containers .site-content .content-area {
		padding-left: 12px;
		padding-right: 12px;
	}

	.separate-containers .site-content .inside-right-sidebar,
	.separate-containers .site-content .inside-left-sidebar {
		padding: 20px 12px;
	}
}

/* ============================================================
   개별 글 (상세보기)
   ------------------------------------------------------------
   대표이미지 중복 출력은 functions.php 에서 껐습니다.
   여기서는 읽기 편한 본문 폭과 리듬만 잡습니다.
   ========================================================== */

.single-post .entry-header {
	margin-bottom: 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sjn-rule);
}

.single-post .entry-title {
	margin: 0;
	color: var(--sjn-ink);
	font-size: 1.72rem;
	font-weight: 800;
	line-height: 1.36;
	letter-spacing: -0.028em;
	word-break: keep-all;
}

.single-post .entry-meta {
	margin-top: 11px;
	color: var(--sjn-ink-3);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.single-post .entry-content {
	color: #22252C;
	font-size: 1.02rem;
	line-height: 1.85;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.single-post .entry-content > * + * {
	margin-top: 1.15em;
}

.single-post .entry-content h2 {
	margin-top: 2em;
	margin-bottom: .7em;
	font-size: 1.3rem;
	font-weight: 780;
	line-height: 1.42;
	letter-spacing: -0.024em;
}

.single-post .entry-content h3 {
	margin-top: 1.7em;
	margin-bottom: .6em;
	font-size: 1.12rem;
	font-weight: 750;
	line-height: 1.45;
	letter-spacing: -0.02em;
}

.single-post .entry-content img,
.single-post .entry-content figure img {
	height: auto;
	border-radius: 9px;
}

.single-post .entry-content figure {
	margin-top: 1.7em;
	margin-bottom: 1.7em;
}

.single-post .entry-content figcaption {
	margin-top: .6em;
	color: var(--sjn-ink-3);
	font-size: 0.8rem;
	text-align: center;
}

.single-post .entry-content a {
	color: var(--sjn-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--sjn-rule-2);
}

.single-post .entry-content a:hover {
	text-decoration-color: var(--sjn-ink);
}

.single-post .entry-content ul,
.single-post .entry-content ol {
	padding-left: 1.3em;
}

.single-post .entry-content li + li {
	margin-top: .4em;
}

.single-post .entry-content blockquote {
	margin-top: 1.7em;
	margin-bottom: 1.7em;
	padding: 2px 0 2px 18px;
	border-left: 3px solid var(--sjn-mark);
	color: var(--sjn-ink-2);
	font-style: normal;
}

.single-post .entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
}

.single-post .entry-content th,
.single-post .entry-content td {
	padding: 9px 11px;
	border: 1px solid var(--sjn-rule);
	text-align: left;
}

.single-post .entry-content th {
	background: var(--sjn-paper);
	font-weight: 700;
}

/* 넓은 표는 화면 밖으로 밀지 말고 그 안에서만 스크롤 */
.single-post .entry-content .wp-block-table {
	overflow-x: auto;
}

@media (max-width: 600px) {
	.single-post .entry-title {
		font-size: 1.34rem;
	}

	.single-post .entry-content {
		font-size: 0.98rem;
		line-height: 1.8;
	}

	.single-post .entry-content h2 {
		font-size: 1.16rem;
	}
}

/* ============================================================
   헤더
   ------------------------------------------------------------
   로고가 2347x471 원본을 580px 폭으로 띄우고 있어서 헤더가 지나치게
   컸습니다. 폭을 절반 이하로 줄이고, 헤더에 옅은 회색 띠를 깔아
   본문(갱지색)과 층을 나눕니다. 푸터도 같은 색을 써서 위아래로
   페이지를 감싸는 구조가 되게 했습니다.
   ========================================================== */

.site-header {
	background-color: var(--sjn-band);
	border-bottom: 1px solid var(--sjn-rule);
}

.site-header .inside-header {
	padding-top: 15px;
	padding-bottom: 15px;
	align-items: center;
}

/* 로고 — 580px → 250px */
.site-header .site-logo {
	margin: 0;
	line-height: 0;
}

.site-header .site-logo img,
.site-header .header-image {
	width: 288px;
	max-width: 100%;
	height: auto;
}

/* 내비게이션 — 헤더 띠 위에 조용히 얹습니다 */
.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
}

.main-navigation .main-nav > ul > li > a {
	color: var(--sjn-ink-2);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	padding: 11px 14px;
	transition: color .15s ease;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a {
	color: var(--sjn-ink);
	background-color: transparent;
}

.main-navigation .menu-toggle {
	color: var(--sjn-ink-2);
	background-color: transparent;
}

/* 비어 있는 헤더 위젯이 자리만 차지하지 않도록 */
.header-widget .wp-block-list:empty {
	display: none;
}

.header-widget:empty,
.header-widget .widget_block:empty {
	display: none;
}

@media (max-width: 768px) {
	.site-header .inside-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.site-header .site-logo img,
	.site-header .header-image {
		width: 214px;
	}

	.main-navigation .main-nav > ul > li > a {
		padding: 10px 16px;
	}
}

@media (max-width: 480px) {
	.site-header .site-logo img,
	.site-header .header-image {
		width: 186px;
	}
}

/* ============================================================
   히어로 (홈)
   ------------------------------------------------------------
   광고 슬라이드와 인기 글 슬라이드를 같은 모양으로 만듭니다.
   광고가 광고처럼 생기면 그 영역째로 건너뛰기 때문입니다.
   제목 속 숫자에는 본문 목록과 같은 형광펜이 그어져, 위아래가
   하나의 화면으로 읽힙니다.

   층 구성: 헤더(#F4F2ED) → 히어로(흰색) → 본문(갱지 #FCFCFA)
   ========================================================== */

.sjn-hero {
	background-color: var(--sjn-card);
	border-bottom: 1px solid var(--sjn-rule);
}

.sjn-hero__inner {
	padding-top: 30px;
	padding-bottom: 22px;
}

/* scroll-snap — 스크립트 없이도 스와이프가 동작합니다 */
.sjn-hero__track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sjn-hero__track::-webkit-scrollbar {
	display: none;
}

.sjn-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	column-gap: 42px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.sjn-slide__text {
	min-width: 0;
}

.sjn-slide__eyebrow {
	margin: 0 0 9px;
	color: var(--sjn-ink-3);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.sjn-slide__title {
	margin: 0;
	font-size: 1.72rem;
	font-weight: 800;
	line-height: 1.34;
	letter-spacing: -0.03em;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.sjn-slide__title a {
	color: var(--sjn-ink);
	text-decoration: none;
}

.sjn-slide__title a:focus-visible {
	outline: 2px solid var(--sjn-ink);
	outline-offset: 4px;
	border-radius: 2px;
}

.sjn-slide__desc {
	margin: 11px 0 0;
	max-width: 34em;
	color: var(--sjn-ink-2);
	font-size: 0.94rem;
	line-height: 1.65;
	word-break: keep-all;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 버튼처럼 보이지만 실제 링크는 제목입니다.
   같은 곳으로 가는 링크를 두 번 읽히지 않게 aria-hidden 처리했습니다. */
.sjn-slide__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 18px 0 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--sjn-ink);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 650;
	line-height: 1;
}

.sjn-slide__arrow {
	transition: transform .18s ease;
}

.sjn-slide__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 11px;
	background: #F1EFE9;
}

.sjn-slide__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

@media (hover: hover) {
	.sjn-slide:hover .sjn-slide__media img {
		transform: scale(1.03);
	}

	.sjn-slide:hover .sjn-slide__arrow {
		transform: translateX(3px);
	}
}

/* 인디케이터 — 점 대신 짧은 막대.
   사이트 전반의 헤어라인 언어와 맞습니다. */
.sjn-hero__nav {
	display: flex;
	gap: 6px;
	margin-top: 22px;
}

.sjn-hero__bar {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--sjn-rule);
	cursor: pointer;
	transition: background-color .18s ease, width .18s ease;
}

.sjn-hero__bar:hover {
	background: var(--sjn-rule-2);
}

.sjn-hero__bar.is-active {
	width: 40px;
	background: var(--sjn-ink);
}

.sjn-hero__bar:focus-visible {
	outline: 2px solid var(--sjn-ink);
	outline-offset: 3px;
}

@media (max-width: 880px) {
	.sjn-slide {
		column-gap: 28px;
	}

	.sjn-slide__title {
		font-size: 1.38rem;
	}
}

@media (max-width: 700px) {
	.sjn-hero__inner {
		padding-top: 20px;
		padding-bottom: 16px;
	}

	/* 좁은 화면에서는 이미지를 위로 — 먼저 눈에 들어와야 합니다 */
	.sjn-slide {
		grid-template-columns: 1fr;
		row-gap: 14px;
	}

	.sjn-slide__media {
		order: -1;
	}

	.sjn-slide__title {
		font-size: 1.24rem;
	}

	.sjn-slide__desc {
		font-size: 0.88rem;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.sjn-slide__cta {
		margin-top: 14px;
		padding: 9px 16px;
		font-size: 0.85rem;
	}

	.sjn-hero__nav {
		margin-top: 16px;
		justify-content: center;
	}
}

/* ============================================================
   글 히어로 — 개별 글 제목 아래의 납작한 띠
   ------------------------------------------------------------
   큰 히어로를 글 위에 놓으면 읽으러 온 사람을 가로막습니다.
   눈에는 띄되 읽기를 방해하지 않는 높이로 제한합니다.
   ========================================================== */

.sjn-strip {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 26px;
	padding: 12px 15px;
	border: 1px solid var(--sjn-rule);
	border-radius: 10px;
	background: var(--sjn-band);
	transition: border-color .15s ease;
}

.sjn-strip:hover {
	border-color: var(--sjn-rule-2);
}

.sjn-strip__media {
	flex: none;
	display: block;
	width: 92px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: #E8E5DE;
}

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

.sjn-strip__text {
	flex: 1 1 auto;
	min-width: 0;
}

.sjn-strip__eyebrow {
	margin: 0 0 3px;
	color: var(--sjn-ink-3);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: .03em;
}

.sjn-strip__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.42;
	letter-spacing: -0.018em;
	word-break: keep-all;
}

.sjn-strip__title a {
	color: var(--sjn-ink);
	text-decoration: none;
}

.sjn-strip__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sjn-strip__cta {
	flex: none;
	color: var(--sjn-ink-2);
	font-size: 0.82rem;
	font-weight: 650;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.sjn-strip {
		gap: 11px;
		padding: 10px 12px;
	}

	.sjn-strip__media {
		width: 74px;
	}

	.sjn-strip__title {
		font-size: 0.89rem;
	}

	/* 좁은 화면에서는 화살표만 — 문구까지 넣으면 제목이 눌립니다 */
	.sjn-strip__cta {
		font-size: 0;
	}

	.sjn-strip__cta::after {
		content: "→";
		font-size: 1rem;
	}
}

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

	.sjn-slide__media img,
	.sjn-slide__arrow,
	.sjn-hero__bar {
		transition: none;
	}

	.sjn-slide:hover .sjn-slide__media img,
	.sjn-slide:hover .sjn-slide__arrow {
		transform: none;
	}
}

/* ============================================================
   히어로 — 전체 클릭 영역
   ------------------------------------------------------------
   CTA를 버튼처럼 칠해 놓고 실제로는 링크가 아니면, 눌리게 생긴 것이
   안 눌리는 상태가 됩니다. 실제 사용에서 바로 걸렸습니다.

   해결은 링크를 여러 개 만드는 대신 하나를 카드 전체로 늘리는 방식입니다.
   (제목 링크의 ::after 를 슬라이드 전체에 덮음)
   - 보이는 것 전부가 클릭됩니다 — 이미지도, 버튼처럼 생긴 CTA도
   - 접근성 트리에는 링크가 하나만 남아 스크린리더가 같은 곳을 세 번
     읽지 않습니다
   ========================================================== */

.sjn-slide {
	position: relative;
}

.sjn-slide__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

@media (hover: hover) {
	.sjn-slide:hover {
		cursor: pointer;
	}

	.sjn-slide:hover .sjn-slide__title a {
		text-decoration: underline;
		text-underline-offset: 5px;
		text-decoration-thickness: 2px;
	}

	.sjn-slide:hover .sjn-slide__cta {
		background: #000;
	}
}

/* CTA는 이제 span 입니다. 버튼처럼 보이되 실제 클릭은 위 영역이 받습니다. */
.sjn-slide__cta {
	position: relative;
	z-index: 1;
	transition: background-color .15s ease;
}

/* 글 히어로 띠도 같은 방식 */
.sjn-strip {
	position: relative;
}

.sjn-strip__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

@media (hover: hover) {
	.sjn-strip:hover {
		cursor: pointer;
		background: #EFEDE6;
	}

	.sjn-strip:hover .sjn-strip__cta {
		color: var(--sjn-ink);
	}
}

/* 키보드 초점이 카드 전체에 보이도록 */
.sjn-slide__title a:focus-visible::after,
.sjn-strip__title a:focus-visible::after {
	outline: 2px solid var(--sjn-ink);
	outline-offset: 6px;
	border-radius: 6px;
}

/* ============================================================
   광고 표기 / 고지문
   ------------------------------------------------------------
   자사 서비스라도 브랜드명이 달라 같은 회사임을 독자가 알 수 없으면
   경제적 이해관계를 밝히는 편이 안전합니다(공정위 추천·보증 심사지침).
   숨기지 않되 소리치지도 않는 크기 — 테두리만 있는 작은 칩으로 둡니다.
   ========================================================== */

.sjn-adlabel {
	display: inline-block;
	margin-right: 7px;
	padding: 2px 7px;
	border: 1px solid var(--sjn-rule-2);
	border-radius: 4px;
	color: var(--sjn-ink-3);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.5;
	vertical-align: 1px;
	white-space: nowrap;
}

/* 고지문 — 보험·금융 광고의 심의번호와 필수 안내가 들어갑니다.
   작아도 읽을 수 있어야 하므로 11px 아래로는 내리지 않습니다. */
.sjn-disclaimer {
	margin: 14px 0 0;
	max-width: 46em;
	color: var(--sjn-ink-3);
	font-size: 0.72rem;
	font-weight: 400;
	line-height: 1.6;
	word-break: keep-all;
}

.sjn-disclaimer--strip {
	margin: -18px 0 24px;
	padding: 0 2px;
}

@media (max-width: 700px) {
	.sjn-disclaimer {
		margin-top: 11px;
		font-size: 0.7rem;
	}
}