feat(agent-office): Blog + Realestate 에이전트 UI 추가

- AGENT_META/IDS에 blog/realestate 추가 (4 컬럼 대시보드)
- SpriteSheet: 블로그(노트북 액센트)/청약(서류가방 액센트) 픽셀 캐릭터
- office-map: 사무실 책상 4개로 확장, blog_desk/realestate_desk waypoint 추가
- AgentColumn/ChatPanel: 에이전트별 퀵 명령 버튼 (키워드 리서치, 매칭 리포트 등)
- CommandColumn: 타겟 선택지 4명, 빠른 명령 6개, 아이콘 맵핑
- DocumentPanel: 에이전트별 탭 4개

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/agent-office/canvas/OfficeRenderer.js

@@ -22,7 +22,7 @@ export class OfficeRenderer {
     this._onCeoClick = null;
     this._ceoDocBadge = 0;
 
-    const agentIds = ['stock', 'music'];
+    const agentIds = ['stock', 'music', 'blog', 'realestate'];
     for (const id of agentIds) {
       this.agents[id] = new AgentSprite(id, mapData.waypoints);
     }

src/pages/agent-office/canvas/SpriteSheet.js

@@ -1,6 +1,8 @@
 const PIXEL_CHARS = {
   stock: { body: '#4488cc', accent: '#cc4444', label: '주식', hair: '#332222' },
   music: { body: '#44aa88', accent: '#ffaa00', label: '음악', hair: '#443322' },
+  blog: { body: '#d97706', accent: '#fde68a', label: '블로그', hair: '#3b2a1a' },
+  realestate: { body: '#c026d3', accent: '#86efac', label: '청약', hair: '#2a2a3a' },
   claude: { body: '#8855cc', accent: '#cc88ff', label: 'Claude', hair: '#554466' },
 };
 
@@ -57,6 +59,14 @@ export function drawAgent(ctx, agentId, x, y, state, frameIndex, scale = 2) {
     ctx.fillRect(-4 * s, -4 * s, 1 * s, 4 * s);
     ctx.fillRect(3 * s, -4 * s, 1 * s, 4 * s);
     ctx.fillRect(-4 * s, -5 * s, 8 * s, 1 * s);
+  } else if (agentId === 'blog') {
+    // 노트북 액센트 (무릎 위)
+    ctx.fillRect(-3 * s, 6 * s, 6 * s, 1 * s);
+    ctx.fillRect(-3 * s, 7 * s, 6 * s, 2 * s);
+  } else if (agentId === 'realestate') {
+    // 서류 가방 액센트 (손 옆)
+    ctx.fillRect(3 * s, 4 * s, 2 * s, 3 * s);
+    ctx.fillRect(3 * s, 3 * s, 2 * s, 1 * s);
   } else if (agentId === 'claude') {
     ctx.globalAlpha = 0.3 + 0.2 * Math.sin(Date.now() / 500);
     ctx.fillRect(-4 * s, -6 * s, 8 * s, 1 * s);