/* ============================================================================
   机器人英才网 · 公共样式
   由 index.html 的内联 <style> 提取生成（原第 4 段，原始 13798 字节）
   出现于：index
   ⚠ 本文件由脚本生成，请勿手工编辑；改样式请改源 HTML 后重跑 _tools/v1_extract.py
   ============================================================================ */
/* 无 id 内联样式块 #4
   ============================================================================ */

/* ==========================================================================
   机器人英才网 · 首页自定义样式
   --------------------------------------------------------------------------
   ① 顶部导航栏：客服热线
   ② 搜索区三段式：左【logo】| 中【输入行 + 热门职位行】| 右【公众号/小程序】
      - 左右两列等宽（--epjob-side-col）→ 中间列恒等于容器中心轴
        => 输入框与热门职位「永远居中」
      - logo / 图标块 都 align-self:stretch，垂直跨越「输入行 + 热门行」整块高度
      - 改 logo 大小只需动 --epjob-logo-h / --epjob-logo-w（两值等比才不变形）
   位置说明：本块在 </head> 之前，晚于 main.css 与页面内置样式，故可覆盖
   ========================================================================== */

/* 品牌色变量挂在 body（.home-body-wrapper）上 —— 搜索区、热招 tab、侧栏都要用；
   只在 .column-search-panel 内声明会导致「热招 tab」等区外元素 var() 失效 */
body.home-body-wrapper{
    --epjob-red: #d61518;        /* 主色：填充/按钮/选中块/边框（其上白字 5.28:1 ✓） */
    --epjob-red-text: #c4141a;   /* 文字专用红：浅底上承载品牌色，替代零散的 #bf1215 */
}

.home-body-wrapper .column-search-panel{
    --epjob-logo-h: 42.65px;        /* logo 高度：想更大/更小只改这一行 */
    --epjob-logo-w: 210px;       /* = 42.65 × 4.92325，保持新 logo 3803:773 比例不变形 */
    --epjob-side-col: 210px;     /* 左右两列等宽（= logo 宽）→ 中间列恒居中，且整体更紧凑 */
    --epjob-search-mid: 700px;   /* 中列（搜索框 + 热门职位）宽度 */
    --epjob-search-gap: 24px;    /* logo / 中列 / 图标列 之间的间距 */
}

/* ---------- ① 顶部导航栏：客服热线（「登录/注册」右侧，同排右对齐） ---------- */
#header .user-nav .btns > .epjob-header-tel{
    display:inline-block;
    vertical-align:middle;
    margin-left:20px;
    padding-left:20px;
    border-left:1px solid rgba(255,255,255,.28);
    color:#ffffff;
    font-size:13px;
    line-height:20px;
    white-space:nowrap;
}
#header .user-nav .btns > .epjob-header-tel > span{
    font-size:14px;
    font-weight:600;
    letter-spacing:.2px;
}

/* ---------- ② 搜索区：整行三段式 ---------- */
.home-body-wrapper .column-search-panel .search-box{
    width:1184px;
    margin:0 auto 24px;          /* 整个搜索区（职位搜索 + 热门职位）与下方内容区的间距（原 20px → 24px，8px 基准） */
    padding-top:24px;
    display:flex;
    justify-content:center;      /* ★ 三段式作为「一个整体」居中 —— 不再让 logo 贴住容器左边缘 */
    align-items:stretch;         /* 原 center：中列带 margin 时会把左右两列的居中轴带偏 */
    gap:var(--epjob-search-gap);
}

