@charset "utf-8";
/*
 * news-comment v1.0.0 — 댓글 UI 공용 CSS (PC·모바일 1본)
 * 출처: 노뉴스 U-2609-00069 반응형 댓글 UI (주간함양 UI 100% 이식본)의 CSS 를 합본한 것이다.
 *   - 노뉴스 news/css/component.css  : 레이어(:164-173) · 투표(:2069-2071) · 댓글 관리 툴팁(:2061-2067) · 댓글 본체(:2085-2198)
 *   - 노뉴스 news/css/responsive.css : 댓글 관련 분기(1280px / 1023px / 767px)
 *   - 노뉴스 mobile/css/layout.css + 모바일 UI 지역 style : 모바일 트리 규격(팝업 폭·간격)
 *
 * 규칙
 *   1. 전 선택자 #coment_area 접두 — 사이트 CSS 와 충돌·누수 방지. 팝업(#layer1·#layerDel)도 #coment_area 안에 렌더되므로 별도 접두가 필요 없다.
 *   2. var(--point-color01) 등 CSS 변수는 실값으로 풀었다(포인트 색 #e91c24).
 *   3. url() 은 ../image/common/파일.png 로 통일 (css/ 폴더와 image/ 폴더가 같은 부모 아래 있다).
 *   4. 사이트 공통 리셋이 없는 레이아웃(960px 테이블 등)에서도 깨지지 않게 box-sizing · clearfix · 리스트 리셋을 #coment_area 안에서 자급한다.
 *
 * PC 와 모바일이 충돌하는 규칙의 정본
 *   - 기본값 = PC(component.css). 화면 폭 분기(@media)로 모바일 값을 얹는다 — 1280px / 1023px / 767px (PC 와 모바일 트리 모두 적용).
 *   - 767px 이하에서 «본문 글자 크기·내부 여백·textarea 높이(124px)»는 PC responsive.css 값이 정본이다.
 *     (옛 모바일 트리는 데스크톱 글자 크기 17px 를 그대로 썼다 — 합본에서 14px 로 통일된다.)
 *   - 767px 이하 «답글 들여쓰기»만은 모바일 값이 정본이다. PC responsive.css 는 padding-left 를 15px → 10px 로 두 번 덮어
 *     아이콘(20px 위치)과 글자가 겹친다. 모바일 값(왼쪽 25px · 아이콘 8px 위치)을 쓴다.
 *   - 모바일 트리 UI 의 루트에는 cmt_m 클래스가 붙는다(#coment_area.cmt_m). 이 클래스는 «폭과 무관하게» 모바일 팝업 규격
 *     (폭 calc(100% - 40px) · 최대 420px · 간격 · textarea 안쪽 여백 · .mt15 10px)을 유지한다 — m 호스트를 PC 브라우저로 열어도 팝업이 화면 폭만큼 늘어나지 않게.
 *   - 노뉴스 responsive.css 의 .view_wirte_comment (오타 클래스 — UI 에 없는 이름) 규칙 4줄은 죽은 규칙이라 옮기지 않았다.
 *     UI 의 클래스 이름은 view_wirte_cmt (오타 «wirte» 그대로) 이다.
 *   - 모바일 layout.css 의 .btn_refresh · #my_comment 는 UI 가 쓰지 않아 옮기지 않았다.
 */

/* ==========================================================================
   자급 리셋 · 루트
   ========================================================================== */
#coment_area{position:relative; margin-top:10px; font-family:'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif; font-size:14px; line-height:1; font-weight:normal; color:#666; text-align:left; letter-spacing:-0.25px; background:#fff}
#coment_area ul,
#coment_area li,
#coment_area p,
#coment_area form{margin:0; padding:0}
#coment_area ul,
#coment_area li{list-style:none}
#coment_area form{border:0}
#coment_area a{text-decoration:none; color:inherit}
#coment_area img{border:0; vertical-align:top}
#coment_area strong{font-weight:bold}
#coment_area input,
#coment_area textarea,
#coment_area select,
#coment_area label{box-sizing:border-box}
#coment_area input,
#coment_area textarea,
#coment_area button{font-family:'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif; font-size:14px; color:#666; letter-spacing:normal; vertical-align:middle}
#coment_area input[type="text"],
#coment_area input[type="password"]{height:39px; margin:0; padding:0 0 0 9px; border:1px solid #f0efef; border-radius:0; background:#fbfbfb; outline:none; -webkit-appearance:none}
#coment_area textarea{width:100%; margin:0; padding:10px 7px; border:1px solid #eee; border-radius:0; line-height:22px; font-size:15px; color:#333; background:#fff; resize:none; overflow-y:hidden; outline:none; -webkit-appearance:none}
#coment_area textarea::-webkit-input-placeholder{font-weight:300; color:#999}
#coment_area input::-webkit-input-placeholder{font-weight:300; color:#999}
#coment_area .clearfix:before,
#coment_area .clearfix:after{content:" "; display:table}
#coment_area .clearfix:after{clear:both}
#coment_area .mt15{margin-top:15px}

