@charset "utf-8";

/* 게시판 읽기 */
/* 네이버 뉴스형 헤더·본문 */

/*
 * 나리야 상단 캐러셀 (.na-news-banner-top)
 * ─ view.skin.php 상단 「na_widget('data-carousel', 'title-2_1', ...)」 블록과 짝.
 * ─ 광고 ID/변수(common.php 의 $google_*) 와 무관 · 나리야 관리자에서 위젯 데이터만 수정 가능.
 */
.na-news-banner-top {
	width: 100%;
	overflow: visible;
	clear: both;
}

/* 게시글 본문 그리드를 뷰포트 안에서 중앙에 모음 */
.na-news-article-inner {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* 우측 .na-news-widget-stack 이 비었을 때 사이드바 숨김 — 본문은 col 폭 전체 사용(좁은 max 제거해 오른쪽 빈 칸 방지) */
@media (min-width: 768px) {
	.na-news-layout:has(aside.na-news-sidebar .na-news-widget-stack:empty) aside.na-news-sidebar {
		display: none !important;
	}

	.na-news-layout:has(aside.na-news-sidebar .na-news-widget-stack:empty) .na-news-main {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		float: none;
	}

	.na-news-layout:has(aside.na-news-sidebar .na-news-widget-stack:empty) .na-news-main.col-md-8 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* 8열+4열 레이아웃일 때 본문 영역이 8컬럼 폭만 꽉 채우도록 */
@media (min-width: 768px) {
	.na-news-layout .na-news-main.col-md-8 {
		flex-grow: 0;
		flex-shrink: 0;
	}
}

/* 본문·사이드 아래 전체폭 줄(관련기사 등)과 위 그리드 좌우 기준선 맞춤 */
.na-news-after-grid {
	clear: both;
	margin-top: 0.75rem !important;
}

.na-news-full-bleed-footer {
	max-width: 100%;
	box-sizing: border-box;
}

.na-news-category {
	font-size: 13px;
	letter-spacing: -0.02em;
}

#bo_v_title.na-news-title,
.na-news-title#bo_v_title {
	font-size: 1.875rem;
	font-weight: 700 !important;
	line-height: 1.35;
	letter-spacing: -0.03em;
	color: #111;
	word-break: keep-all;
}

.na-news-meta-line {
	font-size: 13px;
	line-height: 1.45;
	color: #666 !important;
	border-bottom: 1px solid #f2f2f2 !important;
	padding-bottom: 12px;
	margin-bottom: 1rem;
}

.na-news-meta-vbar {
	flex-shrink: 0;
	display: inline-block;
	margin: 0 10px 0 0;
	font-size: 11px;
	color: #d8d8d8;
	line-height: 1;
	vertical-align: middle;
	font-weight: 300;
}

.na-news-meta-time {
	margin-right: 0;
}

.na-news-meta-line .na-news-meta-dot {
	opacity: .85;
}

#bo_v_con.na-news-body-wrap {
	min-height: auto;
	word-break: break-word;
	overflow: hidden;
}

.na-news-view-content {
	font-size: 18px;
	letter-spacing: -0.02em;
	line-height: 1.8;
	color: #333;
	word-break: break-word;
}

.na-news-view-content p,
.na-news-view-content li,
.na-news-view-content td,
.na-news-view-content th {
	font-size: 18px;
	letter-spacing: -0.02em;
	line-height: 1.8;
	color: inherit;
}

.na-news-view-content p {
	margin: 0 0 1.35em;
	color: #333;
}

.na-news-view-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 30px 0;
}

.na-news-view-content figure {
	margin: 30px auto;
	max-width: 100%;
	text-align: center;
}

.na-news-view-content figure img {
	margin: 30px auto;
}

.na-news-view-content figcaption,
.na-news-view-content .caption,
.na-news-view-content .img_caption,
.na-news-view-content p.img_txt,
.na-news-view-content .se-caption {
	display: block;
	margin: 12px auto 28px;
	font-size: 14px !important;
	line-height: 1.5 !important;
	letter-spacing: -0.01em !important;
	color: #888 !important;
	text-align: center;
	font-weight: 400;
}

