/* ============================================================
   JT Crop 中文官网 · 招聘模块样式
   依赖 css/style.css 的配色变量（深林绿 + 暖砂金）
   仅承载：职位列表页 / 应聘登记页 / 招聘官工作台共有组件
   ============================================================ */

/* ---------------- 招聘组件作用域变量 ---------------- */
.careers-scope {
  --k-brand: #0f6e56;
  --k-brand-d: #0b3d2e;
  --k-brand-l: #dff0e8;
  --k-accent: #c8a96a;
  --k-red: #c0392b;
  --k-red-l: #fbeeec;
  --k-amber: #b8860b;
  --k-amber-l: #fdf6e3;
  --k-ink: #17261f;
  --k-ink2: #5c6f66;
  --k-ink3: #8b9a92;
  --k-line: #dce7e1;
  --k-line2: #eef4f1;
  --k-bg: #f7faf8;
  --k-rs: 10px;
  --k-sh: 0 2px 10px rgba(11, 61, 46, .06);
}

/* ---------------- 表单/卡片通用 ---------------- */
.k-wrap { max-width: 940px; margin: 0 auto; padding: 0 24px 96px; }
.k-card {
  background: #fff; border: 1px solid var(--k-line); border-radius: 18px;
  box-shadow: var(--k-sh); padding: 30px 28px;
}
.k-card-sub { margin-top: 16px; }

.k-step { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.k-step .n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--k-brand-l);
  color: var(--k-brand); font-size: 12.5px; font-weight: 700; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.k-step h2 { font-size: 16px; font-weight: 600; color: var(--k-brand-d); }
.k-step .hint { font-size: 12px; color: var(--k-ink3); font-weight: 400; margin-left: auto; }

