@charset "utf-8";

/* 다크모드 CSS 변수 정의 */
:root {
  /* 라이트 모드 색상 */
  --bg-primary: #ffffff;
  --bg-secondary: #f0f6fe;
  --bg-tertiary: #f7f7f7;
  --text-primary: #000000;
  --text-secondary: #383838;
  --text-muted: #666666;
  --border-color: #e7e7e7;
  --border-light: #e9e9e9;
  --accent-color: #1983df;
  --accent-hover: #0f4986;
  --point-color: #ffbf44;
  --success-color: #13911b;
  --danger-color: #ff3061;
  --warning-color: #e49c12;
}

/* 다크모드 색상 */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #a0a0a0;
  --border-color: #404040;
  --border-light: #4a4a4a;
  --accent-color: #4a9eff;
  --accent-hover: #6bb6ff;
  --point-color: #ffd700;
  --success-color: #4caf50;
  --danger-color: #f44336;
  --warning-color: #ff9800;
}

/* 기본 라이트모드 스타일 */
:root {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* 다크모드 스타일 */
[data-theme="dark"] {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* 다크모드 토글 버튼 */
.dark-mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 50px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dark-mode-toggle:hover {
  background: var(--accent-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.dark-mode-toggle .toggle-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.dark-mode-toggle:hover .toggle-icon {
  transform: rotate(180deg);
}

/* 다크모드 적용 시 기본 요소들 */
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .div-title-head {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .widget-normal-box {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .widget-login {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .latest_board .latest_item {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .latest_board .latest_tit {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .latest_board .latest_tit h3 {
  color: var(--text-primary);
}

[data-theme="dark"] .latest_board .latest_tit .latest_more > a {
  background-color: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--accent-color);
}

[data-theme="dark"] .latest_board .latest_cont {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .tab_item {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .tab_item.active {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--accent-color);
}

[data-theme="dark"] .nav-wrapper {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .nav-wrapper > div > a {
  color: var(--text-primary);
}

[data-theme="dark"] .nav-wrapper > div.show {
  background-color: var(--accent-color);
}

[data-theme="dark"] .nav-wrapper > div > a:hover {
  background-color: var(--accent-hover);
  color: white;
}

[data-theme="dark"] .nav-wrapper .dropdown-list {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .nav-wrapper .dropdown-list li {
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .nav-wrapper .dropdown-list li:hover {
  background-color: var(--accent-color);
  color: white;
}

/* 테이블 다크모드 */
[data-theme="dark"] .tbl_head01 thead th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .tbl_head01 tbody th,
[data-theme="dark"] .tbl_head01 td {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .tbl_head01 tfoot th,
[data-theme="dark"] .tbl_head01 tfoot td {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* 폼 요소 다크모드 */
[data-theme="dark"] .tbl_frm01 th {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .tbl_frm01 td {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .frm_input,
[data-theme="dark"] textarea {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .frm_input:focus,
[data-theme="dark"] textarea:focus {
  border-color: var(--accent-color);
  outline: none;
}

/* 버튼 다크모드 */
[data-theme="dark"] .btn01 {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .btn01:hover {
  background-color: var(--accent-color);
  color: white;
}

[data-theme="dark"] .btn02 {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

[data-theme="dark"] .btn_submit {
  background-color: var(--danger-color);
  color: white;
}

[data-theme="dark"] .btn_cancel {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* 페이징 다크모드 */
[data-theme="dark"] .pg_page {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

[data-theme="dark"] .pg_current {
  background-color: var(--accent-color);
  color: white;
}

/* 링크 다크모드 */
[data-theme="dark"] a {
  color: var(--accent-color);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus,
[data-theme="dark"] a:active {
  color: var(--accent-hover);
}

/* 입력 필드 다크모드 */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] select {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus {
  border-color: var(--accent-color);
  outline: none;
}

/* 체크박스 및 라디오 버튼 다크모드 */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
  accent-color: var(--accent-color);
}

/* 스크롤바 다크모드 */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* 선택 텍스트 다크모드 */
[data-theme="dark"] ::selection {
  background-color: var(--accent-color);
  color: white;
}

/* 플레이스홀더 다크모드 */
[data-theme="dark"] ::placeholder {
  color: var(--text-muted);
}

/* 모달 및 팝업 다크모드 */
[data-theme="dark"] .hd_pops {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .hd_pops_footer {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* 새창 스타일 다크모드 */
[data-theme="dark"] .new_win #win_title {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .new_win .win_ul {
  background-color: var(--bg-tertiary);
}

[data-theme="dark"] .new_win .win_ul a {
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* 검색 결과 다크모드 */
[data-theme="dark"] .sch_word {
  color: var(--danger-color);
}

/* 유효성 검사 다크모드 */
[data-theme="dark"] #validation_check p {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

/* 사이드뷰 다크모드 */
[data-theme="dark"] .sv_wrap .sv {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
}

[data-theme="dark"] .sv_wrap .sv a {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

/* 반응형 다크모드 */
@media (max-width: 768px) {
  .dark-mode-toggle {
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .dark-mode-toggle .toggle-icon {
    font-size: 14px;
  }
}