@charset "utf-8";

.comment_ui h2 {font-size: var(--fz_base);font-weight: 700;line-height: 1.8;}
.comment_ui h2 span {color: var(--c_primary_base);}
.comment_ui h3 {padding-bottom: var(--spacing_base);margin-bottom: var(--spacing_l);border-bottom: 1px solid;font-size: var(--fz_m);font-weight: 700;line-height: 1.3;color:#111;}

/* 댓글입력 */
.reg_comment {display: flex;justify-content: space-between;align-items: center;gap: var(--spacing_s);width: 100%;margin-top: 1.6rem;margin-bottom: 2.4rem;background: var(--c_white);padding: 1.4rem var(--spacing_l);font-size: var(--fz_s);box-sizing: border-box;}
.reg_comment input {flex: 1;}
.reg_comment p {color: var(--c_black);}
.reg_comment textarea {flex: 1;}
.reg_comment button {flex-shrink: 0;}

.comment_modal .depth_comment_wrap .reg_comment {display: flex;flex-wrap: wrap;align-items: center;gap: var(--spacing_s);font-size: var(--fz_s);background: var(--c_white);justify-content: initial;}
.comment_modal .depth_comment_wrap .reg_comment textarea {width: 100%;flex: initial;}
.comment_modal .depth_comment_wrap .reg_comment button {margin-left: auto;}

/* 댓글 리스트 */
.attention_comment_box {padding: var(--spacing_l);margin-bottom: var(--spacing_l);background: var(--c_secondary_base);border: 1px solid var(--c_primary_base);}
.comment_item .comment_head {display: flex;justify-content: flex-start;align-items: center;gap: var(--spacing_xs);margin-bottom: var(--spacing_l);}
.comment_item .comment_head .ic,
.comment_item .comment_head .btn_group {flex-shrink: 0;}
.comment_item .comment_head .btn_group {position: relative;inset: auto;z-index: 0;}
.comment_item .comment_head .btn_group > button {display: block;width: 2.4rem;height: 2.4rem;vertical-align: top;margin-right: -1rem;}
.comment_item .comment_head .btn_group:has([aria-expanded='true']) ul {display: block;}
.comment_item .comment_head .btn_group li {padding-bottom: 0;margin-bottom: 0;border: 0;}
.comment_item .comment_head .btn_group ul {display: none;position: absolute;right: 0;top: 100%;}
.comment_item .comment_head .btn_group ul .btn {padding: 0 var(--spacing_s);background: var(--c_white);white-space: nowrap;}

.comment_item .comment_head .btn_group .pick {width:5rem;height:3rem;margin-right:0;border-radius: 0.2rem;border: 1px solid #ddd;background: #fff;}
.comment_item .comment_head .btn_group .pick span {color: var(--c_gray_b);text-align: center;font-family: "Spoqa Han Sans Neo";font-size: 1.3rem;font-style: normal;font-weight: 700;}
.comment_item .comment_head .btn_group .complete {width:5rem;height:3rem;margin-right:0;border-radius: 0.2rem;border: 1px solid var(--c_black);background: var(--c_black);}
.comment_item .comment_head .btn_group .complete span {color: var(--c_white);text-align: center;font-family: "Spoqa Han Sans Neo";font-size: 1.3rem;font-style: normal;font-weight: 700;}

.comment_item .comment_head .ic {margin-right:0.5rem;vertical-align: middle;}
.comment_item .comment_head strong {flex: none;font-size: var(--fz_m);font-weight: 700;line-height: 1;color: var(--c_black);}
.comment_item .comment_head p {position: relative;flex: 1;margin-left: 1.7rem;font-size: var(--fz_s);color: var(--c_gray_b);}
.comment_item .comment_head p:before {display: block;content: '';position: absolute;top: 50%;right: 100%;width: 1px;height: 1.6rem;margin-right: 10px;margin-top: -0.8rem;background: var(--c_gray_a);}
.comment_item .comment_head strong,
.comment_item .comment_head p {margin-right: auto;}
.comment_item .comment_body {font-size: var(--fz_s);}
.comment_item .comment_body > p {margin-bottom: var(--spacing_base);line-height: 1.5;word-break: break-all;}

.comment_item .comment_body > p.blind {padding-left:1.8rem;background: url('../images/icon/icon_exclamation01.png') no-repeat 0 center;background-size:1.4rem 1.5rem;color: var(--c_gray_b);}

.comment_item .editor_comment {position: relative;margin-left: 4.5rem;padding: 1.6rem;border: 1px solid var(--c_primary_base);border-radius: var(--round_m);background: var(--c_white);}
.comment_item .editor_comment .talker {display: flex;color: var(--c_primary_base);gap: var(--spacing_xs);align-items: center;margin-bottom: var(--spacing_s);font-weight: 700;}
.comment_item .editor_comment:after {content: '';display: block;width: 0.1rem;height: 3.1rem;background: var(--c_primary_base);position: absolute;left: -2.9rem;top: 0;}
.comment_item .editor_comment:before {content: '';display: block;width: 2rem;height: 0.1rem;background: var(--c_primary_base);position: absolute;top: 3rem;left: -2.9rem;}
.comment_item .editor_comment .ic {--color: var(--c_primary_base);}
.comment_item .comment_foot {display: flex;align-items: center;margin-top: var(--spacing_base);font-size: var(--fz_s);}
.comment_item .comment_foot dl {display: flex;align-items: center;gap: var(--spacing_xs);}
.comment_item .comment_foot dl dt {color: var(--c_black);}
.comment_item .comment_foot dl .ic {vertical-align: top;}
.comment_item .comment_foot .btn_comment dd {color: var(--c_primary_base);}
.comment_item .comment_foot .btn_recommend {margin-left: auto;}
.comment_item .comment_foot .btn_recommend dd {font-size: var(--fz_xs);color: var(--c_gray_b);}
.comment_item .comment_foot .btn_recommend:last-of-type {margin-left: var(--spacing_l);}
.comment_item .comment_foot .btn_recommend:last-of-type .ic {transform: rotateX(180deg);}
.comment_item .comment_foot .btn_recommend.is_active dt .ic {--color: var(--c_primary_base);}
.comment_item .comment_foot .btn_recommend.is_active dd {color: var(--c_primary_base);}

/* 추천많은 댓글 */
.best_comment_wrap {position:relative;}
.best_comment_wrap li {padding-bottom: var(--spacing_l);margin-bottom: var(--spacing_l);border-bottom: 1px solid var(--c_gray_a);}
.best_comment_wrap .btn {gap: 0.4rem;margin-top: var(--spacing_xs);font-weight: 500;color: var(--c_black);}
.best_comment_wrap .btn span {color: var(--c_primary_base);}

/* 댓글팝업 */
.comment_modal {display: none;position: fixed;inset: 0 0 0 auto;z-index: 200;overflow-y: auto;overflow-x:hidden;flex-direction: column;max-width: 56.8rem;width:100%;padding: calc(var(--headH) * 1px) var(--spacing_xl) var(--spacing_xl);border-left: 1px solid var(--c_gray_a);background: var(--c_white);box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);/*transform: translate3d(100%, 0, 0);animation: drawerIn ease-out 0.3s both;*/box-sizing: border-box;height:100%;}
.comment_modal:focus {outline: 0;}
.comment_modal:focus-visible {outline: 2px;}
.comment_modal.is_active {display: flex;/*animation: drawerIn ease-out 0.3s both;*/}
/*.comment_modal.is_hide {display: flex;transform: translate3d(0, 0, 0);animation: drawerOut ease-out 0.3s both;}*/
/*@keyframes drawerIn {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes drawerOut {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}*/
.comment_modal .comment_modal_head {display: flex;position: sticky;top: 0;z-index: 2;flex: none;flex-direction: column;padding: 3.2rem 0 1.6rem;background: var(--c_white);}
.comment_modal .comment_modal_head h2 {font-weight: 700;line-height: 2.4rem;}
.comment_modal .comment_modal_body {display: flex;flex: 1;flex-direction: column;}
.comment_modal .comment_modal_body .input_box {display: flex;flex-wrap: wrap;align-items: center;gap: var(--spacing_s);font-size: var(--fz_s);margin-bottom: var(--spacing_l);}
.comment_modal .comment_modal_body .input_box textarea {width: 100%;}
.comment_modal .comment_modal_body .input_box button {margin-left: auto;}
.comment_modal .comment_modal_body > .btn {margin-top: 2.6rem;line-height: 4.5rem;font-weight: 400;}
.comment_modal .comment_modal_body .comment_list {flex: 1;}
.comment_modal .comment_modal_body .attention_comment_box h3 {padding-bottom:1.2rem;margin-bottom:2rem;border-bottom: 1px solid;font-size:1.6rem;font-weight: 700;line-height: 1.3;color:#111;}
.list_order_tab {position: sticky;top: 7.2rem;z-index: 3;flex: none;padding: 1rem 0;border: 1px solid var(--c_gray_a);background: var(--c_white);}
.list_order_tab .tab_list_node {position: relative;width: auto;border: 0;line-height: 2.1rem;}
.list_order_tab .tab_list_node:not(:first-of-type) {border-left: 1px solid var(--c_gray_a);}
.list_order_tab button {min-width: 7.9rem;font-size: var(--fz_s);}
.list_order_tab .is_active button {color:#111;font-weight: 700;}
.comment_modal .comment_list .comment_item,
.comment_modal .comment_list .news_card {padding: var(--spacing_l) 0;border-bottom: 1px solid var(--c_gray_a);}
.comment_modal .comment_item .comment_head {margin-bottom:1.6rem;}
.comment_modal .comment_list .news_card {flex-direction: row;gap: var(--spacing_base);font-size: var(--fz_s);}
.comment_modal .comment_list .news_card .news_head {flex: none;width: 21.4rem;margin-bottom: 0;}
.comment_modal .comment_list .news_card .news_body {display: flex;flex-direction: column;}
.depth_comment_wrap {overflow:hidden;background: #f6f6f6;padding: 0 1.6rem;}
.depth_comment_wrap .reg_comment {margin: var(--spacing_l) 0;}
.depth_comment_wrap .comment_item .comment_foot {justify-content: flex-end;}
.depth_comment_wrap .comment_item .comment_foot dl:first-of-type dd {color: var(--c_gray_b);}
.depth_comment_wrap > button {display: flex;justify-content: center;align-items: center;gap: var(--spacing_xs);width: 100%;padding: 1.6rem;font-size: var(--fz_xs);font-weight: 500;color: var(--c_gray_b);--color: var(--c_gray_b);}
.depth_comment_wrap > button .ic {width: 1.4rem;height: 1.4rem;}
/*.comment_modal .btn_group {display: flex;position: absolute;top: calc(var(--headH) * 1px + 3.2rem);right: var(--spacing_xl);z-index: 3;align-items: center;gap: var(--spacing_base);}*/
.comment_modal .btn_group {display: flex;position: fixed;top: calc(var(--headH) * 1px + 3.2rem);right:5rem;z-index: 3;align-items: center;gap: var(--spacing_base);transform:initial !important;} /* 20240618 수정  */
.comment_modal .btn_group .ic {vertical-align: top;}

/* 주목할만한 댓글 */
.comment_modal .comment_list .re_attention .talker .comment_head strong {color: var(--c_primary_base);gap: var(--spacing_xs);align-items: center;font-weight: 700;}
.comment_modal .comment_list .re_attention .talker .comment_head .ic {--color: var(--c_primary_base);}

/* 속보 배너 있을 때 */
#wrapper:has(.breaking_news) .comment_modal{padding: calc(var(--headH) * 1px + 50px) var(--spacing_xl) var(--spacing_xl);}
#wrapper:has(.breaking_news.hidden) .comment_modal{padding: calc(var(--headH) * 1px) var(--spacing_xl) var(--spacing_xl);}

#wrapper:has(.breaking_news) .comment_modal > .btn_group{top: calc(var(--headH) * 1px + 3.2rem + 50px);}
#wrapper:has(.breaking_news.hidden) .comment_modal > .btn_group{top: calc(var(--headH) * 1px + 3.2rem);}

/* 댓글 이용자 정보 팝업 */
.comment_modal.detail [data-back] {display: inline-flex;align-items: center;gap: 0.4rem;margin-left: -0.7rem;font-weight: 700;}
.comment_modal.detail .profile_wrap .profile_body {display: flex;flex-direction: column;align-items: center;gap: 0.6rem;}
.profile_wrap .profile_body .name {display: flex;align-items: center;font-weight: 700;gap: 0.4rem;}
.profile_wrap .profile_body .date {font-size: var(--fz_s);color: var(--c_gray_b);}
.profile_wrap .profile_body .btn {padding-left: var(--spacing_base);padding-right: var(--spacing_base);margin-top: 0.6rem;color: var(--c_primary_base);font-size: var(--fz_xs);font-weight: 700;line-height: 3.2rem;--color: var(--c_primary_base);}
.profile_wrap .profile_body .btn .ic {width: 1.6rem;height: 1.6rem;margin-right:0.6rem;}
.profile_wrap .profile_body .btn.is_active {color: var(--c_black);--color: var(--c_black);}

.profile_wrap hr {display: block;width: 100%;height: 1px;margin-top: var(--spacing_l);margin-bottom: 0;border: 0;background: var(--c_gray_a);}
.profile_wrap .profile_foot {display: flex;align-items: center;padding: var(--spacing_l);}
.profile_wrap .profile_foot .feat {display: flex;flex: 2;gap: 1.6rem;align-items: center;}
.profile_wrap .profile_foot .feat .ic {width: 5rem;height: 5.5rem;}
.profile_wrap .profile_foot > dl {flex: 1;}
.profile_wrap .profile_foot dt {color: var(--c_gray_b);font-size: var(--fz_xs);}
.profile_wrap .profile_foot dd {font-weight: 500;font-size: var(--fz_m);}
.profile_wrap .profile_foot hr {flex: none;width: 1px;height: 5.5rem;}
.profile_wrap .profile_foot hr:first-of-type {margin: 0 var(--spacing_l);}
.profile_wrap .profile_foot hr:last-of-type {margin: 0 var(--spacing_base);}
.comment_item .tag {margin-bottom: 1.2rem;}
.news_preview {display: flex;gap: 1.2rem;}
.news_preview .news_thumb {flex: none;width: 10.7rem;}
.news_preview .news_tit {display: -webkit-box;height: 3em;overflow: hidden;text-overflow: ellipsis;font-size: var(--fz_s);font-weight: bold;line-height: 1.5;word-break: break-all;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.comment_item.detail .comment_body {display: flex;align-items: flex-start;line-height: 1.5;}
.comment_item.detail .comment_body strong {display: inline-block;margin-right: 0.4rem;color: var(--c_primary_base);font-weight: 700;}
#modalUserInfo .comment_modal_body .comment_head {margin-bottom:1.2rem;}
#modalUserInfo .comment_modal_body .comment_head p {margin-left:0;}
#modalUserInfo .comment_modal_body .comment_head p:before {display:none;}

/* 댓글 메세지 박스 */
.comment_modal .modal_msg_box {margin:0 0 1rem 0;padding:1rem 1.5rem;border-radius: 0.2rem;background:#008689;box-sizing: border-box;word-break: break-all;}
.comment_modal .modal_msg_box .txt {color: var(--c_white);font-family: "Spoqa Han Sans Neo";font-size: 1.3rem;font-style: normal;font-weight: 500;line-height: 150%;}

/* 붙여넣기 금지 팝업 */
#modal_notice_pop.active {display:block;}
#modal_notice_pop {display:none;position:fixed;right:120px;z-index:10;}
#modal_notice_pop .pop_wrap {position:relative;width:30rem;padding: 2rem;background: var(--c_white);box-shadow: 0px 2px 14px 0px #00000026;box-sizing: border-box;}
#modal_notice_pop .tit {font-size:1.6rem;}
#modal_notice_pop .desc {display:block;margin:1rem 0;font-size: 1.4rem;color: #5a5a5a;}
#modal_notice_pop .pop_wrap .close_btn {position: absolute;top: 1.6rem;right: 1.6rem;}

@media screen and (max-width: 767px) {
	.comment_modal .comment_list .news_card .news_head {width: 11rem;}
	.comment_modal {z-index: 300;max-width: 100%;padding: 0 1.6rem;} /* 20250718 z-index 수정 */
	.comment_modal .comment_modal_head {justify-content: center;height: 5.2rem;margin-left: calc(1.6rem * -1);margin-right: calc(1.6rem * -1);padding: 0 1.6rem;border-bottom: 1px solid var(--c_gray_a);}
	.list_order_tab {top: 5.1rem;}
	.comment_modal .profile_wrap {margin-left: calc(1.6rem * -1);margin-right: calc(1.6rem * -1);padding: 3.3rem 1.6rem 0;}
	.comment_modal .profile_wrap:after {display: block;content: '';height: 1rem;margin-left: calc(1.6rem * -1);margin-right: calc(1.6rem * -1);background: #f6f6f6;border-top: 1px solid var(--c_gray_a); border-bottom: 1px solid var(--c_gray_a);}
	.comment_modal .comment_modal_body {padding: var(--spacing_l) 0;}
	.comment_modal .btn_group {top: var(--spacing_base);right: 1.6rem;}

  /* 속보 배너 있을 때 */
  #wrapper:has(.breaking_news) .comment_modal{padding:5rem 1.6rem;} /* 20250718 수정 */
  #wrapper:has(.breaking_news.hidden) .comment_modal{padding:0 1.6rem;}

  #wrapper:has(.breaking_news) .comment_modal  >.btn_group{top:calc(var(--headH) * 1px + 10px);right:1.6rem;} /* 20250718 수정 */
  #wrapper:has(.breaking_news.hidden) .comment_modal  >.btn_group{top:var(--spacing_base);right:1.6rem;}

  /* 붙여넣기 금지 팝업 */
  #modal_notice_pop {right:initial;left:50%;transform: translateX(-50%);}
}