/* ==========================================================================
   장애인일자리센터 KRDS 테마 — 사이트 전용 스타일
   KRDS 토큰/공통/컴포넌트 CSS 위에 얹는 커스텀 레이어.
   1rem = 10px (KRDS html font-size 62.5%)
   ========================================================================== */

/* ── 글꼴: Pretendard GOV (KRDS 표준 서체) ── */
@font-face {
    font-family: "Pretendard GOV";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/PretendardGOV-Regular.subset.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard GOV";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/PretendardGOV-Medium.subset.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard GOV";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/PretendardGOV-Bold.subset.woff2") format("woff2");
}

/* ── 브랜드 컬러: KRDS 프라이머리 스케일을 #1B4F8C 기준으로 오버라이드 ── */
:root {
    --krds-color-light-primary-5: #edf3f9;
    --krds-color-light-primary-10: #d7e4f2;
    --krds-color-light-primary-20: #afc9e5;
    --krds-color-light-primary-30: #87aed8;
    --krds-color-light-primary-40: #5f93c8;
    --krds-color-light-primary-50: #2e6bab;
    --krds-color-light-primary-60: #1b4f8c; /* 브랜드 기준색 */
    --krds-color-light-primary-70: #153e6e;
    --krds-color-light-primary-80: #0f2c4f;
    --krds-color-light-primary-90: #091b30;
    --krds-color-light-primary-95: #061221;
}

/* ── 그누보드 공용: 스크린리더 전용 텍스트 ── */
.sound_only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* ── 헤더 커스텀 ── */
.header-utility .util-info {
    display: inline-flex;
    align-items: center;
    font-size: var(--krds-pc-font-size-body-small, 1.5rem);
    color: var(--krds-light-color-text-subtle, #464c53);
}
.header-utility .util-info strong {
    margin-left: 0.4rem;
    color: var(--krds-color-light-primary-60);
}
.util-info-item {
    display: inline-flex;
    align-items: center;
}
/* KRDS 기본값이 align-items:flex-start 라, 높이가 서로 다른 항목(대표번호·업무시간
   텍스트 vs 화면크기 버튼 2.6rem)이 섞이면 텍스트만 위로 붙어 보인다.
   유틸리티 바 전체를 세로 가운데로 통일한다. */
#krds-header .header-utility,
#krds-header .header-utility .utility-list,
#krds-header .header-utility .utility-list > li {
    align-items: center;
}
@media (max-width: 767px) {
    .util-info-item {
        display: none;
    }
}

/* 헤더 상단: 유틸리티 바(대표번호·시간·화면크기)를 로고와 같은 줄에 배치해
   세로 공간을 줄임 (기존엔 flex-direction:column 으로 위아래 2줄이었음) */
@media (min-width: 1024px) {
    #krds-header .header-container .inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #krds-header .header-container .header-branding {
        order: 1;
    }
    #krds-header .header-utility {
        order: 2;
    }
}

/* 화면 크기 +/- 버튼 (드롭박스 옆) */
.util-resize-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.6rem;
}
.jc-resize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.4rem;
    background: #fff;
    color: var(--krds-light-color-text-basic, #1e2124);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.jc-resize-btn:hover {
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
    color: var(--krds-color-light-primary-60, #1b4f8c);
}
/* 원래 크기(100%)로 되돌리기 — 텍스트 버튼이라 정사각형이 아닌 가변 폭 */
.jc-resize-btn.jc-resize-reset {
    width: auto;
    padding: 0 0.7rem;
    font-size: 1.2rem;
    letter-spacing: -0.03rem;
}
@media (max-width: 767px) {
    .util-resize-step {
        display: none;
    }
}

/* GNB 우측 통합검색 버튼 */
.jc-gnb-inner {
    display: flex;
    align-items: stretch;
}
.jc-gnb-sch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    padding: 0 1.6rem;
    height: var(--krds-main-menu--main-trigger-size-height, var(--krds-size-height-8));
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}
.jc-gnb-sch-btn::before {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    background-color: currentColor;
    -webkit-mask: url("../img/component/icon/ico_sch.svg") center / contain no-repeat;
    mask: url("../img/component/icon/ico_sch.svg") center / contain no-repeat;
    flex-shrink: 0;
}
.jc-gnb-sch-btn:hover {
    color: var(--krds-color-light-primary-60, #1b4f8c);
}
@media (max-width: 1023px) {
    .jc-gnb-sch-btn {
        display: none;
    }
}

#krds-header .header-container .logo {
    width: auto;
    height: auto;
}
/* 실제 로고 이미지 (평소 컬러). 최상단 홈에서는 흰색으로 스왑 */
#krds-header .header-container .logo a.logo-link {
    display: block;
    width: 27rem;
    height: 4rem;
    background: url("/img/logo.svg") left center / contain no-repeat;
    text-decoration: none;
}
@media (max-width: 767px) {
.is-home #wrap:not([class*="scroll"]) #krds-header .logo a.logo-link {
    background-image: url("/img/m_logo-white.svg") !important;
}

    #krds-header .header-container .logo a.logo-link {
        width: 16rem;
        height: 3.2rem;
        background-image: url("/img/logo-mobile.svg");
    }
}

