/* -------------------------------
   Hover/Active/Focused 효과統一
   ------------------------------- */

/* 카테고리 항목 */
.category-list > li {
  outline: none;
  transition: background-color .2s, color .2s;
}
.category-list > li:hover,
.category-list > li:active,
.category-list > li.focused,
.category-list > li:focus {
  background-color: var(--hover-bg-color) !important;
  color: var(--hover-text-color) !important;
}
.category-list > li:focus-visible {
  outline: 2px solid #3399ff !important;
  outline-offset: 2px !important;
}

/* 상품 목록 카드 */
.product-list > li.product-item {
  outline: none;
  transition: box-shadow .2s, transform .2s, background-color .2s;
}
.product-list > li.product-item:hover,
.product-list > li.product-item:active,
.product-list > li.product-item.focused,
.product-list > li.product-item:focus {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  transform: translateY(-2px) !important;
  background-color: var(--product-hover-bg, #fff) !important;
}
.product-list > li.product-item:focus-visible {
  outline: 2px solid #3399ff !important;
  outline-offset: 2px !important;
}

/* 장바구니 리스트 항목 */
#cartList li {
  outline: none;
  transition: background-color .2s;
}
#cartList li:hover,
#cartList li:active,
#cartList li.focused,
#cartList li:focus {
  background-color: #f5f5f5 !important;
}
#cartList li:focus-visible {
  outline: 2px solid #3399ff !important;
  outline-offset: 2px !important;
}

/* 장바구니 컨트롤 버튼 */
.cart-controls button {
  outline: none;
  transition: background-color .2s;
}
.cart-controls button:hover,
.cart-controls button:active,
.cart-controls button.focused,
.cart-controls button:focus {
  background-color: #ececec !important;
}
.cart-controls button:focus-visible {
  outline: 2px solid #3399ff !important;
  outline-offset: 2px !important;
}

/* 결제하기 버튼 */
#checkoutBtn {
  outline: none;
  transition: background-color .2s, color .2s;
}
#checkoutBtn:hover,
#checkoutBtn:active,
#checkoutBtn.focused,
#checkoutBtn:focus {
  background-color: #0066cc !important;
  color: #fff !important;
}
#checkoutBtn:focus-visible {
  outline: 2px solid #3399ff !important;
  outline-offset: 2px !important;
}

/* 하단 네비 버튼 */
.bottom-menu-btn {
  outline: none;
  transition: background-color .2s;
}
.bottom-menu-btn:hover,
.bottom-menu-btn:active,
.bottom-menu-btn.focused,
.bottom-menu-btn:focus {
  background-color: #ddd !important;
}
.bottom-menu-btn:focus-visible {
  outline: 2px solid #3399ff !important;
  outline-offset: 2px !important;
}