@charset "utf-8"; 
/*댓글창*/
.comment-area{ margin-top:42px !important; }

.comment-area .fw--rgl{font-family:'Pretendard-Regular'; font-weight: 400; font-style: normal; }
.comment-area .fw--Semibold{font-family:'Pretendard-SemiBold'; font-weight: 600; font-style: normal; }
.comment-area input{ padding: 0 17px; border:1px solid #DADCE0; border-radius:4px; box-sizing: border-box; width:calc(100% - 52px); height:44px; display: inline-block; float: left; }
.comment-area input::placeholder{ color:#9B9DA3; font-size:14px; }
.comment-area .btn--more{ width:24px; height:24px; background:url(../img/product/icn_more.png) no-repeat; background-size: contain; position: absolute; right:0px; top: 30px; z-index: 1;}

.comment-area .btn--write { width:44px; height:44px; border-radius: 4px; background:#000; display: inline-block; float: left; margin-left: 8px; }
.comment-area .btn--write i{ width:24px; height:24px; display:inline-block; background:url(../img/product/icon_write.png) no-repeat; background-size: contain; }
.comment-area .status{ width:100%; font-size: 12px; display: inline-flex; align-items: center; justify-content: left; margin-bottom:13px; }
.comment-area .status span{ color:#9B9DA3; letter-spacing: -0.6px; }
.comment-area .status em{ color:#9B9DA3;  letter-spacing: -0.6px; margin-left:3px; }
.comment-area .status i{ margin-right:3px; width:18px; height:18px; display:inline-block; background:url(../img/product/icn_comment.png) no-repeat; background-size: contain; }
.comment-area .divInput{ overflow: hidden; }
.comment-area .comment-list { font-style: normal; }
.comment-area .comment-list li{ position: relative; padding: 30px 0; border-bottom:1px solid #ecedf0; }
.comment-area .comment-list li:first-child{ padding-top:26px; }
.comment-area .comment-list .writer{ display: inline-block; color:#9b9da3; letter-spacing: -0.65px; font-size: 13px; margin-bottom: 14px; }
.comment-area .commentTxt{ color:#000; letter-spacing: -0.75px; font-size: 15px; margin-bottom: 18px; }
.comment-area .date{ font-size: 12px; color:#9b9da3; letter-spacing: -0.6px; font-style: normal;  }
.comment-area .date.date-dotted{ padding: 0 .3rem}


.comment-area .comment-list .comment-list__item.is-delete {
	padding: 20px 0 0 !important;
}

.comment-area .commentTxt.is-deleted {
	color: #9b9da3;
}

.comment-area .commentTxt .prefix-target-name{
	font-weight: 700;
	min-width: fit-content;
	margin-right: 0.5rem;
}

.comment-area .comments__write-btn {
	cursor: pointer;
}

.comment-area .comment-reply-area {
	margin-top: 20px;
	display: flex;
}
.comment-area .comment-reply-area.hidden {
	display: none !important;
}

.comment-area .comment-list__item .re-reply {
	display: flex;
}

.comment-area .comment-list__item .indentation {
	font-size: 0.7rem;
	margin-right: 9px;
	font-weight: bold;
	min-width: fit-content;
	color: #dadce0;
}
.comment-area .comment-bottom {
	display: flex;
	margin-top:18px;
	justify-content: space-between;
}

.comment-area .comment-bottom .date-area {
	margin-left: 48px;
}

.comment-area .comment-reply-area .write-area {
	padding: 14px;
	border-radius: 4px;
	border: solid 1px #dadce0;
	width: 100%;
}

.comment-area .comment-reply-area .write-area .prefix-target-name {
	font-size: 14px;
	font-weight: 600;
}

.comment-area .comment-reply-area [name=reply-contents] {
	width: 100%;
	border: none;
	height: 4rem;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: -0.7px;
}
.comment-area .comment-reply-area [name=reply-contents].is-focused {
	color: #000000;
	border: none !important;
}

.comment-area .comment-reply-area .btn-area {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	position: relative;
	top: 11px;
}

.comment-area .comment-reply-area .btn-area .cancel-btn {
	font-size: 14px;
	color: #989898;
	padding: 15px;
	cursor: pointer;
}
.comment-area .comment-reply-area .btn-area .reg-btn {
	font-size: 14px;
	padding: 15px;
	font-weight: bold;
	cursor: pointer;
}
[contenteditable=true]:empty:before{
	content: attr(placeholder);
	display: block; /* For Firefox */
	font-size: 14px;
	color: #9b9da3;
}

@media (max-width:720px){
	.comment-area{ margin-top:36px; }
	.comment-area .comment-list .comment-list__item{ position: relative; padding: 30px 20px; }
	.comment-area .comment-list .comment-list__item.is-delete {
		padding: 20px 20px 0 !important;
	}
	.comment-area .pd20{ width:100%; padding:0 20px; box-sizing: border-box; }
}