/* ============================================================
   직무소개 (job-intro)
   데스크탑(≥1920 기준 max) ~ 모바일(min) clamp, 태블릿 보간
   ============================================================ */

/* 좌우 섹션 패딩: 사이트 표준 계단식 값(120/60/16)을 그대로 사용.
   common.css :root의 --section-padding-x가 브레이크포인트별로 재정의되므로
   다른 페이지들과 동일한 페이지 기본 여백이 자동 적용됨. */
:root {
    --ji-pad-x: var(--section-padding-x);
}

/* 페이지 헤더는 공통 표준 .page-header / h1 사용 (common.css) — 커스텀 정의 없음 */

/* ── 탭 (이 페이지 고유: 스크롤 이동형 스티키 탭. 다른 페이지의 tab-nav와 구조가 달라 별도 유지) ── */
.ji-tabs {
    position: sticky;
    top: 90px;
    /* GNB 높이 아래에 고정 */
    z-index: 50;
    background: #fff;
    display: flex;
    gap: 8px;
    padding: clamp(8px, 0.9375vw, 14px) var(--ji-pad-x) 0;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 맨 위(scrollY 0)에서는 그림자 없음 */
    box-shadow: none;
    transition: top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.2s ease;
}

/* 스크롤되면 하단 방향으로만 그림자 (음수 spread로 위로 안 번지게) */
.ji-tabs.is-scrolled {
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.12);
}

.ji-tabs::-webkit-scrollbar {
    display: none;
}

.ji-tab {
    flex-shrink: 0;
    padding: clamp(8px, 0.625vw, 12px) clamp(10px, 1.0416vw, 20px);
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 500;
    line-height: 1.5;
    color: #363636;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ji-tab:hover {
    color: #F27100;
}

.ji-tab.is-active {
    color: #F27100;
    font-weight: 700;
    border-bottom-color: #F27100;
}

/* ── 리스트 ── */
.ji-list {
    background: #fff;
    padding: clamp(40px, 5.2083vw, 100px) var(--ji-pad-x);
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 4.1667vw, 80px);
    max-width: 1920px;
    margin: 0 auto;
    box-sizing: border-box;
}

.ji-item {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.0833vw, 40px);
    /* 스티키 탭(GNB+탭) 아래로 스크롤되도록 */
    scroll-margin-top: 170px;
}

/* ── 섹션 헤더 (배경 이미지 + 좌측 그라디언트) ── */
.ji-item-header {
    position: relative;
    overflow: hidden;
    height: clamp(140px, 15.625vw, 300px);
    border-radius: clamp(16px, 1.5625vw, 30px);
    padding: clamp(20px, 2.0833vw, 40px) clamp(20px, 2.0833vw, 40px) clamp(20px, 2.6042vw, 50px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ji-item-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
    pointer-events: none;
}

.ji-item-header > * {
    position: relative;
    z-index: 1;
}

.ji-hd-hq {
    background-image: url('../assets/job-intro/hq.png');
}

.ji-hd-sales {
    background-image: url('../assets/job-intro/sales.png');
}

.ji-hd-production {
    background-image: url('../assets/job-intro/production.png');
}

.ji-hd-research {
    background-image: url('../assets/job-intro/research.png');
}

.ji-item-title {
    font-size: clamp(24px, 2.6042vw, 50px);
    /* 50px / 1920 */
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

.ji-item-subtitle {
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    opacity: 0.8;
    margin: clamp(6px, 0.5208vw, 10px) 0 0;
}

/* ── 카드 그리드 (2열, 모바일 1열) ── */
.ji-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.5625vw, 30px);
    align-items: start;
}

.ji-card {
    background: #F8F9FB;
    border-radius: clamp(16px, 1.5625vw, 30px);
    padding: clamp(20px, 2.0833vw, 40px) clamp(20px, 2.0833vw, 40px) clamp(20px, 2.6042vw, 50px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.0833vw, 40px);
}

.ji-card-title {
    font-size: clamp(20px, 1.875vw, 36px);
    /* 36px / 1920 */
    font-weight: 700;
    line-height: 1.5;
    color: #000;
    margin: 0;
}

.ji-card-desc {
    font-size: clamp(14px, 1.25vw, 24px);
    /* 24px / 1920 */
    font-weight: 400;
    line-height: 1.5;
    color: #363636;
    margin: 0;
    word-break: keep-all;
}

/* ── 버튼 ── */
.ji-btns {
    background: #fff;
    display: flex;
    gap: clamp(10px, 0.8333vw, 16px);
    justify-content: center;
    padding: clamp(40px, 3.125vw, 60px) var(--ji-pad-x) 0;
}

.ji-btn {
    flex: 0 1 clamp(155px, 18.02vw, 346px);
    height: clamp(56px, 4.1667vw, 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: clamp(16px, 1.25vw, 24px);
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

/* 검수 0728(Figma 1648-78695): 블랙톤 버튼 */
.ji-btn-outline {
    border: 1px solid #111111;
    color: #111111;
    background: #fff;
}

.ji-btn-outline:hover {
    background: #F8F9FB;
}

.ji-btn-fill {
    background: #111111;
    color: #fff;
}

.ji-btn-fill:hover {
    background: #4E4E4E;
}

/* ══════════════════════════════════════
   MOBILE (≤ 767px)
   ══════════════════════════════════════ */
@media (max-width: 767px) {
    .ji-tabs {
        top: 72px;
        /* 모바일 GNB 높이 */
    }

    .ji-item {
        scroll-margin-top: 120px;
    }

    /* 연구소: 모바일에서 사진을 오른쪽으로. cover가 가로를 꽉 채워 position-x가 안 먹으므로
       살짝 확대(130%)해 가로 여백을 만든 뒤 우측 정렬 */
    .ji-hd-research {
        background-size: 130% auto;
        background-position: left center;
    }

    /* 카드 1열 스택 */
    .ji-cards {
        grid-template-columns: 1fr;
    }

    /* 버튼 전체폭 분할 */
    .ji-btns {
        gap: 10px;
    }

    .ji-btn {
        flex: 1 1 0;
    }
}