/* 브라우저 초기화 전용,
브라우저 기본 스타일 차이(마진, 폼, 이미지 등)를 최소로 정리하는 파일
"정리만 하고 디자인은 안하는 파일", 컴포넌트/ 페이지에서 !impportant 안 쓰게 만드는 기반*/

/* 기본값은 content=> width+padding+border 실제크기가 더커짐
border-box=> 실제크기를 100px로 지정하면 그안에서 조정됨.
before, after 가상요소까지 지정 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 브라우저 화면 높이를 %기준으로 쓰기위한 사전작업(건물 바닥 높이를 먼저 정하는 작업)
%는 부모의 기준인데 body는 html, html은 브라우저 뷰포트가 부모
=> 브라우저는 기본적으로 html의 height를 명시하지 않았으므로 같이 명시*/
html,
body {
  height: 100%;
}

/* 브라우저 기본 margin값 8px 해제 */
body {
  margin: 0;
}

/* block-이미지 기본값 inline=> 아래에 알 수 없는 여백 발생(baseline)
inline은 width, margin-top 안먹힘
max-width100%-부모보다 이미지 커져서 깨지는 것 방지 */
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* 폼 요소는 브라우저가 임의로 폰트 지정
body에 지정해도 따로 노는 경우 o
디자인 통일성 */
button,
input,
textarea,
select {
  font: inherit;
}

/* inherit: 부모 색 물려받아 링크 파랗게 튀는 것 방지
decration: none은 기본 underline 제거 
"디자인 초기화라기보다는 링크스타일을 디자인 시스템에서 관리하겠다는 의미"*/
a {
  color: inherit;
  text-decoration: none;
}

/* 기본 여백 제거
네비, 카드 리스트 등 그때 각자 커스텀함
필요시 pages, components에서 다시 스타일 주면됨. */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}