feat(agent-office): 모바일 반응형 세로 스택 + 작업 시간 표기 개선

- 768px 이하에서 대시보드 세로 스택 + 에이전트 카드 아코디언 토글
- waiting/알림 있을 때 자동 펼침 및 좌측 강조 바
- 픽셀 오피스 캔버스 모바일 높이 140px로 축소 후 상단 배치
- 최근 작업 시간: completed_at 우선 + 오늘/어제/MM-DD HH:MM 포맷

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

src/pages/agent-office/AgentOffice.css

@@ -70,6 +70,21 @@
   flex-shrink: 0;
 }
 
+.ao-col-chevron {
+  display: none;
+  color: #666;
+  font-size: 0.8rem;
+  margin-left: 4px;
+}
+
+.ao-col-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .ao-col-name {
   font-weight: bold;
   font-size: 0.9rem;
@@ -303,3 +318,71 @@
   font-size: 0.7rem;
   margin-left: 4px;
 }
+
+/* Mobile: vertical stack + accordion */
+@media (max-width: 768px) {
+  .ao-page {
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .ao-dashboard {
+    flex-direction: column;
+    gap: 1px;
+    overflow: visible;
+    flex: none;
+  }
+
+  .ao-col {
+    flex: none;
+    overflow: visible;
+  }
+
+  .ao-col-header {
+    cursor: pointer;
+    user-select: none;
+    padding: 12px 14px;
+  }
+
+  .ao-col-chevron {
+    display: inline;
+  }
+
+  .ao-col--collapsed .ao-col-body {
+    display: none;
+  }
+
+  .ao-col--attention {
+    box-shadow: inset 3px 0 0 #fbbf24;
+  }
+
+  .ao-col-tasks {
+    max-height: 260px;
+  }
+
+  .ao-office-section {
+    height: 140px;
+    order: -1;
+    border-top: none;
+    border-bottom: 2px solid #2a2a4a;
+  }
+
+  .ao-title {
+    font-size: 1rem;
+    letter-spacing: 1px;
+  }
+
+  .ao-header {
+    padding: 8px 12px;
+  }
+
+  .ao-col-commands {
+    gap: 6px;
+  }
+
+  .ao-cmd-btn,
+  .ao-btn {
+    padding: 6px 12px;
+    font-size: 0.8rem;
+  }
+}