/* 页面基础网格布局 */
 

    /* 卡片基础样式 */
    /*.cates {*/
    /*  background: #ffffff;*/
    /*  border: 1px solid #e1e6eb;*/
    /*  border-radius: 6px;*/
    /*  padding: 12px;*/
    /*  height: 100%;*/
    /*  box-shadow: 0 2px 6px rgba(0,0,0,0.03);*/
    /*  transition: all 0.2s;*/
    /*}*/

    /*.col:hover .cates {*/
    /*  border-color: #a61c1c;*/
    /*  box-shadow: 0 4px 12px rgba(166, 28, 28, 0.15);*/
    /*}*/

    /*.item {*/
    /*  padding: 6px 8px;*/
    /*  font-size: 13px;*/
    /*  color: #555;*/
    /*}*/

    /*.item.active {*/
    /*  background-color: #a61c1c;*/
    /*  color: #fff;*/
    /*  font-weight: bold;*/
    /*  border-radius: 4px;*/
    /*  margin-bottom: 6px;*/
    /*}*/

    /*.item b {*/
    /*  color: #a61c1c;*/
    /*  display: block;*/
    /*  margin-top: 4px;*/
    /*}*/

    /* ================= 弹窗核心样式（还原图示） ================= */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      padding: 20px;
    }

    .modal-box {
      background: #ffffff;
      width: 100%;
      max-width: 1100px;
      height: 80vh;
      max-height: 650px;
      border-radius: 4px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      position: relative;
      display: flex;
      overflow: hidden;
    }

    .modal-close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      color: #999;
      cursor: pointer;
      border: none;
      background: none;
      z-index: 20;
      line-height: 1;
    }

    .modal-close:hover { color: #333; }

    /* --- 左侧红底区域 --- */
    .modal-left {
      width: 380px;
      background-color: #a61c1c; /* 匹配图中的红棕色 */
      color: #ffffff;
      padding: 40px 30px;
      flex-shrink: 0;
      box-shadow: 4px 0 15px rgba(0,0,0,0.15);
      z-index: 2;
      overflow-y: auto;
    }

    .modal-left-title {
      font-size: 22px;
      font-weight: bold;
      line-height: 1.4;
      margin-bottom: 30px;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      padding-bottom: 15px;
    }

    .modal-left-title span {
      text-decoration: underline;
      margin-right: 5px;
    }

    .modal-menu-list {
      list-style: none;
    }

    .modal-menu-item {
      font-size: 14px;
      padding: 10px 0;
      cursor: pointer;
      position: relative;
      padding-left: 20px;
      transition: all 0.2s;
      opacity: 0.85;
    }

    /* 列表前面的小白点 */
    .modal-menu-item::before {
      content: "";
      position: absolute;
      left: 2px;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      background-color: #ffffff;
      border-radius: 50%;
    }

    .modal-menu-item:hover,
    .modal-menu-item.active {
      opacity: 1;
      font-weight: bold;
      transform: translateX(4px);
    }

    /* --- 右侧职位列表区域 --- */
    .modal-right {
      flex: 1;
      padding: 40px 40px 30px 40px;
      background-color: #ffffff;
      overflow-y: auto;
    }

    /* 关键：使用多列文本布局（Column-count），实现图片中从左到右、多列流式排布的效果 */
    .job-grid {
      column-count: 3;
      column-gap: 30px;
    }

    .job-item {
      font-size: 14px;
      color: #222222;
      padding: 6px 0;
      break-inside: avoid; /* 防止单行断开 */
      line-height: 1.5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 响应式适配 */
    @media (max-width: 900px) {
      .job-grid { column-count: 2; }
      .modal-left { width: 260px; padding: 25px 20px; }
    }

    @media (max-width: 650px) {
      .modal-box { flex-direction: column; height: 90vh; }
      .modal-left { width: 100%; height: auto; max-height: 40%; }
      .job-grid { column-count: 1; }
      .modal-right { padding: 20px; }
    }