/* common */
.dark-mode * {color:var(--color-gray-300);}
.dark-mode *:focus-visible {outline:2px solid var(--color-white);}
.dark-mode .disabled {border-color:var(--color-black-300) !important; background:var(--color-black-600) !important;}
.dark-mode .disabled > * {border-color:var(--color-black-300) !important;}
.dark-mode .readonly {border-color:var(--color-black-300) !important;}
.dark-mode .readonly > * {border-color:var(--color-black-300) !important;}

/* icon-box */
.dark-mode .icon {filter:invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);}
.dark-mode .icon-like {filter:var(--filter-active-100);}

/* input-box */
.dark-mode .input-box {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .input-box input {color:var(--color-white);}
.dark-mode .input-box input::placeholder {color:var(--color-gray-500);}
.dark-mode .input-box input[type=date]:before,
.dark-mode .input-box input[type=datetime-local]:before,
.dark-mode .input-box input[type=month]:before{background:var(--color-black-500);}
.dark-mode .input-box input[type=date]:after,
.dark-mode .input-box input[type=datetime-local]:after,
.dark-mode .input-box input[type=month]:after {filter:invert(71%) sepia(4%) saturate(13%) hue-rotate(103deg) brightness(86%) contrast(86%);}
.dark-mode .input-box.disabled {background:var(--color-black-600) !important;}
.dark-mode .input-box.disabled input {color:var(--color-gray-800) !important;}
.dark-mode .input-box.readonly {background:var(--color-black-600) !important;}
.dark-mode .input-box.readonly input {color:var(--color-gray-800) !important;}

/* quantity-box */
.dark-mode .quantity-box {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .quantity-box .quantity-btn {background-color:var(--color-black-500);}
.dark-mode .quantity-box .quantity-btn:after {filter:var(--filter-white);}
.dark-mode .quantity-box .quantity-btn.disabled {background:var(--color-black-500) !important;}
.dark-mode .quantity-box .quantity-btn.disabled:after {filter:var(--filter-gray-800);}

/* textarea-box */
.dark-mode .textarea-box textarea {background:var(--color-black-500); border-color:var(--color-black-300); color:var(--color-white) !important;}
.dark-mode .textarea-box textarea:disabled {background:var(--color-black-600);}

/* select-box */
.dark-mode .select-box {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .select-box select {color:var(--color-white); background-image:url('../images/icon_select_white.svg');}
.dark-mode .select-box select option {background:var(--color-black-400); color:var(--color-gray-300) !important;}
.dark-mode .select-box select option:disabled {background:var(--color-black-600); color:var(--color-gray-800) !important;}
.dark-mode .select-box select optgroup {background:var(--color-black-500); color:var(--color-gray-300) !important;}

/* check-box */
.dark-mode .check-box label:before {background-image:url('../images/icon_check_darkmode.svg');}
.dark-mode .check-box label span {color:var(--color-gray-300);}
.dark-mode .check-box input:disabled ~ label:before {background-image:url('../images/icon_check_disabled_darkmode.svg');}
.dark-mode .check-box input:disabled ~ label span {color:var(--color-gray-700) !important;}
.dark-mode .check-box input:checked ~ label span {color:var(--color-white) !important;}
.dark-mode .check-box input:disabled:checked ~ label:before {background-image:url('../images/icon_check_on_disabled_darkmode.svg');}
.dark-mode .check-box input:disabled:checked ~ label span {color:var(--color-gray-700) !important;}

/* radio-box */
.dark-mode .radio-box label:before {background-image:url('../images/icon_radio_darkmode.svg');}
.dark-mode .radio-box label p {color:var(--color-gray-300);}
.dark-mode .radio-box input:disabled ~ label:before {background-image:url('../images/icon_radio_disabled_darkmode.svg');}
.dark-mode .radio-box input:disabled ~ label span {color:var(--color-gray-700) !important;}
.dark-mode .radio-box input:checked ~ label span {color:var(--color-white) !important;}
.dark-mode .radio-box input:disabled:checked ~ label:before {background-image:url('../images/icon_radio_on_disabled_darkmode.svg');}
.dark-mode .radio-box input:disabled:checked ~ label span {color:var(--color-gray-700) !important;}

/* switch-box */
.dark-mode .switch-box label {background:var(--color-black-500);}
.dark-mode .switch-box input:disabled ~ label {background:var(--color-black-300);}
.dark-mode .switch-box input:disabled ~ label span {background:var(--color-black-500);}

/* star-box */
.dark-mode .star-box .star label:after {filter:var(--filter-black-500);}
.dark-mode .star-box .star.active label:after {filter:var(--filter-active-100)}

/* file-box */
.dark-mode .file-box .file-name {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .file-box .file-name.success p {color:var(--color-white)}
.dark-mode .file-box .file-select input:focus-visible ~ label .button-box .btn {outline:2px solid var(--color-white);}
.dark-mode .file-box .file-button .file-btn {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .file-box .file-button .file-btn:after {filter:var(--filter-white);}

/* file-image-box */
.dark-mode .file-image-box label {background-color:var(--color-black-500);}
.dark-mode .file-image-box label:after {filter:var(--filter-white);}
.dark-mode .file-image-box input:focus-visible ~ label {outline:2px solid var(--color-white);}
.dark-mode .file-image-box .file-list li {border-color:var(--color-black-300);}

/* file-list-box */
.dark-mode .file-list-box > ul > li .list-inner {background:var(--color-black-600); border-color:var(--color-black-300);}
.dark-mode .file-list-box > ul > li .list-inner:hover {background:var(--color-black-700);}
.dark-mode .file-list-box > ul > li .list-inner:before {filter:var(--filter-gray-300);}
.dark-mode .file-list-box > ul > li .list-inner .download:after {filter:var(--filter-gray-300);}
.dark-mode .file-list-box > ul > li .list-inner .preview:after {filter:var(--filter-gray-300);}

/* dropdown-box */
.dark-mode .dropdown-box .dropdown-inner > ul {background:var(--color-black-500); border-color:var(--color-black-300); box-shadow:0 0 10px rgba(0,0,0,0.8);}
.dark-mode .dropdown-box .dropdown-inner > ul > li > .more:hover {background:var(--color-black-300); color:var(--color-gray-300);}

/* dropmenu-box */
.dark-mode .dropmenu-box ul {background:var(--color-black-500); box-shadow:0 0 10px rgba(0,0,0,0.8); border:1px solid var(--color-black-300);} 
.dark-mode .dropmenu-box ul li:hover > *:not(.inner) {background:var(--color-black-600);}
.dark-mode .dropmenu-box ul li:hover > * > p {color:var(--color-gray-300);}
.dark-mode .dropmenu-box ul li.active > *:not(.inner) {background:var(--color-active2);}
.dark-mode .dropmenu-box ul.drop-right > li > .more:after {filter:var(--filter-gray-500);}
.dark-mode .dropmenu-box ul.drop-left > li > .more:before {filter:var(--filter-gray-500);}

/* share-box */
.dark-mode .share-box .icon-share {background:var(--color-black-200); filter:none;}
.dark-mode .share-box .icon-share:after {filter:var(--filter-white);}
.dark-mode .share-box ul li button span {color:var(--color-white);}

/* tab-box */
.dark-mode .tab-box.tab1 > ul > li > .tab {background:var(--color-black-500); color:var(--color-black-100); border-bottom-color:var(--color-black-300);}
.dark-mode .tab-box.tab1 > ul > li > .tab:hover {background:var(--color-black-600); color:var(--color-black-200);}
.dark-mode .tab-box.tab1 > ul > li > .tab.active {background-color:var(--color-active); color:var(--colot-white);}
.dark-mode .tab-box.tab2 > ul > li > .tab {background:var(--color-black-500); color:var(--color-black-100); border-color:var(--color-black-300);}
.dark-mode .tab-box.tab2 > ul > li > .tab:hover {background:var(--color-black-600); color:var(--color-black-200);}
.dark-mode .tab-box.tab2 > ul > li > .tab.active {background:var(--color-active); color:var(--color-white); border-color:var(--color-active);}
.dark-mode .tab-box.tab3 > ul > li > .tab {background:var(--color-black-500); color:var(--color-black-100); border-color:var(--color-black-300);}
.dark-mode .tab-box.tab3 > ul > li > .tab:hover {background:var(--color-black-600); color:var(--color-black-200);}
.dark-mode .tab-box.tab3 > ul > li > .tab.active {background:var(--color-active); color:var(--color-white); border-color:var(--color-active);}

/* category-box */
.dark-mode .category-box .category1 > li > .cate {background:var(--color-black-500); color:var(--color-gray-500); border-color:var(--color-black-300);}
.dark-mode .category-box .category1 > li.active > .cate {background-color:var(--color-active); color:var(--color-white); border-color:var(--color-active);}

/* toast-box */
.dark-mode .toast-box .box {background:var(--color-black-700);}
.dark-mode .toast-box .toast-head {border-color:var(--color-black-300);}
.dark-mode .toast-box .toast-head .toast-progress {background:var(--color-white);}

/* modal-box */
.dark-mode .modal-box .box {background:var(--color-black-700);}
.dark-mode .modal-box .box .modal-head {border-color:var(--color-black-300);}
.dark-mode .modal-box .box .modal-head .close {filter:var(--filter-white);}
.dark-mode .modal-box .box .modal-body .modal-body-text p {color:var(--color-gray-400);}
.dark-mode .modal-box .box .modal-body .modal-body-list ul li {border-color:var(--color-black-300);}
.dark-mode .modal-box .box .modal-body .modal-body-list ul li .link {color:var(--color-gray-400);}
.dark-mode .modal-box .box .modal-body .modal-body-list ul li .link:hover {background:var(--color-black-500);}

/* paging-box */
.dark-mode .paging-box ul li a {color:var(--color-gray-400);}
.dark-mode .paging-box ul li p {color:var(--color-gray-400);}
.dark-mode .paging-box ul li.pg *:after {filter:var(--filter-gray-400);}
.dark-mode .paging-box ul li.disabled.pg *:after {filter:var(--filter-gray-700);}

/* table-box */
.dark-mode .table-box table {border:0;}
.dark-mode .table-box table thead tr th {background:var(--color-active3); border:1px solid var(--color-black-200);}
.dark-mode .table-box table tbody tr td {background:var(--color-black-300); border-color:var(--color-black-500);}
.dark-mode .table-box table tbody tr:nth-of-type(even) td {background:var(--color-black-400);}
.dark-mode .table-box table tbody tr:hover td {background:var(--color-black-700);}

/* terms-box */
.dark-mode .terms-box {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .terms-box .terms-head {background:var(--color-black-600); border-color:var(--color-black-300);}
.dark-mode .terms-box .terms-body > ul > li > p {color:var(--color-gray-500);}
.dark-mode .terms-box .terms-body > ul > li ul li {color:var(--color-gray-500);}
.dark-mode .terms-box .terms-body > ul > li ul.inner li:before {background:var(--color-gray-500);}

/* marker-box */
.dark-mode .marker-box {background:var(--color-black-600);}
.dark-mode .marker-box .marker-content {border-color:var(--color-black-300);}
.dark-mode .marker-box .marker-content .content-subject .close {filter:var(--filter-white);}
.dark-mode .marker-box .marker-content .content-detail ul li:before {filter:var(--filter-gray-500);}
.dark-mode .marker-box .marker-content .content-detail ul li p {color:var(--color-gray-500);}

/* list-none-box */
.dark-mode .list-none-box {background:var(--color-black-500); border-bottom-color:var(--color-black-300);}
.dark-mode .list-none-box p {color:var(--color-gray-500);}

/* board-search-box */
.dark-mode .board-search-box {background:var(--color-black-600); border-color:var(--color-black-300);}

/* board-recommend-box */
.dark-mode .board-recommend-box ul {background:var(--color-black-400); border:1px solid var(--color-black-300);}
.dark-mode .board-recommend-box ul li button {color:var(--color-gray-300);}
.dark-mode .board-recommend-box ul li button.active {color:var(--color-active);}

/* board-list-box */
.dark-mode .board-list-box table thead tr th {background:var(--color-black-500); border-color:var(--color-black-400);}
.dark-mode .board-list-box table tbody tr {background:var(--color-black-400); border-color:var(--color-black-300);}
.dark-mode .board-list-box table tbody tr td {background:var(--color-black-300); border-color:var(--color-black-200);}
@media (max-width:991px){
.dark-mode .board-list-box table tbody tr td {color:var(--color-gray-600);}
.dark-mode .board-list-box table tbody tr td.subject-cell .subject-tit {color:var(--color-white);}
}

/* board-faq-box */
.dark-mode .board-faq-box > ul > li {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .board-faq-box > ul > li .faq-head button:after {filter:var(--filter-gray-300);}
.dark-mode .board-faq-box > ul > li .faq-head button .subject {color:var(--color-gray-300);}
.dark-mode .board-faq-box > ul > li .faq-body {background:var(--color-black-600); border-color:var(--color-black-300);}
.dark-mode .board-faq-box > ul > li.active .faq-head button:after {filter:var(--filter-active-100);}
.dark-mode .board-faq-box > ul > li.active .faq-head button .subject {text-decoration:underline; color:var(--color-white);}

/* board-gallery-box */
.dark-mode .board-gallery-box > ul > li {border-color:var(--color-black-300);}
.dark-mode .board-gallery-box > ul > li .more {background:var(--color-black-500);}
.dark-mode .board-gallery-box > ul > li .more .list-image {border-color:var(--color-black-300);}
.dark-mode .board-gallery-box > ul > li .more .list-content .text {color:var(--color-gray-600);}
.dark-mode .board-gallery-box > ul > li .more .list-content .detail > li {color:var(--color-gray-600);}

/* board-webzine-box */
.dark-mode .board-webzine-box > ul > li {border-color:var(--color-black-300);}
.dark-mode .board-webzine-box > ul > li .more {background:var(--color-black-500);}
.dark-mode .board-webzine-box > ul > li .more .list-content .text {color:var(--color-gray-600);}
.dark-mode .board-webzine-box > ul > li .more .list-content .detail > li {color:var(--color-gray-600);}

/* board-map-box */
.dark-mode .board-map-box {background:var(--color-black-500);}
.dark-mode .board-map-box .map-list > ul > li {border-color:var(--color-black-300);}
.dark-mode .board-map-box .map-list > ul > li .more .list-image {border-color:var(--color-black-200);}
.dark-mode .board-map-box .map-list > ul > li .more .list-content ul li:before {filter:var(--filter-gray-500);}
.dark-mode .board-map-box .map-list > ul > li .more .list-content ul li p {color:var(--color-gray-500);}
.dark-mode .board-map-box .map-list > ul > li .more:hover {background:var(--color-black-400);}

/* board-write-box */
.dark-mode .board-write-box table tbody tr > * {border-color:var(--color-black-300);}
.dark-mode .board-write-box table tbody tr th {background:var(--color-black-700); border-color:var(--color-black-400);}
.dark-mode .board-write-box table tbody tr td {background:var(--color-black-600);}

/* board-view-box */
.dark-mode .board-view-box {background:var(--color-black-500);}
.dark-mode .board-view-box .view-head {border-color:var(--color-black-300);}
.dark-mode .board-view-box .view-head .head-info ul li {color:var(--color-gray-600);}
.dark-mode .board-view-box .view-body .view-body-content {border-color:var(--color-black-300);}
.dark-mode .board-view-box .view-body .view-body-content p {color:var(--color-gray-500);}
.dark-mode .board-view-box .view-body .view-body-content * {color:var(--color-gray-500) !important;}
.dark-mode .board-view-box .view-body .view-body-link {border-color:var(--color-black-300);}
.dark-mode .board-view-box .view-body .view-body-list > ul {border-color:var(--color-black-300);}
.dark-mode .board-view-box .view-body .view-body-list > ul > li {border-color:var(--color-black-300);}
.dark-mode .board-view-box .view-body .view-body-list > ul > li:last-of-type {border:0;}
.dark-mode .board-view-box .view-body .view-body-map .map-inner .map-right {border-color:var(--color-black-300);}
.dark-mode .board-view-box .view-body .view-body-map .map-inner .map-right ul li:before {filter:var(--filter-gray-500);}
.dark-mode .board-view-box .view-body .view-body-map .map-inner .map-right ul li p {color:var(--color-gray-500);}

/* board-comment-box */
.dark-mode .board-comment-box .comment-count h4 {color:var(--color-white);}
.dark-mode .board-comment-box .comment-list {background:var(--color-black-500);}
.dark-mode .board-comment-box .comment-list > ul > li {border-color:var(--color-black-300);}
.dark-mode .board-comment-box .comment-list > ul > li .cmt-head {border-color:var(--color-black-300);}
.dark-mode .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text p {color:var(--color-gray-500);}
.dark-mode .board-comment-box .comment-list > ul > li .cmt-foot > ul {border-color:var(--color-black-300);}
.dark-mode .board-comment-box .comment-list > ul > li .cmt-foot > ul > li {border-color:var(--color-black-300);}
@media (max-width:991px){
.dark-mode .board-comment-box .comment-list > ul > li .cmt-body .cmt-body-text .cmt-more:after {color:var(--color-gray-300);}
}

/* swiper-gallery-box */
.dark-mode .swiper-gallery-box .swiper-button-prev {filter:var(--filter-white);}
.dark-mode .swiper-gallery-box .swiper-button-next {filter:var(--filter-white);}

/* chat-list-box */
.dark-mode .chat-list-box .list-body {background:var(--color-black-500); border-color:var(--color-black-300);}
.dark-mode .chat-list-box .list-body > ul > li {border-color:var(--color-black-300);}
.dark-mode .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-text p {filter:var(--filter-gray-500);}
.dark-mode .chat-list-box .list-body > ul > li > .more .chat-content .content-left .left-subject .icon {filter:var(--filter-gray-300);}
.dark-mode .chat-list-box .list-body > ul > li > label.more .chat-content:after {background-image:url('../images/icon_check_darkmode.svg');}
.dark-mode .chat-list-box .list-body > ul > li > input:checked ~ label.more .chat-content:after {background-image:url('../images/icon_check_on.svg');}
.dark-mode .chat-list-box .list-search {background:var(--color-black-600); border-color:var(--color-black-300);}

/* chat-view-box */
.dark-mode .chat-view-box .view-body {background:var(--color-black-500); border-color:var(--color-black-300);} 
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-text .text {background:var(--color-black-300); color:var(--color-gray-300); border-color:var(--color-black-200);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-text .text:before {background:var(--color-black-300); border-color:var(--color-black-200);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-text .text a {color:var(--color-cyan);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-date time {color:var(--color-gray-500);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-file .inner {background:var(--color-black-300); border-color:var(--color-black-200);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-info {color:var(--color-gray-500);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-file .inner .inner-content .file-download .download {color:var(--color-cyan);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-file .inner:after {filter:var(--filter-gray-300);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-link .link {background:var(--color-black-300); border-color:var(--color-black-200);}
.dark-mode .chat-view-box .view-body > ul > li .chat-content .chat-link .link .link-content .link-info {color:var(--color-gray-500);}
.dark-mode .chat-view-box .view-body > ul > li.mine .chat-content .chat-text .text {background:var(--color-active); border-color:var(--color-active);}
.dark-mode .chat-view-box .view-body > ul > li.mine .chat-content .chat-text .text:before {background:var(--color-active); border-color:var(--color-active);}
.dark-mode .chat-view-box .view-body > ul > li.mine .chat-content .chat-text .text a {color:var(--color-light-active);}
.dark-mode .chat-view-box .view-body > .time-line .time {background:var(--color-active3);}
.dark-mode .chat-view-box .view-body > .time-line .time:before {filter:var(--filter-gray-300);}
.dark-mode .chat-view-box .view-foot {background:var(--color-black-600); border-color:var(--color-black-300);} 
.dark-mode .chat-view-box .view-foot .view-bottom .icon {filter:var(--filter-gray-300);}
.dark-mode .chat-view-box .view-search {background:var(--color-black-600); border-color:var(--color-black-300);}