/* ============================================================
   EAST ASIA — 랜딩(홈) 전용 스타일
   동영상 히어로 · 통계 카운터 · 카드 카루셀 · 스크롤 리빌
   ============================================================ */

/* ---------------- 공통 모션 ---------------- */

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.reveal.in { opacity: 1; transform: none; }

/* 그리드 안에서 순차 등장 */
.stagger > *:nth-child(1) { transition-delay: .00s; }
.stagger > *:nth-child(2) { transition-delay: .06s; }
.stagger > *:nth-child(3) { transition-delay: .12s; }
.stagger > *:nth-child(4) { transition-delay: .18s; }
.stagger > *:nth-child(5) { transition-delay: .24s; }
.stagger > *:nth-child(6) { transition-delay: .30s; }

/* ---------------- 메인 배너 히어로 ----------------
   worklink.kr 구조를 따른다.
     ① 배경  : 배너 이미지·영상이 히어로 전체를 덮는다 (여러 장이면 교차 전환)
     ② 문구  : 배너 제목·설명·버튼
     ③ 공고 띠: 모집중 공고 가로 슬라이드 — 구분선으로 ②와 분리
   ②③ 은 같은 배경 위에 얹히지만 서로 다른 블록이다. */

.banner-hero {
    position: relative;
    isolation: isolate;
    /* sticky 헤더가 배너 위에 겹치도록 끌어올린다 */
    margin-top: calc(var(--header-h) * -1);
    /* 배너 공간 바탕 — 등록된 배너 미디어와 공고 카드가 주인공이므로
       그림·패턴 없이 브랜드 그린만으로 깊이를 낸다.
         ① 가장자리 비네트   : 가운데 배너 카드로 시선을 모은다
         ② 라임/그린 글로우  : 팔레트(--accent, --primary-light)에서 뽑은 은은한 빛
         ③ 대각 딥그린 베이스: --primary-dark 계열로 아래로 갈수록 가라앉는다 */
    background:
        radial-gradient(124% 80% at 50% 40%, rgba(4, 16, 8, 0) 44%, rgba(4, 16, 8, .58) 100%),
        radial-gradient(62% 52% at 82% 6%, rgba(169, 206, 60, .18) 0%, rgba(169, 206, 60, 0) 62%),
        radial-gradient(58% 60% at 8% 94%, rgba(87, 165, 68, .20) 0%, rgba(87, 165, 68, 0) 66%),
        linear-gradient(158deg, #17501f 0%, #113a1a 46%, #0b2612 100%);
    color: #fff;
    overflow: hidden;
}

/* ① 배경 미디어 — 문구·공고 띠 뒤로 전체를 덮는다 */
.banner-track {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* 바탕은 히어로가 깔아 둔 그린 배경을 그대로 비춘다 (카드 안팎이 이어져 보이도록).
       미디어가 아직 안 뜬 순간에도 검은 사각형 대신 그린 배경이 보인다. */
    background: transparent;
}

.banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s var(--ease-out);
}

.banner-slide.on { opacity: 1; visibility: visible; }

.banner-slide video,
.banner-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-slide .slide-backdrop { display: none; }

/* 예전에 등록된 배너 이미지 중에는 가장자리 1~2px 이 어둡게 구워진 것이 있다.
   (GDI+ 축소 아티팩트 — 등록 로직은 고쳤지만 이미 저장된 파일은 그대로다.)
   카드는 overflow:hidden 이므로 아주 살짝 키워 그 줄을 카드 밖으로 밀어낸다.
   1% 확대는 눈에 띄지 않고, 새로 올린 깨끗한 이미지에도 해가 없다. */
.banner-slide:not(.fit-media) img.slide-media {
    transform: scale(1.01);
}

/* 현장 촬영 영상은 대체로 노출이 낮아 어둡게 보인다.
   위에 덮이는 가독성 그라데이션과 겹치면 더 가라앉으므로 재생 화면 자체를 끌어올린다. */
.banner-slide video.slide-media {
    filter: brightness(1.28) contrast(1.06) saturate(1.08);
}

