/* ───────────────────────────────────────────────
   High-Contrast Dark-Theme Overrides (최종, 통합본)
─────────────────────────────────────────────── */
html.dark-theme {
  --hc-bg:         #111f2e;   /* 짙은 네이비그레이 배경 */
  --hc-panel:      #2A3F5E;   /* 패널/모달 배경 */
  --hc-panel-alt:  #2A3F5E;   /* (예비) 클릭가능 기본 배경 */
  --hc-text:       #ffffff;   /* Pure White 텍스트 */
  --hc-accent:     #e6c542;   /* 저채도 옐로우 (강조용) */
  --hc-badge-bg:   #2A3F5E;   /* 배지용 짙은 네이비그레이 */
  --hc-active-bg:  #0f1824;   /* 호버/액티브 배경 (더 어두운 네이비) */
}

/* 1) 전역 Override (이미지·투명 요소 제외) */
html.dark-theme *:not(img):not(video):not([style*="opacity"]):not(.product-info):not(p) {
  background-color: var(--hc-bg);
  color:            var(--hc-text) !important;
  box-shadow:       none           !important;
  background-image: none           !important;
}
html.dark-theme p { color: white !important; }

/* 2) 단순 텍스트 태그 배경 투명 유지 */
html.dark-theme p,
html.dark-theme span,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme ul,
html.dark-theme li {
  background-color: transparent !important;
}

/* 3) 패널/모달/카드 기본 스타일 */
html.dark-theme .payment-modal-box,
html.dark-theme .order-confirm-modal .modal-box,
html.dark-theme .screen-box,
html.dark-theme .modal-content,
html.dark-theme .category-panel,
html.dark-theme .cart-area,
html.dark-theme .product-area,
html.dark-theme .voice-list,
html.dark-theme .voice-input {
  background-color: var(--hc-panel) !important;
  border:           2px solid var(--hc-text) !important;
}

/* 4) 클릭 가능한 요소: 기본 배경 = --hc-panel, 흰 테두리 */
html.dark-theme button,
html.dark-theme .btn,
html.dark-theme .action-btn,
html.dark-theme .order-btn,
html.dark-theme .voice-btn,
html.dark-theme .guide-btn,
html.dark-theme .call-btn,
html.dark-theme .call-btn2,
html.dark-theme .return-btn,
html.dark-theme .category-button,
html.dark-theme .product-item,
html.dark-theme .detailed-option,
html.dark-theme .checkout-btn,
html.dark-theme .cart-icon-btn,
html.dark-theme .bottom-menu-btn,
html.dark-theme .floating-btn,
html.dark-theme .lang-btn,
html.dark-theme .modal-close-btn,
html.dark-theme .close-screen,
html.dark-theme .two-btns button,
html.dark-theme li {
  background-color: var(--hc-panel) !important;   /* ← 통일 */
  border:           2px solid var(--hc-text) !important;
  color:            var(--hc-text) !important;
  outline:          none !important;
  box-shadow:       none !important;
}


html.dark-theme .cart-header,
html.dark-theme .cart-header div,
html.dark-theme .cart-header .cart-title,
html.dark-theme .cart-header .cart-badge,
html.dark-theme .cart-footer,
html.dark-theme .cart-item,
html.dark-theme .cart-total,
html.dark-theme .cart-item .item-info,
html.dark-theme .cart-item .item-quantity {

  background-color: var(--hc-panel) !important;   /* ← 통일 */
  color:            var(--hc-text) !important;
  outline:          none !important;
  box-shadow:       none !important;
}

/* 5) Hover/Focus: active-bg 배경 + 노랑 테두리 */
html.dark-theme button:hover,
html.dark-theme button:focus,
html.dark-theme .btn:hover,
html.dark-theme .btn:focus,
html.dark-theme .action-btn:hover,
html.dark-theme .action-btn:focus,
html.dark-theme .order-btn:hover,
html.dark-theme .order-btn:focus,
html.dark-theme .voice-btn:hover,
html.dark-theme .voice-btn:focus,
html.dark-theme .guide-btn:hover,
html.dark-theme .guide-btn:focus,
html.dark-theme .call-btn:hover,
html.dark-theme .call-btn:focus,
html.dark-theme .call-btn2:hover,
html.dark-theme .call-btn2:focus,
html.dark-theme .return-btn:hover,
html.dark-theme .return-btn:focus,
html.dark-theme .category-button:hover,
html.dark-theme .category-button:focus,
html.dark-theme .product-item:hover,
html.dark-theme .product-item:focus,
html.dark-theme .detailed-option:hover,
html.dark-theme .detailed-option:focus,
html.dark-theme .checkout-btn:hover,
html.dark-theme .checkout-btn:focus,
html.dark-theme .cart-icon-btn:hover,
html.dark-theme .cart-icon-btn:focus,
html.dark-theme .bottom-menu-btn:hover,
html.dark-theme .bottom-menu-btn:focus,
html.dark-theme .floating-btn:hover,
html.dark-theme .floating-btn:focus,
html.dark-theme .lang-btn:hover,
html.dark-theme .lang-btn:focus,
html.dark-theme .modal-close-btn:hover,
html.dark-theme .modal-close-btn:focus,
html.dark-theme .close-screen:hover,
html.dark-theme .close-screen:focus,
html.dark-theme .two-btns button:hover,
html.dark-theme .two-btns button:focus {
  background-color: var(--hc-active-bg) !important;
  border-color:     var(--hc-accent)   !important;
}

