/* ══════════════════════════════════════════════════════════
   base.css — 全站底稿＋三頁共用版面 class（Day 25E.1B-1）
   ──────────────────────────────────────────────────────────
   🧒 小孩版：三間教室原本各自有一份「牆壁怎麼刷、黑板掛多高」的說明書，
   內容差不多卻各寫各的。這裡是一份總說明書，再加上幾個標準零件
   （外框、頁首、標題卡、頁尾），以後新教室（學習頁、統計頁）直接拿來用。

   載入順序（每一頁）：tokens.css → base.css →（股票頁才有 styles.css）→ 頁面 CSS → nav.css
   規則：
   1. 只放「每一頁都適用」的規則；頁面專屬的留在各頁 CSS。
   2. 只用 tokens.css 的語意層變數，不寫死色碼（verify_round.mjs 會檢查）。
   3. 頁面 CSS 寫在後面、權重相同時會蓋過這裡，所以各頁不要再重複寫共用 class 已經處理的屬性。
   ══════════════════════════════════════════════════════════ */

/* ── reset ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* html 刻意不設定 px 字級：尊重使用者在瀏覽器調大的字級（1rem 會跟著變大）。
   text-size-adjust：避免手機轉橫向時瀏覽器自動把字放大。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  font-size: var(--text-body); /* 18px（以 rem 計算，會隨瀏覽器字級設定放大） */
  line-height: var(--leading-body);
  color: var(--color-text);
  /* 背景色只是「漸層還沒畫出來前」的底色；真正的背景畫在下面的 body::before */
  background-color: var(--color-bg);
}

/* ★ Day 25E.1B-1（驗收後追加）：按鈕、輸入框、下拉選單、文字框沿用網站字型。
   🧒 瀏覽器預設不會讓這些元件「跟著網頁用同一種字」，沒指定字級的按鈕會用各家瀏覽器自己的預設小字——
   電腦 Chrome 約 13px，iPhone Safari 更小（約 11px），所以 iPhone 上按鈕字特別小。 */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* 全站按鈕的預設字級：一般按鈕 16px（--text-base）。
   分頁／標籤類按鈕（狀態分頁、分類、篩選標籤、持有週期）由各頁 CSS 指定 14px（--text-sm）。
   這裡用元素選擇器（權重最低），各頁有指定字級的 class 都會蓋過它；之後的新頁面不指定就是 16px。 */
button {
  font-size: var(--btn-font-size);
}

/* 標題用較緊的行高：body 的 1.65 適合段落，標題兩行以上時會顯得鬆散 */
h1,
h2,
h3,
h4 {
  line-height: var(--leading-tight);
}

/* ── 清晨天空固定背景層（Day 25E.1B-1 C2） ─────────────────
   為什麼不用 background-attachment: fixed：iPhone Safari 不支援，捲動時也比較耗效能。
   改成一層固定在畫面上的偽元素：position: fixed 讓它不跟著捲動，
   z-index: -1 讓它在內容後方（html、body 都沒有建立疊放層級的屬性，所以不會蓋住內容），
   pointer-events: none 讓它不會擋到任何點擊。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  background: var(--color-bg-gradient);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   三頁共用版面 class（數值沿用 Day 25E.1A-2 已統一的值）
   ══════════════════════════════════════════════════════════ */

/* 內容寬度與置中。只設左右 margin，不影響各頁原本的上下距離 */
.page-container {
  width: min(1120px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* 頁首上方距離。加上 iPhone 頂端安全區域（C9）：「加入主畫面」或包成 App 時，
   頁首不會被瀏海或狀態列擋住；一般 Safari 直拿時安全區域為 0，外觀不變 */
.page-top {
  padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
}

/* 標題卡 */
.page-hero {
  margin-bottom: var(--space-4);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface-card);
  box-shadow: var(--shadow-sm);
}

.page-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-heading);
}

.page-hero__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* 免責聲明：與上方內容 24px、與頁面底部 36px（36px 目前沒有對應 token） */
.page-footer {
  margin-top: var(--space-6);
  padding-bottom: 36px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .page-container {
    width: min(100% - 24px, 460px);
  }

  .page-top {
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
  }

  .page-hero {
    padding: var(--space-5);
  }

  .page-hero__title {
    font-size: 1.85rem;
  }
}