/* ---- 카드 비율과 크게 다른 미디어 (세로 영상·16:9 영상 등) ----
   꽉 채우면 크게 잘리므로 비율을 지켜 통째로 넣고,
   남는 자리는 같은 화면을 흐리게 확대해 채운다. 판정은 home.js 가 하고 .fit-media 를 붙인다.
   PC 배치는 아래 미디어쿼리에서 따로 잡는다. */
.banner-slide.fit-media {
    /* 포스터가 아직 없는 배너는 히어로 그린 배경이 그대로 빈자리를 채운다 */
    background: transparent;
}

.banner-slide.fit-media .slide-backdrop {
    display: block;
    filter: blur(32px) saturate(1.25) brightness(.68);
    /* 흐림 처리로 비는 가장자리를 덮는다 */
    transform: scale(1.2);
}

/* 배너는 헤더 뒤까지 끌어올려져 있다(margin-top: -header-h).
   흐린 배경은 헤더 뒤까지 채우되, 실제로 보여줄 영상은 헤더 높이만큼 내려
   로고에 윗부분이 가리지 않게 한다. */
.banner-slide.fit-media .slide-media {
    object-fit: contain;
    top: var(--header-h);
    /* 높이도 같이 줄이지 않으면 상자가 카드 아래로 header-h 만큼 삐져나가
       영상 아랫부분이 그만큼 잘린다. */
    height: calc(100% - var(--header-h));
}

/* 가독성 오버레이 — 영상 화면을 통째로 누르지 않고 문구가 얹히는 아래쪽만 덮는다.
   위/가운데는 거의 손대지 않아야 영상이 원래 밝기로 보인다. */
.banner-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg, rgba(8, 30, 12, .30) 0%, rgba(10, 32, 14, .16) 46%, rgba(10, 32, 14, .04) 78%, rgba(10, 32, 14, .12) 100%),
        linear-gradient(to top, rgba(6, 20, 9, .88) 0%, rgba(6, 20, 9, .42) 26%, transparent 52%);
}

.banner-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    min-height: min(78svh, 600px);
    padding: calc(var(--header-h) + 26px) 0 20px;
}

/* ---- PC : 화면 끝까지 늘어난 띠 대신 가운데로 모은 카드 ----
   폭 전체를 덮으면 3.2:1 로 납작하게 늘어나 미디어가 크게 잘린다.
   배경 미디어를 본문 폭 카드로 모으고 바깥은 어두운 바탕만 둔다. */
