feat: 오버레이 요소 글래스 개편과 그라데이션

docs/content/en/api-reference/keys/page.mdx

@@ -152,6 +152,48 @@ const positions = await dmn.keys.getPositions();
 console.log(positions['4key']);
 ```
 
+Style-related fields on each `KeyPosition` include solid colors and optional
+gradient siblings:
+
+```typescript
+interface KeyPosition {
+  // ...position, image, note, and counter fields...
+  backgroundColor?: string;
+  activeBackgroundColor?: string;
+  borderColor?: string;
+  activeBorderColor?: string;
+  borderWidth?: number; // px, defaults to 1 when unset — 0 disables the border
+  backgroundGradient?: GradientSpec | null;
+  activeBackgroundGradient?: GradientSpec | null;
+  borderGradient?: GradientSpec | null;
+  activeBorderGradient?: GradientSpec | null;
+  shadow?: ElementShadowSpec;
+  activeShadow?: ElementShadowSpec;
+}
+
+interface GradientSpec {
+  angle: number; // 0 (inclusive) to 360 (exclusive) — 360 normalizes to 0; CSS semantics (0 = up, clockwise)
+  stops: { color: string; pos: number }[]; // 2–8 stops, pos 0–1 ascending
+}
+
+interface ElementShadowSpec {
+  enabled: boolean;
+  color: string; // alpha controls opacity
+  offsetX: number; // px, -100 to 100
+  offsetY: number; // px, -100 to 100
+  blur: number; // px, 0 to 100
+}
+```
+
+When a gradient field is present it takes priority over the matching solid
+field, and the solid field is kept in sync with the first stop color on save.
+To return to a solid color, set the gradient field to `null` and update the
+solid field.
+
+`shadow` and `activeShadow` control the idle and pressed shadows independently.
+When omitted, the built-in shadow remains unchanged. Store a spec with
+`enabled: false` to explicitly disable a shadow.
+
 ### `dmn.keys.updatePositions(positions: KeyPositions): Promise<KeyPositions>`
 
 Replaces the key positions and returns the committed value.

docs/content/en/api-reference/knobs/page.mdx

@@ -54,11 +54,17 @@ Commonly used inherited styling fields:
 
 - `backgroundColor` / `activeBackgroundColor` — idle / turning fill color
 - `borderColor` / `activeBorderColor` — idle / turning border color
-- `borderWidth` — border thickness in px (default 3)
+- `borderWidth` — border thickness in px (defaults to 1, 0 disables the border)
+- `backgroundGradient` / `activeBackgroundGradient` — background gradient (GradientSpec, takes priority over the solid color)
+- `borderGradient` / `activeBorderGradient` — border gradient (GradientSpec)
+- `shadow` / `activeShadow` — idle / turning shadow (ElementShadowSpec; color alpha controls opacity)
 - `borderRadius` — corner radius in px; when unset the knob is a circle
 - `inactiveImage` / `activeImage` — idle / turning custom image
 - `idleTransparent` / `activeTransparent` — transparent background toggles
 
+`ElementShadowSpec` contains `enabled`, `color`, `offsetX`, `offsetY`, and
+`blur`. Offsets accept -100–100 px and blur accepts 0–100 px.
+
 While the physical knob is turning, the element switches to its
 active colors/image (like a pressed key) and rotates by
 `accumulatedRevolutions × 360° × sensitivity`.

docs/content/en/custom-css/counter-styling/page.mdx

@@ -25,26 +25,35 @@ Set styles that apply to all counters:
   font-weight: 700;
 
   /* Font family */
-  font-family: "Roboto Mono", monospace;
+  font-family: 'Roboto Mono', monospace;
 }
 ```
 
 ## CSS Variables
 
 Counters support the following CSS variables:
 
-| Variable                 | Description            | Default       |
-| ------------------------ | ---------------------- | ------------- |
-| `--counter-color`        | Text color             | `#FFFFFF`     |
-| `--counter-stroke-color` | Text outline color     | `transparent` |
-| `--counter-stroke-width` | Text outline thickness | `0px`         |
+| Variable                    | Description                     | Default        |
+| --------------------------- | ------------------------------- | -------------- |
+| `--counter-color`           | Text color and saved-fill reset | `#FFFFFF`      |
+| `--counter-fill-image`      | Text fill image                 | `none`         |
+| `--counter-fill-clip`       | Fill clipping area              | `border-box`   |
+| `--counter-text-fill-color` | WebKit text fill color          | `currentcolor` |
+| `--counter-stroke-color`    | Text outline color              | `transparent`  |
+| `--counter-stroke-width`    | Text outline thickness          | `0px`          |
+
+<Callout type="info">
+  With **Inline Styles Priority** disabled on the key or stat item, regular CSS
+  also takes priority over counter typography. Setting `--counter-color`
+  automatically removes a fill gradient saved in the properties panel.
+</Callout>
 
 ## Inactive State Style
 
 Counter style when the key is not pressed:
 
 ```css
-.counter[data-counter-state="inactive"] {
+.counter[data-counter-state='inactive'] {
   /* Text color */
   --counter-color: #474244;
 
@@ -58,7 +67,7 @@ Counter style when the key is not pressed:
 Counter style when the key is being pressed:
 
 ```css
