From 7184e1ede0a3dfff74ddfae594df9afb47a83bac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sat, 11 Jul 2026 19:18:59 +0900
Subject: [PATCH 01/17] =?UTF-8?q?fix:=20=ED=8C=A8=EB=84=90=C2=B7=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EA=B2=B0?=
 =?UTF-8?q?=ED=95=A8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EB=8D=B0=EB=93=9C?=
 =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EB=8C=80=EC=B2=AD=EC=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

패널·입력 상호작용:
- 패널 본문 종류 전환 시 서브 페이지가 남아 패널이 비는 회귀 수정 (panelScopeKey 리셋)
- Escape 레이어 소유권 확립: 메뉴 → 페이지 → 그리드 선택 해제 순으로
  한 겹씩만 소비 (캡처 단계 + preventDefault, 그리드는 양보)
- 슬라이드 아웃된 패널 페이지에 inert — 키보드 포커스·접근성 트리 제외
- TabList 인터랙티브 중첩 해소, 삭제 버튼 키보드 노출 + aria-label

모달 등장 모션 재구성:
- 배경 블러를 형제 스크림 언더레이로 이동 (조상 backdrop root가 모달
  글래스 블러를 무력화하던 구조 해소, 배경 블러는 유지)
- 래퍼 opacity 애니메이션 제거 — 페이드 중 블러가 죽었다 튀던 원인.
  스크림은 modalScrim(틴트+블러 동시 보간), 콘텐츠는 modalScale이 소유

대청소 (-1157줄):
- 미사용 프리미티브 삭제: Button·IconButton·Input·Radio·SelectInput
- 죽은 스크롤바 체계 일괄 제거: 전역 숨김에 무력화된 ::-webkit 블록,
  show-scrollbar 토글, 패널 thumb 계산 머신, useLenis 스크롤바 실측
- CommonListPickerPopup no-op prop 3종 제거, Dropdown size 변형 통합

토큰 확장: 라운딩 3단(--ui-radius-inner/surface/modal) 신설 및 전면 스윕,
danger muted 인터랙션 래더, GridMinimap 리터럴 토큰화
---
 .../components/main/Grid/PropertiesPanel.tsx  | 105 +++-----
 .../PluginSettingsPanelView.tsx               |   9 -
 .../Grid/PropertiesPanel/PropertyInputs.tsx   | 127 +---------
 .../batch/BatchSelectionPanel.tsx             |  41 ----
 .../main/Grid/PropertiesPanel/index.ts        |   1 -
 .../Grid/PropertiesPanel/layer/LayerPanel.tsx |   2 +-
 .../PropertiesPanel/layer/LayerTabContent.tsx |  50 +---
 .../single/SingleSelectionPanel.tsx           |  50 ----
 .../main/Grid/PropertiesPanel/types.ts        |   6 -
 .../Grid/PropertiesPanel/usePanelScroll.ts    | 178 +-------------
 .../components/main/Grid/core/GridMinimap.tsx |   2 +-
 .../components/main/Modal/FloatingPopup.tsx   |   6 +-
 .../components/main/Modal/ListPopup.tsx       |   8 +-
 .../main/Modal/ManagerModalLayout.tsx         |   2 +-
 src/renderer/components/main/Modal/Modal.tsx  |  18 +-
 .../main/Modal/content/dialogs/Alert.tsx      |  26 +-
 .../main/Modal/content/dialogs/Laboratory.tsx |   2 +-
 .../content/dialogs/PluginDataDeleteModal.tsx |   5 +-
 .../content/dialogs/UnifiedKeySetting.tsx     |  15 +-
 .../Modal/content/dialogs/UpdateModal.tsx     |   2 +-
 .../editors/CounterAnimationEditorModal.tsx   |   8 +-
 .../Modal/content/editors/TabCssModal.tsx     |   4 +-
 .../Modal/content/editors/TabNameModal.tsx    |   2 +-
 .../Modal/content/managers/SoundTrimModal.tsx |   2 +-
 .../Modal/content/pickers/ColorPicker.tsx     |   2 +-
 .../content/pickers/CommonListPickerPopup.tsx |  29 +--
 .../pickers/CounterAnimationPicker.tsx        |   2 -
 .../main/Modal/content/pickers/FontPicker.tsx |   4 +-
 .../Modal/content/pickers/ImagePicker.tsx     |   2 +-
 .../Modal/content/pickers/SoundPicker.tsx     |   2 -
 .../content/pickers/WebFontInputModal.tsx     |   2 +-
 .../Modal/content/pickers/pickerRowClass.ts   |   4 +-
 .../Modal/content/settings/NoteSetting.tsx    |   2 +-
 .../settings/ShortcutSettingsModal.tsx        |  18 +-
 .../main/Modal/content/settings/TabList.tsx   |  43 ++--
 src/renderer/components/main/Settings.tsx     |  15 +-
 .../components/main/Tool/CanvasTool.tsx       |   2 +-
 .../components/main/Tool/SettingTool.tsx      |   4 +-
 src/renderer/components/main/Tool/TabTool.tsx |   4 +-
 src/renderer/components/main/Tool/ToolBar.tsx |   4 +-
 .../components/main/common/Button.tsx         |  45 ----
 .../components/main/common/Dropdown.tsx       |  22 +-
 .../components/main/common/IconButton.tsx     |  40 ---
 src/renderer/components/main/common/Input.tsx |  24 --
 src/renderer/components/main/common/Radio.tsx |  40 ---
 .../components/main/common/TabSwitch.tsx      |   2 +-
 src/renderer/hooks/Grid/useGridKeyboard.ts    |   3 +-
 src/renderer/hooks/useLenis.ts                |  23 --
 src/renderer/styles/global.css                |  25 --
 src/renderer/styles/main.css                  | 172 ++-----------
 src/renderer/styles/tokens.css                |   7 +
 src/renderer/utils/plugin/pluginComponents.ts |   4 +-
 tailwind.config.js                            | 230 +++++++++---------
 53 files changed, 290 insertions(+), 1157 deletions(-)
 delete mode 100644 src/renderer/components/main/common/Button.tsx
 delete mode 100644 src/renderer/components/main/common/IconButton.tsx
 delete mode 100644 src/renderer/components/main/common/Input.tsx
 delete mode 100644 src/renderer/components/main/common/Radio.tsx

diff --git a/src/renderer/components/main/Grid/PropertiesPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel.tsx
index 31223632..771e8269 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel.tsx
@@ -420,7 +420,21 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     closePage();
   }, [activeTab, panelMode, isPanelVisible, selectedKeyType, closePage]);
 
-  // Escape로 서브 페이지 닫기 — 입력 필드 편집과 경합 방지
+  // 패널 본문 종류(단일/배치/플러그인 등)가 바뀌면 트리거 사이트가 함께
+  // 사라지므로 서브 페이지 무효화 — 선택 이펙트의 early return 경로 보완
+  const panelScopeKey = [
+    pluginSettingsPanel ? 'plugin-settings' : 'grid',
+    selectedKeyElements.length,
+    selectedElements.length,
+    selectedPluginElements.length,
+    selectedGraphElements.length,
+    selectedKnobElements.length,
+  ].join('|');
+  useEffect(() => {
+    closePage();
+  }, [panelScopeKey, closePage]);
+
+  // Escape로 서브 페이지 닫기 — 입력 필드 편집·상위 레이어와 경합 방지
   useEffect(() => {
     if (!activePageKey) return;
     const onKey = (event: KeyboardEvent) => {
@@ -434,10 +448,21 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
       ) {
         return;
       }
+      // 모달·포털 메뉴 등 상위 레이어가 열려 있으면 그쪽이 Escape를 소유
+      if (
+        document.querySelector(
+          '[data-dmn-modal-backdrop="true"], [data-dmn-popup-submenu="true"], [role="dialog"]',
+        )
+      ) {
+        return;
+      }
+      // 이 레이어가 소비 — 그리드의 선택 해제까지 내려가지 않게
+      event.preventDefault();
+      event.stopPropagation();
       closePage();
     };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
+    document.addEventListener('keydown', onKey, true);
+    return () => document.removeEventListener('keydown', onKey, true);
   }, [activePageKey, closePage]);
 
   // 통계 요소 선택 시 NOTE 탭 숨김 처리
@@ -671,69 +696,10 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
   }, [selectedElements]);
 
   // 스크롤 훅 사용
-  const {
-    batchScrollRefFor,
-    batchThumbRefFor,
-    singleScrollRefFor,
-    singleThumbRefFor,
-  } = usePanelScroll(activeTab, selectedElements.length);
+  const { batchScrollRefFor, singleScrollRefFor } = usePanelScroll();
 
   // 플러그인 패널 스크롤
-  const pluginScrollElementRef = useRef<HTMLDivElement | null>(null);
-  const pluginThumbRef = useRef<HTMLDivElement | null>(null);
-
-  const calculatePluginThumb = (el: HTMLDivElement) => {
-    const { scrollTop, scrollHeight, clientHeight } = el;
-    const canScroll = scrollHeight > clientHeight + 1;
-    if (!canScroll) return { top: 0, height: 0, visible: false };
-
-    const minThumbHeight = 16;
-    const height = Math.max(
-      minThumbHeight,
-      (clientHeight / scrollHeight) * clientHeight,
-    );
-    const maxTop = clientHeight - height;
-    const top =
-      maxTop <= 0 ? 0 : (scrollTop / (scrollHeight - clientHeight)) * maxTop;
-
-    return { top, height, visible: true };
-  };
-
-  const updatePluginThumbDOM = () => {
-    if (!pluginThumbRef.current || !pluginScrollElementRef.current) return;
-    const thumb = calculatePluginThumb(pluginScrollElementRef.current);
-    pluginThumbRef.current.style.top = `${thumb.top}px`;
-    pluginThumbRef.current.style.height = `${thumb.height}px`;
-    pluginThumbRef.current.style.display = thumb.visible ? 'block' : 'none';
-  };
-
-  const { scrollContainerRef: pluginLenisRef } = useLenis({
-    onScroll: updatePluginThumbDOM,
-  });
-
-  const setPluginScrollRef = (node: HTMLDivElement | null) => {
-    pluginScrollElementRef.current = node;
-    pluginLenisRef(node);
-  };
-
-  const setPluginThumbRef = (node: HTMLDivElement | null) => {
-    pluginThumbRef.current = node;
-  };
-
-  useEffect(() => {
-    const hasPluginPanel =
-      !!pluginSettingsPanel ||
-      (selectedPluginElements.length > 0 &&
-        selectedKeyLikeElements.length === 0 &&
-        selectedGraphElements.length === 0);
-
-    if (!hasPluginPanel) return;
-
-    const raf = requestAnimationFrame(() => {
-      updatePluginThumbDOM();
-    });
-    return () => cancelAnimationFrame(raf);
-  });
+  const { scrollContainerRef: setPluginScrollRef } = useLenis();
 
   // 배치 편집용 로컬 ColorPicker 상태
   type BatchPickerTarget =
@@ -2641,7 +2607,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handlePluginSettingsPanelConfirm={handlePluginSettingsPanelConfirm}
           handlePluginSettingsPanelCancel={handlePluginSettingsPanelCancel}
           setPluginScrollRef={setPluginScrollRef}
-          setPluginThumbRef={setPluginThumbRef}
           renderPluginSettingsForm={renderPluginSettingsForm}
           t={t}
         />
@@ -2750,7 +2715,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
             handleBatchGlowColorChangeCompleteKeysOnly
           }
           batchScrollRefFor={batchScrollRefFor}
-          batchThumbRefFor={batchThumbRefFor}
           batchNoteColorButtonRef={batchNoteColorButtonRef}
           batchGlowColorButtonRef={batchGlowColorButtonRef}
           batchBorderColorButtonRef={batchBorderColorButtonRef}
@@ -2819,7 +2783,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           getMixedValueKnobsAsKey={getMixedValueKnobsAsKey}
           getSelectedKnobsData={getSelectedKnobsData}
           batchScrollRefFor={batchScrollRefFor}
-          batchThumbRefFor={batchThumbRefFor}
           batchImageButtonRef={batchImageButtonRef}
           showBatchImagePicker={showBatchImagePicker}
           setShowBatchImagePicker={setShowBatchImagePicker}
@@ -2867,7 +2830,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           getMixedValueGraphsAsKey={getMixedValueGraphsAsKey}
           getSelectedGraphsData={getSelectedGraphsData}
           batchScrollRefFor={batchScrollRefFor}
-          batchThumbRefFor={batchThumbRefFor}
           batchImageButtonRef={batchImageButtonRef}
           showBatchImagePicker={showBatchImagePicker}
           setShowBatchImagePicker={setShowBatchImagePicker}
@@ -2898,7 +2860,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleToggleMode={handleToggleMode}
           handleTogglePanel={handleTogglePanel}
           setPluginScrollRef={setPluginScrollRef}
-          setPluginThumbRef={setPluginThumbRef}
           isPluginResizable={isPluginResizable}
           selectedPluginElement={selectedPluginElement}
           pluginDisplaySize={pluginDisplaySize}
@@ -2944,7 +2905,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleToggleMode={handleToggleMode}
           handleTogglePanel={handleTogglePanel}
           singleScrollRefFor={singleScrollRefFor}
-          singleThumbRefFor={singleThumbRefFor}
           panelElement={panelElement}
           useCustomCSS={useCustomCSS}
           t={t}
@@ -2977,7 +2937,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleTogglePanel={handleTogglePanel}
           handleGraphUpdate={handleGraphUpdate}
           singleScrollRefFor={singleScrollRefFor}
-          singleThumbRefFor={singleThumbRefFor}
           showGraphImagePicker={showGraphImagePicker}
           setShowGraphImagePicker={setShowGraphImagePicker}
           graphImageButtonRef={graphImageButtonRef}
@@ -3038,7 +2997,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
         panelElement={panelElement}
         useCustomCSS={useCustomCSS}
         singleScrollRefFor={singleScrollRefFor}
-        singleThumbRefFor={singleThumbRefFor}
         t={t}
       />
     );
@@ -3053,10 +3011,12 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
       value={{ activePageKey, renderPageKey, openPage, closePage, pageHost }}
     >
       <div className={SIDE_PANEL_FRAME_CLASS}>
+        {/* inert — 슬라이드 아웃된 레이어를 키보드 탭 순회·접근성 트리에서 제외 */}
         <div
           className="dmn-panel-page"
           data-page-depth="root"
           data-active={activePageKey ? 'false' : 'true'}
+          inert={activePageKey ? true : undefined}
         >
           {panelBody}
         </div>
@@ -3065,6 +3025,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           className="dmn-panel-page"
           data-page-depth="sub"
           data-active={activePageKey ? 'true' : 'false'}
+          inert={activePageKey ? undefined : true}
         />
       </div>
     </PanelNavProvider>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
index ab3a8e19..545bfb81 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
@@ -19,7 +19,6 @@ interface PluginSettingsPanelViewProps {
   handlePluginSettingsPanelConfirm: () => void;
   handlePluginSettingsPanelCancel: () => void;
   setPluginScrollRef: (node: HTMLDivElement | null) => void;
-  setPluginThumbRef: (node: HTMLDivElement | null) => void;
   renderPluginSettingsForm: (
     schema: Record<string, PluginSettingSchema> | undefined,
     values: Record<string, unknown>,
@@ -39,7 +38,6 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
   handlePluginSettingsPanelConfirm,
   handlePluginSettingsPanelCancel,
   setPluginScrollRef,
-  setPluginThumbRef,
   renderPluginSettingsForm,
   t,
 }) => {
@@ -76,13 +74,6 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
               handlePluginSettingsPanelChange,
             )}
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={setPluginThumbRef}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
       </div>
       <div className="border-t border-line p-[12px]">
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
index cc6c6368..8444d254 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
@@ -1,13 +1,11 @@
 /* eslint-disable react-hooks/set-state-in-effect */
 import React, { useState, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import type {
   PropertyRowProps,
   NumberInputProps,
   OptionalNumberInputProps,
   TextInputProps,
   ColorInputProps,
-  SelectInputProps,
   ToggleSwitchProps,
   TabButtonProps,
   TabsProps,
@@ -34,7 +32,7 @@ export const PropertyRow: React.FC<PropertyRowProps> = ({
 export const PropertySection: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => (
-  <div className="bg-fill-faint rounded-[10px] px-[10px] py-[4px] flex flex-col">
+  <div className="bg-fill-faint rounded-surface px-[10px] py-[4px] flex flex-col">
     {children}
   </div>
 );
@@ -760,127 +758,6 @@ export const ColorInput: React.FC<ColorInputProps> = ({
   );
 };
 
-// ============================================================================
-// 선택 입력
-// ============================================================================
-
-export const SelectInput: React.FC<SelectInputProps> = ({
-  value,
-  options,
-  onChange,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [menuPos, setMenuPos] = useState<{
-    left: number;
-    top: number;
-    width: number;
-  } | null>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // 트리거가 스크롤/리사이즈로 움직이면 좌표가 어긋나므로 닫는다
-  // (메뉴 내부 스크롤은 제외)
-  useEffect(() => {
-    if (!isOpen) return;
-    const close = (event?: Event) => {
-      if (
-        event?.target instanceof Node &&
-        menuRef.current?.contains(event.target)
-      ) {
-        return;
-      }
-      setIsOpen(false);
-    };
-    window.addEventListener('scroll', close, true);
-    window.addEventListener('resize', close);
-    return () => {
-      window.removeEventListener('scroll', close, true);
-      window.removeEventListener('resize', close);
-    };
-  }, [isOpen]);
-
-  return (
-    <div className="relative">
-      <button
-        ref={triggerRef}
-        onClick={() => {
-          if (!isOpen && triggerRef.current) {
-            const rect = triggerRef.current.getBoundingClientRect();
-            setMenuPos({
-              left: rect.left,
-              top: rect.bottom + 4,
-              width: rect.width,
-            });
-          }
-          setIsOpen(!isOpen);
-        }}
-        className={`h-[23px] min-w-[70px] bg-inset rounded-md ${
-          isOpen ? 'shadow-focus-ring' : ''
-        } px-[8px] flex items-center justify-between gap-[4px] transition-colors`}
-      >
-        <span className="text-body tabular-nums text-fg">
-          {options.find((opt) => opt.value === value)?.label || value}
-        </span>
-        <svg
-          width="8"
-          height="5"
-          viewBox="0 0 8 5"
-          fill="none"
-          className="flex-shrink-0 text-white/45"
-        >
-          <path
-            d="M1 1L4 4L7 1"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </button>
-      {isOpen &&
-        menuPos &&
-        createPortal(
-          // 패널의 backdrop-filter·mask 아래에서는 중첩 backdrop-blur가
-          // 무력화되므로 메뉴는 body로 포털해 backdrop root 밖에서 그린다
-          <>
-            <div
-              className="fixed inset-0 z-[59]"
-              onClick={() => setIsOpen(false)}
-            />
-            <div
-              ref={menuRef}
-              data-dmn-popup-submenu="true"
-              className="fixed flex flex-col p-[4px] gap-[4px] bg-glass backdrop-blur-[24px] rounded-[10px] z-[60] overflow-x-hidden overflow-y-auto max-h-[200px] shadow-elevation-2 min-w-[70px] tooltip-fade-in"
-              style={{
-                left: menuPos.left,
-                top: menuPos.top,
-                width: menuPos.width,
-              }}
-            >
-              {options.map((opt) => (
-                <button
-                  key={opt.value}
-                  onClick={() => {
-                    onChange(opt.value);
-                    setIsOpen(false);
-                  }}
-                  className={`text-left w-full h-[24px] px-[8px] rounded-[6px] text-body tabular-nums transition-colors duration-fast flex items-center ${
-                    value === opt.value
-                      ? 'bg-surface-active text-fg pointer-events-none'
-                      : 'text-fg-muted hover:bg-surface-hover hover:text-fg'
-                  }`}
-                >
-                  <span className="truncate">{opt.label}</span>
-                </button>
-              ))}
-            </div>
-          </>,
-          document.body,
-        )}
-    </div>
-  );
-};
-
 // ============================================================================
 // 토글 스위치
 // ============================================================================
@@ -1101,7 +978,7 @@ export const Tabs: React.FC<TabsProps> = ({
   const activeIndex = Math.max(0, tabs.indexOf(activeTab));
 
   return (
-    <div className="relative flex w-full h-[30px] bg-inset rounded-[10px] items-center p-[2px]">
+    <div className="relative flex w-full h-[30px] bg-inset rounded-surface items-center p-[2px]">
       <div
         aria-hidden
         className="absolute top-[2px] bottom-[2px] left-[2px] rounded-[8px] bg-fill-active shadow-elevation-chrome transition-transform duration-base ease-out-expo"
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
index c611ed63..70d94de8 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
@@ -167,7 +167,6 @@ interface BatchKeyLikePanelProps {
   handleBatchGlowColorChangeCompleteKeysOnly: (value: NoteColor) => void;
   // refs
   batchScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  batchThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
   batchNoteColorButtonRef: React.RefObject<HTMLButtonElement | null>;
   batchGlowColorButtonRef: React.RefObject<HTMLButtonElement | null>;
   batchBorderColorButtonRef: React.RefObject<HTMLButtonElement | null>;
@@ -251,7 +250,6 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
   handleBatchGlowColorChange: _handleBatchGlowColorChange,
   handleBatchGlowColorChangeComplete: _handleBatchGlowColorChangeComplete,
   batchScrollRefFor,
-  batchThumbRefFor,
   batchNoteColorButtonRef,
   batchGlowColorButtonRef,
   batchBorderColorButtonRef,
@@ -766,13 +764,6 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
                 t={t}
               />
             </div>
-            <div className="properties-panel-overlay-bar">
-              <div
-                ref={batchThumbRefFor(TABS.STYLE)}
-                className="properties-panel-overlay-thumb"
-                style={{ display: 'none' }}
-              />
-            </div>
           </div>
 
           {/* NOTE 탭 viewport */}
@@ -810,13 +801,6 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
                   t={t}
                 />
               </div>
-              <div className="properties-panel-overlay-bar">
-                <div
-                  ref={batchThumbRefFor(TABS.NOTE)}
-                  className="properties-panel-overlay-thumb"
-                  style={{ display: 'none' }}
-                />
-              </div>
             </div>
           )}
 
@@ -843,13 +827,6 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
                 t={t}
               />
             </div>
-            <div className="properties-panel-overlay-bar">
-              <div
-                ref={batchThumbRefFor(TABS.COUNTER)}
-                className="properties-panel-overlay-thumb"
-                style={{ display: 'none' }}
-              />
-            </div>
           </div>
         </div>
 
@@ -1022,7 +999,6 @@ interface BatchGraphOnlyPanelProps {
   getMixedValueGraphsAsKey: MixedValueGetter<KeyPosition>;
   getSelectedGraphsData: () => KeyData[];
   batchScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  batchThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
   batchImageButtonRef: React.RefObject<HTMLButtonElement | null>;
   showBatchImagePicker: boolean;
   setShowBatchImagePicker: (value: boolean) => void;
@@ -1060,7 +1036,6 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
   getMixedValueGraphsAsKey,
   getSelectedGraphsData,
   batchScrollRefFor,
-  batchThumbRefFor,
   batchImageButtonRef,
   showBatchImagePicker,
   setShowBatchImagePicker,
@@ -1313,13 +1288,6 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
               t={t}
             />
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={batchThumbRefFor(TABS.STYLE)}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
       </div>
 
@@ -1412,7 +1380,6 @@ interface BatchKnobOnlyPanelProps {
   getMixedValueKnobsAsKey: MixedValueGetter<KeyPosition>;
   getSelectedKnobsData: () => KeyData[];
   batchScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  batchThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
   batchImageButtonRef: React.RefObject<HTMLButtonElement | null>;
   showBatchImagePicker: boolean;
   setShowBatchImagePicker: (value: boolean) => void;
@@ -1450,7 +1417,6 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
   getMixedValueKnobsAsKey,
   getSelectedKnobsData,
   batchScrollRefFor,
-  batchThumbRefFor,
   batchImageButtonRef,
   showBatchImagePicker,
   setShowBatchImagePicker,
@@ -1622,13 +1588,6 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
               t={t}
             />
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={batchThumbRefFor(TABS.STYLE)}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
       </div>
 
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/index.ts b/src/renderer/components/main/Grid/PropertiesPanel/index.ts
index 9b16055e..c4bbc40c 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/index.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/index.ts
@@ -9,7 +9,6 @@ export {
   OptionalNumberInput,
   TextInput,
   ColorInput,
-  SelectInput,
   ToggleSwitch,
   FontStyleToggle,
   Tabs,
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
index f539dc74..b3928f10 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
@@ -62,7 +62,7 @@ const LayerPanelTabs: React.FC<LayerPanelTabsProps> = ({
   const activeIndex = activeTab === LAYER_PANEL_TABS.GRID ? 1 : 0;
 
   return (
-    <div className="relative flex w-full h-[30px] bg-inset rounded-[10px] items-center p-[2px]">
+    <div className="relative flex w-full h-[30px] bg-inset rounded-surface items-center p-[2px]">
       <div
         aria-hidden
         className="absolute top-[2px] bottom-[2px] left-[2px] rounded-[8px] bg-fill-active shadow-elevation-chrome transition-transform duration-base ease-out-expo"
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
index 75330324..a37a8e15 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
@@ -101,48 +101,16 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
     return () => clearPendingDeselect();
   });
 
-  // 스크롤 상태
+  // 스크롤 상태 — scrollElementRef는 DnD 훅의 오토스크롤 계산용
   const scrollElementRef = useRef<HTMLDivElement | null>(null);
-  const thumbRef = useRef<HTMLDivElement | null>(null);
 
-  const calculateThumb = (el: HTMLDivElement) => {
-    const { scrollTop, scrollHeight, clientHeight } = el;
-    const canScroll = scrollHeight > clientHeight + 1;
-    if (!canScroll) return { top: 0, height: 0, visible: false };
-
-    const minThumbHeight = 16;
-    const height = Math.max(
-      minThumbHeight,
-      (clientHeight / scrollHeight) * clientHeight,
-    );
-    const maxTop = clientHeight - height;
-    const top =
-      maxTop <= 0 ? 0 : (scrollTop / (scrollHeight - clientHeight)) * maxTop;
-
-    return { top, height, visible: true };
-  };
-
-  const updateThumbDOM = () => {
-    if (!thumbRef.current || !scrollElementRef.current) return;
-    const thumb = calculateThumb(scrollElementRef.current);
-    thumbRef.current.style.top = `${thumb.top}px`;
-    thumbRef.current.style.height = `${thumb.height}px`;
-    thumbRef.current.style.display = thumb.visible ? 'block' : 'none';
-  };
-
-  const { scrollContainerRef: lenisRef, lenisInstance } = useLenis({
-    onScroll: updateThumbDOM,
-  });
+  const { scrollContainerRef: lenisRef, lenisInstance } = useLenis();
 
   const setScrollRef = (node: HTMLDivElement | null) => {
     scrollElementRef.current = node;
     lenisRef(node);
   };
 
-  useEffect(() => {
-    updateThumbDOM();
-  });
-
   // 레이어 아이템 목록
   const layerItems = buildLayerItems({
     selectedKeyType,
@@ -180,7 +148,6 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
   useEffect(() => {
     const rafId = requestAnimationFrame(() => {
       lenisInstance.current?.resize();
-      updateThumbDOM();
     });
     return () => cancelAnimationFrame(rafId);
   });
@@ -645,7 +612,7 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
                         e.stopPropagation();
                         actions.handleToggleGroupVisibility(e, gh.groupId);
                       }}
-                      className={`flex-shrink-0 w-[28px] h-[28px] flex items-center justify-center rounded-[6px] cursor-pointer ${
+                      className={`flex-shrink-0 w-[28px] h-[28px] flex items-center justify-center rounded-md cursor-pointer ${
                         gh.allHidden
                           ? ''
                           : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
@@ -783,7 +750,7 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
                         ? t('propertiesPanel.showLayer') || 'Show'
                         : t('propertiesPanel.hideLayer') || 'Hide'
                     }
-                    className={`flex-shrink-0 w-[28px] h-[28px] flex items-center justify-center rounded-[6px] cursor-pointer ${
+                    className={`flex-shrink-0 w-[28px] h-[28px] flex items-center justify-center rounded-md cursor-pointer ${
                       item.hidden
                         ? ''
                         : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
@@ -814,15 +781,6 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
               )}
           </div>
         )}
-
-        {/* 커스텀 스크롤바 */}
-        <div className="properties-panel-overlay-bar">
-          <div
-            ref={thumbRef}
-            className="properties-panel-overlay-thumb"
-            style={{ display: 'none' }}
-          />
-        </div>
       </div>
 
       {/* 컨텍스트 메뉴 */}
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
index 8a149e8e..2b82bdaf 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
@@ -85,7 +85,6 @@ interface PluginSelectionPanelProps {
   handleToggleMode: () => void;
   handleTogglePanel: () => void;
   setPluginScrollRef: (node: HTMLDivElement | null) => void;
-  setPluginThumbRef: (node: HTMLDivElement | null) => void;
   isPluginResizable: boolean;
   selectedPluginElement: PluginDisplayElementInternal | null;
   pluginDisplaySize: { width: number; height: number };
@@ -116,7 +115,6 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
   handleToggleMode,
   handleTogglePanel,
   setPluginScrollRef,
-  setPluginThumbRef,
   isPluginResizable,
   selectedPluginElement,
   pluginDisplaySize,
@@ -233,13 +231,6 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
               </PropertySection>
             )}
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={setPluginThumbRef}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
       </div>
     </div>
@@ -269,7 +260,6 @@ interface SingleGraphPanelProps {
     data: Partial<GraphItemPosition> & { index: number },
   ) => void;
   singleScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  singleThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
   showGraphImagePicker: boolean;
   setShowGraphImagePicker: (value: boolean) => void;
   graphImageButtonRef: React.RefObject<HTMLButtonElement | null>;
@@ -297,7 +287,6 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
   handleTogglePanel,
   handleGraphUpdate,
   singleScrollRefFor,
-  singleThumbRefFor,
   showGraphImagePicker,
   setShowGraphImagePicker,
   graphImageButtonRef,
@@ -659,13 +648,6 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
               </PropertySection>
             )}
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={singleThumbRefFor(TABS.STYLE)}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
       </div>
 
@@ -766,7 +748,6 @@ interface SingleKnobPanelProps {
   handleToggleMode: () => void;
   handleTogglePanel: () => void;
   singleScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  singleThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
   panelElement: HTMLDivElement | null;
   useCustomCSS: boolean;
   t: (key: string) => string;
@@ -789,7 +770,6 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
   handleToggleMode,
   handleTogglePanel,
   singleScrollRefFor,
-  singleThumbRefFor,
   panelElement,
   useCustomCSS,
   t,
@@ -1246,13 +1226,6 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
               )}
             </PropertySection>
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={singleThumbRefFor(TABS.STYLE)}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
       </div>
 
@@ -1390,7 +1363,6 @@ interface SingleKeyStatPanelProps {
   panelElement: HTMLDivElement | null;
   useCustomCSS: boolean;
   singleScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  singleThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
   t: (key: string) => string | undefined;
 }
 
@@ -1434,7 +1406,6 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
   panelElement,
   useCustomCSS,
   singleScrollRefFor,
-  singleThumbRefFor,
   t,
 }) => {
   const availableTabs = isSingleStat
@@ -1661,13 +1632,6 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
               onSizeBlur={handleSizeBlur}
             />
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={singleThumbRefFor(TABS.STYLE)}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
 
         {/* NOTE 탭 viewport */}
@@ -1688,13 +1652,6 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
                 t={t}
               />
             </div>
-            <div className="properties-panel-overlay-bar">
-              <div
-                ref={singleThumbRefFor(TABS.NOTE)}
-                className="properties-panel-overlay-thumb"
-                style={{ display: 'none' }}
-              />
-            </div>
           </div>
         )}
 
@@ -1716,13 +1673,6 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
               t={t}
             />
           </div>
-          <div className="properties-panel-overlay-bar">
-            <div
-              ref={singleThumbRefFor(TABS.COUNTER)}
-              className="properties-panel-overlay-thumb"
-              style={{ display: 'none' }}
-            />
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/types.ts b/src/renderer/components/main/Grid/PropertiesPanel/types.ts
index 4c9f567c..78f9a62f 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/types.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/types.ts
@@ -87,12 +87,6 @@ export interface ColorInputProps {
   onToggle?: () => void;
 }
 
-export interface SelectInputProps {
-  value: string;
-  options: { value: string; label: string }[];
-  onChange: (value: string) => void;
-}
-
 export interface ToggleSwitchProps {
   checked: boolean;
   onChange: (checked: boolean) => void;
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/usePanelScroll.ts b/src/renderer/components/main/Grid/PropertiesPanel/usePanelScroll.ts
index 2a0e772e..acf83424 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/usePanelScroll.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/usePanelScroll.ts
@@ -1,140 +1,24 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback } from 'react';
 import { useLenis } from '@hooks/useLenis';
 import { TABS, TabType } from './types';
 
-interface ScrollThumbState {
-  top: number;
-  height: number;
-  visible: boolean;
-}
-
 interface UsePanelScrollReturn {
-  // 일괄 스크롤 ref
+  // 탭별 keepalive 뷰포트에 Lenis 스무스 스크롤 연결
   batchScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  batchThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  // 단일 스크롤 ref
   singleScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  singleThumbRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
-  // 수동 thumb 업데이트
-  updateThumbs: (tab: TabType) => void;
 }
 
-export function usePanelScroll(
-  activeTab: TabType,
-  selectedElementsLength: number,
-): UsePanelScrollReturn {
-  // Thumb refs (탭별, 직접 DOM 조작으로 리렌더링 방지)
-  const batchThumbRefs = useRef<Record<TabType, HTMLDivElement | null>>({
-    [TABS.STYLE]: null,
-    [TABS.NOTE]: null,
-    [TABS.COUNTER]: null,
-  });
-  const singleThumbRefs = useRef<Record<TabType, HTMLDivElement | null>>({
-    [TABS.STYLE]: null,
-    [TABS.NOTE]: null,
-    [TABS.COUNTER]: null,
-  });
-
-  // Scroll element refs (탭별, thumb 계산용)
-  const batchScrollElementRefs = useRef<Record<TabType, HTMLDivElement | null>>(
-    {
-      [TABS.STYLE]: null,
-      [TABS.NOTE]: null,
-      [TABS.COUNTER]: null,
-    },
-  );
-  const singleScrollElementRefs = useRef<
-    Record<TabType, HTMLDivElement | null>
-  >({
-    [TABS.STYLE]: null,
-    [TABS.NOTE]: null,
-    [TABS.COUNTER]: null,
-  });
-
-  const calculateThumb = useCallback((el: HTMLDivElement): ScrollThumbState => {
-    const { scrollTop, scrollHeight, clientHeight } = el;
-    const canScroll = scrollHeight > clientHeight + 1;
-    if (!canScroll) return { top: 0, height: 0, visible: false };
-
-    const minThumbHeight = 16;
-    const height = Math.max(
-      minThumbHeight,
-      (clientHeight / scrollHeight) * clientHeight,
-    );
-    const maxTop = clientHeight - height;
-    const top =
-      maxTop <= 0 ? 0 : (scrollTop / (scrollHeight - clientHeight)) * maxTop;
-
-    return { top, height, visible: true };
-  }, []);
-
-  // thumb DOM 직접 업데이트 (리렌더링 없이 성능 최적화)
-  const updateThumbDOM = useCallback(
-    (thumbEl: HTMLDivElement | null, scrollEl: HTMLDivElement | null) => {
-      if (!thumbEl || !scrollEl) return;
-      const thumb = calculateThumb(scrollEl);
-      thumbEl.style.top = `${thumb.top}px`;
-      thumbEl.style.height = `${thumb.height}px`;
-      thumbEl.style.display = thumb.visible ? 'block' : 'none';
-    },
-    [calculateThumb],
-  );
-
-  // Lenis 스크롤 적용 (탭별 6개 훅: batch 3개 + single 3개)
-  const { scrollContainerRef: batchLenisStyleRef } = useLenis({
-    onScroll: useCallback(() => {
-      updateThumbDOM(
-        batchThumbRefs.current[TABS.STYLE],
-        batchScrollElementRefs.current[TABS.STYLE],
-      );
-    }, [updateThumbDOM]),
-  });
-  const { scrollContainerRef: batchLenisNoteRef } = useLenis({
-    onScroll: useCallback(() => {
-      updateThumbDOM(
-        batchThumbRefs.current[TABS.NOTE],
-        batchScrollElementRefs.current[TABS.NOTE],
-      );
-    }, [updateThumbDOM]),
-  });
-  const { scrollContainerRef: batchLenisCounterRef } = useLenis({
-    onScroll: useCallback(() => {
-      updateThumbDOM(
-        batchThumbRefs.current[TABS.COUNTER],
-        batchScrollElementRefs.current[TABS.COUNTER],
-      );
-    }, [updateThumbDOM]),
-  });
-
-  const { scrollContainerRef: singleLenisStyleRef } = useLenis({
-    onScroll: useCallback(() => {
-      updateThumbDOM(
-        singleThumbRefs.current[TABS.STYLE],
-        singleScrollElementRefs.current[TABS.STYLE],
-      );
-    }, [updateThumbDOM]),
-  });
-  const { scrollContainerRef: singleLenisNoteRef } = useLenis({
-    onScroll: useCallback(() => {
-      updateThumbDOM(
-        singleThumbRefs.current[TABS.NOTE],
-        singleScrollElementRefs.current[TABS.NOTE],
-      );
-    }, [updateThumbDOM]),
-  });
-  const { scrollContainerRef: singleLenisCounterRef } = useLenis({
-    onScroll: useCallback(() => {
-      updateThumbDOM(
-        singleThumbRefs.current[TABS.COUNTER],
-        singleScrollElementRefs.current[TABS.COUNTER],
-      );
-    }, [updateThumbDOM]),
-  });
+export function usePanelScroll(): UsePanelScrollReturn {
+  // 탭별 6개 인스턴스 (batch 3 + single 3) — 뷰포트가 keepalive라 각자 유지
+  const { scrollContainerRef: batchLenisStyleRef } = useLenis();
+  const { scrollContainerRef: batchLenisNoteRef } = useLenis();
+  const { scrollContainerRef: batchLenisCounterRef } = useLenis();
+  const { scrollContainerRef: singleLenisStyleRef } = useLenis();
+  const { scrollContainerRef: singleLenisNoteRef } = useLenis();
+  const { scrollContainerRef: singleLenisCounterRef } = useLenis();
 
-  // callback ref를 합성하여 Lenis와 내부 ref 모두 업데이트 (탭별)
   const batchScrollRefFor = useCallback(
     (tab: TabType) => (node: HTMLDivElement | null) => {
-      batchScrollElementRefs.current[tab] = node;
       if (tab === TABS.STYLE) batchLenisStyleRef(node);
       if (tab === TABS.NOTE) batchLenisNoteRef(node);
       if (tab === TABS.COUNTER) batchLenisCounterRef(node);
@@ -144,7 +28,6 @@ export function usePanelScroll(
 
   const singleScrollRefFor = useCallback(
     (tab: TabType) => (node: HTMLDivElement | null) => {
-      singleScrollElementRefs.current[tab] = node;
       if (tab === TABS.STYLE) singleLenisStyleRef(node);
       if (tab === TABS.NOTE) singleLenisNoteRef(node);
       if (tab === TABS.COUNTER) singleLenisCounterRef(node);
@@ -152,44 +35,5 @@ export function usePanelScroll(
     [singleLenisStyleRef, singleLenisNoteRef, singleLenisCounterRef],
   );
 
-  const batchThumbRefFor = useCallback(
-    (tab: TabType) => (node: HTMLDivElement | null) => {
-      batchThumbRefs.current[tab] = node;
-    },
-    [],
-  );
-
-  const singleThumbRefFor = useCallback(
-    (tab: TabType) => (node: HTMLDivElement | null) => {
-      singleThumbRefs.current[tab] = node;
-    },
-    [],
-  );
-
-  const updateThumbs = useCallback(
-    (tab: TabType) => {
-      updateThumbDOM(
-        batchThumbRefs.current[tab],
-        batchScrollElementRefs.current[tab],
-      );
-      updateThumbDOM(
-        singleThumbRefs.current[tab],
-        singleScrollElementRefs.current[tab],
-      );
-    },
-    [updateThumbDOM],
-  );
-
-  // 탭 변경 또는 선택 변경 시 thumb 업데이트
-  useEffect(() => {
-    updateThumbs(activeTab);
-  }, [updateThumbs, activeTab, selectedElementsLength]);
-
-  return {
-    batchScrollRefFor,
-    batchThumbRefFor,
-    singleScrollRefFor,
-    singleThumbRefFor,
-    updateThumbs,
-  };
+  return { batchScrollRefFor, singleScrollRefFor };
 }
diff --git a/src/renderer/components/main/Grid/core/GridMinimap.tsx b/src/renderer/components/main/Grid/core/GridMinimap.tsx
index 0f399ebe..8792a9d7 100644
--- a/src/renderer/components/main/Grid/core/GridMinimap.tsx
+++ b/src/renderer/components/main/Grid/core/GridMinimap.tsx
@@ -61,7 +61,7 @@ const ZoomButton = ({ onClick, title, style, children }: ZoomButtonProps) => (
       ...style,
     }}
     onMouseEnter={(e) =>
-      (e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)')
+      (e.currentTarget.style.backgroundColor = 'var(--ui-fill-active)')
     }
     onMouseLeave={(e) =>
       (e.currentTarget.style.backgroundColor = 'transparent')
diff --git a/src/renderer/components/main/Modal/FloatingPopup.tsx b/src/renderer/components/main/Modal/FloatingPopup.tsx
index 1ec3892e..fed0c6b9 100644
--- a/src/renderer/components/main/Modal/FloatingPopup.tsx
+++ b/src/renderer/components/main/Modal/FloatingPopup.tsx
@@ -67,7 +67,11 @@ const FloatingPopup = ({
   useEffect(() => {
     if (open && autoClose) {
       const onKey = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') onClose?.();
+        if (e.key === 'Escape') {
+          // 이 레이어가 소비 — 하위 레이어(페이지·그리드 선택)로 내려가지 않게
+          e.preventDefault();
+          onClose?.();
+        }
       };
 
       const onClickAway = (e: MouseEvent) => {
diff --git a/src/renderer/components/main/Modal/ListPopup.tsx b/src/renderer/components/main/Modal/ListPopup.tsx
index ca7366a5..7e443d1c 100644
--- a/src/renderer/components/main/Modal/ListPopup.tsx
+++ b/src/renderer/components/main/Modal/ListPopup.tsx
@@ -124,7 +124,7 @@ const SubMenu = ({
       data-dmn-popup-submenu="true"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className={`fixed z-[10001] bg-glass backdrop-blur-[24px] shadow-elevation-2 rounded-[10px] p-[4px] flex flex-col gap-[4px] tooltip-fade-in${
+      className={`fixed z-[10001] bg-glass backdrop-blur-[24px] shadow-elevation-2 rounded-surface p-[4px] flex flex-col gap-[4px] tooltip-fade-in${
         needsScroll ? ' listpopup-scroll' : ''
       }`}
       style={{
@@ -247,7 +247,7 @@ const MenuItemRow = ({
         type="button"
         disabled={item.disabled}
         onClick={handleSelect}
-        className={`w-full min-w-[108px] h-[26px] px-[24px] rounded-[6px] flex items-center justify-center transition-colors duration-fast ${
+        className={`w-full min-w-[108px] h-[26px] px-[24px] rounded-md flex items-center justify-center transition-colors duration-fast ${
           item.disabled
             ? 'opacity-70'
             : 'hover:bg-surface-hover active:bg-surface-active cursor-pointer'
@@ -275,7 +275,7 @@ const MenuItemRow = ({
         type="button"
         disabled={item.disabled}
         onClick={handleSelect}
-        className={`w-full min-w-[96px] h-[26px] px-[8px] rounded-[6px] flex items-center gap-[6px] transition-colors duration-fast ${
+        className={`w-full min-w-[96px] h-[26px] px-[8px] rounded-md flex items-center gap-[6px] transition-colors duration-fast ${
           item.disabled
             ? 'opacity-70'
             : 'hover:bg-surface-hover active:bg-surface-active cursor-pointer'
@@ -368,7 +368,7 @@ const ListPopup = ({
 }: ListPopupProps) => {
   // 일시적 팝업은 상주 크롬(z-30, 패널·미니맵)보다 항상 위
   const defaultClassName =
-    'z-40 bg-glass backdrop-blur-[24px] shadow-elevation-2 rounded-[10px] p-[4px] flex flex-col gap-[4px]';
+    'z-40 bg-glass backdrop-blur-[24px] shadow-elevation-2 rounded-surface p-[4px] flex flex-col gap-[4px]';
   const effectiveClassName = `${defaultClassName} ${className}`.trim();
 
   // 스크롤 필요 여부 계산 (아이템 26 + 갭 4 리듬)
diff --git a/src/renderer/components/main/Modal/ManagerModalLayout.tsx b/src/renderer/components/main/Modal/ManagerModalLayout.tsx
index c3492aa7..bd670d59 100644
--- a/src/renderer/components/main/Modal/ManagerModalLayout.tsx
+++ b/src/renderer/components/main/Modal/ManagerModalLayout.tsx
@@ -113,7 +113,7 @@ const ManagerModalLayout = ({
   return (
     <Modal onClick={onClose}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 p-[20px] pr-[6px]"
+        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] pr-[6px]"
         onClick={(e) => e.stopPropagation()}
       >
         {/* 탭 영역 */}
diff --git a/src/renderer/components/main/Modal/Modal.tsx b/src/renderer/components/main/Modal/Modal.tsx
index 9d9784b7..a936ef4e 100644
--- a/src/renderer/components/main/Modal/Modal.tsx
+++ b/src/renderer/components/main/Modal/Modal.tsx
@@ -8,9 +8,7 @@ interface ModalProps {
 }
 
 const Modal = ({ onClick, children, animate = true }: ModalProps) => {
-  const backdropAnimClass = animate
-    ? 'opacity-0 animate-modal-fade'
-    : 'opacity-100';
+  const scrimAnimClass = animate ? 'animate-modal-scrim' : '';
   const contentAnimClass = animate ? 'animate-modal-scale' : '';
   const closeFromBackdropRef = useRef(false);
 
@@ -44,15 +42,25 @@ const Modal = ({ onClick, children, animate = true }: ModalProps) => {
     e.stopPropagation();
   };
 
+  // 배경 블러는 모달의 조상이 아니라 형제 언더레이가 소유해야 함 —
+  // 조상이 backdrop-filter를 가지면 backdrop root가 생겨 모달 글래스의
+  // 블러가 WebKit에서 배경을 샘플링하지 못함. 형제 레이어는 정상 합성됨
+  // 래퍼 opacity 애니메이션도 같은 이유로 금지 — opacity < 1인 조상이
+  // backdrop root가 되어 페이드 동안 블러가 죽었다가 끝나는 순간 튐.
+  // 등장 모션은 스크림(틴트+블러 키프레임)과 콘텐츠가 각자 소유한다
   return createPortal(
     <div
       data-dmn-modal-backdrop="true"
-      className={`fixed top-[31px] bottom-[61px] left-[1px] right-[1px] flex items-center justify-center bg-black/60 backdrop-blur-[2px] z-50 ${backdropAnimClass}`}
+      className="fixed top-[31px] bottom-[61px] left-[1px] right-[1px] flex items-center justify-center z-50"
       onPointerDown={handleBackdropPointerDown}
       onClick={handleBackdropClick}
       onWheel={handleWheel}
     >
-      <div className={contentAnimClass}>{children}</div>
+      {/* 스크림 언더레이 — 클릭은 래퍼로 통과 */}
+      <div
+        className={`absolute inset-0 bg-black/60 backdrop-blur-[2px] pointer-events-none ${scrimAnimClass}`}
+      />
+      <div className={`relative ${contentAnimClass}`}>{children}</div>
     </div>,
     document.body,
   );
diff --git a/src/renderer/components/main/Modal/content/dialogs/Alert.tsx b/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
index 8fdb0c79..3456e473 100644
--- a/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
@@ -48,11 +48,7 @@ const Alert = ({
   };
 
   // Lenis smooth scroll 적용 (onScroll 콜백으로 그림자 업데이트)
-  const {
-    scrollContainerRef: scrollRef,
-    wrapperElement,
-    scrollbarWidth,
-  } = useLenis({
+  const { scrollContainerRef: scrollRef, wrapperElement } = useLenis({
     onScroll: () => updateScrollState(wrapperElement),
   });
 
@@ -73,14 +69,10 @@ const Alert = ({
   const cancelLabel = cancelText || t('common.cancel');
   const shouldShowCancel = isConfirm || (isCustom && showCancel);
 
-  const hasOverflow =
-    !!wrapperElement &&
-    wrapperElement.scrollHeight > wrapperElement.clientHeight + 1;
-
   return (
     <Modal onClick={onCancel}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 p-[20px] pr-[6px]"
+        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] pr-[6px]"
         onClick={(e) => e.stopPropagation()}
       >
         {/* 메시지 텍스트 or Custom HTML */}
@@ -96,20 +88,6 @@ const Alert = ({
             <div
               ref={scrollRef}
               className="max-h-[244px] overflow-y-auto modal-content-scroll pr-[14px] text-center text-fg"
-              style={{
-                width:
-                  hasOverflow && scrollbarWidth > 0
-                    ? `calc(100% + ${scrollbarWidth}px)`
-                    : undefined,
-                transform:
-                  hasOverflow && scrollbarWidth > 0
-                    ? `translateX(-${scrollbarWidth}px)`
-                    : undefined,
-                paddingLeft:
-                  hasOverflow && scrollbarWidth > 0
-                    ? `${scrollbarWidth}px`
-                    : undefined,
-              }}
               dangerouslySetInnerHTML={{ __html: message }}
             />
 
diff --git a/src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx b/src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx
index 313f6cb7..1562d333 100644
--- a/src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx
@@ -83,7 +83,7 @@ const LaboratoryModal = ({
   return (
     <Modal onClick={onClose}>
       <div
-        className="flex flex-col items-center justify-center p-[20px] bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 gap-[16px]"
+        className="flex flex-col items-center justify-center p-[20px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 gap-[16px]"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex justify-between w-full items-center">
diff --git a/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx b/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
index 559eacdb..92bfb244 100644
--- a/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
@@ -23,13 +23,10 @@ export function PluginDataDeleteModal({
   return (
     <Modal onClick={onClose}>
       <div
-        className="flex flex-col w-[380px] bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 p-[20px] gap-[16px]"
+        className="flex flex-col w-[380px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] gap-[16px]"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex flex-col gap-[8px]">
-          {/* <span className="text-style-3 text-fg">
-            {t("settings.pluginDataDeleteTitle")}
-          </span> */}
           <span className="text-style-3 text-fg !leading-[1.5]">
             {t('settings.pluginDataDeleteMessage', { name: pluginName })}
           </span>
diff --git a/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx b/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
index 4fccc622..a407b68a 100644
--- a/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
@@ -92,7 +92,6 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
     scrollContainerRef: scrollRef,
     wrapperElement,
     lenisInstance,
-    scrollbarWidth,
   } = useLenis({
     onScroll: () => updateScrollState(wrapperElement),
   });
@@ -234,7 +233,7 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
   return (
     <Modal onClick={handleClose} animate={!initialSkipRef.current}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 p-[20px] pr-[6px]"
+        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] pr-[6px]"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="pr-[14px]">
@@ -268,18 +267,6 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
               height:
                 containerHeight !== null ? `${containerHeight}px` : 'auto',
               maxHeight: '195px',
-              width:
-                hasOverflow && scrollbarWidth > 0
-                  ? `calc(100% + ${scrollbarWidth}px)`
-                  : undefined,
-              transform:
-                hasOverflow && scrollbarWidth > 0
-                  ? `translateX(-${scrollbarWidth}px)`
-                  : undefined,
-              paddingLeft:
-                hasOverflow && scrollbarWidth > 0
-                  ? `${scrollbarWidth}px`
-                  : undefined,
               transition: isFirstRender.current
                 ? 'none'
                 : 'height 100ms ease-in-out',
diff --git a/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
index 59373eec..41926333 100644
--- a/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
@@ -81,7 +81,7 @@ const UpdateModal = ({
   return (
     <Modal onClick={handleClose}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 p-[20px] min-w-[320px] max-w-[400px]"
+        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] min-w-[320px] max-w-[400px]"
         onClick={(e) => e.stopPropagation()}
       >
         {isLatestVersion ? (
diff --git a/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx b/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
index 1090b3f6..06fc0462 100644
--- a/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
+++ b/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
@@ -871,7 +871,7 @@ const CounterAnimationEditorModal = ({
               />
             </div>
 
-            <div className="flex-1 flex gap-[16px] p-[16px] rounded-[10px] bg-elevated shadow-sm min-h-0 items-center">
+            <div className="flex-1 flex gap-[16px] p-[16px] rounded-surface bg-elevated shadow-sm min-h-0 items-center">
               <div className="shrink-0 flex flex-col">
                 <div
                   className="rounded-[8px] bg-inset overflow-hidden"
@@ -882,7 +882,7 @@ const CounterAnimationEditorModal = ({
                   }}
                 >
                   <div
-                    className="relative rounded-[6px] overflow-hidden"
+                    className="relative rounded-md overflow-hidden"
                     style={{
                       width: `${TOTAL_SIZE}px`,
                       height: `${TOTAL_SIZE}px`,
@@ -1094,9 +1094,9 @@ const CounterAnimationEditorModal = ({
             ) : null}
           </div>
 
-          <div className="flex-1 flex flex-col min-w-0 bg-app rounded-[10px] overflow-hidden shadow-inner relative">
+          <div className="flex-1 flex flex-col min-w-0 bg-app rounded-surface overflow-hidden shadow-inner relative">
             <div
-              className="flex-1 min-h-0 flex items-center justify-center relative bg-inset rounded-[10px] cursor-pointer select-none"
+              className="flex-1 min-h-0 flex items-center justify-center relative bg-inset rounded-surface cursor-pointer select-none"
               onPointerDown={handlePreviewPointerDown}
             >
               {previewCss && (
diff --git a/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx b/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx
index b9cbf174..518bc8ea 100644
--- a/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx
+++ b/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx
@@ -137,7 +137,7 @@ const TabCssModal = ({ isOpen, onClose, showAlert }: TabCssModalProps) => {
   return (
     <Modal onClick={handleCancel}>
       <div
-        className="flex flex-col items-center justify-center p-[20px] bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 gap-[19px]"
+        className="flex flex-col items-center justify-center p-[20px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 gap-[19px]"
         onClick={(e) => e.stopPropagation()}
       >
         {/* CSS 사용 여부 토글 */}
@@ -156,7 +156,7 @@ const TabCssModal = ({ isOpen, onClose, showAlert }: TabCssModalProps) => {
               disabled={isLoading || !hasTabCss}
               className={`px-[8px] h-[23px] rounded-md transition-colors duration-fast flex items-center justify-center text-style-4 ${
                 hasTabCss
-                  ? 'bg-danger-muted hover:bg-[rgba(229,72,77,0.2)] active:bg-[rgba(229,72,77,0.26)] text-danger-fg'
+                  ? 'bg-danger-muted hover:bg-danger-muted-hover active:bg-danger-muted-active text-danger-fg'
                   : 'bg-fill-faint text-fg-disabled cursor-not-allowed'
               }`}
             >
diff --git a/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx b/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx
index eb4e9d40..04197855 100644
--- a/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx
+++ b/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx
@@ -64,7 +64,7 @@ const TabNameModal = ({
   return (
     <Modal onClick={onClose}>
       <div
-        className="flex flex-col justify-between w-[280px] p-[20px] gap-[19px] bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3"
+        className="flex flex-col justify-between w-[280px] p-[20px] gap-[19px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="text-style-3 text-fg">{t('tabs.createTitle')}</div>
diff --git a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
index 8209f4d7..90308432 100644
--- a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
+++ b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
@@ -1016,7 +1016,7 @@ const SoundTrimModal = ({
   return (
     <Modal onClick={closeModal}>
       <div
-        className="w-[340px] max-w-[calc(100vw-80px)] flex flex-col bg-fill-faint rounded-[10px] overflow-hidden"
+        className="w-[340px] max-w-[calc(100vw-80px)] flex flex-col bg-fill-faint rounded-surface overflow-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         {/* 헤더 바 */}
diff --git a/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx b/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx
index 2515cd3e..f1f38693 100644
--- a/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx
@@ -782,7 +782,7 @@ const ColorPickerWrapper = ({
     >
       <div
         ref={pickerContainerRef}
-        className="flex flex-col p-[8px] gap-[8px] w-[146px] bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3"
+        className="flex flex-col p-[8px] gap-[8px] w-[146px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
         style={{
           visibility: panelElement && !fixedPosition ? 'hidden' : undefined,
         }}
diff --git a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx
index a01472cc..98473adf 100644
--- a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx
@@ -10,6 +10,9 @@ import FloatingPopup from '../../FloatingPopup';
 import { useLenis } from '@hooks/useLenis';
 import Dropdown from '@components/main/common/Dropdown';
 
+// 팝업 셸 예상 폭 (측정 전 위치 계산용)
+const ESTIMATED_WIDTH = 164;
+
 type FilterOption = {
   value: string;
   label: string;
@@ -21,8 +24,6 @@ interface CommonListPickerPopupProps<T> {
   panelElement?: HTMLElement | null;
   onClose: () => void;
   interactiveRefs?: Array<React.RefObject<HTMLElement>>;
-  widthClass?: string;
-  estimatedWidth?: number;
   estimatedHeight?: number;
   searchQuery: string;
   onSearchQueryChange: (value: string) => void;
@@ -36,7 +37,6 @@ interface CommonListPickerPopupProps<T> {
   isLoading?: boolean;
   loadingText?: string;
   errorText?: string;
-  listHeightClass?: string;
   onAdd: (event: React.MouseEvent<HTMLButtonElement>) => void;
   addLabel: string;
   // 추가 버튼에 앵커된 메뉴가 열릴 때 외부 클릭 판정 제외용
@@ -53,8 +53,6 @@ export default function CommonListPickerPopup<T>({
   panelElement = null,
   onClose,
   interactiveRefs = [],
-  widthClass = 'w-[156px]',
-  estimatedWidth = 164,
   estimatedHeight = 280,
   searchQuery,
   onSearchQueryChange,
@@ -68,7 +66,6 @@ export default function CommonListPickerPopup<T>({
   isLoading = false,
   loadingText = '로딩...',
   errorText = '',
-  listHeightClass = 'h-[120px]',
   onAdd,
   addLabel,
   addButtonRef,
@@ -89,7 +86,7 @@ export default function CommonListPickerPopup<T>({
 
     const panelRect = panelElement.getBoundingClientRect();
     const popupEl = containerRef.current;
-    const popupWidth = popupEl ? popupEl.offsetWidth : estimatedWidth;
+    const popupWidth = popupEl ? popupEl.offsetWidth : ESTIMATED_WIDTH;
     const popupHeight = popupEl ? popupEl.offsetHeight : estimatedHeight;
 
     const gap = 5;
@@ -110,7 +107,7 @@ export default function CommonListPickerPopup<T>({
       if (prev && prev.x === fixedX && prev.y === fixedY) return prev;
       return { x: fixedX, y: fixedY };
     });
-  }, [estimatedHeight, estimatedWidth, panelElement]);
+  }, [estimatedHeight, panelElement]);
 
   useLayoutEffect(() => {
     if (!open) {
@@ -180,7 +177,7 @@ export default function CommonListPickerPopup<T>({
           value={searchQuery}
           onChange={(event) => onSearchQueryChange(event.target.value)}
           placeholder={searchPlaceholder}
-          className="w-full h-[30px] pl-[30px] pr-[10px] bg-inset rounded-[10px] text-fg text-body placeholder-fg-faint focus:shadow-focus-ring outline-none transition-shadow duration-fast"
+          className="w-full h-[30px] pl-[30px] pr-[10px] bg-inset rounded-surface text-fg text-body placeholder-fg-faint focus:shadow-focus-ring outline-none transition-shadow duration-fast"
         />
       </div>
     ) : (
@@ -196,7 +193,7 @@ export default function CommonListPickerPopup<T>({
   // 필터 + 추가 — 같은 재질의 칩 한 쌍. 페이지는 검색과 같은 30 크롬 스케일
   const controlChipClass =
     renderMode === 'page'
-      ? 'w-[30px] h-[30px] rounded-[10px]'
+      ? 'w-[30px] h-[30px] rounded-surface'
       : 'w-[24px] h-[24px] rounded-md';
   const filterAddRow = (
     <div
@@ -211,11 +208,7 @@ export default function CommonListPickerPopup<T>({
             value={filterValue}
             onChange={onFilterChange}
             fullWidth
-            heightClass={renderMode === 'page' ? 'h-[30px]' : 'h-[24px]'}
-            paddingXClass={renderMode === 'page' ? 'px-[10px]' : 'px-[8px]'}
-            roundedClass={
-              renderMode === 'page' ? 'rounded-[10px]' : 'rounded-md'
-            }
+            size={renderMode === 'page' ? 'lg' : 'sm'}
           />
         </div>
       ) : null}
@@ -296,7 +289,7 @@ export default function CommonListPickerPopup<T>({
         {/* 검색 — 리스트와 인접한 프라이머리 컨트롤 */}
         <div className="px-[12px] pb-[12px] shrink-0">{searchInput}</div>
         {/* 리스트 웰 — 리세스드 테이블. 빈 공간도 테이블의 빈 영역으로 읽힘 */}
-        <div className="mx-[12px] bg-inset rounded-[10px] p-[4px] flex-1 min-h-0 flex flex-col">
+        <div className="mx-[12px] bg-inset rounded-surface p-[4px] flex-1 min-h-0 flex flex-col">
           <div
             ref={scrollRef}
             className="flex-1 min-h-0 flex flex-col overflow-y-auto modal-content-scroll dmn-scroll-fade"
@@ -328,7 +321,7 @@ export default function CommonListPickerPopup<T>({
     >
       <div
         ref={containerRef}
-        className={`flex flex-col p-[8px] gap-[8px] ${widthClass} bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3`.trim()}
+        className={`flex flex-col p-[8px] gap-[8px] w-[156px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3`.trim()}
         style={{
           visibility: panelElement && !fixedPosition ? 'hidden' : undefined,
         }}
@@ -339,7 +332,7 @@ export default function CommonListPickerPopup<T>({
         <div className="bg-inset rounded-md p-[4px] flex flex-col gap-[4px]">
           <div
             ref={scrollRef}
-            className={`flex flex-col overflow-y-auto modal-content-scroll dmn-scroll-fade ${listHeightClass}`}
+            className="flex flex-col overflow-y-auto modal-content-scroll dmn-scroll-fade h-[120px]"
           >
             {listInner}
           </div>
diff --git a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
index 9fa0d1de..96b7d7e8 100644
--- a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
@@ -256,8 +256,6 @@ const CounterAnimationPicker = ({
         pageTitle={pageTitle}
         onBack={onBack}
         onClose={handlePickerClose}
-        widthClass="w-[156px]"
-        estimatedWidth={164}
         estimatedHeight={276}
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
diff --git a/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx b/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
index 31e92f70..f097e592 100644
--- a/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
@@ -318,8 +318,6 @@ const FontPicker = ({
         pageTitle={pageTitle}
         onBack={onBack}
         onClose={handlePickerClose}
-        widthClass="w-[156px]"
-        estimatedWidth={164}
         estimatedHeight={280}
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
@@ -497,7 +495,7 @@ const FontPicker = ({
           fallback={
             <Modal onClick={() => setWebFontModal(null)}>
               <div
-                className="w-[640px] max-w-[calc(100vw-80px)] h-[335px] flex items-center justify-center bg-elevated rounded-[10px]"
+                className="w-[640px] max-w-[calc(100vw-80px)] h-[335px] flex items-center justify-center bg-elevated rounded-surface"
                 onClick={(event) => event.stopPropagation()}
               >
                 <p className="text-body leading-[16px] text-fg-muted">
diff --git a/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx b/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx
index 07135246..a1aa340b 100644
--- a/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx
@@ -187,7 +187,7 @@ const ImagePicker = ({
     >
       <div
         ref={pickerContainerRef}
-        className="flex flex-col p-[8px] gap-[8px] w-[172px] bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3"
+        className="flex flex-col p-[8px] gap-[8px] w-[172px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
         style={{
           visibility: panelElement && !fixedPosition ? 'hidden' : undefined,
         }}
diff --git a/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx b/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
index 27308805..15f5e8f8 100644
--- a/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
@@ -206,8 +206,6 @@ const SoundPicker = ({
         pageTitle={pageTitle}
         onBack={onBack}
         onClose={handlePickerClose}
-        widthClass="w-[156px]"
-        estimatedWidth={164}
         estimatedHeight={276}
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
diff --git a/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx b/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
index 00394267..b4a8d944 100644
--- a/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
@@ -264,7 +264,7 @@ const WebFontInputModal = ({
   return (
     <Modal onClick={handleClose}>
       <div
-        className="w-[640px] max-w-[calc(100vw-80px)] flex flex-col bg-fill-faint rounded-[10px] overflow-hidden"
+        className="w-[640px] max-w-[calc(100vw-80px)] flex flex-col bg-fill-faint rounded-surface overflow-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="h-[37px] bg-fill-faint px-[12px] flex items-center justify-between">
diff --git a/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts b/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
index ec360b75..4c0e1560 100644
--- a/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
+++ b/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
@@ -4,11 +4,11 @@ export type PickerRenderMode = 'popup' | 'page';
 // 페이지 행: 인셋 웰(테이블) 내부의 필 행 — 30 컨트롤 스케일, 웰과 동심 라운딩
 export const pickerRowClass = (mode: PickerRenderMode): string =>
   mode === 'page'
-    ? 'w-full h-[30px] px-[8px] rounded-[6px] text-style-4 transition-colors flex items-center gap-[4px] group'
+    ? 'w-full h-[30px] px-[8px] rounded-md text-style-4 transition-colors flex items-center gap-[4px] group'
     : 'w-full h-[24px] px-[8px] rounded-md text-style-4 transition-colors flex items-center gap-[4px] group';
 
 // 행 트레일링 ⋮ 버튼 — 페이지는 28px(30 행 스케일), 팝업은 18px 옵티컬 정렬
 export const pickerMoreButtonClass = (mode: PickerRenderMode): string =>
   mode === 'page'
-    ? 'w-[28px] h-[28px] rounded-[6px] transition-all flex items-center justify-center shrink-0'
+    ? 'w-[28px] h-[28px] rounded-md transition-all flex items-center justify-center shrink-0'
     : 'w-[18px] h-[18px] -mr-[8px] rounded-md transition-all flex items-center justify-center shrink-0';
diff --git a/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx b/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
index 1e63ab17..417a163f 100644
--- a/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
+++ b/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
@@ -458,7 +458,7 @@ const NoteSetting = ({
   return (
     <Modal onClick={onClose}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 p-[20px]"
+        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px]"
         onClick={(e) => e.stopPropagation()}
       >
         {title && <p className="text-fg-muted text-label mb-[10px]">{title}</p>}
diff --git a/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx b/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx
index 96c365b5..26ac5760 100644
--- a/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx
+++ b/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx
@@ -310,12 +310,6 @@ const ShortcutSettingsModal = ({
     setListeningKey((prev) => (prev === key ? null : key));
   };
 
-  // const handleReset = () => {
-  //   setError(null);
-  //   setListeningKey(null);
-  //   setDraft(defaults);
-  // };
-
   const handleSave = async () => {
     const validationError = validate(safeDraft);
     setError(validationError);
@@ -338,7 +332,7 @@ const ShortcutSettingsModal = ({
       }}
     >
       <div
-        className="flex flex-col min-w-[320px] bg-glass-heavy backdrop-blur-[32px] rounded-[14px] shadow-elevation-3 p-[12px]"
+        className="flex flex-col min-w-[320px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[12px]"
         onClick={(event) => event.stopPropagation()}
         onPointerDownCapture={(event) => {
           if (!isListening) return;
@@ -498,16 +492,6 @@ const ShortcutSettingsModal = ({
           >
             {t('shortcutSetting.cancel')}
           </button>
-          {/* <button
-            className="w-[75px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
-            onClick={handleReset}
-            disabled={isListening}
-            style={
-              isListening ? { opacity: 0.6, pointerEvents: "none" } : undefined
-            }
-          >
-            {t("shortcutSetting.reset")}
-          </button> */}
         </div>
       </div>
     </Modal>
diff --git a/src/renderer/components/main/Modal/content/settings/TabList.tsx b/src/renderer/components/main/Modal/content/settings/TabList.tsx
index 00be5a81..c418e9ea 100644
--- a/src/renderer/components/main/Modal/content/settings/TabList.tsx
+++ b/src/renderer/components/main/Modal/content/settings/TabList.tsx
@@ -69,7 +69,7 @@ const TabList = ({ onClose: _onClose }: TabListProps) => {
   };
 
   return (
-    <div className="flex flex-col w-[184px] p-[4px] bg-glass backdrop-blur-[24px] rounded-[10px] shadow-elevation-2">
+    <div className="flex flex-col w-[184px] p-[4px] bg-glass backdrop-blur-[24px] rounded-surface shadow-elevation-2">
       {customTabs.length > 0 && (
         <>
           {/* 섹션 헤더 */}
@@ -87,41 +87,38 @@ const TabList = ({ onClose: _onClose }: TabListProps) => {
                 .reverse()
                 .map((tab) => {
                   const isSelected = selectedKeyType === tab.id;
+                  // 인터랙티브 요소 중첩 금지 — 행 래퍼는 비인터랙티브,
+                  // 선택은 행 전체를 덮는 스트레치드 버튼, 삭제는 형제 button
                   return (
-                    <button
+                    <div
                       key={tab.id}
-                      className={`group w-full min-h-[26px] h-[26px] flex-shrink-0 flex items-center gap-[4px] px-[8px] rounded-[6px] text-body transition-colors duration-fast ${
+                      className={`group relative w-full min-h-[26px] h-[26px] flex-shrink-0 flex items-center gap-[4px] px-[8px] rounded-md text-body cursor-pointer transition-colors duration-fast ${
                         isSelected
                           ? 'bg-surface-active text-fg'
                           : 'text-fg-muted hover:text-fg hover:bg-surface-hover active:bg-surface-active'
                       }`}
-                      onClick={() => handleSelect(tab.id)}
                     >
-                      <span className="flex-1 min-w-0 truncate text-left">
+                      <button
+                        type="button"
+                        aria-label={tab.name}
+                        className="absolute inset-0 rounded-md"
+                        onClick={() => handleSelect(tab.id)}
+                      />
+                      <span className="relative flex-1 min-w-0 truncate text-left pointer-events-none">
                         {tab.name}
                       </span>
                       {isSelected && (
-                        <span
-                          role="button"
-                          tabIndex={0}
+                        <button
+                          type="button"
                           title={t('tabs.delete')}
-                          className="w-[18px] h-[18px] shrink-0 flex items-center justify-center rounded-[4px] text-fg-faint opacity-0 group-hover:opacity-100 hover:text-danger hover:bg-danger-muted transition-all duration-fast"
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            setAskDelete(true);
-                          }}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-                              e.stopPropagation();
-                              setAskDelete(true);
-                            }
-                          }}
+                          aria-label={t('tabs.delete')}
+                          className="relative w-[18px] h-[18px] shrink-0 flex items-center justify-center rounded-[4px] text-fg-faint opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 hover:text-danger hover:bg-danger-muted transition-all duration-fast"
+                          onClick={() => setAskDelete(true)}
                         >
                           <TrashIcon className="w-[10px] h-[10px]" />
-                        </span>
+                        </button>
                       )}
-                    </button>
+                    </div>
                   );
                 })}
             </div>
@@ -133,7 +130,7 @@ const TabList = ({ onClose: _onClose }: TabListProps) => {
 
       {!maxReached && (
         <button
-          className="w-full h-[28px] rounded-[6px] bg-fill hover:bg-fill-hover active:bg-fill-active flex items-center justify-center gap-[6px] text-fg transition-colors duration-fast"
+          className="w-full h-[28px] rounded-md bg-fill hover:bg-fill-hover active:bg-fill-active flex items-center justify-center gap-[6px] text-fg transition-colors duration-fast"
           onClick={() => setShowNameModal(true)}
         >
           <PlusIcon className="w-[9px] h-[9px] shrink-0" />
diff --git a/src/renderer/components/main/Settings.tsx b/src/renderer/components/main/Settings.tsx
index 12813479..07b98e32 100644
--- a/src/renderer/components/main/Settings.tsx
+++ b/src/renderer/components/main/Settings.tsx
@@ -142,7 +142,6 @@ const Settings = ({
   const { checkForUpdates, isChecking } = useUpdateCheck();
 
   const [hoveredKey, setHoveredKey] = useState<string | null>(null);
-  const [isScrollHovered, setIsScrollHovered] = useState<boolean>(false);
   const [isPluginModalOpen, setPluginModalOpen] = useState<boolean>(false);
   const [isDataDeleteModalOpen, setDataDeleteModalOpen] =
     useState<boolean>(false);
@@ -818,11 +817,7 @@ const Settings = ({
     <div className="relative w-full h-full">
       <div
         ref={scrollContainerRef}
-        className={`settings-content-scroll w-full h-full flex flex-col py-[12px] px-[12px] gap-[12px] overflow-y-auto bg-app ${
-          isScrollHovered ? 'show-scrollbar' : ''
-        }`}
-        onMouseEnter={() => setIsScrollHovered(true)}
-        onMouseLeave={() => setIsScrollHovered(false)}
+        className="settings-content-scroll w-full h-full flex flex-col py-[12px] px-[12px] gap-[12px] overflow-y-auto bg-app"
       >
         {/* 설정 */}
         <div className="flex flex-row gap-[12px]">
@@ -877,12 +872,6 @@ const Settings = ({
               >
                 <p className="text-label text-fg">{t('settings.keyCounter')}</p>
                 <div className="flex items-center gap-[8px]">
-                  {/* <button
-                    onClick={handleResetCounters}
-                    className="py-[4px] px-[8px] bg-[#2A2A31] border-[1px] border-[#3A3944] rounded-[7px] text-style-2 text-[#DBDEE8] hover:bg-[#34343c]"
-                  >
-                    {t("settings.counterResetButton")}
-                  </button> */}
                   <Checkbox
                     checked={keyCounterEnabled}
                     onChange={handleKeyCounterToggle}
@@ -1242,7 +1231,7 @@ const Settings = ({
                       : t('update.checkUpdate')}
                   </button>
                   <button
-                    className="inline-flex items-center h-[24px] px-[10px] rounded-md text-body text-danger-fg bg-danger-muted hover:bg-[rgba(229,72,77,0.2)] active:bg-[rgba(229,72,77,0.26)] transition-colors duration-fast"
+                    className="inline-flex items-center h-[24px] px-[10px] rounded-md text-body text-danger-fg bg-danger-muted hover:bg-danger-muted-hover active:bg-danger-muted-active transition-colors duration-fast"
                     onClick={handleResetAll}
                   >
                     {t('settings.resetData')}
diff --git a/src/renderer/components/main/Tool/CanvasTool.tsx b/src/renderer/components/main/Tool/CanvasTool.tsx
index 7f891e70..508bbcc6 100644
--- a/src/renderer/components/main/Tool/CanvasTool.tsx
+++ b/src/renderer/components/main/Tool/CanvasTool.tsx
@@ -107,7 +107,7 @@ const CanvasTool = ({
 
   return (
     <TooltipGroup>
-      <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-[10px] gap-[4px]">
+      <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-surface gap-[4px]">
         {tools.map((toolItem) => (
           <FloatingTooltip
             key={toolItem.key}
diff --git a/src/renderer/components/main/Tool/SettingTool.tsx b/src/renderer/components/main/Tool/SettingTool.tsx
index a3b408f6..41c75d0f 100644
--- a/src/renderer/components/main/Tool/SettingTool.tsx
+++ b/src/renderer/components/main/Tool/SettingTool.tsx
@@ -258,7 +258,7 @@ SettingToolProps) => {
     <div className="flex gap-[8px]">
       {!isSettingsOpen && (
         <TooltipGroup>
-          <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-[10px] gap-[0px]">
+          <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-surface gap-[0px]">
             <FloatingTooltip content={t('tooltip.exportPreset')}>
               <Button icon={<FolderIcon />} onClick={handlePresetSave} />
             </FloatingTooltip>
@@ -315,7 +315,7 @@ SettingToolProps) => {
         </TooltipGroup>
       )}
       <TooltipGroup>
-        <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-[10px] gap-[4px]">
+        <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-surface gap-[4px]">
           <FloatingTooltip
             content={
               isObsModeActive
diff --git a/src/renderer/components/main/Tool/TabTool.tsx b/src/renderer/components/main/Tool/TabTool.tsx
index bab5da89..6b8a354e 100644
--- a/src/renderer/components/main/Tool/TabTool.tsx
+++ b/src/renderer/components/main/Tool/TabTool.tsx
@@ -15,7 +15,7 @@ const TabTool = () => {
 
   return (
     <div className="flex gap-[8px]">
-      <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-[10px] gap-[4px]">
+      <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-surface gap-[4px]">
         {keyTypes.map((keyType) => {
           const num = keyType.replace('key', '');
           const label = t(`mode.button${num}`);
@@ -35,7 +35,7 @@ const TabTool = () => {
       </div>
       <button
         ref={gridButtonRef}
-        className="flex items-center justify-center w-[40px] h-[40px] p-[5px] bg-fill rounded-[10px]"
+        className="flex items-center justify-center w-[40px] h-[40px] p-[5px] bg-fill rounded-surface"
         onClick={() => {
           if (!isBootstrapped) return;
           setIsPopupOpen((prev) => !prev);
diff --git a/src/renderer/components/main/Tool/ToolBar.tsx b/src/renderer/components/main/Tool/ToolBar.tsx
index 3d14bd62..fd02ab24 100644
--- a/src/renderer/components/main/Tool/ToolBar.tsx
+++ b/src/renderer/components/main/Tool/ToolBar.tsx
@@ -52,7 +52,7 @@ const ToolBar = ({
       {isSettingsOpen ? (
         <TooltipGroup>
           <div className="flex gap-[8px]">
-            <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-[10px] gap-[4px]">
+            <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-surface gap-[4px]">
               <FloatingTooltip content={t('tooltip.github')}>
                 <button
                   onClick={() =>
@@ -121,7 +121,7 @@ const TrackSettingButton = ({
 
   return (
     <TooltipGroup>
-      <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-[10px]">
+      <div className="flex items-center h-[40px] p-[5px] bg-fill rounded-surface">
         <FloatingTooltip content={t('tooltip.trackSettings') || '트랙 설정'}>
           <button
             type="button"
diff --git a/src/renderer/components/main/common/Button.tsx b/src/renderer/components/main/common/Button.tsx
deleted file mode 100644
index 6e54db17..00000000
--- a/src/renderer/components/main/common/Button.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-
-type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
-type ButtonSize = 'sm' | 'md';
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-}
-
-const VARIANT_CLASSES: Record<ButtonVariant, string> = {
-  primary:
-    'bg-accent text-accent-fg hover:bg-accent-hover active:bg-accent-active',
-  secondary: 'bg-fill text-fg hover:bg-fill-hover active:bg-fill-active',
-  ghost:
-    'bg-transparent text-fg-muted hover:bg-fill hover:text-fg active:bg-fill-hover',
-  danger:
-    'bg-danger-muted text-danger-fg hover:bg-[rgba(229,72,77,0.2)] active:bg-[rgba(229,72,77,0.26)]',
-};
-
-const SIZE_CLASSES: Record<ButtonSize, string> = {
-  sm: 'h-[24px] px-[10px] text-body rounded-md',
-  md: 'h-[30px] px-[14px] text-label rounded-lg',
-};
-
-const Button = ({
-  variant = 'secondary',
-  size = 'sm',
-  className = '',
-  type = 'button',
-  children,
-  ...rest
-}: ButtonProps) => {
-  return (
-    <button
-      type={type}
-      className={`inline-flex items-center justify-center gap-[6px] select-none whitespace-nowrap transition-colors duration-fast disabled:opacity-40 disabled:pointer-events-none ${VARIANT_CLASSES[variant]} ${SIZE_CLASSES[size]} ${className}`}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-};
-
-export default Button;
diff --git a/src/renderer/components/main/common/Dropdown.tsx b/src/renderer/components/main/common/Dropdown.tsx
index 35462e50..88d41270 100644
--- a/src/renderer/components/main/common/Dropdown.tsx
+++ b/src/renderer/components/main/common/Dropdown.tsx
@@ -20,12 +20,8 @@ interface DropdownProps {
   align?: 'left' | 'center' | 'right';
   /** 트리거/메뉴 너비 고정용 Tailwind 클래스 (예: 'w-[160px]'). 길면 말줄임(...) 처리됨 */
   widthClass?: string;
-  /** 트리거 높이 클래스 (기본 h-[24px]) */
-  heightClass?: string;
-  /** 트리거 수평 패딩 클래스 (기본 px-[8px]) */
-  paddingXClass?: string;
-  /** 트리거 라운딩 클래스 (기본 rounded-md) */
-  roundedClass?: string;
+  /** 트리거 크기 — sm: 24px 크롬(기본), lg: 30px 크롬(패널 페이지) */
+  size?: 'sm' | 'lg';
 }
 
 interface MenuPosition {
@@ -45,9 +41,7 @@ const Dropdown: React.FC<DropdownProps> = ({
   iconTrigger,
   align = 'left',
   widthClass = '',
-  heightClass = 'h-[24px]',
-  paddingXClass = 'px-[8px]',
-  roundedClass = 'rounded-md',
+  size = 'sm',
 }) => {
   const [open, setOpen] = useState(false);
   const [menuPos, setMenuPos] = useState<MenuPosition | null>(null);
@@ -138,7 +132,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           <div
             ref={menuRef}
             data-dmn-popup-submenu="true"
-            className={`fixed flex flex-col p-[4px] gap-[4px] bg-glass backdrop-blur-[24px] rounded-[10px] shadow-elevation-2 z-[60] overflow-x-hidden overflow-y-auto max-h-[200px] tooltip-fade-in ${widthClass}`}
+            className={`fixed flex flex-col p-[4px] gap-[4px] bg-glass backdrop-blur-[24px] rounded-surface shadow-elevation-2 z-[60] overflow-x-hidden overflow-y-auto max-h-[200px] tooltip-fade-in ${widthClass}`}
             style={{
               left: menuPos.left,
               top: menuPos.top,
@@ -156,7 +150,7 @@ const Dropdown: React.FC<DropdownProps> = ({
                 <button
                   key={opt.value}
                   type="button"
-                  className={`text-left w-full h-[24px] px-[8px] rounded-[6px] text-body transition-colors duration-fast flex items-center ${
+                  className={`text-left w-full h-[24px] px-[8px] rounded-md text-body transition-colors duration-fast flex items-center ${
                     value === opt.value
                       ? 'bg-surface-active text-fg pointer-events-none'
                       : 'text-fg-muted hover:bg-surface-hover hover:text-fg'
@@ -196,7 +190,11 @@ const Dropdown: React.FC<DropdownProps> = ({
         <button
           ref={buttonRef}
           type="button"
-          className={`flex box-border items-center justify-between ${heightClass} ${paddingXClass} bg-fill hover:bg-fill-hover ${roundedClass} text-fg text-body transition-colors duration-fast ${
+          className={`flex box-border items-center justify-between ${
+            size === 'lg'
+              ? 'h-[30px] px-[10px] rounded-surface'
+              : 'h-[24px] px-[8px] rounded-md'
+          } bg-fill hover:bg-fill-hover text-fg text-body transition-colors duration-fast ${
             open ? 'shadow-focus-ring' : ''
           } ${fullWidth ? 'w-full' : ''} ${widthClass}`}
           onClick={toggleOpen}
diff --git a/src/renderer/components/main/common/IconButton.tsx b/src/renderer/components/main/common/IconButton.tsx
deleted file mode 100644
index 75f111e0..00000000
--- a/src/renderer/components/main/common/IconButton.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-type IconButtonSize = 'sm' | 'md';
-
-interface IconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: IconButtonSize;
-  /** 토글형 버튼의 선택 상태 */
-  selected?: boolean;
-}
-
-const SIZE_CLASSES: Record<IconButtonSize, string> = {
-  sm: 'w-[24px] h-[24px] rounded-md',
-  md: 'w-[28px] h-[28px] rounded-md',
-};
-
-const IconButton = ({
-  size = 'sm',
-  selected = false,
-  className = '',
-  type = 'button',
-  children,
-  ...rest
-}: IconButtonProps) => {
-  return (
-    <button
-      type={type}
-      className={`inline-flex items-center justify-center shrink-0 select-none transition-colors duration-fast disabled:opacity-40 disabled:pointer-events-none ${
-        selected
-          ? 'bg-surface-active text-fg'
-          : 'text-fg-muted hover:bg-fill hover:text-fg active:bg-fill-hover'
-      } ${SIZE_CLASSES[size]} ${className}`}
-      {...rest}
-    >
-      {children}
-    </button>
-  );
-};
-
-export default IconButton;
diff --git a/src/renderer/components/main/common/Input.tsx b/src/renderer/components/main/common/Input.tsx
deleted file mode 100644
index 30934d2c..00000000
--- a/src/renderer/components/main/common/Input.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { forwardRef } from 'react';
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  /** 텍스트 정렬 (좌표·수치 입력은 center 권장) */
-  align?: 'left' | 'center';
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ align = 'left', className = '', ...rest }, ref) => {
-    return (
-      <input
-        ref={ref}
-        className={`h-[24px] px-[8px] bg-inset rounded-md text-body text-fg placeholder:text-fg-faint transition-shadow duration-fast focus:shadow-focus-ring disabled:opacity-40 ${
-          align === 'center' ? 'text-center' : ''
-        } ${className}`}
-        {...rest}
-      />
-    );
-  },
-);
-
-Input.displayName = 'Input';
-
-export default Input;
diff --git a/src/renderer/components/main/common/Radio.tsx b/src/renderer/components/main/common/Radio.tsx
deleted file mode 100644
index 61ecdee5..00000000
--- a/src/renderer/components/main/common/Radio.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-interface RadioProps {
-  value: string;
-  name: string;
-  checked: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  children: React.ReactNode;
-}
-
-const Radio = ({ value, name, checked, onChange, children }: RadioProps) => {
-  return (
-    <label className="flex items-center cursor-pointer group">
-      <input
-        type="radio"
-        name={name}
-        value={value}
-        className="hidden"
-        checked={checked}
-        onChange={onChange}
-      />
-      <span
-        className={`w-[16px] h-[16px] inline-block mr-[8px] rounded-full border flex-shrink-0 relative transition-colors duration-fast ${
-          checked
-            ? 'border-accent'
-            : 'border-line-strong group-hover:border-fg-faint'
-        }`}
-      >
-        <span
-          className={`absolute inset-0 rounded-full transition-all duration-fast ease-out-expo ${
-            checked ? 'bg-accent scale-[0.5]' : 'bg-transparent scale-[0.3]'
-          }`}
-        />
-      </span>
-      <span className="text-label text-fg">{children}</span>
-    </label>
-  );
-};
-
-export default Radio;
diff --git a/src/renderer/components/main/common/TabSwitch.tsx b/src/renderer/components/main/common/TabSwitch.tsx
index 4a636ef2..40ae6115 100644
--- a/src/renderer/components/main/common/TabSwitch.tsx
+++ b/src/renderer/components/main/common/TabSwitch.tsx
@@ -26,7 +26,7 @@ const TabSwitch = ({
 
   return (
     <div
-      className={`relative flex w-full h-[30px] bg-inset rounded-[10px] items-center p-[2px] ${
+      className={`relative flex w-full h-[30px] bg-inset rounded-surface items-center p-[2px] ${
         className ?? ''
       }`}
     >
diff --git a/src/renderer/hooks/Grid/useGridKeyboard.ts b/src/renderer/hooks/Grid/useGridKeyboard.ts
index 372b0410..76669926 100644
--- a/src/renderer/hooks/Grid/useGridKeyboard.ts
+++ b/src/renderer/hooks/Grid/useGridKeyboard.ts
@@ -161,8 +161,9 @@ export function useGridKeyboard({
         return;
       }
 
-      // Escape 키로 선택 해제
+      // Escape 키로 선택 해제 — 상위 레이어(메뉴·패널 페이지)가 소비했으면 양보
       if (e.key === 'Escape') {
+        if (e.defaultPrevented) return;
         clearSelection();
         return;
       }
diff --git a/src/renderer/hooks/useLenis.ts b/src/renderer/hooks/useLenis.ts
index bc02241b..ea304423 100644
--- a/src/renderer/hooks/useLenis.ts
+++ b/src/renderer/hooks/useLenis.ts
@@ -48,7 +48,6 @@ const easeOutExpo = (t: number): number => {
 export const useLenis = (options: UseLenisOptions = {}) => {
   const [wrapper, setWrapper] = useState<HTMLElement | null>(null);
   const wrapperRef = useRef<HTMLElement | null>(null);
-  const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const lenisRef = useRef<Lenis | null>(null);
   const onScrollRef = useRef<(() => void) | undefined>(options.onScroll);
 
@@ -74,14 +73,6 @@ export const useLenis = (options: UseLenisOptions = {}) => {
   useEffect(() => {
     if (!wrapper) return;
 
-    const computeScrollbarWidth = () => {
-      // offsetWidth는 스크롤바 포함, clientWidth는 스크롤바 제외
-      const width = Math.max(0, wrapper.offsetWidth - wrapper.clientWidth);
-      setScrollbarWidth((prev) => (prev === width ? prev : width));
-    };
-
-    computeScrollbarWidth();
-
     // 기존 Lenis 인스턴스 정리
     if (lenisRef.current) {
       lenisRef.current.destroy();
@@ -120,21 +111,9 @@ export const useLenis = (options: UseLenisOptions = {}) => {
     };
     rafId = requestAnimationFrame(raf);
 
-    // 스크롤바 너비 변화를 감지 (OS/시스템 설정에 따라 스크롤바가 레이아웃 폭을 차지할 수 있음)
-    let ro: ResizeObserver | null = null;
-    const onResize = () => computeScrollbarWidth();
-    if (typeof ResizeObserver !== 'undefined') {
-      ro = new ResizeObserver(onResize);
-      ro.observe(wrapper);
-    } else {
-      window.addEventListener('resize', onResize);
-    }
-
     // 클린업
     return () => {
       cancelAnimationFrame(rafId);
-      if (ro) ro.disconnect();
-      else window.removeEventListener('resize', onResize);
       lenis.off('scroll', handleLenisScroll);
       lenis.destroy();
       lenisRef.current = null;
@@ -146,7 +125,5 @@ export const useLenis = (options: UseLenisOptions = {}) => {
     /** 스크롤 컨테이너 DOM 요소 (state로 관리됨) */
     wrapperElement: wrapper,
     lenisInstance: lenisRef,
-    /** wrapper의 실제 스크롤바 너비(px). overlay 스크롤바인 경우 0일 수 있음 */
-    scrollbarWidth,
   };
 };
diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css
index 530db8e5..4cfe9bc9 100644
--- a/src/renderer/styles/global.css
+++ b/src/renderer/styles/global.css
@@ -2,31 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* 레거시 컴포넌트 클래스 — ui/ 프리미티브로 흡수 후 제거 예정 */
-@layer components {
-  .icon-btn {
-    @apply w-[24px] h-[24px] flex items-center justify-center hover:bg-surface-hover rounded-md transition-colors;
-  }
-  .input-field {
-    @apply text-center h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-[11px] text-fg;
-  }
-  .btn-danger {
-    @apply bg-danger-muted rounded-md text-danger-fg;
-  }
-  .btn-danger:hover {
-    background: rgba(229, 72, 77, 0.2);
-  }
-  .btn-danger:active {
-    background: rgba(229, 72, 77, 0.26);
-  }
-  .btn-secondary {
-    @apply bg-surface hover:bg-surface-hover active:bg-surface-active rounded-md text-fg;
-  }
-  .btn-default {
-    @apply px-[10px] h-[23px] bg-surface hover:bg-surface-hover active:bg-surface-active rounded-md text-[11px];
-  }
-}
-
 /* 기본 서체 — 가변 웨이트 셀프호스팅 */
 @font-face {
   font-family: 'Pretendard Variable';
diff --git a/src/renderer/styles/main.css b/src/renderer/styles/main.css
index 3cd8635c..63cab15d 100644
--- a/src/renderer/styles/main.css
+++ b/src/renderer/styles/main.css
@@ -16,70 +16,10 @@ body.dmn-custom-cursor * {
 
 /* ===== 스크롤바 ===== */
 
-.settings-scroll {
-  overscroll-behavior: contain;
-}
-
-.settings-scroll::-webkit-scrollbar {
-  width: 6px;
-  background: transparent;
-}
-
-.settings-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.settings-scroll::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 3px;
-}
-
-.settings-scroll.show-scrollbar::-webkit-scrollbar-thumb,
-.settings-scroll:hover::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.16);
-}
-
-.settings-scroll.show-scrollbar::-webkit-scrollbar-thumb:hover,
-.settings-scroll:hover::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.24);
-}
-
-.settings-scroll.show-scrollbar::-webkit-scrollbar-thumb:active,
-.settings-scroll:hover::-webkit-scrollbar-thumb:active {
-  background: rgba(255, 255, 255, 0.32);
-}
-
 .listpopup-scroll {
   overscroll-behavior: contain;
 }
 
-.listpopup-scroll::-webkit-scrollbar {
-  width: 4px;
-  background: transparent;
-}
-
-.listpopup-scroll::-webkit-scrollbar-track {
-  background: transparent;
-  margin: 4px 0;
-}
-
-.listpopup-scroll::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.14);
-  border-radius: 4px;
-}
-
-.listpopup-scroll:hover::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.listpopup-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.26);
-}
-
-.listpopup-scroll::-webkit-scrollbar-thumb:active {
-  background: rgba(255, 255, 255, 0.32);
-}
-
 .modal-content-scroll {
   overscroll-behavior: contain;
   /* 네이티브 동작 유지 */
@@ -88,20 +28,8 @@ body.dmn-custom-cursor * {
   contain: paint;
 }
 
-.modal-content-scroll::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-  background: transparent;
-}
-
-.modal-content-scroll::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 2px;
-}
-
-.modal-content-scroll::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.14);
-  border-radius: 2px;
+.settings-content-scroll {
+  overscroll-behavior: contain;
 }
 
 /* 스크롤바 전역 숨김 — 위치 단서는 스크롤 엣지 페이드 마스크가 대신함 */
@@ -113,42 +41,6 @@ body.dmn-custom-cursor * {
   display: none !important;
 }
 
-.properties-panel-overlay-bar {
-  display: none !important;
-}
-
-/* 설정 스크롤 - 호버 시에만 표시 */
-.settings-content-scroll {
-  overscroll-behavior: contain;
-}
-
-.settings-content-scroll::-webkit-scrollbar {
-  width: 4px;
-  background: transparent;
-}
-
-.settings-content-scroll::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 2px;
-}
-
-.settings-content-scroll::-webkit-scrollbar-thumb {
-  background: transparent;
-  border-radius: 2px;
-}
-
-.settings-content-scroll.show-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.14);
-}
-
-.settings-content-scroll.show-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.settings-content-scroll.show-scrollbar::-webkit-scrollbar-thumb:active {
-  background: rgba(255, 255, 255, 0.26);
-}
-
 /* PropertiesPanel 오버레이 스크롤바 (레이아웃 수축 방지) */
 .properties-panel-overlay-scroll {
   position: relative;
@@ -209,42 +101,6 @@ body.dmn-custom-cursor * {
   }
 }
 
-.properties-panel-overlay-viewport::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.properties-panel-overlay-bar {
-  position: absolute;
-  top: 0;
-  right: 0px;
-  bottom: 0;
-  width: 4px;
-  opacity: 0;
-  transition: opacity var(--ui-duration-fast) var(--ui-ease-out);
-  pointer-events: none;
-}
-
-.properties-panel-overlay-scroll:hover .properties-panel-overlay-bar {
-  opacity: 1;
-}
-
-.properties-panel-overlay-thumb {
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, 0.14);
-  border-radius: 2px;
-}
-
-.properties-panel-overlay-scroll:hover .properties-panel-overlay-thumb {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.properties-panel-overlay-scroll:active .properties-panel-overlay-thumb {
-  background: rgba(255, 255, 255, 0.26);
-}
-
 /* ===== 등장 모션 ===== */
 
 /* 화면 전환 (캔버스 ↔ 설정) */
@@ -285,8 +141,7 @@ body.dmn-custom-cursor * {
   inset: 0;
   display: flex;
   flex-direction: column;
-  transition:
-    opacity var(--ui-duration-page) var(--ui-ease-page),
+  transition: opacity var(--ui-duration-page) var(--ui-ease-page),
     transform var(--ui-duration-page) var(--ui-ease-page),
     filter var(--ui-duration-page) var(--ui-ease-page);
 }
@@ -330,10 +185,12 @@ body.dmn-custom-cursor * {
 @keyframes modalScale {
   from {
     transform: scale(0.97);
+    opacity: 0;
   }
 
   to {
     transform: scale(1);
+    opacity: 1;
   }
 }
 
@@ -341,14 +198,17 @@ body.dmn-custom-cursor * {
   animation: modalScale var(--ui-duration-base) var(--ui-ease-out) forwards;
 }
 
-@keyframes modalFade {
-  to {
-    opacity: 1;
+/* 틴트와 블러를 한 키프레임에서 보간 — 종료 상태는 클래스 자연값 */
+@keyframes modalScrim {
+  from {
+    background-color: transparent;
+    -webkit-backdrop-filter: blur(0px);
+    backdrop-filter: blur(0px);
   }
 }
 
-.animate-modal-fade {
-  animation: modalFade var(--ui-duration-fast) var(--ui-ease-out) forwards;
+.animate-modal-scrim {
+  animation: modalScrim var(--ui-duration-fast) var(--ui-ease-out) both;
 }
 
 /* ===== ColorPicker ===== */
@@ -525,16 +385,12 @@ body.dmn-custom-cursor * {
 @media (prefers-reduced-motion: reduce) {
   .tooltip-fade-in,
   .animate-modal-scale,
-  .animate-modal-fade,
+  .animate-modal-scrim,
   .view-enter,
   .view-fade {
     animation: none;
   }
 
-  .animate-modal-fade {
-    opacity: 1;
-  }
-
   .dmn-panel-page {
     transition: none;
   }
diff --git a/src/renderer/styles/tokens.css b/src/renderer/styles/tokens.css
index 995881a2..0f730e5f 100644
--- a/src/renderer/styles/tokens.css
+++ b/src/renderer/styles/tokens.css
@@ -57,12 +57,19 @@
   --ui-danger-hover: #ec5d62;
   --ui-danger-active: #d93b40;
   --ui-danger-muted: rgba(229, 72, 77, 0.14);
+  --ui-danger-muted-hover: rgba(229, 72, 77, 0.2);
+  --ui-danger-muted-active: rgba(229, 72, 77, 0.26);
   --ui-danger-fg: #ff9599;
   --ui-success: #3dbe7b;
   --ui-success-muted: rgba(61, 190, 123, 0.14);
   --ui-warning: #f0b429;
   --ui-warning-muted: rgba(240, 180, 41, 0.14);
 
+  /* 라운딩 — 3단: 표면 안 요소 6 < 1차 표면 10 < 모달 셸 14 */
+  --ui-radius-inner: 6px;
+  --ui-radius-surface: 10px;
+  --ui-radius-modal: 14px;
+
   /* 모션 */
   --ui-duration-fast: 120ms;
   --ui-duration-base: 180ms;
diff --git a/src/renderer/utils/plugin/pluginComponents.ts b/src/renderer/utils/plugin/pluginComponents.ts
index 0c59677a..2a5931b4 100644
--- a/src/renderer/utils/plugin/pluginComponents.ts
+++ b/src/renderer/utils/plugin/pluginComponents.ts
@@ -278,7 +278,7 @@ export function createDropdown(options: DropdownOptions): string {
   const itemsHtml = items
     .map(
       (opt) => `
-    <button type="button" class="text-left w-full h-[24px] px-[8px] rounded-[6px] text-body transition-colors duration-fast flex items-center ${
+    <button type="button" class="text-left w-full h-[24px] px-[8px] rounded-md text-body transition-colors duration-fast flex items-center ${
       selected === opt.value
         ? 'bg-surface-active text-fg pointer-events-none'
         : 'text-fg-muted hover:bg-surface-hover hover:text-fg'
@@ -300,7 +300,7 @@ export function createDropdown(options: DropdownOptions): string {
         <path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
-    <div class="hidden absolute left-0 top-[28px] flex-col p-[4px] gap-[4px] bg-glass backdrop-blur-[24px] rounded-[10px] shadow-elevation-2 z-20 overflow-x-hidden overflow-y-auto tooltip-fade-in" data-dropdown-menu>
+    <div class="hidden absolute left-0 top-[28px] flex-col p-[4px] gap-[4px] bg-glass backdrop-blur-[24px] rounded-surface shadow-elevation-2 z-20 overflow-x-hidden overflow-y-auto tooltip-fade-in" data-dropdown-menu>
       ${itemsHtml}
     </div>
   </div>`;
diff --git a/tailwind.config.js b/tailwind.config.js
index 47c5d589..578de8a0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,156 +2,160 @@
 
 // 색·모션·그림자 값의 단일 소스는 src/renderer/styles/tokens.css
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx,html}"],
+  content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
   theme: {
     extend: {
+      borderRadius: {
+        md: 'var(--ui-radius-inner)',
+        surface: 'var(--ui-radius-surface)',
+        modal: 'var(--ui-radius-modal)',
+      },
       colors: {
-        app: "var(--ui-bg-app)",
-        panel: "var(--ui-bg-panel)",
+        app: 'var(--ui-bg-app)',
+        panel: 'var(--ui-bg-panel)',
         surface: {
-          DEFAULT: "var(--ui-bg-surface)",
-          hover: "var(--ui-bg-surface-hover)",
-          active: "var(--ui-bg-surface-active)",
-        },
-        elevated: "var(--ui-bg-elevated)",
-        inset: "var(--ui-bg-inset)",
-        glass: "var(--ui-glass)",
-        "glass-heavy": "var(--ui-glass-heavy)",
-        "glass-dim": "var(--ui-glass-dim)",
-        "glass-panel": "var(--ui-glass-panel)",
+          DEFAULT: 'var(--ui-bg-surface)',
+          hover: 'var(--ui-bg-surface-hover)',
+          active: 'var(--ui-bg-surface-active)',
+        },
+        elevated: 'var(--ui-bg-elevated)',
+        inset: 'var(--ui-bg-inset)',
+        glass: 'var(--ui-glass)',
+        'glass-heavy': 'var(--ui-glass-heavy)',
+        'glass-dim': 'var(--ui-glass-dim)',
+        'glass-panel': 'var(--ui-glass-panel)',
         line: {
-          DEFAULT: "var(--ui-line)",
-          strong: "var(--ui-line-strong)",
+          DEFAULT: 'var(--ui-line)',
+          strong: 'var(--ui-line-strong)',
         },
         fill: {
-          DEFAULT: "var(--ui-fill)",
-          hover: "var(--ui-fill-hover)",
-          active: "var(--ui-fill-active)",
-          faint: "var(--ui-fill-faint)",
+          DEFAULT: 'var(--ui-fill)',
+          hover: 'var(--ui-fill-hover)',
+          active: 'var(--ui-fill-active)',
+          faint: 'var(--ui-fill-faint)',
         },
         fg: {
-          DEFAULT: "var(--ui-fg)",
-          muted: "var(--ui-fg-muted)",
-          faint: "var(--ui-fg-faint)",
-          disabled: "var(--ui-fg-disabled)",
+          DEFAULT: 'var(--ui-fg)',
+          muted: 'var(--ui-fg-muted)',
+          faint: 'var(--ui-fg-faint)',
+          disabled: 'var(--ui-fg-disabled)',
         },
         accent: {
-          DEFAULT: "var(--ui-accent)",
-          hover: "var(--ui-accent-hover)",
-          active: "var(--ui-accent-active)",
-          muted: "var(--ui-accent-muted)",
-          fg: "var(--ui-accent-fg)",
-          deep: "var(--ui-accent-deep)",
-          "deep-hover": "var(--ui-accent-deep-hover)",
-          "deep-active": "var(--ui-accent-deep-active)",
+          DEFAULT: 'var(--ui-accent)',
+          hover: 'var(--ui-accent-hover)',
+          active: 'var(--ui-accent-active)',
+          muted: 'var(--ui-accent-muted)',
+          fg: 'var(--ui-accent-fg)',
+          deep: 'var(--ui-accent-deep)',
+          'deep-hover': 'var(--ui-accent-deep-hover)',
+          'deep-active': 'var(--ui-accent-deep-active)',
         },
         danger: {
-          DEFAULT: "var(--ui-danger)",
-          hover: "var(--ui-danger-hover)",
-          active: "var(--ui-danger-active)",
-          muted: "var(--ui-danger-muted)",
-          fg: "var(--ui-danger-fg)",
+          DEFAULT: 'var(--ui-danger)',
+          hover: 'var(--ui-danger-hover)',
+          active: 'var(--ui-danger-active)',
+          muted: 'var(--ui-danger-muted)',
+          'muted-hover': 'var(--ui-danger-muted-hover)',
+          'muted-active': 'var(--ui-danger-muted-active)',
+          fg: 'var(--ui-danger-fg)',
         },
         success: {
-          DEFAULT: "var(--ui-success)",
-          muted: "var(--ui-success-muted)",
+          DEFAULT: 'var(--ui-success)',
+          muted: 'var(--ui-success-muted)',
         },
         warning: {
-          DEFAULT: "var(--ui-warning)",
-          muted: "var(--ui-warning-muted)",
+          DEFAULT: 'var(--ui-warning)',
+          muted: 'var(--ui-warning-muted)',
         },
       },
       fontFamily: {
         sans: [
-          "Pretendard Variable",
-          "Pretendard",
-          "-apple-system",
-          "BlinkMacSystemFont",
-          "system-ui",
-          "Segoe UI",
-          "sans-serif",
+          'Pretendard Variable',
+          'Pretendard',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'system-ui',
+          'Segoe UI',
+          'sans-serif',
         ],
       },
       transitionDuration: {
-        fast: "120ms",
-        base: "180ms",
-        slow: "240ms",
+        fast: '120ms',
+        base: '180ms',
+        slow: '240ms',
       },
       transitionTimingFunction: {
-        "out-expo": "cubic-bezier(0.16, 1, 0.3, 1)",
-        "in-out-smooth": "cubic-bezier(0.65, 0, 0.35, 1)",
+        'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
+        'in-out-smooth': 'cubic-bezier(0.65, 0, 0.35, 1)',
       },
       boxShadow: {
-        "elevation-1": "var(--ui-shadow-1)",
-        "elevation-2": "var(--ui-shadow-2)",
-        "elevation-3": "var(--ui-shadow-3)",
-        "elevation-chrome": "var(--ui-shadow-chrome)",
-        "elevation-panel": "var(--ui-shadow-panel)",
-        "focus-ring": "var(--ui-focus-ring)",
+        'elevation-1': 'var(--ui-shadow-1)',
+        'elevation-2': 'var(--ui-shadow-2)',
+        'elevation-3': 'var(--ui-shadow-3)',
+        'elevation-chrome': 'var(--ui-shadow-chrome)',
+        'elevation-panel': 'var(--ui-shadow-panel)',
+        'focus-ring': 'var(--ui-focus-ring)',
       },
     },
   },
   plugins: [
     function ({ addUtilities }) {
       addUtilities({
-        ".all-unset": {
-          all: "unset",
-        },
         // 타이포그래피 스케일 — 위계는 크기+웨이트+행간 세트로만 표현
-        ".text-caption": {
-          fontSize: "11px",
-          lineHeight: "16px",
-          letterSpacing: "0.01em",
-          fontWeight: "500",
-        },
-        ".text-body": {
-          fontSize: "12px",
-          lineHeight: "18px",
-          letterSpacing: "0",
-          fontWeight: "500",
-        },
-        ".text-label": {
-          fontSize: "13px",
-          lineHeight: "18px",
-          letterSpacing: "0",
-          fontWeight: "500",
-        },
-        ".text-title": {
-          fontSize: "14px",
-          lineHeight: "20px",
-          letterSpacing: "-0.01em",
-          fontWeight: "600",
-        },
-        ".text-heading": {
-          fontSize: "16px",
-          lineHeight: "22px",
-          letterSpacing: "-0.014em",
-          fontWeight: "700",
+        '.text-caption': {
+          fontSize: '11px',
+          lineHeight: '16px',
+          letterSpacing: '0.01em',
+          fontWeight: '500',
+        },
+        '.text-body': {
+          fontSize: '12px',
+          lineHeight: '18px',
+          letterSpacing: '0',
+          fontWeight: '500',
+        },
+        '.text-label': {
+          fontSize: '13px',
+          lineHeight: '18px',
+          letterSpacing: '0',
+          fontWeight: '500',
+        },
+        '.text-title': {
+          fontSize: '14px',
+          lineHeight: '20px',
+          letterSpacing: '-0.01em',
+          fontWeight: '600',
+        },
+        '.text-heading': {
+          fontSize: '16px',
+          lineHeight: '22px',
+          letterSpacing: '-0.014em',
+          fontWeight: '700',
         },
         // 레거시 별칭 — 마이그레이션 완료 후 제거
-        ".text-style-1": {
-          fontSize: "12px",
-          lineHeight: "18px",
-          letterSpacing: "0",
-          fontWeight: "500",
-        },
-        ".text-style-2": {
-          fontSize: "13px",
-          lineHeight: "18px",
-          letterSpacing: "0",
-          fontWeight: "500",
-        },
-        ".text-style-3": {
-          fontSize: "14px",
-          lineHeight: "20px",
-          letterSpacing: "0",
-          fontWeight: "500",
-        },
-        ".text-style-4": {
-          fontSize: "14px",
-          lineHeight: "20px",
-          letterSpacing: "0",
-          fontWeight: "500",
+        '.text-style-1': {
+          fontSize: '12px',
+          lineHeight: '18px',
+          letterSpacing: '0',
+          fontWeight: '500',
+        },
+        '.text-style-2': {
+          fontSize: '13px',
+          lineHeight: '18px',
+          letterSpacing: '0',
+          fontWeight: '500',
+        },
+        '.text-style-3': {
+          fontSize: '14px',
+          lineHeight: '20px',
+          letterSpacing: '0',
+          fontWeight: '500',
+        },
+        '.text-style-4': {
+          fontSize: '14px',
+          lineHeight: '20px',
+          letterSpacing: '0',
+          fontWeight: '500',
         },
       });
     },

From 255bcdc691f9d277dfb7e16e937637cc9ca00316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sat, 11 Jul 2026 20:43:16 +0900
Subject: [PATCH 02/17] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=88=A8=EA=B9=80=20=EB=B3=B5=EA=B5=AC=20=EB=B0=8F=20=ED=94=BC?=
 =?UTF-8?q?=EC=BB=A4=C2=B7=EB=AA=A8=EB=8B=AC=20=EC=83=81=ED=98=B8=EC=9E=91?=
 =?UTF-8?q?=EC=9A=A9=20=EC=A0=95=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사운드 숨김:
- SoundLibraryEntry.hidden 신설, 구 enabled 키는 로드 시 raw JSON 단계에서
  hidden으로 역변환 후 재영속 (멱등, 마이그레이션 테스트 4종)
- sound_set_hidden 커맨드 + 구 계약 호환 sound_set_enabled 별칭
- 피커 행 우클릭/⋮ 메뉴에 숨기기·숨김 해제 (내장 사운드 포함),
  필터에 '숨긴 사운드' 추가 — 기본 뷰에서는 숨김 제외
- 재생 경로 미연결: 할당된 키음은 숨겨도 계속 재생
- i18n 5로케일, dmn.sound API 문서 신규 (en/ko)

피커 페이지 전용화:
- CommonListPickerPopup → CommonListPickerPage 개명, 죽은 플로팅 팝업
  분기·위치 계산·no-op prop 제거 (피커 3종, 트리거 8곳)
- ⋮ 버튼 -mr-8 정렬 사각형으로 아이콘 시각 인셋을 텍스트와 8px 대칭,
  카운터 애니메이션 ⋮ 호버를 색상 전환으로 통일

모달 스크롤 그림자 현대화:
- Alert·UnifiedKeySetting·ManagerModalLayout의 JS 그림자 계산을
  dmn-scroll-fade 마스크로 교체, scrollShadow 유틸 삭제
- 높이 애니메이션은 콘텐츠 ResizeObserver만 남기고 보존

레이어·토큰:
- z-계층 규칙 편입: 서브메뉴 10001→60, !z-10000 오버라이드 제거 (본체 40)
- --ui-selection* 토큰 신설, 캔버스 선택 크롬(핸들·마퀴·가이드)의
  블루 리터럴 11곳을 바이올렛으로 교체
- Escape 소유권 완성: 드롭다운·서브메뉴·플로팅 피커가 각자 소비해
  서브메뉴 → 메뉴 → 페이지 → 선택 해제 순으로 한 겹씩 닫힘
- 서브메뉴 위치 추정치(160) 대신 실측 배치, 패널 헤더 aria-label 보강,
  useLenis 미사용 onScroll 제거, clippy 경고 전면 해소
---
 docs/content/en/api-reference/_meta.js        |   1 +
 docs/content/en/api-reference/sound/page.mdx  | 102 ++++++
 docs/content/ko/api-reference/_meta.js        |   1 +
 docs/content/ko/api-reference/sound/page.mdx  | 102 ++++++
 src-tauri/build.rs                            |   5 +-
 src-tauri/gen/schemas/acl-manifests.json      |   2 +-
 src-tauri/permissions/dmnote-allow-all.json   |   2 +
 src-tauri/src/audio/engine.rs                 |   2 +-
 src-tauri/src/commands/keys/sound.rs          |  72 ++++
 src-tauri/src/cursor.rs                       |   2 +-
 src-tauri/src/keyboard/daemon/mod.rs          |   2 +-
 src-tauri/src/main.rs                         |   6 +-
 src-tauri/src/models/mod.rs                   |   5 +-
 src-tauri/src/state/app_state.rs              |   7 +-
 src-tauri/src/state/builtin_sounds.rs         |   6 +
 src-tauri/src/state/migration.rs              | 144 +++++++-
 src/renderer/api/modules/resourceApi.ts       |  11 +
 .../components/main/Grid/PropertiesPanel.tsx  |   1 +
 .../PluginSettingsPanelView.tsx               |   1 +
 .../batch/BatchCounterTabContent.tsx          |  12 +-
 .../batch/BatchSelectionPanel.tsx             |  12 +
 .../batch/BatchStyleTabContent.tsx            |  10 -
 .../Grid/PropertiesPanel/layer/LayerPanel.tsx |   4 +
 .../PropertiesPanel/layer/LayerTabContent.tsx |   1 -
 .../single/CounterTabContent.tsx              |  10 -
 .../single/SingleSelectionPanel.tsx           |  10 +
 .../single/StyleTabContent.tsx                |  10 -
 .../components/main/Grid/core/Grid.tsx        |   2 +-
 .../main/Grid/handles/GroupResizeHandles.tsx  |   6 +-
 .../main/Grid/handles/ResizeHandles.tsx       |   4 +-
 .../Grid/overlays/MarqueeSelectionOverlay.tsx |   4 +-
 .../main/Grid/overlays/SmartGuidesOverlay.tsx |   8 +-
 .../components/main/Modal/FloatingPopup.tsx   |  25 +-
 .../components/main/Modal/ListPopup.tsx       |  80 ++--
 .../main/Modal/ManagerModalLayout.tsx         | 100 ++---
 .../main/Modal/content/dialogs/Alert.tsx      |  62 +---
 .../content/dialogs/UnifiedKeySetting.tsx     | 114 ++----
 .../content/pickers/CommonListPickerPage.tsx  | 188 ++++++++++
 .../content/pickers/CommonListPickerPopup.tsx | 343 ------------------
 .../pickers/CounterAnimationPicker.tsx        |  39 +-
 .../main/Modal/content/pickers/FontPicker.tsx |  36 +-
 .../Modal/content/pickers/SoundPicker.tsx     | 158 ++++----
 .../Modal/content/pickers/pickerRowClass.ts   |  20 +-
 .../components/main/common/Dropdown.tsx       |  12 +
 .../components/shared/PluginElement.tsx       |   1 -
 src/renderer/hooks/useLenis.ts                |  18 -
 src/renderer/locales/en.json                  |   4 +
 src/renderer/locales/ko.json                  |   4 +
 src/renderer/locales/ru.json                  |   4 +
 src/renderer/locales/zh-Hant.json             |   4 +
 src/renderer/locales/zh-cn.json               |   4 +
 src/renderer/styles/tokens.css                |   7 +
 src/renderer/utils/grid/scrollShadow.ts       |  90 -----
 src/types/plugin/api.ts                       |  23 ++
 54 files changed, 951 insertions(+), 952 deletions(-)
 create mode 100644 docs/content/en/api-reference/sound/page.mdx
 create mode 100644 docs/content/ko/api-reference/sound/page.mdx
 create mode 100644 src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
 delete mode 100644 src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx
 delete mode 100644 src/renderer/utils/grid/scrollShadow.ts

diff --git a/docs/content/en/api-reference/_meta.js b/docs/content/en/api-reference/_meta.js
index 944a3cb3..7b2712b2 100644
--- a/docs/content/en/api-reference/_meta.js
+++ b/docs/content/en/api-reference/_meta.js
@@ -6,6 +6,7 @@ export default {
   settings: "Settings",
   overlay: "Overlay",
   "css-js": "CSS/JS",
+  sound: "Sound",
   presets: "Presets",
   i18n: "i18n",
   plugin: "Plugin",
diff --git a/docs/content/en/api-reference/sound/page.mdx b/docs/content/en/api-reference/sound/page.mdx
new file mode 100644
index 00000000..e1bbf251
--- /dev/null
+++ b/docs/content/en/api-reference/sound/page.mdx
@@ -0,0 +1,102 @@
+---
+title: Sound API
+description: dmn.sound API reference for the key sound library
+---
+
+# Sound API
+
+Manage the key sound library — the pool of audio files that key elements can
+play on press. Sounds live in the app data `sounds` directory and include both
+user-imported files (`local`) and bundled ones (`builtin`).
+
+## Types
+
+```typescript
+type SoundListItem = {
+  soundPath: string; // absolute path — also the stable identifier
+  fileName: string;
+  sizeBytes: number;
+  modifiedAtMs?: number;
+  hidden: boolean; // hidden from picker lists — playback is unaffected
+  source: 'local' | 'builtin';
+  originalPath?: string; // pre-trim original (present for edited sounds)
+  trimStartRatio?: number;
+  trimEndRatio?: number;
+  displayName?: string;
+};
+```
+
+## Library
+
+### `dmn.sound.list(): Promise<SoundListItem[]>`
+
+Returns every sound in the library, **including hidden ones** — filtering by
+`hidden` is up to the caller (the built-in picker hides them from its default
+views and shows them under a "Hidden Sounds" filter).
+
+```typescript
+const sounds = await dmn.sound.list();
+const visible = sounds.filter((s) => !s.hidden);
+```
+
+### `dmn.sound.load(): Promise<SoundLoadResult>`
+
+Opens a file dialog, copies the chosen audio file into the library, and
+returns its `soundPath`.
+
+### `dmn.sound.rename(soundPath, displayName): Promise<SoundRenameResult>`
+
+Sets the display name shown in pickers. The file itself is not renamed.
+
+### `dmn.sound.remove(soundPath): Promise<SoundDeleteResult>`
+
+Deletes the file and unassigns the sound from every element using it.
+
+## Visibility
+
+### `dmn.sound.setHidden(soundPath, hidden): Promise<SoundSetHiddenResult>`
+
+Hides a sound from (or restores it to) picker lists. Hiding is list-only
+housekeeping: **keys that already use the sound keep playing it**. Builtin
+sounds can be hidden too.
+
+```typescript
+await dmn.sound.setHidden(sound.soundPath, true); // hide
+await dmn.sound.setHidden(sound.soundPath, false); // unhide
+```
+
+```typescript
+type SoundSetHiddenResult = {
+  success: boolean;
+  soundPath: string;
+  hidden: boolean;
+};
+```
+
+### `dmn.sound.setEnabled(soundPath, enabled): Promise<SoundSetEnabledResult>`
+
+<Callout type="warning">
+  Deprecated — inverse alias kept for backward compatibility. `enabled` is
+  simply `!hidden`; use `setHidden` instead.
+</Callout>
+
+## Editing
+
+### `dmn.sound.saveProcessedWav(wavBase64, fileName?, originalBase64?, originalExtension?, trimStartRatio?, trimEndRatio?): Promise<SoundSaveProcessedWavResult>`
+
+Saves a processed (trimmed) WAV into the library, optionally alongside the
+original for later re-editing.
+
+### `dmn.sound.loadOriginal(soundPath): Promise<SoundLoadOriginalResult>`
+
+Returns the stored original audio (base64) of an edited sound.
+
+### `dmn.sound.updateProcessedWav(soundPath, wavBase64, trimStartRatio?, trimEndRatio?, displayName?): Promise<SoundUpdateProcessedWavResult>`
+
+Overwrites an edited sound's processed WAV in place.
+
+## Diagnostics
+
+### `dmn.sound.setLatencyLogging(enabled): Promise<void>`
+
+Toggles key-sound latency logging in the audio engine.
diff --git a/docs/content/ko/api-reference/_meta.js b/docs/content/ko/api-reference/_meta.js
index f960cdba..bcffa889 100644
--- a/docs/content/ko/api-reference/_meta.js
+++ b/docs/content/ko/api-reference/_meta.js
@@ -6,6 +6,7 @@ export default {
   settings: "설정 (settings)",
   overlay: "오버레이 (overlay)",
   "css-js": "CSS/JS",
+  sound: "사운드 (sound)",
   presets: "프리셋 (presets)",
   i18n: "다국어 (i18n)",
   plugin: "플러그인 (plugin)",
diff --git a/docs/content/ko/api-reference/sound/page.mdx b/docs/content/ko/api-reference/sound/page.mdx
new file mode 100644
index 00000000..999dd295
--- /dev/null
+++ b/docs/content/ko/api-reference/sound/page.mdx
@@ -0,0 +1,102 @@
+---
+title: 사운드 API
+description: 키음 라이브러리를 위한 dmn.sound API 레퍼런스
+---
+
+# 사운드 API
+
+키음 라이브러리 — 키 요소가 눌릴 때 재생할 수 있는 오디오 파일 풀 — 를
+관리합니다. 사운드는 앱 데이터의 `sounds` 디렉토리에 저장되며, 사용자가
+가져온 파일(`local`)과 기본 내장 파일(`builtin`)로 나뉩니다.
+
+## 타입
+
+```typescript
+type SoundListItem = {
+  soundPath: string; // 절대 경로 — 안정적인 식별자로도 사용
+  fileName: string;
+  sizeBytes: number;
+  modifiedAtMs?: number;
+  hidden: boolean; // 피커 목록에서 숨김 — 재생에는 영향 없음
+  source: 'local' | 'builtin';
+  originalPath?: string; // 트림 전 원본 (편집된 사운드에 존재)
+  trimStartRatio?: number;
+  trimEndRatio?: number;
+  displayName?: string;
+};
+```
+
+## 라이브러리
+
+### `dmn.sound.list(): Promise<SoundListItem[]>`
+
+라이브러리의 모든 사운드를 **숨긴 항목까지 포함해** 반환합니다. `hidden`
+기준 필터링은 호출자의 몫입니다 (내장 피커는 기본 뷰에서 숨기고 "숨긴
+사운드" 필터에서 보여줍니다).
+
+```typescript
+const sounds = await dmn.sound.list();
+const visible = sounds.filter((s) => !s.hidden);
+```
+
+### `dmn.sound.load(): Promise<SoundLoadResult>`
+
+파일 대화상자를 열어 선택한 오디오 파일을 라이브러리로 복사하고
+`soundPath`를 반환합니다.
+
+### `dmn.sound.rename(soundPath, displayName): Promise<SoundRenameResult>`
+
+피커에 표시되는 이름을 설정합니다. 파일 이름 자체는 바뀌지 않습니다.
+
+### `dmn.sound.remove(soundPath): Promise<SoundDeleteResult>`
+
+파일을 삭제하고, 이 사운드를 사용하는 모든 요소에서 할당을 해제합니다.
+
+## 표시 여부
+
+### `dmn.sound.setHidden(soundPath, hidden): Promise<SoundSetHiddenResult>`
+
+사운드를 피커 목록에서 숨기거나 다시 표시합니다. 숨김은 목록 정리용
+기능일 뿐이라 **이미 이 사운드를 쓰는 키는 계속 재생됩니다**. 내장
+사운드도 숨길 수 있습니다.
+
+```typescript
+await dmn.sound.setHidden(sound.soundPath, true); // 숨기기
+await dmn.sound.setHidden(sound.soundPath, false); // 숨김 해제
+```
+
+```typescript
+type SoundSetHiddenResult = {
+  success: boolean;
+  soundPath: string;
+  hidden: boolean;
+};
+```
+
+### `dmn.sound.setEnabled(soundPath, enabled): Promise<SoundSetEnabledResult>`
+
+<Callout type="warning">
+  Deprecated — 하위 호환용 역논리 별칭입니다. `enabled`는 단순히
+  `!hidden`이며, `setHidden`을 사용하세요.
+</Callout>
+
+## 편집
+
+### `dmn.sound.saveProcessedWav(wavBase64, fileName?, originalBase64?, originalExtension?, trimStartRatio?, trimEndRatio?): Promise<SoundSaveProcessedWavResult>`
+
+가공(트림)된 WAV를 라이브러리에 저장합니다. 나중에 다시 편집할 수 있도록
+원본을 함께 저장할 수 있습니다.
+
+### `dmn.sound.loadOriginal(soundPath): Promise<SoundLoadOriginalResult>`
+
+편집된 사운드의 저장된 원본 오디오(base64)를 반환합니다.
+
+### `dmn.sound.updateProcessedWav(soundPath, wavBase64, trimStartRatio?, trimEndRatio?, displayName?): Promise<SoundUpdateProcessedWavResult>`
+
+편집된 사운드의 가공 WAV를 제자리에서 덮어씁니다.
+
+## 진단
+
+### `dmn.sound.setLatencyLogging(enabled): Promise<void>`
+
+오디오 엔진의 키음 지연 로깅을 켜거나 끕니다.
diff --git a/src-tauri/build.rs b/src-tauri/build.rs
index 2e1234f7..09b6045f 100644
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@@ -112,10 +112,8 @@ fn generate_permissions() {
 fn extract_fn_name(line: &str) -> Option<String> {
     let rest = if let Some(r) = line.strip_prefix("pub async fn ") {
         r
-    } else if let Some(r) = line.strip_prefix("pub fn ") {
-        r
     } else {
-        return None;
+        line.strip_prefix("pub fn ")?
     };
     rest.split('(').next().map(|s| s.trim().to_string())
 }
@@ -210,7 +208,6 @@ fn maybe_build_macos_dock_helper() {
 
     if let Err(err) = fs::copy(&source_icon, &helper_icon) {
         println!("cargo:warning=failed to copy helper icon: {err}");
-        return;
     }
 }
 
diff --git a/src-tauri/gen/schemas/acl-manifests.json b/src-tauri/gen/schemas/acl-manifests.json
index d1747390..3e8127dc 100644
--- a/src-tauri/gen/schemas/acl-manifests.json
+++ b/src-tauri/gen/schemas/acl-manifests.json
@@ -1 +1 @@
-{"__app-acl__":{"default_permission":null,"permissions":{"dmnote-allow-all":{"identifier":"dmnote-allow-all","description":"Full DM Note command access for renderer","commands":{"allow":["app_auto_update","app_bootstrap","app_open_external","app_quit","app_restart","counter_animation_create","counter_animation_delete","counter_animation_list","counter_animation_update","css_get","css_get_use","css_load","css_reset","css_set_content","css_tab_clear","css_tab_get","css_tab_get_all","css_tab_load","css_tab_set","css_tab_toggle","css_toggle","custom_tabs_create","custom_tabs_delete","custom_tabs_list","custom_tabs_restore","custom_tabs_select","font_load","get_cursor_settings","graph_positions_get","graph_positions_update","image_load","js_get","js_get_use","js_load","js_reload","js_remove_plugin","js_reset","js_set_content","js_set_plugin_enabled","js_toggle","key_sound_get_output_state","key_sound_get_status","key_sound_list_output_devices","key_sound_load_soundpack","key_sound_set_enabled","key_sound_set_latency_logging","key_sound_set_output_backend","key_sound_set_volume","key_sound_unload_soundpack","keys_get","keys_get_counters","keys_reset_all","keys_reset_counters","keys_reset_counters_mode","keys_reset_mode","keys_reset_single_counter","keys_set_counters","keys_set_mode","keys_update","knob_positions_get","knob_positions_update","layer_groups_get","layer_groups_update","note_tab_clear","note_tab_get","note_tab_get_all","note_tab_set","obs_regenerate_token","obs_start","obs_status","obs_stop","overlay_get","overlay_resize","overlay_set_anchor","overlay_set_lock","overlay_set_visible","plugin_bridge_send","plugin_bridge_send_to","plugin_storage_clear","plugin_storage_clear_by_prefix","plugin_storage_get","plugin_storage_has_data","plugin_storage_keys","plugin_storage_remove","plugin_storage_set","positions_get","positions_update","preset_load","preset_load_tab","preset_save","preset_save_tab","raw_input_subscribe","raw_input_unsubscribe","settings_get","settings_update","sound_delete","sound_list","sound_load","sound_load_original","sound_rename","sound_save_processed_wav","sound_update_processed_wav","stat_positions_get","stat_positions_update","window_close","window_minimize","window_open_devtools_all","window_show_main"],"deny":[]}}},"permission_sets":{},"global_scope_schema":null},"core":{"default_permission":{"identifier":"default","description":"Default core plugins set.","permissions":["core:path:default","core:event:default","core:window:default","core:webview:default","core:app:default","core:image:default","core:resources:default","core:menu:default","core:tray:default"]},"permissions":{},"permission_sets":{},"global_scope_schema":null},"core:app":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin.","permissions":["allow-version","allow-name","allow-tauri-version","allow-identifier","allow-bundle-type","allow-register-listener","allow-remove-listener"]},"permissions":{"allow-app-hide":{"identifier":"allow-app-hide","description":"Enables the app_hide command without any pre-configured scope.","commands":{"allow":["app_hide"],"deny":[]}},"allow-app-show":{"identifier":"allow-app-show","description":"Enables the app_show command without any pre-configured scope.","commands":{"allow":["app_show"],"deny":[]}},"allow-bundle-type":{"identifier":"allow-bundle-type","description":"Enables the bundle_type command without any pre-configured scope.","commands":{"allow":["bundle_type"],"deny":[]}},"allow-default-window-icon":{"identifier":"allow-default-window-icon","description":"Enables the default_window_icon command without any pre-configured scope.","commands":{"allow":["default_window_icon"],"deny":[]}},"allow-fetch-data-store-identifiers":{"identifier":"allow-fetch-data-store-identifiers","description":"Enables the fetch_data_store_identifiers command without any pre-configured scope.","commands":{"allow":["fetch_data_store_identifiers"],"deny":[]}},"allow-identifier":{"identifier":"allow-identifier","description":"Enables the identifier command without any pre-configured scope.","commands":{"allow":["identifier"],"deny":[]}},"allow-name":{"identifier":"allow-name","description":"Enables the name command without any pre-configured scope.","commands":{"allow":["name"],"deny":[]}},"allow-register-listener":{"identifier":"allow-register-listener","description":"Enables the register_listener command without any pre-configured scope.","commands":{"allow":["register_listener"],"deny":[]}},"allow-remove-data-store":{"identifier":"allow-remove-data-store","description":"Enables the remove_data_store command without any pre-configured scope.","commands":{"allow":["remove_data_store"],"deny":[]}},"allow-remove-listener":{"identifier":"allow-remove-listener","description":"Enables the remove_listener command without any pre-configured scope.","commands":{"allow":["remove_listener"],"deny":[]}},"allow-set-app-theme":{"identifier":"allow-set-app-theme","description":"Enables the set_app_theme command without any pre-configured scope.","commands":{"allow":["set_app_theme"],"deny":[]}},"allow-set-dock-visibility":{"identifier":"allow-set-dock-visibility","description":"Enables the set_dock_visibility command without any pre-configured scope.","commands":{"allow":["set_dock_visibility"],"deny":[]}},"allow-tauri-version":{"identifier":"allow-tauri-version","description":"Enables the tauri_version command without any pre-configured scope.","commands":{"allow":["tauri_version"],"deny":[]}},"allow-version":{"identifier":"allow-version","description":"Enables the version command without any pre-configured scope.","commands":{"allow":["version"],"deny":[]}},"deny-app-hide":{"identifier":"deny-app-hide","description":"Denies the app_hide command without any pre-configured scope.","commands":{"allow":[],"deny":["app_hide"]}},"deny-app-show":{"identifier":"deny-app-show","description":"Denies the app_show command without any pre-configured scope.","commands":{"allow":[],"deny":["app_show"]}},"deny-bundle-type":{"identifier":"deny-bundle-type","description":"Denies the bundle_type command without any pre-configured scope.","commands":{"allow":[],"deny":["bundle_type"]}},"deny-default-window-icon":{"identifier":"deny-default-window-icon","description":"Denies the default_window_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["default_window_icon"]}},"deny-fetch-data-store-identifiers":{"identifier":"deny-fetch-data-store-identifiers","description":"Denies the fetch_data_store_identifiers command without any pre-configured scope.","commands":{"allow":[],"deny":["fetch_data_store_identifiers"]}},"deny-identifier":{"identifier":"deny-identifier","description":"Denies the identifier command without any pre-configured scope.","commands":{"allow":[],"deny":["identifier"]}},"deny-name":{"identifier":"deny-name","description":"Denies the name command without any pre-configured scope.","commands":{"allow":[],"deny":["name"]}},"deny-register-listener":{"identifier":"deny-register-listener","description":"Denies the register_listener command without any pre-configured scope.","commands":{"allow":[],"deny":["register_listener"]}},"deny-remove-data-store":{"identifier":"deny-remove-data-store","description":"Denies the remove_data_store command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_data_store"]}},"deny-remove-listener":{"identifier":"deny-remove-listener","description":"Denies the remove_listener command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_listener"]}},"deny-set-app-theme":{"identifier":"deny-set-app-theme","description":"Denies the set_app_theme command without any pre-configured scope.","commands":{"allow":[],"deny":["set_app_theme"]}},"deny-set-dock-visibility":{"identifier":"deny-set-dock-visibility","description":"Denies the set_dock_visibility command without any pre-configured scope.","commands":{"allow":[],"deny":["set_dock_visibility"]}},"deny-tauri-version":{"identifier":"deny-tauri-version","description":"Denies the tauri_version command without any pre-configured scope.","commands":{"allow":[],"deny":["tauri_version"]}},"deny-version":{"identifier":"deny-version","description":"Denies the version command without any pre-configured scope.","commands":{"allow":[],"deny":["version"]}}},"permission_sets":{},"global_scope_schema":null},"core:event":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-listen","allow-unlisten","allow-emit","allow-emit-to"]},"permissions":{"allow-emit":{"identifier":"allow-emit","description":"Enables the emit command without any pre-configured scope.","commands":{"allow":["emit"],"deny":[]}},"allow-emit-to":{"identifier":"allow-emit-to","description":"Enables the emit_to command without any pre-configured scope.","commands":{"allow":["emit_to"],"deny":[]}},"allow-listen":{"identifier":"allow-listen","description":"Enables the listen command without any pre-configured scope.","commands":{"allow":["listen"],"deny":[]}},"allow-unlisten":{"identifier":"allow-unlisten","description":"Enables the unlisten command without any pre-configured scope.","commands":{"allow":["unlisten"],"deny":[]}},"deny-emit":{"identifier":"deny-emit","description":"Denies the emit command without any pre-configured scope.","commands":{"allow":[],"deny":["emit"]}},"deny-emit-to":{"identifier":"deny-emit-to","description":"Denies the emit_to command without any pre-configured scope.","commands":{"allow":[],"deny":["emit_to"]}},"deny-listen":{"identifier":"deny-listen","description":"Denies the listen command without any pre-configured scope.","commands":{"allow":[],"deny":["listen"]}},"deny-unlisten":{"identifier":"deny-unlisten","description":"Denies the unlisten command without any pre-configured scope.","commands":{"allow":[],"deny":["unlisten"]}}},"permission_sets":{},"global_scope_schema":null},"core:image":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-new","allow-from-bytes","allow-from-path","allow-rgba","allow-size"]},"permissions":{"allow-from-bytes":{"identifier":"allow-from-bytes","description":"Enables the from_bytes command without any pre-configured scope.","commands":{"allow":["from_bytes"],"deny":[]}},"allow-from-path":{"identifier":"allow-from-path","description":"Enables the from_path command without any pre-configured scope.","commands":{"allow":["from_path"],"deny":[]}},"allow-new":{"identifier":"allow-new","description":"Enables the new command without any pre-configured scope.","commands":{"allow":["new"],"deny":[]}},"allow-rgba":{"identifier":"allow-rgba","description":"Enables the rgba command without any pre-configured scope.","commands":{"allow":["rgba"],"deny":[]}},"allow-size":{"identifier":"allow-size","description":"Enables the size command without any pre-configured scope.","commands":{"allow":["size"],"deny":[]}},"deny-from-bytes":{"identifier":"deny-from-bytes","description":"Denies the from_bytes command without any pre-configured scope.","commands":{"allow":[],"deny":["from_bytes"]}},"deny-from-path":{"identifier":"deny-from-path","description":"Denies the from_path command without any pre-configured scope.","commands":{"allow":[],"deny":["from_path"]}},"deny-new":{"identifier":"deny-new","description":"Denies the new command without any pre-configured scope.","commands":{"allow":[],"deny":["new"]}},"deny-rgba":{"identifier":"deny-rgba","description":"Denies the rgba command without any pre-configured scope.","commands":{"allow":[],"deny":["rgba"]}},"deny-size":{"identifier":"deny-size","description":"Denies the size command without any pre-configured scope.","commands":{"allow":[],"deny":["size"]}}},"permission_sets":{},"global_scope_schema":null},"core:menu":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-new","allow-append","allow-prepend","allow-insert","allow-remove","allow-remove-at","allow-items","allow-get","allow-popup","allow-create-default","allow-set-as-app-menu","allow-set-as-window-menu","allow-text","allow-set-text","allow-is-enabled","allow-set-enabled","allow-set-accelerator","allow-set-as-windows-menu-for-nsapp","allow-set-as-help-menu-for-nsapp","allow-is-checked","allow-set-checked","allow-set-icon"]},"permissions":{"allow-append":{"identifier":"allow-append","description":"Enables the append command without any pre-configured scope.","commands":{"allow":["append"],"deny":[]}},"allow-create-default":{"identifier":"allow-create-default","description":"Enables the create_default command without any pre-configured scope.","commands":{"allow":["create_default"],"deny":[]}},"allow-get":{"identifier":"allow-get","description":"Enables the get command without any pre-configured scope.","commands":{"allow":["get"],"deny":[]}},"allow-insert":{"identifier":"allow-insert","description":"Enables the insert command without any pre-configured scope.","commands":{"allow":["insert"],"deny":[]}},"allow-is-checked":{"identifier":"allow-is-checked","description":"Enables the is_checked command without any pre-configured scope.","commands":{"allow":["is_checked"],"deny":[]}},"allow-is-enabled":{"identifier":"allow-is-enabled","description":"Enables the is_enabled command without any pre-configured scope.","commands":{"allow":["is_enabled"],"deny":[]}},"allow-items":{"identifier":"allow-items","description":"Enables the items command without any pre-configured scope.","commands":{"allow":["items"],"deny":[]}},"allow-new":{"identifier":"allow-new","description":"Enables the new command without any pre-configured scope.","commands":{"allow":["new"],"deny":[]}},"allow-popup":{"identifier":"allow-popup","description":"Enables the popup command without any pre-configured scope.","commands":{"allow":["popup"],"deny":[]}},"allow-prepend":{"identifier":"allow-prepend","description":"Enables the prepend command without any pre-configured scope.","commands":{"allow":["prepend"],"deny":[]}},"allow-remove":{"identifier":"allow-remove","description":"Enables the remove command without any pre-configured scope.","commands":{"allow":["remove"],"deny":[]}},"allow-remove-at":{"identifier":"allow-remove-at","description":"Enables the remove_at command without any pre-configured scope.","commands":{"allow":["remove_at"],"deny":[]}},"allow-set-accelerator":{"identifier":"allow-set-accelerator","description":"Enables the set_accelerator command without any pre-configured scope.","commands":{"allow":["set_accelerator"],"deny":[]}},"allow-set-as-app-menu":{"identifier":"allow-set-as-app-menu","description":"Enables the set_as_app_menu command without any pre-configured scope.","commands":{"allow":["set_as_app_menu"],"deny":[]}},"allow-set-as-help-menu-for-nsapp":{"identifier":"allow-set-as-help-menu-for-nsapp","description":"Enables the set_as_help_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":["set_as_help_menu_for_nsapp"],"deny":[]}},"allow-set-as-window-menu":{"identifier":"allow-set-as-window-menu","description":"Enables the set_as_window_menu command without any pre-configured scope.","commands":{"allow":["set_as_window_menu"],"deny":[]}},"allow-set-as-windows-menu-for-nsapp":{"identifier":"allow-set-as-windows-menu-for-nsapp","description":"Enables the set_as_windows_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":["set_as_windows_menu_for_nsapp"],"deny":[]}},"allow-set-checked":{"identifier":"allow-set-checked","description":"Enables the set_checked command without any pre-configured scope.","commands":{"allow":["set_checked"],"deny":[]}},"allow-set-enabled":{"identifier":"allow-set-enabled","description":"Enables the set_enabled command without any pre-configured scope.","commands":{"allow":["set_enabled"],"deny":[]}},"allow-set-icon":{"identifier":"allow-set-icon","description":"Enables the set_icon command without any pre-configured scope.","commands":{"allow":["set_icon"],"deny":[]}},"allow-set-text":{"identifier":"allow-set-text","description":"Enables the set_text command without any pre-configured scope.","commands":{"allow":["set_text"],"deny":[]}},"allow-text":{"identifier":"allow-text","description":"Enables the text command without any pre-configured scope.","commands":{"allow":["text"],"deny":[]}},"deny-append":{"identifier":"deny-append","description":"Denies the append command without any pre-configured scope.","commands":{"allow":[],"deny":["append"]}},"deny-create-default":{"identifier":"deny-create-default","description":"Denies the create_default command without any pre-configured scope.","commands":{"allow":[],"deny":["create_default"]}},"deny-get":{"identifier":"deny-get","description":"Denies the get command without any pre-configured scope.","commands":{"allow":[],"deny":["get"]}},"deny-insert":{"identifier":"deny-insert","description":"Denies the insert command without any pre-configured scope.","commands":{"allow":[],"deny":["insert"]}},"deny-is-checked":{"identifier":"deny-is-checked","description":"Denies the is_checked command without any pre-configured scope.","commands":{"allow":[],"deny":["is_checked"]}},"deny-is-enabled":{"identifier":"deny-is-enabled","description":"Denies the is_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["is_enabled"]}},"deny-items":{"identifier":"deny-items","description":"Denies the items command without any pre-configured scope.","commands":{"allow":[],"deny":["items"]}},"deny-new":{"identifier":"deny-new","description":"Denies the new command without any pre-configured scope.","commands":{"allow":[],"deny":["new"]}},"deny-popup":{"identifier":"deny-popup","description":"Denies the popup command without any pre-configured scope.","commands":{"allow":[],"deny":["popup"]}},"deny-prepend":{"identifier":"deny-prepend","description":"Denies the prepend command without any pre-configured scope.","commands":{"allow":[],"deny":["prepend"]}},"deny-remove":{"identifier":"deny-remove","description":"Denies the remove command without any pre-configured scope.","commands":{"allow":[],"deny":["remove"]}},"deny-remove-at":{"identifier":"deny-remove-at","description":"Denies the remove_at command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_at"]}},"deny-set-accelerator":{"identifier":"deny-set-accelerator","description":"Denies the set_accelerator command without any pre-configured scope.","commands":{"allow":[],"deny":["set_accelerator"]}},"deny-set-as-app-menu":{"identifier":"deny-set-as-app-menu","description":"Denies the set_as_app_menu command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_app_menu"]}},"deny-set-as-help-menu-for-nsapp":{"identifier":"deny-set-as-help-menu-for-nsapp","description":"Denies the set_as_help_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_help_menu_for_nsapp"]}},"deny-set-as-window-menu":{"identifier":"deny-set-as-window-menu","description":"Denies the set_as_window_menu command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_window_menu"]}},"deny-set-as-windows-menu-for-nsapp":{"identifier":"deny-set-as-windows-menu-for-nsapp","description":"Denies the set_as_windows_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_windows_menu_for_nsapp"]}},"deny-set-checked":{"identifier":"deny-set-checked","description":"Denies the set_checked command without any pre-configured scope.","commands":{"allow":[],"deny":["set_checked"]}},"deny-set-enabled":{"identifier":"deny-set-enabled","description":"Denies the set_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["set_enabled"]}},"deny-set-icon":{"identifier":"deny-set-icon","description":"Denies the set_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon"]}},"deny-set-text":{"identifier":"deny-set-text","description":"Denies the set_text command without any pre-configured scope.","commands":{"allow":[],"deny":["set_text"]}},"deny-text":{"identifier":"deny-text","description":"Denies the text command without any pre-configured scope.","commands":{"allow":[],"deny":["text"]}}},"permission_sets":{},"global_scope_schema":null},"core:path":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-resolve-directory","allow-resolve","allow-normalize","allow-join","allow-dirname","allow-extname","allow-basename","allow-is-absolute"]},"permissions":{"allow-basename":{"identifier":"allow-basename","description":"Enables the basename command without any pre-configured scope.","commands":{"allow":["basename"],"deny":[]}},"allow-dirname":{"identifier":"allow-dirname","description":"Enables the dirname command without any pre-configured scope.","commands":{"allow":["dirname"],"deny":[]}},"allow-extname":{"identifier":"allow-extname","description":"Enables the extname command without any pre-configured scope.","commands":{"allow":["extname"],"deny":[]}},"allow-is-absolute":{"identifier":"allow-is-absolute","description":"Enables the is_absolute command without any pre-configured scope.","commands":{"allow":["is_absolute"],"deny":[]}},"allow-join":{"identifier":"allow-join","description":"Enables the join command without any pre-configured scope.","commands":{"allow":["join"],"deny":[]}},"allow-normalize":{"identifier":"allow-normalize","description":"Enables the normalize command without any pre-configured scope.","commands":{"allow":["normalize"],"deny":[]}},"allow-resolve":{"identifier":"allow-resolve","description":"Enables the resolve command without any pre-configured scope.","commands":{"allow":["resolve"],"deny":[]}},"allow-resolve-directory":{"identifier":"allow-resolve-directory","description":"Enables the resolve_directory command without any pre-configured scope.","commands":{"allow":["resolve_directory"],"deny":[]}},"deny-basename":{"identifier":"deny-basename","description":"Denies the basename command without any pre-configured scope.","commands":{"allow":[],"deny":["basename"]}},"deny-dirname":{"identifier":"deny-dirname","description":"Denies the dirname command without any pre-configured scope.","commands":{"allow":[],"deny":["dirname"]}},"deny-extname":{"identifier":"deny-extname","description":"Denies the extname command without any pre-configured scope.","commands":{"allow":[],"deny":["extname"]}},"deny-is-absolute":{"identifier":"deny-is-absolute","description":"Denies the is_absolute command without any pre-configured scope.","commands":{"allow":[],"deny":["is_absolute"]}},"deny-join":{"identifier":"deny-join","description":"Denies the join command without any pre-configured scope.","commands":{"allow":[],"deny":["join"]}},"deny-normalize":{"identifier":"deny-normalize","description":"Denies the normalize command without any pre-configured scope.","commands":{"allow":[],"deny":["normalize"]}},"deny-resolve":{"identifier":"deny-resolve","description":"Denies the resolve command without any pre-configured scope.","commands":{"allow":[],"deny":["resolve"]}},"deny-resolve-directory":{"identifier":"deny-resolve-directory","description":"Denies the resolve_directory command without any pre-configured scope.","commands":{"allow":[],"deny":["resolve_directory"]}}},"permission_sets":{},"global_scope_schema":null},"core:resources":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-close"]},"permissions":{"allow-close":{"identifier":"allow-close","description":"Enables the close command without any pre-configured scope.","commands":{"allow":["close"],"deny":[]}},"deny-close":{"identifier":"deny-close","description":"Denies the close command without any pre-configured scope.","commands":{"allow":[],"deny":["close"]}}},"permission_sets":{},"global_scope_schema":null},"core:tray":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-new","allow-get-by-id","allow-remove-by-id","allow-set-icon","allow-set-menu","allow-set-tooltip","allow-set-title","allow-set-visible","allow-set-temp-dir-path","allow-set-icon-as-template","allow-set-show-menu-on-left-click"]},"permissions":{"allow-get-by-id":{"identifier":"allow-get-by-id","description":"Enables the get_by_id command without any pre-configured scope.","commands":{"allow":["get_by_id"],"deny":[]}},"allow-new":{"identifier":"allow-new","description":"Enables the new command without any pre-configured scope.","commands":{"allow":["new"],"deny":[]}},"allow-remove-by-id":{"identifier":"allow-remove-by-id","description":"Enables the remove_by_id command without any pre-configured scope.","commands":{"allow":["remove_by_id"],"deny":[]}},"allow-set-icon":{"identifier":"allow-set-icon","description":"Enables the set_icon command without any pre-configured scope.","commands":{"allow":["set_icon"],"deny":[]}},"allow-set-icon-as-template":{"identifier":"allow-set-icon-as-template","description":"Enables the set_icon_as_template command without any pre-configured scope.","commands":{"allow":["set_icon_as_template"],"deny":[]}},"allow-set-menu":{"identifier":"allow-set-menu","description":"Enables the set_menu command without any pre-configured scope.","commands":{"allow":["set_menu"],"deny":[]}},"allow-set-show-menu-on-left-click":{"identifier":"allow-set-show-menu-on-left-click","description":"Enables the set_show_menu_on_left_click command without any pre-configured scope.","commands":{"allow":["set_show_menu_on_left_click"],"deny":[]}},"allow-set-temp-dir-path":{"identifier":"allow-set-temp-dir-path","description":"Enables the set_temp_dir_path command without any pre-configured scope.","commands":{"allow":["set_temp_dir_path"],"deny":[]}},"allow-set-title":{"identifier":"allow-set-title","description":"Enables the set_title command without any pre-configured scope.","commands":{"allow":["set_title"],"deny":[]}},"allow-set-tooltip":{"identifier":"allow-set-tooltip","description":"Enables the set_tooltip command without any pre-configured scope.","commands":{"allow":["set_tooltip"],"deny":[]}},"allow-set-visible":{"identifier":"allow-set-visible","description":"Enables the set_visible command without any pre-configured scope.","commands":{"allow":["set_visible"],"deny":[]}},"deny-get-by-id":{"identifier":"deny-get-by-id","description":"Denies the get_by_id command without any pre-configured scope.","commands":{"allow":[],"deny":["get_by_id"]}},"deny-new":{"identifier":"deny-new","description":"Denies the new command without any pre-configured scope.","commands":{"allow":[],"deny":["new"]}},"deny-remove-by-id":{"identifier":"deny-remove-by-id","description":"Denies the remove_by_id command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_by_id"]}},"deny-set-icon":{"identifier":"deny-set-icon","description":"Denies the set_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon"]}},"deny-set-icon-as-template":{"identifier":"deny-set-icon-as-template","description":"Denies the set_icon_as_template command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon_as_template"]}},"deny-set-menu":{"identifier":"deny-set-menu","description":"Denies the set_menu command without any pre-configured scope.","commands":{"allow":[],"deny":["set_menu"]}},"deny-set-show-menu-on-left-click":{"identifier":"deny-set-show-menu-on-left-click","description":"Denies the set_show_menu_on_left_click command without any pre-configured scope.","commands":{"allow":[],"deny":["set_show_menu_on_left_click"]}},"deny-set-temp-dir-path":{"identifier":"deny-set-temp-dir-path","description":"Denies the set_temp_dir_path command without any pre-configured scope.","commands":{"allow":[],"deny":["set_temp_dir_path"]}},"deny-set-title":{"identifier":"deny-set-title","description":"Denies the set_title command without any pre-configured scope.","commands":{"allow":[],"deny":["set_title"]}},"deny-set-tooltip":{"identifier":"deny-set-tooltip","description":"Denies the set_tooltip command without any pre-configured scope.","commands":{"allow":[],"deny":["set_tooltip"]}},"deny-set-visible":{"identifier":"deny-set-visible","description":"Denies the set_visible command without any pre-configured scope.","commands":{"allow":[],"deny":["set_visible"]}}},"permission_sets":{},"global_scope_schema":null},"core:webview":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin.","permissions":["allow-get-all-webviews","allow-webview-position","allow-webview-size","allow-internal-toggle-devtools"]},"permissions":{"allow-clear-all-browsing-data":{"identifier":"allow-clear-all-browsing-data","description":"Enables the clear_all_browsing_data command without any pre-configured scope.","commands":{"allow":["clear_all_browsing_data"],"deny":[]}},"allow-create-webview":{"identifier":"allow-create-webview","description":"Enables the create_webview command without any pre-configured scope.","commands":{"allow":["create_webview"],"deny":[]}},"allow-create-webview-window":{"identifier":"allow-create-webview-window","description":"Enables the create_webview_window command without any pre-configured scope.","commands":{"allow":["create_webview_window"],"deny":[]}},"allow-get-all-webviews":{"identifier":"allow-get-all-webviews","description":"Enables the get_all_webviews command without any pre-configured scope.","commands":{"allow":["get_all_webviews"],"deny":[]}},"allow-internal-toggle-devtools":{"identifier":"allow-internal-toggle-devtools","description":"Enables the internal_toggle_devtools command without any pre-configured scope.","commands":{"allow":["internal_toggle_devtools"],"deny":[]}},"allow-print":{"identifier":"allow-print","description":"Enables the print command without any pre-configured scope.","commands":{"allow":["print"],"deny":[]}},"allow-reparent":{"identifier":"allow-reparent","description":"Enables the reparent command without any pre-configured scope.","commands":{"allow":["reparent"],"deny":[]}},"allow-set-webview-auto-resize":{"identifier":"allow-set-webview-auto-resize","description":"Enables the set_webview_auto_resize command without any pre-configured scope.","commands":{"allow":["set_webview_auto_resize"],"deny":[]}},"allow-set-webview-background-color":{"identifier":"allow-set-webview-background-color","description":"Enables the set_webview_background_color command without any pre-configured scope.","commands":{"allow":["set_webview_background_color"],"deny":[]}},"allow-set-webview-focus":{"identifier":"allow-set-webview-focus","description":"Enables the set_webview_focus command without any pre-configured scope.","commands":{"allow":["set_webview_focus"],"deny":[]}},"allow-set-webview-position":{"identifier":"allow-set-webview-position","description":"Enables the set_webview_position command without any pre-configured scope.","commands":{"allow":["set_webview_position"],"deny":[]}},"allow-set-webview-size":{"identifier":"allow-set-webview-size","description":"Enables the set_webview_size command without any pre-configured scope.","commands":{"allow":["set_webview_size"],"deny":[]}},"allow-set-webview-zoom":{"identifier":"allow-set-webview-zoom","description":"Enables the set_webview_zoom command without any pre-configured scope.","commands":{"allow":["set_webview_zoom"],"deny":[]}},"allow-webview-close":{"identifier":"allow-webview-close","description":"Enables the webview_close command without any pre-configured scope.","commands":{"allow":["webview_close"],"deny":[]}},"allow-webview-hide":{"identifier":"allow-webview-hide","description":"Enables the webview_hide command without any pre-configured scope.","commands":{"allow":["webview_hide"],"deny":[]}},"allow-webview-position":{"identifier":"allow-webview-position","description":"Enables the webview_position command without any pre-configured scope.","commands":{"allow":["webview_position"],"deny":[]}},"allow-webview-show":{"identifier":"allow-webview-show","description":"Enables the webview_show command without any pre-configured scope.","commands":{"allow":["webview_show"],"deny":[]}},"allow-webview-size":{"identifier":"allow-webview-size","description":"Enables the webview_size command without any pre-configured scope.","commands":{"allow":["webview_size"],"deny":[]}},"deny-clear-all-browsing-data":{"identifier":"deny-clear-all-browsing-data","description":"Denies the clear_all_browsing_data command without any pre-configured scope.","commands":{"allow":[],"deny":["clear_all_browsing_data"]}},"deny-create-webview":{"identifier":"deny-create-webview","description":"Denies the create_webview command without any pre-configured scope.","commands":{"allow":[],"deny":["create_webview"]}},"deny-create-webview-window":{"identifier":"deny-create-webview-window","description":"Denies the create_webview_window command without any pre-configured scope.","commands":{"allow":[],"deny":["create_webview_window"]}},"deny-get-all-webviews":{"identifier":"deny-get-all-webviews","description":"Denies the get_all_webviews command without any pre-configured scope.","commands":{"allow":[],"deny":["get_all_webviews"]}},"deny-internal-toggle-devtools":{"identifier":"deny-internal-toggle-devtools","description":"Denies the internal_toggle_devtools command without any pre-configured scope.","commands":{"allow":[],"deny":["internal_toggle_devtools"]}},"deny-print":{"identifier":"deny-print","description":"Denies the print command without any pre-configured scope.","commands":{"allow":[],"deny":["print"]}},"deny-reparent":{"identifier":"deny-reparent","description":"Denies the reparent command without any pre-configured scope.","commands":{"allow":[],"deny":["reparent"]}},"deny-set-webview-auto-resize":{"identifier":"deny-set-webview-auto-resize","description":"Denies the set_webview_auto_resize command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_auto_resize"]}},"deny-set-webview-background-color":{"identifier":"deny-set-webview-background-color","description":"Denies the set_webview_background_color command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_background_color"]}},"deny-set-webview-focus":{"identifier":"deny-set-webview-focus","description":"Denies the set_webview_focus command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_focus"]}},"deny-set-webview-position":{"identifier":"deny-set-webview-position","description":"Denies the set_webview_position command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_position"]}},"deny-set-webview-size":{"identifier":"deny-set-webview-size","description":"Denies the set_webview_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_size"]}},"deny-set-webview-zoom":{"identifier":"deny-set-webview-zoom","description":"Denies the set_webview_zoom command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_zoom"]}},"deny-webview-close":{"identifier":"deny-webview-close","description":"Denies the webview_close command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_close"]}},"deny-webview-hide":{"identifier":"deny-webview-hide","description":"Denies the webview_hide command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_hide"]}},"deny-webview-position":{"identifier":"deny-webview-position","description":"Denies the webview_position command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_position"]}},"deny-webview-show":{"identifier":"deny-webview-show","description":"Denies the webview_show command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_show"]}},"deny-webview-size":{"identifier":"deny-webview-size","description":"Denies the webview_size command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_size"]}}},"permission_sets":{},"global_scope_schema":null},"core:window":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin.","permissions":["allow-get-all-windows","allow-scale-factor","allow-inner-position","allow-outer-position","allow-inner-size","allow-outer-size","allow-is-fullscreen","allow-is-minimized","allow-is-maximized","allow-is-focused","allow-is-decorated","allow-is-resizable","allow-is-maximizable","allow-is-minimizable","allow-is-closable","allow-is-visible","allow-is-enabled","allow-title","allow-current-monitor","allow-primary-monitor","allow-monitor-from-point","allow-available-monitors","allow-cursor-position","allow-theme","allow-is-always-on-top","allow-internal-toggle-maximize"]},"permissions":{"allow-available-monitors":{"identifier":"allow-available-monitors","description":"Enables the available_monitors command without any pre-configured scope.","commands":{"allow":["available_monitors"],"deny":[]}},"allow-center":{"identifier":"allow-center","description":"Enables the center command without any pre-configured scope.","commands":{"allow":["center"],"deny":[]}},"allow-close":{"identifier":"allow-close","description":"Enables the close command without any pre-configured scope.","commands":{"allow":["close"],"deny":[]}},"allow-create":{"identifier":"allow-create","description":"Enables the create command without any pre-configured scope.","commands":{"allow":["create"],"deny":[]}},"allow-current-monitor":{"identifier":"allow-current-monitor","description":"Enables the current_monitor command without any pre-configured scope.","commands":{"allow":["current_monitor"],"deny":[]}},"allow-cursor-position":{"identifier":"allow-cursor-position","description":"Enables the cursor_position command without any pre-configured scope.","commands":{"allow":["cursor_position"],"deny":[]}},"allow-destroy":{"identifier":"allow-destroy","description":"Enables the destroy command without any pre-configured scope.","commands":{"allow":["destroy"],"deny":[]}},"allow-get-all-windows":{"identifier":"allow-get-all-windows","description":"Enables the get_all_windows command without any pre-configured scope.","commands":{"allow":["get_all_windows"],"deny":[]}},"allow-hide":{"identifier":"allow-hide","description":"Enables the hide command without any pre-configured scope.","commands":{"allow":["hide"],"deny":[]}},"allow-inner-position":{"identifier":"allow-inner-position","description":"Enables the inner_position command without any pre-configured scope.","commands":{"allow":["inner_position"],"deny":[]}},"allow-inner-size":{"identifier":"allow-inner-size","description":"Enables the inner_size command without any pre-configured scope.","commands":{"allow":["inner_size"],"deny":[]}},"allow-internal-toggle-maximize":{"identifier":"allow-internal-toggle-maximize","description":"Enables the internal_toggle_maximize command without any pre-configured scope.","commands":{"allow":["internal_toggle_maximize"],"deny":[]}},"allow-is-always-on-top":{"identifier":"allow-is-always-on-top","description":"Enables the is_always_on_top command without any pre-configured scope.","commands":{"allow":["is_always_on_top"],"deny":[]}},"allow-is-closable":{"identifier":"allow-is-closable","description":"Enables the is_closable command without any pre-configured scope.","commands":{"allow":["is_closable"],"deny":[]}},"allow-is-decorated":{"identifier":"allow-is-decorated","description":"Enables the is_decorated command without any pre-configured scope.","commands":{"allow":["is_decorated"],"deny":[]}},"allow-is-enabled":{"identifier":"allow-is-enabled","description":"Enables the is_enabled command without any pre-configured scope.","commands":{"allow":["is_enabled"],"deny":[]}},"allow-is-focused":{"identifier":"allow-is-focused","description":"Enables the is_focused command without any pre-configured scope.","commands":{"allow":["is_focused"],"deny":[]}},"allow-is-fullscreen":{"identifier":"allow-is-fullscreen","description":"Enables the is_fullscreen command without any pre-configured scope.","commands":{"allow":["is_fullscreen"],"deny":[]}},"allow-is-maximizable":{"identifier":"allow-is-maximizable","description":"Enables the is_maximizable command without any pre-configured scope.","commands":{"allow":["is_maximizable"],"deny":[]}},"allow-is-maximized":{"identifier":"allow-is-maximized","description":"Enables the is_maximized command without any pre-configured scope.","commands":{"allow":["is_maximized"],"deny":[]}},"allow-is-minimizable":{"identifier":"allow-is-minimizable","description":"Enables the is_minimizable command without any pre-configured scope.","commands":{"allow":["is_minimizable"],"deny":[]}},"allow-is-minimized":{"identifier":"allow-is-minimized","description":"Enables the is_minimized command without any pre-configured scope.","commands":{"allow":["is_minimized"],"deny":[]}},"allow-is-resizable":{"identifier":"allow-is-resizable","description":"Enables the is_resizable command without any pre-configured scope.","commands":{"allow":["is_resizable"],"deny":[]}},"allow-is-visible":{"identifier":"allow-is-visible","description":"Enables the is_visible command without any pre-configured scope.","commands":{"allow":["is_visible"],"deny":[]}},"allow-maximize":{"identifier":"allow-maximize","description":"Enables the maximize command without any pre-configured scope.","commands":{"allow":["maximize"],"deny":[]}},"allow-minimize":{"identifier":"allow-minimize","description":"Enables the minimize command without any pre-configured scope.","commands":{"allow":["minimize"],"deny":[]}},"allow-monitor-from-point":{"identifier":"allow-monitor-from-point","description":"Enables the monitor_from_point command without any pre-configured scope.","commands":{"allow":["monitor_from_point"],"deny":[]}},"allow-outer-position":{"identifier":"allow-outer-position","description":"Enables the outer_position command without any pre-configured scope.","commands":{"allow":["outer_position"],"deny":[]}},"allow-outer-size":{"identifier":"allow-outer-size","description":"Enables the outer_size command without any pre-configured scope.","commands":{"allow":["outer_size"],"deny":[]}},"allow-primary-monitor":{"identifier":"allow-primary-monitor","description":"Enables the primary_monitor command without any pre-configured scope.","commands":{"allow":["primary_monitor"],"deny":[]}},"allow-request-user-attention":{"identifier":"allow-request-user-attention","description":"Enables the request_user_attention command without any pre-configured scope.","commands":{"allow":["request_user_attention"],"deny":[]}},"allow-scale-factor":{"identifier":"allow-scale-factor","description":"Enables the scale_factor command without any pre-configured scope.","commands":{"allow":["scale_factor"],"deny":[]}},"allow-set-always-on-bottom":{"identifier":"allow-set-always-on-bottom","description":"Enables the set_always_on_bottom command without any pre-configured scope.","commands":{"allow":["set_always_on_bottom"],"deny":[]}},"allow-set-always-on-top":{"identifier":"allow-set-always-on-top","description":"Enables the set_always_on_top command without any pre-configured scope.","commands":{"allow":["set_always_on_top"],"deny":[]}},"allow-set-background-color":{"identifier":"allow-set-background-color","description":"Enables the set_background_color command without any pre-configured scope.","commands":{"allow":["set_background_color"],"deny":[]}},"allow-set-badge-count":{"identifier":"allow-set-badge-count","description":"Enables the set_badge_count command without any pre-configured scope.","commands":{"allow":["set_badge_count"],"deny":[]}},"allow-set-badge-label":{"identifier":"allow-set-badge-label","description":"Enables the set_badge_label command without any pre-configured scope.","commands":{"allow":["set_badge_label"],"deny":[]}},"allow-set-closable":{"identifier":"allow-set-closable","description":"Enables the set_closable command without any pre-configured scope.","commands":{"allow":["set_closable"],"deny":[]}},"allow-set-content-protected":{"identifier":"allow-set-content-protected","description":"Enables the set_content_protected command without any pre-configured scope.","commands":{"allow":["set_content_protected"],"deny":[]}},"allow-set-cursor-grab":{"identifier":"allow-set-cursor-grab","description":"Enables the set_cursor_grab command without any pre-configured scope.","commands":{"allow":["set_cursor_grab"],"deny":[]}},"allow-set-cursor-icon":{"identifier":"allow-set-cursor-icon","description":"Enables the set_cursor_icon command without any pre-configured scope.","commands":{"allow":["set_cursor_icon"],"deny":[]}},"allow-set-cursor-position":{"identifier":"allow-set-cursor-position","description":"Enables the set_cursor_position command without any pre-configured scope.","commands":{"allow":["set_cursor_position"],"deny":[]}},"allow-set-cursor-visible":{"identifier":"allow-set-cursor-visible","description":"Enables the set_cursor_visible command without any pre-configured scope.","commands":{"allow":["set_cursor_visible"],"deny":[]}},"allow-set-decorations":{"identifier":"allow-set-decorations","description":"Enables the set_decorations command without any pre-configured scope.","commands":{"allow":["set_decorations"],"deny":[]}},"allow-set-effects":{"identifier":"allow-set-effects","description":"Enables the set_effects command without any pre-configured scope.","commands":{"allow":["set_effects"],"deny":[]}},"allow-set-enabled":{"identifier":"allow-set-enabled","description":"Enables the set_enabled command without any pre-configured scope.","commands":{"allow":["set_enabled"],"deny":[]}},"allow-set-focus":{"identifier":"allow-set-focus","description":"Enables the set_focus command without any pre-configured scope.","commands":{"allow":["set_focus"],"deny":[]}},"allow-set-focusable":{"identifier":"allow-set-focusable","description":"Enables the set_focusable command without any pre-configured scope.","commands":{"allow":["set_focusable"],"deny":[]}},"allow-set-fullscreen":{"identifier":"allow-set-fullscreen","description":"Enables the set_fullscreen command without any pre-configured scope.","commands":{"allow":["set_fullscreen"],"deny":[]}},"allow-set-icon":{"identifier":"allow-set-icon","description":"Enables the set_icon command without any pre-configured scope.","commands":{"allow":["set_icon"],"deny":[]}},"allow-set-ignore-cursor-events":{"identifier":"allow-set-ignore-cursor-events","description":"Enables the set_ignore_cursor_events command without any pre-configured scope.","commands":{"allow":["set_ignore_cursor_events"],"deny":[]}},"allow-set-max-size":{"identifier":"allow-set-max-size","description":"Enables the set_max_size command without any pre-configured scope.","commands":{"allow":["set_max_size"],"deny":[]}},"allow-set-maximizable":{"identifier":"allow-set-maximizable","description":"Enables the set_maximizable command without any pre-configured scope.","commands":{"allow":["set_maximizable"],"deny":[]}},"allow-set-min-size":{"identifier":"allow-set-min-size","description":"Enables the set_min_size command without any pre-configured scope.","commands":{"allow":["set_min_size"],"deny":[]}},"allow-set-minimizable":{"identifier":"allow-set-minimizable","description":"Enables the set_minimizable command without any pre-configured scope.","commands":{"allow":["set_minimizable"],"deny":[]}},"allow-set-overlay-icon":{"identifier":"allow-set-overlay-icon","description":"Enables the set_overlay_icon command without any pre-configured scope.","commands":{"allow":["set_overlay_icon"],"deny":[]}},"allow-set-position":{"identifier":"allow-set-position","description":"Enables the set_position command without any pre-configured scope.","commands":{"allow":["set_position"],"deny":[]}},"allow-set-progress-bar":{"identifier":"allow-set-progress-bar","description":"Enables the set_progress_bar command without any pre-configured scope.","commands":{"allow":["set_progress_bar"],"deny":[]}},"allow-set-resizable":{"identifier":"allow-set-resizable","description":"Enables the set_resizable command without any pre-configured scope.","commands":{"allow":["set_resizable"],"deny":[]}},"allow-set-shadow":{"identifier":"allow-set-shadow","description":"Enables the set_shadow command without any pre-configured scope.","commands":{"allow":["set_shadow"],"deny":[]}},"allow-set-simple-fullscreen":{"identifier":"allow-set-simple-fullscreen","description":"Enables the set_simple_fullscreen command without any pre-configured scope.","commands":{"allow":["set_simple_fullscreen"],"deny":[]}},"allow-set-size":{"identifier":"allow-set-size","description":"Enables the set_size command without any pre-configured scope.","commands":{"allow":["set_size"],"deny":[]}},"allow-set-size-constraints":{"identifier":"allow-set-size-constraints","description":"Enables the set_size_constraints command without any pre-configured scope.","commands":{"allow":["set_size_constraints"],"deny":[]}},"allow-set-skip-taskbar":{"identifier":"allow-set-skip-taskbar","description":"Enables the set_skip_taskbar command without any pre-configured scope.","commands":{"allow":["set_skip_taskbar"],"deny":[]}},"allow-set-theme":{"identifier":"allow-set-theme","description":"Enables the set_theme command without any pre-configured scope.","commands":{"allow":["set_theme"],"deny":[]}},"allow-set-title":{"identifier":"allow-set-title","description":"Enables the set_title command without any pre-configured scope.","commands":{"allow":["set_title"],"deny":[]}},"allow-set-title-bar-style":{"identifier":"allow-set-title-bar-style","description":"Enables the set_title_bar_style command without any pre-configured scope.","commands":{"allow":["set_title_bar_style"],"deny":[]}},"allow-set-visible-on-all-workspaces":{"identifier":"allow-set-visible-on-all-workspaces","description":"Enables the set_visible_on_all_workspaces command without any pre-configured scope.","commands":{"allow":["set_visible_on_all_workspaces"],"deny":[]}},"allow-show":{"identifier":"allow-show","description":"Enables the show command without any pre-configured scope.","commands":{"allow":["show"],"deny":[]}},"allow-start-dragging":{"identifier":"allow-start-dragging","description":"Enables the start_dragging command without any pre-configured scope.","commands":{"allow":["start_dragging"],"deny":[]}},"allow-start-resize-dragging":{"identifier":"allow-start-resize-dragging","description":"Enables the start_resize_dragging command without any pre-configured scope.","commands":{"allow":["start_resize_dragging"],"deny":[]}},"allow-theme":{"identifier":"allow-theme","description":"Enables the theme command without any pre-configured scope.","commands":{"allow":["theme"],"deny":[]}},"allow-title":{"identifier":"allow-title","description":"Enables the title command without any pre-configured scope.","commands":{"allow":["title"],"deny":[]}},"allow-toggle-maximize":{"identifier":"allow-toggle-maximize","description":"Enables the toggle_maximize command without any pre-configured scope.","commands":{"allow":["toggle_maximize"],"deny":[]}},"allow-unmaximize":{"identifier":"allow-unmaximize","description":"Enables the unmaximize command without any pre-configured scope.","commands":{"allow":["unmaximize"],"deny":[]}},"allow-unminimize":{"identifier":"allow-unminimize","description":"Enables the unminimize command without any pre-configured scope.","commands":{"allow":["unminimize"],"deny":[]}},"deny-available-monitors":{"identifier":"deny-available-monitors","description":"Denies the available_monitors command without any pre-configured scope.","commands":{"allow":[],"deny":["available_monitors"]}},"deny-center":{"identifier":"deny-center","description":"Denies the center command without any pre-configured scope.","commands":{"allow":[],"deny":["center"]}},"deny-close":{"identifier":"deny-close","description":"Denies the close command without any pre-configured scope.","commands":{"allow":[],"deny":["close"]}},"deny-create":{"identifier":"deny-create","description":"Denies the create command without any pre-configured scope.","commands":{"allow":[],"deny":["create"]}},"deny-current-monitor":{"identifier":"deny-current-monitor","description":"Denies the current_monitor command without any pre-configured scope.","commands":{"allow":[],"deny":["current_monitor"]}},"deny-cursor-position":{"identifier":"deny-cursor-position","description":"Denies the cursor_position command without any pre-configured scope.","commands":{"allow":[],"deny":["cursor_position"]}},"deny-destroy":{"identifier":"deny-destroy","description":"Denies the destroy command without any pre-configured scope.","commands":{"allow":[],"deny":["destroy"]}},"deny-get-all-windows":{"identifier":"deny-get-all-windows","description":"Denies the get_all_windows command without any pre-configured scope.","commands":{"allow":[],"deny":["get_all_windows"]}},"deny-hide":{"identifier":"deny-hide","description":"Denies the hide command without any pre-configured scope.","commands":{"allow":[],"deny":["hide"]}},"deny-inner-position":{"identifier":"deny-inner-position","description":"Denies the inner_position command without any pre-configured scope.","commands":{"allow":[],"deny":["inner_position"]}},"deny-inner-size":{"identifier":"deny-inner-size","description":"Denies the inner_size command without any pre-configured scope.","commands":{"allow":[],"deny":["inner_size"]}},"deny-internal-toggle-maximize":{"identifier":"deny-internal-toggle-maximize","description":"Denies the internal_toggle_maximize command without any pre-configured scope.","commands":{"allow":[],"deny":["internal_toggle_maximize"]}},"deny-is-always-on-top":{"identifier":"deny-is-always-on-top","description":"Denies the is_always_on_top command without any pre-configured scope.","commands":{"allow":[],"deny":["is_always_on_top"]}},"deny-is-closable":{"identifier":"deny-is-closable","description":"Denies the is_closable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_closable"]}},"deny-is-decorated":{"identifier":"deny-is-decorated","description":"Denies the is_decorated command without any pre-configured scope.","commands":{"allow":[],"deny":["is_decorated"]}},"deny-is-enabled":{"identifier":"deny-is-enabled","description":"Denies the is_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["is_enabled"]}},"deny-is-focused":{"identifier":"deny-is-focused","description":"Denies the is_focused command without any pre-configured scope.","commands":{"allow":[],"deny":["is_focused"]}},"deny-is-fullscreen":{"identifier":"deny-is-fullscreen","description":"Denies the is_fullscreen command without any pre-configured scope.","commands":{"allow":[],"deny":["is_fullscreen"]}},"deny-is-maximizable":{"identifier":"deny-is-maximizable","description":"Denies the is_maximizable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_maximizable"]}},"deny-is-maximized":{"identifier":"deny-is-maximized","description":"Denies the is_maximized command without any pre-configured scope.","commands":{"allow":[],"deny":["is_maximized"]}},"deny-is-minimizable":{"identifier":"deny-is-minimizable","description":"Denies the is_minimizable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_minimizable"]}},"deny-is-minimized":{"identifier":"deny-is-minimized","description":"Denies the is_minimized command without any pre-configured scope.","commands":{"allow":[],"deny":["is_minimized"]}},"deny-is-resizable":{"identifier":"deny-is-resizable","description":"Denies the is_resizable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_resizable"]}},"deny-is-visible":{"identifier":"deny-is-visible","description":"Denies the is_visible command without any pre-configured scope.","commands":{"allow":[],"deny":["is_visible"]}},"deny-maximize":{"identifier":"deny-maximize","description":"Denies the maximize command without any pre-configured scope.","commands":{"allow":[],"deny":["maximize"]}},"deny-minimize":{"identifier":"deny-minimize","description":"Denies the minimize command without any pre-configured scope.","commands":{"allow":[],"deny":["minimize"]}},"deny-monitor-from-point":{"identifier":"deny-monitor-from-point","description":"Denies the monitor_from_point command without any pre-configured scope.","commands":{"allow":[],"deny":["monitor_from_point"]}},"deny-outer-position":{"identifier":"deny-outer-position","description":"Denies the outer_position command without any pre-configured scope.","commands":{"allow":[],"deny":["outer_position"]}},"deny-outer-size":{"identifier":"deny-outer-size","description":"Denies the outer_size command without any pre-configured scope.","commands":{"allow":[],"deny":["outer_size"]}},"deny-primary-monitor":{"identifier":"deny-primary-monitor","description":"Denies the primary_monitor command without any pre-configured scope.","commands":{"allow":[],"deny":["primary_monitor"]}},"deny-request-user-attention":{"identifier":"deny-request-user-attention","description":"Denies the request_user_attention command without any pre-configured scope.","commands":{"allow":[],"deny":["request_user_attention"]}},"deny-scale-factor":{"identifier":"deny-scale-factor","description":"Denies the scale_factor command without any pre-configured scope.","commands":{"allow":[],"deny":["scale_factor"]}},"deny-set-always-on-bottom":{"identifier":"deny-set-always-on-bottom","description":"Denies the set_always_on_bottom command without any pre-configured scope.","commands":{"allow":[],"deny":["set_always_on_bottom"]}},"deny-set-always-on-top":{"identifier":"deny-set-always-on-top","description":"Denies the set_always_on_top command without any pre-configured scope.","commands":{"allow":[],"deny":["set_always_on_top"]}},"deny-set-background-color":{"identifier":"deny-set-background-color","description":"Denies the set_background_color command without any pre-configured scope.","commands":{"allow":[],"deny":["set_background_color"]}},"deny-set-badge-count":{"identifier":"deny-set-badge-count","description":"Denies the set_badge_count command without any pre-configured scope.","commands":{"allow":[],"deny":["set_badge_count"]}},"deny-set-badge-label":{"identifier":"deny-set-badge-label","description":"Denies the set_badge_label command without any pre-configured scope.","commands":{"allow":[],"deny":["set_badge_label"]}},"deny-set-closable":{"identifier":"deny-set-closable","description":"Denies the set_closable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_closable"]}},"deny-set-content-protected":{"identifier":"deny-set-content-protected","description":"Denies the set_content_protected command without any pre-configured scope.","commands":{"allow":[],"deny":["set_content_protected"]}},"deny-set-cursor-grab":{"identifier":"deny-set-cursor-grab","description":"Denies the set_cursor_grab command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_grab"]}},"deny-set-cursor-icon":{"identifier":"deny-set-cursor-icon","description":"Denies the set_cursor_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_icon"]}},"deny-set-cursor-position":{"identifier":"deny-set-cursor-position","description":"Denies the set_cursor_position command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_position"]}},"deny-set-cursor-visible":{"identifier":"deny-set-cursor-visible","description":"Denies the set_cursor_visible command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_visible"]}},"deny-set-decorations":{"identifier":"deny-set-decorations","description":"Denies the set_decorations command without any pre-configured scope.","commands":{"allow":[],"deny":["set_decorations"]}},"deny-set-effects":{"identifier":"deny-set-effects","description":"Denies the set_effects command without any pre-configured scope.","commands":{"allow":[],"deny":["set_effects"]}},"deny-set-enabled":{"identifier":"deny-set-enabled","description":"Denies the set_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["set_enabled"]}},"deny-set-focus":{"identifier":"deny-set-focus","description":"Denies the set_focus command without any pre-configured scope.","commands":{"allow":[],"deny":["set_focus"]}},"deny-set-focusable":{"identifier":"deny-set-focusable","description":"Denies the set_focusable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_focusable"]}},"deny-set-fullscreen":{"identifier":"deny-set-fullscreen","description":"Denies the set_fullscreen command without any pre-configured scope.","commands":{"allow":[],"deny":["set_fullscreen"]}},"deny-set-icon":{"identifier":"deny-set-icon","description":"Denies the set_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon"]}},"deny-set-ignore-cursor-events":{"identifier":"deny-set-ignore-cursor-events","description":"Denies the set_ignore_cursor_events command without any pre-configured scope.","commands":{"allow":[],"deny":["set_ignore_cursor_events"]}},"deny-set-max-size":{"identifier":"deny-set-max-size","description":"Denies the set_max_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_max_size"]}},"deny-set-maximizable":{"identifier":"deny-set-maximizable","description":"Denies the set_maximizable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_maximizable"]}},"deny-set-min-size":{"identifier":"deny-set-min-size","description":"Denies the set_min_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_min_size"]}},"deny-set-minimizable":{"identifier":"deny-set-minimizable","description":"Denies the set_minimizable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_minimizable"]}},"deny-set-overlay-icon":{"identifier":"deny-set-overlay-icon","description":"Denies the set_overlay_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_overlay_icon"]}},"deny-set-position":{"identifier":"deny-set-position","description":"Denies the set_position command without any pre-configured scope.","commands":{"allow":[],"deny":["set_position"]}},"deny-set-progress-bar":{"identifier":"deny-set-progress-bar","description":"Denies the set_progress_bar command without any pre-configured scope.","commands":{"allow":[],"deny":["set_progress_bar"]}},"deny-set-resizable":{"identifier":"deny-set-resizable","description":"Denies the set_resizable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_resizable"]}},"deny-set-shadow":{"identifier":"deny-set-shadow","description":"Denies the set_shadow command without any pre-configured scope.","commands":{"allow":[],"deny":["set_shadow"]}},"deny-set-simple-fullscreen":{"identifier":"deny-set-simple-fullscreen","description":"Denies the set_simple_fullscreen command without any pre-configured scope.","commands":{"allow":[],"deny":["set_simple_fullscreen"]}},"deny-set-size":{"identifier":"deny-set-size","description":"Denies the set_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_size"]}},"deny-set-size-constraints":{"identifier":"deny-set-size-constraints","description":"Denies the set_size_constraints command without any pre-configured scope.","commands":{"allow":[],"deny":["set_size_constraints"]}},"deny-set-skip-taskbar":{"identifier":"deny-set-skip-taskbar","description":"Denies the set_skip_taskbar command without any pre-configured scope.","commands":{"allow":[],"deny":["set_skip_taskbar"]}},"deny-set-theme":{"identifier":"deny-set-theme","description":"Denies the set_theme command without any pre-configured scope.","commands":{"allow":[],"deny":["set_theme"]}},"deny-set-title":{"identifier":"deny-set-title","description":"Denies the set_title command without any pre-configured scope.","commands":{"allow":[],"deny":["set_title"]}},"deny-set-title-bar-style":{"identifier":"deny-set-title-bar-style","description":"Denies the set_title_bar_style command without any pre-configured scope.","commands":{"allow":[],"deny":["set_title_bar_style"]}},"deny-set-visible-on-all-workspaces":{"identifier":"deny-set-visible-on-all-workspaces","description":"Denies the set_visible_on_all_workspaces command without any pre-configured scope.","commands":{"allow":[],"deny":["set_visible_on_all_workspaces"]}},"deny-show":{"identifier":"deny-show","description":"Denies the show command without any pre-configured scope.","commands":{"allow":[],"deny":["show"]}},"deny-start-dragging":{"identifier":"deny-start-dragging","description":"Denies the start_dragging command without any pre-configured scope.","commands":{"allow":[],"deny":["start_dragging"]}},"deny-start-resize-dragging":{"identifier":"deny-start-resize-dragging","description":"Denies the start_resize_dragging command without any pre-configured scope.","commands":{"allow":[],"deny":["start_resize_dragging"]}},"deny-theme":{"identifier":"deny-theme","description":"Denies the theme command without any pre-configured scope.","commands":{"allow":[],"deny":["theme"]}},"deny-title":{"identifier":"deny-title","description":"Denies the title command without any pre-configured scope.","commands":{"allow":[],"deny":["title"]}},"deny-toggle-maximize":{"identifier":"deny-toggle-maximize","description":"Denies the toggle_maximize command without any pre-configured scope.","commands":{"allow":[],"deny":["toggle_maximize"]}},"deny-unmaximize":{"identifier":"deny-unmaximize","description":"Denies the unmaximize command without any pre-configured scope.","commands":{"allow":[],"deny":["unmaximize"]}},"deny-unminimize":{"identifier":"deny-unminimize","description":"Denies the unminimize command without any pre-configured scope.","commands":{"allow":[],"deny":["unminimize"]}}},"permission_sets":{},"global_scope_schema":null}}
\ No newline at end of file
+{"__app-acl__":{"default_permission":null,"permissions":{"dmnote-allow-all":{"identifier":"dmnote-allow-all","description":"Full DM Note command access for renderer","commands":{"allow":["app_auto_update","app_bootstrap","app_open_external","app_quit","app_restart","counter_animation_create","counter_animation_delete","counter_animation_list","counter_animation_update","css_get","css_get_use","css_load","css_reset","css_set_content","css_tab_clear","css_tab_get","css_tab_get_all","css_tab_load","css_tab_set","css_tab_toggle","css_toggle","custom_tabs_create","custom_tabs_delete","custom_tabs_list","custom_tabs_restore","custom_tabs_select","font_load","get_cursor_settings","graph_positions_get","graph_positions_update","image_load","js_get","js_get_use","js_load","js_reload","js_remove_plugin","js_reset","js_set_content","js_set_plugin_enabled","js_toggle","key_sound_get_output_state","key_sound_get_status","key_sound_list_output_devices","key_sound_load_soundpack","key_sound_set_enabled","key_sound_set_latency_logging","key_sound_set_output_backend","key_sound_set_volume","key_sound_unload_soundpack","keys_get","keys_get_counters","keys_reset_all","keys_reset_counters","keys_reset_counters_mode","keys_reset_mode","keys_reset_single_counter","keys_set_counters","keys_set_mode","keys_update","knob_positions_get","knob_positions_update","layer_groups_get","layer_groups_update","note_tab_clear","note_tab_get","note_tab_get_all","note_tab_set","obs_regenerate_token","obs_start","obs_status","obs_stop","overlay_get","overlay_resize","overlay_set_anchor","overlay_set_lock","overlay_set_visible","plugin_bridge_send","plugin_bridge_send_to","plugin_storage_clear","plugin_storage_clear_by_prefix","plugin_storage_get","plugin_storage_has_data","plugin_storage_keys","plugin_storage_remove","plugin_storage_set","positions_get","positions_update","preset_load","preset_load_tab","preset_save","preset_save_tab","raw_input_subscribe","raw_input_unsubscribe","settings_get","settings_update","sound_delete","sound_list","sound_load","sound_load_original","sound_rename","sound_save_processed_wav","sound_set_enabled","sound_set_hidden","sound_update_processed_wav","stat_positions_get","stat_positions_update","window_close","window_minimize","window_open_devtools_all","window_show_main"],"deny":[]}}},"permission_sets":{},"global_scope_schema":null},"core":{"default_permission":{"identifier":"default","description":"Default core plugins set.","permissions":["core:path:default","core:event:default","core:window:default","core:webview:default","core:app:default","core:image:default","core:resources:default","core:menu:default","core:tray:default"]},"permissions":{},"permission_sets":{},"global_scope_schema":null},"core:app":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin.","permissions":["allow-version","allow-name","allow-tauri-version","allow-identifier","allow-bundle-type","allow-register-listener","allow-remove-listener"]},"permissions":{"allow-app-hide":{"identifier":"allow-app-hide","description":"Enables the app_hide command without any pre-configured scope.","commands":{"allow":["app_hide"],"deny":[]}},"allow-app-show":{"identifier":"allow-app-show","description":"Enables the app_show command without any pre-configured scope.","commands":{"allow":["app_show"],"deny":[]}},"allow-bundle-type":{"identifier":"allow-bundle-type","description":"Enables the bundle_type command without any pre-configured scope.","commands":{"allow":["bundle_type"],"deny":[]}},"allow-default-window-icon":{"identifier":"allow-default-window-icon","description":"Enables the default_window_icon command without any pre-configured scope.","commands":{"allow":["default_window_icon"],"deny":[]}},"allow-fetch-data-store-identifiers":{"identifier":"allow-fetch-data-store-identifiers","description":"Enables the fetch_data_store_identifiers command without any pre-configured scope.","commands":{"allow":["fetch_data_store_identifiers"],"deny":[]}},"allow-identifier":{"identifier":"allow-identifier","description":"Enables the identifier command without any pre-configured scope.","commands":{"allow":["identifier"],"deny":[]}},"allow-name":{"identifier":"allow-name","description":"Enables the name command without any pre-configured scope.","commands":{"allow":["name"],"deny":[]}},"allow-register-listener":{"identifier":"allow-register-listener","description":"Enables the register_listener command without any pre-configured scope.","commands":{"allow":["register_listener"],"deny":[]}},"allow-remove-data-store":{"identifier":"allow-remove-data-store","description":"Enables the remove_data_store command without any pre-configured scope.","commands":{"allow":["remove_data_store"],"deny":[]}},"allow-remove-listener":{"identifier":"allow-remove-listener","description":"Enables the remove_listener command without any pre-configured scope.","commands":{"allow":["remove_listener"],"deny":[]}},"allow-set-app-theme":{"identifier":"allow-set-app-theme","description":"Enables the set_app_theme command without any pre-configured scope.","commands":{"allow":["set_app_theme"],"deny":[]}},"allow-set-dock-visibility":{"identifier":"allow-set-dock-visibility","description":"Enables the set_dock_visibility command without any pre-configured scope.","commands":{"allow":["set_dock_visibility"],"deny":[]}},"allow-tauri-version":{"identifier":"allow-tauri-version","description":"Enables the tauri_version command without any pre-configured scope.","commands":{"allow":["tauri_version"],"deny":[]}},"allow-version":{"identifier":"allow-version","description":"Enables the version command without any pre-configured scope.","commands":{"allow":["version"],"deny":[]}},"deny-app-hide":{"identifier":"deny-app-hide","description":"Denies the app_hide command without any pre-configured scope.","commands":{"allow":[],"deny":["app_hide"]}},"deny-app-show":{"identifier":"deny-app-show","description":"Denies the app_show command without any pre-configured scope.","commands":{"allow":[],"deny":["app_show"]}},"deny-bundle-type":{"identifier":"deny-bundle-type","description":"Denies the bundle_type command without any pre-configured scope.","commands":{"allow":[],"deny":["bundle_type"]}},"deny-default-window-icon":{"identifier":"deny-default-window-icon","description":"Denies the default_window_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["default_window_icon"]}},"deny-fetch-data-store-identifiers":{"identifier":"deny-fetch-data-store-identifiers","description":"Denies the fetch_data_store_identifiers command without any pre-configured scope.","commands":{"allow":[],"deny":["fetch_data_store_identifiers"]}},"deny-identifier":{"identifier":"deny-identifier","description":"Denies the identifier command without any pre-configured scope.","commands":{"allow":[],"deny":["identifier"]}},"deny-name":{"identifier":"deny-name","description":"Denies the name command without any pre-configured scope.","commands":{"allow":[],"deny":["name"]}},"deny-register-listener":{"identifier":"deny-register-listener","description":"Denies the register_listener command without any pre-configured scope.","commands":{"allow":[],"deny":["register_listener"]}},"deny-remove-data-store":{"identifier":"deny-remove-data-store","description":"Denies the remove_data_store command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_data_store"]}},"deny-remove-listener":{"identifier":"deny-remove-listener","description":"Denies the remove_listener command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_listener"]}},"deny-set-app-theme":{"identifier":"deny-set-app-theme","description":"Denies the set_app_theme command without any pre-configured scope.","commands":{"allow":[],"deny":["set_app_theme"]}},"deny-set-dock-visibility":{"identifier":"deny-set-dock-visibility","description":"Denies the set_dock_visibility command without any pre-configured scope.","commands":{"allow":[],"deny":["set_dock_visibility"]}},"deny-tauri-version":{"identifier":"deny-tauri-version","description":"Denies the tauri_version command without any pre-configured scope.","commands":{"allow":[],"deny":["tauri_version"]}},"deny-version":{"identifier":"deny-version","description":"Denies the version command without any pre-configured scope.","commands":{"allow":[],"deny":["version"]}}},"permission_sets":{},"global_scope_schema":null},"core:event":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-listen","allow-unlisten","allow-emit","allow-emit-to"]},"permissions":{"allow-emit":{"identifier":"allow-emit","description":"Enables the emit command without any pre-configured scope.","commands":{"allow":["emit"],"deny":[]}},"allow-emit-to":{"identifier":"allow-emit-to","description":"Enables the emit_to command without any pre-configured scope.","commands":{"allow":["emit_to"],"deny":[]}},"allow-listen":{"identifier":"allow-listen","description":"Enables the listen command without any pre-configured scope.","commands":{"allow":["listen"],"deny":[]}},"allow-unlisten":{"identifier":"allow-unlisten","description":"Enables the unlisten command without any pre-configured scope.","commands":{"allow":["unlisten"],"deny":[]}},"deny-emit":{"identifier":"deny-emit","description":"Denies the emit command without any pre-configured scope.","commands":{"allow":[],"deny":["emit"]}},"deny-emit-to":{"identifier":"deny-emit-to","description":"Denies the emit_to command without any pre-configured scope.","commands":{"allow":[],"deny":["emit_to"]}},"deny-listen":{"identifier":"deny-listen","description":"Denies the listen command without any pre-configured scope.","commands":{"allow":[],"deny":["listen"]}},"deny-unlisten":{"identifier":"deny-unlisten","description":"Denies the unlisten command without any pre-configured scope.","commands":{"allow":[],"deny":["unlisten"]}}},"permission_sets":{},"global_scope_schema":null},"core:image":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-new","allow-from-bytes","allow-from-path","allow-rgba","allow-size"]},"permissions":{"allow-from-bytes":{"identifier":"allow-from-bytes","description":"Enables the from_bytes command without any pre-configured scope.","commands":{"allow":["from_bytes"],"deny":[]}},"allow-from-path":{"identifier":"allow-from-path","description":"Enables the from_path command without any pre-configured scope.","commands":{"allow":["from_path"],"deny":[]}},"allow-new":{"identifier":"allow-new","description":"Enables the new command without any pre-configured scope.","commands":{"allow":["new"],"deny":[]}},"allow-rgba":{"identifier":"allow-rgba","description":"Enables the rgba command without any pre-configured scope.","commands":{"allow":["rgba"],"deny":[]}},"allow-size":{"identifier":"allow-size","description":"Enables the size command without any pre-configured scope.","commands":{"allow":["size"],"deny":[]}},"deny-from-bytes":{"identifier":"deny-from-bytes","description":"Denies the from_bytes command without any pre-configured scope.","commands":{"allow":[],"deny":["from_bytes"]}},"deny-from-path":{"identifier":"deny-from-path","description":"Denies the from_path command without any pre-configured scope.","commands":{"allow":[],"deny":["from_path"]}},"deny-new":{"identifier":"deny-new","description":"Denies the new command without any pre-configured scope.","commands":{"allow":[],"deny":["new"]}},"deny-rgba":{"identifier":"deny-rgba","description":"Denies the rgba command without any pre-configured scope.","commands":{"allow":[],"deny":["rgba"]}},"deny-size":{"identifier":"deny-size","description":"Denies the size command without any pre-configured scope.","commands":{"allow":[],"deny":["size"]}}},"permission_sets":{},"global_scope_schema":null},"core:menu":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-new","allow-append","allow-prepend","allow-insert","allow-remove","allow-remove-at","allow-items","allow-get","allow-popup","allow-create-default","allow-set-as-app-menu","allow-set-as-window-menu","allow-text","allow-set-text","allow-is-enabled","allow-set-enabled","allow-set-accelerator","allow-set-as-windows-menu-for-nsapp","allow-set-as-help-menu-for-nsapp","allow-is-checked","allow-set-checked","allow-set-icon"]},"permissions":{"allow-append":{"identifier":"allow-append","description":"Enables the append command without any pre-configured scope.","commands":{"allow":["append"],"deny":[]}},"allow-create-default":{"identifier":"allow-create-default","description":"Enables the create_default command without any pre-configured scope.","commands":{"allow":["create_default"],"deny":[]}},"allow-get":{"identifier":"allow-get","description":"Enables the get command without any pre-configured scope.","commands":{"allow":["get"],"deny":[]}},"allow-insert":{"identifier":"allow-insert","description":"Enables the insert command without any pre-configured scope.","commands":{"allow":["insert"],"deny":[]}},"allow-is-checked":{"identifier":"allow-is-checked","description":"Enables the is_checked command without any pre-configured scope.","commands":{"allow":["is_checked"],"deny":[]}},"allow-is-enabled":{"identifier":"allow-is-enabled","description":"Enables the is_enabled command without any pre-configured scope.","commands":{"allow":["is_enabled"],"deny":[]}},"allow-items":{"identifier":"allow-items","description":"Enables the items command without any pre-configured scope.","commands":{"allow":["items"],"deny":[]}},"allow-new":{"identifier":"allow-new","description":"Enables the new command without any pre-configured scope.","commands":{"allow":["new"],"deny":[]}},"allow-popup":{"identifier":"allow-popup","description":"Enables the popup command without any pre-configured scope.","commands":{"allow":["popup"],"deny":[]}},"allow-prepend":{"identifier":"allow-prepend","description":"Enables the prepend command without any pre-configured scope.","commands":{"allow":["prepend"],"deny":[]}},"allow-remove":{"identifier":"allow-remove","description":"Enables the remove command without any pre-configured scope.","commands":{"allow":["remove"],"deny":[]}},"allow-remove-at":{"identifier":"allow-remove-at","description":"Enables the remove_at command without any pre-configured scope.","commands":{"allow":["remove_at"],"deny":[]}},"allow-set-accelerator":{"identifier":"allow-set-accelerator","description":"Enables the set_accelerator command without any pre-configured scope.","commands":{"allow":["set_accelerator"],"deny":[]}},"allow-set-as-app-menu":{"identifier":"allow-set-as-app-menu","description":"Enables the set_as_app_menu command without any pre-configured scope.","commands":{"allow":["set_as_app_menu"],"deny":[]}},"allow-set-as-help-menu-for-nsapp":{"identifier":"allow-set-as-help-menu-for-nsapp","description":"Enables the set_as_help_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":["set_as_help_menu_for_nsapp"],"deny":[]}},"allow-set-as-window-menu":{"identifier":"allow-set-as-window-menu","description":"Enables the set_as_window_menu command without any pre-configured scope.","commands":{"allow":["set_as_window_menu"],"deny":[]}},"allow-set-as-windows-menu-for-nsapp":{"identifier":"allow-set-as-windows-menu-for-nsapp","description":"Enables the set_as_windows_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":["set_as_windows_menu_for_nsapp"],"deny":[]}},"allow-set-checked":{"identifier":"allow-set-checked","description":"Enables the set_checked command without any pre-configured scope.","commands":{"allow":["set_checked"],"deny":[]}},"allow-set-enabled":{"identifier":"allow-set-enabled","description":"Enables the set_enabled command without any pre-configured scope.","commands":{"allow":["set_enabled"],"deny":[]}},"allow-set-icon":{"identifier":"allow-set-icon","description":"Enables the set_icon command without any pre-configured scope.","commands":{"allow":["set_icon"],"deny":[]}},"allow-set-text":{"identifier":"allow-set-text","description":"Enables the set_text command without any pre-configured scope.","commands":{"allow":["set_text"],"deny":[]}},"allow-text":{"identifier":"allow-text","description":"Enables the text command without any pre-configured scope.","commands":{"allow":["text"],"deny":[]}},"deny-append":{"identifier":"deny-append","description":"Denies the append command without any pre-configured scope.","commands":{"allow":[],"deny":["append"]}},"deny-create-default":{"identifier":"deny-create-default","description":"Denies the create_default command without any pre-configured scope.","commands":{"allow":[],"deny":["create_default"]}},"deny-get":{"identifier":"deny-get","description":"Denies the get command without any pre-configured scope.","commands":{"allow":[],"deny":["get"]}},"deny-insert":{"identifier":"deny-insert","description":"Denies the insert command without any pre-configured scope.","commands":{"allow":[],"deny":["insert"]}},"deny-is-checked":{"identifier":"deny-is-checked","description":"Denies the is_checked command without any pre-configured scope.","commands":{"allow":[],"deny":["is_checked"]}},"deny-is-enabled":{"identifier":"deny-is-enabled","description":"Denies the is_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["is_enabled"]}},"deny-items":{"identifier":"deny-items","description":"Denies the items command without any pre-configured scope.","commands":{"allow":[],"deny":["items"]}},"deny-new":{"identifier":"deny-new","description":"Denies the new command without any pre-configured scope.","commands":{"allow":[],"deny":["new"]}},"deny-popup":{"identifier":"deny-popup","description":"Denies the popup command without any pre-configured scope.","commands":{"allow":[],"deny":["popup"]}},"deny-prepend":{"identifier":"deny-prepend","description":"Denies the prepend command without any pre-configured scope.","commands":{"allow":[],"deny":["prepend"]}},"deny-remove":{"identifier":"deny-remove","description":"Denies the remove command without any pre-configured scope.","commands":{"allow":[],"deny":["remove"]}},"deny-remove-at":{"identifier":"deny-remove-at","description":"Denies the remove_at command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_at"]}},"deny-set-accelerator":{"identifier":"deny-set-accelerator","description":"Denies the set_accelerator command without any pre-configured scope.","commands":{"allow":[],"deny":["set_accelerator"]}},"deny-set-as-app-menu":{"identifier":"deny-set-as-app-menu","description":"Denies the set_as_app_menu command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_app_menu"]}},"deny-set-as-help-menu-for-nsapp":{"identifier":"deny-set-as-help-menu-for-nsapp","description":"Denies the set_as_help_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_help_menu_for_nsapp"]}},"deny-set-as-window-menu":{"identifier":"deny-set-as-window-menu","description":"Denies the set_as_window_menu command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_window_menu"]}},"deny-set-as-windows-menu-for-nsapp":{"identifier":"deny-set-as-windows-menu-for-nsapp","description":"Denies the set_as_windows_menu_for_nsapp command without any pre-configured scope.","commands":{"allow":[],"deny":["set_as_windows_menu_for_nsapp"]}},"deny-set-checked":{"identifier":"deny-set-checked","description":"Denies the set_checked command without any pre-configured scope.","commands":{"allow":[],"deny":["set_checked"]}},"deny-set-enabled":{"identifier":"deny-set-enabled","description":"Denies the set_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["set_enabled"]}},"deny-set-icon":{"identifier":"deny-set-icon","description":"Denies the set_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon"]}},"deny-set-text":{"identifier":"deny-set-text","description":"Denies the set_text command without any pre-configured scope.","commands":{"allow":[],"deny":["set_text"]}},"deny-text":{"identifier":"deny-text","description":"Denies the text command without any pre-configured scope.","commands":{"allow":[],"deny":["text"]}}},"permission_sets":{},"global_scope_schema":null},"core:path":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-resolve-directory","allow-resolve","allow-normalize","allow-join","allow-dirname","allow-extname","allow-basename","allow-is-absolute"]},"permissions":{"allow-basename":{"identifier":"allow-basename","description":"Enables the basename command without any pre-configured scope.","commands":{"allow":["basename"],"deny":[]}},"allow-dirname":{"identifier":"allow-dirname","description":"Enables the dirname command without any pre-configured scope.","commands":{"allow":["dirname"],"deny":[]}},"allow-extname":{"identifier":"allow-extname","description":"Enables the extname command without any pre-configured scope.","commands":{"allow":["extname"],"deny":[]}},"allow-is-absolute":{"identifier":"allow-is-absolute","description":"Enables the is_absolute command without any pre-configured scope.","commands":{"allow":["is_absolute"],"deny":[]}},"allow-join":{"identifier":"allow-join","description":"Enables the join command without any pre-configured scope.","commands":{"allow":["join"],"deny":[]}},"allow-normalize":{"identifier":"allow-normalize","description":"Enables the normalize command without any pre-configured scope.","commands":{"allow":["normalize"],"deny":[]}},"allow-resolve":{"identifier":"allow-resolve","description":"Enables the resolve command without any pre-configured scope.","commands":{"allow":["resolve"],"deny":[]}},"allow-resolve-directory":{"identifier":"allow-resolve-directory","description":"Enables the resolve_directory command without any pre-configured scope.","commands":{"allow":["resolve_directory"],"deny":[]}},"deny-basename":{"identifier":"deny-basename","description":"Denies the basename command without any pre-configured scope.","commands":{"allow":[],"deny":["basename"]}},"deny-dirname":{"identifier":"deny-dirname","description":"Denies the dirname command without any pre-configured scope.","commands":{"allow":[],"deny":["dirname"]}},"deny-extname":{"identifier":"deny-extname","description":"Denies the extname command without any pre-configured scope.","commands":{"allow":[],"deny":["extname"]}},"deny-is-absolute":{"identifier":"deny-is-absolute","description":"Denies the is_absolute command without any pre-configured scope.","commands":{"allow":[],"deny":["is_absolute"]}},"deny-join":{"identifier":"deny-join","description":"Denies the join command without any pre-configured scope.","commands":{"allow":[],"deny":["join"]}},"deny-normalize":{"identifier":"deny-normalize","description":"Denies the normalize command without any pre-configured scope.","commands":{"allow":[],"deny":["normalize"]}},"deny-resolve":{"identifier":"deny-resolve","description":"Denies the resolve command without any pre-configured scope.","commands":{"allow":[],"deny":["resolve"]}},"deny-resolve-directory":{"identifier":"deny-resolve-directory","description":"Denies the resolve_directory command without any pre-configured scope.","commands":{"allow":[],"deny":["resolve_directory"]}}},"permission_sets":{},"global_scope_schema":null},"core:resources":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-close"]},"permissions":{"allow-close":{"identifier":"allow-close","description":"Enables the close command without any pre-configured scope.","commands":{"allow":["close"],"deny":[]}},"deny-close":{"identifier":"deny-close","description":"Denies the close command without any pre-configured scope.","commands":{"allow":[],"deny":["close"]}}},"permission_sets":{},"global_scope_schema":null},"core:tray":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin, which enables all commands.","permissions":["allow-new","allow-get-by-id","allow-remove-by-id","allow-set-icon","allow-set-menu","allow-set-tooltip","allow-set-title","allow-set-visible","allow-set-temp-dir-path","allow-set-icon-as-template","allow-set-show-menu-on-left-click"]},"permissions":{"allow-get-by-id":{"identifier":"allow-get-by-id","description":"Enables the get_by_id command without any pre-configured scope.","commands":{"allow":["get_by_id"],"deny":[]}},"allow-new":{"identifier":"allow-new","description":"Enables the new command without any pre-configured scope.","commands":{"allow":["new"],"deny":[]}},"allow-remove-by-id":{"identifier":"allow-remove-by-id","description":"Enables the remove_by_id command without any pre-configured scope.","commands":{"allow":["remove_by_id"],"deny":[]}},"allow-set-icon":{"identifier":"allow-set-icon","description":"Enables the set_icon command without any pre-configured scope.","commands":{"allow":["set_icon"],"deny":[]}},"allow-set-icon-as-template":{"identifier":"allow-set-icon-as-template","description":"Enables the set_icon_as_template command without any pre-configured scope.","commands":{"allow":["set_icon_as_template"],"deny":[]}},"allow-set-menu":{"identifier":"allow-set-menu","description":"Enables the set_menu command without any pre-configured scope.","commands":{"allow":["set_menu"],"deny":[]}},"allow-set-show-menu-on-left-click":{"identifier":"allow-set-show-menu-on-left-click","description":"Enables the set_show_menu_on_left_click command without any pre-configured scope.","commands":{"allow":["set_show_menu_on_left_click"],"deny":[]}},"allow-set-temp-dir-path":{"identifier":"allow-set-temp-dir-path","description":"Enables the set_temp_dir_path command without any pre-configured scope.","commands":{"allow":["set_temp_dir_path"],"deny":[]}},"allow-set-title":{"identifier":"allow-set-title","description":"Enables the set_title command without any pre-configured scope.","commands":{"allow":["set_title"],"deny":[]}},"allow-set-tooltip":{"identifier":"allow-set-tooltip","description":"Enables the set_tooltip command without any pre-configured scope.","commands":{"allow":["set_tooltip"],"deny":[]}},"allow-set-visible":{"identifier":"allow-set-visible","description":"Enables the set_visible command without any pre-configured scope.","commands":{"allow":["set_visible"],"deny":[]}},"deny-get-by-id":{"identifier":"deny-get-by-id","description":"Denies the get_by_id command without any pre-configured scope.","commands":{"allow":[],"deny":["get_by_id"]}},"deny-new":{"identifier":"deny-new","description":"Denies the new command without any pre-configured scope.","commands":{"allow":[],"deny":["new"]}},"deny-remove-by-id":{"identifier":"deny-remove-by-id","description":"Denies the remove_by_id command without any pre-configured scope.","commands":{"allow":[],"deny":["remove_by_id"]}},"deny-set-icon":{"identifier":"deny-set-icon","description":"Denies the set_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon"]}},"deny-set-icon-as-template":{"identifier":"deny-set-icon-as-template","description":"Denies the set_icon_as_template command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon_as_template"]}},"deny-set-menu":{"identifier":"deny-set-menu","description":"Denies the set_menu command without any pre-configured scope.","commands":{"allow":[],"deny":["set_menu"]}},"deny-set-show-menu-on-left-click":{"identifier":"deny-set-show-menu-on-left-click","description":"Denies the set_show_menu_on_left_click command without any pre-configured scope.","commands":{"allow":[],"deny":["set_show_menu_on_left_click"]}},"deny-set-temp-dir-path":{"identifier":"deny-set-temp-dir-path","description":"Denies the set_temp_dir_path command without any pre-configured scope.","commands":{"allow":[],"deny":["set_temp_dir_path"]}},"deny-set-title":{"identifier":"deny-set-title","description":"Denies the set_title command without any pre-configured scope.","commands":{"allow":[],"deny":["set_title"]}},"deny-set-tooltip":{"identifier":"deny-set-tooltip","description":"Denies the set_tooltip command without any pre-configured scope.","commands":{"allow":[],"deny":["set_tooltip"]}},"deny-set-visible":{"identifier":"deny-set-visible","description":"Denies the set_visible command without any pre-configured scope.","commands":{"allow":[],"deny":["set_visible"]}}},"permission_sets":{},"global_scope_schema":null},"core:webview":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin.","permissions":["allow-get-all-webviews","allow-webview-position","allow-webview-size","allow-internal-toggle-devtools"]},"permissions":{"allow-clear-all-browsing-data":{"identifier":"allow-clear-all-browsing-data","description":"Enables the clear_all_browsing_data command without any pre-configured scope.","commands":{"allow":["clear_all_browsing_data"],"deny":[]}},"allow-create-webview":{"identifier":"allow-create-webview","description":"Enables the create_webview command without any pre-configured scope.","commands":{"allow":["create_webview"],"deny":[]}},"allow-create-webview-window":{"identifier":"allow-create-webview-window","description":"Enables the create_webview_window command without any pre-configured scope.","commands":{"allow":["create_webview_window"],"deny":[]}},"allow-get-all-webviews":{"identifier":"allow-get-all-webviews","description":"Enables the get_all_webviews command without any pre-configured scope.","commands":{"allow":["get_all_webviews"],"deny":[]}},"allow-internal-toggle-devtools":{"identifier":"allow-internal-toggle-devtools","description":"Enables the internal_toggle_devtools command without any pre-configured scope.","commands":{"allow":["internal_toggle_devtools"],"deny":[]}},"allow-print":{"identifier":"allow-print","description":"Enables the print command without any pre-configured scope.","commands":{"allow":["print"],"deny":[]}},"allow-reparent":{"identifier":"allow-reparent","description":"Enables the reparent command without any pre-configured scope.","commands":{"allow":["reparent"],"deny":[]}},"allow-set-webview-auto-resize":{"identifier":"allow-set-webview-auto-resize","description":"Enables the set_webview_auto_resize command without any pre-configured scope.","commands":{"allow":["set_webview_auto_resize"],"deny":[]}},"allow-set-webview-background-color":{"identifier":"allow-set-webview-background-color","description":"Enables the set_webview_background_color command without any pre-configured scope.","commands":{"allow":["set_webview_background_color"],"deny":[]}},"allow-set-webview-focus":{"identifier":"allow-set-webview-focus","description":"Enables the set_webview_focus command without any pre-configured scope.","commands":{"allow":["set_webview_focus"],"deny":[]}},"allow-set-webview-position":{"identifier":"allow-set-webview-position","description":"Enables the set_webview_position command without any pre-configured scope.","commands":{"allow":["set_webview_position"],"deny":[]}},"allow-set-webview-size":{"identifier":"allow-set-webview-size","description":"Enables the set_webview_size command without any pre-configured scope.","commands":{"allow":["set_webview_size"],"deny":[]}},"allow-set-webview-zoom":{"identifier":"allow-set-webview-zoom","description":"Enables the set_webview_zoom command without any pre-configured scope.","commands":{"allow":["set_webview_zoom"],"deny":[]}},"allow-webview-close":{"identifier":"allow-webview-close","description":"Enables the webview_close command without any pre-configured scope.","commands":{"allow":["webview_close"],"deny":[]}},"allow-webview-hide":{"identifier":"allow-webview-hide","description":"Enables the webview_hide command without any pre-configured scope.","commands":{"allow":["webview_hide"],"deny":[]}},"allow-webview-position":{"identifier":"allow-webview-position","description":"Enables the webview_position command without any pre-configured scope.","commands":{"allow":["webview_position"],"deny":[]}},"allow-webview-show":{"identifier":"allow-webview-show","description":"Enables the webview_show command without any pre-configured scope.","commands":{"allow":["webview_show"],"deny":[]}},"allow-webview-size":{"identifier":"allow-webview-size","description":"Enables the webview_size command without any pre-configured scope.","commands":{"allow":["webview_size"],"deny":[]}},"deny-clear-all-browsing-data":{"identifier":"deny-clear-all-browsing-data","description":"Denies the clear_all_browsing_data command without any pre-configured scope.","commands":{"allow":[],"deny":["clear_all_browsing_data"]}},"deny-create-webview":{"identifier":"deny-create-webview","description":"Denies the create_webview command without any pre-configured scope.","commands":{"allow":[],"deny":["create_webview"]}},"deny-create-webview-window":{"identifier":"deny-create-webview-window","description":"Denies the create_webview_window command without any pre-configured scope.","commands":{"allow":[],"deny":["create_webview_window"]}},"deny-get-all-webviews":{"identifier":"deny-get-all-webviews","description":"Denies the get_all_webviews command without any pre-configured scope.","commands":{"allow":[],"deny":["get_all_webviews"]}},"deny-internal-toggle-devtools":{"identifier":"deny-internal-toggle-devtools","description":"Denies the internal_toggle_devtools command without any pre-configured scope.","commands":{"allow":[],"deny":["internal_toggle_devtools"]}},"deny-print":{"identifier":"deny-print","description":"Denies the print command without any pre-configured scope.","commands":{"allow":[],"deny":["print"]}},"deny-reparent":{"identifier":"deny-reparent","description":"Denies the reparent command without any pre-configured scope.","commands":{"allow":[],"deny":["reparent"]}},"deny-set-webview-auto-resize":{"identifier":"deny-set-webview-auto-resize","description":"Denies the set_webview_auto_resize command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_auto_resize"]}},"deny-set-webview-background-color":{"identifier":"deny-set-webview-background-color","description":"Denies the set_webview_background_color command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_background_color"]}},"deny-set-webview-focus":{"identifier":"deny-set-webview-focus","description":"Denies the set_webview_focus command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_focus"]}},"deny-set-webview-position":{"identifier":"deny-set-webview-position","description":"Denies the set_webview_position command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_position"]}},"deny-set-webview-size":{"identifier":"deny-set-webview-size","description":"Denies the set_webview_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_size"]}},"deny-set-webview-zoom":{"identifier":"deny-set-webview-zoom","description":"Denies the set_webview_zoom command without any pre-configured scope.","commands":{"allow":[],"deny":["set_webview_zoom"]}},"deny-webview-close":{"identifier":"deny-webview-close","description":"Denies the webview_close command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_close"]}},"deny-webview-hide":{"identifier":"deny-webview-hide","description":"Denies the webview_hide command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_hide"]}},"deny-webview-position":{"identifier":"deny-webview-position","description":"Denies the webview_position command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_position"]}},"deny-webview-show":{"identifier":"deny-webview-show","description":"Denies the webview_show command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_show"]}},"deny-webview-size":{"identifier":"deny-webview-size","description":"Denies the webview_size command without any pre-configured scope.","commands":{"allow":[],"deny":["webview_size"]}}},"permission_sets":{},"global_scope_schema":null},"core:window":{"default_permission":{"identifier":"default","description":"Default permissions for the plugin.","permissions":["allow-get-all-windows","allow-scale-factor","allow-inner-position","allow-outer-position","allow-inner-size","allow-outer-size","allow-is-fullscreen","allow-is-minimized","allow-is-maximized","allow-is-focused","allow-is-decorated","allow-is-resizable","allow-is-maximizable","allow-is-minimizable","allow-is-closable","allow-is-visible","allow-is-enabled","allow-title","allow-current-monitor","allow-primary-monitor","allow-monitor-from-point","allow-available-monitors","allow-cursor-position","allow-theme","allow-is-always-on-top","allow-internal-toggle-maximize"]},"permissions":{"allow-available-monitors":{"identifier":"allow-available-monitors","description":"Enables the available_monitors command without any pre-configured scope.","commands":{"allow":["available_monitors"],"deny":[]}},"allow-center":{"identifier":"allow-center","description":"Enables the center command without any pre-configured scope.","commands":{"allow":["center"],"deny":[]}},"allow-close":{"identifier":"allow-close","description":"Enables the close command without any pre-configured scope.","commands":{"allow":["close"],"deny":[]}},"allow-create":{"identifier":"allow-create","description":"Enables the create command without any pre-configured scope.","commands":{"allow":["create"],"deny":[]}},"allow-current-monitor":{"identifier":"allow-current-monitor","description":"Enables the current_monitor command without any pre-configured scope.","commands":{"allow":["current_monitor"],"deny":[]}},"allow-cursor-position":{"identifier":"allow-cursor-position","description":"Enables the cursor_position command without any pre-configured scope.","commands":{"allow":["cursor_position"],"deny":[]}},"allow-destroy":{"identifier":"allow-destroy","description":"Enables the destroy command without any pre-configured scope.","commands":{"allow":["destroy"],"deny":[]}},"allow-get-all-windows":{"identifier":"allow-get-all-windows","description":"Enables the get_all_windows command without any pre-configured scope.","commands":{"allow":["get_all_windows"],"deny":[]}},"allow-hide":{"identifier":"allow-hide","description":"Enables the hide command without any pre-configured scope.","commands":{"allow":["hide"],"deny":[]}},"allow-inner-position":{"identifier":"allow-inner-position","description":"Enables the inner_position command without any pre-configured scope.","commands":{"allow":["inner_position"],"deny":[]}},"allow-inner-size":{"identifier":"allow-inner-size","description":"Enables the inner_size command without any pre-configured scope.","commands":{"allow":["inner_size"],"deny":[]}},"allow-internal-toggle-maximize":{"identifier":"allow-internal-toggle-maximize","description":"Enables the internal_toggle_maximize command without any pre-configured scope.","commands":{"allow":["internal_toggle_maximize"],"deny":[]}},"allow-is-always-on-top":{"identifier":"allow-is-always-on-top","description":"Enables the is_always_on_top command without any pre-configured scope.","commands":{"allow":["is_always_on_top"],"deny":[]}},"allow-is-closable":{"identifier":"allow-is-closable","description":"Enables the is_closable command without any pre-configured scope.","commands":{"allow":["is_closable"],"deny":[]}},"allow-is-decorated":{"identifier":"allow-is-decorated","description":"Enables the is_decorated command without any pre-configured scope.","commands":{"allow":["is_decorated"],"deny":[]}},"allow-is-enabled":{"identifier":"allow-is-enabled","description":"Enables the is_enabled command without any pre-configured scope.","commands":{"allow":["is_enabled"],"deny":[]}},"allow-is-focused":{"identifier":"allow-is-focused","description":"Enables the is_focused command without any pre-configured scope.","commands":{"allow":["is_focused"],"deny":[]}},"allow-is-fullscreen":{"identifier":"allow-is-fullscreen","description":"Enables the is_fullscreen command without any pre-configured scope.","commands":{"allow":["is_fullscreen"],"deny":[]}},"allow-is-maximizable":{"identifier":"allow-is-maximizable","description":"Enables the is_maximizable command without any pre-configured scope.","commands":{"allow":["is_maximizable"],"deny":[]}},"allow-is-maximized":{"identifier":"allow-is-maximized","description":"Enables the is_maximized command without any pre-configured scope.","commands":{"allow":["is_maximized"],"deny":[]}},"allow-is-minimizable":{"identifier":"allow-is-minimizable","description":"Enables the is_minimizable command without any pre-configured scope.","commands":{"allow":["is_minimizable"],"deny":[]}},"allow-is-minimized":{"identifier":"allow-is-minimized","description":"Enables the is_minimized command without any pre-configured scope.","commands":{"allow":["is_minimized"],"deny":[]}},"allow-is-resizable":{"identifier":"allow-is-resizable","description":"Enables the is_resizable command without any pre-configured scope.","commands":{"allow":["is_resizable"],"deny":[]}},"allow-is-visible":{"identifier":"allow-is-visible","description":"Enables the is_visible command without any pre-configured scope.","commands":{"allow":["is_visible"],"deny":[]}},"allow-maximize":{"identifier":"allow-maximize","description":"Enables the maximize command without any pre-configured scope.","commands":{"allow":["maximize"],"deny":[]}},"allow-minimize":{"identifier":"allow-minimize","description":"Enables the minimize command without any pre-configured scope.","commands":{"allow":["minimize"],"deny":[]}},"allow-monitor-from-point":{"identifier":"allow-monitor-from-point","description":"Enables the monitor_from_point command without any pre-configured scope.","commands":{"allow":["monitor_from_point"],"deny":[]}},"allow-outer-position":{"identifier":"allow-outer-position","description":"Enables the outer_position command without any pre-configured scope.","commands":{"allow":["outer_position"],"deny":[]}},"allow-outer-size":{"identifier":"allow-outer-size","description":"Enables the outer_size command without any pre-configured scope.","commands":{"allow":["outer_size"],"deny":[]}},"allow-primary-monitor":{"identifier":"allow-primary-monitor","description":"Enables the primary_monitor command without any pre-configured scope.","commands":{"allow":["primary_monitor"],"deny":[]}},"allow-request-user-attention":{"identifier":"allow-request-user-attention","description":"Enables the request_user_attention command without any pre-configured scope.","commands":{"allow":["request_user_attention"],"deny":[]}},"allow-scale-factor":{"identifier":"allow-scale-factor","description":"Enables the scale_factor command without any pre-configured scope.","commands":{"allow":["scale_factor"],"deny":[]}},"allow-set-always-on-bottom":{"identifier":"allow-set-always-on-bottom","description":"Enables the set_always_on_bottom command without any pre-configured scope.","commands":{"allow":["set_always_on_bottom"],"deny":[]}},"allow-set-always-on-top":{"identifier":"allow-set-always-on-top","description":"Enables the set_always_on_top command without any pre-configured scope.","commands":{"allow":["set_always_on_top"],"deny":[]}},"allow-set-background-color":{"identifier":"allow-set-background-color","description":"Enables the set_background_color command without any pre-configured scope.","commands":{"allow":["set_background_color"],"deny":[]}},"allow-set-badge-count":{"identifier":"allow-set-badge-count","description":"Enables the set_badge_count command without any pre-configured scope.","commands":{"allow":["set_badge_count"],"deny":[]}},"allow-set-badge-label":{"identifier":"allow-set-badge-label","description":"Enables the set_badge_label command without any pre-configured scope.","commands":{"allow":["set_badge_label"],"deny":[]}},"allow-set-closable":{"identifier":"allow-set-closable","description":"Enables the set_closable command without any pre-configured scope.","commands":{"allow":["set_closable"],"deny":[]}},"allow-set-content-protected":{"identifier":"allow-set-content-protected","description":"Enables the set_content_protected command without any pre-configured scope.","commands":{"allow":["set_content_protected"],"deny":[]}},"allow-set-cursor-grab":{"identifier":"allow-set-cursor-grab","description":"Enables the set_cursor_grab command without any pre-configured scope.","commands":{"allow":["set_cursor_grab"],"deny":[]}},"allow-set-cursor-icon":{"identifier":"allow-set-cursor-icon","description":"Enables the set_cursor_icon command without any pre-configured scope.","commands":{"allow":["set_cursor_icon"],"deny":[]}},"allow-set-cursor-position":{"identifier":"allow-set-cursor-position","description":"Enables the set_cursor_position command without any pre-configured scope.","commands":{"allow":["set_cursor_position"],"deny":[]}},"allow-set-cursor-visible":{"identifier":"allow-set-cursor-visible","description":"Enables the set_cursor_visible command without any pre-configured scope.","commands":{"allow":["set_cursor_visible"],"deny":[]}},"allow-set-decorations":{"identifier":"allow-set-decorations","description":"Enables the set_decorations command without any pre-configured scope.","commands":{"allow":["set_decorations"],"deny":[]}},"allow-set-effects":{"identifier":"allow-set-effects","description":"Enables the set_effects command without any pre-configured scope.","commands":{"allow":["set_effects"],"deny":[]}},"allow-set-enabled":{"identifier":"allow-set-enabled","description":"Enables the set_enabled command without any pre-configured scope.","commands":{"allow":["set_enabled"],"deny":[]}},"allow-set-focus":{"identifier":"allow-set-focus","description":"Enables the set_focus command without any pre-configured scope.","commands":{"allow":["set_focus"],"deny":[]}},"allow-set-focusable":{"identifier":"allow-set-focusable","description":"Enables the set_focusable command without any pre-configured scope.","commands":{"allow":["set_focusable"],"deny":[]}},"allow-set-fullscreen":{"identifier":"allow-set-fullscreen","description":"Enables the set_fullscreen command without any pre-configured scope.","commands":{"allow":["set_fullscreen"],"deny":[]}},"allow-set-icon":{"identifier":"allow-set-icon","description":"Enables the set_icon command without any pre-configured scope.","commands":{"allow":["set_icon"],"deny":[]}},"allow-set-ignore-cursor-events":{"identifier":"allow-set-ignore-cursor-events","description":"Enables the set_ignore_cursor_events command without any pre-configured scope.","commands":{"allow":["set_ignore_cursor_events"],"deny":[]}},"allow-set-max-size":{"identifier":"allow-set-max-size","description":"Enables the set_max_size command without any pre-configured scope.","commands":{"allow":["set_max_size"],"deny":[]}},"allow-set-maximizable":{"identifier":"allow-set-maximizable","description":"Enables the set_maximizable command without any pre-configured scope.","commands":{"allow":["set_maximizable"],"deny":[]}},"allow-set-min-size":{"identifier":"allow-set-min-size","description":"Enables the set_min_size command without any pre-configured scope.","commands":{"allow":["set_min_size"],"deny":[]}},"allow-set-minimizable":{"identifier":"allow-set-minimizable","description":"Enables the set_minimizable command without any pre-configured scope.","commands":{"allow":["set_minimizable"],"deny":[]}},"allow-set-overlay-icon":{"identifier":"allow-set-overlay-icon","description":"Enables the set_overlay_icon command without any pre-configured scope.","commands":{"allow":["set_overlay_icon"],"deny":[]}},"allow-set-position":{"identifier":"allow-set-position","description":"Enables the set_position command without any pre-configured scope.","commands":{"allow":["set_position"],"deny":[]}},"allow-set-progress-bar":{"identifier":"allow-set-progress-bar","description":"Enables the set_progress_bar command without any pre-configured scope.","commands":{"allow":["set_progress_bar"],"deny":[]}},"allow-set-resizable":{"identifier":"allow-set-resizable","description":"Enables the set_resizable command without any pre-configured scope.","commands":{"allow":["set_resizable"],"deny":[]}},"allow-set-shadow":{"identifier":"allow-set-shadow","description":"Enables the set_shadow command without any pre-configured scope.","commands":{"allow":["set_shadow"],"deny":[]}},"allow-set-simple-fullscreen":{"identifier":"allow-set-simple-fullscreen","description":"Enables the set_simple_fullscreen command without any pre-configured scope.","commands":{"allow":["set_simple_fullscreen"],"deny":[]}},"allow-set-size":{"identifier":"allow-set-size","description":"Enables the set_size command without any pre-configured scope.","commands":{"allow":["set_size"],"deny":[]}},"allow-set-size-constraints":{"identifier":"allow-set-size-constraints","description":"Enables the set_size_constraints command without any pre-configured scope.","commands":{"allow":["set_size_constraints"],"deny":[]}},"allow-set-skip-taskbar":{"identifier":"allow-set-skip-taskbar","description":"Enables the set_skip_taskbar command without any pre-configured scope.","commands":{"allow":["set_skip_taskbar"],"deny":[]}},"allow-set-theme":{"identifier":"allow-set-theme","description":"Enables the set_theme command without any pre-configured scope.","commands":{"allow":["set_theme"],"deny":[]}},"allow-set-title":{"identifier":"allow-set-title","description":"Enables the set_title command without any pre-configured scope.","commands":{"allow":["set_title"],"deny":[]}},"allow-set-title-bar-style":{"identifier":"allow-set-title-bar-style","description":"Enables the set_title_bar_style command without any pre-configured scope.","commands":{"allow":["set_title_bar_style"],"deny":[]}},"allow-set-visible-on-all-workspaces":{"identifier":"allow-set-visible-on-all-workspaces","description":"Enables the set_visible_on_all_workspaces command without any pre-configured scope.","commands":{"allow":["set_visible_on_all_workspaces"],"deny":[]}},"allow-show":{"identifier":"allow-show","description":"Enables the show command without any pre-configured scope.","commands":{"allow":["show"],"deny":[]}},"allow-start-dragging":{"identifier":"allow-start-dragging","description":"Enables the start_dragging command without any pre-configured scope.","commands":{"allow":["start_dragging"],"deny":[]}},"allow-start-resize-dragging":{"identifier":"allow-start-resize-dragging","description":"Enables the start_resize_dragging command without any pre-configured scope.","commands":{"allow":["start_resize_dragging"],"deny":[]}},"allow-theme":{"identifier":"allow-theme","description":"Enables the theme command without any pre-configured scope.","commands":{"allow":["theme"],"deny":[]}},"allow-title":{"identifier":"allow-title","description":"Enables the title command without any pre-configured scope.","commands":{"allow":["title"],"deny":[]}},"allow-toggle-maximize":{"identifier":"allow-toggle-maximize","description":"Enables the toggle_maximize command without any pre-configured scope.","commands":{"allow":["toggle_maximize"],"deny":[]}},"allow-unmaximize":{"identifier":"allow-unmaximize","description":"Enables the unmaximize command without any pre-configured scope.","commands":{"allow":["unmaximize"],"deny":[]}},"allow-unminimize":{"identifier":"allow-unminimize","description":"Enables the unminimize command without any pre-configured scope.","commands":{"allow":["unminimize"],"deny":[]}},"deny-available-monitors":{"identifier":"deny-available-monitors","description":"Denies the available_monitors command without any pre-configured scope.","commands":{"allow":[],"deny":["available_monitors"]}},"deny-center":{"identifier":"deny-center","description":"Denies the center command without any pre-configured scope.","commands":{"allow":[],"deny":["center"]}},"deny-close":{"identifier":"deny-close","description":"Denies the close command without any pre-configured scope.","commands":{"allow":[],"deny":["close"]}},"deny-create":{"identifier":"deny-create","description":"Denies the create command without any pre-configured scope.","commands":{"allow":[],"deny":["create"]}},"deny-current-monitor":{"identifier":"deny-current-monitor","description":"Denies the current_monitor command without any pre-configured scope.","commands":{"allow":[],"deny":["current_monitor"]}},"deny-cursor-position":{"identifier":"deny-cursor-position","description":"Denies the cursor_position command without any pre-configured scope.","commands":{"allow":[],"deny":["cursor_position"]}},"deny-destroy":{"identifier":"deny-destroy","description":"Denies the destroy command without any pre-configured scope.","commands":{"allow":[],"deny":["destroy"]}},"deny-get-all-windows":{"identifier":"deny-get-all-windows","description":"Denies the get_all_windows command without any pre-configured scope.","commands":{"allow":[],"deny":["get_all_windows"]}},"deny-hide":{"identifier":"deny-hide","description":"Denies the hide command without any pre-configured scope.","commands":{"allow":[],"deny":["hide"]}},"deny-inner-position":{"identifier":"deny-inner-position","description":"Denies the inner_position command without any pre-configured scope.","commands":{"allow":[],"deny":["inner_position"]}},"deny-inner-size":{"identifier":"deny-inner-size","description":"Denies the inner_size command without any pre-configured scope.","commands":{"allow":[],"deny":["inner_size"]}},"deny-internal-toggle-maximize":{"identifier":"deny-internal-toggle-maximize","description":"Denies the internal_toggle_maximize command without any pre-configured scope.","commands":{"allow":[],"deny":["internal_toggle_maximize"]}},"deny-is-always-on-top":{"identifier":"deny-is-always-on-top","description":"Denies the is_always_on_top command without any pre-configured scope.","commands":{"allow":[],"deny":["is_always_on_top"]}},"deny-is-closable":{"identifier":"deny-is-closable","description":"Denies the is_closable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_closable"]}},"deny-is-decorated":{"identifier":"deny-is-decorated","description":"Denies the is_decorated command without any pre-configured scope.","commands":{"allow":[],"deny":["is_decorated"]}},"deny-is-enabled":{"identifier":"deny-is-enabled","description":"Denies the is_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["is_enabled"]}},"deny-is-focused":{"identifier":"deny-is-focused","description":"Denies the is_focused command without any pre-configured scope.","commands":{"allow":[],"deny":["is_focused"]}},"deny-is-fullscreen":{"identifier":"deny-is-fullscreen","description":"Denies the is_fullscreen command without any pre-configured scope.","commands":{"allow":[],"deny":["is_fullscreen"]}},"deny-is-maximizable":{"identifier":"deny-is-maximizable","description":"Denies the is_maximizable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_maximizable"]}},"deny-is-maximized":{"identifier":"deny-is-maximized","description":"Denies the is_maximized command without any pre-configured scope.","commands":{"allow":[],"deny":["is_maximized"]}},"deny-is-minimizable":{"identifier":"deny-is-minimizable","description":"Denies the is_minimizable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_minimizable"]}},"deny-is-minimized":{"identifier":"deny-is-minimized","description":"Denies the is_minimized command without any pre-configured scope.","commands":{"allow":[],"deny":["is_minimized"]}},"deny-is-resizable":{"identifier":"deny-is-resizable","description":"Denies the is_resizable command without any pre-configured scope.","commands":{"allow":[],"deny":["is_resizable"]}},"deny-is-visible":{"identifier":"deny-is-visible","description":"Denies the is_visible command without any pre-configured scope.","commands":{"allow":[],"deny":["is_visible"]}},"deny-maximize":{"identifier":"deny-maximize","description":"Denies the maximize command without any pre-configured scope.","commands":{"allow":[],"deny":["maximize"]}},"deny-minimize":{"identifier":"deny-minimize","description":"Denies the minimize command without any pre-configured scope.","commands":{"allow":[],"deny":["minimize"]}},"deny-monitor-from-point":{"identifier":"deny-monitor-from-point","description":"Denies the monitor_from_point command without any pre-configured scope.","commands":{"allow":[],"deny":["monitor_from_point"]}},"deny-outer-position":{"identifier":"deny-outer-position","description":"Denies the outer_position command without any pre-configured scope.","commands":{"allow":[],"deny":["outer_position"]}},"deny-outer-size":{"identifier":"deny-outer-size","description":"Denies the outer_size command without any pre-configured scope.","commands":{"allow":[],"deny":["outer_size"]}},"deny-primary-monitor":{"identifier":"deny-primary-monitor","description":"Denies the primary_monitor command without any pre-configured scope.","commands":{"allow":[],"deny":["primary_monitor"]}},"deny-request-user-attention":{"identifier":"deny-request-user-attention","description":"Denies the request_user_attention command without any pre-configured scope.","commands":{"allow":[],"deny":["request_user_attention"]}},"deny-scale-factor":{"identifier":"deny-scale-factor","description":"Denies the scale_factor command without any pre-configured scope.","commands":{"allow":[],"deny":["scale_factor"]}},"deny-set-always-on-bottom":{"identifier":"deny-set-always-on-bottom","description":"Denies the set_always_on_bottom command without any pre-configured scope.","commands":{"allow":[],"deny":["set_always_on_bottom"]}},"deny-set-always-on-top":{"identifier":"deny-set-always-on-top","description":"Denies the set_always_on_top command without any pre-configured scope.","commands":{"allow":[],"deny":["set_always_on_top"]}},"deny-set-background-color":{"identifier":"deny-set-background-color","description":"Denies the set_background_color command without any pre-configured scope.","commands":{"allow":[],"deny":["set_background_color"]}},"deny-set-badge-count":{"identifier":"deny-set-badge-count","description":"Denies the set_badge_count command without any pre-configured scope.","commands":{"allow":[],"deny":["set_badge_count"]}},"deny-set-badge-label":{"identifier":"deny-set-badge-label","description":"Denies the set_badge_label command without any pre-configured scope.","commands":{"allow":[],"deny":["set_badge_label"]}},"deny-set-closable":{"identifier":"deny-set-closable","description":"Denies the set_closable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_closable"]}},"deny-set-content-protected":{"identifier":"deny-set-content-protected","description":"Denies the set_content_protected command without any pre-configured scope.","commands":{"allow":[],"deny":["set_content_protected"]}},"deny-set-cursor-grab":{"identifier":"deny-set-cursor-grab","description":"Denies the set_cursor_grab command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_grab"]}},"deny-set-cursor-icon":{"identifier":"deny-set-cursor-icon","description":"Denies the set_cursor_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_icon"]}},"deny-set-cursor-position":{"identifier":"deny-set-cursor-position","description":"Denies the set_cursor_position command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_position"]}},"deny-set-cursor-visible":{"identifier":"deny-set-cursor-visible","description":"Denies the set_cursor_visible command without any pre-configured scope.","commands":{"allow":[],"deny":["set_cursor_visible"]}},"deny-set-decorations":{"identifier":"deny-set-decorations","description":"Denies the set_decorations command without any pre-configured scope.","commands":{"allow":[],"deny":["set_decorations"]}},"deny-set-effects":{"identifier":"deny-set-effects","description":"Denies the set_effects command without any pre-configured scope.","commands":{"allow":[],"deny":["set_effects"]}},"deny-set-enabled":{"identifier":"deny-set-enabled","description":"Denies the set_enabled command without any pre-configured scope.","commands":{"allow":[],"deny":["set_enabled"]}},"deny-set-focus":{"identifier":"deny-set-focus","description":"Denies the set_focus command without any pre-configured scope.","commands":{"allow":[],"deny":["set_focus"]}},"deny-set-focusable":{"identifier":"deny-set-focusable","description":"Denies the set_focusable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_focusable"]}},"deny-set-fullscreen":{"identifier":"deny-set-fullscreen","description":"Denies the set_fullscreen command without any pre-configured scope.","commands":{"allow":[],"deny":["set_fullscreen"]}},"deny-set-icon":{"identifier":"deny-set-icon","description":"Denies the set_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_icon"]}},"deny-set-ignore-cursor-events":{"identifier":"deny-set-ignore-cursor-events","description":"Denies the set_ignore_cursor_events command without any pre-configured scope.","commands":{"allow":[],"deny":["set_ignore_cursor_events"]}},"deny-set-max-size":{"identifier":"deny-set-max-size","description":"Denies the set_max_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_max_size"]}},"deny-set-maximizable":{"identifier":"deny-set-maximizable","description":"Denies the set_maximizable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_maximizable"]}},"deny-set-min-size":{"identifier":"deny-set-min-size","description":"Denies the set_min_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_min_size"]}},"deny-set-minimizable":{"identifier":"deny-set-minimizable","description":"Denies the set_minimizable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_minimizable"]}},"deny-set-overlay-icon":{"identifier":"deny-set-overlay-icon","description":"Denies the set_overlay_icon command without any pre-configured scope.","commands":{"allow":[],"deny":["set_overlay_icon"]}},"deny-set-position":{"identifier":"deny-set-position","description":"Denies the set_position command without any pre-configured scope.","commands":{"allow":[],"deny":["set_position"]}},"deny-set-progress-bar":{"identifier":"deny-set-progress-bar","description":"Denies the set_progress_bar command without any pre-configured scope.","commands":{"allow":[],"deny":["set_progress_bar"]}},"deny-set-resizable":{"identifier":"deny-set-resizable","description":"Denies the set_resizable command without any pre-configured scope.","commands":{"allow":[],"deny":["set_resizable"]}},"deny-set-shadow":{"identifier":"deny-set-shadow","description":"Denies the set_shadow command without any pre-configured scope.","commands":{"allow":[],"deny":["set_shadow"]}},"deny-set-simple-fullscreen":{"identifier":"deny-set-simple-fullscreen","description":"Denies the set_simple_fullscreen command without any pre-configured scope.","commands":{"allow":[],"deny":["set_simple_fullscreen"]}},"deny-set-size":{"identifier":"deny-set-size","description":"Denies the set_size command without any pre-configured scope.","commands":{"allow":[],"deny":["set_size"]}},"deny-set-size-constraints":{"identifier":"deny-set-size-constraints","description":"Denies the set_size_constraints command without any pre-configured scope.","commands":{"allow":[],"deny":["set_size_constraints"]}},"deny-set-skip-taskbar":{"identifier":"deny-set-skip-taskbar","description":"Denies the set_skip_taskbar command without any pre-configured scope.","commands":{"allow":[],"deny":["set_skip_taskbar"]}},"deny-set-theme":{"identifier":"deny-set-theme","description":"Denies the set_theme command without any pre-configured scope.","commands":{"allow":[],"deny":["set_theme"]}},"deny-set-title":{"identifier":"deny-set-title","description":"Denies the set_title command without any pre-configured scope.","commands":{"allow":[],"deny":["set_title"]}},"deny-set-title-bar-style":{"identifier":"deny-set-title-bar-style","description":"Denies the set_title_bar_style command without any pre-configured scope.","commands":{"allow":[],"deny":["set_title_bar_style"]}},"deny-set-visible-on-all-workspaces":{"identifier":"deny-set-visible-on-all-workspaces","description":"Denies the set_visible_on_all_workspaces command without any pre-configured scope.","commands":{"allow":[],"deny":["set_visible_on_all_workspaces"]}},"deny-show":{"identifier":"deny-show","description":"Denies the show command without any pre-configured scope.","commands":{"allow":[],"deny":["show"]}},"deny-start-dragging":{"identifier":"deny-start-dragging","description":"Denies the start_dragging command without any pre-configured scope.","commands":{"allow":[],"deny":["start_dragging"]}},"deny-start-resize-dragging":{"identifier":"deny-start-resize-dragging","description":"Denies the start_resize_dragging command without any pre-configured scope.","commands":{"allow":[],"deny":["start_resize_dragging"]}},"deny-theme":{"identifier":"deny-theme","description":"Denies the theme command without any pre-configured scope.","commands":{"allow":[],"deny":["theme"]}},"deny-title":{"identifier":"deny-title","description":"Denies the title command without any pre-configured scope.","commands":{"allow":[],"deny":["title"]}},"deny-toggle-maximize":{"identifier":"deny-toggle-maximize","description":"Denies the toggle_maximize command without any pre-configured scope.","commands":{"allow":[],"deny":["toggle_maximize"]}},"deny-unmaximize":{"identifier":"deny-unmaximize","description":"Denies the unmaximize command without any pre-configured scope.","commands":{"allow":[],"deny":["unmaximize"]}},"deny-unminimize":{"identifier":"deny-unminimize","description":"Denies the unminimize command without any pre-configured scope.","commands":{"allow":[],"deny":["unminimize"]}}},"permission_sets":{},"global_scope_schema":null}}
\ No newline at end of file
diff --git a/src-tauri/permissions/dmnote-allow-all.json b/src-tauri/permissions/dmnote-allow-all.json
index b9e66679..82e07c61 100644
--- a/src-tauri/permissions/dmnote-allow-all.json
+++ b/src-tauri/permissions/dmnote-allow-all.json
@@ -107,6 +107,8 @@
           "sound_load_original",
           "sound_rename",
           "sound_save_processed_wav",
+          "sound_set_enabled",
+          "sound_set_hidden",
           "sound_update_processed_wav",
           "stat_positions_get",
           "stat_positions_update",
diff --git a/src-tauri/src/audio/engine.rs b/src-tauri/src/audio/engine.rs
index 5f165024..f3ef8f29 100644
--- a/src-tauri/src/audio/engine.rs
+++ b/src-tauri/src/audio/engine.rs
@@ -130,7 +130,7 @@ impl LatencySummary {
     }
 
     fn should_emit_summary(&self) -> bool {
-        self.samples > 0 && self.samples % LATENCY_SUMMARY_INTERVAL == 0
+        self.samples > 0 && self.samples.is_multiple_of(LATENCY_SUMMARY_INTERVAL)
     }
 
     fn emit_summary(&self) {
diff --git a/src-tauri/src/commands/keys/sound.rs b/src-tauri/src/commands/keys/sound.rs
index 85aa832a..f41544ea 100644
--- a/src-tauri/src/commands/keys/sound.rs
+++ b/src-tauri/src/commands/keys/sound.rs
@@ -35,6 +35,7 @@ pub struct SoundListItem {
     pub size_bytes: u64,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub modified_at_ms: Option<u64>,
+    pub hidden: bool,
     pub source: SoundSource,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub original_path: Option<String>,
@@ -80,6 +81,22 @@ pub struct SoundRenameResponse {
     pub display_name: String,
 }
 
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SoundSetHiddenResponse {
+    pub success: bool,
+    pub sound_path: String,
+    pub hidden: bool,
+}
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct SoundSetEnabledResponse {
+    pub success: bool,
+    pub sound_path: String,
+    pub enabled: bool,
+}
+
 /// 로컬 사운드 파일을 선택하고 appData/sounds 디렉토리로 복사한 뒤 경로 반환
 #[tauri::command]
 pub fn sound_load(
@@ -187,6 +204,7 @@ pub fn sound_list(
             file_name,
             size_bytes: metadata.len(),
             modified_at_ms,
+            hidden: entry_meta.hidden,
             source: entry_meta.source,
             original_path: entry_meta.original_path,
             trim_start_ratio: entry_meta.trim_start_ratio,
@@ -230,6 +248,59 @@ pub fn sound_list(
     Ok(items)
 }
 
+#[tauri::command]
+pub fn sound_set_hidden(
+    app: tauri::AppHandle,
+    state: State<'_, AppState>,
+    sound_path: String,
+    hidden: bool,
+) -> CmdResult<SoundSetHiddenResponse> {
+    let path_key = set_sound_hidden(&app, state.inner(), &sound_path, hidden)?;
+    Ok(SoundSetHiddenResponse {
+        success: true,
+        sound_path: path_key,
+        hidden,
+    })
+}
+
+#[tauri::command]
+pub fn sound_set_enabled(
+    app: tauri::AppHandle,
+    state: State<'_, AppState>,
+    sound_path: String,
+    enabled: bool,
+) -> CmdResult<SoundSetEnabledResponse> {
+    let path_key = set_sound_hidden(&app, state.inner(), &sound_path, !enabled)?;
+    Ok(SoundSetEnabledResponse {
+        success: true,
+        sound_path: path_key,
+        enabled,
+    })
+}
+
+fn set_sound_hidden(
+    app: &tauri::AppHandle,
+    state: &AppState,
+    sound_path: &str,
+    hidden: bool,
+) -> CmdResult<String> {
+    let sounds_dir = ensure_sounds_dir(app)?;
+    let validated_path = validate_sound_path(&sounds_dir, sound_path)?;
+    if !validated_path.exists() {
+        return Err(CommandError::msg("대상 사운드 파일이 존재하지 않습니다."));
+    }
+
+    let path_key = normalize_path_string(&validated_path);
+    state.store.update(|store| {
+        store
+            .sound_library
+            .entry(path_key.clone())
+            .or_default()
+            .hidden = hidden;
+    })?;
+    Ok(path_key)
+}
+
 #[tauri::command]
 pub fn sound_rename(
     app: tauri::AppHandle,
@@ -459,6 +530,7 @@ pub fn sound_save_processed_wav(
         s.sound_library.insert(
             dest_path_str.clone(),
             SoundLibraryEntry {
+                hidden: false,
                 source: SoundSource::Local,
                 original_path: original_rel_path.clone(),
                 trim_start_ratio: request.trim_start_ratio,
diff --git a/src-tauri/src/cursor.rs b/src-tauri/src/cursor.rs
index bc369ba7..8c9ca692 100644
--- a/src-tauri/src/cursor.rs
+++ b/src-tauri/src/cursor.rs
@@ -85,7 +85,7 @@ pub fn get_macos_cursor_settings() -> MacOSCursorSettings {
                 .or_else(|| read_double_from_user_defaults(suite_defaults, "mouseDriverCursorSize"))
                 .or_else(|| read_double_from_prefs(prefs, "mouseDriverCursorSize"));
         if let Some(size) = size {
-            if size >= 1.0 && size <= 4.0 {
+            if (1.0..=4.0).contains(&size) {
                 settings.size = size;
             }
         }
diff --git a/src-tauri/src/keyboard/daemon/mod.rs b/src-tauri/src/keyboard/daemon/mod.rs
index ad1f583b..dfec6281 100644
--- a/src-tauri/src/keyboard/daemon/mod.rs
+++ b/src-tauri/src/keyboard/daemon/mod.rs
@@ -57,7 +57,7 @@ pub fn run() -> Result<()> {
 
     #[cfg(target_os = "macos")]
     {
-        return macos::run_macos();
+        macos::run_macos()
     }
 
     #[cfg(not(any(target_os = "windows", target_os = "macos")))]
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 506ddb6d..2c6916af 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -220,6 +220,8 @@ fn main() {
             commands::keys::key_sound::key_sound_get_output_state,
             commands::keys::sound::sound_load,
             commands::keys::sound::sound_list,
+            commands::keys::sound::sound_set_hidden,
+            commands::keys::sound::sound_set_enabled,
             commands::keys::sound::sound_rename,
             commands::keys::sound::sound_delete,
             commands::keys::sound::sound_save_processed_wav,
@@ -818,8 +820,8 @@ fn request_accessibility_permission() {
             keys.as_ptr(),
             values.as_ptr(),
             1,
-            &kCFTypeDictionaryKeyCallBacks as *const _ as *const c_void,
-            &kCFTypeDictionaryValueCallBacks as *const _ as *const c_void,
+            &kCFTypeDictionaryKeyCallBacks as *const c_void,
+            &kCFTypeDictionaryValueCallBacks as *const c_void,
         );
 
         let trusted = AXIsProcessTrustedWithOptions(options);
diff --git a/src-tauri/src/models/mod.rs b/src-tauri/src/models/mod.rs
index 89a4adf1..22581232 100644
--- a/src-tauri/src/models/mod.rs
+++ b/src-tauri/src/models/mod.rs
@@ -65,6 +65,8 @@ fn default_sound_source() -> SoundSource {
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub struct SoundLibraryEntry {
+    #[serde(default)]
+    pub hidden: bool,
     #[serde(default = "default_sound_source")]
     pub source: SoundSource,
     #[serde(default, skip_serializing_if = "Option::is_none")]
@@ -80,6 +82,7 @@ pub struct SoundLibraryEntry {
 impl Default for SoundLibraryEntry {
     fn default() -> Self {
         Self {
+            hidden: false,
             source: SoundSource::Local,
             original_path: None,
             trim_start_ratio: None,
@@ -573,7 +576,7 @@ pub fn normalize_user_counter_animation_presets(
         })
         .collect();
 
-    normalized.sort_by(|a, b| a.name.to_lowercase().cmp(&b.name.to_lowercase()));
+    normalized.sort_by_key(|a| a.name.to_lowercase());
     normalized
 }
 
diff --git a/src-tauri/src/state/app_state.rs b/src-tauri/src/state/app_state.rs
index 090fa5f3..0f1b3eae 100644
--- a/src-tauri/src/state/app_state.rs
+++ b/src-tauri/src/state/app_state.rs
@@ -1087,7 +1087,7 @@ impl AppState {
 
                             if emitted {
                                 keys_state_emit_count += 1;
-                                if keys_state_emit_count % 500 == 0 {
+                                if keys_state_emit_count.is_multiple_of(500) {
                                     log::debug!(
                                         "[AppState] emitted keys:state {} times (last key={}, state={})",
                                         keys_state_emit_count,
@@ -1342,14 +1342,13 @@ impl AppState {
                 #[cfg(target_os = "macos")]
                 apply_macos_overlay_fullscreen_behavior(&overlay_window, snapshot.always_on_top);
             }
-            WindowEvent::Moved(_) | WindowEvent::Resized(_) => {
+            WindowEvent::Moved(_) | WindowEvent::Resized(_)
                 // 윈도우 초기화 중에는 OS가 보고하는 좌표로 저장된 bounds를 덮어쓰지 않음
-                if !initializing_flag.load(Ordering::SeqCst) {
+                if !initializing_flag.load(Ordering::SeqCst) => {
                     if let Err(err) = persist_overlay_bounds(&overlay_window, &store) {
                         log::warn!("failed to persist overlay bounds: {err}");
                     }
                 }
-            }
             _ => {}
         });
     }
diff --git a/src-tauri/src/state/builtin_sounds.rs b/src-tauri/src/state/builtin_sounds.rs
index 588e0175..1d8b4fc4 100644
--- a/src-tauri/src/state/builtin_sounds.rs
+++ b/src-tauri/src/state/builtin_sounds.rs
@@ -100,8 +100,13 @@ mod tests {
             assert_eq!(entry.display_name.as_deref(), Some(sound.display_name));
         }
 
+        for entry in data.sound_library.values_mut() {
+            entry.hidden = true;
+        }
+
         // 재실행: 변경 없음 (멱등)
         assert!(!seed_builtin_sounds(&dir, &mut data));
+        assert!(data.sound_library.values().all(|entry| entry.hidden));
 
         // Local로 오염된 source는 자가 치유
         for entry in data.sound_library.values_mut() {
@@ -112,6 +117,7 @@ mod tests {
             .sound_library
             .values()
             .all(|entry| entry.source == SoundSource::Builtin));
+        assert!(data.sound_library.values().all(|entry| entry.hidden));
 
         let _ = fs::remove_dir_all(&dir);
     }
diff --git a/src-tauri/src/state/migration.rs b/src-tauri/src/state/migration.rs
index 7cfc921f..a3161697 100644
--- a/src-tauri/src/state/migration.rs
+++ b/src-tauri/src/state/migration.rs
@@ -25,24 +25,32 @@ const LEGACY_OVERLAY_HEIGHT: f64 = 320.0;
 pub(crate) fn load_store_from_path(path: &Path) -> Result<(AppStoreData, bool)> {
     let content = fs::read_to_string(path)
         .with_context(|| format!("failed to read store file at {}", path.display()))?;
-    let (state, needs_persist) = match serde_json::from_str::<AppStoreData>(&content) {
-        Ok(mut data) => {
-            let mut needs_persist = data.font_settings.custom_fonts.iter().any(|font| {
-                font.font_type == FontType::Local
-                    && font
-                        .css_content
-                        .as_ref()
-                        .map(|c| !c.trim().is_empty())
-                        .unwrap_or(false)
-            });
-            // rgba로 깨진 noteBorderColor가 있으면 정규화 후 디스크에도 영속 (이슈 #73)
-            if has_convertible_note_border_color(&data) {
-                needs_persist = true;
-            }
-            if migrate_legacy_knob_sensitivity(&mut data) {
-                needs_persist = true;
+    let (state, needs_persist) = match serde_json::from_str::<Value>(&content) {
+        Ok(mut value) => {
+            let sound_library_migrated = migrate_sound_library_enabled(&mut value);
+            match serde_json::from_value::<AppStoreData>(value) {
+                Ok(mut data) => {
+                    let mut needs_persist = sound_library_migrated
+                        || data.font_settings.custom_fonts.iter().any(|font| {
+                            font.font_type == FontType::Local
+                                && font
+                                    .css_content
+                                    .as_ref()
+                                    .map(|c| !c.trim().is_empty())
+                                    .unwrap_or(false)
+                        });
+                    // rgba로 깨진 noteBorderColor가 있으면 정규화 후 디스크에도 영속 (이슈 #73)
+                    if has_convertible_note_border_color(&data) {
+                        needs_persist = true;
+                    }
+                    if migrate_legacy_knob_sensitivity(&mut data) {
+                        needs_persist = true;
+                    }
+                    (normalize_state(data), needs_persist)
+                }
+                // 레거시/비정상 store 파일 복구 후 정규화 상태 저장
+                Err(_) => (repair_legacy_state(&content), true),
             }
-            (normalize_state(data), needs_persist)
         }
         // 레거시/비정상 store 파일 복구 후 정규화 상태 저장
         Err(_) => (repair_legacy_state(&content), true),
@@ -56,6 +64,27 @@ pub(crate) fn load_store_from_path(path: &Path) -> Result<(AppStoreData, bool)>
     Ok((state, needs_persist))
 }
 
+fn migrate_sound_library_enabled(value: &mut Value) -> bool {
+    let Some(sound_library) = value.get_mut("soundLibrary").and_then(Value::as_object_mut) else {
+        return false;
+    };
+
+    let mut changed = false;
+    for entry in sound_library.values_mut().filter_map(Value::as_object_mut) {
+        let Some(enabled) = entry.remove("enabled") else {
+            continue;
+        };
+
+        changed = true;
+        if !entry.contains_key("hidden") {
+            if let Some(enabled) = enabled.as_bool() {
+                entry.insert("hidden".to_string(), Value::Bool(!enabled));
+            }
+        }
+    }
+    changed
+}
+
 /// 레거시 노브 민감도 마이그레이션: 도수/카운트(구 기본 1.40625) → 순수 배율(1.0)
 /// 배율 의미 전환 이전에 저장된 기본값만 1로 재매핑 (사용자 지정값은 유지)
 fn migrate_legacy_knob_sensitivity(data: &mut AppStoreData) -> bool {
@@ -680,7 +709,86 @@ struct LegacyOverlayPosition {
 
 #[cfg(test)]
 mod tests {
-    use super::rgba_to_hex;
+    use super::{load_store_from_path, migrate_sound_library_enabled, rgba_to_hex};
+    use crate::models::AppStoreData;
+    use serde_json::{json, Value};
+
+    const TEST_SOUND_PATH: &str = "/tmp/test-sound.wav";
+
+    fn load_store_with_sound_entry(entry: Value) -> (AppStoreData, bool) {
+        let path = std::env::temp_dir().join(format!(
+            "dmnote-sound-migration-test-{}.json",
+            uuid::Uuid::new_v4()
+        ));
+        let mut value = serde_json::to_value(AppStoreData::default()).unwrap();
+        value.as_object_mut().unwrap().insert(
+            "soundLibrary".to_string(),
+            json!({ TEST_SOUND_PATH: entry }),
+        );
+        std::fs::write(&path, serde_json::to_vec(&value).unwrap()).unwrap();
+
+        let result = load_store_from_path(&path).unwrap();
+        let _ = std::fs::remove_file(path);
+        result
+    }
+
+    #[test]
+    fn sound_library_enabled_false_migrates_to_hidden_true() {
+        let mut value = json!({
+            "soundLibrary": {
+                TEST_SOUND_PATH: { "enabled": false }
+            }
+        });
+        assert!(migrate_sound_library_enabled(&mut value));
+        let entry = &value["soundLibrary"][TEST_SOUND_PATH];
+        assert_eq!(entry["hidden"], true);
+        assert!(entry.get("enabled").is_none());
+
+        let (data, needs_persist) = load_store_with_sound_entry(json!({ "enabled": false }));
+        assert!(data.sound_library[TEST_SOUND_PATH].hidden);
+        assert!(needs_persist);
+    }
+
+    #[test]
+    fn sound_library_enabled_true_migrates_to_hidden_false() {
+        let (data, needs_persist) = load_store_with_sound_entry(json!({ "enabled": true }));
+        assert!(!data.sound_library[TEST_SOUND_PATH].hidden);
+        assert!(needs_persist);
+    }
+
+    #[test]
+    fn sound_library_without_enabled_is_unchanged() {
+        let mut value = json!({
+            "soundLibrary": {
+                TEST_SOUND_PATH: { "source": "local" }
+            }
+        });
+        let original = value.clone();
+        assert!(!migrate_sound_library_enabled(&mut value));
+        assert_eq!(value, original);
+
+        let (data, needs_persist) = load_store_with_sound_entry(json!({ "source": "local" }));
+        assert!(!data.sound_library[TEST_SOUND_PATH].hidden);
+        assert!(!needs_persist);
+    }
+
+    #[test]
+    fn sound_library_hidden_takes_precedence_over_enabled() {
+        let mut value = json!({
+            "soundLibrary": {
+                TEST_SOUND_PATH: { "hidden": false, "enabled": false }
+            }
+        });
+        assert!(migrate_sound_library_enabled(&mut value));
+        let entry = &value["soundLibrary"][TEST_SOUND_PATH];
+        assert_eq!(entry["hidden"], false);
+        assert!(entry.get("enabled").is_none());
+
+        let (data, needs_persist) =
+            load_store_with_sound_entry(json!({ "hidden": false, "enabled": false }));
+        assert!(!data.sound_library[TEST_SOUND_PATH].hidden);
+        assert!(needs_persist);
+    }
 
     #[test]
     fn rgba_to_hex_converts_and_drops_alpha() {
diff --git a/src/renderer/api/modules/resourceApi.ts b/src/renderer/api/modules/resourceApi.ts
index 5baa97d6..7514ae3b 100644
--- a/src/renderer/api/modules/resourceApi.ts
+++ b/src/renderer/api/modules/resourceApi.ts
@@ -25,6 +25,17 @@ export const soundApi = {
     invoke<import('@src/types/plugin/api').SoundDeleteResult>('sound_delete', {
       soundPath,
     }),
+  setHidden: (soundPath: string, hidden: boolean) =>
+    invoke<import('@src/types/plugin/api').SoundSetHiddenResult>(
+      'sound_set_hidden',
+      { soundPath, hidden },
+    ),
+  // deprecated — setHidden의 역논리 별칭 (enabled = !hidden)
+  setEnabled: (soundPath: string, enabled: boolean) =>
+    invoke<import('@src/types/plugin/api').SoundSetEnabledResult>(
+      'sound_set_enabled',
+      { soundPath, enabled },
+    ),
   saveProcessedWav: (
     wavBase64: string,
     fileName?: string,
diff --git a/src/renderer/components/main/Grid/PropertiesPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel.tsx
index 771e8269..2c5892ab 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel.tsx
@@ -2588,6 +2588,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           onClick={handleTogglePanel}
           className="m-[8px] w-[32px] h-[32px] flex items-center justify-center bg-glass-dim backdrop-blur-[24px] rounded-[8px] shadow-elevation-chrome text-white/45 hover:text-white/90 transition-colors"
           title={t('propertiesPanel.openPanel') || '속성 패널 열기'}
+          aria-label={t('propertiesPanel.openPanel') || '속성 패널 열기'}
         >
           <SidebarToggleIcon isOpen={false} />
         </button>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
index 545bfb81..6500b55a 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
@@ -56,6 +56,7 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
           onClick={handlePluginSettingsPanelCancel}
           className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
           title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
+          aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
         >
           <SidebarToggleIcon isOpen={true} />
         </button>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchCounterTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchCounterTabContent.tsx
index aa27ca9d..419a23e0 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchCounterTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchCounterTabContent.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { createPortal } from 'react-dom';
 import type { KeyCounterSettings } from '@src/types/key/keys';
 import {
@@ -78,8 +78,6 @@ const BatchCounterTabContent: React.FC<BatchCounterTabContentProps> = ({
   isStrokePickerOpen,
   t,
 }) => {
-  const fontButtonRef = useRef<HTMLButtonElement>(null);
-  const animationButtonRef = useRef<HTMLButtonElement>(null);
   // 인-패널 내비게이션 (폰트/애니메이션 서브 페이지)
   const { activePageKey, renderPageKey, openPage, closePage, pageHost } =
     usePanelNav();
@@ -248,7 +246,6 @@ const BatchCounterTabContent: React.FC<BatchCounterTabContentProps> = ({
         {/* 폰트 */}
         <PropertyRow label={t('counterSetting.font') || '폰트'}>
           <button
-            ref={fontButtonRef}
             type="button"
             className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
               activePageKey === FONT_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -318,7 +315,6 @@ const BatchCounterTabContent: React.FC<BatchCounterTabContentProps> = ({
 
         <PropertyRow label={t('counterSetting.animation') || '애니메이션 설정'}>
           <button
-            ref={animationButtonRef}
             type="button"
             className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
               activePageKey === ANIMATION_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -339,13 +335,10 @@ const BatchCounterTabContent: React.FC<BatchCounterTabContentProps> = ({
         createPortal(
           <FontPicker
             open
-            referenceRef={fontButtonRef}
             selectedFont={batchCounterSettings.fontFamily || null}
             onFontSelect={(fontFamily) => {
               handleBatchCounterUpdate({ fontFamily });
             }}
-            onClose={closePage}
-            renderMode="page"
             pageTitle={t('counterSetting.font') || '폰트'}
             onBack={closePage}
           />,
@@ -358,14 +351,11 @@ const BatchCounterTabContent: React.FC<BatchCounterTabContentProps> = ({
         createPortal(
           <CounterAnimationPicker
             open
-            referenceRef={animationButtonRef}
             animation={batchCounterSettings.animation}
             counterSettings={batchCounterSettings}
             keyVisual={keyVisual}
             onAnimationChange={handleAnimationUpdate}
-            onClose={closePage}
             t={t}
-            renderMode="page"
             pageTitle={t('counterSetting.animation') || '애니메이션'}
             onBack={closePage}
           />,
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
index 70d94de8..afe1e3c5 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
@@ -585,6 +585,9 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
               onClick={handleToggleMode}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
+              aria-label={
+                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
+              }
             >
               <ModeToggleIcon mode="layer" />
             </button>
@@ -592,6 +595,7 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
               onClick={handleTogglePanel}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
+              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
             >
               <SidebarToggleIcon isOpen={true} />
             </button>
@@ -1138,6 +1142,9 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
               onClick={handleToggleMode}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
+              aria-label={
+                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
+              }
             >
               <ModeToggleIcon mode="layer" />
             </button>
@@ -1145,6 +1152,7 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
               onClick={handleTogglePanel}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
+              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
             >
               <SidebarToggleIcon isOpen={true} />
             </button>
@@ -1494,6 +1502,9 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
               onClick={handleToggleMode}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
+              aria-label={
+                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
+              }
             >
               <ModeToggleIcon mode="layer" />
             </button>
@@ -1501,6 +1512,7 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
               onClick={handleTogglePanel}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
+              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
             >
               <SidebarToggleIcon isOpen={true} />
             </button>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchStyleTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchStyleTabContent.tsx
index ea530f5d..eb0d78ce 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchStyleTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchStyleTabContent.tsx
@@ -183,8 +183,6 @@ const BatchStyleTabContent: React.FC<BatchStyleTabContentProps> = ({
       }
     };
   }, []);
-  const fontButtonRef = useRef<HTMLButtonElement>(null);
-  const soundButtonRef = useRef<HTMLButtonElement>(null);
 
   // displayText의 실제 표시 값(displayText || keyInfo.displayName)을 기준으로 Mixed 판단
   const getDisplayTextMixed = (): { isMixed: boolean; value: string } => {
@@ -715,7 +713,6 @@ const BatchStyleTabContent: React.FC<BatchStyleTabContentProps> = ({
                   <span className="text-fg-faint text-body italic">Mixed</span>
                 ) : null}
                 <button
-                  ref={fontButtonRef}
                   type="button"
                   className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
                     activePageKey === FONT_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -914,7 +911,6 @@ const BatchStyleTabContent: React.FC<BatchStyleTabContentProps> = ({
                   <span className="text-fg-faint text-body italic">Mixed</span>
                 ) : null}
                 <button
-                  ref={soundButtonRef}
                   type="button"
                   className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
                     activePageKey === SOUND_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -961,13 +957,10 @@ const BatchStyleTabContent: React.FC<BatchStyleTabContentProps> = ({
         createPortal(
           <FontPicker
             open
-            referenceRef={fontButtonRef}
             selectedFont={getMixedValue((pos) => pos.fontFamily, null).value}
             onFontSelect={(fontName) => {
               handleBatchStyleChangeComplete('fontFamily', fontName);
             }}
-            onClose={closePage}
-            renderMode="page"
             pageTitle={t('propertiesPanel.font') || '폰트'}
             onBack={closePage}
           />,
@@ -981,7 +974,6 @@ const BatchStyleTabContent: React.FC<BatchStyleTabContentProps> = ({
         createPortal(
           <SoundPicker
             open={true}
-            referenceRef={soundButtonRef}
             selectedSound={
               (getKeyOnlyMixedValue ?? getMixedValue)(
                 (pos) => pos.soundPath,
@@ -994,14 +986,12 @@ const BatchStyleTabContent: React.FC<BatchStyleTabContentProps> = ({
                 handleBatchStyleChangeComplete
               )('soundPath', soundPath || '');
             }}
-            onClose={closePage}
             previewVolume={
               (getKeyOnlyMixedValue ?? getMixedValue)(
                 (pos) => pos.soundVolume,
                 100,
               ).value
             }
-            renderMode="page"
             pageTitle={t('propertiesPanel.keySound') || '키 사운드'}
             onBack={closePage}
           />,
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
index b3928f10..d7064be5 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
@@ -140,6 +140,9 @@ const LayerPanel: React.FC<LayerPanelProps> = ({
               title={
                 t('propertiesPanel.switchToProperty') || 'Switch to Property'
               }
+              aria-label={
+                t('propertiesPanel.switchToProperty') || 'Switch to Property'
+              }
             >
               <ModeToggleIcon mode="property" disabled={!hasSelection} />
             </button>
@@ -148,6 +151,7 @@ const LayerPanel: React.FC<LayerPanelProps> = ({
               onClick={onClose}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.closePanel') || 'Close Panel'}
+              aria-label={t('propertiesPanel.closePanel') || 'Close Panel'}
             >
               <SidebarToggleIcon isOpen={true} />
             </button>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
index a37a8e15..0fbd9796 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
@@ -795,7 +795,6 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
             }}
             items={actions.contextMenuItems}
             onSelect={actions.handleContextMenuSelect}
-            className="!z-[10000]"
           />,
           document.body,
         )}
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/CounterTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/CounterTabContent.tsx
index 977f6e71..ffca2e97 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/CounterTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/CounterTabContent.tsx
@@ -38,8 +38,6 @@ const CounterTabContent: React.FC<CounterTabContentProps> = ({
 }) => {
   const fillBtnRef = useRef<HTMLButtonElement>(null);
   const strokeBtnRef = useRef<HTMLButtonElement>(null);
-  const fontBtnRef = useRef<HTMLButtonElement>(null);
-  const animationBtnRef = useRef<HTMLButtonElement>(null);
 
   const [pickerFor, setPickerFor] = useState<PickerTarget>(null);
   const pickerOpen = pickerFor !== null;
@@ -307,7 +305,6 @@ const CounterTabContent: React.FC<CounterTabContentProps> = ({
         {/* 폰트 */}
         <PropertyRow label={t('counterSetting.font') || '폰트'}>
           <button
-            ref={fontBtnRef}
             type="button"
             className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
               activePageKey === FONT_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -378,7 +375,6 @@ const CounterTabContent: React.FC<CounterTabContentProps> = ({
 
         <PropertyRow label={t('counterSetting.animation') || '애니메이션 설정'}>
           <button
-            ref={animationBtnRef}
             type="button"
             className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
               activePageKey === ANIMATION_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -418,13 +414,10 @@ const CounterTabContent: React.FC<CounterTabContentProps> = ({
         createPortal(
           <FontPicker
             open
-            referenceRef={fontBtnRef}
             selectedFont={counterSettings.fontFamily || null}
             onFontSelect={(fontName) => {
               handleCounterUpdate({ fontFamily: fontName });
             }}
-            onClose={closePage}
-            renderMode="page"
             pageTitle={t('counterSetting.font') || '폰트'}
             onBack={closePage}
           />,
@@ -437,7 +430,6 @@ const CounterTabContent: React.FC<CounterTabContentProps> = ({
         createPortal(
           <CounterAnimationPicker
             open
-            referenceRef={animationBtnRef}
             animation={counterSettings.animation}
             counterSettings={counterSettings}
             keyVisual={{
@@ -464,9 +456,7 @@ const CounterTabContent: React.FC<CounterTabContentProps> = ({
               isStat,
             }}
             onAnimationChange={handleAnimationUpdate}
-            onClose={closePage}
             t={t}
-            renderMode="page"
             pageTitle={t('counterSetting.animation') || '애니메이션'}
             onBack={closePage}
           />,
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
index 2b82bdaf..35040ac7 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
@@ -142,6 +142,7 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
             onClick={handleToggleMode}
             className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
             title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
+            aria-label={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
           >
             <ModeToggleIcon mode="layer" />
           </button>
@@ -149,6 +150,7 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
             onClick={handleTogglePanel}
             className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
             title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
+            aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
           >
             <SidebarToggleIcon isOpen={true} />
           </button>
@@ -355,6 +357,7 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
             onClick={handleToggleMode}
             className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
             title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
+            aria-label={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
           >
             <ModeToggleIcon mode="layer" />
           </button>
@@ -362,6 +365,7 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
             onClick={handleTogglePanel}
             className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
             title={t('propertiesPanel.closePanel') || 'Close'}
+            aria-label={t('propertiesPanel.closePanel') || 'Close'}
           >
             <SidebarToggleIcon isOpen={true} />
           </button>
@@ -994,6 +998,7 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
             onClick={handleToggleMode}
             className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
             title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
+            aria-label={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
           >
             <ModeToggleIcon mode="layer" />
           </button>
@@ -1001,6 +1006,7 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
             onClick={handleTogglePanel}
             className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
             title={t('propertiesPanel.closePanel') || 'Close'}
+            aria-label={t('propertiesPanel.closePanel') || 'Close'}
           >
             <SidebarToggleIcon isOpen={true} />
           </button>
@@ -1554,6 +1560,9 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
               onClick={handleToggleMode}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
+              aria-label={
+                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
+              }
             >
               <ModeToggleIcon mode="layer" />
             </button>
@@ -1562,6 +1571,7 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
               onClick={handleTogglePanel}
               className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
               title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
+              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
             >
               <SidebarToggleIcon isOpen={true} />
             </button>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
index 6ccd11c3..f69da6ef 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
@@ -104,8 +104,6 @@ const StyleTabContent: React.FC<StyleTabContentInternalProps> = ({
   // 컬러 버튼 refs
   const bgColorBtnRef = useRef<HTMLButtonElement>(null);
   // 폰트 버튼 ref
-  const fontButtonRef = useRef<HTMLButtonElement>(null);
-  const soundButtonRef = useRef<HTMLButtonElement>(null);
   const borderColorBtnRef = useRef<HTMLButtonElement>(null);
   const fontColorBtnRef = useRef<HTMLButtonElement>(null);
   const internalImageButtonRef = useRef<HTMLButtonElement>(null);
@@ -591,7 +589,6 @@ const StyleTabContent: React.FC<StyleTabContentInternalProps> = ({
         {/* 폰트 */}
         <PropertyRow label={t('propertiesPanel.font') || '폰트'}>
           <button
-            ref={fontButtonRef}
             type="button"
             className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
               activePageKey === FONT_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -706,7 +703,6 @@ const StyleTabContent: React.FC<StyleTabContentInternalProps> = ({
 
           <PropertyRow label={t('propertiesPanel.keySound') || '키 사운드'}>
             <button
-              ref={soundButtonRef}
               type="button"
               className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
                 activePageKey === SOUND_PAGE_KEY ? 'shadow-focus-ring' : ''
@@ -801,13 +797,10 @@ const StyleTabContent: React.FC<StyleTabContentInternalProps> = ({
         createPortal(
           <FontPicker
             open
-            referenceRef={fontButtonRef}
             selectedFont={keyPosition.fontFamily || null}
             onFontSelect={(fontName) => {
               handleStyleChangeComplete('fontFamily', fontName);
             }}
-            onClose={closePage}
-            renderMode="page"
             pageTitle={t('propertiesPanel.font') || '폰트'}
             onBack={closePage}
           />,
@@ -821,16 +814,13 @@ const StyleTabContent: React.FC<StyleTabContentInternalProps> = ({
         createPortal(
           <SoundPicker
             open
-            referenceRef={soundButtonRef}
             selectedSound={keyPosition.soundPath || null}
             onSoundSelect={(soundPath) => {
               const nextPath = soundPath || '';
               onKeyPreview?.(keyIndex, { soundPath: nextPath });
               onKeyUpdate({ index: keyIndex, soundPath: nextPath });
             }}
-            onClose={closePage}
             previewVolume={keyPosition.soundVolume ?? 100}
-            renderMode="page"
             pageTitle={t('propertiesPanel.keySound') || '키 사운드'}
             onBack={closePage}
           />,
diff --git a/src/renderer/components/main/Grid/core/Grid.tsx b/src/renderer/components/main/Grid/core/Grid.tsx
index f794e5c7..b547f0cc 100644
--- a/src/renderer/components/main/Grid/core/Grid.tsx
+++ b/src/renderer/components/main/Grid/core/Grid.tsx
@@ -1710,7 +1710,7 @@ const Grid = ({
               top: displayBounds.y * zoom + panY - 2,
               width: displayBounds.width * zoom + 4,
               height: displayBounds.height * zoom + 4,
-              border: '2px solid rgba(59, 130, 246, 0.8)',
+              border: '2px solid var(--ui-selection-border)',
               borderRadius: '4px',
               pointerEvents: 'none',
               zIndex: 20,
diff --git a/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx b/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx
index cc650b58..cb06fba4 100644
--- a/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx
+++ b/src/renderer/components/main/Grid/handles/GroupResizeHandles.tsx
@@ -142,8 +142,8 @@ const getHandleStyle = (
   isHovered: boolean,
 ): React.CSSProperties => {
   const baseStyle: React.CSSProperties = {
-    backgroundColor: isHovered ? 'rgba(59, 130, 246, 1)' : 'white',
-    border: '2px solid rgba(59, 130, 246, 0.9)',
+    backgroundColor: isHovered ? 'var(--ui-selection)' : 'white',
+    border: '2px solid var(--ui-selection-border-strong)',
     pointerEvents: 'none',
     transition: 'background-color 0.15s ease',
   };
@@ -766,7 +766,7 @@ const GroupResizeHandles = ({
           top: selectionTop,
           width: selectionWidth,
           height: selectionHeight,
-          border: `${GROUP_BORDER_WIDTH}px solid rgba(59, 130, 246, 0.9)`,
+          border: `${GROUP_BORDER_WIDTH}px solid var(--ui-selection-border-strong)`,
           borderRadius: '6px',
           pointerEvents: 'none' as const,
           zIndex: 22,
diff --git a/src/renderer/components/main/Grid/handles/ResizeHandles.tsx b/src/renderer/components/main/Grid/handles/ResizeHandles.tsx
index 352ae4b5..83b01b47 100644
--- a/src/renderer/components/main/Grid/handles/ResizeHandles.tsx
+++ b/src/renderer/components/main/Grid/handles/ResizeHandles.tsx
@@ -131,8 +131,8 @@ const getHandleStyle = (
   isHovered: boolean,
 ): React.CSSProperties => {
   const baseStyle: React.CSSProperties = {
-    backgroundColor: isHovered ? 'rgba(59, 130, 246, 1)' : 'white',
-    border: '1.5px solid rgba(59, 130, 246, 0.9)',
+    backgroundColor: isHovered ? 'var(--ui-selection)' : 'white',
+    border: '1.5px solid var(--ui-selection-border-strong)',
     pointerEvents: 'none',
     transition: 'background-color 0.15s ease',
   };
diff --git a/src/renderer/components/main/Grid/overlays/MarqueeSelectionOverlay.tsx b/src/renderer/components/main/Grid/overlays/MarqueeSelectionOverlay.tsx
index 038bb26a..d0777fe7 100644
--- a/src/renderer/components/main/Grid/overlays/MarqueeSelectionOverlay.tsx
+++ b/src/renderer/components/main/Grid/overlays/MarqueeSelectionOverlay.tsx
@@ -35,8 +35,8 @@ export const MarqueeSelectionOverlay: React.FC<
         top: rect.top * zoom + panY,
         width: rect.width * zoom,
         height: rect.height * zoom,
-        backgroundColor: 'rgba(59, 130, 246, 0.15)',
-        border: '1px dashed rgba(59, 130, 246, 0.8)',
+        backgroundColor: 'var(--ui-selection-fill)',
+        border: '1px dashed var(--ui-selection-border)',
         pointerEvents: 'none',
         zIndex: 9998,
       }}
diff --git a/src/renderer/components/main/Grid/overlays/SmartGuidesOverlay.tsx b/src/renderer/components/main/Grid/overlays/SmartGuidesOverlay.tsx
index 520244ed..74ae31c7 100644
--- a/src/renderer/components/main/Grid/overlays/SmartGuidesOverlay.tsx
+++ b/src/renderer/components/main/Grid/overlays/SmartGuidesOverlay.tsx
@@ -273,7 +273,7 @@ export const SmartGuidesOverlay: React.FC<SmartGuidesOverlayProps> = ({
 
           return (
             <g key={`size-match-${index}`}>
-              {/* 일치하는 요소에 파란색 테두리 표시 */}
+              {/* 일치하는 요소에 셀렉션 테두리 표시 */}
               {bounds && (
                 <rect
                   x={bounds.left}
@@ -281,12 +281,12 @@ export const SmartGuidesOverlay: React.FC<SmartGuidesOverlayProps> = ({
                   width={bounds.width}
                   height={bounds.height}
                   fill="none"
-                  stroke="#3B82F6"
                   strokeWidth={2 / zoom}
                   strokeDasharray={`${4 / zoom} ${2 / zoom}`}
                   rx={4 / zoom}
                   style={{
-                    filter: 'drop-shadow(0 0 3px rgba(59, 130, 246, 0.5))',
+                    stroke: 'var(--ui-selection)',
+                    filter: 'drop-shadow(0 0 3px var(--ui-selection-glow))',
                   }}
                 />
               )}
@@ -297,7 +297,7 @@ export const SmartGuidesOverlay: React.FC<SmartGuidesOverlayProps> = ({
                 width={48 / zoom}
                 height={16 / zoom}
                 rx={4 / zoom}
-                fill="#3B82F6"
+                style={{ fill: 'var(--ui-selection)' }}
                 opacity={0.9}
               />
               {/* 라벨 텍스트 */}
diff --git a/src/renderer/components/main/Modal/FloatingPopup.tsx b/src/renderer/components/main/Modal/FloatingPopup.tsx
index fed0c6b9..5b0f1bad 100644
--- a/src/renderer/components/main/Modal/FloatingPopup.tsx
+++ b/src/renderer/components/main/Modal/FloatingPopup.tsx
@@ -64,16 +64,23 @@ const FloatingPopup = ({
       refs.setReference(referenceRef.current);
   }, [referenceRef, refs.setReference]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Escape 소유는 autoClose와 무관 — 한 번에 한 겹씩 닫힘.
+  // 위에 body 포털 서브메뉴가 떠 있으면 그쪽이 상위 레이어이므로 양보
   useEffect(() => {
-    if (open && autoClose) {
-      const onKey = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') {
-          // 이 레이어가 소비 — 하위 레이어(페이지·그리드 선택)로 내려가지 않게
-          e.preventDefault();
-          onClose?.();
-        }
-      };
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || e.defaultPrevented) return;
+      if (document.querySelector('[data-dmn-popup-submenu="true"]')) return;
+      // 이 레이어가 소비 — 하위 레이어(페이지·그리드 선택)로 내려가지 않게
+      e.preventDefault();
+      onClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
 
+  useEffect(() => {
+    if (open && autoClose) {
       const onClickAway = (e: MouseEvent) => {
         const target = e.target as Node;
         if (!refs.floating.current) return;
@@ -98,10 +105,8 @@ const FloatingPopup = ({
         onClose?.();
       };
 
-      document.addEventListener('keydown', onKey);
       document.addEventListener('mousedown', onClickAway);
       return () => {
-        document.removeEventListener('keydown', onKey);
         document.removeEventListener('mousedown', onClickAway);
       };
     }
diff --git a/src/renderer/components/main/Modal/ListPopup.tsx b/src/renderer/components/main/Modal/ListPopup.tsx
index 7e443d1c..ab1bc356 100644
--- a/src/renderer/components/main/Modal/ListPopup.tsx
+++ b/src/renderer/components/main/Modal/ListPopup.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import FloatingPopup from './FloatingPopup';
 import { useLenis } from '@hooks/useLenis';
@@ -43,6 +43,7 @@ const SubMenu = ({
   anchorRect,
   onMouseEnter,
   onMouseLeave,
+  onRequestClose,
 }: {
   items: ListItem[];
   onSelect?: (id: string) => void;
@@ -52,48 +53,57 @@ const SubMenu = ({
   anchorRect: DOMRect | null;
   onMouseEnter?: () => void;
   onMouseLeave?: () => void;
+  onRequestClose?: () => void;
 }) => {
   const subMenuRef = useRef<HTMLDivElement>(null);
   const siblingActiveRef = useRef<{
     id: string | null;
     close: (() => void) | null;
   }>({ id: null, close: null });
-  const pos = (() => {
-    if (!anchorRect) return null;
+  // 실측 기반 배치 — 히든 렌더 후 페인트 전에 측정·확정 (추정치 없음)
+  const [pos, setPos] = useState<{
+    left?: number;
+    right?: number;
+    top: number;
+  } | null>(null);
+
+  // Escape 소유 — 열린 동안 최상위 레이어이므로 소비 후 자신만 닫기
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || e.defaultPrevented) return;
+      e.preventDefault();
+      onRequestClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [onRequestClose]);
+
+  useLayoutEffect(() => {
+    const el = subMenuRef.current;
+    if (!anchorRect || !el) return;
 
     const padding = 5;
+    const { offsetWidth: width, offsetHeight: height } = el;
     const normalLeft = anchorRect.right + 2;
     let top = anchorRect.top;
 
-    // 서브메뉴의 대략적인 높이 추정 (아이템 26 + 갭 4 + 패딩 8)
-    const separatorCount = items.filter((i) => i.type === 'separator').length;
-    const itemCount = items.length - separatorCount;
-    const estimatedHeight = itemCount * 30 + separatorCount * 5 + 4;
-    const estimatedWidth = 160;
-
     // 오른쪽 경계 체크 → 공간 부족 시 왼쪽에 표시 (right 기준 정렬)
-    const flipToLeft =
-      normalLeft + estimatedWidth > window.innerWidth - padding;
+    const flipToLeft = normalLeft + width > window.innerWidth - padding;
 
     // 아래쪽 경계 체크
-    if (top + estimatedHeight > window.innerHeight - padding) {
-      top = window.innerHeight - estimatedHeight - padding;
+    if (top + height > window.innerHeight - padding) {
+      top = window.innerHeight - height - padding;
     }
     if (top < padding) top = padding;
 
-    if (flipToLeft) {
-      return { right: window.innerWidth - anchorRect.left + 2, top } as {
-        left?: number;
-        right?: number;
-        top: number;
-      };
-    }
-    return { left: normalLeft, top } as {
-      left?: number;
-      right?: number;
-      top: number;
-    };
-  })();
+    // 측정→배치 패턴: 페인트 전 위치 확정이 목적이라 동기 setState가 의도임
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setPos(
+      flipToLeft
+        ? { right: window.innerWidth - anchorRect.left + 2, top }
+        : { left: normalLeft, top },
+    );
+  }, [anchorRect, items.length]);
 
   const itemHeight = 26;
   const itemGap = 4;
@@ -110,7 +120,7 @@ const SubMenu = ({
     wheelMultiplier: 0.7,
   });
 
-  if (!pos) return null;
+  if (!anchorRect) return null;
 
   // body 포털 필수 — 부모 팝업의 backdrop-filter가 fixed의 containing block이 되어
   // 뷰포트 좌표가 어긋나는 것 방지. 호버 유지는 onMouseEnter/Leave 콜백으로 연결
@@ -124,13 +134,14 @@ const SubMenu = ({
       data-dmn-popup-submenu="true"
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className={`fixed z-[10001] bg-glass backdrop-blur-[24px] shadow-elevation-2 rounded-surface p-[4px] flex flex-col gap-[4px] tooltip-fade-in${
+      className={`fixed z-[60] bg-glass backdrop-blur-[24px] shadow-elevation-2 rounded-surface p-[4px] flex flex-col gap-[4px] tooltip-fade-in${
         needsScroll ? ' listpopup-scroll' : ''
       }`}
       style={{
-        left: pos.left,
-        right: pos.right,
-        top: pos.top,
+        left: pos?.left,
+        right: pos?.right,
+        top: pos?.top ?? 0,
+        visibility: pos ? undefined : 'hidden',
         ...(maxHeight
           ? { maxHeight, overflowY: 'auto', overflowX: 'hidden' }
           : {}),
@@ -347,6 +358,13 @@ const MenuItemRow = ({
             if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
           }}
           onMouseLeave={handleMouseLeave}
+          onRequestClose={() => {
+            if (hoverTimerRef.current) clearTimeout(hoverTimerRef.current);
+            setSubMenuOpen(false);
+            if (siblingActiveRef?.current.id === item.id) {
+              siblingActiveRef.current = { id: null, close: null };
+            }
+          }}
         />
       )}
     </div>
diff --git a/src/renderer/components/main/Modal/ManagerModalLayout.tsx b/src/renderer/components/main/Modal/ManagerModalLayout.tsx
index bd670d59..68631b36 100644
--- a/src/renderer/components/main/Modal/ManagerModalLayout.tsx
+++ b/src/renderer/components/main/Modal/ManagerModalLayout.tsx
@@ -5,7 +5,6 @@ import React, {
   type ReactNode,
 } from 'react';
 import { useLenis } from '@hooks/useLenis';
-import { getScrollShadowState } from '@utils/grid/scrollShadow';
 import Modal from './Modal';
 
 const MAX_SCROLL_HEIGHT = 195;
@@ -35,29 +34,11 @@ const ManagerModalLayout = ({
   contentDeps = [],
 }: ManagerModalLayoutProps) => {
   const contentRef = useRef<HTMLDivElement>(null);
-  const [scrollState, setScrollState] = useState({
-    hasTopShadow: false,
-    hasBottomShadow: false,
-  });
-  const [skipShadowTransition, setSkipShadowTransition] = useState(true);
   const [containerHeight, setContainerHeight] = useState<number | null>(null);
   const [isScrollable, setIsScrollable] = useState(false);
   const isFirstRender = useRef(true);
 
-  const updateScrollState = (el: HTMLElement | null) => {
-    if (!el) return;
-    const nextState = getScrollShadowState(el, contentRef.current);
-    setScrollState((prev) =>
-      prev.hasTopShadow === nextState.hasTopShadow &&
-      prev.hasBottomShadow === nextState.hasBottomShadow
-        ? prev
-        : nextState,
-    );
-  };
-
-  const { scrollContainerRef: scrollRef, wrapperElement } = useLenis({
-    onScroll: () => updateScrollState(wrapperElement),
-  });
+  const { scrollContainerRef: scrollRef } = useLenis();
 
   useLayoutEffect(() => {
     if (!isOpen) {
@@ -65,35 +46,23 @@ const ManagerModalLayout = ({
       return;
     }
 
-    setSkipShadowTransition(true);
-    setScrollState({ hasTopShadow: false, hasBottomShadow: false });
     setIsScrollable(false);
 
-    const el = wrapperElement;
     const contentEl = contentRef.current;
-    if (!el) return;
+    if (!contentEl) return;
 
     const updateHeight = () => {
-      if (contentEl) {
-        const contentHeight = contentEl.scrollHeight;
-        setContainerHeight(Math.min(contentHeight, MAX_SCROLL_HEIGHT));
-        setIsScrollable(contentHeight > MAX_SCROLL_HEIGHT);
-      }
+      const contentHeight = contentEl.scrollHeight;
+      setContainerHeight(Math.min(contentHeight, MAX_SCROLL_HEIGHT));
+      setIsScrollable(contentHeight > MAX_SCROLL_HEIGHT);
     };
 
-    const resizeObserver = new ResizeObserver(() => {
-      updateScrollState(el);
-      updateHeight();
-    });
-
-    if (contentEl) resizeObserver.observe(contentEl);
-    resizeObserver.observe(el);
-
-    updateScrollState(el);
+    // 콘텐츠 크기 변경 감지 (높이 애니메이션용)
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(contentEl);
     updateHeight();
 
     const rafId = requestAnimationFrame(() => {
-      setSkipShadowTransition(false);
       isFirstRender.current = false;
     });
 
@@ -102,14 +71,10 @@ const ManagerModalLayout = ({
       cancelAnimationFrame(rafId);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen, wrapperElement, ...contentDeps]);
+  }, [isOpen, ...contentDeps]);
 
   if (!isOpen) return null;
 
-  const shadowTransitionClass = skipShadowTransition
-    ? ''
-    : 'transition-opacity duration-150';
-
   return (
     <Modal onClick={onClose}>
       <div
@@ -120,39 +85,22 @@ const ManagerModalLayout = ({
         {tabs && <div className="pr-[14px]">{tabs}</div>}
 
         {/* 스크롤 영역 */}
-        <div className="relative">
-          {/* 상단 그림자 */}
-          <div
-            className={`absolute top-0 left-0 right-[14px] h-[10px] bg-gradient-to-b from-glass-heavy to-transparent pointer-events-none z-10 ${shadowTransitionClass} ${
-              scrollState.hasTopShadow ? 'opacity-100' : 'opacity-0'
-            }`}
-          />
-
-          <div
-            ref={scrollRef}
-            className="modal-content-scroll pr-[14px]"
-            style={{
-              height:
-                containerHeight !== null ? `${containerHeight}px` : 'auto',
-              maxHeight: `${MAX_SCROLL_HEIGHT}px`,
-              overflowY: isScrollable ? 'auto' : 'hidden',
-              transition: isFirstRender.current
-                ? 'none'
-                : 'height 100ms ease-in-out',
-              willChange: 'scroll-position',
-            }}
-          >
-            <div ref={contentRef} className="flex flex-col gap-[19px] py-[5px]">
-              {children}
-            </div>
+        <div
+          ref={scrollRef}
+          className="modal-content-scroll dmn-scroll-fade pr-[14px]"
+          style={{
+            height: containerHeight !== null ? `${containerHeight}px` : 'auto',
+            maxHeight: `${MAX_SCROLL_HEIGHT}px`,
+            overflowY: isScrollable ? 'auto' : 'hidden',
+            transition: isFirstRender.current
+              ? 'none'
+              : 'height 100ms ease-in-out',
+            willChange: 'scroll-position',
+          }}
+        >
+          <div ref={contentRef} className="flex flex-col gap-[19px] py-[5px]">
+            {children}
           </div>
-
-          {/* 하단 그림자 */}
-          <div
-            className={`absolute bottom-0 left-0 right-[14px] h-[10px] bg-gradient-to-t from-glass-heavy to-transparent pointer-events-none z-10 ${shadowTransitionClass} ${
-              scrollState.hasBottomShadow ? 'opacity-100' : 'opacity-0'
-            }`}
-          />
         </div>
 
         {/* 구분선 */}
diff --git a/src/renderer/components/main/Modal/content/dialogs/Alert.tsx b/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
index 3456e473..6eac425a 100644
--- a/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { useLenis } from '@hooks/useLenis';
 import { useTranslation } from '@contexts/useTranslation';
 import Modal from '../../Modal';
-import { getScrollShadowState } from '@utils/grid/scrollShadow';
 
 interface AlertProps {
   isOpen: boolean;
@@ -27,42 +26,11 @@ const Alert = ({
 }: AlertProps) => {
   const { t } = useTranslation();
 
-  const [scrollState, setScrollState] = useState<{
-    hasTopShadow: boolean;
-    hasBottomShadow: boolean;
-  }>({
-    hasTopShadow: false,
-    hasBottomShadow: false,
-  });
-
-  // 스크롤 상태 업데이트 함수
-  const updateScrollState = (el: HTMLElement | null) => {
-    if (!el) return;
-    const nextState = getScrollShadowState(el);
-    setScrollState((prev) =>
-      prev.hasTopShadow === nextState.hasTopShadow &&
-      prev.hasBottomShadow === nextState.hasBottomShadow
-        ? prev
-        : nextState,
-    );
-  };
-
-  // Lenis smooth scroll 적용 (onScroll 콜백으로 그림자 업데이트)
-  const { scrollContainerRef: scrollRef, wrapperElement } = useLenis({
-    onScroll: () => updateScrollState(wrapperElement),
-  });
+  const { scrollContainerRef: scrollRef } = useLenis();
 
   const isConfirm = type === 'confirm';
   const isCustom = type === 'custom';
 
-  useEffect(() => {
-    if (isCustom && wrapperElement) {
-      // DOM이 렌더링된 후 스크롤 상태 확인
-      const timer = setTimeout(() => updateScrollState(wrapperElement), 0);
-      return () => clearTimeout(timer);
-    }
-  }, [isCustom, message, wrapperElement]);
-
   if (!isOpen) return null;
 
   const confirmLabel = confirmText || t('common.confirm');
@@ -77,27 +45,11 @@ const Alert = ({
       >
         {/* 메시지 텍스트 or Custom HTML */}
         {isCustom ? (
-          <div className="relative">
-            {/* 상단 그림자 */}
-            <div
-              className={`absolute top-0 left-0 right-[14px] h-[10px] bg-gradient-to-b from-glass-heavy to-transparent pointer-events-none z-10 transition-opacity duration-fast ${
-                scrollState.hasTopShadow ? 'opacity-100' : 'opacity-0'
-              }`}
-            />
-
-            <div
-              ref={scrollRef}
-              className="max-h-[244px] overflow-y-auto modal-content-scroll pr-[14px] text-center text-fg"
-              dangerouslySetInnerHTML={{ __html: message }}
-            />
-
-            {/* 하단 그림자 */}
-            <div
-              className={`absolute bottom-0 left-0 right-[14px] h-[10px] bg-gradient-to-t from-glass-heavy to-transparent pointer-events-none z-10 transition-opacity duration-fast ${
-                scrollState.hasBottomShadow ? 'opacity-100' : 'opacity-0'
-              }`}
-            />
-          </div>
+          <div
+            ref={scrollRef}
+            className="max-h-[244px] overflow-y-auto modal-content-scroll dmn-scroll-fade pr-[14px] text-center text-fg"
+            dangerouslySetInnerHTML={{ __html: message }}
+          />
         ) : (
           <div className="max-w-[236px] text-center text-fg text-label pr-[14px]">
             {message}
diff --git a/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx b/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
index a407b68a..85e27386 100644
--- a/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
@@ -25,7 +25,6 @@ import {
   type SaveData,
   type PreviewData,
 } from '@hooks/Modal/useUnifiedKeySettingState';
-import { getScrollShadowState } from '@utils/grid/scrollShadow';
 import type { KeyCounterSettings } from '@src/types/key/keys';
 
 // ============================================================================
@@ -56,13 +55,6 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
   const { t } = useTranslation();
   const initialSkipRef = React.useRef(skipAnimation);
   const contentRef = React.useRef<HTMLDivElement>(null);
-  const [scrollState, setScrollState] = React.useState({
-    hasTopShadow: false,
-    hasBottomShadow: false,
-  });
-  const [hasOverflow, setHasOverflow] = React.useState(false);
-  // 탭 전환 시 그림자 애니메이션 스킵 여부 (깜빡임 방지)
-  const [skipShadowTransition, setSkipShadowTransition] = React.useState(false);
   // 컨테이너 높이 (애니메이션용)
   const [containerHeight, setContainerHeight] = React.useState<number | null>(
     null,
@@ -75,26 +67,7 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
   const noteTabRef = React.useRef<NoteTabContentRef>(null);
   const counterTabRef = React.useRef<CounterTabContentRef>(null);
 
-  // 스크롤 상태 업데이트 함수
-  const updateScrollState = (el: HTMLElement | null) => {
-    if (!el) return;
-    const nextState = getScrollShadowState(el, contentRef.current);
-    setScrollState((prev) =>
-      prev.hasTopShadow === nextState.hasTopShadow &&
-      prev.hasBottomShadow === nextState.hasBottomShadow
-        ? prev
-        : nextState,
-    );
-  };
-
-  // Lenis smooth scroll 적용 (onScroll 콜백으로 그림자 업데이트)
-  const {
-    scrollContainerRef: scrollRef,
-    wrapperElement,
-    lenisInstance,
-  } = useLenis({
-    onScroll: () => updateScrollState(wrapperElement),
-  });
+  const { scrollContainerRef: scrollRef, lenisInstance } = useLenis();
 
   const {
     activeTab,
@@ -118,46 +91,24 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
     onClose,
   });
 
-  // 탭 변경 또는 마운트 시 스크롤 상태 확인 (DOM 렌더링 후 확인)
+  // 탭 변경 또는 마운트 시 콘텐츠 높이 동기화 (높이 애니메이션용)
   React.useEffect(() => {
-    // 탭 전환 시 그림자 애니메이션 스킵
-    setSkipShadowTransition(true);
-
-    // 콘텐츠 크기 변경 감지를 위한 ResizeObserver
-    const el = wrapperElement;
     const contentEl = contentRef.current;
-    if (!el) return;
+    if (!contentEl) return;
 
     const updateHeight = () => {
-      if (contentEl) {
-        const contentHeight = contentEl.scrollHeight;
-        const maxHeight = 195;
-        setContainerHeight(Math.min(contentHeight, maxHeight));
-        const nextHasOverflow = contentHeight > maxHeight;
-        setHasOverflow((prev) =>
-          prev === nextHasOverflow ? prev : nextHasOverflow,
-        );
-      }
+      const contentHeight = contentEl.scrollHeight;
+      const maxHeight = 195;
+      setContainerHeight(Math.min(contentHeight, maxHeight));
     };
 
-    const resizeObserver = new ResizeObserver(() => {
-      updateScrollState(el);
-      updateHeight();
-    });
-
     // 스크롤 영역 내부의 콘텐츠 크기 변경을 감지
-    if (contentEl) {
-      resizeObserver.observe(contentEl);
-    }
-    resizeObserver.observe(el);
-
-    // 초기 상태 확인
-    updateScrollState(el);
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(contentEl);
     updateHeight();
 
-    // 다음 프레임에서 애니메이션 다시 활성화 및 첫 렌더 플래그 해제
+    // 다음 프레임에서 첫 렌더 플래그 해제
     const rafId = requestAnimationFrame(() => {
-      setSkipShadowTransition(false);
       isFirstRender.current = false;
     });
 
@@ -165,7 +116,7 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
       resizeObserver.disconnect();
       cancelAnimationFrame(rafId);
     };
-  }, [activeTab, wrapperElement]);
+  }, [activeTab]);
 
   // 탭 변경 시 스크롤 최상단으로 초기화
   React.useEffect(() => {
@@ -250,39 +201,18 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
         </div>
 
         {/* 스크롤 영역 - 스크롤바가 모달 오른쪽 끝에 위치 */}
-        <div className="relative">
-          {/* 상단 그림자 */}
-          <div
-            className={`absolute top-0 left-0 ${
-              hasOverflow ? 'right-[14px]' : 'right-0'
-            } h-[10px] bg-gradient-to-b from-elevated to-transparent pointer-events-none z-10 ${
-              skipShadowTransition ? '' : 'transition-opacity duration-fast'
-            } ${scrollState.hasTopShadow ? 'opacity-100' : 'opacity-0'}`}
-          />
-
-          <div
-            ref={scrollRef}
-            className="overflow-y-auto modal-content-scroll pr-[14px]"
-            style={{
-              height:
-                containerHeight !== null ? `${containerHeight}px` : 'auto',
-              maxHeight: '195px',
-              transition: isFirstRender.current
-                ? 'none'
-                : 'height 100ms ease-in-out',
-            }}
-          >
-            <div ref={contentRef}>{renderTabContent()}</div>
-          </div>
-
-          {/* 하단 그림자 */}
-          <div
-            className={`absolute bottom-0 left-0 ${
-              hasOverflow ? 'right-[14px]' : 'right-0'
-            } h-[10px] bg-gradient-to-t from-elevated to-transparent pointer-events-none z-10 ${
-              skipShadowTransition ? '' : 'transition-opacity duration-fast'
-            } ${scrollState.hasBottomShadow ? 'opacity-100' : 'opacity-0'}`}
-          />
+        <div
+          ref={scrollRef}
+          className="overflow-y-auto modal-content-scroll dmn-scroll-fade pr-[14px]"
+          style={{
+            height: containerHeight !== null ? `${containerHeight}px` : 'auto',
+            maxHeight: '195px',
+            transition: isFirstRender.current
+              ? 'none'
+              : 'height 100ms ease-in-out',
+          }}
+        >
+          <div ref={contentRef}>{renderTabContent()}</div>
         </div>
 
         {/* 저장/취소 버튼 */}
diff --git a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
new file mode 100644
index 00000000..8dd45df8
--- /dev/null
+++ b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
@@ -0,0 +1,188 @@
+import React, { useEffect } from 'react';
+import { useLenis } from '@hooks/useLenis';
+import Dropdown from '@components/main/common/Dropdown';
+
+type FilterOption = {
+  value: string;
+  label: string;
+};
+
+interface CommonListPickerPageProps<T> {
+  open: boolean;
+  searchQuery: string;
+  onSearchQueryChange: (value: string) => void;
+  searchPlaceholder: string;
+  filterOptions?: FilterOption[];
+  filterValue?: string;
+  onFilterChange?: (value: string) => void;
+  items: T[];
+  renderItem: (item: T) => React.ReactNode;
+  emptyText: string;
+  isLoading?: boolean;
+  loadingText?: string;
+  errorText?: string;
+  onAdd: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  addLabel: string;
+  // 추가 버튼에 앵커된 메뉴의 기준점용
+  addButtonRef?: React.RefObject<HTMLButtonElement>;
+  pageTitle: string;
+  onBack: () => void;
+}
+
+export default function CommonListPickerPage<T>({
+  open,
+  searchQuery,
+  onSearchQueryChange,
+  searchPlaceholder,
+  filterOptions,
+  filterValue,
+  onFilterChange,
+  items,
+  renderItem,
+  emptyText,
+  isLoading = false,
+  loadingText = '로딩...',
+  errorText = '',
+  onAdd,
+  addLabel,
+  addButtonRef,
+  pageTitle,
+  onBack,
+}: CommonListPickerPageProps<T>) {
+  const { scrollContainerRef: scrollRef, lenisInstance } = useLenis();
+
+  useEffect(() => {
+    if (!open) return;
+    const rafId = requestAnimationFrame(() => {
+      lenisInstance.current?.resize?.();
+    });
+    return () => cancelAnimationFrame(rafId);
+  }, [open, items.length, filterValue, searchQuery, lenisInstance]);
+
+  if (!open) return null;
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      {/* 헤더 — 뒤로가기: 타이틀 캡하이트급 셰브론 + 타이틀 통짜 버튼 */}
+      <div className="p-[12px]">
+        <button
+          type="button"
+          onClick={onBack}
+          className="group flex items-center gap-[6px] min-w-0"
+        >
+          <svg
+            width="7"
+            height="12"
+            viewBox="0 0 7 12"
+            fill="none"
+            className="shrink-0 text-fg-muted group-hover:text-fg transition-colors duration-fast"
+          >
+            <path
+              d="M5.5 1.5L1.5 6L5.5 10.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <span className="text-fg group-hover:text-white text-style-2 leading-none truncate transition-colors duration-fast">
+            {pageTitle}
+          </span>
+        </button>
+      </div>
+      {/* 검색 — 리스트와 인접한 프라이머리 컨트롤 */}
+      <div className="px-[12px] pb-[12px] shrink-0">
+        <div className="relative">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            className="absolute left-[10px] top-1/2 -translate-y-1/2 text-fg-faint pointer-events-none"
+          >
+            <circle
+              cx="5"
+              cy="5"
+              r="3.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+            />
+            <path
+              d="M8 8L10.5 10.5"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(event) => onSearchQueryChange(event.target.value)}
+            placeholder={searchPlaceholder}
+            className="w-full h-[30px] pl-[30px] pr-[10px] bg-inset rounded-surface text-fg text-body placeholder-fg-faint focus:shadow-focus-ring outline-none transition-shadow duration-fast"
+          />
+        </div>
+      </div>
+      {/* 리스트 웰 — 리세스드 테이블. 빈 공간도 테이블의 빈 영역으로 읽힘 */}
+      <div className="mx-[12px] bg-inset rounded-surface p-[4px] flex-1 min-h-0 flex flex-col">
+        <div
+          ref={scrollRef}
+          className="flex-1 min-h-0 flex flex-col overflow-y-auto modal-content-scroll dmn-scroll-fade"
+        >
+          {/* flex-1로 스크롤 영역을 채워 빈 상태가 중앙에 오게 함 */}
+          <div className="flex flex-col gap-[4px] flex-1">
+            {items.length === 0 && !isLoading && !errorText ? (
+              <div className="flex-1 flex items-center justify-center py-[14px] text-fg-faint text-body">
+                {emptyText}
+              </div>
+            ) : null}
+            {items.map((item) => renderItem(item))}
+            {isLoading ? (
+              <p className="py-[14px] text-fg-muted text-body text-center">
+                {loadingText}
+              </p>
+            ) : null}
+            {errorText ? (
+              <p className="py-[14px] text-danger text-body text-center">
+                {errorText}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      {/* 하단 도구 바 — 필터 + 추가 (Xcode 내비게이터 문법) */}
+      <div className="p-[12px] shrink-0">
+        <div className="flex items-center gap-[8px]">
+          {filterOptions && filterValue !== undefined && onFilterChange ? (
+            <div className="flex-1 min-w-0">
+              <Dropdown
+                options={filterOptions}
+                value={filterValue}
+                onChange={onFilterChange}
+                fullWidth
+                size="lg"
+              />
+            </div>
+          ) : null}
+          <button
+            ref={addButtonRef}
+            type="button"
+            onClick={onAdd}
+            title={addLabel}
+            aria-label={addLabel}
+            className="ml-auto w-[30px] h-[30px] rounded-surface shrink-0 flex items-center justify-center bg-fill hover:bg-fill-hover active:bg-fill-active text-fg-muted hover:text-fg transition-colors duration-fast"
+          >
+            <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+              <path
+                d="M4 1V7M1 4H7"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx
deleted file mode 100644
index 98473adf..00000000
--- a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPopup.tsx
+++ /dev/null
@@ -1,343 +0,0 @@
-/* eslint-disable react-hooks/set-state-in-effect */
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react';
-import FloatingPopup from '../../FloatingPopup';
-import { useLenis } from '@hooks/useLenis';
-import Dropdown from '@components/main/common/Dropdown';
-
-// 팝업 셸 예상 폭 (측정 전 위치 계산용)
-const ESTIMATED_WIDTH = 164;
-
-type FilterOption = {
-  value: string;
-  label: string;
-};
-
-interface CommonListPickerPopupProps<T> {
-  open: boolean;
-  referenceRef: React.RefObject<HTMLElement>;
-  panelElement?: HTMLElement | null;
-  onClose: () => void;
-  interactiveRefs?: Array<React.RefObject<HTMLElement>>;
-  estimatedHeight?: number;
-  searchQuery: string;
-  onSearchQueryChange: (value: string) => void;
-  searchPlaceholder: string;
-  filterOptions?: FilterOption[];
-  filterValue?: string;
-  onFilterChange?: (value: string) => void;
-  items: T[];
-  renderItem: (item: T) => React.ReactNode;
-  emptyText: string;
-  isLoading?: boolean;
-  loadingText?: string;
-  errorText?: string;
-  onAdd: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  addLabel: string;
-  // 추가 버튼에 앵커된 메뉴가 열릴 때 외부 클릭 판정 제외용
-  addButtonRef?: React.RefObject<HTMLButtonElement>;
-  // 'page': 사이드 패널 서브 페이지로 렌더 (플로팅 크롬 대신 뒤로가기 헤더)
-  renderMode?: 'popup' | 'page';
-  pageTitle?: string;
-  onBack?: () => void;
-}
-
-export default function CommonListPickerPopup<T>({
-  open,
-  referenceRef,
-  panelElement = null,
-  onClose,
-  interactiveRefs = [],
-  estimatedHeight = 280,
-  searchQuery,
-  onSearchQueryChange,
-  searchPlaceholder,
-  filterOptions,
-  filterValue,
-  onFilterChange,
-  items,
-  renderItem,
-  emptyText,
-  isLoading = false,
-  loadingText = '로딩...',
-  errorText = '',
-  onAdd,
-  addLabel,
-  addButtonRef,
-  renderMode = 'popup',
-  pageTitle,
-  onBack,
-}: CommonListPickerPopupProps<T>) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [fixedPosition, setFixedPosition] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
-
-  const { scrollContainerRef: scrollRef, lenisInstance } = useLenis();
-
-  const calculatePosition = useCallback(() => {
-    if (!panelElement) return;
-
-    const panelRect = panelElement.getBoundingClientRect();
-    const popupEl = containerRef.current;
-    const popupWidth = popupEl ? popupEl.offsetWidth : ESTIMATED_WIDTH;
-    const popupHeight = popupEl ? popupEl.offsetHeight : estimatedHeight;
-
-    const gap = 5;
-    const padding = 5;
-    const panelBottomPadding = 20;
-
-    let fixedX = panelRect.left - popupWidth - gap;
-    if (fixedX < padding) {
-      fixedX = padding;
-    }
-
-    let fixedY = panelRect.bottom - panelBottomPadding - popupHeight;
-    if (fixedY < padding) {
-      fixedY = padding;
-    }
-
-    setFixedPosition((prev) => {
-      if (prev && prev.x === fixedX && prev.y === fixedY) return prev;
-      return { x: fixedX, y: fixedY };
-    });
-  }, [estimatedHeight, panelElement]);
-
-  useLayoutEffect(() => {
-    if (!open) {
-      setFixedPosition(null);
-      return;
-    }
-
-    if (!panelElement) {
-      setFixedPosition(null);
-      return;
-    }
-
-    calculatePosition();
-  }, [calculatePosition, open, panelElement]);
-
-  // 팝업의 실제 크기가 바뀌면 위치 재계산
-  useLayoutEffect(() => {
-    if (!open || !panelElement || !containerRef.current) return;
-
-    const resizeObserver = new ResizeObserver(() => {
-      calculatePosition();
-    });
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [calculatePosition, open, panelElement]);
-
-  useEffect(() => {
-    if (!open) return;
-    const rafId = requestAnimationFrame(() => {
-      lenisInstance.current?.resize?.();
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, [open, items.length, filterValue, searchQuery, lenisInstance]);
-
-  const effectiveOffsetY = fixedPosition ? 0 : -93;
-
-  // 페이지 모드는 프라이머리 검색(h-30 + 돋보기 글리프), 팝업은 콤팩트 웰
-  const searchInput =
-    renderMode === 'page' ? (
-      <div className="relative shrink-0">
-        <svg
-          width="12"
-          height="12"
-          viewBox="0 0 12 12"
-          fill="none"
-          className="absolute left-[10px] top-1/2 -translate-y-1/2 text-fg-faint pointer-events-none"
-        >
-          <circle
-            cx="5"
-            cy="5"
-            r="3.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M8 8L10.5 10.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-          />
-        </svg>
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(event) => onSearchQueryChange(event.target.value)}
-          placeholder={searchPlaceholder}
-          className="w-full h-[30px] pl-[30px] pr-[10px] bg-inset rounded-surface text-fg text-body placeholder-fg-faint focus:shadow-focus-ring outline-none transition-shadow duration-fast"
-        />
-      </div>
-    ) : (
-      <input
-        type="text"
-        value={searchQuery}
-        onChange={(event) => onSearchQueryChange(event.target.value)}
-        placeholder={searchPlaceholder}
-        className="w-full h-[26px] px-[8px] bg-inset rounded-md text-fg text-body placeholder-fg-faint focus:shadow-focus-ring outline-none transition-shadow duration-fast"
-      />
-    );
-
-  // 필터 + 추가 — 같은 재질의 칩 한 쌍. 페이지는 검색과 같은 30 크롬 스케일
-  const controlChipClass =
-    renderMode === 'page'
-      ? 'w-[30px] h-[30px] rounded-surface'
-      : 'w-[24px] h-[24px] rounded-md';
-  const filterAddRow = (
-    <div
-      className={`flex items-center ${
-        renderMode === 'page' ? 'gap-[8px]' : 'gap-[4px]'
-      }`}
-    >
-      {filterOptions && filterValue !== undefined && onFilterChange ? (
-        <div className="flex-1 min-w-0">
-          <Dropdown
-            options={filterOptions}
-            value={filterValue}
-            onChange={onFilterChange}
-            fullWidth
-            size={renderMode === 'page' ? 'lg' : 'sm'}
-          />
-        </div>
-      ) : null}
-      <button
-        ref={addButtonRef}
-        type="button"
-        onClick={onAdd}
-        title={addLabel}
-        aria-label={addLabel}
-        className={`ml-auto ${controlChipClass} shrink-0 flex items-center justify-center bg-fill hover:bg-fill-hover active:bg-fill-active text-fg-muted hover:text-fg transition-colors duration-fast`}
-      >
-        <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
-          <path
-            d="M4 1V7M1 4H7"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-          />
-        </svg>
-      </button>
-    </div>
-  );
-
-  // flex-1로 스크롤 영역을 채워 빈 상태가 중앙에 오게 함
-  const listInner = (
-    <div className="flex flex-col gap-[4px] flex-1">
-      {items.length === 0 && !isLoading && !errorText ? (
-        <div className="flex-1 flex items-center justify-center py-[14px] text-fg-faint text-body">
-          {emptyText}
-        </div>
-      ) : null}
-      {items.map((item) => renderItem(item))}
-      {isLoading ? (
-        <p className="py-[14px] text-fg-muted text-body text-center">
-          {loadingText}
-        </p>
-      ) : null}
-      {errorText ? (
-        <p className="py-[14px] text-danger text-body text-center">
-          {errorText}
-        </p>
-      ) : null}
-    </div>
-  );
-
-  // 페이지 모드 — 패널 서브 페이지: 뒤로가기 헤더 + 전고 리스트
-  if (renderMode === 'page') {
-    if (!open) return null;
-    return (
-      <div className="flex flex-col h-full min-h-0">
-        {/* 헤더 — 뒤로가기: 타이틀 캡하이트급 셰브론 + 타이틀 통짜 버튼 */}
-        <div className="p-[12px]">
-          <button
-            type="button"
-            onClick={onBack}
-            className="group flex items-center gap-[6px] min-w-0"
-          >
-            <svg
-              width="7"
-              height="12"
-              viewBox="0 0 7 12"
-              fill="none"
-              className="shrink-0 text-fg-muted group-hover:text-fg transition-colors duration-fast"
-            >
-              <path
-                d="M5.5 1.5L1.5 6L5.5 10.5"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-            <span className="text-fg group-hover:text-white text-style-2 leading-none truncate transition-colors duration-fast">
-              {pageTitle}
-            </span>
-          </button>
-        </div>
-        {/* 검색 — 리스트와 인접한 프라이머리 컨트롤 */}
-        <div className="px-[12px] pb-[12px] shrink-0">{searchInput}</div>
-        {/* 리스트 웰 — 리세스드 테이블. 빈 공간도 테이블의 빈 영역으로 읽힘 */}
-        <div className="mx-[12px] bg-inset rounded-surface p-[4px] flex-1 min-h-0 flex flex-col">
-          <div
-            ref={scrollRef}
-            className="flex-1 min-h-0 flex flex-col overflow-y-auto modal-content-scroll dmn-scroll-fade"
-          >
-            {listInner}
-          </div>
-        </div>
-        {/* 하단 도구 바 — 필터 + 추가 (Xcode 내비게이터 문법) */}
-        <div className="p-[12px] shrink-0">{filterAddRow}</div>
-      </div>
-    );
-  }
-
-  return (
-    <FloatingPopup
-      open={open}
-      referenceRef={referenceRef}
-      fixedX={fixedPosition?.x}
-      fixedY={fixedPosition?.y}
-      placement="right-start"
-      offset={32}
-      offsetY={effectiveOffsetY}
-      className="z-50"
-      interactiveRefs={interactiveRefs}
-      onClose={onClose}
-      autoClose={false}
-      portalToBody={Boolean(panelElement)}
-      animate={!panelElement}
-    >
-      <div
-        ref={containerRef}
-        className={`flex flex-col p-[8px] gap-[8px] w-[156px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3`.trim()}
-        style={{
-          visibility: panelElement && !fixedPosition ? 'hidden' : undefined,
-        }}
-      >
-        {searchInput}
-        {filterAddRow}
-        {/* 리스트 웰 — 면으로 영역 구분 */}
-        <div className="bg-inset rounded-md p-[4px] flex flex-col gap-[4px]">
-          <div
-            ref={scrollRef}
-            className="flex flex-col overflow-y-auto modal-content-scroll dmn-scroll-fade h-[120px]"
-          >
-            {listInner}
-          </div>
-        </div>
-      </div>
-    </FloatingPopup>
-  );
-}
diff --git a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
index 96b7d7e8..d058d9b4 100644
--- a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
@@ -14,14 +14,12 @@ import {
 } from '@src/types/key/counterAnimation';
 import ListPopup, { type ListItem } from '@components/main/Modal/ListPopup';
 import { usePickerItemMenu } from '@hooks/usePickerItemMenu';
-import CommonListPickerPopup from './CommonListPickerPopup';
+import CommonListPickerPage from './CommonListPickerPage';
 import { pickerRowClass, pickerMoreButtonClass } from './pickerRowClass';
 import CounterAnimationEditorModal from '../editors/CounterAnimationEditorModal';
 
 interface CounterAnimationPickerProps {
   open: boolean;
-  referenceRef: React.RefObject<HTMLElement>;
-  panelElement?: HTMLElement | null;
   animation: KeyCounterAnimationSettings;
   counterSettings?: KeyCounterSettings;
   keyVisual?: {
@@ -48,13 +46,9 @@ interface CounterAnimationPickerProps {
     isStat?: boolean;
   };
   onAnimationChange: (next: KeyCounterAnimationSettings) => void;
-  onClose: () => void;
   t: (key: string) => string;
-  interactiveRefs?: Array<React.RefObject<HTMLElement>>;
-  // 페이지 모드 패스스루 — 패널 서브 페이지로 렌더할 때 사용
-  renderMode?: 'popup' | 'page';
-  pageTitle?: string;
-  onBack?: () => void;
+  pageTitle: string;
+  onBack: () => void;
 }
 
 type FilterType = 'all' | 'builtin' | 'user';
@@ -83,16 +77,11 @@ const EMPTY_LIBRARY: CounterAnimationListResponse = {
 
 const CounterAnimationPicker = ({
   open,
-  referenceRef,
-  panelElement = null,
   animation,
   counterSettings,
   keyVisual,
   onAnimationChange,
-  onClose,
   t,
-  interactiveRefs = [],
-  renderMode = 'popup',
   pageTitle,
   onBack,
 }: CounterAnimationPickerProps) => {
@@ -240,23 +229,12 @@ const CounterAnimationPicker = ({
     }
   };
 
-  const handlePickerClose = () => {
-    if (menu.menuKey !== null) return;
-    onClose();
-  };
-
   return (
     <>
-      <CommonListPickerPopup<CounterAnimationPreset>
+      <CommonListPickerPage<CounterAnimationPreset>
         open={open}
-        referenceRef={referenceRef}
-        panelElement={panelElement}
-        interactiveRefs={interactiveRefs}
-        renderMode={renderMode}
         pageTitle={pageTitle}
         onBack={onBack}
-        onClose={handlePickerClose}
-        estimatedHeight={276}
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
         searchPlaceholder={
@@ -286,7 +264,7 @@ const CounterAnimationPicker = ({
                   handlePresetSelect(preset);
                 }
               }}
-              className={`${pickerRowClass(renderMode)} cursor-pointer ${
+              className={`${pickerRowClass} cursor-pointer ${
                 isSelected
                   ? 'bg-surface-active text-fg'
                   : 'text-fg hover:bg-surface-hover'
@@ -300,14 +278,14 @@ const CounterAnimationPicker = ({
               {isUserPreset ? (
                 <button
                   type="button"
-                  className={`${pickerMoreButtonClass(renderMode)} ${
+                  className={`${pickerMoreButtonClass} ${
                     isSelected || menu.menuKey === preset.id
                       ? 'opacity-100'
                       : 'opacity-0 group-hover:opacity-100'
                   } ${
                     isSelected
-                      ? 'text-fg hover:text-fg hover:bg-surface-active'
-                      : 'text-fg-muted hover:text-fg hover:bg-surface-hover'
+                      ? 'text-fg hover:text-fg'
+                      : 'text-fg-muted hover:text-fg'
                   }`}
                   title={moreMenuLabel}
                   aria-label={moreMenuLabel}
@@ -350,7 +328,6 @@ const CounterAnimationPicker = ({
             }
             menu.close();
           }}
-          className="z-[60]"
           offsetX={0}
           offsetY={0}
         />
diff --git a/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx b/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
index f097e592..15634ac2 100644
--- a/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
@@ -6,7 +6,7 @@ import { DEFAULT_FONT_FAMILY } from '@src/types/settings/fonts';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import Modal from '@components/main/Modal/Modal';
 import ListPopup, { type ListItem } from '@components/main/Modal/ListPopup';
-import CommonListPickerPopup from './CommonListPickerPopup';
+import CommonListPickerPage from './CommonListPickerPage';
 import { pickerRowClass, pickerMoreButtonClass } from './pickerRowClass';
 import MoreVerticalIcon from './MoreVerticalIcon';
 import { usePickerItemMenu } from '@hooks/usePickerItemMenu';
@@ -14,16 +14,10 @@ import { useFontLibrary } from '@hooks/useFontLibrary';
 
 interface FontPickerProps {
   open: boolean;
-  referenceRef: React.RefObject<HTMLElement>;
-  panelElement?: HTMLElement | null;
   selectedFont: string | null;
   onFontSelect: (fontName: string | null) => void;
-  onClose: () => void;
-  interactiveRefs?: Array<React.RefObject<HTMLElement>>;
-  // 페이지 모드 패스스루 — 패널 서브 페이지로 렌더할 때 사용
-  renderMode?: 'popup' | 'page';
-  pageTitle?: string;
-  onBack?: () => void;
+  pageTitle: string;
+  onBack: () => void;
 }
 
 type FilterType = 'all' | 'builtin' | 'local' | 'web';
@@ -92,13 +86,8 @@ const buildPreviewCSS = (font: CustomFont): string | null => {
 
 const FontPicker = ({
   open,
-  referenceRef,
-  panelElement = null,
   selectedFont,
   onFontSelect,
-  onClose,
-  interactiveRefs = [],
-  renderMode = 'popup',
   pageTitle,
   onBack,
 }: FontPickerProps) => {
@@ -302,23 +291,12 @@ const FontPicker = ({
     if (ok) setWebFontModal(null);
   };
 
-  const handlePickerClose = () => {
-    if (menu.menuKey !== null || addMenuPosition !== null) return;
-    onClose();
-  };
-
   return (
     <>
-      <CommonListPickerPopup<CustomFont>
+      <CommonListPickerPage<CustomFont>
         open={open}
-        referenceRef={referenceRef}
-        panelElement={panelElement}
-        interactiveRefs={interactiveRefs}
-        renderMode={renderMode}
         pageTitle={pageTitle}
         onBack={onBack}
-        onClose={handlePickerClose}
-        estimatedHeight={280}
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
         searchPlaceholder={t('fontPicker.searchPlaceholder') || '검색...'}
@@ -356,7 +334,7 @@ const FontPicker = ({
                   ? (event) => menu.openFromContextMenu(event, font.id)
                   : undefined
               }
-              className={`${pickerRowClass(renderMode)} ${
+              className={`${pickerRowClass} ${
                 isSelected
                   ? 'bg-surface-active text-fg cursor-pointer'
                   : isDisabled
@@ -402,7 +380,7 @@ const FontPicker = ({
               {isCustom ? (
                 <button
                   type="button"
-                  className={`${pickerMoreButtonClass(renderMode)} ${
+                  className={`${pickerMoreButtonClass} ${
                     isSelected || menu.menuKey === font.id
                       ? 'opacity-100'
                       : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
@@ -454,7 +432,6 @@ const FontPicker = ({
               openWebFontModal(null);
             }
           }}
-          className="z-[60]"
           offsetX={0}
           offsetY={0}
         />
@@ -483,7 +460,6 @@ const FontPicker = ({
               void handleDelete(font);
             }
           }}
-          className="z-[60]"
           offsetX={0}
           offsetY={0}
         />
diff --git a/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx b/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
index 15f5e8f8..9f8387be 100644
--- a/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from '@contexts/useTranslation';
 import type { SoundListItem } from '@src/types/plugin/api';
 import ListPopup, { type ListItem } from '@components/main/Modal/ListPopup';
-import CommonListPickerPopup from './CommonListPickerPopup';
+import CommonListPickerPage from './CommonListPickerPage';
 import { pickerRowClass, pickerMoreButtonClass } from './pickerRowClass';
 import MoreVerticalIcon from './MoreVerticalIcon';
 import { usePickerItemMenu } from '@hooks/usePickerItemMenu';
@@ -10,16 +10,10 @@ import SoundTrimModal from '../managers/SoundTrimModal';
 
 interface SoundPickerProps {
   open: boolean;
-  referenceRef: React.RefObject<HTMLElement>;
-  panelElement?: HTMLElement | null;
   selectedSound: string | null;
   onSoundSelect: (soundPath: string | null) => void;
-  onClose: () => void;
-  interactiveRefs?: Array<React.RefObject<HTMLElement>>;
-  // 페이지 모드 패스스루 — 패널 서브 페이지로 렌더할 때 사용
-  renderMode?: 'popup' | 'page';
-  pageTitle?: string;
-  onBack?: () => void;
+  pageTitle: string;
+  onBack: () => void;
   previewVolume?: number;
 }
 
@@ -29,20 +23,17 @@ type TrimState =
 
 const SoundPicker = ({
   open,
-  referenceRef,
-  panelElement = null,
   selectedSound,
   onSoundSelect,
-  onClose,
-  interactiveRefs = [],
-  renderMode = 'popup',
   pageTitle,
   onBack,
   previewVolume,
 }: SoundPickerProps) => {
   const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState('');
-  const [filterType, setFilterType] = useState<'all' | 'local'>('all');
+  const [filterType, setFilterType] = useState<'all' | 'local' | 'hidden'>(
+    'all',
+  );
   const [sounds, setSounds] = useState<SoundListItem[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState('');
@@ -90,14 +81,18 @@ const SoundPicker = ({
   const filterOptions = [
     { value: 'all', label: t('soundPicker.filterAll') || '전체' },
     { value: 'local', label: t('soundPicker.filterLocal') || '로컬 사운드' },
+    { value: 'hidden', label: t('soundPicker.filterHidden') || '숨긴 사운드' },
   ];
 
   const filteredSounds = (() => {
     const query = searchQuery.trim().toLowerCase();
 
     return sounds.filter((item) => {
-      if (filterType === 'local' && item.source !== 'local') {
-        return false;
+      if (filterType === 'hidden') {
+        if (!item.hidden) return false;
+      } else {
+        if (item.hidden) return false;
+        if (filterType === 'local' && item.source !== 'local') return false;
       }
       if (!query) return true;
       return (
@@ -112,21 +107,37 @@ const SoundPicker = ({
       ? sounds.find((item) => item.soundPath === menu.menuKey) ?? null
       : null;
 
-  const menuItems: ListItem[] = [
-    {
-      id: 'edit',
-      label: t('soundPicker.edit') || '편집',
-      disabled: !menuTargetItem?.originalPath,
-    },
-    {
-      id: 'rename',
-      label: t('soundPicker.rename') || '이름 변경',
-    },
-    {
-      id: 'delete',
-      label: t('soundPicker.delete') || '삭제',
-    },
-  ];
+  const menuItems: ListItem[] = menuTargetItem
+    ? [
+        ...(menuTargetItem.source === 'local'
+          ? [
+              {
+                id: 'edit',
+                label: t('soundPicker.edit') || '편집',
+                disabled: !menuTargetItem.originalPath,
+              },
+              {
+                id: 'rename',
+                label: t('soundPicker.rename') || '이름 변경',
+              },
+            ]
+          : []),
+        {
+          id: 'toggle-hidden',
+          label: menuTargetItem.hidden
+            ? t('soundPicker.unhide') || '숨김 해제'
+            : t('soundPicker.hide') || '숨기기',
+        },
+        ...(menuTargetItem.source === 'local'
+          ? [
+              {
+                id: 'delete',
+                label: t('soundPicker.delete') || '삭제',
+              },
+            ]
+          : []),
+      ]
+    : [];
 
   const moreMenuLabel = (() => {
     const translated = t('common.more');
@@ -184,29 +195,30 @@ const SoundPicker = ({
     }
   };
 
+  const handleToggleHidden = async (item: SoundListItem) => {
+    try {
+      await window.api.sound.setHidden(item.soundPath, !item.hidden);
+      await loadSounds();
+    } catch (error) {
+      console.error('Failed to toggle sound hidden', error);
+      // loadSounds가 loadError를 초기화하므로 reload 후에 실패 메시지 설정
+      await loadSounds();
+      setLoadError(t('soundPicker.hideFailed') || '사운드 숨김 변경 실패');
+    }
+  };
+
   const handleTrimSaved = (soundPath: string) => {
     onSoundSelect(soundPath);
     setTrimState(null);
     void loadSounds();
   };
 
-  const handlePickerClose = () => {
-    if (menu.menuKey !== null) return;
-    onClose();
-  };
-
   return (
     <>
-      <CommonListPickerPopup<SoundListItem>
+      <CommonListPickerPage<SoundListItem>
         open={open}
-        referenceRef={referenceRef}
-        panelElement={panelElement}
-        interactiveRefs={interactiveRefs}
-        renderMode={renderMode}
         pageTitle={pageTitle}
         onBack={onBack}
-        onClose={handlePickerClose}
-        estimatedHeight={276}
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
         searchPlaceholder={t('soundPicker.searchPlaceholder') || '검색'}
@@ -216,7 +228,6 @@ const SoundPicker = ({
         items={filteredSounds}
         renderItem={(item) => {
           const isSelected = item.soundPath === normalizedSelectedSound;
-          const isLocal = item.source === 'local';
           const displayName = item.displayName || item.fileName;
 
           return (
@@ -232,12 +243,10 @@ const SoundPicker = ({
                   onSoundSelect(isSelected ? '' : item.soundPath);
                 }
               }}
-              onContextMenu={
-                isLocal
-                  ? (event) => menu.openFromContextMenu(event, item.soundPath)
-                  : undefined
+              onContextMenu={(event) =>
+                menu.openFromContextMenu(event, item.soundPath)
               }
-              className={`${pickerRowClass(renderMode)} cursor-pointer ${
+              className={`${pickerRowClass} cursor-pointer ${
                 isSelected
                   ? 'bg-surface-active text-fg'
                   : 'text-fg hover:bg-surface-hover'
@@ -275,31 +284,27 @@ const SoundPicker = ({
                 </span>
               )}
 
-              {isLocal ? (
-                <button
-                  type="button"
-                  className={`${pickerMoreButtonClass(renderMode)} ${
-                    isSelected || menu.menuKey === item.soundPath
-                      ? 'opacity-100'
-                      : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
-                  } ${
-                    isSelected
-                      ? 'text-fg hover:text-fg'
-                      : 'text-fg-muted hover:text-fg'
-                  }`}
-                  title={moreMenuLabel}
-                  aria-label={moreMenuLabel}
-                  onPointerDown={(event) => {
-                    event.stopPropagation();
-                    menu.capturePressState(item.soundPath);
-                  }}
-                  onClick={(event) =>
-                    menu.openFromButton(event, item.soundPath)
-                  }
-                >
-                  <MoreVerticalIcon />
-                </button>
-              ) : null}
+              <button
+                type="button"
+                className={`${pickerMoreButtonClass} ${
+                  isSelected || menu.menuKey === item.soundPath
+                    ? 'opacity-100'
+                    : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                } ${
+                  isSelected
+                    ? 'text-fg hover:text-fg'
+                    : 'text-fg-muted hover:text-fg'
+                }`}
+                title={moreMenuLabel}
+                aria-label={moreMenuLabel}
+                onPointerDown={(event) => {
+                  event.stopPropagation();
+                  menu.capturePressState(item.soundPath);
+                }}
+                onClick={(event) => menu.openFromButton(event, item.soundPath)}
+              >
+                <MoreVerticalIcon />
+              </button>
             </div>
           );
         }}
@@ -332,6 +337,8 @@ const SoundPicker = ({
             if (!item) return;
             if (id === 'edit') {
               setTrimState({ mode: 'edit', item });
+            } else if (id === 'toggle-hidden') {
+              void handleToggleHidden(item);
             } else if (id === 'rename') {
               renameCancelledRef.current = false;
               setRenameValue(item.displayName || item.fileName);
@@ -340,7 +347,6 @@ const SoundPicker = ({
               void handleDelete(item);
             }
           }}
-          className="z-[60]"
           offsetX={0}
           offsetY={0}
         />
diff --git a/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts b/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
index 4c0e1560..5df9678d 100644
--- a/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
+++ b/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
@@ -1,14 +1,10 @@
-// 피커 리스트 행 규격 — 팝업(콤팩트 필)과 패널 페이지(인셋 웰 테이블 행)
-export type PickerRenderMode = 'popup' | 'page';
+// 피커 리스트 행 규격 — 패널 페이지의 인셋 웰 테이블 행
 
-// 페이지 행: 인셋 웰(테이블) 내부의 필 행 — 30 컨트롤 스케일, 웰과 동심 라운딩
-export const pickerRowClass = (mode: PickerRenderMode): string =>
-  mode === 'page'
-    ? 'w-full h-[30px] px-[8px] rounded-md text-style-4 transition-colors flex items-center gap-[4px] group'
-    : 'w-full h-[24px] px-[8px] rounded-md text-style-4 transition-colors flex items-center gap-[4px] group';
+// 인셋 웰(테이블) 내부의 필 행 — 30 컨트롤 스케일, 웰과 동심 라운딩
+export const pickerRowClass =
+  'w-full h-[30px] px-[8px] rounded-md text-style-4 transition-colors flex items-center gap-[4px] group';
 
-// 행 트레일링 ⋮ 버튼 — 페이지는 28px(30 행 스케일), 팝업은 18px 옵티컬 정렬
-export const pickerMoreButtonClass = (mode: PickerRenderMode): string =>
-  mode === 'page'
-    ? 'w-[28px] h-[28px] rounded-md transition-all flex items-center justify-center shrink-0'
-    : 'w-[18px] h-[18px] -mr-[8px] rounded-md transition-all flex items-center justify-center shrink-0';
+// 행 트레일링 ⋮ 버튼 — 28px(30 행 스케일).
+// -mr-8: 버튼을 행 패딩 안쪽까지 확장해 아이콘 시각 인셋을 텍스트(8px)와 대칭으로
+export const pickerMoreButtonClass =
+  'w-[28px] h-[28px] -mr-[8px] rounded-md transition-all flex items-center justify-center shrink-0';
diff --git a/src/renderer/components/main/common/Dropdown.tsx b/src/renderer/components/main/common/Dropdown.tsx
index 88d41270..e08c6f75 100644
--- a/src/renderer/components/main/common/Dropdown.tsx
+++ b/src/renderer/components/main/common/Dropdown.tsx
@@ -84,6 +84,18 @@ const Dropdown: React.FC<DropdownProps> = ({
     setOpen((prev) => !prev);
   };
 
+  // Escape 소유 — 최상위 포털 레이어이므로 소비 후 자신만 닫기
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.defaultPrevented) return;
+      event.preventDefault();
+      setOpen(false);
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [open]);
+
   useEffect(() => {
     if (!open) return;
 
diff --git a/src/renderer/components/shared/PluginElement.tsx b/src/renderer/components/shared/PluginElement.tsx
index 64807bbf..9d4f74ca 100644
--- a/src/renderer/components/shared/PluginElement.tsx
+++ b/src/renderer/components/shared/PluginElement.tsx
@@ -1612,7 +1612,6 @@ export const PluginElement: React.FC<PluginElementProps> = ({
             onClose={() => setContextMenuOpen(false)}
             items={contextMenuItems}
             onSelect={handleContextMenuSelect}
-            className="!z-[10000]"
           />,
           document.body,
         )}
diff --git a/src/renderer/hooks/useLenis.ts b/src/renderer/hooks/useLenis.ts
index ea304423..11f9c6b1 100644
--- a/src/renderer/hooks/useLenis.ts
+++ b/src/renderer/hooks/useLenis.ts
@@ -28,11 +28,6 @@ interface UseLenisOptions {
    * @default LENIS_CONFIG.touchMultiplier
    */
   touchMultiplier?: number;
-  /**
-   * 스크롤 이벤트 콜백
-   * Lenis 스크롤 발생 시 호출됨
-   */
-  onScroll?: () => void;
 }
 
 // easeOutExpo 이징 함수
@@ -49,12 +44,6 @@ export const useLenis = (options: UseLenisOptions = {}) => {
   const [wrapper, setWrapper] = useState<HTMLElement | null>(null);
   const wrapperRef = useRef<HTMLElement | null>(null);
   const lenisRef = useRef<Lenis | null>(null);
-  const onScrollRef = useRef<(() => void) | undefined>(options.onScroll);
-
-  // onScroll 콜백 업데이트
-  useEffect(() => {
-    onScrollRef.current = options.onScroll;
-  }, [options.onScroll]);
 
   const {
     duration,
@@ -97,12 +86,6 @@ export const useLenis = (options: UseLenisOptions = {}) => {
 
     lenisRef.current = lenis;
 
-    // Lenis scroll 이벤트 리스너 등록
-    const handleLenisScroll = () => {
-      onScrollRef.current?.();
-    };
-    lenis.on('scroll', handleLenisScroll);
-
     // RAF 루프 시작
     let rafId: number;
     const raf = (time: number) => {
@@ -114,7 +97,6 @@ export const useLenis = (options: UseLenisOptions = {}) => {
     // 클린업
     return () => {
       cancelAnimationFrame(rafId);
-      lenis.off('scroll', handleLenisScroll);
       lenis.destroy();
       lenisRef.current = null;
     };
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index 365b38bd..32be6984 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -568,13 +568,17 @@
     "searchPlaceholder": "Search...",
     "filterAll": "All",
     "filterLocal": "Local Sounds",
+    "filterHidden": "Hidden Sounds",
     "noSounds": "No sounds",
     "loadFailed": "Failed to load sound list",
     "edit": "Edit",
     "rename": "Rename",
+    "hide": "Hide",
+    "unhide": "Unhide",
     "delete": "Delete",
     "deleteFailed": "Failed to delete sound",
     "renameFailed": "Failed to rename sound",
+    "hideFailed": "Failed to change sound visibility",
     "deleteConfirm": "Delete this sound? The file will be deleted and unassigned from every element using it.",
     "add": "Add Sound"
   },
diff --git a/src/renderer/locales/ko.json b/src/renderer/locales/ko.json
index 080d68d6..f57524ce 100644
--- a/src/renderer/locales/ko.json
+++ b/src/renderer/locales/ko.json
@@ -568,13 +568,17 @@
     "searchPlaceholder": "검색",
     "filterAll": "전체",
     "filterLocal": "로컬 사운드",
+    "filterHidden": "숨긴 사운드",
     "noSounds": "사운드 없음",
     "loadFailed": "사운드 목록 로드 실패",
     "edit": "편집",
     "rename": "이름 변경",
+    "hide": "숨기기",
+    "unhide": "숨김 해제",
     "delete": "삭제",
     "deleteFailed": "사운드 삭제 실패",
     "renameFailed": "사운드 이름 변경 실패",
+    "hideFailed": "사운드 숨김 변경 실패",
     "deleteConfirm": "사운드를 삭제하시겠습니까? 파일이 삭제되고 이 사운드를 사용하는 모든 요소에서 해제됩니다.",
     "add": "사운드 추가"
   },
diff --git a/src/renderer/locales/ru.json b/src/renderer/locales/ru.json
index 7c77aa69..ddb8f642 100644
--- a/src/renderer/locales/ru.json
+++ b/src/renderer/locales/ru.json
@@ -568,13 +568,17 @@
     "searchPlaceholder": "Поиск...",
     "filterAll": "Все",
     "filterLocal": "Локальные звуки",
+    "filterHidden": "Скрытые звуки",
     "noSounds": "Звуков нет",
     "loadFailed": "Не удалось загрузить список звуков",
     "edit": "Редактировать",
     "rename": "Переименовать",
+    "hide": "Скрыть",
+    "unhide": "Показать",
     "delete": "Удалить",
     "deleteFailed": "Не удалось удалить звук",
     "renameFailed": "Не удалось переименовать звук",
+    "hideFailed": "Не удалось изменить видимость звука",
     "deleteConfirm": "Удалить звук? Файл будет удалён, и звук будет снят со всех элементов, где он используется.",
     "add": "Добавить звук"
   },
diff --git a/src/renderer/locales/zh-Hant.json b/src/renderer/locales/zh-Hant.json
index c5b09019..c50dcac7 100644
--- a/src/renderer/locales/zh-Hant.json
+++ b/src/renderer/locales/zh-Hant.json
@@ -568,13 +568,17 @@
     "searchPlaceholder": "搜尋",
     "filterAll": "全部",
     "filterLocal": "本地音效",
+    "filterHidden": "隱藏的音效",
     "noSounds": "無音效",
     "loadFailed": "音效清單載入失敗",
     "edit": "編輯",
     "rename": "重新命名",
+    "hide": "隱藏",
+    "unhide": "取消隱藏",
     "delete": "刪除",
     "deleteFailed": "音效刪除失敗",
     "renameFailed": "音效重新命名失敗",
+    "hideFailed": "無法變更音效顯示狀態",
     "deleteConfirm": "確定刪除該音效？檔案將被刪除，並從所有使用它的元素中移除。",
     "add": "新增音效"
   },
diff --git a/src/renderer/locales/zh-cn.json b/src/renderer/locales/zh-cn.json
index 72962a4f..be5b4d8a 100644
--- a/src/renderer/locales/zh-cn.json
+++ b/src/renderer/locales/zh-cn.json
@@ -568,13 +568,17 @@
     "searchPlaceholder": "搜索",
     "filterAll": "全部",
     "filterLocal": "本地音频",
+    "filterHidden": "隐藏的音效",
     "noSounds": "无音频",
     "loadFailed": "音频列表加载失败",
     "edit": "编辑",
     "rename": "重命名",
+    "hide": "隐藏",
+    "unhide": "取消隐藏",
     "delete": "删除",
     "deleteFailed": "音频删除失败",
     "renameFailed": "音频重命名失败",
+    "hideFailed": "无法更改音效显示状态",
     "deleteConfirm": "确定删除该音频？文件将被删除，并从所有使用它的元素中移除。",
     "add": "添加音效"
   },
diff --git a/src/renderer/styles/tokens.css b/src/renderer/styles/tokens.css
index 0f730e5f..c68905d8 100644
--- a/src/renderer/styles/tokens.css
+++ b/src/renderer/styles/tokens.css
@@ -52,6 +52,13 @@
   --ui-accent-deep-hover: #7857d8;
   --ui-accent-deep-active: #5f40bd;
 
+  /* 캔버스 선택 크롬 — 셀렉션은 의미 지점이므로 브랜드 바이올렛 */
+  --ui-selection: #8b5cf6;
+  --ui-selection-border: rgba(139, 92, 246, 0.8);
+  --ui-selection-border-strong: rgba(139, 92, 246, 0.9);
+  --ui-selection-fill: rgba(139, 92, 246, 0.15);
+  --ui-selection-glow: rgba(139, 92, 246, 0.5);
+
   /* 시맨틱 */
   --ui-danger: #e5484d;
   --ui-danger-hover: #ec5d62;
diff --git a/src/renderer/utils/grid/scrollShadow.ts b/src/renderer/utils/grid/scrollShadow.ts
deleted file mode 100644
index 9ee67423..00000000
--- a/src/renderer/utils/grid/scrollShadow.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-export interface ScrollShadowState {
-  hasTopShadow: boolean;
-  hasBottomShadow: boolean;
-}
-
-const OVERFLOW_EPS = 0.5; // 스크롤 오버플로우 감지용 오차
-const CLIP_EPS = 1; // 경계에서 실제로 잘리는지 판단할 때 사용할 오차
-const OVERLAP_EPS = 0.5; // 요소가 뷰포트와 겹친다고 간주할 최소 오차
-const EDGE_EPS = 1; // 스크롤 상/하단 근접 판정 오차
-
-/**
- * Calculate whether scroll shadows should be shown based on whether
- * any child element is currently clipped at the top or bottom edge
- * of the scroll container. If there are no child elements, it falls
- * back to the traditional scroll position checks.
- */
-export function getScrollShadowState(
-  container: HTMLElement | null,
-  _content?: HTMLElement | null,
-): ScrollShadowState {
-  if (!container) {
-    return { hasTopShadow: false, hasBottomShadow: false };
-  }
-
-  const hasOverflow =
-    container.scrollHeight - container.clientHeight > OVERFLOW_EPS;
-  if (!hasOverflow) {
-    return { hasTopShadow: false, hasBottomShadow: false };
-  }
-
-  const containerRect = container.getBoundingClientRect();
-
-  // 샘플 지점(컨테이너 내부) 계산
-  const sampleX =
-    containerRect.left +
-    Math.min(Math.max(containerRect.width / 2, 2), containerRect.width - 2);
-  const sampleTopY = Math.min(containerRect.bottom - 2, containerRect.top + 2);
-  const sampleBottomY = Math.max(
-    containerRect.top + 2,
-    containerRect.bottom - 2,
-  );
-
-  const findElementAt = (y: number): HTMLElement | null => {
-    if (y < containerRect.top || y > containerRect.bottom) return null;
-    const hit = document.elementFromPoint(sampleX, y) as HTMLElement | null;
-    if (!hit) return null;
-
-    let node: HTMLElement | null = hit;
-    while (node && node !== container && !container.contains(node)) {
-      node = node.parentElement;
-    }
-
-    if (!node || node === document.documentElement || node === document.body) {
-      return null;
-    }
-
-    return node;
-  };
-
-  const topTarget = findElementAt(sampleTopY);
-  const bottomTarget = findElementAt(sampleBottomY);
-
-  const hasTopShadow =
-    !!topTarget &&
-    (() => {
-      const rect = topTarget.getBoundingClientRect();
-      const overlaps =
-        rect.bottom > containerRect.top + OVERLAP_EPS &&
-        rect.top < containerRect.bottom - OVERLAP_EPS;
-      const clipped = rect.top < containerRect.top - CLIP_EPS;
-      const awayFromTop = container.scrollTop > EDGE_EPS;
-      return overlaps && clipped && awayFromTop;
-    })();
-
-  const hasBottomShadow =
-    !!bottomTarget &&
-    (() => {
-      const rect = bottomTarget.getBoundingClientRect();
-      const overlaps =
-        rect.top < containerRect.bottom - OVERLAP_EPS &&
-        rect.bottom > containerRect.top + OVERLAP_EPS;
-      const clipped = rect.bottom > containerRect.bottom + CLIP_EPS;
-      const awayFromBottom =
-        container.scrollTop <
-        container.scrollHeight - container.clientHeight - EDGE_EPS;
-      return overlaps && clipped && awayFromBottom;
-    })();
-
-  return { hasTopShadow, hasBottomShadow };
-}
diff --git a/src/types/plugin/api.ts b/src/types/plugin/api.ts
index ed04c1e3..8e8cbc77 100644
--- a/src/types/plugin/api.ts
+++ b/src/types/plugin/api.ts
@@ -101,6 +101,8 @@ export type SoundListItem = {
   fileName: string;
   sizeBytes: number;
   modifiedAtMs?: number;
+  /** 피커 목록에서 숨김 여부 — 재생에는 영향 없음 */
+  hidden: boolean;
   source: 'local' | 'builtin';
   originalPath?: string;
   trimStartRatio?: number;
@@ -108,6 +110,18 @@ export type SoundListItem = {
   displayName?: string;
 };
 
+export type SoundSetHiddenResult = {
+  success: boolean;
+  soundPath: string;
+  hidden: boolean;
+};
+
+export type SoundSetEnabledResult = {
+  success: boolean;
+  soundPath: string;
+  enabled: boolean;
+};
+
 export type SoundSaveProcessedWavResult = {
   success: boolean;
   error?: string;
@@ -881,6 +895,15 @@ export interface DMNoteAPI {
     list(): Promise<SoundListItem[]>;
     rename(soundPath: string, displayName: string): Promise<SoundRenameResult>;
     remove(soundPath: string): Promise<SoundDeleteResult>;
+    setHidden(
+      soundPath: string,
+      hidden: boolean,
+    ): Promise<SoundSetHiddenResult>;
+    /** @deprecated setHidden의 역논리 별칭 — enabled = !hidden */
+    setEnabled(
+      soundPath: string,
+      enabled: boolean,
+    ): Promise<SoundSetEnabledResult>;
     saveProcessedWav(
       wavBase64: string,
       fileName?: string,

From 64cc94eee0e838428d84e4eea6778b7866f45422 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sat, 11 Jul 2026 20:53:26 +0900
Subject: [PATCH 03/17] =?UTF-8?q?fix:=20=ED=94=8C=EB=9F=AC=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20Escape=20?=
 =?UTF-8?q?=EC=86=8C=EC=9C=A0=EA=B6=8C=20=EB=B0=8F=20=EB=AC=B8=EC=84=9C=20?=
 =?UTF-8?q?=EC=83=89=EC=9D=B8=20=EB=B3=B4=EA=B0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 플러그인 드롭다운 포털 메뉴가 Escape를 소비해 자신만 닫도록 하고,
  네이티브 드롭다운과 같은 data-dmn-popup-submenu 표식 부여
  (메뉴가 열린 채 Esc가 패널 페이지·그리드 선택 해제로 새는 문제 해소)
- API 레퍼런스 개요의 네임스페이스 표에 dmn.sound 행 추가 (en/ko)
---
 docs/content/en/api-reference/index/page.mdx       |  1 +
 docs/content/ko/api-reference/index/page.mdx       |  1 +
 src/renderer/utils/plugin/pluginDropdownManager.ts | 13 +++++++++++++
 3 files changed, 15 insertions(+)

diff --git a/docs/content/en/api-reference/index/page.mdx b/docs/content/en/api-reference/index/page.mdx
index b1340683..9f7d76d7 100644
--- a/docs/content/en/api-reference/index/page.mdx
+++ b/docs/content/en/api-reference/index/page.mdx
@@ -18,6 +18,7 @@ All plugins access DM Note features through the `dmn` global object.
 | [`dmn.knobItems`](/docs/api-reference/knobs)   | HID knob elements                |
 | [`dmn.settings`](/docs/api-reference/settings) | App settings get/set             |
 | [`dmn.overlay`](/docs/api-reference/overlay)   | Overlay control                  |
+| [`dmn.sound`](/docs/api-reference/sound)      | Key sound library                |
 | [`dmn.css`](/docs/api-reference/css-js#css)    | CSS custom code                  |
 | [`dmn.js`](/docs/api-reference/css-js#js)      | JS plugin management             |
 | [`dmn.presets`](/docs/api-reference/presets)   | Preset save/load                 |
diff --git a/docs/content/ko/api-reference/index/page.mdx b/docs/content/ko/api-reference/index/page.mdx
index 803099e5..ffb3017b 100644
--- a/docs/content/ko/api-reference/index/page.mdx
+++ b/docs/content/ko/api-reference/index/page.mdx
@@ -18,6 +18,7 @@ asIndexPage: true
 | [`dmn.knobItems`](/docs/api-reference/knobs)   | HID 노브 요소              |
 | [`dmn.settings`](/docs/api-reference/settings) | 앱 설정 조회/변경          |
 | [`dmn.overlay`](/docs/api-reference/overlay)   | 오버레이 제어              |
+| [`dmn.sound`](/docs/api-reference/sound)      | 키음 라이브러리            |
 | [`dmn.css`](/docs/api-reference/css-js#css)    | CSS 커스텀 코드            |
 | [`dmn.js`](/docs/api-reference/css-js#js)      | JS 플러그인 관리           |
 | [`dmn.presets`](/docs/api-reference/presets)   | 프리셋 저장/로드           |
diff --git a/src/renderer/utils/plugin/pluginDropdownManager.ts b/src/renderer/utils/plugin/pluginDropdownManager.ts
index 76336ac5..efaae8e7 100644
--- a/src/renderer/utils/plugin/pluginDropdownManager.ts
+++ b/src/renderer/utils/plugin/pluginDropdownManager.ts
@@ -31,6 +31,7 @@ const resetMenuStyles = (menu: DropdownMenuElement) => {
   menu.style.boxShadow = '';
   menu.style.borderRadius = '';
   menu.dataset.pluginDropdownPortal = 'false';
+  delete menu.dataset.dmnPopupSubmenu;
 };
 
 export function setupPluginDropdownInteractions(
@@ -124,6 +125,8 @@ export function setupPluginDropdownInteractions(
     menu.style.maxHeight = '200px';
     menu.style.overflowY = 'auto';
     menu.dataset.pluginDropdownPortal = 'true';
+    // 네이티브 드롭다운과 같은 포털 메뉴 표식 — Escape 양보·클릭어웨이 예외 판정용
+    menu.dataset.dmnPopupSubmenu = 'true';
 
     openMenus.add(menu);
 
@@ -209,7 +212,16 @@ export function setupPluginDropdownInteractions(
     }
   };
 
+  // Escape 소유 — 최상위 포털 레이어이므로 소비 후 자신만 닫기
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key !== 'Escape' || event.defaultPrevented) return;
+    if (!openMenus.size) return;
+    event.preventDefault();
+    closeAllMenus();
+  };
+
   document.addEventListener('click', handleClick, true);
+  document.addEventListener('keydown', handleKeydown);
   document.addEventListener('scroll', handleScrollOrResize, true);
   window.addEventListener('resize', handleScrollOrResize);
 
@@ -221,6 +233,7 @@ export function setupPluginDropdownInteractions(
 
     closeAllMenus();
     document.removeEventListener('click', handleClick, true);
+    document.removeEventListener('keydown', handleKeydown);
     document.removeEventListener('scroll', handleScrollOrResize, true);
     window.removeEventListener('resize', handleScrollOrResize);
     observer?.disconnect();

From b8409a5e37cfb65db23f0a6a682daf147fefd96f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sat, 11 Jul 2026 21:38:29 +0900
Subject: [PATCH 04/17] =?UTF-8?q?fix:=20=EC=82=AC=EC=9A=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20enabled=20=EA=B3=84=EC=95=BD=20=EB=B3=B5?=
 =?UTF-8?q?=EA=B5=AC=20=EB=B0=8F=20=ED=94=BC=EC=BB=A4=C2=B7=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EC=96=B4=20=EC=95=88=EC=A0=95=EC=84=B1=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SoundListItem 응답에 enabled(=!hidden)를 deprecated 필드로 병행 직렬화
  — 1.6.1 플러그인 계약 유지 (Rust 응답·TS 타입·영/한 문서 동기화)
- 카운터 애니메이션 피커 행의 키보드 타겟 가드 누락 수정 — ⋮ 버튼에
  포커스 후 Enter가 메뉴 대신 프리셋 선택을 실행하던 문제.
  키보드 포커스 시 ⋮ 버튼 노출(group-focus-within)도 보강
- store 저장을 원자 교체로 전환 — 임시 파일에 쓰고 fsync 후 rename.
  쓰기 도중 크래시·전원 차단 시 설정 파일 손상 방지
- setLatencyLogging 문서에 dev/debug 빌드 제한 명시 (en/ko)
---
 docs/content/en/api-reference/sound/page.mdx  |  5 ++++-
 docs/content/ko/api-reference/sound/page.mdx  |  4 +++-
 src-tauri/src/commands/keys/sound.rs          |  3 +++
 src-tauri/src/state/store.rs                  | 20 +++++++++++++++++--
 .../pickers/CounterAnimationPicker.tsx        |  3 ++-
 src/types/plugin/api.ts                       |  2 ++
 6 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/docs/content/en/api-reference/sound/page.mdx b/docs/content/en/api-reference/sound/page.mdx
index e1bbf251..30f2a980 100644
--- a/docs/content/en/api-reference/sound/page.mdx
+++ b/docs/content/en/api-reference/sound/page.mdx
@@ -18,6 +18,7 @@ type SoundListItem = {
   sizeBytes: number;
   modifiedAtMs?: number;
   hidden: boolean; // hidden from picker lists — playback is unaffected
+  enabled: boolean; // deprecated — inverse alias of hidden, kept for 1.6.1 compat
   source: 'local' | 'builtin';
   originalPath?: string; // pre-trim original (present for edited sounds)
   trimStartRatio?: number;
@@ -99,4 +100,6 @@ Overwrites an edited sound's processed WAV in place.
 
 ### `dmn.sound.setLatencyLogging(enabled): Promise<void>`
 
-Toggles key-sound latency logging in the audio engine.
+Toggles key-sound latency logging in the audio engine. Enabling is only
+available in dev/debug builds — release builds reject `enabled: true` with an
+error.
diff --git a/docs/content/ko/api-reference/sound/page.mdx b/docs/content/ko/api-reference/sound/page.mdx
index 999dd295..b7a1be5e 100644
--- a/docs/content/ko/api-reference/sound/page.mdx
+++ b/docs/content/ko/api-reference/sound/page.mdx
@@ -18,6 +18,7 @@ type SoundListItem = {
   sizeBytes: number;
   modifiedAtMs?: number;
   hidden: boolean; // 피커 목록에서 숨김 — 재생에는 영향 없음
+  enabled: boolean; // deprecated — hidden의 역논리 별칭, 1.6.1 호환 유지용
   source: 'local' | 'builtin';
   originalPath?: string; // 트림 전 원본 (편집된 사운드에 존재)
   trimStartRatio?: number;
@@ -99,4 +100,5 @@ type SoundSetHiddenResult = {
 
 ### `dmn.sound.setLatencyLogging(enabled): Promise<void>`
 
-오디오 엔진의 키음 지연 로깅을 켜거나 끕니다.
+오디오 엔진의 키음 지연 로깅을 켜거나 끕니다. 켜기는 dev/debug 빌드에서만
+가능하며, 릴리스 빌드에서 `enabled: true`는 에러로 거부됩니다.
diff --git a/src-tauri/src/commands/keys/sound.rs b/src-tauri/src/commands/keys/sound.rs
index f41544ea..50ad96bb 100644
--- a/src-tauri/src/commands/keys/sound.rs
+++ b/src-tauri/src/commands/keys/sound.rs
@@ -36,6 +36,8 @@ pub struct SoundListItem {
     #[serde(skip_serializing_if = "Option::is_none")]
     pub modified_at_ms: Option<u64>,
     pub hidden: bool,
+    // deprecated — 1.6.1 플러그인 계약 호환용 역논리 별칭 (enabled = !hidden)
+    pub enabled: bool,
     pub source: SoundSource,
     #[serde(skip_serializing_if = "Option::is_none")]
     pub original_path: Option<String>,
@@ -205,6 +207,7 @@ pub fn sound_list(
             size_bytes: metadata.len(),
             modified_at_ms,
             hidden: entry_meta.hidden,
+            enabled: !entry_meta.hidden,
             source: entry_meta.source,
             original_path: entry_meta.original_path,
             trim_start_ratio: entry_meta.trim_start_ratio,
diff --git a/src-tauri/src/state/store.rs b/src-tauri/src/state/store.rs
index 57f23f29..35feb4a7 100644
--- a/src-tauri/src/state/store.rs
+++ b/src-tauri/src/state/store.rs
@@ -1,6 +1,7 @@
 use std::{
     collections::HashSet,
     fs,
+    io::Write,
     path::{Path, PathBuf},
 };
 
@@ -257,8 +258,23 @@ impl AppStore {
         }
 
         let json = serde_json::to_string_pretty(&root)?;
-        fs::write(&self.path, json)
-            .with_context(|| format!("failed to write store file at {}", self.path.display()))
+        // 원자 교체 — 쓰기 도중 크래시해도 기존 store가 온전히 남도록
+        // 같은 디렉토리의 임시 파일에 쓴 뒤 rename (동일 파일시스템 보장)
+        let tmp_path = self.path.with_extension("json.tmp");
+        {
+            let mut tmp = fs::File::create(&tmp_path).with_context(|| {
+                format!("failed to create temp store file at {}", tmp_path.display())
+            })?;
+            tmp.write_all(json.as_bytes()).with_context(|| {
+                format!("failed to write temp store file at {}", tmp_path.display())
+            })?;
+            // 전원 손실 대비 — rename 전에 데이터를 디스크로 플러시
+            tmp.sync_all().with_context(|| {
+                format!("failed to sync temp store file at {}", tmp_path.display())
+            })?;
+        }
+        fs::rename(&tmp_path, &self.path)
+            .with_context(|| format!("failed to replace store file at {}", self.path.display()))
     }
 
     /// 앱 종료 시점에 한 번 호출하는 자원 정리.
diff --git a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
index d058d9b4..3ce9246c 100644
--- a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
@@ -259,6 +259,7 @@ const CounterAnimationPicker = ({
               tabIndex={0}
               onClick={() => handlePresetSelect(preset)}
               onKeyDown={(event) => {
+                if (event.target !== event.currentTarget) return;
                 if (event.key === 'Enter' || event.key === ' ') {
                   event.preventDefault();
                   handlePresetSelect(preset);
@@ -281,7 +282,7 @@ const CounterAnimationPicker = ({
                   className={`${pickerMoreButtonClass} ${
                     isSelected || menu.menuKey === preset.id
                       ? 'opacity-100'
-                      : 'opacity-0 group-hover:opacity-100'
+                      : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
                   } ${
                     isSelected
                       ? 'text-fg hover:text-fg'
diff --git a/src/types/plugin/api.ts b/src/types/plugin/api.ts
index 8e8cbc77..2e485599 100644
--- a/src/types/plugin/api.ts
+++ b/src/types/plugin/api.ts
@@ -103,6 +103,8 @@ export type SoundListItem = {
   modifiedAtMs?: number;
   /** 피커 목록에서 숨김 여부 — 재생에는 영향 없음 */
   hidden: boolean;
+  /** @deprecated hidden의 역논리 별칭 (enabled = !hidden) — 1.6.1 호환 */
+  enabled: boolean;
   source: 'local' | 'builtin';
   originalPath?: string;
   trimStartRatio?: number;

From af1defc8145896bc9edfd6ab39f692561233df15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 00:30:00 +0900
Subject: [PATCH 05/17] =?UTF-8?q?feat:=20=ED=8C=A8=EB=84=90=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=2048px=20=EC=95=B5=EC=BB=A4=20=ED=86=B5=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A0=84=ED=99=98=20?=
 =?UTF-8?q?=EB=AA=A8=EC=85=98=20=EB=8F=84=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 사이드 패널 헤더 9곳을 PANEL_HEADER_CLASS(h-48px)로 통일하고
  버튼 네거티브 마진 핵 제거 — 헤더 버튼 중심이 우상단 (24,24)
  앵커에 고정되어 패널 열림/닫힘 간 토글 아이콘 위치 일치.
  피커 서브 페이지 헤더(CommonListPickerPage)도 같은 높이로 동기
- 패널 열기/닫기 버튼을 PanelToggleButton 단일 지속 노드로 통합 —
  리마운트로 인한 hover 끊김·깜빡임 제거. 글래스 칩은 opacity
  페이드(WAAPI), 아이콘 구분선 슬라이드·디테일 라인 페이드는 CSS.
  블러+opacity 조합은 WKWebView에서 블러 레이어가 점멸해 칩 재질을
  블러 없는 glass-panel로 교체
- 헤더 우측 액션을 PanelHeaderActions로 승격해 루트 페이지 레이어에서
  지속 렌더 — 패널 본문 교체 시에도 모드 전환 버튼 노드 유지,
  전환 대상 모드 아이콘이 크로스페이드로 스왑
- IconSwap 공용 컴포넌트 추가 (겹친 두 SVG 블러+스케일 크로스페이드,
  다이얼은 --ui-icon-swap-* 토큰) — 툴바 설정/뒤로, 레이어 패널
  그룹·개별 눈, 사운드 트림 재생/일시정지에 적용
- EyeToggleIcon 추가 — 오버레이 표시 토글의 사선을 마스크 갭과 함께
  대각선 슬라이드로 드로우/이레이즈 (한 방향 관통 스와이프).
  WAAPI FROM 고정 + onfinish 커밋 패턴으로 타이머 경주 제거
- 미사용 SidebarToggleIcon 및 패널별 토글 핸들러 props 정리
---
 .../components/main/Grid/PropertiesPanel.tsx  | 126 +++++++++---------
 .../PropertiesPanel/PanelHeaderActions.tsx    |  58 ++++++++
 .../PropertiesPanel/PanelToggleButton.tsx     | 124 +++++++++++++++++
 .../PluginSettingsPanelView.tsx               |  13 +-
 .../Grid/PropertiesPanel/PropertyInputs.tsx   |  57 --------
 .../batch/BatchSelectionPanel.tsx             |  88 +-----------
 .../main/Grid/PropertiesPanel/index.ts        |   1 -
 .../Grid/PropertiesPanel/layer/LayerPanel.tsx |  38 +-----
 .../PropertiesPanel/layer/LayerTabContent.tsx |  57 +++++---
 .../main/Grid/PropertiesPanel/panelChrome.ts  |   5 +
 .../single/SingleSelectionPanel.tsx           | 111 ++-------------
 .../Modal/content/managers/SoundTrimModal.tsx |  69 ++++++----
 .../content/pickers/CommonListPickerPage.tsx  |   3 +-
 .../components/main/Tool/SettingTool.tsx      |  14 +-
 .../components/main/common/EyeToggleIcon.tsx  | 119 +++++++++++++++++
 .../components/main/common/IconSwap.tsx       |  22 +++
 src/renderer/styles/main.css                  |  71 ++++++++++
 src/renderer/styles/tokens.css                |   7 +
 18 files changed, 580 insertions(+), 403 deletions(-)
 create mode 100644 src/renderer/components/main/Grid/PropertiesPanel/PanelHeaderActions.tsx
 create mode 100644 src/renderer/components/main/Grid/PropertiesPanel/PanelToggleButton.tsx
 create mode 100644 src/renderer/components/main/common/EyeToggleIcon.tsx
 create mode 100644 src/renderer/components/main/common/IconSwap.tsx

diff --git a/src/renderer/components/main/Grid/PropertiesPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel.tsx
index 2c5892ab..566af37e 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel.tsx
@@ -41,7 +41,6 @@ import {
   ColorInput,
   TextInput,
   SectionDivider,
-  SidebarToggleIcon,
   LayerPanel,
   PluginSelectionPanel,
   SingleGraphPanel,
@@ -56,6 +55,8 @@ import {
 } from './PropertiesPanel/index';
 import { SIDE_PANEL_FRAME_CLASS } from './PropertiesPanel/panelChrome';
 import { PanelNavProvider } from './PropertiesPanel/PanelNavContext';
+import PanelHeaderActions from './PropertiesPanel/PanelHeaderActions';
+import PanelToggleButton from './PropertiesPanel/PanelToggleButton';
 import Checkbox from '@components/main/common/Checkbox';
 import Dropdown from '@components/main/common/Dropdown';
 import type { NoteColor } from '@src/types/key/keys';
@@ -1059,6 +1060,8 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     setPanelMode((prev) => (prev === 'layer' ? 'property' : 'layer'));
   };
 
+  const showFrame = isPanelVisible || !!pluginSettingsPanel;
+
   const pluginDefaultSettings = (() => {
     const defaults: Record<string, unknown> = {};
     if (selectedPluginDefinition?.settings) {
@@ -2580,22 +2583,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
   // 렌더링
   // ============================================================================
 
-  // 패널이 닫혀있을 때는 토글 버튼만 표시
-  if (!isPanelVisible && !pluginSettingsPanel) {
-    return (
-      <div className="absolute right-0 top-0 z-30">
-        <button
-          onClick={handleTogglePanel}
-          className="m-[8px] w-[32px] h-[32px] flex items-center justify-center bg-glass-dim backdrop-blur-[24px] rounded-[8px] shadow-elevation-chrome text-white/45 hover:text-white/90 transition-colors"
-          title={t('propertiesPanel.openPanel') || '속성 패널 열기'}
-          aria-label={t('propertiesPanel.openPanel') || '속성 패널 열기'}
-        >
-          <SidebarToggleIcon isOpen={false} />
-        </button>
-      </div>
-    );
-  }
-
   // 선택 상태별 구상 패널 — 프레임(글래스) 안의 루트 페이지 콘텐츠
   const renderPanelBody = () => {
     if (pluginSettingsPanel) {
@@ -2616,13 +2603,9 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
 
     // 레이어 모드일 때는 선택 여부와 관계없이 레이어 패널 표시
     if (panelMode === 'layer') {
-      const hasAnySelection =
-        selectedKeyElements.length > 0 || selectedElements.length > 0;
       return (
         <LayerPanel
-          onClose={handleTogglePanel}
           onSwitchToProperty={handleToggleMode}
-          hasSelection={hasAnySelection}
           onSelectionFromPanel={() => {
             selectionFromLayerPanelRef.current = true;
           }}
@@ -2634,7 +2617,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     if (selectedKeyElements.length === 0 && selectedElements.length === 0) {
       return (
         <LayerPanel
-          onClose={handleTogglePanel}
           onSwitchToProperty={handleToggleMode}
           onSelectionFromPanel={() => {
             selectionFromLayerPanelRef.current = true;
@@ -2667,8 +2649,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleRenameCommit={handleRenameCommit}
           handleRenameCancel={handleRenameCancel}
           handleRenameStart={handleRenameStart}
-          handleToggleMode={handleToggleMode}
-          handleTogglePanel={handleTogglePanel}
           activeTab={activeTab}
           setActiveTab={setActiveTab}
           handleBatchAlign={handleBatchAlign}
@@ -2768,8 +2748,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleRenameCommit={handleRenameCommit}
           handleRenameCancel={handleRenameCancel}
           handleRenameStart={handleRenameStart}
-          handleToggleMode={handleToggleMode}
-          handleTogglePanel={handleTogglePanel}
           handleBatchAlign={handleBatchAlign}
           handleBatchDistribute={handleBatchDistribute}
           handleBatchSpacing={handleBatchSpacing}
@@ -2815,8 +2793,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleRenameCommit={handleRenameCommit}
           handleRenameCancel={handleRenameCancel}
           handleRenameStart={handleRenameStart}
-          handleToggleMode={handleToggleMode}
-          handleTogglePanel={handleTogglePanel}
           handleBatchAlign={handleBatchAlign}
           handleBatchDistribute={handleBatchDistribute}
           handleBatchSpacing={handleBatchSpacing}
@@ -2858,8 +2834,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
         <PluginSelectionPanel
           setPanelElement={setPanelElement}
           pluginTitle={pluginTitle}
-          handleToggleMode={handleToggleMode}
-          handleTogglePanel={handleTogglePanel}
           setPluginScrollRef={setPluginScrollRef}
           isPluginResizable={isPluginResizable}
           selectedPluginElement={selectedPluginElement}
@@ -2903,8 +2877,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleRenameCancel={handleRenameCancel}
           handleRenameStart={handleRenameStart}
           handleKnobUpdate={handleKnobUpdate}
-          handleToggleMode={handleToggleMode}
-          handleTogglePanel={handleTogglePanel}
           singleScrollRefFor={singleScrollRefFor}
           panelElement={panelElement}
           useCustomCSS={useCustomCSS}
@@ -2934,8 +2906,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handleRenameCommit={handleRenameCommit}
           handleRenameCancel={handleRenameCancel}
           handleRenameStart={handleRenameStart}
-          handleToggleMode={handleToggleMode}
-          handleTogglePanel={handleTogglePanel}
           handleGraphUpdate={handleGraphUpdate}
           singleScrollRefFor={singleScrollRefFor}
           showGraphImagePicker={showGraphImagePicker}
@@ -2977,8 +2947,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
         handleRenameCommit={handleRenameCommit}
         handleRenameCancel={handleRenameCancel}
         handleRenameStart={handleRenameStart}
-        handleToggleMode={handleToggleMode}
-        handleTogglePanel={handleTogglePanel}
         activeTab={activeTab}
         setActiveTab={setActiveTab}
         onPositionChange={onPositionChange}
@@ -3003,33 +2971,71 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     );
   };
 
-  const panelBody = renderPanelBody();
-  if (!panelBody) return null;
+  // 열림/닫힘과 무관하게 항상 렌더되는 지속 토글 — 리마운트 없이 모프 전환
+  const toggleButton = (
+    <PanelToggleButton
+      open={showFrame}
+      onClick={
+        pluginSettingsPanel
+          ? handlePluginSettingsPanelCancel
+          : handleTogglePanel
+      }
+    />
+  );
+
+  const panelBody = showFrame ? renderPanelBody() : null;
+
+  // 헤더 액션 기준 모드 — panelMode가 property여도 선택이 없으면 레이어 뷰가 표시됨
+  const hasAnySelection =
+    selectedKeyElements.length > 0 || selectedElements.length > 0;
+  const displayedPanelMode =
+    panelMode === 'layer' || !hasAnySelection ? 'layer' : 'property';
 
-  // 프레임이 글래스를 소유하고, 루트/서브 페이지가 그 안에서 슬라이드 전환
+  // 프레임이 글래스를 소유하고, 루트/서브 페이지가 그 안에서 슬라이드 전환.
+  // 열림/닫힘 모두 같은 프래그먼트 구조 유지 — 토글 버튼이 리마운트되면
+  // 호버 상태가 끊겨 아이콘이 깜빡임
   return (
-    <PanelNavProvider
-      value={{ activePageKey, renderPageKey, openPage, closePage, pageHost }}
-    >
-      <div className={SIDE_PANEL_FRAME_CLASS}>
-        {/* inert — 슬라이드 아웃된 레이어를 키보드 탭 순회·접근성 트리에서 제외 */}
-        <div
-          className="dmn-panel-page"
-          data-page-depth="root"
-          data-active={activePageKey ? 'false' : 'true'}
-          inert={activePageKey ? true : undefined}
+    <>
+      {showFrame && panelBody && (
+        <PanelNavProvider
+          value={{
+            activePageKey,
+            renderPageKey,
+            openPage,
+            closePage,
+            pageHost,
+          }}
         >
-          {panelBody}
-        </div>
-        <div
-          ref={setPageHost}
-          className="dmn-panel-page"
-          data-page-depth="sub"
-          data-active={activePageKey ? 'true' : 'false'}
-          inert={activePageKey ? undefined : true}
-        />
-      </div>
-    </PanelNavProvider>
+          <div className={SIDE_PANEL_FRAME_CLASS}>
+            {/* inert — 슬라이드 아웃된 레이어를 키보드 탭 순회·접근성 트리에서 제외 */}
+            <div
+              className="dmn-panel-page"
+              data-page-depth="root"
+              data-active={activePageKey ? 'false' : 'true'}
+              inert={activePageKey ? true : undefined}
+            >
+              {panelBody}
+              <PanelHeaderActions
+                mode={displayedPanelMode}
+                modeToggleHidden={!!pluginSettingsPanel}
+                modeToggleDisabled={
+                  displayedPanelMode === 'layer' && !hasAnySelection
+                }
+                onToggleMode={handleToggleMode}
+              />
+            </div>
+            <div
+              ref={setPageHost}
+              className="dmn-panel-page"
+              data-page-depth="sub"
+              data-active={activePageKey ? 'true' : 'false'}
+              inert={activePageKey ? undefined : true}
+            />
+          </div>
+        </PanelNavProvider>
+      )}
+      {toggleButton}
+    </>
   );
 };
 
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PanelHeaderActions.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PanelHeaderActions.tsx
new file mode 100644
index 00000000..63588f86
--- /dev/null
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PanelHeaderActions.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTranslation } from '@contexts/useTranslation';
+import IconSwap from '@components/main/common/IconSwap';
+import { ModeToggleIcon } from './PropertyInputs';
+
+interface PanelHeaderActionsProps {
+  // 실제 표시 중인 패널 기준 모드 (panelMode가 property여도 선택이 없으면 layer 뷰)
+  mode: 'layer' | 'property';
+  // 플러그인 설정 패널에서는 모드 전환 숨김
+  modeToggleHidden?: boolean;
+  modeToggleDisabled?: boolean;
+  onToggleMode: () => void;
+}
+
+// 패널 헤더 우측 액션 — 패널 본문(루트 페이지 콘텐츠)이 통째로 교체되어도
+// 버튼 노드가 유지되도록 프레임의 루트 페이지 레이어에서 렌더.
+// 아이콘 스왑 전환이 발동하고, 리마운트로 인한 hover 깜빡임도 없음.
+// 닫기 토글은 프레임 밖의 PanelToggleButton이 담당 — 오른쪽 40px 비워둠
+const PanelHeaderActions = ({
+  mode,
+  modeToggleHidden = false,
+  modeToggleDisabled = false,
+  onToggleMode,
+}: PanelHeaderActionsProps) => {
+  const { t } = useTranslation();
+  const modeToggleLabel =
+    mode === 'property'
+      ? t('propertiesPanel.switchToLayer') || 'Switch to Layer'
+      : t('propertiesPanel.switchToProperty') || 'Switch to Property';
+
+  if (modeToggleHidden) return null;
+
+  return (
+    <div className="absolute top-0 right-0 h-[48px] pl-[12px] pr-[40px] flex items-center pointer-events-none">
+      <button
+        disabled={modeToggleDisabled}
+        onClick={modeToggleDisabled ? undefined : onToggleMode}
+        className={`pointer-events-auto w-[24px] h-[24px] flex items-center justify-center rounded-[4px] transition-colors ${
+          modeToggleDisabled
+            ? 'text-fg-disabled cursor-not-allowed'
+            : 'text-white/45 hover:text-white/90 cursor-pointer'
+        }`}
+        title={modeToggleLabel}
+        aria-label={modeToggleLabel}
+      >
+        <IconSwap
+          active={mode === 'property'}
+          activeIcon={<ModeToggleIcon mode="layer" />}
+          inactiveIcon={
+            <ModeToggleIcon mode="property" disabled={modeToggleDisabled} />
+          }
+        />
+      </button>
+    </div>
+  );
+};
+
+export default PanelHeaderActions;
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PanelToggleButton.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PanelToggleButton.tsx
new file mode 100644
index 00000000..c1d4bfc0
--- /dev/null
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PanelToggleButton.tsx
@@ -0,0 +1,124 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import { useTranslation } from '@contexts/useTranslation';
+
+interface PanelToggleButtonProps {
+  open: boolean;
+  onClick: () => void;
+}
+
+// tokens.css의 --ui-duration-base / --ui-ease-out과 동기 (WAAPI는 CSS 변수 참조 불가)
+const FADE_MS = 180;
+const FADE_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)';
+
+const CHIP_SHOWN = '1';
+const CHIP_HIDDEN = '0';
+
+// 패널 열기/닫기 토글 — 열림/닫힘을 하나의 지속 노드로 렌더해
+// 리마운트 깜빡임 없이 글래스 칩 ↔ 베어 아이콘으로 모프.
+// 아이콘 중심은 두 상태 모두 우상단 (24, 24) 앵커에 고정.
+// 칩은 opacity 페이드 — backdrop-filter가 없는 재질이라 안전
+// (블러+opacity 조합은 WKWebView에서 블러 레이어가 점멸).
+// 눈 토글과 같은 규칙: FROM 상태를 정적으로 고정하고 TO 커밋은 onfinish에서
+const PanelToggleButton = ({ open, onClick }: PanelToggleButtonProps) => {
+  const { t } = useTranslation();
+  const chipRef = useRef<HTMLSpanElement>(null);
+  const mountedRef = useRef(false);
+  const animRef = useRef<Animation | null>(null);
+
+  useLayoutEffect(() => {
+    const chip = chipRef.current;
+    if (!chip) return;
+
+    // 칩은 opacity로만 움직임 — 잔류 인라인 transform 방어적 제거
+    chip.style.transform = '';
+
+    // 초기 마운트는 정적 상태 그대로 — 페이드 연출 없음
+    const restState = open ? CHIP_HIDDEN : CHIP_SHOWN;
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      chip.style.opacity = restState;
+      return;
+    }
+
+    animRef.current?.cancel();
+    animRef.current = null;
+
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      chip.style.opacity = restState;
+      return;
+    }
+
+    const from = open ? CHIP_SHOWN : CHIP_HIDDEN;
+    chip.style.opacity = from;
+    const anim = chip.animate([{ opacity: from }, { opacity: restState }], {
+      duration: FADE_MS,
+      easing: FADE_EASE,
+    });
+    anim.onfinish = () => {
+      chip.style.opacity = restState;
+    };
+    animRef.current = anim;
+  }, [open]);
+
+  const label = open
+    ? t('propertiesPanel.closePanel') || '속성 패널 닫기'
+    : t('propertiesPanel.openPanel') || '속성 패널 열기';
+
+  return (
+    <div className="absolute top-0 right-0 z-30 w-[48px] h-[48px] flex items-center justify-center pointer-events-none">
+      <button
+        onClick={onClick}
+        className="dmn-panel-toggle pointer-events-auto relative w-[32px] h-[32px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
+        data-open={open ? 'true' : 'false'}
+        title={label}
+        aria-label={label}
+        aria-expanded={open}
+      >
+        <span
+          ref={chipRef}
+          aria-hidden="true"
+          className="absolute inset-0 rounded-[8px] bg-glass-panel shadow-elevation-chrome"
+        />
+        <svg
+          className="relative"
+          width="16"
+          height="14"
+          viewBox="0 0 16 14"
+          fill="none"
+        >
+          <rect
+            x="0.75"
+            y="0.75"
+            width="14.5"
+            height="12.5"
+            rx="2"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            fill="none"
+          />
+          <line
+            className="dmn-panel-toggle-divider"
+            x1="10"
+            y1="1"
+            x2="10"
+            y2="13"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          />
+          <g
+            className="dmn-panel-toggle-lines"
+            stroke="currentColor"
+            strokeWidth="1"
+            strokeLinecap="round"
+          >
+            <line x1="12" y1="4" x2="13.5" y2="4" />
+            <line x1="12" y1="7" x2="13.5" y2="7" />
+            <line x1="12" y1="10" x2="13.5" y2="10" />
+          </g>
+        </svg>
+      </button>
+    </div>
+  );
+};
+
+export default PanelToggleButton;
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
index 6500b55a..8931f98a 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
@@ -5,8 +5,7 @@ import type {
   PluginSettingValue,
 } from '@src/types/plugin/api';
 import type { PluginSettingsPanelPayload } from '@stores/grid/usePropertiesPanelStore';
-import { SidebarToggleIcon } from './PropertyInputs';
-import { PANEL_ROOT_CLASS } from './panelChrome';
+import { PANEL_ROOT_CLASS, PANEL_HEADER_CLASS } from './panelChrome';
 
 interface PluginSettingsPanelViewProps {
   setPanelElement: (el: HTMLDivElement | null) => void;
@@ -43,7 +42,7 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
 }) => {
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
-      <div className="flex items-center justify-between p-[12px] pb-[12px]">
+      <div className={PANEL_HEADER_CLASS}>
         <div className="flex flex-col gap-[2px]">
           <span className="text-fg text-style-2 leading-none">
             {t('propertiesPanel.pluginSettings') || '플러그인 설정'}
@@ -52,14 +51,6 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
             {pluginSettingsPanel.pluginId}
           </span>
         </div>
-        <button
-          onClick={handlePluginSettingsPanelCancel}
-          className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-          title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-          aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-        >
-          <SidebarToggleIcon isOpen={true} />
-        </button>
       </div>
       <div className="flex-1 properties-panel-overlay-scroll">
         <div
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
index 8444d254..48702838 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
@@ -1015,63 +1015,6 @@ export const CloseIcon: React.FC = () => (
   </svg>
 );
 
-export const SidebarToggleIcon: React.FC<{
-  isOpen: boolean;
-  color?: string;
-}> = ({ isOpen, color = 'currentColor' }) => (
-  <svg width="16" height="14" viewBox="0 0 16 14" fill="none">
-    <rect
-      x="0.75"
-      y="0.75"
-      width="14.5"
-      height="12.5"
-      rx="2"
-      stroke={color}
-      strokeWidth="1.5"
-      fill="none"
-    />
-    <line
-      x1={isOpen ? '10' : '12'}
-      y1="1"
-      x2={isOpen ? '10' : '12'}
-      y2="13"
-      stroke={color}
-      strokeWidth="1.5"
-    />
-    {isOpen && (
-      <>
-        <line
-          x1="12"
-          y1="4"
-          x2="13.5"
-          y2="4"
-          stroke={color}
-          strokeWidth="1"
-          strokeLinecap="round"
-        />
-        <line
-          x1="12"
-          y1="7"
-          x2="13.5"
-          y2="7"
-          stroke={color}
-          strokeWidth="1"
-          strokeLinecap="round"
-        />
-        <line
-          x1="12"
-          y1="10"
-          x2="13.5"
-          y2="10"
-          stroke={color}
-          strokeWidth="1"
-          strokeLinecap="round"
-        />
-      </>
-    )}
-  </svg>
-);
-
 // 레이어/속성 모드 전환 토글 아이콘
 export const ModeToggleIcon: React.FC<{
   mode: 'layer' | 'property';
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
index afe1e3c5..ac905546 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
@@ -11,7 +11,7 @@ import type {
 } from '@src/types/key/graphItems';
 import type { KnobItemPosition } from '@src/types/key/knobs';
 import type { SelectedElement } from '@stores/grid/useGridSelectionStore';
-import { PANEL_ROOT_CLASS } from '../panelChrome';
+import { PANEL_ROOT_CLASS, PANEL_HEADER_CLASS } from '../panelChrome';
 import {
   normalizeCounterSettings,
   createDefaultCounterSettings,
@@ -20,8 +20,6 @@ import {
   PropertyRow,
   NumberInput,
   ColorInput,
-  SidebarToggleIcon,
-  ModeToggleIcon,
   Tabs,
   BatchStyleTabContent,
   BatchNoteTabContent,
@@ -111,8 +109,6 @@ interface BatchKeyLikePanelProps {
   handleRenameCommit: (value: string) => void;
   handleRenameCancel: () => void;
   handleRenameStart: () => void;
-  handleToggleMode: () => void;
-  handleTogglePanel: () => void;
   activeTab: TabType;
   setActiveTab: (tab: TabType) => void;
   // batch handlers
@@ -214,8 +210,6 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
   handleRenameCommit,
   handleRenameCancel,
   handleRenameStart,
-  handleToggleMode,
-  handleTogglePanel,
   activeTab,
   setActiveTab,
   handleBatchAlign,
@@ -525,7 +519,7 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
       {/* 헤더 + 탭 영역 */}
       <div className="flex-shrink-0">
         {/* 헤더 */}
-        <div className="flex items-center justify-between p-[12px] pb-[12px]">
+        <div className={PANEL_HEADER_CLASS}>
           <div className="flex items-center gap-[8px]">
             {selectedGroupInfo ? (
               isRenaming ? (
@@ -562,7 +556,7 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
                   </span>
                   <button
                     onClick={handleRenameStart}
-                    className="w-[18px] h-[18px] -my-[3px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
+                    className="w-[18px] h-[18px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
                     title={t('contextMenu.rename') || 'Rename'}
                   >
                     <RenameIcon />
@@ -580,26 +574,6 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
               </span>
             )}
           </div>
-          <div className="flex items-center gap-[4px]">
-            <button
-              onClick={handleToggleMode}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-              aria-label={
-                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
-              }
-            >
-              <ModeToggleIcon mode="layer" />
-            </button>
-            <button
-              onClick={handleTogglePanel}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-            >
-              <SidebarToggleIcon isOpen={true} />
-            </button>
-          </div>
         </div>
 
         {/* 탭 */}
@@ -976,8 +950,6 @@ interface BatchGraphOnlyPanelProps {
   handleRenameCommit: (value: string) => void;
   handleRenameCancel: () => void;
   handleRenameStart: () => void;
-  handleToggleMode: () => void;
-  handleTogglePanel: () => void;
   handleBatchAlign: (
     direction: 'left' | 'centerH' | 'right' | 'top' | 'centerV' | 'bottom',
   ) => void;
@@ -1024,8 +996,6 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
   handleRenameCommit,
   handleRenameCancel,
   handleRenameStart,
-  handleToggleMode,
-  handleTogglePanel,
   handleBatchAlign,
   handleBatchDistribute,
   handleBatchSpacing,
@@ -1082,7 +1052,7 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
       <div className="flex-shrink-0">
-        <div className="flex items-center justify-between p-[12px] pb-[12px]">
+        <div className={PANEL_HEADER_CLASS}>
           <div className="flex items-center gap-[8px]">
             {selectedGroupInfo ? (
               isRenaming ? (
@@ -1119,7 +1089,7 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
                   </span>
                   <button
                     onClick={handleRenameStart}
-                    className="w-[18px] h-[18px] -my-[3px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
+                    className="w-[18px] h-[18px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
                     title={t('contextMenu.rename') || 'Rename'}
                   >
                     <RenameIcon />
@@ -1137,26 +1107,6 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
               </span>
             )}
           </div>
-          <div className="flex items-center gap-[4px]">
-            <button
-              onClick={handleToggleMode}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-              aria-label={
-                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
-              }
-            >
-              <ModeToggleIcon mode="layer" />
-            </button>
-            <button
-              onClick={handleTogglePanel}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-            >
-              <SidebarToggleIcon isOpen={true} />
-            </button>
-          </div>
         </div>
       </div>
 
@@ -1361,8 +1311,6 @@ interface BatchKnobOnlyPanelProps {
   handleRenameCommit: (value: string) => void;
   handleRenameCancel: () => void;
   handleRenameStart: () => void;
-  handleToggleMode: () => void;
-  handleTogglePanel: () => void;
   handleBatchAlign: (
     direction: 'left' | 'centerH' | 'right' | 'top' | 'centerV' | 'bottom',
   ) => void;
@@ -1409,8 +1357,6 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
   handleRenameCommit,
   handleRenameCancel,
   handleRenameStart,
-  handleToggleMode,
-  handleTogglePanel,
   handleBatchAlign,
   handleBatchDistribute,
   handleBatchSpacing,
@@ -1442,7 +1388,7 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
       <div className="flex-shrink-0">
-        <div className="flex items-center justify-between p-[12px] pb-[12px]">
+        <div className={PANEL_HEADER_CLASS}>
           <div className="flex items-center gap-[8px]">
             {selectedGroupInfo ? (
               isRenaming ? (
@@ -1479,7 +1425,7 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
                   </span>
                   <button
                     onClick={handleRenameStart}
-                    className="w-[18px] h-[18px] -my-[3px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
+                    className="w-[18px] h-[18px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
                     title={t('contextMenu.rename') || 'Rename'}
                   >
                     <RenameIcon />
@@ -1497,26 +1443,6 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
               </span>
             )}
           </div>
-          <div className="flex items-center gap-[4px]">
-            <button
-              onClick={handleToggleMode}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-              aria-label={
-                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
-              }
-            >
-              <ModeToggleIcon mode="layer" />
-            </button>
-            <button
-              onClick={handleTogglePanel}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-            >
-              <SidebarToggleIcon isOpen={true} />
-            </button>
-          </div>
         </div>
       </div>
 
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/index.ts b/src/renderer/components/main/Grid/PropertiesPanel/index.ts
index c4bbc40c..8a6f7e14 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/index.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/index.ts
@@ -14,7 +14,6 @@ export {
   Tabs,
   SectionDivider,
   CloseIcon,
-  SidebarToggleIcon,
   ModeToggleIcon,
 } from './PropertyInputs';
 
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
index d7064be5..ae75a11b 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
@@ -2,8 +2,7 @@ import React from 'react';
 import { useTranslation } from '@contexts/useTranslation';
 import { usePropertiesPanelStore } from '@stores/grid/usePropertiesPanelStore';
 import { useGridSelectionStore } from '@stores/grid/useGridSelectionStore';
-import { SidebarToggleIcon, ModeToggleIcon } from '../PropertyInputs';
-import { PANEL_ROOT_CLASS } from '../panelChrome';
+import { PANEL_ROOT_CLASS, PANEL_HEADER_CLASS } from '../panelChrome';
 import { LAYER_PANEL_TABS, type LayerPanelTabType } from '../types';
 import LayerTabContent from './LayerTabContent';
 import GridTabContent from '../GridTabContent';
@@ -13,9 +12,7 @@ import GridTabContent from '../GridTabContent';
 // ============================================================================
 
 interface LayerPanelProps {
-  onClose: () => void;
   onSwitchToProperty?: () => void;
-  hasSelection?: boolean;
   onSelectionFromPanel?: () => void;
 }
 
@@ -92,9 +89,7 @@ const LayerPanelTabs: React.FC<LayerPanelTabsProps> = ({
 // ============================================================================
 
 const LayerPanel: React.FC<LayerPanelProps> = ({
-  onClose,
   onSwitchToProperty,
-  hasSelection = false,
   onSelectionFromPanel,
 }) => {
   const { t } = useTranslation();
@@ -123,39 +118,10 @@ const LayerPanel: React.FC<LayerPanelProps> = ({
       {/* 헤더 + 탭 영역 */}
       <div className="flex-shrink-0">
         {/* 헤더 */}
-        <div className="flex items-center justify-between p-[12px] pb-[12px]">
+        <div className={PANEL_HEADER_CLASS}>
           <span className="text-fg text-style-2 leading-none">
             {t('propertiesPanel.canvas') || 'Canvas'}
           </span>
-          <div className="flex items-center gap-[4px]">
-            {/* 모드 토글 버튼 - hasSelection에 따라 활성/비활성 */}
-            <button
-              disabled={!hasSelection}
-              onClick={hasSelection ? onSwitchToProperty : undefined}
-              className={`w-[24px] h-[24px] -my-[6px] flex items-center justify-center rounded-[4px] transition-colors ${
-                hasSelection
-                  ? 'text-white/45 hover:text-white/90 cursor-pointer'
-                  : 'text-fg-disabled cursor-not-allowed'
-              }`}
-              title={
-                t('propertiesPanel.switchToProperty') || 'Switch to Property'
-              }
-              aria-label={
-                t('propertiesPanel.switchToProperty') || 'Switch to Property'
-              }
-            >
-              <ModeToggleIcon mode="property" disabled={!hasSelection} />
-            </button>
-            {/* 패널 닫기 버튼 */}
-            <button
-              onClick={onClose}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.closePanel') || 'Close Panel'}
-              aria-label={t('propertiesPanel.closePanel') || 'Close Panel'}
-            >
-              <SidebarToggleIcon isOpen={true} />
-            </button>
-          </div>
         </div>
 
         {/* 탭 */}
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
index 0fbd9796..15f306b3 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
@@ -13,6 +13,7 @@ import { usePluginDisplayElementStore } from '@stores/plugin/usePluginDisplayEle
 import { isMac } from '@utils/core/platform';
 import { useLenis } from '@hooks/useLenis';
 import ListPopup from '@components/main/Modal/ListPopup';
+import IconSwap from '@components/main/common/IconSwap';
 import CloseEyeIcon from '@assets/svgs/close_eye.svg';
 import OpenEyeIcon from '@assets/svgs/open_eye.svg';
 import { useLayerGroupStore } from '@stores/data/useLayerGroupStore';
@@ -618,19 +619,23 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
                           : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
                       }`}
                     >
-                      {gh.allHidden ? (
-                        <CloseEyeIcon
-                          width={14}
-                          height={14}
-                          fill="currentColor"
-                        />
-                      ) : (
-                        <OpenEyeIcon
-                          width={14}
-                          height={14}
-                          fill="currentColor"
-                        />
-                      )}
+                      <IconSwap
+                        active={gh.allHidden}
+                        activeIcon={
+                          <CloseEyeIcon
+                            width={14}
+                            height={14}
+                            fill="currentColor"
+                          />
+                        }
+                        inactiveIcon={
+                          <OpenEyeIcon
+                            width={14}
+                            height={14}
+                            fill="currentColor"
+                          />
+                        }
+                      />
                     </button>
                   </div>
                 );
@@ -756,15 +761,23 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
                         : 'opacity-0 group-hover:opacity-60 hover:!opacity-100'
                     }`}
                   >
-                    {item.hidden ? (
-                      <CloseEyeIcon
-                        width={14}
-                        height={14}
-                        fill="currentColor"
-                      />
-                    ) : (
-                      <OpenEyeIcon width={14} height={14} fill="currentColor" />
-                    )}
+                    <IconSwap
+                      active={item.hidden}
+                      activeIcon={
+                        <CloseEyeIcon
+                          width={14}
+                          height={14}
+                          fill="currentColor"
+                        />
+                      }
+                      inactiveIcon={
+                        <OpenEyeIcon
+                          width={14}
+                          height={14}
+                          fill="currentColor"
+                        />
+                      }
+                    />
                   </button>
                 </div>
               );
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts b/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts
index eca4489c..4ac66b91 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/panelChrome.ts
@@ -5,3 +5,8 @@ export const SIDE_PANEL_FRAME_CLASS =
 
 // 구상 패널 루트 — 프레임을 꽉 채우는 투명 레이어
 export const PANEL_ROOT_CLASS = 'absolute inset-0 flex flex-col';
+
+// 패널 헤더 — 48px 고정: 버튼 중심이 우상단 (24, 24) 앵커에 와서
+// PanelToggleButton(48px 컨테이너 센터링)의 아이콘 중심과 같은 지점에 고정
+export const PANEL_HEADER_CLASS =
+  'flex items-center justify-between h-[48px] px-[12px] shrink-0';
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
index 35040ac7..e82b20e3 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
@@ -15,15 +15,13 @@ import type {
   PluginDisplayElementInternal,
 } from '@src/types/plugin/api';
 import type { KeyInfo } from '@utils/core/KeyMaps';
-import { PANEL_ROOT_CLASS } from '../panelChrome';
+import { PANEL_ROOT_CLASS, PANEL_HEADER_CLASS } from '../panelChrome';
 import {
   PropertyRow,
   NumberInput,
   TextInput,
   ColorInput,
   PropertySection,
-  SidebarToggleIcon,
-  ModeToggleIcon,
   Tabs,
   StyleTabContent,
   NoteTabContent,
@@ -82,8 +80,6 @@ const RenameIcon: React.FC = () => (
 interface PluginSelectionPanelProps {
   setPanelElement: (el: HTMLDivElement | null) => void;
   pluginTitle: string;
-  handleToggleMode: () => void;
-  handleTogglePanel: () => void;
   setPluginScrollRef: (node: HTMLDivElement | null) => void;
   isPluginResizable: boolean;
   selectedPluginElement: PluginDisplayElementInternal | null;
@@ -112,8 +108,6 @@ interface PluginSelectionPanelProps {
 export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
   setPanelElement,
   pluginTitle,
-  handleToggleMode,
-  handleTogglePanel,
   setPluginScrollRef,
   isPluginResizable,
   selectedPluginElement,
@@ -133,28 +127,10 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
 }) => {
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
-      <div className="flex items-center justify-between p-[12px] pb-[12px]">
+      <div className={PANEL_HEADER_CLASS}>
         <span className="text-fg text-style-2 leading-none truncate max-w-[120px]">
           {pluginTitle}
         </span>
-        <div className="flex items-center gap-[4px]">
-          <button
-            onClick={handleToggleMode}
-            className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-            title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-            aria-label={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-          >
-            <ModeToggleIcon mode="layer" />
-          </button>
-          <button
-            onClick={handleTogglePanel}
-            className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-            title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-            aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-          >
-            <SidebarToggleIcon isOpen={true} />
-          </button>
-        </div>
       </div>
       <div className="flex-1 properties-panel-overlay-scroll">
         <div
@@ -256,8 +232,6 @@ interface SingleGraphPanelProps {
   handleRenameCommit: (value: string) => void;
   handleRenameCancel: () => void;
   handleRenameStart: () => void;
-  handleToggleMode: () => void;
-  handleTogglePanel: () => void;
   handleGraphUpdate: (
     data: Partial<GraphItemPosition> & { index: number },
   ) => void;
@@ -285,8 +259,6 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
   handleRenameCommit,
   handleRenameCancel,
   handleRenameStart,
-  handleToggleMode,
-  handleTogglePanel,
   handleGraphUpdate,
   singleScrollRefFor,
   showGraphImagePicker,
@@ -310,7 +282,7 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
 
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
-      <div className="flex items-center justify-between p-[12px] pb-[12px]">
+      <div className={PANEL_HEADER_CLASS}>
         {isRenaming ? (
           <input
             ref={renameInputRef}
@@ -345,31 +317,13 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
             </span>
             <button
               onClick={handleRenameStart}
-              className="w-[18px] h-[18px] -my-[3px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
+              className="w-[18px] h-[18px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
               title={t('contextMenu.rename') || 'Rename'}
             >
               <RenameIcon />
             </button>
           </div>
         )}
-        <div className="flex items-center gap-[4px]">
-          <button
-            onClick={handleToggleMode}
-            className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-            title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-            aria-label={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-          >
-            <ModeToggleIcon mode="layer" />
-          </button>
-          <button
-            onClick={handleTogglePanel}
-            className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-            title={t('propertiesPanel.closePanel') || 'Close'}
-            aria-label={t('propertiesPanel.closePanel') || 'Close'}
-          >
-            <SidebarToggleIcon isOpen={true} />
-          </button>
-        </div>
       </div>
       <div className="flex-1 properties-panel-overlay-scroll">
         <div
@@ -749,8 +703,6 @@ interface SingleKnobPanelProps {
   handleKnobUpdate: (
     data: Partial<KnobItemPosition> & { index: number },
   ) => void;
-  handleToggleMode: () => void;
-  handleTogglePanel: () => void;
   singleScrollRefFor: (tab: TabType) => (node: HTMLDivElement | null) => void;
   panelElement: HTMLDivElement | null;
   useCustomCSS: boolean;
@@ -771,8 +723,6 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
   handleRenameCancel,
   handleRenameStart,
   handleKnobUpdate,
-  handleToggleMode,
-  handleTogglePanel,
   singleScrollRefFor,
   panelElement,
   useCustomCSS,
@@ -951,7 +901,7 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
 
   return (
     <div ref={setRef} className={PANEL_ROOT_CLASS}>
-      <div className="flex items-center justify-between p-[12px] pb-[12px]">
+      <div className={PANEL_HEADER_CLASS}>
         {isRenaming ? (
           <input
             ref={renameInputRef}
@@ -986,31 +936,13 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
             </span>
             <button
               onClick={handleRenameStart}
-              className="w-[18px] h-[18px] -my-[3px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
+              className="w-[18px] h-[18px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
               title={t('contextMenu.rename') || 'Rename'}
             >
               <RenameIcon />
             </button>
           </div>
         )}
-        <div className="flex items-center gap-[4px]">
-          <button
-            onClick={handleToggleMode}
-            className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-            title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-            aria-label={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-          >
-            <ModeToggleIcon mode="layer" />
-          </button>
-          <button
-            onClick={handleTogglePanel}
-            className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-            title={t('propertiesPanel.closePanel') || 'Close'}
-            aria-label={t('propertiesPanel.closePanel') || 'Close'}
-          >
-            <SidebarToggleIcon isOpen={true} />
-          </button>
-        </div>
       </div>
 
       <div className="flex-1 properties-panel-overlay-scroll">
@@ -1341,8 +1273,6 @@ interface SingleKeyStatPanelProps {
   handleRenameCommit: (value: string) => void;
   handleRenameCancel: () => void;
   handleRenameStart: () => void;
-  handleToggleMode: () => void;
-  handleTogglePanel: () => void;
   activeTab: TabType;
   setActiveTab: (tab: TabType) => void;
   onPositionChange: (index: number, dx: number, dy: number) => void;
@@ -1391,8 +1321,6 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
   handleRenameCommit,
   handleRenameCancel,
   handleRenameStart,
-  handleToggleMode,
-  handleTogglePanel,
   activeTab,
   setActiveTab,
   onPositionChange,
@@ -1511,7 +1439,7 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
       {/* 헤더 + 탭 영역 */}
       <div className="flex-shrink-0">
         {/* 헤더 */}
-        <div className="flex items-center justify-between p-[12px] pb-[12px]">
+        <div className={PANEL_HEADER_CLASS}>
           {isRenaming ? (
             <input
               ref={renameInputRef}
@@ -1546,36 +1474,13 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
               </span>
               <button
                 onClick={handleRenameStart}
-                className="w-[18px] h-[18px] -my-[3px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
+                className="w-[18px] h-[18px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors flex-shrink-0"
                 title={t('contextMenu.rename') || 'Rename'}
               >
                 <RenameIcon />
               </button>
             </div>
           )}
-
-          <div className="flex items-center gap-[4px]">
-            {/* 레이어 모드로 전환 버튼 */}
-            <button
-              onClick={handleToggleMode}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.switchToLayer') || 'Switch to Layer'}
-              aria-label={
-                t('propertiesPanel.switchToLayer') || 'Switch to Layer'
-              }
-            >
-              <ModeToggleIcon mode="layer" />
-            </button>
-            {/* 패널 닫기 버튼 */}
-            <button
-              onClick={handleTogglePanel}
-              className="w-[24px] h-[24px] -my-[6px] flex items-center justify-center text-white/45 hover:text-white/90 transition-colors"
-              title={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-              aria-label={t('propertiesPanel.closePanel') || '속성 패널 닫기'}
-            >
-              <SidebarToggleIcon isOpen={true} />
-            </button>
-          </div>
         </div>
 
         {/* 탭 */}
diff --git a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
index 90308432..2919b493 100644
--- a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
+++ b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTranslation } from '@contexts/useTranslation';
 import Modal from '../../Modal';
+import IconSwap from '@components/main/common/IconSwap';
 import {
   getCursor,
   setCustomCursorHover,
@@ -1066,33 +1067,47 @@ const SoundTrimModal = ({
                   onClick={handlePlay}
                   disabled={!audioBuffer}
                 >
-                  {isPlaying ? (
-                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                      <rect
-                        x="2"
-                        y="1.5"
-                        width="3"
-                        height="9"
-                        rx="0.75"
-                        fill="currentColor"
-                      />
-                      <rect
-                        x="7"
-                        y="1.5"
-                        width="3"
-                        height="9"
-                        rx="0.75"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  ) : (
-                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-                      <path
-                        d="M3.5 1.8C3.5 1.49 3.84 1.3 4.1 1.47L10.1 5.67C10.34 5.83 10.34 6.17 10.1 6.33L4.1 10.53C3.84 10.7 3.5 10.51 3.5 10.2V1.8Z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                  )}
+                  <IconSwap
+                    active={isPlaying}
+                    activeIcon={
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                      >
+                        <rect
+                          x="2"
+                          y="1.5"
+                          width="3"
+                          height="9"
+                          rx="0.75"
+                          fill="currentColor"
+                        />
+                        <rect
+                          x="7"
+                          y="1.5"
+                          width="3"
+                          height="9"
+                          rx="0.75"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    }
+                    inactiveIcon={
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                      >
+                        <path
+                          d="M3.5 1.8C3.5 1.49 3.84 1.3 4.1 1.47L10.1 5.67C10.34 5.83 10.34 6.17 10.1 6.33L4.1 10.53C3.84 10.7 3.5 10.51 3.5 10.2V1.8Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    }
+                  />
                 </button>
                 <span className="text-caption leading-[12px] text-fg-muted font-medium tabular-nums">
                   {audioBuffer ? formatSecLabel(trimDurationMs) : '--'}
diff --git a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
index 8dd45df8..0c87b6df 100644
--- a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
@@ -64,7 +64,8 @@ export default function CommonListPickerPage<T>({
   return (
     <div className="flex flex-col h-full min-h-0">
       {/* 헤더 — 뒤로가기: 타이틀 캡하이트급 셰브론 + 타이틀 통짜 버튼 */}
-      <div className="p-[12px]">
+      {/* 48px 고정 — 패널 루트 헤더(PANEL_HEADER_CLASS)와 높이 동기, 전환 시 타이틀 세로 고정 */}
+      <div className="h-[48px] px-[12px] flex items-center shrink-0">
         <button
           type="button"
           onClick={onBack}
diff --git a/src/renderer/components/main/Tool/SettingTool.tsx b/src/renderer/components/main/Tool/SettingTool.tsx
index 41c75d0f..68a805e7 100644
--- a/src/renderer/components/main/Tool/SettingTool.tsx
+++ b/src/renderer/components/main/Tool/SettingTool.tsx
@@ -3,12 +3,12 @@ import { useTranslation } from '@contexts/useTranslation';
 import { useUIStore } from '@stores/useUIStore';
 import FolderIcon from '@assets/svgs/folder.svg';
 import SettingIcon from '@assets/svgs/setting.svg';
-import CloseEyeIcon from '@assets/svgs/close_eye.svg';
-import OpenEyeIcon from '@assets/svgs/open_eye.svg';
 import ChevronDownIcon from '@assets/svgs/chevron-down.svg';
 import TurnIcon from '@assets/svgs/turn_arrow.svg';
 import FloatingTooltip from '../Modal/FloatingTooltip';
 import ListPopup from '../Modal/ListPopup';
+import IconSwap from '../common/IconSwap';
+import EyeToggleIcon from '../common/EyeToggleIcon';
 import { TooltipGroup } from '../Modal/TooltipGroup';
 import { useHistoryStore } from '@stores/data/useHistoryStore';
 import { useKeyStore } from '@stores/data/useKeyStore';
@@ -326,7 +326,7 @@ SettingToolProps) => {
             }
           >
             <Button
-              icon={isOverlayVisible ? <CloseEyeIcon /> : <OpenEyeIcon />}
+              icon={<EyeToggleIcon slashed={isOverlayVisible} />}
               onClick={isObsModeActive ? undefined : toggleOverlay}
               disabled={isObsModeActive}
             />
@@ -338,7 +338,13 @@ SettingToolProps) => {
               }
             >
               <Button
-                icon={isSettingsOpen ? <TurnIcon /> : <SettingIcon />}
+                icon={
+                  <IconSwap
+                    active={isSettingsOpen}
+                    activeIcon={<TurnIcon />}
+                    inactiveIcon={<SettingIcon />}
+                  />
+                }
                 onClick={isSettingsOpen ? onCloseSettings : onOpenSettings}
               />
             </FloatingTooltip>
diff --git a/src/renderer/components/main/common/EyeToggleIcon.tsx b/src/renderer/components/main/common/EyeToggleIcon.tsx
new file mode 100644
index 00000000..0b0dd4b7
--- /dev/null
+++ b/src/renderer/components/main/common/EyeToggleIcon.tsx
@@ -0,0 +1,119 @@
+import React, { useId, useLayoutEffect, useRef } from 'react';
+
+interface EyeToggleIconProps {
+  slashed: boolean;
+}
+
+// tokens.css의 --ui-duration-base / --ui-ease-out과 동기 (WAAPI는 CSS 변수 참조 불가)
+const SLIDE_MS = 180;
+const SLIDE_EASE = 'cubic-bezier(0.16, 1, 0.3, 1)';
+
+// 사선 벡터 (16, 13)의 1.25배 — 갭 라인(굵기 4)의 round cap까지 뷰포트 밖으로
+const SLASH_HIDDEN = 'translate(-20px, -16.25px)';
+const SLASH_DRAWN = 'translate(0px, 0px)';
+const SLASH_ERASED = 'translate(20px, 16.25px)';
+
+// 표시/숨김 토글 눈 아이콘 — 눈은 고정하고 사선만 대각선 슬라이드로 그어짐/지워짐.
+// 사선은 항상 전체 길이로 두고 자기 방향 벡터를 따라 평행이동 —
+// 이동 경로가 사선과 동일 선상이라 드로우처럼 보이고, 뷰포트 밖은 SVG가 클리핑.
+// 그릴 땐 좌상단 밖→제자리, 지울 땐 제자리→우하단 밖 (한 방향 관통 스와이프).
+// 애니메이션 시작 전 FROM 상태를 정적으로 고정하고 TO 상태는 onfinish에서 커밋 —
+// 시작이 한 프레임 늦어도 이전 모습이 유지될 뿐 깜빡임이 없음
+const EyeToggleIcon = ({ slashed }: EyeToggleIconProps) => {
+  const maskId = useId();
+  const slashRef = useRef<SVGLineElement>(null);
+  const gapRef = useRef<SVGLineElement>(null);
+  const mountedRef = useRef(false);
+  const animsRef = useRef<Animation[]>([]);
+
+  useLayoutEffect(() => {
+    const lines = [slashRef.current, gapRef.current].filter(
+      (el): el is SVGLineElement => el !== null,
+    );
+
+    const applyStatic = (transform: string) => {
+      lines.forEach((el) => {
+        el.style.transform = transform;
+      });
+    };
+
+    // 초기 마운트는 정적 상태 그대로 — 드로우 연출 없음
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      applyStatic(slashed ? SLASH_DRAWN : SLASH_HIDDEN);
+      return;
+    }
+
+    animsRef.current.forEach((anim) => anim.cancel());
+    animsRef.current = [];
+
+    const restState = slashed ? SLASH_DRAWN : SLASH_HIDDEN;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      applyStatic(restState);
+      return;
+    }
+
+    const from = slashed ? SLASH_HIDDEN : SLASH_DRAWN;
+    const to = slashed ? SLASH_DRAWN : SLASH_ERASED;
+    applyStatic(from);
+    lines.forEach((el) => {
+      const anim = el.animate([{ transform: from }, { transform: to }], {
+        duration: SLIDE_MS,
+        easing: SLIDE_EASE,
+      });
+      anim.onfinish = () => {
+        el.style.transform = restState;
+      };
+      animsRef.current.push(anim);
+    });
+  }, [slashed]);
+
+  return (
+    <svg
+      className="dmn-eye-toggle"
+      width="18"
+      height="14"
+      viewBox="0 0 18 14"
+      fill="none"
+      aria-hidden="true"
+    >
+      <mask
+        id={maskId}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="18"
+        height="14"
+      >
+        <rect width="18" height="14" fill="white" />
+        <line
+          ref={gapRef}
+          x1="1"
+          y1="0.5"
+          x2="17"
+          y2="13.5"
+          stroke="black"
+          strokeWidth="4"
+          strokeLinecap="round"
+        />
+      </mask>
+      <path
+        mask={`url(#${maskId})`}
+        d="M9.00002 0C6.47502 0 4.45315 1.15 2.98127 2.51875C1.51877 3.87812 0.540649 5.5 0.0750244 6.61562C-0.0281006 6.8625 -0.0281006 7.1375 0.0750244 7.38437C0.540649 8.5 1.51877 10.125 2.98127 11.4812C4.45315 12.8469 6.47502 14 9.00002 14C11.525 14 13.5469 12.85 15.0188 11.4812C16.4813 10.1219 17.4594 8.5 17.925 7.38437C18.0281 7.1375 18.0281 6.8625 17.925 6.61562C17.4594 5.5 16.4813 3.875 15.0188 2.51875C13.5469 1.15312 11.525 0 9.00002 0ZM4.50002 7C4.50002 5.80653 4.97413 4.66193 5.81804 3.81802C6.66196 2.97411 7.80655 2.5 9.00002 2.5C10.1935 2.5 11.3381 2.97411 12.182 3.81802C13.0259 4.66193 13.5 5.80653 13.5 7C13.5 8.19347 13.0259 9.33807 12.182 10.182C11.3381 11.0259 10.1935 11.5 9.00002 11.5C7.80655 11.5 6.66196 11.0259 5.81804 10.182C4.97413 9.33807 4.50002 8.19347 4.50002 7ZM9.00002 5C9.00002 6.10313 8.10315 7 7.00002 7C6.64065 7 6.30315 6.90625 6.0094 6.7375C5.97815 7.07812 6.00627 7.42812 6.10002 7.775C6.52815 9.375 8.17502 10.325 9.77502 9.89688C11.375 9.46875 12.325 7.82188 11.8969 6.22188C11.5156 4.79375 10.1625 3.88438 8.73752 4.00938C8.90315 4.3 9.00002 4.6375 9.00002 5Z"
+        fill="currentColor"
+      />
+      <line
+        ref={slashRef}
+        x1="1"
+        y1="0.5"
+        x2="17"
+        y2="13.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+};
+
+export default EyeToggleIcon;
diff --git a/src/renderer/components/main/common/IconSwap.tsx b/src/renderer/components/main/common/IconSwap.tsx
new file mode 100644
index 00000000..2aaf4959
--- /dev/null
+++ b/src/renderer/components/main/common/IconSwap.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface IconSwapProps {
+  active: boolean;
+  activeIcon: React.ReactNode;
+  inactiveIcon: React.ReactNode;
+}
+
+// 상태 토글 버튼의 아이콘 크로스페이드 — 두 아이콘을 겹쳐두고 CSS로 스왑
+// 스타일은 main.css의 .dmn-icon-swap, 다이얼은 tokens.css의 --ui-icon-swap-*
+const IconSwap = ({ active, activeIcon, inactiveIcon }: IconSwapProps) => (
+  <span
+    className="dmn-icon-swap"
+    data-state={active ? 'on' : 'off'}
+    aria-hidden="true"
+  >
+    <span data-icon="on">{activeIcon}</span>
+    <span data-icon="off">{inactiveIcon}</span>
+  </span>
+);
+
+export default IconSwap;
diff --git a/src/renderer/styles/main.css b/src/renderer/styles/main.css
index 63cab15d..31f755ac 100644
--- a/src/renderer/styles/main.css
+++ b/src/renderer/styles/main.css
@@ -166,6 +166,77 @@ body.dmn-custom-cursor * {
   filter: blur(0);
 }
 
+/* 아이콘 스왑 — 토글 버튼의 두 SVG를 겹쳐두고 크로스페이드.
+   나가는 아이콘은 줄며 블러 아웃, 들어오는 아이콘은 커지며 선명해짐.
+   will-change는 의도적으로 생략 — 레이어 리스트처럼 수십 개 깔리는 곳에서
+   컴포지터 레이어 남발 방지 */
+.dmn-icon-swap {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+}
+
+.dmn-icon-swap > [data-icon] {
+  grid-area: 1 / 1;
+  display: flex;
+  /* 보이는 상태를 명시 — filter: none에서 시작하면 WKWebView가 보간을 못 함 */
+  opacity: 1;
+  filter: blur(0);
+  transform: scale(1);
+  transition: opacity var(--ui-icon-swap-duration) var(--ui-icon-swap-ease),
+    filter var(--ui-icon-swap-duration) var(--ui-icon-swap-ease),
+    transform var(--ui-icon-swap-duration) var(--ui-icon-swap-ease);
+}
+
+.dmn-icon-swap[data-state='on'] > [data-icon='off'],
+.dmn-icon-swap[data-state='off'] > [data-icon='on'] {
+  opacity: 0;
+  filter: blur(var(--ui-icon-swap-blur));
+  transform: scale(var(--ui-icon-swap-scale));
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dmn-icon-swap > [data-icon] {
+    transition: none;
+  }
+}
+
+/* 눈 토글의 사선 드로우 모션은 EyeToggleIcon.tsx에서 WAAPI로 처리 —
+   드로우·이레이즈 모두 좌상→우하 한 방향 관통 스와이프 */
+
+/* 패널 토글 — 하나의 지속 버튼이 닫힘(글래스 칩) ↔ 열림(베어 아이콘)으로 모프.
+   칩 opacity 페이드는 PanelToggleButton.tsx에서 WAAPI로 처리.
+   아이콘 구분선은 슬라이드, 디테일 라인은 페이드 */
+.dmn-panel-toggle-divider {
+  /* 닫힘: 구분선이 x=12 위치 */
+  transform: translateX(2px);
+  transition: transform var(--ui-duration-base) var(--ui-ease-out);
+}
+
+.dmn-panel-toggle[data-open='true'] .dmn-panel-toggle-divider {
+  transform: translateX(0);
+}
+
+.dmn-panel-toggle-lines {
+  opacity: 0;
+  transform: translateX(-1.5px);
+  transition: opacity var(--ui-duration-base) var(--ui-ease-out),
+    transform var(--ui-duration-base) var(--ui-ease-out);
+}
+
+.dmn-panel-toggle[data-open='true'] .dmn-panel-toggle-lines {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dmn-panel-toggle-divider,
+  .dmn-panel-toggle-lines {
+    transition: none;
+  }
+}
+
 @keyframes tooltipFadeIn {
   from {
     opacity: 0;
diff --git a/src/renderer/styles/tokens.css b/src/renderer/styles/tokens.css
index c68905d8..8df42f7d 100644
--- a/src/renderer/styles/tokens.css
+++ b/src/renderer/styles/tokens.css
@@ -90,6 +90,13 @@
   --ui-page-slide-distance: 8px;
   --ui-page-blur: 3px;
 
+  /* 아이콘 스왑 — 토글 버튼의 SVG 교체 크로스페이드 다이얼
+     효과 값은 Transitions.dev Icon swap 레퍼런스 그대로, 타이밍만 프로젝트 기준 */
+  --ui-icon-swap-duration: var(--ui-duration-base);
+  --ui-icon-swap-ease: ease-in-out;
+  --ui-icon-swap-blur: 2px;
+  --ui-icon-swap-scale: 0.25;
+
   /* 그림자 — 보더 없는 표면 분리의 핵심. 2/3은 인셋 링+상단 하이라이트로 재질 립 포함 */
   --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
   --ui-shadow-2: inset 0 0 0 1px rgba(255, 255, 255, 0.05),

From 6224bfe25bbd4cf91baa44f5f0da5a636bfa4472 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 00:52:14 +0900
Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=ED=94=8C=EB=9F=AC=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=84=A4=EC=A0=95=20=ED=8C=A8=EB=84=90=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=C2=B7=ED=91=B8=ED=84=B0=20=EC=A0=95=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 두 줄 헤더를 한 줄로 — 타이틀 옆에 연한 색 플러그인 id 인라인
  (배치 패널의 카운트 표기와 동일 관례, 긴 id는 truncate + 툴팁)
- 하단 취소/저장 2버튼을 풀폭 저장 CTA 하나로 교체 — 취소는
  우상단 패널 닫기가 담당 (기존과 동일하게 설정 롤백 후 닫힘).
  구분선 대신 여백으로 분리, 모달 확인 버튼과 같은 액센트 스타일
- 설정 폼을 요소 선택 패널과 동일하게 PropertySection 카드로 래핑
- 미사용이 된 handlePluginSettingsPanelCancel prop 정리
---
 .../components/main/Grid/PropertiesPanel.tsx  |  1 -
 .../PluginSettingsPanelView.tsx               | 54 +++++++++----------
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/src/renderer/components/main/Grid/PropertiesPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel.tsx
index 566af37e..c0570812 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel.tsx
@@ -2593,7 +2593,6 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           pluginPanelSettings={pluginPanelSettings}
           handlePluginSettingsPanelChange={handlePluginSettingsPanelChange}
           handlePluginSettingsPanelConfirm={handlePluginSettingsPanelConfirm}
-          handlePluginSettingsPanelCancel={handlePluginSettingsPanelCancel}
           setPluginScrollRef={setPluginScrollRef}
           renderPluginSettingsForm={renderPluginSettingsForm}
           t={t}
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
index 8931f98a..b0b882e8 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
@@ -6,6 +6,7 @@ import type {
 } from '@src/types/plugin/api';
 import type { PluginSettingsPanelPayload } from '@stores/grid/usePropertiesPanelStore';
 import { PANEL_ROOT_CLASS, PANEL_HEADER_CLASS } from './panelChrome';
+import { PropertySection } from './PropertyInputs';
 
 interface PluginSettingsPanelViewProps {
   setPanelElement: (el: HTMLDivElement | null) => void;
@@ -16,7 +17,6 @@ interface PluginSettingsPanelViewProps {
     value: PluginSettingValue,
   ) => void;
   handlePluginSettingsPanelConfirm: () => void;
-  handlePluginSettingsPanelCancel: () => void;
   setPluginScrollRef: (node: HTMLDivElement | null) => void;
   renderPluginSettingsForm: (
     schema: Record<string, PluginSettingSchema> | undefined,
@@ -35,7 +35,6 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
   pluginPanelSettings,
   handlePluginSettingsPanelChange,
   handlePluginSettingsPanelConfirm,
-  handlePluginSettingsPanelCancel,
   setPluginScrollRef,
   renderPluginSettingsForm,
   t,
@@ -43,11 +42,15 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
       <div className={PANEL_HEADER_CLASS}>
-        <div className="flex flex-col gap-[2px]">
-          <span className="text-fg text-style-2 leading-none">
+        {/* 한 줄 헤더 — 타이틀 + 연한 플러그인 id (배치 패널의 카운트 표기와 동일 관례) */}
+        <div className="flex items-center gap-[8px] min-w-0">
+          <span className="text-fg text-style-2 leading-none flex-shrink-0">
             {t('propertiesPanel.pluginSettings') || '플러그인 설정'}
           </span>
-          <span className="text-fg-faint text-body truncate max-w-[150px]">
+          <span
+            className="text-fg-faint text-body truncate max-w-[100px]"
+            title={pluginSettingsPanel.pluginId}
+          >
             {pluginSettingsPanel.pluginId}
           </span>
         </div>
@@ -58,31 +61,28 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
           className="properties-panel-overlay-viewport"
         >
           <div className="px-[12px] pb-[12px]">
-            {renderPluginSettingsForm(
-              pluginSettingsPanel.definition.settings,
-              pluginPanelSettings,
-              pluginSettingsPanel.definition.messages,
-              `plugin-settings-${pluginSettingsPanel.pluginId}`,
-              handlePluginSettingsPanelChange,
-            )}
+            {/* 요소 선택 패널과 동일한 섹션 카드로 폼을 감쌈 */}
+            <PropertySection>
+              {renderPluginSettingsForm(
+                pluginSettingsPanel.definition.settings,
+                pluginPanelSettings,
+                pluginSettingsPanel.definition.messages,
+                `plugin-settings-${pluginSettingsPanel.pluginId}`,
+                handlePluginSettingsPanelChange,
+                { wrap: false },
+              )}
+            </PropertySection>
           </div>
         </div>
       </div>
-      <div className="border-t border-line p-[12px]">
-        <div className="flex gap-[8px]">
-          <button
-            onClick={handlePluginSettingsPanelCancel}
-            className="flex-1 h-[30px] bg-fill rounded-lg text-style-3 text-fg hover:bg-fill-hover transition-colors"
-          >
-            {t('common.cancel') || '취소'}
-          </button>
-          <button
-            onClick={handlePluginSettingsPanelConfirm}
-            className="flex-1 h-[30px] bg-fill rounded-lg text-style-3 text-fg hover:bg-fill-hover transition-colors"
-          >
-            {t('common.save') || '저장'}
-          </button>
-        </div>
+      {/* 단일 저장 CTA — 취소는 우상단 패널 토글(X)이 담당 */}
+      <div className="p-[12px] shrink-0">
+        <button
+          onClick={handlePluginSettingsPanelConfirm}
+          className="w-full h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
+        >
+          {t('common.save') || '저장'}
+        </button>
       </div>
     </div>
   );

From cba7a68a7133a14625fa50b60dac490abab8d3b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 02:24:33 +0900
Subject: [PATCH 07/17] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=20=EB=93=B1?=
 =?UTF-8?q?=EC=9E=A5=20=EC=8B=9C=20=EA=B8=80=EB=9E=98=EC=8A=A4=20=EB=B8=94?=
 =?UTF-8?q?=EB=9F=AC=EA=B0=80=20=EC=A3=BD=EC=97=88=EB=8B=A4=20=ED=8A=80?=
 =?UTF-8?q?=EB=8A=94=20=EA=B9=9C=EB=B9=A1=EC=9E=84=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

opacity를 애니메이션하는 래퍼가 backdrop root가 되어 페이드 동안
자손 글래스의 backdrop-filter가 배경을 샘플링하지 못하고, 종료
순간 블러가 한 번에 복구되며 반투명 깜빡임으로 보였다. 등장
애니메이션을 래퍼 대신 콘텐츠 루트(> *)로 옮겨 블러를 소유한
엘리먼트 자신이 페이드하도록 변경
---
 src/renderer/components/main/Modal/Modal.tsx |  5 +++--
 src/renderer/styles/main.css                 | 15 +++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/main/Modal/Modal.tsx b/src/renderer/components/main/Modal/Modal.tsx
index a936ef4e..ec752f52 100644
--- a/src/renderer/components/main/Modal/Modal.tsx
+++ b/src/renderer/components/main/Modal/Modal.tsx
@@ -45,9 +45,10 @@ const Modal = ({ onClick, children, animate = true }: ModalProps) => {
   // 배경 블러는 모달의 조상이 아니라 형제 언더레이가 소유해야 함 —
   // 조상이 backdrop-filter를 가지면 backdrop root가 생겨 모달 글래스의
   // 블러가 WebKit에서 배경을 샘플링하지 못함. 형제 레이어는 정상 합성됨
-  // 래퍼 opacity 애니메이션도 같은 이유로 금지 — opacity < 1인 조상이
+  // 조상 opacity 애니메이션도 같은 이유로 금지 — opacity < 1인 조상이
   // backdrop root가 되어 페이드 동안 블러가 죽었다가 끝나는 순간 튐.
-  // 등장 모션은 스크림(틴트+블러 키프레임)과 콘텐츠가 각자 소유한다
+  // 그래서 animate-modal-scale은 래퍼가 아닌 직계 자식(> *)에 적용되고,
+  // 등장 모션은 스크림(틴트+블러 키프레임)과 콘텐츠 루트가 각자 소유한다
   return createPortal(
     <div
       data-dmn-modal-backdrop="true"
diff --git a/src/renderer/styles/main.css b/src/renderer/styles/main.css
index 31f755ac..f4bd88ec 100644
--- a/src/renderer/styles/main.css
+++ b/src/renderer/styles/main.css
@@ -253,20 +253,19 @@ body.dmn-custom-cursor * {
   animation: tooltipFadeIn var(--ui-duration-fast) var(--ui-ease-out);
 }
 
+/* 종료 상태는 클래스 자연값 — to 블록 생략 */
 @keyframes modalScale {
   from {
     transform: scale(0.97);
     opacity: 0;
   }
-
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
 }
 
-.animate-modal-scale {
-  animation: modalScale var(--ui-duration-base) var(--ui-ease-out) forwards;
+/* 래퍼가 아닌 콘텐츠 루트가 직접 애니메이션 — opacity가 1 미만인 조상은
+   backdrop root가 되어 글래스 블러가 죽었다가 애니메이션이 끝나는 순간 튐.
+   블러 소유 엘리먼트 자신의 페이드는 블러를 살린 채 진행됨 (Dropdown 참고) */
+.animate-modal-scale > * {
+  animation: modalScale var(--ui-duration-base) var(--ui-ease-out) both;
 }
 
 /* 틴트와 블러를 한 키프레임에서 보간 — 종료 상태는 클래스 자연값 */
@@ -455,7 +454,7 @@ body.dmn-custom-cursor * {
 /* 모션 축소 설정 존중 — 이동은 제거, 표시 자체는 유지 */
 @media (prefers-reduced-motion: reduce) {
   .tooltip-fade-in,
-  .animate-modal-scale,
+  .animate-modal-scale > *,
   .animate-modal-scrim,
   .view-enter,
   .view-fade {

From df881bafbae3090c24bee9c758b8edb49cdedfe2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:17:50 +0900
Subject: [PATCH 08/17] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B4=EB=94=A9=20?=
 =?UTF-8?q?=ED=86=A0=ED=81=B0=204=EB=8B=A8=20=ED=99=95=EC=9E=A5=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=B9=B4=EB=93=9C=20=EB=A0=88=EC=8B=9C=ED=94=BC=20?=
 =?UTF-8?q?=EA=B3=B5=EC=9C=A0=20=EB=AA=A8=EB=93=88=20=EB=8F=84=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모달 셸 반경 14 → 22, 팝업 셸 14 신설 — 동심 규칙(바깥 반경 = 안쪽 반경 + 간격) 정착
- 섹션 카드·라벨·폼 행 클래스를 cardRecipes 단일 소스로 추출해 React 패널과
  플러그인 HTML 생성기가 동일한 카드 구조를 공유
---
 src/renderer/styles/tokens.css    |  7 +++++--
 src/renderer/utils/cardRecipes.ts | 20 ++++++++++++++++++++
 tailwind.config.js                | 26 +-------------------------
 3 files changed, 26 insertions(+), 27 deletions(-)
 create mode 100644 src/renderer/utils/cardRecipes.ts

diff --git a/src/renderer/styles/tokens.css b/src/renderer/styles/tokens.css
index 8df42f7d..1af89a9e 100644
--- a/src/renderer/styles/tokens.css
+++ b/src/renderer/styles/tokens.css
@@ -72,10 +72,13 @@
   --ui-warning: #f0b429;
   --ui-warning-muted: rgba(240, 180, 41, 0.14);
 
-  /* 라운딩 — 3단: 표면 안 요소 6 < 1차 표면 10 < 모달 셸 14 */
+  /* 라운딩 — 4단: 표면 안 요소 6 < 1차 표면 10 < 팝업 셸 14 < 모달 셸 16 */
+  /* 동심 규칙은 코너 밀착 중첩에만 적용 (팝업 14 = 6 + p-8), 컨트롤은 고정 티어 */
+  /* 모달 16 = macOS 시스템 윈도우 크롬 실측(≈16pt) 매칭 — 창보다 둥글면 위계 역전 */
   --ui-radius-inner: 6px;
   --ui-radius-surface: 10px;
-  --ui-radius-modal: 14px;
+  --ui-radius-popup: 14px;
+  --ui-radius-modal: 16px;
 
   /* 모션 */
   --ui-duration-fast: 120ms;
diff --git a/src/renderer/utils/cardRecipes.ts b/src/renderer/utils/cardRecipes.ts
new file mode 100644
index 00000000..7037d333
--- /dev/null
+++ b/src/renderer/utils/cardRecipes.ts
@@ -0,0 +1,20 @@
+// 카드 그룹 시스템 단일 소스 — 패널(PropertyInputs)과 플러그인 문자열 빌더
+// (defineSettings/defineElement/pluginComponents)가 같은 클래스를 공유한다.
+// 주의: Tailwind가 클래스를 감지하도록 항상 완전한 클래스 문자열로 유지할 것
+
+// 섹션 래퍼 — 라벨 + 카드를 6px 간격으로 묶음
+export const SECTION_WRAPPER_CLASS = 'flex flex-col gap-[6px]';
+
+// 섹션 라벨 — 카드 위 faint 서브헤더
+export const SECTION_LABEL_CLASS = 'text-fg-faint text-body text-left px-[2px]';
+
+// 그룹 카드 — 관련 행을 하나의 면으로 묶는 컨테이너
+export const SECTION_CARD_CLASS =
+  'bg-fill-faint rounded-surface px-[10px] py-[4px] flex flex-col';
+
+// 폼 행 — 행이 수직 공간을 소유 (고정 min-h + 센터 정렬)
+export const FORM_ROW_CLASS =
+  'flex justify-between items-center w-full min-h-[32px]';
+
+// 행 라벨
+export const FORM_LABEL_CLASS = 'text-fg-muted text-label';
diff --git a/tailwind.config.js b/tailwind.config.js
index 578de8a0..dbdad48d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,7 @@ module.exports = {
       borderRadius: {
         md: 'var(--ui-radius-inner)',
         surface: 'var(--ui-radius-surface)',
+        popup: 'var(--ui-radius-popup)',
         modal: 'var(--ui-radius-modal)',
       },
       colors: {
@@ -132,31 +133,6 @@ module.exports = {
           letterSpacing: '-0.014em',
           fontWeight: '700',
         },
-        // 레거시 별칭 — 마이그레이션 완료 후 제거
-        '.text-style-1': {
-          fontSize: '12px',
-          lineHeight: '18px',
-          letterSpacing: '0',
-          fontWeight: '500',
-        },
-        '.text-style-2': {
-          fontSize: '13px',
-          lineHeight: '18px',
-          letterSpacing: '0',
-          fontWeight: '500',
-        },
-        '.text-style-3': {
-          fontSize: '14px',
-          lineHeight: '20px',
-          letterSpacing: '0',
-          fontWeight: '500',
-        },
-        '.text-style-4': {
-          fontSize: '14px',
-          lineHeight: '20px',
-          letterSpacing: '0',
-          fontWeight: '500',
-        },
       });
     },
   ],

From c4f38f41eccb4e6886cf1ca382fccaf6b2780550 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:18:09 +0900
Subject: [PATCH 09/17] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=C2=B7=EB=8B=A4?=
 =?UTF-8?q?=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=C2=B7=ED=94=BC=EC=BB=A4=20?=
 =?UTF-8?q?=EC=A7=80=EC=98=A4=EB=A9=94=ED=8A=B8=EB=A6=AC=20=EC=A0=95?=
 =?UTF-8?q?=EB=B9=84=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=B3=B4?=
 =?UTF-8?q?=EA=B0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 카드 기준 역산 지오메트리 적용: 모달 셸 p-12 + 반경 22, 피커류는 rounded-popup 유지
- NoteSetting을 카드 구조(PropertySection/PropertyRow)로 개편, 수직 리듬 12로 단일화
- Modal에 스크린리더 라벨(ariaLabel)과 닫힘 시 포커스 복원 추가, 로케일에 다이얼로그 라벨 키 보강
- 컨트롤 높이 23px로 통일(설정 칩·아이콘 버튼, 드롭다운 행·트리거), 라운딩을 rounded-surface/md 토큰으로 정리
- 카운터 애니메이션 에디터 스케일 입력 범위 명시(0-9999)
- 실험실(Laboratory)과 legacy Counter/KeySetting 모달 제거
---
 .../main/Modal/ManagerModalLayout.tsx         |  18 +-
 src/renderer/components/main/Modal/Modal.tsx  |  52 +-
 .../main/Modal/content/dialogs/Laboratory.tsx | 197 --------
 .../content/dialogs/PluginDataDeleteModal.tsx |  31 +-
 .../content/dialogs/UnifiedKeySetting.tsx     |  40 +-
 .../Modal/content/dialogs/UpdateModal.tsx     |  43 +-
 .../editors/CounterAnimationEditorModal.tsx   |  10 +-
 .../Modal/content/editors/TabCssModal.tsx     |  36 +-
 .../Modal/content/editors/TabNameModal.tsx    |  37 +-
 .../Modal/content/legacy/CounterSetting.tsx   | 469 ------------------
 .../main/Modal/content/legacy/KeySetting.tsx  | 351 -------------
 .../content/managers/PluginManagerModal.tsx   |   7 +-
 .../Modal/content/managers/SoundTrimModal.tsx |   8 +-
 .../Modal/content/pickers/ColorPicker.tsx     |  18 +-
 .../content/pickers/CommonListPickerPage.tsx  |   2 +-
 .../pickers/CounterAnimationPicker.tsx        |  11 +-
 .../main/Modal/content/pickers/FontPicker.tsx |  17 +-
 .../Modal/content/pickers/ImagePicker.tsx     |   2 +-
 .../main/Modal/content/pickers/Palette.tsx    |   4 +-
 .../Modal/content/pickers/SoundPicker.tsx     |  13 +-
 .../content/pickers/WebFontInputModal.tsx     |  11 +-
 .../Modal/content/pickers/pickerRowClass.ts   |  16 +-
 .../content/settings/CounterTabContent.tsx    | 268 +++++-----
 .../Modal/content/settings/KeyTabContent.tsx  | 233 ++++-----
 .../Modal/content/settings/NoteSetting.tsx    | 318 ++++++------
 .../Modal/content/settings/NoteTabContent.tsx | 165 +++---
 .../settings/ShortcutSettingsModal.tsx        |  10 +-
 src/renderer/components/main/Settings.tsx     |  44 +-
 .../components/main/common/Dropdown.tsx       |  10 +-
 src/renderer/locales/en.json                  |   3 +-
 src/renderer/locales/ko.json                  |   3 +-
 src/renderer/locales/ru.json                  |   3 +-
 src/renderer/locales/zh-Hant.json             |   3 +-
 src/renderer/locales/zh-cn.json               |   3 +-
 34 files changed, 752 insertions(+), 1704 deletions(-)
 delete mode 100644 src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx
 delete mode 100644 src/renderer/components/main/Modal/content/legacy/CounterSetting.tsx
 delete mode 100644 src/renderer/components/main/Modal/content/legacy/KeySetting.tsx

diff --git a/src/renderer/components/main/Modal/ManagerModalLayout.tsx b/src/renderer/components/main/Modal/ManagerModalLayout.tsx
index 68631b36..8d613341 100644
--- a/src/renderer/components/main/Modal/ManagerModalLayout.tsx
+++ b/src/renderer/components/main/Modal/ManagerModalLayout.tsx
@@ -22,6 +22,8 @@ interface ManagerModalLayoutProps {
   extra?: ReactNode;
   /** 콘텐츠 변경 시 높이/스크롤 재계산 트리거 의존성 */
   contentDeps?: unknown[];
+  /** 스크린리더용 다이얼로그 이름 */
+  ariaLabel?: string;
 }
 
 const ManagerModalLayout = ({
@@ -32,6 +34,7 @@ const ManagerModalLayout = ({
   footer,
   extra,
   contentDeps = [],
+  ariaLabel,
 }: ManagerModalLayoutProps) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [containerHeight, setContainerHeight] = useState<number | null>(null);
@@ -76,18 +79,18 @@ const ManagerModalLayout = ({
   if (!isOpen) return null;
 
   return (
-    <Modal onClick={onClose}>
+    <Modal onClick={onClose} ariaLabel={ariaLabel}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] pr-[6px]"
+        className="flex flex-col min-w-[264px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[14px]"
         onClick={(e) => e.stopPropagation()}
       >
         {/* 탭 영역 */}
-        {tabs && <div className="pr-[14px]">{tabs}</div>}
+        {tabs && <div className="mb-[12px]">{tabs}</div>}
 
         {/* 스크롤 영역 */}
         <div
           ref={scrollRef}
-          className="modal-content-scroll dmn-scroll-fade pr-[14px]"
+          className="modal-content-scroll dmn-scroll-fade"
           style={{
             height: containerHeight !== null ? `${containerHeight}px` : 'auto',
             maxHeight: `${MAX_SCROLL_HEIGHT}px`,
@@ -98,16 +101,13 @@ const ManagerModalLayout = ({
             willChange: 'scroll-position',
           }}
         >
-          <div ref={contentRef} className="flex flex-col gap-[19px] py-[5px]">
+          <div ref={contentRef} className="flex flex-col gap-[12px] py-[5px]">
             {children}
           </div>
         </div>
 
-        {/* 구분선 */}
-        <div className="h-px bg-line my-[20px] -ml-[20px] -mr-[6px]" />
-
         {/* 하단 버튼 */}
-        <div className="flex items-center gap-[8px] pr-[14px]">{footer}</div>
+        <div className="flex items-center gap-[8px] mt-[12px]">{footer}</div>
 
         {/* 추가 콘텐츠 (로딩/에러 등) */}
         {extra}
diff --git a/src/renderer/components/main/Modal/Modal.tsx b/src/renderer/components/main/Modal/Modal.tsx
index ec752f52..4cceb415 100644
--- a/src/renderer/components/main/Modal/Modal.tsx
+++ b/src/renderer/components/main/Modal/Modal.tsx
@@ -5,12 +5,24 @@ interface ModalProps {
   onClick?: () => void;
   children: React.ReactNode;
   animate?: boolean;
+  /** 스크린리더용 다이얼로그 이름 */
+  ariaLabel?: string;
 }
 
-const Modal = ({ onClick, children, animate = true }: ModalProps) => {
+const Modal = ({
+  onClick,
+  children,
+  animate = true,
+  ariaLabel,
+}: ModalProps) => {
   const scrimAnimClass = animate ? 'animate-modal-scrim' : '';
   const contentAnimClass = animate ? 'animate-modal-scale' : '';
   const closeFromBackdropRef = useRef(false);
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const onCloseRef = useRef(onClick);
+  useEffect(() => {
+    onCloseRef.current = onClick;
+  });
 
   useEffect(() => {
     const reset = () => {
@@ -24,6 +36,39 @@ const Modal = ({ onClick, children, animate = true }: ModalProps) => {
     };
   }, []);
 
+  // 닫힐 때 열기 전 포커스 복원 (요소가 아직 문서에 연결된 경우만)
+  useEffect(() => {
+    const prevFocused = document.activeElement as HTMLElement | null;
+    return () => {
+      if (prevFocused && prevFocused.isConnected) {
+        prevFocused.focus();
+      }
+    };
+  }, []);
+
+  // Escape 닫기 — 레이어 소유권: 위 겹(팝업·서브메뉴·플로팅 피커)이 있으면 양보하고
+  // 최상위 모달(마지막 마운트 백드롭)만 소비. 한 번에 한 겹씩 닫힘
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || e.defaultPrevented) return;
+      // 키 리스닝 중엔 양보 — Escape는 리스닝 취소로 예약됨 (raw input 레이스 포함)
+      if (window.__dmn_isKeyListening) return;
+      // 서브메뉴·플러그인 드롭다운이 위에 떠 있으면 그쪽이 소유
+      if (document.querySelector('[data-dmn-popup-submenu="true"]')) return;
+      // FloatingPopup 계열(피커·컨텍스트 메뉴)이 위에 떠 있으면 그쪽이 소유
+      if (document.querySelector('[role="dialog"][aria-modal="false"]')) return;
+      // 모달 스택에서 최상위만 소비
+      const backdrops = document.querySelectorAll(
+        '[data-dmn-modal-backdrop="true"]',
+      );
+      if (backdrops[backdrops.length - 1] !== backdropRef.current) return;
+      e.preventDefault();
+      onCloseRef.current?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, []);
+
   const handleBackdropPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
     // only mark if pointer started directly on the backdrop
     closeFromBackdropRef.current = e.target === e.currentTarget;
@@ -51,7 +96,11 @@ const Modal = ({ onClick, children, animate = true }: ModalProps) => {
   // 등장 모션은 스크림(틴트+블러 키프레임)과 콘텐츠 루트가 각자 소유한다
   return createPortal(
     <div
+      ref={backdropRef}
       data-dmn-modal-backdrop="true"
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
       className="fixed top-[31px] bottom-[61px] left-[1px] right-[1px] flex items-center justify-center z-50"
       onPointerDown={handleBackdropPointerDown}
       onClick={handleBackdropClick}
@@ -59,6 +108,7 @@ const Modal = ({ onClick, children, animate = true }: ModalProps) => {
     >
       {/* 스크림 언더레이 — 클릭은 래퍼로 통과 */}
       <div
+        aria-hidden="true"
         className={`absolute inset-0 bg-black/60 backdrop-blur-[2px] pointer-events-none ${scrimAnimClass}`}
       />
       <div className={`relative ${contentAnimClass}`}>{children}</div>
diff --git a/src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx b/src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx
deleted file mode 100644
index 1562d333..00000000
--- a/src/renderer/components/main/Modal/content/dialogs/Laboratory.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { useState } from 'react';
-import Modal from '../../Modal';
-import Checkbox from '@components/main/common/Checkbox';
-import { useTranslation } from '@contexts/useTranslation';
-
-interface LaboratoryProps {
-  delayEnabled: boolean;
-  thresholdMs: number;
-  minLengthPx: number;
-  keyDisplayDelayMs: number;
-  trackHeight: number;
-  speed: number;
-  onSave: (payload: {
-    delayedNoteEnabled: boolean;
-    shortNoteThresholdMs: number;
-    shortNoteMinLengthPx: number;
-    keyDisplayDelayMs: number;
-  }) => Promise<void> | void;
-  onClose: () => void;
-}
-
-const LaboratoryModal = ({
-  delayEnabled,
-  thresholdMs,
-  minLengthPx,
-  keyDisplayDelayMs,
-  trackHeight,
-  speed,
-  onSave,
-  onClose,
-}: LaboratoryProps) => {
-  const { t } = useTranslation();
-  const [enforceShort, setEnforceShort] = useState(!!delayEnabled);
-  // store as strings so the user can clear the input while typing
-  const [threshold, setThreshold] = useState(String(thresholdMs ?? 120));
-  const [minimum, setMinimum] = useState(String(minLengthPx ?? 10));
-  const [keyDelay, setKeyDelay] = useState(String(keyDisplayDelayMs ?? 0));
-
-  // 자동 계산된 키 딜레이 값 (노트가 키에 도달하는 시간)
-  const parsedThreshold = (() => {
-    const value = Number(threshold);
-    if (!Number.isFinite(value) || value < 0) return 0;
-    return Math.min(value, 2000);
-  })();
-
-  const calculatedDelay = (() => {
-    if (!speed || speed <= 0) return 0;
-    const travelDelay = Math.round((trackHeight / speed) * 1000);
-    const shortNoteDelay = enforceShort ? parsedThreshold : 0;
-    return travelDelay + shortNoteDelay;
-  })();
-
-  const handleAutoCalculate = () => {
-    setKeyDelay(String(calculatedDelay));
-  };
-
-  const handleSave = async () => {
-    const sanitizedThreshold = Math.max(
-      0,
-      Math.min(parseInt(String(threshold), 10) || 0, 2000),
-    );
-    const sanitizedMinimum = Math.max(
-      1,
-      Math.min(parseInt(String(minimum), 10) || 1, 100),
-    );
-    const sanitizedKeyDelay = Math.max(
-      0,
-      Math.min(parseInt(String(keyDelay), 10) || 0, 5000),
-    );
-
-    try {
-      await onSave({
-        delayedNoteEnabled: enforceShort,
-        shortNoteThresholdMs: sanitizedThreshold,
-        shortNoteMinLengthPx: sanitizedMinimum,
-        keyDisplayDelayMs: sanitizedKeyDelay,
-      });
-    } finally {
-      onClose();
-    }
-  };
-
-  return (
-    <Modal onClick={onClose}>
-      <div
-        className="flex flex-col items-center justify-center p-[20px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 gap-[16px]"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('laboratory.delayToggle')}
-          </p>
-          <Checkbox
-            checked={enforceShort}
-            onChange={() => setEnforceShort((prev) => !prev)}
-          />
-        </div>
-
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('laboratory.minLength')}
-          </p>
-          <input
-            type="number"
-            min={1}
-            max={100}
-            value={minimum}
-            onChange={(e) => setMinimum(e.target.value)}
-            onBlur={() => {
-              const sanitized = Math.max(
-                1,
-                Math.min(Number(minimum) || 1, 100),
-              );
-              setMinimum(String(sanitized));
-            }}
-            className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
-          />
-        </div>
-
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('laboratory.threshold')}
-          </p>
-          <input
-            type="number"
-            min={0}
-            max={2000}
-            value={threshold}
-            onChange={(e) => setThreshold(e.target.value)}
-            onBlur={() => {
-              const sanitized = Math.max(
-                0,
-                Math.min(Number(threshold) || 0, 2000),
-              );
-              setThreshold(String(sanitized));
-            }}
-            className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
-          />
-        </div>
-
-        {/* 구분선 */}
-        <div className="w-full h-[1px] bg-line" />
-
-        {/* 키 딜레이 설정 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">{t('laboratory.keyDelay')}</p>
-          <div className="flex items-center gap-[8px]">
-            <input
-              type="number"
-              min={0}
-              max={5000}
-              value={keyDelay}
-              onChange={(e) => setKeyDelay(e.target.value)}
-              onBlur={() => {
-                const sanitized = Math.max(
-                  0,
-                  Math.min(Number(keyDelay) || 0, 5000),
-                );
-                setKeyDelay(String(sanitized));
-              }}
-              className="text-center w-[55px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
-            />
-          </div>
-        </div>
-
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-faint text-style-4">
-            {t('laboratory.keyDelayAuto', { value: calculatedDelay })}
-          </p>
-          <button
-            onClick={handleAutoCalculate}
-            className="px-[10px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-md text-fg text-style-4"
-          >
-            {t('laboratory.autoCalc')}
-          </button>
-        </div>
-
-        <div className="flex gap-[8px]">
-          <button
-            onClick={handleSave}
-            className="w-[150px] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
-          >
-            {t('laboratory.save')}
-          </button>
-          <button
-            onClick={onClose}
-            className="w-[75px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
-          >
-            {t('laboratory.cancel')}
-          </button>
-        </div>
-      </div>
-    </Modal>
-  );
-};
-
-export default LaboratoryModal;
diff --git a/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx b/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
index 92bfb244..d28bdfa1 100644
--- a/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/PluginDataDeleteModal.tsx
@@ -21,41 +21,38 @@ export function PluginDataDeleteModal({
   if (!isOpen) return null;
 
   return (
-    <Modal onClick={onClose}>
+    <Modal onClick={onClose} ariaLabel={t('settings.pluginDataDeleteTitle')}>
       <div
-        className="flex flex-col w-[380px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] gap-[16px]"
+        className="flex flex-col w-[380px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[14px] gap-[12px]"
         onClick={(event) => event.stopPropagation()}
       >
-        <div className="flex flex-col gap-[8px]">
-          <span className="text-style-3 text-fg !leading-[1.5]">
-            {t('settings.pluginDataDeleteMessage', { name: pluginName })}
-          </span>
-        </div>
+        <span className="text-label text-fg !leading-[1.5]">
+          {t('settings.pluginDataDeleteMessage', { name: pluginName })}
+        </span>
 
-        <div className="flex flex-col gap-[8px] p-[12px] bg-inset rounded-[8px]">
-          <div className="flex items-start gap-[8px]">
-            <span className="text-style-3 text-warning mt-[6px]">⚠️</span>
-            <span className="text-style-2 text-fg !leading-[1.2]">
-              {t('settings.pluginDataDeleteWarning')}
-            </span>
-          </div>
+        {/* 경고 카드 */}
+        <div className="flex items-start gap-[8px] p-[12px] bg-fill-faint rounded-surface">
+          <span className="text-label text-warning mt-[6px]">⚠️</span>
+          <span className="text-label text-fg !leading-[1.2]">
+            {t('settings.pluginDataDeleteWarning')}
+          </span>
         </div>
 
         <div className="flex items-center gap-[8px]">
           <button
-            className="flex-1 h-[30px] bg-danger border-[1px] border-danger-active rounded-md text-style-3 text-fg hover:bg-danger-active transition-colors"
+            className="flex-1 h-[30px] bg-danger border-[1px] border-danger-active rounded-surface text-label text-fg hover:bg-danger-active transition-colors duration-fast"
             onClick={onDeleteWithData}
           >
             {t('settings.deleteWithData')}
           </button>
           <button
-            className="flex-1 h-[30px] bg-fill rounded-md text-style-3 text-fg hover:bg-fill-hover transition-colors"
+            className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             onClick={onDeletePluginOnly}
           >
             {t('settings.deletePluginOnly')}
           </button>
           <button
-            className="h-[30px] px-[12px] bg-fill rounded-md text-style-3 text-fg hover:bg-fill-hover transition-colors"
+            className="h-[30px] px-[12px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             onClick={onClose}
           >
             {t('common.cancel')}
diff --git a/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx b/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
index 85e27386..b9901224 100644
--- a/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/UnifiedKeySetting.tsx
@@ -182,28 +182,30 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
   };
 
   return (
-    <Modal onClick={handleClose} animate={!initialSkipRef.current}>
+    <Modal
+      onClick={handleClose}
+      animate={!initialSkipRef.current}
+      ariaLabel={t('keySetting.title')}
+    >
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] pr-[6px]"
+        className="flex flex-col min-w-[264px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[14px]"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="pr-[14px]">
-          <TabSwitch
-            tabs={[
-              { id: TABS.KEY, label: t('keySetting.tabKey') },
-              { id: TABS.NOTE, label: t('keySetting.tabNote') },
-              { id: TABS.COUNTER, label: t('keySetting.tabCounter') },
-            ]}
-            activeTab={activeTab}
-            onTabChange={(tab) => setActiveTab(tab as TabType)}
-            className="mb-[19px]"
-          />
-        </div>
+        <TabSwitch
+          tabs={[
+            { id: TABS.KEY, label: t('keySetting.tabKey') },
+            { id: TABS.NOTE, label: t('keySetting.tabNote') },
+            { id: TABS.COUNTER, label: t('keySetting.tabCounter') },
+          ]}
+          activeTab={activeTab}
+          onTabChange={(tab) => setActiveTab(tab as TabType)}
+          className="mb-[12px]"
+        />
 
-        {/* 스크롤 영역 - 스크롤바가 모달 오른쪽 끝에 위치 */}
+        {/* 스크롤 영역 */}
         <div
           ref={scrollRef}
-          className="overflow-y-auto modal-content-scroll dmn-scroll-fade pr-[14px]"
+          className="overflow-y-auto modal-content-scroll dmn-scroll-fade"
           style={{
             height: containerHeight !== null ? `${containerHeight}px` : 'auto',
             maxHeight: '195px',
@@ -216,16 +218,16 @@ const UnifiedKeySetting: React.FC<UnifiedKeySettingProps> = ({
         </div>
 
         {/* 저장/취소 버튼 */}
-        <div className="flex gap-[8px] mt-[19px] pr-[14px]">
+        <div className="flex gap-[8px] mt-[12px]">
           <button
             onClick={handleSubmit}
-            className="w-[150px] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
+            className="flex-[2] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast"
           >
             {t('keySetting.save')}
           </button>
           <button
             onClick={handleClose}
-            className="w-[75px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
           >
             {t('keySetting.cancel')}
           </button>
diff --git a/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
index 41926333..28887328 100644
--- a/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/UpdateModal.tsx
@@ -79,16 +79,16 @@ const UpdateModal = ({
   };
 
   return (
-    <Modal onClick={handleClose}>
+    <Modal onClick={handleClose} ariaLabel={t('update.title')}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] min-w-[320px] max-w-[400px]"
+        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[14px] min-w-[320px] max-w-[400px]"
         onClick={(e) => e.stopPropagation()}
       >
         {isLatestVersion ? (
           // 최신 버전일 때 UI
           <>
             {/* 헤더 */}
-            <div className="flex items-center gap-[10px] mb-[16px]">
+            <div className="flex items-center gap-[8px] mb-[12px]">
               <div className="w-[32px] h-[32px] rounded-full bg-success-muted flex items-center justify-center">
                 <svg
                   width="16"
@@ -104,37 +104,35 @@ const UpdateModal = ({
                 </svg>
               </div>
               <div>
-                <h2 className="text-fg text-label font-medium">
+                <h2 className="text-fg text-label">
                   {t('update.latestAlready')}
                 </h2>
               </div>
             </div>
 
             {/* 버전 정보 */}
-            <div className="bg-inset rounded-[8px] p-[12px] mb-[16px]">
+            <div className="bg-fill-faint rounded-surface p-[12px] mb-[12px]">
               <div className="flex justify-between items-center">
                 <span className="text-fg-muted text-body">
                   {t('update.currentVersion')}
                 </span>
-                <span className="text-success text-body font-mono font-medium">
+                <span className="text-success text-body tabular-nums">
                   {updateInfo.currentVersion}
                 </span>
               </div>
             </div>
 
             {/* 버튼 */}
-            <div className="flex gap-[10px]">
+            <div className="flex gap-[8px]">
               <button
                 onClick={handleGoToRelease}
-                className="flex-1 h-[32px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active
-                           rounded-lg text-accent-fg text-body font-medium transition-colors"
+                className="flex-[2] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast"
               >
                 {t('update.goToRelease')}
               </button>
               <button
                 onClick={onClose}
-                className="w-[80px] h-[32px] bg-fill hover:bg-fill-hover active:bg-fill-active
-                           rounded-md text-fg text-body transition-colors"
+                className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
               >
                 {t('common.confirm')}
               </button>
@@ -144,7 +142,7 @@ const UpdateModal = ({
           // 업데이트 있을 때 UI
           <>
             {/* 헤더 */}
-            <div className="flex items-center gap-[10px] mb-[16px]">
+            <div className="flex items-center gap-[8px] mb-[12px]">
               <div className="w-[32px] h-[32px] rounded-full bg-success-muted flex items-center justify-center">
                 <svg
                   width="14"
@@ -167,9 +165,7 @@ const UpdateModal = ({
                 </svg>
               </div>
               <div>
-                <h2 className="text-fg text-label font-medium">
-                  {t('update.title')}
-                </h2>
+                <h2 className="text-fg text-label">{t('update.title')}</h2>
                 <p className="text-fg-muted text-caption">
                   {formatDate(updateInfo.publishedAt)}
                 </p>
@@ -177,12 +173,12 @@ const UpdateModal = ({
             </div>
 
             {/* 버전 정보 */}
-            <div className="bg-inset rounded-[8px] p-[12px] mb-[16px]">
+            <div className="bg-fill-faint rounded-surface p-[12px] mb-[12px]">
               <div className="flex justify-between items-center mb-[8px]">
                 <span className="text-fg-muted text-body">
                   {t('update.currentVersion')}
                 </span>
-                <span className="text-fg text-body font-mono">
+                <span className="text-fg text-body tabular-nums">
                   {updateInfo.currentVersion}
                 </span>
               </div>
@@ -190,14 +186,14 @@ const UpdateModal = ({
                 <span className="text-fg-muted text-body">
                   {t('update.latestVersion')}
                 </span>
-                <span className="text-success text-body font-mono font-medium">
+                <span className="text-success text-body tabular-nums">
                   {updateInfo.latestVersion}
                 </span>
               </div>
             </div>
 
             {/* 이 버전 건너뛰기 체크박스 */}
-            <label className="flex items-center gap-[8px] mb-[16px] cursor-pointer select-none">
+            <label className="flex items-center gap-[8px] mb-[12px] cursor-pointer select-none">
               <input
                 type="checkbox"
                 checked={skipChecked}
@@ -216,20 +212,17 @@ const UpdateModal = ({
             </label>
 
             {/* 버튼들 */}
-            <div className="flex gap-[10px]">
+            <div className="flex gap-[8px]">
               <button
                 onClick={handlePrimaryClick}
                 disabled={primaryActionDisabled}
-                className="flex-1 h-[32px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active
-                           rounded-lg text-accent-fg text-body font-medium transition-colors
-                           disabled:opacity-50 disabled:cursor-not-allowed"
+                className="flex-[2] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {primaryActionLabel || t('update.goToRelease')}
               </button>
               <button
                 onClick={handleClose}
-                className="w-[80px] h-[32px] bg-fill hover:bg-fill-hover active:bg-fill-active
-                           rounded-md text-fg text-body transition-colors"
+                className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
               >
                 {t('update.later')}
               </button>
diff --git a/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx b/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
index 06fc0462..3ad03ebd 100644
--- a/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
+++ b/src/renderer/components/main/Modal/content/editors/CounterAnimationEditorModal.tsx
@@ -841,9 +841,9 @@ const CounterAnimationEditorModal = ({
       : t('counterSetting.createAnimationTitle') || '모션 추가';
 
   return (
-    <Modal onClick={onClose}>
+    <Modal onClick={onClose} ariaLabel={headerTitle}>
       <div
-        className="w-[730px] max-w-[calc(100vw-80px)] h-[366px] flex flex-col bg-elevated rounded-[12px] shadow-2xl overflow-hidden"
+        className="w-[730px] max-w-[calc(100vw-80px)] h-[366px] flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 overflow-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="h-[37px] bg-fill-faint px-[12px] flex items-center justify-between">
@@ -1062,6 +1062,8 @@ const CounterAnimationEditorModal = ({
                       }}
                       allowDecimal={true}
                       decimalScale={2}
+                      min={0}
+                      max={9999}
                       width="100%"
                     />
                   </div>
@@ -1367,7 +1369,7 @@ const CounterAnimationEditorModal = ({
           </div>
           <button
             type="button"
-            className={`w-[120px] h-[30px] rounded-lg text-label transition-colors duration-fast ${
+            className={`w-[120px] h-[30px] rounded-surface text-label transition-colors duration-fast ${
               canSave
                 ? 'bg-accent text-accent-fg hover:bg-accent-hover active:bg-accent-active'
                 : 'bg-fill-faint text-fg-disabled cursor-not-allowed'
@@ -1383,7 +1385,7 @@ const CounterAnimationEditorModal = ({
           </button>
           <button
             type="button"
-            className="px-[24px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="px-[24px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             onClick={onClose}
           >
             {t('common.cancel') || '취소'}
diff --git a/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx b/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx
index 518bc8ea..416e9959 100644
--- a/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx
+++ b/src/renderer/components/main/Modal/content/editors/TabCssModal.tsx
@@ -2,6 +2,10 @@
 import React, { useEffect, useState, useRef } from 'react';
 import Modal from '../../Modal';
 import Checkbox from '@components/main/common/Checkbox';
+import {
+  PropertyRow,
+  PropertySection,
+} from '@components/main/Grid/PropertiesPanel/PropertyInputs';
 import { useTranslation } from '@contexts/useTranslation';
 import { useKeyStore } from '@stores/data/useKeyStore';
 import type { TabCss } from '@src/types/plugin/css';
@@ -135,26 +139,22 @@ const TabCssModal = ({ isOpen, onClose, showAlert }: TabCssModalProps) => {
   const cssEnabled = tabCss?.enabled ?? true;
 
   return (
-    <Modal onClick={handleCancel}>
+    <Modal onClick={handleCancel} ariaLabel={t('tabCss.enableCss')}>
       <div
-        className="flex flex-col items-center justify-center p-[20px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 gap-[19px]"
+        className="flex flex-col min-w-[264px] p-[14px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 gap-[12px]"
         onClick={(e) => e.stopPropagation()}
       >
-        {/* CSS 사용 여부 토글 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">{t('tabCss.enableCss')}</p>
-          <Checkbox checked={cssEnabled} onChange={handleToggleCss} />
-        </div>
-
-        {/* CSS 파일 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">{t('tabCss.cssFile')}</p>
-          <div className="flex items-center gap-[8px]">
+        {/* CSS 설정 카드 */}
+        <PropertySection>
+          <PropertyRow label={t('tabCss.enableCss')}>
+            <Checkbox checked={cssEnabled} onChange={handleToggleCss} />
+          </PropertyRow>
+          <PropertyRow label={t('tabCss.cssFile')}>
             <button
               type="button"
               onClick={handleClearCss}
               disabled={isLoading || !hasTabCss}
-              className={`px-[8px] h-[23px] rounded-md transition-colors duration-fast flex items-center justify-center text-style-4 ${
+              className={`px-[8px] h-[23px] rounded-md transition-colors duration-fast flex items-center justify-center text-body ${
                 hasTabCss
                   ? 'bg-danger-muted hover:bg-danger-muted-hover active:bg-danger-muted-active text-danger-fg'
                   : 'bg-fill-faint text-fg-disabled cursor-not-allowed'
@@ -166,24 +166,24 @@ const TabCssModal = ({ isOpen, onClose, showAlert }: TabCssModalProps) => {
               type="button"
               onClick={handleLoadCss}
               disabled={isLoading}
-              className="px-[7px] h-[23px] bg-fill rounded-md flex items-center justify-center text-fg text-style-4 hover:bg-fill-hover active:bg-fill-active"
+              className="px-[7px] h-[23px] bg-fill rounded-md flex items-center justify-center text-fg text-body hover:bg-fill-hover active:bg-fill-active"
             >
               {t('tabCss.loadFile')}
             </button>
-          </div>
-        </div>
+          </PropertyRow>
+        </PropertySection>
 
         {/* 버튼 영역 */}
         <div className="flex gap-[8px]">
           <button
             onClick={handleSave}
-            className="w-[150px] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
+            className="flex-[2] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast"
           >
             {t('keySetting.save')}
           </button>
           <button
             onClick={handleCancel}
-            className="w-[75px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
           >
             {t('keySetting.cancel')}
           </button>
diff --git a/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx b/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx
index 04197855..feb82c8e 100644
--- a/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx
+++ b/src/renderer/components/main/Modal/content/editors/TabNameModal.tsx
@@ -62,34 +62,35 @@ const TabNameModal = ({
   if (!isOpen) return null;
 
   return (
-    <Modal onClick={onClose}>
+    <Modal onClick={onClose} ariaLabel={t('tabs.createTitle')}>
       <div
-        className="flex flex-col justify-between w-[280px] p-[20px] gap-[19px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
+        className="flex flex-col w-[280px] p-[14px] gap-[12px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="text-style-3 text-fg">{t('tabs.createTitle')}</div>
-        <input
-          autoFocus
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') handleSubmit();
-          }}
-          className="w-full min-w-0 h-[30px] px-[12px] rounded-md bg-inset text-fg text-style-3 focus:shadow-focus-ring"
-          placeholder={t('tabs.name.placeholder')}
-        />
-        {error && (
-          <div className="text-danger text-style-1 my-[-12px]">{error}</div>
-        )}
+        <div className="text-title text-fg">{t('tabs.createTitle')}</div>
+        {/* 인풋·에러 묶음 — 에러는 인풋에 밀착 */}
+        <div className="flex flex-col gap-[6px]">
+          <input
+            autoFocus
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleSubmit();
+            }}
+            className="w-full min-w-0 h-[30px] px-[12px] rounded-surface bg-inset text-fg text-body focus:shadow-focus-ring"
+            placeholder={t('tabs.name.placeholder')}
+          />
+          {error && <div className="text-danger text-body">{error}</div>}
+        </div>
         <div className="flex gap-[8px]">
           <button
-            className="flex-1 h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
+            className="flex-[2] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast"
             onClick={handleSubmit}
           >
             {t('tabs.create')}
           </button>
           <button
-            className="w-[75px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             onClick={onClose}
           >
             {t('common.cancel')}
diff --git a/src/renderer/components/main/Modal/content/legacy/CounterSetting.tsx b/src/renderer/components/main/Modal/content/legacy/CounterSetting.tsx
deleted file mode 100644
index 82ee6a45..00000000
--- a/src/renderer/components/main/Modal/content/legacy/CounterSetting.tsx
+++ /dev/null
@@ -1,469 +0,0 @@
-/* eslint-disable react-hooks/immutability */
-import React, { useEffect, useRef, useState } from 'react';
-import Modal from '../../Modal';
-import Dropdown from '@components/main/common/Dropdown';
-import ColorPicker from '../pickers/ColorPicker';
-import { useTranslation } from '@contexts/useTranslation';
-import {
-  createDefaultCounterSettings,
-  normalizeCounterSettings,
-  type KeyCounterSettings,
-  type KeyCounterPlacement,
-  type KeyCounterAlign,
-  type KeyCounterAlignMode,
-} from '@src/types/key/keys';
-
-type PickerTarget = 'fillIdle' | 'fillActive' | 'strokeIdle' | 'strokeActive';
-
-interface CounterSettingModalProps {
-  onClose: () => void;
-  onSave?: (settings: KeyCounterSettings) => void;
-  onPreview?: (settings: Partial<KeyCounterSettings>) => void;
-  initialSettings?: Partial<KeyCounterSettings> | null;
-  keyName?: string;
-}
-
-const CounterSettingModal = ({
-  onClose,
-  onSave,
-  onPreview,
-  initialSettings,
-  keyName: _keyName,
-}: CounterSettingModalProps) => {
-  const { t } = useTranslation();
-
-  const resolvedSettings = normalizeCounterSettings(
-    initialSettings ?? createDefaultCounterSettings(),
-  );
-
-  const [placement, setPlacement] = useState<KeyCounterPlacement>(
-    resolvedSettings.placement,
-  );
-  const [align, setAlign] = useState<KeyCounterAlign>(resolvedSettings.align);
-  const [alignMode, setAlignMode] = useState<KeyCounterAlignMode>(
-    resolvedSettings.alignMode,
-  );
-  const [gap, setGap] = useState<number>(resolvedSettings.gap ?? 6);
-  const [_isGapFocused, setIsGapFocused] = useState<boolean>(false);
-  const [displayGap, setDisplayGap] = useState<string>(
-    `${resolvedSettings.gap ?? 6}px`,
-  );
-
-  const [fillIdle, setFillIdle] = useState<string>(resolvedSettings.fill.idle);
-  const [fillActive, setFillActive] = useState<string>(
-    resolvedSettings.fill.active,
-  );
-  const [strokeIdle, setStrokeIdle] = useState<string>(
-    resolvedSettings.stroke.idle,
-  );
-  const [strokeActive, setStrokeActive] = useState<string>(
-    resolvedSettings.stroke.active,
-  );
-
-  // 정렬 드롭다운과 동일한 폭으로 간격 인풋 너비를 맞추기 위한 참조 및 상태
-  const alignDropdownWrapperRef = useRef<HTMLDivElement>(null);
-  const [alignDropdownWidth, setAlignDropdownWidth] = useState<number>(0);
-
-  useEffect(() => {
-    const measure = () => {
-      if (!alignDropdownWrapperRef.current) return;
-      const btn = alignDropdownWrapperRef.current.querySelector('button');
-      if (btn) {
-        const w = btn.offsetWidth;
-        if (w) setAlignDropdownWidth((prev) => (prev === w ? prev : w));
-      }
-    };
-
-    // 초기 측정
-    measure();
-
-    // 버튼 자체 크기 변화를 감지
-    let ro: ResizeObserver | undefined;
-    const btn = alignDropdownWrapperRef.current
-      ? alignDropdownWrapperRef.current.querySelector('button')
-      : null;
-    if (btn && typeof ResizeObserver !== 'undefined') {
-      ro = new ResizeObserver(() => measure());
-      ro.observe(btn);
-    }
-
-    // 윈도우 리사이즈 대응
-    window.addEventListener('resize', measure);
-
-    return () => {
-      window.removeEventListener('resize', measure);
-      if (ro) ro.disconnect();
-    };
-    // align 값/라벨 변경 시에도 재측정
-  }, [align]);
-
-  useEffect(() => {
-    setPlacement(resolvedSettings.placement);
-    setAlign(resolvedSettings.align);
-    setAlignMode(resolvedSettings.alignMode);
-    setGap(resolvedSettings.gap ?? 6);
-    setDisplayGap(`${resolvedSettings.gap ?? 6}px`);
-    setIsGapFocused(false);
-    setFillIdle(resolvedSettings.fill.idle);
-    setFillActive(resolvedSettings.fill.active);
-    setStrokeIdle(resolvedSettings.stroke.idle);
-    setStrokeActive(resolvedSettings.stroke.active);
-    setPickerOpen(false);
-    setPickerFor(null);
-  }, [resolvedSettings]);
-
-  // 실시간 프리뷰: 내부 상태가 변하면 즉시 onPreview 호출 (색상 제외)
-  useEffect(() => {
-    if (typeof onPreview !== 'function') return;
-    const payload = {
-      placement,
-      align,
-      alignMode,
-      gap,
-      fill: { idle: fillIdle, active: fillActive },
-      stroke: { idle: strokeIdle, active: strokeActive },
-    };
-    onPreview(payload);
-  }, [
-    placement,
-    align,
-    alignMode,
-    gap,
-    fillIdle,
-    fillActive,
-    onPreview,
-    strokeActive,
-    strokeIdle,
-  ]);
-
-  const [pickerFor, setPickerFor] = useState<PickerTarget | null>(null);
-  const [pickerOpen, setPickerOpen] = useState<boolean>(false);
-
-  const fillIdleBtnRef = useRef<HTMLButtonElement>(null);
-  const fillActiveBtnRef = useRef<HTMLButtonElement>(null);
-  const strokeIdleBtnRef = useRef<HTMLButtonElement>(null);
-  const strokeActiveBtnRef = useRef<HTMLButtonElement>(null);
-  const fillGroupRef = useRef<HTMLDivElement>(null);
-  const strokeGroupRef = useRef<HTMLDivElement>(null);
-
-  const colorPickerInteractiveRefs = [
-    fillIdleBtnRef,
-    fillActiveBtnRef,
-    strokeIdleBtnRef,
-    strokeActiveBtnRef,
-    fillGroupRef,
-    strokeGroupRef,
-  ];
-
-  const placementOptions = [
-    { label: t('counterSetting.placementInside'), value: 'inside' },
-    { label: t('counterSetting.placementOutside'), value: 'outside' },
-  ];
-
-  const alignOptions = [
-    { label: t('counterSetting.alignTop'), value: 'top' },
-    { label: t('counterSetting.alignBottom'), value: 'bottom' },
-    { label: t('counterSetting.alignLeft'), value: 'left' },
-    { label: t('counterSetting.alignRight'), value: 'right' },
-  ];
-
-  const alignModeOptions = [
-    { label: t('counterSetting.alignModeCenter'), value: 'center' },
-    { label: t('counterSetting.alignModeBetween'), value: 'between' },
-  ];
-
-  const colorButtonClass = (active: boolean) =>
-    `relative px-[7px] h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] flex items-center justify-center ${
-      active ? 'border-[#459BF8]' : 'border-[#3A3943]'
-    } text-[#DBDEE8] text-style-2`;
-
-  const renderColorSquare = (style: React.CSSProperties) => (
-    <div
-      className="absolute left-[6px] top-[4.5px] w-[11px] h-[11px] rounded-[2px] border border-[#3A3943]"
-      style={style}
-    />
-  );
-
-  const closePicker = () => {
-    setPickerOpen(false);
-    setPickerFor(null);
-  };
-
-  const referenceRefFor = (): React.RefObject<HTMLButtonElement> => {
-    // 항상 "채우기 위치에 고정 앵커
-    return fillActiveBtnRef;
-  };
-
-  const colorValueFor = (key: PickerTarget): string => {
-    switch (key) {
-      case 'fillIdle':
-        return fillIdle;
-      case 'fillActive':
-        return fillActive;
-      case 'strokeIdle':
-        return strokeIdle;
-      case 'strokeActive':
-        return strokeActive;
-      default:
-        return '#FFFFFF';
-    }
-  };
-
-  const setColorFor = (key: PickerTarget, color: string): void => {
-    switch (key) {
-      case 'fillIdle':
-        setFillIdle(color);
-        break;
-      case 'fillActive':
-        setFillActive(color);
-        break;
-      case 'strokeIdle':
-        setStrokeIdle(color);
-        break;
-      case 'strokeActive':
-        setStrokeActive(color);
-        break;
-      default:
-        break;
-    }
-  };
-
-  const handleColorToggle = (target: PickerTarget): void => {
-    if (pickerOpen && pickerFor === target) {
-      closePicker();
-    } else {
-      setPickerFor(target);
-      setPickerOpen(true);
-    }
-  };
-
-  const handleColorComplete = (key: PickerTarget, color: string): void => {
-    setColorFor(key, color);
-
-    if (typeof onPreview !== 'function') return;
-
-    const payload = {
-      placement,
-      align,
-      alignMode,
-      gap,
-      fill: {
-        idle: key === 'fillIdle' ? color : fillIdle,
-        active: key === 'fillActive' ? color : fillActive,
-      },
-      stroke: {
-        idle: key === 'strokeIdle' ? color : strokeIdle,
-        active: key === 'strokeActive' ? color : strokeActive,
-      },
-    };
-    onPreview(payload);
-  };
-
-  const handleApply = (): void => {
-    const payload = {
-      placement,
-      align,
-      alignMode,
-      gap,
-      fill: {
-        idle: fillIdle,
-        active: fillActive,
-      },
-      stroke: {
-        idle: strokeIdle,
-        active: strokeActive,
-      },
-    };
-    if (typeof onSave === 'function') {
-      onSave(normalizeCounterSettings(payload));
-    }
-  };
-
-  return (
-    <Modal onClick={onClose}>
-      <div
-        className="flex flex-col items-center justify-center p-[20px] bg-[#1A191E] rounded-[13px] border-[1px] border-[#2A2A30] gap-[19px]"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* 배치 영역 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-white text-style-2">
-            {t('counterSetting.placementArea')}
-          </p>
-          <Dropdown
-            options={placementOptions}
-            value={placement}
-            onChange={(v: string) => setPlacement(v as KeyCounterPlacement)}
-          />
-        </div>
-
-        {/* 정렬 방향 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-white text-style-2">
-            {t('counterSetting.alignDirection')}
-          </p>
-          <div ref={alignDropdownWrapperRef}>
-            <Dropdown
-              options={alignOptions}
-              value={align}
-              onChange={(v: string) => setAlign(v as KeyCounterAlign)}
-            />
-          </div>
-        </div>
-
-        {/* 정렬 방식 (내부 배치 전용) */}
-        {placement === 'inside' && (
-          <div className="flex justify-between w-full items-center">
-            <p className="text-white text-style-2">
-              {t('counterSetting.alignMode')}
-            </p>
-            <Dropdown
-              options={alignModeOptions}
-              value={alignMode}
-              onChange={(v: string) => setAlignMode(v as KeyCounterAlignMode)}
-            />
-          </div>
-        )}
-
-        {/* 간격 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-white text-style-2">{t('counterSetting.gap')}</p>
-          <input
-            type="text"
-            value={displayGap}
-            onChange={(e) => {
-              const newValue = e.target.value.replace(/[^0-9]/g, '');
-              if (newValue === '') {
-                setDisplayGap('');
-              } else {
-                setDisplayGap(newValue);
-              }
-            }}
-            onFocus={() => {
-              setIsGapFocused(true);
-              setDisplayGap(String(gap));
-            }}
-            onBlur={(e) => {
-              setIsGapFocused(false);
-              const inputValue = e.target.value.replace(/[^0-9]/g, '');
-              if (inputValue === '' || Number.isNaN(parseInt(inputValue, 10))) {
-                setGap(0);
-                setDisplayGap('0px');
-              } else {
-                const numValue = parseInt(inputValue, 10);
-                const clamped = Math.max(numValue, 0);
-                setGap(clamped);
-                setDisplayGap(`${clamped}px`);
-              }
-            }}
-            className="text-center h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] border-[#3A3943] focus:border-[#459BF8] text-style-4 text-[#DBDEE8]"
-            style={{
-              width: alignDropdownWidth ? `${alignDropdownWidth}px` : undefined,
-            }}
-          />
-        </div>
-
-        {/* 채우기 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-white text-style-2">{t('counterSetting.fill')}</p>
-          <div ref={fillGroupRef} className="flex items-center gap-[8px]">
-            <button
-              ref={fillIdleBtnRef}
-              type="button"
-              className={colorButtonClass(
-                pickerOpen && pickerFor === 'fillIdle',
-              )}
-              onClick={() => handleColorToggle('fillIdle')}
-            >
-              {renderColorSquare({ backgroundColor: fillIdle })}
-              <span className="ml-[16px] text-left">
-                {t('counterSetting.idle')}
-              </span>
-            </button>
-            <button
-              ref={fillActiveBtnRef}
-              type="button"
-              className={colorButtonClass(
-                pickerOpen && pickerFor === 'fillActive',
-              )}
-              onClick={() => handleColorToggle('fillActive')}
-            >
-              {renderColorSquare({ backgroundColor: fillActive })}
-              <span className="ml-[16px] text-left">
-                {t('counterSetting.active')}
-              </span>
-            </button>
-          </div>
-        </div>
-
-        {/* 외곽선 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-white text-style-2">
-            {t('counterSetting.stroke')}
-          </p>
-          <div ref={strokeGroupRef} className="flex items-center gap-[8px]">
-            <button
-              ref={strokeIdleBtnRef}
-              type="button"
-              className={colorButtonClass(
-                pickerOpen && pickerFor === 'strokeIdle',
-              )}
-              onClick={() => handleColorToggle('strokeIdle')}
-            >
-              {renderColorSquare({ backgroundColor: strokeIdle })}
-              <span className="ml-[16px] text-left">
-                {t('counterSetting.idle')}
-              </span>
-            </button>
-            <button
-              ref={strokeActiveBtnRef}
-              type="button"
-              className={colorButtonClass(
-                pickerOpen && pickerFor === 'strokeActive',
-              )}
-              onClick={() => handleColorToggle('strokeActive')}
-            >
-              {renderColorSquare({ backgroundColor: strokeActive })}
-              <span className="ml-[16px] text-left">
-                {t('counterSetting.active')}
-              </span>
-            </button>
-          </div>
-        </div>
-
-        {/* 적용하기/취소 */}
-        <div className="flex gap-[10.5px]">
-          <button
-            onClick={handleApply}
-            className="w-[150px] h-[30px] bg-[#2A2A30] hover:bg-[#303036] active:bg-[#393941] rounded-[7px] text-[#DCDEE7] text-style-3"
-          >
-            {t('counterSetting.apply')}
-          </button>
-          <button
-            onClick={onClose}
-            className="w-[75px] h-[30px] bg-[#3C1E1E] hover:bg-[#442222] active:bg-[#522929] rounded-[7px] text-[#E6DBDB] text-style-3"
-          >
-            {t('counterSetting.cancel')}
-          </button>
-        </div>
-
-        {pickerFor && (
-          <ColorPicker
-            open={pickerOpen}
-            referenceRef={referenceRefFor()}
-            color={colorValueFor(pickerFor)}
-            onColorChange={(c: string) => setColorFor(pickerFor, c)}
-            onColorChangeComplete={(c: string) =>
-              handleColorComplete(pickerFor, c)
-            }
-            onClose={closePicker}
-            solidOnly={true}
-            interactiveRefs={colorPickerInteractiveRefs}
-          />
-        )}
-      </div>
-    </Modal>
-  );
-};
-
-export default CounterSettingModal;
diff --git a/src/renderer/components/main/Modal/content/legacy/KeySetting.tsx b/src/renderer/components/main/Modal/content/legacy/KeySetting.tsx
deleted file mode 100644
index 35b64d8e..00000000
--- a/src/renderer/components/main/Modal/content/legacy/KeySetting.tsx
+++ /dev/null
@@ -1,351 +0,0 @@
-/* eslint-disable react-hooks/refs */
-import React, { useEffect, useState, useRef } from 'react';
-import { useTranslation } from '@contexts/useTranslation';
-import { getKeyInfoByGlobalKey } from '@utils/core/KeyMaps';
-import { useSettingsStore } from '@stores/useSettingsStore';
-import ImagePicker from '../pickers/ImagePicker';
-import Modal from '../../Modal';
-import type { RawInputPayload } from '@src/types/plugin/api';
-
-interface KeyData {
-  key: string;
-  activeImage?: string;
-  inactiveImage?: string;
-  width?: number;
-  height?: number;
-  noteColor?: string;
-  noteOpacity?: number;
-  noteGlowEnabled?: boolean;
-  noteGlowSize?: number;
-  noteGlowOpacity?: number;
-  noteGlowColor?: string;
-  className?: string;
-  idleTransparent?: boolean;
-  activeTransparent?: boolean;
-}
-
-interface SaveData {
-  key: string;
-  activeImage: string;
-  inactiveImage: string;
-  width: number;
-  height: number;
-  noteColor?: string;
-  noteOpacity?: number;
-  noteGlowEnabled?: boolean;
-  noteGlowSize?: number;
-  noteGlowOpacity?: number;
-  noteGlowColor?: string;
-  className: string;
-  idleTransparent: boolean;
-  activeTransparent: boolean;
-}
-
-interface KeySettingProps {
-  keyData: KeyData;
-  onClose: () => void;
-  onSave: (data: SaveData) => void;
-  skipAnimation?: boolean;
-}
-
-const KeySetting = ({
-  keyData,
-  onClose,
-  onSave,
-  skipAnimation = false,
-}: KeySettingProps) => {
-  const { t } = useTranslation();
-  const { useCustomCSS } = useSettingsStore();
-  const [key, setKey] = useState<string>(keyData.key);
-  const [displayKey, setDisplayKey] = useState<string>(
-    getKeyInfoByGlobalKey(key).displayName,
-  );
-  const [isListening, setIsListening] = useState<boolean>(false);
-  const [activeImage, setActiveImage] = useState<string>(
-    keyData.activeImage || '',
-  );
-  const [inactiveImage, setInactiveImage] = useState<string>(
-    keyData.inactiveImage || '',
-  );
-  const [width, setWidth] = useState<number | string>(keyData.width || 60);
-  const [height, setHeight] = useState<number | string>(keyData.height || 60);
-  const [showImagePicker, setShowImagePicker] = useState<boolean>(false);
-  const [idleTransparent, setIdleTransparent] = useState<boolean>(
-    keyData.idleTransparent || false,
-  );
-  const [activeTransparent, setActiveTransparent] = useState<boolean>(
-    keyData.activeTransparent || false,
-  );
-
-  const [className, setClassName] = useState<string>(keyData.className || '');
-
-  const [widthFocused, setWidthFocused] = useState<boolean>(false);
-  const [heightFocused, setHeightFocused] = useState<boolean>(false);
-
-  const imageButtonRef = useRef<HTMLButtonElement | null>(null);
-  const initialSkipRef = useRef<boolean>(skipAnimation);
-  const listeningFlagTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null,
-  );
-
-  // 키 리스닝 플래그를 전역으로 노출 (Grid 단축키 등에서 체크)
-  useEffect(() => {
-    if (listeningFlagTimerRef.current !== null) {
-      clearTimeout(listeningFlagTimerRef.current);
-      listeningFlagTimerRef.current = null;
-    }
-
-    if (isListening) {
-      window.__dmn_isKeyListening = true;
-    } else {
-      // macOS: raw input이 브라우저 keydown보다 먼저 도착할 수 있어 지연 해제
-      listeningFlagTimerRef.current = setTimeout(() => {
-        window.__dmn_isKeyListening = false;
-        listeningFlagTimerRef.current = null;
-      }, 150);
-    }
-
-    return () => {
-      if (listeningFlagTimerRef.current !== null) {
-        clearTimeout(listeningFlagTimerRef.current);
-        listeningFlagTimerRef.current = null;
-      }
-    };
-  }, [isListening]);
-
-  // 컴포넌트 언마운트 시 반드시 플래그 해제
-  useEffect(() => {
-    return () => {
-      window.__dmn_isKeyListening = false;
-      if (listeningFlagTimerRef.current !== null) {
-        clearTimeout(listeningFlagTimerRef.current);
-        listeningFlagTimerRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!isListening) return undefined;
-    if (typeof window === 'undefined' || !window.api?.keys?.onRawInput) {
-      return undefined;
-    }
-
-    const unsubscribe = window.api.keys.onRawInput(
-      (payload: RawInputPayload) => {
-        if (!payload || payload.state !== 'DOWN') return;
-        const targetLabel =
-          payload.label ||
-          (Array.isArray(payload.labels) ? payload.labels[0] : null);
-        if (!targetLabel) return;
-
-        const info = getKeyInfoByGlobalKey(targetLabel);
-        setKey(info.globalKey);
-        setDisplayKey(info.displayName);
-        setIsListening(false);
-      },
-    );
-
-    return () => {
-      try {
-        unsubscribe?.();
-      } catch (error) {
-        console.error('Failed to unsubscribe raw input listener', error);
-      }
-    };
-  }, [isListening]);
-
-  const handleSubmit = (): void => {
-    onSave({
-      key,
-      activeImage,
-      inactiveImage,
-      width: parseInt(String(width), 10),
-      height: parseInt(String(height), 10),
-      noteColor: keyData.noteColor,
-      noteOpacity: keyData.noteOpacity,
-      noteGlowEnabled: keyData.noteGlowEnabled,
-      noteGlowSize: keyData.noteGlowSize,
-      noteGlowOpacity: keyData.noteGlowOpacity,
-      noteGlowColor: keyData.noteGlowColor,
-      className,
-      idleTransparent,
-      activeTransparent,
-    });
-  };
-
-  const handleImageButtonClick = (): void => {
-    setShowImagePicker((prev) => !prev);
-  };
-
-  const handleImagePickerClose = (): void => {
-    setShowImagePicker(false);
-  };
-
-  return (
-    <Modal onClick={onClose} animate={!initialSkipRef.current}>
-      <div
-        className="flex items-center justify-center p-[20px] bg-[#1A191E] rounded-[13px] border-[1px] border-[#2A2A30] gap-[19px]"
-        onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}
-      >
-        <div className="flex-1 flex flex-col gap-[19px]">
-          <div className="flex justify-between w-full items-center">
-            <p className="text-white text-style-2">
-              {t('keySetting.keyMapping')}
-            </p>
-            <button
-              onClick={() => setIsListening(true)}
-              className={`flex items-center justify-center h-[23px] min-w-[0px] px-[8.5px] bg-[#2A2A30] rounded-[7px] border-[1px] ${
-                isListening ? 'border-[#459BF8]' : 'border-[#3A3943]'
-              } text-[#DBDEE8] text-style-2`}
-            >
-              {isListening
-                ? t('keySetting.pressAnyKey')
-                : displayKey || t('keySetting.clickToSet')}
-            </button>
-          </div>
-          <div className="flex justify-between w-full items-center">
-            <p className="text-white text-style-2">{t('keySetting.keySize')}</p>
-            <div className="flex items-center gap-[10.5px]">
-              <div
-                className={`relative w-[54px] h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] ${
-                  widthFocused ? 'border-[#459BF8]' : 'border-[#3A3943]'
-                }`}
-              >
-                <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-[#97999E] text-style-1 pointer-events-none">
-                  X
-                </span>
-                <input
-                  type="number"
-                  value={width}
-                  onChange={(e) => {
-                    const newValue = e.target.value;
-                    if (newValue === '') {
-                      setWidth('');
-                    } else {
-                      const numValue = parseInt(newValue, 10);
-                      if (!Number.isNaN(numValue)) {
-                        setWidth(Math.min(Math.max(numValue, 1), 999));
-                      }
-                    }
-                  }}
-                  onFocus={() => setWidthFocused(true)}
-                  onBlur={(e) => {
-                    setWidthFocused(false);
-                    if (
-                      e.target.value === '' ||
-                      Number.isNaN(parseInt(e.target.value, 10))
-                    ) {
-                      setWidth(60);
-                    }
-                  }}
-                  className="absolute left-[20px] top-[-1px] h-[23px] w-[26px] bg-transparent text-style-4 text-[#DBDEE8] text-left"
-                />
-              </div>
-              <div
-                className={`relative w-[54px] h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] ${
-                  heightFocused ? 'border-[#459BF8]' : 'border-[#3A3943]'
-                }`}
-              >
-                <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-[#97999E] text-style-1 pointer-events-none">
-                  Y
-                </span>
-                <input
-                  type="number"
-                  value={height}
-                  onChange={(e) => {
-                    const newValue = e.target.value;
-                    if (newValue === '') {
-                      setHeight('');
-                    } else {
-                      const numValue = parseInt(newValue, 10);
-                      if (!Number.isNaN(numValue)) {
-                        setHeight(Math.min(Math.max(numValue, 1), 999));
-                      }
-                    }
-                  }}
-                  onFocus={() => setHeightFocused(true)}
-                  onBlur={(e) => {
-                    setHeightFocused(false);
-                    if (
-                      e.target.value === '' ||
-                      Number.isNaN(parseInt(e.target.value, 10))
-                    ) {
-                      setHeight(60);
-                    }
-                  }}
-                  className="absolute left-[20px] top-[-1px] h-[23px] w-[26px] bg-transparent text-style-4 text-[#DBDEE8] text-left"
-                />
-              </div>
-            </div>
-          </div>
-          {/* 커스텀 이미지 */}
-          <div className="flex justify-between w-full items-center">
-            <p className="text-white text-style-2">
-              {t('keySetting.customImage')}
-            </p>
-            <button
-              ref={imageButtonRef}
-              type="button"
-              className={`px-[7px] h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] flex items-center justify-center ${
-                showImagePicker ? 'border-[#459BF8]' : 'border-[#3A3943]'
-              } text-[#DBDEE8] text-style-4`}
-              onClick={handleImageButtonClick}
-            >
-              {t('keySetting.configure')}
-            </button>
-          </div>
-          {/* 클래스 이름 - 커스텀 CSS 활성화 시에만 표시 */}
-          {useCustomCSS && (
-            <div className="flex justify-between w-full items-center">
-              <p className="text-white text-style-2">
-                {t('keySetting.className')}
-              </p>
-              <input
-                key="classNameUnified"
-                type="text"
-                value={className}
-                onChange={(e) => setClassName(e.target.value)}
-                placeholder="className"
-                className="text-center w-[90px] h-[23px] p-[6px] bg-[#2A2A30] rounded-[7px] border-[1px] border-[#3A3943] focus:border-[#459BF8] text-style-4 text-[#DBDEE8]"
-              />
-            </div>
-          )}
-          {/* 저장/취소 버튼 */}
-          <div className="flex gap-[10.5px]">
-            <button
-              onClick={handleSubmit}
-              className="w-[150px] h-[30px] bg-[#2A2A30] hover:bg-[#303036] active:bg-[#393941] rounded-[7px] text-[#DCDEE7] text-style-3"
-            >
-              {t('keySetting.save')}
-            </button>
-            <button
-              onClick={onClose}
-              className="w-[75px] h-[30px] bg-[#3C1E1E] hover:bg-[#442222] active:bg-[#522929] rounded-[7px] text-[#E6DBDB] text-style-3"
-            >
-              {t('keySetting.cancel')}
-            </button>
-          </div>
-        </div>
-        {showImagePicker && (
-          <ImagePicker
-            open={showImagePicker}
-            referenceRef={imageButtonRef}
-            idleImage={inactiveImage}
-            activeImage={activeImage}
-            idleTransparent={idleTransparent}
-            activeTransparent={activeTransparent}
-            onIdleImageChange={setInactiveImage}
-            onActiveImageChange={setActiveImage}
-            onIdleTransparentChange={setIdleTransparent}
-            onActiveTransparentChange={setActiveTransparent}
-            onIdleImageReset={() => setInactiveImage('')}
-            onActiveImageReset={() => setActiveImage('')}
-            onClose={handleImagePickerClose}
-          />
-        )}
-      </div>
-    </Modal>
-  );
-};
-
-export default KeySetting;
diff --git a/src/renderer/components/main/Modal/content/managers/PluginManagerModal.tsx b/src/renderer/components/main/Modal/content/managers/PluginManagerModal.tsx
index 9b579e99..a7ad6a6d 100644
--- a/src/renderer/components/main/Modal/content/managers/PluginManagerModal.tsx
+++ b/src/renderer/components/main/Modal/content/managers/PluginManagerModal.tsx
@@ -42,10 +42,11 @@ export const PluginManagerModal = ({
     isOpen={isOpen}
     onClose={onClose}
     contentDeps={[plugins.length]}
+    ariaLabel={t('settings.managePluginsTitle')}
     footer={
       <>
         <button
-          className={`flex items-center justify-center w-[150px] h-[30px] rounded-md text-style-3 text-fg transition-colors ${
+          className={`flex items-center justify-center flex-[2] h-[30px] rounded-surface text-label text-fg transition-colors ${
             isAdding
               ? 'bg-fill-faint cursor-not-allowed opacity-50'
               : 'bg-fill hover:bg-fill-hover'
@@ -58,7 +59,7 @@ export const PluginManagerModal = ({
             : `${t('settings.loadJs')} (${plugins.length})`}
         </button>
         <button
-          className="flex items-center justify-center w-[75px] h-[30px] bg-fill rounded-md text-style-3 text-fg hover:bg-fill-hover transition-colors"
+          className="flex items-center justify-center flex-1 h-[30px] bg-fill rounded-surface text-label text-fg hover:bg-fill-hover transition-colors"
           onClick={onClose}
         >
           {t('common.ok')}
@@ -67,7 +68,7 @@ export const PluginManagerModal = ({
     }
   >
     {plugins.length === 0 ? (
-      <div className="flex items-center justify-center py-[10px] px-[12px] text-style-2 text-white">
+      <div className="flex items-center justify-center py-[10px] px-[12px] text-label text-fg-muted">
         {t('settings.noPlugins')}
       </div>
     ) : (
diff --git a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
index 2919b493..e444774e 100644
--- a/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
+++ b/src/renderer/components/main/Modal/content/managers/SoundTrimModal.tsx
@@ -1015,9 +1015,9 @@ const SoundTrimModal = ({
   if (!isOpen) return null;
 
   return (
-    <Modal onClick={closeModal}>
+    <Modal onClick={closeModal} ariaLabel={headerTitle}>
       <div
-        className="w-[340px] max-w-[calc(100vw-80px)] flex flex-col bg-fill-faint rounded-surface overflow-hidden"
+        className="w-[340px] max-w-[calc(100vw-80px)] flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 overflow-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         {/* 헤더 바 */}
@@ -1175,7 +1175,7 @@ const SoundTrimModal = ({
         <div className="bg-fill-faint px-[12px] py-[10px] flex items-center justify-end gap-[8px]">
           <button
             type="button"
-            className={`w-[120px] h-[30px] rounded-lg text-label transition-colors duration-fast ${
+            className={`w-[120px] h-[30px] rounded-surface text-label transition-colors duration-fast ${
               canSubmit
                 ? 'bg-accent text-accent-fg hover:bg-accent-hover active:bg-accent-active'
                 : 'bg-fill-faint text-fg-disabled cursor-not-allowed'
@@ -1193,7 +1193,7 @@ const SoundTrimModal = ({
           </button>
           <button
             type="button"
-            className="px-[24px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="px-[24px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             onClick={closeModal}
             disabled={isSaving}
           >
diff --git a/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx b/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx
index f1f38693..42db8fe8 100644
--- a/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/ColorPicker.tsx
@@ -58,6 +58,8 @@ interface ColorPickerWrapperProps {
   position?: { x: number; y: number } | string;
   offsetY?: number;
   placement?: string;
+  portalToBody?: boolean;
+  closeOnScroll?: boolean;
 }
 
 const extractAlphaFromColor = (colorValue: ColorValue): number => {
@@ -100,6 +102,8 @@ const ColorPickerWrapper = ({
   position = undefined,
   offsetY = -80,
   placement = 'right-start',
+  portalToBody = false,
+  closeOnScroll = false,
 }: ColorPickerWrapperProps) => {
   const initialMode = solidOnly
     ? MODES.solid
@@ -776,13 +780,13 @@ const ColorPickerWrapper = ({
       interactiveRefs={interactiveRefs}
       onClose={handleClose}
       autoClose={false}
-      closeOnScroll={false}
-      portalToBody={Boolean(panelElement)}
+      closeOnScroll={closeOnScroll}
+      portalToBody={Boolean(panelElement) || portalToBody}
       animate={!panelElement}
     >
       <div
         ref={pickerContainerRef}
-        className="flex flex-col p-[8px] gap-[8px] w-[146px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
+        className="flex flex-col p-[8px] gap-[8px] w-[146px] bg-glass-heavy backdrop-blur-[32px] rounded-popup shadow-elevation-3"
         style={{
           visibility: panelElement && !fixedPosition ? 'hidden' : undefined,
         }}
@@ -1218,7 +1222,7 @@ const Input = ({
               onValueCommit?.();
             }
           }}
-          className="pl-[23px] text-left w-full h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg uppercase pt-[1px] leading-[23px]"
+          className="pl-[23px] text-left w-full h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body text-fg uppercase pt-[1px] leading-[23px]"
         />
       </div>
 
@@ -1241,7 +1245,7 @@ const Input = ({
                 event.currentTarget.blur();
               }
             }}
-            className="px-[6px] text-center w-full h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg pt-[1px] leading-[23px]"
+            className="px-[6px] text-center w-full h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg pt-[1px] leading-[23px]"
           />
         </div>
       )}
@@ -1376,7 +1380,7 @@ function GradientInput({
             }
           }}
           placeholder={label}
-          className={`pl-[23px] text-left w-full h-[23px] bg-inset rounded-md text-style-4 text-fg uppercase pt-[1px] leading-[23px] ${
+          className={`pl-[23px] text-left w-full h-[23px] bg-inset rounded-md text-body text-fg uppercase pt-[1px] leading-[23px] ${
             selected ? 'shadow-focus-ring' : 'focus:shadow-focus-ring'
           }`}
         />
@@ -1400,7 +1404,7 @@ function GradientInput({
                 event.currentTarget.blur();
               }
             }}
-            className={`px-[6px] text-center w-full h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg pt-[1px] leading-[23px] ${''}`}
+            className={`px-[6px] text-center w-full h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg pt-[1px] leading-[23px] ${''}`}
             title={rightTitle}
           />
         </div>
diff --git a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
index 0c87b6df..2243db94 100644
--- a/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CommonListPickerPage.tsx
@@ -86,7 +86,7 @@ export default function CommonListPickerPage<T>({
               strokeLinejoin="round"
             />
           </svg>
-          <span className="text-fg group-hover:text-white text-style-2 leading-none truncate transition-colors duration-fast">
+          <span className="text-fg group-hover:text-white text-label leading-none truncate transition-colors duration-fast">
             {pageTitle}
           </span>
         </button>
diff --git a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
index 3ce9246c..c415c36e 100644
--- a/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/CounterAnimationPicker.tsx
@@ -15,7 +15,12 @@ import {
 import ListPopup, { type ListItem } from '@components/main/Modal/ListPopup';
 import { usePickerItemMenu } from '@hooks/usePickerItemMenu';
 import CommonListPickerPage from './CommonListPickerPage';
-import { pickerRowClass, pickerMoreButtonClass } from './pickerRowClass';
+import {
+  pickerRowClass,
+  pickerMoreButtonClass,
+  pickerMoreButtonVisibleClass,
+  pickerMoreButtonHiddenClass,
+} from './pickerRowClass';
 import CounterAnimationEditorModal from '../editors/CounterAnimationEditorModal';
 
 interface CounterAnimationPickerProps {
@@ -281,8 +286,8 @@ const CounterAnimationPicker = ({
                   type="button"
                   className={`${pickerMoreButtonClass} ${
                     isSelected || menu.menuKey === preset.id
-                      ? 'opacity-100'
-                      : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                      ? pickerMoreButtonVisibleClass
+                      : pickerMoreButtonHiddenClass
                   } ${
                     isSelected
                       ? 'text-fg hover:text-fg'
diff --git a/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx b/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
index 15634ac2..e4d8292f 100644
--- a/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/FontPicker.tsx
@@ -7,7 +7,12 @@ import { convertFileSrc } from '@tauri-apps/api/core';
 import Modal from '@components/main/Modal/Modal';
 import ListPopup, { type ListItem } from '@components/main/Modal/ListPopup';
 import CommonListPickerPage from './CommonListPickerPage';
-import { pickerRowClass, pickerMoreButtonClass } from './pickerRowClass';
+import {
+  pickerRowClass,
+  pickerMoreButtonClass,
+  pickerMoreButtonVisibleClass,
+  pickerMoreButtonHiddenClass,
+} from './pickerRowClass';
 import MoreVerticalIcon from './MoreVerticalIcon';
 import { usePickerItemMenu } from '@hooks/usePickerItemMenu';
 import { useFontLibrary } from '@hooks/useFontLibrary';
@@ -347,7 +352,7 @@ const FontPicker = ({
                 <input
                   ref={renameInputRef}
                   type="text"
-                  className="min-w-0 flex-1 bg-transparent border-none p-0 outline-none text-style-4 text-fg caret-accent"
+                  className="min-w-0 flex-1 bg-transparent border-none p-0 outline-none text-label text-fg caret-accent"
                   value={renameValue}
                   onChange={(event) => setRenameValue(event.target.value)}
                   onBlur={() => {
@@ -382,8 +387,8 @@ const FontPicker = ({
                   type="button"
                   className={`${pickerMoreButtonClass} ${
                     isSelected || menu.menuKey === font.id
-                      ? 'opacity-100'
-                      : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                      ? pickerMoreButtonVisibleClass
+                      : pickerMoreButtonHiddenClass
                   } ${
                     isSelected
                       ? 'text-fg hover:text-fg'
@@ -469,9 +474,9 @@ const FontPicker = ({
       {webFontModal ? (
         <Suspense
           fallback={
-            <Modal onClick={() => setWebFontModal(null)}>
+            <Modal onClick={() => setWebFontModal(null)} ariaLabel="로딩 중...">
               <div
-                className="w-[640px] max-w-[calc(100vw-80px)] h-[335px] flex items-center justify-center bg-elevated rounded-surface"
+                className="w-[640px] max-w-[calc(100vw-80px)] h-[335px] flex items-center justify-center bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
                 onClick={(event) => event.stopPropagation()}
               >
                 <p className="text-body leading-[16px] text-fg-muted">
diff --git a/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx b/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx
index a1aa340b..91cb816a 100644
--- a/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/ImagePicker.tsx
@@ -187,7 +187,7 @@ const ImagePicker = ({
     >
       <div
         ref={pickerContainerRef}
-        className="flex flex-col p-[8px] gap-[8px] w-[172px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3"
+        className="flex flex-col p-[8px] gap-[8px] w-[172px] bg-glass-heavy backdrop-blur-[32px] rounded-popup shadow-elevation-3"
         style={{
           visibility: panelElement && !fixedPosition ? 'hidden' : undefined,
         }}
diff --git a/src/renderer/components/main/Modal/content/pickers/Palette.tsx b/src/renderer/components/main/Modal/content/pickers/Palette.tsx
index 9c966d64..a240d515 100644
--- a/src/renderer/components/main/Modal/content/pickers/Palette.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/Palette.tsx
@@ -52,7 +52,7 @@ const Palette = ({ color, onColorChange }: PaletteProps) => {
 
   return (
     <div
-      className="flex flex-col justify-between rounded-lg bg-glass backdrop-blur-[24px] shadow-elevation-2 p-[8px]"
+      className="flex flex-col justify-between rounded-popup bg-glass backdrop-blur-[24px] shadow-elevation-2 p-[8px]"
       onClick={(e) => e.stopPropagation()}
     >
       <div className="grid grid-cols-5 gap-x-[8px] gap-y-[8px]">
@@ -69,7 +69,7 @@ const Palette = ({ color, onColorChange }: PaletteProps) => {
         placeholder="#FFFFFF"
         value={color}
         onChange={(e) => handleColorChange(e.target.value)}
-        className="w-[142px] h-[22px] mt-[10px] rounded-md bg-inset border-line border-[1px] focus:border-accent transition-colors duration-fast px-[10px] flex items-center text-style-3 text-fg"
+        className="w-[142px] h-[22px] mt-[10px] rounded-md bg-inset focus:shadow-focus-ring px-[10px] flex items-center text-body text-fg"
       />
     </div>
   );
diff --git a/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx b/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
index 9f8387be..1c759008 100644
--- a/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/SoundPicker.tsx
@@ -3,7 +3,12 @@ import { useTranslation } from '@contexts/useTranslation';
 import type { SoundListItem } from '@src/types/plugin/api';
 import ListPopup, { type ListItem } from '@components/main/Modal/ListPopup';
 import CommonListPickerPage from './CommonListPickerPage';
-import { pickerRowClass, pickerMoreButtonClass } from './pickerRowClass';
+import {
+  pickerRowClass,
+  pickerMoreButtonClass,
+  pickerMoreButtonVisibleClass,
+  pickerMoreButtonHiddenClass,
+} from './pickerRowClass';
 import MoreVerticalIcon from './MoreVerticalIcon';
 import { usePickerItemMenu } from '@hooks/usePickerItemMenu';
 import SoundTrimModal from '../managers/SoundTrimModal';
@@ -257,7 +262,7 @@ const SoundPicker = ({
                 <input
                   ref={renameInputRef}
                   type="text"
-                  className="min-w-0 flex-1 bg-transparent border-none p-0 outline-none text-style-4 text-fg caret-accent"
+                  className="min-w-0 flex-1 bg-transparent border-none p-0 outline-none text-label text-fg caret-accent"
                   value={renameValue}
                   onChange={(event) => setRenameValue(event.target.value)}
                   onBlur={() => {
@@ -288,8 +293,8 @@ const SoundPicker = ({
                 type="button"
                 className={`${pickerMoreButtonClass} ${
                   isSelected || menu.menuKey === item.soundPath
-                    ? 'opacity-100'
-                    : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'
+                    ? pickerMoreButtonVisibleClass
+                    : pickerMoreButtonHiddenClass
                 } ${
                   isSelected
                     ? 'text-fg hover:text-fg'
diff --git a/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx b/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
index b4a8d944..c410735c 100644
--- a/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
+++ b/src/renderer/components/main/Modal/content/pickers/WebFontInputModal.tsx
@@ -262,9 +262,12 @@ const WebFontInputModal = ({
   if (!isOpen) return null;
 
   return (
-    <Modal onClick={handleClose}>
+    <Modal
+      onClick={handleClose}
+      ariaLabel={t('webFontInput.cssLabel') || '@font-face CSS'}
+    >
       <div
-        className="w-[640px] max-w-[calc(100vw-80px)] flex flex-col bg-fill-faint rounded-surface overflow-hidden"
+        className="w-[640px] max-w-[calc(100vw-80px)] flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 overflow-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="h-[37px] bg-fill-faint px-[12px] flex items-center justify-between">
@@ -301,7 +304,7 @@ const WebFontInputModal = ({
 
         <div className="bg-fill-faint px-[12px] py-[10px] flex items-center justify-end gap-[8px]">
           <button
-            className={`w-[120px] h-[30px] rounded-lg text-label transition-colors duration-fast ${
+            className={`w-[120px] h-[30px] rounded-surface text-label transition-colors duration-fast ${
               canSubmit
                 ? 'bg-accent text-accent-fg hover:bg-accent-hover active:bg-accent-active'
                 : 'bg-fill-faint text-fg-disabled cursor-not-allowed'
@@ -312,7 +315,7 @@ const WebFontInputModal = ({
             {submitButtonLabel}
           </button>
           <button
-            className="px-[24px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="px-[24px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             onClick={handleClose}
           >
             {t('common.cancel') || '취소'}
diff --git a/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts b/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
index 5df9678d..91a3fec8 100644
--- a/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
+++ b/src/renderer/components/main/Modal/content/pickers/pickerRowClass.ts
@@ -2,9 +2,17 @@
 
 // 인셋 웰(테이블) 내부의 필 행 — 30 컨트롤 스케일, 웰과 동심 라운딩
 export const pickerRowClass =
-  'w-full h-[30px] px-[8px] rounded-md text-style-4 transition-colors flex items-center gap-[4px] group';
+  'w-full h-[30px] px-[8px] rounded-md text-label transition-colors flex items-center gap-[4px] group';
 
-// 행 트레일링 ⋮ 버튼 — 28px(30 행 스케일).
-// -mr-8: 버튼을 행 패딩 안쪽까지 확장해 아이콘 시각 인셋을 텍스트(8px)와 대칭으로
+// 행 트레일링 ⋮ 버튼 — 28px(30 행 스케일)
+// 숨김 상태는 폭까지 접어(w-0) 이름이 조기 잘리지 않게 함
 export const pickerMoreButtonClass =
-  'w-[28px] h-[28px] -mr-[8px] rounded-md transition-all flex items-center justify-center shrink-0';
+  'h-[28px] rounded-md transition-[color,opacity] flex items-center justify-center shrink-0 overflow-hidden';
+
+// 보이는 상태 — -mr-8: 버튼을 행 패딩 안쪽까지 확장해 아이콘 시각 인셋을 텍스트(8px)와 대칭으로
+export const pickerMoreButtonVisibleClass = 'w-[28px] -mr-[8px] opacity-100';
+
+// 숨김 상태 — 행 호버 또는 버튼 자체 키보드 포커스에서만 등장
+// (group-focus-within 금지: 행 자체가 tabindex를 가져 클릭 포커스만으로 계속 떠 있게 됨)
+export const pickerMoreButtonHiddenClass =
+  'w-0 mr-0 opacity-0 group-hover:w-[28px] group-hover:-mr-[8px] group-hover:opacity-100 focus-visible:w-[28px] focus-visible:-mr-[8px] focus-visible:opacity-100';
diff --git a/src/renderer/components/main/Modal/content/settings/CounterTabContent.tsx b/src/renderer/components/main/Modal/content/settings/CounterTabContent.tsx
index af031a49..b5a6268d 100644
--- a/src/renderer/components/main/Modal/content/settings/CounterTabContent.tsx
+++ b/src/renderer/components/main/Modal/content/settings/CounterTabContent.tsx
@@ -8,6 +8,10 @@ import React, {
 import { useTranslation } from '@contexts/useTranslation';
 import Dropdown from '@components/main/common/Dropdown';
 import Checkbox from '@components/main/common/Checkbox';
+import {
+  PropertyRow,
+  PropertySection,
+} from '@components/main/Grid/PropertiesPanel/PropertyInputs';
 import type {
   CounterTabState,
   CounterPreviewData,
@@ -159,7 +163,7 @@ const CounterTabContent = forwardRef<
   const colorButtonClass = (active: boolean) =>
     `relative px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
       active ? 'shadow-focus-ring' : ''
-    } text-fg text-style-2`;
+    } text-fg text-label`;
 
   // 컬러 프리뷰 박스
   const renderColorSquare = (style: React.CSSProperties) => (
@@ -283,147 +287,143 @@ const CounterTabContent = forwardRef<
   };
 
   return (
-    <div className="flex flex-col gap-[19px]">
-      {/* 배치 영역 */}
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">
-          {t('counterSetting.placementArea')}
-        </p>
-        <Dropdown
-          options={placementOptions}
-          value={state.placement}
-          onChange={handlePlacementChange}
-        />
-      </div>
-
-      {/* 정렬 방향 */}
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">
-          {t('counterSetting.alignDirection')}
-        </p>
-        <div ref={alignDropdownWrapperRef}>
+    <div className="flex flex-col gap-[12px]">
+      {/* 배치·정렬 카드 */}
+      <PropertySection>
+        <PropertyRow label={t('counterSetting.placementArea')}>
           <Dropdown
-            options={alignOptions}
-            value={state.align}
-            onChange={handleAlignChange}
+            options={placementOptions}
+            value={state.placement}
+            onChange={handlePlacementChange}
           />
-        </div>
-      </div>
+        </PropertyRow>
 
-      {/* 정렬 방식 (내부 배치 전용) */}
-      {state.placement === 'inside' && (
-        <div className="flex justify-between w-full items-center">
+        {/* 정렬 방향 */}
+        <div className="flex justify-between items-center w-full min-h-[32px]">
           <p className="text-fg-muted text-label">
-            {t('counterSetting.alignMode')}
+            {t('counterSetting.alignDirection')}
           </p>
-          <Dropdown
-            options={alignModeOptions}
-            value={state.alignMode}
-            onChange={handleAlignModeChange}
-          />
+          <div ref={alignDropdownWrapperRef}>
+            <Dropdown
+              options={alignOptions}
+              value={state.align}
+              onChange={handleAlignChange}
+            />
+          </div>
         </div>
-      )}
-
-      {/* 간격 */}
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">{t('counterSetting.gap')}</p>
-        <input
-          type="text"
-          value={state.displayGap}
-          onChange={handleGapChange}
-          onFocus={() =>
-            setState((prev) => ({
-              ...prev,
-              isGapFocused: true,
-              displayGap: String(prev.gap),
-            }))
-          }
-          onBlur={handleGapBlur}
-          className="text-center h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
-          style={{
-            width: alignDropdownWidth ? `${alignDropdownWidth}px` : undefined,
-          }}
-        />
-      </div>
-
-      {/* 채우기 */}
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">{t('counterSetting.fill')}</p>
-        <div ref={fillGroupRef} className="flex items-center gap-[8px]">
-          <button
-            ref={fillIdleBtnRef}
-            type="button"
-            className={colorButtonClass(
-              state.pickerOpen && state.pickerFor === 'fillIdle',
-            )}
-            onClick={() => handleColorToggle('fillIdle')}
-          >
-            {renderColorSquare({ backgroundColor: state.fillIdle })}
-            <span className="ml-[16px] text-left">
-              {t('counterSetting.idle')}
-            </span>
-          </button>
-          <button
-            ref={fillActiveBtnRef}
-            type="button"
-            className={colorButtonClass(
-              state.pickerOpen && state.pickerFor === 'fillActive',
-            )}
-            onClick={() => handleColorToggle('fillActive')}
-          >
-            {renderColorSquare({ backgroundColor: state.fillActive })}
-            <span className="ml-[16px] text-left">
-              {t('counterSetting.active')}
-            </span>
-          </button>
+
+        {/* 정렬 방식 (내부 배치 전용) */}
+        {state.placement === 'inside' && (
+          <PropertyRow label={t('counterSetting.alignMode')}>
+            <Dropdown
+              options={alignModeOptions}
+              value={state.alignMode}
+              onChange={handleAlignModeChange}
+            />
+          </PropertyRow>
+        )}
+
+        <PropertyRow label={t('counterSetting.gap')}>
+          <input
+            type="text"
+            value={state.displayGap}
+            onChange={handleGapChange}
+            onFocus={() =>
+              setState((prev) => ({
+                ...prev,
+                isGapFocused: true,
+                displayGap: String(prev.gap),
+              }))
+            }
+            onBlur={handleGapBlur}
+            className="text-center h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg"
+            style={{
+              width: alignDropdownWidth ? `${alignDropdownWidth}px` : undefined,
+            }}
+          />
+        </PropertyRow>
+      </PropertySection>
+
+      {/* 색상 카드 */}
+      <PropertySection>
+        {/* 채우기 */}
+        <div className="flex justify-between items-center w-full min-h-[32px]">
+          <p className="text-fg-muted text-label">{t('counterSetting.fill')}</p>
+          <div ref={fillGroupRef} className="flex items-center gap-[8px]">
+            <button
+              ref={fillIdleBtnRef}
+              type="button"
+              className={colorButtonClass(
+                state.pickerOpen && state.pickerFor === 'fillIdle',
+              )}
+              onClick={() => handleColorToggle('fillIdle')}
+            >
+              {renderColorSquare({ backgroundColor: state.fillIdle })}
+              <span className="ml-[16px] text-left">
+                {t('counterSetting.idle')}
+              </span>
+            </button>
+            <button
+              ref={fillActiveBtnRef}
+              type="button"
+              className={colorButtonClass(
+                state.pickerOpen && state.pickerFor === 'fillActive',
+              )}
+              onClick={() => handleColorToggle('fillActive')}
+            >
+              {renderColorSquare({ backgroundColor: state.fillActive })}
+              <span className="ml-[16px] text-left">
+                {t('counterSetting.active')}
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-
-      {/* 외곽선 */}
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">{t('counterSetting.stroke')}</p>
-        <div ref={strokeGroupRef} className="flex items-center gap-[8px]">
-          <button
-            ref={strokeIdleBtnRef}
-            type="button"
-            className={colorButtonClass(
-              state.pickerOpen && state.pickerFor === 'strokeIdle',
-            )}
-            onClick={() => handleColorToggle('strokeIdle')}
-          >
-            {renderColorSquare({ backgroundColor: state.strokeIdle })}
-            <span className="ml-[16px] text-left">
-              {t('counterSetting.idle')}
-            </span>
-          </button>
-          <button
-            ref={strokeActiveBtnRef}
-            type="button"
-            className={colorButtonClass(
-              state.pickerOpen && state.pickerFor === 'strokeActive',
-            )}
-            onClick={() => handleColorToggle('strokeActive')}
-          >
-            {renderColorSquare({ backgroundColor: state.strokeActive })}
-            <span className="ml-[16px] text-left">
-              {t('counterSetting.active')}
-            </span>
-          </button>
+
+        {/* 외곽선 */}
+        <div className="flex justify-between items-center w-full min-h-[32px]">
+          <p className="text-fg-muted text-label">
+            {t('counterSetting.stroke')}
+          </p>
+          <div ref={strokeGroupRef} className="flex items-center gap-[8px]">
+            <button
+              ref={strokeIdleBtnRef}
+              type="button"
+              className={colorButtonClass(
+                state.pickerOpen && state.pickerFor === 'strokeIdle',
+              )}
+              onClick={() => handleColorToggle('strokeIdle')}
+            >
+              {renderColorSquare({ backgroundColor: state.strokeIdle })}
+              <span className="ml-[16px] text-left">
+                {t('counterSetting.idle')}
+              </span>
+            </button>
+            <button
+              ref={strokeActiveBtnRef}
+              type="button"
+              className={colorButtonClass(
+                state.pickerOpen && state.pickerFor === 'strokeActive',
+              )}
+              onClick={() => handleColorToggle('strokeActive')}
+            >
+              {renderColorSquare({ backgroundColor: state.strokeActive })}
+              <span className="ml-[16px] text-left">
+                {t('counterSetting.active')}
+              </span>
+            </button>
+          </div>
         </div>
-      </div>
-
-      <div className="h-px w-full bg-line" />
-
-      {/* 카운터 사용 */}
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">
-          {t('counterSetting.counterEnabled')}
-        </p>
-        <Checkbox
-          checked={state.counterEnabled}
-          onChange={handleCounterToggle}
-        />
-      </div>
+      </PropertySection>
+
+      {/* 카운터 사용 카드 */}
+      <PropertySection>
+        <PropertyRow label={t('counterSetting.counterEnabled')}>
+          <Checkbox
+            checked={state.counterEnabled}
+            onChange={handleCounterToggle}
+          />
+        </PropertyRow>
+      </PropertySection>
     </div>
   );
 });
diff --git a/src/renderer/components/main/Modal/content/settings/KeyTabContent.tsx b/src/renderer/components/main/Modal/content/settings/KeyTabContent.tsx
index 6ee09b6a..b6d7efa0 100644
--- a/src/renderer/components/main/Modal/content/settings/KeyTabContent.tsx
+++ b/src/renderer/components/main/Modal/content/settings/KeyTabContent.tsx
@@ -6,6 +6,10 @@ import React, {
 } from 'react';
 import { useTranslation } from '@contexts/useTranslation';
 import { useSettingsStore } from '@stores/useSettingsStore';
+import {
+  PropertyRow,
+  PropertySection,
+} from '@components/main/Grid/PropertiesPanel/PropertyInputs';
 import { getKeyInfoByGlobalKey } from '@utils/core/KeyMaps';
 import type {
   KeyTabState,
@@ -226,124 +230,129 @@ const KeyTabContent = forwardRef<KeyTabContentRef, KeyTabContentProps>(
     };
 
     return (
-      <div className="flex flex-col gap-[19px]">
-        {/* 키 매핑 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('keySetting.keyMapping')}
-          </p>
-          <button
-            onClick={handleKeyListen}
-            className={`flex items-center justify-center h-[23px] min-w-[0px] px-[8px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md ${
-              state.isListening ? 'shadow-focus-ring' : ''
-            } text-fg text-style-2`}
-          >
-            {state.isListening
-              ? t('keySetting.pressAnyKey')
-              : state.displayKey || t('keySetting.clickToSet')}
-          </button>
-        </div>
-
-        {/* 키 사이즈 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">{t('keySetting.keySize')}</p>
-          <div className="flex items-center gap-[10.5px]">
-            <div
-              className={`relative w-[54px] h-[23px] bg-inset rounded-md ${
-                state.widthFocused ? 'shadow-focus-ring' : ''
-              }`}
+      <div className="flex flex-col gap-[12px]">
+        {/* 키 매핑·사이즈 카드 */}
+        <PropertySection>
+          <PropertyRow label={t('keySetting.keyMapping')}>
+            <button
+              onClick={handleKeyListen}
+              className={`flex items-center justify-center h-[23px] min-w-[0px] px-[8px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md ${
+                state.isListening ? 'shadow-focus-ring' : ''
+              } text-fg text-label`}
             >
-              <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-style-1 pointer-events-none">
-                X
-              </span>
-              <input
-                type="number"
-                value={state.width}
-                onChange={handleWidthChange}
-                onFocus={() =>
-                  setState((prev) => ({ ...prev, widthFocused: true }))
-                }
-                onBlur={(e) => {
-                  setState((prev) => {
-                    const val = e.target.value;
-                    const finalVal =
-                      val === '' || Number.isNaN(parseInt(val, 10))
-                        ? 60
-                        : parseInt(val, 10);
-                    return { ...prev, width: finalVal, widthFocused: false };
-                  });
-                }}
-                className="absolute left-[20px] top-[-1px] h-[23px] w-[26px] bg-transparent text-style-4 text-fg text-left"
-              />
-            </div>
-            <div
-              className={`relative w-[54px] h-[23px] bg-inset rounded-md ${
-                state.heightFocused ? 'shadow-focus-ring' : ''
-              }`}
-            >
-              <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-style-1 pointer-events-none">
-                Y
-              </span>
-              <input
-                type="number"
-                value={state.height}
-                onChange={handleHeightChange}
-                onFocus={() =>
-                  setState((prev) => ({ ...prev, heightFocused: true }))
-                }
-                onBlur={(e) => {
-                  setState((prev) => {
-                    const val = e.target.value;
-                    const finalVal =
-                      val === '' || Number.isNaN(parseInt(val, 10))
-                        ? 60
-                        : parseInt(val, 10);
-                    return { ...prev, height: finalVal, heightFocused: false };
-                  });
-                }}
-                className="absolute left-[20px] top-[-1px] h-[23px] w-[26px] bg-transparent text-style-4 text-fg text-left"
-              />
+              {state.isListening
+                ? t('keySetting.pressAnyKey')
+                : state.displayKey || t('keySetting.clickToSet')}
+            </button>
+          </PropertyRow>
+
+          {/* 키 사이즈 */}
+          <div className="flex justify-between items-center w-full min-h-[32px]">
+            <p className="text-fg-muted text-label">
+              {t('keySetting.keySize')}
+            </p>
+            <div className="flex items-center gap-[10.5px]">
+              <div
+                className={`relative w-[54px] h-[23px] bg-inset rounded-md ${
+                  state.widthFocused ? 'shadow-focus-ring' : ''
+                }`}
+              >
+                <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-body pointer-events-none">
+                  X
+                </span>
+                <input
+                  type="number"
+                  value={state.width}
+                  onChange={handleWidthChange}
+                  onFocus={() =>
+                    setState((prev) => ({ ...prev, widthFocused: true }))
+                  }
+                  onBlur={(e) => {
+                    setState((prev) => {
+                      const val = e.target.value;
+                      const finalVal =
+                        val === '' || Number.isNaN(parseInt(val, 10))
+                          ? 60
+                          : parseInt(val, 10);
+                      return { ...prev, width: finalVal, widthFocused: false };
+                    });
+                  }}
+                  className="absolute left-[20px] top-0 h-[23px] w-[26px] bg-transparent text-body tabular-nums text-fg text-left"
+                />
+              </div>
+              <div
+                className={`relative w-[54px] h-[23px] bg-inset rounded-md ${
+                  state.heightFocused ? 'shadow-focus-ring' : ''
+                }`}
+              >
+                <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-body pointer-events-none">
+                  Y
+                </span>
+                <input
+                  type="number"
+                  value={state.height}
+                  onChange={handleHeightChange}
+                  onFocus={() =>
+                    setState((prev) => ({ ...prev, heightFocused: true }))
+                  }
+                  onBlur={(e) => {
+                    setState((prev) => {
+                      const val = e.target.value;
+                      const finalVal =
+                        val === '' || Number.isNaN(parseInt(val, 10))
+                          ? 60
+                          : parseInt(val, 10);
+                      return {
+                        ...prev,
+                        height: finalVal,
+                        heightFocused: false,
+                      };
+                    });
+                  }}
+                  className="absolute left-[20px] top-0 h-[23px] w-[26px] bg-transparent text-body tabular-nums text-fg text-left"
+                />
+              </div>
             </div>
           </div>
-        </div>
-
-        {/* 커스텀 이미지 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('keySetting.customImage')}
-          </p>
-          <button
-            ref={imageButtonRef}
-            type="button"
-            className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
-              state.showImagePicker ? 'shadow-focus-ring' : ''
-            } text-fg text-style-4`}
-            onClick={() =>
-              setState((prev) => ({
-                ...prev,
-                showImagePicker: !prev.showImagePicker,
-              }))
-            }
-          >
-            {t('keySetting.configure')}
-          </button>
-        </div>
-
-        {/* 클래스 이름 - 커스텀 CSS 활성화 시에만 표시 */}
-        {useCustomCSS && (
-          <div className="flex justify-between w-full items-center">
+        </PropertySection>
+
+        {/* 외형 커스터마이징 카드 */}
+        <PropertySection>
+          {/* 커스텀 이미지 */}
+          <div className="flex justify-between items-center w-full min-h-[32px]">
             <p className="text-fg-muted text-label">
-              {t('keySetting.className')}
+              {t('keySetting.customImage')}
             </p>
-            <input
-              type="text"
-              value={state.className}
-              onChange={handleClassNameChange}
-              placeholder="className"
-              className="text-center w-[90px] h-[23px] p-[6px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
-            />
+            <button
+              ref={imageButtonRef}
+              type="button"
+              className={`px-[8px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
+                state.showImagePicker ? 'shadow-focus-ring' : ''
+              } text-fg text-body`}
+              onClick={() =>
+                setState((prev) => ({
+                  ...prev,
+                  showImagePicker: !prev.showImagePicker,
+                }))
+              }
+            >
+              {t('keySetting.configure')}
+            </button>
           </div>
-        )}
+
+          {/* 클래스 이름 - 커스텀 CSS 활성화 시에만 표시 */}
+          {useCustomCSS && (
+            <PropertyRow label={t('keySetting.className')}>
+              <input
+                type="text"
+                value={state.className}
+                onChange={handleClassNameChange}
+                placeholder="className"
+                className="text-center w-[90px] h-[23px] p-[6px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg"
+              />
+            </PropertyRow>
+          )}
+        </PropertySection>
       </div>
     );
   },
diff --git a/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx b/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
index 417a163f..8e846dc0 100644
--- a/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
+++ b/src/renderer/components/main/Modal/content/settings/NoteSetting.tsx
@@ -1,6 +1,10 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Checkbox from '@components/main/common/Checkbox';
 import TabSwitch from '@components/main/common/TabSwitch';
+import {
+  PropertyRow,
+  PropertySection,
+} from '@components/main/Grid/PropertiesPanel/PropertyInputs';
 import Modal from '../../Modal';
 import { useTranslation } from '@contexts/useTranslation';
 import {
@@ -16,7 +20,7 @@ const ADVANCED_TAB = 'advanced' as const;
 type TabId = typeof NOTE_TAB | typeof ADVANCED_TAB;
 
 const INPUT_CLASS =
-  'text-center h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg';
+  'text-center h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg';
 
 function sanitizeNumericValue(
   value: string | number | undefined,
@@ -206,83 +210,70 @@ const NoteSetting = ({
 
   const renderNoteTab = () => (
     <div className="flex flex-col gap-[12px]">
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">
-          {t('noteSetting.frameLimit')}
-        </p>
-        <input
-          type="number"
-          min={NOTE_SETTINGS_CONSTRAINTS.frameLimit.min}
-          max={NOTE_SETTINGS_CONSTRAINTS.frameLimit.max}
-          value={frameLimit}
-          onChange={(e) => setFrameLimit(e.target.value)}
-          onBlur={() =>
-            setFrameLimit(
-              String(sanitizeNumericValue(frameLimit, 'frameLimit')),
-            )
-          }
-          className={`${INPUT_CLASS} w-[47px]`}
-        />
-      </div>
-
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">{t('noteSetting.speed')}</p>
-        <input
-          type="number"
-          min={NOTE_SETTINGS_CONSTRAINTS.speed.min}
-          max={NOTE_SETTINGS_CONSTRAINTS.speed.max}
-          value={speed}
-          onChange={(e) => setSpeed(e.target.value)}
-          onBlur={() => setSpeed(String(sanitizeNumericValue(speed, 'speed')))}
-          className={`${INPUT_CLASS} w-[47px]`}
-        />
-      </div>
-
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">
-          {t('noteSetting.trackHeight')}
-        </p>
-        <input
-          type="number"
-          min={NOTE_SETTINGS_CONSTRAINTS.trackHeight.min}
-          max={NOTE_SETTINGS_CONSTRAINTS.trackHeight.max}
-          value={trackHeight}
-          onChange={(e) => setTrackHeight(e.target.value)}
-          onBlur={() =>
-            setTrackHeight(
-              String(sanitizeNumericValue(trackHeight, 'trackHeight')),
-            )
-          }
-          className={`${INPUT_CLASS} w-[47px]`}
-        />
-      </div>
-
-      <div className="flex justify-between w-full items-center h-[23px]">
-        <p className="text-fg-muted text-label">
-          {t('noteSetting.reverseEffect')}
-        </p>
-        <Checkbox
-          checked={reverse}
-          onChange={() => setReverse((prev) => !prev)}
-        />
-      </div>
-
-      <div className="flex justify-between w-full items-center min-h-[23px]">
-        <p className="text-fg-muted text-label">
-          {t('noteSetting.fade')}
-          {reverse ? ' (R)' : ''}
-        </p>
-        <div className="flex items-center gap-[8px]">
+      <PropertySection>
+        <PropertyRow label={t('noteSetting.frameLimit')}>
+          <input
+            type="number"
+            min={NOTE_SETTINGS_CONSTRAINTS.frameLimit.min}
+            max={NOTE_SETTINGS_CONSTRAINTS.frameLimit.max}
+            value={frameLimit}
+            onChange={(e) => setFrameLimit(e.target.value)}
+            onBlur={() =>
+              setFrameLimit(
+                String(sanitizeNumericValue(frameLimit, 'frameLimit')),
+              )
+            }
+            className={`${INPUT_CLASS} w-[47px]`}
+          />
+        </PropertyRow>
+        <PropertyRow label={t('noteSetting.speed')}>
+          <input
+            type="number"
+            min={NOTE_SETTINGS_CONSTRAINTS.speed.min}
+            max={NOTE_SETTINGS_CONSTRAINTS.speed.max}
+            value={speed}
+            onChange={(e) => setSpeed(e.target.value)}
+            onBlur={() =>
+              setSpeed(String(sanitizeNumericValue(speed, 'speed')))
+            }
+            className={`${INPUT_CLASS} w-[47px]`}
+          />
+        </PropertyRow>
+        <PropertyRow label={t('noteSetting.trackHeight')}>
+          <input
+            type="number"
+            min={NOTE_SETTINGS_CONSTRAINTS.trackHeight.min}
+            max={NOTE_SETTINGS_CONSTRAINTS.trackHeight.max}
+            value={trackHeight}
+            onChange={(e) => setTrackHeight(e.target.value)}
+            onBlur={() =>
+              setTrackHeight(
+                String(sanitizeNumericValue(trackHeight, 'trackHeight')),
+              )
+            }
+            className={`${INPUT_CLASS} w-[47px]`}
+          />
+        </PropertyRow>
+      </PropertySection>
+
+      <PropertySection>
+        <PropertyRow label={t('noteSetting.reverseEffect')}>
+          <Checkbox
+            checked={reverse}
+            onChange={() => setReverse((prev) => !prev)}
+          />
+        </PropertyRow>
+        <PropertyRow label={`${t('noteSetting.fade')}${reverse ? ' (R)' : ''}`}>
           <div
             className="relative h-[23px] bg-inset rounded-md"
             style={{ width: '54px' }}
           >
             <svg
-              className="absolute left-[5px] top-[50%] transform -translate-y-1/2 pointer-events-none"
+              className="absolute left-[5px] top-[50%] transform -translate-y-1/2 pointer-events-none text-fg-muted"
               width="12"
               height="12"
               viewBox="0 0 14 14"
-              fill="#97999E"
+              fill="currentColor"
             >
               <rect x="2" y="2" width="10" height="2" opacity="0.2" rx="1" />
               <rect x="2" y="6" width="10" height="2" opacity="0.6" rx="1" />
@@ -313,7 +304,7 @@ const NoteSetting = ({
                     String(sanitizeNumericValue(fadeTopPx, 'fadeTopPx')),
                   );
               }}
-              className="absolute left-[20px] top-[-1px] h-[23px] w-[26px] bg-transparent text-style-4 text-fg text-center"
+              className="absolute left-[20px] top-0 h-[23px] w-[26px] bg-transparent text-body tabular-nums text-fg text-center"
             />
           </div>
           <div
@@ -321,11 +312,11 @@ const NoteSetting = ({
             style={{ width: '54px' }}
           >
             <svg
-              className="absolute left-[5px] top-[50%] transform -translate-y-1/2 pointer-events-none"
+              className="absolute left-[5px] top-[50%] transform -translate-y-1/2 pointer-events-none text-fg-muted"
               width="12"
               height="12"
               viewBox="0 0 14 14"
-              fill="#97999E"
+              fill="currentColor"
             >
               <rect x="2" y="2" width="10" height="2" opacity="1" rx="1" />
               <rect x="2" y="6" width="10" height="2" opacity="0.6" rx="1" />
@@ -356,112 +347,105 @@ const NoteSetting = ({
                     String(sanitizeNumericValue(fadeBottomPx, 'fadeBottomPx')),
                   );
               }}
-              className="absolute left-[20px] top-[-1px] h-[23px] w-[26px] bg-transparent text-style-4 text-fg text-center"
+              className="absolute left-[20px] top-0 h-[23px] w-[26px] bg-transparent text-body tabular-nums text-fg text-center"
             />
           </div>
-        </div>
-      </div>
+        </PropertyRow>
+      </PropertySection>
     </div>
   );
 
   const renderAdvancedTab = () => (
     <div className="flex flex-col gap-[12px]">
-      <div className="flex justify-between w-full items-center h-[23px]">
-        <p className="text-fg-muted text-label">
-          {t('laboratory.delayToggle')}
-        </p>
-        <Checkbox
-          checked={delayedNoteEnabled}
-          onChange={() => setDelayedNoteEnabled((prev) => !prev)}
-        />
-      </div>
-
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">{t('laboratory.minLength')}</p>
-        <input
-          type="number"
-          min={NOTE_SETTINGS_CONSTRAINTS.shortNoteMinLengthPx.min}
-          max={NOTE_SETTINGS_CONSTRAINTS.shortNoteMinLengthPx.max}
-          value={shortNoteMinLengthPx}
-          onChange={(e) => setShortNoteMinLengthPx(e.target.value)}
-          onBlur={() =>
-            setShortNoteMinLengthPx(
-              String(
-                sanitizeNumericValue(
-                  shortNoteMinLengthPx,
-                  'shortNoteMinLengthPx',
+      <PropertySection>
+        <PropertyRow label={t('laboratory.delayToggle')}>
+          <Checkbox
+            checked={delayedNoteEnabled}
+            onChange={() => setDelayedNoteEnabled((prev) => !prev)}
+          />
+        </PropertyRow>
+        <PropertyRow label={t('laboratory.minLength')}>
+          <input
+            type="number"
+            min={NOTE_SETTINGS_CONSTRAINTS.shortNoteMinLengthPx.min}
+            max={NOTE_SETTINGS_CONSTRAINTS.shortNoteMinLengthPx.max}
+            value={shortNoteMinLengthPx}
+            onChange={(e) => setShortNoteMinLengthPx(e.target.value)}
+            onBlur={() =>
+              setShortNoteMinLengthPx(
+                String(
+                  sanitizeNumericValue(
+                    shortNoteMinLengthPx,
+                    'shortNoteMinLengthPx',
+                  ),
                 ),
-              ),
-            )
-          }
-          className={`${INPUT_CLASS} w-[47px]`}
-        />
-      </div>
-
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">{t('laboratory.threshold')}</p>
-        <input
-          type="number"
-          min={NOTE_SETTINGS_CONSTRAINTS.shortNoteThresholdMs.min}
-          max={NOTE_SETTINGS_CONSTRAINTS.shortNoteThresholdMs.max}
-          value={shortNoteThresholdMs}
-          onChange={(e) => setShortNoteThresholdMs(e.target.value)}
-          onBlur={() =>
-            setShortNoteThresholdMs(
-              String(
-                sanitizeNumericValue(
-                  shortNoteThresholdMs,
-                  'shortNoteThresholdMs',
+              )
+            }
+            className={`${INPUT_CLASS} w-[47px]`}
+          />
+        </PropertyRow>
+        <PropertyRow label={t('laboratory.threshold')}>
+          <input
+            type="number"
+            min={NOTE_SETTINGS_CONSTRAINTS.shortNoteThresholdMs.min}
+            max={NOTE_SETTINGS_CONSTRAINTS.shortNoteThresholdMs.max}
+            value={shortNoteThresholdMs}
+            onChange={(e) => setShortNoteThresholdMs(e.target.value)}
+            onBlur={() =>
+              setShortNoteThresholdMs(
+                String(
+                  sanitizeNumericValue(
+                    shortNoteThresholdMs,
+                    'shortNoteThresholdMs',
+                  ),
                 ),
-              ),
-            )
-          }
-          className={`${INPUT_CLASS} w-[47px]`}
-        />
-      </div>
-
-      <div className="w-full h-[1px] bg-line" />
-
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-muted text-label">{t('laboratory.keyDelay')}</p>
-        <input
-          type="number"
-          min={NOTE_SETTINGS_CONSTRAINTS.keyDisplayDelayMs.min}
-          max={NOTE_SETTINGS_CONSTRAINTS.keyDisplayDelayMs.max}
-          value={keyDisplayDelayMs}
-          onChange={(e) => setKeyDisplayDelayMs(e.target.value)}
-          onBlur={() =>
-            setKeyDisplayDelayMs(
-              String(
-                sanitizeNumericValue(keyDisplayDelayMs, 'keyDisplayDelayMs'),
-              ),
-            )
-          }
-          className={`${INPUT_CLASS} w-[47px]`}
-        />
-      </div>
-
-      <div className="flex justify-between w-full items-center">
-        <p className="text-fg-faint text-style-4">
-          {t('laboratory.keyDelayAuto', { value: calculatedDelay })}
-        </p>
-        <button
-          onClick={handleAutoCalculate}
-          className="px-[10px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-md text-fg text-style-4"
-        >
-          {t('laboratory.autoCalc')}
-        </button>
-      </div>
+              )
+            }
+            className={`${INPUT_CLASS} w-[47px]`}
+          />
+        </PropertyRow>
+      </PropertySection>
+
+      <PropertySection>
+        <PropertyRow label={t('laboratory.keyDelay')}>
+          <input
+            type="number"
+            min={NOTE_SETTINGS_CONSTRAINTS.keyDisplayDelayMs.min}
+            max={NOTE_SETTINGS_CONSTRAINTS.keyDisplayDelayMs.max}
+            value={keyDisplayDelayMs}
+            onChange={(e) => setKeyDisplayDelayMs(e.target.value)}
+            onBlur={() =>
+              setKeyDisplayDelayMs(
+                String(
+                  sanitizeNumericValue(keyDisplayDelayMs, 'keyDisplayDelayMs'),
+                ),
+              )
+            }
+            className={`${INPUT_CLASS} w-[47px]`}
+          />
+        </PropertyRow>
+        <div className="flex justify-between items-center w-full min-h-[32px]">
+          <p className="text-fg-faint text-body">
+            {t('laboratory.keyDelayAuto', { value: calculatedDelay })}
+          </p>
+          <button
+            onClick={handleAutoCalculate}
+            className="px-[10px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-md text-fg text-body"
+          >
+            {t('laboratory.autoCalc')}
+          </button>
+        </div>
+      </PropertySection>
     </div>
   );
 
   return (
-    <Modal onClick={onClose}>
+    <Modal onClick={onClose} ariaLabel={title ?? t('keySetting.tabNote')}>
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px]"
+        className="flex flex-col w-[264px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[14px]"
         onClick={(e) => e.stopPropagation()}
       >
-        {title && <p className="text-fg-muted text-label mb-[10px]">{title}</p>}
+        {title && <p className="text-fg-muted text-label mb-[12px]">{title}</p>}
         <TabSwitch
           tabs={[
             { id: NOTE_TAB, label: t('keySetting.tabNote') },
@@ -474,7 +458,7 @@ const NoteSetting = ({
               setActiveTab(tab as TabId);
             }
           }}
-          className="mb-[19px]"
+          className="mb-[12px]"
         />
 
         <div
@@ -498,16 +482,16 @@ const NoteSetting = ({
           </div>
         </div>
 
-        <div className="flex gap-[8px] mt-[19px]">
+        <div className="flex gap-[8px] mt-[12px]">
           <button
             onClick={handleSave}
-            className="w-[150px] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
+            className="flex-[2] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast"
           >
             {t('noteSetting.save')}
           </button>
           <button
             onClick={onClose}
-            className="w-[75px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
           >
             {t('noteSetting.cancel')}
           </button>
diff --git a/src/renderer/components/main/Modal/content/settings/NoteTabContent.tsx b/src/renderer/components/main/Modal/content/settings/NoteTabContent.tsx
index 74d981f6..073e0842 100644
--- a/src/renderer/components/main/Modal/content/settings/NoteTabContent.tsx
+++ b/src/renderer/components/main/Modal/content/settings/NoteTabContent.tsx
@@ -6,6 +6,10 @@ import React, {
 } from 'react';
 import { useTranslation } from '@contexts/useTranslation';
 import Checkbox from '@components/main/common/Checkbox';
+import {
+  PropertyRow,
+  PropertySection,
+} from '@components/main/Grid/PropertiesPanel/PropertyInputs';
 import {
   COLOR_MODES,
   toGradient,
@@ -308,64 +312,58 @@ const NoteTabContent = forwardRef<NoteTabContentRef, NoteTabContentProps>(
     };
 
     return (
-      <div className="flex flex-col gap-[19px]">
-        {/* 색상 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('keySetting.noteColor')}
-          </p>
-          <button
-            ref={colorButtonRef}
-            type="button"
-            className={`relative w-[80px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
-              state.showPicker ? 'shadow-focus-ring' : ''
-            } text-fg text-style-2`}
-            onClick={() =>
-              setState((prev) => ({ ...prev, showPicker: !prev.showPicker }))
-            }
-          >
-            <div
-              className="absolute left-[6px] top-[4.5px] w-[11px] h-[11px] rounded-[2px]"
-              style={renderColorPreview()}
-            />
-            <span className="ml-[16px] text-left">{colorLabel}</span>
-          </button>
-        </div>
-
-        {/* 노트 투명도 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('keySetting.noteOpacity')}
-          </p>
-          <input
-            type="text"
-            value={state.displayNoteOpacity}
-            onChange={handleOpacityChange}
-            onFocus={() =>
-              setState((prev) => ({
-                ...prev,
-                isFocused: true,
-                displayNoteOpacity: prev.noteOpacity.toString(),
-              }))
-            }
-            onBlur={handleOpacityBlur}
-            className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
-          />
-        </div>
-
-        <div className="h-px w-full bg-line" />
-
-        {/* 글로우 */}
-        <div className="flex flex-col gap-[19px]">
-          <div className="flex justify-between w-full items-center">
+      <div className="flex flex-col gap-[12px]">
+        {/* 노트 색상·투명도 카드 */}
+        <PropertySection>
+          {/* 색상 */}
+          <div className="flex justify-between items-center w-full min-h-[32px]">
             <p className="text-fg-muted text-label">
-              {t('keySetting.noteGlow')}
+              {t('keySetting.noteColor')}
             </p>
-            <Checkbox checked={state.glowEnabled} onChange={handleGlowToggle} />
+            <button
+              ref={colorButtonRef}
+              type="button"
+              className={`relative w-[80px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
+                state.showPicker ? 'shadow-focus-ring' : ''
+              } text-fg text-label`}
+              onClick={() =>
+                setState((prev) => ({ ...prev, showPicker: !prev.showPicker }))
+              }
+            >
+              <div
+                className="absolute left-[6px] top-[4.5px] w-[11px] h-[11px] rounded-[2px]"
+                style={renderColorPreview()}
+              />
+              <span className="ml-[16px] text-left">{colorLabel}</span>
+            </button>
           </div>
 
+          <PropertyRow label={t('keySetting.noteOpacity')}>
+            <input
+              type="text"
+              value={state.displayNoteOpacity}
+              onChange={handleOpacityChange}
+              onFocus={() =>
+                setState((prev) => ({
+                  ...prev,
+                  isFocused: true,
+                  displayNoteOpacity: prev.noteOpacity.toString(),
+                }))
+              }
+              onBlur={handleOpacityBlur}
+              className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg"
+            />
+          </PropertyRow>
+        </PropertySection>
+
+        {/* 글로우 카드 */}
+        <PropertySection>
+          <PropertyRow label={t('keySetting.noteGlow')}>
+            <Checkbox checked={state.glowEnabled} onChange={handleGlowToggle} />
+          </PropertyRow>
+
           <div
-            className={`flex justify-between w-full items-center ${
+            className={`flex justify-between items-center w-full min-h-[32px] ${
               !state.glowEnabled ? 'opacity-40' : ''
             }`}
           >
@@ -378,7 +376,7 @@ const NoteTabContent = forwardRef<NoteTabContentRef, NoteTabContentProps>(
               disabled={!state.glowEnabled}
               className={`relative w-[80px] h-[23px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md flex items-center justify-center ${
                 state.showGlowPicker ? 'shadow-focus-ring' : ''
-              } text-fg text-style-2`}
+              } text-fg text-label`}
               onClick={() => {
                 if (state.glowEnabled) {
                   setState((prev) => ({
@@ -397,7 +395,7 @@ const NoteTabContent = forwardRef<NoteTabContentRef, NoteTabContentProps>(
           </div>
 
           <div
-            className={`flex justify-between w-full items-center ${
+            className={`flex justify-between items-center w-full min-h-[32px] ${
               !state.glowEnabled ? 'opacity-40' : ''
             }`}
           >
@@ -418,12 +416,12 @@ const NoteTabContent = forwardRef<NoteTabContentRef, NoteTabContentProps>(
                 }))
               }
               onBlur={handleGlowSizeBlur}
-              className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
+              className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg"
             />
           </div>
 
           <div
-            className={`flex justify-between w-full items-center ${
+            className={`flex justify-between items-center w-full min-h-[32px] ${
               !state.glowEnabled ? 'opacity-40' : ''
             }`}
           >
@@ -443,38 +441,31 @@ const NoteTabContent = forwardRef<NoteTabContentRef, NoteTabContentProps>(
                 }))
               }
               onBlur={handleGlowOpacityBlur}
-              className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-style-4 text-fg"
+              className="text-center w-[47px] h-[23px] bg-inset rounded-md focus:shadow-focus-ring text-body tabular-nums text-fg"
             />
           </div>
-        </div>
-
-        <div className="h-px w-full bg-line" />
-
-        {/* 노트 효과 사용 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('keySetting.noteEffectEnabled')}
-          </p>
-          <Checkbox
-            checked={state.noteEffectEnabled}
-            onChange={handleNoteEffectToggle}
-          />
-        </div>
-
-        {/* Y축 자동 보정 */}
-        <div className="flex justify-between w-full items-center">
-          <p className="text-fg-muted text-label">
-            {t('keySetting.noteAutoYCorrection')}
-          </p>
-          <Checkbox
-            checked={state.autoYCorrection}
-            onChange={() => {
-              const newValue = !state.autoYCorrection;
-              setState((prev) => ({ ...prev, autoYCorrection: newValue }));
-              onPreview({ noteAutoYCorrection: newValue });
-            }}
-          />
-        </div>
+        </PropertySection>
+
+        {/* 노트 동작 카드 */}
+        <PropertySection>
+          <PropertyRow label={t('keySetting.noteEffectEnabled')}>
+            <Checkbox
+              checked={state.noteEffectEnabled}
+              onChange={handleNoteEffectToggle}
+            />
+          </PropertyRow>
+
+          <PropertyRow label={t('keySetting.noteAutoYCorrection')}>
+            <Checkbox
+              checked={state.autoYCorrection}
+              onChange={() => {
+                const newValue = !state.autoYCorrection;
+                setState((prev) => ({ ...prev, autoYCorrection: newValue }));
+                onPreview({ noteAutoYCorrection: newValue });
+              }}
+            />
+          </PropertyRow>
+        </PropertySection>
       </div>
     );
   },
diff --git a/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx b/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx
index 26ac5760..7ef57f49 100644
--- a/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx
+++ b/src/renderer/components/main/Modal/content/settings/ShortcutSettingsModal.tsx
@@ -332,7 +332,7 @@ const ShortcutSettingsModal = ({
       }}
     >
       <div
-        className="flex flex-col min-w-[320px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[12px]"
+        className="flex flex-col min-w-[320px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[14px]"
         onClick={(event) => event.stopPropagation()}
         onPointerDownCapture={(event) => {
           if (!isListening) return;
@@ -399,7 +399,7 @@ const ShortcutSettingsModal = ({
                           }}
                           className={`flex items-center justify-center h-[23px] min-w-[0px] px-[8px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md ${
                             isRowListening ? 'shadow-focus-ring' : ''
-                          } text-fg text-style-2`}
+                          } text-fg text-label`}
                         >
                           {display}
                         </button>
@@ -452,7 +452,7 @@ const ShortcutSettingsModal = ({
                           }}
                           className={`flex items-center justify-center h-[23px] min-w-[0px] px-[8px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md ${
                             isRowListening ? 'shadow-focus-ring' : ''
-                          } text-fg text-style-2`}
+                          } text-fg text-label`}
                         >
                           {display}
                         </button>
@@ -473,7 +473,7 @@ const ShortcutSettingsModal = ({
 
         <div className="flex gap-[8px] mt-[12px]">
           <button
-            className="flex-1 h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
+            className="flex-[2] h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast"
             onClick={handleSave}
             disabled={isListening}
             style={
@@ -483,7 +483,7 @@ const ShortcutSettingsModal = ({
             {t('shortcutSetting.save')}
           </button>
           <button
-            className="px-[24px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+            className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             onClick={onClose}
             disabled={isListening}
             style={
diff --git a/src/renderer/components/main/Settings.tsx b/src/renderer/components/main/Settings.tsx
index 07b98e32..45729d7d 100644
--- a/src/renderer/components/main/Settings.tsx
+++ b/src/renderer/components/main/Settings.tsx
@@ -80,8 +80,12 @@ interface SettingsProps {
   showConfirm: (
     msg: string,
     onConfirm: () => void,
-    onCancel?: () => void,
-    confirmText?: string,
+    options?: {
+      onCancel?: () => void;
+      confirmText?: string;
+      cancelText?: string;
+      danger?: boolean;
+    },
   ) => void;
 }
 
@@ -590,7 +594,7 @@ const Settings = ({
   };
 
   const actionButtonClass = (enabled: boolean): string =>
-    'inline-flex items-center h-[24px] px-[10px] rounded-md text-body transition-colors duration-fast ' +
+    'inline-flex items-center h-[23px] px-[10px] rounded-md text-body transition-colors duration-fast ' +
     (enabled
       ? 'bg-fill text-fg hover:bg-fill-hover active:bg-fill-active'
       : 'bg-fill-faint text-fg-disabled cursor-not-allowed');
@@ -707,8 +711,7 @@ const Settings = ({
           console.error('Failed to regenerate OBS token', error);
         }
       },
-      undefined,
-      t('settings.obsTokenRegenConfirm'),
+      { confirmText: t('settings.obsTokenRegenConfirm') },
     );
   };
 
@@ -773,12 +776,9 @@ const Settings = ({
     };
 
     if (showConfirm) {
-      showConfirm(
-        t('settings.resetAllConfirm'),
-        reset,
-        undefined,
-        t('settings.initialize'),
-      );
+      showConfirm(t('settings.resetAllConfirm'), reset, {
+        confirmText: t('settings.initialize'),
+      });
     } else {
       reset();
     }
@@ -823,7 +823,7 @@ const Settings = ({
         <div className="flex flex-row gap-[12px]">
           <div className="flex flex-col gap-[12px] w-[348px]">
             {/* 키뷰어 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-xl">
+            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
               <div
                 className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
                 onMouseEnter={() => setHoveredKey('overlayLock')}
@@ -932,7 +932,7 @@ const Settings = ({
               </div>
             </div>
             {/* 커스텀 CSS & JS 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-xl">
+            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
               <div
                 className="flex flex-col gap-[0px]"
                 onMouseEnter={() => setHoveredKey('customCSS')}
@@ -999,7 +999,7 @@ const Settings = ({
                       onClick={handleReloadPlugins}
                       disabled={!canReloadPlugins || isReloadingPlugins}
                       className={
-                        'flex items-center justify-center w-[24px] h-[24px] rounded-md transition-colors duration-fast ' +
+                        'flex items-center justify-center w-[23px] h-[23px] rounded-md transition-colors duration-fast ' +
                         (canReloadPlugins && !isReloadingPlugins
                           ? 'bg-fill text-fg hover:bg-fill-hover'
                           : 'bg-fill-faint text-fg-disabled cursor-not-allowed')
@@ -1025,7 +1025,7 @@ const Settings = ({
             </div>
             {/* OBS 모드 */}
             <div
-              className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-xl"
+              className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface"
               onMouseEnter={() => setHoveredKey('obsMode')}
               onMouseLeave={() => setHoveredKey(null)}
             >
@@ -1060,7 +1060,7 @@ const Settings = ({
                     onClick={handleObsRegenerateToken}
                     disabled={!obsStatus.running}
                     className={
-                      'flex items-center justify-center w-[24px] h-[24px] rounded-md transition-colors duration-fast ' +
+                      'flex items-center justify-center w-[23px] h-[23px] rounded-md transition-colors duration-fast ' +
                       (obsStatus.running
                         ? 'bg-fill text-fg hover:bg-fill-hover'
                         : 'bg-fill-faint text-fg-disabled cursor-not-allowed')
@@ -1079,7 +1079,7 @@ const Settings = ({
               </div>
             </div>
             {/* 키음 출력 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-xl">
+            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
               <div
                 className="flex flex-row justify-between items-center h-[40px]"
                 onMouseEnter={() => setHoveredKey('keySoundOutput')}
@@ -1156,7 +1156,7 @@ const Settings = ({
               </div>
             </div>
             {/* 기타 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-xl">
+            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
               <div className="flex flex-row justify-between items-center h-[40px]">
                 <p className="text-label text-fg">{t('settings.language')}</p>
                 <Dropdown
@@ -1216,13 +1216,13 @@ const Settings = ({
                 />
               </div>
               {/* 버전 및 설정 초기화 */}
-              <div className="flex justify-between items-center py-[12px] px-[12px] bg-inset rounded-lg mt-[8px] mb-[12px]">
+              <div className="flex justify-between items-center py-[12px] px-[12px] bg-inset rounded-md mt-[8px] mb-[12px]">
                 <p className="text-body text-fg-muted tabular-nums">
                   Ver {__APP_VERSION__}
                 </p>
                 <div className="flex gap-[8px]">
                   <button
-                    className="inline-flex items-center h-[24px] px-[10px] rounded-md text-body text-fg bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast disabled:opacity-40 disabled:cursor-not-allowed"
+                    className="inline-flex items-center h-[23px] px-[10px] rounded-md text-body text-fg bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast disabled:opacity-40 disabled:cursor-not-allowed"
                     onClick={() => checkForUpdates(true)}
                     disabled={isChecking}
                   >
@@ -1231,7 +1231,7 @@ const Settings = ({
                       : t('update.checkUpdate')}
                   </button>
                   <button
-                    className="inline-flex items-center h-[24px] px-[10px] rounded-md text-body text-danger-fg bg-danger-muted hover:bg-danger-muted-hover active:bg-danger-muted-active transition-colors duration-fast"
+                    className="inline-flex items-center h-[23px] px-[10px] rounded-md text-body text-danger-fg bg-danger-muted hover:bg-danger-muted-hover active:bg-danger-muted-active transition-colors duration-fast"
                     onClick={handleResetAll}
                   >
                     {t('settings.resetData')}
@@ -1242,7 +1242,7 @@ const Settings = ({
           </div>
         </div>
       </div>
-      <div className="absolute flex items-center justify-center top-[12px] right-[12px] w-[518px] h-[372px] bg-fill-faint rounded-xl pointer-events-none overflow-hidden">
+      <div className="absolute flex items-center justify-center top-[12px] right-[12px] w-[518px] h-[372px] bg-fill-faint rounded-surface pointer-events-none overflow-hidden">
         {hoveredKey && PREVIEW_SOURCES[hoveredKey] ? (
           <div className="relative w-full h-full">
             <video
diff --git a/src/renderer/components/main/common/Dropdown.tsx b/src/renderer/components/main/common/Dropdown.tsx
index e08c6f75..08df8b5a 100644
--- a/src/renderer/components/main/common/Dropdown.tsx
+++ b/src/renderer/components/main/common/Dropdown.tsx
@@ -59,8 +59,8 @@ const Dropdown: React.FC<DropdownProps> = ({
       // 하단 메뉴 높이 고려 (약 50px)
       const bottomPadding = 60;
 
-      // 드롭다운 메뉴 예상 높이 (아이템 24 + 갭 4 리듬, padding 포함)
-      const estimatedMenuHeight = Math.min(options.length * 28 + 4, 200);
+      // 드롭다운 메뉴 예상 높이 (아이템 23 + 갭 4 리듬, padding 포함)
+      const estimatedMenuHeight = Math.min(options.length * 27 + 4, 200);
 
       // 버튼 아래 공간이 부족하면 위로 펼치기
       const spaceBelow = viewportHeight - rect.bottom - bottomPadding;
@@ -162,7 +162,7 @@ const Dropdown: React.FC<DropdownProps> = ({
                 <button
                   key={opt.value}
                   type="button"
-                  className={`text-left w-full h-[24px] px-[8px] rounded-md text-body transition-colors duration-fast flex items-center ${
+                  className={`text-left w-full h-[23px] px-[8px] rounded-md text-body transition-colors duration-fast flex items-center ${
                     value === opt.value
                       ? 'bg-surface-active text-fg pointer-events-none'
                       : 'text-fg-muted hover:bg-surface-hover hover:text-fg'
@@ -190,7 +190,7 @@ const Dropdown: React.FC<DropdownProps> = ({
         <button
           ref={buttonRef}
           type="button"
-          className={`flex items-center justify-center w-[24px] h-[24px] rounded-md cursor-pointer bg-fill hover:bg-fill-hover transition-colors duration-fast ${
+          className={`flex items-center justify-center w-[23px] h-[23px] rounded-md cursor-pointer bg-fill hover:bg-fill-hover transition-colors duration-fast ${
             open ? 'shadow-focus-ring' : ''
           }`}
           onClick={toggleOpen}
@@ -205,7 +205,7 @@ const Dropdown: React.FC<DropdownProps> = ({
           className={`flex box-border items-center justify-between ${
             size === 'lg'
               ? 'h-[30px] px-[10px] rounded-surface'
-              : 'h-[24px] px-[8px] rounded-md'
+              : 'h-[23px] px-[8px] rounded-md'
           } bg-fill hover:bg-fill-hover text-fg text-body transition-colors duration-fast ${
             open ? 'shadow-focus-ring' : ''
           } ${fullWidth ? 'w-full' : ''} ${widthClass}`}
diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json
index 32be6984..6cd1c10a 100644
--- a/src/renderer/locales/en.json
+++ b/src/renderer/locales/en.json
@@ -195,7 +195,8 @@
     "cancel": "Cancel",
     "ok": "OK",
     "save": "Save",
-    "more": "More"
+    "more": "More",
+    "dialog": "Dialog"
   },
   "tooltip": {
     "github": "GitHub",
diff --git a/src/renderer/locales/ko.json b/src/renderer/locales/ko.json
index f57524ce..8c4bcdbb 100644
--- a/src/renderer/locales/ko.json
+++ b/src/renderer/locales/ko.json
@@ -195,7 +195,8 @@
     "cancel": "취소",
     "ok": "확인",
     "save": "저장",
-    "more": "더보기"
+    "more": "더보기",
+    "dialog": "대화상자"
   },
   "tooltip": {
     "github": "깃허브",
diff --git a/src/renderer/locales/ru.json b/src/renderer/locales/ru.json
index ddb8f642..92a9c73c 100644
--- a/src/renderer/locales/ru.json
+++ b/src/renderer/locales/ru.json
@@ -195,7 +195,8 @@
     "cancel": "Отмена",
     "ok": "ОК",
     "save": "Сохранить",
-    "more": "Ещё"
+    "more": "Ещё",
+    "dialog": "Диалог"
   },
   "tooltip": {
     "github": "GitHub",
diff --git a/src/renderer/locales/zh-Hant.json b/src/renderer/locales/zh-Hant.json
index c50dcac7..bfd02ffa 100644
--- a/src/renderer/locales/zh-Hant.json
+++ b/src/renderer/locales/zh-Hant.json
@@ -195,7 +195,8 @@
     "cancel": "取消",
     "ok": "確定",
     "save": "儲存",
-    "more": "更多"
+    "more": "更多",
+    "dialog": "對話框"
   },
   "tooltip": {
     "github": "GitHub",
diff --git a/src/renderer/locales/zh-cn.json b/src/renderer/locales/zh-cn.json
index be5b4d8a..8fea88cc 100644
--- a/src/renderer/locales/zh-cn.json
+++ b/src/renderer/locales/zh-cn.json
@@ -195,7 +195,8 @@
     "cancel": "取消",
     "ok": "确定",
     "save": "保存",
-    "more": "更多"
+    "more": "更多",
+    "dialog": "对话框"
   },
   "tooltip": {
     "github": "GitHub",

From 2790d3e2bd46c42265e7bc91e1a70c9e6f89203b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:18:19 +0900
Subject: [PATCH 10/17] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20?=
 =?UTF-8?q?=ED=8C=A8=EB=84=90=20=ED=81=AC=EB=A1=AC=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=A0=95=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 레이어·스타일·배치 패널과 그래프·노브 아이템 스타일을 토큰 기반으로 정리
- 그리드 캔버스 크롬의 잔여 하드코딩 색상 제거
---
 .../batch/BatchSelectionPanel.tsx             | 18 ++++++-------
 .../Grid/PropertiesPanel/layer/LayerPanel.tsx |  2 +-
 .../PropertiesPanel/layer/LayerTabContent.tsx |  6 +++++
 .../single/StyleTabContent.tsx                |  2 +-
 .../components/main/Grid/core/Grid.tsx        | 26 +++++++++++--------
 .../components/main/Grid/layers/GraphItem.tsx |  3 +++
 .../components/main/Grid/layers/KnobItem.tsx  |  3 +++
 src/renderer/components/shared/Key.tsx        |  3 +++
 8 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
index ac905546..ac3ff9fb 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/batch/BatchSelectionPanel.tsx
@@ -526,7 +526,7 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
                 <input
                   ref={renameInputRef}
                   type="text"
-                  className="text-fg text-style-2 leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
+                  className="text-fg text-label leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
                   value={renameValue}
                   onChange={(e) => setRenameValue(e.target.value)}
                   onBlur={() => {
@@ -548,7 +548,7 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
               ) : (
                 <div className="flex items-center gap-[4px] min-w-0">
                   <span
-                    className="text-fg text-style-2 leading-none cursor-default truncate max-w-[110px]"
+                    className="text-fg text-label leading-none cursor-default truncate max-w-[110px]"
                     onDoubleClick={handleRenameStart}
                     title={selectedGroupInfo.name}
                   >
@@ -564,7 +564,7 @@ export const BatchKeyLikePanel: React.FC<BatchKeyLikePanelProps> = ({
                 </div>
               )
             ) : (
-              <span className="text-fg text-style-2 leading-none">
+              <span className="text-fg text-label leading-none">
                 {t('propertiesPanel.multiSelection') || '다중 선택'}
               </span>
             )}
@@ -1059,7 +1059,7 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
                 <input
                   ref={renameInputRef}
                   type="text"
-                  className="text-fg text-style-2 leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
+                  className="text-fg text-label leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
                   value={renameValue}
                   onChange={(e) => setRenameValue(e.target.value)}
                   onBlur={() => {
@@ -1081,7 +1081,7 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
               ) : (
                 <div className="flex items-center gap-[4px] min-w-0">
                   <span
-                    className="text-fg text-style-2 leading-none cursor-default truncate max-w-[110px]"
+                    className="text-fg text-label leading-none cursor-default truncate max-w-[110px]"
                     onDoubleClick={handleRenameStart}
                     title={selectedGroupInfo.name}
                   >
@@ -1097,7 +1097,7 @@ export const BatchGraphOnlyPanel: React.FC<BatchGraphOnlyPanelProps> = ({
                 </div>
               )
             ) : (
-              <span className="text-fg text-style-2 leading-none">
+              <span className="text-fg text-label leading-none">
                 {t('propertiesPanel.multiSelection') || '다중 선택'}
               </span>
             )}
@@ -1395,7 +1395,7 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
                 <input
                   ref={renameInputRef}
                   type="text"
-                  className="text-fg text-style-2 leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
+                  className="text-fg text-label leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
                   value={renameValue}
                   onChange={(e) => setRenameValue(e.target.value)}
                   onBlur={() => {
@@ -1417,7 +1417,7 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
               ) : (
                 <div className="flex items-center gap-[4px] min-w-0">
                   <span
-                    className="text-fg text-style-2 leading-none cursor-default truncate max-w-[110px]"
+                    className="text-fg text-label leading-none cursor-default truncate max-w-[110px]"
                     onDoubleClick={handleRenameStart}
                     title={selectedGroupInfo.name}
                   >
@@ -1433,7 +1433,7 @@ export const BatchKnobOnlyPanel: React.FC<BatchKnobOnlyPanelProps> = ({
                 </div>
               )
             ) : (
-              <span className="text-fg text-style-2 leading-none">
+              <span className="text-fg text-label leading-none">
                 {t('propertiesPanel.multiSelection') || '다중 선택'}
               </span>
             )}
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
index ae75a11b..e0ee3550 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerPanel.tsx
@@ -119,7 +119,7 @@ const LayerPanel: React.FC<LayerPanelProps> = ({
       <div className="flex-shrink-0">
         {/* 헤더 */}
         <div className={PANEL_HEADER_CLASS}>
-          <span className="text-fg text-style-2 leading-none">
+          <span className="text-fg text-label leading-none">
             {t('propertiesPanel.canvas') || 'Canvas'}
           </span>
         </div>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
index 15f306b3..9a910b82 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/layer/LayerTabContent.tsx
@@ -242,6 +242,9 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
 
     onSelectionFromPanel?.();
 
+    // macOS ctrl+클릭은 우클릭 제스처 — contextmenu 뒤에 따라오는 click 무시
+    if (isMac() && e.ctrlKey) return;
+
     const isPrimaryModifierPressed = isMac() ? e.metaKey : e.ctrlKey;
     const isShiftPressed = e.shiftKey;
 
@@ -382,6 +385,9 @@ const LayerTabContent: React.FC<LayerTabContentProps> = ({
     }
     if (dnd.getIsDraggingRef()) return;
 
+    // macOS ctrl+클릭은 우클릭 제스처 — contextmenu 뒤에 따라오는 click 무시
+    if (isMac() && e.ctrlKey) return;
+
     const isPrimaryModifierPressed = isMac() ? e.metaKey : e.ctrlKey;
     const isShiftPressed = e.shiftKey;
 
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
index f69da6ef..eafef066 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/StyleTabContent.tsx
@@ -414,7 +414,7 @@ const StyleTabContent: React.FC<StyleTabContentInternalProps> = ({
               onClick={onKeyListen}
               className={`flex items-center justify-center h-[23px] min-w-[0px] px-[8px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md ${
                 isListening ? 'shadow-focus-ring' : ''
-              } text-fg text-style-2`}
+              } text-fg text-label`}
             >
               {isListening
                 ? t('propertiesPanel.pressAnyKey') || 'Press any key'
diff --git a/src/renderer/components/main/Grid/core/Grid.tsx b/src/renderer/components/main/Grid/core/Grid.tsx
index b547f0cc..b7fad0f8 100644
--- a/src/renderer/components/main/Grid/core/Grid.tsx
+++ b/src/renderer/components/main/Grid/core/Grid.tsx
@@ -109,8 +109,12 @@ interface GridProps {
   showConfirm: (
     message: string,
     onConfirm: () => void,
-    onCancelOrConfirmText?: (() => void) | string,
-    confirmText?: string,
+    options?: {
+      onCancel?: () => void;
+      confirmText?: string;
+      cancelText?: string;
+      danger?: boolean;
+    },
   ) => void;
   showAlert: (message: string, confirmText?: string) => void;
   selectedKey: SelectedKeyInfo | null;
@@ -1002,7 +1006,7 @@ const Grid = ({
             showConfirm(
               t('confirm.removeKey', { name: displayName }),
               () => onKeyDelete(index),
-              t('confirm.remove'),
+              { confirmText: t('confirm.remove') },
             );
           }}
           onContextMenu={(e) => {
@@ -1108,7 +1112,7 @@ const Grid = ({
           showConfirm(
             t('confirm.removeStat', { name: displayName }),
             () => deleteStatAtIndex(index),
-            t('confirm.remove'),
+            { confirmText: t('confirm.remove') },
           );
         }}
         onContextMenu={(e) => {
@@ -1210,7 +1214,7 @@ const Grid = ({
           showConfirm(
             t('confirm.removeGraph', { name: displayName }),
             () => deleteGraphAtIndex(index),
-            t('confirm.remove'),
+            { confirmText: t('confirm.remove') },
           );
         }}
         onContextMenu={(e) => {
@@ -1309,7 +1313,7 @@ const Grid = ({
           showConfirm(
             t('confirm.removeKnob', { name: 'Knob' }),
             () => deleteKnobAtIndex(index),
-            t('confirm.remove'),
+            { confirmText: t('confirm.remove') },
           );
         }}
         onContextMenu={(e) => {
@@ -1895,7 +1899,7 @@ const Grid = ({
                 showConfirm(
                   t('confirm.removeStat', { name: displayName }),
                   () => deleteStatAtIndex(contextIndex),
-                  t('confirm.remove'),
+                  { confirmText: t('confirm.remove') },
                 );
               } else if (id === 'duplicate') {
                 beginDuplicateStat(contextIndex);
@@ -1921,7 +1925,7 @@ const Grid = ({
                 showConfirm(
                   t('confirm.removeGraph', { name: displayName }),
                   () => deleteGraphAtIndex(contextIndex),
-                  t('confirm.remove'),
+                  { confirmText: t('confirm.remove') },
                 );
               } else if (id === 'duplicate') {
                 beginDuplicateGraph(contextIndex);
@@ -1941,7 +1945,7 @@ const Grid = ({
                 showConfirm(
                   t('confirm.removeKnob', { name: 'Knob' }),
                   () => deleteKnobAtIndex(contextIndex),
-                  t('confirm.remove'),
+                  { confirmText: t('confirm.remove') },
                 );
               } else if (id === 'duplicate') {
                 beginDuplicateKnob(contextIndex);
@@ -2002,7 +2006,7 @@ const Grid = ({
               showConfirm(
                 t('confirm.removeKey', { name: displayName }),
                 () => onKeyDelete(contextIndex),
-                t('confirm.remove'),
+                { confirmText: t('confirm.remove') },
               );
             } else if (id === 'duplicate') {
               const keyCode =
@@ -2070,7 +2074,7 @@ const Grid = ({
                     console.error('Failed to reset key counter', error);
                   }
                 },
-                t('confirm.reset'),
+                { confirmText: t('confirm.reset') },
               );
             } else if (id === 'bringToFront') {
               if (typeof onMoveToFront === 'function') {
diff --git a/src/renderer/components/main/Grid/layers/GraphItem.tsx b/src/renderer/components/main/Grid/layers/GraphItem.tsx
index 6712fc2a..3018e2b9 100644
--- a/src/renderer/components/main/Grid/layers/GraphItem.tsx
+++ b/src/renderer/components/main/Grid/layers/GraphItem.tsx
@@ -381,6 +381,9 @@ const GraphItem = ({
   };
 
   const handleClick = (e: React.MouseEvent) => {
+    // macOS ctrl+클릭은 우클릭 제스처 — Chromium이 contextmenu 뒤에 click도 발화하므로
+    // 이 클릭이 선택·패널 오픈으로 이어져 방금 연 메뉴를 닫는 것을 차단
+    if (macOS && e.ctrlKey) return;
     const isPrimaryModifierPressed = macOS ? e.metaKey : e.ctrlKey;
     const isShiftPressed = e.shiftKey;
 
diff --git a/src/renderer/components/main/Grid/layers/KnobItem.tsx b/src/renderer/components/main/Grid/layers/KnobItem.tsx
index eb73d18e..8f720003 100644
--- a/src/renderer/components/main/Grid/layers/KnobItem.tsx
+++ b/src/renderer/components/main/Grid/layers/KnobItem.tsx
@@ -362,6 +362,9 @@ const KnobItem = ({
   };
 
   const handleClick = (e: React.MouseEvent) => {
+    // macOS ctrl+클릭은 우클릭 제스처 — Chromium이 contextmenu 뒤에 click도 발화하므로
+    // 이 클릭이 선택·패널 오픈으로 이어져 방금 연 메뉴를 닫는 것을 차단
+    if (macOS && e.ctrlKey) return;
     const isPrimaryModifierPressed = macOS ? e.metaKey : e.ctrlKey;
     const isShiftPressed = e.shiftKey;
 
diff --git a/src/renderer/components/shared/Key.tsx b/src/renderer/components/shared/Key.tsx
index 5f398d7b..5406c98b 100644
--- a/src/renderer/components/shared/Key.tsx
+++ b/src/renderer/components/shared/Key.tsx
@@ -409,6 +409,9 @@ const DraggableKey = React.memo(
     };
 
     const handleClick = (e: React.MouseEvent) => {
+      // macOS ctrl+클릭은 우클릭 제스처 — Chromium이 contextmenu 뒤에 click도 발화하므로
+      // 이 클릭이 선택·패널 오픈으로 이어져 방금 연 메뉴를 닫는 것을 차단
+      if (macOS && e.ctrlKey) return;
       const isPrimaryModifierPressed = macOS ? e.metaKey : e.ctrlKey;
       const isShiftPressed = e.shiftKey;
 

From 2414b6365807ffbef3d262b38183923705ea535f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:18:30 +0900
Subject: [PATCH 11/17] =?UTF-8?q?feat:=20=ED=94=8C=EB=9F=AC=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=83=81=ED=98=B8=EC=9E=91=EC=9A=A9=20=EB=AA=A8=EB=93=88?=
 =?UTF-8?q?=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- uiApi의 setTimeout 기반 인라인 리스너를 attachPluginDialogInteractions로 추출,
  Alert 커스텀 콘텐츠 마운트 시점(onContentMount)에 연결하고 클린업 지원
- 체크박스 함수 핸들러를 change 속성 계약으로 이전 — label 클릭 시 target이
  label이라 undefined가 커밋되던 문제 수정 (드롭다운과 동일 컨벤션)
- 플러그인 UI 컴포넌트(버튼·체크박스·인풋·드롭다운·패널)를 앱 토큰과 동기
---
 src/renderer/api/modules/uiApi.ts             | 129 ++----------------
 .../main/Modal/content/dialogs/Alert.tsx      |  54 ++++++--
 src/renderer/utils/plugin/pluginComponents.ts |  49 ++++---
 .../plugin/pluginDialogInteractions.test.ts   | 126 +++++++++++++++++
 .../utils/plugin/pluginDialogInteractions.ts  | 109 +++++++++++++++
 src/renderer/windows/main/App.tsx             |  90 +++++++++---
 src/types/electron.d.ts                       |  15 +-
 7 files changed, 401 insertions(+), 171 deletions(-)
 create mode 100644 src/renderer/utils/plugin/pluginDialogInteractions.test.ts
 create mode 100644 src/renderer/utils/plugin/pluginDialogInteractions.ts

diff --git a/src/renderer/api/modules/uiApi.ts b/src/renderer/api/modules/uiApi.ts
index 493b326e..24363182 100644
--- a/src/renderer/api/modules/uiApi.ts
+++ b/src/renderer/api/modules/uiApi.ts
@@ -7,7 +7,7 @@ import {
   createPanel,
   createFormRow,
 } from '@utils/plugin/pluginComponents';
-import { setupPluginDropdownInteractions } from '@utils/plugin/pluginDropdownManager';
+import { attachPluginDialogInteractions } from '@utils/plugin/pluginDialogInteractions';
 import { displayElementApi } from '../pluginDisplayElements';
 
 import type {
@@ -88,8 +88,8 @@ export const uiApi = {
           resolve();
           return;
         }
-        showAlert(message, options?.confirmText);
-        setTimeout(resolve, 0);
+        // 확인 클릭 또는 배경 클릭으로 닫힐 때 resolve
+        showAlert(message, options?.confirmText, () => resolve());
       });
     },
 
@@ -108,12 +108,12 @@ export const uiApi = {
           resolve(false);
           return;
         }
-        showConfirm(
-          message,
-          () => resolve(true),
-          () => resolve(false),
-          options?.confirmText,
-        );
+        showConfirm(message, () => resolve(true), {
+          onCancel: () => resolve(false),
+          confirmText: options?.confirmText,
+          cancelText: options?.cancelText,
+          danger: options?.danger,
+        });
       });
     },
 
@@ -145,117 +145,8 @@ export const uiApi = {
           confirmText: options?.confirmText,
           cancelText: options?.cancelText,
           showCancel: options?.showCancel,
+          onContentMount: attachPluginDialogInteractions,
         });
-
-        setTimeout(() => {
-          const dialogContent = document.querySelector(
-            '[data-plugin-dialog-content]',
-          );
-          if (!dialogContent) return;
-
-          dialogContent.addEventListener('click', (e: Event) => {
-            const target = e.target as HTMLElement;
-            const checkbox = target.closest('[data-checkbox-toggle]');
-            if (checkbox) {
-              const input = checkbox.querySelector(
-                'input[type=checkbox]',
-              ) as HTMLInputElement;
-              const knob = checkbox.querySelector('div') as HTMLElement;
-
-              if (input) {
-                input.checked = !input.checked;
-
-                if (input.checked) {
-                  checkbox.classList.remove('bg-[#3B4049]');
-                  checkbox.classList.add('bg-[#493C1D]');
-                  knob.classList.remove('left-[2px]', 'bg-[#989BA6]');
-                  knob.classList.add('left-[13px]', 'bg-[#FFB400]');
-                } else {
-                  checkbox.classList.remove('bg-[#493C1D]');
-                  checkbox.classList.add('bg-[#3B4049]');
-                  knob.classList.remove('left-[13px]', 'bg-[#FFB400]');
-                  knob.classList.add('left-[2px]', 'bg-[#989BA6]');
-                }
-
-                input.dispatchEvent(new Event('change', { bubbles: true }));
-              }
-            }
-          });
-
-          setupPluginDropdownInteractions(dialogContent as HTMLElement);
-
-          const handleInputBlur = (e: Event) => {
-            const targetEl = e.target as HTMLInputElement;
-            if (
-              targetEl.tagName === 'INPUT' &&
-              targetEl.type === 'number' &&
-              targetEl.hasAttribute('data-plugin-input-blur')
-            ) {
-              const minStr = targetEl.getAttribute('data-plugin-input-min');
-              const maxStr = targetEl.getAttribute('data-plugin-input-max');
-              const currentValue = targetEl.value;
-
-              if (currentValue === '' || isNaN(parseFloat(currentValue))) {
-                const defaultValue = minStr ? parseFloat(minStr) : 0;
-                targetEl.value = String(defaultValue);
-                targetEl.dispatchEvent(new Event('change', { bubbles: true }));
-                return;
-              }
-
-              const numValue = parseFloat(currentValue);
-              let clampedValue = numValue;
-
-              if (minStr && numValue < parseFloat(minStr)) {
-                clampedValue = parseFloat(minStr);
-              }
-              if (maxStr && numValue > parseFloat(maxStr)) {
-                clampedValue = parseFloat(maxStr);
-              }
-
-              if (clampedValue !== numValue) {
-                targetEl.value = String(clampedValue);
-                targetEl.dispatchEvent(new Event('change', { bubbles: true }));
-              }
-            }
-          };
-
-          const handleEvent = (e: Event) => {
-            const target = e.target as HTMLElement;
-            const handlerAttr =
-              e.type === 'click'
-                ? 'data-plugin-handler'
-                : e.type === 'input'
-                ? 'data-plugin-handler-input'
-                : e.type === 'change'
-                ? 'data-plugin-handler-change'
-                : null;
-
-            if (!handlerAttr) return;
-
-            let element: HTMLElement | null = target;
-            let handlerName: string | null = null;
-
-            while (element && element !== dialogContent) {
-              handlerName = element.getAttribute(handlerAttr);
-              if (handlerName) break;
-              element = element.parentElement;
-            }
-
-            if (!handlerName) return;
-
-            const handler = (window as unknown as Record<string, unknown>)[
-              handlerName
-            ];
-            if (typeof handler === 'function') {
-              (handler as (e: Event) => void)(e);
-            }
-          };
-
-          dialogContent.addEventListener('click', handleEvent);
-          dialogContent.addEventListener('change', handleEvent);
-          dialogContent.addEventListener('input', handleEvent);
-          dialogContent.addEventListener('blur', handleInputBlur, true);
-        }, 0);
       });
     },
   },
diff --git a/src/renderer/components/main/Modal/content/dialogs/Alert.tsx b/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
index 6eac425a..1626d727 100644
--- a/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
+++ b/src/renderer/components/main/Modal/content/dialogs/Alert.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 import { useLenis } from '@hooks/useLenis';
 import { useTranslation } from '@contexts/useTranslation';
 import Modal from '../../Modal';
@@ -10,6 +10,8 @@ interface AlertProps {
   confirmText?: string;
   cancelText?: string;
   showCancel?: boolean;
+  danger?: boolean;
+  onCustomContentMount?: (element: HTMLElement) => void | (() => void);
   onConfirm?: () => void;
   onCancel?: () => void;
 }
@@ -21,12 +23,36 @@ const Alert = ({
   confirmText,
   cancelText,
   showCancel,
+  danger = false,
+  onCustomContentMount,
   onConfirm,
   onCancel,
 }: AlertProps) => {
   const { t } = useTranslation();
 
   const { scrollContainerRef: scrollRef } = useLenis();
+  const customContentCleanupRef = useRef<(() => void) | null>(null);
+  const setCustomContentRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      customContentCleanupRef.current?.();
+      customContentCleanupRef.current = null;
+      scrollRef(node);
+
+      if (!node || !onCustomContentMount) return;
+      const pluginContent = node.querySelector<HTMLElement>(
+        '[data-plugin-dialog-content]',
+      );
+      if (!pluginContent) {
+        console.warn('[Dialog API] Plugin dialog content was not mounted');
+        return;
+      }
+
+      const cleanup = onCustomContentMount(pluginContent);
+      customContentCleanupRef.current =
+        typeof cleanup === 'function' ? cleanup : null;
+    },
+    [onCustomContentMount, scrollRef],
+  );
 
   const isConfirm = type === 'confirm';
   const isCustom = type === 'custom';
@@ -38,20 +64,24 @@ const Alert = ({
   const shouldShowCancel = isConfirm || (isCustom && showCancel);
 
   return (
-    <Modal onClick={onCancel}>
+    <Modal
+      onClick={onCancel}
+      ariaLabel={isCustom ? t('common.dialog') : message}
+    >
       <div
-        className="flex flex-col bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[20px] pr-[6px]"
+        className="flex flex-col min-w-[264px] bg-glass-heavy backdrop-blur-[32px] rounded-modal shadow-elevation-3 p-[14px]"
         onClick={(e) => e.stopPropagation()}
       >
         {/* 메시지 텍스트 or Custom HTML */}
         {isCustom ? (
           <div
-            ref={scrollRef}
-            className="max-h-[244px] overflow-y-auto modal-content-scroll dmn-scroll-fade pr-[14px] text-center text-fg"
+            key={message}
+            ref={setCustomContentRef}
+            className="max-h-[244px] overflow-y-auto modal-content-scroll dmn-scroll-fade text-center text-fg"
             dangerouslySetInnerHTML={{ __html: message }}
           />
         ) : (
-          <div className="max-w-[236px] text-center text-fg text-label pr-[14px]">
+          <div className="max-w-[236px] self-center text-center text-fg text-label px-[8px] py-[8px]">
             {message}
           </div>
         )}
@@ -60,20 +90,22 @@ const Alert = ({
         <div
           className={`flex ${
             !shouldShowCancel ? 'justify-center' : ''
-          } gap-[8px] mt-[20px] pr-[14px]`}
+          } gap-[8px] mt-[12px]`}
         >
           <button
             onClick={onConfirm}
-            className={`${
-              shouldShowCancel ? 'w-[150px]' : 'w-full'
-            } h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast`}
+            className={`${shouldShowCancel ? 'flex-[2]' : 'w-full'} h-[30px] ${
+              danger
+                ? 'bg-danger-muted hover:bg-danger-muted-hover active:bg-danger-muted-active text-danger-fg'
+                : 'bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active text-accent-fg'
+            } rounded-surface text-label transition-colors duration-fast`}
           >
             {confirmLabel}
           </button>
           {shouldShowCancel && (
             <button
               onClick={onCancel}
-              className="w-[75px] h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-lg text-fg-muted hover:text-fg text-label transition-colors duration-fast"
+              className="flex-1 h-[30px] bg-fill hover:bg-fill-hover active:bg-fill-active rounded-surface text-fg-muted hover:text-fg text-label transition-colors duration-fast"
             >
               {cancelLabel}
             </button>
diff --git a/src/renderer/utils/plugin/pluginComponents.ts b/src/renderer/utils/plugin/pluginComponents.ts
index 2a5931b4..b463d0bb 100644
--- a/src/renderer/utils/plugin/pluginComponents.ts
+++ b/src/renderer/utils/plugin/pluginComponents.ts
@@ -4,6 +4,7 @@
  */
 
 import { registerComponentHandler } from './pluginUtils';
+import { FORM_ROW_CLASS, FORM_LABEL_CLASS } from '@utils/cardRecipes';
 
 /**
  * 현재 실행 중인 플러그인 ID를 가져옵니다.
@@ -76,19 +77,20 @@ export function createButton(
     id = '',
   } = options;
 
-  const baseClass = 'transition-colors rounded-[7px] text-style-3';
+  // 앱 버튼 관례와 동기 — primary=액센트 CTA, danger=muted 레드, secondary=회색 필
+  const baseClass =
+    'transition-colors duration-fast rounded-surface text-label';
 
   const variantClass = {
     primary:
-      'bg-[#2A2A30] hover:bg-[#303036] active:bg-[#393941] text-[#DCDEE7]',
+      'bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active text-accent-fg',
     danger:
-      'bg-[#3C1E1E] hover:bg-[#442222] active:bg-[#522929] text-[#E6DBDB]',
-    secondary:
-      'bg-[#2A2A31] border-[1px] border-[#3A3944] text-[#DBDEE8] hover:bg-[#34343c]',
+      'bg-danger-muted hover:bg-danger-muted-hover active:bg-danger-muted-active text-danger-fg',
+    secondary: 'bg-fill hover:bg-fill-hover active:bg-fill-active text-fg',
   }[variant];
 
   const sizeClass = {
-    small: 'h-[24px] px-[12px]',
+    small: 'h-[23px] px-[12px]',
     medium: 'h-[30px] px-[16px]',
     large: 'h-[36px] px-[20px]',
   }[size];
@@ -128,24 +130,25 @@ export function createButton(
 export function createCheckbox(options: CheckboxOptions = {}): string {
   const { checked = false, onChange, id = '' } = options;
 
-  const bgClass = checked ? 'bg-[#493C1D]' : 'bg-[#3B4049]';
-  const knobClass = checked
-    ? 'left-[13px] bg-[#FFB400]'
-    : 'left-[2px] bg-[#989BA6]';
+  // 메인 UI Checkbox와 동일한 크기·토큰 (30x18, 액센트/line-strong 트랙, 14px 흰 노브)
+  const bgClass = checked ? 'bg-accent' : 'bg-line-strong';
+  const knobClass = checked ? 'left-[14px]' : 'left-[2px]';
 
   // 핸들러 처리: 함수면 등록, 문자열이면 레거시 방식
   let onChangeAttr = '';
   if (onChange) {
     if (typeof onChange === 'function') {
       const pluginId = getCurrentPluginId();
-      // 체크박스는 checked 상태를 전달
+      // 토글 후 input에서 버블링되는 change 이벤트로 checked 전달 —
+      // click 위임은 target이 label이라 checked를 읽을 수 없음
       const wrappedHandler = (e: Event) => {
         const target = e.target as HTMLInputElement;
         onChange(target.checked);
       };
       const handlerId = registerComponentHandler(pluginId, wrappedHandler);
-      onChangeAttr = `data-plugin-handler="${handlerId}"`;
+      onChangeAttr = `data-plugin-handler-change="${handlerId}"`;
     } else {
+      // 레거시 문자열 핸들러는 click 이벤트 계약 유지
       onChangeAttr = `data-plugin-handler="${onChange}"`;
     }
   }
@@ -154,11 +157,11 @@ export function createCheckbox(options: CheckboxOptions = {}): string {
   const inputIdAttr = id ? `id="${id}-input"` : ''; // input에도 id 추가
 
   // 내부 input[type=checkbox] 추가 (실제 상태 유지)
-  return `<label ${labelIdAttr} class="relative inline-block w-[27px] h-[16px] rounded-[75px] cursor-pointer transition-colors duration-75 ${bgClass}" data-checkbox-toggle ${onChangeAttr}>
+  return `<label ${labelIdAttr} class="relative inline-block w-[30px] h-[18px] rounded-full cursor-pointer transition-colors duration-base ease-out-expo ${bgClass}" data-checkbox-toggle ${onChangeAttr}>
     <input type="checkbox" ${inputIdAttr} ${
     checked ? 'checked' : ''
   } class="absolute opacity-0 w-0 h-0" />
-    <div class="absolute w-[12px] h-[12px] rounded-[75px] top-[2px] transition-all duration-75 ease-in-out ${knobClass}"></div>
+    <div class="absolute w-[14px] h-[14px] rounded-full top-[2px] bg-white shadow-elevation-1 transition-all duration-base ease-out-expo ${knobClass}"></div>
   </label>`;
 }
 
@@ -234,7 +237,7 @@ export function createInput(options: InputOptions = {}): string {
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;');
 
-  return `<input ${idAttr} type="${type}" value="${escapedValue}" placeholder="${placeholder}" class="text-center px-[8px] h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] border-[#3A3943] focus:border-[#459BF8] text-style-4 text-[#DBDEE8] outline-none" style="width: ${width}px" ${minAttr} ${maxAttr} ${stepAttr} ${onBlurAttr} ${
+  return `<input ${idAttr} type="${type}" value="${escapedValue}" placeholder="${placeholder}" class="text-center h-[23px] bg-inset rounded-md text-body tabular-nums text-fg outline-none focus:shadow-focus-ring" style="width: ${width}px" ${minAttr} ${maxAttr} ${stepAttr} ${onBlurAttr} ${
     disabled ? 'disabled' : ''
   } ${onInputAttr} ${onChangeAttr} />`;
 }
@@ -278,7 +281,7 @@ export function createDropdown(options: DropdownOptions): string {
   const itemsHtml = items
     .map(
       (opt) => `
-    <button type="button" class="text-left w-full h-[24px] px-[8px] rounded-md text-body transition-colors duration-fast flex items-center ${
+    <button type="button" class="text-left w-full h-[23px] px-[8px] rounded-md text-body transition-colors duration-fast flex items-center ${
       selected === opt.value
         ? 'bg-surface-active text-fg pointer-events-none'
         : 'text-fg-muted hover:bg-surface-hover hover:text-fg'
@@ -292,7 +295,7 @@ export function createDropdown(options: DropdownOptions): string {
   return `<div class="relative plugin-dropdown" ${idAttr} ${onChangeAttr} data-selected="${
     selected || ''
   }">
-    <button type="button" class="flex items-center justify-between h-[24px] px-[8px] bg-fill hover:bg-fill-hover rounded-md text-fg text-body transition-colors duration-fast outline-none ${
+    <button type="button" class="flex items-center justify-between h-[23px] px-[8px] bg-fill hover:bg-fill-hover rounded-md text-fg text-body transition-colors duration-fast outline-none ${
       disabled ? 'opacity-40 pointer-events-none' : ''
     }" data-dropdown-toggle>
       <span class="truncate">${displayText}</span>
@@ -300,7 +303,7 @@ export function createDropdown(options: DropdownOptions): string {
         <path d="M1 1L7 7L13 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
-    <div class="hidden absolute left-0 top-[28px] flex-col p-[4px] gap-[4px] bg-glass backdrop-blur-[24px] rounded-surface shadow-elevation-2 z-20 overflow-x-hidden overflow-y-auto tooltip-fade-in" data-dropdown-menu>
+    <div class="hidden absolute left-0 top-[27px] flex-col p-[4px] gap-[4px] bg-glass backdrop-blur-[24px] rounded-surface shadow-elevation-2 z-20 overflow-x-hidden overflow-y-auto tooltip-fade-in" data-dropdown-menu>
       ${itemsHtml}
     </div>
   </div>`;
@@ -316,8 +319,10 @@ export function createPanel(
   const { title = '', width } = options;
   const widthStyle = width ? `style="width: ${width}px"` : '';
 
-  return `<div class="bg-[#1A191E] rounded-[13px] border-[1px] border-[#2A2A30] p-[20px] flex flex-col gap-[16px]" ${widthStyle}>
-    ${title ? `<div class="text-style-3 text-[#FFFFFF]">${title}</div>` : ''}
+  // Display Element 전용 캔버스 표면 (다이얼로그 내부 사용 금지 — 문서 계약)
+  // 오버레이는 투명 배경이라 글래스 대신 불투명 surface, 반경은 팝업 계층
+  return `<div class="bg-surface rounded-popup shadow-elevation-2 p-[12px] flex flex-col gap-[12px] text-left" ${widthStyle}>
+    ${title ? `<div class="text-title text-fg">${title}</div>` : ''}
     ${content}
   </div>`;
 }
@@ -326,8 +331,8 @@ export function createPanel(
  * 폼 행 (라벨 + 컴포넌트) HTML 생성
  */
 export function createFormRow(label: string, component: string): string {
-  return `<div class="flex justify-between w-full items-center">
-    <p class="text-white text-style-2">${label}</p>
+  return `<div class="${FORM_ROW_CLASS}">
+    <p class="${FORM_LABEL_CLASS}">${label}</p>
     ${component}
   </div>`;
 }
diff --git a/src/renderer/utils/plugin/pluginDialogInteractions.test.ts b/src/renderer/utils/plugin/pluginDialogInteractions.test.ts
new file mode 100644
index 00000000..17f6ad97
--- /dev/null
+++ b/src/renderer/utils/plugin/pluginDialogInteractions.test.ts
@@ -0,0 +1,126 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { createCheckbox } from './pluginComponents';
+import { attachPluginDialogInteractions } from './pluginDialogInteractions';
+
+const HANDLER_NAME = '__dmn_handler_dialog_test';
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  delete (window as unknown as Record<string, unknown>)[HANDLER_NAME];
+});
+
+describe('attachPluginDialogInteractions', () => {
+  it('마운트된 루트의 클릭·input·change 이벤트를 핸들러에 위임한다', () => {
+    const handler = vi.fn();
+    (window as unknown as Record<string, unknown>)[HANDLER_NAME] = handler;
+    const root = document.createElement('div');
+    root.innerHTML = `
+      <button data-plugin-handler="${HANDLER_NAME}">Click</button>
+      <input data-plugin-handler-input="${HANDLER_NAME}" />
+      <select data-plugin-handler-change="${HANDLER_NAME}"><option>One</option></select>
+    `;
+    document.body.appendChild(root);
+
+    const detach = attachPluginDialogInteractions(root);
+    root
+      .querySelector('button')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    root
+      .querySelector('input')
+      ?.dispatchEvent(new Event('input', { bubbles: true }));
+    root
+      .querySelector('select')
+      ?.dispatchEvent(new Event('change', { bubbles: true }));
+
+    expect(handler).toHaveBeenCalledTimes(3);
+    detach();
+  });
+
+  it('체크박스와 드롭다운을 연결하고 cleanup 후 중복 실행하지 않는다', () => {
+    const handler = vi.fn();
+    (window as unknown as Record<string, unknown>)[HANDLER_NAME] = handler;
+    const root = document.createElement('div');
+    root.innerHTML = `
+      <label data-checkbox-toggle data-plugin-handler-change="${HANDLER_NAME}" class="bg-line-strong">
+        <input type="checkbox" />
+        <div class="left-[2px]"></div>
+      </label>
+      <div class="plugin-dropdown" data-plugin-handler-change="${HANDLER_NAME}">
+        <button data-dropdown-toggle><span>One</span></button>
+        <div data-dropdown-menu class="hidden">
+          <button data-value="two">Two</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(root);
+
+    const detach = attachPluginDialogInteractions(root);
+    root
+      .querySelector('label')
+      ?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, cancelable: true }),
+      );
+    expect(root.querySelector('input')?.checked).toBe(true);
+    expect(handler).toHaveBeenCalledTimes(1);
+
+    root
+      .querySelector('[data-dropdown-toggle]')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    const menu = document.querySelector('[data-dropdown-menu]');
+    expect(menu?.classList.contains('flex')).toBe(true);
+    menu
+      ?.querySelector('button')
+      ?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    expect(handler).toHaveBeenCalledTimes(2);
+
+    detach();
+    root
+      .querySelector('label')
+      ?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, cancelable: true }),
+      );
+    expect(handler).toHaveBeenCalledTimes(2);
+
+    const detachAgain = attachPluginDialogInteractions(root);
+    root
+      .querySelector('label')
+      ?.dispatchEvent(
+        new MouseEvent('click', { bubbles: true, cancelable: true }),
+      );
+    expect(handler).toHaveBeenCalledTimes(3);
+    detachAgain();
+  });
+
+  // 실제 생성기 출력으로 검증 — 수기 fixture가 프로덕션 계약과 어긋나는 회귀 방지
+  it('실제 createCheckbox 출력에서 label 클릭 시 checked를 정확히 1회 전달한다', () => {
+    const received: boolean[] = [];
+    const root = document.createElement('div');
+    root.innerHTML = createCheckbox({
+      checked: false,
+      onChange: (checked) => {
+        received.push(checked);
+      },
+    });
+    document.body.appendChild(root);
+
+    const detach = attachPluginDialogInteractions(root);
+    const label = root.querySelector('label') as HTMLLabelElement;
+
+    label.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, cancelable: true }),
+    );
+    expect(received).toEqual([true]);
+    expect(root.querySelector('input')?.checked).toBe(true);
+
+    label.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, cancelable: true }),
+    );
+    expect(received).toEqual([true, false]);
+
+    detach();
+    label.dispatchEvent(
+      new MouseEvent('click', { bubbles: true, cancelable: true }),
+    );
+    expect(received).toEqual([true, false]);
+  });
+});
diff --git a/src/renderer/utils/plugin/pluginDialogInteractions.ts b/src/renderer/utils/plugin/pluginDialogInteractions.ts
new file mode 100644
index 00000000..ea0f169e
--- /dev/null
+++ b/src/renderer/utils/plugin/pluginDialogInteractions.ts
@@ -0,0 +1,109 @@
+import { setupPluginDropdownInteractions } from './pluginDropdownManager';
+
+export const attachPluginDialogInteractions = (root: HTMLElement) => {
+  const handleCheckboxToggle = (event: Event) => {
+    const target = event.target as HTMLElement;
+    const checkbox = target.closest('[data-checkbox-toggle]');
+    if (!checkbox || !root.contains(checkbox)) return;
+    event.preventDefault();
+
+    const input = checkbox.querySelector(
+      'input[type=checkbox]',
+    ) as HTMLInputElement | null;
+    const knob = checkbox.querySelector('div') as HTMLElement | null;
+    if (!input || !knob) return;
+
+    input.checked = !input.checked;
+    if (input.checked) {
+      checkbox.classList.remove('bg-line-strong');
+      checkbox.classList.add('bg-accent');
+      knob.classList.remove('left-[2px]');
+      knob.classList.add('left-[14px]');
+    } else {
+      checkbox.classList.remove('bg-accent');
+      checkbox.classList.add('bg-line-strong');
+      knob.classList.remove('left-[14px]');
+      knob.classList.add('left-[2px]');
+    }
+
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  const handleInputBlur = (event: Event) => {
+    const input = event.target as HTMLInputElement;
+    if (
+      input.tagName !== 'INPUT' ||
+      input.type !== 'number' ||
+      !input.hasAttribute('data-plugin-input-blur')
+    ) {
+      return;
+    }
+
+    const minValue = input.getAttribute('data-plugin-input-min');
+    const maxValue = input.getAttribute('data-plugin-input-max');
+    const parsedValue = Number.parseFloat(input.value);
+
+    if (input.value === '' || Number.isNaN(parsedValue)) {
+      input.value = String(minValue ? Number.parseFloat(minValue) : 0);
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+      return;
+    }
+
+    let clampedValue = parsedValue;
+    if (minValue && parsedValue < Number.parseFloat(minValue)) {
+      clampedValue = Number.parseFloat(minValue);
+    }
+    if (maxValue && parsedValue > Number.parseFloat(maxValue)) {
+      clampedValue = Number.parseFloat(maxValue);
+    }
+
+    if (clampedValue !== parsedValue) {
+      input.value = String(clampedValue);
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+  };
+
+  const handleEvent = (event: Event) => {
+    const target = event.target as HTMLElement;
+    const handlerAttribute =
+      event.type === 'click'
+        ? 'data-plugin-handler'
+        : event.type === 'input'
+        ? 'data-plugin-handler-input'
+        : event.type === 'change'
+        ? 'data-plugin-handler-change'
+        : null;
+    if (!handlerAttribute) return;
+
+    let element: HTMLElement | null = target;
+    while (element && element !== root) {
+      const handlerName = element.getAttribute(handlerAttribute);
+      if (handlerName) {
+        const handler = (window as unknown as Record<string, unknown>)[
+          handlerName
+        ];
+        if (typeof handler === 'function') {
+          (handler as (event: Event) => void)(event);
+        }
+        return;
+      }
+      element = element.parentElement;
+    }
+  };
+
+  const detachDropdowns = setupPluginDropdownInteractions(root);
+  root.addEventListener('click', handleCheckboxToggle);
+  root.addEventListener('click', handleEvent);
+  root.addEventListener('change', handleEvent);
+  root.addEventListener('input', handleEvent);
+  root.addEventListener('blur', handleInputBlur, true);
+
+  return () => {
+    root.removeEventListener('click', handleCheckboxToggle);
+    root.removeEventListener('click', handleEvent);
+    root.removeEventListener('change', handleEvent);
+    root.removeEventListener('input', handleEvent);
+    root.removeEventListener('blur', handleInputBlur, true);
+    detachDropdowns();
+  };
+};
diff --git a/src/renderer/windows/main/App.tsx b/src/renderer/windows/main/App.tsx
index 8f76ec21..46aa0858 100644
--- a/src/renderer/windows/main/App.tsx
+++ b/src/renderer/windows/main/App.tsx
@@ -226,6 +226,8 @@ export default function App() {
     isOpen: false,
     message: '',
     confirmText: t('common.confirm'),
+    cancelText: undefined as string | undefined,
+    danger: false,
     type: 'alert' as 'alert' | 'confirm' | 'custom',
   }));
 
@@ -240,12 +242,14 @@ export default function App() {
     confirmText?: string;
     cancelText?: string;
     showCancel?: boolean;
+    onContentMount?: (element: HTMLElement) => void | (() => void);
   }>({
     isOpen: false,
     html: '',
     confirmText: undefined,
     cancelText: undefined,
     showCancel: false,
+    onContentMount: undefined,
   });
 
   // Global Color Picker 상태
@@ -334,12 +338,30 @@ export default function App() {
     return () => window.removeEventListener('keydown', handler, true);
   }, [shortcuts?.toggleSettingsPanel, isSettingsOpen]);
 
-  const showAlert = (message: string, confirmText?: string) => {
+  // 새 요청이 기존 alert/confirm을 대체할 때 이전 콜백을 settle해 Promise 유실 방지
+  const settlePendingDialog = () => {
+    const cancel = cancelCallbackRef.current;
+    confirmCallbackRef.current = null;
+    cancelCallbackRef.current = null;
+    cancel?.();
+  };
+
+  const showAlert = (
+    message: string,
+    confirmText?: string,
+    onDismiss?: () => void,
+  ) => {
+    settlePendingDialog();
+    // alert는 확인·배경 클릭 어느 경로로 닫혀도 동일하게 settle
+    confirmCallbackRef.current = onDismiss ?? null;
+    cancelCallbackRef.current = onDismiss ?? null;
     setAlertState({
       isOpen: true,
       message,
       type: 'alert',
       confirmText: confirmText || t('common.confirm'),
+      cancelText: undefined,
+      danger: false,
     });
   };
 
@@ -379,14 +401,26 @@ export default function App() {
   const showConfirm = (
     message: string,
     onConfirm: () => void,
-    onCancel?: () => void,
-    confirmText = t('common.confirm'),
+    options?: {
+      onCancel?: () => void;
+      confirmText?: string;
+      cancelText?: string;
+      danger?: boolean;
+    },
   ) => {
+    settlePendingDialog();
     confirmCallbackRef.current =
       typeof onConfirm === 'function' ? onConfirm : null;
     cancelCallbackRef.current =
-      typeof onCancel === 'function' ? onCancel : null;
-    setAlertState({ isOpen: true, message, confirmText, type: 'confirm' });
+      typeof options?.onCancel === 'function' ? options.onCancel : null;
+    setAlertState({
+      isOpen: true,
+      message,
+      confirmText: options?.confirmText || t('common.confirm'),
+      cancelText: options?.cancelText,
+      danger: options?.danger ?? false,
+      type: 'confirm',
+    });
   };
 
   const closeAlert = () => {
@@ -394,26 +428,38 @@ export default function App() {
       isOpen: false,
       message: '',
       confirmText: t('common.confirm'),
+      cancelText: undefined,
+      danger: false,
       type: 'alert',
     });
     confirmCallbackRef.current = null;
     cancelCallbackRef.current = null;
   };
 
+  // 닫은 뒤 콜백 실행 — 콜백이 동기적으로 새 다이얼로그를 열어도 닫히지 않게
   const handleAlertConfirm = () => {
-    if (confirmCallbackRef.current) {
-      confirmCallbackRef.current();
-    }
+    const callback = confirmCallbackRef.current;
     closeAlert();
+    callback?.();
   };
 
   const handleAlertCancel = () => {
-    if (cancelCallbackRef.current) {
-      cancelCallbackRef.current();
-    }
+    const callback = cancelCallbackRef.current;
     closeAlert();
+    callback?.();
   };
 
+  // 언마운트 시 대기 중 다이얼로그 Promise settle (HMR·루트 교체 대비)
+  useEffect(
+    () => () => {
+      const cancel = cancelCallbackRef.current;
+      confirmCallbackRef.current = null;
+      cancelCallbackRef.current = null;
+      cancel?.();
+    },
+    [],
+  );
+
   // Custom Dialog 핸들러
   const showCustomDialog = (
     html: string,
@@ -423,6 +469,7 @@ export default function App() {
       confirmText?: string;
       cancelText?: string;
       showCancel?: boolean;
+      onContentMount?: (element: HTMLElement) => void | (() => void);
     },
   ) => {
     customDialogCallbackRef.current = {
@@ -435,16 +482,25 @@ export default function App() {
       confirmText: options?.confirmText,
       cancelText: options?.cancelText,
       showCancel: options?.showCancel ?? false,
+      onContentMount: options?.onContentMount,
     });
   };
 
   const closeCustomDialog = () => {
+    // 다이얼로그 내부 앵커에 붙은 전역 피커는 다이얼로그와 함께 정리
+    if (
+      colorPickerState.isOpen &&
+      colorPickerState.referenceElement?.closest('[data-plugin-dialog-content]')
+    ) {
+      closeColorPicker();
+    }
     setCustomDialogState({
       isOpen: false,
       html: '',
       confirmText: undefined,
       cancelText: undefined,
       showCancel: false,
+      onContentMount: undefined,
     });
     customDialogCallbackRef.current = {};
   };
@@ -668,8 +724,7 @@ export default function App() {
             async () => {
               await handleResetCurrentMode();
             },
-            undefined,
-            t('confirm.reset'),
+            { confirmText: t('confirm.reset') },
           )
         }
         onResetCounters={() =>
@@ -678,8 +733,7 @@ export default function App() {
             async () => {
               await window.api.keys.resetCountersMode(selectedKeyType);
             },
-            undefined,
-            t('confirm.reset'),
+            { confirmText: t('confirm.reset') },
           )
         }
         activeTool={activeTool}
@@ -731,7 +785,8 @@ export default function App() {
         message={alertState.message}
         type={alertState.type}
         confirmText={alertState.confirmText}
-        cancelText={undefined}
+        cancelText={alertState.cancelText}
+        danger={alertState.danger}
         showCancel={undefined}
         onConfirm={handleAlertConfirm}
         onCancel={handleAlertCancel}
@@ -743,6 +798,7 @@ export default function App() {
         confirmText={customDialogState.confirmText}
         cancelText={customDialogState.cancelText}
         showCancel={customDialogState.showCancel}
+        onCustomContentMount={customDialogState.onContentMount}
         onConfirm={handleCustomDialogConfirm}
         onCancel={handleCustomDialogCancel}
       />
@@ -762,6 +818,8 @@ export default function App() {
           offsetY={colorPickerState.referenceElement ? 10 : -80}
           placement="right"
           solidOnly={true}
+          portalToBody={true}
+          closeOnScroll={true}
         />
       )}
       {(updateAvailable || isLatestVersion) && updateInfo && (
diff --git a/src/types/electron.d.ts b/src/types/electron.d.ts
index 5a219644..c9302acb 100644
--- a/src/types/electron.d.ts
+++ b/src/types/electron.d.ts
@@ -10,12 +10,20 @@ declare global {
     __dmn_window_type?: 'main' | 'overlay';
     __dmn_current_plugin_id?: string;
     __dmn_current_locale?: string;
-    __dmn_showAlert?: (message: string, confirmText?: string) => void;
+    __dmn_showAlert?: (
+      message: string,
+      confirmText?: string,
+      onDismiss?: () => void,
+    ) => void;
     __dmn_showConfirm?: (
       message: string,
       onConfirm: () => void,
-      onCancel?: () => void,
-      confirmText?: string,
+      options?: {
+        onCancel?: () => void;
+        confirmText?: string;
+        cancelText?: string;
+        danger?: boolean;
+      },
     ) => void;
     __dmn_showCustomDialog?: (
       html: string,
@@ -25,6 +33,7 @@ declare global {
         confirmText?: string;
         cancelText?: string;
         showCancel?: boolean;
+        onContentMount?: (element: HTMLElement) => void | (() => void);
       },
     ) => void;
     __dmn_showColorPicker?: (options: {

From e5059f922d9d7b96180ea9cf17b65592ef23ba64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:18:48 +0900
Subject: [PATCH 12/17] =?UTF-8?q?feat:=20=ED=94=8C=EB=9F=AC=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=84=A4=EC=A0=95=20=EC=84=B9=EC=85=98=20API=20?=
 =?UTF-8?q?=EB=8F=84=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- divider 타입 제거, section 타입 신설 — 카드 단위 그룹, 조건부 그룹 표시,
  첫 section 앞 항목의 암시적 카드
- 패널과 모달이 동일한 정규화(normalizeSettingsSections)와 카드 구조 공유,
  section 키는 저장값·기본값·조회·변경 콜백에서 제외
- 미지원 타입(기존 divider 포함)은 fail-closed 제외 + 플러그인·키당 1회 진단,
  visibility 예외도 fail-closed로 격리하고 empty-state 단락 경로에서도 기록
- 모달 number/select 커밋 값을 스키마 타입으로 복원(coerceSettingValue) —
  패널의 Number()/optionMap 의미와 일치
- NumberInput min/max 미지정 시 무제한으로 변경 — 설정 스키마의 optional 계약과 일치
---
 .../components/main/Grid/PropertiesPanel.tsx  | 115 +++---
 .../PluginSettingsPanelView.tsx               |  54 ++-
 .../Grid/PropertiesPanel/PropertyInputs.tsx   |  36 +-
 .../main/Grid/PropertiesPanel/index.ts        |   1 -
 .../single/SingleSelectionPanel.tsx           |  91 +++--
 .../plugins/runtime/api/defineElement.ts      | 245 ++++++++-----
 .../plugins/runtime/api/defineSettings.ts     | 242 ++++++++-----
 .../plugins/runtime/settingsSections.test.ts  | 327 ++++++++++++++++++
 .../plugins/runtime/settingsSections.ts       | 198 +++++++++++
 src/types/plugin/api.ts                       |  17 +-
 10 files changed, 1029 insertions(+), 297 deletions(-)
 create mode 100644 src/renderer/plugins/runtime/settingsSections.test.ts
 create mode 100644 src/renderer/plugins/runtime/settingsSections.ts

diff --git a/src/renderer/components/main/Grid/PropertiesPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel.tsx
index c0570812..c6e28d1b 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel.tsx
@@ -12,6 +12,12 @@ import { usePropertiesPanelStore } from '@stores/grid/usePropertiesPanelStore';
 import { useLayerGroupStore } from '@stores/data/useLayerGroupStore';
 import { getKeyInfoByGlobalKey } from '@utils/core/KeyMaps';
 import { translatePluginMessage } from '@utils/plugin/pluginI18n';
+import {
+  getDefaultSettings,
+  normalizeSettingsSections,
+  omitLayoutSettingValues,
+  type SettingsNormalizationErrorKind,
+} from '@plugins/runtime/settingsSections';
 import {
   toRgbHexColor,
   parseAlphaPercent,
@@ -37,10 +43,10 @@ import {
   TABS,
   TabType,
   PropertyRow,
+  PropertySection,
   NumberInput,
   ColorInput,
   TextInput,
-  SectionDivider,
   LayerPanel,
   PluginSelectionPanel,
   SingleGraphPanel,
@@ -300,6 +306,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     Partial<KeyPosition> & { dx?: number; dy?: number }
   >({});
   const pluginSettingsHistoryRef = useRef<string | null>(null);
+  const pluginVisibilityErrorsRef = useRef(new Set<string>());
   const pluginTransformHistoryRef = useRef<string | null>(null);
 
   // preview가 store를 직접 변경하므로, commit이 아닌 preview 시작 시 히스토리 저장
@@ -1062,23 +1069,16 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
 
   const showFrame = isPanelVisible || !!pluginSettingsPanel;
 
-  const pluginDefaultSettings = (() => {
-    const defaults: Record<string, unknown> = {};
-    if (selectedPluginDefinition?.settings) {
-      Object.entries(selectedPluginDefinition.settings).forEach(
-        ([key, schema]) => {
-          const schemaValue = schema as PluginSettingSchema;
-          if (schemaValue.type === 'divider') return;
-          defaults[key] = schemaValue.default;
-        },
-      );
-    }
-    return defaults;
-  })();
+  const pluginDefaultSettings = getDefaultSettings(
+    selectedPluginDefinition?.settings,
+  );
 
   const resolvedPluginSettings = {
     ...pluginDefaultSettings,
-    ...(selectedPluginElement?.settings || {}),
+    ...omitLayoutSettingValues(
+      selectedPluginDefinition?.settings,
+      selectedPluginElement?.settings || {},
+    ),
   };
 
   const ensurePluginSettingsHistory = () => {
@@ -2126,15 +2126,39 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
     handleKnobBatchUpdate(batchUpdates);
   };
 
+  // 정규화 진단 리포터 — 플러그인·키당 1회만 기록, empty-state 단락 경로의
+  // hasRenderableSettings에도 동일 리포터를 전달해 로깅 누락 방지
+  const reportPluginNormalizationError = (
+    pluginId: string,
+    key: string,
+    error: unknown,
+    kind: SettingsNormalizationErrorKind,
+  ) => {
+    const errorKey = `${pluginId}:${key}`;
+    if (pluginVisibilityErrorsRef.current.has(errorKey)) return;
+    pluginVisibilityErrorsRef.current.add(errorKey);
+    const message =
+      kind === 'unsupported-type'
+        ? `Unsupported setting type for "${key}"`
+        : `Failed to evaluate visibility for setting "${key}"`;
+    console.error(`[Plugin ${pluginId}] ${message}:`, error);
+  };
+
   const renderPluginSettingsForm = (
     schema: Record<string, PluginSettingSchema> | undefined,
     values: Record<string, unknown>,
     messages: PluginMessages | undefined,
+    pluginId: string,
     colorIdPrefix: string,
     onChange: (key: string, value: unknown) => void,
-    options?: { wrap?: boolean },
   ) => {
-    if (!schema || Object.keys(schema).length === 0) {
+    const sections = normalizeSettingsSections(
+      schema,
+      values,
+      (key, error, kind) =>
+        reportPluginNormalizationError(pluginId, key, error, kind),
+    );
+    if (!sections.some((section) => section.renderVisible)) {
       return (
         <p className="text-fg-faint text-body text-center">
           {t('propertiesPanel.pluginNoSettings') || '설정할 항목이 없습니다.'}
@@ -2165,21 +2189,12 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
       return '200px';
     };
 
-    const wrap = options?.wrap !== false;
-    const rows = Object.entries(schema).map(([key, setting]) => {
-      const schemaValue = setting as PluginSettingSchema;
-
-      if (schemaValue.visible !== undefined) {
-        const vis =
-          typeof schemaValue.visible === 'function'
-            ? schemaValue.visible(values)
-            : schemaValue.visible;
-        if (!vis) return null;
-      }
-
-      if (schemaValue.type === 'divider') {
-        return <SectionDivider key={`divider-${key}`} />;
-      }
+    const renderEntry = (
+      key: string,
+      schemaValue: Exclude<PluginSettingSchema, { type: 'section' }>,
+      renderVisible: boolean,
+    ) => {
+      if (!renderVisible) return null;
       const rawValue =
         values[key] !== undefined ? values[key] : schemaValue.default;
       const labelText = translate(schemaValue.label, schemaValue.label);
@@ -2297,15 +2312,33 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           {control}
         </PropertyRow>
       );
-    });
-
-    const filtered = rows.filter(Boolean);
-
-    if (!wrap) {
-      return <>{filtered}</>;
-    }
+    };
 
-    return <div className="flex flex-col gap-[12px]">{filtered}</div>;
+    return (
+      <div className="flex flex-col gap-[12px]">
+        {sections.map((section) => {
+          if (!section.renderVisible) return null;
+          const sectionLabel = translate(section.label, section.label);
+          return (
+            <div
+              key={section.key ?? 'implicit'}
+              className="flex flex-col gap-[6px]"
+            >
+              {section.label && (
+                <p className="text-fg-faint text-body text-left px-[2px]">
+                  {sectionLabel}
+                </p>
+              )}
+              <PropertySection>
+                {section.entries.map((entry) =>
+                  renderEntry(entry.key, entry.schema, entry.renderVisible),
+                )}
+              </PropertySection>
+            </div>
+          );
+        })}
+      </div>
+    );
   };
 
   // 배치 편집용 interactiveRefs
@@ -2595,6 +2628,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           handlePluginSettingsPanelConfirm={handlePluginSettingsPanelConfirm}
           setPluginScrollRef={setPluginScrollRef}
           renderPluginSettingsForm={renderPluginSettingsForm}
+          reportNormalizationError={reportPluginNormalizationError}
           t={t}
         />
       );
@@ -2845,6 +2879,7 @@ const PropertiesPanel: React.FC<PropertiesPanelProps> = ({
           showModalHint={showModalHint}
           showSettings={showSettings}
           renderPluginSettingsForm={renderPluginSettingsForm}
+          reportNormalizationError={reportPluginNormalizationError}
           selectedPluginDefinition={selectedPluginDefinition}
           resolvedPluginSettings={resolvedPluginSettings}
           handlePluginSettingChange={handlePluginSettingChange}
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
index b0b882e8..6580f83c 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PluginSettingsPanelView.tsx
@@ -6,7 +6,10 @@ import type {
 } from '@src/types/plugin/api';
 import type { PluginSettingsPanelPayload } from '@stores/grid/usePropertiesPanelStore';
 import { PANEL_ROOT_CLASS, PANEL_HEADER_CLASS } from './panelChrome';
-import { PropertySection } from './PropertyInputs';
+import {
+  hasRenderableSettings,
+  type SettingsNormalizationErrorKind,
+} from '@plugins/runtime/settingsSections';
 
 interface PluginSettingsPanelViewProps {
   setPanelElement: (el: HTMLDivElement | null) => void;
@@ -22,10 +25,16 @@ interface PluginSettingsPanelViewProps {
     schema: Record<string, PluginSettingSchema> | undefined,
     values: Record<string, unknown>,
     messages: PluginMessages | undefined,
+    pluginId: string,
     colorIdPrefix: string,
     onChange: (key: string, value: unknown) => void,
-    options?: { wrap?: boolean },
   ) => React.ReactNode;
+  reportNormalizationError: (
+    pluginId: string,
+    key: string,
+    error: unknown,
+    kind: SettingsNormalizationErrorKind,
+  ) => void;
   t: (key: string) => string | undefined;
 }
 
@@ -37,14 +46,24 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
   handlePluginSettingsPanelConfirm,
   setPluginScrollRef,
   renderPluginSettingsForm,
+  reportNormalizationError,
   t,
 }) => {
+  // 렌더할 설정이 없으면 안내 문구를 패널 세로 중앙에 배치
+  // empty-state로 단락돼도 visibility 예외가 기록되도록 폼과 같은 리포터 전달
+  const settingsRenderable = hasRenderableSettings(
+    pluginSettingsPanel.definition.settings,
+    pluginPanelSettings,
+    (key, error, kind) =>
+      reportNormalizationError(pluginSettingsPanel.pluginId, key, error, kind),
+  );
+
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
       <div className={PANEL_HEADER_CLASS}>
         {/* 한 줄 헤더 — 타이틀 + 연한 플러그인 id (배치 패널의 카운트 표기와 동일 관례) */}
         <div className="flex items-center gap-[8px] min-w-0">
-          <span className="text-fg text-style-2 leading-none flex-shrink-0">
+          <span className="text-fg text-label leading-none flex-shrink-0">
             {t('propertiesPanel.pluginSettings') || '플러그인 설정'}
           </span>
           <span
@@ -55,31 +74,36 @@ const PluginSettingsPanelView: React.FC<PluginSettingsPanelViewProps> = ({
           </span>
         </div>
       </div>
-      <div className="flex-1 properties-panel-overlay-scroll">
-        <div
-          ref={setPluginScrollRef}
-          className="properties-panel-overlay-viewport"
-        >
-          <div className="px-[12px] pb-[12px]">
-            {/* 요소 선택 패널과 동일한 섹션 카드로 폼을 감쌈 */}
-            <PropertySection>
+      {settingsRenderable ? (
+        <div className="flex-1 properties-panel-overlay-scroll">
+          <div
+            ref={setPluginScrollRef}
+            className="properties-panel-overlay-viewport"
+          >
+            <div className="px-[12px] pb-[12px]">
               {renderPluginSettingsForm(
                 pluginSettingsPanel.definition.settings,
                 pluginPanelSettings,
                 pluginSettingsPanel.definition.messages,
+                pluginSettingsPanel.pluginId,
                 `plugin-settings-${pluginSettingsPanel.pluginId}`,
                 handlePluginSettingsPanelChange,
-                { wrap: false },
               )}
-            </PropertySection>
+            </div>
           </div>
         </div>
-      </div>
+      ) : (
+        <div className="flex-1 flex items-center justify-center px-[24px]">
+          <p className="text-fg-faint text-body text-center">
+            {t('propertiesPanel.pluginNoSettings') || '설정할 항목이 없습니다.'}
+          </p>
+        </div>
+      )}
       {/* 단일 저장 CTA — 취소는 우상단 패널 토글(X)이 담당 */}
       <div className="p-[12px] shrink-0">
         <button
           onClick={handlePluginSettingsPanelConfirm}
-          className="w-full h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-lg text-accent-fg text-label transition-colors duration-fast"
+          className="w-full h-[30px] bg-accent-deep hover:bg-accent-deep-hover active:bg-accent-deep-active rounded-surface text-accent-fg text-label transition-colors duration-fast"
         >
           {t('common.save') || '저장'}
         </button>
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx b/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
index 48702838..5cbfaa3e 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/PropertyInputs.tsx
@@ -12,6 +12,11 @@ import type {
   FontStyleToggleProps,
 } from './types';
 import { TABS } from './types';
+import {
+  SECTION_CARD_CLASS,
+  FORM_ROW_CLASS,
+  FORM_LABEL_CLASS,
+} from '@utils/cardRecipes';
 import ColorPicker from '@components/main/Modal/content/pickers/ColorPicker';
 
 // ============================================================================
@@ -22,8 +27,8 @@ export const PropertyRow: React.FC<PropertyRowProps> = ({
   label,
   children,
 }) => (
-  <div className="flex justify-between items-center w-full min-h-[32px]">
-    <p className="text-fg-muted text-label">{label}</p>
+  <div className={FORM_ROW_CLASS}>
+    <p className={FORM_LABEL_CLASS}>{label}</p>
     <div className="flex items-center gap-[8px]">{children}</div>
   </div>
 );
@@ -31,11 +36,7 @@ export const PropertyRow: React.FC<PropertyRowProps> = ({
 // 그룹 카드 — 관련 속성 행을 하나의 면으로 묶는 섹션 컨테이너
 export const PropertySection: React.FC<{ children: React.ReactNode }> = ({
   children,
-}) => (
-  <div className="bg-fill-faint rounded-surface px-[10px] py-[4px] flex flex-col">
-    {children}
-  </div>
-);
+}) => <div className={SECTION_CARD_CLASS}>{children}</div>;
 
 // ============================================================================
 // 숫자 입력
@@ -45,8 +46,9 @@ export const NumberInput: React.FC<NumberInputProps> = ({
   value,
   onChange,
   onBlur,
-  min = 0,
-  max = 9999,
+  // 미지정 방향은 무제한 — 플러그인 설정 스키마의 optional min/max 계약과 동일
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
   prefix,
   suffix,
   width = '54px',
@@ -266,7 +268,7 @@ export const NumberInput: React.FC<NumberInputProps> = ({
       style={{ width }}
     >
       {prefix && !showMixedPlaceholder && (
-        <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-style-1 pointer-events-none">
+        <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-body pointer-events-none">
           {prefix}
         </span>
       )}
@@ -281,7 +283,7 @@ export const NumberInput: React.FC<NumberInputProps> = ({
         placeholder={showMixedPlaceholder ? mixedPlaceholder : undefined}
         className={`absolute ${
           prefix && !showMixedPlaceholder ? 'left-[20px]' : 'left-0'
-        } top-[-1px] h-[23px] ${
+        } top-0 h-[23px] ${
           prefix && !showMixedPlaceholder ? 'w-[26px]' : 'w-full'
         } bg-transparent text-body tabular-nums ${
           showMixedPlaceholder
@@ -491,7 +493,7 @@ export const OptionalNumberInput: React.FC<OptionalNumberInputProps> = ({
         style={{ width }}
       >
         {!showMixedPlaceholder && (
-          <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-style-1 pointer-events-none">
+          <span className="absolute left-[5px] top-[50%] transform -translate-y-1/2 text-fg-muted text-body pointer-events-none">
             {prefix}
           </span>
         )}
@@ -506,7 +508,7 @@ export const OptionalNumberInput: React.FC<OptionalNumberInputProps> = ({
           placeholder={effectivePlaceholder}
           className={`absolute ${
             !showMixedPlaceholder ? 'left-[20px]' : 'left-0'
-          } top-[-1px] h-[23px] ${
+          } top-0 h-[23px] ${
             !showMixedPlaceholder ? 'w-[26px]' : 'w-full'
           } bg-transparent text-body tabular-nums ${textClass} ${placeholderClass} text-center`}
         />
@@ -782,14 +784,6 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
   );
 };
 
-// ============================================================================
-// 섹션 구분선
-// ============================================================================
-
-export const SectionDivider: React.FC = () => (
-  <div className="w-full h-[1px] bg-line" />
-);
-
 // ============================================================================
 // 글꼴 스타일 아이콘
 // ============================================================================
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/index.ts b/src/renderer/components/main/Grid/PropertiesPanel/index.ts
index 8a6f7e14..4821d262 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/index.ts
+++ b/src/renderer/components/main/Grid/PropertiesPanel/index.ts
@@ -12,7 +12,6 @@ export {
   ToggleSwitch,
   FontStyleToggle,
   Tabs,
-  SectionDivider,
   CloseIcon,
   ModeToggleIcon,
 } from './PropertyInputs';
diff --git a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
index e82b20e3..22d6cad0 100644
--- a/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
+++ b/src/renderer/components/main/Grid/PropertiesPanel/single/SingleSelectionPanel.tsx
@@ -16,6 +16,10 @@ import type {
 } from '@src/types/plugin/api';
 import type { KeyInfo } from '@utils/core/KeyMaps';
 import { PANEL_ROOT_CLASS, PANEL_HEADER_CLASS } from '../panelChrome';
+import {
+  hasRenderableSettings,
+  type SettingsNormalizationErrorKind,
+} from '@plugins/runtime/settingsSections';
 import {
   PropertyRow,
   NumberInput,
@@ -95,10 +99,16 @@ interface PluginSelectionPanelProps {
     schema: Record<string, PluginSettingSchema> | undefined,
     values: Record<string, unknown>,
     messages: PluginMessages | undefined,
+    pluginId: string,
     colorIdPrefix: string,
     onChange: (key: string, value: unknown) => void,
-    options?: { wrap?: boolean },
   ) => React.ReactNode;
+  reportNormalizationError: (
+    pluginId: string,
+    key: string,
+    error: unknown,
+    kind: SettingsNormalizationErrorKind,
+  ) => void;
   selectedPluginDefinition: PluginDefinitionInternal | null;
   resolvedPluginSettings: Record<string, unknown>;
   handlePluginSettingChange: (key: string, value: unknown) => void;
@@ -120,15 +130,55 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
   showModalHint,
   showSettings,
   renderPluginSettingsForm,
+  reportNormalizationError,
   selectedPluginDefinition,
   resolvedPluginSettings,
   handlePluginSettingChange,
   t,
 }) => {
+  // 위치 섹션도 설정 폼도 없을 때는 안내 문구만 남음 — 패널 세로 중앙에 배치
+  // notice-only로 단락돼도 visibility 예외가 기록되도록 폼과 같은 리포터 전달
+  const settingsRenderable =
+    showSettings &&
+    hasRenderableSettings(
+      selectedPluginDefinition?.settings,
+      resolvedPluginSettings,
+      (key, error, kind) =>
+        reportNormalizationError(
+          selectedPluginDefinition?.pluginId ?? 'unknown',
+          key,
+          error,
+          kind,
+        ),
+    );
+  const noticeOnly = !isPluginResizable && !settingsRenderable;
+  const noticeText = !hasSinglePluginSelection
+    ? t('propertiesPanel.pluginMultiSelection') ||
+      '플러그인 요소는 한 번에 하나만 편집할 수 있습니다.'
+    : showModalHint
+    ? t('propertiesPanel.pluginModalHint') ||
+      '이 플러그인은 설정 모달을 사용합니다. 요소를 클릭해 설정하세요.'
+    : t('propertiesPanel.pluginNoSettings') || '설정할 항목이 없습니다.';
+
+  if (noticeOnly) {
+    return (
+      <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
+        <div className={PANEL_HEADER_CLASS}>
+          <span className="text-fg text-label leading-none truncate max-w-[120px]">
+            {pluginTitle}
+          </span>
+        </div>
+        <div className="flex-1 flex items-center justify-center px-[24px] pb-[48px]">
+          <p className="text-fg-faint text-body text-center">{noticeText}</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div ref={setPanelElement} className={PANEL_ROOT_CLASS}>
       <div className={PANEL_HEADER_CLASS}>
-        <span className="text-fg text-style-2 leading-none truncate max-w-[120px]">
+        <span className="text-fg text-label leading-none truncate max-w-[120px]">
           {pluginTitle}
         </span>
       </div>
@@ -194,20 +244,15 @@ export const PluginSelectionPanel: React.FC<PluginSelectionPanelProps> = ({
                   '이 플러그인은 설정 모달을 사용합니다. 요소를 클릭해 설정하세요.'}
               </p>
             )}
-            {showSettings && (
-              <PropertySection>
-                {renderPluginSettingsForm(
-                  selectedPluginDefinition?.settings,
-                  resolvedPluginSettings,
-                  selectedPluginDefinition?.messages,
-                  `plugin-element-${
-                    selectedPluginElement?.fullId ?? 'unknown'
-                  }`,
-                  handlePluginSettingChange,
-                  { wrap: false },
-                )}
-              </PropertySection>
-            )}
+            {showSettings &&
+              renderPluginSettingsForm(
+                selectedPluginDefinition?.settings,
+                resolvedPluginSettings,
+                selectedPluginDefinition?.messages,
+                selectedPluginDefinition?.pluginId ?? 'unknown',
+                `plugin-element-${selectedPluginElement?.fullId ?? 'unknown'}`,
+                handlePluginSettingChange,
+              )}
           </div>
         </div>
       </div>
@@ -287,7 +332,7 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
           <input
             ref={renameInputRef}
             type="text"
-            className="text-fg text-style-2 leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
+            className="text-fg text-label leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
             value={renameValue}
             onChange={(e) => setRenameValue(e.target.value)}
             onBlur={() => {
@@ -309,7 +354,7 @@ export const SingleGraphPanel: React.FC<SingleGraphPanelProps> = ({
         ) : (
           <div className="flex items-center gap-[4px] min-w-0">
             <span
-              className="text-fg text-style-2 truncate max-w-[100px] cursor-default"
+              className="text-fg text-label truncate max-w-[100px] cursor-default"
               onDoubleClick={handleRenameStart}
               title={graphTitle}
             >
@@ -906,7 +951,7 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
           <input
             ref={renameInputRef}
             type="text"
-            className="text-fg text-style-2 leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
+            className="text-fg text-label leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
             value={renameValue}
             onChange={(e) => setRenameValue(e.target.value)}
             onBlur={() => {
@@ -928,7 +973,7 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
         ) : (
           <div className="flex items-center gap-[4px] min-w-0">
             <span
-              className="text-fg text-style-2 truncate max-w-[100px] cursor-default"
+              className="text-fg text-label truncate max-w-[100px] cursor-default"
               onDoubleClick={handleRenameStart}
               title={knobTitle}
             >
@@ -959,7 +1004,7 @@ export const SingleKnobPanel: React.FC<SingleKnobPanelProps> = ({
                   onClick={() => setCapturing((v) => !v)}
                   className={`flex items-center justify-center h-[23px] min-w-[0px] px-[8px] bg-fill hover:bg-fill-hover active:bg-fill-active transition-colors duration-fast rounded-md ${
                     capturing ? 'shadow-focus-ring' : ''
-                  } text-fg text-style-2`}
+                  } text-fg text-label`}
                   title={singleKnobPosition.axisId || ''}
                 >
                   <span className="truncate max-w-[120px]">
@@ -1444,7 +1489,7 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
             <input
               ref={renameInputRef}
               type="text"
-              className="text-fg text-style-2 leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
+              className="text-fg text-label leading-none bg-transparent border-none p-0 outline-none w-[130px] caret-accent"
               value={renameValue}
               onChange={(e) => setRenameValue(e.target.value)}
               onBlur={() => {
@@ -1466,7 +1511,7 @@ export const SingleKeyStatPanel: React.FC<SingleKeyStatPanelProps> = ({
           ) : (
             <div className="flex items-center gap-[4px] min-w-0">
               <span
-                className="text-fg text-style-2 leading-none cursor-default truncate max-w-[110px]"
+                className="text-fg text-label leading-none cursor-default truncate max-w-[110px]"
                 onDoubleClick={handleRenameStart}
                 title={keyLikeTitle}
               >
diff --git a/src/renderer/plugins/runtime/api/defineElement.ts b/src/renderer/plugins/runtime/api/defineElement.ts
index 4f995307..b8ea2246 100644
--- a/src/renderer/plugins/runtime/api/defineElement.ts
+++ b/src/renderer/plugins/runtime/api/defineElement.ts
@@ -8,7 +8,20 @@ import { useKeyStore } from '@stores/data/useKeyStore';
 import { useStatItemStore } from '@stores/data/useStatItemStore';
 import { useGraphItemStore } from '@stores/data/useGraphItemStore';
 import { translatePluginMessage } from '@utils/plugin/pluginI18n';
+import {
+  SECTION_WRAPPER_CLASS,
+  SECTION_LABEL_CLASS,
+  SECTION_CARD_CLASS,
+  FORM_ROW_CLASS,
+  FORM_LABEL_CLASS,
+} from '@utils/cardRecipes';
 import { handlerRegistry } from '../handlers';
+import {
+  coerceSettingValue,
+  getDefaultSettings,
+  normalizeSettingsSections,
+  omitLayoutSettingValues,
+} from '../settingsSections';
 import type { NamespacedStorage } from '../context';
 import type {
   PluginDefinition,
@@ -47,6 +60,7 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
     wrapFunctionWithContext,
     isReloading,
   } = deps;
+  const visibilityErrorKeys = new Set<string>();
 
   return (definition: PluginDefinition) => {
     const defId = pluginId;
@@ -101,14 +115,8 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
       registerCleanup(unsubStore);
     }
 
-    const defaultSettings: Record<string, string | number | boolean> = {};
-    if (definition.settings) {
-      Object.entries(definition.settings).forEach(([key, schema]) => {
-        if (schema.type !== 'divider') {
-          defaultSettings[key] = schema.default;
-        }
-      });
-    }
+    const defaultSettings: Record<string, string | number | boolean> =
+      getDefaultSettings(definition.settings);
 
     let currentLocale = 'ko';
     const applyLocale = (next?: string) => {
@@ -243,60 +251,109 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
         pluginElements,
       });
 
-      const currentSettings: Record<string, unknown> = {
-        ...defaultSettings,
-        ...(element.settings || {}),
-      };
+      const currentSettings: Record<string, unknown> = omitLayoutSettingValues(
+        definition.settings,
+        {
+          ...defaultSettings,
+          ...(element.settings || {}),
+        },
+      );
       const originalSettings = { ...currentSettings };
 
-      let htmlContent =
-        '<div class="flex flex-col gap-[19px] w-full text-left">';
-
-      const _evalVisible = (
-        visible:
-          | boolean
-          | ((settings: Record<string, unknown>) => boolean)
-          | undefined,
-        settings: Record<string, unknown>,
-      ): boolean => {
-        if (visible === undefined) return true;
-        return typeof visible === 'function' ? visible(settings) : visible;
+      const reportNormalizationError = (
+        key: string,
+        error: unknown,
+        kind: 'visibility' | 'unsupported-type',
+      ) => {
+        if (visibilityErrorKeys.has(key)) return;
+        visibilityErrorKeys.add(key);
+        const message =
+          kind === 'unsupported-type'
+            ? `Unsupported setting type for "${key}"`
+            : `Failed to evaluate visibility for setting "${key}"`;
+        console.error(`[Plugin ${pluginId}] ${message}:`, error);
       };
-
-      const _updateVisibility = () => {
-        if (!definition.settings) return;
-        for (const [k, s] of Object.entries(definition.settings)) {
-          if (s.visible === undefined) continue;
-          const el = document.querySelector(
-            `[data-setting-key="${k}"]`,
-          ) as HTMLElement | null;
-          if (el)
-            el.style.display = _evalVisible(
-              s.visible as
-                | boolean
-                | ((settings: Record<string, unknown>) => boolean)
-                | undefined,
-              currentSettings,
-            )
-              ? ''
-              : 'none';
+      const getNormalizedSections = () =>
+        normalizeSettingsSections(
+          definition.settings,
+          currentSettings,
+          reportNormalizationError,
+        );
+      const modalScope = `plugin-element-${encodeURIComponent(
+        pluginId,
+      )}-${encodeURIComponent(instanceId)}`;
+      const findModalElement = (attribute: string, value: string) =>
+        Array.from(
+          document.querySelectorAll<HTMLElement>(`[${attribute}]`),
+        ).find((element) => element.getAttribute(attribute) === value);
+      const updateVisibility = () => {
+        const sections = getNormalizedSections();
+        sections.forEach((section, sectionIndex) => {
+          const sectionElement = findModalElement(
+            'data-settings-section',
+            `${modalScope}-${sectionIndex}`,
+          );
+          if (sectionElement) {
+            sectionElement.style.display = section.renderVisible ? '' : 'none';
+          }
+          section.entries.forEach((entry, entryIndex) => {
+            const entryElement = findModalElement(
+              'data-settings-entry',
+              `${modalScope}-${sectionIndex}-${entryIndex}`,
+            );
+            if (entryElement) {
+              entryElement.style.display = entry.renderVisible ? '' : 'none';
+            }
+          });
+        });
+        const emptyElement = findModalElement(
+          'data-settings-empty',
+          modalScope,
+        );
+        if (emptyElement) {
+          emptyElement.style.display = sections.some(
+            (section) => section.renderVisible,
+          )
+            ? 'none'
+            : '';
         }
       };
+      const commitSettingValue = async (
+        key: string,
+        newValue: string | number | boolean,
+      ) => {
+        currentSettings[key] = newValue;
+        window.api.ui.displayElement.update(instanceId, {
+          settings: { ...currentSettings },
+        });
+        updateVisibility();
+      };
 
-      if (definition.settings) {
-        for (const [key, schema] of Object.entries(definition.settings)) {
-          const _vis = _evalVisible(
-            schema.visible as
-              | boolean
-              | ((settings: Record<string, unknown>) => boolean)
-              | undefined,
-            currentSettings,
+      const normalizedSections = getNormalizedSections();
+      // 패널(renderPluginSettingsForm)과 동일한 섹션 카드 구조·토큰 — section이
+      // 없어도 암시적 카드 하나로 렌더 (모달-패널 외형 통합, 2026-07-12 결정)
+      let htmlContent =
+        '<div class="flex flex-col gap-[12px] w-full text-left">';
+
+      for (const [sectionIndex, section] of normalizedSections.entries()) {
+        htmlContent += `<div data-settings-section="${modalScope}-${sectionIndex}" style="${
+          section.renderVisible ? '' : 'display:none'
+        }" class="${SECTION_WRAPPER_CLASS}">`;
+        if (section.label) {
+          const sectionLabel = translate(
+            section.label,
+            undefined,
+            section.label,
           );
-          if (schema.type === 'divider') {
-            htmlContent += `<div data-setting-key="${key}" style="${
-              _vis ? '' : 'display:none'
-            }" class="w-full h-[1px] bg-[#3A3943]"></div>`;
-          } else {
+          htmlContent += `<p class="${SECTION_LABEL_CLASS}">${sectionLabel}</p>`;
+        }
+        htmlContent += `<div class="${SECTION_CARD_CLASS}">`;
+        for (const [entryIndex, entry] of section.entries.entries()) {
+          const { key, schema } = entry;
+          const entryAttributes = `data-settings-entry="${modalScope}-${sectionIndex}-${entryIndex}" style="${
+            entry.renderVisible ? '' : 'display:none'
+          }"`;
+          {
             const value =
               currentSettings[key] !== undefined
                 ? currentSettings[key]
@@ -308,19 +365,12 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
                 ? translate(schema.placeholder, undefined, schema.placeholder)
                 : schema.placeholder;
 
-            const handleChange = async (
-              newValue: string | number | boolean,
-            ) => {
-              currentSettings[key] = newValue;
-              const newSettings = { ...currentSettings };
-
-              window.api.ui.displayElement.update(instanceId, {
-                settings: newSettings,
-              });
-              _updateVisibility();
-            };
-
-            const wrappedChange = wrapFunctionWithContext(handleChange);
+            const wrappedChange = wrapFunctionWithContext((newValue) => {
+              // DOM 문자열을 스키마 타입으로 복원, 복원 불가면 커밋 스킵
+              const coerced = coerceSettingValue(schema, newValue);
+              if (coerced === null) return;
+              return commitSettingValue(key, coerced);
+            });
 
             if (schema.type === 'boolean') {
               componentHtml = window.api.ui.components.checkbox({
@@ -350,23 +400,21 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
                   }
                 }
 
-                target.classList.remove('border-[#3A3943]');
-                target.classList.add('border-[#459BF8]');
+                target.classList.add('shadow-focus-ring');
 
                 window.api.ui.pickColor({
                   initialColor: String(currentSettings[key] ?? ''),
                   id: pickerId,
                   referenceElement: target as HTMLElement,
                   onColorChange: (newColor) => {
-                    const preview = target.querySelector('div');
-                    if (preview) preview.style.backgroundColor = newColor;
+                    // 스와치(버튼 자체) 미리보기 업데이트
+                    target.style.backgroundColor = newColor;
                   },
                   onColorChangeComplete: (newColor) => {
                     wrappedChange(newColor);
                   },
                   onClose: () => {
-                    target.classList.remove('border-[#459BF8]');
-                    target.classList.add('border-[#3A3943]');
+                    target.classList.remove('shadow-focus-ring');
                   },
                 });
               };
@@ -376,14 +424,13 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
                 handleColorClick,
               );
 
+              // 패널 ColorInput과 동일한 스와치 단독 버튼
               componentHtml = `
-              <button type="button" 
-                class="relative w-[80px] h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] border-[#3A3943] flex items-center justify-center text-[#DBDEE8] text-style-2"
+              <button type="button"
+                class="w-[23px] h-[23px] rounded-md border-[1px] border-line overflow-hidden cursor-pointer transition-colors flex-shrink-0"
+                style="background-color: ${value}"
                 data-plugin-handler="${handlerId}"
-              >
-                <div class="absolute left-[6px] top-[4.5px] w-[11px] h-[11px] rounded-[2px] border border-[#3A3943]" style="background-color: ${value}"></div>
-                <span class="ml-[16px] text-left truncate w-[50px]">Linear</span>
-              </button>
+              ></button>
             `;
             } else if (schema.type === 'string' || schema.type === 'number') {
               const strVal = String(value);
@@ -427,28 +474,31 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
             }
 
             htmlContent += `
-            <div data-setting-key="${key}" style="${
-              _vis ? '' : 'display:none'
-            }" class="flex justify-between w-full items-center">
-              <p class="text-white text-style-2">${labelText}</p>
+            <div ${entryAttributes} class="${FORM_ROW_CLASS}">
+              <p class="${FORM_LABEL_CLASS}">${labelText}</p>
               ${componentHtml}
             </div>
           `;
           }
         }
-      } else {
-        const noSettingsText = await window.api.settings
-          .get()
-          .then((s) => {
-            const locale = s.language || 'ko';
-            return locale === 'en'
-              ? 'No settings available.'
-              : '설정할 항목이 없습니다.';
-          })
-          .catch(() => '설정할 항목이 없습니다.');
-        htmlContent += `<div class="text-gray-400 text-center">${noSettingsText}</div>`;
+        htmlContent += '</div></div>';
       }
 
+      const noSettingsText = await window.api.settings
+        .get()
+        .then((s) => {
+          const locale = s.language || 'ko';
+          return locale === 'en'
+            ? 'No settings available.'
+            : '설정할 항목이 없습니다.';
+        })
+        .catch(() => '설정할 항목이 없습니다.');
+      htmlContent += `<div data-settings-empty="${modalScope}" style="${
+        normalizedSections.some((section) => section.renderVisible)
+          ? 'display:none'
+          : ''
+      }" class="text-fg-faint text-body text-center">${noSettingsText}</div>`;
+
       htmlContent += '</div>';
 
       const [saveText, cancelText] = await window.api.settings
@@ -622,7 +672,10 @@ export const createDefineElement = (deps: DefineElementDependencies) => {
                 position: inst.position,
                 draggable: true,
                 definitionId: defId,
-                settings: inst.settings || { ...defaultSettings },
+                settings: omitLayoutSettingValues(
+                  definition.settings,
+                  inst.settings || { ...defaultSettings },
+                ) as Record<string, string | number | boolean>,
                 state: definition.previewState || {},
                 measuredSize: inst.measuredSize,
                 tabId: inst.tabId,
diff --git a/src/renderer/plugins/runtime/api/defineSettings.ts b/src/renderer/plugins/runtime/api/defineSettings.ts
index 2b137f75..dafe98f3 100644
--- a/src/renderer/plugins/runtime/api/defineSettings.ts
+++ b/src/renderer/plugins/runtime/api/defineSettings.ts
@@ -6,7 +6,20 @@
 import { usePluginDisplayElementStore } from '@stores/plugin/usePluginDisplayElementStore';
 import { usePropertiesPanelStore } from '@stores/grid/usePropertiesPanelStore';
 import { translatePluginMessage } from '@utils/plugin/pluginI18n';
+import {
+  SECTION_WRAPPER_CLASS,
+  SECTION_LABEL_CLASS,
+  SECTION_CARD_CLASS,
+  FORM_ROW_CLASS,
+  FORM_LABEL_CLASS,
+} from '@utils/cardRecipes';
 import { handlerRegistry } from '../handlers';
+import {
+  coerceSettingValue,
+  getDefaultSettings,
+  normalizeSettingsSections,
+  omitLayoutSettingValues,
+} from '../settingsSections';
 import type { NamespacedStorage } from '../context';
 import type {
   PluginSettingsDefinition,
@@ -25,19 +38,15 @@ interface DefineSettingsDependencies {
  */
 export const createDefineSettings = (deps: DefineSettingsDependencies) => {
   const { pluginId, namespacedStorage, registerCleanup } = deps;
+  const visibilityErrorKeys = new Set<string>();
 
   return (definition: PluginSettingsDefinition): PluginSettingsInstance => {
     const SETTINGS_KEY = '__plugin_settings__';
 
     // 기본값 계산
-    const defaultSettings: Record<string, unknown> = {};
-    if (definition.settings) {
-      for (const [key, schema] of Object.entries(definition.settings)) {
-        if (schema.type !== 'divider') {
-          defaultSettings[key] = schema.default;
-        }
-      }
-    }
+    const defaultSettings: Record<string, unknown> = getDefaultSettings(
+      definition.settings,
+    );
 
     // 현재 설정값 (메모리 캐시)
     let currentSettings: Record<string, unknown> = { ...defaultSettings };
@@ -122,10 +131,10 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
       try {
         const saved = await namespacedStorage.get(SETTINGS_KEY);
         if (saved && typeof saved === 'object') {
-          currentSettings = {
+          currentSettings = omitLayoutSettingValues(definition.settings, {
             ...defaultSettings,
             ...(saved as Record<string, unknown>),
-          };
+          });
         }
         isInitialized = true;
       } catch (err) {
@@ -159,55 +168,100 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
         notifyOverlay(currentSettings);
       };
 
-      // ── 조건부 visibility 헬퍼 ──
-      const _evalVisible = (
-        visible:
-          | boolean
-          | ((settings: Record<string, unknown>) => boolean)
-          | undefined,
-        settings: Record<string, unknown>,
-      ): boolean => {
-        if (visible === undefined) return true;
-        return typeof visible === 'function' ? visible(settings) : visible;
+      const reportNormalizationError = (
+        key: string,
+        error: unknown,
+        kind: 'visibility' | 'unsupported-type',
+      ) => {
+        if (visibilityErrorKeys.has(key)) return;
+        visibilityErrorKeys.add(key);
+        const message =
+          kind === 'unsupported-type'
+            ? `Unsupported setting type for "${key}"`
+            : `Failed to evaluate visibility for setting "${key}"`;
+        console.error(`[Plugin ${pluginId}] ${message}:`, error);
+      };
+      const getNormalizedSections = () =>
+        normalizeSettingsSections(
+          definition.settings,
+          dialogSettings,
+          reportNormalizationError,
+        );
+      const modalScope = `plugin-settings-${encodeURIComponent(pluginId)}`;
+      const findModalElement = (attribute: string, value: string) =>
+        Array.from(
+          document.querySelectorAll<HTMLElement>(`[${attribute}]`),
+        ).find((element) => element.getAttribute(attribute) === value);
+      const updateVisibility = () => {
+        const sections = getNormalizedSections();
+        sections.forEach((section, sectionIndex) => {
+          const sectionElement = findModalElement(
+            'data-settings-section',
+            `${modalScope}-${sectionIndex}`,
+          );
+          if (sectionElement) {
+            sectionElement.style.display = section.renderVisible ? '' : 'none';
+          }
+          section.entries.forEach((entry, entryIndex) => {
+            const entryElement = findModalElement(
+              'data-settings-entry',
+              `${modalScope}-${sectionIndex}-${entryIndex}`,
+            );
+            if (entryElement) {
+              entryElement.style.display = entry.renderVisible ? '' : 'none';
+            }
+          });
+        });
+        const emptyElement = findModalElement(
+          'data-settings-empty',
+          modalScope,
+        );
+        if (emptyElement) {
+          emptyElement.style.display = sections.some(
+            (section) => section.renderVisible,
+          )
+            ? 'none'
+            : '';
+        }
       };
 
-      const _updateVisibility = () => {
-        if (!definition.settings) return;
-        for (const [k, s] of Object.entries(definition.settings)) {
-          if (s.visible === undefined) continue;
-          const el = document.querySelector(
-            `[data-setting-key="${k}"]`,
-          ) as HTMLElement | null;
-          if (el)
-            el.style.display = _evalVisible(
-              s.visible as
-                | boolean
-                | ((settings: Record<string, unknown>) => boolean)
-                | undefined,
-              dialogSettings,
-            )
-              ? ''
-              : 'none';
+      const commitSettingValue = (key: string, newValue: unknown) => {
+        const prev = window.__dmn_current_plugin_id;
+        window.__dmn_current_plugin_id = pluginId;
+        try {
+          dialogSettings[key] = newValue;
+          applyPreview(dialogSettings);
+          updateVisibility();
+        } finally {
+          window.__dmn_current_plugin_id = prev;
         }
       };
 
+      const normalizedSections = getNormalizedSections();
+      // 패널(renderPluginSettingsForm)과 동일한 섹션 카드 구조·토큰 — section이
+      // 없어도 암시적 카드 하나로 렌더 (모달-패널 외형 통합, 2026-07-12 결정)
       let htmlContent =
-        '<div class="flex flex-col gap-[19px] w-full text-left">';
-
-      if (definition.settings && Object.keys(definition.settings).length > 0) {
-        for (const [key, schema] of Object.entries(definition.settings)) {
-          const _vis = _evalVisible(
-            schema.visible as
-              | boolean
-              | ((settings: Record<string, unknown>) => boolean)
-              | undefined,
-            dialogSettings,
+        '<div class="flex flex-col gap-[12px] w-full text-left">';
+
+      for (const [sectionIndex, section] of normalizedSections.entries()) {
+        htmlContent += `<div data-settings-section="${modalScope}-${sectionIndex}" style="${
+          section.renderVisible ? '' : 'display:none'
+        }" class="${SECTION_WRAPPER_CLASS}">`;
+        if (section.label) {
+          const sectionLabel = translate(
+            section.label,
+            undefined,
+            section.label,
           );
-          if (schema.type === 'divider') {
-            htmlContent += `<div data-setting-key="${key}" style="${
-              _vis ? '' : 'display:none'
-            }" class="w-full h-[1px] bg-[#3A3943]"></div>`;
-          } else {
+          htmlContent += `<p class="${SECTION_LABEL_CLASS}">${sectionLabel}</p>`;
+        }
+        htmlContent += `<div class="${SECTION_CARD_CLASS}">`;
+        for (const [entryIndex, entry] of section.entries.entries()) {
+          const { key, schema } = entry;
+          const entryAttributes = `data-settings-entry="${modalScope}-${sectionIndex}-${entryIndex}" style="${
+            entry.renderVisible ? '' : 'display:none'
+          }"`;
+          {
             const value =
               dialogSettings[key] !== undefined
                 ? dialogSettings[key]
@@ -220,17 +274,10 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
                 : schema.placeholder;
 
             const handleChange = (newValue: unknown) => {
-              // 플러그인 컨텍스트 설정
-              const prev = window.__dmn_current_plugin_id;
-              window.__dmn_current_plugin_id = pluginId;
-              try {
-                dialogSettings[key] = newValue;
-                // 실시간 미리보기 적용
-                applyPreview(dialogSettings);
-                _updateVisibility();
-              } finally {
-                window.__dmn_current_plugin_id = prev;
-              }
+              // DOM 문자열을 스키마 타입으로 복원, 복원 불가면 커밋 스킵
+              const coerced = coerceSettingValue(schema, newValue);
+              if (coerced === null) return;
+              commitSettingValue(key, coerced);
             };
 
             if (schema.type === 'boolean') {
@@ -261,26 +308,21 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
                   }
                 }
 
-                target.classList.remove('border-[#3A3943]');
-                target.classList.add('border-[#459BF8]');
+                target.classList.add('shadow-focus-ring');
 
                 window.api.ui.pickColor({
                   initialColor: String(dialogSettings[key] ?? ''),
                   id: pickerId,
                   referenceElement: target as HTMLElement,
                   onColorChange: (newColor) => {
-                    // 컬러피커 프리뷰만 업데이트 (버튼 내 색상 미리보기)
-                    const preview = target.querySelector('div');
-                    if (preview) preview.style.backgroundColor = newColor;
+                    // 스와치(버튼 자체) 미리보기 업데이트
+                    target.style.backgroundColor = newColor;
                   },
                   onColorChangeComplete: (newColor) => {
-                    // 마우스를 떼었을 때 실제 적용
-                    dialogSettings[key] = newColor;
-                    applyPreview(dialogSettings);
+                    commitSettingValue(key, newColor);
                   },
                   onClose: () => {
-                    target.classList.remove('border-[#459BF8]');
-                    target.classList.add('border-[#3A3943]');
+                    target.classList.remove('shadow-focus-ring');
                   },
                 });
               };
@@ -290,14 +332,13 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
                 handleColorClick,
               );
 
+              // 패널 ColorInput과 동일한 스와치 단독 버튼
               componentHtml = `
-              <button type="button" 
-                class="relative w-[80px] h-[23px] bg-[#2A2A30] rounded-[7px] border-[1px] border-[#3A3943] flex items-center justify-center text-[#DBDEE8] text-style-2"
+              <button type="button"
+                class="w-[23px] h-[23px] rounded-md border-[1px] border-line overflow-hidden cursor-pointer transition-colors flex-shrink-0"
+                style="background-color: ${value}"
                 data-plugin-handler="${handlerId}"
-              >
-                <div class="absolute left-[6px] top-[4.5px] w-[11px] h-[11px] rounded-[2px] border border-[#3A3943]" style="background-color: ${value}"></div>
-                <span class="ml-[16px] text-left truncate w-[50px]">Linear</span>
-              </button>
+              ></button>
             `;
             } else if (schema.type === 'string' || schema.type === 'number') {
               const strVal = String(value);
@@ -341,28 +382,31 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
             }
 
             htmlContent += `
-            <div data-setting-key="${key}" style="${
-              _vis ? '' : 'display:none'
-            }" class="flex justify-between w-full items-center">
-              <p class="text-white text-style-2">${labelText}</p>
+            <div ${entryAttributes} class="${FORM_ROW_CLASS}">
+              <p class="${FORM_LABEL_CLASS}">${labelText}</p>
               ${componentHtml}
             </div>
           `;
           }
         }
-      } else {
-        const noSettingsText = await window.api.settings
-          .get()
-          .then((s) => {
-            const locale = s.language || 'ko';
-            return locale === 'en'
-              ? 'No settings available.'
-              : '설정할 항목이 없습니다.';
-          })
-          .catch(() => '설정할 항목이 없습니다.');
-        htmlContent += `<div class="text-gray-400 text-center">${noSettingsText}</div>`;
+        htmlContent += '</div></div>';
       }
 
+      const noSettingsText = await window.api.settings
+        .get()
+        .then((s) => {
+          const locale = s.language || 'ko';
+          return locale === 'en'
+            ? 'No settings available.'
+            : '설정할 항목이 없습니다.';
+        })
+        .catch(() => '설정할 항목이 없습니다.');
+      htmlContent += `<div data-settings-empty="${modalScope}" style="${
+        normalizedSections.some((section) => section.renderVisible)
+          ? 'display:none'
+          : ''
+      }" class="text-fg-faint text-body text-center">${noSettingsText}</div>`;
+
       htmlContent += '</div>';
 
       const [saveText, cancelText] = await window.api.settings
@@ -492,7 +536,10 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
         (data: { pluginId: string; settings: Record<string, unknown> }) => {
           if (data.pluginId === pluginId) {
             const oldSettings = { ...currentSettings };
-            currentSettings = { ...defaultSettings, ...data.settings };
+            currentSettings = omitLayoutSettingValues(definition.settings, {
+              ...defaultSettings,
+              ...data.settings,
+            });
 
             // onChange 콜백 호출
             if (definition.onChange) {
@@ -530,7 +577,10 @@ export const createDefineSettings = (deps: DefineSettingsDependencies) => {
       },
       set: async (updates: Record<string, unknown>) => {
         const oldSettings = { ...currentSettings };
-        currentSettings = { ...currentSettings, ...updates };
+        currentSettings = omitLayoutSettingValues(definition.settings, {
+          ...currentSettings,
+          ...updates,
+        });
         await saveSettings();
 
         // onChange 콜백 호출
diff --git a/src/renderer/plugins/runtime/settingsSections.test.ts b/src/renderer/plugins/runtime/settingsSections.test.ts
new file mode 100644
index 00000000..25f06247
--- /dev/null
+++ b/src/renderer/plugins/runtime/settingsSections.test.ts
@@ -0,0 +1,327 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { PluginSettingSchema } from '@src/types/plugin/api';
+import {
+  coerceSettingValue,
+  getDefaultSettings,
+  normalizeSettingsSections,
+  omitLayoutSettingValues,
+  safeEvaluateVisibility,
+  type PluginValueSettingSchema,
+} from './settingsSections';
+
+const value = (label: string): PluginSettingSchema => ({
+  type: 'string',
+  default: '',
+  label,
+});
+
+describe('normalizeSettingsSections', () => {
+  it('section이 없으면 암시적 카드 하나를 만든다', () => {
+    const sections = normalizeSettingsSections({ name: value('Name') }, {});
+
+    expect(sections).toMatchObject([
+      { key: null, markerVisible: true, renderVisible: true },
+    ]);
+  });
+
+  it('선두, 연속, 말미의 빈 section을 만들지 않는다', () => {
+    const sections = normalizeSettingsSections(
+      {
+        first: { type: 'section', label: 'First' },
+        second: { type: 'section', label: 'Second' },
+        name: value('Name'),
+        trailing: { type: 'section', label: 'Trailing' },
+      },
+      {},
+    );
+
+    expect(sections.map(({ key }) => key)).toEqual(['second']);
+  });
+
+  it('숨긴 section의 경계를 유지하면서 그룹 전체를 숨긴다', () => {
+    const sections = normalizeSettingsSections(
+      {
+        before: value('Before'),
+        hidden: { type: 'section', visible: false },
+        middle: value('Middle'),
+        after: { type: 'section' },
+        end: value('End'),
+      },
+      {},
+    );
+
+    expect(
+      sections.map(({ key, renderVisible }) => ({ key, renderVisible })),
+    ).toEqual([
+      { key: null, renderVisible: true },
+      { key: 'hidden', renderVisible: false },
+      { key: 'after', renderVisible: true },
+    ]);
+  });
+
+  it('내부 값이 모두 숨겨지면 카드를 숨긴다', () => {
+    const sections = normalizeSettingsSections(
+      {
+        hiddenValues: { type: 'section', label: 'Hidden' },
+        name: { ...value('Name'), visible: false },
+      },
+      {},
+    );
+
+    expect(sections[0].renderVisible).toBe(false);
+    expect(sections[0].entries.every((entry) => !entry.renderVisible)).toBe(
+      true,
+    );
+  });
+
+  it('제거된 divider 타입은 미지원으로 제외되고 진단을 보고한다', () => {
+    const onError = vi.fn();
+    const schema = {
+      first: { type: 'string', default: '', label: 'First' },
+      legacyDivider: { type: 'divider' },
+      second: { type: 'string', default: '', label: 'Second' },
+    } as unknown as Record<string, PluginSettingSchema>;
+
+    const sections = normalizeSettingsSections(schema, {}, onError);
+
+    expect(sections[0].entries.map(({ key }) => key)).toEqual([
+      'first',
+      'second',
+    ]);
+    expect(onError).toHaveBeenCalledWith(
+      'legacyDivider',
+      expect.objectContaining({ message: 'Unsupported setting type: divider' }),
+      'unsupported-type',
+    );
+  });
+
+  it('visibility 예외를 fail-closed 처리한다', () => {
+    const onError = vi.fn();
+    const sections = normalizeSettingsSections(
+      {
+        broken: {
+          ...value('Broken'),
+          visible: () => {
+            throw new Error('boom');
+          },
+        },
+      },
+      {},
+      onError,
+    );
+
+    expect(sections[0].renderVisible).toBe(false);
+    expect(onError).toHaveBeenCalledWith(
+      'broken',
+      expect.any(Error),
+      'visibility',
+    );
+  });
+
+  it('section visibility 예외 시 그룹 경계를 유지하고 그룹을 숨긴다', () => {
+    const onError = vi.fn();
+    const sections = normalizeSettingsSections(
+      {
+        brokenSection: {
+          type: 'section',
+          label: 'Broken',
+          visible: () => {
+            throw new Error('boom');
+          },
+        },
+        value: value('Value'),
+      },
+      {},
+      onError,
+    );
+
+    expect(sections).toMatchObject([
+      { key: 'brokenSection', markerVisible: false, renderVisible: false },
+    ]);
+    expect(onError).toHaveBeenCalledWith(
+      'brokenSection',
+      expect.any(Error),
+      'visibility',
+    );
+  });
+
+  it('미지원 타입만 있으면 렌더 가능한 section을 만들지 않는다', () => {
+    const onError = vi.fn();
+    const schema = {
+      unsupported: { type: 'range', default: 1, label: 'Range' },
+    } as unknown as Record<string, PluginSettingSchema>;
+
+    expect(normalizeSettingsSections(schema, {}, onError)).toEqual([]);
+    expect(onError).toHaveBeenCalledWith(
+      'unsupported',
+      expect.objectContaining({ message: 'Unsupported setting type: range' }),
+      'unsupported-type',
+    );
+  });
+
+  it('section label을 정규화 결과에 보존한다', () => {
+    const sections = normalizeSettingsSections(
+      {
+        appearance: { type: 'section', label: 'Appearance' },
+        first: value('First'),
+        second: value('Second'),
+      },
+      {},
+    );
+
+    expect(sections[0].label).toBe('Appearance');
+    expect(sections[0].entries.map(({ key }) => key)).toEqual([
+      'first',
+      'second',
+    ]);
+  });
+});
+
+describe('getDefaultSettings', () => {
+  it('value setting만 반환하고 section과 레거시 divider는 제외한다', () => {
+    const schema = {
+      section: { type: 'section', label: 'Group' },
+      enabled: { type: 'boolean', default: true, label: 'Enabled' },
+      legacyDivider: { type: 'divider', label: 'More' },
+      count: { type: 'number', default: 3, label: 'Count' },
+    } as unknown as Record<string, PluginSettingSchema>;
+
+    expect(getDefaultSettings(schema)).toEqual({ enabled: true, count: 3 });
+  });
+});
+
+describe('omitLayoutSettingValues', () => {
+  it('저장값에서 section과 레거시 divider 키를 제거한다', () => {
+    const schema = {
+      section: { type: 'section' },
+      value: { type: 'number', default: 1, label: 'Value' },
+      legacyDivider: { type: 'divider' },
+    } as unknown as Record<string, PluginSettingSchema>;
+
+    expect(
+      omitLayoutSettingValues(schema, {
+        section: 'legacy',
+        value: 2,
+        legacyDivider: true,
+        external: 'kept',
+      }),
+    ).toEqual({ value: 2, external: 'kept' });
+  });
+});
+
+describe('coerceSettingValue', () => {
+  const numberSchema: PluginValueSettingSchema = {
+    type: 'number',
+    default: 5,
+    label: 'Count',
+    min: 0,
+    max: 100,
+  };
+
+  it('number 문자열을 숫자로 복원하고 명시된 min/max로 클램프한다', () => {
+    expect(coerceSettingValue(numberSchema, '42')).toBe(42);
+    expect(coerceSettingValue(numberSchema, '-5')).toBe(0);
+    expect(coerceSettingValue(numberSchema, '150')).toBe(100);
+    expect(coerceSettingValue(numberSchema, 7)).toBe(7);
+  });
+
+  it('복원 불가한 number 입력은 null을 반환한다 (커밋 스킵)', () => {
+    expect(coerceSettingValue(numberSchema, '')).toBeNull();
+    expect(coerceSettingValue(numberSchema, '  ')).toBeNull();
+    expect(coerceSettingValue(numberSchema, '12abc')).toBeNull();
+    expect(coerceSettingValue(numberSchema, 'Infinity')).toBeNull();
+  });
+
+  it('min/max 미지정 number는 클램프하지 않는다', () => {
+    const unbounded: PluginValueSettingSchema = {
+      type: 'number',
+      default: 0,
+      label: 'Free',
+    };
+    expect(coerceSettingValue(unbounded, '-9999')).toBe(-9999);
+  });
+
+  it('select 문자열을 원본 옵션 타입으로 역매핑한다', () => {
+    const select: PluginValueSettingSchema = {
+      type: 'select',
+      default: 3,
+      label: 'Mode',
+      options: [
+        { label: 'Three', value: 3 },
+        { label: 'On', value: true },
+        { label: 'Raw', value: 'raw' },
+      ],
+    };
+
+    expect(coerceSettingValue(select, '3')).toBe(3);
+    expect(coerceSettingValue(select, 'true')).toBe(true);
+    expect(coerceSettingValue(select, 'raw')).toBe('raw');
+    // 매칭 없으면 raw 그대로 — 패널 optionMap.get(...) ?? nextValue와 동일
+    expect(coerceSettingValue(select, 'unknown')).toBe('unknown');
+  });
+
+  it('select 문자열 표현이 겹치면 마지막 옵션을 선택한다 (패널 Map 규칙)', () => {
+    const select: PluginValueSettingSchema = {
+      type: 'select',
+      default: 'true',
+      label: 'Dup',
+      options: [
+        { label: 'Bool', value: true },
+        { label: 'String', value: 'true' },
+      ],
+    };
+
+    expect(coerceSettingValue(select, 'true')).toBe('true');
+  });
+
+  it('boolean/color/string은 그대로 통과시킨다', () => {
+    expect(
+      coerceSettingValue(
+        { type: 'boolean', default: false, label: 'On' },
+        true,
+      ),
+    ).toBe(true);
+    expect(
+      coerceSettingValue(
+        { type: 'color', default: '#fff', label: 'Tint' },
+        '#8B5CF6',
+      ),
+    ).toBe('#8B5CF6');
+    expect(
+      coerceSettingValue(
+        { type: 'string', default: '', label: 'Name' },
+        'hello',
+      ),
+    ).toBe('hello');
+  });
+});
+
+describe('safeEvaluateVisibility', () => {
+  it('예외를 로깅하고 false를 반환한다', () => {
+    const onError = vi.fn();
+
+    expect(
+      safeEvaluateVisibility(
+        () => {
+          throw new Error('boom');
+        },
+        {},
+        onError,
+      ),
+    ).toBe(false);
+    expect(onError).toHaveBeenCalledOnce();
+  });
+
+  it.each([
+    { visible: 1, expected: true },
+    { visible: '', expected: false },
+    { visible: 'false', expected: true },
+  ])(
+    'visible=$visible 값을 JS truthiness로 변환한다',
+    ({ visible, expected }) => {
+      expect(safeEvaluateVisibility(visible as unknown as boolean, {})).toBe(
+        expected,
+      );
+    },
+  );
+});
diff --git a/src/renderer/plugins/runtime/settingsSections.ts b/src/renderer/plugins/runtime/settingsSections.ts
new file mode 100644
index 00000000..3f449694
--- /dev/null
+++ b/src/renderer/plugins/runtime/settingsSections.ts
@@ -0,0 +1,198 @@
+import type {
+  PluginSettingSchema,
+  PluginSettingValue,
+  PluginValueSettingType,
+} from '@src/types/plugin/api';
+
+export const VALUE_SETTING_TYPES = new Set<PluginValueSettingType>([
+  'boolean',
+  'color',
+  'number',
+  'string',
+  'select',
+]);
+
+export type PluginValueSettingSchema = Extract<
+  PluginSettingSchema,
+  { type: PluginValueSettingType }
+>;
+
+export interface NormalizedSettingEntry {
+  key: string;
+  schema: PluginValueSettingSchema;
+  renderVisible: boolean;
+}
+
+export interface NormalizedSection {
+  key: string | null;
+  label?: string;
+  markerVisible: boolean;
+  renderVisible: boolean;
+  entries: NormalizedSettingEntry[];
+}
+
+export type SettingsNormalizationErrorKind = 'visibility' | 'unsupported-type';
+export type SettingsNormalizationErrorHandler = (
+  key: string,
+  error: unknown,
+  kind: SettingsNormalizationErrorKind,
+) => void;
+
+export const isValueSetting = (
+  schema: PluginSettingSchema,
+): schema is PluginValueSettingSchema =>
+  VALUE_SETTING_TYPES.has(schema.type as PluginValueSettingType);
+
+export const safeEvaluateVisibility = (
+  visible:
+    | boolean
+    | ((settings: Record<string, unknown>) => boolean)
+    | undefined,
+  values: Record<string, unknown>,
+  onError?: (error: unknown) => void,
+): boolean => {
+  if (visible === undefined) return true;
+  if (typeof visible !== 'function') return Boolean(visible);
+
+  try {
+    return Boolean(visible(values));
+  } catch (error) {
+    onError?.(error);
+    return false;
+  }
+};
+
+// 모달 DOM 콜백의 문자열 값을 스키마 타입으로 복원 — 패널 경로와 동일 의미
+// (패널: NumberInput은 number, select는 optionMap으로 원본 타입 보존)
+// 복원 불가한 number 입력은 null 반환 → 커밋 스킵 (패널도 무효 입력은 onChange 미호출)
+export const coerceSettingValue = (
+  schema: PluginValueSettingSchema,
+  raw: unknown,
+): PluginSettingValue | null => {
+  if (schema.type === 'number') {
+    const parsed =
+      typeof raw === 'number'
+        ? raw
+        : typeof raw === 'string' && raw.trim() !== ''
+        ? Number(raw)
+        : Number.NaN;
+    if (!Number.isFinite(parsed)) return null;
+
+    // 스키마에 명시된 범위만 클램프 (Enter 등 blur를 거치지 않는 change 대비)
+    let value = parsed;
+    if (schema.min !== undefined && value < schema.min) value = schema.min;
+    if (schema.max !== undefined && value > schema.max) value = schema.max;
+    return value;
+  }
+
+  if (schema.type === 'select') {
+    // 문자열 표현이 겹치면 마지막 옵션 — 패널 optionMap(Map 덮어쓰기) 규칙과 동일
+    const matched = (schema.options ?? [])
+      .filter((option) => String(option.value) === String(raw))
+      .pop();
+    return matched ? matched.value : (raw as PluginSettingValue);
+  }
+
+  return raw as PluginSettingValue;
+};
+
+export const getDefaultSettings = (
+  schema: Record<string, PluginSettingSchema> | undefined,
+): Record<string, PluginSettingValue> => {
+  if (!schema) return {};
+
+  const defaults: Record<string, PluginSettingValue> = {};
+  for (const [key, setting] of Object.entries(schema)) {
+    if (isValueSetting(setting)) defaults[key] = setting.default;
+  }
+  return defaults;
+};
+
+export const omitLayoutSettingValues = (
+  schema: Record<string, PluginSettingSchema> | undefined,
+  values: Record<string, unknown>,
+): Record<string, unknown> =>
+  Object.fromEntries(
+    Object.entries(values).filter(([key]) => {
+      const setting = schema?.[key];
+      return setting === undefined || isValueSetting(setting);
+    }),
+  );
+
+// 렌더 가능한 값 설정이 하나라도 있는가 — 빈 상태/중앙 정렬 판정용
+// empty-state로 단락되면 폼 렌더가 실행되지 않으므로, 진단 누락을 막으려면
+// 호출부가 폼 렌더와 같은 리포터를 전달해야 함 (중복은 리포터가 dedup)
+export const hasRenderableSettings = (
+  schema: Record<string, PluginSettingSchema> | undefined,
+  values: Record<string, unknown>,
+  onNormalizationError?: SettingsNormalizationErrorHandler,
+): boolean =>
+  normalizeSettingsSections(schema, values, onNormalizationError).some(
+    (section) => section.renderVisible,
+  );
+
+export const normalizeSettingsSections = (
+  schema: Record<string, PluginSettingSchema> | undefined,
+  values: Record<string, unknown>,
+  onNormalizationError?: SettingsNormalizationErrorHandler,
+): NormalizedSection[] => {
+  if (!schema) return [];
+
+  const sections: NormalizedSection[] = [];
+  let currentSection: NormalizedSection = {
+    key: null,
+    markerVisible: true,
+    renderVisible: false,
+    entries: [],
+  };
+
+  const pushCurrentSection = () => {
+    if (currentSection.entries.length > 0) sections.push(currentSection);
+  };
+
+  for (const [key, setting] of Object.entries(schema)) {
+    const settingType = (setting as { type?: unknown }).type;
+    if (setting.type === 'section') {
+      pushCurrentSection();
+      currentSection = {
+        key,
+        label: setting.label,
+        markerVisible: safeEvaluateVisibility(
+          setting.visible,
+          values,
+          (error) => onNormalizationError?.(key, error, 'visibility'),
+        ),
+        renderVisible: false,
+        entries: [],
+      };
+      continue;
+    }
+
+    // 미지원 타입(제거된 divider 포함)은 fail-closed로 제외 + 1회 진단
+    if (!isValueSetting(setting)) {
+      onNormalizationError?.(
+        key,
+        new Error(`Unsupported setting type: ${String(settingType)}`),
+        'unsupported-type',
+      );
+      continue;
+    }
+
+    const renderVisible = safeEvaluateVisibility(
+      setting.visible,
+      values,
+      (error) => onNormalizationError?.(key, error, 'visibility'),
+    );
+    currentSection.entries.push({ key, schema: setting, renderVisible });
+    if (renderVisible) currentSection.renderVisible = true;
+  }
+  pushCurrentSection();
+
+  for (const section of sections) {
+    section.renderVisible =
+      section.markerVisible &&
+      section.entries.some((entry) => entry.renderVisible);
+  }
+
+  return sections;
+};
diff --git a/src/types/plugin/api.ts b/src/types/plugin/api.ts
index 2e485599..46e038de 100644
--- a/src/types/plugin/api.ts
+++ b/src/types/plugin/api.ts
@@ -429,22 +429,29 @@ export interface PluginDefinitionContextMenuItem {
   position?: 'top' | 'bottom';
 }
 
-export type PluginSettingType =
+export type PluginValueSettingType =
   | 'boolean'
   | 'color'
   | 'number'
   | 'string'
-  | 'select'
-  | 'divider';
+  | 'select';
+
+// divider 타입은 section 도입과 함께 제거 — 기존 플러그인의 divider는
+// 정규화에서 미지원 타입으로 조용히 제외됨 (fail-closed)
+export type PluginLayoutSettingType = 'section';
+
+export type PluginSettingType =
+  | PluginValueSettingType
+  | PluginLayoutSettingType;
 
 export type PluginSettingSchema =
   | {
-      type: 'divider';
+      type: 'section';
       label?: string;
       visible?: boolean | ((settings: Record<string, unknown>) => boolean);
     }
   | {
-      type: Exclude<PluginSettingType, 'divider'>;
+      type: PluginValueSettingType;
       default: string | number | boolean;
       label: string;
       min?: number; // for number

From 50b9a23e7f60b35de34de76d901e8a41cb27ebf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:19:03 +0900
Subject: [PATCH 13/17] =?UTF-8?q?feat:=20=EC=9A=94=EC=86=8C=20=EC=BB=A8?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=A9=94=EB=89=B4=20=EA=B3=84?=
 =?UTF-8?q?=EC=95=BD=20=EC=9D=B4=ED=96=89=20=EB=B0=8F=20=EC=98=A4=EB=B2=84?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=20=EC=83=81=ED=83=9C=20=EB=AF=B8=EB=9F=AC?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- contextMenu.items의 visible/disabled/position을 실제 평가 — top은 기본 항목 위,
  미지정·bottom은 아래 (grid/key 메뉴와 동일 의미), 원본 index 보존
- predicate 예외는 fail-closed(숨김/비활성)로 격리하고 요소·항목당 1회 기록,
  메뉴가 열릴 때만 평가해 렌더 경로 보호
- contextMenuStateKeys 신설: 선언한 오버레이 상태 키만 메인으로 미러링해 메뉴
  predicate의 element.state에 병합 — 동기 shadow diff로 변경분만 송신, 별도
  런타임 맵 저장으로 히스토리·프리셋·프리뷰 불변, OBS 재연결 시 재송신
- 수신은 App 레벨 상시 responder가 담당해 설정 화면(Grid 언마운트) 중에도 유실 없음
- 체크박스 토글에 label 기본 동작 차단 추가 — 단일 정확 커밋 보장
---
 .../components/shared/PluginElement.tsx       | 186 +++++++++++++-----
 .../shared/PluginElementsRenderer.tsx         |   3 +
 .../app/usePluginDisplayElementsResponder.ts  |  44 +++++
 .../plugin/pluginElementContextMenu.test.ts   | 110 +++++++++++
 .../utils/plugin/pluginElementContextMenu.ts  |  63 ++++++
 .../plugin/pluginMenuRuntimeState.test.ts     |  80 ++++++++
 .../utils/plugin/pluginMenuRuntimeState.ts    |  59 ++++++
 src/types/plugin/api.ts                       |   7 +
 8 files changed, 506 insertions(+), 46 deletions(-)
 create mode 100644 src/renderer/utils/plugin/pluginElementContextMenu.test.ts
 create mode 100644 src/renderer/utils/plugin/pluginElementContextMenu.ts
 create mode 100644 src/renderer/utils/plugin/pluginMenuRuntimeState.test.ts
 create mode 100644 src/renderer/utils/plugin/pluginMenuRuntimeState.ts

diff --git a/src/renderer/components/shared/PluginElement.tsx b/src/renderer/components/shared/PluginElement.tsx
index 9d4f74ca..f8719d25 100644
--- a/src/renderer/components/shared/PluginElement.tsx
+++ b/src/renderer/components/shared/PluginElement.tsx
@@ -35,6 +35,12 @@ import {
   clearExposedActions,
 } from '@utils/displayElementActions';
 import { setupPluginDropdownInteractions } from '@utils/plugin/pluginDropdownManager';
+import { obsApi } from '@api/modules/obsApi';
+import { evaluatePluginMenuItems } from '@utils/plugin/pluginElementContextMenu';
+import {
+  getPluginMenuRuntimeState,
+  normalizeStateKeys,
+} from '@utils/plugin/pluginMenuRuntimeState';
 
 const DEFAULT_POSITION_OFFSET = { x: 0, y: 0 };
 const EMPTY_SELECTED_ELEMENTS: SelectedElement[] = [];
@@ -214,6 +220,8 @@ export const PluginElement: React.FC<PluginElementProps> = ({
   const exposedActionsRef = useRef<
     Record<string, (...args: unknown[]) => unknown>
   >({});
+  // 컨텍스트 메뉴 predicate 예외는 요소·항목당 1회만 기록
+  const menuPredicateErrorRef = useRef(new Set<string>());
 
   // Settings 변경 감지용 ref와 콜백 리스트
   const prevSettingsRef = useRef<Record<string, unknown> | null>(null);
@@ -976,6 +984,8 @@ export const PluginElement: React.FC<PluginElementProps> = ({
         const targetEl = e.target as HTMLElement;
         const checkbox = targetEl.closest('[data-checkbox-toggle]');
         if (checkbox) {
+          // label 기본 동작(input으로의 합성 클릭 재토글) 차단 — 수동 토글만 커밋
+          e.preventDefault();
           const input = checkbox.querySelector(
             'input[type=checkbox]',
           ) as HTMLInputElement;
@@ -984,17 +994,17 @@ export const PluginElement: React.FC<PluginElementProps> = ({
           if (input) {
             input.checked = !input.checked;
 
-            // 스타일 토글
+            // 스타일 토글 — createCheckbox의 액센트 토큰과 동기
             if (input.checked) {
-              checkbox.classList.remove('bg-[#3B4049]');
-              checkbox.classList.add('bg-[#493C1D]');
-              knob.classList.remove('left-[2px]', 'bg-[#989BA6]');
-              knob.classList.add('left-[13px]', 'bg-[#FFB400]');
+              checkbox.classList.remove('bg-line-strong');
+              checkbox.classList.add('bg-accent');
+              knob.classList.remove('left-[2px]');
+              knob.classList.add('left-[14px]');
             } else {
-              checkbox.classList.remove('bg-[#493C1D]');
-              checkbox.classList.add('bg-[#3B4049]');
-              knob.classList.remove('left-[13px]', 'bg-[#FFB400]');
-              knob.classList.add('left-[2px]', 'bg-[#989BA6]');
+              checkbox.classList.remove('bg-accent');
+              checkbox.classList.add('bg-line-strong');
+              knob.classList.remove('left-[14px]');
+              knob.classList.add('left-[2px]');
             }
 
             // change 이벤트 발생
@@ -1091,8 +1101,60 @@ export const PluginElement: React.FC<PluginElementProps> = ({
 
     const cleanups: (() => void)[] = [];
 
+    // 메뉴 predicate용 선언 키(contextMenuStateKeys) 동기화 —
+    // 스토어는 rAF 배치라 동기 shadow에서 diff를 계산해 변경분만 송신
+    const menuStateKeys = normalizeStateKeys(definition.contextMenuStateKeys);
+    const latestState: Record<string, unknown> = {
+      ...(usePluginDisplayElementStore
+        .getState()
+        .elements.find((el) => el.fullId === element.fullId)?.state ?? {}),
+    };
+    const lastSentMenuState: Record<string, unknown> = {};
+    const sendMenuStateSync = () => {
+      if (menuStateKeys.length === 0) return;
+      const changed: Record<string, unknown> = {};
+      for (const key of menuStateKeys) {
+        if (!Object.prototype.hasOwnProperty.call(latestState, key)) continue;
+        const value = latestState[key];
+        if (
+          Object.prototype.hasOwnProperty.call(lastSentMenuState, key) &&
+          Object.is(lastSentMenuState[key], value)
+        ) {
+          continue;
+        }
+        changed[key] = value;
+        lastSentMenuState[key] = value;
+      }
+      if (Object.keys(changed).length === 0) return;
+      try {
+        void Promise.resolve(
+          window.api?.bridge?.sendTo(
+            'main',
+            'plugin:displayElement:syncMenuState',
+            { fullId: element.fullId, state: changed },
+          ),
+        ).catch((error) => {
+          console.error('[PluginElement] Failed to sync menu state:', error);
+        });
+      } catch (error) {
+        console.error('[PluginElement] Failed to sync menu state:', error);
+      }
+    };
+
+    // OBS WS 재연결 시 단절 중 유실됐을 수 있는 제어 상태 재송신
+    if (menuStateKeys.length > 0) {
+      const unsubMenuStateResync = obsApi.onResync(() => {
+        Object.keys(lastSentMenuState).forEach((key) => {
+          delete lastSentMenuState[key];
+        });
+        sendMenuStateSync();
+      });
+      cleanups.push(unsubMenuStateResync);
+    }
+
     const context = {
       setState: (updates: Record<string, unknown>) => {
+        Object.assign(latestState, updates);
         // rAF 기반 배치 업데이트 사용 (성능 최적화)
         const currentElement = usePluginDisplayElementStore
           .getState()
@@ -1102,6 +1164,7 @@ export const PluginElement: React.FC<PluginElementProps> = ({
             state: { ...currentElement.state, ...updates },
           });
         }
+        sendMenuStateSync();
       },
       getSettings: () => {
         const currentElement = usePluginDisplayElementStore
@@ -1206,6 +1269,9 @@ export const PluginElement: React.FC<PluginElementProps> = ({
       cleanups.push(mountCleanup);
     }
 
+    // 동기 onMount 완료 후 초기 1회 송신 — 이미 setState로 보낸 키는 dedup됨
+    sendMenuStateSync();
+
     return () => {
       clearExposedActions(element.fullId);
       exposedActionsRef.current = {};
@@ -1312,6 +1378,9 @@ export const PluginElement: React.FC<PluginElementProps> = ({
     // 우클릭은 컨텍스트 메뉴용이므로 제외
     if (e.button !== 0) return;
 
+    // macOS ctrl+클릭은 우클릭 제스처 — Chromium이 contextmenu 뒤에 click도 발화
+    if (isMac() && e.ctrlKey) return;
+
     if (windowType === 'main' && activeTool === 'eraser') {
       e.stopPropagation();
       deletePluginElement();
@@ -1473,43 +1542,6 @@ export const PluginElement: React.FC<PluginElementProps> = ({
     }
   };
 
-  // 컨텍스트 메뉴 항목 생성
-  const contextMenuItems: ListItem[] = (() => {
-    if (!element.contextMenu) return [];
-
-    const {
-      enableDelete = true,
-      deleteLabel = '삭제',
-      customItems = [],
-    } = element.contextMenu;
-    const items: ListItem[] = [];
-
-    if (enableDelete) {
-      items.push({
-        id: 'delete',
-        label: pluginTranslate(deleteLabel, undefined, deleteLabel),
-      });
-    }
-
-    // 커스텀 항목 추가
-    customItems.forEach((item, index) => {
-      items.push({
-        id: `custom-${index}`,
-        label: pluginTranslate(item.label, undefined, item.label),
-      });
-    });
-
-    // z-order 항목 추가
-    items.push(
-      { id: 'bringToFront', label: t('contextMenu.bringToFront') },
-      // { id: "bringForward", label: t("contextMenu.bringForward") },
-      // { id: "sendBackward", label: t("contextMenu.sendBackward") },
-      { id: 'sendToBack', label: t('contextMenu.sendToBack') },
-    );
-
-    return items;
-  })();
-
   const createActionsProxy = (elementId: string) =>
     new Proxy(
       {},
@@ -1538,6 +1570,68 @@ export const PluginElement: React.FC<PluginElementProps> = ({
       },
     );
 
+  // 컨텍스트 메뉴 항목 생성 — 열려 있을 때만 커스텀 predicate 평가
+  const contextMenuItems: ListItem[] = (() => {
+    if (!contextMenuOpen || !element.contextMenu) return [];
+
+    const {
+      enableDelete = true,
+      deleteLabel = '삭제',
+      customItems = [],
+    } = element.contextMenu;
+
+    // predicate가 보는 element.state에는 contextMenuStateKeys로 선언된
+    // 오버레이 런타임 값만 병합 — 프리뷰용 state 자체는 불변
+    const menuStateKeys = normalizeStateKeys(definition?.contextMenuStateKeys);
+    const menuElement =
+      menuStateKeys.length > 0
+        ? {
+            ...element,
+            state: {
+              ...element.state,
+              ...getPluginMenuRuntimeState(element.fullId, menuStateKeys),
+            },
+          }
+        : element;
+
+    // visible/disabled/position 계약 이행 (grid/key 메뉴와 동일 의미)
+    const { top, bottom } = evaluatePluginMenuItems(
+      customItems,
+      { element: menuElement, actions: createActionsProxy(element.fullId) },
+      (label) => pluginTranslate(label, undefined, label),
+      (index, kind, error) => {
+        const errorKey = `${element.fullId}:${index}:${kind}`;
+        if (menuPredicateErrorRef.current.has(errorKey)) return;
+        menuPredicateErrorRef.current.add(errorKey);
+        console.error(
+          `[Plugin ${element.pluginId}] Failed to evaluate context menu "${kind}" for item ${index}:`,
+          error,
+        );
+      },
+    );
+
+    const items: ListItem[] = [...top];
+
+    if (enableDelete) {
+      items.push({
+        id: 'delete',
+        label: pluginTranslate(deleteLabel, undefined, deleteLabel),
+      });
+    }
+
+    // z-order 항목 추가
+    items.push(
+      { id: 'bringToFront', label: t('contextMenu.bringToFront') },
+      // { id: "bringForward", label: t("contextMenu.bringForward") },
+      // { id: "sendBackward", label: t("contextMenu.sendBackward") },
+      { id: 'sendToBack', label: t('contextMenu.sendToBack') },
+    );
+
+    items.push(...bottom);
+
+    return items;
+  })();
+
   // 컨텍스트 메뉴 항목 선택
   const handleContextMenuSelect = (itemId: string) => {
     if (itemId === 'delete') {
diff --git a/src/renderer/components/shared/PluginElementsRenderer.tsx b/src/renderer/components/shared/PluginElementsRenderer.tsx
index 68b5897a..d3f1d6a0 100644
--- a/src/renderer/components/shared/PluginElementsRenderer.tsx
+++ b/src/renderer/components/shared/PluginElementsRenderer.tsx
@@ -185,6 +185,9 @@ export const PluginElementsRenderer: React.FC<PluginElementsRendererProps> = ({
     };
   }, [windowType, updateElement]);
 
+  // 메뉴 predicate용 상태 동기화(contextMenuStateKeys) 수신은
+  // usePluginDisplayElementsResponder가 담당 — Grid 언마운트 중에도 유실 방지
+
   return (
     <>
       {filteredElements.map((element, index) => (
diff --git a/src/renderer/hooks/app/usePluginDisplayElementsResponder.ts b/src/renderer/hooks/app/usePluginDisplayElementsResponder.ts
index 643dc31b..7c21cf18 100644
--- a/src/renderer/hooks/app/usePluginDisplayElementsResponder.ts
+++ b/src/renderer/hooks/app/usePluginDisplayElementsResponder.ts
@@ -1,5 +1,10 @@
 import { useEffect } from 'react';
 import { usePluginDisplayElementStore } from '@stores/plugin/usePluginDisplayElementStore';
+import {
+  clearPluginMenuRuntimeState,
+  normalizeStateKeys,
+  setPluginMenuRuntimeState,
+} from '@utils/plugin/pluginMenuRuntimeState';
 
 // 다중 OBS 클라이언트 동시 재연결 시 요청 버스트를 응답 1회로 코얼레싱
 const RESPOND_DEBOUNCE_MS = 100;
@@ -31,4 +36,43 @@ export function usePluginDisplayElementsResponder() {
       unsubscribe();
     };
   }, []);
+
+  // 오버레이의 메뉴 predicate용 상태 동기화 수신 (contextMenuStateKeys)
+  // Grid와 함께 언마운트되는 렌더러가 아닌 여기서 상시 수신 —
+  // 설정 화면에 있는 동안의 상태 변경도 유실되지 않음
+  useEffect(() => {
+    const unsubscribe = window.api.bridge.on<{
+      fullId: string;
+      state: Record<string, unknown>;
+    }>('plugin:displayElement:syncMenuState', (data) => {
+      if (!data?.fullId || !data.state || typeof data.state !== 'object') {
+        return;
+      }
+      // payload를 신뢰하지 않고 현재 정의의 허용 키와 재교집합
+      const { elements, definitions } = usePluginDisplayElementStore.getState();
+      const target = elements.find((el) => el.fullId === data.fullId);
+      const definition = target?.definitionId
+        ? definitions.get(target.definitionId)
+        : undefined;
+      const allowedKeys = normalizeStateKeys(definition?.contextMenuStateKeys);
+      setPluginMenuRuntimeState(data.fullId, data.state, allowedKeys);
+    });
+
+    // 요소가 제거되면 메뉴 런타임 상태도 정리
+    let knownIds = new Set(
+      usePluginDisplayElementStore.getState().elements.map((el) => el.fullId),
+    );
+    const unsubscribeStore = usePluginDisplayElementStore.subscribe((state) => {
+      const currentIds = new Set(state.elements.map((el) => el.fullId));
+      knownIds.forEach((fullId) => {
+        if (!currentIds.has(fullId)) clearPluginMenuRuntimeState(fullId);
+      });
+      knownIds = currentIds;
+    });
+
+    return () => {
+      unsubscribe();
+      unsubscribeStore();
+    };
+  }, []);
 }
diff --git a/src/renderer/utils/plugin/pluginElementContextMenu.test.ts b/src/renderer/utils/plugin/pluginElementContextMenu.test.ts
new file mode 100644
index 00000000..fe8fb1cc
--- /dev/null
+++ b/src/renderer/utils/plugin/pluginElementContextMenu.test.ts
@@ -0,0 +1,110 @@
+import { describe, expect, it, vi } from 'vitest';
+import type { PluginMenuItem } from '@src/types/plugin/api';
+import { evaluatePluginMenuItems } from './pluginElementContextMenu';
+
+type Ctx = { flag: boolean };
+
+const item = (
+  label: string,
+  overrides: Partial<PluginMenuItem<Ctx>> = {},
+): PluginMenuItem<Ctx> => ({
+  id: label,
+  label,
+  onClick: () => {},
+  ...overrides,
+});
+
+const identity = (label: string) => label;
+
+describe('evaluatePluginMenuItems', () => {
+  it('position=top은 top, 미지정과 bottom은 bottom으로 분류하고 상대 순서를 보존한다', () => {
+    const { top, bottom } = evaluatePluginMenuItems(
+      [
+        item('a', { position: 'top' }),
+        item('b'),
+        item('c', { position: 'bottom' }),
+        item('d', { position: 'top' }),
+      ],
+      { flag: true },
+      identity,
+    );
+
+    expect(top.map(({ label }) => label)).toEqual(['a', 'd']);
+    expect(bottom.map(({ label }) => label)).toEqual(['b', 'c']);
+  });
+
+  it('visible 필터 후에도 원본 index 기반 id를 유지한다', () => {
+    const { bottom } = evaluatePluginMenuItems(
+      [item('hidden', { visible: false }), item('shown')],
+      { flag: true },
+      identity,
+    );
+
+    expect(bottom).toEqual([
+      { id: 'custom-1', label: 'shown', disabled: false },
+    ]);
+  });
+
+  it('boolean·함수 visible과 disabled를 컨텍스트로 평가한다', () => {
+    const { bottom } = evaluatePluginMenuItems(
+      [
+        item('byFlag', { visible: (ctx) => ctx.flag }),
+        item('hiddenByFlag', { visible: (ctx) => !ctx.flag }),
+        item('disabledByFlag', { disabled: (ctx) => ctx.flag }),
+        item('staticDisabled', { disabled: true }),
+      ],
+      { flag: true },
+      identity,
+    );
+
+    expect(bottom.map(({ label, disabled }) => ({ label, disabled }))).toEqual([
+      { label: 'byFlag', disabled: false },
+      { label: 'disabledByFlag', disabled: true },
+      { label: 'staticDisabled', disabled: true },
+    ]);
+  });
+
+  it('predicate 예외를 fail-closed 처리하고 보고한다', () => {
+    const onError = vi.fn();
+    const { bottom } = evaluatePluginMenuItems(
+      [
+        item('brokenVisible', {
+          visible: () => {
+            throw new Error('visible boom');
+          },
+        }),
+        item('brokenDisabled', {
+          disabled: () => {
+            throw new Error('disabled boom');
+          },
+        }),
+      ],
+      { flag: true },
+      identity,
+      onError,
+    );
+
+    // visible 예외 → 항목 숨김, disabled 예외 → 클릭 불가
+    expect(bottom).toEqual([
+      { id: 'custom-1', label: 'brokenDisabled', disabled: true },
+    ]);
+    expect(onError).toHaveBeenCalledWith(0, 'visible', expect.any(Error));
+    expect(onError).toHaveBeenCalledWith(1, 'disabled', expect.any(Error));
+  });
+
+  it('label을 번역 함수로 변환한다', () => {
+    const { bottom } = evaluatePluginMenuItems(
+      [item('menu.clear')],
+      { flag: true },
+      (label) => `translated:${label}`,
+    );
+
+    expect(bottom[0].label).toBe('translated:menu.clear');
+  });
+
+  it('items가 undefined면 빈 결과를 반환한다', () => {
+    expect(
+      evaluatePluginMenuItems(undefined, { flag: true }, identity),
+    ).toEqual({ top: [], bottom: [] });
+  });
+});
diff --git a/src/renderer/utils/plugin/pluginElementContextMenu.ts b/src/renderer/utils/plugin/pluginElementContextMenu.ts
new file mode 100644
index 00000000..4550e668
--- /dev/null
+++ b/src/renderer/utils/plugin/pluginElementContextMenu.ts
@@ -0,0 +1,63 @@
+import type { PluginMenuItem } from '@src/types/plugin/api';
+
+export interface EvaluatedPluginMenuItem {
+  id: string;
+  label: string;
+  disabled: boolean;
+}
+
+export type PluginMenuPredicateErrorHandler = (
+  index: number,
+  kind: 'visible' | 'disabled',
+  error: unknown,
+) => void;
+
+// 요소 컨텍스트 메뉴의 visible/disabled/position 계약 이행 —
+// grid/key 메뉴(useGridContextMenu)와 동일 의미, 단 렌더 경로에서 평가되므로
+// predicate 예외는 fail-closed로 격리 (visible 예외→숨김, disabled 예외→클릭 불가)
+export const evaluatePluginMenuItems = <TContext>(
+  items: PluginMenuItem<TContext>[] | undefined,
+  context: TContext,
+  translateLabel: (label: string) => string,
+  onPredicateError?: PluginMenuPredicateErrorHandler,
+): { top: EvaluatedPluginMenuItem[]; bottom: EvaluatedPluginMenuItem[] } => {
+  const top: EvaluatedPluginMenuItem[] = [];
+  const bottom: EvaluatedPluginMenuItem[] = [];
+
+  (items ?? []).forEach((item, index) => {
+    let visible = true;
+    if (typeof item.visible === 'function') {
+      try {
+        visible = Boolean(item.visible(context));
+      } catch (error) {
+        onPredicateError?.(index, 'visible', error);
+        visible = false;
+      }
+    } else if (item.visible !== undefined) {
+      visible = item.visible;
+    }
+    if (!visible) return;
+
+    let disabled = false;
+    if (typeof item.disabled === 'function') {
+      try {
+        disabled = Boolean(item.disabled(context));
+      } catch (error) {
+        onPredicateError?.(index, 'disabled', error);
+        disabled = true;
+      }
+    } else if (item.disabled !== undefined) {
+      disabled = item.disabled;
+    }
+
+    // 원본 index 유지 — 클릭 핸들러가 customItems[index]로 역참조
+    const evaluated: EvaluatedPluginMenuItem = {
+      id: `custom-${index}`,
+      label: translateLabel(item.label),
+      disabled,
+    };
+    (item.position === 'top' ? top : bottom).push(evaluated);
+  });
+
+  return { top, bottom };
+};
diff --git a/src/renderer/utils/plugin/pluginMenuRuntimeState.test.ts b/src/renderer/utils/plugin/pluginMenuRuntimeState.test.ts
new file mode 100644
index 00000000..e968624d
--- /dev/null
+++ b/src/renderer/utils/plugin/pluginMenuRuntimeState.test.ts
@@ -0,0 +1,80 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  clearPluginMenuRuntimeState,
+  getPluginMenuRuntimeState,
+  normalizeStateKeys,
+  pickAllowedStateKeys,
+  setPluginMenuRuntimeState,
+} from './pluginMenuRuntimeState';
+
+const FULL_ID = 'test-plugin__1';
+
+afterEach(() => {
+  clearPluginMenuRuntimeState(FULL_ID);
+});
+
+describe('normalizeStateKeys', () => {
+  it('비문자열·빈 문자열·중복을 제거한다', () => {
+    expect(
+      normalizeStateKeys([
+        'active',
+        '',
+        '  ',
+        'active',
+        42 as unknown as string,
+        'mode',
+      ]),
+    ).toEqual(['active', 'mode']);
+  });
+
+  it('undefined면 빈 배열을 반환한다', () => {
+    expect(normalizeStateKeys(undefined)).toEqual([]);
+  });
+});
+
+describe('pickAllowedStateKeys', () => {
+  it('허용 키만 추출하고 나머지 payload 키는 거부한다', () => {
+    expect(
+      pickAllowedStateKeys(
+        { active: true, bars: [1, 2, 3], __proto__evil: 1 },
+        ['active'],
+      ),
+    ).toEqual({ active: true });
+  });
+});
+
+describe('runtime state map', () => {
+  it('허용 키만 누적 병합하고 허용 목록으로 조회한다', () => {
+    setPluginMenuRuntimeState(FULL_ID, { active: true, bars: [1] }, ['active']);
+    setPluginMenuRuntimeState(FULL_ID, { mode: 'mic' }, ['active', 'mode']);
+
+    expect(getPluginMenuRuntimeState(FULL_ID, ['active', 'mode'])).toEqual({
+      active: true,
+      mode: 'mic',
+    });
+  });
+
+  it('정의에서 빠진 과거 키는 조회 시 제외한다', () => {
+    setPluginMenuRuntimeState(FULL_ID, { active: true, legacy: 1 }, [
+      'active',
+      'legacy',
+    ]);
+
+    expect(getPluginMenuRuntimeState(FULL_ID, ['active'])).toEqual({
+      active: true,
+    });
+  });
+
+  it('clear 후에는 빈 상태를 반환한다', () => {
+    setPluginMenuRuntimeState(FULL_ID, { active: true }, ['active']);
+    clearPluginMenuRuntimeState(FULL_ID);
+
+    expect(getPluginMenuRuntimeState(FULL_ID, ['active'])).toEqual({});
+  });
+
+  it('허용 키가 없는 업데이트는 저장하지 않는다', () => {
+    setPluginMenuRuntimeState(FULL_ID, { bars: [1, 2] }, ['active']);
+
+    expect(getPluginMenuRuntimeState(FULL_ID, ['active'])).toEqual({});
+  });
+});
diff --git a/src/renderer/utils/plugin/pluginMenuRuntimeState.ts b/src/renderer/utils/plugin/pluginMenuRuntimeState.ts
new file mode 100644
index 00000000..11e2ebf1
--- /dev/null
+++ b/src/renderer/utils/plugin/pluginMenuRuntimeState.ts
@@ -0,0 +1,59 @@
+// 컨텍스트 메뉴 predicate용 오버레이 런타임 상태 미러 (메인 윈도우 전용)
+// element.state(previewState 기반)와 분리 저장 — history/undo, 저장,
+// main→overlay 역동기화에 섞이지 않도록 스토어 밖 모듈 맵으로 관리.
+// 메뉴는 열릴 때 평가되므로 리액티브 구독이 필요 없음
+
+const menuRuntimeState = new Map<string, Record<string, unknown>>();
+
+// 선언 키 정규화 — 비문자열·빈 문자열·중복 제거
+export const normalizeStateKeys = (keys: string[] | undefined): string[] => {
+  if (!Array.isArray(keys)) return [];
+  return [
+    ...new Set(
+      keys.filter(
+        (key): key is string => typeof key === 'string' && key.trim() !== '',
+      ),
+    ),
+  ];
+};
+
+// 허용 키만 추출 — 송신·수신 양쪽에서 사용 (수신자는 payload를 신뢰하지 않음)
+export const pickAllowedStateKeys = (
+  state: Record<string, unknown>,
+  allowedKeys: string[],
+): Record<string, unknown> => {
+  const picked: Record<string, unknown> = {};
+  for (const key of allowedKeys) {
+    if (Object.prototype.hasOwnProperty.call(state, key)) {
+      picked[key] = state[key];
+    }
+  }
+  return picked;
+};
+
+export const setPluginMenuRuntimeState = (
+  fullId: string,
+  partial: Record<string, unknown>,
+  allowedKeys: string[],
+): void => {
+  const picked = pickAllowedStateKeys(partial, allowedKeys);
+  if (Object.keys(picked).length === 0) return;
+  menuRuntimeState.set(fullId, {
+    ...(menuRuntimeState.get(fullId) ?? {}),
+    ...picked,
+  });
+};
+
+export const getPluginMenuRuntimeState = (
+  fullId: string,
+  allowedKeys: string[],
+): Record<string, unknown> => {
+  const stored = menuRuntimeState.get(fullId);
+  if (!stored) return {};
+  // 정의가 바뀌어 허용 목록에서 빠진 과거 키는 제외
+  return pickAllowedStateKeys(stored, allowedKeys);
+};
+
+export const clearPluginMenuRuntimeState = (fullId: string): void => {
+  menuRuntimeState.delete(fullId);
+};
diff --git a/src/types/plugin/api.ts b/src/types/plugin/api.ts
index 46e038de..4ba3c3ef 100644
--- a/src/types/plugin/api.ts
+++ b/src/types/plugin/api.ts
@@ -554,6 +554,13 @@ export interface PluginDefinition {
     delete?: string; // 요소 메뉴 라벨 (예: "KPS 패널 삭제")
     items?: PluginDefinitionContextMenuItem[];
   };
+  /**
+   * 메뉴 predicate가 참조할 오버레이 상태 키 (옵트인 저빈도 동기화)
+   * 선언된 키의 setState 변경만 메인 윈도우로 전달되어 contextMenu.items의
+   * visible/disabled 평가 시 element.state에 병합됨 — 고빈도 상태(bars 등)는
+   * 선언하지 않는 한 절대 전송되지 않음. 프리뷰(previewState 기반 state)는 불변
+   */
+  contextMenuStateKeys?: string[];
   /**
    * 설정 UI 표시 방식
    * - "panel": 속성 패널 (기본값)

From a964bf48061b1f06bfeaa4618878fe858a281f95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:19:23 +0900
Subject: [PATCH 14/17] =?UTF-8?q?feat:=20=EC=84=B9=EC=85=98=20API=20?=
 =?UTF-8?q?=EC=98=88=EC=A0=9C=20=ED=94=8C=EB=9F=AC=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EA=B8=B0=EC=A1=B4=20=EC=98=88?=
 =?UTF-8?q?=EC=A0=9C=20=EC=A0=95=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- section-playground 신규: 패널·모달 양 경로의 섹션, 조건부 그룹 표시,
  모든 필드 숨김 시 카드 소멸, visibility 예외 fail-closed 검증 체크리스트
- audio-spectrum: divider를 섹션으로 전환, start/stop 메뉴를
  contextMenuStateKeys 기반 조건부 표시로 복원
- settings-example: 섹션 도입, 존재하지 않는 __messages 재사용 패턴 제거
---
 plugin/audio-spectrum.js     |  22 +++-
 plugin/section-playground.js | 240 +++++++++++++++++++++++++++++++++++
 plugin/settings-example.js   |  22 +++-
 3 files changed, 277 insertions(+), 7 deletions(-)
 create mode 100644 plugin/section-playground.js

diff --git a/plugin/audio-spectrum.js b/plugin/audio-spectrum.js
index bdc270d1..086e4309 100644
--- a/plugin/audio-spectrum.js
+++ b/plugin/audio-spectrum.js
@@ -58,16 +58,19 @@ dmn.plugin.defineElement({
       {
         label: "menu.start",
         action: "startCapture",
-        visible: (ctx) => !ctx.state?.active,
+        visible: ({ element }) => !element.state?.active,
       },
       {
         label: "menu.stop",
         action: "stopCapture",
-        visible: (ctx) => !!ctx.state?.active,
+        visible: ({ element }) => !!element.state?.active,
       },
     ],
   },
 
+  // active만 메뉴 predicate용으로 메인에 동기화 (bars는 전송 안 됨)
+  contextMenuStateKeys: ["active"],
+
   /* ---- 설정 ---- */
 
   settings: {
@@ -108,7 +111,7 @@ dmn.plugin.defineElement({
       label: "sensitivity",
     },
 
-    divider1: { type: "divider" },
+    visualSection: { type: "section", label: "section.visual" },
 
     visualStyle: {
       type: "select",
@@ -145,7 +148,7 @@ dmn.plugin.defineElement({
       label: "barRadius",
     },
 
-    divider2: { type: "divider" },
+    colorSection: { type: "section", label: "section.color" },
 
     colorMode: {
       type: "select",
@@ -169,7 +172,7 @@ dmn.plugin.defineElement({
       visible: (s) => s.colorMode === "gradient",
     },
 
-    divider3: { type: "divider" },
+    effectSection: { type: "section", label: "section.effect" },
 
     bgOpacity: {
       type: "number",
@@ -206,6 +209,9 @@ dmn.plugin.defineElement({
       "fftSize": "FFT 크기",
       "smoothing": "스무딩",
       "sensitivity": "감도",
+      "section.visual": "시각화",
+      "section.color": "색상",
+      "section.effect": "효과",
       "style": "스타일",
       "style.bars": "바",
       "style.mirror": "미러",
@@ -236,6 +242,9 @@ dmn.plugin.defineElement({
       "fftSize": "FFT Size",
       "smoothing": "Smoothing",
       "sensitivity": "Sensitivity",
+      "section.visual": "Visualization",
+      "section.color": "Color",
+      "section.effect": "Effects",
       "style": "Style",
       "style.bars": "Bars",
       "style.mirror": "Mirror",
@@ -403,6 +412,9 @@ dmn.plugin.defineElement({
   onMount: (ctx) => {
     const { setState, getSettings, onSettingsChange, expose } = ctx;
 
+    // 오버레이 초기 상태는 previewState(active: true) 잔재 — 캡처 전 실제 상태로 정정
+    setState({ active: false });
+
     let audioCtx = null;
     let analyser = null;
     let sourceNode = null;
diff --git a/plugin/section-playground.js b/plugin/section-playground.js
new file mode 100644
index 00000000..2bc21b87
--- /dev/null
+++ b/plugin/section-playground.js
@@ -0,0 +1,240 @@
+// @id section-playground
+
+/**
+ * 섹션 API 전 기능 테스트 플러그인
+ *
+ * settings-example이 패널 경로(settingsUI: "panel")를 보여주므로,
+ * 이 플러그인은 나머지를 전부 검증합니다:
+ * - defineSettings + settingsUI: "modal" (레거시 모달 경로)
+ * - defineElement의 settings (React 패널 경로)
+ * - 암시적 첫 카드 / 이름 있는·없는 section
+ * - 조건부 section (그룹 통째 표시/숨김) / 조건부 필드
+ * - 모든 필드가 숨겨진 section의 카드 소멸
+ * - visible 함수 예외의 fail-closed (콘솔 로그 1회 + 해당 항목만 숨김)
+ * - boolean/color/number/string/select 전 컨트롤 타입
+ * - ko/en 번역 키 (section label 포함)
+ *
+ * 체크리스트:
+ * [요소 패널] 1. 요소 생성 → 우측 패널: [암시적 카드(배지 표시)] [요소 모양] 카드 2개 확인
+ * [요소 패널] 2. "배지 표시" 끄면 "배지 문구"만 숨고 카드는 유지되는지
+ * [전역 모달] 3. 컨텍스트 메뉴 → "섹션 플레이그라운드 설정 (모달)" →
+ *              [암시적 카드(활성화)] [모양] [이름 없는 카드] 3개 확인
+ * [전역 모달] 4. "고급 표시" 토글 → 저장 없이 "고급"·"유령" 카드가 즉시 나타나고
+ *              사라지는지 (재정규화)
+ * [전역 모달] 5. "예외 필드 표시"를 켜도 깨진 항목이 나타나지 않고 콘솔 에러 1회만 찍히는지
+ */
+
+// ============================================
+// 전역 설정 — 레거시 모달 경로 테스트
+// ============================================
+const globalSettings = dmn.plugin.defineSettings({
+  settingsUI: "modal",
+  settings: {
+    // 암시적 첫 카드 (section 선언 전)
+    enabled: {
+      type: "boolean",
+      default: true,
+      label: "g.enabled",
+    },
+
+    // 이름 있는 section
+    lookSection: { type: "section", label: "section.look" },
+    tint: {
+      type: "color",
+      default: "#8B5CF6",
+      label: "g.tint",
+    },
+    size: {
+      type: "number",
+      default: 16,
+      min: 8,
+      max: 48,
+      step: 1,
+      label: "g.size",
+    },
+    shape: {
+      type: "select",
+      options: [
+        { value: "round", label: "g.shape.round" },
+        { value: "square", label: "g.shape.square" },
+      ],
+      default: "round",
+      label: "g.shape",
+    },
+
+    // 조건부 section — showAdvanced가 켜져야 그룹 전체 표시
+    showAdvanced: {
+      type: "boolean",
+      default: false,
+      label: "g.showAdvanced",
+    },
+    advancedSection: {
+      type: "section",
+      label: "section.advanced",
+      visible: (s) => !!s.showAdvanced,
+    },
+    advancedText: {
+      type: "string",
+      default: "",
+      placeholder: "memo...",
+      label: "g.advancedText",
+    },
+    advancedRatio: {
+      type: "number",
+      default: 50,
+      min: 0,
+      max: 100,
+      step: 5,
+      label: "g.advancedRatio",
+    },
+
+    // 모든 필드가 조건부인 section — 필드가 다 숨으면 카드째 소멸해야 함
+    ghostSection: { type: "section", label: "section.ghost" },
+    ghostField: {
+      type: "string",
+      default: "boo",
+      label: "g.ghostField",
+      visible: (s) => !!s.showAdvanced,
+    },
+
+    // 이름 없는 section + 예외 필드 (fail-closed 확인)
+    tailSection: { type: "section" },
+    showBroken: {
+      type: "boolean",
+      default: false,
+      label: "g.showBroken",
+    },
+    brokenField: {
+      type: "string",
+      default: "",
+      label: "g.brokenField",
+      // 켜는 순간 예외 발생 — 이 필드만 숨겨지고 콘솔 에러 1회
+      visible: (s) => {
+        if (s.showBroken) throw new Error("intentional visibility error");
+        return false;
+      },
+    },
+  },
+
+  messages: {
+    ko: {
+      "g.enabled": "활성화",
+      "g.tint": "색조",
+      "g.size": "크기",
+      "g.shape": "모양",
+      "g.shape.round": "둥글게",
+      "g.shape.square": "각지게",
+      "g.showAdvanced": "고급 표시",
+      "g.advancedText": "메모",
+      "g.advancedRatio": "비율",
+      "g.ghostField": "유령 필드",
+      "g.showBroken": "예외 필드 표시",
+      "g.brokenField": "깨진 필드",
+      "section.look": "모양",
+      "section.advanced": "고급",
+      "section.ghost": "유령 (고급 켜야 보임)",
+    },
+    en: {
+      "g.enabled": "Enabled",
+      "g.tint": "Tint",
+      "g.size": "Size",
+      "g.shape": "Shape",
+      "g.shape.round": "Round",
+      "g.shape.square": "Square",
+      "g.showAdvanced": "Show Advanced",
+      "g.advancedText": "Memo",
+      "g.advancedRatio": "Ratio",
+      "g.ghostField": "Ghost Field",
+      "g.showBroken": "Show Broken Field",
+      "g.brokenField": "Broken Field",
+      "section.look": "Look",
+      "section.advanced": "Advanced",
+      "section.ghost": "Ghost (needs Advanced)",
+    },
+  },
+});
+
+// ============================================
+// 요소 — React 패널 경로 테스트
+// ============================================
+dmn.plugin.defineElement({
+  name: "Section Playground",
+  maxInstances: 2,
+
+  messages: {
+    ko: {
+      "el.title": "섹션 플레이그라운드",
+      "el.badge": "배지 표시",
+      "el.badgeText": "배지 문구",
+      "section.elLook": "요소 모양",
+    },
+    en: {
+      "el.title": "Section Playground",
+      "el.badge": "Show Badge",
+      "el.badgeText": "Badge Text",
+      "section.elLook": "Element Look",
+    },
+  },
+
+  // 인스턴스 설정 — 암시적 카드 + 이름 있는 section + 조건부 필드
+  settings: {
+    badge: {
+      type: "boolean",
+      default: true,
+      label: "el.badge",
+    },
+    elLookSection: { type: "section", label: "section.elLook" },
+    badgeText: {
+      type: "string",
+      default: "TEST",
+      label: "el.badgeText",
+      visible: (s) => !!s.badge,
+    },
+    opacity: {
+      type: "number",
+      default: 100,
+      min: 10,
+      max: 100,
+      step: 10,
+      label: "Opacity",
+    },
+  },
+
+  template: (state, instanceSettings, { html, t }) => {
+    const g = globalSettings.get();
+    const { badge, badgeText, opacity } = instanceSettings;
+    const radius = g.shape === "square" ? "2px" : "10px";
+
+    return html`
+      <div
+        style="
+          border: 2px solid ${g.tint};
+          border-radius: ${radius};
+          padding: 10px 14px;
+          font-size: ${g.size}px;
+          opacity: ${(opacity ?? 100) / 100};
+          background: rgba(17, 17, 20, 0.85);
+          color: #fff;
+          user-select: none;
+        "
+      >
+        <div style="font-weight:700; color:${g.tint};">${t("el.title")}</div>
+        ${badge
+          ? html`<div style="font-size: 11px; opacity: 0.8;">
+              ${badgeText || "TEST"} · ${g.enabled ? "on" : "off"}
+            </div>`
+          : ""}
+      </div>
+    `;
+  },
+});
+
+// ============================================
+// 컨텍스트 메뉴
+// ============================================
+dmn.ui.contextMenu.addGridMenuItem({
+  id: "section-playground-settings",
+  label: "섹션 플레이그라운드 설정 (모달)",
+  position: "bottom",
+  onClick: () => globalSettings.open(),
+});
diff --git a/plugin/settings-example.js b/plugin/settings-example.js
index 2b3b581f..851bd4ea 100644
--- a/plugin/settings-example.js
+++ b/plugin/settings-example.js
@@ -18,6 +18,10 @@
 // ============================================
 const globalSettings = dmn.plugin.defineSettings({
   settings: {
+    appearanceSection: {
+      type: "section",
+      label: "section.appearance",
+    },
     // 기본 테마 색상
     primaryColor: {
       type: "color",
@@ -33,6 +37,10 @@ const globalSettings = dmn.plugin.defineSettings({
       step: 1,
       label: "global.fontSize",
     },
+    behaviorSection: {
+      type: "section",
+      label: "section.behavior",
+    },
     // 애니메이션 활성화
     enableAnimation: {
       type: "boolean",
@@ -62,6 +70,8 @@ const globalSettings = dmn.plugin.defineSettings({
       "global.theme.dark": "다크",
       "global.theme.light": "라이트",
       "global.theme.system": "시스템 설정",
+      "section.appearance": "모양",
+      "section.behavior": "동작",
       "menu.create": "예제 패널 생성",
       "menu.delete": "예제 패널 삭제",
       "menu.globalSettings": "전역 설정",
@@ -79,6 +89,8 @@ const globalSettings = dmn.plugin.defineSettings({
       "global.theme.dark": "Dark",
       "global.theme.light": "Light",
       "global.theme.system": "System",
+      "section.appearance": "Appearance",
+      "section.behavior": "Behavior",
       "menu.create": "Create Example Panel",
       "menu.delete": "Delete Example Panel",
       "menu.globalSettings": "Global Settings",
@@ -129,8 +141,8 @@ dmn.plugin.defineElement({
     ],
   },
 
-  // 다국어 메시지 (전역 설정의 messages 재사용)
-  messages: globalSettings.get().__messages || {
+  // 다국어 메시지 (defineElement는 자체 messages 번들 사용)
+  messages: {
     ko: {
       "menu.create": "예제 패널 생성",
       "menu.delete": "예제 패널 삭제",
@@ -140,6 +152,7 @@ dmn.plugin.defineElement({
       "panel.clickCount": "클릭 횟수",
       "settings.showTitle": "제목 표시",
       "settings.customText": "커스텀 텍스트",
+      "section.content": "콘텐츠",
     },
     en: {
       "menu.create": "Create Example Panel",
@@ -150,11 +163,16 @@ dmn.plugin.defineElement({
       "panel.clickCount": "Click Count",
       "settings.showTitle": "Show Title",
       "settings.customText": "Custom Text",
+      "section.content": "Content",
     },
   },
 
   // 인스턴스별 설정 (각 패널마다 다를 수 있음)
   settings: {
+    contentSection: {
+      type: "section",
+      label: "section.content",
+    },
     showTitle: {
       type: "boolean",
       default: true,

From ee76874bea14e6ab29f22d63e4a34c2645697a61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:19:23 +0900
Subject: [PATCH 15/17] =?UTF-8?q?docs:=20=ED=94=8C=EB=9F=AC=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EB=AC=B8=EC=84=9C=20=EC=A0=95=EB=B9=84=20=EB=B0=8F?=
 =?UTF-8?q?=20en=20=EB=88=84=EB=9D=BD=20=EC=84=B9=EC=85=98=20=EB=B2=88?=
 =?UTF-8?q?=EC=97=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 섹션 API와 contextMenuStateKeys 반영 (en/ko)
- en에 ko에만 있던 섹션 번역 추가: declarative-api(앵커 동작·컨텍스트 메뉴·템플릿·
  previewState·onMount·다국어·KPS 예제), settings(그리드 메뉴·동적 반응·비교 표),
  api-reference(PluginDefinition·ElementResizeAnchor·HookContext·예시)
- 잘못된 내용 수정: defineSettings 시그니처(void → PluginSettingsInstance),
  존재하지 않는 dmn.plugin.id/list 섹션 제거, 코드펜스 밖에 떠 있던 advancedOption,
  동적 앵커 예제의 getSettings 구조분해 누락, 객체 멤버 발췌의 구문 오류 12건
- 메뉴 predicate 예제를 실제 평가 컨텍스트에 맞게 교체하고 안내 Callout 추가
- 발췌 코드 블록에 fragment= 펜스 메타 부여 (구문 검사용, 렌더링에는 비노출)
---
 docs/content/en/advanced/page.mdx             |   4 +-
 docs/content/en/api-reference/plugin/page.mdx | 340 +++++++++++--
 docs/content/en/declarative-api/page.mdx      | 447 +++++++++++++++++-
 docs/content/en/guide/installation/page.mdx   |   2 +-
 docs/content/en/guide/tips/page.mdx           |   2 +-
 docs/content/en/settings/page.mdx             | 176 ++++++-
 docs/content/en/template-syntax/page.mdx      |  16 +-
 docs/content/en/ui-api/page.mdx               |  14 +-
 docs/content/ko/advanced/page.mdx             |   4 +-
 docs/content/ko/api-reference/i18n/page.mdx   |   4 +-
 docs/content/ko/api-reference/plugin/page.mdx |  53 ++-
 docs/content/ko/declarative-api/page.mdx      | 102 +++-
 docs/content/ko/guide/installation/page.mdx   |   2 +-
 docs/content/ko/guide/tips/page.mdx           |   2 +-
 docs/content/ko/settings/page.mdx             |  38 +-
 docs/content/ko/template-syntax/page.mdx      |  20 +-
 docs/content/ko/ui-api/page.mdx               |   8 +-
 17 files changed, 1088 insertions(+), 146 deletions(-)

diff --git a/docs/content/en/advanced/page.mdx b/docs/content/en/advanced/page.mdx
index b15e7256..b4218cbf 100644
--- a/docs/content/en/advanced/page.mdx
+++ b/docs/content/en/advanced/page.mdx
@@ -171,7 +171,7 @@ dmn.plugin.defineElement({
 
 Only call `setState` when state actually changes:
 
-```javascript
+```javascript fragment=object-members
 onMount: ({ setState, getSettings }) => {
   let lastKps = 0;
 
@@ -185,7 +185,7 @@ onMount: ({ setState, getSettings }) => {
   }, 100);
 
   return () => clearInterval(interval);
-};
+},
 ```
 
 ## Multi-Window Patterns
diff --git a/docs/content/en/api-reference/plugin/page.mdx b/docs/content/en/api-reference/plugin/page.mdx
index 3329c4b6..e259a0f9 100644
--- a/docs/content/en/api-reference/plugin/page.mdx
+++ b/docs/content/en/api-reference/plugin/page.mdx
@@ -9,7 +9,7 @@ Core plugin registration and management API.
 
 ## Element Definition
 
-### `dmn.plugin.defineElement(options): void`
+### `dmn.plugin.defineElement(definition): void`
 
 Defines a draggable overlay element. See [Declarative API](/docs/declarative-api) for details.
 
@@ -44,17 +44,200 @@ dmn.plugin.defineElement({
 
 ---
 
+## PluginDefinition
+
+The definition object passed to `defineElement`.
+
+```typescript
+interface PluginDefinition {
+  /** Plugin name (shown in the context menu) */
+  name: string;
+
+  /** Maximum instance count (0 = unlimited, default) */
+  maxInstances?: number;
+
+  /**
+   * Whether the element can be resized in the grid
+   * @default false
+   */
+  resizable?: boolean;
+
+  /**
+   * Which size axis to preserve when settings change
+   * Only applies when resizable is true
+   * - 'width': preserve width, height follows content
+   * - 'height': preserve height, width follows content
+   * - 'both': preserve both (default)
+   * - 'none': both follow content
+   * @default 'both'
+   */
+  preserveAxis?: "width" | "height" | "both" | "none";
+
+  /**
+   * Resize anchor (fixed point when the size changes)
+   * @default "top-left"
+   */
+  resizeAnchor?: ElementResizeAnchor;
+
+  /** Context menu setup */
+  contextMenu?: {
+    create?: string; // Create menu label
+    delete?: string; // Delete menu label
+    items?: PluginDefinitionContextMenuItem[];
+  };
+
+  /**
+   * Overlay state keys mirrored to the main window for menu predicates
+   * (opt-in, low-frequency). Only declared keys are sent on setState changes
+   */
+  contextMenuStateKeys?: string[];
+
+  /**
+   * Settings UI mode
+   * @default "panel"
+   */
+  settingsUI?: "panel" | "modal";
+
+  /** Settings schema */
+  settings?: Record<string, PluginSettingSchema>;
+
+  /** i18n messages (nested objects allowed — PluginMessages) */
+  messages?: Record<string, Record<string, unknown>>;
+
+  /** Preview state (for the main window) */
+  previewState?: Record<string, any>;
+
+  /** Template function */
+  template: (
+    state: Record<string, any>,
+    settings: Record<string, any>,
+    helpers: DisplayElementTemplateHelpers
+  ) => DisplayElementTemplateResult | string;
+
+  /** Mount logic (runs only in the overlay) */
+  onMount?: (context: PluginDefinitionHookContext) => void | (() => void);
+}
+```
+
+## ElementResizeAnchor
+
+The type that specifies the fixed point when an element's size changes.
+
+```typescript
+type ElementResizeAnchor =
+  | "top-left" // Top-left (default)
+  | "top-center" // Top center
+  | "top-right" // Top-right
+  | "center-left" // Center-left
+  | "center" // Center
+  | "center-right" // Center-right
+  | "bottom-left" // Bottom-left
+  | "bottom-center" // Bottom center
+  | "bottom-right"; // Bottom-right
+```
+
+### Anchor Behavior
+
+When the size changes, the specified anchor position stays fixed and the element
+expands or shrinks in the other directions.
+
+| Anchor         | Behavior                             |
+| -------------- | ------------------------------------ |
+| `top-left`     | Expands/shrinks right and down       |
+| `center`       | Expands/shrinks evenly in all directions |
+| `bottom-right` | Expands/shrinks left and up          |
+
+## PluginDefinitionHookContext
+
+The context object passed to the `onMount` callback.
+
+```typescript
+interface PluginDefinitionHookContext {
+  /** Update state */
+  setState: (updates: Record<string, any>) => void;
+
+  /** Get current settings */
+  getSettings: () => Record<string, any>;
+
+  /** Set the resize anchor */
+  setAnchor: (anchor: ElementResizeAnchor) => void;
+
+  /** Get the current resize anchor */
+  getAnchor: () => ElementResizeAnchor;
+
+  /**
+   * Register event hooks
+   * - "key": mapped key events
+   * - "rawKey": all raw input events
+   */
+  onHook: (event: "key" | "rawKey", callback: (...args: any[]) => void) => void;
+
+  /** Expose functions for the context menu */
+  expose: (actions: Record<string, (...args: any[]) => any>) => void;
+
+  /** Current locale code */
+  locale: string;
+
+  /** Translation function */
+  t: PluginTranslateFn;
+
+  /** Subscribe to locale changes */
+  onLocaleChange: (listener: (locale: string) => void) => Unsubscribe;
+
+  /** Subscribe to settings changes */
+  onSettingsChange: (
+    listener: (
+      newSettings: Record<string, any>,
+      oldSettings: Record<string, any>
+    ) => void
+  ) => void;
+}
+```
+
+### setAnchor / getAnchor
+
+Dynamically change or read the resize anchor per instance.
+
+```javascript fragment=object-members
+onMount: ({ setAnchor, getAnchor, getSettings }) => {
+  // Check the current anchor
+  console.log("Current anchor:", getAnchor()); // "top-left" (default)
+
+  // Change the anchor to center
+  setAnchor("center");
+
+  // Change the anchor based on settings
+  const settings = getSettings();
+  if (settings.expandFromCenter) {
+    setAnchor("center");
+  }
+},
+```
+
+**Anchor priority:**
+
+1. Per-instance anchor set via `setAnchor()`
+2. `PluginDefinition.resizeAnchor` (definition default)
+3. `"top-left"` (system default)
+
+---
+
 ## Settings Definition
 
-### `dmn.plugin.defineSettings(options): void`
+### `dmn.plugin.defineSettings(definition): PluginSettingsInstance`
 
-Defines plugin settings UI in the main window settings panel. See [Settings System](/docs/settings) for details.
+Defines **plugin-global settings** independent of elements (`defineElement`). The
+returned instance exposes `get`/`set`/`open`/`reset`/`subscribe`. See
+[Settings System](/docs/settings) for details.
 
-```javascript
-dmn.plugin.defineSettings({
-  id: "my-settings",
-  title: "My Plugin Settings",
+```typescript fragment=signature
+dmn.plugin.defineSettings(
+  definition: PluginSettingsDefinition
+): PluginSettingsInstance
+```
 
+```javascript
+const pluginSettings = dmn.plugin.defineSettings({
   settings: {
     enabled: { type: "boolean", default: true, label: "Enable" },
     theme: {
@@ -70,6 +253,38 @@ dmn.plugin.defineSettings({
 });
 ```
 
+### PluginSettingSchema
+
+Settings use a discriminated union of value settings and sections. Layout entries
+never appear in stored settings, defaults, getters, or change callbacks.
+
+```typescript
+type PluginSettingSchema =
+  | {
+      type: "boolean" | "color" | "number" | "string" | "select";
+      default: string | number | boolean;
+      label: string;
+      min?: number;
+      max?: number;
+      step?: number;
+      options?: { label: string; value: string | number | boolean }[];
+      placeholder?: string;
+      visible?: boolean | ((settings: Record<string, unknown>) => boolean);
+    }
+  | {
+      type: "section";
+      label?: string; // optional caption above the card
+      visible?: boolean | ((settings: Record<string, unknown>) => boolean);
+    };
+```
+
+A section starts a card and controls the whole group through `visible`. Its key is
+a layout identifier and never appears in stored values, defaults, getters, or
+change callbacks. Panel and modal settings UIs follow the same rules, and
+visibility exceptions hide the affected item or group (fail-closed). The legacy
+`divider` type was removed — divider entries in existing plugins are ignored as
+an unsupported type.
+
 ---
 
 ## Lifecycle
@@ -100,6 +315,16 @@ dmn.plugin.registerCleanup(() => {
 
 Plugin-specific persistent storage. See [Storage API](/docs/storage) for details.
 
+```typescript fragment=signature
+dmn.plugin.storage.get<T = any>(key: string): Promise<T | null>
+dmn.plugin.storage.set(key: string, value: any): Promise<void>
+dmn.plugin.storage.remove(key: string): Promise<void>
+dmn.plugin.storage.clear(): Promise<void>
+dmn.plugin.storage.keys(): Promise<string[]>
+dmn.plugin.storage.hasData(prefix: string): Promise<boolean>
+dmn.plugin.storage.clearByPrefix(prefix: string): Promise<number>
+```
+
 ```javascript
 // Save
 await dmn.plugin.storage.set("myKey", { value: 42 });
@@ -116,37 +341,98 @@ const keys = await dmn.plugin.storage.keys();
 
 ---
 
-## Plugin Info
-
-### `dmn.plugin.id: string`
+## Example Usage
 
-Returns current plugin ID (from `// @id` comment).
+### Basic Plugin
 
 ```javascript
-// @id my-plugin
-console.log(dmn.plugin.id); // 'my-plugin'
-```
+// @id simple-counter
 
-### `dmn.plugin.list(): Promise<PluginInfo[]>`
+dmn.plugin.defineElement({
+  name: "Simple Counter",
+  maxInstances: 3,
+  resizeAnchor: "top-left",
 
-Returns list of all loaded plugins.
+  settings: {
+    textColor: {
+      type: "color",
+      default: "#FFFFFF",
+      label: "Text Color",
+    },
+  },
 
-```typescript
-interface PluginInfo {
-  id: string;
-  name: string;
-  instances: number;
-}
+  previewState: {
+    count: 42,
+  },
+
+  template: (state, settings, { html }) => html`
+    <div style="color: ${settings.textColor}; padding: 16px;">
+      Count: ${state.count ?? 0}
+    </div>
+  `,
+
+  onMount: ({ setState, onHook }) => {
+    let count = 0;
 
-const plugins = await dmn.plugin.list();
-plugins.forEach((p) => {
-  console.log(`${p.name} (${p.id}): ${p.instances} instances`);
+    onHook("key", ({ state }) => {
+      if (state === "DOWN") {
+        count++;
+        setState({ count });
+      }
+    });
+  },
 });
 ```
 
----
+### Dynamic Anchor Change
 
-## Example Usage
+```javascript
+// @id dynamic-anchor-panel
+
+dmn.plugin.defineElement({
+  name: "Dynamic Anchor Panel",
+  resizeAnchor: "top-left", // Default anchor
+
+  settings: {
+    expandFromCenter: {
+      type: "boolean",
+      default: false,
+      label: "Expand From Center",
+    },
+  },
+
+  template: (state, settings, { html }) => html`
+    <div style="padding: 16px; background: rgba(0,0,0,0.8);">
+      Anchor: ${state.currentAnchor ?? "top-left"}
+    </div>
+  `,
+
+  onMount: ({
+    setState,
+    getSettings,
+    setAnchor,
+    getAnchor,
+    onSettingsChange,
+  }) => {
+    // Set the initial anchor
+    const settings = getSettings();
+    const anchor = settings.expandFromCenter ? "center" : "top-left";
+    setAnchor(anchor);
+    setState({ currentAnchor: anchor });
+
+    // Update the anchor when settings change
+    onSettingsChange((newSettings, oldSettings) => {
+      if (newSettings.expandFromCenter !== oldSettings.expandFromCenter) {
+        const newAnchor = newSettings.expandFromCenter ? "center" : "top-left";
+        setAnchor(newAnchor);
+        setState({ currentAnchor: newAnchor });
+      }
+    });
+  },
+});
+```
+
+### Stats Tracker
 
 ```javascript
 // @id stats-tracker
diff --git a/docs/content/en/declarative-api/page.mdx b/docs/content/en/declarative-api/page.mdx
index 33ca6a4a..186c2199 100644
--- a/docs/content/en/declarative-api/page.mdx
+++ b/docs/content/en/declarative-api/page.mdx
@@ -84,15 +84,21 @@ dmn.plugin.defineElement({
 });
 ```
 
-## Settings Schema
+## Settings Schema (settings)
 
 Define settings schema to auto-generate settings UI. Default is property panel;
 use `settingsUI: "modal"` for modal style.
 
 ### Supported Types
 
-```javascript
+```javascript fragment=object-members
 settings: {
+  // Card section — starts a new settings card
+  appearanceSection: {
+    type: "section",
+    label: "Appearance", // optional caption above the card
+  },
+
   // String
   nickname: {
     type: "string",
@@ -118,11 +124,6 @@ settings: {
     label: "Show Graph",
   },
 
-  // Divider
-  sectionDivider: {
-    type: "divider",
-  },
-
   // Color
   textColor: {
     type: "color",
@@ -143,14 +144,25 @@ settings: {
 },
 ```
 
-`type: "divider"` adds only a divider in the settings UI without needing `default` or `label`.
+`type: "section"` starts a new card. Its key is a layout identifier and is never
+included in stored values, defaults, `getSettings()`, or change callbacks. Settings
+before the first section appear in an implicit untitled card. A section without a
+label still creates a card boundary.
+
+<Callout type="info">
+  The legacy `type: "divider"` (an in-card separator line) was removed together
+  with the introduction of sections. Divider entries in existing plugins are
+  ignored (no crash) — use sections to group settings instead.
+</Callout>
+
+Sections behave identically in the property panel and with `settingsUI: "modal"`.
 
 ### Conditional Visibility (visible)
 
 Add a `visible` property to setting items to dynamically show/hide them based on other setting values.
 Settings without `visible` are always shown (same as existing behavior).
 
-```javascript
+```javascript fragment=object-members
 settings: {
   // Mode selection
   showGraph: {
@@ -159,6 +171,12 @@ settings: {
     label: "Show Graph",
   },
 
+  graphSection: {
+    type: "section",
+    label: "Graph",
+    visible: (settings) => settings.showGraph,
+  },
+
   // Static boolean — always hidden
   hiddenOption: {
     type: "number",
@@ -168,10 +186,6 @@ settings: {
   },
 
   // Function — dynamically show/hide based on other settings
-  graphDivider: {
-    type: "divider",
-    visible: (settings) => settings.showGraph,
-  },
   graphColor: {
     type: "color",
     default: "#86EFAC",
@@ -191,15 +205,21 @@ settings: {
   Hidden settings retain their stored values — only display is controlled, no data loss.
 </Callout>
 
+On a `section`, `visible` hides the entire group up to the next section. The boundary
+is retained even while hidden, so adjacent groups never merge. If every value setting
+inside a section is hidden, its card and caption are hidden too. If a visibility
+function throws, that item or section is hidden (fail-closed) and the error is logged.
+The same rules and empty-state behavior apply to panel and modal settings UIs.
+
 The `visible` signature follows the same pattern as `PluginMenuItem.visible` in context menus:
 
-```typescript
+```typescript fragment=type-members
 visible?: boolean | ((settings: Record<string, any>) => boolean);
 ```
 
 ### Accessing Settings
 
-```javascript
+```javascript fragment=object-members
 // In template
 template: (state, settings, { html }) => html`
   <div style="color: ${settings.textColor};">
@@ -232,6 +252,12 @@ Sets the anchor position when element size changes. Default is `"top-left"`.
 | `bottom-center` | Bottom center      |
 | `bottom-right`  | Bottom-right       |
 
+### Anchor Behavior
+
+- `top-left`: the top-left corner stays fixed as the size changes (default)
+- `center`: the center position stays fixed as the size changes
+- `bottom-right`: the bottom-right corner stays fixed as the size changes
+
 ### Definition Level Setting
 
 Define default anchor for all instances:
@@ -252,7 +278,7 @@ Use `setAnchor()` and `getAnchor()` in `onMount` to dynamically change anchor:
 dmn.plugin.defineElement({
   name: "Dynamic Anchor Panel",
 
-  onMount: ({ setAnchor, getAnchor }) => {
+  onMount: ({ setAnchor, getAnchor, getSettings }) => {
     // Check current anchor
     console.log("Current anchor:", getAnchor()); // "top-left"
 
@@ -270,6 +296,12 @@ dmn.plugin.defineElement({
 });
 ```
 
+### Anchor Priority
+
+1. Per-instance `resizeAnchor` (set via `setAnchor`)
+2. `resizeAnchor` on the definition
+3. Default `"top-left"`
+
 ## Resize Settings (resizable, preserveAxis)
 
 Use `resizable` option to let users resize elements directly in the grid.
@@ -312,3 +344,386 @@ dmn.plugin.defineElement({
   // ...
 });
 ```
+
+### Usage Example
+
+For a panel with a graph toggle, like the KPS panel:
+
+- With `preserveAxis: "width"`, the width is preserved when the graph is toggled on and off
+- The height adjusts automatically depending on whether the graph is shown
+
+```javascript
+dmn.plugin.defineElement({
+  name: "KPS Panel",
+  resizable: true,
+  preserveAxis: "width",
+  resizeAnchor: "bottom-left", // Bottom fixed (graph expands upward)
+
+  settings: {
+    showGraph: { type: "boolean", default: true, label: "Show Graph" },
+  },
+
+  template: (state, settings, { html }) => html`
+    <div style="width: 100%; height: 100%;">
+      <div class="kps-value">${state.kps ?? 0}</div>
+      ${settings.showGraph ? html`<div class="graph">...</div>` : ""}
+    </div>
+  `,
+});
+```
+
+<Callout type="tip">
+  Apply `width: 100%; height: 100%` to the root element of a `resizable`
+  element's template so the content fills the size the user chose.
+</Callout>
+
+## Context Menu (contextMenu)
+
+### Basic Setup
+
+```javascript fragment=object-members
+contextMenu: {
+  create: "Create Panel",   // Right-click on empty grid space
+  delete: "Delete Panel",   // Right-click on the panel
+},
+```
+
+### Custom Menu Items
+
+```javascript fragment=object-members
+contextMenu: {
+  create: "Create Panel",
+  delete: "Delete Panel",
+  items: [
+    {
+      label: "Reset Stats",
+      onClick: ({ actions }) => actions.reset(),
+    },
+    {
+      label: "Export Data",
+      onClick: async ({ element, actions }) => {
+        await actions.exportData();
+      },
+      // Conditional visibility
+      visible: ({ element }) => !!element.settings.enableExport,
+      // Conditional disable
+      disabled: ({ element }) => element.settings.exportFormat === "none",
+      // Position (top or bottom, default: bottom)
+      position: "bottom",
+    },
+  ],
+},
+
+// Register actions in onMount
+onMount: ({ expose, setState }) => {
+  expose({
+    reset: () => setState({ count: 0 }),
+    exportData: async () => { /* export logic */ },
+  });
+},
+```
+
+Items with `position: "top"` appear above the built-in menu entries; the rest
+appear below them.
+
+<Callout type="info">
+  Menu predicates run in the main window with `{ element, actions }`. Overlay
+  runtime state set via `setState` is not synced into this context by default —
+  `element.state` here reflects the main-window state (initialized from
+  `previewState`). To base conditions on overlay state, declare the keys in
+  `contextMenuStateKeys`.
+</Callout>
+
+### Overlay State in Predicates (contextMenuStateKeys)
+
+Declare overlay state keys that menu predicates need. Only the declared keys are
+mirrored to the main window (on `setState` changes) and merged into
+`element.state` during predicate evaluation. High-frequency state is never sent
+unless declared, and the main-window preview state stays untouched.
+
+```javascript fragment=object-members
+// Mirror only `active` for menu predicates
+contextMenuStateKeys: ["active"],
+
+contextMenu: {
+  items: [
+    {
+      label: "Stop Capture",
+      action: "stopCapture",
+      visible: ({ element }) => !!element.state?.active,
+    },
+  ],
+},
+```
+
+## Template (template)
+
+The template function receives `state` and `settings` and returns the UI.
+See [Template Syntax](/docs/template-syntax) for the full syntax.
+
+```javascript fragment=object-members
+template: (state, settings, { html, t, locale }) => html`
+  <div style="color: ${settings.textColor};">
+    <strong>${state.value}</strong>
+    ${settings.showDetails ? html`
+      <div class="details">Details</div>
+    ` : ""}
+  </div>
+`,
+```
+
+### Template Helpers
+
+| Helper   | Description                              |
+| -------- | ---------------------------------------- |
+| `html`   | htm tag function (creates React Elements) |
+| `t(key)` | i18n translation function                |
+| `locale` | Current locale code                      |
+
+## Preview State (previewState)
+
+Initial state shown as a preview in the main window.
+The actual logic runs only in the overlay, so the main window displays this state.
+
+```javascript fragment=object-members
+previewState: {
+  kps: 12,
+  history: [5, 8, 12, 10, 15],
+},
+```
+
+## Mount Logic (onMount)
+
+`onMount` runs only in the overlay and implements the actual behavior.
+
+### Context Object
+
+```javascript fragment=object-members
+onMount: (context) => {
+  const {
+    setState,         // Update state
+    getSettings,      // Get current settings
+    setAnchor,        // Set resize anchor
+    getAnchor,        // Get current anchor
+    onHook,           // Register event hooks
+    expose,           // Expose functions for the context menu
+    locale,           // Current locale code
+    t,                // Translation function
+    onLocaleChange,   // Subscribe to locale changes
+    onSettingsChange, // Subscribe to settings changes
+  } = context;
+
+  // Return cleanup function
+  return () => { /* cleanup */ };
+},
+```
+
+### Event Hooks (onHook)
+
+```javascript fragment=object-members
+onMount: ({ onHook, setState }) => {
+  // Mapped key events
+  onHook("key", ({ key, state, mode }) => {
+    if (state === "DOWN") {
+      console.log(`${key} pressed (${mode})`);
+    }
+  });
+
+  // All raw input events (keyboard, mouse)
+  onHook("rawKey", ({ device, label, state }) => {
+    console.log(`[${device}] ${label} ${state}`);
+  });
+},
+```
+
+### Settings Change Detection (onSettingsChange)
+
+Use this when you need to react to settings changes immediately.
+
+<Callout type="info">
+  In most cases, reading the latest settings with `getSettings()` is enough.
+  Use `onSettingsChange` only when you need external API calls or resource
+  re-initialization.
+</Callout>
+
+```javascript fragment=object-members
+onMount: ({ setState, getSettings, onSettingsChange }) => {
+  const fetchData = async (nickname) => {
+    const response = await fetch(`/api/user/${nickname}`);
+    const data = await response.json();
+    setState({ data });
+  };
+
+  // Initial load
+  fetchData(getSettings().nickname);
+
+  // Refetch when the nickname changes
+  onSettingsChange((newSettings, oldSettings) => {
+    if (newSettings.nickname !== oldSettings.nickname) {
+      fetchData(newSettings.nickname);
+    }
+  });
+},
+```
+
+## i18n Support (messages)
+
+```javascript
+dmn.plugin.defineElement({
+  name: "Localized Panel",
+
+  messages: {
+    ko: {
+      "menu.create": "패널 생성",
+      "menu.delete": "패널 삭제",
+      "label.count": "카운트",
+    },
+    en: {
+      "menu.create": "Create Panel",
+      "menu.delete": "Delete Panel",
+      "label.count": "Count",
+    },
+  },
+
+  contextMenu: {
+    create: "menu.create", // Use message keys
+    delete: "menu.delete",
+  },
+
+  settings: {
+    count: {
+      type: "number",
+      default: 0,
+      label: "label.count", // Use message keys
+    },
+  },
+
+  template: (state, settings, { html, t, locale }) => html`
+    <div data-locale="${locale}">${t("label.count")}: ${state.value ?? 0}</div>
+  `,
+});
+```
+
+## Practical Example: KPS Panel
+
+```javascript
+// @id kps-panel
+
+dmn.plugin.defineElement({
+  name: "KPS Panel",
+  maxInstances: 1,
+
+  contextMenu: {
+    create: "Create KPS Panel",
+    delete: "Delete KPS Panel",
+    items: [
+      {
+        label: "Reset Stats",
+        onClick: ({ actions }) => actions.reset(),
+      },
+    ],
+  },
+
+  settings: {
+    showGraph: { type: "boolean", default: true, label: "Show Graph" },
+    textColor: { type: "color", default: "#FFFFFF", label: "Text Color" },
+    graphColor: {
+      type: "color",
+      default: "#86EFAC",
+      label: "Graph Color",
+      visible: (s) => s.showGraph,
+    },
+  },
+
+  previewState: {
+    kps: 12,
+    max: 20,
+    history: [5, 8, 12, 15, 10, 12],
+  },
+
+  template: (state, settings, { html }) => html`
+    <div
+      style="
+      background: rgba(0, 0, 0, 0.8);
+      padding: 16px;
+      border-radius: 8px;
+      color: ${settings.textColor};
+      min-width: 120px;
+    "
+    >
+      <div style="font-size: 32px; font-weight: bold;">
+        ${state.kps ?? 0}
+        <span style="font-size: 14px; opacity: 0.7;">KPS</span>
+      </div>
+      ${settings.showGraph
+        ? html`
+            <div
+              style="
+          display: flex;
+          gap: 2px;
+          height: 40px;
+          align-items: flex-end;
+          margin-top: 8px;
+        "
+            >
+              ${(state.history ?? []).map((v) => {
+                const height = state.max ? (v / state.max) * 100 : 0;
+                return html`
+                  <div
+                    style="
+                flex: 1;
+                height: ${height}%;
+                background: ${settings.graphColor};
+                border-radius: 2px 2px 0 0;
+                opacity: 0.7;
+              "
+                  ></div>
+                `;
+              })}
+            </div>
+          `
+        : ""}
+    </div>
+  `,
+
+  onMount: ({ setState, expose, onHook }) => {
+    const timestamps = [];
+    let max = 0;
+    const historySize = 20;
+    const history = [];
+
+    onHook("key", ({ state }) => {
+      if (state === "DOWN") {
+        timestamps.push(Date.now());
+      }
+    });
+
+    const interval = setInterval(() => {
+      const now = Date.now();
+      // Keep only timestamps within the last second
+      while (timestamps.length && timestamps[0] < now - 1000) {
+        timestamps.shift();
+      }
+
+      const kps = timestamps.length;
+      max = Math.max(max, kps);
+
+      history.push(kps);
+      if (history.length > historySize) history.shift();
+
+      setState({ kps, max, history: [...history] });
+    }, 50);
+
+    expose({
+      reset: () => {
+        timestamps.length = 0;
+        history.length = 0;
+        max = 0;
+        setState({ kps: 0, max: 0, history: [] });
+      },
+    });
+
+    return () => clearInterval(interval);
+  },
+});
+```
diff --git a/docs/content/en/guide/installation/page.mdx b/docs/content/en/guide/installation/page.mdx
index 2643e750..72c0a7de 100644
--- a/docs/content/en/guide/installation/page.mdx
+++ b/docs/content/en/guide/installation/page.mdx
@@ -39,7 +39,7 @@ When you first run the program, two windows will appear.
 
 Program settings are automatically saved to the following path.
 
-```
+```text
 %appdata%/com.dmnote.desktop/store.json
 ```
 
diff --git a/docs/content/en/guide/tips/page.mdx b/docs/content/en/guide/tips/page.mdx
index 597723eb..b42fbacc 100644
--- a/docs/content/en/guide/tips/page.mdx
+++ b/docs/content/en/guide/tips/page.mdx
@@ -103,7 +103,7 @@ Open Developer Tools with `Ctrl+Shift+I` to inspect elements and test CSS.
 
 Regularly backup important settings:
 
-```
+```text
 %appdata%/com.dmnote.desktop/
 ```
 
diff --git a/docs/content/en/settings/page.mdx b/docs/content/en/settings/page.mdx
index add01094..1ee54ca8 100644
--- a/docs/content/en/settings/page.mdx
+++ b/docs/content/en/settings/page.mdx
@@ -22,6 +22,10 @@ description: Plugin settings management with defineSettings
 
 const pluginSettings = dmn.plugin.defineSettings({
   settings: {
+    connectionSection: {
+      type: "section",
+      label: "Connection",
+    },
     apiKey: {
       type: "string",
       default: "",
@@ -36,27 +40,26 @@ const pluginSettings = dmn.plugin.defineSettings({
       default: "dark",
       label: "Theme",
     },
-    sectionDivider: {
-      type: "divider",
+    behaviorSection: {
+      type: "section",
+      label: "Behavior",
     },
     enabled: {
       type: "boolean",
       default: true,
       label: "Enabled",
     },
+    // Conditional visibility — static boolean or function, shown only while enabled is true
+    advancedOption: {
+      type: "number",
+      default: 5,
+      label: "Advanced Option",
+      visible: (settings) => settings.enabled,
+    },
   },
 });
 
-// `type: "divider"` adds only a divider in settings panel/modal.
-
-// Conditional visibility — use visible property to dynamically show/hide items
-// Supports both static boolean and function
-advancedOption: {
-  type: "number",
-  default: 5,
-  label: "Advanced Option",
-  visible: (settings) => settings.enabled,  // Only shown when enabled is true
-},
+// section starts a new card. (The legacy divider type was removed — existing divider entries are ignored.)
 
 // Get settings values
 const current = pluginSettings.get();
@@ -72,6 +75,14 @@ if (confirmed) {
 }
 ```
 
+`defineSettings` uses the same section contract as `defineElement`: a section starts
+a new card, its optional label appears above the card, and its key is excluded from
+stored/default values and callbacks. `section.visible` controls the entire group.
+Sections with no renderable value settings are hidden entirely; only when no value
+setting is renderable anywhere does the settings UI show its standard empty state.
+Panel and modal modes have identical semantics, including fail-closed visibility
+evaluation.
+
 ## API Reference
 
 ### defineSettings(definition)
@@ -115,7 +126,7 @@ Both detect settings changes but have different purposes:
 
 ```javascript
 const settings = dmn.plugin.defineSettings({
-  settings: { apiKey: { type: "string", default: "" } },
+  settings: { apiKey: { type: "string", default: "", label: "API Key" } },
 
   // onChange: Always executes (cannot unsubscribe)
   onChange: (newSettings, oldSettings) => {
@@ -205,7 +216,144 @@ dmn.plugin.defineElement({
   // Instance-specific settings
   settings: {
     showGraph: { type: "boolean", default: true, label: "Show Graph" },
+    graphColor: {
+      type: "color",
+      default: "#86EFAC",
+      label: "Graph Color",
+      visible: (s) => s.showGraph,
+    },
+  },
+
+  template: (state, instanceSettings, { html }) => {
+    const global = globalSettings.get();
+    return html`
+      <div style="color: ${global.defaultColor};">KPS: ${state.kps ?? 0}</div>
+    `;
+  },
+
+  onMount: ({ setState, onHook }) => {
+    const global = globalSettings.get();
+    let count = 0;
+
+    onHook("key", ({ state }) => {
+      if (state === "DOWN") count++;
+    });
+
+    const interval = setInterval(() => {
+      setState({ kps: count });
+      count = 0;
+    }, global.refreshRate);
+
+    return () => clearInterval(interval);
   },
-  // ...
 });
 ```
+
+### Adding Settings to the Grid Menu
+
+You can also add a settings menu without any panel:
+
+```javascript
+// @id settings-only-plugin
+
+const pluginSettings = dmn.plugin.defineSettings({
+  settings: {
+    volume: { type: "number", default: 50, min: 0, max: 100, label: "Volume" },
+    notifications: { type: "boolean", default: true, label: "Notifications" },
+  },
+});
+
+// Add to the right-click menu on empty grid space
+dmn.ui.contextMenu.addGridMenuItem({
+  id: "my-plugin-settings",
+  label: "Plugin Settings",
+  onClick: () => pluginSettings.open(),
+});
+
+dmn.plugin.registerCleanup(() => {
+  dmn.ui.contextMenu.clearMyMenuItems();
+});
+```
+
+### Reacting to Settings Changes
+
+```javascript
+// @id data-fetcher
+
+const fetcherSettings = dmn.plugin.defineSettings({
+  settings: {
+    apiEndpoint: {
+      type: "string",
+      default: "https://api.example.com",
+      label: "API Endpoint",
+    },
+    refreshInterval: {
+      type: "number",
+      default: 5000,
+      min: 1000,
+      max: 60000,
+      label: "Refresh Interval (ms)",
+    },
+    autoRefresh: {
+      type: "boolean",
+      default: true,
+      label: "Auto Refresh",
+    },
+  },
+});
+
+let fetchInterval = null;
+
+function startFetching() {
+  const { refreshInterval, autoRefresh, apiEndpoint } = fetcherSettings.get();
+
+  if (fetchInterval) {
+    clearInterval(fetchInterval);
+    fetchInterval = null;
+  }
+
+  if (!autoRefresh) return;
+
+  fetchInterval = setInterval(async () => {
+    const response = await fetch(apiEndpoint);
+    const data = await response.json();
+    console.log("Data:", data);
+  }, refreshInterval);
+}
+
+// Restart the interval when settings change
+fetcherSettings.subscribe((newSettings, oldSettings) => {
+  if (
+    newSettings.apiEndpoint !== oldSettings.apiEndpoint ||
+    newSettings.refreshInterval !== oldSettings.refreshInterval ||
+    newSettings.autoRefresh !== oldSettings.autoRefresh
+  ) {
+    startFetching();
+  }
+});
+
+startFetching();
+
+dmn.plugin.registerCleanup(() => {
+  if (fetchInterval) clearInterval(fetchInterval);
+});
+```
+
+## Comparison with defineElement's onSettingsChange
+
+| Feature                  | `defineElement`              | `defineSettings`                        |
+| ------------------------ | ---------------------------- | --------------------------------------- |
+| Settings change handling | `onSettingsChange(callback)` | `onChange` + `subscribe()`              |
+| Unsubscribing            | Automatic (on unmount)       | Manual, via `subscribe()` return value  |
+| Where to use             | Inside `onMount` only        | Anywhere                                |
+| Target                   | Instance-specific settings   | Global/standalone settings              |
+
+## Automatic Behavior
+
+| Feature                        | Description                                                    |
+| ------------------------------ | -------------------------------------------------------------- |
+| **Automatic UI generation**    | Property panel/modal generated from the settings schema        |
+| **Automatic storage handling** | Saved to and restored from `plugin.storage`                    |
+| **i18n support**               | Integrates with messages                                       |
+| **Per-type components**        | boolean→checkbox, color→color picker, and so on                |
+| **Automatic panel sync**       | All panels of the same plugin re-render when settings change   |
diff --git a/docs/content/en/template-syntax/page.mdx b/docs/content/en/template-syntax/page.mdx
index d5aea175..508e92df 100644
--- a/docs/content/en/template-syntax/page.mdx
+++ b/docs/content/en/template-syntax/page.mdx
@@ -12,11 +12,11 @@ It allows intuitive writing close to standard HTML syntax.
 
 ### Value Interpolation
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <div>Current value: ${state.value}</div>
   <div style="color: ${settings.color};">Colored text</div>
-`;
+`,
 ```
 
 <Callout type="warning">
@@ -112,7 +112,7 @@ html`
 
 ### Inline Styles
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <div
     style="
@@ -124,12 +124,12 @@ template: (state, settings, { html }) => html`
   >
     ${state.value}
   </div>
-`;
+`,
 ```
 
 ### `<style>` Tag
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <style>
     .panel {
@@ -152,14 +152,14 @@ template: (state, settings, { html }) => html`
     <div class="panel__value">${state.value}</div>
     <div class="panel__label">KPS</div>
   </div>
-`;
+`,
 ```
 
 ## Practical Example
 
 ### Stats Panel
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <style>
     .stats-panel {
@@ -211,5 +211,5 @@ template: (state, settings, { html }) => html`
         `
       : ""}
   </div>
-`;
+`,
 ```
diff --git a/docs/content/en/ui-api/page.mdx b/docs/content/en/ui-api/page.mdx
index 042785e5..e35b7e10 100644
--- a/docs/content/en/ui-api/page.mdx
+++ b/docs/content/en/ui-api/page.mdx
@@ -60,7 +60,7 @@ dmn.ui.contextMenu.addGridMenuItem({
 
 ### Menu Item Options
 
-```javascript
+```javascript fragment=expression
 {
   id: "my-menu",           // Unique ID within plugin
   label: "Menu Item",      // Display text
@@ -191,10 +191,11 @@ Modal dialogs for user interaction.
 
 ### alert
 
-Show simple alert.
+Show simple alert. The returned Promise resolves when the user presses the confirm button or the dialog is dismissed.
 
 ```javascript
 await dmn.ui.dialog.alert("Saved!");
+// Runs after the user confirms
 
 await dmn.ui.dialog.alert("Task complete", { confirmText: "OK" });
 ```
@@ -203,9 +204,18 @@ await dmn.ui.dialog.alert("Task complete", { confirmText: "OK" });
 
 Show confirm/cancel dialog.
 
+Options: `confirmText` (confirm button label), `cancelText` (cancel button label), `danger` (for destructive actions — renders the confirm button in danger colors)
+
 ```javascript
 const ok = await dmn.ui.dialog.confirm("Proceed?");
 if (ok) {
   // Confirm clicked
 }
+
+// Destructive action
+const confirmed = await dmn.ui.dialog.confirm("All data will be deleted.", {
+  danger: true,
+  confirmText: "Delete",
+  cancelText: "Keep",
+});
 ```
diff --git a/docs/content/ko/advanced/page.mdx b/docs/content/ko/advanced/page.mdx
index b7879e49..144e1645 100644
--- a/docs/content/ko/advanced/page.mdx
+++ b/docs/content/ko/advanced/page.mdx
@@ -172,7 +172,7 @@ dmn.plugin.defineElement({
 
 상태가 실제로 변경될 때만 `setState`를 호출하세요:
 
-```javascript
+```javascript fragment=object-members
 onMount: ({ setState, getSettings }) => {
   let lastKps = 0;
 
@@ -186,7 +186,7 @@ onMount: ({ setState, getSettings }) => {
   }, 100);
 
   return () => clearInterval(interval);
-};
+},
 ```
 
 ## 멀티 윈도우 패턴
diff --git a/docs/content/ko/api-reference/i18n/page.mdx b/docs/content/ko/api-reference/i18n/page.mdx
index 54ac1c07..c06bef8d 100644
--- a/docs/content/ko/api-reference/i18n/page.mdx
+++ b/docs/content/ko/api-reference/i18n/page.mdx
@@ -96,7 +96,7 @@ dmn.plugin.defineElement({
 
 메시지 문자열에서 `{{param}}` 형태로 파라미터를 치환할 수 있습니다.
 
-```javascript
+```javascript fragment=object-members
 messages: {
   ko: {
     greeting: "안녕하세요, {{name}}님!",
@@ -106,7 +106,7 @@ messages: {
     greeting: "Hello, {{name}}!",
     keyCount: "Total {{count}} inputs",
   },
-}
+},
 
 // 템플릿에서 사용
 template: (state, settings, { html, t }) => html`
diff --git a/docs/content/ko/api-reference/plugin/page.mdx b/docs/content/ko/api-reference/plugin/page.mdx
index a51f34a9..9cdd454f 100644
--- a/docs/content/ko/api-reference/plugin/page.mdx
+++ b/docs/content/ko/api-reference/plugin/page.mdx
@@ -13,7 +13,7 @@ description: dmn.plugin 네임스페이스 API 레퍼런스
 
 플러그인 언로드 시 호출될 클린업 함수를 등록합니다.
 
-```typescript
+```typescript fragment=signature
 dmn.plugin.registerCleanup(cleanup: () => void): void
 ```
 
@@ -32,7 +32,7 @@ dmn.plugin.registerCleanup(() => {
 
 플러그인별 격리된 스토리지입니다. 자세한 내용은 [스토리지](/docs/storage) 문서를 참고하세요.
 
-```typescript
+```typescript fragment=signature
 dmn.plugin.storage.get<T = any>(key: string): Promise<T | null>
 dmn.plugin.storage.set(key: string, value: any): Promise<void>
 dmn.plugin.storage.remove(key: string): Promise<void>
@@ -46,7 +46,7 @@ dmn.plugin.storage.clearByPrefix(prefix: string): Promise<number>
 
 선언형 UI를 정의합니다. 자세한 내용은 [선언형 API](/docs/declarative-api) 문서를 참고하세요.
 
-```typescript
+```typescript fragment=signature
 dmn.plugin.defineElement(definition: PluginDefinition): void
 ```
 
@@ -54,7 +54,7 @@ dmn.plugin.defineElement(definition: PluginDefinition): void
 
 패널(`defineElement`)과 독립적인 **플러그인 전역 설정**을 정의합니다. 자세한 내용은 [설정 시스템](/docs/settings) 문서를 참고하세요.
 
-```typescript
+```typescript fragment=signature
 dmn.plugin.defineSettings(
   definition: PluginSettingsDefinition
 ): PluginSettingsInstance
@@ -102,6 +102,12 @@ interface PluginDefinition {
     items?: PluginDefinitionContextMenuItem[];
   };
 
+  /**
+   * 메뉴 predicate가 참조할 오버레이 상태 키 (옵트인 저빈도 동기화)
+   * 선언된 키의 setState 변경만 메인 윈도우로 전달됨
+   */
+  contextMenuStateKeys?: string[];
+
   /**
    * 설정 UI 표시 방식
    * @default "panel"
@@ -111,8 +117,8 @@ interface PluginDefinition {
   /** 설정 스키마 */
   settings?: Record<string, PluginSettingSchema>;
 
-  /** 다국어 메시지 */
-  messages?: Record<string, Record<string, string>>;
+  /** 다국어 메시지 (중첩 객체 허용 — PluginMessages) */
+  messages?: Record<string, Record<string, unknown>>;
 
   /** 미리보기 상태 (메인 윈도우용) */
   previewState?: Record<string, any>;
@@ -207,7 +213,7 @@ interface PluginDefinitionHookContext {
 
 인스턴스별로 리사이즈 앵커를 동적으로 변경하거나 조회합니다.
 
-```javascript
+```javascript fragment=object-members
 onMount: ({ setAnchor, getAnchor, getSettings }) => {
   // 현재 앵커 확인
   console.log("현재 앵커:", getAnchor()); // "top-left" (기본값)
@@ -234,18 +240,31 @@ onMount: ({ setAnchor, getAnchor, getSettings }) => {
 설정 스키마 정의 타입입니다.
 
 ```typescript
-interface PluginSettingSchema {
-  type: "boolean" | "color" | "number" | "string" | "select";
-  default: any;
-  label: string;
-  min?: number; // number 타입용
-  max?: number; // number 타입용
-  step?: number; // number 타입용
-  options?: { label: string; value: any }[]; // select 타입용
-  placeholder?: string; // string/number 타입용
-}
+type PluginSettingSchema =
+  | {
+      type: "boolean" | "color" | "number" | "string" | "select";
+      default: string | number | boolean;
+      label: string;
+      min?: number;
+      max?: number;
+      step?: number;
+      options?: { label: string; value: string | number | boolean }[];
+      placeholder?: string;
+      visible?: boolean | ((settings: Record<string, unknown>) => boolean);
+    }
+  | {
+      type: "section";
+      label?: string; // 카드 위 선택적 캡션
+      visible?: boolean | ((settings: Record<string, unknown>) => boolean);
+    };
 ```
 
+값 설정과 section의 union입니다. section 키는 레이아웃 식별자로 저장값·기본값·조회값·
+변경 콜백에 포함되지 않으며, 카드를 시작하고 `visible`로 그룹 전체를 제어합니다.
+패널과 모달은 같은 의미 규칙을 사용하고 visibility 예외는 해당 항목/그룹을 숨기는
+fail-closed 방식으로 처리합니다. 과거의 `divider` 타입은 제거되었습니다 —
+기존 플러그인의 divider 항목은 미지원 타입으로 무시됩니다.
+
 ## 예시
 
 ### 기본 플러그인
diff --git a/docs/content/ko/declarative-api/page.mdx b/docs/content/ko/declarative-api/page.mdx
index 45ca39e9..4cdf77f8 100644
--- a/docs/content/ko/declarative-api/page.mdx
+++ b/docs/content/ko/declarative-api/page.mdx
@@ -91,8 +91,14 @@ dmn.plugin.defineElement({
 
 ### 지원 타입
 
-```javascript
+```javascript fragment=object-members
 settings: {
+  // 카드 섹션 — 새 설정 카드를 시작
+  appearanceSection: {
+    type: "section",
+    label: "모양", // 카드 위 캡션, 선택사항
+  },
+
   // 문자열
   nickname: {
     type: "string",
@@ -118,11 +124,6 @@ settings: {
     label: "그래프 표시",
   },
 
-  // 구분선
-  sectionDivider: {
-    type: "divider",
-  },
-
   // 색상
   textColor: {
     type: "color",
@@ -143,14 +144,24 @@ settings: {
 },
 ```
 
-`type: "divider"`는 설정 UI에 구분선만 추가하며 `default`나 `label`이 필요하지 않습니다.
+`type: "section"`은 새 카드를 시작합니다. section 키는 레이아웃 식별자이므로 저장값,
+기본값, `getSettings()`, 변경 콜백에 포함되지 않습니다. 첫 section 앞의 설정은 암시적
+무제목 카드에 표시되며, `label`이 없어도 카드 경계로 동작합니다.
+
+<Callout type="info">
+  과거의 `type: "divider"`(카드 안 구분선)는 section 도입과 함께 제거되었습니다.
+  기존 플러그인의 divider 항목은 무시되며(크래시 없음), 그룹 구분은 section을
+  사용하세요.
+</Callout>
+
+section은 속성 패널과 `settingsUI: "modal"`에서 동일하게 동작합니다.
 
 ### 조건부 표시 (visible)
 
 설정 항목에 `visible` 속성을 추가하면 다른 설정값에 따라 동적으로 표시/숨김할 수 있습니다.
 `visible`이 없는 설정은 항상 표시됩니다 (기존 동작과 동일).
 
-```javascript
+```javascript fragment=object-members
 settings: {
   // 모드 선택
   showGraph: {
@@ -159,6 +170,12 @@ settings: {
     label: "그래프 표시",
   },
 
+  graphSection: {
+    type: "section",
+    label: "그래프",
+    visible: (settings) => settings.showGraph,
+  },
+
   // 정적 boolean — 항상 숨김
   hiddenOption: {
     type: "number",
@@ -168,10 +185,6 @@ settings: {
   },
 
   // 함수 — 다른 설정값에 따라 동적으로 표시/숨김
-  graphDivider: {
-    type: "divider",
-    visible: (settings) => settings.showGraph,
-  },
   graphColor: {
     type: "color",
     default: "#86EFAC",
@@ -191,15 +204,21 @@ settings: {
   숨겨진 설정의 저장값은 유지됩니다 — 표시만 제어하며 데이터 손실은 없습니다.
 </Callout>
 
+section의 `visible`은 다음 section 전까지의 그룹 전체에 적용됩니다. 숨겨져도 경계는
+유지되므로 인접 그룹이 합쳐지지 않습니다. section 안의 값 설정이 모두 숨겨지면 카드와
+캡션도 함께 숨겨집니다. visibility 함수가 예외를 던지면 해당 항목 또는 section을
+숨기는 fail-closed 방식으로 처리하고 오류를 기록합니다. 패널과 모달의 의미 규칙 및
+빈 상태 동작은 같습니다.
+
 `visible` 시그니처는 컨텍스트 메뉴의 `PluginMenuItem.visible`과 동일한 패턴입니다:
 
-```typescript
+```typescript fragment=type-members
 visible?: boolean | ((settings: Record<string, any>) => boolean);
 ```
 
 ### 설정 접근
 
-```javascript
+```javascript fragment=object-members
 // template에서
 template: (state, settings, { html }) => html`
   <div style="color: ${settings.textColor};">
@@ -258,7 +277,7 @@ dmn.plugin.defineElement({
 dmn.plugin.defineElement({
   name: "Dynamic Anchor Panel",
 
-  onMount: ({ setAnchor, getAnchor }) => {
+  onMount: ({ setAnchor, getAnchor, getSettings }) => {
     // 현재 앵커 확인
     console.log("현재 앵커:", getAnchor()); // "top-left"
 
@@ -361,7 +380,7 @@ dmn.plugin.defineElement({
 
 ### 기본 설정
 
-```javascript
+```javascript fragment=object-members
 contextMenu: {
   create: "패널 생성",     // 그리드 빈 공간 우클릭 시
   delete: "패널 삭제",     // 패널 우클릭 시
@@ -370,7 +389,7 @@ contextMenu: {
 
 ### 커스텀 메뉴 항목
 
-```javascript
+```javascript fragment=object-members
 contextMenu: {
   create: "패널 생성",
   delete: "패널 삭제",
@@ -385,10 +404,10 @@ contextMenu: {
         await actions.exportData();
       },
       // 조건부 표시
-      visible: ({ element }) => element.state.hasData,
+      visible: ({ element }) => !!element.settings.enableExport,
       // 조건부 비활성화
-      disabled: ({ element }) => element.state.isLoading,
-      // 위치 (top 또는 bottom)
+      disabled: ({ element }) => element.settings.exportFormat === "none",
+      // 위치 (top 또는 bottom, 기본값: bottom)
       position: "bottom",
     },
   ],
@@ -403,12 +422,44 @@ onMount: ({ expose, setState }) => {
 },
 ```
 
+`position: "top"` 항목은 기본 메뉴 항목 위에, 나머지는 아래에 표시됩니다.
+
+<Callout type="info">
+  메뉴 predicate는 메인 윈도우에서 `{ element, actions }`로 평가됩니다.
+  오버레이에서 `setState`로 갱신한 런타임 상태는 기본적으로 이 컨텍스트에
+  동기화되지 않으며, `element.state`는 메인 윈도우 상태(`previewState`로
+  초기화)를 반영합니다. 오버레이 상태 기반 조건이 필요하면
+  `contextMenuStateKeys`에 키를 선언하세요.
+</Callout>
+
+### predicate에서 오버레이 상태 사용 (contextMenuStateKeys)
+
+메뉴 predicate가 참조할 오버레이 상태 키를 선언합니다. 선언된 키만
+(`setState` 변경 시) 메인 윈도우로 미러링되어 predicate 평가 시
+`element.state`에 병합됩니다. 고빈도 상태는 선언하지 않는 한 절대 전송되지
+않고, 메인 윈도우의 프리뷰 상태도 변하지 않습니다.
+
+```javascript fragment=object-members
+// 메뉴 predicate용으로 active만 미러링
+contextMenuStateKeys: ["active"],
+
+contextMenu: {
+  items: [
+    {
+      label: "캡처 중지",
+      action: "stopCapture",
+      visible: ({ element }) => !!element.state?.active,
+    },
+  ],
+},
+```
+
 ## 템플릿 (template)
 
 템플릿 함수는 `state`와 `settings`를 받아 UI를 반환합니다.
 자세한 문법은 [템플릿 문법](/docs/template-syntax) 문서를 참고하세요.
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html, t, locale }) => html`
   <div style="color: ${settings.textColor};">
     <strong>${state.value}</strong>
@@ -432,7 +483,7 @@ template: (state, settings, { html, t, locale }) => html`
 메인 윈도우에서 보여줄 미리보기용 초기 상태입니다.
 실제 로직은 오버레이에서만 실행되므로, 메인에서는 이 상태가 표시됩니다.
 
-```javascript
+```javascript fragment=object-members
 previewState: {
   kps: 12,
   history: [5, 8, 12, 10, 15],
@@ -445,7 +496,7 @@ previewState: {
 
 ### Context 객체
 
-```javascript
+```javascript fragment=object-members
 onMount: (context) => {
   const {
     setState,         // 상태 업데이트
@@ -467,7 +518,7 @@ onMount: (context) => {
 
 ### 이벤트 훅 (onHook)
 
-```javascript
+```javascript fragment=object-members
 onMount: ({ onHook, setState }) => {
   // 매핑된 키 이벤트
   onHook("key", ({ key, state, mode }) => {
@@ -493,7 +544,7 @@ onMount: ({ onHook, setState }) => {
   사용하세요.
 </Callout>
 
-```javascript
+```javascript fragment=object-members
 onMount: ({ setState, getSettings, onSettingsChange }) => {
   const fetchData = async (nickname) => {
     const response = await fetch(`/api/user/${nickname}`);
@@ -574,7 +625,6 @@ dmn.plugin.defineElement({
   settings: {
     showGraph: { type: "boolean", default: true, label: "그래프 표시" },
     textColor: { type: "color", default: "#FFFFFF", label: "텍스트 색상" },
-    graphDivider: { type: "divider", visible: (s) => s.showGraph },
     graphColor: {
       type: "color",
       default: "#86EFAC",
diff --git a/docs/content/ko/guide/installation/page.mdx b/docs/content/ko/guide/installation/page.mdx
index 96e19e95..e4d77302 100644
--- a/docs/content/ko/guide/installation/page.mdx
+++ b/docs/content/ko/guide/installation/page.mdx
@@ -39,7 +39,7 @@ DM Note는 GitHub Releases에서 다운로드할 수 있습니다.
 
 프로그램 설정은 다음 경로에 자동으로 저장됩니다.
 
-```
+```text
 %appdata%/com.dmnote.desktop/store.json
 ```
 
diff --git a/docs/content/ko/guide/tips/page.mdx b/docs/content/ko/guide/tips/page.mdx
index a66eee6e..c287aa47 100644
--- a/docs/content/ko/guide/tips/page.mdx
+++ b/docs/content/ko/guide/tips/page.mdx
@@ -103,7 +103,7 @@ OBS Studio에서 크로마키 없이 투명 배경을 유지하려면:
 
 중요한 설정은 정기적으로 백업하세요:
 
-```
+```text
 %appdata%/com.dmnote.desktop/
 ```
 
diff --git a/docs/content/ko/settings/page.mdx b/docs/content/ko/settings/page.mdx
index 04bc1e34..c53c73ea 100644
--- a/docs/content/ko/settings/page.mdx
+++ b/docs/content/ko/settings/page.mdx
@@ -22,6 +22,10 @@ description: defineSettings를 사용한 플러그인 설정 관리
 
 const pluginSettings = dmn.plugin.defineSettings({
   settings: {
+    connectionSection: {
+      type: "section",
+      label: "연결",
+    },
     apiKey: {
       type: "string",
       default: "",
@@ -36,27 +40,26 @@ const pluginSettings = dmn.plugin.defineSettings({
       default: "dark",
       label: "테마",
     },
-    sectionDivider: {
-      type: "divider",
+    behaviorSection: {
+      type: "section",
+      label: "동작",
     },
     enabled: {
       type: "boolean",
       default: true,
       label: "활성화",
     },
+    // 조건부 표시 — 정적 boolean 또는 함수, enabled가 true일 때만 표시
+    advancedOption: {
+      type: "number",
+      default: 5,
+      label: "고급 옵션",
+      visible: (settings) => settings.enabled,
+    },
   },
 });
 
-`type: "divider"`는 설정 패널/모달에 구분선만 추가합니다.
-
-// 조건부 표시 — visible 속성으로 다른 설정값에 따라 동적으로 항목 표시/숨김
-// 정적 boolean 또는 함수 모두 지원
-advancedOption: {
-  type: "number",
-  default: 5,
-  label: "고급 옵션",
-  visible: (settings) => settings.enabled,  // enabled가 true일 때만 표시
-},
+// section은 새 카드를 시작합니다. (과거의 divider 타입은 제거됨 — 기존 플러그인의 divider는 무시)
 
 // 설정값 조회
 const current = pluginSettings.get();
@@ -72,6 +75,13 @@ if (confirmed) {
 }
 ```
 
+`defineSettings`는 `defineElement`와 같은 section 계약을 사용합니다. section은 새 카드를
+시작하고 선택적 label은 카드 위에 표시되며, section 키는 저장값·기본값·콜백에서
+제외됩니다. `section.visible`은 그룹 전체를 제어합니다. 렌더 가능한 값 설정이 없는
+section은 카드째 숨겨지고, 전체에 렌더 가능한 값 설정이 하나도 없을 때만 표준 빈
+상태를 표시합니다. 패널과 모달은 visibility 예외의 fail-closed 처리까지 같은 의미로
+동작합니다.
+
 ## API 레퍼런스
 
 ### defineSettings(definition)
@@ -115,7 +125,7 @@ interface PluginSettingsDefinition {
 
 ```javascript
 const settings = dmn.plugin.defineSettings({
-  settings: { apiKey: { type: "string", default: "" } },
+  settings: { apiKey: { type: "string", default: "", label: "API Key" } },
 
   // onChange: 항상 실행 (해제 불가)
   onChange: (newSettings, oldSettings) => {
@@ -205,7 +215,6 @@ dmn.plugin.defineElement({
   // 인스턴스별 설정
   settings: {
     showGraph: { type: "boolean", default: true, label: "그래프 표시" },
-    graphDivider: { type: "divider", visible: (s) => s.showGraph },
     graphColor: {
       type: "color",
       default: "#86EFAC",
@@ -314,6 +323,7 @@ function startFetching() {
 // 설정 변경 시 인터벌 재시작
 fetcherSettings.subscribe((newSettings, oldSettings) => {
   if (
+    newSettings.apiEndpoint !== oldSettings.apiEndpoint ||
     newSettings.refreshInterval !== oldSettings.refreshInterval ||
     newSettings.autoRefresh !== oldSettings.autoRefresh
   ) {
diff --git a/docs/content/ko/template-syntax/page.mdx b/docs/content/ko/template-syntax/page.mdx
index 2b3fd2bf..beafe24e 100644
--- a/docs/content/ko/template-syntax/page.mdx
+++ b/docs/content/ko/template-syntax/page.mdx
@@ -12,11 +12,11 @@ DM Note는 **htm** 라이브러리를 사용하여 템플릿을 React Element로
 
 ### 값 보간
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <div>현재 값: ${state.value}</div>
   <div style="color: ${settings.color};">색상 텍스트</div>
-`;
+`,
 ```
 
 <Callout type="warning">
@@ -110,7 +110,7 @@ html`
 
 ### 인라인 스타일
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <div
     style="
@@ -122,12 +122,12 @@ template: (state, settings, { html }) => html`
   >
     ${state.value}
   </div>
-`;
+`,
 ```
 
 ### `<style>` 태그
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <style>
     .panel {
@@ -150,14 +150,14 @@ template: (state, settings, { html }) => html`
     <div class="panel__value">${state.value}</div>
     <div class="panel__label">KPS</div>
   </div>
-`;
+`,
 ```
 
 ## 실전 예제
 
 ### 통계 패널
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html }) => html`
   <style>
     .stats-panel {
@@ -214,19 +214,19 @@ template: (state, settings, { html }) => html`
         `
       : ""}
   </div>
-`;
+`,
 ```
 
 ### 다국어 패널
 
-```javascript
+```javascript fragment=object-members
 template: (state, settings, { html, t, locale }) => html`
   <div class="panel" data-locale="${locale}">
     <h3>${t("title")}</h3>
     <p>${t("description")}</p>
     <div class="value">${t("count")}: ${state.count}</div>
   </div>
-`;
+`,
 ```
 
 ## 주의사항
diff --git a/docs/content/ko/ui-api/page.mdx b/docs/content/ko/ui-api/page.mdx
index 7dfbbeba..0eff30c9 100644
--- a/docs/content/ko/ui-api/page.mdx
+++ b/docs/content/ko/ui-api/page.mdx
@@ -60,7 +60,7 @@ dmn.ui.contextMenu.addGridMenuItem({
 
 ### 메뉴 항목 옵션
 
-```javascript
+```javascript fragment=expression
 {
   id: "my-menu",           // 플러그인 내 고유 ID
   label: "메뉴 항목",       // 표시 텍스트
@@ -232,10 +232,11 @@ dmn.plugin.registerCleanup(() => {
 
 ### alert
 
-간단한 알림을 표시합니다.
+간단한 알림을 표시합니다. 반환된 Promise는 사용자가 확인 버튼을 누르거나 다이얼로그가 닫힐 때 resolve됩니다.
 
 ```javascript
 await dmn.ui.dialog.alert("저장되었습니다!");
+// 사용자가 확인을 누른 뒤에 이어서 실행됨
 
 await dmn.ui.dialog.alert("작업 완료", { confirmText: "OK" });
 ```
@@ -244,6 +245,8 @@ await dmn.ui.dialog.alert("작업 완료", { confirmText: "OK" });
 
 확인/취소 다이얼로그를 표시합니다.
 
+옵션: `confirmText`(확인 버튼 문구), `cancelText`(취소 버튼 문구), `danger`(파괴적 작업용 — 확인 버튼이 위험 색상으로 표시)
+
 ```javascript
 const ok = await dmn.ui.dialog.confirm("진행하시겠습니까?");
 if (ok) {
@@ -254,6 +257,7 @@ if (ok) {
 const confirmed = await dmn.ui.dialog.confirm("모든 데이터가 삭제됩니다.", {
   danger: true,
   confirmText: "삭제",
+  cancelText: "유지",
 });
 ```
 

From f58e728353300c53d0e67a3914fb991cb735941a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 05:19:23 +0900
Subject: [PATCH 16/17] =?UTF-8?q?test:=20=EB=AC=B8=EC=84=9C=20=EC=BD=94?=
 =?UTF-8?q?=EB=93=9C=20=EB=B8=94=EB=A1=9D=20=EA=B5=AC=EB=AC=B8=20=EA=B2=80?=
 =?UTF-8?q?=EC=82=AC=20=EB=8F=84=EC=9E=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- docs/content 전체 MDX 펜스를 TypeScript/postcss로 구문 검사 (74페이지 472블록)
- 발췌 블록은 fragment= 메타 종류별 결정적 래핑 — 객체 멤버 발췌가 라벨 문장으로
  오인돼 통과하는 미탐 차단, 시그니처 표기는 타입 멤버 변환으로 검사
- npm run test:docs 스크립트 추가
---
 package.json                   |   1 +
 tests/docs-code-blocks.test.ts |  40 ++++++++
 tests/helpers/dumpFailures.ts  |  26 ++++++
 tests/helpers/mdxCodeFences.ts | 163 +++++++++++++++++++++++++++++++++
 vitest.config.ts               |   2 +-
 5 files changed, 231 insertions(+), 1 deletion(-)
 create mode 100644 tests/docs-code-blocks.test.ts
 create mode 100644 tests/helpers/dumpFailures.ts
 create mode 100644 tests/helpers/mdxCodeFences.ts

diff --git a/package.json b/package.json
index e3d9cb10..061429c6 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "sync-version": "node scripts/sync-version.js",
     "version": "npm run sync-version && git add src-tauri/tauri.conf.json src-tauri/Cargo.toml README.md docs/readme_en.md docs/readme_zh-cn.md",
     "test": "vitest run",
+    "test:docs": "vitest run tests/docs-code-blocks.test.ts",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
     "contributors:add": "all-contributors add",
diff --git a/tests/docs-code-blocks.test.ts b/tests/docs-code-blocks.test.ts
new file mode 100644
index 00000000..b126cf0e
--- /dev/null
+++ b/tests/docs-code-blocks.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { checkFence, extractMdxCodeFences } from './helpers/mdxCodeFences';
+
+// docs/content 전체 MDX 코드 펜스 구문 검사 —
+// 문서 예제의 구문 오류는 빌드·타입체크로 잡히지 않으므로 여기서 잡는다
+
+const DOCS_ROOT = join(__dirname, '..', 'docs', 'content');
+
+const collectPageFiles = (dir: string): string[] => {
+  const entries = readdirSync(dir, { withFileTypes: true });
+  return entries.flatMap((entry) => {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) return collectPageFiles(fullPath);
+    return entry.name.endsWith('.mdx') ? [fullPath] : [];
+  });
+};
+
+const pageFiles = collectPageFiles(DOCS_ROOT);
+
+describe('docs code blocks', () => {
+  it('MDX 페이지를 찾는다', () => {
+    expect(pageFiles.length).toBeGreaterThan(0);
+  });
+
+  for (const filePath of pageFiles) {
+    const relPath = relative(join(__dirname, '..'), filePath);
+
+    it(relPath, () => {
+      const fences = extractMdxCodeFences(readFileSync(filePath, 'utf8'));
+      const failures = fences
+        .map((fence) => checkFence(fence))
+        .filter((failure) => failure !== null)
+        .map((failure) => `L${failure.line} [${failure.lang}] ${failure.message}`);
+
+      expect(failures).toEqual([]);
+    });
+  }
+});
diff --git a/tests/helpers/dumpFailures.ts b/tests/helpers/dumpFailures.ts
new file mode 100644
index 00000000..ff4041d8
--- /dev/null
+++ b/tests/helpers/dumpFailures.ts
@@ -0,0 +1,26 @@
+// 개발 보조 — 전체 실패 목록 덤프 (npx vite-node tests/helpers/dumpFailures.ts)
+import { readdirSync, readFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { checkFence, extractMdxCodeFences } from './mdxCodeFences';
+
+const root = join(__dirname, '..', '..');
+const docsRoot = join(root, 'docs', 'content');
+
+const collect = (dir: string): string[] =>
+  readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) return collect(fullPath);
+    return entry.name.endsWith('.mdx') ? [fullPath] : [];
+  });
+
+for (const file of collect(docsRoot)) {
+  const fences = extractMdxCodeFences(readFileSync(file, 'utf8'));
+  for (const fence of fences) {
+    const failure = checkFence(fence);
+    if (failure) {
+      console.log(
+        `${relative(root, file)}:${failure.line} [${failure.lang}] ${failure.message}`,
+      );
+    }
+  }
+}
diff --git a/tests/helpers/mdxCodeFences.ts b/tests/helpers/mdxCodeFences.ts
new file mode 100644
index 00000000..a5c7dc14
--- /dev/null
+++ b/tests/helpers/mdxCodeFences.ts
@@ -0,0 +1,163 @@
+import ts from 'typescript';
+import postcss from 'postcss';
+
+// 문서 코드 펜스 구문 검사 헬퍼
+// 프래그먼트는 펜스 메타(```javascript fragment=object-members)로 표시 —
+// CommonMark info string은 렌더링되지 않으므로 독자에게 노출되지 않음
+
+export type FragmentKind =
+  | 'object-members'
+  | 'expression'
+  | 'type-members'
+  | 'signature';
+
+export interface MdxCodeFence {
+  lang: string;
+  fragment: FragmentKind | null;
+  code: string;
+  /** 펜스 여는 줄의 1-기반 라인 번호 */
+  startLine: number;
+}
+
+const FRAGMENT_KINDS: ReadonlySet<string> = new Set([
+  'object-members',
+  'expression',
+  'type-members',
+  'signature',
+]);
+
+export const extractMdxCodeFences = (content: string): MdxCodeFence[] => {
+  const fences: MdxCodeFence[] = [];
+  const lines = content.split('\n');
+
+  let open: { lang: string; fragment: FragmentKind | null; start: number } | null =
+    null;
+  let buffer: string[] = [];
+
+  for (let i = 0; i < lines.length; i += 1) {
+    const line = lines[i];
+    const match = line.match(/^\s*```(\S*)\s*(.*)$/);
+
+    if (!open) {
+      if (match) {
+        const meta = match[2].trim();
+        const fragmentMatch = meta.match(/(?:^|\s)fragment=(\S+)/);
+        const fragment = fragmentMatch ? fragmentMatch[1] : null;
+        if (fragment && !FRAGMENT_KINDS.has(fragment)) {
+          throw new Error(
+            `Unknown fragment kind "${fragment}" at line ${i + 1}`,
+          );
+        }
+        open = {
+          lang: match[1],
+          fragment: (fragment as FragmentKind) ?? null,
+          start: i + 1,
+        };
+        buffer = [];
+      }
+      continue;
+    }
+
+    // 닫는 펜스 — 언어 태그 없는 ``` 만 인정
+    if (match && match[1] === '' && match[2] === '') {
+      fences.push({
+        lang: open.lang,
+        fragment: open.fragment,
+        code: buffer.join('\n'),
+        startLine: open.start,
+      });
+      open = null;
+      continue;
+    }
+
+    buffer.push(line);
+  }
+
+  if (open) {
+    throw new Error(`Unclosed code fence at line ${open.start}`);
+  }
+
+  return fences;
+};
+
+// 프래그먼트를 종류별 고정 컨텍스트로 래핑 — 여러 래핑을 시도하지 않고
+// 결정적으로 검사해 라벨 문장 오인(template: ...) 같은 미탐을 방지
+export const wrapFragment = (kind: FragmentKind, code: string): string => {
+  switch (kind) {
+    case 'object-members':
+      return `const __docFragment = ({\n${code}\n});`;
+    case 'expression':
+      return `const __docFragment = (\n${code}\n);`;
+    case 'type-members':
+      return `type __DocFragment = {\n${code}\n};`;
+    case 'signature': {
+      // dmn.plugin.defineSettings(...): R 표기를 타입 멤버로 변환해 검사
+      // 제네릭 시그니처(storage.get<T>(...)) 포함
+      const quoted = code.replace(
+        /^([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)+)(<[^>\n]*>)?\(/gm,
+        '"$1"$2(',
+      );
+      return `type __DocSignature = {\n${quoted}\n};`;
+    }
+  }
+};
+
+export interface FenceCheckFailure {
+  line: number;
+  lang: string;
+  message: string;
+}
+
+const SKIPPED_LANGS: ReadonlySet<string> = new Set(['text', 'bash', 'json']);
+
+export const checkFence = (fence: MdxCodeFence): FenceCheckFailure | null => {
+  const { lang, fragment, code, startLine } = fence;
+
+  if (SKIPPED_LANGS.has(lang)) return null;
+
+  if (lang === 'css') {
+    try {
+      postcss.parse(code);
+      return null;
+    } catch (error) {
+      return {
+        line: startLine,
+        lang,
+        message: `CSS parse error: ${(error as Error).message}`,
+      };
+    }
+  }
+
+  if (lang === 'javascript' || lang === 'typescript') {
+    const source = fragment ? wrapFragment(fragment, code) : code;
+    const fileName = lang === 'typescript' ? 'block.ts' : 'block.js';
+    const result = ts.transpileModule(source, {
+      fileName,
+      reportDiagnostics: true,
+      compilerOptions: {
+        allowJs: true,
+        target: ts.ScriptTarget.ES2022,
+        module: ts.ModuleKind.ESNext,
+      },
+    });
+    const syntactic = (result.diagnostics ?? []).filter(
+      (d) => d.category === ts.DiagnosticCategory.Error,
+    );
+    if (syntactic.length === 0) return null;
+
+    const first = syntactic[0];
+    const detail = ts.flattenDiagnosticMessageText(first.messageText, ' ');
+    return {
+      line: startLine,
+      lang,
+      message: `${fragment ? `[fragment=${fragment}] ` : ''}${detail}`,
+    };
+  }
+
+  // 알 수 없는 언어 태그는 조용히 넘기지 않음 — 검사 사각지대 방지
+  return {
+    line: startLine,
+    lang: lang || '(untagged)',
+    message: `Unknown or missing fence language tag "${lang}". Tag it (javascript/typescript/css) or use "text".`,
+  };
+};
diff --git a/vitest.config.ts b/vitest.config.ts
index 7b9c563b..ae15a18a 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -26,6 +26,6 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./src/renderer/__tests__/setup.ts'],
-    include: ['src/**/*.test.{ts,tsx}'],
+    include: ['src/**/*.test.{ts,tsx}', 'tests/**/*.test.ts'],
   },
 });

From 11755f19897ee0a328e9e3d5114ff60b76111862 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=B0=EC=9A=B0?= <yeonu@eunyeon.com>
Date: Sun, 12 Jul 2026 14:36:18 +0900
Subject: [PATCH 17/17] =?UTF-8?q?refactor:=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B9=B4=EB=93=9C=C2=B7=ED=96=89?=
 =?UTF-8?q?=EC=9D=84=20=EA=B3=B5=EC=9A=A9=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=ED=86=B5=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- cardRecipes에 comfortable 밀도 상수 추가 (카드 px-16, 행 min-h-40)
  — 패널·다이얼로그·플러그인 표면의 compact 규격과 분리 유지
- SettingCard/SettingRow 신설: 설정 전용 밀도를 컴포넌트에 고정하고
  높이·패딩 오버라이드 경로를 두지 않아 규격 표류 방지
- Settings.tsx 카드 5개·행 19개를 컴포넌트 소비로 전환, 행 높이는
  고정 h-40에서 min-h-40으로 바꿔 긴 라벨에서 잘림 대신 확장
- 미사용 laboratory 상태 참조와 토글 핸들러 제거
---
 src/renderer/components/main/Settings.tsx     | 377 ++++++++----------
 .../components/main/common/SettingRow.tsx     |  59 +++
 src/renderer/utils/cardRecipes.ts             |   8 +
 3 files changed, 228 insertions(+), 216 deletions(-)
 create mode 100644 src/renderer/components/main/common/SettingRow.tsx

diff --git a/src/renderer/components/main/Settings.tsx b/src/renderer/components/main/Settings.tsx
index 45729d7d..4aabd46d 100644
--- a/src/renderer/components/main/Settings.tsx
+++ b/src/renderer/components/main/Settings.tsx
@@ -6,6 +6,7 @@ import { useKeyStore } from '@stores/data/useKeyStore';
 import { useGridSelectionStore } from '@stores/grid/useGridSelectionStore';
 import Checkbox from '@components/main/common/Checkbox';
 import Dropdown from '@components/main/common/Dropdown';
+import { SettingCard, SettingRow } from '@components/main/common/SettingRow';
 import FlaskIcon from '@assets/svgs/flask.svg';
 import ResetIcon from '@assets/svgs/reset.svg';
 import { PluginManagerModal } from '@components/main/Modal/content/managers/PluginManagerModal';
@@ -117,8 +118,6 @@ const Settings = ({
     setAngleMode,
     noteEffect,
     setNoteEffect,
-    laboratoryEnabled,
-    setLaboratoryEnabled,
     trayEnabled,
     setTrayEnabled,
     autoUpdateEnabled,
@@ -638,16 +637,6 @@ const Settings = ({
     }
   };
 
-  const _handleLaboratoryToggle = async (): Promise<void> => {
-    const next: boolean = !laboratoryEnabled;
-    setLaboratoryEnabled(next);
-    try {
-      await window.api.settings.update({ laboratoryEnabled: next });
-    } catch (error) {
-      console.error('Failed to toggle laboratory mode', error);
-    }
-  };
-
   const handleTrayToggle = async (): Promise<void> => {
     const next: boolean = !trayEnabled;
     setTrayEnabled(next);
@@ -823,95 +812,62 @@ const Settings = ({
         <div className="flex flex-row gap-[12px]">
           <div className="flex flex-col gap-[12px] w-[348px]">
             {/* 키뷰어 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+            <SettingCard>
+              <SettingRow
+                label={t('settings.overlayLock')}
+                onClick={handleOverlayLockChange}
                 onMouseEnter={() => setHoveredKey('overlayLock')}
                 onMouseLeave={() => setHoveredKey(null)}
-                onClick={handleOverlayLockChange}
               >
-                <p className="text-label text-fg">
-                  {t('settings.overlayLock')}
-                </p>
                 <Checkbox
                   checked={overlayLocked}
                   onChange={handleOverlayLockChange}
                 />
-              </div>
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+              </SettingRow>
+              <SettingRow
+                label={t('settings.alwaysOnTop')}
+                onClick={handleAlwaysOnTopChange}
                 onMouseEnter={() => setHoveredKey('alwaysOnTop')}
                 onMouseLeave={() => setHoveredKey(null)}
-                onClick={handleAlwaysOnTopChange}
               >
-                <p className="text-label text-fg">
-                  {t('settings.alwaysOnTop')}
-                </p>
                 <Checkbox
                   checked={alwaysOnTop}
                   onChange={handleAlwaysOnTopChange}
                 />
-              </div>
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+              </SettingRow>
+              <SettingRow
+                label={t('settings.noteEffect')}
+                onClick={handleNoteEffectChange}
                 onMouseEnter={() => setHoveredKey('noteEffect')}
                 onMouseLeave={() => setHoveredKey(null)}
-                onClick={handleNoteEffectChange}
               >
-                <p className="text-label text-fg">{t('settings.noteEffect')}</p>
                 <Checkbox
                   checked={noteEffect}
                   onChange={handleNoteEffectChange}
                 />
-              </div>
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
-                onMouseEnter={() => setHoveredKey('keyCounter')}
-                onMouseLeave={() => setHoveredKey(null)}
+              </SettingRow>
+              <SettingRow
+                label={t('settings.keyCounter')}
                 onClick={handleKeyCounterToggle}
-              >
-                <p className="text-label text-fg">{t('settings.keyCounter')}</p>
-                <div className="flex items-center gap-[8px]">
-                  <Checkbox
-                    checked={keyCounterEnabled}
-                    onChange={handleKeyCounterToggle}
-                  />
-                </div>
-              </div>
-              {/*
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
-                onMouseEnter={() => setHoveredKey("laboratory")}
+                onMouseEnter={() => setHoveredKey('keyCounter')}
                 onMouseLeave={() => setHoveredKey(null)}
-                onClick={handleLaboratoryToggle}
               >
-                <p className="text-label text-fg">
-                  {t("settings.laboratory")}
-                </p>
                 <Checkbox
-                  checked={laboratoryEnabled}
-                  onChange={handleLaboratoryToggle}
+                  checked={keyCounterEnabled}
+                  onChange={handleKeyCounterToggle}
                 />
-              </div>
-              */}
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+              </SettingRow>
+              <SettingRow
+                label={t('settings.trayEnabled')}
                 onClick={handleTrayToggle}
               >
-                <p className="text-label text-fg">
-                  {t('settings.trayEnabled')}
-                </p>
                 <Checkbox checked={trayEnabled} onChange={handleTrayToggle} />
-              </div>
-              {null}
-              <div
-                className="flex flex-row justify-between items-center h-[40px]"
+              </SettingRow>
+              <SettingRow
+                label={t('settings.resizeAnchor')}
                 onMouseEnter={() => setHoveredKey('resizeAnchor')}
                 onMouseLeave={() => setHoveredKey(null)}
               >
-                <p className="text-label text-fg">
-                  {t('settings.resizeAnchor')}
-                </p>
                 <Dropdown
                   options={RESIZE_ANCHOR_OPTIONS.map((opt) => ({
                     value: opt.value,
@@ -929,38 +885,37 @@ const Settings = ({
                   placeholder={t('settings.selectAnchor')}
                   align="right"
                 />
-              </div>
-            </div>
+              </SettingRow>
+            </SettingCard>
             {/* 커스텀 CSS & JS 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
+            <SettingCard>
               <div
-                className="flex flex-col gap-[0px]"
                 onMouseEnter={() => setHoveredKey('customCSS')}
                 onMouseLeave={() => setHoveredKey(null)}
               >
-                <div
-                  className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+                <SettingRow
+                  label={t('settings.customCSS')}
                   onClick={handleToggleCustomCSS}
                 >
-                  <p className="text-label text-fg">
-                    {t('settings.customCSS')}
-                  </p>
                   <Checkbox
                     checked={useCustomCSS}
                     onChange={handleToggleCustomCSS}
                   />
-                </div>
-                <div className="flex flex-row justify-between items-center h-[40px]">
-                  <p
-                    className={
-                      'text-body truncate max-w-[150px] ' +
-                      (useCustomCSS ? 'text-fg-muted' : 'text-fg-disabled')
-                    }
-                  >
-                    {customCSSPath && customCSSPath.length > 0
-                      ? customCSSPath
-                      : t('settings.noCssFile')}
-                  </p>
+                </SettingRow>
+                <SettingRow
+                  label={
+                    <p
+                      className={
+                        'text-body truncate max-w-[150px] ' +
+                        (useCustomCSS ? 'text-fg-muted' : 'text-fg-disabled')
+                      }
+                    >
+                      {customCSSPath && customCSSPath.length > 0
+                        ? customCSSPath
+                        : t('settings.noCssFile')}
+                    </p>
+                  }
+                >
                   <button
                     onClick={handleLoadCustomCSS}
                     disabled={!useCustomCSS}
@@ -968,32 +923,33 @@ const Settings = ({
                   >
                     {t('settings.loadCss')}
                   </button>
-                </div>
+                </SettingRow>
               </div>
               <div
-                className="flex flex-col gap-[0px]"
                 onMouseEnter={() => setHoveredKey('customJS')}
                 onMouseLeave={() => setHoveredKey(null)}
               >
-                <div
-                  className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+                <SettingRow
+                  label={t('settings.customJS')}
                   onClick={handleToggleCustomJS}
                 >
-                  <p className="text-label text-fg">{t('settings.customJS')}</p>
                   <Checkbox
                     checked={useCustomJS}
                     onChange={handleToggleCustomJS}
                   />
-                </div>
-                <div className="flex flex-row justify-between items-center h-[40px]">
-                  <p
-                    className={
-                      'text-body truncate max-w-[150px] ' +
-                      (useCustomJS ? 'text-fg-muted' : 'text-fg-disabled')
-                    }
-                  >
-                    {t('settings.pluginManageLabel')}
-                  </p>
+                </SettingRow>
+                <SettingRow
+                  label={
+                    <p
+                      className={
+                        'text-body truncate max-w-[150px] ' +
+                        (useCustomJS ? 'text-fg-muted' : 'text-fg-disabled')
+                      }
+                    >
+                      {t('settings.pluginManageLabel')}
+                    </p>
+                  }
+                >
                   <div className="flex flex-row gap-[6px]">
                     <button
                       onClick={handleReloadPlugins}
@@ -1020,41 +976,42 @@ const Settings = ({
                       {t('settings.managePlugins')}
                     </button>
                   </div>
-                </div>
+                </SettingRow>
               </div>
-            </div>
+            </SettingCard>
             {/* OBS 모드 */}
-            <div
-              className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface"
+            <SettingCard
               onMouseEnter={() => setHoveredKey('obsMode')}
               onMouseLeave={() => setHoveredKey(null)}
             >
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+              <SettingRow
+                label={t('settings.obsMode')}
                 onClick={handleObsToggle}
               >
-                <p className="text-label text-fg">{t('settings.obsMode')}</p>
                 <Checkbox
                   checked={obsStatus.running}
                   onChange={handleObsToggle}
                 />
-              </div>
-              <div className="flex flex-row justify-between items-center h-[40px]">
-                <p
-                  className={
-                    'text-body ' +
-                    (obsStatus.running ? 'text-fg-muted' : 'text-fg-disabled')
-                  }
-                >
-                  {obsStatus.running
-                    ? obsStatus.clientCount > 0
-                      ? `${t('settings.obsRunning')} · ${t(
-                          'settings.obsClients',
-                          { count: obsStatus.clientCount },
-                        )}`
-                      : t('settings.obsRunning')
-                    : t('settings.obsStopped')}
-                </p>
+              </SettingRow>
+              <SettingRow
+                label={
+                  <p
+                    className={
+                      'text-body ' +
+                      (obsStatus.running ? 'text-fg-muted' : 'text-fg-disabled')
+                    }
+                  >
+                    {obsStatus.running
+                      ? obsStatus.clientCount > 0
+                        ? `${t('settings.obsRunning')} · ${t(
+                            'settings.obsClients',
+                            { count: obsStatus.clientCount },
+                          )}`
+                        : t('settings.obsRunning')
+                      : t('settings.obsStopped')}
+                  </p>
+                }
+              >
                 <div className="flex items-center gap-[6px]">
                   <button
                     onClick={handleObsRegenerateToken}
@@ -1076,71 +1033,70 @@ const Settings = ({
                     {t('settings.obsCopyUrl')}
                   </button>
                 </div>
-              </div>
-            </div>
+              </SettingRow>
+            </SettingCard>
             {/* 키음 출력 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
-              <div
-                className="flex flex-row justify-between items-center h-[40px]"
+            <SettingCard>
+              <SettingRow
+                label={
+                  <p className="text-label text-fg flex-1 min-w-0 truncate pr-[10px]">
+                    {t('settings.keySoundOutput') || '키 사운드 출력'}
+                  </p>
+                }
                 onMouseEnter={() => setHoveredKey('keySoundOutput')}
                 onMouseLeave={() => setHoveredKey(null)}
               >
-                <p className="text-label text-fg flex-1 min-w-0 truncate pr-[10px]">
-                  {t('settings.keySoundOutput') || '키 사운드 출력'}
-                </p>
-                <div className="shrink-0">
-                  <Dropdown
-                    options={[
-                      {
-                        value: 'defaultDevice',
-                        label:
-                          t('settings.keySoundOutputDefault') ||
-                          '기본 재생 장치',
-                      },
-                      ...visibleAsioDrivers.map((name) => {
-                        // 선택한 ASIO가 열기 실패하면 라벨에 ⚠ + 사유 표시 (인라인 경고 대신)
-                        const failed =
-                          name === requestedAsioDriver && !!keySoundOutputError;
-                        return {
-                          value: `asio:${name}`,
-                          // 드라이버 이름이 길면 …로 축약 (기본 항목 라벨은 안 잘리게 max-w 여유, ASIO만 축약)
-                          label: failed
-                            ? `⚠ ${keySoundOutputError}`
-                            : `ASIO: ${
-                                name.length > 16
-                                  ? `${name.slice(0, 16)}…`
-                                  : name
-                              }`,
-                        };
-                      }),
-                    ]}
-                    value={
-                      keySoundOutput?.requested.kind === 'asio'
-                        ? `asio:${keySoundOutput.requested.driverName}`
-                        : 'defaultDevice'
-                    }
-                    onChange={handleKeySoundOutputChange}
-                    placeholder={
-                      t('settings.keySoundOutputDefault') || '기본 재생 장치'
-                    }
-                    align="right"
-                    widthClass="max-w-[160px]"
-                    disabled={
-                      asioDriversLoaded && visibleAsioDrivers.length === 0
-                    }
-                  />
-                </div>
-              </div>
-              <div className="flex flex-row justify-between items-center h-[40px]">
-                <p
-                  className={`text-label ${
+                <Dropdown
+                  options={[
+                    {
+                      value: 'defaultDevice',
+                      label:
+                        t('settings.keySoundOutputDefault') || '기본 재생 장치',
+                    },
+                    ...visibleAsioDrivers.map((name) => {
+                      // 선택한 ASIO가 열기 실패하면 라벨에 ⚠ + 사유 표시 (인라인 경고 대신)
+                      const failed =
+                        name === requestedAsioDriver && !!keySoundOutputError;
+                      return {
+                        value: `asio:${name}`,
+                        // 드라이버 이름이 길면 …로 축약 (기본 항목 라벨은 안 잘리게 max-w 여유, ASIO만 축약)
+                        label: failed
+                          ? `⚠ ${keySoundOutputError}`
+                          : `ASIO: ${
+                              name.length > 16 ? `${name.slice(0, 16)}…` : name
+                            }`,
+                      };
+                    }),
+                  ]}
+                  value={
                     keySoundOutput?.requested.kind === 'asio'
-                      ? 'text-fg'
-                      : 'text-fg-disabled'
-                  }`}
-                >
-                  {t('settings.keySoundOutputBuffer') || 'ASIO 버퍼 크기'}
-                </p>
+                      ? `asio:${keySoundOutput.requested.driverName}`
+                      : 'defaultDevice'
+                  }
+                  onChange={handleKeySoundOutputChange}
+                  placeholder={
+                    t('settings.keySoundOutputDefault') || '기본 재생 장치'
+                  }
+                  align="right"
+                  widthClass="max-w-[160px]"
+                  disabled={
+                    asioDriversLoaded && visibleAsioDrivers.length === 0
+                  }
+                />
+              </SettingRow>
+              <SettingRow
+                label={
+                  <p
+                    className={`text-label ${
+                      keySoundOutput?.requested.kind === 'asio'
+                        ? 'text-fg'
+                        : 'text-fg-disabled'
+                    }`}
+                  >
+                    {t('settings.keySoundOutputBuffer') || 'ASIO 버퍼 크기'}
+                  </p>
+                }
+              >
                 <Dropdown
                   options={visibleAsioBuffers.map((size) => ({
                     value: String(size),
@@ -1153,12 +1109,11 @@ const Settings = ({
                   widthClass="w-[70px]"
                   disabled={keySoundOutput?.requested.kind !== 'asio'}
                 />
-              </div>
-            </div>
+              </SettingRow>
+            </SettingCard>
             {/* 기타 설정 */}
-            <div className="flex flex-col px-[16px] py-[4px] bg-fill-faint rounded-surface">
-              <div className="flex flex-row justify-between items-center h-[40px]">
-                <p className="text-label text-fg">{t('settings.language')}</p>
+            <SettingCard>
+              <SettingRow label={t('settings.language')}>
                 <Dropdown
                   options={LANGUAGE_OPTIONS}
                   value={language}
@@ -1166,20 +1121,16 @@ const Settings = ({
                   placeholder={t('settings.selectLanguage')}
                   align="right"
                 />
-              </div>
-              <div className="flex flex-row justify-between items-center h-[40px]">
-                <p className="text-label text-fg">{t('settings.shortcuts')}</p>
+              </SettingRow>
+              <SettingRow label={t('settings.shortcuts')}>
                 <button
                   onClick={() => setShortcutModalOpen(true)}
                   className={actionButtonClass(true)}
                 >
                   {t('settings.configure')}
                 </button>
-              </div>
-              <div className="flex flex-row justify-between items-center h-[40px]">
-                <p className="text-label text-fg">
-                  {t('settings.graphicsOption')}
-                </p>
+              </SettingRow>
+              <SettingRow label={t('settings.graphicsOption')}>
                 <Dropdown
                   options={isMacOS ? macAngleOptions : ANGLE_OPTIONS}
                   value={isMacOS ? 'metal' : angleMode}
@@ -1188,33 +1139,27 @@ const Settings = ({
                   disabled={isMacOS}
                   align="right"
                 />
-              </div>
+              </SettingRow>
               {!isMacOS && (
-                <div
-                  className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+                <SettingRow
+                  label={t('settings.autoUpdate')}
                   onClick={handleAutoUpdateToggle}
                 >
-                  <p className="text-label text-fg">
-                    {t('settings.autoUpdate')}
-                  </p>
                   <Checkbox
                     checked={autoUpdateEnabled}
                     onChange={handleAutoUpdateToggle}
                   />
-                </div>
+                </SettingRow>
               )}
-              <div
-                className="flex flex-row justify-between items-center h-[40px] cursor-pointer"
+              <SettingRow
+                label={t('settings.developerMode')}
                 onClick={handleDeveloperModeToggle}
               >
-                <p className="text-label text-fg">
-                  {t('settings.developerMode')}
-                </p>
                 <Checkbox
                   checked={developerModeEnabled}
                   onChange={handleDeveloperModeToggle}
                 />
-              </div>
+              </SettingRow>
               {/* 버전 및 설정 초기화 */}
               <div className="flex justify-between items-center py-[12px] px-[12px] bg-inset rounded-md mt-[8px] mb-[12px]">
                 <p className="text-body text-fg-muted tabular-nums">
@@ -1238,7 +1183,7 @@ const Settings = ({
                   </button>
                 </div>
               </div>
-            </div>
+            </SettingCard>
           </div>
         </div>
       </div>
diff --git a/src/renderer/components/main/common/SettingRow.tsx b/src/renderer/components/main/common/SettingRow.tsx
new file mode 100644
index 00000000..f17e1ea0
--- /dev/null
+++ b/src/renderer/components/main/common/SettingRow.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  SECTION_CARD_CLASS_COMFORTABLE,
+  FORM_ROW_CLASS_COMFORTABLE,
+} from '@utils/cardRecipes';
+
+// 설정 페이지 전용 comfortable 밀도 카드·행
+// 높이/패딩 오버라이드 API를 두지 않음 — 제3 밀도 방지 가드레일
+
+interface SettingCardProps {
+  children: React.ReactNode;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+}
+
+export const SettingCard = ({
+  children,
+  onMouseEnter,
+  onMouseLeave,
+}: SettingCardProps) => (
+  <div
+    className={SECTION_CARD_CLASS_COMFORTABLE}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+  >
+    {children}
+  </div>
+);
+
+interface SettingRowProps {
+  // 문자열이면 기본 라벨 스타일, 노드면 그대로 렌더
+  label: React.ReactNode;
+  children: React.ReactNode;
+  onClick?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+}
+
+export const SettingRow = ({
+  label,
+  children,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+}: SettingRowProps) => (
+  <div
+    className={FORM_ROW_CLASS_COMFORTABLE + (onClick ? ' cursor-pointer' : '')}
+    onClick={onClick}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+  >
+    {typeof label === 'string' ? (
+      <p className="text-label text-fg">{label}</p>
+    ) : (
+      label
+    )}
+    <div className="flex items-center gap-[8px] shrink-0">{children}</div>
+  </div>
+);
diff --git a/src/renderer/utils/cardRecipes.ts b/src/renderer/utils/cardRecipes.ts
index 7037d333..6058433c 100644
--- a/src/renderer/utils/cardRecipes.ts
+++ b/src/renderer/utils/cardRecipes.ts
@@ -18,3 +18,11 @@ export const FORM_ROW_CLASS =
 
 // 행 라벨
 export const FORM_LABEL_CLASS = 'text-fg-muted text-label';
+
+// comfortable 밀도 — 목적지 페이지(Settings) 전용. 도킹 패널·다이얼로그·플러그인 표면은
+// 위의 compact 유지. 밀도는 표면 루트에서 한 번만 결정, 제3 밀도 추가 금지 (tasks/todo.md 2026-07-12)
+export const SECTION_CARD_CLASS_COMFORTABLE =
+  'bg-fill-faint rounded-surface px-[16px] py-[4px] flex flex-col';
+
+export const FORM_ROW_CLASS_COMFORTABLE =
+  'flex justify-between items-center w-full min-h-[40px]';