/* 通用重置样式 */
* {
    box-sizing: border-box; /* 盒模型计算方式包含边框和内边距 */
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
    font-family: "Microsoft YaHei", sans-serif; /* 设置默认字体为微软雅黑 */
}

/* 页面主体样式 */
body {
    background-color: #f5f5f5; /* 浅灰色背景 */
    padding: 15px; /* 内边距 */
    color: #333; /* 深灰色文字 */
    line-height: 1.6; /* 行高设置 */
}

/* 主容器样式 */
.container {
    max-width: 800px; /* 最大宽度限制 */
    margin: 10px auto; /* 上下边距10px，左右自动居中 */
    background: white; /* 白色背景 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 轻微阴影效果 */
}

/* 标题样式 */
/*h1 {
    color: #8B4513;*/ /* 棕色标题 */
    /*text-align: center;*/ /* 居中显示 */
    /*margin-bottom: 20px;*/ /* 下边距 */
    /*padding-bottom: 10px;*/ /* 下内边距 */
    /*border-bottom: 1px solid #e0d6c2;*/ /* 底部边框线 */
/*}*/

/* 表单组样式 */
.form-group {
    margin-bottom: 15px; /* 下边距 */
}

/* 标签样式 */
label {
    display: block; /* 块级显示 */
    margin-bottom: 5px; /* 下边距 */
    color: #8B4513; /* 棕色文字 */
    font-weight: bold; /* 加粗 */
}

/* 输入框和选择框样式 */
input, select {
    width: 100%; /* 宽度100% */
    padding: 10px; /* 内边距 */
    border: 1px solid #8B4513; /* 棕色边框 */
    border-radius: 4px; /* 圆角 */
    font-size: 16px; /* 字体大小 */
}

/* 行布局样式 */
.row {
    display: flex; /* 弹性布局 */
    gap: 10px; /* 元素间距 */
}

    /* 行内表单组样式 */
    .row .form-group {
        flex: 1; /* 弹性扩展 */
    }

/* 按钮样式 */
button {
    background: #8B4513; /* 棕色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 12px; /* 内边距 */
    width: 100%; /* 宽度100% */
    border-radius: 4px; /* 圆角 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 手型光标 */
    margin-top: 10px; /* 上边距 */
    margin-bottom: 20px; /* 下边距 */
}

    /* 按钮悬停效果 */
    button:hover {
        background: #A0522D; /* 深棕色背景 */
    }

/* 加载动画容器 */
#loading {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    background: rgba(255,255,255,0.8); /* 半透明白色背景 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    z-index: 1000; /* 高z-index确保在最上层 */
    flex-direction: column; /* 垂直排列子元素 */
}

/* 旋转动画样式 */
.spinner {
    width: 50px; /* 宽度 */
    height: 50px; /* 高度 */
    border: 5px solid #f3f3f3; /* 浅灰色边框 */
    border-top: 5px solid #8B4513; /* 棕色顶部边框 */
    border-radius: 50%; /* 圆形 */
    animation: spin 1s linear infinite; /* 旋转动画 */
    margin-bottom: 15px; /* 下边距 */
}

/* 加载文字样式 */
.loading-text {
    color: #8B4513; /* 棕色文字 */
    font-size: 16px; /* 字体大小 */
}

/* 旋转动画关键帧 */
@keyframes spin {
    0% {
        transform: rotate(0deg); /* 起始角度 */
    }

    100% {
        transform: rotate(360deg); /* 结束角度 */
    }
}

/* 铁板神数查询容器样式 */
.chaxun-container {
    max-width: 800px; /* 最大宽度 */
    margin: 0 auto; /* 居中显示 */
    padding: 10px; /* 内边距 */
    background-color: #f8f4e8; /* 古籍纸张底色 */
    border: 1px solid #d4c9a8; /* 仿古边框 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 3px 15px rgba(139, 69, 19, 0.1); /* 棕色系阴影 */
    font-family: "Microsoft YaHei", "SimSun", serif; /* 优先使用衬线字体 */
    color: #333; /* 文字颜色 */
    line-height: 1.8; /* 行高 */
}

    /* 段落样式 */
    .chaxun-container p {
        margin-bottom: 1.5em; /* 下边距 */
        text-indent: 2em; /* 中文段落首行缩进 */
        text-align: justify; /* 两端对齐 */
        font-size: 16px; /* 字体大小 */
    }

    /* 强调关键词样式 */
    .chaxun-container strong {
        color: #8B4513; /* 棕色强调 */
        font-weight: normal; /* 不加粗 */
        border-bottom: 1px dashed #8B4513; /* 下划线效果 */
        padding-bottom: 1px; /* 下内边距 */
    }

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
    .chaxun-container p {
        font-size: 15px; /* 较小字体 */
        line-height: 1.7; /* 较小行高 */
    }
}

/* 响应式设计 - 手机设备 */
@media (max-width: 480px) {
    .chaxun-container {
        padding: 12px; /* 调整内边距 */
    }

        .chaxun-container p {
            font-size: 14px; /* 更小字体 */
            text-indent: 1.5em; /* 较小缩进 */
        }
}

/* 新增：手机端整体缩放（放在文件最后） */
@media (max-width: 480px) {
    /* 主容器样式 */
    .container {
        padding: 10px; /* 内边距 */
    }

    html {
        font-size: 14px; /* 整体缩小12.5% */
    }

    /* 确保表单元素仍可清晰操作 */
    input, select, button {
        font-size: 1rem; /* 重置为当前html字号 */
    }

    button {
        font-size: 16px; /* 重置为当前html字号 */
    }

    /*h1 {
        font-size: 18px;*/ /* 调整为原大小的75%（假设原为2rem） */
        /*padding-bottom: 4px;*/ /* 同步缩小下边距 */
    /*}*/
    /* 表单组样式 */
    .form-group {
        margin-bottom: 5px; /* 下边距 */
    }

    /* 标签样式 */
    label {
        margin-bottom: 1px; /* 下边距 */
    }
}

/* 标题样式 */
h1 {
    color: #388E3C; /* 棕色标题 */
    text-align: center; /* 居中显示 */
    margin-bottom: 5px; /* 下边距 */
    padding-bottom: 5px; /* 下内边距 */
    border-bottom: 1px solid #e0d6c2; /* 底部边框线 */
    margin-top: -1px;
}

/* 响应式设计 - 平板设备 */
@media (max-width: 768px) {
    .chaxun-container p {
        font-size: 15px; /* 较小字体 */
        line-height: 1.7; /* 较小行高 */
    }

    h1 {
        font-size: 26px; /* 调整为原大小的75%（假设原为2rem） */
        padding-bottom: 5px; /* 同步缩小下边距 */
        margin-top: -1px;
    }
}