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

/* タッチ操作時の青いハイライトを無効化 */
* {
    -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-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));
    }
}