/* index.html / map.html / global_map.php 공용 PWA shell 스타일
   (서비스워커 설치배너 · iOS 안내 · 업데이트 토스트 · 카카오 로그인 병합 모달)
   각 페이지가 로드하는 page-specific css(map.css/global_map.css)와 별개로,
   이 셋이 공통으로 쓰는 init.js가 다루는 마크업만 모아둔 자체완결 파일이다. */

/* 모달 공용 베이스 (merge-guide-modal이 사용) */
.modal-overlay { display: none !important; position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 99999; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex !important; }
.modal-content { background: var(--card-bg, #fff); padding: 35px 25px; border-radius: 28px; width: 90%; max-width: 340px; text-align: center; box-shadow: 0 15px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 20px; }
.modal-content h3 { margin: 0; font-size: 22px; font-weight: 900; color: var(--text-main, #222); }
.modal-btn-row { display:flex; gap:12px; }
.modal-btn-row.mt-15 { margin-top: 15px; }

/* merge-guide-modal (카카오 로그인 시 게스트 데이터 병합 안내) */
#merge-guide-modal { z-index: 100005; }
#merge-modal-desc { font-size:15px; color:var(--text-sub, #666); line-height:1.6; word-break:keep-all; font-weight:500; margin:10px 0; }
#btn-merge-skip { flex:1; padding:16px; border:none; border-radius:14px; background:var(--btn-cancel-bg, #f0f0f0); color:var(--btn-cancel-text, #666); font-weight:800; font-size:15px; }
#btn-merge-confirm { flex:1; padding:16px; border:none; border-radius:14px; background:var(--primary-dark, #1B5E20); color:white; font-weight:900; font-size:15px; }

/* PWA 설치 대형 바텀시트 */
#install-banner {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    background: var(--card-bg, #fff);
    padding: 30px 24px calc(40px + env(safe-area-inset-bottom)) 24px;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    z-index: 10000;
    box-sizing: border-box;
    animation: pwaShellSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pwaShellSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.install-content { text-align: center; margin-bottom: 25px; }
.install-app-icon { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.install-content h3 { font-size: 20px; font-weight: 900; color: var(--text-main, #222); margin: 0 0 8px 0; }
.install-content p { font-size: 14.5px; color: var(--text-sub, #666); line-height: 1.5; margin: 0; word-break: keep-all; }
#btn-install-app { width: 100%; height: 64px; background: var(--primary-dark, #1B5E20); color: white; border: none; border-radius: 18px; font-size: 18px; font-weight: 900; margin-bottom: 12px; cursor: pointer; transition: transform 0.2s; }
#btn-install-app:active { transform: scale(0.97); }
#btn-close-banner { width: 100%; height: 48px; background: none; border: none; color: var(--text-sub, #666); font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* iOS 설치 안내 */
#ios-install-bubble { display: none; position: fixed; bottom: calc(25px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--primary-dark, #1B5E20); color: white; padding: 12px 20px; border-radius: 12px; box-sizing: border-box; font-size: 14px; font-weight: bold; text-align: center; z-index: 100000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: 80%; max-width: 300px; line-height: 1.5; word-break: keep-all; }

/* 업데이트 토스트 */
#update-toast { display:none; position:fixed; bottom:calc(30px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); background:var(--text-main, #222); color:var(--bg-gray, #f2f4f5); padding:12px 20px; border-radius:30px; z-index:9999; box-shadow:0 8px 20px rgba(0,0,0,0.25); font-size:15px; white-space:nowrap; align-items:center; gap:15px; font-family:'Pretendard', sans-serif; }
.update-toast-btn { background:var(--primary-dark, #1B5E20); color:#fff; border:none; padding:8px 16px; border-radius:15px; cursor:pointer; font-weight:800; font-size:14px; }

/* iOS Safari는 16px 미만 입력창에 포커스할 때 화면을 자동 확대한다. */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea { font-size: 16px !important; }
}