/* -------------------------------------------
   綜合 CSS：HEADER 區塊樣式
   ------------------------------------------- */
/* -------------------------------------------
   綜合 CSS：HEADER 區塊樣式
   ------------------------------------------- */
/* -------------------------------------------
   綜合 CSS：HEADER 區塊樣式
   ------------------------------------------- */
header {
    background-color: #967354;
    color: #fff;
    text-align: center;
    min-height: 200px;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* 網站品牌 h1 樣式 (適用於主頁) */
header h1.site-title {
    font-size: 2.8rem;
    color: #6A3A1F;
    margin: 0;
    letter-spacing: 0.1rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* h1 內部的網站品牌標語 */
header h1.site-title .site-tagline {
    display: block;
    color: #fff;
    font-size: 1.3rem;
    margin-top: 0.5rem;
    opacity: 0.9;
    font-weight: normal;
}

/* 服務頁面 h1 樣式 */
/* 使用精確的選擇器來確保顏色優先權 */
header.site-header .header-titles h1 {
    font-size: 2.8rem;
    color: #6A3A1F; /* 調整為咖啡色 */
    margin: 0;
    letter-spacing: 0.05rem;
    font-weight: 700;
}

/* 服務頁面 p.site-tagline 樣式 */
/* 使用精確的選擇器來確保顏色優先權 */
header.site-header .header-titles p.site-tagline {
    font-size: 1.3rem;
    color: #fff; /* 調整為白色 */
    opacity: 0.9;
    margin-top: 0.5rem;
}

/* 頁面主標題 h2 樣式 (適用於專頁列表頁) */
header h2 {
    font-size: 2.2rem;
    color: #fff;
    margin: 0.8rem 0 0.5rem 0;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-bottom: none;
}

/* 文章頁面 h1 樣式 (所有非帶有 site-title class 的 h1) */
header h1:not(.site-title) {
    font-size: 2.8rem;
    color: #fff;
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.05rem;
}

/* h1 內部的文章副標題樣式 */
h1 .subtitle-text {
    display: block;
    font-size: 1.5rem;
    font-weight: normal;
    color: #fff;
    opacity: 0.8;
    margin-top: 0.5rem;
}

/* 其他 p 標籤樣式... */
header p.page-subtitle {
    font-size: 1.1rem;
    color: #fff;
    opacity: 0.8;
    margin-top: 0.5rem;
}

header p.subtitle {
    font-size: 1.5rem;
    color: #fff;
    opacity: 0.85;
    margin: 0 0 1rem 0;
}

header p.article-meta {
    font-size: 1.1rem;
    color: #fff;
    opacity: 0.8;
    font-style: italic;
    margin: 0 0 1.5rem 0;
}

header p.site-branding {
    font-size: 1rem;
    color: #fff;
    opacity: 0.7;
    font-weight: normal;
    margin-top: 1.5rem;
}

/* --- 4. 導覽列 (Navigation) --- */
.main-navigation {
    background-color:#d9b098; /* #403d3b深色背景，與頁首協調 */
    padding: 0.8rem 0;
    text-align: center;
    /* 這裡不再直接設定 sticky，交由媒體查詢控制 */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 內容多時自動換行 */
}

.main-navigation ul li {
    margin: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2); /* 右邊加細分隔線 */
}

.main-navigation ul li:last-child {
    border-right: none; /* 最後一個不加分隔線 */
}

.main-navigation ul li a,
.main-navigation ul li .current-page {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* 輕微文字陰影 */
    white-space: nowrap; /* 避免導覽文字換行 */
}

.main-navigation ul li a:hover {
    background-color: #fcfaf0;
    color: #403d3b;
    border-radius: 5px;
}

.main-navigation ul li a:focus {
    background-color: #e0dccc;
    color: #403d3b;
    border-radius: 5px;
    outline: 2px solid #8D6B4E;
    outline-offset: 2px;
}

.main-navigation ul li .current-page {
    color: #FF0000;
    border-bottom: 2px solid #FF0000;
    padding-bottom: calc(0.8rem + 3px); /* 保持與 a 相同的視覺高度 */
}

/* 選項：底線滑入效果 (更動態的 hover 效果) */
.main-navigation ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fcfaf0;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.main-navigation ul li a:hover::after,
.main-navigation ul li a:focus::after {
    transform: scaleX(1);
}

/* --- 5. 主要內容區 (Main Content) --- */
/* main 不再需要 flex 容器，直接置中 */
main {
    max-width: 900px; /* 增加最大寬度，因為現在沒有側邊欄擠壓 */
    margin: 3rem auto; /* 上下外邊距，左右置中 */
    background-color: #fff;
    padding: 3rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-sizing: border-box; /* 確保 padding 不會導致溢出 */
}

/* --- 12. 頁腳 (Footer) --- */
footer {
    background-color: #8D6B4E;
    color: #fff;
    text-align: center;
    padding: 0.1rem 0rem; /* 將上下內邊距從 2rem 減少到 0rem */
    margin-top: 4rem;
    font-size: 0.95rem;
}
/* NEW: 版權信息文字大小和粗細調整 */
.copyright-info .copyright-year, /* NEW */
.copyright-info .center-name { /* NEW */
    font-size: 1.1em; /* 調整版權信息的字體大小，相對於父元素 */
    font-weight: bold;
}

/* NEW: 免責聲明字體調整 */
.disclaimer { /* NEW */
    margin-top: 10px;
	/* margin-bottom: 2rem;  */
    font-size: 0.75;/* 從0.85改為1讓免責聲明可見 */
    color: #eee; /* 讓免責聲明在深色背景下可見 */
}


/* --- 13. 圖片浮動 (Image Floats) --- */
/* 圖片通用浮動樣式調整 - 讓高度 auto 以避免變形 */
.align-right-image { /* MODIFIED */
    float: right;
    margin-left: 35px;
    margin-top: 0;
    margin-bottom: 0;
    width: 150px;
    height: auto; /* 確保圖片高度自適應，避免變形 */
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.align-left-image { /* MODIFIED */
    float: left;
    margin-right: 35px;
    margin-top: 0;
    margin-bottom: 0;
    width: 150px;
    height: auto; /* 確保圖片高度自適應，避免變形 */
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* NEW: 程旭老師照片專用樣式，避免與通用圖片浮動樣式衝突 */
.teacher-photo { /* NEW */
    max-width: 153px; /* 根據原圖尺寸調整最大寬度 */
    height: auto;
    float: left; /* 預設靠左 */
    margin-right: 40px;
    margin-bottom: 10px;
    border-radius: 8px; /* 輕微圓角，增加柔和感 */
    object-fit: cover; /* 確保圖片不變形，裁剪以填充 */
    /* 移除之前 HTML 內嵌的 width/height，交由 CSS 控制 */
}

/* --- 14. 清除浮動 (Clearfix) --- */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* NEW: 針對 Section 的浮動清除，確保區塊內容不會被浮動元素影響 */
.intro-section::after, /* NEW */
.about-teacher::after { /* NEW */
    content: "";
    display: table;
    clear: both;
}


/* --- 15. 快速資訊按鈕與面板樣式 --- */
.quick-info-toggle {
    position: fixed; /* 固定在視窗上 */
    top: 60%; /* 垂直居中 */
    left: 0; /* 靠左 */
    transform: translateY(-60%); /* 精確垂直居中 */
    writing-mode: vertical-rl; /* 文字垂直排列，從右到左 */
    text-orientation: mixed; /* 文字方向正常 */
    background-color: #a38b6d; /* 按鈕背景色 */
    color: #fff;
    border: none;
    padding: 0.8rem 0.5rem; /* 內邊距，調整按鈕大小 */
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border-top-right-radius: 8px; /* 右上角圓角 */
    border-bottom-right-radius: 8px; /* 右下角圓角 */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 999; /* 確保在其他內容之上 */
    transition: background-color 0.3s ease;
    opacity: 0.9; /* 略微透明 */
}

.quick-info-toggle:hover,
.quick-info-toggle:focus {
    background-color: #8D6B4E; /* 懸停效果 */
    opacity: 1;
}

.quick-info {
    position: fixed; /* 固定在視窗上 */
    top: 50%; /* 垂直居中 */
    left: -200px; /* 初始狀態：完全隱藏在左側 */
    transform: translateY(-50%); /* 精確垂直居中 */
    width: 180px; /* 快速資訊面板的寬度 */
    background-color: #fdfaf5;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    z-index: 998; /* 比按鈕低一點，但仍高於主要內容 */
    transition: left 0.4s ease-out; /* 平滑的滑入滑出效果 */
    padding: 1rem 0.8rem;
    box-sizing: border-box; /* 確保 padding 不會增加總寬度 */
    text-align: center;
}

.quick-info.is-visible {
    left: 0; /* 顯示時滑入，與螢幕左邊緣對齊 */
}

.quick-info-title {
    font-size: 1.1rem; /* 標題字體 */
    font-weight: bold;
    color: #6A3A1F;
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed #eee;
}

.quick-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-info ul li {
    margin-bottom: 0.4rem; /* 列表項間距 */
}

.quick-info .quick-link {
    display: block;
    padding: 0.4rem 0.6rem; /* 連結點擊區域 */
    color: #4a6fa5;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
    font-size: 0.95rem; /* 連結文字大小 */
}

.quick-info .quick-link:hover,
.quick-info .quick-link:focus {
    background-color: #f0f0e1;
    color: #2b4b74;
    text-decoration: none;
}

/* 新增：服務項目按鈕連結樣式 */
.button-link {
    display: inline-block;
    background-color: #D9B098; /* 淺咖啡色背景 */
    color: #403d3b; /* 深色文字，確保在淺背景上清晰可見 */
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 1.5em; /* 與上方文字的間距 */
    font-weight: bold; /* 讓按鈕文字更突出 */
}

.button-link:hover {
    background-color: #A38B6D; /* 懸停時顏色加深，與導覽列的連結懸停色協調 */
}

/* 查看相關諮詢樣式 */
.services-link {
  /* text-align: right; */
  margin-top: 2.5rem;
  font-size: 1.125rem;
}

/* NEW: 最新更新時間樣式 */
    text-align: right;
    font-size: 0.9em;
    color: #777;
    margin-bottom: 1em;
}

/* NEW: 頁面頂部連結樣式 */
    text-align: right;
    margin-top: 20px;
    font-size: 0.9em;
}

    color: #4a6fa5; /* 與通用連結色一致 */
    text-decoration: none;
}

    text-decoration: underline;
}

