fix(b09): 묶음 탭 이동 빨강 = 설계내역서 규칙 — 빨강 하나 · 줄 · 카드 누름 · 방향키 · Esc = 빨강 풂 · 누른 줄만 고름 (248-1)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SE9MxeXTu2uaDZ55BJowAY

ui_template/ui_template_group_cards.ts

@@ -7,7 +7,7 @@
  *   글자 14px 한 벌 · 줄 간격 좁게 · 숫자 오른쪽 · 가로 열 수 1~4(기억은 부르는 쪽)
  *   접기 없음 — 묶음 모두 펼친 박스 · 같은 가로 줄 카드 = 높이 같음(200-1 · 합계 줄은 아래 붙음)
  *   줄 번호(`at`) = 부르는 쪽 표 줄 번호 — 누름 = `onPick(at)` · 이동해 온 줄 = 그 박스 붉은 외곽선
- *   (`is-pick`) + 스크롤 + 그 줄 강조(`is-focus`)
+ *   (`is-pick`) + 스크롤만(248-1 빨강 하나) · 누름 = 빨강 풂 · 누른 줄만 고름(`is-focus`)
  * ========================================================================== */
 
 import "./ui_template_group_cards.css";
@@ -224,7 +224,9 @@ export function createGroupCards(opts: GroupCardsOptions): HTMLElement {
 
   grid.addEventListener("click", (event) => {
     const el = (event.target as Element).closest<HTMLElement>("[data-at]");
+    unpickCards(grid, true);
     if (!el || !grid.contains(el)) return;
+    el.classList.add("is-focus");
     opts.onPick?.(Number(el.dataset.at));
   });
 
@@ -232,8 +234,13 @@ export function createGroupCards(opts: GroupCardsOptions): HTMLElement {
     const el = grid.querySelector<HTMLElement>(`[data-at="${opts.focus}"]`);
     const box = el?.closest(".ui-group-card");
     box?.classList.add("is-pick");
-    el?.classList.add("is-focus");
     requestAnimationFrame(() => (box ?? el)?.scrollIntoView({ block: "center" }));
   }
   return root;
 }
+
+/** 248-1 박스 빨강(`is-pick`) 풂 · lines = 고른 줄(`is-focus`)도 */
+export function unpickCards(root: ParentNode, lines = false): void {
+  for (const el of root.querySelectorAll(lines ? ".is-pick, .is-focus" : ".is-pick"))
+    el.classList.remove("is-pick", "is-focus");
+}