일목균형표 수정

frontend/src/App.css

@@ -2797,6 +2797,34 @@ html.theme-blue {
   color: var(--text2);
   flex-shrink: 0;
 }
+.ism-hist-colors {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.ism-hist-color-field {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ism-macd-hist-style-block {
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--sep);
+}
+.ism-macd-hist-style-title {
+  margin-bottom: 2px;
+}
+.ism-plot-title--sub {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text2);
+}
+.ism-style-field--wide {
+  flex: 1 1 auto;
+  min-width: 0;
+}
 /* 색상 입력 */
 .ism-color-wrap { display: flex; align-items: center; gap: 4px; position: relative; }
 .ism-color-swatch-btn {
@@ -3012,9 +3040,24 @@ html.theme-blue {
   border-radius: 8px;
   background: var(--bg2);
 }
-.ism-ichimoku-cloud-card-label {
-  display: block;
+.ism-ichimoku-cloud-card--off {
+  opacity: 0.72;
+}
+.ism-ichimoku-cloud-card--off .ism-ichimoku-cloud-card-row,
+.ism-ichimoku-cloud-card--off .ism-ichimoku-cloud-meta {
+  opacity: 0.45;
+  pointer-events: none;
+}
+.ism-ichimoku-cloud-card-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   margin-bottom: 8px;
+}
+.ism-ichimoku-cloud-toggle {
+  flex-shrink: 0;
+}
+.ism-ichimoku-cloud-card-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--text);
@@ -9652,7 +9695,7 @@ html.theme-blue {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: flex-start;
   gap: clamp(4px, 1.2cqi, 10px);
   overflow-y: auto;
   overflow-x: hidden;
@@ -9709,13 +9752,28 @@ html.theme-blue {
 }
 
 .rsp-trade-card-body .top-price-qty-block {
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
+  justify-content: flex-start;
   gap: clamp(4px, 1cqi, 8px);
 }
+
+.rsp-trade-card-body .top-pct-row--block {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+.rsp-trade-card-body .top-pct-row--block .top-pct-btn {
+  flex: 1 1 calc(20% - 4px);
+  min-width: 2.4rem;
+}
+
+.rsp-trade-card-body .top-pct-row--block .top-pct-btn--direct {
+  flex: 1 1 calc(33% - 4px);
+  min-width: 3.2rem;
+}
 /* 가격·수량: 기본 세로 배치 */
 .top-price-qty-block {
   display: flex;
@@ -9972,11 +10030,14 @@ html.theme-blue {
 }
 .top-pct-row {
   display: flex;
+  flex-wrap: wrap;
   gap: 4px;
+  row-gap: 4px;
   margin-top: 6px;
 }
 .top-pct-btn {
-  flex: 1;
+  flex: 1 1 calc(20% - 4px);
+  min-width: 2.4rem;
   padding: 5px 2px;
   font-size: 10px;
   border: 1px solid var(--border);
@@ -9986,7 +10047,8 @@ html.theme-blue {
   cursor: pointer;
 }
 .top-pct-btn--direct {
-  flex: 1.3;
+  flex: 1 1 calc(33% - 4px);
+  min-width: 3.2rem;
 }
 .top-pct-btn--active {
   border-color: var(--accent);
@@ -11289,6 +11351,29 @@ html.theme-light .tam-disclaimer     { color: #90a4ae; }
 .tnl-page--with-right .ptd-ob-stack--fill {
   height: 100%;
 }
+
+/* 매매 시그널 알림 우측: 좁은 카드에서도 주문 비율·총액이 겹치지 않도록 */
+.tnl-page--with-right .ptd-split-panel--right .ptd-order-card > .top-panel {
+  justify-content: flex-start;
+}
+.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-panel-fields {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  justify-content: flex-start;
+}
+.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
+  flex: 0 0 auto;
+  justify-content: flex-start;
+}
+.tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-actions {
+  margin-top: auto;
+}
+@container trade-card (max-height: 400px) {
+  .tnl-page--with-right .ptd-split-panel--right .ptd-order-card .top-meta {
+    font-size: 9px;
+  }
+}
 .tnl-row--selected {
   border-color: var(--accent, #7aa2f7);
   box-shadow: 0 0 0 1px rgba(122, 162, 247, 0.35);

frontend/src/App.tsx

@@ -596,6 +596,7 @@ function App() {
   const chartVolumeVisible = appDefaults.chartVolumeVisible ?? true;
   const chartLiveReceiveHighlight = appDefaults.chartLiveReceiveHighlight ?? true;
   const chartLegendOptions = appDefaults.chartLegendOptions;
+  const chartPaneSeparator = appDefaults.chartPaneSeparator;
   const paperTradingEnabled = appDefaults.paperTradingEnabled ?? true;
   const paperAutoTradeEnabled = appDefaults.paperAutoTradeEnabled ?? false;
   const [paperCashBalance, setPaperCashBalance] = useState(0);
@@ -970,6 +971,12 @@ function App() {
     slotRefs.current.forEach(slot => slot?.setVolumeVisible(chartVolumeVisible));
   }, [appSettingsLoaded, chartVolumeVisible]);
 
+  useEffect(() => {
+    if (!appSettingsLoaded) return;
+    managerRef.current?.setPaneSeparatorOptions(chartPaneSeparator);
+    slotRefs.current.forEach(slot => slot?.setPaneSeparatorOptions(chartPaneSeparator));
+  }, [appSettingsLoaded, chartPaneSeparator]);
+
   // mainChartStyle 변경 → ChartManager 즉시 적용
   useEffect(() => {
     managerRef.current?.updateMainSeriesStyle(mainChartStyle);
@@ -1791,6 +1798,12 @@ function App() {
               chartLegendOptions: { ...chartLegendOptions, ...patch } as unknown as Record<string, boolean>,
             });
           }}
+          chartPaneSeparator={chartPaneSeparator}
+          onChartPaneSeparatorChange={opts => {
+            saveAppDef({ chartPaneSeparator: opts });
+            managerRef.current?.setPaneSeparatorOptions(opts);
+            slotRefs.current.forEach(slot => slot?.setPaneSeparatorOptions(opts));
+          }}
           paperTradingEnabled={paperTradingEnabled}
           onPaperTradingEnabled={v => saveAppDef({ paperTradingEnabled: v })}
           paperInitialCapital={appDefaults.paperInitialCapital}
@@ -2096,6 +2109,7 @@ function App() {
                 onTradeOrderRequest={(req, idx) => applyTradeFill(req, idx)}
                 chartSeriesPriceLabels={chartSeriesPriceLabels}
                 chartVolumeVisible={chartVolumeVisible}
+                chartPaneSeparator={chartPaneSeparator}
                 chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                 chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                 displayTimezone={displayTimezone}
@@ -2134,6 +2148,7 @@ function App() {
                     onTradeOrderRequest={(req, idx) => applyTradeFill(req, idx)}
                     chartSeriesPriceLabels={chartSeriesPriceLabels}
                     chartVolumeVisible={chartVolumeVisible}
+                    chartPaneSeparator={chartPaneSeparator}
                     chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                     chartRealtimeSource={chartRealtimeSource as 'BACKEND_STOMP' | 'UPBIT_DIRECT'}
                     displayTimezone={displayTimezone}
@@ -2204,6 +2219,7 @@ function App() {
               mgr.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
               const wrapper = document.querySelector('.chart-wrapper') as HTMLElement | null;
               mgr.setVolumeVisible(chartVolumeVisible, wrapper?.clientHeight);
+              mgr.setPaneSeparatorOptions(chartPaneSeparator);
               mgr.setDisplayTimezone(displayTimezone, timeframe);
               syncBacktestMarkersRef.current();
               // 왼쪽 스크롤 감지 → 과거 데이터 추가 로드
@@ -2243,6 +2259,8 @@ function App() {
             onDuplicateIndicator={handleDuplicateIndicator}
             focusedIndicatorId={focusedIndicatorId}
             onRestoreIndicators={handleRestoreIndicators}
+            volumeVisible={chartVolumeVisible}
+            paneSeparatorOptions={chartPaneSeparator}
           />
 
           {/* 백테스팅 결과 통계 배지 */}

frontend/src/components/ChartSlot.tsx

@@ -42,6 +42,7 @@ import type {
   IndicatorConfig, LegendData, Drawing, ChartMode, MainChartStyle,
 } from '../types';
 import type { ChartManager } from '../utils/ChartManager';
+import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
 
 // ── 타임프레임 옵션 ────────────────────────────────────────────────────────
 const TF_OPTIONS: Timeframe[] = ['1m','3m','5m','10m','15m','30m','1h','4h','1D','1W','1M'];
@@ -112,6 +113,7 @@ export interface ChartSlotHandle {
   setSeriesPriceLabelsEnabled: (enabled: boolean) => void;
   /** 거래량 pane on/off */
   setVolumeVisible: (visible: boolean) => void;
+  setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => void;
 }
 
 // ── Props ─────────────────────────────────────────────────────────────────
@@ -172,6 +174,8 @@ export interface ChartSlotProps {
   chartLiveReceiveHighlight?: boolean;
   /** 실시간 차트 화면 표시 여부 (설정 등 다른 메뉴에서 숨김 시 false) */
   chartVisible?: boolean;
+  /** pane 구분선 */
+  chartPaneSeparator?: ChartPaneSeparatorOptions;
 }
 
 const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot({
@@ -195,6 +199,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
   compactMode = false,
   chartLiveReceiveHighlight = true,
   chartVisible = true,
+  chartPaneSeparator,
 }, ref) {
   // ── 전역 지표 파라미터 + 시각 설정 (DB 동기화) ────────────────────────
   const { getParams, saveParams, getVisualConfig, saveVisual } = useIndicatorSettings();
@@ -309,6 +314,9 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
     setVolumeVisible: (visible: boolean) => {
       managerRef.current?.setVolumeVisible(visible);
     },
+    setPaneSeparatorOptions: (opts: ChartPaneSeparatorOptions) => {
+      managerRef.current?.setPaneSeparatorOptions(opts);
+    },
   }), []);
 
   // 자석모드 변경 → ChartManager 크로스헤어 모드 즉시 반영
@@ -324,6 +332,11 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
     managerRef.current?.setVolumeVisible(chartVolumeVisible);
   }, [chartVolumeVisible]);
 
+  useEffect(() => {
+    if (!chartPaneSeparator) return;
+    managerRef.current?.setPaneSeparatorOptions(chartPaneSeparator);
+  }, [chartPaneSeparator]);
+
   // 외부 심볼 동기화
   useEffect(() => {
     if (forcedSymbol && forcedSymbol !== symbol) setSymbol(forcedSymbol);
@@ -806,6 +819,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
           drawingsVisible={!compactMode}
           showHoverToolbar={!compactMode}
           volumeVisible={chartVolumeVisible}
+          paneSeparatorOptions={chartPaneSeparator}
           onCrosshair={data => {
             setLegend(data);
             if (data && onCrosshairTime) onCrosshairTime(data.time ?? 0);
@@ -824,6 +838,7 @@ const ChartSlot = forwardRef<ChartSlotHandle, ChartSlotProps>(function ChartSlot
             }
             mgr.setSeriesPriceLabelsEnabled(chartSeriesPriceLabels);
             mgr.setVolumeVisible(chartVolumeVisible);
+            if (chartPaneSeparator) mgr.setPaneSeparatorOptions(chartPaneSeparator);
             // Time sync: 가시 시간 범위 변화 구독
             mgr.subscribeVisibleTimeRange(r => {
               if (!r || isSyncingTimeRef.current) return;

frontend/src/components/ColorInput.tsx

@@ -11,9 +11,10 @@ import ColorPickerPanel from './ColorPickerPanel';
 export interface ColorInputProps {
   value: string;
   onChange: (v: string) => void;
+  disabled?: boolean;
 }
 
-const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
+const ColorInput: React.FC<ColorInputProps> = ({ value, onChange, disabled = false }) => {
   const { hex6, alpha } = parsePlotColor(value);
   const [open, setOpen] = useState(false);
   const anchorRef = useRef<HTMLDivElement>(null);
@@ -88,13 +89,15 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
   ) : null;
 
   return (
-    <div className="ism-color-wrap" ref={anchorRef}>
+    <div className={`ism-color-wrap${disabled ? ' ism-color-wrap--disabled' : ''}`} ref={anchorRef}>
       <button
         type="button"
         className="ism-color-swatch-btn"
         title="색상 선택"
         aria-expanded={open}
+        disabled={disabled}
         onClick={() => {
+          if (disabled) return;
           setOpen(v => !v);
           if (!open) requestAnimationFrame(updatePosition);
         }}
@@ -106,12 +109,14 @@ const ColorInput: React.FC<ColorInputProps> = ({ value, onChange }) => {
         className="ism-color-picker ism-color-picker--compact"
         value={hex6}
         title="브라우저 색상 선택"
+        disabled={disabled}
         onChange={e => patchHex(e.target.value)}
       />
       <NumericParamInput
         className="ism-input ism-alpha-input"
         value={alpha}
         spec={getOpacityPercentSpec(alpha)}
+        disabled={disabled}
         onChange={patchAlpha}
       />
       <span className="ism-alpha-label">%</span>

frontend/src/components/IndicatorSettingsSections.tsx

@@ -18,6 +18,7 @@ import NumericParamInput from './NumericParamInput';
 import PlotLineStylePicker from './PlotLineStylePicker';
 import ColorInput from './ColorInput';
 import { colorToRgbaString, cloudColorOpacityPercent } from '../utils/ichimokuConfig';
+import { resolveHistogramUpColor, resolveHistogramDownColor } from '../utils/plotColorUtils';
 import type { IchimokuCloudColors } from '../utils/ichimokuConfig';
 
 const SRC_OPTIONS = ['close', 'open', 'high', 'low', 'hl2', 'hlc3', 'ohlc4'];
@@ -187,9 +188,29 @@ export const PlotSettingsRow: React.FC<{
           </div>
         )}
         {!inputsOnly && (
-          isHistogram ? (
+          isHistogram && indicatorType === 'MACD' ? (
+            <div className="ism-hist-colors">
+              <div className="ism-hist-color-field">
+                <span className="ism-style-label">상승</span>
+                <ColorInput
+                  value={resolveHistogramUpColor(plot)}
+                  disabled={!enabled}
+                  onChange={v => onPlotStyle(plotIndex, { histogramUpColor: v, color: v })}
+                />
+              </div>
+              <div className="ism-hist-color-field">
+                <span className="ism-style-label">하락</span>
+                <ColorInput
+                  value={resolveHistogramDownColor(plot)}
+                  disabled={!enabled}
+                  onChange={v => onPlotStyle(plotIndex, { histogramDownColor: v })}
+                />
+              </div>
+            </div>
+          ) : isHistogram ? (
             <ColorInput
               value={plot.color}
+              disabled={!enabled}
               onChange={v => onPlotStyle(plotIndex, { color: v })}
             />
           ) : (
@@ -339,45 +360,72 @@ export const SettingsOutputFooter: React.FC<{
 export const IchimokuCloudSection: React.FC<{
   cloudColors: IchimokuCloudColors;
   onChange: (patch: Partial<IchimokuCloudColors>) => void;
-}> = ({ cloudColors, onChange }) => (
-  <>
-    <div className="ism-ichimoku-cloud-divider" />
-    <div className="ism-ichimoku-cloud-section">
-      <h4 className="ism-ichimoku-cloud-title">구름 영역 색상</h4>
-      <p className="ism-ichimoku-cloud-hint">
-        선행스팬1·선행스팬2가 모두 켜져 있을 때만 구름이 표시됩니다.
-      </p>
-      <div className="ism-ichimoku-cloud-grid">
-        <div className="ism-ichimoku-cloud-card">
-          <span className="ism-ichimoku-cloud-card-label">상승 구름 (선행1 &gt; 선행2)</span>
-          <div className="ism-ichimoku-cloud-card-row">
-            <ColorInput
-              value={cloudColors.bullishColor}
-              onChange={v => onChange({ bullishColor: v })}
-            />
+}> = ({ cloudColors, onChange }) => {
+  const bullishOn = cloudColors.bullishVisible !== false;
+  const bearishOn = cloudColors.bearishVisible !== false;
+
+  return (
+    <>
+      <div className="ism-ichimoku-cloud-divider" />
+      <div className="ism-ichimoku-cloud-section">
+        <h4 className="ism-ichimoku-cloud-title">구름 영역</h4>
+        <p className="ism-ichimoku-cloud-hint">
+          선행스팬1·선행스팬2가 모두 켜져 있을 때만 구름을 그릴 수 있습니다. 상승·하락 구름은 각각 on/off 할 수 있습니다.
+        </p>
+        <div className="ism-ichimoku-cloud-grid">
+          <div className={`ism-ichimoku-cloud-card${bullishOn ? '' : ' ism-ichimoku-cloud-card--off'}`}>
+            <div className="ism-ichimoku-cloud-card-head">
+              <label className="ism-toggle ism-ichimoku-cloud-toggle">
+                <input
+                  type="checkbox"
+                  checked={bullishOn}
+                  onChange={e => onChange({ bullishVisible: e.target.checked })}
+                />
+                <span className="ism-toggle-slider" />
+              </label>
+              <span className="ism-ichimoku-cloud-card-label">상승 구름 (선행1 &gt; 선행2)</span>
+            </div>
+            <div className="ism-ichimoku-cloud-card-row">
+              <ColorInput
+                value={cloudColors.bullishColor}
+                disabled={!bullishOn}
+                onChange={v => onChange({ bullishColor: v })}
+              />
+            </div>
+            <div className="ism-ichimoku-cloud-meta">
+              {colorToRgbaString(cloudColors.bullishColor)}
+              {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bullishColor)}%
+            </div>
           </div>
-          <div className="ism-ichimoku-cloud-meta">
-            {colorToRgbaString(cloudColors.bullishColor)}
-            {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bullishColor)}%
-          </div>
-        </div>
-        <div className="ism-ichimoku-cloud-card">
-          <span className="ism-ichimoku-cloud-card-label">하락 구름 (선행1 &lt; 선행2)</span>
-          <div className="ism-ichimoku-cloud-card-row">
-            <ColorInput
-              value={cloudColors.bearishColor}
-              onChange={v => onChange({ bearishColor: v })}
-            />
-          </div>
-          <div className="ism-ichimoku-cloud-meta">
-            {colorToRgbaString(cloudColors.bearishColor)}
-            {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bearishColor)}%
+          <div className={`ism-ichimoku-cloud-card${bearishOn ? '' : ' ism-ichimoku-cloud-card--off'}`}>
+            <div className="ism-ichimoku-cloud-card-head">
+              <label className="ism-toggle ism-ichimoku-cloud-toggle">
+                <input
+                  type="checkbox"
+                  checked={bearishOn}
+                  onChange={e => onChange({ bearishVisible: e.target.checked })}
+                />
+                <span className="ism-toggle-slider" />
+              </label>
+              <span className="ism-ichimoku-cloud-card-label">하락 구름 (선행1 &lt; 선행2)</span>
+            </div>
+            <div className="ism-ichimoku-cloud-card-row">
+              <ColorInput
+                value={cloudColors.bearishColor}
+                disabled={!bearishOn}
+                onChange={v => onChange({ bearishColor: v })}
+              />
+            </div>
+            <div className="ism-ichimoku-cloud-meta">
+              {colorToRgbaString(cloudColors.bearishColor)}
+              {' · '}투명도 {cloudColorOpacityPercent(cloudColors.bearishColor)}%
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </>
-);
+    </>
+  );
+};
 
 /* ── 볼린저밴드 백그라운드 (업비트 모습 탭) ───────────────────── */
 export const BollingerBackgroundRow: React.FC<{

frontend/src/components/IndicatorSettingsStyleSection.tsx

@@ -9,7 +9,12 @@ import { getPlotLabel } from '../utils/indicatorLabels';
 import { getHlinePriceSpec } from '../utils/indicatorParamSpec';
 import NumericParamInput from './NumericParamInput';
 import { ColorInput } from './IndicatorSettingsSections';
-import { LINE_WIDTH_OPTIONS, LINE_STYLE_OPTIONS } from '../utils/plotColorUtils';
+import {
+  LINE_WIDTH_OPTIONS,
+  LINE_STYLE_OPTIONS,
+  resolveHistogramUpColor,
+  resolveHistogramDownColor,
+} from '../utils/plotColorUtils';
 import { IchimokuCloudSection } from './IndicatorSettingsSections';
 import { getIchimokuPlotTitle, type IchimokuCloudColors } from '../utils/ichimokuConfig';
 
@@ -199,12 +204,46 @@ const IndicatorSettingsStyleSection: React.FC<IndicatorSettingsStyleSectionProps
 
       <div ref={sectionRef} className="ism-style-section">
         {plots.map((plot, idx) => (
-          <PlotStyleRow
-            key={plot.id}
-            label={plotLabel(plot)}
-            plot={plot}
-            onStyle={patch => onPlotStyle(idx, patch)}
-          />
+          indicatorType === 'MACD' && plot.type === 'histogram' ? (
+            <div key={plot.id} className="ism-macd-hist-style-block">
+              <div className="ism-style-row ism-macd-hist-style-title">
+                <div className="ism-plot-title-cell">
+                  <span className="ism-plot-title">{plotLabel(plot)}</span>
+                </div>
+              </div>
+              <div className="ism-style-row">
+                <div className="ism-plot-title-cell">
+                  <span className="ism-plot-title ism-plot-title--sub">상승 막대</span>
+                </div>
+                <div className="ism-style-field ism-style-field--wide">
+                  <span className="ism-style-label">색상</span>
+                  <ColorInput
+                    value={resolveHistogramUpColor(plot)}
+                    onChange={v => onPlotStyle(idx, { histogramUpColor: v, color: v })}
+                  />
+                </div>
+              </div>
+              <div className="ism-style-row">
+                <div className="ism-plot-title-cell">
+                  <span className="ism-plot-title ism-plot-title--sub">하락 막대</span>
+                </div>
+                <div className="ism-style-field ism-style-field--wide">
+                  <span className="ism-style-label">색상</span>
+                  <ColorInput
+                    value={resolveHistogramDownColor(plot)}
+                    onChange={v => onPlotStyle(idx, { histogramDownColor: v })}
+                  />
+                </div>
+              </div>
+            </div>
+          ) : (
+            <PlotStyleRow
+              key={plot.id}
+              label={plotLabel(plot)}
+              plot={plot}
+              onStyle={patch => onPlotStyle(idx, patch)}
+            />
+          )
         ))}
 
         {hlines.length > 0 && (

frontend/src/components/PaneLegend.tsx

@@ -252,12 +252,51 @@ function assignLayoutsByPaneIndex(
     const lay = byPane.get(host.paneIndex);
     if (!lay || lay.height < MIN_SUB_PANE_HEIGHT) continue;
     for (const item of slot.items) {
+      if (item.layoutTopY != null) continue;
       item.layoutTopY = lay.topY;
       item.layoutHeight = lay.height;
     }
   }
 }
 
+/** 화면 순서(위→아래)의 활성 sub-pane ↔ 슬롯 순서 — orphan pane index 와 분리 */
+function assignLayoutsBySubPaneOrder(
+  slots: VisualSlot[],
+  subLayouts: Array<{ paneIndex: number; topY: number; height: number }>,
+): void {
+  for (let i = 0; i < slots.length && i < subLayouts.length; i++) {
+    const lay = subLayouts[i];
+    for (const item of slots[i].items) {
+      if (item.layoutTopY != null) continue;
+      item.layoutTopY = lay.topY;
+      item.layoutHeight = lay.height;
+    }
+  }
+}
+
+/** paneIndex·orphan pane 으로 어긋난 좌표를 슬롯 순서 기준 sub-pane 위치로 보정 */
+function reconcileLayoutsWithSubPanes(
+  slots: VisualSlot[],
+  subLayouts: Array<{ paneIndex: number; topY: number; height: number }>,
+): void {
+  const TOL = 24;
+  for (let i = 0; i < slots.length && i < subLayouts.length; i++) {
+    const expected = subLayouts[i];
+    for (const item of slots[i].items) {
+      const cur = item.layoutTopY;
+      const curH = item.layoutHeight;
+      if (
+        cur == null
+        || Math.abs(cur - expected.topY) > TOL
+        || (curH != null && Math.abs(curH - expected.height) > TOL)
+      ) {
+        item.layoutTopY = expected.topY;
+        item.layoutHeight = expected.height;
+      }
+    }
+  }
+}
+
 function buildPaneItems(
   manager: ChartManager,
   containerEl: HTMLElement | null,
@@ -301,7 +340,12 @@ function buildPaneItems(
   }
 
   const slots = buildVisualSlots(items, indicators);
+  const subLayouts = manager.getIndicatorSubPaneLayouts();
+  assignLayoutsBySubPaneOrder(slots, subLayouts);
   assignLayoutsByPaneIndex(slots, manager.getPaneLayouts());
+  if (subLayouts.length > 0) {
+    reconcileLayoutsWithSubPanes(slots, subLayouts);
+  }
 
   if (containerEl?.isConnected) {
     const missing = items.filter(i => i.layoutTopY == null);
@@ -319,7 +363,7 @@ function buildPaneItems(
     }
   }
 
-  return items.filter(i => i.layoutTopY != null && i.layoutHeight != null);
+  return items;
 }
 
 function paneItemLayout(
@@ -457,10 +501,18 @@ const PaneLegend: React.FC<PaneLegendProps> = ({
       setTimeout(syncPaneItems, 900),
       setTimeout(syncPaneItems, 1200),
       setTimeout(syncPaneItems, 1800),
+      setTimeout(syncPaneItems, 2500),
     ];
+    requestAnimationFrame(() => {
+      requestAnimationFrame(syncPaneItems);
+    });
   }, [syncPaneItems]);
 
-  useEffect(() => { scheduleRetry(); return () => retryRef.current.forEach(clearTimeout); }, [scheduleRetry]);
+  useEffect(() => {
+    setPaneItems([]);
+    scheduleRetry();
+    return () => retryRef.current.forEach(clearTimeout);
+  }, [scheduleRetry]);
 
   useEffect(() => {
     const unsub = manager.subscribePaneLayout(() => scheduleRetry());

frontend/src/components/PaneSeparatorOverlay.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { ChartManager } from '../utils/ChartManager';
+import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
+import { plotColorCss } from '../utils/plotColorUtils';
+
+interface Props {
+  manager: ChartManager;
+  options: ChartPaneSeparatorOptions;
+}
+
+function applyLineDash(ctx: CanvasRenderingContext2D, style: ChartPaneSeparatorOptions['lineStyle']) {
+  if (style === 'dashed') ctx.setLineDash([6, 4]);
+  else if (style === 'dotted') ctx.setLineDash([2, 3]);
+  else ctx.setLineDash([]);
+}
+
+const PaneSeparatorOverlay: React.FC<Props> = ({ manager, options }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const redraw = useCallback(() => {
+    const canvas = canvasRef.current;
+    const container = manager.getContainer();
+    if (!canvas || !container) return;
+
+    const cssW = container.clientWidth;
+    const cssH = container.clientHeight;
+    if (cssW <= 0 || cssH <= 0) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.round(cssW * dpr);
+    canvas.height = Math.round(cssH * dpr);
+    canvas.style.width = `${cssW}px`;
+    canvas.style.height = `${cssH}px`;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, cssW, cssH);
+
+    if (!options.visible) return;
+
+    const layouts = manager.getPaneLayouts()
+      .filter(l => l.height > 8)
+      .sort((a, b) => a.topY - b.topY);
+    if (layouts.length < 2) return;
+
+    ctx.strokeStyle = plotColorCss(options.color);
+    ctx.lineWidth = options.width;
+    applyLineDash(ctx, options.lineStyle);
+
+    for (let i = 0; i < layouts.length - 1; i++) {
+      const y = layouts[i].topY + layouts[i].height;
+      const lineY = y + options.width / 2;
+      ctx.beginPath();
+      ctx.moveTo(0, lineY);
+      ctx.lineTo(cssW, lineY);
+      ctx.stroke();
+    }
+  }, [manager, options]);
+
+  useEffect(() => {
+    redraw();
+    const unsub = manager.subscribePaneLayout(redraw);
+    const container = manager.getContainer();
+    const ro = new ResizeObserver(() => redraw());
+    if (container) ro.observe(container);
+    return () => {
+      unsub();
+      ro.disconnect();
+    };
+  }, [manager, redraw]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="pane-separator-overlay"
+      aria-hidden
+      style={{
+        position: 'absolute',
+        inset: 0,
+        pointerEvents: 'none',
+        zIndex: 4,
+      }}
+    />
+  );
+};
+
+export default PaneSeparatorOverlay;

frontend/src/components/SettingsPage.tsx

@@ -35,6 +35,12 @@ import {
   CHART_LEGEND_SETTING_ITEMS,
   type ChartLegendVisibility,
 } from '../types/chartLegend';
+import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
+import {
+  LINE_STYLE_LABELS,
+  LINE_STYLE_OPTIONS,
+  LINE_WIDTH_OPTIONS,
+} from '../utils/plotColorUtils';
 import TimezonePicker from './TimezonePicker';
 import AdminPasswordGate from './AdminPasswordGate';
 import AdminSettingsPanel from './AdminSettingsPanel';
@@ -108,6 +114,8 @@ interface SettingsPageProps {
   onChartLiveReceiveHighlight?: (v: boolean) => void;
   chartLegendOptions?: ChartLegendVisibility;
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
+  chartPaneSeparator?: ChartPaneSeparatorOptions;
+  onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
   paperTradingEnabled?: boolean;
   onPaperTradingEnabled?: (v: boolean) => void;
   paperInitialCapital?: number;
@@ -638,6 +646,8 @@ interface ChartPanelProps {
   onChartLiveReceiveHighlight?: (v: boolean) => void;
   chartLegendOptions?: ChartLegendVisibility;
   onChartLegendOptionsChange?: (patch: Partial<ChartLegendVisibility>) => void;
+  chartPaneSeparator?: ChartPaneSeparatorOptions;
+  onChartPaneSeparatorChange?: (opts: ChartPaneSeparatorOptions) => void;
 }
 
 const ChartPanel: React.FC<ChartPanelProps> = ({
@@ -652,6 +662,8 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
   onChartLiveReceiveHighlight,
   chartLegendOptions,
   onChartLegendOptionsChange,
+  chartPaneSeparator,
+  onChartPaneSeparatorChange,
 }) => {
   const [upColor,   setUp]   = useState('#26a69a');
   const [downColor, setDown] = useState('#ef5350');
@@ -758,6 +770,75 @@ const ChartPanel: React.FC<ChartPanelProps> = ({
         </SettingRow>
       </SettingSection>
 
+      {chartPaneSeparator && onChartPaneSeparatorChange && (
+        <SettingSection title="차트 영역 구분선">
+          <SettingRow
+            label="구분선 표시"
+            desc="캔들·거래량·보조지표 pane 사이에 구분선을 표시합니다."
+          >
+            <label className="stg-toggle">
+              <input
+                type="checkbox"
+                checked={chartPaneSeparator.visible}
+                onChange={e => onChartPaneSeparatorChange({
+                  ...chartPaneSeparator,
+                  visible: e.target.checked,
+                })}
+              />
+              <span className="stg-toggle-slider" />
+            </label>
+          </SettingRow>
+          {chartPaneSeparator.visible && (
+            <>
+              <SettingRow label="선 색상" desc="pane 사이 구분선 색상입니다.">
+                <div className="stg-color-row">
+                  <input
+                    type="color"
+                    className="stg-color"
+                    value={chartPaneSeparator.color.startsWith('#')
+                      ? chartPaneSeparator.color.slice(0, 7)
+                      : '#2a2e3a'}
+                    onChange={e => onChartPaneSeparatorChange({
+                      ...chartPaneSeparator,
+                      color: e.target.value,
+                    })}
+                  />
+                  <span className="stg-color-label">{chartPaneSeparator.color}</span>
+                </div>
+              </SettingRow>
+              <SettingRow label="선 굵기" desc="구분선 두께(px)입니다.">
+                <select
+                  className="stg-select"
+                  value={chartPaneSeparator.width}
+                  onChange={e => onChartPaneSeparatorChange({
+                    ...chartPaneSeparator,
+                    width: Number(e.target.value) as ChartPaneSeparatorOptions['width'],
+                  })}
+                >
+                  {LINE_WIDTH_OPTIONS.map(w => (
+                    <option key={w} value={w}>{w}px</option>
+                  ))}
+                </select>
+              </SettingRow>
+              <SettingRow label="선 스타일" desc="실선·점선·도트 중 선택합니다.">
+                <select
+                  className="stg-select"
+                  value={chartPaneSeparator.lineStyle}
+                  onChange={e => onChartPaneSeparatorChange({
+                    ...chartPaneSeparator,
+                    lineStyle: e.target.value as ChartPaneSeparatorOptions['lineStyle'],
+                  })}
+                >
+                  {LINE_STYLE_OPTIONS.map(s => (
+                    <option key={s} value={s}>{LINE_STYLE_LABELS[s]}</option>
+                  ))}
+                </select>
+              </SettingRow>
+            </>
+          )}
+        </SettingSection>
+      )}
+
       {chartLegendOptions && onChartLegendOptionsChange && (
         <SettingSection title="상단 정보 표시">
           {CHART_LEGEND_SETTING_ITEMS.map(({ key, label, desc }) => (
@@ -1443,6 +1524,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
   onChartLiveReceiveHighlight,
   chartLegendOptions,
   onChartLegendOptionsChange,
+  chartPaneSeparator,
+  onChartPaneSeparatorChange,
   tradeAlertSoundEnabled = true,
   onTradeAlertSoundEnabled,
   tradeAlertSound = 'bell',
@@ -1533,6 +1616,8 @@ const SettingsPage: React.FC<SettingsPageProps> = ({
           onChartLiveReceiveHighlight={onChartLiveReceiveHighlight}
           chartLegendOptions={chartLegendOptions}
           onChartLegendOptionsChange={onChartLegendOptionsChange}
+          chartPaneSeparator={chartPaneSeparator}
+          onChartPaneSeparatorChange={onChartPaneSeparatorChange}
         />
       );
       case 'indicators':

frontend/src/components/StrategyEditorPage.tsx

@@ -363,7 +363,7 @@ export default function StrategyEditorPage({ theme }: Props) {
     schedulePersistFlowLayout(layoutStrategyKey);
   }, [layoutStrategyKey, schedulePersistFlowLayout]);
 
-  const handleStartMetaChange = useCallback((meta: Record<string, { candleType: string }>) => {
+  const handleStartMetaChange = useCallback((meta: Record<string, import('../utils/strategyStartNodes').StartNodeMeta>) => {
     setCurrentLayout(prev => ({ ...prev, startMeta: meta }));
     schedulePersistFlowLayout(layoutStrategyKey);
   }, [setCurrentLayout, layoutStrategyKey, schedulePersistFlowLayout]);

frontend/src/components/TradingChart.tsx

@@ -51,6 +51,8 @@ import CandlePaneControls from './CandlePaneControls';
 import { getKoreanName } from '../utils/marketNameCache';
 import { DEFAULT_DISPLAY_TIMEZONE } from '../utils/timezone';
 import { classifyIndicatorChartChange, singleIndParamKey } from '../utils/indicatorChartSync';
+import type { ChartPaneSeparatorOptions } from '../types/chartPaneSeparator';
+import PaneSeparatorOverlay from './PaneSeparatorOverlay';
 
 interface TradingChartProps {
   bars:              OHLCVBar[];
@@ -126,6 +128,8 @@ interface TradingChartProps {
   seriesPriceLabelsEnabled?: boolean;
   /** 실시간 차트 화면 표시 여부 — false 이면 숨김 중 무거운 재로드 지연 */
   chartVisible?: boolean;
+  /** pane(캔들·거래량·보조지표) 구분선 */
+  paneSeparatorOptions?: ChartPaneSeparatorOptions;
 }
 
 const TradingChart: React.FC<TradingChartProps> = ({
@@ -156,6 +160,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
   showHoverToolbar = true,
   seriesPriceLabelsEnabled = true,
   chartVisible = true,
+  paneSeparatorOptions,
 }) => {
   const containerRef  = useRef<HTMLDivElement>(null);
   const wrapperRef    = useRef<HTMLDivElement>(null);   // 스크롤 래퍼
@@ -207,6 +212,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
   const prevSortedPKRef = useRef<string>('');   // 순서 무관 paramKey (reorder 감지용)
   const prevIndicatorsListRef = useRef<IndicatorConfig[]>(indicators);
   const indicatorSyncInFlightRef = useRef(false);
+  const indicatorReloadGenRef = useRef(0);
   const prevMarket      = useRef<string>(market);
   const prevMarketTf    = useRef<Timeframe>(timeframe);
   const lastAppliedMarketRef = useRef<string>('');
@@ -281,6 +287,11 @@ const TradingChart: React.FC<TradingChartProps> = ({
     managerRef.current?.setSeriesPriceLabelsEnabled(seriesPriceLabelsEnabled);
   }, [seriesPriceLabelsEnabled]);
 
+  useEffect(() => {
+    if (!paneSeparatorOptions) return;
+    managerRef.current?.setPaneSeparatorOptions(paneSeparatorOptions);
+  }, [paneSeparatorOptions]);
+
   /**
    * pane 높이 재배분 + 스크롤 컨테이너 확장
    *
@@ -409,18 +420,27 @@ const TradingChart: React.FC<TradingChartProps> = ({
   ) => {
     const cover = createIndicatorReloadCover(containerRef.current);
     const savedLR = mgr.getVisibleLogicalRange();
+    const reloadGen = ++indicatorReloadGenRef.current;
 
     indicatorSyncInFlightRef.current = true;
     void mgr.reloadIndicatorsOnly(inds).then(() => {
+      if (reloadGen !== indicatorReloadGenRef.current) {
+        fadeOutIndicatorReloadCover(cover);
+        return;
+      }
       afterIndicatorPaneMutation(mgr);
       requestAnimationFrame(() => requestAnimationFrame(() => {
+        if (reloadGen !== indicatorReloadGenRef.current) {
+          fadeOutIndicatorReloadCover(cover);
+          return;
+        }
         restoreLogicalRange(mgr, savedLR);
         fadeOutIndicatorReloadCover(cover);
         indicatorSyncInFlightRef.current = false;
         onComplete?.();
       }));
     });
-  }, [applyPaneLayout, afterIndicatorPaneMutation, restoreLogicalRange]);
+  }, [afterIndicatorPaneMutation, restoreLogicalRange]);
 
   const queueFullReload = useCallback(() => {
     if (!chartVisibleRef.current) return;
@@ -635,6 +655,7 @@ const TradingChart: React.FC<TradingChartProps> = ({
       mgr.setVolumeVisible(false, wrapperH > 0 ? wrapperH : undefined);
     }
     mgr.setSeriesPriceLabelsEnabled(seriesPriceLabelsEnabled);
+    if (paneSeparatorOptions) mgr.setPaneSeparatorOptions(paneSeparatorOptions);
     onManagerReady(mgr);
 
     const unsub = mgr.subscribeCrosshair((p: MouseEventParams<Time>) => {
@@ -1251,6 +1272,12 @@ const TradingChart: React.FC<TradingChartProps> = ({
           onClose={() => setCtxMenu(null)}
         />
       )}
+      {chartMgr && paneSeparatorOptions && (
+        <PaneSeparatorOverlay
+          manager={chartMgr}
+          options={paneSeparatorOptions}
+        />
+      )}
       {chartMgr && (
         <DrawingCanvas
           manager={chartMgr}
@@ -1403,7 +1430,7 @@ function sortedParamKey(inds: IndicatorConfig[]): string {
  */
 function styleKey(inds: IndicatorConfig[]): string {
   return inds.map(i =>
-    `${i.id}|${i.hidden ? '1' : '0'}|${i.lastValueVisible === false ? '0' : '1'}|${(i.plots ?? []).map(p => `${p.color ?? ''}:${p.lineWidth ?? 1}:${p.lineStyle ?? 'solid'}`).join(',')}|${JSON.stringify(i.plotVisibility ?? {})}|${JSON.stringify((i.hlines ?? []).map(h => `${h.price}:${h.color}:${h.visible ?? true}:${h.lineStyle ?? 'dashed'}:${h.lineWidth ?? 1}`))}|${JSON.stringify(i.cloudColors ?? {})}`
+    `${i.id}|${i.hidden ? '1' : '0'}|${i.lastValueVisible === false ? '0' : '1'}|${(i.plots ?? []).map(p => `${p.color ?? ''}:${p.lineWidth ?? 1}:${p.lineStyle ?? 'solid'}:${p.histogramUpColor ?? ''}:${p.histogramDownColor ?? ''}`).join(',')}|${JSON.stringify(i.plotVisibility ?? {})}|${JSON.stringify((i.hlines ?? []).map(h => `${h.price}:${h.color}:${h.visible ?? true}:${h.lineStyle ?? 'dashed'}:${h.lineWidth ?? 1}`))}|${JSON.stringify(i.cloudColors ?? {})}`
   ).join(';');
 }
 

frontend/src/components/TrendSearchPage.tsx

@@ -263,6 +263,7 @@ const TrendSearchPage: React.FC<Props> = ({
             theme={theme}
             chartRealtimeSource={chartRealtimeSource}
             chartSeriesPriceLabels={chartSeriesPriceLabels}
+            chartPaneSeparator={defaults.chartPaneSeparator}
             tickers={tickers}
             lastUpdatedAt={lastUpdatedAt}
             isInTargets={isInTargets}

frontend/src/components/VirtualTradingPage.tsx

@@ -55,6 +55,10 @@ import {
 } from '../utils/virtualLiveStrategySync';
 import { pinStrategyEvaluationTimeframes } from '../utils/strategyTimeframePin';
 import { persistVirtualTargetPinned } from '../utils/virtualTargetMutations';
+import {
+  coalesceTargetsToDefaultStrategy,
+  resolveVirtualTargetStrategyId,
+} from '../utils/virtualTargetStrategy';
 import { virtualTargetLimitMessage } from '../utils/virtualTargetLimits';
 import '../styles/virtualTradingDashboard.css';
 
@@ -100,6 +104,7 @@ const VirtualTradingPage: React.FC<Props> = ({
   const chartRealtimeSource = (appChartDefaults.chartRealtimeSource
     ?? 'BACKEND_STOMP') as ChartRealtimeSource;
   const chartSeriesPriceLabels = appChartDefaults.chartSeriesPriceLabels;
+  const chartPaneSeparator = appChartDefaults.chartPaneSeparator;
   const chartLiveReceiveHighlight = appChartDefaults.chartLiveReceiveHighlight;
   const virtualTargetMaxCount = appChartDefaults.virtualTargetMaxCount;
 
@@ -136,6 +141,13 @@ const VirtualTradingPage: React.FC<Props> = ({
 
   useEffect(() => { saveVirtualTargets(targets); }, [targets]);
   useEffect(() => { saveVirtualSession(session); }, [session]);
+
+  /** 예전 데이터: 종목 strategyId에 전역 ID가 복사된 경우 → 기본 전략 따름(null) */
+  useEffect(() => {
+    if (session.globalStrategyId == null) return;
+    setTargets(prev => coalesceTargetsToDefaultStrategy(prev, session.globalStrategyId));
+  }, [session.globalStrategyId]);
+
   useEffect(() => { saveVirtualCardViewMode(viewMode); }, [viewMode]);
 
   const strategyNames = useMemo(
@@ -160,7 +172,7 @@ const VirtualTradingPage: React.FC<Props> = ({
   const targetRefs = useMemo(() =>
     targets.map(t => ({
       market: t.market,
-      strategyId: t.strategyId ?? session.globalStrategyId,
+      strategyId: resolveVirtualTargetStrategyId(t, session.globalStrategyId),
     })),
   [targets, session.globalStrategyId]);
 
@@ -302,22 +314,24 @@ const VirtualTradingPage: React.FC<Props> = ({
     setTargets(prev => prev.map(t =>
       t.market === market ? { ...t, strategyId } : t,
     ));
-    if (!session.running || !strategyId) return;
+    if (!session.running) return;
+    const effectiveId = resolveVirtualTargetStrategyId({ strategyId }, session.globalStrategyId);
+    if (effectiveId == null) return;
     try {
       await saveLiveStrategySettings({
         market,
-        strategyId,
+        strategyId: effectiveId,
         isLiveCheck: true,
         executionType: session.executionType,
         positionMode: session.positionMode,
         skipWatchlistSync: true,
         skipGlobalTemplate: true,
       });
-      await pinStrategyEvaluationTimeframes(market, strategyId);
+      await pinStrategyEvaluationTimeframes(market, effectiveId);
     } catch {
       window.alert('종목 전략 변경 저장에 실패했습니다.');
     }
-  }, [session, targets]);
+  }, [session]);
 
   const handleTargetCandleTypeChange = useCallback(async (market: string, candleType: string) => {
     const normalized = normalizeStartCandleType(candleType);
@@ -326,7 +340,9 @@ const VirtualTradingPage: React.FC<Props> = ({
     ));
     if (!session.running) return;
     const target = targets.find(t => t.market === market);
-    const strategyId = target?.strategyId ?? session.globalStrategyId;
+    const strategyId = target
+      ? resolveVirtualTargetStrategyId(target, session.globalStrategyId)
+      : session.globalStrategyId;
     if (!strategyId) return;
     try {
       await saveLiveStrategySettings({
@@ -469,6 +485,7 @@ const VirtualTradingPage: React.FC<Props> = ({
           theme={theme}
           chartRealtimeSource={chartRealtimeSource}
           chartSeriesPriceLabels={chartSeriesPriceLabels}
+          chartPaneSeparator={chartPaneSeparator}
           chartLiveReceiveHighlight={chartLiveReceiveHighlight}
           tickers={tickers}
           viewMode={viewMode}

frontend/src/components/backtest/BacktestAnalysisChart.tsx

@@ -10,6 +10,7 @@ import { isUpbitMarket } from '../../utils/upbitApi';
 import { DEFAULT_DISPLAY_TIMEZONE } from '../../utils/timezone';
 import { normalizeChartTimeframe, timeframeBarSeconds } from '../../utils/backtestUiUtils';
 import { useIndicatorSettings } from '../../hooks/useIndicatorSettings';
+import { useAppSettings } from '../../hooks/useAppSettings';
 import { enrichIndicatorConfig, getIndicatorDef } from '../../utils/indicatorRegistry';
 import { normalizeSmaConfig } from '../../utils/smaConfig';
 import {
@@ -70,6 +71,7 @@ const BacktestAnalysisChart: React.FC<Props> = ({
 }) => {
   const timeframe = normalizeChartTimeframe(timeframeRaw);
   const { getParams, getVisualConfig } = useIndicatorSettings();
+  const { defaults: appDefaults } = useAppSettings();
   const [bars, setBars] = useState<OHLCVBar[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -198,6 +200,7 @@ const BacktestAnalysisChart: React.FC<Props> = ({
               onCandlesReady={onCandlesReady}
               onAddDrawing={noop}
               displayTimezone={DEFAULT_DISPLAY_TIMEZONE}
+              paneSeparatorOptions={appDefaults.chartPaneSeparator}
             />
           )}
           {!loading && !error && bars.length === 0 && (

frontend/src/components/strategyEditor/FlowNodes.tsx

@@ -2,10 +2,12 @@ import React, { memo, useCallback, useState } from 'react';
 import { Handle, Position, useConnection, useReactFlow, type NodeProps } from '@xyflow/react';
 import {
   isStartNodeId,
-  STRATEGY_CANDLE_TYPES,
   type HandleSide,
   type StrategyFlowNodeData,
 } from '../../utils/strategyFlowLayout';
+import { getStartCandleTypes } from '../../utils/strategyStartNodes';
+import StartTimeframeCheckboxes from './StartTimeframeCheckboxes';
+import LogicGateOpToggle from './LogicGateOpToggle';
 import { hasNodeSettings } from '../../utils/conditionPeriods';
 import { getStrategyIndicatorDisplayName } from '../../utils/strategyPaletteStorage';
 import ConditionNodeSettings from './ConditionNodeSettings';
@@ -132,7 +134,9 @@ export const StartNode = memo(function StartNode({ id, data }: NodeProps) {
   const d = data as StrategyFlowNodeData;
   const isSell = d.signalTab === 'sell';
   const { onDragOver, onDragLeave, onDrop } = usePaletteDropHandlers(id, d);
-  const candleType = d.candleType ?? '1m';
+  const candleTypes = d.candleTypes?.length
+    ? d.candleTypes
+    : getStartCandleTypes({ candleType: d.candleType ?? '1m' });
   const canDelete = id !== '__strategy_start__' && !!d.onDeleteStart;
 
   const stop = (e: React.SyntheticEvent) => e.stopPropagation();
@@ -150,35 +154,32 @@ export const StartNode = memo(function StartNode({ id, data }: NodeProps) {
         activeSourceSide={d.activeSourceSide}
         canSourceConnect={d.canSourceConnect !== false}
       />
-      <div className="se-flow-start-head">
-        <div className="se-flow-start-dot" />
-        <span className="se-flow-start-label">START</span>
-        <select
-          className="se-flow-start-tf"
-          value={candleType}
-          title="조건 판별 시간봉"
-          onPointerDown={stop}
-          onMouseDown={stop}
-          onClick={stop}
-          onChange={e => d.onStartCandleTypeChange?.(id, e.target.value)}
-        >
-          {STRATEGY_CANDLE_TYPES.map(ct => (
-            <option key={ct} value={ct}>{ct}</option>
-          ))}
-        </select>
-        {canDelete && (
-          <button
-            type="button"
-            className="se-flow-del se-flow-del--start"
-            title="START 삭제"
-            onClick={e => {
-              e.stopPropagation();
-              d.onDeleteStart?.(id);
-            }}
-          >
-            ×
-          </button>
-        )}
+      <div className="se-flow-start-layout">
+        <div className="se-flow-start-title-row">
+          <div className="se-flow-start-title-left">
+            <div className="se-flow-start-dot" />
+            <span className="se-flow-start-label">START</span>
+          </div>
+          {canDelete && (
+            <button
+              type="button"
+              className="se-flow-del se-flow-del--start"
+              title="START 삭제"
+              onClick={e => {
+                e.stopPropagation();
+                d.onDeleteStart?.(id);
+              }}
+            >
+              ×
+            </button>
+          )}
+        </div>
+        <StartTimeframeCheckboxes
+          layout="graph"
+          className="se-flow-start-tf-checks-wrap"
+          selected={candleTypes}
+          onChange={types => d.onStartCandleTypesChange?.(id, types)}
+        />
       </div>
     </div>
   );
@@ -206,7 +207,15 @@ export const LogicGateNode = memo(function LogicGateNode({ id, data, selected }:
         canTargetConnect={d.canTargetConnect !== false}
       />
       <div className="se-flow-gate-head">
-        <span className="se-flow-gate-badge">[{node.type}]</span>
+        {node.type === 'AND' || node.type === 'OR' ? (
+          <LogicGateOpToggle
+            value={node.type}
+            onChange={op => d.onChangeLogicGateType?.(id, op)}
+            compact
+          />
+        ) : (
+          <span className="se-flow-gate-badge">[{node.type}]</span>
+        )}
       </div>
       {(node.children ?? []).length === 0 && (
         <span className="se-flow-gate-hint">조건을 드롭하세요</span>

frontend/src/components/strategyEditor/LogicExpressionPreview.tsx

@@ -94,7 +94,12 @@ function renderNode(node: LogicNode, def: DefType): React.ReactNode {
 
   if (node.type === 'TIMEFRAME') {
     const inner = node.children?.[0];
-    const tf = formatStartCandleLabel(node.candleType ?? '1m');
+    const types = node.candleTypes?.length
+      ? node.candleTypes
+      : [node.candleType ?? '1m'];
+    const tf = types.length > 1
+      ? types.map(formatStartCandleLabel).join(' · ')
+      : formatStartCandleLabel(types[0]);
     return inner ? (
       <>
         <span className="se-formula-tf">[{tf}]</span>
@@ -125,11 +130,14 @@ function renderSignalBranches(
   }
 
   if (branches.length === 1) {
-    const { candleType, root } = branches[0];
+    const { candleType, candleTypes, root } = branches[0];
     if (!root) return <span className="se-formula-empty">(연결된 조건 없음)</span>;
+    const tfLabel = candleTypes && candleTypes.length > 1
+      ? candleTypes.map(formatStartCandleLabel).join(' · ')
+      : formatStartCandleLabel(candleType);
     return (
       <>
-        <span className="se-formula-tf">[{formatStartCandleLabel(candleType)}]</span>
+        <span className="se-formula-tf">[{tfLabel}]</span>
         {' '}
         {renderNode(root, def)}
       </>

frontend/src/components/strategyEditor/LogicGateOpToggle.tsx

@@ -0,0 +1,50 @@
+/**
+ * AND / OR 논리 게이트 — 서로 전환
+ */
+import React from 'react';
+import type { LogicNodeType } from '../../utils/strategyTypes';
+
+export type LogicGateOp = Extract<LogicNodeType, 'AND' | 'OR'>;
+
+interface Props {
+  value: LogicGateOp;
+  onChange: (op: LogicGateOp) => void;
+  className?: string;
+  compact?: boolean;
+}
+
+const LogicGateOpToggle: React.FC<Props> = ({ value, onChange, className = '', compact = false }) => {
+  const stop = (e: React.SyntheticEvent) => e.stopPropagation();
+
+  return (
+    <div
+      className={`se-logic-gate-toggle${compact ? ' se-logic-gate-toggle--compact' : ''}${className ? ` ${className}` : ''}`}
+      role="group"
+      aria-label="논리 연산"
+      onPointerDown={stop}
+      onMouseDown={stop}
+      onClick={stop}
+    >
+      <div className="se-start-combine-toggle">
+      <button
+        type="button"
+        className={`se-start-combine-btn se-start-combine-btn--and${value === 'AND' ? ' se-start-combine-btn--on' : ''}`}
+        aria-pressed={value === 'AND'}
+        onClick={() => onChange('AND')}
+      >
+        AND
+      </button>
+      <button
+        type="button"
+        className={`se-start-combine-btn se-start-combine-btn--or${value === 'OR' ? ' se-start-combine-btn--on' : ''}`}
+        aria-pressed={value === 'OR'}
+        onClick={() => onChange('OR')}
+      >
+        OR
+      </button>
+      </div>
+    </div>
+  );
+};
+
+export default LogicGateOpToggle;

frontend/src/components/strategyEditor/StartTimeframeCheckboxes.tsx

@@ -0,0 +1,119 @@
+/**
+ * START 노드 — 평가 시간봉 다중 선택 (마감봉마다 독립 체크)
+ */
+import React from 'react';
+import {
+  START_TIMEFRAME_GRAPH_ROWS,
+  STRATEGY_CANDLE_TYPE_OPTIONS,
+  STRATEGY_CANDLE_TYPES,
+  formatStrategyCandleLabel,
+  type StrategyCandleType,
+} from '../../utils/strategyStartNodes';
+
+interface Props {
+  selected: string[];
+  onChange: (next: string[]) => void;
+  className?: string;
+  /** 그래프 START: 2행 고정 배치 + 값 라벨(1m…) */
+  layout?: 'default' | 'graph';
+  compact?: boolean;
+}
+
+const OPTIONS_BY_VALUE = Object.fromEntries(
+  STRATEGY_CANDLE_TYPE_OPTIONS.map(o => [o.value, o]),
+) as Record<StrategyCandleType, { value: string; label: string }>;
+
+function CheckItem({
+  value,
+  checked,
+  showShortLabel,
+  onToggle,
+}: {
+  value: StrategyCandleType;
+  checked: boolean;
+  showShortLabel: boolean;
+  onToggle: (value: string, checked: boolean) => void;
+}) {
+  const opt = OPTIONS_BY_VALUE[value];
+  return (
+    <label className="se-start-tf-check" title={formatStrategyCandleLabel(value)}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={e => onToggle(value, e.target.checked)}
+      />
+      <span>{showShortLabel ? value : opt.label}</span>
+    </label>
+  );
+}
+
+const StartTimeframeCheckboxes: React.FC<Props> = ({
+  selected,
+  onChange,
+  className = '',
+  layout = 'default',
+  compact = false,
+}) => {
+  const selectedSet = new Set(selected);
+
+  const toggle = (value: string, checked: boolean) => {
+    if (checked) {
+      if (!selectedSet.has(value)) onChange([...selected, value]);
+      return;
+    }
+    const next = selected.filter(t => t !== value);
+    onChange(next.length > 0 ? next : [value]);
+  };
+
+  const stop = (e: React.SyntheticEvent) => e.stopPropagation();
+
+  if (layout === 'graph') {
+    return (
+      <div
+        className={`se-start-tf-checks se-start-tf-checks--graph${className ? ` ${className}` : ''}`}
+        role="group"
+        aria-label="조건 판별 시간봉"
+        onPointerDown={stop}
+        onMouseDown={stop}
+        onClick={stop}
+      >
+        {START_TIMEFRAME_GRAPH_ROWS.map((row, rowIdx) => (
+          <div key={rowIdx} className="se-start-tf-checks-row">
+            {row.map(ct => (
+              <CheckItem
+                key={ct}
+                value={ct}
+                checked={selectedSet.has(ct)}
+                showShortLabel
+                onToggle={toggle}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`se-start-tf-checks${compact ? ' se-start-tf-checks--compact' : ''}${className ? ` ${className}` : ''}`}
+      role="group"
+      aria-label="조건 판별 시간봉"
+      onPointerDown={stop}
+      onMouseDown={stop}
+      onClick={stop}
+    >
+      {STRATEGY_CANDLE_TYPES.map(ct => (
+        <CheckItem
+          key={ct}
+          value={ct}
+          checked={selectedSet.has(ct)}
+          showShortLabel={compact}
+          onToggle={toggle}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default StartTimeframeCheckboxes;

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -371,10 +371,12 @@ function StrategyEditorCanvasInner({
     };
   }, [emitLayoutChange]);
 
-  const handleStartCandleTypeChange = useCallback((startId: string, candleType: string) => {
+  const handleStartCandleTypesChange = useCallback((startId: string, candleTypes: string[]) => {
+    const types = candleTypes.length > 0 ? candleTypes : [DEFAULT_START_CANDLE];
+    const normalized = types.map(normalizeStartCandleType);
     onStartMetaChange?.({
       ...startMeta,
-      [startId]: { candleType: normalizeStartCandleType(candleType) },
+      [startId]: { candleTypes: normalized, candleType: normalized[0] },
     });
   }, [startMeta, onStartMetaChange]);
 
@@ -403,7 +405,7 @@ function StrategyEditorCanvasInner({
     onExtraStartIdsChange?.([...extraStartIds, newId]);
     onStartMetaChange?.({
       ...startMeta,
-      [newId]: { candleType: DEFAULT_START_CANDLE },
+      [newId]: { candleTypes: [DEFAULT_START_CANDLE], candleType: DEFAULT_START_CANDLE },
     });
     onExtraRootsChange?.({ ...extraRoots, [newId]: null });
     positionsRef.current.set(newId, {
@@ -675,18 +677,47 @@ function StrategyEditorCanvasInner({
     }
   }, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);
 
+  const handleChangeLogicGateType = useCallback((id: string, gateType: 'AND' | 'OR') => {
+    if (isOrphanNode(orphans, id)) {
+      onOrphansChange(orphans.map(o => (
+        o.id === id && (o.type === 'AND' || o.type === 'OR')
+          ? { ...o, type: gateType }
+          : o
+      )));
+      return;
+    }
+    if (root && findNodeInTree(root, id)) {
+      onChange(updateNode(root, id, n => (
+        n.type === 'AND' || n.type === 'OR' ? { ...n, type: gateType } : n
+      )));
+      return;
+    }
+    for (const [sid, branch] of Object.entries(extraRoots)) {
+      if (branch && findNodeInTree(branch, id)) {
+        onExtraRootsChange?.({
+          ...extraRoots,
+          [sid]: updateNode(branch, id, n => (
+            n.type === 'AND' || n.type === 'OR' ? { ...n, type: gateType } : n
+          )),
+        });
+        return;
+      }
+    }
+  }, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);
+
   const flowCallbacks = useMemo(() => ({
     onDelete: handleDelete,
     onUpdateCondition: handleUpdateCondition,
+    onChangeLogicGateType: handleChangeLogicGateType,
     onDropTarget: handleDropTarget,
     onDragOverTarget: handleDragOverTarget,
     onDragLeaveTarget: handleDragLeaveTarget,
-    onStartCandleTypeChange: handleStartCandleTypeChange,
+    onStartCandleTypesChange: handleStartCandleTypesChange,
     onDeleteStart: handleDeleteStart,
   }), [
-    handleDelete, handleUpdateCondition, handleDropTarget,
-    handleDragOverTarget, handleDragLeaveTarget,
-    handleStartCandleTypeChange, handleDeleteStart,
+    handleDelete, handleUpdateCondition, handleChangeLogicGateType,
+    handleDropTarget, handleDragOverTarget, handleDragLeaveTarget,
+    handleStartCandleTypesChange, handleDeleteStart,
   ]);
 
   const rebuildFlow = useCallback(() => logicNodeToFlow(

frontend/src/components/strategyEditor/StrategyListEditor.tsx

@@ -16,11 +16,13 @@ import {
   type EditorConditionState,
   addExtraStartSection,
   updateBranchRoot,
-  updateStartCandleType,
+  updateStartCandleTypes,
   removeStartSection,
   collectStartSections,
 } from '../../utils/strategyConditionSerde';
-import { STRATEGY_CANDLE_TYPES } from '../../utils/strategyStartNodes';
+import StartTimeframeCheckboxes from './StartTimeframeCheckboxes';
+import LogicGateOpToggle from './LogicGateOpToggle';
+import { formatStartCandleTypesLabel } from '../../utils/strategyStartNodes';
 
 const NODE_COLORS: Record<string, string> = {
   AND: '#4caf50',
@@ -116,6 +118,13 @@ const TreeNodeComp: React.FC<TreeNodeProps> = ({
         </span>
         <span className="sp-node-label">{label}</span>
         <div className="sp-node-actions">
+          {(node.type === 'AND' || node.type === 'OR') && (
+            <LogicGateOpToggle
+              value={node.type}
+              onChange={op => onUpdate({ ...node, type: op })}
+              compact
+            />
+          )}
           {showSettings && (
             <button
               type="button"
@@ -180,7 +189,7 @@ const TreeNodeComp: React.FC<TreeNodeProps> = ({
 
 interface StartSectionBlockProps {
   startId: string;
-  candleType: string;
+  candleTypes: string[];
   root: LogicNode | null;
   canDelete: boolean;
   signalTab: 'buy' | 'sell';
@@ -188,14 +197,14 @@ interface StartSectionBlockProps {
   dragOverKey: string | null;
   setDragOverKey: (key: string | null) => void;
   onRootChange: (root: LogicNode | null) => void;
-  onCandleTypeChange: (candleType: string) => void;
+  onCandleTypesChange: (candleTypes: string[]) => void;
   onDeleteStart?: () => void;
   onAddStart?: () => void;
 }
 
 function StartSectionBlock({
   startId,
-  candleType,
+  candleTypes,
   root,
   canDelete,
   signalTab,
@@ -203,7 +212,7 @@ function StartSectionBlock({
   dragOverKey,
   setDragOverKey,
   onRootChange,
-  onCandleTypeChange,
+  onCandleTypesChange,
   onDeleteStart,
   onAddStart,
 }: StartSectionBlockProps) {
@@ -250,16 +259,11 @@ function StartSectionBlock({
       <header className="sp-start-head">
         <span className="sp-start-dot" aria-hidden />
         <span className="sp-start-label">START</span>
-        <select
-          className="sp-start-tf"
-          value={candleType}
-          title="조건 판별 시간봉"
-          onChange={e => onCandleTypeChange(e.target.value)}
-        >
-          {STRATEGY_CANDLE_TYPES.map(ct => (
-            <option key={ct} value={ct}>{ct}</option>
-          ))}
-        </select>
+        <StartTimeframeCheckboxes
+          className="sp-start-tf-checks"
+          selected={candleTypes}
+          onChange={onCandleTypesChange}
+        />
         {canDelete && (
           <button type="button" className="sp-start-del" title="START 삭제" onClick={onDeleteStart}>×</button>
         )}
@@ -277,7 +281,7 @@ function StartSectionBlock({
       >
         {!root ? (
           <div className="sp-drop-empty sp-drop-empty--section">
-            논리 연산자·지표를 드래그하여 [{candleType}] 조건을 구성하세요.
+            논리 연산자·지표를 드래그하여 [{formatStartCandleTypesLabel(candleTypes)}] 조건을 구성하세요.
           </div>
         ) : (
           <TreeNodeComp
@@ -332,8 +336,8 @@ export default function StrategyListEditor({
     onEditorStateChange(updateBranchRoot(editorState, startId, root));
   }, [editorState, onEditorStateChange]);
 
-  const handleCandleTypeChange = useCallback((startId: string, candleType: string) => {
-    onEditorStateChange(updateStartCandleType(editorState, startId, candleType));
+  const handleCandleTypesChange = useCallback((startId: string, candleTypes: string[]) => {
+    onEditorStateChange(updateStartCandleTypes(editorState, startId, candleTypes));
   }, [editorState, onEditorStateChange]);
 
   const handleDeleteStart = useCallback((startId: string) => {
@@ -375,7 +379,7 @@ export default function StrategyListEditor({
         <StartSectionBlock
           key={section.startId}
           startId={section.startId}
-          candleType={section.candleType}
+          candleTypes={section.candleTypes}
           root={section.root}
           canDelete={section.canDelete}
           signalTab={signalTab}
@@ -383,7 +387,7 @@ export default function StrategyListEditor({
           dragOverKey={dragOverKey}
           setDragOverKey={setDragOverKey}
           onRootChange={root => handleRootChange(section.startId, root)}
-          onCandleTypeChange={ct => handleCandleTypeChange(section.startId, ct)}
+          onCandleTypesChange={types => handleCandleTypesChange(section.startId, types)}
           onDeleteStart={section.canDelete ? () => handleDeleteStart(section.startId) : undefined}
           onAddStart={handleAddStart}
         />

frontend/src/components/trendSearch/TrendSearchCardChart.tsx

@@ -24,6 +24,7 @@ interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
 }
 
 const noop = () => {};
@@ -42,6 +43,7 @@ const TrendSearchCardChart: React.FC<Props> = ({
   theme = 'dark',
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
 }) => {
   const chartTf = toChartTimeframe(timeframe);
   const { getParams, getVisualConfig } = useIndicatorSettings();
@@ -196,6 +198,7 @@ const TrendSearchCardChart: React.FC<Props> = ({
           volumeVisible
           showHoverToolbar={false}
           seriesPriceLabelsEnabled={chartSeriesPriceLabels}
+          paneSeparatorOptions={chartPaneSeparator}
         />
       </div>
     </div>

frontend/src/components/trendSearch/TrendSearchChartPanel.tsx

@@ -20,6 +20,7 @@ interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
 }
 
 const noop = () => {};
@@ -39,6 +40,7 @@ const TrendSearchChartPanel: React.FC<Props> = ({
   theme = 'dark',
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
 }) => {
   const chartTf = toChartTimeframe(timeframe);
   const { getParams, getVisualConfig } = useIndicatorSettings();
@@ -183,6 +185,7 @@ const TrendSearchChartPanel: React.FC<Props> = ({
           volumeVisible
           showHoverToolbar={false}
           seriesPriceLabelsEnabled={chartSeriesPriceLabels}
+          paneSeparatorOptions={chartPaneSeparator}
         />
       </div>
     </div>

frontend/src/components/trendSearch/TrendSearchResultCard.tsx

@@ -22,6 +22,7 @@ interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
   ticker?: TickerData;
   updatedAt?: number;
   flash?: boolean;
@@ -58,6 +59,7 @@ const TrendSearchResultCard: React.FC<Props> = ({
   theme = 'dark',
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
   ticker,
   updatedAt,
   flash = false,
@@ -139,6 +141,7 @@ const TrendSearchResultCard: React.FC<Props> = ({
           theme={theme}
           chartRealtimeSource={chartRealtimeSource}
           chartSeriesPriceLabels={chartSeriesPriceLabels}
+          chartPaneSeparator={chartPaneSeparator}
         />
       ) : (
         <TrendSearchCardSignalPanel

frontend/src/components/trendSearch/TrendSearchResultsCardGrid.tsx

@@ -17,6 +17,7 @@ interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
   tickers?: Map<string, TickerData>;
   lastUpdatedAt?: number;
   isInTargets?: (market: string) => boolean;
@@ -37,6 +38,7 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
   theme = 'dark',
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
   tickers,
   lastUpdatedAt,
   isInTargets,
@@ -84,6 +86,7 @@ const TrendSearchResultsCardGrid: React.FC<Props> = ({
             theme={theme}
             chartRealtimeSource={chartRealtimeSource}
             chartSeriesPriceLabels={chartSeriesPriceLabels}
+            chartPaneSeparator={chartPaneSeparator}
             ticker={tickers?.get(row.market)}
             updatedAt={lastUpdatedAt}
             flash={flashMarkets?.has(row.market)}

frontend/src/components/verificationBoard/VerificationIssueToastStack.tsx

@@ -43,7 +43,7 @@ const VerificationIssueToastStack: React.FC<Props> = ({ onGoToIssue }) => {
             <VerificationStageIcon stage={item.stage} size={18} />
             <div className="vbd-toast-head-text">
               <p className="vbd-toast-kind">{headline(item.eventType, item.stage, item.previousStage)}</p>
-              <h4 className="vbd-toast-title">{item.title}</h4>
+              <p className="vbd-toast-title">{item.title}</p>
             </div>
             <button
               type="button"

frontend/src/components/virtual/VirtualLeftTargetPanel.tsx

@@ -9,6 +9,11 @@ import {
   isVirtualTargetAddAllowed,
   virtualTargetLimitMessage,
 } from '../../utils/virtualTargetLimits';
+import {
+  defaultStrategyOptionLabel,
+  parseTargetStrategySelectValue,
+  targetStrategySelectValue,
+} from '../../utils/virtualTargetStrategy';
 
 interface Props {
   targets: VirtualTargetItem[];
@@ -72,7 +77,7 @@ const VirtualLeftTargetPanel: React.FC<Props> = ({
       ...targets,
       {
         market,
-        strategyId: globalStrategyId,
+        strategyId: null,
         koreanName: names.koreanName,
         englishName: names.englishName,
       },
@@ -192,15 +197,19 @@ const VirtualLeftTargetPanel: React.FC<Props> = ({
                   <span className="vtd-target-strategy-label">투자전략</span>
                   <select
                     className="vtd-target-strategy-select"
-                    value={item.strategyId ?? globalStrategyId ?? ''}
+                    value={targetStrategySelectValue(item)}
                     onChange={e => {
-                      const v = e.target.value;
-                      onTargetStrategyChange(item.market, v ? Number(v) : null);
+                      onTargetStrategyChange(
+                        item.market,
+                        parseTargetStrategySelectValue(e.target.value),
+                      );
                     }}
                   >
-                    <option value="">— 선택 —</option>
+                    <option value={targetStrategySelectValue({ strategyId: null })}>
+                      {defaultStrategyOptionLabel(globalStrategyId, strategies)}
+                    </option>
                     {strategies.map(s => (
-                      <option key={s.id} value={s.id}>{s.name}</option>
+                      <option key={s.id} value={String(s.id)}>{s.name}</option>
                     ))}
                   </select>
                 </div>

frontend/src/components/virtual/VirtualTargetCard.tsx

@@ -42,6 +42,7 @@ interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
   chartLiveReceiveHighlight?: boolean;
   ticker?: TickerData;
 }
@@ -68,6 +69,7 @@ const VirtualTargetCard: React.FC<Props> = ({
   theme = 'dark',
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
   chartLiveReceiveHighlight = true,
   ticker,
 }) => {
@@ -174,6 +176,7 @@ const VirtualTargetCard: React.FC<Props> = ({
           running={running}
           chartRealtimeSource={chartRealtimeSource}
           chartSeriesPriceLabels={chartSeriesPriceLabels}
+          chartPaneSeparator={chartPaneSeparator}
           chartTimeframe={chartTimeframe}
         />
       ) : (

frontend/src/components/virtual/VirtualTargetCardChart.tsx

@@ -31,6 +31,7 @@ interface Props {
   chartRealtimeSource?: ChartRealtimeSource;
   /** 차트 설정 — 지표 가격축 라벨·설명 */
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
   /** 전체보기 분할 pane — 캔버스 높이 100% */
   fillHeight?: boolean;
   /** 카드 푸터 평가 분봉과 동기화 */
@@ -46,6 +47,7 @@ const VirtualTargetCardChart: React.FC<Props> = ({
   running = false,
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
   fillHeight = false,
   chartTimeframe,
 }) => {
@@ -217,6 +219,7 @@ const VirtualTargetCardChart: React.FC<Props> = ({
           volumeVisible={false}
           showHoverToolbar={false}
           seriesPriceLabelsEnabled={chartSeriesPriceLabels}
+          paneSeparatorOptions={chartPaneSeparator}
         />
       </div>
 

frontend/src/components/virtual/VirtualTargetCardFoot.tsx

@@ -3,6 +3,11 @@ import type { StrategyDto } from '../../utils/backendApi';
 import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
 import { formatUpdatedTime } from '../../utils/virtualSignalMetrics';
 import { STRATEGY_CANDLE_TYPE_OPTIONS } from '../../utils/strategyStartNodes';
+import {
+  defaultStrategyOptionLabel,
+  parseTargetStrategySelectValue,
+  targetStrategySelectValue,
+} from '../../utils/virtualTargetStrategy';
 
 interface Props {
   snapshot: VirtualIndicatorSnapshot | undefined;
@@ -31,15 +36,16 @@ const VirtualTargetCardFoot: React.FC<Props> = ({
         <select
           className="vtd-card-foot-select"
           aria-label="투자전략"
-          value={strategyId ?? globalStrategyId ?? ''}
+          value={targetStrategySelectValue({ strategyId })}
           onChange={e => {
-            const v = e.target.value;
-            onStrategyChange?.(v ? Number(v) : null);
+            onStrategyChange?.(parseTargetStrategySelectValue(e.target.value));
           }}
         >
-          <option value="">— 선택 —</option>
+          <option value={targetStrategySelectValue({ strategyId: null })}>
+            {defaultStrategyOptionLabel(globalStrategyId, strategies)}
+          </option>
           {strategies.map(s => (
-            <option key={s.id} value={s.id}>{s.name}</option>
+            <option key={s.id} value={String(s.id)}>{s.name}</option>
           ))}
         </select>
       </label>

frontend/src/components/virtual/VirtualTargetFocusView.tsx

@@ -35,6 +35,7 @@ interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
   chartLiveReceiveHighlight?: boolean;
   ticker?: TickerData;
 }
@@ -58,6 +59,7 @@ const VirtualTargetFocusView: React.FC<Props> = ({
   theme = 'dark',
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
   chartLiveReceiveHighlight = true,
   ticker,
 }) => {
@@ -114,6 +116,7 @@ const VirtualTargetFocusView: React.FC<Props> = ({
               running={running}
               chartRealtimeSource={chartRealtimeSource}
               chartSeriesPriceLabels={chartSeriesPriceLabels}
+              chartPaneSeparator={chartPaneSeparator}
               fillHeight
               chartTimeframe={chartTimeframe}
             />

frontend/src/components/virtual/VirtualTargetGrid.tsx

@@ -13,6 +13,7 @@ import {
 import type { VirtualLiveStatus } from '../../hooks/useVirtualTargetLiveStatus';
 import type { VirtualIndicatorSnapshot } from '../../hooks/useVirtualIndicatorSnapshots';
 import type { TickerData } from '../../hooks/useMarketTicker';
+import { resolveVirtualTargetStrategyId } from '../../utils/virtualTargetStrategy';
 
 interface Props {
   targets: VirtualTargetItem[];
@@ -28,6 +29,7 @@ interface Props {
   theme?: Theme;
   chartRealtimeSource?: ChartRealtimeSource;
   chartSeriesPriceLabels?: boolean;
+  chartPaneSeparator?: import('../../types/chartPaneSeparator').ChartPaneSeparatorOptions;
   chartLiveReceiveHighlight?: boolean;
   tickers?: Map<string, TickerData>;
   viewMode: VirtualCardViewMode;
@@ -44,6 +46,7 @@ const VirtualTargetGrid: React.FC<Props> = ({
   theme = 'dark',
   chartRealtimeSource = 'BACKEND_STOMP',
   chartSeriesPriceLabels = true,
+  chartPaneSeparator,
   chartLiveReceiveHighlight = true,
   tickers,
   viewMode,
@@ -111,7 +114,7 @@ const VirtualTargetGrid: React.FC<Props> = ({
       {focusMarket && focusTarget ? (
         <VirtualTargetFocusView
           market={focusTarget.market}
-          strategy={strategies.find(s => s.id === (focusTarget.strategyId ?? session.globalStrategyId))}
+          strategy={strategies.find(s => s.id === resolveVirtualTargetStrategyId(focusTarget, session.globalStrategyId))}
           strategies={strategies}
           strategyId={focusTarget.strategyId}
           globalStrategyId={session.globalStrategyId}
@@ -127,13 +130,14 @@ const VirtualTargetGrid: React.FC<Props> = ({
           theme={theme}
           chartRealtimeSource={chartRealtimeSource}
           chartSeriesPriceLabels={chartSeriesPriceLabels}
+          chartPaneSeparator={chartPaneSeparator}
           chartLiveReceiveHighlight={chartLiveReceiveHighlight}
           ticker={tickers?.get(focusTarget.market)}
         />
       ) : (
         <div className={`vtd-grid vtd-grid--${viewMode}`}>
           {targets.map(t => {
-            const strat = strategies.find(s => s.id === (t.strategyId ?? session.globalStrategyId));
+            const strat = strategies.find(s => s.id === resolveVirtualTargetStrategyId(t, session.globalStrategyId));
             return (
               <VirtualTargetCard
                 key={t.market}
@@ -158,6 +162,7 @@ const VirtualTargetGrid: React.FC<Props> = ({
                 theme={theme}
                 chartRealtimeSource={chartRealtimeSource}
                 chartSeriesPriceLabels={chartSeriesPriceLabels}
+          chartPaneSeparator={chartPaneSeparator}
                 chartLiveReceiveHighlight={chartLiveReceiveHighlight}
                 ticker={tickers?.get(t.market)}
               />

frontend/src/hooks/useAppSettings.ts

@@ -45,6 +45,10 @@ import {
   resolveTrendSearchAppSettings,
   type TrendSearchAppSettings,
 } from '../utils/trendSearchAppSettings';
+import {
+  resolveChartPaneSeparatorOptions,
+  type ChartPaneSeparatorOptions,
+} from '../types/chartPaneSeparator';
 
 // 전역 캐시 — 여러 컴포넌트에서 공유하여 중복 요청 방지
 let _cache: AppSettingsDto | null = null;
@@ -104,6 +108,10 @@ export function resolveAppDefaults(s: AppSettingsDto) {
     chartLegendOptions:     resolveChartLegendOptions(
       s.chartLegendOptions as Partial<ChartLegendVisibility> | null | undefined,
     ),
+    chartPaneSeparator:     resolveChartPaneSeparatorOptions(
+      s.chartPaneSeparator as Partial<ChartPaneSeparatorOptions> | null | undefined,
+      (s.defaultTheme ?? 'dark') as Theme,
+    ),
     tradeAlertPopup:  s.tradeAlertPopup  ?? true,
     tradeAlertSoundEnabled: s.tradeAlertSoundEnabled ?? true,
     tradeAlertSound:  s.tradeAlertSound  ?? 'bell',

frontend/src/styles/paperDashboard.css

@@ -285,13 +285,24 @@
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
-  gap: clamp(3px, 1.4cqh, 10px);
+  justify-content: flex-start;
+  gap: clamp(4px, 1.2cqh, 10px);
   overflow: hidden;
   overscroll-behavior: contain;
   padding: 2px 2px 0;
 }
 
+.ptd-split-panel--right .ptd-order-card .top-panel-fields {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: clamp(4px, 1.2cqh, 10px);
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .ptd-split-panel--right .ptd-order-card .top-paper-hint {
   flex-shrink: 0;
   margin: 0;
@@ -313,15 +324,30 @@
 }
 
 .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-  flex: 1 1 0;
+  flex: 0 0 auto;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  justify-content: space-evenly;
-  gap: clamp(2px, 1.2cqh, 8px);
+  justify-content: flex-start;
+  gap: clamp(4px, 1.2cqh, 8px);
   margin: 0;
 }
 
+.ptd-split-panel--right .ptd-order-card .top-pct-row--block {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn {
+  flex: 1 1 calc(20% - 4px);
+  min-width: 2.4rem;
+}
+
+.ptd-split-panel--right .ptd-order-card .top-pct-row--block .top-pct-btn--direct {
+  flex: 1 1 calc(33% - 4px);
+  min-width: 3.2rem;
+}
+
 .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-field,
 .ptd-split-panel--right .ptd-order-card .top-price-qty-block .top-pct-row--block {
   margin: 0;
@@ -359,7 +385,7 @@
 
 .ptd-split-panel--right .ptd-order-card .top-actions {
   flex-shrink: 0;
-  margin-top: 0;
+  margin-top: auto;
   gap: clamp(6px, 1.4cqh, 8px);
 }
 
@@ -649,8 +675,11 @@
   .ptd-split-panel--right .ptd-order-card > .top-panel {
     gap: clamp(6px, 2cqh, 14px);
   }
+  .ptd-split-panel--right .ptd-order-card .top-panel-fields {
+    gap: clamp(6px, 1.8cqh, 12px);
+  }
   .ptd-split-panel--right .ptd-order-card .top-price-qty-block {
-    gap: clamp(4px, 1.8cqh, 12px);
+    gap: clamp(6px, 1.8cqh, 12px);
   }
 }
 
@@ -662,8 +691,8 @@
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     column-gap: 8px;
-    row-gap: 4px;
-    align-content: space-evenly;
+    row-gap: 6px;
+    align-content: start;
   }
   .ptd-order-card .top-price-qty-block .top-field--price { grid-column: 1; grid-row: 1; }
   .ptd-order-card .top-price-qty-block .top-field--qty { grid-column: 2; grid-row: 1; }

frontend/src/styles/strategyEditor.css

@@ -158,14 +158,100 @@
   color: var(--se-node-start-accent, var(--se-gold));
 }
 
-.sp-start-tf {
-  font-size: 0.72rem;
-  padding: 3px 6px;
-  border-radius: 4px;
-  border: 1px solid color-mix(in srgb, var(--se-node-start-border) 80%, transparent);
-  background: color-mix(in srgb, var(--se-bg) 75%, transparent);
-  color: var(--se-text);
+.sp-start-tf-checks {
+  flex: 1;
+  min-width: 0;
+}
+
+.se-start-tf-checks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  align-items: center;
+}
+
+.se-start-tf-checks--compact {
+  gap: 2px 5px;
+}
+
+.se-start-tf-check {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 0.62rem;
+  color: var(--se-text-muted);
   cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.se-start-tf-checks--compact .se-start-tf-check {
+  font-size: 0.58rem;
+}
+
+.se-start-tf-check input {
+  margin: 0;
+  accent-color: var(--se-node-start-accent, var(--se-gold));
+  cursor: pointer;
+}
+
+.se-start-tf-check:has(input:checked) {
+  color: var(--se-text);
+  font-weight: 600;
+}
+
+.se-flow-start-tf-checks-wrap {
+  width: 100%;
+}
+
+.se-start-tf-checks--graph {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  column-gap: 2px;
+  row-gap: 4px;
+  width: 100%;
+}
+
+.se-start-tf-checks-row {
+  display: contents;
+}
+
+.se-start-tf-checks--graph .se-start-tf-check {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 3px;
+  font-size: 0.58rem;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.se-start-tf-checks--graph .se-start-tf-check input {
+  flex-shrink: 0;
+}
+
+.se-flow-start-layout {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+  width: 100%;
+}
+
+.se-flow-start-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  width: 100%;
+}
+
+.se-flow-start-title-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
 }
 
 .sp-start-del {
@@ -877,12 +963,6 @@
   border-color: color-mix(in srgb, var(--se-sell) 42%, transparent);
   box-shadow: 0 0 18px color-mix(in srgb, var(--se-sell) 16%, transparent);
 }
-.se-flow-start-head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-}
 .se-flow-start-label {
   font-weight: 700;
   font-size: 0.72rem;
@@ -890,22 +970,6 @@
   flex-shrink: 0;
   color: var(--se-node-start-accent, var(--se-gold));
 }
-.se-flow-start-tf {
-  flex: 1;
-  min-width: 0;
-  max-width: 72px;
-  font-size: 0.65rem;
-  padding: 2px 4px;
-  border-radius: 4px;
-  border: 1px solid color-mix(in srgb, var(--se-node-start-border) 80%, transparent);
-  background: color-mix(in srgb, var(--se-bg) 70%, transparent);
-  color: var(--se-text);
-  cursor: pointer;
-}
-.se-flow-start-tf:focus {
-  outline: none;
-  border-color: var(--se-accent);
-}
 .se-flow-del--start {
   position: static;
   flex-shrink: 0;
@@ -932,6 +996,19 @@
   box-shadow: 0 0 20px color-mix(in srgb, var(--se-sell) 15%, transparent);
 }
 
+.se-flow-gate-head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.se-logic-gate-toggle {
+  display: inline-flex;
+}
+.se-logic-gate-toggle--compact .se-start-combine-btn {
+  padding: 3px 9px;
+  font-size: 0.68rem;
+  min-width: 0;
+}
 .se-flow-gate-badge {
   font-weight: 800;
   font-size: 0.88rem;

frontend/src/styles/verificationBoard.css

@@ -850,16 +850,22 @@
   background: var(--hover);
 }
 
-/* 검증 이슈 알림 팝업 */
+/* 검증 이슈 알림 팝업 — body 포털(.app 밖) · 매매 시그널 팝업(tsn-)과 동일 톤 */
+html.theme-dark .vbd-toast-stack,
+html.theme-light .vbd-toast-stack,
+html.theme-blue .vbd-toast-stack {
+  color: var(--text);
+}
+
 .vbd-toast-stack {
   position: fixed;
   left: 16px;
   bottom: 16px;
-  z-index: 6500;
+  z-index: 20002;
   display: flex;
   flex-direction: column;
   gap: 10px;
-  width: min(360px, calc(100vw - 32px));
+  width: min(380px, calc(100vw - 32px));
   pointer-events: none;
 }
 
@@ -869,31 +875,42 @@
   justify-content: space-between;
   gap: 8px;
   pointer-events: auto;
+  padding-bottom: 2px;
 }
 
 .vbd-toast-toolbar-label {
   font-size: 11px;
   font-weight: 600;
-  color: var(--text-muted);
+  color: var(--text2, var(--text-muted));
 }
 
 .vbd-toast-dismiss-all {
-  border: none;
-  background: transparent;
-  color: var(--accent);
   font-size: 11px;
+  padding: 5px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--border, rgba(122, 162, 247, 0.2));
+  background: var(--bg3, #1a1b26);
+  color: var(--text2, #a9b1d6);
   cursor: pointer;
-  padding: 2px 4px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.vbd-toast-dismiss-all:hover {
+  background: var(--bg4, var(--hover));
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
 }
 
 .vbd-toast-card {
   pointer-events: auto;
-  padding: 12px 14px;
+  padding: 12px 14px 10px;
   border-radius: 10px;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  box-shadow: var(--popup-shadow);
-  animation: vbd-toast-in 0.22s ease-out;
+  border: 1px solid var(--border, rgba(122, 162, 247, 0.25));
+  background: var(--bg2, #1e2030);
+  color: var(--text);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+  animation: vbd-toast-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 @keyframes vbd-toast-in {
@@ -915,50 +932,71 @@
 .vbd-toast-kind {
   margin: 0 0 4px;
   font-size: 11px;
-  color: var(--text-muted);
+  font-weight: 500;
+  color: var(--text2, var(--text-muted));
+  line-height: 1.35;
 }
 
 .vbd-toast-title {
   margin: 0;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  line-height: 1.35;
+  line-height: 1.4;
+  color: var(--text);
   word-break: break-word;
 }
 
 .vbd-toast-close {
+  flex-shrink: 0;
   border: none;
   background: transparent;
-  color: var(--text-muted);
-  font-size: 14px;
-  cursor: pointer;
-  padding: 0 2px;
+  color: var(--text3, var(--text-muted));
+  font-size: 18px;
   line-height: 1;
+  cursor: pointer;
+  padding: 0 4px;
+  transition: color 0.15s;
+}
+
+.vbd-toast-close:hover {
+  color: var(--text);
 }
 
 .vbd-toast-meta {
   margin-top: 8px;
 }
 
+.vbd-toast-meta .vbd-stage-badge {
+  font-size: 10px;
+}
+
 .vbd-toast-actions {
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
+  padding-top: 2px;
 }
 
 .vbd-toast-go {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 10px;
+  padding: 6px 12px;
   border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
   border-radius: 6px;
-  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg2, var(--panel)));
   color: var(--accent);
   font-size: 12px;
+  font-weight: 500;
   cursor: pointer;
+  transition: background 0.15s, border-color 0.15s;
 }
 
 .vbd-toast-go:hover {
-  background: color-mix(in srgb, var(--accent) 18%, var(--panel));
+  background: color-mix(in srgb, var(--accent) 22%, var(--bg2, var(--panel)));
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+}
+
+.vbd-toast-go svg {
+  flex-shrink: 0;
 }

frontend/src/types/chartPaneSeparator.ts

@@ -0,0 +1,59 @@
+import type { Theme } from '../types';
+import type { HLineStyle } from '../utils/indicatorRegistry';
+
+/** 캔들·거래량·보조지표 pane 사이 구분선 */
+export interface ChartPaneSeparatorOptions {
+  visible: boolean;
+  color: string;
+  width: 1 | 2 | 3 | 4;
+  lineStyle: HLineStyle;
+}
+
+export const DEFAULT_CHART_PANE_SEPARATOR: ChartPaneSeparatorOptions = {
+  visible: true,
+  color: '#2a2e3a',
+  width: 1,
+  lineStyle: 'solid',
+};
+
+const THEME_DEFAULT_COLORS: Record<Theme, string> = {
+  dark:  'rgba(122, 162, 247, 0.15)',
+  light: 'rgba(0, 0, 0, 0.08)',
+  blue:  'rgba(94, 181, 255, 0.15)',
+};
+
+export function themeDefaultPaneSeparatorColor(theme: Theme): string {
+  return THEME_DEFAULT_COLORS[theme] ?? THEME_DEFAULT_COLORS.dark;
+}
+
+export function resolveChartPaneSeparatorOptions(
+  raw?: Partial<ChartPaneSeparatorOptions> | null,
+  theme: Theme = 'dark',
+): ChartPaneSeparatorOptions {
+  const base = { ...DEFAULT_CHART_PANE_SEPARATOR };
+  if (!raw || typeof raw !== 'object') {
+    return { ...base, color: themeDefaultPaneSeparatorColor(theme) };
+  }
+  if (typeof raw.visible === 'boolean') base.visible = raw.visible;
+  if (typeof raw.color === 'string' && raw.color.trim()) base.color = raw.color.trim();
+  else base.color = themeDefaultPaneSeparatorColor(theme);
+  const w = Number(raw.width);
+  if (w >= 1 && w <= 4) base.width = Math.round(w) as 1 | 2 | 3 | 4;
+  if (raw.lineStyle === 'solid' || raw.lineStyle === 'dashed' || raw.lineStyle === 'dotted') {
+    base.lineStyle = raw.lineStyle;
+  }
+  return base;
+}
+
+/** LWC pane 구분선 — 커스텀 오버레이 사용 시 투명 처리 */
+export function applyPaneSeparatorToChartOptions(opts: ChartPaneSeparatorOptions) {
+  return {
+    layout: {
+      panes: {
+        enableResize: false,
+        separatorColor: 'transparent',
+        separatorHoverColor: 'transparent',
+      },
+    },
+  } as const;
+}

frontend/src/utils/ChartManager.ts

@@ -39,8 +39,15 @@ import {
   getIchimokuPlotTitle,
   isIchimokuCloudVisible,
   resolveIchimokuCloudColors,
+  resolveIchimokuDisplacements,
 } from './ichimokuConfig';
 import type { PlotDef, HLineStyle } from './indicatorRegistry';
+import { mapHistogramSeriesData, histogramBarColor } from './plotColorUtils';
+import {
+  applyPaneSeparatorToChartOptions,
+  resolveChartPaneSeparatorOptions,
+  type ChartPaneSeparatorOptions,
+} from '../types/chartPaneSeparator';
 
 function plotSeriesLineStyle(style?: HLineStyle): number {
   if (style === 'dashed') return LineStyle.Dashed;
@@ -217,6 +224,10 @@ export class ChartManager {
   /** 차트 하단 거래량 pane 표시 */
   private _volumeVisible = true;
 
+  /** pane 간 구분선 (설정 화면) */
+  private _paneSeparatorOptions: ChartPaneSeparatorOptions =
+    resolveChartPaneSeparatorOptions(null, 'dark');
+
   /** applyPaneLayout / resetPaneHeights 에서 측정한 마지막 가용 높이(px) */
   private _lastLayoutAvailableHeight?: number;
 
@@ -231,7 +242,7 @@ export class ChartManager {
         background: { type: ColorType.Solid, color: t.bgColor },
         textColor:  t.textColor,
         fontSize:   12,
-        panes: { enableResize: false },
+        panes: { enableResize: false, separatorColor: 'transparent', separatorHoverColor: 'transparent' },
       },
       grid: {
         vertLines: { color: t.gridColor },
@@ -258,6 +269,8 @@ export class ChartManager {
     });
 
     this._applyDisplayTimezoneOptions();
+    this._paneSeparatorOptions = resolveChartPaneSeparatorOptions(null, theme);
+    this.chart.applyOptions(applyPaneSeparatorToChartOptions(this._paneSeparatorOptions));
 
     // 크로스헤어 이동 시 hover 중인 시리즈 추적 (오버레이 클릭 감지에 사용)
     this.chart.subscribeCrosshairMove((params: MouseEventParams<Time>) => {
@@ -470,7 +483,11 @@ export class ChartManager {
     this.currentTheme = theme;
     const t = getTheme(theme);
     this.chart.applyOptions({
-      layout:    { background: { type: ColorType.Solid, color: t.bgColor }, textColor: t.textColor },
+      layout:    {
+        background: { type: ColorType.Solid, color: t.bgColor },
+        textColor: t.textColor,
+        panes: applyPaneSeparatorToChartOptions(this._paneSeparatorOptions).layout.panes,
+      },
       grid:      { vertLines: { color: t.gridColor }, horzLines: { color: t.gridColor } },
       crosshair: { vertLine: { color: t.crosshairColor, labelBackgroundColor: '#9598A1' }, horzLine: { color: t.crosshairColor, labelBackgroundColor: '#9598A1' } },
       timeScale: { borderColor: t.borderColor },
@@ -480,6 +497,20 @@ export class ChartManager {
     this._applyVolumeSeriesTheme(t);
   }
 
+  getContainer(): HTMLElement {
+    return this.container;
+  }
+
+  getPaneSeparatorOptions(): ChartPaneSeparatorOptions {
+    return this._paneSeparatorOptions;
+  }
+
+  setPaneSeparatorOptions(opts: ChartPaneSeparatorOptions): void {
+    this._paneSeparatorOptions = opts;
+    this.chart.applyOptions(applyPaneSeparatorToChartOptions(opts));
+    this._notifyPaneLayout();
+  }
+
   private _applyMainSeriesTheme(t: ThemeTokens): void {
     if (!this.mainSeries) return;
     switch (this.currentChartType) {
@@ -582,14 +613,7 @@ export class ChartManager {
         let series: ISeriesApi<SeriesType>;
         if (plotDef.type === 'histogram') {
           series = this.chart.addSeries(HistogramSeries, { color: plotDef.color }, pane);
-          const colorData = filtered.map((p, i, arr) => ({
-            time:  p.time as Time,
-            value: p.value,
-            color: p.color ?? (i > 0 && p.value < arr[i - 1].value
-              ? '#ef535088'
-              : p.value < 0 ? '#ef535088' : `${plotDef.color}88`),
-          }));
-          series.setData(colorData);
+          series.setData(mapHistogramSeriesData(filtered, plotDef));
           seriesMeta.push({ plotId: plotDef.id, isHistogram: true, color: plotDef.color });
         } else {
           const isPlotVisible = !indicatorHidden && config.plotVisibility?.[plotDef.id] !== false;
@@ -743,6 +767,8 @@ export class ChartManager {
       await this.addIndicator(ind);
     }
 
+    if (this._indicatorLoadStale(loadGen)) return;
+
     // 빈 pane stretch 정리 + 캔들 pane 비율 복구
     this.resetPaneHeights();
     this._notifyPaneLayout();
@@ -907,7 +933,7 @@ export class ChartManager {
     _config: IndicatorConfig,
     seriesList: ISeriesApi<SeriesType>[],
   ): Promise<{ cloudPlugin: IchimokuCloudPlugin; seriesMeta: IndicatorEntry['seriesMeta'] }> {
-    const displacement = (_config.params?.displacement as number) ?? 26;
+    const { senkou: displacement } = resolveIchimokuDisplacements(_config.params);
     const laggingPeriod = (_config.params?.laggingSpan2Periods as number) ?? 52;
     const seriesMeta: IndicatorEntry['seriesMeta'] = [];
 
@@ -1233,7 +1259,7 @@ export class ChartManager {
       // ── IchimokuCloud: SpanA/SpanB 미래 프로젝션 갱신 ──────────────────
       if (updateFutureSpans && entry.type === 'IchimokuCloud') {
         const config    = entry.config;
-        const disp      = (config.params?.displacement        as number) ?? 26;
+        const { senkou: disp } = resolveIchimokuDisplacements(config.params);
         const lagPeriod = (config.params?.laggingSpan2Periods as number) ?? 52;
         const convPlot  = (plots['plot0'] as PlotData) ?? [];
         const basePlot  = (plots['plot1'] as PlotData) ?? [];
@@ -1268,11 +1294,12 @@ export class ChartManager {
 
       // ── Histogram: 색상 재계산 ──────────────────────────────────────────
       if (meta.isHistogram) {
-        const prevVal  = plotData.length >= 2 ? plotData[plotData.length - 2]?.value : null;
-        const isDown   = prevVal !== null && (curVal as number) < (prevVal as number);
-        const isNeg    = (curVal as number) < 0;
-        const barColor = lastPoint.color
-          ?? (isDown || isNeg ? '#ef535088' : `${meta.color}88`);
+        const plotDef = (entry.config?.plots ?? getIndicatorDef(entry.type)?.plots ?? [])
+          .find(p => p.id === meta.plotId);
+        const prevVal = plotData.length >= 2 ? plotData[plotData.length - 2]?.value : null;
+        const barColor = plotDef
+          ? histogramBarColor(curVal as number, prevVal, plotDef, lastPoint.color)
+          : (lastPoint.color ?? '#26A69A88');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (entry.seriesList[i] as ISeriesApi<any>).update({
           time:  lastPoint.time as Time,
@@ -1294,6 +1321,29 @@ export class ChartManager {
     }
   }
 
+  /** histogram 막대 색상(상승/하락) 변경 후 전체 재색칠 */
+  private async _repaintHistogramSeries(indicatorId: string, config: IndicatorConfig): Promise<void> {
+    const entry = this.indicators.get(indicatorId);
+    if (!entry || this.rawBars.length === 0) return;
+    const plotDefs = config.plots ?? getIndicatorDef(config.type)?.plots ?? [];
+    const plotById = Object.fromEntries(plotDefs.map((p: PlotDef) => [p.id, p]));
+    try {
+      const { plots } = await calculateIndicator(config.type, this.rawBars.slice(), config.params ?? {});
+      for (let i = 0; i < entry.seriesList.length; i++) {
+        const meta = entry.seriesMeta[i];
+        if (!meta?.isHistogram) continue;
+        const plot = plotById[meta.plotId];
+        if (!plot) continue;
+        const plotData = plots[meta.plotId] as PlotData | undefined;
+        if (!plotData?.length) continue;
+        const filtered = plotData.filter(p => p.value !== null && !isNaN(p.value));
+        if (filtered.length === 0) continue;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (entry.seriesList[i] as ISeriesApi<any>).setData(mapHistogramSeriesData(filtered, plot));
+      }
+    } catch { /* ignore */ }
+  }
+
   /** 일목균형표 구름 플러그인 — 색상·가시성·데이터 동기화 */
   private _applyIchimokuCloudPlugin(
     plugin: IchimokuCloudPlugin,
@@ -1302,6 +1352,7 @@ export class ChartManager {
   ): void {
     const colors = resolveIchimokuCloudColors(config.cloudColors);
     plugin.setColors(colors.bullishColor, colors.bearishColor);
+    plugin.setVisibility(colors.bullishVisible !== false, colors.bearishVisible !== false);
 
     if (!isIchimokuCloudVisible(config)) {
       plugin.setCloudData([]);
@@ -1314,7 +1365,7 @@ export class ChartManager {
     const basePlot  = plots['plot1'] as PlotData ?? [];
     if (!spanAPlot || !spanBPlot) return;
 
-    const displacement  = (config.params?.displacement        as number) ?? 26;
+    const { senkou: displacement } = resolveIchimokuDisplacements(config.params);
     const laggingPeriod = (config.params?.laggingSpan2Periods as number) ?? 52;
 
     const cloud = this._buildIchimokuCloudData(
@@ -1990,6 +2041,12 @@ export class ChartManager {
     }
 
     entry.config = config;
+    if (entry.seriesMeta.some(m => m.isHistogram)) {
+      void this._repaintHistogramSeries(config.id, config);
+    }
+    if (entry.seriesMeta.some(m => m.isHistogram)) {
+      void this._repaintHistogramSeries(config.id, config);
+    }
 
     if (this._candleOnlyLayout && this._isSubPaneIndicator(entry)) {
       this._hideSubPaneIndicator(entry);
@@ -2773,18 +2830,10 @@ export class ChartManager {
           if (filtered.length === 0) continue;
 
           if (meta.isHistogram) {
+            const plotDef = (entry.config?.plots ?? getIndicatorDef(entry.type)?.plots ?? [])
+              .find(p => p.id === meta.plotId) ?? { id: meta.plotId, title: '', color: meta.color, type: 'histogram' as const };
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (series as ISeriesApi<any>).setData(
-              filtered.map((p, idx, arr) => ({
-                time:  p.time as Time,
-                value: p.value,
-                color: p.color ?? (
-                  idx > 0 && p.value < arr[idx - 1].value
-                    ? '#ef535088'
-                    : p.value < 0 ? '#ef535088' : `${meta.color}88`
-                ),
-              }))
-            );
+            (series as ISeriesApi<any>).setData(mapHistogramSeriesData(filtered, plotDef));
           } else {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (series as ISeriesApi<any>).setData(
@@ -2809,7 +2858,7 @@ export class ChartManager {
     entry:  IndicatorEntry,
     plots:  Record<string, PlotData>,
   ): void {
-    const displacement  = (entry.config?.params?.displacement        as number) ?? 26;
+    const { senkou: displacement } = resolveIchimokuDisplacements(entry.config?.params);
     const laggingPeriod = (entry.config?.params?.laggingSpan2Periods as number) ?? 52;
     const convPlot = (plots['plot0'] as PlotData) ?? [];
     const basePlot = (plots['plot1'] as PlotData) ?? [];

frontend/src/utils/IchimokuCloudPlugin.ts

@@ -43,6 +43,8 @@ class CloudRenderer implements IPrimitivePaneRenderer {
   private _data:   IchimokuCloudPoint[];
   private _bullishColor: string;
   private _bearishColor: string;
+  private _bullishVisible: boolean;
+  private _bearishVisible: boolean;
 
   constructor(
     chart:  IChartApiBase<Time>,
@@ -50,12 +52,16 @@ class CloudRenderer implements IPrimitivePaneRenderer {
     data:   IchimokuCloudPoint[],
     bullishColor: string,
     bearishColor: string,
+    bullishVisible: boolean,
+    bearishVisible: boolean,
   ) {
     this._chart  = chart;
     this._series = series;
     this._data   = data;
     this._bullishColor = bullishColor;
     this._bearishColor = bearishColor;
+    this._bullishVisible = bullishVisible;
+    this._bearishVisible = bearishVisible;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -81,6 +87,8 @@ class CloudRenderer implements IPrimitivePaneRenderer {
 
         // 한국 관례: SpanA > SpanB → 양운(빨강), SpanA <= SpanB → 음운(청록)
         const bullish = (a.spanA + b.spanA) > (a.spanB + b.spanB);
+        if (bullish && !this._bullishVisible) continue;
+        if (!bullish && !this._bearishVisible) continue;
 
         ctx.save();
         ctx.beginPath();
@@ -112,6 +120,8 @@ class CloudPaneView implements IPrimitivePaneView {
       this._plugin.getCloudData(),
       this._plugin.getBullishColor(),
       this._plugin.getBearishColor(),
+      this._plugin.getBullishVisible(),
+      this._plugin.getBearishVisible(),
     );
   }
 }
@@ -123,6 +133,8 @@ export class IchimokuCloudPlugin implements ISeriesPrimitive<Time> {
   private _data:     IchimokuCloudPoint[] = [];
   private _bullishColor = 'rgba(239, 83, 80, 0.2)';
   private _bearishColor = 'rgba(38, 166, 154, 0.2)';
+  private _bullishVisible = true;
+  private _bearishVisible = true;
   private _updateFn: (() => void) | null = null;
 
   attached({ chart, series, requestUpdate }: SeriesAttachedParameter<Time>): void {
@@ -147,8 +159,16 @@ export class IchimokuCloudPlugin implements ISeriesPrimitive<Time> {
     this._updateFn?.();
   }
 
+  setVisibility(bullishVisible: boolean, bearishVisible: boolean): void {
+    this._bullishVisible = bullishVisible;
+    this._bearishVisible = bearishVisible;
+    this._updateFn?.();
+  }
+
   getBullishColor() { return this._bullishColor; }
   getBearishColor() { return this._bearishColor; }
+  getBullishVisible() { return this._bullishVisible; }
+  getBearishVisible() { return this._bearishVisible; }
 
   paneViews(): readonly IPrimitivePaneView[] {
     if (!this._chart || !this._series) return [];

frontend/src/utils/backendApi.ts

@@ -392,6 +392,13 @@ export interface AppSettingsDto {
   chartLiveReceiveHighlight?: boolean;
   /** 차트 상단 범례(tv-legend) 항목별 표시 옵션 */
   chartLegendOptions?: Record<string, boolean> | null;
+  /** 차트 pane(캔들·거래량·보조지표) 구분선 */
+  chartPaneSeparator?: {
+    visible?: boolean;
+    color?: string;
+    width?: number;
+    lineStyle?: string;
+  } | null;
   /** 매매 시그널 발생 시 알림 팝업 표시 여부 (기본 true) */
   tradeAlertPopup?:  boolean;
   /** 매매 시그널 알림 사운드 ON/OFF */

frontend/src/utils/chartCandleType.ts

@@ -6,7 +6,8 @@ export function timeframeToCandleType(tf: Timeframe): string {
     case '1m': case '3m': case '5m': case '10m': case '15m': case '30m': case '1h': case '4h':
       return tf;
     case '1D': return '1d';
-    case '1W': case '1M': return '1d';
+    case '1W': return '1w';
+    case '1M': return '1d';
     default: return '1m';
   }
 }

frontend/src/utils/ichimokuConfig.ts

@@ -28,8 +28,8 @@ export function getIchimokuPlotTitle(plotId: string): string {
 export const ICHIMOKU_LINE_ROWS: IchimokuLineRowDef[] = [
   { plotIndex: 0, plotId: 'plot0', paramKey: 'conversionPeriods' },
   { plotIndex: 1, plotId: 'plot1', paramKey: 'basePeriods' },
-  { plotIndex: 2, plotId: 'plot2', paramKey: 'displacement' },
-  { plotIndex: 3, plotId: 'plot3' },
+  { plotIndex: 2, plotId: 'plot2', paramKey: 'chikouDisplacement' },
+  { plotIndex: 3, plotId: 'plot3', paramKey: 'senkouDisplacement' },
   { plotIndex: 4, plotId: 'plot4', paramKey: 'laggingSpan2Periods' },
 ];
 
@@ -37,9 +37,28 @@ export const ICHIMOKU_DEFAULT_PARAMS: Record<string, number> = {
   conversionPeriods: 9,
   basePeriods: 26,
   laggingSpan2Periods: 52,
+  /** @deprecated senkouDisplacement 우선 — API·구버전 호환 */
   displacement: 26,
+  chikouDisplacement: 26,
+  senkouDisplacement: 26,
 };
 
+/** 후행·선행 이동 기간 (구 displacement 단일 키 마이그레이션) */
+export function resolveIchimokuDisplacements(
+  params: Record<string, number | string | boolean> | undefined,
+): { chikou: number; senkou: number } {
+  const legacy = typeof params?.displacement === 'number' && params.displacement >= 1
+    ? params.displacement
+    : 26;
+  const chikou = typeof params?.chikouDisplacement === 'number' && params.chikouDisplacement >= 1
+    ? params.chikouDisplacement
+    : legacy;
+  const senkou = typeof params?.senkouDisplacement === 'number' && params.senkouDisplacement >= 1
+    ? params.senkouDisplacement
+    : legacy;
+  return { chikou, senkou };
+}
+
 export function createDefaultIchimokuParams(): Record<string, number> {
   return { ...ICHIMOKU_DEFAULT_PARAMS };
 }
@@ -55,12 +74,18 @@ export interface IchimokuCloudColors {
   bullishColor: string;
   /** 선행스팬1 < 선행스팬2 (하락 구름) */
   bearishColor: string;
+  /** 상승 구름 영역 표시 */
+  bullishVisible?: boolean;
+  /** 하락 구름 영역 표시 */
+  bearishVisible?: boolean;
 }
 
 /** #RRGGBBAA — 상승 구름 빨강 20%, 하락 구름 청록 20% */
 export const DEFAULT_ICHIMOKU_CLOUD_COLORS: IchimokuCloudColors = {
   bullishColor: '#EF535033',
   bearishColor: '#26A69A33',
+  bullishVisible: true,
+  bearishVisible: true,
 };
 
 /** registry plot ID → lightweight-charts-indicators plot ID */
@@ -80,19 +105,29 @@ export const ICHIMOKU_LIB_TO_REGISTRY: Record<string, string> = {
   plot4: 'plot3',
 };
 
-export function isIchimokuCloudVisible(config: IndicatorConfig): boolean {
+/** 선행스팬1·2 라인이 켜져 있어 구름 계산이 가능한지 */
+export function areIchimokuSpanLinesVisible(config: IndicatorConfig): boolean {
   return (
-    config.plotVisibility?.['plot2'] !== false &&
-    config.plotVisibility?.['plot3'] !== false
+    config.plotVisibility?.['plot3'] !== false &&
+    config.plotVisibility?.['plot4'] !== false
   );
 }
 
+/** 구름 영역을 그릴 수 있는지 (선행스팬 + 상승/하락 구름 중 하나 이상 on) */
+export function isIchimokuCloudVisible(config: IndicatorConfig): boolean {
+  if (!areIchimokuSpanLinesVisible(config)) return false;
+  const colors = resolveIchimokuCloudColors(config.cloudColors);
+  return colors.bullishVisible !== false || colors.bearishVisible !== false;
+}
+
 export function resolveIchimokuCloudColors(
   colors?: Partial<IchimokuCloudColors>,
 ): IchimokuCloudColors {
   return {
     bullishColor: colors?.bullishColor ?? DEFAULT_ICHIMOKU_CLOUD_COLORS.bullishColor,
     bearishColor: colors?.bearishColor ?? DEFAULT_ICHIMOKU_CLOUD_COLORS.bearishColor,
+    bullishVisible: colors?.bullishVisible !== false,
+    bearishVisible: colors?.bearishVisible !== false,
   };
 }
 
@@ -110,6 +145,11 @@ export function normalizeIchimokuConfig(config: IndicatorConfig): IndicatorConfi
     }
   }
 
+  const { chikou, senkou } = resolveIchimokuDisplacements(params);
+  params.chikouDisplacement = chikou;
+  params.senkouDisplacement = senkou;
+  params.displacement = senkou;
+
   const plotVisibility: Record<string, boolean> = {
     ...createDefaultIchimokuPlotVisibility(),
     ...config.plotVisibility,

frontend/src/utils/indicatorLabels.ts

@@ -26,6 +26,8 @@ const PARAM_LABELS: Record<string, LabelPair> = {
   factor:               { ko: '계수',           en: 'Factor' },
   atrPeriod:            { ko: 'ATR 기간',       en: 'ATR Period' },
   displacement:         { ko: '이동 기간',      en: 'Displacement' },
+  chikouDisplacement:   { ko: '후행 기간',      en: 'Chikou Displacement' },
+  senkouDisplacement:   { ko: '선행 기간',      en: 'Senkou Displacement' },
   conversionPeriods:    { ko: '전환선 기간',    en: 'Conversion Periods' },
   basePeriods:          { ko: '기준선 기간',    en: 'Base Periods' },
   laggingSpan2Periods:  { ko: '선행스팬2 기간', en: 'Lagging Span 2 Periods' },

frontend/src/utils/indicatorParamSpec.ts

@@ -48,7 +48,7 @@ function mergeOptions(
 }
 
 function isPeriodKey(key: string): boolean {
-  return /^(length|len|period\d*|kLength|dSmoothing|smooth|adxSmoothing|diLength|ccilength|turbolen|signalLength|fastLength|slowLength|longLength|shortLength|maLength|ultraLength|midLength|longLength|displacement|conversionPeriods|basePeriods|laggingSpan2Periods|length1|length2|length3|lengthRSI|lengthStoch|rsiLength|upDownLength|rocLength|stdevLength|atrLength|p|q|x)$/i.test(key);
+  return /^(length|len|period\d*|kLength|dSmoothing|smooth|adxSmoothing|diLength|ccilength|turbolen|signalLength|fastLength|slowLength|longLength|shortLength|maLength|ultraLength|midLength|longLength|displacement|chikouDisplacement|senkouDisplacement|conversionPeriods|basePeriods|laggingSpan2Periods|length1|length2|length3|lengthRSI|lengthStoch|rsiLength|upDownLength|rocLength|stdevLength|atrLength|p|q|x)$/i.test(key);
 }
 
 function isMultKey(key: string): boolean {

frontend/src/utils/indicatorRegistry.ts

@@ -6,7 +6,11 @@ import {
   calculateSmaMulti,
   normalizeSmaConfig,
 } from './smaConfig';
-import { normalizeIchimokuConfig, mergeIchimokuPlots } from './ichimokuConfig';
+import {
+  normalizeIchimokuConfig,
+  mergeIchimokuPlots,
+  resolveIchimokuDisplacements,
+} from './ichimokuConfig';
 import {
   normalizePsychologicalParams,
   resolvePsychologicalIndicatorType,
@@ -37,6 +41,10 @@ export interface PlotDef {
   lineWidth?: number;
   /** 라인 시리즈 선 유형 (기본 solid) */
   lineStyle?: HLineStyle;
+  /** histogram — 이전 봉 대비 상승·0선 위 막대 색 */
+  histogramUpColor?: string;
+  /** histogram — 이전 봉 대비 하락 또는 0선 아래 막대 색 */
+  histogramDownColor?: string;
 }
 
 export type HLineStyle = 'solid' | 'dashed' | 'dotted';
@@ -303,7 +311,7 @@ export const INDICATOR_REGISTRY: IndicatorDef[] = [
   { type:'ChopZone',          name:'Chop Zone',                  koreanName:'변동성구분지표',        shortName:'CZ',     category:'Oscillators', overlay:false, defaultParams:{length:30, atrLength:1},                  plots:[{id:'plot0',title:'CZ',  color:'#FF9800',type:'histogram'}],                                        hlines:[],                                                                                  description:'변동성 vs 추세 구분 지표' },
 
   // ── Momentum ──────────────────────────────────────────────────────────────
-  { type:'MACD',             name:'MACD',                        koreanName:'이동평균수렴발산',    shortName:'MACD',   category:'Momentum', overlay:false, defaultParams:{fastLength:12, slowLength:26, signalLength:9, src:'close'},   plots:[{id:'plot0',title:'Histogram',color:'#26A69A',type:'histogram'},{id:'plot1',title:'MACD',color:'#2962FF',type:'line',lineWidth:1},{id:'plot2',title:'Signal',color:'#FF6D00',type:'line',lineWidth:1}],                 hlines:[{price:0,color:'#607D8B'}], description:'이동평균 수렴·발산' },
+  { type:'MACD',             name:'MACD',                        koreanName:'이동평균수렴발산',    shortName:'MACD',   category:'Momentum', overlay:false, defaultParams:{fastLength:12, slowLength:26, signalLength:9, src:'close'},   plots:[{id:'plot0',title:'Histogram',color:'#26A69A',type:'histogram',histogramUpColor:'#26A69A',histogramDownColor:'#EF5350'},{id:'plot1',title:'MACD',color:'#2962FF',type:'line',lineWidth:1},{id:'plot2',title:'Signal',color:'#FF6D00',type:'line',lineWidth:1}],                 hlines:[{price:0,color:'#607D8B'}], description:'이동평균 수렴·발산' },
   { type:'Momentum',         name:'Momentum',                    koreanName:'모멘텀',              shortName:'MOM',    category:'Momentum', overlay:false, defaultParams:{length:10, src:'close'},                                       plots:[{id:'plot0',title:'MOM',  color:'#26A69A',type:'line',lineWidth:2}],                      hlines:[{price:0,color:'#607D8B'}],  description:'모멘텀 지표' },
   { type:'ROC',              name:'Rate of Change',              koreanName:'가격변화율',          shortName:'ROC',    category:'Momentum', overlay:false, defaultParams:{length:9, src:'close'},                                        plots:[{id:'plot0',title:'ROC',  color:'#00BCD4',type:'line',lineWidth:2}],                      hlines:[{price:10,color:'#EF535080'},{price:0,color:'#607D8B'},{price:-10,color:'#4CAF5080'}], description:'가격 변화율 (%)' },
   { type:'TSI',              name:'True Strength Index',         koreanName:'참강도지수',          shortName:'TSI',    category:'Momentum', overlay:false, defaultParams:{longLength:25, shortLength:13, signalLength:13, src:'close'},  plots:[{id:'plot0',title:'TSI',  color:'#2196F3',type:'line',lineWidth:2},{id:'plot1',title:'Signal',color:'#FF6D00',type:'line',lineWidth:1}], hlines:[{price:25,color:'#EF5350'},{price:0,color:'#607D8B'},{price:-25,color:'#4CAF50'}], description:'참 강도 지수' },
@@ -319,7 +327,7 @@ export const INDICATOR_REGISTRY: IndicatorDef[] = [
   { type:'ADX',             name:'Average Directional Index',    koreanName:'평균방향성지수',  shortName:'ADX',    category:'Trend', overlay:false, defaultParams:{adxSmoothing:14, diLength:14},                  plots:[{id:'plot0',title:'ADX',color:'#FF6D00',type:'line',lineWidth:2},{id:'plot1',title:'+DI',color:'#4CAF50',type:'line',lineWidth:1},{id:'plot2',title:'-DI',color:'#EF5350',type:'line',lineWidth:1}], hlines:ADX_DEFAULT_HLINES, description:'평균 방향성 지수 (추세 강도)' },
   { type:'DMI',             name:'Directional Movement Index',   koreanName:'방향성이동지수',  shortName:'DMI',    category:'Trend', overlay:false, defaultParams:{diLength:14, adxSmoothing:14}, plots:[{id:'plot0',title:'+DI',color:'#2962FF',type:'line',lineWidth:1},{id:'plot1',title:'-DI',color:'#FF6D00',type:'line',lineWidth:1},{id:'plot2',title:'DX',color:'#FF9800',type:'line',lineWidth:1},{id:'plot3',title:'ADX',color:'#E91E63',type:'line',lineWidth:1},{id:'plot4',title:'ADXR',color:'#9C27B0',type:'line',lineWidth:1}], hlines:DMI_DEFAULT_HLINES, description:'방향성 이동 지수 (+DI·-DI·DX·ADX·ADXR)' },
   { type:'Aroon',           name:'Aroon',                        koreanName:'아룬지표',        shortName:'Aroon',  category:'Trend', overlay:false, defaultParams:{length:14},                                     plots:[{id:'plot0',title:'Up',  color:'#4CAF50',type:'line',lineWidth:1},{id:'plot1',title:'Down',color:'#EF5350',type:'line',lineWidth:1}],                                                                        hlines:[{price:70,color:'#4CAF5060'},{price:30,color:'#EF535060'}], description:'아룬 추세 지표' },
-  { type:'IchimokuCloud',   name:'Ichimoku Cloud',               koreanName:'일목균형표',      shortName:'Ichi',   category:'Trend', overlay:true,  defaultParams:{conversionPeriods:9, basePeriods:26, laggingSpan2Periods:52, displacement:26}, plots:[{id:'plot0',title:'전환선',color:'#2196F3',type:'line',lineWidth:1},{id:'plot1',title:'기준선',color:'#EF5350',type:'line',lineWidth:1},{id:'plot2',title:'후행스팬',color:'#4CAF50',type:'line',lineWidth:1},{id:'plot3',title:'선행스팬1',color:'#EF5350',type:'line',lineWidth:1},{id:'plot4',title:'선행스팬2',color:'#9C27B0',type:'line',lineWidth:1}], description:'일목균형표' },
+  { type:'IchimokuCloud',   name:'Ichimoku Cloud',               koreanName:'일목균형표',      shortName:'Ichi',   category:'Trend', overlay:true,  defaultParams:{conversionPeriods:9, basePeriods:26, laggingSpan2Periods:52, displacement:26, chikouDisplacement:26, senkouDisplacement:26}, plots:[{id:'plot0',title:'전환선',color:'#2196F3',type:'line',lineWidth:1,lineStyle:'solid'},{id:'plot1',title:'기준선',color:'#EF5350',type:'line',lineWidth:1,lineStyle:'solid'},{id:'plot2',title:'후행스팬',color:'#4CAF50',type:'line',lineWidth:1,lineStyle:'solid'},{id:'plot3',title:'선행스팬1',color:'#EF5350',type:'line',lineWidth:1,lineStyle:'solid'},{id:'plot4',title:'선행스팬2',color:'#9C27B0',type:'line',lineWidth:1,lineStyle:'solid'}], description:'일목균형표' },
   { type:'Supertrend',      name:'Supertrend',                   koreanName:'슈퍼트렌드',      shortName:'ST',     category:'Trend', overlay:true,  defaultParams:{atrPeriod:10, factor:3},                        plots:[{id:'plot0',title:'ST',  color:'#4CAF50',type:'line',lineWidth:2}],                                                                                                   description:'슈퍼트렌드 (ATR 기반)' },
   { type:'ParabolicSAR',    name:'Parabolic SAR',                koreanName:'파라볼릭SAR',     shortName:'SAR',    category:'Trend', overlay:true,  defaultParams:{start:0.02, increment:0.02, maximum:0.2},       plots:[{id:'plot0',title:'SAR', color:'#FF6D00',type:'scatter'}],                                                                                                           description:'파라볼릭 SAR' },
   { type:'Choppiness',      name:'Choppiness Index',             koreanName:'불규칙성지수',    shortName:'CHOP',   category:'Trend', overlay:false, defaultParams:{length:14},                                     plots:[{id:'plot0',title:'CHOP',color:'#FFC107',type:'line',lineWidth:2}],                                  hlines:[{price:61.8,color:'#EF535080'},{price:38.2,color:'#4CAF5080'}],                     description:'변동성 vs 추세 구분 (61.8이하=추세)' },
@@ -603,6 +611,10 @@ export async function calculateIndicator(
 
   let calcBars = bars;
   let calcParams = params;
+  if (type === 'IchimokuCloud') {
+    const { senkou } = resolveIchimokuDisplacements(params);
+    calcParams = { ...params, displacement: senkou };
+  }
   if (type === 'BollingerBands') {
     calcParams = normalizeBollingerParams(params);
     calcBars = await resolveBollingerBars(bars, calcParams, chartContext.timeframe);

frontend/src/utils/indicatorSettingsLayout.ts

@@ -46,10 +46,10 @@ export const INDICATOR_PLOT_PARAMS: Record<string, Record<string, string[]>> = {
   IchimokuCloud: {
     plot0: ['conversionPeriods'],
     plot1: ['basePeriods'],
-    /** 후행스팬 — chikou 이동(displacement) */
-    plot2: ['displacement'],
-    /** 선행스팬1 — 전환·기준선에서 산출, 별도 기간 없음 */
-    plot3: [],
+    /** 후행스팬 — 과거 이동 기간 */
+    plot2: ['chikouDisplacement'],
+    /** 선행스팬1 — 미래 이동 기간 */
+    plot3: ['senkouDisplacement'],
     /** 선행스팬2 — Donchian 기간 */
     plot4: ['laggingSpan2Periods'],
   },

frontend/src/utils/plotColorUtils.ts

@@ -1,4 +1,7 @@
-import type { HLineStyle } from './indicatorRegistry';
+import type { HLineStyle, PlotDef } from './indicatorRegistry';
+
+const DEFAULT_HIST_UP = '#26A69A';
+const DEFAULT_HIST_DOWN = '#EF5350';
 
 /** 업비트/트레이딩뷰 스타일 색상 팔레트 (10×7) */
 export const COLOR_PALETTE: string[] = [
@@ -48,3 +51,44 @@ export const LINE_STYLE_LABELS: Record<HLineStyle, string> = {
   dashed: '점선',
   dotted: '도트',
 };
+
+/** histogram 막대 색에 투명도(88) 보장 */
+export function withHistogramAlpha(color: string): string {
+  if (color.startsWith('rgba(') || color.startsWith('rgb(')) return color;
+  if (color.length >= 9 && color.startsWith('#')) return color;
+  if (color.length >= 7 && color.startsWith('#')) return `${color}88`;
+  return `${color}88`;
+}
+
+export function resolveHistogramUpColor(plot: PlotDef): string {
+  return plot.histogramUpColor ?? plot.color ?? DEFAULT_HIST_UP;
+}
+
+export function resolveHistogramDownColor(plot: PlotDef): string {
+  return plot.histogramDownColor ?? DEFAULT_HIST_DOWN;
+}
+
+/** MACD 등 histogram 막대 색 (상승·하락/음수 구분) */
+export function histogramBarColor(
+  value: number,
+  prev: number | null | undefined,
+  plot: PlotDef,
+  pointColor?: string,
+): string {
+  if (pointColor) return withHistogramAlpha(pointColor);
+  const isDown = prev != null && !isNaN(prev) && value < prev;
+  const isNeg = value < 0;
+  const raw = (isDown || isNeg) ? resolveHistogramDownColor(plot) : resolveHistogramUpColor(plot);
+  return withHistogramAlpha(raw);
+}
+
+export function mapHistogramSeriesData(
+  filtered: Array<{ time: number; value: number; color?: string }>,
+  plot: PlotDef,
+): Array<{ time: import('lightweight-charts').Time; value: number; color: string }> {
+  return filtered.map((p, idx, arr) => ({
+    time: p.time as import('lightweight-charts').Time,
+    value: p.value,
+    color: histogramBarColor(p.value, idx > 0 ? arr[idx - 1].value : null, plot, p.color),
+  }));
+}

frontend/src/utils/strategyConditionSerde.ts

@@ -5,8 +5,10 @@ import {
   DEFAULT_START_CANDLE,
   DEFAULT_START_COMBINE_OP,
   START_NODE_ID,
+  STRATEGY_CANDLE_TYPES,
   createStartNodeId,
   defaultStartMeta,
+  getStartCandleTypes,
   normalizeStartCandleType,
   type StartCombineOp,
   type StartNodeMeta,
@@ -25,30 +27,42 @@ export type { StartCombineOp };
 
 export type ConditionBranch = {
   candleType: string;
+  candleTypes?: string[];
   root: LogicNode | null;
 };
 
 export type StartSection = {
   startId: string;
   candleType: string;
+  candleTypes: string[];
   root: LogicNode | null;
   canDelete: boolean;
 };
 
+function metaToStartSection(
+  startId: string,
+  meta: Record<string, StartNodeMeta>,
+  root: LogicNode | null,
+  canDelete: boolean,
+): StartSection {
+  const candleTypes = getStartCandleTypes(meta[startId]);
+  return {
+    startId,
+    candleType: candleTypes[0],
+    candleTypes,
+    root,
+    canDelete,
+  };
+}
+
 export function collectStartSections(state: EditorConditionState): StartSection[] {
-  const sections: StartSection[] = [{
-    startId: START_NODE_ID,
-    candleType: normalizeStartCandleType(state.startMeta[START_NODE_ID]?.candleType),
-    root: state.root,
-    canDelete: false,
-  }];
+  const sections: StartSection[] = [
+    metaToStartSection(START_NODE_ID, state.startMeta, state.root, false),
+  ];
   for (const startId of state.extraStartIds) {
-    sections.push({
-      startId,
-      candleType: normalizeStartCandleType(state.startMeta[startId]?.candleType),
-      root: state.extraRoots[startId] ?? null,
-      canDelete: true,
-    });
+    sections.push(
+      metaToStartSection(startId, state.startMeta, state.extraRoots[startId] ?? null, true),
+    );
   }
   return sections;
 }
@@ -110,8 +124,12 @@ function syncSubtreeCandleTypes(node: LogicNode | null, candleType: string): Log
 
 function collectExplicitCandleTypesFromTree(node: LogicNode | null, out: Set<string>): void {
   if (!node) return;
-  if (node.type === 'TIMEFRAME' && node.candleType) {
-    out.add(normalizeStartCandleType(node.candleType));
+  if (node.type === 'TIMEFRAME') {
+    if (node.candleTypes?.length) {
+      for (const ct of node.candleTypes) out.add(normalizeStartCandleType(ct));
+    } else if (node.candleType) {
+      out.add(normalizeStartCandleType(node.candleType));
+    }
   }
   if (node.type === 'CONDITION' && node.condition) {
     const c = node.condition as ConditionDSL;
@@ -130,22 +148,23 @@ function inferPrimaryCandleFromTree(root: LogicNode | null): string {
   return DEFAULT_START_CANDLE;
 }
 
-export function updateStartCandleType(
+export function updateStartCandleTypes(
   state: EditorConditionState,
   startId: string,
-  candleType: string,
+  candleTypes: string[],
 ): EditorConditionState {
-  const ct = normalizeStartCandleType(candleType);
+  const types = normalizeCandleTypesList(candleTypes);
+  const primary = types[0];
   const nextMeta = {
     ...state.startMeta,
-    [startId]: { candleType: ct },
+    [startId]: { candleTypes: types, candleType: primary },
   };
 
   if (startId === START_NODE_ID) {
     return {
       ...state,
       startMeta: nextMeta,
-      root: syncSubtreeCandleTypes(state.root, ct),
+      root: syncSubtreeCandleTypes(state.root, primary),
     };
   }
 
@@ -154,11 +173,39 @@ export function updateStartCandleType(
     startMeta: nextMeta,
     extraRoots: {
       ...state.extraRoots,
-      [startId]: syncSubtreeCandleTypes(state.extraRoots[startId] ?? null, ct),
+      [startId]: syncSubtreeCandleTypes(state.extraRoots[startId] ?? null, primary),
     },
   };
 }
 
+/** @deprecated 단일 분봉 — updateStartCandleTypes 사용 */
+export function updateStartCandleType(
+  state: EditorConditionState,
+  startId: string,
+  candleType: string,
+): EditorConditionState {
+  return updateStartCandleTypes(state, startId, [candleType]);
+}
+
+function normalizeCandleTypesList(types: string[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const ct of STRATEGY_CANDLE_TYPES) {
+    if (types.some(t => normalizeStartCandleType(t) === ct) && !seen.has(ct)) {
+      seen.add(ct);
+      out.push(ct);
+    }
+  }
+  return out.length > 0 ? out : [DEFAULT_START_CANDLE];
+}
+
+function readTimeframeCandleTypes(node: LogicNode): string[] {
+  if (node.candleTypes?.length) {
+    return normalizeCandleTypesList(node.candleTypes);
+  }
+  return [normalizeStartCandleType(node.candleType)];
+}
+
 export function addExtraStartSection(state: EditorConditionState): EditorConditionState {
   const startId = createStartNodeId();
   return {
@@ -166,7 +213,7 @@ export function addExtraStartSection(state: EditorConditionState): EditorConditi
     extraStartIds: [...state.extraStartIds, startId],
     startMeta: {
       ...state.startMeta,
-      [startId]: { candleType: DEFAULT_START_CANDLE },
+      [startId]: { candleTypes: [DEFAULT_START_CANDLE], candleType: DEFAULT_START_CANDLE },
     },
     extraRoots: { ...state.extraRoots, [startId]: null },
   };
@@ -206,32 +253,48 @@ export function emptyEditorConditionState(): EditorConditionState {
 }
 
 function wrapTimeframe(candleType: string, root: LogicNode): LogicNode {
+  const ct = normalizeStartCandleType(candleType);
   return {
     id: generateNodeId(),
     type: 'TIMEFRAME',
-    candleType: normalizeStartCandleType(candleType),
+    candleType: ct,
+    children: [root],
+  };
+}
+
+function wrapTimeframes(candleTypes: string[], root: LogicNode): LogicNode {
+  const types = normalizeCandleTypesList(candleTypes);
+  if (types.length === 1) return wrapTimeframe(types[0], root);
+  return {
+    id: generateNodeId(),
+    type: 'TIMEFRAME',
+    candleType: types[0],
+    candleTypes: types,
     children: [root],
   };
 }
 
 /** 편집기 상태 → 저장/평가용 DSL (TIMEFRAME 래핑) */
 export function encodeConditionForSave(state: EditorConditionState): LogicNode | null {
-  const branches = collectEditorBranches(state).filter(b => b.root != null) as Array<{
-    candleType: string;
-    root: LogicNode;
-  }>;
+  const branches = collectEditorBranches(state).filter(
+    (b): b is ConditionBranch & { root: LogicNode } => b.root != null,
+  );
 
   if (branches.length === 0) return null;
   if (branches.length === 1) {
-    const { candleType, root } = branches[0];
-    return wrapTimeframe(candleType, root);
+    const { candleType, candleTypes, root } = branches[0];
+    const types = candleTypes?.length ? candleTypes : [candleType];
+    return wrapTimeframes(types, root);
   }
 
   const combineOp = normalizeStartCombineOp(state.startCombineOp);
   return {
     id: generateNodeId(),
     type: combineOp,
-    children: branches.map(b => wrapTimeframe(b.candleType, b.root)),
+    children: branches.map(b => {
+      const types = b.candleTypes?.length ? b.candleTypes : [b.candleType];
+      return wrapTimeframes(types, b.root);
+    }),
   };
 }
 
@@ -247,15 +310,16 @@ function parseMultiStartWrapper(dsl: LogicNode): EditorConditionState | null {
   let primaryRoot: LogicNode | null = null;
 
   children.forEach((tf, index) => {
-    const candleType = normalizeStartCandleType(tf.candleType);
+    const candleTypes = readTimeframeCandleTypes(tf as LogicNode);
+    const candleType = candleTypes[0];
     const branchRoot = tf.children?.[0] ?? null;
     if (index === 0) {
-      startMeta[START_NODE_ID] = { candleType };
+      startMeta[START_NODE_ID] = { candleTypes, candleType };
       primaryRoot = branchRoot;
       return;
     }
     const startId = createStartNodeId();
-    startMeta[startId] = { candleType };
+    startMeta[startId] = { candleTypes, candleType };
     extraStartIds.push(startId);
     extraRoots[startId] = branchRoot;
   });
@@ -277,10 +341,11 @@ export function decodeConditionForEditor(dsl: LogicNode | null): EditorCondition
   if (multiStart) return multiStart;
 
   if (dsl.type === 'TIMEFRAME') {
+    const candleTypes = readTimeframeCandleTypes(dsl);
     return {
       root: dsl.children?.[0] ?? null,
       startMeta: {
-        [START_NODE_ID]: { candleType: normalizeStartCandleType(dsl.candleType) },
+        [START_NODE_ID]: { candleTypes, candleType: candleTypes[0] },
       },
       extraStartIds: [],
       extraRoots: {},
@@ -292,7 +357,7 @@ export function decodeConditionForEditor(dsl: LogicNode | null): EditorCondition
   return {
     root: dsl,
     startMeta: {
-      [START_NODE_ID]: { candleType: inferred },
+      [START_NODE_ID]: { candleTypes: [inferred], candleType: inferred },
     },
     extraStartIds: [],
     extraRoots: {},
@@ -303,14 +368,22 @@ export function decodeConditionForEditor(dsl: LogicNode | null): EditorCondition
 /** Logic Expression / 미리보기용 — START별 평가 분봉과 서브트리 */
 export function collectEditorBranches(state: EditorConditionState): ConditionBranch[] {
   const branches: ConditionBranch[] = [];
-  const primaryCt = state.startMeta[START_NODE_ID]?.candleType ?? DEFAULT_START_CANDLE;
-  if (state.root) branches.push({ candleType: primaryCt, root: state.root });
+  const primaryTypes = getStartCandleTypes(state.startMeta[START_NODE_ID]);
+  if (state.root) {
+    branches.push({
+      candleType: primaryTypes[0],
+      candleTypes: primaryTypes.length > 1 ? primaryTypes : undefined,
+      root: state.root,
+    });
+  }
 
   for (const startId of state.extraStartIds) {
     const root = state.extraRoots[startId] ?? null;
     if (root) {
+      const types = getStartCandleTypes(state.startMeta[startId]);
       branches.push({
-        candleType: state.startMeta[startId]?.candleType ?? DEFAULT_START_CANDLE,
+        candleType: types[0],
+        candleTypes: types.length > 1 ? types : undefined,
         root,
       });
     }
@@ -318,6 +391,15 @@ export function collectEditorBranches(state: EditorConditionState): ConditionBra
   return branches;
 }
 
+/** DSL·UI에서 사용하는 전략 평가 분봉 목록 */
+export function collectTimeframesFromEditorState(state: EditorConditionState): string[] {
+  const set = new Set<string>();
+  for (const section of collectStartSections(state)) {
+    for (const ct of section.candleTypes) set.add(ct);
+  }
+  return [...set];
+}
+
 /** 저장된 DSL에서 Logic Expression용 분기 목록 */
 export function collectDslBranches(dsl: LogicNode | null): ConditionBranch[] {
   return collectEditorBranches(decodeConditionForEditor(dsl));
@@ -335,7 +417,8 @@ export function mergeStartMetaForLoad(
     ...stored,
   };
   for (const [startId, meta] of Object.entries(decoded)) {
-    merged[startId] = { candleType: normalizeStartCandleType(meta.candleType) };
+    const types = getStartCandleTypes(meta);
+    merged[startId] = { candleTypes: types, candleType: types[0] };
   }
   return merged;
 }

frontend/src/utils/strategyDescriptionNarrative.ts

@@ -181,7 +181,12 @@ function describeNode(
 
   if (node.type === 'TIMEFRAME') {
     const inner = node.children?.[0];
-    const tf = candleKo(node.candleType ?? '1m');
+    const types = node.candleTypes?.length
+      ? node.candleTypes
+      : [node.candleType ?? '1m'];
+    const tf = types.length > 1
+      ? types.map(candleKo).join(', ')
+      : candleKo(types[0]);
     if (!inner) return [`[${tf}] 연결된 조건이 없습니다.`];
     const innerLines = describeNode(inner, signalType, def, depth + 1);
     return [`[${tf} 기준]`, ...innerLines.map(l => (l.startsWith('•') ? `  ${l}` : `  • ${l}`))];
@@ -248,9 +253,15 @@ function describeSignalBranches(
   const paragraphs: string[] = [];
 
   if (active.length === 1) {
-    const { candleType, root } = active[0];
-    const tf = candleKo(candleType);
-    paragraphs.push(`${tf} 차트를 기준으로 아래 조건을 평가합니다.`);
+    const { candleType, candleTypes, root } = active[0];
+    const tf = candleTypes && candleTypes.length > 1
+      ? candleTypes.map(candleKo).join(', ')
+      : candleKo(candleType);
+    paragraphs.push(
+      candleTypes && candleTypes.length > 1
+        ? `${tf} 각 시간봉 마감 시점마다 아래 조건을 독립적으로 평가합니다.`
+        : `${tf} 차트를 기준으로 아래 조건을 평가합니다.`,
+    );
     bullets.push(...describeNode(root!, signalType, def));
     return { hasContent: true, paragraphs, bullets };
   }

frontend/src/utils/strategyFlowLayout.ts

@@ -3,6 +3,8 @@ import type { LogicNode, ConditionDSL } from './strategyTypes';
 import { nodeToText, type DefType } from './strategyEditorShared';
 import {
   START_NODE_ID,
+  defaultStartMeta,
+  getStartCandleTypes,
   isStartNodeId,
   normalizeStartCandleType,
   STRATEGY_CANDLE_TYPES,
@@ -30,12 +32,15 @@ export type StrategyFlowNodeData = {
   def?: DefType;
   signalTab?: 'buy' | 'sell';
   selected?: boolean;
-  /** START 노드 — 조건 판별 시간봉 */
+  /** START 노드 — 조건 판별 시간봉 (표시용 대표) */
   candleType?: string;
-  onStartCandleTypeChange?: (startId: string, candleType: string) => void;
+  candleTypes?: string[];
+  onStartCandleTypesChange?: (startId: string, candleTypes: string[]) => void;
   onDeleteStart?: (startId: string) => void;
   onDelete?: (id: string) => void;
   onUpdateCondition?: (nodeId: string, condition: ConditionDSL) => void;
+  /** AND ↔ OR 전환 */
+  onChangeLogicGateType?: (nodeId: string, gateType: 'AND' | 'OR') => void;
   onDropTarget?: (targetId: string, data: { type: string; value: string; label: string }, flowPos: { x: number; y: number }) => void;
   onDragOverTarget?: (targetId: string, flowPos: { x: number; y: number }) => void;
   onDragLeaveTarget?: (targetId: string) => void;
@@ -353,8 +358,8 @@ export type EdgeHandleBinding = {
 
 export const FLOW_NODE_W = 200;
 export const FLOW_NODE_H = 72;
-export const FLOW_START_W = 168;
-export const FLOW_START_H = 56;
+export const FLOW_START_W = 200;
+export const FLOW_START_H = 78;
 
 function nodeCenter(
   id: string,
@@ -464,7 +469,11 @@ function layoutTree(
   positions: Map<string, { x: number; y: number }>,
   def: DefType,
   signalTab: 'buy' | 'sell',
-  callbacks: Pick<StrategyFlowNodeData, 'onDelete' | 'onUpdateCondition' | 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'>,
+  callbacks: Pick<
+    StrategyFlowNodeData,
+    'onDelete' | 'onUpdateCondition' | 'onChangeLogicGateType'
+    | 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'
+  >,
   dragOverId: string | null,
 ): void {
   const yBase = 220;
@@ -484,6 +493,7 @@ function layoutTree(
       signalTab,
       onDelete: callbacks.onDelete,
       onUpdateCondition: callbacks.onUpdateCondition,
+      onChangeLogicGateType: callbacks.onChangeLogicGateType,
       onDropTarget: callbacks.onDropTarget,
       onDragOverTarget: callbacks.onDragOverTarget,
       onDragLeaveTarget: callbacks.onDragLeaveTarget,
@@ -610,7 +620,11 @@ function appendOrphanFlowNodes(
   positions: Map<string, { x: number; y: number }>,
   def: DefType,
   signalTab: 'buy' | 'sell',
-  callbacks: Pick<StrategyFlowNodeData, 'onDelete' | 'onUpdateCondition' | 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'>,
+  callbacks: Pick<
+    StrategyFlowNodeData,
+    'onDelete' | 'onUpdateCondition' | 'onChangeLogicGateType'
+    | 'onDropTarget' | 'onDragOverTarget' | 'onDragLeaveTarget'
+  >,
 ): void {
   let orphanY = 80;
   for (const node of orphans) {
@@ -630,6 +644,7 @@ function appendOrphanFlowNodes(
         signalTab,
         onDelete: callbacks.onDelete,
         onUpdateCondition: callbacks.onUpdateCondition,
+        onChangeLogicGateType: callbacks.onChangeLogicGateType,
         onDropTarget: callbacks.onDropTarget,
         onDragOverTarget: callbacks.onDragOverTarget,
         onDragLeaveTarget: callbacks.onDragLeaveTarget,
@@ -655,12 +670,13 @@ export function logicNodeToFlow(
     | 'onDropTarget'
     | 'onDragOverTarget'
     | 'onDragLeaveTarget'
-    | 'onStartCandleTypeChange'
+    | 'onStartCandleTypesChange'
     | 'onDeleteStart'
+    | 'onChangeLogicGateType'
   >,
   dragOverId: string | null = null,
   orphans: LogicNode[] = [],
-  startMeta: Record<string, StartNodeMeta> = { [START_NODE_ID]: { candleType: '1m' } },
+  startMeta: Record<string, StartNodeMeta> = defaultStartMeta(),
   extraStartIds: string[] = [],
   extraRoots: Record<string, LogicNode | null> = {},
 ): { nodes: Node[]; edges: Edge[] } {
@@ -668,7 +684,7 @@ export function logicNodeToFlow(
   const edges: Edge[] = [];
 
   const appendStart = (startId: string, branchRoot: LogicNode | null, defaultY: number) => {
-    const candleType = normalizeStartCandleType(startMeta[startId]?.candleType);
+    const candleTypes = getStartCandleTypes(startMeta[startId]);
     nodes.push({
       id: startId,
       type: 'start',
@@ -676,8 +692,9 @@ export function logicNodeToFlow(
       data: {
         label: 'START',
         signalTab,
-        candleType,
-        onStartCandleTypeChange: callbacks.onStartCandleTypeChange,
+        candleType: candleTypes[0],
+        candleTypes,
+        onStartCandleTypesChange: callbacks.onStartCandleTypesChange,
         onDeleteStart: startId === START_NODE_ID ? undefined : callbacks.onDeleteStart,
         onDropTarget: callbacks.onDropTarget,
         onDragOverTarget: callbacks.onDragOverTarget,

frontend/src/utils/strategyStartNodes.ts

@@ -4,13 +4,22 @@ export const START_NODE_ID = '__strategy_start__';
 export const DEFAULT_START_CANDLE = '1m';
 
 export const STRATEGY_CANDLE_TYPES = [
-  '1m', '3m', '5m', '10m', '15m', '30m', '1h', '4h', '1d',
+  '1m', '3m', '5m', '10m', '15m', '30m', '1h', '4h', '1w', '1d',
+] as const;
+
+/** 그래프 START 노드 — 시간봉 체크박스 2행 배치 */
+export const START_TIMEFRAME_GRAPH_ROWS: readonly (readonly StrategyCandleType[])[] = [
+  ['1m', '3m', '5m', '10m', '15m'],
+  ['30m', '1h', '4h', '1w', '1d'],
 ] as const;
 
 export type StrategyCandleType = (typeof STRATEGY_CANDLE_TYPES)[number];
 
 export type StartNodeMeta = {
-  candleType: string;
+  /** @deprecated 단일 분봉 — candleTypes 우선 */
+  candleType?: string;
+  /** 선택된 평가 시간봉 (마감봉마다 독립 체크) */
+  candleTypes?: string[];
 };
 
 /** START가 2개 이상일 때 분기 간 결합 연산 */
@@ -27,12 +36,42 @@ export function createStartNodeId(): string {
 }
 
 export function defaultStartMeta(): Record<string, StartNodeMeta> {
-  return { [START_NODE_ID]: { candleType: DEFAULT_START_CANDLE } };
+  return { [START_NODE_ID]: { candleTypes: [DEFAULT_START_CANDLE], candleType: DEFAULT_START_CANDLE } };
+}
+
+/** START 메타에서 정렬된 평가 분봉 목록 (최소 1개) */
+export function getStartCandleTypes(meta?: StartNodeMeta | null): string[] {
+  const raw = meta?.candleTypes?.length
+    ? meta.candleTypes
+    : meta?.candleType
+      ? [meta.candleType]
+      : [DEFAULT_START_CANDLE];
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const ct of STRATEGY_CANDLE_TYPES) {
+    if (raw.some(r => normalizeStartCandleType(r) === ct) && !seen.has(ct)) {
+      seen.add(ct);
+      out.push(ct);
+    }
+  }
+  for (const r of raw) {
+    const n = normalizeStartCandleType(r);
+    if (!seen.has(n)) {
+      seen.add(n);
+      out.push(n);
+    }
+  }
+  return out.length > 0 ? out : [DEFAULT_START_CANDLE];
+}
+
+export function formatStartCandleTypesLabel(types: string[]): string {
+  const list = getStartCandleTypes({ candleTypes: types });
+  return list.map(formatStrategyCandleLabel).join(' · ');
 }
 
 export function normalizeStartCandleType(value: string | undefined | null): string {
   const raw = (value ?? DEFAULT_START_CANDLE).trim().toLowerCase();
-  if (raw === '1d') return '1d';
+  if (raw === '1d' || raw === '1w') return raw;
   return (STRATEGY_CANDLE_TYPES as readonly string[]).includes(raw) ? raw : DEFAULT_START_CANDLE;
 }
 
@@ -49,6 +88,7 @@ const CANDLE_TYPE_LABELS: Record<string, string> = {
   '30m': '30분봉',
   '1h': '1시간봉',
   '4h': '4시간봉',
+  '1w': '주간봉',
   '1d': '일봉',
 };
 

frontend/src/utils/strategyToChartIndicators.ts

@@ -72,6 +72,7 @@ function newIndId(): string {
 export function candleTypeToTimeframe(candleType: string): Timeframe {
   const c = (candleType ?? '1m').trim().toLowerCase();
   if (c === '1d') return '1D';
+  if (c === '1w') return '1W';
   if (c === '1h') return '1h';
   if (c === '4h') return '4h';
   if (['1m', '3m', '5m', '10m', '15m', '30m'].includes(c)) return c as Timeframe;

frontend/src/utils/strategyTypes.ts

@@ -36,6 +36,8 @@ export interface LogicNode {
   description?: string;
   /** TIMEFRAME 노드 — 조건 판별 대상 캔들 타입 (1m, 5m, 1h …) */
   candleType?: string;
+  /** TIMEFRAME 노드 — 동일 조건을 여러 분봉 마감마다 평가 */
+  candleTypes?: string[];
 }
 
 export interface StrategyDSLDto {

frontend/src/utils/tradeSignalDisplay.ts

@@ -48,6 +48,7 @@ const CANDLE_TYPE_KO: Record<string, string> = {
   '30m': '30분봉',
   '1h': '1시간봉',
   '4h': '4시간봉',
+  '1w': '주간봉',
   '1d': '일봉',
   '1D': '일봉',
 };

frontend/src/utils/virtualLiveStrategySync.ts

@@ -5,6 +5,7 @@ import { normalizeStartCandleType } from './strategyStartNodes';
 import type { StrategyDto } from './backendApi';
 import type { LogicNode } from './strategyTypes';
 import type { VirtualSessionConfig, VirtualTargetItem } from './virtualTradingStorage';
+import { resolveVirtualTargetStrategyId } from './virtualTargetStrategy';
 
 function collectUiTimeframes(strategy: StrategyDto | null | undefined): string[] {
   if (!strategy) return [];
@@ -15,7 +16,8 @@ function collectUiTimeframes(strategy: StrategyDto | null | undefined): string[]
     ...collectDslBranches(buy ?? null),
     ...collectDslBranches(sell ?? null),
   ]) {
-    set.add(normalizeStartCandleType(b.candleType));
+    const types = b.candleTypes?.length ? b.candleTypes : [b.candleType];
+    for (const ct of types) set.add(normalizeStartCandleType(ct));
   }
   return [...set];
 }
@@ -76,7 +78,7 @@ export async function syncVirtualTargetsToBackend(
   }
 
   const pinJobs = targets.map(async t => {
-    const strategyId = t.strategyId ?? session.globalStrategyId;
+    const strategyId = resolveVirtualTargetStrategyId(t, session.globalStrategyId);
     if (strategyId == null) return;
     await pinStrategyEvaluationTimeframes(t.market, strategyId);
   });
@@ -86,7 +88,7 @@ export async function syncVirtualTargetsToBackend(
     targets.map(t =>
       saveLiveStrategySettings({
         market: t.market,
-        strategyId: t.strategyId ?? session.globalStrategyId,
+        strategyId: resolveVirtualTargetStrategyId(t, session.globalStrategyId),
         isPinned: !!t.pinned,
         skipGlobalTemplate: true,
         ...shared,

frontend/src/utils/virtualTargetMutations.ts

@@ -6,6 +6,7 @@ import {
 } from '../utils/virtualTargetLimits';
 import { normalizeStartCandleType } from './strategyStartNodes';
 import { syncVirtualTargetsToBackend } from './virtualLiveStrategySync';
+import { resolveVirtualTargetStrategyId } from './virtualTargetStrategy';
 import {
   loadVirtualSession,
   loadVirtualTargets,
@@ -46,7 +47,8 @@ export async function addVirtualTarget(
   const en = meta.englishName ?? market.replace(/^KRW-/, '');
   const item: VirtualTargetItem = {
     market,
-    strategyId: session.globalStrategyId,
+    /** null = 상단 기본 전략 사용 */
+    strategyId: null,
     koreanName: meta.koreanName,
     englishName: en,
     candleType: meta.candleType ? normalizeStartCandleType(meta.candleType) : undefined,
@@ -82,7 +84,9 @@ export async function persistVirtualTargetPinned(market: string, pinned: boolean
   const item = loadVirtualTargets().find(t => t.market === market);
   await saveLiveStrategySettings({
     market,
-    strategyId: item?.strategyId ?? session.globalStrategyId,
+    strategyId: item
+      ? resolveVirtualTargetStrategyId(item, session.globalStrategyId)
+      : session.globalStrategyId,
     isLiveCheck: session.running,
     isPinned: pinned,
     executionType: session.executionType,

frontend/src/utils/virtualTargetStrategy.ts

@@ -0,0 +1,55 @@
+import type { VirtualTargetItem } from './virtualTradingStorage';
+
+/** 종목 전략 셀렉트 — 기본(전역) 전략 옵션 값 */
+export const VIRTUAL_DEFAULT_STRATEGY_VALUE = '__default__';
+
+/** 종목에 전략이 지정되지 않았으면 전역(기본) 전략 ID */
+export function resolveVirtualTargetStrategyId(
+  target: Pick<VirtualTargetItem, 'strategyId'>,
+  globalStrategyId: number | null,
+): number | null {
+  if (target.strategyId != null) return target.strategyId;
+  return globalStrategyId;
+}
+
+export function usesDefaultStrategy(target: Pick<VirtualTargetItem, 'strategyId'>): boolean {
+  return target.strategyId == null;
+}
+
+export function targetStrategySelectValue(target: Pick<VirtualTargetItem, 'strategyId'>): string {
+  return target.strategyId != null ? String(target.strategyId) : VIRTUAL_DEFAULT_STRATEGY_VALUE;
+}
+
+export function parseTargetStrategySelectValue(value: string): number | null {
+  if (!value || value === VIRTUAL_DEFAULT_STRATEGY_VALUE) return null;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : null;
+}
+
+export function defaultStrategyOptionLabel(
+  globalStrategyId: number | null,
+  strategies: Array<{ id?: number; name?: string }>,
+): string {
+  if (globalStrategyId == null) return '기본 전략 (미설정)';
+  const name = strategies.find(s => s.id === globalStrategyId)?.name;
+  return name ? `기본 전략 (${name})` : '기본 전략';
+}
+
+/**
+ * 예전에 전역 전략 ID가 종목에 복사 저장된 항목 → null(기본 전략 따름)로 정규화
+ */
+export function coalesceTargetsToDefaultStrategy(
+  targets: VirtualTargetItem[],
+  globalStrategyId: number | null,
+): VirtualTargetItem[] {
+  if (globalStrategyId == null) return targets;
+  let changed = false;
+  const next = targets.map(t => {
+    if (t.strategyId != null && t.strategyId === globalStrategyId) {
+      changed = true;
+      return { ...t, strategyId: null };
+    }
+    return t;
+  });
+  return changed ? next : targets;
+}