


/* ï¿½ï¿½ï¿½(tile) ï¿½ï¿½ï¿½ï¿½ */

.board-list { display: flex; flex-wrap: wrap; }
.board-list .board-tile { position:relative; background-color: #fff; border: 1px solid var(--color-gray-light); overflow: hidden; cursor: pointer; transition: all 0.4s; }
.board-list .board-tile:nth-child(n) { width: calc(100%/3 - 0.8rem); margin-right: calc(0.8rem*3/2); margin-bottom: calc(0.8rem*3/2); }
.board-list .board-tile:nth-child(3n) { margin-right: 0; }
.board-list .board-tile:hover { transform: scale(1.02); box-shadow: 4px 12px 30px 6px rgb(0 0 0 / 9%); }
.board-list .board-tile .thumb { width: 100%; background: no-repeat center / cover; }
.board-list .board-tile .thumb::after { content: ""; display: block; padding-bottom: 80%; }
.board-list .board-tile .thumb.noimage { position: relative; border-bottom: 1px solid var(--color-gray-light); }
.board-list .board-tile .thumb.noimage i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; color: var(--color-gray-light); }
.board-list .board-tile .content { padding: 1rem; }
.board-list .board-tile .content .title { font-size: 1.1rem; font-weight: 500; /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ }
.board-list .board-tile .content .name { margin-top: 0.5rem; }
.board-list .board-tile .content .etc { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 300; letter-spacing: 0; color: var(--color-text-light); }

/*xl*/ @media (max-width: 1199px) {
}
/*lg*/ @media (max-width: 991px) {
    .board-list .board-tile:nth-child(n) { width: calc(100%/2 - 0.2rem); margin-right: calc(0.2rem*2/1); margin-bottom: calc(0.2rem*2/1); }
    .board-list .board-tile:nth-child(2n) { margin-right: 0; }
}
/*md*/ @media (max-width: 767px) {
    .board-list .board-tile .content { padding: 0.5rem; }
}
/*sm*/ @media (max-width: 575px) {
}

/* ï¿½ï¿½ï¿½(tile) ï¿½ï¿½ */






/* ï¿½ï¿½ï¿½(table) ï¿½ï¿½ï¿½ï¿½ */


.board-table th { white-space: nowrap; }
.board-table tbody tr { cursor: pointer; }
.board-table tbody tr:hover { background-color: var(--color-background); }
.board-table tr td.title div { max-height: 1.5rem; overflow: hidden; position: relative; color: transparent; }
.board-table tr td.title div::after { content: attr(data-text); position: absolute; top: 0; left: 0; right: 0; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-table .commentcount { text-align: right; }
.board-table .count { text-align: right; }
/*md*/ @media (max-width: 767px) {
    .board-table .commentcount { display: none; }
    .board-table .count { display: none; }
    .board-table .insertdate { display: none; }
}

/* ï¿½ï¿½ï¿½(table) ï¿½ï¿½ */








/* ï¿½ï¿½ ï¿½ï¿½ï¿½ï¿½ */

.board-view .board-info { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--color-gray-light); }
.board-view .board-info .title { font-size: 2rem; font-weight: 300; }
.board-view .board-info .name { margin-right: 0.5rem; font-weight: 500; }
.board-view .board-info .name .username { font-size: 0.75rem; color: var(--color-text-light); }
.board-view .board-info .insertdate { margin-right: 0.5rem; font-size: 0.9rem; font-weight: 300; color: var(--color-text-light); }
.board-view .board-info .count { font-size: 0.9rem; font-weight: 300; color: var(--color-text-light); }
.board-view .board-info .commentlink { margin-left: 0.5rem; font-size: 0.9rem; font-weight: 300; color: var(--color-text-light); cursor: pointer; }
.board-view .board-body { overflow: hidden; }
.board-view .board-body p { margin-bottom: 0; }
.board-view .board-body table { max-width: 100%; }
/*md*/ @media (max-width: 767px) {
    .board-view .board-info .title { font-size: 1.5rem; }
}

