body {
    font-family: "Poppins", "Noto Sans TC", sans-serif;
    min-height: 100vh; /* 最小高度為視窗高度，避免內容被裁切 */
    margin: 0%;
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    background: #fd8674; /* 設個背景色方便測試 */
    overflow: auto;/* 允許內容超出時滾動 */
    padding: 1%;
}


.container {
    width: 1000px;
    height: auto;
    margin:0 auto;
    background: #fff;
    padding: 0px;
    border-radius: 28px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-image: none; 
}

/* 新增：起始頁模式下的容器寬度 */
.container.start-quiz-mode {
    width: 1000px; /* 起始頁專用寬度 */
    /* 可以添加 transition 讓寬度變化更平滑 */
    transition: width 0.3s ease-in-out; 
}

.answer-container {
    width: 940px;
    margin:0 auto;
    background: #fff;
    padding: 10% 3%;
    border-radius: 28px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: grid;
    align-items: center;
}


h1 {
    text-align: center;
}

.question-container {
    display: flex;
    flex-direction: column; /* 按钮垂直排列 */
    align-items: center; /* 水平置中 */
    margin-bottom: 20px; 
    padding: 20px 240px;
    width: 520px;
    height: 560px;
    justify-content: center;
    /* 為問答頁面添加背景圖片 */
    background-image: url('images/title.png'), url('images/av-girl.png');
    background-position: 38px 38px, 50px bottom; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 268px 31px, 178px 286px;
}

.question {
    width: 100%; /* 问题的宽度占滿容器 */
    text-align: center; /* 问题文字置中 */
    color: #fd8674;
    font-size: 1.8rem;
}

.hidden {
    display: none !important; /* 使用 !important 確保強制隱藏 */
}

.options {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 兩列，每列等寬 */
    gap: 8%; /* 按鈕間距，可自行調整 */
    justify-content: center;
}

.btn {
    padding: 5px 40px;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 2.5rem;
    font-weight: 600;
    font-family: "Poppins";
}

.btn-0 {
    background-color: #ff9889;
    color: white;
    white-space: nowrap;
}
.btn-0:hover {
    background-color: #e67969;
}

.btn-1 {
    background-color: #dd6865;
    color: white;
    white-space: nowrap;
}
.btn-1:hover {
    background-color: #ba413e;
}

.btn:hover {
    opacity: 0.8;
}


button {
    padding: 10px 30px;
    background-color: #ff9889;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 600;
}

.options2 {
    display: grid;
    grid-template-columns: 1fr; /* 移除立即購買按鈕後，只留下一列 */
    gap: 2%; /* 按鈕間距，可自行調整 */
    justify-content: center;
    width: 60%;
    margin: 4% auto 0 auto;
}

/* 隱藏結尾頁的立即購買按鈕 */
#buy-button {
    display: none;
}

.retry-button{
    background-color: #dd6865;
    color: white;
}
.retry-button:hover {
    background-color: #ba413e;
}

.recommendation {
    text-align: center;
    flex-direction: column; 
    align-items: center; 
    width: 1000px;
    /* 為結果頁面添加背景圖片 */
    background-image: url('images/title.png'), url('images/av-girl.png');
    background-position: 38px 38px, 50px bottom; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 268px 31px, 178px 286px;
    height: auto; 
}

#product-image img {
    max-width: 100%;
    height: auto;
}


/* ======================================= */
/* 2. 新增起始頁樣式 (START PAGE) - PC & Mobile 垂直堆疊 */
/* ======================================= */

.start-page {
    width: 100%;
    height: auto; 
    border-radius: 28px; 
    overflow: hidden; 
    border: #fff solid 3px;
}

/* PC LAYOUT: 上影片 (100% 寬), 下文字/按鈕 (100% 寬) */
.start-content-wrapper {
    display: flex;
    flex-direction: column; /* PC 和 Mobile 皆垂直堆疊 */
    width: 100%;
    height: auto; 
    align-items: stretch; 
}

/* 影片區塊 */
.start-video {
    width: 100%; /* PC 佔滿容器寬度 */
    background-color: black;
    overflow: hidden;
    position: relative;
    
    /* 💥 PC 關鍵修正：強制 16:9 (水平) 比例 */
    aspect-ratio: 16 / 9;
    min-height: 0; /* 移除 PC 設置的 min-height 影響 */
}


