#app .careers-openings { z-index: 2; padding: 36px 0 clamp(44px, 6vw, 88px); background: var(--yc-light-subtle); }
.careers-job-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; }
.careers-list-heading { margin-bottom: 24px; }
.careers-job-list { padding-inline: clamp(18px, 3vw, 46px); background: var(--yc-light-surface); }
.careers-job { padding-block: clamp(20px, 2.5vw, 34px); }
.careers-job + .careers-job { border-top: 1px solid var(--yc-light-divider); }
.careers-job h2, .careers-recruitment h3 { margin: 0; font-size: 21px; line-height: 1.3; }
.careers-job h2 { font-weight: 600; }
.careers-job p, .careers-recruitment p { margin: 10px 0 0; opacity: 1; }
.careers-job-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--yc-light-secondary); font-size: 14px; }
.careers-job-meta > span:not(:last-child) { padding-inline-end: 14px; border-inline-end: 1px solid var(--yc-light-divider); }
.careers-pay > span { margin-inline-start: 4px; }
.careers-count { color: #5c6066; }
.careers-count > span, .careers-pay > span { color: var(--yc-light-red); font-weight: 400; }
.careers-job-description { margin: 10px 0 0; padding: 0; list-style: none; color: var(--yc-light-secondary); }
.careers-job-description li + li { margin-top: 5px; }
.careers-recruitment { margin-top: 28px; }
.careers-recruitment-banner { position: relative; }
.careers-recruitment-banner img { display: block; width: 100%; height: auto; }
.careers-recruitment-banner a { position: absolute; inset: 36% auto 34% 4.5%; width: 24%; }
.careers-recruitment-mobile { display: none; }
@media (max-width: 767px) {
  .careers-recruitment-banner { display: none; }
  .careers-recruitment-mobile {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: start;
    gap: 14px 10px;
    padding: clamp(14px, 4vw, 26px);
    background: linear-gradient(110deg,#f0f6fc,#d5e5f8);
    color: #0e2b49;
  }
  .careers-recruitment-mobile h3 { font-size: 16px; }
  .careers-recruitment-mobile a { display: inline-block; margin-top: 4px; color: inherit; font-size: clamp(17px, 4.8vw, 27px); font-weight: 800; white-space: nowrap; }
  .careers-recruitment-mobile p { margin-top: 4px; color: inherit; font-size: 14px; }
  .careers-recruitment-address { grid-column: 1 / -1; }
  .careers-recruitment-mobile .careers-recruitment-qr {
    grid-column: 2;
    grid-row: 1;
    width: clamp(94px, 28vw, 164px);
  }
}
.careers-recruitment-qr {
  width: 164px;
  aspect-ratio: 1;
  background: #fff url('assets/company/recruitment-contact-banner.png') 95.75% center / auto 121.95% no-repeat;
}
.careers-job-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--yc-light-primary);
  font-weight: 400;
}
.careers-job-link:is(:hover,:focus-visible) { text-decoration: underline; text-underline-offset: 4px; }

.careers-dialog {
  box-sizing: border-box;
  width: min(324px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 48px 28px 28px;
  border: 1px solid var(--yc-light-divider);
  border-radius: 8px;
  background: linear-gradient(145deg, #e4f0ff, #fff);
  color: #0e2b49;
  text-align: center;
}
.careers-dialog::backdrop { background: rgb(6 14 28 / 70%); }
.careers-dialog .careers-recruitment-qr { margin: 0 auto 12px; background-position: 95.6% center; background-size: auto 125%; }
.careers-dialog-phone { color: #0e2b49; font-size: 22px; font-weight: 700; }
.careers-dialog form { position: absolute; inset: 6px 6px auto auto; margin: 0; }
.careers-dialog-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #202124;
  cursor: pointer;
}
.careers-dialog-close svg { width: 20px; height: 20px; }
.careers-dialog-close:hover { background: rgb(14 43 73 / 8%); }
.careers-dialog-close:focus-visible { outline: 2px solid var(--yc-light-primary); outline-offset: -2px; }