/* ══════════════════════════════════════════════════════════════════════
잡아바 UIUX 개편 · 메인 페이지 v2 (2026-09-04)
----------------------------------------------------------------------
기준 시안 : Figma `gBhKyvvN0bIua4pAcmWpjR` 283:72 (main-guest) · 283:627 (main-member)
구성 : 안내바 · 헤더 · 히어로(슬라이드) · 우측 패널(로그인/내 현황) · AI 매칭(로그인 후)
· 퀵 · 섹션 타이틀 · 여정(탭) · 콘텐츠 카드 · 맞춤 추천 · 유관서비스 · 푸터 · 리빌 · 반응형
원칙 : 규격은 components.css 가 정본. 여기서는 배치·간격·페이지 고유 형태만 정의한다.
값은 토큰을 쓰고, 시안 고유 1회성 값만 '시안 실측' 주석으로 남긴다.
══════════════════════════════════════════════════════════════════════ */
/* ── 안내바 (프로토타입 전용 · 실서비스 제거) ──────────────────────── */
.jb-protobar{ display:flex; align-items:center; gap:14px; padding:8px 20px; background:var(--jb-ink-strong); color:#fff; font-size:12px; }
.jb-protobar__tag{ padding:2px 8px; border-radius:var(--jb-r-sm); background:var(--jb-brand); font-weight:var(--jb-fw-bold); }
.jb-protobar__links{ display:flex; gap:12px; margin-left:auto; }
.jb-protobar a{ color:#fff; text-decoration:none; opacity:.8; }
.jb-protobar a:hover{ opacity:1; }
/* ── 추출 아이콘 ![]()
유틸 (원본 화살표는 ↑ 방향) ───────────────────
Figma 내보내기 SVG 는 비율이 제각각이고 preserveAspectRatio="none" 이라
그대로 두면 아이콘 슬롯 크기에 맞춰 늘어난다.
contain + center 로 비율을 지키면서 슬롯 중앙에 놓는다(신규 아이콘 공통 안전장치). */
.jb-i{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.jb-i--r90 { transform:rotate(90deg); } /* → */
.jb-i--r270{ transform:rotate(-90deg); } /* ← */
/* ══ Header ══ 데스크톱 129 = 유틸 45+선 · GNB 82+선 / 1260 이하 모바일 68 ══
운영(default_new2025_top.jsp) 상속 : .topMenu = 유틸, nav.newGnb = GNB,
1260px 이하에서 둘 다 display:none → m_menu 햄버거 + .h_mobile 드로어 ══════ */
.jb-header{ position:relative; background:var(--jb-surface); border-bottom:1px solid var(--jb-border); }
.jb-header__util{ border-bottom:1px solid var(--jb-border); }
.jb-header__util .jb-container{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:45px; }
/* 유틸 좌측 pill — 운영 .topMenu ul.left 실측 :
gap 9 · padding 5/40/5/17 · r pill · 14 Medium · ls -1 · 우측 24px 화살표 아이콘 */
.jb-utilbtns{ display:flex; align-items:center; gap:9px; margin:0; padding:0; list-style:none; }
.jb-utilbtn{ display:inline-block; padding:5px 40px 5px 17px; border-radius:var(--jb-r-pill);
font-weight:var(--jb-fw-medium); font-size:var(--jb-fs-sm); line-height:var(--jb-lh-tight); letter-spacing:-1px;
white-space:nowrap; text-decoration:none;
background-image:url("/resource/new_2026/img/icon/ui/circle-arrow.png"); background-repeat:no-repeat; background-position:calc(100% - 5px) 50%; }
.jb-utilbtn--lms { background-color:var(--jb-util-lms-bg); color:var(--jb-util-lms-ink); }
.jb-utilbtn--apply{ background-color:var(--jb-util-apply-bg); color:var(--jb-util-apply-ink); }
.jb-utilbtn--map { background-color:var(--jb-util-map-bg); color:var(--jb-util-map-ink); }
.jb-utilbtn--biz { background-color:var(--jb-util-biz-bg); color:var(--jb-util-biz-ink); } /* 전용 색상 미정 — 러닝센터 톤 임시 */
/* 유틸 우측 링크 — 운영 .topMenu ul.right 실측 : gap 5 · li p 0 5 · li::after "|" · a 13 Medium ls -1 */
.jb-utillinks{ display:flex; align-items:center; gap:5px; margin:0; padding:0; list-style:none; }
.jb-utillinks li{ display:flex; align-items:center; padding:0 5px; font-size:var(--jb-fs-xs); color:var(--jb-border); }
.jb-utillinks li:not(:last-child)::after{ content:"|"; margin-left:10px; color:var(--jb-border); font-weight:var(--jb-fw-regular); }
/* 운영 실측은 13/500 #585858 이지만 가독성이 떨어져 #000 SemiBold 로 올린다(2026-09-04 지시) */
.jb-utillinks a{ font-weight:var(--jb-fw-semibold); font-size:13px; line-height:var(--jb-lh-tight); letter-spacing:-1px;
color:var(--jb-util-link); text-decoration:none; }
.jb-utillinks a:hover{ color:var(--jb-brand); }
.jb-utillinks li.jb-utillinks__me{ font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-base); color:var(--jb-util-link); } /* 2026-09-30 D336 — #000 직접 지정 → 토큰(같은 값 · 명도 대비 모드에서 흰색으로 뒤집히게) */ /* li 규칙(구분자 색)보다 특이도를 올린다 */
.jb-header__main{ display:flex; align-items:center; gap:40px; min-height:82px; }
.jb-logo{ display:flex; align-items:center; flex:none; width:217px; }
.jb-logo img{ display:block; width:191px; height:53px; }
/* GNB — 상위 6 × 2Depth. 유닛 hover/focus 시 드롭다운(프로토타입 .gnb__unit 동작 이식) */
.jb-gnb{ display:flex; align-items:center; gap:40px; margin-left:auto; }
.jb-gnb__unit{ position:relative; display:flex; align-items:center; }
.jb-gnb__item{ display:block; padding:29px 0; 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); text-decoration:none; white-space:nowrap; }
/* ▼ 17단계 C-1 (D166) — 현재 페이지의 대메뉴. 활성 모양은 «마우스 오버와 동일»(사용자 지정) */
.jb-gnb__item:hover,
.jb-gnb__unit:focus-within .jb-gnb__item,
.jb-gnb__item[aria-current="page"]{ color:var(--jb-brand); }
.jb-gnb__sub{ position:absolute; top:100%; left:50%; z-index:30; transform:translateX(-50%);
display:flex; flex-direction:column; min-width:160px; padding:12px 0; border-radius:0 0 var(--jb-r-box) var(--jb-r-box);
background:var(--jb-surface); box-shadow:var(--jb-shadow-hover);
opacity:0; visibility:hidden; transition:opacity var(--jb-dur-fast) var(--jb-ease), visibility var(--jb-dur-fast) var(--jb-ease); }
.jb-gnb__unit:hover .jb-gnb__sub, .jb-gnb__unit:focus-within .jb-gnb__sub{ opacity:1; visibility:visible; }
.jb-gnb__sub-item{ padding:9px 20px; font-size:var(--jb-fs-base); line-height:var(--jb-lh-tight); letter-spacing:-.3px;
color:var(--jb-muted); text-decoration:none; white-space:nowrap; }
.jb-gnb__sub-item:hover{ background:var(--jb-bg-subtle); color:var(--jb-brand); }
/* ── D76 · 「동영상 강의」 강조 항목 ──────────────────────────────────────
운영은 이 링크를 2뎁스 텍스트 링크 «와» full-width 메가메뉴 이미지 배너
(`div.depth2.gnb_top_banner` · update0911) 둘로 갖고 있었다.
확정 디자인의 2뎁스는 min-width:160px 세로 드롭다운이라 이미지 자리가 없다
→ 강조를 이미지에서 「면 + 아이콘」으로 옮긴다. 링크·URL·기능은 그대로.
🔴 D324 B14(2026-09-29 · UI2026-IT2) — 강조를 «활성 표시와 다른 모양»으로. 종전 = 연한 면 + «브랜드 글자 + 세미볼드» 였는데
글자 쪽이 «현재 메뉴» 표시(브랜드 글자 + 세미볼드)와 같아 늘 활성으로 읽혔다(통합테스트 C-03 ②).
➡️ 글자색 · 굵기 = 기본 하위 메뉴(--jb-muted · 400) · 강조 = 연한 면 + 브랜드색 아이콘 둘만(정본 page-main.css 와 같다).
활성 = 글자색, 강조 = 면·아이콘. PC GNB · 모바일 드로어 공통. 글자색은 아래 §링크색 복원의 기본 하위 메뉴 규칙이 준다. */
.jb-gnb__sub-item--feature{ display:flex; align-items:center; gap:var(--jb-sp-2);
margin:var(--jb-sp-2) 12px 0; padding:10px 12px; border-radius:var(--jb-r-btn);
background:var(--jb-brand-weak); }
.jb-gnb__sub-item--feature:hover{ background:var(--jb-brand-weak); color:var(--jb-brand-hover); }
.jb-gnb__sub-item--feature .jb-ico{ width:14px; height:14px; margin-left:auto; color:var(--jb-brand); }
.jb-search-btn{ flex:none; width:48px; height:48px; padding:12px; border:0; border-radius:50%; background:var(--jb-brand); cursor:pointer; }
/* 햄버거 — 데스크톱 숨김 / 1260 이하 노출 (시안 292:391 = 46×46 원형 테두리) */
.jb-menu-btn{ display:none; flex:none; width:46px; height:46px; padding:13px 12px; box-sizing:border-box;
flex-direction:column; justify-content:space-between; border:1px solid var(--jb-border); border-radius:50%;
background:var(--jb-surface); cursor:pointer; }
.jb-menu-btn span{ display:block; width:100%; height:2px; border-radius:1px; background:var(--jb-inverse); }
/* 전체메뉴 드로어 — main.js 가 GNB 를 복제해 생성.
운영 이관 시에는 복제가 아니라 .h_mobile 별도 마크업으로 전개한다. */
.jb-drawer[hidden]{ display:none; }
/* ▼ 2026-09-17 20단계(D68) — 레이어를 D66 토큰 체계에 맞춘다.
정본의 z-index:100 은 «하단 고정 액션 바»(--jb-z-mobilebar 300) 아래라, 04 공공채용 목록처럼
모바일 바가 있는 화면에서 드로어 위로 바가 뚫고 올라온다.
순서는 [본문] < 모바일바 300 < «드로어» < 딤 10000 < 시트·검색모달 10010 이어야 한다.
⚠️ tokens.css 는 이 차수의 소유가 아니다 — `--jb-z-drawer` 토큰 신설을 보고했고,
토큰이 들어오면 아래 fallback 없이 그대로 동작한다. */
.jb-drawer{ position:fixed; inset:0; z-index:var(--jb-z-drawer); }
.jb-drawer__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.jb-drawer__panel{ position:absolute; top:0; right:0; display:flex; flex-direction:column; width:min(320px,86vw); height:100%;
background:var(--jb-surface); box-shadow:-8px 0 24px rgba(0,0,0,.12); overflow-y:auto; }
.jb-drawer__head{ display:flex; align-items:center; justify-content:space-between; flex:none; min-height:68px; padding:0 20px;
border-bottom:1px solid var(--jb-border); }
.jb-drawer__logo{ display:flex; align-items:center; }
.jb-drawer__logo img{ display:block; width:120px; height:34px; } /* 모바일 헤더 로고와 동일 규격 */
.jb-drawer__close{ position:relative; width:36px; height:36px; border:0; background:none; cursor:pointer; }
.jb-drawer__close::before, .jb-drawer__close::after{ content:""; position:absolute; left:9px; top:17px; width:18px; height:2px; background:var(--jb-inverse); }
.jb-drawer__close::before{ transform:rotate(45deg); } .jb-drawer__close::after{ transform:rotate(-45deg); }
/* 타이틀 아래 : 로그인 링크 + 통합검색 (운영 .h_mobile_login_area + .h_mobile_search_area) */
.jb-drawer__account{ flex:none; padding:14px 20px 16px; border-bottom:1px solid var(--jb-border-weak); }
.jb-drawer__account .jb-utillinks{ justify-content:center; }
.jb-drawer__account .jb-utillinks a{ font-size:var(--jb-fs-sm); }
/* 통합검색 — .jb-drawer__account 안에 위치(좌우 여백은 부모가 담당) */
.jb-drawer__search{ padding-top:17px; }
.jb-drawer__search form{ position:relative; }
.jb-drawer__search input{ width:100%; height:42px; padding:0 52px 0 20px; box-sizing:border-box;
border:0; border-radius:var(--jb-r-pill); background:var(--jb-bg-subtle);
font-family:inherit; font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-drawer__search input::placeholder{ color:var(--jb-disabled); }
.jb-drawer__search input:focus{ outline:2px solid var(--jb-brand); outline-offset:-2px; }
.jb-drawer__search button{ position:absolute; top:50%; right:10px; transform:translateY(-50%);
width:32px; height:32px; padding:4px; border:0; background:none; cursor:pointer; }
/* search.svg 는 stroke:white 라 밝은 배경에서는 반전이 필요하다 */
.jb-drawer__search button img{ filter:brightness(0) invert(.42); }
/* 메뉴 아코디언 */
.jb-drawer__body{ flex:none; padding:0; }
.jb-drawer__body .jb-gnb{ display:block; margin:0; }
.jb-drawer__body .jb-gnb__unit{ display:block; border-bottom:1px solid var(--jb-border-weak); }
.jb-drawer__title{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.jb-drawer__body .jb-gnb__item{ flex:1 1 auto; padding:16px 8px 16px 20px; font-size:var(--jb-fs-base); }
.jb-drawer__body .jb-gnb__unit:focus-within .jb-gnb__item{ color:var(--jb-ink); }
/* 현재 위치 : 대메뉴 + 해당 하위 항목 */
.jb-drawer__body .jb-gnb__unit.is-current > .jb-drawer__title .jb-gnb__item,
.jb-drawer__body .jb-gnb__item[aria-current="page"]{ color:var(--jb-brand); }
.jb-drawer__body .jb-gnb__sub-item[aria-current="page"]{ color:var(--jb-brand); font-weight:var(--jb-fw-semibold); }
.jb-drawer__arrow{ position:relative; flex:none; width:48px; height:52px; border:0; background:none; cursor:pointer; }
.jb-drawer__arrow::before{ content:""; position:absolute; top:22px; left:18px; width:9px; height:9px;
border-right:2px solid var(--jb-muted); border-bottom:2px solid var(--jb-muted); transform:rotate(45deg);
transition:transform var(--jb-dur-fast) var(--jb-ease); }
.jb-drawer__arrow[aria-expanded="true"]::before{ transform:rotate(-135deg); top:26px; }
.jb-drawer__body .jb-gnb__sub{ position:static; transform:none; opacity:1; visibility:visible;
min-width:0; padding:4px 0 12px; border-radius:0; background:var(--jb-bg-subtle); box-shadow:none; }
.jb-drawer__body .jb-gnb__sub[hidden]{ display:none; }
.jb-drawer__body .jb-gnb__sub-item{ padding:9px 32px; white-space:normal; }
/* D76 — 드로어는 2뎁스를 32px 들여쓴다. 강조 항목은 «면»이라 들여쓰기를 padding 이 아니라
margin 으로 줘야 면이 들여써진다. (0,3,0) 이라 위 (0,2,0) 을 이긴다 */
.jb-drawer__body .jb-gnb__sub-item--feature{ margin:var(--jb-sp-2) 20px 0 32px; padding:10px 12px; }
/* 메뉴 바로 아래 : 관련 서비스 pill (운영 .h_mobile_bottom_area — 가운데 정렬·줄바꿈) */
.jb-drawer__quick{ flex:none; padding:20px; }
.jb-drawer__quick .jb-utilbtns{ justify-content:center; flex-wrap:wrap; gap:8px 10px; }
/* ══ 1. Hero ══ 배너박스 956(투명 · p0) + 우측 패널 304 · gap 20 ═══ */
.jb-hero{ padding:40px 0 0; }
.jb-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) 304px; gap:20px; align-items:stretch; }
/* 🔴 2026-09-28 D322 (사용자) — 배너박스 «회색 면(background:var(--jb-bg-subtle))»과 «padding:20px» 제거.
메인 배너·서브 배너가 흰 페이지 위에 바로 놓인다(1440 : 메인 638×460 · 서브 298×222 ×2). min-height 460 은 우측 패널과 높이를 맞추려 유지 */
.jb-bannerbox{ display:grid; grid-template-columns:minmax(0,1fr) 298px; gap:20px; min-height:460px;
border-radius:var(--jb-r-card); }
/* 메인 배너 638×460 (관리자 등록 이미지 1장) · 슬라이드는 absolute, 컨트롤은 좌하단
※ overflow:visible — 시안대로 일러스트가 배너 아래(흰 페이지 위)로 돌출한다(D251) */
.jb-hero__main{ position:relative; display:flex; flex-direction:column; min-height:420px; overflow:visible;
border-radius:var(--jb-r-card); color:#fff; }
/* 🔴 2026-09-27 D246 — `background:var(--jb-hero-bg)` 를 «제거»했다(사용자 지시).
관리자 등록 배너 이미지가 면을 채우므로 밑에 깔린 색이 필요 없다.
★ `transition:background …` 도 «함께» 지웠다 — 그 선언은 오직 background 만 애니메이션하고,
히어로 배경을 바꾸는 JS 가 없다(정본·dev grep 0건). 지운 속성에 딸린 죽은 선언이다.
★ 남긴 것 = border-radius · color:#fff · overflow:visible · min-height:420px.
::before/::after 의 모서리 보정은 배너 뒤 면 색(2026-09-28 D322 부터 --jb-bg)을 쓰므로 이 변경과 «무관»하다.
★ --jb-hero-bg 토큰 «자체»는 지우지 않았다 — 화면 사용처는 0 이 되지만
디자인시스템 색 견본에 남아 있고 정리는 96 이관목록 몫이다. */
.jb-hero__main .jb-slide{ padding:0; }
/* 배너 이미지 — 원본 캔버스 2392×1724 = 카드 2392×1680 + 하단 «돌출» 44 (@4x → 598×420 + 11).
🔴 2026-09-27 D251 — 돌출 연출을 «유지»한다(사용자 확정 「관리자 부담은 고려하지 말고 돌출형을 유지해줘」).
⚠️ D247 에서 한 차례 «폐기»했다가 되돌린 것이다. 폐기 근거가 틀렸다 —
「실데이터에 돌출형이 없다」는 실측이 390 에뮬레이션 상태여서 «모바일 이미지만» 잰 것이었다.
PC 파일을 내려받아 재니 4장 중 2장이 돌출형(카드 1679 + 돌출 45)이고, 그게 사용자가 만드는 규격이다.
★ 돌출은 «PC 에만» 준다. 모바일 배너는 1080×720(= 박스 비율 1.5 · 돌출 0)이라
돌출을 주면 이미지가 박스 밖으로 나가고 회색 코너 보정이 «이미지 위»에 얹힌다 —
그게 사용자가 처음 본 「모바일 겹침」이었다. @media 쪽에서 «명시적으로» 끈다.
⚠️ PC 슬롯이 598 이라 cover 로 좌우 각 16px 크롭된다. 크롭 없이 쓰려면 2392×1680(+44)로 재내보내기
(관리자 배너 규격 문제 · 91 대장 #40). CSS 에서 고칠 것이 아니다. */
.jb-hero__img{ flex:0 0 auto; display:block; width:100%; height:calc(100% + var(--jb-hero-bleed)); object-fit:cover; object-position:center top;
border-radius:var(--jb-r-card); }
/* R31 · 모바일 이미지용 래퍼는 박스를 만들지 않는다 — 위 height:%·flex 계산이 슬라이드 기준으로 유지된다 */
.jb-hero__main picture{ display:contents; }
/* 돌출 때문에 «각져 보이는» 박스 하단 모서리를 «배너 뒤 면의 색»으로 덮어 다시 둥글게 만든다.
🔴 돌출이 «있을 때만» 필요하다 — ≤1200 에서는 @media 에서 content:none 으로 끈다(2026-09-28 D322 · 종전 ≤900).
🔴 2026-09-28 D322 — 덮는 색 = 배너박스 회색(--jb-bg-subtle) → «페이지 흰색(--jb-bg)». 배너박스 회색 면을 없앴으므로(위)
회색으로 두면 모서리 바깥에 옅은 회색 쐐기(20×20 안 약 85px)가 남는다(사용자 지적). 배너 뒤 면이 바뀌면 이 색도 같이 바꾼다.
⚠️ 덮개를 «끄지는» 않는다 — 끄면 좌우 크롭된 카드 하단 호가 각지게 깎인다. */
.jb-hero__main::before, .jb-hero__main::after{ content:""; position:absolute; bottom:0; z-index:1; pointer-events:none;
width:var(--jb-r-card); height:var(--jb-r-card); }
.jb-hero__main::before{ left:0; background:radial-gradient(circle at 100% 0, transparent calc(var(--jb-r-card) - 0.5px), var(--jb-bg) var(--jb-r-card)); }
.jb-hero__main::after { right:0; background:radial-gradient(circle at 0 0, transparent calc(var(--jb-r-card) - 0.5px), var(--jb-bg) var(--jb-r-card)); }
/* ↓ 텍스트형 배너 스타일 — 이미지 배너 전환으로 현재 미사용 (모바일/대체 텍스트용 보존) */
.jb-hero__title { display:block; margin:6px 0 16px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-hero); line-height:var(--jb-lh-tight); }
.jb-hero__pill { align-self:flex-start; margin-top:24px; padding:8px 20px; border-radius:var(--jb-r-pill); background:var(--jb-on-hero-20);
font-size:var(--jb-fs-sm); font-weight:var(--jb-fw-medium); line-height:var(--jb-lh-tight); }
/* 슬라이드 (main.js · [data-slider]) */
.jb-slides{ position:relative; flex:1 1 auto; min-height:0; }
.jb-slide{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; color:inherit; text-decoration:none; }
.jb-slide[hidden]{ display:none !important; }
.jb-slide.is-active{ animation:jb-fade-in .24s ease-out; }
@keyframes jb-fade-in{ from{ opacity:0; } to{ opacity:1; } }
.jb-hero__main .jb-slides{ position:static; } /* 히어로는 배너 전체가 슬라이드 영역 */
/* 슬라이드 컨트롤 — 히어로(원형 채움) */
.jb-slider{ position:absolute; left:50px; bottom:40px; z-index:1; display:flex; align-items:center; gap:10px; color:#fff; }
.jb-slider button{ display:grid; place-items:center; width:var(--jb-ctrl); height:var(--jb-ctrl); padding:3px; box-sizing:border-box;
border:0; border-radius:50%; background:var(--jb-on-hero-20); color:#fff; cursor:pointer; }
.jb-slider button:hover{ background:var(--jb-on-hero-32); }
.jb-slider button img{ filter:brightness(0) invert(1); }
.jb-slider__count{ min-width:26px; text-align:center; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-xs); line-height:16px; }
.jb-slider__pause{ position:relative; }
.jb-slider__pause::before, .jb-slider__pause::after{ content:""; position:absolute; top:8px; width:2px; height:10px; background:currentColor; }
.jb-slider__pause::before{ left:9px; } .jb-slider__pause::after{ right:9px; }
.jb-slider__pause i{ display:none; }
.jb-slider__pause.is-paused::before, .jb-slider__pause.is-paused::after{ display:none; }
.jb-slider__pause.is-paused i{ display:block; width:0; height:0; margin-left:2px; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent currentColor; }
/* 슬라이드 컨트롤 — 서브/콘텐츠(아이콘 전용 · #B3B3B3 · 현재 번호만 #333) */
.jb-slider--plain{ left:auto; right:20px; bottom:20px; color:var(--jb-ctrl-muted); }
.jb-slider--plain button{ width:20px; height:20px; padding:0; background:none; color:var(--jb-ctrl-muted); }
.jb-slider--plain button:hover{ background:none; }
.jb-slider--plain button img{ filter:none; opacity:.55; }
.jb-slider--plain button:hover img{ opacity:1; }
.jb-slider--plain .jb-slider__count b{ color:var(--jb-inverse); }
.jb-slider--plain .jb-slider__pause::before, .jb-slider--plain .jb-slider__pause::after{ top:5px; width:1.5px; }
.jb-slider--plain .jb-slider__pause::before{ left:6px; } .jb-slider--plain .jb-slider__pause::after{ right:6px; }
.jb-slider--plain .jb-slider__pause.is-paused i{ border-width:4px 0 4px 7px; }
/* 서브 배너 298×202 ×2 (gap 16 · 흰 면 · 테두리 없음 · p30) */
.jb-hero__subs{ display:grid; grid-template-rows:1fr 1fr; gap:16px; }
/* ▼ 2026-09-17 20단계(D68) — «.jb-hero__subs 안»으로 한정한다. 이름 충돌 회피이지 모양 변경이 아니다.
헤더가 전 화면 공통이 되면서 이 파일을 헤더와 함께 전역 로드하게 됐는데,
`.jb-promo` · `.jb-promo__title` 은 page-list.css(정책 목록 하단 안내 2칸)에도 «다른 규격»으로 있다.
메인의 서브 배너는 항상 .jb-hero__subs 안이므로(mainNew.jsp:196~233) 메인 렌더는 그대로다.
⚠️ 정본(design/css/page-main.css)은 아직 무한정 셀렉터다 — 정본에도 같은 한정을 반영해 달라고 보고했다. */
/* 🔴 2026-09-28 D322 (사용자) — 배너박스 회색 면을 없애 흰 카드가 흰 페이지 위에 놓이므로 «테두리 1px»(--jb-border)를 준다.
box-sizing:border-box(base.css) 라 카드 바깥 크기(298×222 @1440)는 그대로이고 내용만 안쪽으로 1px 들어간다 · 호버 그림자 그대로 */
.jb-promo{ position:relative; display:flex; flex-direction:column; min-height:202px; padding:30px; border:1px solid var(--jb-border); border-radius:var(--jb-r-card); background:var(--jb-surface);
transition:box-shadow var(--jb-dur-fast) var(--jb-ease); }
.jb-promo:hover{ box-shadow:var(--jb-shadow-hover); }
.jb-promo .jb-slides{ min-height:86px; } /* cat 18 + 10 + title 58 */
/* 신청·접수 배너 스켈레톤 (17단계 D37 · P5) — 외부 호출 전 고정 높이를 잡아 레이아웃 흔들림을 막는다 */
.jb-promo__skel{ color:var(--jb-disabled); }
.jb-promo__skel .jb-promo__title{ color:var(--jb-disabled); }
.jb-promo__cat { display:block; font-size:var(--jb-fs-sm); line-height:var(--jb-lh-tight); color:var(--jb-muted); }
.jb-promo__title{ display:block; margin-top:10px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-h4); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
/* ── 우측 패널 304×460 (브랜드 면 · p50/30/30) ──────────────────────── */
.jb-side{ position:relative; display:flex; flex-direction:column; padding:50px 30px 30px; overflow:hidden;
border-radius:var(--jb-r-card); background:var(--jb-brand); color:var(--jb-on-brand); }
.jb-side__btn{ margin-top:auto; }
.jb-side .jb-link{ color:var(--jb-on-brand); font-family:var(--jb-font-body); font-weight:var(--jb-fw-regular); font-size:var(--jb-fs-sm); line-height:20px; }
.jb-side .jb-link:hover{ text-decoration:underline; }
.jb-side .jb-link img{ filter:brightness(0) invert(1); }
/* 🔴 2026-09-27 D255 ② — 글자가 회색으로 보였다. 위 `.jb-side .jb-link`(0,2,0) 가 «흰색을 주는데»
운영 CSS 의 a 규칙이 이긴다(91 #30 계열). 바로 아래 `.jb-side--me a.jb-btn--onbrand` 와 «같은 방식»으로
:link/:visited/:hover/:active 를 써서 한 단계 올린다. 🔴 정본은 고치지 않는다 — 정본엔 운영 CSS 가 없다.
⚪ 화살표는 이미 위 filter 로 흰색이다. 글자만 문제였다. */
.jb-side a.jb-link:link, .jb-side a.jb-link:visited,
.jb-side a.jb-link:hover, .jb-side a.jb-link:active{ color:var(--jb-on-brand); }
/* 비로그인 : 로그인 유도 (Figma 283:311) — 제목 24 · 설명 20/52 · 20 · 구분선 · 20 · 링크 14 */
.jb-login__title{ margin:0 0 10px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-h3); line-height:var(--jb-lh-tight); }
.jb-login__desc { margin:0 0 20px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-medium); font-size:var(--jb-fs-lg); line-height:var(--jb-lh-tight); }
.jb-login__hr { margin:0 0 20px; border:0; border-top:1px solid var(--jb-divider-on-brand); }
.jb-login__links{ display:flex; flex-direction:column; gap:4px; }
.jb-login__links a{ color:var(--jb-on-brand); font-size:var(--jb-fs-sm); line-height:20px; text-decoration:none; }
.jb-login__links a:hover{ text-decoration:underline; }
.jb-side__illust{ position:absolute; right:30px; bottom:75px; width:168px; height:126px; transform:scaleX(-1); pointer-events:none; }
/* 로그인 후 : 내 현황 요약 (Figma 283:845) — 제목 24/31 · 리드 20/52 · 지표 3행 52 gap 6 · CTA · 설정 링크 */
.jb-me__hi { margin:0 0 6px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-h3); line-height:29px; word-break:keep-all; } /* 어절 단위 줄바꿈 */
/* 맞춤 조건 : 라벨 ' : ' 값 2행 */
.jb-me__cond{ display:flex; flex-direction:column; gap:4px; margin:0 0 12px; padding:0; list-style:none;
font-family:var(--jb-font-display); font-weight:var(--jb-fw-medium); font-size:var(--jb-fs-base); line-height:var(--jb-lh-tight); }
.jb-me__cond li{ display:flex; align-items:baseline; gap:6px; }
/* 🔴 2026-09-27 D255 ③ — 라벨이 「희망직 / 종」으로 갈렸다.
`.jb-me__cond li` 가 display:flex 인데 라벨 span 이 «기본 shrink 1» 이라 눌려서 줄바꿈됐다.
값(b)은 종전대로 여러 줄로 접힌다 — 긴 희망직종을 다 보여주려면 그래야 한다. */
.jb-me__cond span{ flex:none; white-space:nowrap; }
.jb-me__cond span::after{ content:" :"; }
/* 🔴 D324 B15 ① (2026-09-29 · UI2026-IT2) — 조건값 «밑줄 제거». 링크가 아닌데 밑줄 때문에 링크처럼 읽혔다(MAIN-M01 ①). 굵기만 남긴다 */
.jb-me__cond b{ font-weight:var(--jb-fw-bold); }
.jb-me__stats{ display:flex; flex-direction:column; gap:6px; margin:0 0 20px; padding:0; list-style:none; }
.jb-me__stats li{ display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 21px; box-sizing:border-box;
border:1px solid var(--jb-on-brand-20); border-radius:var(--jb-r-btn); background:var(--jb-on-brand-10); }
.jb-me__stats span{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-sm); }
.jb-me__stats b { font-weight:var(--jb-fw-bold); font-size:var(--jb-fs-stat); line-height:var(--jb-lh-tight); }
/* D52 — 0 도 자리를 지키되 **강조하지 않는다**. 「확인할 것이 없다」는 정보라 값은 남기고 톤만 낮춘다
(패널이 브랜드 배경이라 흰색 계열 토큰을 쓴다 — 새 색을 만들지 않는다) */
.jb-me__stats b.is-zero{ color:var(--jb-divider-on-brand); }
.jb-side--me{ padding-top:40px; } /* 제목 2행 + 조건 2행으로 늘어난 만큼 상단 여백을 줄여 패널 460 유지 */
.jb-side--me .jb-btn--onbrand{ color:var(--jb-brand); }
.jb-side--me a.jb-btn--onbrand:link, .jb-side--me a.jb-btn--onbrand:visited, .jb-side--me a.jb-btn--onbrand:hover, .jb-side--me a.jb-btn--onbrand:active{ color:var(--jb-brand); } /* components.css 링크형 버튼 규칙(0,2,1)보다 한 단계 위 */ /* 시안 실측 : 로그인 후 CTA 글자는 브랜드색 */
/* D56(2026-09-17) — 저장검색 칩 규칙 제거. 04 공공채용에서 「선택 저장」을 없애(D55)
새로 저장할 길이 사라졌고 메인 칩도 함께 걷었다. D40 은 폐기.
⚠️ 마크업을 지웠으면 그 화면을 겨냥한 규칙도 함께 걷는다(D57) — 남기면 운영 CSS 흡수 때 그대로 옮겨 붙는다. */
.jb-me__setting{ display:flex; margin-top:10px; padding-left:10px; } /* flex : inline-flex 링크의 베이스라인 여백 제거 → 패널 460 유지 */
/* 🔴 D324 B15 ② (2026-09-29 · UI2026-IT2) — 「관심분야 설정」을 «짙은 브랜드 면 pill + 흰 글자»로(정본 page-main.css 와 같다).
종전 = 브랜드 면(#00AAA5) 위 흰 글자 · 대비 2.88:1(AA 미달) → 면 --jb-brand-deep(#00726C) 위 흰 글자 5.80:1 · 세미볼드 · pill.
★ 패널 460 유지 — pill 높이 24 로 +4 · 윗여백 10 → 6 으로 상쇄. 왼쪽 여백 10 은 pill 안쪽 여백으로 옮겨 글자 x 좌표는 그대로.
⚠️ :hover 는 `.jb-side .jb-link:hover{text-decoration:underline}`(같은 특이도) «뒤»에 있어야 밑줄이 사라진다 */
.jb-me__setting{ margin-top:6px; padding-left:0; }
.jb-me__setting .jb-link{ padding:2px 10px; border-radius:var(--jb-r-pill); background:var(--jb-brand-deep); font-weight:var(--jb-fw-semibold); }
.jb-me__setting .jb-link:hover{ background:var(--jb-brand-darker); text-decoration:none; }
/* ══ 2. Quick ══ 4종 305×112 (텍스트 좌 · 원형 아이콘 60 우) ═════════ */
.jb-quickbar{ padding:60px 0 80px; }
.jb-airdy + .jb-quickbar{ padding-top:40px; } /* 로그인 후 : AI 박스 → 퀵 40 */
.jb-quickbar__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.jb-qk{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:112px; padding:26px 30px;
border-radius:var(--jb-r-card); background:var(--jb-bg-subtle); text-decoration:none; transition:background var(--jb-dur-fast) var(--jb-ease); }
.jb-qk:hover{ background:var(--jb-bg-hover); }
.jb-qk__cat { display:block; margin-bottom:6px; font-size:var(--jb-fs-base); line-height:var(--jb-lh-tight); color:var(--jb-inverse); }
.jb-qk__label{ display:block; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-lg); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
.jb-qk__icon { flex:none; width:var(--jb-icon-quick); height:var(--jb-icon-quick); padding:12px; border-radius:50%; background:var(--jb-surface); }
/* ══ 섹션 타이틀 ══ eyebrow 16/21 + 12 + 36/47 · 컨테이너 안쪽 10 ═════ */
.jb-sechead{ margin-bottom:30px; padding-inline:10px; }
.jb-sechead__eyebrow{ display:block; margin-bottom:12px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-base); line-height:21px; letter-spacing:1.6px; text-transform:uppercase; color:var(--jb-brand); }
.jb-sechead__row{ display:flex; align-items:center; justify-content:space-between; gap:var(--jb-sp-5); flex-wrap:wrap; }
.jb-sechead--center{ padding-inline:0; text-align:center; }
.jb-sechead--center .jb-sechead__row{ justify-content:center; }
/* ══ 3. AI 매칭 준비도 (로그인 후 · Figma 283:1144) ═══════════════════
배너 → 60 → 리드 36/47 → 30 → 박스 1280×317 (테두리 #EEE · 안쪽 32)
상단 100 = 도넛 100 + 30 + 텍스트(태그 26 · 12 · 제목 20 · 10 · 설명 16) · 26 · 하단 항목 598×127 */
/* 컴포넌트 본체(__box 이하)와 추천 카드는 components.css 로 승격했다(마이페이지·AI 화면 공용).
여기 남은 것은 메인 섹션 배치뿐이다. */
.jb-airdy{ padding-top:60px; }
.jb-airdy__lead{ margin-bottom:30px; }
.jb-airdy__lead b{ font-weight:var(--jb-fw-bold); }
/* ══ 4. 지금 나에게 필요한 서비스 ══ 카드 630×191 · 탭 3종 ═════════════ */
.jb-need__panel[hidden]{ display:none !important; }
/* 🔴 2026-09-25 QA-020 — flex 를 걷어냈다. 한 «문장»인데 flex 라 텍스트 조각과 가
각각 항목이 돼 gap:20px 만큼 벌어졌다(「윤채영님은 ␣ 청년 ␣ 으로 설정되어 있어요.」).
의도는 «우측 정렬» 하나뿐이라 text-align 으로 충분하다. 정본 page-main.css:295 도 같이 고쳤다. */
.jb-need__note{ text-align:right; margin:20px 0 0; padding-inline:10px;
font-size:var(--jb-fs-sm); line-height:21px; color:var(--jb-muted); }
.jb-need__note b{ font-weight:var(--jb-fw-semibold); color:var(--jb-brand); }
/* ══ 5-A. 취업 준비 콘텐츠 (비로그인) ══ 카드 412×482 · gap 22 ═════════
썸네일 220 (Figma Img 프레임 @2x) · 본문 40/41 · cat 14 · 제목 24 · 설명 16/1.5 · 링크 브랜드 */
.jb-cont__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.jb-cont-card{ position:relative; 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; transition:box-shadow var(--jb-dur-base) var(--jb-ease); }
.jb-cont-card:hover{ box-shadow:var(--jb-shadow-hover); }
.jb-cont-card__img { display:block; width:100%; height:220px; object-fit:cover; background:var(--jb-bg-section); }
.jb-cont-card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:39px 40px 40px; } /* 테두리 1 포함 40/41 */
.jb-cont-card__cat { display:block; margin-bottom:16px; font-size:var(--jb-fs-sm); line-height:var(--jb-lh-tight); color:var(--jb-muted); }
.jb-cont-card__title{ display:block; margin:0 0 10px; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold); font-size:var(--jb-fs-h3); line-height:var(--jb-lh-tight); color:var(--jb-ink); }
/* 🔴 2026-09-27 D263 — 제목을 «세 카드 모두» 2줄 말줄임(사용자 확정 「2줄이 넘어가면 말줄임」).
🔴 위 `.jb-cont-card__title{ display:block … }` «뒤»에 두어야 한다 — 같은 특이도라 뒤가 이긴다.
앞에 두면 display:block 이 이겨 clamp 가 안 먹는다(!important 를 쓰지 않으려면 순서가 유일한 수단이다).
⚠️ 이것만으로 카드 높이가 482 로 돌아가지는 않는다 — 카드2 «설명(__desc)이 3줄»이라 48px 이 남는다.
설명까지 묶을지는 사용자 결정 대기다(지금은 제목만). */
.jb-cont-card__title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
.jb-cont-card__desc{ display:block; margin:0; font-size:var(--jb-fs-base); line-height:1.5; letter-spacing:-.02em; color:var(--jb-muted); }
/* 🔴 2026-09-27 D265 — 설명도 «1줄»로 묶는다(사용자 확정 「설명도 묶어」).
D263 으로 제목만 묶었을 때 카드2 자연 높이가 561.5 → 530.4 까지만 내려갔고,
남은 48px 이 «설명 3줄»이었다. 1줄로 묶어야 규격 412×482 가 복원된다.
🔴 D263 과 «같은 자리» — 위 `.jb-cont-card__desc{ display:block … }` 선언보다 뒤여야 이긴다. */
.jb-cont-card__desc{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow:hidden;
min-height:calc(var(--jb-fs-base) * 1.5); }
/* 🔴 2026-09-27 D272 — 설명이 «비어도 자리를 지킨다»(1줄분 24px · 정본 page-main.css:343 과 같은 값).
요약 정리 스크립트가 「남는 글이 없다」고 판단한 카드에서 설명이 «사라지면» 행이 482 → 458 로 떨어져
데이터에 따라 높이가 오갔다(QA 실측). 사용자 요구는 «카드 높이 고정»이다.
➡️ 스크립트는 hidden 대신 textContent="" 로 «비운다»(mainNew.jsp:2435 주석). */
/* 🔴 2026-09-27 D267 — 클램프(또는 display)를 거는 부품은 [hidden] 을 «함께» 선언한다.
작성자 CSS 의 display 선언이 UA 규칙 `[hidden]{display:none}` 을 «이겨서»
JS 가 el.hidden = true 를 줘도 무효가 되고, 정리 결과가 빈 설명 자리에 HTML 태그가 글자로 보였다.
⚠️ D265 가 만든 결함이 «아니다» — display:block 시절에도 같은 상태였고 이번에 드러난 것이다. */
.jb-cont-card__desc[hidden]{ display:none; }
.jb-cont-card__foot{ display:flex; margin-top:auto; padding-top:30px; }
.jb-cont-card__foot--end{ justify-content:flex-end; }
.jb-cont-card__foot .jb-slider--plain{ position:static; }
/* 취업교육 카드 : 헤드 60 + 구분선 + 30 · 슬라이드 영역 154 */
.jb-cont-card--list .jb-cont-card__body{ padding:40px; }
.jb-cont-card__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:60px; margin-bottom:30px; border-bottom:1px solid var(--jb-border); }
.jb-cont-card--list .jb-slides{ min-height:154px; }
/* 🔴 2026-09-27 D252 — 취업교육 카드가 «과정명 + 모집일정·교육기간·교육장소» 구성으로 바뀌었다.
과정명이 길어 카드 높이가 흔들리므로 2줄로 자른다. 정보 목록은 한 줄씩 쌓는다.
🟢 `.jb-polcard__info` 는 components.css 의 «기존 부품»을 그대로 재사용한다(새 이름을 만들지 않았다). */
.jb-cont-card--list .jb-cont-card__title{ margin-bottom:12px; } /* D263 — clamp 는 위 일반 규칙이 담당한다 */
.jb-cont-card--list .jb-polcard__info{ display:block; }
/* ══ 5-B. 내 맞춤 추천 (로그인 후 · Figma 283:776) ══ 카드 412×229 · #F4F6F8 · p40 ═ */
.jb-reco__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.jb-reco__grid[hidden]{ display:none !important; } /* 탭 패널 : jb- 컴포넌트가 display 를 지정하므로 명시 */
/* ══ 6. 유관서비스 ══ 항목 160×177 · pitch 200 · 화살표 60 at 컨테이너 바깥 -120 ═ */
.jb-partner-section{ padding:0 0 100px; } /* 상단 여백 0 (앞 섹션 하단 80 이 유일) */
.jb-partner{ position:relative; }
.jb-partner__viewport{ max-width:1160px; margin-inline:auto; overflow:hidden; }
.jb-partner__grid{ display:flex; gap:40px; width:max-content; transition:transform .4s var(--jb-ease); }
.jb-part{ flex:none; display:flex; flex-direction:column; align-items:center; gap:16px; width:160px; padding:20px 0;
border-radius:var(--jb-r-card); text-decoration:none; transition:background var(--jb-dur-fast) var(--jb-ease); }
.jb-part:hover{ background:var(--jb-bg-section); }
.jb-part__ico{ display:grid; place-items:center; width:100px; height:100px; border-radius:50%; background:rgba(244,246,248,.8); overflow:hidden; }
.jb-part__ico img{ display:block; max-width:80px; max-height:68px; mix-blend-mode:multiply; } /* 개별 크기는 width/height 속성 */
.jb-part__ico--ph{ font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold); font-size:22px; letter-spacing:-.5px; color:var(--jb-brand); } /* 로고 미확보 임시 */
.jb-part__label{ font-size:var(--jb-fs-base); line-height:var(--jb-lh-tight); color:var(--jb-ink); text-align:center; }
.jb-partner__arrow{ position:absolute; top:50%; width:60px; height:60px; padding:0; border:0; border-radius:50%; background:none; cursor:pointer; transform:translateY(-50%); }
.jb-partner__arrow img{ width:60px; height:60px; }
.jb-partner__arrow--prev{ left:-120px; }
.jb-partner__arrow--next{ right:-120px; }
/* ══ Footer ══ 327 = 80 + 167 + 80 · 로고 #7A7A7A · 링크 18/27 · 본문 16/21 #909090 ═ */
.jb-footer{ padding:80px 0; background:var(--jb-footer-bg); }
.jb-footer__inner{ display:flex; align-items:flex-start; gap:80px; }
.jb-logo--foot img{ filter:brightness(0) invert(1); opacity:.48; }
.jb-footer__body{ flex:1 1 auto; min-width:0; }
.jb-footer__links{ display:flex; flex-wrap:wrap; gap:20px; margin-bottom:28px; }
.jb-footer__links a{ font-size:var(--jb-fs-md); line-height:27px; color:rgba(255,255,255,.85); text-decoration:none; }
.jb-footer__links a:first-child{ font-weight:var(--jb-fw-bold); color:#fff; }
.jb-footer__body .jb-sm{ margin:0 0 4px; font-size:var(--jb-fs-base); line-height:21px; color:var(--jb-footer-text); }
.jb-footer__body .jb-sm b{ font-weight:var(--jb-fw-bold); }
.jb-footer__body .jb-footer__addr{ margin-top:20px; }
.jb-footer__body .jb-footer__copy{ margin-bottom:0; color:var(--jb-footer-copy); }
.jb-footer__sns{ display:flex; flex:none; gap:8px; align-self:flex-end; }
.jb-footer__sns a{ display:grid; place-items:center; width:40px; height:40px; padding:8px; box-sizing:border-box; border-radius:50%; background:var(--jb-footer-sns); }
/* ══ 스크롤 리빌 (main.js · data-scroll-reveal) ═════════════════════
JS 미동작·reduced-motion 에서는 항상 보임(.scroll-reveal-ready 가드). 탭 전환 재생은 .is-reset 경유 */
.scroll-reveal-ready [data-scroll-reveal]{ opacity:0; transform:translate3d(0,18px,0); will-change:opacity,transform;
transition:opacity var(--jb-dur-reveal) ease var(--reveal-delay,0ms), transform var(--jb-dur-reveal) var(--jb-ease-out) var(--reveal-delay,0ms); }
.scroll-reveal-ready [data-scroll-reveal].is-revealed{ opacity:1; transform:none; will-change:auto; }
.scroll-reveal-ready [data-scroll-reveal].is-reset{ transition:none; }
@media (prefers-reduced-motion:reduce){
.scroll-reveal-ready [data-scroll-reveal]{ opacity:1; transform:none; transition:none; }
.jb-slide.is-active{ animation:none; }
}
/* ══ 반응형 ═════════════════════════════════════════════════════════ */
@media (max-width:1440px){
.jb-partner__viewport{ max-width:1000px; }
.jb-partner__arrow--prev{ left:-20px; }
.jb-partner__arrow--next{ right:-20px; }
/* ── 헤더 전환점 1260 (운영 style.css 와 동일) ────────────────────────
이하에서 유틸바·GNB 를 숨기고 헤더를 시안 모바일 규격(68 · 로고 120×34 ·
검색 46 · 햄버거 46)으로 바꾼다. Figma 292:363 실측. */
@media (max-width:1260px){
body.is-drawer-open{ overflow:hidden; }
.jb-header__util{ display:none; }
.jb-header__main > .jb-gnb{ display:none; }
.jb-header__main{ gap:10px; min-height:68px; padding-inline:20px; } /* 시안 292:363 : 로고 x20 */
.jb-logo{ width:auto; }
.jb-logo img{ width:120px; height:34px; }
.jb-search-btn{ width:46px; height:46px; padding:12px; margin-left:auto; }
.jb-menu-btn{ display:flex; }
}
}
@media (max-width:1200px){
.jb-hero__grid{ grid-template-columns:1fr; }
.jb-hero__subs{ grid-template-rows:auto auto; }
.jb-side{ min-height:0; padding:30px; }
.jb-side__btn{ margin-top:30px; }
.jb-side__illust{ display:none; }
.jb-quickbar__grid, .jb-cont__grid, .jb-reco__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.jb-partner__viewport{ max-width:760px; }
/* D251 — 🔴 돌출(bleed)은 «1201 이상»에만 준다(2026-09-28 D322 사용자 「1200 이하 돌출 끄기」 · 종전 ≤900 에서 옮겼다).
≤900 : 모바일 배너는 «사각»이다(1080×720 = 박스 비율 1.5). 돌출을 주면 이미지가 박스 밖으로 나가고
코너 보정이 «이미지 위»에 얹혀 하단이 겹쳐 보인다(2026-09-27 실측 5.5px).
901~1200 : 슬롯이 배너보다 가로로 길어(1200 : 827×460) cover 가 카드 바닥을 잘라 코너 보정이 카드 위에 «노치»를 냈다. */
.jb-hero__img{ height:100%; }
.jb-hero__main::before, .jb-hero__main::after{ content:none; }
}
/* D322 (2026-09-28 사용자 「비율 고정 적용」) — 901~1200 은 메인 배너가 «배너 원본 비율»을 따른다.
슬롯이 배너(2392×1724)보다 가로로 길면 cover 가 아래를 잘랐다(1200 : 136px · 1100 : 64px). min-height 460 은 1011 이하에서 이긴다.
⚠️ width:100% 필수 — 없으면 aspect-ratio 가 폭을 키워 901 에서 메인(638)이 서브 카드를 덮는다(정본 실측). */
@media (min-width:901px) and (max-width:1200px){
.jb-hero__main{ width:100%; aspect-ratio:2392 / 1724; min-height:460px; }
}
@media (max-width:900px){
/* D291 (2026-09-27) — 모바일은 «메인 배너만» 노출한다.
근거 = 기능정의서 `02_화면정의.md` FR-MAIN01(확정) : 「좌측 배너박스에 메인 배너 1 + 서브 배너 2 …
모바일에서는 «메인 배너만» 노출한다」. 확정 조항인데 정본·dev 양쪽에 반영돼 있지 않았다(사용자 지적).
★ 숨기는 것은 서브 2종(신청·접수 · 러닝센터)뿐이고 메인 배너(.jb-hero__main)는 그대로 둔다.
⚠️ 1200~900 (태블릿)에서는 «보인다» — 1열로 재배치될 뿐이다(위 @media 1200 참조). */
.jb-hero__subs{ display:none; }
.jb-hero{ padding-top:24px; }
.jb-bannerbox{ grid-template-columns:1fr; min-height:0; }
/* ⚠️ 종전 dev 전용 줄 `.jb-hero__img{ height:auto; aspect-ratio:630/431 }` 은 «되살리지 않는다»(D251 · 돌출을 만들던 원인 · 정본에도 없다). */
.jb-hero__main{ min-height:0; aspect-ratio:630 / 420; }
/* D251 돌출 끄기 두 줄(.jb-hero__img height:100% · ::before/::after content:none)은 위 @media 1200 으로 옮겼다(2026-09-28 D322) */
.jb-hero__main .jb-slide{ padding:0; }
.jb-hero__title{ font-size:28px; }
.jb-slider{ left:30px; bottom:24px; }
.jb-quickbar{ padding-top:40px; }
.jb-quickbar__grid, .jb-cont__grid, .jb-reco__grid{ grid-template-columns:1fr; }
.jb-qk{ min-height:88px; padding:20px; }
.jb-airdy{ padding-top:40px; }
.jb-need__note{ text-align:left; }
.jb-cont-card__body, .jb-cont-card--list .jb-cont-card__body, .jb-reco-card{ padding:24px 20px; }
/* 🔴 2026-09-27 D252/D257 — ≤900 은 «1열»이라 카드를 키워 줄 형제가 없다.
.jb-slide 가 position:absolute(inset:0) 라 내용이 상자를 못 키우고, flex 컬럼에서
클램프의 overflow:hidden 때문에 «제목만» 0 까지 눌려 안 보였다(정본도 같았다).
제목에 flex:none 을 주면 넘치므로 «상자를 키운다».
근거 = cat 18.2+16 · 제목 2줄 60.8+12 · 정보 3줄 77.4 ≈ 184.4 → 여유 포함 190. */
.jb-cont-card--list .jb-slides{ min-height:190px; }
.jb-partner__viewport{ max-width:none; overflow-x:auto; }
.jb-partner__grid{ gap:20px; transform:none !important; }
.jb-partner__grid > [data-affiliate-clone]{ display:none; } /* 모바일은 가로 스크롤 → 무한 롤링용 복제본 숨김 */
.jb-partner__arrow{ display:none; }
.jb-footer{ padding:40px 0; }
.jb-footer__inner{ flex-direction:column; gap:24px; }
.jb-footer__sns{ align-self:flex-start; }
}
/* 17단계 M7 ② · 창업 관심 회원 안내(D41) — 정책 탭 위 한 줄 */
.jb-founderlink{ margin:0 0 var(--jb-sp-4); padding:var(--jb-sp-3) var(--jb-sp-4);
border:1px solid var(--jb-brand-soft); border-radius:var(--jb-r-box); background:var(--jb-brand-weak);
font-size:var(--jb-fs-sm); line-height:22px; color:var(--jb-ink); }
.jb-founderlink a{ font-weight:var(--jb-fw-semibold); color:var(--jb-brand-hover); text-decoration:underline; text-underline-offset:2px; }
/* ══ 2026-09-17 20단계 — 통합검색 «모달» (D68) ═══════════════════════════════
헤더의 `.jb-search-btn` 을 누르면 헤더 아래에서 내려온다. 전 화면 공통.
⚠️ 종전 확정 디자인에는 «버튼만» 있고 모달 규격이 없었다 — 이번에 신설한다. */
.jb-searchmodal{ position:fixed; left:0; right:0; top:0; z-index:var(--jb-z-sheet);
background:var(--jb-surface); border-bottom:1px solid var(--jb-border);
transform:translateY(-100%); transition:transform var(--jb-dur-base) var(--jb-ease);
visibility:hidden; }
.jb-searchmodal[aria-hidden="false"], .jb-searchmodal.is-open{ transform:translateY(0); visibility:visible; }
.jb-searchmodal__inner{ max-width:calc(var(--jb-container) + 40px); margin-inline:auto;
padding:var(--jb-sp-6) 20px var(--jb-sp-5); }
.jb-searchmodal__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--jb-sp-4);
margin-bottom:var(--jb-sp-4); }
.jb-searchmodal__title{ margin:0; font-family:var(--jb-font-display); font-weight:var(--jb-fw-bold);
font-size:var(--jb-fs-h4); color:var(--jb-ink); }
/* 입력 — 목록 검색과 같은 규격을 쓴다(.jb-searchbox__keyword 와 같은 원칙 : 테두리는 «감싸는 쪽»이 그린다) */
.jb-searchmodal__field{ display:flex; align-items:center; gap:var(--jb-sp-3); height:56px; padding:0 var(--jb-sp-5);
border:1px solid var(--jb-border); border-radius:var(--jb-r-btn); background:var(--jb-surface); }
.jb-searchmodal__field:focus-within{ border-color:var(--jb-brand); box-shadow:var(--jb-ring); }
.jb-searchmodal__field input{ flex:1 1 auto; min-width:0; height:100%; border:0; outline:0; background:none;
font-family:var(--jb-font-body); font-size:var(--jb-fs-base); color:var(--jb-ink); }
.jb-searchmodal__field input::placeholder{ color:var(--jb-disabled); }
/* 추천검색어 */
.jb-searchmodal__reco{ display:flex; align-items:center; gap:var(--jb-sp-3); flex-wrap:wrap; margin-top:var(--jb-sp-4); }
.jb-searchmodal__reco-label{ flex:none; font-family:var(--jb-font-display); font-weight:var(--jb-fw-semibold);
font-size:var(--jb-fs-sm); color:var(--jb-ink); }
/* 딤 — 모달 뒤 본문을 덮는다(헤더까지) */
.jb-searchdim{ 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-searchdim.is-open{ opacity:1; visibility:visible; }
@media (max-width:1260px){
.jb-searchmodal__inner{ padding:var(--jb-sp-5) 16px var(--jb-sp-4); }
.jb-searchmodal__field{ height:48px; padding:0 var(--jb-sp-4); }
}
@media (prefers-reduced-motion:reduce){ .jb-searchmodal{ transition:none; } }
/* 20단계(D68) 부가 — 정본은 모달 «안»만 규정한다. 아래 2건은 운영 이식에 필요한 최소 보강이다.
① 검색 버튼(.jb-btn)이 56/48 입력 줄에서 눌리지 않게 세로 크기를 고정한다.
② 본문 스크롤 잠금은 드로어와 «같은 훅»(body.is-drawer-open)을 쓰되, 검색 모달은 전 폭에서 열리므로
정본의 @media(max-width:1260) 안 선언만으로는 1261 이상에서 안 걸린다 — 폭 제한 없이 한 줄 더 둔다. */
.jb-searchmodal__field .jb-btn{ flex:none; }
body.is-drawer-open{ overflow:hidden; }
/* ══ 2026-09-17 20단계(D68) · 헤더 «운영 이식» 글자색 보정 ═════════════════════
정본 프로토타입에는 운영 CSS 가 없어 드러나지 않던 문제다. 운영 화면에서는
① import.css `a:link{color:#3e332e}` (0,1,1)
② components.css `a.jb-utilbtn:link{color:inherit}` (0,2,1)
③ legacy-bridge.css `.jb-root a:where(:not([class*="jb-"])):link{color:inherit}` (0,2,1)
가 헤더 링크의 색 선언(`.jb-gnb__item` 등 (0,1,0))을 «특정도»로 이긴다.
실측(2026-09-17 local 1440) — GNB #3E332E(정본 #222) · 유틸 pill 전부 #4E4E4E(정본 #000/#2E919A/#5589E1)
· 유틸 링크 #DDD(정본 #000). 모양·폰트는 정상이고 «색만» 어긋난다.
➡️ components.css · legacy-bridge.css 는 이 차수의 소유가 아니므로(지시 §파일 범위)
정본이 이미 정한 «같은 값»을 특정도만 올려 다시 선언한다. 새 색을 만들지 않는다.
기법은 components.css 가 `a.jb-btn--primary:link …` 로 쓰는 것과 동일하다.
⚠️ 순서 — :hover 를 :link/:visited 뒤에 둔다(같은 특정도에서 뒤가 이긴다).
⚠️ 이 블록은 운영 CSS 흡수(§6 3단계) 때 브릿지와 함께 정리 대상이다. */
.jb-root a.jb-utilbtn--lms:link, .jb-root a.jb-utilbtn--lms:visited,
.jb-root a.jb-utilbtn--lms:hover, .jb-root a.jb-utilbtn--lms:active { color:var(--jb-util-lms-ink); }
.jb-root a.jb-utilbtn--apply:link, .jb-root a.jb-utilbtn--apply:visited,
.jb-root a.jb-utilbtn--apply:hover,.jb-root a.jb-utilbtn--apply:active{ color:var(--jb-util-apply-ink); }
.jb-root a.jb-utilbtn--map:link, .jb-root a.jb-utilbtn--map:visited,
.jb-root a.jb-utilbtn--map:hover, .jb-root a.jb-utilbtn--map:active { color:var(--jb-util-map-ink); }
.jb-root a.jb-utilbtn--biz:link, .jb-root a.jb-utilbtn--biz:visited,
.jb-root a.jb-utilbtn--biz:hover, .jb-root a.jb-utilbtn--biz:active { color:var(--jb-util-biz-ink); }
.jb-root .jb-utillinks a:link, .jb-root .jb-utillinks a:visited, .jb-root .jb-utillinks a:active{ color:var(--jb-util-link); }
.jb-root .jb-utillinks a:hover{ color:var(--jb-brand); }
.jb-root a.jb-gnb__item:link, .jb-root a.jb-gnb__item:visited, .jb-root a.jb-gnb__item:active{ color:var(--jb-ink); }
.jb-root a.jb-gnb__item:hover, .jb-root .jb-gnb__unit:focus-within a.jb-gnb__item{ color:var(--jb-brand); }
/* ▲ 17단계 C-1 — 위 `a.jb-gnb__item:link`(0,3,1) 가 `.jb-gnb__item[aria-current]`(0,2,0) 을 이긴다.
색을 새로 정하는 것이 아니라 같은 값을 (0,4,1) 로 올려 규격을 되살릴 뿐이다. `!important` 는 쓰지 않는다. */
.jb-root a.jb-gnb__item[aria-current="page"]:link,
.jb-root a.jb-gnb__item[aria-current="page"]:visited,
.jb-root a.jb-gnb__item[aria-current="page"]:active{ color:var(--jb-brand); }
.jb-root a.jb-gnb__sub-item:link, .jb-root a.jb-gnb__sub-item:visited, .jb-root a.jb-gnb__sub-item:active{ color:var(--jb-muted); }
.jb-root a.jb-gnb__sub-item:hover{ background:var(--jb-bg-subtle); color:var(--jb-brand); }
/* D76 강조 항목 — 글자색은 위 기본 하위 메뉴(--jb-muted)를 그대로 받는다(D324 B14 · 종전 브랜드색 복원 줄 삭제). hover 만 브랜드 */
.jb-root a.jb-gnb__sub-item--feature:hover{ background:var(--jb-brand-weak); color:var(--jb-brand-hover); }
/* 드로어 — 대메뉴는 펼쳐도 브랜드색으로 바뀌지 않는다(정본 `:focus-within .jb-gnb__item{color:--jb-ink}`).
현재 위치만 브랜드색이다. */
.jb-root .jb-drawer__body .jb-gnb__unit:focus-within a.jb-gnb__item{ color:var(--jb-ink); }
.jb-root .jb-drawer__body .jb-gnb__unit.is-current > .jb-drawer__title a.jb-gnb__item,
.jb-root .jb-drawer__body a.jb-gnb__item[aria-current="page"],
.jb-root .jb-drawer__body a.jb-gnb__sub-item[aria-current="page"]{ color:var(--jb-brand); }
/* 통합검색 입력 — 포커스 링을 «감싸는 __field» 하나로 모은다 (04-5 「이중 테두리 금지」와 같은 원칙).
정본 page-main.css 는 이 input 에 `outline:0` 을 명시했지만, base.css:64 의 전역 접근성 링
`.jb-root :where(a,button,input,…):focus-visible{ outline:2px solid … !important }` 가 이겨
__field 의 브랜드 테두리 + --jb-ring 안쪽에 링이 한 겹 더 그려진다(2026-09-17 실측).
⚠️ 접근성은 줄지 않는다 — `__field:focus-within` 이 테두리색 + --jb-ring 으로 포커스를 계속 표시한다.
⚠️ base.css 는 이 차수의 소유가 아니라 같은 속성에 !important 로 덮는다(시각 속성 한정 · 격리 4원칙 유지).
※ 같은 상황이 04 목록의 `.jb-searchbox__keyword input` 에도 있다 — 그쪽은 components.css 소관이라 보고만 한다. */
.jb-root .jb-searchmodal__field input:focus,
.jb-root .jb-searchmodal__field input:focus-visible{ outline:0 !important; }
/* ══════════════════════════════════════════════════════════════════════
D77 · dev / 로컬 식별 배지 (2026-09-17)
----------------------------------------------------------------------
종전엔 `nav.newGnb` 배경을 #FFF0A0 으로 칠했는데 확정 디자인의 헤더는 흰 면이다
→ 헤더 «밖» 배지로 옮긴다. 요소는 `default_new2025_top.jsp` 의 JS 가 호스트명을 보고
dev·로컬에서만 «만들어» 붙인다 — 운영 DOM 에는 존재하지 않는다.
⚠️ 디자인 요소가 아니라 개발 편의 장치다 → 토큰 체계에 넣지 않고 여기서 색을 끝낸다.
⚠️ 좌하단에 둔다 — 상담톡 런처(우하단)와 겹치지 않는 자리다.
≤900 에서는 `.jb-mobilebar`(69px) 위로 올린다.
══════════════════════════════════════════════════════════════════════ */
.jb-devbadge{ position:fixed; left:12px; bottom:12px; z-index:200;
display:inline-flex; align-items:center;
padding:5px 10px; border:1px solid #E8D06A; border-radius:var(--jb-r-pill);
background:#FFF0A0; color:#5B4B00;
font-family:var(--jb-font-body); font-size:var(--jb-fs-2xs); font-weight:var(--jb-fw-bold);
line-height:1; letter-spacing:.4px;
pointer-events:none; user-select:none; }
@media (max-width:900px){
.jb-devbadge{ bottom:calc(69px + 12px + env(safe-area-inset-bottom, 0px)); }
}