/* ==========================================================================
   GoModo (고모도) 라이트 / 다크 테마 시스템 (theme.css)
   - 완벽한 고대비 가시성 및 WCAG 2.1 접근성 가이드라인 준수
   - 다크/라이트 테마 전 영역 100% 대응
   ========================================================================== */

/* 기본 전환 트랜지션 (부드러운 색상 변화) */
body, header, main, section, footer, div, input, select, button {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* ==========================================================================
   [Light Mode Overrides - html.light]
   ========================================================================== */

html.light {
  color-scheme: light;
}

/* 1. 기본 배경 및 텍스트 */
html.light body {
  background-color: #f8fafc !important; /* slate-50 */
  color: #0f172a !important;            /* slate-900 */
}

/* 2. 헤더 & 상단 고정 네비게이션 */
html.light header {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: #e2e8f0 !important; /* slate-200 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  backdrop-filter: blur(12px) !important;
}

/* 헤더 도구 목록 버튼 (라이트 모드 고대비 정돈) */
html.light #tool-dropdown-btn {
  background-color: #f1f5f9 !important; /* slate-100 */
  border-color: #cbd5e1 !important;     /* slate-300 */
  color: #0f172a !important;            /* slate-900 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html.light #tool-dropdown-btn:hover {
  background-color: #e2e8f0 !important; /* slate-200 */
  border-color: #94a3b8 !important;
}

html.light #tool-dropdown-btn span {
  color: #0f172a !important;
}

html.light #tool-dropdown-arrow {
  color: #475569 !important;
}

/* 헤더 아이콘 버튼 (공유 & 테마 토글 버튼) */
html.light header button.bg-slate-800\/80,
html.light header button.bg-slate-800\/90,
html.light header a.bg-slate-800\/80 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light header button.bg-slate-800\/80:hover,
html.light header a.bg-slate-800\/80:hover {
  background-color: #e2e8f0 !important;
}

/* 헤더 뒤로가기 화살표 버튼 */
html.light header a.text-slate-400 {
  color: #475569 !important;
}

html.light header a.text-slate-400:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 3. 배경 컨테이너 및 카드 */
/* 메인 슬레이트-900 카드 -> 순백색 카드 (그림자 및 테두리 정돈) */
html.light .bg-slate-900,
html.light .bg-slate-900\/98,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/50 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
}

/* 내부 슬레이트-950 박스 -> 부드러운 slate-100 연회색 박스 */
html.light .bg-slate-950,
html.light .bg-slate-950\/90,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/70,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/50,
html.light .bg-slate-950\/40 {
  background-color: #f1f5f9 !important; /* slate-100 */
  border-color: #e2e8f0 !important;
}

/* 슬레이트-800 서브 박스, 통계 그리드 박스, 버튼, 태그 -> slate-50/100 및 고대비 텍스트 */
html.light .bg-slate-800,
html.light .bg-slate-800\/90,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/70,
html.light .bg-slate-800\/60,
html.light .bg-slate-800\/50,
html.light .bg-slate-800\/40 {
  background-color: #f8fafc !important; /* slate-50 */
  border-color: #e2e8f0 !important;     /* slate-200 */
  color: #0f172a !important;
}

/* 버튼 hover 상태 */
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-700:hover,
html.light .hover\:bg-slate-800\/80:hover,
html.light .hover\:bg-slate-800\/40:hover {
  background-color: #e2e8f0 !important; /* slate-200 */
}

