/* ══════════════════════════════════════════════════════════════════════ 허브 페이지 배치 (취업 준비·역량강화 / 대상별 서비스 / 기업서비스 공용) ---------------------------------------------------------------------- 이 파일은 배치만 담당한다. 컴포넌트 규격은 components.css 에서만 정의한다. 세 화면 모두 개편 신규이며 운영 대응 URL 이 없다(각 블록에서 기존 화면으로 연결). ══════════════════════════════════════════════════════════════════════ */ /* ⚠️ 세로 여백은 padding-block 롱핸드로 준다 — 이 래퍼는 `.jb-container` 와 «같은 요소»에 붙어(실측 `class="jb-container jb-hubpage"` · bizHome · prepHub · trgtHub 3화면) shorthand 를 쓰면 `padding-inline:20px` 이 0 으로 덮인다. 2026-09-18 dev 실측 — 덮여서 좌우 0px 이었다(05 지시 §4-1). */ .jb-hubpage{ padding-block:var(--jb-sp-8) var(--jb-sp-9); } .jb-hubsec{ margin-top:var(--jb-sp-8); } .jb-hubfoot{ margin-top:var(--jb-sp-8); padding-top:var(--jb-sp-7); border-top:1px solid var(--jb-border); } /* 허브의 아이콘+텍스트 카드는 메인(630×191)보다 작다 */ .jb-hubpage .jb-card-media--sm{ min-height:auto; gap:var(--jb-sp-4); padding:var(--jb-sp-6) var(--jb-sp-5); border:1px solid var(--jb-border); align-items:flex-start; } .jb-hubpage .jb-card-media--sm .jb-card-media__icon{ width:32px; height:32px; color:var(--jb-brand); } .jb-hubpage .jb-card-media--sm .jb-card-media__body{ gap:0; } /* 대상 선택 줄 : 내부 탭 + 외부 이동 링크 */ /* ▼ D300 (2026-09-27) — 탭 줄과 아래 내용 사이 간격이 «0» 이었다(.jb-tgrow bottom 422 = 다음 형제 top 422). 🔴 콜아웃(.jb-notice)에 주면 안 된다 — 콜아웃은 «회원 정보로 탭이 자동 선택됐을 때만» 뜬다. 비로그인·판정 불가·?tab= 지정에서는 hidden 이라 탭 밑줄에 카드가 그대로 붙는다. .jb-tgrow 에 주면 «두 축을 한 줄로» 덮는다. ★ 20px 은 새 값이 아니다 — .jb-tabbar + .jb-catetabs(components.css) · .jb-tabbar + .jb-resulthead(page-list.css)가 쓰는 값과 같다. ⚠️ border-bottom(탭 밑줄)이 있어 margin 은 밑줄 «아래»에 붙는다(의도). */ .jb-tgrow{ display:flex; align-items:center; gap:var(--jb-sp-4); flex-wrap:wrap; margin-bottom:var(--jb-sp-5); border-bottom:1px solid var(--jb-border); } .jb-tgrow .jb-tabbar{ flex:1 1 auto; border-bottom:0; } .jb-tgrow__ext{ display:inline-flex; align-items:center; gap:var(--jb-sp-1); font-family:var(--jb-font-display); font-weight:var(--jb-fw-medium); font-size:var(--jb-fs-base); color:var(--jb-muted); text-decoration:none; } .jb-tgrow__ext:hover{ color:var(--jb-brand); } .jb-tgrow__ext .jb-ico{ width:16px; height:16px; } /* 대상별 영역 카드 3열 */ .jb-tgareas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--jb-gap-grid); } .jb-tgarea__head{ display:flex; align-items:center; gap:var(--jb-sp-3); margin-bottom:var(--jb-sp-4); } .jb-tgarea__ico{ display:flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; border-radius:var(--jb-r-box); background:var(--jb-brand-weak); color:var(--jb-brand); } .jb-tgarea__ico .jb-ico{ width:24px; height:24px; } .jb-tgarea__name{ display:block; 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-tgarea__sub{ display:block; margin-top:2px; font-size:var(--jb-fs-xs); color:var(--jb-muted); } /* 링크 목록 안의 우측 상태(D-day · 접수중) */ .jb-tgarea .jb-linklist__ul a{ display:flex; align-items:center; justify-content:space-between; gap:var(--jb-sp-3); } /* ▼ 2026-09-23 사용자 지시 — 「목록의 높이값도 맞춰달라」. 🔴 원인 = 우측 요소의 높이가 다르다 — `.jb-label` 28px · `.jb-badge` 20px. 그래서 배지만 있는 카드(정책지원)가 라벨 카드(교육 · 신청·접수)보다 줄마다 8px 씩 짧아져 4줄이면 32px 차이가 나고, 그만큼 버튼 줄이 어긋났다. ➡ 라벨 높이(28)를 행의 기준으로 잡는다. 라벨이 없는 줄도 같은 높이가 돼 세 카드의 행이 가로로 맞는다. */ .jb-tgarea .jb-linklist__ul a{ min-height:28px; } /* ▲ 17단계 B-7 (D169) — 여기 있던 라벨/배지 규격을 components.css `.jb-linklist__foot` 뒤로 옮겼다. 페이지 오버라이드로 두면 같은 패턴이 다른 화면에 생길 때마다 규칙이 늘어난다. 실측상 `.jb-linklist__ul` 안에 배지를 쓰는 화면이 대상별 허브뿐이라 시각 결과는 동일하다. */ /* ▼ 2026-09-23 사용자 지시 — 「2줄이 되지 않도록 말줄임」. ⚠️ 제목이 flex 아이템이라 `min-width:0` 이 없으면 최소폭이 내용 크기가 돼 말줄임이 안 걸린다. ⚠️ 문자열을 `` 으로 감싸야 한다 — 벌거벗은 텍스트는 «익명» flex 아이템이라 text-overflow 가 먹지 않는다(목록 항목 마크업을 함께 고쳤다). */ .jb-tgarea .jb-linklist__ul a > span:first-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ▼ 17단계 B-2 — 카드 목록 구분선. 값은 정본 components.css:911~912 그대로다. ⚠️ 셀렉터만 다르다 — 정본은 `.jb-sidebox .jb-linklist__ul > li` 이지만 dev 는 그 자리를 `.jb-stdlinks` 로 좁혀 뒀다(정본 주석 905~911 · 「의도이니 맞추지 말 것」). 그 좁힘은 «허브에 선이 생기지 않게» 하려던 것인데, 17 B-2 에서 사용자가 «허브에도 선을» 요구했다. ➡ 전역을 넓히지 않고 `.jb-tgarea` 로만 열어 다른 화면 회귀를 막는다. */ /* ★ 대상별 허브의 «중장년 2단» 박스도 같은 규격이다(정본은 .jb-sidebox 로 한 번에 걸린다). dev 는 .jb-grid--2 로 좁힌다 — .jb-hubpage 까지 넓히면 취업준비 허브(prepHub)의 목록 6곳에도 구분선이 새로 생긴다. 그 화면은 15 차수에 이미 판정을 받았으므로 건드리지 않는다. */ .jb-tgarea .jb-linklist__ul > li, .jb-hubpage .jb-grid--2 .jb-linklist__ul > li{ padding-bottom:var(--jb-sp-2); border-bottom:1px solid var(--jb-border-soft); } .jb-tgarea .jb-linklist__ul > li:last-child, .jb-hubpage .jb-grid--2 .jb-linklist__ul > li:last-child{ padding-bottom:0; border-bottom:0; } /* ▼ 2026-09-23 사용자 지시 — 「카드 안 버튼을 하단 정렬로 정확히」. 카드를 세로 flex 로 두고 foot 을 `margin-top:auto` 로 밀어 항목 수가 달라도 버튼 줄이 맞게 한다. 종전의 최소 간격(sp-4)은 padding 으로 남긴다. */ /* 🔴 min-width:0 이 «반드시» 있어야 한다(2026-09-23 390px 실측 — 없을 때 문서 가로 넘침 182px). 카드를 flex 로 바꾸면 flex 아이템의 기본 `min-width:auto` 때문에 «긴 제목이 카드 폭을 밀어낸다». 1440 에서는 `.jb-tgareas` 의 `minmax(0,1fr)` 이 막아 주지만, 1024 이하에서 `1fr` 이 되면 그 방어가 사라져 카드가 556px 로 벌어지고 «우측 라벨이 화면 밖으로» 나갔다(라벨 오른쪽 551 > 뷰포트 390). 같은 이유로 안쪽 ul · li 에도 준다 — 하나라도 빠지면 제목의 말줄임이 걸리지 않는다. */ .jb-tgarea{ display:flex; flex-direction:column; min-width:0; } .jb-tgarea .jb-linklist__ul, .jb-tgarea .jb-linklist__ul > li{ min-width:0; } .jb-tgarea__foot{ margin-top:auto; padding-top:var(--jb-sp-4); } /* 외부 서비스 카드 그리드 */ .jb-extgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--jb-gap-grid); } /* ▲ 17단계 — 여기 있던 `.jb-extcard*` 사본을 걷었다. 규격은 components.css:1093~1104 가 정본이다. 🔴 이 파일은 components.css «뒤»에 실려 같은 특정도면 이긴다 — 그래서 사본이 정본을 덮고 있었다. 실제로 `__top` 에 `justify-content:space-between` 이 빠져 있어 기관명 배지가 이름 옆에 붙어 있었다. */ @media (max-width:1024px){ .jb-tgareas{ grid-template-columns:1fr; } .jb-extgrid{ grid-template-columns:1fr; } } @media (max-width:768px){ .jb-hubpage{ padding-block:var(--jb-sp-6) var(--jb-sp-7); } .jb-hubsec, .jb-hubfoot{ margin-top:var(--jb-sp-6); } .jb-hubfoot{ padding-top:var(--jb-sp-5); } } /* R39 · 단계 상태 문구 안의 「결과 보기」 링크는 상태 문구 크기를 따른다(링크 컴포넌트 기본 크기가 더 커서 튀었다 · 로컬 확인) */ .jb-step__state .jb-link{ font-size:inherit; } /* ══ UI2026 16단계 · 기업서비스 홈 (설계 8.1.0 #4 · #7 · 결정 D27 · D34) ══ 🔴 2026-09-26 — `.jb-policycard--poster` 계열 7줄을 «제거»했다. 정본에 없는 «내가 여기서만 만든 변형»이었고, 정본은 별도 부품 `.jb-poster` 를 쓴다 (components.css:1081~ · 이미 empmEduList · entSprtList · jobSprtList · prepHub 4곳에서 쓰고 있었다). bizHome.jsp 를 `jb-poster` 로 바꾸면서 쓰는 곳이 0건이 되어 지웠다(D194 죽은 .jb-promo 와 같은 건). */ .jb-bizfoot__contact{ margin-top:var(--jb-sp-8); padding:var(--jb-sp-5); border-radius:var(--jb-r-box); background:var(--jb-bg-subtle); text-align:center; } .jb-bizfoot__contact p{ margin:0; font-size:var(--jb-fs-sm); color:var(--jb-muted); } .jb-bizfoot__contact strong{ font-weight:var(--jb-fw-bold); color:var(--jb-ink); } /* ▲ 17단계 B — 장애인 「화면 보기」 도구의 옛 규칙(`__label`·`__btns`·`__state` · `html.jb-view--*`)을 걷었다. 정본 마크업은 `__title`·`__actions`·`__status` 이고 토글은 body 의 `is-text-large`·`is-high-contrast` 다. 규격은 components.css:1109~1120 · base.css:87~95 가 이미 가지고 있다 — 쓰는 화면이 없어진 규칙을 남기지 않는다. */ /* ══════════════════════════════════════════════════════════════════════ 02 기업서비스 — 상단 배너 2종 (D304 · 2026-09-27 사용자 지시) ---------------------------------------------------------------------- 원천 = Figma 「유지보수 디자인」 `UIUX 개편_디자인` 캔버스 ① 322:2 「bg」 1280x252 ② 322:193 「bg」 1280x152 지시 「.jb-subhero 를 «첫번째 배너»로 교체하고 그 아래에 «두번째 배너»를 배치. 반응형은 알아서 구성해줘」 🔴 실측으로 옮긴 값 — 눈대중이 아니다(Figma 좌표 + 배너 PNG 픽셀) radius 14px ➡️ `--jb-r-box`(12px) 로 «번역»한다. 2px 차이는 육안 식별 밖이고 토큰 체계를 깨지 않는 편이 낫다(디자인시스템 우선) ① 텍스트 x=55 y=56 w=637 h=131 → 제목 28px 2줄 + 본문 16px ① 일러스트 x=853 y=46 374x206 → 우측 여백 53 · 하단에 «붙는다»(46+206=252) ② 캐릭터 x=46 y=20 145x108 → 하단 여백 24 ② 텍스트 x=198 y=37(제목 h44) / y=87(본문 h24) ② 칩 h=35.3 · radius «8px» = `--jb-r-btn` 과 정확히 일치 · 글자 14px ② 점 3개 x=1148·1158·1168 y=99 각 5px 색(배너 PNG 픽셀 최빈값) ① 배경 #76E89D ~ #9BEFB7 (좌하가 밝고 우측이 진하다 · 원본은 타원 3장이 겹친 것) ① 글자 #000000 (제목·본문 모두) ② 배경 #F5F9FF · 스카이라인 #E7F3FE ② 제목 #2D2D2D + 강조 #003282 · 본문 #1F1F1F · 칩 배경 #FFFFFF 글자 #727272 ══════════════════════════════════════════════════════════════════════ */ /* 🔴 D306 — 배너끼리 · 배너와 다음 섹션 사이에 «간격이 없었다»(사용자 지적). 원인 = 섹션 간격은 `.jb-hubsec{ margin-top:var(--jb-sp-8) }` 이 만드는데 배너는 `.jb-bizbnr` 이라 그 규칙에 «걸리지 않았다». 같은 리듬(60px)을 직접 준다. */ /* 🔁 D308 — 배너2 가 「기업 주요 서비스」 «아래»로 내려가면서 `.jb-hubsec + .jb-bizbnr` 조합이 생겼다. 네 방향을 다 적어 둔다 — 순서가 또 바뀌어도 간격이 «비지 않게». */ .jb-bizbnr + .jb-bizbnr, .jb-bizbnr + .jb-hubsec, .jb-hubsec + .jb-bizbnr{ margin-top:var(--jb-sp-8); } .jb-bizbnr{ /* 두 배너의 «공통 껍데기» — 폭은 컨테이너를 따르고 높이는 비율로 잡는다. 고정 높이를 주지 않는다: 글자가 줄어들거나 늘어나도 배너가 깨지지 않게 한다. */ position:relative; overflow:hidden; border-radius:var(--jb-r-box); display:flex; align-items:center; } /* ══ ① 기업서비스 히어로 ══════════════════════════════════════════ */ /* 🔴 배경은 «SVG 파일»이다 — CSS gradient 로는 못 만든다(D306 정정). Figma 는 「원 모양으로 자른 «안쪽»에 linear-gradient」를 세 겹 깐 것이라 radial-gradient 로 근사하면 «곡선 패턴이 사라진다»(1차에 그렇게 냈다가 지적받았다). ⚪ 파일은 1.7KB 다. 도형 4개 + 그라데이션 3개뿐이라 이미지보다 가볍다. ⚪ xMaxYMid slice — 폭이 줄어도 «오른쪽(일러스트 쪽) 곡선»이 살아 있게 오른쪽을 기준으로 자른다. */ .jb-bizhero{ --bizhero-pad-x:55px; min-height:252px; padding:var(--jb-sp-6) var(--bizhero-pad-x); background:#77E89D url("/resource/new_2026/img/illust/biz-hero-bg.svg") right center / cover no-repeat; } .jb-bizhero__body{ position:relative; z-index:1; max-width:637px; } /* 🔴 D306 — 제목을 «키운다»(사용자 지적 「폰트 사이즈만 키워줘」). Figma 실측 = 텍스트 프레임 2줄 «94px» · 배너 PNG 에서 잰 줄 간격 «47px» · 잉크 높이 35px. 36px x 1.3 = 46.8 → 2줄 93.6 ≈ 94 ✅ (종전 28px x 1.45 = 2줄 81px 로 «작았다») ⚠️ 굵기는 700 이다 — 정본 퍼블이 쓰는 paperlogy-embed.css 에 «400~700 만» 들어 있다 (dev 의 paperlogy.css 는 800 까지 있다). 800 을 쓰면 정본에서만 합성 굵게가 되어 둘이 달라진다. */ .jb-bizhero__title{ margin:0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-display); line-height:1.3; color:#000; letter-spacing:-0.01em; } .jb-bizhero__desc{ margin:var(--jb-sp-5) 0 0; font-family:var(--jb-font-body); font-size:var(--jb-fs-base); line-height:1.6; color:#000; } /* 일러스트 — 배너 «하단에 붙는다»(Figma 46+206=252). 장식이므로 aria-hidden 을 마크업에 둔다 */ .jb-bizhero__illust{ position:absolute; right:53px; bottom:0; width:374px; height:auto; pointer-events:none; user-select:none; } /* ══ ② 기업회원 서비스 예고 ═══════════════════════════════════════ */ /* 🔴 상 20 / 하 24 — 캐릭터 아래 여백(Figma 24px)을 «패딩으로» 만든다. 캐릭터에 margin-bottom 을 주면 패딩 위에 «더해져» 배너가 172px 이 된다(1차 실측에서 그랬다). */ .jb-bizsoon{ --bizsoon-pad-l:46px; min-height:152px; padding:var(--jb-sp-5) var(--jb-sp-6) 24px var(--bizsoon-pad-l); gap:var(--jb-sp-5); background:#F5F9FF; } /* 스카이라인 — 하단 전체 폭. 내용보다 «뒤»에 둔다 */ .jb-bizsoon__skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; pointer-events:none; user-select:none; } .jb-bizsoon__character{ position:relative; z-index:1; flex:none; width:145px; height:auto; align-self:flex-end; } .jb-bizsoon__body{ position:relative; z-index:1; flex:1 1 auto; min-width:0; } .jb-bizsoon__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:#2D2D2D; } .jb-bizsoon__title em{ font-style:normal; color:#003282; } .jb-bizsoon__desc{ margin:var(--jb-sp-3) 0 0; font-family:var(--jb-font-body); font-size:var(--jb-fs-base); line-height:1.5; color:#1F1F1F; } /* 우측 태그 — 「무엇이 오는가」를 알리는 «읽기 전용» 표시다. 링크·버튼이 아니다 */ .jb-bizsoon__tags{ position:relative; z-index:1; flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--jb-sp-2); max-width:460px; } .jb-bizsoon__tag{ display:inline-flex; align-items:center; height:35px; padding:0 15px; border-radius:var(--jb-r-btn); background:#fff; font-family:var(--jb-font-body); font-size:var(--jb-fs-sm); line-height:1; color:#727272; white-space:nowrap; } .jb-bizsoon__more{ display:inline-flex; align-items:center; gap:5px; padding:0 4px; } .jb-bizsoon__more i{ width:5px; height:5px; border-radius:50%; background:#727272; } /* ══ [반응형] ═════════════════════════════════════════════════════ 🔴 원칙 — «텍스트가 먼저»다. 일러스트·장식은 자리를 양보한다. 좁아질수록 ㉠여백 ㉡일러스트 ㉢배치 순으로 줄인다. 글자 크기는 마지막에 건드린다. */ @media (max-width:1024px){ .jb-bizhero{ --bizhero-pad-x:var(--jb-sp-6); } .jb-bizhero__body{ max-width:calc(100% - 300px); } .jb-bizhero__illust{ right:var(--jb-sp-5); width:280px; } .jb-bizsoon{ --bizsoon-pad-l:var(--jb-sp-5); flex-wrap:wrap; } /* 태그가 좁아지면 «텍스트 아래 한 줄»로 내린다 — 줄바꿈 지점을 만들어 준다 */ .jb-bizsoon__body{ flex:1 1 320px; } .jb-bizsoon__tags{ flex:1 1 100%; max-width:none; } } @media (max-width:768px){ /* ① 세로 배치 — 일러스트를 아래로 내리고 가운데 정렬한다(숨기지 않는다) */ .jb-bizhero{ flex-direction:column; align-items:stretch; padding:var(--jb-sp-6) var(--jb-sp-5) 0; min-height:0; } .jb-bizhero__body{ max-width:none; } .jb-bizhero__title{ font-size:var(--jb-fs-h2); } .jb-bizhero__title br{ display:none; } /* 폭이 좁으면 «자연 줄바꿈»에 맡긴다 */ .jb-bizhero__illust{ position:static; width:min(280px,70%); margin:var(--jb-sp-5) auto 0; display:block; } /* ② 🔴 세로로 «쌓지 않는다» — 캐릭터·텍스트는 «가로로» 두고 태그만 아래로 내린다. 1차 시도에서 flex-direction:column 을 줬더니 768 에서 배너가 «558px» 이 됐다(세 덩이가 세로로 쌓였다). ≤1024 의 wrap 규칙만으로 충분하다 — 캐릭터(110) + 본문(최소 240) 이 768 안에 들어간다. */ .jb-bizsoon{ padding:var(--jb-sp-5); min-height:0; gap:var(--jb-sp-4); } .jb-bizsoon__character{ width:110px; } .jb-bizsoon__body{ flex:1 1 240px; } .jb-bizsoon__title{ font-size:var(--jb-fs-h4); } /* 태그는 한 줄에 더 많이 들어가도록 여기서부터 한 단계 줄인다(480 을 기다리지 않는다) */ .jb-bizsoon__tag{ height:30px; padding:0 12px; font-size:var(--jb-fs-xs); } .jb-bizsoon__tags{ max-width:none; } } @media (max-width:480px){ /* 태그가 5개 × 2행이면 480 이하에서 너무 길어진다 — 스크롤 대신 «줄바꿈»을 유지하고 글자만 한 단계 줄인다. 항목을 «숨기지 않는다»(무엇이 오는지가 이 배너의 내용이다) */ .jb-bizsoon__tag{ height:28px; padding:0 10px; } .jb-bizsoon__character{ width:92px; } .jb-bizhero__desc{ font-size:var(--jb-fs-sm); } }