/* ============================================================
   移动端 H5 适配（追加，覆盖上面的桌面样式）
   断点：768px（平板/大屏手机）、480px（普通手机）
   ============================================================ */

@media (max-width: 768px) {
    /* 顶部留出固定导航高度，避免标题被遮挡 */
    .main-content {
        padding: 88px 12px 40px !important;
    }

    /* 手机端隐藏「申请试用」按钮 */
    #btnApply {
        display: none !important;
    }

    /* 标题区更紧凑、字号收敛 */
    .hero-section {
        margin-bottom: 24px !important;
    }
    .hero-tag {
        font-size: 12px !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px !important;
    }
    .hero-title {
        font-size: 30px !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    .hero-subtitle {
        font-size: 13px !important;
        line-height: 1.75 !important;
        padding: 0 4px !important;
    }

    /* 原本的整体留白规则（保留，覆盖下方容器） */
    .parse-container {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    /* 职位卡片：两列小卡片，自定义占满一行 */
    .job-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .job-card {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }
    .job-card .job-card-name,
    .job-card h4 {
        font-size: 14px !important;
    }
    .job-card .job-card-desc,
    .job-card p {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
    }
    .job-card.custom {
        grid-column: 1 / -1;
    }

    /* JD 编辑区：输入框字号 16px 防止 iOS 自动放大 */
    .jd-editor {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }
    .jd-editor textarea,
    .jd-editor input {
        font-size: 16px !important;
        line-height: 1.7 !important;
        padding: 10px 12px !important;
    }
    .jd-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .jd-job-name {
        font-size: 18px !important;
    }

    /* 开始解析 */
    .parse-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .btn-start {
        width: 100% !important;
        padding: 14px 0 !important;
        font-size: 16px !important;
    }

    /* 结果区 */
    .result-container {
        padding: 16px 14px !important;
        border-radius: 12px !important;
        margin-top: 16px !important;
    }
    .result-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .result-name {
        font-size: 20px !important;
        word-break: break-all;
    }
    .result-meta {
        flex-wrap: wrap !important;
        gap: 8px 14px !important;
        font-size: 12.5px !important;
    }
    .result-avatar {
        width: 44px !important;
        height: 44px !important;
        font-size: 15px !important;
    }

    /* 信息栅格单列 */
    .info-grid,
    .info-grid.three-col,
    .info-grid.two-col {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* AI 内容排版 */
    #aiJdContent,
    #aiMapGuess {
        font-size: 13.5px !important;
        line-height: 1.85 !important;
        word-break: break-word;
    }

    /* AI 询问条：按钮换行 */
    #aiMapAsk,
    #aiTalentAsk {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    #aiMapAsk button,
    #aiTalentAsk button {
        width: 100% !important;
        padding: 10px 0 !important;
    }

    /* 公司表格：横向滚动，避免挤压 */
    #aiMapTable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #aiMapTable table {
        min-width: 680px;
    }

    /* 下载报告等按钮行 */
    .result-section > div[style*="display:flex"] {
        flex-wrap: wrap;
    }
    #btnAiJdReport {
        width: 100%;
        padding: 12px 0 !important;
        font-size: 15px !important;
    }

    /* 弹窗（岗位能力选择等） */
    .modal,
    .json-modal-content {
        width: calc(100vw - 28px) !important;
        max-width: 100% !important;
        max-height: 84vh !important;
        padding: 18px !important;
        overflow: auto;
    }

    /* ========== 页脚：只保留品牌 + 二维码 ========== */
    .footer {
        padding: 32px 0 24px !important;
        margin-top: 32px !important;
    }
    .footer-grid {
        display: block !important;
        text-align: center;
    }
    /* 隐藏第 2 列及之后（功能产品 / 解决方案 / 应用者 / 我们） */
    .footer-grid > div:not(:first-child) {
        display: none !important;
    }
    .footer-grid > div:first-child {
        width: 100% !important;
    }
    .footer .logo {
        justify-content: center !important;
    }
    .footer-brand-desc {
        margin: 10px 0 8px !important;
        font-size: 13px !important;
    }
    .footer-contact {
        font-size: 12.5px !important;
        line-height: 1.8 !important;
        margin-bottom: 14px !important;
        color: rgba(255, 255, 255, 0.62) !important;
    }
    /* 手机号/邮箱即使被浏览器识别成链接，也保持统一颜色、无下划线 */
    .footer-contact,
    .footer-contact a,
    .footer-contact a:visited,
    .footer-contact a:link {
        color: rgba(255, 255, 255, 0.62) !important;
        text-decoration: none !important;
        -webkit-text-fill-color: rgba(255, 255, 255, 0.62) !important;
    }
    .footer-qrcodes {
        display: flex !important;
        justify-content: center !important;
        gap: 18px !important;
        flex-wrap: wrap;
    }
    .footer-qrcode img {
        width: 84px !important;
        height: 84px !important;
    }
    .footer-qrcode span {
        font-size: 11.5px !important;
    }
    .footer-bottom,
    .footer-copyright {
        text-align: center !important;
        font-size: 11.5px !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 480px) {
    .job-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .job-card {
        padding: 10px 8px !important;
    }
    .result-name {
        font-size: 18px !important;
    }
    #aiJdContent,
    #aiMapGuess {
        font-size: 13px !important;
    }
    .parse-container,
    .result-container {
        padding: 14px 10px !important;
    }
}
