/**
 * 朴子召會手機版 RWD 強化樣式表
 * Mobile-First Responsive Design System
 *
 * 專為手機用戶優化，確保所有頁面在移動設備上有良好的體驗
 * 支援 iPhone SE (375px) 到 iPad Pro (1024px)
 */

/* ===== 基礎設定 ===== */
:root {
  /* 觸摸目標最小尺寸 */
  --touch-target-min: 44px;

  /* 安全區域 */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);

  /* 手機間距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;

  /* 手機字體大小 */
  --mobile-font-xs: 12px;
  --mobile-font-sm: 13px;
  --mobile-font-base: 15px;
  --mobile-font-lg: 17px;
  --mobile-font-xl: 19px;
  --mobile-font-2xl: 22px;
}

/* ===== 全局觸摸優化 ===== */
@media (hover: none) and (pointer: coarse) {
  /* 觸摸設備上的最小點擊區域 */
  button,
  a,
  [role="button"],
  [onclick],
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }

  /* 輸入框字體大小（防止 iOS 縮放） */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* 禁用文字選擇（避免長按選中） */
  .no-select {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }

  /* 觸摸反饋 */
  .touch-feedback {
    -webkit-tap-highlight-color: rgba(201, 169, 98, 0.1);
  }

  .touch-feedback:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

