dnlee
d07bd3e0f1
- bg/stroke/fg grayscale을 쿨톤으로 전환 (#121418, #24272D 등) - Primary #0099DD + Red #D61111 + Yellow #FEDA4A 적용 - ColorPaletteContent 디자인 페이지 값 동기화 - CLAUDE.md 완료된 진행 중 작업 섹션 제거
268 lines
7.0 KiB
CSS
268 lines
7.0 KiB
CSS
/* ── PretendardGOV @font-face ── */
|
|
@font-face {
|
|
font-family: 'PretendardGOV';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url('/fonts/PretendardGOV-Regular.otf') format('opentype');
|
|
}
|
|
@font-face {
|
|
font-family: 'PretendardGOV';
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url('/fonts/PretendardGOV-Medium.otf') format('opentype');
|
|
}
|
|
@font-face {
|
|
font-family: 'PretendardGOV';
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url('/fonts/PretendardGOV-SemiBold.otf') format('opentype');
|
|
}
|
|
@font-face {
|
|
font-family: 'PretendardGOV';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: url('/fonts/PretendardGOV-Bold.otf') format('opentype');
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
/* bg — Background */
|
|
--bg-base: #121418;
|
|
--bg-surface: #1B1E23;
|
|
--bg-elevated: #24272D;
|
|
--bg-card: #24272D;
|
|
--bg-surface-hover: #3A3F49;
|
|
/* stroke — Border */
|
|
--stroke-default: #24272D;
|
|
--stroke-light: #1B1E23;
|
|
/* fg — Foreground */
|
|
--fg-default: #F8F9FC;
|
|
--fg-sub: #B9C1C9;
|
|
--fg-disabled: #808892;
|
|
/* color — Palette */
|
|
--color-info: #0099DD;
|
|
--color-accent: #0099DD;
|
|
--color-accent-muted: #007AB1;
|
|
--color-danger: #D61111;
|
|
--color-warning: #f97316;
|
|
--color-caution: #FEDA4A;
|
|
--color-success: #22c55e;
|
|
--color-tertiary: #a855f7;
|
|
--color-boom: #f59e0b;
|
|
--color-boom-hover: #fbbf24;
|
|
--color-navy: #1e40af;
|
|
--color-navy-hover: #1d4ed8;
|
|
/* font */
|
|
--font-korean:
|
|
'PretendardGOV', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
|
|
'Pretendard Variable', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic',
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
|
|
--font-mono:
|
|
'PretendardGOV', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
|
|
'Pretendard Variable', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic',
|
|
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
|
|
/* radius */
|
|
--radius-sm: 6px;
|
|
--radius-md: 8px;
|
|
|
|
/* typography — font-size */
|
|
--font-size-display-1: 3.75rem;
|
|
--font-size-display-2: 2.5rem;
|
|
--font-size-display-3: 2.25rem;
|
|
--font-size-heading-1: 2rem;
|
|
--font-size-heading-2: 1.5rem;
|
|
--font-size-heading-3: 1.375rem;
|
|
--font-size-title-1: 1.125rem;
|
|
--font-size-subtitle: 0.9375rem;
|
|
--font-size-title-2: 1rem;
|
|
--font-size-title-3: 1rem;
|
|
--font-size-title-4: 0.875rem;
|
|
--font-size-title-5: 0.8125rem;
|
|
--font-size-title-6: 0.75rem;
|
|
--font-size-body-1: 1rem;
|
|
--font-size-body-2: 0.875rem;
|
|
--font-size-label-1: 0.8125rem;
|
|
--font-size-label-2: 0.75rem;
|
|
--font-size-caption: 0.75rem;
|
|
/* typography — font-weight */
|
|
--font-weight-thin: 300;
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 700;
|
|
/* typography — line-height */
|
|
--line-height-tight: 1.3;
|
|
--line-height-snug: 1.4;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.6;
|
|
/* typography — letter-spacing */
|
|
--letter-spacing-display: 0.06em;
|
|
--letter-spacing-heading: 0.02em;
|
|
--letter-spacing-body: 0em;
|
|
--letter-spacing-navigation: 0.02em;
|
|
--letter-spacing-label: 0.04em;
|
|
|
|
/* === Design Token System === */
|
|
|
|
/* Static */
|
|
--static-black: #131415;
|
|
--static-white: #ffffff;
|
|
|
|
/* Gray (Definition cool-tone, 15 steps) */
|
|
--gray-0: #FFFFFF;
|
|
--gray-50: #F8F9FC;
|
|
--gray-100: #F3F6FB;
|
|
--gray-200: #EBEFF5;
|
|
--gray-250: #E1E6EC;
|
|
--gray-300: #D6DBE1;
|
|
--gray-400: #B9C1C9;
|
|
--gray-500: #808892;
|
|
--gray-550: #6C747E;
|
|
--gray-600: #565B64;
|
|
--gray-700: #3A3F49;
|
|
--gray-800: #24272D;
|
|
--gray-850: #1B1E23;
|
|
--gray-900: #121418;
|
|
--gray-1000: #000000;
|
|
|
|
/* Blue (Primary Blue-Cyan, hue ~200°) */
|
|
--blue-100: #E6F4FB;
|
|
--blue-200: #B3E0F5;
|
|
--blue-300: #80CCEE;
|
|
--blue-400: #4DB8E8;
|
|
--blue-500: #0099DD;
|
|
--blue-600: #007AB1;
|
|
--blue-700: #005C85;
|
|
--blue-800: #003D59;
|
|
--blue-900: #001F2D;
|
|
--blue-1000: #001520;
|
|
|
|
/* Green */
|
|
--green-100: #dcfce7;
|
|
--green-200: #bbf7d0;
|
|
--green-300: #86efac;
|
|
--green-400: #4ade80;
|
|
--green-500: #22c55e;
|
|
--green-600: #16a34a;
|
|
--green-700: #15803d;
|
|
--green-800: #166534;
|
|
--green-900: #14532d;
|
|
--green-1000: #052e16;
|
|
|
|
/* Yellow */
|
|
--yellow-100: #fef9c3;
|
|
--yellow-200: #fef08a;
|
|
--yellow-300: #fde047;
|
|
--yellow-400: #facc15;
|
|
--yellow-500: #FEDA4A;
|
|
--yellow-600: #ca8a04;
|
|
--yellow-700: #a16207;
|
|
--yellow-800: #854d0e;
|
|
--yellow-900: #713f12;
|
|
--yellow-1000: #422006;
|
|
|
|
/* Red */
|
|
--red-100: #7A2D2D;
|
|
--red-200: #fecaca;
|
|
--red-300: #fca5a5;
|
|
--red-400: #f87171;
|
|
--red-500: #DE4141;
|
|
--red-600: #D61111;
|
|
--red-700: #b91c1c;
|
|
--red-800: #991b1b;
|
|
--red-900: #7f1d1d;
|
|
--red-1000: #450a0a;
|
|
|
|
/* Purple */
|
|
--purple-100: #f3e8ff;
|
|
--purple-200: #e9d5ff;
|
|
--purple-300: #d8b4fe;
|
|
--purple-400: #c084fc;
|
|
--purple-500: #a855f7;
|
|
--purple-600: #9333ea;
|
|
--purple-700: #7e22ce;
|
|
--purple-800: #6b21a8;
|
|
--purple-900: #581c87;
|
|
--purple-1000: #3b0764;
|
|
/* hover overlay */
|
|
--hover-overlay: rgba(255, 255, 255, 0.06);
|
|
--dropdown-bg: rgba(18, 25, 41, 0.97);
|
|
}
|
|
|
|
/* ── Light theme overrides ── */
|
|
[data-theme='light'] {
|
|
--bg-base: #FFFFFF;
|
|
--bg-surface: #FFFFFF;
|
|
--bg-elevated: #F3F6FB;
|
|
--bg-card: #FFFFFF;
|
|
--bg-surface-hover: #EBEFF5;
|
|
--stroke-default: #B9C1C9;
|
|
--stroke-light: #E1E6EC;
|
|
--fg-default: #121418;
|
|
--fg-sub: #24272D;
|
|
--fg-disabled: #808892;
|
|
--hover-overlay: rgba(0, 0, 0, 0.04);
|
|
--dropdown-bg: rgba(255, 255, 255, 0.97);
|
|
--color-accent-muted: #007AB1;
|
|
--color-navy: #1d4ed8;
|
|
--color-navy-hover: #2563eb;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
'PretendardGOV',
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Apple SD Gothic Neo',
|
|
'Pretendard Variable',
|
|
Pretendard,
|
|
Roboto,
|
|
'Noto Sans KR',
|
|
'Segoe UI',
|
|
'Malgun Gothic',
|
|
'Apple Color Emoji',
|
|
'Segoe UI Emoji',
|
|
'Segoe UI Symbol',
|
|
sans-serif;
|
|
background: var(--bg-base);
|
|
color: var(--fg-default);
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
font-weight: 400;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
/* Date input calendar icon — white for dark theme */
|
|
input[type='date']::-webkit-calendar-picker-indicator {
|
|
filter: invert(1);
|
|
cursor: pointer;
|
|
opacity: 0.7;
|
|
}
|
|
input[type='date']::-webkit-calendar-picker-indicator:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Light theme: calendar icon reset */
|
|
[data-theme='light'] input[type='date']::-webkit-calendar-picker-indicator {
|
|
filter: none;
|
|
}
|
|
|
|
/* Light theme: invert white logos */
|
|
[data-theme='light'] .wing-logo {
|
|
filter: brightness(0) saturate(100%);
|
|
}
|
|
}
|