/*
 * naver-seo 프런트 스타일
 *
 * 커스터마이저(추가 CSS)가 아니라 파일로 두는 이유:
 * DB에 저장하면 git 관리가 안 되고, 사이트를 다시 세울 때 조용히 사라진다.
 *
 * 레이아웃 방향은 reviewplace.oopy.io 를 참고했다(디자인 참고일 뿐,
 * SEO 근거로 삼지 않는다 — HANDOFF §4.2 참조).
 * 특징: 가운데 정렬 본문 · 섹션별 흰 카드 · H2 아래 짧은 구분선 ·
 *      Before/After 강조 박스 · 넓은 줄간격.
 */

:root {
	--ns-text: #3b3733;
	--ns-text-soft: #8a837c;
	--ns-line: #ece7e1;
	--ns-page-bg: #fbfaf8;
	--ns-card-bg: #ffffff;
	--ns-accent: #c9a227;        /* H2 아래 구분선 (금색) */
	--ns-highlight: #e8558f;     /* 핵심 키워드 강조 */
	--ns-box-bg: #fdf4ef;        /* Before/After 박스 */
	--ns-notice-bg: #f8f8f7;
	--ns-cta: #e8703a;
	--ns-max: 820px;
	--ns-radius: 16px;
}

/* ── 페이지 바탕과 본문 폭 ───────────────────────────────── */

body {
	background: var(--ns-page-bg);
	color: var(--ns-text);
	/* 웹폰트를 새로 받지 않는다. 로딩 지연은 이탈로 이어진다. */
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
		"Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
	font-size: 17px;
	line-height: 2;
	word-break: keep-all;       /* 한글은 단어 중간에서 끊지 않는다 */
	overflow-wrap: break-word;
}

.inside-article,
.site-main > .page-header,
.site-content .content-area {
	max-width: var(--ns-max);
	margin-left: auto;
	margin-right: auto;
}

.inside-article {
	background: transparent;
	padding: 0;
}

/* ── 제목·메타 (가운데 정렬) ─────────────────────────────── */

.entry-header,
.entry-title,
.entry-meta {
	text-align: center;
}

.entry-title {
	font-size: 2.1em;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -0.03em;
	margin: .2em 0 .6em;
}

.entry-meta {
	font-size: .9em;
	color: var(--ns-text-soft);
	padding-bottom: 1.6em;
	border-bottom: 1px solid var(--ns-line);
	margin-bottom: 2em;
}

/* ── 본문: 가운데 정렬 ───────────────────────────────────── */

.entry-content {
	text-align: center;
}

.entry-content p {
	margin: 0 0 1.6em;
}

/* 표·목록은 가운데 정렬하면 읽기 나빠진다. */
.entry-content ul,
.entry-content ol,
.entry-content table {
	text-align: left;
}

/* ── H2: 흰 카드의 제목. 가운데 + 아래 짧은 금색 선 ──────── */

.entry-content h2 {
	text-align: center;
	font-size: 1.5em;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 1.4em;
	padding-bottom: 0;
	border: 0;
}

.entry-content h2::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: .7em auto 0;
	background: var(--ns-accent);
	border-radius: 2px;
	opacity: .75;
}

.entry-content h3 {
	text-align: center;
	font-size: 1.15em;
	font-weight: 700;
	margin: 2em 0 .8em;
}

/*
 * 섹션 카드: H2 부터 다음 H2 직전까지를 흰 카드로 감싼다.
 * 워드프레스 본문은 평평한 형제 노드라 래퍼가 없으므로
 * class-style.php 가 .ns-section 으로 묶어준다.
 */
.entry-content .ns-section {
	/* 테두리로 가두지 않는다. 배경만 옅게 깔아 구간을 구분한다. */
	background: var(--ns-card-bg);
	border: 0;
	border-radius: var(--ns-radius);
	padding: 2.2em 1.6em 2.4em;
	margin: 1.6em 0;
	box-shadow: none;
}

/* ── 강조 ────────────────────────────────────────────────── */

.entry-content strong {
	color: var(--ns-highlight);
	font-weight: 700;
}