/* 통합검색 레이어 */
.hd-search {
    border-top: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    background: var(--krds-light-color-background-white, #fff);
    padding: 2rem 0;
}
.hd-search form {
    display: flex;
    gap: 0.8rem;
    max-width: 64rem;
    margin: 0 auto;
}
.hd-search .krds-input {
    flex: 1;
}

/* ── 메인 비주얼 ── */
.main-visual .swiper-slide {
    min-height: 32rem;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.main-visual .swiper-slide.visual-pos--top {
    align-items: flex-start;
    padding-top: 5rem;
}
.main-visual .swiper-slide.visual-pos--bottom {
    align-items: flex-end;
    padding-bottom: 5rem;
}
.main-visual .visual-desc p {
    margin: 0 0 0.6em;
}
.main-visual .visual-desc p:last-child {
    margin-bottom: 0;
}
.main-visual .visual-inner {
    width: 100%;
}
.main-visual .visual-tag {
    margin-bottom: 1.2rem;
}
.main-visual .visual-title {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0.8rem 0;
    max-width: 72rem;
}
.main-visual .visual-desc {
    font-size: 1.7rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 64rem;
}
.main-visual .visual-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    position: relative;
}
.main-visual .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    gap: 0.6rem;
}
.main-visual .swiper-pagination-bullet {
    width: 1rem;
    height: 1rem;
    background: var(--krds-light-color-border-gray, #cdd1d5);
    opacity: 1;
    margin: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.main-visual .swiper-pagination-bullet-active {
    background: var(--krds-color-light-primary-60);
    width: 2.4rem;
    border-radius: 0.5rem;
}
.main-visual .visual-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.main-visual .visual-pause .pause-ico {
    font-size: 1.1rem;
    line-height: 1;
}
.visual-slide--image .visual-inner,
.visual-slide--video .visual-inner {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.visual-video-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.visual-video-wrap iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;   /* 16:9 컨테이너에 16:9 영상 꽉 채움(좌우 여백 제거) */
    transform: translate(-50%, -50%);
    border: 0;
}

/* ── 빠른 메뉴 ── */
.main-quick {
    padding: 3.2rem 0;
}
.quick-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.quick-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1.2rem;
    border: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    border-radius: 1.2rem;
    text-decoration: none;
    color: var(--krds-light-color-text-basic, #1e2124);
    font-size: 1.5rem;
    font-weight: 500;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.quick-link:hover,
.quick-link:focus {
    border-color: var(--krds-color-light-primary-60);
    box-shadow: 0 0.2rem 0.8rem rgba(27, 79, 140, 0.15);
}
.quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 50%;
    background: var(--krds-color-light-primary-5);
    color: var(--krds-color-light-primary-60);
}
@media (max-width: 1023px) {
    .quick-list {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 599px) {
    .quick-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── 섹션 공통 ── */
.main-jobs,
.main-board {
    padding: 3.2rem 0;
}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}
.section-title {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
    padding-left: 1.2rem;
    border-left: 0.4rem solid var(--krds-color-light-primary-60);
}

/* ── 표 (구인공고 등) ── */
.jc-table-wrap {
    overflow-x: auto;
}
.jc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.5rem;
    border-top: 2px solid var(--krds-color-light-primary-60);
}
.jc-table th {
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    text-align: left;
    font-weight: 700;
    white-space: nowrap;
}
.jc-table td {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
}
/* 구인 제목이 '눌러야 하는 곳'임을 알 수 있도록 굵게 + 링크색으로 강조
   (어디를 눌러야 하는지 모르겠다는 이용자 문의 반영) */
.jc-table .td-subject a {
    color: var(--krds-color-light-primary-60, #1b4f8c);
    font-weight: 700;
    text-decoration: none;
}
.jc-table .td-subject a:hover,
.jc-table .td-subject a:focus {
    text-decoration: underline;
}
.jc-empty {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--krds-light-color-text-subtle, #464c53);
    border: 1px dashed var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 1.2rem;
}
.jc-empty p {
    margin-bottom: 1.2rem;
}

/* ── 공지/소식 2단 ── */
.main-board-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}
@media (max-width: 1023px) {
    .main-board-grid {
        grid-template-columns: 1fr;
    }
}

.jc-latest {
    list-style: none;
    margin: 0;
    padding: 0;
}
.jc-latest li {
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
}
.jc-latest a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.3rem 0.4rem;
    text-decoration: none;
    color: var(--krds-light-color-text-basic, #1e2124);
    font-size: 1.6rem;
}
.jc-latest a:hover .jc-latest-subject,
.jc-latest a:focus .jc-latest-subject {
    text-decoration: underline;
    color: var(--krds-color-light-primary-60);
}
.jc-latest-subject {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jc-latest-date {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.jc-latest-empty {
    padding: 3rem 0;
    text-align: center;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.krds-badge-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--krds-light-color-danger, #de3412);
    vertical-align: middle;
}

/* ── 센터 소개 띠 ── */
.main-about {
    padding: 3.2rem 0 6.4rem;
}
.about-card {
    background: var(--krds-color-light-primary-5);
    border-radius: 1.6rem;
    padding: 4rem;
}
.about-title {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: var(--krds-color-light-primary-70);
}
.about-desc {
    font-size: 1.6rem;
    line-height: 1.7;
    max-width: 64rem;
    margin-bottom: 2rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.about-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── bbs 콘텐츠 래퍼 ── */
.bbs-content {
    padding-top: 3.2rem;
    padding-bottom: 6.4rem;
}

/* ── 그누보드 공용 버튼 → KRDS 버튼 룩 매핑 ── */
.btn_b01,
.btn_b02,
.btn_b03,
.btn_admin,
.btn_submit,
.btn_cancel,
.btn_frmline,
.btn_confirm a,
a.btn_b01,
a.btn_b02,
a.btn_admin,
a.btn_cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 4rem;
    padding: 0 1.6rem;
    border-radius: 0.6rem;
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    vertical-align: middle;
}
.btn_submit {
    background: var(--krds-color-light-primary-60);
    color: #fff;
    border-color: var(--krds-color-light-primary-60);
}
.btn_submit:hover,
.btn_submit:focus {
    background: var(--krds-color-light-primary-70);
}
.btn_b01,
a.btn_b01,
.btn_cancel,
a.btn_cancel,
.btn_frmline {
    background: #fff;
    color: var(--krds-light-color-text-basic, #1e2124);
    border-color: var(--krds-light-color-border-gray, #cdd1d5);
}
.btn_b01:hover,
.btn_cancel:hover,
.btn_frmline:hover {
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
}
.btn_b02,
a.btn_b02 {
    background: var(--krds-color-light-primary-5);
    color: var(--krds-color-light-primary-60);
    border-color: var(--krds-color-light-primary-20);
}
.btn_b02:hover,
.btn_b02:focus {
    background: var(--krds-color-light-primary-10);
}
.btn_admin,
a.btn_admin {
    background: var(--krds-light-color-text-subtle, #464c53);
    color: #fff;
}

/* ── 그누보드 공용 입력 ── */
.frm_input,
.bbs-content input[type="text"],
.bbs-content input[type="password"],
.bbs-content input[type="email"],
.bbs-content select {
    min-height: 4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.6rem;
    font-size: 1.5rem;
    font-family: inherit;
}
.frm_input:focus,
.bbs-content textarea:focus {
    outline: 2px solid var(--krds-color-light-primary-60);
    outline-offset: 1px;
}
.bbs-content textarea {
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.6rem;
    font-size: 1.5rem;
    font-family: inherit;
}

/* ── 그누보드 페이징 ── */
.pg_wrap {
    display: block;
    text-align: center;
    padding: 2.4rem 0;
}
.pg {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}
.pg_page,
.pg_current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 0.8rem;
    border-radius: 0.6rem;
    font-size: 1.5rem;
    text-decoration: none;
    color: var(--krds-light-color-text-basic, #1e2124);
    background: transparent;
}
.pg_page:hover,
.pg_page:focus {
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
}
.pg_current {
    background: var(--krds-color-light-primary-60);
    color: #fff;
    font-weight: 700;
}

/* ── 푸터 커스텀 ── */
#krds-footer .f-logo {
    width: auto;
    height: auto;
    background-image: none; /* KRDS 기본 로고 제거 — 사이트 로고 이미지 사용 */
}
#krds-footer .f-logo-img {
    height: 3.6rem;
    width: auto;
    max-width: 100%;
}
/* ══════════════════════════════════════════════════════════════
   기관 로고 — 관리자 선택(기본 / 업로드 이미지 / 서울시로고+기관명)
   custom 모드에서는 배경이미지 로고를 끄고 실제 <img>·텍스트를 쓴다.
   ══════════════════════════════════════════════════════════════ */
#krds-header .logo.logo--custom a.logo-link,
.is-home #wrap:not([class*="scroll"]) #krds-header .logo.logo--custom a.logo-link {
    background-image: none !important;
    width: auto !important;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    text-indent: 0;
}
.jc-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    line-height: 1;
}
/* 업로드 이미지 로고 */
.jc-logo--img img {
    display: block;
    width: auto;
    max-width: 100%;
}
.jc-logo--header.jc-logo--img img { height: 3.6rem; }
.jc-logo--footer.jc-logo--img img { height: 3.6rem; }
/* 서울시 로고 + 기관명 */
.jc-logo--seoul img {
    display: block;
    width: auto;
    flex: 0 0 auto;
}
.jc-logo--header.jc-logo--seoul img { height: 3.2rem; }
.jc-logo--footer.jc-logo--seoul img { height: 3rem; }
.jc-logo-txt {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.03rem;
    white-space: nowrap;
    color: var(--krds-light-color-text-basic, #1e2124);
}
/* 푸터 배경은 어두운 색이 아니라 연회색(#f4f5f6)이므로 흰 글씨는 보이지 않는다.
   본문과 같은 진한 글자색 사용 (대비 14.8:1) */
.jc-logo--footer .jc-logo-txt {
    font-size: 1.7rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
/* 홈 상단(투명 헤더가 아닌 솔리드 헤더)에서도 글자색 유지 */
.is-home #wrap:not([class*="scroll"]) .jc-logo-txt {
    color: var(--krds-light-color-text-basic, #1e2124);
}
@media (max-width: 767px) {
    .jc-logo--header.jc-logo--img img,
    .jc-logo--header.jc-logo--seoul img { height: 2.8rem; }
    .jc-logo-txt { font-size: 1.5rem; white-space: normal; }
}

/* ── 헤더 '쉬운 화면' 진입 버튼 ── */
.jc-easy-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 1rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 999px;
    font-size: 1.3rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.jc-easy-link:hover,
.jc-easy-link:focus {
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
    color: var(--krds-color-light-primary-60, #1b4f8c);
}

/* ── 푸터 SNS: 브랜드 아이콘 버튼 (텍스트 라벨은 스크린리더 전용으로 숨김) ── */
#krds-footer .link-sns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
#krds-footer .link-sns a.jc-sns-btn {
    width: 4rem;
    height: 4rem;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 1rem;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
#krds-footer .link-sns a.jc-sns-btn::before,
#krds-footer .link-sns a.jc-sns-btn::after {
    display: none !important;
    content: none !important;
}
#krds-footer .link-sns a.jc-sns-btn:hover,
#krds-footer .link-sns a.jc-sns-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
#krds-footer .link-sns a.sns-kakao     { background-image: url("/img/sns/kakao.svg"); }
#krds-footer .link-sns a.sns-naver     { background-image: url("/img/sns/naver.svg"); }
#krds-footer .link-sns a.sns-instagram { background-image: url("/img/sns/instagram.svg"); }
#krds-footer .link-sns a.sns-facebook  { background-image: url("/img/sns/facebook.svg"); }
#krds-footer .link-sns a.sns-mail      { background-image: url("/img/sns/mail.svg"); }
#krds-footer .link-sns .sns-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
#krds-footer .f-btm .f-btm-text .f-copy-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: right;
}
#krds-footer .f-btm .f-btm-text .f-copy {
    margin: 0;
}
#krds-footer .f-btm .f-btm-text .f-credit {
    font-size: var(--krds-pc-font-size-body-small, 1.3rem);
    color: var(--krds-light-color-text-subtle, #767676);
    margin: 0;
}
#krds-footer .f-btm .f-btm-text .f-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#krds-footer .f-btm .f-btm-text .f-credit a:hover {
    color: var(--krds-color-light-primary-60, #1B4F8C);
}
@media (max-width: 767px) {
    #krds-footer .f-btm .f-btm-text .f-copy-group {
        text-align: left;
        width: 100%;
    }
}

/* ── 푸터 패밀리사이트 (고정 링크 + 구별 일자리센터 드롭다운) ── */
#krds-footer .foot-quick {
    position: relative;
}
/* quick-bar를 그리드로: 모바일 1열 → 태블릿 3열(3줄) → PC 4열(2줄) */
#krds-footer .foot-quick .inner {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
}
@media (min-width: 768px) {
    #krds-footer .foot-quick .inner {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1024px) {
    #krds-footer .foot-quick .inner {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* 여러 줄에서도 셀 경계가 깔끔하도록 아래쪽 라인 추가 */
#krds-footer .foot-quick .inner > .link {
    border-bottom: var(--krds-light-border-width-static-regular) solid
        var(--krds-light-color-border-gray-light);
}
#krds-footer .foot-quick .inner > .link:first-child {
    border-left: 0;
}
@media (max-width: 767px) {
    #krds-footer .foot-quick .inner > .link {
        border-right: 0;
    }
}
/* '구별 일자리센터' 토글 버튼 — button 기본 스타일 초기화(.link 스타일은 유지) */
#krds-footer .foot-family-btn {
    border-top: 0;
    border-left: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
