/* ============================================================================
   跨平台導流共用元件 cross-network —— 樣式層(靜態站版本)

   ⚠️🔴 本檔會被公開放送,線上可直接讀取。
      ⇒ 註解內只寫「維護這支檔案本身需要的技術判準」。
        任何內部性質的資訊一律留在不出貨的專案文件裡,
        判準清單與完整沿革見該文件。

   ── 為什麼是獨立一支 CSS,不內嵌 ─────────────────────────────────────────
   這個區塊會出現在站上多個頁面。內嵌等於同一份樣式複製很多份,改一個數字
   要改很多地方,遲早分岔。本站無建置流程,純靜態一樣吃得到外部 CSS,
   第二頁起走瀏覽器快取,成本只有第一次的 +1 request。

   ── 🔴 全檔最重要的一條:一個顏色都不寫 ───────────────────────────────
   全檔沒有任何 color / background 的具體色值,只用 currentColor ＋ opacity
   繼承既有頁尾。本站兩套頁尾(首頁內嵌版、子頁共用的 .site-foot 版)都沒有在
   <footer> 本身宣告 color,兩者都是從 body { color: var(--text-main) } 一路
   繼承下來的同一個值——這代表本檔只需要一份 opacity 表就能同時服務兩套頁尾。

   ── 無動畫(這是硬約束,不是偏好) ────────────────────────────────────
   全檔無 transition、無 animation、無 @keyframes。
   展開/收合兩態的差異來自「形狀與文字本身」,不依賴任何動態效果
   ⇒ prefers-reduced-motion 的使用者看到的與一般使用者完全相同,
     本元件不需要 motion-reduce 例外處理。

   無平台 logo、無圖示字型、無按鈕、無卡片、無邊框、無橫幅、無浮動。

   ── 🔴 對比度基準(2026-08-29 本站實測,不是抄來的數字) ─────────────────
   已知失敗模式:零色值元件的可讀性完全由宿主頁尾的文字色決定,
   opacity 一乘下去可能跌破 AA。貼進本站之前先實測:

     本站兩套頁尾的 currentColor 來源都是 body { color: #E0E0E0 }
     (首頁與子頁樣式表的 --text-main 逐字相同),頁尾背景兩者也都是
     #050505(首頁 footer 的 bg-[#050505] ＝ 子頁樣式表的 --bg-deep)。

     ⇒ 基準對比度(opacity=1.0):#E0E0E0 on #050505 ＝ 15.44:1
       (WCAG 2.x 相對亮度公式實測計算。本站頁尾文字色是近白而非灰階,
       天花板比灰階基準的情況高得多。)

     opacity 對照表(本站基準下實測換算,非共用常數):
       .35＝2.59｜.40＝3.08｜.45＝3.63｜.50＝4.27｜.55＝4.98 ✅ AA 下限｜
       .60＝5.78｜.65＝6.66｜.70＝7.64｜.75＝8.70｜.80＝9.85｜.85＝11.10｜
       .90＝12.45｜.95＝13.89｜1.0＝15.44

     ⇒ 本站基準下的硬門檻:文字類 opacity 不得低於 .55(＝4.98:1)。
       本檔實際使用的最低值是 .65(＝6.66:1),留了明顯安全邊界。
   ⚠️ aria-hidden 的純裝飾件(.xnet-rule 分隔線、.xnet-sep「｜」)
      不受 .55 門檻約束——它們不承載資訊。

   ── ⚠️ 換宿主之前必做 ──────────────────────────────────────────────────
   上面整組數字是**本站頁尾基準算出來的**,不是共用常數。
   本元件貼到任何新宿主之前,先量該站頁尾的底色與文字基準色、重算門檻,
   不要照抄數字、不要貼完才驗。

   ── 🔴 失敗模式:被動繼承會被宿主的元素選擇器直接蓋掉 ─────────────────────
   本檔全檔刻意不宣告 color,靠「不寫 = 自動繼承」拿到宿主頁尾的文字色。這個
   假設在本站被戳破一次:子頁樣式表的 `.site-foot p { color: #5a5a5a }`
   是一條【元素選擇器】規則,直接命中本檔任何用 `<p>` 標記的元素(xnet-group-name／
   xnet-lead／xnet-text),而且因為本檔那幾個 class 本來沒有寫 color,兩邊根本
   沒有比特異性(specificity)——宿主那條是唯一一條有寫 color 的規則,直接生效,
   繼承鏈完全沒機會發生。實測結果:那三格被吃成 #5a5a5a(＝5.98:1 的錯誤基準,
   不是本檔設計的 15.44:1 基準),幸好乘上 .65/.90 之後還沒真的破 AA,
   但已經不是本檔設計時算的那個數字,是僥倖過關,不能算通過。
   〈瀏覽器 UA 預設樣式一樣會咬人〉:`<hr>` 元素在部分瀏覽器的內建樣式本身就帶
   `color: gray`(非任何站台 CSS 寫的,是規範內建值),xnet-rule 靠 currentColor
   畫的分隔線因此也拿到灰色而不是頁尾文字色——雖然它是 aria-hidden 裝飾件、
   不受 AA 門檻約束,但顏色跟設計預期不同,一樣是「以為會繼承、其實被蓋掉」同一種病。
   ⇒ **修法**:不是放寬「不寫色值」那條鐵律,而是把「不寫」改成「明講要繼承」——
   全檔每一條規則都補一行 `color: inherit;`。這仍然是零色值(inherit 是繼承
   指令、不是色票),但把「靠不寫、賭沒人跟我搶」的被動繼承,換成「明講要繼承、
   靠特異性去贏」的主動繼承。`.xnet .xnet-group-name`(2 個 class)的特異性
   本來就高於宿主 `.site-foot p`(1 class + 1 element),補上這行之後才會真的贏。
   ⚠️ 貼到下一個新宿主之前,除了重算 opacity 對照表,也要重跑這個檢查:
   逐一 `getComputedStyle(el).color` 量本檔每個 class 的實際渲染色,
   確認等於宿主 body 的文字色、不是被宿主某條舊規則直接命中蓋掉。
   不要只信「我沒寫 color 所以會繼承」這句話——本站就是反例。
   ============================================================================ */