/* ===== 手機視口適配（375px 以下） ===== */
@media screen and (max-width: 374px) {
  html {
    font-size: 14px;
  }

  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  /* 極小螢幕按鈕調整 */
  .btn {
    padding: 10px 16px;
    font-size: 14px;
  }

  .btn-sm {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ===== 小型手機（375px - 414px） ===== */
@media screen and (min-width: 375px) and (max-width: 414px) {
  html {
    font-size: 15px;
  }

  .container {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}

/* ===== 手機主要斷點（最大 767px） ===== */
@media screen and (max-width: 767px) {
  /* 頁面容器 */
  .page-container {
    padding-top: var(--safe-area-top);
    padding-bottom: calc(var(--safe-area-bottom) + 70px); /* 為底部導航留空間 */
  }

  .page-container.no-bottom-nav {
    padding-bottom: var(--safe-area-bottom);
  }

  /* 導航欄 */
  .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(56px + var(--safe-area-top));
    padding-top: var(--safe-area-top);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gold-100, #F9F3E3);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }

  .mobile-header .header-title {
    font-size: var(--mobile-font-lg);
    font-weight: 600;
    color: var(--text-primary, #1F2937);
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-header .header-action {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary, #4B5563);
    font-size: 20px;
    border-radius: 10px;
    transition: all 0.2s ease;
  }

  .mobile-header .header-action:active {
    background: var(--ivory-200, #F5F5F2);
  }

  /* 有導航欄的頁面內容 */
  .has-mobile-header {
    padding-top: calc(56px + var(--safe-area-top));
  }

  /* 底部導航 */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + var(--safe-area-bottom));
    padding-bottom: var(--safe-area-bottom);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--gold-100, #F9F3E3);
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    z-index: 100;
  }

  .mobile-bottom-nav .nav-item {
    flex: 1;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-muted, #9CA3AF);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav .nav-item .icon {
    font-size: 22px;
    transition: transform 0.2s ease;
  }

  .mobile-bottom-nav .nav-item.active {
    color: var(--gold-500, #9A7B0A);
  }

  .mobile-bottom-nav .nav-item.active .icon {
    transform: scale(1.1);
  }

  /* 底部導航 5 欄版本 */
  .mobile-bottom-nav.cols-5 .nav-item {
    font-size: 9px;
  }

  .mobile-bottom-nav.cols-5 .nav-item .icon {
    font-size: 20px;
  }

  /* 卡片佈局 */
  .card {
    border-radius: 16px;
    margin: 0 var(--spacing-lg) var(--spacing-lg);
  }

  .card-body {
    padding: var(--spacing-lg);
  }

  .card-header,
  .card-footer {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  /* 全寬卡片 */
  .card-full-width {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* 網格系統 */
  .grid {
    gap: var(--spacing-md);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-1-mobile {
    grid-template-columns: 1fr;
  }

  /* 彈性佈局 */
  .flex-col-mobile {
    flex-direction: column;
  }

  .gap-sm-mobile {
    gap: var(--spacing-sm);
  }

  /* 按鈕 */
  .btn {
    padding: 14px 20px;
    font-size: var(--mobile-font-base);
    border-radius: 12px;
  }

  .btn-sm {
    padding: 10px 16px;
    font-size: var(--mobile-font-sm);
  }

  .btn-lg {
    padding: 16px 24px;
    font-size: var(--mobile-font-lg);
  }

  /* 全寬按鈕區域 */
  .btn-group-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .btn-group-mobile .btn {
    width: 100%;
  }

  /* 橫向按鈕組 */
  .btn-row-mobile {
    display: flex;
    gap: var(--spacing-sm);
  }

  .btn-row-mobile .btn {
    flex: 1;
  }

  /* 表單 */
  .form-group {
    margin-bottom: var(--spacing-lg);
  }

  .form-label {
    font-size: var(--mobile-font-sm);
    margin-bottom: var(--spacing-sm);
  }

  .form-input {
    padding: 14px var(--spacing-lg);
    font-size: 16px; /* 防止 iOS 縮放 */
    border-radius: 12px;
  }

  /* 搜索框 */
  .search-box {
    position: relative;
  }

  .search-box input {
    padding-left: 44px;
    padding-right: 44px;
  }

  .search-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
  }

  .search-box .clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ivory-200, #F5F5F2);
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 14px;
  }

  /* 列表項目 */
  .list-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gold-100, #F9F3E3);
    gap: var(--spacing-md);
    -webkit-tap-highlight-color: transparent;
  }

  .list-item:active {
    background: var(--ivory-200, #F5F5F2);
  }

  .list-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--gold-100, #F9F3E3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gold-500);
    flex-shrink: 0;
  }

  .list-item-content {
    flex: 1;
    min-width: 0;
  }

  .list-item-title {
    font-size: var(--mobile-font-base);
    font-weight: 500;
    color: var(--text-primary, #1F2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .list-item-subtitle {
    font-size: var(--mobile-font-sm);
    color: var(--text-muted, #9CA3AF);
    margin-top: 2px;
  }

  .list-item-action {
    font-size: 18px;
    color: var(--text-muted, #9CA3AF);
    flex-shrink: 0;
  }

  /* 標籤切換 */
  .tab-bar {
    display: flex;
    background: var(--ivory-100, #FAFAF8);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-bar::-webkit-scrollbar {
    display: none;
  }

  .tab-item {
    flex: 1;
    min-width: max-content;
    padding: 10px 16px;
    font-size: var(--mobile-font-sm);
    font-weight: 500;
    color: var(--text-secondary, #4B5563);
    background: transparent;
    border: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.2s ease;
  }

  .tab-item.active {
    background: white;
    color: var(--gold-500, #9A7B0A);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* 分段控制 */
  .segment-control {
    display: flex;
    background: var(--ivory-200, #F5F5F2);
    border-radius: 10px;
    padding: 3px;
  }

  .segment-item {
    flex: 1;
    padding: 8px 12px;
    font-size: var(--mobile-font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease;
  }

  .segment-item.active {
    background: white;
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  /* 模態框（底部彈出） */
  .modal-mobile {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .modal-mobile.show {
    opacity: 1;
    visibility: visible;
  }

  .modal-mobile .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  .modal-mobile .modal-content {
    position: relative;
    background: white;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .modal-mobile.show .modal-content {
    transform: translateY(0);
  }

  .modal-mobile .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--gold-100, #F9F3E3);
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
  }

  .modal-mobile .modal-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--ivory-200, #F5F5F2);
    border-radius: 2px;
  }

  .modal-mobile .modal-title {
    font-size: var(--mobile-font-lg);
    font-weight: 600;
    color: var(--text-primary);
    padding-top: 8px;
  }

  .modal-mobile .modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ivory-200, #F5F5F2);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 16px;
    margin-top: 8px;
  }

  .modal-mobile .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--spacing-lg);
  }

  .modal-mobile .modal-footer {
    padding: var(--spacing-lg);
    padding-bottom: calc(var(--spacing-lg) + var(--safe-area-bottom));
    border-top: 1px solid var(--gold-100, #F9F3E3);
    background: white;
  }

  /* Action Sheet */
  .action-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-md);
    padding-bottom: calc(var(--spacing-md) + var(--safe-area-bottom));
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .action-sheet.show {
    opacity: 1;
    visibility: visible;
  }

  .action-sheet .action-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
  }

  .action-sheet .action-group {
    position: relative;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    transform: translateY(20px);
    transition: transform 0.3s ease;
  }

  .action-sheet.show .action-group {
    transform: translateY(0);
  }

  .action-sheet .action-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-size: var(--mobile-font-lg);
    color: var(--text-primary);
    background: transparent;
    border: none;
    width: 100%;
    border-bottom: 1px solid var(--ivory-200, #F5F5F2);
  }

  .action-sheet .action-item:last-child {
    border-bottom: none;
  }

  .action-sheet .action-item:active {
    background: var(--ivory-100, #FAFAF8);
  }

  .action-sheet .action-item.danger {
    color: var(--danger, #EF4444);
  }

  .action-sheet .action-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-size: var(--mobile-font-lg);
    font-weight: 600;
    color: var(--text-primary);
    background: white;
    border: none;
    width: 100%;
    border-radius: 14px;
  }

  /* 下拉刷新提示 */
  .pull-to-refresh {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--mobile-font-sm);
  }

  .pull-to-refresh .spinner {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  /* 空狀態 */
  .empty-state {
    padding: 60px var(--spacing-xl);
    text-align: center;
  }

  .empty-state .icon {
    font-size: 64px;
    color: var(--ivory-200, #F5F5F2);
    margin-bottom: var(--spacing-lg);
  }

  .empty-state h3 {
    font-size: var(--mobile-font-lg);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
  }

  .empty-state p {
    font-size: var(--mobile-font-sm);
    color: var(--text-muted);
    line-height: 1.5;
  }

  /* 表格響應式（轉為卡片） */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-as-cards thead {
    display: none;
  }

  .table-as-cards tbody tr {
    display: block;
    background: white;
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .table-as-cards tbody td {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--ivory-200, #F5F5F2);
  }

  .table-as-cards tbody td:last-child {
    border-bottom: none;
  }

  .table-as-cards tbody td::before {
    content: attr(data-label);
    font-weight: 500;
    color: var(--text-secondary);
  }

  /* 圖片響應式 */
  .img-responsive {
    max-width: 100%;
    height: auto;
  }

  .img-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
  }

  /* 影片響應式 */
  .video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
  }

  .video-container iframe,
  .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* 標題 */
  .section-title {
    font-size: var(--mobile-font-xl);
    padding: 0 var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .page-title {
    font-size: var(--mobile-font-2xl);
    text-align: center;
    margin-bottom: var(--spacing-sm);
  }

  /* 統計卡片 */
  .stat-card {
    background: white;
    border-radius: 12px;
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .stat-card .stat-value {
    font-size: var(--mobile-font-2xl);
    font-weight: 700;
    color: var(--gold-500, #9A7B0A);
    margin-bottom: 4px;
  }

  .stat-card .stat-label {
    font-size: var(--mobile-font-sm);
    color: var(--text-muted);
  }

  /* 快捷按鈕區 */
  .quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }

  .quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--mobile-font-xs);
    -webkit-tap-highlight-color: transparent;
  }

  .quick-action-item .icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-50, #FDFBF7);
    border-radius: 14px;
    font-size: 24px;
    color: var(--gold-500, #9A7B0A);
    transition: transform 0.2s ease;
  }

  .quick-action-item:active .icon {
    transform: scale(0.95);
  }

  /* 浮動操作按鈕 */
  .fab {
    position: fixed;
    right: var(--spacing-lg);
    bottom: calc(80px + var(--safe-area-bottom));
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-300, #C9A962), var(--gold-400, #B8960B));
    color: white;
    border: none;
    font-size: 24px;
    box-shadow: 0 4px 16px rgba(201, 169, 98, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .fab:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(201, 169, 98, 0.3);
  }

  /* 橫向滾動容器 */
  .scroll-horizontal {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .scroll-horizontal::-webkit-scrollbar {
    display: none;
  }

  .scroll-horizontal > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* 隱藏桌面元素 */
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  .show-mobile-flex {
    display: flex !important;
  }

  .show-mobile-grid {
    display: grid !important;
  }
}

/* ===== 平板（768px - 1023px） ===== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .grid-2-tablet {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3-tablet {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 平板模態框 */
  .modal-mobile .modal-content {
    max-width: 540px;
    margin: auto;
    border-radius: 20px;
    max-height: 80vh;
  }

  /* 平板底部導航 */
  .mobile-bottom-nav {
    max-width: 600px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  }

  /* 卡片佈局 */
  .card {
    margin: 0 0 var(--spacing-xl);
  }
}

/* ===== 桌面（1024px 以上） ===== */
@media screen and (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }

  .show-desktop {
    display: block !important;
  }

  .show-desktop-flex {
    display: flex !important;
  }

  .show-desktop-grid {
    display: grid !important;
  }

  /* 隱藏手機專用元素 */
  .mobile-header,
  .mobile-bottom-nav,
  .fab {
    display: none;
  }
}

/* ===== 打印樣式 ===== */
@media print {
  .mobile-header,
  .mobile-bottom-nav,
  .fab,
  .modal-mobile,
  .action-sheet {
    display: none !important;
  }

  .page-container {
    padding: 0 !important;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }
}

/* ===== 深色模式支援（可選） ===== */
@media (prefers-color-scheme: dark) {
  .dark-mode-enabled {
    --ivory-50: #1a1a1a;
    --ivory-100: #242424;
    --ivory-200: #333333;
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --gold-50: #2a2520;
    --gold-100: #3d3428;
  }

  .dark-mode-enabled .card,
  .dark-mode-enabled .mobile-header,
  .dark-mode-enabled .mobile-bottom-nav,
  .dark-mode-enabled .modal-mobile .modal-content,
  .dark-mode-enabled .action-sheet .action-group,
  .dark-mode-enabled .action-sheet .action-cancel {
    background: var(--ivory-100);
  }
}

/* ===== 減少動態效果（無障礙） ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .modal-mobile,
  .action-sheet {
    transition: none;
  }

  .modal-mobile .modal-content,
  .action-sheet .action-group {
    transition: none;
  }
}

/* ===== 橫向模式（手機） ===== */
@media screen and (max-width: 896px) and (orientation: landscape) {
  .mobile-header {
    height: 48px;
    padding-top: 0;
  }

  .has-mobile-header {
    padding-top: 48px;
  }

  .mobile-bottom-nav {
    height: 50px;
  }

  .mobile-bottom-nav .nav-item {
    height: 50px;
  }

  .modal-mobile .modal-content {
    max-height: 100vh;
    border-radius: 0;
  }

  .action-sheet {
    padding: var(--spacing-sm);
  }
}

/* ===== 全域 Modal/彈窗觸控修復 ===== */
/* 確保所有模態框在手機上可滾動、可觸控 */

/* 任何 position:fixed 的 modal overlay 都需要滾動支援 */
.modal-overlay,
[class*="modal-overlay"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 任何 modal-content 都需要滾動支援 */
.modal-content,
[class*="modal-content"] {
  -webkit-overflow-scrolling: touch;
}

/* 任何 modal-body 都需要滾動支援 */
.modal-body,
[class*="modal-body"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ===== 手機端 modal 底部彈出模式 ===== */
@media screen and (max-width: 767px) {
  /* 防止 body 在 modal 打開時背景滾動 */
  body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }

  /* 全局表格包裝器 */
  .table-responsive,
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* 防止任何元素超出視口寬度 */
  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
  }

  /* 長文字自動斷行 */
  p, li, td, th, span, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* pre/code 防止溢出 */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-break: break-all;
  }
}