전략편집기 수정, 보조지표 설정 수정

frontend/src/components/ColorInput.tsx

@@ -52,18 +52,25 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
 
   useEffect(() => {
     if (!open) return;
-    const onDoc = (e: MouseEvent) => {
+    const onDocPointer = (e: Event) => {
       const t = e.target as Node;
       if (anchorRef.current?.contains(t) || popoverRef.current?.contains(t)) return;
       setOpen(false);
     };
-    document.addEventListener('mousedown', onDoc);
-    return () => document.removeEventListener('mousedown', onDoc);
+    // 설정 모달 등이 bubble 단계에서 stopPropagation 하므로 capture 사용
+    document.addEventListener('mousedown', onDocPointer, true);
+    document.addEventListener('pointerdown', onDocPointer, true);
+    return () => {
+      document.removeEventListener('mousedown', onDocPointer, true);
+      document.removeEventListener('pointerdown', onDocPointer, true);
+    };
   }, [open]);
 
   const patchHex = (h: string) => onChange(formatPlotColor(h, alpha));
   const patchAlpha = (a: number) => onChange(formatPlotColor(hex6, a));
 
+  const closePopover = useCallback(() => setOpen(false), []);
+
   const popover = open && typeof document !== 'undefined' ? (
     <div
       ref={popoverRef}
@@ -72,7 +79,19 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = fal
       role="dialog"
       aria-label="색상 선택"
       onMouseDown={e => e.stopPropagation()}
+      onPointerDown={e => e.stopPropagation()}
     >
+      <div className="ism-color-popover-header">
+        <span className="ism-color-popover-title">색상 선택</span>
+        <button
+          type="button"
+          className="gc-popup-close ism-color-popover-close"
+          onClick={closePopover}
+          aria-label="색상 선택 닫기"
+        >
+          ✕
+        </button>
+      </div>
       <div className="ism-color-popover-native">
         <label className="ism-color-native-label">
           <span className="ism-style-label">직접 선택</span>