/* 시설현황보기 페이지 전용 CSS */

/* 메인 컨테이너 */
.facilities-container {
    background-color: #0f172a; /* dashboard-bg */
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    color: rgb(226 232 240); /* slate-100 */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 메인 콘텐츠 영역 */
.facilities-main {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

/* 지도 영역 */
.facilities-map-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: #0d1117;
}

/* 지도 배경 오버레이 */
.facilities-map-overlay {
    position: absolute;
    inset: 0;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCzFZa6NQiRjMgPNf1ogGo5uU0iKrSqScBQ5fIXRonZC5q7ffkcRnJ5_7q_lC3egfK-NEFwkLxVRgxaxh_zHA-eASQ-GIsPU6Dacftc_qWemrBvEwh7Rpm1iaZUgdgJRcQrrDloc2EaAXZTY3UiYRRRLydhy5HO8aOa4QjyQD7HRD7P6OPZ_hJvBx68UfipjqkMk8T-IV3rElh54fCC1VMF-1I98ya1imUzz3K7tEVj591dsQARpyJ4XkC8aV5Rb3trvwpAGeTQnhhm);
    background-size: cover;
    background-position: center;
    filter: brightness(0.3) contrast(1.2) saturate(0.5) grayscale(0.3);
    opacity: 1;
}

/* 사이드 패널 */
.facilities-sidebar {
    background: rgba(37, 40, 43, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 20rem; /* w-80 */
    height: calc(100% - 2rem);
    margin: 1rem;
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 40;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}

/* 사이드 패널 헤더 */
.facilities-sidebar-header {
    padding: 1.25rem; /* p-5 */
    border-bottom: 1px solid rgb(58 61 65); /* border-border-muted */
    background-color: rgba(37, 40, 43, 0.5); /* surface-dark/50 */
}

.facilities-sidebar-title {
    color: rgb(226 226 226); /* text-offwhite */
    font-size: 1rem; /* text-base */
    font-weight: 700;
}

.facilities-sidebar-subtitle {
    color: rgb(161 161 170); /* text-dim */
    font-size: 0.75rem; /* text-xs */
    margin-top: 0.25rem; /* mt-1 */
}

/* 사이드 패널 콘텐츠 */
.facilities-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem; /* p-4 */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

/* 섹션 제목 */
.facilities-section-title {
    color: rgb(226 226 226); /* text-offwhite */
    font-size: 0.875rem; /* text-sm */
    font-weight: 700;
    margin-bottom: 0.75rem; /* mb-3 */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}

.facilities-section-icon {
    font-size: 1.125rem; /* text-[18px] */
    color: #4a78cc; /* primary */
}

/* 라벨 */
.facilities-label {
    display: flex;
    flex-direction: column;
}

.facilities-label-text {
    font-size: 0.625rem; /* text-[10px] */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgb(161 161 170); /* text-dim */
    font-weight: 700;
    margin-bottom: 0.25rem; /* mb-1 */
    margin-left: 0.25rem; /* ml-1 */
}

/* Select 박스 */
.facilities-select {
    width: 100%;
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid rgb(58 61 65); /* border-border-muted */
    background-color: rgb(26 28 30); /* background-dark */
    color: rgb(226 226 226); /* text-offwhite */
    font-size: 0.875rem; /* text-sm */
    height: 2.5rem; /* h-10 */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    outline: none;
    cursor: pointer;
}

.facilities-select:focus {
    border-color: #4a78cc; /* primary */
    box-shadow: 0 0 0 3px rgba(74, 120, 204, 0.2); /* focus:ring-primary/20 */
}

/* 레이어 아이템 */
.facilities-layer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem; /* p-2.5 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 150ms;
}

.facilities-layer-item:hover {
    background-color: rgb(26 28 30); /* background-dark */
}

.facilities-layer-item-active {
    background-color: rgba(74, 120, 204, 0.1); /* primary/10 */
    border: 1px solid rgba(74, 120, 204, 0.2); /* border-primary/20 */
}

.facilities-layer-content {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    color: rgb(226 226 226); /* text-offwhite */
}

.facilities-layer-icon {
    font-size: 1.125rem; /* text-[18px] */
}

.facilities-layer-text {
    font-size: 0.875rem; /* text-sm */
}

.facilities-layer-checkbox {
    border-radius: 0.25rem;
    border: 1px solid rgb(58 61 65); /* border-border-muted */
    background-color: rgb(26 28 30); /* background-dark */
    color: #4a78cc; /* primary */
    height: 1rem; /* h-4 */
    width: 1rem; /* w-4 */
    cursor: pointer;
}