/* NEW: 區塊標題文字樣式 */
    font-size: 1.8rem; /* 與 h3 標題類似的大小 */
    color: #6A3A1F; /* 與主要標題色一致 */
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: center; /* 假設這些標題會置中 */
}


/* Load More Button Styles */
.load-more-container {
    /* 這裡的 text-align: center; 可以保留，但當按鈕本身是 display: block; 且用 margin: auto; 置中時，它不會生效 */
    /* 為了明確，我建議將其註解掉，或如果你想讓容器內的文字也置中則保留 */
    /* text-align: center; */ 
    
    margin-top: 30px;
    margin-bottom: 50px; /* 增加按鈕下方空間 */
    padding-top: 20px; /* 從你後面的定義合併過來 */
    padding-bottom: 20px; /* 從你後面的定義合併過來 */
}

.load-more-button {
    display: block; /* 確保按鈕是區塊元素，這是使用 margin: auto 置中的關鍵 */
    margin: 20px auto; /* 上下邊距20px，左右自動置中 */
    
    /* 按鈕視覺樣式，全部整合到這裡 */
    background-color: #f0e6d4; /* 淺米色背景 */
    color: #5a4b40; /* 深棕色文字 */
    border: 2px solid #d4c5b0; /* 柔和的邊框 */
    padding: 12px 25px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8px; /* 圓角按鈕 */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* 平滑過渡效果 */
    letter-spacing: 1px; /* 增加字距 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 輕微陰影效果 */
    
    /* 讓按鈕寬度根據內容自動調整，避免佔滿整行 */
    width: fit-content; 
    /* 考慮舊瀏覽器兼容性，也可以設置 max-width */
    max-width: 90%; 
}

