/* ==========================================================================
   Career > 직무소개 (Figma 1:1704) — page body only
   Hero/stage come from sp-common.css + sp-hero.js; this file: job tabs, card groups, CTA
   ========================================================================== */

/* Stage tweaks (1:1765 SemiBold headline, 0.5 dim in static fallback) */
.jobs-page .sp-stage-headline { font-weight: 600; }
.jobs-page .sp-stage-dim { opacity: 0.5; }

/* Neutralise style.css `section` padding and `section:not(...) > *` 1440px/40px gutter box,
   which otherwise shrinks the 1600px content to 1280px and adds 100px to every group/CTA. */
.sp-page.jobs-page section:not(.hero):not(.c-hero) > * {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.sp-page.jobs-page section.jobs-body > .jobs-tabs { padding-inline: clamp(16px, 8.333vw, 160px); }
.sp-page.jobs-page section.jobs-body > .jobs-groups,
.sp-page.jobs-page section.jobs-cta > .jobs-cta-inner {
  width: min(1600px, 100% - 2 * clamp(16px, 8.333vw, 160px));
  margin-inline: auto;
}
.sp-page.jobs-page section.jobs-group,
.sp-page.jobs-page section.jobs-cta { padding: 0; }

/* ---------- 3) Job groups (1:1766) ---------- */
.jobs-body {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.167vw, 80px);
  padding: clamp(64px, 6.25vw, 120px) 0;
}

/* Anchor tabs (1:1767) — [data-sp-spy]: sticky top/z-index and the active tab
   follow sp-motion.js (sp-common.css "Motion"). The bar itself scrolls sideways so
   sp-motion can keep the active tab in view on narrow screens. */
.jobs-tabs {
  position: sticky;
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding-inline: clamp(16px, 8.333vw, 160px);
  overflow-x: auto;
  scrollbar-width: none;
}
.jobs-tabs::-webkit-scrollbar { display: none; }
.jobs-tabs-inner {
  display: flex;
  gap: 10px;
  width: max-content;
  min-width: min(1600px, 100%);
  margin-inline: auto;
}
.jobs-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(84px, 7.292vw, 140px);
  margin-bottom: -1px;
  padding: clamp(12px, 0.833vw, 16px);
  border-bottom: 2px solid transparent;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #999;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.jobs-tab:hover { color: var(--sp-navy); }
.jobs-tab.is-active {
  color: var(--sp-navy);
  font-weight: 700;
  border-bottom-color: var(--sp-navy);
}
.jobs-tab:focus-visible { outline: 2px solid var(--sp-navy); outline-offset: -2px; }

/* Groups (1:1787) */
.jobs-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 6.25vw, 120px);
  width: min(1600px, 100% - 2 * clamp(16px, 8.333vw, 160px));
  margin-inline: auto;
  padding-block: clamp(24px, 2.604vw, 50px);
}
.jobs-group {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.083vw, 40px);
  scroll-margin-top: 96px;
}
.jobs-group-title {
  font-weight: 600;
  font-size: clamp(28px, 2.083vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #111;
}
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 24px clamp(16px, 1.667vw, 32px);
  list-style: none;
}
.jobs-grid--1 { --cols: 1; }
.jobs-grid--2 { --cols: 2; }
.jobs-grid--3 { --cols: 3; }
.jobs-grid--4 { --cols: 4; }