.facilities-layer-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 120, 204, 0.2);
}

/* 범례 */
.facilities-legend {
    padding-top: 1rem; /* pt-4 */
    border-top: 1px solid rgb(58 61 65); /* border-border-muted */
}

.facilities-legend-title {
    color: rgb(161 161 170); /* text-dim */
    font-size: 0.625rem; /* text-[10px] */
    font-weight: 700;
    margin-bottom: 0.75rem; /* mb-3 */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.facilities-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem; /* gap-3 */
}

.facilities-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
}

.facilities-legend-dot {
    width: 0.5rem; /* size-2 */
    height: 0.5rem;
    border-radius: 9999px; /* rounded-full */
}

.facilities-legend-dot-normal {
    background-color: rgba(59, 130, 246, 0.6); /* blue-500/60 */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}

.facilities-legend-dot-alert {
    background-color: rgba(239, 68, 68, 0.6); /* red-500/60 */
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.facilities-legend-text {
    font-size: 0.6875rem; /* text-[11px] */
    color: rgb(161 161 170); /* text-dim */
}

/* 동기화 버튼 */
.facilities-sync-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 */
    padding: 0.625rem; /* py-2.5 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: #4a78cc; /* primary */
    color: white;
    font-size: 0.875rem; /* text-sm */
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(74, 120, 204, 0.1);
    border: none;
    cursor: pointer;
    transition: all 150ms;
}

.facilities-sync-button:hover {
    background-color: rgba(74, 120, 204, 0.9); /* primary/90 */
}

.facilities-sync-button:active {
    transform: scale(0.98);
}

.facilities-sync-icon {
    font-size: 1.125rem; /* text-[18px] */
}

/* 사이드 패널 푸터 */
.facilities-sidebar-footer {
    padding: 1rem; /* p-4 */
    background-color: rgba(37, 40, 43, 0.8); /* surface-dark/80 */
    border-top: 1px solid rgb(58 61 65); /* border-border-muted */
}

/* 지도 마커 */
.facilities-marker {
    position: absolute;
    cursor: pointer;
}

