/* ============================================================
   조직 대시보드 (org-dashboard) — dash-samples v01-sidebar-grid 이식본
   ------------------------------------------------------------
   ★ 모든 선택자는 반드시 `.orgdash` 로 시작한다.
     빌립워크에는 뷰가 38개 넘게 한 문서에 얹히므로, 전역에 새면
     다른 뷰의 .card/.bar/.badge 가 조용히 뒤틀린다.

   ★ 빌립워크 public/css/base.css 에 이미 같은 이름·같은 뜻으로 있는 것은
     여기서 다시 정의하지 않는다(캐스케이드가 어긋난다):
       .card / .panel / .card.accent / .card.accent-soft / .card.good-card /
       .card.warn-card / .card.danger-card / .card .label / .card .value /
       .kpi-sub / .panel-head / .panel-actions / .panel h3 / .grid /
       .badge / .badge.good / .badge.warn / .badge.bad / .hint /
       .toolbar / .topbar / .table-wrap / table,th,td /
       .primary / .secondary / .ghost / .danger / .compact-action / .error
     색 토큰(--brand, --ink, --line, --panel, --soft, --good …)도 두 곳이
     완전히 같으므로 그대로 쓴다. 다크모드는 :root[data-theme="dark"] 가
     토큰을 갈아끼우므로 토큰만 쓰면 자동으로 따라온다.
   ============================================================ */

/* ---------- 이 뷰에서만 쓰는 토큰 ----------
   빌립워크 base.css 에는 색 토큰만 있고 간격/컨트롤 높이 토큰이 없다.
   전역에 추가하면 다른 뷰의 리듬까지 흔들리므로 .orgdash 안에만 만든다. */
.orgdash {
  --r: 8px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --ctl-h: 36px;
  --ctl-h-sm: 28px;

  /* org-web 온도계 원본이 참조하는 이름 → 빌립워크 토큰으로 브리지 */
  --hint: var(--muted);
  --accent: var(--brand);

  /* 단계 램프(신앙단계·전도단계 공용). 단계 수가 회마다 4~9개로 다르므로
     JS(stageColor)가 인덱스를 이 아홉 칸 위에 고르게 펴서 고른다.
     6색을 순환시키던 때는 9단계 회에서 1단계와 7단계, 2단계와 8단계가 같은
     색이 되어 앞뒤 단계를 눈으로 가를 수가 없었다.
     값은 org-web 본 화면과 리뉴얼 시안(v01)이 쓰는 램프와 같다 — 같은 수치를
     세 곳에서 보는데 색이 다르면 볼 때마다 다시 배워야 한다.
     색 자체는 여기 한 곳에서만 관리한다. */
  --stage-1: #4f46e5;
  --stage-2: #2563eb;
  --stage-3: #0ea5e9;
  --stage-4: #06b6d4;
  --stage-5: #14b8a6;
  --stage-6: #84cc16;
  --stage-7: #f59e0b;
  --stage-8: #f4622a;
  --stage-9: #e0392c;
  --temp: #f4511e;
  /* 구역온도 세 단계는 다크모드에서도 뒤집지 않는다. 모두 흰 글씨를 받는 고정 진한색이다. */
  --temp-hot: #c92a2a;
  --temp-near: #0e8f62;
  --temp-cold: #1e63b6;

  /* 스크림은 테마와 무관하게 "뒤가 어두워져야" 하므로 토큰이 반전되면 안 된다.
     그래서 반전되지 않는 고정 중립값을 별도 변수로 둔다(하드코딩 금지 규칙 준수). */
  --orgdash-scrim: rgba(15, 20, 28, 0.42);

  /* 신앙단계 진단 뷰 — 정체 구간과 활동 구간을 아예 다른 계열로 나눈다.
     같은 램프 안에서 명도만 다르게 하면 "이 단계가 문제인가 아닌가"를
     색만 보고 판단할 수 없다. 정체는 따뜻한 경고색, 활동은 차가운 색이다.
     ⚠ --stage-1~9 를 그대로 재활용하지 마라. 그 램프는 1이 남색, 9가 빨강이라
     정체 램프에 앞쪽 번호를 쓰면 '가장 정체된 단계'가 파랗게 칠해진다. */
  --sd-seg-shadow: rgba(0, 0, 0, .45);
  --sd-stall-1: var(--bad);
  --sd-stall-2: var(--stage-9);
  --sd-stall-3: var(--stage-8);
  --sd-stall-4: var(--stage-7);
  --sd-act-1: var(--stage-5);
  --sd-act-2: var(--stage-4);
  --sd-act-3: var(--stage-3);
  --sd-act-4: var(--stage-2);
  --sd-act-5: var(--good);

  font-size: calc(15px * var(--orgdash-font-scale, 1));
}

/* ============================================================
   1. 유틸 — 빌립워크 base.css 에 없는 것만, 스코프 안에서
   ============================================================ */
.orgdash .muted { color: var(--muted); }
.orgdash .num { font-variant-numeric: tabular-nums; }
.orgdash .sm { font-size: calc(12px * var(--orgdash-font-scale, 1)); }
.orgdash .hide { display: none; }
/* flex/grid 요소는 브라우저 기본 [hidden] 규칙보다 뷰 CSS가 이길 수 있어 강제로 감춘다. */
.orgdash [hidden] { display: none !important; }

/* base.css 의 .grid 는 gap 만 정한다. 열 수 유틸은 없으므로 여기서 만든다. */
.orgdash .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orgdash .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.orgdash .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 표 안에서 "0보다 크면 문제"인 숫자(구역장 미등록 수)를 눈에 띄게 한다 */
.orgdash .warn-num { color: var(--warn); font-weight: 800; }

.orgdash .legend { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12px * var(--orgdash-font-scale, 1)); color: var(--muted); }
.orgdash .lg { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* 온도 판정 클래스는 색 변수만 고르고, 각 요소가 배경/글자 중 필요한 쪽에 적용한다. */
.orgdash .is-hot { --temp-tone: var(--temp-hot); }
.orgdash .is-near { --temp-tone: var(--temp-near); }
.orgdash .is-cold { --temp-tone: var(--temp-cold); }
.orgdash .temp-dot.is-hot, .orgdash .temp-dot.is-near, .orgdash .temp-dot.is-cold,
.orgdash .rank-dot.is-hot, .orgdash .rank-dot.is-near, .orgdash .rank-dot.is-cold,
.orgdash .hm-cell.is-hot, .orgdash .hm-cell.is-near, .orgdash .hm-cell.is-cold,
.orgdash .bar > i.is-hot, .orgdash .bar > i.is-near, .orgdash .bar > i.is-cold {
  background: var(--temp-tone);
  color: #fff;
}
.orgdash .rank-val.is-hot, .orgdash .rank-val.is-near, .orgdash .rank-val.is-cold {
  color: var(--temp-tone);
}

/* ============================================================
   2. 컨트롤 — 빌립워크에는 .btn/.select/.inp 가 없다(전역 button/.ghost 만 있다).
      v01 마크업을 그대로 살리려고 같은 이름을 쓰되 스코프 안에서만 만든다.
   ============================================================ */
.orgdash .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--ctl-h); padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--ink);
  font-size: calc(14px * var(--orgdash-font-scale, 1)); font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.orgdash .btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.orgdash .btn:disabled { cursor: not-allowed; opacity: .58; }
.orgdash .btn.primary { background: var(--brand-fill); border-color: var(--brand); color: #fff; }
.orgdash .btn.primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
.orgdash .btn.sm { height: var(--ctl-h-sm); padding: 0 10px; font-size: calc(13px * var(--orgdash-font-scale, 1)); }
.orgdash .btn.icon { width: var(--ctl-h); padding: 0; }

.orgdash .select,
.orgdash .inp {
  height: var(--ctl-h); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); color: var(--ink);
  font-size: calc(14px * var(--orgdash-font-scale, 1)); outline: none; max-width: 100%;
}
/* 전역 입력 요소의 큰 기본 글씨를 스코프 안에서만 되돌린다 —
   툴바 한 줄에 버튼과 같이 놓이므로 높이·글자 크기가 어긋나면 줄이 안 맞는다. */
.orgdash .select { padding-right: 30px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.orgdash .select:disabled { opacity: .6; cursor: not-allowed; }
.orgdash .inp:focus,
.orgdash .select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent); }

/* base.css 의 .badge 는 재사용하고, 없는 색 변형 둘만 추가한다. */
.orgdash .badge.brand { background: var(--brand-soft); color: var(--brand); }
.orgdash .badge.blue  { background: var(--blue-soft);  color: var(--blue); }
.orgdash .badge.num   { font-variant-numeric: tabular-nums; }

/* ============================================================
   3. 표 — 빌립워크 전역 table 규칙 위에 v01 의 표 룩을 덮는다.
      전역은 vertical-align:top / th 대문자 변환 / 하드코딩 경계선을 쓴다.
   ============================================================ */
.orgdash .table-wrap {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  overflow-x: auto;   /* 신앙단계 교차표는 열이 11개까지 늘어난다 */
}
.orgdash table.tbl { width: 100%; border-collapse: collapse; font-size: calc(14px * var(--orgdash-font-scale, 1)); }
.orgdash table.tbl th,
.orgdash table.tbl td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
.orgdash table.tbl thead th {
  background: var(--soft); color: var(--muted);
  font-size: calc(12px * var(--orgdash-font-scale, 1)); font-weight: 800; white-space: nowrap; text-transform: none;
}
.orgdash table.tbl tbody tr:last-child td { border-bottom: 0; }
.orgdash table.tbl tbody tr:hover { background: var(--soft); }
.orgdash table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 작성자 이름에 이모지가 섞여 들어온다(예: "안경하 👆") → 폭 고정 금지, 줄바꿈 허용 */
.orgdash table.tbl td.name-cell { white-space: normal; word-break: keep-all; }

/* ---------- 진행바 ----------
   ★ 이름 충돌 주의: 빌립워크 전역 `.bar` 는 "트랙 안의 채움"(height:100%)이고
   v01 의 `.bar` 는 "트랙"이다. 뜻이 다르므로 스코프에서 v01 의미로 덮는다
   (.orgdash .bar 는 특이도가 높아 전역보다 우선한다). */
.orgdash .bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.orgdash .bar > i {
  display: block; height: 100%; border-radius: 999px; background: var(--brand);
  transition: width .5s cubic-bezier(.22, .85, .32, 1);
}

/* ============================================================
   4. 뷰 셸 — 앱 셸 안에서도 v01의 232px 사이드바 구조를 유지한다.
       높이는 포함된 영역을 따르게 해 다른 화면의 스크롤을 가로채지 않는다.
   ============================================================ */
.orgdash .orgdash-shell {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  /* 행 크기를 못 박지 않으면 행이 본문 높이까지 자라고, 사이드바 아래쪽(계정 카드)이
     overflow:hidden 에 잘린다. max-height 는 상자만 가둘 뿐 행을 가두지 못한다. */
  grid-template-rows: minmax(0, 1fr);
  height: calc(100dvh - 200px); min-height: 460px; overflow: hidden;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--r);
}

.orgdash .orgdash-side {
  display: flex; flex-direction: column;
  min-height: 0; padding: var(--sp-4); gap: var(--sp-5); overflow: hidden;
  background: var(--panel); border-right: 1px solid var(--line);
}
.orgdash .side-brand { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl-h); }
.orgdash .brand-mark { width: 28px; height: 28px; border-radius: var(--r); background: var(--brand); flex: none; }
.orgdash .brand-text { font-weight: 800; font-size: calc(15px * var(--orgdash-font-scale, 1)); letter-spacing: -.2px; }

.orgdash .side-sec { display: grid; gap: var(--sp-1); }
.orgdash .side-label { font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 800; color: var(--muted); }
.orgdash .side-select { width: 100%; }

