/* ================================================================
   Jackle Blog — 手機專屬版面（< 40rem，2026-11）
   不是把桌機縮小：這裡重新決定首屏構圖、導覽位置、列表密度與閱讀節奏。
   原則：單手拇指可及（導覽在底）、首屏就有內容與版畫、觸控目標 ≥ 44px、字級 ≥ 14px（程式碼 13px）。
   語言不變：只用線與點、不塗色塊、不用陰影／漸層、圓角 ≤ 2px。
   ================================================================ */
@media (max-width: 39.99rem) {
  :root {
    --dock-h: 3.5rem;
  }

  /* ---------- 全站：底部導覽（拇指區）＋精簡頂欄 ---------- */
  html { scroll-padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + .5rem); }
  body { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
  .menu-btn { display: none; }                       /* 選單改由底部「更多」開 */
  .m-dock {
    display: grid; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr);
    height: calc(var(--dock-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg); border-top: 1px solid var(--c-line); transition: transform .3s var(--ease-in-out);
  }
  .m-dock.is-hidden:not(:focus-within) { transform: translateY(100%); }
  @media (prefers-reduced-motion: reduce) { .m-dock { transition: none; } }
  .m-dock :is(a, button) {
    position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.75rem;
    background: none; border: 0; font: inherit; font-size: .9375rem; letter-spacing: .04em; color: var(--c-note);
  }
  .m-dock [aria-current="page"] { color: var(--c-title); font-weight: 700; }
  .m-dock [aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 50%; width: 1.5rem; height: 2px; margin-left: -.75rem; background: var(--c-title); }
  .m-dock :is(a, button):active { color: var(--c-title); }
  html:has(#mobile-menu:not([hidden])) .m-dock { transform: translateY(100%); }

  /* ---------- 小字拉到 14px、觸控目標補到 44px ---------- */
  .tag-btn .n, .art-card time, .article-meta, figcaption, .footer-copy, .proj .kind, .mm-label,
  .table-scroll::before, .legacy-note, .nb-d, .nb-k, .nb-all, p.hint, .dm-open, .dm-cap, .dm-tag, .dm-copybody, .dm-copyhead, .dm-copyhead span,
  .nl-when, .proj-note, .contact-list .sub, :root #article th, .sy-badge-pill b, .sy-groq-note, .sy-badge, .sy-badge b, .sy-changelog-label, .sy-lang-tag { font-size: .875rem !important; } /* 14px 是底線：蓋過各元件各自的 12–13px */
  .logo-link { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .dm-open { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .nb a, .nb-all { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .outline-mobile a { display: flex; align-items: center; min-height: 2.75rem; }
  .code-copy-btn { min-width: 2.75rem; min-height: 2.75rem; font-size: .875rem; }
  :root #article pre:has(> .code-copy-btn) { padding-top: 3.5rem; }
  .footer-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: .5rem; }
  .mm-nav a { min-height: 3.5rem; font-size: 1.0625rem; }

  /* ---------- 首頁：首屏就是人、行動、地景 ---------- */
  .hero { --av: 4.5rem; row-gap: 1.5rem; margin-top: .25rem; }
  .hero-body h1 { font-size: 2rem; }
  .socials { margin-top: .5rem; }
  .socials a { min-width: 2.75rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
  /* 首屏下方的版畫地景：夜間封面的黑底用 lighten 融進頁面底色（無邊、無漸層）；
     紙色主題反相後用 multiply 當「黑墨印在紙上」。訊號點是整屏唯一的訊號。 */
  .m-hero-art { position: relative; display: block; margin: 1.75rem -1rem 0; }
  .m-hero-art picture { display: block; }
  .m-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 100%; mix-blend-mode: lighten; }
  :root:not(.dark) .m-hero-art img { filter: invert(1) brightness(1.08); mix-blend-mode: multiply; }
  .m-hero-art i { position: absolute; left: 62%; top: 14%; width: 6px; height: 6px; background: var(--signal); border-radius: 50%; }
  .hero ~ .section-gap, .scene-hero + .page .page-col > .section-gap { margin-top: 3rem; } /* 首屏改成 .scene-hero 後，專案／關於兩區不再是 .hero 的兄弟 */
  /* 首頁地標連結：被鍵盤或讀屏聚焦時捲進來，要留出底部導覽的高度（WebKit 不會替固定導覽讓位） */
  .lm { scroll-margin-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + .5rem); }

  /* ---------- 列表：分類單行橫滑、封面入列、首篇當頭條 ---------- */
  .page-title h1 { font-size: 1.75rem; }
  .list-wrap { margin-top: 1.5rem; }
  .list-side { margin-inline: -1rem; }
  .list-side nav { flex-wrap: nowrap; overflow-x: auto; column-gap: 1.5rem; padding-inline: 1rem; scroll-snap-type: x proximity; scroll-padding-inline: 1rem; scrollbar-width: none; }
  .list-side nav::-webkit-scrollbar { display: none; }
  .tag-btn { flex: none; white-space: nowrap; scroll-snap-align: start; min-height: 3rem; }
  .art-card { grid-template-columns: minmax(0, 1fr) 6.75rem; column-gap: 1rem; padding-block: 1.25rem; align-items: start; }
  .art-card h2 { grid-column: 1; grid-row: 1; font-size: 1.125rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .art-card time { grid-column: 1; grid-row: 2; order: 0; flex-direction: row; align-items: center; gap: .75rem; margin: .625rem 0 0; }
  .art-card time .tick, .art-card .more { display: none; }
  .art-card .desc { display: none; }
  .m-thumb { display: block; grid-column: 2; grid-row: 1 / span 2; width: 6.75rem; height: 5.25rem; object-fit: cover; border: 1px solid var(--c-line); }
  .list-main li.is-lead .art-card { grid-template-columns: minmax(0, 1fr); padding-top: 1rem; }
  .list-main li.is-lead .m-thumb { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: 1rem; }
  .list-main li.is-lead h2 { grid-row: 2; font-size: 1.375rem; -webkit-line-clamp: 4; }
  .list-main li.is-lead time { grid-row: 3; }
  .list-main li.is-lead .desc { display: -webkit-box; grid-row: 4; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: .75rem; }

  /* ---------- 文章：標題先到、封面第二、第一段在首屏內 ---------- */
  .article-grid { margin-top: 1rem; }
  .article-main { display: flex; flex-direction: column; }
  .article-main > * { order: 9; }
  .article-title { order: 1; margin-bottom: .75rem; font-size: 1.75rem; }
  .article-meta { order: 2; margin-bottom: 1.25rem; row-gap: .125rem; }
  .article-meta > :not(.article-tag) { order: 1; }
  .article-meta::before { content: ""; order: 2; flex-basis: 100%; }   /* 強制換行：日期·時長一行、分類一行 */
  .article-meta > .article-tag { order: 3; }
  figure.article-cover { order: 3; margin-bottom: 1.25rem; }
  .outline-mobile { order: 4; }
  .article-main > :is(.ver-tabs, .legacy-note) { order: 5; }
  .article-main > .content { order: 6; }
  .article-main > .comments { order: 7; }
  #article p, #article li { font-size: 1.0625rem; line-height: 1.85; }
  #article .lede { padding-left: 1.25rem; font-size: 1.1875rem; margin-block: 1.5rem; }
  #article .lede::before { width: 6px; background: var(--hatch-dense) 0 0 / 6px 100%; }
  #article h2 { margin-top: 3.5rem; font-size: 1.5rem; }
  #article h3 { margin-top: 2.25rem; font-size: 1.1875rem; }

  /* ---------- 修 WebKit：四角框偽元素與單欄 grid 讓頁面多出 4px 橫向可捲（改版前就有）---------- */
  .shell { overflow-x: clip; }
  .about-card .inner { grid-template-columns: minmax(0, 1fr); }

  /* ---------- 留言區（Twikoo）：輸入框 16px 以上（iOS 聚焦才不會自動放大頁面）、按鈕 44px ---------- */
  #twikoo :is(input, textarea, .el-input__inner, .el-textarea__inner) { font-size: 1rem; }
  #twikoo .el-input__inner { height: 2.75rem; line-height: 2.75rem; }
  #twikoo .el-button { min-height: 2.75rem; min-width: 4rem; }
  #twikoo .tk-submit-action-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }
}