327 lines
12 KiB
CSS
327 lines
12 KiB
CSS
/* =============================================================================
|
|
* ui_template_theme.css
|
|
* 글로벌 디자인 테마 및 CSS 변수 (라이트/다크)
|
|
*
|
|
* 출처: .agent/design.md — "Wiza" 스타일 레퍼런스
|
|
* 원칙:
|
|
* - 모든 색상/간격/폰트는 이 파일의 CSS 변수(var(--...))로만 참조.
|
|
* - 하드코딩된 Hex/px 값을 컴포넌트에 직접 입력 금지 (frontend.md §1).
|
|
* - 8px radius가 시그니처. pill/tag만 --radius-pills 사용.
|
|
* ========================================================================== */
|
|
|
|
:root {
|
|
/* ---------------------------------------------------------------------------
|
|
* 1. 색상 토큰 (Colors) — 바이올렛 단색 팔레트
|
|
* ------------------------------------------------------------------------ */
|
|
--color-deep-iris: #26114a; /* 헤드라인, filled 버튼 배경 (24px 이하) */
|
|
--color-plum-velvet: #312749; /* 네비 텍스트, 보조 제목, 카드 타이틀 */
|
|
--color-royal-amethyst: #3e0079; /* 링크, 포커스 링, 아이콘 하이라이트 */
|
|
--color-mist-violet: #edecff; /* 소프트 하이라이트 배경, 태그 배경 */
|
|
--color-lavender-wash: #b99aff; /* 그라디언트 스톱, 히어로 분위기 */
|
|
--color-twilight-beam: #cf8aff; /* 멀티스톱 장식 그라디언트 시작색 */
|
|
|
|
/* 중립 (Neutrals) */
|
|
--color-canvas: #ffffff; /* 페이지 배경, 카드 표면, 입력 필드 */
|
|
--color-paper: #f6f7fa; /* 미묘한 표면 리프트, 테이블 교차행 */
|
|
--color-mist: #e6e2e3; /* 헤어라인 보더, 구분선 */
|
|
--color-smoke: #c1c7cf; /* 비활성 상태, 스켈레톤 플레이스홀더 */
|
|
--color-ash: #9491a1; /* 뮤트 헬퍼 텍스트, placeholder */
|
|
--color-slate: #615e6e; /* 보조 본문 텍스트, 설명 */
|
|
--color-charcoal: #333333; /* 본문 텍스트, 링크, 아이콘 스트로크 */
|
|
--color-carbon: #222222; /* 다크 UI 요소, 니어블랙 액센트 */
|
|
--color-ink: #000000; /* 최대 대비 텍스트/보더 */
|
|
|
|
/* 상태 색상 (Status) — 바이올렛 계열 유지, 필수 기능색만 최소 추가 */
|
|
--color-success: #1f8a4c; /* 성공/승인 */
|
|
--color-warning: #b8860b; /* 경고 (design.md 별색 #f5b800 계열) */
|
|
--color-danger: #c0392b; /* 에러/삭제 */
|
|
--color-info: var(--color-royal-amethyst);
|
|
|
|
/* 그라디언트 (Gradient System) — 항상 흰 표면 뒤에만 배치, 텍스트 직상단 금지 */
|
|
--gradient-lavender-wash: linear-gradient(
|
|
90deg,
|
|
rgb(185, 154, 255),
|
|
rgb(125, 67, 255) 10%,
|
|
rgba(125, 67, 255, 0)
|
|
);
|
|
--gradient-twilight-beam: linear-gradient(
|
|
to right,
|
|
rgb(207, 138, 255),
|
|
rgb(255, 102, 193),
|
|
rgb(255, 173, 116),
|
|
rgb(170, 129, 255)
|
|
);
|
|
--gradient-section-tint: linear-gradient(
|
|
to bottom,
|
|
var(--color-canvas),
|
|
var(--color-mist-violet)
|
|
);
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 2. 의미 기반 별칭 (Semantic Aliases)
|
|
* 컴포넌트는 가급적 아래 별칭을 사용해 라이트/다크 전환에 대응.
|
|
* ------------------------------------------------------------------------ */
|
|
--color-bg: var(--color-canvas); /* 페이지 배경 */
|
|
--color-surface: var(--color-paper); /* 카드/패널 표면 */
|
|
--color-surface-raised: var(--color-canvas); /* 떠 있는 표면 */
|
|
--color-border: var(--color-mist); /* 기본 보더 */
|
|
--color-text: var(--color-deep-iris); /* 기본 본문 (제목 강조) */
|
|
--color-text-body: var(--color-charcoal); /* 일반 본문 */
|
|
--color-text-secondary: var(--color-slate); /* 보조 텍스트 */
|
|
--color-text-muted: var(--color-ash); /* 뮤트/placeholder */
|
|
--color-primary: var(--color-deep-iris); /* 주 액션 배경 */
|
|
--color-primary-text: var(--color-canvas); /* 주 액션 위 텍스트 */
|
|
--color-accent: var(--color-royal-amethyst); /* 링크/액센트 */
|
|
--color-focus-ring: var(--color-royal-amethyst);
|
|
|
|
/* 차트 시리즈 색상 (CPU/메모리/디스크 등 구분용) */
|
|
--color-chart-0: #5b8def; /* 파랑 — CPU */
|
|
--color-chart-1: #34c38f; /* 초록 — 메모리 */
|
|
--color-chart-2: #f1963b; /* 주황 — 디스크 */
|
|
--color-chart-3: #9b6dde; /* 보라 — 예비 */
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 3. 타이포그래피 (Typography)
|
|
* ------------------------------------------------------------------------ */
|
|
/* 폰트 패밀리 — 한글은 Noto Sans KR 우선 (resources/fonts) */
|
|
--font-display:
|
|
"Britti Sans", "Plus Jakarta Sans", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system,
|
|
"Segoe UI", Roboto, sans-serif;
|
|
--font-body:
|
|
"Inter", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
--font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;
|
|
|
|
/* 스케일 (px 고정 — design.md 명세) */
|
|
--text-caption: 12px;
|
|
--leading-caption: 1.3;
|
|
--text-body-sm: 14px;
|
|
--leading-body-sm: 1.4;
|
|
--text-body: 16px;
|
|
--leading-body: 1.5;
|
|
--text-subheading: 24px;
|
|
--leading-subheading: 1;
|
|
--text-heading-sm: 32px;
|
|
--leading-heading-sm: 1;
|
|
--text-heading: 40px;
|
|
--leading-heading: 1;
|
|
--text-heading-lg: 56px;
|
|
--leading-heading-lg: 1;
|
|
--text-display: 64px;
|
|
--leading-display: 1;
|
|
|
|
/* 굵기 */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 4. 간격 (Spacing) — 8px 기반, compact density
|
|
* ------------------------------------------------------------------------ */
|
|
--spacing-unit: 8px;
|
|
--spacing-4: 4px; /* pill/tag 세로 패딩용 하프 유닛 */
|
|
--spacing-8: 8px;
|
|
--spacing-16: 16px;
|
|
--spacing-24: 24px;
|
|
--spacing-32: 32px;
|
|
--spacing-40: 40px;
|
|
--spacing-48: 48px;
|
|
--spacing-56: 56px;
|
|
--spacing-64: 64px;
|
|
--spacing-96: 96px;
|
|
--spacing-104: 104px;
|
|
--spacing-216: 216px;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 5. 보더 반경 (Border Radius) — 8px 시그니처
|
|
* ------------------------------------------------------------------------ */
|
|
--radius-sm: 2px;
|
|
--radius-lg: 8px; /* 카드/버튼/입력/아이콘 = 시그니처 */
|
|
--radius-xl: 12px;
|
|
--radius-2xl: 16px;
|
|
--radius-3xl: 24px; /* large 컨테이너 */
|
|
--radius-pills: 1440px; /* pill/tag/캡슐 네비 전용 */
|
|
|
|
--radius-cards: var(--radius-lg);
|
|
--radius-buttons: var(--radius-lg);
|
|
--radius-inputs: var(--radius-lg);
|
|
--radius-icons: var(--radius-lg);
|
|
--radius-large: var(--radius-3xl);
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity)
|
|
* ------------------------------------------------------------------------ */
|
|
--shadow-sm:
|
|
rgba(18, 55, 105, 0.08) 0px 2px 4px 0px, rgba(18, 55, 105, 0.04) 0px 1px 1px 0px,
|
|
rgba(18, 55, 105, 0.08) 0px 0px 0px 1px;
|
|
--shadow-lg:
|
|
rgba(14, 59, 101, 0.06) 0px 32px 24px -12px, rgba(14, 59, 101, 0.01) 0px 11px 4px 0px,
|
|
rgba(14, 59, 101, 0.02) 0px 6px 4px 0px, rgba(14, 59, 101, 0.03) 0px 3px 3px 0px,
|
|
rgba(14, 59, 101, 0.04) 0px 1px 1px 0px;
|
|
--shadow-feature:
|
|
rgba(114, 49, 255, 0.32) 0px -6px 20px 0px inset, rgba(47, 1, 151, 0.12) 0px 11px 12px 0px,
|
|
rgba(47, 1, 151, 0.12) 0px 3px 3px 0px, rgba(47, 1, 151, 0.12) 0px 1px 1px 0px,
|
|
rgba(47, 1, 151, 0.08) 0px 0px 0px 1px;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 7. 레이아웃 (Layout)
|
|
* ------------------------------------------------------------------------ */
|
|
--page-max-width: 1200px;
|
|
--section-gap: 64px;
|
|
--card-padding: 24px;
|
|
--element-gap: 8px;
|
|
|
|
/* 워크플로우 3단 레이아웃 (frontend.md §2) */
|
|
--wf-header-height: 56px; /* 상단: 타이틀 + 진행 단계 */
|
|
--wf-left-panel-width: 320px; /* 좌측: 입력 폼 (너비 고정) */
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* 8. 상호작용 (Motion & Z-index)
|
|
* ------------------------------------------------------------------------ */
|
|
--transition-fast: 120ms ease;
|
|
--transition-base: 200ms ease;
|
|
|
|
--z-header: 100;
|
|
--z-dropdown: 200;
|
|
--z-overlay: 900;
|
|
--z-modal: 1000;
|
|
--z-toast: 1100;
|
|
}
|
|
|
|
/* =============================================================================
|
|
* 다크 모드 (Dark) — 라이트 우선 브랜드이나 CAD 뷰어 야간 작업 대응
|
|
* design.md는 light 브랜드이므로, 다크는 중립 표면을 어둡게 반전하고
|
|
* 바이올렛 액센트는 명도를 올려 대비 확보.
|
|
* ========================================================================== */
|
|
:root[data-theme="dark"] {
|
|
--color-canvas: #16121f;
|
|
--color-paper: #1e1930;
|
|
--color-mist: #322a45;
|
|
--color-smoke: #4a4160;
|
|
--color-ash: #8b86a0;
|
|
--color-slate: #b3aec6;
|
|
--color-charcoal: #e4e0f0;
|
|
--color-carbon: #f0edf8;
|
|
--color-ink: #ffffff;
|
|
|
|
--color-deep-iris: #d8ccff;
|
|
--color-plum-velvet: #c4b8e6;
|
|
--color-royal-amethyst: #b99aff;
|
|
--color-mist-violet: #2a2140;
|
|
|
|
--color-bg: var(--color-canvas);
|
|
--color-surface: var(--color-paper);
|
|
--color-surface-raised: #251f38;
|
|
--color-border: var(--color-mist);
|
|
--color-text: var(--color-deep-iris);
|
|
--color-text-body: var(--color-charcoal);
|
|
--color-text-secondary: var(--color-slate);
|
|
--color-text-muted: var(--color-ash);
|
|
--color-primary: var(--color-royal-amethyst);
|
|
--color-primary-text: #16121f;
|
|
--color-accent: var(--color-lavender-wash);
|
|
--color-focus-ring: var(--color-lavender-wash);
|
|
|
|
--color-success: #3fbb6f;
|
|
--color-warning: #e0b64a;
|
|
--color-danger: #e8695a;
|
|
|
|
--shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
|
|
--shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
|
|
}
|
|
|
|
/* 시스템 설정 기반 자동 다크 (사용자가 명시적으로 data-theme를 안 준 경우) */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) {
|
|
--color-canvas: #16121f;
|
|
--color-paper: #1e1930;
|
|
--color-mist: #322a45;
|
|
--color-smoke: #4a4160;
|
|
--color-ash: #8b86a0;
|
|
--color-slate: #b3aec6;
|
|
--color-charcoal: #e4e0f0;
|
|
--color-carbon: #f0edf8;
|
|
--color-ink: #ffffff;
|
|
|
|
--color-deep-iris: #d8ccff;
|
|
--color-plum-velvet: #c4b8e6;
|
|
--color-royal-amethyst: #b99aff;
|
|
--color-mist-violet: #2a2140;
|
|
|
|
--color-bg: var(--color-canvas);
|
|
--color-surface: var(--color-paper);
|
|
--color-surface-raised: #251f38;
|
|
--color-border: var(--color-mist);
|
|
--color-text: var(--color-deep-iris);
|
|
--color-text-body: var(--color-charcoal);
|
|
--color-text-secondary: var(--color-slate);
|
|
--color-text-muted: var(--color-ash);
|
|
--color-primary: var(--color-royal-amethyst);
|
|
--color-primary-text: #16121f;
|
|
--color-accent: var(--color-lavender-wash);
|
|
--color-focus-ring: var(--color-lavender-wash);
|
|
}
|
|
}
|
|
|
|
/* =============================================================================
|
|
* 기본 리셋 및 문서 스타일
|
|
* ========================================================================== */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-bg);
|
|
color: var(--color-text-body);
|
|
font-family: var(--font-body);
|
|
font-size: var(--text-body);
|
|
line-height: var(--leading-body);
|
|
font-weight: var(--font-weight-regular);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
font-family: var(--font-display);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text);
|
|
line-height: 1;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-heading);
|
|
}
|
|
h2 {
|
|
font-size: var(--text-heading-sm);
|
|
}
|
|
h3 {
|
|
font-size: var(--text-subheading);
|
|
}
|
|
|
|
a {
|
|
color: var(--color-accent);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-focus-ring);
|
|
outline-offset: 2px;
|
|
}
|