/* 드롭다운 패널 — quick-bar 위쪽으로 열림 */
#krds-footer .foot-family-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    z-index: 100;
    max-height: 42rem;
    overflow-y: auto;
    padding: 2rem 0;
    background: var(--krds-light-color-background-white, #fff);
    border-top: var(--krds-light-border-width-static-regular, 1px) solid
        var(--krds-light-color-border-gray-light, #dce0e5);
    box-shadow: 0 -0.4rem 1.6rem rgba(0, 0, 0, 0.12);
}
#krds-footer .foot-family-list[hidden] {
    display: none;
}
#krds-footer .foot-family-list ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.4rem 1.6rem;
}
#krds-footer .foot-family-list a {
    display: block;
    padding: 0.8rem 1rem;
    font-size: 1.5rem;
    color: var(--krds-light-color-text-basic, #1e2124);
    text-decoration: none;
    border-radius: 0.4rem;
}
#krds-footer .foot-family-list a:hover,
#krds-footer .foot-family-list a:focus {
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    text-decoration: underline;
}
@media (max-width: 767px) {
    #krds-footer .foot-family-list {
        position: static;
        max-height: none;
        box-shadow: none;
        padding: 1.2rem 0;
    }
}

/* ── 접근성: 포커스 가시성 보강 ── */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--krds-color-light-primary-60);
    outline-offset: 2px;
}
#container:focus {
    outline: none;
}

/* ========================================================
   구인공고 (job.php) — 목록 + 상세
   ======================================================== */