.load-more-button:hover {
    background-color: #e0d4c0; /* 懸停時顏色稍深 */
    border-color: #c0b09a;
    color: #4a3b30;
}

.load-more-button:active {
    background-color: #d0c4b0; /* 點擊時顏色更深 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 點擊時陰影變化 */
}



/* --- 16. 響應式調整 (Responsive Adjustments) --- */
/* 導覽列在大螢幕下固定 (Desktop Sticky Nav) */
@media (min-width: 769px) { /* 當螢幕寬度大於 768px 時應用以下樣式 */
    .main-navigation {
        position: sticky; /* 讓導覽列滾動時固定 */
        top: 0;
        z-index: 1000; /* 確保導覽列在最上層 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 輕微陰影 */
    }
}

/* NEW: 新增統一的 media query 區塊，避免樣式覆蓋與混亂 */
@media (max-width: 768px) {
    /* 整合 body 和主要內容區的邊距，提供更佳的閱讀體驗 */
    body {
        font-size: 1.125rem;
        padding: 0; /* 移除 body padding，讓主要內容區塊自行管理 */
        box-sizing: border-box;
    }

    /* NEW: 針對頁首標題和內文進行縮小，避免在小螢幕上過大 */
    header h1.site-title {
        font-size: 2.2rem;
    }
    header h1:not(.site-title) {
        font-size: 2rem;
    }
    header h2 {
        font-size: 1.8rem;
    }
    header p {
        font-size: 1.1rem;
    }
    
    /* NEW: 統一管理 main 和 container 的樣式，避免衝突 */
    main,
    .container,
    .content-section,
    .main-content {
        max-width: none !important;
        margin: 2rem 0.5rem !important; /* 調整為更小的左右邊距 */
        padding: 1.5rem !important; /* 調整內邊距，提供呼吸空間 */
        box-sizing: border-box !important;
    }

    h2 {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.5rem;
    }
    p {
        line-height: 1.7;
        margin-bottom: 1em;
    }
    blockquote, .highlight {
        padding: 1.2rem 1.2rem;
        font-size: 1rem;
        line-height: 1.7;
    }

    /* 導覽列在小螢幕的調整 */
    .main-navigation ul {
        align-items: center;
    }
    .main-navigation ul li {
        margin: 0.5rem;
        border-right: none;
    }
    .main-navigation ul li a,
    .main-navigation ul li .current-page {
        padding: 0.8rem 1rem;
        text-align: center;
        border-bottom: none;
        padding-bottom: 0.8rem;
    }
    .main-navigation ul li a:hover::after,
    .main-navigation ul li a:focus::after {
        transform: scaleX(0); /* 小螢幕下移除底線滑入效果 */
    }
    .main-navigation ul li a:focus {
        outline: none;
    }

    /* 圖片浮動在小螢幕的調整 */
    .align-right-image,
    .align-left-image,
    .teacher-photo {
        float: none;
        margin: 15px auto;
    }

    /* 快速資訊按鈕在小螢幕的調整 */
    .quick-info-toggle {
        top: auto;
        bottom: 20px;
        left: 20px;
        transform: none;
        writing-mode: horizontal-tb; /* 橫向文字 */
        text-orientation: unset;
        border-radius: 8px; /* 四角圓角 */
        padding: 0.8rem 1.2rem; /* 調整按鈕大小 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
    
    /* 文章列表改單欄但內文保持乾淨 */
    .article-summary-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    /* 個別項目如果想多一點呼吸 */
    .article-summary-item {
      padding: 1rem !important;
    }
    
    /* 麵包屑導航在小螢幕的調整 */
    .breadcrumb-nav ol {
        padding: 0 10px;
        justify-content: flex-start;
    }
    
    /* 列表標題和日期在小螢幕的調整 */
    .news-header, .news-item, .sitemap-header, .sitemap-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }
    .news-header .news-date, .news-item .news-date {
        text-align: left;
        margin-top: 0.5rem;
    }
    .news-header .news-title, .news-header .news-date,
    .news-item .news-title, .news-item .news-date,
    .sitemap-header .sitemap-theme, .sitemap-header .sitemap-content,
    .sitemap-item .sitemap-theme, .sitemap-item .sitemap-content {
        flex: none;
        width: 100%;
    }
    .sitemap-item .sitemap-theme {
        text-align: left;
        margin-bottom: 0.5rem;
    }
    
    /* 症狀區塊的調整 */
    .symptom-section {
        padding: 0 1rem;
    }
    .symptom-box {
        padding: 1rem;
        border-left-width: 3px;
    }
    .symptom-box h3 {
        font-size: 1.2rem;
    }
    .symptom-list {
        font-size: 1.1rem;
        line-height: 1.8;
    }
} /* End of @media (max-width: 768px) */


