/**
 * =================================================================================
 * Modern CSS Reset & Normalizer
 * =================================================================================
 *
 * @description
 * 이 파일은 normalize.css와 Eric Meyer's Reset CSS의 장점을 결합하여
 * 현대적인 웹 프로젝트를 위한 견고한 기반을 제공합니다.
 * 브라우저 간의 일관성을 유지하면서도, 불필요한 스타일을 제거하고
 * 개발자가 예측 가능한 환경에서 작업할 수 있도록 설계되었습니다.
 *
 * @philosophy
 * 1.  **Preserve sensible defaults**: normalize.css의 철학을 따라 유용한 기본값은 유지합니다.
 * 2.  **Reset what's needed**: reset.css의 철학에 따라 디자인에 방해가 되는 마진, 패딩 등은 제거합니다.
 * 3.  **Modern Best Practices**: `box-sizing`, 기본 타이포그래피 설정 등 현대적인 모범 사례를 적용합니다.
 *
 */

/*
 * 1. 모든 요소에 box-sizing을 border-box로 설정하여 레이아웃 작업을 직관적으로 만듭니다.
 * 2. 모든 브라우저에서 마진과 패딩을 초기화합니다.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*
 * =================================================================================
 * Document & Root Level Defaults
 * =================================================================================
 */

/**
 * 1. 모든 브라우저에서 기본 줄 간격을 일관되게 수정합니다. (from normalize.css)
 * 2. iOS에서 화면 방향 변경 후 글자 크기가 조정되는 것을 방지합니다. (from normalize.css)
 * 3. 기본 글꼴을 설정하고, 텍스트 렌더링을 부드럽게 최적화합니다.
 */
html {
    line-height: 1.5;
    /* 1 - 가독성을 위해 1.15에서 1.5로 조정 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    font-family: "Noto Sans KR", sans-serif;
    /* 3 (from reset.css) */
    -webkit-font-smoothing: antialiased;
    /* 3 */
    -moz-osx-font-smoothing: grayscale;
    /* 3 */
}

/*
 * =================================================================================
 * Section & Element Resets
 * =================================================================================
 */

/**
 * 1. 시맨틱 섹셔닝 요소들이 이전 브라우저에서도 블록 레벨로 렌더링되도록 보장합니다.
 * 2. 링크의 기본 색상을 상속받게 하고, 밑줄을 제거하여 커스텀 스타일링을 용이하게 합니다.
 * 3. 목록의 기본 스타일(점, 숫자)을 제거합니다.
 * 4. 이미지와 미디어 요소가 컨테이너를 벗어나지 않도록 하고, 하단 공백을 제거합니다.
 */
main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
    /* 1 */
}

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
    color: inherit;
}

ul,
ol {
    list-style: none;
    /* 3 */
}

img,
picture,
video,
canvas,
svg {
    display: block;
    /* 4 */
    max-width: 100%;
    /* 4 */
}


/*
 * =================================================================================
 * Typography Normalization
 * =================================================================================
 */

/**
 * 1. 제목 요소의 글자 크기와 굵기를 초기화하여, 프로젝트 디자인 시스템에 맞게 재정의하기 쉽게 만듭니다.
 * 2. pre, code 등의 고정폭 글꼴 스타일을 일관되게 유지합니다. (from normalize.css)
 * 3. `<b>` 와 `<strong>` 태그의 font-weight를 bolder로 일관되게 만듭니다. (from normalize.css)
 * 4. `sub`, `sup` 요소가 줄 간격에 영향을 미치지 않도록 수정합니다. (from normalize.css)
 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    /* 1 */
    font-weight: inherit;
    /* 1 */
}

pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 2 */
    font-size: 1em;
    /* 2 */
}

b,
strong {
    font-weight: bolder;
    /* 3 */
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
 * =================================================================================
 * Forms Normalization (주로 normalize.css에서 가져옴)
 * =================================================================================
 * Form 요소들은 브라우저별 기본 스타일이 매우 복잡하고 일관성이 없기 때문에,
 * 이를 초기화하기보다는 normalize.css의 잘 정제된 보정 규칙을 대부분 그대로 사용하는 것이 안정적입니다.
 */

/**
 * 1. 모든 브라우저에서 폼 요소의 글꼴 스타일을 상속받도록 통일합니다.
 * 2. Firefox와 Safari에서 불필요한 마진을 제거합니다.
 */
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
    border: 1px solid #ccc;
    /* 기본 테두리 추가하여 형태 인지 용이하게 함 */
    padding: 0.5em;
    /* 기본 패딩 추가 */
}

button,
select {
    text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
    /* 클릭 가능한 요소임을 명시 */
}

/* Firefox의 버튼 내부 테두리와 패딩 제거 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/* Firefox에서 제거된 포커스 스타일 복원 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

textarea {
    overflow: auto;
    /* IE 10+에서 불필요한 세로 스크롤바 제거 */
    resize: vertical;
    /* 수직으로만 크기 조절 가능하도록 설정 */
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/* Chrome, Safari 등에서 검색 필드 스타일 초기화 */
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* 파일 업로드 버튼 스타일 상속 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

/*
 * =================================================================================
 * Interactive & Misc Elements
 * =================================================================================
 */

details {
    display: block;
}

summary {
    display: list-item;
}

/* 모든 브라우저에서 [hidden] 속성을 가진 요소를 숨김 */
[hidden] {
    display: none;
}