.orgdash .side-nav {
  display: grid; gap: var(--sp-1); align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.orgdash .nav-item.btn {
  justify-content: flex-start; gap: var(--sp-3);
  height: var(--ctl-h); padding: 0 var(--sp-3); width: 100%;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  text-align: left;
}
.orgdash .nav-item.btn:hover:not(:disabled) { background: var(--soft); border-color: transparent; color: var(--ink); }
.orgdash .nav-item.btn.is-on { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.orgdash .nav-ico { width: 16px; text-align: center; flex: none; font-size: calc(13px * var(--orgdash-font-scale, 1)); line-height: 1; }
.orgdash .nav-tag {
  margin-left: auto; font-size: calc(10px * var(--orgdash-font-scale, 1)); font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 999px; background: var(--blue-soft); color: var(--blue);
}

.orgdash .side-foot { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.orgdash .me-card { display: grid; gap: var(--sp-1); }
.orgdash .me-name { font-size: calc(14px * var(--orgdash-font-scale, 1)); font-weight: 800; }
.orgdash .me-role { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.orgdash .me-scope { font-size: calc(12px * var(--orgdash-font-scale, 1)); color: var(--muted); }

.orgdash .orgdash-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.orgdash .orgdash-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  /* 세 덩이(브랜드·탭·우측 컨트롤)가 한 줄에 다 들어가면 한 줄로, 안 들어가면
     탭이 통째로 아랫줄로 내려간다.
     ⚠ 2026-09-16(점검 D-006): 여기 있던 "탭을 가로 스크롤로 밀게 두지 않는다"는 판단은
       **뒤집었다.** 아랫줄로 내려가도 그 줄 안에서 여섯 탭이 안 들어가는 폭이 있고,
       그때는 스크롤이 없어 뒤쪽 탭이 그냥 잘려 나갔다(500px 에서 섭자확인 전부).
       잘린 채 못 가는 것보다 밀어서 가는 편이 낫다 — .top-nav 를 보라. */
  flex-wrap: wrap; row-gap: var(--sp-2);
  /* 높이를 못 박으면 우측 컨트롤(회 선택·범위 배지·글자 크기·새로고침)이 줄 밖으로
     튀어나와 탭 위에 겹친다. 최소 높이만 주고 내용에 맞춰 늘어나게 둔다. */
  min-height: 60px; flex: none; padding: var(--sp-2) var(--sp-6);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.orgdash .crumb { font-size: calc(17px * var(--orgdash-font-scale, 1)); font-weight: 800; letter-spacing: -.2px; }
.orgdash .orgdash-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-6); }
.orgdash .content-root { width: var(--content-width, 100%); min-width: 0; }
.orgdash .view { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }

.orgdash .font-scale {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--soft);
}
.orgdash .font-scale-label {
  padding: 0 var(--sp-2); color: var(--muted);
  font-size: calc(12px * var(--orgdash-font-scale, 1)); font-weight: 800; white-space: nowrap;
}
.orgdash .font-scale-btn.btn { padding: 0 var(--sp-2); background: transparent; border-color: transparent; }
.orgdash .font-scale-btn.btn:hover:not(:disabled) { color: var(--brand); background: var(--panel); }
.orgdash .font-scale-btn.btn.is-on { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }

.orgdash .orgdash-theme-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  height: var(--ctl-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--soft); color: var(--ink);
  font-size: calc(13px * var(--orgdash-font-scale, 1)); font-weight: 700;
  white-space: nowrap; flex-shrink: 1;
}
.orgdash .orgdash-theme-btn:hover:not(:disabled) {
  color: var(--brand); background: var(--panel); border-color: var(--line);
}

/* 범위 안내 줄 — "무엇을 보고 있는지"를 늘 한 줄로 알려 준다.
   ★ 소속을 화면에서 **크게 한 번** 적는 유일한 자리다(2026-09-01 지시).
   패널마다 배지로 또 붙이지 마라 — 같은 글자가 여섯 번 겹쳐 숫자를 밀어냈다. */
.orgdash-scope {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3);
  font-size: calc(13px * var(--orgdash-font-scale, 1)); color: var(--muted);
  /* 아래 첫 판과의 간격 — 판끼리의 간격(.view gap)과 같게. 없으면 제목이 판 테두리에 붙어 보인다(2026-10-06). */
  margin-bottom: var(--sp-4);
}
.orgdash-scope b { color: var(--ink); }
.orgdash-scope-title {
  margin: 0; color: var(--ink); font-weight: 800; letter-spacing: -0.01em;
  font-size: calc(22px * var(--orgdash-font-scale, 1)); line-height: 1.25;
}

/* 캐시된 옛 값 안내 */
.orgdash-stale {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-4); border-radius: var(--r);
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  font-size: calc(13px * var(--orgdash-font-scale, 1)); font-weight: 700;
}

/* 조회 중 안내 (2026-09-16 점검 D-013).
   회·지역을 바꾸면 셀렉트는 곧바로 새 범위인데 본문은 응답이 올 때까지 옛 숫자다.
   그 사이 옛 값을 새 범위로 읽지 않도록, 줄로 알리고 본문을 흐린다. */
.orgdash-busy {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-4); border-radius: var(--r);
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  font-size: calc(13px * var(--orgdash-font-scale, 1)); font-weight: 700;
}
/* 안내 줄 자체는 또렷하게 둔다 — .view 안쪽(본문 숫자)만 흐린다. */
.orgdash.is-busy .orgdash-scroll .view { opacity: .5; }

/* 로딩 / 오류 / 빈 상태 */
.orgdash-state {
  display: grid; gap: var(--sp-3); justify-items: center; text-align: center;
  padding: 46px var(--sp-5);
}
.orgdash-state strong { font-size: calc(16px * var(--orgdash-font-scale, 1)); }
.orgdash-state p { margin: 0; color: var(--muted); font-size: calc(13px * var(--orgdash-font-scale, 1)); line-height: 1.6; }
.orgdash-empty { padding: 30px var(--sp-4); text-align: center; color: var(--muted); font-size: calc(13px * var(--orgdash-font-scale, 1)); }
.orgdash .empty-state {
  display: grid; gap: var(--sp-1); justify-items: center; text-align: center;
  padding: var(--sp-6) var(--sp-4); background: var(--soft); border-radius: var(--r);
}
.orgdash .empty-state b { font-size: calc(14px * var(--orgdash-font-scale, 1)); font-weight: 800; }
.orgdash .empty-state.empty-compact { width: 100%; padding: var(--sp-4); }
.orgdash .empty-state.empty-grid { grid-column: 1 / -1; width: 100%; }
.orgdash .scope-empty { padding: var(--sp-4); }
.orgdash .content-root.is-no-scope .view { display: none; }

/* ============================================================
   5. 지역 조감
   ============================================================ */
.orgdash .kpis .card { display: flex; flex-direction: column; }

.orgdash .rate-cell { display: flex; align-items: center; gap: var(--sp-2); min-width: 140px; }
.orgdash .rate-cell .bar { flex: 1 1 auto; min-width: 60px; }
.orgdash .rate-cell .badge { flex: none; }

.orgdash #region-panel.is-single-region > .panel-head,
.orgdash #region-panel.is-single-region > .table-wrap { display: none; }
.orgdash #region-panel.is-single-region { padding: var(--sp-3) var(--sp-4); }
.orgdash .region-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5); min-height: var(--ctl-h);
}
.orgdash .region-strip .rs-name {
  font-size: calc(15px * var(--orgdash-font-scale, 1)); font-weight: 900; color: var(--brand);
}
.orgdash .region-strip .rs-m {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: calc(12.5px * var(--orgdash-font-scale, 1));
}
.orgdash .region-strip .rs-m i { font-style: normal; color: var(--muted); }
.orgdash .region-strip .rs-m b { font-size: calc(14px * var(--orgdash-font-scale, 1)); font-weight: 900; }
.orgdash .region-strip .rs-m em {
  font-style: normal; color: var(--muted); font-size: calc(12px * var(--orgdash-font-scale, 1));
}
.orgdash .region-strip .rs-rate {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-width: 180px; flex: 1 1 180px;
}
.orgdash .region-strip .rs-rate .bar { flex: 1 1 auto; }

.orgdash .dist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: var(--sp-3); align-items: stretch;
}
.orgdash .dcard {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4); text-align: left; width: 100%;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.orgdash .dcard:hover { border-color: color-mix(in srgb, var(--brand) 38%, transparent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.orgdash .dcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.orgdash .dcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.orgdash .dcard-name { font-size: calc(14px * var(--orgdash-font-scale, 1)); font-weight: 800; letter-spacing: -.2px; }
/* 구역장 자리는 비어 있을 수 있고 이름에 이모지가 섞인다 → 폭 고정하지 않는다 */
.orgdash .dcard-leader { font-size: calc(12px * var(--orgdash-font-scale, 1)); color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.orgdash .temp-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.orgdash .dcard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1); }
.orgdash .dstat { display: grid; gap: 3px; }
.orgdash .dstat b { font-size: calc(16px * var(--orgdash-font-scale, 1)); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); }
.orgdash .dstat span { font-size: calc(11px * var(--orgdash-font-scale, 1)); color: var(--muted); }
.orgdash .dcard-temp { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; }
.orgdash .dcard-temp .bar { flex: 1 1 auto; }
.orgdash .dcard-temp .tval { font-size: calc(12px * var(--orgdash-font-scale, 1)); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; min-width: 34px; text-align: right; }

/* ============================================================
   6. 전도현황 — 2026-10-05 전도 대시보드(evang-dashboard.css)와 같은 구성으로 다시 짬.
      단계 카드(단계 색 머리·번호·아이콘 + 타율 도넛 + 병목) · 지역/구역별 단계별 상세 표(남색 합계 줄).
   ★ 전도 대시보드는 흰 바탕 고정이지만 **이 화면은 다크모드를 따라간다** — 바탕·글자·선은 앱 토큰
     (--panel --soft --ink --muted --line …)만 쓰고, 단계 색만 아래에서 테마별로 따로 둔다.
   ★ 단계 수가 회마다 다르다(6~8단계). 개수를 고정하지 않는다(--n).
   ★ 접두는 oev-. 표 안의 짧은 이름(.grp .sub .c .adv …)은 .oev-et 안에서만 쓴다.
   ============================================================ */