/* style.css 中新增的樣式範例 */
.news-list, .sitemap-list {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* 確保圓角效果 */
    margin-bottom: 2rem;
}

.news-header, .sitemap-header {
    display: flex;
    background-color: #8D6B4E; /* 與頁首頁腳同色 */
    color: #fff;
    font-weight: bold;
    padding: 0.8rem 1rem;
    text-align: center;
}

.news-header .news-title, .sitemap-header .sitemap-theme {
    flex: 3; /* 標題佔更多空間 */
}
.news-header .news-date, .sitemap-header .sitemap-content {
    flex: 1; /* 日期佔較少空間 */
}
.sitemap-header .sitemap-content {
    flex: 7; /* 網站導覽內容區塊佔更多空間 */
}

/* IMPORTANT FIX: Ensure news-item and sitemap-item content stacks vertically */
.news-item, .sitemap-item {
    display: flex;
    flex-direction: column; /* <-- 新增：確保內容垂直堆疊 */
    border-bottom: 1px solid #eee;
    padding: 0.8rem 1rem;
    background-color: #fdfaf5; /* 淺色背景 */
}

.news-item:last-child, .sitemap-item:last-child {
    border-bottom: none;
}

/* 移除 news-item 內部的 flex 屬性，因為現在是垂直堆疊，不需要水平比例 */
.news-item h3 { /* Targeting the h3 directly within news-item for title */
    margin-bottom: 0.5rem; /* 調整標題和內容的間距 */
}
.news-item .news-date {
    /* flex: 1; <-- 移除 */
    text-align: left; /* 日期靠左顯示 */
    color: #555;
    font-size: 0.9rem;
    order: -1; /* 讓日期顯示在標題上方 (可選，如果希望日期優先) */
    margin-bottom: 0.2rem; /* 調整日期與標題的間距 */
}
.news-item p {
    /* flex: 3; <-- 移除 */
    margin-top: 0.5rem; /* 調整內容與標題的間距 */
}

