https://factchecker.cloud/src/index.css

1import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/index.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
2const __vite__id = "/home/bang/datatek_rag/frontend/src/index.css"
3const __vite__css = "\n@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css');\n@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');\n/* ──────────────────────────────────────────────────────────────────────────\n   DataTek RAG — Global theme (Editorial precision)\n   Why: 이전엔 Vite scaffold 의 `:root { font-family: system-ui … background:#242424 }`\n   가 그대로 남아 있었고 main.tsx 에서 import 도 안 됐다. antd reset 만 적용된 상태였기\n   때문에 화면 전체가 antd default + system-ui sans-serif 로 표현됨. brand identity 부재.\n   ────────────────────────────────────────────────────────────────────────── */\n\n/* Pretendard: 한국어 + 라틴 통합 web font (KCEA — 공공 표준 가까운 무료). variable.woff2\n   하나만 받아 전체 weight 100–900 커버 → 페이지당 1 round-trip, 자체 호스팅 jsdelivr CDN. */\n\n/* JetBrains Mono: 코드/수치/메트릭에 사용. tabular-nums + ligature 가 dashboard 의 숫자\n   정렬과 코드블록의 가독성을 동시에 끌어올린다. */\n\n:root {\n  /* ── Brand / Color tokens ─────────────────────────────────────────── */\n  /* Primary: DataTek 로고에서 추출한 deep crimson. Antd default blue (#1890ff)\n     는 \"어디서나 본 SaaS\" 느낌이라 브랜드 정체성을 흐린다. */\n  --dt-brand: #9D2235;\n  --dt-brand-hover: #7E1A2A;\n  --dt-brand-soft: #F7E9EB;       /* tag/highlight bg */\n\n  /* ── Surfaces ─────────────────────────────────────────────────────── */\n  /* 살짝 따뜻한 off-white. 순백(#FFFFFF) 은 형광등 자료실 분위기, off-white 는 인쇄물/\n     editorial 톤. 콘텐츠 카드는 순백으로 두어 미세한 depth 형성. */\n  --dt-surface: #FAF8F4;\n  --dt-card: #FFFFFF;\n  --dt-card-elevated: #FFFFFF;\n  --dt-border: #E8E2D8;           /* warm hairline */\n  --dt-border-strong: #D6CFC2;\n  --dt-divider: #EFEBE3;\n\n  /* ── Text ─────────────────────────────────────────────────────────── */\n  --dt-text: #1A1F26;             /* near-black with cool tint */\n  --dt-text-secondary: #5F6770;\n  --dt-text-tertiary: #8A929C;\n\n  /* ── Typography ───────────────────────────────────────────────────── */\n  --dt-font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;\n  --dt-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;\n  --dt-font-display: 'Pretendard Variable', Pretendard, system-ui, sans-serif;\n\n  /* ── Radius / Shadow ──────────────────────────────────────────────── */\n  --dt-radius-sm: 4px;\n  --dt-radius: 6px;\n  --dt-radius-lg: 10px;\n  --dt-shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04), 0 1px 1px rgba(15, 20, 25, 0.03);\n  --dt-shadow-card: 0 1px 0 rgba(15, 20, 25, 0.02), 0 2px 8px rgba(15, 20, 25, 0.04);\n  --dt-shadow-modal: 0 8px 24px rgba(15, 20, 25, 0.10), 0 2px 6px rgba(15, 20, 25, 0.06);\n\n  font-family: var(--dt-font-sans);\n  font-feature-settings: 'cv11', 'ss01', 'ss03';\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: var(--dt-text);\n  background-color: var(--dt-surface);\n}\n\nhtml, body, #root {\n  margin: 0;\n  padding: 0;\n  background-color: var(--dt-surface);\n  color: var(--dt-text);\n  min-height: 100vh;\n}\n\nbody {\n  font-family: var(--dt-font-sans);\n  letter-spacing: -0.005em;       /* 한글에는 영향 적고, 라틴에 살짝 타이트한 editorial tone */\n}\n\n/* numerals: tabular + lining for dashboard tables, metrics, timestamps */\ncode, kbd, samp, pre, .dt-mono {\n  font-family: var(--dt-font-mono);\n}\n.ant-statistic-content,\n.ant-table,\n.ant-progress-text {\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── Editorial flourishes ─────────────────────────────────────────────\n   .dt-page-title: 좌측에 크림슨 사각 막대(▌) 가 붙는 페이지 헤더. Substack/Linear\n   변형. 한 줄짜리 큰 제목에 정체성을 부여 — antd Typography 그대로 두면 plain bold\n   가 되어 화면이 모두 비슷해 보임. */\n.dt-page-title {\n  position: relative;\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  color: var(--dt-text);\n  padding-left: 18px;\n  margin: 0;\n}\n.dt-page-title::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0.18em;\n  bottom: 0.22em;\n  width: 4px;\n  background: var(--dt-brand);\n  border-radius: 1px;\n}\n\n/* small-caps section labels — 사이드바 그룹/카테고리 헤더 등에 사용 */\n.dt-eyebrow {\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--dt-text-tertiary);\n}\n\n/* ── Antd overrides for editorial polish ─────────────────────────────\n   Why: ConfigProvider theme tokens 으로 충분히 못 잡는 시각 디테일은 selective rule\n   override 로 마감. (글로벌 css 라 specificity 충분.) */\n\n/* Layout sider/header — 따뜻한 off-white 배경에 어울리도록 */\n.ant-layout {\n  background: var(--dt-surface);\n}\n.ant-layout-header {\n  background: var(--dt-card) !important;\n  border-bottom: 1px solid var(--dt-border) !important;\n  /* 헤더 하단 1px 라인 위로 0.5px brand red 살짝 — 페이지 최상단에 brand 신호 */\n  box-shadow: inset 0 -3px 0 -2px var(--dt-brand);\n}\n\n/* Card: shadow 줄이고 hairline border 로 editorial 느낌. */\n.ant-card {\n  border: 1px solid var(--dt-border) !important;\n  box-shadow: var(--dt-shadow-card) !important;\n  background: var(--dt-card);\n}\n.ant-card-head {\n  border-bottom: 1px solid var(--dt-divider) !important;\n  min-height: 48px;\n}\n.ant-card-head-title {\n  font-weight: 600;\n  letter-spacing: -0.01em;\n}\n\n/* Buttons: 호버 시 미세 lift — RA 토스트 같은 가벼움 */\n.ant-btn {\n  font-weight: 500;\n  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;\n}\n.ant-btn-primary {\n  box-shadow: 0 1px 0 rgba(15, 20, 25, 0.08);\n}\n.ant-btn-primary:not(:disabled):hover {\n  transform: translateY(-1px);\n  box-shadow: 0 3px 8px rgba(157, 34, 53, 0.20);\n}\n.ant-btn-primary:not(:disabled):active {\n  transform: translateY(0);\n}\n\n/* Tag: brand soft variant 추가 사용처는 컴포넌트에서 직접 className 부여 */\n.ant-tag-dt-brand {\n  background: var(--dt-brand-soft);\n  color: var(--dt-brand);\n  border-color: transparent;\n}\n\n/* Input/Select: focus ring 을 brand 색으로. antd default colorPrimary 의존 → 우리는\n   ConfigProvider 에서 brand red 로 바꿨으니 자동 적용. 보조로 hover border 강화. */\n.ant-input:hover,\n.ant-input-affix-wrapper:hover,\n.ant-select:not(.ant-select-disabled):hover .ant-select-selector,\n.ant-picker:hover {\n  border-color: var(--dt-border-strong) !important;\n}\n\n/* Table: editorial 한 hairline + header weight */\n.ant-table-thead > tr > th {\n  background: var(--dt-surface) !important;\n  font-weight: 600 !important;\n  color: var(--dt-text-secondary) !important;\n  font-size: 12px;\n  letter-spacing: 0.02em;\n  text-transform: uppercase;\n}\n\n/* Menu (sidebar): selection highlight subtle */\n.ant-menu-light .ant-menu-item-selected {\n  background: var(--dt-brand-soft) !important;\n  color: var(--dt-brand) !important;\n}\n\n/* Link/typography */\na, .ant-typography a {\n  color: var(--dt-brand);\n}

