/* ============================================= */
/*     기사 상세 페이지  */
/* ============================================= */
body.single-post .single-top-wrap {margin: 24px auto 0;}

/* 기사 타이틀 영역 */
body.single-post .title-box h1 {margin: 0; font-size: 3.2rem; font-weight: 700; line-height: 4.8rem;}
body.single-post .title-box .article-description {margin: 0 0 12px; font-size: 1.4rem; font-weight: 400; line-height: 2.1rem; color: #83151b;}
body.single-post .title-box .article-meta {display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e2e2e2; font-size: 1.4rem; font-weight: 400; color: #1c1e25;}
body.single-post .title-box .article-meta .time, body.single-post .title-box .article-meta .from, body.single-post .title-box .article-meta .hit, body.single-post .title-box .article-meta .post-views, body.single-post .title-box .article-meta .post-views span {font-size: 1.4rem; font-weight: 400; color: #1c1e25;}
body.single-post .title-box .article-meta .post-views {margin-left: -9px;}

/* 본문/사이드바 좌우 비율 (좌 890px / 우 332px) */
body.single-post .left-696 {min-width: 89rem; width: 89rem; flex: 0 0 89rem;}
body.single-post .right-sticky-wrap {width: 33.2rem; flex: 0 0 33.2rem; padding: 0 1.6rem 20px; box-sizing: border-box;}
body.single-post .right-ad-event {max-width: 30rem;}

/* 기사 본문 + 사이드 고정 공유하기 */
body.single-post .single-body-flex {display: flex; align-items: flex-start; gap: 16px;}
body.single-post .single-body-flex > .news-view {flex: 1; min-width: 0;}
body.single-post .single-share-sticky {position: sticky; top: 100px; flex: 0 0 6rem; display: flex; flex-direction: column; align-items: center; gap: 8px;}
body.single-post .single-share-sticky .share-trigger {width: 6rem; height: 6rem; border-radius: 50%; background-color: #fff; box-shadow: 0 0.4rem 0.6rem -0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer;}
body.single-post .single-share-sticky .share-trigger:hover {background-color: #f5f5f5;}
body.single-post .single-share-sticky .share-trigger img {width: 2rem; height: 2rem;}

/* 링크 복사 완료 팝업 */
body.single-post .copy-link-alert .background {background-color: rgba(0, 0, 0, 0.5);}
body.single-post .copy-link-alert .alert-box {display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 39rem; min-width: 0; max-width: 90vw; height: fit-content; min-height: 0; padding: 4rem 2.4rem 2rem; border-radius: 0.4rem;}
body.single-post .copy-link-title {margin: 0 0 2.4rem; color: #83151b; font-size: 2.4rem; font-weight: 500; line-height: 3.84rem; text-align: center;}
body.single-post .copy-link-url {width: 100%; margin: 0 0 1.6rem; padding: 0.8rem 1.6rem; border-radius: 0; background-color: #ebebeb; color: rgba(0, 0, 0, 0.87); font-size: 1.6rem; text-align: left; word-break: break-all;}
body.single-post .copy-link-close {display: block; width: 18rem; height: 4rem; margin: 0 auto; border: none; border-radius: 0; background-color: #83151b; color: #fff; font-size: 1.6rem; font-weight: 700; cursor: pointer;}
body.single-post .copy-link-close:hover {background-color: #6a1116;}

/* 본문 폰트사이즈 조절 (기본 → +2px → +4px → 기본, 타이틀/description/본문 p·h2 모두 적용) */
body.single-post .news-view.font-resize-1 .title-box h1 {font-size: 3.4rem !important; line-height: 5.1rem !important;}
body.single-post .news-view.font-resize-1 .title-box .article-description {font-size: 1.6rem !important; line-height: 2.4rem !important;}
body.single-post .news-view.font-resize-1 .news-article p {font-size: 2.0rem !important; line-height: 3.0rem !important;}
body.single-post .news-view.font-resize-1 .news-article h2 {font-size: 2.6rem !important; line-height: 3.9rem !important;}
body.single-post .news-view.font-resize-2 .title-box h1 {font-size: 3.6rem !important; line-height: 5.4rem !important;}
body.single-post .news-view.font-resize-2 .title-box .article-description {font-size: 1.8rem !important; line-height: 2.7rem !important;}
body.single-post .news-view.font-resize-2 .news-article p {font-size: 2.2rem !important; line-height: 3.3rem !important;}
body.single-post .news-view.font-resize-2 .news-article h2 {font-size: 2.8rem !important; line-height: 4.2rem !important;}

/* 기사 본문 타이포그래피 (기존 !important 규칙 재정의) */
body.single-post .news-view .news-article p {margin: 0 0 1.6rem !important; padding: 0 !important; font-size: 1.8rem !important; font-weight: 400 !important; line-height: 2.7rem !important; letter-spacing: 0.09rem !important; color: #000 !important;}
body.single-post .news-view .news-article h2 {margin: 0 0 1.6rem !important; padding: 0 !important; border: none !important; font-size: 2.4rem !important; font-weight: 700 !important; line-height: 3.6rem !important; letter-spacing: 0.06rem !important; color: #83151b !important;}
body.single-post .news-view .news-article h2:first-child {padding-left: 0 !important; border-left: none !important;}

/* 기사 해시태그 (본문 하단, 알약형 + 슬라이드 채움 hover) */
body.single-post .article-tags {display: flex; flex-wrap: wrap; gap: 8px; margin: 50px 0 20px;}
body.single-post .article-tags li a {position: relative; z-index: 0; display: block; overflow: hidden; padding: 4px 16px; border: 1px solid #83151b; border-radius: 8rem; font-size: 1.4rem; font-weight: 400; color: #000; transition: 0.3s;}
body.single-post .article-tags li a::before {content: ""; position: absolute; inset: 0; z-index: -1; background-color: #83151b; transform: scaleX(0); transform-origin: 0 50%; transition: 0.3s;}
body.single-post .article-tags li a:hover {color: #fff;}
body.single-post .article-tags li a:hover::before {transform: scaleX(1);}

/* 延伸閱讀 (相關文章) */
body.single-post .related-reading {background-color: #ebebeb; padding: 8rem 3.2rem; margin-top: 40px;}
body.single-post .related-reading-inner {display: flex; align-items: center; gap: 6rem; max-width: 96rem; padding: 0;}
body.single-post .related-reading-title {position: relative; flex: 0 0 auto; width: 16.8rem; margin: 0; padding: 0; border: none; font-size: 5.2rem; font-weight: 100; line-height: 7.8rem; color: #000;}
body.single-post .related-reading-title span {position: relative; z-index: 1;}
body.single-post .related-reading-title::before {content: ""; position: absolute; top: 3.2rem; left: -0.8rem; z-index: -1; width: 10rem; height: 10rem; background-color: #fff; border-radius: 50%;}
body.single-post .related-reading-title::after {content: ""; position: absolute; top: -86px; left: 150px; z-index: 0; width: 1px; height: 32rem; background-color: #000; transform: rotate(22.5deg);}
body.single-post .related-reading-list {flex: 1; min-width: 0;}
body.single-post .related-reading-list li {position: relative; padding-left: 16px; margin-bottom: 16px;}
body.single-post .related-reading-list li:last-child {margin-bottom: 0;}
body.single-post .related-reading-list li::before {content: ""; position: absolute; top: 1rem; left: 0; width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: #83151b;}
body.single-post .related-reading-list a {font-size: 1.8rem; color: #000;}
body.single-post .related-reading-list a:hover {text-decoration: underline;}

/* 熱門新聞 (Dable 위젯 자리) */
body.single-post .hot-news {padding: 48px 0;}
body.single-post .hot-news-title {position: relative; width: 100%; margin: 0 0 1.6rem; padding: 0; border: none; text-align: center; font-size: 5.2rem; font-weight: 100; color: #000;}
body.single-post .hot-news-title span {position: relative; z-index: 1;}
body.single-post .hot-news-title span::after {content: ""; position: absolute; top: 1rem; right: -4.8rem; z-index: -1; width: 10rem; height: 10rem; background-color: #ebebeb; border-radius: 50%;}
body.single-post .hot-news .card-box {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
body.single-post .hot-news .card-box li {position: relative; margin-bottom: 0;}
body.single-post .hot-news .thumnail-box {position: relative; height: auto; aspect-ratio: 16 / 9;}
body.single-post .hot-news .thumnail-box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: none; object-fit: cover;}
body.single-post .hot-news .title-box.sm {padding: 0;}
body.single-post .hot-news .title-box .title {display: -webkit-box; overflow: hidden; font-size: 1.6rem; font-weight: 400; line-height: 2.3rem; color: #000; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* ============================================= */
/*      반응형 (2026-08-12)                       */
/* ============================================= */
@media screen and (max-width: 767px) {
	/* 본문/사이드바 좌우 비율 → 모바일에서는 100% 폭으로 전환 (사이드바는 기존 로직대로 숨김) */
	body.single-post .left-696 {min-width: unset; width: 100%; flex: 1 1 100%;}

	/* 기사 타이틀 영역 */
	body.single-post .title-box h1 {font-size: 2.2rem; line-height: 3.2rem;}
	body.single-post .title-box .article-description {font-size: 16px !important; line-height: 22px !important;}
	body.single-post .title-box .article-meta {flex-wrap: wrap; gap: 8px 16px;}

	/* 기사 본문 + 사이드 고정 공유하기 */
	body.single-post .single-body-flex {gap: 0;}
	/* 2026-08-12 : 플렉스 레이아웃에서 빼서 화면 우측에 플로팅시킴 (본문 우측에 생기던 불필요한 여백 제거) */
	body.single-post .single-share-sticky {position: fixed; top: 50%; right: 1.2rem; bottom: auto; transform: translateY(-50%); z-index: 500; flex: 0 0 auto; gap: 6px;}
	body.single-post .single-share-sticky .share-trigger {width: 4.4rem; height: 4.4rem;}
	body.single-post .single-share-sticky .share-trigger img {width: 1.6rem; height: 1.6rem;}

	/* 링크 복사 완료 팝업 */
	body.single-post .copy-link-alert .alert-box {width: 90vw; padding: 3.2rem 1.6rem 1.6rem;}
	body.single-post .copy-link-title {margin-bottom: 1.6rem; font-size: 2rem; line-height: 3rem;}

	/* 延伸閱讀 (相關文章) : 가로배치 → 세로배치, 장식용 사선/원 제거 */
	body.single-post .related-reading {padding: 4rem 2rem;}
	body.single-post .related-reading-inner {flex-direction: column; align-items: flex-start; gap: 2.4rem;}
	body.single-post .related-reading-title {width: auto; font-size: 3.2rem; line-height: 4.2rem;}
	body.single-post .related-reading-title::before, body.single-post .related-reading-title::after {display: none;}

	/* 熱門新聞 : 3단 그리드 → 1단 */
	body.single-post .hot-news-title {font-size: 3.2rem;}
	body.single-post .hot-news-title span::after {display: none;}
	body.single-post .hot-news .card-box {grid-template-columns: 1fr; gap: 16px;}
}