/* ============================================ Design System — tokens + components 단일 원본. 나중에 tokens.ts → CSS 변수로 이관 토큰 이름은 **관리자 콘솔(llmops-console-ux) 기준**입니다 (2026-08-27 정렬). 이용자 인터페이스(front-ux)가 이 파일을 복사해 쓰는데, 거기서 매번 이름을 바꿔 심느라 동기화 때마다 수정분이 날아갔습니다. 이제 이름이 같습니다. ⚠ **값도 콘솔 기준입니다** (2026-09-08). 전에는 이 저장소가 자기 값을 고집했습니다 — 콘솔의 success가 흰 배경과 3.45:1, warning이 2.50:1이라 대비 게이트를 통과 못 해서였습니다. 이제 **면 색과 글자 색을 나눠서** 둘 다 만족시킵니다: · --success / --warning / --error 면 색. 콘솔 원색 그대로. 점 · 막대 · 옅은 면 · 테두리용 (비텍스트 기준 3:1이라 원색으로 충분합니다) · --success-text / --warning-text / --error-text 글자용. 콘솔이 쓰던 어두운 값 (4.5:1 이상) 콘솔이 이미 쓰던 방식이고, --primary / --primary-text 를 나눈 것과 같은 요령입니다. ⚠ **흰 글자를 얹는 채움에는 면 색을 쓰지 마세요** — 어두운 쪽(-text)을 씁니다. .badge.solid.* 와 Vuetify 테마(theme.ts)가 그 경우입니다. ============================================ */ :root { /* ⚠ 이 덩이는 앱 토큰 파일에서 받아 온 것입니다 — 여기서 고치지 말고 앱 토큰.css 를 고친 뒤 npm run tokens:pull (2026-10-06) */ /* ── 콘솔 원본 ───────────────────────────────────────────── 아래 블록은 shared/design/index.css 와 **값이 같아야 합니다.** 주석까지 저쪽에서 그대로 옮겨 왔습니다. 임의로 손대지 마세요. */ --background:#ffffff; --foreground:#1a1a1a; --card:#ffffff; --primary:#1f7ff0; --primary-foreground:#ffffff; --muted:#f4f4f5; --muted-foreground:#707070; --border:#e4e4e7; --input:#d6d6da; --ring:#1f7ff0; --border-emphasized:#c9c9cd; --success:#2f9e44; --error:#d6362a; --warning:#e69100; /* 글자용 상태색 — 위 세 개는 면 색이고 글자에는 이쪽. --success-text는 2026-09-08에 관리자 콘솔이 늘린 것을 받아온 것입니다(흰 배경 5.01:1). 원색 #2f9e44는 3.45:1이라 글자로 쓰면 WCAG AA 미달입니다 — 배지 바탕·점에만 쓰세요. */ --error-text:#c92a2a; --warning-text:#9a6700; --success-text:#17803d; --accent-muted:#e9f2fe; /* 사용자 말풍선 — 면 · 글자 (2026-10-14 사용자 지정값). --accent-muted 와 라이트는 거의 같지만 다크가 다르고 (#1a2c47 → #273e74 · 글자도 따로), --accent-muted 는 마흔 곳 넘게 써서 그 값을 바꾸지 않고 따로 둡니다 */ --user-bubble:#ebf3fe; --user-bubble-fg:#172749; --overlay-hover:rgba(0,0,0,.05); --selected-fill:rgba(0,0,0,.06); --canvas:#f4f4f5; --r-el:6px; --r-ct:10px; --font:'Pretendard Variable', Pretendard, -apple-system, sans-serif; /* 탭·필터 활성 — 선·글자는 브랜드, 면은 옅은 브랜드. 면을 브랜드로 채우지 않습니다 */ --nav-active: var(--primary); --nav-active-fg: var(--primary); --nav-active-bg: color-mix(in srgb, var(--primary) 7%, transparent); /* 범주형 팔레트 — '종류'에 고정으로 붙는 색 (순위·개수가 바뀌어도 색은 그대로). 1번은 브랜드색, 나머지는 색맹 판별(ΔE)·명도대비 검증을 통과한 조합입니다. ⚠ 상태색(성공·경고·오류)과 섞어 쓰지 마세요 — 저쪽은 의미가 고정된 색입니다. */ --cat-1: #1f7ff0; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #eda100; --cat-5: #e87ba4; --cat-6: #008300; /* 7 · 8은 관리자 콘솔이 2026-08-28에 늘린 두 칸입니다 — 그래프 라벨 열둘을 여섯 색에 담으려니 법령 계통 하나에만 넷이 몰렸습니다. 여기 화면에는 아직 쓰는 곳이 없지만, 토큰은 기준(콘솔)과 같은 벌이어야 합니다 — 없으면 `npm run ds:check`가 잡습니다. */ --cat-7: #0b87a3; --cat-8: #8250c4; /* 지식자산 갈래 — 커넥터 파이프라인(브랜드 블루)과 다른 계통이라는 걸 색으로 못박습니다 */ --kb: #7c3aed; /* 스크롤바 */ color-scheme: light; --scrollbar: rgba(0, 0, 0, .28); --scrollbar-hover: rgba(0, 0, 0, .45); /* ── 확장 ────────────────────────────────────────────────── 콘솔에 없지만 본편이 쓰는 것들. **위 토큰에서 파생**시켜 원본이 하나로 유지되게 했습니다. 콘솔에도 필요해지면 저쪽에 먼저 올리고 여기서 지우세요. */ /* 그레이 12단 — 콘솔의 회색을 계조로 늘린 것. 3·7·10·12는 콘솔 값을 그대로 물고 있습니다. 화면 CSS는 이걸 직접 쓰지 않습니다(--muted 등 의미 토큰을 쓸 것) — 디자인시스템 내부용 */ --gray-1: #fcfcfc; --gray-2: #fafafa; --gray-3: var(--muted); /* #f4f4f5 */ --gray-4: #ececee; --gray-5: var(--border); /* #e4e4e7 */ --gray-6: var(--input); /* #d6d6da */ --gray-7: var(--border-emphasized); /* #c9c9cd */ --gray-8: #b0b0b6; --gray-9: #96969d; --gray-10: var(--muted-foreground); /* #707070 */ --gray-11: #5c5c62; --gray-12: var(--foreground); /* #1a1a1a */ /* 반투명 회색 — 어떤 면 위에 올려도 자연스러운 구분선용 */ --gray-a2: rgba(0,0,0,.04); --gray-a3: rgba(0,0,0,.06); --gray-a5: rgba(0,0,0,.11); --gray-a6: rgba(0,0,0,.14); --gray-a7: rgba(0,0,0,.18); /* 빈 단 채움 (2026-09-15) — a1 · a4 · a8. DS 와 같은 단계. 겹판 · 옅은 띠가 .08 을 제일 자주 씁니다 */ --gray-a1: rgba(0,0,0,.02); --gray-a4: rgba(0,0,0,.08); --gray-a8: rgba(0,0,0,.24); /* 보더 3단 — 콘솔의 세 값에 '행 사이 구분선'만 더했습니다 */ --border-subtle: rgba(0,0,0,.05); /* 브랜드 상호작용 단계 — 콘솔엔 hover/active 단계가 없어 여기서 정의합니다 */ --primary-hover: #1c74dc; --primary-active: #1a6ccc; /* 브랜드를 **글자·링크로** 쓸 때의 색. 면(--primary #1f7ff0)은 흰 배경과 3.92:1 이라 글자로 쓰면 WCAG AA(4.5:1)에 미달합니다. 점·링·보더는 비텍스트 기준(3:1)이라 --primary 로 충분하고, 글자만 이 값을 씁니다(5.89:1). 디자인시스템 원본이 쓰는 이름이라, 없으면 동기화할 때 색이 통째로 빕니다. */ --primary-text: #0f62c4; /* 상태 3단 — solid(콘솔) + subtle(면) + border(테두리). 면·선은 solid에서 파생 */ --success-subtle: color-mix(in srgb, var(--success) 6%, var(--card)); --success-border: color-mix(in srgb, var(--success) 28%, transparent); --warning-subtle: color-mix(in srgb, var(--warning) 6%, var(--card)); --warning-border: color-mix(in srgb, var(--warning) 30%, transparent); --error-subtle: color-mix(in srgb, var(--error) 6%, var(--card)); --error-border: color-mix(in srgb, var(--error) 28%, transparent); --info-subtle: color-mix(in srgb, var(--primary) 5%, var(--card)); --info-border: color-mix(in srgb, var(--primary) 24%, transparent); /* 에러 포커스 링 — 면(6%)보다 진합니다. 3.5px 띠라 면과 같은 농도로는 안 보입니다 */ --error-ring: color-mix(in srgb, var(--error) 16%, var(--card)); /* 뒤집힌 면(토스트·툴팁) 위에 얹는 상태색 — 현재 테마 값을 쓰면 어두운 면에 어두운 색이 얹혀 안 보이므로 '반대 테마의 값'을 씁니다 */ --success-on-inverse: #51cf66; --error-on-inverse: #ff6b6b; --favorite: #e8a800; /* 즐겨찾기 별 — 골드 (비텍스트 UI, 3:1) */ /* ── 파일 유형 — 확장자 아이콘 · 배지 색 (2026-09-15 신설) ────────────────── 세 곳(콘솔 문서 탐색 · 이용자 AI 드라이브 · 파일피커)이 같은 팔레트를 저마다 적고, 답변서 · 프로젝트 · 국회질의 분류는 **다른 팔레트**(React 포트 잔재: pdf #E5484D …)를 쓰고 있었습니다 — 같은 PDF 가 화면마다 다른 빨강. 값은 콘솔 것입니다(콘솔이 정답, 2026-08-28 규칙). 확장자 → 토큰 매핑은 공용/파일유형.ts 한 벌입니다. ⚠ 다크 값은 라이트와 같습니다 — 정한 사람이 없어 지금 화면과 같게 둡니다(React 원본의 light-dark() 짝은 포트 때 버려졌습니다). 다크에서 탁하면 그때 .dark 에 값을 주세요 */ --ft-pdf: #d6452e; --ft-doc: #3b78d8; --ft-sheet: #2f9e44; --ft-slide: #e8730c; --ft-hwp: #0e8ba8; --ft-image: #8250c4; --ft-archive: #b98900; --ft-csv: #12a594; --ft-audio: #c2255c; /* 음성 — 시큐어노트 음성 소스 (2026-09-21 신설) */ --ft-video: #4f55d6; /* 영상 — 영상 수사의 CCTV · 블랙박스 원본 (2026-10-15 신설). 문서 파랑과 이미지 보라 사이 남색 */ --ft-text: var(--muted-foreground); /* 인용 하이라이트 — 출처 창 · 인용 서랍의 . 라이트/다크 짝은 chat.css 가 갖고 있던 값 그대로 */ --highlight-bg: #ffe28a; /* 개인정보 분류 — 비식별화의 직접식별 · 준식별 · 민감(영업기밀). ⚠ **위험이 큰 쪽이 붉습니다** (2026-09-22 사용자 지시: "레드는 직접식별자고 준식별자는 주황 민감정보도 주황색") — 직접식별자 **레드** → 준식별자 **주황** → 민감 **앰버**. 앞 판은 주황 · 청록 · 보라라 **세 갈래가 서로 무관한 색**이어서, 무엇이 더 위험한지를 색이 전혀 말하지 않았습니다(cat-2 · 7 · 8). ⚠⚠ 루트와 다크 **양쪽**에 적습니다 — var() 는 **선언된 자리에서 굳습니다**. 한쪽만 적으면 다크에서도 라이트 값이 나옵니다(집 규칙 '--nav-active 3종'과 같은 함정). 앞 판이 실제로 그랬습니다: 다크에서 cat-2 · 7 · 8 의 다크 값이 **한 번도 안 쓰였습니다**. ⚠ 쓰는 곳 — 비식별화 본문 마크(.cog-dax__mk) · 항목 알약(.cog-dax__cattag) · 점(.cog-dax__dot) · 시큐어노트 기본설정 점 · 실행 카드. 한 곳에서 바꾸면 전부 따라옵니다. */ --pii-direct: var(--error); --pii-quasi: var(--cat-2); --pii-sensitive: var(--warning); /* ⚠ **면 위에 얹는 글자는 -text 쪽**입니다 — 12% 옅은 면 위에 원색을 그대로 올리면 앰버가 배경에 묻힙니다(실측: 라이트에서 #e69100 이 대비 2.3:1). 집의 C · S · O 배지가 이미 같은 규칙입니다(면 --error 10% + 글자 --error-text). ⚠ 준식별자만 -text 짝이 없어 **잉크색을 섞어** 만듭니다 — 라이트에서는 어두워지고 다크에서는 밝아져, 두 모드에서 한 줄로 해결됩니다. ⚠ 면(마크 · 점 · 실행 카드)은 위의 원색 그대로입니다 — 어두워지면 형광펜이 탁해집니다. */ --pii-direct-text: var(--error-text); --pii-quasi-text: color-mix(in srgb, var(--cat-2) 75%, var(--foreground)); --pii-sensitive-text: var(--warning-text); /* 가장 위험 — 개인 · 그룹 기준 동시 초과(통합 프로파일링). --error 보다 어둡고 진한 진홍 */ --error-deep: #8e1023; /* 그림자 4단 (2026-09-15 신설) — 55곳이 저마다 rgba 를 적고 있었습니다. sm 컨트롤 살짝 · md 카드 hover · 작은 팝 · lg 메뉴 · 팝오버 · 토스트 · xl 다이얼로그 · 패널 ⚠ 그림자는 다크에서도 **검정**입니다 — --gray-a 처럼 흰색으로 뒤집으면 빛이 납니다. 다크는 면이 어두워 같은 알파로는 안 보여서 --shadow-overlay 와 같은 요령으로 진하게 */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06); /* 위로 지는 sm — 판 **아래**에 붙박인 줄(비식별화 항목의 [+ 추가])이 넘친 줄 위에 떠 있을 때. 값은 sm 그대로 y 만 뒤집은 것입니다 — 새 단계가 아니라 같은 단계의 방향 짝 (2026-09-23) */ --shadow-up-sm: 0 -1px 2px rgba(0,0,0,.06); --shadow-md: 0 2px 8px rgba(0,0,0,.10); --shadow-lg: 0 6px 20px -6px rgba(0,0,0,.18); --shadow-xl: 0 12px 40px -12px rgba(0,0,0,.35); /* 오른쪽에서 밀려 나오는 서랍(슬라이드오버) — 그림자가 **왼쪽으로** 눕습니다. 위 sm~xl 은 전부 아래로 지는 그림자라 세로 패널에는 맞지 않습니다. ⚠ 값은 관리자 콘솔 dlp.css 의 조건 편집 패널 것입니다 — 이용자 화면 두 곳(국회 답변서 · 프로젝트)이 -8px 0 24px rgba(0,0,0,.08) 로 따로 놀던 것을 2026-09-15 에 이 한 벌로 모았습니다 */ --shadow-drawer: -12px 0 28px -18px rgba(0,0,0,.35); /* 모달 뒤 가림막 — ui.css · 문의창 · 설정창이 저마다 rgba(0,0,0,.4) 였습니다. 다크도 같은 값(면이 어두워 더 진할 필요 없음) */ --scrim: rgba(0,0,0,.4); /* 라운드 — 콘솔은 요소 6 / 컨테이너 10 두 단. 그 안쪽(체크박스·작은 칩)만 더합니다 */ --r-in: 4px; --r-full: 9999px; /* ⚠⚠ **Consolas 를 빼지 마세요** — 앞의 둘은 macOS 전용이라 윈도우에서는 브라우저 기본 고정폭(타자기체)으로 떨어져 Pretendard 옆에서 혼자 튑니다 (2026-09-11). ⚠ 관리자 콘솔 index.css 의 --mono 와 **같은 값**입니다 — 한쪽만 고치지 마세요 */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* 타이포 스케일 — 11/12/13/14/15/16/20/24. 이 밖의 값·반픽셀 금지 */ --text-2xs: 11px; /* 마이크로 라벨 — 배지 안, 스와치 캡션 */ --text-xs: 12px; /* 라벨 · 메타 · 표 헤더 */ --text-sm: 13px; /* 조밀한 UI — 테이블 셀, 사이드바 */ --text-base: 14px; /* UI 기본 — 버튼, 입력, 본문 UI. 메뉴급 */ --text-md: 15px; /* Prose 본문 — 읽는 글 */ --text-lg: 16px; /* 작은 제목 */ --text-xl: 20px; /* 섹션 제목 */ --text-2xl: 24px; /* 페이지 제목 · 카드 숫자 */ --text-3xl: 30px; --text-4xl: 36px; /* 랜딩 대표 제목 */ --leading-tight: 1.3; /* 제목 */ --leading-ui: 1.5; /* UI 텍스트 */ --leading-normal: 1.62; /* 기본 */ --leading-prose: 1.8; /* 읽는 글 */ /* 읽는 글의 최대 줄 길이. ch 단위는 한글(전각)에서 좁게 잡혀 px로 고정합니다 */ --measure: 720px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; /* 떠 있는 요소의 그림자 — 1px 윤곽 + 근거리 + 원거리 3겹. 단층은 뿌옇게 보입니다 */ --shadow-overlay: 0 0 0 1px var(--border), 0 2px 4px rgba(0, 0, 0, .06), 0 12px 28px rgba(0, 0, 0, .10); /* 포커스 링 — 배경 2px + 브랜드 2px 이중 링. 모든 조작 요소가 같은 링을 씁니다 */ --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); /* ── DS 사이트 전용 — 앱 토큰(공용/스타일/토큰.css)에 없는 이름. 값은 그대로 둡니다(scripts-pull-tokens.mjs) ── */ --gray-a9: color-mix(in srgb, var(--gray-12) 36%, transparent); --gray-a10: color-mix(in srgb, var(--gray-12) 46%, transparent); --gray-a11: color-mix(in srgb, var(--gray-12) 62%, transparent); --gray-a12: color-mix(in srgb, var(--gray-12) 92%, transparent); --info: var(--primary); --chart-1: #1F7FF0; --chart-2: #16a3a3; --chart-3: #8b5cf6; --chart-4: #e8963c; --chart-5: #d6539b; --chart-6: #4f9e4f; --selected-foreground: var(--gray-12); --brand-text: var(--primary-text); --brand-hover: var(--primary-hover); --brand-active: var(--primary-active); --brand-subtle: var(--accent-muted); --on-brand: var(--primary-foreground); --brand: var(--primary); --bg: var(--background); --surface: var(--card); --border-strong: var(--input); --border-hover: var(--border-emphasized); --danger-on-inverse: var(--error-on-inverse); --danger-subtle: var(--error-subtle); --danger-border: var(--error-border); --danger-ring: var(--error-ring); --danger: var(--error); --sel-bg: var(--selected-fill); --sel-fg: var(--selected-foreground); --r-sm: var(--r-in); --r-md: var(--r-el); --r-xl: var(--r-ct); --r-lg: var(--r-el); } /* 다크 — 콘솔과 같은 `.dark` 를 기본으로, 구 속성 셀렉터도 함께 받습니다 */ [data-theme="dark"], .dark { /* ⚠ 이 덩이는 앱 토큰 파일에서 받아 온 것입니다 — 여기서 고치지 말고 앱 토큰.css 를 고친 뒤 npm run tokens:pull (2026-10-06) */ /* ── 콘솔 원본 ───────────────────────────────────────────── 다크 위계(2026-08-13 콘솔 확정) — 콘텐츠 면은 어두워야 글자 대비가 높아 잘 읽히고, 캔버스를 살짝 밝은 톤으로 올려 영역을 구분합니다. (라이트와 명암 관계가 반대) 2026-09-10 두 면을 **한 단씩 내렸습니다** — 캔버스 #232529→#181818, 콘텐츠 #17181b→#101013. 위계(콘텐츠가 더 어둡다)는 그대로 두고 전체를 어둡게만 한 것입니다. ⚠ --background도 같이 내립니다(#131316→#0c0c0f). 이 값은 **콘텐츠 면 아래 한 단**이라는 뜻이라, 안 내리면 --background를 쓰는 것들(권한 화면의 sticky 표 머리, 토큰 칩의 color-mix 바탕, 포커스 링 안쪽 2px)이 카드보다 **밝아져** 관계가 뒤집힙니다. */ --background:#0c0c0f; --foreground:#f4f4f5; --card:#101013; --primary:#4a97f5; --primary-foreground:#ffffff; /* 다크에서도 프라이머리 버튼 글자는 흰색 */ --muted:#222327; --muted-foreground:#a3a3ac; --border:#2c2d33; --input:#3a3b42; --ring:#4a97f5; --border-emphasized:#3a3b42; --success:#51cf66; --error:#ff6b6b; --warning:#ffd43b; --error-text:#ff8787; --warning-text:#ffd43b; --success-text:#51cf66; --accent-muted:#1a2c47; --user-bubble:#273e74; --user-bubble-fg:#ecf0f7; /* 사용자 말풍선 (2026-10-14 사용자 지정값) */ --overlay-hover:rgba(255,255,255,.06); --selected-fill:rgba(255,255,255,.09); --canvas:#181818; /* 캔버스 — 콘텐츠보다 살짝 밝은 톤으로 영역 구분 */ /* 다크는 자동 반전이 아니라 어두운 면(#101013)에 맞춰 따로 고른 단계입니다 */ --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500; --cat-5: #d55181; --cat-6: #008300; --cat-7: #2ea3bd; --cat-8: #9a72d6; /* 개인정보 분류 — 루트와 **같은 줄을 여기에도** 적습니다(위 머리글의 var() 함정) */ --pii-direct: var(--error); --pii-quasi: var(--cat-2); --pii-sensitive: var(--warning); --pii-direct-text: var(--error-text); --pii-quasi-text: color-mix(in srgb, var(--cat-2) 75%, var(--foreground)); --pii-sensitive-text: var(--warning-text); --kb: #8b5cf6; /* 프라이머리와 같은 요령으로 한 단 밝게 — 흰 글자 대비 4.2:1 */ color-scheme: dark; --scrollbar: rgba(255, 255, 255, .28); --scrollbar-hover: rgba(255, 255, 255, .45); /* ── 확장 ────────────────────────────────────────────────── */ --gray-1: #0e0e10; --gray-2: #171719; --gray-3: var(--muted); /* #222327 */ --gray-4: #27282d; --gray-5: var(--border); /* #2c2d33 */ --gray-6: var(--input); /* #3a3b42 */ --gray-7: var(--border-emphasized); /* #3a3b42 */ --gray-8: #55565e; --gray-9: #7b7c85; --gray-10: var(--muted-foreground); /* #a3a3ac */ --gray-11: #c8c8ce; --gray-12: var(--foreground); /* #f4f4f5 */ --gray-a2: rgba(255,255,255,.04); --gray-a3: rgba(255,255,255,.06); --gray-a5: rgba(255,255,255,.11); --gray-a6: rgba(255,255,255,.14); --gray-a7: rgba(255,255,255,.18); --gray-a1: rgba(255,255,255,.02); --gray-a4: rgba(255,255,255,.08); --gray-a8: rgba(255,255,255,.24); --border-subtle: rgba(255,255,255,.06); --primary-hover: #5da5f7; --primary-active: #7ab5f8; /* 글자·링크용 — 어두운 배경과 7.4:1 */ --primary-text: #6ba9f7; /* 뒤집힌 면이 밝으므로 어두운 상태색을 씁니다 */ --success-on-inverse: #2f9e44; --error-on-inverse: #d6362a; --favorite: #f5c518; --highlight-bg: #7a601f; --error-deep: #ff4d4d; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-up-sm: 0 -1px 2px rgba(0,0,0,.3); --shadow-md: 0 2px 8px rgba(0,0,0,.4); --shadow-lg: 0 6px 20px -6px rgba(0,0,0,.5); --shadow-xl: 0 12px 40px -12px rgba(0,0,0,.6); --shadow-drawer: -12px 0 28px -18px rgba(0,0,0,.6); --scrim: rgba(0,0,0,.4); /* 탭 · 필터 활성 — index.css 다크 블록에 있던 셋을 옮겨 왔습니다(값은 var 라 같습니다) */ --nav-active: var(--primary); --nav-active-fg: var(--primary); --nav-active-bg: color-mix(in srgb, var(--primary) 7%, transparent); --shadow-overlay: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .5); --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--primary); /* subtle/border/ring 공식은 --card·상태색을 참조하므로 다크에서도 그대로 유효 — 재정의 없음 */ /* ── DS 사이트 전용 — 앱 토큰(공용/스타일/토큰.css)에 없는 이름. 값은 그대로 둡니다(scripts-pull-tokens.mjs) ── */ --chart-1: #4593F5; --chart-2: #2ec4c4; --chart-3: #a78bfa; --chart-4: #f0a94e; --chart-5: #ec6cb0; --chart-6: #63b563; --brand-text: var(--primary-text); --brand-hover: var(--primary-hover); --brand-active: var(--primary-active); --brand-subtle: var(--accent-muted); --on-brand: var(--primary-foreground); --brand: var(--primary); --bg: var(--background); --surface: var(--card); --danger-on-inverse: var(--error-on-inverse); --danger: var(--error); } * { box-sizing: border-box; margin: 0; } body { font-family: var(--font); font-size: var(--text-base); color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; line-height: var(--leading-normal); font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; text-rendering: optimizeLegibility; transition: background .16s ease, color .16s ease; } /* 선택 영역도 브랜드로 */ ::selection { background: var(--accent-muted); color: var(--primary-active); } [data-theme="dark"] ::selection, .dark ::selection { background: var(--accent-muted); color: var(--primary); } /* ── 스크롤바 ────────────────────────── 브라우저가 그리는 UI(스크롤바·폼 컨트롤)에 현재 테마를 알려 줍니다. 이게 없으면 다크로 바꿔도 스크롤바만 밝은 채로 남습니다. */ /* 표준 속성 — Firefox 계열. 10px 트랙에 4px 막대라는 우리 규격을 px로 지정할 수는 없어 thin + 색 지정으로 근사합니다. */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; } /* Chromium·Safari — 의사요소로 규격(10px 트랙 · 4px 막대)을 정확히 그립니다. 주의: scrollbar-width나 scrollbar-color가 지정돼 있으면 Chromium은 ::-webkit-scrollbar를 통째로 무시합니다. 그래서 둘 다 auto로 되돌린 뒤 그립니다. @supports 블록이라 Firefox에는 적용되지 않고 위의 thin 설정이 그대로 남습니다. */ @supports selector(::-webkit-scrollbar) { * { scrollbar-width: auto; scrollbar-color: auto; } *::-webkit-scrollbar { width: 10px; height: 10px; } /* thumb의 3px는 보더가 아니라 안쪽 여백입니다. background-clip: content-box와 함께 써서 얇은 막대를 만듭니다. */ *::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--r-full); /* stylelint-disable-next-line declaration-property-value-disallowed-list */ border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* 가로·세로가 만나는 모서리 — 기본 회색 사각형을 지웁니다 */ *::-webkit-scrollbar-corner { background: transparent; } } /* 숫자가 세로로 흔들리지 않게 — 시각·용량·건수는 모두 tabular */ .mono, .tabular, td.mono, code, kbd, pre { font-variant-numeric: tabular-nums; } /* ── ds-button ── */ /* ⚠ 값은 **관리자 콘솔 ui.css 의 .btn 과 같아야 합니다** (2026-09-10 사용자 확정: 같은 기능의 버튼은 하나만 — 콘솔에 맞춘다). 그전엔 여기가 14px/500 · 테두리 없음이라 같은 플랫폼 안에서 버튼이 두 벌이었습니다. 고칠 일이 생기면 콘솔을 먼저 고치고 여기에 옮겨 적으세요. ⚠ 위계는 **채움 하나**입니다 — 채운 것(primary)과 중립(테두리) 둘뿐. secondary · ghost 는 옛 이름이라 남겨 두되 모양은 중립과 같습니다. 옅은 면을 깐 세컨더리는 콘솔이 2026-09-08에 걷었습니다 */ .btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-el); font-size: var(--text-sm); font-weight: var(--weight-normal); border: 1px solid var(--border); background: var(--card); color: var(--foreground); transition: background .16s ease, border-color .16s ease, color .16s ease; font-family: var(--font); } .btn:hover { background: var(--overlay-hover); } .btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* 콘솔은 --ring 이나 그 값이 --primary 입니다 */ .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { background: var(--primary); filter: brightness(.95); } .btn-danger { background: var(--error); border-color: var(--error); color: var(--primary-foreground); } .btn-danger:hover { background: var(--error); filter: brightness(.95); } .btn[disabled] { opacity: .45; cursor: default; } .btn[disabled]:hover { background: var(--card); filter: none; } .btn-primary[disabled]:hover { background: var(--primary); } .btn-danger[disabled]:hover { background: var(--error); } /* 크기 세 단계 — 32(기본) · 36 · 40. 기본이 가장 작은 32인 이유: 컨트롤은 대부분 툴바·필터 바·표 안에 줄지어 놓입니다. 큰 것을 기본으로 두면 그 줄들이 전부 두꺼워지고, 화면마다 size="sm"을 붙이게 됩니다. 자주 쓰는 값이 기본이어야 합니다. sm은 32의 다른 이름입니다 — 예전 코드가 깨지지 않게 남겨 둡니다. */ /* 로딩 — 글자를 지우지 않고 스피너를 앞에 붙입니다. 글자를 스피너로 바꿔치기하면 버튼 너비가 줄었다 늘었다 해서 옆 버튼이 밀립니다. 눌리지는 않지만 흐리게 만들지 않습니다 — 지금 일하고 있다는 뜻이지 못 쓴다는 뜻이 아닙니다. */ .btn.is-loading { cursor: default; } .btn.is-loading[disabled] { opacity: 1; } /* 크기는 둘 — 기본 32 · sm 28 (콘솔 .btn.sm 과 같음). md 는 걷었습니다(콘솔에 없음). lg 40 은 **로그인 갈래의 제출 버튼 전용**입니다 — 콘솔에는 그 화면이 없어 견줄 값이 없습니다 */ .btn-sm { height: 28px; padding: 0 10px; font-size: var(--text-xs); } .btn-lg { height: 40px; padding: 0 16px; font-size: var(--text-base); } /* ── ds-input ── */ /* 폭은 담는 그릇이 정하고, 편한 입력 폭(300px)에서 멈춥니다. width를 300px로 고정하면 팝오버·좁은 칸에서 그릇보다 넓게 잡혀 레이아웃이 깨집니다. */ .field { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 300px; } .field label { font-size: var(--text-sm); font-weight: var(--weight-medium); } /* ⚠ 값은 관리자 콘솔 ui.css 의 .field 와 같아야 합니다 (2026-09-10) — 테두리 --border, 글자 13px, 안쪽 10px, 포커스는 브랜드 22% 링 3px */ .input { all: unset; box-sizing: border-box; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-el); font-size: var(--text-sm); background: var(--card); color: var(--foreground); transition: border-color .16s ease, box-shadow .16s ease; font-family: var(--font); } .input::placeholder { color: var(--muted-foreground); } .input:hover { border-color: var(--border-emphasized); } .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); } .input.error { border-color: var(--error); } /* 크기 — 버튼과 같은 높이 셋: sm 28 · 기본 32 · lg 40(로그인 갈래 전용). md 는 기본의 옛 이름이라 규칙이 없습니다(부품이 클래스를 안 붙임) */ .input.sm { height: 28px; font-size: var(--text-xs); } .input.lg { height: 40px; padding: 0 12px; font-size: var(--text-base); } /* 읽기 전용 · 잠김 — 모양은 그대로, 커서와 옅기로만 (콘솔 ui.css 값, 2026-09-15) */ .input:disabled, .input[readonly] { cursor: default; opacity: .7; } .input:disabled:hover, .input[readonly]:hover { border-color: var(--border); } textarea.input { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; line-height: var(--leading-ui); } select.input { appearance: auto; padding-right: 6px; } /* all: unset 이 화살표까지 지웁니다 */ input[type="date"].input { font-variant-numeric: tabular-nums; } input[type="date"].input::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; } /* 에러 상태의 포커스 링은 브랜드가 아니라 위험색 — 상태가 링 색으로도 읽혀야 합니다 */ .input.error:focus { border-color: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 22%, transparent); } .hint { font-size: var(--text-xs); color: var(--muted-foreground); } .hint.error { color: var(--error-text); } /* ── ds-badge ────────────────────────────── 외형(appearance) × 톤(variant)의 두 축입니다 (Geist·Astryx 방식). · subtle 기본 — 연한 면, 테두리 없음. 표·목록에 여러 개 놓여도 조용합니다. · solid 강조 — 채운 면 + 반전 글자. 화면당 소수만. · outline 최소 — 면 없이 테두리만. 배경이 있는 카드 위. 테두리는 outline에서만 씁니다 — 상태마다 stroke가 붙으면 목록이 시끄러워집니다. */ .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; /* 각진 사각 (2026-08-18 확정) — 상태 라벨은 표·목록에 여러 개가 줄지어 놓이는 자리라, 둥근 알약보다 각진 사각이 열 간격에 맞아떨어지고 글자가 가운데로 몰려 보이지 않습니다. 알약 모양이 필요한 건 조작 가능한 Chip 쪽입니다. */ border-radius: var(--r-in); font-size: var(--text-xs); font-weight: var(--weight-semibold); /* 콘솔 .pill 600 */ box-sizing: border-box; border: 1px solid transparent; white-space: nowrap; background: var(--muted); color: var(--muted-foreground); } /* 톤 — subtle (기본) */ /* 톤의 면 농도는 콘솔 .pill 과 같습니다 — 성공 12 · 주의 14 · 위험 10% (2026-09-10 정렬) */ .badge.brand { background: var(--accent-muted); color: var(--primary); } .badge.success { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success-text); } .badge.warning { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning-text); } .badge.danger { background: color-mix(in srgb, var(--error) 10%, transparent); color: var(--error-text); } .badge.info { background: var(--accent-muted); color: var(--primary); } .badge.cat-2 { background: color-mix(in srgb, var(--cat-2) 12%, var(--background)); color: var(--cat-2); } .badge.cat-3 { background: color-mix(in srgb, var(--cat-3) 10%, var(--background)); color: var(--cat-3); } .badge.cat-5 { background: color-mix(in srgb, var(--cat-5) 10%, var(--background)); color: var(--cat-5); } /* 외형 — solid (채움) */ .badge.solid { background: var(--foreground); color: var(--background); } .badge.solid.brand { background: var(--primary); color: var(--primary-foreground); } /* ⚠ 채움에는 --success 가 아니라 --success-text(어두운 쪽)를 씁니다. 글자가 얹히기 때문입니다 — 면 색은 콘솔 원색이라 흰 글자와 3.45:1(경고는 2.50:1)로 AA에 한참 못 미칩니다. (2026-09-08) */ .badge.solid.success { background: var(--success-text); color: var(--background); } .badge.solid.warning { background: var(--warning-text); color: var(--background); } .badge.solid.danger { background: var(--error-text); color: var(--background); } .badge.solid.info { background: var(--primary); color: var(--primary-foreground); } .badge.solid.cat-2 { background: var(--cat-2); color: var(--background); } .badge.solid.cat-3 { background: var(--cat-3); color: var(--background); } .badge.solid.cat-5 { background: var(--cat-5); color: var(--background); } /* 외형 — outline (테두리만) */ .badge.outline { background: transparent; border-color: var(--input); color: var(--muted-foreground); } /* strong — 바탕이 --muted 인 곳(사이드바 · 캔버스 · 회색 줄)에서 쓰는 회색 배지. 기본형의 면(--muted)은 바탕과 같은 색이라 묻힙니다. 면을 한 단 짙은 --input 으로, 글자는 잉크색 (2026-11-06 Playground 에이전트 줄 꼬리표 .pg-agent__poc 에서 올림) */ .badge.strong { background: var(--input); color: var(--foreground); } /* count — 묶음 · 카드 · 그룹 머리 옆의 개수. 회색 채움(--muted-foreground) · 높이 18 · 11px/600 · 숫자 고정폭 · 모서리 3. solid(검정)은 너무 세고 기본형은 회색 줄 위에서 묻혀 그 사이 대비입니다 (2026-11-04 콘솔 지시 · 11-06 콘솔 ui.css 에서 올림) */ .badge.count { height: 18px; min-width: 18px; padding: 0 6px; justify-content: center; border-radius: 3px; border-color: transparent; font-size: var(--text-2xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; background: var(--muted-foreground); color: var(--background); } .badge.outline.brand { border-color: color-mix(in srgb, var(--primary-text) 32%, transparent); color: var(--primary); } .badge.outline.success { border-color: var(--success-border); color: var(--success-text); } .badge.outline.warning { border-color: var(--warning-border); color: var(--warning-text); } .badge.outline.danger { border-color: var(--error-border); color: var(--error-text); } .badge.outline.info { border-color: var(--info-border); color: var(--primary); } .badge.outline.cat-2 { border-color: color-mix(in srgb, var(--cat-2) 34%, transparent); color: var(--cat-2); } .badge.outline.cat-3 { border-color: color-mix(in srgb, var(--cat-3) 32%, transparent); color: var(--cat-3); } .badge.outline.cat-5 { border-color: color-mix(in srgb, var(--cat-5) 32%, transparent); color: var(--cat-5); } /* 크기 */ .badge.sm { height: 18px; padding: 0 6px; font-size: var(--text-2xs); border-radius: 3px; } /* 작은 배지는 모서리도 한 단 작게 */ /* ── ds-checkbox ────────────────────────── 상자는 CSS(정확한 px), 표식은 뷰박스 16 고정 SVG(항상 정중앙·같은 획). 선택하면 브랜드 면 + 반전 표식 (Geist 방식). */ .ds-check { --cb: 16px; --cb-gap: 9px; display: inline-flex; flex-direction: column; gap: 4px; } .ds-check--sm { --cb: 14px; --cb-gap: 8px; } .ds-check--lg { --cb: 20px; --cb-gap: 10px; } .ds-check__row { display: inline-flex; align-items: center; gap: var(--cb-gap); } /* ⚠ 테두리는 --border-emphasized 입니다 (2026-09-11 관리자 콘솔에 맞춤). --input 은 **입력칸** 테두리이고, 고르는 컨트롤은 그보다 한 단 진한 --border-emphasized 입니다. 콘솔 index.css 의 input[type=checkbox] · input[type=radio] 가 그 값입니다 — 이용자 화면에서만 체크박스가 옅어 두 앱이 달라 보였습니다. ⛔ --input 으로 되돌리지 마세요. 아래 .check(CSS 쌍둥이) · .ds-radio__mark 와 **셋이 한 값**입니다 */ .ds-check__box { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--cb); height: var(--cb); border-radius: var(--r-in); border: 1px solid var(--border-emphasized); background: var(--card); transition: background .12s ease, border-color .12s ease; } .ds-check__box input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .ds-check__box.is-on { background: var(--primary); border-color: var(--primary); } /* ⚠ hover 는 **기본 테두리보다 진해야** 합니다 — 2026-09-11 에 기본을 --input 에서 --border-emphasized 로 올리면서 hover 가 기본과 **같은 값**이 되어, 마우스를 올려도 아무 일도 안 일어났습니다. 콘솔 index.css 의 :hover:not(:checked) 와 같은 --muted-foreground 로 맞춥니다. ⛔ --border-emphasized 로 되돌리지 마세요: 기본값과 같아 hover 가 죽습니다 */ .ds-check__box:hover:not(.is-on) { border-color: var(--muted-foreground); } .ds-check__box:has(input:focus-visible) { box-shadow: var(--focus-ring); } .ds-check__mark { width: 100%; height: 100%; pointer-events: none; fill: none; stroke: var(--primary-foreground); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ds-check__label { font-size: var(--text-base); color: var(--foreground); cursor: pointer; } .ds-check--sm .ds-check__label { font-size: var(--text-sm); } .ds-check__hint { margin-left: calc(var(--cb) + var(--cb-gap)); } /* 비활성 — 면을 채우지 않고 '연한 상자 + 회색 잉크'로 낮춥니다 (라디오와 같은 언어). 면을 중간 회색으로 채우면 두 가지가 망가집니다: ① 테두리가 사라져 '빈 상자'가 '채워진 상자'로 읽히고(상태가 뒤집힘), ② 회색 면 위의 회색 표식이 2.2:1까지 떨어져 탁한 덩어리로 뭉갭니다. 여기서는 상자 모양을 그대로 두고 채도만 죽여, 표식 대비를 3:1로 회복합니다. */ .ds-check.is-disabled { pointer-events: none; } .ds-check.is-disabled .ds-check__box, .ds-check.is-disabled .ds-check__box.is-on { background: var(--muted); border-color: var(--gray-6); } .ds-check.is-disabled .ds-check__mark { stroke: var(--gray-10); } .ds-check.is-disabled .ds-check__label { color: var(--gray-9); } /* ── ds-radio ────────────────────────────── 원과 안쪽 점을 모두 CSS로 그립니다. 치수는 전부 정수(px)입니다. 소수(1.5px 테두리·1.5px 여백)를 쓰면 배율 1배 화면에서 브라우저가 반 픽셀을 그릴 수 없어 변마다 다르게 반올림합니다 — 링 두께가 들쭉날쭉해지고 점이 중앙에서 밀려 "깨져" 보입니다. 상자·점을 모두 짝수로 잡아 여백까지 정수로 떨어지게 했습니다. 점 크기는 상자의 50% — Material Design 3(20/10) · Ant Design(16/8) · Bootstrap과 같은 값입니다. 전에는 고정 여백 방식이라 상자가 커질수록 비율이 커졌습니다(50% → 56% → 65%). lg에서 특히 커 보이던 원인입니다. 크기 상자 링 점 비율 여백 sm 14 2 6 43% 2px default 16 2 8 50% 2px lg 20 2 10 50% 3px */ /* 텍스트 입력용 .field(고정 300px)를 쓰지 않습니다 — 선택지 폭은 내용이 정합니다 */ .ds-radio { --rb: 16px; --rb-dot: 8px; --rb-gap: 9px; display: inline-flex; flex-direction: column; gap: 8px; } .ds-radio--sm { --rb: 14px; --rb-dot: 6px; --rb-gap: 8px; } .ds-radio--lg { --rb: 20px; --rb-dot: 10px; --rb-gap: 10px; } .ds-radio__group-label { font-size: var(--text-sm); font-weight: var(--weight-medium); } .ds-radio__group { display: flex; flex-direction: column; gap: 10px; } .ds-radio__group.is-inline { flex-direction: row; flex-wrap: wrap; gap: 18px; } .ds-radio__row { display: inline-flex; align-items: flex-start; gap: var(--rb-gap); cursor: pointer; } /* 라디오는 체크박스와 표현이 다릅니다 — 면을 채우지 않고 "링 + 안쪽 점"입니다. 체크박스는 켜짐/꺼짐이라 면을 채우고, 라디오는 여럿 중 하나를 고르는 것이라 점의 위치로 어느 것인지 읽습니다. 표준 라디오의 생김새이기도 합니다. */ .ds-radio__mark { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--rb); height: var(--rb); border-radius: 50%; /* ⚠ 체크박스와 **같은 테두리**입니다 — 위 .ds-check__box 머리말 참고 */ border: 1px solid var(--border-emphasized); background: var(--card); margin-top: 1px; /* 첫 줄 글자의 중앙에 맞춤 */ transition: border-color .12s ease; } .ds-radio__mark input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } /* ⚠ 체크박스와 **같은 이유·같은 값**입니다 — 위 .ds-check__box:hover 머리말 참고 */ .ds-radio__row:hover .ds-radio__mark:not(.is-on) { border-color: var(--muted-foreground); } /* 선택 — 링을 브랜드색으로 굵히고 안쪽을 점으로 채웁니다. 점 크기는 비율이 아니라 "링 안쪽에서 1.5px 띄운 나머지 전부"입니다. 비율(%)로 잡으면 작은 크기에서 점이 사라지듯 작아집니다. */ /* stylelint-disable-next-line declaration-property-value-disallowed-list -- 라디오 선택 링은 2px입니다. 1px이면 안쪽 점과 링이 붙어 한 덩어리로 보입니다 */ .ds-radio__mark.is-on { border-width: 2px; border-color: var(--primary); } .ds-radio__mark.is-on::after { content: ''; width: var(--rb-dot); height: var(--rb-dot); border-radius: 50%; background: var(--primary); } .ds-radio__mark:has(input:focus-visible) { box-shadow: var(--focus-ring); } .ds-radio__text { display: flex; flex-direction: column; gap: 1px; font-size: var(--text-base); color: var(--foreground); } .ds-radio--sm .ds-radio__text { font-size: var(--text-sm); } .ds-radio__hint { font-size: var(--text-xs); color: var(--muted-foreground); } .ds-radio__row.is-disabled { pointer-events: none; } .ds-radio__row.is-disabled .ds-radio__mark { background: var(--muted); border-color: var(--gray-6); } .ds-radio__row.is-disabled .ds-radio__mark.is-on { border-color: var(--gray-8); } .ds-radio__row.is-disabled .ds-radio__mark.is-on::after { background: var(--gray-8); } .ds-radio__row.is-disabled .ds-radio__text { color: var(--gray-9); } /* ── ds-card ── */ .card { border: 1px solid var(--border); border-radius: var(--r-ct); padding: 22px; background: var(--card); } .card h3 { font-size: var(--text-base); font-weight: var(--weight-semibold); } .card p { color: var(--muted-foreground); font-size: var(--text-sm); margin-top: 4px; } .card .num { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin-top: 12px; } /* ⚠ 증감은 **방향이 아니라 뜻**으로 색을 냅니다 — 관리자 콘솔 ui.css 의 .delta 그대로 (2026-09-15 사용자 지시). 나쁜 지표가 늘면 빨강(--bad), 줄면 녹색(--good), 변화 없으면 회색(--flat). ⛔ 늘 초록(color: --success-text)으로 되돌리지 마세요: "유출 시도 +12건"이 초록으로 읽혔습니다. ⚠ **기본은 색을 정하지 않습니다**(물려받습니다) — 콘솔 .delta 가 그렇습니다. 바깥 .delta 는 숫자와 비교 기준("· 직전 30일 대비")을 함께 담는 껍데기라, 여기에 회색을 깔면 숫자까지 같이 눕습니다. 색은 쓰는 쪽이 --good/--bad/--flat 로 고르고, 기준 라벨은 콘솔 .delta-l 입니다 */ .card .delta { display: block; font-size: var(--text-xs); margin-top: 4px; font-variant-numeric: tabular-nums; } .card .delta--good { color: var(--success-text); } .card .delta--bad { color: var(--error-text); } .card .delta--flat { color: var(--muted-foreground); } .card .delta-l { color: var(--muted-foreground); } /* 비교 기준("· 어제 대비") — 콘솔 .delta-l */ /* ── ds-chat ── 글로벌 표준(Claude·ChatGPT·Gemini): 아바타·이름표 없음. 사용자 = 오른쪽 연회색 풍선, 에이전트 = 풍선 없는 본문. 정렬이 화자를 구분합니다. */ .chat { border: 1px solid var(--border); border-radius: var(--r-ct); overflow: hidden; background: var(--card); } .msg { display: flex; padding: 10px 24px; } .chat .msg:first-child { padding-top: 22px; } .chat .msg:last-of-type { padding-bottom: 22px; } .msg-user { justify-content: flex-end; } /* 질문 풍선 = 이용자 화면 .cog-user-bubble (2026-11-06 제품에 맞춤) — 옅은 브랜드색 · 15px · 10/16 · 최대 80%. ⛔ 회색으로 되돌리지 마세요(2026-09-22) */ .msg-bubble { background: var(--user-bubble); color: var(--user-bubble-fg, var(--foreground)); border-radius: var(--r-ct); padding: 10px 16px; max-width: 80%; font-size: var(--text-md); line-height: 1.65; white-space: pre-wrap; word-break: break-word; } .msg-agent .msg-body { flex: 1; min-width: 0; max-width: 100%; } .msg-text { font-size: var(--text-lg); color: var(--foreground); line-height: 1.7; } /* 답 16 — 이용자 화면 .cog-answer-bubble */ .toolcall { margin: 10px 0; border: 1px solid var(--border); border-radius: var(--r-el); padding: 9px 13px; font-size: var(--text-xs); color: var(--muted-foreground); display: flex; align-items: center; gap: 8px; background: var(--gray-2); font-family: var(--mono); } /* CSS로 그리는 스피너 — Standalone 컴포넌트(ToolCallStep 등)는 Vuetify를 못 쓰므로 DsSpinner(VProgressCircular) 대신 이걸 씁니다. 두 벌이 되는 건 어쩔 수 없지만 보이는 규격은 같게 맞춥니다: 16px · 선 2px · 브랜드색. 1.5px 같은 소수는 배율 1배 화면에서 변마다 다르게 반올림돼 링이 일그러집니다. */ .spinner { width: 16px; height: 16px; /* stylelint-disable-next-line declaration-property-value-disallowed-list -- 스피너 선은 2px입니다. 1px은 16px 원에서 돌 때 끊겨 보입니다 (바로 위 주석 참고) */ border: 2px solid var(--gray-6); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; flex-shrink: 0; } /* 색 있는 면 위(primary·danger 버튼) — 흰 호에 반투명 흰 밑줄. 브랜드색 스피너를 브랜드색 버튼에 얹으면 색이 같아 아예 안 보입니다. */ .spinner.on-brand { border-color: color-mix(in srgb, var(--primary-foreground) 35%, transparent); border-top-color: var(--primary-foreground); } /* 회색 면 위(secondary·ghost 버튼) — 글자색을 따라갑니다 */ .spinner.current { border-color: color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; } /* 글자색을 따라가는 스피너 — 색 있는 버튼(primary·danger) 안에서 */ .spinner--current { border-color: color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; } @keyframes spin { to { transform: rotate(360deg); } } .check { color: var(--success-text); font-family: var(--font); } /* 이용자 화면 답변의 [n] 칩(.cog-citechip)과 한 벌 (2026-11-06 제품에 맞춤) — 회색 면 · 모서리 4 · 11/600 */ .cite { display: inline-flex; align-items: center; padding: 0 5px; border: 0; border-radius: var(--r-in); background: var(--muted); color: var(--muted-foreground); font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: 1.55; margin: 0 0 0 2px; vertical-align: 1px; cursor: pointer; } .cite:hover { color: var(--foreground); } .cursor { display: inline-block; width: 7px; height: 15px; background: var(--foreground); vertical-align: -2px; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } /* ds-stream — 흘려 보이는 답(DsStreamingText text · 2026-11-11). 새로 나온 글자만 페이드 — 글자 꼴 · 크기는 쓰는 쪽(.msg-text · .cog-answer-bubble) 몫. 인라인 글자에 거는 것이라 transform 은 안 먹습니다 — opacity · filter 만. */ .ds-stream__new { animation: ds-stream-fade 400ms cubic-bezier(.2, 0, 0, 1) both; } .ds-stream--blur .ds-stream__new { animation-name: ds-stream-blur; } @keyframes ds-stream-fade { from { opacity: 0; } } @keyframes ds-stream-blur { from { opacity: 0; filter: blur(4px); } } @media (prefers-reduced-motion: reduce) { .ds-stream__new { animation: none; } } .chat-input { border-top: 1px solid var(--border-subtle); padding: 12px 16px; display: flex; gap: 10px; align-items: center; } .chat-input .input { flex: 1; border: none; height: 32px; padding: 0 4px; } .chat-input .input:focus { box-shadow: none; } /* ── ds-table ── */ /* ⚠ 2026-09-15 부터 **.table-wrap 아래에서만** 겁니다. 맨 th · td 로 두면 이 파일을 싣는 앱의 모든 표 (관리자 콘솔 85개 — 줄 52px · 머리 13px/600)에 40px · 12px 규격이 얹혀 마지막 줄선이 사라지고 .mono 칸이 12px 회색이 됐습니다. DS 표를 쓰려면
로 감싸세요 */ .table-wrap { border: 1px solid var(--border); border-radius: var(--r-ct); overflow: hidden; background: var(--card); } .table-wrap table { width: 100%; border-collapse: collapse; } /* 헤더·행 모두 배경 없이 — 보더와 글자 색만으로 구분합니다 */ /* ⚠ 규격은 **관리자 콘솔 ui.css 의 표 그대로**입니다 (2026-09-15 사용자 지시 "콘솔쪽이 보통 맞아"): 머리 40px · 13px/600 · 보조색, 줄 52px · 14px, 좌우 끝 칸 20px. 앞서 DS 가 쓰던 머리 12px/500 · 줄 40px 은 콘솔 85개 표와 한 줄에 12px 씩 어긋났습니다. ⚠ 머리행 고정(sticky)은 넣지 않습니다 — 스크롤을 누가 맡는지가 앱마다 달라서, 콘솔은 .tablewrap 이 맡습니다. 여기 .table-wrap 은 테두리 · 라운드로 **감싸는** 틀입니다. ⛔ .mono 를 monospace 12px 로 되돌리지 마세요 — 콘솔 .mono 는 글꼴이 아니라 **자릿수 맞춤**입니다 */ .table-wrap th { text-align: left; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--muted-foreground); padding: 0 12px; height: 40px; white-space: nowrap; border-bottom: 1px solid var(--border); } .table-wrap td { padding: 0 12px; height: 52px; font-size: var(--text-base); border-bottom: 1px solid var(--border); } .table-wrap th:first-child, .table-wrap td:first-child { padding-left: 20px; } .table-wrap th:last-child, .table-wrap td:last-child { padding-right: 20px; } .table-wrap tr:last-child td { border-bottom: none; } .table-wrap td.mono { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; letter-spacing: .01em; } /* ── ds-empty ── */ /* ⚠ 이름이 .ds-empty 입니다 (2026-09-15 개명) — 관리자 콘솔의 .empty(display:none → .show)와 겹쳐서. DsEmptyState.vue 도 같이 */ /* ⚠ **점선 테두리가 없습니다** — 관리자 콘솔 ui.css 의 .empty 그대로 (2026-09-15 사용자 지시). 빈 상태는 이미 표·패널 안에 놓이므로 점선 상자를 한 겹 더 두르면 선이 겹칩니다 (사용자 지시 "선은 한 겹만"). 여백 56/20 으로 비어 있음을 말합니다. ⛔ border: dashed 로 되돌리지 마세요 */ .ds-empty { padding: 56px 20px; text-align: center; } .ds-empty h3 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); } .ds-empty p { margin: 6px 0 14px; font-size: var(--text-sm); color: var(--muted-foreground); } /* ── theme toggle ── */ .theme-toggle { all: unset; box-sizing: border-box; position: fixed; top: 16px; right: 20px; z-index: 50; cursor: pointer; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--input); border-radius: var(--r-full); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted-foreground); background: var(--card); font-family: var(--font); } .theme-toggle:hover { background: var(--muted); color: var(--foreground); } /* ── ds-avatar ── */ /* ⚠ 낱글자와 면은 관리자 콘솔 ui.css 의 .avatar 와 같습니다 (2026-09-11 맞춤): 글자는 **본문색 · 굵기 400**(보조색 600 이 아닙니다 — 이름 첫 자는 읽으라고 있는 것이지 곁말이 아닙니다), 면은 --muted 에 --muted-foreground 를 4% 섞어 한 단 눕히고, 테두리는 --muted-foreground 28% 입니다. ⚠ **크기는 콘솔 눈금입니다 — 기본 28 · lg 40** (2026-09-15 사용자 지시 "콘솔쪽이 보통 맞아"). 앞서 DS 가 쓰던 32 · 44 는 콘솔 표 줄(52px)에서 아바타가 줄을 꽉 채워 답답했습니다. .sm(24) 만 DS 쪽 여분입니다 — 콘솔에 짝이 없으니 콘솔 화면에서는 쓰지 마세요. ⛔ 32 · 44 로 되돌리지 마세요 */ .ds-avatar { width: 28px; height: 28px; border-radius: var(--r-full); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-2xs); font-weight: var(--weight-normal); color: var(--foreground); background: color-mix(in srgb, var(--muted-foreground) 4%, var(--muted)); border: 1px solid color-mix(in srgb, var(--muted-foreground) 28%, transparent); } .ds-avatar.sm { width: 24px; height: 24px; font-size: var(--text-2xs); } .ds-avatar.lg { width: 40px; height: 40px; font-size: var(--text-base); } .ds-avatar.brand { background: var(--accent-muted); color: var(--primary); border-color: transparent; } .avatar-group { display: inline-flex; } /* stylelint-disable-next-line declaration-property-value-disallowed-list -- 겹친 아바타를 분리하는 "구멍"입니다. 보더가 아니라 배경색으로 파낸 것이라 1px로는 겹침이 읽히지 않습니다. 2px가 허용되는 곳은 여기와 라디오 선택 링 · 타임라인 링뿐입니다. */ .avatar-group .ds-avatar { margin-left: -8px; border: 2px solid var(--background); } .avatar-group .ds-avatar:first-child { margin-left: 0; } /* ── ds-chip (제거 가능한 선택 항목) ── */ /* ⚠ 값은 **관리자 콘솔 ui.css 의 .chip 그대로**입니다 (2026-09-15 사용자 지시 "콘솔쪽이 보통 맞아"). 앞서 DS 가 혼자 쓰던 28px · 면 --card · 500 은 콘솔 표 칸에서 칩이 한 단 굵고 커 보였습니다. ⛔ 28 · --card · 500 으로 되돌리지 마세요. 면을 깐 칩이 필요하면 .chip.brand 를 쓰세요 */ .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px 0 9px; border-radius: var(--r-full); font-size: var(--text-xs); font-weight: var(--weight-normal); border: 1px solid var(--border); color: var(--foreground); background: transparent; } .chip .x { all: unset; box-sizing: border-box; cursor: pointer; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); color: var(--muted-foreground); } .chip .x:hover { background: var(--gray-4); color: var(--foreground); } /* brand = 걸린 조건 — 면 없이 브랜드 테두리 · 글자 (2026-11-06 제품에 맞춤)(콘솔 · 이용자 화면 조건 줄 "bg 없고 Stroke만"). 28 · 모서리 6 */ .chip.brand { height: 28px; padding: 0 7px 0 10px; gap: 6px; border-radius: var(--r-el); font-size: var(--text-sm); background: transparent; border-color: var(--nav-active); color: var(--nav-active-fg); } .chip.brand .x { width: 18px; height: 18px; border-radius: var(--r-el); color: var(--primary-text); } /* ── ds-divider ── */ .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; } .divider-label { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: var(--text-xs); color: var(--muted-foreground); } .divider-label::before, .divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--border); } /* ── ds-skeleton ── */ .skeleton { border-radius: var(--r-el); background: linear-gradient(90deg, var(--muted) 25%, var(--gray-4) 50%, var(--muted) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; } @keyframes shimmer { to { background-position: -200% 0; } } .skeleton.text { height: 13px; } .skeleton.circle { border-radius: 50%; } /* ── ds-toast ────────────────────────────── 면을 뒤집습니다 — 라이트에서는 어두운 면, 다크에서는 밝은 면. 화면 위에 잠깐 떠 있다 사라지는 알림이라, 본문과 같은 면이면 눈에 안 들어옵니다. 툴팁도 같은 규칙을 씁니다(반전 면). 테두리는 두지 않습니다 — --shadow-overlay의 첫 겹(0 0 0 1px)이 이미 윤곽이라 둘 다 쓰면 1px 선이 두 겹으로 겹칩니다. */ /* ⚠ **알약입니다** — 관리자 콘솔 ui.css 의 .toast 그대로 (2026-09-15 사용자 지시 "콘솔쪽이 보통 맞아"). 앞서 DS 가 쓰던 각진 r-el · 13px · min-width 280 은 콘솔의 짧은 알림("저장했습니다")에서 글자보다 상자가 한참 넓어 빈 칸이 남았습니다. 자리(가운데 아래 고정)는 쓰는 쪽 몫입니다. ⛔ 각진 모서리로 되돌리지 마세요 */ .toast { display: inline-flex; align-items: center; gap: 12px; border: 0; border-radius: var(--r-full); background: var(--foreground); color: var(--background); padding: 10px 20px; font-size: var(--text-base); font-weight: var(--weight-medium); box-shadow: var(--shadow-lg); } /* 앞머리는 점 대신 상태 아이콘 — 색+형태로 성공/실패가 동시에 읽힘 (Geist·Astryx 참고). 반전 면 위라 상태색도 반전 값을 씁니다. */ .toast .t-icon { display: inline-flex; flex-shrink: 0; align-items: center; } .toast.success .t-icon { color: var(--success-on-inverse); } .toast.danger .t-icon { color: var(--error-on-inverse); } .toast .t-body { flex: 1; } /* 알약 안의 글자 버튼(실행 취소 등) — 콘솔 showToast 의 .toast-act 와 한 벌(2026-11-06 제품에 맞춤): 알약 글자색을 물려받고 밑줄로만 누를 것임을 말합니다 — 면 · 테두리 없음 */ .toast .t-action, .toast .toast-act { all: unset; box-sizing: border-box; cursor: pointer; flex-shrink: 0; margin-left: 2px; font: inherit; font-weight: var(--weight-semibold); color: inherit; text-decoration: underline; text-underline-offset: 3px; } .toast .t-action:focus-visible, .toast .toast-act:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--foreground), 0 0 0 4px var(--background); border-radius: var(--r-in); } /* ── ds-thinking (에이전트 추론 중 — Soft Rise v1.0) ── 도트 3개가 -4px 파동(사이클의 64%는 정지), 라벨은 브랜드 shimmer. 스펙: DocuRAG "AI 응답 생성 인디케이터 설계_최종본" */ .thinking { display: inline-flex; align-items: center; gap: 11px; font-size: var(--text-sm); color: var(--muted-foreground); } .thinking .dots { display: inline-flex; gap: 5px; align-items: center; } .thinking .dots i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; animation: thinkwave 1.6s cubic-bezier(.45, 0, .55, 1) infinite; } .thinking .dots i:nth-child(1) { background: color-mix(in srgb, var(--primary) 45%, var(--background)); } .thinking .dots i:nth-child(2) { background: color-mix(in srgb, var(--primary) 72%, var(--background)); animation-delay: .18s; } .thinking .dots i:nth-child(3) { background: var(--primary); animation-delay: .36s; } @keyframes thinkwave { 0% { transform: translateY(0); opacity: .4; } 18% { transform: translateY(-4px); opacity: 1; } 36%, 100% { transform: translateY(0); opacity: .4; } } .thinking .t-label { font-weight: var(--weight-medium); background: linear-gradient(90deg, var(--gray-10) 20%, var(--primary-text) 50%, var(--gray-10) 80%); background-size: 200% 100%; background-clip: text; /* stylelint-disable-next-line property-no-vendor-prefix -- Safari는 아직 접두사 없는 background-clip: text를 글자에 못 먹입니다. 빼면 사파리에서 글자가 통째로 사라집니다(-webkit-text-fill-color: transparent 때문) */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shimmer 3s linear infinite, thinkfade .45s ease-out; } @keyframes thinkfade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* compact — dot 4px / text 12px, shimmer 생략 */ .thinking--compact { gap: 8px; font-size: var(--text-xs); } .thinking--compact .dots { gap: 4px; } .thinking--compact .dots i { width: 4px; height: 4px; } /* inline — 텍스트 뒤에 4px 도트, shimmer 생략 */ .thinking--inline { gap: 7px; } .thinking--inline .dots { gap: 3px; } .thinking--inline .dots i { width: 4px; height: 4px; } .thinking--compact .t-label, .thinking--inline .t-label { background: none; -webkit-text-fill-color: currentColor; color: inherit; font-weight: var(--weight-normal); animation: thinkfade .45s ease-out; } @media (prefers-reduced-motion: reduce) { .thinking .dots i { animation: none; opacity: .7; } .thinking .t-label { background: none; -webkit-text-fill-color: currentColor; color: inherit; animation: none; } } /* ── 메뉴 면 · 항목 — DsMenu(VMenu) · 콘솔 계정 메뉴 · 화면 안 더보기 메뉴가 함께 씀 ── 2026-11-06 ds-vuetify.css 에서 옮김 — Vuetify 가 없는 관리자 콘솔도 이 한 벌을 씁니다(콘솔 ui.css 사본을 걷음). 면 값은 콘솔 드롭다운 .pop 과 같습니다(모서리 8 · 1px 테두리 + --shadow-lg · 최소 폭 150 · hover --overlay-hover) — 값이 갈리면 콘솔이 정답. 저수준 패널 + 항목 어휘. 항목은 소비자가 .ds-menu-item 으로 조립합니다. 구조:
[아이콘 svg] 라벨 [단축키·메타]
변형: --selected(현재값·체크) · --error(파괴적) · --disabled(비활성) 구성: .ds-menu-label(섹션 머리) · .ds-menu-sep(구분선) ⚠
와