/* ══════════════════════════════════════
   채용안내 (recruit.html)
   GP: 1920px / GM: 360px
   Figma file: 9atg0Kz3RdcbBqpN2Ozdsd  Page 4
   GP frame: 146:3208 / GM frame: 146:3625
══════════════════════════════════════ */

/* 모바일 전용 줄바꿈 — 데스크탑에서 숨김 */
.sp-br {
    display: none;
}


/* ── 페이지 헤더 ── */
/* GP: h=366, GNB=90, pt=70, pb=100. Title: font-size=80px, Bold, center */
.rec-page-header {
    padding: 70px 120px 100px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-page-title {
    font-size: 80px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.325;
    text-align: center;
}


/* ── 도입 섹션 (sticky scroll) ── */
/* GP: w=1920, h=884, pt=100, pb=100, pl=30, pr=30, gap=60 */
.rec-intro-outer {
    position: relative;
    background: #fff;
}

.rec-intro-inner {
    position: relative;
    width: 100%;
    background: #fff;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 100px 30px 100px;
    gap: 60px;
    box-sizing: border-box;
}

.rec-intro-text-section {
    display: flex;
    justify-content: center;
}

/* GP: title — fs=60, fw=700, color=#E9E9E9 (초기), centered */
.rec-intro-title {
    font-size: clamp(24px, 3.125vw, 60px);
    font-weight: 700;
    color: #E9E9E9;
    margin: 0;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}

/* 글자별 span.char — 색상 전환 */
.rec-intro-title .char {
    transition: color 0.4s ease;
}

.rec-intro-title .char.active {
    color: #363636;
}

/* GP: image wrapper — w=1860, h=540, radius=30 */
.rec-intro-image-section {
    padding: 0;
}

.rec-intro-image-wrapper {
    position: relative;
    width: 100%;
    height: 540px;
    overflow: hidden;
    border-radius: 30px;
}

.rec-intro-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* GP: desc text overlay — fs=30, fw=700, color=#fff, centered in image */
/* 히어로 오버레이 — 사회/윤리경영과 동일 구조 (inset:0 flex 중앙 정렬) */
.rec-intro-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.rec-intro-desc {
    font-size: clamp(16px, 1.5625vw, 30px);
    font-weight: 500; /* 검수 0703: 오버레이 텍스트 Medium */
    color: #fff;
    opacity: 0.9; /* 검수 0722: 히어로 오버레이 문구 투명도 90% (지속가능경영과 통일) */
    text-align: center;
    margin: 0;
    line-height: 1.5;
}


/* ── 채용절차 섹션 ── */
/* GP: w=1920, h=678, pt=100, pb=100, pl=120, pr=120, gap=40 */
/* ══════════════════════════════════════
   채용절차 (검수 0703 / Figma 1215-19953·20104·20499)
   · STEP 카드 배경 #F8F9FB 추가, 카드 307×404, 카드간격 24
   · 화살표는 마지막(면접→최종합격) 1개만
   · 텍스트 최소~최대: STEP 16~20 / 타이틀 24~36 / 내용 16~24
   · 최하단 내용 3줄 처리
══════════════════════════════════════ */
.rec-process-section {
    background: #fff;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* GP: section title — fs=50, fw=700 */
.rec-section-title {
    font-size: 50px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}

/* 데스크탑(≥1440): 무조건 1행 유지. 카드폭을 clamp로 줄여 1행을 안 깨지게 함
   (307px는 1920 기준값 — 데스크탑 전역 고정값이 아니라 뷰포트 따라 축소) */
.rec-process-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
}

/* 검수 0722: 데스크탑에선 그룹을 display:contents로 풀어 5개 카드가 리스트의 직접 flex 아이템이 되게 함
   → flex:1 균등분할이 gap 이중차감 없이 정확히 동작 (태블릿/모바일에선 아래 미디어쿼리에서 display:flex 복구) */
.rec-process-group {
    display: contents;
}

/* GP: 카드 — bg #F8F9FB, 404 높이, p30, radius30, 세로 중앙
   Figma: 5개 균등분할 (1680 − gap 24×4)/5 = 316.8 → flex:1 1 0 + list gap 24 */
.rec-process-card {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    background: #F8F9FB;
    border-radius: 30px;
    padding: 30px;
    min-height: 404px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 50px;
}

.rec-process-group .rec-process-card {
    flex: 1 1 0;
}

/* 최종합격 — bg #F27100, 아이콘 상단 / 텍스트 하단 */
.rec-process-card--final {
    background: #363636;
    justify-content: space-between;
    gap: 40px;
}

/* GP: icon — 44×44 */
.rec-process-icon {
    display: flex;
    align-items: center;
}

.rec-process-icon img {
    width: 44px;
    height: 44px;
    transform: scaleX(-1);
}

.rec-process-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* GP: STEP — fs 16~20, fw500, #363636 */
.rec-process-step {
    font-size: clamp(16px, calc(16px + 4 * (100vw - 1440px) / 480), 20px);
    font-weight: 500;
    color: #363636;
    line-height: 1.6;
    display: block;
}

.rec-process-card--final .rec-process-step {
    display: none;
}

.rec-process-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

/* GP: 타이틀 — fs 24~36, fw700, #000, 1줄 */
.rec-process-name {
    font-size: clamp(24px, calc(24px + 12 * (100vw - 1440px) / 480), 36px);
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 1.5;
    display: block;
    white-space: nowrap;
}

.rec-process-card--final .rec-process-name {
    color: #fff;
}

/* GP: 내용 — fs 16~24, fw400, #7A7A7A, 3줄 처리 */
.rec-process-desc {
    font-size: clamp(16px, calc(16px + 8 * (100vw - 1440px) / 480), 24px);
    font-weight: 400;
    color: #7A7A7A;
    margin: 0;
    line-height: 1.5;
    word-break: keep-all;
    min-height: 4.5em; /* 3줄 확보 */
}

.rec-process-card--final .rec-process-desc {
    color: #fff;
}

/* 검수 0722: 화살표 제거 (Figma 채용절차엔 화살표 없음) */


/* ── 채용안내 섹션 ── */
/* GP: w=1920, h=801, pt=100, pb=100, pl=120, pr=120, gap=40 */
.rec-info-section {
    background: #fff;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* GP: info wrap — gap=40, vertical */
.rec-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* GP: contents box — border=1px solid #D3D3D3, radius=30, pt=50, pb=50, pl=40, pr=40, gap=30 */
.rec-info-contents {
    border: 1px solid #D3D3D3;
    border-radius: 30px;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* GP: row — h=36, gap=24, horizontal */
.rec-info-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

/* GP: label — w=160, fs=24, fw=700 */
.rec-info-label {
    flex: 0 0 160px;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    line-height: 1.5;
}

/* GP: value — fs=24, fw=400 */
.rec-info-value {
    font-size: 24px;
    font-weight: 400;
    color: #7A7A7A;
    line-height: 1.5;
}

.rec-info-value-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* GP: note — fs=18, fw=500, h=29 / 검수 0722: *온라인접수 컬러 #0E3577 */
.rec-info-note {
    font-size: 18px;
    font-weight: 500;
    color: #0E3577;
    line-height: 1.5;
    height: 29px;
}

/* 채용안내 헤더 — 제목(좌) + 이력서 다운로드 버튼(우 상단) */
.rec-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 이력서 다운로드 버튼 — Figma BTN_다운로드: pill #E9E9E9, 18px Bold #1B1B1B + 아이콘, hover #D3D3D3 */
.rec-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 18px;
    border-radius: 100px;
    background: #E9E9E9;
    color: #1B1B1B;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

.rec-info-btn:hover {
    background: #D3D3D3;
}

.rec-info-btn-ic {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}


/* ── FAQ 섹션 ── */
/* GP: w=1920, h=1075, pt=100, pb=100, pl=120, pr=120, bg=#F8F9FB */
.rec-faq-section {
    background: #F8F9FB;
    padding: 100px 120px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    text-align: center;
}

.rec-faq-section .rec-section-title {
    margin-bottom: 60px;
}



/* GP: FAQ 탭 — centered, gap=8 */
.rec-faq-tabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

/* GP: tab — pt=9, pb=9, pl=20, pr=20, h=48, radius=24, fs=20, fw=700 */
.rec-faq-tab {
    padding: 9px 20px;
    height: 48px;
    border-radius: 24px;
    font-size: 20px;
    font-weight: 700;
    color: #363636;
    background: #ffffff;
    border: 1px solid #E9E9E9;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
    white-space: nowrap;
}

.rec-faq-tab.is-active,
.rec-faq-tab:hover {
    background: #F27100;
    color: #fff;
    border-color: #F27100;
}

/* GP: accordion — w=1124, centered, gap=24, h=600 고정 + 커스텀 스크롤바 */
.rec-faq-accordion {
    width: 1124px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 600px;
    overflow-y: auto;
    box-sizing: border-box;
    padding-right: 16px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #D3D3D3 rgba(211, 211, 211, 0.3);
}

/* 커스텀 스크롤바 (Figma: 얇은 4px 라인, track #D3D3D3 30% / thumb #D3D3D3) */
.rec-faq-accordion::-webkit-scrollbar {
    width: 6px;
}

.rec-faq-accordion::-webkit-scrollbar-track {
    background: rgba(211, 211, 211, 0.3);
    border-radius: 100px;
}

.rec-faq-accordion::-webkit-scrollbar-thumb {
    background: #D3D3D3;
    border-radius: 100px;
}

/* 스크롤 컨테이너 안에서 item이 줄어들지 않도록 */
.rec-faq-item {
    flex-shrink: 0;
}

/* GP: item — bg=#fff, pt=30, pr=30, pb=30, pl=30 */
.rec-faq-item {
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    border-radius: 20px;
}

/* GP: Q row — horizontal, gap=30 between Q mark and text, w=1124, h=99 */
.rec-faq-q {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 30px;
    height: 99px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

/* GP: Q. mark — fs=26, fw=700, w=26, h=39 */
.rec-faq-q-mark {
    font-size: 26px;
    font-weight: 700;
    color: #A7A7A7;
    flex-shrink: 0;
    width: 26px;
    height: 39px;
    line-height: 39px;
    display: block;
}

/* GP: Q text — fs=26, fw=700 */
.rec-faq-q-text {
    font-size: 26px;
    font-weight: 700;
    color: #000;
    flex: 1;
    line-height: 1.4;
    text-align: left;
}

.rec-faq-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

/* 닫힌 상태: 세로선 보임(+), 열린 상태: 세로선 숨김(-) */
.rec-faq-toggle-v {
    transition: opacity 0.2s;
}

.rec-faq-item.is-open .rec-faq-toggle-v {
    opacity: 0;
}

/* GP: A — fs=24, fw=400, pl aligned with Q text */
.rec-faq-a {
    display: none;
    padding: 0 30px 30px 64px;
    text-align: left;
}

.rec-faq-a p {
    font-size: 24px;
    font-weight: 400;
    color: #363636;
    margin: 0;
    line-height: 1.6;
}

.rec-faq-item.is-open .rec-faq-a {
    display: block;
}


/* ── 버튼 섹션 ── */
/* GP: btn — w=1920, h=140, pt=60, gap=16, centered */
.rec-btn-section {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 60px 0 0;
    background: #fff;
}

/* GP: btn — w=346, h=80, radius=10, fs=24, fw=700 */
.rec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 346px;
    height: 80px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.rec-btn:hover {
    opacity: 0.85;
}

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

/* primary: bg=#111111, color=#fff */
.rec-btn--primary {
    background: #111111;
    color: #fff;
    border: 1px solid #111111;
}


/* ══════════════════════════════════════
   반응형 — 태블릿 (768px ~ 1439px)
══════════════════════════════════════ */
@media (max-width: 1439px) {

    /* 상단 헤더 간격 — 환경경영 기준 통일 (top 40 / bottom 60) */
    .rec-page-header {
        padding: 40px 40px 60px;
    }

    .rec-page-title {
        font-size: 60px;
    }

    /* 인트로 간격 — 환경경영 기준 통일 (텍스트 위 100 / 텍스트-이미지 사이 60) */
    .rec-intro-inner {
        padding: 100px 30px 80px;
        gap: 60px;
    }

    .rec-intro-title {
        font-size: clamp(24px, 3.125vw, 60px);
    }

    .rec-intro-image-wrapper {
        height: clamp(300px, 35vw, 500px);
        border-radius: 20px;
    }

    .rec-intro-desc {
        font-size: 20px;
    }

    .rec-process-section,
    .rec-info-section,
    .rec-faq-section {
        padding: 60px 40px;
    }

    .rec-section-title {
        font-size: clamp(24px, 3.5vw, 40px);
    }


    /* 채용절차 카드는 아래 별도 @media(max-width:1439px) 블록에서 2+3 태블릿 배치 처리 */

    /* 검수 0722: 태블릿 clamp 최소값을 모바일 기준으로 (타이틀 18 / 내용 18 / 노트 14) */
    .rec-info-label {
        font-size: clamp(18px, 2vw, 20px);
        flex: 0 0 120px;
    }

    .rec-info-value {
        font-size: clamp(18px, 1.8vw, 18px);
    }

    .rec-info-note {
        font-size: clamp(14px, 1.5vw, 16px);
    }


    /* 태블릿: 높이 데스크탑(600)~모바일(560) 클램프 */
    .rec-faq-accordion {
        width: 100%;
        height: clamp(560px, 41.6667vw, 600px);
    }

    .rec-faq-q-text,
    .rec-faq-q-mark {
        font-size: clamp(18px, 2.2vw, 22px);
    }

    .rec-faq-a p {
        font-size: clamp(16px, 1.8vw, 20px);
    }

    .rec-btn {
        width: 260px;
        height: 60px;
        font-size: 18px;
    }
}


/* ══════════════════════════════════════
   채용절차 태블릿 (768 ~ 1439px) — 2+3 배치
   STEP1·2 윗줄 / 그룹(STEP3·4·화살표·최종합격) 아랫줄.
══════════════════════════════════════ */
@media (max-width: 1439px) {

    /* 태블릿부턴 1행 유지 안 함 → 2+3으로 줄바꿈 */
    .rec-process-list {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* 카드 — 모든 카드 동일 폭(clamp). 좁으면 글자가 접혀 길어지고, 넓으면 3장이 안 들어가므로
       아랫줄 3장이 들어가는 폭으로 스케일: 768→약191px, 1131px 이상→307px 고정.
       (3W + 화살표35 + 갭60 ≤ 컨테이너 를 만족) 높이는 행 내 stretch로 균등. */
    .rec-process-card {
        flex: 0 0 clamp(184px, calc(32vw - 55px), 307px);
        min-width: 0;
        min-height: 0;
        padding: 24px;
        border-radius: 20px;
    }

    /* 그룹 — 전체폭(100%) 차지해 무조건 아랫줄로 내려감 → 2+3 강제, 내부 3카드 중앙 정렬.
       ※ max-width를 주면 wrap 계산폭이 줄어 1행에 다 들어가버리므로 주지 않음 */
    .rec-process-group {
        display: flex;        /* base의 display:contents 복구 → 태블릿 2+3 유지 */
        flex: 0 0 100%;
        gap: 20px;
        justify-content: center;
    }

    .rec-process-group .rec-process-card {
        flex: 0 0 clamp(184px, calc(32vw - 55px), 307px);
    }

    /* 태블릿 텍스트 clamp — 상·하한만 지정, 중간은 vw 한 값 */
    .rec-process-step {
        font-size: clamp(16px, 1.4vw, 20px);
    }

    .rec-process-name {
        font-size: clamp(24px, 2.5vw, 36px);
    }

    /* 내용 — 3줄 확보(행간 1.6) + clamp 16~24 */
    .rec-process-desc {
        font-size: clamp(16px, 1.7vw, 24px);
        line-height: 1.6;
        min-height: 4.8em;
    }
}


/* ══════════════════════════════════════
   반응형 — 모바일 (~ 767px)
   GM frame: 360px, padding l=16 r=16
══════════════════════════════════════ */
@media (max-width: 767px) {

    /* GM: Page Header — pb=30, fs=30 */
    .rec-page-header {
        padding: 0;
        gap: 20px;
        align-items: center;
    }

    .rec-page-title {
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        height: 54px;
        margin-top: 20px;
        margin-bottom: 30px;
        line-height: 1.4;
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* GM: 도입 — sticky 해제, 텍스트 바로 표시 */
    .rec-intro-outer {
        min-height: unset;
    }

    .rec-intro-inner {
        position: relative;
        padding: 40px 16px 40px;
        gap: 24px;
    }

    .rec-intro-title {
        font-size: 24px;
        text-align: center;
        white-space: normal;
        word-break: keep-all;
        color: #E9E9E9;
        height: auto;
    }

    .rec-intro-title .char {
        color: #E9E9E9;
    }

    /* GM: image — w=328, h=448, radius=16 */
    .rec-intro-image-wrapper {
        width: 100%;
        height: 448px;
        border-radius: 16px;
    }

    /* 히어로 오버레이 텍스트 — 사회경영과 동일 (20px) */
    .rec-intro-desc {
        font-size: 18px; /* 검수 0722: 모바일 18px (지속가능경영과 통일) */
        width: 268px; /* 검수 0730: 이미지 내 텍스트 영역 좌우 너비 268px 고정 */
    }

    /* GM: 채용절차 — pt=40, pb=40, pl=16, pr=16, gap=20 */
    .rec-process-section {
        padding: 40px 16px;
        gap: 20px;
    }

    .rec-section-title {
        font-size: 30px;
    }

    /* GM: 리스트 — 세로 스택, gap 10 */
    .rec-process-list {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    /* GM: 그룹(STEP3·4·최종합격) — 세로 스택 */
    .rec-process-group {
        display: flex;        /* base의 display:contents 복구 → 모바일 세로 스택 유지 */
        flex: none;
        flex-direction: column;
        align-items: center;
        max-width: none;
        width: 100%;
        gap: 10px;
    }

    /* GM: 카드 — w328, p20, radius16, gap30, 상단 정렬 */
    .rec-process-card {
        flex: none;
        width: 100%;
        max-width: none;
        min-height: 0;
        padding: 20px;
        border-radius: 16px;
        gap: 30px;
        justify-content: flex-start;
    }

    .rec-process-group .rec-process-card {
        flex: none;
        width: 100%;
        max-width: none;
    }

    /* GM: 최종합격 — gap 40, 상단 정렬 */
    .rec-process-card--final {
        gap: 40px;
        justify-content: flex-start;
    }

    /* GM: icon — 32×32 */
    .rec-process-icon img {
        width: 32px;
        height: 32px;
    }

    /* GM: content gap 8 / info gap 20 */
    .rec-process-content {
        gap: 8px;
    }

    .rec-process-info {
        gap: 10px;
    }

    /* 검수(0713) 모바일: STEP 텍스트를 인디케이터 우측으로 (아이콘+STEP 한 줄, 제목·설명은 아래 전체폭).
       최종합격 카드는 STEP이 없어 제외. */
    .rec-process-card:not(.rec-process-card--final) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 40px 10px;   /* 검수(0713): row-gap 40(STEP줄↔제목=아래) / column-gap 10(인디케이터↔STEP) */
    }

    .rec-process-card:not(.rec-process-card--final) .rec-process-content {
        display: contents;   /* STEP·info를 카드 직속으로 풀어 한 줄 배치 */
    }

    .rec-process-card:not(.rec-process-card--final) .rec-process-info {
        flex: 0 0 100%;   /* 제목·설명은 다음 줄 전체폭 (간격은 base 20px 유지) */
    }

    /* GM: 내용 — <br> 강제 개행 공통 적용, 행간 1.6, #4E4E4E */
    .rec-process-desc {
        line-height: 1.6;
        min-height: 0;
        color: #4E4E4E;
    }

    /* 모바일: 강제개행(<br>) 무시하고 자연 줄바꿈 (데스크탑·태블릿은 유지) */
    .rec-process-desc br {
        display: none;
    }


    /* GM: 채용안내 — pt=40, pb=40, pl=16, pr=16, gap=20 */
    .rec-info-section {
        padding: 40px 16px;
        gap: 20px;
    }

    .rec-info-wrap {
        gap: 20px;
    }

    /* GM: contents — p=20, gap=20, border */
    .rec-info-contents {
        padding: 20px;
        gap: 20px;
        border-radius: 16px;
    }

    /* GM: row — vertical layout, gap=4 */
    .rec-info-row {
        flex-direction: column;
        gap: 4px;
    }

    /* GM: label — fs=18, fw=700 */
    .rec-info-label {
        font-size: 18px;
        font-weight: 700;
        flex: none;
    }

    /* GM: value — fs=18 */
    .rec-info-value {
        font-size: 18px;
        line-height: 32px;
    }

    .rec-info-value-wrap {
        gap: 4px;
    }

    .rec-info-note {
        font-size: 14px;
        height: 42px;
    }

    /* GM: btn — full width, h=56, fs=16 */
    /* GM: 이력서 다운로드 pill — 모바일 축소 */
    .rec-info-btn {
        font-size: 16px;
        padding: 8px 12px 8px 16px;
    }
    .rec-info-btn-ic {
        width: 18px;
        height: 18px;
    }

    /* GM: FAQ — pt=40, pb=40, pl=16, pr=16, gap=40, bg=#F8F9FB */
    .rec-faq-section {
        padding: 40px 16px;
        gap: 40px;
    }

    .rec-faq-section .rec-section-title {
        margin-bottom: 0;
    }

    /* 검수: 탭 행만 섹션 좌우 패딩(16px) 밖으로 빼서 스크롤 시 버튼이 잘리지 않게 */
    .rec-faq-tabs {
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        align-self: stretch;
        width: auto;
        margin: 0 -16px;
        padding: 0 16px;
        box-sizing: border-box;
        scrollbar-width: none;
    }

    .rec-faq-tabs::-webkit-scrollbar {
        display: none;
    }

    /* GM: tab — p=8/16, h=42, fs=16 */
    .rec-faq-tab {
        height: 42px;
        padding: 8px 16px;
        font-size: 16px;
        white-space: nowrap;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    /* GM: 전체, 기타 탭 — 60x42 (기타는 탭 추가로 6번째) */
    .rec-faq-tabs .rec-faq-tab:nth-child(1),
    .rec-faq-tabs .rec-faq-tab:nth-child(6) {
        width: 60px !important;
        height: 42px !important;
    }

    /* GM: 지원자격, 지원접수, 채용절차 탭 — 88x42 */
    .rec-faq-tabs .rec-faq-tab:nth-child(2),
    .rec-faq-tabs .rec-faq-tab:nth-child(3),
    .rec-faq-tabs .rec-faq-tab:nth-child(4) {
        width: 88px !important;
        height: 42px !important;
    }

    /* GM: accordion — gap=10, h=560 고정 + 스크롤 */
    .rec-faq-accordion {
        gap: 10px;
        height: 560px;
        padding-right: 8px;
    }

    /* GM: item — p=16, gap=16 */
    .rec-faq-q {
        width: 100%;
        height: 90px;
        padding: 16px;
        gap: 8px;
        box-sizing: border-box;
        align-items: flex-start;
    }

    /* GM: toggle button svg — 32x32 */
    .rec-faq-toggle svg {
        width: 32px;
        height: 32px;
    }

    /* GM: Q. / Q text — fs=18 */
    .rec-faq-q-mark {
        font-size: 18px;
        width: 18px;
        height: 29px;
        line-height: 1.6;
    }

    .sp-br {
        display: inline;
    }

    .rec-faq-q-text {
        font-size: 18px;
        height: 58px;
        line-height: 1.6;
        overflow: hidden;
    }

    .rec-faq-a {
        padding: 0 16px 16px 26px;
    }

    .rec-faq-a p {
        font-size: 16px;
        line-height: 1.6;
        color: #363636;
        box-sizing: border-box;
    }

    /* GM: btn section — p=20, gap=10 */
    .rec-btn-section {
        padding: 20px 20px;
        gap: 10px;
        margin-top: -10px;
    }

    /* GM: btn — w=155, h=56, fs=16 */
    .rec-btn {
        flex: 1;
        width: auto;
        height: 56px;
        font-size: 16px;
        border-radius: 8px;
    }
}

/* ── 태블릿: border-radius 30px → 20px ── */
@media (min-width: 768px) and (max-width: 1439px) {
    /* 도입 — 검수 0703: 태블릿 도입부 통일 (타이틀 최소 30px, 좌우 여백 20px) */
    .rec-intro-title { font-size: clamp(30px, 3.125vw, 60px); }
    .rec-intro-inner { padding-left: 20px; padding-right: 20px; }
    /* 히어로 오버레이 안쪽 좌우 여백 20px (사회/윤리 오버레이와 통일) */
    .rec-intro-overlay { padding: 20px; }

    .rec-intro-image-wrapper,
    .rec-info-contents {
        border-radius: 20px;
    }
}