@charset "utf-8";

/********************************************************
■ Dark Mode Override
- 원본 theme.css 아래에서 추가로 불러오는 다크모드 전용 CSS입니다.
- 전체 theme.css를 복사하지 말고 색상/테두리/폼 영역만 덮어씌우는 방식입니다.
********************************************************/

:root {
    --dark-bg: #111216;
    --dark-wrap: #17181d;
    --dark-box: #1f2026;
    --dark-box-2: #25262d;
    --dark-border: #343640;
    --dark-border-soft: #2b2d35;
    --dark-text: #e8e8ea;
    --dark-text-soft: #b8bac4;
    --dark-muted: #8b8e99;
    --dark-point: #e6345c;
    --dark-point-hover: #f24169;
}

html,
body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body,
.wrapper {
    background: var(--dark-bg) !important;
}

a {
    color: var(--dark-text) !important;
}

a:hover,
a:focus,
a:active {
    color: var(--dark-point-hover) !important;
}

/* Bootstrap / common */
.bg-white,
.bg-light,
.card,
.card-body,
.dropdown-menu,
.modal-content,
.popover,
.list-group-item,
.table,
.table td,
.table th {
    background-color: var(--dark-box) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
    border-color: var(--dark-border) !important;
}

.text-muted,
.text-secondary,
small,
.small {
    color: var(--dark-text-soft) !important;
}

hr,
hr.hr::before,
.na-list .na-line {
    border-color: var(--dark-border-soft) !important;
    background-color: var(--dark-border-soft) !important;
}

/* Layout / content boxes */
.nt-container-wide,
.content_area,
#bo_list_wrap,
#bo_w,
#bo_v,
#connect_list,
#tag_box,
#find_info,
#noti_wrap,
#mb_login,
#new_wrap,
#faq_wrap,
#qa_wrap,
#singo_wrap,
#register_wrap,
#register_form_wrap,
#outlogin_wrap,
.side-widget,
.main-wdiget,
.main-latest,
.latest_all,
.latest_content,
.left-info,
.bojng-slider,
.chat-wrap {
    background: var(--dark-box) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* 위젯 제목 */
.main_board_title {
    background: var(--dark-box-2) !important;
    color: var(--dark-text) !important;
    border-bottom-color: var(--dark-point) !important;
}

/* PC 메뉴 서브 */
#nt_menu .sub-2div,
.nt-menu .sub-1div,
.nt-menu-full .sub-1div,
.nt-menu-full .me-ul {
    background: var(--dark-box) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,.45) !important;
}

#nt_menu .sub-2da,
#nt_menu .sub-2line,
.nt-menu .sub-1da,
.nt-menu .sub-1line,
.nt-menu-full .sub-1da,
.nt-menu-full .sub-1line {
    color: var(--dark-text) !important;
    background: var(--dark-box) !important;
    border-color: var(--dark-border) !important;
}

#nt_menu .sub-2dli.on .sub-2da,
#nt_menu .sub-2dli:hover .sub-2da,
.nt-menu .sub-1dli.on .sub-1da,
.nt-menu .sub-1dli:hover .sub-1da,
.nt-menu-full .sub-1dli.on .sub-1da,
.nt-menu-full .sub-1dli:hover .sub-1da {
    color: var(--dark-point-hover) !important;
    background: var(--dark-box-2) !important;
    border-color: var(--dark-border) !important;
}

#nt_menu_mobile .gra-left-white {
    background: linear-gradient(to left, rgba(17,18,22,0) 0, var(--dark-bg) 60%) !important;
}

#nt_menu_mobile .gra-right-white {
    background: linear-gradient(to right, rgba(17,18,22,0) 0, var(--dark-bg) 60%) !important;
}

#nt_menu_mobile .d-block.on {
    background: rgba(255,255,255,0.08) !important;
}

/* 모바일 좌/우 메뉴 */
#left-nav-container,
#right-nav-container,
.left-nav-wrap,
.right-nav-wrap,
.left-nav-wrap .nav-wrap,
.right-nav-wrap .right-wrap {
    background: var(--dark-box) !important;
    color: var(--dark-text) !important;
}

