/* Logo 區塊 */
    .use-header-logo { text-align: center; padding: 20px 0; }
    .use-header-logo img { max-width: 100%; height: auto; }

    /* --- 軟體教學專用美化樣式 --- */
    /* 👑 [註解]：引入全球變數調控全區主文字色彩 */
    .tutorial-container { margin-bottom: 30px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei", sans-serif; color: var(--color-text); }
    
    /* 文章主體卡片 */
    /* 👑 [修正處]：將純白背景與邊框改為全域 CSS 變數，實現暗黑模式自動換膚 */
    .main-tutorial-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 25px; margin-bottom: 25px; box-shadow: var(--shadow); }
    .tutorial-title-area { display: flex; align-items: center; border-bottom: 2px solid #337ab7; padding-bottom: 12px; margin-bottom: 15px; }
    /* 👑 [修正處]：標題文字改用 var(--color-text)，避免黑夜模式下字體因固定深色而隱形 */
    .tutorial-title-area h2 { font-size: 1.6rem; font-weight: 700; color: var(--color-text); margin: 0; display: inline-flex; align-items: center; gap: 10px; }
    .class-icon { color: #337ab7; }
    .class-icon.gift { color: #e74c3c; }
    .class-icon.news { color: #2ecc71; }
    
    /* 👑 [修正處]：前言區塊改用 var(--color-card-secondary) 與變數文字，確保明暗對比適中 */
    .tutorial-explain { font-size: 1.15rem; line-height: 1.7; color: var(--color-text-muted); background: var(--color-card-secondary); padding: 15px; border-left: 4px solid #ccd6dd; border-radius: 0 4px 4px 0; margin: 15px 0; }
    
    /* 來源與按鈕設定 */
    /* 👑 [修正處]：分隔線改用變數邊框，避免在夜間呈現不自然的高亮刺眼虛線 */
    .meta-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 15px; padding-top: 12px; border-top: 1px dashed var(--color-border); font-size: 0.9rem; color: var(--color-text-muted); }
    .action-btn { display: inline-flex; align-items: center; gap: 6px; background-color: #337ab7; color: #fff !important; padding: 8px 16px; border-radius: 4px; text-decoration: none; font-weight: 600; transition: background 0.2s; }
    .action-btn:hover { background-color: #23527c; }
    .action-btn.gift-btn { background-color: #e74c3c; }
    .action-btn.gift-btn:hover { background-color: #c0392b; }

    /* 軟體資訊規格卡 (多檔支援) */
    /* 👑 [修正處]：將卡片容器全面對接全域暗黑換膚變數 */
    .software-spec-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 6px; margin: 20px 0; overflow: hidden; }
    /* 👑 [修正處]：規格標題背景改用 var(--color-card-secondary)，文字改用主文字色 */
    .spec-header { background: var(--color-card-secondary); padding: 12px 15px; font-weight: 700; color: var(--color-text); border-bottom: 1px solid var(--color-border); font-size: 1.1rem; }
    .spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    /* 👑 [修正處]：項目框線與文字顏色對接全域變數 */
    .spec-item { padding: 10px 15px; border-bottom: 1px solid var(--color-border); font-size: 0.95rem; color: var(--color-text); }
    /* 👑 [修正處]：隔行變色之背景完美對接次級卡片色 */
    .spec-item:nth-child(even) { background: var(--color-card-secondary); }
    .spec-label { font-weight: bold; color: var(--color-text-muted); margin-right: 8px; }
    .badge-prop { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.85rem; font-weight: 600; color: #fff; background: #95a5a6; }
    .badge-prop.freeware { background-color: #27ae60; }
    .badge-prop.shareware { background-color: #d35400; }

    /* 內嵌外部獨立文字區塊 (show_in = true) */
    /* 👑 [修正處]：內嵌富文本底框對接變數 */
    .embedded-text-block { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 20px; margin-bottom: 25px; }

    /* 教學步驟樣式區 */
    .steps-wrapper { margin-top: 30px; }
    /* 👑 [修正處]：步驟外殼對接變數，並引入對應的暗黑模式陰影律動 */
    .step-section { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow); }
    .step-header-title { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; margin-bottom: 15px; }
    .step-number { background: #337ab7; color: #fff; font-weight: 700; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.95rem; }
    /* 👑 [修正處]：教學標題與內文轉換為全域黑夜變數文字，確保完美顯色 */
    .step-title-text { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin: 0; }
    .step-description { font-size: 1.05rem; line-height: 1.7; color: var(--color-text); margin-bottom: 15px; }
    
    /* 👑 [修正處]：步驟圖片外容器底色改為適應暗黑之次級卡片背景 */
    .step-image-container { text-align: center; margin-top: 15px; background: var(--color-card-secondary); padding: 10px; border: 1px solid var(--color-border); border-radius: 4px; box-sizing: border-box; max-width: 100%; overflow: hidden; }
    /* [註解]：強迫圖片遵守最大寬度限制，搭配 display: block 防止底部產生不必要空隙 */
    .step-image-container img { max-width: 100% !important; height: auto !important; border-radius: 4px; box-shadow: var(--shadow); display: block; margin: 0 auto; box-sizing: border-box; }

    /* 響應式影片容器 */
    .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 15px 0; border-radius: 6px; }
    .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

    /* 分頁樣式 */
    .pagination-nav { display: flex; justify-content: center; margin: 30px 0; }
    /* 👑 [修正處]：分頁外層邊框與背景切換為對應變數 */
    .pagination-nav ul { display: inline-flex; list-style: none; padding: 0; margin: 0; border-radius: 4px; border: 1px solid var(--color-border); background: var(--color-card); }
    /* 👑 [修正處]：分頁連結文字與右側邊框調整 */
    .pagination-nav li a { display: block; padding: 8px 14px; text-decoration: none; color: #337ab7; border-right: 1px solid var(--color-border); font-weight: 600; }
    .pagination-nav li:last-child a { border-right: none; }
    .pagination-nav li a.current { background-color: #337ab7; color: #fff; cursor: default; }
    /* 👑 [修正處]：懸停（Hover）時的背景改為 var(--color-card-secondary)，防止暗黑模式下出現亮白塊 */
    .pagination-nav li a:hover:not(.current) { background-color: var(--color-card-secondary); }

    /* 👑 [修正處]：將媒體查詢斷點從 768px 提高至 1025px，全面攔截並修正 iPad / 平板尺寸下的版面擠壓問題 */
    @media (max-width: 1025px) {
        /* 👑 [修正處]：強迫外層 Grid 改為單欄排列，讓側邊欄自動退至下方，騰出完整寬度給主內容 */
        .layout__grid { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; }
        /* 👑 [修正處]：確保側邊欄轉為單欄時寬度為 100%，避免非同步推薦軟體寬度縮水錯位 */
        #software-aside { width: 100% !important; }
        
        .main-tutorial-card { padding: 15px !important; }
        .step-section { padding: 15px !important; }
        .tutorial-title-area h2 { font-size: 1.3rem; }
        .embedded-text-block { padding: 15px !important; }
        /* [註解]：強迫內嵌複雜富文本（如帶有舊式 table 或固定寬度的 img）時不會撐破手機與平板螢幕 */
        .embedded-content-body img { max-width: 100% !important; height: auto !important; }
        .embedded-content-body table { max-width: 100% !important; display: block; overflow-x: auto; }
    }
    @media (max-width: 390px) {
        .tutorial-title-area h2, .tutorial-explain { font-size: 1rem; }
    }