/* 1. 統一盒模型，讓 padding 和 border 不會撐大元素 */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. 清除所有元素的內外邊距，並統一字體粗細 */
* {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

/* 3. 確保 HTML 與 Body 佔滿全高，並設定平滑滾動與字體美化 */
html, body {
    height: 100%;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased; /* 讓 macOS 字體更平滑 */
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 4. HTML5 區塊元素相容性修正 */
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

/* 5. 清除清單預設樣式 */
ol, ul {
    list-style: none;
}

/* 6. 清除超連結預設顏色與底線 */
a {
    color: inherit;
    text-decoration: none;
}

/* 7. 圖片與媒體元素防破版自適應 */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 8. 移除表單元素的瀏覽器預設外觀，使其易於自訂樣式 */
input, button, textarea, select {
    font: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
}

/* 9.  textarea 預設防止使用者自由拉伸破壞排版 */
textarea {
    resize: vertical;
}

/* 10. 表格重設 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}