.sitemap-item .sitemap-theme {
    /* flex: 3; <-- 移除 */
    font-weight: bold;
    color: #6A3A1F;
    text-align: left; /* 主題靠左 */
    margin-bottom: 0.5rem;
}
.sitemap-item .sitemap-content {
    /* flex: 7; <-- 移除 */
    color: #333;
    line-height: 1.6;
}
.sitemap-item .sitemap-content p {
    margin-bottom: 0.5rem; /* 內部段落間距小一點 */
}
.sitemap-item .sitemap-content strong {
    color: #4a6fa5; /* 內容強調色 */
}

/* 圖片浮動容器，確保文字能正確環繞 */
/* .align-left-image-container,
.align-right-image-container {
    display: block;
    overflow: hidden; /* 確保內容能包圍浮動圖片 */
/* margin-bottom: 1.5rem;
} */ /* CONSIDER REMOVING THIS IF NOT USED */

/* 小螢幕調整 (繼續保留，用於整個區塊的垂直堆疊) */
/* 我已將此區塊合併到上面的主要媒體查詢中，這裡的重複程式碼可以移除。 */
/* @media (max-width: 768px) {
    .news-header, .news-item, .sitemap-header, .sitemap-item {
        flex-direction: column; 
        align-items: flex-start;
        padding: 1rem;
    }
    .news-header .news-date, .news-item .news-date {
        text-align: left;
        margin-top: 0.5rem;
    }
    .news-header .news-title, .news-header .news-date,
    .news-item .news-title, .news-item .news-date,
    .sitemap-header .sitemap-theme, .sitemap-header .sitemap-content,
    .sitemap-item .sitemap-theme, .sitemap-item .sitemap-content {
        flex: none;
        width: 100%;
    }
    .sitemap-item .sitemap-theme {
        text-align: left;
        margin-bottom: 0.5rem;
    }
} */


/* 身心靈專頁文章列表樣式 */
.article-list {
    list-style: none; /* 移除預設列表點 */
    padding: 0;
    margin: 2rem 0;
}

.article-list li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.article-list h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    color: #4a6fa5; /* 標題顏色與連結一致 */
}

.article-list h4 a {
    text-decoration: none; /* 移除標題連結下劃線 */
    color: inherit; /* 繼承父元素的顏色 */
    transition: color 0.3s ease;
}

.article-list h4 a:hover {
    color: #2e4a6e; /* 懸停變深色 */
    text-decoration: underline; /* 懸停時顯示下劃線 */
}

.article-list p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.8rem;
}

.article-list .read-more {
    text-align: right;
    margin-top: 1rem;
}

.article-list .read-more a {
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
    color: #7b9edb; /* 淺藍色，與連結色系協調 */
    transition: color 0.3s ease;
}

.article-list .read-more a:hover {
    color: #4a6fa5;
    text-decoration: underline;
}

.back-to-list {
    text-align: center;
    margin-top: 3rem;
    font-size: 1.1rem;
}

.back-to-list a {
    color: #4a6fa5;
    text-decoration: none;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border: 1px solid #4a6fa5;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.back-to-list a:hover {
    background-color: #4a6fa5;
    color: #fff;
}