.orgdash .oev-card {
  /* 단계 색(밝은 테마). 글자·선·배지에 같이 쓰므로 흰 바탕에서 읽히는 농도로 잡는다. */
  --oev-blue: #2563eb;
  --oev-green: #1f8a3b;
  --oev-orange: #c2650a;
  --oev-purple: #7a4bc4;
  --oev-teal: #0f8a90;
  --oev-navy-step: #1f3f9e;
  --oev-indigo: #4f46e5;
  --oev-slate: #5b6b82;
  --oev-navy: #1e2a5a;          /* 합계 줄 — 두 테마 모두 흰 글자를 받는 진한 남색 */
  --oev-navy-adv: #2a3a78;
  --oev-navy-low: #9a3412;
  --oev-xs: calc(12px * var(--orgdash-font-scale, 1));
  --oev-sm: calc(13px * var(--orgdash-font-scale, 1));
  --oev-md: calc(14px * var(--orgdash-font-scale, 1));
  --oev-lg: calc(16px * var(--orgdash-font-scale, 1));
  container: oev-card / inline-size;
  word-break: keep-all;
}
.orgdash:where(:root[data-theme="dark"] *) .oev-card {
  --oev-blue: #7ab0ff;
  --oev-green: #4ade80;
  --oev-orange: #fb923c;
  --oev-purple: #c4a5ff;
  --oev-teal: #2dd4bf;
  --oev-navy-step: #9db4ff;
  --oev-indigo: #a5b4fc;
  --oev-slate: #a8b3c5;
  --oev-navy: #243372;
  --oev-navy-adv: #30428c;
}
.orgdash .oev-card .tone-blue { --tone: var(--oev-blue); }
.orgdash .oev-card .tone-green { --tone: var(--oev-green); }
.orgdash .oev-card .tone-orange { --tone: var(--oev-orange); }
.orgdash .oev-card .tone-purple { --tone: var(--oev-purple); }
.orgdash .oev-card .tone-teal { --tone: var(--oev-teal); }
.orgdash .oev-card .tone-navy { --tone: var(--oev-navy-step); }
.orgdash .oev-card .tone-indigo { --tone: var(--oev-indigo); }
.orgdash .oev-card .tone-slate { --tone: var(--oev-slate); }
.orgdash .oev-card .tone-red { --tone: var(--bad); }
.orgdash .oev-ico { width: 20px; height: 20px; flex: none; color: var(--tone, var(--muted)); vertical-align: middle; }
/* 번호 배지 글자는 바탕(--panel)색 — 밝은 테마는 흰 글자, 다크는 밝은 단계 색 위 어두운 글자. */
.orgdash .oev-bn {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 4px;
  background: var(--tone, var(--muted)); color: var(--panel);
  font-size: var(--oev-xs); font-weight: 800; line-height: 1; flex: none;
}
/* 머리줄(제목 + 기간·엑셀·보기 단추)은 좁으면 다음 줄로 넘긴다 — 단추가 패널 밖으로 밀려나지 않게. */
.orgdash .oev-card > .panel-head { flex-wrap: wrap; row-gap: var(--sp-2); }
.orgdash .oev-seg { display: inline-flex; }
.orgdash .oev-seg .btn { border-radius: 0; }
.orgdash .oev-seg .btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.orgdash .oev-seg .btn:last-child { border-radius: 0 var(--r) var(--r) 0; margin-left: -1px; }
.orgdash .oev-seg .btn.is-on { position: relative; z-index: 1; background: var(--brand-fill); border-color: var(--brand); color: #fff; }

/* ── 단계 카드 ── */
/* 전도 대시보드(.evd-flow)와 같은 배치(2026-10-06): 카드 수(--n)만큼 한 줄에 똑같은 폭으로 놓는다 — auto-fit 이면
   폭이 조금만 모자라도 마지막 탈락 카드 혼자 다음 줄로 떨어졌다. 좁아지면 아래 컨테이너 쿼리가 4·3·2열로 줄인다. */
.orgdash .oev-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: var(--sp-3); }
.orgdash .oev-scard {
  container: oev-scard / inline-size;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.orgdash .oev-scard[data-orgdash-evang-stepcard] { cursor: pointer; }
.orgdash .oev-scard[data-orgdash-evang-stepcard]:hover { border-color: var(--tone); }
.orgdash .oev-scard.is-open { border-color: var(--tone); box-shadow: inset 0 0 0 1px var(--tone); }
.orgdash .oev-scard:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.orgdash .oev-shead { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; min-width: 0; }
.orgdash .oev-shead .oev-ico { width: 22px; height: 22px; }
.orgdash .oev-shead b { color: var(--tone); font-size: var(--oev-lg); font-weight: 800; line-height: 1.3; min-width: 0; }
.orgdash .oev-shead small { margin-left: auto; color: var(--muted); font-size: var(--oev-xs); white-space: nowrap; }
.orgdash .oev-scard.is-drop .oev-shead { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
@container oev-scard (max-width: 150px) {
  .orgdash .oev-shead { gap: 4px; padding-left: 4px; padding-right: 4px; }
  .orgdash .oev-shead .oev-ico { display: none; }
}
.orgdash .oev-sadv {
  --ring: var(--tone);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 8px; padding: 4px 6px; min-height: 58px; border-radius: 8px;
  background: color-mix(in srgb, var(--tone) 8%, var(--panel)); min-width: 0;
}
.orgdash .oev-ring { position: relative; flex: none; width: 50px; height: 50px; }
.orgdash .oev-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.orgdash .oev-ring .trk { fill: none; stroke: var(--track); stroke-width: 4.2; }
.orgdash .oev-ring .val { fill: none; stroke: var(--ring); stroke-width: 4.2; stroke-linecap: round; }
.orgdash .oev-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ring);
}
.orgdash .oev-ring b small { font-size: 10.5px; font-weight: 700; margin: 2px 0 0 0.5px; }
.orgdash .oev-sadv-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.orgdash .oev-sadv-txt span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; font-size: var(--oev-sm); font-weight: 700; color: var(--ink); line-height: 1.35; }
.orgdash .oev-sadv-txt em { font-style: normal; font-size: var(--oev-xs); color: var(--muted); line-height: 1.35; }
.orgdash .oev-sadv.is-none { --ring: var(--muted); background: var(--soft); }
.orgdash .oev-sadv.is-none .oev-ring b { font-weight: 600; }
.orgdash .oev-sadv.is-none .oev-sadv-txt span { color: var(--muted); }
.orgdash .oev-sadv.is-low { --ring: var(--warn); background: var(--warn-soft); }
.orgdash .oev-pill {
  font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--warn); color: var(--panel);
  font-size: calc(11.5px * var(--orgdash-font-scale, 1)); font-weight: 800; line-height: 18px; white-space: nowrap;
}
.orgdash .oev-arrow { position: absolute; left: calc(var(--sp-3) * -1 - 1px); top: 64px; width: 14px; height: 18px; display: grid; place-items: center; color: var(--muted); font-size: 10px; z-index: 1; }
.orgdash .oev-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; padding: 8px 10px 0; text-align: center; }
.orgdash .oev-sgrid > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.orgdash .oev-sgrid span { font-size: var(--oev-xs); color: var(--muted); line-height: 1.4; white-space: nowrap; }
.orgdash .oev-sgrid b { font-size: var(--oev-lg); font-weight: 800; line-height: 1.45; white-space: nowrap; color: var(--ink); }
.orgdash .oev-sgrid b.rate { color: var(--tone); }
.orgdash .oev-sgrid b.zero { color: var(--muted); font-weight: 600; opacity: .7; }
@container oev-scard (max-width: 132px) {
  .orgdash .oev-sgrid b { font-size: var(--oev-md); letter-spacing: -0.03em; }
  .orgdash .oev-sgrid { padding-left: 4px; padding-right: 4px; gap: 2px; }
}
.orgdash .oev-sbar { display: block; height: 6px; margin: 8px 10px 12px; border-radius: 999px; background: var(--track); overflow: hidden; }
.orgdash .oev-sbar i { display: block; height: 100%; background: var(--tone); border-radius: 999px; }
/* 「상세」 펼침(2026-10-06 — 전도 대시보드 .evd-smore/.evd-sdet 와 같은 모양). 신규(오늘)·누적·탈락·보유. */
.orgdash .oev-smore { display: flex; align-items: center; justify-content: center; gap: 4px; margin: -4px 10px 8px; padding: 2px 0; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: var(--oev-xs); cursor: pointer; min-height: 0; }
.orgdash .oev-smore:hover { color: var(--tone); background: var(--soft); }
.orgdash .oev-smore:focus-visible { outline: 2px solid var(--tone); outline-offset: 1px; }
.orgdash .oev-sdet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; margin: 0 8px 10px; padding: 8px; border-radius: 8px; background: var(--soft); text-align: center; }
.orgdash .oev-sdet[hidden] { display: none; }
.orgdash .oev-sdet > div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.orgdash .oev-sdet > div.wide { grid-column: 1 / -1; }
.orgdash .oev-sdet dt { font-size: var(--oev-xs); color: var(--muted); line-height: 1.4; white-space: nowrap; }
.orgdash .oev-sdet dd { margin: 0; font-size: var(--oev-lg); font-weight: 800; line-height: 1.4; color: var(--ink); font-variant-numeric: tabular-nums; }
.orgdash .oev-sdet dd.drop { color: var(--bad); }
.orgdash .oev-sdet dd.zero { color: var(--muted); font-weight: 600; opacity: .7; }
/* 이 화면에만 있는 지역별(구역별) 비교 막대 여는 단추 — 펼친 상세 아래에만 나온다. */
.orgdash .oev-scmp { margin: -2px 8px 10px; padding: 3px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font: inherit; font-size: var(--oev-xs); cursor: pointer; min-height: 0; }
.orgdash .oev-scmp[hidden] { display: none; }
.orgdash .oev-scmp:hover, .orgdash .oev-scmp.is-on { border-color: var(--tone); color: var(--tone); }
/* 판 머리의 번호 배지(전도 대시보드 .evd-no 와 같은 모양). 제목 안에 넣어 한 덩어리로 왼쪽에 붙인다 — 머리줄이 양끝 정렬이라 따로 두면 제목이 가운데로 밀린다. */
.orgdash .oev-card > .panel-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.orgdash .oev-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--oev-navy); color: #fff; font-size: var(--oev-sm); font-weight: 800; flex: none; }
.orgdash .oev-scard.is-drop { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: var(--bad-soft); }
.orgdash .oev-dropval { display: flex; align-items: baseline; justify-content: center; gap: 3px; padding: 6px 0 2px; color: var(--bad); }
.orgdash .oev-dropval strong { font-size: calc(32px * var(--orgdash-font-scale, 1)); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.orgdash .oev-dropval small { font-size: var(--oev-sm); color: var(--muted); }
.orgdash .oev-droplines { display: flex; flex-direction: column; gap: 1px; padding: 0 10px 10px; font-size: var(--oev-sm); color: var(--muted); line-height: 1.5; }
.orgdash .oev-droplines div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; }
.orgdash .oev-droplines b { color: var(--ink); font-weight: 700; }

/* ── 지역/구역별 단계별 상세 표 ── */
.orgdash .oev-twrap { border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; overflow-y: hidden; background: var(--panel); }
.orgdash table.oev-et { border-collapse: separate; border-spacing: 0; width: 100%; margin: 0; font-size: var(--oev-md); white-space: normal; }
.orgdash .oev-et th,
.orgdash .oev-et td {
  font-size: inherit; text-transform: none; padding: 3px 5px; height: 34px; line-height: 1.25;
  border: 0; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle;
  background: var(--panel); color: var(--ink); font-variant-numeric: tabular-nums;
}
/* 숫자 줄 맞춤(2026-10-07): 한 줄 안의 큰 숫자를 모두 같은 글줄(baseline)에 놓는다 — 누적(아래 달성률)·타율(아래 분자/분모)처럼
   두 줄인 칸이 섞여도 첫 줄 숫자끼리 나란하다. 칸 너비도 종류별로 고르게 잡는다. */
