/*!
 * dark_preview.css - Global Dark Mode Stylesheet
 * Covers Header, Main Center Cards, Side Menu, Footer, and Mobile Menus.
 * Applied via html.theme-dark, body.theme-dark, or [data-theme="dark"].
 */

/* ==========================================================================
   1. Global Background & Text
   ========================================================================== */
html.theme-dark,
html.theme-dark body,
body.theme-dark,
body[data-theme="dark"],
html.theme-dark #thema_wrapper,
html.theme-dark #st-body {
    background-color: #121214 !important;
    color: #e2e8f0 !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html.theme-dark a,
body.theme-dark a,
body[data-theme="dark"] a {
    color: #93c5fd;
}

html.theme-dark a:hover,
html.theme-dark a:focus,
body.theme-dark a:hover,
body.theme-dark a:focus,
body[data-theme="dark"] a:hover,
body[data-theme="dark"] a:focus {
    color: #60a5fa;
}

/* ==========================================================================
   2. Topbar, Header & Navigation
   ========================================================================== */
html.theme-dark #st-body .topbar,
body.theme-dark #st-body .topbar,
body[data-theme="dark"] #st-body .topbar {
    background-color: #18181d !important;
    border-bottom: 1px solid #272730 !important;
}

html.theme-dark #st-body .topbar .btn-nav,
body.theme-dark #st-body .topbar .btn-nav,
body[data-theme="dark"] #st-body .topbar .btn-nav {
    color: #a1a1aa !important;
    background: transparent !important;
    border-left: 1px solid #272730 !important;
    border-right: 1px solid #272730 !important;
}

html.theme-dark #st-body .topbar .btn-nav:hover,
body.theme-dark #st-body .topbar .btn-nav:hover,
body[data-theme="dark"] #st-body .topbar .btn-nav:hover {
    color: #f4f4f5 !important;
    background-color: #22222a !important;
}

html.theme-dark #st-body .pcbar,
body.theme-dark #st-body .pcbar,
body[data-theme="dark"] #st-body .pcbar {
    background-color: #141417 !important;
}

html.theme-dark #st-body .pcbar .brand a,
body.theme-dark #st-body .pcbar .brand a,
body[data-theme="dark"] #st-body .pcbar .brand a {
    color: #f4f4f5 !important;
}

html.theme-dark #st-body .navbar,
body.theme-dark #st-body .navbar,
body[data-theme="dark"] #st-body .navbar {
    background-color: #1e1e24 !important;
    border-color: #272730 !important;
}

html.theme-dark #st-body .navbar-nav a,
body.theme-dark #st-body .navbar-nav a,
body[data-theme="dark"] #st-body .navbar-nav a {
    color: #d1d5db !important;
}

html.theme-dark #st-body .navbar-nav > li > a:hover,
html.theme-dark #st-body .navbar-nav > .active > a,
body.theme-dark #st-body .navbar-nav > li > a:hover,
body.theme-dark #st-body .navbar-nav > .active > a,
body[data-theme="dark"] #st-body .navbar-nav > li > a:hover,
body[data-theme="dark"] #st-body .navbar-nav > .active > a {
    color: #ffffff !important;
    background-color: #282832 !important;
}

/* PC Navigation Dropdown Sub-menus */
html.theme-dark .pc-menu .nav-top .sub-1div,
body.theme-dark .pc-menu .nav-top .sub-1div,
body[data-theme="dark"] .pc-menu .nav-top .sub-1div {
    background-color: #1e1e24 !important;
    border-top: 3px solid #3b82f6 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

html.theme-dark .pc-menu .nav-top .sub-1div::before,
body.theme-dark .pc-menu .nav-top .sub-1div::before,
body[data-theme="dark"] .pc-menu .nav-top .sub-1div::before {
    border-bottom-color: #3b82f6 !important;
}

html.theme-dark .pc-menu .nav-top .sub-1da,
body.theme-dark .pc-menu .nav-top .sub-1da,
body[data-theme="dark"] .pc-menu .nav-top .sub-1da {
    background-color: #1e1e24 !important;
    color: #d1d5db !important;
    border-bottom: 1px solid #2d2d38 !important;
}

html.theme-dark .pc-menu .nav-top .sub-1dli.on .sub-1da,
html.theme-dark .pc-menu .nav-top .sub-1dli:hover .sub-1da,
body.theme-dark .pc-menu .nav-top .sub-1dli.on .sub-1da,
body.theme-dark .pc-menu .nav-top .sub-1dli:hover .sub-1da,
body[data-theme="dark"] .pc-menu .nav-top .sub-1dli.on .sub-1da,
body[data-theme="dark"] .pc-menu .nav-top .sub-1dli:hover .sub-1da {
    background-color: #282832 !important;
    color: #ffffff !important;
}

/* 2차 서브메뉴 (.sub-2div) 및 링크 */
html.theme-dark .pc-menu .nav-top .sub-2div,
body.theme-dark .pc-menu .nav-top .sub-2div,
body[data-theme="dark"] .pc-menu .nav-top .sub-2div {
    background-color: #1e1e24 !important;
    border: 1px solid #2e2e3a !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6) !important;
}

html.theme-dark .pc-menu .nav-top .sub-2da,
body.theme-dark .pc-menu .nav-top .sub-2da,
body[data-theme="dark"] .pc-menu .nav-top .sub-2da {
    background-color: #1e1e24 !important;
    color: #d1d5db !important;
    border-bottom: 1px solid #2d2d38 !important;
}

html.theme-dark .pc-menu .nav-top .sub-2dli.on .sub-2da,
html.theme-dark .pc-menu .nav-top .sub-2dli:hover .sub-2da,
body.theme-dark .pc-menu .nav-top .sub-2dli.on .sub-2da,
body.theme-dark .pc-menu .nav-top .sub-2dli:hover .sub-2da,
body[data-theme="dark"] .pc-menu .nav-top .sub-2dli.on .sub-2da,
body[data-theme="dark"] .pc-menu .nav-top .sub-2dli:hover .sub-2da {
    background-color: #282832 !important;
    color: #ffffff !important;
    border-color: #282832 !important;
}

/* 서브메뉴 그룹 구분선 (.sub-1line, .sub-2line) */
html.theme-dark .pc-menu .nav-top .sub-1line,
html.theme-dark .pc-menu .nav-top .sub-2line,
body.theme-dark .pc-menu .nav-top .sub-1line,
body.theme-dark .pc-menu .nav-top .sub-2line,
body[data-theme="dark"] .pc-menu .nav-top .sub-1line,
body[data-theme="dark"] .pc-menu .nav-top .sub-2line {
    background-color: #25252e !important;
    color: #a1a1aa !important;
    border-bottom: 1px solid #2e2e3a !important;
}

/* OpMenu 대형 카테고리 드롭다운 (소제목 바 & 구분선 & 배지) */
html.theme-dark .pc-menu .nav-top .sub-1div [style*="#f1f1f1"],
html.theme-dark .pc-menu .nav-top .sub-1div ul.sub-1dul > div > div:first-child,
body.theme-dark .pc-menu .nav-top .sub-1div [style*="#f1f1f1"],
body.theme-dark .pc-menu .nav-top .sub-1div ul.sub-1dul > div > div:first-child,
body[data-theme="dark"] .pc-menu .nav-top .sub-1div [style*="#f1f1f1"],
body[data-theme="dark"] .pc-menu .nav-top .sub-1div ul.sub-1dul > div > div:first-child {
    background-color: #282832 !important;
    border-bottom: 1px solid #3e3e4d !important;
    font-weight: bold !important;
}

html.theme-dark .pc-menu .nav-top .sub-1div div[style*="border-top: 2px solid black"],
body.theme-dark .pc-menu .nav-top .sub-1div div[style*="border-top: 2px solid black"],
body[data-theme="dark"] .pc-menu .nav-top .sub-1div div[style*="border-top: 2px solid black"] {
    border-top: 2px solid #2e2e3a !important;
}

html.theme-dark .pc-menu .nav-top .sub-1div .badge,
body.theme-dark .pc-menu .nav-top .sub-1div .badge,
body[data-theme="dark"] .pc-menu .nav-top .sub-1div .badge {
    background-color: #272730 !important;
    color: #94a3b8 !important;
}

html.theme-dark .pc-menu .nav-top .sub-1dli:hover .badge,
body.theme-dark .pc-menu .nav-top .sub-1dli:hover .badge,
body[data-theme="dark"] .pc-menu .nav-top .sub-1dli:hover .badge {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* PC 전체 메뉴 레이어 (.pc-menu-all) */
html.theme-dark .pc-menu-all,
body.theme-dark .pc-menu-all,
body[data-theme="dark"] .pc-menu-all {
    background-color: #141417 !important;
    box-shadow: inset 0px -10px 10px -10px rgba(0, 0, 0, 0.6) !important;
}

html.theme-dark .pc-menu-all .table td,
body.theme-dark .pc-menu-all .table td,
body[data-theme="dark"] .pc-menu-all .table td {
    background-color: #1e1e24 !important;
    border-color: #2e2e3a !important;
}

html.theme-dark .pc-menu-all .menu-a,
body.theme-dark .pc-menu-all .menu-a,
body[data-theme="dark"] .pc-menu-all .menu-a {
    background-color: #282832 !important;
    color: #f1f5f9 !important;
    border-bottom: 1px solid #3e3e4d !important;
}

html.theme-dark .pc-menu-all .sub-1dli .sub-1da,
body.theme-dark .pc-menu-all .sub-1dli .sub-1da,
body[data-theme="dark"] .pc-menu-all .sub-1dli .sub-1da {
    color: #d1d5db !important;
}

html.theme-dark .pc-menu-all .sub-1dli.on .sub-1da,
html.theme-dark .pc-menu-all .sub-1dli:hover .sub-1da,
body.theme-dark .pc-menu-all .sub-1dli.on .sub-1da,
body.theme-dark .pc-menu-all .sub-1dli:hover .sub-1da,
body[data-theme="dark"] .pc-menu-all .sub-1dli.on .sub-1da,
body[data-theme="dark"] .pc-menu-all .sub-1dli:hover .sub-1da {
    color: #60a5fa !important;
}

html.theme-dark .pc-menu-all .sub-1line,
body.theme-dark .pc-menu-all .sub-1line,
body[data-theme="dark"] .pc-menu-all .sub-1line {
    background-color: #25252e !important;
    color: #a1a1aa !important;
}

html.theme-dark .pc-menu-all .menu-all-btn .btn-lightgray,
body.theme-dark .pc-menu-all .menu-all-btn .btn-lightgray,
body[data-theme="dark"] .pc-menu-all .menu-all-btn .btn-lightgray {
    background-color: #282832 !important;
    color: #e2e8f0 !important;
    border-color: #3e3e4d !important;
}

/* 부트스트랩 3 표준 드롭다운 (.dropdown-menu) */
html.theme-dark .dropdown-menu,
body.theme-dark .dropdown-menu,
body[data-theme="dark"] .dropdown-menu {
    background-color: #1e1e24 !important;
    border-color: #2e2e3a !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5) !important;
}

html.theme-dark .dropdown-menu > li > a,
body.theme-dark .dropdown-menu > li > a,
body[data-theme="dark"] .dropdown-menu > li > a {
    color: #d1d5db !important;
}

html.theme-dark .dropdown-menu > li > a:hover,
html.theme-dark .dropdown-menu > li > a:focus,
body.theme-dark .dropdown-menu > li > a:hover,
body.theme-dark .dropdown-menu > li > a:focus,
body[data-theme="dark"] .dropdown-menu > li > a:hover,
body[data-theme="dark"] .dropdown-menu > li > a:focus {
    background-color: #282832 !important;
    color: #ffffff !important;
}

html.theme-dark .dropdown-menu .divider,
body.theme-dark .dropdown-menu .divider,
body[data-theme="dark"] .dropdown-menu .divider {
    background-color: #2e2e3a !important;
}

html.theme-dark .pc-menu .sub-icon::after,
body.theme-dark .pc-menu .sub-icon::after,
body[data-theme="dark"] .pc-menu .sub-icon::after {
    color: #94a3b8 !important;
}

/* ==========================================================================
   View Transitions API (Circular Ripple Theme Transition)
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-old(root) {
    z-index: 1;
}

::view-transition-new(root) {
    z-index: 99999;
}

/* ==========================================================================
   3. Theme Toggle Button Styles (Compact Icon-Only Nav Item + Micro-interaction)
   ========================================================================== */
.op-theme-toggle-wrap {
    display: inline-block;
}

.op-theme-toggle-btn,
#st-body .topbar .op-theme-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 !important;
    margin: 0 0 0 -1px !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
    background-color: #f8f8f8 !important;
    color: #3b3b3b !important;
    font-size: 14px !important;
    font-weight: normal !important;
    cursor: pointer !important;
    user-select: none !important;
    vertical-align: top !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.op-theme-toggle-btn:hover,
#st-body .topbar .op-theme-toggle-btn:hover {
    background-color: #eeeeee !important;
    color: #4f46e5 !important;
    box-shadow: none !important;
}

.op-theme-toggle-btn:active,
#st-body .topbar .op-theme-toggle-btn:active {
    background-color: #e5e5e5 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Dark Mode Seamless Button */
html.theme-dark .op-theme-toggle-btn,
html.theme-dark #st-body .topbar .op-theme-toggle-btn,
body.theme-dark .op-theme-toggle-btn,
body.theme-dark #st-body .topbar .op-theme-toggle-btn,
body[data-theme="dark"] .op-theme-toggle-btn,
body[data-theme="dark"] #st-body .topbar .op-theme-toggle-btn {
    background-color: #18181d !important;
    border-left: 1px solid #272730 !important;
    border-right: 1px solid #272730 !important;
    color: #d1d5db !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html.theme-dark .op-theme-toggle-btn:hover,
html.theme-dark #st-body .topbar .op-theme-toggle-btn:hover,
body.theme-dark .op-theme-toggle-btn:hover,
body.theme-dark #st-body .topbar .op-theme-toggle-btn:hover,
body[data-theme="dark"] .op-theme-toggle-btn:hover,
body[data-theme="dark"] #st-body .topbar .op-theme-toggle-btn:hover {
    background-color: #282832 !important;
    color: #facc15 !important;
    box-shadow: none !important;
}

