/* ==============================
   map.css : 공중화장실 찾기 페이지 공통 스타일
   ============================== */

/* 페이지 전체 150% 확대 */
html {
    zoom: 140%;
}

/* 전체 컨텐츠 wrapper */
.page-container {
    margin-top: 2rem;   /* 상단과 여백 */
}

/* 지도 + 리스트 박스 공통 */
.dynamic-box {
    min-height: 70vh;   /* 화면 높이의 70%로 동적 크기 */
    max-height: 80vh;   /* 너무 커지지 않도록 제한 */
}

/* 지도 컨테이너 */
#map_div {
    width: 100%;
    height: 100%;
}

/* 화장실 리스트 */
.toilet-item {
    padding: 1rem;                 /* 내부 여백 */
    border-bottom: 1px solid #f1f1f1;
    transition: background-color 0.2s;
    cursor: pointer;
}

.toilet-item:hover {
    background-color: #f0f9ff;     /* hover 시 연한 파란색 */
}

.toilet-item h4 {
    font-weight: 600;
    color: #1f2937;                /* text-gray-800 */
    margin-bottom: 0.25rem;
}

.toilet-item p {
    font-size: 0.875rem;
    color: #4b5563;                /* text-gray-600 */
}

/* 리스트 내 배지 (거리 표시) */
.badge-distance {
    background-color: #dbeafe;     /* bg-blue-100 */
    color: #1d4ed8;                /* text-blue-700 */
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* 애니메이션 (마커 깜빡임) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-pulse {
    animation: pulse 2s infinite;
}

/*배경 및 푸터 스타일*/
body {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    background-image:
            url('https://images.unsplash.com/photo-1517483000871-1dbf64a6e1c6?w=1920&q=80'),
            linear-gradient(135deg, rgba(224, 242, 254, 0.85) 0%, rgba(186, 230, 253, 0.85) 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: overlay;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    flex: 1;
}

.footer-text {
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
    padding: 1.5rem 0;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    margin-top: 2rem;
}


/*!* 로봇 이미지 스타일 - 카드 내부 상단 *!*/
/*.card-ui {*/
/*    position: relative;*/
/*    overflow: hidden;*/
/*}*/

/*.robot-decoration {*/
/*    position: absolute;*/
/*    left: 50%; !* 가로 중앙 *!*/
/*    top: 17%; !* 상단 14% 에 위치 *!*/
/*    transform: translate(-50%, -50%); !* 정확한 중앙 정렬 *!*/
/*    width: 270px;*/
/*    height: auto;*/
/*    opacity: 0.50; !* 흐리게 *!*/
/*    z-index: 0; !* 모든 콘텐츠 뒤로 *!*/
/*    pointer-events: none;*/
/*    filter: blur(1.5px);*/
/*}*/

/*.robot-decoration img {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    display: block;*/
/*}*/

/*!* 모든 카드 내용이 로봇 이미지 위에 오도록 *!*/
/*.card-header,*/
/*form,*/
/*.sub-button-group,*/
/*.footer-text {*/
/*    position: relative;*/
/*    z-index: 1;*/
/*}*/

/*!* 반응형 *!*/
/*@media (max-width: 768px) {*/
/*    .robot-decoration {*/
/*        width: 150px;*/
/*        opacity: 0.05;*/
/*    }*/
/*}*/