/* 6) Active: active-bg 배경 + 노랑 테두리 */
html.dark-theme button:active,
html.dark-theme .btn:active,
html.dark-theme .action-btn:active,
html.dark-theme .order-btn:active,
html.dark-theme .voice-btn:active,
html.dark-theme .guide-btn:active,
html.dark-theme .call-btn:active,
html.dark-theme .call-btn2:active,
html.dark-theme .return-btn:active,
html.dark-theme .category-button:active,
html.dark-theme .product-item:active,
html.dark-theme .detailed-option:active,
html.dark-theme .checkout-btn:active,
html.dark-theme .cart-icon-btn:active,
html.dark-theme .bottom-menu-btn:active,
html.dark-theme .floating-btn:active,
html.dark-theme .lang-btn:active,
html.dark-theme .modal-close-btn:active,
html.dark-theme .close-screen:active,
html.dark-theme .two-btns button:active {
  background-color: var(--hc-active-bg) !important;
  border-color:     var(--hc-accent)   !important;
}

/* 7) 링크 강조: 흰 + 노랑 밑줄 */
html.dark-theme a,
html.dark-theme a:visited {
  color:           var(--hc-text) !important;
  text-decoration: underline var(--hc-accent) !important;
  background-color: transparent !important;
}

/* 8) 배지(장바구니 숫자) */
html.dark-theme .cart-badge {
  background-color: var(--hc-badge-bg) !important;
  border:           2px solid var(--hc-badge-bg) !important;
  color:            var(--hc-text) !important;
}

/* 9) 스크롤 인디케이터: 투명, 아이콘만 흰색 */
html.dark-theme .scroll-indicator,
html.dark-theme #categoryScrollIndicator,
html.dark-theme #scrollIndicator {
  background-color: transparent !important;
  border:           none !important;
  box-shadow:       none !important;
}
html.dark-theme .arrow-down { color: var(--hc-text) !important; }

/* 10) WebKit 스크롤바: 트랙 투명, Thumb 노랑, 두께 유지 */
html.dark-theme ::-webkit-scrollbar { width: 16px; height: 16px; }
html.dark-theme ::-webkit-scrollbar-track { background-color: transparent !important; }
html.dark-theme ::-webkit-scrollbar-thumb {
  background-color: var(--hc-accent) !important;
  border-radius:    8px !important;
  border:           4px solid var(--hc-bg) !important;
}

/* 11) 오버레이(모달·페이먼트·카드) 전체 배경 어둡게 */
html.dark-theme .payment-modal,
html.dark-theme .order-confirm-modal,
html.dark-theme .card-overlay,
html.dark-theme .payment-screen,
html.dark-theme .modal {
  background-color: rgba(0,0,0,0.9) !important;
}

/* 12) Disabled 상태: 반투명 흰 테두리 & 텍스트
   (기본 배경은 panel 유지, 필요 시 panel-alt 로 교체 가능) */
html.dark-theme button:disabled,
html.dark-theme .btn:disabled {
  background-color: var(--hc-panel) !important;
  color:            rgba(255,255,255,0.4) !important;
  border:           2px solid rgba(255,255,255,0.4) !important;
}

/* 13) 언어 선택 플로팅 예외 처리 */
html.dark-theme #langFloatingWrapper,
html.dark-theme .lang-list,
html.dark-theme .cart-btn-column {
  background-color: transparent !important;
  color:            inherit !important;
  border:           none !important;
  box-shadow:       none !important;
}


html.dark-theme button {
  background: var(--hc-panel) !important;
}

html.dark-theme .btn-panel,
html.dark-theme .category-panel,
html.dark-theme .category-area,
html.dark-theme .bottom-nav,
html.dark-theme .cart-item,
html.dark-theme body
html.dark-theme {
  background: var(--hc-panel) !important;
}
 
html.dark-theme .cart-item:focus,
html.dark-theme .cart-item:active,
html.dark-theme .cart-item:hover,
html.dark-theme #cartList li:hover,
html.dark-theme #cartList li:active,
html.dark-theme #cartList li:focus {
  background: var(--hc-panel) !important;
}