/* 4. 다크 그라디언트 카드 -> 라이트 모드 깔끔한 화이트/연회색 카드 */
html.light .from-slate-900.via-slate-900.to-slate-950,
html.light .from-slate-900.to-slate-950,
html.light .from-slate-950.via-slate-900.to-slate-950,
html.light .from-slate-900.to-indigo-950\/40,
html.light .from-slate-900.to-blue-950\/40,
html.light .from-indigo-950.via-slate-900.to-slate-950 {
  background-image: linear-gradient(to bottom right, #ffffff, #f8fafc) !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
}

/* 5. 텍스트 가시성 & 고대비 타이포그래피 (WCAG AAA/AA 4.5:1 이상) */
/* 기본 슬레이트 계열 텍스트 */
html.light .text-white {
  color: #0f172a !important; /* slate-900 */
}

html.light .text-slate-100,
html.light .text-slate-200 {
  color: #1e293b !important; /* slate-800 */
}

html.light .text-slate-300 {
  color: #334155 !important; /* slate-700 */
}

html.light .text-slate-400 {
  color: #475569 !important; /* slate-600 */
}

html.light .text-slate-500 {
  color: #64748b !important; /* slate-500 */
}

/* [핵심 포인트] 모바일/라이트 테마에서 흐릿하게 보이던 컬러 텍스트 고대비 보정 */
/* Amber / Yellow (황금/노랑 텍스트 -> 짙고 선명한 Amber-700/800으로 보정) */
html.light .text-amber-300,
html.light .text-amber-400,
html.light .text-amber-400\/90,
html.light .text-yellow-300,
html.light .text-yellow-400 {
  color: #b45309 !important; /* amber-700 */
}

html.light .text-amber-500,
html.light .text-yellow-500 {
  color: #92400e !important; /* amber-800 */
}

html.light .group:hover .group-hover\:text-amber-300:hover,
html.light .hover\:text-amber-300:hover,
html.light .hover\:text-amber-400:hover {
  color: #92400e !important;
}

/* Sky / Blue (하늘/파랑 텍스트 -> 선명한 Sky-700 / Blue-700으로 보정) */
html.light .text-sky-300,
html.light .text-sky-400 {
  color: #0369a1 !important; /* sky-700 */
}

html.light .text-blue-300,
html.light .text-blue-400 {
  color: #1d4ed8 !important; /* blue-700 */
}

html.light .group:hover .group-hover\:text-sky-300:hover,
html.light .hover\:text-sky-300:hover,
html.light .hover\:text-sky-400:hover {
  color: #075985 !important;
}

/* Emerald / Teal (초록 텍스트 -> 선명한 Emerald-700 / Teal-700으로 보정) */
html.light .text-emerald-300,
html.light .text-emerald-400 {
  color: #047857 !important; /* emerald-700 */
}

html.light .text-teal-400 {
  color: #0f766e !important; /* teal-700 */
}

html.light .group:hover .group-hover\:text-emerald-300:hover,
html.light .hover\:text-emerald-300:hover,
html.light .hover\:text-emerald-400:hover {
  color: #065f46 !important;
}

/* Indigo (보라/남색 텍스트 -> 선명한 Indigo-700으로 보정) */
html.light .text-indigo-200,
html.light .text-indigo-300,
html.light .text-indigo-400 {
  color: #4338ca !important; /* indigo-700 */
}

html.light .group:hover .group-hover\:text-indigo-300:hover,
html.light .hover\:text-indigo-300:hover,
html.light .hover\:text-indigo-400:hover {
  color: #3730a3 !important;
}

/* Rose / Red (붉은색 텍스트 -> 선명한 Rose-700 / Red-600으로 보정) */
html.light .text-rose-300,
html.light .text-rose-400 {
  color: #be123c !important; /* rose-700 */
}

html.light .text-rose-500 {
  color: #9f1239 !important; /* rose-800 */
}

html.light .text-red-400 {
  color: #dc2626 !important; /* red-600 */
}

html.light .text-pink-400 {
  color: #db2777 !important; /* pink-600 */
}

html.light .text-purple-400 {
  color: #7c3aed !important; /* purple-600 */
}

html.light .group:hover .group-hover\:text-rose-300:hover,
html.light .hover\:text-rose-300:hover,
html.light .hover\:text-rose-400:hover {
  color: #9f1239 !important;
}

/* 6. 그라디언트 텍스트 (bg-clip-text) 라이트 모드 선명화 */
html.light .text-transparent.bg-clip-text.from-amber-400,
html.light .text-transparent.bg-clip-text.from-amber-500,
html.light .from-amber-400.to-yellow-300,
html.light .from-amber-500.to-yellow-400 {
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
  background-image: none !important;
}

html.light .text-transparent.bg-clip-text.from-emerald-400,
html.light .text-transparent.bg-clip-text.from-emerald-500,
html.light .from-emerald-400.to-teal-300,
html.light .from-emerald-400.to-emerald-200 {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
  background-image: none !important;
}

html.light .text-transparent.bg-clip-text.from-sky-400,
html.light .from-sky-400.to-blue-300 {
  color: #0369a1 !important;
  -webkit-text-fill-color: #0369a1 !important;
  background-image: none !important;
}

html.light .text-transparent.bg-clip-text.from-indigo-400,
html.light .text-transparent.bg-clip-text.from-indigo-500,
html.light .from-indigo-400.to-blue-400,
html.light .from-indigo-500.to-blue-600 {
  color: #4338ca !important;
  -webkit-text-fill-color: #4338ca !important;
  background-image: none !important;
}

html.light .text-transparent.bg-clip-text.from-blue-400 {
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  background-image: none !important;
}

html.light .text-transparent.bg-clip-text.from-rose-400,
html.light .from-rose-400.to-pink-300 {
  color: #be123c !important;
  -webkit-text-fill-color: #be123c !important;
  background-image: none !important;
}

/* 7. 테두리 및 구분선 (Borders & Dividers) */
html.light .border-slate-800,
html.light .border-slate-800\/90,
html.light .border-slate-800\/80,
html.light .border-slate-800\/60,
html.light .border-slate-700,
html.light .border-slate-700\/80 {
  border-color: #e2e8f0 !important; /* slate-200 */
}

html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: #e2e8f0 !important;
}

