/* 기본 (라이트 모드) 색상 정의 */ :root { --color-primary: #007bff; /* 주 색상 */ --color-text: #212121; /* 텍스트 색상 (어둡게) */ --color-text-subtle: #6c757d; /* 보조 텍스트 */ --color-background-page: #eeeeee; /* 페이지 배경 (밝게) */ --color-background-light: #f8f8f8; /* 헤더 배경 (약간 밝게) */ --color-background-light2: #fafafa; --color-border: #cccccc; /* 경계선 (밝은 회색) */ --color-border-subtle: #e0e0e0; /* 보조 경계선 */ } /* 2. 다크 모드 색상 재정의 (시스템 설정 감지) */ @media (prefers-color-scheme: dark) { :root { --color-primary: #8cb4ff; --color-text: #e0e0e0; --color-text-subtle: #a0a0a0; --color-background-page: #121212; --color-background-light: #1e1e1e; --color-background-light2: #2f2f2f; --color-border: #444444; --color-border-subtle: #3a3a3a; } } /* 3. 수동 다크/라이트 모드 재정의 클래스 */ html.dark-mode { --color-primary: #8cb4ff; --color-text: #e0e0e0; --color-text-subtle: #a0a0a0; --color-background-page: #121212; --color-background-light: #1e1e1e; --color-background-light2: #2f2f2f; --color-border: #444444; --color-border-subtle: #3a3a3a; } html.light-mode { --color-primary: #007bff; --color-text: #212121; --color-text-subtle: #6c757d; --color-background-page: #eeeeee; --color-background-light: #f8f8f8; --color-background-light2: #fafafa; --color-border: #cccccc; --color-border-subtle: #e0e0e0; } /* Box Sizing Reset (가장 중요) */ *, *::before, *::after { /* 패딩과 보더가 width/height에 포함되도록 설정하여 레이아웃 계산을 쉽게 만듭니다. */ box-sizing: border-box; } /* HTML/Body Reset (여백 문제 해결) */ html, body{ /* 과 의 기본 마진/패딩 제거 */ margin: 0; padding: 0; /* 페이지가 전체 높이를 차지하도록 설정 */ height: 100%; /* 에 혹시 모를 배경색이 있다면 투명하게 제거 */ background: var(--color-background-page); /* 페이지 배경 변수 적용 */ color: var(--color-text); /* 텍스트 색상 변수 적용 */ transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* 모드 전환 시 부드러운 효과 */ } /* 폰트/텍스트 기본 설정 */ body { /* 기본 폰트 사이즈 설정 (rem 기준을 위한 16px) */ font-size: 16px; /* 폰트 렌더링 최적화 */ -webkit-font-smoothing: antialiased; } /* 폰트 크기 초기화 예시 (모든 h 태그를 1rem, 즉 body의 기본 폰트 크기로 맞춤) */ h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; } h1{ font-size: 1.6rem; font-weight: 700; } h2{ font-size: 1.5rem; font-weight: 650; } h3{ font-size: 1.4rem; font-weight: 600; } h4{ font-size: 1.3rem; font-weight: 550; } h5{ font-size: 1.2rem; font-weight: 500; } h6{ font-size: 1.1rem; font-weight: 450; } ul, ol { list-style-type: none; /* 점(bullet) 마커 제거 */ margin: 0; padding: 0; /* 기본 여백도 초기화하여 깔끔하게 만듭니다. */ } /* 미디어 (이미지) */ img, picture, video, canvas, svg { /* 이미지 요소가 부모 요소를 넘치지 않도록 최대 너비 설정 */ max-width: 100%; display: block; } /* 링크 기본 설정 */ a { /* 터치 스크린에서 탭 했을 때 회색 하이라이트를 제거 */ -webkit-tap-highlight-color: transparent; text-decoration: none; /* 기본 밑줄 제거 */ color: inherit; /* 부모 요소의 폰트 색상을 상속 */ }