/* =========================================================
   SCANVAS 기사 상세 페이지 최종 통합본
   ---------------------------------------------------------
   기준:
   - 메인페이지와 동일한 1280px 컨테이너 기준
   - PC/모바일 폭, 간격, 줄간격, 폰트 마감
   - 추천기사 / 많이본 기사 / 최신뉴스 정리
   - 모바일 중앙 정렬
   - 상단 중복 대표 이미지 제거 유지
   - 추천/많이본 기사: 카테고리 위, 제목 아래 구조
   ========================================================= */

/* =========================================================
   기본 배경 / 박스 모델
   ========================================================= */
body.single-post,
body.single-post #page,
body.single-post #content,
body.single-post .site,
body.single-post .site-content,
body.single-post .content-area,
body.single-post .site-main,
body.single-post .inside-article,
body.single-post #primary {
	background: #ffffff;
	overflow-x: hidden;
}

.single-main,
.single-layout,
.single-layout__content,
.single-layout__sidebar,
.single-header,
.single-body,
.single-latest,
.single-header__inner,
.single-body__inner,
.single-latest__inner {
	box-sizing: border-box;
}

.separate-containers .site-main {
	margin : 0px;
}

.single-main { 
	background: #ffffff;
	overflow-x: hidden;
}

/* =========================================================
   전체 레이아웃
   - 메인페이지와 같은 1280 기준
   ========================================================= */
.single-layout {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 30px 28px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	column-gap: 40px;
	align-items: start;
	background: #ffffff;
}

.single-layout__content,
.single-layout__sidebar {
	min-width: 0;
}

.single-layout__sidebar {
	padding-left: 40px;
	border-left: 1px solid #e7e7e7;
	background: #ffffff;
	height: 100%;
}

.single-header,
.single-body,
.single-latest {
	width: 100%;
	background: #ffffff;
}

/* =========================================================
   헤더
   ========================================================= */
.single-header {
	padding: 0 0 22px;
}

.single-header__category {
	margin-bottom: 16px;
}

.single-header__category a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 15px;
	border-radius:28px 0 28px 28px;
	background: #425252;
	color: #ffffff;
	font-size:0.9em;
	line-height: 1;
	font-weight: 600;
	text-decoration: none;
}

.single-header__title {
	margin: 0;
	font-size: 2.4rem;
	line-height: 1.24;
	font-weight: 700;
	letter-spacing: -0.1em;
	color: #111111;
	word-break: keep-all;
}

.single-header__meta-box {
	margin-top: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e7e7e7;
}

.single-header__date-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	align-items: center;
	margin-bottom: 12px;
	font-size: 0.8em;
	line-height: 1.6;
	color: #6a6a6a;
}

.single-header__date {
	color: #6a6a6a;
}

.single-header__info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.single-header__author {
	font-size: 0.8em;
	line-height: 1.5;
	font-weight: 500;
	color: #222222;
}

.single-header__author a {
	color: inherit;
	text-decoration: none;
	font: inherit;
}

.single-header__author a:hover,
.single-header__author a:focus {
	color: var(--sc-accent);
	text-decoration: none;
}

.single-header__share {
	display: flex;
	align-items: center;
	gap: 14px 25px;
}

