@charset "utf-8";

/* 글 보기 페이지 구성요소 (2026-11) : 본문 광고 자리, 자동 목차, 관련 글 카드
   - 글꼴·본문 글자 크기 같은 전체 디자인은 update.css 담당이라 여기서 정하지 않음
   - 광고 iframe·광고 내부 요소의 크기는 절대 건드리지 않음 (자리만 미리 잡음)
   - 이 파일을 고치면 view.skin.php의 iw-view.css?ver= 날짜도 바꿔야 함 (CSS 1년 캐시) */

/* ---------- 1. 본문 광고 자리 ---------- */
/* 광고가 뜨기 전에 높이를 미리 잡아 글이 밀리지 않게 함 (모바일 실측 광고 높이 280px)
   위아래 여백은 목차·버튼·글과 붙지 않게 넉넉히 둠 (광고 오클릭 방지) */
.view-content .iw-incontent-ad {
	clear: both;
	min-height: 280px;
	margin: 40px 0;
	padding: 0;
	text-align: center;
}
/* 관리자 공통 규칙(본문 광고 위아래 30px)이 이 칸 안에서 겹치지 않게 광고 칸 바깥 여백만 0 */
.view-content .iw-incontent-ad ins.adsbygoogle:not(.adsbygoogle-noablate) {
	margin: 0 auto;
}
/* 광고가 안 채워졌고 화면 아래(아직 안 보이는 곳)에 있을 때만 스크립트가 붙이는 클래스 → 빈 자리 접기 */
.view-content .iw-incontent-ad.iw-ad-empty {
	min-height: 0;
	margin: 0;
}

/* ---------- 2. 자동 목차 ---------- */
.view-content .iw-toc {
	clear: both;
	margin: 28px 0 32px;
	padding: 0;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
	text-align: left;
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: break-word;
}
/* 바로 위에 광고가 있으면 위쪽 여백을 더 줌 */
.view-content .iw-toc.iw-toc-after-ad {
	margin-top: 56px;
}
.view-content .iw-toc details {
	margin: 0;
	padding: 0;
}
.view-content .iw-toc summary {
	padding: 14px 18px;
	font-weight: 700;
	color: #0f172a;
	cursor: pointer;
}
.view-content .iw-toc ul {
	list-style: none;
	margin: 0;
	padding: 0 18px 12px;
}
.view-content .iw-toc li {
	margin: 0;
	padding: 0;
	border-top: 1px solid #edf2f7;
}
.view-content .iw-toc li:first-child {
	border-top: 0;
}
.view-content .iw-toc li.iw-toc-h3 {
	padding-left: 16px;
	font-size: 0.94em;
}
.view-content .iw-toc a {
	display: block;
	padding: 8px 0;
	color: #1e293b;
	text-decoration: none;
}
.view-content .iw-toc a:hover,
.view-content .iw-toc a:focus {
	color: #2563eb;
	text-decoration: underline;
}
/* 목차로 이동했을 때 위쪽 고정 메뉴에 제목이 가리지 않게 */
.view-content h2[id],
.view-content h3[id] {
	scroll-margin-top: 80px;
}

/* ---------- 3. 관련 글 카드 ---------- */
.iw-related {
	clear: both;
	margin: 20px 0 30px;
}
.iw-related .iw-related-title {
	margin: 0 0 14px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #0f172a;
}
.iw-related .iw-related-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.iw-related .iw-related-item {
	min-width: 0;
	margin: 0;
	padding: 0;
}
.iw-related .iw-related-item a {
	display: block;
	color: #1e293b;
	text-decoration: none;
}
/* 썸네일 칸은 300:220 비율로 고정 (이미지가 늦게 떠도 밀림 없음) */
.iw-related .iw-related-thumb {
	display: block;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 73.33%;
	overflow: hidden;
	border-radius: 8px;
	background: #f1f5f9;
}
.iw-related .iw-related-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	object-fit: cover;
}
.iw-related .iw-related-noimg {
	background: linear-gradient(135deg, #e2e8f0, #f8fafc);
}
.iw-related .iw-related-subject {
	display: block;
	display: -webkit-box;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.5;
	word-break: keep-all;
	overflow-wrap: break-word;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.iw-related .iw-related-item a:hover .iw-related-subject,
.iw-related .iw-related-item a:focus .iw-related-subject {
	color: #2563eb;
	text-decoration: underline;
}

@media (max-width: 767px) {
	/* 모바일에서는 본문(좌우 15px)과 같은 여백, 2칸 배열 */
	.iw-related {
		padding: 0 15px;
	}
	.iw-related .iw-related-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 12px;
	}
	.iw-related .iw-related-subject {
		font-size: 14px;
	}
}