증상

모바일 뷰포트(≤767px)에서 메뉴바 드롭다운(파일/편집/보기 등)을 열면, 아이콘이 있는 항목의 아이콘이 라벨 텍스트 첫 글자 위에 겹쳐 렌더링됩니다.

예: 파일 메뉴에서 "저장", "편집 용지", "인쇄", "제품 정보" 항목이 영향을 받습니다. 아이콘이 없는 "새로 만들기", "열기"는 정상입니다.

재현 절차

1. 브라우저 창을 767px 이하로 축소 (또는 모바일 기기에서 접속)
2. https://edwardkim.github.io/rhwp/ 접속
3. 상단 메뉴바의 "파일" 클릭 → 드롭다운 확인

환경

• URL: https://edwardkim.github.io/rhwp/ (온라인 데모)
• 뷰포트: 390×844 (iPhone 14 기준)에서 재현 확인
• 브라우저: Chromium 기반 (Playwright) — Safari/Firefox에서도 동일 CSS 규칙이므로 재현될 가능성 높음

원인 분석

기본 .md-item (rhwp-studio/src/styles/menu-bar.css:63-73):

.md-item {
  padding: 5px 16px 5px 32px;  /* 왼쪽 32px → 아이콘(width:16px, left:8px) 자리 확보 */
  position: relative;
}

.md-icon {
  position: absolute;
  left: 8px;
  width: 16px;
  /* 결과: 아이콘은 x=8~24에 렌더 */
}

모바일 미디어쿼리(rhwp-studio/src/styles/responsive.css:214-218)가 padding을 2-value shorthand로 덮어써서 왼쪽 여백이 32px → 16px로 축소됩니다:

@media (width <= 767px) {
  .md-item {
    min-height: var(--touch-target-min);
    padding: 8px 16px;   /* ← 왼쪽 16px, 아이콘 자리(32px) 사라짐 */
    font-size: var(--font-size-md);
  }
}

결과적으로 라벨이 x=16부터 시작하고, absolute 아이콘이 x=8~24를 차지하여 8px 구간이 겹칩니다.

브라우저 측정값 (viewport 390px)

수정안

responsive.css:216의 padding을 4-value로 바꿔 왼쪽 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)은 그대로 유지됩니다.

스크린샷

Before/After 스크린샷은 PR에 첨부하겠습니다.

PR

수정 PR: (곧 제출 예정 — 이 이슈를 Fixes로 참조)