/* 카메라 정보 박스 (좌측 하단) */
.project-edit-page #cameraInfoBox {
    position: fixed !important;
    bottom: 20px !important; /* 사이드바 하단과 맞춤 */
    left: 20px !important;
    background: rgba(42, 42, 46, 0.95) !important; /* 사이드바와 동일한 배경 */
    color: var(--text-primary) !important;
    padding: 10px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
/*     max-width: 250px; */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.project-edit-page #cameraInfoBox h3 {
    margin: 0 0 5px;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
}
.project-edit-page #cameraInfoDisplay {
    white-space: pre-wrap;
    color: var(--text-primary) !important;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
}

/* 하단 중앙 그리기 버튼 (완료/취소) */
.project-edit-page .buttons-wrap-bottom {
    position: absolute !important;
    z-index: 1000;
    display: none; /* JS로 제어 */
    gap: 8px;
    bottom: 20px; /* 위치 수정 */
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px;
}
/* 이 버튼들은 .btn 스타일을 상속받도록 .btn 클래스 추가 필요 (HTML에서) */
.project-edit-page .buttons-wrap-bottom button {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
}
.project-edit-page .buttons-wrap-bottom button:hover { background: #4a4a4e !important; }
.project-edit-page .buttons-wrap-bottom button.gray { background: #6c757d !important; }

/* 분석 결과 테이블 */
.project-edit-page #resultTable {
    position: absolute !important;
/*     top: 70px; 사이드바 상단과 맞춤 */
/*     right: 20px; 우측 여백 */
    top: 15vw;
    right: 27vw;
    
    width: 470px;
    max-height: 70%;
    overflow: auto;
    background: rgba(42, 42, 46, 0.95) !important; /* 어두운 배경 */
    color: var(--text-primary) !important; /* 밝은 글자색 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 4px;
    z-index: 1000;
    display: none; /* JS로 제어 */
}
.project-edit-page #resultTable table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 8px;
    color: var(--text-primary) !important; /* 테이블 내부 글자색 */
}
.project-edit-page #resultTable th,
.project-edit-page #resultTable td {
    border: 1px solid var(--border-color) !important; /* 테두리 색상 */
    padding: 6px;
    text-align: center;
    color: inherit !important; /* 상위 색상 상속 */
    font-family: inherit !important; /* 상위 폰트 상속 */
}
.project-edit-page #resultTable th {
    color: var(--text-secondary) !important; /* 헤더 글자색 */
}

/* 도움말 (상단 중앙) */
.project-edit-page #helper {
    position: absolute !important;
    z-index: 1001; /* 버튼보다 위에 */
    top: 70px; /* 위치 수정 */
    left: 43%;
    padding: 10px;
    border-radius: 10px;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: rgba(255, 255, 255, .9) !important; /* 밝은 배경 */
    color: #333 !important; /* 어두운 글자 */
    display: none;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
}

/* 우측 컨트롤 버튼 */
.project-edit-page #right-controls {
    position: fixed !important;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(42, 42, 46, 0.95) !important; /* 어두운 배경 */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}
.project-edit-page #right-controls button {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    padding: 0.5rem !important;
    font-size: 1.2rem !important; /* 아이콘 버튼 크기 조정 */
/*     width: 60px; 버튼 크기 고정 */
    height: 40px;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
}
.project-edit-page #right-controls button:hover { background: #4a4a4e !important; }
.project-edit-page #right-controls button.active { background: var(--color-blue) !important; }

/* 1. 위젯 전체 컨테이너 */
.project-edit-page .layer-widget-container {
    position: fixed; /* 맵 위에 고정 */
    top: 70px; /* 사이드바 상단과 맞춤 */
    right: 20px; /* 우측 여백 */
    z-index: 1001; /* 다른 컨트롤보다 위에 */
    background: #ffffff55
}

/* 2. 레이어 아이콘 버튼 (트리거) */
.project-edit-page .layer-toggle-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(42, 42, 46, 0.9); /* 다크모드 배경 */
    border: 1px solid var(--border-color, #555); /* styles.css 변수 참조 */
    border-radius: 4px;
    color: var(--text-primary, #f0f0f0); /* 아이콘 색상 */
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.project-edit-page .layer-toggle-btn:hover {
    background-color: var(--color-blue, #007bff);
}

/* 3. 메뉴 패널 (숨겨진 상태) */
.project-edit-page .layer-menu-panel {
    display: none; /* JS로 제어 */
    width: 200px;
    background-color: rgba(42, 42, 46, 0.95);
    border: 1px solid var(--border-color, #555);
    border-radius: 6px;
    margin-top: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.project-edit-page .layer-menu-panel.active {
    display: block;
}

/* 4. 메뉴 헤더 */
.project-edit-page .layer-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color, #555);
    color: var(--text-primary, #f0f0f0);
    font-size: 14px;
    font-weight: bold;
}
.project-edit-page .layer-menu-header .material-icons {
    font-size: 18px;
    color: var(--text-secondary, #aaa);
}

/* 5. 메뉴 목록 */
.project-edit-page .layer-menu-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    color: var(--text-primary, #f0f0f0);
}

.project-edit-page .layer-menu-list li {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}
.project-edit-page .layer-menu-list li:hover {
    background-color: var(--color-blue, #007bff);
}

.project-edit-page .layer-menu-list input[type="radio"] {
    margin-right: 10px;
    accent-color: var(--color-blue, #007bff);
    /* styles.css의 .project-edit-page td input[type="radio"] 덮어쓰기 */
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: auto !important;
    height: auto !important;
    appearance: auto !important;
}

.project-edit-page .layer-menu-list label {
    cursor: pointer;
    flex-grow: 1;
    color: var(--text-primary, #f0f0f0) !important; 
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif !important;
}