/* ============================================= */
/*                  SITE VALUE                   */
/* ============================================= */
/* 헤더 로고 사이즈 통합 관리 (style.css보다 나중에 로드되어 항상 우선 적용됨 · 넓이/높이 관련 값은 이 블록에서만 관리) */
.header .logo-default {max-width: 300px; min-width: 88px; max-height: 69px; width: auto;}
.header .logo-default > a > img {height: auto; max-height: 69px; object-fit: contain;}
@media screen and (max-width: 767px) {
	/* 2026-08-12 : 모바일 헤더 로고 사이즈 축소 */
	.header .logo-default {max-height: 60px;}
	.header .logo-default > a > img {max-height: 60px;}
}
.footer .logo-default {max-width: 180px; min-height: 50px; width: 180px;}
.gnb-wrap .menu li:hover a {color: #83151b;}
.pagenation a.current, .pagenation .current.current {color: #83151b; border-color: #83151b;}
.news-view p strong a {color: #83151b;}
.news-view a {color: #83151b; font-weight: bold;}
.post-from p a {color: #83151b;}
.gnb-wrap .menu li:checked::before, .gnb-wrap .menu li.current-menu-item::before {background-color: #83151b; bottom: -21px;}
.gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a {color: #83151b;}
.comment-box .write-comment .absolute-box button {background-color: #83151b;}
body.policy .body ul.footer_link li.active {border: 1px solid #83151b !important;}
body.policy .body ul.footer_link li:hover a {color: #83151b !important;}
body.policy .body ul.footer_link li.active a, body.policy .body ul.footer_link li:hover a {color: #83151b !important;}
.author-name {color: #83151b;}
.author-link>a::after {background: #83151b;}
.gnb-wrap .menu li.current-post-parent::before {background-color: #83151b; bottom: -21px;}
.gnb-wrap .menu li.current-post-parent a {color: #83151b; font-weight: bold;}
@media screen and (max-width: 767px) {
	.header .search-wrap .icon-btn i {top: 2px;}
	/* 모바일 헤더 검색버튼 위치 수정 */
	.header .search-wrap {top: 0;}
}
/* OPTION1 : 어두운 헤더 BG + 밝은 텍스트 */
/* 사용하려면 아래 주석 해제 */
/* 
.header { background-color: #83151b; } 
.gnb-wrap .menu li a { color: #fff; } 
.gnb-wrap .menu li:hover a { color: #fff; } 
.gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color:#fff; } 
@media screen and (max-width: 767px) { 
.gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color: #000; } 
.header .gnb-wrap { background-color: #fff; } 
.gnb-wrap .menu li a { color: #000; } 
.gnb-wrap .menu li:hover a { color: #000; } 
.icon-search { filter: invert(1); } 
.header .search-wrap .icon-btn i { top: 5px; } 
} 
*/
/* OPTION2 : 밝은 헤더 BG + 검정 텍스트*/
/* 사용하려면 아래 주석 해제 */
/* 
.header { background-color: #ffcf35; } 
.gnb-wrap .menu li a { color: #000; } 
.gnb-wrap .menu li:hover a { color: #000; } 
.gnb-wrap .menu li:checked a, .gnb-wrap .menu li.current-menu-item a { color:#000; } 
@media screen and (max-width: 767px) { 
.header .gnb-wrap { background-color: #fff; } 
.gnb-wrap .menu li a { color: #000; } 
.gnb-wrap .menu li:hover a { color: #ffcf35; } 
.header .search-wrap .icon-btn i { top: 5px; } 
} 
*/
/* ============================================= */
/*                 SITE VALUE END                */
/* ============================================= */
/* ============================================= */
/*                    UI FIX                     */
/* ============================================= */
/* 기사본문 폰트 , 모바일 상단 ad 삭제로 여백 수정 */
.news-view p {text-align: justify;}
@media screen and (max-width: 767px) {
	.news-article {letter-spacing: normal;}
	.news-view p {line-height: 30px !important; letter-spacing: normal !important; font-size: 18px !important; padding: 10px 0 !important;}
	.news-view .title-box {padding-top: 15px;}
	.news-view h2, .news-view h3 {font-size: 19px !important; line-height: 30px !important;}
}
/* 함께보면좋은뉴스 위젯의 디자인 수정버전 */
.modified.news-rank li {height: fit-content; background-size: 25px; background-repeat: no-repeat; background-position: left -1px top 27px;}
.modified.news-rank .news-right {width: 100px; height: 100px;}
.modified.news-rank .news-right img {aspect-ratio: unset; border-radius: 5px;}
.modified.news-rank .news-left {padding-right: 5px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; padding-left: 25px;}
.modified.news-rank .news-left .title {font-size: 18px; line-height: 1.5; letter-spacing: -1px;}
.modified.news-rank li:nth-child(1) {background-image: url('https://static.viewus.co.kr/image/rank01.png');}
.modified.news-rank li:nth-child(2) {background-image: url('https://static.viewus.co.kr/image/rank02.png');}
.modified.news-rank li:nth-child(3) {background-image: url('https://static.viewus.co.kr/image/rank03.png');}
.modified.news-rank li:nth-child(4) {background-image: url('https://static.viewus.co.kr/image/rank04.png');}
.modified.news-rank li:nth-child(5) {background-image: url('https://static.viewus.co.kr/image/rank05.png');}
.modified.news-rank .news-left > span {font-size: 30px; line-height: 1; font-weight: 600; color: #777; margin-right: 5px; display: none;}
.modified.news-rank .title-box .line-txt-box time {display: none;}
.modified.news-rank .title-box .line-txt-box p > *:first-child {font-size: 15px;}
/* 이시각인기뉴스와 댓글많은뉴스에 클래스 추가 */
.pc-hidden {display: none;}
.mo-hidden {display: block;}
@media screen and (max-width: 767px) {
	.mo-hidden {display: none;}
	.pc-hidden {display: block;}
}
/* 구글광고가 화면 보다 크게 그려질 경우 가로 스크롤 안되게 처리 */
@media screen and (max-width:767px) {
	#main {overflow-x: hidden;}
}
/* 2024-01-10 하단모듈 영역조정 */
@media screen and (max-width:767px) {
	.weekly-best {margin-top: 20px !important;}
	.hot-news {margin-bottom: 20px;}
	body.single-post .hot-news {margin-top: 20px;}
	.hot-news h3 {margin-bottom: 10px;}
	article.news-rank {margin-bottom: 20px; margin-top: 20px;}
	.ad.taboola {margin-bottom: 20px; margin-top: 20px;}
}
.hot-news h3 {font-size: 2rem;}
.popular-news-module, .recommend-news-module {margin-bottom: 20px !important; margin-top: 20px !important;}
/* 구독 */
button.post-follow-pc {background-image: url("data:image/svg+xml,%3Csvg fill='%233e3e40' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath d='M2.002 27.959c0-0.795 0.597-1.044 0.835-1.154l8.783-4.145c0.63-0.289 1.064-0.885 1.149-1.573s-0.193-1.37-0.733-1.803c-2.078-1.668-3.046-5.334-3.046-7.287v-4.997c0-2.090 3.638-4.995 7.004-4.995 3.396 0 6.997 2.861 6.997 4.995v4.998c0 1.924-0.8 5.604-2.945 7.292-0.547 0.43-0.831 1.115-0.749 1.807 0.082 0.692 0.518 1.291 1.151 1.582l2.997 1.422 0.494-1.996-2.657-1.243c2.771-2.18 3.708-6.463 3.708-8.864v-4.997c0-3.31-4.582-6.995-8.998-6.995s-9.004 3.686-9.004 6.995v4.997c0 2.184 0.997 6.602 3.793 8.846l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h21.997v-2l-21.996 0.001v-2.029zM30.998 25.996h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1z'%3E%3C/path%3E %3C/g%3E%3C/svg%3E"); background-size: 18px; background-position: 12px 8px; background-repeat: no-repeat; margin-left: auto; margin-right: 0 !important;}
button.post-follow-mo {display: none;}
@media screen and (min-width: 768px) {
	.speech-bubble {display: none;}
	.post-follow-mo {display: none !important;}
}
@media screen and (max-width: 767px) {
	.header .gnb-wrap ul {overflow-y: hidden;}
	.post-follow-mo {background-image: url("data:image/svg+xml,%3Csvg fill='%2383151b' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cpath d='M2.002 27.959c0-0.795 0.597-1.044 0.835-1.154l8.783-4.145c0.63-0.289 1.064-0.885 1.149-1.573s-0.193-1.37-0.733-1.803c-2.078-1.668-3.046-5.334-3.046-7.287v-4.997c0-2.090 3.638-4.995 7.004-4.995 3.396 0 6.997 2.861 6.997 4.995v4.998c0 1.924-0.8 5.604-2.945 7.292-0.547 0.43-0.831 1.115-0.749 1.807 0.082 0.692 0.518 1.291 1.151 1.582l2.997 1.422 0.494-1.996-2.657-1.243c2.771-2.18 3.708-6.463 3.708-8.864v-4.997c0-3.31-4.582-6.995-8.998-6.995s-9.004 3.686-9.004 6.995v4.997c0 2.184 0.997 6.602 3.793 8.846l-8.783 4.145s-1.998 0.89-1.998 1.999v3.001c0 1.105 0.895 1.999 1.998 1.999h21.997v-2l-21.996 0.001v-2.029zM30.998 25.996h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1z'%3E%3C/path%3E %3C/g%3E%3C/svg%3E"); background-size: 17px; font-size: 15px; border: 1px solid #83151b; color: #83151b; padding: 0 9px 0 33px; line-height: 1; border-radius: 17px; background-position: 11px 5px; background-repeat: no-repeat; position: absolute; display: block; height: 30px !important; z-index: 999; transform: translateY(0); transition: transform 0.5s;}
	.post-follow-mo > a {color: #83151b; font-weight: 400 !important; font-size: 12px !important;}
	.header .gnb-wrap li.post-follow-mo a {padding: 0 !important; font-size: 14px !important;}
	button.post-follow-pc {display: none;}
	.header .gnb-wrap li.speech-bubble {opacity: 0; transform: translateY(30px); margin: 0px; padding: 7px; color: #fff; border-radius: 8px; position: absolute; top: -8px; left: -3px; text-align: center; line-height: 1; background: linear-gradient(to top, #a1a7ff, #83151b); z-index: 9999999; transition: opacity 0.5s, transform 0.5s; margin: 0 !important; position: absolute !important; height: auto !important; padding: 5px !important;}
	.speech-bubble::after {border-top: 9px solid transparent; content: ""; position: absolute; top: -14px; right: 50%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid #83151b;}
	.header .gnb-wrap li.speech-bubble a {font-size: 12px !important; color: #fff; font-weight: 400 !important;}
	#bnb .post-follow-mo {display: none;}
	.post-follow-mo::after {content: "";}
}
@media screen and (max-width: 767px) {
	header {background: #fff; z-index: 999999999999;}
	body::-webkit-scrollbar-thumb {background-color: transparent;}
	body::-webkit-scrollbar {width: 5px;}
	body::-webkit-scrollbar-thumb {background-color: transparent;}
}
/* related article with yarpp */
body.single-post .yarpp-thumbnails-horizontal .yarpp-thumbnail {margin: 0; border: none;}
@media screen and (max-width: 767px) {
	.yarpp {max-width: none !important; margin-left: 10px;}
	.yarpp h3, .yarpp-related h3 {font-size: 20px !important;}
	.yarpp-thumbnails-horizontal {display: flex; overflow-x: auto; overflow-y: hidden; height: fit-content;}
	.yarpp-thumbnails-horizontal::-webkit-scrollbar {display: none;}
	.yarpp-thumbnail > img {object-fit: cover;}
	.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {font-size: 16px !important; letter-spacing: -0.5px; font-weight: normal !important;}
	.yarpp-thumbnails-horizontal .yarpp-thumbnail {width: 135px !important;}
}
/* below-yarpp */
.below-yarpp-title {font-size: 19px; padding: 0 18px; border: none; margin-top: 20px;}
.below-yarpp {padding: 10px 18px 30px 18px;}
.below-yarpp ul li {padding-left: 15px; position: relative; margin-bottom: 10px;}
.below-yarpp ul li:last-child {margin-bottom: 0;}
.below-yarpp ul li::before {content: '└'; font-size: 14px; position: absolute; left: -5px; /*top: 50%; transform: translateY(-50%); */ color: #444;}
.below-yarpp ul li a {font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 105%; display: block;}
@media screen and (min-width: 768px) {
	.below-yarpp-title {padding: 0; margin-top: 30px;}
	.below-yarpp {padding-left: 0;}
}
/* 기존모듈추가수정 */
div.comments-bubble {display: flex; width: 45px; height: 45px; position: fixed; right: 10px; bottom: 125px; flex-direction: column; justify-content: center; align-items: center; border-radius: 100%; border: 1px solid rgba(0, 0, 0, .05); box-shadow: 0 1px 2px #00000040; background-color: #83151b; z-index: 999999999999999;}
div.comments-bubble>a {display: flex; flex-direction: column; align-items: center; gap: 3px;}
div.comments-bubble p.commentCounter {font-size: 14px; color: #fff; line-height: 1; font-weight: bold;}
/* breadcrumb */
.title-box > span {font-size: 14px; display: block; margin-bottom: 10px;}
.title-box > span > span:nth-of-type(1)::after {content: '»'; padding-left: 6px;}
.title-box > span a {color: #000;}
.title-box .breadcrumb_last {display: none;}
@media screen and (max-width: 767px) {
	.title-box > span {margin-bottom: 0px;}
}
/* ============================================= */
/*                   UI FIX END                  */
/* ============================================= */
/* ============================================= */
/*               ADDITIONAL STYLES               */
/* ============================================= */
/* 2026-08-11 공용 브레드크럼 컴포넌트 (category/single 등 여러 템플릿 공유) */
.breadcrumb {margin-bottom: 24px;}
.breadcrumb ol {display: flex; align-items: center; flex-wrap: wrap;}
.breadcrumb ol li {display: flex; align-items: center; font-size: 1.4rem; line-height: 2.1rem; color: #000;}
.breadcrumb ol li a {color: #000; font-weight: 400;}
.breadcrumb ol li:not(:last-child)::after {content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px; border-top: 1.5px solid #000; border-right: 1.5px solid #000; transform: rotate(45deg);}
.breadcrumb ol li:last-child a {font-weight: 700; pointer-events: none;}
/* 공용 카테고리/해시태그 알약 리스트 컴포넌트 */
.cat-tag-row {margin-bottom: 24px;}
.cat-tag-row .cat-tag-list {display: flex; flex-wrap: wrap; gap: 8px; max-height: 37px; overflow: hidden;}
.cat-tag-row .cat-tag-list li a {display: block; padding: 4px 16px; border: 1px solid #83151b; font-size: 1.8rem; font-weight: 700; line-height: 2.7rem; color: #83151b; white-space: nowrap;}
.cat-tag-row .cat-tag-list li a:hover {background-color: #83151b; color: #fff;}
/* 사이드바 공용 Hot Articles (全站熱門文章) 컴포넌트 */
.hot-articles-title {display: flex; flex-direction: column; margin: 0 0 16px; padding: 0; border: none; text-align: center;}
.hot-articles-title span {font-size: 1.2rem; font-weight: 700; line-height: 1.8rem; color: #83151b;}
.hot-articles-title strong {font-size: 2.4rem; font-weight: 700; line-height: 3.6rem; color: #000;}
.hot-articles ul {display: grid; gap: 16px;}
.hot-articles li a {display: block; color: inherit;}
.hot-articles-thumb {position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 8px;}
.hot-articles-thumb img {width: 100%; height: 100%; object-fit: cover;}
.hot-articles-thumb::after {content: "閱讀全文"; position: absolute; top: 0; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #1c1e25cc; color: #fff; font-size: 1.8rem; letter-spacing: 0.1rem; visibility: hidden; opacity: 0; transition: 0.2s;}
.hot-articles li:hover .hot-articles-thumb::after {visibility: visible; opacity: 0.8;}
.hot-articles-label {position: absolute; top: 0; left: 0; padding: 0 8px; background-color: #1c1e25; color: #fff; font-size: 1.8rem; font-weight: 400; line-height: 1.8;}
.hot-articles h3 {margin: 8px 0; padding: 0; border: none; font-size: 2.2rem; font-weight: 400; line-height: 3.3rem; color: #000; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.hot-articles-desc {margin: 0; font-size: 1.4rem; font-weight: 400; line-height: 2.1rem; color: #676767; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
/* 사이드바 공용 BUZZING TOP 5 (口碑聲量排行TOP 5) 컴포넌트 (熱門討論新聞 로직 재사용) */
.buzzing-title {display: flex; flex-direction: column; margin: 0 0 16px; padding: 0; border: none; text-align: center;}
.buzzing-title span {font-size: 1.2rem; font-weight: 700; line-height: 1.8rem; color: #83151b;}
.buzzing-title strong {font-size: 2.4rem; font-weight: 700; line-height: 3.6rem; color: #000;}
.buzzing-top5 {border: 1px solid #d9d9d9; padding: 3.2rem 1.6rem 1.6rem; margin-bottom: 16px; display: flex; flex-direction: column; align-items: center; transition: 0.2s;}
.buzzing-top5:hover {box-shadow: 0 1rem 1.5rem -0.3rem rgba(0, 0, 0, .1), 0 0.4rem 0.6rem -0.4rem rgba(0, 0, 0, .1);}
.buzzing-thumb {display: block; width: 18rem; height: 18rem;}
.buzzing-thumb img {width: 100%; height: 100%; object-fit: cover;}
.buzzing-top5 ul {width: 100%; display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin-top: 2.4rem;}
.buzzing-top5 li {display: flex; align-items: center; gap: 1.2rem; height: 3rem; padding: 0 1.2rem; min-width: 0; background-color: #f5f5f5;}
.buzzing-top5 li:first-child {background-color: #fff;}
.buzzing-rank {flex-shrink: 0; font-size: 1.6rem; font-weight: 800; color: #83151b;}
.buzzing-item-title {flex: 1; min-width: 0; font-size: 1.3rem; font-weight: 400; color: #000; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
/* 2025-04-11 gnb handler */
@media screen and (max-width: 767px) {
	#main, #site-content {padding-top: 115px !important; margin-top: 24px;}
	body.page #main {padding-top: 0 !important; margin-top: 0;}
	body.archive .img-box img {object-fit: contain;}
	.news-view {padding-top: 0px !important;}
	header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1000; transition: transform 0.3s ease-out, top 0.3s ease-out; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
	header.gnb-down {transform: translateY(-100%);}
	/* 2026-08-12 : 헤더가 로고행+메뉴행 2줄 구조로 바뀌면서 고정 -60px 오프셋이 로고를 어중간하게 잘라먹는 문제가 있어, 로고행 자체를 숨기고 top은 0을 유지하도록 변경 (메뉴행만 남아 자연스럽게 줄어듦) */
	header.gnb-up {top: 0 !important;}
	header.gnb-up .header .logo-default {display: none;}
	/* 2026-08-12 : 스크롤 시 로고행이 사라지고 메뉴행만 남을 때, 로고행과의 여백(margin-top)이 불필요하므로 제거 */
	header.gnb-up .header .gnb-wrap {margin-top: 0;}
}
/* 2025-06-12 video iframe handler */
.wp-block-embed {text-align: center;}
@media screen and (max-width: 767px) {
	.wp-block-embed iframe {width: 100%;}
}
/* 2026-08-12 전체화면 검색 오버레이 (공용 컴포넌트) */
.search-overlay {display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 999999; background-color: rgba(131, 21, 27, 0.9); opacity: 0; visibility: hidden; transition: opacity 0.2s;}
.search-overlay.active {opacity: 1; visibility: visible;}
.search-overlay-close {position: absolute; top: 2.4rem; right: 2.4rem; width: 2.4rem; height: 2.4rem; padding: 0; border: none; background: transparent; color: #fff; cursor: pointer;}
.search-overlay-close svg {width: 100%; height: 100%;}
.search-overlay-content {display: flex; flex-direction: column; align-items: center; gap: 4.8rem; width: 100%; padding: 0 2rem;}
.search-overlay-title {display: flex; align-items: center; gap: 1.6rem; color: #fff; font-size: 4.8rem; font-weight: 400;}
.search-overlay-title svg {width: 4rem; height: 4rem; flex-shrink: 0;}
.search-overlay-form {display: flex; align-items: center; gap: 1.2rem; width: 48rem; max-width: 100%; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.9);}
.search-overlay-input {flex: 1; min-width: 0; height: 4.2rem; padding: 0 0.8rem; border: none; background: transparent; color: #fff; font-size: 2.4rem;}
.search-overlay-input::placeholder {color: rgba(255, 255, 255, 0.7);}
.search-overlay-submit {flex-shrink: 0; padding: 0.8rem 2rem; border: none; border-radius: 999px; background-color: #fff; color: #83151b; font-size: 1.8rem; font-weight: 500; cursor: pointer;}
.search-overlay-tags {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem 0.8rem; max-width: 60rem; margin: 0; padding: 0; list-style: none;}
.search-overlay-tags li a {display: block; padding: 0.4rem 1.6rem; border-radius: 999px; background-color: #fff; color: #1c1e25; font-size: 1.4rem;}
body.search-overlay-open {overflow: hidden;}
@media screen and (max-width: 767px) {
	.search-overlay-title {font-size: 3.2rem;}
	.search-overlay-title svg {width: 2.8rem; height: 2.8rem;}
	.search-overlay-form {width: 100%;}
}