.left-nav-wrap .sidemenu-list li .me-a {
    border-bottom-color: var(--dark-border) !important;
}

.left-nav-wrap .sidemenu-list .me-line1 .me-a1,
.left-nav-wrap .sidemenu-list .me-line2 .me-a2 {
    background: var(--dark-box-2) !important;
}

.left-nav-wrap .sidemenu-list .tree-toggle {
    color: var(--dark-text-soft) !important;
}

/* 게시판 / 그누보드 기본 요소 */
#bo_list,
#bo_v,
#bo_w,
#bo_cate,
#bo_search,
.bo_fx,
.tbl_head01,
.tbl_head01 thead th,
.tbl_head01 tbody td,
.tbl_frm01 th,
.tbl_frm01 td,
#bo_v_con,
#bo_v_info,
#bo_v_atc,
#bo_v_top,
#bo_v_share,
#bo_vc,
#bo_vc_w,
#bo_w .write_div,
#bo_w .bo_w_tit,
#bo_w .bo_w_info,
#bo_w .bo_w_link,
#bo_w .bo_w_flie,
#bo_w .bo_w_option {
    background: transparent !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

#bo_list_total,
#bo_list .td_name,
#bo_list .td_datetime,
#bo_list .td_num,
#bo_list .td_hit,
#bo_v_info,
#bo_v_info strong,
#bo_v_info span,
#bo_v_con,
#bo_v_con p,
.view-content,
.view-content p,
.view-content div,
.view-content span {
    color: var(--dark-text) !important;
}

#bo_cate a,
#bo_cate #bo_cate_on {
    background: var(--dark-box-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

#bo_cate #bo_cate_on,
#bo_cate a:hover {
    color: #fff !important;
    background: var(--dark-point) !important;
}

/* 폼 요소 */
.form-control,
.custom-select,
.custom-file-label,
.input-group-text,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select {
    background-color: #14151a !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.form-control:focus,
.custom-select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus {
    background-color: #181a20 !important;
    color: #fff !important;
    border-color: var(--dark-point) !important;
    box-shadow: 0 0 0 .2rem rgba(230,52,92,.18) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--dark-muted) !important;
}

.form-control-plaintext {
    color: var(--dark-text) !important;
}

/* 버튼 / 페이지네이션 */
.btn-light,
.btn-white,
.btn-outline-secondary,
.page-link {
    background: var(--dark-box-2) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

.btn-light:hover,
.btn-white:hover,
.btn-outline-secondary:hover,
.page-link:hover {
    background: var(--dark-point) !important;
    color: #fff !important;
    border-color: var(--dark-point) !important;
}

.page-item.active .page-link {
    background-color: var(--dark-point) !important;
    color: #fff !important;
    border-color: var(--dark-point) !important;
}

/* Owl 네비 */
.owl-slider .owl-carousel .owl-nav button {
    background: var(--dark-box-2) !important;
    color: var(--dark-text-soft) !important;
    border-color: var(--dark-border) !important;
}

.owl-slider .owl-carousel .owl-nav button:hover {
    background: var(--dark-point) !important;
    color: #fff !important;
}

/* Copyright */
.copyright {
    background-color: var(--dark-box) !important;
    color: var(--dark-text-soft) !important;
    border-top-color: var(--dark-border) !important;
}

.copyright .copyright-menu-list > div:after {
    background: var(--dark-border) !important;
}

/* 스크롤바 */
::-webkit-scrollbar-track {
    background: var(--dark-bg) !important;
}

::-webkit-scrollbar-thumb {
    background: var(--dark-point) !important;
    border-color: var(--dark-bg) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-point-hover) !important;
}

/* 이미지/iframe 영역은 어둡게 강제하지 않음 */
img,
iframe,
video {
    filter: none !important;
}

body.is-dark {
    background:#121417;
    color:#e5e5e5;
}

body.is-dark .content_area,
body.is-dark .side-widget,
body.is-dark .main-widget,
body.is-dark #outlogin_wrap,
body.is-dark #bo_list_wrap,
body.is-dark #bo_v,
body.is-dark #bo_w {
    background:#1a1e24;
    border-color:#303744;
    color:#e5e5e5;
}