/* Icon Box & Micro-interaction Spin/Scale/Fade Transitions */
.op-theme-icon-box,
#st-body .topbar .op-theme-toggle-btn .op-theme-icon-box {
    position: relative !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.op-theme-icon-box i,
#st-body .topbar .btn-nav .op-theme-icon-box .fa,
#st-body .btn-nav .op-theme-icon-box i {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transform-origin: center center !important;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, color 0.25s ease !important;
}

/* Light Mode: Moon Visible, Sun Hidden */
.op-theme-icon-dark,
#st-body .btn-nav .op-theme-icon-box .op-theme-icon-dark {
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
    opacity: 1 !important;
    color: #6366f1 !important; /* Indigo Moon */
}

.op-theme-icon-light,
#st-body .btn-nav .op-theme-icon-box .op-theme-icon-light {
    transform: translate(-50%, -50%) rotate(-90deg) scale(0) !important;
    opacity: 0 !important;
    color: #facc15 !important; /* Amber Sun */
}

/* Dark Mode: Sun Visible, Moon Hidden */
html.theme-dark .op-theme-icon-dark,
body.theme-dark .op-theme-icon-dark,
body[data-theme="dark"] .op-theme-icon-dark,
html.theme-dark #st-body .btn-nav .op-theme-icon-box .op-theme-icon-dark,
body.theme-dark #st-body .btn-nav .op-theme-icon-box .op-theme-icon-dark,
body[data-theme="dark"] #st-body .btn-nav .op-theme-icon-box .op-theme-icon-dark {
    transform: translate(-50%, -50%) rotate(90deg) scale(0) !important;
    opacity: 0 !important;
}

html.theme-dark .op-theme-icon-light,
body.theme-dark .op-theme-icon-light,
body[data-theme="dark"] .op-theme-icon-light,
html.theme-dark #st-body .btn-nav .op-theme-icon-box .op-theme-icon-light,
body.theme-dark #st-body .btn-nav .op-theme-icon-box .op-theme-icon-light,
body[data-theme="dark"] #st-body .btn-nav .op-theme-icon-box .op-theme-icon-light {
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
    opacity: 1 !important;
    color: #facc15 !important;
    filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.65)) !important;
}

/* Mobile Theme Toggle Micro-interaction */
.m-header .header-dark-toggle a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    color: #ffffff !important;
    transition: transform 0.15s ease, color 0.2s ease !important;
}

.m-header .header-dark-toggle a:active {
    transform: scale(0.86) !important;
}

.op-theme-icon-box-m {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.op-theme-icon-box-m i {
    position: absolute;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, color 0.25s ease;
}

html.theme-dark .m-header .header-dark-toggle a {
    color: #facc15 !important;
}

html.theme-dark .m-header {
    background-color: #141417 !important;
    border-bottom: 1px solid #272730 !important;
}

/* ==========================================================================
   4. Main Top Selector & Search
   ========================================================================== */
html.theme-dark .main-top-selector,
body.theme-dark .main-top-selector,
body[data-theme="dark"] .main-top-selector {
    background-color: #1e1e24 !important;
    border: 1px solid #2d2d38 !important;
}

html.theme-dark .main-top-selector .search-input,
body.theme-dark .main-top-selector .search-input,
body[data-theme="dark"] .main-top-selector .search-input {
    background-color: #282832 !important;
    border: 1px solid #3e3e4c !important;
    color: #f1f5f9 !important;
}

html.theme-dark .main-top-selector .main-search,
body.theme-dark .main-top-selector .main-search,
body[data-theme="dark"] .main-top-selector .main-search {
    background-color: #3b82f6 !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

/* ==========================================================================
   5. Company List & Cards (OpMain)
   ========================================================================== */
html.theme-dark .main-comp-list,
body.theme-dark .main-comp-list,
body[data-theme="dark"] .main-comp-list {
    background-color: #18181e !important;
}

html.theme-dark .main-box,
body.theme-dark .main-box,
body[data-theme="dark"] .main-box {
    background-color: #22222a !important;
    border: 1px solid #2e2e3a !important;
    border-radius: 6px !important;
}

html.theme-dark .main-box .mbox-comp-desc,
body.theme-dark .main-box .mbox-comp-desc,
body[data-theme="dark"] .main-box .mbox-comp-desc {
    background-color: #22222a !important;
}

html.theme-dark .main-box .item_name,
body.theme-dark .main-box .item_name,
body[data-theme="dark"] .main-box .item_name {
    color: #ff6b4a !important;
}

html.theme-dark .main-box .item_cat,
body.theme-dark .main-box .item_cat,
body[data-theme="dark"] .main-box .item_cat {
    color: #94a3b8 !important;
}

html.theme-dark .main-box .item_contact,
html.theme-dark .main-box .item_addr,
body.theme-dark .main-box .item_contact,
body.theme-dark .main-box .item_addr,
body[data-theme="dark"] .main-box .item_contact,
body[data-theme="dark"] .main-box .item_addr {
    color: #a1a1aa !important;
}

html.theme-dark .main-box .gallerybtn,
html.theme-dark .main-box .mbox-btns button,
body.theme-dark .main-box .gallerybtn,
body.theme-dark .main-box .mbox-btns button,
body[data-theme="dark"] .main-box .gallerybtn,
body[data-theme="dark"] .main-box .mbox-btns button {
    background-color: #2c2c36 !important;
    border-color: #3e3e4d !important;
    color: #e2e8f0 !important;
}

html.theme-dark .main-box .gallerybtn:hover,
body.theme-dark .main-box .gallerybtn:hover,
body[data-theme="dark"] .main-box .gallerybtn:hover {
    background-color: #383845 !important;
    color: #ffffff !important;
}

html.theme-dark .main-box .addr,
html.theme-dark .main-box .card-item-addr,
html.theme-dark .main-box .mbox-comp-desc .addr,
body.theme-dark .main-box .addr,
body.theme-dark .main-box .card-item-addr,
body.theme-dark .main-box .mbox-comp-desc .addr,
body[data-theme="dark"] .main-box .addr,
body[data-theme="dark"] .main-box .card-item-addr,
body[data-theme="dark"] .main-box .mbox-comp-desc .addr {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   6. Side Menu (PC Left Column)
   ========================================================================== */
html.theme-dark .side-menu,
body.theme-dark .side-menu,
body[data-theme="dark"] .side-menu {
    background-color: #22222a !important;
    border: 1px solid #2e2e3a !important;
    border-radius: 7px !important;
}

html.theme-dark .side-menu .sm_border,
body.theme-dark .side-menu .sm_border,
body[data-theme="dark"] .side-menu .sm_border {
    border: none !important;
}

html.theme-dark .side-menu .sm_margin,
body.theme-dark .side-menu .sm_margin,
body[data-theme="dark"] .side-menu .sm_margin {
    background-color: transparent !important;
}

html.theme-dark .side-menu .sm_item,
body.theme-dark .side-menu .sm_item,
body[data-theme="dark"] .side-menu .sm_item {
    background-color: #22222a !important;
    border: 1px solid #2e2e3a !important;
    color: #e2e8f0 !important;
}

html.theme-dark .side-menu .sm_sub,
body.theme-dark .side-menu .sm_sub,
body[data-theme="dark"] .side-menu .sm_sub {
    background-color: #22222a !important;
    border-bottom: 1px solid #2e2e3a !important;
}

html.theme-dark .side-menu .sm_sub:hover,
body.theme-dark .side-menu .sm_sub:hover,
body[data-theme="dark"] .side-menu .sm_sub:hover {
    background-color: #282832 !important;
}

html.theme-dark .side-menu .sm_sub .menu-name,
body.theme-dark .side-menu .sm_sub .menu-name,
body[data-theme="dark"] .side-menu .sm_sub .menu-name {
    color: #f1f5f9 !important;
}

html.theme-dark .side-menu .sm_sub .sidemenu-btn,
body.theme-dark .side-menu .sm_sub .sidemenu-btn,
body[data-theme="dark"] .side-menu .sm_sub .sidemenu-btn {
    background-color: #2c2c36 !important;
    border-color: #3e3e4d !important;
    color: #e2e8f0 !important;
}

html.theme-dark .side-menu .sm_sub .sidemenu-btn:hover,
body.theme-dark .side-menu .sm_sub .sidemenu-btn:hover,
body[data-theme="dark"] .side-menu .sm_sub .sidemenu-btn:hover {
    background-color: #3b82f6 !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

html.theme-dark .side-menu .main_sub_menu,
body.theme-dark .side-menu .main_sub_menu,
body[data-theme="dark"] .side-menu .main_sub_menu {
    background-color: #2c2c36 !important;
    border: 1px solid #3e3e4d !important;
    color: #e2e8f0 !important;
}

html.theme-dark .side-menu .main_sub_menu:hover,
body.theme-dark .side-menu .main_sub_menu:hover,
body[data-theme="dark"] .side-menu .main_sub_menu:hover {
    background-color: #383845 !important;
    color: #ffffff !important;
}

html.theme-dark .side-menu .status,
body.theme-dark .side-menu .status,
body[data-theme="dark"] .side-menu .status {
    color: #94a3b8 !important;
}

html.theme-dark .side-menu .status.over-due,
body.theme-dark .side-menu .status.over-due,
body[data-theme="dark"] .side-menu .status.over-due {
    color: #f87171 !important;
}

/* ==========================================================================
   7. Footer & Copyright Bar (#st-footer, #st-body .footer, .footer)
   ========================================================================== */
html.theme-dark #st-footer,
html.theme-dark #st-footer .footer,
html.theme-dark #st-body .footer,
html.theme-dark footer.footer,
body.theme-dark #st-footer,
body.theme-dark #st-footer .footer,
body.theme-dark #st-body .footer,
body.theme-dark footer.footer,
body[data-theme="dark"] #st-footer,
body[data-theme="dark"] #st-footer .footer,
body[data-theme="dark"] #st-body .footer,
body[data-theme="dark"] footer.footer {
    background-color: #141417 !important;
    border-top: 1px solid #272730 !important;
}

html.theme-dark #st-footer .footbar,
html.theme-dark #st-footer .footer .footbar,
html.theme-dark #st-body .footer .footbar,
html.theme-dark footer.footer .footbar,
body.theme-dark #st-footer .footbar,
body.theme-dark #st-footer .footer .footbar,
body.theme-dark #st-body .footer .footbar,
body.theme-dark footer.footer .footbar,
body[data-theme="dark"] #st-footer .footbar,
body[data-theme="dark"] #st-footer .footer .footbar,
body[data-theme="dark"] #st-body .footer .footbar,
body[data-theme="dark"] footer.footer .footbar {
    background-color: #18181d !important;
    border-top: 1px solid #272730 !important;
    border-bottom: 1px solid #272730 !important;
}

html.theme-dark #st-footer .content,
html.theme-dark #st-footer .footer .content,
html.theme-dark #st-body .footer .content,
html.theme-dark footer.footer .content,
body.theme-dark #st-footer .content,
body.theme-dark #st-footer .footer .content,
body.theme-dark #st-body .footer .content,
body.theme-dark footer.footer .content,
body[data-theme="dark"] #st-footer .content,
body[data-theme="dark"] #st-footer .footer .content,
body[data-theme="dark"] #st-body .footer .content,
body[data-theme="dark"] footer.footer .content {
    background-color: #141417 !important;
    color: #a1a1aa !important;
}

html.theme-dark #st-footer .content a,
html.theme-dark #st-footer .footer .content a,
html.theme-dark #st-body .footer .content a,
html.theme-dark footer.footer .content a,
body.theme-dark #st-footer .content a,
body.theme-dark #st-footer .footer .content a,
body.theme-dark #st-body .footer .content a,
body.theme-dark footer.footer .content a,
body[data-theme="dark"] #st-footer .content a,
body[data-theme="dark"] #st-footer .footer .content a,
body[data-theme="dark"] #st-body .footer .content a,
body[data-theme="dark"] footer.footer .content a {
    color: #93c5fd !important;
}

html.theme-dark #st-footer .copyright,
html.theme-dark #st-footer .footer .copyright,
html.theme-dark #st-body .footer .copyright,
html.theme-dark footer.footer .copyright,
body.theme-dark #st-footer .copyright,
body.theme-dark #st-footer .footer .copyright,
body.theme-dark #st-body .footer .copyright,
body.theme-dark footer.footer .copyright,
body[data-theme="dark"] #st-footer .copyright,
body[data-theme="dark"] #st-footer .footer .copyright,
body[data-theme="dark"] #st-body .footer .copyright,
body[data-theme="dark"] footer.footer .copyright {
    background-color: #101012 !important;
    border-top: 1px solid #222228 !important;
    color: #a1a1aa !important;
}

html.theme-dark #st-footer .copyright a,
html.theme-dark #st-footer .footer .copyright a,
html.theme-dark #st-body .footer .copyright a,
html.theme-dark footer.footer .copyright a,
body.theme-dark #st-footer .copyright a,
body.theme-dark #st-footer .footer .copyright a,
body.theme-dark #st-body .footer .copyright a,
body.theme-dark footer.footer .copyright a,
body[data-theme="dark"] #st-footer .copyright a,
body[data-theme="dark"] #st-footer .footer .copyright a,
body[data-theme="dark"] #st-body .footer .copyright a,
body[data-theme="dark"] footer.footer .copyright a {
    color: #a1a1aa !important;
}

/* Footer Brand Typography & Visual Consistency */
html.theme-dark .footer-brand-title,
body.theme-dark .footer-brand-title,
body[data-theme="dark"] .footer-brand-title {
    color: #e2e8f0 !important;
}

html.theme-dark .footer-brand-subtitle,
body.theme-dark .footer-brand-subtitle,
body[data-theme="dark"] .footer-brand-subtitle {
    color: #94a3b8 !important;
}

html.theme-dark .footer-brand-logo a,
body.theme-dark .footer-brand-logo a,
body[data-theme="dark"] .footer-brand-logo a {
    color: #f1f5f9 !important;
}

/* ==========================================================================
   8. Mobile Main 3x3 Menu
   ========================================================================== */
html.theme-dark #main_menu,
body.theme-dark #main_menu,
body[data-theme="dark"] #main_menu {
    background-color: #272730 !important;
    border-color: #2e2e3a !important;
}

html.theme-dark #main_menu .item,
body.theme-dark #main_menu .item,
body[data-theme="dark"] #main_menu .item {
    background-color: #22222a !important;
    color: #f1f5f9 !important;
    border-color: #2e2e3a !important;
}

html.theme-dark #main_menu .item:hover,
body.theme-dark #main_menu .item:hover,
body[data-theme="dark"] #main_menu .item:hover {
    background-color: #282832 !important;
}

html.theme-dark #main_menu .slide_menu,
body.theme-dark #main_menu .slide_menu,
body[data-theme="dark"] #main_menu .slide_menu {
    background-color: #1a1a20 !important;
    border: 1px solid #2e2e3a !important;
}

