:root {
  --green: #8CBF26;
  --inquiry-red: #d01515;
  --dark: #20242A;
  --dark2: #111827;
  --text: #111827;
  --muted: #64748B;
  --line: #E5E7EB;
  --soft: #F7FAF4;
  --white: #FFFFFF;
}

body {
  background: #fff;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Noto Sans KR", sans-serif;
  letter-spacing: -.02em;
}

.recruit-page {
  background: #fff;
}

.recruit-hero {
  min-height: 520px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(32, 36, 42, .94), rgba(17, 24, 39, .88) 62%, rgba(41, 49, 58, .82)),
    url("bg.png") center / cover no-repeat;
}

.recruit-hero::before,
.recruit-hero::after {
  display: none;
}

.recruit-hero__inner {
  width: min(100%, 1240px);
  padding: 92px 0 82px;
  text-align: center;
}

.recruit-hero__subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  color: #E5E7EB;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 900;
}

.recruit-hero__subtitle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.recruit-hero__title {
  max-width: 780px;
  margin: 24px auto 0;
  font-size: clamp(40px, 4.2vw, 58px);
  line-height: 1.16;
  letter-spacing: -.055em;
  word-break: keep-all;
}

.recruit-hero__copy {
  max-width: 680px;
  margin: 26px auto 0;
  color: #D8DEE8;
  font-size: 19px;
  line-height: 1.75;
}

.recruit-hero__actions {
  align-items: center;
  margin: 34px auto 0;
}

.recruit-button {
  min-height: 54px;
  border-color: var(--inquiry-red);
  border-radius: 0;
  background: var(--inquiry-red);
  font-weight: 950;
  transition: filter 180ms ease, background-color 180ms ease, color 180ms ease;
}

.recruit-button:hover,
.recruit-button:focus-visible {
  border-color: #a80f0f;
  background: #a80f0f;
  color: #fff;
  filter: none;
}

.recruit-button--light,
.recruit-button--hero {
  width: 190px;
  min-width: 190px;
  min-height: 58px;
  padding: 0 48px;
  font-size: 17px;
}

.recruit-button--light:hover,
.recruit-button--light:focus-visible {
  border-color: #a80f0f;
  background: #a80f0f;
  color: #fff;
}

.recruit-hero__note {
  color: #CBD5E1;
  font-size: 14px;
  text-align: center;
}

.recruit-section {
  padding: 96px 28px;
  background: #fff;
}

.recruit-section--soft {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}

.recruit-container {
  width: min(100%, 1240px);
}

.section-title {
  max-width: 820px;
  margin: 0 auto 46px;
}

.section-title::before,
.job-intro::before {
  content: "RECRUITMENT";
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .2em;
}

.section-title h2,
.job-intro h2 {
  color: var(--text);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.16;
  letter-spacing: -.045em;
}

.section-title p,
.job-intro p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

.value-grid,
.job-card-grid,
.criteria-layout {
  gap: 22px;
}

.value-card,
.job-card,
.criteria-box {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
  text-align: left;
}

.value-card {
  min-height: 250px;
  padding: 34px 30px;
}

.value-card h3,
.job-card h3,
.criteria-box h3 {
  color: var(--text);
  font-weight: 900;
  letter-spacing: -.035em;
}

.value-card h3 {
  font-size: 21px;
  text-align: center;
}

.value-card strong {
  color: var(--green);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.value-card p,
.job-card p,
.check-list li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}

.value-card p {
  margin-top: 20px;
}

.job-intro {
  max-width: 820px;
  margin: 0 auto 46px;
  text-align: center;
}

.job-card {
  min-height: 250px;
  padding: 30px;
}

.job-card__icon {
  color: var(--green);
}

.criteria-box {
  padding: 34px 30px;
}

.criteria-box h3 {
  font-size: 22px;
}

.check-list li {
  color: var(--text);
}

.check-list li::before {
  border-color: var(--green);
}

.check-list li::after {
  border-color: var(--green);
}

.requirements-actions {
  margin-top: 36px;
}

.requirements-actions .recruit-button {
  width: 190px;
  min-width: 190px;
  min-height: 58px;
  padding: 0 48px;
  font-size: 17px;
}

.application-modal .form-field input,
.application-modal .form-field select,
.application-modal .form-field textarea {
  border-color: rgba(140, 191, 38, .62);
}

.application-modal .form-field input:focus,
.application-modal .form-field select:focus,
.application-modal .form-field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(140, 191, 38, .18);
}

.application-modal .file-upload {
  border-color: rgba(140, 191, 38, .62);
}

.application-modal__dialog {
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}

.application-modal__header h3,
.application-modal .application-form h3 {
  color: var(--text);
}

.application-modal__close:hover,
.application-modal__close:focus-visible {
  border-color: var(--green);
  background: #F7FAF4;
}

.application-modal .recruit-button {
  border-radius: 0;
}

footer {
  padding: 34px 0;
  background: #111827;
  color: #CBD5E1;
  font-size: 14px;
}

.footer-info {
  display: grid;
  gap: 8px;
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 0 28px;
  color: #CBD5E1;
  line-height: 1.7;
  word-break: keep-all;
}

.footer-info a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 680px) {
  .recruit-hero {
    min-height: 0;
    padding: 0 20px;
  }

  .recruit-hero__inner {
    padding: 64px 0 58px;
  }

  .recruit-hero__title {
    font-size: clamp(34px, 10vw, 44px);
  }

  .recruit-hero__copy {
    font-size: 16px;
  }

  .recruit-hero__actions {
    align-items: center;
  }

  .recruit-button--light,
  .recruit-button--hero {
    width: min(100%, 190px);
  }

  .requirements-actions .recruit-button {
    width: min(100%, 190px);
  }

  .recruit-section {
    padding: 64px 20px;
  }

  footer {
    padding: 28px 0;
    font-size: 12px;
  }

  .footer-info {
    padding: 0 20px;
    line-height: 1.65;
  }

  .section-title,
  .job-intro {
    margin-bottom: 30px;
    text-align: left;
  }

  .section-title h2,
  .job-intro h2 {
    font-size: 30px;
  }

  .section-title p,
  .job-intro p,
  .value-card p,
  .job-card p,
  .check-list li {
    font-size: 15px;
  }

  .value-grid,
  .job-card-grid,
  .criteria-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .value-card,
  .job-card,
  .criteria-box {
    min-height: 0;
    padding: 24px 20px;
    border-radius: 18px;
  }

  .job-card__icon {
    margin-top: 20px;
  }
}