/**
 * モバイルデバイス向けの追加スタイル
 */

/* タッチ操作時の青いハイライトを無効化 */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}

/* iOSでのスクロール操作を滑らかにする */
body {
    -webkit-overflow-scrolling: touch;
}

/* モバイルデバイスでのテキスト選択を防止 */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 地図コンテナでのタッチ操作を最適化 */
#map {
    touch-action: manipulation;
}

/* モバイル用のスタイル調整 */
.shrine-list {
  max-height: 40vh;
  overflow-y: auto;
}

/* マーカーのドロップアニメーション */
@keyframes markerDrop {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 神社マーカーのスタイル */
.shrine-marker {
  cursor: pointer;
  animation: markerDrop 0.5s ease-out;
}

/* 現在地マーカーのスタイル */
.current-location-marker {
  cursor: pointer;
  animation: pulse 1.5s infinite;
}

/* 現在地マーカーのパルスアニメーション */
@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(66, 133, 244, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(66, 133, 244, 0);
  }
}

/* 詳細パネルのスクロールを最適化 */
#shrine-details {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ボタン要素のタップ領域を拡大 */
button, 
.view-details, 
#close-details {
    /* min-height: 44px; */
    min-width: 44px;
    padding: 10px;
}

/* 検索入力フィールドを最適化 */
#search-input {
    font-size: 16px; /* iOSでの自動ズームを防止 */
}

/* iPhoneX以降の機種でのセーフエリア対応 */
@supports (padding: max(0px)) {
    #shrine-details {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    
    footer {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}