/* 左列：logo —— 左对齐，垂直跨越「输入框行 + 热门职位行」 */
.home-body-wrapper .column-search-panel .search-box > .logo{
    flex:0 0 var(--epjob-side-col);
    width:var(--epjob-side-col);
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;          /* ← 居中（原 flex-start：logo 贴左边缘，视觉偏心） */
    float:none;
    height:auto;
    padding:0;
    margin:0;
}
.home-body-wrapper .column-search-panel .search-box > .logo > a{
    display:block;
    width:var(--epjob-logo-w);
    height:var(--epjob-logo-h);
    margin:0;
    padding:0;
    background:url("../.././index_files/1.png") left center no-repeat;
    background-size:var(--epjob-logo-w) var(--epjob-logo-h);
    transition:opacity .2s linear;
}
.home-body-wrapper .column-search-panel .search-box > .logo > a:hover{ opacity:.85; }
.home-body-wrapper .column-search-panel .search-box > .logo span{ display:none; }

/* 中列：输入行 + 热门职位行（共用一条中心轴 → 永远居中）
   gap 置 0：两者间距改由 .search-hot 的 padding-top(16px) 提供，与 BOSS 原节奏一致 */
.home-body-wrapper .column-search-panel .search-box > .epjob-search-main{
    flex:0 1 var(--epjob-search-mid);   /* 固定基准宽（原来 flex:1 会把它撑满容器、logo 就被推向左边缘） */
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap:0;
}
.home-body-wrapper .column-search-panel .search-box > .epjob-search-main > .search-form{
    width:100%;
}

/* 输入行：搜索条 + 按钮 —— 搜索条撑满中列，两者整体水平居中 */
.home-body-wrapper .column-search-panel .search-form > form{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}
.home-body-wrapper .column-search-panel .search-form > form > .search-form-con{
    position:static;                 /* 原为 absolute，不改则脱离文档流、整行塌掉 */
    flex:1 1 auto;
    min-width:0;
    float:none;
    width:auto;
}
/* epjob-fix3：输入框原来只有 28px 高、顶在 50px 容器上边，文字整体偏上 11px */
.home-body-wrapper .column-search-panel .search-form .ipt-wrap{ width:auto; height:50px; }
.home-body-wrapper .column-search-panel .search-form .ipt-search{
    width:100%;
    box-sizing:border-box;
    text-align:center;               /* 「搜索职位、公司」水平居中 */
    height:50px;                     /* 撑满搜索条高度（原 28px） */
    line-height:50px;                /* 单行文本垂直居中 */
    padding:0 18px;                  /* 原 11px 上下内边距会把内容盒压到 6px */
}
.home-body-wrapper .column-search-panel .search-form > form > .btn-search{
    position:relative;
    z-index:2;
    flex:0 0 128px;
    float:none;
    width:128px;
    margin-left:-12px;               /* 补回与搜索条右侧圆角咬合的 12px 重叠 */
}
.home-body-wrapper .column-search-panel .search-form > form > .suggest-result{ left:114px; }
.home-body-wrapper .column-search-panel .search-form > form > .position-box{ left:114px; }

/* 热门职位行：整行居中；放开原来的 794×41 裁剪（原样式把第 2 行 3 个标签吃掉了）
   间距：只保留 BOSS 原样的 padding-top(16px)，底部不再留白 ——
   原样式里 padding-bottom:32px 本就被 height:41px + overflow:hidden 挤没（不生效），
   而 margin-bottom:20px 已上移到 .search-box（否则会把左右两列的垂直居中轴带偏） */
.home-body-wrapper .column-search-panel .search-box .search-hot{
    width:100%;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:16px 0 0;
    margin:0;
    box-sizing:border-box;
    text-align:center;
    line-height:24px;
}
.home-body-wrapper .column-search-panel .search-hot b{ margin-right:12px; }
/* 单行显示，去掉原样式的 a{margin-bottom:10px}（那是给多行排行距用的） */
.home-body-wrapper .column-search-panel .search-hot a{ margin-bottom:0; }

