@charset "UTF-8";
/* scope_pub_css.py 생성물. 직접 고치지 않는다.
   원본은 퍼블 전달본의 sub.css 다. 그것을 고치고 스크립트를 다시 돌린다 */
/* ============================================================
   sub.css — 서브페이지 전용
   ------------------------------------------------------------
   구성:
     [1] 서브 헤더 
     [2] 지역기업db 페이지 (localCompanyDB)
     [3] 연구장비db 페이지 (equipment-db)
     [4] 취업정보 페이지 (jobs)
     [5] 산학기술매칭 페이지 (tech-matching)
     [6] 상세 페이지 (***-detail)
   ============================================================ */

/* ============================================================
   [1] 서브 헤더
   ============================================================ */

.ext-body .sub-header {
    height: 72px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
.ext-body .sub-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    position: relative;
}
.ext-body .sub-header .logo {
    font-size: 22px;
    font-weight: 700;
    color: #1a202c;
    font-family: var(--font-title);
    letter-spacing: -0.01em;
}

.ext-body .sub-header nav.gnb ul.gnb-top {
    display: flex;
    gap: 8px;
    height: 100%;
}
.ext-body .gnb-item {
    position: relative;
    height: 100%;
}
.ext-body .gnb-item:hover .gnb-sub {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.ext-body .gnb-label {
    cursor: pointer;
    color: #4a5568;
    font-size: 18px;
    font-weight: 600;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    border-bottom: 2px solid transparent;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}
.ext-body .gnb-item:hover .gnb-label, .ext-body .gnb-item:focus-within .gnb-label {
    color: var(--kor-red);
}
.ext-body .gnb-label.active {
    color: var(--kor-red);
    font-weight: 700;
    border-bottom-color: var(--kor-red);
}

.ext-body .gnb-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 180px;
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 12px 0;
    transform: translateX(-50%) translateY(-8px);
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
}
.ext-body .gnb-sub li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    color: #4a5568;
}
.ext-body .gnb-sub li a:hover {
    background: #f9f9f9;
    color: var(--kor-red);
}
.ext-body .gnb-toggle {
    display: none;
}
.ext-body .locked {
    overflow: hidden;
}

/* 모달 열림 상태의 본문 스크롤 잠금 */
html.locked,
body.locked {
    overflow: hidden;
}

@media (max-width: 1440px) {
    .ext-body .sub-header {
        height: 54px;
    }
    .ext-body .sub-header .logo {
        font-size: 18px;
        line-height: 1;
    }
    .ext-body .gnb-toggle {
        display: block;
        font-size: 24px;
        height: 24px;
        color: #1a202c;
        line-height: 1;
    }
    .ext-body .sub-header nav.gnb {
        position: fixed;
        top: 54px;
        right: 0;
        height: 100vh;
        width: 100%;
        background: #fff;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        z-index: 99;
        overflow-y: auto;
    }
    .ext-body .sub-header nav.gnb.is-open {
        transform: translateX(0);
    }
    .ext-body .sub-header nav.gnb ul.gnb-top {
        flex-direction: column;
        gap: 0;
        height: auto;
    }
    .ext-body .gnb-label {
        width: 100%;
        height: auto;
        justify-content: space-between;
        padding: 16px 32px;
        font-size: 16px;
        border-bottom: none;
        border-left: 3px solid transparent;
        text-align: left;
    }
    .ext-body .gnb-label.active {
        border-left-color: var(--kor-red);
        color: var(--kor-red);
    }
    .ext-body .gnb-item > .gnb-label::after {
        font-family: "boxicons";
        content: "\f2a0";
        font-size: 18px;
        color: #718096;
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }
    .ext-body .gnb-item.is-open > .gnb-label::after {
        transform: rotate(180deg);
    }
    .ext-body .gnb-sub {
        position: static;
        display: none;
        flex-direction: column;
        background: #f9f9f9;
        padding: 8px 32px 16px 32px;
        min-width: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .ext-body .gnb-item.is-open .gnb-sub {
        display: flex;
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    .ext-body .gnb-sub li a {
        padding: 8px 0;
    }
    .ext-body .gnb-sub li a:hover {
        background: none;
    }
}
@media (max-width: 1024px) {
    .ext-body .gnb-label {
        padding: 16px 28px;
    }
    .ext-body .gnb-sub {
        padding: 8px 28px 16px 28px;
    }
}
@media (max-width: 768px) {
    .ext-body .gnb-label {
        padding: 16px 20px;
    }
    .ext-body .gnb-sub {
        padding: 8px 20px 16px 20px;
    }
}
@media (max-width: 480px) {
    .ext-body .gnb-label {
        padding: 16px;
    }
    .ext-body .gnb-sub {
        padding: 8px 16px 16px 16px;
    }
}

/* ============================================================
   [2] 지역기업db 페이지 (company-db)
   ============================================================ */

.ext-body .breadcrumb {
    padding: 102px 0 0;
}
.ext-body .breadcrumb ul {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ext-body .breadcrumb li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #718096;
}
.ext-body .breadcrumb li:not(:last-child)::after {
    font-family: "boxicons";
    content: "\f2ea";
    font-size: 19px;
}
.ext-body .breadcrumb li:last-child {
    color: var(--kor-red);
    font-weight: 600;
}

.ext-body .page-title {
    padding: 40px 0;
}
.ext-body .page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #1a202c;
}

.ext-body .stats-summary {
    background: #f6f6f6;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.ext-body .stats-summary h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}
.ext-body .stats-summary .desc {
    color: var(--ink-700);
    line-height: normal;
}

.ext-body .stats-content {
    display: flex;
    align-items: center;
    gap: 40px;
}
.ext-body .donut-chart {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}
.ext-body .donut-chart canvas {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.ext-body .donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
}
.ext-body .donut-center strong {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}
.ext-body .donut-center span {
    display: block;
    line-height: 1;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink-500);
}

.ext-body .category-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px 16px;
    flex: 1;
}
.ext-body .category-grid li {
    background: #fff;
    border-left: 4px solid var(--cat-color, #ccc);
    border-radius: 8px;
    padding: 16px;
    text-align: right;
}
.ext-body .category-grid li .cat-name {
    display: block;
    color: var(--ink-500);
    font-size: 15px;
    line-height: 1;
}
.ext-body .category-grid li .cat-value {
    display: block;
    font-weight: 700;
    font-size: 15px;
    color: #2a2e33;
    line-height: 1;
    margin-top: 10px;
}

.ext-body .stats-notice {
    background: #fdecec;
    border-radius: 20px;
    padding: 20px 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 30px;
}
.ext-body .stats-notice::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: url(../images/sub/information_circle.svg) no-repeat center center / contain;
}
.ext-body .stats-notice li {
    color: var(--ink-700);
    font-weight: 500;
    display: flex;
}
.ext-body .stats-notice li::before {
    content: "•";
    padding: 0 4px;
}