.k-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.k-f { display: flex; flex-direction: column; gap: 6px; }
.k-f.span2 { grid-column: 1 / -1; }
.k-f label { font-size: 13px; font-weight: 600; color: var(--k-brand-d); }
.k-f label .req { color: var(--k-red); margin-left: 2px; }
.k-f input, .k-f select, .k-f textarea {
  width: 100%; min-height: 46px; padding: 10px 13px; border: 1.5px solid var(--k-line);
  border-radius: var(--k-rs); background: #fff; font-size: 16px; color: var(--k-ink);
  font-family: inherit; outline: none; transition: border-color .18s, box-shadow .18s;
}
.k-f select { font-size: 15px; }
.k-f textarea { min-height: 100px; resize: vertical; line-height: 1.7; font-size: 15px; }
.k-f input:focus, .k-f select:focus, .k-f textarea:focus {
  border-color: var(--g500); box-shadow: 0 0 0 3px rgba(23, 147, 110, .14);
}
.k-f.bad input, .k-f.bad select, .k-f.bad textarea { border-color: var(--k-red); background: #fffbfb; }
.k-f .tip { font-size: 11.5px; color: var(--k-ink3); line-height: 1.6; }
.k-f .errmsg { font-size: 11.5px; color: var(--k-red); display: none; }
.k-f.bad .errmsg { display: block; }

.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chip {
  padding: 9px 15px; min-height: 40px; border-radius: 20px;
  border: 1.5px solid var(--k-line); background: #fff;
  font-size: 13.5px; color: var(--k-ink2); cursor: pointer; transition: all .16s;
}
.k-chip:hover { border-color: var(--g300); color: var(--k-brand); }
.k-chip.on { background: var(--k-brand-l); border-color: var(--k-brand); color: var(--k-brand-d); font-weight: 600; }

.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: var(--k-rs);
  font-size: 14.5px; font-family: inherit; cursor: pointer;
  border: 1.5px solid var(--k-line); background: #fff; color: var(--k-ink);
  transition: all .16s;
}
.k-btn:hover { border-color: var(--g300); color: var(--k-brand); }
.k-btn.p { background: var(--g700); border-color: var(--g700); color: #fff; font-weight: 600; }
.k-btn.p:hover { background: var(--g900); border-color: var(--g900); color: #fff; }
.k-btn:disabled { opacity: .55; cursor: not-allowed; }
.k-btn.big { width: 100%; min-height: 52px; font-size: 16px; font-weight: 600; }

.k-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.k-actions .k-btn { flex: 1; min-width: 130px; }

/* ---------------- 岗位卡片（列表页 & 投递页共用） ---------------- */
.k-jobs { display: grid; gap: 16px; }
.k-jobs.col2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.k-job {
  border: 1.5px solid var(--k-line); border-radius: 14px; padding: 20px 22px;
  background: #fff; transition: all .2s; text-align: left;
}
.k-job:hover { border-color: var(--g300); box-shadow: 0 8px 26px rgba(11, 61, 46, .09); transform: translateY(-2px); }
.k-job .t { font-size: 17px; font-weight: 700; color: var(--k-brand-d); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-job .money { color: var(--g700); font-weight: 700; font-size: 15px; }
.k-job .m { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.k-job .m span {
  background: var(--k-bg); border: 1px solid var(--k-line); color: var(--k-ink2);
  padding: 3px 11px; border-radius: 12px; font-size: 12.5px;
}
.k-job .excerpt { margin-top: 12px; font-size: 13.5px; color: var(--k-ink2); line-height: 1.8; }
.k-job .d {
  font-size: 13px; color: var(--k-ink2); margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--k-line); white-space: pre-wrap; line-height: 1.85;
}
.k-job .foot-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--k-line2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.k-job .foot-row .sp { margin-left: auto; font-size: 12.5px; color: var(--k-ink3); }

/* 投递页的可选岗位卡 */
.k-pick {
  border: 1.5px solid var(--k-line); border-radius: 12px; padding: 15px 17px;
  margin-bottom: 10px; cursor: pointer; transition: all .16s; background: #fff;
}
.k-pick:hover { border-color: var(--g300); background: #fbfdfc; }
.k-pick.on { border-color: var(--g700); background: #f2f9f5; }
.k-pick .t { font-size: 15px; font-weight: 600; color: var(--k-brand-d); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.k-pick .t .money { font-size: 12.5px; color: var(--g700); font-weight: 600; margin-left: auto; }
.k-pick .m { font-size: 12.5px; color: var(--k-ink2); margin-top: 8px; display: flex; gap: 7px; flex-wrap: wrap; }
.k-pick .m span { background: var(--k-bg); border: 1px solid var(--k-line); padding: 2px 10px; border-radius: 11px; }
.k-pick .d {
  font-size: 12.5px; color: var(--k-ink2); margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--k-line); white-space: pre-wrap; line-height: 1.8; display: none;
}
.k-pick.on .d { display: block; }

/* ---------------- 筛选条 ---------------- */
.k-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: #fff; border: 1px solid var(--k-line); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 22px;
}
.k-filters select, .k-filters input {
  min-height: 42px; padding: 8px 12px; border: 1.5px solid var(--k-line);
  border-radius: var(--k-rs); font-size: 15px; font-family: inherit;
  color: var(--k-ink); background: #fff; outline: none; transition: border-color .18s;
}
.k-filters select:focus, .k-filters input:focus { border-color: var(--g500); }
.k-filters .sp { margin-left: auto; font-size: 13px; color: var(--k-ink3); }

/* ---------------- 完成态 ---------------- */
.k-done { text-align: center; padding: 36px 20px; }
.k-done .ic {
  width: 64px; height: 64px; border-radius: 50%; background: var(--k-brand-l);
  margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
}
.k-done h2 { font-size: 20px; font-weight: 700; color: var(--k-brand-d); margin-bottom: 10px; }
.k-done p { font-size: 14px; color: var(--k-ink2); line-height: 1.85; }
.k-done .box {
  background: var(--k-bg); border: 1px solid var(--k-line); border-radius: var(--k-rs);
  padding: 16px; margin: 20px 0; text-align: left; font-size: 13.5px; line-height: 2;
}
.k-done .box b { font-weight: 600; color: var(--k-brand-d); }

/* ---------------- 提示条 ---------------- */
.k-note { font-size: 12.5px; color: var(--k-ink3); line-height: 1.8; }
.k-banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px;
  border-radius: var(--k-rs); font-size: 13px; line-height: 1.7; margin-bottom: 18px;
}
.k-banner.info { background: var(--k-brand-l); color: var(--k-brand-d); }
.k-banner.warn { background: var(--k-amber-l); color: #7a5a06; }
.k-banner.err { background: var(--k-red-l); color: #94301f; }
.k-banner svg { flex: none; margin-top: 2px; }

.k-empty {
  padding: 22px; background: var(--k-bg); border: 1px dashed var(--k-line);
  border-radius: var(--k-rs); font-size: 14px; color: var(--k-ink2); text-align: center; line-height: 1.85;
}

.k-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 14px); z-index: 300;
  background: #0b3d2e; color: #fff; padding: 12px 22px; border-radius: 24px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: .24s; max-width: 88vw; text-align: center;
  box-shadow: 0 12px 32px rgba(11, 61, 46, .3);
}
.k-toast.on { opacity: 1; transform: translate(-50%, 0); }
.k-toast.bad { background: var(--k-red); }

/* ---------------- 优势条 ---------------- */
.k-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.k-perk { text-align: center; padding: 24px 18px; background: #fff; border: 1px solid var(--k-line); border-radius: 14px; }
.k-perk .ic {
  width: 46px; height: 46px; border-radius: 12px; background: var(--k-brand-l); color: var(--g700);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.k-perk b { display: block; font-size: 15px; color: var(--k-brand-d); margin-bottom: 6px; }
.k-perk span { font-size: 13px; color: var(--k-ink2); line-height: 1.7; }

/* ---------------- 移动端 ---------------- */
@media (max-width: 640px) {
  .k-wrap { padding: 0 16px 84px; }
  .k-card { padding: 22px 18px; border-radius: 14px; }
  .k-grid { grid-template-columns: 1fr; }
  .k-f.span2 { grid-column: 1; }
  .k-actions .k-btn { flex: 1 1 100%; }
  .k-jobs.col2 { grid-template-columns: 1fr; }
  .k-job { padding: 18px; }
  .k-filters { padding: 12px; }
  .k-filters select, .k-filters input { flex: 1 1 100%; }
  .k-filters .sp { margin-left: 0; width: 100%; }
  .k-done { padding: 26px 12px; }
}