@media (min-width: 900px) {
    /* 카드 아래에 남겨 둘 공간 (모집공고 띠 자리) */
    .banner-hero { --banner-strip: 196px; }

    .banner-body { min-height: 720px; padding-bottom: 26px; justify-content: flex-end; }

    .banner-track,
    .banner-hero::before {
        top: calc(var(--header-h) + 24px);
        bottom: var(--banner-strip);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        /* .container(max-width 1180 + 좌우 padding 16) 의 안쪽 폭과 정확히 같게 맞춘다.
           40px 로 두면 화면이 1180 보다 좁을 때 카드 모서리가 아래 공고 카드보다 4px 씩 들어간다. */
        width: min(1148px, calc(100% - 32px));
        border-radius: var(--radius-lg);
    }

    .banner-track {
        overflow: hidden;
        /* 그린 바탕 위에서 카드 경계가 흐려지지 않도록 얇은 밝은 테를 두른다 */
        box-shadow:
            0 30px 70px -28px rgba(0, 0, 0, .85),
            inset 0 0 0 1px rgba(255, 255, 255, .10);
    }

    /* 어둡게 덮는 그라데이션도 카드 안에서만 — 문구가 얹히는 아래쪽만 눌러 준다 */
    .banner-hero::before {
        background:
            linear-gradient(105deg, rgba(8, 30, 12, .22) 0%, rgba(10, 32, 14, .08) 52%, rgba(10, 32, 14, 0) 100%),
            linear-gradient(to top, rgba(6, 20, 9, .84) 0%, rgba(6, 20, 9, .3) 24%, transparent 48%);
    }

    /* 문구는 카드 안쪽 아래에 얹는다 */
    .banner-copy { margin-bottom: 30px; }

    /* ---- 통째로 보여줄 미디어 : 왼쪽에서 원래 비율로 재생, 오른쪽에 문구 ----
       세로 영상(9:16)부터 가로 영상(16:9)까지 비율이 제각각이라 크기를 직접 정하지 않는다.
       width·height 를 auto 로 두고 최대치만 걸면, 대체 요소(video·img)는 원본 비율을
       유지한 채 그 안에 들어간다. 상자가 미디어에 딱 맞아 여백(검은 띠)이 생기지 않는다.
       top/bottom 을 함께 걸면 대체 요소는 bottom 을 무시하고 원본 높이를 써서 넘치므로,
       세로 가운데 정렬은 transform 으로 한다. */
    .banner-slide.fit-media .slide-media {
        left: 46px;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        max-width: 44%;
        max-height: calc(100% - 52px);
        border-radius: var(--radius);
        box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .75);
    }

    /* 문구는 영상과 나눠 오른쪽 영역에 두고, 그 안에서 오른쪽 정렬한다.
       카드 가장자리에 붙지 않도록 왼쪽 영상 여백(46px)과 같은 여백을 오른쪽에도 둔다. */
    .banner-hero.has-fit-media .banner-copy {
        margin-bottom: 0;
        padding-bottom: 34px;
        padding-right: 62px;
    }

    /* 미디어가 최대 44% 를 쓰므로 문구는 나머지 안에서만 — 겹치지 않게 */
    .banner-hero.has-fit-media .banner-copy-item {
        width: min(46%, 520px);
        margin-left: auto;
        text-align: right;
    }

    .banner-hero.has-fit-media .banner-copy-item h2,
    .banner-hero.has-fit-media .banner-copy-item .lead {
        max-width: 100%;
        margin-left: auto;
    }

    .banner-hero.has-fit-media .banner-dots { justify-content: flex-end; }

    /* 세로 영상은 왼쪽에서 그대로 재생된다 — 영상 위는 덮지 않고 오른쪽 문구 쪽만 눌러 준다 */
    .banner-hero.has-fit-media::before {
        background:
            linear-gradient(90deg, rgba(8, 30, 12, 0) 0%, rgba(8, 30, 12, 0) 42%, rgba(6, 20, 9, .72) 100%),
            linear-gradient(to top, rgba(6, 20, 9, .42) 0%, transparent 34%);
    }
}

/* ② 배너 문구 */
.banner-copy { position: relative; }

.banner-copy-item {
    display: none;
    animation: banner-fade .5s var(--ease-out);
}

.banner-copy-item.on { display: block; }

@keyframes banner-fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.banner-copy-item h2 {
    color: #fff;
    font-size: clamp(1.375rem, 4.4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    margin: 0 0 10px;
    max-width: 22ch;
    /* 오버레이를 걷어낸 만큼 글자 자체의 그림자로 대비를 확보한다 */
    text-shadow: 0 2px 6px rgba(0, 0, 0, .72), 0 4px 20px rgba(0, 0, 0, .5);
}

.banner-copy-item .lead {
    font-size: clamp(.875rem, 2vw, 1.0625rem);
    color: rgba(255, 255, 255, .94);
    max-width: 42ch;
    margin: 0 0 16px;
    line-height: 1.6;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .7), 0 3px 16px rgba(0, 0, 0, .45);
}

/* 배너 인디케이터 */
.banner-dots { display: flex; gap: 7px; margin-top: 16px; }

.banner-dots button {
    width: 22px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    padding: 0;
    transition: background .25s var(--ease-out), width .25s var(--ease-out);
}

