/* =========================================
   산도바로+ (Plus) 메인 스타일 시트 (최종)
   ========================================= */

/* 1. 앱 전체 글자 드래그 및 선택 차단 */
* { -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; }

@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. 공통 테마 변수 (라이트/다크) */
: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;
    --item-bg: #f9f9f9;
    --border-color: #eeeeee;
    --primary-sage: #84a59d;
    --primary-sage-deep: #6f9189;
    --primary-terracotta: #C97C5D;
    --primary-terracotta-deep: #AD6B50;
    --deep-forest: #2c3e50;
    /* 소셜 버튼 라이트 모드 색상 */
    --google-bg: #ffffff;
    --email-bg: #f5f5f5;
}

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;
    /* 🌟 구글/이메일 버튼 다크모드 대응 */
    --google-bg: #2a2a2a;
    --email-bg: #1e1e1e;
}

body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, 'Pretendard', sans-serif; 
    background: var(--bg-color); 
    color: var(--text-main); 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    height: 100vh;
    height: 100dvh;
    height: var(--app-h, 100dvh);
    overflow: hidden; 
    transition: background-color 0.3s, color 0.3s;
}

/* 3. 상단 컴팩트 버튼 & 헤더 */
.compact-btn-group { position: fixed; top: calc(20px + env(safe-area-inset-top)); z-index: 3000; display: flex; gap: 6px; }
.compact-btn-group.left { left: max(20px, env(safe-area-inset-left)); }
.compact-btn-group.right { right: max(20px, env(safe-area-inset-right)); }
.compact-btn { background: rgba(255,255,255,0.82) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.6) !important; padding: 6px 10px !important; width: auto !important; min-width: 0 !important; border-radius: 20px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; gap: 4px; color: #2f4a44 !important; font-weight: 800; font-size: 0.85rem; text-decoration: none; cursor: pointer; transition: 0.2s; }
.compact-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.95) !important; }
.compact-btn.sage-text { color: var(--primary-sage-deep) !important; }
body.dark-mode .compact-btn { background: rgba(28,28,30,0.75) !important; border-color: rgba(255,255,255,0.15) !important; color: #eaf1ef !important; }
body.dark-mode .compact-btn.sage-text { color: #a9c6bf !important; }
.noti-badge { background: #ff6b6b; color: white; font-size: 0.7rem; font-weight: 800; padding: 2px 6px; border-radius: 12px; min-width: 12px; text-align: center; box-shadow: 0 2px 5px rgba(255,107,107,0.4); }

.header-area { position: absolute; top: calc(115px + env(safe-area-inset-top)) !important; z-index: 1000; text-align: center; width: 100%; pointer-events: none; }
.brand-line { font-size: 0.75rem; letter-spacing: 2px; color: #b8d0c6; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.32); text-transform: uppercase; display: block; margin-bottom: 5px; }
.main-title { margin: 0; font-size: 1.7rem; font-weight: 850; text-shadow: 0 4px 18px rgba(0,0,0,.38); color: #fff; }

/* 4. 카메라 & 스캔 오버레이 */
#camera-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #e0dcd3; }
video { width: 100%; height: 100%; object-fit: cover; }
#captured-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
#captured-preview[hidden] { display: none; }
.guide-stick-outline { position: absolute; width: min(82%, 430px); height: 25%; top: 41%; left: 50%; transform: translate(-50%, -50%); z-index: 10; pointer-events: none; box-sizing: border-box; border: 2px dashed rgba(255,255,255,.94); border-radius: 22px; box-shadow: 0 0 0 9999px rgba(0,0,0,.12), 0 0 16px rgba(255,255,255,.24); opacity: 0; visibility: hidden; transition: opacity .18s ease, border-color .18s ease; }
#camera-wrapper.guides-ready .guide-stick-outline { opacity: 1; visibility: visible; }

#scan-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 150px 22px 210px; background: rgba(22, 34, 27, 0.44); backdrop-filter: blur(3px); z-index: 15; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: opacity 0.4s ease, visibility 0.4s ease; }
#scan-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

#result-overlay { position: absolute; bottom: calc(40px + env(safe-area-inset-bottom)); width: 88%; height: 220px; display: flex; flex-direction: column; background: rgba(255,253,248,.82); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: var(--text-main); padding: 25px; border-radius: 35px; text-align: center; z-index: 20; box-shadow: 0 15px 40px rgba(0,0,0,0.12); box-sizing: border-box; border: 1px solid rgba(255,255,255,.62); }
#result-overlay.scan-in-progress { bottom: calc(18px + env(safe-area-inset-bottom)); height: 152px; padding: 13px 17px; border-radius: 25px; }
#result-overlay.scan-in-progress #ph-result { font-size: .93rem; line-height: 1.28; }
#result-overlay.scan-in-progress #capture-btn { flex-basis: 52px; padding: 11px; }
body.dark-mode #result-overlay { background: rgba(28,28,30,.78); border-color: rgba(255,255,255,.12); }
#status-msg { flex: 0 0 auto; font-size: 0.9rem; line-height: 1.3; font-weight: 700; margin: 0; display: block; color: var(--primary-sage); letter-spacing: -0.5px; }
#ph-result { flex: 1 1 auto; min-height: 0; font-family: 'Playfair Display', 'Georgia', 'Maru Buri', serif; font-size: clamp(.95rem, 4.3vw, 1.3rem); line-height: 1.35; font-weight: 800; margin: 0; display: flex; align-items: center; justify-content: center; white-space: pre-line; word-break: keep-all; overflow-wrap: normal; text-wrap: balance; color: var(--text-main); }
#capture-btn { flex: 0 0 56px; width: 100%; padding: 18px; border: none; border-radius: 30px; background: var(--primary-terracotta); color: white; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: 0.2s; box-shadow: 0 8px 24px rgba(201, 124, 93, 0.3); }
#capture-btn[hidden], #result-decision[hidden] { display: none; }
#result-overlay.result-review { height: 234px; }
#result-decision { display: flex; gap: 10px; width: 100%; flex: 0 0 52px; }
#result-decision button { flex: 1; min-width: 0; border: 0; border-radius: 25px; font-size: .95rem; font-weight: 750; cursor: pointer; }
#retake-result-btn { color: var(--text-main); background: rgba(90,105,96,.15); }
#record-result-btn { color: white; background: var(--primary-terracotta); }
#capture-btn:active { background: var(--primary-terracotta-deep); transform: scale(0.98); }
#capture-btn.disabled { background: #e0e0e0 !important; color: #aaa; pointer-events: none; box-shadow: none; }

/* 5. 팝업 / 바텀 시트 공통 */
#memo-modal, #push-modal, #permission-guide-modal, #push-toggle-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); z-index: 10000; justify-content: center; align-items: center; }
.modal-content { background: var(--modal-bg); padding: 35px 25px; border-radius: 30px; width: 85%; max-width: 380px; text-align: center; color: var(--text-main); box-shadow: 0 20px 40px rgba(0,0,0,0.1); border: 1px solid var(--border-color); max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; transition: background 0.3s; touch-action: pan-y; }
.modal-content h3 { font-family: 'Playfair Display', 'Georgia', 'Maru Buri', serif; margin-top: 0; color: var(--text-main); font-size: 1.4rem; }
.modal-btns { display: flex; gap: 12px; margin-top: 10px; align-items: center; }
.btn-skip { flex: 0.8; padding: 15px; background: transparent; color: var(--text-sub); border: none; font-weight: 600; cursor: pointer; }
.btn-save { flex: 1.2; padding: 15px; border: none; border-radius: 30px; background: var(--primary-terracotta); color: white; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(201, 124, 93, 0.25); transition: 0.2s; }
.btn-save:active { background: var(--primary-terracotta-deep); transform: scale(0.96); }
.btn-yellow { background: #FEE500 !important; color: #333 !important; }
.btn-push { background: var(--deep-forest) !important; box-shadow: 0 8px 20px rgba(44, 62, 80, 0.2) !important; }

.bottom-sheet-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; align-items: flex-end; backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.3s; }
.bottom-sheet-overlay.show { display: flex; opacity: 1; }
.bottom-sheet-content { width: 100%; background: var(--modal-bg); border-radius: 24px 24px 0 0; padding: 20px 20px calc(35px + env(safe-area-inset-bottom)); box-sizing: border-box; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; }
.bottom-sheet-overlay.show .bottom-sheet-content { transform: translateY(0); }
.bottom-sheet-handle { width: 40px; height: 5px; background: var(--border-color); border-radius: 3px; margin: 0 auto 25px; cursor: grab; }
.sheet-btn { width: 100%; text-align: left; padding: 18px 10px; background: none; border: none; font-size: 1.05rem; font-weight: 700; color: var(--text-main); border-bottom: 1px solid var(--border-color); cursor: pointer; }
.sheet-btn.text-danger { color: #ff6b6b; }
.sheet-btn.cancel-btn { text-align: center; border-bottom: none; color: var(--text-sub); margin-top: 10px; font-weight: 600; }

/* 6. 로그인 버튼 및 고유번호 창 */
.login-btn { width: 100%; height: 54px; margin-bottom: 12px; border-radius: 14px; border: 1px solid var(--border-color); font-size: 16px; font-weight: 800; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; transition: transform 0.2s, background 0.2s; color: var(--text-main); }
.login-btn:active { transform: scale(0.98); }
.login-btn img { width: 22px; height: 22px; }
.kakao-bg { background: #FEE500; color: #3b1e1e; border: none; }
/* 🌟 테마 변수를 활용한 구글/이메일 버튼 배경색 처리 */
.google-bg { background: var(--google-bg); }
.email-bg { background: var(--email-bg); }

.uid-display-box { background: var(--item-bg); border: 1.5px dashed var(--border-color); border-radius: 12px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s; }
.uid-display-box:active { transform: scale(0.96); background: var(--bg-color); border-color: var(--primary-terracotta); }
.uid-display-box b { font-size: 14px; color: var(--primary-sage); font-family: monospace; word-break: break-all; }

/* 🌟 스위치 토글 디자인 (모달창 다크모드 적용용) */
.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary-terracotta); }
input:checked + .slider:before { transform: translateX(22px); }

/* 7. 기록 남기기 (입력창 등) */
#memo-input { width: 100%; height: 50px; margin: 0; padding: 15px; box-sizing: border-box; border: 1px solid var(--border-color); border-radius: 14px; outline: none; color: var(--text-main); background: var(--item-bg); font-size: 0.95rem; transition: border 0.3s, background 0.3s; }
#memo-input:focus { border-color: var(--primary-terracotta); background: var(--modal-bg); }
.email-input-style { width: 100%; padding: 13px 15px; margin-bottom: 10px; border: 1px solid var(--border-color); border-radius: 10px; box-sizing: border-box; font-size: 0.95rem; background: var(--item-bg); color: var(--text-main); }
.email-input-style:focus { border-color: var(--primary-terracotta); outline: none; background: var(--modal-bg); }
.tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; justify-content: flex-start; }
.tag-btn { background: var(--item-bg); color: var(--text-sub); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s; display: inline-flex; align-items: center; }
.tag-btn:active, .tag-btn.selected { background: var(--primary-terracotta); color: white; border-color: var(--primary-terracotta); transform: scale(0.95); }
.plant-picker-heading { display: flex; flex-direction: column; gap: 4px; }
.field-label-help { color: var(--text-sub); font-size: 0.75rem; line-height: 1.4; }
.plant-picker-list { flex-wrap: nowrap; overflow-x: auto; margin: 12px -4px 4px; padding: 4px 4px 8px; scrollbar-width: none; }
.plant-picker-list::-webkit-scrollbar { display: none; }
.plant-picker-card { min-width: 92px; max-width: 108px; padding: 10px 9px; border-radius: 18px; flex-direction: column; gap: 7px; text-align: center; background: var(--item-bg); border: 1px solid var(--border-color); color: var(--text-main); }
.plant-picker-card.selected { background: rgba(132, 165, 157, 0.14); color: var(--text-main); border: 2px solid var(--primary-sage); transform: translateY(-2px); }
.plant-picker-thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgba(132, 165, 157, 0.12); display: flex; align-items: center; justify-content: center; color: var(--primary-sage); font-size: 1.15rem; }
.plant-picker-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 750; }
.plant-picker-new { border-style: dashed; color: var(--primary-terracotta); }
.measurement-note-area { margin: 4px 0 14px; text-align: left; }
.care-tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0 10px; }
.care-tag { padding: 8px 11px; border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-sub); background: var(--item-bg); font-size: 0.76rem; font-weight: 700; cursor: pointer; transition: 0.18s ease; }
.care-tag.selected { border-color: var(--primary-sage); color: var(--primary-sage-deep); background: rgba(132, 165, 157, 0.14); box-shadow: inset 0 0 0 1px var(--primary-sage); }
.note-input { width: 100%; height: 43px; padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 12px; outline: none; color: var(--text-main); background: var(--item-bg); font-size: 0.82rem; }
.note-input:focus { border-color: var(--primary-sage); background: var(--modal-bg); }