.cta-block {
    background-color: #e6f0f9; /* 淺藍色背景，吸引注意 */
    padding: 2.5rem;
    border-radius: 10px;
    text-align: center;
    margin-top: 3rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.cta-block h3 {
    color: #2e4a6e;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.cta-block p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.cta-block .button {
    display: inline-block;
    background-color: #6a9bd8; /* 更活潑的藍色 */
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.cta-block .button:hover {
    background-color: #4a6fa5; /* 懸停時加深 */
    transform: translateY(-2px); /* 輕微上浮效果 */
}/* 麵包屑導航樣式 */
.breadcrumb-nav {
    padding: 10px 0; /* 上下內邊距 */
    margin: 0; /* 移除預設外邊距 */
    background-color: #f8f8f8; /* 淺灰色背景，使其更明顯 */
    border-bottom: 1px solid #eee; /* 底部細線分隔 */
    font-size: 0.95em; /* 字體稍微小一點 */
    color: #666; /* 文字顏色 */
}/* 新增的樣式 */

/* 適用於所有專頁的精選文章網格佈局 */
.article-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動適應列寬，最小300px */
    gap: 2rem; /* 文章間距 */
    margin-top: 2rem;
}

.article-summary-item {
    background-color: #fdfaf5; /* 淺色背景 */
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 輕微陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-summary-item:hover {
    transform: translateY(-5px); /* 懸停時略微上浮 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* 陰影加深 */
}

.article-summary-item h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.6rem;
}

.article-summary-item h4 a {
    color: #6A3A1F; /* 文章標題顏色 */
    text-decoration: none;
}

.article-summary-item h4 a:hover {
    text-decoration: underline;
}

.summary-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.read-more-link {
    display: inline-block;
    color: #4a6fa5;
    font-weight: bold;
    text-decoration: none;
    margin-top: 0.5rem;
}

.read-more-link:hover {
    text-decoration: underline;
}

/* 未來文章列表 */
.future-articles ul {
    list-style: none; /* 移除預設列表點 */
    padding: 0;
}

.future-articles li {
    background-color: #f5f0e1; /* 與背景色協調 */
    border-left: 4px solid #a38b6d;
    padding: 0.8rem 1.2rem;
    margin-bottom: 0.8rem;
    border-radius: 4px;
    color: #555;
    font-style: italic;
}

.breadcrumb-nav ol {
    list-style: none; /* 移除列表的預設序號 */
    padding: 0; /* 移除預設內邊距 */
    margin: 0 auto; /* 居中顯示，如果容器有寬度限制 */
    display: flex; /* 使用 Flexbox 實現水平排列 */
    flex-wrap: wrap; /* 如果內容過長則換行 */
    max-width: 1200px; /* 根據您網站主要內容區的寬度調整 */
    padding-left: 20px; /* 左側內邊距，與內容對齊 */
}

.breadcrumb-nav li {
    display: flex; /* 確保每個列表項內的連結和分隔符號能水平對齊 */
    align-items: center; /* 垂直居中對齊 */
    white-space: nowrap; /* 防止單個麵包屑項目換行 */
}

.breadcrumb-nav li:not(:last-child)::after {
    content: "›"; /* 使用箭頭作為分隔符號，您可以替換為 "/" 或其他符號 */
    margin: 0 8px; /* 分隔符號左右間距 */
    color: #999; /* 分隔符號顏色 */
}

.breadcrumb-nav a {
    color: #4a6fa5; /* 連結顏色，與網站主色調保持一致 */
    text-decoration: none; /* 移除下劃線 */
    transition: color 0.3s ease; /* 顏色過渡效果 */
}

.breadcrumb-nav a:hover {
    color: #2a4f75; /* 鼠標懸停時的連結顏色 */
    text-decoration: underline; /* 懸停時顯示下劃線 */
}

.breadcrumb-nav li:last-child {
    color: #333; /* 當前頁面的文字顏色可以深一點 */
    font-weight: bold; /* 當前頁面可以加粗 */
}

/* 針對小螢幕設備的響應式調整 */
@media (max-width: 768px) {
    .breadcrumb-nav ol {
        padding: 0 10px; /* 小螢幕下調整內邊距 */
        justify-content: flex-start; /* 靠左對齊 */
    }
}/*service */
/* 按鈕通用樣式 */
.button {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 15px; /* 與上方內容間距 */
    background-color: #4a6fa5; /* 與連結顏色一致的背景色 */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border: none; /* 移除預設邊框 */
}

.button:hover {
    background-color: #3a5b8a; /* 滑鼠懸停時顏色變深 */
    transform: translateY(-2px); /* 輕微上浮效果 */
}

/* Line 按鈕專屬樣式 (可自定義Line品牌色) */
.line-button {
    background-color: #00C300; /* Line 綠色 */
}

.line-button:hover {
    background-color: #009900;
}

/* 地圖按鈕專屬樣式 */
.map-button {
    background-color: #e07a5f; /* 較為溫暖的顏色 */
}

.map-button:hover {
    background-color: #c9644b;
}

/* 列表中的段落間距調整 */
.styled-list p {
    margin-bottom: 0.5em; /* 讓列表內的段落間距小一點 */
    margin-top: 0.5em;
}

/* 副標題樣式調整，如果需要更明顯的區分 */
section h3 {
    color: #4a6fa5; /* 與連結顏色一致 */
    margin-top: 2.5rem; /* 與上一區塊間距 */
    margin-bottom: 1rem; /* 與下方列表間距 */
    border-bottom: 1px solid #eee; /* 添加底部細線增加區分 */
    padding-bottom: 5px;
}

/* 特色列表的間距 */
.feature-list li {
    margin-bottom: 1rem;
}

/* 確保預約/洽詢的部分，其子元素列表有適當間距 */
#precaution-appointment ul, #precaution-appointment ol {
    margin-top: 1em;
    margin-bottom: 1em;
}