.banner-dots button.on { background: var(--accent, #e28e3a); width: 38px; }

/* ③ 모집중 공고 가로 슬라이드 */
.banner-jobs { position: relative; }

.banner-jobs-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.banner-jobs-head .rule { flex: 1; height: 1px; background: rgba(255, 255, 255, .28); }

.banner-jobs-head .label {
    flex: none;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .82);
}

.banner-jobs-wrap { position: relative; }

.banner-jobs-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.banner-jobs-track::-webkit-scrollbar { display: none; }

.mini-job {
    flex: none;
    width: min(72vw, 232px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 12px;
    /* 일러스트 배경 위에 놓이므로 어두운 바탕으로 대비를 준다 */
    background: rgba(11, 38, 20, .68);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    transition: background .18s var(--ease-out), transform .18s var(--ease-out);
}

.mini-job:hover { background: rgba(16, 54, 28, .82); transform: translateY(-2px); }

.mini-job .top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.mini-job .cat {
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: .6875rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .22);
}

.mini-job .dday {
    flex: none;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: .6875rem;
    font-weight: 800;
}

.mini-job .dday.on { background: #10b981; color: #fff; }
.mini-job .dday.off { background: #dc2626; color: #fff; }

.mini-job h3 {
    margin: 7px 0 0;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mini-job .meta {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .6875rem;
    color: rgba(255, 255, 255, .86);
}

.mini-job .meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-job .pay {
    margin-top: auto;
    padding-top: 9px;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.mini-job .pay strong { font-size: 1.0625rem; font-weight: 800; color: var(--accent-soft, #f5b87a); }
.mini-job .pay span { font-size: .6875rem; color: rgba(255, 255, 255, .78); }

.mini-job.closed { opacity: .62; }
.mini-job.closed h3 { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }

/* 좌우 이동 버튼 (데스크톱) */
.jobs-nav {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(0, 0, 0, .38);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.jobs-nav:hover { background: rgba(0, 0, 0, .6); }
.jobs-nav.prev { left: -14px; }
.jobs-nav.next { right: -14px; }

@media (min-width: 900px) {
    .jobs-nav { display: grid; place-items: center; }
    .mini-job { width: 236px; }
}

/* ---------------- 히어로 ---------------- */

.hero-v2 {
    position: relative;
    isolation: isolate;
    /* sticky 헤더 아래로 밀리지 않고 헤더가 히어로 위에 겹치도록 끌어올린다 */
    margin-top: calc(var(--header-h) * -1);
    min-height: min(88svh, 760px);
    display: flex;
    align-items: flex-end;
    padding: calc(var(--header-h) + 48px) 0 56px;
    overflow: hidden;
    background: #0d2411;
    color: #fff;
}

/* 배경 미디어 (동영상 또는 일러스트) */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-media video,
.hero-media img,
.hero-media object {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 배너가 없을 때 쓰는 기본 히어로도 같은 기준으로 — 영상이 죽지 않을 만큼만 덮는다 */
.hero-media video {
    filter: brightness(1.22) contrast(1.05) saturate(1.06);
}

/* 가독성 오버레이 — 문구가 놓이는 좌하단만 진하고 나머지는 열어 둔다 */
.hero-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(105deg, rgba(8, 30, 12, .62) 0%, rgba(12, 36, 16, .4) 42%, rgba(12, 36, 16, .1) 78%, rgba(12, 36, 16, .2) 100%),
        linear-gradient(to top, rgba(8, 30, 12, .82) 0%, transparent 42%);
}

.hero-inner { position: relative; width: 100%; }

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    margin-bottom: 18px;
}

.hero-eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .22);
    animation: pulse-dot 2.2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, .3); }
    50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
}

.hero-v2 h1 {
    color: #fff;
    font-size: clamp(2rem, 7.4vw, 4.25rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.035em;
    margin: 0 0 18px;
    max-width: 20ch;
}

.hero-v2 h1 .hl {
    background: linear-gradient(100deg, var(--accent-soft), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-v2 .lead {
    font-size: clamp(.9375rem, 2.4vw, 1.1875rem);
    color: rgba(255, 255, 255, .84);
    max-width: 40ch;
    margin: 0 0 28px;
    line-height: 1.65;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-cta .btn { flex: 1 1 150px; }

@media (min-width: 640px) {
    .hero-cta .btn { flex: none; min-width: 170px; }
}

/* 영상안내 버튼 (유리 재질) */
.btn-glass {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .38);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-glass:hover { background: rgba(255, 255, 255, .2); color: #fff; }

.btn-glass .play {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    flex: none;
}

.btn-glass .play::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid #fff;
    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;
    margin-left: 2px;
}

/* 히어로 하단 지표 바 */
.hero-stats {
    margin-top: 36px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .16);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
}

@media (min-width: 720px) {
    .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.hero-stats .num {
    font-size: clamp(1.5rem, 4.6vw, 2.125rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.hero-stats .num small {
    font-size: .875rem;
    font-weight: 700;
    color: var(--accent-soft);
    margin-left: 2px;
}

.hero-stats .cap {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .62);
    font-weight: 600;
    margin-top: 2px;
}

/* 스크롤 유도 */
.hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 14px;
    display: none;
}

.hero-scroll::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--accent-soft);
    animation: scroll-hint 1.8s ease-in-out infinite;
}

@keyframes scroll-hint {
    0%, 100% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(14px); opacity: 0; }
}

@media (min-width: 900px) {
    .hero-scroll { display: block; }
}

/* ---------------- 섹션 헤딩 ---------------- */

.sec-head { margin-bottom: 22px; }

.sec-head .kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--accent-dark);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.sec-head .kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
}

.sec-head h2 {
    font-size: clamp(1.375rem, 4.4vw, 2.125rem);
    margin: 0 0 6px;
    letter-spacing: -.03em;
}

.sec-head p { color: var(--muted); margin: 0; font-size: .9375rem; }

.sec-head.row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---------------- 직종 바로가기 타일 ---------------- */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.cat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    font-size: .875rem;
    font-weight: 700;
    color: var(--fg);
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
                border-color .2s, background .2s;
}

.cat-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(169, 206, 60, .55);
    box-shadow: var(--shadow);
    color: var(--accent-dark);
}

