/* 공통 */
.part-error { color: #f05050; margin-left: 0; margin-top: 5px; vertical-align: middle; }
table .normal-btn.white-bg { border: 1px solid #dcdcdc; color: #999; background: #fff; margin-left: 5px; }
.normal-txt-input { padding: 0 10px; }
.normal-txt-input.short { width: 100px; text-align: right;}


.info-detail .info-table table tr td.table-input { position: relative; padding-right: 90px;}
.info-detail .info-table table tr td.table-input .normal-btn.white-bg { position: absolute; right: 6px; top: 5px;}
.info-detail .info-table table tr td .dete-select-wrap .inline-block {  display: inline-block; padding-right: 10px;}
.info-detail .info-table table tr.inquiry-th th { text-align: center; padding: 10px;}

.confirm-pop-wrap .confirm-pop-area .confirm-pop .content p.text-title { font-size: 1.4rem; font-weight: 600; color: #474747; padding-bottom: 10px;}

.rank-table table tbody tr.select td { background: #ffe5e5; }
.rank-table .flex { display: flex;  justify-content: space-between; align-items: flex-end;}
.rank-table .step-area .step-tab { position: relative; height: 32px; overflow: hidden;}
.rank-table .step-area .step-tab ul {  white-space: nowrap; overflow-y: auto; width: 100%;}
.rank-table .step-area .step-tab ul li { display: inline-block; height: 0; border-right: 17px solid transparent; border-bottom: 32px solid #bebebe; line-height: 30px; cursor: pointer;}
.rank-table .step-area .step-tab ul li a { padding: 0 10px; padding-right: 2px; display: block; color: #fff; }
.rank-table .step-area .step-tab ul li.select { border-bottom-color: #33be62;}
.ellipsis { width: 85px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block;}



.number-list ul li {  display: inline-block; margin-top: 8px; border: 1px solid #dcdcdc; border-radius: 3px; background: #f8f8f8; height: 30px; line-height: 28px; padding: 0 10px; font-size: 12px; cursor: default; color: #666; margin-right: 5px;}
.number-list ul li button { border: none; background: none; width: 12px; height: 12px; font-size: 14px; vertical-align: top; margin-top: 4px; margin-left: 5px; cursor: pointer;}


/* 가맹점 문의관리 랭크 테이블 */
.rank-table table tbody tr .wid-50 { max-width: 50px; word-break: break-all;}



/* 고객문의 질의응답 */
.inquiry-chat-wrap { display: flex; flex-direction: column; justify-content: space-between; position: relative; margin: 0 auto; max-width: 100%; width: 100%; padding: 20px 0 0; }
.inquiry-chat { height: 600px; overflow-y: auto; position: relative; background: #f3f3f3; border: 1px solid #C0CAD3; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 20px; }
.inquiry-chat .middle-message { display: flex; justify-content: center; padding: 20px 0; }
.inquiry-chat .middle-message .message { max-width: 400px; text-align: center; padding: 5px 20px; border-radius: 200px; background: #e3e6e9; }
.inquiry-chat .middle-message .message .message-text { color: #5f6671; font-weight: 500; }
.inquiry-chat .chat-wrap { padding-bottom: 20px; }
.inquiry-chat .chat-wrap .chat-area .file-set-wrap { margin: 5px 0; text-align: left; padding: 0; border: 0; }
.inquiry-chat .chat-wrap .chat-area .file-set-wrap .added-file { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: #f8f8f8; height: 28px; line-height: 26px; padding: 0 15px; border-radius: 14px; border: 1px solid #dee3eb; margin: 4px 4px 0 0; }
.inquiry-chat .chat-wrap .chat-area .file-set-wrap .added-file .icon { font-size: 13px; }
.inquiry-chat .chat-wrap .chat-area .chat { max-width: 90%; width: fit-content; padding: 15px 20px; border-radius: 0px 20px 20px 20px; background: #fff; border: 1px solid #dfdfdf; }
.inquiry-chat .chat-wrap .chat-area .chat:nth-child(1n) { margin-top: 5px; }
.inquiry-chat .chat-wrap .chat-area .chat:first-child { margin-top: 0; }
.inquiry-chat .chat-wrap .chat-area .chat .chat-text { color: #333; white-space: pre-wrap; font-size: 1.4rem; }
.inquiry-chat .chat-wrap .chat-area .chat .chat-text.tit { font-weight: 500; color: #111;}
.inquiry-chat .chat-wrap .chat-area .copy { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-start; margin: 5px 0 2px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.inquiry-chat .chat-wrap .chat-area .copy:hover { background: #e3e3e3; }
.inquiry-chat .chat-wrap .chat-area .copy .icon { font-size: 14px; }
.inquiry-chat .chat-wrap .chat-area .copy .copy-text { font-size: 1.2rem; color: #2d2d2d; }
.inquiry-chat .chat-wrap .chat-area .info-text { display: flex; align-items: flex-end; gap: 7px; }
.inquiry-chat .chat-wrap .chat-area .info-text .name { font-size: 1.5rem; color: #555; font-weight: 800; line-height: 24px; }
.inquiry-chat .chat-wrap .chat-area .info-text .date { font-size: 1.2rem; color: #777; line-height: 22px; letter-spacing: -0.7px; }
.inquiry-chat .chat-wrap.answer .chat-area { display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-end; }
.inquiry-chat .chat-wrap.answer .chat-area .copy { justify-content: flex-end; }
.inquiry-chat .chat-wrap.answer .chat-area .chat { border-radius: 20px 0 20px 20px; background: #e6edff; border-color: #c3ceed; }
.inquiry-chat .chat-wrap.answer .chat-area .chat .chat-text { color: #06334f; }
.inquiry-chat .chat-wrap.answer .chat-area .file-set-wrap { text-align: right; }

.inquiry-chat .chat-wrap .chat-area .small-btn { font-size: 12px; height: 25px; display: inline-block; line-height: 25px; padding: 0 12px; border-radius: 3px; cursor: pointer; color: #fff; font-weight: 300;}
.inquiry-chat .chat-wrap .chat-area .small-btn.border-bg { line-height: 23px; border: 1px solid #33be62; color: #33be62; background: #ffffff; font-weight: 400; }
.inquiry-chat .chat-wrap .chat-area .small-btn.border-bg:hover { background: #33be62; color: #ffffff;}
.inquiry-chat .chat-wrap .chat-area .normal-btn { display: inline-block; border-radius: 3px; cursor: pointer; margin-top: 4px;}
.inquiry-chat .chat-wrap .chat-area .normal-btn.theme-bg { color: rgb(52, 157, 111); border: none; padding: 0px 11px; height: 29px; margin: 5px 0 3px 0px; line-height: 28px; font-weight: 600; transition: background 0.2s ease, border-color 0.3s ease; background: #fff; }
.answer-input-area .input-textarea { position: relative; }
.answer-input-area .input-textarea.answer-input textarea { min-height: 100px; height: auto; padding-right: 120px; }
.answer-input-area .input-textarea.answer-input .btn-wrap { position: absolute; top: 0; right: 0; height: 100%; }
.answer-input-area .input-textarea.answer-input .btn-wrap button { height: 100%; padding: 0 30px; border-radius: 3px; }
.answer-input-area .input-file-wrap { padding: 7px 10px; border: 1px solid #C0CAD3; border-top: 0; }
.answer-input-area .input-file-wrap .file-set-wrap.file-head { margin-bottom: 0; }
.answer-input-area .input-file-wrap .file-set-wrap.file-head .input-file { box-shadow: none; background: #f0f0f0; border: 1px solid #d7d7d7; border-radius: 3px; margin-right: 0; padding: 0 17px; line-height: 30px; }
.answer-input-area .input-file-wrap .file-set-wrap.file-head .input-file label { font-weight: 700; }
.answer-input-area .input-file-wrap .file-set-wrap.added { margin: 7px 0 0; }
.answer-input-area .input-file-wrap .file-add-area { padding-top: 10px;} 


.comment-wrap { background: #fff; border: 1px solid #dee3eb; padding: 10px 15px; margin-top: 5px; position: relative;}
.comment-wrap .comment i {  margin-right: 3px;}

/* 댓글 영역 스타일 */
.comment-wrap .title { font-size: 14px; font-weight: 600; color: #2d2d2d; padding-bottom: 10px; border-bottom: 1px solid #dee3eb; margin-bottom: 15px;}
.comment-wrap .comment-area { margin-bottom: 20px;}
.comment-wrap .comment { background: #f8f8f8; border: 1px solid #dee3eb; border-radius: 3px; padding: 10px 15px; margin-bottom: 10px;}
.comment-wrap .comment:last-child { margin-bottom: 0;}
.comment-wrap .comment .user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;}
.comment-wrap .comment .user-info .name { font-size: 13px; font-weight: 600; color: #2d2d2d;}
.comment-wrap .comment .user-info .info { font-size: 12px; color: #777; position: relative; padding-right: 0;}
.comment-wrap .comment .user-info .info:not(:last-child):after { content: '|'; position: absolute; right: -5px; color: #ccc;}
.comment-wrap .comment .user-info .edit-btn { margin-left: 8px; padding: 3px 10px; border: 1px solid #dee3eb; border-radius: 3px; background: #fff; color: #666; font-size: 12px; cursor: pointer; transition: all 0.2s ease;}
.comment-wrap .comment .user-info .edit-btn:hover { border-color: #33be62; color: #33be62; background: #f0f9f4;}
.comment-wrap .comment .user-info i.fa-times-circle { margin-left: auto; color: #999; cursor: pointer; font-size: 14px; transition: color 0.2s ease;}
.comment-wrap .comment .user-info i.fa-times-circle:hover { color: #f05050;}
.comment-wrap .comment .user-info .delete-btn { margin-left: auto;}
.comment-wrap .comment .user-txt { font-size: 13px; color: #333; line-height: 1.6; white-space: pre-wrap;}
.comment-wrap .comment .edit-area { margin-top: 10px; padding-top: 10px; border-top: 1px solid #dee3eb;}
.comment-wrap .comment .edit-area .edit-textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid #dee3eb; border-radius: 3px; font-size: 13px; resize: vertical; font-family: inherit; line-height: 1.6;}
.comment-wrap .comment .edit-area .edit-textarea:focus { border-color: #8CD5A5; box-shadow: 0 0 2px 2px rgba(26, 165, 64, 0.1); outline: 0;}
.comment-wrap .comment .edit-area .edit-btn-wrap { margin-top: 10px; text-align: right;}
.comment-wrap .comment .edit-area .edit-btn-wrap .normal-btn { font-size: 12px; height: 30px; display: inline-block; line-height: 30px; padding: 0 25px; border-radius: 3px; cursor: pointer; color: #fff; transition: background .2s ease; font-weight: 300; border: none; margin-left: 5px;}
.comment-wrap .comment .edit-area .edit-btn-wrap .normal-btn:first-child { margin-left: 0;}
.comment-wrap .comment .edit-area .edit-btn-wrap .normal-btn.blue-bg { background: #4a54ff; transition: background 0.2s ease;}
.comment-wrap .comment .edit-area .edit-btn-wrap .normal-btn.blue-bg:hover { background: #3A44F0;}
.comment-wrap .comment .edit-area .edit-btn-wrap .normal-btn.white-bg { line-height: 28px; border: 1px solid #dcdcdc; color: #999; font-weight: 400; transition: background .2s ease, border-color .3s ease; background: #fff;}
.comment-wrap .comment .edit-area .edit-btn-wrap .normal-btn.white-bg:hover { border-color: #dcdcdc; background: #f8f8f8;}
.comment-wrap .write-area { margin-bottom: 10px;}
.comment-wrap .write-area textarea { width: 100%; min-height: 100px; padding: 10px; border: 1px solid #dee3eb; border-radius: 3px; font-size: 12px; resize: vertical;}
.comment-wrap .write-area textarea:focus { border-color: #8CD5A5; box-shadow: 0 0 2px 2px rgba(26, 165, 64, 0.1); outline: 0;}




/* 견적문의 */
.quotation .box-wrap { display: flex;}
.quotation .box-wrap .box { width: 30%;}
.quotation .box-wrap .box.second { width: 40%;}
.quotation .box-wrap .box.second .box-body { padding-top: 0;}
.quotation .box-wrap .box.second .box-body > .btn-wrap { position: sticky;  height: auto; top: 0; z-index: 3; margin-top: 0; background: #fff; text-align: center; border-bottom: 1px solid #ededed; padding: 0px 0; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15); }
.quotation .box-wrap .box.second .box-body > .btn-wrap ul.left-btn-list { padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; float: none;}
.quotation .box-wrap .box.second .box-body > .btn-wrap ul.left-btn-list li { margin-left: 0;}
.quotation .box-wrap .box.second .box-body > .btn-wrap ul.left-btn-list li a.normal-btn { padding: 0 8px;}
.quotation .box-wrap .box.second .box-body .info-detail { padding-top: 20px;}
.quotation .box-wrap .box .box-title { color: #ffffff; background: #2c2d30; padding: 10px; font-size: 14px; font-weight: 600;     border-right: 1px solid #a2a2a2;}
.quotation .box-wrap .box .box-body { background: #ffffff; padding: 10px; border: 1px solid #dee3eb; height: 100%; min-height: 200px; max-height: 67vh; overflow-y: auto;}
.quotation .box-wrap .box.empty .box-body { position: relative; background: #fbfbfb;}
.quotation .box-wrap .box.empty .box-body .empty-text { position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.quotation .box-wrap .box .box-body .empty-text { display: none;}
.quotation .box-wrap .box.empty .box-body .empty-text { display: block; width: 100%;}
.quotation .box-wrap .box.empty .box-body .empty-text .text { font-size: 13px; font-weight: 500; color: #797979;}
.quotation .box-wrap .box.empty .box-body .empty-text .empty-img-area { padding-bottom: 5px;}
.quotation .box-wrap .box.empty .box-body .empty-text .empty-img-area .img { width: 34px; height: auto;}
.quotation .box-wrap .box.empty .box-body .info-detail { display: none;}
.quotation .box-wrap .box .box-body:nth-child(2) { border-left: none;}
.quotation .box-wrap .box .box-body .box-sheave { padding-bottom: 5px; }
.quotation .box-wrap .box .box-body .box-sheave .selectbox {margin-right: 5px;}
.quotation .box-wrap .box .box-body .inquiry-chat { padding: 15px;}

.quotation .box-wrap .box .box-body .inquiry-chat .chat-wrap .chat-area .chat .quote-inquiry:first-child { border-bottom: 1px solid #cdcdcd;}
.quotation .box-wrap .box .box-body .inquiry-chat .chat-wrap .chat-area .chat .quote-inquiry:nth-child(-n+1) { padding-top: 0;}
.quotation .box-wrap .box .box-body .inquiry-chat .chat-wrap .chat-area .chat .quote-inquiry:last-child { border-bottom: none; padding-bottom: 0;}
.quotation .box-wrap .box .box-body .inquiry-chat .chat-wrap .chat-area .chat .quote-inquiry { padding: 10px 0;  border-bottom: 1px dashed #c3c3c3;}
.quotation .box-wrap .box .box-body .inquiry-chat .chat-wrap .chat-area .chat .quote-inquiry.center { text-align: center;}
.product-wrap { background: #F4F4F4; padding: 10px; border-radius: 4px;}
.product-wrap .check-input-wrap { display: flex;}
.product-wrap + .product-wrap { margin-top: 25px;}
.product-wrap .product { background: #ffffff; padding: 10px; border-radius: 4px; box-shadow: 0px 4px 13px 1px rgba(0, 0, 0, 0.07); margin-bottom: 10px;}
.product-wrap .product .sub-tit { padding: 3px 0;}
.product-wrap .product .title-area { padding-bottom: 12px;}
.product-wrap .product .title-area .tit { font-size: 15px; font-weight: 500; color: #2a87eb;}
.product-wrap .product .title-area .tit .sub-tit { font-size: 13px; padding-left: 8px; color: #666;}
.product-wrap .title-area { display: flex; justify-content: space-between;}
.product-wrap .title-area .img-area { cursor: pointer;}
.product-wrap .title-area .product-title { font-size: 15px; font-weight: 600; padding-bottom: 8px; width: 460px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.product-wrap .product .info-text .text-area { display: flex;  color: #b4b4b4; padding-bottom: 4px;}
.product-wrap .product .info-text .text-area:last-child { padding-bottom: 0;}
.product-wrap .product .info-text .text-area .bold { font-size: 13px; font-weight: 500; color: #4e4e4e;}
.product-wrap .product .info-text .text-area .bold span { color: #2a87eb;}
.product-wrap .product .info-text .text-area .info-tit { width: 70px;}
.product-wrap .product .info-text .text-area span.unit {  font-size: 12px; color: #999; margin: 0 5px;}
.product-wrap .product .info-text .text-area .price { padding-top: 3px; color: #666;}
.product-wrap .product .info-text .text-area .price .point { color: #f05050;}
.product-wrap .product .comment-area { padding: 10px 0;}
.product-wrap .product .comment-area .title { font-size: 14px; font-weight: 500; padding-bottom: 5px;}


.inquiry-chat .chat-wrap .chat-area .chat .info-text { display: block; padding: 5px 0;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area { display: flex; color: #777777; padding-bottom: 2px;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area:last-child { padding-bottom: 0;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area .info-tit { width: 50px;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area .bold { font-size: 13px; font-weight: 500; color: #4e4e4e;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area .bold span { color: #2a87eb;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area span.unit {  font-size: 12px; color: #999; margin: 0 5px;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area .price {width: calc(100% - 50px); font-weight: 500; color: #666;}
.inquiry-chat .chat-wrap .chat-area .chat .info-text .text-area .price .point { color: #f05050;}


.comment-area .textarea { position: relative;  }
.comment-area .textarea textarea { padding-bottom: 25px; }
.comment-area .textarea .text-limit-wrap { position: absolute; z-index: 2; bottom: 6px; right: 20px; color: #999; cursor: default; display: inline-block; background: #fff; }
.comment-area .textarea .text-limit-wrap span { font-family: 'Arial','dotum'; font-size: 11px; }
.comment-area .textarea .text-limit-wrap span.excess { color: #F05050; font-weight: bold; }
.comment-area .textarea .text-limit-wrap span.unit { font-size: 11px; margin-left: 2px; }


.inquiry-chat .chat-wrap .chat-area .chat .quote-inquiry .quote-tit { font-size: 14px; font-weight: 600;}
.inquiry-chat .chat-wrap .chat-area .chat .chat-text .point { color: #e33434; font-weight: 600;}

.box-wrap .normal-btn {  display: inline-block; height: 28px; line-height: 26px; font-weight: 400; transition: background .2s ease, border-color .2s ease; padding: 0 15px; border-radius: 3px; cursor: pointer; color: #fff;}
.box-wrap .normal-btn.mg-left { margin-left: 5px;}


.store-logo-area { display: flex; align-items: center; padding-bottom: 10px; }
.store-logo-area .store-logo { position: relative;  border: 1px solid #E0E0E0; text-align: center; width: 60px; height: 50px;}
.store-logo-area .store-logo img {max-width: 90%; max-height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.store-logo-area .info-title { padding-left: 10px;}