/* ══════════════════════════════════════════════════════════════════════
   급여 · 허브 브리지 — 기존 급여 클래스에 허브(Ledger Editorial) 외형을 입힌다 (★261008 U1)

   로드 순서 (layout.ts)
     salary-reset → hub/tokens → styles.css(급여 레거시) → hub/base → hub/components
     → hub/charts → **salary-bridge(이 파일)** → hub/responsive → salary-responsive

   원칙
     · 허브 복제본(design/hub/*)은 손대지 않는다. 급여 쪽 차이는 여기서만 메운다.
     · 기존 클래스 이름(table.data · .badge · .btn--secondary · .ui-modal-* · .adm-*)은
       그대로 두고 외형만 허브 규칙으로 맞춘다. 화면 코드(js) 수정 없이 전 화면이 바뀐다.
     · 리터럴 색을 쓰지 않는다. 전부 허브 토큰.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 셸 보정 ──────────────────────────────────────────────────── */
.sidebar__brand{ text-decoration:none; }
.sidebar__title{ line-height:1.35; }
/* 그룹(접힘) — 허브 «설정» 하위메뉴와 같은 문법. <details> 로 접고 편다 */
.nav__grp > summary{ list-style:none; }
.nav__grp > summary::-webkit-details-marker{ display:none; }
.nav__grp[open] > summary .nav__caret{ transform:rotate(90deg); }
.nav__item.is-current{ color:var(--ink); font-weight:700; }
.nav__item.is-current .nav__ico{ color:var(--brand); }
.sidebar__role{ font-size:11px; }
/* 로그아웃 = POST 폼(보안리뷰 261026 F-15) — 버튼을 허브의 링크 모양 그대로 보이게 한다. */
.sidebar__logout-form{ margin:0; }
button.sidebar__logout{ background:none; border:0; padding:0; cursor:pointer; font:inherit; font-size:11.5px; }
.topbar__meta{ display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-caption); color:var(--muted); }

/* 페이지 머리 — 허브 page__head. 레거시 .page-header 를 함께 달아 둔 화면 호환 */
.page__head h1{ margin:0; }
.page__lead{ margin-bottom:0; }

/* ── 카드 — 허브는 그림자 1단계. 레거시 hover 그림자 상승을 끈다 ─────── */
.card{ border-color:var(--line); box-shadow:var(--shadow); }
.card:hover{ box-shadow:var(--shadow); }
.card h3{ font-size:var(--fs-h3); }

/* ── 표 — table.data 를 허브 .table 문법으로 ─────────────────────── */
.table-wrap{
  border:1px solid var(--line); border-radius:var(--r-3);
  background:var(--surface); box-shadow:none;
}
.table-head{
  padding:var(--sp-3) var(--sp-4);
  background:var(--surface); border-bottom:1px solid var(--line);
}
.table-head h3{ font-size:var(--fs-h2); font-weight:700; color:var(--ink); }
table.data{ font-size:var(--fs-table); border-collapse:separate; border-spacing:0; }
table.data thead th{
  height:var(--row-h); padding:0 var(--sp-3);
  background:var(--surface-2);
  font-size:var(--fs-eyebrow); font-weight:700; color:var(--body); letter-spacing:0;
  border-bottom:1px solid var(--line-2);
}
table.data tbody td{
  height:var(--row-h); padding:var(--sp-1) var(--sp-3);
  border-bottom:1px solid var(--line); color:var(--body);
}
table.data tbody tr:hover td{ background:rgba(var(--veil),.03); }
table.data tbody tr:hover{ background:transparent; }
table.data tfoot tr{ background:var(--surface-2); }
table.data tfoot td{
  height:var(--row-h); padding:var(--sp-1) var(--sp-3);
  border-top:1px solid var(--line-3); font-size:var(--fs-table);
  font-weight:800; color:var(--ink);
}
table.data tfoot td.num{ font-size:var(--fs-table); }
table.data.data--sticky thead th{ background:var(--surface-2); }
table.data.data--sticky-col thead th:first-child{ background:var(--surface-2); }
table.data.data--sticky-col tbody td:first-child{ background:var(--surface); }
table.data.data--sticky-col tbody tr:hover td:first-child{ background:var(--surface-2); }

