style(app-hub): 헤더 톤과 프로필 등급 배지 배치를 정리

맥락:
- /app 헤더가 시작 카드 톤과 달라 시각 흐름이 끊기고, 멤버십 등급이 프로필 트리거 내부에 있어 위계가 어색했다.

변경사항:
- AppTopBar를 Start Ritual 카드와 같은 라이트 톤(bg-white/78, text-brand-dark)으로 맞췄다.
- 멤버십 등급을 독립 뷰로 분리하기 위해 entities/user에 MembershipTierBadge 컴포넌트를 추가했다.
- ProfileMenu 트리거에서 등급 배지를 제거하고, 아바타+이름만 남겨 정보 위계를 단순화했다.
- docs/session_brief.md, docs/90_current_state.md에 최신 상태를 반영했다.

검증:
- npx tsc --noEmit

세션-상태: /app 헤더와 프로필 영역의 톤/위계 정렬을 완료했다.
세션-다음: RoomSheet 인원수 기반 UI를 큐레이션형 정보로 치환할지 확정이 필요하다.
세션-리스크: 밝은 사진 배경과 라이트 헤더 조합에서 상단 경계 인지가 약해질 수 있다.

src/widgets/app-top-bar/ui/AppTopBar.tsx

@@ -1,4 +1,4 @@
-import type { ViewerProfile } from '@/entities/user';
+import { MembershipTierBadge, type ViewerProfile } from '@/entities/user';
 import { ProfileMenu } from '@/features/profile-menu';
 
 interface AppTopBarProps {
@@ -9,15 +9,18 @@ interface AppTopBarProps {
 
 export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => {
   return (
-    <header className="sticky top-0 z-20 border-b border-white/18 px-4 py-3 sm:px-6">
+    <header className="sticky top-0 z-20 border-b border-brand-dark/12 bg-white/78 px-4 py-3 text-brand-dark backdrop-blur-md sm:px-6">
       <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4">
         <div className="flex items-center gap-2">
-          <p className="text-sm font-semibold tracking-tight text-white">VibeRoom</p>
+          <p className="text-sm font-semibold tracking-tight text-brand-dark">VibeRoom</p>
         </div>
 
-        <p className="hidden text-center text-sm text-white/75 md:block">{oneLiner}</p>
+        <p className="hidden text-center text-sm text-brand-dark/64 md:block">{oneLiner}</p>
 
-        <ProfileMenu user={user} onLogout={onLogout} />
+        <div className="flex items-center gap-2">
+          <MembershipTierBadge tier={user.membershipTier} />
+          <ProfileMenu user={user} onLogout={onLogout} />
+        </div>
       </div>
     </header>
   );