.facilities-marker-pulse {
    position: absolute;
    inset: -0.5rem;
    background-color: rgba(74, 120, 204, 0.2); /* primary/20 */
    border-radius: 9999px; /* rounded-full */
    animation: facilities-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes facilities-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.facilities-marker-main {
    position: relative;
    background-color: #4a78cc; /* primary */
    width: 1.25rem; /* size-5 */
    height: 1.25rem;
    border-radius: 9999px; /* rounded-full */
    border: 2px solid rgb(26 28 30); /* border-background-dark */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.facilities-marker-icon {
    font-size: 0.75rem; /* text-[12px] */
    color: white;
}

/* 마커 팝업 */
.facilities-popup {
    position: absolute;
    bottom: 2rem; /* bottom-8 */
    left: 50%;
    transform: translateX(-50%);
    width: 20rem; /* w-80 */
    background-color: rgb(37 40 43); /* surface-dark */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgb(58 61 65); /* border-border-muted */
    overflow: hidden;
    z-index: 50;
}

.facilities-popup-header {
    background-color: rgba(74, 120, 204, 0.8); /* primary/80 */
    padding: 0.5rem 1rem; /* px-4 py-2 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.facilities-popup-title {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* gap-2 */
    color: white;
}

.facilities-popup-title-icon {
    font-size: 1rem; /* text-base */
}

.facilities-popup-title-text {
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;
}

.facilities-popup-close {
    color: rgba(255, 255, 255, 0.8);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.facilities-popup-close:hover {
    color: white;
}

.facilities-popup-close-icon {
    font-size: 0.875rem; /* text-sm */
}

/* 팝업 테이블 */
.facilities-popup-table {
    width: 100%;
    border-collapse: collapse;
}

.facilities-popup-table tr {
    border-bottom: 1px solid rgb(58 61 65); /* #3a3d41 */
}

.facilities-popup-table td:first-child {
    background-color: rgb(33 36 39); /* #212427 */
    color: rgb(161 161 170); /* #a1a1aa */
    font-weight: 600;
    font-size: 0.6875rem; /* 11px */
    width: 90px;
    padding: 0.5rem 0.625rem; /* 8px 10px */
}

.facilities-popup-table td:last-child {
    background-color: rgb(26 28 30); /* #1a1c1e */
    color: rgb(226 226 226); /* #e2e2e2 */
    font-size: 0.75rem; /* 12px */
    padding: 0.5rem 0.75rem; /* 8px 12px */
}

.facilities-popup-table td.highlight {
    font-weight: 700;
    color: #4a78cc; /* primary */
}

/* 팝업 버튼 */
.facilities-popup-button {
    width: 100%;
    padding: 0.375rem; /* py-1.5 */
    background-color: rgb(37 40 43); /* surface-dark */
    border: 1px solid rgb(58 61 65); /* border-border-muted */
    border-radius: 0.25rem; /* rounded */
    font-size: 0.6875rem; /* text-[11px] */
    font-weight: 700;
    color: rgb(226 226 226); /* text-offwhite */
    cursor: pointer;
    transition: background-color 150ms;
}

.facilities-popup-button:hover {
    background-color: rgb(58 61 65); /* border-muted */
}

.facilities-popup-footer {
    padding: 0.5rem; /* p-2 */
    background-color: rgba(26, 28, 30, 0.5); /* background-dark/50 */
    border-top: 1px solid rgb(58 61 65); /* border-border-muted */
}

/* 팝업 화살표 */
.facilities-popup-arrow {
    position: absolute;
    bottom: -0.5rem; /* -bottom-2 */
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 1rem; /* w-4 */
    height: 1rem; /* h-4 */
    background-color: rgba(26, 28, 30, 0.5); /* background-dark/50 */
    border-right: 1px solid rgb(58 61 65); /* border-border-muted */
    border-bottom: 1px solid rgb(58 61 65);
}

/* 작은 마커 */
.facilities-marker-small {
    width: 0.75rem; /* size-3 */
    height: 0.75rem;
    border-radius: 9999px; /* rounded-full */
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 150ms;
}

.facilities-marker-small:hover {
    transform: scale(1.25);
}

.facilities-marker-blue {
    background-color: rgba(96, 165, 250, 0.6); /* blue-400/60 */
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

.facilities-marker-cyan {
    background-color: rgba(34, 211, 238, 0.6); /* cyan-400/60 */
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

.facilities-marker-orange {
    background-color: rgba(251, 146, 60, 0.6); /* orange-400/60 */
    box-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
}

/* 연결선 SVG */
.facilities-connection-line {
    position: absolute;
    inset: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

/* 지도 컨트롤 */
.facilities-map-controls {
    position: absolute;
    top: 1.5rem; /* top-6 */
    right: 1.5rem; /* right-6 */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* gap-3 */
    z-index: 40;
}

.facilities-control-group {
    display: flex;
    flex-direction: column;
    background-color: rgb(37 40 43); /* surface-dark */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgb(58 61 65); /* border-border-muted */
    overflow: hidden;
}

.facilities-control-button {
    width: 2.75rem; /* size-11 */
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(161 161 170); /* text-dim */
    background: none;
    border: none;
    cursor: pointer;
    transition: all 150ms;
}

.facilities-control-button:hover {
    color: rgb(226 226 226); /* text-offwhite */
    background-color: rgb(26 28 30); /* background-dark */
}

.facilities-control-button-border {
    border-bottom: 1px solid rgb(58 61 65); /* border-border-muted */
}

.facilities-control-button-active {
    color: #4a78cc; /* primary */
}

.facilities-control-button-active:hover {
    background-color: rgb(26 28 30); /* background-dark */
}

/* 하단 정보 바 */
.facilities-info-bar {
    position: absolute;
    bottom: 1.5rem; /* bottom-6 */
    right: 1.5rem; /* right-6 */
    z-index: 40;
    background-color: rgba(37, 40, 43, 0.9); /* surface-dark/90 */
    backdrop-filter: blur(12px);
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.facilities-info-content {
    display: flex;
    align-items: center;
    gap: 1.25rem; /* gap-5 */
    font-size: 0.6875rem; /* text-[11px] */
    font-weight: 500;
    color: rgb(161 161 170); /* text-dim */
}

.facilities-info-item {
    display: flex;
    align-items: center;
    gap: 0.375rem; /* gap-1.5 */
}

.facilities-info-icon {
    font-size: 0.875rem; /* text-[14px] */
}

.facilities-info-icon-primary {
    color: #4a78cc; /* primary */
}

.facilities-info-divider {
    height: 0.75rem; /* h-3 */
    width: 1px;
    background-color: rgb(58 61 65); /* border-muted */
}

.facilities-info-sync {
    animation: facilities-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 스크롤바 스타일 */
.facilities-sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.facilities-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.facilities-sidebar-content::-webkit-scrollbar-thumb {
    background: rgb(63 63 70); /* #3f3f46 */
    border-radius: 10px;
}