/* ======================
   라이트 모드 상세 스타일
   (배너, 뉴스, 특수 컴포넌트)
   ====================== */

/* Banner 라이트 모드 */
body.light-mode section.main__banner .banner.up {
  background: linear-gradient(135deg, #dcfce7 0%, #86efac 100%);
}

body.light-mode section.main__banner .banner.down {
  background: linear-gradient(135deg, #fee2e2 0%, #fca5a5 100%);
}

body.light-mode section.main__banner .detected_tit h1 {
  background: linear-gradient(to bottom, #1a1d23, #10b981 200%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

body.light-mode section.main__banner .banner.down .detected_tit h1 {
  background: linear-gradient(to bottom, #1a1d23, #ef4444 200%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

body.light-mode section.main__banner .detected_tit p {
  color: #1a1d23;
}

body.light-mode section.main__banner .banner.up .detected_tit .tit_info .detected_value {
  color: #059669;
}

body.light-mode section.main__banner .banner.down .detected_tit .tit_info .detected_value {
  color: #dc2626;
}

/* News Item 라이트 모드 */
body.light-mode .news__item .news_reg_info h3.name {
  color: #1a1d23;
}

body.light-mode .news__item .news_reg_info p.reg_time {
  color: #6b7280;
}

body.light-mode .news__item .news_cnts p {
  color: #4b5563;
}

body.light-mode .news__item .news_icons {
  color: #6b7280;
}

body.light-mode .tbl_news_item {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

/* Dex List 라이트 모드 */
body.light-mode .dex_list .dex_item {
  border-color: #d1d5db;
}

body.light-mode .dex_sponsored {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

body.light-mode .dex_sponsored h5 {
  color: #6b7280;
  border-bottom-color: #e5e7eb;
}

body.light-mode .dex_sponsored .btn_sponsored {
  border-color: #3b82f6;
  color: #3b82f6;
}

body.light-mode .dex_sponsored .btn_sponsored:hover {
  background-color: #eff6ff;
}

/* Grid Table 라이트 모드 */
body.light-mode .grid-table .cell {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #1a1d23;
}

body.light-mode .grid-table .cell.up {
  color: #059669;
}

body.light-mode .grid-table .cell.down {
  color: #dc2626;
}

/* Timer 라이트 모드 */
body.light-mode .base-timer__path-elapsed {
  stroke: #d1d5db;
}

body.light-mode .base-timer__path-remaining {
  color: #3b82f6;
}

body.light-mode .base-timer__label {
  color: #1a1d23;
}

/* Chat Message 라이트 모드 */
body.light-mode .chat-message-for-coin .coin-alert-box {
  color: #1a1d23;
}

body.light-mode .coin-rocketing {
  background-color: #d1fae5;
  border: 1px solid #86efac;
}

body.light-mode .coin-crashing {
  background-color: #fee2e2;
  border: 1px solid #fca5a5;
}

body.light-mode .coin-chat-time {
  color: #6b7280;
}

body.light-mode .chat-text {
  background-color: #f3f4f6;
  color: #1a1d23;
}

/* Table Bottom 라이트 모드 */
body.light-mode .table_bottom .list_cnt {
  color: #6b7280;
}

/* Coin Name 라이트 모드 */
body.light-mode .coin_name h3 span {
  color: #6b7280;
}

/* Checkbox 라이트 모드 */
body.light-mode .checkbox--typeA {
  color: #4b5563;
}

body.light-mode .checkbox--typeA input[type=checkbox]+em {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxOSIgaGVpZ2h0PSIxOSIgcng9IjMuNSIgc3Ryb2tlPSIjRDFENURCIi8+Cjwvc3ZnPgo=) no-repeat center center / contain;
}

body.light-mode .checkbox--typeA input[type=checkbox]:checked+em {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiByeD0iNCIgZmlsbD0iIzNCODJGNiIvPgo8cGF0aCBkPSJNNiAxMEw4LjUgMTIuNUwxNCA3LjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat center center / contain;
}

/* Button 라이트 모드 */
body.light-mode .btn_brand {
  background-color: #3b82f6;
  color: #ffffff;
}

body.light-mode .btn_brand:hover {
  background-color: #2563eb;
}

body.light-mode .btn_white {
  background-color: #ffffff;
  color: #3b82f6;
  border: 1px solid #d1d5db;
}

body.light-mode .btn_white:hover {
  background-color: #f9fafb;
}

body.light-mode .btn_outline_brand {
  background-color: #ffffff;
  color: #3b82f6;
  border: 1px solid #3b82f6;
}

body.light-mode .btn_outline_brand:hover {
  background-color: #eff6ff;
}

body.light-mode .btn_secondary {
  background-color: #f3f4f6;
  color: #1a1d23;
}

body.light-mode .btn_secondary:hover {
  background-color: #e5e7eb;
}

/* Star Button 라이트 모드 */
body.light-mode .btn_star {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMS41TDkuNzUgNi4yNUwxNC41IDhMOS43NSA5Ljc1TDggMTQuNUw2LjI1IDkuNzVMMS41IDhMNi4yNSA2LjI1TDggMS41WiIgc3Ryb2tlPSIjNkI3MjgwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat center center / contain;
}

body.light-mode .btn_star.active {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMS41TDkuNzUgNi4yNUwxNC41IDhMOS43NSA5Ljc1TDggMTQuNUw2LjI1IDkuNzVMMS41IDhMNi4yNSA2LjI1TDggMS41WiIgZmlsbD0iI0ZBQkYzQyIgc3Ryb2tlPSIjRkFCRjNDIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat center center / contain;
}

/* Input 라이트 모드 */
body.light-mode input[type=text],
body.light-mode input[type=password],
body.light-mode input[type=number],
body.light-mode input[type=email],
body.light-mode input[type=tel] {
  background-color: #f9fafb;
  color: #1a1d23;
}

body.light-mode input[type=text]:focus,
body.light-mode input[type=password]:focus,
body.light-mode input[type=number]:focus,
body.light-mode input[type=email]:focus,
body.light-mode input[type=tel]:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.light-mode input::placeholder {
  color: #9ca3af;
}

/* Search Icon 라이트 모드 */
body.light-mode .input_coin_name .btn_search_coin {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjYiIHN0cm9rZT0iIzZCNzI4MCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xMyAxM0wxNyAxNyIgc3Ryb2tlPSIjNkI3MjgwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K) no-repeat center center / contain;
}

/* Filter Icon 라이트 모드 */
body.light-mode .list_filter .btn_filter span:before {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgNkgxNk00IDEwSDEyTTQgMTRIOCIgc3Ryb2tlPSIjNkI3MjgwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K) no-repeat center center / contain;
}

/* Coin Suggestions 라이트 모드 */
body.light-mode .coin_suggestions {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

body.light-mode .coin_suggestions div {
  color: #1a1d23;
}

body.light-mode .coin_suggestions div:hover {
  background-color: #f3f4f6;
}

/* Refresh Button 라이트 모드 */
body.light-mode .refresh-btn {
  color: #6b7280;
}

body.light-mode .refresh-btn:hover {
  color: #10b981;
}

/* Realtime Badge 라이트 모드 */
body.light-mode .realtime-badge {
  color: #059669;
  border-color: #d1d5db;
  background-color: #ffffff;
}

body.light-mode .real-time-dot {
  background-color: #10b981;
}

/* Blink Animation 라이트 모드 */
body.light-mode #up_coin_target .ranking__item.ranking-flash {
  background-color: #d1fae5;
}

body.light-mode #down_coin_target .ranking__item.ranking-flash {
  background-color: #fee2e2;
}

body.light-mode .status_up_coin.animate-blink {
  animation: blink-green-light 0.6s ease forwards;
}

body.light-mode .status_down_coin.animate-blink {
  animation: blink-red-light 0.6s ease forwards;
}

@keyframes blink-green-light {
  0%   { background-color: rgba(16, 185, 129, 0.3); }
  100% { background-color: #ffffff; }
}

@keyframes blink-red-light {
  0%   { background-color: rgba(239, 68, 68, 0.3); }
  100% { background-color: #ffffff; }
}

/* Smooth Transition */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.light-mode * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}