/* Modal 样式 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 顶部和底部 5%, 居中 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 宽度调整 */
    border-radius: 8px;
    position: relative;
    /* max-height: 90vh; */
    overflow-y: auto; /* 允许内容滚动 */
}

/* 全屏放大状态 */
.modal-content.fullscreen {
    background-color: #fefefe;
    margin: 0%;
    border: 1px solid #000;
    border-radius: 32px;
    width: auto;
    position: relative;
    overflow-y: auto; /* 允许内容滚动 */
}

.modal-header {
    /* 启用 Flexbox 布局 */
    display: flex; 
    /* 将子元素对齐到两端，modal-info 在左，modal-control 在右 */
    justify-content: space-between; 
    /* 垂直居中对齐子元素 */
    align-items: center; 
    /* 移除顶部和底部的边距，避免双重边距 */
    padding: 0 0 10px 0; 
    /* 移除之前的 border-bottom，让 modal-info 里的边框生效 */
    /* border-bottom: 1px solid #eee; */ 
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.modal-info {
    width: -webkit-fill-available;    
}

.modal-control {
    /* 确保控制按钮内部也使用 Flexbox 或行内元素特性 */
    display: flex;
    align-items: center;
    /* 增加右侧间距，避免与模态框边缘太近 */
    gap: 15px;
    padding-right: 12px; /* 略微向左移动，以便与 modal-content 边距对齐 */
}

.close-button {
    /* 保持原有的 color/cursor */
    color: #aaa;
    cursor: pointer;
    font-size: 22px;
}

.close-button:hover {
    color: #f85149;
}

.resize-btn {
    color: #aaa;
    font-size: 22px; /* 放大图标可以比关闭图标小一点 */
    cursor: pointer;
}

.resize-btn:hover {
    color: #000;
}