/* ── 뱃지 → 허브 칩 (면을 채우지 않는다. 글자색만 톤) ──────────────── */
.badge{
  height:22px; padding:0 var(--sp-2);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface);
  font-size:12px; font-weight:700; color:var(--muted);
}
.badge--ok{ background:var(--surface); color:var(--success); border-color:var(--line-2); }
.badge--warn{ background:var(--surface); color:var(--warning); border-color:var(--line-2); }
.badge--danger{ background:var(--surface); color:var(--danger); border-color:var(--line-2); }
.badge--info{ background:var(--surface); color:var(--info); border-color:var(--line-2); }
.badge--neutral{ background:var(--surface); color:var(--muted); border-color:var(--line-2); }
.badge--stat{ background:var(--surface); color:var(--brand); border-color:var(--line-2); }

/* ── 버튼 — 허브에 없는 급여 변형을 허브 문법으로 ───────────────────── */
.btn{ gap:var(--sp-1); }
.btn:focus-visible{ box-shadow:none; }
.btn--secondary,.btn--dark{ background:var(--surface); border-color:var(--line-2); color:var(--body); }
.btn--secondary:hover:not(:disabled),.btn--dark:hover:not(:disabled){
  background:var(--surface); border-color:var(--line-3); color:var(--ink);
}
/* 허브는 위험 동작도 면을 칠하지 않는다 — solid 변형은 외곽선형으로 수렴 */
.btn--danger,.btn--danger-solid{ background:var(--surface); color:var(--danger); border-color:var(--danger); }
.btn--danger:hover:not(:disabled),.btn--danger-solid:hover:not(:disabled){
  background:var(--surface-2); color:var(--danger); border-color:var(--danger);
}
.btn--sm{ height:26px; padding:0 var(--sp-2); font-size:12px; line-height:1; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ── 입력 ───────────────────────────────────────────────────────── */
textarea.input{ height:auto; padding:var(--sp-2); line-height:1.6; }
.input:focus,.select:focus,.textarea:focus{ border-color:var(--brand); outline:none; }
.input:focus-visible,.select:focus-visible{ outline:2px solid var(--brand); outline-offset:0; }

/* ── 공용 다이얼로그(window.ui) → 허브 .modal 외형 ────────────────── */
.ui-modal-backdrop{ background:rgba(var(--veil),.35); backdrop-filter:none; z-index:var(--z-modal); }
.ui-modal-card{
  border:1px solid var(--line-2); border-radius:var(--r-4);
  box-shadow:var(--shadow-pop); background:var(--surface);
}
.ui-modal-head{ padding:var(--sp-4) var(--sp-4) var(--sp-2); }
.ui-modal-title{ font-size:var(--fs-h3); color:var(--ink); }
.ui-modal-body{ padding:var(--sp-2) var(--sp-4) var(--sp-4); font-size:13.5px; color:var(--body); }
.ui-modal-foot{
  padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--line); background:var(--surface);
  gap:var(--sp-2);
}
/* 톤 표시 — 원형 색 면 대신 라벨 색만 (허브 notice 규칙과 같은 자리) */
.ui-modal-icon{ width:auto; height:auto; border-radius:0; background:none; font-size:var(--fs-h3); }
.ui-modal-icon--info{ background:none; color:var(--info); }
.ui-modal-icon--warn{ background:none; color:var(--warning); }
.ui-modal-icon--danger{ background:none; color:var(--danger); }
.ui-modal-icon--success{ background:none; color:var(--success); }
.ui-form-field > label{ font-size:var(--fs-label); font-weight:700; color:var(--muted); }
.ui-form-hint{ font-size:var(--fs-caption); color:var(--faint); }
.ui-form-section{ font-size:var(--fs-label); color:var(--ink); }
.ui-form-section::after{ background:var(--line); }
.ui-form-intro{ background:none; border-top:1px solid var(--line-2); border-radius:0; padding:var(--sp-2) 0; color:var(--muted); }
.ui-roster-item{ background:var(--surface-2); border-radius:var(--r-2); }
.ui-roster-item:hover,.ui-roster-item--clickable:hover{ background:rgba(var(--veil),.05); outline:none; }
.ui-roster-pos{ background:none; border:1px solid var(--line-2); color:var(--muted); }

/* ── 안내 배너 → 허브 notice 문법 (면 대신 괘선) ──────────────────── */
.info-banner{
  background:none; border:0; border-top:1px solid var(--line-2); border-radius:0;
  padding:var(--sp-3) 0; color:var(--body);
}
.info-banner .info-banner-link{ color:var(--brand); }

