/* ---------------------------------------
 * 🌍 全局样式（页面整体布局）
 * ---------------------------------------
 */
body {
    /* 页面始终占满可视区域的高度 */
    height: 100%;
    
    /* 字体族设置：Arial, Helvetica, sans-serif */
    font-family: Arial, Helvetica, sans-serif;
    
    /* 使用弹性布局，使内容在垂直方向上排列，并且在水平方向居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    
    /* 设置页面最小高度，确保内容至少与可视高度一致 */
    min-height: 100vh;
    
    /* 设置背景图片及其定位和大小 */
    background: url('../logo/bg.png') no-repeat center center fixed;
    background-size: 400px 400px;
    
    /* 允许页面出现滚动条 */
    overflow: auto;
}


/* ---------------------------------------
 * 📌 左上角单个按钮（菜单图标）样式
 * ---------------------------------------
 */
.custom-menu-icon {
    /* 绝对定位：将该按钮放置在主容器左上角特定位置 */
    position: absolute;
	top: 1rem;
    left: 1rem;
    
    /* 按钮尺寸 - PC版本更大 */
    width: 4rem;
    height: 4rem;
    
    /* 确保不超出容器边界 */
    max-width: calc(100% - 2rem);
    max-height: calc(100% - 2rem);
    
    /* 按钮边角圆形化；此处设为 30% 以保证一定的弧度 */
    border-radius: 20%;
    
    /* 隐藏溢出的内容（若有） */
    overflow: hidden;
    
    /* 内部元素使用弹性布局，居中对齐 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 背景色及边框样式 */
    background: #fef5a4;
    border: 1px solid #fdd835;
    
    /* 添加阴影效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* 鼠标指针样式 */
    cursor: pointer;
    
    /* 提升层级，确保在顶部可见 */
    z-index: 1050;
    
    /* 悬停时的动画过渡 */
    transition: transform 0.3s ease-in-out;
}

/* 按钮内图片样式 */
.custom-menu-icon img {
    /* 图片宽高与容器保持一致 */
    width: 100%;
    height: 100%;
    
    /* 等比填充整个容器 */
    object-fit: cover;
    
    /* 图片也呈圆形 */
    border-radius: 50%;
}

/* 按钮悬停时放大 */
.custom-menu-icon:hover {
    transform: scale(1.1);
}


/* ---------------------------------------
 * 📱 中等屏幕适配（481px - 768px）
 * ---------------------------------------
 * 用于中等尺寸屏幕的搜索框优化
 */
@media (min-width: 481px) and (max-width: 768px) {
    #submenu #search-box {
        padding: 0.8rem; /* 中等屏幕适中的内边距 */
    }
    
    #submenu #search-box input {
        font-size: 1rem; /* 中等屏幕适中的字体 */
        padding: 0.6rem 0.8rem; /* 中等屏幕适中的内边距 */
        border: 1.5px solid #ccc; /* 中等屏幕适中的边框 */
        border-radius: 7px; /* 中等屏幕适中的圆角 */
    }
}

/* ---------------------------------------
 * 📱 小屏幕适配（最大宽度 480px）
 * ---------------------------------------
 * 针对主容器宽度480px进行优化
 */
@media (max-width: 480px) {
    .custom-menu-icon {
        /* 调整按钮在小屏时的位置与大小 */
        top: 0.5rem;
        left: 0.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ---------------------------------------
 * 📱 中等屏幕适配（481px - 768px）
 * ---------------------------------------
 * 用于中等尺寸屏幕
 */
@media (min-width: 481px) and (max-width: 768px) {
    .custom-menu-icon {
        /* 中等屏幕下的位置 */
        top: 0.8rem;
        left: 0.8rem;
        width: 3rem;
        height: 3rem;
    }
}

/* ---------------------------------------
 * 🖥️ 大屏幕适配（最小宽度 769px）
 * ---------------------------------------
 * 确保在大屏幕上不会溢出容器
 */
@media (min-width: 769px) {
    .custom-menu-icon {
        /* 确保在大屏幕上位置合适，不会溢出 */
        left: 1.5rem;
        top: 1.5rem;
    }
}


/* ---------------------------------------
 * 🌟 二级菜单容器
 * ---------------------------------------
 */
#submenu {
    /* 默认隐藏 */
    display: none;
    
    /* 绝对定位：根据上层元素或页面进行定位 */
    position: absolute;
    top: 5rem;
    left: 46rem;
    
    /* 背景色与边框 */
    background: #fff;
    border: 1px solid #ccc;
    
    /* 添加阴影以提升层次感 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* 提升层级，盖在按钮之上 */
    z-index: 1051;
    
    /* 给容器本身设置圆角、隐藏溢出部分 */
    border-radius: 5px;
    overflow: hidden;
    
    /* 固定宽高，可根据实际需要进行调整 */
    width: 400px;
    max-width: 400px;
    min-width: 100px;
    height: 400px;
}

/* 二级菜单激活状态时（显示） */
#submenu.active {
    display: block;
}


/* ---------------------------------------
 * 🌟 二级菜单内部 - 搜索框
 * ---------------------------------------
 */
#submenu #search-box {
    /* 固定在二级菜单容器的顶部 */
    position: sticky;
    top: 0;
    
    /* 搜索框背景和内边距 - PC版本更大 */
    background: #f8f9fa;
    padding: 1rem;
    
    /* 底部分割线 */
    border-bottom: 2px solid #ddd;
    
    /* 提升层级，确保在滚动时保持在顶端 */
    z-index: 1052;
}

