From 8cd30cc64d846a4ed5a7a837d637a2664b0e8966 Mon Sep 17 00:00:00 2001
From: umsangdon <umsangdon@gmail.com>
Date: Mon, 2 Nov 2026 15:40:02 +0900
Subject: [PATCH] =?UTF-8?q?feat(734-1):=20=EA=B3=84=EC=82=B0=EC=8B=9D=20?=
 =?UTF-8?q?=EC=97=B4=20=EB=8B=A8=EC=B6=94=20=EB=82=AE=EC=9D=80=20=EB=8B=A8?=
 =?UTF-8?q?(20)=20=C2=B7=20=EC=98=B5=EC=85=98=EA=B0=92=20/=20=EC=9A=94?=
 =?UTF-8?q?=EC=86=8C=20=EC=97=B0=EA=B2=B0=20=EA=B0=88=EB=9E=98=20=EC=83=89?=
 =?UTF-8?q?=20=C2=B7=20=ED=92=8D=EC=84=A0=20=EA=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 부품 상자 단추에 갈래 색(tone: option · link) 더함 — 공통 값(--color-warning · --color-info) 혼합 · 밝음 4.5 이상 · 어두움 6 이상
- 알약(요소 연결) · 입력 칩(옵션값) 24 → 20 · 마우스 풍선 「요소 연결」 · 「옵션」
- 지킴 시험 test_734_calc_buttons 새로

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .../M01_MasterData_UI_LogicLab_Formula.ts     |  5 +--
 .../M01_MasterData_UI_LogicLab_Pill.ts        |  6 ++--
 .../M01_MasterData_UI_LogicLab_Text.ts        |  2 ++
 resources/tester/test_734_calc_buttons.py     | 33 +++++++++++++++++++
 ui_template/ui_template_button.css            | 18 ++++++++++
 ui_template/ui_template_button.ts             |  3 ++
 6 files changed, 63 insertions(+), 4 deletions(-)
 create mode 100644 resources/tester/test_734_calc_buttons.py