html.theme-dark #main_menu .main_sub_menu,
body.theme-dark #main_menu .main_sub_menu,
body[data-theme="dark"] #main_menu .main_sub_menu {
    background-color: #2c2c36 !important;
    border: 1px solid #3e3e4d !important;
    color: #e2e8f0 !important;
}

html.theme-dark #main_menu .main_sub_menu:hover,
body.theme-dark #main_menu .main_sub_menu:hover,
body[data-theme="dark"] #main_menu .main_sub_menu:hover {
    background-color: #383845 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   9. Mobile Premium Wrap
   ========================================================================== */
html.theme-dark .index_premium_wrap,
body.theme-dark .index_premium_wrap,
body[data-theme="dark"] .index_premium_wrap {
    border-top: 2px solid #2e2e3a !important;
}

html.theme-dark .index_premium_wrap .index_premium_title,
body.theme-dark .index_premium_wrap .index_premium_title,
body[data-theme="dark"] .index_premium_wrap .index_premium_title {
    background: #1e3a8a !important;
    border-top: 1px solid #2e2e3a !important;
    color: #f1f5f9 !important;
}

html.theme-dark .index_premium_menu_frame,
body.theme-dark .index_premium_menu_frame,
body[data-theme="dark"] .index_premium_menu_frame {
    background-color: #22222a !important;
    border-top: 1px solid #2e2e3a !important;
}

html.theme-dark .index_premium_wrap .index_premium_menu .item,
body.theme-dark .index_premium_wrap .index_premium_menu .item,
body[data-theme="dark"] .index_premium_wrap .index_premium_menu .item {
    background-color: #22222a !important;
    border-right: 1px solid #2e2e3a !important;
    color: #d1d5db !important;
}

html.theme-dark .index_premium_wrap .index_premium_menu .item a,
body.theme-dark .index_premium_wrap .index_premium_menu .item a,
body[data-theme="dark"] .index_premium_wrap .index_premium_menu .item a {
    color: #d1d5db !important;
}

html.theme-dark .index_premium_wrap .index_premium_menu .item.active,
body.theme-dark .index_premium_wrap .index_premium_menu .item.active,
body[data-theme="dark"] .index_premium_wrap .index_premium_menu .item.active {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

html.theme-dark .index_premium_wrap .index_premium_menu .item.active a,
body.theme-dark .index_premium_wrap .index_premium_menu .item.active a,
body[data-theme="dark"] .index_premium_wrap .index_premium_menu .item.active a {
    color: #ffffff !important;
}

html.theme-dark .index_premium_wrap .index_premium_list .item,
body.theme-dark .index_premium_wrap .index_premium_list .item,
body[data-theme="dark"] .index_premium_wrap .index_premium_list .item {
    border-bottom: 1px solid #22222a !important;
    color: #e2e8f0 !important;
}

html.theme-dark .index_premium_wrap .index_premium_list .item .subject,
body.theme-dark .index_premium_wrap .index_premium_list .item .subject,
body[data-theme="dark"] .index_premium_wrap .index_premium_list .item .subject {
    color: #e2e8f0 !important;
}

html.theme-dark .index_premium_wrap .index_premium_list .item .comp_name,
body.theme-dark .index_premium_wrap .index_premium_list .item .comp_name,
body[data-theme="dark"] .index_premium_wrap .index_premium_list .item .comp_name {
    color: #f97316 !important;
}

/* ==========================================================================
   10. General Panels, Wells & Tables
   ========================================================================== */
html.theme-dark .panel,
html.theme-dark .well,
html.theme-dark .list-group-item,
body.theme-dark .panel,
body.theme-dark .well,
body.theme-dark .list-group-item,
body[data-theme="dark"] .panel,
body[data-theme="dark"] .well,
body[data-theme="dark"] .list-group-item {
    background-color: #1e1e24 !important;
    border-color: #2d2d38 !important;
    color: #e2e8f0 !important;
}

html.theme-dark .panel-heading,
body.theme-dark .panel-heading,
body[data-theme="dark"] .panel-heading {
    background-color: #282832 !important;
    border-color: #2d2d38 !important;
    color: #f4f4f5 !important;
}

html.theme-dark .form-control,
body.theme-dark .form-control,
body[data-theme="dark"] .form-control {
    background-color: #22222a !important;
    border-color: #3e3e4d !important;
    color: #f1f5f9 !important;
}

html.theme-dark .form-control:focus,
body.theme-dark .form-control:focus,
body[data-theme="dark"] .form-control:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.25) !important;
}

html.theme-dark .form-control::placeholder,
body.theme-dark .form-control::placeholder,
body[data-theme="dark"] .form-control::placeholder,
html.theme-dark input::placeholder,
body.theme-dark input::placeholder,
body[data-theme="dark"] input::placeholder,
html.theme-dark textarea::placeholder,
body.theme-dark textarea::placeholder,
body[data-theme="dark"] textarea::placeholder {
    color: #71717a !important;
    opacity: 1 !important;
}

html.theme-dark .table > tbody > tr > td,
html.theme-dark .table > thead > tr > th,
body.theme-dark .table > tbody > tr > td,
body.theme-dark .table > thead > tr > th,
body[data-theme="dark"] .table > tbody > tr > td,
body[data-theme="dark"] .table > thead > tr > th {
    border-color: #2d2d38 !important;
    color: #e2e8f0 !important;
}

/* ==========================================================================
   11. Mobile Footer (#foot_menu) & Topbar Dark Mode
   ========================================================================== */
html.theme-dark #foot_menu,
body.theme-dark #foot_menu,
body[data-theme="dark"] #foot_menu {
    background-color: #141417 !important;
    border-top: 1px solid #272730 !important;
}

html.theme-dark #foot_menu .item,
body.theme-dark #foot_menu .item,
body[data-theme="dark"] #foot_menu .item {
    color: #e2e8f0 !important;
}

html.theme-dark #foot_menu .foot-btn-auth { background-color: #22222a !important; }
html.theme-dark #foot_menu .foot-btn-contact { background-color: #1e3a8a !important; color: #93c5fd !important; }
html.theme-dark #foot_menu .foot-btn-info { background-color: #1e293b !important; }
html.theme-dark #foot_menu .foot-btn-alliance { background-color: #272730 !important; }
html.theme-dark #foot_menu .foot-btn-mode { background-color: #7c2d12 !important; color: #fed7aa !important; }

/* Topbar Typography Contrast in Dark Mode */
html.theme-dark .top-user-name,
body.theme-dark .top-user-name,
body[data-theme="dark"] .top-user-name {
    color: #93c5fd !important;
}

html.theme-dark .top-partner-profile,
body.theme-dark .top-partner-profile,
body[data-theme="dark"] .top-partner-profile {
    color: #fb923c !important;
}

html.theme-dark .top-notice-title,
body.theme-dark .top-notice-title,
body[data-theme="dark"] .top-notice-title {
    color: #d1d5db !important;
}

html.theme-dark .top-notice-badge,
body.theme-dark .top-notice-badge,
body[data-theme="dark"] .top-notice-badge {
    color: #facc15 !important;
}

/* ==========================================================================
   12. Bootstrap Modals & Theme Layer Popups
   ========================================================================== */
html.theme-dark .modal-content,
body.theme-dark .modal-content,
body[data-theme="dark"] .modal-content {
    background-color: #1e1e24 !important;
    border-color: #2e2e3a !important;
    color: #e2e8f0 !important;
}

html.theme-dark .modal-header,
body.theme-dark .modal-header,
body[data-theme="dark"] .modal-header,
html.theme-dark .modal-footer,
body.theme-dark .modal-footer,
body[data-theme="dark"] .modal-footer {
    border-color: #2e2e3a !important;
}