@media (max-width: 1440px) {
    .ext-body .breadcrumb {
        padding-top: 70px;
    }
    .ext-body .page-title h1 {
        font-size: 30px;
        margin-bottom: 12px;
    }
    .ext-body .stats-summary {
        flex-direction: column;
        gap: 24px;
        padding: 32px;
        border-radius: 12px;
    }
    .ext-body .stats-summary .desc {
        font-size: 15px;
    }
    .ext-body .stats-summary .desc br {
        display: none;
    }
    .ext-body .stats-content {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .ext-body .donut-chart {
        width: 160px;
        height: 160px;
    }
    .ext-body .donut-center strong {
        font-size: 22px;
    }
    .ext-body .category-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .ext-body .category-grid li {
        padding: 10px 14px;
    }
    .ext-body .category-grid li .cat-name {
        font-size: 15px;
    }
    .ext-body .category-grid li .cat-value {
        font-size: 14px;
    }
    .ext-body .stats-notice {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 16px;
        border-radius: 12px;
    }
    .ext-body .stats-notice::before {
        width: 30px;
        height: 30px;
    }
    .ext-body .stats-notice li {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    .ext-body .page-title {
        padding: 32px 0;
    }
    .ext-body .page-title h1 {
        font-size: 26px;
        margin-bottom: 6px;
    }
    .ext-body .page-title p {
        font-size: 15px;
        text-wrap: pretty;
    }
    .ext-body .stats-summary {
        padding: 20px;
    }
    .ext-body .stats-summary h2 {
        font-size: 20px;
        margin-bottom: 6px;
    }
    .ext-body .stats-summary .desc {
        font-size: 14px;
    }
    .ext-body .donut-chart {
        width: 140px;
        height: 140px;
    }
}
@media (max-width: 480px) {
    .ext-body .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* 검색필터 */
.ext-body .filter-panel {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 72px;
    overflow: hidden;
}
.ext-body .filter-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.ext-body .filter-wrap.col3 {
    grid-template-columns: repeat(3, 1fr);
}
.ext-body .filter-set {
    padding: 0;
    border: none;
}

.ext-body .filter-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: #f7f7f7;
    border-bottom: 1px solid #e4e8ee;
    border-right: 1px solid #e4e8ee;
    color: #1a202c;
    font-weight: 700;
}
.ext-body .filter-list {
    height: 324px;
    padding: 16px 12px;
    overflow-y: auto;
    border-right: 1px solid #e4e8ee;
}
.ext-body .filter-set:last-child .filter-title, .ext-body .filter-set:last-child .filter-list {
    border-right: none;
}
.ext-body .filter-list::-webkit-scrollbar {
    width: 2px;
}
.ext-body .filter-list::-webkit-scrollbar-track {
    background: transparent;
}
.ext-body .filter-list::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 999px;
}

.ext-body .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 18px;
    cursor: pointer;
    margin-top: 2px;
}
.ext-body .filter-item span {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #222;
}
.ext-body .filter-item input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ext-body .filter-item span::before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid #cbd5e0;
}
.ext-body .filter-item input[type="checkbox"]:checked + span::before {
    font-family: "boxicons";
    content: "\f2d2";
    color: #fff;
    background-color: var(--kor-red);
    border-color: var(--kor-red);
    font-weight: 400;
}
.ext-body .filter-item:has(input:checked) {
    background: #f5f5f5;
}
.ext-body .filter-item:has(input:checked) span {
    color: var(--kor-red);
    font-weight: 600;
}

.ext-body .filter-tags {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 30px 40px;
    background: #f7f7f7;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.ext-body .filter-count {
    flex: 0 0 auto;
    min-width: 92px;
    white-space: nowrap;
    height: 36px;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ext-body .filter-count strong {
    color: var(--kor-red);
}
.ext-body .filter-tags-list {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ext-body .filter-tag {
    padding: 8px 12px 8px 16px;
    background: #ebecf5;
    font-size: 16px;
    font-weight: 500;
    color: #444;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ext-body .filter-tag button {
    width: 20px;
    height: 20px;
}
.ext-body .filter-tag button i {
    color: #9e9e9e;
    font-size: 20px;
}

.ext-body .filter-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 30px 40px;
    background: #f7f7f7;
}
.ext-body .input-wrap {
    display: flex;
    gap: 8px;
    width: 100%;
}
.ext-body .select-wrap {
    position: relative;
    overflow: hidden;
    width: fit-content;
    border: 1px solid #dcdcdc;
    background-color: #fff;
    flex: 0 0 160px;
    border-radius: 8px;
    height: 44px;
}
.ext-body .select-wrap::after {
    font-family: "boxicons";
    content: "\f2e4";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    font-size: 24px;
    color: #141b34;
    pointer-events: none;
    z-index: 1;
}
.ext-body .select-wrap:has(select:disabled) {
    background: #f5f5f5;
}
.ext-body .select-wrap:has(select:disabled) select {
    color: #aaa;
}
.ext-body .select-wrap:has(select:disabled)::after {
    color: #aaa;
}
.ext-body .search-select {
    height: 100%;
    width: 100%;
    padding: 0 16px;
    padding-right: 40px; /* 화살표 자리 확보 (겹침 방지) */
    font-size: 16px;
    border: none;
    background-color: transparent;
    appearance: none; /* 브라우저 기본 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
}
.ext-body .search-input {
    height: 100%;
    border-color: #dcdcdc;
    font-size: 16px;
    width: 100%;
    border-radius: 8px;
    padding-right: 36px;
}
.ext-body .search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.ext-body .search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.ext-body .clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}
.ext-body .clear-btn:hover {
    color: #4b5563;
}
.ext-body .clear-btn[hidden] {
    display: none;
}

.ext-body .btn-wrap {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.ext-body .btn-wrap button {
    height: 44px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    font-weight: 500;
}
.ext-body .reset-btn {
    background: #fff;
    padding: 0 20px;
    border: 1px solid #b8bbc5;
    color: #444;
}
.ext-body .search-btn {
    font-weight: 700;
    padding: 0 32px;
    color: #fff;
    background: linear-gradient(90deg, #d21e37 0%, #990018 100%);
}

@media (max-width: 1440px) {
    .ext-body .filter-panel {
        margin-bottom: 48px;
    }
    .ext-body .filter-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .ext-body .filter-title {
        height: 40px;
        font-size: 15px;
        padding: 0 16px;
    }
    .ext-body .filter-set:nth-child(2) .filter-title, .ext-body .filter-set:nth-child(2) .filter-list {
        border-right: none;
    }
    .ext-body .filter-set:nth-child(3) .filter-title, .ext-body .filter-set:nth-child(4) .filter-title {
        border-top: 1px solid #e4e8ee;
    }
    .ext-body .filter-list {
        height: 200px;
        padding: 10px;
    }
    .ext-body .filter-item span {
        font-size: 15px;
    }

    .ext-body .filter-count {
        font-size: 15px;
        height: 34px;
    }
    .ext-body .filter-tags, .ext-body .filter-search {
        padding: 16px 20px;
    }
    .ext-body .filter-tag {
        font-size: 14px;
        padding: 6px 12px 6px 16px;
        gap: 8px;
    }

    .ext-body .filter-search {
        flex-direction: column;
        align-items: flex-end;
    }
}
@media (max-width: 768px) {
    .ext-body .filter-wrap {
        display: block;
    }
    .ext-body .filter-set {
        border-bottom: 1px solid #e4e8ee;
    }
    .ext-body .filter-set:last-child {
        border-bottom: none;
    }
    .ext-body .filter-set:nth-child(3) .filter-title, .ext-body .filter-set:nth-child(4) .filter-title {
        border-top: none;
    }

    .ext-body .filter-title {
        position: relative;
        height: 50px;
        border-right: none;
        border-bottom: none;
    }
    .ext-body .filter-title::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 16px;
        width: 8px;
        height: 8px;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        transform: translateY(-65%) rotate(45deg);
        transition: transform 0.25s ease;
    }
    .ext-body .filter-list {
        height: 0;
        max-height: 0;
        padding: 0 8px;
        overflow: hidden;
        border-right: none;
        opacity: 0;
        transition:
            max-height 0.3s ease,
            padding 0.3s ease,
            opacity 0.2s ease;
    }
    .ext-body .filter-set.is-open .filter-list {
        height: 200px;
        max-height: 200px;
        padding: 12px 8px;
        overflow-y: auto;
        opacity: 1;
    }
    .ext-body .filter-set.is-open .filter-title::after {
        transform: translateY(-35%) rotate(225deg);
    }

    .ext-body .filter-tags {
        flex-direction: column;
        height: auto;
        gap: 8px;
    }
    .ext-body .filter-count {
        flex: auto;
    }

    .ext-body .input-wrap {
        flex-direction: column;
    }
    .ext-body .select-wrap, .ext-body .search-input {
        flex: auto;
        height: 40px;
        width: 100%;
    }
    .ext-body .btn-wrap button {
        font-size: 15px;
    }
}
@media (max-width: 480px) {
    .ext-body .btn-wrap {
        width: 100%;
    }
    .ext-body .btn-wrap button {
        width: 100%;
    }
}

/* 기업 검색 결과 */
.ext-body .search-results {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 96px;
}
.ext-body .result-main {
    width: 100%;
}
.ext-body .result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.ext-body .result-head p {
    color: #4a5568;
    font-size: 16px;
    font-weight: 500;
}
.ext-body .result-head strong {
    color: #1a202c;
    font-weight: 800;
}
.ext-body .sort-wrap {
    display: flex;
    gap: 8px;
}
.ext-body .sort-wrap .select-wrap {
    height: 33px;
    border-radius: 6px;
    border-color: #d0d0d0;
    flex: auto;
}
.ext-body .sort-wrap .select-wrap::after {
    font-size: 20px;
    right: 8px;
}
.ext-body .sort-wrap .select-wrap .search-select {
    color: var(--ink-700);
    font-size: 14px;
    padding: 0 36px 0 12px;
}

.ext-body .results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
}
.ext-body .results-grid.col3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ext-body .grid-card {
    display: flex;
    gap: 32px;
    padding: 24px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #fff;
    transition: all 0.3s;
}
.ext-body .grid-card:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.ext-body .card-img {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 158px;
    height: 138px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}
.ext-body .card-img.logo {
    padding: 12px;
}
.ext-body .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ext-body .card-img.logo img {
    object-fit: contain;
}
.ext-body .card-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
}
.ext-body .card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.ext-body .card-badges span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}
.ext-body .card-badges .badge-red {
    background: #fdecec;
    color: var(--kor-red);
}
.ext-body .card-info h3 {
    overflow: hidden;
    margin-bottom: 12px;
    color: var(--ink-900);
    font-size: 20px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.ext-body .card-info .txt {
    margin-bottom: 4px;
    color: var(--ink-700);
    font-size: 16px;
    font-weight: 600;
}
.ext-body .card-info .txt span {
    margin-right: 4px;
    color: #888;
    font-weight: 400;
}
.ext-body .card-info .card-desc {
    overflow: hidden;
    color: var(--ink-900);
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.ext-body .card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f1f1;
    color: #777;
    font-size: 14px;
    font-weight: 500;
}
.ext-body .card-foot .detail-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #5864ae;
    font-weight: 600;
}
.ext-body .card-foot .detail-link i {
    font-size: 18px;
}

