
        /* 지도 부분 */
        .map-wrapper {
            overflow: hidden;
            width: fit-content;
            max-width: 100%;
        }

        .map-content {
            border: 1px solid var(--gray40);
            max-height: 800px;
            background-color: #fff;
            margin-bottom: 1rem;
        }

        .map-content img {
            max-width: 100%;
            width: auto;
            height: auto;
            display: block;
        }

        /* --- 지도 라이트박스(확대/스크롤) 기능 스타일 (Transform 방식) --- */
        .zoomable-map {
            cursor: zoom-in;
            transition: opacity 0.2s;
        }
        .zoomable-map:hover {
            opacity: 0.85;
        }

        /* 1. 반투명 배경 (스크롤 완전 차단) */
        .lightbox-overlay {
            display: none; 
            position: fixed;
            z-index: 99999;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.85);
            overflow: hidden; /* 브라우저 기본 스크롤 완벽 차단 */
            touch-action: none; /* 모바일 제스처 충돌 방지 */
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .lightbox-overlay.active {
            opacity: 1;
        }

        /* 2. 이미지 Transform 속성 부여 */
        .lightbox-img {
            max-width: 100%; 
            max-height: 90vh;
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.8);
            transform-origin: center; /* 정중앙을 기준으로 확대 */
            transform: translate(0px, 0px) scale(0.95);
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            will-change: transform; /* GPU 가속으로 끊김 방지 */
            cursor: zoom-in; 
        }

        .lightbox-overlay.active .lightbox-img {
            transform: translate(0px, 0px) scale(1);
        }

        /* 3. 닫기 버튼 */
        .lightbox-close {
            position: fixed; 
            top: 20px;
            right: 30px;
            color: #ffffff;
            font-size: 45px;
            font-weight: 300;
            cursor: pointer;
            user-select: none;
            transition: color 0.2s;
            z-index: 100000;
            background: rgba(0,0,0,0.3);
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 45px;
            border-radius: 50%;
        }

        .lightbox-close:hover {
            color: var(--gray20);
            background: rgba(0,0,0,0.6);
        }