/* 뱃지 테두리 가시성 강화 */
html.light .border-amber-500\/30,
html.light .border-amber-500\/40,
html.light .border-amber-500\/50 {
  border-color: #fcd34d !important; /* amber-300 */
}

html.light .border-sky-500\/30,
html.light .border-sky-500\/40 {
  border-color: #bae6fd !important; /* sky-200 */
}

html.light .border-emerald-500\/30,
html.light .border-emerald-500\/40 {
  border-color: #a7f3d0 !important; /* emerald-200 */
}

html.light .border-indigo-500\/30,
html.light .border-indigo-500\/40 {
  border-color: #c7d2fe !important; /* indigo-200 */
}

html.light .border-rose-500\/30,
html.light .border-rose-500\/40 {
  border-color: #fecdd3 !important; /* rose-200 */
}

/* 8. 입력 폼 필드 (Input, Select, Textarea) */
html.light input[type="text"],
html.light input[type="number"],
html.light input[type="date"],
html.light input[type="email"],
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important; /* slate-300 */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2) !important;
}

html.light select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

/* 사주 생년월일 캘린더 트리거 버튼 */
html.light #saju-birth-trigger {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

html.light #saju-birth-trigger:hover {
  background-color: #f8fafc !important;
  border-color: #b45309 !important;
}

/* 9. 테이블 스타일 (부동산 요율표, 이자 비교표 등) */
html.light table th {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border-bottom-color: #cbd5e1 !important;
}

html.light table td {
  border-bottom-color: #f1f5f9 !important;
  color: #1e293b !important;
}

html.light table tbody tr:hover {
  background-color: #f8fafc !important;
}

/* 10. 커스텀 캘린더 팝업 (로또 사주 캘린더) */
html.light #custom-calendar-popup {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}

html.light #custom-calendar-popup button.cal-quick-decade {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

html.light #custom-calendar-popup button.cal-quick-decade:hover {
  background-color: #e2e8f0 !important;
  color: #b45309 !important;
}

html.light #custom-calendar-popup button.text-slate-100,
html.light #custom-calendar-popup button.text-slate-200 {
  color: #0f172a !important;
}

html.light #custom-calendar-popup button.text-slate-100:hover,
html.light #custom-calendar-popup button.text-slate-200:hover {
  background-color: #f1f5f9 !important;
}

/* 11. 도구 드롭다운 메뉴 (Tool Dropdown) */
html.light #tool-dropdown-menu {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
}

html.light #tool-dropdown-menu .border-slate-800 {
  border-color: #f1f5f9 !important;
}

html.light #tool-dropdown-menu a:hover {
  background-color: #f1f5f9 !important;
}

/* 12. 공통 소셜 공유 모달 (#gomodo-share-modal) & 토스트 */
html.light #gomodo-share-modal .bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

html.light #gomodo-share-modal .bg-slate-950,
html.light #gomodo-share-modal .bg-slate-950\/70 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html.light #gomodo-share-modal button:hover {
  background-color: #f1f5f9 !important;
}

html.light #gomodo-toast {
  background-color: rgba(255, 255, 255, 0.98) !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* 13. 로또 공 번호 보호 (공 내부 텍스트는 선명한 화이트 유지) */
html.light .ball,
html.light .ball-sm {
  color: #ffffff !important;
}

/* 14. 푸터 */
html.light footer {
  background-color: #f1f5f9 !important;
  border-top-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* 테마 토글 버튼 커서 */
.theme-toggle-btn {
  cursor: pointer;
  user-select: none;
}