/**
 * 다크모드 CSS
 * K Theme Starter - Dark Mode Styles
 * 
 * 이 파일은 다크모드가 활성화될 때 적용되는 스타일을 정의합니다.
 * CSS 변수를 사용하여 색상 전환을 부드럽게 처리합니다.
 */

/* 다크모드 기본 변수 */
:root {
  /* 다크모드 색상 변수 */
  --dark-bg-primary: #1a1a1a;
  --dark-bg-secondary: #2d2d2d;
  --dark-bg-tertiary: #3a3a3a;
  --dark-text-primary: #ffffff;
  --dark-text-secondary: #b0b0b0;
  --dark-text-muted: #888888;
  --dark-border: #404040;
  --dark-border-light: #505050;
  --dark-shadow: rgba(0, 0, 0, 0.3);
  --dark-shadow-light: rgba(0, 0, 0, 0.1);
  --dark-hover: #404040;
  --dark-link: #fff;
  --dark-link-hover: #f5f5f5;
  --dark-accent: #007acc;
  --dark-accent-hover: #005a99;
}

/* 다크모드 클래스가 적용될 때 */
body.dark-mode,
html.dark-mode {
  /* 기본 배경 및 텍스트 색상 */
  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
  
  /* 다크모드 배경 이미지 변경 */
  background-image: url(../images/bg-multi-line-dark.svg) !important;
  
  /* 부드러운 전환 효과 */
  transition: background-color 0.3s ease, color 0.3s ease, background-image 0.3s ease;
}

/* 다크모드에서 모든 요소에 기본 색상 적용 */
.dark-mode * {
  border-color: var(--dark-border) !important;
}

/* ===== 헤더 다크모드 ===== */
.dark-mode #header-wrapper.nav-white {
  background-color: var(--dark-bg-secondary) !important;
  border-bottom-color: var(--dark-border) !important;
}

.dark-mode #header-wrapper.nav-white .util-menu li a,
.dark-mode #header-wrapper.nav-white .top-nav > li > a {
  color: var(--dark-text-primary) !important;
}

.dark-mode #header-wrapper.nav-white #mega-menu path {
  fill: var(--dark-text-primary) !important;
}

.dark-mode #header-wrapper.nav-white .logo-black {
  display: none !important;
}

.dark-mode #header-wrapper.nav-white .logo-white {
  display: inline-block !important;
}

/* ===== 서브메뉴 다크모드 ===== */
.dark-mode .top-nav li.menu-item-has-children .sub-menu {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 0.5rem 1rem var(--dark-shadow) !important;
}

.dark-mode .top-nav li.menu-item-has-children .sub-menu li a {
  color: var(--dark-text-primary) !important;
}

.dark-mode .top-nav li.menu-item-has-children .sub-menu li a:hover {
  background-color: var(--dark-hover) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode .top-nav li.menu-item-has-children .sub-menu li.menu-item-has-children .sub-menu {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border-light) !important;
}

/* ===== 검색 및 메가메뉴 다크모드 ===== */
.dark-mode .search-wrap {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 0.5rem 1rem var(--dark-shadow) !important;
}

.dark-mode .megamenu.show {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0 0.5rem 1rem var(--dark-shadow) !important;
}

.dark-mode .megamenu.show .megamenu-list > li > a {
  color: var(--dark-text-primary) !important;
  border-bottom-color: var(--dark-border) !important;
}

.dark-mode .megamenu.show .megamenu-list > li > a:hover {
  background-color: var(--dark-hover) !important;
}

.dark-mode .megamenu.show .megamenu-list > li > ul > li > a {
  color: var(--dark-text-secondary) !important;
}

.dark-mode .megamenu.show .megamenu-list > li > ul > li > a:hover {
  color: var(--dark-text-primary) !important;
}

.dark-mode .megamenu.show .megamenu-list > li > ul > li > ul > li a {
  color: var(--dark-text-muted) !important;
}

.dark-mode .megamenu.show .megamenu-list > li > ul > li > ul > li a:hover {
  color: var(--dark-text-secondary) !important;
}

.dark-mode .megamenu.show .megamenu-list > li > ul > li > ul > li::before {
  background-color: var(--dark-text-muted) !important;
}

/* 헤더 검색 영역 */
.dark-mode .search-wrap {
  background-color: var(--dark-bg-secondary) !important;
}