/* 허니팟 — display:none 은 봇이 건너뛰므로 화면 밖으로 치운다(스크린리더에는 aria-hidden 으로 숨김) */
#coment_area .cmt_hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ==========================================================================
   레이어(팝업) 기본 — component.css:164-173
   ========================================================================== */
#coment_area .layer_basic{display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:300}
#coment_area .layer_basic.open{display:block}
#coment_area .layer_basic .bg{position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); cursor:pointer}
#coment_area .layer_basic .n_popup{position:absolute; top:50%; left:50%; transform:translate(-50.1%,-50%); -ms-transform:translate(-50.1%,-50%)}
#coment_area .layer_basic .n_popup.type1{width:600px; border-radius:5px; overflow:hidden}
#coment_area .layer_basic .n_popup.type1 .pop_header{position:relative; padding:20px 20px; background-color:#003073}
#coment_area .layer_basic .n_popup.type1 .pop_header .title{font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif; font-size:17px; font-weight:bold; color:#fff}
#coment_area .layer_basic .n_popup.type1 .pop_header .btn_x{position:absolute; top:12px; right:12px; cursor:pointer}
#coment_area .layer_basic .n_popup.type1 .pop_header .btn_x img{width:15px; padding:8px}
#coment_area .layer_basic .n_popup.type1 .pop_cont{padding:20px 20px; background-color:#fff}

/* ==========================================================================
   댓글 관리 툴팁(삭제 메뉴) · 추천/비추천 — component.css:2061-2071
   ========================================================================== */
#coment_area .btn_util{user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none}
#coment_area .btn_util span{display:inline-block; font-size:0; width:20px; height:22px; background:url('../image/common/dot1.png') no-repeat center; background-size:4px auto; cursor:pointer}
#coment_area .btn_util .wrap_adm_btnset{display:none; position:relative}
#coment_area .btn_util.on .wrap_adm_btnset{display:block}
#coment_area .btn_util .wrap_adm_btnset .adm_btnset{position:absolute; top:5px; right:8px; background:#fff}
#coment_area .btn_util .wrap_adm_btnset .adm_btnset .btn1 a{display:block; width:68px; line-height:40px; font-size:14px; text-align:center; border:1px solid #d0d0d0; cursor:pointer}
#coment_area .btn_util .wrap_adm_btnset .adm_btnset .btn1 + .btn1 a{border-top:0}
#coment_area .vote_like span{display:inline-block; font-size:13px; color:#838383; line-height:16px; padding-left:21px; margin-left:20px; cursor:pointer}
#coment_area .vote_like .like{background:url('../image/common/like1_1.png') no-repeat 0 0; background-size:14.5px auto}
#coment_area .vote_like .dislike{background:url('../image/common/like1_2.png') no-repeat 0 2px; background-size:14.5px auto}

/* ==========================================================================
   댓글 본체 — component.css:2085-2198 (.view_comment → #coment_area)
   ========================================================================== */
