260719_1

ui_template/ui_template_overlay.css

@@ -81,17 +81,9 @@
   cursor: pointer;
 }
 
-/* title 패널 우측 가장자리 세로 중앙 핸들 — 닫히면 이 버튼만 화면 왼쪽에 남음 */
 .ui-workflow-overlay__handle {
   position: absolute;
-  top: 50%;
-  right: calc(-1 * var(--spacing-24));
-  width: var(--spacing-24);
-  height: var(--spacing-64);
-  transform: translateY(-50%);
   border: 1px solid var(--color-border);
-  border-left: 0;
-  border-radius: 0 var(--radius-buttons) var(--radius-buttons) 0;
   background: var(--color-surface-raised);
   color: var(--color-text);
   box-shadow: var(--shadow-lg);
@@ -99,6 +91,40 @@
   pointer-events: auto;
 }
 
+.ui-workflow-overlay__handle-icon {
+  display: block;
+  width: 0;
+  height: 0;
+  margin: auto;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 7px solid currentcolor;
+  transition: transform var(--transition-fast);
+}
+
+/* title 패널 우측 가장자리 세로 중앙 핸들 — 닫히면 이 버튼만 화면 왼쪽에 남음 */
+.ui-workflow-overlay__handle--side {
+  top: 50%;
+  right: calc(-1 * var(--spacing-24));
+  width: var(--spacing-24);
+  height: var(--spacing-64);
+  transform: translateY(-50%);
+  border-left: 0;
+  border-radius: 0 var(--radius-buttons) var(--radius-buttons) 0;
+}
+
+/* 하단 도킹 패널 상단 중앙 핸들 */
+.ui-workflow-overlay__handle--bottom {
+  z-index: 2;
+  top: calc(-1 * var(--spacing-24));
+  left: 50%;
+  width: var(--spacing-64);
+  height: var(--spacing-24);
+  transform: translateX(-50%);
+  border-bottom: 0;
+  border-radius: var(--radius-buttons) var(--radius-buttons) 0 0;
+}
+
 .ui-workflow-overlay__body {
   overflow-y: auto;
   padding: 0 var(--spacing-16) var(--spacing-16);