.board-comment { }
.board-comment .writebox_disabled { display: inline-block; margin-bottom: 1rem; padding-bottom: 0.25rem; font-size: 0.9rem; border-bottom: 1px dashed var(--color-text); cursor: pointer; transition: 0.4s; }
.board-comment .writebox_disabled:hover { color: var(--color-text-light); border-color: var(--color-text-light); }
.board-comment .writebox { margin-bottom: 2rem; text-align: right; }
.board-comment .writebox .bodytextarea { height: 150px; }
.board-comment .listbox {  }
.board-comment .listbox .summary { padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-text); }
.board-comment .listbox .summary #spnCommentCount { font-weight: 500; }
.board-comment .listbox .comment-list {  }
.board-comment .listbox .comment-list .item { padding: 2rem 1rem; }
.board-comment .listbox .comment-list .item ~ .item { border-top: 1px dashed var(--color-gray-light); }
.board-comment .listbox .comment-list .item .header { display: flex; justify-content: space-between; flex-wrap: wrap; }
.board-comment .listbox .comment-list .item .header .left .name { font-weight: 500; }
.board-comment .listbox .comment-list .item .header .left .username { margin-left: 0.25rem; font-size: 0.8rem; color: var(--color-text-light); }
.board-comment .listbox .comment-list .item .header .left .insertdate { margin-left: 0.5rem; font-size: 0.8rem; font-weight: 300; color: var(--color-text-light); }
.board-comment .listbox .comment-list .item .header .right span { font-size: 0.9rem; font-weight: 300; color: var(--color-text-light); letter-spacing: -1px; cursor: pointer; }
.board-comment .listbox .comment-list .item .header .right span:hover { color: var(--color-main); }
.board-comment .listbox .comment-list .item .header .right span ~ span { margin-left: 0.25rem; }
.board-comment .listbox .comment-list .item .body { margin-top: 0.5rem; margin-left: 1.75rem; }
.board-comment .listbox .comment-list .item .body .view { white-space: pre-wrap; }
.board-comment .listbox .comment-list .item .body .view .answerbutton { margin-left: 0.5rem; cursor: pointer; }
.board-comment .listbox .comment-list .item .body .view .answerbutton i { margin-right: 0.25rem; }
.board-comment .listbox .comment-list .item .body .edit { display: none; text-align: right; }
.board-comment .listbox .comment-list .item .body .edit textarea { height: 100px; }
.board-comment .listbox .comment-list .item .body .edit button { margin-top: 0.25rem; }
.board-comment .listbox .comment-list .item .body .edit button ~ button { margin-left: 0.25rem; }
.board-comment .listbox .comment-list .item .replytoggle { margin-top: 0.5rem; margin-left: 1.75rem; font-size: 0.9rem; color: var(--color-text-light); cursor: pointer; }
.board-comment .listbox .comment-list .item .replytoggle:hover { color: var(--color-main); }
.board-comment .listbox .comment-list .item .replytoggle i { display: inline-block; margin-left: 0.25rem; font-size: 0.75rem; transition: 0.4s; }
.board-comment .listbox .comment-list .item .replytoggle:not(.collapsed) i { transform: rotate(180deg); }
.board-comment .listbox .comment-list .item .reply { margin-top: 1rem; margin-left: 1.75rem; }
.board-comment .listbox .comment-list .item .reply .replywritebox_disabled { display: inline-block; margin-bottom: 1rem; padding-bottom: 0.25rem; font-size: 0.9rem; border-bottom: 1px dashed var(--color-text); cursor: pointer; }
.board-comment .listbox .comment-list .item .reply .replywritebox_disabled:hover { color: var(--color-text-light); border-color: var(--color-text-light); }
.board-comment .listbox .comment-list .item .reply .replywritebox { text-align: right; }
.board-comment .listbox .comment-list .item .reply .replywritebox .bodytextarea { height: 70px; }
.board-comment .listbox .comment-list .item .reply .reply-list .item { padding: 0.75rem 0; }
.board-comment .listbox .comment-list .item .reply .reply-loadmore { margin-top: 0.5rem; border-radius: 10rem; }
.board-comment .listbox .noitem { margin-top: 0.75rem; }
/*sm*/ @media (max-width: 575px) {
    .board-comment .listbox .comment-list .item { padding: 1.5rem 1rem; }
    .board-comment .listbox .comment-list .item .reply .reply-list .item { padding: 0.5rem 0; }
}

