ltcai 2.2.7 → 3.1.0

package/static/css/reference/chat.css

@@ -19,10 +19,7 @@
             inset: 0;
             pointer-events: none;
             z-index: 0;
-            background:
-                radial-gradient(circle at 82% 12%, var(--border), transparent 30%),
-                radial-gradient(circle at 10% 80%, rgba(180,160,255,0.16), transparent 35%),
-                linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 52%, var(--surface) 100%);
+            background: var(--app-bg);
         }
 
         .bg-shapes {
@@ -2872,14 +2869,14 @@
             color: var(--accent);
         }
 
-/* Lattice AI workspace — light lavender theme. */
+/* Lattice AI workspace — product shell theme. */
         .app-layout {
             --bg: var(--bg);
             --surface: var(--surface);
             --surface-2: var(--surface-2);
             --surface-3: var(--surface-3);
             --accent: var(--accent);
-            --accent-2: var(--accent-2);
+            --accent-2: var(--lt-accent-2, #0f9f8f);
             --accent-3: var(--accent-3);
             --accent-pink: var(--accent-pink);
             --accent-soft: var(--accent-soft);
@@ -4220,7 +4217,7 @@
         }
 
         /* =========================================================
-           Soft Lavender Theme (4/10) — full override for .app-layout
+           Workspace product shell — full override for .app-layout
            ========================================================= */
         body.lattice-ref-chat .app-layout {
             --bg: var(--bg);
@@ -4228,7 +4225,7 @@
             --surface-2: var(--surface-2);
             --surface-3: var(--surface-3);
             --accent: var(--accent);
-            --accent-2: #ffb84d;
+            --accent-2: var(--lt-accent-2, #0f9f8f);
             --accent-3: var(--accent-2);
             --accent-soft: var(--accent-soft);
             --text: var(--text);
@@ -4238,10 +4235,7 @@
             --border-strong: var(--border-strong);
             --shadow: var(--shadow);
             --shadow-sm: var(--shadow-sm);
-            background:
-                radial-gradient(circle at 82% 12%, var(--border), transparent 30%),
-                radial-gradient(circle at 10% 80%, rgba(180,160,255,0.16), transparent 35%),
-                linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 52%, var(--surface) 100%);
+            background: var(--app-bg);
         }
         body.lattice-ref-chat .app-layout::before,
         body.lattice-ref-chat .app-layout::after {
@@ -4251,15 +4245,15 @@
         /* Sidebar */
         body.lattice-ref-chat .app-layout .sidebar {
             background: var(--sidebar);
-            border-right: 1px solid rgba(111,66,232,0.13);
-            box-shadow: 12px 0 46px rgba(88,72,150,0.08);
+            border-right: 1px solid var(--line);
+            box-shadow: none;
         }
 
         /* Chat header */
         body.lattice-ref-chat .app-layout .chat-header {
             background: var(--sidebar);
-            border-bottom: 1px solid rgba(111,66,232,0.11);
-            box-shadow: 0 2px 12px rgba(88,72,150,0.06);
+            border-bottom: 1px solid var(--line);
+            box-shadow: none;
             backdrop-filter: blur(14px);
         }
 
@@ -4306,28 +4300,28 @@
         /* 입력창 영역 */
         body.lattice-ref-chat .app-layout .input-area {
             background: linear-gradient(0deg,
-                rgba(243,237,255,0.99) 0%,
-                rgba(243,237,255,0.86) 64%,
+                color-mix(in srgb, var(--bg) 98%, transparent) 0%,
+                color-mix(in srgb, var(--bg) 82%, transparent) 64%,
                 transparent 100%);
         }
         body.lattice-ref-chat .app-layout .input-box {
             background: var(--input);
-            border: 1px solid rgba(111,66,232,0.17);
-            box-shadow: 0 8px 32px rgba(88,72,150,0.10);
+            border: 1px solid var(--line);
+            box-shadow: var(--shadow-sm);
         }
         body.lattice-ref-chat .app-layout .input-box:focus-within {
-            border-color: rgba(111,66,232,0.44);
-            box-shadow: 0 8px 32px rgba(88,72,150,0.10), 0 0 0 3px rgba(111,66,232,0.09);
+            border-color: var(--accent);
+            box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-soft);
         }
 
         /* 전송 버튼 */
         body.lattice-ref-chat .app-layout .send-btn {
             background: linear-gradient(135deg, var(--accent), var(--accent-2));
             color: #ffffff;
-            box-shadow: 0 8px 20px rgba(111,66,232,0.28);
+            box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent);
         }
         body.lattice-ref-chat .app-layout .send-btn:hover {
-            box-shadow: 0 10px 26px rgba(111,66,232,0.38);
+            box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent);
             opacity: 0.92;
         }
 
