/* 다크모드 CSS 변수 및 스타일 */

/* 라이트모드 기본 색상 (CSS 변수로 정의) */
:root {
  --page-col: #FAFAFA;
  --text-col: #212121;
  --link-col: #2196F3;
  --hover-col: #FF4081;
  --navbar-col: #FFFFFF;
  --navbar-text-col: #212121;
  --navbar-border-col: #E0E0E0;
  --footer-col: #F5F5F5;
  --footer-text-col: #616161;
  --footer-link-col: #424242;
  --footer-hover-col: #FF4081;
  --code-bg: #f5f5f5;
  --code-text: #212121;
}

/* 다크모드 색상 */
[data-theme="dark"] {
  --page-col: #1a1a1a;
  --text-col: #e0e0e0;
  --link-col: #64B5F6;
  --hover-col: #FF80AB;
  --navbar-col: #2d2d2d;
  --navbar-text-col: #e0e0e0;
  --navbar-border-col: #404040;
  --footer-col: #2d2d2d;
  --footer-text-col: #b0b0b0;
  --footer-link-col: #d0d0d0;
  --footer-hover-col: #FF80AB;
  --code-bg: #2d2d2d;
  --code-text: #e0e0e0;
}

/* 변수를 실제 요소에 적용 */
body {
  background-color: var(--page-col);
  color: var(--text-col);
  transition: background-color 0.3s ease, color 0.3s ease;
}

a {
  color: var(--link-col);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--hover-col);
}

.navbar-custom {
  background-color: var(--navbar-col);
  border-bottom: 1px solid var(--navbar-border-col);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-nav .nav-link {
  color: var(--navbar-text-col);
  transition: color 0.3s ease;
}

footer {
  background-color: var(--footer-col);
  color: var(--footer-text-col);
  transition: background-color 0.3s ease, color 0.3s ease;
}

footer a {
  color: var(--footer-link-col);
}

footer a:hover {
  color: var(--footer-hover-col);
}

/* 코드 블록 다크모드 */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background-color: var(--code-bg);
  color: var(--code-text);
}

/* 다크모드 토글 버튼 스타일 */
.darkmode-toggle {
  cursor: pointer;
  padding: 0.5rem 0.75rem !important;
  border: none !important;
  background: transparent !important;
  font-size: 1.25rem;
  transition: transform 0.3s ease;
  outline: none !important;
  box-shadow: none !important;
  color: inherit;
  vertical-align: middle !important;
  line-height: 1.5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.darkmode-toggle:hover,
.darkmode-toggle:focus,
.darkmode-toggle:active {
  transform: scale(1.1);
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: inherit;
}

/* Bootstrap 버튼 스타일 완전히 제거 */
button.darkmode-toggle.nav-link {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

button.darkmode-toggle.nav-link:hover,
button.darkmode-toggle.nav-link:focus,
button.darkmode-toggle.nav-link:active,
button.darkmode-toggle.nav-link:focus-visible {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* 카드 및 포스트 프리뷰 다크모드 */
[data-theme="dark"] .post-preview {
  border-bottom-color: #404040;
}

[data-theme="dark"] .blog-post {
  color: var(--text-col);
}

/* 테이블 다크모드 */
[data-theme="dark"] table {
  background-color: #2d2d2d !important;
  color: var(--text-col) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  border: 1px solid #404040 !important;
}

[data-theme="dark"] table thead tr {
  background: linear-gradient(135deg, #1e3a5f 0%, #1a252f 100%) !important;
  border: none !important;
}

[data-theme="dark"] table thead th {
  color: #e0e0e0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: 2px solid #404040 !important;
}

[data-theme="dark"] table tbody tr {
  border-bottom: 1px solid #404040 !important;
}

[data-theme="dark"] table tbody tr:nth-child(even) {
  background-color: #252525 !important;
}

[data-theme="dark"] table tbody tr:nth-child(odd) {
  background-color: #2d2d2d !important;
}

[data-theme="dark"] table tbody tr:hover {
  background-color: #353535 !important;
}

[data-theme="dark"] table tbody tr:nth-child(even):hover {
  background-color: #353535 !important;
}

[data-theme="dark"] table tbody td {
  color: var(--text-col) !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
}

[data-theme="dark"] table tbody td:first-child {
  color: #64B5F6 !important;
}

[data-theme="dark"] table strong {
  color: #64B5F6 !important;
}

[data-theme="dark"] table caption {
  color: #b0b0b0 !important;
}

/* 인풋 및 폼 요소 다크모드 */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #2d2d2d;
  color: var(--text-col);
  border-color: #404040;
}

/* 검색 박스 다크모드 */
[data-theme="dark"] .search-box {
  background-color: #2d2d2d;
  border-color: #404040;
}

/* 태그 및 카테고리 다크모드 */
[data-theme="dark"] .blog-tags a {
  color: var(--link-col);
  background-color: #2d2d2d;
  border-color: #404040;
}

/* 이미지 다크모드에서 밝기 조절 (선택사항) */
[data-theme="dark"] img:not(.no-dark-filter) {
  opacity: 0.9;
}

/* 모바일 햄버거 메뉴 버튼 다크모드 */
[data-theme="dark"] .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1) !important;
  opacity: 0.9;
}

[data-theme="dark"] .navbar-toggler:focus,
[data-theme="dark"] .navbar-toggler:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}