/*
 * ========================================================================
 * [智慧延伸閱讀] 樣式庫 v11.0 (Optimized & Refactored)
 * - [OPTIMIZED] 合併了智慧模式 (Smart Mode) 和日式時間軸 (P-Timeline) 之間重複的 CSS 規則。
 * - [REFACTORED] 現在 ptimeline 直接繼承通用的 .item-content-wrapper 佈局樣式，只保留其獨有的外觀定義。
 * - [MAINTAINED] 所有樣式的外觀和功能保持不變。
 * ========================================================================
 */

/* ========================================================================
 * PART A: 通用基礎樣式 (Foundation & Globals)
 * ======================================================================== */
.hd-related-posts-container {
    --hd-related-radius-sm: 6px;
    --hd-related-radius-md: 10px;
    --hd-related-spacing-sm: 0.75rem;
    --hd-related-spacing-md: 1.25rem;
    --hd-related-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.05);
    --hd-related-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --hd-related-border-color: #e5e7eb;
    --hd-related-text-primary-default: #1f2937;
    --hd-related-text-secondary-default: #6b7280;
    --hd-related-accent-color-default: #4f46e5;
    --hd-related-noona-hover-default: #22a2eb;
    --timeline-card-bg: var(--hd-related-card-bg, #ffffff);
    --timeline-card-border: var(--hd-related-card-border, #eeeeee);
    --timeline-card-padding: 1rem;
    --hd-related-title-color: var(--hd-related-text-primary, var(--hd-related-text-primary-default));
    --hd-related-link-color: var(--hd-related-text-primary, var(--hd-related-text-primary-default));
    --hd-related-hover-color: var(--hd-related-accent-color, var(--hd-related-accent-color-default));
    --hd-related-meta-color: var(--hd-related-text-secondary, var(--hd-related-text-secondary-default));
    --hd-related-accent-final-color: var(--hd-related-accent-color, var(--hd-related-accent-color-default));
    clear: both;
    width: 100%;
    margin: 30px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
    background-color: var(--hd-related-bg, transparent);
}
.hd-related-posts-container *, .hd-related-posts-container *::before, .hd-related-posts-container *::after {
    box-sizing: border-box;
}
.hd-related-posts-container a {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    color: var(--hd-related-link-color);
}
.hd-related-posts-container a:hover {
    color: var(--hd-related-hover-color);
}
.hd-related-posts-header {
    color: var(--hd-related-title-color);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--hd-related-border-color);
}
.related-post-meta {
    color: var(--hd-related-meta-color);
    font-size: 0.85em;
    margin-top: 4px;
}
.related-card-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e5e7eb;
    display: inline-block;
}
.hd-related-posts-container .related-item {
    margin-bottom: 0.5em;
}
.hd-related-posts-container .related-item:last-child {
    margin-bottom: 0;
}

/* ========================================================================
 * PART B: 列表符號控制 (List Style Control) - v2.0 FIXED
 * ======================================================================== */

