/*
IX Skin Design - Board [Comment]
*/

/* A. 리스트 *****/
#cmt_list {display: flex; flex-direction: column;border-left: 1px solid #DFE4EB;border-right: 1px solid #DFE4EB;}
#cmt_list article {position: relative;}

/* A1. 댓글 카운트 */
#cl_count div {display:inline-flex;padding:2px 10px; font-size: 0.75rem; border-radius: 5px 5px 0px 0px;  color: #888888; background: #F9FAFB; border: 1px solid #DFE4EB;border-bottom:none;}
#cl_count span {color: #000; font-weight:500;}

/* A2.  댓글리스트 */
/* 헤드 */
#cl_head {display: flex; flex-wrap:wrap; gap:5px;align-items:center; padding:7px; background: #F9FAFB;border-top: 1px solid #DFE4EB;}
#cl_head img {display: block; width:20px;height:20px;border:none;border-radius: 6px}
#cl_head span {}
#cl_head .ch_name {font-weight:500; font-size:0.8125rem;}
#cl_head .ch_ip {color: #8AABCA;font-size:0.8125rem;}
#cl_head .ch_date {color: #888888;font-size:0.8125rem;}

/* 댓글 */
#cl_view {padding:10px;margin-bottom: 10px; font-size:0.875rem; line-height: 1.3rem;}

/*  수정 및 답글 공간 */
#cl_edit {background: #F9FAFB; padding-left:40px}

/*  버튼 */
#cl_btn {position: absolute; top: 5px; right: 7px; text-align:right; z-index:1}
#cl_btn button {border:none; font-size:0.8125rem; background: #F9FAFB; color: #888888;}
#cl_btn .cb_box {display:none; border: 1px solid #DFE4EB; background: #FFF;}
#cl_btn li {border-bottom: 1px solid #DFE4EB;}
#cl_btn li:last-child {border:none}
#cl_btn li:hover {background: #F9FAFB;}
#cl_btn a {display: inline-flex;padding:2px 15px;font-size:0.75rem;color: #888888;}

/*  글이 없을 때 */
#cl_empty {display:flex;justify-content:center; padding:20px;font-size:0.8125rem; color: #888888;border-top: 1px solid #DFE4EB;}


/* B. 쓰기 *****/
#cmt_write {border: 1px solid #DFE4EB;border-bottom:none}
#cmt_write_rap  {background: #F9FAFB; ;padding:7px;}
#cw_text {}
#cw_text textarea {width: 100%; height: 100px; padding: 10px; margin: 0px; resize: none; border-radius: 3px;font-family: 'Noto Sans KR' !important; font-size: 0.875rem;line-height: 1.5rem; border: 1px solid #C9D2DC;}
#cw_etc {display: flex; flex-wrap:wrap; gap:10px; align-items: center;}
#cw_etc * {font-size: 0.75rem;}
#cw_etc .ce_count {padding-left:5px; color: #888888}
#cw_etc .ce_secret {flex: 1; display: flex; align-items: center;color: #888888}

#cw_etc .ce_btn button {display: inline-flex; justify-content: center; align-items: center;width: 70px; height: 28px; border-radius: 3px; border: 0px;background: #FFF;border: 1px solid #C9D2DC;color: #888888}
#cw_etc .ce_btn button:hover {background: #F9FAFB;}