RWD:直版改直向堆疊讓辦公室區域最大化

摘要：
直版/窄螢幕時辦公室改為滿寬顯示並鎖定 1200:700 比例,側邊面板移到下方;
另新增面板收合按鈕,桌面版也能全畫面看辦公室。

根本原因：
原本任何螢幕都是「辦公室 + 300px 側欄」左右排,SVG 以 meet 等比縮放,
直版視窗寬度受限時上下大量留白,辦公室被壓得很小。

影響：
直版(手機/平板)辦公室寬度從約一半提升到 100%;
窄橫版維持左右排但側欄縮為 232px;桌面版行為不變,多一顆 ⊞ 收合鈕。

修法：
- styles.css:orientation: portrait 時 main-row 改 column,
  floorplan-wrap 用 aspect-ratio 1200/7 00 撐滿寬度,不再靠 flex 留白;
  ≤900px 壓縮 header(隱藏圖例/副標、按鈕縮小、允許換行)
- store 新增 panelOpen/togglePanel,App 據此條件渲染 SidePanel

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/App.tsx

@@ -7,6 +7,7 @@ import { useOfficeStore } from "./store/office-store";
 
 export default function App() {
   const theme = useOfficeStore((s) => s.theme);
+  const panelOpen = useOfficeStore((s) => s.panelOpen);
 
   useEffect(() => {
     startRuntime();
@@ -15,9 +16,9 @@ export default function App() {
   return (
     <div className={`app ${theme}`}>
       <HeaderBar />
-      <div className="main-row">
+      <div className={`main-row ${panelOpen ? "" : "panel-closed"}`}>
         <FloorPlan />
-        <SidePanel />
+        {panelOpen && <SidePanel />}
       </div>
     </div>
   );