@charset "utf-8";

/* --- 뷰페이지 퀵바 --- */
.quick_menu_wrap{position: fixed; left: 3%; bottom: 50px; padding-bottom: 0 !important; z-index: 100;}
.quick_menu{background-color: #fff; border-radius: 50px; padding: 15px; border: 1px solid #dadcdf; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .15); }
.quick_menu > li{position: relative; padding: 10px 0;}
.quick_menu > li + li{border-top: 1px solid #eee;}
.quick_menu li:hover .q_menu, .quick_menu li:hover .q_menu > a, .q_btn.on{color: var(--color-basic); transition-duration: 100ms;}

.q_menu{text-align: center;}
.q_menu i{font-size: 24px; line-height: 1.2;}
.q_tit{display: block; font-size: 12px; margin-top: 10px; font-weight: 600; white-space: nowrap; text-align: center;}

.font_icon {font-weight: 800; font-style: initial; letter-spacing: -2px;}
.font_icon > span:nth-child(1){font-size:10px;}
.font_icon > span:nth-child(2){font-size:12px;}
.font_icon > span:nth-child(3){font-size:14px;}

.q_btn:hover{cursor: pointer;}
.q_pop{display: none; position: absolute; left: 75px; top: -50%; padding: 20px; background-color: #fff; border-radius: 15px; border: 1px solid #dadcdf; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .15); width: 300px;}
.q_pop .flex{justify-content: space-between; padding: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 10px;}
.q_pop .tit{font-weight: 700; font-family: 'SUITE', sans-serif;}
.q_pop .q_close{color: #ccc; padding: 0 5px 0 10px;}
.q_pop .q_close:hover{color: inherit; transition-duration: 100ms;}


/* --- 뷰페이지 퀵바 : sns 공유 --- */
.q_share{display: flex; gap: 20px 5px; flex-wrap: wrap;}
.q_share li{width: calc((100% - 15px)/4);}
.q_share li .icon { display: block; width: 34px; height: 34px; background: url("./img/btn_share.png") no-repeat 0 0; text-indent: -9999px; margin: 0 auto;}
.q_share li.bs01 .icon { background-position: 0 0;}
.q_share li.bs02 .icon { background-position: -40px 0;}
.q_share li.bs03 .icon { background-position: -80px 0;}
.q_share li.bs04 .icon { background-position: -120px 0;}
.q_share li.bs05 .icon { background-position: -160px 0;}
.q_share li.bs06 .icon { background-position: -200px 0;}
.q_share li.bs07 .icon { background-position: -240px 0;}
.q_share li.bs08 .icon { background-position: -280px 0;}
.q_share li.bs09 .icon { background-position: -320px 0;}
.q_share li.bs10 .icon { background-position: -360px 0;}
.q_share li.bs11 .icon { background-position: -400px 0;}

/* 추가 */
.q_share li.bs12 .icon{ background: url("./img/btn_url.png") no-repeat center / cover;}
.q_share li a:hover { opacity: .8;}


/* --- 뷰페이지 퀵바 : 글자크기 --- */
.q_zoom{padding: 10px 0;}
.q_zoom ul{display: flex; justify-content: center; align-items: center; gap: 15px;}
.zoom_icon a{display: flex; align-items: center; justify-content: center;border: 1px solid #eee; width: 30px; aspect-ratio: 1/1; padding: 5px; border-radius: 50%;}
.zoom_icon:hover a{background-color: #fbfbfb; color: #999; transition-duration: 100ms;}
.txt_small{font-weight: 700;}
.txt_big{font-size: 1.5em; font-weight: 700;}



/* ============================================================================== */
.news_header{background-color: #161616; color: #fff; z-index: 99; padding: 10px 0; display: none; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .15); margin-top: 42px !important;}
.news_header.on{position: fixed; top: 0; left: 0; right: 0;}
.news_header .flex{align-items: center; justify-content: space-between; text-align: center; padding: 0 10px;}
.news_header .flex .tit{flex: 1; text-align: center; font-size: 1.2rem; font-weight: 600;}
.news_header .btn_space{width: 28px;}
.news_header button{display: flex ; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background-color: #eee; color: #161616; opacity: 0.3; transition-duration: 100ms;}
.news_header button:hover{opacity: 0.6;}
.sticky_banner.on{top: 48px;}

/* 뉴스 내용 페이지 */
.sub_view{margin-top: 30px;}
.news_view .col_02{z-index: 10;}
.news_source{display: flex; gap: 0.5em; font-size: 0.9em; margin-top: 30px;}
.news_source a{flex: 1;}

.info{font-size: 13px; color: #666;}
.info li + li{border-left: 1px solid #ddd; padding-left: 10px;}
.info li{padding-right: 10px;}
.signature{ text-align: right; font-size: 14px; color: #666;}

/* ===== 뉴스 내용 상단 ===== */
.view_header{padding-bottom: 30px; border-bottom: 1px solid #eee; margin-bottom: 30px;}
.news_title .tit{font-size: 2.4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; word-break: keep-all; margin: 20px 0;}
.news_title .sub_tit{position: relative; font-size: 1.2rem; font-weight: 500; line-height: 1.4; margin: 20px 0; color: #666; padding-left: 20px;}
.news_title .sub_tit::before{position: absolute; top: 3px; bottom: 3px; left: 0; width: 3px; background-color: #ddd; content: ""; display: block; clear: both;}


/* ===== 뉴스 내용 ===== */
.news_banner {width: 160px;}
.news_banner .theiaStickySidebar{width: 160px !important;}
.news_file{padding: 20px; border: 1px solid #eee; border-radius: 15px; margin-top: 60px; font-size: 15px; font-weight: 500;}
.news_file li + li{margin-top: 10px;}
.news_file a{display: flex; align-items: center; justify-content: space-between; gap: 15px;}
.news_file a > span{text-decoration: underline;}

/* ===== 뉴스 내용 하단 ===== */
.news_bottom {margin-top: 30px;}

/* 기자 정보 */
.reporter_box{display: flex; align-items: center; gap: 20px; padding: 20px 0; border: 1px solid #eee; border-style: solid none;}
.reporter_box .img{width: 80px; aspect-ratio: 1/1; border-radius: 15px; overflow: hidden;}
.reporter_box .img img{display: block; width: 100%; height: 100%; object-fit: cover;}
.reporter_box .text{flex: 1;}
.reporter_box .text strong{display: block; font-size: 1.1rem; margin-bottom: 5px;}
.reporter_box .button{width: fit-content;}

/* 저작권 표시 */
.news_copyright{background-color: #eee; color: #999; padding: 20px; font-size: 13px; line-height: 1.6; text-align: right;}


/* 태그 + 이전글 다음글 */
.bt_03{position: relative; margin: 60px 0;}
.tag-group{position: absolute; top: -1.5em; left: 0; display: flex; background-color: #fff; padding: 1em 1em 1em 0; gap: 5px;}
.tag-group strong{display: block; width: 60px; font-weight: 800;}
.tag-group .row{flex: 1; gap: 5px; flex-wrap: wrap;}
.tag-group a:hover{text-decoration: underline;}

.other_news{display: flex; border: 1px solid #eee; border-radius: 15px;}
.other_news > li{flex: 1; padding: 20px;}
.other_news > li + li{text-align: right; border-left: 1px solid #eee;}
.other_news strong{display: block; color: #999; margin-bottom: 10px; font-size: 14px; font-weight: 800;}
.other_news .tit{font-weight: 600; font-size: 1.1rem; line-height: 1.4;}
.other_news > li + li .tit{text-align: right;}


/* 구독&후원 하기 */
.bt_04{margin: 60px 0;}
.support_wrap{background-color: #222; color: #fff; padding: 20px; border-radius: 15px;}
.support_wrap .deco_tit{color: #999;}
.support_wrap .deco_tit > b{color: #fff;}
.support_wrap .deco_tit::after{background-color: #999;}
.support_wrap p{line-height: 1.8;}
.support_wrap .support_list{margin-top: 15px;}
.support_wrap .account_info{color: #ffcd38; font-weight: 600;}


/* 관련 기사 */
.bt_05{margin: 60px 0;}
.relate_list{border-top: 2px solid #222; overflow: hidden;}
.relate_list li{border-bottom: 1px dashed #eee; font-size: 15px;}
.relate_list a{display: flex; justify-content: space-between; padding: 1em 0; gap: 10px;}
.relate_list b{flex: 1;}
.relate_list .date{width: 80px; color: #999; font-size: 0.9em;}
.btn_collap{text-align: center; margin-top: 20px; color: #999; font-size: 14px;}


/* 연관기사 */
.post_wrap{margin: 30px 0;}
.post_wrap .img{position: relative; border-radius: 15px; overflow: hidden;}


/* ===== 댓글 ===== */
#view_comment_frame{width: 100% !important;}
.reply_wrap textarea, .reply_wrap input[type="text"], .reply_wrap input[type="password"]{display: block; width: calc(100% - 1px);}
.reply_form .c_input{flex: 1;}
.reply_form .captcha_wrap{width: calc(100% - 1px);}
.reply_form .captcha_wrap input{width: 100%;}
.reply_wrap .deco_tit > small{margin-left: 0.5em; color: #222; font-weight: 600;}

.reply_form > * + *{margin-top: 5px;}
.reply_form .row dt{max-width: 120px;}

.guest_info{gap: 5px;}
.guest_info > li{flex: 1;}
.guest_info > li > input{width: 100%;}

.reply_text{}
.reply_text > small{display: block; text-align: right; margin: 10px 0; color: #666; font-weight: 500;}
.reply_input{position: relative;}
.reply_input > button{position: absolute; right: 5px; bottom: 5px;}

.reply_list_wrap {border-top: 2px solid #222;}
.reply_list > li{padding: 15px 0; border-bottom: 1px solid #eee; border-style: solid none;}
.re_reply_box .reply_list > li{padding-bottom: 0; border-bottom: none; border-top: 1px solid #eee; margin-top: 15px;}

.pw_input{position: absolute; right: 1px; top: 1.2em; background-color: #fff; padding: 10px; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15); z-index: 5;}
.pw_input input{font-size: 13px;}
.pw_input .btn_box{gap: 5px; margin-top: 5px;}
.pw_input .btn_box .btn_big{font-size: 11px; padding: 0.75em;}

/* 댓글 메뉴 */
.reply_top{position: relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.reply_top .name{font-weight: 600;}
.reply_bot{margin-top: 10px;}
.reply_row{font-size: 13px; color: #999; align-items: center;}
.reply_row li + li{padding-left: 10px; margin-left: 10px;border-left: 1px solid #eee;}

.reply_row .black{color: #222;}
.reply_row .red{color: #df0000;}
.reply_row .gray{color: #ccc;}


/* 댓글 내용 */
.reply_content{margin: 15px 0;}
.news_view{align-items: flex-start;}
.news_view > .col_02{margin-bottom: 60px;}

/* ===== 뉴스 기사 등록 ===== */
.news_write .tit_box{display: flex; justify-content: space-between;}
.news_write .red{color: var(--red);}

.req_text {font-weight: 600;}
.req_text > svg{color: var(--point-color); margin-right: 0.5em;}

.add_text{display: block; font-weight: 600; color: #161616; font-size: 0.9em; margin-top: 10px;}

.news_form{border-top: 2px solid #222;}
.news_form > dl{padding: 15px 0; border-bottom: 1px solid #eee;}
.news_form > dl > dt{margin-bottom: 10px; font-weight: 700;}
.news_form > dl > dt > svg{color: var(--point-color); margin-right: 0.5em;}
.news_form > dl > dd{font-size: 15px;}
.news_form > dl > dd > input[type="text"], .news_form > dl > dd > textarea, .news_form > dl > dd > select{display: block; width: 100%;}
.news_form > dl > dd > * + *{margin-top: 10px;}
.news_form .option_box{gap: 30px; align-items: center; padding: 5px 0;}

.news_form .result{display: flex; gap: 15px; min-height: 20px; align-items: center;}
.news_form .result li{min-width: 100px;}
.news_form .result li + li{padding-left: 15px; border-left: 1px solid #ddd;}
.news_form .inputs{display: flex; gap: 5px; align-items: center;}
.news_form .inputs > li{flex: 1;}
.news_form .inputs > li > select{display: block; width: 100%;}
.news_form .inputs > li > select:hover{cursor: pointer;}

#wr_image_preview{display: flex; gap: 15px; align-items: flex-end;}
#wr_image_preview .img{border: 1px solid #ddd;}
#wr_image_preview .text{padding: 15px 0;}
#wr_image_preview .text small{font-weight: 600;}

.file_wrap .row{display: flex; justify-content: space-between; align-items: center;}
.file_wrap .row + .row{margin-top: 5px;}
.file_wrap .row > input[type="file"]{flex: 1;}
.file_wrap .row > label{font-size: 13px;}
.file_wrap .row > a.btn{width: 80px; font-size: 12px;}
.file_wrap .row .btn{height: 2.4em; line-height: 2.3em; font-size: 11px;}


.clearfix::after{content:""; display: block; clear: both;}