260719_1

ui_template/ui_template_elements.ts

@@ -43,7 +43,7 @@ function el<K extends keyof HTMLElementTagNameMap>(
  * 1. 버튼 (Button) — design.md: Filled Brand / Ghost Outlined / Pill Nav
  * -------------------------------------------------------------------------- */
 
-export type ButtonVariant = "filled" | "ghost" | "pill" | "danger";
+export type ButtonVariant = "filled" | "ghost" | "pill" | "danger" | "glass";
 
 export interface ButtonOptions {
   /** 표시 텍스트 (i18n 결과 문자열을 전달) */
@@ -552,6 +552,21 @@ const BASE_CSS = `
   color: var(--color-canvas);
 }
 
+/* 3D 뷰포트 오버레이용: 배경 위에 떠 있어 반투명 + 블러 필요 */
+.ui-btn--glass {
+  border-color: color-mix(in srgb, var(--color-border) 65%, transparent);
+  background-color: color-mix(in srgb, var(--color-surface-raised) 72%, transparent);
+  color: var(--color-text-body);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+.ui-btn--glass:hover:not(:disabled),
+.ui-btn--glass.is-active {
+  border-color: var(--color-primary);
+  background-color: color-mix(in srgb, var(--color-primary) 82%, transparent);
+  color: var(--color-primary-text);
+}
+
 /* --- Input Field --- */
 .ui-field { display: flex; flex-direction: column; gap: var(--spacing-4); }
 .ui-field__label {