#coment_area .view_cmt_head{padding:22px 0 5px; border-bottom:1px solid #f0f0f0}
#coment_area .view_cmt_head span,
#coment_area .view_cmt_head strong{display:inline-block; vertical-align:middle; line-height:30px}
#coment_area .view_cmt_head strong{margin:0 4px 0 6px}
#coment_area .view_wirte_cmt .view_cmt_info{padding:16px 0}
#coment_area .view_wirte_cmt .view_cmt_info .refer span{display:inline-block; font-size:12px; color:#999; line-height:16px; padding-left:21px; background:url('../image/common/user1.png') no-repeat 0 center; background-size:16px auto}
#coment_area .view_wirte_cmt .view_cmt_info .user_info{display:none; float:left}
#coment_area .view_wirte_cmt .view_cmt_info .user_info span{display:inline-block; font-size:14px; line-height:16px; padding-left:21px; background:url('../image/common/user1.png') no-repeat 0 center; background-size:16px auto}
#coment_area .view_wirte_cmt .view_cmt_info .user_info span:after{content:" 님"}
#coment_area .view_wirte_cmt .view_cmt_info .btn_my{display:none; float:right}
#coment_area .view_wirte_cmt .view_cmt_info .btn_my a{display:inline-block; font-size:14px; line-height:16px; padding-right:15px; background:url('../image/common/arw3.png') no-repeat 100% 2px; background-size:8px auto; cursor:pointer}
#coment_area .view_wirte_cmt .view_cmt_ip{border:1px solid #d0d0d0; border-radius:3px; overflow:hidden}
#coment_area .view_wirte_cmt .view_cmt_ip textarea{display:block; border:none; height:96px; background:#fafafa; outline:none}
#coment_area .view_wirte_cmt .view_cmt_ip .register_cmt{padding:9px 10px; border-top:1px solid #f0f0f0; background:#fff}
#coment_area .view_wirte_cmt .view_cmt_ip .register_cmt .conunt_ct{float:left; font-size:14px; color:#666; line-height:30px}
#coment_area .view_wirte_cmt .view_cmt_ip .register_cmt .conunt_ct span{color:#222}
#coment_area .view_wirte_cmt .view_cmt_ip .register_cmt .btn_register{display:none; float:right}
#coment_area .view_wirte_cmt .view_cmt_ip .register_cmt .btn_register span{display:inline-block; width:60px; height:30px; line-height:30px; font-size:14px; font-weight:bold; color:#fff; text-align:center; background:#aaa; border-radius:2px; cursor:pointer}
#coment_area .view_wirte_cmt.cmt_login .view_cmt_info .user_info,
#coment_area .view_wirte_cmt.cmt_login .view_cmt_info .btn_my{display:block}
#coment_area .view_wirte_cmt.cmt_login .view_cmt_ip textarea{background:#fff}
#coment_area .view_wirte_cmt.cmt_login .view_cmt_ip .register_cmt .btn_register{display:block}
#coment_area .view_wirte_cmt.cmt_logout .view_cmt_ip textarea{cursor:pointer}

/* 비회원 글쓰기 · 댓글삭제 팝업 내부 */
#coment_area .layer_cmt .n_popup.type1 .pop_header .title{padding-left:24px; background:url('../image/common/ico_bubble2.png') no-repeat 0 center; background-size:16px auto}
#coment_area .layer_cmt .n_popup.type1 .pop_cont{padding:0}
#coment_area .layer_cmt .n_popup .pop_row{position:relative}
#coment_area .layer_cmt .n_popup .pop_row1{text-align:center; padding:22px 65px 40px; background-color:#f4f4f4}
#coment_area .layer_cmt .n_popup .pop_row2{display:none; padding:35px 65px 30px; background-color:#fff}
#coment_area .layer_cmt .n_popup .pop_row2.open{display:block}
#coment_area .layer_cmt .n_popup .pop_txt1{font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif; font-size:16px; font-weight:300; color:#333; line-height:24px}
#coment_area .layer_cmt .n_popup .pop_txt1 span{color:#e84a4a}
#coment_area .layer_cmt .n_popup .btn_set1{margin-top:25px}
#coment_area .layer_cmt .n_popup .btn_set1 > div{width:50%; box-sizing:border-box}
#coment_area .layer_cmt .n_popup .btn_set1 > div > a{display:block; padding:33px 0 29px; border:1px solid #e8e8e8; background-color:#fff; border-radius:5px; box-sizing:border-box; user-select:none; -webkit-user-select:none}
#coment_area .layer_cmt .n_popup .btn_set1 > div > a:hover{border-color:#e84a4a}
#coment_area .layer_cmt .n_popup .btn_set1 > div > a > span{display:inline-block; padding-top:43px; font-size:15px; color:#333; background-repeat:no-repeat; background-position:center 0; background-size:auto 33px}
#coment_area .layer_cmt .n_popup .btn_set1 .btn_left{float:left; padding-right:10px}
#coment_area .layer_cmt .n_popup .btn_set1 .btn_left span{background-image:url('../image/common/user2_1.png')}
#coment_area .layer_cmt .n_popup .btn_set1 .btn_right{float:right; padding-left:10px}
#coment_area .layer_cmt .n_popup .btn_set1 .btn_right span{background-image:url('../image/common/user2_2.png')}
#coment_area .layer_cmt .n_popup .btn_set1 .btn_right a.on{border-color:#e84a4a; background-color:#e84a4a}
#coment_area .layer_cmt .n_popup .btn_set1 .btn_right a.on span{color:#fff; background-image:url('../image/common/user2_3.png')}
#coment_area .layer_cmt .n_popup .btn_set2 > div{width:50%; text-align:center; box-sizing:border-box}
#coment_area .layer_cmt .n_popup .btn_set2 > div > a{display:block; padding:18px 0; border:1px solid #e8e8e8; background-color:#fff; border-radius:5px; box-sizing:border-box; user-select:none; -webkit-user-select:none}
#coment_area .layer_cmt .n_popup .btn_set2 > div > a > span{font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif; font-size:15px; font-weight:500; color:#999}
#coment_area .layer_cmt .n_popup .btn_set2 .btn_left{float:left; padding-right:5px}
#coment_area .layer_cmt .n_popup .btn_set2 .btn_left a{border-color:#e91c24; background-color:#e91c24}
#coment_area .layer_cmt .n_popup .btn_set2 .btn_left span{color:#fff; padding-left:22px; background:url('../image/common/ico_check1.png') no-repeat 0 center; background-size:14px auto}
#coment_area .layer_cmt .n_popup .btn_set2 .btn_right{float:right; padding-left:5px}
#coment_area .layer_cmt .n_popup .ip_form > div{margin-bottom:15px}
#coment_area .layer_cmt .n_popup .ip_form .i_item{font-size:13px; color:#333}
#coment_area .layer_cmt .n_popup .ip_form .i_item span{color:#e84a4a}
#coment_area .layer_cmt .n_popup .ip_form .i_vl{margin-top:8px}
#coment_area .layer_cmt .n_popup .ip_form .i_vl input.ip{width:100%; height:44px; border:1px solid #e8e8e8; padding-left:13px; font-size:15px; color:#222; background:#fff; border-radius:5px}
#coment_area .layer_cmt .n_popup .ip_form .i_vl input.ip::-webkit-input-placeholder{font-family:'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif; font-weight:500; color:#cacaca}

