Playground Devlog #8 - UI 반투명화, 패널 겹침 수정, 조작법 안내

데스크탑/모바일에서 UI 패널이 서로 겹치고 불투명하게 캔버스를 가리는 문제를 수정하고, 데스크탑 조작법 안내를 추가했습니다.

데스크탑 패널 반투명화

기존 데스크탑 UI는 배경 불투명도가 8896%로 캔버스를 크게 가렸습니다. 모바일에서는 이미 3040% 수준의 반투명이 적용되어 있었으므로, 데스크탑도 동일한 수준으로 맞췄습니다.

• .pg-world-card: 0.88 → 0.42, blur 4px → 8px
• .pg-chat-dock: 0.92 → 0.42
• .pg-chat-meta: 0.92 → 0.36
• .pg-chat-log: 솔리드 → rgba(248,251,244,0.32)
• .pg-chat-input-row input: 0.96 → 0.42
• 토글 버튼(.pg-ui-toggle, .pg-panel-toggle): 0.92 → 0.5, backdrop-filter: blur(8px) 추가

데스크탑 패널 겹침 수정

우상단 토글버튼과 로그 패널 헤더가 겹치고, 로그 패널과 하단 채팅독이 수직으로 겹치는 문제를 해결했습니다.

• .pg-hud-right: top: 0 → 36px으로 토글버튼 아래에서 시작
• bottom: calc(clamp(220px,34vh,340px) + 16px)으로 채팅독 위에서 끝나도록 제한
• max-height를 none으로 변경하여 top/bottom으로 영역 제한

모바일 패널 겹침 수정

좌측 "월드 상태"와 우측 "로그" 패널이 화면 중앙에서 겹치는 문제를 해결했습니다.

• 너비: (100vw - 24px) * 0.5 → (100vw - 32px) * 0.46
• 최대 너비: 264px → 220px
• 약 32px의 중앙 간격이 확보됨

커스텀 스크롤바

기본 브라우저 스크롤바가 반투명 UI와 어울리지 않아 커스텀 스타일을 적용했습니다.

• WebKit: 4px 너비, 투명 트랙, 반투명 thumb (rgba(100,120,140,0.3))
• Firefox: scrollbar-width: thin, scrollbar-color 지정
• 호버 시 thumb이 약간 진해지는 피드백

퀘스트 배너 불투명도 강화

반투명 배너(0.72) 뒤로 토글 버튼이 비치는 문제를 수정했습니다.

• 배경: rgba(20,36,56,0.72) → rgba(20,36,56,0.92)
• blur: 6px → 10px

데스크탑 조작법 안내

데스크탑 사용자를 위한 키보드 조작법 안내를 "조작" 카드에 추가했습니다.

반투명 배경의 <kbd> 스타일로 키를 표시하여 UI 톤과 통일했습니다.