/* 區塊外框。置中對齊以跟隨宿主頁尾的排版(text-align: center),不自立門戶。 */
.xnet {
    max-width: 44rem;
    margin: 22px auto 18px;
    text-align: center;
    color: inherit;    /* 防禦性基線,理由見檔頭「新發現的失敗模式」 */
}

/* 分隔線:不宣告顏色,用 currentColor + 低不透明度。
   ⚠️ <hr> 刻意放在 <details> 之外——HTML 規範要求 <summary> 必須是
      <details> 的第一個子元素。視覺結果相同、標記合法。 */
.xnet .xnet-rule {
    height: 0;
    border: 0;
    border-top: 1px solid currentColor;
    color: inherit;    /* <hr> 部分瀏覽器 UA 預設帶 color: gray,明講繼承蓋掉它 */
    opacity: .14;
    margin: 0 0 2px;
}

/* ── <summary>:收合時全站每頁就只多這一行 12px 的淡文字 ──────────────────
   ✅ 用原生 <details>:零 JS、零相依、鍵盤可操作、螢幕閱讀器原生支援,
      無障礙不用另寫 ARIA。
   觸控目標:padding 12px×2 + line-height 20px = 44px(ui-ux 鐵則)。
   🔴 這一行是全站每一頁**唯一 100% 讀者都會看到**的一行(收合態),
      opacity 給到 .70(7.64:1),遠高於本站 .55 的硬門檻。 */
.xnet .xnet-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;          /* 拿掉原生三角形;替代指示符見下方 .xnet-caret */
    padding: 12px 4px;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: .18em;
    color: inherit;    /* 明講繼承,理由見檔頭「新發現的失敗模式」 */
    opacity: .70;                       /* 7.64:1 ✅ */
    -webkit-user-select: none;
    user-select: none;
}
.xnet .xnet-summary::-webkit-details-marker { display: none; }
/* 展開後整行提亮＝箭頭、「展開/收合」字樣之外的第三種狀態訊號。
   不要調成與收合態同值,否則這個訊號就沒了。 */
.xnet .xnet-details[open] > .xnet-summary { opacity: .85; }   /* 11.10:1 ✅ */
.xnet .xnet-summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── 展開指示符(已知失敗模式之一,務必保留兩種訊號)──
     ① 左側箭頭:用 currentColor 的兩條邊框畫出來(不宣告顏色、零圖檔、
        零圖示字型),收合時指右「›」、展開時指下「⌄」
     ② 右側「展開/收合」字樣(虛線底線,看起來就是可點的)

   ⚠️ 兩態是【兩個各自靜態旋轉的元素用 display 互換】,不是同一個元素轉角度
      (實測:Tailwind 的 group-open:rotate-* 在此寫法下無效)。
   ⚠️ 兩個指示符都是 aria-hidden——原生 <details>/<summary> 已經把展開狀態
      報給螢幕閱讀器了,再唸一次是重複資訊。 */
.xnet .xnet-caret {
    flex: none;
    line-height: 0;
    color: inherit;
}
.xnet .xnet-caret-closed,
.xnet .xnet-caret-open {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
}
.xnet .xnet-caret-closed { transform: rotate(-45deg); }   /* › 指右＝可以點開 */
.xnet .xnet-caret-open   { transform: rotate(45deg); display: none; }  /* ⌄ 指下＝已展開 */
.xnet .xnet-details[open] > .xnet-summary .xnet-caret-closed { display: none; }
.xnet .xnet-details[open] > .xnet-summary .xnet-caret-open   { display: inline-block; }

