t193 四修：裁淨版 lockup＋側邊欄選中態照 portal（leo 兩點）

## ① logo 比例不對＋深色仍有白底＋旁邊大量空白
三個症狀同一個根：**我用的是未裁淨的原始 PNG**。
portal 的註解早就寫著：原始 1840x560 **只有 32% 高度是實際字形**，上下大留白
⇒ 同 height 字看起來很小；留白處露出 paper-on-ink 自帶的 Ink 底板＝白底。
portal 用的是裁淨版（986x176），但**只內嵌在它的 HTML base64 裡**，我抄不到才用了原始圖。

修：
- 從 portal 的 base64 抽出兩張裁淨版，存成 arcrun-cis/trimmed/ 供全站共用
- 兩張**都是透明底**（實測四邊留白 0）⇒ 深色模式**拿掉 Ink 底板**
- 空白是**版面**造成：側欄 232px 扣 padding 剩 184px，logo 高 24px 只有 134px ⇒ 空 50px
  ⇒ 側欄對齊 portal 的 216px，logo 改 width:100% 填滿可用寬度

實測（渲染後量像素）：
  logo 26px 高 × 151px 寬，右側剩餘空白 1px（原本 50px）
  深色：側欄底(18,18,18) vs logo 上下皆(18,18,18) ⇒ 落差 0，無白底

## ② 側邊欄選中態太粗糙
leo：「參考現在 Portal 的格式⋯⋯這個比現在膠囊反紅精緻，重點是跟 portal 的形象符合」
修：逐字照 portal 的 #sidenav .nav.on ——
    **不是實心膠囊**，而是 amber 字色 ＋ 8% amber 底 ＋ 右側 2px amber 邊。
    側欄右緣也照 portal 用 2px amber 35%。
實測：選中列底(237,228,222)=amber 8%、右緣(176,74,47)=Relation、未選(242,241,237)=Canvas。

## 機械閘加三項守衛
- 不准用未裁淨的原始 lockup（字會太小）
- 選中態必須有 border-right-color: var(--amber)
- 不准再出現 border-radius:999px（膠囊，leo 已否決）
兩支閘全過；style.css 仍 0 個 hex。

cmd/arcrun-app/check-cis.sh