.jc-job {
    padding-bottom: 6.4rem;
}
.jc-job .container {
    max-width: 108rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/* 브레드크럼 */
.jc-breadcrumb {
    padding: 2.4rem 0 0.8rem;
}
.jc-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.4rem;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.jc-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.jc-breadcrumb li + li::before {
    content: "›";
    color: var(--krds-light-color-text-disabled, #8a949e);
}
.jc-breadcrumb a {
    color: inherit;
    text-decoration: none;
}
.jc-breadcrumb a:hover {
    color: var(--krds-color-light-primary-60);
    text-decoration: underline;
}
.jc-breadcrumb [aria-current="page"] {
    color: var(--krds-light-color-text-basic, #1e2124);
    font-weight: 600;
}

/* 페이지 헤더 */
.jc-job-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 1.6rem 0 2.4rem;
}
.jc-job-h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
    margin: 0;
}
.jc-job-actions {
    display: flex;
    gap: 0.8rem;
}

/* 요약 카드 */
.jc-job-card {
    border: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    border-radius: 1.6rem;
    padding: 3.2rem;
    margin-bottom: 3.2rem;
}
.jc-job-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.jc-job-company {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--krds-color-light-primary-60);
    margin: 0;
}
.jc-job-code {
    margin-left: 0.8rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.jc-job-hit {
    font-size: 1.4rem;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.jc-job-card-title {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding-bottom: 2.4rem;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
}
.jc-job-title {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0;
    color: var(--krds-light-color-text-basic, #1e2124);
}

/* 마감 배지 */
.jc-deadline {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border-radius: 10rem;
    font-size: 1.3rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.jc-deadline--soon {
    background: #fdecec;
    color: #d4231f;
    border-color: #f5c2c0;
}
.jc-deadline--open {
    background: var(--krds-color-light-primary-5, #edf3f9);
    color: var(--krds-color-light-primary-60, #1b4f8c);
    border-color: var(--krds-color-light-primary-20, #afc9e5);
}
.jc-deadline--ongoing {
    background: #eaf5ec;
    color: #1c7e38;   /* 명도대비 3.94 → 4.59 (KWCAG 5.4.2) */
    border-color: #b9e0c2;
}
.jc-deadline--closed {
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    color: #6a7179;   /* 명도대비 2.82 → 4.53 (KWCAG 5.4.2) */
    border-color: var(--krds-light-color-border-gray, #cdd1d5);
}

/* 요약 4분할 */
.jc-job-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem 4rem;
}
.jc-sum-head {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-sum-group dl {
    margin: 0;
}
.jc-sum-group dl > div {
    display: flex;
    gap: 1.2rem;
    padding: 0.5rem 0;
    font-size: 1.5rem;
}
.jc-sum-group dt {
    flex: 0 0 6.5rem;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.jc-sum-group dd {
    margin: 0;
    color: var(--krds-light-color-text-basic, #1e2124);
}

/* 섹션 */
.jc-job-sec {
    margin-bottom: 3.2rem;
}
.jc-sec-title {
    font-size: 2rem;
    font-weight: 700;
    padding-left: 1.2rem;
    border-left: 0.4rem solid var(--krds-color-light-primary-60);
    margin: 0 0 1.6rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-job-desc {
    padding: 2rem;
    margin-bottom: 1.6rem;
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    border-radius: 1.2rem;
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--krds-light-color-text-basic, #1e2124);
}

/* 정보 테이블 */
.jc-info-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid var(--krds-color-light-primary-60);
    font-size: 1.5rem;
}
.jc-info-table th,
.jc-info-table td {
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    text-align: left;
    vertical-align: top;
}
.jc-info-table th {
    width: 14%;
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
    white-space: nowrap;
}
.jc-info-table td {
    color: var(--krds-light-color-text-basic, #1e2124);
}

/* 칩 / 배지 묶음 */
.jc-chip {
    display: inline-block;
    margin: 0.2rem 0.4rem 0.2rem 0;
    padding: 0.3rem 1rem;
    border-radius: 0.4rem;
    background: var(--krds-color-light-primary-5, #edf3f9);
    color: var(--krds-color-light-primary-70, #153e6e);
    font-size: 1.3rem;
}
.jc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* 장애 편의시설 */
.jc-fac-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jc-fac-list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.5rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-fac-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--krds-color-light-primary-60);
    color: #fff;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* 접수 안내 */
.jc-apply-note {
    margin-top: 1.6rem;
    padding: 1.6rem 2rem;
    background: var(--krds-color-light-primary-5, #edf3f9);
    border-radius: 1.2rem;
    font-size: 1.5rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-apply-note strong {
    color: var(--krds-color-light-primary-60);
}
.jc-job-foot {
    text-align: center;
    margin-top: 4rem;
}

/* ── 목록 필터 ── */
.jc-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.6rem 2.4rem;
    padding: 2.4rem;
    margin-bottom: 2rem;
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    border-radius: 1.2rem;
}
.jc-filter-row {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.jc-filter-row--full {
    flex: 1 1 100%;
}
.jc-filter-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-filter .krds-input {
    min-width: 20rem;
    height: 4.4rem;
    padding: 0 1.2rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.6rem;
    font-size: 1.5rem;
    font-family: inherit;
    background: #fff;
}
.jc-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.jc-chip-btn {
    padding: 0.9rem 1.6rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 10rem;
    background: #fff;
    color: var(--krds-light-color-text-basic, #1e2124);
    font-size: 1.5rem;
    cursor: pointer;
}
.jc-chip-btn:hover {
    border-color: var(--krds-color-light-primary-60);
    color: var(--krds-color-light-primary-60);
}
.jc-chip-btn:focus-within {
    outline: 2px solid var(--krds-color-light-primary-60);
    outline-offset: 2px;
}
.jc-chip-btn.is-on {
    background: var(--krds-color-light-primary-60);
    border-color: var(--krds-color-light-primary-60);
    color: #fff;
    font-weight: 700;
}
/* 선택된 칩 앞 체크 표시 (복수선택 시각화) */
.jc-chip-btn.is-on::before {
    content: "\2713";
    margin-right: 0.4rem;
    font-weight: 700;
}
/* '전체'(해제) 칩은 링크지만 칩과 동일 형태 */
a.jc-chip-btn.jc-chip-reset {
    text-decoration: none;
    line-height: 1;
}
.jc-chip-cnt {
    font-variant-numeric: tabular-nums;
}
/* 접힘(더보기) 상태: 한 줄만 노출 */
.jc-chip-group--collapsible {
    overflow: hidden;
    transition: max-height 0.2s ease;
}
.jc-chip-group--collapsible.is-collapsed {
    max-height: 42.5px;
}
.jc-chip-more {
    align-self: flex-start;
    margin-top: 0.6rem;
    padding: 0.4rem 0.4rem;
    border: 0;
    background: none;
    color: var(--krds-color-light-primary-60);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.jc-chip-more::after {
    content: " \203A";
}
.jc-chip-more[aria-expanded="true"]::after {
    content: " \2039";
}
.jc-chip-more:focus {
    outline: 2px solid var(--krds-color-light-primary-60);
    outline-offset: 2px;
}
.jc-filter-actions {
    display: flex;
    gap: 0.8rem;
    margin-left: auto;
}
.jc-list-total {
    font-size: 1.5rem;
    color: var(--krds-light-color-text-subtle, #464c53);
    margin: 0 0 1.6rem;
}
.jc-list-total strong {
    color: var(--krds-color-light-primary-60);
}

/* ── 결과 수 + 정렬 바 ── */
.jc-list-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
/* 건수는 왼쪽, 조작 컨트롤(마감보기·정렬·보기방식)은 오른쪽으로 모음 */
.jc-list-bar .jc-closed-toggle { margin-left: auto; }
.jc-list-bar .jc-list-total {
    margin: 0;
}
.jc-sort {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.jc-sort-label {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-sort-select {
    min-width: 12rem;
    height: 4rem;
    padding: 0 3rem 0 1.2rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.6rem;
    font-size: 1.5rem;
    font-family: inherit;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23464c53' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
        no-repeat right 1rem center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.jc-sort-select:focus {
    outline: 2px solid var(--krds-color-light-primary-60);
    outline-offset: 1px;
}

/* ── 마감 포함 토글 (버튼형) ── */
/* 마감된 공고 보기 — 체크 상태가 확실히 보이도록 네모칸을 직접 그린다
   (테마/브라우저에 따라 기본 체크박스가 잘 안 보이는 문제 방지) */
.jc-closed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    height: 3.6rem;
    margin-right: 0.4rem;
    font-size: 1.5rem;
    color: var(--krds-light-color-text-basic, #1e2124);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
/* 실제 입력은 화면에서 숨기되 보조기기·키보드에는 살려둔다 */
.jc-closed-input {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
/* ⬜ 꺼진 상태 */
.jc-closed-box {
    flex: 0 0 auto;
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid var(--krds-light-color-border-gray, #8a949e);
    border-radius: 0.4rem;
    background: #fff;
    position: relative;
}
/* ✅ 켜진 상태 — 파란 채움 + 흰 체크 */
.jc-closed-input:checked + .jc-closed-box {
    background: var(--krds-color-light-primary-60, #1b4f8c);
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
}
.jc-closed-input:checked + .jc-closed-box::after {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 0.1rem;
    width: 0.52rem;
    height: 0.98rem;
    border: solid #fff;
    border-width: 0 0.28rem 0.28rem 0;
    transform: rotate(45deg);
}
.jc-closed-input:focus-visible + .jc-closed-box,
.jc-closed-input:focus + .jc-closed-box {
    outline: 3px solid var(--krds-color-light-primary-60, #1b4f8c);
    outline-offset: 2px;
}
.jc-closed-toggle:hover .jc-closed-txt { text-decoration: underline; }
/* 켜진 상태는 색뿐 아니라 굵은 글씨로도 구분 */
.jc-closed-input:checked ~ .jc-closed-txt {
    font-weight: 700;
    color: var(--krds-color-light-primary-60, #1b4f8c);
}

/* ── 적용된 필터 조건 ── */
.jc-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.6rem;
}
.jc-applied:empty {
    display: none;
}
.jc-applied-label {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--krds-light-color-text-subtle, #464c53);
    margin-right: 0.4rem;
}
.jc-applied-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--krds-color-light-primary-60);
    border-radius: 10rem;
    background: var(--krds-color-light-primary-5, #ecf2fe);
    color: var(--krds-color-light-primary-70, #083891);
    font-size: 1.4rem;
    text-decoration: none;
}
.jc-applied-chip:hover {
    background: var(--krds-color-light-primary-10, #d8e5fd);
}
.jc-applied-chip:focus {
    outline: 2px solid var(--krds-color-light-primary-60);
    outline-offset: 2px;
}
.jc-applied-key {
    color: var(--krds-light-color-text-subtle, #464c53);
    font-weight: 700;
}
.jc-applied-conn {
    color: var(--krds-light-color-text-subtle, #464c53);
    font-weight: 400;
    font-size: 1.3rem;
    margin: 0 0.1rem;
}
.jc-applied-x {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--krds-color-light-primary-60);
}
.jc-applied-clear {
    margin-left: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 1.4rem;
    color: var(--krds-light-color-text-subtle, #464c53);
    text-decoration: underline;
}
.jc-applied-clear:focus {
    outline: 2px solid var(--krds-color-light-primary-60);
    outline-offset: 2px;
}

/* ── 목록 카드 ── */
.jc-card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jc-card {
    border: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    border-radius: 1.2rem;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.jc-card:hover {
    border-color: var(--krds-color-light-primary-60);
    box-shadow: 0 0.4rem 1.2rem rgba(27, 79, 140, 0.12);
}
.jc-card-link {
    display: block;
    padding: 2.4rem;
    text-decoration: none;
    color: inherit;
}
.jc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.jc-card-company {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--krds-color-light-primary-60);
}
.jc-card-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.6rem;
    color: var(--krds-light-color-text-basic, #1e2124);
    word-break: break-all;
}
.jc-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.jc-card-meta li {
    font-size: 1.5rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-meta-key {
    display: inline-block;
    margin-right: 0.6rem;
    color: var(--krds-light-color-text-subtle, #464c53);
}

/* ── 출처 배지 (자치구: 자동수집 소스 구분) ── */
.jc-src {
    /* 출처 배지: 업체명 앞에 두고 '서울시'(3자)·'고용공단'(4자) 폭을 맞춰 뒤 글자가 나란히 오게 함 */
    display: inline-block;
    min-width: 5.6rem;
    text-align: center;
    margin-right: 0.6rem;
    padding: 0.1rem 0.6rem;
    border-radius: 10rem;
    font-size: 1.1rem;
    font-weight: 700;
    vertical-align: middle;
    white-space: nowrap;
}
.jc-src--kead { background: #e3edfb; color: #1b4f8c; }
.jc-src--seoul { background: #e3f3ea; color: #1f7a4d; }
.jc-src--etc { background: #eef0f4; color: #55606f; }

/* 수집 공고 상세: 출처 안내 + 원본 본문 렌더 */
.jc-collected-src {
    font-size: 1.4rem;
    color: var(--krds-light-color-text-subtle, #464c53);
    background: #eef3fa;
    border: 1px solid #d6e2f2;
    border-radius: 0.8rem;
    padding: 1rem 1.4rem;
    margin: 0 0 1.6rem;
}
.jc-collected-src a { color: #1B4F8C; font-weight: 600; }
.jc-job-desc img { max-width: 100%; height: auto; }
.jc-job-desc a { color: #1B4F8C; word-break: break-all; }
.jc-job-desc table { max-width: 100%; }

/* 수집 공고 문의 안내 (책임 주체 명시) */
.jc-collected-inquiry {
    background: #fff7e6;
    border: 1px solid #f0d9a8;
    border-radius: 1rem;
    padding: 1.6rem 2rem;
    margin: 2rem 0;
}
.jc-collected-inquiry .jc-inq-main {
    font-size: 1.6rem;
    font-weight: 700;
    color: #8a5a00;
    margin: 0 0 0.6rem;
    line-height: 1.6;
}
.jc-collected-inquiry .jc-inq-sub {
    font-size: 1.35rem;
    color: #7a6a48;
    margin: 0;
    line-height: 1.6;
}

/* ── 보기 방식 토글 (박스형/리스트형) ── */
.jc-view-toggle {
    display: inline-flex;
    align-items: stretch;
    height: 3.6rem;                 /* 정렬 토글과 보기방식 토글의 높이를 같게 */
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.8rem;
    overflow: hidden;
}
.jc-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.2rem;
    background: #fff;
    border: 0;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.jc-view-btn + .jc-view-btn {
    border-left: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
}
.jc-view-btn[aria-pressed="true"] {
    background: var(--krds-color-light-primary-60, #1b4f8c);
    color: #fff;
}
.jc-view-btn:focus-visible {
    outline: 2px solid var(--krds-color-light-primary-60, #1b4f8c);
    outline-offset: -2px;
}
.jc-view-ico {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    width: 1.4rem;
    height: 1.4rem;
}
.jc-view-ico span {
    background: currentColor;
    border-radius: 1px;
}
.jc-view-ico--list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.jc-view-ico--list span {
    width: 100%;
    height: 2px;
    border-radius: 1px;
}
@media (max-width: 767px) {
    .jc-view-txt {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .jc-view-btn {
        padding: 0.8rem 1rem;
    }
}

/* ── 리스트형 보기 (jc-view-list) ── */
.jc-view-list .jc-card-list {
    grid-template-columns: 1fr;
    gap: 0.8rem;
}
.jc-view-list .jc-card {
    border-radius: 0.8rem;
}
.jc-view-list .jc-card-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.4rem;
    row-gap: 0.4rem;
    padding: 1.5rem 2rem;
}
/* card-top(업체명+마감) 자식을 링크의 flex 항목으로 승격 */
.jc-view-list .jc-card-top {
    display: contents;
}
.jc-view-list .jc-card-company {
    order: 1;
    flex: 0 0 auto;
}
.jc-view-list .jc-card-title {
    order: 2;
    flex: 1 1 20rem;
    margin: 0;
    font-size: 1.7rem;
}
.jc-view-list .jc-deadline {
    order: 3;
    flex: 0 0 auto;
}
.jc-view-list .jc-card-meta {
    order: 4;
    flex: 1 1 100%;
    margin: 0.2rem 0 0;
    column-gap: 1.6rem;
    row-gap: 0.2rem;
}
.jc-view-list .jc-card-meta li {
    font-size: 1.4rem;
}

.jc-empty {
    padding: 6rem 2rem;
    text-align: center;
    color: var(--krds-light-color-text-subtle, #464c53);
    border: 1px dashed var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 1.2rem;
}
.jc-empty p {
    margin-bottom: 1.6rem;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .jc-job-h1 {
        font-size: 2.4rem;
    }
    .jc-job-card {
        padding: 2rem;
    }
    .jc-job-title {
        font-size: 2rem;
    }
    .jc-job-summary {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    .jc-fac-list {
        grid-template-columns: 1fr 1fr;
    }
    .jc-card-list {
        grid-template-columns: 1fr;
    }
    .jc-info-table th {
        width: 30%;
    }
    .jc-filter-actions {
        margin-left: 0;
        width: 100%;
    }
    .jc-info-table,
    .jc-info-table tbody,
    .jc-info-table tr,
    .jc-info-table th,
    .jc-info-table td {
        display: block;
        width: 100%;
    }
    .jc-info-table th {
        border-bottom: 0;
    }
    .jc-info-table td {
        border-bottom: 1px solid
            var(--krds-light-color-border-gray-light, #e4e8eb);
    }
}

/* 인쇄 */
@media print {
    #krds-header,
    #krds-footer,
    #krds-masthead,
    #krds-skip-link,
    .jc-job-actions,
    .jc-job-foot {
        display: none !important;
    }
}

/* ========================================================
   콘텐츠 페이지 (page.php / business.php) — KRDS
   ======================================================== */
.jc-page-wrap {
    padding-bottom: 6.4rem;
}
.jc-page-wrap .container {
    max-width: 108rem;
    margin: 0 auto;
    padding: 0 2rem;
}

/* 페이지 헤더 */
.jc-page-header {
    background: var(--krds-color-light-primary-5, #edf3f9);
    padding: 4rem 0 3.2rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    margin-bottom: 4rem;
}
.jc-page-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
    margin: 0 0 0.8rem;
}
.jc-page-intro {
    font-size: 1.6rem;
    color: var(--krds-light-color-text-subtle, #464c53);
    margin: 0;
}
.jc-page-content {
    max-width: 92rem;
}
.jc-page-content--tabbed {
    margin-top: 3.2rem;
}
/* KRDS 라인 탭 — 사업안내 페이지 이동. 활성 색을 브랜드로 맞춤 */
.jc-page-tabs {
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    margin-bottom: 32px;
}
.jc-page-tabs .btn-tab {
    text-decoration: none;
}
.jc-page-tabs .active .btn-tab {
    color: var(--krds-color-light-primary-60, #1b4f8c);
}
.jc-page-tabs .active .btn-tab::before {
    background-color: var(--krds-color-light-primary-60, #1b4f8c);
}

/* ── 공통 문서 타이포 (.jc-doc) ── */
.jc-doc {
    font-size: 1.6rem;
    line-height: 1.8;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-doc > h2:first-child,
.jc-doc > *:first-child {
    margin-top: 0;
}
.jc-doc h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--krds-light-color-text-basic, #1e2124);
    padding-left: 1.2rem;
    border-left: 0.4rem solid var(--krds-color-light-primary-60, #1b4f8c);
    margin: 4rem 0 1.6rem;
}
.jc-doc h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 2.8rem 0 1.2rem;
    color: var(--krds-light-color-text-basic, #1e2124);
}
.jc-doc h4 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 1.6rem 0 0.8rem;
}
.jc-doc p {
    margin: 0 0 1.2rem;
}
.jc-doc a {
    color: var(--krds-color-light-primary-60, #1b4f8c);
    text-decoration: underline;
}
.jc-doc strong {
    font-weight: 700;
}
.jc-doc ul,
.jc-doc ol {
    padding-left: 2rem;
    margin: 0 0 1.2rem;
}
.jc-doc li {
    margin-bottom: 0.4rem;
}
.jc-doc .hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.jc-doc .point {
    color: var(--krds-light-color-danger, #de3412);
}
.jc-doc .point strong {
    color: inherit;
}
.jc-doc .label {
    display: inline-block;
    font-weight: 700;
    color: var(--krds-color-light-primary-70, #153e6e);
    margin-bottom: 0.8rem;
}

/* 표 (KRDS) */
.jc-doc .table-wrap,
.jc-doc .table-area {
    overflow-x: auto;
    margin: 1.2rem 0;
}
.jc-doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
    font-size: 1.5rem;
    border-top: 2px solid var(--krds-color-light-primary-60, #1b4f8c);
}
.jc-doc th,
.jc-doc td {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    text-align: left;
    vertical-align: top;
}
.jc-doc thead th,
.jc-doc .table-head th {
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    font-weight: 700;
    white-space: nowrap;
}
.jc-doc td .table-title {
    font-weight: 700;
}
.jc-doc .table-text {
    margin: 0 0 0.4rem;
}
.jc-doc .table-list,
.jc-doc .list.circle,
.jc-doc .table-list.circle {
    list-style: disc;
    padding-left: 1.8rem;
    margin: 0.4rem 0;
}
.jc-doc .table-wrap-list {
    list-style: none;
    padding: 0;
}
.jc-doc .table-li {
    margin-bottom: 1.6rem;
}
.jc-doc .pc-mode {
    display: inline;
}

/* ── 이용 절차 스텝 (.process-steps .step-list) ── */
.jc-doc .step-list {
    counter-reset: jc-step;
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}
.jc-doc .step-list > li {
    counter-increment: jc-step;
    position: relative;
    padding: 2.4rem 1.6rem 1.6rem;
    border: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    border-radius: 1.2rem;
    text-align: center;
}
.jc-doc .step-list > li::before {
    content: counter(jc-step);
    position: absolute;
    top: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--krds-color-light-primary-60, #1b4f8c);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
}
.jc-doc .step-list > li strong {
    display: block;
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
}
.jc-doc .step-list > li p {
    margin: 0;
    font-size: 1.4rem;
    color: var(--krds-light-color-text-subtle, #464c53);
}

/* ── 특화사업 item-list ── */
.jc-doc .item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 2px solid var(--krds-color-light-primary-60, #1b4f8c);
}
.jc-doc .item-list > .item {
    display: flex;
    gap: 1.6rem;
    padding: 1.6rem 0.4rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    align-items: flex-start;
}
.jc-doc .item-list > .item > .ttl {
    flex: 0 0 13rem;
    font-weight: 700;
    color: var(--krds-color-light-primary-70, #153e6e);
    line-height: 1.5;
}
.jc-doc .item-list > .item > .text {
    flex: 1;
    min-width: 0;
}
.jc-doc .item-list > .item > .text > *:first-child {
    margin-top: 0;
}

/* ── 캐릭터 소개 카드 (일찬이·일담이) ── */
.jc-doc .jc-character-list {
    list-style: none;
    padding: 0;
    margin: 1.2rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}
.jc-doc .jc-character-list > li {
    flex: 1 1 24rem;
    background: var(--krds-color-light-primary-5, #edf3f9);
    border-radius: 1.2rem;
    padding: 1.6rem 2rem;
}
.jc-doc .jc-character-list > li > strong {
    display: block;
    font-size: 1.7rem;
    color: var(--krds-color-light-primary-70, #153e6e);
    margin-bottom: 0.6rem;
}
.jc-doc .jc-character-list > li > p {
    margin: 0;
}

/* ── 특화사업 카드 ── */
.jc-doc .specialjob-list {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}
.jc-doc .specialjob-item {
    border: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    border-radius: 1.2rem;
    overflow: hidden;
}
.jc-doc .specialjob-title {
    margin: 0;
    padding: 1.6rem 2.4rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    background: var(--krds-color-light-primary-60, #1b4f8c);
    border: 0;
}
.jc-doc .specialjob-body {
    padding: 2rem 2.4rem;
}

/* ── 조직도 ── */
.jc-org {
    margin: 1.6rem 0 0;
}
.jc-org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.jc-org-top {
    margin-bottom: 3.2rem;
    position: relative;
}
.jc-org-top::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3.2rem;
    width: 2px;
    height: 3.2rem;
    background: var(--krds-light-color-border-gray, #cdd1d5);
    transform: translateX(-50%);
}
.jc-org-mid {
    display: flex;
    justify-content: center;
    gap: 6rem;
    align-items: flex-start;
    width: 100%;
}
.jc-org-branch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    flex: 0 1 34rem;
}
/* 부서(국)가 하나면 넓게 펼쳐 팀을 그리드로 배치 */
.jc-org-branch:only-child {
    flex-basis: 100%;
    max-width: 96rem;
}
.jc-org-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 2rem;
    border-radius: 1.2rem;
    text-align: center;
    box-shadow: 0 0.2rem 0.8rem rgba(21, 62, 110, 0.08);
}
.jc-org-box strong {
    font-size: 1.6rem;
    font-weight: 700;
}
.jc-org-box span {
    font-size: 1.3rem;
    margin-top: 0.3rem;
    opacity: 0.85;
    word-break: keep-all;
}
.jc-org-box--top {
    background: var(--krds-color-light-primary-70, #153e6e);
    color: #fff;
    min-width: 24rem;
    padding: 1.8rem 2.8rem;
}
/* 부서장(국장) 박스 — 아래 팀으로 내려가는 커넥터 포함 */
.jc-org-box--head {
    position: relative;
    align-self: center;
    min-width: 22rem;
    background: var(--krds-color-light-primary-10, #d7e4f2);
    color: var(--krds-color-light-primary-70, #153e6e);
    font-weight: 700;
}
.jc-org-box--head::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3rem;
    width: 2px;
    height: 3rem;
    background: var(--krds-light-color-border-gray, #cdd1d5);
    transform: translateX(-50%);
}
/* 팀 목록 — 반응형 그리드 (자동 줄바꿈) */
.jc-org-teams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.4rem;
    width: 100%;
    position: relative;
    padding-top: 2rem;
}
/* 그리드 상단 가로 커넥터 라인 */
.jc-org-teams::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--krds-light-color-border-gray, #cdd1d5);
}
/* 단일 부서일 때 6팀을 3열로 (2×3) */
.jc-org-branch:only-child .jc-org-teams {
    grid-template-columns: repeat(3, 1fr);
}
/* 팀 카드: 상단 색 강조 바 + 호버 */
.jc-org-teams .jc-org-box {
    align-items: flex-start;
    text-align: left;
    padding: 1.4rem 1.6rem;
    border-top: 3px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.jc-org-teams .jc-org-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.4rem 1.2rem rgba(21, 62, 110, 0.14);
}
.jc-org-teams .jc-org-box strong {
    font-size: 1.5rem;
}
.jc-org-teams .jc-org-box span {
    font-size: 1.25rem;
    line-height: 1.5;
    opacity: 0.9;
}
.jc-org-box--blue {
    background: var(--krds-color-light-primary-5, #edf3f9);
    color: var(--krds-color-light-primary-70, #153e6e);
    border-top-color: var(--krds-color-light-primary-60, #1b4f8c);
}
.jc-org-box--yellow {
    background: #fdf6d8;
    color: #8a6d1a;
    border-top-color: #e0b83a;
}
.jc-org-box--green {
    background: #e5f5ea;
    color: #1e6b3a;
    border-top-color: #3a9d5f;
}
.jc-org-box--purple {
    background: #f1e8fb;
    color: #5b2e91;
    border-top-color: #8b5cc7;
}
@media (max-width: 768px) {
    .jc-org-mid {
        flex-direction: column;
        align-items: center;
        gap: 3.6rem;
    }
    .jc-org-branch:only-child .jc-org-teams,
    .jc-org-teams {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .jc-org-branch:only-child .jc-org-teams,
    .jc-org-teams {
        grid-template-columns: 1fr;
    }
    .jc-org-teams .jc-org-box {
        align-items: center;
        text-align: center;
    }
}

/* ── 오시는 길 ── */
.directions-map {
    margin-bottom: 3.2rem;
}
.directions-map .map-embed {
    width: 100%;
    height: 40rem;
    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
}
.directions-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.map-info {
    list-style: none;
    padding: 1.6rem 2rem;
    margin: 1.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 3.2rem;
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    border-radius: 1.2rem;
}
.map-info li {
    margin: 0;
}
.map-info-label {
    font-weight: 700;
    color: var(--krds-color-light-primary-60, #1b4f8c);
    margin-right: 0.8rem;
}
.directions-guide {
    margin: 2rem 0;
    padding: 1.6rem 2rem;
    background: var(--krds-color-light-primary-5, #edf3f9);
    border-radius: 1.2rem;
}
.transit {
    margin-top: 3.2rem;
}
.transit-head h3 {
    margin: 0 0 1.2rem;
    border: 0;
    padding: 0;
}
.transit-card,
.bus-stop {
    background: #fff;
    border: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    border-radius: 1.2rem;
    padding: 1.6rem 2rem;
    margin-bottom: 1.2rem;
}
.transit-card h4,
.bus-stop h4 {
    margin: 0 0 0.8rem;
    font-size: 1.6rem;
    color: var(--krds-color-light-primary-60, #1b4f8c);
}
.transit-card p,
.bus-stop p {
    margin: 0;
    font-size: 1.5rem;
    color: var(--krds-light-color-text-subtle, #464c53);
}
.bus-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.8rem 0;
}
.bus-badge {
    padding: 0.3rem 1rem;
    border-radius: 10rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}
.bus-badge--blue {
    background: #2b5fb3;
}
.bus-badge--green {
    background: #2c7a3d;
}

/* ── 반응형 ── */
@media (max-width: 767px) {
    .jc-page-title {
        font-size: 2.4rem;
    }
    .jc-doc .step-list {
        grid-template-columns: 1fr 1fr;
    }
    .jc-doc .item-list > .item {
        flex-direction: column;
        gap: 0.6rem;
    }
    .jc-doc .item-list > .item > .ttl {
        flex-basis: auto;
    }
    .jc-org-mid {
        flex-direction: column;
        align-items: center;
        gap: 2.4rem;
    }
    .jc-org-branch {
        flex-basis: auto;
        width: 100%;
        max-width: 34rem;
    }
    .jc-org-top::after {
        display: none;
    }
    .jc-doc .pc-mode {
        display: none;
    }
}

/* ========================================================
   홈 풀커버 히어로 + 투명 오버레이 헤더 (index 전용)
   최상단에서만 투명; 스크롤 시 KRDS 기본 솔리드 헤더 동작
   ======================================================== */
.is-home #wrap {
    position: relative;
}

/* 히어로: 뷰포트 전체 */
.is-home .main-visual {
    position: relative;
    margin: 0;
}
.is-home .main-visual .swiper {
    min-height: 100vh;
}
.is-home .main-visual .swiper-slide {
    min-height: 100vh;
}
.is-home .main-visual .visual-inner {
    position: relative;
    z-index: 3;
}
/* 헤더 가독성용 상단 그라데이션 */
.is-home .main-visual::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    z-index: 2;
    pointer-events: none;
}
/* 컨트롤을 히어로 하단으로 */
.is-home .main-visual .visual-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.2rem;
    z-index: 4;
}
.is-home .main-visual .visual-nav {
    background: rgba(255, 255, 255, 0.92);
}
.is-home .main-visual .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
}
.is-home .main-visual .swiper-pagination-bullet-active {
    background: #fff;
}

/* ── 최상단: 헤더 투명 오버레이 ── */
.is-home #wrap:not([class*="scroll"]) #krds-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 100;
}
.is-home #wrap:not([class*="scroll"]) #krds-header .header-in {
    position: static;
    background: transparent;
    border-bottom: 0;
    --krds-header--navi-color-text: #fff;
}
.is-home #wrap:not([class*="scroll"]) #krds-header .header-container {
    border-bottom: 0;
}
/* GNB 메뉴 바 투명 + 구분선 흐리게 */
.is-home #wrap:not([class*="scroll"]) .krds-main-menu {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.25);
}
/* GNB 드롭다운 화살표(::after) 흰색 */
.is-home #wrap:not([class*="scroll"]) .gnb-main-trigger::after {
    background-color: #fff;
}
.is-home #wrap:not([class*="scroll"]) .gnb-main-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.is-home #wrap:not([class*="scroll"]) .gnb-toggle-wrap {
    color: #fff;
    background: none;
}

.is-home #wrap:not([class*="scroll"]) .ico-close-mobile {
    background-color: #000 !important;
}

.is-home #wrap:not([class*="scroll"]) .btn-navi:hover,
.is-home #wrap:not([class*="scroll"]) .btn-navi:focus,
.is-home #wrap:not([class*="scroll"]) .btn-navi:active {
    background: rgba(255, 255, 255, 0.2);
}

.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul a:hover,
.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul a:focus,
.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul a:active {
    background: rgba(255, 255, 255, 0.2);
}

.is-home #wrap:not([class*="scroll"]) .gnb-main-trigger-mobile {
    color: #000 !important;
}

.is-home #wrap:not([class*="scroll"]) .gnb-main-trigger-mobile.active {
    color: var(--krds-main-menu-mobile--main-trigger-color-text-active) !important;
}

.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-menu .gnb-main-trigger.active::before {
    background-color: #fff;
}

.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul a::before {
    background-color: #fff;
}

/* 텍스트 흰색 */
.is-home #wrap:not([class*="scroll"]) .header-utility .util-info,
.is-home #wrap:not([class*="scroll"]) .header-utility .util-info strong,
.is-home #wrap:not([class*="scroll"]) .header-utility .jc-resize-btn,
.is-home #wrap:not([class*="scroll"]) .gnb-main-trigger,
.is-home #wrap:not([class*="scroll"]) .btn-navi {
    color: #fff;
}
/* 최상단: 화면크기 +/− 버튼은 투명 배경 + 흰 테두리 아웃라인 */
.is-home #wrap:not([class*="scroll"]) .jc-resize-btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
}
.is-home #wrap:not([class*="scroll"]) .jc-resize-btn:hover {
    border-color: #fff;
    color: #fff;
}
/* 최상단: 흰색 로고로 스왑 (모바일도 동일 자산 사용) */
.is-home #wrap:not([class*="scroll"]) #krds-header .logo a.logo-link {
    background-image: url("/img/logo-white.svg");
}
/* 아이콘(svg 마스크) 흰색 */
.is-home #wrap:not([class*="scroll"]) #krds-header .svg-icon,
.is-home #wrap:not([class*="scroll"]) #krds-header .btn-navi::before {
    background-color: #fff;
}
/* 유틸리티 구분선 흐리게 */
.is-home #wrap:not([class*="scroll"]) .header-utility .utility-list > li:not(:first-child)::before {
    background-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 767px) {
    .is-home .main-visual .visual-controls {
        bottom: 2rem;
    }
}

/* ── 헤더 항상 고정 (스크롤 내려도 숨기지 않음) ── */
#wrap.scroll-down #krds-header:not(.sample) .header-in {
    transform: translateY(0);
}
/* ── 홈 상단바 깜빡임 제거 (2026-07) ─────────────────────────────────
   [원인] ① KRDS 기본 헤더는 스크롤 내리면 숨기고 올리면 다시 보이는 '자동숨김'
          헤더(component.css: scroll-down→translateY(-100%)). 모바일/접근성 전용
          장치가 아니라 콘텐츠 공간 확보용 KRDS 기본값.
          ② 홈은 미스크롤 상태에서 #krds-header가 position:relative(문서 흐름)라
          아래로 스크롤하면 헤더가 함께 밀려 사라졌다가, 스크롤 클래스가 붙는 순간
          고정 헤더로 전환되며 다시 나타나 '깜빡임' 발생.
   [해결] 홈 헤더도 다른 페이지처럼 처음부터 sticky 고정 + 내부바 fixed전환/translate
          숨김 비활성 → 슬라이드는 그대로 헤더 아래에, 스크롤해도 위치 튐 없음.
          (고정 헤더가 오히려 키보드·스크린리더 사용자에게 유리) */
.is-home #krds-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
}
.is-home #wrap[class*="scroll"] #krds-header:not(.sample) .header-in {
    position: relative !important;
    top: auto;
    width: auto;
    transform: none !important;
    transition: none !important;
}

/* ── 통합검색 버튼: 헤더 상단 유틸리티 바에 하나만 표시 (GNB 바 중복 버튼 제거됨) ── */

/* ========================================================
   홈 메인 슬라이드: 상단바(콘텐츠 폭 1200px) 안쪽 박스형 (2026-07)
   - 기존 풀스크린(100vh)+투명헤더 → 콘텐츠 폭 16:9 박스 + 솔리드 헤더
   - 영상은 16:9 박스에 꽉 맞고, 이미지는 cover 로 채움
   ======================================================== */
.is-home .main-visual {
    max-width: var(--krds-contents-size, 1200px);
    margin: 2.4rem auto 0;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.08);
}
.is-home .main-visual .swiper,
.is-home .main-visual .swiper-slide {
    min-height: 0;
    height: auto;
}
.is-home .main-visual .swiper-slide {
    aspect-ratio: 16 / 9;   /* 완전한 FHD(16:9) — max-height 캡 제거해 1920×1080 규격이 잘림 없이 딱 맞음 */
}
.is-home .main-visual::before { display: none; }
.is-home .main-visual .visual-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.6rem;
}
.is-home .main-visual .visual-inner {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
}
/* 홈 헤더를 솔리드로 (슬라이드가 상단바 아래에 오도록) */
.is-home #wrap:not([class*="scroll"]) #krds-header {
    position: relative;
    background: #fff;
}
.is-home #wrap:not([class*="scroll"]) #krds-header .header-in {
    background: #fff;
    --krds-header--navi-color-text: var(--krds-light-color-text-basic, #1e2124);
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
}
.is-home #wrap:not([class*="scroll"]) .krds-main-menu {
    background: #fff;
    border-color: var(--krds-light-color-border-gray-light, #e4e8eb);
}
.is-home #wrap:not([class*="scroll"]) .gnb-main-trigger::after { background-color: currentColor; }
.is-home #wrap:not([class*="scroll"]) .gnb-toggle-wrap { color: inherit; }
.is-home #wrap:not([class*="scroll"]) .btn-navi { color: inherit; }
/* 홈 로고: 흰색 스왑 해제 → 기본(컬러) 로고 */
.is-home #wrap:not([class*="scroll"]) #krds-header .logo a.logo-link {
    background-image: url("/img/logo.svg");
}
@media (max-width: 767px) {
    .is-home #wrap:not([class*="scroll"]) #krds-header .logo a.logo-link {
        background-image: url("/img/logo-mobile.svg") !important;
    }
}
/* 홈 솔리드 헤더: GNB 메뉴 글자색 복원 (흰→기본 진한색) */
.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-main-trigger,
.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-menu > li > button,
.is-home #wrap:not([class*="scroll"]) .btn-navi.all,
.is-home #wrap:not([class*="scroll"]) .jc-gnb-sch-btn {
    color: var(--krds-light-color-text-basic, #1e2124);
}
/* 홈 솔리드 헤더 마무리: 유틸리티/아이콘/드롭다운 색 복원 (투명헤더용 흰색 잔재 제거) */
.is-home #wrap:not([class*="scroll"]) .header-utility .util-info,
.is-home #wrap:not([class*="scroll"]) .header-utility .util-info strong,
.is-home #wrap:not([class*="scroll"]) .header-utility .jc-resize-btn,
.is-home #wrap:not([class*="scroll"]) .krds-resize .drop-btn {
    color: var(--krds-light-color-text-basic, #1e2124);
}
/* 화면크기 +/− 버튼: 일반(회색 테두리) 스타일로 */
.is-home #wrap:not([class*="scroll"]) .jc-resize-btn {
    background: transparent;
    border-color: var(--krds-light-color-border-gray, #cdd1d5);
}
.is-home #wrap:not([class*="scroll"]) .jc-resize-btn:hover {
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
    color: var(--krds-color-light-primary-60, #1b4f8c);
}
/* 헤더 아이콘(svg 마스크)·검색 아이콘 진한색으로 */
.is-home #wrap:not([class*="scroll"]) #krds-header .svg-icon,
.is-home #wrap:not([class*="scroll"]) #krds-header .btn-navi::before {
    background-color: var(--krds-light-color-text-basic, #1e2124);
}
/* 유틸리티 구분선 */
.is-home #wrap:not([class*="scroll"]) .header-utility .utility-list > li:not(:first-child)::before {
    background-color: var(--krds-light-color-border-gray-light, #e4e8eb);
}
/* GNB 드롭다운: 흰 배경 + 진한 글씨 (투명→솔리드) */
.is-home #wrap:not([class*="scroll"]) .gnb-toggle-wrap {
    color: var(--krds-light-color-text-basic, #1e2124);
    background: #fff;
}
.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-toggle-wrap .gnb-sub-list .gnb-sub-content > ul a::before {
    background-color: var(--krds-color-light-primary-60, #1b4f8c);
}
.is-home #wrap:not([class*="scroll"]) .krds-main-menu .gnb-menu .gnb-main-trigger.active::before {
    background-color: var(--krds-color-light-primary-60, #1b4f8c);
}

/* ========================================================
   구인공고(job.php) 2단 레이아웃: 좌 필터 사이드바 + 우 목록 (2026-07)
   ======================================================== */
.jc-job-cols {
    display: flex;
    gap: 2.4rem;
    align-items: flex-start;
}
.jc-filter-side {
    flex: 0 0 26rem;
    position: sticky;
    top: 1.6rem;
}
.jc-job-main {
    flex: 1 1 auto;
    min-width: 0;
}
/* 사이드바 안 필터는 세로 스택 카드 */
.jc-filter-side .jc-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
    padding: 2rem;
    margin-bottom: 0;
}
.jc-filter-side .jc-filter-row--full { flex: 1 1 auto; }
.jc-filter-side .jc-filter-actions { margin-left: 0; }
/* 사이드바에선 지역 접힘 기본 높이를 넉넉히(여러 자치구 노출) */
.jc-filter-side .jc-chip-group--collapsible.is-collapsed { max-height: 13rem; }

/* 모바일 필터 토글 버튼 (기본 숨김, 좁은 화면에서만 노출) */
.jc-filter-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.8rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--krds-light-color-text-basic, #1e2124);
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
}
.jc-filter-toggle[aria-expanded="true"] {
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
    color: var(--krds-color-light-primary-60, #1b4f8c);
}

@media (max-width: 1023px) {
    .jc-job-cols { flex-direction: column; gap: 1.6rem; }
    .jc-filter-side {
        flex-basis: auto;
        width: 100%;
        position: static;
        display: none;
    }
    .jc-filter-side.is-open { display: block; }
    .jc-filter-toggle { display: inline-flex; }
}

/* ========================================================
   구인공고 좌측 사이드바 필터: 알약칩 → 체크박스 리스트형 (2026-07)
   (마크업 동일, .jc-filter-side 스코프에서만 외형 변경)
   ======================================================== */
.jc-filter-side .jc-filter-label {
    display: block;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--krds-light-color-border-gray-light, #e4e8eb);
    margin-bottom: 0.4rem;
    font-size: 1.5rem;
}
.jc-filter-side .jc-chip-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
/* 지역(자치구)은 라벨이 짧아 2열로 압축 */
.jc-filter-side #grp-region {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 0.6rem;
}
.jc-filter-side #grp-region .jc-chip-reset { grid-column: 1 / -1; }
/* 칩 → 리스트 행 */
.jc-filter-side .jc-chip-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 0;
    border-radius: 0.6rem;
    background: none;
    color: var(--krds-light-color-text-basic, #1e2124);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
}
/* 왼쪽 커스텀 체크박스 상자 */
.jc-filter-side .jc-chip-btn::before {
    content: "";
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    box-sizing: border-box;
    border: 1.5px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: 0.4rem;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-right: 0;
}
.jc-filter-side .jc-chip-btn:hover {
    background: var(--krds-light-color-background-gray-subtle, #f4f5f6);
    color: var(--krds-color-light-primary-60, #1b4f8c);
}
.jc-filter-side .jc-chip-btn.is-on {
    background: var(--krds-color-light-primary-5, #edf3f9);
    color: var(--krds-color-light-primary-60, #1b4f8c);
    font-weight: 600;
}
.jc-filter-side .jc-chip-btn.is-on::before {
    content: "\2713";
    background: var(--krds-color-light-primary-60, #1b4f8c);
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
}
/* 우측 건수 */
.jc-filter-side .jc-chip-cnt {
    margin-left: auto;
    color: var(--krds-light-color-text-subtle, #767676);
    font-size: 1.3rem;
}
.jc-filter-side .jc-chip-btn.is-on .jc-chip-cnt { color: inherit; }
/* '전체'(해제) 행 강조 */
.jc-filter-side a.jc-chip-reset { font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   구인공고 리스트(표)형 — 머리글에서 정렬·검색·필터 (2026-07)
   · 리스트형에서는 좌측 필터를 감추고 표를 화면 전체 폭으로
   ══════════════════════════════════════════════════════════════ */
.jc-view-box .jc-jobtbl-wrap { display: none; }
.jc-view-list .jc-card-list { display: none; }

/* 리스트형: 사이드 필터 숨김 + 본문 전체 폭 */
.jc-view-list .jc-filter-side { display: none !important; }
.jc-view-list .jc-job-cols { display: block; }
.jc-view-list .jc-job-main { width: 100%; max-width: none; }
.jc-view-list .jc-filter-toggle { display: none; }

.jc-jobtbl { table-layout: auto; }
.jc-jobtbl th { padding: 0; position: relative; }
.jc-jobtbl tbody tr.is-closed { opacity: .6; }
.jc-jobtbl tbody td { vertical-align: middle; }

/* 머리글 버튼 */
.jc-th-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.2rem .8rem;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.jc-th-btn:hover { background: rgba(27, 79, 140, .07); }
.jc-th-btn:focus-visible { outline: 2px solid var(--krds-color-light-primary-60, #1b4f8c); outline-offset: -2px; }
.jc-th-ico { font-size: 1.1rem; opacity: .55; }
.jc-th.is-active .jc-th-btn { color: var(--krds-color-light-primary-60, #1b4f8c); }
.jc-th.is-active .jc-th-btn::after {
    content: "";
    width: .6rem; height: .6rem; border-radius: 50%;
    background: var(--krds-color-light-primary-60, #1b4f8c);
}

/* 머리글 팝업 */
.jc-th-pop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    min-width: 22rem;
    max-width: 30rem;
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: .8rem;
    box-shadow: 0 .6rem 1.8rem rgba(0, 0, 0, .16);
    text-align: left;
    font-weight: 400;
    white-space: normal;
}
.jc-pop-tit { margin: 0 0 .8rem; font-size: 1.4rem; font-weight: 700; }
.jc-pop-item {
    display: block;
    padding: .7rem .9rem;
    border-radius: .6rem;
    font-size: 1.4rem;
    color: inherit;
    text-decoration: none;
}
.jc-pop-item:hover, .jc-pop-item:focus { background: #eef3fb; }
.jc-pop-item.is-on { background: var(--krds-color-light-primary-60, #1b4f8c); color: #fff; font-weight: 700; }
.jc-th-pop input[type=text] {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: .6rem;
    font-size: 1.4rem;
    box-sizing: border-box;
}
.jc-pop-opts { max-height: 26rem; overflow-y: auto; margin-bottom: 1rem; }
.jc-pop-chk {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .4rem;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: .4rem;
}
.jc-pop-chk:hover { background: #f4f6f9; }
.jc-pop-btns { display: flex; gap: .8rem; margin-top: 1rem; }

/* 페이지 이동 */
.jc-paging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: 3.2rem 0 1.2rem;
}
.jc-pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    height: 4rem;
    padding: 0 1rem;
    border: 1px solid var(--krds-light-color-border-gray, #cdd1d5);
    border-radius: .6rem;
    background: #fff;
    color: var(--krds-light-color-text-basic, #1e2124);
    font-size: 1.5rem;
    text-decoration: none;
}
.jc-pg:hover, .jc-pg:focus { border-color: var(--krds-color-light-primary-60, #1b4f8c); color: var(--krds-color-light-primary-60, #1b4f8c); }
.jc-pg.is-on {
    background: var(--krds-color-light-primary-60, #1b4f8c);
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
    color: #fff;
    font-weight: 700;
}
.jc-pg-info { margin-left: .8rem; font-size: 1.4rem; color: var(--krds-light-color-text-subtle, #5c6776); }

@media (max-width: 767px) {
    .jc-jobtbl-wrap { overflow-x: auto; }
    .jc-jobtbl { min-width: 68rem; }
    .jc-th-pop { min-width: 20rem; }
}

/* 정렬 토글 — 박스형/리스트형과 같은 모양이되 <a> 링크라 밑줄·색 상속 보정 */
.jc-sort-toggle .jc-view-btn {
    text-decoration: none;
    white-space: nowrap;
}
.jc-sort-toggle .jc-view-btn:hover {
    background: #eef3fb;
    color: var(--krds-color-light-primary-60, #1b4f8c);
}
.jc-sort-toggle .jc-view-btn[aria-pressed="true"],
.jc-sort-toggle .jc-view-btn[aria-pressed="true"]:hover {
    background: var(--krds-color-light-primary-60, #1b4f8c);
    color: #fff;
    font-weight: 700;
}

/* ── 메인 슬라이드: 제목을 숨겨도 링크로 이동할 수 있게 ──
   visual-cover : 배너 전체 클릭 영역(마우스용). 컨트롤(이전/다음/정지)보다 아래에 두어 버튼을 가리지 않는다.
   visual-more  : 우측 하단 '자세히 보기' — 키보드·스크린리더 사용자를 위한 실제 링크 */
.main-visual .swiper-slide { position: relative; }
.main-visual .visual-cover {
    position: absolute;
    inset: 0;
    z-index: 2;              /* 배경/영상 위, 컨트롤(z-index 5) 아래 */
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}
.main-visual .visual-controls { position: relative; z-index: 5; }
.main-visual .visual-more {
    position: absolute;
    right: 2.4rem;
    bottom: 6.4rem;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.8rem;
    background: rgba(255, 255, 255, .95);
    color: var(--krds-color-light-primary-60, #1b4f8c);
    border: 1px solid var(--krds-color-light-primary-60, #1b4f8c);
    border-radius: 999px;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 .2rem .8rem rgba(0, 0, 0, .18);
}
.main-visual .visual-more:hover,
.main-visual .visual-more:focus {
    background: var(--krds-color-light-primary-60, #1b4f8c);
    color: #fff;
}
.main-visual .visual-more:focus-visible { outline: 3px solid #E85D11; outline-offset: 2px; }
@media (max-width: 767px) {
    .main-visual .visual-more { right: 1.6rem; bottom: 5.6rem; padding: .8rem 1.4rem; font-size: 1.3rem; }
}

/* 모바일 전체메뉴 안의 '쉬운 화면' 버튼 (헤더 유틸리티가 모바일에서 숨겨지므로) */
.jc-easy-link--mo {
    display: inline-flex;
    margin-top: 1rem;
    padding: 0.8rem 1.6rem;
    font-size: 1.5rem;
    border-color: var(--krds-color-light-primary-60, #1b4f8c);
    color: var(--krds-color-light-primary-60, #1b4f8c);
    background: #fff;
}