style(front): 레이아웃에 브랜드 톤 적용

- 헤더 바 bg를 brand(primary)로, 콘텐츠 면 bg를 브랜드 틴트 쿨 그레이(surface)로 변경
- 불필요한 주석 정리

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

front/src/layouts/MainHeaderBar.tsx

@@ -1,9 +1,8 @@
 import { type ReactNode } from 'react'
-import { cn } from '@/components'
+import { cn } from '@/lib'
 
-// 우측 상단 다크 헤더 바
 const HEADER_BASE =
-  'flex w-full h-[56px] py-[18px] items-center rounded-t-[8px] bg-foreground text-background'
+  'flex w-full h-[56px] py-[18px] items-center rounded-t-[8px] bg-primary text-primary-foreground'
 
 const HEADER_ALIGN = {
   left: 'justify-start',

front/src/layouts/MainLayout.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react'
-import { Logo, cn } from '@/components'
+import { Logo } from '@/components'
+import { cn } from '@/lib'
 
 // 좌측 폭: list=반응형 비율 / chat=고정 350px
 const SIDEBAR_WIDTH = {
@@ -18,8 +19,8 @@ const styles = {
   logoHeader:
     'flex w-full h-[56px] pl-[32px] pr-[24px] py-[8px] items-center justify-between shrink-0',
   main: 'flex flex-1 flex-col h-screen overflow-hidden pt-2 pr-2 pb-2 pl-0',
-  // 헤더 아래 콘텐츠 면 (다크 헤더 rounded-t 와 합쳐져 카드 형태)
-  content: 'flex flex-1 flex-col min-h-0 w-full overflow-hidden rounded-b-[8px] bg-muted',
+  // 다크 헤더와 합쳐져 카드 형태
+  content: 'flex flex-1 flex-col min-h-0 w-full overflow-hidden rounded-b-[8px] bg-surface',
 } as const
 
 export type SidebarWidth = keyof typeof SIDEBAR_WIDTH
@@ -28,7 +29,6 @@ export interface MainLayoutProps {
   sidebarWidth?: SidebarWidth
   /** 루트 가로 스크롤 + 최소폭 (chat 전용) */
   scrollX?: boolean
-  /** 로고 우측 컨트롤 */
   logoAction?: ReactNode
   sidebar: ReactNode
   header: ReactNode