.commentArea{font-size: var(--f-body1); padding: 0 16px 52px;}
.commentArea textarea{border-radius: 8px; border: 1px solid var(--s-color1); padding: 9px; font-size: var(--f-body1); outline: 0; font-family: inherit; white-space: pre-wrap;word-wrap: break-word; overflow: hidden;}
.commentArea textarea::placeholder{color: var(--n-info);}
.commentArea textarea:focus-visible {border-color: #339DFF;}

.commentArea .comment .box textarea,
.commentArea .userContentText textarea{background-color: transparent; padding: 0; border: none; font-size: inherit; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; display: -moz-box; display: -webkit-box; height: 100%; line-height: 16px; letter-spacing: -0.24px; color: var(--n-subTitle);}
.commentArea .comment .box textarea:focus-visible,
.commentArea .userContentText textarea:focus-visible{outline: none;}
.commentArea .comment .box .moreBtn,
.commentArea .userContentText .moreBtn{text-decoration: underline; color: var(--n-info2); font-weight: 500; margin-top: 6px;}
.commentArea .comment .box .textWrap,
.commentArea .userContentText .textWrap{line-height: 16px; letter-spacing: -0.24px;}
/* 댓글 */
.commentArea .box{position: relative; border-radius: var(--b-radius0); padding: 12px; font-size: var(--f-body3); }
.commentArea .box .manager{border-bottom: 1px solid var(--s-color1); padding-bottom: 9px; margin-bottom: 8px; display: flex; align-items: center;}
.commentArea .box .manager .profile{width: 32px; height: 32px; border-radius: var(--b-radius3); border: 1px solid var(--s-color1); background-image: url('../img/common/board/comment-profile.png'); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; position: relative;}
.commentArea .box .manager .profile.teacher{background-image: url('../img/common/board/comment-profile-t.png');}
.commentArea .box .manager .profile.manager{background-image: url('../img/common/board/comment-profile-m.png');}
.commentArea .box .manager .info{padding-left: 8px; font-size: var(--f-body4); color: var(--n-info); line-height: 14px; letter-spacing: -0.22px;}
.commentArea .box .manager .info .name{font-weight: 700; color: var(--n-subTitle); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
.commentArea .box .remove-comment{position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; background-image: url('../img/common/popupCloseBtn_mo.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}
.commentArea .box .textWrap .buttonWrap{padding-top: 4px;}
.commentArea .box .textWrap .buttonWrap > * + *{margin-left: 17px; position: relative;}
.commentArea .box .textWrap .buttonWrap > * + *::before{content: ''; position: absolute; left: -8.5px; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background-color: var(--s-color1);}
.commentArea .box .textWrap .buttonWrap .add-comment{background-image: url('../img/common/board/add-comment-icon.svg'); background-repeat: no-repeat; background-size: 14px; background-position: left center; padding-left: 18px;}
.commentArea .box .textWrap .buttonWrap .hide-comment{display: flex; cursor: default;}
.commentArea .box .textWrap .buttonWrap .hide-comment p{cursor: pointer;}
.commentArea .box .textWrap .buttonWrap .hide-comment .num{font-weight: 500; display: inline-block;}
.commentArea .box .textWrap .buttonWrap .hide-comment .type2{display: none;}
.commentArea .box .textWrap .buttonWrap .hide-comment.hide .type1{display: none;}
.commentArea .box .textWrap .buttonWrap .hide-comment.hide .type2{display: inline-block;}
.commentArea .comment{padding-left: 24px; padding-top: 16px; position: relative;}
.commentArea .comment::before{content: ''; position: absolute; left: 0; top: 16px; background-image: url('../img/common/board/refund-comment.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px;}
.commentArea .comment .box{background-color: var(--b-color5);}
.commentArea .comment .box .textWrap .text{max-height: 63px; overflow: hidden;}
.commentArea .comment .box textarea{line-clamp: 4; -webkit-line-clamp: 4;}
/* 답글 달기 - input */
.replyArea .replyInputWrap .pictureWrap{display: none;}
.replyArea .replyInputWrap{margin-top: 8px; padding-left: 24px; margin-top: 8px; position: relative; display: none;} /* 답글 -input */
.replyArea.input .replyInputWrap{display: block;}
/* 화살표가 없는 코멘트 */
.commentArea .comment.n{padding-left: 0;}
.commentArea .comment.n::before{display: none;}
/* 본문 */
.commentArea .userContentText .textWrap .text{max-height: 98px; overflow: hidden;}
.commentArea .userContentText textarea{line-clamp: 6; -webkit-line-clamp: 6; cursor: pointer;}
.commentArea .userContentText .imgWrap{width: 100%; max-width: 328px; border-radius: var(--b-radius0); overflow: hidden; margin-top: 14px; height: 100px; position: relative;}
.commentArea .userContentText .imgWrap img{width: 100%; object-fit: contain; border-radius: var(--b-radius0);}
.commentArea .userContentText .imgWrap img + img{margin-top: 8px;}
.commentArea .userContentText .imgWrap .allNum{position: absolute; bottom: 0; right: 0; background-color: rgba(29, 29, 31,0.5); color: var(--n-white); font-size: var(--f-body4); font-weight: 700; width: 16px; height: 16px; border-top-left-radius: 4px; text-align: center; line-height: 16px;}
.commentArea .userContentText .imgWrap .allNum::after{content: ''; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(6px);}
/* 더보기 클릭 후 */
.commentArea .comment .box .textWrap.allView .text,
.commentArea .userContentText .textWrap.allView .text{max-height: initial;}
.commentArea .comment .box .textWrap.allView .text textarea,
.commentArea .userContentText .textWrap.allView .text textarea{max-height: initial; line-clamp: initial; -webkit-line-clamp: initial;}
.commentArea .comment .box .textWrap.allView .text textarea:focus-visible,
.commentArea .userContentText .textWrap.allView .text textarea:focus-visible{outline: 1px solid transparent; border-color: transparent;}
.commentArea .userContentText .textWrap.allView .imgWrap{height: auto;}
.commentArea .userContentText .textWrap.allView .imgWrap .allNum{display: none;}
.commentArea .comment .box .textWrap.allView .moreBtn,
.commentArea .userContentText .textWrap.allView .moreBtn{display: none;}
/* 회색 배경 > 댓글 컬러 */
.commentArea .commentArea.gray{background-color: transparent;}
.commentArea .commentArea.gray .box{background-color: var(--n-white); border: 1px solid var(--s-color1);}

.commentArea .title{font-weight: 700; padding: 16px 0; margin-bottom: 16px;}
.commentArea .title span{color: #0059FF;}
.commentArea .original-comment .box{border: 1px solid var(--s-color1);}
.commentArea .original-comment .box .textWrap .text{line-height: 16px; letter-spacing: -0.24px;}
.commentArea .replyArea{padding-top: 12px;}
.commentArea .comment{padding-top: 12px;}
.commentArea .comment .reply .who{position: relative; display: none; padding-right: 5px;}
.commentArea .comment .reply .who::before{content: '@'; font-weight: 700;}
.commentArea .comment ~ .comment::before{display: none;}

.commentArea .title{font-weight: 700; padding: 16px 0; margin-bottom: 16px;}
.commentArea .title span{color: #0059FF;}
.commentArea .original-comment .box{border: 1px solid var(--s-color1);}
.commentArea .original-comment .box .textWrap .text{line-height: 16px; letter-spacing: -0.24px;}
.commentArea .replyArea{padding-top: 12px;}
.commentArea .comment{padding-top: 12px;}
.commentArea .comment .reply .who{position: relative; display: none; padding-right: 5px;}
.commentArea .comment .reply .who::before{content: '@'; font-weight: 700;}
.commentArea .comment ~ .comment::before{display: none;}

.replyInputWrap .file-list{display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 0 8px;}
.replyInputWrap .file-list .imageFile{position: relative; width: 72px; margin-right: 8px;}
.replyInputWrap .file-list .imageFile img{width: 72px; height: 72px; border-radius: var(--b-radius0); overflow: hidden; object-fit: cover;}
.replyInputWrap .file-list .imageFile .remove{background-image: url('../img/common/board/upload-remove-white.svg'); background-repeat: no-repeat; background-size: contain; width: 16px; height: 16px; background-position: center; background-color: var(--n-deactivate); border-radius: 50%; top: 5.33px; right: 5.33px; position: absolute;}
.replyInputWrap .file-list .imageFile .file-name{font-size: var(--f-body3); display: flex; align-items: center; margin-top: 4px;}
.replyInputWrap .file-list .imageFile .file-name span::before{content: '.';}
.replyInputWrap .reply-textWrap{position: relative; width: 100%; width: calc(100% - 50px); padding-right: 8px}
.replyInputWrap .reply-textWrap .send-file{background-image: url('../img/common/board/add-file-16.svg'); width: 16px; height: 16px; background-size: contain; background-position: center; position: absolute; right: 20px; top: 12px; cursor: pointer;}
.replyInputWrap .reply-textWrap .text{height: 40px; max-height: 100px; min-height: 40px; display: block;}
.replyInputWrap .reply-textWrap .text textarea{height: 100%; padding-right: 18px;}
/* 첨부파일 있을 때 */
.replyInputWrap.addFile .file-list{padding-bottom: 10px;}
.replyInputWrap.addFile .reply-textWrap{padding: 0; position: relative;}
.replyInputWrap.addFile .reply-textWrap::before{content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 8px); height: 100%; border: 1px solid var(--p-color1); border-radius: var(--b-radius0); touch-action: none; pointer-events: none; z-index: 2;}
.replyInputWrap.addFile .reply-textWrap::after{content: ''; position: absolute; top: 0; right: 0; background-color: #fff; width: 16px; height: 100%;}
.replyInputWrap.addFile .reply-textWrap .text textarea{border-color: transparent;}

.replyInputWrap .registration{height: 40px; line-height: 1.2; background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); font-size: var(--f-body1); width: 50px; border-radius: var(--b-radius0); transition: background-color 0.3s ease;}
.replyInputWrap.re-reply{display: none; margin-top: 8px; padding-left: 24px;}


/*************************************************************
    더보기가 있는 본문, 댓글 (공통)
*************************************************************/
.container_m .comment .box textarea,
.container_m .userContentText textarea{background-color: transparent; padding: 0; border: none; font-size: inherit; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; display: -moz-box; display: -webkit-box; height: auto; line-height: 16px; letter-spacing: -0.24px; color: var(--n-subTitle);}
.container_m .comment .box textarea:focus-visible,
.container_m .userContentText textarea:focus-visible{outline: none;}
.container_m .comment .box .moreBtn,
.container_m .userContentText .moreBtn{text-decoration: underline; color: var(--n-info2); font-weight: 500; margin-top: 6px;}
.container_m .comment .box .textWrap,
.container_m .userContentText .textWrap{line-height: 16px; letter-spacing: -0.24px;}

.container_m .commentArea .box{position: relative; border-radius: var(--b-radius0); padding: 12px; font-size: var(--f-body3); }
.container_m .commentArea .box .manager{border-bottom: 1px solid var(--s-color1); padding-bottom: 9px; margin-bottom: 8px; display: flex; align-items: center;}
.container_m .commentArea .box .manager .profile{width: 32px; height: 32px; border-radius: var(--b-radius3); border: 1px solid var(--s-color1); background-image: url('../img/common/board/comment-profile.png'); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; position: relative;}
.container_m .commentArea .box .manager .profile.teacher{background-image: url('../img/common/board/comment-profile-t.png');}
.container_m .commentArea .box .manager .profile.manager{background-image: url('../img/common/board/comment-profile-m.png');}
.container_m .commentArea .box .manager .info{padding-left: 8px; font-size: var(--f-body4); color: var(--n-info); line-height: 14px; letter-spacing: -0.22px;}
.container_m .commentArea .box .manager .info .name{font-weight: 700; color: var(--n-subTitle); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
.container_m .commentArea .box .remove-comment{position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; background-image: url('../img/common/popupCloseBtn_mo.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}
.container_m .commentArea .box .textWrap .buttonWrap{padding-top: 4px;}
.container_m .commentArea .box .textWrap .buttonWrap > * + *{margin-left: 17px; position: relative;}
.container_m .commentArea .box .textWrap .buttonWrap > * + *::before{content: ''; position: absolute; left: -8.5px; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background-color: var(--s-color1);}
.container_m .commentArea .box .textWrap .buttonWrap .add-comment{background-image: url('../img/common/board/add-comment-icon.svg'); background-repeat: no-repeat; background-size: 14px; background-position: left center; padding-left: 18px;}
.container_m .commentArea .box .textWrap .buttonWrap .hide-comment{display: flex; cursor: default;}
.container_m .commentArea .box .textWrap .buttonWrap .hide-comment p{cursor: pointer;}
.container_m .commentArea .box .textWrap .buttonWrap .hide-comment .num{font-weight: 500; display: inline-block;}
.container_m .commentArea .box .textWrap .buttonWrap .hide-comment .type2{display: none;}
.container_m .commentArea .box .textWrap .buttonWrap .hide-comment.hide .type1{display: none;}
.container_m .commentArea .box .textWrap .buttonWrap .hide-comment.hide .type2{display: inline-block;}
.container_m .comment{padding-left: 24px; padding-top: 16px; position: relative;}
.container_m .comment::before{content: ''; position: absolute; left: 0; top: 16px; background-image: url('../img/common/board/refund-comment.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px;}
.container_m .comment .box{background-color: var(--b-color5);}
.container_m .comment .box .textWrap .text{max-height: 63px; overflow: hidden;}
.container_m .comment .box textarea{line-clamp: 4; -webkit-line-clamp: 4;}
/* 답글 달기 - input */
.container_m .commentArea .replyArea .replyInputWrap .pictureWrap{display: none;}
.container_m .commentArea .replyArea .replyInputWrap{margin-top: 8px; padding-left: 24px; margin-top: 8px; position: relative; display: none;} /* 답글 -input */
.container_m .commentArea .replyArea.input .replyInputWrap{display: block;}
/* 화살표가 없는 코멘트 */
.container_m .comment.n{padding-left: 0;}
.container_m .comment.n::before{display: none;}
/* 본문 */
.container_m .userContentText .textWrap .text{max-height: 98px; overflow: hidden;}
.container_m .userContentText textarea{line-clamp: 6; -webkit-line-clamp: 6; cursor: pointer;}
.container_m .userContentText .imgWrap{width: 100%; max-width: 328px; border-radius: var(--b-radius0); overflow: hidden; margin-top: 14px; height: 100px; position: relative;}
.container_m .userContentText .imgWrap img{width: 100%; object-fit: contain; border-radius: var(--b-radius0);}
.container_m .userContentText .imgWrap img + img{margin-top: 8px;}
.container_m .userContentText .imgWrap .allNum{position: absolute; bottom: 0; right: 0; background-color: rgba(29, 29, 31,0.5); color: var(--n-white); font-size: var(--f-body4); font-weight: 700; width: 16px; height: 16px; border-top-left-radius: 4px; text-align: center; line-height: 16px;}
.container_m .userContentText .imgWrap .allNum::after{content: ''; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(6px);}
/* 더보기 클릭 후 */
.container_m .comment .box .textWrap.allView .text,
.container_m .userContentText .textWrap.allView .text{max-height: initial;}
.container_m .comment .box .textWrap.allView .text textarea,
.container_m .userContentText .textWrap.allView .text textarea{max-height: initial; line-clamp: initial; -webkit-line-clamp: initial;}
.container_m .comment .box .textWrap.allView .text textarea:focus-visible,
.container_m .userContentText .textWrap.allView .text textarea:focus-visible{outline: 1px solid transparent; border-color: transparent;}
.container_m .userContentText .textWrap.allView .imgWrap{height: auto;}
.container_m .userContentText .textWrap.allView .imgWrap .allNum{display: none;}
.container_m .comment .box .textWrap.allView .moreBtn,
.container_m .userContentText .textWrap.allView .moreBtn{display: none;}
/* 회색 배경 > 댓글 컬러 */
.container_m .commentArea.gray{background-color: transparent;}
.container_m .commentArea.gray .box{background-color: var(--n-white); border: 1px solid var(--s-color1);}


.container_m .commentArea .fileWrap{background-color: var(--b-color5); padding: 12px 0px; margin-top: 12px;  font-size: var(--f-body3); font-weight: 700; }
.container_m .commentArea .fileWrap .file{color: var(--n-info); display: flex; justify-content: space-between; line-height: 16px; letter-spacing: -0.24px;}
.container_m .commentArea .fileWrap .file .name{display: inline-block; max-width: calc(100% - 68px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--n-info); display: inline-block;}
.container_m .commentArea .fileWrap .file .icon{color: var(--p-color1); background-image: url('../img/common/board/file_down.svg'); background-repeat: no-repeat; background-size: 16px; background-position: right center;  padding-right: 20px; width: 68px; text-align: right; text-decoration: underline; display: inline-block;}

@media (min-width: 768px) {
    .my-class-sub.boardWrite{ font-size: var(--f-body1);}
    .my-class-sub.boardWrite .topWrap{ width: 100%; border-bottom: 1px solid var(--s-color1);}
    .my-class-sub.boardWrite .topWrap .boxWrap{display: flex; border-top: 1px solid var(--s-color1);}
    .my-class-sub.boardWrite .topWrap .boxWrap .box{display: flex; align-items: center; min-height: 48px;}
    .my-class-sub.boardWrite .topWrap .boxWrap .titleBox { text-align: center; font-size: var(--f-body1); line-height: 20px; letter-spacing:-0.28px; font-weight: 700; color: var(--n-info); background-color: var(--b-color4); width: 180px; justify-content: center; }
    .my-class-sub.boardWrite .topWrap .boxWrap .contentBox{width: calc(100% - 180px); padding: 12px 16px;}
    .my-class-sub.boardWrite .topWrap .boxWrap .contentBox .dropDownMenu .label{height: 40px; border-radius: var(--b-radius0); background-size: 16px; font-size: inherit; padding: 0 32px 0 12px;}
    .my-class-sub.boardWrite .topWrap .boxWrap .contentBox .dropDownMenu .selectBox .optionListWrap{top: 44px;}
    .my-class-sub.boardWrite .topWrap .boxWrap .box.subject input[type="text"]{border: 1px solid var(--s-color1); border-radius: var(--b-radius0); height: 40px; font-size: inherit; padding: 0 8px;}
    .my-class-sub.boardWrite .topWrap .boxWrap .box.subject input[type="text"]::placeholder{color: var(--n-info);}
    .my-class-sub.boardWrite .text-editor { min-height: 400px; margin: 16px 0; border: 1px solid var(--s-color1); border-radius: var(--b-radius1); padding: 16px;}
    .my-class-sub.boardWrite .uploadFile{width: 100%; position: relative;}
    .my-class-sub.boardWrite .uploadFile .flex{justify-content: center; align-items: center; height: 100%;}
    .my-class-sub.boardWrite .uploadFile .uploadArea{width: 100%; background-color: var(--b-color5); height: 62px; line-height: 62px; text-align: center; font-size: var(--f-heading3); border-radius: var(--b-radius0); color: var(--n-info); border: 1px solid var(--s-color1); cursor: pointer;}
    .my-class-sub.boardWrite .uploadFile .uploadArea .flex{justify-content: center; align-items: center;}
    .my-class-sub.boardWrite .uploadFile .file-drop span{color: var(--p-color1); font-size: var(--f-body3); margin-left: 12px; font-weight: 600; position: relative; line-height: normal;}
    .my-class-sub.boardWrite .uploadFile .file-drop span::after{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--p-color1);}
    .my-class-sub.boardWrite .uploadFile .upload-icon{background-image: url('../img/common/board/file-upload.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px; margin-right: 8px;}
    .my-class-sub.boardWrite .uploadFile .file-list{position: relative;}
    .my-class-sub.boardWrite .uploadFile .file-list .fileBtn{display: none;}
    .my-class-sub.boardWrite .uploadFile .file-list .file-name{display: flex; align-items: flex-start; width: 100%;}
    .my-class-sub.boardWrite .uploadFile .file-list .file-name + .file-name{margin-top: 4px;}
    .my-class-sub.boardWrite .uploadFile .file-list .file-name .remove{background-image: url('../img/common/board/upload-remove.svg'); background-repeat: no-repeat; background-size: contain; width: 14px; height: 14px; background-position: center; margin-left: 4px;}
    .my-class-sub.boardWrite .uploadFile.active .file-list{background-color: var(--b-color5); border: 1px solid var(--s-color1); border-radius: var(--b-radius0); margin-top: 16px; padding: 12px; font-size: var(--f-body3); color: var(--n-info); line-height: 16px; letter-spacing: -0.24px;}
    .my-class-sub.boardWrite .uploadFile.active .uploadArea{position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: auto; height: auto; z-index: 1; border: none; background-color: transparent;}
    .my-class-sub.boardWrite .uploadFile.active .uploadArea .upload-icon,
    .my-class-sub.boardWrite .uploadFile.active .uploadArea p{display: none;}
    .my-class-sub.boardWrite .uploadFile.active .file-list{padding: 21px 16px; font-size: var(--f-body1); min-height: 62px; margin-top: 0;}



    .commentArea{font-size: var(--f-body1); padding: 0 16px 40px;}
    .commentArea textarea{border-radius: 8px; border: 1px solid var(--s-color1); padding: 9px; font-size: var(--f-body1); outline: 0; font-family: inherit; white-space: pre-wrap;word-wrap: break-word; overflow: hidden;}
    .commentArea textarea::placeholder{color: var(--n-info);}
    .commentArea textarea:focus-visible {border-color: #339DFF;}

    .commentArea .comment .box textarea,
    .commentArea .userContentText textarea{background-color: transparent; padding: 0; border: none; font-size: inherit; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -moz-box-orient: vertical; display: -moz-box; display: -webkit-box; height: 100%; line-height: 16px; letter-spacing: -0.24px; color: var(--n-subTitle);}
    .commentArea .comment .box textarea:focus-visible,
    .commentArea .userContentText textarea:focus-visible{outline: none;}
    .commentArea .comment .box .moreBtn,
    .commentArea .userContentText .moreBtn{text-decoration: underline; color: var(--n-info2); font-weight: 500; margin-top: 6px;}
    .commentArea .comment .box .textWrap,
    .commentArea .userContentText .textWrap{line-height: 16px; letter-spacing: -0.24px;}
    /* 댓글 */
    .commentArea .box{position: relative; border-radius: var(--b-radius0); padding: 12px; font-size: var(--f-body3); }
    .commentArea .box .manager{border-bottom: 1px solid var(--s-color1); padding-bottom: 9px; margin-bottom: 8px; display: flex; align-items: center;}
    .commentArea .box .manager .profile{width: 32px; height: 32px; border-radius: var(--b-radius3); border: 1px solid var(--s-color1); background-image: url('../img/common/board/comment-profile.png'); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; position: relative;}
    .commentArea .box .manager .profile.teacher{background-image: url('../img/common/board/comment-profile-t.png');}
    .commentArea .box .manager .profile.manager{background-image: url('../img/common/board/comment-profile-m.png');}
    .commentArea .box .manager .info{padding-left: 8px; font-size: var(--f-body4); color: var(--n-info); line-height: 14px; letter-spacing: -0.22px;}
    .commentArea .box .manager .info .name{font-weight: 700; color: var(--n-subTitle); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
    .commentArea .box .remove-comment{position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; background-image: url('../img/common/popupCloseBtn_mo.svg'); background-repeat: no-repeat; background-size: contain; background-position: center;}
    .commentArea .box .textWrap .buttonWrap{padding-top: 4px;}
    .commentArea .box .textWrap .buttonWrap > * + *{margin-left: 17px; position: relative;}
    .commentArea .box .textWrap .buttonWrap > * + *::before{content: ''; position: absolute; left: -8.5px; top: 50%; transform: translateY(-50%); width: 1px; height: 8px; background-color: var(--s-color1);}
    .commentArea .box .textWrap .buttonWrap .add-comment{background-image: url('../img/common/board/add-comment-icon.svg'); background-repeat: no-repeat; background-size: 14px; background-position: left center; padding-left: 18px;}
    .commentArea .box .textWrap .buttonWrap .hide-comment{display: flex; cursor: default;}
    .commentArea .box .textWrap .buttonWrap .hide-comment p{cursor: pointer;}
    .commentArea .box .textWrap .buttonWrap .hide-comment .num{font-weight: 500; display: inline-block;}
    .commentArea .box .textWrap .buttonWrap .hide-comment .type2{display: none;}
    .commentArea .box .textWrap .buttonWrap .hide-comment.hide .type1{display: none;}
    .commentArea .box .textWrap .buttonWrap .hide-comment.hide .type2{display: inline-block;}
    .commentArea .comment{padding-left: 24px; padding-top: 16px; position: relative;}
    .commentArea .comment::before{content: ''; position: absolute; left: 0; top: 16px; background-image: url('../img/common/board/refund-comment.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; width: 16px; height: 16px;}
    .commentArea .comment .box{background-color: var(--b-color5);}
    .commentArea .comment .box .textWrap .text{max-height: 63px; overflow: hidden;}
    .commentArea .comment .box textarea{line-clamp: 4; -webkit-line-clamp: 4;}
    /* 답글 달기 - input */
    .replyArea .replyInputWrap .pictureWrap{display: none;}
    .replyArea .replyInputWrap{margin-top: 8px; padding-left: 24px; margin-top: 8px; position: relative; display: none;} /* 답글 -input */
    .replyArea.input .replyInputWrap{display: block;}
    /* 화살표가 없는 코멘트 */
    .commentArea .comment.n{padding-left: 0;}
    .commentArea .comment.n::before{display: none;}
    /* 본문 */
    .commentArea .userContentText .textWrap .text{max-height: 98px; overflow: hidden;}
    .commentArea .userContentText textarea{line-clamp: 6; -webkit-line-clamp: 6; cursor: pointer;}
    .commentArea .userContentText .imgWrap{width: 100%; max-width: 328px; border-radius: var(--b-radius0); overflow: hidden; margin-top: 14px; height: 100px; position: relative;}
    .commentArea .userContentText .imgWrap img{width: 100%; object-fit: contain; border-radius: var(--b-radius0);}
    .commentArea .userContentText .imgWrap img + img{margin-top: 8px;}
    .commentArea .userContentText .imgWrap .allNum{position: absolute; bottom: 0; right: 0; background-color: rgba(29, 29, 31,0.5); color: var(--n-white); font-size: var(--f-body4); font-weight: 700; width: 16px; height: 16px; border-top-left-radius: 4px; text-align: center; line-height: 16px;}
    .commentArea .userContentText .imgWrap .allNum::after{content: ''; position: absolute; width: 100%; height: 100%; backdrop-filter: blur(6px);}
    /* 더보기 클릭 후 */
    .commentArea .comment .box .textWrap.allView .text,
    .commentArea .userContentText .textWrap.allView .text{max-height: initial;}
    .commentArea .comment .box .textWrap.allView .text textarea,
    .commentArea .userContentText .textWrap.allView .text textarea{max-height: initial; line-clamp: initial; -webkit-line-clamp: initial;}
    .commentArea .comment .box .textWrap.allView .text textarea:focus-visible,
    .commentArea .userContentText .textWrap.allView .text textarea:focus-visible{outline: 1px solid transparent; border-color: transparent;}
    .commentArea .userContentText .textWrap.allView .imgWrap{height: auto;}
    .commentArea .userContentText .textWrap.allView .imgWrap .allNum{display: none;}
    .commentArea .comment .box .textWrap.allView .moreBtn,
    .commentArea .userContentText .textWrap.allView .moreBtn{display: none;}
    /* 회색 배경 > 댓글 컬러 */
    .commentArea .commentArea.gray{background-color: transparent;}
    .commentArea .commentArea.gray .box{background-color: var(--n-white); border: 1px solid var(--s-color1);}

    .commentArea .title{font-weight: 700; padding: 16px 0; margin-bottom: 16px;}
    .commentArea .title span{color: #0059FF;}
    .commentArea .original-comment .box{border: 1px solid var(--s-color1);}
    .commentArea .original-comment .box .textWrap .text{line-height: 16px; letter-spacing: -0.24px;}
    .commentArea .replyArea{padding-top: 12px;}
    .commentArea .comment{padding-top: 12px;}
    .commentArea .comment .reply .who{position: relative; display: none; padding-right: 5px;}
    .commentArea .comment .reply .who::before{content: '@'; font-weight: 700;}
    .commentArea .comment ~ .comment::before{display: none;}

    .commentArea .title{font-weight: 700; padding: 16px 0; margin-bottom: 16px;}
    .commentArea .title span{color: #0059FF;}
    .commentArea .original-comment .box{border: 1px solid var(--s-color1);}
    .commentArea .original-comment .box .textWrap .text{line-height: 16px; letter-spacing: -0.24px;}
    .commentArea .replyArea{padding-top: 12px;}
    .commentArea .comment{padding-top: 12px;}
    .commentArea .comment .reply .who{position: relative; display: none; padding-right: 5px;}
    .commentArea .comment .reply .who::before{content: '@'; font-weight: 700;}
    .commentArea .comment ~ .comment::before{display: none;}

    .commentArea .fileWrap { padding: 12px 0px !important; border: none !important }
    .commentArea .fileWrap .file .icon { margin-left: 0px !important; }

    .replyInputWrap .file-list{display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 0 8px;}
    .replyInputWrap .file-list .imageFile{position: relative; width: 72px; margin-right: 8px;}
    .replyInputWrap .file-list .imageFile img{width: 72px; height: 72px; border-radius: var(--b-radius0); overflow: hidden; object-fit: cover;}
    .replyInputWrap .file-list .imageFile .remove{background-image: url('../img/common/board/upload-remove-white.svg'); background-repeat: no-repeat; background-size: contain; width: 16px; height: 16px; background-position: center; background-color: var(--n-deactivate); border-radius: 50%; top: 5.33px; right: 5.33px; position: absolute;}
    .replyInputWrap .file-list .imageFile .file-name{font-size: var(--f-body3); display: flex; align-items: center; margin-top: 4px;}
    .replyInputWrap .file-list .imageFile .file-name span::before{content: '.';}
    .replyInputWrap .reply-textWrap{position: relative; width: 100%; width: calc(100% - 50px); padding-right: 8px}
    .replyInputWrap .reply-textWrap .send-file{background-image: url('../img/common/board/add-file-16.svg'); width: 16px; height: 16px; background-size: contain; background-position: center; position: absolute; right: 20px; top: 12px; cursor: pointer;}
    .replyInputWrap .reply-textWrap .text{height: 40px; max-height: 100px; min-height: 40px; display: block;}
    .replyInputWrap .reply-textWrap .text textarea{height: 100%; padding-right: 18px;}
    /* 첨부파일 있을 때 */
    .replyInputWrap.addFile .file-list{padding-bottom: 10px;}
    .replyInputWrap.addFile .reply-textWrap{padding: 0; position: relative;}
    .replyInputWrap.addFile .reply-textWrap::before{content: ''; position: absolute; top: 0; left: 0; width: calc(100% - 8px); height: 100%; border: 1px solid var(--p-color1); border-radius: var(--b-radius0); touch-action: none; pointer-events: none; z-index: 2;}
    .replyInputWrap.addFile .reply-textWrap::after{content: ''; position: absolute; top: 0; right: 0; background-color: #fff; width: 16px; height: 100%;}
    .replyInputWrap.addFile .reply-textWrap .text textarea{border-color: transparent;}

    .replyInputWrap .registration{height: 40px; line-height: 1.2; background-color: var(--n-white); color: var(--p-color2); border: 1px solid var(--p-color2); font-size: var(--f-body1); width: 50px; border-radius: var(--b-radius0); transition: background-color 0.3s ease;}
    .replyInputWrap.re-reply{display: none; margin-top: 8px; padding-left: 24px;}


    @media screen and (min-width: 1200px){
        .commentArea{margin-top: 40px; padding: 0;}

        .commentArea .comment .box textarea,
        .commentArea .userContentText textarea{line-height: 20px; letter-spacing: -0.28px;}
        /* 댓글 */
        .commentArea .box{border-radius: var(--b-radius2); padding: 16px; font-size: var(--f-body1);}
        .commentArea .box .manager{padding-bottom: 18px; margin-bottom: 16px;}
        .commentArea .box .manager .profile{width: 48px; height: 48px; background-image: url('../img/common/board/comment-profile-48.png');}
        .commentArea .box .manager .profile.teacher{background-image: url('../img/common/board/comment-profile-t-48.png');}
        .commentArea .box .manager .profile.manager{background-image: url('../img/common/board/comment-profile-m-48.png');}
        .commentArea .box .manager .info{color: var(--n-subTitle); font-size: var(--f-body1); line-height: 20px; letter-spacing: -0.28px;}
        .commentArea .box .manager .info .name{font-size: var(--f-heading3); padding-right: 8px; line-height: 22px; letter-spacing: -0.32px;}
        .commentArea .box .remove-comment{top: 16px; right: 16px; background-image: url('../img/common/popupCloseBtn.svg'); width: 24px; height: 24px;}
        .commentArea .box .textWrap .buttonWrap{padding-top: 16px;}
        .commentArea .box .textWrap .buttonWrap .add-comment{background-image: url('../img/common/board/add-comment-icon_pc.svg'); background-size: 16px; padding-left: 20px;}
        .commentArea .box .textWrap .buttonWrap > * + *{margin-left: 33px;}
        .commentArea .box .textWrap .buttonWrap > * + *::before{left: -16.5px;}

        .commentArea .comment{padding-left: 32px; padding-top: 32px;}
        .commentArea .comment::before{width: 24px; height: 24px; background-image: url('../img/common/board/refund-comment_pc.svg'); top: 32px;}
        .commentArea .comment .box .textWrap{line-height: 20px; letter-spacing: -0.28px; }
        .commentArea .comment .box .textWrap .text{line-clamp: initial; -webkit-line-clamp: initial; height: auto; max-height: initial;}
        .commentArea .comment .box .textWrap .text textarea{line-height: 20px; letter-spacing: -0.28px; text-overflow: initial; line-clamp: initial; -webkit-line-clamp: initial;}
        .commentArea .comment .box .textWrap .moreBtn{display: none !important;}
        /* 답글 달기 - input */
        .commentArea .replyArea .replyInputWrap{margin-top: 24px; padding-left: 88px; position: relative;}
        .commentArea .replyArea .replyInputWrap .pictureWrap{background-image: url('../img/common/board/refund-comment-profile.svg'); background-repeat: no-repeat; background-size: cover; background-position: center; width: 48px; height: 48px; border: 1px solid var(--s-color1); border-radius: var(--b-radius1); position: absolute; left: 32px; top: 0; display: block;}
        .commentArea .replyArea .replyInputWrap .pictureWrap figure{width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;}
        /* 본문 */
        .commentArea .userContentText .textWrap.imgTrue{display: flex; flex-wrap: wrap;}
        .commentArea .userContentText .textWrap.imgTrue .text{width: calc(100% - 132px); order: 1; padding-right: 16px;}
        .commentArea .userContentText .textWrap .imgWrap{width: 132px; height: 132px; margin-top: 0; order: 2; }
        .commentArea .userContentText .imgWrap img{height: 100%; width: 100%; object-fit: cover; object-position: center;}
        .commentArea .userContentText .moreBtn{order: 3;}
        .commentArea .userContentText .imgWrap .allNum{width: 20px; height: 20px; line-height: 20px; font-size: var(--f-body3);}
        /* 더보기 클릭 후 */
        .commentArea .userContentText .textWrap.allView{display: block;}
        .commentArea .userContentText .textWrap.allView.imgTrue .text{width: 100%;}
        .commentArea .userContentText .textWrap.allView.imgTrue .imgWrap{width: 100%;height: auto; display: flex; flex-wrap: wrap; margin-top: 24px; max-width: initial; row-gap: 24px; column-gap: 24px;}
        .commentArea .userContentText .textWrap.allView .imgWrap img{height: auto; width: calc(50% - 12px); }
        .commentArea .userContentText .textWrap.allView .imgWrap img + img{margin-top: 0;}


        .commentArea .title{font-size: var(--f-heading2); padding-top: 0; padding-bottom: 0; margin-bottom: 24px;}
        .commentArea .title::after{display: none;}
        .commentArea .comment{padding-top: 24px;}
        .commentArea .comment .reply .who{display: inline-block;}
        .commentArea .replyArea{padding-top: 24px;}


        .replyInputWrap .registration{width: 130px; height: 56px; font-size: var(--f-heading2); font-weight: 700; border-radius: 12px;}
        .replyInputWrap .registration:disabled{color: var(--n-info) !important;}

        .replyInputWrap .reply-textWrap{width: calc(100% - 130px); padding-right: 16px;}
        .replyInputWrap .reply-textWrap .text{height: 56px; min-height: 56px; max-height: initial; padding-right: 0;}
        .replyInputWrap .reply-textWrap .text textarea{font-size: var(--f-heading3); line-height: 22px; letter-spacing: -0.32px; border-radius: 12px; padding: 16px; height: 100% !important; overflow: hidden;}
        .replyInputWrap .reply-textWrap .send-file{width: 24px; height: 24px; background-image: url('../img/common/board/add-file.svg'); top: 16px; right: 28px;}
        .replyInputWrap.addFile .reply-textWrap::before{width:calc(100% - 16px); }
        .replyInputWrap.addFile .reply-textWrap::after{width: 28px;}

        .inputArea .replyInputWrap .flex.align-c{align-items: flex-start;}
        .inputArea .replyInputWrap .reply-textWrap{ width: calc(100% - 24px); padding-right: 8px;}
        .inputArea .replyInputWrap .registration{height: 24px; width: 24px; font-size: var(--f-heading2); text-indent: -99999999999999%; background-image: url('../img/common/board/send-text-active.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; background-color:transparent !important; border:none;}
        .inputArea .replyInputWrap .registration:disabled{background-image: url('../img/common/board/send-text.svg');}
        .inputArea .replyInputWrap .reply-textWrap .send-file{right: 20px;}
        .inputArea .replyInputWrap.addFile .reply-textWrap::before{border-radius: 12px; width: calc(100% - 8px);}
        .inputArea .replyInputWrap.addFile .reply-textWrap::after{width: 20px;}

        .replyInputWrap.bottom-fix-btn{margin-top: 24px;}
        .replyInputWrap.re-reply{padding-left: 32px; margin-top: 24px;}
    }
}