/* ======================
   테마 전환 버튼 스타일
   ====================== */

/* 데스크톱 테마 버튼 */
.btn_theme_toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #222531;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}

.btn_theme_toggle:hover {
  background-color: #323546;
  transform: scale(1.05);
}

.btn_theme_toggle .theme_icon {
  width: 20px;
  height: 20px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDNWMU0xMCAxOVYxN00xNyAxMEgxOU0xIDEwSDNNMTUuNjU2OSA0LjM0MzE1TDE3LjA3MTEgMi45Mjg5M00yLjkyODkzIDE3LjA3MTFMNC4zNDMxNSAxNS42NTY5TTE1LjY1NjkgMTUuNjU2OUwxNy4wNzExIDE3LjA3MTFNMS45Mjg5MyAyLjkyODkzTDQuMzQzMTUgNC4zNDMxNU0xNCA5Ljk5OTk5QzE0IDEyLjIwOTEgMTIuMjA5MSAxNC4wMDAxIDEwIDE0LjAwMDFDNy43OTA5NCAxNC4wMDAxIDYuMDAwMDEgMTIuMjA5MSA2LjAwMDAxIDkuOTk5OTlDNi4wMDAwMSA3Ljc5MDkyIDcuNzkwOTQgNi4wMDAwNSAxMCA2LjAwMDA1QzEyLjIwOTEgNi4wMDAwNSAxNCA3Ljc5MDkyIDE0IDkuOTk5OTlaIiBzdHJva2U9IiNGRkRCNjciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat center center / contain;
  transition: transform 0.3s ease;
}

.btn_theme_toggle:hover .theme_icon {
  transform: rotate(20deg);
}

/* 라이트 모드일 때 아이콘 변경 */
body.light-mode .btn_theme_toggle .theme_icon {
  font-size: 18px;
  display: inline-block;
  transition: transform 0.3s ease;
}


/* 모바일 테마 버튼 */
.sidebar__theme {
  padding: 20px;
  border-top: 1px solid #323546;
  border-bottom: 1px solid #323546;
}

.btn_theme_toggle_mo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #222531;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn_theme_toggle_mo:hover {
  background-color: #323546;
}

.btn_theme_toggle_mo .theme_icon {
  width: 24px;
  height: 24px;
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwIDNWMU0xMCAxOVYxN00xNyAxMEgxOU0xIDEwSDNNMTUuNjU2OSA0LjM0MzE1TDE3LjA3MTEgMi45Mjg5M00yLjkyODkzIDE3LjA3MTFMNC4zNDMxNSAxNS42NTY5TTE1LjY1NjkgMTUuNjU2OUwxNy4wNzExIDE3LjA3MTFNMS45Mjg5MyAyLjkyODkzTDQuMzQzMTUgNC4zNDMxNU0xNCA5Ljk5OTk5QzE0IDEyLjIwOTEgMTIuMjA5MSAxNC4wMDAxIDEwIDE0LjAwMDFDNy43OTA5NCAxNC4wMDAxIDYuMDAwMDEgMTIuMjA5MSA2LjAwMDAxIDkuOTk5OTlDNi4wMDAwMSA3Ljc5MDkyIDcuNzkwOTQgNi4wMDAwNSAxMCA2LjAwMDA1QzEyLjIwOTEgNi4wMDAwNSAxNCA3Ljc5MDkyIDE0IDkuOTk5OTlaIiBzdHJva2U9IiNGRkRCNjciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) no-repeat center center / contain;
}

body.light-mode .btn_theme_toggle_mo .theme_icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjMzMzMgMTAuODMzM0MxNy4xMTQ3IDEyLjc2NjQgMTYuMjIzNyAxNC41NzU3IDE0LjgyMjYgMTUuOTc1OEMxMy40MjE1IDE3LjM3NTkgMTEuNjExIDE4LjI2NTIgOS42Nzc4IDE4LjQ4MjJDNy43NDQ2MSAxOC42OTkyIDUuNzkyNzEgMTguMjMzMSA0LjE0MTI2IDE3LjE2MjRDMi40ODk4MSAxNi4wOTE3IDEuMjM3MyAxNC40NzYxIDAuNTg1Nzk1IDEyLjU5OTZDLTAuMDY1NzA3OSAxMC43MjMxIC0wLjE2NzU2IDguNjk5NDUgMC4yODk5ODQgNi43NjQzNkMwLjc0NzUyOCA0LjgyOTI2IDEuODI3NzcgMy4wOTE0IDMuMzY3NiAxLjgwMDQyQzQuOTA3NDMgMC41MDk0NDIgNi44MjQ0NiAtMC4xODY0NDkgOC43OTc4NyAtMC4wODI2MjhDOC40MTQ4MSAxLjA2NjMzIDguMzIzNTcgMi4yMjc5NCA4LjUzMjI1IDMuMzU1NzRDOC43NDA5MyA0LjQ4MzU0IDkuMjQzMTMgNS41NDQ4NiA5Ljk4NDU2IDYuNDUxMjlDMTAuNzI2IDcuMzU3NzIgMTEuNjg0OCA4LjA4MTMgMTIuNzc5MSA4LjU1NjY1QzEzLjg3MzQgOS4wMzIgMTUuMDcwNSA5LjI0NTIyIDE2LjI2NjcgOS4xNzcwOEMxNi42ODIxIDkuMTU1MDQgMTcuMDA4NiA5Ljc5MzgxIDE3LjMzMzMgMTAuODMzM1oiIGZpbGw9IiM2MTg4RkYiLz4KPC9zdmc+Cg==) no-repeat center center / contain;
}

