/* ============================================================================
   跨平台導流共用元件 cross-network —— 樣式層（工程站／靜態站版本）
   標記由 tools/cross-network.py 產生並貼進 19 頁的 <footer>，⛔ 不要手改 HTML。
   視覺規格見內部文件（⛔ 路徑不寫在這裡：本檔會被公開放送，見下方警語）。

   ⚠️🔴 這個檔案會被「公開放送」——repo 根目錄＝部署根目錄，本檔線上可直接讀取。
      ⇒ ⛔ 不得在註解裡寫入內部資訊：不寫營運資料夾路徑、不寫利潤／成本／價差、
        不寫內部代號與後台狀態。（2026-08-23 資安閘門清理，⛔ 請不要再加回去。）

   ── 為什麼是獨立一支 CSS，不內嵌 ─────────────────────────────────────────
   這個區塊會出現在 19 個 .html 檔裡。內嵌等於同一份樣式複製 19 份，
   改一個數字要改 19 個地方，遲早分岔。本站無建置流程，純靜態一樣吃得到
   外部 CSS，第二頁起走瀏覽器快取，成本只有第一次的 +1 request。
   （沿用本元件既有的同一個判斷，⛔ 不另立新規。）

   ── 🔴 全檔最重要的一條：⛔ 一個顏色都不寫 ───────────────────────────────
   規格 §3.2。全檔沒有任何 color / background 的具體色值，只用 currentColor
   ＋ opacity 繼承既有頁尾（本站頁尾是 .bg-gray-900 + .text-gray-400）。
   這一條同時解決「各宿主站設計語言不同」與「深／淺色都要能用」：
     ・現況深色頁尾 → 淺灰文字、淺灰分隔線，自動融入
     ・日後頁尾若改淺色、或導入 prefers-color-scheme → 這個區塊自動跟著切，
       ⛔ 不需要被列進改版清單、⛔ 不用改這支 CSS 一個字
   ⚠️ 本站目前⛔ 沒有淺色模式／⛔ 沒有 prefers-color-scheme 切換（頁尾恆為
      gray-900 深色）。上面那句是「日後有的話會自動對」，不是「現在有兩套」。

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

   ⛔ 無平台 logo、⛔ 無圖示字型（本站雖已載入 Font Awesome，本區塊刻意不用）、
   ⛔ 無按鈕、⛔ 無卡片、⛔ 無邊框、⛔ 無橫幅、⛔ 無浮動。

   ── 🔴 對比度基準（2026-08-23 品質閘門 QB-1，⛔ 改 opacity 前必讀）─────────
   「零色值」讓本元件的可讀性**完全由宿主頁尾的文字色決定**。本站頁尾基準是
   bg-gray-900 rgb(17,24,39) 上的 text-gray-400 rgb(156,163,175)＝ 6.99:1，
   **本身就已接近 AA 下限**；opacity 一乘下去就掉到 4.5:1 以下。
   ⇒ 本站基準下的硬門檻：**文字類 opacity ⛔ 不得低於 .76**（.76 ＝ 4.58:1）。
     對照：.5＝2.72｜.55＝2.98｜.6＝3.31｜.7＝4.05｜.8＝4.91｜.85＝5.38｜.95＝6.42
     （WCAG 2.x 相對亮度公式，先把 opacity 合成到頁尾底色再算。）
   ⚠️ 首版五處 opacity 落在 .5～.7 之間，全部低於 AA —— 原因是當初只驗了
      「顏色有沒有正確繼承」，⛔ 從頭到尾沒有算過任何一個對比度數字。
      **繼承正確 ≠ 讀得到。改 opacity 一律先算過再改，⛔ 不要目測。**
   ⚠️ aria-hidden 的純裝飾件（.xnet-rule 分隔線 .14、.xnet-sep「｜」）
      ⛔ 不受 .76 門檻約束 —— 它們不承載資訊。

   ── ⚠️ 換宿主（貼到另一站）之前必做 ──────────────────────────────────────
   上面那條 .76 是**本站頁尾基準算出來的**，⛔ 不是共用常數。
   本元件貼到任何新宿主之前，**先量該站頁尾的底色與文字基準色、重算門檻**，
   ⛔ 不要照抄數字、⛔ 不要貼完才驗。
   ============================================================================ */

