ltcai 2.2.0 → 2.2.2

package/static/css/responsive.css

@@ -0,0 +1,614 @@
+/* ============================================================================
+ * Lattice AI — Responsive / Accessibility / Theme Foundation  (v2.2.2)
+ *
+ * 이 파일은 모든 페이지에서 가장 마지막에 로드된다 (lattice-reference.css /
+ * workspace.css / platform.css 다음). 따라서 기존 규칙을 "덮어쓰는" 레이어로
+ * 동작하며, 거대한 lattice-reference.css 를 직접 수술하지 않고도
+ *   - 하단/입력창/모달/팝업 잘림
+ *   - 수평 스크롤
+ *   - 모바일 키보드 레이아웃 깨짐
+ *   - 태블릿 레이아웃 깨짐
+ *   - 작은 화면 메뉴 접근 불가
+ *   - 44px 미만 터치 영역 / 포커스 링 부재
+ *   - 다크/라이트 테마 패리티
+ * 를 일괄 해결한다. 라이트 테마는 건드리지 않으므로 회귀 위험이 없다.
+ *
+ * 표준 브레이크포인트 (이 파일이 프로젝트 규약):
+ *   phone   <= 600px
+ *   tablet  <= 1024px
+ *   laptop  (default)
+ *   ultrawide >= 1600px
+ * ========================================================================== */
+
+/* ============================================================================
+ * 0. 전역 가드 — 수평 스크롤 / 박스 모델 / 긴 문자열
+ * ========================================================================== */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html,
+body {
+  max-width: 100%;
+  overflow-x: hidden;          /* 어떤 와이드 자식도 페이지 수평 스크롤을 못 만들게 */
+}
+
+body { min-width: 0; }
+
+/* 미디어/코드/표는 컨테이너를 넘지 않는다 */
+img,
+svg,
+video,
+canvas,
+table,
+pre {
+  max-width: 100%;
+}
+
+/* 긴 토큰/URL 줄바꿈 (수평 오버플로우 방지) */
+pre,
+code,
+.bubble,
+.detail-summary,
+.perm-path,
+.mcp-item-desc {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/* flex 자식이 내용 때문에 줄어들지 못해 오버플로우 나는 고전 버그 */
+.main-chat,
+.messages-viewport,
+.workspace-main,
+.admin-main,
+.stage { min-width: 0; }
+
+/* 모바일 햄버거 토글은 기본 숨김 — 모바일/태블릿 미디어쿼리(섹션 7·8)에서 노출.
+ * 이 기본값은 노출 규칙보다 *먼저* 선언돼야 소스 순서상 노출이 이긴다.
+ * (graph-view-toggle 은 섹션 8 에서 동일 패턴으로 처리) */
+.graph-nav-toggle,
+.admin-rail-toggle { display: none; }
+
+/* ============================================================================
+ * 1. 앱 셸 — dvh 기반, 100vw 스크롤바 버그 제거
+ * ========================================================================== */
+.app-layout {
+  width: 100%;                 /* 100vw 는 스크롤바 폭 만큼 수평 오버플로우 발생 */
+  height: 100vh;               /* 폴백 */
+  height: 100dvh;
+}
+
+/* 인증/로그인 페이지: 키보드가 떠도 카드가 스크롤되어 버튼이 안 잘리게 */
+body.lattice-ref-auth {
+  min-height: 100vh;           /* 폴백 */
+  min-height: 100dvh;
+  overflow-y: auto;            /* 기존 overflow:hidden 블로커 해제 */
+  overflow-x: hidden;
+}
+
+/* ============================================================================
+ * 2. 키보드-세이프 입력창 (composer)
+ *    ux.js 의 visualViewport 리스너가 --kb-inset 를 채운다.
+ * ========================================================================== */
+:root { --kb-inset: 0px; }
+
+.input-area {
+  padding-bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--kb-inset));
+  transition: padding-bottom 0.12s ease-out;
+}
+
+/* ============================================================================
+ * 3. 터치 영역 최소 44x44 — 핵심 인터랙티브 컨트롤
+ *    (시각적 아이콘 크기는 유지, 히트 박스만 확장)
+ * ========================================================================== */
+.sidebar-toggle,
+.sidebar-close,
+.admin-close,
+.mode-close,
+.mcp-modal-close,
+.field-eye {
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.send-btn {
+  min-width: 44px;
+  min-height: 44px;
+  width: 44px;
+  height: 44px;
+}
+
+.action-btn,
+.tb-btn,
+.icon-btn,
+.table-btn,
+.lang-btn,
+.logout-btn,
+.model-badge {
+  min-height: 44px;
+}
+
+.action-btn { min-width: 44px; justify-content: center; }
+
+.lang-option,
+.filter-item,
+.legend-item,
+.rec-item,
+.history-item-del {
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+}
+
+.history-item-del { min-width: 44px; justify-content: center; }
+
+/* 그래프 필터 체크박스 확대 */
+.filter-item input[type="checkbox"],
+.legend-item input[type="checkbox"],
+.rec-checkbox {
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+}
+
+/* 터치 기기에서는 호버로만 보이던 삭제 버튼을 항상 노출 */
+@media (hover: none) {
+  .history-item-del { opacity: 1; }
+}
+
+/* iOS 입력 자동 줌(폰트<16px) 방지 — 모든 폼 컨트롤 */
+input,
+textarea,
+select {
+  font-size: max(16px, 1em);
+}
+@media (min-width: 1025px) {
+  /* 데스크톱에서는 디자인 크기 복원 (줌 이슈 없음) */
+  .sidebar-search input,
+  .mcp-add-form input,
+  .mcp-add-form textarea,
+  .mcp-add-form select { font-size: 13px; }
+}
+
+/* ============================================================================
+ * 4. 포커스 링 — tokens.css 가 링크 안 된 페이지를 위해 항상 보장
+ *    (WCAG 2.4.7)
+ * ========================================================================== */
+:focus-visible {
+  outline: 2px solid var(--accent, #6E4AE6);
+  outline-offset: 2px;
+  border-radius: inherit;
+}
+/* 마우스 클릭 시 링 숨김은 :focus-visible 가 알아서 처리 */
+
+/* ============================================================================
+ * 5. 모달 / 팝업 / 오버레이 — 뷰포트 가둠 + 내부 스크롤
+ *    (footer 버튼이 키보드/짧은 화면에 잘리지 않게)
+ * ========================================================================== */
+.acct-modal,
+.mcp-modal,
+.mode-modal,
+.workspace-modal,
+.advanced-settings-panel,
+.perm-dialog,
+.model-panel,
+.onboarding-card,
+.wizard-card {
+  max-height: min(760px, calc(100dvh - 32px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 모달 내부 스크롤 영역 */
+.acct-body,
+.mcp-modal-body,
+.advanced-settings-body,
+.mode-modal .mode-options,
+.workspace-modal .workspace-options,
+.model-list,
+.onboarding-model-list,
+.pipeline-modal-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* 드롭다운/팝오버: 뷰포트 안에 가둠 */
+.lang-picker-menu,
+.mcp-dropdown,
+.search-results {
+  max-width: calc(100vw - 24px);
+  max-height: min(60dvh, 360px);
+  overflow-y: auto;
+}
+
+#tooltip {
+  max-width: min(300px, calc(100vw - 24px));
+  max-height: 60dvh;
+  overflow: hidden;
+}
+
+/* 토스트가 좁은 화면을 넘지 않게 */
+.toast {
+  left: auto;
+  right: max(12px, env(safe-area-inset-right));
+  bottom: max(16px, env(safe-area-inset-bottom));
+  max-width: min(360px, calc(100vw - 24px));
+}
+
+/* 짧은 뷰포트(가로 폰/키보드)에서도 인증 컨트롤은 44px 유지 */
+@media (max-height: 760px) {
+  .auth-field,
+  .submit,
+  .register-cta,
+  .sso-btn { min-height: 44px; height: auto; }
+}
+
+/* 폰: 핵심 모달을 바텀시트로 — footer 버튼 항상 노출 */
+@media (max-width: 600px) {
+  .acct-modal,
+  .mcp-modal,
+  .mode-modal,
+  .workspace-modal,
+  .advanced-settings-panel,
+  .model-panel {
+    width: 100%;
+    max-width: none;
+    max-height: 92dvh;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+  .acct-modal-overlay,
+  .mcp-modal-overlay,
+  .mode-modal-overlay,
+  .workspace-modal-overlay,
+  .advanced-settings-overlay,
+  .model-overlay {
+    align-items: flex-end;
+  }
+}
+
+/* ============================================================================
+ * 6. 채팅 — 태블릿 티어(<=1024) 에서도 드로어 + 햄버거
+ *    기존 파일은 768px 에서만 드로어로 전환 → 769~1024 구간이 깨져있음
+ * ========================================================================== */
+@media (max-width: 1024px) {
+  body.lattice-ref-chat { overflow: hidden; }
+
+  .sidebar-toggle,
+  .sidebar-close { display: inline-flex; }
+
+  .app-layout .sidebar,
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100dvh;
+    width: min(86vw, 320px);
+    min-width: 0;
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 4px 0 32px rgba(20, 16, 40, 0.22);
+  }
+  body.sidebar-open .sidebar { transform: translateX(0); }
+
+  .sidebar-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 99;
+    display: none;
+    background: rgba(15, 12, 30, 0.42);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+  }
+  body.sidebar-open .sidebar-overlay { display: block; }
+
+  .main-chat { width: 100%; flex: 1; }
+
+  /* 모드 세그먼트/헤더가 두 줄로 안 깨지게: 가로 스크롤 */
+  .mode-segmented {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+  .mode-segmented::-webkit-scrollbar { display: none; }
+}
+
+/* ops-strip: 좁은 화면에서 카드 세로 적층 */
+@media (max-width: 760px) {
+  .ops-strip {
+    grid-template-columns: 1fr;
+    width: calc(100% - 28px);
+  }
+}
+
+/* 홈 대시보드 카드 / 온보딩 스텝 단일 열 */
+@media (max-width: 900px) {
+  .home-dash-cards { grid-template-columns: 1fr; }
+}
+@media (max-width: 560px) {
+  .onboarding-steps {
+    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    gap: 4px;
+  }
+  .onboarding-step { white-space: normal; font-size: 10px; }
+}
+
+/* 상태 pill 을 숨기지 말고 줄바꿈 허용 (기능 숨김 금지 원칙) */
+@media (max-width: 480px) {
+  .header-pills .status-pill { display: inline-flex; }
+  .header-pills { flex-wrap: wrap; justify-content: flex-end; }
+}
+
+/* ============================================================================
+ * 7. 관리자 — 레일 접힘 + 표를 카드로
+ * ========================================================================== */
+body.lattice-ref-admin {
+  overflow-x: hidden;
+  min-width: 0;
+}
+
+/* `.toolbar` 의 position:absolute / z-index:20 은 graph 캔버스 전용인데
+ * 선택자가 과넓어(`.toolbar`) admin·chat 의 폼 액션 행(.toolbar)까지 새어
+ * 페이지 우상단으로 떠올라 헤더 버튼(새로고침/로그아웃)을 덮었다.
+ * graph 가 아닌 페이지에서는 정상 흐름(static)으로 되돌린다. !important 불필요
+ * — `body.lattice-ref-*  .toolbar` 가 `.toolbar` 보다 명시도가 높다. */
+body.lattice-ref-admin .toolbar,
+body.lattice-ref-chat .toolbar {
+  position: static;
+  z-index: auto;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+@media (max-width: 1024px) {
+  .lattice-ref-admin { grid-template-columns: 1fr; }
+  .lattice-ref-admin .content { width: 100%; max-width: 100%; }
+
+  /* 관리자 레일: 햄버거 드로어로 */
+  .admin-rail,
+  .lattice-ref-admin .admin-rail {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100dvh;
+    width: min(84vw, 300px);
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  body.admin-rail-open .admin-rail { transform: translateX(0); }
+  body.admin-rail-open .sidebar-overlay { display: block; }
+}
+
+/* 표 → 카드 (<=760) : .data-table / .admin-table / .table-wrap table
+ * JS 렌더러가 각 <td> 에 data-label 을 넣어준다 (admin.js). */
+@media (max-width: 760px) {
+  .table-wrap { overflow: visible; }
+  .table-wrap table,
+  table.admin-table,
+  table.data-table {
+    min-width: 0;
+    width: 100%;
+    border: 0;
+  }
+  .table-wrap thead,
+  table.admin-table thead,
+  table.data-table thead { display: none; }
+  .table-wrap tr,
+  table.admin-table tr,
+  table.data-table tr {
+    display: block;
+    margin: 0 0 10px;
+    border: 1px solid var(--border, rgba(120,120,140,0.18));
+    border-radius: 12px;
+    padding: 6px 12px;
+    background: var(--surface, rgba(255,255,255,0.04));
+  }
+  .table-wrap td,
+  table.admin-table td,
+  table.data-table td {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 0;
+    border: 0;
+    white-space: normal;
+    text-align: right;
+  }
+  .table-wrap td::before,
+  table.admin-table td::before,
+  table.data-table td::before {
+    content: attr(data-label);
+    font-weight: 700;
+    text-align: left;
+    color: var(--muted, #888);
+    flex: 0 0 42%;
+  }
+  /* 카드 안 액션 버튼은 전체폭으로 */
+  .admin-actions,
+  td .table-actions {
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  .admin-action,
+  .table-btn { min-height: 44px; }
+}
+
+/* ============================================================================
+ * 8. 지식 그래프 — 레일 드로어(숨기지 않음) + 툴바 스크롤 + 검색창 위치
+ *    JS(줌/전체화면/미니맵/관계필터/카드뷰/재맞춤)는 graph.js 에서 처리.
+ * ========================================================================== */
+@media (max-width: 1024px) {
+  /* 기존: max-width:900 에서 .reference-rail{display:none} (네비 접근불가)
+     → 드로어로 전환해서 접근 가능하게 */
+  body.lattice-ref-graph .reference-rail {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100dvh;
+    width: min(84vw, 300px);
+    z-index: 100;
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow-y: auto;
+  }
+  body.graph-nav-open .reference-rail { transform: translateX(0); }
+  body.graph-nav-open .sidebar-overlay { display: block; }
+
+  /* 그래프 햄버거 버튼 노출 (graph.html 에 추가) */
+  .graph-nav-toggle { display: inline-flex; }
+}
+
+/* 그래프 하단 툴바: 좁은 화면에서 줄바꿈 대신 가로 스크롤 */
+@media (max-width: 900px) {
+  .lattice-ref-graph .toolbar,
+  .graph-toolbar {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    justify-content: flex-start;
+    padding-bottom: max(8px, env(safe-area-inset-bottom));
+    scrollbar-width: none;
+  }
+  .lattice-ref-graph .toolbar::-webkit-scrollbar,
+  .graph-toolbar::-webkit-scrollbar { display: none; }
+
+  /* 검색창을 스테이지 안쪽으로 (기존 top:-60px 로 화면 밖) */
+  .lattice-ref-graph .search-shell {
+    top: 12px;
+    right: 12px;
+    left: auto;
+  }
+}
+
+/* (햄버거 토글 기본 숨김은 섹션 0 으로 이동 — 노출 규칙보다 먼저 선언) */
+
+/* 그래프/카드 뷰 토글 (graph.js 가 .graph-card-view 클래스 토글) */
+.graph-view-toggle { display: none; }
+@media (max-width: 900px) {
+  .graph-view-toggle { display: inline-flex; }
+}
+/* 그래프 햄버거(모바일) 위치 */
+.graph-nav-toggle {
+  position: fixed;
+  top: max(10px, env(safe-area-inset-top));
+  left: 10px;
+  z-index: 60;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--surface, #fff);
+  border: 1px solid var(--border, rgba(120,120,140,0.2));
+  box-shadow: 0 6px 18px rgba(20, 16, 40, 0.16);
+}
+
+/* 미니맵 — 스테이지 우상단 (작은 화면에선 카드뷰가 대체하므로 숨김) */
+.stage { position: relative; }
+.graph-minimap {
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  width: 180px;
+  height: 120px;
+  border: 1px solid var(--border, rgba(120,120,140,0.25));
+  border-radius: 10px;
+  background: var(--surface, rgba(255,255,255,0.6));
+  box-shadow: 0 6px 18px rgba(20, 16, 40, 0.14);
+  z-index: 8;
+  cursor: pointer;
+}
+@media (max-width: 900px) {
+  .graph-minimap { display: none; }
+}
+
+/* 모바일 카드 뷰 — 스테이지를 덮는 노드 카드 리스트 */
+.graph-card-list {
+  display: none;
+  position: absolute;
+  inset: 0;
+  z-index: 9;
+  padding: 16px;
+  padding-top: 64px;
+  overflow-y: auto;
+  background: var(--bg, #fff);
+  -webkit-overflow-scrolling: touch;
+}
+body.graph-card-view .graph-card-list { display: block; }
+body.graph-card-view .stage > canvas#graph { visibility: hidden; }
+
+/* ============================================================================
+ * 9. 워크스페이스 / 플랫폼 페이지 가드
+ *    (세부는 workspace.css / platform.css 에서, 여기선 안전망)
+ * ========================================================================== */
+.workspace-shell { min-height: 100vh; min-height: 100dvh; }
+.workspace-rail { height: 100vh; height: 100dvh; }
+
+@media (max-width: 600px) {
+  .platform-grid,
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ============================================================================
+ * 10. 울트라와이드 / 4K — 콘텐츠 폭 제한, 헤더 정렬
+ * ========================================================================== */
+@media (min-width: 1600px) {
+  body.lattice-ref-chat { --content-width: 1040px; }
+}
+@media (min-width: 2200px) {
+  body.lattice-ref-chat { --content-width: 1180px; }
+}
+
+/* ============================================================================
+ * 11. 모션 줄이기 (a11y)
+ * ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms;
+    animation-iteration-count: 1;
+    transition-duration: 0.001ms;
+    scroll-behavior: auto;
+  }
+}
+
+/* 다크에서 테마 토글 아이콘 상태 */
+:root[data-lt-theme="dark"] .theme-toggle .ti-sun { display: inline-flex; }
+:root[data-lt-theme="dark"] .theme-toggle .ti-moon { display: none; }
+.theme-toggle .ti-sun { display: none; }
+.theme-toggle .ti-moon { display: inline-flex; }
+
+/* 드래그앤드롭 파일 첨부 시각 피드백 */
+.main-chat.drag-over {
+  outline: 2px dashed var(--accent, #6E4AE6);
+  outline-offset: -8px;
+  background: var(--accent-soft, rgba(110, 74, 230, 0.06));
+}
+
+/* 테마 토글 버튼 기본 스타일 + 44px */
+.theme-toggle {
+  min-width: 44px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  background: transparent;
+  border: 1px solid var(--border, rgba(120,120,140,0.2));
+  border-radius: 10px;
+  color: var(--text, inherit);
+  cursor: pointer;
+}
+.theme-toggle:hover { background: var(--accent-soft, rgba(110,74,230,0.1)); }