/* ═══════════════════════════════════════════════════════════════════
   차트·경영진 화면 공용 스타일 (v7.0.2 §13)

   색 규칙
     · 값 하나를 여러 항목에 걸쳐 보는 차트는 **한 가지 색**(--viz-mark)만 씁니다.
     · 구성비처럼 항목이 서로 다른 것일 때만 검증된 4색(--viz-k1~k4)을 씁니다.
       (명도·채도·색각이상 대비·배경 대비 검사를 모두 통과한 조합)
     · 숫자·이름은 항상 글자색입니다 — 계열색을 글자에 입히지 않습니다.
   ═══════════════════════════════════════════════════════════════════ */
.exec-root {
  --line: #dce5ed; --sub: #667085; --ink: #333333; --title: #102d4b;
  --soft: #f7f9fb; --head: #f0f4f7; --sect: #EDF5F7; --bg: #FBFCFD;
  /* v7.2 : 카드 바탕을 토큰으로 뽑았습니다 — 흰색을 코드에 박아 두면
     어두운 화면에서 «흰 카드 위 흰 글자» 가 됩니다. */
  --card: #ffffff;
  --go: #087f6f; --hold: #8b6a15; --stop: #9b3b3b; --mute: #98a5b2;
  --warnbg: #fdf1e7; --warnbar: #e0a878; --warnink: #8a5624;

  /* 데이터 마크 — 브랜드 파랑을 데이터용으로 진하게 (배경 대비 3:1 이상) */
  --viz-mark: #2F6C93;
  --viz-mark-soft: #E4EDF3;
  /* 구성비 6색 (검증 통과 : 명도·채도·CVD·대비 전부 PASS) */
  --viz-k1: #1C6FAE; --viz-k2: #C25E2E; --viz-k3: #0E8E6B;
  --viz-k4: #8A3F6B; --viz-k5: #8A7A16; --viz-k6: #0F87A0;
  --viz-grid: #eef2f6;

  /* v7.2 : 기간 비교 «이전 구간» — 같은 색조의 **연한 단계**입니다.
     «지금 vs 이전» 은 순서가 있는 값이므로 색조를 하나 더 만들지 않고
     한 색조의 밝기 단계로 씁니다 (D-16 과 같은 판단 · 검증 통과). */
  /* v8.0.9 : «지난 구간» 은 회색 — 이번(파랑)과 색조부터 다르게 (예전 연한 파랑은 구분이 안 됨) */
  --gb-prev: #A3ADB8;

  /* ════════ v7.1 §8 : 의미를 가진 색 (semantic palette) ════════
     담당자 지시 — "무작정 화려하게 말고 **뜻이 있는** 색으로. 화면이 달라도
     같은 뜻은 같은 색이어야 하고, 색이 유일한 정보원이면 안 된다."

     ① 채용 단계(지원→서류→면접→최종선발→입사)는 **순서가 있는** 값입니다.
        지시서 예시는 «파랑→남색→보라→주황→초록» 이었지만, 실제로 검증해 보니
        파랑·남색·보라는 **색각이상에서 서로 구분되지 않았습니다**
        (adjacent ΔE 4.5~5.6 · 기준 8). 눈으로 고르지 않고 스크립트로 확인한 결과입니다.
        그래서 순서가 있는 값의 정석대로 **한 색조의 밝기 단계(ordinal ramp)** 를 씁니다.
        → 검증 : «Lightness monotone · Adjacent ΔL · Light-end contrast · Single hue» 전부 PASS
        → 근거 파일 : release/v7.1.0/PALETTE_VALIDATION.txt
        단계 이름·숫자를 **항상 함께** 적으므로 색이 유일한 정보원이 아닙니다.
     ② 상태(진행·확인필요·완료·문제)는 서로 다른 것이라 **범주색**을 씁니다.
     ③ 구성비(도넛·누적막대)는 검증된 6색을 순서대로 씁니다. */
  /* ══ v8.0.9 : 단계 색을 **서로 다른 색조(범주색)** 로 바꿨습니다 ══
     담당자 지시 (2026-10-08) "조회자 화면 색이 여전히 푸른 계열뿐이라 차트에서 구분이 안 간다 ·
                              다양한 색으로 구분이 잘되게"
     예전(v7.1~v8.0.8)은 한 색조의 밝기 단계라 이웃 단계가 비슷해 보였습니다.
     이제 6단계가 모두 다른 색조이며, dataviz 검증 스크립트로 이웃 색각이상 구분 · 일반 구분 ·
     명도 · 채도 · 바탕 대비를 밝은/어두운 화면 각각 확인했습니다 (release/v8.0.9/PALETTE_VALIDATION.txt).
     단계 이름 · 숫자는 언제나 함께 적습니다 (색 단독 금지). */
  --st-apply: #2F6FB0;      /* 지원 접수     · 파랑 */
  --st-screen: #D07A2E;     /* 서류검토 완료 · 주황 */
  --st-interview: #14967E;  /* 면접 실시     · 청록 */
  --st-final: #8B5CC4;      /* 최종 선발     · 보라 */
  --st-join: #B58A12;       /* 입사일 확정   · 황토 */
  --st-joined: #B5476B;     /* 입사 완료     · 장미 */

  --sv-go: #2C6FA0;         /* 진행      */
  --sv-warn: #B5761B;       /* 확인 필요 */
  --sv-done: #0E8E6B;       /* 완료      */
  --sv-stop: #B23A3A;       /* 문제      */
}

/* 어두운 화면에서도 그대로 읽히도록 (v7.1 §8·§20)
   ─────────────────────────────────────────────────────────────
   이 제품은 지금 **밝은 화면 한 벌**로 운영합니다 (기존 시각 언어 유지 ·
   담당자 선호 «다크모드 우선 디자인 지양»). 그래서 OS 설정만으로 색이 바뀌지 않게
   `[data-theme="dark"]` 이 **명시적으로 붙었을 때만** 적용합니다.
   값은 어두운 배경(#161b21) 기준으로 따로 검증했습니다 — 밝은 색을 그냥 뒤집지
   않았습니다 (뒤집으면 대비·채도 기준을 벗어납니다). */