/* 區塊外框。置中對齊以跟隨宿主頁尾的排版（text-center），⛔ 不自立門戶。 */
.xnet {
    max-width: 44rem;
    margin: 22px auto 18px;
    text-align: center;
}

/* 分隔線：⛔ 不宣告顏色，用 currentColor + 低不透明度。
   ⚠️ <hr> 刻意放在 <details> 之外 —— HTML 規範要求 <summary> 必須是
      <details> 的第一個子元素，規格 §3.3 的片段把 <hr> 放在 <details> 內是筆誤。
      視覺結果相同、標記合法。 */
.xnet .xnet-rule {
    height: 0;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: .14;
    margin: 0 0 2px;
}

/* ── <summary>：收合時全站每頁就只多這一行 12px 的淡文字 ──────────────────
   ✅ 用原生 <details>：零 JS、零相依、鍵盤可操作、螢幕閱讀器原生支援，
      無障礙⛔ 不用另寫 ARIA。
   觸控目標：padding 12px×2 + line-height 20px = 44px（ui-ux 鐵則）。 */
.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;
    /* 🔴 QB-1：原 .6 ＝ 3.31:1，⛔ 不過 AA。這一行是全站 19 頁**唯一 100% 讀者
       都會看到**的一行（收合態），⛔ 全區塊最不能將就的一格。 */
    opacity: .8;                       /* 4.91:1 ✅ */
    -webkit-user-select: none;
    user-select: none;
}
.xnet .xnet-summary::-webkit-details-marker { display: none; }
/* 展開後整行提亮＝箭頭、「展開／收合」字樣之外的第三種狀態訊號。
   ⛔ 不要調成與收合態同值，否則這個訊號就沒了。 */
.xnet .xnet-details[open] > .xnet-summary { opacity: .95; }   /* 6.42:1 ✅ */
.xnet .xnet-summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── 🔴 展開指示符（品質閘門 Q-1，代購站 2026-08-23 的必修項）────────────
   代購站第一版把原生三角形拿掉卻⛔ 沒補替代符號 ⇒ 收合時整行讀起來像
   靜態說明文字，讀者不知道可以點開，整個區塊等於失效。本站一開始就補兩個：
     ① 左側箭頭：用 currentColor 的兩條邊框畫出來（⛔ 不宣告顏色、⛔ 零圖檔、
        ⛔ 零圖示字型），收合時指右「›」、展開時指下「⌄」
     ② 右側「展開／收合」字樣（虛線底線，看起來就是可點的）：給不熟悉箭頭
        慣例的讀者一個明講的提示，兩態顯示不同的字

   ⚠️ 兩態是【兩個各自靜態旋轉的元素用 display 互換】，⛔ 不是同一個元素轉角度。
      代購站實測 Tailwind 的 group-open:rotate-* 無效（--tw-rotate 變了但
      transform 計算值不重新解析，兩態外觀完全相同）。本站雖然是自己寫的純 CSS、
      不吃那個坑，仍沿用同一個寫法：因為 display 互換⛔ 完全不需要動畫，
      而 rotate 的兩態切換遲早有人「順手」加上 transition。
      ⛔ 請不要改回單一元素 + transform 切換的寫法。

   ⚠️ 兩個指示符都是 aria-hidden —— 原生 <details>/<summary> 已經把展開狀態
      報給螢幕閱讀器了（expanded/collapsed），再唸一次「展開」是重複資訊。 */
.xnet .xnet-caret {
    flex: none;
    line-height: 0;
}
.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;
}
.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;
    opacity: .78;                      /* 🔴 QB-1：原 .5 ＝ 2.72:1 → 4.71:1 ✅ */
}

