스마트폰에서 버튼이나 카드를 누르고 나면 마우스를 올렸을 때의 hover 색상이 그대로 남아 있는 현상은, hover 스타일을 @media (hover: hover) 안으로 옮기면 깔끔하게 해결됩니다.
PC에서는 기존 효과를 그대로 살리고, 터치 화면에서는 눌린 듯한 상태가 남지 않게 나누는 방법입니다.

1. hover 스타일을 미디어 쿼리 안으로 옮기기

hover: hover는 "주 입력 장치가 마우스처럼 올려 놓을 수 있는가"를 묻는 조건입니다. 여기에 pointer: fine을 함께 걸면 정밀한 포인터가 있는 환경, 즉 일반적인 PC에서만 hover 효과가 적용됩니다. 크롬, 사파리, 파이어폭스, 삼성 인터넷 등 현재 쓰이는 브라우저는 모두 지원합니다.

/* 기존: 모든 기기에 적용 */
.btn:hover { background: #cc2b2b; }

/* 변경: 마우스 환경에서만 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #cc2b2b; }
}

2. 터치 화면에는 :active로 눌림 반응 주기

hover를 빼면 모바일에서는 눌렀는지 알 수 있는 반응이 사라집니다. 이때는 손가락이 닿아 있는 동안에만 적용되는 :active를 쓰면 됩니다. 손을 떼면 바로 원래대로 돌아오기 때문에 색이 남지 않습니다. 키보드 사용자를 위해 :focus-visible 스타일도 따로 두는 것이 좋습니다.

.btn:active {
  transform: scale(0.98);
  opacity: 0.85;
}
.btn:focus-visible {
  outline: 2px solid #cc2b2b;
  outline-offset: 2px;
}

3. 적용 전에 확인할 점

실제 리뉴얼 작업에서 이 방식으로 바꿀 때 놓치기 쉬운 부분은 아래와 같습니다.

드롭다운처럼 hover로만 열리던 기능은 클릭으로도 열리게 바꿔 둬야 합니다. 마우스와 터치를 함께 쓰는 기기까지 고려해야 한다면, "어느 입력 장치든 hover가 가능한가"를 보는 any-hover를 쓰는 방법도 있습니다. 변경 후에는 PC 브라우저의 모바일 모드만 믿지 말고 실제 아이폰과 안드로이드 폰에서 한 번씩 눌러 보는 것이 확실합니다.