/* 1. 웹폰트 통합 로드 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;800&family=Maru+Buri:wght@400;700&family=Pretendard:wght@300;500;700&display=swap');

/* 2. 앱 전체 글자 드래그 차단 및 입력창 예외 (네이티브 감성) */
*{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}
input,textarea{-webkit-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}

/* 3. 공통 테마 변수 (라이트/다크) */
:root{--bg-color:#F9F6F0;--text-main:#333333;--text-sub:#777777;--glass-bg:rgba(255,255,255,0.4);--glass-border:rgba(255,255,255,0.3);--modal-bg:#ffffff;--primary-sage:#84a59d;--primary-sage-deep:#6f9189;--primary-terracotta:#C97C5D;--primary-terracotta-deep:#AD6B50}
body.dark-mode{--bg-color:#121212;--text-main:#eeeeee;--text-sub:#aaaaaa;--glass-bg:rgba(0,0,0,0.45);--glass-border:rgba(255,255,255,0.1);--modal-bg:#1e1e1e;--item-bg:#2a2a2a;--border-color:#333333}

/* 4. PWA 설치 배너 / iOS 안내 말풍선 / 업데이트 토스트 (index.html, gallery.html 공용 — init.js가 제어) */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#install-banner-plus { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; padding: 25px 20px calc(30px + env(safe-area-inset-bottom)); box-sizing: border-box; box-shadow: 0 -5px 20px rgba(0,0,0,0.15); z-index: 100020; flex-direction: column; align-items: center; border-top-left-radius: 30px; border-top-right-radius: 30px; }
.install-banner-close-btn { position: absolute; top: 15px; right: 20px; background: none; border: none; font-size: 1.5rem; color: #ccc; cursor: pointer; font-weight: bold; transition: transform 0.2s; }
.install-banner-close-btn:active { transform: scale(0.9); }
.install-banner-emoji { font-size: 3rem; margin-bottom: 15px; animation: bounce 2s infinite; }
.install-banner-title { margin: 0 0 10px 0; color: #333; font-family: 'Maru Buri'; font-size: 1.4rem; }
.install-banner-desc { margin: 0 0 20px 0; color: #666; font-size: 1rem; text-align: center; line-height: 1.5; word-break: keep-all; }
.install-banner-btn { width: 100%; padding: 16px; background: var(--primary-terracotta); color: white; border: none; border-radius: 16px; font-size: 1.05rem; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(201, 124, 93, 0.3); transition: transform 0.2s, background 0.2s; }
.install-banner-btn:active { transform: scale(0.95); background: var(--primary-terracotta-deep); }

#ios-install-bubble { display: none; position: fixed; bottom: calc(25px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.95); padding: 20px; border-radius: 20px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.15); z-index: 100020; text-align: center; width: 90%; max-width: 320px; border: 2px solid #84a59d; }
.ios-bubble-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 1.2rem; color: #aaa; cursor: pointer; transition: transform 0.2s; }
.ios-bubble-close-btn:active { transform: scale(0.9); }
.ios-bubble-arrow { font-size: 2rem; display: block; margin-bottom: 10px; }
.ios-bubble-text { font-size: 1rem; color: #444; line-height: 1.6; word-break: keep-all; }
.ios-bubble-text .key-icon { font-size: 1.3rem; vertical-align: middle; color: #007AFF; }
.ios-bubble-text .key-action { color: #84a59d; font-weight: 900; }

#update-toast { display: none; position: fixed; bottom: calc(30px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: rgba(40, 40, 40, 0.95); color: #fff; 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-terracotta); 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; }
}