/* 導流文案（只有 🟡 以上的關聯才有；🔴 的中性列表⛔ 沒有這兩格） */
.xnet .xnet-lead {
    max-width: 32rem;
    margin: 2px auto 0;
    font-size: 13px;
    line-height: 24px;
    font-weight: 500;
    opacity: .9;
}
.xnet .xnet-text {
    max-width: 32rem;
    margin: 4px auto 0;
    font-size: 13px;
    line-height: 24px;
    opacity: .85;                      /* 🔴 QB-1：原 .7 ＝ 4.05:1 → 5.38:1 ✅
                                          ⚠️ 仍刻意低於 .xnet-lead 的 .9，保住
                                          「引言比本文亮」的層次。 */
}

/* 連結清單：文字連結，⛔ 不是按鈕、⛔ 不是卡片。
   觸控目標 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; }

/* 中性「集團其他事業」列表：**一個事業一行**（文案矩陣 §5.7 就是這樣排的）。
   ⚠️ 不能沿用上面那個 flex-wrap 橫排 —— 桌機寬度下兩個事業會被排進同一行，
      變成「心斎ノ翼｜五層獨棟包棟民宿　和日大阪房產｜大阪不動產資訊與購屋須知」
      一長串，讀者分不出哪個描述屬於哪個事業（375px 因為寬度不夠才碰巧折成兩行，
      ⛔ 不能靠「碰巧」）。⇒ 這一格改回 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;
    /* 🔴 QB-1 連帶調高（原 .8 ＝ 4.91:1，本來就過 AA）：說明文字 .xnet-desc 為了
       達 AA 被從 .6 拉到 .78，品牌名若停在 .8 就只剩 0.02 的差距 ⇒ E-1 把 desc
       移出 <a> 之後靠亮度建立的「品牌名 > 說明文字」層次會整個消失。
       拉到 .95 讓差距回到 .17（6.42:1 vs 4.71:1）。⛔ 不要調回 .8。 */
    opacity: .95;                      /* 6.42: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 鐵則：互動元素要有按下回饋 */
.xnet .xnet-list a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* 🔴 SEO 閘門 E-1（代購站 2026-08-23 必修項）：說明文字⛔ 不可以包在 <a> 裡面。
   包進去的話爬蟲讀到的錨文字會變成「品牌名｜功能描述」，19 頁 × 每條 = 一整批
   sitewide 精準匹配關鍵字錨文字，是明確的連結配置風險。
   ⇒ <a> 內只留品牌名，「｜」與說明文字一律在 </a> 之外。
   下面這兩個 class 就是「</a> 之外」那一段的樣式：字級／行高與品牌名相同，
   視覺上仍與品牌名接在同一行，使用者看不出差別，只是不再算進錨文字。
   ⛔ 不要「順手」把它們包回 <a> 裡。 */
.xnet .xnet-sep {
    font-size: 13px;
    line-height: 20px;
    /* aria-hidden 純裝飾，⛔ 不受 .76 門檻約束（不承載資訊）。但兩側都被 QB-1
       拉亮後，留在 .35 會讓這一列看起來斷成兩截 ⇒ 一起抬到 .5 維持整列連貫。 */
    opacity: .5;
}
.xnet .xnet-desc {
    display: inline-block;
    padding: 0 2px;
    font-size: 13px;
    line-height: 20px;
    opacity: .78;                      /* 🔴 QB-1：原 .6 ＝ 3.31:1 → 4.71:1 ✅ */
}
/* 連結後面的狀態註記（例：「（籌備中）」）。同樣在 </a> 之外，理由同上。 */
.xnet .xnet-note {
    font-size: 12px;
    line-height: 20px;
    opacity: .78;                      /* 🔴 QB-1：原 .55 ＝ 2.98:1 → 4.71:1 ✅
                                          「（籌備中）」是**擋掉「點進去發現不能買」
                                          落差**的那一格，讀不到等於沒寫。 */
}

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