/* Info card (1:1792) */
.jobs-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: clamp(220px, 13.333vw, 256px);
  padding: clamp(24px, 1.667vw, 32px);
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
}
.jobs-card-ico {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: #f7fcf8;
  overflow: hidden;
}
.jobs-card-ico .jobs-ico {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* Icon box: layered SVG parts placed by their Figma insets */
.jobs-ico {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--ico, 45px);
  height: var(--ico, 45px);
}
.jobs-page .jobs-ico img {
  position: absolute;
  max-width: none;
}
.jobs-card-title {
  font-family: 'Noto Sans KR', var(--sp-font);
  font-weight: 700;
  font-size: clamp(20px, 1.25vw, 24px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #111;
  word-break: keep-all;
}
.jobs-card-desc {
  font-family: 'Noto Sans KR', var(--sp-font);
  font-size: clamp(15px, 0.833vw, 16px);
  line-height: 1.7;
  letter-spacing: -0.015em;
  color: #666;
  word-break: keep-all;
  overflow-wrap: break-word;
}
/* Chrome renders Noto Sans KR ~2px wider than Figma; let one-line bodies
   (e.g. SW설계 446px box) stay on one line as in the design.
   (.sp-page p resets margin at 0,1,1, so this needs the page scope.) */
.jobs-page .jobs-card .jobs-card-desc { margin-right: -8px; }

/* ---------- 4) CTA (1:2198) ---------- */
.jobs-cta {
  position: relative;
  min-height: clamp(480px, 36.302vw, 697px);
  overflow: hidden;
  color: #fff;
  background: #0b1222;
}
.jobs-cta-bg {
  position: absolute;
  inset: -40px;
  filter: blur(10.5px); /* Figma layer blur 21 = CSS blur radius ~half */
}
/* 1:2199 geometry: blurred rect is 2024x922 at (-33,-151) of the 1920x697 frame,
   the photo inside it is 100% x 111.07% at top -11.09% (bottom part of the photo shows) */
.sp-page.jobs-page section.jobs-cta > .jobs-cta-bg {
  inset: auto;
  left: -1.72%;
  top: -21.66%;
  width: 105.42%;
  height: 132.28%;
}
.jobs-cta-bg img {
  position: absolute;
  left: 0;
  top: -11.09%;
  width: 100%;
  height: 111.07%;
  max-width: none;
  object-fit: cover;
}
.jobs-cta-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.jobs-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-height: inherit;
  width: min(1600px, 100% - 2 * clamp(16px, 8.333vw, 160px));
  margin-inline: auto;
  padding-block: clamp(56px, 6.25vw, 120px) clamp(56px, 4.167vw, 80px);
}
.jobs-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.jobs-cta-title {
  font-weight: 600;
  font-size: clamp(30px, 2.917vw, 56px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  word-break: keep-all;
}
.jobs-cta-desc {
  margin-top: 4px;
  font-weight: 500;
  font-size: clamp(16px, 1.042vw, 20px);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: keep-all;
}
.jobs-cta-links {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.jobs-cta-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: clamp(150px, 13.542vw, 260px);
  height: clamp(120px, 8.333vw, 160px);
  padding: 26px clamp(16px, 2.083vw, 40px);
  border-radius: 10px;
  background: #ebedf1;
  color: var(--sp-navy);
  font-weight: 600;
  font-size: clamp(17px, 1.042vw, 20px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.jobs-cta-link.is-primary { background: var(--sp-navy); color: #fff; }
.jobs-cta-link:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); }
.jobs-cta-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .jobs-card-desc br { display: none; }
  .jobs-grid--4 { --cols: 2; }
}
@media (max-width: 1024px) {
  .jobs-grid--3 { --cols: 2; }
}
@media (max-width: 768px) {
  .jobs-grid--2,
  .jobs-grid--3,
  .jobs-grid--4 { --cols: 1; }
  .jobs-card { min-height: 0; }
  .jobs-group { scroll-margin-top: 72px; }
}
@media (max-width: 600px) {
  .jobs-card-ico { width: 64px; height: 64px; }
  .jobs-card-ico .jobs-ico { width: calc(var(--ico, 45px) * 0.8); height: calc(var(--ico, 45px) * 0.8); }
  .jobs-cta-links { justify-content: stretch; gap: 12px; }
  .jobs-cta-link { flex: 1 1 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-tab, .jobs-cta-link { transition: none; }
  .jobs-cta-link:hover { transform: none; }
}

/* Scene B dim strength (Figma), read by sp-hero.js */
.jobs-page .sp-stage { --sp-stage-dim: 0.5; }