html.theme-dark .modal-header .close,
body.theme-dark .modal-header .close,
body[data-theme="dark"] .modal-header .close {
    color: #cbd5e1 !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

html.theme-dark .modal-header .close:hover,
body.theme-dark .modal-header .close:hover,
body[data-theme="dark"] .modal-header .close:hover {
    color: #ffffff !important;
    opacity: 1 !important;
}

html.theme-dark .op-modal-card,
body.theme-dark .op-modal-card,
body[data-theme="dark"] .op-modal-card {
    background-color: #1e2430 !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

html.theme-dark .op-modal-header,
html.theme-dark .op-modal-footer,
body.theme-dark .op-modal-header,
body.theme-dark .op-modal-footer,
body[data-theme="dark"] .op-modal-header,
body[data-theme="dark"] .op-modal-footer {
    background-color: #151b23 !important;
    border-color: #2e3846 !important;
}

html.theme-dark .op-modal-body,
body.theme-dark .op-modal-body,
body[data-theme="dark"] .op-modal-body {
    color: #cbd5e1 !important;
}

/* ==========================================================================
   13. Pagination (Bootstrap & APMS)
   ========================================================================== */
html.theme-dark .pagination > li > a,
html.theme-dark .pagination > li > span,
body.theme-dark .pagination > li > a,
body.theme-dark .pagination > li > span,
body[data-theme="dark"] .pagination > li > a,
body[data-theme="dark"] .pagination > li > span {
    background-color: #1e1e24 !important;
    border-color: #2e2e3a !important;
    color: #cbd5e1 !important;
}

html.theme-dark .pagination > li > a:hover,
html.theme-dark .pagination > li > span:hover,
html.theme-dark .pagination > li > a:focus,
html.theme-dark .pagination > li > span:focus,
body.theme-dark .pagination > li > a:hover,
body.theme-dark .pagination > li > span:hover,
body.theme-dark .pagination > li > a:focus,
body.theme-dark .pagination > li > span:focus,
body[data-theme="dark"] .pagination > li > a:hover,
body[data-theme="dark"] .pagination > li > span:hover,
body[data-theme="dark"] .pagination > li > a:focus,
body[data-theme="dark"] .pagination > li > span:focus {
    background-color: #282834 !important;
    border-color: #3e3e4e !important;
    color: #f1f5f9 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

html.theme-dark .pagination > .active > a,
html.theme-dark .pagination > .active > span,
html.theme-dark .pagination > .active > a:hover,
html.theme-dark .pagination > .active > span:hover,
html.theme-dark .pagination > .active > a:focus,
html.theme-dark .pagination > .active > span:focus,
body.theme-dark .pagination > .active > a,
body.theme-dark .pagination > .active > span,
body.theme-dark .pagination > .active > a:hover,
body.theme-dark .pagination > .active > span:hover,
body.theme-dark .pagination > .active > a:focus,
body.theme-dark .pagination > .active > span:focus,
body[data-theme="dark"] .pagination > .active > a,
body[data-theme="dark"] .pagination > .active > span,
body[data-theme="dark"] .pagination > .active > a:hover,
body[data-theme="dark"] .pagination > .active > span:hover,
body[data-theme="dark"] .pagination > .active > a:focus,
body[data-theme="dark"] .pagination > .active > span:focus,
html.theme-dark .pagination li.active a,
html.theme-dark .pagination li.active span {
    background-color: #3dbf62 !important;
    border-color: #3dbf62 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(61, 191, 98, 0.45) !important;
}

html.theme-dark .pagination > .disabled > span,
html.theme-dark .pagination > .disabled > span:hover,
html.theme-dark .pagination > .disabled > span:focus,
html.theme-dark .pagination > .disabled > a,
html.theme-dark .pagination > .disabled > a:hover,
html.theme-dark .pagination > .disabled > a:focus,
body.theme-dark .pagination > .disabled > span,
body.theme-dark .pagination > .disabled > span:hover,
body.theme-dark .pagination > .disabled > span:focus,
body.theme-dark .pagination > .disabled > a,
body.theme-dark .pagination > .disabled > a:hover,
body.theme-dark .pagination > .disabled > a:focus,
body[data-theme="dark"] .pagination > .disabled > span,
body[data-theme="dark"] .pagination > .disabled > span:hover,
body[data-theme="dark"] .pagination > .disabled > span:focus,
body[data-theme="dark"] .pagination > .disabled > a,
body[data-theme="dark"] .pagination > .disabled > a:hover,
body[data-theme="dark"] .pagination > .disabled > a:focus {
    background-color: transparent !important;
    border-color: #252530 !important;
    color: #4b5563 !important;
    box-shadow: none !important;
    opacity: 0.5 !important;
}

/* ==========================================================================
   14. Board Lists, Headers & Row Highlights
   ========================================================================== */
html.theme-dark table.list-pc,
html.theme-dark table.list-pc.bg-white,
body.theme-dark table.list-pc,
body.theme-dark table.list-pc.bg-white,
body[data-theme="dark"] table.list-pc,
body[data-theme="dark"] table.list-pc.bg-white {
    background-color: #18181d !important;
    border-bottom-color: #2e2e3a !important;
}

html.theme-dark table.list-pc th,
body.theme-dark table.list-pc th,
body[data-theme="dark"] table.list-pc th {
    background-image: none !important;
    background-color: #1e1e24 !important;
    color: #d1d5db !important;
    border-color: #2e2e3a !important;
}

html.theme-dark table.list-pc th a,
body.theme-dark table.list-pc th a,
body[data-theme="dark"] table.list-pc th a {
    color: #d1d5db !important;
}

html.theme-dark table.list-pc th a:hover,
body.theme-dark table.list-pc th a:hover,
body[data-theme="dark"] table.list-pc th a:hover {
    color: #f1f5f9 !important;
}

html.theme-dark table.list-pc td,
body.theme-dark table.list-pc td,
body[data-theme="dark"] table.list-pc td {
    background-color: #18181d !important;
    border-top-color: #282834 !important;
    color: #cbd5e1 !important;
}

/* Zebra Striping in Dark Mode */
html.theme-dark table.list-pc.table-striped > tbody > tr:nth-of-type(odd) > td,
body.theme-dark table.list-pc.table-striped > tbody > tr:nth-of-type(odd) > td,
body[data-theme="dark"] table.list-pc.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #1c1c22 !important;
}

html.theme-dark table.list-pc.table-striped > tbody > tr:nth-of-type(even) > td,
body.theme-dark table.list-pc.table-striped > tbody > tr:nth-of-type(even) > td,
body[data-theme="dark"] table.list-pc.table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: #18181d !important;
}

/* Row Hover in Dark Mode */
html.theme-dark table.list-pc.table-hover > tbody > tr:hover > td,
body.theme-dark table.list-pc.table-hover > tbody > tr:hover > td,
body[data-theme="dark"] table.list-pc.table-hover > tbody > tr:hover > td {
    background-color: #24242d !important;
}

/* Member Nickname & Guest High Contrast in Dark Mode */
html.theme-dark .member,
html.theme-dark .guest,
html.theme-dark .sv_member,
html.theme-dark .sv_guest,
body.theme-dark .member,
body.theme-dark .guest,
body.theme-dark .sv_member,
body.theme-dark .sv_guest,
body[data-theme="dark"] .member,
body[data-theme="dark"] .guest,
body[data-theme="dark"] .sv_member,
body[data-theme="dark"] .sv_guest {
    color: #f1f5f9 !important;
}

html.theme-dark a.sv_member:hover,
html.theme-dark a.sv_guest:hover,
body.theme-dark a.sv_member:hover,
body.theme-dark a.sv_guest:hover,
body[data-theme="dark"] a.sv_member:hover,
body[data-theme="dark"] a.sv_guest:hover {
    color: #60a5fa !important;
}

html.theme-dark table.list-pc .list-now,
body.theme-dark table.list-pc .list-now,
body[data-theme="dark"] table.list-pc .list-now {
    background-color: #22222a !important;
}

/* New Post Row Highlight: Gentle Dark Amber Tint */
html.theme-dark .table-striped > tbody > tr.new td,
html.theme-dark table.list-pc tr.new td,
body.theme-dark .table-striped > tbody > tr.new td,
body.theme-dark table.list-pc tr.new td,
body[data-theme="dark"] .table-striped > tbody > tr.new td,
body[data-theme="dark"] table.list-pc tr.new td {
    background-color: #242218 !important;
}

html.theme-dark table.list-pc .list-subject.new .title_area,
body.theme-dark table.list-pc .list-subject.new .title_area,
body[data-theme="dark"] table.list-pc .list-subject.new .title_area {
    color: #fbbf24 !important;
}

/* Premium Sticky Row Highlight: Gentle Dark Emerald Tint */
html.theme-dark table .premiumtop > td,
html.theme-dark table.list-pc tr.premiumtop td,
body.theme-dark table .premiumtop > td,
body.theme-dark table.list-pc tr.premiumtop td,
body[data-theme="dark"] table .premiumtop > td,
body[data-theme="dark"] table.list-pc tr.premiumtop td {
    background-color: #16241a !important;
}

/* Board Mobile List */
html.theme-dark .list-mobile,
body.theme-dark .list-mobile,
body[data-theme="dark"] .list-mobile {
    border-top-color: #2e2e3a !important;
}

html.theme-dark .list-mobile .list-item,
body.theme-dark .list-mobile .list-item,
body[data-theme="dark"] .list-mobile .list-item {
    border-bottom-color: #282834 !important;
    background-color: transparent !important;
}

/* ==========================================================================
   15. Board View & Comment Thread
   ========================================================================== */
html.theme-dark .view-wrap .img-photo i,
html.theme-dark .comment-media .photo i,
html.theme-dark table.list-pc .list-img i,
body.theme-dark .view-wrap .img-photo i,
body.theme-dark .comment-media .photo i,
body.theme-dark table.list-pc .list-img i,
body[data-theme="dark"] .view-wrap .img-photo i,
body[data-theme="dark"] .comment-media .photo i,
body[data-theme="dark"] table.list-pc .list-img i {
    background-color: #252530 !important;
    color: #9ca3af !important;
    border: 1px solid #3b3b48 !important;
}

html.theme-dark .comment-media .media,
body.theme-dark .comment-media .media,
body[data-theme="dark"] .comment-media .media {
    border-top-color: #282834 !important;
}

html.theme-dark .comment-media h5,
body.theme-dark .comment-media h5,
body[data-theme="dark"] .comment-media h5 {
    color: #e2e8f0 !important;
}

html.theme-dark .comment-media .media-content,
body.theme-dark .comment-media .media-content,
body[data-theme="dark"] .comment-media .media-content {
    color: #cbd5e1 !important;
}

html.theme-dark .comment-box,
body.theme-dark .comment-box,
body[data-theme="dark"] .comment-box {
    background-color: #1e1e24 !important;
    border-color: #2e2e3a !important;
}

html.theme-dark .comment-box textarea,
html.theme-dark #wr_content,
body.theme-dark .comment-box textarea,
body.theme-dark #wr_content,
body[data-theme="dark"] .comment-box textarea,
body[data-theme="dark"] #wr_content {
    background-color: #18181e !important;
    border-color: #2e2e3a !important;
    color: #f1f5f9 !important;
}

html.theme-dark .comment-content .comment-cell.comment-submit,
body.theme-dark .comment-content .comment-cell.comment-submit,
body[data-theme="dark"] .comment-content .comment-cell.comment-submit {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}

html.theme-dark .comment-content .comment-cell.comment-submit:hover,
body.theme-dark .comment-content .comment-cell.comment-submit:hover,
body[data-theme="dark"] .comment-content .comment-cell.comment-submit:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* ==========================================================================
   16. Brand Web Title & Logo in Dark Mode
   ========================================================================== */
html.theme-dark .web_title_eng a,
body.theme-dark .web_title_eng a,
body[data-theme="dark"] .web_title_eng a,
html.theme-dark .web_title_eng_m,
body.theme-dark .web_title_eng_m,
body[data-theme="dark"] .web_title_eng_m {
    transition: text-shadow 0.25s ease, color 0.25s ease;
}

/* 1. OP 메인 브랜드 텍스트: 에메랄드 그린 톤업 + 앰비언트 글로우 */
html.theme-dark .logo-op,
body.theme-dark .logo-op,
body[data-theme="dark"] .logo-op {
    color: #34d399 !important;
    text-shadow: 0 0 16px rgba(52, 211, 153, 0.35) !important;
    transition: text-shadow 0.25s ease;
}

/* 2. GUIDE 보조 브랜드 텍스트: 소프트 오프화이트 (야간 눈부심 방지 및 13:1 가독성) */
html.theme-dark .logo-guide,
body.theme-dark .logo-guide,
body[data-theme="dark"] .logo-guide,
html.theme-dark .web_title_eng a span:last-child,
body.theme-dark .web_title_eng a span:last-child,
body[data-theme="dark"] .web_title_eng a span:last-child,
html.theme-dark .web_title_eng_m span:last-child,
body.theme-dark .web_title_eng_m span:last-child,
body[data-theme="dark"] .web_title_eng_m span:last-child {
    color: #f1f5f9 !important;
    text-shadow: none !important;
    transition: color 0.25s ease;
}

/* 3. 한글 서브타이틀(오피가이드): 톤온톤 민트 세이지 */
html.theme-dark .web_title_kor a,
body.theme-dark .web_title_kor a,
body[data-theme="dark"] .web_title_kor a {
    color: #86efac !important;
    opacity: 0.92;
    transition: color 0.25s ease, opacity 0.25s ease;
}

/* 4. 마우스 호버 마이크로 인터랙션 */
html.theme-dark .web_title_eng a:hover .logo-op,
body.theme-dark .web_title_eng a:hover .logo-op,
body[data-theme="dark"] .web_title_eng a:hover .logo-op {
    text-shadow: 0 0 24px rgba(52, 211, 153, 0.65) !important;
}

html.theme-dark .web_title_eng a:hover .logo-guide,
body.theme-dark .web_title_eng a:hover .logo-guide,
body[data-theme="dark"] .web_title_eng a:hover .logo-guide,
html.theme-dark .web_title_eng a:hover span:last-child,
body.theme-dark .web_title_eng a:hover span:last-child,
body[data-theme="dark"] .web_title_eng a:hover span:last-child {
    color: #ffffff !important;
}

html.theme-dark .web_title_kor a:hover,
body.theme-dark .web_title_kor a:hover,
body[data-theme="dark"] .web_title_kor a:hover {
    color: #bbf7d0 !important;
    opacity: 1;
}

