@charset "utf-8";
/**
 * colormode
 * 
 */

/******************
    google font Noto Sans KR
******************/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

:root {
	--font-family: "Noto Sans KR", sans-serif;
	--font-family-code: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--k-c-transform: 0.3s ease;
    --k-menu-transform: 0.3s ease;
    --k-footer-transform: 0.3s ease;
    --k-menu-opacity: opacity 0.3s ease !important;
	--k-icon-dark: none;
	--k-icon-light: block;

	--k-text: #2c3e50;
	--k-bg: #ffffff;
	--k-bg-header: #ffffff;
	--k-bg-sidebar: #2d3646;
	--k-bg-main: #f9f9f9;
	--k-bg-panel: #ffffff;
	--k-bg-table: #ffffff;
	--k-border: #e5e5e5;
}

html.dark {
	--k-icon-dark: block;
	--k-icon-light: none;

    --k-text: #adbac7;
	--k-bg: #22272e;
	--k-bg-header: #2d333b;
	--k-bg-sidebar: #2d333b;
	--k-bg-main: #1c2128;
	--k-bg-panel: #2d333b;
	--k-bg-table: #22272e;
	--k-border: #444c56;
}

html,
body {
	padding: 0;
	margin: 0;
	background-color: var(--k-bg);
    transition: background-color var(--k-c-transform);
}

html.dark {
	color-scheme: dark;
}

html {
	font-size: 16px;
}

body {
	font-family: var(--font-family);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1rem;
	color: var(--k-text);
	transition: color var(--k-c-transform);
}

/* 컬러 모드 토글 버튼 */
.toggle-color-mode-button {
	display: flex;
	margin: auto;
	margin-left: 1rem;
	border: 0;
	background: none;
	color: var(--k-text);
	opacity: 0.8;
	cursor: pointer;
	padding: 0.5rem;
}

@media print {
	.toggle-color-mode-button {
		display: none;
	}
}

.toggle-color-mode-button:hover {
	opacity: 1;
}

.toggle-color-mode-button .icon {
	width: 1.25rem;
	height: 1.25rem;
}

.icon.dark {
	display: var(--k-icon-dark);
}

.icon.light {
	display: var(--k-icon-light);
}

svg.icon {
    fill: currentcolor;
}

/* ============================================
   레이아웃 구조
============================================ */

/* 메인 컨테이너 */
.container.body,
.main_container {
	background-color: var(--k-bg) !important;
	transition: background-color var(--k-c-transform);
}

/* 사이드바 */
.left_col {
	background-color: var(--k-bg-sidebar) !important;
	transition: background-color var(--k-c-transform);
}

/* 상단 네비게이션 */
.top_nav {
	background-color: var(--k-bg-header) !important;
	transition: background-color var(--k-c-transform);
}

html.dark .top_nav {
	border-bottom: 1px solid var(--k-border);
}




.top_nav .nav_menu {
	background-color: var(--k-bg-header) !important;
}

/* 메인 콘텐츠 영역 */
.right_col {
	background-color: var(--k-bg-main) !important;
	transition: background-color var(--k-c-transform);
}

/* ============================================
   패널 및 카드
============================================ */

html.dark .x_panel {
	background-color: var(--k-bg-panel) !important;
	border-color: var(--k-border) !important;
}