.ext-body .data-none {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 18px;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    grid-column: 1 / -1;
}

.ext-body .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding-top: 30px;
}
.ext-body .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: #777;
    font-size: 16px;
    font-weight: 600;
}
.ext-body .pagination a.active {
    background: #4d4d4d;
    color: #fff;
}
.ext-body .pagination a i {
    color: #4d4d4d;
    font-size: 22px;
}

/* 가이드 */
.ext-body .result-guide {
    flex: 0 0 260px;
    padding: 24px;
    border-radius: 20px;
    background: #f9f9f9;
}
.ext-body .result-guide section + section {
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid #e5eaef;
}
.ext-body .result-guide h2 {
    margin-bottom: 12px;
    color: #1a202c;
    font-size: 16px;
    font-weight: 800;
}
.ext-body .result-guide dl {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ext-body .result-guide dt {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    line-height: 1;
    border-radius: 4px;
    background: #d8e5f7;
    color: #003478;
    font-size: 13px;
    font-weight: 500;
}
.ext-body .result-guide dd {
    margin-top: 7px;
    padding-left: 4px;
    color: var(--ink-700);
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 1440px) {
    .ext-body .results-grid.col3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .ext-body .search-results {
        flex-direction: column;
        gap: 24px;
    }
    .ext-body .grid-card {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }
    .ext-body .card-info h3 {
        font-size: 18px;
    }
    .ext-body .card-info .txt, .ext-body .card-info .card-desc {
        font-size: 14px;
    }
    .ext-body .card-badges span {
        font-size: 13px;
    }
    .ext-body .result-guide {
        width: 100%;
        flex: auto;
    }
    .ext-body .result-guide dl {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .ext-body .data-none {
        font-size: 16px;
    }
}
@media (max-width: 768px) {
    .ext-body .results-grid, .ext-body .results-grid.col3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ext-body .results-grid li {
        min-width: 0;
    }
    .ext-body .result-guide dl {
        display: grid;
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .ext-body .result-head {
        gap: 12px;
    }
    .ext-body .sort-wrap .select-wrap:last-child {
        display: none;
    }
    .ext-body .grid-card {
        gap: 16px;
        padding: 18px;
    }
    .ext-body .card-info h3 {
        font-size: 18px;
    }
}

/* ============================================================
   [3] 연구장비db 페이지 (equipment-db)
   ============================================================ */

.ext-body .stats-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ext-body .stats-wrap .stats-summary {
    padding: 40px 32px;
    align-items: center;
}
.ext-body .stats-summary dt {
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: 700;
}
.ext-body .stats-summary dd {
    font-size: 14px;
    font-weight: 500;
    color: #777;
}
.ext-body .stats-summary dd strong {
    font-size: 26px;
    font-weight: 800;
    color: var(--kor-red);
    margin-right: 4px;
}

/* depth 있는 필터 */
.ext-body .filter-depth {
    display: grid;
    grid-template-columns: 340px 1fr 1fr;
}
.ext-body .filter-depth2 {
    display: grid;
    grid-template-columns: 340px 340px 1fr;
}
.ext-body .filter-title i {
    color: #858585;
    font-size: 24px;
    margin-left: 8px;
}
.ext-body .filter-list.bg-gray {
    background-color: #f7f7f7;
}
.ext-body .filter-list.bg-gray .filter-item:has(input:checked) {
    background-color: #efefef;
}
.ext-body .filter-group + .filter-group {
    margin-top: 8px;
}
.ext-body .filter-group > p {
    padding: 0 0 8px 8px;
    color: #888;
    font-size: 14px;
    font-weight: 600;
}
.ext-body .filter-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    color: #888;
    font-size: 18px;
    font-weight: 600;
}
.ext-body .filter-empty i {
    font-size: 26px;
    font-weight: 400;
}
.ext-body .favorite-btn i {
    color: #a4a4a4;
    font-size: 20px;
    display: block;
    transition: all 0.3s;
}
.ext-body .favorite-btn:hover i, .ext-body .favorite-btn i.bxf.bx-heart {
    color: #f5004e;
}

/* 이용절차 가이드 */
.ext-body .result-guide.process-guide {
    padding: 30px;
    border-radius: 12px;
}
.ext-body .process-guide h2 {
    font-weight: 700;
    margin-bottom: 20px;
}
.ext-body .process-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.ext-body .process-list li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ext-body .process-list li:last-child {
    min-height: 32px;
}
.ext-body .process-list li:not(:last-child)::after {
    position: absolute;
    top: 32px;
    left: 15px;
    width: 2px;
    height: 13px;
    background: #abbfda;
    content: "";
}
.ext-body .process-list li:not(:last-child)::before {
    position: absolute;
    top: 43px;
    left: 11px;
    z-index: 1;
    width: 0;
    height: 0;
    border-top: 7px solid #abbfda;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: "";
}
.ext-body .step-num {
    display: flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #003478;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.ext-body .process-list p {
    min-width: 0;
    color: var(--ink-900);
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
}
.ext-body .guide-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #f0f0f0;
    color: #003478;
    font-size: 16px;
    font-weight: 700;
}
.ext-body section > .guide-link {
    margin-top: 0;
}

@media (max-width: 1440px) {
    .ext-body .stats-wrap {
        gap: 12px;
    }
    .ext-body .stats-wrap .stats-summary {
        padding: 20px;
        gap: 0;
    }
    .ext-body .stats-summary dt {
        font-size: 18px;
    }
    .ext-body .stats-summary dd {
        font-size: 14px;
    }
    .ext-body .stats-summary dd strong {
        font-size: 22px;
    }

    .ext-body .filter-depth, .ext-body .filter-depth2, .ext-body .filter-wrap.col3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .ext-body .filter-depth > :nth-child(3), .ext-body .filter-depth2 > :nth-child(3), .ext-body .filter-wrap.col3 > :nth-child(3) {
        grid-column: 1 / -1;
    }
    .ext-body .filter-title i {
        font-size: 20px;
    }
    .ext-body .filter-group > p {
        font-size: 13px;
        padding: 0 0 6px 6px;
    }
    .ext-body .filter-empty {
        font-size: 15px;
    }
    .ext-body .filter-empty i {
        font-size: 20px;
    }

    .ext-body .result-guide.process-guide {
        width: 100%;
        padding: 24px;
    }
    .ext-body .process-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
    .ext-body .process-list li::before, .ext-body .process-list li::after {
        display: none;
    }
    .ext-body .step-num {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
    }
    .ext-body .process-list p {
        font-size: 14px;
    }
    .ext-body .guide-link {
        font-size: 15px;
    }
}
@media (max-width: 768px) {
    .ext-body .stats-summary dt {
        font-size: 16px;
    }
    .ext-body .stats-summary dd strong {
        font-size: 18px;
    }
    .ext-body .filter-depth, .ext-body .filter-depth2 {
        grid-template-columns: 1fr;
    }
    .ext-body .filter-title i {
        display: none;
    }

    .ext-body .process-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .ext-body .stats-wrap {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 30px;
    }
    .ext-body .stats-wrap .stats-summary {
        margin-bottom: 0;
        flex-direction: row;
    }

    .ext-body .process-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   [4] 취업정보 페이지 (jobs)
   ============================================================ */

.ext-body .period-label {
    font-size: 15px;
    color: #000;
    font-weight: 500;
    padding-left: 8px;
    min-width: 55px;
}
.ext-body .date-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ext-body .dates {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 10px;
}
.ext-body .dates label {
    position: relative;
    display: block;
    flex: 1;
}
.ext-body .dates input {
    min-width: 160px;
    max-width: 200px;
    width: 100%;
    height: 44px;
    padding: 0 44px 0 16px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 16px;
    cursor: pointer;
}
.ext-body .dates input::placeholder {
    color: #808080;
}
.ext-body .dates i {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none;
}
.ext-body .dates em {
    color: #808080;
    font-size: 14px;
    font-style: normal;
}

/* datepicker */
/* 플러그인 CSS가 페이지별로 sub.css 뒤에 로드되어 body로 우선순위를 보강 */
.ext-body .air-datepicker {
    --adp-width: 290px;
    --adp-font-family: "Pretendard", sans-serif;
    --adp-font-size: 13px;
    --adp-accent-color: var(--purple-500);
    border: 2px solid var(--purple-500);
    border-radius: 14px;
    overflow: hidden;
}
.ext-body .air-datepicker-nav {
    padding: 20px 25px 0;
    border-bottom: 0;
    background: #fff;
    min-height: 24px;
}
.ext-body .air-datepicker-nav--title {
    color: #222;
    font-size: 17px;
    font-weight: 700;
    gap: 5px;
}
.ext-body .air-datepicker-nav--title::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: 2px;
    border-top: 5px solid #222;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
    transition: transform 0.2s ease;
}
.ext-body .air-datepicker-nav--action {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.ext-body .air-datepicker-nav--action i {
    display: none;
}
.ext-body .air-datepicker-nav--action::before {
    font-family: "boxicons";
    content: "\f2a1";
    font-size: 20px;
    line-height: 1;
    color: #222;
}
.ext-body .air-datepicker-nav--action:last-child::before {
    transform: scaleX(-1);
}

.ext-body .air-datepicker--content {
    padding: 20px 25px 0;
}
.ext-body .air-datepicker-body--day-names {
    border-bottom: none;
    padding-bottom: 3px;
}
.ext-body .air-datepicker-body--day-name {
    color: #808080 !important;
    font-size: 11px;
}
.ext-body .air-datepicker-cell {
    height: 25px;
    color: #222;
    border-radius: 50%;
    width: 25px;
    font-size: 13px;
    margin: 0 auto;
}
.ext-body .air-datepicker-cell.-day-:nth-child(7n + 7), .ext-body .air-datepicker-cell.-day-:nth-child(7n + 1) {
    color: #222;
}
.ext-body .air-datepicker-cell.-disabled- {
    color: #c1c1c1 !important;
    cursor: not-allowed;
}
.ext-body .air-datepicker-cell.-month-, .ext-body .air-datepicker-cell.-year- {
    width: 100%;
    color: #222;
    border-radius: 4px;
}
.ext-body .air-datepicker-cell.-current- {
    background: var(--purple-500);
    color: #fff;
    font-weight: 700;
}
.ext-body .air-datepicker--buttons {
    border-top: 0;
    padding: 0;
}
.ext-body .air-datepicker-buttons {
    justify-content: space-between;
    padding: 8px 25px 20px;
}
.ext-body .air-datepicker-buttons .air-datepicker-button {
    width: auto;
    min-height: 24px;
    padding: 2px 7px;
    border: none;
    border-radius: 5px;
    background: #f3f3f3;
    color: #808080;
    font-size: 12px;
    min-width: auto;
}
.ext-body .air-datepicker-cell.-selected-, .ext-body .air-datepicker-cell.-selected-.-current-, .ext-body .air-datepicker-cell.-day-.-other-month-.-selected- {
    border: 1px solid var(--purple-500) !important;
    background-color: #fff !important;
    color: #222 !important;
}
.ext-body .air-datepicker-cell.week-hover {
    background: var(--purple-50);
    border-radius: 0;
}
/* 오늘 날짜는 선택 범위와 주간 hover 상태보다 우선 표시 */
.ext-body .air-datepicker-cell.-day-.-current-, .ext-body .air-datepicker-cell.-day-.-current-.-in-range-, .ext-body .air-datepicker-cell.-day-.-current-.-selected-, .ext-body .air-datepicker-cell.-day-.-current-.week-hover {
    border-radius: 50% !important;
    background: var(--purple-600) !important;
    color: #fff !important;
    font-weight: 700;
}
.ext-body .air-datepicker-button.datepicker_today {
    border-color: #f3f3f3;
}
.ext-body .air-datepicker-button.datepicker_clear {
    background-color: var(--purple-50);
    color: var(--purple-500);
}

/* 카드 내용 */
.ext-body .card-badges p {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-700);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ext-body div.card-desc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.ext-body .card-desc span {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-500);
    font-size: 14px;
    font-weight: 400;
}
.ext-body .card-desc span:first-child::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/sub/icon_man.svg) no-repeat center center / contain;
}
.ext-body .card-desc span.department {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink-900);
}
.ext-body .card-desc span.department::before {
    background: url(../images/sub/icon_department.svg) no-repeat center center / contain;
}
.ext-body .card-desc span:not(:first-child)::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin-right: 4px;
    background: #ccc;
}