.orgdash .oev-et tbody th,
.orgdash .oev-et tbody td,
.orgdash .oev-et tfoot th,
.orgdash .oev-et tfoot td { vertical-align: baseline; padding-top: 6px; padding-bottom: 5px; }
.orgdash .oev-et tbody td.num,
.orgdash .oev-et tfoot td.num { min-width: 30px; }
/* 숫자는 칸 가운데(2026-10-07 사용자 — 머리글도 같이 가운데). 이름 칸(th)은 왼쪽 그대로. */
.orgdash .oev-et tbody td,
.orgdash .oev-et tfoot td,
.orgdash .oev-et thead tr.sub2 th { text-align: center; }
.orgdash .oev-et td.c { min-width: 44px; }
.orgdash .oev-et td.adv { min-width: 46px; }
.orgdash .oev-et thead th { color: var(--muted); font-weight: 700; text-align: center; font-size: var(--oev-xs); background: var(--soft); }
.orgdash .oev-et thead .corner { background: var(--oev-navy); color: #fff; font-size: var(--oev-sm); font-weight: 800; min-width: 118px; }
.orgdash .oev-et thead .ogh { white-space: normal; min-width: 52px; max-width: 76px; border-left: 1px solid var(--line); line-height: 1.25; }
.orgdash .oev-et thead .sth {
  height: 38px; color: var(--tone); font-size: var(--oev-md); font-weight: 800;
  border-left: 1px solid var(--line); border-bottom: 2px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 10%, var(--panel));
}
.orgdash .oev-et thead .sth .in { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 5px; }
.orgdash .oev-et thead .sth .oev-ico { width: 17px; height: 17px; }
.orgdash .oev-et thead .sth .oev-bn { min-width: 18px; height: 18px; }
.orgdash .oev-et thead tr.sub2 th { white-space: nowrap; text-align: center; background: color-mix(in srgb, var(--tone, var(--panel)) 4%, var(--panel)); }
.orgdash .oev-et .gs { border-left: 1px solid var(--line); }
.orgdash .oev-et th.ath { color: var(--blue); }
.orgdash .oev-et th.dth { color: var(--bad); }
.orgdash .oev-et td.og { border-left: 1px solid var(--line); white-space: nowrap; }
.orgdash .oev-et td.goal { font-weight: 700; white-space: nowrap; }
.orgdash .oev-et tr.sub td.goal { font-weight: 600; }
/* 이름 칸은 가로로 밀어도 왼쪽에 남는다(청년회는 8단계라 좁은 화면에서 표가 넘친다). */
.orgdash .oev-et tbody th,
.orgdash .oev-et tfoot th,
.orgdash .oev-et thead .corner { position: sticky; left: 0; z-index: 1; }
.orgdash .oev-et tbody th,
.orgdash .oev-et tfoot th { text-align: left; padding-left: 10px; white-space: nowrap; font-weight: 600; }
.orgdash .oev-et tbody th small { margin-left: 6px; color: var(--muted); font-size: var(--oev-xs); font-weight: 400; }
.orgdash .oev-et tr.grp { cursor: pointer; }
.orgdash .oev-et tr.grp th,
.orgdash .oev-et tr.grp td { background: var(--soft); box-shadow: inset 0 1px 0 var(--line); font-weight: 800; height: 38px; }
.orgdash .oev-et tr.grp:hover th,
.orgdash .oev-et tr.grp:hover td { background: color-mix(in srgb, var(--blue) 7%, var(--soft)); }
.orgdash .oev-et tr.grp th b { font-size: var(--oev-md); font-weight: 800; }
.orgdash .oev-et tr.grp td.c { color: var(--tone); }
.orgdash .oev-et tr.grp:focus-visible,
.orgdash .oev-et tr.sub:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.orgdash .evang-region-caret { display: inline-block; width: 16px; color: var(--muted); transition: transform .15s ease; }
.orgdash .is-open > th .evang-region-caret,
.orgdash .is-open > .evang-region-caret { transform: rotate(90deg); }
.orgdash .oev-et tr.sub { cursor: pointer; }
.orgdash .oev-et tr.sub:hover th,
.orgdash .oev-et tr.sub:hover td { background: var(--soft); }
.orgdash .oev-et tr.evang-region-child th { padding-left: 30px; }
.orgdash .oev-et tr.sub th b { font-weight: 600; }
.orgdash .oev-et td.c { white-space: nowrap; }
.orgdash .oev-et td.c small { color: var(--muted); font-size: var(--oev-xs); font-weight: 400; margin-left: 1px; }
.orgdash .oev-et td.c .r2 { display: none; }
.orgdash .oev-et td.muted,
.orgdash .oev-et td .zero { color: var(--muted); font-weight: 400; opacity: .6; }
.orgdash .oev-et tbody td.muted b { font-weight: 400; }
.orgdash .oev-et td.dc { color: var(--bad); font-weight: 700; min-width: 30px; white-space: nowrap; }
.orgdash .oev-et td.dc.zero { color: var(--muted); font-weight: 400; opacity: .6; }
.orgdash .oev-et td.adv { color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, var(--panel)); }
.orgdash .oev-et td.adv b { display: block; font-size: calc(15px * var(--orgdash-font-scale, 1)); font-weight: 800; line-height: 1.2; white-space: nowrap; }
.orgdash .oev-et td.adv small { display: block; font-size: var(--oev-xs); line-height: 1.2; color: var(--muted); font-weight: 400; }
.orgdash .oev-et td.adv.none { color: var(--muted); font-weight: 400; }
.orgdash .oev-et td.adv.none b { font-weight: 400; font-size: var(--oev-xs); opacity: .6; }
.orgdash .oev-et td.adv.low { color: var(--warn); background: var(--warn-soft); }
.orgdash .oev-et td.adv.low b::before { content: "▼"; font-size: 0.7em; margin-right: 2px; vertical-align: 1px; }
.orgdash .oev-et tr.grp td.adv { background: color-mix(in srgb, var(--blue) 9%, var(--soft)); }
.orgdash .oev-et tr.grp td.adv.low { background: var(--warn-soft); }
.orgdash .oev-et tr.sub:hover td.adv { background: color-mix(in srgb, var(--blue) 9%, var(--soft)); }
.orgdash .oev-et tr.sub:hover td.adv.low { background: var(--warn-soft); }
/* 합계 — 남색 줄(두 테마 모두 진한 남색 + 흰 글자) */
.orgdash .oev-et tfoot th,
.orgdash .oev-et tfoot td { background: var(--oev-navy); color: #fff; font-weight: 800; border-bottom: 0; height: 40px; }
.orgdash .oev-et tfoot td.c small,
.orgdash .oev-et tfoot td.adv small { color: rgba(255, 255, 255, 0.72); }
.orgdash .oev-et tfoot td.adv { background: var(--oev-navy-adv); color: #fff; }
.orgdash .oev-et tfoot td.adv.low { background: var(--oev-navy-low); color: #fff; }
.orgdash .oev-et tfoot td.muted,
.orgdash .oev-et tfoot td .zero,
.orgdash .oev-et tfoot td.dc.zero,
.orgdash .oev-et tfoot td.adv.none { color: rgba(255, 255, 255, 0.6); opacity: 1; }
.orgdash .oev-et tfoot td.dc { color: #ffb4b4; }
.orgdash .oev-et tfoot .gs,
.orgdash .oev-et tfoot td.og { border-left-color: rgba(255, 255, 255, 0.16); }
.orgdash .oev-et .nar { display: none; }
.orgdash .oev-et.only-adv td.adv b { font-size: calc(17px * var(--orgdash-font-scale, 1)); }
.orgdash .oev-et.only-adv th,
.orgdash .oev-et.only-adv td { height: 42px; padding: 3px 10px; }

/* ── 좁은 폭: 지역마다 접는 블록 ── */
.orgdash .oev-blocks { display: none; flex-direction: column; gap: var(--sp-2); }
.orgdash .oev-blk { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.orgdash .oev-blk-toggle,
.orgdash .oev-blk-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 0; border-radius: 0; background: var(--soft); color: var(--ink); text-align: left;
  font: inherit; font-size: var(--oev-lg); font-weight: 800;
}
.orgdash .oev-blk-toggle { cursor: pointer; }
.orgdash .oev-blk-toggle small,
.orgdash .oev-blk-head small { font-weight: 400; color: var(--muted); font-size: var(--oev-sm); }
.orgdash .oev-rs { margin-left: auto; color: var(--warn); font-size: var(--oev-sm); font-weight: 700; white-space: nowrap; }
.orgdash .oev-blk.total { border-color: var(--oev-navy); }
.orgdash .oev-blk-head { background: var(--oev-navy); color: #fff; }
.orgdash .oev-blk-head small { color: rgba(255, 255, 255, 0.75); margin-left: auto; }
.orgdash .oev-blk-body { border-top: 1px solid var(--line); }
.orgdash .oev-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-2); }
.orgdash .oev-tile { display: flex; flex-direction: column; min-width: 0; padding: 8px; border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: 6px; }
.orgdash .oev-tile-name { display: flex; align-items: center; gap: 4px; font-size: var(--oev-md); font-weight: 800; color: var(--tone); line-height: 1.3; }
.orgdash .oev-tile-name .oev-bn { min-width: 18px; height: 18px; }
.orgdash .oev-tile-val { font-size: var(--oev-sm); line-height: 1.7; }
.orgdash .oev-tile-val b { font-size: calc(19px * var(--orgdash-font-scale, 1)); font-weight: 800; }
.orgdash .oev-tile-val b.tn { color: var(--tone); }
.orgdash .oev-tile-val small { color: var(--muted); font-size: var(--oev-xs); }
.orgdash .oev-tile-rate { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px; font-size: var(--oev-xs); color: var(--muted); white-space: nowrap; line-height: 1.5; }
.orgdash .oev-tile-rate .d { color: var(--bad); font-weight: 700; }
.orgdash .oev-tile-rate .d.zero { color: var(--muted); font-weight: 400; }
.orgdash .oev-tile-adv { margin-top: 4px; padding: 3px 6px; border-radius: 4px; background: color-mix(in srgb, var(--blue) 8%, var(--panel)); color: var(--blue); font-size: var(--oev-xs); line-height: 1.6; }
.orgdash .oev-tile-adv b { font-size: calc(16px * var(--orgdash-font-scale, 1)); font-weight: 800; white-space: nowrap; }
.orgdash .oev-tile-adv small { color: var(--muted); font-size: var(--oev-xs); white-space: nowrap; }
.orgdash .oev-tile-adv.none { background: var(--soft); color: var(--muted); }
.orgdash .oev-tile-adv.low { background: var(--warn-soft); color: var(--warn); }
.orgdash .oev-dlist { display: flex; flex-direction: column; }
.orgdash .oev-blk-body .oev-dlist { border-top: 1px dashed var(--line); }
.orgdash .oev-drow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: var(--panel); color: var(--ink);
  text-align: left; font: inherit; font-size: var(--oev-md); cursor: pointer;
}
.orgdash .oev-drow:last-child { border-bottom: 0; }
.orgdash .oev-drow:hover { background: var(--soft); }
.orgdash .oev-drow b { font-weight: 700; }
.orgdash .oev-drow small { color: var(--muted); font-size: var(--oev-xs); }
.orgdash .oev-dsum { margin-left: auto; color: var(--ink); font-size: var(--oev-sm); text-align: right; }
.orgdash .oev-dsum.zero { color: var(--muted); opacity: .6; }

/* ── 폭 조정 — 패널 폭 기준 ── */
@container oev-card (max-width: 1500px) {
  .orgdash .oev-et .wid { display: none; }
  .orgdash .oev-et .nar { display: table-cell; }
  .orgdash .oev-et td.c .r2 { display: block; font-size: var(--oev-xs); line-height: 1.2; color: var(--muted); font-weight: 400; }
  .orgdash .oev-et th,
  .orgdash .oev-et td { padding: 2px 4px; }
}
@container oev-card (max-width: 1100px) {
  .orgdash .oev-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .orgdash .oev-arrow { display: none; }
}
/* 흔한 노트북 폭(화면 1440~1500px → 패널 약 1150px)에서 6단계 표가 가로로 넘치지 않게 글자·여백을 한 단계 줄인다. */
@container oev-card (max-width: 1260px) {
  .orgdash table.oev-et { font-size: var(--oev-sm); }
  .orgdash .oev-et thead .sth { font-size: var(--oev-sm); }
  .orgdash .oev-et th,
  .orgdash .oev-et td { padding: 2px; }
  .orgdash .oev-et td.adv b { font-size: calc(14px * var(--orgdash-font-scale, 1)); }
  .orgdash .oev-et td.dc { min-width: 20px; }
  .orgdash .oev-et thead .corner { min-width: 96px; }
  .orgdash .oev-et tr.evang-region-child th { padding-left: 22px; }
  .orgdash .oev-et thead .sth .oev-ico { display: none; }
}
@container oev-card (max-width: 879px) {
  .orgdash .oev-twrap { display: none; }
  .orgdash .oev-blocks { display: flex; }
}
@container oev-card (max-width: 760px) {
  .orgdash .oev-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container oev-card (max-width: 620px) {
  .orgdash .oev-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .orgdash .oev-flow > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container oev-card (max-width: 520px) {
  .orgdash .oev-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .orgdash .oev-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   7. 요약 칩 (섭자확인 상단 건수 등)
   원래 심방현황 전용이었으나 그 화면이 없어졌고(2026-08-21),
   .vchip 은 섭자확인이 계속 쓰므로 이름만 바꿔 남긴다.
   ============================================================ */
.orgdash-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.orgdash .contacts-note { margin: var(--sp-2) 0 0; }
.orgdash .vchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px;
  border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: calc(13px * var(--orgdash-font-scale, 1));
}
.orgdash .vchip b { font-variant-numeric: tabular-nums; color: var(--brand); }

/* ============================================================
   8. 신앙단계 분포 — 단계 4~9개, 교차표는 최대 (9 + 미입력 + 계)열
   ============================================================ */
/* 그래프 위, 범례 아래로 쌓는다. 종전엔 오른쪽에 300px 범례 열을 뒀는데, 단계가
   많고 설명이 긴 회(청년회 12단계)에서 그 열만 두 배로 길어져 그래프 옆이 비었다. */
.orgdash .faith-wrap { display: grid; gap: var(--sp-5); min-width: 0; }
/* 기간 막대는 신앙단계(faith-)와 심방현황(visit-)이 **같은 부품**을 쓴다.
   같은 뜻의 조작이 화면마다 다르게 생기면 두 번 배우게 된다 — 규칙을 갈라 두지 마라.
   심방 쪽만 줄바꿈을 허용한다(건수 배지가 하나 더 붙어 좁은 화면에서 넘친다). */
.orgdash .faith-period-controls { flex-wrap: nowrap; }
.orgdash .visit-period-controls,
.orgdash .evang-period-controls,
.orgdash .month-period-controls { flex-wrap: wrap; }
/* 패널 제목이 글자 중간에서 잘리던 것(2026-09-11 지시).
   .panel-head 는 flex 라 옆 컨트롤(월간/주간/목표만 + 기간 이동)이 넓어지면 제목이
   먼저 눌리는데, 한국어는 기본값에서 아무 글자에서나 끊겨 「단계별 합계」가
   "단계별 합" + "계" 로 갈라졌다. 낱말 단위로 묶기만 한다 —
   flex 를 고정하면(0 0 auto) 좁은 화면에서 제목이 줄지 못해 옆 컨트롤이 패널 밖으로
   넘친다(2026-09-11 독립 리뷰 지적). 공백에서 갈리는 것은 허용한다.
   ★ 이 규칙을 위 선택자 목록 안에 끼워 넣지 마라 — 한 번 그래서 심방현황 기간 막대가
     flex-wrap: wrap 을 잃었다. 반드시 목록이 끝난 뒤 독립 규칙으로 둔다.
   base.css 의 .panel-head h3 는 건드리지 않는다 — 다른 화면까지 바뀐다. */
.orgdash .panel-head h3 { word-break: keep-all; }
.orgdash .faith-grain,
.orgdash .visit-grain,
.orgdash .evang-grain { display: inline-flex; }
.orgdash .faith-grain .btn,
.orgdash .visit-grain .btn,
.orgdash .evang-grain .btn { border-radius: 0; }
.orgdash .faith-grain .btn:first-child,
.orgdash .visit-grain .btn:first-child,
.orgdash .evang-grain .btn:first-child { border-radius: var(--r) 0 0 var(--r); }
.orgdash .faith-grain .btn:last-child,
.orgdash .visit-grain .btn:last-child,
.orgdash .evang-grain .btn:last-child { border-radius: 0 var(--r) var(--r) 0; margin-left: -1px; }
.orgdash .faith-grain .btn.is-on,
.orgdash .visit-grain .btn.is-on,
.orgdash .evang-grain .btn.is-on { position: relative; z-index: 1; background: var(--brand-fill); border-color: var(--brand); color: #fff; }
/* ◀ 기간 ▶ 는 한 묶음으로 다니고, 줄바꿈이 일어나도 셋이 갈라지지 않는다. */
.orgdash .period-nav { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
/* ★ 폭을 **못 박는다**(종전 min-width: 148px). 안에 드는 것이 상태마다 달라서
   — '이번 달' 배지는 최신 기간에만 뜨고, 회차는 1/12 → 12/12 로 자릿수가 는다 —
   폭이 104~199px 사이에서 출렁였고, 그때마다 좌우 화살표가 최대 94px 씩 옮겨
   연달아 누르는 단추가 커서 밑에서 도망갔다(2026-09-05 지시).
   199px 가 가장 넓은 상태(전도 '이번 주' + 12 / 12)라 206px 로 잡고, 글씨 크기를
   키우면(--orgdash-font-scale 1.15·1.30) 같은 비율로 늘린다. */
.orgdash .faith-period-current,
.orgdash .visit-period-current,
.orgdash .evang-period-current,
.orgdash .month-period-current {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: calc(206px * var(--orgdash-font-scale, 1)); flex: none;
  height: var(--ctl-h-sm); padding: 0 var(--sp-3); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--soft);
}
.orgdash .faith-period-current > b,
.orgdash .visit-period-current > b,
.orgdash .evang-period-current > b,
.orgdash .month-period-current > b { display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; min-width: 0; }
.orgdash .faith-period-note { margin: 0 0 var(--sp-3); }
.orgdash .stage-dist { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.orgdash .sd-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.orgdash .sd-chip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--soft); font-size: calc(12px * var(--orgdash-font-scale, 1));
}
.orgdash .sd-chip i { font-style: normal; color: var(--muted); }
.orgdash .sd-chip b { font-size: calc(15px * var(--orgdash-font-scale, 1)); font-weight: 900; }
.orgdash .sd-chip u { text-decoration: none; color: var(--muted); font-size: calc(11px * var(--orgdash-font-scale, 1)); }
.orgdash .sd-chip em { font-style: normal; color: var(--muted); font-size: calc(11.5px * var(--orgdash-font-scale, 1)); }
.orgdash .sd-chip.is-warn { border-color: var(--bad); background: var(--bad-soft); }
.orgdash .sd-chip.is-warn b, .orgdash .sd-chip.is-warn em { color: var(--bad); }
.orgdash .sd-chip.is-goal { border-color: var(--good); background: var(--good-soft, color-mix(in srgb, var(--good) 10%, transparent)); }
.orgdash .sd-chip.is-goal b { color: var(--good); }

/* 칩은 눌러서 설명을 여는 버튼이다. 전역 button 모양을 덮어써 기존 칩과 같아 보이게 둔다. */
.orgdash button.sd-chip {
  cursor: pointer; font-family: inherit; color: inherit; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.orgdash button.sd-chip:hover { border-color: var(--brand); }
.orgdash button.sd-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.orgdash button.sd-chip.is-open { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent); }
.orgdash .sd-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-left: 2px; border-radius: 50%;
  background: var(--line); color: var(--muted);
  font-size: calc(9.5px * var(--orgdash-font-scale, 1)); font-weight: 900; line-height: 1;
}
.orgdash button.sd-chip.is-open .sd-help { background: var(--brand-fill); color: #fff; }
.orgdash .faith-help {
  margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  background: var(--soft); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r);
  font-size: calc(12.5px * var(--orgdash-font-scale, 1)); line-height: 1.65;
}
.orgdash .faith-help > b { display: block; margin-bottom: 2px; }
.orgdash .faith-help p { margin: 0; color: var(--muted); }
.orgdash .faith-help p b { color: var(--ink); }

/* 정체 진단 — 왼쪽 단계(어디서) · 오른쪽 구역(누가) */
.orgdash .faith-insight {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--soft); border: 1px solid var(--line); border-radius: var(--r);
  font-size: calc(13px * var(--orgdash-font-scale, 1)); line-height: 1.7; color: var(--muted);
}
.orgdash .faith-insight b { color: var(--ink); }
.orgdash .faith-stall-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
/* 지난 기간에는 구역 축을 접으므로 한 칸으로 편다(반 칸이 비어 보이지 않게). */
.orgdash .faith-stall-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.orgdash .visit-truncated { margin: 0 0 var(--sp-3); }
.orgdash .fs-box { min-width: 0; }
.orgdash .fs-list { display: grid; gap: 2px; margin-top: var(--sp-2); }
.orgdash .fs-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 62px minmax(0, 128px);
  align-items: center; gap: var(--sp-3);
  padding: 5px var(--sp-2); border-radius: var(--r);
  font-size: calc(12px * var(--orgdash-font-scale, 1));
}
.orgdash .fs-row:hover { background: var(--soft); }
.orgdash .fs-row.is-district { grid-template-columns: minmax(0, 1fr) 96px 62px 96px; }
.orgdash .fs-code { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgdash .fs-bar { display: block; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 12%, transparent); overflow: hidden; }
.orgdash .fs-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--bad); min-width: 3px; }
.orgdash .fs-n { text-align: right; font-weight: 900; white-space: nowrap; }
.orgdash .fs-n u { text-decoration: none; color: var(--muted); font-size: calc(10.5px * var(--orgdash-font-scale, 1)); font-weight: 700; margin-left: 1px; }
.orgdash .fs-top { text-align: right; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgdash .fs-top b { color: var(--ink); font-weight: 800; }

.orgdash .sd-chart { overflow-x: auto; }
.orgdash .sd-plot { position: relative; display: flex; align-items: flex-end; gap: 4px; min-width: 100%; padding-top: 18px; }
.orgdash .sd-band {
  position: absolute; top: 0; bottom: 34px; border-radius: 6px;
  background: var(--bad-soft); border: 0; opacity: .3; pointer-events: none;
}
.orgdash .sd-band em { position: absolute; top: 2px; left: 6px; font-style: normal; font-size: calc(10.5px * var(--orgdash-font-scale, 1)); font-weight: 800; color: var(--bad); }
.orgdash .sd-col { position: relative; flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.orgdash .sd-v { font-size: calc(12px * var(--orgdash-font-scale, 1)); font-weight: 900; font-variant-numeric: tabular-nums; }
.orgdash .sd-track { width: 100%; height: 120px; display: flex; align-items: flex-end; background: var(--soft); border-radius: 5px; overflow: hidden; }
.orgdash .sd-track i { display: block; width: 100%; border-radius: 5px 5px 0 0; min-height: var(--sp-1); transition: height .5s cubic-bezier(.22, .85, .32, 1); }
.orgdash .sd-code { font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 800; white-space: nowrap; }
.orgdash .sd-pct { font-size: calc(10.5px * var(--orgdash-font-scale, 1)); color: var(--muted); }
.orgdash .sd-col.is-peak .sd-v { color: var(--bad); }
.orgdash .sd-col.is-peak .sd-v::after { content: ' \25B2'; font-size: calc(9px * var(--orgdash-font-scale, 1)); }
.orgdash .sd-col.is-peak .sd-code { color: var(--bad); }

/* 증감. 방향은 색과 삼각형 둘 다로 말한다 — 색만으로 나누면 색각 이상인 사람에게
   +2 와 -2 가 같은 회색으로 보인다. '–'(모름)는 삼각형을 붙이지 않는다. */
.orgdash .sd-delta { font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 800;
  line-height: 1; white-space: nowrap; }
.orgdash .sd-delta.is-up { color: var(--good); }
.orgdash .sd-delta.is-down { color: var(--bad); }
.orgdash .sd-delta.is-flat, .orgdash .sd-delta.is-na { color: var(--muted); }
.orgdash .sd-delta.is-up::before { content: '\25B2'; font-size: 8px; margin-right: 2px; }
.orgdash .sd-delta.is-down::before { content: '\25BC'; font-size: 8px; margin-right: 2px; }
.orgdash .fl-delta { text-align: right; }

.orgdash .sd-stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--soft); }
.orgdash .sd-seg { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.orgdash .sd-seg b { font-size: calc(10px * var(--orgdash-font-scale, 1)); font-weight: 800; color: var(--page); white-space: nowrap; text-shadow: 0 1px 2px var(--sd-seg-shadow); padding: 0 var(--sp-1); }
.orgdash .sd-seg.is-edge { box-shadow: inset 3px 0 0 var(--panel); }

.orgdash .faith-legend { padding: var(--sp-4); background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); }
.orgdash .fl-title { margin: 0 0 var(--sp-3); font-size: calc(11.5px * var(--orgdash-font-scale, 1)); font-weight: 800; color: var(--muted); }
/* 폭이 남는 만큼 열을 늘리되 **세 열까지만** 편다. auto-fill 만 두면 넓은 화면에서
   다섯 열로 갈라져 설명이 서너 글자씩 끊긴다. max() 로 한 열의 최소폭을 '전체의 1/3'
   까지 끌어올려 열 수를 묶고, 좁아지면 280px 아래로는 안 내려가게 두 열·한 열로
   접힌다. 흐름은 기본값(가로)이라 A·B-1·B-2… 읽는 차례가 그대로다. */
