/* ══════════════════════════════════════════════════════════════════════
   잡아바 UIUX 개편 · 베이스 (폰트 · 스코프 · 타이포 · 레이아웃 프리미티브)  v2
   ----------------------------------------------------------------------
   ★ 전역 리셋 없음 (운영 kgoon.reset 과 이중 리셋 방지)
   ★ 요소 셀렉터는 `.jb-root` 하위·:where() 로만 사용
   ★ box-sizing 은 `jb-` 클래스 요소에만 적용 (운영 레이아웃 보호)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 폰트 ──────────────────────────────────────────────────────────────
   로컬 확인용 : data URI 내장판 (Chrome 이 file:// 외부 폰트를 CORS 차단)
   운영 배포용 : 아래 두 줄을 URL 참조판으로 교체
     @import url("/resource/new_2026/fonts/paperlogy/paperlogy.css");
     Noto Sans KR 은 운영 /resource/main2024/etc/css/fonts.css 가 이미 로드 → import 제거 */
/* [운영 배포본] 원본 주석 지시대로 URL 참조판으로 교체 — data URI 임베드판 배포 금지(패킷 §7) */
@import url("/resource/new_2026/fonts/paperlogy/paperlogy.css");
/* [운영 배포본] Noto Sans KR 은 /resource/main2024/etc/css/fonts.css 가 이미 로드 → 중복 로드 금지(문서 §5.4)로 제거 */

/* ── 스코프 루트 ─────────────────────────────────────────────────────
   단독 프로토타입 : <body class="jb-root">  /  운영 주입 : 삽입 블록 래퍼에 부여 */
.jb-root{
  font-family:var(--jb-font-body); font-size:var(--jb-fs-base); line-height:var(--jb-lh-base);
  color:var(--jb-body); -webkit-font-smoothing:antialiased; text-size-adjust:100%;
}
body.jb-root{ margin:0; }                             /* [단독 프로토타입 전용] */

.jb-root [class^="jb-"], .jb-root [class*=" jb-"],
.jb-root [class^="jb-"]::before, .jb-root [class^="jb-"]::after{ box-sizing:border-box; }

/* 🔴 D306 (2026-09-27 사용자 지적) — «단어(어절) 단위 줄바꿈»이 전역에 없었다.
   실측 = word-break 선언이 «4곳뿐»이었다(.jb-chip · .jb-applyform__consent · .jb-me__hi · 본문 1곳).
   나머지 화면은 브라우저 기본값이라 한글이 «어절 중간»에서 끊겼다.
   ➡️ keep-all = 어절 중간에서 끊지 않는다(한글 기본값이어야 하는 값).
      overflow-wrap:break-word = 그래도 안 들어가는 «한 덩어리»(긴 URL·영문)는 끊는다.
        이 둘을 «같이» 줘야 한다. keep-all 만 주면 긴 URL 이 상자를 뚫고 나간다.
   ⚠️ 격리 4원칙 — 전역 리셋이 아니라 «.jb-root 안의 jb- 부품»에만 준다(운영 화면 불변).
   ⚠️ 이미 keep-all 을 쓰던 4곳은 그대로 둔다 — 같은 값이라 충돌하지 않는다. */
.jb-root [class^="jb-"], .jb-root [class*=" jb-"]{ word-break:keep-all; overflow-wrap:break-word; }

/* [hidden] 우선 보장 — jb- 컴포넌트가 display 를 지정하므로 속성만으로는 숨겨지지 않는다.
   🔴 2026-09-27 D268 — `.jb-root ` 조건을 «뗐다». 종전에는 «후손 선택자»라 사각지대가 컸다.
      · CLAUDE.md 격리 원칙대로 `.jb-root` 를 «개편 블록 최상위에만» 병기하므로
        메인 실측 jb- 요소 442개 중 «289개»가 `.jb-root` 밖이었다(그중 287개가 display 선언 보유).
      · `.jb-root` «자신»도 후손이 아니라 안 걸렸다(.jb-header 가 그랬다).
      · 그래서 그때마다 개별 선언으로 때워 왔다 — jb-slide · jb-drawer · jb-gnb__sub · jb-need__panel
        · jb-apbanner__slide · jb-mobilebar · jb-cont-card__desc(D267) «7곳».
   ★ 전 화면에 걸어도 안전한 근거 — `jb-` 는 «개편 전용 접두사»다(격리 4원칙 ①).
     실측 : 운영 CSS 20종에 `.jb-` 셀렉터 «0건» · class 에 jb- 를 쓰는 JSP 43개가 전부 개편 대상(+공용 레이아웃).
   ★ `[hidden]` 이 «있을 때만» 발동하므로 평상시 영향이 없다.
   ⚠️ 개별 선언 7곳은 «지우지 않았다» — 중복일 뿐 무해하고 지우면 회귀 범위가 커진다(96 이관목록).
   ⚠️ 이 `!important` 는 «새로 넣은 것이 아니다» — 종전 규칙에 이미 있었고 선택자 범위만 넓혔다. */
