@charset "utf-8";

/* =========================
   助学贷款计算器（局部优化版）
   仅作用当前HTML区域
   ========================= */

/* ===== 表单整体 ===== */
.jsp_center {
    padding: 0 15px 8px;
}

/* 每一行 */
.dkjsp_conee {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* 左侧文字 */
.dkjsp_tleft {
    width: 140px;
    text-align: right;
    font-size: 14px;
    color: #5e6d82;
    padding-right: 10px;
}

/* 右侧区域 */
.dkjsp_inpright,
.dkjsp_inpright1 {
    flex: 1;
}

/* ===== 输入框 ===== */
.wd02,
.input01 {
    width: 140px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    font-size: 14px;
    transition: all .2s;
    box-sizing: border-box;
}

.wd02:focus,
.input01:focus {
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22,119,255,.1);
    outline: none;
}

/* ===== 下拉框 ===== */
.wd01 {
    height: 34px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 0 8px;
}

/* =========================
   ⭐ 按钮居中核心修复 ⭐
   ========================= */
.dkjsp_conee.pt4 {
    justify-content: center;   /* 居中 */
    gap: 15px;                 /* 按钮间距 */
    margin-top: 20px;
}

/* 防止按钮div撑满 */
.jsp_cetpbutma,
.jsp_cetpbutmb {
    display: inline-block;
}

/* 按钮统一 */
.jsp_cetpbutma input,
.jsp_cetpbutmb input {
    min-width: 110px;
    height: 36px;
    border-radius: 18px;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s;
}

/* 主按钮 */
.jsp_cetpbutma input {
    background: #1677ff;
    border: 1px solid #1677ff;
    color: #fff;
}

.jsp_cetpbutma input:hover {
    background: #4096ff;
}

/* 重置按钮 */
.jsp_cetpbutmb input {
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    color: #606266;
}

.jsp_cetpbutmb input:hover {
    background: #e6f0ff;
}

/* ===== 结果区域 ===== */
.jsp_center_nub1 {
    margin-top: 20px;
}

/* 标题 */
.jsp_cpjs {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* 结果高亮 */
.input01 {
    font-weight: 600;
    color: #ff4d4f;
}

/* ===== 移动端适配 ===== */
@media screen and (max-width: 768px) {

    .dkjsp_conee {
        flex-direction: column;
        align-items: flex-start;
    }

    .dkjsp_tleft {
        width: 100%;
        text-align: left;
        margin-bottom: 5px;
    }

    .wd02,
    .input01,
    .wd01 {
        width: 100%;
    }

    /* 按钮移动端也居中 */
    .dkjsp_conee.pt4 {
        flex-direction: column;
        align-items: center;
    }

    .jsp_cetpbutma input,
    .jsp_cetpbutmb input {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* =========================
   移动端彻底修复（重点）
   ========================= */
@media screen and (max-width: 768px) {

    /* 每一行改成块结构 */
    .dkjsp_conee {
        display: block;
        margin-bottom: 15px;
    }

    /* 标签不再占宽度 */
    .dkjsp_tleft {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 6px;
        font-size: 13px;
        color: #666;
    }

    /* 输入区域100% */
    .dkjsp_inpright,
    .dkjsp_inpright1 {
        width: 100%;
    }

    /* 输入框全宽 */
    .wd02,
    .input01,
    .wd01 {
        width: 100%;
        height: 38px;
        font-size: 16px; /* 防止iOS缩放 */
    }

    /* 单位文字换行更自然 */
    .dkjsp_inpright {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dkjsp_inpright input {
        flex: 1;
    }

    /* ===== 按钮优化（重点） ===== */
    .dkjsp_conee.pt4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 20px;
    }

    .jsp_cetpbutma,
    .jsp_cetpbutmb {
        width: 100%;
    }

    .jsp_cetpbutma input,
    .jsp_cetpbutmb input {
        width: 100%;
        height: 42px;
        font-size: 15px;
        border-radius: 8px;
    }

    /* 结果区也拉开 */
    .jsp_center_nub1 {
        padding: 12px;
    }
}

/* =========================
   ✅ 计算结果移动端专项修复
   ========================= */
@media screen and (max-width: 768px) {

    /* 结果区域整体 */
    .jsp_center_nub1 {
        background: #f9fbff;
        border-radius: 10px;
        padding: 15px;
        margin-top: 15px;
    }

    /* 每一项结果 */
    #debx .dkjsp_conee,
    #debj .dkjsp_conee {
        display: block;
        margin-bottom: 15px;
    }

    /* 标题（左边文字） */
    #debx .dkjsp_tleft,
    #debj .dkjsp_tleft {
        width: 100%;
        text-align: left;
        font-size: 14px;
        margin-bottom: 6px;
        color: #333;
        font-weight: 500;
    }

    /* 输入区域 */
    #debx .dkjsp_inpright1,
    #debj .dkjsp_inpright1 {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* 输入框 */
    #debx .input01,
    #debj .input01 {
        flex: 1;
        height: 40px;
        font-size: 16px;
        font-weight: 600;
        color: #ff4d4f;
        border-radius: 6px;
        padding: 0 10px;
    }

    /* 单位（元）不换行 */
    #debx .dkjsp_inpright1::after,
    #debj .dkjsp_inpright1::after {
        content: "";
    }

    /* 让 “元” 不挤 */
    #debx .dkjsp_inpright1 span,
    #debj .dkjsp_inpright1 span {
        white-space: nowrap;
    }

    .nry_bt h1{font-size:36px;}
}

/* =========================
   📊 还款明细表优化
   ========================= */

/* 表格外层（防止手机挤） */
#info {
    margin-top: 20px;
    overflow-x: auto; /* 手机横滑 */
}

/* 表格本体 */
#info table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* 防止挤压 */
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    font-size: 14px;
}

/* 表头 */
#info th {
    background: #f5f7fa;
    color: #333;
    font-weight: 600;
    padding: 12px 10px;
    border-bottom: 1px solid #eaeef2;
    text-align: center;
}

/* 单元格 */
#info td {
    padding: 10px;
    border-bottom: 1px solid #f0f2f5;
    text-align: center;
    color: #555;
}

/* 数字列右对齐（更专业） */
#info td:nth-child(n+2) {
    text-align: center;
    font-family: Consolas, Monaco, monospace;
}

/* 斑马纹 */
#info tr:nth-child(even) {
    background: #fafafa;
}

/* hover 高亮 */
#info tr:hover {
    background: #f0f7ff;
}

/* 第一列（期次）稍微突出 */
#info td:first-child {
    text-align: center;
    font-weight: 500;
    color: #333;
}

/* =========================
   📱 移动端优化
   ========================= */
@media screen and (max-width: 768px) {

    #info table {
        font-size: 13px;
    }

    #info th,
    #info td {
        padding: 8px;
    }
}