/* STORK EXPRESS 響應式網頁設計 (RWD) */
/* 建立日期：2025-12-28 */
/* 修正：手機版頂部重複 banner 問題 v2 */

* { box-sizing: border-box !important; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  background: #fff !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #fff !important;
  min-width: 320px !important;
}

.screen {
  width: 1920px !important;
  transform-origin: top left !important;
}

/* 手機/平板：縮放整個頁面 */
@media screen and (max-width: 1919px) {
  html {
    overflow: hidden !important;
    width: 100vw !important;
  }

  body {
    overflow: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
    /* 不設定固定高度，讓內容自然流動 */
  }

  .screen {
    transform: scale(calc(100vw / 1920)) !important;
    transform-origin: top left !important;
    width: 1920px !important;
    display: block !important;
    /* 不使用 position: absolute，避免 Safari 渲染問題 */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  /* 確保 header 在縮放後正確顯示 */
  .header {
    transform-origin: top left !important;
  }
}

/* 大螢幕 (1920px+) - 置中顯示 */
@media screen and (min-width: 1920px) {
  body {
    display: flex !important;
    justify-content: center !important;
  }
  .screen {
    transform: none !important;
  }
}

/* LINE 浮動按鈕 */
.floating-line-wrapper {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 99999 !important;
}

/* 隱藏水平滾動條 */
::-webkit-scrollbar:horizontal { display: none; }