/* ══════════════════════════════════════════════════════════════════════
   잡아바 UIUX 개편 · 디자인 토큰  (v2 · 2026-09-04)
   ----------------------------------------------------------------------
   정본   : Figma `gBhKyvvN0bIua4pAcmWpjR` — 283:72 (메인) · 283:627 (메인 로그인)
   확정   : Primary #00AAA5 전면 교체 · 제목/버튼/링크 Paperlogy · 본문 Noto Sans KR
            · Pretendard 폐지 · 버튼/배지 시안 교체 · 테이블 운영 현행 유지
   원칙   : 1) 모든 클래스 `jb-` 접두사   2) 토큰은 :root 와 .jb-root 이중 선언
            3) 요소 셀렉터 단독 사용 금지 4) !important 는 문서화된 예외만
   운영   : 값 변경은 이 파일에서만. 컴포넌트/페이지 CSS 에 색·크기 리터럴을 쓰지 않는다.
            (예외 : 시안 고유 1회성 값은 해당 규칙 옆에 '시안 실측' 주석과 함께 허용)
   갱신   : 컴포넌트가 바뀌면 design-system.html 과 이 파일을 같은 커밋에서 갱신한다.
   ══════════════════════════════════════════════════════════════════════ */

:root,
.jb-root{
  /* ── Brand ─────────────────────────────────────────────────────── */
  --jb-brand:        #00AAA5;   /* Primary · CTA · 강조 */
  --jb-brand-hover:  #00908C;
  --jb-brand-deep:   #00726C;   /* pressed · 짙은 배경 */
  --jb-brand-darker: #005B56;
  --jb-brand-light:  #38BAB2;   /* 게이지·프로그레스 */
  --jb-brand-soft:   #8BD3D2;   /* 옅은 테두리 (로그인 CTA 2px) */
  --jb-brand-weak:   #E2F4F5;   /* 옅은 면 · 배지 · 선택 상태 */

  /* ── Accent (시안 고유) ───────────────────────────────────────────── */
  --jb-hero-bg:      #00A6CA;   /* 히어로 메인 배너 배경 (브랜드 틸과 혼용 금지) */
  --jb-on-hero-20:   rgba(255,255,255,.2);  /* 히어로 위 배지·슬라이드 버튼 면 */
  --jb-on-hero-32:   rgba(255,255,255,.32); /* 슬라이드 버튼 hover */
  --jb-util-brand:   #003282;   /* 유틸바 '러닝센터·잡아바 어플라이' */
  --jb-util-link:    #000000;   /* 유틸바 일반 링크 — 운영 실측은 #585858 이나 가독성 위해 #000 (2026-09-04 지시) */

  /* 유틸바 pill — 운영(job.gg.go.kr .topMenu ul.left) computed 실측 */
  --jb-util-lms-bg:    #EDEFF6;   --jb-util-lms-ink:   #000000;   /* 러닝센터 */
  --jb-util-apply-bg:  #E2F4F5;   --jb-util-apply-ink: #2E919A;   /* 잡아바 어플라이 */
  --jb-util-map-bg:    #E5F1FC;   --jb-util-map-ink:   #5589E1;   /* 일자리맵 */
  --jb-util-biz-bg:    #EDEFF6;   --jb-util-biz-ink:   #000000;   /* 기업서비스 — 운영 미존재, 전용 색상 확정 필요 */

  /* ── Ink ─────────────────────────────────────────────────────────── */
  --jb-ink:          #222222;   /* 제목·강조 */
  --jb-ink-strong:   #111111;
  --jb-inverse:      #333333;   /* 선택 칩 배경 · 준강조 텍스트 */
  --jb-body:         #4E4E4E;   /* 본문 */
  --jb-muted:        #666666;   /* 설명 · 링크 라벨 */
  --jb-muted-weak:   #777777;   /* 완료 상태 등 저강조 */
  --jb-disabled:     #999999;
  --jb-ctrl-muted:   #B3B3B3;   /* 서브 슬라이드 화살표·정지 */
  --jb-on-brand:     #FFFFFF;
  --jb-on-inverse:   #FFFFFF;

  /* ── Surface ─────────────────────────────────────────────────────── */
  --jb-surface:      #FFFFFF;   /* 카드 */
  --jb-bg:           #FFFFFF;   /* 페이지 */
  --jb-bg-section:   #F4F6F8;   /* 섹션 구분 · 추천 카드 */
  --jb-bg-subtle:    #F5F5F5;   /* 배너박스 · 퀵 · 배지 */
  --jb-bg-summary:   #F8F8F8;   /* 마이페이지 요약 */
  --jb-bg-hover:     #EEEEEE;   /* 흰 배경 위 칩 · 퀵의 호버 면 (D42 — 종전 #ECECEC 하드코딩) */
  --jb-th-bg:        #FAFCFC;   /* 테이블 헤더 (운영 실측) */
  --jb-footer-bg:    #222222;
  --jb-footer-text:  #909090;
  --jb-footer-copy:  #595959;
  --jb-footer-sns:   #4E4E4E;

  /* ── Border ──────────────────────────────────────────────────────── */
  --jb-border:       #DDDDDD;   /* 기본 구분선·카드 테두리 (시안 실측) */
  --jb-border-weak:  #EEEEEE;   /* AI 매칭 박스 · 게이지 트랙 */
  --jb-border-soft:  #E9EEF0;   /* 프로그레스 트랙 (운영 실측) */
  --jb-divider-on-brand: rgba(255,255,255,.5);
  --jb-on-brand-10:  rgba(255,255,255,.1);
  --jb-on-brand-20:  rgba(255,255,255,.2);

  /* ── Status ──────────────────────────────────────────────────────── */
  --jb-danger:       #E60012;
  --jb-danger-weak:  #FDECEC;   /* 경고 배지 약배경 — 18단계 마이페이지 · 브릿지의 자료보완 배지와 같은 값 */
  --jb-danger-line:  #F6C9C9;   /* 경고 카드 테두리 (D42 — 종전 page-mypage.css 하드코딩) */
  --jb-warning:      #EF9F27;
  --jb-warning-ink:  #B45309;
  --jb-warning-weak: #FEF3C7;
  --jb-success:      #2E9992;
  --jb-success-weak: #F4FFF9;

  /* ── Typography ──────────────────────────────────────────────────── */
  --jb-font-display: "Paperlogy", "Noto Sans KR", -apple-system, sans-serif;   /* 제목·버튼·링크·칩 */
  --jb-font-body:    "Noto Sans KR", -apple-system, sans-serif;                 /* 본문·표·폼 */

  --jb-fs-hero:    40px;  /* 히어로 제목 */
  --jb-fs-display: 36px;  /* 섹션 타이틀 */
  --jb-fs-h2:      28px;
  --jb-fs-stat:    26px;  /* 우측 패널 지표 숫자 */
  --jb-fs-mystat:  32px;  /* 마이페이지 요약 지표 숫자 (시안 293:222 실측 h39) */
  --jb-fs-h3:      24px;  /* 박스 타이틀 · 콘텐츠 카드 제목 */
  --jb-fs-h4:      22px;  /* 카드 타이틀 · 게이지 숫자 */
  --jb-fs-lg:      20px;
  --jb-fs-md:      18px;  /* GNB · 푸터 링크 · 항목명 */
  --jb-fs-base:    16px;
  --jb-fs-sm:      14px;
  --jb-fs-xs:      13px;
  --jb-fs-2xs:     12px;

  --jb-lh-tight:   1.3;   /* 시안 전역 기본 */
  --jb-lh-base:    1.6;   /* 긴 본문 */
  --jb-lh-display: 47px;  /* 36px 타이틀 실측 행높이 (반올림 오차 방지) */

  --jb-fw-regular: 400;
  --jb-fw-medium:  500;
  --jb-fw-semibold:600;
  --jb-fw-bold:    700;

  /* ── Shape ───────────────────────────────────────────────────────── */
  --jb-r-card: 20px;   /* 카드·박스·퀵 */

  /* 히어로 배너 이미지 하단 돌출량 : 원본 44px @4x = 11px (파란 면 420 기준) */
  --jb-hero-bleed: 11px;
  --jb-r-box:  12px;   /* 중형 블록 · AI 매칭 항목 */
  --jb-r-btn:  8px;    /* 사각 버튼 · 지표 행 */
  --jb-r-sm:   4px;    /* 배지 */
  --jb-r-pill: 999px;  /* pill 버튼·칩·태그 */

  /* ── Size ────────────────────────────────────────────────────────── */
  --jb-icon-card:  42px;   /* 여정 카드 아이콘 (시안 30 → 42 확대 · 2026-09-04) */
  --jb-icon-quick: 60px;   /* 퀵서비스 원형 */
  --jb-btn-h:      41px;   /* pill 버튼·칩 */
  --jb-btn-h-sm:   30px;
  --jb-btn-h-rect: 50px;   /* 사각 CTA */
  --jb-ctrl:       26px;   /* 히어로 슬라이드 버튼 */
  --jb-gauge:      100px;

  /* ── Form · List (2026-09-04 · 목록/상세/폼 카탈로그) ─────────────── */
  --jb-input-h:      46px;   /* 인풋·셀렉트 기본 높이 */
  --jb-input-h-lg:   52px;   /* 키워드 검색 인풋 */
  --jb-filter-w:     300px;  /* 목록 좌측 필터 컬럼 — 2열 옵션에 건수까지 한 줄로 들어가는 최소폭 */
  --jb-detailside-w: 340px;  /* 상세 우측 요약 컬럼 */
  --jb-mark:         20px;   /* 체크·라디오 마크 */
  /* ── z-index (D66 · 2026-09-17) ─────────────────────────────────── */
  --jb-z-mobilebar: 300;     /* 하단 고정 액션 바 — 본문 위 · 헤더와 겹치지 않는다 */
  --jb-z-drawer:     400;    /* 전체메뉴 드로어 — 하단 바(300) «위»여야 한다.
                                정본은 100 인데 그러면 04 같은 화면에서 모바일 바가 드로어를 뚫는다 */
  --jb-z-header:    9999;    /* 운영 고정 헤더(참조용 · 우리가 정하지 않는다) */
  --jb-z-dim:      10000;    /* 시트 딤 — 헤더까지 덮는다 */
  --jb-z-sheet:    10010;    /* 바텀시트 — 가장 위 */

  --jb-ring:         0 0 0 3px rgba(0,170,165,.22);

  /* ── Spacing ─────────────────────────────────────────────────────── */
  --jb-sp-1: 4px;  --jb-sp-2: 6px;  --jb-sp-3: 10px; --jb-sp-4: 16px;
  --jb-sp-5: 20px; --jb-sp-6: 30px; --jb-sp-7: 40px; --jb-sp-8: 60px;
  --jb-sp-9: 80px;
  --jb-gap-grid:   20px;
  --jb-pad-card:   40px 60px;
  --jb-pad-section:80px 0;

  /* ── Layout ──────────────────────────────────────────────────────── */
  --jb-container: 1280px;

  /* ── Elevation · Motion ──────────────────────────────────────────── */
  --jb-shadow-hover: 0 6px 20px rgba(0,0,0,.08);
  --jb-ease:     cubic-bezier(.2,0,.2,1);
  --jb-ease-out: cubic-bezier(.22,1,.36,1);
  --jb-dur-fast: .15s;
  --jb-dur-base: .25s;
  --jb-dur-reveal: .42s;
}

@media (prefers-reduced-motion: reduce){
  :root, .jb-root{ --jb-dur-fast:0s; --jb-dur-base:0s; --jb-dur-reveal:0s; }
}

/* ── 운영 인라인 CSS → 토큰 치환 대응표 (개편 1단계) ─────────────────
   #38bab2 → --jb-brand-light   #00847d/#00726c → --jb-brand-deep   #005b56 → --jb-brand-darker
   #e2f4f5 → --jb-brand-weak    #e9eef0 → --jb-border-soft          #3e332e → --jb-footer-bg
   #4e4e4e → --jb-body          #666666 → --jb-muted                #999999 → --jb-disabled
   #e5484d → --jb-danger        #fef3c7 → --jb-warning-weak         #b45309 → --jb-warning-ink
   #f4fff9 → --jb-success-weak  #2e9992 → --jb-success
   ─────────────────────────────────────────────────────────────────── */