.cat-tile .ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(46, 139, 51, .1), rgba(169, 206, 60, .16));
    font-size: 1.25rem;
}

/* ---------------- 카루셀 ---------------- */

.carousel { position: relative; }

.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 4px 14px;
    margin: -4px -4px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }

@media (min-width: 640px) { .carousel-track { grid-auto-columns: 46%; } }
@media (min-width: 1000px) { .carousel-track { grid-auto-columns: 31.5%; } }

.carousel-nav { display: none; gap: 8px; }

.carousel-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--fg);
    font-size: 1.125rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color .2s, color .2s, box-shadow .2s;
}

.carousel-nav button:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); }
.carousel-nav button:disabled { opacity: .35; cursor: default; }

@media (min-width: 900px) { .carousel-nav { display: flex; } }

/* ---------------- 이용 절차 (스텝) ---------------- */

.steps {
    display: grid;
    gap: 14px;
    counter-reset: step;
}

@media (min-width: 760px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 18px 20px;
    box-shadow: var(--shadow-sm);
}

.step::before {
    counter-increment: step;
    content: "0" counter(step);
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 1.75rem;
    font-weight: 800;
    color: rgba(46, 139, 51, .1);
    letter-spacing: -.04em;
}

.step .ico {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.375rem;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: #fff;
    margin-bottom: 12px;
}

.step h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.step p { color: var(--muted); font-size: .875rem; margin: 0; }

/* ---------------- 기능 소개 (2단 미디어) ---------------- */

.feature {
    display: grid;
    gap: 20px;
    align-items: center;
}

@media (min-width: 900px) {
    .feature { grid-template-columns: 1.05fr .95fr; gap: 44px; }
    .feature.flip > .feature-media { order: 2; }
}