.na-news-view-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 본문 안 광고 래퍼 — PHP 에서 na_news_apply_content_ad() 가 $google_ad_code 를 감싸 출력 */
.na-news-ad-wrap {
	overflow: hidden;
	min-height: 90px;
}

/* 본문 종료 분리선 (네이버 뉴스형) */
.na-news-body-end-rule {
	margin: 2.25rem 0 2rem;
	border: none;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(0, 0, 0, 0) 0%,
		#dce0e6 12%,
		#dce0e6 88%,
		rgba(0, 0, 0, 0) 100%);
	opacity: 0.92;
}

/*
 * 하단 가로 디스플레이 광고 박스
 * ─ 출력 HTML: view.skin.php 의 $google_ad_banner_bottom 블록(본문 아래·관련 기사 위).
 * ─ 광고 스크립트는 테마 common.php 등에서 변수에 할당만 하면 되고, 여기선 모양만 조정.
 */
.na-news-display-ad-footer {
	margin-top: 1.75rem;
	margin-bottom: 1.75rem;
	padding: 1.25rem 1rem 1.35rem;
	background: linear-gradient(180deg, #fbfbfc 0%, #f3f5f8 55%, #f0f3f7 100%);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 4px 18px rgba(15, 23, 42, 0.05);
	box-sizing: border-box;
	overflow: hidden;
}

.na-news-ad-slot-label {
	display: block;
	text-align: center;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: #9aa3ae;
	text-transform: uppercase;
	margin-bottom: 0.65rem;
}

.na-news-display-ad-inner {
	overflow: hidden;
	min-height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.na-news-display-ad-inner > * {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

/* 추천·공유 */
.na-news-reaction-zone {
	border-top: 1px solid rgba(15, 23, 42, 0.06);
	margin-top: 0.25rem;
	padding-top: 1.65rem !important;
	padding-bottom: 1.65rem !important;
	background: linear-gradient(180deg, rgba(250, 251, 253, 0.9) 0%, transparent 72%);
	border-radius: 0 0 14px 14px;
}

.na-news-reaction-zone .btn-group .btn-basic {
	border-color: rgba(15, 23, 42, 0.1) !important;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
	border-radius: 999px !important;
	margin: 0 3px;
	font-size: 0.9375rem;
}

.na-news-reaction-zone .btn-group .btn-basic:hover {
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(41, 98, 255, 0.12);
	border-color: rgba(41, 98, 255, 0.25) !important;
}

.na-related-section {
	padding-top: 0;
	margin-top: 0;
	border-top: none;
}

.na-related-section--elevated {
	padding: 1.85rem 1.35rem 1.65rem;
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: 16px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.94) inset,
		0 10px 40px rgba(15, 23, 42, 0.035),
		0 2px 8px rgba(15, 23, 42, 0.04);
	position: relative;
}

.na-related-section--elevated::before {
	content: "";
	position: absolute;
	left: 1.35rem;
	right: 1.35rem;
	top: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #03c75a 0%, #1b64da 52%, rgba(41, 98, 255, 0.25) 100%);
	opacity: 0.92;
	pointer-events: none;
}

.na-related-heading {
	font-size: 1.22rem !important;
	font-weight: 700 !important;
	color: #111;
	margin: 0.35rem 0 1rem;
	padding-bottom: 0.85rem;
	letter-spacing: -0.035em;
	border-left: 0 !important;
	padding-left: 0 !important;
	line-height: 1.35 !important;
	display: block;
	position: relative;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.na-related-heading::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 48px;
	height: 3px;
	background: linear-gradient(90deg, #03c75a 0%, #1b64da 100%);
	border-radius: 2px;
}

.na-related-latest-inner ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.na-related-latest-inner li {
	position: relative;
	padding: 14px 6px;
	margin: 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.06);
	transition: background-color .18s ease;
}

.na-related-latest-inner li:hover {
	background-color: rgba(246, 248, 252, 0.65);
}

.na-related-latest-inner li:last-child {
	border-bottom: none;
	padding-bottom: 2px;
}

.na-related-latest-inner li::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 0;
	border-radius: 2px;
	background: #1b64da;
	opacity: 0;
	transition: height .18s ease, opacity .18s ease;
}

.na-related-latest-inner li:hover::before {
	height: 40%;
	opacity: 1;
}

.na-related-latest-inner li > a:first-of-type {
	display: inline;
	font-size: 16px;
	font-weight: 500;
	color: #222;
	line-height: 1.45;
	word-break: keep-all;
}

.na-related-latest-inner li:hover > a:first-of-type {
	text-decoration: none;
}

.na-related-latest-inner li > a:first-of-type:hover {
	color: #1b64da;
	text-decoration: none;
}

.na-related-latest-inner .cnt_cmt,
.na-related-latest-inner .cmt_cnt,
.na-related-latest-inner span.cmt,
.na-related-latest-inner .cnt,
.na-related-latest-inner .basic_cmt,
.na-related-latest-inner .lt_cnt,
.na-related-latest-inner a .orangered,
.na-related-latest-inner li .cnt_cmt,
.na-related-latest-inner li span[class*="cmt"] {
	display: inline;
	font-weight: 600 !important;
	color: #1b64da !important;
	font-size: 15px;
	margin-left: 4px;
	vertical-align: baseline;
	text-decoration: none !important;
}

.na-related-latest-inner .lt_date,
.na-related-latest-inner strong + span,
.na-related-latest-inner .lt_info {
	display: block;
	font-size: 13px;
	color: #888;
	margin-top: 8px;
	font-weight: 400;
	line-height: 1.35;
}

/* 관련 기사: 제목만·한 줄 (latest() 미사용 · view.skin na_news_related_titles_html) */
.na-related-latest-inner--titles-only .na-related-titles {
	list-style: none;
	padding: 0;
	margin: 0;
}

.na-related-latest-inner--titles-only .na-related-titles__row {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.na-related-latest-inner--titles-only .na-related-titles__row:last-child {
	border-bottom: none;
}

.na-related-latest-inner--titles-only .na-related-titles__link {
	display: block;
	padding: 12px 10px 12px 14px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.025em;
	color: #222 !important;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .15s ease, background-color .15s ease;
	border-radius: 6px;
	box-sizing: border-box;
}

.na-related-latest-inner--titles-only .na-related-titles__row:hover .na-related-titles__link {
	color: #1b64da !important;
	background-color: rgba(246, 248, 252, 0.9);
}

@media (max-width: 575.98px) {
	.na-related-latest-inner--titles-only .na-related-titles__link {
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* ─── 「함께 볼만한 뉴스」3열 그리드·4:3 썸 상단·제목 말줄임 (헤드라인 카드형) ─── */
.na-bundle-news--elevated {
	margin-top: 1.5rem;
	margin-bottom: 0.35rem;
	padding: 1.75rem 1.35rem 1.55rem;
	background: #ffffff;
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: 16px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.94) inset,
		0 10px 40px rgba(15, 23, 42, 0.035),
		0 2px 8px rgba(15, 23, 42, 0.04);
	position: relative;
}

.na-bundle-news--elevated::before {
	content: "";
	position: absolute;
	left: 1.35rem;
	right: 1.35rem;
	top: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #03c75a 0%, #1b64da 45%, rgba(41, 98, 255, 0.2) 100%);
	opacity: 0.92;
	pointer-events: none;
}

.na-bundle-news__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 0.75rem;
	row-gap: 0.2rem;
	margin: 0.35rem 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* 블록 제목: 예시 헤드라인 이미지와 비슷한 굵기·자간에, 문자열 분리 없이 앞쪽 파랑→본문 검정 그라데이션 */
.na-bundle-news__title {
	grid-column: 1;
	margin: 0;
	font-size: 1.125rem !important;
	font-weight: 800 !important;
	line-height: 1.38;
	letter-spacing: -0.042em !important;
	color: #13151a;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.na-bundle-news__title {
		background: linear-gradient(92deg, #1b64da 0%, #2948b8 32%, #12141a 58%, #12141a 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		padding-bottom: 0.035em;
	}
}

.na-bundle-news__help-wrap {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	justify-self: end;
	outline: none;
	cursor: help;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.na-bundle-news__help {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #7b8494;
	padding: 3px 10px;
	border: 1px solid #dfe3ea;
	border-radius: 999px;
	background: #f8f9fb;
	line-height: 1.35;
	user-select: none;
}

.na-bundle-news__help-wrap:hover .na-bundle-news__help,
.na-bundle-news__help-wrap:focus .na-bundle-news__help {
	border-color: rgba(41, 98, 255, 0.35);
	color: #1b64da;
	background: #fff;
}

/* 함께 볼 만한 뉴스: Bootstrap .row 안에 col-6 col-md-4 (관련 기사 스타일과 분리) */
.na-bundle-news__body {
	overflow: hidden;
	width: 100%;
}

.na-bundle-news__cells.na-bundle-news__cells--grid.row {
	box-sizing: border-box;
	list-style: none;
	padding-left: 0;
}

.na-bundle-news__cells--grid .na-bundle-news__cell--grid {
	display: block;
	min-width: 0;
	margin-bottom: 1rem;
}

.na-bundle-news__card {
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: auto;
	padding: 0;
	text-decoration: none !important;
	color: inherit !important;
	box-sizing: border-box;
}

.na-bundle-news__card--grid {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.na-bundle-news__cells--grid .na-bundle-news__thumb-slot {
	flex-shrink: 0;
	position: relative;
	width: 100%;
}

.na-bundle-news__cells--grid .na-bundle-news__thumb-inner {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(145deg, #eef1f6 0%, #e2e8f0 100%);
	flex-shrink: 0;
}

.na-bundle-news__cells--grid .na-bundle-news__thumb-inner--empty {
	aspect-ratio: 4 / 3;
	min-height: 0;
}

.na-bundle-news__cells--grid .na-bundle-news__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.na-bundle-news__cells--grid .na-bundle-news__text-col {
	display: block;
	width: 100%;
	min-width: 0;
	flex: none;
	padding-top: 0;
}

.na-bundle-news__cells--grid .lat_title.na-bundle-news__title-line {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.38 !important;
	letter-spacing: -0.03em !important;
	color: #1a1d24 !important;
	margin: 10px 0 0 !important;
	word-break: keep-all;
}

.na-bundle-news__card--grid:hover .lat_title.na-bundle-news__title-line {
	color: #1b64da !important;
}

@media (min-width: 768px) {
	.na-news-sidebar {
		box-sizing: border-box;
	}

	.na-news-sidebar-inner.na-news-sidebar-rail {
		border-left: 1px solid #eaecef;
		padding-left: 30px;
		min-height: 220px;
	}

	.na-news-widget-stack > * {
		background: #fff;
		border: 1px solid #e8eef4;
		border-radius: 10px;
		padding: 16px 18px;
		margin-bottom: 14px;
		box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
	}

	.na-news-widget-stack > *:last-child {
		margin-bottom: 0;
	}

	.na-news-widget-stack:empty {
		display: none;
	}
}

@media (max-width: 767.98px) {
	.na-related-section--elevated {
		padding: 1.35rem 1rem 1.2rem;
		margin-left: 0;
		margin-right: 0;
		border-radius: 12px;
	}

	.na-related-section--elevated::before {
		left: 1rem;
		right: 1rem;
	}

	.na-bundle-news--elevated {
		padding: 1.35rem 1rem 1.2rem;
		border-radius: 12px;
	}

	.na-bundle-news--elevated::before {
		left: 1rem;
		right: 1rem;
	}

	.na-news-display-ad-footer {
		border-radius: 12px;
		padding: 1rem 0.85rem;
	}

	.na-news-view-content {
		font-size: 17px !important;
	}

	.na-news-view-content p,
	.na-news-view-content li,
	.na-news-view-content td,
	.na-news-view-content th {
		font-size: 17px !important;
	}

	.na-news-main {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.na-news-sidebar-inner.na-news-sidebar-rail {
		padding-left: 18px !important;
		padding-right: 18px !important;
		border-left: none;
	}

	body.responsive #bo_v.na-news-article #bo_v_con.na-news-body-wrap,
	#bo_v.na-news-article #bo_v_con.na-news-body-wrap {
		padding-left: 0;
		padding-right: 0;
	}
}

#bo_v_con {
	min-height: 200px;
	word-break: break-all;
	overflow: hidden;
}

@media all and (max-width:575px) {
	.responsive #bo_v_title.na-news-title {
		font-size: 1.35rem;
		line-height: 1.42;
	}
	.responsive #bo_v_con {
		min-height: 140px;
	}
}

#bo_v_con img {
	max-width: 100%;
	height: auto;
}

#bo_v_con #bo_v_img img,
.na-news-body-wrap #bo_v_img img {
	margin: 30px 0 !important;
}

#bo_v_img {
	width:100%;
	text-align:center;
	overflow:hidden;
	zoom:1;
}
#bo_v_img:after {
	display:block;
	visibility:hidden;
	clear:both;
	content:"";
}
#bo_v_img a.view_image {
	display:block;
}
#bo_v_img img {
	margin: 30px auto;
	display: block;
}