.orgdash .fl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(280px, (100% - var(--sp-5) * 2) / 3), 1fr));
  gap: var(--sp-2) var(--sp-5);
}
.orgdash .fl-row { display: grid; grid-template-columns: var(--sp-3) 66px minmax(0, 1fr) 42px; gap: var(--sp-2); font-size: calc(12px * var(--orgdash-font-scale, 1)); align-items: start; }
.orgdash .fl-swatch { width: var(--sp-3); height: var(--sp-3); border-radius: 50%; margin-top: 2px; }
.orgdash .fl-code { font-weight: 800; }
.orgdash .fl-desc { color: var(--muted); line-height: 1.45; }
.orgdash .c-memo {
  white-space: pre-wrap; word-break: break-word; line-height: 1.6;
  font-size: calc(13px * var(--orgdash-font-scale, 1));
}

.orgdash .faith-peak-cell { font-weight: 800; color: var(--brand); }

/* ============================================================
   9. 구역 관리 (1단계 읽기 전용)
   ============================================================ */
.orgdash .mgmt-card { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.orgdash .mgmt-title { font-size: calc(18px * var(--orgdash-font-scale, 1)); font-weight: 800; letter-spacing: -.3px; }
.orgdash .mgmt-card p { margin: 0; flex: 1 1 auto; }
.orgdash .mgmt-card .btn { margin-top: var(--sp-1); }
.orgdash .tfoot { margin-top: var(--sp-3); }

/* 선택한 섭자를 결과 옆에서 바로 확인해야 하므로 넓은 화면에서는 2단을 유지한다. */
.orgdash .c-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-4); align-items: start;
}
.orgdash .c-results { display: grid; gap: var(--sp-3); min-width: 0; }
/* 상세 표의 라벨 칸. 폭을 안 잡아 두면 메모 원문이 들어온 순간 값 칸이 폭을 다
   먹고 라벨이 한 글자씩 세로로 쪼개진다(실제로 그랬다). */
.orgdash .c-detail .tbl td:first-child { width: 5.5em; white-space: nowrap; vertical-align: top; }
.orgdash .c-detail .tbl td { vertical-align: top; }

.orgdash .c-detail {
  position: sticky; top: 0; align-self: start;
  max-height: calc(100dvh - 160px); overflow-y: auto;
  display: grid; gap: var(--sp-3); align-content: start;
  padding: var(--sp-4); background: var(--soft);
  border: 1px solid var(--line); border-radius: var(--r);
}
.orgdash .cd-hist-h {
  font-size: calc(11px * var(--orgdash-font-scale, 1));
  font-weight: 800; color: var(--muted); margin-bottom: var(--sp-2);
}
.orgdash .cd-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.orgdash .cd-hist li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 60px;
  gap: var(--sp-2); align-items: center;
  font-size: calc(12px * var(--orgdash-font-scale, 1));
  padding: 5px var(--sp-2); background: var(--panel);
  border: 1px solid var(--line); border-radius: 6px;
}