.ext-body .card-foot .date {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ext-body .card-foot .date p {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-900);
    line-height: 1;
}
.ext-body .card-foot .date span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    height: 20px;
    line-height: 1;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: #ea2d30;
    color: #fff;
    flex-shrink: 0;
}
.ext-body .card-foot .date .done {
    background: var(--ink-500);
}
.ext-body .card-foot .date .upcoming {
    background: #36b77b;
}

@media (max-width: 1440px) {
    .ext-body .card-badges p {
        font-size: 14px;
    }
    .ext-body .input-wrap:has(.date-group) {
        flex-wrap: wrap;
    }
    .ext-body .input-wrap:has(.date-group) .select-wrap {
        flex: auto;
    }
    .ext-body .input-wrap:has(.date-group) .search-field {
        flex: 1 1 100%;
        order: 3;
        height: 44px;
    }

    .ext-body .card-info div.card-desc {
        margin-top: 0;
    }
    .ext-body .card-desc.col4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: flex-start;
        gap: 0 8px;
        margin-top: 12px;
        max-width: fit-content;
    }
    .ext-body .card-desc span, .ext-body .card-desc span.department {
        font-size: 13px;
    }
    .ext-body .card-desc span:first-child::before {
        display: none;
    }
    .ext-body .card-desc.col4 span:nth-of-type(odd)::before {
        display: none;
    }

    .ext-body .card-info:has(p.period) {
        position: relative;
    }
    .ext-body .card-info:has(p.period) .card-badges {
        padding-right: 30px;
    }
    .ext-body .card-foot:has(p.period) .favorite-btn {
        position: absolute;
        top: 0;
        right: 0;
    }
    .ext-body .card-foot .date p {
        font-size: 13px;
    }
}
@media (max-width: 768px) {
    .ext-body .dates input {
        max-width: none;
    }
    .ext-body .period-label {
        display: none;
    }
}
@media (max-width: 480px) {
    .ext-body .dates {
        flex-direction: column;
        gap: 0;
    }
    .ext-body .dates label {
        width: 100%;
    }

    .ext-body .card-info div.card-desc.col4 {
        display: flex;
        flex-wrap: wrap;
    }
    .ext-body .card-desc.col4 span:first-child {
        width: 100%;
    }
    .ext-body .card-desc.col4 span:nth-child(2)::before {
        display: none;
    }
    .ext-body .card-desc.col4 span:nth-child(3)::before {
        display: block;
    }

    .ext-body .card-foot:has(p.period) .date {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   [5] 산학기술매칭 페이지 (tech-matching)
   ============================================================ */

.ext-body .search-panel {
    padding: 30px 40px;
    background: #f7f7f7;
    border-radius: 12px;
    border: 1px solid #e6ebf2;
    margin-bottom: 72px;
}
.ext-body .field-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 30px;
    margin-bottom: 16px;
}
.ext-body .field-grid .search-field {
    height: 44px;
}
.ext-body .search-field label {
    flex: 0 0 80px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-700);
}
.ext-body .search-field .dates input {
    min-width: 240px;
}
.ext-body .ipc-find-btn {
    position: absolute;
    top: 50%;
    right: 9px;
    transform: translateY(-50%);
    width: 103px;
    height: 28px;
    border-radius: 6px;
    background: var(--kor-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}
.ext-body .search-panel .btn-wrap {
    justify-content: flex-end;
}

.ext-body .results-grid.col3 .card-info h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 원하는 줄 수 (2줄 이후 말줄임) */
    margin-bottom: 24px;
    white-space: wrap;
    height: 52px;
}
.ext-body .card-info .txt + .txt {
    margin-top: -4px;
}

