/* darkmode.css - 다크 모드 전용 덮어쓰기 */

/* 1) CSS 변수 재정의 */
:root {
    --background-color: #121212;
    --card-background:   #1e1e1e;
    --text-color:        #e0e0e0;
    --primary-color:     #333333;
    --secondary-color:   #444444;
    --border-color:      #555555;
    --shadow-color:      rgba(0, 0, 0, 0.8);
  }
  
  /* 2) 전역 배경·텍스트 */
  body, html {
    background-color: var(--background-color) !important;
    color:            var(--text-color)       !important;
  }
  
  /* 3) 링크·버튼·메뉴 */
  .site-nav a, .login-link {
    background-color: var(--primary-color)   !important;
    border-color:     var(--secondary-color) !important;
  }
  .menu-item:hover,
  .site-nav a:hover,
  .login-link:hover {
    filter: brightness(1.2) !important;
  }
  
  /* 4) 헤더·내비게이션 */
  .main-header, .site-nav {
    background-color: var(--primary-color) !important;
  }
  
  /* 5) 주요 컨테이너·섹션 */
  .main-container,
  .ranking-section, .live-ranking-section,
  .notice-section, .youtube-section, .patch-section,
  .apk-download-section, .notice-and-video {
    color:            var(--text-color)       !important;
    border-color:     var(--border-color)     !important;
  }
  
  /* 6) 섹션 제목 - 순수 화이트 */
  .quick-search-section h2,
  .notice-section h2,
  .youtube-section h2,
  .live-ranking-section h2,
  .ranking-section h2,
  .patch-section h2,
  .apk-download-section h2 {
    color: #ffffff !important;
  }
  .quick-search-section h2 i,
  .notice-section h2 i,
  .youtube-section h2 i,
  .live-ranking-section h2 i,
  .ranking-section h2 i,
  .patch-section h2 i,
  .apk-download-section h2 i {
    color: #ffffff !important;
  }
  
  /* 6.1) APK 설명 텍스트 - 순수 화이트 */
  .apk-description {
    color: #ffffff !important;
  }
  
  .patch-card .patch-details li{
    color: #ffffff !important;
  }

  /* 7) 카드·리스트 아이템 */
  #rankingList li, #liveRankingList li,
  .notice-item, .video-item, .patch-card {
    background-color: var(--card-background) !important;
    color:            white      !important;
    border:           1px solid var(--border-color) !important;
    box-shadow:       0 4px 6px var(--shadow-color) !important;
  }

  .youtube-list .video-header {
    background-color: var(--card-background) !important;
    color:            var(--text-color)       !important;
    border:           1px solid var(--border-color) !important;
    box-shadow:       0 4px 6px var(--shadow-color) !important;
  }

  .live-ranking-section #liveRankingList li, .ranking-section #rankingList li{
    background-color: white !important;
    color: black !important; 
  }
  
  /* 8) 입력창·자동완성·버튼 */
  input, textarea, select,
  .quick-search input, .quick-search button,
  .keyword-suggestions, .keyword-item {
    background-color: var(--card-background) !important;
    color:            var(--primary-color) !important;
    border:           1px solid var(--border-color) !important;
  }
  /* 플레이스홀더 색상 */
  ::-webkit-input-placeholder { color: #ffffff !important; opacity: 0.7; }
  ::-moz-placeholder           { color: #ffffff !important; opacity: 0.7; }
  :-ms-input-placeholder      { color: #ffffff !important; opacity: 0.7; }
  :-moz-placeholder           { color: #ffffff !important; opacity: 0.7; }
  
  /* 9) 구분선 */
  .divider, hr {
    border-color: var(--border-color) !important;
  }
  
  /* 10) 모달 */
  #giftCalcModal.open,
  #giftCalcModal .modal-content {
    background-color: var(--card-background) !important;
    color:            var(--text-color)       !important;
  }
  
  /* 11) YouTube 섹션 폴백 링크 */
  .youtube-section .video-frame a {
    color: var(--text-color) !important;
  }
  
  /* 12) 패치 노트 제목 */
  .patch-card .patch-header .patch-title {
    color: var(--text-color) !important;
  }
  
  /* 13) 토글 아이콘 효과 및 상태 표시 */
  .darkmode-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: transform 0.3s, color 0.3s;
  }
  .darkmode-toggle:hover {
    transform: rotate(15deg);
  }
  .darkmode-toggle .fa-moon { display: inline-block !important; color: var(--text-color) !important; }
  .darkmode-toggle .fa-sun  { display: none !important; }
  .dark-mode-index .darkmode-toggle .fa-moon { display: none !important; }
  .dark-mode-index .darkmode-toggle .fa-sun  { display: inline-block !important; color: var(--text-color) !important; }