/* 
  Modern Theme for Docsify 
  Supports Dark and Light modes using CSS variables.
*/

:root {
  /* Light Mode (Defaults) */
  --theme-color: #0ea5e9;
  --bg-color: #ffffff;
  --text-color: #0f172a;
  --sidebar-bg: #f8fafc;
  --sidebar-text: #475569;
  --sidebar-border: rgba(0, 0, 0, 0.05);
  --markdown-bg: transparent;
  --code-bg: #f1f5f9;
  --code-text: #0f172a;
  --pre-bg: #f1f5f9;
  --pre-border: rgba(0, 0, 0, 0.05);
  --blockquote-bg: rgba(14, 165, 233, 0.05);
  --blockquote-border: #0ea5e9;
  --search-bg: #ffffff;
  --search-border: rgba(0, 0, 0, 0.1);
  --search-text: #0f172a;
  --transition-speed: 0.3s;
}

[data-theme="dark"] {
  /* Dark Mode Overrides */
  --theme-color: #38bdf8;
  --bg-color: #0f172a;
  --text-color: #f8fafc;
  --sidebar-bg: #0f172a;
  --sidebar-text: #94a3b8;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --markdown-bg: transparent;
  --code-bg: rgba(255, 255, 255, 0.05);
  --code-text: #e2e8f0;
  --pre-bg: rgba(30, 41, 59, 0.5);
  --pre-border: rgba(255, 255, 255, 0.1);
  --blockquote-bg: rgba(56, 189, 248, 0.05);
  --blockquote-border: #38bdf8;
  --search-bg: rgba(255, 255, 255, 0.05);
  --search-border: rgba(255, 255, 255, 0.1);
  --search-text: #f8fafc;
}

body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
  transition: background-color var(--transition-speed), color var(--transition-speed);
}

.sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  color: var(--sidebar-text) !important;
  transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.sidebar-nav li a {
  color: var(--sidebar-text) !important;
}

.sidebar-nav li.active > a {
  color: var(--theme-color) !important;
  border-right: 2px solid var(--theme-color);
  font-weight: 600;
}

.markdown-section {
  background-color: var(--markdown-bg) !important;
  color: var(--text-color) !important;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 15px;
}

.markdown-section h1,
.markdown-section h2,
.markdown-section h3,
.markdown-section h4 {
  color: var(--text-color) !important;
  font-weight: 700;
  border-bottom: none !important;
}

.markdown-section a {
  color: var(--theme-color) !important;
  text-decoration: none;
}

.markdown-section a:hover {
  text-decoration: underline;
}

.markdown-section code {
  background-color: var(--code-bg) !important;
  color: var(--code-text) !important;
  padding: 3px 6px;
  border-radius: 4px;
}

.markdown-section pre {
  background-color: var(--pre-bg) !important;
  border: 1px solid var(--pre-border);
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Obsidian Callouts 스타일 모사 */
.markdown-section blockquote {
  border-left: 4px solid var(--blockquote-border) !important;
  background: var(--blockquote-bg) !important;
  color: var(--sidebar-text) !important;
  padding: 15px 20px !important;
  border-radius: 0 8px 8px 0;
}

/* 검색창 스타일링 */
.search input {
  background: var(--search-bg) !important;
  border: 1px solid var(--search-border) !important;
  border-radius: 8px !important;
  color: var(--search-text) !important;
}

.search .clear-button {
  color: var(--sidebar-text) !important;
}

/* Theme Toggle Button 스타일 */
#theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--theme-color);
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform 0.2s;
}

#theme-toggle:hover {
  transform: scale(1.1);
}

#theme-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}