@charset "utf-8";
/* kisslove.org 본문 읽기 스타일 — 2026-08-01
 *
 * 왜 만들었나
 *   #bo_v 가 width:100% 이고 감싸는 .container 가 max-width:1400px 이라
 *   본문 한 줄이 1,300px 넘게 흘렀다(한글 100자 이상/줄). 눈이 줄 끝에서 다음 줄
 *   첫 글자를 못 찾는 폭이다. 여기서 하는 일은 딱 두 가지다.
 *     1) 읽는 영역만 46rem(한글 40~45자/줄)로 좁힌다 — 목록·헤더·댓글은 안 건드린다
 *     2) 본문/제목 크기 비율을 정리한다 (기존 h2 2.6em = 본문의 2.6배였다)
 *
 * 범위는 전부 #bo_v 안으로 스코프했다. 다른 게시판·메인은 영향 없다.
 */

/* ── 읽는 영역 ─────────────────────────────────────────── */
#bo_v_con,
#bo_v > header,
#bo_v_info,
#bo_v .bo_v_nb,
#bo_v_top,
#bo_v_bot {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

#bo_v_con {
	font-size: 1.0625rem;      /* 17px — 기존 15px 는 장문에 작다 */
	line-height: 1.95;
	color: #23222a;            /* 본문은 순검정보다 살짝 눅인 쪽이 오래 읽힌다 */
	letter-spacing: -0.01em;
	word-break: keep-all;      /* 한글은 어절 단위로 끊어야 읽힌다 */
	overflow-wrap: break-word;
	padding: 8px 0 40px;
}

#bo_v_con p {
	margin: 0 0 1.35em;
}

/* 빈 문단(  만 든 줄)이 문단 사이를 두 배로 벌리는 걸 눌러 준다 */
#bo_v_con p:empty {
	margin: 0;
}

/* ── 제목 위계 ─────────────────────────────────────────── */
/* view.skin.php 의 전역 `h2{font-size:2.6em}` 을 본문 안에서만 되돌린다 */
#bo_v_con h2 {
	font-size: 1.5rem;
	line-height: 1.45;
	font-weight: 700;
	color: #17161d;
	letter-spacing: -0.02em;
	margin: 2.4em 0 0.7em;
	padding-top: 0.2em;
}

#bo_v_con h3 {
	font-size: 1.1875rem;
	line-height: 1.5;
	font-weight: 700;
	color: #17161d;
	margin: 1.9em 0 0.6em;
}

#bo_v_con > *:first-child,
#bo_v_con h2:first-child {
	margin-top: 0;
}

/* 기존 190편은 h2 대신 인라인 span(font-size:24px/26px)으로 소제목을 쓴다.
 * 그 관례를 깨지 않고 크기만 본문과 어울리게 맞춘다. */
#bo_v_con span[style*="font-size: 24px"],
#bo_v_con span[style*="font-size:24px"],
#bo_v_con span[style*="font-size: 26px"],
#bo_v_con span[style*="font-size:26px"] {
	font-size: 1.4rem !important;
	font-weight: 700;
	line-height: 1.5;
	color: #17161d;
	letter-spacing: -0.02em;
}

/* ── 목록 ─────────────────────────────────────────────── */
#bo_v_con ul,
#bo_v_con ol {
	margin: 0 0 1.5em;
	padding-left: 1.15em;
}

#bo_v_con li {
	margin-bottom: 0.62em;
	padding-left: 0.15em;
	line-height: 1.85;
}

#bo_v_con li::marker {
	color: #d4657f;            /* 사이트 포인트 색 계열 */
}

/* ── 강조·링크 ─────────────────────────────────────────── */
#bo_v_con strong,
#bo_v_con b {
	font-weight: 700;
	color: #17161d;
}

#bo_v_con a {
	color: #c2455f;
	text-decoration: none;
	border-bottom: 1px solid rgba(194, 69, 95, 0.35);
	padding-bottom: 1px;
}

#bo_v_con a:hover,
#bo_v_con a:focus {
	border-bottom-color: #c2455f;
	background: rgba(194, 69, 95, 0.06);
}

/* ── 이미지 ───────────────────────────────────────────── */
#bo_v_con img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin: 1.9em auto;
	border-radius: 10px;
}

/* ── 인용·구분선 ──────────────────────────────────────── */
#bo_v_con blockquote {
	margin: 1.9em 0;
	padding: 0.15em 0 0.15em 1.15em;
	border-left: 3px solid #e8c3cd;
	color: #4a4854;
}

