/* ══════════════════════════════════════════════════════════ Design Tokens — iBots v3.1 시맨틱 토큰 + 확장 컬러 스케일 + 레거시 호환 별칭. ══════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* ══ Core Tokens ══════════════════════════════════════ */ /* ── Background (5) ── */ --bg: #09090b; /* 앱 배경 */ --bg-raised: #111113; --bg-overlay: #1a1a1e; /* 모달/드로어 배경 */ --bg-card: #111113; --bg-secondary: #0f0f11; --bg-base: var(--bg); /* 별칭: 앱 배경 */ --bg-primary: var(--bg); /* 별칭: 앱 배경 */ /* ── Surface (3 core + 확장) ── */ --surface: rgba(255,255,255, 0.04); --surface-2: rgba(255,255,255, 0.07); /* surface↔hover 중간 */ --surface-hover: rgba(255,255,255, 0.10); --surface-active: rgba(255,255,255, 0.14); --surface-black: rgba(0,0,0, 0.40); /* surface-w: white at N% opacity */ --surface-w2: rgba(255,255,255, 0.02); --surface-w3: rgba(255,255,255, 0.03); --surface-w5: rgba(255,255,255, 0.05); --surface-w6: rgba(255,255,255, 0.06); --surface-w8: rgba(255,255,255, 0.08); --surface-w10: rgba(255,255,255, 0.10); --surface-w12: rgba(255,255,255, 0.12); /* accent-dim(0.12) neutral 대체용 */ --surface-w15: rgba(255,255,255, 0.15); --surface-w20: rgba(255,255,255, 0.20); /* ── Text (5) ── */ --text: #ededef; /* 기본 텍스트 */ --text-sub: #9898a0; /* 보조 텍스트 */ --text-faint: #505058; /* 비활성/힌트 — WCAG AA 4.67:1 (#09090b 기준). ⚠️ --bg-raised(~4.4:1)/--bg-card(~4.2:1) 위에서는 AA 미충족 → 카드 내부는 --text-sub 사용 권장 */ --text-secondary: var(--text-sub); /* ⚠️ DEPRECATED: --text-sub 사용 권장 */ --text-muted: #505058; /* ⚠️ DEPRECATED: --text-faint 사용 권장. 레거시 별칭 = --text-faint. 동일 WCAG 제한 적용 */ /* ── Line / Border (3) ── */ --line: rgba(255,255,255, 0.04); --line-bold: rgba(255,255,255, 0.08); --line-strong: rgba(255,255,255, 0.12); --line-glass: rgba(255,255,255, 0.35); /* 글래스 블러 표면 위 구분선 */ --border: rgba(255,255,255, 0.08); --border-subtle: rgba(255,255,255, 0.06); /* 미세 구분선 */ /* ── Accent — 브랜드 Teal (6) ── ⚠️ 사용 제한: accent 토큰은 인터랙티브 요소에만 사용. ✅ 허용: 버튼, 링크, 배지, 토글, 상태 dot, 포커스 링, 호버 글로우 ❌ 금지: 컨테이너/카드/섹션/패널 배경색 → --surface-w* 또는 --bg-* 사용 컨테이너 배경에 accent 사용 시 저대비 + 클릭 가능 영역 혼동 발생 */ --accent: #14b8a6; --accent-dim: rgba(45,212,191, 0.12); /* ⚠️ 배지/버튼/상태 전용. 컨테이너 배경 금지 → --surface-w12 대체 */ --accent-on: #000000; --accent-deep: #0d9488; --accent-glow: rgba(45,212,191, 0.25); /* 포커스 링/글로우 전용 */ --accent-soft: var(--accent-dim); /* ⚠️ DEPRECATED: --accent-dim 사용 권장. 동일값 rgba(45,212,191, 0.12) 레거시 별칭 */ --accent-bg: rgba(45,212,191, 0.10); /* ⚠️ 배지/버튼 배경 전용. 컨테이너 배경 금지 → --surface-w10 대체 */ --accent-transparent: rgba(45,212,191, 0); /* 0-opacity accent — 키프레임 보간 엔드포인트 전용 */ /* ── Status (5) — 단색 ── */ --green: #22c55e; --amber: #f59e0b; --red: #ef4444; --teal: #14b8a6; /* 브랜드 청록 (구 --blue → --teal 리네이밍) */ --purple: #8b5cf6; --blue: #3b82f6; /* 배포/정보 계열 */ --blue-light: #60a5fa; /* 배포/정보 밝은 계열 */ --purple-light: #a78bfa; /* 보라 밝은 계열 */ --gray: #6b7280; /* 중립 회색 */ --gray-light: #9ca3af; /* 밝은 회색 */ --warning: #f59e0b; /* 경고 시맨틱 (= --amber) */ /* ── Status Background (6) — 단일 opacity (0.10) ── */ --green-bg: rgba(34,197,94, 0.10); --amber-bg: rgba(245,158,11, 0.10); --red-bg: rgba(239,68,68, 0.10); --teal-bg: rgba(45,212,191, 0.10); /* 브랜드 청록 */ --purple-bg: rgba(139,92,246, 0.10); --blue-bg: rgba(59,130,246, 0.10); /* 배포/정보 배경 */ --blue-bg-lg: rgba(59,130,246, 0.15); /* 배포/정보 배경 (강) */ --purple-bg-lg: rgba(139,92,246, 0.15); /* 보라 배경 (강) */ --gray-bg: rgba(107,114,128, 0.10); /* 중립 회색 배경 */ --gray-bg-lg: rgba(107,114,128, 0.15); /* 중립 회색 배경 (강) */ --warning-dim: rgba(245,158,11, 0.12); /* 경고 반투명 배경 */ /* ══ Typography ═════════════════════════════════════ */ --font: 'Pretendard Variable', 'Pretendard', sans-serif; --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace; /* text-* 사이즈 — 16단계 (확장 5단계 + 디스플레이 4단계 포함) Fluid Typography: sm~2xl은 clamp()로 375px~1440px 연속 보간. 3xs~caption, 3xl~9xl은 고정값 유지. */ --text-3xs: 9px; /* 마이크로 뱃지, 큐 메타 등 극소형 전용 (절대 최소) */ --text-xs: 10px; /* 극소 — 뱃지 카운트, 타임스탬프 등 제한적 사용 */ --text-sm: 12px; /* 소형 — 캡션, 보조 텍스트 */ --text-base: clamp(14px, 0.19vw + 13.3px, 16px); /* 기본 — 본문, 입력 필드 */ --text-reading: clamp(14px, 0.19vw + 13.3px, 16px); /* 375→14px, 1440→16px */ --text-lg: clamp(16px, 0.38vw + 14.6px, 20px); /* 375→16px, 1440→20px */ --text-xl: clamp(20px, 0.38vw + 18.6px, 24px); /* 375→20px, 1440→24px */ --text-2xl: clamp(24px, 0.38vw + 22.6px, 28px); /* 375→24px, 1440→28px */ --text-3xl: clamp(24px, 0.75vw + 21.2px, 32px); /* 375→24px, 1440→32px — 게이지 점수, 빈 상태 */ --text-4xl: clamp(22px, 0.56vw + 19.9px, 28px); /* 375→22px, 1440→28px — 카드 아이콘, 점수 */ --text-5xl: clamp(26px, 0.94vw + 22.5px, 36px); /* 375→26px, 1440→36px — 대형 아이콘, 통계 */ --text-8xl: clamp(32px, 1.50vw + 26.4px, 48px); /* 375→32px, 1440→48px — 드롭존, 빈상태 */ --text-9xl: clamp(40px, 3.00vw + 28.7px, 72px); /* 375→40px, 1440→72px — 히어로, 대형 빈상태 */ /* --text-*-fluid 별칭 — 기본 --text-* 토큰이 이미 fluid이므로 하위 호환용 유지. body-fluid만 max=15px로 기본 --text-body(max=14px)보다 넓은 범위. heading 유틸리티(.heading-*)에서 참조 중이므로 유지. */ --text-2xl-fluid: clamp(24px, 0.38vw + 22.6px, 28px); /* 375→24px, 1440→28px */ --text-xl-fluid: clamp(20px, 0.38vw + 18.6px, 24px); /* 375→20px, 1440→24px */ --text-lg-fluid: clamp(16px, 0.38vw + 14.6px, 20px); /* 375→16px, 1440→20px */ --text-base-fluid: clamp(14px, 0.19vw + 13.3px, 16px); /* 375→14px, 1440→16px */ --text-sm-fluid: 12px; /* 고정 */ --text-body-fluid: var(--text-base-fluid); /* 별칭 */ --text-reading-fluid: clamp(14px, 0.19vw + 13.3px, 16px); /* 가독 유동 스케일 */ /* fs-* 사이즈 — 확장 스케일 (text-* 기반 매핑) ⚠️ DEPRECATED: 신규 코드에서는 --text-* 사용 권장. --fs-*는 하위 호환용 유지. */ --fs-3xs: 9px; /* = --text-3xs (마이크로 뱃지/큐 메타 전용) */ --fs-2xs: 10px; --fs-xs: 10px; /* = --text-xs */ --fs-sm: 11px; /* = --text-xs */ --fs-caption: 12px; /* = --text-caption (확장) */ --fs-base: 13px; /* = --text-sm */ --fs-body: 14px; /* = --text-body (확장) */ --fs-md: 15px; /* = --text-base */ --fs-reading: 16px; /* = --text-reading (확장) */ --fs-lg: 18px; /* = --text-lg */ --fs-xl: 18px; /* = --text-lg */ --fs-title: 20px; /* = --text-title (확장) */ --fs-heading: 22px; /* 확장: title(20)↔2xl(24) — KPI 헤딩 등 */ --fs-2xl: 24px; /* = --text-xl */ --fs-3xl: 24px; /* = --text-xl */ --fs-4xl: 28px; /* = --text-4xl */ --fs-5xl: 36px; /* = --text-5xl */ --fs-6xl: 42px; /* 미사용 — --text-* 대응 없음 */ --fs-7xl: 54px; /* 미사용 — --text-* 대응 없음 */ --fs-8xl: 48px; /* = --text-8xl */ --fs-9xl: 72px; /* = --text-9xl */ --fs-icon: 64px; /* 미사용 — --text-* 대응 없음 */ /* weight-* — 4단계 */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line Height */ --leading-tight: 1.2; /* 제목 */ --leading-snug: 1.35; /* 서브제목 */ --leading-normal: 1.5; /* 본문 */ --leading-relaxed: 1.6; /* 긴 텍스트 */ --weight-extrabold: 800; /* fw-* — 확장 별칭 ⚠️ DEPRECATED: 신규 코드에서는 --weight-* 사용 권장. --fw-*는 하위 호환용 유지. */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 600; /* = --weight-semibold */ /* Line Height — 정규 토큰 (6단계) */ --leading-none: 1; /* 아이콘, 버튼, 배지 — single-line 요소 전용 */ --leading-tight: 1.3; /* 타이틀, 컴팩트 UI */ --leading-snug: 1.4; /* 헤딩, 라벨, 짧은 설명 */ --leading-normal: 1.5; /* 기본 본문 */ --leading-relaxed: 1.6; /* 긴 본문, 설명, 코드 블록 */ --leading-loose: 1.8; /* 장문 리딩, 에디터 */ /* lh-* — 별칭 ⚠️ DEPRECATED: 신규 코드에서는 --leading-* 사용 권장. */ --lh-tight: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.5; /* = --leading-normal */ /* Tracking (letter-spacing) — 7단계 큰 텍스트일수록 촘촘하게(음수), 올캡스/라벨은 넓게(양수). Linear/Vercel 레퍼런스 기반. */ --tracking-tightest: -0.04em; /* --text-2xl 이상 — 대형 제목 */ --tracking-tighter: -0.03em; /* --text-xl — 중형 제목 */ --tracking-tight: -0.02em; /* --text-lg~title — 소형 제목 */ --tracking-normal: 0; /* --text-body/base — 본문 */ --tracking-wide: 0.02em; /* 라벨, 소형 캡션 */ --tracking-wider: 0.04em; /* uppercase 캡션/뱃지 */ --tracking-widest: 0.08em; /* uppercase 마이크로 뱃지 */ --tracking-spaced: 0.12em; /* uppercase 소형 라벨 (8px 본문 ~1px) */ --tracking-display: 0.2em; /* 디스플레이/브랜드/디바이스 코드 */ --tracking-display-wide: 0.35em; /* 대형 장식 타이틀 (PREMIUM 등) */ /* ══ Spacing ════════════════════════════════════════ */ /* s-* — 2px 기반, 10단계 (--s-1-5 반단계 포함) */ --s-0: 2px; --s-0-5: 3px; /* 반단계: 2→4 갭 보완 (극소형 패딩/갭 전용) */ --s-1: 4px; --s-1-5: 6px; /* 반단계: 4→8 갭 보완 (소형 패딩/갭 전용) */ --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-8: 48px; --s-10: 64px; /* ── 확장 사이즈 스케일 (하드코딩 제거용) ── */ --s-2-5: 10px; /* s-2(8)→s-3(12) 중간 */ --s-3-5: 14px; /* s-3(12)→s-4(16) 중간 */ --s-4-5: 18px; /* s-4(16)→s-5(24) 중간 */ --s-5-0: 20px; /* s-4(16)→s-5(24) 가까운 위 */ --s-5-5: 28px; /* s-5(24)→s-6(32) 중간 */ --s-7: 36px; /* s-6(32)→s-8(48) 아래 */ --s-7-5: 40px; /* s-6(32)→s-8(48) 중간 */ --s-8-5: 44px; /* s-8(48) 아래 — 모바일 헤더/버튼 높이 */ --s-9: 56px; /* s-8(48)→s-10(64) 중간 */ --s-9-5: 60px; /* s-9(56)→s-10(64) */ --s-11: 72px; /* s-10(64) 위 */ --s-12: 80px; /* 대형 아이콘/아바타 */ --s-14: 96px; /* 초대형 */ --s-16: 100px; /* 섬네일 */ --s-20: 120px; /* 카드 이미지 */ /* ── 아이콘 시맨틱 토큰 ── */ --icon-xs: var(--s-3); /* 12px */ --icon-sm: var(--s-4); /* 16px */ --icon-md: var(--s-5-0); /* 20px */ --icon-lg: var(--s-5); /* 24px */ --icon-xl: var(--s-6); /* 32px */ --icon-2xl: var(--s-7-5); /* 40px */ --icon-3xl: var(--s-8); /* 48px */ /* ── 레이아웃 유동 토큰 ── */ --layout-2xs: clamp(40px, 8vw, 60px); --layout-xs: clamp(60px, 10vw, 100px); --layout-sm: clamp(100px, 15vw, 160px); --layout-md: clamp(160px, 22vw, 240px); --layout-lg: clamp(240px, 30vw, 360px); --layout-xl: clamp(320px, 40vw, 480px); --layout-2xl: clamp(400px, 50vw, 600px); /* ── 패널 너비 토큰 ── */ --panel-w-sm: 240px; --panel-w-md: 320px; --panel-w-lg: 400px; /* sp-* — 레거시 스페이싱 (s-* 기반 별칭) ⚠️ DEPRECATED: 신규 코드에서는 --s-* 사용 권장. --sp-*는 하위 호환용 유지. 값을 var(--s-*)로 참조하여 s-* 변경 시 자동 동기화. */ --sp-2xs: var(--s-1); /* 4px — --s-1 별칭 */ --sp-xs: var(--s-1); /* 4px — --s-1 별칭 */ --sp-sm: var(--s-1); /* 4px — --s-1 별칭 */ --sp-md: var(--s-2); /* 8px — --s-2 별칭 */ --sp-lg: var(--s-3); /* 12px — --s-3 별칭 */ --sp-xl: var(--s-4); /* 16px — --s-4 별칭 */ --sp-2xl: var(--s-5); /* 24px — --s-5 별칭 */ --sp-3xl: var(--s-5); /* 24px — --s-5 별칭 */ --sp-4xl: var(--s-6); /* 32px — --s-6 별칭 */ /* ══ Radius ═════════════════════════════════════════ */ /* Radius — 4단계 (8→16→24 배수) */ --radius-s: 8px; /* 소형 — 버튼, 인풋, 칩 */ --radius: 16px; /* 기본 — 카드, 패널 */ --radius-l: 24px; /* 모달, 드로어 */ --radius-pill: 999px; /* 알약형 — 토글, 탭 */ /* ══ Transition ═════════════════════════════════════ ⚠️ DEPRECATED: 아래 4개는 비구조적 레거시 단축. 신규 코드에서는 --duration-* + --easing-* 조합 또는 --motion-* 단축 사용 권장. 기존 참조 129건 존재하므로 값 유지, 점진적 마이그레이션 대상. 주의: --ease(duration+easing 합성)와 --ease-*(easing-only 별칭) 접두사 충돌 있음. 주의: --smooth(duration+easing)와 --easing-smooth(easing-only) 이름 충돌 있음. 주의: --fast(100ms)와 --duration-fast(120ms) 값 불일치 있음. */ --ease: 150ms ease; --transition: 150ms ease; --smooth: 200ms ease; --fast: 100ms ease; /* ── Duration (정규 — 신규 코드 표준) ── */ --duration-instant: 80ms; /* :active 피드백 */ --duration-fast: 120ms; /* reveal, 포커스 */ --duration-base: 200ms; /* 기본 호버 */ --duration-swift: 220ms; /* 프리미엄 뷰/탭 진입 전환 */ /* ── Animation Duration (컴포넌트 트랜지션 전용) ── ⚠️ DEPRECATED: --anim-fast/base/smooth는 --duration-* 동일값 중복. 신규 코드에서는 --duration-fast(120ms), --duration-base(200ms), --duration-moderate(300ms) 사용 권장. 기존 참조 187건 존재하므로 값 유지, 점진적 마이그레이션 대상. 매핑: --anim-fast=--duration-fast, --anim-base=--duration-base, --anim-smooth=--duration-moderate */ --anim-fast: 120ms; /* = --duration-fast. ⚠️ DEPRECATED */ --anim-base: 200ms; /* = --duration-base. ⚠️ DEPRECATED */ --anim-smooth: 300ms; /* = --duration-moderate. ⚠️ DEPRECATED */ --duration-moderate: 300ms; /* 패널/모달/토글 전환 — ⚠️ animations.css와 동일값 유지 필수 */ --duration-spring: 400ms; /* 스프링/탄성 복귀, 마그네틱 스냅백, 체크 드로우 */ --duration-slow: 450ms; /* 큰 패널, 드로어 — ⚠️ animations.css와 동일값 유지 필수 */ --duration-flip: 500ms; /* FLIP 레이아웃 전환, 카드 재정렬 */ --duration-slower: 600ms; /* 페이지 진입, 스태거 전체 (MAX) — animations.css 동기 */ --duration-dramatic: 800ms; /* 히어로 진입, 페이지 레벨 극적 전환 */ /* ── Easing (커스텀 cubic-bezier — 프로젝트 표준) ── */ --easing-out: cubic-bezier(0.16, 1, 0.3, 1); /* 진입/감속 — 자연스러운 감속 */ --easing-in: cubic-bezier(0.55, 0, 1, 0.45); /* 퇴장/가속 — 가속하며 사라짐 */ --easing-in-out: cubic-bezier(0.33, 1, 0.68, 1); /* 상태 전환 — 양쪽 부드럽게 */ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 중간 오버슈트 — 모달, 패널 진입 (y₂=1.56) */ --easing-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 양방향 탄성 — 드래그, 토스트, 강조 반동 (y₁=-0.55, y₂=1.55) */ --easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* 범용 부드러움 */ /* ── Organic Easing (생물적 움직임) ── */ --easing-organic: cubic-bezier(0.22, 1.15, 0.36, 1); /* 비대칭 등장 — 살짝 넘치고 안착 */ --easing-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 가벼운 오버슈트 — 버튼 hover, 뱃지, 알림 (y₂=1.275) */ --easing-snap: cubic-bezier(0.15, 1.35, 0.4, 0.95); /* 빠른 스냅 — 인디케이터 도착 */ --easing-breathe: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* 호흡 리듬 — 부드러운 싸인파 */ /* ── Spring Semantic (물리 기반 강도별 시맨틱 별칭) ── Researcher 카테고리 A 대응. 기존 easing 토큰의 용도별 별칭. 오버슈트 강도: light(1.275) < medium(1.56) < heavy(양방향 반동) ⚠️ 새 cubic-bezier 값 아님 — 기존 토큰 var 참조만 */ --spring-light: var(--easing-bounce); /* 가벼운 오버슈트 — 버튼 hover, 토글, 칩 */ --spring-medium: var(--easing-spring); /* 기본 바운스 — 모달/패널 진입, 토스트 */ --spring-heavy: var(--easing-elastic); /* 강한 탄성 — 드래그 릴리스, 알림 팝업 */ /* ── Spring Semantic v2 (기획서 §4-A — 용도별 시맨틱 별칭) ── */ --easing-spring-bouncy: var(--easing-bounce); /* 탄탄한 바운스 — 버튼 press, 뱃지 등장 */ --easing-spring-gentle: var(--easing-spring); /* 부드러운 오버슈트 — 모달/패널 진입 */ --easing-spring-elastic: var(--easing-elastic); /* 강한 탄성 반동 — 드래그 릴리스, 토스트 */ /* ── Easing 확장 (슬라이드/시트 전용) ── */ --easing-slide: cubic-bezier(0.22, 0.68, 0.31, 1.0); /* 채팅 슬라이드, 팝업 진입 — command.css 전용 */ --easing-sheet: cubic-bezier(0.21, 0.61, 0.35, 1); /* 바텀시트, 컨텍스트메뉴, 액션시트 */ /* ── Easing 별칭 (var 참조 — animations.css 중복 제거 가능) ── */ --ease-out: var(--easing-out); /* 감속 별칭 */ --ease-in: var(--easing-in); /* 가속 별칭 */ --ease-in-out: var(--easing-in-out); /* 대칭 전환 별칭 */ --ease-spring: var(--easing-spring); /* 스프링 별칭 */ --ease-elastic: var(--easing-elastic); /* 탄성 별칭 */ --ease-smooth: var(--easing-smooth); /* 부드러움 별칭 */ --ease-organic: var(--easing-organic); /* 비대칭 등장 별칭 */ --ease-bounce: var(--easing-bounce); /* 바운스 별칭 */ --ease-snap: var(--easing-snap); /* 스냅 별칭 */ --ease-breathe: var(--easing-breathe); /* 호흡 별칭 */ /* ── Asymmetric Timing (프리미엄 UX 패턴) ── */ /* 진입은 느리게(주목), 퇴장은 빠르게(방해 최소) — Linear/Notion 레퍼런스 */ --duration-enter: 250ms; --duration-exit: 150ms; /* ── Motion 단축 (transition 값으로 직접 사용) ── */ --motion-hover: var(--duration-base) var(--easing-out); /* 호버 전용 단축 */ --motion-state: var(--duration-moderate) var(--ease-in-out); /* 상태 전환 단축 (running→complete→error) — 300ms 대칭 전환 */ --motion-enter: var(--duration-enter) var(--easing-out); /* 진입 모션 단축 */ --motion-exit: var(--duration-exit) var(--easing-in); /* 퇴장 모션 단축 — 퇴장은 가속(ease-in)이 올바름 */ /* ══ Hover Interaction ═════════════════════════════ */ --hover-lift: -2px; /* 카드/패널 호버 리프트 거리 */ --hover-lift-sm: -1px; /* 소형 요소 호버 리프트 */ --hover-scale: 1.02; /* 호버 확대 비율 */ --active-scale: 0.97; /* 액티브 눌림 비율 (기본) */ --active-scale-btn: 0.95; /* 버튼 액티브 눌림 (강조) */ --scale-pop-sm: 1.15; /* 소형 요소 호버 팝 (핀, 뱃지) */ --scale-pop-md: 1.25; /* 중형 요소 호버 팝 (스와치) */ --scale-pop-lg: 1.3; /* 대형 요소 호버 팝 (활성 도트) */ --scale-pop-xl: 1.4; /* 초대형 요소 호버 팝 (에이전트 도트) */ --hover-brightness: 1.1; /* CTA 호버 밝기 (Tier 0) */ --active-brightness: 0.95; /* CTA 액티브(눌림) 밝기 (Tier 0) */ --hover-ring: 0 0 0 1px rgba(45,212,191, 0.06); /* 카드 호버 링 — accent 6% */ /* ══ Shadow ═════════════════════════════════════════ */ --shadow: 0 1px 3px rgba(0,0,0, 0.2); /* 기본 그림자. ≡ --shadow-card, --elevation-2 동일값 */ --shadow-soft: 0 2px 8px rgba(0,0,0, 0.12); /* 부드러운 입체감 (입력 필드, 캡슐 베이스) */ --shadow-float: 0 2px 12px rgba(0,0,0, 0.10); /* 가벼운 부유감 (호버/선택 강조) */ --shadow-lift: 0 6px 20px rgba(0,0,0, 0.22); /* 리프트 효과 (애니메이션/드래그) */ --shadow-lg: 0 8px 24px rgba(0,0,0, 0.3); /* 강조 그림자. ≡ --shadow-card-hover, --elevation-4 동일값 */ --shadow-card-hover: 0 8px 24px rgba(0,0,0, 0.30); /* Tier 1 (Strong) 호버 전용. ≡ --shadow-lg */ --shadow-medium: 0 4px 16px rgba(0,0,0, 0.15); /* 중간 깊이 (float↔lift 사이, 호버 글로우 보조) */ --shadow-inset: inset 0 1px 3px rgba(0,0,0, 0.25); /* 버튼 프레스 디프레션 */ /* ══ Elevation (정적 높이감 — 호버 아닌 상시 적용) ══ */ --elevation-1: 0 1px 2px rgba(0,0,0, 0.15); /* ≡ --elevation-sm 동일값 */ --elevation-md: 0 4px 12px rgba(0,0,0, 0.20); /* Tier 2 (Subtle) 정적 elevation */ --elevation-3: 0 4px 12px rgba(0,0,0, 0.25); /* ══ Z-Index ════════════════════════════════════════ */ --z-base: 1; --z-sticky: 10; --z-tabbar: 50; --z-topbar: 60; --z-dropdown: 100; --z-drawer: 500; --z-modal: 1000; --z-tooltip: 1100; --z-toast: 2000; /* ══ Icon Size ═════════════════════════════════════ */ --icon-sm: 20px; /* 소형 아이콘/버튼 (인라인, 리스트 액션) */ --icon-md: 28px; /* 중형 아이콘/버튼 (카드, 패널, 노드) */ --icon-lg: 36px; /* 대형 아이콘 (빈 상태, 강조) */ /* ══ Layout ═════════════════════════════════════════ */ --topbar-h: 48px; --topbar-height: 48px; /* 별칭 */ --bottombar-h: 56px; --content-max: 960px; --agent-card-min: 220px; /* ══ Overlay / Backdrop ═════════════════════════════ */ --overlay: rgba(0,0,0, 0.6); /* ≡ --overlay-scrim-heavy 동일값 */ --overlay-bg: rgba(0,0,0, 0.5); /* ≡ --backdrop-bg 동일값 */ --backdrop-bg: rgba(0,0,0, 0.5); /* ≡ --overlay-bg 동일값 */ --backdrop-bg-strong: rgba(0,0,0, 0.70); /* ══ Glass / Capsule 디자인 ═════════════════════════ */ --glass-bg: transparent; --glass-thin: transparent; /* 투명 글래스 (블러만) */ --glass-medium: transparent; --glass-blur-2xs: blur(4px); /* 초미세 블러 (인증 오버레이 등) */ --glass-blur-xs: blur(8px); /* 미세 블러 (텍스트 리빌 중간) */ --glass-blur-sm: blur(12px); --glass-blur-md: blur(20px); /* 블러→리빌 기본 (카테고리 C) */ --glass-blur-lg: blur(28px); /* 강한 블러 (페이지 전환, 모달 배경) */ --capsule-bg: rgba(255,255,255, 0.03); /* = --surface */ --capsule-shadow: 0 1px 3px rgba(0,0,0, 0.15); --capsule-hover-shadow: 0 2px 6px rgba(0,0,0, 0.25); /* ── Frosted Glass Dark (backdrop-filter 전용 어두운 글래스 배경) ── ⚠️ 제거된 토큰 대체 매핑 (TKT-0073): liquid-glass-bg-light → 삭제 (--glass-card 또는 --glass-dark 사용) liquid-glass-shadow → --shadow-float 사용 liquid-glass-inset → 삭제 (box-shadow: none 또는 --shadow-inset) liquid-glass-transition → 삭제 (transition: 200ms ease 직접 기재) */ --glass-dark: rgba(17,17,19, 0.35); /* 투명 글래스 — 블러 의존 */ --glass-dark-dense: rgba(17,17,19, 0.40); /* 투명 글래스 — 블러 의존 */ --glass-dark-deep: rgba(17,24,39, 0.45); /* 투명 글래스 — 블러 의존 */ --glass-card: rgba(17,17,19, 0.15); /* 투명 글래스 — 블러 의존 */ --glass-dense: rgba(17,17,19, 0.25); /* 강한 글래스 (.glass--dense 전용) */ --bg-code: rgba(17,24,39, 0.8); /* 코드 블록 배경 */ --bg-code-inline: rgba(17,24,39, 0.6); /* 인라인 코드 배경 */ --bg-quote: rgba(17,24,39, 0.5); /* 인용문 배경 */ /* ══ Gradient / Glow ════════════════════════════════ */ --gradient-accent: linear-gradient(135deg, #14b8a6, #0d9488); --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); /* skeleton 로딩 shimmer */ --glow-accent: 0 0 12px rgba(45,212,191, 0.30); /* ══ Premium Interaction Tokens ═══════════════════════ 1000억급 인터랙션 업그레이드 전용. 카테고리 B(마그네틱/리플), C(블러→리빌), E(스크롤 스태거) 지원. ═══════════════════════════════════════════════════════ */ /* ── Ripple Effect ── */ --ripple-color: rgba(255,255,255, 0.20); /* 기본 리플 색상 (밝은 테마: 반전) */ --ripple-accent: rgba(45,212,191, 0.25); /* accent 리플 (CTA 버튼 전용) */ --ripple-duration: 500ms; /* 리플 확산 시간 */ /* ── Magnetic Button ── */ --magnetic-strength: 0.3; /* 마그네틱 당김 강도 기본값 (0~1, JS에서 참조) */ --magnetic-return: 400ms; /* 복귀 시간 */ /* ── Magnetic Strength 세분화 (용도별 시맨틱 토큰) ── JS가 getComputedStyle(btn)로 읽어야 캐스케이딩 동작. ⚠️ 현재 JS는 root에서 읽으므로, frontend가 수정할 때까지 아래 컴포넌트 오버라이드는 대기 상태. */ --magnetic-strength-cta: 0.35; /* CTA/주요 버튼 — 강한 당김으로 시선 유도 */ --magnetic-strength-nav: 0.2; /* 네비/탭/아이콘 — 미세 당김, 정밀 클릭 보장 */ --magnetic-strength-card: 0.15; /* 카드 호버 — 극미세 (적용 시 optional) */ /* ── Magnetic Whitelist (적용 대상 선택자 — JS initMagneticButtons 참조) ── 마그네틱 효과 적용 기준: ✅ 허용: CTA급 주요 버튼 (.btn-accent, .btn-cta) → strength 0.35 ✅ 허용: 네비 아이콘 버튼 (.topbar-icon-btn) → strength 0.2 ⛔ 금지: 인라인 소형 버튼(.btn-sm), 폼 내부 버튼, 반복 리스트 항목 내 버튼 이유: 마그네틱은 "특별한 요소"에만 적용해야 프리미엄 감성 유지. 모든 버튼에 적용하면 조작 피로 + 정밀 클릭 방해. JS에서 .btn-magnetic 클래스로 수동 적용하거나, initMagneticButtons()가 아래 선택자를 자동 탐색. ── */ /* ── Blur Reveal ── */ --blur-reveal-from: 12px; /* 블러 시작값 */ --blur-reveal-char: 8px; /* 글자별 블러 시작값 */ --blur-reveal-duration: 600ms; /* 블러→선명 전환 시간 */ --blur-reveal-y: 8px; /* 블러→리빌 시 Y축 이동 거리 (아래→위 슬라이드) */ --blur-reveal-stagger: 30ms; /* 글자별 등장 딜레이 (stagger) */ /* ── Scroll-triggered Stagger ── */ --scroll-stagger-gap: 50ms; /* 스크롤 등장 아이템 간격 */ --scroll-reveal-distance: 20px; /* 등장 시 이동 거리 */ --scroll-reveal-duration: 500ms; /* 스크롤 리빌 등장 시간 */ /* ── Premium Glow (프리미엄 호버 글로우) ── */ --glow-premium: 0 0 20px rgba(45,212,191, 0.15), 0 0 40px rgba(45,212,191, 0.05); --glow-premium-strong: 0 0 24px rgba(45,212,191, 0.25), 0 0 48px rgba(45,212,191, 0.08); /* ══ Misc ═══════════════════════════════════════════ */ --contrast-on-accent: #000000; --code-block-bg: rgba(0,0,0, 0.30); /* ══════════════════════════════════════════════════════ 확장 컬러 스케일 (--clr-*) opacity 단계: 2xs=0.03 xs=0.05 sm=0.08 md=0.10 lg=0.15 xl=0.20 2xl=0.25 strong=0.30 ══════════════════════════════════════════════════════ */ /* ── clr-success (green 기반: 34,197,94) ── */ --clr-success: #22c55e; --clr-success-light: #4ade80; --clr-success-bright: #86efac; --clr-success-deep: #16a34a; --clr-success-vivid: #34d399; --clr-success-pale: #bbf7d0; --clr-success-bg: rgba(34,197,94, 0.10); --clr-success-bg-2xs: rgba(34,197,94, 0.03); --clr-success-bg-xs: rgba(34,197,94, 0.05); --clr-success-bg-sm: rgba(34,197,94, 0.08); --clr-success-bg-md: rgba(34,197,94, 0.10); --clr-success-bg-lg: rgba(34,197,94, 0.15); --clr-success-bg-xl: rgba(34,197,94, 0.20); --clr-success-bg-2xl: rgba(34,197,94, 0.25); --clr-success-bg-strong: rgba(34,197,94, 0.30); --clr-success-bg-3xl: rgba(34,197,94, 0.30); /* = --clr-success-bg-strong */ --clr-success-border: rgba(34,197,94, 0.20); --clr-success-border-light: rgba(34,197,94, 0.15); /* ── clr-error (red 기반: 239,68,68) ── */ --clr-error: #ef4444; --clr-error-light: #f87171; --clr-error-bright: #fca5a5; --clr-error-bg: rgba(239,68,68, 0.10); --clr-error-bg-2xs: rgba(239,68,68, 0.03); --clr-error-bg-xs: rgba(239,68,68, 0.05); --clr-error-bg-sm: rgba(239,68,68, 0.08); --clr-error-bg-md: rgba(239,68,68, 0.10); --clr-error-bg-lg: rgba(239,68,68, 0.15); --clr-error-bg-xl: rgba(239,68,68, 0.20); --clr-error-bg-2xl: rgba(239,68,68, 0.25); --clr-error-bg-strong: rgba(239,68,68, 0.30); --clr-error-border: rgba(239,68,68, 0.20); --clr-error-border-strong: rgba(239,68,68, 0.35); --clr-error-transparent: rgba(239,68,68, 0); /* 0-opacity error — 키프레임 보간 엔드포인트 전용 */ /* ── clr-warning (amber 기반: 245,158,11) ── */ --clr-warning: #f59e0b; --clr-warning-light: #fbbf24; --clr-warning-bright: #fcd34d; --clr-warning-bg: rgba(245,158,11, 0.10); --clr-warning-bg-2xs: rgba(245,158,11, 0.03); /* clr-success/clr-error 2xs 스케일과 통일 */ --clr-warning-bg-xs: rgba(245,158,11, 0.05); --clr-warning-bg-sm: rgba(245,158,11, 0.08); --clr-warning-bg-md: rgba(245,158,11, 0.10); --clr-warning-bg-lg: rgba(245,158,11, 0.15); --clr-warning-bg-xl: rgba(245,158,11, 0.20); --clr-warning-bg-2xl: rgba(245,158,11, 0.25); --clr-warning-bg-strong: rgba(245,158,11, 0.30); --clr-warning-border: rgba(245,158,11, 0.20); /* ── clr-info (teal 기반: 45,212,191 — 브랜드 청록 통일) ── */ --clr-info: #14b8a6; --clr-info-light: #5eead4; --clr-info-bright: #99f6e4; --clr-info-bg: rgba(45,212,191, 0.10); --clr-info-bg-xs: rgba(45,212,191, 0.05); --clr-info-bg-sm: rgba(45,212,191, 0.08); --clr-info-bg-md: rgba(45,212,191, 0.10); --clr-info-bg-lg: rgba(45,212,191, 0.15); --clr-info-bg-xl: rgba(45,212,191, 0.20); --clr-info-border: rgba(45,212,191, 0.25); --clr-info-border-light: rgba(45,212,191, 0.15); --clr-info-border-strong: rgba(45,212,191, 0.40); /* ── accent 파생: 불투명 배경 ── */ --accent-deep-solid: rgba(15, 118, 110, 0.95); /* 토스트/알림용 진한 teal 배경 */ /* ── clr-teal (accent 기반: 45,212,191) ── */ --clr-teal-border: rgba(45,212,191, 0.25); --clr-teal-border-subtle: rgba(45,212,191, 0.15); --clr-teal-bg-2xs: rgba(45,212,191, 0.03); --clr-teal-bg-xs: rgba(45,212,191, 0.05); --clr-teal-bg-sm: rgba(45,212,191, 0.08); --clr-teal-bg-md: rgba(45,212,191, 0.10); --clr-teal-bg-lg: rgba(45,212,191, 0.15); --clr-teal-bg-xl: rgba(45,212,191, 0.20); --clr-teal-bg-2xl: rgba(45,212,191, 0.25); /* ── clr-green 확장 (34,197,94) ── */ --clr-green-bg-xs: rgba(34,197,94, 0.05); --clr-green-bg-sm: rgba(34,197,94, 0.08); --clr-green-bg-lg: rgba(34,197,94, 0.15); --clr-green-bg-xl: rgba(34,197,94, 0.20); --clr-green-bg-2xl: rgba(34,197,94, 0.25); --clr-green-border: rgba(34,197,94, 0.25); /* ── clr-accent 배경 (45,212,191) ── ⚠️ 사용 제한: 아래 토큰은 인터랙티브 요소(버튼, 배지, 토글, 호버)에만 사용. ❌ 금지: 컨테이너/카드/섹션/패널 background에 사용 금지. ✅ 컨테이너 배경이 필요하면 --surface-w* 또는 --bg-* 사용. 대체 매핑: accent-bg-xs(0.05) → --surface-w5 accent-bg-sm(0.08) → --surface-w8 accent-bg-md(0.10) → --surface-w10 accent-bg-lg(0.15) → --surface-w15 accent-bg-xl(0.20) → --surface-w20 */ --clr-accent-bg: rgba(45,212,191, 0.10); --clr-accent-bg-xs: rgba(45,212,191, 0.05); --clr-accent-bg-sm: rgba(45,212,191, 0.08); --clr-accent-bg-md: rgba(45,212,191, 0.10); --clr-accent-bg-lg: rgba(45,212,191, 0.15); --clr-accent-bg-xl: rgba(45,212,191, 0.20); --clr-accent-bg-2xl: rgba(45,212,191, 0.25); --clr-accent-bg-3xl: rgba(45,212,191, 0.30); --clr-accent-bg-strong: rgba(45,212,191, 0.30); --clr-accent-bg-4xl: rgba(45,212,191, 0.35); --clr-accent-bg-5xl: rgba(45,212,191, 0.60); /* ── clr-purple 확장 (139,92,246) ── */ --clr-purple: #8b5cf6; --clr-purple-light: #a78bfa; --clr-purple-softer: rgba(139,92,246, 0.60); --clr-purple-pale: #ddd6fe; --clr-purple-muted: rgba(139,92,246, 0.60); --clr-purple-vivid: #a78bfa; --clr-purple-deep: #5b21b6; --clr-purple-darker: #4c1d95; --clr-purple-bg: rgba(139,92,246, 0.10); --clr-purple-bg-2xs: rgba(139,92,246, 0.03); --clr-purple-bg-xs: rgba(139,92,246, 0.05); --clr-purple-bg-sm: rgba(139,92,246, 0.08); --clr-purple-bg-md: rgba(139,92,246, 0.10); --clr-purple-bg-lg: rgba(139,92,246, 0.15); --clr-purple-bg-xl: rgba(139,92,246, 0.20); --clr-purple-bg-2xl: rgba(139,92,246, 0.25); --clr-purple-semi: rgba(139,92,246, 0.80); /* 그래디언트 엔드포인트 / 뱃지 강조 */ --clr-purple-border: rgba(139,92,246, 0.25); --clr-purple-border-light: rgba(139,92,246, 0.15); /* ── clr-indigo (99,102,241) ── */ --clr-indigo: #6366f1; --clr-indigo-light: #818cf8; --clr-indigo-bg-xs: rgba(99,102,241, 0.05); --clr-indigo-bg-sm: rgba(99,102,241, 0.08); --clr-indigo-bg-md: rgba(99,102,241, 0.10); --clr-indigo-bg-lg: rgba(99,102,241, 0.15); --clr-indigo-bg-xl: rgba(99,102,241, 0.20); --clr-indigo-border: rgba(99,102,241, 0.25); /* ── 티켓 상태 배지 (tkt-badge) ── */ --tkt-open: #60a5fa; --tkt-open-bg: rgba(59,130,246, 0.15); --tkt-in-progress: var(--clr-warning-light); --tkt-in-progress-bg: var(--clr-warning-bg-lg); --tkt-review: var(--clr-purple-light); --tkt-review-bg: var(--clr-purple-bg-lg); --tkt-done: var(--clr-success-light); --tkt-done-bg: var(--clr-success-bg-lg); --tkt-closed: #9ca3af; --tkt-closed-bg: rgba(107,114,128, 0.15); --tkt-blocked: var(--clr-error-light); --tkt-blocked-bg: var(--clr-error-bg-lg); /* ── 기타 단색 ── */ --clr-cyan: #06b6d4; --clr-pink: #e91e63; --clr-pink-light: #f472b6; --clr-magenta: #d946ef; --clr-orange: #f97316; /* clr-pink 배경 */ --clr-pink-bg-xs: rgba(233,30,99, 0.05); --clr-pink-bg-md: rgba(233,30,99, 0.10); --clr-pink-insta: #e91e63; --clr-pink-insta-bright: #f06292; /* clr-orange 배경 */ --clr-orange-bg-xs: rgba(249,115,22, 0.05); --clr-orange-bg-sm: rgba(249,115,22, 0.08); --clr-orange-bg-md: rgba(249,115,22, 0.10); /* ══ 에이전트별 컬러 ═══════════════════════════════ */ /* pdfcreator — 레드/코랄 */ --clr-agent-pdfcreator: #ef4444; --clr-agent-pdfcreator-bg: rgba(239,68,68, 0.08); --clr-badge-pdfcreator-bg: rgba(239,68,68, 0.12); /* cardnews — 핑크 */ --clr-agent-cardnews: #e91e63; --clr-agent-cardnews-bg: rgba(233,30,99, 0.10); --clr-badge-cardnews-bg: rgba(233,30,99, 0.12); /* nefcon — 퍼플 */ --clr-agent-nefcon: #8b5cf6; --clr-agent-nefcon-bg: rgba(139,92,246, 0.08); --clr-agent-nefcon-bg-hover: rgba(139,92,246, 0.14); --clr-badge-nefcon-bg: rgba(139,92,246, 0.12); /* telegram — 시안 */ --clr-agent-telegram: #0ea5e9; --clr-agent-telegram-bg: rgba(14,165,233, 0.10); --clr-badge-telegram-bg: rgba(14,165,233, 0.12); /* reelswriter — 오렌지 */ --clr-agent-reelswriter: #f97316; --clr-agent-reelswriter-bg: rgba(249,115,22, 0.10); --clr-agent-reelswriter-bg-hover: rgba(249,115,22, 0.15); --clr-badge-reelswriter-bg: rgba(249,115,22, 0.12); /* chartanalyst — 청록 (브랜드 통일) */ --clr-agent-chartanalyst: #2dd4bf; --clr-agent-chartanalyst-bg: rgba(45,212,191, 0.10); --clr-agent-chartanalyst-bg-hover: rgba(45,212,191, 0.15); --clr-badge-chartanalyst-bg: rgba(45,212,191, 0.12); /* threadcreator — 퍼플 */ --clr-badge-threadcreator-bg: rgba(139,92,246, 0.12); /* premiumcardnews — 앤틱 골드 (프리미엄 브랜딩) */ --clr-agent-premiumcardnews: #C9A96E; --clr-agent-premiumcardnews-gold: #D4AF37; /* 그라데이션 종점용 골드 */ --clr-agent-premiumcardnews-bg-subtle: rgba(201,169,110, 0.06); /* 파일 목록/칩 기본 배경 */ --clr-agent-premiumcardnews-bg: rgba(201,169,110, 0.08); --clr-agent-premiumcardnews-bg-mid: rgba(201,169,110, 0.12); /* 파일 목록/칩 호버 */ --clr-agent-premiumcardnews-bg-hover: rgba(201,169,110, 0.15); --clr-agent-premiumcardnews-bg-active: rgba(201,169,110, 0.18); /* 칩 활성 상태 */ --clr-badge-premiumcardnews-bg: rgba(201,169,110, 0.15); /* 표준 opacity 스케일 (clr-success/error/warning과 통일) */ --clr-agent-premiumcardnews-bg-xs: rgba(201,169,110, 0.05); --clr-agent-premiumcardnews-bg-sm: rgba(201,169,110, 0.08); /* = --clr-agent-premiumcardnews-bg */ --clr-agent-premiumcardnews-bg-md: rgba(201,169,110, 0.12); /* = --clr-agent-premiumcardnews-bg-mid */ --clr-agent-premiumcardnews-bg-lg: rgba(201,169,110, 0.15); /* = --clr-agent-premiumcardnews-bg-hover */ --clr-agent-premiumcardnews-bg-xl: rgba(201,169,110, 0.20); --clr-agent-premiumcardnews-border: rgba(201,169,110, 0.25); /* ══ 모델별 컬러 ═══════════════════════════════════ */ --clr-model-opus: #8b5cf6; --clr-model-opus-light: #c084fc; --clr-model-opus-bg: rgba(192, 132, 252, 0.08); --clr-model-haiku: #f59e0b; --clr-model-haiku-light: #fbbf24; --clr-model-haiku-bg: rgba(251, 191, 36, 0.08); --clr-model-codex: #3b82f6; --clr-model-codex-light: #60a5fa; --clr-model-codex-bg: rgba(96, 165, 250, 0.08); --clr-model-sonnet-bg: rgba(45, 212, 191, 0.08); /* ══ Google Drive ══════════════════════════════════= */ --clr-gdrive-blue: #4285f4; --clr-gdrive-bg: rgba(66,133,244, 0.08); /* ══ Status 시맨틱 매핑 (전 UI 공통) ═════════════════ */ --status-running: var(--accent); --status-running-bg: var(--accent-dim); --status-complete: var(--green); --status-complete-bg: var(--clr-success-bg); --status-error: var(--red); --status-error-bg: var(--clr-error-bg); --status-waiting: var(--amber); --status-waiting-bg: var(--amber-bg); --status-queued: var(--purple); --status-queued-bg: var(--purple-bg); --status-idle: var(--text-sub); /* WCAG AA: --text-faint는 --bg-raised 위 4.43:1 미충족 → --text-sub(5.2:1)로 교체 */ --status-idle-bg: var(--surface); --status-cancelled: var(--text-sub); /* WCAG AA: --text-faint는 카드 배경 위 AA 미충족 → --text-sub로 교체 */ --status-cancelled-bg: var(--surface); --status-success: var(--green); /* 편집기 저장 완료 등 성공 상태 */ --status-warning: var(--amber); --status-triaging: #facc15; --status-triaging-bg: rgba(250, 204, 21, 0.15); --status-frozen: #818cf8; --status-frozen-bg: rgba(129, 140, 248, 0.15); --status-reviewing: var(--amber); --status-reviewing-bg: var(--amber-bg); --status-interrupted: var(--clr-orange); --status-interrupted-bg: var(--clr-orange-bg-md); --status-input: var(--clr-orange); --status-input-bg: var(--clr-orange-bg-md); /* ══ Ticket 상태 토큰 (M5 Ticket System) ══ */ --tkt-open: #60a5fa; --tkt-open-bg: rgba(59, 130, 246, 0.15); --tkt-in-progress: #fbbf24; --tkt-in-progress-bg: rgba(245, 158, 11, 0.15); --tkt-review: #a78bfa; --tkt-review-bg: rgba(139, 92, 246, 0.15); --tkt-done: #4ade80; --tkt-done-bg: rgba(34, 197, 94, 0.15); --tkt-closed: #9ca3af; --tkt-closed-bg: rgba(107, 114, 128, 0.15); --tkt-blocked: #f87171; --tkt-blocked-bg: rgba(239, 68, 68, 0.15); /* ══ Status Dot 인디케이터 ═══ 좌측 테두리 대신 상태 dot(원형 인디케이터)로 상태 표시. dot 크기: 8px, dot과 콘텐츠 간 gap: --s-2(8px). 사용법: .status-dot { width: var(--dot-size); height: var(--dot-size); border-radius: var(--radius-full); background: var(--status-*); } ═════════════════════════════════════════════════════ */ --dot-size: 8px; /* 상태 dot 기본 크기 */ --dot-size-sm: 6px; /* 소형 dot (인라인 텍스트 옆) */ --dot-size-lg: 10px; /* 대형 dot (카드 헤더) */ --dot-gap: var(--s-2); /* dot과 콘텐츠 사이 간격: 8px */ /* ══ Neutral Gray 레이어링 — accent 배경 금지 규칙 (절대 규칙) ════ ❌ 금지: 컨테이너/카드/섹션/패널 배경에 accent 계열 토큰 사용 — accent-dim, accent-soft, accent-bg, clr-accent-bg-*, color-mix(accent) — 이유: 다크 배경 + 저opacity 브랜드색 = 가독성 저하 + 클릭 영역 혼동 ✅ 필수: neutral gray 단계만으로 깊이 표현 (Linear/Vercel/GitHub 패턴) ── 레이어 계층 (바깥에서 안쪽) ── L0 (앱 배경) : --bg (#09090b) L1 (카드/패널) : --bg-raised (#111113) L2 (모달/드로어) : --bg-overlay (#1a1a1e) L3 (호버/활성) : --surface-hover (rgba 255,255,255 0.06) L4 (강조 표면) : --surface-active (rgba 255,255,255 0.09) ── accent → neutral 대체 매핑 (컨테이너용) ── accent-dim (0.12) → --surface-w12 accent-bg-xs(0.05) → --surface-w5 accent-bg-sm(0.08) → --surface-w8 accent-bg-md(0.10) → --surface-w10 accent-bg-lg(0.15) → --surface-w15 accent-bg-xl(0.20) → --surface-w20 ── accent 허용 사용처 (인터랙티브 요소만) ── ✅ 버튼 배경/hover ✅ 배지/태그 배경 ✅ 링크/텍스트 강조 ✅ 토글/스위치 활성 ✅ 상태 dot/아이콘 ✅ 포커스 링/글로우 ✅ 호버 box-shadow ✅ 선택 상태 ring ✅ 스크롤바 thumb ════════════════════════════════════════════════════════════ */ /* ══ Job 카드 레이아웃 토큰 (v4 리디자인) ═══════════ */ --job-icon-size: 18px; /* 상태 SVG 아이콘 크기 (기존 8px dot → 18px) */ --job-card-py: var(--s-2); /* 카드 수직 패딩: 8px */ --job-card-px: var(--s-4); /* 카드 수평 패딩: 16px */ --job-card-gap: var(--s-3); /* 아이콘↔콘텐츠 간격: 12px */ --job-stripe-w: 3px; /* 좌측 상태 스트라이프 두께 */ --job-err-bg: rgba(239,68,68, 0.04); /* 에러 Job 배경색 */ /* ══ Shadow 확장 ═══════════════════════════════════ */ --shadow-subtle: 0 1px 2px rgba(0,0,0, 0.06); /* 카드 베이스 미세 그림자 */ --shadow-card: 0 1px 3px rgba(0,0,0, 0.20); /* ≡ --shadow 동일값 */ --shadow-popover: 0 8px 32px rgba(0,0,0, 0.35); /* 레이어드 섀도우 — 프리미엄 부유 UI (토스트/툴팁/드롭다운) */ --shadow-float-layered: 0 1px 3px rgba(0,0,0, 0.12), 0 8px 32px rgba(0,0,0, 0.35), 0 0 0 1px rgba(255,255,255, 0.04); /* 모달/드로어 레이어드 섀도우 — 깊이감 강화 (3회 반복 패턴 토큰화) */ --shadow-modal-layered: 0 2px 8px rgba(0,0,0, 0.15), 0 16px 48px rgba(0,0,0, 0.40), 0 0 0 1px var(--surface-w3); /* 토스트 호버 레이어드 섀도우 — 어센트 틴트 링 포함 */ --shadow-toast-hover: 0 2px 6px rgba(0,0,0, 0.15), 0 12px 40px rgba(0,0,0, 0.40), 0 0 0 1px rgba(45,212,191, 0.06); /* ══ 인터랙션 Shadow ═════════════════════════════ */ --shadow-focus-ring: 0 0 0 4px var(--accent-dim); /* 포커스 링 (focus-visible) */ --shadow-focus-ring-teal: 0 0 0 3px var(--clr-teal-bg-md); /* teal 포커스 링 (input/select) */ --shadow-tab-active: inset 0 -2px 0 var(--accent); /* 활성 탭 하단 인디케이터 */ --shadow-input-ring: inset 0 0 0 1px var(--accent); /* 입력 필드 포커스 인셋 링 */ --shadow-outline-ring: 0 0 0 1px var(--accent); /* 입력 필드 포커스 아웃라인 링 */ --shadow-focus-ring-purple: 0 0 0 2px var(--purple-bg); /* 보라 포커스 링 */ --shadow-ring-glow: 0 0 0 2px var(--accent-glow); /* 가벼운 어센트 글로우 링 (포커스/선택) */ --shadow-ring-dim: 0 0 0 2px var(--accent-dim); /* 미세 어센트 링 (입력/선택 강조) */ --shadow-ring-accent: 0 0 0 2px var(--clr-accent-bg-lg); /* 어센트 배경 링 (모달/입력 강조) */ --shadow-highlight-ring: 0 0 0 2px var(--accent); /* 하이라이트 링 (임시 강조/선택) */ --shadow-error-ring: 0 0 0 2px var(--clr-error-border-strong); /* 에러 상태 링 */ --shadow-card-selected: 0 0 0 3px var(--clr-teal-bg-sm), 0 0 12px var(--accent-dim); /* 카드 선택 상태 */ --shadow-glow-ring-md: 0 0 0 3px var(--accent-glow); /* 중형 글로우 링 */ --shadow-focus-glow: 0 0 0 3px var(--accent-dim), 0 0 12px var(--accent-glow); /* 포커스 + 글로우 복합 */ --shadow-outline-double: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* 이중 아웃라인 링 */ /* ══ 글로우 Shadow ═══════════════════════════════ */ --shadow-toggle-glow: 0 0 8px var(--clr-accent-bg-strong); /* 토글 ON 글로우 (노브 기본) */ --shadow-toggle-glow-sm: 0 0 12px var(--clr-accent-bg-xl); /* 토글 체크 트랙 글로우 (1단계 — 체크 시) */ --shadow-toggle-glow-md: 0 0 16px var(--clr-accent-bg-strong); /* 토글 체크 호버 글로우 (2단계 — 호버 시) */ --shadow-toggle-glow-lg: var(--shadow-toggle-glow), 0 0 6px var(--clr-accent-bg-4xl); /* 토글 노브 강글로우 (3단계 — 체크 노브) */ --shadow-accent-glow-lg: 0 0 16px var(--accent-glow); /* 대형 어센트 글로우 */ --shadow-chip-glow: 0 0 8px var(--accent-dim), 0 0 2px var(--accent); /* 칩/배지 활성 글로우 */ --shadow-success-glow: 0 2px 12px var(--clr-success-bg-xl); /* 성공 상태 글로우 */ --shadow-purple-glow: 0 2px 12px var(--clr-purple-border); /* 보라 상태 글로우 */ --shadow-tab-running: inset 0 -2px 0 color-mix(in srgb, var(--status-running) 30%, transparent); /* 실행 중 탭 */ --shadow-tab-error: inset 0 -2px 0 color-mix(in srgb, var(--red) 30%, transparent); /* 에러 탭 */ --shadow-tab-warning: inset 0 -2px 0 color-mix(in srgb, var(--amber) 30%, transparent); /* 경고 탭 */ --shadow-btn-active-glow: 0 0 0 3px var(--accent-dim), 0 0 12px var(--accent-glow); /* 버튼 활성 글로우 */ /* ══ 인터랙션 Shadow 확장 ═══════════════════════ */ --shadow-ring-dim-xs: 0 0 0 1px var(--accent-dim); /* 미세 어센트 1px 링 */ --shadow-ring-dim-md: 0 0 0 3px var(--accent-dim); /* 중형 어센트 링 */ --shadow-ring-accent-solid: 0 0 0 2px var(--accent); /* 어센트 실선 링 */ --shadow-accent-bar: inset 3px 0 0 0 var(--accent); /* 좌측 어센트 바 인디케이터 */ --shadow-separator: 0 1px 0 var(--line); /* 수평 구분선 그림자 */ --shadow-separator-left: -1px 0 0 var(--line); /* 좌측 수직 구분선 그림자 */ --shadow-separator-left-bold: -1px 0 0 var(--line-bold); /* 좌측 수직 구분선 (굵은) */ --shadow-sheet: 0 -4px 24px var(--overlay-bg-light); /* 바텀 시트 상단 그림자 */ --shadow-glow-accent: 0 2px 12px var(--accent-glow); /* 어센트 글로우 */ --shadow-glow-accent-sm: 0 0 8px var(--accent-glow); /* 어센트 글로우 (소) */ --shadow-glow-accent-md: 0 0 12px var(--accent-glow); /* 어센트 글로우 (중) */ --shadow-ring-error-soft: 0 0 0 2px var(--clr-error-bg-md); /* 에러 상태 소프트 링 */ --shadow-ring-success: 0 0 0 3px var(--clr-success-bg-sm); /* 성공 상태 링 */ --shadow-overlay-heavy: 0 24px 80px var(--overlay-bg); /* 대형 모달 오버레이 */ --shadow-overlay-deep: 0 20px 60px var(--overlay-bg); /* 라이트박스 오버레이 */ --shadow-dropdown: 0 4px 16px var(--overlay-bg-light); /* 드롭다운 그림자 */ --shadow-glow-accent-xs: 0 0 6px var(--accent-glow); /* 어센트 글로우 (극소) */ --shadow-glow-success-xs: 0 0 6px var(--clr-success); /* 성공 상태 글로우 (극소) */ --shadow-glow-warning-xs: 0 0 6px var(--clr-warning); /* 경고 상태 글로우 (극소) */ --shadow-dot-healthy: 0 0 6px var(--green); /* 건강 상태 도트 */ --shadow-dot-warning: 0 0 6px var(--amber); /* 경고 상태 도트 */ --shadow-dot-critical: 0 0 6px var(--red); /* 위험 상태 도트 */ --shadow-dot-accent: 0 0 6px var(--accent); /* 어센트 도트 */ --shadow-glow-dim-xs: 0 0 6px var(--accent-dim); /* 어센트 딤 글로우 (극소) */ --shadow-glow-dim-md: 0 0 12px var(--accent-dim); /* 어센트 딤 글로우 (중) — D&D 고스트 등 */ --shadow-step-active: 0 0 0 4px var(--clr-teal-bg-sm); /* 워크플로우 활성 스텝 */ --shadow-error-glow: 0 2px 12px var(--clr-error-bg-strong); /* 에러 글로우 */ /* ══ 상태 도트 글로우 (status-dot / agent-status-dot) ═══ */ --shadow-status-running: 0 0 6px color-mix(in srgb, var(--status-running) 35%, transparent); --shadow-status-complete: 0 0 4px color-mix(in srgb, var(--status-complete) 30%, transparent); --shadow-status-complete-lg: 0 0 6px color-mix(in srgb, var(--status-complete) 30%, transparent); --shadow-status-error: 0 0 6px color-mix(in srgb, var(--status-error) 40%, transparent); --shadow-status-error-lg: 0 0 8px color-mix(in srgb, var(--status-error) 50%, transparent); --shadow-status-waiting: 0 0 5px color-mix(in srgb, var(--status-waiting) 35%, transparent); --shadow-status-waiting-lg: 0 0 6px color-mix(in srgb, var(--status-waiting) 40%, transparent); --shadow-status-reviewing: 0 0 6px color-mix(in srgb, var(--status-reviewing) 40%, transparent); --shadow-status-frozen: 0 0 5px color-mix(in srgb, var(--status-frozen) 35%, transparent); --shadow-status-retrying: 0 0 6px color-mix(in srgb, var(--amber) 40%, transparent); --shadow-status-fallback: 0 0 5px color-mix(in srgb, var(--accent-deep) 35%, transparent); /* ══ 복합 Shadow (compound — 컴포넌트 전용) ══════════ */ --shadow-card-hover-glow: var(--shadow-card-hover), 0 0 0 1px var(--clr-accent-bg-sm), 0 0 20px var(--clr-teal-bg-2xs); --shadow-submit-glow: var(--shadow-soft), 0 0 12px var(--accent-dim); --shadow-toast-primary-glow: var(--shadow-soft), 0 0 8px var(--clr-accent-bg-lg); --shadow-scroll-btn-hover: var(--shadow-lg), 0 0 12px var(--clr-accent-bg-md); --shadow-card-running: var(--shadow-subtle), 0 0 0 1px var(--accent-dim); --shadow-card-running-hover: var(--shadow-card-hover), 0 0 16px var(--accent-dim), 0 0 0 1px var(--clr-accent-bg-md); --shadow-card-error: var(--shadow-subtle), 0 0 0 1px var(--clr-error-bg-sm); --shadow-card-error-hover: var(--shadow-card-hover), 0 0 12px var(--clr-error-bg-sm), 0 0 0 1px rgba(239,68,68,0.12); --shadow-glass-bar: inset 0 1px 0 var(--surface-w4), 0 8px 32px var(--overlay-scrim-light); /* GlassBar 부유 pill 그림자 */ --shadow-glass-base: var(--shadow-subtle), 0 0 0 1px var(--line); --shadow-glass-hover: var(--shadow-float), 0 0 0 1px var(--line-bold); --shadow-focus-glow-lg: var(--shadow-focus-ring), 0 0 16px var(--accent-dim); --shadow-glass-soft: var(--shadow-soft), 0 0 0 1px var(--surface-w4); --shadow-cta-base: var(--shadow-accent-glow-lg), 0 2px 4px rgba(0,0,0, 0.2); --shadow-cta-hover: 0 0 24px var(--clr-accent-bg-4xl), 0 4px 8px rgba(0,0,0, 0.25); --shadow-cta-focus: var(--shadow-focus-ring), 0 0 16px var(--accent-glow); --shadow-focus-within-glow: var(--shadow-ring-dim), 0 0 12px var(--accent-glow); --shadow-separator-surface: 0 1px 0 var(--surface-w6); --shadow-progress-complete: 0 0 12px var(--clr-success-bg-lg), 0 0 4px var(--green); --shadow-toggle-active: 0 0 8px var(--clr-accent-bg-strong), 0 0 2px var(--clr-accent-bg-5xl); --shadow-send-btn-hover: var(--shadow-accent-glow-lg), 0 2px 8px var(--overlay-scrim-light); --shadow-urgent-ring: inset 0 0 0 1px var(--clr-orange); --shadow-chip-success: 0 0 12px var(--clr-success-bg-lg), 0 0 4px var(--green); --shadow-accent-combo: 0 0 8px var(--clr-accent-bg-strong), 0 0 2px var(--clr-accent-bg-5xl); /* ══ 에이전트 카드/노드 faint 글로우 ═══════════════ */ --shadow-card-complete-faint: 0 0 8px color-mix(in srgb, var(--status-complete) 5%, transparent); --shadow-card-waiting-faint: 0 0 8px color-mix(in srgb, var(--status-waiting) 5%, transparent); --shadow-node-error: 0 0 12px color-mix(in srgb, var(--status-error) 8%, transparent); --shadow-node-waiting: 0 0 10px color-mix(in srgb, var(--status-waiting) 6%, transparent); --shadow-node-dot-complete: 0 0 3px color-mix(in srgb, var(--status-complete) 25%, transparent); --shadow-node-dot-error: 0 0 4px color-mix(in srgb, var(--status-error) 40%, transparent); --shadow-node-dot-waiting: 0 0 4px color-mix(in srgb, var(--status-waiting) 40%, transparent); --shadow-card-retrying-faint: 0 0 8px color-mix(in srgb, var(--amber) 8%, transparent); --shadow-card-circuit-faint: 0 0 10px color-mix(in srgb, var(--status-error) 20%, transparent); --shadow-card-fallback-faint: 0 0 8px color-mix(in srgb, var(--accent-deep) 8%, transparent); /* ══ 유틸리티 Shadow (감사 T4 추가) ═══════════════ */ --shadow-error-bar: inset 3px 0 0 0 var(--red); /* 에러 좌측 바 인디케이터 (≡ accent-bar의 red 변형) */ --shadow-separator-inset: inset 0 -1px 0 var(--surface); /* 수평 구분선 인셋 */ --shadow-separator-inset-double: inset 0 -1px 0 var(--surface), inset -1px 0 0 var(--surface); /* L자 구분선 */ --shadow-dot-complete: 0 0 4px color-mix(in srgb, var(--status-complete) 40%, transparent); /* 완료 도트 글로우 */ --shadow-glow-warning-bg: 0 0 6px var(--clr-warning-bg-xl); /* 경고 배경색 글로우 */ --shadow-glow-accent-lifted: 0 2px 6px var(--accent-glow); /* 어센트 리프트 글로우 (소, 수직 오프셋) */ --shadow-glow-accent-combo: 0 2px 8px var(--accent-glow), 0 0 16px var(--accent-dim); /* 어센트 콤보 글로우 */ --shadow-glow-teal: 0 2px 12px var(--clr-teal-bg-xl); /* 틸 글로우 */ --shadow-glow-teal-hover: 0 4px 20px var(--clr-teal-bg-2xl); /* 틸 글로우 (호버) */ --shadow-glow-success: 0 2px 8px var(--clr-success-bg-strong); /* 성공 글로우 */ --shadow-glow-success-lg: 0 2px 12px var(--clr-green-bg-xl); /* 성공 글로우 (대) */ --shadow-ring-bg: 0 0 0 2px var(--bg); /* 배경색 링 (아바타 등) */ --shadow-overlay-popover: 0 8px 32px var(--overlay-bg); /* 팝오버 오버레이 */ --shadow-accent-hover-combo: var(--shadow), 0 0 12px var(--clr-accent-bg-lg); /* 어센트 버튼 호버 복합 (기본 shadow + 글로우) */ --shadow-breathe-peak: 0 4px 12px var(--clr-accent-bg-xs); /* 빈 상태 브리딩 애니메이션 절정 */ --shadow-ring-dim-zero: 0 0 0 0 var(--accent-dim); /* 포커스 링 펄스 시작 (0→ring 전환) */ /* ── AC7 감사 — 복합 Shadow 토큰 ─────────────────── */ --shadow-capsule-focus: 0 0 0 3px var(--clr-teal-bg-md), 0 2px 12px var(--clr-teal-bg-md); /* 캡슐 포커스 링+글로우 */ --shadow-form-focus-within: 0 0 0 1px var(--accent-dim), 0 0 16px var(--clr-teal-bg-xs); /* 폼 그룹 포커스 링 */ --shadow-inset-success: inset 0 0 0 1px var(--clr-green-bg-xl); /* 인셋 성공 링 */ --shadow-fab-base: 0 4px 16px var(--overlay-bg-light), 0 0 0 1px var(--surface); /* FAB 기본 */ --shadow-fab-hover: 0 4px 20px var(--overlay-bg-light), 0 0 0 1px var(--accent-glow), var(--glow-accent); /* FAB 호버 */ --shadow-chip-hover: 0 2px 8px var(--accent-dim); /* 칩 호버 글로우 */ --shadow-popup-sheet: 0 -4px 24px var(--overlay-bg), 0 0 0 1px var(--surface-w6); /* 팝업 시트 */ --shadow-hover-glow-card: 0 0 0 1px var(--clr-teal-bg-lg), 0 0 20px var(--clr-teal-bg-sm), var(--shadow-medium); /* 카드 호버 글로우 */ --shadow-cta-hover-glow: 0 0 0 1px var(--accent-dim), 0 4px 12px var(--accent-dim), 0 0 24px var(--clr-teal-bg-xs); /* CTA 호버 글로우 */ /* ── T4 box-shadow 토큰화 — 신규 토큰 ─────────── */ --shadow-ring-accent-bg-xs: 0 0 0 3px var(--clr-accent-bg-xs); /* 어센트 bg-xs 링 (모달 포커스) */ --shadow-ring-glow-combo: 0 0 0 1px var(--accent-glow), var(--glow-accent); /* 글로우 링 + 어센트 글로우 복합 */ --shadow-glow-success-xl: 0 4px 16px var(--clr-green-border); /* 성공 글로우 (특대) */ --shadow-glow-teal-md: 0 4px 16px var(--clr-teal-bg-2xl); /* 틸 글로우 (중) */ --shadow-ring-accent-deep: 0 0 0 2px var(--accent-deep); /* 어센트-딥 실선 링 */ --shadow-tab-active-top: inset 0 2px 0 var(--accent); /* 활성 탭 상단 인디케이터 */ --shadow-ring-line: 0 0 0 2px var(--line-strong); /* 강조 라인 링 (git diff 등) */ --shadow-ring-success-glow: 0 0 0 2px var(--clr-success-bg-lg), 0 0 8px var(--clr-success-bg-xl); /* 성공 링+글로우 (git 선택) */ --shadow-ring-teal: 0 0 0 2px var(--clr-teal-bg-xl); /* 틸 강조 링 */ --shadow-ring-insta: 0 0 0 2px color-mix(in srgb, var(--clr-pink-insta) 30%, transparent); /* 인스타 포커스 링 */ --shadow-3d-tooltip: 0 0 0 1px var(--clr-teal-bg-lg), var(--shadow-dropdown); /* 3D 온톨로지 툴팁 (틸 링 + 드롭다운 그림자) */ /* ── 애니메이션 전용 Shadow ──────────────────────── */ --shadow-glow-pulse-base: 0 0 4px var(--clr-teal-bg-sm); /* 글로우 펄스 기본 (워킹 상태 0%/100%) */ --shadow-glow-pulse-peak: 0 0 14px var(--clr-teal-bg-xl); /* 글로우 펄스 절정 (워킹 상태 50%) */ --shadow-breathe-glow: 0 0 10px 2px var(--accent-glow); /* 호흡 글로우 절정 (50%) */ --shadow-state-morph-success: 0 0 0 4px var(--clr-teal-bg-xl), 0 0 20px var(--clr-teal-bg-md); /* 성공 상태 모프 절정 */ --shadow-state-morph-error: 0 0 0 4px var(--clr-error-bg-xl), 0 0 20px var(--clr-error-bg-md); /* 에러 상태 모프 절정 */ --shadow-near-glow: 0 0 16px var(--clr-teal-bg-sm); /* 커서 근접 글로우 */ --shadow-breathe-glow-lg: 0 0 20px 4px var(--clr-teal-bg-lg); /* 호흡 글로우 대형 (PromptPort 게이지) */ --shadow-focus-glow-expand: 0 0 0 3px var(--clr-teal-bg-sm), var(--shadow-glow-dim-md); /* 인풋 포커스 글로우 확산 종착점 */ /* ── 패널/오버레이 Shadow ──────────────────────── */ --shadow-panel-heavy: 0 4px 20px rgba(0,0,0, 0.5); /* 고정 패널 강한 그림자 (모바일 프로그레스 바 등) */ --shadow-panel-light: 0 4px 20px rgba(0,0,0, 0.3); /* 고정 패널 가벼운 그림자 (가이드 배너 등) */ /* ── D&D 드래그 Shadow ──────────────────────────── */ --shadow-drag: 0 8px 24px rgba(0,0,0, 0.3), 0 2px 8px rgba(0,0,0, 0.15); /* D&D 기본 드래그 (≡ --shadow-lg + soft layer) */ /* ══ 특수 Shadow ═════════════════════════════════ */ --shadow-keycap: 0 1px 0 rgba(0,0,0, 0.3), inset 0 1px 0 var(--surface-w4); /* kbd 키캡 입체감 */ /* ══ Overlay 확장 ══════════════════════════════════ */ --overlay-bg-light: rgba(0,0,0, 0.4); --overlay-scrim-heavy: rgba(0,0,0, 0.6); /* ≡ --overlay 동일값 */ --overlay-scrim-light: rgba(0,0,0, 0.3); --overlay-auth: rgba(9,9,11, 0.82); /* 인증 오버레이 (앱 배경 #09090b 기반, 82% 불투명) */ --overlay-modal-glass: rgba(0,0,0, 0.55); /* 글래스 모달 백드롭 */ /* ══ Toast 배경 — clr-*-bg-xs 별칭 (토스트 전용 시맨틱) ══ */ --toast-success-bg: var(--clr-success-bg-xs); --toast-error-bg: var(--clr-error-bg-xs); --toast-warning-bg: var(--clr-warning-bg-xs); --toast-info-bg: var(--clr-info-bg-xs); /* ══ Elevation 확장 ════════════════════════════════ */ --elevation-sm: 0 1px 2px rgba(0,0,0, 0.15); /* ≡ --elevation-1 동일값 */ --elevation-2: 0 1px 3px rgba(0,0,0, 0.20); /* ≡ --shadow, --shadow-card 동일값 */ --elevation-4: 0 8px 24px rgba(0,0,0, 0.30); /* ≡ --shadow-lg, --shadow-card-hover 동일값 */ /* ══ Surface 확장 ══════════════════════════════════ */ --surface-w4: rgba(255,255,255, 0.04); --surface-w13: rgba(255,255,255, 0.09); /* ══ Background 확장 ═══════════════════════════════ */ --bg-elevated: rgba(26,26,30, 1); /* ══ Scrollbar ════════════════════════════════════ */ --scrollbar-w: 6px; /* 전역 스크롤바 너비 */ --scrollbar-w-compact: 4px; /* 컴팩트 스크롤바 (패널/리스트용) */ --scrollbar-thumb: rgba(255,255,255, 0.08); --scrollbar-thumb-hover: rgba(255,255,255, 0.15); --scrollbar-track: transparent; /* ══ Container Query Breakpoints ═════════════════ @container 조건에서 var() 사용 불가 — 아래 토큰은 (1) JS에서 getComputedStyle 참조, (2) 전체 CQ 브레이크포인트 단일 참조점. 실제 @container 규칙에는 리터럴 값 사용 필수. ═══════════════════════════════════════════════ */ --cq-xs: 320px; /* 극소형: 좁은 사이드 패널 */ --cq-sm: 480px; /* 소형: 모바일 가로, 사이드바 열림 시 */ --cq-md: 640px; /* 중형: 태블릿 세로, 넓은 패널 */ --cq-lg: 768px; /* 대형: 태블릿 가로 */ --cq-xl: 960px; /* 초대형: 데스크톱 풀 */ /* Container Name 레지스트리 (이름 충돌 방지 참조) ───────────────────────────────────────────── agentsgrid → .agent-grid (agents.css) 신규 outputlist → .ov-scroll-wrap (outputs.css) 신규 division → .division-section (agents.css) 기존 outputsview → .outputs-view-inner(outputs.css) 기존 content → .content-area (layout.css) 기존 settings → settings-panel (layout.css) 기존 pwcanvas → .pw-canvas (prompts.css) 기존 ocpanel → .oc-subpanel (pages.css) 기존 factcontent → .factory-content (factory.css) 기존 refcontent → .ref-content (reference.css) 기존 ───────────────────────────────────────────── */ } /* ══════════════════════════════════════════════════════════ Light Theme — 듀얼 테마 (아침 월스트리트 06:00~18:00) [data-theme="light"] 속성 셀렉터로 다크 토큰을 라이트로 오버라이드. `:root`(다크)가 기본값, 이 블록이 없으면 다크로 폴백. ══════════════════════════════════════════════════════════ */ [data-theme="light"] { color-scheme: light; /* ── Background ── */ --bg: #fafaf8; --bg-raised: #ffffff; --bg-overlay: #f5f5f3; --bg-elevated: rgba(240,240,238, 1); /* ── Surface (white→black 반전 — 라이트 배경 위 미세 어두운 오버레이) ── */ --surface: rgba(0,0,0, 0.03); --surface-2: rgba(0,0,0, 0.05); --surface-hover: rgba(0,0,0, 0.06); --surface-active: rgba(0,0,0, 0.09); --surface-black: rgba(0,0,0, 0.40); --surface-w2: rgba(0,0,0, 0.02); --surface-w3: rgba(0,0,0, 0.03); --surface-w4: rgba(0,0,0, 0.04); --surface-w5: rgba(0,0,0, 0.05); --surface-w6: rgba(0,0,0, 0.06); --surface-w8: rgba(0,0,0, 0.08); --surface-w10: rgba(0,0,0, 0.10); --surface-w12: rgba(0,0,0, 0.12); --surface-w13: rgba(0,0,0, 0.09); --surface-w15: rgba(0,0,0, 0.15); --surface-w20: rgba(0,0,0, 0.20); /* ── Text ── */ --text: #1a1a1f; --text-sub: #6e6e73; --text-faint: #72727a; /* WCAG AA 4.56:1 on #fafaf8 (다크 테마 #505058 → 강화) */ --text-muted: #72727a; /* ⚠️ DEPRECATED: --text-faint 사용 권장. 레거시 별칭 */ /* ── Line / Border (라이트: 약간 높은 opacity로 가시성 보장) ── */ --line: rgba(0,0,0, 0.06); --line-bold: rgba(0,0,0, 0.10); --line-strong: rgba(0,0,0, 0.15); --line-glass: rgba(0,0,0, 0.25); /* 글래스 블러 표면 위 구분선 */ --border: rgba(0,0,0, 0.10); --border-subtle: rgba(0,0,0, 0.08); /* ── Glass / Capsule (라이트: 불투명 흰색 글래스) ── */ --glass-bg: rgba(255,255,255, 0.72); --glass-thin: rgba(255,255,255, 0.80); --glass-medium: rgba(255,255,255, 0.80); --capsule-bg: rgba(0,0,0, 0.03); --glass-dark: rgba(255,255,255, 0.88); --glass-dark-dense: rgba(255,255,255, 0.92); --glass-dark-deep: rgba(255,255,255, 0.92); --glass-card: rgba(255,255,255, 0.65); --glass-dense: rgba(255,255,255, 0.85); /* 강한 글래스 (.glass--dense 전용 — 라이트) */ /* ── Code blocks ── */ --bg-code: rgba(0,0,0, 0.04); --bg-code-inline: rgba(0,0,0, 0.05); --bg-quote: rgba(0,0,0, 0.03); --code-block-bg: rgba(0,0,0, 0.04); /* ── Gradient / Shimmer ── */ --gradient-shimmer: linear-gradient(90deg, transparent, rgba(0,0,0, 0.06), transparent); /* ── Ripple ── */ --ripple-color: rgba(0,0,0, 0.12); /* ── Scrollbar ── */ --scrollbar-thumb: rgba(0,0,0, 0.12); --scrollbar-thumb-hover: rgba(0,0,0, 0.20); /* ── Overlay / Backdrop (라이트: 더 투명한 스크림) ── */ --overlay: rgba(0,0,0, 0.35); --overlay-bg: rgba(0,0,0, 0.25); --backdrop-bg: rgba(0,0,0, 0.25); --backdrop-bg-strong: rgba(0,0,0, 0.45); --overlay-bg-light: rgba(0,0,0, 0.12); --overlay-scrim-heavy: rgba(0,0,0, 0.40); --overlay-scrim-light: rgba(0,0,0, 0.15); --overlay-auth: rgba(250,250,248, 0.82); --overlay-modal-glass: rgba(0,0,0, 0.20); /* ── Shadow (라이트: 부드러운 그림자) ── */ --shadow-subtle: 0 1px 2px rgba(0,0,0, 0.04); --shadow-card: 0 1px 3px rgba(0,0,0, 0.08); --shadow-popover: 0 8px 32px rgba(0,0,0, 0.12); --shadow-float-layered: 0 1px 3px rgba(0,0,0, 0.06), 0 8px 32px rgba(0,0,0, 0.12), 0 0 0 1px rgba(0,0,0, 0.04); --shadow-modal-layered: 0 2px 8px rgba(0,0,0, 0.06), 0 16px 48px rgba(0,0,0, 0.15), 0 0 0 1px var(--surface-w3); --shadow-panel-heavy: 0 4px 20px rgba(0,0,0, 0.12); --shadow-panel-light: 0 4px 20px rgba(0,0,0, 0.08); --shadow-drag: 0 8px 24px rgba(0,0,0, 0.12), 0 2px 8px rgba(0,0,0, 0.06); --shadow-keycap: 0 1px 0 rgba(0,0,0, 0.10), inset 0 1px 0 var(--surface-w4); /* ── Elevation ── */ --elevation-sm: 0 1px 2px rgba(0,0,0, 0.06); --elevation-1: 0 1px 2px rgba(0,0,0, 0.06); --elevation-2: 0 1px 3px rgba(0,0,0, 0.08); --elevation-md: 0 4px 12px rgba(0,0,0, 0.08); --elevation-3: 0 4px 12px rgba(0,0,0, 0.10); --elevation-4: 0 8px 24px rgba(0,0,0, 0.12); /* ── Shadow 기본/중간 (라이트: 다크 대비 40~50% 감소) ── */ --shadow: 0 1px 3px rgba(0,0,0, 0.10); --shadow-soft: 0 2px 8px rgba(0,0,0, 0.06); --shadow-float: 0 2px 12px rgba(0,0,0, 0.06); --shadow-medium: 0 4px 16px rgba(0,0,0, 0.08); --shadow-lift: 0 6px 20px rgba(0,0,0, 0.10); --shadow-lg: 0 8px 24px rgba(0,0,0, 0.12); --shadow-card-hover: 0 8px 24px rgba(0,0,0, 0.12); --shadow-inset: inset 0 1px 3px rgba(0,0,0, 0.12); /* ── Shadow Toast (라이트: 부드러운 그림자) ── */ --shadow-toast-hover: 0 2px 6px rgba(0,0,0, 0.08), 0 12px 40px rgba(0,0,0, 0.15), 0 0 0 1px rgba(45,212,191, 0.06); /* ── Capsule Shadow (라이트: 미세 그림자) ── */ --capsule-shadow: 0 1px 3px rgba(0,0,0, 0.08); --capsule-hover-shadow: 0 2px 6px rgba(0,0,0, 0.12); /* ── Glow (라이트: 밝은 배경 위 글로우 감쇄) ── */ --glow-accent: 0 0 12px rgba(45,212,191, 0.20); --glow-premium: 0 0 20px rgba(45,212,191, 0.10), 0 0 40px rgba(45,212,191, 0.03); --glow-premium-strong: 0 0 24px rgba(45,212,191, 0.15), 0 0 48px rgba(45,212,191, 0.05); }