/* 搜索框输入框样式 */
#submenu #search-box input {
    /* 宽度占满容器 */
    width: 100%;
    
    /* 输入框的内边距与边框 - PC版本更大 */
    padding: 0.8rem 1rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    
    /* 字体大小 - PC版本更大 */
    font-size: 1.2rem;
    
    /* 包括边框和内边距在内进行计算 */
    box-sizing: border-box;
}


/* ---------------------------------------
 * 🌟 菜单容器（包含图标、名称等）
 * ---------------------------------------
 */
#menuContainer {
    /* 使用 CSS Grid 布局，一行显示 4 列 */
    display: grid;
    
    /* 菜单内容顶部留一点间距 */
    margin-top: 1.5rem;
    
    /* 每行 4 列，每列等分 */
    grid-template-columns: repeat(4, 1fr);
    
    /* 行列之间的固定间距 */
    grid-gap: 0.5rem;
    
    /* 容器内容水平居中 */
    justify-content: center;
    
    /* 垂直方向从上开始排列 */
    align-content: flex-start;
    
    /* 减去搜索框等所占的空间，使菜单区域可滚动 */
    height: calc(100% - 3rem);
    
    /* 超出部分出现纵向滚动条 */
    overflow-y: auto;
    
    /* 内边距及盒模型设置 */
    padding: 0.2rem;
    box-sizing: border-box;
}

/* 菜单项（每个图标及文字） */
.menu-item {
    /* 使用弹性布局以便让文字与图标垂直排列、居中对齐 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* 为角标定位做准备 */
    position: relative;
}


/* ---------------------------------------
 * 🌟 圆形图标（菜单项中的 Logo）
 * ---------------------------------------
 */
.circle-logo {
    /* 基本宽高，可根据需要自行调整 */
    width: 4rem;
    height: 4rem;
    
    /* 使图标圆形 */
    border-radius: 50%;
    /* 将 overflow 设置为 visible，允许角标超出显示 */
    overflow: visible;
    
    /* 内部使用弹性布局，使图片居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 渐变背景色 */
    background: linear-gradient(to right, gold, #f8b500, gold);
    
    /* 适度阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 圆形图标内的图片，等比填充且保持圆形 */
.circle-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 使用 clip-path 强制图片呈圆形 */
    clip-path: circle(50% at 50% 50%);
}


/* ---------------------------------------
 * 🌟 角标（显示消息数等提示）
 * ---------------------------------------
 */
.badge {
    /* 绝对定位到图标右上角 */
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    
    /* 固定尺寸（也可以根据内容调整为自动宽高并添加内边距） */
    width: 40px;
    height: 20px;
    
    /* 使用 50% 圆角可使角标呈“药丸”形 */
    border-radius: 40%;
    
    /* 背景色与文字样式 */
    background-color: red;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    
    /* 使用弹性布局使文字在角标内居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 提升层级，盖住下方内容 */
    z-index: 1053;
}


/* ---------------------------------------
 * 🌟 菜单项链接样式
 * ---------------------------------------
 */
.menu-item a.nav-link {
    /* 文字颜色与去除下划线 */
    color: #fd3051;
    text-decoration: none;
    
    /* 图标与文字的间距、文字大小 */
    margin-top: 0.5rem;
    font-size: 0.9rem;
}


/* ---------------------------------------
 * 📱 小屏幕适配（最大宽度 768px）
 * ---------------------------------------
 */
@media (max-width: 768px) {
    /* 调整二级菜单在小屏中的定位和尺寸 */
    #submenu {
        top: 3rem;
        left: 0.5rem;
        width: 95%;
        max-width: 95%;
        height: 80vh;
    }
    
    /* 调整搜索框输入框字体大小和样式 */
    #submenu #search-box {
        padding: 0.6rem; /* 移动端减小内边距 */
    }
    
    #submenu #search-box input {
        font-size: 0.9rem; /* 移动端字体稍小 */
        padding: 0.5rem 0.7rem; /* 移动端减小内边距 */
        border: 1px solid #ccc; /* 移动端边框稍细 */
        border-radius: 6px; /* 移动端圆角稍小 */
    }
    
    /* 小屏菜单容器的间距 */
    #menuContainer {
        gap: 0.4rem;
    }
    
    /* 小屏下的圆形图标尺寸 */
    .circle-logo {
        width: 3rem;
        height: 3rem;
    }
    
    /* 小屏下的角标大小与文字 */
    .badge {
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
    }
    
    /* 小屏下的链接文字大小 */
    .menu-item a.nav-link {
        font-size: 0.8rem;
    }
}


/* ---------------------------------------
 * 🌟 超小屏幕适配（最大宽度 480px）
 * ---------------------------------------
 */
@media (max-width: 480px) {
    /* 超小屏下的圆形图标尺寸 */
    .circle-logo {
        width: 4rem;
        height: 4rem;
    }
    
    /* 超小屏下的角标大小与文字 */
    .badge {
        font-size: 0.8rem;
        padding: 0.2rem 0.32rem;
    }
    
    /* 超小屏下的链接文字大小 */
    .menu-item a.nav-link {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    #submenu {
        /* 占据屏幕宽度的 95% */
        width: 95%;
        max-width: 95%;
        
        /* 改为使用视口高度的 50% */
        height: 50vh;
        
        /* 如需滚动可加上 overflow-y: auto; */
    }
}

@media (max-width: 480px) {
    #submenu {
        /* 继续缩小或调整，用于非常狭小的屏幕 */
        width: 95%;
        max-width: 95%;
        
        /* 高度改为 50vh */
        height: 50vh;
    }
}