/* 只重置用於佈局的「第一層」列表 */
.hd-related-posts-container .hd-related-posts-body > ul,
.hd-related-posts-container .hd-related-posts-body > ol {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* 為內容中「巢狀」的列表恢復瀏覽器預設樣式 */
.hd-related-posts-container .related-item ul,
.hd-related-posts-container .timeline-item-inner-container ul,
.hd-related-posts-container .ptimeline-item ul {
    list-style: disc; /* 恢復實心圓點 */
    padding-left: 40px; /* 恢復預設縮排 */
    margin: 1em 0; /* 恢復段落間距 */
}
.hd-related-posts-container .related-item ol,
.hd-related-posts-container .timeline-item-inner-container ol,
.hd-related-posts-container .ptimeline-item ol {
    list-style: decimal; /* 恢復數字編號 */
    padding-left: 40px; /* 恢復預設縮排 */
    margin: 1em 0; /* 恢復段落間距 */
}

/* 確保巢狀列表的項目間距正常 */
.hd-related-posts-container .related-item ul li,
.hd-related-posts-container .related-item ol li,
.hd-related-posts-container .timeline-item-inner-container ul li,
.hd-related-posts-container .timeline-item-inner-container ol li,
.hd-related-posts-container .ptimeline-item ul li,
.hd-related-posts-container .ptimeline-item ol li {
    margin-bottom: 0.5em;
    display: list-item; /* 確保 li 元素表現為列表項目 */
    padding-left: 0;
}

.hd-related-posts-container.has-list-style-disc .hd-related-posts-body > ul,
.hd-related-posts-container.has-list-style-circle .hd-related-posts-body > ul,
.hd-related-posts-container.has-list-style-square .hd-related-posts-body > ul {
    padding-left: 1.8em !important;
}
.hd-related-posts-container.has-list-style-disc .related-item,
.hd-related-posts-container.has-list-style-circle .related-item,
.hd-related-posts-container.has-list-style-square .related-item {
    list-style-position: inside;
    display: list-item;
}
.hd-related-posts-container.has-list-style-disc .related-item { list-style-type: disc !important; }
.hd-related-posts-container.has-list-style-circle .related-item { list-style-type: circle !important; }
.hd-related-posts-container.has-list-style-square .related-item { list-style-type: square !important; }
.hd-related-posts-container.has-list-style-ordered .related-item,
.hd-related-posts-container.has-list-style-roman .related-item,
.hd-related-posts-container.has-list-style-alpha .related-item {
    display: flex;
    align-items: baseline;
    gap: 0.8em;
    margin-bottom: 0.75em;
    counter-increment: hd-list-counter;
}
.hd-related-posts-container.has-list-style-ordered .related-item a,
.hd-related-posts-container.has-list-style-roman .related-item a,
.hd-related-posts-container.has-list-style-alpha .related-item a {
    flex-grow: 1;
    min-width: 0;
}
.hd-related-posts-container.has-list-style-ordered .related-item::before,
.hd-related-posts-container.has-list-style-roman .related-item::before,
.hd-related-posts-container.has-list-style-alpha .related-item::before {
    content: counter(hd-list-counter) ".";
    flex-shrink: 0;
    font-weight: 600;
    color: var(--hd-related-accent-final-color);
}
.hd-related-posts-container.has-list-style-roman .related-item::before { content: counter(hd-list-counter, upper-roman) "."; }
.hd-related-posts-container.has-list-style-alpha .related-item::before { content: counter(hd-list-counter, upper-alpha) "."; }
.style-smart-timeline .related-item, .style-cards .related-item, .style-slider .related-item, .style-image-left .related-item, .style-compact .related-item, .hd-related-posts-container.has-list-style-none .related-item {
    display: block !important;
    list-style-type: none !important;
}


/* ========================================================================
 * PART C: 傳統列表樣式 (Traditional List Styles)
 * ======================================================================== */

/* --- 1. 經典樣式 (Noona) - Refactored for System Integration --- */
.hd-related-posts-container.style-noona {
    display: inline-block;
    clear: both;
    width: 100%;
    max-width: 853px;
    margin: 30px auto;
    padding: 20px 0;
    border: none;
    /* 使用 CSS 變數，如果後台未設定，則使用您指定的 #f6f6f6 作為預設值 */
    background-color: var(--hd-related-bg, #f6f6f6); 
}

/* 對應 .noona-t 的樣式 */
.style-noona .hd-related-posts-header {
    margin: 10px 35px 15px 35px; /* 組合了您原有的 margin 和 padding，達到 35px 的內縮 */
    padding: 0;
    color: var(--hd-related-title-color, #000); /* 使用後台設定的標題顏色 */
    font-weight: 700;
    font-size: 1.2rem;
    border-bottom: none; /* Noona 樣式標題無底線 */
}

/* 對應 .noona-c 的樣式 */
.style-noona .hd-related-posts-body {
    font-size: 1.1rem;
    margin: 5px 20px 10px;
    padding: 0 15px;
}

/* 確保列表有正確的內縮 */
.style-noona .hd-related-posts-body ol, 
.style-noona .hd-related-posts-body ul {
    /* 使用 !important 來覆寫全局的列表重置樣式，確保 Noona 風格正確顯示 */
    margin: 10px 20px 10px 20px !important; 
}

/* 對應 #nonoa li 的樣式 */
.style-noona .related-item {
    font-size: 1rem;
    margin: 10px auto;
    color: #565656;
    letter-spacing: 2px;
}

/* 對應 #nonoa a 的樣式 */
.style-noona .related-item a {
    color: var(--hd-related-link-color, #4b4f56); /* 使用後台設定的連結顏色 */
}

/* 對應 #nonoa a:hover 的樣式 */
.style-noona .related-item a:hover {
    color: var(--hd-related-hover-color, #22a2eb); /* 使用後台設定的 Hover 顏色 */
    text-decoration: none;
}

/* --- 2. 現代化卡片框 (Modern) --- */
/* 一個帶有陰影、圓角和邊框的現代卡片設計 */
.hd-related-posts-container.style-modern {
    background-color: var(--hd-related-card-bg, #fff);
    border: 1px solid var(--hd-related-card-border, var(--hd-related-border-color));
    border-radius: var(--hd-related-radius-md);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hd-related-posts-container.style-modern:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    transform: translateY(-2px);
}
.style-modern .hd-related-posts-header {
    margin: 0;
    padding: var(--hd-related-spacing-sm) var(--hd-related-spacing-md);
    font-size: 1.15rem;
    font-weight: 600;
    /* 標題區和內容區的分隔線 */
    border-bottom: 1px solid var(--hd-related-card-border, var(--hd-related-border-color));
}
.style-modern .hd-related-posts-body {
    padding: var(--hd-related-spacing-md);
}
/* 讓列表的數字或點符號使用主題強調色 */
.style-modern .related-item::marker {
    color: var(--hd-related-accent-final-color);
    font-weight: 600;
}

/* --- 3. 簡易方框 (Boxed) --- */
/* 一個簡單、乾淨的邊框容器 */
.style-boxed {
    border: 1px solid var(--hd-related-card-border, var(--hd-related-border-color));
    background-color: var(--hd-related-card-bg, transparent);
    padding: var(--hd-related-spacing-md);
    border-radius: var(--hd-related-radius-sm);
}
.style-boxed .hd-related-posts-header {
    border-bottom: 1px solid var(--hd-related-card-border, var(--hd-related-border-color)); 
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

/* --- 4. 粗體分隔線 (Bold Separator) --- */
/* 移除容器邊框，改用粗分隔線來區分項目 */
.style-bold-separator .hd-related-posts-header {
    border: none; /* 標題無邊框 */
}
.style-bold-separator .related-item {
    border-bottom: 2px solid var(--hd-related-border-color);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
.style-bold-separator .related-item:last-child {
    border-bottom: none; /* 最後一項不需要分隔線 */
    margin-bottom: 0;
}

/* --- 5. 簡潔列表 (Minimal) --- */
/* 極簡風格，僅保留標題和列表文字 */
.style-minimal .hd-related-posts-header {
    border: none;
    padding-bottom: 0;
}

/* --- 6. 空白 (僅列表) (Plain) --- */
/* 完全隱藏標題，只顯示列表內容 */
.style-plain .hd-related-posts-header {
    display: none;
}

/* --- 7. 緊湊型 (行內連結) (Compact) --- */
/* 將連結轉為行內元素，像標籤雲一樣排列 */
.style-compact .hd-related-posts-header {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    border: none;
}
.style-compact .hd-related-posts-body ul {
    display: flex; /* 啟用 Flexbox 佈局 */
    flex-wrap: wrap; /* 允許項目自動換行 */
    align-items: center; /* 垂直置中對齊 */
    gap: 0.25em 0.5em; /* 設定項目間的垂直與水平間距 */
}
/* 為每個項目後面加上逗號分隔符 */
.style-compact .related-item::after {
    content: ", ";
    margin-right: 0.25em; /* 逗號後的間距 */
    color: var(--hd-related-meta-color);
}
/* 最後一個項目不需要逗號 */
.style-compact .related-item:last-child::after {
    content: "";
}

/* ========================================================================
 * PART D: 圖片樣式 (Image-Based Styles)
 * ======================================================================== */
.related-card-thumbnail { width: 100%; aspect-ratio: 16 / 10; background-color: #f3f4f6; overflow: hidden; }
.related-card-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.related-item a:hover .related-card-thumbnail img { transform: scale(1.05); }
.related-item-content { padding: var(--hd-related-spacing-sm); flex-grow: 1; display: flex; flex-direction: column; }
.related-item-title {line-height: 1.4; flex-grow: 1; }
.style-cards .hd-related-posts-header { text-align: center; border: none; }
.style-cards .hd-related-posts-body ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
.style-cards .related-item { border-radius: var(--hd-related-radius-sm); box-shadow: var(--hd-related-shadow-light); background-color: var(--hd-related-card-bg, #fff); border: 1px solid var(--hd-related-card-border, transparent); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.style-cards .related-item:hover { transform: translateY(-5px); box-shadow: var(--hd-related-shadow-md); }
.style-cards .related-item a { display: flex; flex-direction: column; height: 100%; }
.style-slider .hd-related-posts-header { text-align: center; border: none; padding-bottom: 1rem; }
.hd-related-slider-wrapper { position: relative; padding: 0 15px; }
.hd-related-slider-wrapper ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--hd-related-spacing-md); cursor: grab; padding: 0.5rem 5px; }
.hd-related-slider-wrapper ul::-webkit-scrollbar { display: none; }
.hd-related-slider-wrapper .related-item { flex: 0 0 70%; max-width: 250px; scroll-snap-align: start; background-color: var(--hd-related-card-bg, #fff); border: 1px solid var(--hd-related-card-border, transparent); box-shadow: var(--hd-related-shadow-light); border-radius: var(--hd-related-radius-sm); overflow: hidden; }
.slider-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--hd-related-border-color); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; opacity: 0; pointer-events: none; transition: all 0.2s ease; }
.hd-related-slider-wrapper:hover .slider-nav { opacity: 1; pointer-events: auto; }
.slider-nav.prev { left: -5px; }
.slider-nav.next { right: -5px; }
.style-image-left { border: 1px solid var(--hd-related-card-border, var(--hd-related-border-color)); background-color: var(--hd-related-card-bg, #fff); border-radius: var(--hd-related-radius-md); }
.style-image-left .hd-related-posts-header { padding: var(--hd-related-spacing-sm) var(--hd-related-spacing-md); border-bottom: 1px solid var(--hd-related-card-border, var(--hd-related-border-color)); }
.style-image-left .related-item { margin: 0; border-bottom: 1px solid var(--hd-related-card-border, var(--hd-related-border-color)); }
.style-image-left .related-item:last-child { border-bottom: none; }
.style-image-left .related-item a { display: flex; align-items: center; gap: var(--hd-related-spacing-sm); padding: var(--hd-related-spacing-sm); }
.style-image-left .related-card-thumbnail { flex-shrink: 0; width: 100px; height: 75px; border-radius: var(--hd-related-radius-sm); }

/* ========================================================================
 * PART E: 智慧模式通用樣式 (Unified Smart Mode Styles)
 * ======================================================================== */
/* --- 1. 通用容器與變數 --- */
.style-smart-timeline, .style-ptimeline {
    --hd-related-accent-color: var(--hd-timeline-theme-color, var(--hd-related-accent-color-default));
}

/* --- 2. 【關鍵修正】通用核心圖文區塊 (.item-content-wrapper) --- */
.item-content-wrapper {
    display: flex !important; /* 強制 flex 佈局，這是讓 order 生效的基礎！ */
    gap: 1rem;
    width: 100%;
    align-items: center; /* 預設垂直置中 */
}
.style-ptimeline .item-content-wrapper {
    align-items: flex-start; /* ptimeline 頂部對齊 */
    padding: 0.5em;
}

/* --- 3. 通用內容佈局 (使用 CSS Order 屬性並強制優先權) --- */

/* 確保子元素有預設 order 值 */
.item-image,
.item-text-content {
    order: 0;
}
.item-image {
    flex-shrink: 0;
}
.item-text-content {
    display: flex; /* 文字區塊內部也使用 flex 來佈局 */
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}
.item-title {
    font-weight: 600;
    line-height: 1.5;
}
.item-image img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--hd-related-radius-sm);
}

/* 佈局 A: 垂直堆疊 */
.item-content-wrapper.content-layout-image-top,
.item-content-wrapper.content-layout-image-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
}
.item-content-wrapper.content-layout-image-bottom .item-text-content {
    order: 1 !important;
}
.item-content-wrapper.content-layout-image-bottom .item-image {
    order: 2 !important;
    margin-top: 1rem;
}

/* 佈局 B: 水平排列 (統一圖片寬度) */
.item-content-wrapper.content-layout-image-left .item-image,
.item-content-wrapper.content-layout-image-right .item-image {
    width: 100px;
}
.style-ptimeline .item-content-wrapper.content-layout-image-left .item-image,
.style-ptimeline .item-content-wrapper.content-layout-image-right .item-image {
    width: 30%;
    max-width: 150px;
}

/* 強制「左文右圖」的視覺順序 */
.item-content-wrapper.content-layout-image-right .item-text-content {
    order: 1 !important;
}
.item-content-wrapper.content-layout-image-right .item-image {
    order: 2 !important;
}


/* --- 4. 智慧時間軸 (timeline, sp-timeline) 專屬樣式 --- */


/* ======================================================
 * [核心修正] 恢復遺失的時間軸垂直線
 * ====================================================== */


/*
 * ========================================================================
 *  [ULTIMATE FINAL VERSION v4] 智慧延伸閱讀：高亮與標籤統一樣式
 * ========================================================================
 */

/* --- PART 1: 全局高亮項目 (.is-now) 的主體樣式 (保持不變) --- */
.hd-related-posts-container.has-highlight .related-item:not(.is-now) { opacity: 0.6; transition: opacity 0.25s ease-in-out; }
.hd-related-posts-container.has-highlight .related-item:not(.is-now):hover { opacity: 1; }

.style-noona .related-item.is-now, .style-bold-separator .related-item.is-now, .style-minimal .related-item.is-now { border-left: 3px solid var(--hd-related-accent-final-color); padding-left: 12px; background-color: color-mix(in srgb, var(--hd-related-accent-final-color) 8%, transparent); }
.style-boxed .related-item.is-now, .style-modern .related-item.is-now { border: 1px solid var(--hd-related-accent-final-color); background-color: color-mix(in srgb, var(--hd-related-accent-final-color) 5%, transparent); }

/* --- PART 2: 標籤 (.hd-highlight-label & .step-label) 的最終樣式 --- */

/* --- A. 標籤的統一樣式基礎 --- */
/* 【核心修正】直接選中容器內所有的標籤，不再關心它們的父容器是誰 */
.hd-related-posts-container .hd-highlight-label {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff !important;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
}

/* --- B. 標籤顏色 --- */

.hd-related-posts-container .hd-highlight-label {
    background-color: var(--hd-highlight-label-bg, #d54e21);
}

/* --- C. 佈局與間距 --- */

/* 1. 智慧模式下的佈局 */
.timeline-item-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }

/* 【核心修正】處理跑到外面的 STEP 標籤 */


/* 2. 經典列表模式下的佈局 */
.related-item-content { display: flex; flex-direction: column; align-items: flex-start; }
.related-item-content > .hd-highlight-label { margin-bottom: 8px; }


/* --- 智慧延伸閱讀：行動裝置體驗優化 --- */
/* 
 * 當螢幕寬度小於 992px (典型的平板與手機) 時，
 * 取消「高亮模式」下非高亮項目的變暗效果，讓所有項目都清晰可見。
*/
@media (max-width: 991px) {
    .hd-related-posts-container.has-highlight .related-item:not(.is-now),
    .hd-related-posts-container.has-highlight .timeline-item:not(.is-now) {
        opacity: 1!important; /* 取消變暗效果 */
        filter: none!important; /* 如果未來有使用 filter，也一併取消 */
    }
}




/* ========================================================================
 * PART G: RWD 響應式設計與版面修正 - 【v5 終極強化版】
 * ======================================================================== */

/* [Float Fix] 解決雙欄時間軸覆蓋文章內容的問題 */


/* 1. 為單欄時間軸的 body 增加一個安全的內邊距 */


/* 2. 讓 ul 容器去填滿這個帶有 padding 的新空間 */


/* 3. 將時間軸線和標記點，相對於 ul 的左邊緣進行絕對定位 */


/* 4. 內容區的左邊距，現在只需要考慮標記點自身的寬度 */


/* ▲▲▲ 全新的單欄時間軸佈局邏輯結束 ▲▲▲ */


/* 當螢幕寬度小於 768px 時觸發 */
@media (max-width: 768px) {
    /* 隱藏 Slider 的導航按鈕 */
    .slider-nav { display: none; }
    .hd-related-slider-wrapper { padding: 0; }

    /* [RWD ENHANCEMENT] 卡片樣式在手機上變為單欄 */
    .style-cards .hd-related-posts-body ul {
        grid-template-columns: 1fr;
    }

    /* [RWD ENHANCEMENT] 左右圖文樣式，在手機上改為垂直堆疊 */
    .style-image-left .related-item a {
        flex-direction: column;
        align-items: flex-start;
    }
    .style-image-left .related-card-thumbnail {
        width: 100%; /* 圖片寬度變為100% */
        height: auto;
        aspect-ratio: 16 / 9; /* 保持圖片比例 */
    }

    /* 1. 為手機版的容器也增加安全內邊距 */


    /* 2. 同樣將線和點定位在新的內容區左側 */
    
    /* 3. 內容區的佈局重置 */
    
    /* ▲▲▲ 全新的手機版單欄佈局邏輯結束 ▲▲▲ */
}
.hd-related-posts-footer { text-align: center; margin-top: var(--hd-related-spacing-md); }
.hd-more-button { display: inline-block; padding: 0.6rem 1.75rem; background-color: var(--hd-related-accent-final-color); color: #fff !important; border-radius: var(--hd-related-radius-sm); font-weight: 500; transition: background-color 0.2s ease, transform 0.2s ease; }
.hd-more-button:hover { background-color: color-mix(in srgb, var(--hd-related-accent-final-color) 85%, black); transform: translateY(-2px); }



/* ========================================================================
 * PART H: 互動性與展開功能 (Interactivity & Expandable Feature) - 【v4 Ptimeline Fix】
 * ======================================================================== */

/* 1. 【核心修正】將 .ptimeline-item 也納入隱藏規則中 */
.hd-related-posts-container .related-item.is-hidden-expandable,
.hd-related-posts-container .ptimeline-item.is-hidden-expandable {
    display: none !important;
}

/* 2. 【核心修正】將 .ptimeline-item 也納入揭示動畫規則中 */
.hd-related-posts-container .related-item.is-revealing,
.hd-related-posts-container .ptimeline-item.is-revealing {
    opacity: 0;
}

/* 3. 【核心修正】為 .ptimeline-item 加上過渡動畫 */
.hd-related-posts-container .related-item,
.hd-related-posts-container .ptimeline-item {
    transition: opacity 0.5s ease;
}

/* 4. 高亮規則的權重 (保持不變，但確認 .ptimeline-item 也適用) */
.hd-related-posts-container.has-highlight .related-item:not(.is-now),
.hd-related-posts-container.has-highlight .ptimeline-item:not(.is-now) {
    opacity: 0.5;
}
.hd-related-posts-container.has-highlight .related-item.is-now,
.hd-related-posts-container.has-highlight .ptimeline-item.is-now {
    opacity: 1 !important;
}
.hd-related-posts-container.has-highlight .related-item:hover,
.hd-related-posts-container.has-highlight .ptimeline-item:hover {
    opacity: 1;
}

/* --- 底部按鈕樣式 (保持不變) --- */
.hd-related-posts-footer {
    text-align: center;
    margin-top: var(--hd-related-spacing-md);
}
.hd-expand-button {
    display: inline-block;
    padding: 0.6rem 1.75rem;
    background-color: #f1f1f1;
    color: #333 !important;
    border: 1px solid #ccc;
    border-radius: var(--hd-related-radius-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.hd-expand-button:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}
.hd-more-button {
    display: inline-block;
    padding: 0.6rem 1.75rem;
    background-color: var(--hd-related-accent-final-color);
    color: #fff !important;
    border-radius: var(--hd-related-radius-sm);
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.hd-more-button:hover {
    background-color: color-mix(in srgb, var(--hd-related-accent-final-color) 85%, black);
    transform: translateY(-2px);
}

/* ======================================================
 * [新增] 支援羅馬與英文字母列表符號
 * ====================================================== */
.hd-related-posts-container.has-list-style-roman ol {
    padding-left: 1.8em !important;
}
.hd-related-posts-container.has-list-style-roman ol > .related-item {
    list-style-type: upper-roman !important;
}

.hd-related-posts-container.has-list-style-alpha ol {
    padding-left: 1.8em !important;
}
.hd-related-posts-container.has-list-style-alpha ol > .related-item {
    list-style-type: upper-alpha !important;
}






/* ==========================================================================
   # 日式手動時間軸 (P-Timeline) - 獨有樣式
   ========================================================================== */

/* --- 1. 基礎結構與全局重置 --- */
.hd-related-posts-container.style-ptimeline .ptimeline { 
    padding: 0 !important; 
    list-style: none !important; 
    margin: 0; 
    position: relative; 
}
.hd-related-posts-container.style-ptimeline .ptimeline-item {
    list-style-type: none !important;
    margin: 0 !important;
    border: none !important;
    padding: 0 0 1.5em 2.5em !important;
    position: relative;
}

/* --- 2. 垂直時間線與標記點 --- */
.hd-related-posts-container.style-ptimeline .ptimeline-item:before { 
    content: ""; width: 2px; background: #eee; position: absolute; top: 15px; bottom: 0; left: 10px; z-index: 0;
}
.hd-related-posts-container.style-ptimeline .ptimeline-item:last-child:before { 
    display: none; 
}
.hd-related-posts-container.style-ptimeline .ptimeline-marker { 
    box-sizing: border-box; position: absolute; top: 6px; left: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: solid 3px var(--hd-related-accent-color, #00bfff); z-index: 1; transition: all 0.2s ease-in-out;
}

/* --- 3. Marker 的所有樣式變化 --- */
.hd-related-posts-container.style-ptimeline .ptimeline.marker-square .ptimeline-marker { border-radius: 0; }
.hd-related-posts-container.style-ptimeline .ptimeline.marker-icon .ptimeline-marker { border: none !important; background: none !important; width: auto; height: auto; }
.hd-related-posts-container.style-ptimeline .ptimeline.marker-icon .ptimeline-marker:before { font-family: "Font Awesome 5 Free", "Font Awesome 6 Free"; font-weight: 900; content: var(--ptimeline-icon-code, "\f005"); position: absolute; top: 1px; left: -2px; font-size: 18px; color: var(--hd-related-accent-color, #00bfff); }
.hd-related-posts-container.style-ptimeline .ptimeline-item.is-now { --ptimeline-highlight-color: var(--hd-highlight-label-bg, #d32f2f); }
.hd-related-posts-container.style-ptimeline .ptimeline-item.is-now .ptimeline-marker { border-color: var(--ptimeline-highlight-color) !important; background: var(--ptimeline-highlight-color) !important; transform: scale(1.1); }
.hd-related-posts-container.style-ptimeline .ptimeline.marker-icon .ptimeline-item.is-now .ptimeline-marker:before { color: var(--ptimeline-highlight-color) !important; }

/* --- 4. 連結包裹器樣式 --- */
.ptimeline-item .ptimeline-link-wrapper { display: block; text-decoration: none; color: inherit; border-radius: var(--hd-related-radius-sm, 6px); transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out; }
/* 當滑鼠懸停在連結包裹器上時 */
.ptimeline-item .ptimeline-link-wrapper:hover {
    /* 讓整個區塊輕微向上浮動 */
    transform: translateY(-2px);
}

/* 同時，改變內部 .item-content-wrapper 的背景和陰影 */
.ptimeline-item .ptimeline-link-wrapper:hover .item-content-wrapper {
    background-color: #f8f9fa;
    box-shadow: var(--hd-related-shadow-md); /* 使用更深的陰影 */
}
.ptimeline-item .ptimeline-link-wrapper:hover .item-title { color: var(--hd-related-hover-color, #005a9e) !important; }
.ptimeline-item .ptimeline-link-wrapper .item-text-content, .ptimeline-item .ptimeline-link-wrapper .related-post-meta { color: var(--hd-related-meta-color, #6b7280); }
.ptimeline-item .ptimeline-link-wrapper .item-title { color: var(--hd-related-accent-color, #00bfff); }

/* --- 5. 其他文字與 Meta 元素樣式 --- */
.hd-related-posts-container.style-ptimeline .ptimeline-label { padding-top: 2px; color: #888; font-size: 13px; }
.hd-related-posts-container.style-ptimeline .item-title { font-size: 1.1em; font-weight: bold; }

/* ==========================================================================
   # 智慧時間軸 - 進階內容結構樣式 (共享)
   ========================================================================== */

/* --- 1. 主要說明區塊 --- */
.timeline-primary-description { font-size: 0.95em; line-height: 1.7; color: #495057; margin-top: 0.5em; }
.timeline-primary-description p:first-child { margin-top: 0; }
.timeline-primary-description p:last-child { margin-bottom: 0; }

/* --- 2. 內容分隔線 --- */
hr.timeline-content-separator { border: none; border-top: 1px dashed #ced4da; margin: 1.2em 0; width: 100%; }

/* --- 3. 可點擊的核心圖文區塊 --- */
.timeline-item-inner-container > a.item-content-wrapper { display: flex; text-decoration: none; background-color: transparent; padding: 0.5em; margin: 0px; border-radius: var(--hd-related-radius-sm, 6px); transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.timeline-item-inner-container > a.item-content-wrapper:hover { background-color: #f8f9fa; box-shadow: var(--hd-related-shadow-light); }

/* --- 4. 附加圖片區塊 --- */
.timeline-additional-image { text-align: left; }
.timeline-additional-image img { display: inline-block; max-width: 100%; height: auto; border-radius: var(--hd-related-radius-md, 10px); box-shadow: var(--hd-related-shadow-light); }