@@ -4339,17 +4333,17 @@
             box-shadow: 0 2px 10px rgba(88,72,150,0.08);
         }
         body.lattice-ref-chat .app-layout .empty-chip:hover {
-            background: rgba(111,66,232,0.08);
+            background: var(--accent-soft);
             border-color: var(--border-strong);
         }
         body.lattice-ref-chat .app-layout .ops-card {
             background: var(--card);
-            border-color: rgba(111,66,232,0.13);
-            box-shadow: 0 6px 22px rgba(88,72,150,0.08);
+            border-color: var(--line);
+            box-shadow: var(--shadow-sm);
         }
         body.lattice-ref-chat .app-layout .ops-card.primary {
-            background: linear-gradient(135deg, rgba(111,66,232,0.10), var(--card) 58%);
-            border-color: rgba(111,66,232,0.22);
+            background: linear-gradient(135deg, var(--accent-soft), var(--card) 58%);
+            border-color: var(--border-strong);
         }
 
         /* 배지/버튼 */
@@ -4371,8 +4365,8 @@
         body.lattice-ref-chat .app-layout .status-btn,
         body.lattice-ref-chat .app-layout .admin-btn,
         body.lattice-ref-chat .app-layout .setup-wizard-sidebar-btn {
-            background: rgba(111,66,232,0.10);
-            border-color: rgba(111,66,232,0.22);
+            background: var(--accent-soft);
+            border-color: var(--border-strong);
             color: var(--accent);
             box-shadow: none;
         }
@@ -4388,7 +4382,7 @@
             color: var(--text);
             -webkit-text-fill-color: var(--text);
             background: var(--accent-soft);
-            border-color: rgba(111,66,232,0.24);
+            border-color: var(--border-strong);
         }
         /* 채팅 기록 목록도 검정 */
         body.lattice-ref-chat .app-layout .history-item {
@@ -4408,20 +4402,20 @@
         /* 사이드바 검색 입력 */
         body.lattice-ref-chat .app-layout .sidebar-search input {
             color: var(--text);
-            background: rgba(111,66,232,0.06);
-            border-color: rgba(111,66,232,0.16);
+            background: var(--input);
+            border-color: var(--line);
         }
         body.lattice-ref-chat .app-layout .sidebar-search input::placeholder {
             color: var(--faint);
             -webkit-text-fill-color: var(--faint);
         }
-        /* 상단 모드 세그멘트 배경도 라벤더로 */
+        /* 상단 모드 세그멘트 */
         body.lattice-ref-chat .app-layout .mode-segmented {
             background: var(--surface-2);
-            border-color: rgba(111,66,232,0.16);
+            border-color: var(--line);
         }
         body.lattice-ref-chat .app-layout .mode-segmented button:not(.active) {
-            color: #3d3860;
+            color: var(--muted);
         }
 
         /* ── 홈 뷰: 채팅 전용 사이드바 섹션 숨기기 ── */

package/static/css/responsive.css

@@ -817,3 +817,45 @@ body.lattice-ref-chat .app-layout #user-input:focus {
     width: 100%;
   }
 }
