:root {
    --primary: #6c5ce7; --gold: #C5A059; --red: #FF4757; --gray: #6B7280;
    --bg: #f8fafc; --card: #fff; --line: rgba(0,0,0,0.08); --radius: 18px;
    --safe-bottom: env(safe-area-inset-bottom);
}

/* 기존 디자인 보존 */
* { box-sizing: border-box; font-family: 'Pretendard', sans-serif; -webkit-tap-highlight-color: transparent; outline: none; }
body { margin: 0; background: var(--bg); color: #111; height: 100vh; overflow: hidden; }

.map-wrap { display: flex; height: calc(100vh - 60px); width: 100%; position: relative; }

.pc-sidebar {
    width: 380px; background: #fff; display: flex; flex-direction: column;
    border-right: 1px solid var(--line); z-index: 1010; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
@media (max-width: 980px) {
    .pc-sidebar { position: absolute; left: 0; top: 0; height: 100%; width: 320px; transform: translateX(-100%); box-shadow: 10px 0 20px rgba(0,0,0,0.1); }
    .pc-sidebar.open { transform: translateX(0); }
}

.sb-toggle-btn {
    position: absolute; right: -30px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 60px; background: #fff; border: 1px solid var(--line);
    border-left: none; border-radius: 0 8px 8px 0; display: flex; align-items: center;
    justify-content: center; cursor: pointer; box-shadow: 4px 0 10px rgba(0,0,0,0.05); z-index: 1011;
}

.sidebar-header { padding: 15px; border-bottom: 1px solid var(--line); }
.filter-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.select-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
.f-select, .f-input { 
    padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; 
    font-size: 13px; font-weight: 600; background: #fff; color: #333;
}
.f-input { grid-column: span 3; }

.btn-reset {
    flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #eee;
    background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
}

.left-list { flex: 1; overflow-y: auto; padding: 12px; background: #f8fafc; }
.shop-card {
    display: flex; gap: 12px; padding: 12px; background: #fff; border-radius: 16px;
    margin-bottom: 10px; border: 1px solid var(--line); cursor: pointer;
    transition: transform 0.2s, border 0.2s;
}
/* 카드 호버 시 살짝 들리는 효과만 추가 (선택사항) */
.shop-card:hover { border-color: var(--primary); transform: translateY(-2px); }

.badge { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; display: inline-block; }
.badge.open { background: #e1fdf4; color: #00b894; }
.badge.closed { background: #fff0f0; color: #ff7675; }

/* --- [수정] 하트 & 장바구니 버튼 스타일 - 우선순위 강화 --- */
.map-list-btns { display: flex; gap: 10px; align-items: center; }

/* 기본 상태: !important를 제거해서 나중에 색이 바뀔 수 있게 합니다 */
.icon-quick { 
    font-size: 1.15rem; 
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    color: #d1d5db; /* 기본 회색 */
}

/* 찜(하트) 활성화 - .active 클래스나 .fa-solid가 붙으면 빨간색 */
.icon-quick.wish.active,
.icon-quick.wish.fa-solid { 
    color: #FF4757 !important; 
    transform: scale(1.15); 
}

/* 장바구니 활성화 - .active가 붙으면 초록색 */
.icon-quick.cart.active { 
    color: #2ed573 !important; 
    transform: scale(1.15);
}

/* 톡 터지는 애니메이션 */
.pop-ani { animation: pop 0.3s forwards; }
@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1.15); }
}
/* 장바구니 담기 성공 시 주변 파동 효과 */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(46, 213, 115, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0); }
}
.pulse-green { animation: pulse-green 0.6s ease-out; border-radius: 50%; }

/* 하단 카드 버튼 내 아이콘 배경 */
.action-btns-wrap .icon-quick {
    padding: 5px;
}
/* --- [추가 끝] --- */

/* 커스텀 오버레이 */
.customoverlay {
    position: relative; bottom: 55px; border-radius: 12px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); padding: 10px; min-width: 150px;
}
.customoverlay:after {
    content: ''; position: absolute; margin-left: -10px; left: 50%; bottom: -10px;
    width: 20px; height: 10px; background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png') no-repeat;
}
.ov-content { display: flex; flex-direction: column; gap: 4px; }
.ov-name { font-weight: 900; font-size: 14px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-price { font-weight: 800; font-size: 13px; color: var(--red); }

.my-pos-marker { width: 18px; height: 18px; background: #3498db; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.3); }

.map-panel { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }

.gps-unified-box {
    position: absolute; top: 15px; left: 15px; z-index: 1000;
    display: flex; align-items: center; background: #fff; 
    padding: 6px 6px 6px 16px; border-radius: 50px; box-shadow: 0 4px 25px rgba(0,0,0,0.15);
}
.gps-btn { background: var(--primary); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }

.closest-card {
    position: absolute; bottom: calc(85px + var(--safe-bottom)); left: 15px; right: 15px; 
    max-width: 450px; margin: 0 auto; background: #fff; border-radius: 22px; 
    box-shadow: 0 15px 45px rgba(0,0,0,0.2); z-index: 1050; display: none; overflow: hidden;
}