[class^="jb-"][hidden], [class*=" jb-"][hidden]{ display:none !important; }

/* ── 타이포 유틸 (요소 셀렉터 대신 클래스로 제공) ─────────────────── */
.jb-display, .jb-h2, .jb-h3, .jb-h4, .jb-lead{
  font-family:var(--jb-font-display); line-height:var(--jb-lh-tight); color:var(--jb-ink); margin:0; }
.jb-display{ font-size:var(--jb-fs-display); font-weight:var(--jb-fw-semibold); line-height:var(--jb-lh-display); }
.jb-h2{ font-size:var(--jb-fs-h2); font-weight:var(--jb-fw-semibold); }
.jb-h3{ font-size:var(--jb-fs-h3); font-weight:var(--jb-fw-bold); }
.jb-h4{ font-size:var(--jb-fs-h4); font-weight:var(--jb-fw-semibold); }
.jb-lead{ font-size:var(--jb-fs-lg); font-weight:var(--jb-fw-medium); color:inherit; }

.jb-text, .jb-desc, .jb-sm, .jb-xs{ margin:0; line-height:var(--jb-lh-tight); color:var(--jb-muted); }
.jb-text{ font-size:var(--jb-fs-base); line-height:var(--jb-lh-base); color:var(--jb-body); }
.jb-desc{ font-size:var(--jb-fs-base); }
.jb-sm  { font-size:var(--jb-fs-sm); }
.jb-xs  { font-size:var(--jb-fs-xs); }

/* ── 레이아웃 프리미티브 ──────────────────────────────────────────────
   ※ 운영의 `.container` 와 충돌하므로 반드시 `.jb-container`.
   콘텐츠 폭 1280 (캔버스 1920 기준 x=320~1600) + 좌우 여백 20 은 폭 바깥. */
.jb-container{ width:100%; max-width:calc(var(--jb-container) + 40px); margin-inline:auto; padding-inline:20px; }
/* ⚠️ 페이지 래퍼(`.jb-detailpage` · `.jb-hubpage` …)는 «같은 요소»에 함께 붙는다.
   래퍼에서 padding shorthand 를 쓰면 위 `padding-inline` 이 0 으로 덮여 좌우 여백이 사라진다.
   ➡️ 페이지 래퍼의 세로 여백은 «반드시» `padding-block` 롱핸드로 준다(2026-09-18 · 05 지시 §4-1). */

.jb-section{ padding:var(--jb-pad-section); }
.jb-section--tint{ background:var(--jb-bg-section); }

.jb-grid{ display:grid; gap:var(--jb-gap-grid); }
.jb-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.jb-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.jb-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.jb-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
             clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── 포커스 (접근성 · 운영 outline:none 대응 예외) ───────────────── */
.jb-root :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--jb-brand) !important; outline-offset:2px; border-radius:var(--jb-r-sm); }

