/* ════════════════════════════════════════
   교회정보 화면 서식 — public/css/church-info.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> 에
     JS 로 높이를 재지 않는다 — 2026-06-20 방식은 폐기됐다.

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

/* ① 뷰 전체 — 제목·필터는 고정, 목록만 스크롤 */
#view-church-info.active {
  display: flex; flex-direction: column;
  height: calc(100vh - 108px); overflow: hidden;
}
/* ② 머리부(제목·요약·필터)는 줄어들지 않는다 */
.ci-head { flex-shrink: 0; }
/* ③ 목록 영역만 스크롤 — min-height:0 이 없으면 flex 자식이 줄어들지 않아 스크롤이 생기지 않는다 */
.ci-list-wrap {
  flex: 1; min-height: 0; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--border-light); border-radius: 12px;
}
/* 감싸개에 둥근 모서리를 두고 표 자체는 overflow 를 풀어야 sticky 가 산다 */
.ci-list-wrap table { overflow: visible !important; width: 100%; border-collapse: collapse; }
/* ④ 머리행 고정 — 배경색은 <th> 에 준다(<tr> 에 주면 스크롤 시 비쳐 보인다) */
.ci-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;
}
.ci-list-wrap tbody td {
  padding: 8px 9px; font-size: 13px; border-top: 1px solid #eef0f3; vertical-align: middle;
}
.ci-list-wrap tbody tr:hover { background: #fafbfd; }

/* ── 페이지 번호 — 스크롤 영역 안, 마지막 행 아래 ──
   ★가운데 정렬 + 표와의 여백. `.pagination` 클래스를 쓰지 않고 여기서 직접 잡는다
     (이 화면만 카드 「안」에 두는 배치라 공용 규칙과 여백이 다르다).
   내용이 없을 때(1페이지뿐·빈 목록) 빈 띠가 남지 않도록 :empty 는 숨긴다. */
#ci-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;
}
#ci-pagi:empty { display: none; }

/* 요약 카드 — 왼쪽 굵은 테두리 + 알약형 이름표 (인구현황 화면과 같은 얼개) */
.ci-kpi {
  /* 카드 6장이 한 줄에 들어가되, 좁아지면 눌리지 말고 다음 줄로 내려가게 한다 */
  flex: 1 1 150px; min-width: 150px; background: #fff;
  border: 1.5px solid var(--border-light); border-left: 5px solid #2f557f;
  border-radius: 12px; padding: 12px 14px;
}
/* 카드 아래 한 줄 설명 — 「전체가 폐쇄를 뺀 값」 같은 기준을 그 자리에서 알려 준다 */
.ci-kpi-hint { font-size: 11px; color: #8a93a1; margin-top: 5px; line-height: 1.4; }
.ci-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;
}
.ci-kpi-value { font-size: 22px; font-weight: 800; color: #16283f; margin-top: 8px; letter-spacing: -.5px; }

/* 배지 — 배지 칸은 줄바꿈을 막는다(목록형 표준 ④) */
.ci-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ci-b-church { background: #e8f1fb; color: #23558c; }   /* 교회 */
.ci-b-inst   { background: #e7f4ee; color: #0f7a3d; }   /* 기관 */
.ci-b-closed { background: #f1f2f5; color: #5a6675; }   /* 폐쇄 */
.ci-b-org    { background: #eef1f6; color: #4a5568; }   /* 조직 */
.ci-b-unorg  { background: #fdf0e3; color: #b4530f; }   /* 미조직 */

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

/* 폐쇄 교회 행 — 옅은 회색 바탕으로만 구분한다(글자색을 흐리면 읽기 어렵다) */
.ci-row-closed { background: #fafafb; }

/* ── 업로드 드래그앤드롭 영역 ──
   의사록 업로드(.mn-drop)·영수증(.receipt-dropzone)과 같은 얼개로 맞춘다.
   클릭하면 숨겨 둔 <input type="file"> 이 열리므로 커서는 pointer 로 둔다. */
.ci-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;
}
.ci-drop:hover { border-color: #8b5cf6; background: #faf8ff; }
/* 드래그가 올라와 있는 동안 — hover 보다 뚜렷하게 */
.ci-drop.drag { border-color: #8b5cf6; background: #f3eefe; border-style: solid; }
/* 파일을 고른 뒤 — 준비됐다는 표시로 초록 계열 */
.ci-drop.has-file { border-color: #4d9c5f; background: #f4fbf6; border-style: solid; }
.ci-drop i { font-size: 26px; color: #8b5cf6; }
.ci-drop.has-file i { color: #2f7d46; }
.ci-drop-text { margin-top: 9px; font-size: 13px; color: var(--text-sub); word-break: break-all; }
.ci-drop-hint { margin-top: 4px; font-size: 11.5px; color: #9aa3ae; }