229 lines
8.3 KiB
CSS
229 lines
8.3 KiB
CSS
/* =====================================================================
|
|
Vignette — 디자인 토큰 (단일 진실원본)
|
|
출처: docs/dev_dashboard.html :root + docs/DESIGN_CONCEPT.md §3
|
|
primitive(원시값) → semantic(의미 별칭) 2계층. 컴포넌트는 semantic만 참조.
|
|
다크모드/역할별 accent는 이 파일 하단 1곳에서만 스왑.
|
|
철칙: 순흑/순백 금지(paper/ink 토큰만), border-left 강조선 금지,
|
|
강조는 weight+accent텍스트+tint배경+kicker로만.
|
|
===================================================================== */
|
|
|
|
:root {
|
|
/* ── Primitive: Neutral (따뜻한 종이 + 쿨 슬레이트) §3.1 ── */
|
|
--paper: #fbfaf8; /* 본문 배경: 따뜻한 종이색 (순백 아님) */
|
|
--paper-1: #fbfaf8; /* 구형 페이지 alias */
|
|
--paper-2: #f4f2ee; /* 카드/패널 미세 단차 (테두리 대신 톤차) */
|
|
--surface: #ffffff; /* 카드 표면 */
|
|
--neutral-100: #eceff1; /* 표면 hover / subtle fill */
|
|
--neutral-150: #e5e1da; /* 카드 보더 baseline = hairline */
|
|
--neutral-200: #d5dbde; /* divider 진함 */
|
|
--neutral-400: #98a4a9; /* placeholder / disabled */
|
|
|
|
--ink: #1c2a2a; /* 본문 텍스트: 잉크 네이비-그린 (순흑 아님) */
|
|
--ink-2: #5a6663; /* 보조 텍스트: 슬레이트 */
|
|
--ink-3: #93a09c; /* 캡션/메타 */
|
|
--hair: #e5e1da; /* 1px 헤어라인 (구역 분리는 이걸로) */
|
|
|
|
/* ── Sage-Teal (주 악센트 = 상담/신뢰), 화면당 1곳 배급 §3.2 ── */
|
|
--accent: #3e7a6e; /* ★ 메인 악센트. 흰 배경 대비 5.0:1 AA */
|
|
--accent-deep: #316257; /* hover / 진한 강조 텍스트 */
|
|
--accent-tint: #eef4f2; /* 악센트 배경 틴트 (콜아웃·선택·active) */
|
|
--accent-bright: #5f968b; /* dot·진행바 fill */
|
|
|
|
/* ── Terracotta (보조 악센트 = 학습/온기), 저채도, 화면당 1곳 ── */
|
|
--clay: #b0735c; /* ★ 보조 악센트 (학습자 온기, 내담자 측 신호) */
|
|
--clay-deep: #94604c;
|
|
--clay-tint: #f6f0ec;
|
|
|
|
/* ── 의미색 (Semantic feedback) — solid + tint 페어 §3.3 ── */
|
|
/* 긍정 = 녹색 (상담 진전·라포·가드레일 통과·잘함) */
|
|
--pos-text: #2c6e49;
|
|
--pos-solid: #3b8c5e;
|
|
--pos-tint: #e8f3ec;
|
|
/* 주의 = 앰버 (라포 약화·과도한 침묵·페이싱) */
|
|
--warn-text: #8a5a00;
|
|
--warn-solid: #c28a2c;
|
|
--warn-tint: #faf1e0;
|
|
/* 위험 = 적색 (가드레일 위반·세션 강제중단·임상적 위급) — 오직 진짜 위급만 */
|
|
--crit-text: #a8352c;
|
|
--crit-solid: #c4453a;
|
|
--crit-tint: #faeae8;
|
|
/* 정보 = 슬레이트블루 (평가 AI 피드백·시스템 안내, 중립) */
|
|
--info-text: #2e5a7a;
|
|
--info-solid: #3c7299;
|
|
--info-tint: #eaf1f6;
|
|
--neutral-sig: #8895a2; /* 데이터 없음·미평가 */
|
|
|
|
/* ── 시맨틱 별칭 (라이트 모드) §3.4 ── */
|
|
--bg-app: var(--paper); /* 앱 캔버스 */
|
|
--bg-surface: var(--surface); /* 카드/패널 */
|
|
--bg-surface-2: var(--paper-2); /* 중첩 표면/입력 */
|
|
--bg-tint: var(--accent-tint); /* 선택·강조 배경 */
|
|
--bg-stage: #1e2724; /* 내담자 아바타 영역 (깊은 차콜그린) */
|
|
|
|
--text-strong: var(--ink); /* 제목 */
|
|
--text-body: var(--ink-2); /* 본문 보조 */
|
|
--text-muted: var(--ink-3); /* 캡션 */
|
|
--text-on-accent: #fbfaf8; /* accent 버튼 위 텍스트 */
|
|
|
|
--border-subtle: var(--neutral-150);
|
|
--border-strong: var(--neutral-200);
|
|
--border-focus: var(--accent);
|
|
--focus-ring: rgba(62, 122, 110, 0.45);
|
|
|
|
/* ── 타이포그래피 §3.6 ── */
|
|
--font-sans: "Pretendard Variable", Pretendard, -apple-system,
|
|
"Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
|
|
--font-serif: "Noto Serif KR", "Source Serif 4", serif; /* 랜딩 헤드만 */
|
|
--font-num: "Pretendard Variable", "JetBrains Mono", ui-monospace, monospace;
|
|
|
|
/* 타입 스케일 (기준 16px / 1.6, 위계는 크기보다 weight) */
|
|
--fs-display: 2.5rem; /* 40 / 표지·랜딩 대제목 */
|
|
--fs-h1: 1.875rem; /* 30 / 페이지 제목 */
|
|
--fs-h2: 1.5rem; /* 24 / 섹션 제목 */
|
|
--fs-h3: 1.25rem; /* 20 / 카드·패널 제목 */
|
|
--fs-lead: 1.125rem; /* 18 / 리드 문장 */
|
|
--fs-body: 1rem; /* 16 / 본문 기본 */
|
|
--fs-sm: 0.875rem; /* 14 / 보조·폼 라벨 */
|
|
--fs-xs: 0.8125rem; /* 13 / 캡션·메타·배지 */
|
|
--fs-kicker: 0.75rem; /* 12 / 상단 kicker 소제목 */
|
|
|
|
/* ── 스페이싱 (8pt 기반) §3.7 ── */
|
|
--sp-1: 4px;
|
|
--sp-2: 8px;
|
|
--sp-3: 12px;
|
|
--sp-4: 16px;
|
|
--sp-5: 24px;
|
|
--sp-6: 32px;
|
|
--sp-7: 48px;
|
|
--sp-8: 64px;
|
|
--sp-9: 96px;
|
|
|
|
/* ── 그리드·형태 §3.8 ── */
|
|
--maxw: 1200px; /* 대시보드 콘텐츠 최대폭 */
|
|
--maxw-read: 680px; /* 읽기 영역 */
|
|
--border: var(--border-subtle);
|
|
--font-mono: var(--font-num);
|
|
--nav-w: 240px; /* 좌측 네비 펼침 */
|
|
--nav-w-collapsed: 72px; /* 좌측 네비 아이콘 only */
|
|
--topbar-h: 56px;
|
|
--radius: 8px; /* 카드/버튼 (거의 직각) */
|
|
--radius-sm: 6px; /* 입력·칩 */
|
|
--radius-lg: 12px; /* 패널 */
|
|
--gutter: 24px;
|
|
|
|
--shadow-sm: 0 1px 2px rgba(28, 42, 42, 0.05);
|
|
--shadow-md: 0 4px 14px rgba(28, 42, 42, 0.07); /* 모달·팝오버만 */
|
|
|
|
/* ── 래스터 디자인 요소 ── */
|
|
--asset-warm-elements: url("/design-elements/clinical-paper-ambient.png");
|
|
--asset-login-room: url("/design-elements/login-counseling-room.png");
|
|
|
|
/* ── 모션 §3.9 ── */
|
|
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
|
|
--ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95);
|
|
--dur-fast: 120ms; /* hover·포커스 */
|
|
--dur-base: 200ms; /* 버튼·토글·드롭다운 */
|
|
--dur-slow: 320ms; /* 패널 전환·모달 */
|
|
--dur-breathe: 3200ms; /* 음성 호흡 펄스 */
|
|
}
|
|
|
|
/* ── 다크 모드 (gloom 회피 — 충분한 밝은 면 + 절제된 악센트) §3.5 ── */
|
|
[data-theme="dark"] {
|
|
--paper: #0f1715;
|
|
--paper-1: #111b18;
|
|
--paper-2: #17211f;
|
|
--surface: #1b2724;
|
|
--neutral-100: #24322e;
|
|
--neutral-150: #2c3b36;
|
|
--neutral-200: #3a4b45;
|
|
--neutral-400: #7c8d88;
|
|
|
|
--ink: #eef6f3;
|
|
--ink-2: #c6d3cf;
|
|
--ink-3: #8a9b96;
|
|
--hair: #2c3b36;
|
|
|
|
--bg-app: #0e1714;
|
|
--bg-surface: #17231f;
|
|
--bg-surface-2: #22302c;
|
|
--bg-tint: #1d302b;
|
|
--bg-stage: #0e1614;
|
|
--text-strong: #eaf0f1;
|
|
--text-body: #c4cfd3;
|
|
--text-muted: #88969c;
|
|
--text-on-accent: #0f1a17;
|
|
--border-subtle: #2a363c;
|
|
--border-strong: #38454c;
|
|
--border-focus: #6fb3a4;
|
|
--accent: #6fb3a4;
|
|
--accent-deep: #84c2b4;
|
|
--accent-tint: #1e2e2a;
|
|
--accent-bright: #6fb3a4;
|
|
--clay: #cc8f77;
|
|
--clay-deep: #e0aa92;
|
|
--clay-tint: #2b211e;
|
|
--focus-ring: rgba(111, 179, 164, 0.45);
|
|
|
|
--pos-text: #7fd0a0;
|
|
--pos-solid: #5fb682;
|
|
--pos-tint: #16271d;
|
|
--warn-text: #e2b566;
|
|
--warn-solid: #d4a24a;
|
|
--warn-tint: #2a2415;
|
|
--crit-text: #e89086;
|
|
--crit-solid: #d86459;
|
|
--crit-tint: #2a1715;
|
|
--info-text: #79b0d4;
|
|
--info-solid: #5c97be;
|
|
--info-tint: #15222c;
|
|
}
|
|
|
|
/* ── 역할별 accent 오버라이드 §6.2 ──
|
|
역할별 페이지를 다른 제품처럼 보이게 하지 않는다.
|
|
API role(learner/teacher/admin) → data-role 매핑은 유지하되, 기본 accent는 공통 세이지로 통일한다. */
|
|
[data-role="learner"] {
|
|
--accent: #3e7a6e;
|
|
--accent-deep: #316257;
|
|
--accent-bright: #5f968b;
|
|
--accent-tint: #eef4f2;
|
|
--focus-ring: rgba(62, 122, 110, 0.45);
|
|
}
|
|
[data-role="instructor"] {
|
|
--accent: #3e7a6e;
|
|
--accent-deep: #316257;
|
|
--accent-bright: #5f968b;
|
|
--accent-tint: #eef4f2;
|
|
--focus-ring: rgba(62, 122, 110, 0.45);
|
|
}
|
|
[data-role="admin"] {
|
|
--accent: #3e7a6e;
|
|
--accent-deep: #316257;
|
|
--accent-bright: #5f968b;
|
|
--accent-tint: #eef4f2;
|
|
--focus-ring: rgba(62, 122, 110, 0.45);
|
|
}
|
|
|
|
/* 다크 + 역할 동시 적용 시 accent 명도 보정 (가독) */
|
|
[data-theme="dark"] body[data-role="learner"] {
|
|
--accent: #6fb3a4;
|
|
--accent-deep: #84c2b4;
|
|
--accent-bright: #6fb3a4;
|
|
--accent-tint: #1e2e2a;
|
|
--focus-ring: rgba(111, 179, 164, 0.45);
|
|
}
|
|
[data-theme="dark"] body[data-role="instructor"],
|
|
[data-theme="dark"][data-role="instructor"] {
|
|
--accent: #6fb3a4;
|
|
--accent-deep: #84c2b4;
|
|
--accent-bright: #6fb3a4;
|
|
--accent-tint: #1e2e2a;
|
|
--focus-ring: rgba(111, 179, 164, 0.45);
|
|
}
|
|
[data-theme="dark"] body[data-role="admin"],
|
|
[data-theme="dark"][data-role="admin"] {
|
|
--accent: #6fb3a4;
|
|
--accent-deep: #84c2b4;
|
|
--accent-bright: #6fb3a4;
|
|
--accent-tint: #1e2e2a;
|
|
--focus-ring: rgba(111, 179, 164, 0.45);
|
|
}
|