/* ── 반응형 (프로토타입 A타입 브레이크포인트) ─────────────────────── */
@media (max-width:1200px){ .jb-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  .jb-section{ padding:48px 0; }
  .jb-display{ font-size:28px; line-height:var(--jb-lh-tight); }
  .jb-h4{ font-size:20px; }
  .jb-grid--2, .jb-grid--3, .jb-grid--4{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .jb-section{ padding:36px 0; }
  .jb-display{ font-size:24px; }
  .jb-container{ padding-inline:16px; }
}

/* ── 접근성 보기 모드 (대상별 서비스 · 장애인 패널의 보기 도구) ────────
   토큰만 덮어쓰므로 컴포넌트 CSS 를 건드리지 않는다. !important 도 쓰지 않는다.
   body 에 클래스를 붙이는 이유 : 헤더·본문·푸터 전체에 동시 적용되어야 하기 때문. */
/* 🔴 2026-09-30 D336 — 글자 확대를 약 1.25배로 키웠다(종전 약 1.125배 · +2px). 2차 자체 테스트 IT-TRGT-M02 「더 확대되면 좋겠다」 · 사용자 결정.
   ★ zoom 이 아니라 «글자 토큰»만 키운다 — zoom 은 컨테이너 폭까지 키워 1440 에서 가로 스크롤이 생긴다.
   ★ 히어로 · 섹션 대제목(--jb-fs-hero · --jb-fs-display)은 그대로 둔다(이미 크고, 키우면 줄바꿈이 무너진다). */
body.is-text-large,
body.is-text-large .jb-root{
  --jb-fs-2xs:15px; --jb-fs-xs:16px; --jb-fs-sm:18px; --jb-fs-base:20px;
  --jb-fs-md:22px;  --jb-fs-lg:25px; --jb-fs-h4:28px; --jb-fs-h3:30px; --jb-fs-h2:35px; --jb-fs-stat:32px;
}
/* 🔴 2026-09-30 D336 — 명도 대비를 «검정 바탕 반전»으로 바꿨다(프로토타입 `prototype/css/page-sub.css:484-502` 과 같은 방향 · 사용자 결정).
   종전(밝은 바탕에 글자만 진하게)은 D-day 배지 4.21:1 등 일부가 AA(4.5:1)에 못 미쳤고, 테스터가 「프로토타입 대비 대비가 약하다」고 했다(IT-TRGT-M02).
   ★ 토큰만 덮는다 — 컴포넌트 CSS 를 건드리지 않고 !important 도 쓰지 않는다(이 절 머리 원칙 유지).
   ★ 대비 기준(검정 #000 바탕) : 글자 #FFF 21:1 · 강조(브랜드) #5CE1DC 약 13:1 · 경고 #FF6B6B 약 7.6:1 · 주의 #FFC247 약 12:1 — 모두 AAA(7:1) 이상.
   ★ 브랜드 «면» 위 글자(--jb-on-brand)는 검정으로 뒤집는다(밝은 틸 면 + 흰 글자는 대비가 무너진다).
   ⚠️ 색을 직접 적은 곳(토큰 밖 #fff · #000 등)은 이 모드에서 안 바뀐다 — 대상별 허브 화면은 토큰만 쓴다(page-hub.css 의 직접 색은 기업서비스 홈 전용). */
body.is-high-contrast,
body.is-high-contrast .jb-root{
  --jb-bg:#000000; --jb-surface:#000000; --jb-bg-section:#1A1A1A; --jb-bg-subtle:#1A1A1A; --jb-bg-summary:#1A1A1A; --jb-bg-hover:#333333;
  --jb-ink:#FFFFFF; --jb-ink-strong:#FFFFFF; --jb-body:#FFFFFF; --jb-muted:#F2F2F2; --jb-muted-weak:#E0E0E0; --jb-disabled:#BDBDBD;
  --jb-inverse:#FFFFFF; --jb-on-inverse:#000000;
  --jb-border:#FFFFFF; --jb-border-weak:#BDBDBD; --jb-border-soft:#BDBDBD;
  --jb-brand:#5CE1DC; --jb-brand-hover:#8FECE8; --jb-brand-deep:#5CE1DC; --jb-brand-darker:#5CE1DC;
  --jb-brand-light:#5CE1DC; --jb-brand-soft:#5CE1DC; --jb-brand-weak:#1A1A1A; --jb-on-brand:#000000;
  --jb-danger:#FF6B6B; --jb-danger-weak:#1A1A1A; --jb-danger-line:#FF6B6B;
  --jb-warning:#FFC247; --jb-warning-ink:#FFC247; --jb-warning-weak:#1A1A1A;
  --jb-success:#5CE1DC; --jb-success-weak:#1A1A1A;
  --jb-util-link:#FFFFFF;                             /* 헤더 유틸 우측 링크(통합로그인 · 회원가입 · 고객센터) — 검정 바탕에서 사라졌다(정본 실측) */
}
body.is-high-contrast{ background:#000000; color:#FFFFFF; }
/* UI2026-IT4-8 dev 전용(정본에 없는 줄) — dev 는 본문이 운영 래퍼 #jobaba_wrap(흰 바탕 직접 지정) 안에 있어 body 의 검정 바탕이 가려진다.
   그대로 두면 흰 글자로 뒤집힌 탭 이름 · 섹션 제목 · 설명이 흰 면 위에 놓여 사라진다(로컬 1440 실측 대비 1.00:1).
   운영 래퍼는 건드리지 않고 개편 블록(.jb-root)이 제 바탕을 칠한다 — 토큰만 쓴다(이 절 머리 원칙). */
body.is-high-contrast .jb-root{ background:var(--jb-bg); color:var(--jb-ink); }