/* =========================================================
   reset.css — 브라우저 기본 스타일 초기화
   여러 브라우저(크롬·엣지·사파리)의 기본 여백·글꼴이 조금씩
   다르기 때문에, 처음에 값을 통일해두면 내가 짠 CSS가
   어디서든 똑같이 보인다.
   ※ 사용법: main.css 보다 "먼저" 연결한다.
     <link rel="stylesheet" href="./css/reset.css">
     <link rel="stylesheet" href="./css/main.css">
   ========================================================= */

/* 1) 모든 요소의 여백 제거 + box-sizing 통일
   box-sizing: border-box → padding·border를 width 안에 포함해
   크기 계산이 직관적으로 바뀐다. (*는 전체 선택자) */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2) 기본 글꼴·줄간격·색 지정
   브라우저 기본 글꼴 대신 읽기 좋은 값으로 통일 */
body {
  font-family: "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  line-height: 1.6;
  color: #222;
  background: #fff;
}

/* 3) 목록의 점·번호 제거 (ul·ol)
   ※ h1~h6의 크기·굵기는 브라우저 기본값을 그대로 살려둔다.
      (제목이 본문과 똑같아지지 않도록) */
ul, ol {
  list-style: none;
}

/* 4) 링크의 밑줄·색 제거 → 부모 글자색을 그대로 사용 */
a {
  text-decoration: none;
  color: inherit;
}

/* 5) 이미지·미디어를 블록으로, 부모 너비를 넘지 않게 */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 6) 폼 요소가 자기만의 글꼴을 쓰지 않고 body 글꼴을 따르게 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* 7) 버튼 기본 테두리·배경 제거 + 커서 손모양 */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* 8) 표의 칸 사이 간격 제거(테두리 하나로 합침) */
table {
  border-collapse: collapse;
}