/* ==========================================================================
   17. Systems Architect Pareto Hotfix: Navigation, Sidebar, View & Actions
   Applied globally via html.theme-dark, body.theme-dark, or [data-theme="dark"]
   Zero PHP file modification, zero blast radius.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [P1] PC & Mobile Main Navigation (.at-menu, .pc-menu & .m-menu)
   -------------------------------------------------------------------------- */
html.theme-dark .at-menu,
body.theme-dark .at-menu,
body[data-theme="dark"] .at-menu {
    background-color: #141417 !important;
    border-color: #272730 !important;
}

html.theme-dark .nav-fixed .at-menu,
body.theme-dark .nav-fixed .at-menu,
body[data-theme="dark"] .nav-fixed .at-menu {
    background-color: rgba(20, 20, 23, 0.96) !important;
    border-bottom: 1px solid #272730 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.theme-dark .pc-menu,
body.theme-dark .pc-menu,
body[data-theme="dark"] .pc-menu {
    background-color: #141417 !important;
    border-bottom: 1px solid #272730 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.theme-dark .pc-menu .nav-top,
body.theme-dark .pc-menu .nav-top,
body[data-theme="dark"] .pc-menu .nav-top {
    border-color: #272730 !important;
}

html.theme-dark .pc-menu .nav-top .menu-a,
body.theme-dark .pc-menu .nav-top .menu-a,
body[data-theme="dark"] .pc-menu .nav-top .menu-a {
    color: #e2e8f0 !important;
}

html.theme-dark .pc-menu .nav-top .menu-li:hover .menu-a,
html.theme-dark .pc-menu .nav-top .menu-li.on .menu-a,
body.theme-dark .pc-menu .nav-top .menu-li:hover .menu-a,
body.theme-dark .pc-menu .nav-top .menu-li.on .menu-a,
body[data-theme="dark"] .pc-menu .nav-top .menu-li:hover .menu-a,
body[data-theme="dark"] .pc-menu .nav-top .menu-li.on .menu-a {
    background-color: #24242e !important;
    color: #60a5fa !important;
}

/* PC Menu Hover Sub Dropdowns (.sub-1div, .sub-2div) */
html.theme-dark .pc-menu .nav-top .sub-1div,
html.theme-dark .pc-menu .nav-top .sub-2div,
body.theme-dark .pc-menu .nav-top .sub-1div,
body.theme-dark .pc-menu .nav-top .sub-2div,
body[data-theme="dark"] .pc-menu .nav-top .sub-1div,
body[data-theme="dark"] .pc-menu .nav-top .sub-2div {
    background: #18181e !important;
    border-top: 3px solid #3b82f6 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

html.theme-dark .pc-menu .nav-top .sub-1div::before,
body.theme-dark .pc-menu .nav-top .sub-1div::before,
body[data-theme="dark"] .pc-menu .nav-top .sub-1div::before {
    border-color: transparent transparent #3b82f6 transparent !important;
}

html.theme-dark .pc-menu .nav-top .sub-1da,
html.theme-dark .pc-menu .nav-top .sub-2da,
body.theme-dark .pc-menu .nav-top .sub-1da,
body.theme-dark .pc-menu .nav-top .sub-2da,
body[data-theme="dark"] .pc-menu .nav-top .sub-1da,
body[data-theme="dark"] .pc-menu .nav-top .sub-2da {
    color: #cbd5e1 !important;
    border-bottom: 1px solid #272730 !important;
    background: transparent !important;
}

html.theme-dark .pc-menu .nav-top .sub-1line,
html.theme-dark .pc-menu .nav-top .sub-2line,
body.theme-dark .pc-menu .nav-top .sub-1line,
body.theme-dark .pc-menu .nav-top .sub-2line,
body[data-theme="dark"] .pc-menu .nav-top .sub-1line,
body[data-theme="dark"] .pc-menu .nav-top .sub-2line {
    background: #141418 !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid #272730 !important;
}

html.theme-dark .pc-menu .nav-top .sub-1dli.on .sub-1da,
html.theme-dark .pc-menu .nav-top .sub-1dli:hover .sub-1da,
html.theme-dark .pc-menu .nav-top .sub-2dli.on .sub-2da,
html.theme-dark .pc-menu .nav-top .sub-2dli:hover .sub-2da,
body.theme-dark .pc-menu .nav-top .sub-1dli.on .sub-1da,
body.theme-dark .pc-menu .nav-top .sub-1dli:hover .sub-1da,
body.theme-dark .pc-menu .nav-top .sub-2dli.on .sub-2da,
body.theme-dark .pc-menu .nav-top .sub-2dli:hover .sub-2da,
body[data-theme="dark"] .pc-menu .nav-top .sub-1dli.on .sub-1da,
body[data-theme="dark"] .pc-menu .nav-top .sub-1dli:hover .sub-1da,
body[data-theme="dark"] .pc-menu .nav-top .sub-2dli.on .sub-2da,
body[data-theme="dark"] .pc-menu .nav-top .sub-2dli:hover .sub-2da {
    color: #ffffff !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
}

html.theme-dark .m-menu,
body.theme-dark .m-menu,
body[data-theme="dark"] .m-menu {
    background-color: #141417 !important;
    border-bottom: 1px solid #272730 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

html.theme-dark .m-menu .m-sub,
body.theme-dark .m-menu .m-sub,
body[data-theme="dark"] .m-menu .m-sub {
    background-color: #18181e !important;
    border-top: 1px solid #272730 !important;
}

html.theme-dark .m-menu .m-icon,
html.theme-dark .m-menu .m-list,
body.theme-dark .m-menu .m-icon,
body.theme-dark .m-menu .m-list,
body[data-theme="dark"] .m-menu .m-icon,
body[data-theme="dark"] .m-menu .m-list {
    border-color: #272730 !important;
    color: #e2e8f0 !important;
}

html.theme-dark .m-menu a,
body.theme-dark .m-menu a,
body[data-theme="dark"] .m-menu a {
    color: #d1d5db !important;
}

html.theme-dark .m-menu a:hover,
body.theme-dark .m-menu a:hover,
body[data-theme="dark"] .m-menu a:hover {
    color: #60a5fa !important;
}

/* --------------------------------------------------------------------------
   [P0] Mobile Offcanvas Sidebar Drawer (#sidebar-box)
   -------------------------------------------------------------------------- */
html.theme-dark #sidebar-box,
body.theme-dark #sidebar-box,
body[data-theme="dark"] #sidebar-box {
    background-color: #18181d !important;
    color: #e2e8f0 !important;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.6) !important;
}

html.theme-dark #sidebar-box .sidebar-content,
body.theme-dark #sidebar-box .sidebar-content,
body[data-theme="dark"] #sidebar-box .sidebar-content {
    background-color: #18181d !important;
}

html.theme-dark #sidebar-box .sidebar-menu,
body.theme-dark #sidebar-box .sidebar-menu,
body[data-theme="dark"] #sidebar-box .sidebar-menu {
    border-top-color: #272730 !important;
}

html.theme-dark #sidebar-box .sidebar-menu a,
html.theme-dark #sidebar-box .sidebar-list a,
body.theme-dark #sidebar-box .sidebar-menu a,
body.theme-dark #sidebar-box .sidebar-list a,
body[data-theme="dark"] #sidebar-box .sidebar-menu a,
body[data-theme="dark"] #sidebar-box .sidebar-list a {
    color: #d1d5db !important;
    border-bottom-color: #272730 !important;
}

html.theme-dark #sidebar-box .sidebar-menu a:hover,
html.theme-dark #sidebar-box .sidebar-list a:hover,
body.theme-dark #sidebar-box .sidebar-menu a:hover,
body.theme-dark #sidebar-box .sidebar-list a:hover,
body[data-theme="dark"] #sidebar-box .sidebar-menu a:hover,
body[data-theme="dark"] #sidebar-box .sidebar-list a:hover {
    background-color: #22222a !important;
    color: #ffffff !important;
}

html.theme-dark #sidebar-box .sidebar-menu .ca-head,
body.theme-dark #sidebar-box .sidebar-menu .ca-head,
body[data-theme="dark"] #sidebar-box .sidebar-menu .ca-head {
    border-bottom-color: #272730 !important;
}

html.theme-dark #sidebar-box .sidebar-menu .ca-head.active > a,
body.theme-dark #sidebar-box .sidebar-menu .ca-head.active > a,
body[data-theme="dark"] #sidebar-box .sidebar-menu .ca-head.active > a {
    color: #60a5fa !important;
}

html.theme-dark #sidebar-box .sidebar-menu .ca-sub,
body.theme-dark #sidebar-box .sidebar-menu .ca-sub,
body[data-theme="dark"] #sidebar-box .sidebar-menu .ca-sub {
    background-color: #141418 !important;
    border-bottom-color: #272730 !important;
}

html.theme-dark #sidebar-box .sidebar-menu .ca-sub li,
body.theme-dark #sidebar-box .sidebar-menu .ca-sub li,
body[data-theme="dark"] #sidebar-box .sidebar-menu .ca-sub li {
    border-bottom-color: #22222a !important;
}

html.theme-dark #sidebar-box .sidebar-menu .ca-sub li.on a,
body.theme-dark #sidebar-box .sidebar-menu .ca-sub li.on a,
body[data-theme="dark"] #sidebar-box .sidebar-menu .ca-sub li.on a {
    color: #60a5fa !important;
}

html.theme-dark #sidebar-box .sidebar-menu .ca-line,
body.theme-dark #sidebar-box .sidebar-menu .ca-line,
body[data-theme="dark"] #sidebar-box .sidebar-menu .ca-line {
    background-color: #22222a !important;
    color: #94a3b8 !important;
}

html.theme-dark #sidebar-box .sidebar-search,
body.theme-dark #sidebar-box .sidebar-search,
body[data-theme="dark"] #sidebar-box .sidebar-search {
    background-color: #141418 !important;
    border-color: #272730 !important;
}

html.theme-dark #sidebar-box .sidebar-wing-close,
body.theme-dark #sidebar-box .sidebar-wing-close,
body[data-theme="dark"] #sidebar-box .sidebar-wing-close {
    background-color: #22222a !important;
    border-color: #272730 !important;
    color: #e2e8f0 !important;
}

html.theme-dark #sidebar-box .sidebar-media,
body.theme-dark #sidebar-box .sidebar-media,
body[data-theme="dark"] #sidebar-box .sidebar-media {
    border-bottom-color: #272730 !important;
}

html.theme-dark #sidebar-box .sidebar-media .media-photo i,
html.theme-dark #sidebar-box .sidebar-login .profile .photo i,
body.theme-dark #sidebar-box .sidebar-media .media-photo i,
body.theme-dark #sidebar-box .sidebar-login .profile .photo i,
body[data-theme="dark"] #sidebar-box .sidebar-media .media-photo i,
body[data-theme="dark"] #sidebar-box .sidebar-login .profile .photo i {
    background-color: #282834 !important;
    color: #94a3b8 !important;
}

html.theme-dark #sidebar-box #sm.partner_menu,
html.theme-dark #sidebar-box #sm.partner_menu .sm_sub,
html.theme-dark .side-menu.partner_menu,
body.theme-dark #sidebar-box #sm.partner_menu,
body.theme-dark #sidebar-box #sm.partner_menu .sm_sub,
body.theme-dark .side-menu.partner_menu,
body[data-theme="dark"] #sidebar-box #sm.partner_menu,
body[data-theme="dark"] #sidebar-box #sm.partner_menu .sm_sub,
body[data-theme="dark"] .side-menu.partner_menu {
    background-color: #22222a !important;
    border-color: #2e2e3a !important;
}

/* --------------------------------------------------------------------------
   [P0 & P1] Board View Title & Thumbs (.view-wrap h1 & .view-good-box)
   -------------------------------------------------------------------------- */
html.theme-dark .view-wrap h1,
html.theme-dark .view-wrap h1.board-view-title,
body.theme-dark .view-wrap h1,
body.theme-dark .view-wrap h1.board-view-title,
body[data-theme="dark"] .view-wrap h1,
body[data-theme="dark"] .view-wrap h1.board-view-title {
    background-color: transparent !important;
    background-image: none !important;
    color: #f8fafc !important;
    border-bottom: 1px solid #272730 !important;
    text-shadow: none !important;
}

