/* おくみせ Bottom Sheet — 768px以下で .modal-overlay をボトムシート化 */

/* ==================== 共通: ドラッグハンドル ==================== */
.bottom-sheet-handle {
  display: none; /* PC では非表示 */
  width: 44px;
  height: 4px;
  background: #D1C8BC;
  border-radius: 2px;
  margin: 10px auto 4px;
  cursor: grab;
  touch-action: none;
}
.bottom-sheet-handle:active { cursor: grabbing; background: #B8AFA2; }

/* ==================== 動的シート(.bottom-sheet-overlay)のベーススタイル ====================
   showBottomSheet() は .modal-overlay.bottom-sheet-overlay を生成する。
   呼び出し元ページに .modal-overlay の CSS 定義がない可能性があるため、
   ここで自己完結のベースを保証する。 */
.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bottom-sheet-overlay.show { display: flex; }
.bottom-sheet-overlay .modal-box {
  background: #FFFFFF;
  border: 1px solid #F3F0EB;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-height: 90vh;
  overflow-y: auto;
}
.bottom-sheet-overlay .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #F3F0EB;
}
.bottom-sheet-overlay .modal-body { padding: 16px 20px; }
.bottom-sheet-overlay .modal-footer {
  padding: 12px 20px; border-top: 1px solid #F3F0EB;
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ==================== PC: 中央モーダル + フェード/スケール ==================== */
@media (min-width: 769px) {
  .modal-overlay {
    transition: opacity 200ms ease;
    opacity: 0;
  }
  .modal-overlay.show {
    opacity: 1;
  }
  .modal-overlay .modal-box {
    transform: scale(0.96);
    transition: transform 200ms ease;
  }
  .modal-overlay.show .modal-box {
    transform: scale(1);
  }
}

/* ==================== モバイル (≤768px): ボトムシート化 ==================== */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0);
    transition: background-color 250ms ease;
  }
  .modal-overlay.show {
    background: rgba(0, 0, 0, 0.45);
  }

  .modal-overlay .modal-box {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform 300ms cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    will-change: transform;
  }
  .modal-overlay.show .modal-box {
    transform: translateY(0);
  }

  .bottom-sheet-handle {
    display: block;
  }

  /* ボトムシート時はヘッダーの sticky 解除 (ハンドルとの重なり回避) */
  .modal-overlay .modal-header {
    position: relative !important;
    padding-top: 6px !important;
  }

  /* フッターの下余白 (safe-area 対応) */
  .modal-overlay .modal-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ==================== 古い .hidden 方式モーダル (settings.html 用) ==================== */
@media (max-width: 768px) {
  /* settings.html の cancel-modal は display:flex を hidden クラスで制御 */
  .modal-overlay:not(.hidden).modal-overlay--legacy,
  #cancel-modal:not(.hidden) {
    align-items: flex-end;
  }
}