263 lines
6.9 KiB
CSS
263 lines
6.9 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: #0a0e1a;
|
|
--bg-surface: #0f1524;
|
|
--bg-elevated: #121929;
|
|
--bg-card: #1a2236;
|
|
--bg-surface-hover: #1e2844;
|
|
/* stroke — Border */
|
|
--stroke-default: #1e2a42;
|
|
--stroke-light: #2a3a5c;
|
|
/* fg — Foreground */
|
|
--fg-default: #edf0f7;
|
|
--fg-sub: #c0c8dc;
|
|
--fg-disabled: #9ba3b8;
|
|
/* color — Palette */
|
|
--color-info: #3b82f6;
|
|
--color-accent: #06b6d4;
|
|
--color-accent-muted: #0e7490;
|
|
--color-danger: #ef4444;
|
|
--color-warning: #f97316;
|
|
--color-caution: #eab308;
|
|
--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: 0.875rem;
|
|
--font-size-title-4: 0.8125rem;
|
|
--font-size-title-5: 0.75rem;
|
|
--font-size-title-6: 0.6875rem;
|
|
--font-size-body-1: 0.875rem;
|
|
--font-size-body-2: 0.8125rem;
|
|
--font-size-label-1: 0.75rem;
|
|
--font-size-label-2: 0.6875rem;
|
|
--font-size-caption: 0.6875rem;
|
|
/* 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 */
|
|
--gray-100: #f1f5f9;
|
|
--gray-200: #e2e8f0;
|
|
--gray-300: #cbd5e1;
|
|
--gray-400: #94a3b8;
|
|
--gray-500: #64748b;
|
|
--gray-600: #475569;
|
|
--gray-700: #334155;
|
|
--gray-800: #1e293b;
|
|
--gray-900: #0f172a;
|
|
--gray-1000: #020617;
|
|
|
|
/* Blue */
|
|
--blue-100: #dbeafe;
|
|
--blue-200: #bfdbfe;
|
|
--blue-300: #93c5fd;
|
|
--blue-400: #60a5fa;
|
|
--blue-500: #3b82f6;
|
|
--blue-600: #2563eb;
|
|
--blue-700: #1d4ed8;
|
|
--blue-800: #1e40af;
|
|
--blue-900: #1e3a8a;
|
|
--blue-1000: #172554;
|
|
|
|
/* 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: #eab308;
|
|
--yellow-600: #ca8a04;
|
|
--yellow-700: #a16207;
|
|
--yellow-800: #854d0e;
|
|
--yellow-900: #713f12;
|
|
--yellow-1000: #422006;
|
|
|
|
/* Red */
|
|
--red-100: #fee2e2;
|
|
--red-200: #fecaca;
|
|
--red-300: #fca5a5;
|
|
--red-400: #f87171;
|
|
--red-500: #ef4444;
|
|
--red-600: #dc2626;
|
|
--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: #f8fafc;
|
|
--bg-surface: #ffffff;
|
|
--bg-elevated: #f1f5f9;
|
|
--bg-card: #ffffff;
|
|
--bg-surface-hover: #e2e8f0;
|
|
--stroke-default: #cbd5e1;
|
|
--stroke-light: #e2e8f0;
|
|
--fg-default: #0f172a;
|
|
--fg-sub: #475569;
|
|
--fg-disabled: #94a3b8;
|
|
--hover-overlay: rgba(0, 0, 0, 0.04);
|
|
--dropdown-bg: rgba(255, 255, 255, 0.97);
|
|
--color-accent-muted: #0891b2;
|
|
--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%);
|
|
}
|
|
}
|