html {
    scroll-behavior: auto;   
}
.wrapper{ display:flex; transition:.5s; }
/* 关键修改1：删除全局 section 的强制宽度，或改为仅针对需要的 section */
/* 原冲突样式：section{ flex:0 0 100vw; height:100vh; } */

nav {
    background: #bebdbd;
    padding: 10px;
    position: sticky;  
    top: 0;
    z-index: 100; /* 确保导航栏在最上层 */
}
nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
}

/* 关键修改2：给地图所在的 section 单独设置样式，覆盖全局 */
#kmap {
    display: flex; /* 保持左右布局 */
    width: 100%;
    height: calc(100vh - 42px); /* 高度=视口高度-导航栏高度（避免底部溢出） */
    padding-top: 42px; /* 顶部间距=导航栏高度，彻底避开遮挡 */
    padding: 42px 0 0 0; /* 等价写法：仅顶部42px间距，其他方向0 */
    margin: 0;
    box-sizing: border-box; /* 确保padding不影响总宽度/高度 */
}

/* 关键修改3：全局 section 样式调整，避免影响地图 */
section {
    height: 100vh; 
    padding: 50px;
    box-sizing: border-box; /* 防止 padding 导致溢出 */
}       

html,body{
    height:100%;
    overflow:hidden;
    margin:0;
}

main{
    position:relative;
    width:100%;
    height:100%;
}
.slide{
    position:absolute;
    inset:0;   
    background:#fff;             
    display:none;               
}
.slide.active{display:block;} 

/* 关键修改4：左侧面板样式调整 */
.left-panel {
    width: 20%; /* 可根据需要调整比例 */
    padding: 20px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    overflow-y: auto;
}     

/* 关键修改5：地图容器样式调整 */
.map-container {
    width: 80%; /* 与左侧面板宽度总和为100% */
    height: 100%; /* 继承父容器高度 */
}

#map {
    width: 100%;
    height: 100%; /* 填满地图容器 */
}

/* 按钮容器样式 - 确保纵向排列 */
.button_style1 {
    display: flex;
    flex-direction: column; /* 强制纵向排列 */
    gap: 12px; /* 按钮之间的垂直间距 */
    padding: 20px 10px;
}

/* 按钮容器，控制纵向排列 */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 按钮之间的间距 */
    padding: 20px;
    background-color: #f5f5f5; /* 背景色，模拟左侧面板 */
    width: 200px; /* 容器宽度，可根据需求调整 */
}

/* 卡片式按钮基础样式 */
.card-button {
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: left;
}

/* 点击时的放大效果 */
.card-button:active {
    transform: scale(1.05); /* 点击时放大1.05倍 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 悬停效果（可选，增强交互） */
.card-button:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 导入GeoJSON区域样式，与按钮风格统一 */
.geojson-upload {
    margin-top: 5px;
}

.geojson-upload label {
    display: block;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.geojson-upload input[type="file"] {
    margin-top: 5px;
    font-size: 13px;
}
#jsonFile {
    display: none;
}