.feature-media {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(140deg, var(--primary), #0F2B14);
    aspect-ratio: 16 / 11;
}

.feature-media img,
.feature-media video,
.feature-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.feature-copy h2 {
    font-size: clamp(1.375rem, 4vw, 2rem);
    margin-bottom: 12px;
}

.feature-copy p { color: var(--muted); margin-bottom: 16px; }

/* QR 데모 목업 */
.qr-mock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.qr-phone {
    width: min(210px, 52%);
    aspect-ratio: 9 / 18.5;
    background: #0d2411;
    border: 6px solid #2F5F33;
    border-radius: 26px;
    box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .6);
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.qr-phone .cam {
    width: 46px;
    height: 5px;
    border-radius: 3px;
    background: #2F5F33;
    flex: none;
}

.qr-phone .frame {
    width: 78%;
    aspect-ratio: 1;
    border: 3px solid rgba(255, 255, 255, .8);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .05);
}

.qr-phone .frame::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--accent);
    box-shadow: 0 0 12px 2px rgba(169, 206, 60, .8);
    animation: qr-scan 2.4s ease-in-out infinite;
}

@keyframes qr-scan {
    0%, 100% { top: 4%; }
    50% { top: 94%; }
}

.qr-phone .chip {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(5, 150, 105, .22);
    border: 1px solid rgba(74, 222, 128, .5);
    color: #86efac;
    font-size: .6875rem;
    font-weight: 800;
}

/* ---------------- 최종 CTA ---------------- */

.cta-v2 {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 34px 24px;
    background: linear-gradient(125deg, var(--primary-dark) 0%, var(--primary) 55%, #24557f 100%);
    color: #fff;
    box-shadow: var(--shadow-lg);
    display: grid;
    gap: 18px;
}

.cta-v2::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(169, 206, 60, .35), transparent 68%);
}

.cta-v2 h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.25rem, 4vw, 1.875rem); }
.cta-v2 p { color: rgba(255, 255, 255, .78); margin: 0; font-size: .9375rem; }
.cta-v2 .actions { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.cta-v2 .actions .btn { flex: 1 1 150px; }

@media (min-width: 840px) {
    .cta-v2 { grid-template-columns: 1fr auto; align-items: center; padding: 40px 44px; }
    .cta-v2 .actions .btn { flex: none; min-width: 160px; }
}

/* ---------------- 고객센터 카드 ---------------- */

.contact-card {
    display: grid;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 760px) {
    .contact-card { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
}

.contact-card .tel {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* ---------------- 영상 모달 ---------------- */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(6, 16, 28, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.video-modal[open], .video-modal.show { display: grid; }

.video-modal .box {
    position: relative;
    width: min(960px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.video-modal iframe,
.video-modal video { width: 100%; height: 100%; border: 0; display: block; }

.video-modal .close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.125rem;
    cursor: pointer;
}

.video-modal .close:hover { background: rgba(255, 255, 255, .24); }

/* .badge-glass 는 공고 목록·상세에서도 쓰므로 site.css 로 옮겼다 */

/* ---------------- 로고 띠 (신뢰 요소) ---------------- */

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: .875rem;
    font-weight: 700;
}

.trust-strip span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------------- 회사소개 (/about) ---------------- */

/* 사업 철학 인용구 */
.quote-lead {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--primary-dark);
    line-height: 1.5;
    margin: 0 0 12px;
    padding-left: 14px;
    border-left: 4px solid var(--accent);
}

/* 사업 영역 — 핵심 사업 / 부대 사업 */
.biz-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.biz-block {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-sm);
}

.biz-no {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 10px;
}

.biz-head {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    padding: 18px 16px;
    border-radius: var(--radius-lg);
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.biz-head.core { background: var(--primary-dark); }
.biz-head.sub { background: var(--primary-light); }

.biz-items {
    list-style: none;
    margin: 14px 0 0;
    padding: 0 0 0 14px;
    border-left: 2px solid var(--border);
}

.biz-items li {
    position: relative;
    padding: 7px 0 7px 14px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--text);
}

.biz-items li::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    width: 14px;
    height: 2px;
    background: var(--border);
}

.biz-items li::after {
    content: "";
    position: absolute;
    left: 0;
    top: calc(50% - 3px);
    width: 6px;
    height: 6px;
    background: var(--primary);
}

/* 사업 조직도 */
.org-chart { text-align: center; }

.org-top {
    display: inline-block;
    padding: 11px 26px;
    border: 2px solid var(--primary);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--fg);
    font-weight: 800;
    font-size: 1rem;
}

