/** * CSS Variables (Custom Properties) * t x ܤ\ * * t |@  t  , t<, * , `TtX X x pD Xi. */ :root { /* ===================================  (Color Palette) =================================== */ /* $(L) 0 */ --color-wood: #7B9E89; /* (() - (\ y */ --color-fire: #D4736A; /* T(k) - @ */ --color-earth: #C8A882; /* () - 0;\  */ --color-metal: #A8A5A0; /* () - @@\ */ --color-water: #6B8CAE; /* (4) - J@ xx */ /* 0 */ --color-bg-primary: #FAF8F5; /* 0 - */ --color-bg-secondary: #F5F2ED; /* p 0 - \ t */ --color-bg-tertiary: #FFFFFF; /* t 0 - p */ --color-bg-overlay: rgba(0, 0, 0, 0.5); /* $t 0 */ /* M */ --color-text-primary: #3A3A3A; /* M */ --color-text-secondary: #6B6B6B; /* p M */ --color-text-tertiary: #999999; /* M */ --color-text-inverse: #FFFFFF; /*  M */ /* p  */ --color-accent: #E6B655; /*  p */ --color-accent-hover: #D4A043; /* p 8 */ --color-success: #7B9E89; /* 1 T */ --color-warning: #E6B655; /* T */ --color-error: #D4736A; /* $X T */ --color-info: #6B8CAE; /*  T */ /* LP */ --color-border: #E0E0E0; /* 0 LP */ --color-border-light: #F0F0F0; /* \ LP */ --color-border-dark: #C0C0C0; /* \ LP */ /* */ --color-shadow: rgba(0, 0, 0, 0.1); /* 0 */ --color-shadow-dark: rgba(0, 0, 0, 0.2); /* \ */ /* =================================== t< (Typography) =================================== */ /* ( */ --font-heading: 'Nanum Myeongjo', 'p', serif; /*  */ --font-body: 'Noto Sans KR', 'KoPubWorld', sans-serif; /* 8 */ --font-mono: 'Consolas', 'Monaco', monospace; /*  */ /* l0 */ --text-xs: 0.75rem; /* 12px - @ M */ --text-sm: 0.875rem; /* 14px - @ M */ --text-base: 1rem; /* 16px - 0 M */ --text-lg: 1.125rem; /* 18px - p M */ --text-xl: 1.25rem; /* 20px - p M */ --text-2xl: 1.5rem; /* 24px -  */ --text-3xl: 1.875rem; /* 30px -  */ --text-4xl: 2.25rem; /* 36px -  */ --text-5xl: 3rem; /* 48px -  */ /* u0 */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /*  t */ --line-height-tight: 1.25; /* @   */ --line-height-normal: 1.5; /* 0   */ --line-height-relaxed: 1.75; /* @   */ --line-height-loose: 2; /* @   */ /*  */ --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; --letter-spacing-wider: 0.05em; --letter-spacing-widest: 0.1em; /* ===================================  ܤ\ (Spacing System) =================================== */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.5rem; /* 8px */ --spacing-md: 1rem; /* 16px */ --spacing-lg: 1.5rem; /* 24px */ --spacing-xl: 2rem; /* 32px */ --spacing-2xl: 3rem; /* 48px */ --spacing-3xl: 4rem; /* 64px */ --spacing-4xl: 6rem; /* 96px */ /* =================================== tD (Layout) =================================== */ /* Lt D */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* tlx */ --breakpoint-sm: 640px; /* | */ --breakpoint-md: 768px; /*  */ --breakpoint-lg: 1024px; /* pl */ --breakpoint-xl: 1280px; /* @t l */ /* =================================== LP  (Border Radius) =================================== */ --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-md: 0.25rem; /* 4px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-3xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* D e */ /* =================================== (Shadows) =================================== */ --shadow-sm: 0 1px 2px 0 var(--color-shadow); --shadow-md: 0 4px 6px -1px var(--color-shadow); --shadow-lg: 0 10px 15px -3px var(--color-shadow); --shadow-xl: 0 20px 25px -5px var(--color-shadow); --shadow-2xl: 0 25px 50px -12px var(--color-shadow-dark); --shadow-inner: inset 0 2px 4px 0 var(--color-shadow); --shadow-none: none; /* =================================== `TtX (Animation) =================================== */ /*  */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 700ms; /* t h */ --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* =================================== Z-xq (Z-Index) =================================== */ --z-negative: -1; --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --z-auto: auto; --z-modal: 1000; --z-popover: 1100; --z-tooltip: 1200; --z-notification: 1300; } /* =================================== l  (Dark Mode Variables) =================================== */ @media (prefers-color-scheme: dark) { :root { /* l $|t */ --color-bg-primary: #1A1A1A; --color-bg-secondary: #2A2A2A; --color-bg-tertiary: #3A3A3A; --color-text-primary: #E0E0E0; --color-text-secondary: #A0A0A0; --color-border: #404040; --color-border-light: #303030; --color-border-dark: #505050; } } /* =================================== Q l0 (Responsive Font Sizes) =================================== */ @media (max-width: 768px) { :root { /* | l0 p */ --text-base: 0.875rem; /* 14px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ --text-4xl: 1.875rem; /* 30px */ --text-5xl: 2.25rem; /* 36px */ } } /* =================================== CSS  (Utility Variables) =================================== */ :root { /*  pi */ --card-shadow: var(--shadow-md); --card-radius: var(--radius-lg); --card-padding: var(--spacing-lg); --card-bg: var(--color-bg-tertiary); --button-radius: var(--radius-md); --button-padding-x: var(--spacing-lg); --button-padding-y: var(--spacing-sm); --input-radius: var(--radius-md); --input-padding-x: var(--spacing-md); --input-padding-y: var(--spacing-sm); --input-border: 1px solid var(--color-border); --section-padding-y: var(--spacing-4xl); --section-padding-x: var(--spacing-lg); }