/* 確保只使用一個影片播放器，並讓它顯示 */
.main-video {
    display: block; 
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-Horizontal{
    display: flex;
}

/* 右半邊原生語法區塊 (現為 PC 的下半部) */
.start-text1 {
    width: 60%; /* PC 佔滿容器寬度 */
    height: auto; /* 讓內容決定高度，不再依賴影片 */
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center;
    background-color: #fff; 
}
.start-text2 {
    width: 40%; /* PC 佔滿容器寬度 */
    height: auto; /* 讓內容決定高度，不再依賴影片 */
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center;
    background-color: #fff; 
}

/* 頂部與底部色塊 - 附圖沒有上下色塊，這裡將其移除 */
/* 頂部和底部色塊如果需要，請在 HTML 中保留，並在 CSS 中取消註釋 */
/*
.top-bar, .bottom-bar {
    width: 100%;
    height: 40px; 
    background-color: #fd8674;
}
*/

/* 文字內容置中 */
.text-content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center;
    padding: 10px 20px; /* 增加上下內邊距，提供緩衝空間 */
}

/* Avène Intelligence 文字呈現 */
.brand-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #fd8674;
    margin-bottom: 0px; /* 調整間距，看起來更像附圖 */
}

/* 了解你適合的 雅漾產品，色碼#fd8674 */
.main-title {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fd8674;
    margin-top: 0px;
    margin-bottom: 15px; /* 調整間距 */
}

/* 開始測試按鈕 */
.start-button {
    font-family: "Noto Sans TC", sans-serif;
    padding: 10px 60px;
    background-color: #ff9889;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 2.2rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

.start-button:hover {
    background-color: #e67969;
}


/* ======================================= */
/* 手機版本 (Mobile) */
/* ======================================= */
@media (max-width: 999px) {
    body {
        min-height: 100vh; 
        margin: 2.5%; 
        display: flex;
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
        overflow: auto; 
    }
    .container {
        width: 100%;
        height: auto;
        padding: 0%;
        border-radius: 6vw;
    }
    .answer-container {
        width: 100%;
        height: auto;
        padding: 16% 0%;
        border-radius: 6vw;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    .recommendation {
        width: 100%;
        height: auto;
        background-image: url('images/title.png'), url('images/av-girl.png');
        background-position: center 5%, center bottom;
        background-repeat: no-repeat, no-repeat;
        background-size: 40vw auto, 32vw auto;
    }
    .question-container {
        padding: 20% 0% 65% 0%;
        width: 100%;
        height: auto; /* 讓手機版問題集有足夠的高度 */
        background-image: url('images/title.png'), url('images/av-girl.png');
        background-position: center 5%, center bottom; 
        background-repeat: no-repeat, no-repeat; 
        background-size: 40vw auto, 32vw auto;
    }
    .question {
        width: 95%; 
        font-size: 4.8vw;
    }
    .btn {
        padding: 1vw 8vw;
        border-radius: 2vw;
        font-size: 6vw;
    }
    .options {
        gap: 4%; 
    }
    .options2 {
        grid-template-columns: 1fr; 
        gap: 2%;
        justify-content: center;
        width: 90%;
        margin: 4% auto 0 auto;
    }
    .btn2 {
        padding: 1vw 2vw;
    }
    .product-image{max-width: 95%}
    
    /* 手機版起始頁 */
    .start-page {
        height: auto; 
        border-radius: 6vw;
    }
    .start-content-wrapper {
        flex-direction: column; 
        height: auto;
    }

    .text-Horizontal{
       display: block; 
    }
    
    .start-video {
        width: 100%; 
        aspect-ratio: 16 / 9; /* 保持 16:9 比例 */
        min-height: 0; 
    }
    
    .start-text {
        width: 100%; 
        height: auto; 
        min-height: 30vh; 
    }

    .start-text1 {
        width: 100%; /* PC 佔滿容器寬度 */
        height: auto; /* 讓內容決定高度，不再依賴影片 */
        display: flex; 
        flex-direction: column; 
        justify-content: space-between; 
        align-items: center;
        background-color: #fff;
        margin-top: 1.2vw; 
    }
    .start-text2 {
        width: 100%; /* PC 佔滿容器寬度 */
        height: auto; /* 讓內容決定高度，不再依賴影片 */
        display: flex; 
        flex-direction: column; 
        justify-content: space-between; 
        align-items: center;
        background-color: #fff; 
        margin-bottom: 1.2vw;
    }
    
    .text-content{
        padding: 1vw; /* 手機版內邊距 */
    }

    .brand-text {
        font-size: 3.5vw;
        margin-bottom: 1vw;
    }
    
    .main-title {
        font-size: 7vw;
        margin-bottom: 1vw;
    }

    .start-button {
        padding: 2vw 8vw;
        font-size: 5vw;
        border-radius: 2vw;
    }
}