@@ -32,9 +32,14 @@ STRAY=$(grep -oiE '#[0-9a-f]{6}' "$CSS" | tr 'a-f' 'A-F' | sort -u \
 [ -z "$STRAY" ] && ok "沒有自創顏色" || ng "出現非 CIS 色：$(echo $STRAY | tr '\n' ' ')"
 
 # ③ Logo 必須真的放進去（leo 點名的那條）
-grep -q "arcrun-lockup-h-ink.png" "$HTML" && ok "淺色 lockup 已放" || ng "缺淺色 lockup"
-grep -q "arcrun-lockup-h-paper-on-ink.png" "$HTML" && ok "深色 lockup 已放" || ng "缺深色 lockup"
-[ -f frontend/src/assets/arcrun-lockup-h-ink.png ] && ok "lockup 檔案存在" || ng "lockup 檔案不存在"
+grep -q "arcrun-lockup-h-ink-trimmed.png" "$HTML" && ok "淺色 lockup（裁淨版）已放" || ng "缺淺色裁淨版 lockup"
+grep -q "arcrun-lockup-h-paper-trimmed.png" "$HTML" && ok "深色 lockup（裁淨版）已放" || ng "缺深色裁淨版 lockup"
+[ -f frontend/src/assets/arcrun-lockup-h-ink-trimmed.png ] && ok "lockup 檔案存在" || ng "lockup 檔案不存在"
+# 🔴 不准用未裁淨的原始 PNG：1840x560 只有 32% 高是字形，同 height 看起來字很小
+grep -qE 'lockup-h-(ink|paper-on-ink)\.png' "$HTML" && ng "用到未裁淨的原始 lockup（字會太小）" || ok "沒用未裁淨的原始圖"
+# 側邊欄選中態要照 portal（amber 字＋8% 底＋右緣 2px），不是實心膠囊
+grep -q "border-right-color: var(--amber)" "$LAYOUT" && ok "選中態同 portal（右緣 amber）" || ng "選中態未照 portal"
+grep -q "border-radius: 999px" "$LAYOUT" && ng "還在用膠囊選中態（leo 已否決）" || ok "沒有膠囊選中態"
 grep -q "lockup-h.svg" "$HTML" 2>/dev/null && ng "用到已作廢的 SVG lockup（字腔缺失）" || ok "沒用作廢的 SVG lockup"
 
 # ④ 深淺色都要成立（portal 有 data-theme，這裡也要）

cmd/arcrun-app/check-render.sh

@@ -58,12 +58,15 @@ for y in range(h):
             line[i]=(line[i]+pr)&255
     rows.append(bytes(line)); prev=line
 px=lambda x,y:tuple(rows[y][x*ch:x*ch+3])
-brand=px(10,10); logo=px(60,47)
-diff=max(abs(a-b) for a,b in zip(brand,logo))
-print(f"  品牌區背景 {brand} ／ logo 底板 {logo} ／ 落差 {diff}")
-if diff > 12:
-    print("  ❌ logo 底板與背景不接合——會出現方塊（leo 截圖裡那個）"); sys.exit(1)
-print("  ✅ logo 底板與背景接合，無方塊")
+# logo 現在用**裁淨版透明底** ⇒ 品牌區四周應該就是頁面底色，不該出現任何色塊。
+# 取 logo 上方與下方各一點：若與側欄底色不同，代表又墊了底板或圖沒裁淨。
+side = px(10, 300)          # 側欄純底色
+above, below = px(150, 6), px(150, 62)
+worst = max(max(abs(a-b) for a,b in zip(side,p)) for p in (above, below))
+print(f"  側欄底色 {side} ／ logo 上方 {above} ／ 下方 {below} ／ 最大落差 {worst}")
+if worst > 10:
+    print("  ❌ logo 周圍出現色塊——底板沒去掉或用到未裁淨的圖"); sys.exit(1)
+print("  ✅ logo 透明底、周圍無色塊")
 # 深色模式有沒有生效：整體應該偏暗
 if sum(px(600,400))/3 > 120:
     print("  ❌ 深色模式沒生效（右側內容區偏亮）"); sys.exit(1)

cmd/arcrun-app/frontend/index.html

@@ -15,8 +15,8 @@
   <!-- ── 左側邊欄（Google Drive 風格；leo：「左方側邊欄，在右方替換頁面」）── -->
   <aside id="side">
     <div class="brand">
-      <img class="wm-ink"   src="./src/assets/arcrun-lockup-h-ink.png" alt="Arcrun"/>
-      <img class="wm-paper" src="./src/assets/arcrun-lockup-h-paper-on-ink.png" alt="Arcrun"/>
+      <img class="wm-ink"   src="./src/assets/arcrun-lockup-h-ink-trimmed.png" alt="Arcrun"/>
+      <img class="wm-paper" src="./src/assets/arcrun-lockup-h-paper-trimmed.png" alt="Arcrun"/>
     </div>
 
     <!-- 側邊欄由 JS 依帳號數動態產生（每個知識庫一頁，leo 08-04 指定） -->

cmd/arcrun-app/frontend/src/style.css

@@ -16,41 +16,51 @@ html, body { overflow: hidden; height: 100%; }
 #app { display: flex; height: 100vh; }
 
 #side {
-  width: 232px; flex: none;
+  width: 216px; flex: none;   /* 同 portal #sidenav */
   display: flex; flex-direction: column;
   padding: 22px 0 14px;
-  border-right: 1px solid rgba(var(--ink-rgb), .1);
-}
-/* 🔴 lockup（CIS 硬要求，leo 兩次點名）：
-   ① 尺寸照 portal 側欄同一條：clamp(22px,5vw,28px) ＋ **width:auto**
-      （只寫 height 不寫 width，容器一壓就變形／露出底板邊緣＝leo 看到的白邊）
-   ② `-paper-on-ink.png` **自帶不透明 Ink 底板**（實測左上像素 RGBA=23,24,26,255），
-      設計前提是貼在**純 Ink 表面** ⇒ 深色模式把品牌區做成純 Ink，並留 clear space
-      （CIS：clear space = one chevron height on all four sides）。
-   ③ 淺色的 `-ink.png` 是透明的，不需要底板。 */
-#side .brand { padding: 16px 22px 18px; }
-#side .brand img {
-  height: clamp(22px, 5vw, 28px); width: auto; max-width: 100%; display: block;
-}
-:root[data-theme="dark"] #side .brand {
-  background: var(--ink);
-  padding: 16px 22px 18px;   /* 上下左右都留白＝clear space，底板不會貼邊 */
+  border-right: 2px solid rgba(var(--amber-rgb), .35);   /* portal #sidenav 同款 */
 }