.adminmemo { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--color-gray-light); }
.adminmemo#divAdminMemo_Admin #txtaAdminMemo { height: 200px; }
.adminmemo#divAdminMemo_Admin .button-area { text-align: right; }
.adminmemo#divAdminMemo_User .admin-badge { margin-right: 0.5rem; }
.adminmemo#divAdminMemo_User .admin-badge .name { margin-right: 0.25rem; font-size: 0.8rem; font-weight: 500; }
.adminmemo#divAdminMemo_User .insertdate { font-weight: 300; }
.adminmemo#divAdminMemo_User .adminmemo-body { margin-top: 0.5rem; white-space: pre-wrap; }

/* ï¿½ï¿½ ï¿½ï¿½ */







/* ï¿½Ì¹ï¿½ï¿½ï¿½ Ã·ï¿½ï¿½ ï¿½ï¿½ï¿½ë¿µï¿½ï¿½ ï¿½ï¿½ï¿½ï¿½ */

.photoupload { padding: 1rem; margin-bottom: 0.5rem; border: 1px solid var(--color-gray-light); border-radius: 0.25rem; }
.photoupload.photo-invalid { border-color: #dc3545; }
.photoupload.photo-invalid .title { background: no-repeat right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='18' height='18' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); }
.photoupload .title { padding-bottom: 0.25rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--color-gray-light); }
.photoupload .body .list { display: flex; flex-wrap: wrap; }
.photoupload .body .list .item { position: relative; width: 100%; border: 1px solid var(--color-gray-light); background: no-repeat center / cover; overflow: hidden; cursor: grab; }
.photoupload .body .list .item:after { content: ""; display: block; padding-bottom: 80%; }
.photoupload .body .list .item.addnew { display: flex; justify-content: center; align-items: center; color: var(--color-gray-light); font-size: 3rem; border-style: dashed; cursor: pointer; }
.photoupload .body .list .item .trash { position: absolute; width: 100%; bottom: 0; transform: translateY(100%); padding: 0.25rem 0; text-align: center; color: var(--color-red); background-color: rgba(0, 0, 0, 0.5); cursor: pointer; transition: all 0.4s; }
.photoupload .body .list .item:hover .trash { transform: translateY(0); }
.photoupload .imagefileinput { display: none; }

/* ï¿½Ì¹ï¿½ï¿½ï¿½ Ã·ï¿½ï¿½ ï¿½ï¿½ï¿½ë¿µï¿½ï¿½ ï¿½ï¿½ */









/* ï¿½ï¿½ï¿½ï¿½ï¿½Ä±ï¿½ ï¿½Û¼ï¿½ ï¿½ï¿½Ç°ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ï¿½ï¿½ */

