docs: z-index 문제 해결 과정 및 올바른 해결 방법 추가

- 오후 7시 27분 잘못된 해결 시도 문서화
- 오후 9시 07분 올바른 해결 방법 추가
- z-index 관리 교훈 업데이트

troubleshooting/250730_happybell80_프론트엔드로빙연결.md

@@ -589,9 +589,20 @@ self.cli_timeout = 60  # 변경 후
 
 **문제**: 모바일 UI 버튼들이 로빙 아바타를 가려서 터치 불가
 
-**해결**:
+**잘못된 해결 시도**:
 - 모바일 채팅창에 `relative z-40` 추가
-- 아바타가 UI 버튼들보다 위에 위치하도록 조정
+- 부작용: 활동창/스킬창 선택 영역이 가려짐
+
+## 오후 9시 07분
+
+### z-index 문제 올바른 해결
+
+**문제**: 채팅창 전체의 z-index를 높여서 다른 UI 요소들이 가려짐
+
+**올바른 해결**:
+- 채팅창의 z-40 제거
+- 로빙 아바타 이미지에만 `relative z-50` 적용
+- 결과: 아바타만 클릭 가능하고 다른 UI 요소도 정상 작동
 
 ## 오후 7시 42분
 
@@ -608,7 +619,9 @@ self.cli_timeout = 60  # 변경 후
 
 ### 모바일 UI 설계
 1. **뷰포트 고려**: 패널 높이는 항상 뷰포트 내에서 계산
-2. **z-index 관리**: 레이어 간 상호작용 고려 필수
+2. **z-index 관리**: 
+   - 레이어 간 상호작용 고려 필수
+   - 전체 컨테이너보다 개별 요소에 z-index 적용이 더 정확함
 3. **터치 영역**: 시각적 요소와 터치 영역을 분리하여 사용성 향상
 
 ### 사용자 피드백 대응