/* 게시판 읽기 : SNS 공유 */
#bo_v_sns_icon { 
	margin:-5px auto; 
}
#bo_v_sns_icon img { 
	width:40px; 
	border-radius:50%; 
	margin:5px;
}

/* 게시판 댓글 : 내용 */
.cmt-reply {
	top:0;
	left:-16px;
}
.by-writer { 
	background:#fbefef !important;
	border-top:1px solid #f6cece !important;
}
.cmt-content {
	word-break:break-all;
	overflow:hidden
}
.cmt-content img {
	max-width:100%;
	height:auto
}

/* 게시판 댓글 : 대댓글, 수정, 삭제 */
.cmt-btn ul { 
	list-style: none; 
	margin: 0; 
}
.cmt-btn ul > li { 
	float: left; 
	font-size:12px;
	padding: 0 10px; 
}
.cmt-btn ul > li::before { 
	float: left; 
	color:#ccc; 
	content: "|"; 
	margin-left:-12px;
}
.cmt-btn ul > li:last-child { 
	padding-right:0;
}
.cmt-btn ul > li:first-child::before, 
.cmt-btn ul > li.no-bar::before { 
	content: ""; 
	margin-left:0; 
}
.cmt-btn ul > li > a { 
	float:left;
	color:#888;
	white-space:nowrap;	
}

