.comment-thumb-frame{border-radius:50%; overflow:hidden;}
.comment-head{display:flex; justify-content:space-between; margin-bottom:var(--size-3);}
.comment-head-sort{display:flex; align-items:center;}
.comment-head-sort .svgicon{margin-left:var(--size-2);}
.comment-head-sort-ac .comment-label-dc, .comment-head-sort-ac .svgicon-sort-dc,
.comment-head-sort-dc .comment-label-ac, .comment-head-sort-dc .svgicon-sort-ac{display:none;}



.comment-form{--frame-height:calc(var(--button-height) + var(--frame-space)); --button-width:76px; 
position:relative; background-color:var(--bg-2);}
.comment-thumb, .comment-field, .comment-post{height:var(--frame-height);}
.comment-thumb, .comment-post{position:absolute; top:0; height:100%;}
.comment-thumb-frame, .comment-post-button{height:var(--button-height);}
.comment-thumb{z-index:1; left:0; width:var(--frame-height);}
.comment-thumb-frame{width:var(--button-height);}
.comment-field{position:relative; z-index:1000; width:100%; background-color:transparent; color:var(--color-text-2);
padding-left:var(--frame-height); padding-right:var(--button-width);
border-radius:var(--rounded-1); border:1px solid rgb(var(--color-border) / 13%);}
.comment-post{z-index:2000; right:0; width:var(--button-width); font-weight:bold;}



.comment-list{margin-top:var(--size-1);}
.comment-row{padding:var(--size-4) 0; border-bottom:1px solid rgb(var(--color-border) / 8%);}
.comment-row .comment-form{display:none;}
.comment-container{display:grid; grid-gap:var(--size-3);}
.comment-userlink{display:grid; grid-template-columns:var(--thumb-height) 1fr; grid-gap:var(--size-3);}
.comment-userlink .comment-thumb{position:relative;}
.comment-userlink .comment-thumb-frame{width:var(--thumb-height); height:var(--thumb-height);}
.comment-userlink .comment-username{display:flex; align-items:center;}
.comment-content{line-height:150%;}

.comment-sub{padding-left:var(--size-5); margin-top:var(--size-4); border-top:1px solid rgb(var(--color-border) / 8%);}
.comment-sub .comment-row:last-child{border-bottom:0; padding-bottom:0;}

.comment-action{display:flex; justify-content:flex-end;}
.comment-action-list{display:flex; align-items:center; padding:var(--size-2) 0;}
.cal-icon{margin-right:var(--size-2);}
.cal-icon .svgicon{width:auto; height:16px;}
.cal-label{font-size:12px;}
.cal-date{margin-right:auto; color:var(--color-text-1); fill:var(--color-text-1);}
.cal-reply{margin:0 var(--size-4);}
.cal-reply-open{color:var(--color-text-3) !important; fill:var(--color-text-3) !important; opacity:1 !important;}

.comment-more{display:flex; align-items:center; padding:var(--size-2) 0; margin-top:var(--size-3);}
.comment-more .svgicon{margin-left:var(--size-2);}





@media screen and (min-width:0px) and (max-width:1023px){
  .comment-head{font-size:16px;}
  .comment-form{--button-height:24px; --frame-space:var(--size-4);}
  .comment-userlink{--thumb-height:24px; font-size:16px;}
}





@media screen and (min-width:1024px){
  .comment-head{font-size:18px;}
  .comment-form{--button-height:30px; --frame-space:var(--size-5);}
  .comment-userlink{--thumb-height:30px; font-size:18px;}
}