/* 預設：桌機保留左右 100px */
.pad{
  padding-inline: 100px;       /* 等同於 padding-left/right */
}

/* <768px：手機改小，含 iOS 安全邊界 */
@media (max-width: 767.98px){
  .pad{
    padding-inline: max(16px, env(safe-area-inset-left));
    /* 右側同理（RTL 也OK） */
    padding-right: max(16px, env(safe-area-inset-right));
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
  }
}

/* 480–767px：再寬一點 */
@media (min-width: 480px) and (max-width: 767.98px){
  .pad{
    padding-inline: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    scroll-padding-left: 24px;
    scroll-padding-right: 24px;
  }
}

/* 640–767px：再加一點 */
@media (min-width: 640px) and (max-width: 767.98px){
  .pad{
    padding-inline: max(32px, env(safe-area-inset-left));
    padding-right: max(32px, env(safe-area-inset-right));
    scroll-padding-left: 32px;
    scroll-padding-right: 32px;
  }
}

/* 手機橫向滑動時隱藏捲軸（保留可滑動） */
.no-scrollbar {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; } /* Chrome/Safari */