/* ══════════════════════════════════════════════════════════════════════
목록 페이지 배치 (공공채용 / 기업채용 / 정책 / 지원사업 공용)
----------------------------------------------------------------------
이 파일은 배치만 담당한다. 컴포넌트 규격은 components.css 에서만 정의한다.
구조 : ① 페이지 타이틀 → ② 직무 대분류 → ③ 상세검색 → ④ 좌측 필터 + 결과
══════════════════════════════════════════════════════════════════════ */
.jb-listpage{ padding-bottom:var(--jb-sp-9); }
/* ② 직무 대분류 */
.jb-listpage__cat{ padding-top:var(--jb-sp-7); }
/* ④ 좌측 필터 + 결과 — 전환점은 헤더와 동일한 1260 */
.jb-listlayout{ display:grid; grid-template-columns:var(--jb-filter-w) minmax(0,1fr);
gap:var(--jb-sp-8); align-items:start; margin-top:var(--jb-sp-7); }
/* 필터 적용 버튼은 그룹 마지막 구분선과 붙지 않게 한 칸 띄운다 */
.jb-listlayout .jb-filter .jb-btn--block{ margin-top:var(--jb-sp-4); }
/* 교차 배너 (이 직무 관련 청년정책)
🔴 «쓰는 화면이 없다. 새로 넣지 않는다» — FR-LIST09 는 R1 제외 «확정» 기능이다(결정 D97 · 2026-09-18).
정책측에 «직무 축»이 없고 대체 축도 없음이 두 차례 실측으로 확정됐다.
근거 = 02_미결_리스크.md §3 R1 · 03_데이터연동.md CN-LIST-04 폐기.
프로토타입 네 벌(list-guest · list-member · list-corp-guest · list-corp-member)에
2026-09-06 제거 주석이 박혀 있고, 확정 디자인 job-public-list.html 에서도 걷어냈다.
dev 04·06 JSP 에도 `jb-xlink` 는 0건이다(2026-09-18 grep 실측) — 원래 없는 게 맞다.
⚠️ 그렇다고 이 규격을 «지우지도» 않는다 — 규격이 없어서 못 만든 게 아니라
원천 데이터가 없어서 제외한 것이다. 정책측 직무 축이 DB 에 생기면 되살린다.
JSP grep 0건을 「미사용 = 삭제 후보」로 읽으면 틀린다. 「미개발」이다. */
.jb-xlink{ margin-top:var(--jb-sp-8); padding-top:var(--jb-sp-7); border-top:1px solid var(--jb-border); }
.jb-xlink__head{ display:flex; align-items:flex-end; justify-content:space-between;
gap:var(--jb-sp-4); flex-wrap:wrap; margin-bottom:var(--jb-sp-5); }
.jb-xlink__title{ margin:0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-h3); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-xlink__desc{ margin:var(--jb-sp-2) 0 0; font-size:var(--jb-fs-sm); color:var(--jb-muted); }
/* ══ 2026-09-17 단위테스트 04-15 — 1260 이하에서 상세 조건은 «바텀시트» (D60) ═══
정본 = design/css/page-list.css (2026-09-17 CHANGELOG 「태블릿 이하 상세 조건 바텀시트」)
종전: `order:-1` 로 필터를 결과 «위»로 올렸다 → 태블릿(1024·768)에서 화면을 가득 채워
목록을 보려면 한참 스크롤해야 했다.
변경: 필터를 문서 흐름에서 빼고 «아래에서 올라오는 시트»로 만든다.
PC 좌측 패널의 디자인(테두리·그룹 구분선·체크 목록)은 그대로 쓴다.
⚠️ 1261↑ 는 종전 좌측 고정 패널 그대로다 — 아래 규칙은 전부 1260 이하에만 걸린다. */
@media (max-width:1260px){
/* D119 3차 — 1fr 은 최소 폭이 «자식의 최소 내용 폭»이라 넓은 자식(페이지 번호 줄 등)이 열을 화면 밖으로 민다 → minmax(0,1fr) */
.jb-listlayout{ grid-template-columns:minmax(0,1fr); gap:var(--jb-sp-6); }
.jb-listlayout .jb-filter{
position:fixed; left:0; right:0; bottom:0; z-index:var(--jb-z-sheet);
max-height:85vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
margin:0; border-width:1px 0 0; /* 좌우·하단 테두리는 화면에 맞춰 없앤다 */
border-radius:var(--jb-r-card) var(--jb-r-card) 0 0; /* 위쪽 모서리만 둥글게 */
padding-bottom:calc(var(--jb-sp-5) + env(safe-area-inset-bottom, 0px));
box-shadow:0 -8px 24px rgba(0,0,0,.12);
transform:translateY(100%); transition:transform var(--jb-dur-base) var(--jb-ease);
visibility:hidden; }
.jb-listlayout .jb-filter[aria-hidden="false"],
.jb-listlayout .jb-filter.is-open{ transform:translateY(0); visibility:visible; }
/* 손잡이 — 시트임을 알리고 아래로 끌어 닫는 지점 */
.jb-listlayout .jb-filter::before{ content:""; display:block; width:40px; height:4px; margin:0 auto var(--jb-sp-4);
border-radius:var(--jb-r-pill); background:var(--jb-border); }
/* 딤 — 시트 뒤 본문을 덮는다 */
.jb-filterdim{ position:fixed; inset:0; z-index:var(--jb-z-dim); background:rgba(0,0,0,.4);
opacity:0; visibility:hidden; transition:opacity var(--jb-dur-base) var(--jb-ease); }
.jb-filterdim.is-open{ opacity:1; visibility:visible; }
}
/* ── 시트 안의 «하단 액션» — PC 패널과 같은 구성을 유지한다 ──────────────
초기화(제목 줄 우측 아이콘 · 04-3) + 필터 적용(주 버튼). 「조건 저장」은 D55 로 뺀다. */
@media (max-width:1260px){
.jb-listlayout .jb-filter .jb-filter__acts{
display:flex; gap:var(--jb-sp-3); /* 취소 + 필터 적용 — 나갈 길을 «보이게» 둔다 (2026-09-18 · 04 4차 #7 · 정본 page-list.css 동기화) */
position:sticky; bottom:0; z-index:1;
margin:var(--jb-sp-4) calc(var(--jb-sp-5) * -1) calc(var(--jb-sp-5) * -1);
padding:var(--jb-sp-4) var(--jb-sp-5);
padding-bottom:calc(var(--jb-sp-4) + env(safe-area-inset-bottom, 0px));
background:var(--jb-surface); border-top:1px solid var(--jb-border); }
}
/* ── 모바일(≤480) — «같은 시트»를 그대로 쓴다. 폭에 맞춘 미세 조정만 (04-16 · D61) ──
⚠️ 별도의 레거시 모바일 팝업(.pbj_mobile_menu · .m_check_list)을 쓰지 않는다.
⚠️ 종전 `@media (max-width:640px){ .jb-listlayout .jb-filter{ display:none } }` 은 폐기했다 —
640↓ 에서 운영 하단 시트(.pbj_mobile_menu)에 필터를 넘기던 규칙이라 이 시트와 정면으로 부딪힌다. */
@media (max-width:480px){
.jb-listlayout .jb-filter{
max-height:90vh; /* 화면이 좁아 더 높게 */
padding:var(--jb-sp-4); }
.jb-listlayout .jb-filter .jb-filter__options--2{
grid-template-columns:1fr; } /* 근무지역 2열 → 1열 */
.jb-listlayout .jb-filter .jb-filter__acts{
margin:var(--jb-sp-4) calc(var(--jb-sp-4) * -1) calc(var(--jb-sp-4) * -1);
padding:var(--jb-sp-4);
padding-bottom:calc(var(--jb-sp-4) + env(safe-area-inset-bottom, 0px)); }
}
/* ▼ 2026-09-18 · D119 — 정본 design/css/page-list.css 그대로. 시트가 아닐 때(PC)는 「취소」가 할 일이 없다 — 패널이 늘 열려 있으므로 숨긴다
(지금은 06 기업채용 좌측 필터만 data-filter-cancel 을 쓴다) */
@media (min-width:1261px){
.jb-filter__acts [data-filter-cancel]{ display:none; }
}
@media (min-width:1261px){
.jb-filterdim{ display:none; }
}
@media (prefers-reduced-motion:reduce){
.jb-listlayout .jb-filter{ transition:none; }
}
@media (max-width:768px){
.jb-listpage{ padding-bottom:var(--jb-sp-7); }
.jb-listpage__cat{ padding-top:var(--jb-sp-5); }
.jb-listlayout{ margin-top:var(--jb-sp-5); }
.jb-xlink{ margin-top:var(--jb-sp-6); padding-top:var(--jb-sp-5); }
.jb-xlink__title{ font-size:var(--jb-fs-h4); }
}
/* ▼ 2026-09-18 · 04 4차 #3 — 정본 design/css/page-list.css 동기화(D94 · 사용자 확정)
선택조건 칩 = 채용분야 칩과 «같은 크기». 선택조건 칩은 «채용분야 칩»과 같은 것을 다시 보여 주는 자리다 — 크기가 다르면
같은 조건인지 한눈에 이어지지 않는다. × 버튼만 더한다(.jb-chip--removable).
⚠️ 여기서 높이·글자를 «따로» 주지 않는다. components.css 의 .jb-chip 규격을 그대로 쓴다.
⚠️ 자리 = 정본과 같은 순서(아래 「공모·대외활동」 섹션의 `.jb-listfilter .jb-chip`(34px) «앞»). 뒤에 두면 같은 특정도라
대외활동 · 정책 목록(.jb-listfilter 안 __foot 칩)까지 이 규칙이 이긴다. */
.jb-searchbox__foot .jb-chip,
.jb-listfilter__foot .jb-chip{ height:auto; padding:0 var(--jb-sp-5); font-size:var(--jb-fs-base); }
/* ▼ D122 · 04 4차 #9 — 「직무로 찾기」 제목줄 + 공공 캘린더 보조 버튼(D13 · 04 전용 · 정본 규격 밖의 개발 요소)
정본 = `.jb-jobcat__head`(flex · space-between · baseline · wrap)에 제목 · 안내 «둘»뿐 → 안내가 우측 끝.
dev 는 버튼이 3번째 자식이라 space-between 이 안내를 «가운데»로 밀었다(1440 x=573 · 정본 1076).
➡️ PC: 안내에 margin-left:auto — [제목 ……… 안내][버튼] 으로 «안내 + 버튼»이 오른쪽 한 묶음.
➡️ 좁은 폭: D122 — 버튼은 제목과 같은 줄 오른쪽 끝, 안내는 다음 줄(정본도 이 폭에서 안내가 다음 줄로 내려간다).
전환 폭 560 = 한 줄에 필요한 폭(제목 111 + 안내 276 + 버튼 113 + 간격 10×2 = 520 · 로컬 1440 실측) + 좌우 여백 16×2 + 여유.
⚠️ 버튼이 있을 때만 건다(`:has(+ .jb-jobcat__calendar)`) — 06 기업채용 목록의 같은 제목줄(버튼 없음)은 정본 그대로 둔다. */
.jb-jobcat__head > .jb-jobcat__calendar{ flex:none; }
.jb-jobcat__head > .jb-jobcat__desc:has(+ .jb-jobcat__calendar){ margin-left:auto; }
@media (max-width:560px){
.jb-jobcat__head > .jb-jobcat__desc:has(+ .jb-jobcat__calendar){ order:1; flex-basis:100%; margin-left:0; }
.jb-jobcat__head > .jb-jobcat__calendar{ margin-left:auto; }
}
/* ▲ PC 필터 acts margin-top:0 보정 삭제 — components.css 의 dev 전용 `.jb-filter__acts{margin-top}` 을 걷어 상쇄할 것이 없다(D130 4-0) */
/* ══════════════════════════════════════════════════════════════════════
공모·대외활동 목록 — UI2026 2단계 재개발 (2026-09-16)
근거 = 화면설계서 3.5.0 SCR-LXG · 3.6.0 SCR-LXM (스냅샷 3.5.0_cap1)
+ 프로토타입 list-extra-guest.html · list-extra-member.html (구조·간격)
배치 순서 : 경로 → 타이틀·정렬 → 안내 → 추천 콘텐츠 4 → 조건으로 찾기(지역·대상·인기태그 + 선택 조건) → 카드 목록 → 페이지
══════════════════════════════════════════════════════════════════════ */
.jb-listwrap{ padding-top:var(--jb-sp-6); }
/* 타이틀 줄 — 프로토타입 .result-head (제목 좌 · 셀렉트 우) */
.jb-listhead{ margin:var(--jb-sp-2) 0 0; padding-bottom:var(--jb-sp-4); border-bottom:1px solid var(--jb-border); }
.jb-listhead__title{ margin:0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-h3); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-listhead__count{ font-weight:var(--jb-fw-regular); color:var(--jb-muted); }
.jb-listhead__tools{ display:flex; align-items:center; gap:var(--jb-sp-3); flex-wrap:wrap; }
.jb-listhead__tools .jb-select{ width:auto; min-width:120px; }
/* 안내 줄 + 복귀 링크 (FR-LIST37) */
.jb-listguide{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--jb-sp-2);
margin:var(--jb-sp-3) 0 0; font-size:var(--jb-fs-sm); color:var(--jb-muted); }
.jb-listguide .jb-ico{ width:16px; height:16px; }
.jb-listguide .jb-link{ font-family:inherit; font-size:inherit; font-weight:var(--jb-fw-regular); }
/* 추천 콘텐츠 4 (FR-LIST32) — 프로토타입 .grid--4 > .card + .hotissue__thumb */
.jb-listsec{ margin-top:var(--jb-sp-7); }
.jb-listsec__title{ margin:0 0 var(--jb-sp-4); font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-md); color:var(--jb-ink); }
.jb-recocard{ gap:var(--jb-sp-2); }
.jb-recocard__thumb{ display:flex; align-items:center; justify-content:center; aspect-ratio:16/10; overflow:hidden;
border-radius:var(--jb-r-box); background:var(--jb-bg-subtle); color:var(--jb-muted); }
.jb-recocard__thumb img{ width:100%; height:100%; object-fit:cover; }
.jb-recocard__thumb .jb-ico{ width:32px; height:32px; }
.jb-recocard__due{ font-size:var(--jb-fs-2xs); color:var(--jb-muted); }
/* 「조건으로 찾기」 구분 — 프로토타입 .region-sep */
.jb-regionsep{ margin:var(--jb-sp-7) 0 var(--jb-sp-4); padding-top:var(--jb-sp-5); border-top:1px solid var(--jb-border); }
.jb-regionsep__label{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-sm); color:var(--jb-ink); }
/* 조건 필터 — 프로토타입 .listfilter(행 = 라벨 70px + 칩) → 디자인시스템 jb-searchbox(카탈로그 10-3) */
.jb-listfilter{ margin-top:0; padding:var(--jb-sp-2) var(--jb-sp-5); }
.jb-listfilter .jb-searchbox__sub{ margin-top:0; padding:var(--jb-sp-3) 0; }
.jb-listfilter .jb-searchbox__sub + .jb-searchbox__sub{ border-top:1px solid var(--jb-border); }
.jb-listfilter .jb-searchbox__sub-label{ width:80px; padding-top:var(--jb-sp-2); }
/* 🔴 2026-09-24 D194 ① — 정본 `.jb-listfilter .jb-chips{ flex:1 1 auto; min-width:0; gap:sp-2 }` 를 옮겼다.
dev 는 `__sub` 칩만 덮고 있어 «그 밖의 칩»(__foot 등)이 `min-width:0` 없이 남아 있었다.
⚠️ flex 항목은 기본 `min-width:auto` 라 내용만큼 부풀어 말줄임이 안 먹고 가로로 넘친다
(17 대상별 허브에서 실제로 겪은 결함과 같은 층 · 지금은 안 보여도 조건 문구가 길어지면 드러난다).
⚠️ 아래 `__sub` 규칙을 «그대로 둔다» — 더 구체적이라 이 규칙보다 뒤에서 이긴다(모양 변화 0). */
.jb-listfilter .jb-chips{ flex:1 1 auto; min-width:0; gap:var(--jb-sp-2); }
.jb-listfilter .jb-searchbox__sub .jb-chips{ flex:1; min-width:0; gap:var(--jb-sp-2); }
.jb-listfilter .jb-searchbox__applied .jb-chips{ gap:var(--jb-sp-2); }
.jb-listfilter .jb-chip{ height:34px; padding:0 var(--jb-sp-4); font-size:var(--jb-fs-sm); }
/* 04-8(95 지시 · 2026-09-17) — **선택 조건 칩과 채용분야 칩은 같은 규격**이다.
종전엔 여기서만 28px/10px 로 줄여 필터 칩(34px)보다 작았다. 예외를 걷어 한 규격으로 맞춘다. */
.jb-listfilter__none{ font-size:var(--jb-fs-sm); color:var(--jb-muted); }
/* ── 선택 조건 줄 = 조건 박스 안에서 시각적으로 분리된 띠 (95 단위테스트 지시 02-#3 · 2026-09-17)
· 골격(jb-searchbox__foot > jb-searchbox__applied > __applied-label + jb-chips)은 그대로 두고 **배경만 분리**한다
· 배경 --jb-bg-section · 위쪽 구분선 · 좌우는 박스 안쪽 여백에 맞춘다(음수 마진으로 박스 안쪽 끝까지 편다)
· 칩 0개면 줄을 그리지 않는다 — 02 · 08 · 10 · 12 는 JSP 가 [hidden] 으로 접고
(base.css 30행의 `.jb-root [class^="jb-"][hidden]{display:none!important}` 가 컴포넌트 display 를 이긴다),
06 은 골격이 달라(띠 안에 필터 적용 버튼이 없다) `.jb-selcondrow` 클래스를 붙였다 뗐다 한다
· 🚫 04 공공채용은 확정 디자인(A등급 · 아이콘 버튼 + 「선택 저장」)이라 대상이 아니다.
04 의 검색 박스에는 .jb-listfilter 가 없으므로 아래 셀렉터가 닿지 않는다 — 스코프로 04 를 제외한다.
· 적용 화면 : 02 대외활동 · 06 기업채용 · 08 취업교육 · 10 기업지원정책 · 12 일자리지원정책 */
.jb-selcondrow{ border-top:1px solid var(--jb-border); background:var(--jb-bg-section); }
/* 02 · 12 (.jb-searchbox.jb-listfilter > .jb-searchbox__foot) · 08 · 10 (.jb-listfilter > .jb-listfilter__foot) */
.jb-listfilter .jb-searchbox__foot,
.jb-listfilter__foot{
margin:0 calc(var(--jb-sp-5) * -1) calc(var(--jb-sp-2) * -1);
padding:var(--jb-sp-3) var(--jb-sp-5);
}
/* 🔴 2026-09-24 D194 ① — 정본에 있는데 dev 에 «없던» 구분선. 띠가 위 조건 줄과 붙어 보였다.
정본 page-list.css `.jb-listfilter .jb-searchbox__foot{ border-top:1px solid var(--jb-border) }`.
⚠️ parity 도구는 «구분선 유무»를 못 본다 — 전수 대조에서만 드러났다. */
.jb-listfilter .jb-searchbox__foot{ border-top:1px solid var(--jb-border); }
/* 02 · 12 는 .jb-searchbox 카드 안이다 — 띠의 아래 두 귀퉁이를 카드 반경에 맞춘다 */
.jb-searchbox.jb-listfilter .jb-searchbox__foot{ border-radius:0 0 var(--jb-r-card) var(--jb-r-card); }
/* 08 · 10 은 __foot 에 배치 규칙이 따로 없다 — 02 · 12 의 __foot 과 같은 줄로 맞춘다 */
.jb-listfilter__foot{ display:flex; align-items:center; gap:var(--jb-sp-2) var(--jb-sp-3); flex-wrap:wrap; }
.jb-listfilter__foot .jb-chips{ display:flex; align-items:center; gap:var(--jb-sp-2); flex-wrap:wrap; }
/* ⚠️ 종전 `.jb-listfilter__foot .jb-chip{ height:28px; padding:0 10px }` 를 **걷었다**(D81 · 2026-09-17).
정본 04-8 = 「선택 조건 칩은 필터 칩과 같은 규격. 높이·글자·라운딩을 따로 주지 않는다」.
이제 위 144행 `.jb-listfilter .jb-chip`(34px/14px)이 그대로 먹는다 — `__foot` 도 `.jb-listfilter` 안이다.
⚠️ **사문이 아니라 살아 있던 규칙이었다.** 이 줄의 칩은 JSP 가 비워 내보내고 JS 가 그린다
(`#div_SelCondRow[hidden]` → 조건을 고르면 `fn_SyncFilterChips` 가 채운다).
조건을 하나도 안 고른 화면을 재면 0건으로 보이므로 「죽은 규칙」으로 오판하기 쉽다.
→ **08 · 10 의 선택 조건 칩이 28px → 34px 로 «실제로» 커진다.** 02 · 12 는 `.jb-searchbox__foot` 라 무관. */
.jb-listfilter__foot > .jb-btn{ margin-left:auto; }
/* ▲ 06 기업채용 좌측 필터 .choice_wrap 선택 조건 띠 규칙은 D119 3차에서 마크업이 없어져 걷었다 */
/* 활동 카드 (FR-LIST35·36) — 프로토타입 .policard > a.card + .policard__actions(우상단) */
.jb-cardlist{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--jb-sp-3); margin-top:var(--jb-sp-5); }
.jb-actcard{ position:relative; min-width:0; }
/* 요약 한 줄(nowrap)이 칸을 늘리지 않게 min-width:0 · gap = 썸네일↔본문 (12단계 .jb-polcard__link 와 같은 20px) */
.jb-actcard__link{ min-width:0; gap:var(--jb-sp-5); padding-right:104px; }
/* 썸네일 (95 단위테스트 지시 02-#2 · 2026-09-17) — 프로토타입엔 없고 운영에 있는 항목을 사용자가 최종 결정해 소급한다.
규격은 운영 마크업(.img_wrap 225×170)이 아니라 같은 화면군 12단계 정책카드(.jb-polcard__thumb 200×140)에 맞춘다 */
.jb-actcard__thumb{ flex:none; display:grid; place-items:center; width:200px; height:140px; overflow:hidden;
border:1px solid var(--jb-border); border-radius:var(--jb-r-box); background:var(--jb-bg-subtle); }
.jb-actcard__thumb img{ width:100%; height:100%; object-fit:cover; }
.jb-actcard__body{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; gap:var(--jb-sp-2); }
.jb-actcard__org{ font-size:var(--jb-fs-sm); color:var(--jb-muted); }
.jb-actcard__desc{ overflow:hidden; font-size:var(--jb-fs-sm); color:var(--jb-muted); text-overflow:ellipsis; white-space:nowrap; }
.jb-actcard__info{ display:grid; grid-template-columns:auto 1fr; gap:2px var(--jb-sp-3); margin:var(--jb-sp-1) 0 0;
font-size:var(--jb-fs-xs); line-height:1.5; color:var(--jb-muted); }
.jb-actcard__info dt{ font-weight:var(--jb-fw-semibold); color:var(--jb-body); }
.jb-actcard__info dd{ margin:0; }
.jb-actcard__tags{ display:flex; flex-wrap:wrap; gap:var(--jb-sp-1) var(--jb-sp-2); font-size:var(--jb-fs-xs); color:var(--jb-muted); }
.jb-actcard__acts{ position:absolute; top:var(--jb-sp-4); right:var(--jb-sp-4); display:flex; gap:var(--jb-sp-1); }
/* 결과 0건 — 화면설계서 상태·예외 「조건 완화 안내 + 조건 초기화 버튼」 */
.jb-cardlist .jb-empty .jb-empty__text{ line-height:1.6; }
@media (max-width:768px){
.jb-listwrap{ padding-top:var(--jb-sp-5); }
.jb-listhead__title{ font-size:var(--jb-fs-h4); }
.jb-listfilter{ padding:var(--jb-sp-2) var(--jb-sp-4); }
.jb-listfilter .jb-searchbox__sub-label{ width:auto; padding-top:0; }
/* 선택 조건 띠 — 좁은 폭에서는 박스 좌우 여백이 sp-4 다 */
.jb-listfilter .jb-searchbox__foot,
.jb-listfilter__foot{ margin-right:calc(var(--jb-sp-4) * -1); margin-left:calc(var(--jb-sp-4) * -1);
padding-right:var(--jb-sp-4); padding-left:var(--jb-sp-4); }
.jb-actcard__link{ padding-right:var(--jb-sp-5); padding-top:58px; }
/* 썸네일 — components.css 의 .jb-policycard--media 가 여기서 세로로 바뀐다. 폭만 전체로 편다
(운영은 모바일에서 썸네일을 감추지만 12단계 정책카드와 같은 「폭 전체 170px」쪽으로 맞춘다) */
.jb-actcard__thumb{ width:100%; height:170px; }
}
/* ══════════════════════════════════════════════════════════════════════
일자리 지원정책 목록 — UI2026 12단계 재개발 (2026-09-16)
근거 = 화면설계서 3.1.0 SCR-LPG · 3.2.0 SCR-LPM + 프로토타입 list-policy-guest/member.html
+ 개발지시 08-2/12 · 결정 D1(분류 배지) · D2(탭 라벨·순서) · D3(윙 배너 없음)
가로 필터바 · 구분선은 위 공용 규칙(jb-listfilter · jb-regionsep …)을 그대로 쓴다
══════════════════════════════════════════════════════════════════════ */
/* 제목 + 안내 (3.1.0 #1) */
.jb-pagetitle{ margin:var(--jb-sp-2) 0 0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-h3); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-pagedesc{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--jb-sp-2); margin:var(--jb-sp-2) 0 0;
font-size:var(--jb-fs-sm); color:var(--jb-muted); }
.jb-pagedesc .jb-ico{ width:16px; height:16px; }
/* 로그인 전 맞춤추천 안내 (3.1.0 #2 · FR-LIST50) */
.jb-listnudge{ margin-top:var(--jb-sp-4); }
.jb-listnudge__text{ display:flex; align-items:center; gap:var(--jb-sp-2); margin:0; font-size:var(--jb-fs-sm); color:var(--jb-ink); }
.jb-listnudge__text .jb-ico{ width:18px; height:18px; color:var(--jb-brand); }
/* 마감임박 프리뷰 (3.1.0 #4) · 나에게 맞는 정책 (3.2.0 · FR-LIST53) — 프로토타입 .curation-hot + .dday-list */
.jb-ddaybox{ margin-top:var(--jb-sp-5); }
.jb-ddaybox__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--jb-sp-3); flex-wrap:wrap; margin-bottom:var(--jb-sp-2); }
.jb-ddaybox__title{ margin:0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-ddaybox__meta{ margin-left:var(--jb-sp-1); font-family:var(--jb-font-body); font-weight:var(--jb-fw-regular); font-size:var(--jb-fs-sm); color:var(--jb-muted); }
.jb-ddaylist{ margin:0; padding:0; list-style:none; border:1px solid var(--jb-border); border-radius:var(--jb-r-box); background:var(--jb-surface); overflow:hidden; }
.jb-ddaylist > li + li{ border-top:1px solid var(--jb-border); }
.jb-ddaylist__link{ display:flex; align-items:center; gap:var(--jb-sp-3);
padding:var(--jb-sp-4) var(--jb-sp-5); color:inherit; text-decoration:none; }
.jb-ddaylist__link:hover{ background:var(--jb-bg-subtle); }
.jb-ddaylist__d{ flex:none; min-width:52px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-sm); color:var(--jb-danger); }
.jb-ddaylist__title{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--jb-fs-sm); color:var(--jb-ink); }
.jb-ddaylist__meta{ flex:none; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:var(--jb-fs-xs); color:var(--jb-muted); }
.jb-ddaylist__crit{ flex:none; display:flex; gap:var(--jb-sp-1); }
/* 분류 탭 + 결과 헤더 (3.1.0 #11 · #12) */
.jb-polresult{ margin-top:var(--jb-sp-6); scroll-margin-top:120px; }
.jb-polresult .jb-tabbar{ gap:var(--jb-sp-4); }
.jb-resultbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--jb-sp-4); flex-wrap:wrap; margin-top:var(--jb-sp-5); }
.jb-resultbar__count{ font-size:var(--jb-fs-base); color:var(--jb-body); }
.jb-resultbar__count strong{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); color:var(--jb-ink); }
.jb-resultbar__cond{ font-size:var(--jb-fs-sm); color:var(--jb-muted); }
/* 정책 카드 · 썸네일형 (3.1.0 #13 · FR-LIST26) — 프로토타입 .policard--thumb 실측값
[썸네일 200×140] | 분류 배지·기관명 / 제목(D-day 우상단) / 모집일정 / 지원대상 / 해시태그 | [관심·알림 세로 중앙] */
.jb-polcard{ position:relative; min-width:0; }
.jb-polcard__link{ display:flex; align-items:flex-start; gap:20px; padding:16px 76px 16px 16px;
border:1px solid var(--jb-border); border-radius:var(--jb-r-card); background:var(--jb-surface);
color:inherit; text-decoration:none; transition:border-color var(--jb-dur-fast) var(--jb-ease); }
.jb-polcard__link:hover{ border-color:var(--jb-brand); }
.jb-polcard__thumb{ flex:none; display:grid; place-items:center; width:200px; height:140px; overflow:hidden;
border:1px solid var(--jb-border); border-radius:var(--jb-r-box); background:var(--jb-bg-subtle); color:var(--jb-muted); }
.jb-polcard__thumb img{ width:100%; height:100%; object-fit:cover; }
.jb-polcard__thumb .jb-ico{ width:32px; height:32px; }
.jb-polcard__body{ position:relative; flex:1; min-width:0; }
.jb-polcard__orgline{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-right:64px; }
.jb-polcard__org{ font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-sm); color:var(--jb-ink); }
.jb-polcard__title{ display:block; margin:6px 0 12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-md); color:var(--jb-ink); } /* 91-C — 종전 17px 는 스케일 밖 */
.jb-polcard__dday{ position:absolute; top:0; right:0; }
/* 🔴 2026-09-27 D258 — `.jb-polcard__info` 5줄을 components.css 로 «옮겼다».
메인(01) 취업교육 카드가 같은 부품을 쓰게 되었는데 메인은 page-list.css 를 «부르지 않아»
`> div{display:flex}` 가 안 먹고 dt·dd 가 세로로 쌓였다(정보 블록 77.4 → 144).
정본은 이 부품을 components.css 에 둔다 — 정본 위치가 맞다.
⚠️ 나머지 .jb-polcard 계열은 «그대로 둔다»(부품 전체 이동은 96 이관목록 몫이다). */
.jb-polcard__tags{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; }
.jb-polcard__tag{ display:inline-flex; align-items:center; gap:3px; font-size:var(--jb-fs-2xs); color:var(--jb-muted); }
.jb-polcard__tag .jb-ico{ width:12px; height:12px; }
.jb-polcard__acts{ position:absolute; top:50%; right:16px; transform:translateY(-50%); display:flex; gap:8px; }
.jb-polcard__acts .jb-actbtn{ width:36px; height:36px; }
/* ── 08 취업교육 전용 · D18 「고용24에서 신청」 표기 (D73 · 2026-09-17) ──────
종전엔 `legacy-bridge.css` 에 `.jb-root .cont_list_area .jb-eduext` 로 있었는데
D73 이 운영 래퍼를 없애 «매칭 0건»이 됐다. `jb-` 끼리의 규칙이라 브릿지가 아니라 여기가 제자리다.
`__orgline` 안(기관명 뒤)에 들어간다. */
.jb-polcard .jb-eduext{ display:inline-flex; align-items:center; gap:4px;
font-size:var(--jb-fs-xs); color:var(--jb-muted); }
.jb-polcard .jb-eduext__ico{ width:14px; height:14px; }
/* ── 08 취업교육 전용 · 같은 과정의 다른 회차 (D73 · 2026-09-17) ────────────
⚠️ `a.jb-polcard__link` «안» 에 둘 수 없다 — 목록 항목이 `` 라 중첩 앵커가 되고
파서가 바깥 `` 를 닫아 카드 DOM 이 통째로 깨진다. `__acts` 와 같이 링크 «밖» 형제다.
⚠️ 운영 `.edu_link*` 규칙은 전부 `.contents-wrap .job_info_wrap … .cont_list_area` 스코프인데
재개발로 `job_info_wrap` 이 사라져 «이번 교체 전부터» 죽어 있었다 — 목록이 늘 펼쳐진 상태였다.
여닫기는 JSP 가 `hidden` 속성으로 한다 → 여기에 `display` 를 «주지 않는다»
(주면 UA 의 `[hidden]{display:none}` 을 이겨 접힘이 깨진다).
⚠️ 배치는 `__acts`(right:16 · 폭 80)를 피해 104px 을 띄웠고,
태그 줄이 버튼 밑으로 흘러들지 않게 `:has()` 로 그 카드만 오른쪽을 비운다. 15장 실측 겹침 0(최소 여유 403px).
🔴🔴 아래 `max-height:100px` 를 «늘리지 마라». 미관 값이 아니라 **z축 안전장치**다.
카드 183px − 버튼 자리(bottom 16 + 높이 24) = 143px, 버튼 위 여백 6px 을 빼면 137px.
목록 최대 = 100(내용) + 안여백 20 + 테두리 2 = **122px** → 언제나 «자기 카드 안»에 머문다.
➡️ 그래서 이웃 카드와의 z 경쟁이 **일어날 조건 자체가 없다**. 실측도 「덮는 데 성공」이 아니라
「거기까지 닿지 않음」으로 통과했다(6항목 최대치 · 중간 카드 8/50 · 앞뒤 카드 겹침 0).
➡️ 늘리면 목록이 카드 밖으로 나가고, `.jb-polcard` 가 `z-index:auto` 라 **DOM 상 «뒤» 카드가 위로 올라온다.**
꼭 늘려야 하면 `.jb-polcard` 에 `z-index` 를 함께 줘 stacking 을 정리한 뒤에 한다.
※ `z-index:2` 는 이웃 카드용이 아니라 «자기 카드 본문»(태그·정보 줄) 위로 올리는 값이다. */
.jb-polcard__degr{ position:absolute; right:104px; bottom:var(--jb-sp-4); z-index:2; }
.jb-polcard:has(.jb-polcard__degr) .jb-polcard__tags{ padding-right:120px; }
.jb-polcard__degr-btn{ display:inline-flex; align-items:center; gap:var(--jb-sp-1); height:24px; padding:0 var(--jb-sp-3);
border:1px solid var(--jb-border); border-radius:var(--jb-r-pill); background:var(--jb-surface);
font-size:var(--jb-fs-2xs); color:var(--jb-muted); cursor:pointer; }
.jb-polcard__degr-btn:hover{ border-color:var(--jb-brand); color:var(--jb-brand); }
.jb-polcard__degr-list{ position:absolute; right:0; bottom:calc(100% + var(--jb-sp-2)); width:280px;
max-height:100px; overflow-y:auto; padding:var(--jb-sp-3) 0;
border:1px solid var(--jb-border); border-radius:var(--jb-r-box);
background:var(--jb-surface); box-shadow:var(--jb-shadow-hover); }
.jb-polcard__degr-list ul{ margin:0; padding:0; list-style:none; }
.jb-polcard__degr-list a{ display:block; padding:var(--jb-sp-1) var(--jb-sp-3);
font-size:var(--jb-fs-2xs); color:var(--jb-muted); text-align:center; }
.jb-polcard__degr-list a:hover{ background:var(--jb-bg-subtle); }
/* 🔴 2026-09-24 D194 ④ — 하단 교차 배너 2종(`.jb-promo` · `__item` · `__title` · `__desc`)을 «규칙째 걷었다».
쓰는 JSP 가 «0건»이다(저장소 전수) — 12 는 정본 부품 `.jb-extcard` 로 갈아탔고 그 사유가
`jobSprtList.jsp:329` 주석에 적혀 있다(「종전 .jb-promo(목록용)는 정본에 없는 이름이다」).
⚠️ 이 죽은 규칙이 메인의 «진짜» `.jb-promo`(히어로 서브 배너)와 이름이 겹쳐,
page-main.css 가 `.jb-hero__subs` 로 스코프를 걸어 피하고 있었다 — 그 스코프도 함께 걷는다.
⚠️ 정본에는 목록용 `.jb-promo` 가 «없다» — 이것이 dev 전용 잔재였다. */
@media (max-width:768px){
.jb-pagetitle{ font-size:var(--jb-fs-h4); }
.jb-polcard__link{ flex-wrap:wrap; padding:16px; }
.jb-polcard__thumb{ width:100%; height:170px; }
.jb-polcard__acts{ top:24px; right:24px; transform:none; }
.jb-polcard__orgline{ padding-right:58px; }
.jb-polcard__title{ white-space:normal; } /* D258 — `.jb-polcard__info dd` 는 components.css 로 옮겼다 */
/* 액션이 우상단으로 올라가 카드 오른쪽 아래가 비므로 회차 버튼을 끝까지 붙인다(D73) */
.jb-polcard__degr{ right:16px; }
.jb-polcard:has(.jb-polcard__degr) .jb-polcard__tags{ padding-right:0; margin-bottom:34px; }
.jb-ddaylist__link{ flex-wrap:wrap; row-gap:var(--jb-sp-1); padding:var(--jb-sp-3) var(--jb-sp-4); }
.jb-ddaylist__meta{ max-width:none; width:100%; padding-left:calc(52px + var(--jb-sp-3)); }
.jb-ddaylist__crit{ width:100%; }
.jb-promo{ grid-template-columns:1fr; }
}
/* 추천 콘텐츠 · 주목 정책 4 — 좁은 폭에서도 2×2 (화면설계서 3.1.0 모바일 「주목 정책 2×2」 · 프로토타입 .grid--4 → 2열 유지)
base.css 의 900px 이하 1열 규칙(0,1,0)을 목록 섹션 안에서만 덮는다 */
@media (max-width:900px){
.jb-listsec .jb-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--jb-sp-3); }
}
@media (max-width:600px){
.jb-recocard{ padding:var(--jb-sp-3); }
.jb-recocard .jb-policycard__title{ font-size:var(--jb-fs-sm); }
}
/* ══════════════════════════════════════════════════════════════════════
회원 관심조건 프리셋 — 공공채용 목록 로그인 후 (화면설계서 2.2.0 #2 · FR-LIST08)
══════════════════════════════════════════════════════════════════════ */
/* ▼ 2026-09-18 · 04 지시 §2-2 — 정본 규격(3열 grid)으로 교체했다.
배치는 프로토타입 list-member 기준 한 행 3분할 : [제목·부제] [조건 칩] [액션 버튼]
🔴 종전 dev 의 `.jb-preset__link` · `.jb-preset__chips` 는 «정본에 없는 클래스»였다.
액션은 텍스트 링크가 아니라 «버튼»(.jb-btn--outline.jb-btn--sm)이고,
칩은 `__cond` 안의 공용 `.jb-chips` 를 쓴다.
⚠️ 이 규격은 04 공공채용 목록과 06 기업채용 목록이 «함께» 쓴다.
한쪽 마크업만 바꾸면 다른 쪽이 깨진다 — 두 JSP 를 같은 차수에 고쳤다. */
.jb-preset{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
align-items:center; gap:var(--jb-sp-4) var(--jb-sp-5);
margin-top:var(--jb-sp-6); padding:var(--jb-sp-5);
border:1px solid var(--jb-brand); border-radius:var(--jb-r-card); background:var(--jb-brand-weak); }
.jb-preset__head{ min-width:0; }
.jb-preset__title{ margin:0; font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-preset__title strong{ font-weight:var(--jb-fw-bold); }
.jb-preset__meta{ margin:var(--jb-sp-1) 0 0; font-size:var(--jb-fs-sm); color:var(--jb-body); }
.jb-preset__meta strong{ font-weight:var(--jb-fw-bold); color:var(--jb-brand); }
.jb-preset__cond{ min-width:0; } /* 조건 칩 — 가운데 */
.jb-preset__act{ display:flex; align-items:center; gap:var(--jb-sp-2); flex:none; } /* 액션 — 우측 */
/* 관심조건이 «없는» 회원 — 설정 유도 (2026-09-18 D127 ③) · 조건 칩 칸이 없으므로 2열(문구 · 버튼) */
.jb-preset--empty{ grid-template-columns:minmax(0,1fr) auto; }
/* 프리셋 칩은 옅은 브랜드 면 위라 «흰 칩»으로 둔다(--jb-chip--on-tint 와 같은 취지) */
.jb-preset .jb-chip{ background:var(--jb-surface); border-color:var(--jb-border); }
@media (max-width:900px){
.jb-preset{ grid-template-columns:1fr; } /* 좁으면 세로로 쌓는다 */
.jb-preset__act{ flex-wrap:wrap; }
/* ▼ 2026-09-18 · D127 ③ 후속(개발) — 조건은 있는데 칩으로 옮길 축이 없는 회원(직무만 · 공고 코드로 안 옮겨지는 고용형태만)은
칩 칸이 비어(높이 0) 세로 쌓임에서 행 하나를 차지해 제목 ↔ 버튼 간격이 16 → 32 가 됐다(04 로컬 실측). 빈 칩 칸만 접는다.
1261↑ 3열에서는 열 자리를 지켜야 버튼이 오른쪽 끝에 남으므로 이 폭에서만 · 정본 샘플엔 없는 상태라 DS 반영 요청 */
.jb-preset__cond:not(:has(.jb-chip)){ display:none; }
}
/* ▲ 기업채용 목록 «운영 .rclist .item.jb-entcard 카드» · 상세 검색 안 운영 조건 박스(.cate2_wrap · .choice_wrap) 규칙은
D119 3차(2026-09-18)에서 정본 .jb-jobcard · .jb-filter 로 바꾸며 걷었다. `.jb-searchbox .cate_wrap .tit` 만 남긴다(다른 화면). */
.jb-searchbox .cate_wrap .tit{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-sm); color:var(--jb-ink); }
/* 정렬 탭 아래 안내 문구(설계 2.5.0 #6) */
.jb-sorttabs__note{ margin:calc(var(--jb-sp-2) * -1) 0 var(--jb-sp-4); font-size:var(--jb-fs-2xs); color:var(--jb-muted); }
/* ▲ D122 §0 — 「시트 안의 상세 검색 패널」 규칙(≤1260 .jb-filter .jb-searchbox · __actions)을 정본과 같이 삭제했다.
정본 HTML 은 상단 «상세 검색»과 좌측 «상세 조건»을 분리한다(패널을 시트로 옮기지 않는다) — 어긋난 잔재였다(04 #7).
⚠️ 삭제 뒤 @media 블록의 닫는 괄호 «}» 하나가 파일 끝에 남아 있었다 — 뒤에 규칙을 붙이면 그 규칙이 통째로 버려진다
(선택자 앞에 «}» 가 붙어 무효). 04 4차에서 걷었다. */
/* ▼ 2026-09-18 D130 4-0 정본 동기화(dev 에 빠져 있던 규칙) */
/* 경로는 제목 띠 «안» 맨 위 — 띠가 가운데 정렬이라 경로도 가운데 */
.jb-pagehead .jb-crumb{ justify-content:center; margin-bottom:var(--jb-sp-3); }
/* 로그인 후 안내 문구 앞 아이콘(user-check) — 글줄 가운데에 맞춘다 */
.jb-pagehead__desc .jb-ico{ width:18px; height:18px; margin-right:var(--jb-sp-1); vertical-align:-3px; }
/* 분류 탭 → 결과 헤더 · 결과 헤더 안의 정렬/개수 셀렉트 줄은 바깥 여백을 걷는다(가운데 정렬이 틀어진다) */
.jb-tabbar + .jb-resulthead{ margin-top:var(--jb-sp-5); }
.jb-resulthead .jb-listtools{ margin-bottom:0; }
/* ▼ 2026-09-22 12단계 정본 동기화 — 영역 사이 간격 · 주목 4장 2×2 · 마감임박 열기/닫기 */
/* 영역 사이 간격 — 발견(안내 · 맞춤 · 주목 · 마감임박)과 탐색(조건 · 결과)을 윗선 하나로 가른다 */
.jb-listpage__sec{ margin-top:var(--jb-sp-7); }
.jb-listpage__region{ margin-top:var(--jb-sp-8); padding-top:var(--jb-sp-7); border-top:1px solid var(--jb-border); }
.jb-listpage__region + .jb-listpage__sec{ margin-top:var(--jb-sp-6); }
/* 주목 4 — 좁은 폭에서도 2×2 (화면설계서 3.1.0 모바일 「주목 정책 2×2」 · dev 동일)
base.css 의 ≤900 1열 규칙을 이 영역에서만 덮는다 */
@media (max-width:900px){
.jb-listpage__hot .jb-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--jb-sp-3); }
}
@media (max-width:480px){
.jb-listpage__hot .jb-poster__body{ padding:var(--jb-sp-3); }
}
/* 2026-09-22 마감임박 «열기/닫기» — 펼침 목록을 위 목록에 이어 붙인다(테두리 · 라운딩이 끊겨 보이지 않게).
`:has()` 를 쓰므로 미지원 브라우저에서는 두 장으로 보일 뿐 기능은 같다. */
.jb-ddaylist:has(+ .jb-ddaylist--more:not([hidden])){
border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:0; }
.jb-ddaylist--more{ border-top-left-radius:0; border-top-right-radius:0; }
/* 아코디언 꺾쇠 — 열리면 뒤집는다 */
.jb-ddaytoggle .jb-ico{ transition:transform .18s ease; }
.jb-ddaytoggle.is-open .jb-ico{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){ .jb-ddaytoggle .jb-ico{ transition:none; } }