/* ── 설정 탭 — 카테고리 = 서류철 탭(.sectabs), 하위 탭 = 세그먼티드 ─── */
.adm-cat-nav{
  width:auto; padding:0; gap:2px;
  background:none; border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  overflow-x:auto; scrollbar-width:none;
}
.adm-cat-nav::-webkit-scrollbar{ display:none; }
.adm-cat-btn{
  flex:none; margin-bottom:-1px; padding:var(--sp-2) var(--sp-3);
  border:1px solid transparent; border-radius:var(--r-2) var(--r-2) 0 0;
  font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap;
}
.adm-cat-btn:hover{ color:var(--ink); background:rgba(var(--veil),.04); }
.adm-cat-btn.is-active{
  color:var(--ink); font-weight:700; box-shadow:none;
  border-color:var(--line-2); border-bottom-color:var(--bg); background:var(--bg);
}
.adm-tab-nav{
  display:inline-flex; flex-wrap:wrap; gap:2px; width:fit-content; max-width:100%;
  padding:2px; margin:var(--sp-2) 0 var(--sp-3);
  border:1px solid var(--line-2); border-radius:var(--r-2); background:var(--surface-2);
}
.adm-tab-btn{
  height:26px; padding:0 var(--sp-3);
  border:0; border-radius:var(--r-1); background:transparent;
  font-size:13px; font-weight:600; color:var(--muted);
}
.adm-tab-btn:hover{ color:var(--ink); border-color:transparent; }
.adm-tab-btn.is-active{ background:var(--surface); color:var(--ink); border-color:transparent; box-shadow:var(--shadow); }
.adm-modal{ background:rgba(var(--veil),.35); z-index:var(--z-modal); }

/* ── 빈 상태 · 로딩 문구 ─────────────────────────────────────────── */
.empty-state{ color:var(--muted); font-size:13px; }

/* ── 로그인 · 차단 화면 보조 ─────────────────────────────────────── */
.login .notice{ margin-top:var(--sp-4); }
.login__foot{ margin-top:var(--sp-4); font-size:var(--fs-caption); color:var(--faint); }

/* ── 첫 열 고정 셀 (B1 · 2026-10-08) ─────────────────────────────────
   퇴직 원장 · DC · 예산 · 전표 표가 `<td data--sticky-col>` 처럼 클래스가 아닌 **속성**으로
   고정을 걸어 CSS 가 한 번도 적용되지 않았다(가로 스크롤 시 성명 · 회계구분이 사라짐).
   셀 단위 클래스 `.sticky-cell` 로 정정한다. */
table.data .sticky-cell{
  position:sticky; left:0; z-index:2;
  background:var(--surface); box-shadow:1px 0 0 var(--line);
}
table.data thead .sticky-cell{ z-index:3; background:var(--surface-2); }
table.data tfoot .sticky-cell{ background:var(--surface-2); }
table.data tbody tr:hover .sticky-cell{ background:var(--surface-2); }

/* ── 줄바꿈 보정 — 허브 base 의 `overflow-wrap:anywhere` 가 좁아진 flex 칸의 짧은 라벨을
   한 글자씩 세로로 쪼갰다(실측: 급여대장 관리 «선택 0건» · «상태»). 머리줄 · 필터줄의 라벨은
   줄을 바꾸지 않고, 남는 폭은 입력칸이 양보한다. */
.table-head label,.table-head > span,.table-head .table-head-summary,
.search-bar label,.search-bar > span,.form-label{ white-space:nowrap; flex-shrink:0; overflow-wrap:normal; }

/* ── 급여대장 보기 전환 (U3) — 요약 보기는 항목별 열(.dcol)을 숨긴다 ── */
#pay-body.is-summary .dcol{ display:none; }
.table-head h3.row{ gap:var(--sp-2); flex-wrap:wrap; }