.entry-content mark {
	background: linear-gradient(transparent 62%, #ffe8f1 62%);
	color: inherit;
	padding: 0 .1em;
}

/* ── Before/After 등 항목 박스 ───────────────────────────── */

.entry-content blockquote {
	background: var(--ns-box-bg);
	border: 0;
	border-radius: 12px;
	padding: 1.5em 1.6em;
	margin: 1.1em 0;
	color: var(--ns-text);
	font-style: normal;
	text-align: center;
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

/* ── 이미지 ──────────────────────────────────────────────── */

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	margin: 1.8em auto;
}

.entry-content figcaption {
	text-align: center;
	font-size: .87em;
	color: var(--ns-text-soft);
	margin-top: .8em;
}

/* ── 제휴 고지 (class-affiliate.php 가 삽입) ─────────────── */

.naver-seo-affiliate-notice {
	background: var(--ns-notice-bg);
	border: 1px solid var(--ns-line);
	border-radius: 12px;
	padding: 1.1em 1.3em;
	margin: 0 0 2.4em;
	font-size: .92em;
	line-height: 1.75;
	color: var(--ns-text-soft);
	text-align: left;
}

.naver-seo-affiliate-notice::before {
	content: "파트너스 안내";
	display: block;
	font-weight: 700;
	color: var(--ns-text);
	margin-bottom: .35em;
}

/* ── 제휴 링크 ───────────────────────────────────────────── */

.entry-content a[rel~="sponsored"] {
	color: var(--ns-cta);
	text-underline-offset: 4px;
}

/* 문단이 링크 하나뿐이면 CTA 버튼으로 본다. 반복 CTA 패턴. */
.entry-content p > a[rel~="sponsored"]:only-child {
	display: inline-block;
	background: linear-gradient(135deg, #f4813f 0%, #e8703a 100%);
	color: #fff;
	text-decoration: none;
	padding: 1em 2.4em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1.02em;
	margin: 1.6em auto;
	box-shadow: 0 3px 12px rgba(232, 112, 58, .32);
	transition: transform .15s ease, box-shadow .15s ease;
}

/* 클릭을 유도하는 화살표. 텍스트에 넣지 않고 CSS 로 붙인다. */
.entry-content p > a[rel~="sponsored"]:only-child::after {
	content: " ›";
	font-weight: 700;
	margin-left: .15em;
}

.entry-content p > a[rel~="sponsored"]:only-child:hover,
.entry-content p > a[rel~="sponsored"]:only-child:focus {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(232, 112, 58, .32);
}

/* ── 목록·표 ─────────────────────────────────────────────── */

.entry-content ul,
.entry-content ol { margin: 0 0 1.6em; padding-left: 1.4em; }

.entry-content li { margin-bottom: .6em; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-size: .95em;
	display: block;
	overflow-x: auto;   /* 좁은 화면에서 표가 페이지를 밀지 않게 */
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--ns-line);
	padding: .7em .9em;
	text-align: left;
}

.entry-content th { background: var(--ns-notice-bg); font-weight: 700; }

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

@media (max-width: 768px) {
	body { font-size: 16px; line-height: 1.9; }
	.entry-title { font-size: 1.55em; }
	.entry-content h2 { font-size: 1.28em; }
	.entry-content .ns-section {
		padding: 1.8em 1.2em;
		border-radius: 12px;
		margin: 1.6em 0;
	}
	.inside-article { padding-left: 16px; padding-right: 16px; }
}

/* ── 인쇄 ────────────────────────────────────────────────── */

@media print {
	body { background: #fff; }
	.entry-content .ns-section { box-shadow: none; }
	.entry-content p > a[rel~="sponsored"]:only-child {
		background: none;
		color: var(--ns-text);
		border: 1px solid var(--ns-line);
		box-shadow: none;
	}
}

/* ══════════════════════════════════════════════════════════
   목록(아카이브) — 2열 카드 그리드 + 썸네일
   ══════════════════════════════════════════════════════════ */

/* 목록에서는 본문보다 넓게 쓴다. 카드 두 장이 들어가야 한다. */
body.archive .site-content .content-area,
body.blog .site-content .content-area,
body.search .site-content .content-area {
	max-width: 880px;
}

body.blog .site-main,
body.archive .site-main,
body.search .site-main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

/* 페이지네이션은 그리드 한 줄 전체를 차지한다. */
body.blog .site-main > .paging-navigation,
body.archive .site-main > .paging-navigation,
body.search .site-main > .paging-navigation,
body.blog .site-main > .page-header,
body.archive .site-main > .page-header {
	grid-column: 1 / -1;
}

/* ── 카드 ────────────────────────────────────────────────── */

body.blog .site-main > article,
body.archive .site-main > article,
body.search .site-main > article {
	background: var(--ns-card-bg);
	border: 1px solid var(--ns-line);
	border-radius: var(--ns-radius);
	overflow: hidden;
	margin: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	transition: transform .15s ease, box-shadow .15s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

body.blog .site-main > article:hover,
body.archive .site-main > article:hover,
body.search .site-main > article:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

body.blog .site-main > article > .inside-article,
body.archive .site-main > article > .inside-article,
body.search .site-main > article > .inside-article {
	padding: 0 0 1.4em;
	max-width: none;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/*
 * 썸네일은 generate_after_entry_header 로 출력돼 마크업상 제목 뒤에 온다.
 * order 로 시각적 순서만 카드 맨 위로 올린다.
 * (읽기 순서는 제목이 먼저인 편이 스크린리더에 자연스럽다)
 */
.site-main > article .post-image { order: -1; }

/* ── 썸네일 ──────────────────────────────────────────────── */

.site-main > article .post-image {
	margin: 0 0 1.2em;
	line-height: 0;
	background: var(--ns-notice-bg);
}

.site-main > article .post-image a {
	display: block;
}

.site-main > article .post-image img {
	width: 100%;
	/* 비율을 고정해 카드 높이가 들쭉날쭉해지지 않게 한다.
	   16:10 은 목록에서 너무 커 보여 16:9 로 낮췄다. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	margin: 0;
	display: block;
}

/* ── 카드 내부 텍스트 ────────────────────────────────────── */

.site-main > article .entry-header,
.site-main > article .entry-summary,
.site-main > article .entry-meta,
.site-main > article footer.entry-meta {
	padding-left: 1.3em;
	padding-right: 1.3em;
	text-align: left;
}

.site-main > article .entry-title {
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: -0.02em;
	margin: 0 0 .5em;
	text-align: left;
}

.site-main > article .entry-title a {
	color: var(--ns-text);
	text-decoration: none;
}

.site-main > article .entry-title a:hover {
	color: var(--ns-cta);
}

.site-main > article .entry-meta {
	font-size: .84em;
	color: var(--ns-text-soft);
	border: 0;
	padding-bottom: 0;
	margin-bottom: .7em;
}

.site-main > article .entry-summary {
	font-size: .93em;
	line-height: 1.75;
	color: var(--ns-text-soft);
	margin: 0 0 1em;
	flex: 1;
}

.site-main > article .entry-summary p { margin: 0; }

.site-main > article .read-more,
.site-main > article .more-link {
	color: var(--ns-cta);
	font-weight: 600;
	font-size: .9em;
	text-decoration: none;
}

/* ── 모바일: 1열 ─────────────────────────────────────────── */

@media (max-width: 700px) {
	body.blog .site-main,
	body.archive .site-main,
	body.search .site-main {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* 이미지가 없는 글의 자리표시. 카드 높이를 맞추기 위한 것이다. */
.site-main > article .post-image--placeholder a {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #f3efe9 0%, #e9e2d8 100%);
	text-decoration: none;
}

.site-main > article .post-image--placeholder span {
	font-size: 2.6em;
	font-weight: 800;
	color: #c3b8a8;
	line-height: 1;
}

/* ══════════════════════════════════════════════════════════
   본문 강조 (GPT highlights → span.ns-*)
   색상은 src/utils/text_markup.py 와 동일하게 유지한다.
   ══════════════════════════════════════════════════════════ */

.entry-content .ns-hl-y { background: #fff9c4; padding: 0 .12em; border-radius: 3px; }
.entry-content .ns-hl-g { background: #d4f0d2; padding: 0 .12em; border-radius: 3px; }
.entry-content .ns-hl-p { background: #ffd6e0; padding: 0 .12em; border-radius: 3px; }
.entry-content .ns-hl-b { background: #cbe3ff; padding: 0 .12em; border-radius: 3px; }
.entry-content .ns-c-r  { color: #ff4444; font-weight: 600; }
.entry-content .ns-c-p  { color: #ff6b9d; font-weight: 600; }
.entry-content .ns-b    { font-weight: 700; }
.entry-content .ns-bb   { font-weight: 700; font-size: 1.12em; }
.entry-content .ns-u    { text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════
   이미지 2장 나란히 / 상품 링크 프리뷰 카드
   네이버 블로그의 링크 첨부·이미지 배치를 재현한다.
   ══════════════════════════════════════════════════════════ */

.entry-content .ns-image-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 1.8em 0;
}

.entry-content .ns-image-grid .ns-grid-item { margin: 0; }

.entry-content .ns-image-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: 10px;
}

/* 좁은 화면에서는 위아래로 쌓는다. */
@media (max-width: 560px) {
	.entry-content .ns-image-grid { grid-template-columns: 1fr; }
	.entry-content .ns-image-grid img { aspect-ratio: 16 / 10; }
}

/* ── 링크 프리뷰 카드 ────────────────────────────────────── */

.entry-content .ns-link-card {
	margin: 1.8em auto;
	max-width: 480px;
}

.entry-content .ns-link-card a {
	display: block;
	border: 1px solid var(--ns-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ns-card-bg);
	text-decoration: none;
	color: var(--ns-text);
	transition: box-shadow .15s ease, transform .15s ease;
}

.entry-content .ns-link-card a:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.entry-content .ns-link-thumb { display: block; line-height: 0; }

.entry-content .ns-link-thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

.entry-content .ns-link-body {
	display: block;
	padding: .95em 1.1em 1.05em;
	text-align: left;
}

.entry-content .ns-link-title {
	display: block;
	font-weight: 700;
	font-size: .98em;
	line-height: 1.5;
	margin-bottom: .3em;
	/* 제목이 길어도 카드 높이가 흔들리지 않게 두 줄로 자른다. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-content .ns-link-desc {
	display: block;
	font-size: .88em;
	color: var(--ns-text-soft);
	line-height: 1.6;
	margin-bottom: .45em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-content .ns-link-site {
	display: block;
	font-size: .82em;
	color: #16a34a;
}

/* 대가성 고지 이미지. 최상단에 표시하되 대표 이미지로는 쓰지 않는다.
   (제외 처리는 class-meta.php 의 is_notice_image) */
.entry-content .ns-notice-image {
	margin: 0 0 1.6em;
}

.entry-content .ns-notice-image img {
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}


/* 카테고리가 하나뿐이라 목록에 표기할 정보 가치가 없다.
   (태그는 글마다 달라 유지한다) */
.site-main > article .cat-links { display: none; }

/* ══════════════════════════════════════════════════════════
   함께 보면 좋은 상품 (class-related.php)
   ══════════════════════════════════════════════════════════ */

.entry-content .ns-related {
	margin: 3em 0 1em;
	padding-top: 2em;
	border-top: 1px solid var(--ns-line);
}

.entry-content .ns-related-heading {
	font-size: 1.25em;
	font-weight: 800;
	text-align: center;
	margin: 0 0 1.4em;
}

.entry-content .ns-related-heading::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin: .6em auto 0;
	background: var(--ns-accent);
	border-radius: 2px;
	opacity: .75;
}

.entry-content .ns-related-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.entry-content .ns-related-item { margin: 0; }

.entry-content .ns-related-item a {
	display: block;
	text-decoration: none;
	color: var(--ns-text);
}

.entry-content .ns-related-thumb {
	display: block;
	line-height: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ns-notice-bg);
}

.entry-content .ns-related-thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	transition: transform .2s ease;
}

.entry-content .ns-related-item a:hover img { transform: scale(1.04); }

.entry-content .ns-related-thumb--empty { aspect-ratio: 1 / 1; display: block; }

.entry-content .ns-related-title {
	display: block;
	margin-top: .65em;
	font-size: .9em;
	line-height: 1.5;
	text-align: left;
	/* 제목 길이가 달라도 높이가 흔들리지 않게 두 줄로 자른다. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-content .ns-related-item a:hover .ns-related-title { color: var(--ns-cta); }

@media (max-width: 560px) {
	.entry-content .ns-related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 고지 이미지가 있을 때 텍스트 고지를 화면에서만 감춘다.
   display:none 이 아니라 위치를 빼는 방식이라 스크린리더와
   검색로봇은 그대로 읽는다(이미지 속 글자는 읽지 못한다). */
.entry-content .naver-seo-affiliate-notice--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}