*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #B50000;
  --red-hover: #d00000;
  --red-light: #fdf0f0;
  --red-border: #fcd9d9;
  --text-dark: #222;
  --text-mid: #555;
  --text-light: #888;
  --white: #fff;
  --radius: 4px;
  --bg: #f7f7f7;
}


/* ===== MAIN CONTENT ===== */
.detail-section {
  padding: 50px 0 80px;
}
/*
.detail-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 60px;
  align-items: start;
}

.detail-illus {
  position: sticky;
  top: 40px;
}
.detail-illus-inner {
  background: var(--white);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}*/
/* 改后 */
.detail-layout {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: 60px;
  align-items: stretch;   /* ✅ 左右等高 */
}

.detail-illus {
  /* sticky 去掉 */
  display: flex;
  align-items: center;    /* ✅ 内部垂直居中 */
}

.detail-illus-inner {
  width: 100%;
  height: 100%;           /* ✅ 撑满左列高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;      /* 防止内容太少时塌陷 */
}
.detail-illus svg {
  width: 100%;
  max-width: 320px;
}

/* ===== RIGHT CONTENT ===== */
.detail-right {}

.detail-job-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
  line-height: 1.3;
}

.detail-meta {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
}
.detail-meta-item { display: flex; align-items: center; gap: 4px; color:#5b5b5b; }
.detail-meta-item svg { width: 14px; height: 14px; color: var(--red); flex-shrink: 0; }

/* Info blocks */
.detail-info-block {
  margin-bottom: 28px;
  background: var(--white);
  border-radius: 8px;
  padding: 24px 0;
}
.detail-info-block + .detail-info-block { margin-top: 0; }

.detail-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-label::before {
  content: '';
  width: 4px; height: 16px;
  background: var(--red);
  border-radius: 2px;
  flex-shrink: 0;
}

.detail-value {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
}

/* Count badge */
.count-badge {
  display: inline-block;
  background: var(--red-light);
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
  padding: 2px 14px;
  border-radius: 20px;
  border: 1px solid var(--red-border);
}

/* Bullet list */
.duty-list { list-style: none; padding: 0; }
.duty-list li {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.75;
  padding: 5px 0 5px 16px;
  position: relative;
}
.duty-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--red);
  font-size: 20px;
  line-height: 1.4;
}

/* ===== CTA BUTTON ===== */
.detail-cta {
  margin-top: 36px;
}
.btn-apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 48px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 1px;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(181,0,0,0.25);
}
.btn-apply:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(181,0,0,0.32);
}
.btn-apply svg { width: 18px; height: 18px; }

/* Responsive */
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; gap: 32px; }
  .detail-illus { display: none; }
}