.xnet .xnet-toggle {
    flex: none;
    letter-spacing: normal;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    color: inherit;
}
.xnet .xnet-toggle-open { display: none; }
.xnet .xnet-details[open] > .xnet-summary .xnet-toggle-closed { display: none; }
.xnet .xnet-details[open] > .xnet-summary .xnet-toggle-open   { display: inline; }

/* ── 展開後的內容 ───────────────────────────────────────────────────────── */
.xnet .xnet-body { padding-bottom: 6px; }

.xnet .xnet-group { margin: 12px 0 0; }

.xnet .xnet-group-name {
    margin: 0;
    font-size: 11px;
    line-height: 20px;
    letter-spacing: .1em;
    color: inherit;    /* 明講繼承——本站 guide.css 的 `.site-foot p{color}` 會
                           直接命中這個 <p>,不補這行會被吃成 #5a5a5a,見檔頭。 */
    opacity: .65;                      /* 6.66:1 ✅ */
}

/* 導流文案(僅關聯度較高的群組才有這兩格;中性列表沒有) */
.xnet .xnet-lead {
    max-width: 32rem;
    margin: 2px auto 0;
    font-size: 13px;
    line-height: 24px;
    font-weight: 500;
    color: inherit;    /* 理由同 .xnet-group-name */
    opacity: .90;                      /* 12.45:1 ✅ */
}
.xnet .xnet-text {
    max-width: 32rem;
    margin: 4px auto 0;
    font-size: 13px;
    line-height: 24px;
    color: inherit;    /* 理由同 .xnet-group-name */
    opacity: .80;                      /* 9.85:1 ✅
                                          ⚠️ 刻意低於 .xnet-lead 的 .90,
                                          保住「引言比本文亮」的層次。 */
}

/* 連結清單:文字連結,不是按鈕、不是卡片。
   觸控目標 padding 12px×2 + line-height 20px = 44px。 */
.xnet .xnet-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 2px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.xnet .xnet-list > li { margin: 0; padding: 0; }

/* 中性「集團其他事業」列表:一個事業一行(桌機寬度下橫排會讓兩個事業擠進
   同一行,讀者分不出描述屬於哪個事業)。⇒ 這一格用 block 流,每個 <li> 自己
   一行,桌機與手機的斷行結果一致。 */
.xnet .xnet-list-neutral { display: block; }

.xnet .xnet-list a {
    display: inline-block;
    padding: 12px 8px;
    font-size: 13px;
    line-height: 20px;
    color: inherit;
    /* 品牌名必須連帶調高過中性列表的說明文字(已知失敗模式:兩者靠亮度建立
       「品牌名 > 說明文字」的層次,若兩者太接近層次會消失)。
       .90 vs 下面 .xnet-desc/.xnet-note 的 .65,差距 0.25(12.45:1 vs 6.66:1)。 */
    opacity: .90;                      /* 12.45:1 ✅ */
    text-decoration: none;
}
.xnet .xnet-list a:hover,
.xnet .xnet-list a:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.xnet .xnet-list a:active { opacity: .55; }   /* ui-ux 鐵則:互動元素要有按下回饋;
                                                  .55 仍是本站 AA 下限值,按下態
                                                  短暫存在、非常態呈現,可以貼著門檻。 */
.xnet .xnet-list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* 說明文字不可以包在 <a> 裡面:包進去的話錨文字會變成「品牌名｜功能描述」。
   ⇒ <a> 內只留品牌名,「｜」與說明文字一律在 </a> 之外。
   下面這兩個 class 就是「</a> 之外」那一段的樣式:字級/行高與品牌名相同,
   視覺上仍與品牌名接在同一行,只是不再算進錨文字。 */
.xnet .xnet-sep {
    font-size: 13px;
    line-height: 20px;
    color: inherit;
    /* aria-hidden 純裝飾,不受 .55 門檻約束(不承載資訊)。 */
    opacity: .5;
}
.xnet .xnet-desc {
    display: inline-block;
    padding: 0 2px;
    font-size: 13px;
    line-height: 20px;
    color: inherit;
    opacity: .65;                      /* 6.66:1 ✅ */
}
/* 連結後面的狀態註記(例:「(籌備中)」)。同樣在 </a> 之外,理由同上。 */
.xnet .xnet-note {
    font-size: 12px;
    line-height: 20px;
    color: inherit;
    opacity: .65;                      /* 6.66:1 ✅ */
}

/* 375px:本區塊全部是文字流 + flex-wrap,不會產生橫向捲動,
   不需要任何媒體查詢。這裡不寫 @media 是刻意的,不是漏了。 */