/* 手機版閱讀優化（螢幕寬度 600px 以下才生效，電腦版不受影響）
   依據：
   - WCAG 2.2 2.5.5：重要按鈕與連結的點擊範圍至少 44×44 CSS px；2.5.8 最低 24×24（句子中的連結除外）
   - GOV.UK Design System：內文 19px、最小文字 16px（手機與電腦相同）
   - RWD 指南：手機單欄由上而下、600px 斷點、clamp() 讓字體隨螢幕平滑縮放、卡片用 auto-fill＋minmax 自動換行、手機用漢堡選單
   本站採：內文約 17px（clamp 16–18px）、次要文字至少 13px、按鈕與連結至少 44px 高、輸入框 16px（避免 iPhone 點輸入框時自動放大）
   每個頁面都在 </head> 前最後載入：<link rel="stylesheet" href="/assets/mobile.css"> */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: rgba(0, 0, 0, .08); touch-action: manipulation; }

@media (max-width: 600px) {

  /* ===== 首頁（單欄，由上而下：頁首 → 跑馬燈 → 時鐘／天氣 → 台股 → 貼文） ===== */
  .wrap { gap: 16px; padding: 12px 16px 40px; }
  .side { flex: 1 1 100%; max-width: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; font-size: 0.9375rem; }
  .side .avatar { width: 44px; height: 44px; grid-column: 1; grid-row: 1; }
  .side > div:nth-of-type(2) { grid-column: 2; grid-row: 1; min-width: 0; line-height: 1.45; }
  .side > div:nth-of-type(2) > .brand { font-size: 1.0625rem; }
  .side > div:nth-of-type(2) > .muted:nth-child(2) { display: none; } /* 手機頁首只留一句標語 */
  .side .muted { font-size: 0.875rem; }
  .menu-btn { display: inline-flex; grid-column: 3; grid-row: 1; }
  /* 漢堡選單：搜尋、關於、IG 預設收起，點 ≡ 才展開（展開時把下面內容往下推，不蓋住） */
  .side .search, .side nav, .side .ig { display: none; grid-column: 1 / -1; }
  .side.is-open .search { display: block; grid-row: 2; }
  .side.is-open nav { display: flex; flex-direction: column; grid-row: 3; }
  .side.is-open .ig { display: inline-flex; grid-row: 4; }
  .side nav a { min-height: 44px; display: flex; align-items: center; font-size: 1rem; padding: 0; }
  .side .ig { min-height: 44px; align-items: center; font-size: 1rem; padding: 0; }
  .side.is-open .ig { display: flex; }
  .side.is-open { row-gap: 4px; }
  .side.is-open .search { margin: 8px 0 4px; }
  .search input { font-size: 1rem; min-height: 48px; padding: 12px 14px; }
  .side > .muted:not(:first-child), .side > .wx-credit { display: none !important; }

  /* 跑馬燈、時鐘、天氣在手機上縮小成輔助資訊，不搶貼文的風采 */
  .top-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #eeeeee; }
  .top-row .ticker { font-size: 0.875rem; line-height: 1.55; height: 3.1em; color: #555555; }
  .top-row .ticker-wrap { grid-column: 1 / -1; }
  .clock { gap: 2px; }
  .fc { gap: 2px; }
  .fd { width: 14px; height: 21px; font-size: 13px; font-weight: 500; }
  .fd .h span { height: 21px; line-height: 21px; }
  .fd .t { border-radius: 3px 3px 0 0; }
  .fd .b { border-radius: 0 0 3px 3px; }
  .fc .sep { gap: 4px; padding: 0 1px; }
  .fc .sep i { width: 2px; height: 2px; }
  .clock-date { font-size: 0.75rem; }
  .wx { gap: 6px; justify-content: flex-end; }
  .wx-guy { width: 30px; height: 30px; }
  .wx-text { font-size: 0.75rem; line-height: 1.4; }
  .wx-now { font-size: 0.8125rem; }

  .tabs { margin: 8px 0 8px; gap: 0 4px; flex-wrap: nowrap; }
  .tab { font-size: 1rem; padding: 10px 12px; min-height: 44px; min-width: 44px; }
  .tab:first-child { padding-left: 0; }
  /* 卡片自動換行：每張至少 150px，空間夠就自動多排（RWD 指南的 auto-fill ＋ minmax 寫法） */
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
  .grid > .notepost { overflow: visible; } /* 內容放不下時可以長高，不截字 */
  .meta { font-size: 0.8125rem; }
  .note-title { font-size: 1.0625rem; line-height: 1.4; }
  .note-more { font-size: 0.875rem; }
  .imgpost .post-text { font-size: 0.875rem; }
  .about { margin-top: 56px; padding-top: 24px; }
  .about h2 { font-size: 1.125rem; }
  .about p, .about li { font-size: clamp(1rem, 0.85rem + 0.8vw, 1.125rem); line-height: 1.85; }
  .m-foot { display: flex !important; }
  .post-dialog .post-text { font-size: 1.0625rem; }

  /* ===== 文章頁 ===== */
  .page { font-size: clamp(1rem, 0.85rem + 0.8vw, 1.125rem); line-height: 1.85; padding-top: 16px; }
  .page h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem); line-height: 1.45; }
  .page h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem); line-height: 1.45; margin-top: 40px; }
  .page h3 { font-size: 18px; line-height: 1.5; }
  .page h4 { font-size: 17px; }
  .back { font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .crumbs { font-size: 13px; line-height: 1.5; }
  .crumbs a { display: inline-block; padding: 12px 0; }
  .meta, .meta time { font-size: 13px; }
  .byline { font-size: 14px; line-height: 1.6; }
  .lead, .subtitle { font-size: 18px; }
  .toc { font-size: 16px; }
  .toc li { margin: 0; }
  .toc a { display: inline-block; padding: 9px 0; line-height: 1.5; }
  .trap, details.pro, .explain, .opt { font-size: 16px; }
  details.pro > summary { font-size: 16px; }
  .summary h2 { font-size: 18px; }
  table { font-size: 15px; }
  th { font-size: 14px; }
  figcaption, .cite, .refs, .refs-hint, .lab-sub, .cs-all, .lab-note, .steps, .range, .formula, .back-f, .go-explain { font-size: 15px; }
  .lab-tag, .cs-label, .stat-k, .front .hint, .go-fields label, .fields label, .go-pts { font-size: 13px; }
  .lab-title { font-size: 18px; }
  .go-name { font-size: 15px; }
  .go-pts small { font-size: 13px; }
  .chk { font-size: 15px; min-height: 44px; }
  .chk input[type="checkbox"], .chk input[type="radio"] { width: 22px; height: 22px; }
  .btn, .seg button { font-size: 15px; min-height: 44px; padding: 10px 16px; }
  .cite-toggle { font-size: 14px; min-height: 44px; }
  .go-fields input[type="number"], .fields input, .page input[type="number"], .page input[type="text"] { font-size: 16px; min-height: 44px; }
  .range input { min-height: 44px; }
  sup.cref { font-size: max(13px, .78em); }
  sup.cref a { padding: 0 3px; }
  .refs li { line-height: 1.7; margin: 0 0 12px; }
  .refs a { display: inline-block; padding: 2px 4px; }
  .author { font-size: 16px; }
  .author a { display: inline-block; padding: 8px 0; }
  .cs-close { width: 44px; height: 44px; }

  /* 分享與留言區 */
  .engage h2 { font-size: 21px; }
  .engage-btn { font-size: 15px; min-height: 46px; }
  .engage-field label { font-size: 15px; }
  .engage-count { font-size: 13px; }
  .engage-note { font-size: 13px; }
  .engage-head { font-size: 15px; }
  .engage-head time { font-size: 13px; }
  .engage-text { font-size: 16px; }
}

@media (max-width: 374px) {
  .tab { padding: 10px 8px; }
}

/* ===== 文章表格：手機上每一列變成一張卡片，不用左右滑（欄名來自每格的 data-label） ===== */
@media (max-width: 600px) {
  .table-wrap { overflow: visible; margin: 12px 0 16px; }
  .table-wrap table { min-width: 0; width: 100%; border-collapse: separate; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap tbody, .table-wrap tr { display: block; }
  .table-wrap tr { border: 1px solid #e6e6e6; border-radius: 10px; padding: 10px 14px; margin: 0 0 10px; background: #fff; }
  .table-wrap td { display: grid; grid-template-columns: minmax(5.5em, 36%) minmax(0, 1fr); gap: 10px; border: 0; padding: 6px 0; font-size: 15px; line-height: 1.6; }
  .table-wrap td::before { content: attr(data-label); color: #6b6b6b; font-size: 13px; font-weight: 600; line-height: 1.7; }
  .table-wrap td:first-child { display: block; font-size: 16px; font-weight: 700; padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid #eeeeee; }
  .table-wrap td:first-child::before { content: none; }
  .table-wrap td:not([data-label])::before { content: none; }
  .table-wrap td:not([data-label]) { display: block; }
}