feat(spreadsheet): C 격자 — 앱 밝은 · 어두운 테마 따라가게

.aislo-grid 안 색 변수(--aislo-grid-bg · -fg · -line · -head-bg · -head-fg ·
-head-border · -selected) 를 전부 앱 전역 토큰(ui_template_theme.css 의
--color-surface-raised · -text-body · -border · -surface · -text-secondary ·
-accent)에 연결 — 새 값 안 적음, 앱이 data-theme 를 바꾸면 그대로 따라감(다른
스프레드시트 파일(spreadsheet_toolbar.css)과 같은 방식). 칸 · 머리 배경 · 눈금선 ·
선택 테두리 · 채우기 손잡이 테두리의 하드코딩 흰색 · 회색 · 파랑을 이 변수로 바꿈.
테두리 기본 색(사용자가 색 안 지정)은 #000000 대신 currentColor 로 — 칸 글자색과
같이 테마를 따라감. 사용자가 지정한 채움색 · 글자색(조건부 서식 포함)은 그대로 둠
(엑셀과 같음 — 이미 빈 문자열 인라인 스타일로 CSS 기본값에 떨어지는 구조라 따로 안 고침).
시험 틀(html)에 ui_template_theme.css 를 넣어 data-theme 전환을 실제로 시험.

ORCA 수치(시험 틀 · data-theme 전환) — 밝은: 격자 배경 rgb(255,255,255) · 글자
rgb(51,51,51) · 선택 #3e0079 · 눈금선 #e6e2e3. 어두운: 격자 배경 rgb(37,31,56) ·
글자 rgb(228,224,240) · 선택 #b99aff · 눈금선 #322a45 — 모두 전환됨. 사용자 지정
채움(A3 #F2F2F2)·조건부 서식 글자색(H4 #c00000)은 두 테마에서 값 그대로(안 바뀜)
확인. A3 무색 테두리는 currentColor 로 밝은 rgb(51,51,51)/어두운 rgb(228,224,240)
로 글자색과 같이 바뀜 확인.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VVM3xZ1aUPcUTuW2WZSnwg

A00_Common/spreadsheet/spreadsheet_cellstyle.ts

@@ -94,7 +94,7 @@ export function resolveBoxBorders(
 /** 빈 글 = 인라인 테두리를 안 그림(css `aislo-grid--gridlines` 눈금선이 비쳐 보임). `scale` = 확대 · 축소 배율(선 굵기도 같이). */
 function borderCss(side: BorderSide | undefined, scale: number): string {
   if (!side) return "";
-  const color = side.색 ?? "#000000";
+  const color = side.색 ?? "currentColor";
   const w = (px: number): number => Math.max(1, Math.round(px * scale));
   switch (side.선) {
     case "hair":

A00_Common/spreadsheet/spreadsheet_grid.css

@@ -4,12 +4,16 @@
  * ========================================================================== */
 
 .aislo-grid {
-  --aislo-grid-line: #d9d9d9;
-  --aislo-grid-head-bg: #f3f3f3;
-  --aislo-grid-head-fg: #444;
-  --aislo-grid-head-border: #cfcfcf;
+  /* 앱 전역 테마 토큰(ui_template_theme.css · :root[data-theme])을 그대로 물려받음 —
+   * 여기서 값을 다시 안 적음(다크 전환 시 앱 토큰이 바뀌면 같이 바뀜). */
+  --aislo-grid-bg: var(--color-surface-raised);
+  --aislo-grid-fg: var(--color-text-body);
+  --aislo-grid-line: var(--color-border);
+  --aislo-grid-head-bg: var(--color-surface);
+  --aislo-grid-head-fg: var(--color-text-secondary);
+  --aislo-grid-head-border: var(--color-border);
   --aislo-grid-freeze-shadow: rgba(0, 0, 0, 0.12);
-  --aislo-grid-selected: #1a73e8;
+  --aislo-grid-selected: var(--color-accent);
 
   position: relative;
   overflow: hidden;
@@ -18,7 +22,8 @@
   font:
     10pt "굴림",
     sans-serif;
-  background: #fff;
+  background: var(--aislo-grid-bg);
+  color: var(--aislo-grid-fg);
   user-select: none;
   -webkit-user-select: none;
 }
@@ -94,7 +99,7 @@
 
 .aislo-grid__colhead--hidden-before,
 .aislo-grid__rowhead--hidden-before {
-  border-left: 3px double #888;
+  border-left: 3px double var(--aislo-grid-head-fg);
 }
 
 .aislo-grid__head-label {
@@ -122,7 +127,7 @@
   box-sizing: border-box;
   padding: 0;
   border: 1px solid var(--aislo-grid-head-border);
-  background: #fff;
+  background: var(--aislo-grid-head-bg);
   color: var(--aislo-grid-head-fg);
   font-size: 0.7em;
   line-height: 1;
@@ -160,7 +165,7 @@
   flex-direction: column;
   overflow: hidden;
   padding: 0 2px;
-  background: #fff;
+  background: var(--aislo-grid-bg);
   cursor: cell;
 }
 
@@ -228,7 +233,7 @@
   width: 6px;
   height: 6px;
   background: var(--aislo-grid-selected);
-  border: 1px solid #fff;
+  border: 1px solid var(--aislo-grid-bg);
   cursor: crosshair;
   z-index: 3;
 }

A00_Common/spreadsheet/spreadsheet_grid.ts

@@ -815,7 +815,7 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
       node.style.top = `${screen.y}px`;
       node.style.width = `${screen.w}px`;
       node.style.height = `${screen.h}px`;
-      node.style.borderColor = "#1a73e8";
+      node.style.borderColor = "var(--aislo-grid-selected)";
       node.style.borderWidth = i === 0 ? "2px" : "1px";
       selLayer!.append(node);
     }

resources/tester/spreadsheet/spreadsheet_grid_test.html

@@ -1,8 +1,9 @@
 <!doctype html>
-<html lang="ko">
+<html lang="ko" data-theme="light">
   <head>
     <meta charset="UTF-8" />
     <title>C 격자 시험 틀</title>
+    <link rel="stylesheet" href="../../../ui_template/ui_template_theme.css" />
     <style>
       html,
       body {