/* ================================
   CLEAR.CSS — Reset & Base Layer
   ================================ */

/* 1️⃣  全域重置 — 移除瀏覽器預設邊距、設定統一盒模型 */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 2️⃣  預設字體與基礎顏色（可依專案自行改） */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", sans-serif;
  color: #222;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

/* 3️⃣  HTML5 結構標籤統一顯示為區塊 */
article, aside, footer, header, nav, section, main, figure, figcaption {
  display: block;
}

/* 4️⃣  圖片 / 視訊 / SVG — 響應式縮放 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 5️⃣  表格 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 6️⃣  表單元素 — 移除預設外觀 */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 7️⃣  連結 */
a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: none;
}

/* 8️⃣  列表 */
ul, ol {
  list-style: none;
}

/* 9️⃣  區塊開發用除錯線（可關閉） */
.debug-outline * {
  outline: 1px dashed rgba(0, 0, 0, 0.15);
}

/* 🔟  預設容器與文字排版設定 */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  max-width: 1200px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
}

p {
  margin-bottom: 1em;
}

/* END OF CLEAR.CSS */