/* 右列：公众号 / 小程序 —— 图标在上、文字在下，同样垂直跨越两行 */
.home-body-wrapper .column-search-panel .search-box > .epjob-side-entry{
    flex:0 0 var(--epjob-side-col);
    width:var(--epjob-side-col);
    align-self:stretch;
    display:flex;
    align-items:center;
    justify-content:center;
    float:none;
    height:auto;
    padding:0;
    margin:0;
}
.home-body-wrapper .column-search-panel .epjob-entry{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}
.home-body-wrapper .column-search-panel .epjob-entry + .epjob-entry{ margin-left:20px; }
.home-body-wrapper .column-search-panel .epjob-entry-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    box-sizing:border-box;
    border-radius:50%;
    border:1px solid #f4d3d4;
    background:#fdf3f3;
    color:var(--epjob-red-text);
    cursor:pointer;
    transition:all .2s linear;
}
.home-body-wrapper .column-search-panel .epjob-entry-icon svg{ display:block; }
.home-body-wrapper .column-search-panel .epjob-entry:hover .epjob-entry-icon{
    background:var(--epjob-red);
    border-color:var(--epjob-red);
    color:#ffffff;
    box-shadow:0 4px 12px rgba(214,21,24,.32);
}
.home-body-wrapper .column-search-panel .epjob-entry-label{
    margin-top:7px;
    font-size:12px;
    line-height:16px;
    color:#666666;              /* 原 #61687c（冷灰）→ 与全站中性灰阶统一 */
    white-space:nowrap;
    transition:color .2s linear;
}
.home-body-wrapper .column-search-panel .epjob-entry:hover .epjob-entry-label{ color:var(--epjob-red); }

/* 悬停浮层：显示对应图片（向下展开，避免被顶部裁切） */
.home-body-wrapper .column-search-panel .epjob-entry-pop{
    display:none;
    position:absolute;
    top:calc(100% + 12px);
    right:-8px;
    z-index:1300;
    width:174px;
    padding:12px 12px 10px;
    box-sizing:border-box;
    background:#ffffff;
    border:1px solid #ededed;
    border-radius:8px;          /* 原 10px → 8px（圆角收敛为 4 / 8 / 999 三档） */
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    text-align:center;
}
.home-body-wrapper .column-search-panel .epjob-entry:hover .epjob-entry-pop{ display:block; }
.home-body-wrapper .column-search-panel .epjob-entry-pop:after{
    content:'';
    position:absolute;
    top:-6px;
    right:21px;
    width:10px;
    height:10px;
    background:#ffffff;
    border-left:1px solid #ededed;
    border-top:1px solid #ededed;
    transform:rotate(45deg);
}
.home-body-wrapper .column-search-panel .epjob-entry-pop img{
    display:block;
    width:148px;
    height:148px;
    margin:0 auto 8px;
    object-fit:contain;
    border-radius:8px;          /* 原 6px → 8px（与浮层容器一致） */
    background:#ffffff;
}
.home-body-wrapper .column-search-panel .epjob-entry-pop p{
    margin:0;
    font-size:12px;
    line-height:18px;
    color:#666666;              /* 原 #61687c（冷灰）→ 中性灰 */
    white-space:nowrap;
}

/* ---------- 窄屏兜底：容器变窄时收边，避免溢出 ---------- */
@media (max-width:1240px){
    .home-body-wrapper .column-search-panel > .inner.home-inner{
        width:100%;
        min-width:0;
    }
    .home-body-wrapper .column-search-panel .search-box{
        box-sizing:border-box;
        width:auto;
        margin:0 16px;
    }
}
@media (max-width:1080px){
    .home-body-wrapper .column-search-panel{
        --epjob-logo-w:168px;
        --epjob-logo-h:34.12px;
        --epjob-side-col:168px;
        --epjob-search-gap:12px;
    }
    .home-body-wrapper .column-search-panel .search-box{
        flex-wrap:nowrap;
        justify-content:space-between;
    }
    .home-body-wrapper .column-search-panel .search-box > .logo{
        flex:0 0 var(--epjob-side-col);
    }
    .home-body-wrapper .column-search-panel .search-box > .epjob-search-main{
        flex:1 1 auto;
        min-width:300px;
    }
    .home-body-wrapper .column-search-panel .search-form,
    .home-body-wrapper .column-search-panel .search-form > form,
    .home-body-wrapper .column-search-panel .search-form-con{
        min-width:0;
    }
    .home-body-wrapper .column-search-panel .search-hot{
        overflow:hidden;
        white-space:nowrap;
    }
    .home-body-wrapper .column-search-panel .search-box > .epjob-side-entry{
        flex:0 0 168px;
        min-width:168px;
        justify-content:center;
    }
    .home-body-wrapper .column-search-panel .epjob-entry + .epjob-entry{ margin-left:12px; }
}

