/* NoNoCam 官網的樣式。三頁共用這一份。
 *
 * ⚠️ **版型、字體、字級、間距全部照 atrac 那一套**（`atrac-io/app/globals.css`
 * 與 https://atrac.app/company/NVDA#events 的事件區）。2026-07-31 Peter 指定的，
 * 理由是同一個人的兩個產品，網站看起來要像同一家做的，而且那一套已經在真人身上
 * 跑過了，不要重新發明。要改版型之前先去看 atrac 現在長什麼樣。
 *
 * ⚠️ **只有燈號那五個顏色例外，那是 App 的 `app/src/theme.ts` 來的。**
 * 紅黃綠是這個產品的語意，不是裝飾，不准為了配色調它們。
 *
 * atrac 那一套最容易被「順手改掉」的三件事，都是刻意的：
 * 1. **標題一律不加粗**（`font-weight: 400`），靠字級跟顏色分層次
 * 2. **中文字體排在最前面**，不是 -apple-system。中文網頁用系統英文字體
 *    當第一順位，中文會落到不確定的備援字體上
 * 3. **字級只用固定的那幾個 px**，不用 rem 也不自己插值
 */

:root {
  /* ── atrac 的底色系 ───────────────────────────── */
  --底: #f6f7f9;          /* 頁面底色，不是白的 */
  --卡: #ffffff;          /* 內容浮在灰底上的白卡 */
  --淡卡: #f1f5f9;
  --墨: #0f172a;          /* 主要文字 */
  --次: #475569;          /* 內文段落 */
  --淡: #64748b;          /* 附註、日期 */
  --更淡: #94a3b8;        /* 頁尾、佐證 */
  --線: #eceef1;
  --深線: #e2e8f0;
  --主色: #2563eb;
  --主色深: #1d4ed8;
  --主色淡: #eff4ff;
  --影: 0 1px 2px rgba(15, 23, 42, 0.04);
  --圓: 6px;

  /* ── atrac 的字級表。只用這幾個數字 ───────────── */
  --微: 12px;
  --註: 13px;
  --輔: 14px;
  --內文: 15px;
  --控件: 16px;
  --卡標: 17px;
  --節標: 20px;
  --品牌: 24px;
  --頁標: 26px;
  --大標: 30px;
  --特大: 34px;
  --首標: 36px;

  /* ── 燈號。這一組來自 app/src/theme.ts，不准動 ─── */
  --紅: #c62828;
  --黃: #c97a00;
  --綠: #1b873f;
  --灰燈: #6b7280;
  --淡紅: #fdecec;
  --淡黃: #fff5e3;
  --淡綠: #eaf6ee;
  --淡灰: #f1f3f5;
}

* { box-sizing: border-box; }

html { background: var(--底); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--墨);
  background: var(--底);
  font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC",
               "Noto Sans CJK TC", system-ui, sans-serif;
  font-size: var(--內文);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ 標題跟 strong 一律不加粗，這是 atrac 那一套的骨幹。
   要強調就換字級或換顏色，不要靠粗體。 */
h1, h2, h3, h4, b, strong { font-weight: 400; }
h1, h2, h3, p { margin-top: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* 桌面把寬度用滿，手機兩邊各留 24。atrac 用的就是這一行 */
.容器 { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
/* 純文字段落收窄，一行不要超過閱讀舒適的長度 */
.讀 { max-width: 760px; }

/* ── 頁首 ────────────────────────────────────────── */

.頂 {
  height: 64px; background: var(--卡);
  border-bottom: 1px solid var(--深線);
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
}
.頂 .容器 { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.標誌 { display: flex; align-items: center; gap: 10px; font-size: var(--品牌); letter-spacing: -0.02em; }
.標誌 img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); }
.頂 nav { display: flex; align-items: center; gap: 22px; color: var(--淡); }
.頂 nav a:hover, .頂 nav a[aria-current] { color: var(--主色); }

/* ── 通用零件 ────────────────────────────────────── */

.卡 {
  background: var(--卡); border: 1px solid var(--線);
  border-radius: var(--圓); padding: 20px; box-shadow: var(--影);
}

.鈕 {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--主色); border-radius: var(--圓);
  background: var(--主色); color: #fff;
  padding: 10px 15px; font-size: var(--內文); transition: 0.15s;
}
.鈕:hover { background: var(--主色深); border-color: var(--主色深); }
.鈕.次 { background: var(--卡); color: var(--主色); }
.鈕.次:hover { background: var(--主色淡); }
.鈕.等 { background: var(--卡); border-color: var(--深線); color: var(--更淡); cursor: default; }
.鈕.等:hover { background: var(--卡); border-color: var(--深線); }
.鈕 small { font-size: var(--註); color: var(--更淡); }