/* 簽名行樣式 */
.signature {
    text-align: right;
    font-style: italic;
    font-size: 1.2em;
    margin-top: 2rem;
    padding-right: 20px; /* 根據需要調整 */
}/* --- "回音與共鳴" 頁面專用樣式覆寫與優化 --- */
/* 重新定義 .container 以符合現有 main 樣式，使其在其他頁面也能通用 */
/* 如果您的 main 標籤已經有您想要的樣式，可以考慮移除此 .container 的覆寫 */
/* 這裡僅作為參考，若頁面內容不需要額外的 .container 包裹，可直接讓 main 元素生效 */
.container {
    max-width: 900px; /* 與 main 的 max-width 保持一致 */
    margin: 3rem auto; /* 與 main 的 margin 保持一致 */
    background-color: #fff;
    padding: 3rem; /* 與 main 的 padding 保持一致 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 與 main 的 box-shadow 保持一致 */
    border-radius: 8px; /* 與 main 的 border-radius 保持一致 */
    box-sizing: border-box;
}

/* 如果 .site-header, .main-navigation, .site-footer 有自己更明確的區塊，
   則不需要 .container 包裹，它們的寬度可以由自身控制。
   這裡假設它們還是需要 .container 限制內容寬度。
   或者，您可以直接讓 header, nav, footer 這些標籤各自設定寬度和置中。
   為保持與您現有 CSS 的連貫性，我將它們各自的背景色設定直接應用到標籤上，
   而內容則可能需要另一個 .inner-container 或 .wrapper 來限制寬度。 */