/* 댓글 목록 */
#coment_area .view_list_cmt{margin-top:6px}
#coment_area .view_list_cmt .list_sort{padding:12px 0}
#coment_area .view_list_cmt .list_sort li{float:left; margin-right:10px}
#coment_area .view_list_cmt .list_sort li span{display:inline-block; font-size:14px; color:#777; cursor:pointer}
#coment_area .view_list_cmt .list_sort li.on span{font-weight:bold; color:#222}
#coment_area .view_list_cmt .list_cmt ul{border-top:1px solid #f0f0f0}
#coment_area .view_list_cmt .list_cmt li{position:relative}
#coment_area .view_list_cmt .list_cmt li.my_cmt{background:#fff7f7}
#coment_area .view_list_cmt .list_cmt li .box_cmt{position:relative; padding:24px 15px 26px; border-bottom:1px solid #f0f0f0}
#coment_area .view_list_cmt .list_cmt li .cmt_user{font-size:14px; font-weight:bold}
#coment_area .view_list_cmt .list_cmt li .cmt_date{margin-top:7px; font-size:14px; color:#aaa}
#coment_area .view_list_cmt .list_cmt li .cmt_txt{margin-top:8px; font-size:17px; line-height:27px; padding-left:1px; padding-right:20px}
#coment_area .view_list_cmt .list_cmt li .cmt_txt strong{font-weight:normal}
#coment_area .view_list_cmt .list_cmt li .cmt_count{margin-top:12px; font-size:14px; color:#555; cursor:pointer; user-select:none; -webkit-user-select:none}
#coment_area .view_list_cmt .list_cmt li .cmt_count strong{color:#333}
#coment_area .view_list_cmt .list_cmt li .cmt_vote{position:absolute; right:17px; bottom:24px}
#coment_area .view_list_cmt .list_cmt li .btn_util{position:absolute; top:9px; right:12px; z-index:10}

/* 댓글의 댓글(답글) */
#coment_area .view_list_cmt .list_cmt li .box_reply{padding:0 15px; border-bottom:1px solid #f0f0f0; background:#fbfbfb}
#coment_area .view_list_cmt .list_cmt li .box_reply .cmt_count{display:none}
#coment_area .view_list_cmt .list_cmt li .box_reply ul{border-top:none}
#coment_area .view_list_cmt .list_cmt li .box_reply .box_cmt{padding:24px 15px 52px 40px; background:url('../image/common/ico_reply1.png') no-repeat 20px 28px; background-size:9px auto}
#coment_area .view_list_cmt .list_cmt li .box_reply .view_wirte_cmt{padding:0 5px}
#coment_area .box_reply .view_paging_cmt a{line-height:45px; background:#fbfbfb}
#coment_area .view_paging_cmt a{display:block; text-align:center; line-height:55px; cursor:pointer}
#coment_area .view_paging_cmt span{display:inline-block; font-size:14px; padding-right:18px}
#coment_area .view_paging_cmt.open span{background:url('../image/common/arw4.png') no-repeat right center; background-size:11px auto}
#coment_area .view_paging_cmt.close span{background:url('../image/common/arw4_1.png') no-repeat right center; background-size:11px auto}

