260717_0

ui_template/ui_template_overlay.css

@@ -0,0 +1,122 @@
+.ui-workflow-overlay {
+  pointer-events: none;
+}
+
+.ui-workflow-overlay__panel {
+  position: fixed;
+  top: calc(var(--spacing-64) + var(--spacing-16));
+  z-index: var(--z-dropdown);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - var(--spacing-64) - var(--spacing-32));
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-cards);
+  background: var(--color-surface-raised);
+  box-shadow: var(--shadow-lg);
+  pointer-events: auto;
+}
+
+/* title 패널: 헤더 아래 전체 높이 도킹 사이드바 (열림: 본문 밀기 / 닫힘: 좌측으로 슬라이드 아웃) */
+.ui-workflow-overlay__panel--title {
+  top: var(--spacing-64);
+  bottom: 0;
+  left: 0;
+  width: min(var(--wf-left-panel-width), calc(100vw - var(--spacing-48)));
+  max-height: none;
+  overflow: visible;
+  border-top: 0;
+  border-bottom: 0;
+  border-left: 0;
+  border-radius: 0;
+  transition: transform var(--transition-base);
+}
+
+.ui-workflow-overlay__panel--title.is-collapsed {
+  transform: translateX(-100%);
+  box-shadow: none;
+}
+
+.ui-workflow-overlay__panel--title .ui-workflow-overlay__body {
+  flex: 1;
+}
+
+/* 닫힘 전환 중에도 내용이 함께 슬라이드되도록 body를 숨기지 않음 */
+.ui-workflow-overlay__panel--title.is-collapsed .ui-workflow-overlay__body {
+  display: block;
+}
+
+.ui-workflow-overlay__panel--progress {
+  right: var(--spacing-24);
+  width: calc(var(--wf-left-panel-width) / 2);
+}
+
+.ui-workflow-overlay__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-12, var(--spacing-8));
+  min-height: var(--spacing-48);
+  padding: var(--spacing-8) var(--spacing-16);
+}
+
+.ui-workflow-overlay__title {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text);
+  font-size: var(--text-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.ui-workflow-overlay__toggle {
+  flex: 0 0 auto;
+  width: var(--spacing-32);
+  height: var(--spacing-32);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-buttons);
+  background: var(--color-canvas);
+  color: var(--color-text);
+  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);
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.ui-workflow-overlay__body {
+  overflow-y: auto;
+  padding: 0 var(--spacing-16) var(--spacing-16);
+  border-top: 1px solid var(--color-border);
+}
+
+.ui-workflow-overlay__panel.is-collapsed .ui-workflow-overlay__body {
+  display: none;
+}
+
+.ui-workflow-overlay__panel.is-collapsed .ui-workflow-overlay__header {
+  padding: var(--spacing-8) var(--spacing-16);
+}
+
+@media (max-width: 860px) {
+  .ui-workflow-overlay__panel--progress {
+    top: calc(var(--spacing-64) + var(--spacing-8));
+    right: var(--spacing-8);
+    max-height: calc(100vh - var(--spacing-64) - var(--spacing-16));
+  }
+}