.site-header {
    background-color: #8D6B4E; /* 沿用您的 header 背景色 */
    color: #fff;
    text-align: center;
    padding: 2.5rem 1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.site-header .site-title {
    font-size: 2.8rem; /* 沿用您的 header h1 */
    margin-bottom: 0.5rem;
    letter-spacing: 0.1rem;
    color: #fff; /* 確保在深色背景下可見 */
}

.main-navigation {
    background-color: #D9B098; /* 沿用您的導覽列背景色 */
    padding: 0.8rem 0;
    text-align: center;
    /* sticky 屬性已在 @media (min-width: 769px) 中定義，這裡不再重複 */
}

/* 確保導覽列的連結樣式與您現有的 CSS 完全一致 */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation ul li {
    margin: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.main-navigation ul li:last-child {
    border-right: none;
}

.main-navigation ul li a, .main-navigation ul li .current-page {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold;
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.main-navigation ul li a:hover {
    background-color: #fcfaf0;
    color: #403d3b;
    border-radius: 5px;
}

.main-navigation ul li a:focus {
    background-color: #e0dccc;
    color: #403d3b;
    border-radius: 5px;
    outline: 2px solid #8D6B4E;
    outline-offset: 2px;
}

.main-navigation ul li .current-page {
    color: #FF0000; /* 紅色突出當前頁面 */
    border-bottom: 2px solid #FF0000;
    padding-bottom: calc(0.8rem + 3px);
}

.main-navigation ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fcfaf0;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
}

.main-navigation ul li a:hover::after, .main-navigation ul li a:focus::after {
    transform: scaleX(1);
}

/* 主內容區塊的樣式將直接套用 main 標籤的樣式 */
.main-content {
    max-width: 900px; /* 與 main 的 max-width 保持一致 */
    margin: 3rem auto; /* 與 main 的 margin 保持一致 */
    background-color: #fff;
    padding: 3rem; /* 與 main 的 padding 保持一致 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 與 main 的 box-shadow 保持一致 */
    border-radius: 8px; /* 與 main 的 border-radius 保持一致 */
    box-sizing: border-box;
}

.page-intro {
    margin-bottom: 2.5em; /* 增加與個案分享區的間距 */
    color: #666;
    text-align: center; /* 介紹文字居中 */
    font-size: 1.15em;
    line-height: 1.8;
}

.page-intro h2 {
    font-size: 2.2rem; /* 與您現有 h2 保持一致 */
    color: #6A3A1F; /* 標題顏色 */
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #ddd;
    margin-bottom: 1em;
}

.testimonial-section {
    margin-bottom: 4em; /* 增加與結尾區塊的間距 */
}

.testimonial-entry {
    padding: 2em; /* 內邊距，提供內容呼吸空間 */
    margin-bottom: 2.5em; /* 每個個案分享間的間距 */
    border: 1px solid #e0e0e0; /* 淺色邊框 */
    border-radius: 8px; /* 圓角與主要內容區一致 */
    background-color: #fdfaf5; /* 淺色背景，與 blockquote 協調 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* 輕微陰影，增加層次感 */
}

.testimonial-entry strong {
    color: #8D6B4E; /* 您的咖啡色調，突出分享者名稱 */
    font-weight: bold;
    display: block; /* 讓姓名獨立一行 */
    margin-bottom: 0.8em;
    font-size: 1.2em; /* 稍微放大姓名 */
}

.testimonial-entry p {
    margin-bottom: 1em;
    color: #444;
    line-height: 1.7; /* 確保行高良好閱讀 */
}

/* 針對「程老師按」的特殊樣式 */
.testimonial-entry p strong:first-child {
    color: #6A3A1F; /* 讓「程老師按」的顏色更突出 */
    font-size: 1.25em; /* 稍微放大 */
}

/* 個案分享中的日期或括號內容可以稍微小一點 */
.testimonial-entry p span.date-info { /* 如果您願意在HTML中為日期添加span */
    font-size: 0.9em;
    color: #888;
}

.page-conclusion {
    margin-top: 3em;
    padding: 2em;
    background-color: #f5f0e1; /* 與 body 背景色一致，營造和諧感 */
    border: 1px solid #e0dccc; /* 柔和的邊框 */
    border-radius: 8px;
    color: #555;
    line-height: 1.8;
    text-align: center; /* 結尾文字居中 */
    font-size: 1.1em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.call-to-action {
    text-align: center;
    margin-top: 4em;
    padding: 3em;
    background-color: #fdfaf5; /* 與 testimonial-entry 淺色背景協調 */
    border-radius: 8px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 更明顯的陰影 */
}

.call-to-action h3 {
    color: #6A3A1F; /* 與標題色一致 */
    margin-bottom: 1.5em;
    font-size: 1.8rem;
    border-bottom: none; /* 移除 h3 預設的下劃線 */
    padding-left: 0;
    border-left: none;
}

.call-to-action p {
    font-size: 1.1em;
    margin-bottom: 2em;
    color: #444;
}

.call-to-action .button {
    /* 沿用您現有 button 的樣式，或調整為更符合此區塊的顏色 */
    background-color: #4a6fa5; /* 您現有的連結藍色 */
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 30px; /* 圓角按鈕 */
    font-weight: bold;
    font-size: 1.2rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.call-to-action .button:hover {
    background-color: #2b4b74; /* 懸停時顏色加深 */
    transform: translateY(-2px);
}

.site-footer {
    background-color: #8D6B4E; /* 沿用您 footer 的背景色 */
    color: #fff;
    text-align: center;
    padding: 2rem;
}

 .cta-button { 
 display: inline-block; 
 padding: 10px 20px; background: #c27c68; 
 color: #fff; text-decoration: none; border-radius: 4px;
 }