, 제목만 로 두고 그 ::after 가 카드 전체를 덮는다.
링크는 카드 하나에 하나(접근성 유지)이고, 버튼은 그 위로 올려 클릭된다. 래퍼가 필요 없다. */
a.jb-jobcard__title::after{ content:""; position:absolute; inset:0; z-index:0; }
/* 밑줄 없음 (2026-09-18 D126 ④ · QA 06 2부 #14) — 지정이 없어 정본이 브라우저 기본 밑줄로 렌더됐다. 카드 전체가 링크(D58)라 제목은 «제목»처럼 보여야 한다(D121 ④ 색 규칙과 같은 취지) · 호버에만 밑줄 */
a.jb-jobcard__title{ text-decoration:none; }
a.jb-jobcard__title:hover{ text-decoration:underline; }
/* 태그는 한 줄 · 넘치면 자른다 (2026-09-18 D126 ⑤ · QA 06 2부 #6) — 워크넷 고용형태 원문(「기간의 정함이 없는 근로계약/ 파견근로 비희망/…」)이 26px pill 안에서 2줄로 넘쳤다. 원문 정규화는 개발 몫이고 이 규칙은 최후 방어다 */
.jb-tag{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 관심·알림 버튼 묶음 — 칩 줄 오른쪽 끝 · 링크 위 */
.jb-cardacts{ position:relative; z-index:1; margin-left:auto; display:inline-flex; align-items:center; gap:var(--jb-sp-2); }
/* D65(2026-09-17) — 정본 규격으로 통일. 카드 안에서 브랜드 **채움**은 강조가 과해
버튼이 정보보다 튄다 → 32px · pill · 선택 시 **연한 브랜드 면**.
★ 상태 훅을 `.on` → **`aria-pressed`** 로 통일한다. 마크업이 이미 둘을 함께 붙이고 있어
JSP 수정 없이 훅만 바꿔도 동작한다(`.on` 도 당분간 함께 받아 과도기를 덮는다). */
.jb-actbtn{ display:inline-flex; align-items:center; justify-content:center; flex:none;
width:32px; height:32px; padding:0;
border:1px solid var(--jb-border); border-radius:var(--jb-r-pill); background:var(--jb-surface);
color:var(--jb-muted); cursor:pointer;
transition:color var(--jb-dur-fast) var(--jb-ease), border-color var(--jb-dur-fast) var(--jb-ease),
background var(--jb-dur-fast) var(--jb-ease); }
.jb-actbtn .jb-ico{ width:17px; height:17px; }
.jb-actbtn:hover{ border-color:var(--jb-brand); color:var(--jb-brand); }
/* 91-B — `jb-actbtn` 은 자기 색(`--jb-muted`)이 있다. 상속 복원이 아니라 그 색을 (0,2,1) 로 올린다 */
a.jb-actbtn:link, a.jb-actbtn:visited{ color:var(--jb-muted); }
a.jb-actbtn:hover, a.jb-actbtn:active{ color:var(--jb-brand); }
a.jb-actbtn[aria-pressed="true"]:link, a.jb-actbtn[aria-pressed="true"]:visited,
a.jb-actbtn.on:link, a.jb-actbtn.on:visited{ color:var(--jb-brand); }
.jb-actbtn[aria-pressed="true"], .jb-actbtn.on{
border-color:var(--jb-brand); background:var(--jb-brand-weak); color:var(--jb-brand); }
.jb-actbtn[aria-pressed="true"] *, .jb-actbtn.on *{ color:inherit; }
/* 🔴 2026-09-27 D275 — «CTA 형» 관심 버튼(.jb-btn)도 선택 상태를 보여준다(정본 components.css:486).
사용자 지적 : 상세 하단 「관심채용」을 눌러도 «모양이 안 변한다».
원인 = 규격이 `.jb-actbtn`(원형 하트)에만 있었다. CTA 는 `.jb-btn jb-btn--secondary jb-btn--rect` 라 걸리지 않았다.
JS 는 멀쩡했다 — fn_SyncActbtn 이 aria-pressed 를 «제대로» 갱신하고 있었다(CSS 만 없었다).
★ 선택됨 = «채운 하트 + 연한 브랜드 면». 「사선 하트」는 쓰지 않는다 —
사선은 관례상 «해제·차단»을 뜻해 «등록됨»과 반대로 읽힌다.
★ 실측 — 저장소에서 `.jb-btn` + `aria-pressed` 는 «jobEntDtl.jsp:595 한 곳»뿐이다(전수 grep).
그래서 이 규칙이 다른 버튼을 건드릴 여지가 없다.
★ 하트 채움은 `[aria-pressed="true"]` 로 걸어 «공통»이 된다 — 정책 3종 · 대외활동 상세의 `#btn_Like`
와 목록 카드 하트가 모두 aria-pressed 를 갖고 JS 로 갱신한다(실측).
⚠️ 공공채용 «상세»에는 하트가 «없다» — D14 로 의도적으로 뺐다(관심은 목록 카드·마이페이지에서).
⚠️ `.jb-actbtn.on` 도 함께 적는다 — dev 는 `on` 과 aria-pressed 를 둘 다 쓰고(위 규칙도 그렇다)
혹시 한쪽만 붙는 순간이 있어도 하트가 «면 색과 어긋나지» 않게 한다. */
.jb-btn[aria-pressed="true"]{ border-color:var(--jb-brand); background:var(--jb-brand-weak); color:var(--jb-brand); }
.jb-btn[aria-pressed="true"] .jb-ico--heart,
.jb-actbtn[aria-pressed="true"] .jb-ico--heart,
.jb-actbtn.on .jb-ico--heart{ --jb-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 20.35 4.92 13.4a4.6 4.6 0 0 1 6.5-6.5l.58.58.58-.58a4.6 4.6 0 0 1 6.5 6.5z'/%3E%3C/svg%3E"); }
/* 상세 공고명 우측 액션 — 제목과 한 줄. 제목이 길어도 버튼이 눌리지 않게 flex:none */
.jb-dtlhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--jb-sp-4); }
.jb-dtlhead__acts{ flex:none; }
/* ── Job list + More ────────────────────────────────────────────────── */
/* D62(2026-09-17) — 결과 목록은 **2열**이다.
확정 디자인 `.jb-joblist` 에 열 정의가 없어 1열로 렌더된 것이고 **프로토타입은 2열**이다.
화면설계 세션이 「04 지시서 #9(1열)는 무효」로 정정했다. 06 기업채용도 같은 컴포넌트라 함께 2열이 된다. */
.jb-joblist{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
gap:var(--jb-sp-3); transition:opacity var(--jb-dur-fast) var(--jb-ease); }
@media (max-width:900px){ .jb-joblist{ grid-template-columns:minmax(0,1fr); } } /* D119 3차 — 1fr 은 카드의 최소 내용 폭(줄바꿈 없는 라벨)에 밀려 화면 밖으로 나갔다 */
.jb-joblist.is-refreshing{ opacity:.35; }
/* D63(2026-09-17) — 「곧! 마감되는 잡아바 추천공고」.
설계 어디에도 없는 개발 신설 영역이지만 **사용자가 유지로 판정**했다(요건은 기능정의 세션이 FR 로 신설).
회색 배경을 걷고 상단 라인 + 앞 콘텐츠와 여백으로 구분한다. */
.jb-reco-strip{ margin-top:var(--jb-sp-8); padding-top:var(--jb-sp-7);
background:none; border-top:1px solid var(--jb-border); }
.jb-reco-strip__head{ display:flex; align-items:center; justify-content:space-between;
gap:var(--jb-sp-4); margin-bottom:var(--jb-sp-5); }
.jb-reco-strip__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); }
@media (max-width:900px){
.jb-reco-strip{ margin-top:var(--jb-sp-6); padding-top:var(--jb-sp-5); }
}
/* ── 가로로 넘기는 카드 줄 (2026-09-18 · D98 정정판 — D63 띠에 «넘기기»를 더한다) ──
정본 = design/css/components.css:1293~1311 (값·이름 그대로)
⚠️ 규격을 새로 만들지 않는다 — 처음에 `.jb-cardslider`(회색 전폭 면)를 따로 만들었다가(4463c059e)
D63(회색 면 금지 · 상단 구분선) 과 충돌해 걷어냈다.
★ 슬라이더 라이브러리를 쓰지 않는다(scroll-snap). JS = /resource/new_2026/js/card-slider.js
★ 스크롤바는 숨기되 «스크롤 자체»는 살린다 — overflow:hidden 이면 터치 사용자가 못 넘긴다. */
.jb-reco-strip__title{ display:flex; align-items:center; gap:var(--jb-sp-3); }
.jb-reco-strip__title .jb-ico{ flex:none; width:22px; height:22px; color:var(--jb-danger); }
.jb-reco-strip__nav{ display:flex; gap:var(--jb-sp-2); flex:none; }
.jb-reco-strip__nav .jb-iconbtn[disabled]{ opacity:.35; cursor:default; }
.jb-reco-strip__nav .jb-iconbtn[disabled]:hover{ border-color:var(--jb-border); }
.jb-reco-strip__track{ display:flex; gap:var(--jb-sp-5); margin:0; padding:0; list-style:none;
overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.jb-reco-strip__track::-webkit-scrollbar{ display:none; }
/* li 는 «폭·스냅»만 맡는다 — 테두리를 주지 않는다(D58 · D99 ② 이중 테두리 방지) */
.jb-reco-strip__track > li{ display:flex; flex:0 0 300px; scroll-snap-align:start; }
.jb-reco-strip__track > li > .jb-jobcard{ flex:1 1 auto; }
/* 🔴 2026-09-30 D337 관련 · 2차 자체 테스트 IT-JOBP-G02 · IT-JOBC-G01 ④ — 띠 안 카드 모양이 제목 길이마다 달랐다(정본 결함 · R75).
원인 = 제목 줄 수 제한이 없고 하단 줄(__foot)이 «내용 바로 아래»에 붙어, 1줄 제목 카드와 3줄 제목 카드의 D-day 줄 높이가 어긋났다.
① 제목은 2줄까지 · 넘치면 말줄임(D222 · D263 선례) · 1줄이어도 2줄 자리를 잡는다 ② 하단 줄은 카드 바닥에 붙인다.
★ 띠 안에서만 — 목록 카드 그리드는 행 단위로 높이가 맞으므로 건드리지 않는다.
★ overflow:hidden 은 제목 링크의 ::after(카드 전체 덮개 · D58)를 자르지 않는다 — ::after 의 기준은 .jb-jobcard(position:relative)다. */
.jb-reco-strip .jb-jobcard__title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden;
min-height:2.9em; } /* 2줄 × line-height 1.45 */
.jb-reco-strip .jb-jobcard__foot{ margin-top:auto; flex-wrap:nowrap; } /* 한 줄 고정 — 분야 이름이 길면 줄이 꺾여 D-day 위치가 카드마다 달라졌다(정본 실측 203 · 236px) */
.jb-reco-strip .jb-jobcard__field{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.jb-reco-strip .jb-jobcard__foot > :not(.jb-jobcard__field){ flex:none; white-space:nowrap; } /* D-day · 마감일은 줄이지 않는다 — 줄이는 것은 분야 이름뿐 */
.jb-reco-strip .jb-jobcard__meta{ margin-bottom:var(--jb-sp-4); } /* 하단 줄을 바닥에 붙여도 메타 줄과 간격이 줄지 않게 */
@media (max-width:768px){
.jb-polcard__info dd{ white-space:normal; } /* D258 — page-list.css 에서 옮겨 왔다 */
.jb-reco-strip__track > li{ flex-basis:82%; } /* 다음 카드가 살짝 보이게 — 넘길 수 있다는 신호 */
.jb-reco-strip__nav{ display:none; } /* 좁은 화면은 손으로 넘긴다 */
}
.jb-more{ display:flex; align-items:center; justify-content:center; gap:var(--jb-sp-2);
min-width:260px; margin:var(--jb-sp-6) auto 0; padding:0 24px; height:var(--jb-btn-h-rect);
border:1px solid var(--jb-border); border-radius:var(--jb-r-btn); background:var(--jb-surface);
font-family:var(--jb-font-display); font-weight:var(--jb-fw-medium); font-size:var(--jb-fs-base);
line-height:1; color:var(--jb-muted); cursor:pointer; }
.jb-more:hover{ border-color:var(--jb-brand); color:var(--jb-brand); background:var(--jb-brand-weak); }
.jb-more strong{ color:var(--jb-ink); }
.jb-more[disabled]{ cursor:default; opacity:.6; pointer-events:none; }
/* ── Empty state ────────────────────────────────────────────────────── */
.jb-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--jb-sp-4);
min-height:220px; padding:var(--jb-sp-7) var(--jb-sp-5);
border:1px solid var(--jb-border); border-radius:var(--jb-r-card); background:var(--jb-surface); text-align:center; }
.jb-empty__ico{ width:48px; height:48px; opacity:.35; }
.jb-empty__text{ margin:0; font-size:var(--jb-fs-base); color:var(--jb-muted); }
/* ── Pagination (번호형) ────────────────────────────────────────────── */
.jb-pagination{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--jb-sp-1);
margin-top:var(--jb-sp-6); }
.jb-pagination__item{ display:inline-flex; align-items:center; justify-content:center;
min-width:38px; height:38px; padding:0 var(--jb-sp-2); border:1px solid transparent; border-radius:var(--jb-r-btn);
background:none; font-family:var(--jb-font-body); font-size:var(--jb-fs-sm); line-height:1;
color:var(--jb-body); text-decoration:none; cursor:pointer; }
.jb-pagination__item:hover{ background:var(--jb-bg-subtle); }
.jb-pagination__item[aria-current="page"]{ background:var(--jb-brand); border-color:var(--jb-brand);
color:var(--jb-on-brand); font-weight:var(--jb-fw-bold); }
.jb-pagination__item[aria-disabled="true"]{ color:var(--jb-disabled); pointer-events:none; } /* 에는 disabled 가 없다 — 첫 · 끝 쪽 ‹ › (D130 4-0) */
.jb-pagination__ico{ width:16px; height:16px; }
/* ══ [상세] ═══════════════════════════════════════════════════════════ */
/* ── Detail head (기관 · 분야 · 공고명) ─────────────────────────────── */
.jb-detailhead{ padding:var(--jb-sp-6); border-bottom:1px solid var(--jb-border); }
.jb-detailhead__meta{ display:flex; align-items:center; gap:var(--jb-sp-3); flex-wrap:wrap; margin:0;
font-size:var(--jb-fs-sm); color:var(--jb-muted); }
.jb-detailhead__inst{ font-weight:var(--jb-fw-semibold); color:var(--jb-body); }
.jb-detailhead__div{ width:1px; height:12px; background:var(--jb-border); }
.jb-detailhead__title{ margin:var(--jb-sp-3) 0 0; font-family:var(--jb-font-display);
font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-h2); line-height:1.35; color:var(--jb-ink); }
/* ── Prose (관리자 에디터 본문 래퍼 · rcrutCntnt 를 그대로 받는다) ──
운영 원천에 섹션 분리 컬럼이 없어 본문은 HTML 한 덩어리로 출력된다.
에디터가 만드는 기본 태그만 최소 정규화하고 인라인 스타일은 건드리지 않는다. */
.jb-prose{ padding:var(--jb-sp-6); font-family:var(--jb-font-body); font-size:var(--jb-fs-base);
line-height:var(--jb-lh-base); color:var(--jb-body); word-break:break-word; }
.jb-prose img{ max-width:100%; height:auto; }
.jb-prose table{ width:100%; border-collapse:collapse; margin:var(--jb-sp-4) 0; }
.jb-prose th, .jb-prose td{ padding:10px 12px; border:1px solid var(--jb-border); font-size:var(--jb-fs-sm); }
.jb-prose th{ background:var(--jb-th-bg); font-weight:var(--jb-fw-semibold); color:var(--jb-ink); }
.jb-prose h1, .jb-prose h2, .jb-prose h3, .jb-prose h4{ margin:var(--jb-sp-6) 0 var(--jb-sp-3);
font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); color:var(--jb-ink); }
/* 크기를 명시한다 (2026-09-18 QA A3) — 비워 두면 운영 import.css `h1~h6{font-size:12px}` 가 이겨 소제목이 12px 이 됐다.
값은 정본이 브라우저 기본으로 렌더하던 크기에 가까운 토큰(h4 16 · h2 24 은 동일) */
.jb-prose h1{ font-size:var(--jb-fs-h2); }
.jb-prose h2{ font-size:var(--jb-fs-h3); }
.jb-prose h3{ font-size:var(--jb-fs-md); }
.jb-prose h4{ font-size:var(--jb-fs-base); }
.jb-prose p{ margin:0 0 var(--jb-sp-3); }
.jb-prose ul, .jb-prose ol{ margin:0 0 var(--jb-sp-3); padding-left:20px; }
.jb-prose a{ color:var(--jb-brand); text-decoration:underline; }
.jb-prose__scroll{ overflow-x:auto; }
/* ── Side box (진행 상태 + CTA) ─────────────────────────────────────── */
.jb-sidebox{ padding:var(--jb-sp-5); border:1px solid var(--jb-border); border-radius:var(--jb-r-card);
background:var(--jb-surface); }
/* 표준 연결영역 4종 래퍼(stdLinks.jsp)
1단계 배포본에는 규칙이 없어 사이드박스 4개가 맞붙어 보더가 겹쳐 보였다(2026-09-14 실측).
기본은 1열 + 간격. 우측 스티키 열(340px)에서의 모양은 그대로고 간격만 생긴다. */
/* 위 여백 — 상세 우측 스티키 박스 안에서 접수요약(.sminfo) 바로 뒤에 붙어 딱 붙어 보였다(단위테스트01 · 요약 하단 = 첫 카드 상단 957px).
gap 은 카드 사이 간격만 준다. 레이아웃 속성이라 !important 를 쓰지 않는다 — 운영 리셋 div{margin-top:0}(0,0,1)은 클래스로 이긴다. */
.jb-stdlinks{ display:grid; gap:var(--jb-sp-4); align-items:start; margin-top:var(--jb-sp-4); }
/* 우측 열이 아직 없는 상세 화면에서 본문 폭(1260px)에 가로로 놓을 때 쓴다.
해당 화면에 우측 스티키가 생기면 래퍼를 걷고 include 를 그 안으로 옮긴다. */
.jb-stdlinks-row .jb-stdlinks{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.jb-sidestate{ display:flex; align-items:center; justify-content:space-between; gap:var(--jb-sp-3);
margin-bottom:var(--jb-sp-4); font-size:var(--jb-fs-sm); color:var(--jb-muted); }
.jb-sidestate__val{ display:inline-flex; align-items:center; gap:var(--jb-sp-2); }
.jb-sidestate__dday{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-lg); color:var(--jb-danger); }
/* 마감일이 없는 표기(「미정」 · 「상시」 · 「모집완료시」) — 브랜드색 (2026-09-22 · 13 C2 · D142 ⑤)
기본값은 --jb-danger 라 「상시」가 「D-1」과 같은 빨강으로 보였다. 급하지 않은 상태에 위험색을 쓰지 않는다.
⚠️ 목록의 `.jb-badge--always`(배지)와 «같은 의미 · 같은 색 · 다른 컴포넌트»다 —
상세 진행상태는 (display 글꼴 · --jb-fs-lg · bold)라 배지 기본값(h20 · --jb-fs-2xs)이 얹히면 모양이 깨진다. */
.jb-sidestate__dday--always{ color:var(--jb-brand); }
/* ── Side summary (dl 요약) ─────────────────────────────────────────── */
.jb-sidesum{ margin:0; }
.jb-sidesum__row{ padding:0 0 var(--jb-sp-4); }
.jb-sidesum__row:last-child{ padding-bottom:0; }
.jb-sidesum dt{ margin-bottom:var(--jb-sp-2); font-size:var(--jb-fs-sm); color:var(--jb-muted); }
.jb-sidesum dd{ margin:0; font-size:var(--jb-fs-base); font-weight:var(--jb-fw-medium); color:var(--jb-ink); }
.jb-sidesum dd ul{ display:flex; flex-wrap:wrap; gap:var(--jb-sp-2); margin:0; padding:0; list-style:none; }
/* ── Attach (첨부 목록) ─────────────────────────────────────────────── */
.jb-attach{ padding:var(--jb-sp-5); border:1px solid var(--jb-border); border-radius:var(--jb-r-box);
background:var(--jb-surface); }
.jb-attach__title{ margin:0 0 var(--jb-sp-3); font-family:var(--jb-font-display);
font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-attach__list{ display:flex; flex-direction:column; gap:var(--jb-sp-2); margin:0; padding:0; list-style:none; }
.jb-attach__link{ display:inline-flex; align-items:center; gap:var(--jb-sp-2);
font-size:var(--jb-fs-sm); color:var(--jb-body); text-decoration:none; }
.jb-attach__link:hover{ color:var(--jb-brand); text-decoration:underline; }
/* 91-B — 운영 `a:link`(0,1,1) 가 위 (0,1,0) 선언을 이겨 첨부 링크가 푸터 갈색으로 렌더됐다.
같은 깊이(0,2,1)로 올린다. 아이콘은 `currentColor` 라 함께 따라온다. */
a.jb-attach__link:link, a.jb-attach__link:visited{ color:var(--jb-body); }
a.jb-attach__link:hover, a.jb-attach__link:active{ color:var(--jb-brand); }
.jb-attach__ico{ flex:none; width:16px; height:16px; }
/* ── Disclaimer (재단 면책 안내 · 운영 전문 유지) ───────────────────── */
.jb-disclaimer{ padding:var(--jb-sp-5); border:1px solid var(--jb-border); border-radius:var(--jb-r-box);
background:var(--jb-bg-subtle); font-size:var(--jb-fs-2xs); line-height:1.7; color:var(--jb-muted); }
.jb-disclaimer p{ margin:0; }
.jb-disclaimer p + p{ margin-top:var(--jb-sp-3); }
/* ══ [폼] ═════════════════════════════════════════════════════════════ */
/* ── Fieldset (폼 섹션 · 기본정보 / 구직상태 / 관심정보) ────────────── */
.jb-fieldset{ margin:0; padding:0; border:0; min-width:0; }
.jb-fieldset + .jb-fieldset{ margin-top:var(--jb-sp-7); padding-top:var(--jb-sp-7); border-top:1px solid var(--jb-border); }
/* legend 는 기본적으로 fieldset 의 border-top 위에 얹혀 구분선을 관통한다.
float:left + width:100% 로 일반 블록처럼 흐르게 하고, 다음 형제에서 clear 한다. */
.jb-fieldset__legend{ display:block; float:left; width:100%; padding:0 0 var(--jb-sp-5);
font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-lg);
line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-fieldset__legend + *{ clear:both; }
/* ── Form row (라벨 + 본체 + 도움말/에러) ───────────────────────────── */
.jb-form{ display:flex; flex-direction:column; gap:var(--jb-sp-5); }
.jb-form__row{ display:grid; grid-template-columns:140px minmax(0,1fr); gap:var(--jb-sp-4); align-items:start; }
.jb-form__label{ padding-top:13px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-medium);
font-size:var(--jb-fs-base); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-form__req{ margin-left:2px; color:var(--jb-danger); }
.jb-form__body{ min-width:0; display:flex; flex-direction:column; gap:var(--jb-sp-3); }
/* ── 세로형 폼 (2026-09-18 · D90) — 라벨이 «위», 본문이 «아래» ──────────────
가로형(140px 라벨 + 본문)은 값이 짧은 정보 확인 화면에 맞다. 선택지가 길거나
칩·라디오가 여러 줄로 흐르는 «설정 폼»은 좌측 라벨 폭이 본문을 좁혀 줄바꿈이 늘어난다.
★ 항목 사이에 구분선을 둔다 — 세로로 이어지면 어디까지가 한 항목인지 흐려진다. */
.jb-form--stack .jb-form__row{ display:block; padding:var(--jb-sp-5) 0; border-bottom:1px solid var(--jb-border-soft); }
/* 첫 항목은 위 안내·제목과 «한 덩어리»가 아니므로 띄운다 (2026-09-18 사용자 확정 40px).
★ 바로 앞이 안내 박스면 그쪽 margin-bottom 을 걷는다 — 두 여백이 더해져 54px 이 된다.
여백은 «한 쪽만» 갖게 해야 값이 예측된다. */
.jb-form--stack .jb-form__row:first-child{ padding-top:var(--jb-sp-7); }
.jb-notice:has(+ .jb-form--stack){ margin-bottom:0; }
.jb-form--stack .jb-form__row:last-child{ border-bottom:0; }
.jb-form--stack .jb-form__label{ display:block; padding-top:0; margin-bottom:var(--jb-sp-3); }
/* 한 줄에 둘 — 총 경력 · 최종학력처럼 짝을 이루는 항목 */
.jb-form--stack .jb-form__row--2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--jb-sp-6); }
.jb-form--stack .jb-form__row--2 > .jb-form__cell{ min-width:0; }
@media (max-width:768px){
.jb-form--stack .jb-form__row--2{ grid-template-columns:1fr; gap:var(--jb-sp-5); }
}
.jb-form__inline{ display:flex; align-items:center; gap:var(--jb-sp-2); flex-wrap:wrap; }
.jb-form__static{ margin:0; padding-top:13px; font-size:var(--jb-fs-base); line-height:var(--jb-lh-tight); color:var(--jb-body); }
.jb-form__help{ margin:0; font-size:var(--jb-fs-xs); line-height:1.5; color:var(--jb-muted); }
.jb-form__error{ margin:0; font-size:var(--jb-fs-xs); line-height:1.5; color:var(--jb-danger); }
.jb-form__actions{ display:flex; justify-content:center; gap:var(--jb-sp-3);
margin-top:var(--jb-sp-7); padding-top:var(--jb-sp-6); border-top:1px solid var(--jb-border); }
/* ── Input / Select / Textarea ──────────────────────────────────────── */
.jb-input, .jb-select, .jb-textarea{
width:100%; padding:0 var(--jb-sp-4); border:1px solid var(--jb-border); border-radius:var(--jb-r-btn);
background:var(--jb-surface); font-family:var(--jb-font-body); font-size:var(--jb-fs-base);
line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-input, .jb-select{ height:var(--jb-input-h); }
.jb-textarea{ min-height:140px; padding:13px var(--jb-sp-4); line-height:var(--jb-lh-base); resize:vertical; }
.jb-input::placeholder, .jb-textarea::placeholder{ color:var(--jb-disabled); }
.jb-input:focus, .jb-select:focus, .jb-textarea:focus{ outline:0; border-color:var(--jb-brand); box-shadow:var(--jb-ring); }
.jb-input[readonly], .jb-input[disabled], .jb-select[disabled], .jb-textarea[disabled]{
background:var(--jb-bg-subtle); color:var(--jb-muted); }
.jb-input.is-error, .jb-select.is-error, .jb-textarea.is-error{ border-color:var(--jb-danger); }
.jb-input--w120{ width:120px; flex:none; }
.jb-input--w200{ width:200px; flex:none; }
.jb-select{ appearance:none;
background-image:url("/resource/new_2026/img/icon/ui/caret-down-select.svg");
background-repeat:no-repeat; background-position:calc(100% - 14px) 50%; background-size:18px 18px; padding-right:38px; }
.jb-select--w110{ width:110px; flex:none; }
/* ── Check / Radio (커스텀 마크 · 운영 custom-checkbox 대응) ────────── */
.jb-check, .jb-radio{ display:inline-flex; align-items:center; gap:var(--jb-sp-2);
font-family:var(--jb-font-body); font-size:var(--jb-fs-sm); line-height:var(--jb-lh-tight);
color:var(--jb-body); cursor:pointer; }
.jb-check input, .jb-radio input{ position:absolute; width:1px; height:1px; opacity:0; }
.jb-check__mark, .jb-radio__mark{ position:relative; flex:none;
width:var(--jb-mark); height:var(--jb-mark); border:1px solid var(--jb-border); background:var(--jb-surface);
transition:background var(--jb-dur-fast) var(--jb-ease), border-color var(--jb-dur-fast) var(--jb-ease); }
.jb-check__mark{ border-radius:var(--jb-r-sm); }
.jb-radio__mark{ border-radius:50%; }
/* 2026-09-17 단위테스트 04-9 : 체크 아이콘을 «중앙 기준»으로 놓는다.
종전 left/top 고정값(6px/2px)은 --jb-mark 가 20px 가 아닌 곳에서 마크 밖으로 삐져나왔다. */
.jb-check__mark::after{ content:""; position:absolute; left:50%; top:46%; width:5px; height:9px;
border:solid var(--jb-on-brand); border-width:0 2px 2px 0;
transform:translate(-50%,-50%) rotate(45deg); opacity:0; }
.jb-radio__mark::after{ content:""; position:absolute; inset:5px; border-radius:50%;
background:var(--jb-on-brand); opacity:0; }
.jb-check input:checked + .jb-check__mark,
.jb-radio input:checked + .jb-radio__mark{ background:var(--jb-brand); border-color:var(--jb-brand); }
.jb-check input:checked + .jb-check__mark::after,
.jb-radio input:checked + .jb-radio__mark::after{ opacity:1; }
.jb-check input:focus-visible + .jb-check__mark,
.jb-radio input:focus-visible + .jb-radio__mark{ box-shadow:var(--jb-ring); }
.jb-check input:disabled + .jb-check__mark,
.jb-radio input:disabled + .jb-radio__mark{ background:var(--jb-bg-subtle); border-color:var(--jb-border); }
.jb-check__label{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.jb-check__count{ flex:none; font-style:normal; font-size:var(--jb-fs-2xs); color:var(--jb-muted); }
.jb-checkgroup{ display:flex; flex-wrap:wrap; gap:var(--jb-sp-3) var(--jb-sp-5); }
/* ── File ───────────────────────────────────────────────────────────── */
.jb-file{ display:flex; align-items:center; gap:var(--jb-sp-2); flex-wrap:wrap; }
.jb-file input[type="file"]{ position:absolute; width:1px; height:1px; opacity:0; }
.jb-file__name{ flex:1 1 200px; min-width:0; height:var(--jb-input-h); padding:0 var(--jb-sp-4);
display:flex; align-items:center; border:1px solid var(--jb-border); border-radius:var(--jb-r-btn);
background:var(--jb-bg-subtle); font-size:var(--jb-fs-sm); color:var(--jb-muted);
overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.jb-file__list{ display:flex; flex-direction:column; gap:var(--jb-sp-2); margin:0; padding:0; list-style:none; }
.jb-file__item{ display:flex; align-items:center; gap:var(--jb-sp-2); font-size:var(--jb-fs-sm); color:var(--jb-body); }
.jb-file__del{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
padding:0; border:0; background:none; color:var(--jb-muted); cursor:pointer; }
/* ── Agree (약관 동의) ──────────────────────────────────────────────── */
.jb-agree{ border:1px solid var(--jb-border); border-radius:var(--jb-r-box); background:var(--jb-surface); }
.jb-agree__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--jb-sp-3);
padding:var(--jb-sp-4) var(--jb-sp-5); border-bottom:1px solid var(--jb-border); }
.jb-agree__title{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-agree__body{ max-height:180px; padding:var(--jb-sp-4) var(--jb-sp-5); overflow-y:auto;
font-size:var(--jb-fs-xs); line-height:1.7; color:var(--jb-muted); }
.jb-agree__foot{ padding:var(--jb-sp-4) var(--jb-sp-5); border-top:1px solid var(--jb-border);
background:var(--jb-bg-subtle); }
/* ══ [기존 컴포넌트 확장] ═════════════════════════════════════════════ */
/* 조건 칩 : 삭제 버튼 · 건수 (운영 addCdCnt 승계) */
/* 2026-09-17 단위테스트 04-8 : 선택 조건 칩은 필터(채용분야) 칩과 «같은 규격»이다.
높이·글자·라운딩을 따로 주지 않는다 — 삭제 버튼 자리만큼 오른쪽 여백만 줄인다. */
.jb-chip--removable{ padding-right:var(--jb-sp-3); }
.jb-chip__x{ display:inline-flex; align-items:center; justify-content:center; flex:none;
width:18px; height:18px; margin-left:var(--jb-sp-2); padding:0; border:0; border-radius:50%;
background:var(--jb-bg-subtle); color:var(--jb-muted); cursor:pointer;
font-size:12px; line-height:1; }
/* × 는 «규격이» 그린다 — 마크업에 맡기면 빈 원만 남는다(2026-09-18 실제 사고) */
.jb-chip__x::before{ content:"×"; }
/* ⚠️ 정본에 없는 «개발본 전용» 가드 — 지우기 전에 반드시 읽을 것.
dev 목록 5화면(02 대외활동 · 04 공공채용 · 08 취업교육 · 10 기업지원정책 · 12 일자리지원정책)은
같은 버튼 안에 ``(마스크 ✕)를 «직접» 넣는다
(`extrActvList.jsp:420·424` · `publicJobList.jsp:1067` · `empmEduList.jsp:584` ·
`entSprtList.jsp:611` · `jobSprtList.jsp:467`). 위 `::before` 만 이식하면 ✕ 가 «두 개» 그려진다.
정본 퍼블도 두 갈래다 — `mypage-empsvc.html` 은 «빈 span»(규격이 그린다),
`job-public-list.html`·`design-system.html` 은 «아이콘 자식»(마크업이 그린다).
➡️ 아이콘 자식이 있으면 규격은 그리지 않는다. 마크업을 한쪽으로 통일하면 이 줄을 지운다. */
.jb-chip__x:has(.jb-ico)::before{ content:none; }
/* 🔴 D99 ① (2026-09-18 실측) — 그 «아이콘 자식»이 버튼보다 커서 회색 원이 통째로 가려졌다.
`.jb-ico` 기본이 20×20 인데 `.jb-chip__x` 는 18×18 이다(로컬 실측 — 버튼 18 / 아이콘 20).
화면에는 맨 ✕ 글리프만 보이고 원형 배경이 사라진다. 버튼 «안»에 들어가는 크기로 줄인다.
값 10px 은 정본이 `::before{ content:"×"; font-size:12px }` 로 그리는 글리프와 같은 눈높이다.
⚠️ 근본 해법은 마크업 통일이다 — dev 목록 5화면이 `` 를 직접 넣는 것을 걷고 규격이 그리게 하면
위 `:has()` 가드와 이 규칙을 «둘 다» 지울 수 있다. 04 지시 범위를 넘어 그대로 둔다. */
.jb-chip__x > .jb-ico{ width:10px; height:10px; }
.jb-chip[aria-selected="true"] .jb-chip__x, .jb-chip[aria-pressed="true"] .jb-chip__x, .jb-chip.is-active .jb-chip__x{
background:var(--jb-on-brand-20); color:var(--jb-on-inverse); }
.jb-chip__count{ margin-left:var(--jb-sp-1); font-style:normal; font-size:var(--jb-fs-xs); color:var(--jb-muted); }
.jb-chip[aria-selected="true"] .jb-chip__count, .jb-chip[aria-pressed="true"] .jb-chip__count,
.jb-chip.is-active .jb-chip__count{ color:inherit; opacity:.75; }
/* 안내 박스 : 좌측 아이콘 + 본문 (버튼 없는 단순 안내) */
.jb-notice--plain{ justify-content:flex-start; align-items:flex-start; background:var(--jb-bg-subtle);
border-color:var(--jb-border); font-size:var(--jb-fs-sm); line-height:1.6; color:var(--jb-muted); }
.jb-notice__ico{ flex:none; width:18px; height:18px; margin-top:1px; }
/* 아이콘 «바로 뒤» 본문은 남는 폭을 다 쓴다 (2026-09-18 · D91)
`.jb-notice` 가 `justify-content:space-between` 이라(우측에 액션이 오는 경우를 위한 것)
본문이 늘어나지 않으면 아이콘과 문구가 «양 끝»으로 밀려 253px 이 벌어진다(실측).
★ 변형별로 주지 않고 «아이콘 다음 본문»에 준다 — 새 변형을 만들 때마다 빠뜨리지 않는다.
※ flex-wrap:wrap 이라 basis:auto 면 좁은 폭에서 통째로 아래로 떨어지는 문제도 함께 막는다. */
.jb-notice__ico + span{ flex:1 1 0; min-width:0; }
/* 정보 테이블 : th 를 좌측 라벨로 쓰는 상세 정보형 */
.jb-table--info th{ width:160px; padding:14px 20px; text-align:left; color:var(--jb-ink);
font-size:var(--jb-fs-sm); font-weight:var(--jb-fw-semibold); }
.jb-table--info td{ text-align:left; padding:14px 20px; }
/* ══ [반응형] ═════════════════════════════════════════════════════════ */
@media (max-width:1024px){
.jb-jobcat__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:768px){
.jb-pagehead{ padding:var(--jb-sp-6) 0 var(--jb-sp-5); }
.jb-pagehead__title{ font-size:var(--jb-fs-h2); }
.jb-pagehead__desc{ font-size:var(--jb-fs-sm); }
.jb-jobcat__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--jb-sp-2); }
.jb-jobcat__item{ min-height:86px; gap:var(--jb-sp-2); padding:var(--jb-sp-3) var(--jb-sp-1); }
.jb-jobcat__ico{ width:24px; height:24px; }
.jb-jobcat__name{ font-size:var(--jb-fs-2xs); }
.jb-searchbox{ padding:var(--jb-sp-4); }
.jb-searchbox__sub{ flex-direction:column; gap:var(--jb-sp-2); }
.jb-searchbox__sub-label{ padding-top:0; }
/* 🔴 2026-09-27 D281 · 세로 배치에서는 되돌린다 — 여기서는 `flex-direction:column` 이라
`align-items:center` 가 «가로» 중앙이 된다. 실측(390) — 지원금 행만 라벨좌 169 · 내용좌 120 으로
밀리고 다른 행은 33 이었다. 세로에서는 중심을 맞출 «짝»이 없으므로 왼쪽 정렬이 맞다.
⚠️ 정본 components.css 에는 이 리셋이 «없다» — 설계 세션에 올렸다. */
.jb-searchbox__sub:has(.jb-check){ align-items:flex-start; }
.jb-sorttabs{ gap:var(--jb-sp-5); }
.jb-detailhead{ padding:var(--jb-sp-5); }
.jb-detailhead__title{ font-size:var(--jb-fs-h3); }
.jb-prose{ padding:var(--jb-sp-5); }
.jb-form__row{ grid-template-columns:1fr; gap:var(--jb-sp-2); }
.jb-form__label{ padding-top:0; }
.jb-form__static{ padding-top:0; }
.jb-tabbar{ gap:var(--jb-sp-5); overflow-x:auto; flex-wrap:nowrap; }
.jb-tabbar__item{ height:46px; font-size:var(--jb-fs-base); }
}
/* ── Link list (상세 사이드 '관련 정보 및 서비스') ──────────────────── */
.jb-linklist__title{ margin:0 0 var(--jb-sp-3); font-family:var(--jb-font-display);
font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-linklist__ul{ display:flex; flex-direction:column; gap:var(--jb-sp-2); margin:0; padding:0; list-style:none; }
.jb-linklist__ul a{ display:block; font-size:var(--jb-fs-sm); line-height:1.5;
color:var(--jb-body); text-decoration:none; }
.jb-linklist__ul a:hover{ color:var(--jb-brand); text-decoration:underline; }
/* ── 건수를 단 링크 목록 (.jb-linklist__ul--count) ── 2026-09-18 · D101 · D111 · 05 §4-4
「내 활동 이어가기」처럼 «내 것이 몇 건인지»가 링크 이름만큼 중요한 자리에 쓴다.
★ 건수가 0 인 줄은 «서버가 그리지 않는다» — 회색 0 을 늘어놓으면 할 일이 없다는 사실만 강조된다.
전부 0 이면 카드 자체를 내지 않는다(마이페이지 .jb-goon 과 같은 규칙).
⚠️ 위 `.jb-linklist__ul a{ display:block }`(0,1,1)와 특정도가 같다 — «뒤»에 있어야 flex 가 이긴다. */
.jb-linklist__ul--count a{ display:flex; align-items:baseline; justify-content:space-between;
gap:var(--jb-sp-3); }
.jb-linklist__ul--count a > span{ min-width:0; }
.jb-linklist__count{ flex:none; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
color:var(--jb-brand); }
/* 링크 전체에 밑줄이 그어지면 숫자까지 딸려간다 — 글자 쪽만 긋는다 */
.jb-linklist__ul--count a:hover{ text-decoration:none; }
.jb-linklist__ul--count a:hover > span{ text-decoration:underline; }
/* 카드 ① 기관명 — 지시 95 「01 표준 연결영역」 #2 로 stdLinks.jsp 에서 마크업을 뺐다(현재 미사용).
규칙은 남겨 둔다(다른 화면이 쓸 수 있고, 되돌릴 때 여기만 보면 된다). */
.jb-linklist__meta{ display:block; margin-top:2px; font-size:var(--jb-fs-xs); color:var(--jb-muted); }
.jb-linklist__foot{ margin-top:var(--jb-sp-4); }
/* ▼ 17단계 B-6 · B-7 (D166 · D169) — 링크 목록 우측 요소의 규격.
2026-09-23 사용자 지시 : 「목록 우측을 라벨 배지로」 + 「`~D-3` 도 「상시」와 높이·텍스트 크기를 정확히 맞춰 ·
다른 카드도 동일하게」. 「다른 카드도」가 일반화 의도라 페이지 CSS 가 아니라 부품에 둔다.
🔴 두 부품의 기본 치수가 다르다 — `.jb-label` h28 · 14px(fs-sm) · 좌우 12 · r-btn
`.jb-badge` h20 · 12px(fs-2xs) · 좌우 6 · r-sm
한 줄에 나란히 서면 8px 씩 어긋나고, 4줄이면 32px 이 밀려 카드 하단 버튼 줄이 안 맞는다.
➡ 목록 «안에서만» 배지를 라벨과 같은 상자로 맞춘다. 남는 차이는 «색»뿐이고
그 색(D-day = danger)이 곧 마감이라는 뜻을 나른다. `.jb-badge` 기본(h20)은 건드리지 않는다.
★ 영향 범위 실측(2026-09-23) — `.jb-linklist__ul` 안에 배지·라벨을 쓰는 dev 화면은 **0건**이었다.
지금은 대상별 허브만 쓰므로 `.jb-hubpage` 한정과 결과가 같다. */
/* ▼ 보강(2026-09-23 사용자) — 「`D-7` 같은 라벨도 사이즈가 작다 · 좌측 라벨과 맞춰라」.
카드 «메타 줄»에도 같은 혼재가 있어 자리를 하나 더한다.
🔴 자리마다 덧붙이지 않으려고 전수 확인했다(dev JSP 기준 · 2026-09-23) —
| 자리 | 배지+라벨 혼재 | 판단 |
| .jb-linklist__ul | 있음(허브) | 적용 |
| .jb-policycard__meta | 1곳(trgtHub) | 적용 |
| .jb-policycard__badges | 0곳 | 🔁 D303 으로 «뒤집혔다» — 아래 참조 |
🔴 D303 ② (2026-09-27 사용자) — 「라벨 사이즈를 통일해줘. 특히 «인력·고용» 라벨이 사이즈가 작아」.
이 표는 «한 줄 안의 혼재»만 셌는데, 사용자는 «줄을 넘나들며» 배지(h20)와 라벨(h28)을 비교했다.
실제로 배지줄 안에도 `.jb-label`(지역)이 나란히 서므로 h20 이 «보조 표시»가 아니라 «어긋난 것»으로 읽힌다.
➡️ 「작은 게 맞다」는 철회. 규격은 .jb-policycard__badges 블록(아래)에 둔다.
| .jb-jobcard__meta | 0곳(9곳 전부) | 🔴 제외 — D-day 가 전용 클래스(.jb-jobcard__dday)다 |
| .jb-summary__meta | 0곳 | 🔴 제외 |
➡ 바뀌는 화면은 대상별 허브뿐이다(청년 카드 3 + 장애인 카드 3). 다른 화면 회귀 없음. */
.jb-linklist__ul .jb-label,
.jb-linklist__ul .jb-badge,
.jb-policycard__meta .jb-label,
.jb-policycard__meta .jb-badge{ flex:none; }
.jb-linklist__ul .jb-badge,
.jb-policycard__meta .jb-badge{ height:28px; padding:0 12px; border-radius:var(--jb-r-btn);
font-family:var(--jb-font-body); font-weight:var(--jb-fw-medium); font-size:var(--jb-fs-sm); }
/* ── 표준 연결영역(stdLinks.jsp) 한정 — 지시 95 「01 표준 연결영역」 ───────
#1 목록 항목마다 하단 구분선 · 마지막 항목은 선 없음
#3 「회원이면 더 편해요」 카드 = 면(brand-weak) · 테두리 없음 · display 폰트 600
근거 = 프로토타입 theme-neutral.css
`.std-foot__col li{padding:5px 0;border-bottom:1px solid …}`
`.std-foot__col li:last-child{border-bottom:0}` · `.std-foot__col--member{background:…}`
🔄 2026-09-23 정정(D175) — 종전 주석은 「정본이 전역으로 준다」고 적었는데 «낡은 내용»이었다.
정본은 2026-09-17 에 이미 좁혔다 → `.jb-sidebox .jb-linklist__ul > li`(정본 components.css:911~912).
➡️ 정본 규칙 하나면 상세 우측 · 허브 하단 4칼럼 · `.jb-tgarea` · 중장년 2단이 «전부» 걸린다.
⚠️ 그런데도 지금 `.jb-stdlinks` 로 두는 이유는 «시점» 때문이다 —
`.jb-sidebox` 로 통일하면 15 차수에 판정을 마친 취업준비 허브(prepHub) 하단 4칼럼의
선 · 여백이 함께 바뀌어 재검수가 필요하다. 17 은 대상별 허브만 여는 차수다.
➡️ 범위 통일은 «운영 CSS 흡수 차수»로 미룬다(91 대장 24번).
⚠️ 그때 함께 고칠 것 — 여기는 `padding:12px 0` «단축»을 쓰는데 정본은 `padding-bottom` 만 준다.
그 단축이 `--guide` 의 `padding-left:30px` 를 덮어 아래에 보정 규칙을 또 달게 만든 원인이다.
⚠️ 17 에서는 대상별 허브만 열었다 — `.jb-tgarea` · `.jb-hubpage .jb-grid--2`(page-hub.css).
⚠️ gap 을 0 으로 두고 li 의 padding 으로 간격을 만든다. 그래야 글자~선~글자가 대칭이 된다
(gap 을 남기면 선 위 10px · 선 아래 16px 로 어긋난다). 레이아웃 속성이라 !important 를 쓰지 않는다. */
.jb-stdlinks .jb-linklist__ul{ gap:0; }
.jb-stdlinks .jb-linklist__ul > li{ padding:var(--jb-sp-3) 0;
border-bottom:1px solid var(--jb-border-soft); }
.jb-stdlinks .jb-linklist__ul > li:first-child{ padding-top:0; }
.jb-stdlinks .jb-linklist__ul > li:last-child{ padding-bottom:0; border-bottom:0; }
/* 가입 유도 카드(로그인 전) — 지시 95 「01 표준 연결영역」 #3 · 「회원이면 더 편해요」
★ 이름은 정본 «.jb-sidebox--brand» 다(design/css/components.css · CHANGELOG 2026-09-17 #2).
대비 : --jb-ink(#222222) on --jb-brand-weak(#E2F4F5) = 14.0:1 (WCAG AAA 통과).
구분선은 옅은 면 위에서 --jb-border-soft(#E9EEF0)가 보이지 않으므로
같은 「옅은 테두리」 계열인 --jb-brand-soft 로 바꾼다(하드코딩 아님).
⚠️ 정본은 `border:0` 이지만 여기서는 «색만 투명»으로 둔다 — 보이는 결과는 같고 두 가지를 더 지킨다.
① 형제 카드(1px)와 박스 크기가 어긋나지 않는다(폭 2px · 높이 2px 차이 방지).
② 고대비 보기(page-hub.css `html.jb-view--contrast .jb-sidebox{border-color:#fff}` · (0,2,1))가
그대로 이겨 흰 테두리를 되살린다. border:0 으로 지우면 고대비에서 카드 경계가 사라진다. */
.jb-sidebox--brand{ border-color:transparent; background:var(--jb-brand-weak); }
.jb-sidebox--brand,
.jb-sidebox--brand .jb-linklist__title,
.jb-sidebox--brand .jb-linklist__ul a{
font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); }
.jb-stdlinks .jb-sidebox--brand .jb-linklist__ul > li{
font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-sm); line-height:1.5; color:var(--jb-ink);
border-bottom-color:var(--jb-brand-soft); }
/* ── 안내형 목록 `.jb-linklist__ul--guide` — 「회원이면 더 편해요」 (05 지시 §2 · 2026-09-18) ──
옆 카드가 전부 링크라 이 카드도 누르면 어디로 갈 것처럼 보였다. 실제로는 «로그인하면 생기는 것»의 안내다.
★ 구분선을 걷고 «체크 원형»을 붙여 「목록」이 아니라 「안내」로 읽히게 한다(번호 → 체크 · 사용자 확정).
★ 마크업은 가 아니라 — 눌러지는 것처럼 보이지 않게.
🔴 `.jb-ico` 하나로는 «면 + 흰 체크»를 못 만든다 — 배경색을 mask 로 깎는 방식이라 색 하나짜리 글리프만 나온다.
원형 면은 li `::before`(CSS)가, 흰 체크는 «마크업의 » 가 그린다.
CSS 만 옮기고 마크업에서 를 빼면 «원만» 남는다.
── ① 정본 규격 (design/css/components.css:629~643 · 값·이름 그대로) ── */
.jb-linklist__ul--guide{ gap:var(--jb-sp-3); }
.jb-linklist__ul--guide > li{ display:flex; align-items:center; }
.jb-linklist__ul--guide > li{ position:relative; padding-left:30px; }
.jb-linklist__ul--guide > li::before{
content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
width:22px; height:22px; border-radius:50%; background:var(--jb-brand); }
.jb-linklist__ul--guide > li > .jb-ico{
position:absolute; left:4px; top:50%; transform:translateY(-50%);
width:14px; height:14px; background-color:var(--jb-on-brand); }
/* ▼ 05 QA 결함(D107) — 운영 layout.css 의 `*{ font-family:'Noto Sans KR' }` 가 span 에 «직접» 걸려
부모(.jb-sidebox--brand · display 폰트)의 상속을 이겼다. inherit 로 부모 글꼴을 되찾는다.
prepHub 는 부모가 원래 Noto 라 영향 없다. */
.jb-linklist__ul--guide > li > span{ min-width:0; font-family:inherit; font-size:var(--jb-fs-sm); line-height:1.5; color:var(--jb-body); }
/* ── ② 정본 구분선 제거 (design/css/components.css:874~875) ── */
.jb-linklist__ul--guide.jb-linklist__ul > li,
.jb-sidebox .jb-linklist__ul--guide > li{ padding-bottom:0; border-bottom:0; }
/* ── ③ dev 맥락 보정 — «정본에 없는 개발본 전용» · 지우기 전에 읽을 것 ──
정본은 `.jb-linklist__ul > li` 구분선을 «전역»으로 주지만 dev 는 허브 회귀를 막으려고 `.jb-stdlinks` 로 좁혀 뒀다(위 908~924).
그 규칙들이 정본 ①②보다 특정도가 높아 그대로 두면 ①②가 «진다».
.jb-stdlinks .jb-linklist__ul{ gap:0 } (0,2,0) → ① gap(0,1,0) 이 진다
.jb-stdlinks .jb-linklist__ul > li{ padding:12px 0; border… } (0,2,1) → ① padding-left:30px 가 0 으로 덮여
«체크 원이 글자 위에 겹친다»
➡️ 같은 스코프·같은 특정도로 «뒤»에 둬서 이긴다. `!important` 는 쓰지 않는다(레이아웃 속성). */
.jb-stdlinks .jb-linklist__ul.jb-linklist__ul--guide{ gap:var(--jb-sp-3); }
.jb-stdlinks .jb-linklist__ul--guide > li{ padding:0 0 0 30px; border-bottom:0; }
/* ══════════════════════════════════════════════════════════════════════
허브 · 신청접수 컴포넌트 v1 (2026-09-04 · A 등급 화면 5종)
----------------------------------------------------------------------
목차 : Subhead · Subhero · Apbanner · Poster · Checkgrid · Step ·
Extcard · Viewtools · Policycard(승격)
══════════════════════════════════════════════════════════════════════ */
/* ── Subhead (서브 페이지 섹션 소제목 + 우측 링크) ───────────────────
메인용 .jb-sechead(36px)보다 작은 서브 페이지 전용. 전 허브 화면 공통. */
.jb-subhead{ 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-subhead__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-subhead__desc{ margin:var(--jb-sp-2) 0 0; font-size:var(--jb-fs-sm); color:var(--jb-muted); }
/* ── Subhero (허브 페이지 상단 소개 배너) ───────────────────────────── */
.jb-subhero{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--jb-sp-7);
align-items:center; padding:var(--jb-pad-card); border-radius:var(--jb-r-card); background:var(--jb-bg-section); }
.jb-subhero__title{ margin:0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-h2); line-height:1.35; color:var(--jb-ink); }
.jb-subhero__desc{ margin:var(--jb-sp-3) 0 0; font-size:var(--jb-fs-base); line-height:1.6; color:var(--jb-muted); }
.jb-subhero__side{ display:flex; flex-direction:column; gap:var(--jb-sp-3); }
.jb-subhero__stat{ padding:var(--jb-sp-4) var(--jb-sp-5); border-radius:var(--jb-r-box); background:var(--jb-surface); }
.jb-subhero__stat b{ display:block; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-subhero__stat span{ display:block; margin-top:var(--jb-sp-1); font-size:var(--jb-fs-xs); line-height:1.5; color:var(--jb-muted); }
/* ── Apbanner (추천 사업 캐러셀 · 신청·접수) ─────────────────────────
슬라이드 전환은 기존 [data-slider] 훅을 그대로 쓴다. */
.jb-apbanner{ position:relative; border-radius:var(--jb-r-card); background:var(--jb-bg-section); overflow:hidden; }
.jb-apbanner__slide{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--jb-sp-7);
align-items:center; min-height:280px; padding:var(--jb-sp-7) var(--jb-sp-8); }
.jb-apbanner__slide[hidden]{ display:none !important; } /* jb- 컴포넌트 display 를 이긴다 */
.jb-apbanner__eyebrow{ display:inline-flex; align-items:center; height:26px; padding:0 var(--jb-sp-3);
border-radius:var(--jb-r-pill); background:var(--jb-brand-weak);
font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-xs);
line-height:1; color:var(--jb-brand-deep); }
.jb-apbanner__title{ margin:var(--jb-sp-4) 0 0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-h2); line-height:1.35; color:var(--jb-ink); }
.jb-apbanner__desc{ margin:var(--jb-sp-3) 0 var(--jb-sp-5); font-size:var(--jb-fs-base); line-height:1.6; color:var(--jb-muted); }
.jb-apbanner__nav{ position:absolute; right:var(--jb-sp-6); bottom:var(--jb-sp-5);
display:flex; align-items:center; gap:var(--jb-sp-2); }
.jb-apbanner__nav button{ display:inline-flex; align-items:center; justify-content:center;
width:var(--jb-ctrl); height:var(--jb-ctrl); padding:4px; border:0; border-radius:50%;
background:var(--jb-surface); color:var(--jb-muted); cursor:pointer; }
.jb-apbanner__count{ font-family:var(--jb-font-display); font-size:var(--jb-fs-xs); color:var(--jb-muted); }
/* ── Poster (포스터형 카드 · 신청·접수 · 기업지원사업) ───────────────
thumb 은 관리자 등록 포스터 이미지 자리. 이미지가 없으면 텍스트 포스터로 대체한다. */
.jb-poster{ display:flex; flex-direction:column; border:1px solid var(--jb-border);
border-radius:var(--jb-r-card); background:var(--jb-surface); overflow:hidden;
text-decoration:none; color:inherit;
transition:border-color var(--jb-dur-fast) var(--jb-ease), box-shadow var(--jb-dur-base) var(--jb-ease); }
.jb-poster:hover{ border-color:var(--jb-brand); box-shadow:var(--jb-shadow-hover); }
.jb-poster__thumb{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:var(--jb-sp-2); aspect-ratio:4 / 3; padding:var(--jb-sp-5); background:var(--jb-brand-weak); text-align:center; }
.jb-poster__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.jb-poster__eyebrow{ font-size:var(--jb-fs-2xs); color:var(--jb-brand-deep); }
.jb-poster__headline{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-lg); line-height:1.35; color:var(--jb-brand-darker); }
.jb-poster__sub{ font-size:var(--jb-fs-2xs); color:var(--jb-brand-deep); }
.jb-poster__body{ display:flex; flex-direction:column; align-items:flex-start;
gap:var(--jb-sp-2); padding:var(--jb-sp-5); } /* align-items 를 주지 않으면 배지가 가로로 늘어난다 */
.jb-poster__title{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-base); line-height:1.45; color:var(--jb-ink); }
.jb-poster__date{ font-size:var(--jb-fs-xs); color:var(--jb-muted); }
.jb-poster__date b{ font-weight:var(--jb-fw-medium); color:var(--jb-body); }
/* 메타 여러 개를 한 줄에(기관 · 학습시간 등). __date 가 «날짜 한 줄» 전용이라 따로 둔다.
2026-09-23 신설 — 취업준비 허브 「지금 듣기 좋은 교육」이 첫 사용처다. */
.jb-poster__meta{ display:flex; flex-wrap:wrap; gap:var(--jb-sp-1) var(--jb-sp-3);
font-size:var(--jb-fs-xs); color:var(--jb-muted); }
/* ── Checkgrid (다열 체크 그리드 · 지역/사업유형 선택) ──────────────── */
.jb-filter__group-head{ display:flex; align-items:center; justify-content:space-between;
gap:var(--jb-sp-3); flex-wrap:wrap; margin-bottom:var(--jb-sp-4); }
.jb-checkgrid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--jb-sp-3) var(--jb-sp-4); }
.jb-checkgrid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
/* ── Step (단계 카드 · 취업준비 허브) ───────────────────────────────── */
.jb-step{ display:flex; flex-direction:column; gap:var(--jb-sp-3);
padding:var(--jb-sp-6) var(--jb-sp-5); border:1px solid var(--jb-border);
border-radius:var(--jb-r-card); background:var(--jb-surface); }
.jb-step__num{ display:inline-flex; align-items:center; align-self:flex-start; height:24px; padding:0 var(--jb-sp-3);
border-radius:var(--jb-r-pill); background:var(--jb-brand); color:var(--jb-on-brand);
font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-2xs);
letter-spacing:.04em; line-height:1; }
/* 2026-09-22 사용자 지시 — 아이콘을 «STEP 배지와 같은 줄 오른쪽»으로 올리고 크기를 2배(32 → 64)로 */
/* 머리 = 왼쪽(STEP 배지 + 제목) 한 묶음 · 오른쪽 아이콘 — 둘을 «위»로 맞춘다 */
.jb-step__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--jb-sp-3); }
.jb-step__headtxt{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--jb-sp-2); min-width:0; }
.jb-step__ico{ width:64px; height:64px; flex:none; color:var(--jb-brand); }
.jb-step__title{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-lg); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-step__desc{ margin:0; font-size:var(--jb-fs-sm); line-height:1.6; color:var(--jb-muted); }
.jb-step__state{ margin-top:auto; padding:var(--jb-sp-3) var(--jb-sp-4); border-radius:var(--jb-r-btn);
background:var(--jb-bg-subtle); font-size:var(--jb-fs-xs); line-height:1.5; color:var(--jb-muted); }
/* 🔴 2026-09-27 D284 — 버튼 사이 간격이 «없었다»(정본 components.css:1090 과 같은 값).
STEP 1~3 은 버튼이 «하나»라 안 드러났고, 버튼이 둘인 STEP 4(문의하기 + 채용공고 보러가기)만 붙어 보였다.
10px = `.jb-step` · `.jb-step__head` 가 이미 쓰는 값이다(새 값이 아니다).
flex-wrap 은 좁은 폭에서 두 번째 버튼이 넘치지 않게 하는 보험이다. */
.jb-step__foot{ display:flex; gap:var(--jb-sp-3); flex-wrap:wrap; }
/* ── Extcard (외부 서비스 카드 · 대상별 서비스) ─────────────────────── */
.jb-extcard{ display:flex; flex-direction:column; gap:var(--jb-sp-3);
padding:var(--jb-sp-5); border:1px solid var(--jb-border); border-radius:var(--jb-r-card);
background:var(--jb-surface); text-decoration:none; color:inherit;
transition:border-color var(--jb-dur-fast) var(--jb-ease); }
.jb-extcard:hover{ border-color:var(--jb-brand); }
.jb-extcard__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--jb-sp-3); flex-wrap:wrap; }
.jb-extcard__name{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-md); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-extcard__desc{ margin:0; font-size:var(--jb-fs-sm); line-height:1.6; color:var(--jb-muted); }
.jb-extcard__go{ display:inline-flex; align-items:center; gap:var(--jb-sp-1); margin-top:auto;
font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-sm); color:var(--jb-brand); }
.jb-extcard__go-ico{ width:16px; height:16px; }
/* ── Viewtools (접근성 보기 도구 · 장애인 패널) ──────────────────────
운영 장애인채용관(exhb seq=159)의 확대·명도 도구를 3버튼으로 단순화한 것.
body 에 is-text-large / is-high-contrast 를 토글한다. */
.jb-viewtools{ display:flex; align-items:center; gap:var(--jb-sp-4); flex-wrap:wrap;
padding:var(--jb-sp-4) var(--jb-sp-5); border:1px solid var(--jb-border);
border-radius:var(--jb-r-box); background:var(--jb-bg-subtle); }
.jb-viewtools__title{ display:inline-flex; align-items:center; gap:var(--jb-sp-2);
font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-sm); color:var(--jb-ink); }
.jb-viewtools__actions{ display:flex; gap:var(--jb-sp-2); flex-wrap:wrap; }
.jb-viewtools__actions button{ display:inline-flex; align-items:center; gap:var(--jb-sp-1);
height:var(--jb-btn-h-sm); padding:0 var(--jb-sp-3); border:1px solid var(--jb-border);
border-radius:var(--jb-r-btn); background:var(--jb-surface);
font-family:var(--jb-font-body); font-size:var(--jb-fs-xs); line-height:1; color:var(--jb-body); cursor:pointer; }
.jb-viewtools__actions button[aria-pressed="true"]{ border-color:var(--jb-brand-deep); background:var(--jb-brand-deep); color:var(--jb-on-brand); }
.jb-viewtools__status{ margin-left:auto; font-size:var(--jb-fs-xs); color:var(--jb-muted); }
/* ── Policy card (page-list.css 에서 승격 · 정책·사업 카드 공용) ─────── */
.jb-policycard{ display:flex; flex-direction:column; gap:var(--jb-sp-3);
padding:var(--jb-sp-5); border:1px solid var(--jb-border); border-radius:var(--jb-r-card);
background:var(--jb-surface); text-decoration:none; color:inherit;
transition:border-color var(--jb-dur-fast) var(--jb-ease); }
.jb-policycard:hover{ border-color:var(--jb-brand); }
.jb-policycard__badges{ display:flex; align-items:center; gap:var(--jb-sp-2); flex-wrap:wrap; }
/* 🔴 D303 ② (2026-09-27 사용자 지적) — 「인력·고용」(.jb-badge--brand)이 「하남시」(.jb-label)보다 «작다».
실측 = 배지 h20 · padding 0 6px · fs-2xs · r-sm ↔ 라벨 h28 · padding 0 12px · fs-sm · r-btn.
한 줄에 나란히 서는데 규격이 둘이라 눈에 띄게 어긋났다.
➡️ 배지줄 안의 .jb-badge 를 «라벨 규격»으로 맞춘다 — 같은 줄에 서는 것은 같은 크기다.
★ 범위 = 정본에서 이 부품을 쓰는 곳 biz-home(4) · target-hub(6) · design-system(2).
화면별 오버라이드를 만들지 않는다(§배지·라벨 높이 통일의 기존 원칙).
⚠️ 17 대상별 서비스가 «함께» 바뀐다 — 앞 차수 합격분이라 배지줄만 커지고 나머지는 불변이어야 한다. */
.jb-policycard__badges .jb-badge{ height:28px; padding:0 12px; border-radius:var(--jb-r-btn);
font-size:var(--jb-fs-sm); font-weight:var(--jb-fw-medium); }
.jb-policycard__title{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-md); line-height:1.45; color:var(--jb-ink); }
/* 🔴 D303 ③ (2026-09-27 사용자 지적) — 「화성산업진흥원 2026.07.27 ~ 2026.08.11 D-2」 줄에서
D-day 배지와 좌측 텍스트의 «세로 정렬»이 어긋나 있었다.
원인 = align-items 가 없어 기본값 stretch. 텍스트 span 은 줄 높이(≈20px)인데 배지는 28px 라,
stretch 가 텍스트 상자를 28px 로 늘리고 «글자가 위로 붙었다».
➡️ align-items:center — 배지가 섞이는 줄은 «가운데»가 기준이다. */
.jb-policycard__meta{ display:flex; align-items:center; gap:var(--jb-sp-3); flex-wrap:wrap;
font-size:var(--jb-fs-sm); color:var(--jb-muted); }
/* --media : 좌측 썸네일 (기업지원정책 목록) */
/* 🔴 D303 ① (2026-09-27 사용자 지시) — 썸네일을 «카드 높이를 채우는» 크기로 키우고 폭은 «원본 비율»로.
종전 64x64 고정이라 카드 안에서 작았다. 실측 = 썸네일 원본 5건 전부 «338x254»(4:3 가로형).
➡️ align-items:stretch 로 높이를 카드에 맞추고 폭은 aspect-ratio 가 따라온다.
🔴 함께 고친 것 — D231(2026-09-26)에서 JSP 에는 ![]()
를 넣었는데 «CSS 규칙을 빠뜨렸다».
`__thumb img` 도 `overflow:hidden` 도 없어 338x254 원본이 64px 상자를 삐져나오고 있었다.
(그것이 사용자가 본 「썸네일이 작다·이상하다」의 절반이다.)
★ min-width:64px 는 «썸네일이 없을 때»(아이콘 대체)의 최소 폭 — 상태 분기의 쌍을 지킨다.
🔴 «갱신»(2026-09-27 사용자 「이렇게까지 키워달라는 건 아니었어. 45% 줄여줘」) —
처음에 `height:auto` + `align-self:stretch` + `aspect-ratio` 를 함께 줬더니 세 값이 서로를 밀었다.
stretch 가 높이를 늘리면 aspect-ratio 가 폭을 늘리고 그 폭이 다시 높이를 밀어 «원본 338x254 까지» 커진다.
➡️ **비율을 지키는 값은 «한 변»으로 고정한다** — height:140px 하나만 박고 폭은 aspect-ratio 가 따라온다.
338x254 → 186x140 = 한 변 55%(= 45% 축소). 부모의 align-items:stretch 는 «그대로 둔다»
(body 가 짧은 카드에서도 썸네일 높이가 흔들리지 않는다). */
.jb-policycard--media{ flex-direction:row; align-items:stretch; gap:var(--jb-sp-4); }
.jb-policycard__thumb{ display:flex; align-items:center; justify-content:center; flex:0 0 auto;
width:auto; height:140px; aspect-ratio:338/254; min-width:64px;
border-radius:var(--jb-r-box); background:var(--jb-brand-weak); color:var(--jb-brand);
overflow:hidden; }
.jb-policycard__thumb img{ width:100%; height:100%; object-fit:cover; }
.jb-policycard__thumb .jb-ico{ width:28px; height:28px; } /* 썸네일이 «없을 때»의 대체 */
.jb-policycard__body{ display:flex; flex-direction:column; gap:var(--jb-sp-2); min-width:0; }
/* ══ [반응형] ═════════════════════════════════════════════════════════ */
@media (max-width:1024px){
.jb-subhero{ grid-template-columns:1fr; gap:var(--jb-sp-5); padding:var(--jb-sp-6); }
.jb-apbanner__slide{ grid-template-columns:1fr; padding:var(--jb-sp-6); }
.jb-checkgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:768px){
.jb-subhero__title{ font-size:var(--jb-fs-h3); }
.jb-apbanner__title{ font-size:var(--jb-fs-h3); }
.jb-apbanner__nav{ position:static; justify-content:center; padding:0 0 var(--jb-sp-5); }
.jb-checkgrid, .jb-checkgrid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.jb-subhead__title{ font-size:var(--jb-fs-h4); }
.jb-policycard--media{ flex-direction:column; }
/* D303 ① — 세로 배치에서는 가로를 꽉 채운 배너형이다.
🔴 height 고정을 «풀어야» 비율(aspect-ratio)이 산다 — 140px 이 남으면 납작해진다. */
.jb-policycard__thumb{ width:100%; height:auto; align-self:auto; }
.jb-viewtools__status{ margin-left:0; width:100%; }
}
/* ══════════════════════════════════════════════════════════════════════
AI 서비스 컴포넌트 (page-main.css 에서 승격 · 2026-09-04)
----------------------------------------------------------------------
메인·마이페이지·AI 화면 공용. 섹션 배치(.jb-airdy / __lead / .jb-reco__grid)는
page-main.css 에 남겨 두고 규격만 여기로 옮겼다.
★ 도넛은 CSS conic-gradient — style="--jb-rate:93" 으로 값을 주입한다.
⚠ 입력완료율·"추천 가능"·부족항목의 산출 규칙은 미정의(R24). 확정 전까지 표기값은 예시다.
══════════════════════════════════════════════════════════════════════ */
.jb-airdy__box { padding:31px; border:1px solid var(--jb-border-weak); border-radius:var(--jb-r-card); background:var(--jb-surface); }
.jb-airdy__head{ display:flex; align-items:center; gap:30px; min-height:100px; margin-bottom:26px; }
.jb-airdy__txt { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.jb-airdy__title{ margin:12px 0 0; font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-lg); line-height:var(--jb-lh-tight); letter-spacing:-.4px; color:var(--jb-ink); }
.jb-airdy__desc { margin:10px 0 0; font-size:var(--jb-fs-base); line-height:var(--jb-lh-tight); letter-spacing:-.16px; color:var(--jb-muted); }
.jb-airdy__foot { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.jb-airdy__item { display:flex; flex-direction:column; min-height:127px; padding:16px 20px 22px; border:1px solid var(--jb-border); border-radius:var(--jb-r-box); }
.jb-airdy__row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; margin-bottom:8px; }
.jb-airdy__state{ font-size:var(--jb-fs-sm); line-height:18px; color:var(--jb-muted-weak); }
.jb-airdy__state--todo{ color:var(--jb-danger); }
.jb-airdy__name { display:block; margin-bottom:8px; font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-md); line-height:23px; color:var(--jb-ink); }
.jb-airdy__meta { display:flex; align-items:center; font-size:var(--jb-fs-sm); line-height:18px; color:var(--jb-muted); }
/* ▼ UI2026-IT3 ③ D313 — dev 전용 보조 요소(정본에 없는 상태에서만 쓴다 · 종전 aiMatchBanner.jsp