/*
 * 手機可讀性下限（CHU-357）
 * ────────────────────────────────────────────────────────────────
 * 2026-09-24 在 390px 實測：攻略頁有 400+ 個看得到的文字小於 12px
 * （底部導覽 11px、統計標籤 10px、卡片作者／標籤／日期 11-11.84px），
 * 篩選 chip 只有 36px 高、頂部圖示鈕只有 34px 寬。
 *
 * 範圍只有兩件事：
 *   1. 手機（≤767px）上看得到的文字至少 12px
 *   2. 可點的 chip／分頁／圖示鈕至少 44px
 * 不動字型、標題級距、顏色——那些等產品決定整套字級。
 *
 * ■ 為什麼是一個獨立、最後載入的檔案
 *
 * 樣式分了 v3/v4/ql/v52 好幾代，互相蓋來蓋去。放在最後、只寫實測點名
 * 的選擇器，要撤掉只要刪 index.html 的一行 <link>。
 *
 * ■ 為什麼不寫 `* { font-size: max(12px, ...) }`
 *
 * CSS 拿不到「原本的值」，全掃只能一律設 12px，會把標題、內文、
 * 按鈕全部拉平。所以逐一點名實測量到的小字。
 */

@media (max-width: 767px) {
  /* ── 1. 文字下限 12px ─────────────────────────────── */

  /* 底部導覽標籤（11px） */
  .mobile-bottom-nav a,
  .mobile-bottom-nav span,
  /* 探索頁摘要的統計標籤（10px） */
  .v3-explore-summary-metrics small,
  /* 攻略卡片：作者、統計、標籤、日期（11-11.84px） */
  .ql-allguide-author small,
  .ql-allguide-meta span,
  .ql-allguide-tags span,
  .ql-allguide-date,
  /* 場域頁：精選說明、附近地點、場館資訊、時間軸（10.5-11.5px） */
  .ql-mobile-feature p,
  .ql-nearby-grid p,
  .ql-mobile-venue-guide__meta dt,
  .ql-mobile-venue-guide__timeline li,
  /* 路線頁出行條件標籤（11px）。只鎖條件那一列——同一區塊的「展開地圖」
   * 也是 span 但本來 15px，寫成 `.ql-v52-route-overview span` 會把它縮小。 */
  .ql-v52-route-overview section > div > span,
  /* AI 導覽頁附近地點（11px） */
  .ql-mobile-nearby small,
  /* 「我的」頁統計（11px） */
  .ql-foot-stats span,
  /* 共創編輯器：五步驟標籤與關閉鈕文字（10px） */
  .ql-editor-actions span,
  /* 「我的 › 旅程」狀態標籤（11px） */
  .ql-status-pill,
  .ql-five-step strong,
  /* CSS 裡寫死 9px 的三處：LINE 徽章、過去旅程、可見度說明 */
  .v3-line-auth-badge,
  .ql-past-trips article small,
  .ql-visibility small,
  /* 真實旅人投稿卡：日期徽章與四題題名（11.5px）。本機 mock 沒有真實投稿，
   * 所以 CHU-357 當時量不到；正式站上線後實測才抓到。 */
  .ql-v52-real-guide header span,
  .ql-v52-real-guide dt,
  /* 旅程進行中頁（#/trip/live）：「現在這一站」11px、時間軸狀態 10px。
   * 這一頁不在 CHU-357 當時量的七條路由裡，09-25 整批上架前冒煙才抓到。 */
  .v4-live-current-copy > span,
  .v4-live-timeline small {
    font-size: 12px !important;
  }

  /* 🔴 這兩組在 qtravel-rhythm-v56.css 是「高權重 + !important」寫死 11px
   * （#mobile-bottom-nav.mobile-bottom-nav a span、body.ql-visual-lock
   * .ql-foot-stats span）。兩邊都 !important 時比權重，上面那組 class 選擇器
   * 贏不了——實測仍是 11px，所以用同等權重再寫一次（後載入者勝）。 */
  #mobile-bottom-nav.mobile-bottom-nav a,
  #mobile-bottom-nav.mobile-bottom-nav a span,
  body.ql-visual-lock .ql-foot-stats span {
    font-size: 12px !important;
  }

  /* ── 2. 點擊區下限 44px ───────────────────────────── */

  /* 直接長高：不在密集列表裡，多幾 px 不影響版面 */
  .ql-allguide-chiprow a,
  .v3-brand,
  .v3-line-auth,
  .ql-mobile-brand,
  .ql-mobile-destination,
  .qg-ai-loc,
  [data-action="ai-quick-prompt"],
  /* 「我的 › 旅程」列上的按鈕（27-36px） */
  .ql-my-panel-actions button,
  .ql-my-row-actions button {
    min-height: 44px;
  }

  /* 頂部圖示鈕（關閉、返回、選單）只有 38px 寬，旁邊有空間，直接加寬 */
  .ql-editor-actions button,
  .ql-mobile-ai-back,
  .ql-mobile-ai-menu {
    min-width: 44px;
  }

  /* 🔴 頁首的通知／LINE 登入鈕（34px 寬）不能加寬：「我的」頁首是
   * grid 142px 134px 70px 寫死、剛好塞滿 358px，實測加 min-width 後
   * LINE 鈕被擠出畫面右緣 4px。改用 ::before 疊透明命中區（外觀不動）。
   * 用 ::before 是因為 LINE 鈕的 ::after 已經是綠色登入狀態圓點。
   * 兩鈕間距只有 2px，置中加寬會在中間重疊約 8px，點重疊處的人想按
   * 「通知」卻進了 LINE 登入——所以並排時左邊那顆只往左長、右邊那顆
   * 只往右長（右側還有 16px 頁面邊距），命中區互不重疊。 */
  .ql-mobile-head-actions button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
    background: transparent;
  }
  .ql-mobile-head-actions button:first-child:not(:last-child)::before {
    left: auto;
    right: 0;
    transform: translateY(-50%);
  }
  .ql-mobile-head-actions button:last-child:not(:first-child)::before {
    left: 0;
    transform: translateY(-50%);
  }

  /* AI 輸入列：相機／語音／定位 32x23、送出 39x39。
   * 欄寬原本寫死 32px，只改 min-width 會被 grid 欄寬夾住，所以連欄一起改。 */
  .ql-ai-mobile-compose {
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px 44px;
  }
  .ql-ai-mobile-compose button {
    min-height: 44px;
  }
  .ql-ai-mobile-compose .ql-send {
    width: 44px;
    height: 44px;
  }

  /* 「我的」分頁列：7 格、已經是橫向捲動（overflow-x:auto）。
   * 每格左右內距 2px→7px 撐到 44px 寬，同時 gap 16px→6px：
   * 字與字的間距仍是 7+6+7=20px，跟原本 2+16+2 一樣，畫面位置不變。
   * 作用中底線原本 left/right:0，跟著內縮 5px 維持原長度。 */
  .ql-my-tabs {
    gap: 6px;
  }
  .ql-my-tabs a {
    padding-inline: 7px;
  }
  .ql-my-tabs a.is-active::after {
    left: 5px;
    right: 5px;
  }
}