/* ==========================================================================
   響應式重排 — 對應 02_設計規格表.md 第 9 節
   桌機 1024–1920 完全等比；平板 768–1023 兩欄；手機 <768 單欄。
   平板與手機改用固定字級（rem/px），不再由 u 驅動。
   ========================================================================== */

/* --------------------------------------------------------------------------
   平板 768–1023
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .container { width: min(92%, 960px); max-width: none; }

  .topbar { height: 40px; }
  .topbar__inner { font-size: 14px; }
  .topbar__tagline { display: none; }          /* 手機才隱藏，平板保留見下 */
  @media (min-width: 768px) { .topbar__tagline { display: block; } }

  .site-header { height: 72px; }
  .site-logo img, .site-logo svg { height: 48px; }

  /* 導覽收進漢堡選單 */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer; color: var(--c-teal);
  }
  .nav-toggle svg { width: 26px; height: 26px; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 86vw);
    background: var(--c-white);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 80px 24px 24px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, .12);
    transform: translateX(100%);
    transition: transform 220ms ease, visibility 220ms ease;
    overflow-y: auto; z-index: 60;
    /* 關閉時移出無障礙樹：避免鍵盤 Tab 聚焦到看不見的連結，
       同時讓 fixed 元素不再計入 document.scrollWidth（消除水平捲動）。 */
    visibility: hidden;
  }
  .main-nav[data-open="true"] { transform: translateX(0); visibility: visible; }
  .main-nav__link {
    font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--c-border);
    min-height: 44px; display: flex; align-items: center;
  }
  .main-nav__link:hover, .main-nav__link[aria-current="page"] { border-bottom-color: var(--c-border); }
  .nav-dropdown {
    /* 用 inherit 而非 visible，否則會蓋掉 .main-nav 關閉時的 hidden，
       導致選單收起後下拉連結仍可被 Tab 聚焦。 */
    position: static; opacity: 1; visibility: inherit; transform: none;
    box-shadow: none; padding: 0 0 0 16px;
  }
  .nav-dropdown a { padding: 12px 0; font-size: 16px; min-height: 44px; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(6, 32, 70, .42);
    /* v1.21：原本是 55，比 .main-nav 的 60 低，看起來沒問題，實際全錯。
       .site-header 是 position: sticky; z-index: 50，會建立獨立的堆疊脈絡，
       .main-nav 在 header 裡面，它的 60 只在該脈絡內有效，對外仍等同 50。
       遮罩是 body 的直接子元素，55 > 50，所以整片蓋在抽屜上面 ——
       抽屜看得到卻點不動，而且被染成灰藍色。
       實測：點選單連結中心點時 elementFromPoint 回傳的是 .nav-backdrop。
       改成 45，壓到 header 之下，遮罩仍蓋住頁面內容但不再擋住抽屜。 */
    z-index: 45;
  }

  .btn { min-height: 44px; min-width: 110px; font-size: 15px; padding-inline: 18px; }
  /* 40px 正好是觸控按鈕尺寸，標籤不該長成那樣，降到 32px */
  .pill { min-height: 32px; font-size: 13px; padding-inline: 12px; }
  .chip { min-height: 44px; font-size: 14px; }

  .section { padding-block: 48px; }
  .section__eyebrow { font-size: 14px; margin-bottom: 10px; }
  .section__title { font-size: 28px; }
  .section__subtitle { font-size: 16px; }

  /* Hero：左文字 58%／右插圖 42% */
  .hero { padding-block: 36px; }
  .hero__grid { grid-template-columns: 58% 42%; gap: 24px; }
  .hero__eyebrow { font-size: 14px; margin-bottom: 14px; }
  .hero__title { font-size: 40px; line-height: 1.25; }
  .hero__slogan { font-size: 30px; }
  .hero__intro p { font-size: 16px; line-height: 1.8; }
  .hero__point-title { font-size: 19px; }
  .hero__point-desc { font-size: 16px; }
  .hero__points { gap: 16px; }
  .check-item--hero .check-item__mark { width: 40px; height: 40px; }
  .hero__tags { gap: 10px; margin-top: 20px; }

  /* IDEAS 改為插圖上方一行橫排 */
  .hero__deco {
    grid-column: 2; grid-row: 1;
    display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap;
    padding: 0 0 12px; margin-bottom: 8px; min-width: 0;
  }
  .hero__deco::before, .hero__deco-dot, .hero__deco-diamond { display: none; }
  /* 三行併一行時 <br> 被隱藏，文字會黏成 IDEASTOREALITY。
     改以 flex gap 在各文字節點之間補回間距。 */
  .hero__deco-title {
    font-size: 18px; line-height: 1.3; padding: 0; min-width: 0;
    display: flex; flex-wrap: wrap; gap: 0 .38em;
  }
  .hero__deco-title span { display: inline; }
  /* 三行合併成一行後字串很長，需可換行否則會撐破容器 */
  .hero__deco-sub {
    font-size: 13px; line-height: 1.5; padding: 0; margin: 0;
    min-width: 0; overflow-wrap: anywhere;
    display: flex; flex-wrap: wrap; gap: 0 .38em;
  }
  .hero__deco-sub span { display: inline; }
  .hero__figure { grid-column: 2; grid-row: 2; gap: 12px; padding-top: 0; }
  .hero__figure svg { width: 58%; height: auto; }
  .hero__layer-en { font-size: 14px; }
  .hero__layer-zh { font-size: 15px; }

  .tracks { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .track-card { padding: 20px; }
  .track-card__title { font-size: 22px; line-height: 1.4; }
  .track-card__desc { font-size: 15px; line-height: 1.75; }
  .track-card__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* 服務：2 欄，圖區維持右側 */
  .services { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card { min-height: 220px; padding: 16px; }
  .service-card__title { font-size: 20px; }
  .service-card__desc { font-size: 15px; line-height: 1.6; }
  .check-item { font-size: 14px; line-height: 1.5; }
  .check-item__mark { width: 16px; height: 16px; }

  /* 流程：4 + 3 兩列 */
  .process { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .process-step { min-height: auto; }
  .process-step__title { font-size: 16px; }
  .process-step__desc { font-size: 14px; line-height: 1.5; }
  .process-step__no { width: 34px; height: 34px; font-size: 16px; }
  .process-step__icon { width: 56px; height: 56px; }
  .process-step__icon--img { width: 68px; height: 68px; }
  .process-step__arrow { right: -16px; top: 30px; width: 16px; }
  .process-step:nth-child(4n) .process-step__arrow { display: none; }

  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .why-card { min-height: auto; padding: 16px; }
  .why-card__title { font-size: 17px; }
  .check-item--soft { font-size: 14px; line-height: 1.7; }

  .voice-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .voice-card { padding: 20px; }
  .voice-card__body { font-size: 15px; line-height: 1.75; }

  .info-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .page-hero__title { font-size: 32px; }
  .page-hero__summary { font-size: 16px; line-height: 1.8; }
  .prose p, .prose li { font-size: 16px; }
  .prose h2 { font-size: 22px; }
  .prose h3 { font-size: 18px; }

  .form { max-width: none; }
  .form__control { min-height: 48px; font-size: 16px; }
  textarea.form__control { min-height: 150px; }

  .site-footer__top { flex-wrap: wrap; }
  .site-footer__logo img, .site-footer__logo svg { height: 44px; }
  .footer-nav { gap: 16px; }
  .footer-nav a { font-size: 15px; }
  .site-footer__bottom { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   手機 < 768：單欄
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .container { width: 90%; }

  .topbar__tagline { display: none; }
  .topbar__inner { justify-content: space-between; }

  .site-header { height: 64px; }
  .site-logo img, .site-logo svg { height: 40px; }
  .site-header .btn--cta { min-width: 88px; padding-inline: 12px; font-size: 14px; }

  .section { padding-block: 36px; }
  .section__title { font-size: 24px; }
  .section__subtitle { font-size: 15px; }

  /* Hero 單欄，順序：眉標→主標→副標→介紹→重點→標籤→插圖
     平板規則把 .hero__deco / .hero__figure 明確放到第 2 欄，
     單欄時必須重設，否則瀏覽器會產生隱含的第 2 欄，把文字擠成窄條。
     明確定位的 grid item 不受 order 影響，所以改用 grid-row 排序。 */
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__text { grid-column: 1; grid-row: 1; }
  .hero__deco { grid-column: 1; grid-row: 2; margin-top: 24px; margin-bottom: 4px; padding: 0; }
  .hero__figure { grid-column: 1; grid-row: 3; gap: 14px; padding-top: 0; }
  .hero__figure svg { width: 60%; }
  .hero__title { font-size: 32px; }
  .hero__slogan { font-size: 24px; }
  .hero__intro p { font-size: 15px; }
  .hero__point-title { font-size: 18px; }
  .hero__point-desc { font-size: 15px; }
  .check-item--hero .check-item__mark { width: 36px; height: 36px; }
  .hero__layer-en { font-size: 13px; }
  .hero__layer-zh { font-size: 14px; }

  .tracks { grid-template-columns: 1fr; }
  .track-card__title { font-size: 20px; }
  /* 串接條改 2×2 分段 */
  .linkbar { flex-wrap: wrap; }
  .linkbar__seg { flex: 1 1 50%; min-height: 48px; font-size: 14px; }
  .linkbar__seg:nth-child(2) { border-right: 0; }

  /* 服務：單欄，圖區移到卡片頂部 */
  .services { grid-template-columns: 1fr; }
  .service-card { min-height: auto; padding-top: 176px; }
  .service-card__text { width: 100%; }
  .service-card__title { font-size: 19px; }
  .service-card__media {
    left: 0; right: 0; top: 0; bottom: auto; height: 160px;
    justify-content: center;
  }
  /* 手機：圖區移到卡片頂端，滿版型改為向下淡出（文字在圖的下方，不重疊） */
  .service-card__media--full svg,
  .service-card__media--full img {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  /* 手機單欄時圖區改為滿寬置頂，去背型也一樣 */
  .service-card__media--full { left: 0; }

  /* 流程改直向時間軸 */
  .process { grid-template-columns: 1fr; gap: 0; }
  .process-step {
    flex-direction: row; align-items: flex-start; text-align: left;
    gap: 14px; padding: 14px 0 22px 0; position: relative;
  }
  .process-step::before {
    content: ""; position: absolute; left: 21px; top: 58px; bottom: 0;
    width: 2px; background: var(--c-teal-soft);
  }
  .process-step:last-child::before { display: none; }
  .process-step__no { flex: 0 0 auto; width: 44px; height: 44px; }
  .process-step__icon {
    position: absolute; right: 0; top: 10px;
    width: 52px; height: 52px; margin: 0;
  }
  .process-step__icon--img { width: 60px; height: 60px; }
  .process-step__body { padding-right: 70px; }
  .process-step__body { flex: 1 1 auto; padding-right: 52px; }
  .process-step__title { margin-top: 4px; font-size: 16px; }
  .process-step__arrow {
    right: auto; left: 15px; top: auto; bottom: 2px;
    transform: rotate(90deg); width: 16px;
  }
  .process-step:last-child .process-step__arrow { display: none; }

  .why-grid { grid-template-columns: 1fr; }
  .voice-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }

  .page-hero__title { font-size: 26px; }
  .prose p, .prose li { font-size: 15px; }
  .prose table { display: block; overflow-x: auto; white-space: nowrap; }

  .site-footer { text-align: center; }
  .site-footer__top { flex-direction: column; align-items: center; gap: 16px; }
  .footer-nav {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 12px; text-align: left; width: 100%;
  }
  .site-footer__bottom { flex-direction: column; align-items: center; gap: 8px; }
  .site-footer__keywords { justify-content: center; }
}

/* 觸控裝置：hover 效果改由按下狀態呈現 */
@media (hover: none) {
  /* .pill 不在此列：它是標籤不是按鈕，按下不該有回饋 */
  .btn:active, .chip:active { filter: brightness(.96); }
}

/* 列印 */
@media print {
  .topbar, .site-header, .site-footer, .nav-toggle, .btn { display: none !important; }
  body { color: #000; }
  .container { width: 100%; }
}

/* --------------------------------------------------------------------------
   觸控目標最小尺寸 — 02 規格第 5.1 節與第 9.3 節「觸控目標 ≥ 44px」
   在觸控與窄螢幕上，把文字型連結的可點範圍撐到 44px，
   但用 inline-flex + 垂直內距，不影響文字視覺位置。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .more-link,
  .topbar__phone,
  .footer-nav a,
  .site-footer__bottom a,
  .breadcrumb a,
  .lang-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-logo { display: inline-flex; align-items: center; min-height: 44px; }

  /* Footer 導覽在手機是 2 欄格，撐高會拉長頁面，改以外距補足點擊區 */
  .footer-nav a { min-height: 44px; }

  /* 聯絡卡的電話與 Email 是主要操作，各自獨立一行，可直接撐高 */
  .info-card__value a { display: inline-flex; align-items: center; min-height: 44px; }

  /* 夾在句子中的行內連結（同意條款的隱私權政策、內文裡的 Email）不能撐高，
     否則會把行距拉開。改用垂直 padding 加等量負 margin：
     行內元素的 padding-block 不影響行框高度，但會擴大點擊範圍。 */
  .form__consent label a,
  .section__subtitle a,
  .prose p a,
  .empty-state a {
    padding-block: 15px;
    margin-block: -15px;
  }
}

/* --- 訪客聯絡表單：手機觸控目標 --- */
@media (max-width: 1023px) {
  /* 資訊卡的電話與 Email 是行內連結，用垂直 padding 擴大點擊區不影響行距 */
  .inquiry__dl a { padding-block: 15px; margin-block: -15px; }
  /* 同意勾選框本身放大，label 也可點 */
  .form__consent input[type="checkbox"] { width: 22px; height: 22px; }
  .form__consent { padding-block: 11px; }
}

/* --- v1.6 新增區塊：平板與手機 --- */
@media (max-width: 1023px) {
  .standards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .standard-card { padding: 16px; }
  .standard-card__title { font-size: 16px; line-height: 1.4; }
  .standard-card__desc { font-size: 14px; line-height: 1.7; }

  .about { grid-template-columns: 1fr 240px; gap: 24px; }
  .about__para { font-size: 15px; line-height: 1.8; max-width: none; }
  .about__quote { font-size: 15px; line-height: 1.7; max-width: none; }
  .timeline__text { font-size: 15px; }

  .applications { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .app-card__title { font-size: 16px; }
  .app-card__desc { font-size: 13px; line-height: 1.6; }

  /* summary 的高度由內容撐開，內距不足時會低於 44px 觸控下限 */
  .faq-item--toggle summary { font-size: 15px; padding: 14px 16px; min-height: 44px; box-sizing: border-box; }
  .faq-item--toggle .faq-item__a { font-size: 14px; padding: 0 16px 14px 40px; }
  .cta-band__title { font-size: 22px; line-height: 1.5; }
}

@media (max-width: 767px) {
  .standards { grid-template-columns: 1fr; }
  /* 關於：時間軸移到文字下方，改橫向捲動節省高度 */
  .about { grid-template-columns: 1fr; gap: 20px; }
  .applications { grid-template-columns: 1fr; }
  .app-card__media { aspect-ratio: 16 / 10; }
  .cta-band__title { font-size: 20px; }
  .cta-band__meta { font-size: 13px; }
}

/* ==========================================================================
   行高修正 — v1.19
   --------------------------------------------------------------------------
   成因：全站字級與行高原本都由 --u（= 100cqw / 1294）等比驅動。
   ≤1023px 時上面的規則把「字級」改成固定 px，但有 15 個元素的
   「行高」仍留在 calc(N * var(--u))。手機 360px 寬時 u = 0.278px，
   例如 calc(26 * var(--u)) 只有 7.2px，而字級是 18px —— 行高不到
   字級的四成，文字一換行就互相疊住。

   這裡一律改成「無單位行高」。無單位值會以各元素自己的 font-size 為
   基準，往後再調字級也不會重蹈覆轍，不必同步維護兩個數字。

   以無頭瀏覽器實測確認：修正前 360px 寬有 15 個元素行高／字級比
   低於 1.15、5 組文字實際重疊；修正後兩者皆為 0。
   ========================================================================== */
@media (max-width: 1023px) {
  .hero__slogan            { line-height: 1.4; }
  .hero__point-title       { line-height: 1.45; }
  .hero__point-desc        { line-height: 1.6; }

  .service-card__title     { line-height: 1.4; }
  .service-card__bullets .check-item,
  .service-card__bullets .check-item span { line-height: 1.6; }

  .process-step__title     { line-height: 1.45; }

  .why-card__title         { line-height: 1.45; }
  .why-card__no            { line-height: inherit; }   /* 編號與標題同一行，跟著標題走 */

  .timeline__text          { line-height: 1.6; }
  .timeline__note          { line-height: 1.6; }

  .app-card__title         { line-height: 1.4; }

  .faq-item--toggle summary,
  .faq-item--toggle summary span { line-height: 1.5; }
  .faq-item__no            { line-height: inherit; }
  .faq-item--toggle .faq-item__a { line-height: 1.7; }

  .cta-band__meta          { line-height: 1.7; }
}

/* ==========================================================================
   iPhone 瀏海與底部橫條 — v1.19
   --------------------------------------------------------------------------
   base.html 的 viewport 加了 viewport-fit=cover，頁面會延伸到瀏海底下，
   所以左右內距必須自己避開。env() 在非瀏海裝置與舊瀏覽器回退為 0，
   對 Android 與桌機完全沒有影響。

   只處理左右（橫放時瀏海在側邊）與底部（home indicator）。
   頂部不處理：本站頁首不是 position: fixed，正常文件流不會被蓋到。
   ========================================================================== */
@supports (padding: env(safe-area-inset-left)) {
  .container,
  .topbar__inner,
  .site-header__inner {
    padding-left:  max(var(--safe-pad-l, 0px), env(safe-area-inset-left));
    padding-right: max(var(--safe-pad-r, 0px), env(safe-area-inset-right));
  }
  /* 手機導覽抽屜是 fixed，右側與底部都要讓開 */
  .main-nav {
    padding-right: max(24px, env(safe-area-inset-right));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .site-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   聯絡資訊的觸控區間距 — v1.19
   .inquiry__dl a 用 padding-block:15px / margin-block:-15px 把可點範圍撐到
   44px 而不影響版面。但各列間距只有約 4px，撐大的觸控區會蓋住相鄰那一列
   的標籤 —— 實測電話連結的可點範圍往下壓過「Email」標籤 7.9px，
   往上壓過「Phone」標籤 11.9px，使用者想點 Email 會撥出電話。
   這裡把列距拉開到容得下 44px 觸控區，純間距調整，不動字級與顏色。
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .inquiry__dl dt { margin-top: 22px; }
  .inquiry__dl dt:first-child { margin-top: 0; }
  .inquiry__dl dd { margin-top: 16px; }
}

/* ==========================================================================
   高度塌陷修正 — v1.20
   --------------------------------------------------------------------------
   與 v1.19 的行高問題同一個根因，只是這次塌的是「高度」：
   非 media 區塊中有 33 個選擇器用 calc(N * var(--u)) 設定
   height / min-height，其中 15 個在 ≤1023px 沒有被覆寫。
   手機 360px 寬時 u = 0.278px，所以：

     .hero__figure          height: 600u → 166.9px（設計是 600px）
     .hero__deco            min-height: 460u → 128px
     .service-card__bullets .check-item__mark  height: 13u → 3.6px
     .pagination a          min-height: 44u → 12.2px（觸控下限失效）

   .hero__figure 塌成 167px 是首頁「Concept／構想…Product／商品」那串
   壓到下一區標題的原因：清單 6 項需要約 218px，容器只有 167px，
   而 overflow 是 visible，所以直接溢出 21.9px 蓋到下一區。

   .service-card__bullets .check-item__mark 塌成 3.6px 則是服務卡條列
   前面的勾選圖示變成小圓點的原因。

   以下一律改為固定 px。手機與平板本來就不走等比縮放，用固定值才正確。
   ========================================================================== */
@media (max-width: 1023px) {
  /* Hero 插圖區：改為自動高度，圖與清單各自撐開，不再互相牽制 */
  .hero__figure {
    height: auto;
    align-items: flex-start;
  }
  .hero__figure-img,
  .hero__figure > svg {
    height: auto;
    max-width: 44%;
    align-self: flex-start;
  }
  .hero__layers {
    padding-block: 0;
    justify-content: flex-start;
    gap: 10px;
  }
  .hero__layer::before { height: 6px; width: 6px; }

  .hero__deco { min-height: 0; }

  /* 勾選圖示：塌成 3~4px 的小點，改回看得見的尺寸 */
  .hero__point .check-item__mark { width: 40px; height: 40px; }
  .check-item--soft .check-item__mark { width: 15px; height: 15px; }
  .service-card__bullets .check-item__mark { width: 16px; height: 16px; }

  /* 觸控下限：min-height 塌掉會讓分頁連結只有 12px 高 */
  .pagination a,
  .pagination span { min-height: 44px; }
  .linkbar { min-height: 42px; }
  .badge { min-height: 24px; }

  .app-card__placeholder svg { height: 48px; }
  .process-step__arrow svg { height: 12px; }
  .timeline__item::before { width: 11px; height: 11px; }
}

/* 手機單欄：插圖與流程清單改上下排，不要並排擠在半個螢幕寬 */
@media (max-width: 767px) {
  .hero__figure { flex-direction: column; gap: 16px; }
  .hero__figure-img,
  .hero__figure > svg { max-width: 72%; align-self: center; }
  .hero__layers { width: 100%; }
}

/* --------------------------------------------------------------------------
   流程步驟的欄寬 — v1.20
   手機改直向時間軸後，.process-step 是 flex row：編號欄 + 內容欄。
   但編號欄沒有固定寬度，和內容欄一起瓜分剩餘空間，實測在 412px 寬時
   編號欄佔了 143.7px（裡面只有 44px 的圓圈，其餘是空白），
   內容欄只剩 173.1px，標題被迫斷成「系統 / 板級 / 規劃」這種窄條。
   固定編號欄寬度，把空間還給文字。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .process-step__head { flex: 0 0 auto; width: 44px; }
  .process-step__body { padding-right: 56px; }
}