fix(web): make IwoooS focus deck responsive

apps/web/src/app/[locale]/iwooos/page.tsx

@@ -23,7 +23,7 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import { useTranslations } from 'next-intl'
-import { useState, type ReactNode } from 'react'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { AppLayout } from '@/components/layout'
 
 type PostureMetric = {
@@ -9072,6 +9072,20 @@ function IwoooSFirstProgressUnlockPathBoard() {
 function IwoooSFocusDeckBoard() {
   const t = useTranslations('iwooos.focusDeck')
   const textWrap = { overflowWrap: 'anywhere' as const, wordBreak: 'break-word' as const }
+  const deckBodyRef = useRef<HTMLDivElement>(null)
+  const [isCompactDeck, setIsCompactDeck] = useState(false)
+
+  useEffect(() => {
+    const node = deckBodyRef.current
+    if (!node) return
+
+    const updateLayout = () => setIsCompactDeck(node.getBoundingClientRect().width < 700)
+    updateLayout()
+
+    const observer = new ResizeObserver(updateLayout)
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [])
 
   return (
     <section
@@ -9080,9 +9094,10 @@ function IwoooSFocusDeckBoard() {
     >
       <div style={{ ...band, padding: 14, background: '#fffdf8', borderColor: '#ded8c8' }}>
         <div
+          ref={deckBodyRef}
           style={{
             display: 'grid',
-            gridTemplateColumns: 'minmax(0, 0.88fr) minmax(0, 1.9fr)',
+            gridTemplateColumns: isCompactDeck ? 'minmax(0, 1fr)' : 'minmax(0, 0.88fr) minmax(0, 1.9fr)',
             gap: 12,
             alignItems: 'stretch',
           }}
@@ -9111,7 +9126,7 @@ function IwoooSFocusDeckBoard() {
             <div
               style={{
                 display: 'grid',
-                gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+                gridTemplateColumns: isCompactDeck ? 'repeat(auto-fit, minmax(min(100%, 86px), 1fr))' : 'repeat(3, minmax(0, 1fr))',
                 gap: 7,
                 marginTop: 4,
               }}

docs/LOGBOOK.md

@@ -10,6 +10,7 @@
 - `apps/web/src/app/[locale]/iwooos/page.tsx`：
   - 新增 `IwoooSFocusDeckBoard`，放在 hero 後、資安工作地圖前。
   - 五個焦點卡：資安工作地圖、61% 解鎖路徑、全產品資安範圍、Kali 與工具鏈、GitHub / Gitea 邊界。
+  - 焦點導覽依可用內容寬度自動切換單欄 / 雙欄，避免手機或窄側欄畫面把文字擠成直排。
   - 焦點卡只做頁內 anchor navigation，不是 action button，不觸發掃描、修復、部署、SSH、Kali `/execute` 或版本來源變更。
   - 替工作地圖、解鎖路徑、全產品範圍、主機工具鏈與 source-control readiness 補上穩定 anchor id。
 - `apps/web/messages/zh-TW.json` / `apps/web/messages/en.json`：