/* =========================================
   1. 基礎重置與共用設定
========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Microsoft JhengHei', Arial, sans-serif;
    color: #333;
    line-height: 1.5;
    
    /* 關鍵：設定固定背景（預設手機版） */
    background-image: url('../image/m_bg.png'); 
    background-size: cover;          
    background-position: center top; 
    background-attachment: fixed;    
    background-repeat: no-repeat;
    
    /* 【修復 1】防止內容溢出導致手機版出現橫向滾動條 */
    overflow-x: hidden; 
}

/* 讓所有圖片都能自適應寬度，最大不超過容器 */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 限制內容最大寬度，並置中 */
.wrapper {
    width: 100%;
    max-width: 1000px; /* 電腦版最大寬度 */
    margin: 0 auto;    /* 左右置中 */
    padding: 15px;     /* 手機版邊距調小，留給內容更多空間 */
    padding-bottom: 60px;
}

/* =========================================
   2. 各區塊樣式 (預設：手機版 Mobile First)
========================================= */

/* 主視覺區 */
.hero-section {
    text-align: center;
    margin-bottom: 20px;
}
.hero-img {
    margin: 0 auto;
}

/* 教學區塊外框 */
.tutorial-section {
    background-color: rgba(255, 255, 255, 0.61);
    border-radius: 20px;
    padding: 40px 15px 20px 15px; /* 上方 padding 稍微加大，避免卡片內的手機截圖貼太近 */
    margin-top: 50px;             /* 【關鍵 1】上方留白，讓突出的標題不會擠壓到上方的區塊 */
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    width: 100%;
    
    position: relative;          /* 【關鍵 2】作為標題圖片絕對定位的參考基準點 */
}

/* 【修復 2】修正標題圖片，讓它在手機上不會爆版 */
.section-title-img {
    position: absolute;          /* 【關鍵 3】脫離原本的排列，改為絕對定位 */
    top: 0;                      /* 對齊白框的最頂部邊界 */
    left: 50%;                   /* 搬到白框的水平 50% 位置 */
    transform: translate(-50%, -50%); /* 【關鍵 4】往左推半個身幅、往上推半個身幅，達到完美置中並壓在邊界上 */
    
    z-index: 10;                 /* 確保標題層級在最上方，不會被遮住 */
    max-width: 85%;              /* 手機版限制寬度，避免標題太大壓到兩邊外框 */
    height: auto;
}

/* 步驟容器：手機版預設直向排列 */
.step-container {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    gap: 25px;              
}

/* 單一小步驟樣式 */
.step-item {
    text-align: center;
    width: 100%;
    max-width: 300px; /* 限制手機圖的最寬寬度 */
}

.step-content-img {
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* =========================================
   3. RWD 媒體查詢：電腦版 (Desktop) 樣式
========================================= */
@media (min-width: 768px) {
    
    body {
        /* 切換為電腦版背景圖 */
        background-image: url('../image/bg.png'); 
    }

    .wrapper {
        padding: 40px;
    }

    .tutorial-section {
        margin-top: 80px;        /* 電腦版間距放大 */
        padding: 60px 40px 40px 40px;
        margin-bottom: 40px;
    }

    /* 電腦版標題間距 */
    .section-title-img {
        max-width: 500px;        /* 電腦版可以給予固定的最大寬度，避免標題拉得太寬 */
    }

    /* 區塊一：改為 3 欄並排 */
    .step-container.step-3-cols {
        flex-direction: row;      
        justify-content: center;  
        align-items: flex-start;  
        gap: 20px;                
    }
    
    .step-3-cols .step-item {
        flex: 1; 
        max-width: none;
    }

    /* 區塊二：改為 2x2 網格排列 */
    .step-container.step-grid-2x2 {
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px 30px; 
    }
    
    .step-grid-2x2 .step-item {
        margin: 0 auto; 
        max-width: 320px;
    }
}