.single-header__author {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.single-header__author-role {
	display: inline-block;
	color: #222222;
	font-size: 14px;
	line-height: 1.5;
	font-weight: 500;
}

.share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #666666;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.share-icon:hover,
.share-icon:focus {
	background: none;

}

.share-icon svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.share-icon--copy,
.share-icon--native-alt {
	width: auto;
	min-width: 22px;
}

.share-icon--copy span,
.share-icon--native-alt span {
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.share-icon--copy.is-copied {
	opacity: 0.45;
}

.single-header__subtitle {
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 1.6;
	font-weight: 700;
	color: #333333;
	word-break: keep-all;
}

/* 상단 대표 이미지 제거 유지 */
.single-header__media,
.single-header__image,
.single-header__caption {
	display: none;
}

/* =========================================================
   본문
   ========================================================= */
.single-body {
	padding-top: 20px;
}

.single-body__content {
	font-size: 1.2em;
	line-height: 1.4;
	font-weight: 400;
	color: #121212;
}

.single-body__content > *:first-child {
	margin-top: 0;
}

.single-body__content p {
	margin: 0 0 1.55em;
}

.single-body__content a {
	color: #4b67ae;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

.single-body__content h2,
.single-body__content h3,
.single-body__content h4 {
	margin: 1.95em 0 0.82em;
	line-height: 1.36;
	font-weight: 700;
	letter-spacing: -0.03em;
	color:#037580;
	word-break: keep-all;
}

.single-body__content h2 {
	font-size: 1.2rem;
}

.single-body__content h3 {
	font-size: 1.2rem;
}

.single-body__content h4 {
	font-size: 20px;
}

.single-body__content figure,
.single-body__content .wp-block-image,
.single-body__content .wp-block-embed {
	width: 100%;
	max-width: 100%;
	margin: 0 0 1.5em 0;
}

.single-body__content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.single-body__content figcaption {
	margin-top: 8px;
	font-size: 0.7em;
	line-height: 1.55;
	color: #888;
	text-align: center;
	font-weight: 300;
}

.single-body__content ul,
.single-body__content ol {
	margin: 0 0 1.6em 1.2em;
	padding: 0;
}

.single-body__content li + li {
	margin-top: 0.45em;
}

.single-body__correction {
	margin-top: 28px;
	padding: 18px 20px;
	border: 1px solid #e5e5e5;
	background: #fafafa;
}

.single-body__correction-title {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 800;
	color: #111111;
}

.single-body__correction-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.75;
	color: #444444;
}

.single-body__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid #ededed;
}

.single-body__tag {
	display: inline-block;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 1.6;
	color: #379585;
	text-decoration: underline;
	text-decoration-style: wavy;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;   
}

/* =========================================================
   공통 사이드바 스타일은 components.css(sc-common-sidebar__*)에서 관리
   ========================================================= */

/* =========================================================
   하단 최신뉴스
   ========================================================= */
.single-latest {
	margin-top: 46px;
	padding-top: 22px;
	border-top: 1px solid #ededed;
}

.single-latest__title {
	margin: 0 0 10px;
	font-size: 1.3em;
	line-height: 1.24;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #111111;
}

.single-latest__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px 16px;
}

.single-latest-card {
	position: relative;
	min-width: 0;
}

.single-latest-card__link {
	position: absolute;
	inset: 0;
	z-index: 5;
}

.single-latest-card__thumb {
	position: relative;
	overflow: hidden;
	background: #eaeaea;
	aspect-ratio: 16 / 10;
}

.single-latest-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-latest-card__body {
	position: relative;
	z-index: 2;
	padding-top: 10px;
	min-width: 0;
}

.single-latest-card__category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 10px;
	margin-bottom: 8px;
	border-radius:24px 0 24px 24px;
	background: #425252;
	color: #ffffff;
	font-size: 0.8em;
	line-height: 1;
	font-weight: 600;
}

.single-latest-card__title {
	margin: 0;
	font-size:1em;
	line-height: 1.45;
	font-weight: 600;
	color: #111111;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.single-latest-card__excerpt {
	margin: 7px 0 0;
	font-size: 0.8em;
	line-height: 1.55;
	color: #666;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.single-latest-card__date {
	display: block;
	margin-top: 8px;
	font-size: 0.7em;
	line-height: 1.4;
	color: #888;
}

/* =========================================================
   태블릿
   ========================================================= */
@media (max-width: 1180px) {
	.single-layout {
		max-width: 1040px;
		padding: 24px 20px 48px;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 34px;
	}

	.single-layout__sidebar {
		padding-left: 0;
		padding-top: 24px;
		border-left: 0;
		border-top: 1px solid #e7e7e7;
		height: auto;
	}

	.single-header__title {
		font-size: 40px;
	}

	.single-body__content {
		font-size: 17px;
		line-height: 1.9;
	}

	.single-sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 22px;
	}

	.single-latest__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   모바일
   ========================================================= */
