/* ════════════════════════════════════════
   각 교회 표준 화면 서식 — public/css/church-standard.css

   ★목록형 화면 고정 스크롤은 순수 CSS 4단으로만 만든다(CLAUDE.md 10항).
     ① 뷰 flex column + height:calc(100vh - 108px) + overflow:hidden
     ② 머리부 flex-shrink:0
     ③ 목록 flex:1 + overflow-y:auto + min-height:0
     ④ 머리행 position:sticky + top:0 + 배경색을 <th> 에

   색은 교단 CI 를 따른다(Denim #2f557f · Ming #3e8391 · Tree Frog #448d21 · Emperor #4b207f).
   ★계열색 위에 흰 글자를 얹지 않는다 — 「옅은 바탕 + 진한 글자」로 쓴다(대비 확보).
════════════════════════════════════════ */

/* ① 뷰 전체 — 제목·필터는 고정, 목록만 스크롤 */
#view-church-standard.active {
  display: flex; flex-direction: column;
  height: calc(100vh - 108px); overflow: hidden;
}
/* ② 머리부(제목·요약·필터)는 줄어들지 않는다 */
.chs-head { flex-shrink: 0; }
/* ③ 목록 영역만 스크롤 — min-height:0 이 없으면 flex 자식이 줄어들지 않아 스크롤이 생기지 않는다 */
.chs-list-wrap {
  flex: 1; min-height: 0; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--border-light); border-radius: 12px;
}
.chs-list-wrap table { overflow: visible !important; width: 100%; border-collapse: collapse; }
/* ④ 머리행 고정 — 배경색은 <th> 에 준다(<tr> 에 주면 스크롤 시 비쳐 보인다) */
.chs-list-wrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: #eef2f7; color: #16283f;
  font-size: 12.5px; font-weight: 700; text-align: center;
  padding: 9px 8px; border-bottom: 1.5px solid #cfd9e6; white-space: nowrap;
}
/* 누르면 정렬되는 머리칸 */
.chs-list-wrap thead th.chs-sort { cursor: pointer; user-select: none; }
.chs-list-wrap thead th.chs-sort:hover { background: #e2e9f3; }
.chs-list-wrap thead th.chs-sort.on { background: #dce7f5; color: #23558c; }

.chs-list-wrap tbody td {
  padding: 8px 9px; font-size: 13px; border-top: 1px solid #eef0f3; vertical-align: middle;
}
.chs-list-wrap tbody tr:hover { background: #fafbfd; }
/* 숫자 칸 — 자릿수가 눈으로 맞도록 */
.chs-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 페이지 번호 — 스크롤 영역 안, 마지막 행 아래(목록형 표준 1-2-1 예외절) ── */
#chs-pagi {
  display: flex; justify-content: center; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 20px 12px 22px; margin-top: 6px; border-top: 1px solid #eef0f3; background: #fff;
}
#chs-pagi:empty { display: none; }

/* 요약 카드 */
.chs-kpi {
  flex: 1 1 148px; min-width: 148px; background: #fff;
  border: 1.5px solid var(--border-light); border-left: 5px solid #2f557f;
  border-radius: 12px; padding: 12px 14px;
}
.chs-kpi-hint { font-size: 11px; color: #8a93a1; margin-top: 5px; line-height: 1.4; }
.chs-kpi-label {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800; background: #eaf2fa; color: #23558c; border: 1px solid #b9d3ec;
}
.chs-kpi-value { font-size: 21px; font-weight: 800; color: #16283f; margin-top: 8px; letter-spacing: -.5px; }

/* 배지 — 줄바꿈을 막는다(목록형 표준 ④) */
.chs-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

/* 업로드 미리보기 — 상태별 색 */
.chs-st-new    { background: #e7f6ec; color: #0f7a3d; }
.chs-st-update { background: #fdf0e3; color: #b4530f; }
.chs-st-same   { background: #eef1f6; color: #5a6675; }
.chs-st-error  { background: #fbeaea; color: #c0392b; }

/* 등록·수정 창의 입력 격자 */
.chs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 12px; }
.chs-cell { min-width: 0; }
.chs-cell label {
  display: block; font-size: 12px; color: var(--text-sub); font-weight: 600; margin-bottom: 4px;
}
.chs-cell input { width: 100%; }
/* 자연키 두 칸은 수정 창에서 잠근다 — 바꾸면 다른 줄이 된다 */
.chs-cell input[readonly] { background: #f4f5f7; color: #5a6675; }
/* 단위 꼬리표(원·명·부) */
.chs-unit {
  margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: #eef1f6; color: #5a6675; font-size: 10.5px; font-weight: 700;
}

/* ── 업로드 드래그앤드롭 영역 (다른 화면과 같은 얼개) ── */
.chs-drop {
  border: 2px dashed #b9c2ce; border-radius: 10px;
  padding: 22px 14px; text-align: center; cursor: pointer;
  background: #fff; user-select: none;
  transition: border-color .18s, background .18s;
}
.chs-drop:hover { border-color: #8b5cf6; background: #faf8ff; }
.chs-drop.drag { border-color: #8b5cf6; background: #f3eefe; border-style: solid; }
.chs-drop.has-file { border-color: #4d9c5f; background: #f4fbf6; border-style: solid; }
.chs-drop i { font-size: 26px; color: #8b5cf6; }
.chs-drop.has-file i { color: #2f7d46; }
.chs-drop-text { margin-top: 9px; font-size: 13px; color: var(--text-sub); word-break: break-all; }
.chs-drop-hint { margin-top: 4px; font-size: 11.5px; color: #9aa3ae; }