.dark-mode .top-search-form input[type="text"] {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .top-search-form input[type="text"]:focus {
  border-color: var(--dark-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25) !important;
}

/* 메가메뉴 다크모드 */
.dark-mode .megamenu.show.dark {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .megamenu.show.dark .megamenu-list > li > a {
  color: var(--dark-text-primary) !important;
}

.dark-mode .megamenu.show.dark .megamenu-list > li > a:hover {
  background-color: var(--dark-hover) !important;
}

/* ===== 사이드바 다크모드 ===== */
.dark-mode #side-menu.menu > li > a {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-secondary) !important;
}

.dark-mode #side-menu.menu > li > a:hover {
  background-color: var(--dark-hover) !important;
}

.dark-mode #side-menu.menu > li[class*="current"] > a {
  background-color: var(--dark-accent) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode #side-menu.menu > li > .sub-menu > li > a {
  color: var(--dark-text-secondary) !important;
  background-color: var(--dark-bg-tertiary) !important;
}

.dark-mode #side-menu.menu > li > .sub-menu > li > a:hover {
  background-color: var(--dark-hover) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode #side-menu.menu > li > .sub-menu > li[class*="current"] > a {
  background-color: var(--dark-accent) !important;
  color: var(--dark-text-primary) !important;
}

/* ===== 메인 콘텐츠 다크모드 ===== */
.dark-mode .page-content-wrap {
  
}

.dark-mode .page-content {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode .page-content-title {
  color: var(--dark-text-primary) !important;
}

.dark-mode .page-title {
  color: var(--dark-text-primary) !important;
}

.dark-mode .page-title:before {
  background-color: var(--dark-accent) !important;
}

/* ===== 페이지 헤더 메뉴 다크모드 ===== */
.dark-mode #page-header-menu.menu > li > .sub-menu > li > a {
  color: var(--dark-text-primary) !important;
}

.dark-mode #page-header-menu.menu.type1 > li > .sub-menu > li > a {
  border-bottom-color: transparent !important;
}

.dark-mode #page-header-menu.menu.type1 > li > .sub-menu > li > a:hover,
.dark-mode #page-header-menu.menu.type1 > li > .sub-menu > li[class*="current"] > a {
  color: var(--dark-accent) !important;
  border-bottom-color: var(--dark-accent) !important;
}

.dark-mode #page-header-menu.menu.type2 > li > .sub-menu > li > a {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode #page-header-menu.menu.type2 > li > .sub-menu > li > a:hover,
.dark-mode #page-header-menu.menu.type2 > li > .sub-menu > li[class*="current"] > a {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode #page-header-menu.menu > li > .sub-menu .sub-menu li a {
  color: var(--dark-text-secondary) !important;
}

.dark-mode #page-header-menu.menu > li > .sub-menu .sub-menu li[class*="current"] a {
  color: var(--dark-accent) !important;
}

.dark-mode #page-header-menu.menu > li > .sub-menu .sub-menu li a:before {
  background-color: var(--dark-text-muted) !important;
}

.dark-mode #page-header-menu.menu > li > .sub-menu .sub-menu li[class*="current"] a:before {
  background-color: var(--dark-accent) !important;
}

.dark-mode #page-header-menu.type1::after {
  background-color: var(--dark-border) !important;
}

/* ===== 푸터 다크모드 ===== */
.dark-mode footer {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-secondary) !important;
}

.dark-mode footer a {
  color: var(--dark-text-secondary) !important;
}

.dark-mode footer a:hover {
  color: var(--dark-link-hover) !important;
}

.dark-mode .copyright {
  color: var(--dark-text-muted) !important;
}

/* 푸터 address 요소 다크모드 */
.dark-mode footer .text-black-50 {
  color: var(--dark-text-muted) !important;
}

.dark-mode footer address.mb-1.mt-4.text-black-50 a {
  color: var(--dark-text-muted) !important;
}

.dark-mode footer address.mb-1.mt-4.text-black-50 a:hover {
  color: var(--dark-text-secondary) !important;
}

/* ===== 폼 요소 다크모드 ===== */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="search"],
.dark-mode input[type="tel"],
.dark-mode input[type="number"],
.dark-mode textarea,
.dark-mode select {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="search"]:focus,
.dark-mode input[type="tel"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
  border-color: var(--dark-accent) !important;
  box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25) !important;
}

