/* Dark Theme - 완전히 새로 작성 */

/* 다크 테마 변수 정의 */
html[data-theme='dark'], html[data-color-scheme='dark'] {
  --color-white: #171717;
  --color-cream-50: #1a1a1a;
  --color-cream-100: #1d1d1d;
  --color-background: var(--color-white);
  --color-surface: #1f1f1f;
  --color-text: #e6e6e6;
  --color-text-secondary: rgba(230,230,230,0.72);
  --color-slate-900: #e6e6e6;
  --color-slate-500: #bdbdbd;
  --color-gray-200: #dcdcdc;
  --color-gray-300: #bdbdbd;
  --color-gray-400: #9e9e9e;
  --color-primary: #cfcfcf;
  --color-primary-hover: #bfbfbf;
  --color-primary-active: #9f9f9f;
  --color-secondary: rgba(255,255,255,0.04);
  --color-secondary-hover: rgba(255,255,255,0.06);
  --color-border: rgba(255,255,255,0.06);
  --color-card-border: rgba(255,255,255,0.04);
  --color-btn-primary-text: #171717;
  --card-bg: #2d3748;
  --border-color: #4a5568;
}

/* 시스템 설정 다크모드 지원 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    --color-white: #171717;
    --color-cream-50: #1a1a1a;
    --color-cream-100: #1d1d1d;
    --color-background: var(--color-white);
    --color-surface: #1f1f1f;
    --color-text: #e6e6e6;
    --color-text-secondary: rgba(230,230,230,0.72);
    --color-slate-900: #e6e6e6;
    --color-slate-500: #bdbdbd;
    --color-gray-200: #dcdcdc;
    --color-gray-300: #bdbdbd;
    --color-gray-400: #9e9e9e;
    --color-primary: #cfcfcf;
    --color-primary-hover: #bfbfbf;
    --color-primary-active: #9f9f9f;
    --color-secondary: rgba(255,255,255,0.04);
    --color-secondary-hover: rgba(255,255,255,0.06);
    --color-border: rgba(255,255,255,0.06);
    --color-card-border: rgba(255,255,255,0.04);
    --color-btn-primary-text: #171717;
    --card-bg: #2d3748;
    --border-color: #4a5568;
  }
}

/* 전체 테마 전환 애니메이션 - 느리게 설정 */
body,
body * {
  transition: background-color 1.5s ease, 
              color 1.5s ease, 
              border-color 1.5s ease, 
              fill 1.5s ease,
              stroke 1.5s ease !important;
}

/* 다크모드 배경 및 텍스트 */
html[data-theme='dark'],
html[data-theme='dark'] body {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
}

/* 섹션 배경 */
html[data-theme='dark'] .hero,
html[data-theme='dark'] section,
html[data-theme='dark'] .service-card,
html[data-theme='dark'] .stat-card {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border-color: var(--color-card-border) !important;
}

html[data-theme='dark'] .hero {
  background: linear-gradient(135deg, var(--color-background) 0%, rgba(255,255,255,0.02) 100%) !important;
}

html[data-theme='dark'] section:nth-of-type(2),
html[data-theme='dark'] section:nth-of-type(4) {
  background: #373737 !important;
}

html[data-theme='dark'] #services,
html[data-theme='dark'] #contact {
  background: #1c1c1c !important;
}

/* Footer 항상 어둡게 */
.footer {
  background: #0b0b0b !important;
  color: rgba(230,230,230,0.85) !important;
}

/* 테마 토글 스위치 */
.theme-toggle {
  background: transparent;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.theme-toggle-track {
  width: 56px;
  height: 28px;
  background: rgba(255,255,255,0.06);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  position: relative;
  transition: background-color 1.5s ease;
}

.theme-toggle-knob {
  width: 22px;
  height: 22px;
  background: var(--color-surface);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 1.5s ease, background 1.5s ease;
  font-size: 12px;
}

html[data-theme='dark'] .theme-toggle-knob {
  transform: translateX(28px);
}

html[data-theme='light'] .theme-toggle-knob {
  transform: translateX(0);
}

html[data-theme='light'] .theme-toggle-track,
html[data-theme='dark'] .theme-toggle-track {
  background: var(--color-primary) !important;
}

html[data-theme='light'] .theme-toggle-knob {
  background: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

html[data-theme='dark'] .theme-toggle-knob {
  background: #000000 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* 네비바 */
html[data-theme='dark'] .navbar {
  background: linear-gradient(180deg, rgba(18,18,18,0.9), rgba(23,23,23,0.95)) !important;
}

html[data-theme='light'] .navbar {
  background: transparent !important;
}

/* 로고 */
html[data-theme='light'] .logo img {
  background: #000000;
  padding: 6px !important;
  border-radius: 50%;
  height: 56px !important;
  width: auto !important;
  box-sizing: content-box;
}

html[data-theme='dark'] .logo img {
  background: rgba(255,255,255,0.02);
  padding: 0;
  border-radius: 6px;
  height: 56px !important;
  width: auto !important;
}

/* 연락하기 버튼 - 다크모드에서 흰색 배경, 검은색 텍스트 */
html[data-theme='dark'] .btn-contact,
html[data-theme='dark'] #copy-email-btn {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

html[data-theme='dark'] .btn-contact:hover,
html[data-theme='dark'] #copy-email-btn:hover {
  background: #f2f2f2 !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

/* 카드 스타일 - 라이트모드에서 흰색, 다크모드에서 어두운 색 */
html[data-theme='dark'] .service-card,
html[data-theme='dark'] .stat-card,
html[data-theme='dark'] .stat-box {
  background-color: #2a2a2a !important; /* 어두운 배경 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(119, 124, 124, 0.2) !important;
  color: var(--color-text) !important;
}

html[data-theme='dark'] .service-card:hover {
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}

/* 라이트모드 카드는 흰색 */
html[data-theme='light'] .service-card,
html[data-theme='light'] .stat-card,
html[data-theme='light'] .stat-box {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--color-slate-900) !important;
}

/* Back to top 버튼 다크모드 */
html[data-theme='dark'] #back-to-top {
  background: #ffffff !important;
  color: #000000 !important;
}

html[data-theme='dark'] #back-to-top:hover {
  background: #f2f2f2 !important;
}

