요약

모바일 뷰포트(≤767px)에서 드롭다운 메뉴의 아이콘이 라벨 텍스트와 겹치는 문제를 수정합니다.

Fixes #160

원인

rhwp-studio/src/styles/menu-bar.css의 기본 .md-item은 padding: 5px 16px 5px 32px로 position: absolute; left: 8px; width: 16px 아이콘 자리를 왼쪽에 확보하고 있습니다.

rhwp-studio/src/styles/responsive.css의 모바일 미디어쿼리가 padding: 8px 16px(2-value shorthand)로 덮어쓰면서 왼쪽 여백이 32px → 16px로 축소되어, 라벨이 아이콘 영역과 8px 겹치게 됩니다.

수정

4-value padding으로 변경해 왼쪽 32px(아이콘 자리)를 유지합니다:

@media (width <= 767px) {
  .md-item {
    min-height: var(--touch-target-min);
-   padding: 8px 16px;
+   padding: 8px 16px 8px 32px;
    font-size: var(--font-size-md);
  }
}

터치 타겟 세로 8px 여백은 유지되며, 좌우 간격도 그대로입니다.

검증

• 뷰포트 390×844 Chromium에서 재현 → 픽셀 단위 측정 확인 (아이콘 x=8–24, 라벨 x=16부터, 8px 겹침)
• 인라인으로 fix CSS 주입 → 겹침 해소 확인
• 데스크톱 뷰포트(≥768px)는 본 수정 영향 없음 (기본 규칙 그대로)
• CSS-only 변경으로 cargo test / cargo clippy 영향 없음

스크린샷

Before/After 스크린샷을 PR 댓글로 추가합니다.

체크리스트

• devel 브랜치를 대상으로 PR 생성
• CSS-only 변경이므로 cargo 테스트 영향 없음
• 데스크톱 렌더링에 회귀 없음 (미디어쿼리 ≤767px만 수정)