#bo_v_con hr {
	border: 0;
	border-top: 1px solid #ececf1;
	margin: 2.6em 0;
}

/* ── 글 제목 ──────────────────────────────────────────── */
#bo_v_title .bo_v_tit {
	font-size: 1.75rem !important;
	line-height: 1.4;
	font-weight: 700;
	color: #17161d;
	letter-spacing: -0.025em;
	word-break: keep-all;
	margin: 6px 0 0;
}

#bo_v_info {
	font-size: 0.875rem;
	color: #78767f;
}

/* ── 관련 콘텐츠 (글 하단) ─────────────────────────────
 * 본문과 같은 46rem 폭 안에 두어 읽던 시선이 그대로 내려오게 한다.
 * PC 4열 · 태블릿 2열 · 모바일 2열. 카드 높이는 제목 줄수와 무관하게 맞춘다. */
.kiss-related {
	max-width: 46rem;
	margin: 8px auto 44px;
	padding: 30px 0 0;
	border-top: 1px solid #ececf1;
}

.kiss-related > h2 {
	font-size: 1.1875rem !important;
	line-height: 1.4;
	font-weight: 700;
	color: #17161d;
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

.kiss-related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kiss-related-grid li {
	margin: 0;
	padding: 0;
	min-width: 0;              /* grid 자식이 제목 때문에 늘어나는 걸 막는다 */
}

.kiss-related-grid a {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	border: 0;
	color: inherit;
}

.kr-thumb {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 9px;
	background: #f3f1f4;
	margin-bottom: 9px;
}

.kr-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	border-radius: 0 !important;
	transition: transform 0.35s ease;
}

.kiss-related-grid a:hover .kr-thumb img {
	transform: scale(1.045);
}

/* 썸네일이 없는 글(본문 이미지가 webp 라 목록 썸네일이 안 잡히는 옛 글)은
 * 빈 회색 칸 대신 제목 앞 두 글자를 넣는다. */
.kr-noimg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #e58aa0 0%, #c2455f 100%);
	letter-spacing: -0.02em;
}

.kr-tit {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.5;
	font-weight: 600;
	color: #23222a;
	word-break: keep-all;
	overflow-wrap: break-word;
	/* 3줄로 자른다 — 카드 높이가 제각각이면 그리드가 지저분해진다 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kiss-related-grid a:hover .kr-tit {
	color: #c2455f;
}

/* 제목이 1줄인 카드와 3줄인 카드의 날짜 높이를 맞춘다.
 * grid 자식은 기본이 stretch 라 a 가 카드 높이를 다 쓰고, auto 마진이 날짜를 바닥으로 민다. */
.kr-date {
	display: block;
	margin-top: auto;
	padding-top: 6px;
	font-size: 0.75rem;
	color: #8d8b95;
}

@media (max-width: 47.99rem) {
	.kiss-related {
		max-width: none;
		margin-bottom: 32px;
		padding: 26px 18px 0;
	}

	.kiss-related-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 14px;
	}

	.kr-tit {
		font-size: 0.9375rem;
		-webkit-line-clamp: 3;
	}
}

/* ── 광고 유닛이 가로로 넘치지 않게 ───────────────────────
 * 구글 자동광고('자세히 알아보기' 관련검색 유닛)가 모바일에서 화면 폭을 넘겨
 * 페이지 전체에 가로 스크롤을 만들고 있었다. body 에 overflow:hidden 을 걸면
 * sticky 가 죽으므로 광고 컨테이너만 가둔다. */
ins.adsbygoogle,
.google-auto-placed {
	max-width: 100% !important;
	overflow: hidden !important;
}

/* ── 모바일 ───────────────────────────────────────────── */
@media (max-width: 47.99rem) {
	#bo_v_con,
	#bo_v > header,
	#bo_v_info,
	#bo_v_top,
	#bo_v_bot {
		max-width: none;
		padding-left: 18px;
		padding-right: 18px;
	}

	#bo_v_con {
		font-size: 1.0625rem;
		line-height: 1.85;
	}

	#bo_v_con h2 {
		font-size: 1.3125rem;
		margin: 2em 0 0.6em;
	}

	#bo_v_con span[style*="font-size: 24px"],
	#bo_v_con span[style*="font-size:24px"],
	#bo_v_con span[style*="font-size: 26px"],
	#bo_v_con span[style*="font-size:26px"] {
		font-size: 1.25rem !important;
	}

	#bo_v_title .bo_v_tit {
		font-size: 1.4375rem !important;
	}
}