feat(734-1): 계산식 열 단추 낮은 단(20) · 옵션값 / 요소 연결 갈래 색 · 풍선 글

- 부품 상자 단추에 갈래 색(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>

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));
+}