style(profile): 멤버십 배지를 Quiet Premium 톤으로 2차 고급화

맥락:
- 프로필 왼쪽 등급 칩에 고급스러운 대우감이 더 필요해 재질감/여백/위계를 추가 보정했다.

변경사항:
- MembershipTierBadge의 높이(h-9), 최소폭, 자간을 조정해 배지가 독립된 프리미엄 토큰처럼 보이도록 정렬했다.
- PRO는 모바일에서 PRO, 데스크톱에서 PRO MEMBER를 표시하도록 분리해 작은 화면 밀집을 줄였다.
- 등급별 표면을 샴페인/뉴트럴/틸 계열 저채도 그라데이션과 미세 하이라이트로 조정해 차분한 프리미엄 톤을 강화했다.
- AppTopBar 우측 그룹 간격을 gap-3으로 넓혀 배지와 프로필 트리거 간 시각 충돌을 완화했다.
- docs/session_brief.md, docs/90_current_state.md에 변경사항과 리스크를 갱신했다.

검증:
- npx tsc --noEmit

세션-상태: /app 헤더의 멤버십 배지를 조용한 프리미엄 위계로 고도화했다.
세션-다음: RoomSheet 인원수 기반 UI의 큐레이션형 치환 범위를 확정해야 한다.
세션-리스크: 등급 칩 최소폭 증가로 초소형 화면에서 헤더 가로 여유가 줄어들 수 있다.

src/entities/user/ui/MembershipTierBadge.tsx

@@ -6,25 +6,33 @@ interface MembershipTierBadgeProps {
 
 const TIER_META: Record<
   MembershipTier,
-  { label: string; surfaceClass: string; dotClass: string }
+  {
+    label: string;
+    mobileLabel: string;
+    surfaceClass: string;
+    dotClass: string;
+  }
 > = {
   pro: {
     label: 'PRO MEMBER',
+    mobileLabel: 'PRO',
     surfaceClass:
-      'border-amber-700/34 bg-[linear-gradient(120deg,rgba(254,243,199,0.88)_0%,rgba(250,230,170,0.7)_55%,rgba(244,216,125,0.6)_100%)] text-amber-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.62),0_8px_20px_rgba(120,82,20,0.14)]',
-    dotClass: 'bg-amber-700/72',
+      'border-[#af8b4c]/44 bg-[linear-gradient(138deg,rgba(255,251,240,0.98)_0%,rgba(248,235,206,0.92)_58%,rgba(236,214,166,0.9)_100%)] text-[#6e5326] ring-1 ring-white/56 shadow-[inset_0_1px_0_rgba(255,255,255,0.66),0_10px_22px_rgba(120,82,20,0.14)]',
+    dotClass: 'bg-[#8f6a2c]/72',
   },
   normal: {
     label: 'NORMAL',
+    mobileLabel: 'NORMAL',
     surfaceClass:
-      'border-brand-dark/16 bg-white/76 text-brand-dark/68 shadow-[inset_0_1px_0_rgba(255,255,255,0.55),0_6px_16px_rgba(15,23,42,0.08)]',
-    dotClass: 'bg-brand-dark/34',
+      'border-slate-600/22 bg-[linear-gradient(135deg,rgba(255,255,255,0.94)_0%,rgba(241,245,249,0.86)_100%)] text-slate-700/84 ring-1 ring-white/50 shadow-[inset_0_1px_0_rgba(255,255,255,0.58),0_8px_18px_rgba(15,23,42,0.09)]',
+    dotClass: 'bg-slate-600/46',
   },
   team: {
     label: 'TEAM',
+    mobileLabel: 'TEAM',
     surfaceClass:
-      'border-cyan-900/24 bg-[linear-gradient(120deg,rgba(224,242,254,0.86)_0%,rgba(209,250,229,0.68)_56%,rgba(186,230,253,0.64)_100%)] text-cyan-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.58),0_8px_18px_rgba(8,78,99,0.12)]',
-    dotClass: 'bg-cyan-900/52',
+      'border-teal-900/28 bg-[linear-gradient(140deg,rgba(236,253,250,0.95)_0%,rgba(204,251,241,0.82)_58%,rgba(186,230,253,0.76)_100%)] text-teal-900/84 ring-1 ring-white/52 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),0_9px_18px_rgba(8,78,99,0.12)]',
+    dotClass: 'bg-teal-900/54',
   },
 };
 
@@ -33,10 +41,11 @@ export const MembershipTierBadge = ({ tier }: MembershipTierBadgeProps) => {
 
   return (
     <span
-      className={`inline-flex h-8 items-center gap-1.5 rounded-full border px-3 text-xs font-semibold tracking-[0.08em] backdrop-blur-sm ${tierMeta.surfaceClass}`}
+      className={`inline-flex h-9 min-w-[102px] items-center justify-center gap-1.5 whitespace-nowrap rounded-full border px-3.5 text-[11px] font-semibold tracking-[0.12em] backdrop-blur-sm sm:min-w-[128px] ${tierMeta.surfaceClass}`}
     >
       <span aria-hidden className={`h-1.5 w-1.5 rounded-full ${tierMeta.dotClass}`} />
-      {tierMeta.label}
+      <span className="sm:hidden">{tierMeta.mobileLabel}</span>
+      <span className="hidden sm:inline">{tierMeta.label}</span>
     </span>
   );
 };

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

@@ -17,7 +17,7 @@ export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => {
 
         <p className="hidden text-center text-sm text-brand-dark/64 md:block">{oneLiner}</p>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-3">
           <MembershipTierBadge tier={user.membershipTier} />
           <ProfileMenu user={user} onLogout={onLogout} />
         </div>