/*
 * 메인 상품카드 `담기` 버튼 아이콘 보정 (CH-U-MA-00-00 인기상품·추천상품).
 *
 * 목업 CSS 는 같은 버튼의 아이콘을 두 벌 갖고 있다.
 *
 *   · `page/product.css`  · `page/event.css`  → `/assets/images/main/product-cart.svg`
 *                                                (viewBox 14×14 — 목업 화면의 그 아이콘)
 *   · `common/_components.css`                 → `/assets/images/common/product-cart.svg`
 *                                                (viewBox 28×21 — 헤더용 큰 카트, 가로로 넓다)
 *
 * 페이지 CSS 가 없는 화면(**메인**)은 `_components.css` 쪽으로 떨어져 28×21 아이콘이
 * 14×14 칸에 `contain` 으로 눌려 들어간다 — 상품목록의 같은 버튼과 눈에 띄게 다르다.
 *
 * `_components.css` 는 목업 퍼블리싱 원본이라 고치지 않고(전역을 바꾸면 상품상세 추천상품 등
 * 지금 그 아이콘을 쓰는 곳까지 함께 바뀐다), **메인 화면에만** 목업이 이미 갖고 있는 자산으로
 * 되돌린다. 새 아이콘을 CSS 로 그리지 않고 `main/product-cart.svg` 를 그대로 재사용한다.
 *
 * 범위는 `.page-main` 하나다 — 상품목록(`.page-product`)·기획전(`.page-event-*`)·
 * 상품상세는 각자의 페이지 CSS 가 이미 정하고 있어 이 파일이 닿지 않는다.
 *
 * 이 파일은 `style.css` 뒤에 실린다(`src/app/layout.tsx`) — 특정도가 같아도 여기가 이긴다.
 */

.page-main .product-card .cart-action::before {
  background-image: url('/assets/images/main/product-cart.svg');
}

/*
 * 상태 표시 — 목업은 `.cart-action` 에 hover·focus·disabled 규칙을 두지 않았다.
 * 담기는 장바구니를 바꾸는 동작이라 키보드 사용자가 초점 위치를 알아야 하고,
 * 담는 중(`disabled`)에는 눌리지 않는다는 것이 보여야 한다. 색·테두리는 원본을 유지하고
 * 초점 링과 흐림만 얹는다(즐겨찾기 버튼의 `:focus-visible` 규약과 같은 모양).
 */
.page-main .product-card .cart-action:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.page-main .product-card .cart-action:disabled {
  cursor: default;
  opacity: 0.6;
}