.註 { color: var(--淡); font-size: var(--註); }
.引 { color: var(--次); font-size: var(--控件); max-width: 610px; }

/* 提醒條。atrac 的 .notice */
.提醒 {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #fcd34d; background: #fffbeb; color: #92400e;
  border-radius: var(--圓); padding: 12px 14px; font-size: var(--輔);
}
.提醒.訊 { border-color: #bedbff; background: var(--主色淡); color: #1e40af; }

section { padding: 40px 0; }
.節標 { font-size: var(--節標); letter-spacing: -0.025em; margin: 0 0 6px; }
.節說 { color: var(--淡); margin: 0 0 20px; }

/* ── 開場：桌面兩欄，手機一欄 ───────────────────── */

.開場 { padding: 56px 0 40px; }
.開場格 { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.開場 h1 {
  font-size: var(--首標); line-height: 1.12; letter-spacing: -0.045em;
  margin: 0 0 18px;
}
.開場 .引 { margin: 0 0 26px; }
.下載 { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }

/* ── 三欄卡片格線 ────────────────────────────────── */

.格3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.格2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
.格3 h3, .格2 h3 { font-size: var(--卡標); letter-spacing: -0.02em; margin: 0 0 6px; }
.格3 p, .格2 p { color: var(--淡); margin: 0; }

/* ── 燈號圓點 ────────────────────────────────────── */

.燈 { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
.燈.紅 { background: var(--紅); }
.燈.黃 { background: var(--黃); }
.燈.綠 { background: var(--綠); }
.燈.灰 { background: var(--灰燈); }
.燈.空 { background: var(--卡); box-shadow: inset 0 0 0 2px var(--更淡); }

.圖例 { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.圖例 li { display: flex; gap: 10px; align-items: flex-start; color: var(--次); }
.圖例 .燈 { margin-top: 6px; }

/* ── 結果樣張 ────────────────────────────────────── */

.樣張頭 { padding-bottom: 14px; border-bottom: 1px solid var(--線); }
.樣張名 { font-size: var(--頁標); line-height: 1.2; letter-spacing: -0.02em; }
.樣張類 { color: var(--淡); font-size: var(--註); margin-top: 6px; }
.樣張統計 { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: var(--輔); color: var(--次); }
.樣張統計 span { display: inline-flex; align-items: center; gap: 6px; }

.樣張列 { display: flex; align-items: center; padding: 9px 8px; border-bottom: 1px solid var(--線); }
.樣張列:last-child { border-bottom: 0; }
/* ⚠️ 格子跟圓點分兩層。合成一層的話格寬會套在圓點身上，圓點被拉成橢圓 */
.樣張列 .格 { width: 40px; flex: none; display: flex; align-items: center; justify-content: center; }
.樣張成分 { flex: 1; font-size: var(--控件); }
.樣張成分 i { font-style: normal; font-size: var(--註); color: var(--更淡); margin-left: 4px; }
.樣張列.黃底 { background: var(--淡黃); }
.樣張列.灰底 { background: var(--淡灰); }
.樣張列.表頭 { border-bottom: 0; padding-bottom: 4px; }
.樣張列.表頭 .格 { font-size: var(--微); color: var(--淡); }

/* ── 新聞：照 atrac 事件區的時間軸 ───────────────── */

.篩 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 20px; }
.篩 button {
  font-size: var(--註); padding: 6px 12px; border-radius: var(--圓);
  border: 1px solid var(--線); background: var(--卡); color: var(--次);
}
.篩 button[aria-pressed="true"] { background: var(--主色); border-color: var(--主色); color: #fff; }
.篩 .數 { margin-left: auto; color: var(--淡); font-size: var(--註); }

/* 左邊那條軸只在桌面畫。手機寬度不夠，日期改成疊在標題上面。
   ⚠️ **軸的位置是算出來的，不是猜的**：日期欄 76 ＋ 間距 16 ＋ 圓點半徑 6 = 98。
   改上面任何一個數字，這裡要跟著改，不然線會從圓點旁邊擦過去。 */
.軸 { position: relative; }
.軸::before {
  content: ""; position: absolute; left: 98px; top: 10px; bottom: 10px;
  width: 1px; background: var(--深線);
}
@media (max-width: 767px) { .軸::before { display: none; } }

.則 { display: flex; flex-direction: row; gap: 16px; padding: 0 0 28px; }
/* 日期不准折成兩行，折了就跟下面那則的日期黏在一起看不出分界 */
.則 .日 { width: 76px; flex: none; text-align: right; padding-top: 3px; font-size: var(--註); color: var(--淡); line-height: 1.25; white-space: nowrap; }
.則 .點欄 { flex: none; padding-top: 8px; position: relative; }
.則 .點 {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--主色); box-shadow: 0 0 0 4px var(--卡);
  position: relative; z-index: 1;
}
.則.要注意 .點 { background: var(--黃); }
.則 .身 { flex: 1; min-width: 0; }

.則 h3 { font-size: var(--頁標); line-height: 1.25; letter-spacing: -0.02em; margin: 0; }
.則 .資訊 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: var(--註); color: var(--淡); }
.牌 { border: 1px solid var(--線); border-radius: 4px; padding: 1px 7px; background: var(--卡); }
.牌.要注意 { background: var(--淡黃); border-color: #f0d9a8; color: #8a5a00; }

/* 解讀框：atrac 的「atrac解讀」那一塊，藍底、標籤浮在左上角 */
.解讀 {
  position: relative; margin-top: 18px;
  border: 1px solid #bedbff; background: var(--主色淡);
  border-radius: var(--圓); padding: 26px 16px 16px;
  color: #1e3a8a; font-size: var(--內文); line-height: 1.65;
}
.解讀::before {
  content: "NoNoCam 解讀"; position: absolute; top: 7px; left: 16px;
  font-size: var(--微); color: var(--主色);
}
.解讀 .對誰 { display: block; margin-top: 8px; color: #1d4ed8; font-size: var(--輔); }

.成分們 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: var(--註); color: var(--淡); }
.成分 { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--線); border-radius: 999px; padding: 2px 10px; background: var(--卡); }

.原文 { margin: 10px 0 0; font-size: var(--註); color: var(--更淡); line-height: 1.55; }
.原文 a { color: var(--淡); }
.原文 a:hover { color: var(--主色); }

.空話 { color: var(--更淡); padding: 32px 0; }

/* ── 法規頁 ──────────────────────────────────────── */

.文 h1 { font-size: var(--大標); letter-spacing: -0.03em; margin: 0 0 18px; }
.文 h2 { font-size: var(--節標); letter-spacing: -0.025em; margin: 28px 0 10px; }
.文 h3 { font-size: var(--卡標); margin: 20px 0 6px; }
.文 p, .文 li { color: var(--次); }
.文 p { margin: 0 0 14px; }
.文 li { margin-bottom: 6px; }
.文 b { color: var(--墨); }
.文 code { background: var(--淡卡); border-radius: 4px; padding: 1px 6px; font-size: 0.92em; }
.文 hr { border: 0; border-top: 1px solid var(--線); margin: 24px 0; }

.表框 { overflow-x: auto; margin: 0 0 16px; }
.表框 table { border-collapse: collapse; width: 100%; font-size: var(--輔); }
.表框 th, .表框 td { border: 1px solid var(--線); padding: 8px 12px; text-align: left; vertical-align: top; }
.表框 th { background: var(--淡卡); white-space: nowrap; }
.表框 td { color: var(--次); }

/* ── 頁尾 ────────────────────────────────────────── */

footer { border-top: 1px solid var(--線); padding: 28px 0 48px; color: var(--淡); font-size: var(--註); }
footer .連結列 { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; }
footer a:hover { color: var(--主色); }

/* ── 手機 ────────────────────────────────────────── */

@media (max-width: 900px) {
  .格3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .容器 { width: calc(100% - 32px); }

  /* ⚠️ 頁首在手機一定要縮。24 的品牌字加三個選單項，375 寬放不下，
     每一項都會被折成兩行，整條頁首變三倍高（2026-07-31 實機看到的） */
  .標誌 { font-size: var(--卡標); gap: 8px; }
  .標誌 img { width: 26px; height: 26px; }
  .頂 nav { gap: 14px; font-size: var(--註); white-space: nowrap; }
  .頂 .容器 { gap: 12px; }
  .開場 { padding: 32px 0 24px; }
  .開場格 { grid-template-columns: 1fr; gap: 28px; }
  .開場 h1 { font-size: var(--大標); }
  .格3, .格2 { grid-template-columns: 1fr; }
  .鈕 { flex: 1 1 100%; }
  .卡 { padding: 16px; }

  /* 手機沒有軸，日期收到標題上面去，內容吃滿寬度 */
  .則 { flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--線); }
  .則 .日 { width: auto; text-align: left; padding-top: 0; }
  .則 .點欄 { display: none; }
  .則 h3 { font-size: var(--節標); }
}