.ext-body .card-info .applicant-btn {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    max-width: 100%;
    color: #5864ae;
}
.ext-body .card-info .applicant-btn b {
    font-weight: 600;
    margin-right: 2px;
}
.ext-body .card-info .applicant-btn i {
    font-size: 24px;
    flex-shrink: 0;
}
.ext-body .card-info .applicant-btn span {
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 1440px) {
    .ext-body .search-panel {
        padding: 16px 20px;
        margin-bottom: 48px;
    }
    .ext-body .field-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ext-body .search-field label {
        font-size: 14px;
    }
    .ext-body .ipc-find-btn {
        width: 98px;
        height: 26px;
        font-size: 13px;
    }
    .ext-body .results-grid.col3 .card-info h3 {
        height: 46px;
    }
    .ext-body .results-grid.col3 .card-info h3, .ext-body .card-info .applicant-btn {
        margin-bottom: 12px;
    }
}
@media (max-width: 768px) {
    .ext-body .field-grid .search-field {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 4px;
    }
    .ext-body .search-field label {
        flex: auto;
    }
    .ext-body .search-field .dates input {
        height: 40px;
    }
    .ext-body .ipc-find-btn {
        transform: translateY(0);
    }
}

/* modal  */
.ext-body .modal-wrap {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    display: flex !important;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.ext-body .modal-wrap.show {
    visibility: visible;
    opacity: 1;
}
.ext-body :has(.modal-wrap.show) {
    overflow: hidden;
}

.ext-body .modal-wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(58, 64, 87, 0.6);
}
.ext-body .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 560px;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 30px;
    max-height: 90%;
    overflow: hidden;
    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.18);
}
.ext-body .modal-content.modal-sm {
    max-width: 360px;
}
.ext-body .modal-content.modal-md {
    max-width: 600px;
}
.ext-body .modal-content.modal-lg {
    max-width: 800px;
}

.ext-body .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 40px 16px;
    line-height: 1;
}
.ext-body .modal-header .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink-900);
}
.ext-body .modal-header .modal-close {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ext-body .modal-header .modal-close i {
    color: #1a202c;
    font-size: 32px;
}

.ext-body .modal-body {
    max-height: calc(100vh - 284px);
    overflow: auto;
    padding: 0 40px;
}
.ext-body .modal-body::-webkit-scrollbar, .ext-body .scroll-body::-webkit-scrollbar {
    width: 4px;
}
.ext-body .modal-body::-webkit-scrollbar-thumb, .ext-body .scroll-body::-webkit-scrollbar-thumb {
    background: #d0d0d0;
}
.ext-body .modal-btn-none-body {
    padding-bottom: 30px;
}
.ext-body .modal-content .select-wrap, .ext-body .modal-content .search-field {
    height: 40px;
}
.ext-body .modal-body .pagination {
    padding-top: 10px;
}

.ext-body .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 17px 40px 30px;
}
.ext-body .modal-btn-wrap {
    display: flex;
    justify-content: center;
    padding: 12px 0;
}
.ext-body .modal-btn {
    display: inline-flex;
    min-width: 110px;
    height: 44px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.ext-body .modal-alert {
    padding: 20px 32px 24px;
    max-width: 480px !important;
    background: #fff;
    border-radius: 20px;
    max-height: fit-content;
    height: auto;
}
.ext-body .modal-alert.info {
    border: 2px solid #c6c6c6;
}
.ext-body .modal-alert.success {
    border: 2px solid #acf7bc;
}
.ext-body .modal-alert.warning {
    border: 2px solid #ffe79d;
}
.ext-body .modal-alert.error {
    border: 2px solid #ffd1d0;
}
.ext-body .modal-alert.question {
    border: 2px solid #cbbffc;
}
.ext-body .modal-alert .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: fit-content;
    height: auto;
}
.ext-body .modal-alert .modal-body p {
    font-size: 15px;
}
.ext-body .modal-alert .modal-body img {
    display: block;
    width: 32px;
    height: 32px;
    margin-bottom: 12px;
}
.ext-body .modal-alert .modal-footer {
    padding: 0;
    margin-top: 24px;
    justify-content: flex-end;
}
.ext-body .modal-alert .modal-footer .btn {
    min-width: 80px;
    height: 32px;
    border-radius: 4px;
    font-size: 14px;
    width: auto;
}

/* IPC 코드 검색 모달 */
.ext-body .ipc-picker .modal-body {
    max-height: calc(100vh - 440px);
    border: 1px solid #d1d5db;
    border-radius: 20px;
    margin: 0 40px;
    padding: 20px 10px;
    overflow: hidden;
}
.ext-body .ipc-picker .scroll-body {
    max-height: calc(100vh - 430px);
    overflow: auto;
    padding: 0 10px;
}
.ext-body .ipc-search {
    display: flex;
    gap: 8px;
}
.ext-body .ipc-search .select-wrap {
    width: 105px;
    flex: none;
}
.ext-body .ipc-search select {
    width: 100%;
    height: 100%;
    padding: 0 32px 0 10px;
    border: 0;
    background: transparent;
    color: #444;
    font-size: 16px;
}
.ext-body .ipc-search input {
    min-width: 0;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    font-size: 16px;
}
.ext-body .ipc-search .search-btn, .ext-body .tech-search .search-btn {
    background: #003478;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 0;
    width: 60px;
    flex-shrink: 0;
    border-radius: 8px;
}

.ext-body .ipc-list {
    padding: 8px 0 0;
}
.ext-body .ipc-row {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: #333;
    font-size: 16px;
}
.ext-body .ipc-row > strong {
    font-weight: 700;
}
.ext-body .ipc-list .filter-item {
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
}
.ext-body .ipc-list .filter-item:has(input:checked), .ext-body .ipc-list .filter-item:has(input:checked) span {
    background-color: transparent;
    color: var(--ink-900);
    font-weight: 400;
}
.ext-body .ipc-list .filter-item span::before {
    display: none;
}
.ext-body .ipc-list .filter-item span strong {
    width: 60px;
}