/* 전체 테마 전환 애니메이션 - font-family 제외하고 부드럽게 */
body,
body *:not(.hero h1) {
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              color 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              fill 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              stroke 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 네비 메뉴 - 모바일 */
.nav-menu {
  transition: max-height 1.5s ease, opacity 1.5s ease;
}

/* 반응형 */
@media (max-width: 480px) {
  html[data-theme='light'] .logo img {
    padding: 4px !important;
    height: 52px !important;
  }
  
  html[data-theme='dark'] .logo img {
    height: 52px !important;
  }
}

.page-content, .service-card, .stat-card, .vision-card, .card {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-card-border) !important;
}

.footer {
  /* Footer must always be very dark regardless of theme */
  background: #0b0b0b !important;
  color: rgba(230,230,230,0.8) !important;
  border-top: 1px solid rgba(255,255,255,0.03) !important;
}

.btn-primary, .btn.btn-primary, .btn--primary {
  background: var(--color-primary) !important;
  color: var(--color-btn-primary-text) !important;
}

.btn-secondary, .btn--secondary {
  background: var(--color-secondary) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

/* Links */
a { color: var(--color-primary) !important; }
a:hover { color: var(--color-primary-hover) !important; }

/* Misc tweaks for contrast */
.badge { background: rgba(255,255,255,0.03) !important; color: var(--color-text) !important; }
.subtitle, .lead, p, li { color: var(--color-text-secondary) !important; }

/* Scroll indicator color */
.scroll-indicator { background: var(--color-primary) !important; }

/* Make sure logos/images that assume white background don't disappear: add slight border */
.logo img { background: rgba(255,255,255,0.02); border-radius: 6px; }

/* Slightly smaller black-circle padding on small screens for light mode */
@media (max-width: 480px) {
  html[data-theme='light'] .logo img { padding: 4px !important; height: 52px !important; }
  html[data-theme='dark'] .logo img { height: 52px !important; }
}

/* Optional: support manual data-theme attribute */
/* (kept for compatibility) explicit data-theme helper is above; no-op here */

/* Navigation controls (small buttons near logo) */
.nav-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 8px;
}
.nav-controls .btn {
  padding: 6px 10px;
  font-size: 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--color-text);
}

/* Mobile nav open state */
.nav-menu {
  transition: max-height 0.25s ease, opacity 0.25s ease;
}
.nav-menu.open {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 80px;
  right: 16px;
  background: var(--color-surface);
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 1200;
}

@media (min-width: 769px) {
  .nav-menu.open { display: flex !important; position: static; box-shadow: none; flex-direction: row; }
}

/* Extra high-specificity override for navbar contact link in dark mode
   This ensures styles from `styles.css` (including !important rules) are overridden. */
html[data-theme='dark'] .navbar .nav-menu > li > a.btn-contact,
html[data-theme='dark'] .navbar-container .nav-menu > li > a.btn-contact {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
  transform: none !important;
}

/* Disable hover transform and prevent text color changes on hover for navbar contact */
html[data-theme='dark'] .navbar .nav-menu > li > a.btn-contact:hover,
html[data-theme='dark'] .navbar-container .nav-menu > li > a.btn-contact:hover {
  background: #f2f2f2 !important;
  color: #000000 !important; /* enforce black text on hover */
  transform: none !important; /* remove lift effect */
}

body.dark-theme .service-card {
    background-color: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border-color: rgba(var(--color-gray-400-rgb), 0.2);
}

body.dark-theme .service-card:hover {
    box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}

body.dark-theme .stat-card {
    background-color: var(--card-bg);
    border-color: rgba(var(--color-gray-400-rgb), 0.2);
}

body.dark-theme .stat-box {
    background-color: var(--card-bg);
    border-color: rgba(var(--color-gray-400-rgb), 0.2);
}

body.dark-theme .dropdown-content li a {
    color: var(--color-gray-200);
}

body.dark-theme .external-link-icon,
body.dark-theme .copy-icon {
    stroke: var(--color-gray-200);
}

/* 테마 전환 애니메이션 - font-family 제거 */
body, 
body * {
    transition: background-color 0.8s ease, 
                color 0.8s ease, 
                border-color 0.8s ease !important;
}

body.dark-theme .dropdown-content li a {
    color: var(--color-gray-200);
}

body.dark-theme .external-link-icon,
body.dark-theme .copy-icon {
    stroke: var(--color-gray-200);
}

/* 테마 전환 애니메이션 */
body, 
body * {
    transition: background-color 0.8s ease, 
                color 0.8s ease, 
                border-color 0.8s ease, 
                font-family 0.8s ease !important; /* 모든 transition을 0.8s로 통일 */
}