/* ── 平板 (≤ 1024px)：左右比例調為 50/50 ── */
@media (max-width: 1024px) {
  .video-section { flex: 0 0 50%; }
}

/* ── 手機 (< 768px)：上下排版 ── */
@media (max-width: 768px) {
  .main {
    flex-direction: column;
    overflow-y: auto;
  }

  .video-section {
    flex: none;
    width: 100%;
    padding: 8px;
  }

  .subtitle-section {
    min-width: unset;
    border-left: none;
    border-top: 1px solid #ccc;
    height: 65vh;
  }

  #currentPreview { font-size: 13px; padding: 6px 12px; }

  /* iOS Safari 在 input 字級 < 16px 時，focus 會自動放大頁面。
     全部抬到 16px 避免縮放跳動。 */
  .subtitle-text textarea,
  .time-edit-input,
  .fr-row input[type=text],
  #replaceInput,
  .yt-input-wrap input,
  .tm-seg-text {
    font-size: 16px;
  }

  /* 拉大 split / delete 按鈕的觸控目標 */
  .split-btn,
  .del-btn {
    padding: 10px 8px;
    font-size: 18px;
  }
}

/* ── 小手機 (< 480px) ── */
@media (max-width: 480px) {
  .subtitle-time { width: 100px; font-size: 10px; }

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

  /* subtitle-header 三按鈕擠不下時，允許換行 */
  .subtitle-header {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Find/Replace modal 改為直向堆疊 */
  #findReplaceModal {
    padding: 16px 14px;
    max-width: 98%;
  }
  .fr-checks { flex-direction: column; gap: 10px; }
  .fr-row    { flex-direction: column; gap: 12px; }
  .fr-row > div { width: 100% !important; }

  /* YouTube 連結輸入：載入按鈕略縮 */
  .yt-input-wrap input { padding: 8px 10px; font-size: 14px; }
}

/* ── 防止橫向溢位（內容超寬時）── */
html, body { max-width: 100vw; overflow-x: hidden; }