.ext-body .ipc-list .filter-item::after {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "";
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid #cbd5e0;
}
.ext-body .ipc-list .filter-item:has(input:checked)::after {
    font-family: "boxicons";
    content: "\f2d2";
    color: #fff;
    background-color: var(--kor-red);
    border-color: var(--kor-red);
    font-weight: 400;
}

.ext-body .ipc-children {
    display: grid;
    grid-template-rows: 0fr;
    background: #f9f9f9;
    overflow: hidden;
    transition: grid-template-rows 0.3s ease;
}
.ext-body .ipc-group.is-open .ipc-children {
    grid-template-rows: 1fr;
}
.ext-body .ipc-children-inner {
    overflow: hidden;
    min-width: 0;
}
.ext-body .ipc-children .ipc-row {
    padding-left: 26px;
}
.ext-body .depth-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid #888;
    border-radius: 5px;
    color: #888;
}
.ext-body .depth-toggle i {
    font-size: 14px;
}

.ext-body .ipc-picker .modal-footer {
    display: block;
    padding: 20px 40px 40px;
}
.ext-body .ipc-picker .modal-footer .footer-wrap {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e6ebf2;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}
.ext-body .ipc-selected {
    min-height: 48px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
}

@media (max-width: 768px) {
    .ext-body .modal-header {
        padding: 20px 24px 16px;
    }
    .ext-body .modal-header .modal-title {
        font-size: 18px;
    }
    .ext-body .modal-header .modal-close i {
        font-size: 26px;
    }
    .ext-body .ipc-picker .modal-body {
        margin: 0 24px;
        padding: 16px;
    }
    .ext-body .ipc-search {
        flex-direction: column;
    }
    .ext-body .ipc-search .select-wrap, .ext-body .ipc-search .search-btn {
        width: 100%;
        height: 40px;
    }
    .ext-body .ipc-list .filter-item span strong {
        width: 40px;
        flex: none;
    }
    .ext-body .ipc-picker .modal-footer {
        padding: 20px 24px;
    }
    .ext-body .ipc-picker .modal-footer .footer-wrap {
        padding: 16px;
    }
    .ext-body .ipc-selected {
        min-height: 40px;
        padding: 0 16px;
    }
}

/* 기술 탐색 모달 */
.ext-body .tech-applicant {
    padding: 0 40px 16px;
}
.ext-body .tech-search .modal-body {
    max-height: calc(100vh - 428px);
}

.ext-body .tech-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ext-body .tech-header span {
    color: #888;
    font-size: 15px;
}
.ext-body .tech-applicant p {
    display: flex;
    align-items: baseline;
    color: var(--ink-700);
    font-size: 15px;
    font-weight: 500;
}
.ext-body .tech-applicant p strong {
    font-size: 18px;
    font-weight: 700;
}

.ext-body .tech-modal-search {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #f7f7f7;
}
.ext-body .tech-search-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 4px;
    align-items: center;
}
.ext-body .tech-search-row:has(.search-btn) {
    grid-template-columns: 80px minmax(0, 1fr) 80px;
}
.ext-body .tech-search-row label {
    color: var(--ink-700);
    font-size: 15px;
    font-weight: 500;
}
.ext-body .tech-search .search-btn {
    width: 80px;
    height: 100%;
}