3\na:hover, .ant-typography a:hover {\n  color: var(--dt-brand-hover);\n}\n\n/* Scrollbar — thin, themed (WebKit). 거의 모든 사이드 panel 에 적용. */\n* {\n  scrollbar-width: thin;\n  scrollbar-color: var(--dt-border-strong) transparent;\n}\n*::-webkit-scrollbar { width: 8px; height: 8px; }\n*::-webkit-scrollbar-track { background: transparent; }\n*::-webkit-scrollbar-thumb {\n  background: var(--dt-border-strong);\n  border-radius: 4px;\n}\n*::-webkit-scrollbar-thumb:hover { background: var(--dt-text-tertiary); }\n\n/* selection — brand soft */\n::selection {\n  background: var(--dt-brand-soft);\n  color: var(--dt-brand);\n}\n\n/* ── Info Alert → brand-tinted neutral ───────────────────────────────\n   Why: antd type=\"info\" 의 default 파란 bg/border 가 brand crimson 톤과 어긋난다.\n   페이지에 info Alert 가 여러 곳 (문서 무결성 안내, 청킹 설명, MCP 도움말 등) 노출돼\n   파란 면적이 누적되어 brand identity 흐림. 톤만 warm-neutral 로 살짝 교체 — info\n   의미는 유지(중립 회색-크림) + 아이콘 brand 강조. */\n.ant-alert-info {\n  background: #FBF6EF !important;\n  border-color: #E8DBC4 !important;\n}\n.ant-alert-info .ant-alert-icon {\n  color: var(--dt-brand) !important;\n}\n\n/* ── Focus ring ───────────────────────────────────────────────────────\n   Why: 기본 브라우저 focus outline 색이 OS 기반 (보통 까만/파란) 이라 brand 톤과 어긋났다.\n   focus-visible 만 brand crimson 으로 일관화 (마우스 클릭 시엔 여전히 visible focus 없음\n   = focus-visible 만 발현). antd 가 자체 box-shadow focus 를 가지는 컴포넌트는 그대로 우선. */\n*:focus-visible {\n  outline: 2px solid var(--dt-brand);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n/* ── Category tree (Categories page) ──────────────────────────────────\n   Why: 이전엔 antd Tree default 의 selected bg(#e6f7ff 또는 #fafafa) 가 사용자가 한 번\n   클릭한 row 에 영구 유지되고, hover bg 도 antd default 라 brand 와 어긋났다. 또 action\n   icons (Add/Edit/Delete) 가 평소에도 노출돼 row 가 가득 차 보였다. hover-only + brand-tint. */\n.dt-category-tree .ant-tree-node-content-wrapper {\n  border-radius: 6px;\n  padding: 4px 8px;\n}\n.dt-category-tree .ant-tree-node-content-wrapper:hover {\n  background: rgba(157, 34, 53, 0.04) !important;\n}\n.dt-category-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {\n  background: transparent !important;\n}\n.dt-category-tree .ant-tree-treenode {\n  padding: 2px 0;\n}\n.dt-category-tree .dt-cat-actions {\n  /* hover 전에도 옅게 보여 터치 기기·처음 온 사용자가 액션을 발견할 수 있게 */\n  opacity: 0.45;\n  transition: opacity 0.12s ease;\n}\n.dt-category-tree .ant-tree-treenode:hover .dt-cat-actions,\n.dt-category-tree .dt-cat-row:focus-within .dt-cat-actions {\n  opacity: 1;\n}\n/* 연결선 색을 brand 와 어울리는 warm 톤으로 */\n.dt-category-tree .ant-tree-switcher-line-icon,\n.dt-category-tree .ant-tree-indent-unit::before {\n  color: var(--dt-border-strong) !important;\n  border-color: var(--dt-border-strong) !important;\n}\n\n/* ── Global Search modal results ──────────────────────────────────────\n   Why: 검색 결과 List.Item 에 시각 신호가 cursor:pointer 외 0건이라 hover/active\n   인지가 약했다. ProfileList / session row 와 같은 brand-soft 톤으로 통일. */\n.dt-search-result {\n  border-radius: 6px;\n  padding: 8px 12px !important;\n  transition: background-color 0.12s ease;\n}\n.dt-search-result:hover {\n  background: rgba(157, 34, 53, 0.04);\n}\n.dt-search-result[data-active='true'] {\n  background: var(--dt-brand-soft);\n  border-left: 3px solid var(--dt-brand);\n  padding-left: 9px !important;\n}\n\n/* ── Chat sidebar session row ─────────────────────────────────────────\n   Why: 이전엔 inline style 만으로 active/hover 표현해 hover 시 menu icon 이 항상\n   보이고, active state 가 antd blue 라 brand 와 어긋났다. CSS class 로 분리해 호버에\n   서만 menu 보이게 + brand-tinted active state. */\n.dt-session-row {\n  position: relative;\n  padding: 10px 16px 10px 14px;\n  cursor: pointer;\n  border-left: 3px solid transparent;\n  transition: background-color 0.12s ease, border-color 0.12s ease;\n}\n.dt-session-row:hover {\n  background: rgba(157, 34, 53, 0.04);\n}\n/* 키보드 포커스 가시성 — role=\"button\" + tabIndex 로 포커스 가능해진 행. */\n.dt-session-row:focus-visible {\n  outline: 2px solid var(--dt-brand);\n  outline-offset: -2px;\n  background: rgba(157, 34, 53, 0.04);\n}\n.dt-session-row[data-active='true'] {\n  background: var(--dt-brand-soft);\n  border-left-color: var(--dt-brand);\n}\n.dt-session-row .dt-session-menu {\n  opacity: 0;\n  transition: opacity 0.12s ease;\n}\n.dt-session-row:hover .dt-session-menu,\n.dt-session-row[data-active='true'] .dt-session-menu,\n.dt-session-row:focus-within .dt-session-menu {\n  opacity: 1;\n}\n\n/* ── Streaming cursor (existing) ───────────────────────────────────── */\n.streaming-cursor::after {\n  

3content: \"▍\";\n  display: inline-block;\n  margin-left: 2px;\n  color: var(--dt-brand);\n  animation: streaming-cursor-blink 1s steps(1) infinite;\n}\n@keyframes streaming-cursor-blink {\n  0%, 50% { opacity: 1; }\n  50.01%, 100% { opacity: 0; }\n}\n\n/* ── Subtle entrance for first paint ───────────────────────────────── */\n@keyframes dt-fade-up {\n  from { opacity: 0; transform: translateY(6px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n.dt-fade-up {\n  animation: dt-fade-up 0.4s ease-out both;\n}\n\n/* ── Markdown content tables — mobile horizontal scroll ───────────────\n   Why: B6 — 모바일 viewport (≤480px) 에서 LLM 답변 안의 markdown table 이 폭이\n   너무 좁아 column 마다 글자 단위로 wrap 돼 \"행고유식별자\" 가 세로 한 글자씩\n   표시되는 등 사실상 읽을 수 없게 됨. table 을 block 으로 바꿔 가로 스크롤\n   허용 (GitHub 마크다운 표준 패턴). 모바일 외 viewport 에선 일반 table 처럼\n   width: 100% 로 정상 표시되도록 max-width 만 강제 — display 는 block 으로 두어도\n   border-collapse / 행렬 정렬은 보존됨. */\n.markdown-content table {\n  display: block;\n  max-width: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  white-space: nowrap;\n}\n.markdown-content table th,\n.markdown-content table td {\n  /* table 자체에 white-space: nowrap 을 주면 모든 셀이 줄바꿈 없이 한 줄에 쌓이지만,\n     긴 본문 셀 (예: 자유 텍스트 설명) 은 자연스러운 줄바꿈이 필요하므로 cell 단위로\n     normal 회복. 헤더는 nowrap 유지로 column 식별자가 절대 깨지지 않게 함. */\n  white-space: normal;\n  word-break: keep-all;\n}\n.markdown-content table th {\n  white-space: nowrap;\n}\n\n/* ── 어시스턴트 메시지 hover 액션 ────────────────────────────────────────────\n   Why: 복사 버튼을 항상 보이게 두면 메시지 footer 가 불필요하게 차지. hover 시에만\n   fade-in 해 시각적 노이즈를 줄이고, focus-within 으로 키보드 접근성도 보장. */\n.dt-message-container:hover .msg-hover-actions {\n  opacity: 1;\n}\n.dt-message-container .msg-hover-actions:focus-within {\n  opacity: 1;\n}\n/* Why: 터치 디바이스는 hover 가 짧게 한 번 발사된 뒤 사라져 복사 버튼이 안 보이게\n   된다. hover 가 없는 환경에서는 영구 노출. */\n@media (hover: none) {\n  .dt-message-container .msg-hover-actions {\n    opacity: 1;\n  }\n}\n\n/* ── contrast 개선 ────────────────────────────────────────────────\n   antd Tag.cyan default 는 color #08979c on bg #e6fffb (3.39:1) — Normal text\n   대비(4.5:1) 미달. cyan-9 (#00474f) 로 진하게 → 약 9:1 통과. cyan border 도\n   살짝 진하게 (#5cdbd3) 해서 chip 윤곽 가시성 보강. */\n/* Why: antd v5 cssinjs 가 wrapper class chain 으로 color 를 주입해 일반 specificity 로는\n   override 불가. a11y (Normal 4.5:1 대비) 통과를 위한 정당한 !important. 이전 #08979c\n   on #e6fffb 는 3.39:1 — Normal 12px text 기준 미달. #00474f 로 약 9:1 통과. */\n.ant-tag.ant-tag-cyan {\n  color: #00474f !important;\n  border-color: #5cdbd3 !important;\n}\n\n/* 검색 input focus indicator — antd Input 의 :focus-within border 가 약해서 키보드 사용자에게\n   focus 위치가 불분명. brand color 로 outline 추가. */\n.ant-input-affix-wrapper:focus-within,\n.ant-input:focus {\n  outline: 2px solid var(--dt-brand, #9d2235);\n  outline-offset: 1px;\n}\n\n/* Why: inspector tabs container 가 786px 로 충분히 넓은데 antd 가 mount 초기 측정\n   타이밍 bug 로 더보기 button 을 노출 (안은 비어있음). dt-inspector-tabs 스코프에서만\n   더보기 button 숨김 — 다른 antd Tabs 의 정상 overflow 동작에는 영향 없음. */\n.dt-inspector-tabs .ant-tabs-nav-more {\n  display: none !important;\n}\n\n/* 긴 카테고리·문서 이름이 행을 밀어 오른쪽 버튼(수정·삭제·받기)이 화면 밖으로 나가던 것 —\n   트리 행 내용 칸이 줄어들 수 있게 하고 이름은 말줄임. (카테고리 이름은 200자까지 허용) */\n.dt-category-tree .ant-tree-node-content-wrapper,\n.dt-doc-selector-tree .ant-tree-node-content-wrapper {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;

3\n  /* 아이콘과 이름을 한 줄에 — block 제목이 아이콘 아래로 내려가지 않게 */\n  display: flex;\n  align-items: center;\n}\n.dt-category-tree .ant-tree-title,\n.dt-doc-selector-tree .ant-tree-title {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dt-category-tree .ant-tree-treenode,\n.dt-doc-selector-tree .ant-tree-treenode {\n  width: 100%;\n  min-width: 0;\n}\n.dt-category-tree .ant-tree-iconEle,\n.dt-doc-selector-tree .ant-tree-iconEle {\n  flex: none;\n}\n"
4__vite__updateStyle(__vite__id, __vite__css)
5import.meta.hot.accept()
6import.meta.hot.prune(() => __vite__removeStyle(__vite__id))