/* 심방현황 — 지역 머리글 아래 구역 행을 누르면 원문 목록이 한 줄 더 열린다. */
.orgdash .visit-panel { min-width: 0; }
.orgdash table.tbl tr.visit-region-group { background: var(--soft); }
.orgdash table.tbl tr.visit-region-group > td { border-top: 1px solid var(--line); font-weight: 800; }
.orgdash .visit-region-group .muted { margin-left: var(--sp-2); }
.orgdash table.tbl tr.visit-district-row { cursor: pointer; }
.orgdash table.tbl tr.visit-district-row:hover,
.orgdash table.tbl tr.visit-district-row.is-open { background: var(--blue-soft); }
.orgdash table.tbl tr.visit-district-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.orgdash .visit-caret {
  display: inline-block; width: 16px; color: var(--muted); transition: transform .15s ease;
}
.orgdash tr.visit-district-row.is-open .visit-caret { transform: rotate(90deg); }
.orgdash .visit-author-summary { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
.orgdash .visit-author {
  display: inline-flex; gap: var(--sp-1); align-items: center;
  padding: 3px var(--sp-2); background: var(--soft); border: 1px solid var(--line); border-radius: 999px;
  font-size: calc(12px * var(--orgdash-font-scale, 1)); white-space: nowrap;
}
.orgdash .visit-detail-row > td { padding: 0; background: var(--soft); }
.orgdash .visit-entries { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-5); }
.orgdash .visit-entries li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
  font-size: calc(13px * var(--orgdash-font-scale, 1));
}
.orgdash .visit-entries li:last-child { border-bottom: 0; }
.orgdash .visit-entries li > span { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.orgdash .visit-entries i { color: var(--muted); font-style: normal; }
.orgdash .visit-entries time { display: inline-flex; gap: var(--sp-2); color: var(--muted); white-space: nowrap; }

/* ============================================================
   10. 구역 상세 슬라이드오버
       이름을 orgdash-drawer 로 바꾼 이유: `.drawer` 는 다른 뷰가 나중에
       쓰기 쉬운 흔한 이름이라, 바깥 규칙이 이 요소를 때릴 수 있다.
   ============================================================ */
.orgdash-drawer-mask {
  position: fixed; inset: 0; background: var(--orgdash-scrim);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1400;
}
.orgdash-drawer-mask.is-on { opacity: 1; pointer-events: auto; }
.orgdash-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 640px; max-width: 92vw; z-index: 1401;
  background: var(--page); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.22, .85, .32, 1);
  box-shadow: var(--shadow-lg);
}
.orgdash-drawer.is-on { transform: none; }
.orgdash .drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.orgdash .drawer-sub { font-size: calc(12px * var(--orgdash-font-scale, 1)); }
.orgdash .drawer-title { margin: var(--sp-1) 0 0; font-size: calc(21px * var(--orgdash-font-scale, 1)); font-weight: 800; letter-spacing: -.4px; }
.orgdash .drawer-tabs {
  display: flex; align-items: center; gap: var(--sp-1); overflow-x: auto;
  padding: var(--sp-1) var(--sp-5); background: var(--panel); border-bottom: 1px solid var(--line);
}
.orgdash .dtab {
  padding: 0 var(--sp-3);
  border-color: transparent; background: transparent; color: var(--muted);
}
.orgdash .dtab:hover:not(:disabled) { color: var(--ink); background: var(--soft); border-color: transparent; }
.orgdash .dtab.is-on { color: var(--brand); background: var(--brand-soft); border-color: transparent; }
.orgdash .drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; }

/* 구역온도 탭 */
.orgdash .temp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.orgdash .temp-side { display: grid; gap: var(--sp-3); }
.orgdash .ta-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 54px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; }
.orgdash .ta-val { text-align: right; font-weight: 800; }

/* 전도 탭 */
.orgdash .ev-list { display: grid; }
.orgdash .ev-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; }
.orgdash .ev-name { font-size: calc(14px * var(--orgdash-font-scale, 1)); font-weight: 700; }
.orgdash .ev-nums { display: flex; align-items: center; gap: var(--sp-3); font-size: calc(13px * var(--orgdash-font-scale, 1)); font-variant-numeric: tabular-nums; }
.orgdash .ev-nums .g { color: var(--muted); }
.orgdash .ev-nums .r { font-weight: 800; }
.orgdash .ev-track { margin-top: 7px; }
.orgdash .evang-row { position: relative; padding: 11px 0 11px 32px; border-bottom: 1px solid var(--line); }
.orgdash .evang-row:last-child { border-bottom: none; }
.orgdash .ev-no {
  position: absolute; left: 0; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: color-mix(in srgb, var(--temp) 12%, transparent); color: var(--temp);
  font-size: calc(12px * var(--orgdash-font-scale, 1)); font-weight: 700; text-align: center; line-height: 22px;
}
.orgdash .evang-row:not(:last-child)::before {
  content: ''; position: absolute; left: 10px; top: 36px; bottom: -2px;
  width: 2px; background: color-mix(in srgb, var(--temp) 18%, transparent);
}

/* 활동참여 탭 — 날짜 + 대분류 배지 + 활동명 + 성도명 (v01 원본 4열) */
.orgdash .act-row {
  display: grid; grid-template-columns: 92px 92px minmax(0, 1fr) auto; gap: var(--sp-3);
  align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: calc(13px * var(--orgdash-font-scale, 1));
}
/* 활동 로그가 없을 때 쓰는 집계 폴백 줄 — 날짜 칸이 없어 3열 */
.orgdash .act-row.is-summary { grid-template-columns: 92px minmax(0, 1fr) auto; }
.orgdash .act-row:last-child { border-bottom: 0; }
.orgdash .act-date { color: var(--muted); font-variant-numeric: tabular-nums; }
/* 구역당 최대 100건이라 드로어 전체가 아니라 이 목록만 스크롤시킨다 */
.orgdash .act-list { max-height: 430px; overflow-y: auto; }

/* ============================================================
   11. 구역온도 온도계 — dash-samples/_shared/thermo.css 에서 필요한 규칙만 이식.
       유리관 실루엣은 JS 가 1회 주입하는 #orgdashThermoClip clip-path 를 쓴다.
       ★ 그라데이션 색은 org-web 원본 온도계의 시각 자산이라 계산값 그대로 둔다
         (브리프에서 허용한 유일한 예외).
   ============================================================ */
.orgdash .thermo-card {
  --thermo-w: 60px;
  --thermo-h: 255.8px;
  --thermo-foot: 65.8px;
  --thermo-col: 190px;
  position: relative; overflow: hidden;
  padding: 20px 16px 16px;
}
.orgdash .thermo-card::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: -24px; bottom: -56px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 57, 44, .14), rgba(224, 57, 44, 0) 70%);
}
.orgdash .thermo-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.orgdash .thermo { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 28px 6px 6px 0; }
.orgdash .thermo-scale {
  position: relative; z-index: 2;
  width: 36px; height: var(--thermo-col);
  font-size: calc(10.5px * var(--orgdash-font-scale, 1)); line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.orgdash .thermo-scale span { position: absolute; left: 0; right: 0; white-space: nowrap; }
.orgdash .thermo-scale span i { position: absolute; top: 0; right: 0; transform: translateY(-50%); font-style: normal; }
.orgdash .thermo-scale span::before {
  content: ''; position: absolute; top: 0; left: 100%;
  margin-left: 3px; width: 6px; height: 1.5px; border-radius: 1px;
  background: currentColor; opacity: .7;
}
.orgdash .thermo-scale span:not(:first-child):not(:last-child)::after {
  content: ''; position: absolute; top: 0; left: 100%;
  margin-left: 9px; width: 32px; height: 1px;
  background: currentColor; opacity: .16;
}
.orgdash .thermo-scale span:first-child,
.orgdash .thermo-scale span:last-child { font-weight: 800; }
/* 드롭섀도우는 바깥(wrap), clip-path 는 안쪽(glass) — 같은 요소에 두면 그림자가 잘린다 */
.orgdash .thermo-glass-wrap {
  flex: none; position: relative;
  width: var(--thermo-w); height: var(--thermo-h);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .14)) drop-shadow(0 1px 1px rgba(0, 0, 0, .1));
}
.orgdash .thermo-glass {
  position: relative; width: 100%; height: 100%;
  clip-path: url(#orgdashThermoClip);
  background-image:
    radial-gradient(circle at 32% 87%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 13%),
    linear-gradient(90deg, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, .12) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .14) 100%),
    linear-gradient(180deg,
      rgba(120, 120, 132, .2) 0%,
      rgba(150, 125, 120, .16) 55%,
      rgba(200, 110, 90, .14) 73%,
      #f4622a 74%,
      #ff9c72 82%,
      #e0392c 92%,
      #c62f13 100%);
}
.orgdash .thermo-fill-track { position: absolute; left: 0; right: 0; bottom: var(--thermo-foot); height: var(--thermo-col); }
.orgdash .thermo-fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 0; border-radius: 12px 12px 0 0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 65%),
    linear-gradient(0deg, #f4622a 0%, #f43a2a 30%, #e0392c 50%, #d32f2f 75%, #b71c1c 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% 16px, 100% var(--thermo-col);
  transition: height .65s cubic-bezier(.22, .85, .32, 1);
}
.orgdash .thermo-fill.over {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 65%),
    linear-gradient(0deg, #f4813b 0%, #e0392c 40%, #d32f2f 75%, #b71c1c 100%);
  animation: orgdash-thermo-pulse 1.9s ease-in-out infinite;
}
@keyframes orgdash-thermo-pulse {
  0%   { box-shadow: 0 0 9px rgba(211, 47, 47, .35); }
  50%  { box-shadow: 0 0 20px rgba(211, 47, 47, .7); }
  100% { box-shadow: 0 0 9px rgba(211, 47, 47, .35); }
}
.orgdash .thermo-flag {
  display: none; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); margin-bottom: 8px;
  white-space: nowrap; font-size: calc(10px * var(--orgdash-font-scale, 1)); font-weight: 800; letter-spacing: -.2px;
  color: #fff; background: linear-gradient(135deg, #f4622a, #e0392c 55%, #b71c1c);
  border-radius: 9px; padding: 3px 8px;
  box-shadow: 0 2px 6px rgba(183, 28, 28, .5);
}
.orgdash .thermo-flag::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #b71c1c;
}
.orgdash .thermo-glass-wrap:has(.thermo-fill.over) .thermo-flag { display: block; }
.orgdash .thermo-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.orgdash .thermo-deg { font-size: calc(14px * var(--orgdash-font-scale, 1)); font-weight: 600; color: var(--muted); line-height: 1; }
.orgdash .thermo-deg b {
  font-size: calc(40px * var(--orgdash-font-scale, 1)); font-weight: 800; letter-spacing: -1.5px; margin-right: 4px;
  font-variant-numeric: tabular-nums;
  color: #e0392c;
  background: linear-gradient(135deg, #f4622a, #e0392c 55%, #b71c1c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.orgdash .thermo-sub { font-size: calc(13px * var(--orgdash-font-scale, 1)); color: var(--muted); margin-top: 8px; }
.orgdash .thermo-pct {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: calc(12px * var(--orgdash-font-scale, 1)); font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #f4622a, #b71c1c);
  border-radius: 999px; padding: 5px 12px 5px 10px;
  box-shadow: 0 2px 6px rgba(183, 28, 28, .3);
}
.orgdash .thermo-pct::before { content: '🔥'; font-size: calc(11px * var(--orgdash-font-scale, 1)); }
.orgdash .thermo-by {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid var(--line);
}
.orgdash .temp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: calc(12px * var(--orgdash-font-scale, 1)); background: var(--soft); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 10px 5px 9px;
}
.orgdash .temp-chip b {
  color: #e0392c;
  background: linear-gradient(135deg, #f4622a, #e0392c 60%, #b71c1c);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.orgdash .temp-chip.is-zero { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .orgdash .thermo-fill.over { animation: none; box-shadow: 0 0 14px rgba(211, 47, 47, .5); }
  .orgdash .bar > i,
  .orgdash .dist-bar > i,
  .orgdash .thermo-fill,
  .orgdash-drawer { transition: none; }
}

/* ============================================================
   12. 다크모드 보정
       색은 전부 토큰이라 자동으로 따라오지만, 온도계는 org-web 원본
       그라데이션(고정색)이라 어두운 배경에서 유리관이 붕 뜬다 → 채도만 낮춘다.
   ============================================================ */
.orgdash:where(:root[data-theme="dark"] *) .thermo-glass-wrap { filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5)); }
.orgdash:where(:root[data-theme="dark"] *) .thermo-card::before { background: radial-gradient(circle, rgba(224, 57, 44, .2), rgba(224, 57, 44, 0) 70%); }
.orgdash:where(:root[data-theme="dark"] *) { --orgdash-scrim: rgba(2, 6, 23, 0.62); }

/* ============================================================
   13. 반응형 — 좁아진 본문에서는 카드와 상세 패널만 재배치한다.
   ============================================================ */
@media (max-width: 1500px) {
  .orgdash .c-layout { grid-template-columns: minmax(0, 1fr) 292px; }
}

@media (max-width: 1120px) {
  .orgdash .c-layout { grid-template-columns: minmax(0, 1fr); }
  .orgdash .c-detail { position: static; max-height: none; }
}