html.dark .x_title {
	border-bottom-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .x_title h2,
html.dark .x_title h3,
html.dark .x_title h4 {
	color: #ffffff !important;
}

html.dark .x_content {
	color: var(--k-text) !important;
}

/* ============================================
   테이블
============================================ */

html.dark .table-responsive {
	background-color: var(--k-bg-table) !important;
}

html.dark .table {
	color: #ffffff !important;
	background-color: var(--k-bg-table) !important;
	border-color: var(--k-border) !important;
}

html.dark .table thead {
	background-color: var(--k-bg-panel) !important;
}

html.dark .table thead th {
	background-color: var(--k-bg-panel) !important;
	color: #ffffff !important;
	border-color: var(--k-border) !important;
}

html.dark .table tbody tr {
	background-color: var(--k-bg-table) !important;
	border-color: var(--k-border) !important;
}

html.dark .table tbody td {
	color:  #ffffff  !important;
	border-color: var(--k-border) !important;
	background-color: var(--k-bg-table) !important;
}

html.dark .table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .table-striped tbody tr:nth-of-type(odd) td {
	background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .table-bordered {
	border-color: var(--k-border) !important;
}

html.dark .table-bordered th,
html.dark .table-bordered td {
	border-color: var(--k-border) !important;
}

html.dark .table-hover tbody tr:hover {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark .table-hover tbody tr:hover td {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* jambo_table 특수 처리 */
html.dark .jambo_table tbody tr {
	background-color: var(--k-bg-table) !important;
}

html.dark .jambo_table tbody td {
	background-color: var(--k-bg-table) !important;
}

html.dark .table a {
	color: var(--k-text) !important;

}


/* ============================================
   폼 요소
============================================ */

html.dark .form-control {
	background-color: var(--k-bg-table) !important;
	border-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .form-control:focus {
	background-color: var(--k-bg-panel) !important;
	border-color: #539bf5 !important;
	color:  #ffffff  !important;
	box-shadow: 0 0 0 0.2rem rgba(83, 155, 245, 0.25) !important;
}

html.dark .form-control::placeholder {
	color: #768390 !important;
}

html.dark select.form-control option {
	background-color: var(--k-bg-table) !important;
	color:  #ffffff  !important;
}

html.dark input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
}

/* ============================================
   버튼
============================================ */

html.dark .btn-secondary {
	background-color: #373e47 !important;
	border-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .btn-secondary:hover {
	background-color: #444c56 !important;
}

html.dark .btn-light {
	background-color: #373e47 !important;
	border-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .btn-light:hover {
	background-color: #444c56 !important;
}

/* ============================================
   페이지네이션
============================================ */

html.dark .pagination .page-link {
	background-color: var(--k-bg-panel) !important;
	border-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .pagination .page-link:hover {
	background-color: #373e47 !important;
	color: #539bf5 !important;
}

html.dark .pagination .page-item.active .page-link {
	background-color: #539bf5 !important;
	border-color: #539bf5 !important;
	color: #ffffff !important;
}

html.dark .pagination .page-item.disabled .page-link {
	background-color: var(--k-bg-panel) !important;
	color: #768390 !important;
}

/* ============================================
   모달
============================================ */

html.dark .modal-content {
	background-color: var(--k-bg-panel) !important;
	color: var(--k-text) !important;
	border-color: var(--k-border) !important;
}

html.dark .modal-header {
	border-bottom-color: var(--k-border) !important;
	background-color: var(--k-bg-panel) !important;
}

html.dark .modal-title {
	color: var(--k-text) !important;
}

html.dark .modal-body {
	background-color: var(--k-bg-panel) !important;
}

html.dark .modal-footer {
	border-top-color: var(--k-border) !important;
	background-color: var(--k-bg-panel) !important;
}

html.dark .close,
html.dark .btn-close {
	filter: invert(1);
}

/* ============================================
   사이드바
============================================ */

html.dark .profile {
	background-color: var(--k-bg-table) !important;
	border-bottom: 1px solid var(--k-border);
}

html.dark .profile_info h4,
html.dark .profile_info span {
	color: var(--k-text) !important;
}

html.dark .nav.side-menu > li > a {
	color: #adbac7 !important;
}

html.dark .nav.side-menu > li > a:hover {
	background-color: #373e47 !important;
}

html.dark .nav.side-menu > li.active > a {
	background-color: #539bf5 !important;
	color: #ffffff !important;
}

html.dark .nav.side-menu > li.active > a i {
	color: #ffffff !important;
}

/* ============================================
   배지 및 레이블
============================================ */

html.dark .badge {
	background-color: #444c56 !important;
	color: var(--k-text) !important;
}

html.dark .badge.bg-primary {
	background-color: #539bf5 !important;
	color: #ffffff !important;
}

html.dark .badge.bg-success {
	background-color: #2da44e !important;
	color: #ffffff !important;
}

html.dark .badge.bg-danger {
	background-color: #da3633 !important;
	color: #ffffff !important;
}

html.dark .badge.bg-warning {
	background-color: #bf8700 !important;
	color: #ffffff !important;
}

/* ============================================
   텍스트 색상
============================================ */

html.dark .text-muted {
	color: #768390 !important;
}

html.dark h1, html.dark h2, html.dark h3, 
html.dark h4, html.dark h5, html.dark h6 {
	color: var(--k-text) !important;
}

html.dark p {
	color: var(--k-text) !important;
}

html.dark label {
	color: var(--k-text) !important;
}

html.dark .page-title h3 {
	color: var(--k-text) !important;
}

/* ============================================
   드롭다운
============================================ */

html.dark .dropdown-menu {
	background-color: var(--k-bg-panel) !important;
	border-color: var(--k-border) !important;
}

html.dark .dropdown-item {
	color: var(--k-text) !important;
}

html.dark .dropdown-item:hover {
	background-color: #373e47 !important;
	color: var(--k-text) !important;
}

html.dark .dropdown-divider {
	border-top-color: var(--k-border) !important;
}

/* ============================================
   유틸리티
============================================ */

html.dark hr {
	border-top-color: var(--k-border) !important;
}

html.dark .spinner-border {
	color: #539bf5 !important;
}

/* 상단 네비게이션 사용자 프로필 */
html.dark .user-profile {
	color: var(--k-text) !important;
}

html.dark .user-profile:hover {
	color: #539bf5 !important;
}


/* ============================================
  멤버 대쉬보드
============================================ */
.dashboard-header{
    background-color: var(--k-bg-header) !important;
	transition: background-color var(--k-c-transform);
}
html.dark .dashboard-header{
    border-bottom: 1px solid var(--k-border);
}

.dashboard-header .info-item{
    background-color: var(--k-bg-header) !important;
	transition: background-color var(--k-c-transform);

}
html.dark .dashboard-header .info-item{

    background-color: var(--k-bg-panel) !important;
	border-color: #539bf5 !important;
	color:  #ffffff  !important;

}

html.dark .dashboard-header .info-item i,
html.dark .dashboard-header .info-item strong {
    color: #ffffff !important;
}

/* 다크모드 - 통계 영역 전체 흰색 */
html.dark .header-section .stat-item-inline i,
html.dark .header-section .stat-item-inline strong,
html.dark .header-section .stat-item-inline span {
    color: #ffffff !important;
}

html.dark .header-section .stat-item-inline .text-primary,
html.dark .header-section .stat-item-inline .text-info,
html.dark .header-section .stat-item-inline .text-success,
html.dark .header-section .stat-item-inline .text-warning,
html.dark .header-section .stat-item-inline .text-danger {
    color: #ffffff !important;
}
html.dark .header-section .stat-item-inline i {
    background-color: var(--k-bg-panel);
}

html.dark .member-dashboard-fullscreen {
	background-color: rgba(0, 0, 0, 0.8) !important;
}

html.dark .dashboard-backdrop {
	background-color: rgba(0, 0, 0, 0.8) !important;
}

html.dark .dashboard-container {
	background-color: var(--k-bg-panel) !important;
	border-color: var(--k-border) !important;
}

/* 대시보드 헤더 */
html.dark .dashboard-header {
	background-color: var(--k-bg-panel) !important;
	border-bottom-color: var(--k-border) !important;
}

html.dark .dashboard-header-content {
	background-color: var(--k-bg-panel) !important;
}

html.dark .header-section {
	color: #ffffff !important;
}

/* 회원 프로필 섹션 */
html.dark .member-profile-inline {
	color: var(--k-text) !important;
}

html.dark .member-name-section p {
	color: #ffffff !important;
}

html.dark #dashboardMemberName,
html.dark #dashboardMemberId {
	color: #ffffff !important;
}

/* 정보 섹션 */
html.dark .info-section,
html.dark .info-group,
html.dark .info-item {
	color: #ffffff !important;
}

html.dark .info-item strong {
	color: #ffffff !important;
}

html.dark .info-item span {
	color: #ffffff !important;
}

/* 통계 섹션 */
html.dark .stats-section {
	background-color: var(--k-bg-panel) !important;
}

html.dark .stat-item-inline {
	color: var(--k-text) !important;
}

html.dark .stat-label {
	color: #ffffff !important;
}

/* 구분선 */
html.dark .divider {
	background-color: var(--k-border) !important;
	border-color: var(--k-border) !important;
}

/* 닫기 버튼 */
html.dark .dashboard-close {
	background-color: #373e47 !important;
	color: var(--k-text) !important;
	border-color: var(--k-border) !important;
}

html.dark .dashboard-close:hover {
	background-color: #444c56 !important;
}

/* 대시보드 메인 */
html.dark .dashboard-main {
	background-color: var(--k-bg-main) !important;
}

/* 사이드바 */
html.dark .dashboard-sidebar {
	background-color: var(--k-bg-panel) !important;
	border-right-color: var(--k-border) !important;
}

/* 정보 카드 */
html.dark .info-card {
	background-color: var(--k-bg-table) !important;
	border-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .info-card .card-title {
	color: #ffffff !important;
}

html.dark .info-card h6 {
	color: #ffffff !important;
}

/* 메모 영역 */
html.dark #MM_List {
	color: var(--k-text) !important;
}

html.dark #MM_List ul {
	color: var(--k-text) !important;
}

html.dark #MM_List li {
	color: var(--k-text) !important;
	border-bottom-color: var(--k-border) !important;
}

/* 탭 네비게이션 */
html.dark .dashboard-tabs {
	background-color: var(--k-bg-panel) !important;
	border-bottom-color: var(--k-border) !important;
}

html.dark .dashboard-tabs .tab-item {
	color: var(--k-text) !important;
	border-color: var(--k-border) !important;
}

html.dark .dashboard-tabs .tab-item:hover {
	background-color: #373e47 !important;
}

html.dark .dashboard-tabs .tab-item.active {
	background-color: var(--k-bg-main) !important;
	border-bottom-color: transparent !important;
	color: #539bf5 !important;
}

/* 탭 컨텐츠 */
html.dark .tab-content-wrapper {
	background-color: var(--k-bg-main) !important;
}

html.dark .tab-content {
	color: var(--k-text) !important;
}

html.dark .dashboard-content-area {
	background-color: var(--k-bg-main) !important;
}

/* 대시보드 내 테이블 */
html.dark .dashboard-container .table {
	background-color: var(--k-bg-table) !important;
	color: var(--k-text) !important;
}

html.dark .dashboard-container .table thead {
	background-color: var(--k-bg-panel) !important;
}

html.dark .dashboard-container .table thead th {
	background-color: var(--k-bg-panel) !important;
	color: var(--k-text) !important;
	border-color: var(--k-border) !important;
}

html.dark .dashboard-container .table tbody tr {
	background-color: var(--k-bg-table) !important;
}

html.dark .dashboard-container .table tbody td {
	background-color: var(--k-bg-table) !important;
	color: var(--k-text) !important;
	border-color: var(--k-border) !important;
}

html.dark .dashboard-container .table-striped tbody tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .dashboard-container .table-striped tbody tr:nth-of-type(odd) td {
	background-color: rgba(255, 255, 255, 0.03) !important;
}
html.dark .guide{
	background-color: #dadcde !important;
	border-bottom-color: var(--k-border) !important

}

/* 대시보드 내 알림 */
html.dark .alert {
	background-color: var(--k-bg-panel) !important;
	color: var(--k-text) !important;
	border-color: var(--k-border) !important;
}

html.dark .alert-info {
	background-color: rgba(83, 155, 245, 0.1) !important;
	border-color: #539bf5 !important;
	color: #539bf5 !important;
}

/* 대시보드 내 h 태그들 */
html.dark .dashboard-container h1,
html.dark .dashboard-container h2,
html.dark .dashboard-container h3,
html.dark .dashboard-container h4,
html.dark .dashboard-container h5,
html.dark .dashboard-container h6 {
	color: var(--k-text) !important;
}

/* 로딩 상태 */
html.dark .loading-state {
	color: var(--k-text) !important;
}

html.dark .loading-state p {
	color: var(--k-text) !important;
}

/* 메모 입력 영역 */
html.dark .memo-input-area {
	background-color: transparent !important;
}

html.dark #memoList {
	color: var(--k-text) !important;
}

/* 대시보드 내 페이지네이션 */
html.dark .dashboard-container .pagination .page-link {
	background-color: var(--k-bg-panel) !important;
	border-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .dashboard-container .pagination .page-link:hover {
	background-color: #373e47 !important;
}

/* 대시보드 내 폼 */
html.dark .dashboard-container .form-control {
	background-color: var(--k-bg-table) !important;
	border-color: var(--k-border) !important;
	color: var(--k-text) !important;
}

html.dark .dashboard-container .form-control:focus {
	background-color: var(--k-bg-panel) !important;
	border-color: #539bf5 !important;
}

/* 대시보드 내 모달 */
html.dark #MemEdit .modal-content,
html.dark #Inquiry_Detail .modal-content,
html.dark #LTEdit .modal-content {
	background-color: var(--k-bg-panel) !important;
	color: var(--k-text) !important;
}

/* 인라인 스타일 덮어쓰기 */
html.dark [style*="color:black"],
html.dark [style*="color: black"] {
	color: var(--k-text) !important;
}

html.dark [style*="color:#000"],
html.dark [style*="color: #000"] {
	color: var(--k-text) !important;
}

html.dark #MM_List ul li {
    background-color: #4f4f4f !important;
    border :none !important;
}

html.dark #MM_List ul li .flex-grow-1 {
    color:#ffffff !important;

}

html.dark #MM_List .btn-link,
html.dark #MM_List .btn-link i {
    color: #ffffff !important;
}

html.dark #MM_Reg{
    background-color: #4f4f4f;

        border: none !important;



}