html.theme-dark .view-good-box a,
body.theme-dark .view-good-box a,
body[data-theme="dark"] .view-good-box a {
    background: #22222a !important;
    color: #e2e8f0 !important;
    border: 1px solid #3b3b48 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

html.theme-dark .view-good-box .view-good a:hover,
body.theme-dark .view-good-box .view-good a:hover,
body[data-theme="dark"] .view-good-box .view-good a:hover {
    background: #dc2626 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4) !important;
}

html.theme-dark .view-good-box .view-nogood a:hover,
body.theme-dark .view-good-box .view-nogood a:hover,
body[data-theme="dark"] .view-good-box .view-nogood a:hover {
    background: #374151 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(75, 85, 99, 0.4) !important;
}

/* Board View Tags (.view-tag) */
html.theme-dark .view-tag,
html.theme-dark .view-tag a,
body.theme-dark .view-tag,
body.theme-dark .view-tag a,
body[data-theme="dark"] .view-tag,
body[data-theme="dark"] .view-tag a {
    color: #94a3b8 !important;
}

html.theme-dark .view-tag a:hover,
body.theme-dark .view-tag a:hover,
body[data-theme="dark"] .view-tag a:hover {
    color: #60a5fa !important;
}

/* --------------------------------------------------------------------------
   [P1] Action Buttons (.title_btn, .btn-black, .btn-white)
   -------------------------------------------------------------------------- */
html.theme-dark .title_btn,
body.theme-dark .title_btn,
body[data-theme="dark"] .title_btn {
    background-color: #1e3a8a !important;
    border: 1px solid #2563eb !important;
    color: #f1f5f9 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

html.theme-dark .title_btn:hover,
body.theme-dark .title_btn:hover,
body[data-theme="dark"] .title_btn:hover {
    background-color: #2563eb !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5) !important;
}

html.theme-dark .btn.btn-black,
body.theme-dark .btn.btn-black,
body[data-theme="dark"] .btn.btn-black {
    background-color: #272730 !important;
    border: 1px solid #3e3e4d !important;
    color: #f1f5f9 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

html.theme-dark .btn.active.btn-black,
html.theme-dark .btn.btn-black:hover,
html.theme-dark .btn.btn-black:focus,
html.theme-dark .btn.btn-black:active,
body.theme-dark .btn.active.btn-black,
body.theme-dark .btn.btn-black:hover,
body.theme-dark .btn.btn-black:focus,
body.theme-dark .btn.btn-black:active,
body[data-theme="dark"] .btn.active.btn-black,
body[data-theme="dark"] .btn.btn-black:hover,
body[data-theme="dark"] .btn.btn-black:focus,
body[data-theme="dark"] .btn.btn-black:active {
    background-color: #383848 !important;
    border-color: #60a5fa !important;
    color: #ffffff !important;
}

html.theme-dark .btn.btn-white,
body.theme-dark .btn.btn-white,
body[data-theme="dark"] .btn.btn-white {
    background-color: #22222a !important;
    border: 1px solid #3e3e4d !important;
    color: #e2e8f0 !important;
    transition: background-color 0.18s ease, border-color 0.18s ease !important;
}

html.theme-dark .btn.active.btn-white,
html.theme-dark .btn.btn-white:hover,
html.theme-dark .btn.btn-white:focus,
html.theme-dark .btn.btn-white:active,
body.theme-dark .btn.active.btn-white,
body.theme-dark .btn.btn-white:hover,
body.theme-dark .btn.btn-white:focus,
body.theme-dark .btn.btn-white:active,
body[data-theme="dark"] .btn.active.btn-white,
body[data-theme="dark"] .btn.btn-white:hover,
body[data-theme="dark"] .btn.btn-white:focus,
body[data-theme="dark"] .btn.btn-white:active {
    background-color: #2e2e3a !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Quick Top/Down Scroll Button (.at-go .go-btn span)
   -------------------------------------------------------------------------- */
html.theme-dark .at-go .go-btn span,
body.theme-dark .at-go .go-btn span,
body[data-theme="dark"] .at-go .go-btn span {
    background: #282834 !important;
    border: 1px solid #3e3e4d !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   18. Community Board Lists (.list-board & All 29 Non-table Community Boards)
   Covers Miso-Basic 3.5, Miso-Choice, Basic-1vs1, Miso-Anonymity, op-coupon
   ========================================================================== */
html.theme-dark .list-board,
body.theme-dark .list-board,
body[data-theme="dark"] .list-board {
    background: transparent !important;
}

html.theme-dark .list-board .list-head,
body.theme-dark .list-board .list-head,
body[data-theme="dark"] .list-board .list-head {
    border-top: 2px solid var(--op-primary, #3dbf62) !important;
    border-bottom: 1px solid #2e2e38 !important;
    background-color: #1a1a22 !important;
    color: #94a3b8 !important;
}

html.theme-dark .list-board .list-body li,
body.theme-dark .list-board .list-body li,
body[data-theme="dark"] .list-board .list-body li {
    border-bottom: 1px solid #23232d !important;
    background-color: transparent !important;
    color: #cbd5e1 !important;
}

html.theme-dark .list-board .list-body li > div,
body.theme-dark .list-board .list-body li > div,
body[data-theme="dark"] .list-board .list-body li > div {
    color: #94a3b8 !important;
}

html.theme-dark .list-board .list-body li:nth-child(odd) > div,
body.theme-dark .list-board .list-body li:nth-child(odd) > div,
body[data-theme="dark"] .list-board .list-body li:nth-child(odd) > div {
    background-color: #17171e !important;
}

html.theme-dark .list-board .list-body li:nth-child(even) > div,
body.theme-dark .list-board .list-body li:nth-child(even) > div,
body[data-theme="dark"] .list-board .list-body li:nth-child(even) > div {
    background-color: transparent !important;
}

html.theme-dark .list-board .list-body li:hover > div,
html.theme-dark .list-board .list-body li:nth-child(odd):hover > div,
body.theme-dark .list-board .list-body li:hover > div,
body.theme-dark .list-board .list-body li:nth-child(odd):hover > div,
body[data-theme="dark"] .list-board .list-body li:hover > div,
body[data-theme="dark"] .list-board .list-body li:nth-child(odd):hover > div {
    background-color: #22222d !important;
    color: #f1f5f9 !important;
}

/* Notice Rows */
html.theme-dark .list-board .list-body li.is-notice-row > div,
html.theme-dark .list-board .list-body li.bg-light > div,
body.theme-dark .list-board .list-body li.is-notice-row > div,
body.theme-dark .list-board .list-body li.bg-light > div,
body[data-theme="dark"] .list-board .list-body li.is-notice-row > div,
body[data-theme="dark"] .list-board .list-body li.bg-light > div {
    background-color: rgba(61, 191, 98, 0.08) !important;
}

html.theme-dark .list-board .list-body li.is-notice-row:hover > div,
html.theme-dark .list-board .list-body li.bg-light:hover > div,
body.theme-dark .list-board .list-body li.is-notice-row:hover > div,
body.theme-dark .list-board .list-body li.bg-light:hover > div,
body[data-theme="dark"] .list-board .list-body li.is-notice-row:hover > div,
body[data-theme="dark"] .list-board .list-body li.bg-light:hover > div {
    background-color: rgba(61, 191, 98, 0.15) !important;
}

html.theme-dark .list-board .list-body li.is-last-notice,
body.theme-dark .list-board .list-body li.is-last-notice,
body[data-theme="dark"] .list-board .list-body li.is-last-notice {
    border-bottom: 2px solid #383848 !important;
}

/* Subject & Text Links */
html.theme-dark .list-board .list-body .wr-subject .item-subject,
body.theme-dark .list-board .list-body .wr-subject .item-subject,
body[data-theme="dark"] .list-board .list-body .wr-subject .item-subject {
    color: #e2e8f0 !important;
}

html.theme-dark .list-board .list-body .wr-subject .item-subject:hover,
body.theme-dark .list-board .list-body .wr-subject .item-subject:hover,
body[data-theme="dark"] .list-board .list-body .wr-subject .item-subject:hover {
    color: #60a5fa !important;
}

html.theme-dark .list-board .list-body .wr-subject .item-subject b,
body.theme-dark .list-board .list-body .wr-subject .item-subject b,
body[data-theme="dark"] .list-board .list-body .wr-subject .item-subject b {
    color: #f8fafc !important;
}

html.theme-dark .list-board .list-body .wr-name,
html.theme-dark .list-board .list-body .wr-name a,
body.theme-dark .list-board .list-body .wr-name,
body.theme-dark .list-board .list-body .wr-name a,
body[data-theme="dark"] .list-board .list-body .wr-name,
body[data-theme="dark"] .list-board .list-body .wr-name a {
    color: #cbd5e1 !important;
}

html.theme-dark .list-board .list-body .wr-name a:hover,
body.theme-dark .list-board .list-body .wr-name a:hover,
body[data-theme="dark"] .list-board .list-body .wr-name a:hover {
    color: #60a5fa !important;
}

html.theme-dark .list-board .wr-none,
body.theme-dark .list-board .wr-none,
body[data-theme="dark"] .list-board .wr-none {
    color: #64748b !important;
}

html.theme-dark .list-board .list-more a,
body.theme-dark .list-board .list-more a,
body[data-theme="dark"] .list-board .list-more a {
    color: #4b5563 !important;
}

html.theme-dark .list-board .list-more a:hover,
body.theme-dark .list-board .list-more a:hover,
body[data-theme="dark"] .list-board .list-more a:hover {
    color: #60a5fa !important;
}

html.theme-dark .list-board .thumb-icon a,
body.theme-dark .list-board .thumb-icon a,
body[data-theme="dark"] .list-board .thumb-icon a {
    background: #242430 !important;
    color: #64748b !important;
}

html.theme-dark .list-tags .nav,
body.theme-dark .list-tags .nav,
body[data-theme="dark"] .list-tags .nav {
    background: #181820 !important;
    border-color: #2e2e38 !important;
}

html.theme-dark .list-tags .tags-submit,
body.theme-dark .list-tags .tags-submit,
body[data-theme="dark"] .list-tags .tags-submit {
    border-color: #2e2e38 !important;
    background: #141418 !important;
}

html.theme-dark .list-tsearch,
body.theme-dark .list-tsearch,
body[data-theme="dark"] .list-tsearch {
    border-color: #2e2e38 !important;
    background: #181820 !important;
}

/* ==========================================================================
   19. Board Category Pill Chips (.list-category .nav-tabs)
   Overrides #ffffff !important from Miso-Basic 3.5 & Miso-Choice style.css
   ========================================================================== */
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a,
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li:first-child a,
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li:last-child a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li:first-child a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li:last-child a,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li a,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li:first-child a,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li:last-child a {
    background: #22222b !important;
    border-color: #383848 !important;
    color: #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a:hover,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li a:hover,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li a:hover {
    background: #2c2c38 !important;
    border-color: #4b4b5e !important;
    color: #f1f5f9 !important;
}

html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active a,
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:hover a,
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:first-child a,
html.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:last-child a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:hover a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:first-child a,
body.theme-dark .list-category .div-tab.tabs ul.nav-tabs li.active:last-child a,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li.active a,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li.active:hover a,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li.active:first-child a,
body[data-theme="dark"] .list-category .div-tab.tabs ul.nav-tabs li.active:last-child a {
    background: var(--op-primary, #3dbf62) !important;
    border-color: var(--op-primary, #3dbf62) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(61, 191, 98, 0.4) !important;
}

html.theme-dark .list-category .dropdown-menu,
body.theme-dark .list-category .dropdown-menu,
body[data-theme="dark"] .list-category .dropdown-menu {
    background-color: #1e1e26 !important;
    border: 1px solid #323242 !important;
}

html.theme-dark .list-category .dropdown-menu > li > a,
body.theme-dark .list-category .dropdown-menu > li > a,
body[data-theme="dark"] .list-category .dropdown-menu > li > a {
    color: #cbd5e1 !important;
}

html.theme-dark .list-category .dropdown-menu > li > a:hover,
body.theme-dark .list-category .dropdown-menu > li > a:hover,
body[data-theme="dark"] .list-category .dropdown-menu > li > a:hover {
    background-color: #2a2a36 !important;
    color: #60a5fa !important;
}

/* ==========================================================================
   20. Specialized Board Modules (Basic-Chulsuk, Talkbox, Webzine, Miso-Choice)
   ========================================================================== */
/* Basic-Chulsuk Speech Bubbles & Content */
html.theme-dark .board-list .talk-bubble,
body.theme-dark .board-list .talk-bubble,
body[data-theme="dark"] .board-list .talk-bubble {
    background-color: #1a1a22 !important;
    border-color: #2e2e38 !important;
    color: #e2e8f0 !important;
}

html.theme-dark .board-list .talk-right .talk-bubble:after,
body.theme-dark .board-list .talk-right .talk-bubble:after,
body[data-theme="dark"] .board-list .talk-right .talk-bubble:after {
    border-right-color: #1a1a22 !important;
}

html.theme-dark .board-list .talk-right .talk-bubble:before,
body.theme-dark .board-list .talk-right .talk-bubble:before,
body[data-theme="dark"] .board-list .talk-right .talk-bubble:before {
    border-right-color: #2e2e38 !important;
}

html.theme-dark .board-list .talk-left .talk-bubble:after,
body.theme-dark .board-list .talk-left .talk-bubble:after,
body[data-theme="dark"] .board-list .talk-left .talk-bubble:after {
    border-left-color: #1a1a22 !important;
}

html.theme-dark .board-list .talk-left .talk-bubble:before,
body.theme-dark .board-list .talk-left .talk-bubble:before,
body[data-theme="dark"] .board-list .talk-left .talk-bubble:before {
    border-left-color: #2e2e38 !important;
}

html.theme-dark .board-list .talk,
body.theme-dark .board-list .talk,
body[data-theme="dark"] .board-list .talk {
    background-color: #22222c !important;
    border-color: #323242 !important;
    color: #f1f5f9 !important;
}

html.theme-dark .board-list .talk a,
body.theme-dark .board-list .talk a,
body[data-theme="dark"] .board-list .talk a {
    color: #e2e8f0 !important;
}

html.theme-dark .board-list .talk a:hover,
body.theme-dark .board-list .talk a:hover,
body[data-theme="dark"] .board-list .talk a:hover {
    color: #60a5fa !important;
}

html.theme-dark .board-list .info,
html.theme-dark .board-list .info .text-muted,
body.theme-dark .board-list .info,
body.theme-dark .board-list .info .text-muted,
body[data-theme="dark"] .board-list .info,
body[data-theme="dark"] .board-list .info .text-muted {
    color: #94a3b8 !important;
}

html.theme-dark .board-list .info b,
body.theme-dark .board-list .info b,
body[data-theme="dark"] .board-list .info b {
    color: #f1f5f9 !important;
}

/* Notice & Status Bubbles */
html.theme-dark .chulsuk-notice .talk-bubble,
body.theme-dark .chulsuk-notice .talk-bubble,
body[data-theme="dark"] .chulsuk-notice .talk-bubble {
    background-color: rgba(61, 191, 98, 0.08) !important;
    border-color: rgba(61, 191, 98, 0.3) !important;
    color: #f1f5f9 !important;
}

html.theme-dark .chulsuk-notice .talk-right .talk-bubble:after,
body.theme-dark .chulsuk-notice .talk-right .talk-bubble:after,
body[data-theme="dark"] .chulsuk-notice .talk-right .talk-bubble:after {
    border-right-color: #17241c !important;
}

html.theme-dark .chulsuk-notice .talk-right .talk-bubble:before,
body.theme-dark .chulsuk-notice .talk-right .talk-bubble:before,
body[data-theme="dark"] .chulsuk-notice .talk-right .talk-bubble:before {
    border-right-color: rgba(61, 191, 98, 0.3) !important;
}

html.theme-dark .chulsuk-notice a,
body.theme-dark .chulsuk-notice a,
body[data-theme="dark"] .chulsuk-notice a {
    color: #f1f5f9 !important;
}

html.theme-dark .chulsuk-notice a:hover,
body.theme-dark .chulsuk-notice a:hover,
body[data-theme="dark"] .chulsuk-notice a:hover {
    color: #60a5fa !important;
}

/* Attendance Message Box & Submit */
html.theme-dark .chulsuk-msg,
body.theme-dark .chulsuk-msg,
body[data-theme="dark"] .chulsuk-msg {
    border-color: #2e2e38 !important;
    background-color: #181820 !important;
}

html.theme-dark #fchulsuk .msg-content .msg-cell.msg-submit,
body.theme-dark #fchulsuk .msg-content .msg-cell.msg-submit,
body[data-theme="dark"] #fchulsuk .msg-content .msg-cell.msg-submit {
    background: #242430 !important;
    border-color: #383848 !important;
    color: #e2e8f0 !important;
}

html.theme-dark #fchulsuk .msg-content .msg-cell.msg-submit:hover,
body.theme-dark #fchulsuk .msg-content .msg-cell.msg-submit:hover,
body[data-theme="dark"] #fchulsuk .msg-content .msg-cell.msg-submit:hover {
    background: #2d2d3c !important;
    color: #ffffff !important;
}

/* Photo & Option Buttons */
html.theme-dark .chk-photo,
body.theme-dark .chk-photo,
body[data-theme="dark"] .chk-photo {
    color: #94a3b8 !important;
}

html.theme-dark .chk-photo:hover,
body.theme-dark .chk-photo:hover,
body[data-theme="dark"] .chk-photo:hover {
    color: #f1f5f9 !important;
}

html.theme-dark .chk-photo.active,
body.theme-dark .chk-photo.active,
body[data-theme="dark"] .chk-photo.active {
    color: var(--op-accent, #ff490f) !important;
}

/* Attendance Calendar (list.calendar.skin.php) */
html.theme-dark .board-list .table-bordered,
body.theme-dark .board-list .table-bordered,
body[data-theme="dark"] .board-list .table-bordered {
    border-color: #2e2e38 !important;
}

html.theme-dark .board-list .table-bordered > tbody > tr.active > th,
html.theme-dark .board-list .table-bordered > thead > tr.active > th,
body.theme-dark .board-list .table-bordered > tbody > tr.active > th,
body.theme-dark .board-list .table-bordered > thead > tr.active > th,
body[data-theme="dark"] .board-list .table-bordered > tbody > tr.active > th,
body[data-theme="dark"] .board-list .table-bordered > thead > tr.active > th {
    background-color: #1e1e26 !important;
    border-color: #2e2e38 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .board-list .table-bordered > tbody > tr > td,
body.theme-dark .board-list .table-bordered > tbody > tr > td,
body[data-theme="dark"] .board-list .table-bordered > tbody > tr > td {
    background-color: #141418 !important;
    border-color: #282834 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .board-list .table-bordered > tbody > tr > td:hover,
body.theme-dark .board-list .table-bordered > tbody > tr > td:hover,
body[data-theme="dark"] .board-list .table-bordered > tbody > tr > td:hover {
    background-color: #1e1e28 !important;
}

html.theme-dark .board-list .table-bordered > tbody > tr > td.active,
body.theme-dark .board-list .table-bordered > tbody > tr > td.active,
body[data-theme="dark"] .board-list .table-bordered > tbody > tr > td.active {
    background-color: #242432 !important;
    outline: 2px solid var(--op-primary, #3dbf62) !important;
    outline-offset: -2px;
}

html.theme-dark .board-list .table-bordered td .red,
html.theme-dark .board-list .table-bordered th.red,
body.theme-dark .board-list .table-bordered td .red,
body.theme-dark .board-list .table-bordered th.red,
body[data-theme="dark"] .board-list .table-bordered td .red,
body[data-theme="dark"] .board-list .table-bordered th.red {
    color: #f87171 !important;
}

html.theme-dark .board-list .table-bordered td .blue,
html.theme-dark .board-list .table-bordered th.blue,
body.theme-dark .board-list .table-bordered td .blue,
body.theme-dark .board-list .table-bordered th.blue,
body[data-theme="dark"] .board-list .table-bordered td .blue,
body[data-theme="dark"] .board-list .table-bordered th.blue {
    color: #60a5fa !important;
}

html.theme-dark .board-list .table-bordered td .green,
body.theme-dark .board-list .table-bordered td .green,
body[data-theme="dark"] .board-list .table-bordered td .green {
    color: #4ade80 !important;
}

/* Calendar Datepicker Controls */
html.theme-dark #chulsuk_datepicker .input-group-addon,
body.theme-dark #chulsuk_datepicker .input-group-addon,
body[data-theme="dark"] #chulsuk_datepicker .input-group-addon {
    background-color: #22222a !important;
    border-color: #383848 !important;
    color: #a1a1aa !important;
}

html.theme-dark #chulsuk_datepicker input.form-control,
body.theme-dark #chulsuk_datepicker input.form-control,
body[data-theme="dark"] #chulsuk_datepicker input.form-control {
    background-color: #181820 !important;
    border-color: #383848 !important;
    color: #f1f5f9 !important;
}

html.theme-dark #chulsuk_datepicker .input-group-btn .btn-gray,
body.theme-dark #chulsuk_datepicker .input-group-btn .btn-gray,
body[data-theme="dark"] #chulsuk_datepicker .input-group-btn .btn-gray {
    background-color: #282834 !important;
    border-color: #383848 !important;
    color: #cbd5e1 !important;
}

html.theme-dark #chulsuk_datepicker .input-group-btn .btn-gray:hover,
body.theme-dark #chulsuk_datepicker .input-group-btn .btn-gray:hover,
body[data-theme="dark"] #chulsuk_datepicker .input-group-btn .btn-gray:hover {
    background-color: #323242 !important;
    color: #ffffff !important;
}

/* Bootstrap Datetimepicker Widget in Dark Mode */
html.theme-dark .bootstrap-datetimepicker-widget.dropdown-menu,
body.theme-dark .bootstrap-datetimepicker-widget.dropdown-menu,
body[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu {
    background-color: #1e1e26 !important;
    border: 1px solid #383848 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table thead tr:first-child th,
body.theme-dark .bootstrap-datetimepicker-widget table thead tr:first-child th,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table thead tr:first-child th {
    color: #f1f5f9 !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
body.theme-dark .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background-color: #282836 !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table th.dow,
body.theme-dark .bootstrap-datetimepicker-widget table th.dow,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table th.dow {
    color: #94a3b8 !important;
    border-bottom: 1px solid #2e2e38 !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table td.day,
body.theme-dark .bootstrap-datetimepicker-widget table td.day,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day {
    color: #cbd5e1 !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table td.day:hover,
body.theme-dark .bootstrap-datetimepicker-widget table td.day:hover,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day:hover {
    background-color: #2c2c3a !important;
    color: #ffffff !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table td.day.old,
html.theme-dark .bootstrap-datetimepicker-widget table td.day.new,
body.theme-dark .bootstrap-datetimepicker-widget table td.day.old,
body.theme-dark .bootstrap-datetimepicker-widget table td.day.new,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day.old,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day.new {
    color: #4b5563 !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table td.day.active,
html.theme-dark .bootstrap-datetimepicker-widget table td.day.active:hover,
body.theme-dark .bootstrap-datetimepicker-widget table td.day.active,
body.theme-dark .bootstrap-datetimepicker-widget table td.day.active:hover,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day.active,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day.active:hover {
    background-color: var(--op-primary, #3dbf62) !important;
    color: #ffffff !important;
}

html.theme-dark .bootstrap-datetimepicker-widget table td.day.today:before,
body.theme-dark .bootstrap-datetimepicker-widget table td.day.today:before,
body[data-theme="dark"] .bootstrap-datetimepicker-widget table td.day.today:before {
    border-bottom-color: var(--op-primary, #3dbf62) !important;
}

html.theme-dark .bootstrap-datetimepicker-widget.bottom:before,
body.theme-dark .bootstrap-datetimepicker-widget.bottom:before,
body[data-theme="dark"] .bootstrap-datetimepicker-widget.bottom:before {
    border-bottom-color: #383848 !important;
}

html.theme-dark .bootstrap-datetimepicker-widget.bottom:after,
body.theme-dark .bootstrap-datetimepicker-widget.bottom:after,
body[data-theme="dark"] .bootstrap-datetimepicker-widget.bottom:after {
    border-bottom-color: #1e1e26 !important;
}

/* Bootstrap Popovers (Random Message) */
html.theme-dark .popover,
body.theme-dark .popover,
body[data-theme="dark"] .popover {
    background-color: #1e1e26 !important;
    border-color: #383848 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
    color: #e2e8f0 !important;
}

html.theme-dark .popover .popover-title,
body.theme-dark .popover .popover-title,
body[data-theme="dark"] .popover .popover-title {
    background-color: #262634 !important;
    border-bottom: 1px solid #383848 !important;
    color: #f1f5f9 !important;
    font-weight: bold;
}

html.theme-dark .popover .popover-content,
body.theme-dark .popover .popover-content,
body[data-theme="dark"] .popover .popover-content {
    background-color: #1e1e26 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .popover.bottom > .arrow,
body.theme-dark .popover.bottom > .arrow,
body[data-theme="dark"] .popover.bottom > .arrow {
    border-bottom-color: #383848 !important;
}

html.theme-dark .popover.bottom > .arrow:after,
body.theme-dark .popover.bottom > .arrow:after,
body[data-theme="dark"] .popover.bottom > .arrow:after {
    border-bottom-color: #262634 !important;
}

html.theme-dark .popover.top > .arrow,
body.theme-dark .popover.top > .arrow,
body[data-theme="dark"] .popover.top > .arrow {
    border-top-color: #383848 !important;
}

html.theme-dark .popover.top > .arrow:after,
body.theme-dark .popover.top > .arrow:after,
body[data-theme="dark"] .popover.top > .arrow:after {
    border-top-color: #1e1e26 !important;
}

html.theme-dark .msg-icon p,
body.theme-dark .msg-icon p,
body[data-theme="dark"] .msg-icon p {
    color: #cbd5e1 !important;
}

/* Admin Attendance Ranking */
html.theme-dark .attendance_rank li,
body.theme-dark .attendance_rank li,
body[data-theme="dark"] .attendance_rank li {
    background-color: #262632 !important;
    border: 1px solid #383848 !important;
}

html.theme-dark .attendance_rank li .attendance_rank_nick,
body.theme-dark .attendance_rank li .attendance_rank_nick,
body[data-theme="dark"] .attendance_rank li .attendance_rank_nick {
    color: #f1f5f9 !important;
}

html.theme-dark .attendance_rank li .attendance_rank_day,
body.theme-dark .attendance_rank li .attendance_rank_day,
body[data-theme="dark"] .attendance_rank li .attendance_rank_day {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

/* Attendance Explanation (PC & Mobile) */
html.theme-dark .chulsuk-explain .top_explain,
body.theme-dark .chulsuk-explain .top_explain,
body[data-theme="dark"] .chulsuk-explain .top_explain {
    background-color: #181820 !important;
    color: #94a3b8 !important;
    border: 1px solid #2e2e38 !important;
}

html.theme-dark .chulsuk-explain .bonus_explain_wrap,
body.theme-dark .chulsuk-explain .bonus_explain_wrap,
body[data-theme="dark"] .chulsuk-explain .bonus_explain_wrap {
    background-color: transparent !important;
}

html.theme-dark .chulsuk-explain .bonus_explain_wrap .bonus_explain,
body.theme-dark .chulsuk-explain .bonus_explain_wrap .bonus_explain,
body[data-theme="dark"] .chulsuk-explain .bonus_explain_wrap .bonus_explain {
    border-bottom: 1px solid #282834 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .chulsuk-explain .bonus_explain_wrap .bonus_explain .day,
body.theme-dark .chulsuk-explain .bonus_explain_wrap .bonus_explain .day,
body[data-theme="dark"] .chulsuk-explain .bonus_explain_wrap .bonus_explain .day {
    color: #f1f5f9 !important;
}

html.theme-dark .chulsuk-explain .bonus_explain_wrap .bonus_explain .point,
body.theme-dark .chulsuk-explain .bonus_explain_wrap .bonus_explain .point,
body[data-theme="dark"] .chulsuk-explain .bonus_explain_wrap .bonus_explain .point {
    color: #60a5fa !important;
}

html.theme-dark .chulsuk-explain .bonus_explain_wrap .bonus_explain .chulsuk_add_explain,
html.theme-dark .chulsuk_add_explain,
body.theme-dark .chulsuk_add_explain,
body[data-theme="dark"] .chulsuk_add_explain {
    color: #fb923c !important;
}

html.theme-dark .chulsuk-table-explain,
body.theme-dark .chulsuk-table-explain,
body[data-theme="dark"] .chulsuk-table-explain {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    border-color: #2e2e38 !important;
}

html.theme-dark .chulsuk-table-explain td,
body.theme-dark .chulsuk-table-explain td,
body[data-theme="dark"] .chulsuk-table-explain td {
    background-color: #1a1a22 !important;
    border-color: #2e2e38 !important;
    color: #cbd5e1 !important;
}

/* Attendance Policy Modal (#chulsukModal) */
html.theme-dark #chulsukModal .table-bordered,
body.theme-dark #chulsukModal .table-bordered,
body[data-theme="dark"] #chulsukModal .table-bordered {
    border-color: #2e2e38 !important;
}

html.theme-dark #chulsukModal .table-bordered tr.active th,
body.theme-dark #chulsukModal .table-bordered tr.active th,
body[data-theme="dark"] #chulsukModal .table-bordered tr.active th {
    background-color: #282834 !important;
    border-color: #383848 !important;
    color: #f1f5f9 !important;
}

html.theme-dark #chulsukModal .table-bordered td,
body.theme-dark #chulsukModal .table-bordered td,
body[data-theme="dark"] #chulsukModal .table-bordered td {
    background-color: #1a1a22 !important;
    border-color: #2e2e38 !important;
    color: #cbd5e1 !important;
}

/* Talkbox Sub-Skin */
html.theme-dark .list-item .list-details .member,
html.theme-dark .list-item .list-details .guest,
body.theme-dark .list-item .list-details .member,
body.theme-dark .list-item .list-details .guest,
body[data-theme="dark"] .list-item .list-details .member,
body[data-theme="dark"] .list-item .list-details .guest {
    color: #f1f5f9 !important;
}

/* Webzine Sub-Skin */
html.theme-dark .list-item,
body.theme-dark .list-item,
body[data-theme="dark"] .list-item {
    border-bottom-color: #282834 !important;
}

html.theme-dark .list-item .list-details,
body.theme-dark .list-item .list-details,
body[data-theme="dark"] .list-item .list-details {
    border-color: #2e2e38 !important;
}

/* Miso-Choice & View Elements */
html.theme-dark .comment-box,
body.theme-dark .comment-box,
body[data-theme="dark"] .comment-box {
    background-color: #1a1a22 !important;
    border-color: #2e2e38 !important;
}

html.theme-dark .comment-media .media,
body.theme-dark .comment-media .media,
body[data-theme="dark"] .comment-media .media {
    border-top-color: #282834 !important;
}

html.theme-dark .view-good-box a,
body.theme-dark .view-good-box a,
body[data-theme="dark"] .view-good-box a {
    background: #242430 !important;
    color: #e2e8f0 !important;
    border: 1px solid #383848 !important;
}

html.theme-dark .view-wrap h1,
body.theme-dark .view-wrap h1,
body[data-theme="dark"] .view-wrap h1 {
    color: #f1f5f9 !important;
}

html.theme-dark .view-head .list-group-item,
body.theme-dark .view-head .list-group-item,
body[data-theme="dark"] .view-head .list-group-item {
    background: #1c1c24 !important;
    border-color: #2e2e38 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .view-author-none,
body.theme-dark .view-author-none,
body[data-theme="dark"] .view-author-none {
    border-top-color: #2e2e38 !important;
}

/* ==========================================================================
   21. Authentication & Sub-Pages (Login, Memo, Point, Profile, Password Lost)
   ========================================================================== */
html.theme-dark .ryan-login-daum > .container > .row > [class^="col-"],
body.theme-dark .ryan-login-daum > .container > .row > [class^="col-"],
body[data-theme="dark"] .ryan-login-daum > .container > .row > [class^="col-"] {
    background: #181820 !important;
    color: #e2e8f0 !important;
    border: 1px solid #2e2e38 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html.theme-dark .ryan-login-daum .form-header,
body.theme-dark .ryan-login-daum .form-header,
body[data-theme="dark"] .ryan-login-daum .form-header {
    border-bottom-color: #2e2e38 !important;
}

html.theme-dark .ryan-login-daum .login-details,
html.theme-dark .ryan-login-daum .login-details a,
body.theme-dark .ryan-login-daum .login-details,
body.theme-dark .ryan-login-daum .login-details a,
body[data-theme="dark"] .ryan-login-daum .login-details,
body[data-theme="dark"] .ryan-login-daum .login-details a {
    color: #94a3b8 !important;
}

html.theme-dark .ryan-login-daum .login-details a:hover,
body.theme-dark .ryan-login-daum .login-details a:hover,
body[data-theme="dark"] .ryan-login-daum .login-details a:hover {
    color: #60a5fa !important;
}

html.theme-dark .ryan-login-daum .auto-login .checkbox-label,
body.theme-dark .ryan-login-daum .auto-login .checkbox-label,
body[data-theme="dark"] .ryan-login-daum .auto-login .checkbox-label {
    background: #242430 !important;
    border-color: #383848 !important;
}

html.theme-dark .ryan-login-daum .auto-login .checkbox-label:before,
body.theme-dark .ryan-login-daum .auto-login .checkbox-label:before,
body[data-theme="dark"] .ryan-login-daum .auto-login .checkbox-label:before {
    color: #94a3b8 !important;
}

/* Sub-title header */
html.theme-dark .sub-title,
body.theme-dark .sub-title,
body[data-theme="dark"] .sub-title {
    border-top: 4px solid #3b82f6 !important;
}

html.theme-dark .sub-title i,
body.theme-dark .sub-title i,
body[data-theme="dark"] .sub-title i {
    background: #282834 !important;
    color: #94a3b8 !important;
}

/* Memo pages */
html.theme-dark .memo-send-info,
body.theme-dark .memo-send-info,
body[data-theme="dark"] .memo-send-info {
    background: #1a1a22 !important;
    border-bottom: 1px solid #2e2e38 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .memo-content,
body.theme-dark .memo-content,
body[data-theme="dark"] .memo-content {
    border-bottom: 1px solid #2e2e38 !important;
    color: #e2e8f0 !important;
}

/* MyPage / MyPost / MyResponse */
html.theme-dark .mypost-media .media,
body.theme-dark .mypost-media .media,
body[data-theme="dark"] .mypost-media .media {
    border-bottom-color: #282834 !important;
}

html.theme-dark .myresponse-skin .media,
body.theme-dark .myresponse-skin .media,
body[data-theme="dark"] .myresponse-skin .media {
    border-top-color: #282834 !important;
}

html.theme-dark .mypage-skin .img-photo i,
html.theme-dark .profile-skin .img-photo i,
html.theme-dark .myphoto i,
html.theme-dark .mypost-media .photo i,
body.theme-dark .mypage-skin .img-photo i,
body.theme-dark .profile-skin .img-photo i,
body.theme-dark .myphoto i,
body.theme-dark .mypost-media .photo i,
body[data-theme="dark"] .mypage-skin .img-photo i,
body[data-theme="dark"] .profile-skin .img-photo i,
body[data-theme="dark"] .myphoto i,
body[data-theme="dark"] .mypost-media .photo i {
    background: #282834 !important;
    color: #94a3b8 !important;
}

/* ==========================================================================
   22. Bootstrap Components & Layout Utilities
   ========================================================================== */
html.theme-dark .panel-footer,
body.theme-dark .panel-footer,
body[data-theme="dark"] .panel-footer {
    background-color: #1a1a22 !important;
    border-top: 1px solid #2e2e38 !important;
    color: #94a3b8 !important;
}

html.theme-dark .input-group-addon,
body.theme-dark .input-group-addon,
body[data-theme="dark"] .input-group-addon {
    background-color: #22222b !important;
    border-color: #383848 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .alert-info,
body.theme-dark .alert-info,
body[data-theme="dark"] .alert-info {
    background-color: rgba(37, 99, 235, 0.12) !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    color: #93c5fd !important;
}

html.theme-dark .alert-success,
body.theme-dark .alert-success,
body[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}

html.theme-dark .alert-warning,
body.theme-dark .alert-warning,
body[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fde68a !important;
}

html.theme-dark .alert-danger,
body.theme-dark .alert-danger,
body[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}

html.theme-dark .btn-default,
html.theme-dark .btn-lightgray,
body.theme-dark .btn-default,
body.theme-dark .btn-lightgray,
body[data-theme="dark"] .btn-default,
body[data-theme="dark"] .btn-lightgray {
    background-color: #22222b !important;
    border-color: #383848 !important;
    color: #cbd5e1 !important;
}

html.theme-dark .btn-default:hover,
html.theme-dark .btn-lightgray:hover,
body.theme-dark .btn-default:hover,
body.theme-dark .btn-lightgray:hover,
body[data-theme="dark"] .btn-default:hover,
body[data-theme="dark"] .btn-lightgray:hover {
    background-color: #2c2c38 !important;
    border-color: #4b4b5e !important;
    color: #ffffff !important;
}

html.theme-dark .text-muted,
body.theme-dark .text-muted,
body[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}

html.theme-dark .div-title-underline-thin,
html.theme-dark .div-title-underline-bold,
body.theme-dark .div-title-underline-thin,
body.theme-dark .div-title-underline-bold,
body[data-theme="dark"] .div-title-underline-thin,
body[data-theme="dark"] .div-title-underline-bold {
    border-color: #2e2e38 !important;
}

/* ==========================================================================
   23. Mobile Top Header & Slide Sub-Menus
   ========================================================================== */
.m-theme-toggle-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    padding: 0 4px !important;
    cursor: pointer !important;
}

/* Mobile review & coupon holder inline background override */
html.theme-dark .review_holder > div[style*="#ecf0f1"],
html.theme-dark .slide_menu [style*="#ecf0f1"],
body.theme-dark .review_holder > div[style*="#ecf0f1"],
body.theme-dark .slide_menu [style*="#ecf0f1"],
body[data-theme="dark"] .review_holder > div[style*="#ecf0f1"],
body[data-theme="dark"] .slide_menu [style*="#ecf0f1"] {
    background-color: #1a1a22 !important;
    border: 1px solid #2e2e38 !important;
}

html.theme-dark .review_holder .main_sub_menu,
body.theme-dark .review_holder .main_sub_menu,
body[data-theme="dark"] .review_holder .main_sub_menu {
    color: #cbd5e1 !important;
    border-bottom: 1px solid #282834 !important;
}

html.theme-dark .review_holder .main_sub_menu:hover,
body.theme-dark .review_holder .main_sub_menu:hover,
body[data-theme="dark"] .review_holder .main_sub_menu:hover {
    color: #60a5fa !important;
}