.home-job-menu .job-menu-wrapper > dl[hidden]{ display:none !important; }
.home-job-menu .menu-page-btn[role="button"]{ cursor:pointer; }
.home-job-menu .menu-page-btn[role="button"]:focus-visible{ outline:2px solid #d61518; outline-offset:2px; }

/* ==========================================================================
   ③ 热招职位卡片：去掉沟通图标 / 在线文案 / 企业行业与融资标签
   ========================================================================== */
.hot-job-box .guide-app-download-icon{ display:none !important; }     /* 职位名右侧的沟通图标 */
.hot-job-box .boss-online-tag{ display:none !important; }             /* 「在线」文案 */
.hot-job-box .sub-li-bottom-commany-info{ display:none !important; }  /* 企业「互联网 | 天使轮」标签 */

/* ==========================================================================
   ④ 去掉「城市热招」板块
   ========================================================================== */
.hot-city-box{ display:none !important; }

/* ==========================================================================
   ⑤ 热门企业：去掉企业名后面的行业 / 融资阶段 / 人数规模标签
      （与热招职位的口径一致：企业只留 logo + 名称）
      例：「不需要融资 | 10000人以上 | 互联网」
   ========================================================================== */
.hot-company-wrapper .company-info > p{ display:none !important; }

/* ==========================================================================
   ⑥ 设计审视优化（依据 index-design-review.md 的可执行清单落地）
   --------------------------------------------------------------------------
   P0-1 「热门职位:」对比度 4.18:1 → 5.36:1（#757575 → #666666，非报告建议的 #8C8C8C）
   P0-2 页脚弱化文字对比度 4.41:1 → 5.31:1（rgba(255,255,255,.5) → .58，覆盖 6 处来源）
   P0-2b 页脚 copyright 冷灰 #8D92A1 深底上仅 4.03:1（报告漏项）→ 一并提亮
   P0-3 双主色收敛：--epjob-red（填充）/ --epjob-red-text（文字）成对使用
   P1-4 模块纵向间距建立 8px 基准：24 / 64 / 64（原 20 / 62 / 43）
   P1-5 同级标题下间距统一 24px（热招标题 12 → 24，tab 行 20 → 16 做高度补偿）
   P1-6 卡片行间距 16 → 24px（与列间距 16px 拉开差异：横向紧密 / 纵向松弛）
   P2-8 冷灰 #61687C → #666666（已并入 ② 段落）
   P2-9 圆角 10px / 6px → 8px（已并入 ② 段落，收敛为 4 / 8 / 999）
   P3-10 页面底色 #F2F4F7（冷蓝灰）→ #F7F7F7（中性灰，与品牌暖红同色温）
   P3-11 tab 行宽溢出容器（used width 1232px > 容器 1184px）→ 约束到 100%
   --------------------------------------------------------------------------
   覆盖要点：原站用 .home-body-wrapper / .city-site 前缀把优先级抬到「2~3 个类名」，
   本段所有规则均按「高于或等于原赢家 + 靠后声明」对齐，故必须保持与同级或更高类名数。
   未纳入（触及原站固定尺寸，需单独确认）：
   P2-7 字号 12/13/14px 三档收敛 —— .sub-li 有固定 height:136px，
        上调字号会改变换行与裁切行为，风险高于收益，暂不动
   ========================================================================== */

/* —— P0-1 热门职位前缀：4.18:1 → 5.36:1 ——
   ⚠️ 报告建议的 #8C8C8C 方向有误：更浅的灰在浅底上对比度反而降到 3.14:1。
   改为收敛到全站「次文字」灰 #666666 —— 既达标（5.36:1），又与 230 处次文字统一 */
.home-body-wrapper .column-search-panel .search-hot b{ color:#666666; }

/* —— P0-2 页脚弱化文字：深底对比度 4.41 → 5.31 ——
   ⚠️ 原样式是 .home-body-wrapper #footer{color:rgba(255,255,255,.5)}（1 ID + 1 类），
   优先级高于裸 #footer(1 ID)，故必须用同等选择器覆盖，否则不生效 */
.home-body-wrapper #footer{ color:rgba(255,255,255,.58); }
.home-body-wrapper .footer-about dl dd p{ color:rgba(255,255,255,.58); }
.home-body-wrapper .footer-about dl dd .report-mail{ color:rgba(255,255,255,.58); }
.home-body-wrapper .copyright a{ color:rgba(255,255,255,.58); }
.home-body-wrapper .links-friends dt{ color:rgba(255,255,255,.58); }
.home-body-wrapper .links-friends-wrapper .links .links-item a{ color:rgba(255,255,255,.58); }
/* —— P0-2b 报告漏项：页脚冷灰 #8D92A1 在 #313438 上仅 4.03:1，一并提亮 —— */
#footer .copyright span{ color:rgba(255,255,255,.58); }

/* —— P0-3 双主色收敛：可见文字层的品牌红统一走变量（成对使用）——
   ⚠️ 原赢家 .home-body-wrapper .common-tab-box h3 span.cur 有 3 个类名，
   这里追加 .hot-job-box 提到 4 个类名（同为 2 个元素）才能胜出 */
.column-search-panel .search-hot a{ color:var(--epjob-red-text); }
.home-body-wrapper .common-tab-box.hot-job-box h3 span.cur{ color:var(--epjob-red-text); }
.home-body-wrapper .common-tab-box.hot-job-box h3 span.cur:after{ background:var(--epjob-red); }

/* —— P1-4 模块纵向间距：24 / 64 / 64（8px 基准，替换原 43px）—— */
#footer{ margin-top:64px; padding:24px 0; }

/* —— P1-5 相同 32px 模块标题，下方间距统一 24px（原热招 12 / 企业 24）——
   ⚠️ 原赢家 .home-body-wrapper .common-tab-box .box-title 有 3 个类名，需同级对齐 */
.home-body-wrapper .common-tab-box.hot-job-box .box-title{ margin-bottom:24px; }

/* —— P1-6 卡片行间距 16 → 24px（横向 16 紧密 / 纵向 24 松弛）——
   ⚠️ 原赢家 .city-site .merge-city-job ul li 有 2 个类名 + 2 个元素，
   故用「.home-body-wrapper + .hot-job-box + 2 元素」的同级选择器 */
.home-body-wrapper .hot-job-box ul li{ margin-bottom:24px; }
.home-body-wrapper .hot-company-wrapper ul li{ margin-bottom:24px; }

/* —— P3-10 页面底色去冷调：与品牌暖红同色温 —— */
body.home-body-wrapper{ background:#f7f7f7; }

/* —— P3-11 tab 行不再溢出容器 ——
   原 .home-body-wrapper .common-tab-box h3 带 margin-right:-48px，
   使 block 的 used width 撑到 1232px（1184 + 48）；显式 width:100% 后回到 1184。
   同时把 tab 行下间距 20 → 16 做高度补偿 */
.home-body-wrapper .common-tab-box.hot-job-box h3{
    margin-bottom:16px;
    width:100%;
    box-sizing:border-box;
}
/* ===== 页脚品牌标识：原为 footer-logo.png 位图（内容「BOSS 直聘」），换牌后改用文字 ===== */
.home-body-wrapper .footer-social .epjob-footer-logo{
    display:inline-block;
    margin:6px 0 7px 0;
    font-size:16px; font-weight:700; line-height:16px;
    color:#fff; letter-spacing:1px; white-space:nowrap;
}