+
+/* Product workspace shell: this file loads last, so keep the mobile rail fluid. */
+@media (max-width: 860px) {
+  body.workspace-page .workspace-shell {
+    grid-template-columns: 1fr;
+    min-width: 0;
+    width: 100%;
+  }
+
+  body.workspace-page .workspace-rail {
+    height: auto;
+    min-height: 0;
+    min-width: 0;
+    max-width: 100vw;
+    position: relative;
+    width: 100%;
+  }
+
+  body.workspace-page main {
+    min-width: 0;
+    width: 100%;
+  }
+
+  body.workspace-page .workspace-rail nav,
+  body.workspace-page .rail-links {
+    min-width: 0;
+    width: 100%;
+  }
+
+  body.workspace-page .workspace-rail a span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@media (max-width: 520px) {
+  body.workspace-page .workspace-rail nav,
+  body.workspace-page .rail-links {
+    grid-template-columns: 1fr;
+  }
+}

package/static/css/tokens.5a595671.css

@@ -0,0 +1,260 @@
+/* ============================================================================
+ * Lattice AI — Design Tokens (Single Source of Truth)  v3.1.0
+ *
+ * 이 파일이 색·면·테두리·그림자·포커스의 단일 출처다.
+ *   :root                      → 라이트 테마 값
+ *   :root[data-lt-theme="dark"] → 동일 토큰명의 다크 값
+ *   @media (prefers-color-scheme: dark) → 사용자가 명시 선택 안 했을 때 OS 추종
+ *
+ * 컴포넌트 CSS 는 항상 var(--token) 만 사용한다. 따라서 이 파일의 값만 바꾸면
+ * 전체 UI 가 자연스럽게 전환된다. (컴포넌트별 다크 오버라이드 / !important 금지)
+ *
+ * 토큰 카테고리(요청 범위): background · surface · card · sidebar · modal · table ·
+ *   graph · text · muted-text · border · accent · success · warning · danger ·
+ *   input · overlay · shadow · focus-ring
+ * ========================================================================== */
+
+:root {
+  color-scheme: light;
+
+  /* ── Brand raw scale (불변, 테마 무관 기준점) ───────────────────────────── */
+  --lt-color-primary-100: #dbeafe;
+  --lt-color-primary-200: #bfdbfe;
+  --lt-color-primary-400: #60a5fa;
+  --lt-color-primary-600: #2563eb;
+  --lt-color-primary-800: #1e3a8a;
+  --lt-color-ink-900: #111827;
+  --lt-color-accent-cyan:  #0891b2;
+  --lt-color-accent-green: #0f9f8f;
+  --lt-color-accent-amber: #b7791f;
+  --lt-color-accent-pink:  #b83280;
+
+  /* ╔══════════════════════════════════════════════════════════════════════╗
+     ║  SEMANTIC TOKENS — LIGHT (neutral workspace palette)                 ║
+     ╚══════════════════════════════════════════════════════════════════════╝ */
+
+  /* background / surfaces */
+  --bg:          #f6f8f7;
+  --bg-soft:     #eef3f2;
+  --surface:     #ffffff;
+  --surface-2:   #f0f5f4;
+  --surface-3:   #e4ecea;
+  --surface-muted: #edf3f2;
+  --surface-elevated: rgba(255, 255, 255, 0.94);
+  --card:        rgba(255, 255, 255, 0.92);
+  --sidebar:     rgba(255, 255, 255, 0.94);
+  --modal:       rgba(255, 255, 255, 0.98);
+  --table:       rgba(255, 255, 255, 0.78);
+  --input:       rgba(255, 255, 255, 0.86);
+  --overlay:     rgba(15, 23, 42, 0.44);
+  --overlay-scrim: var(--overlay);
+  --app-bg:
+    linear-gradient(180deg, #f8faf9 0%, #eef4f2 54%, #f7faf9 100%);
+
+  /* text */
+  --text:        #24223d;
+  --muted:       #475569;   /* muted-text */
+  --faint:       #70818f;
+  --text-muted:  var(--muted);
+
+  /* border / line */
+  --border:        rgba(15, 23, 42, 0.12);
+  --border-strong: rgba(15, 23, 42, 0.22);
+  --line:          rgba(15, 23, 42, 0.10);
+  --line-strong:   rgba(15, 23, 42, 0.18);
+
+  /* accent */
+  --accent:       #2563eb;
+  --accent-2:     #0f9f8f;
+  --accent-3:     #b7791f;
+  --accent-pink:  #b83280;
+  --accent-soft:  rgba(37, 99, 235, 0.10);
+  --accent-deep:  #1d4ed8;
+
+  /* status */
+  --success: #0f8f6d;
+  --warning: #a16207;
+  --danger:  #c2410c;
+
+  /* graph */
+  --graph-bg:   #f8faf9;
+  --graph-grid: rgba(12, 92, 115, 0.08);
+  --graph-pill: rgba(255, 255, 255, 0.92);
+
+  /* shadow */
+  --shadow:    0 18px 50px rgba(15, 23, 42, 0.10);
+  --shadow-sm: 0 8px 22px rgba(15, 23, 42, 0.08);
+
+  /* focus ring */
+  --focus-ring: rgba(37, 99, 235, 0.55);
+
+  /* ── 구조 토큰(색 아님) ─────────────────────────────────────────────── */
+  --radius:    14px;
+  --radius-sm: 8px;
+  --content-width: 900px;
+
+  /* ── 레거시/별칭 — 코드가 참조하는 모든 변수를 의미 토큰으로 매핑 ──────── */
+  --ink:        var(--text);
+  --blue:       var(--accent);
+  --green:      var(--success);
+  --amber:      var(--warning);
+  --red:        var(--danger);
+  --pink:       var(--accent-pink);
+  --ok:         var(--success);
+  --warn:       var(--warning);
+  --err:        var(--danger);
+  --panel:      var(--surface);
+  --panel-2:    var(--surface-2);
+  --panel-3:    var(--surface-3);
+  --panel-strong: var(--surface);
+  --glow-green: 0 0 34px rgba(15, 159, 143, 0.14);
+  --glow-blue:  0 0 34px rgba(37, 99, 235, 0.14);
+  /* PPT reference 스킨 별칭 */
+  --ref-purple:   var(--accent);
+  --ref-purple-2: var(--accent-2);
+  --ref-indigo:   #2563eb;
+  --ref-ink:      var(--text);
+  --ref-muted:    var(--muted);
+  --ref-faint:    var(--faint);
+  --ref-line:     var(--border);
+  --ref-soft:     var(--surface);
+  --ref-card:     var(--card);
+  --ref-shadow:   var(--shadow);
+
+  /* ── --lt-* 별칭 (workspace.css / platform.css 가 참조) — LIGHT ──────────
+     순환참조를 피하려 구체값으로 둔다(소비자가 --bg 등을 --lt-* 로 재정의해도 안전). */
+  --lt-bg:        #f6f8f7;
+  --lt-surface:   #ffffff;
+  --lt-surface-2: #f0f5f4;
+  --lt-input:     rgba(255, 255, 255, 0.86);
+  --lt-ink:       #24223d;
+  --lt-ink-soft:  #475569;
+  --lt-muted:     #70818f;
+  --lt-line:      rgba(15, 23, 42, 0.12);
+  --lt-accent:    #2563eb;
+  --lt-accent-2:  #0f9f8f;
+  --lt-shadow-md: 0 18px 50px rgba(15, 23, 42, 0.10);
+
+  /* ── 모션 / 타이포 ─────────────────────────────────────────────────── */
+  --lt-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ╔════════════════════════════════════════════════════════════════════════╗
+   ║  SEMANTIC TOKENS — DARK (값만 교체, 같은 토큰명)                          ║
+   ╚════════════════════════════════════════════════════════════════════════╝ */
+:root[data-lt-theme="dark"] {
+  color-scheme: dark;
+
+  --bg:          #101418;
+  --bg-soft:     #151b20;
+  --surface:     #1b2328;
+  --surface-2:   #202b31;
+  --surface-3:   #29363d;
+  --surface-muted: #151d22;
+  --surface-elevated: #253139;
+  --card:        rgba(255, 255, 255, 0.055);
+  --sidebar:     #11191d;
+  --modal:       rgba(27, 35, 40, 0.98);
+  --table:       rgba(255, 255, 255, 0.045);
+  --input:       rgba(255, 255, 255, 0.065);
+  --overlay:     rgba(0, 0, 0, 0.64);
+  --overlay-scrim: var(--overlay);
+  --app-bg:
+    linear-gradient(180deg, #101418 0%, #151d22 54%, #101418 100%);
+
+  --text:        #edf3f2;
+  --muted:       #b8c5c2;
+  --faint:       #849894;
+  --text-muted:  var(--muted);
+
+  --border:        rgba(196, 213, 208, 0.18);
+  --border-strong: rgba(196, 213, 208, 0.30);
+  --line:          rgba(196, 213, 208, 0.14);
+  --line-strong:   rgba(196, 213, 208, 0.24);
+
+  --accent:       #0284c7;
+  --accent-2:     #0f766e;
+  --accent-3:     #facc15;
+  --accent-pink:  #f0abfc;
+  --accent-soft:  rgba(2, 132, 199, 0.20);
+  --accent-deep:  #0369a1;
+
+  --success: #34d399;
+  --warning: #fbbf24;
+  --danger:  #fb923c;
+
+  --graph-bg:   #0f1518;
+  --graph-grid: rgba(94, 234, 212, 0.08);
+  --graph-pill: rgba(27, 35, 40, 0.92);
+
+  --shadow:    0 18px 54px rgba(0, 0, 0, 0.50);
+  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.42);
+
+  --focus-ring: rgba(125, 211, 252, 0.70);
+
+  --lt-bg:        #101418;
+  --lt-surface:   #1b2328;
+  --lt-surface-2: #202b31;
+  --lt-input:     rgba(255, 255, 255, 0.065);
+  --lt-ink:       #edf3f2;
+  --lt-ink-soft:  #b8c5c2;
+  --lt-muted:     #849894;
+  --lt-line:      rgba(196, 213, 208, 0.18);
+  --lt-accent:    #0284c7;
+  --lt-accent-2:  #0f766e;
+  --lt-shadow-md: 0 18px 54px rgba(0, 0, 0, 0.50);
+
+  --ref-indigo: #93c5fd;
+  --glow-green: 0 0 34px rgba(94, 234, 212, 0.18);
+  --glow-blue:  0 0 34px rgba(125, 211, 252, 0.18);
+}
+
+/* OS 다크 추종 — 사용자가 명시적으로 라이트를 고르지 않은 경우에만 */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-lt-theme="light"]):not([data-lt-theme="dark"]) {
+    color-scheme: dark;
+    --bg: #101418; --bg-soft: #151b20;
+    --surface: #1b2328; --surface-2: #202b31; --surface-3: #29363d;
+    --surface-muted: #151d22; --surface-elevated: #253139;
+    --card: rgba(255,255,255,0.055); --sidebar: #11191d;
+    --modal: rgba(27,35,40,0.98); --table: rgba(255,255,255,0.045);
+    --input: rgba(255,255,255,0.065); --overlay: rgba(0,0,0,0.64); --overlay-scrim: var(--overlay);
+    --app-bg:
+      linear-gradient(180deg, #101418 0%, #151d22 54%, #101418 100%);
+    --text: #edf3f2; --muted: #b8c5c2; --faint: #849894; --text-muted: var(--muted);
+    --border: rgba(196,213,208,0.18); --border-strong: rgba(196,213,208,0.30);
+    --line: rgba(196,213,208,0.14); --line-strong: rgba(196,213,208,0.24);
+    --accent: #0284c7; --accent-2: #0f766e; --accent-3: #facc15;
+    --accent-pink: #f0abfc; --accent-soft: rgba(2,132,199,0.20); --accent-deep: #0369a1;
+    --success: #34d399; --warning: #fbbf24; --danger: #fb923c;
+    --graph-bg: #0f1518; --graph-grid: rgba(94,234,212,0.08); --graph-pill: rgba(27,35,40,0.92);
+    --shadow: 0 18px 54px rgba(0,0,0,0.50); --shadow-sm: 0 8px 24px rgba(0,0,0,0.42);
+    --focus-ring: rgba(125,211,252,0.70);
+    --lt-bg: #101418; --lt-surface: #1b2328; --lt-surface-2: #202b31; --lt-input: rgba(255,255,255,0.065);
+    --lt-ink: #edf3f2; --lt-ink-soft: #b8c5c2; --lt-muted: #849894;
+    --lt-line: rgba(196,213,208,0.18); --lt-accent: #0284c7; --lt-accent-2: #0f766e;
+    --lt-shadow-md: 0 18px 54px rgba(0,0,0,0.50);
+  }
+}
+
+/* ── 전역 폴리시 ───────────────────────────────────────────────────────── */
+::selection { background: var(--accent-soft); color: var(--text); }
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--accent-soft); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.001ms;
+    scroll-behavior: auto;
+  }
+}