/* ============================================================================
   sections/career.css — sub0501_Career (221:963 · 1920×4063)
   ----------------------------------------------------------------------------
   리듬: 다크(#132033) 히어로·Core Talents → 팀 사진 밴드(다크/화이트 경계
         300/300 걸침) → 화이트 Welfare & Benefits·Job Openings → 다크 푸터.
   액센트 이원화: 다크 위 #28C6FF(--df-cyan) / 라이트 위 #006CD2(--df-blue).
   골격: 컨테이너 1600 · 좌우 160 · 섹션 py 120 · 타이틀→콘텐츠 100.
   유동 변환: clamp 손계산(1920 기준 — 주석에 시안값).
   ========================================================================== */
@layer components {

  [data-page="career"] {
    /* 페이지 전용 보조 토큰 (tokens-sub0501 실측) */
    --c-chip-bg: #f5f5f5;                       /* 221:1026 태그 칩 bg */
    --c-chip-bd: #e8e8e8;                       /* 221:1026 태그 칩 보더 */
    --c-sp-150: clamp(40px, 7.8125vw, 150px);   /* title↔list gap 150 (221:992/1016) */
    --c-sp-140: clamp(48px, 7.2917vw, 140px);   /* 히어로 우측 desc pt140 (221:968) */
    --c-ic-talent: clamp(64px, 5.7292vw, 110px);/* Core Talents 아이콘 h110 */
    --c-ic-wf: clamp(48px, 4.1667vw, 80px);     /* Welfare 아이콘 h80 */
    --c-gap-10: clamp(8px, 0.5208vw, 10px);     /* 칩 gap 10 (221:1025) */
  }

  /* ── 공통 조각 ─────────────────────────────────────────────────────────── */
  .c-light {
    background: var(--df-white); color: var(--df-ink);
    padding-block-start: calc(0.1875 * var(--fl-content));     /* 시안 221:991 pt300 = 밴드 하단 절반 */
  }

  .c-eyebrow { font-weight: 700; font-size: var(--fs-16); line-height: 1; }
  .c-eyebrow--cyan { color: var(--df-cyan); }
  .c-eyebrow--blue { color: var(--df-blue); }
  .c-h2 { margin-block-start: var(--sp-20); font-weight: 700; font-size: var(--fs-50); line-height: 1.4; }
  .c-desc { margin-block-start: var(--sp-20); font-weight: 400; font-size: var(--fs-18); line-height: 1.8; }

  /* 좌 타이틀(555) + 우 콘텐츠(895) 분할 (221:992 · 221:1016) */
  .c-split {
    display: grid;
    grid-template-columns: minmax(0, 555fr) minmax(0, 895fr);
    column-gap: var(--c-sp-150);
    align-items: start;
  }

  /* ══ 1. 히어로 (221:966 · y214 h456 · 다크) ════════════════════════════
     타이틀 전체 dim + 스크롤 좌→우 흰색 채움(hero-title--scrub). */
  .c-hero {
    /* 고정 헤더(94) + 섹션 상패딩 120 = 시안 y214 */
    padding-block: calc(var(--hd-h) + var(--sp-120)) 0;
  }
  .c-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 800fr) minmax(0, 700fr);  /* 800 / gap 100 / 700 */
    gap: var(--sp-100);
    align-items: start;
    padding-block-end: var(--sp-120);          /* 시안 221:966 pb120 → 박스 h456 */
  }
  /* 히어로 진입 클립 캐리어(페인트 없음) — 그리드 행을 만들지 않게 절대배치 */
  .c-hero__veil { position: absolute; inset: 0; pointer-events: none; }
  /* 텍스트 잉크 박스 캐리어 — 시안 고정폭 텍스트 프레임과 잉크 박스를 일치시킨다 */
  .c-tb { display: inline-block; inline-size: 100%; }
  @media (width >= 1440px) { .c-nw1440 { white-space: nowrap; } }  /* 시안 1줄 텍스트(221:1020) */
  .c-hero__twrap {
    position: relative;
    max-inline-size: min(100%, clamp(320px, 55.5556vw, 800px)); /* 시안 221:967 w800 */
    font-weight: 700; font-size: var(--fs-80); line-height: 1.4; color: var(--df-white);
  }
  .c-hero__title { font: inherit; color: inherit; }
  .c-hero__ln { display: inline; }
  .c-hero__leadbox { padding-block-start: var(--c-sp-140); }
  .c-hero__lead { font-weight: 400; font-size: var(--fs-20); line-height: 1.8; }

  /* 스크롤 힌트 라인 — 시안에 없는 우리 요소(scroll-hint-loop 배선용, data-invented)
     시안 알파는 background-color 에 둔다(RC-2b — 모션 opacity 와 곱해지게). */
  .c-hint {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: var(--sp-30);
    display: block;
    inline-size: 1px;
    block-size: clamp(44px, 3.75vw, 72px);
    background-color: rgba(255, 255, 255, 0.55);
  }

  /* ══ 2. Core Talents (221:970 · y670 · 다크 · 상단 1px 헤어라인) ═══════
     시안: 보더는 x160 w1600(컨테이너 폭) — 래퍼에 건다. pb400 은 아래 사진
     밴드 자리 → 여기서는 카드→밴드 gap 100 만 지고 밴드 섹션이 나머지 담당. */
  .c-talents { padding-block-end: 0; }
  .c-talents > .fl-wrap {
    border-block-start: 1px solid var(--df-line-w10);          /* 221:970 stroke top */
    padding-block-start: var(--sp-120);                        /* 보더 → 라벨 = 120 (791−670) */
    /* 시안 pb400 = 카드→밴드 gap100 + 밴드 절반(600×0.5=300, 1920 기준 0.1875×콘텐츠폭) */
    padding-block-end: calc(var(--sp-100) + 0.1875 * var(--fl-content));
  }
  .c-talents__cards {
    margin-block-start: var(--sp-100);                         /* desc끝 949 → 카드 1049 = 100 */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));          /* 각 520 · gap 20 */
    gap: var(--sp-20);
  }
  .c-talent { display: flex; flex-direction: column-reverse; text-align: center; }  /* F3: DOM=[txt,ic] · 시각=아이콘 위 */
  .c-talent__ic { block-size: var(--c-ic-talent); margin-inline: auto; background-color: transparent; }
  .c-talent__ic--1 { aspect-ratio: 96 / 110; }                 /* 221:977 */
  .c-talent__ic--2 { aspect-ratio: 104 / 110; }                /* 221:982 */
  .c-talent__ic--3 { aspect-ratio: 114 / 110; }                /* 221:987 */
  .c-talent__ic img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .c-talent__txt { margin-block-start: var(--sp-50); }         /* 아이콘 → 텍스트 50 (1209−1159) */
  .c-talent__t { font-weight: 700; font-size: var(--fs-30); line-height: 1; color: var(--df-white); }
  .c-talent__d { margin-block-start: var(--sp-20); font-weight: 400; font-size: var(--fs-18); line-height: 1; }
  /* 시안(221:990)은 1줄(h18)인데 Chromium 실측 폭 ~527 > 카드 520 으로 개행 발생
     → 설계폭 근방(≥1440)에서만 nowrap(규칙 5). 중앙정렬이라 ±4px 초과는 비가시. */
  @media (width >= 1440px) { .c-talent__d { white-space: nowrap; } }

  /* ══ 팀 사진 밴드 (221:1078 · 160,1377 · 1600×600 · cover) ═════════════
     다크(#132033)→화이트 경계에 정확히 반반(300/300) 걸침 —
     섹션 배경을 세로 50/50 으로 갈라(위=투명→body 네이비, 아래=화이트) 재현.
     figure 는 parallax-y 스크럽(±소폭) — 정지(섹션 중앙)=시안 좌표. */
  .c-band {
    position: relative; z-index: 2;
    inline-size: var(--fl-content); margin-inline: auto;       /* 시안 x160 w1600 */
    /* 시안: 밴드(600)가 다크/화이트 경계에 반반(300/300) 걸침 —
       위·아래 음수 마진(−밴드 절반 = 0.1875×콘텐츠폭)으로 양쪽 섹션에 300씩 겹친다 */
    margin-block: calc(-0.1875 * var(--fl-content));
    aspect-ratio: 1600 / 600;
    overflow: clip;
  }
  .c-band img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* ══ 3-1. Welfare & Benefits (221:992 · y1977 · 화이트 · py120) ════════ */
  .c-welfare { padding-block: 0; }
  .c-welfare > .fl-wrap { padding-block: var(--sp-120); }      /* 시안 221:992 py120 → 박스 h636 */
  .c-wf__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));          /* 각 265 · col 50 */
    column-gap: var(--sp-50);
    row-gap: var(--sp-100);                                    /* row 100 (2327−2227) */
  }
  .c-wf__item { display: flex; flex-direction: column-reverse; text-align: center; }  /* F3: DOM=[label,ic] · 시각=아이콘 위 */
  .c-wf__ic { block-size: var(--c-ic-wf); margin-inline: auto; background-color: transparent; }
  .c-wf__ic--1 { aspect-ratio: 79 / 80; }                      /* 221:999 */
  .c-wf__ic--2 { aspect-ratio: 95 / 80; }                      /* 221:1002 */
  .c-wf__ic--3 { aspect-ratio: 97 / 80; }                      /* 221:1005 */
  .c-wf__ic--4 { aspect-ratio: 88 / 80; }                      /* 221:1008 */
  .c-wf__ic--5 { aspect-ratio: 102 / 80; }                     /* 221:1011 */
  .c-wf__ic--6 { aspect-ratio: 86 / 80; }                      /* 221:1014 */
  .c-wf__ic img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .c-wf__label { margin-block-start: var(--sp-30); font-weight: 600; font-size: var(--fs-20); line-height: 1; }
  .c-wf__label--2ln { line-height: 1.4; }                      /* 시안 2줄 라벨 lh1.4 (221:1009) */

  /* ══ 3-2. Job Openings (221:1016 · y2623 · 화이트 · 상단 1px 헤어라인) ═ */
  .c-jobs { padding-block-end: 0; }
  .c-jobs > .fl-wrap {
    border-block-start: 1px solid var(--df-line-k10);          /* 221:1016 stroke top */
    padding-block: var(--sp-120);                              /* 시안 221:1016 py120 → 박스 h852 */
    margin-block-start: var(--c-gap-10);                       /* 시안 welfare(2613)↔jobs(2623) 10px 갭 */
  }
  .c-jobs__list { display: grid; gap: var(--sp-40); }          /* 행 gap 40 (221:1021) */
  .c-job {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-20);
    padding-block-end: var(--sp-40);                           /* 행 pb40 */
    border-block-end: 1px solid var(--df-line-k10);            /* 행 하단 1px */
  }
  .c-job:last-child { border-block-end: 0; padding-block-end: 0; }  /* 4행 보더·pb 없음 (221:1064) */
  .c-job--empty { display: block; }
  .c-job__empty { margin: 0; font-size: var(--fs-16); line-height: 1.5; color: var(--df-ink); opacity: 0.55; } */
  .c-job__info { flex: 1 1 auto; min-inline-size: 0; }        /* 시안 221:1023 w686 */
  .c-job__title { font-weight: 700; font-size: var(--fs-24); line-height: 1.4; color: var(--df-ink); }
  .c-job__tags {
    display: flex; flex-wrap: wrap;
    gap: var(--c-gap-10);                                      /* 칩 gap 10 */
    margin-block-start: var(--sp-20);                          /* 제목 → 칩 20 (2798−2778) */
    padding-inline-start: 0;
    inline-size: fit-content;                                  /* 시안 hug(칩 합 폭 · 221:1025 w414) */
  }
  .c-chip {
    display: inline-block;
    padding: clamp(6px, 0.5208vw, 10px) clamp(12px, 1.0417vw, 20px);  /* 10×20 */
    background: var(--c-chip-bg);
    border: 1px solid var(--c-chip-bd);
    border-radius: var(--r-pill);                              /* radius 100 */
    font-weight: 400; font-size: var(--fs-16); line-height: 1; color: var(--df-ink);
  }
  .c-chip--min127 { min-inline-size: min(6.6146vw, 127px); text-align: center; }  /* 시안 221:1054 w127 */
  /* Apply Now 버튼 — .df-btn 재사용(footer.css). 색 변형만 여기(BUILD-RULES 8).
     시안 텍스트 #000000(221:1033) · 화살표 판은 흰색 r4(243:259). */
  .c-job__btn { flex-shrink: 0; color: #000000; }
  .c-job__btn .df-btn__t { line-height: 1; }
  .c-job__btn .df-btn__ar { flex-shrink: 0; }
  .c-job__btn.df-btn--light .df-btn__ar {
    --df-btn-ar-bg: #ffffff;
    --df-btn-ar-ink: #000000;
  }

  /* ══ 맨위로 버튼 (data-invented · scroll-to-top-smooth) ════════════════ */
  .c-top {
    position: fixed; z-index: 90;
    inset-block-end: var(--sp-30); inset-inline-end: var(--sp-30);
    inline-size: clamp(44px, 2.6042vw, 50px); aspect-ratio: 1;
    border-radius: 50%;
    background: var(--df-navy-2);
    border: 1px solid var(--df-line-w10);
    display: grid; place-items: center;
    /* 표시는 --mo 로 — motion 레이어의 [data-motion-done]{opacity:var(--mo,1)} 와 합의 */
    --mo: 0;
    opacity: var(--mo);
    visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease-out-quart), visibility 0s linear .3s;
  }
  .c-top.is-on {
    --mo: 1;
    visibility: visible; pointer-events: auto;
    transition: opacity .3s var(--ease-out-quart), visibility 0s linear 0s;
  }
  .c-top__ar {
    display: block; inline-size: 30%; aspect-ratio: 1;
    margin-block-start: 18%;
    border-block-start: 2px solid var(--df-white);
    border-inline-start: 2px solid var(--df-white);
    transform: rotate(45deg);                                  /* 축약형 — P44 */
  }

  /* ════ 반응형 (허용 브레이크포인트: 1440/1280/1024/768/480) ═════════════ */
  @media (width < 1280px) {
    /* 좌 타이틀 폭이 좁아지면 채용 행의 버튼 폭 확보를 위해 분할 비율 완화 */
    .c-split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  }

  @media (width < 1024px) {
    .c-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-30); }
    .c-hero__leadbox { padding-block-start: 0; }
    .c-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-40); }
  }

  @media (width < 768px) {
    .c-talents__cards { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-40); }  /* 3의 약수: 3→1 */
    .c-wf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-40); }  /* 6의 약수: 3→2 */
    .c-job { flex-direction: column; align-items: flex-start; }
  }

  @media (width < 480px) {
    .c-wf__grid { grid-template-columns: minmax(0, 1fr); }     /* 6의 약수: 2→1 */
  }
}

/* 맨위로 버튼은 JS 전용 발명 요소 — JS 없으면 기능이 없으므로 숨긴다(A11Y11) */
html:not(.js-motion) .c-top { display: none; }