* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-radius: 10px;
}

body {
    font-family: sans-serif;
    height: 100vh;
    overflow-y: hidden; /* 页面整体不可垂直滚动 */
    overflow-x: auto;   /* 页面整体可水平滚动 */
}

a {
    text-decoration: none;
    color: #2f2912;
}

.container {
    display: flex;
    min-width: 900px; /* 最小宽度：240+240+400 */
    height: calc(100% - 40px);
}

.panel-content {
    height: 100%; /* 关键：继承父容器高度 */
    overflow-y: auto; /* 确保可以滚动 */
}

/* 列的基础样式 */
.column {
    height: 100%;
    overflow-y: auto;
    padding: 10px;
}

/* 左列样式 */
.left-column {
    width: 240px;
    flex-shrink: 0;
}

/* 中列样式 */
.middle-column {
    width: 240px;
    flex-shrink: 0;
}

/* 右列样式 */
.right-column {
    flex: 1;
    min-width: 600px;
}

/* 控制列的样式 */
.control-column {
    content: '';
    width: 12px;
    background: #ddd;
    flex-shrink: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.3s;
    border-left: 1px solid #F5F5F5;
    border-right: 1px solid #F5F5F5;
}

.control-column:hover {
    background: #bbb;
}

.control-column::after {
    font-size: 10px;
    transform: rotate(90deg);
    display: block;
}

/* 收起状态 */
.left-hidden .left-column {
    width: 0;
    padding: 0;
    overflow: hidden;
}

.middle-hidden .middle-column {
    width: 0;
    padding: 0;
    overflow: hidden;
}

.span_kzq {
    margin-top: 0px;
    transform: rotate(90deg);
    font-size: 10px;
}

/* 手机端样式 */
@media (max-width: 768px) {
    body {
        overflow-x: hidden; /* 手机端不可水平滚动 */
    }
    
    .span_kzq {
        transform: rotate(0deg);
    }
    
    .container {
        flex-direction: column;
        min-width: auto;
    }
    
    .column {
        width: 100% !important;
        min-width: auto !important;
        height: calc(100% - 24px);
    }
    
    .control-column {
        width: 100%;
        height: 12px;
        cursor: ns-resize;
        border-top: 1px solid #F5F5F5;
        border-bottom: 1px solid #F5F5F5;
    }
    
    .control-column::after {
        transform: rotate(0deg);
    }
    
    .left-hidden .left-column,
    .middle-hidden .middle-column {
        height: 0;
        min-height: 0;
        padding: 0;
    }
    
    /* 手机端默认隐藏中列和右列 */
    .middle-column,
    .right-column {
        display: none;
        height: calc(100% - 24px);
    }
    
    /* 默认显示左列 */
    .left-column {
        display: block;
        height: calc(100% - 24px);
    }
    
    /* 显示中列时：隐藏左列和右列，只显示中列 */
    .show-middle .left-column,
    .show-middle .right-column {
        display: none;
    }
    
    .show-middle .middle-column {
        display: block;
    }
    
    /* 显示右列时：隐藏左列和中列，只显示右列 */
    .show-right .left-column,
    .show-right .middle-column {
        display: none;
    }
    
    .show-right .right-column {
        display: block;
    }
    
    /* 当没有任何show-类时，只显示左列 */
    .container:not(.show-middle):not(.show-right) .left-column {
        display: block;
    }
    
    .container:not(.show-middle):not(.show-right) .middle-column,
    .container:not(.show-middle):not(.show-right) .right-column {
        display: none;
    }
    
}

/* 列内容样式 */
.column h2 {
    margin-bottom: 15px;
    color: #333;
}

.column p {
    margin-bottom: 10px;
    line-height: 1.5;
}