/* ============================================================ variables.css - CSS 변수 (디자인 토큰) 설명: 사이트 전체에서 사용하는 색상, 폰트, 간격 등을 변수로 정의합니다. 디자인을 변경할 때 이 파일만 수정하면 전체 사이트에 반영됩니다. 사용법: var(--변수이름) 예시: color: var(--color-primary); ============================================================ */ :root { /* ────────────────────────────────────── 주요 색상 (Primary Colors) ────────────────────────────────────── */ --color-dark-navy: #1a2332; /* 헤더, 푸터, 어두운 배경 */ --color-ice-blue: #0078d4; /* 강조색, 버튼, 링크 */ --color-white: #ffffff; /* 흰색 텍스트, 카드 배경 */ --color-light-gray: #f5f7fa; /* 밝은 섹션 배경 */ /* ────────────────────────────────────── 보조 색상 (Secondary Colors) ────────────────────────────────────── */ --color-cool-gray: #6c757d; /* 보조 텍스트 */ --color-deep-blue: #004a8f; /* 버튼 호버 상태 */ --color-text-dark: #333333; /* 기본 텍스트 */ --color-text-light: #adb5bd; /* 밝은 텍스트 (다크 배경 위) */ --color-border: #dee2e6; /* 테두리 색 */ --color-orange: #ff6b35; /* CTA 강조 버튼 */ --color-success: #28a745; /* 성공 메시지 */ --color-error: #dc3545; /* 에러 메시지 */ /* ────────────────────────────────────── 테마 전용 변수 (다크/라이트 전환용) ────────────────────────────────────── */ --color-body-bg: #ffffff; /* 페이지 배경 */ --color-card-bg: #ffffff; /* 카드 배경 */ --color-dropdown-bg: #ffffff; /* 드롭다운 배경 */ --color-section-gray-bg: #f5f7fa; /* 회색 섹션 배경 */ --color-header-bg: #1a2332; /* 헤더 배경 */ --color-header-scroll-bg: rgba(26, 35, 50, 0.98); /* 스크롤 시 헤더 */ --color-footer-bg: #1a2332; /* 푸터 배경 */ --color-input-bg: #ffffff; /* 입력 필드 배경 */ --color-input-border: #dee2e6; /* 입력 필드 테두리 */ --color-stat-num: #0078d4; /* 통계 숫자 색 */ --color-inline-heading: #1a2332; /* 인라인 소제목 색 */ --color-inline-sub: #6c757d; /* 인라인 보조 텍스트 */ /* ────────────────────────────────────── 폰트 설정 ────────────────────────────────────── */ --font-main: 'Noto Sans KR', 'Roboto', Arial, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ────────────────────────────────────── 폰트 크기 ────────────────────────────────────── */ --font-size-hero: 48px; /* 히어로 제목 */ --font-size-h2: 36px; /* 섹션 제목 */ --font-size-h3: 24px; /* 카드 제목 */ --font-size-h4: 20px; /* 소제목 */ --font-size-body: 16px; /* 본문 */ --font-size-caption: 14px; /* 캡션, 작은 텍스트 */ --font-size-small: 12px; /* 아주 작은 텍스트 */ /* ────────────────────────────────────── 간격 (Spacing) ────────────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 48px; --space-xxl: 80px; /* ────────────────────────────────────── 레이아웃 ────────────────────────────────────── */ --max-width: 1200px; /* 콘텐츠 최대 너비 */ --header-height: 70px; /* 헤더 높이 */ --border-radius: 8px; /* 기본 둥근 모서리 */ --border-radius-sm: 4px; /* 작은 둥근 모서리 */ /* ────────────────────────────────────── 그림자 (Shadows) ────────────────────────────────────── */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15); /* ────────────────────────────────────── 애니메이션 ────────────────────────────────────── */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease-in-out; } /* ============================================================ 다크 모드 (Dark Mode) 설명: [data-theme="dark"]가 태그에 추가되면 아래 색상들이 적용됩니다. JS에서 토글 버튼 클릭 시 data-theme 속성을 변경합니다. ============================================================ */ [data-theme="dark"] { /* 주요 색상 오버라이드 */ --color-dark-navy: #0d1117; --color-white: #161b22; --color-light-gray: #0d1117; --color-text-dark: #e1e4e8; --color-cool-gray: #8b949e; --color-text-light: #8b949e; --color-border: #30363d; --color-deep-blue: #1a8cff; /* 테마 전용 변수 오버라이드 */ --color-body-bg: #0d1117; --color-card-bg: #161b22; --color-dropdown-bg: #1c2128; --color-section-gray-bg: #111820; --color-header-bg: #010409; --color-header-scroll-bg: rgba(1, 4, 9, 0.98); --color-footer-bg: #010409; --color-input-bg: #0d1117; --color-input-border: #30363d; --color-stat-num: #58a6ff; --color-inline-heading: #e1e4e8; --color-inline-sub: #8b949e; /* 그림자 - 다크 모드에서 더 강하게 */ --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); }