모바일에서 닫기 버튼이나 페이지 번호가 잘 안 눌리고 옆 버튼이 대신 눌린다면, 대부분 눈에 보이는 크기가 아니라 터치 영역이 작은 것이 원인입니다.
디자인은 그대로 두고 padding과 min-height로 누르는 범위를 44px 안팎까지 넓히면 오터치 문의가 눈에 띄게 줄어듭니다.

1. 터치 영역, 어느 정도가 기준일까

주요 가이드라인이 제시하는 최소 크기는 아래와 같습니다. 단위가 조금씩 다르지만 웹에서는 CSS 픽셀 기준으로 44px 전후를 목표로 잡으면 무난합니다.

2. padding과 min-height로 누르는 범위 넓히기

가장 간단한 방법은 아이콘은 그대로 두고 버튼 박스만 키우는 것입니다. inline-flex로 가운데 정렬을 잡아 두면 아이콘 위치가 흐트러지지 않습니다.

/* 아이콘은 20px 그대로, 누르는 영역만 44px */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

3. 레이아웃이 밀릴 땐 ::after로 영역만 확장

팝업 우측 상단 닫기 버튼처럼 크기를 키우면 주변 요소가 밀리는 경우가 있습니다. 이때는 가상 요소를 버튼 바깥으로 살짝 넓혀 주면, 화면상 크기는 같고 손가락이 닿는 범위만 커집니다. 다만 옆 버튼의 영역과 겹치지 않는지는 꼭 확인해야 합니다.

/* 레이아웃은 두고 눌리는 범위만 확장 */
.close-btn { position: relative; }
.close-btn::after {
  content: "";
  position: absolute;
  inset: -12px;
}

4. 버튼 사이 간격도 함께 챙기기

게시판 페이지 번호나 SNS 아이콘처럼 작은 버튼이 붙어 있으면, 크기를 키워도 경계에서 오터치가 납니다. gap으로 8px 정도만 띄워도 체감이 확실히 다릅니다. 본문 문장 속 텍스트 링크는 예외로 두고, 단독으로 쓰이는 버튼과 아이콘 위주로 점검하시면 됩니다.

/* 붙어 있는 버튼 사이에 간격 확보 */
.pager { display: flex; gap: 8px; }
.pager a { min-width: 44px; min-height: 44px; }