.ext-body .tech-modal-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ext-body .tech-result-count {
    padding-top: 4px;
    color: #4a5568;
    font-size: 16px;
    font-weight: 500;
}
.ext-body .tech-result-count strong {
    color: #1a202c;
    font-weight: 800;
}
.ext-body .tech-modal-results ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ext-body .tech-patent-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #fff;
    transition: all 0.3s;
}
.ext-body .tech-patent-list li:hover .tech-patent-card {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.ext-body .patent-badges {
    display: flex;
    gap: 6px;
    margin-bottom: -8px;
}
.ext-body .patent-badges span {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 8px;
    height: 24px;
    border-radius: 4px;
    background: #fdecec;
    color: var(--kor-red);
    font-size: 13px;
    font-weight: 600;
}
.ext-body .tech-patent-card h3 {
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ext-body .tech-patent-card dl {
    display: flex;
    flex-direction: column;
    font-size: 15px;
}
.ext-body .tech-patent-card dl div {
    display: flex;
    gap: 4px;
}
.ext-body .tech-patent-card dt {
    color: #888;
}
.ext-body .tech-patent-card dd {
    color: var(--ink-900);
    font-weight: 500;
}

@media (max-width: 768px) {
    .ext-body .tech-header {
        margin-bottom: 8px;
    }
    .ext-body .tech-applicant {
        padding: 0 24px 16px;
    }
    .ext-body .tech-applicant p {
        font-size: 14px;
    }
    .ext-body .tech-applicant p strong {
        font-size: 16px;
    }
    .ext-body .tech-modal-search {
        padding: 16px;
        gap: 8px;
    }
    .ext-body .tech-search-row label {
        display: none;
    }
    .ext-body .tech-search-row {
        display: flex;
        width: 100%;
    }
    .ext-body .tech-search-row:has(.search-btn) {
        flex-direction: column;
        gap: 8px;
    }
    .ext-body .tech-search .search-btn {
        width: 100%;
        height: 40px;
    }
    .ext-body .tech-search .modal-body {
        padding: 0 24px;
    }
    .ext-body .tech-result-count {
        padding-top: 0;
        font-size: 14px;
    }
    .ext-body .tech-modal-results ul {
        gap: 8px;
    }
    .ext-body .tech-patent-card {
        gap: 10px;
        padding: 16px;
    }
    .ext-body .patent-badges {
        margin-bottom: -4px;
    }
    .ext-body .tech-patent-card h3 {
        font-size: 16px;
    }
    .ext-body .tech-patent-card dl {
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .ext-body .tech-header {
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }
    .ext-body .tech-applicant p {
        flex-direction: column;
    }
}

/* 기술 상세 매칭/상담신청 모달 */
.ext-body .consult-form, .ext-body .consent-box {
    padding: 20px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ext-body .consult-form .field {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 4px;
    align-items: center;
}
.ext-body .consult-form .field .label {
    color: #444;
    font-size: 15px;
    font-weight: 500;
}
.ext-body .consult-form .field dd {
    min-width: 0;
    padding: 0 8px;
    color: #222;
    font-size: 16px;
    font-weight: 600;
}
.ext-body .consult-form .field dd strong {
    font-size: 18px;
    font-weight: 700;
}
.ext-body .consult-form .required {
    color: #ea2d30;
}
.ext-body .consult-form input, .ext-body .consult-form textarea {
    width: 100%;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 16px;
}
.ext-body .consult-form input {
    height: 40px;
    padding: 0 16px;
}
.ext-body .consult-form textarea {
    height: 160px;
    padding: 12px 16px;
    resize: vertical;
}
.ext-body .consult-form input::placeholder, .ext-body .consult-form textarea::placeholder {
    color: #999;
}
.ext-body .consult-form .field:has(textarea), .ext-body .consult-form .field:has(.file-upload-btn) {
    align-items: start;
}
.ext-body .consult-form .field:has(textarea) > label, .ext-body .consult-form .field:has(.file-upload-btn) > label {
    padding-top: 11px;
}

.ext-body .phone-input {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ext-body .phone-input input {
    width: 80px;
}
.ext-body .phone-input span {
    color: #999;
}
.ext-body .consult-form .field:has(.file-upload-btn) {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 8px;
}
.ext-body .file-upload-btn {
    justify-self: start;
    width: 100px;
    height: 40px;
    border-radius: 8px;
    background: #2a3aa9;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.ext-body .file-chip-list {
    display: flex;
    flex-wrap: wrap;
    grid-column: 2;
    gap: 4px;
}
.ext-body .file-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dcdcdc;
    border-radius: 999px;
    background: #eff1f9;
    color: #222;
    font-size: 16px;
    max-width: 100%;
}
.ext-body .file-chip .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ext-body .file-chip button {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid #666;
    border-radius: 50%;
    color: #555;
}
.ext-body .file-chip button i {
    font-size: 14px;
}

.ext-body .consent-box {
    gap: 6px;
    margin-top: 16px;
    color: #444;
    font-size: 15px;
}
.ext-body .consent-title {
    font-weight: 700;
}
.ext-body .consent-desc {
    font-weight: 500;
}

.ext-body .consent-options {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}
.ext-body .radio-item span {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #444;
}
.ext-body .radio-item input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ext-body .radio-item span::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #dcdcdc;
    border: 8px solid #dcdcdc;
    box-sizing: border-box;
    background-clip: padding-box;
}
.ext-body .radio-item input[type="radio"]:checked + span::before {
    border-color: var(--kor-red);
    background: #fff;
    background-clip: padding-box;
    box-shadow:
        inset 0 0 0 6px #fff,
        0 0 0 0 transparent;
    position: relative;
}

.ext-body .modal-notice {
    margin-top: 16px;
    color: #444;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    padding-left: 20px;
}
.ext-body .modal-notice li::before {
    content: "· ";
}
.ext-body .consult-request .btn-wrap .search-btn {
    min-width: 120px;
}

@media (max-width: 768px) {
    .ext-body .consult-request .modal-body {
        padding: 0 24px 24px;
    }
    .ext-body .consult-form, .ext-body .consent-box {
        padding: 16px;
        border-radius: 16px;
    }
    .ext-body .consult-form .field, .ext-body .consult-form .field:has(.file-upload-btn) {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ext-body .consult-form .field:has(textarea) > label, .ext-body .consult-form .field:has(.file-upload-btn) > label {
        padding-top: 0;
    }
    .ext-body .file-chip-list {
        grid-column: 1;
    }
    .ext-body .file-chip {
        font-size: 14px;
        height: 36px;
    }
    .ext-body .file-chip button {
        width: 20px;
        height: 20px;
    }
    .ext-body .consult-form .field dd {
        padding: 0;
    }
    .ext-body .consult-form .field dd strong {
        font-size: 16px;
    }
    .ext-body .consent-box__options {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .ext-body .modal-notice {
        padding-left: 0;
    }
}
@media (max-width: 480px) {
    .ext-body .consent-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ext-body .phone-input input {
        width: 62px;
        padding: 0 10px;
    }
    .ext-body .consult-request .modal-footer {
        padding: 20px 24px;
    }
}

/* ============================================================
   [6] 상세페이지 (***-detail)
   ============================================================ */

.ext-body .page-actions {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 16px 0;
}
.ext-body .page-actions button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 41px;
    padding: 0 14px;
    border: 1px solid #e9e9e9;
    border-radius: 999px;
    background: #fff;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}
.ext-body .page-actions button i {
    font-size: 18px;
    color: #141b34;
}
.ext-body .page-actions button:hover {
    background: #f9fafb;
    border-color: #b8bbc5;
}

.ext-body .detail-body {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 0 0 30px;
}
.ext-body .detail-summary {
    display: flex;
    flex: 0 0 340px;
    flex-direction: column;
    gap: 24px;
}

.detail-layout{width:100%}

.ext-body .detail-logo, .ext-body .detail-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 340px;
    height: 175px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    padding: 20px;
}
.ext-body .detail-img {
    height: 340px;
    padding: 0;
}
.ext-body .detail-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.ext-body .summary-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.ext-body .summary-info .badge {
    padding: 0 8px;
    height: 31px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    background: #fdecec;
    color: #c90a0a;
    font-size: 16px;
    font-weight: 500;
}
.ext-body .summary-info .badge.private {
    background: #f1f1f1;
    color: #444;
}
.ext-body .summary-info h1 {
    color: #1a202c;
    font-size: 28px;
    font-weight: 800;
}
.ext-body .summary-info .subtitle {
    color: #878787;
    font-size: 14px;
    font-weight: 400;
    display: block;
    margin-top: 4px;
}
.ext-body .summary-info .company {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 500;
    display: block;
}
.ext-body .deadline-box {
    padding: 18px 20px;
    margin-top: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: #fafafa;
    border: 1px solid #d1d5db;
    color: #444;
}
.ext-body .deadline-box .txt {
    font-size: 14px;
    font-weight: 700;
    color: #666;
}
.ext-body .deadline-box .date {
    font-size: 16px;
    font-weight: 700;
    color: var(--kor-red);
    line-height: normal;
}
.ext-body .deadline-box .date.done {
    color: #999;
}
.ext-body .deadline-box + .summary-actions {
    margin-top: -4px;
}
.ext-body a.deadline-box {
    justify-content: center;
    gap: 8px;
}
.ext-body .tab-only {
    display: none;
}

.ext-body .main-product {
    margin-top: 12px;
}
.ext-body .main-product.equipmemt {
    margin-top: -4px;
}
.ext-body .main-product span {
    display: block;
    color: var(--ink-900);
    font-size: 14px;
}
.ext-body .main-product strong {
    color: var(--ink-700);
    font-size: 16px;
    font-weight: 600;
}

.ext-body .summary-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    width: 100%;
}
.ext-body .summary-actions .favorite-btn, .ext-body .homepage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 8px;
}
.ext-body .summary-actions .favorite-btn {
    flex: 0 0 110px;
    gap: 4px;
    padding: 0 14px;
    background: #f3f3f3;
    color: #444;
    font-size: 14px;
    font-weight: 500;
}
.ext-body .summary-actions .favorite-btn i {
    font-size: 24px;
}
.ext-body .homepage-btn {
    flex: 1;
    gap: 6px;
    padding: 0 20px;
    background: linear-gradient(90deg, #d21e37, #990018);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.ext-body .homepage-btn i {
    font-size: 15px;
}

.ext-body .detail-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 30px;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    background: #f9f9f9;
}
.ext-body .detail-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ext-body .detail-section h2 {
    padding: 0 8px;
    color: var(--ink-900);
    font-size: 18px;
    font-weight: 700;
}

.ext-body .detail-box {
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #444;
    font-weight: 500;
    line-height: 1.4;
}
.ext-body .overview-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 20px;
}
.ext-body .overview-list > div, .ext-body .detail-list > div {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}
.ext-body .overview-list dt, .ext-body .detail-list dt {
    flex: 0 0 100px;
    color: #777;
    font-size: 14px;
    font-weight: 400;
}
.ext-body .detail-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ext-body .detail-list dd {
    flex: 1;
    line-height: 22px;
}

/* 취업상세 */
.ext-body .job-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 12px;
    background: #ececec;
}
.ext-body .job-number {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #003478;
}
.ext-body .job-number span {
    font-size: 16px;
    font-weight: 500;
}
.ext-body .job-number strong {
    font-size: 18px;
    font-weight: 700;
}
.ext-body .job-meta dl {
    display: flex;
    gap: 30px;
}
.ext-body .job-meta dl div {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ext-body .job-meta dt {
    color: #222;
    font-size: 14px;
    font-weight: 700;
}
.ext-body .job-meta dd {
    color: #444;
    font-size: 16px;
}
.ext-body .job-company, .ext-body .reg-date {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    color: #6f6f6f;
    font-size: 16px;
}
.ext-body .job-company strong, .ext-body .reg-date strong {
    color: #222;
    font-weight: 700;
    font-size: 14px;
}
.ext-body .job-detail .job-company {
    margin-top: 12px;
}
.ext-body .job-detail .job-company strong {
    color: #444;
    font-weight: 600;
    font-size: 16px;
}

.ext-body .job-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.ext-body .job-overview-grid .detail-box {
    gap: 20px;
}
.ext-body .job-overview-grid h3 {
    color: #003478;
    font-size: 16px;
    font-weight: 700;
}
.ext-body .compact-list {
    gap: 8px;
}
.ext-body .compact-list dt {
    flex-basis: 50px;
}

.ext-body .info-box {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 24px;
    border-radius: 12px;
    background: #d8e5f7;
    color: #003478;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.3;
}
.ext-body .info-box strong {
    flex-shrink: 0;
    font-weight: 700;
}
.ext-body .joint-info {
    flex-direction: column;
    gap: 20px;
    color: #222;
    font-weight: 400;
}
.ext-body .info-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.ext-body .info-head h3 {
    color: #003478;
    font-size: 20px;
    font-weight: 700;
}
.ext-body .info-head p {
    font-size: 14px;
}
.ext-body .info-body {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
    padding: 20px;
    border: 1px solid #fff;
    border-radius: 8px;
    box-sizing: border-box;
}
.ext-body .info-body section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ext-body .info-body h4 {
    font-size: 16px;
    font-weight: 700;
}
.ext-body .info-body ul {
    padding-left: 10px;
}
.ext-body .info-body li {
    line-height: 22px;
}
.ext-body .info-body li::before {
    content: "•";
    margin-right: 4px;
}
.ext-body .detail-content:has(.info-box) {
    gap: 20px;
}

.ext-body .product-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding-left: 108px;
}
.ext-body .product-gallery li {
    height: 178px;
    overflow: hidden;
    border-radius: 8px;
}
.ext-body .product-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ext-body .detail-desc {
    color: #222;
    font-size: 16px;
}
.ext-body .detail-source {
    display: flex;
    gap: 9px;
    color: #6f6f6f;
    font-size: 14px;
    line-height: 1.5;
}
.ext-body .detail-source strong {
    flex-shrink: 0;
    color: #444;
    font-weight: 600;
}