/* 측정 후 기록 저장 모달: 헤더·내용 스크롤·하단 행동을 분리한다. */
.measurement-log-modal { width: min(91%, 430px); max-width: 430px; max-height: min(90dvh, 760px); padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left; }
.measurement-modal-header { flex: 0 0 auto; padding: 25px 25px 13px; text-align: center; }
.measurement-log-modal .measurement-modal-header h3 { margin: 0 0 10px; font-size: 1.42rem; line-height: 1.3; }
.memo-result-summary { width: fit-content; margin: 0 auto; padding: 7px 12px; border-radius: 999px; display: flex; align-items: center; gap: 7px; background: rgba(132, 165, 157, 0.13); color: var(--primary-sage-deep); font-size: 0.76rem; }
.memo-result-summary[hidden] { display: none; }
.memo-result-summary strong { font-size: 0.82rem; }
.memo-result-summary span::before { content: '·'; margin-right: 7px; opacity: 0.5; }
.memo-result-summary[data-tone='acid'] { color: #a95732; background: rgba(216, 121, 69, 0.13); }
.memo-result-summary[data-tone='neutral'] { color: #806817; background: rgba(213, 181, 72, 0.16); }
.memo-result-summary[data-tone='alkaline'] { color: #6d4f8b; background: rgba(135, 100, 170, 0.13); }
.measurement-form-scroll { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 8px 25px 17px; scrollbar-width: none; }
.measurement-form-scroll::-webkit-scrollbar { display: none; }
.measurement-field-section { margin: 8px 0 17px; }
.measurement-field-section[hidden] { display: none; }
.measurement-section-heading { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.measurement-section-label { display: block; margin-bottom: 8px; color: var(--text-main); font-size: 0.86rem; font-weight: 800; }
.measurement-section-heading .measurement-section-label { margin-bottom: 0; }
.optional-label { padding: 4px 8px; border-radius: 999px; color: var(--text-sub); background: var(--item-bg); font-size: 0.68rem; font-weight: 750; }
.measurement-photo-section { margin: 0 0 19px; }
#plant-preview { width: 100%; min-height: 86px; padding: 15px 17px; box-sizing: border-box; border: 1.5px dashed rgba(132, 165, 157, 0.55); border-radius: 18px; color: var(--primary-sage-deep); background: rgba(132, 165, 157, 0.08); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: flex-start; gap: 13px; font-family: inherit; text-align: left; cursor: pointer; transition: transform 0.18s, border-color 0.18s, background-color 0.18s; }
#plant-preview:active { transform: scale(0.985); border-color: var(--primary-sage-deep); }
#plant-preview .measurement-photo-icon { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; color: var(--primary-sage-deep); background: var(--modal-bg); font-size: 1.28rem; box-shadow: 0 5px 14px rgba(57, 86, 68, 0.08); }
.measurement-photo-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.measurement-photo-copy strong { color: var(--text-main); font-size: 0.9rem; }
.measurement-photo-copy small { color: var(--text-sub); font-size: 0.74rem; line-height: 1.35; }
#plant-preview.has-photo { min-height: 145px; border-style: solid; border-color: var(--primary-sage); }
#plant-preview.is-loading { justify-content: center; }
.measurement-log-modal .plant-picker-list { margin-bottom: 7px; }
.measurement-log-modal .measurement-note-area { margin: 0 0 3px; }
.measurement-modal-actions { flex: 0 0 auto; margin: 0; padding: 13px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-color); background: var(--modal-bg); box-shadow: 0 -8px 24px rgba(38, 48, 41, 0.05); }
.measurement-modal-actions .btn-skip { flex: 0.72; padding: 14px 7px; white-space: nowrap; font-size: 0.8rem; }
.measurement-modal-actions .btn-save { flex: 1.45; padding: 15px 10px; font-size: 0.9rem; }

@media (max-height: 690px) {
    .measurement-log-modal { max-height: 94dvh; }
    .measurement-modal-header { padding-top: 18px; padding-bottom: 9px; }
    .measurement-log-modal .measurement-modal-header h3 { font-size: 1.25rem; margin-bottom: 7px; }
    .measurement-form-scroll { padding-top: 5px; }
}

/* 8. 알림함 (Notification Center) */
.noti-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); z-index: 100000; flex-direction: column; }
.noti-center-container { width: 100%; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; height: 100%; background: var(--modal-bg); }
.noti-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border-color); background: var(--modal-bg); }
.noti-header h2 { margin: 0; font-size: 1.2rem; font-family: 'Playfair Display', 'Georgia', 'Maru Buri', serif; color: var(--text-main); }
.btn-back, .btn-kebab { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-main); padding: 0; }
.noti-tabs { display: flex; padding: 0 20px; border-bottom: 1px solid var(--border-color); background: var(--modal-bg); }
.noti-tabs span { padding: 15px 10px; font-weight: bold; color: var(--primary-terracotta); border-bottom: 2px solid var(--primary-terracotta); }
.noti-list-area { flex: 1; overflow-y: auto; padding: 20px; background: var(--bg-color); touch-action: pan-y; }
.noti-empty { text-align: center; color: var(--text-sub); margin-top: 50px; font-size: 0.95rem; font-weight: 600; }
.noti-item { background: var(--item-bg); border-radius: 12px; padding: 15px; margin-bottom: 12px; border: 1px solid var(--border-color); display: flex; gap: 12px; align-items: flex-start; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.noti-icon { font-size: 1.5rem; } .noti-content-box { flex: 1; min-width: 0; }
.noti-item-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }
.noti-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: var(--text-main); font-size: 0.95rem; }
.noti-right-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.noti-date { font-size: 0.75rem; color: var(--text-sub); }
.noti-delete-btn { background: none; border: none; color: var(--text-sub); font-size: 0.8rem; padding: 5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.noti-delete-btn:active { transform: scale(0.9); }
.noti-body { font-size: 0.85rem; color: var(--text-sub); line-height: 1.4; word-break: keep-all; }

/* 9. 로딩, 플래시, 툴팁 등 기타 유틸리티 */
.shutter-flash { opacity: 0; background: white; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
@keyframes flash { 0% { opacity: 0.8; } 100% { opacity: 0; } }
#loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--glass-bg); backdrop-filter: blur(5px); z-index: 100000; flex-direction: column; justify-content: center; align-items: center; }
.spinner { width: 50px; height: 50px; border: 5px solid rgba(255,255,255,0.3); border-top: 5px solid var(--primary-terracotta); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-text { font-family: 'Playfair Display', 'Georgia', 'Maru Buri', serif; color: var(--text-main); font-weight: bold; font-size: 1.1rem; }

/* =========================================
   🌟 5:5 하프 버튼 디자인 (취소/로그인, 로그아웃/탈퇴)
   ========================================= */
.half-btn-wrapper { display: flex; gap: 10px; width: 100%; align-items: center; box-sizing: border-box; }
.btn-half { flex: 1; height: 50px; border: none; border-radius: 14px; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; box-sizing: border-box; }
.btn-half:active { transform: scale(0.96); }

/* 상황별 버튼 색상 */
.btn-cancel { background: var(--item-bg); color: var(--text-sub); border: 1px solid var(--border-color); }
.btn-mint { background: var(--primary-terracotta); color: white; box-shadow: 0 4px 12px rgba(201, 124, 93, 0.3); }
.btn-mint:active { background: var(--primary-terracotta-deep); }

/* =========================================
   10. index.html inline style 이전 (리팩토링)
   ========================================= */

/* 상단 컴팩트 버튼 아이콘 / 표시 상태 */
.compact-btn .icon-emoji { font-size: 1rem; }
.noti-badge { display: none; }
#btn-login-main { display: none; border: none; }
#user-info { display: none; }

/* 기록 남기기(메모) 모달 */
.field-label-row { width: 100%; text-align: left; margin-bottom: 5px; }
.field-label-text { font-size: 0.85rem; color: #888; font-weight: bold; }
#plant-file, #plant-camera-file { display: none; }

/* 측정 당시 식물 사진 선택 — 화분 대표사진 메뉴와 같은 바텀시트 언어 */
.photo-source-sheet { position: fixed; inset: 0; z-index: 99998; visibility: hidden; pointer-events: none; }
.photo-source-sheet.active { visibility: visible; pointer-events: auto; }
.photo-source-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(17, 27, 20, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: opacity 0.22s ease; }
.photo-source-sheet.active .photo-source-backdrop { opacity: 1; }
.photo-source-menu { position: absolute; left: 50%; bottom: 0; width: min(100%, 560px); padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; border-radius: 28px 28px 0 0; color: var(--text-main); background: var(--modal-bg); box-shadow: 0 -20px 55px rgba(20, 36, 25, 0.2); transform: translate(-50%, 105%); transition: transform 0.28s cubic-bezier(.2, .8, .2, 1); }
.photo-source-sheet.active .photo-source-menu { transform: translate(-50%, 0); }
.photo-source-menu .sheet-handle { width: 40px; height: 5px; margin: 0 auto 9px; border-radius: 999px; background: var(--border-color); }
.photo-source-menu h2 { margin: 11px 4px 5px; font-family: 'Maru Buri', Georgia, serif; font-size: 1.16rem; }
.photo-source-menu > p { margin: 0 4px 13px; color: var(--text-sub); font-size: 0.72rem; line-height: 1.45; word-break: keep-all; }
.photo-source-menu > button { width: 100%; padding: 14px 12px; box-sizing: border-box; border: 0; border-top: 1px solid var(--border-color); color: var(--text-main); background: transparent; font-family: inherit; font-size: 0.86rem; font-weight: 800; text-align: left; display: flex; align-items: center; gap: 11px; cursor: pointer; }
.photo-source-menu > button .ico { color: var(--primary-sage-deep); font-size: 1.08rem; }
.photo-source-menu > button.photo-source-cancel { margin-top: 5px; border-top: 0; color: var(--text-sub); justify-content: center; text-align: center; }

/* 알림 설정(push) 모달 */
.push-modal-desc { font-size: 0.95rem; color: #666; margin: 15px 0 25px 0; line-height: 1.5; }

/* 로그인 / 회원정보 바텀시트 공통 */
.sheet-title-centered { text-align: center; font-family: 'Maru Buri'; margin: 0 0 5px 0; }
.sheet-desc-centered { text-align: center; color: var(--text-sub); font-size: 0.9rem; margin-bottom: 25px; word-break: keep-all; }
#btn-kakao-login { display: none; }
#view-email-form { display: none; width: 100%; position: relative; z-index: 10; }
#pw-confirm-input { display: none; }
.stack-above { position: relative; z-index: 20; }
.forgot-pw-row { text-align: center; margin: 10px 0 20px 0; }
.link-text-sub { color: var(--text-sub); font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
.signup-row { text-align: center; margin-top: 20px; }
.link-text-strong { color: var(--text-main); font-size: 0.85rem; font-weight: 700; cursor: pointer; text-decoration: underline; }
.ccpa-row { margin-top: 25px; text-align: center; font-size: 0.75rem; color: var(--text-sub); display: flex; align-items: center; justify-content: center; gap: 6px; }
#ccpa-checkbox { display: none; width: 16px; height: 16px; accent-color: var(--primary-terracotta); cursor: pointer; }
.ccpa-label { cursor: pointer; }
.lang-theme-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.btn-lang-toggle { background: transparent; border: none; color: var(--text-sub); font-weight: 800; font-size: 0.9rem; cursor: pointer; padding: 5px 0; }
.theme-toggle-wrap { display: flex; align-items: center; gap: 8px; }
.dark-mode-label { font-weight: 700; color: var(--text-main); font-size: 0.9rem; }
.switch { margin: 0; }
.uid-box-left { text-align: left; }
.uid-label-text { font-size: 11px; color: var(--text-sub); display: block; margin-bottom: 2px; }
.app-version-display { text-align: center; font-size: 12px; color: var(--text-sub); letter-spacing: 1px; }
#noti-bottom-sheet { z-index: 100010; }

/* 로그인·계정 시트: 프로 앱과 같은 정보 위계, 플러스의 식집사 색감 유지 */
.login-account-sheet,
.user-account-sheet { max-height:92dvh; overflow-y:auto; overscroll-behavior:contain; }
.login-account-sheet .sheet-title-centered { margin-bottom:9px; text-align:left; color:var(--text-main); font-size:24px; line-height:1.3; }
.login-account-sheet .sheet-desc-centered { margin:0 0 24px; text-align:left; line-height:1.6; }
.login-btn:disabled { cursor:wait; opacity:.72; transform:none; }
.login-btn[aria-busy="true"] { box-shadow:none; }
.auth-loading-dot { width:15px; height:15px; flex:0 0 auto; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:plusAuthSpin .7s linear infinite; }
@keyframes plusAuthSpin { to { transform:rotate(360deg); } }
.guest-id-details,
.user-id-details { margin-top:14px; border:1px solid var(--border-color); border-radius:15px; background:var(--item-bg); overflow:hidden; }
.guest-id-details summary,
.user-id-details summary { min-height:58px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; cursor:pointer; list-style:none; }
.guest-id-details summary::-webkit-details-marker,
.user-id-details summary::-webkit-details-marker { display:none; }
.guest-id-details summary b,
.user-id-details summary b { display:block; color:var(--text-main); font-size:13px; }
.guest-id-details summary small,
.user-id-details summary small { display:block; margin-top:3px; color:var(--text-sub); font-size:10px; line-height:1.35; }
.guest-id-chevron,
.user-id-details-chevron { color:var(--text-sub); transition:transform .2s; }
.guest-id-details[open] .guest-id-chevron,
.user-id-details[open] .user-id-details-chevron { transform:rotate(180deg); }
.guest-id-details .uid-display-box,
.user-id-details .uid-display-box { margin:0 10px 10px; border-style:solid; background:var(--modal-bg); }
.uid-copy-action { flex:0 0 auto; margin-left:10px; padding:6px 9px; border-radius:9px; background:rgba(132,165,157,.14); color:var(--primary-sage); font-size:11px; font-weight:900; }
.user-account-sheet { text-align:left; }
.user-account-sheet .sheet-title-centered { margin-bottom:16px; }
.user-profile-card { display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:15px; border:1px solid var(--border-color); border-radius:17px; background:var(--item-bg); }
.user-profile-avatar { width:44px; height:44px; box-sizing:border-box; flex:0 0 auto; padding:11px; border-radius:14px; color:var(--primary-sage); background:rgba(132,165,157,.14); }
.user-profile-copy { min-width:0; flex:1; }
.user-profile-copy strong { display:block; overflow:hidden; color:var(--text-main); font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
#sheet-user-email { display:block; overflow:hidden; margin-top:4px; color:var(--text-sub); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.login-provider-badge { display:none; flex:0 0 auto; padding:5px 8px; border-radius:999px; background:rgba(132,165,157,.14); color:var(--primary-sage); font-size:10px; font-weight:900; }
.user-settings-label { display:block; margin:0 0 7px 2px; color:var(--text-sub); font-size:11px; font-weight:850; }
.user-settings-row { margin:0 0 14px; padding:0 0 14px; }
.user-id-details { margin:0 0 14px; background:var(--modal-bg); }
.user-sheet-actions { display:flex; flex-direction:column; gap:7px; }
.user-sheet-btn { width:100%; min-height:50px; border:0; border-radius:14px; font-size:15px; font-weight:850; cursor:pointer; }
.user-sheet-btn-logout { background:var(--item-bg); color:var(--text-main); }
.user-sheet-btn-delete { min-height:38px; background:transparent; color:#b26a65; font-size:12px; font-weight:700; }
.user-sheet-btn:active { transform:scale(.98); }
.user-account-sheet .app-version-display { margin-top:12px; }

/* 작은 여백 유틸리티 (이 섹션의 컴포넌트들에서만 재사용) */
.mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; }

/* 알림 설정 확인(push-toggle) / 권한 안내(permission-guide) 모달 — z-index·배경이 #push-modal 그룹과 달라서 별도 오버라이드 필요 */
#permission-guide-modal, #push-toggle-modal { z-index: 100005; background: rgba(0,0,0,0.6); }
.modal-btns.gap-10 { gap: 10px; }
.modal-desc-text { color: #666; font-size: 0.95rem; line-height: 1.5; margin: 15px 0; word-break: keep-all; }
.toggle-btn-cancel { flex: 1; padding: 14px; border: none; border-radius: 12px; background: #f0f0f0; color: #666; font-weight: 800; font-size: 15px; transition: transform 0.2s; }
.toggle-btn-confirm { flex: 1; padding: 14px; border: none; border-radius: 12px; background: var(--primary-terracotta); color: white; font-weight: 900; font-size: 15px; transition: transform 0.2s, background 0.2s; }
.toggle-btn-cancel:active, .toggle-btn-confirm:active { transform: scale(0.96); }
.toggle-btn-confirm:active { background: var(--primary-terracotta-deep); }
.title-yellow { color: #FEE500; }
.dark-modal-desc { color: #ddd; font-size: 0.95rem; line-height: 1.6; word-break: keep-all; margin: 15px 0; }

/* 카메라 권한 안내 모달 (기존엔 CSS 정의가 아예 없이 전부 inline이었음) */
#camera-error-modal { display: none; z-index: 100005; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #F9F6F0; align-items: center; justify-content: center; flex-direction: column; padding: 20px; box-sizing: border-box; text-align: center; }
.camera-error-icon { font-size: 4rem; margin-bottom: 20px; }
.camera-error-title { font-family: 'Maru Buri'; color: #333; font-size: 1.5rem; margin-bottom: 10px; }
.camera-error-desc-text { color: #666; font-size: 0.95rem; line-height: 1.6; word-break: keep-all; margin-bottom: 30px; }
.camera-error-retry-btn { background: var(--primary-terracotta); color: white; border: none; padding: 16px 30px; border-radius: 30px; font-size: 1.1rem; font-weight: 800; box-shadow: 0 8px 20px rgba(201, 124, 93, 0.3); cursor: pointer; transition: transform 0.2s, background 0.2s; }
.camera-error-retry-btn:active { transform: scale(0.95); background: var(--primary-terracotta-deep); }