/* ==========================================================================
   1. 기본 설정 및 리셋
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { 
    width: 100%; height: 100%; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f3f4f6; overflow: hidden;
}
ul, li { list-style: none; }

/* ==========================================================================
   2. 전체 레이아웃
   ========================================================================== */
#layout-wrapper { display: flex; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background-color: white; }
#sidebar {
    display: none; width: 320px; background-color: #f8f9fa; border-right: 1px solid #e5e7eb;
    flex-shrink: 0; flex-direction: column; z-index: 30;
}
.sidebar-header { padding: 24px; border-bottom: 1px solid #e5e7eb; background: white; }
.sidebar-header h2 { font-size: 18px; color: #111827; font-weight: 700; }
.notice-list { padding: 0; margin: 0; overflow-y: auto; flex: 1; }
.notice-list li { padding: 16px 24px; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
.notice-list li:hover { background-color: #ffffff; }
.sidebar-footer { padding: 20px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #9ca3af; text-align: center; }

#app-container { flex: 1; position: relative; display: flex; flex-direction: column; background-color: white; }
#app-header {
    height: 50px;  /* 64px -> 50px 로 수정 */
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 0 16px; /* 좌우 여백도 20px -> 16px로 살짝 줄임 (선택) */
    background-color: #ffffff; 
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    z-index: 20; 
    flex-shrink: 0;
}
.header-brand { display: flex; align-items: center; gap: 8px; }
.brand-icon { 
    font-size: 22px; /* 28px -> 22px 로 수정 */
}

.brand-title { 
    font-size: 17px; /* 20px -> 17px 로 수정 */
    font-weight: 800; 
    color: #111827; 
    letter-spacing: -0.5px; 
}

/* [NEW] 로그인 버튼 스타일 */
#auth-container { display: flex; align-items: center; gap: 10px; }
.btn-login {
    background-color: #2563EB; color: white; border: none; padding: 8px 16px;
    border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background-color 0.2s;
}
.btn-login:hover { background-color: #1d4ed8; }
#user-info { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; font-weight: 600; }
.btn-logout {
    background: #f3f4f6; border: none; width: 32px; height: 32px; border-radius: 50%;
    color: #6b7280; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s;
}
.btn-logout:hover { background-color: #e5e7eb; color: #ef4444; }

#map { width: 100%; flex: 1; z-index: 0; }

/* ==========================================================================
   3. 패널 및 모달 스타일
   ========================================================================== */
.fab-btn {
    position: absolute; bottom: 25px; right: 20px;
    width: 50px; height: 50px; border-radius: 50%;
    background-color: #2563EB; color: white; border: none;
    font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    z-index: 5; cursor: pointer; transition: transform 0.2s; line-height: 1.2;
}
.fab-btn:active { transform: scale(0.92); }

.bottom-panel {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: #ffffff; border-top-left-radius: 24px; border-top-right-radius: 24px;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.15); z-index: 10;
    display: flex; flex-direction: column;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(110%);
    will-change: transform;
    contain: layout paint; /* 모바일 레이아웃 안정화 */
}
.bottom-panel.active { transform: translateY(0); }

/* 2. [추가] 패널 상단 '드래그 손잡이' 디자인 */
.panel-drag-handle {
    width: 100%;
    height: 24px; /* 터치 영역 확보 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    touch-action: none; /* 브라우저 기본 스크롤 막기 (드래그 전용) */
}

/* 회색 막대기 */
.panel-drag-handle::after {
    content: '';
    display: block;
    width: 40px;
    height: 5px;
    background-color: #e5e7eb;
    border-radius: 10px;
}

/* [NEW] 높이 자동 조절 스타일 */
.auto-height { height: auto; max-height: 85vh; }
.full-height { height: 90%; }

.panel-header { padding: 24px 24px 10px 24px; text-align: left; }
.panel-header h3 { font-size: 20px; color: #1f2937; font-weight: 700; }

/* [MODIFIED] 패널 컨텐츠 높이 유동적 변경 */
.panel-content {
  flex: 1;               /* 🔥 중요 */
  min-height: 0;         /* 🔥 중요 */
  overflow-y: auto;
}
.panel-content.no-padding { padding: 0; }
.panel-footer {
    padding: 0 20px 30px 20px; display: flex; gap: 12px; background: white; margin-top: auto;
}
.panel-footer button {
    flex: 1; height: 52px; border: none; border-radius: 12px;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.panel-footer button:active { opacity: 0.8; }
/* [NEW] 저장 버튼 비활성화 스타일 */
.panel-footer button:disabled {
    background-color: #9ca3af; /* 회색 */
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-left { background-color: #F3F4F6; color: #4B5563; }
.btn-right { background-color: #2563EB; color: white; box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2); }

/* ==========================================================================
   4. 상세 패널 내부
   ========================================================================== */
.version-header {
    background-color: #f3f4f6; color: #4b5563; font-size: 13px;
    padding: 12px 20px; text-align: center;
    border-top-left-radius: 24px; border-top-right-radius: 24px;
    position: relative; cursor: pointer; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.2s;
}
.version-header:hover { background-color: #e5e7eb; color: #1f2937; }
.version-header.active { background-color: #e5e7eb; }

/* 커스텀 드롭다운 메뉴 */
.custom-dropdown-menu {
    position: absolute;
    top: 45px; left: 50%; transform: translateX(-50%);
    width: 240px; background: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
    z-index: 50;
    display: none; overflow: hidden;
    animation: fadeIn 0.2s ease;
}
.custom-dropdown-menu.show { display: block; }
.dropdown-item {
    padding: 12px 16px; font-size: 14px; color: #374151;
    border-bottom: 1px solid #f3f4f6; cursor: pointer; text-align: left;
    display: flex; justify-content: space-between;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { background-color: #f9fafb; color: #2563EB; }
.dropdown-item.current { color: #2563EB; font-weight: 600; background-color: #eff6ff; }

.panel-header-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 15px 24px 10px 24px; border-bottom: 1px solid #f3f4f6;
}
.title-area { display: flex; flex-direction: column; gap: 4px; }
#detail-title { font-size: 20px; font-weight: 700; color: #111827; margin: 0; }
.title-highlight { color: #2563EB !important; text-shadow: 0 0 1px rgba(37, 99, 235, 0.2); }
.badge-category { display: inline-block; font-size: 12px; color: #6b7280; font-weight: 500; }
.btn-navi {
    background-color: #FEE500; color: #191919; border: none; padding: 10px 16px;
    border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* [NEW] 헤더 삭제 버튼 스타일 (빨간색) */
.btn-delete-icon {
    background-color: #ef4444; 
    color: white; 
    border: none; 
    padding: 10px 12px;
    border-radius: 8px; 
    font-size: 14px; 
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-right: 8px; /* 길찾기 버튼과의 간격 */
}
.btn-delete-icon:active { background-color: #dc2626; }


.info-list { padding: 10px 24px; }
.info-item { display: flex; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.info-item:last-child { border-bottom: none; }
.info-item .label { width: 80px; font-size: 14px; color: #9ca3af; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.info-item .value { font-size: 15px; color: #374151; font-weight: 500; line-height: 1.4; flex: 1; }
.value-row { display: flex; align-items: center; gap: 8px; flex: 1; }
.btn-copy { background: #f3f4f6; border: 1px solid #e5e7eb; color: #4b5563; font-size: 11px; padding: 4px 8px; border-radius: 4px; cursor: pointer; }
.extra-desc-box { padding: 0 24px 10px 24px; }
#detail-desc { font-size: 14px; color: #6b7280; background: #f9fafb; padding: 12px; border-radius: 8px; line-height: 1.5; }

/* ==========================================================================
   5. [NEW] 수정된 정보 확인 섹션 스타일
   ========================================================================== */
.verify-section {
    padding: 5px 24px 15px 24px; /* 하단 여백 추가 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px; /* 간격 조정 */
}

/* 사이트 테마에 맞춘 통일감 있는 버튼 */
.btn-verify-theme {
    width: 100%;
    background-color: #2563EB; 
    color: white;
    border: none;
    padding: 14px 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    transition: background-color 0.2s, transform 0.1s;
}
.btn-verify-theme:hover { background-color: #1d4ed8; }
.btn-verify-theme:active { transform: scale(0.98); }
.btn-verify-theme i { font-size: 16px; }

.last-verified-text {
    font-size: 13px;
    color: #9ca3af; 
    margin: 0;
}

/* ==========================================================================
   6. 입력 폼 스타일
   ========================================================================== */
.form-group { margin-bottom: 24px; }
.form-label { display: block; font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.form-label .req { color: #ef4444; margin-left: 2px; }
.form-input {
    width: 100%; height: 48px; padding: 0 16px;
    border: 1px solid #d1d5db; border-radius: 12px; font-size: 16px; color: #111827; outline: none;
    transition: border-color 0.2s;
}
.form-input:disabled {
    background-color: #f3f4f6; color: #6b7280; border-color: #e5e7eb; cursor: not-allowed; opacity: 1;
}
.form-input:focus { border-color: #2563EB; background-color: #fff; }
.form-textarea {
    width: 100%; height: 100px; padding: 16px;
    border: 1px solid #d1d5db; border-radius: 12px; font-size: 16px; resize: none; outline: none;
}
.form-textarea:focus { border-color: #2563EB; }
/* [NEW] 글자수 카운트 텍스트 */
.char-count-text {
    position: absolute;
    bottom: -20px;
    right: 5px;
    font-size: 12px;
    color: #9ca3af;
}


.toggle-group { display: flex; background-color: #f3f4f6; border-radius: 12px; padding: 4px; gap: 4px; }
.toggle-btn {
    flex: 1; height: 40px; border: none; border-radius: 8px; background-color: transparent;
    color: #6b7280; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.toggle-btn.active { background-color: #ffffff; color: #2563EB; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.detail-input-box { margin-top: 10px; position: relative; animation: fadeIn 0.3s ease; }
.detail-input-box .unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #6b7280; font-weight: 600; }

/* ==========================================================================
   7. [핵심] 모달 (Modal) - 높이 자동 조절 및 버튼 통일
   ========================================================================== */
.custom-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 3000; /* ★ 3000으로 수정하세요 */
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.custom-modal-overlay.show { opacity: 1; }

/* 모달 박스: 내용에 따라 높이 조절되나 최대 80% 제한 */
.custom-modal-box {
    background: white; 
    width: 90%; 
    max-width: 400px; 
    padding: 24px;
    border-radius: 20px; 
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transform: scale(0.9); transition: transform 0.2s;
    
    display: flex;
    flex-direction: column;

    height: auto; 
    max-height: 80%; /* 화면 높이의 80%를 넘지 않음 */
}
.custom-modal-overlay.show .custom-modal-box { transform: scale(1); }

/* 모달 타이틀: 고정 */
.custom-modal-title { 
    font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 12px; flex-shrink: 0; 
}

/* 스크롤 영역: 내용이 많을 때만 스크롤 발생 */
.modal-scroll-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 20px; /* 버튼과의 간격 */
    padding: 0 4px; /* 스크롤바 공간 확보 */
}
.custom-modal-desc { 
    font-size: 14px; color: #6b7280; line-height: 1.5; white-space: pre-line; 
}

/* 버튼 액션 영역 (세로 배치) */
.custom-modal-actions-column { 
    display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; 
}
.custom-modal-actions {
    display: flex; gap: 10px; flex-shrink: 0;
}

/* 통일된 버튼 스타일 */
.custom-modal-btn {
    width: 100%;
    height: 48px; 
    border-radius: 12px; 
    border: none; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer;
    transition: background-color 0.2s;
}

/* 1. 긍정 액션 (네, 정확합니다) - 녹색 계열 */
.btn-action-primary {
    background-color: #059669; 
    color: white;
}
.btn-action-primary:active { background-color: #047857; }

/* 2. 수정 액션 (아니요, 정보 입력) - 메인 블루 */
.btn-action-secondary {
    background-color: #2563EB; 
    color: white;
}
.btn-action-secondary:active { background-color: #1d4ed8; }

/* 3. 취소 액션 - 회색 */
.btn-action-cancel {
    background-color: #f3f4f6; 
    color: #4b5563;
}
.btn-action-cancel:active { background-color: #e5e7eb; }

/* 길안내 버튼 등 기타 */
.navi-choice-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.navi-choice-btn {
    width: 100%; padding: 14px; border: none; border-radius: 12px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform 0.1s;
}
.navi-choice-btn:active { transform: scale(0.98); }
.btn-kakao { background-color: #FEE500; color: #191919; }
.btn-naver { background-color: #03C75A; color: white; }
.btn-tmap { background-color: #0b00a8; color: white; }
.full-width { width: 100%; }

/* ==========================================================================
   8. 반응형 & 앱 모드
   ========================================================================== */
@media (min-width: 1000px) { #sidebar { display: flex; } }
body.app-mode #sidebar { display: none !important; }
body.app-mode #app-header { display: none !important; }


/* ==========================================================================
   9. [NEW] 지도 커스텀 마커 스타일
   ========================================================================== */
.marker-pin {
    width: 40px; height: 40px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #f38b8b; /* 파란 테두리 */
    display: flex; align-items: center; justify-content: center;
    
    font-size: 14px; font-weight: 800; color: #2563EB;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    cursor: pointer;
    position: relative;
    transition: transform 0.1s;
}

/* 마커 클릭 시 눌리는 효과 */
.marker-pin:active { transform: scale(0.95); }

/* 마커 아래 뾰족한 꼬리 만들기 */
.marker-pin::after {
    content: '';
    position: absolute;
    bottom: -8px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #f38b8b;
}

/* 무료 주차장일 때 스타일 (파란 배경, 흰 글씨) */
.marker-pin.free {
    background-color: #6492f5;
    color: #ffffff;
    border-color: #ffffff;
}
.marker-pin.free::after { border-top-color: #ffffff; } /* 꼬리 색상 변경 */

/* 유료(회차 없음) 주차장일 때 스타일 (빨간 배경, 흰 글씨) */
.marker-pin.paid {
    background-color: #f38b8b; /* 빨간색 */
    color: #ffffff;
    border-color: #ffffff;
}

/* 빨간색 말풍선 꼬리 */
.marker-pin.paid::after { 
    border-top-color: #ffffff; 
}

/* style.css 확인 (없으면 추가) */
.refresh-btn {
    bottom: 165px; /* 새로고침 버튼 위치 상단으로 이동 */
    background-color: white; 
    color: #2563EB; 
    font-size: 18px; 
}
.refresh-btn:active i {
    transform: rotate(180deg);
    transition: transform 0.2s;
}

/* [NEW] 내 위치 버튼 스타일 */
.my-location-btn {
    bottom: 95px; /* 새로고침 아래, 정보 공유 위에 배치 */
    background-color: white; 
    color: #2563EB; 
    font-size: 18px; 
}
.my-location-btn:active i {
    transform: scale(0.8);
    transition: transform 0.2s;
}
/* 줌 레벨 경고 배지 */
.zoom-warning {
    position: absolute;
    top: 120px; /* 상단 여백 (검색창이나 헤더 피해서 적절히 조절) */
    left: 50%;
    transform: translateX(-50%); /* 정확히 가운데 정렬 */
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검정 */
    color: white;
    padding: 10px 20px;
    border-radius: 30px; /* 둥근 모서리 */
    font-size: 14px;
    font-weight: 500;
    z-index: 50; /* 지도(z-index: 10~20)보다 위에 오게 설정 */
    pointer-events: none; /* 메시지가 떠 있어도 지도를 클릭/드래그 할 수 있게 통과시킴 */
    transition: opacity 0.3s; /* 부드럽게 나타나게 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


/* ==========================================================================
   10. 모바일 브라우저 하단 UI 대응
   ========================================================================== */

/* body overflow 수정 - 스크롤 가능하게 */
body, html { 
    width: 100%; height: 100%; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f3f4f6; 
    overflow: auto; /* hidden에서 auto로 변경 */
}

/* 하단 안전영역 패딩 */
body {
    padding-bottom: env(safe-area-inset-bottom);
}

/* FAB 버튼들 - 하단 여백 */
#btn-open-write {
    bottom: calc(25px + env(safe-area-inset-bottom, 20px)) !important;
}

/* [MODIFIED] btn-refresh 위치 조정 */
#btn-refresh {
    bottom: calc(155px + env(safe-area-inset-bottom, 20px)) !important; 
}

/* [NEW] btn-my-location 위치 조정 */
#btn-my-location {
    bottom: calc(90px + env(safe-area-inset-bottom, 20px)) !important; 
}

/* ===============================
   초기 위치 로딩 안내 오버레이
   =============================== */
.location-loading {
    position: absolute;
    top: 120px;              /* zoom-warning와 같은 위치 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    z-index: 50;
    pointer-events: none;    /* 지도 조작 방해 안 함 */
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    animation: locationFadeIn 0.3s ease;
}

/* 아이콘 */
.location-loading i {
    font-size: 18px;
    color: #ffffff;
    animation: locationPulse 1.2s infinite;
}

/* 텍스트 영역 */
.location-loading .text {
    line-height: 1.3;
}

.location-loading .text strong {
    font-weight: 600;
}

/* 등장 애니메이션 */
@keyframes locationFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* 아이콘 깜빡임 */
@keyframes locationPulse {
    0%   { opacity: 0.4; }
    50%  { opacity: 1; }
    100% { opacity: 0.4; }
}

/* style.css 약 645번째 줄 */
.global-spinner {
    position: absolute;
    top: 65px;     /* 85px -> 65px 로 수정 (헤더 높이 변화만큼 올림) */
    right: 20px;
    width: 40px; height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    color: #2563EB; font-size: 20px;
}

/* 새 주차장 제보(입력) 패널 전용 padding */
#write-panel .panel-content {
    padding: 20px 24px;
}


/* style.css 파일 수정 */

#detail-panel, #write-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 2000; /* 지도보다 위에 뜨도록 설정 */
    border-radius: 20px 20px 0 0; /* 위쪽 모서리 둥글게 */
    transition: transform 0.3s ease-in-out;
    
    /* 🔥 [핵심 수정] 패널 높이 제한 및 스크롤 설정 */
    max-height: 80vh;  /* 화면 높이의 80%까지만 커지게 제한 (헤더 공간 확보) */
    overflow-y: auto;  /* 내용이 80%를 넘으면 패널 내부에서 스크롤 생김 */
    
    /* (기존 box-shadow 등은 유지하세요) */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* (선택 사항) 모바일에서 스크롤바 안 보이게 깔끔하게 처리 */
#detail-panel::-webkit-scrollbar, 
#write-panel::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
#detail-panel, #write-panel {
    scrollbar-width: none; /* Firefox */
}

/* [NEW] 상세 패널 하단 컴팩트 디자인 */
.compact-footer {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 텍스트와 버튼 사이 간격 */
    padding: 10px 20px 25px 20px !important; /* 위쪽 패딩 줄임 */
    background: white;
    border-top: 1px solid #f3f4f6;
}

.last-verified-text {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    margin: 0;
}

.footer-btn-row {
    display: flex;
    gap: 10px; /* 버튼 사이 간격 */
    width: 100%;
}

/* 정확도 버튼 (파란색) */
.btn-verify-theme {
    /* 기존 스타일 덮어쓰기 */
    width: auto !important; 
    flex: 2; /* 닫기 버튼보다 2배 넓게 (중요하니까) */
    background-color: #2563EB;
    color: white;
    border: none;
    border-radius: 12px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-verify-theme:active { background-color: #1d4ed8; }

/* 닫기 버튼 (회색) */
.btn-close-theme {
    flex: 1; /* 1 비율 */
    background-color: #f3f4f6;
    color: #4b5563;
    border: none;
    border-radius: 12px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.btn-close-theme:active { background-color: #e5e7eb; }

/* [추가] 헤더 로고 클릭 가능 표시 및 효과 */
#btn-open-open-about {
    cursor: pointer;
    transition: opacity 0.2s;
}
#btn-open-about:active {
    opacity: 0.7;
}

/* [1. 추가] 헤더 로고 클릭 가능 표시 */
#btn-open-about {
    cursor: pointer;
    transition: opacity 0.2s;
}
#btn-open-about:active {
    opacity: 0.7;
}

/* [추가/수정] 소개 모달 전용 콤팩트 스타일 */

/* 1. 모달 박스 전체 패딩 축소 */
.custom-modal-box.compact-modal {
    padding: 20px 15px; /* 좌우 패딩을 15px로 줄임 */
    max-width: 360px;   /* 폭도 살짝 좁게 */
}

/* 2. 내부 텍스트 정렬 및 간격 */
.text-left { text-align: left; }

.intro-text {
    text-align: center;
    margin-bottom: 12px; /* 간격 축소 */
    font-size: 14px;
    line-height: 1;    /* 줄간격 축소 */
}

/* 3. 마커 설명 박스 (가장자리 여백 및 내부 간격 최소화) */
.legend-box.compact-legend {
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 10px; /* 내부 패딩 축소 */
    margin: 0 0 12px 0; /* 하단 마진 축소 */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px; /* 아이템 간격 축소 */
}
.legend-item:last-child { margin-bottom: 0; }

.marker-preview {
    width: 40px; /* 마커 공간 폭 축소 */
    display: flex;
    justify-content: center;
}
.marker-preview .marker-pin {
    transform: scale(0.75); /* 마커 크기 살짝 축소 */
    margin: 0;
    top: 0; 
}

.legend-text {
    font-size: 13px; /* 글자 크기 살짝 축소 */
    line-height: 1.3;
    color: #374151;
}
.legend-text .sub-text {
    font-size: 11px;
    color: #6b7280;
}

/* 4. 경고 문구 박스 */
.warning-box {
    background-color: #fff1f2; /* 연한 빨강 배경 */
    color: #e11d48;
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* 5. 푸터 정보 */
.app-info-footer {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    line-height: 1.4;
}
.app-info-footer p { margin: 0; }

/* [style.css] 장소 검색 버튼 (흰색 배경 + 파란 포인트) */
.btn-search-floating {
    position: absolute;
    top: 65px;         
    left: 16px;        
    z-index: 20;       
    
    /* 흰색 배경 */
    background-color: white;
    
    /* 글자와 아이콘을 '잠깐주차 파란색'으로 통일 */
    color: #2563EB;

    /* 🔥 [핵심] 이 줄을 추가하세요! (글자 줄바꿈 절대 금지) */
    white-space: nowrap;
    
    /* 혹시 모르니 너비가 찌그러지지 않게 이것도 추가하면 완벽합니다 */
    flex-shrink: 0; 
    
    border: none;
    padding: 10px 18px;
    border-radius: 25px; 
    
    /* 🔥 [핵심] 그림자를 파란빛으로 (우측 하단 버튼과 동일) */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    
    /* 부드러운 효과 */
    transition: transform 0.1s, background-color 0.2s;
}

/* 클릭했을 때 살짝 눌리는 효과 + 아주 연한 파란 배경 */
.btn-search-floating:active {
    background-color: #eff6ff; /* 클릭 시 아주 연한 파랑 */
    transform: scale(0.95);
}

/* 아이콘 색상 (글자색 상속받으므로 따로 지정 안 해도 되지만 확실하게) */
.btn-search-floating i {
    color: #2563EB; 
}

/* (패닝 시 숨김 기능은 원치 않으시므로 해당 코드(.hide)는 삭제하거나 안 넣으셔도 됩니다) */

/* [추가] 장소 검색 모달 위치 상단 이동 (키보드 가림 방지) */
#search-modal {
    align-items: flex-start; /* 중앙 정렬 대신 위쪽 정렬로 변경 */
    padding-top: 120px;      /* 헤더와 버튼 아래 적당한 위치에 뜨도록 여백 */
}