/* --- 修正說明：移除全域 reset，將樣式鎖定在特定區塊 --- */
    
    :root {
        --primary-color: #333333;      
        --secondary-color: #555555;    
        --accent-color: #768A75;       
        --bg-light: #F8F8F6;           
        --bg-white: #FFFFFF;
        --font-main: 'Noto Sans TC', sans-serif;
        --font-serif: 'Noto Serif TC', serif;
    }
/* --- 輪播專用樣式：淡入淡出 + 無箭頭 + 無圓點 + 高度隨圖片自動調整 --- */

.story-carousel {
    position: relative;
    width: 100%;
    /* 移除 padding-bottom，不再強制固定比例 */
    height: auto; 
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.story-carousel .carousel-inner {
    position: relative;
    width: 100%;
    height: auto;
}

/* 所有項目的預設狀態 */
.story-carousel .item {
    /* 預設絕對定位，疊在一起，不佔空間 */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    display: block !important; /* 覆蓋 Bootstrap 預設 */
    opacity: 0; /* 透明 */
    transition: opacity 1s ease-in-out; /* 淡入淡出時間 */
    z-index: 1;
}

/* 圖片樣式：寬度 100%，高度自動 */
.story-carousel .item img {
    width: 100%;
    height: auto; 
    display: block;
}

/* 啟動狀態 (.active) */
.story-carousel .item.active {
    /* 關鍵：當前圖片改為相對定位，讓它撐開容器高度 */
    position: relative; 
    opacity: 1;
    z-index: 2;
}

/* 處理 Bootstrap 3 轉場過程的閃爍問題 */
.story-carousel .item.next.left,
.story-carousel .item.prev.right {
    opacity: 1;
}
.story-carousel .item.active.left,
.story-carousel .item.active.right {
    opacity: 0;
}
.story-carousel .active,
.story-carousel .next,
.story-carousel .prev {
    transform: none !important;
}

    /* --- 前言區塊 (Intro Section) --- */
    .intro-section {
        padding: 8rem 0 6rem;
        text-align: center;
        background-color: var(--bg-white);
    }

    .intro-title {
        font-family: var(--font-serif);
        font-size: 4.5rem;
        margin-bottom: 2.5rem;
        color: var(--primary-color);
        position: relative;
        display: inline-block;
        line-height: 1.2;
    }

    .intro-title::after {
        content: '';
        display: block;
        width: 50px;
        height: 2px;
        background-color: var(--accent-color);
        margin: 1.5rem auto 0;
    }

    .intro-text {
        font-size: 2rem;
        color: var(--secondary-color);
        text-align: justify;
        text-justify: inter-ideograph;
        line-height: 2;
        /* 增加 container 限制，避免文字過寬 */
        max-width: 800px; 
        margin: 0 auto;
    }

    /* --- 故事區塊 (Story Block) --- */
    .story-section {
        padding: 6rem 0;
        border-bottom: 1px solid #f0f0f0;
        overflow: hidden; 
    }

    .story-section.alt-bg {
        background-color: var(--bg-light); 
    }

    /* 標題區 */
    .story-header {
        text-align: center;
        margin-bottom: 4rem;
    }

    .story-number {
        font-family: var(--font-serif);
        font-size: 4rem;
        color: #6ee5ff; 
        line-height: 1;
        display: block;
        margin-bottom: -1rem; 
        position: relative;
        z-index: 0;
    }

    .brand-name {
        font-family: var(--font-serif);
        font-size: 3.2rem;
        font-weight: 600;
        color: var(--primary-color);
        position: relative;
        z-index: 1;
        margin-top: 0;
    }

    /* 內容區：左右佈局 (使用 Flex) */
    .story-content {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: flex-start;
    }

    /* 電腦版樣式 */
    @media (min-width: 992px) {
        .story-content {
            flex-direction: row; 
            gap: 5rem;
        }

        .story-content.reverse {
            flex-direction: row-reverse; 
        }

        .story-image-wrapper {
            flex: 1;
            width: 100%;
            /* 移除 sticky 以避免與部分舊版瀏覽器衝突，或視需求保留 */
            /* position: sticky; top: 120px; */ 
        }

        .story-text-wrapper {
            flex: 1.2;
        }
    }

    /* 圖片樣式 - 限制在 story-image-wrapper 內，不影響 Footer */
    .story-image-wrapper img {
        width: 100%;
        height: auto;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        transition: transform 0.6s ease;
        object-fit: cover;
        display: block;
        border-radius: 4px;
    }

    .story-image-wrapper img:hover {
        transform: translateY(-5px);
    }

    .image-caption {
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: #888;
        text-align: center;
    }

    /* 文字問答樣式 */
    .qa-item {
        margin-bottom: 3rem;
    }

    .qa-item:last-child {
        margin-bottom: 0;
    }

    .qa-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: #1b8ab6;
        margin-bottom: 2rem;
        margin-top: 0;
        display: flex;
        align-items: baseline;
        line-height: 1.4;
    }

    /* 修改 .qa-title::before 將圖示換成 Chat Text (對話氣泡) */
.qa-title::before {
    content: '';
    display: inline-block;
    width: 28px;   /* 設定寬度 */
    height: 28px;  /* 設定高度 */
    min-width: 28px; /* 防止被壓縮 */
    
    /* 使用 SVG Lightbulb 圖示 (顏色碼已改為 #1b8ab6) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231b8ab6' viewBox='0 0 16 16'%3E%3Cpath d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l.224.447a1 1 0 0 1 .044.453l-.688 1.376a2.174 2.174 0 0 1-4.16 0l-.688-1.376a1 1 0 0 1 .044-.453L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z'/%3E%3C/svg%3E");
    
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 確保圖示完整顯示 */
    background-color: transparent; 
    border-radius: 0; 
    margin-right: 15px;
    position: relative;
    top: 5px; /* 根據字體大小微調垂直位置 */
}
    .qa-content {
        font-size: 1.6rem;
        color: var(--secondary-color);
        text-align: justify;
        text-justify: inter-ideograph;
		line-height: 30px;
    }

    /* --- 響應式微調 --- */
    @media (max-width: 768px) {
        .intro-title {
            font-size: 2.5rem;
        }
        
        .story-number {
            font-size: 3rem;
        }

        .brand-name {
            font-size: 2.2rem;
        }

        .qa-title {
            font-size: 1.8rem;
        }
        
        .qa-content {
			   line-height: 2;
            font-size: 1.6rem;
        }
    }