/* 게시판 댓글 : 쓰기폼 */
#fviewcomment #wr_content { 
	resize:none; 
}
@media all and (max-width:575px) {
	.responsive .cmt-box {
		border-right:0 !important;
	}
	.responsive #bo_vc_w .cmt-box {
		border-left:0 !important;
		border-radius:0 !important;
	}
	.responsive #bo_vc_login {
		border-left:0 !important;
		border-right:0 !important;
		border-radius:0 !important;
	}
}

/* 게시판 댓글 : SNS 등록 */
#bo_vc_opt ol {	
	margin:0;
	padding:0;
	list-style:none;
	zoom:1; 
	background:#ccc;
	border-radius:3px;
}
#bo_vc_opt ol:after { 
	display:block;
	visibility:hidden;
	clear:both;
	content:""; 
}
#bo_vc_opt ol li { 
	float:left;
	margin:0; 
}
#bo_vc_send_sns ul { 
	margin:0;
	padding:0;
	list-style:none;
	zoom:1; 
}
#bo_vc_send_sns ul:after { 
	display:block;
	visibility:hidden;
	clear:both;
	content:""; 
}
#bo_vc_send_sns ul li {	
	float:left;
	margin:0 1.0rem 0 0;
}
#bo_vc_send_sns input {	
	margin:0 0 0 0.5rem;
}

/* 게시판 쓰기 */
#bo_w .list-group-item {
	padding-left:0;
	padding-right:0;
	border-left:0;
	border-right:0;
}
#bo_w #wr_content { 
	margin-bottom:1.0rem !important;
}
@media all and (max-width:575px) {
	#bo_w .list-group-item {
		padding-left:1.0rem;
		padding-right:1.0rem;
	}
	.responsive #bo_w #wr_content {
		max-height:160px !important;
	}
}