-.counter[data-counter-state="active"] {
+.counter[data-counter-state='active'] {
   /* Text color */
   --counter-color: #ff2b80;
 
@@ -78,12 +87,12 @@ Combine class selectors to style counters of specific keys differently.
 
 ```css
 /* Counter for keys with .blue class - inactive state */
-.blue .counter[data-counter-state="inactive"] {
+.blue .counter[data-counter-state='inactive'] {
   --counter-color: #1a4a5c;
 }
 
 /* Counter for keys with .blue class - active state */
-.blue .counter[data-counter-state="active"] {
+.blue .counter[data-counter-state='active'] {
   --counter-color: #2ebef3;
   --counter-stroke-color: transparent;
   text-shadow: 0px 0px 3px #2ebef3;
@@ -105,16 +114,13 @@ Combine class selectors to style counters of specific keys differently.
   font-weight: 700;
 }
 
-.counter[data-counter-state="inactive"] {
+.counter[data-counter-state='inactive'] {
   --counter-color: #333;
 }
 
-.counter[data-counter-state="active"] {
+.counter[data-counter-state='active'] {
   --counter-color: #00ff88;
-  text-shadow:
-    0px 0px 2px #00ff88,
-    0px 0px 4px #00ff88,
-    0px 0px 8px #00ff88;
+  text-shadow: 0px 0px 2px #00ff88, 0px 0px 4px #00ff88, 0px 0px 8px #00ff88;
 }
 ```
 
@@ -126,13 +132,13 @@ Combine class selectors to style counters of specific keys differently.
   font-weight: 900;
 }
 
-.counter[data-counter-state="inactive"] {
+.counter[data-counter-state='inactive'] {
   --counter-color: #fff;
   --counter-stroke-color: #333;
   --counter-stroke-width: 2px;
 }
 
-.counter[data-counter-state="active"] {
+.counter[data-counter-state='active'] {
   --counter-color: #fff;
   --counter-stroke-color: #ff2b80;
   --counter-stroke-width: 2px;
@@ -145,22 +151,22 @@ Combine class selectors to style counters of specific keys differently.
 .counter {
   font-size: 14px;
   font-weight: 400;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 }
 
-.counter[data-counter-state="inactive"] {
+.counter[data-counter-state='inactive'] {
   --counter-color: #999;
 }
 
-.counter[data-counter-state="active"] {
+.counter[data-counter-state='active'] {
   --counter-color: #333;
 }
 ```
 
 ### Rainbow Gradient Style
 
 ```css
-.counter[data-counter-state="active"] {
+.counter[data-counter-state='active'] {
   background: linear-gradient(
     45deg,
     #ff2b80,
@@ -195,7 +201,7 @@ Example of keeping key and counter colors consistent:
 
 ```css
 /* Base key - pink theme */
-[data-state="active"] {
+[data-state='active'] {
   --key-border: 3px solid #ff2b80;
   --key-text-color: #ff2b80;
   text-shadow: 0px 0px 3px #ff2b80;

docs/content/en/custom-css/graph-styling/page.mdx

@@ -27,19 +27,22 @@ When **Inline Styles Priority** is enabled, property panel values take precedenc
 For graphs, **Inline Styles Priority is disabled by default**, so CSS-variable-based control works immediately.
 
 <Callout type="info">
-  Recommended: use class selectors to style specific graphs instead of broad global selectors.
+  Recommended: use class selectors to style specific graphs instead of broad
+  global selectors.
 </Callout>
 
 ## Graph CSS Variables
 
 Available graph variables:
 
-| Variable         | Description            | Type       | Example                  |
-| ---------------- | ---------------------- | ---------- | ------------------------ |
-| `--graph-bg`     | Graph background       | `<color>`  | `rgba(17, 17, 20, 0.85)` |
-| `--graph-border` | Graph border           | `<border>` | `1px solid #7dd3fc`      |
-| `--graph-radius` | Graph corner radius    | `<length>` | `10px`                   |
-| `--graph-color`  | Line/bar drawing color | `<color>`  | `#86efac`                |
+| Variable               | Description                        | Type       | Example                              |
+| ---------------------- | ---------------------------------- | ---------- | ------------------------------------ |
+| `--graph-bg`           | Graph background                   | `<color>`  | `rgba(17, 17, 20, 0.85)`             |
+| `--graph-border`       | Border and saved border-ring reset | `<border>` | `1px solid #7dd3fc`, `none`          |
+| `--graph-border-image` | Replacement image for a saved ring | `<image>`  | `linear-gradient(90deg, #f0f, #0ff)` |
+| `--graph-padding`      | Graph inner padding                | `<length>` | `0px`, `3px`                         |
+| `--graph-radius`       | Graph corner radius                | `<length>` | `10px`                               |
+| `--graph-color`        | Line/bar drawing color             | `<color>`  | `#86efac`                            |
 
 ### Example
 
@@ -81,4 +84,5 @@ Available graph variables:
 ## Notes
 
 - Graph position offsets use the same variables as keys: `--key-offset-x`, `--key-offset-y`.
-- To completely hide the border, use `--graph-border: none;` or set border width to `0` in the properties panel.
+- `--graph-border: none;` removes the solid border, a gradient border ring
+  saved in the properties panel, and its image inset together.

docs/content/en/custom-css/key-styling/page.mdx

@@ -14,13 +14,20 @@ Keys indicate their current state through the `data-state` attribute:
 - `data-state="inactive"`: Key not pressed
 - `data-state="active"`: Key being pressed
 
+<Callout type="info">
+  With **Inline Styles Priority** disabled, property-panel solid colors,
+  gradients, borders, and typography are lower-priority defaults. Setting
+  `--key-bg` or `--key-border` also removes the corresponding background or
+  border gradient saved in the app.
+</Callout>
+
 ## Global Key Styles
 
 Set styles that apply to all keys:
 
 ```css
-[data-state="inactive"],
-[data-state="active"] {
+[data-state='inactive'],
+[data-state='active'] {
   /* Corner roundness */
   --key-radius: 8px;
 
@@ -38,7 +45,7 @@ Set styles that apply to all keys:
 Styles when the key is not pressed:
 
 ```css
-[data-state="inactive"] {
+[data-state='inactive'] {
   /* Background color */
   --key-bg: #2a2a2a;
 
@@ -58,7 +65,7 @@ Styles when the key is not pressed:
 Styles when the key is being pressed:
 
 ```css
-[data-state="active"] {
+[data-state='active'] {
   /* Background color */
   --key-bg: #ff2b80;
 
@@ -81,7 +88,7 @@ Styles when the key is being pressed:
 You can implement a press effect where the key moves when pressed:
 
 ```css
-[data-state="active"] {
+[data-state='active'] {
   /* X offset */
   --key-offset-x: 0px;
 
@@ -113,7 +120,7 @@ Use class names to apply different styles to specific keys.
 
 ```css
 /* Active state for keys with .blue class */
-.blue[data-state="active"] {
+.blue[data-state='active'] {
   --key-bg: transparent;
   --key-border: 3px solid #2ebef3;
   --key-text-color: #2ebef3;
@@ -122,7 +129,7 @@ Use class names to apply different styles to specific keys.
 }
 
 /* Active state for keys with .special class */
-.special[data-state="active"] {
+.special[data-state='active'] {
   --key-bg: transparent;
   background: linear-gradient(45deg, #ff2b80, #2ebef3);
   --key-border: none;
@@ -135,49 +142,44 @@ Use class names to apply different styles to specific keys.
 
 - ✅ Correct: `blue`
 - ❌ Wrong: `.blue`
-</Callout>
+  </Callout>
 
 ## Style Examples
 
 ### Neon Sign Style
 
 ```css
-[data-state="inactive"] {
+[data-state='inactive'] {
   --key-bg: transparent;
   --key-border: 3px solid #333;
   --key-text-color: #333;
 }
 
-[data-state="active"] {
+[data-state='active'] {
   --key-bg: transparent;
   --key-border: 3px solid #ff2b80;
   --key-text-color: #ff2b80;
-  text-shadow:
-    0px 0px 2px #ff2b80,
-    0px 0px 4px #ff2b80,
-    0px 0px 8px #ff2b80;
-  box-shadow:
-    0px 0px 4px #ff2b80,
-    inset 0px 0px 4px rgba(255, 43, 128, 0.3);
+  text-shadow: 0px 0px 2px #ff2b80, 0px 0px 4px #ff2b80, 0px 0px 8px #ff2b80;
+  box-shadow: 0px 0px 4px #ff2b80, inset 0px 0px 4px rgba(255, 43, 128, 0.3);
 }
 ```
 
 ### Minimal Flat Style
 
 ```css
-[data-state="inactive"],
-[data-state="active"] {
+[data-state='inactive'],
+[data-state='active'] {
   --key-radius: 4px;
   transition: 0.05s ease-out;
 }
 
-[data-state="inactive"] {
+[data-state='inactive'] {
   --key-bg: #f0f0f0;
   --key-border: none;
   --key-text-color: #333;
 }
 
-[data-state="active"] {
+[data-state='active'] {
   --key-bg: #333;
   --key-border: none;
   --key-text-color: #fff;
@@ -187,15 +189,15 @@ Use class names to apply different styles to specific keys.
 ### Pastel 3D Style
 
 ```css
-[data-state="inactive"] {
+[data-state='inactive'] {
   --key-radius: 20px;
   --key-bg: #ffd4e5;
   --key-border: 2px solid #e8b4c8;
   --key-text-color: #8b5a6b;
   box-shadow: 0px 4px 0px #d9a0b8;
 }
 
-[data-state="active"] {
+[data-state='active'] {
   --key-bg: #ffc4dd;
   --key-border: 2px solid #e8b4c8;
   --key-text-color: #8b5a6b;