.ext-body .detail-actions {
    display: flex;
    justify-content: space-between;
    padding: 30px 0 75px;
    gap: 10px;
}
.ext-body .detail-actions .nav-wrap {
    display: flex;
    gap: 10px;
}
.ext-body .detail-actions .list-btn, .ext-body .detail-actions .nav-btn {
    width: 100px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid #b8bbc5;
    font-size: 15px;
    font-weight: 500;
    color: #444;
}
.ext-body .detail-actions .nav-btn i {
    font-size: 20px;
}

.ext-body .attachment-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.ext-body .attachment-list > li {
    min-width: 0;
}
.ext-body .file-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #f6f6f6;
    color: #444;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s;
    min-width: 0;
}
.ext-body .file-link span {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.ext-body .file-link i {
    display: flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid #141b34;
    border-radius: 50%;
    color: #141b34;
    font-size: 15px;
}
.ext-body .file-link:hover {
    border-color: #aeb5bf;
    background: #f1f1f1;
}

@media (max-width: 1440px) {
    .ext-body .page-actions {
        padding-top: 6px;
    }
    .ext-body .detail-body {
        gap: 24px;
    }
    .ext-body .detail-summary {
        flex: 0 0 260px;
    }
    .ext-body .detail-logo {
        width: 260px;
        height: 150px;
    }
    .ext-body .summary-info .badge, .ext-body .main-product strong {
        font-size: 15px;
    }
    .ext-body .summary-info h1 {
        font-size: 22px;
    }
    .ext-body .summary-info .company {
        margin-bottom: 6px;
        font-size: 16px;
    }
    .ext-body .deadline-box {
        padding: 10px 14px;
        /* flex-direction: column;
        align-items: flex-start;
        gap: 0; */
        margin-top: 0;
    }
    .ext-body a.deadline-box {
        flex-direction: row;
        align-items: center;
    }
    .ext-body .tab-only {
        display: block;
    }

    .ext-body .detail-section h2 {
        font-size: 16px;
    }
    .ext-body .product-gallery {
        padding-left: 0;
        gap: 12px;
    }
    .ext-body .page-actions button {
        height: 36px;
    }
    .ext-body .homepage-btn {
        flex: auto;
    }

    .ext-body .detail-content {
        padding: 24px 20px;
    }
    .ext-body .detail-box {
        padding: 12px 16px;
        font-size: 15px;
    }
    .ext-body .overview-list, .ext-body .detail-list {
        row-gap: 16px;
    }
    .ext-body .overview-list > div, .ext-body .detail-list > div {
        flex-direction: column;
        gap: 0;
    }
    .ext-body .overview-list dt, .ext-body .detail-list dt {
        flex: auto;
    }
    .ext-body .info-box {
        padding: 16px;
        gap: 20px;
        font-size: 15px;
    }
    .ext-body .info-head h3 {
        font-size: 18px;
    }
    .ext-body .info-body {
        padding: 12px;
    }
    .ext-body .info-body h4 {
        font-size: 15px;
    }
    .ext-body .info-body li {
        font-size: 14px;
    }

    .ext-body .job-number strong {
        font-size: 16px;
    }
    .ext-body .job-meta dl {
        gap: 10px;
    }
    .ext-body .job-meta dd, .ext-body .job-company, .ext-body .attachment-list span {
        font-size: 15px;
    }

    .ext-body .job-overview-grid {
        grid-template-columns: 1fr;
    }
    .ext-body .job-overview-grid .detail-box {
        gap: 16px;
    }
    .ext-body .job-overview-grid .detail-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ext-body .file-link {
        padding: 10px 16px;
    }
    .ext-body .detail-desc {
        font-size: 15px;
    }
    .ext-body .summary-actions .favorite-btn {
        flex: none;
    }
    .ext-body .favorite-btn span {
        display: none;
    }
}
@media (max-width: 1024px) {
    .ext-body .detail-body {
        flex-direction: column;
    }
    .ext-body .detail-summary {
        flex-basis: auto;
        width: 100%;
        gap: 24px;
    }
    .ext-body .detail-logo {
        width: 100%;
    }
    .ext-body .detail-img {
        width: 100%;
        height: 300px;
    }
    .ext-body .detail-content {
        width: 100%;
        padding: 20px;
    }
    .ext-body .main-product {
        margin-top: 0;
    }
    .ext-body .overview-list, .ext-body .product-gallery {
        grid-template-columns: 1fr;
    }
    .ext-body .product-gallery li {
        height: 200px;
    }

    .ext-body .job-meta {
        display: block;
        padding: 16px;
    }
    .ext-body .job-company, .ext-body .reg-date {
        padding: 0;
        font-size: 14px;
    }
    .ext-body .reg-date {
        margin-bottom: -12px;
    }
    .ext-body .job-company span {
        display: block;
    }
    .ext-body .job-detail .job-company strong, .ext-body .job-number span {
        font-size: 15px;
    }
    .ext-body .job-overview-grid .detail-list {
        grid-template-columns: 1fr;
    }
    .ext-body .attachment-list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ext-body .tab-only {
        display: none;
    }
}
@media (max-width: 480px) {
    .ext-body .page-actions button span {
        display: none;
    }
    .ext-body .summary-actions .favorite-btn {
        flex: none;
    }
    .ext-body .detail-img {
        height: 200px;
    }
    .ext-body .product-gallery li {
        height: 140px;
    }
    .ext-body .detail-source, .ext-body .info-box {
        flex-direction: column;
        gap: 4px;
    }
    .ext-body .info-box.joint-info {
        gap: 20px;
    }
    .ext-body .job-meta dl, .ext-body .job-company {
        flex-direction: column;
        gap: 0;
    }
    .ext-body .job-company {
        align-items: flex-end;
    }

    .ext-body .detail-actions .nav-btn {
        width: 44px;
    }
    .ext-body .detail-actions .nav-btn span {
        display: none;
    }
}

/********** error **********/
.ext-body .error_page_wrap {
    width: 100%;
    height: 100vh;
}
.ext-body .error_page_wrap .error_inner {
    height: 100%;
    margin: 0 auto;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}
.ext-body .error_page_wrap .error_inner i {
    font-size: 100px;
    color: #ea394d;
}
.ext-body .error_page_wrap .error_inner h2 {
    text-align: center;
    font-weight: 800;
    font-size: 32px;
}
.ext-body .error_page_wrap .error_inner p {
    text-align: center;
    font-size: 18px;
}
.ext-body .error_page_wrap .error_inner .btn_group {
    display: flex;
    gap: 8px;
}
.ext-body .error_page_wrap .error_inner .btn_group .btn {
    width: 135px;
    font-size: 16px;
    height: 48px;
}
.ext-body .btn_light {
    background: #fff;
    border: 1px solid #ccc;
    color: #444;
}
.ext-body .btn_blue {
    background: #257ff4;
    color: #fff;
}
.ext-body .btn_dark {
    background: #555;
    color: #fff;
}