[data-theme="dark"] .exec-root {
  --line: #2b3540; --sub: #9aa7b4; --ink: #e6ebf0; --title: #f1f5f8;
  --soft: #1b222a; --head: #202a34; --sect: #1c2630; --bg: #12171d;
  --card: #171e26;
  /* 카드 사이로 밝은 바탕이 비치지 않게 분석 영역 자체도 칠합니다.
     ※ 전역 셸(머리말·좌측 메뉴 등 ds_base.css)은 아직 밝은 화면 한 벌입니다 —
        제품에 다크 모드 전환 스위치가 없기 때문입니다 (v7.2 범위 밖).
        여기서 보장하는 것은 «분석·차트 영역이 어두운 화면에서도 읽힌다» 입니다. */
  background: var(--bg);
  color: var(--ink);
  --viz-grid: #263039;
  --gb-prev: #5C6773;
  --viz-mark: #5B9BC9; --viz-mark-soft: #22303c;
  --viz-k1: #3A8CCC; --viz-k2: #C9714A; --viz-k3: #159B75;
  --viz-k4: #A45A90; --viz-k5: #9A8A2E; --viz-k6: #2295AA;
  --st-apply: #4580C2; --st-screen: #C26E28; --st-interview: #1C9C84;
  --st-final: #9469D0; --st-join: #AD841A; --st-joined: #C85D85;
  --sv-go: #4E90C4; --sv-warn: #B98526; --sv-done: #2AA882; --sv-stop: #B04A55;
}

/* ── 카드 ── */
.ex-card2 { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
            padding: 17px 19px; }
.ex-card2 > h4 { margin: 0 0 3px; font-size: 13.5px; font-weight: 800;
                 color: var(--title); letter-spacing: -.01em; }
.ex-card2 > .cap { font-size: 11.5px; color: var(--sub); margin-bottom: 13px;
                   line-height: 1.6; }
.ex-grid2 { display: grid; gap: 13px; }
@media (min-width: 900px) { .ex-2col { grid-template-columns: 1fr 1fr; }
                            .ex-3col { grid-template-columns: repeat(3, 1fr); } }

/* ── KPI ── */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
           gap: 11px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 13px;
       padding: 14px 16px; }
.kpi .v { font-size: 25px; font-weight: 800; color: var(--title);
          letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 11.5px; font-weight: 700; color: var(--sub); margin-left: 3px; }