/* ===== 버튼 다크모드 ===== */
.dark-mode .btn-primary {
  background-color: var(--dark-accent) !important;
  border-color: var(--dark-accent) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode .btn-primary:hover {
  background-color: var(--dark-accent-hover) !important;
  border-color: var(--dark-accent-hover) !important;
}

.dark-mode .btn-secondary {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode .btn-secondary:hover {
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-border-light) !important;
}

/* ===== 카드 및 박스 다크모드 ===== */
.dark-mode .card,
.dark-mode .kt-box-type1,
.dark-mode .kt-box-type2,
.dark-mode .kt-box-type3 {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode .card-header,
.dark-mode .kt-box-type1 .kt-box-wrap,
.dark-mode .kt-box-type2 .box-bg {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

/* ===== 테이블 다크모드 ===== */
.dark-mode table {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode table th {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode table td {
  border-color: var(--dark-border) !important;
}

.dark-mode table tr:nth-of-type(odd) {
  background-color: var(--dark-bg-tertiary) !important;
}

/* ===== 아코디언 다크모드 ===== */
.dark-mode .accordion-item {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .accordion-button {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .accordion-button:not(.collapsed) {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.25) !important;
}

.dark-mode .accordion-body {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

/* ===== 탭 다크모드 ===== */
.dark-mode .nav-tabs {
  border-color: var(--dark-border) !important;
}

.dark-mode .nav-tabs .nav-link {
  color: var(--dark-text-secondary) !important;
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .nav-tabs .nav-link:hover {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-hover) !important;
  border-color: var(--dark-border-light) !important;
}

.dark-mode .nav-tabs .nav-link.active {
  color: var(--dark-text-primary) !important;
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .tab-content {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* ===== 모달 다크모드 ===== */
.dark-mode .modal-content {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .modal-header {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

.dark-mode .modal-footer {
  background-color: var(--dark-bg-tertiary) !important;
  border-color: var(--dark-border) !important;
}

/* ===== 사이드 퀵 메뉴 다크모드 ===== */
.dark-mode #side_quick {
  
  
}

.dark-mode #side_quick_contact {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border) !important;
  box-shadow: 0px 10px 10px var(--dark-shadow) !important;
}

.dark-mode #side_quick_contact li {
  border-bottom-color: var(--dark-border) !important;
}

.dark-mode #side_quick_contact li:last-child {
  border-bottom: none !important;
}

.dark-mode #side_quick_contact li a {
  color: var(--dark-text-secondary) !important;
}

.dark-mode #side_quick_contact li a:hover {
  color: var(--dark-text-primary) !important;
}

.dark-mode #side_quick_contact li a h5 {
  color: var(--dark-text-secondary) !important;
}

.dark-mode #side_quick_contact li a h6 {
  color: var(--dark-text-muted) !important;
}

.dark-mode #side_quick_sns li a {
  color: var(--dark-text-secondary) !important;
}

.dark-mode #side_quick_sns li a:hover {
  color: var(--dark-text-primary) !important;
}

/* ===== 스크롤바 다크모드 ===== */
.dark-mode ::-webkit-scrollbar {
  width: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
  background: var(--dark-bg-tertiary) !important;
}

.dark-mode ::-webkit-scrollbar-thumb {
  background: var(--dark-border-light) !important;
  border-radius: 1px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: var(--dark-hover) !important;
}

/* ===== 링크 다크모드 ===== */
.dark-mode a {
  color: var(--dark-link) !important;
}

.dark-mode a:hover {
  color: var(--dark-link-hover) !important;
}

/* ===== 텍스트 색상 다크모드 ===== */
.dark-mode .text-muted {
  color: var(--dark-text-muted) !important;
}

.dark-mode .text-secondary {
  color: var(--dark-text-secondary) !important;
}

/* ===== 배경색 클래스 다크모드 ===== */
.dark-mode .bg-white {
  background-color: var(--dark-bg-secondary) !important;
}

.dark-mode .bg-light {
  background-color: var(--dark-bg-tertiary) !important;
}

.dark-mode .bg-dark {
  background-color: var(--dark-bg-primary) !important;
}

/* ===== 테두리 다크모드 ===== */
.dark-mode .border {
  border-color: var(--dark-border) !important;
}

.dark-mode .border-light {
  border-color: var(--dark-border-light) !important;
}

/* ===== 그림자 다크모드 ===== */
.dark-mode .shadow {
  box-shadow: 0 0.5rem 1rem var(--dark-shadow) !important;
}

.dark-mode .shadow-sm {
  box-shadow: 0 0.125rem 0.25rem var(--dark-shadow-light) !important;
}

/* ===== 호버 효과 다크모드 ===== */
.dark-mode .hover-effect-1:hover,
.dark-mode .hover-effect-2:hover,
.dark-mode .hover-effect-3:hover {
  background-color: var(--dark-hover) !important;
}

/* ===== 반응형 다크모드 ===== */
@media (max-width: 767.98px) {
  .dark-mode #header-wrapper.mobile_bg_trans {
    background-color: var(--dark-bg-secondary) !important;
  }
  
  .dark-mode #header-wrapper.mobile_bg_trans .logo-black {
    display: none !important;
  }
  
  .dark-mode #header-wrapper.mobile_bg_trans .logo-white {
    display: inline-block !important;
  }
  
  .dark-mode .navbar-toggler-icon {
    background-color: var(--dark-text-primary) !important;
  }
  
  /* 모바일 네비게이션 다크모드 */
  .dark-mode .navbar-collapse {
    background-color: var(--dark-bg-secondary) !important;
  }
  
  .dark-mode .navbar-collapse .util-menu {
    background-color: var(--dark-bg-tertiary) !important;
    border-bottom-color: var(--dark-border) !important;
  }
  
  .dark-mode .navbar-collapse .util-menu li a {
    color: var(--dark-text-primary) !important;
    border-right-color: var(--dark-border) !important;
  }
  
  .dark-mode .navbar-collapse .util-menu li:last-child a {
    border-right: none !important;
  }
  
  .dark-mode .navbar-collapse .top-nav {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav > li {
    border-top-color: var(--dark-border) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav > li > a {
    color: var(--dark-text-primary) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav li.menu-item-has-children .sub-menu {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav li.menu-item-has-children .sub-menu li a {
    color: var(--dark-text-primary) !important;
    border-bottom-color: var(--dark-border) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav li.menu-item-has-children .sub-menu li:last-child a {
    border-bottom: none !important;
  }
  
  .dark-mode .navbar-collapse .top-nav li.menu-item-has-children .sub-menu li a:hover {
    background-color: var(--dark-hover) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav li.menu-item-has-children .sub-menu li.menu-item-has-children .sub-menu {
    background-color: var(--dark-bg-primary) !important;
    border-color: var(--dark-border-light) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav li.menu-item-has-children > a::after {
    color: var(--dark-text-primary) !important;
  }
  
  .dark-mode .navbar-collapse .top-nav li.menu-item-has-children .sub-menu li.menu-item-has-children > a::after {
    color: var(--dark-text-primary) !important;
  }
}

/* ===== 다크모드 전환 애니메이션 ===== */
.dark-mode,
.dark-mode * {
  transition: background-color 0.3s ease, 
              color 0.3s ease, 
              border-color 0.3s ease, 
              box-shadow 0.3s ease !important;
}

/* ===== 다크모드 특별 처리 ===== */
/* 이미지와 아이콘은 다크모드에서도 원래 색상 유지 */
.dark-mode img,
.dark-mode svg,
.dark-mode .icon {
  filter: brightness(0.9) contrast(1.1);
}

/* 코드 블록 다크모드 */
.dark-mode pre,
.dark-mode code {
  background-color: var(--dark-bg-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border) !important;
}

/* 인용구 다크모드 */
.dark-mode blockquote {
  background-color: var(--dark-bg-tertiary) !important;
  border-left-color: var(--dark-accent) !important;
  color: var(--dark-text-secondary) !important;
}

/* 구분선 다크모드 */
.dark-mode hr {
  border-color: var(--dark-border) !important;
}

/* 선택된 텍스트 다크모드 */
.dark-mode ::selection {
  background-color: var(--dark-accent) !important;
  color: var(--dark-text-primary) !important;
}

.dark-mode ::-moz-selection {
  background-color: var(--dark-accent) !important;
  color: var(--dark-text-primary) !important;
} 