.productselect-area { padding: 1rem; margin-bottom: 0.5rem; border: 1px solid var(--color-gray-light); border-radius: 0.25rem; }
.productselect-area .header { display: flex; gap: 1rem; margin-bottom: 1rem; }
.productselect-area .header .title {  }
.productselect-area .header .buttons { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.productselect-area .header .buttons .button { cursor: pointer; transition: 0.4s; }
.productselect-area .header .buttons .button:hover { opacity: 0.7; }
.productselect-area .header .buttons .button.select { color: var(--color-main); }
.productselect-area .header .buttons .button.remove { color: var(--color-red); }
.productselect-area .header .buttons .button i { margin-right: 0.1rem; }
.productselect-area .body .selectedproduct { display: flex; align-items: center; min-height: 100px; padding: 0.5rem; border: 1px dashed var(--color-gray-light); border-radius: 0.25rem; }
.productselect-area .body .selectedproduct .product { display: flex; align-items: center; }
.productselect-area .body .selectedproduct .product .thumb { flex: 1; max-width: 80px; background: no-repeat center / cover; border: 1px solid var(--color-gray-light); }
.productselect-area .body .selectedproduct .product .text { flex: 2; padding: 0 0.5rem; }
.productselect-area .body .selectedproduct .product .text p { margin-bottom: 0; }
.productselect-area .body .selectedproduct .product .text p.categoryname { font-size: 0.9rem; color: var(--color-text-light); }
.productselect-area .body .selectedproduct .product .text p.title { font-weight: 500; }
.productselect-area .body .selectedproduct .product .text p.title i { margin-left: 0.5rem; cursor: pointer; }
.productselect-area .body .selectedproduct .product .text p.icon .badge { color: var(--color-main-dark); background-color: #fff; border: 1px solid var(--color-main-dark); }
.productselect-area .body .selectedproduct .noproduct { color: var(--color-text-light); }

#divModalProduct #divSearchBox { display: flex; align-items: center; border: 1px solid var(--color-gray-light); border-radius: 0.25rem; }
#divModalProduct #divSearchBox #iptSearchInput { border: 0; }
#divModalProduct #divSearchBox #iSearchButton { margin: 0 1rem; font-size: 1rem; cursor: pointer; }
#divModalProduct #divSearchBox #iSearchButton:hover { color: var(--color-main); }
#divModalProduct .productlist { height: 100%; padding: 0.5rem; overflow: auto; border: 1px solid var(--color-gray-light); border-radius: 0.25rem; }
#divModalProduct .productlist .product { display: flex; align-items: center; }
#divModalProduct .productlist .product ~ .product { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--color-gray-light); }
#divModalProduct .productlist .product .thumb { flex: 1; max-width: 80px; background: no-repeat center / cover; border: 1px solid var(--color-gray-light); }
#divModalProduct .productlist .product .text { flex: 2; padding: 0 0.5rem; }
#divModalProduct .productlist .product .text p { margin-bottom: 0; }
#divModalProduct .productlist .product .text p.categoryname { font-size: 0.75rem; color: var(--color-text-light); }
#divModalProduct .productlist .product .text p.title { font-weight: 500; }
#divModalProduct .productlist .product .text p.title i { margin-left: 0.5rem; cursor: pointer; }
#divModalProduct .productlist .product .text p.icon .badge { color: var(--color-main-dark); background-color: #fff; border: 1px solid var(--color-main-dark); }

/* ï¿½ï¿½ï¿½ï¿½ï¿½Ä±ï¿½ ï¿½Û¼ï¿½ ï¿½ï¿½Ç°ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ */






/* ï¿½ï¿½ï¿½ï¿½ï¿½Ä±ï¿½ ï¿½ï¿½ ï¿½ï¿½Ç°ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ï¿½ï¿½ */

.productview-area { margin-top: 1rem; padding: 1rem; font-size: 1rem; background-color: var(--color-background); border: 1px solid var(--color-gray-light); border-radius: 1rem; cursor: pointer; transition: 0.4s; }
.productview-area:hover { opacity: 0.7; }
.productview-area .header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9rem; }
.productview-area .header i { -webkit-text-stroke: 0.5px; }
.productview-area .content {  }
.productview-area .content .product { display: flex; align-items: center; }
.productview-area .content .product .thumb { flex: 1; max-width: 80px; background: no-repeat center / cover; border: 1px solid var(--color-gray-light); }
.productview-area .content .product .text { flex: 2; padding: 0 0.5rem; }
.productview-area .content .product .text p { margin-bottom: 0; }
.productview-area .content .product .text p.categoryname { font-size: 0.9rem; color: var(--color-text-light); }
.productview-area .content .product .text p.productname { font-weight: 500; }
.productview-area .content .product .text p.productname i { margin-left: 0.5rem; cursor: pointer; }
.productview-area .content .product .text p.producticon .badge { color: var(--color-main-dark); background-color: #fff; border: 1px solid var(--color-main-dark); }

/* ï¿½ï¿½ï¿½ï¿½ï¿½Ä±ï¿½ ï¿½ï¿½ ï¿½ï¿½Ç°ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ */







/* 1:1ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ï¿½ï¿½ */

#divQnaKakaoMessage .description { margin-top: 0.25rem; text-align: right; font-size: 0.8rem; color: var(--color-text-light); }


/* 1:1ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ */






/* ï¿½Ï´ï¿½ ï¿½ï¿½Æ°ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ï¿½ï¿½ */

.bottombuttons { margin-top: 1rem; text-align: right; }

/* ï¿½Ï´ï¿½ ï¿½ï¿½Æ°ï¿½ï¿½ï¿½ï¿½ ï¿½ï¿½ */