/* ── 인사정보 등록 모달 (U7) — 회색 면 상자 대신 허브 섹션 문법(윗괘선 + 번호 제목) ── */
.emp-modal-card{ max-width:820px; width:95vw; max-height:90vh; overflow-y:auto; padding:var(--sp-5); }
.emp-modal-head{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2); }
.emp-modal-head h3{ margin:0; font-size:var(--fs-h2); }
.emp-sec{ margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.emp-sec:first-child{ margin-top:0; border-top:0; padding-top:0; }
.emp-sec__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.emp-sec__title{ font-size:var(--fs-label); font-weight:700; color:var(--ink); margin-bottom:var(--sp-2); }
.emp-sec__head .emp-sec__title{ margin-bottom:0; }
.emp-sec--fold > summary{ cursor:pointer; list-style:none; }
.emp-sec--fold > summary::-webkit-details-marker{ display:none; }
.emp-sec--fold > summary::before{ content:"▸ "; color:var(--faint); }
.emp-sec--fold[open] > summary::before{ content:"▾ "; }
.emp-grid{ display:grid; gap:var(--sp-2) var(--sp-3); }
.emp-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.emp-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.emp-span-2{ grid-column:span 2; }
.emp-req{ color:var(--danger); }
.emp-hint{ font-size:var(--fs-caption); font-weight:400; color:var(--muted); margin:var(--sp-1) 0 0; }
.emp-value{ height:30px; display:flex; align-items:center; }
.emp-list{ font-size:13px; margin-top:var(--sp-2); }
.emp-result{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-top:var(--sp-2);
  padding:var(--sp-2) var(--sp-3); background:var(--surface-2); border-radius:var(--r-2); font-size:13px; }
.emp-result--grid{ display:block; }
.emp-result__title{ font-size:var(--fs-caption); font-weight:700; color:var(--muted); margin-bottom:var(--sp-1); }
.emp-result__cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-1); color:var(--body); }
.emp-inline-form{ display:grid; gap:var(--sp-2); align-items:end; margin-top:var(--sp-2); }
.emp-inline-form--leave{ grid-template-columns:150px 140px 140px 80px 1fr auto auto; }
.emp-inline-form--intsev{ grid-template-columns:140px 160px 1fr auto auto; }
.emp-modal-foot{ display:flex; gap:var(--sp-2); justify-content:flex-end; margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); }
.emp-modal-foot--split{ justify-content:space-between; }
@media (max-width:860px){
  .emp-grid--3,.emp-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .emp-inline-form--leave,.emp-inline-form--intsev{ grid-template-columns:1fr 1fr; }
}

/* ── 유틸리티 (U7) — 반복되던 인라인 style 을 토큰 기반 클래스로(tools/codemod-inline-style.mjs) ── */
.u-faint{ color:var(--faint); }
.u-muted{ color:var(--muted); }
.u-caption{ font-size:var(--fs-caption); color:var(--muted); }
.u-danger{ color:var(--danger); }
.u-ok{ color:var(--success); }
.u-warn{ color:var(--warning); }
.u-hl{ background:var(--surface-2); }
.u-m0{ margin:0; }
.u-mt2{ margin-top:var(--sp-2); }
.u-mt3{ margin-top:var(--sp-3); }
.u-mb2{ margin-bottom:var(--sp-2); }
.u-mb3{ margin-bottom:var(--sp-3); }
.u-p2{ padding:var(--sp-2); }
.u-fw600{ font-weight:600; }
.u-fs12{ font-size:12.5px; }
.u-fs13{ font-size:13px; }
.u-nowrap{ white-space:nowrap; }
.u-right{ text-align:right; }
.u-flex1{ flex:1; }
.u-scroll-x{ overflow-x:auto; }
.u-between{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2); }
.u-maxw160{ max-width:160px; }
.u-maxw180{ max-width:180px; }
.u-w64{ width:64px; }
.u-w120{ width:120px; }
.u-w140{ width:140px; }
.u-w160{ width:160px; }
.u-w100{ width:100%; }
.btn.u-btn-xs,.u-btn-xs{ height:24px; padding:0 var(--sp-2); font-size:12px; }

/* ══ 현황판 (★261012 대시보드 · 인사 현황판 재구성) ═══════════════════════════
   허브 dashboard.css 의 «그룹 = 카드 1장, 안의 위젯은 카드를 다시 두르지 않고 여백 · 1px 괘선으로 가른다»
   문법을 급여 화면에 옮긴다. 차트는 허브 ui.js(window.UI · SVG · 토큰 색). */
.bd-group{ padding:var(--sp-5); margin-bottom:var(--sp-5); }
.bd-head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
          gap:var(--sp-3); margin-bottom:var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1px solid var(--line); }