.kpi .l { font-size: 11.5px; color: var(--sub); margin-top: 3px; line-height: 1.5; }
.kpi .n { font-size: 10.5px; color: var(--mute); margin-top: 4px; }
.kpi.hi { background: var(--sect); border-color: #cfe2ea; }
.kpi.warn { background: var(--warnbg); border-color: #f0d7c2; }
.kpi.warn .v, .kpi.warn .l { color: var(--warnink); }
.kpi .none { font-size: 14px; font-weight: 700; color: var(--mute); }

/* ── 차트 공통 ── */
/* 막대 위에 숫자를 적을 자리(머리 공간)를 남깁니다 — 값 표시가 잘리지 않도록 */
.viz-svg { position: absolute; left: 0; right: 0; top: 20px; bottom: 0; width: 100%;
           height: calc(100% - 20px); }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.viz-bar { fill: var(--viz-mark); rx: 0.6; }
.viz-line { fill: none; stroke: var(--viz-mark); stroke-width: 2;
            stroke-linejoin: round; stroke-linecap: round; }
.viz-plot { position: relative; }
.viz-hit { position: absolute; left: 0; right: 0; top: 20px; bottom: 0;
           display: flex; align-items: flex-end; }
.viz-cell { position: relative; display: flex; flex-direction: column; align-items: center;
            justify-content: flex-end; height: 100%; text-decoration: none;
            color: inherit; padding-bottom: 2px; }
.viz-cell .v { font-size: 11px; font-weight: 800; color: var(--title);
               font-variant-numeric: tabular-nums; position: absolute; top: -17px;
               white-space: nowrap; }
.viz-cell .l { font-size: 10.5px; color: var(--sub); font-weight: 700;
               position: absolute; bottom: -19px; white-space: nowrap;
               max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.viz-cell:hover { background: rgba(47, 108, 147, .07); }
.viz-cell.dot::after { content: ""; position: absolute; width: 9px; height: 9px;
                       border-radius: 50%; background: var(--viz-mark);
                       border: 2px solid var(--card); }
.viz-plot { margin-bottom: 22px; }

/* 가로 막대 */
.viz-hbar .row { display: grid; grid-template-columns: 108px 1fr 84px; gap: 10px;
                 align-items: center; padding: 5px 4px; border-radius: 7px;
                 text-decoration: none; color: inherit; }
.viz-hbar .row:hover { background: var(--soft); }
.viz-hbar .nm { font-size: 12px; font-weight: 700; color: var(--ink);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viz-hbar .track { height: 15px; background: var(--viz-mark-soft); border-radius: 4px;
                   overflow: hidden; }
.viz-hbar .track i { display: block; height: 100%; background: var(--viz-mark);
                     border-radius: 0 4px 4px 0; min-width: 2px; }
.viz-hbar .vl { font-size: 12px; font-weight: 800; color: var(--title); text-align: right;
                font-variant-numeric: tabular-nums; }

/* 도넛 */
.viz-donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.viz-donut .ring { width: 124px; height: 124px; flex: none; }
.viz-donut .seg.s1 { stroke: var(--viz-k1); } .viz-donut .seg.s2 { stroke: var(--viz-k2); }
.viz-donut .seg.s3 { stroke: var(--viz-k3); } .viz-donut .seg.s4 { stroke: var(--viz-k4); }
.viz-donut .seg.s5 { stroke: var(--viz-k5); } .viz-donut .seg.s6 { stroke: var(--viz-k6); }
.viz-donut .legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 190px; }
.viz-donut .legend li { display: flex; align-items: center; gap: 8px; font-size: 12px;
                        padding: 5px 0; border-bottom: 1px solid #f1f4f8; }
.viz-donut .legend li:last-child { border-bottom: 0; }
.viz-donut .legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.viz-donut .legend .k1 { background: var(--viz-k1); } .viz-donut .legend .k2 { background: var(--viz-k2); }
.viz-donut .legend .k3 { background: var(--viz-k3); } .viz-donut .legend .k4 { background: var(--viz-k4); }
.viz-donut .legend .k5 { background: var(--viz-k5); } .viz-donut .legend .k6 { background: var(--viz-k6); }
.viz-donut .legend .nm { color: var(--ink); font-weight: 700; }
.viz-donut .legend b { margin-left: auto; color: var(--title);
                       font-variant-numeric: tabular-nums; }
.viz-donut .legend .pc { color: var(--sub); font-size: 11px; width: 44px; text-align: right; }

/* 점 그래프 */
.viz-scatter { position: relative; border-left: 1px solid var(--line);
               border-bottom: 1px solid var(--line); margin: 0 34px 26px 44px; }
.viz-scatter .pt { position: absolute; width: 9px; height: 9px; border-radius: 50%;
                   background: var(--viz-mark); border: 2px solid var(--card);
                   transform: translate(-50%, 50%); opacity: .82; }
.viz-scatter .pt:hover { opacity: 1; width: 13px; height: 13px; z-index: 2; }
.viz-scatter .ax { position: absolute; font-size: 10.5px; color: var(--mute);
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz-scatter .x0 { left: 0; bottom: -18px; } .viz-scatter .x1 { right: 0; bottom: -18px; }
.viz-scatter .y0 { left: -42px; bottom: -6px; } .viz-scatter .y1 { left: -42px; top: -6px; }
.viz-axnote { font-size: 11px; color: var(--sub); margin-top: 4px; }

.viz-empty { padding: 26px 14px; text-align: center; font-size: 12.5px;
             color: var(--mute); background: var(--soft); border: 1px dashed var(--line);
             border-radius: 10px; }
.viz-table { margin-top: 10px; }
.viz-table summary { font-size: 11.5px; color: var(--sub); cursor: pointer;
                     padding: 4px 0; }
.viz-table table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.viz-table th, .viz-table td { font-size: 11.5px; padding: 5px 7px;
                               border-bottom: 1px solid #f1f4f8; text-align: left; }
.viz-table th { color: var(--sub); font-weight: 700; }
.viz-table .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ── 표 (지원자 목록) ── */
.ex-tbl { width: 100%; border-collapse: collapse; background: var(--card);
          border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.ex-tbl th { background: var(--head); font-size: 11.5px; font-weight: 800;
             color: var(--title); padding: 10px 11px; text-align: left;
             white-space: nowrap; border-bottom: 1px solid var(--line); }
.ex-tbl th a { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; }
.ex-tbl th .ar { color: var(--mute); font-size: 10px; }
.ex-tbl th a.on .ar { color: var(--viz-mark); }
.ex-tbl td { padding: 9px 11px; font-size: 12.5px; color: var(--ink);
             border-bottom: 1px solid #eef2f6; }
.ex-tbl tr:last-child td { border-bottom: 0; }
.ex-tbl tbody tr:hover td { background: var(--soft); }
.ex-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.ex-tbl a.who { color: var(--title); font-weight: 800; text-decoration: none; }
.ex-tbl a.who:hover { text-decoration: underline; }
.ex-tag { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 11px;
          white-space: nowrap; display: inline-block; background: #eef2f6; color: #5c6a78; }
.ex-tag.go { background: #e8f5f1; color: var(--go); }
.ex-tag.hold { background: #faf3e2; color: var(--hold); }
.ex-tag.stop { background: #f7ecec; color: var(--stop); }
/* v7.7.5 : worklist.dday_badge 가 쓰는 두 가지 — «여유 있음»(info) · «미정»(mute) */
.ex-tag.info { background: #eaf1fa; color: var(--primary, #2F5FA8); }
.ex-tag.mute { background: #f3f5f7; color: var(--sub, #667085); }
.ex-tag.warn { background: var(--warnbg); color: var(--warnink); }

/* ── 파이프라인 (누르면 내려갑니다) ── */
.pipe { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }   /* v8.0.9 : 입사완료 칸 추가 → 7칸 */
@media (max-width: 720px) { .pipe { grid-template-columns: repeat(4, 1fr); row-gap: 15px; } }
.pipe a { position: relative; padding-top: 15px; text-decoration: none; color: inherit;
          border-radius: 9px; padding-bottom: 6px; }
.pipe a::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 3px;
                  background: #e6ecf1; border-radius: 2px; }
.pipe a.on::before { background: var(--viz-mark); }
.pipe a.sel { background: var(--sect); box-shadow: inset 0 0 0 1px #bfd8e4; }
.pipe a:hover { background: var(--soft); }
.pipe .v { font-size: 22px; font-weight: 800; color: var(--title); letter-spacing: -.02em;
           padding-left: 7px; font-variant-numeric: tabular-nums; }
.pipe .v small { font-size: 11px; font-weight: 700; color: var(--sub); margin-left: 2px; }
.pipe .l { font-size: 11.5px; color: var(--sub); font-weight: 700; padding-left: 7px;
           margin-top: 1px; }
.pipe a.off .v { color: var(--mute); }

/* ── 확인 필요 ── */
.attn { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.attn a, .attn div.item { display: block; background: var(--warnbg); border: 1px solid #f0d7c2;
           border-left: 3px solid var(--warnbar); border-radius: 10px; padding: 11px 13px;
           text-decoration: none; color: var(--warnink); }
.attn a:hover { background: #fbe6d6; }
.attn .n { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.attn .n small { font-size: 11px; font-weight: 700; margin-left: 3px; }
.attn .t { font-size: 12.5px; font-weight: 800; margin-top: 1px; }
.attn .d { font-size: 11px; margin-top: 3px; opacity: .85; line-height: 1.55; }
.attn .ok { background: #eef7f4; border-color: #cde7df; border-left-color: var(--go);
            color: var(--go); }

/* ── 조회 조건 ── */
.ex-filter { background: var(--card); border: 1px solid var(--line); border-radius: 13px;
             padding: 13px 15px; display: flex; gap: 9px; flex-wrap: wrap;
             align-items: flex-end; }
.ex-filter label { display: block; font-size: 11px; font-weight: 700; color: var(--sub);
                   margin-bottom: 4px; }
.ex-filter select, .ex-filter input { font-family: inherit; font-size: 12.5px;
        padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
        background: var(--card); color: var(--ink); min-width: 108px; }
.ex-chipbar { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-chip { font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px;
           border: 1px solid var(--line); background: var(--card); color: var(--sub);
           text-decoration: none; }
.ex-chip.on { background: var(--viz-mark); border-color: var(--viz-mark); color: #fff; }
.ex-chip:hover { border-color: var(--viz-mark); }
.ex-sec { margin: 22px 0 11px; display: flex; align-items: baseline; gap: 11px;
          flex-wrap: wrap; }
.ex-sec h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--title);
             letter-spacing: -.02em; }
.ex-sec .cap { font-size: 11.5px; color: var(--sub); }


/* ═══════════════════ v7.1 새 차트 ═══════════════════
   색은 «뜻» 을 나르고, 숫자·이름은 **항상 함께** 적습니다 (색 단독 금지). */

/* 단계 색 — 화면이 달라도 같은 뜻은 같은 색입니다 */
.sc-apply { background: var(--st-apply); }
.sc-screen { background: var(--st-screen); }
.sc-interview { background: var(--st-interview); }
.sc-final { background: var(--st-final); }
.sc-join { background: var(--st-join); }
.sc-joined { background: var(--st-joined); }

/* ── v7.8 : 막대 위 숫자의 **글자 대비** (WCAG AA 4.5:1) ──────────────────
   깔때기 막대는 단계 색 위에 «123명» 을 12px 굵게 얹습니다. 12px 굵은 글자는
   WCAG 의 «큰 글자» 가 아니므로 4.5:1 이 필요한데, 램프의 **밝은 쪽 단계**에서는
   흰 글자가 2.1:1 밖에 되지 않아 숫자가 잘 보이지 않았습니다.

   팔레트 값은 **하나도 바꾸지 않았습니다** (v7.1 에서 정한 색 그대로입니다).
   밝은 단계에서만 글자를 어둡게 바꿉니다 — 측정값은 release/(버전)/PALETTE_VALIDATION.txt.
     밝은 화면 : apply 8.2:1 · screen 5.8:1 (어두운 글자) · interview 이후 흰 글자
     어두운 화면 : apply · screen · interview 까지 어두운 글자
   글자색은 여기 한 곳에만 적습니다 (tools_palette_check.py 가 같은 값을 잽니다). */
.viz-funnel .bar { --bar-ink: #fff; color: var(--bar-ink); }
/* v8.0.9 범주색 : 밝은 바탕색(주황 · 청록 · 황토)은 어두운 글자 · 나머지는 흰 글자 (모두 4.5:1 이상) */
.viz-funnel .bar.sc-screen,
.viz-funnel .bar.sc-interview,
.viz-funnel .bar.sc-join { --bar-ink: #0A1016; }
[data-theme="dark"] .exec-root .viz-funnel .bar { --bar-ink: #0A1016; }

/* ── 누적 세로막대 (월별 파이프라인 구성 · C-3) ── */
.viz-stack { display: flex; align-items: flex-end; gap: 6px; height: 210px;
             padding-top: 20px; }
.viz-stack .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
                  height: 100%; text-decoration: none; color: inherit; position: relative;
                  min-width: 0; }
.viz-stack .col .tot { position: absolute; top: -17px; left: 0; right: 0; text-align: center;
                       font-size: 11px; font-weight: 800; color: var(--title);
                       font-variant-numeric: tabular-nums; }
.viz-stack .col .bars { display: flex; flex-direction: column-reverse; justify-content: flex-start;
                        height: 100%; border-radius: 4px; overflow: hidden; }
.viz-stack .seg { min-height: 0; }
/* 조각 사이 2px 틈 — 붙어 있으면 어디서 끊기는지 안 보입니다 */
.viz-stack .seg + .seg { box-shadow: 0 -2px 0 0 var(--card); }
.viz-stack .col .l { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center;
                     font-size: 10.5px; color: var(--sub); font-weight: 700;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-stack .col:hover .bars { outline: 2px solid var(--viz-mark); outline-offset: 1px; }
.viz-stackwrap { margin-bottom: 26px; }

/* 범례 (누적막대·다중선 공용) */
.viz-legend { display: flex; gap: 13px; flex-wrap: wrap; margin: 0 0 10px; padding: 0;
              list-style: none; }
.viz-legend li { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
                 color: var(--ink); font-weight: 700; }
.viz-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ── 퍼널 (C-5) ── */
.viz-funnel { display: flex; flex-direction: column; gap: 3px; }
.viz-funnel .st { display: grid; grid-template-columns: 92px 1fr 116px; gap: 11px;
                  align-items: center; text-decoration: none; color: inherit;
                  padding: 5px 4px; border-radius: 8px; }
.viz-funnel .st:hover { background: var(--soft); }
.viz-funnel .nm { font-size: 12px; font-weight: 800; color: var(--title); }
.viz-funnel .bar { height: 26px; border-radius: 5px; display: flex; align-items: center;
                   padding-left: 9px; color: var(--bar-ink, #fff); font-size: 12px; font-weight: 800;
                   font-variant-numeric: tabular-nums; min-width: 30px;
                   box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.viz-funnel .side { font-size: 11.5px; color: var(--sub); text-align: right;
                    font-variant-numeric: tabular-nums; line-height: 1.5; }
.viz-funnel .side b { color: var(--title); }
.viz-funnel .drop { display: grid; grid-template-columns: 92px 1fr 116px; gap: 11px;
                    font-size: 11px; color: var(--warnink); }
.viz-funnel .drop span:nth-child(2) { border-left: 2px dashed var(--warnbar);
                                      margin-left: 12px; padding: 2px 0 2px 10px; }

/* ── 매트릭스 / 히트맵 (C-11) ── */
.viz-matrix { width: 100%; border-collapse: separate; border-spacing: 3px; }
.viz-matrix th { font-size: 11px; font-weight: 800; color: var(--sub); padding: 3px 6px;
                 text-align: center; white-space: nowrap; }
.viz-matrix th.rowhead, .viz-matrix td.rowhead { text-align: left; font-size: 12px;
                 font-weight: 800; color: var(--title); white-space: nowrap;
                 padding-right: 9px; }
.viz-matrix td.cell { position: relative; text-align: center; border-radius: 7px;
                 padding: 9px 6px; font-size: 13px; font-weight: 800;
                 font-variant-numeric: tabular-nums; color: var(--title);
                 background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.viz-matrix td.cell .tint { position: absolute; inset: 0; display: block; }
.viz-matrix td.cell a, .viz-matrix td.cell span { position: relative; z-index: 1; }
.viz-matrix td.cell a { color: inherit; text-decoration: none; display: block; }
.viz-matrix td.cell.zero .tint { display: none; }
/* v8.0.9 : 칸 색은 단계 색을 옅게(최대 55%) 깔고 숫자는 언제나 진한 글자 — 어떤 단계 색에서도 읽힘 */
.viz-matrix td.cell.on { color: var(--title); }
.viz-matrix td.cell.zero { color: var(--mute); background: var(--soft); font-weight: 700; }
.viz-matrix td.cell:hover { outline: 2px solid var(--viz-mark); }
.viz-matrix .tot { font-size: 12px; font-weight: 800; color: var(--sub);
                   text-align: right; font-variant-numeric: tabular-nums; }

/* ── 전환율 막대 (C-8) ── */
.viz-rate { display: flex; flex-direction: column; gap: 9px; }
.viz-rate .r { display: grid; grid-template-columns: 132px 1fr 108px; gap: 11px;
               align-items: center; }
.viz-rate .nm { font-size: 12px; font-weight: 700; color: var(--ink); }
.viz-rate .track { height: 17px; background: var(--viz-mark-soft); border-radius: 5px;
                   overflow: hidden; }
.viz-rate .track i { display: block; height: 100%; background: var(--sv-go);
                     border-radius: 0 5px 5px 0; }
.viz-rate .vl { font-size: 12.5px; font-weight: 800; color: var(--title); text-align: right;
                font-variant-numeric: tabular-nums; }
.viz-rate .vl small { font-weight: 700; color: var(--sub); font-size: 11px; margin-left: 4px; }
.viz-rate .none { color: var(--mute); font-weight: 700; font-size: 11.5px; }

/* ── 다중 꺾은선 (C-2) ── */
.viz-ml .s1 { stroke: var(--st-apply); } .viz-ml .s2 { stroke: var(--st-interview); }
.viz-ml .s3 { stroke: var(--st-final); } .viz-ml .s4 { stroke: var(--st-join); }
.viz-ml .s5 { stroke: var(--st-joined); }
.viz-ml .dot1 { fill: var(--st-apply); } .viz-ml .dot2 { fill: var(--st-interview); }
.viz-ml .dot3 { fill: var(--st-final); } .viz-ml .dot4 { fill: var(--st-join); }

.viz-cell.mlpt { justify-content: flex-start; }
.viz-ml .mldot { position: absolute; width: 8px; height: 8px; border-radius: 50%;
                 border: 2px solid var(--card); }
.viz-ml .mldot.d1 { background: var(--st-apply); }
.viz-ml .mldot.d2 { background: var(--st-interview); }
.viz-ml .mldot.d3 { background: var(--st-final); }
.viz-ml .mldot.d4 { background: var(--st-join); }
.viz-ml .mldot.d5 { background: var(--st-joined); }

/* ── 작업 대기열 (오늘의 업무) ── */
.wq-row { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: start; }
.wq-pri { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 11px;
          text-align: center; white-space: nowrap; }
.wq-pri.p1 { background: #f7ecec; color: var(--stop); }
.wq-pri.p2 { background: #faf3e2; color: var(--hold); }
.wq-pri.p3 { background: #eef2f6; color: #5c6a78; }
.wq-pri.p4 { background: var(--soft); color: var(--mute); }


/* ═══════════════════ v7.2 새 부품 ═══════════════════
   원칙은 그대로입니다 — **색은 보조, 숫자·이름·방향글자가 본체.**
   새 색조를 늘리지 않았습니다 (§5 «색을 더 넣어 다양성을 내지 마라»).
     · 스파크라인·히트맵 : 이미 있는 표시색·단계색을 그대로 씁니다.
     · 기간 비교 막대   : 이미 있는 두 값(--st-apply · --viz-mark)의
       **밝기 단계**입니다. 순서가 있는 값이므로 정석대로 한 색조를 씁니다. */

/* ── 스파크라인 (§1-F) ── */
.viz-spark { display: inline-flex; align-items: flex-end; gap: 4px; width: 100%;
             max-width: 132px; margin-top: 7px; }
.viz-spark svg { flex: 1; height: 100%; overflow: visible; }
.viz-spark polyline { fill: none; stroke: var(--viz-mark); stroke-width: 2;
                      stroke-linejoin: round; stroke-linecap: round;
                      vector-effect: non-scaling-stroke; }
.viz-spark circle { fill: var(--viz-mark); stroke: var(--card); stroke-width: 1.6; }
.viz-spark .dirmark { font-size: 11px; font-weight: 800; line-height: 1; padding-bottom: 2px;
                      color: var(--sub); }
.viz-spark.up .dirmark { color: var(--sv-go); }
.viz-spark.down .dirmark { color: var(--sv-stop); }
.viz-sparkcap { display: block; font-size: 10.5px; color: var(--mute); margin-top: 3px;
                font-variant-numeric: tabular-nums; }
.viz-sparknone { display: block; font-size: 10.5px; color: var(--mute); margin-top: 7px;
                 line-height: 1.5; }

/* ── 기간 비교 (§1-G) ── */
.viz-cmp { display: grid; gap: 8px;
           grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.viz-cmp .c { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px;
              background: var(--card); }
.viz-cmp .nm { display: block; font-size: 11.5px; font-weight: 700; color: var(--sub); }
.viz-cmp .cur { display: block; font-size: 22px; font-weight: 800; color: var(--title);
                letter-spacing: -.02em; margin-top: 2px;
                font-variant-numeric: tabular-nums; }
.viz-cmp .cur small { font-size: 11px; font-weight: 700; color: var(--sub); margin-left: 3px; }
.viz-cmp .d { display: flex; align-items: baseline; gap: 5px; font-size: 12px;
              font-weight: 800; margin-top: 3px; color: var(--sub);
              font-variant-numeric: tabular-nums; }
.viz-cmp .d.up { color: var(--sv-go); }
.viz-cmp .d.down { color: var(--sv-stop); }
.viz-cmp .d i { font-style: normal; font-weight: 700; font-size: 11.5px; }
.viz-cmp .d i.none { color: var(--mute); font-weight: 700; }
.viz-cmp .prev { display: block; font-size: 10.5px; color: var(--mute); margin-top: 4px; }

/* ── 묶은 막대 : 지금 vs 이전 (§1-A) ──
   두 막대는 «다른 종류» 가 아니라 **같은 것의 다른 시점**입니다. 그래서
   색조를 하나 더 만들지 않고 한 색조의 두 단계(연함=이전 · 진함=지금)를 씁니다.
   막대마다 숫자를 직접 적으므로 색을 못 읽어도 값이 그대로 보입니다. */
.viz-gbar { display: flex; align-items: flex-end; gap: 14px; padding-top: 18px; }
.viz-gbar .grp { flex: 1; height: 100%; display: flex; flex-direction: column;
                 justify-content: flex-end; position: relative; min-width: 0; }
.viz-gbar .bars { display: flex; align-items: flex-end; gap: 4px; height: 100%; }
.viz-gbar .b { flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.viz-gbar .b em { position: absolute; top: -15px; left: 0; right: 0; text-align: center;
                  font-style: normal; font-size: 10.5px; font-weight: 800;
                  color: var(--title); font-variant-numeric: tabular-nums; }
.viz-gbar .l { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center;
               font-size: 10.5px; font-weight: 700; color: var(--sub);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-gbar { margin-bottom: 26px; }
.gb1 { background: var(--viz-mark); }
.gb2 { background: var(--gb-prev); }

/* ── 히트맵 눈금 (§1-E) ── */
.viz-heatkey { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
               margin-bottom: 10px; font-size: 11px; color: var(--sub); }
.viz-heatkey .ramp { display: inline-flex; gap: 2px; }
.viz-heatkey .ramp i { width: 19px; height: 11px; border-radius: 2px;
                       background: var(--st-interview); display: block; }
.viz-heatkey .t b { color: var(--ink); }

/* ── 100% 누적 (§1-D) ── */
.viz-stack.share .col .tot { color: var(--sub); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   v8.0.8 경영진 «채용데이터 분석» — 시안 A(보고서 흐름) + B(대시보드 색) 혼합
   담당자 확정 : "A와 B를 혼합해서 최적의 디자인으로 · 색은 시안B의 다양성 ·
                 경영진에게 다양한 정보로 인사이트를"

   색은 **뜻**으로만 씁니다 (같은 뜻 = 같은 색 · 화면 전체에서 일관)
     구역(도메인) : 인력 = 파랑 · 처우 = 청록 · 인건비 = 호박
     직군(범주)   : 임원 · 일반직 · 연구직 · 기능직 — 4색 검증 통과
     상태         : 확인 필요 = 주황 + «⚠ 확인 필요» 글자 · 미등록 = 회색 빗금 + «미등록» 글자
   검증 근거 : release/v8.0.8/PALETTE_VALIDATION.txt (밝은 · 어두운 화면 각각 ALL PASS)
   숫자 · 이름은 언제나 글자색 — 계열색은 옆의 표식(점 · 띠)에만.
   ═══════════════════════════════════════════════════════════════════ */
.exec-root {
  --xa-exec: #B5476B; --xa-gen: #2F5FA8; --xa-res: #0E9488; --xa-func: #7A6EC2;
  --xa-people: #2F5FA8; --xa-pay: #0E9488; --xa-cost: #C27A12; --xa-cost2: #E0A84A;
  --xa-people-ink: #1F4E8C; --xa-pay-ink: #0B6F66; --xa-cost-ink: #8A5608;
  --xa-chk: #C0602D; --xa-chk-ink: #9A4A1F; --xa-chk-bg: #FFF8F3; --xa-chk-line: #EDCDB8;
  --xa-none-ink: #4E5A6A; --xa-none-a: #F1F3F6; --xa-none-b: #E2E7EE; --xa-none-line: #D8DFE8;
  --xa-cost-hatch-a: #F4E6CC; --xa-cost-hatch-b: #E3C994;
  --xa-heat1: #EEF3FA; --xa-heat2: #D6E3F5; --xa-heat3: #B4CBEA;
}
[data-theme="dark"] .exec-root {
  --xa-exec: #C45E80; --xa-gen: #4477D0; --xa-res: #1C9C8F; --xa-func: #8577D4;
  --xa-people: #4477D0; --xa-pay: #1C9C8F; --xa-cost: #C2851F; --xa-cost2: #8A6420;
  --xa-people-ink: #9DBBEA; --xa-pay-ink: #7FD3C8; --xa-cost-ink: #E6B868;
  --xa-chk: #D07443; --xa-chk-ink: #F0A57A; --xa-chk-bg: #2A1F19; --xa-chk-line: #5A3A28;
  --xa-none-ink: #B4BFCB; --xa-none-a: #222b35; --xa-none-b: #2c3743; --xa-none-line: #3a4552;
  --xa-cost-hatch-a: #3a2e1a; --xa-cost-hatch-b: #5a4520;
  --xa-heat1: #1d2a3a; --xa-heat2: #22395a; --xa-heat3: #2c4a78;
}

/* ── 머리 · 범례 ── */
.xa-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 18px; }
.xa-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 800; }
.xa-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--sub); }
.xa-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.xa-sw.people, .xa-sw.k-일반직 { background: var(--xa-people); }
.xa-sw.pay { background: var(--xa-pay); }
.xa-sw.cost, .xa-sw.j-JOINED { background: var(--xa-cost); }
.xa-sw.j-PLANNED { background: var(--xa-cost2); }
.xa-sw.j-UNDATED { background: repeating-linear-gradient(135deg, var(--xa-cost-hatch-b) 0 3px, var(--xa-cost-hatch-a) 3px 5px); }
.xa-sw.chk { background: var(--xa-chk); }
.xa-sw.none { background: repeating-linear-gradient(135deg, var(--xa-none-b) 0 3px, var(--xa-none-a) 3px 5px); border: 1px solid var(--xa-none-line); }
.xa-sw.k-임원 { background: var(--xa-exec); }
.xa-sw.k-연구직 { background: var(--xa-res); }
.xa-sw.k-기능직 { background: var(--xa-func); }

/* ── 조회 조건 ── */
.xa-filter { margin-top: 14px; }
.xa-filter .grow { flex: 1 1 auto; }
.xa-filter details { flex-basis: 100%; }
.xa-filter details > summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--sub); }
.xa-filter details[open] > div { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; align-items: flex-end; }
.xa-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.xa-seg a { padding: 7px 11px; font-size: 12px; font-weight: 700; color: var(--sub); text-decoration: none; background: var(--card); white-space: nowrap; }
.xa-seg a + a { border-left: 1px solid var(--line); }
.xa-seg a.on { background: var(--title); color: var(--card); }
.xa-scope { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12px; color: var(--sub); margin: 10px 2px 0; }
.xa-scope b { color: var(--ink); }

/* ── 요약 브리프 ── */
.xa-brief { margin-top: 14px; background: var(--sect); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.xa-brief h4 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--title); }
.xa-brief ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--ink); }

/* ── 구역 머리 ── */
.xa-sec { margin: 26px 0 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
          padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.xa-sec h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--title); display: inline-flex; align-items: center; gap: 8px; }
.xa-sec h3 .no { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; align-items: center; justify-content: center;
                 font-size: 12px; color: var(--card); background: var(--title); }
.xa-sec.people h3 .no { background: var(--xa-people); }
.xa-sec.pay h3 .no { background: var(--xa-pay); }
.xa-sec.cost h3 .no { background: var(--xa-cost); }
.xa-sec.chk h3 .no { background: var(--xa-chk); }
.xa-sec .cap { font-size: 12px; color: var(--sub); }

/* ── 카드 · 타일 ── */
.xa-grid { display: grid; gap: 13px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .xa-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                            .xa-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                            .xa-grid.c21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.xa-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.xa-card.people { border-top: 3px solid var(--xa-people); }
.xa-card.pay { border-top: 3px solid var(--xa-pay); }
.xa-card.cost { border-top: 3px solid var(--xa-cost); }
.xa-card.chk { border-top: 3px solid var(--xa-chk); }
.xa-ct { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 10px; }
.xa-ct h4 { margin: 0; font-size: 14px; font-weight: 800; color: var(--title); }
.xa-meta { font-size: 11.5px; color: var(--sub); line-height: 1.6; }
.xa-tiles { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.xa-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; min-width: 0; }
.xa-tile.people { border-top: 3px solid var(--xa-people); }
.xa-tile.pay { border-top: 3px solid var(--xa-pay); }
.xa-tile.cost { border-top: 3px solid var(--xa-cost); }
.xa-tile.chk { border-top: 3px solid var(--xa-chk); background: var(--xa-chk-bg); }
.xa-tile .l { font-size: 12px; font-weight: 700; color: var(--sub); }
.xa-tile .v { font-size: 26px; font-weight: 800; color: var(--title); line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; overflow-wrap: anywhere; }
.xa-tile .v small { font-size: 12px; font-weight: 700; color: var(--sub); margin-left: 2px; }
.xa-tile.chk .v { color: var(--xa-chk-ink); }
.xa-tile .s { font-size: 11.5px; color: var(--sub); margin-top: 3px; line-height: 1.55; }
.xa-tile .none { font-size: 15px; font-weight: 800; color: var(--mute); line-height: 1.9; }
.xa-tile a.go { font-size: 11.5px; font-weight: 700; text-decoration: none; }

/* ── 상태 표식 (색 + 글자) ── */
.xa-chk { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--xa-chk-ink);
          background: var(--xa-chk-bg); border: 1px solid var(--xa-chk-line); border-radius: 4px; padding: 0 6px; line-height: 18px; white-space: nowrap; }
.xa-none { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; color: var(--xa-none-ink);
           background: repeating-linear-gradient(135deg, var(--xa-none-a) 0 4px, var(--xa-none-b) 4px 6px);
           border: 1px solid var(--xa-none-line); border-radius: 4px; padding: 0 6px; line-height: 18px; white-space: nowrap; }
.xa-fix { font-size: 11px; font-weight: 700; color: var(--sub); white-space: nowrap; }

/* ── 구성 띠 (직군 구성 · 인건비 구성) ── */
.xa-band { display: flex; gap: 2px; height: 30px; border-radius: 6px; overflow: hidden; }
.xa-band > a, .xa-band > span { display: flex; align-items: center; min-width: 4px; text-decoration: none; }
.xa-band.thin { height: 14px; }
.xa-band .k-임원 { background: var(--xa-exec); } .xa-band .k-일반직 { background: var(--xa-gen); }
.xa-band .k-연구직 { background: var(--xa-res); } .xa-band .k-기능직 { background: var(--xa-func); }
.xa-band .k-other { background: repeating-linear-gradient(135deg, var(--xa-none-b) 0 4px, var(--xa-none-a) 4px 6px); }
.xa-band .j-JOINED { background: var(--xa-cost); } .xa-band .j-PLANNED { background: var(--xa-cost2); }
.xa-band .j-UNDATED { background: repeating-linear-gradient(135deg, var(--xa-cost-hatch-b) 0 4px, var(--xa-cost-hatch-a) 4px 6px); }
.xa-keys { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 12px; }
.xa-keys > a, .xa-keys > div { display: block; text-decoration: none; color: var(--ink); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.xa-keys > a:hover { background: var(--soft); }
.xa-keys .k { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--title); }
.xa-keys .n { font-size: 18px; font-weight: 800; color: var(--title); font-variant-numeric: tabular-nums; }
.xa-keys .n small { font-size: 11.5px; color: var(--sub); font-weight: 700; margin-left: 2px; }

/* ── 직급 · 직위 표 ── */
.xa-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.xa-tbl th { text-align: left; font-size: 11.5px; font-weight: 800; color: var(--sub); padding: 8px 10px;
             background: var(--head); border-bottom: 1px solid var(--line); white-space: nowrap; }
.xa-tbl th.n, .xa-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.xa-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); overflow-wrap: anywhere; }
.xa-tbl tr.g td { background: var(--soft); font-weight: 800; color: var(--title); }
.xa-tbl tr.tot td { font-weight: 800; color: var(--title); border-top: 2px solid var(--line); }
.xa-tbl td.nm { padding-left: 26px; }
.xa-tbl td:first-child { white-space: nowrap; }
.xa-tbl td a { font-weight: 700; text-decoration: none; }
.xa-tbl td a:hover { text-decoration: underline; }
.xa-tbl .bar { display: inline-block; vertical-align: middle; height: 8px; border-radius: 0 3px 3px 0; margin-right: 6px; min-width: 2px; }
.xa-tbl .bar.k-임원 { background: var(--xa-exec); } .xa-tbl .bar.k-일반직 { background: var(--xa-gen); }
.xa-tbl .bar.k-연구직 { background: var(--xa-res); } .xa-tbl .bar.k-기능직 { background: var(--xa-func); }
.xa-tbl .bar.k-other { background: var(--mute); }
.xa-tbl td.heat1 { background: var(--xa-heat1); } .xa-tbl td.heat2 { background: var(--xa-heat2); } .xa-tbl td.heat3 { background: var(--xa-heat3); }
.xa-tbl .det { font-size: 11.5px; color: var(--sub); }
.xa-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── 처우 범위 막대 ── */
.xa-range { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.xa-rrow { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) 84px; gap: 4px 12px; align-items: center;
           grid-template-areas: "nm tr vl"; }
.xa-rrow > .nm { grid-area: nm; } .xa-rrow > .tr, .xa-rrow > .xa-axis { grid-area: tr; } .xa-rrow > .vl { grid-area: vl; }
.xa-range .nm { min-width: 0; overflow-wrap: anywhere; }
.xa-range .tr { position: relative; height: 14px; background: var(--xa-none-a); border-radius: 7px; }
.xa-range .tr i.band { position: absolute; top: 3px; bottom: 3px; background: var(--xa-pay); border-radius: 4px; opacity: .55; min-width: 3px; }
.xa-range .tr i.avg { position: absolute; top: -2px; width: 3px; height: 18px; background: var(--xa-pay); border-radius: 2px; margin-left: -1px; }
.xa-range .vl { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xa-range .vl small { display: block; font-size: 11px; font-weight: 600; color: var(--sub); }

/* ── 확인할 사항 카드 ── */
.xa-checks { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.xa-check { border: 1px solid var(--xa-chk-line); background: var(--xa-chk-bg); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.xa-check.none { border-color: var(--xa-none-line); background: var(--soft); }
.xa-check .n { font-size: 22px; font-weight: 800; color: var(--title); margin-top: 4px; font-variant-numeric: tabular-nums; }
.xa-check .cause { font-size: 11px; font-weight: 700; color: var(--sub); }
.xa-check .d { font-size: 12px; color: var(--ink); margin-top: 4px; line-height: 1.6; }
.xa-check .smp { font-size: 11.5px; color: var(--sub); margin-top: 4px; overflow-wrap: anywhere; }

.xa-empty { padding: 18px; text-align: center; color: var(--sub); font-size: 13px; background: var(--soft); border-radius: 10px; line-height: 1.7; }
.xa-foot { margin: 24px 0 8px; font-size: 11.5px; color: var(--sub); line-height: 1.8; }
.xa-more { display: flex; justify-content: flex-end; margin-top: 10px; }
.xa-more a { font-size: 12px; font-weight: 700; text-decoration: none; }

@media (max-width: 640px) {
  .xa-tile .v { font-size: 22px; }
  .xa-rrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm vl" "tr tr"; }
  .xa-rrow.ax > span { display: none; }
  .xa-legend { font-size: 11.5px; }
}
@media print {
  .xa-filter, .xa-noprint { display: none !important; }
  .xa-card, .xa-tile, .xa-check, .xa-brief { break-inside: avoid; }
  .xa-sec { break-after: avoid; }
  .xa-band, .xa-sw, .xa-range .tr i, .xa-tbl td[class^="heat"], .xa-tbl .bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .xa-grid.c2, .xa-grid.c3, .xa-grid.c21 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.xa-people { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.xa-people .who-cell { display: inline-flex; align-items: center; gap: 6px; }
.xa-tbl .who-cell { display: inline-flex; align-items: center; gap: 8px; }
.xa-keys > a > span, .xa-keys > div > span { display: block; }
.xa-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); font-variant-numeric: tabular-nums; }
/* 구역 색 — 같은 차트 부품이라도 «인건비» 구역의 막대는 인건비 색 */
.xa-card.cost .viz-hbar .track i { background: var(--xa-cost); }
.xa-card.pay .viz-scatter .pt { background: var(--xa-pay); }
.xa-card.people .viz-bar { fill: var(--xa-people); }
/* v8.0.8 : 휴대폰 폭에서 깔때기 막대가 너무 좁아 «16명» 이 두 줄로 깨지던 것 */
.viz-funnel .bar { white-space: nowrap; }
@media (max-width: 640px) {
  .viz-funnel .st, .viz-funnel .drop { grid-template-columns: 64px minmax(0, 1fr) 78px; gap: 8px; }
  .viz-funnel .bar { min-width: 44px; padding-left: 6px; }
  .viz-funnel .side { font-size: 11px; }
}

/* v8.0.9 : 꺾은선도 단계 이름으로 색을 고릅니다 (그리는 순서가 바뀌어도 같은 단계 = 같은 색) */
.viz-ml .ln-apply { stroke: var(--st-apply); } .viz-ml .ln-screen { stroke: var(--st-screen); }
.viz-ml .ln-interview { stroke: var(--st-interview); } .viz-ml .ln-final { stroke: var(--st-final); }
.viz-ml .ln-join { stroke: var(--st-join); } .viz-ml .ln-joined { stroke: var(--st-joined); }
.viz-matrix th .thdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }

/* ═══ v8.0.9 면접 진행현황 (eb-*) — 경영 요약 · 지원자별 처리할 일 · 사업부별 채용 현황 ═══ */
.eb-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.eb-up { color: var(--go); } .eb-down { color: var(--stop); }
a.eb-link { text-decoration: none; color: inherit; display: block; }
a.eb-link:hover { box-shadow: 0 0 0 2px var(--xa-chk-line); }
.eb-groups { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.eb-group { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; border-left-width: 4px; }
.eb-group.g-now { border-left-color: var(--xa-chk); }
.eb-group.g-soon { border-left-color: var(--xa-people); }
.eb-group.g-wait { border-left-color: var(--mute); }
.eb-group .h { font-size: 13px; color: var(--title); margin-bottom: 6px; }
.eb-group .h span { color: var(--sub); font-weight: 700; margin-left: 4px; }
.eb-group .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.eb-chip { font-size: 11.5px; font-weight: 700; text-decoration: none; padding: 3px 9px; border-radius: 999px;
           border: 1px solid var(--line); color: var(--ink); background: var(--soft); white-space: nowrap; }
.eb-chip b { margin-left: 2px; }
.eb-chip.sel, .eb-chip:hover { border-color: var(--title); }
.eb-tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 4px; line-height: 19px; white-space: nowrap; }
.eb-tag.g-now { background: var(--xa-chk-bg); color: var(--xa-chk-ink); border: 1px solid var(--xa-chk-line); }
.eb-tag.g-soon { background: var(--xa-heat1); color: var(--xa-people-ink); border: 1px solid var(--xa-heat2); }
.eb-tag.g-wait { background: var(--soft); color: var(--sub); border: 1px solid var(--line); }
.eb-items { display: flex; flex-wrap: wrap; gap: 4px; }
.eb-sub { font-size: 11.5px; color: var(--sub); }
.eb-act td { vertical-align: middle; }
.eb-act tr.eb-more { display: none; }
.ex-card2:has(details.eb-moreline[open]) .eb-act tr.eb-more { display: table-row; }
.eb-moreline { padding: 10px 14px; border-top: 1px solid var(--line); }
.eb-act .who-cell { white-space: nowrap; }
/* 좁은 화면(휴대폰) : 한 사람 = 한 묶음 — 이름 칸이 한 글자씩 접히던 문제 (390px 화면으로 확인) */
@media (max-width: 720px) {
  .eb-act thead { display: none; }
  .eb-act, .eb-act tbody { display: block; width: 100%; }
  .eb-act tr { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding: 11px 14px;
               border-bottom: 1px solid var(--line); }
  .eb-act td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; }
  .eb-act td:nth-child(1) { grid-column: 1; }
  .eb-act td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: center; font-size: 12px; color: var(--sub); font-weight: 700; }
  .eb-act td:nth-child(2), .eb-act td:nth-child(4), .eb-act td:nth-child(5) { grid-column: 1 / -1; }
  .eb-act td:nth-child(2) .eb-sub { display: inline; margin-left: 6px; }
  .eb-act td.eb-nodate { display: none; }
  .eb-act tr.eb-more { display: none; }
  .ex-card2:has(details.eb-moreline[open]) .eb-act tr.eb-more { display: grid; }
}
.eb-moreline summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--title); }
.eb-site td a { font-weight: 800; text-decoration: none; }
.eb-site .eb-bar { height: 4px; background: var(--soft); border-radius: 2px; margin-top: 4px; max-width: 140px; }
.eb-site .eb-bar i { display: block; height: 100%; background: var(--st-apply); border-radius: 2px; }
.eb-site tr.eb-tot td { font-weight: 800; background: var(--soft); }
.eb-site th .thdot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
/* 단일 값 막대도 «무엇을 센 것인지» 에 맞는 색 — 입사 = 입사 완료 색 · 경로 = 서류 색(주황) */
.eb-joinbar .viz-bar { fill: var(--st-join); }
.eb-srcbar .viz-hbar .track i { background: var(--st-screen); }
/* 진행 단계 (지원 · 서류 · 면접 · 처우결정 · 최종판정 · 입사확정) 윗줄 색 */
.pipe a.p-apply.on::before { background: var(--st-apply); }
.pipe a.p-doc.on::before { background: var(--st-screen); }
.pipe a.p-interview.on::before { background: var(--st-interview); }
.pipe a.p-comp.on::before { background: var(--sub); }
.pipe a.p-decision.on::before { background: var(--st-final); }
.pipe a.p-onboard.on::before { background: var(--st-join); }
.pipe a.p-joined.on::before { background: var(--st-joined); }   /* v8.0.9 입사완료 */
.viz-rate .track i.sc-screen { background: var(--st-screen); } .viz-rate .track i.sc-interview { background: var(--st-interview); }
.viz-rate .track i.sc-final { background: var(--st-final); } .viz-rate .track i.sc-join { background: var(--st-join); }
.viz-rate .track i.sc-joined { background: var(--st-joined); }