@media (max-width: 767px) {
  body {
    background-image: none !important;
    background-color: #3B0F6B !important;
  }

  body::before {
    content: "";
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background-image: url('/common/images/bg-rwd.png') !important;
    background-size: cover !important;
    background-position: center top !important; 
    background-repeat: no-repeat !important;
    z-index: -999 !important;
  }

  .custom-header::before {
    background-image: none !important;
  }

  .custom-header {
    max-width: 767px;
    height: 80px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .custom-header.header-scrolled {
    background-color: #3B0F6B !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5) !important;
  }
  
  .header-left .btn {
    margin: 13.5px 0px 12.5px 12px;
    width: 54px;
  }

  .brand-logo {
    width: 139px;
    height: 55px;
    padding: 0;
    margin: 13px 0 12px 0;
  }

  .header-right {
    padding: 0 12px 0 0;
  }

  .custom-lang-btn {
    height: 28px;
    margin: 26px 0;
  }

  .feature-block {
    height: auto !important;
  }

  .feature-block .text-box,
  .feature-block .image-box {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* =================================================== */
  /* 第一組 section (Hero 區塊) 調整                     */
  /* =================================================== */
  .main-content-area {
    padding-top: 10px;
  }

  .main-content-area > section:first-of-type {
    display: flex;
    flex-direction: column-reverse !important; 
    align-items: center;
    gap: 30px; 
    margin-bottom: 30px !important;
  }

  .main-content-area > section:first-of-type .text-box {
    width: 86.66% !important; 
    text-align: center;       
  }

  .feature-block .text-box h2.brand-title {
    font-size: 40px;
  }

  .main-content-area > section:first-of-type .image-box {
    width: 70% !important;    
  }

  /* =================================================== */
  /* 剩下的 section 區塊調整                             */
  /* =================================================== */
  .feature-block:not(:first-of-type) {
    display: flex;
    flex-direction: column-reverse !important; 
    align-items: center;
    gap: 20px; 
    margin-bottom: 30px !important; /* 控制每個 section 之間的距離 */
    scroll-margin-top: 80px !important; 
  }

  .feature-block:not(:first-of-type) .text-box {
    width: 80% !important;     
    text-align: left !important; 
  }

  .feature-block:not(:first-of-type) .image-box {
    width: 80% !important;     
    display: flex;
    justify-content: center;
  }

  /* =================================================== */
  /* 其他手機版隱藏與 icon 樣式 (維持原樣)               */
  /* =================================================== */
  header .fb-icon, 
  header .ig-icon, 
  .qr-code {
    display: none !important;
  }

  .fb-icon, .ig-icon {
    margin-right: 0;
  }

  .feature-block .text-box .app-download-area {
    margin-top: 30px;
  }
  
  .feature-block .text-box .ios-app-link {
    margin: 0 auto;
    display: block;
  }

  .feature-block .text-box .ios-app {
    margin: 0; 
    display: block;
  }

  .mobile-social-links {
    display: flex;
    justify-content: center;
    gap: 15px; 
    margin: 15px 0 !important; /* 只有這個保留給 icon 撐開空間 */
  }
  
  .mobile-social-links .fb-icon:hover,
  .mobile-social-links .ig-icon:hover {
    background-color: rgba(255, 255, 255, 0.2); 
    cursor: pointer;
  }

  /* 1. 解除電腦版的固定高度，讓內容可以自動撐開容器 */
  .feature-block.section-bg-1,
  .feature-block.section-bg-2 {
    height: auto !important;
    padding: 0 0 70px 0 !important; /* 利用 padding 留出上下的呼吸空間 */
    margin: 0 !important;
  }

  /* 2. 針對 ::before 虛擬元素，替換成手機專用的直式背景圖 */
  .feature-block.section-bg-1::before {
    background-image: url('/common/images/product_bg-rwd-01.png') !important;
  }

  .feature-block.section-bg-2::before {
    background-image: url('/common/images/product_bg-rwd-02.png') !important;
  }

  /* 3. 微調手機版背景的對齊位置 */
  .feature-block.section-bg-1::before,
  .feature-block.section-bg-2::before {
    /* 讓背景圖對齊上方，通常在手機版這樣視覺效果最好 */
    background-position: top center !important; 
  }

  .feature-block.section-bg-1 .image-box {
    align-self: auto !important;
  }

  .feature-block:nth-of-type(7) .image-box,
  .feature-block:nth-of-type(7) .text-box {
    position: relative;
    bottom: auto;
  }
  .feature-block:nth-of-type(7) .text-box {
    margin-top: 20px !important;
  }

  .feature-block:nth-of-type(7) {
    flex-direction: column-reverse !important;
  }

  .feature-block:nth-of-type(5) {
    margin-top: -30px;
  }
  
  .custom-side-menu {
    width: 50%;
    top: 80px;
  }

  /* =================================================== */
  /* Footer 手機版調整                                     */
  /* =================================================== */
  .custom-footer {
    height: 110px !important; 
    padding-top: 20px !important; 
    box-sizing: border-box !important; 
    display: block !important; /* 覆蓋原本的 flex */
  }

  .custom-footer-content {
    display: block !important; /* 覆蓋原本的 flex，讓內部元素聽從 text-align 置中 */
    width: 100% !important;
    padding-left: 0 !important; /* 清除電腦版的 50px 左邊距，這樣才能完美置中 */
    text-align: center !important; 
  }

  .footer-copyright-text {
    display: block !important; 
    margin-right: 0 !important; /* 清除電腦版的 70px 右邊距 */
    margin-bottom: 10px !important; 
    line-height: 1.5 !important; /* 稍微放大行高，避免手機太窄時折行黏在一起 */
  }

  .footer-legal-link,
  .footer-divider {
    display: inline-block !important; 
    vertical-align: middle;
  }
}