@media (max-width: 767px) {
	.single-main {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
	}

	.single-layout {
		display: block;
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 18px 16px 40px;
	}

	.single-layout__content,
	.single-layout__sidebar,
	.single-header,
	.single-body,
	.single-latest,
	.single-header__inner,
	.single-body__inner,
	.single-latest__inner {
		width: 100%;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.single-layout__sidebar {
		padding-left: 0;
		margin-top: 28px;
		padding-top: 20px;
		border-left: 0;
		border-top: 1px solid #e7e7e7;
		height: auto;
	}

	.single-header {
		padding-bottom: 18px;
	}

	.single-header__category {
		margin-bottom: 14px;
	}

	.single-header__title {
		font-size: 28px;
		line-height: 1.32;
	}

	.single-header__meta-box {
		margin-top: 16px;
		padding-bottom: 12px;
	}

	.single-header__date-row {
		margin-bottom: 8px;
		line-height: 1.55;
	}

	.single-header__info-row {
		align-items: center;
	}

	.single-header__share {
		gap: 15px;
	}

	.share-icon {
		width: 20px;
		height: 20px;
	}

	.share-icon svg {
		width: 18px;
		height: 18px;
	}

	.share-icon--copy span,
	.share-icon--native-alt span {
		font-size: 14px;
	}

	.single-header__subtitle {
		margin-top: 14px;
		font-size: 16px;
		line-height: 1.55;
	}

	.single-body {
		padding-top: 14px;
	}

	.single-body__content {
		font-size: 1.1em;
		line-height: 1.5;
	}

	.single-body__content h2 {
		font-size:1.1rem;
		line-height: 1.4;
	}

	.single-body__content h3 {
		font-size: 18px;
		line-height: 1.4;
	}

	.single-body__content h4 {
		font-size: 17px;
		line-height: 1.4;
	}

	.single-body__content figure,
	.single-body__content .wp-block-image,
	.single-body__content .wp-block-embed {
		margin: 0 0 1.5em 0;
	}

	
	.single-sidebar {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.single-latest {
		margin-top: 34px;
		padding-top: 18px;
	}

	.single-latest__title {
		margin-bottom: 14px;
		font-size: 22px;
	}

	.single-latest__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.single-latest-card {
		padding-bottom: 14px;
		border-bottom: 1px solid #ededed;
	}

	.single-latest-card:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

.single-header__share .share-icon img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

@media (max-width: 767px) {
	.single-header__share .share-icon img {
		width: 18px;
		height: 18px;
	}
}

.single-latest-card__title-link {
	color: inherit;
	text-decoration: none;
}

.single-latest-card__title-link:hover,
.single-latest-card__title-link:focus,
.single-latest-card__title-link:focus-visible {
	color: inherit;
	text-decoration: none;
}

/* =========================================================
   기사 상단 공유 버튼 hover/focus 안정화
   - 링크 복사(svg) 아이콘이 hover 시 사라지는 문제 방지
   ========================================================= */

.single-header__share .share-icon,
.single-header__share .share-icon:link,
.single-header__share .share-icon:visited {
	background: transparent;
	color: #666666;
	text-decoration: none;
	box-shadow: none;
	border: 0;
}

.single-header__share .share-icon:hover,
.single-header__share .share-icon:focus,
.single-header__share .share-icon:focus-visible,
.single-header__share .share-icon:active {
	background: transparent !important;
	color: #666666 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	border: 0 !important;
	outline: none;
	opacity: 0.78;
}

.single-header__share .share-icon img,
.single-header__share .share-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.single-header__share .share-icon svg,
.single-header__share .share-icon path {
	fill: currentColor;
	stroke: none;
}

/* 복사 버튼은 전역 button hover 영향 완전 차단 */
.single-header__share .share-icon--copy,
.single-header__share button.share-icon--copy,
.single-header__share .share-icon--copy:hover,
.single-header__share .share-icon--copy:focus,
.single-header__share .share-icon--copy:focus-visible,
.single-header__share .share-icon--copy:active {
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	color: #666666 !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	opacity: 1;
}

.single-header__share .share-icon--copy svg,
.single-header__share .share-icon--copy path,
.single-header__share .share-icon--copy:hover svg,
.single-header__share .share-icon--copy:hover path,
.single-header__share .share-icon--copy:focus svg,
.single-header__share .share-icon--copy:focus path,
.single-header__share .share-icon--copy:focus-visible svg,
.single-header__share .share-icon--copy:focus-visible path,
.single-header__share .share-icon--copy:active svg,
.single-header__share .share-icon--copy:active path {
	fill: currentColor !important;
	stroke: none !important;
}

@media (max-width: 767px) {
	.single-header__share .share-icon img,
	.single-header__share .share-icon svg {
		width: 18px;
		height: 18px;
	}
}