reset.css

/* 
  ========================================
  reset.css - CSS 초기화 파일
  ========================================
  
  목적: 모든 브라우저에서 일관된 스타일을 적용하기 위해
        기본 스타일을 초기화합니다.
  
  설명: 브라우저마다 기본 스타일(margin, padding 등)이 달라서
        디자인이 달라 보일 수 있습니다. 이를 방지하기 위해
        모든 요소의 기본 스타일을 0으로 초기화합니다.
  ========================================
*/

/* 
  모든 요소(*), 가상요소(::before, ::after)의 
  여백과 테두리를 초기화합니다 
*/
*, *::before, *::after {
  margin: 0;           /* 바깥 여백 제거 */
  padding: 0;          /* 안쪽 여백 제거 */
  box-sizing: border-box; /* 크기 계산 방식을 border-box로 통일 */
}

/* 
  HTML 요소의 기본 설정
  - 스크롤을 부드럽게 만듭니다
*/
html {
  scroll-behavior: smooth; /* 앵커 링크 클릭 시 부드럽게 스크롤 */
}

/* 
  Body 요소의 기본 설정
  - 최소 높이를 화면 전체로 설정
  - 텍스트 렌더링 최적화
*/
body {
  min-height: 100vh;           /* 최소 높이를 화면(viewport) 높이의 100%로 */
  line-height: 1.6;            /* 줄 간격을 1.6배로 (가독성 향상) */
  -webkit-font-smoothing: antialiased; /* Mac에서 폰트를 부드럽게 렌더링 */
  -moz-osx-font-smoothing: grayscale;  /* Firefox Mac에서 폰트를 부드럽게 렌더링 */
}

/* 
  이미지, 비디오 등의 미디어 요소 설정
  - 부모 요소를 넘어가지 않도록 제한
*/
img, picture, video, canvas, svg {
  display: block;      /* 블록 요소로 표시 (아래 여백 제거) */
  max-width: 100%;     /* 부모 요소를 넘지 않도록 최대 너비 제한 */
  height: auto;        /* 비율을 유지하면서 높이 자동 조절 */
}

/* 
  입력 요소(input, button 등)의 폰트 상속
  - 기본적으로 입력 요소는 시스템 폰트를 사용하는데,
    이를 body에서 지정한 폰트로 통일합니다
*/
input, button, textarea, select {
  font: inherit;       /* 부모 요소의 폰트 설정을 상속 */
}

/* 
  문단 요소의 고아/과부 방지
  - 텍스트가 여러 줄일 때 페이지/컬럼 끝에서
    한 줄만 떨어져 나가는 것을 방지합니다
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* 긴 단어는 줄바꿈 허용 */
}

/* 
  리스트(ul, ol)의 기본 마커(점, 숫자) 제거
*/
ul, ol {
  list-style: none;    /* 리스트 마커 제거 */
}

/* 
  링크(a) 요소의 기본 스타일 제거
*/
a {
  text-decoration: none; /* 밑줄 제거 */
  color: inherit;        /* 부모 요소의 색상 상속 */
}

/* 
  버튼의 기본 스타일 제거
*/
button {
  background: none;    /* 배경 제거 */
  border: none;        /* 테두리 제거 */
  cursor: pointer;     /* 마우스 커서를 손가락 모양으로 */
  font: inherit;       /* 폰트 상속 */
}