/* ==========================================================================
   반응형 분기 — responsive.css (PC) 의 댓글 관련 값
   ========================================================================== */
@media only screen and (max-width: 1280px) {
	#coment_area .view_list_cmt .list_cmt li .cmt_txt{font-size:16px; line-height:27px}
}

@media only screen and (max-width: 1023px) {
	#coment_area .view_list_cmt .list_cmt li .cmt_txt{font-size:15px; line-height:26px}
}

@media only screen and (max-width: 767px) {
	#coment_area .view_list_cmt .list_cmt li .box_cmt{padding:24px 10px 26px}
	#coment_area .view_list_cmt .list_cmt li .btn_util{right:5px}
	#coment_area .view_list_cmt .list_cmt li .cmt_txt{font-size:14px; line-height:24px}
	/* 답글 들여쓰기 — 모바일 값이 정본(위 머리 주석 참조) */
	#coment_area .view_list_cmt .list_cmt li .box_reply .box_cmt{padding:24px 15px 52px 25px; background:url('../image/common/ico_reply1.png') no-repeat 8px 28px; background-size:9px auto}
	#coment_area .view_wirte_cmt .view_cmt_ip textarea{height:124px; font-size:13px}
	#coment_area .view_wirte_cmt .view_cmt_ip .register_cmt{padding:5px 10px}
	#coment_area .view_wirte_cmt .view_cmt_ip .register_cmt .conunt_ct{font-size:13px; line-height:24px}

	/* 팝업 */
	#coment_area .layer_basic .n_popup.type1 .pop_header{padding:15px 20px}
	#coment_area .layer_basic .n_popup.type1 .pop_header .title{font-size:15px}
	#coment_area .layer_basic .n_popup.type1 .pop_header .btn_x{top:7px}
	#coment_area .layer_basic .n_popup.type1{width:calc(100% - 40px)}
	#coment_area .layer_cmt .n_popup .pop_row1{padding:20px 20px 30px}
	#coment_area .layer_cmt .n_popup .pop_row2{height:250px; padding:35px 20px 30px; box-sizing:border-box; overflow-y:auto}
	#coment_area .layer_cmt .n_popup .btn_set1 > div > a{padding:23px 0 19px}
	#coment_area .layer_cmt .n_popup .btn_set1 > div > a > span{padding-top:35px; font-size:14px; background-size:auto 25px}
	#coment_area .layer_cmt .n_popup .btn_set1{margin-top:20px}
	#coment_area .layer_cmt .n_popup .pop_txt1{font-size:14px; line-height:22px}
	#coment_area .layer_cmt .n_popup .btn_set2 > div > a{padding:15px 0}
}

/* ==========================================================================
   모바일 트리 전용 — 모바일 UI 루트(#coment_area.cmt_m). 화면 폭과 무관하게 모바일 팝업 규격을 유지한다.
   ========================================================================== */
#coment_area.cmt_m .layer_basic .n_popup.type1{width:calc(100% - 40px); max-width:420px}
#coment_area.cmt_m .layer_basic .n_popup.type1 .pop_header{padding:15px 20px}
#coment_area.cmt_m .layer_basic .n_popup.type1 .pop_header .title{font-size:15px}
#coment_area.cmt_m .layer_basic .n_popup.type1 .pop_header .btn_x{top:7px}
#coment_area.cmt_m .layer_cmt .n_popup .pop_row1{padding:20px 20px 30px}
#coment_area.cmt_m .layer_cmt .n_popup .pop_row2{height:250px; padding:35px 20px 30px; box-sizing:border-box; overflow-y:auto}
#coment_area.cmt_m .layer_cmt .n_popup .pop_txt1{font-size:14px; line-height:22px}
#coment_area.cmt_m .layer_cmt .n_popup .btn_set1{margin-top:20px}
#coment_area.cmt_m .layer_cmt .n_popup .btn_set1 > div > a{padding:23px 0 19px}
#coment_area.cmt_m .layer_cmt .n_popup .btn_set1 > div > a > span{padding-top:35px; font-size:14px; background-size:auto 25px}
#coment_area.cmt_m .layer_cmt .n_popup .btn_set2 > div > a{padding:15px 0}
#coment_area.cmt_m textarea{padding:11px 15px; font-size:14px; color:#222}
/* 입력폼과 reCAPTCHA 사이 간격 — 모바일은 10px (PC 는 15px) */
#coment_area.cmt_m .mt15{margin-top:10px}