@media (max-width: 1100px) {
  .orgdash .g3,
  .orgdash .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orgdash .faith-stall-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .orgdash .temp-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .orgdash .g2,
  .orgdash .g3,
  .orgdash .g4 { grid-template-columns: minmax(0, 1fr); }
  .orgdash .dist-grid { grid-template-columns: minmax(0, 1fr); }
  .orgdash .dist-row { grid-template-columns: 62px minmax(0, 1fr) 40px 48px; gap: var(--sp-2); }
  .orgdash-drawer { width: 100%; max-width: 100%; }
  .orgdash .drawer-head,
  .orgdash .drawer-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .orgdash .act-row { grid-template-columns: 84px minmax(0, 1fr); row-gap: var(--sp-1); }
  .orgdash .act-row.is-summary { grid-template-columns: minmax(0, 1fr) auto; }
  .orgdash .visit-entries li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

/* ============================================================
   v02 추가 스타일 (상단 탭, 지역 보드, 하단 3분할, 인라인 상세 등)
   ============================================================ */

/* ---------- 상단 탭 레이아웃 ---------- */
/* 보드 바깥 줄 — 다크모드 토글과 세션 시계만 여기 둔다.
   보드(.orgdash-shell-v02) 안은 시안 v02 그대로 두기 위해 밖으로 뺀 것이다. */
.orgdash .orgdash-outer-tools {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--sp-2); margin-bottom: var(--sp-2); min-height: var(--ctl-h);
}
/* 세션 시계는 base.css 에서 화면 우상단 position:fixed 라 보드 위를 덮는다.
   이 화면에서만 흐름 배치로 되돌려 위 줄에 나란히 세운다.
   base.css 를 고치면 다른 39개 화면까지 바뀌므로 여기서만 덮는다. */
.orgdash .orgdash-outer-tools .session-timer {
  position: static; top: auto; right: auto; z-index: auto; box-shadow: none;
}

.orgdash .orgdash-shell-v02 {
  display: flex; flex-direction: column;
  /* 실제 높이는 mountOrgDashboard 가 재서 --orgdash-shell-h 로 넣는다.
     전에는 100dvh - 200px 로 박아 뒀는데 그 200px 이 위쪽 앱 껍데기 높이를 눈대중한
     값이라, 실제와 어긋나면 화면 아래가 빈 채로 남는다. 아래 값은 JS 가 못 돌았을 때만 쓴다. */
  height: var(--orgdash-shell-h, calc(100dvh - 200px)); min-height: 420px; overflow: hidden;
  background: var(--page); border: 1px solid var(--line); border-radius: var(--r);
}

.orgdash .top-brand { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

.orgdash .top-nav {
  display: flex; align-items: center; min-width: 0;
  /* 탭끼리는 줄바꿈하지 않는다. 감싸면 .btn 이 폭을 다 먹어 한 줄에 하나씩 쌓인다.
     줄 배치는 감싸개(.top-tabsrow)가 맡는다. */
  flex-wrap: nowrap; flex: 1 1 auto;
  /* ★ 2026-09-16(점검 D-006): 대신 **가로로 밀 수 있게** 한다.
     껍데기(.orgdash-shell-v02)가 overflow:hidden 이라, 여섯 탭이 한 줄에 안 들어가는
     폭(약 630px 미만)에서는 뒤쪽 탭이 스크롤도 없이 그냥 잘려 나갔다 — 500px 에서
     취합 일부·섭자확인 전부가 사라져 폰으로 여는 지역장·회장·서기가 그 화면으로
     이동할 수 없었다. 스크롤 막대는 얇게 **보이게** 남긴다(감추면 잘린 줄도 모른다). */
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  /* 스크롤이 생겨도 밑줄(border-bottom)이 잘리지 않게 여유를 준다. */
  padding-bottom: 2px;
}
.orgdash .top-nav::-webkit-scrollbar { height: 4px; }
.orgdash .top-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.orgdash .top-nav::-webkit-scrollbar-track { background: transparent; }

/* 탭 줄. 브랜드·회 선택은 윗줄, 화면 선택과 글자 크기는 아랫줄이다.
   셋을 한 줄에 밀어 넣으면 1,599px 가 필요해 흔한 노트북 폭에서 탭이 잘린다. */
.orgdash .top-tabsrow {
  order: 3; flex: 1 1 100%; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
/* 탭 하나가 내비 폭을 통째로 먹지 않게 못 박는다. */
.orgdash .top-nav .btn.nav-item { flex: 0 0 auto; width: auto; }
/* 회 선택은 사이드바용 폭(100%)을 물려받는다. 상단 줄에서는 내용만큼만 차지해야 한다. */
.orgdash .top-right .select.side-select { width: auto; min-width: 132px; max-width: 220px; flex: none; }
.orgdash .top-nav .btn.nav-item {
  height: calc(44px * var(--orgdash-font-scale, 1)); align-self: center;
  padding: 0 var(--sp-4); font-size: calc(15px * var(--orgdash-font-scale, 1));
  color: var(--muted); background: transparent; border: none;
  border-bottom: 3px solid transparent; border-radius: 0; white-space: nowrap;
}
.orgdash .top-nav .btn.nav-item:hover { color: var(--ink); background: var(--soft); border-bottom-color: var(--line); }
.orgdash .top-nav .btn.nav-item.is-on { color: var(--brand); background: var(--brand-soft); border-bottom-color: var(--brand); }

/* ★ 2026-09-16(점검 D-006): flex:none 이면 이 덩이가 줄지 않아 좁은 화면에서 새로고침이
   줄 밖으로 밀려 나갔다. .toolbar 는 base.css:861 에서 이미 flex-wrap:wrap 이라,
   줄어들 수만 있으면 안에서 알아서 접힌다. 늘어나지는 않게 flex-grow 는 0 으로 둔다. */
.orgdash .top-right { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); }
.orgdash .me-role { display: flex; align-items: center; gap: var(--sp-1); }

/* 좁으면 글자 크기를 탭 아래로 내린다. 같은 줄에 두면 탭이 밀려 잘린다. */
@media (max-width: 1080px) {
  .orgdash .top-tabsrow { flex-wrap: wrap; row-gap: var(--sp-2); }
  .orgdash .top-tabsrow .font-scale { margin-left: auto; }
}

/* 2026-09-16(점검 D-006): 폰 폭(약 640px 이하). 좌우 여백과 탭 안쪽 여백을 줄여 여섯 탭이
   들어갈 자리를 먼저 만들고, 그래도 넘치면 위 .top-nav 의 가로 스크롤이 받는다.
   ⚠ 잘림 경계는 실기기로 다시 재야 한다(FINAL_DASH 4절 D-006) — 여기 640px 은 헤드리스
     500px 실측과 390px 외삽에서 잡은 임시 경계다. */
@media (max-width: 640px) {
  .orgdash .orgdash-topbar { padding: var(--sp-2) var(--sp-3); }
  .orgdash .top-nav .btn.nav-item { padding: 0 var(--sp-2); }
  .orgdash .top-right .select.side-select { min-width: 104px; }
}

/* ---------- KPI 스트립 ----------
   renderOrgDashKpis() 는 `.grid.g3.kpis` 를 통째로 돌려준다. 바깥을 한 겹 더 감싸는
   자리일 뿐이므로 격자를 여기서 다시 잡지 않는다 — 잡으면 격자가 두 겹이 된다.
   ⚠ `.kpis { display:none }` 을 두지 마라. 카드가 그 안에 있어 KPI 가 통째로 사라진다. */
.orgdash .kpi-strip { display: block; min-width: 0; }

/* ---------- 전도 막대 부품 ----------
   조감의 '지역 전도 현황' 판은 2026-09-07 에 화면째 걷어냈다(전도현황 탭과 같은 숫자를
   두 번 보여 주고 있었다). 그 판 전용 규칙도 같이 지웠다.
   여기 남은 track / ghost / bar / val 은 **단계 비교 패널이 재사용**한다(.ev-compare-row).
   지우지 마라 — 지우면 비교 막대가 통째로 안 보인다. */
.orgdash .ev-step-track {
  position: relative; display: block; height: 20px;
  border-radius: 999px; background: color-mix(in srgb, var(--muted) 7%, transparent); overflow: visible;
}
.orgdash .ev-step-bar {
  position: absolute; left: 0; top: 3px; bottom: 3px;
  border-radius: 999px; transition: width .45s cubic-bezier(.22, .85, .32, 1);
}
.orgdash .ev-step-bar:not(.is-zero) { min-width: 3px; }
/* 목표 눈금선. 채우지 않고 **위치만** 알려 준다(2026-09-07 서기 문의로 옅은 판을 대신함).
   막대 위에 겹쳐 보여야 하므로 z-index 를 올리고, 트랙보다 위아래로 조금 튀어나오게 둔다. */
.orgdash .ev-goal-mark {
  position: absolute; top: -2px; bottom: -2px; width: 1px; z-index: 2;
  margin-left: -.5px; background: var(--muted); opacity: .8;
}
/* 머리글 범례에 쓰는 같은 모양의 작은 선. 막대의 선과 굵기를 맞춘다. */
.orgdash .ev-goal-key {
  display: inline-block; width: 1px; height: 11px; vertical-align: -1px;
  background: var(--muted); opacity: .8;
}
.orgdash .ev-step-bar.good { background: var(--good); }
.orgdash .ev-step-bar.warn { background: var(--warn); }
.orgdash .ev-step-bar.bad { background: var(--bad); }
.orgdash .ev-step-bar.neutral { background: var(--muted); }
.orgdash .ev-step-val { text-align: right; font-weight: 900; white-space: nowrap; }
.orgdash .ev-step-val span { color: var(--muted); font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 700; }

/* 단계 막대를 누르면 나오는 지역별/구역별 비교 판. ev-step-track·ev-step-bar 를 그대로 재사용해
   "단계 막대"와 "비교 막대"가 같은 모양으로 읽히게 한다(2026-09-06 지시: 8단계 클릭→가로 비교). */
.orgdash .ev-compare-panel {
  --tone: var(--muted);
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--line));
  border-top: 3px solid var(--tone);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--tone) 4%, var(--card, var(--bg)));
}
.orgdash .ev-compare-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-2); margin-bottom: var(--sp-3);
  font-size: calc(13px * var(--orgdash-font-scale, 1));
}
.orgdash .ev-compare-title { display: inline-flex; align-items: center; gap: 6px; color: var(--tone); font-size: calc(15px * var(--orgdash-font-scale, 1)); }
.orgdash .ev-compare-title svg { width: 18px; height: 18px; fill: currentColor; }
.orgdash .ev-compare-title em { font-style: normal; font-weight: 600; color: var(--muted); font-size: calc(12px * var(--orgdash-font-scale, 1)); }
.orgdash .ev-compare-sum { color: var(--muted); font-weight: 600; }
.orgdash .ev-compare-sum b { color: var(--text); font-size: calc(15px * var(--orgdash-font-scale, 1)); font-weight: 900; }
.orgdash .ev-compare-sum i {
  font-style: normal; margin-left: var(--sp-2); padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone); font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 700;
}
/* ★ 높이를 자르지 않는다(2026-09-06 지시) — 지역·구역이 몇 개든 스크롤 없이 한 번에 다 보여야 한다.
   넓은 화면에서는 단을 나눠(위→아래 순서 유지) 막대가 화면 끝까지 늘어지지 않게 한다(2026-10-05). */
.orgdash .ev-compare-rows { columns: 3 360px; column-gap: var(--sp-5, 28px); }
.orgdash .ev-compare-row {
  display: grid;
  grid-template-columns: minmax(56px, max-content) minmax(0, 1fr) max-content 44px;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
  break-inside: avoid;
  border-bottom: 1px dashed color-mix(in srgb, var(--muted) 18%, transparent);
  font-size: calc(13px * var(--orgdash-font-scale, 1));
}
.orgdash .ev-compare-label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgdash .ev-compare-track {
  position: relative; display: block; height: 12px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--tone) 10%, transparent);
}
.orgdash .ev-compare-track i {
  position: absolute; inset: 0 auto 0 0; min-width: 6px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 62%, transparent), var(--tone));
  transition: width .45s cubic-bezier(.22, .85, .32, 1);
}
.orgdash .ev-compare-val { min-width: 58px; text-align: right; white-space: nowrap; }
.orgdash .ev-compare-val b { font-weight: 900; font-size: calc(14px * var(--orgdash-font-scale, 1)); }
.orgdash .ev-compare-val small { margin-left: 3px; color: var(--muted); font-weight: 600; font-size: calc(11px * var(--orgdash-font-scale, 1)); }
.orgdash .ev-compare-rate { text-align: right; color: var(--muted); font-weight: 700; font-size: calc(12px * var(--orgdash-font-scale, 1)); }
.orgdash .ev-compare-row.is-top .ev-compare-val b,
.orgdash .ev-compare-row.is-top .ev-compare-rate { color: var(--tone); }
.orgdash .ev-compare-row.is-zero .ev-compare-label,
.orgdash .ev-compare-row.is-zero .ev-compare-val b { color: var(--muted); font-weight: 600; }
.orgdash .ev-compare-row.is-zero .ev-compare-track i { display: none; }