.btn_theme_toggle_mo .theme_text {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

/* ======================
   라이트 모드 스타일
   ====================== */

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

body.light-mode #wrap {
  background-color: #f5f7fa;
}

/* Header */
body.light-mode .header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

body.light-mode .header__gnb nav.gnb ul li a {
  color: #1a1d23;
}

body.light-mode .header_lang ul li {
  color: #6b7280;
}

body.light-mode .header_lang ul li.active {
  color: #1a1d23;
}

body.light-mode .btn_theme_toggle {
  background-color: #f3f4f6;
}

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

/* Main Card */
body.light-mode .main-card__ranking,
body.light-mode .coin-text,
body.light-mode .news__item {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
}

body.light-mode .main-card__ranking h5.tit,
body.light-mode .coin-text__item .tit {
  color: #6b7280;
}

body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
  color: #1a1d23;
}

body.light-mode .coin_name h3 {
  color: #1a1d23;
}

body.light-mode .ranking__item span.no,
body.light-mode .ranking__item .value,
body.light-mode .tbl_list tbody td {
  color: #4b5563;
}

/* Table */
body.light-mode .tbl_list thead th {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

body.light-mode .tbl_list tbody td {
  border-color: #f3f4f6;
}

body.light-mode .table_wrap::-webkit-scrollbar-thumb {
  background: #d1d5db;
}

body.light-mode .table_wrap::-webkit-scrollbar-track {
  background: #f3f4f6;
}

/* Input & Filter */
body.light-mode .input_coin_name,
body.light-mode .list_filter .btn_filter,
body.light-mode .tabs--typeA {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

body.light-mode .input_coin_name input {
  background-color: transparent;
  color: #1a1d23;
}

body.light-mode .tabs--typeA .tabs__link {
  color: #6b7280;
}

body.light-mode .tabs--typeA .tabs__link.on {
  background-color: #ffffff;
  color: #1a1d23;
  border: 1px solid #e5e7eb;
}

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

body.light-mode .list_filter .select_filter h4.tit {
  color: #1a1d23;
}

body.light-mode .list_filter .select_filter .filter_rate h5.tit {
  color: #6b7280;
}

/* Radio & Checkbox */
body.light-mode .radio--typeA input[type=radio]+em,
body.light-mode .radio--typeB input[type=radio]+em {
  color: #6b7280;
}

body.light-mode .radio--typeA input[type=radio]:checked+em {
  background-color: #eff6ff;
  color: #3b82f6;
}

body.light-mode .radio--typeB input[type=radio]:checked+em {
  background-color: #f9fafb;
  border-color: #3b82f6;
}

body.light-mode .is_detailed.active {
  background-color: #eff6ff;
}

/* Chat */
body.light-mode .chat-wrapper {
  background-color: #ffffff;
  border-color: #e5e7eb;
}

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

body.light-mode .chat-input-area input {
  background-color: #ffffff;
  border-color: #e5e7eb;
  color: #1a1d23;
}

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

/* Footer */
body.light-mode .footer {
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
}

body.light-mode .footer__inner p {
  color: #6b7280;
}

/* Select */
body.light-mode .select--typeA {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #1a1d23;
}

/* Pagination */
body.light-mode ul.pagination>li {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #1a1d23;
}

body.light-mode ul.pagination>li.on {
  background-color: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

/* Mobile Sidebar */
body.light-mode .mo_sidebar {
  background-color: rgba(255, 255, 255, 0.95);
}

body.light-mode .sidebar__gnb ul li a {
  color: #1a1d23;
}

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

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

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

body.light-mode .btn_theme_toggle_mo .theme_text {
  color: #1a1d23;
}

/* Dex Filter */
body.light-mode .dex_filter_item {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
}

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

body.light-mode .dex_filter_item:has(.dex_checkbox:checked) {
  background-color: #eff6ff;
  border-color: #3b82f6;
}

body.light-mode .dex_name {
  color: #4b5563;
}

body.light-mode .dex_filter_item:has(.dex_checkbox:checked) .dex_name {
  color: #3b82f6;
}

/* Realtime Badge */
body.light-mode .realtime-badge {
  border-color: #e5e7eb;
  background-color: #ffffff;
}

/* Status Colors (유지) */
body.light-mode .c_blue {
  color: #3b82f6;
}

body.light-mode .c_green {
  color: #10b981;
}

body.light-mode .c_red {
  color: #ef4444;
}

body.light-mode .status_up {
  color: #10b981;
}

body.light-mode .status_down {
  color: #ef4444;
}

/* Mobile */
@media screen and (max-width:767px) {
  .btn_theme_toggle {
    width: 36px;
    height: 36px;
  }

  .btn_theme_toggle .theme_icon {
    width: 18px;
    height: 18px;
  }
}

/* 모바일 햄버거 메뉴 아이콘 */
body.light-mode .btn_mo_menu {
  background: url(../_img/icon/icon_mo_black_menu.svg) no-repeat center center / contain;
}

body.light-mode  .btn_sidebar_close {
  background: url(../_img/icon/icon_sidebar_black_close.svg) no-repeat center center / contain;
}

/* User Info Popup - Light Mode */
body.light-mode .popup__user-info {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}

body.light-mode .popup__user-info p.welcome {
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
}

body.light-mode .popup__user-info p.welcome b {
  color: #1a1d23;
  font-weight: 600;
}

body.light-mode .popup__user-info .user-info {
  background-color: #f9fafb;
}

body.light-mode .popup__user-info .user-info .info .info--value {
  color: #1a1d23;
  font-weight: 700;
}

body.light-mode .popup__user-info .user-info .info .info--tit {
  color: #6b7280;
}

body.light-mode .popup__user-info .user-info .info.level .info--value {
  color: #3b82f6;
}