/* 재무 회계 본부 ↔ 본부 줄을 잇는 세로선 */
.org-stem {
    width: 2px;
    height: 20px;
    margin: 0 auto;
    background: var(--border);
}

.org-divisions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    position: relative;
    padding-top: 16px;
    border-top: 2px solid var(--border);
}

.org-div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.org-div-head {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    background: var(--primary);
    color: var(--primary-fg);
    font-weight: 800;
    font-size: .9688rem;
}

.org-teams {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.org-team {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: .9063rem;
    font-weight: 700;
}

/* 근로자 소통센터 — 조직도에서 강조하는 조직 */
.org-team.on {
    border-color: var(--accent-dark);
    background: var(--accent-soft);
    color: var(--fg);
}

/* 비전 */
.vision-card {
    padding: 26px 22px;
    border-radius: var(--radius-lg);
    background: var(--primary-dark);
    color: var(--primary-fg);
    text-align: center;
}

.vision-card .kicker {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--accent-soft);
    margin-bottom: 12px;
}

.vision-card p { margin: 0 0 8px; line-height: 1.7; }
.vision-card strong { color: #fff; }

.vision-goal {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5;
    margin-top: 14px !important;
}

.vision-goal .hl { color: var(--accent); }

.vision-tail {
    font-size: .9375rem;
    color: rgba(245, 250, 243, .82);
    margin-bottom: 0 !important;
}

@media (min-width: 640px) {
    .biz-grid { grid-template-columns: 1fr 1fr; }
    .vision-card { padding: 34px 30px; }
    .vision-goal { font-size: 1.5rem; }
}

@media (min-width: 900px) {
    .org-divisions { grid-template-columns: repeat(3, 1fr); }
    .quote-lead { font-size: 1.25rem; }
}

/* ---------------- 회사소개 히어로 (영상) ---------------- */

.about-hero {
    min-height: min(58svh, 500px);
    /* 영상·소리 버튼이 함께 쓰는 기준 위치 */
    --intro-right: 16px;
    --intro-bottom: 16px;
}

/* 모바일 — 메인 배너처럼 영상이 배경으로 깔린다 (오버레이 아래) */
.about-hero .hero-intro {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: -2;
}

/* 영상이 배경을 맡으므로 기본 아트워크는 감춘다 */
.about-hero .hero-scene { display: none; }

/* 소리 켜기 / 끄기 */
.intro-sound {
    position: absolute;
    right: calc(var(--intro-right) + 12px);
    bottom: calc(var(--intro-bottom) + 12px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(10, 24, 12, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}

.intro-sound:hover { background: rgba(10, 24, 12, .78); border-color: rgba(255, 255, 255, .5); }

@media (min-width: 900px) {
    /* 오른쪽 영상이 들어갈 높이를 확보한다 */
    .about-hero {
        min-height: 560px;
        /* 오른쪽 끝을 헤더 버튼(로그인·에이전시 등록)과 같은 선에 맞춘다 */
        --intro-right: max(16px, calc((100% - 1180px) / 2 + 16px));
        /* 아래쪽 끝은 왼쪽 문구의 아래 선과 맞춘다 (히어로 아래 여백과 동일) */
        --intro-bottom: 56px;
    }

    .about-hero .hero-scene { display: block; }

    .about-hero .hero-intro {
        inset: auto;
        top: auto;
        left: auto;
        right: var(--intro-right);
        bottom: var(--intro-bottom);
        width: min(46%, 520px);
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-lg);
        border: 1px solid rgba(255, 255, 255, .18);
        box-shadow: 0 28px 64px -22px rgba(0, 0, 0, .82);
        /* 어둡게 덮는 오버레이(z-index -1) 위로 올려 선명하게 재생한다 */
        z-index: 1;
    }

    /* 문구는 영상과 겹치지 않도록 왼쪽 절반만 쓴다 */
    .about-hero .hero-inner h1,
    .about-hero .hero-inner .lead { max-width: 48%; }
}