/* ---------- 지역 보드 — v04 구역온도 히트맵 ---------- */
.orgdash .mb-4 { margin-bottom: var(--sp-4); }
.orgdash .view-title { font-size: 24px; margin: 0; line-height: var(--ctl-h); font-weight: 800; }
.orgdash .board-grid { min-width: 0; margin-bottom: var(--sp-4); }
.orgdash .hm-panel { min-width: 0; overflow: visible; padding: var(--sp-4) var(--sp-5); }
.orgdash .hm-panel > .panel-head { align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; }
.orgdash .hm-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }

/* 목표와 근접 폭에서 계산한 세 구간. 점은 셀과 같은 고정색을 쓴다. */
.orgdash .hm-legend { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; min-width: 0; }
.orgdash .hm-key {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line);
  color: var(--muted); white-space: nowrap;
  font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 700;
}
.orgdash .hm-key > i {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--temp-tone);
}
.orgdash .hm-key > b { color: var(--ink); font-weight: 800; }

/* 지역 수가 많아도 이 안에 별도 스크롤을 만들지 않는다. 바깥 .orgdash-scroll 이 받는다. */
.orgdash .hm-grid { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; overflow: visible; }
.orgdash .hm-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: stretch; gap: var(--sp-3);
  min-width: 0; min-height: 78px;
}
.orgdash .hm-grid.is-compact .hm-row { min-height: 58px; }
.orgdash .hm-region {
  padding-top: var(--sp-1); text-align: right; overflow-wrap: anywhere;
  font-size: calc(13px * var(--orgdash-font-scale, 1)); font-weight: 800; line-height: 1.35;
}
.orgdash .hm-region-sub {
  display: block; color: var(--muted);
  font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 700;
}
.orgdash .hm-cells {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); grid-auto-rows: minmax(78px, auto);
  align-content: start; gap: var(--sp-2); min-width: 0;
}
.orgdash .hm-grid.is-compact .hm-cells { grid-auto-rows: minmax(58px, auto); }
.orgdash .hm-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 100%; min-width: 0; min-height: 78px; margin: 0; padding: var(--sp-2);
  appearance: none; border: 1px solid color-mix(in srgb, #fff 38%, transparent); border-radius: var(--sp-1);
  color: #fff; font: inherit; text-align: center; cursor: pointer; overflow: hidden;
  transition: filter .15s, box-shadow .15s, outline-color .15s;
}
.orgdash .hm-grid.is-compact .hm-cell { min-height: 58px; }
.orgdash .hm-cell:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); }
.orgdash .hm-cell:focus-visible,
.orgdash .hm-cell.is-on { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: var(--shadow-sm); }
.orgdash .hm-over { position: absolute; top: var(--sp-1); right: var(--sp-1); font-size: 10px; font-weight: 900; line-height: 1; }
.orgdash .hm-name {
  max-width: 100%; overflow-wrap: anywhere;
  font-size: calc(12px * var(--orgdash-font-scale, 1)); font-weight: 800; line-height: 1.15;
}
.orgdash .hm-deg { font-size: calc(21px * var(--orgdash-font-scale, 1)); font-weight: 900; line-height: 1.05; }
.orgdash .hm-unit { margin-left: 1px; font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 700; opacity: .9; }
.orgdash .hm-leader,
.orgdash .hm-meta {
  max-width: 100%; overflow-wrap: anywhere;
  font-size: calc(11px * var(--orgdash-font-scale, 1)); font-weight: 700; line-height: 1.2; opacity: .92;
}

/* 구역 칩에서 상세 서랍도 함께 쓰던 달성률 표시는 드로어용으로 남긴다. */
.orgdash .d-rate { font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-1); }
.orgdash .d-rate::before { font-size: 9px; line-height: 1; }
.orgdash .d-rate.good { color: var(--good); }
.orgdash .d-rate.good::before { content: '\25B2'; }
.orgdash .d-rate.warn { color: var(--warn); }
.orgdash .d-rate.warn::before { content: '\25A0'; }
.orgdash .d-rate.bad  { color: var(--bad); }
.orgdash .d-rate.bad::before { content: '\25BC'; }

/* ---------- 조감 하단 3분할 ---------- */
.orgdash .ov-bottom { align-items: stretch; margin-bottom: var(--sp-6); }
.orgdash .ov-bottom.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orgdash .ov-bottom .panel { display: flex; flex-direction: column; }
.orgdash .ov-bottom .panel[hidden] { display: none !important; }
.orgdash .rank-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.orgdash .rank-col { min-width: 0; }
.orgdash .rank-cap { font-size: 12px; font-weight: 800; margin-bottom: var(--sp-2); }
.orgdash .rank-cap.good { color: var(--good); }
.orgdash .rank-cap.bad { color: var(--bad); }
.orgdash .rank-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line); }
.orgdash .rank-item:last-child { border-bottom: 0; }
.orgdash .rank-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.orgdash .rank-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgdash .rank-val { font-variant-numeric: tabular-nums; font-weight: 900; }
.orgdash .region-temp-list { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; }
.orgdash .region-temp-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 58px; align-items: center; gap: var(--sp-2);
  min-width: 0; font-size: calc(12px * var(--orgdash-font-scale, 1));
}
.orgdash .region-temp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.orgdash .region-temp-value { text-align: right; font-weight: 900; white-space: nowrap; }

@media (max-width: 900px) {
  .orgdash .hm-row { grid-template-columns: 84px minmax(0, 1fr); gap: var(--sp-2); }
  .orgdash .hm-cells { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
  .orgdash .hm-panel-actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 600px) {
  .orgdash .hm-panel { padding: var(--sp-3); }
  .orgdash .hm-row { grid-template-columns: minmax(0, 1fr); }
  .orgdash .hm-region { padding-top: 0; text-align: left; }
  .orgdash .hm-region-sub { display: inline; margin-left: var(--sp-2); }
  .orgdash .hm-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orgdash .ov-bottom.is-2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .orgdash .hm-cells { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 구역 인라인 아코디언 상세 ---------- */
.orgdash .board-detail { border-top: 2px solid var(--brand); background: var(--soft); }
.orgdash .d-detail-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.orgdash .d-detail-title { font-size: 16px; font-weight: 900; margin: 0; line-height: var(--ctl-h); }
.orgdash .d-tabs { display: flex; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4) 0; background: var(--panel); border-bottom: 1px solid var(--line); }
.orgdash .d-tabs .btn { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.orgdash .d-tabs .btn.is-on { background: var(--brand-fill); border-color: var(--brand); color: #fff; }
.orgdash .d-pane { display: none; }
.orgdash .d-pane.is-on { display: block; }
.orgdash .d-detail-body { padding: var(--sp-4); display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.orgdash .d-detail-body.one { grid-template-columns: minmax(0, 1fr); }
.orgdash .d-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3); height: 100%; display: flex; flex-direction: column; min-width: 0; }
.orgdash .d-sec-title { font-size: 13px; font-weight: 800; margin: 0 0 var(--sp-3); color: var(--muted); display: flex; align-items: center; gap: var(--sp-2); }
.orgdash .d-sec-title .norm { font-weight: 700; color: var(--muted); }
.orgdash .d-sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.orgdash .d-sec-head .d-sec-title { margin: 0; }
.orgdash .d-box > .thermo-card { border: 0; padding: 0; }
.orgdash .d-box > .thermo-card::before { left: -30px; bottom: -70px; }

/* 전도 목표/결과 등 */
.orgdash .ev-list { display: flex; flex-direction: column; gap: var(--sp-2); }
/* ★ 이름·값 칸은 **글자 크기에 맞춰 같이 커져야 한다**(2026-09-11 지시).
   종전에는 66px / 62px 로 못 박혀 있어서, 글자 크기를 '크게'·'아주 크게'로 올리면
   '0/1' 같은 값이 62px 를 넘쳐 오른쪽 달성률 칸을 밀어냈다. 목표가 없어 '0' 만 있는
   줄은 안 넘치므로, 줄마다 달성률 시작 위치가 달라져 표가 어긋나 보였다.
   ★ **마지막(달성률) 칸도 폭을 못 박는다.** .ev-list 는 flex 라 줄마다 따로 grid 이고,
     auto 로 두면 그 줄 내용만큼만 잡힌다 — '▼ 0%'(34px)와 '목표 없음'(51px)의 폭이
     달라서 줄마다 막대·값·달성률이 통째로 16px 씩 어긋났다(2026-09-11 실측). */
.orgdash .ev-item { display: grid;
  grid-template-columns: calc(66px * var(--orgdash-font-scale, 1)) minmax(0,1fr) calc(62px * var(--orgdash-font-scale, 1)) calc(66px * var(--orgdash-font-scale, 1));
  align-items: center; gap: var(--sp-2); font-size: 13px; }
.orgdash .ev-lbl { color: var(--muted); font-weight: 700; white-space: nowrap; }
/* 값 칸은 62px 고정이라 긴 글자가 들어오면 줄이 쪼개져 그 항목만 두 줄이 되고,
   그 줄부터 오른쪽 달성률이 통째로 어긋난다(2026-09-10). 절대 줄바꿈하지 않는다. */
.orgdash .ev-val { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; white-space: nowrap; }
/* 목표 미입력은 달성률 자리에서 말한다 — 숫자가 아니므로 색·굵기를 낮춘다. */
.orgdash .d-rate.is-nogoal { color: var(--muted); font-weight: 600; font-variant-numeric: normal; }
.orgdash .ev-val .muted { font-weight: 700; }
.orgdash .act-list { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 208px; overflow-y: auto; }
.orgdash .act-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); background: var(--soft); border-radius: var(--r); font-size: 13px; min-height: var(--ctl-h-sm); }
.orgdash .act-item .a-left { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.orgdash .act-item .a-name { font-weight: 800; white-space: nowrap; }
.orgdash .act-item .a-what { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orgdash .act-sum { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.orgdash .d-table-scroll { max-height: 340px; overflow-y: auto; }

/* ── 예배취합 ────────────────────────────────────────────────────────────────
   지역 줄이 접이식 머리이고 구역 줄이 그 안이다. 전도현황과 같은 조작감을 노리므로
   색·간격은 그쪽 규칙을 따르고 이 파일 안에서만 정의한다(공용 base.css 를 고치면
   다른 화면의 표까지 같이 움직인다). */
.wsp-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* 회차 버튼은 글자크기 버튼과 같은 규칙을 쓴다 — 이 화면 안에서 고른 상태를
   나타내는 방식이 둘로 갈리면 안 된다. */
.wsp-kinds { display: inline-flex; gap: 4px; }
.orgdash .wsp-kind.btn { padding: 0 var(--sp-3); background: transparent; border-color: transparent; }
.orgdash .wsp-kind.btn:hover:not(:disabled) { color: var(--brand); background: var(--panel); }
.orgdash .wsp-kind.btn.is-on { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }
.wsp-date { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wsp-date b { font-variant-numeric: tabular-nums; }

.wsp-sum { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 10px; }
.wsp-sum b { font-size: 1.15em; }
.wsp-sum em { font-style: normal; opacity: 0.65; margin-left: 1px; }

.wsp-table { width: 100%; }
.wsp-table td, .wsp-table th { vertical-align: middle; }
.wsp-region { cursor: pointer; font-weight: 700; }
/* 펼침 삼각형은 글자로 그린다 — 아이콘 폰트를 새로 물리지 않는다. */
.wsp-region > td:first-child::before {
  content: "▸"; display: inline-block; width: 1em; opacity: 0.55;
  transition: transform 0.12s ease;
}
.wsp-region.is-open > td:first-child::before { transform: rotate(90deg); }

.wsp-child > td:first-child { padding-left: 1.6em; }
.wsp-child .wsp-dname { font-weight: 600; }
.wsp-child .name-cell { margin-left: 8px; }
/* 미발송은 지우지 않고 흐리게만 둔다 — 아직 안 걷힌 구역이 어디인지가 이 화면의 요점이다. */
.wsp-child.is-unsent { opacity: 0.62; }

.wsp-bar {
  display: block; height: 6px; min-width: 60px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent); overflow: hidden;
}
.wsp-bar > i { display: block; height: 100%; background: var(--accent, #2f6df6); border-radius: inherit; }
/* 미발송은 0% 막대가 아니라 빈 자리다(0% 는 "보냈는데 아무도 안 했다"는 뜻이다). */
.wsp-bar.is-unsent { background: transparent; }