.bd-title{ margin:0; font-size:var(--fs-h2); font-weight:700; color:var(--ink); }
.bd-note{ margin:2px 0 0; font-size:var(--fs-caption); color:var(--muted); }
.bd-act{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); }
.bd-grid{ display:grid; gap:var(--sp-5) var(--sp-6); }
.bd-grid > *{ min-width:0; }
@media (min-width:1100px){
  .bd-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .bd-grid--12{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
  .bd-grid--32{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
  .bd-grid--4 > .bd-w + .bd-w{ border-left:1px solid var(--line); padding-left:var(--sp-5); }
}
@media (min-width:720px) and (max-width:1099px){
  .bd-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.bd-stack{ display:grid; gap:var(--sp-5); align-content:start; }
.bd-stack > .bd-w + .bd-w{ border-top:1px solid var(--line); padding-top:var(--sp-5); }
.bd-cap{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2);
         margin-bottom:var(--sp-3); font-size:var(--fs-h3); font-weight:700; color:var(--ink); }
.bd-cap small{ font-size:var(--fs-caption); font-weight:400; color:var(--muted); white-space:nowrap; }
.bd-foot{ margin-top:var(--sp-2); font-size:var(--fs-caption); color:var(--muted); }
.bd-empty{ padding:var(--sp-4) 0; font-size:var(--fs-caption); color:var(--muted); }
.bd-scope{ display:inline-block; margin-left:var(--sp-2); vertical-align:2px; }

/* 표 — 허브 .table 위에 현황판 전용 강조만 */
.bd-tbl{ width:100%; }
.bd-tbl td.n, .bd-tbl th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bd-tbl tr.bd-tbl__total td{ font-weight:700; color:var(--ink); border-top:1px solid var(--line-3); }
.bd-tbl tr.bd-tbl__grp td{ background:var(--surface-2); font-weight:700; color:var(--ink); }
.bd-tbl tr.bd-tbl__org td:first-child{ font-weight:600; color:var(--ink); }
.bd-tbl td.bd-tbl__team{ padding-left:calc(var(--sp-3) + var(--sp-4)); color:var(--body); }
.bd-tbl .bd-sub{ margin-left:var(--sp-1); font-size:var(--fs-caption); font-weight:400; color:var(--muted); }
.bd-tbl tbody tr[data-open]{ cursor:pointer; }
.bd-tbl tbody tr[data-open]:hover td{ background:var(--surface-2); }

/* 숫자 버튼 — 명단 팝업. 밑줄 파랑 링크가 아니라 표 숫자 그대로, 올리면 밑줄 */
.bd-link{ padding:0; border:0; background:none; font:inherit; color:inherit; cursor:pointer;
          font-variant-numeric:tabular-nums; }
.bd-link:hover, .bd-link:focus-visible{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* 구성 목록(도넛 옆) — 색칩 · 이름 · 인원 · 비율 */
.bd-kv{ display:grid; gap:var(--sp-1); margin:0; padding:0; list-style:none; }
.bd-kv li{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--sp-2);
           font-size:var(--fs-table); color:var(--body); }
.bd-kv .bd-kv__sw{ width:9px; height:9px; border-radius:2px; }
.bd-kv .bd-kv__n{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.bd-kv .bd-kv__p{ min-width:3.2em; text-align:right; font-size:var(--fs-caption); color:var(--muted); font-variant-numeric:tabular-nums; }
.bd-donut{ display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); align-items:center; gap:var(--sp-4); }
.bd-donut .chart--donut{ max-width:150px; }

/* 목록 줄(휴직 등) — 줄 전체가 버튼 */
.bd-li{ display:flex; width:100%; align-items:flex-start; justify-content:space-between; gap:var(--sp-3);
        padding:var(--sp-2) 0; border:0; border-bottom:1px solid var(--line); background:none;
        font:inherit; text-align:left; color:var(--body); cursor:pointer; }
.bd-li:last-child{ border-bottom:0; }
.bd-li:hover .bd-li__name{ text-decoration:underline; text-underline-offset:3px; }
.bd-li__name{ font-weight:700; color:var(--ink); }
.bd-li__meta{ display:block; margin-top:2px; font-size:var(--fs-caption); color:var(--muted); }
.bd-li__val{ flex:none; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }

/* 레일 칸 안 미니 막대 */
.rail__cell .chart--mini{ display:block; width:100%; height:48px; margin-top:var(--sp-2); }
.bd-sw{ display:inline-block; width:9px; height:9px; margin-right:var(--sp-1); border-radius:2px; vertical-align:0; }
/* 4칸 그리드의 좁은 위젯에서는 도넛 위 · 목록 아래로 쌓는다(옆에 두면 이름이 세로로 쪼개진다) */
@media (min-width:1100px){
  .bd-grid--4 .bd-donut{ grid-template-columns:1fr; justify-items:center; }
  .bd-grid--4 .bd-donut .bd-kv{ width:100%; }
  .bd-grid--4 .bd-donut .chart--donut{ max-width:132px; }
}
.bd-kv li > span:nth-child(2), .bd-kv li > .bd-link{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }