/* =========================
1. GLOBAL LAYOUT
========================= */

#container{
    display:flex; /* 지도 + 우측패널 나란히 */
    flex-direction: column;
    height:100vh;
    width:100vw;
    overflow:hidden;
    background:#f4f6fa;
    box-sizing:border-box;
}

/* ----- 지도 패널 ----- */
.up-panel-edit{
    flex:1 1 75%; /* 85% → 75%로 조정 */
    min-width:340px;
    position:relative;
    background:#e9ecef;
}

/* 내부 지도 div */
#map{
    width:100%;
    height:100%;
    background:#def1f9;
    border-radius:0 0 12px 12px;
    box-shadow:0 6px 16px rgba(40,90,180,0.07);
    position:relative;
    z-index:10;
}

/* =========================
2. RIGHT-SIDE (DOWN) PANEL
========================= */
.down-panel-edit{
    flex:0 0 25%; /* 15% → 25%로 조정 */
    display:flex;
    flex-direction:column;
    gap:10px; /* 8px → 10px로 약간 늘림 */
    padding:6px 12px; /* 4px 12px → 6px 12px */
    background:#f4f7fb;
    overflow-y:auto;
    box-shadow:-4px 0 12px rgba(0,0,0,0.04);
}

/* =========================
3. CARD-STYLE SECTIONS
========================= */
.grid-section{
    display:flex;
    flex-direction:column;
    gap:8px; /* 6px → 8px */
    padding:10px; /* 8px → 10px */
    border-radius:8px; /* 6px → 8px */
    background:#ffffff;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
}

.grid-hint{
    font-size: 9px; /* 8px → 9px */
    color:#666;
    font-weight:400;
    margin-left:6px; /* 4px → 6px */
}

/* ===== 카드 가로 정렬 ===== */
.grid-row{ /* 새로운 래퍼 */
    display:flex;
    flex-direction:row; /* 가로 */
    gap:18px; /* 16px → 18px */
}

/* 카드가 너비를 반씩 차지하도록 */
.grid-row .grid-section{
    flex:1 1 0; /* 같은 너비로 늘어남 */
}

/* 카드 타이틀 */
.grid-title{
    margin:0;
    font-size:11px; /* 10px → 11px */
    font-weight:700;
    color:#2c3e55;
}

.delete-title{ /* 삭제 카드용 강조색 */
    color:#c0392b;
}

/* AG Grid 래퍼 */
.grid-box{
    width:100%;
    height:100%;
    border:1px solid #e0e8f1;
    border-radius:6px; /* 4px → 6px */
}

/* 삭제 전용 그리드 배경 강조 */
.delete-grid{
    background:#fff6f5;
    border-color:#f4d3d1;
}

/* =========================
4. BUTTONS
========================= */
.upload-btn,
#deleteSelected{
    align-self:flex-end;
    padding:8px 18px; /* 6px 16px → 8px 18px */
    font-size:13px; /* 12px → 13px */
    font-weight:600;
    color:#fff;
    background:#4078c0;
    border:none;
    border-radius:7px; /* 6px → 7px */
    cursor:pointer;
    transition:background 0.18s, transform 0.12s;
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.upload-btn:hover,
#deleteSelected:hover{
    background:#295390;
}

.upload-btn:active,
#deleteSelected:active{
    transform:translateY(2px);
}

/* 삭제 버튼 색상 변경 */
#deleteSelected{
    background:#c0392b;
}

#deleteSelected:hover{
    background:#962d22;
}

/* =========================
5. AG-GRID TWEAKS
========================= */
.ag-theme-alpine .ag-header-cell{
    font-size:12px; /* 11px → 12px */
    font-weight:600;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px; /* 0 8px → 0 10px */
}

.ag-theme-alpine .ag-cell{
    font-size:12px; /* 11px → 12px */
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:3px 0; /* 2px 0 → 3px 0 */
}

.ag-theme-alpine .ag-row-even{
    background:#f8fbfe;
}

.ag-theme-alpine .ag-row-hover{
    background:#def1f9 !important;
}

/* =========================
6. FLOATING TOOLBAR (지도 툴버튼)
========================= */
.toolbar-floating{
    position:absolute;
    top:24px;
    right:24px;
    display:flex;
    flex-direction:row;
    gap:10px;
    z-index:200;
}

.toolbar-select-add{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:rgba(255,255,255,0.98);
    border-radius:12px;
    padding:8px 10px;
    box-shadow:0 2px 8px rgba(35,59,120,0.11);
    align-items:center;
}

.toolbar-select-add button{
    border:none;
    background:#f4f7fa;
    border-radius:8px;
    color:#4078c0;
    font-size:15px;
    width:42px;
    height:42px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.15s,color 0.15s,box-shadow 0.18s;
    padding:0;
}

.toolbar-select-add button:hover,
.toolbar-select-add button:focus{
    background:#e5eefa;
    box-shadow:0 0 0 2px #8dbae9a7;
    color:#295390;
}

.toolbar-select-add button.active{
    background:#4078c0;
    color:#fff;
    box-shadow:0 2px 10px 0 #2c5ea4a2;
}

.toolbar-select-add button.active svg,
.toolbar-select-add button.active svg *{
    stroke:#fff !important;
    fill:#fff !important;
}

/* =========================
7. RESPONSIVE
========================= */
@media(max-width:1100px){
    #container{
        flex-direction:column;
    }
    
    .up-panel-edit,
    .down-panel-edit{
        flex:1 0 auto;
        height:50vh;
    }
}

/* =========================
8. TYPOGRAPHY
========================= */
body{
    font-family:'Noto Sans KR',sans-serif;
    font-size:15px;
    color:#283447;
    margin:0;
}

#featureGrid.grid-box{
    height:150px !important; /* 120px → 150px로 조정 */
}

/* 그리드는 부모 높이에 맞추지 말고 자체 스크롤 사용 */
#featureGrid.grid-box,
#deleteGrid.grid-box {
    height:auto; /* 강제 높이 제거 */
    max-height:150px; /* 120px → 150px로 조정 */
    overflow:auto; /* 행 많으면 내부 스크롤 */
}

.up-panel-edit{
    position:relative; /* 기준 컨테이너로 설정 */
}

#editUplaod.upload-btn{
    position:absolute; /* 지도 위에 겹치기 */
    bottom:20px; /* 하단에서 20px */
    right:24px; /* 우측에서 24px */
    z-index:300; /* 지도 툴바(200)보다 위 */
    /* 크기·모양을 살짝 컴팩트하게 */
    padding:8px 18px;
    font-size:14px;
}

/* 편집한 행을 파란색 배경으로 표시 */
.edited-cell {
    background-color: #0055cc !important;
}