위젯 종료버튼 겹침문제 수정

frontend/src/styles/backtestDashboard.css

@@ -1507,6 +1507,12 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
+}
+
+.btd-analysis-toolbar-right {
+  flex-shrink: 1;
+  justify-content: flex-end;
 }
 
 .btd-analysis-select--static {
@@ -1519,6 +1525,14 @@
   background: color-mix(in srgb, var(--btd-bg) 60%, transparent);
 }
 
+.btd-analysis-tf-row {
+  flex: 1;
+  min-width: 0;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
 .btd-analysis-tool {
   width: 28px;
   height: 28px;

frontend/src/styles/widgetDashboard.css

@@ -164,16 +164,53 @@
   position: absolute;
   top: 6px;
   right: 6px;
-  z-index: 3;
+  z-index: 10;
   width: 22px;
   height: 22px;
   border: 1px solid var(--wd-slot-border);
   border-radius: 4px;
-  background: color-mix(in srgb, var(--bg2) 88%, transparent);
+  background: color-mix(in srgb, var(--bg2) 92%, transparent);
   color: var(--se-text-muted);
   font-size: 0.65rem;
   cursor: pointer;
-  opacity: 0.55;
+  opacity: 0.85;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+
+/* 위젯 ✕ 버튼 — 차트·패널 헤더 텍스트와 겹침 방지 */
+.wd-slot-body--has-clear .wd-candle-chart-header,
+.wd-slot-body--has-clear .btd-analysis-toolbar,
+.wd-slot-body--has-clear .wd-panel-header,
+.wd-slot-body--has-clear .wd-chart-symbol-tf-bar {
+  padding-right: 36px;
+  box-sizing: border-box;
+}
+
+.wd-slot-body--has-clear .btd-analysis-toolbar-left {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.wd-slot-body--has-clear .btd-analysis-toolbar-right {
+  flex-shrink: 1;
+  min-width: 0;
+  max-width: 42%;
+  overflow: hidden;
+}
+
+.wd-slot-body--has-clear .btd-analysis-count {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wd-slot-body--has-clear .wd-candle-chart-header-actions {
+  flex-shrink: 1;
+  min-width: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  max-width: min(100%, 220px);
 }
 
 .wd-slot-overlay-clear:hover {
@@ -447,6 +484,33 @@
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.wd-chart-symbol-tf-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 4px 10px 6px;
+  border-bottom: 1px solid color-mix(in srgb, var(--se-border, var(--border)) 55%, transparent);
+}
+
+.wd-chart-symbol-label {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--se-text, var(--text));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: min(220px, 42%);
+  flex-shrink: 0;
+}
+
+.wd-chart-symbol-tf-bar .wd-candle-chart-tf-row {
+  flex: 1;
+  justify-content: flex-start;
 }
 
 .wd-candle-chart-tf {