diff --git a/M01_MasterData/M01_MasterData_UI_LogicLab_Formula.ts b/M01_MasterData/M01_MasterData_UI_LogicLab_Formula.ts
index 478eb30cb..6aae21fd9 100644
--- a/M01_MasterData/M01_MasterData_UI_LogicLab_Formula.ts
+++ b/M01_MasterData/M01_MasterData_UI_LogicLab_Formula.ts
@@ -55,7 +55,8 @@ export function inputChip(
   const chip = createButton({
     label: `${spec.이름} ${shown}${spec.단위 ? ` ${spec.단위}` : ""}`,
     variant: "ghost",
-    size: 24,
+    size: 20,
+    tone: "option",
     onClick: (ev) => {
       ev.stopPropagation(); // 줄 누름(밝히기 고정)과 안 겹치게
       let over = false; // Enter 뒤 blur · 고름 뒤 blur 가 두 번 부르지 않게
@@ -92,7 +93,7 @@ export function inputChip(
       field.querySelector<HTMLElement>("select, input")?.focus();
     },
   });
-  chip.title = tl("Formula_Var");
+  chip.title = `${tl("Var_Tone")} · ${tl("Formula_Var")}`;
   wrap.append(chip);
   return wrap;
 }
diff --git a/M01_MasterData/M01_MasterData_UI_LogicLab_Pill.ts b/M01_MasterData/M01_MasterData_UI_LogicLab_Pill.ts
index c359d2134..334421ba3 100644
--- a/M01_MasterData/M01_MasterData_UI_LogicLab_Pill.ts
+++ b/M01_MasterData/M01_MasterData_UI_LogicLab_Pill.ts
@@ -7,6 +7,7 @@
 
 import { el } from "@ui/ui_template_elements";
 import { createButton } from "@ui/ui_template_button";
+import { tl } from "./M01_MasterData_UI_LogicLab_Text";
 
 export interface Pill {
   /** 알약 글 — 보기 「표 QF000421」 */
@@ -17,8 +18,9 @@ export interface Pill {
 
 /** 알약 하나 — 글자 조각 사이에 끼워 쓰는 단추 */
 export function pillButton(p: Pill): HTMLButtonElement {
-  // 알약 = 단추 부품(보조 · 24) — data-pill 은 시험 · 촬영이 잡음
-  const b = createButton({ label: p.label, variant: "ghost", size: 24 });
+  // 알약 = 요소 연결 단추(보조 · 낮은 20 · 정보색 갈래) — data-pill 은 시험 · 촬영이 잡음
+  const b = createButton({ label: p.label, variant: "ghost", size: 20, tone: "link" });
+  b.title = tl("Pill_Tone");
   b.classList.add("m01lab__pill");
   b.dataset.pill = p.label;
   b.addEventListener("click", (ev) => {
diff --git a/M01_MasterData/M01_MasterData_UI_LogicLab_Text.ts b/M01_MasterData/M01_MasterData_UI_LogicLab_Text.ts
index 0f7f6da7c..500a02934 100644
--- a/M01_MasterData/M01_MasterData_UI_LogicLab_Text.ts
+++ b/M01_MasterData/M01_MasterData_UI_LogicLab_Text.ts
@@ -61,6 +61,8 @@ const TEXT = {
     "누르면 시험 계산 입력을 고침 · 다시 셈(정본 안 바뀜)",
     "Click to change the trial input and recalculate (source unchanged)",
   ],
+  Pill_Tone: ["요소 연결", "Linked element"],
+  Var_Tone: ["옵션", "Option"],
   Modal_Sum: ["한 줄 풀이", "In one line"],
   Pill_Hint: ["쓰인 자료 — 누르면 펼침", "Data used — tap to open"],
   Modal_UnitPrice: ["단가", "Unit price"],
diff --git a/resources/tester/test_734_calc_buttons.py b/resources/tester/test_734_calc_buttons.py
new file mode 100644
index 000000000..3bbd5a757
--- /dev/null
+++ b/resources/tester/test_734_calc_buttons.py
@@ -0,0 +1,33 @@
+"""734-1 계산식 열 단추 지킴 시험 — 낮은 단(20) · 갈래 색(옵션값 · 요소 연결) · 풍선 글(화면 · 서버 없음)."""
+
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[2]
+M01 = ROOT / "M01_MasterData"
+
+
+def _t(p: Path) -> str:
+    return p.read_text(encoding="utf-8")
+
+
+def test_알약은_낮은_단과_요소연결_갈래():
+    s = _t(M01 / "M01_MasterData_UI_LogicLab_Pill.ts")
+    assert 'size: 20, tone: "link"' in s and 'tl("Pill_Tone")' in s
+
+
+def test_입력칩은_낮은_단과_옵션_갈래():
+    s = _t(M01 / "M01_MasterData_UI_LogicLab_Formula.ts")
+    assert "size: 20," in s and 'tone: "option"' in s and 'tl("Var_Tone")' in s
+
+
+def test_갈래_색은_공통_값만():
+    css = _t(ROOT / "ui_template" / "ui_template_button.css")
+    head = css[css.index("갈래 색(tone)") :]
+    assert '[data-tone="option"]' in head and "var(--color-warning)" in head
+    assert '[data-tone="link"]' in head and "var(--color-info)" in head
+    assert "#" not in head.split("*/", 1)[1]  # 날 색 값 없음
+
+
+def test_풍선_글_두_갈래():
+    s = _t(M01 / "M01_MasterData_UI_LogicLab_Text.ts")
+    assert '"요소 연결"' in s and '["옵션"' in s
diff --git a/ui_template/ui_template_button.css b/ui_template/ui_template_button.css
index fe80fa98e..6c4237571 100644
--- a/ui_template/ui_template_button.css
+++ b/ui_template/ui_template_button.css
@@ -175,3 +175,21 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* 갈래 색(tone) — 보조(ghost) 단추에 갈래를 입힘 · 옵션값 = 경고색 계열 · 요소 연결 = 정보색 계열(밝음 · 어두움 모두 글 대비 4.5 : 1 안팎)
+   쓰기 = `createButton({ variant: "ghost", size: 20, tone: "option" | "link" })` · data-tone */
+.ui-btn--ghost[data-tone] {
+  --ui-tone: var(--color-primary);
+  border-color: color-mix(in srgb, var(--ui-tone) 60%, var(--color-surface-raised));
+  background-color: color-mix(in srgb, var(--ui-tone) 10%, var(--color-surface-raised));
+  color: color-mix(in srgb, var(--ui-tone) 85%, var(--color-ink));
+}
+.ui-btn--ghost[data-tone="option"] {
+  --ui-tone: var(--color-warning);
+}
+.ui-btn--ghost[data-tone="link"] {
+  --ui-tone: var(--color-info);
+}
+.ui-btn--ghost[data-tone]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: color-mix(in srgb, var(--ui-tone) 22%, var(--color-surface-raised));
+}
diff --git a/ui_template/ui_template_button.ts b/ui_template/ui_template_button.ts
index 6650e507a..6c2faf113 100644
--- a/ui_template/ui_template_button.ts
+++ b/ui_template/ui_template_button.ts
@@ -50,6 +50,8 @@ export interface ButtonOptions {
   label: string;
   variant?: ButtonVariant;
   size?: ButtonSize;
+  /** 갈래 색(보조 꼴에만) — "option" 옵션값 · "link" 요소 연결 · `data-tone` */
+  tone?: "option" | "link";
   /** 이벤트 핸들러 (frontend.md §4: on[페이지]_[기능]_[액션] 명명) */
   onClick?: (ev: MouseEvent) => void;
   disabled?: boolean;
@@ -67,6 +69,7 @@ export function createButton(opts: ButtonOptions): HTMLButtonElement {
     attrs: { type: opts.type ?? "button" },
   });
   if (size) setUiSize(btn, size);
+  if (opts.tone) btn.dataset.tone = opts.tone;
   if (opts.iconStart) {
     const mark =
       typeof opts.iconStart === "string"