+/* 🔴 lockup（CIS，leo 三次點名）——**用裁淨版**，且**不要底板**：
+   ① 官方原始 PNG（1840x560）**只有 32% 高度是實際字形**，上下大量留白
+      ⇒ 同樣 height 看起來字很小，且留白會露出底板＝leo 看到的白底。
+      portal 早就改用**裁淨版**（986x176，比例 5.602，四邊裁到字腔邊緣）。
+      ⇒ 直接用 portal 那兩張（從它的 base64 抽出，存在 arcrun-cis/trimmed/）。
+   ② 兩張裁淨版**都是透明底** ⇒ 深色模式**不需要**也**不可以**再墊 Ink 底板。
+   ③ 尺寸／切換規則逐字照 portal 的 #sidenav .logo。 */
+/* 🔴 leo：「這是 Logo 旁邊**大量空白**」——圖本身已裁淨（實測四邊留白 0），
+   空白來自**版面**：側欄 216px 扣 padding 剩 152px，而 logo 高 24px 時只有 134px。
+   ⇒ 讓 lockup **填滿可用寬度**（高度由 5.602 的比例自動決定，約 27px），
+     並照 CIS「clear space = one chevron height」在下方留呼吸空間。 */
+#side .brand { display: flex; color: var(--ink); padding: 0 32px 22px; }
+#side .brand img { width: 100%; height: auto; display: block; }
 #side .brand .wm-paper { display: none; }
 :root[data-theme="dark"] #side .brand .wm-ink { display: none; }
 :root[data-theme="dark"] #side .brand .wm-paper { display: block; }
 
-/* 側邊欄項目：選中用 Relation（CIS 唯一強調色，≤5% 畫面 ⇒ 一次只有一項） */
-#side nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
+/* 側邊欄選中態：**逐字照 portal 的 #sidenav .nav.on**
+   （leo：「參考現在 Portal 的格式⋯⋯這個比現在膠囊反紅精緻，
+     重點是**跟 portal 的形象符合**」）
+   ＝ 不是膠囊實心，而是：amber 字色 ＋ 8% amber 底 ＋ 右側 2px amber 邊。 */
+#side nav { display: flex; flex-direction: column; gap: 4px; }
 #side .nav {
-  display: flex; align-items: center; gap: 11px;
-  padding: 10px 14px; border-radius: 999px;
-  font-size: 14.5px; color: rgba(var(--ink-rgb), .62);
+  display: flex; align-items: center; gap: 10px;
+  padding: 13px 24px; font-size: 15px; letter-spacing: .08em;
+  color: rgba(var(--ink-rgb), .6);
+  border-right: 2px solid transparent;
   cursor: pointer; user-select: none;
 }
-#side .nav:hover { background: var(--well); color: var(--ink); }
-#side .nav.on { background: var(--amber); color: var(--knob); font-weight: 600; }
-#side .nav .ic { width: 18px; text-align: center; font-size: 15px; opacity: .9; }
+#side .nav:hover { color: var(--ink); }
+#side .nav.on {
+  color: var(--amber);
+  background: rgba(var(--amber-rgb), .08);
+  border-right-color: var(--amber);
+  font-weight: 600;
+}
+#side .nav .ic { width: 17px; text-align: center; font-size: 14px; opacity: .85; }
+#side .nav .cnt { margin-left: auto; font-size: 11.5px; opacity: .7; font-family: ui-monospace, Menlo, monospace; }
+#side .nav .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
 #side .side-foot { margin-top: auto; padding: 12px 22px 0; }
 #side .ver { font-size: 12px; color: rgba(var(--ink-rgb), .35); font-family: ui-monospace, Menlo, monospace; }