@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  /* 글씨 배율(2026-08-14). 자문회 요청 — 눈이 어두운 분이 스스로 키울 수 있어야 한다.
     내 정보 모달에서 고르면 JS 가 이 값만 바꾸고, 모든 font-size 가 calc 로 이 값을 곱한다.
     px 를 rem 으로 갈아엎지 않은 이유: 여백·높이까지 함께 흔들려 레이아웃이 깨진다.
     ⚠ 이 블록은 반드시 @import 뒤에 있어야 한다 — 앞에 두면 @import 가 무시돼 폰트가 안 뜬다. */
  --fs: 1;
  --bg: var(--tg-theme-bg-color, #f0f2f5);
  --card: var(--tg-theme-secondary-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #6b7280);
  --accent: var(--tg-theme-button-color, #007aff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  /* ★ --accent 는 '버튼 배경'용 색이다(텔레그램 button_color). 글자색으로 쓰면
     밝은 테마에서 읽을 수 없다 — 카톡풍 노랑은 흰 카드 위 대비가 1.28 이고,
     폴백인 기본 파랑조차 4.02 로 본문 기준 4.5 에 못 미친다.
     그래서 글자에는 반드시 --accent-ink 를 써라. app-01-core.js 가 테마를 읽어
     4.5:1 을 넘는 선에서 원색을 최대한 남긴 값으로 채워 넣는다.
     배경·테두리·포커스에는 --accent 를 그대로 써도 된다.
     아래 값은 JS 가 못 돌았을 때의 안전한 폴백이다(색은 죽지만 읽을 수는 있다). */
  --accent-ink: var(--text);
  /* 선택된 항목의 옅은 배경. 전에는 rgba(36,129,204,.08) 로 테마 파랑이 박혀 있어
     다른 테마에서 겉돌았다. 이름에 숫자를 넣지 않는다 — 값만 바꿔도 거짓말이 된다. */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-focus-ring: color-mix(in srgb, var(--accent) 15%, transparent);
  /* 아래 셋은 app.js가 참조하는데 정의가 없어 지금까지 조용히 무시됐다.
     텔레그램이 주는 테마 값을 우선 쓰고, 앱 밖(개발 로그인)에선 폴백을 쓴다. */
  --text-2: var(--tg-theme-subtitle-text-color, #4b5563);
  --border: rgba(128, 128, 128, .2);
  --danger: var(--tg-theme-destructive-text-color, #e53935);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Pretendard', sans-serif;
  background: var(--bg); color: var(--text);
  max-width: 480px; margin: 0 auto; min-height: 100vh;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

.screen { display: none; padding: 16px; animation: fadeIn 0.3s ease-out; }
.screen.active { display: block; }
header {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: sticky; top: -1px; z-index: 10;
  margin: -16px -16px 16px -16px; padding: 16px;
  border-bottom: 1px solid rgba(128,128,128,0.1);
}
header h1 { font-size: calc(20px * var(--fs)); flex: 1; font-weight: 700; }
.back-btn {
  border: none; background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-ink); font-size: calc(32px * var(--fs)); font-weight: 700; line-height: 1;
  cursor: pointer; padding: 5px 16px 11px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.back-btn:active { transform: scale(0.9); }
.chip {
  font-size: calc(12px * var(--fs)); background: var(--accent); color: var(--accent-text);
  border-radius: 12px; padding: 4px 10px; white-space: nowrap;
  font-weight: 600;
}
/* 대시보드 우상단: 칩(이름·직분) + 위치 + 수정 버튼을 한 곳에 모음 */
.dash-id { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dash-id-sub { display: flex; align-items: center; gap: 6px; }
.dash-loc-inline { font-size: calc(12px * var(--fs)); color: var(--hint); font-weight: 600; white-space: nowrap; }
.dash-edit-btn {
  border: none; background: none; color: var(--accent-ink);
  font-size: calc(12px * var(--fs)); font-weight: 600; white-space: nowrap;
  cursor: pointer; padding: 2px 4px;
}
.dash-edit-btn:active { transform: scale(0.94); }
.login-section-label {
  font-size: calc(13px * var(--fs));
  color: var(--hint);
  margin-top: 18px;
  margin-bottom: 8px;
}
.login-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0 24px;
}

.card {
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border-radius: 16px; padding: 16px;
  margin-bottom: 12px; box-shadow: 0 4px 15px rgba(0,0,0,.05);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(128,128,128,.1);
}
.section-title {
  font-size: calc(13px * var(--fs)); color: var(--hint); font-weight: 600;
  margin: 18px 4px 8px; text-transform: uppercase;
}
.region-title { font-size: calc(17px * var(--fs)); font-weight: 700; margin: 22px 4px 4px; }
.region-sub { font-size: calc(12px * var(--fs)); color: var(--hint); font-weight: 500; }

/* 접속 기록 — 접속 한 줄 밑에 접어 두는 그 세션의 작업 목록(2026-08-09).
   부모가 이미 .card 안의 .inquiry-item이라 자식에 카드 배경을 또 깔지 않는다.
   왼쪽 세로선과 들여쓰기만으로 층을 낸다 — 목록 밀도를 지키기 위해서다. */
.log-toggle { font-size: calc(12px * var(--fs)); color: var(--accent-ink); cursor: pointer; user-select: none;
              margin-top: 5px; }
.log-children { margin: 6px 0 2px 4px; padding-left: 10px;
                border-left: 2px solid rgba(128, 128, 128, .25); }
.log-child { font-size: calc(12px * var(--fs)); color: var(--hint); line-height: 1.7; }
.team-title { font-size: calc(13px * var(--fs)); color: var(--hint); font-weight: 600; margin: 12px 4px 6px 10px; }
.team-block { margin-left: 10px; }
.dash-loc { font-size: calc(13px * var(--fs)); color: var(--hint); font-weight: 600; margin: 0 4px 16px; }
.dash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* 문의사항은 기능 타일과 성격이 달라 그리드에서 빼고 화면 최하단 가운데에 링크로 깐다 */
.dash-bottom { text-align: center; margin: 28px 0 8px; }
.dash-inquiry {
  border: none; background: none; color: var(--hint);
  font-size: calc(13px * var(--fs)); font-weight: 500; text-decoration: underline;
  cursor: pointer; padding: 10px 14px;
}
.dash-inquiry:active { opacity: .7; }
.dash-tile {
  background: linear-gradient(135deg, color-mix(in srgb, var(--card) 90%, transparent), color-mix(in srgb, var(--card) 60%, transparent));
  border: 1px solid rgba(128,128,128,.15); border-radius: 16px;
  padding: 30px 8px; text-align: center; font-size: calc(15px * var(--fs)); font-weight: 600; cursor: pointer;
  color: var(--text); box-shadow: 0 6px 16px rgba(0,0,0,.06); line-height: 1.3;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.2s ease;
}
.dash-tile:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.dash-tile.primary { 
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 80%, black)); 
  border-color: transparent; color: var(--accent-text); 
}
/* 카드는 위아래 두 칸이다 — 위는 정보 행, 아래는 접혀 있는 관리 버튼. */
.district-card { display: block; cursor: pointer; }
/* min-height 는 관리 토글(36px)이 음수 마진으로 빠져나온 뒤에도 정보 행 높이를
   28px 로 고정해, 관리자 화면과 일반 화면의 카드 높이를 62px 로 같게 만든다. */
.district-summary {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; min-height: calc(28px * var(--fs));
}
.district-card .name {
  flex: 1 1 auto; min-width: 0;
  font-size: calc(16px * var(--fs)); font-weight: 600; line-height: 1.45;
  /* 한글이 글자 사이 아무 데서나 끊기지 않게 — 띄어쓰기에서만 끊는다 */
  word-break: keep-all; overflow-wrap: normal;
}
/* 구역장 이름은 '통째로' 다룬다 — 자리가 모자라면 이름 중간이 아니라 이름 전체가
   다음 줄로 내려간다. 그 한 이름이 카드 폭보다도 길 때만 … 로 자른다. */
.district-card .leader {
  display: inline-block; max-width: 100%; vertical-align: bottom;
  font-size: calc(12px * var(--fs)); font-weight: 400; color: var(--hint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.district-card .count {
  flex: none; white-space: nowrap;
  font-size: calc(13px * var(--fs)); color: var(--hint);
}
/* 관리 메뉴 여는 버튼. 손가락이 닿을 36px 을 확보하되 위아래 -4px 마진으로
   레이아웃에서는 28px 만 차지하게 해서 카드가 높아지지 않게 한다. */
.district-actions-toggle {
  flex: none;
  width: calc(32px * var(--fs)); height: calc(36px * var(--fs));
  margin: calc(-4px * var(--fs)) 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--accent-ink);
  cursor: pointer; line-height: 1; user-select: none;
}
.district-toggle-dots { font-size: calc(16px * var(--fs)); line-height: 1; }
.district-toggle-arrow { font-size: calc(10px * var(--fs)); line-height: 1; }
/* 열린 카드는 토글을 액센트로 채워 한눈에 보이게 한다. 화살표(8px)만으로는 약하다. */
.district-card.is-actions-open .district-actions-toggle {
  border-color: var(--accent); background: var(--accent); color: var(--accent-text);
}
.district-actions-toggle:focus-visible {
  outline: calc(2px * var(--fs)) solid var(--accent);
  outline-offset: calc(2px * var(--fs));
}
.member-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid rgba(128,128,128,.15);
  cursor: pointer;
}
.member-row:last-child { border-bottom: none; }
.member-row .info .name { font-size: calc(15px * var(--fs)); font-weight: 600; }
.member-row .info .sub { font-size: calc(13px * var(--fs)); color: var(--hint); margin-top: 2px; }
.member-row .info { min-width: 0; }
/* 배지 묶음: 신앙단계 · 직분 순서로 열을 고정 */
.member-row .tags { flex: none; flex-shrink: 0; display: flex; align-items: center; gap: 6px; margin-left: 8px; white-space: nowrap; }
.member-row .duty {
  flex: none; flex-shrink: 0; margin-left: 6px; box-sizing: border-box; text-align: center;
  font-size: calc(12px * var(--fs)); color: var(--accent-ink); white-space: nowrap;
  border: 1px solid var(--accent); border-radius: 10px; padding: 2px 8px;
}
.member-row .tags .duty { margin-left: 0; }
/* 목록에서 가장 넓은 배지 폭(JS가 계산)으로 통일 → 행마다 위치가 어긋나지 않음 */
.member-row .tags .duty.faith { width: var(--faith-w, auto); }
.member-row .tags .duty.role { width: var(--role-w, auto); }
/* 값이 없는 배지는 자리만 차지 */
.member-row .duty.empty { visibility: hidden; padding: 0; border: none; }
/* 신앙단계 배지는 직분(단계)과 구분되게 채워서 */
.member-row .duty.faith { background: var(--accent); color: var(--accent-text); }
/* 신앙단계관리 목록의 미분류 배지 */
.member-row .duty.ghost { color: var(--hint); border-color: rgba(128,128,128,.4); }
.member-row .uno { font-size: calc(12px * var(--fs)); color: var(--hint); font-weight: 400; }
.btn {
  width: 100%; border: none; border-radius: 14px; padding: 14px;
  font-size: calc(16px * var(--fs)); font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--accent-text); margin-top: 12px;
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s ease;
}
.btn:active { transform: scale(0.96); opacity: 0.9; }
/* 저장 중처럼 잠깐 못 누르는 상태 — 눌리는 느낌(scale)까지 없애야 "안 먹었나" 하고 또 안 누른다 */
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:active { transform: none; }
/* 보조 버튼도 눈에 들어오게 옅은 채움과 테두리를 준다(2026-08-08 요청) — 전에는
   완전 투명이라 메인 화면에서 '구역성도님 추가'만 버튼처럼 보이고 나머지는 글자만
   떠 있었다. 색은 --accent에서 파생만 시킨다: 배경을 직접 칠하면 테마에 따라 밝은
   배경 위 흰 글자가 되는 사고가 있었다(§2-86). danger-soft와 같은 방식. */
.btn.secondary {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.btn.secondary:active { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.btn.danger { background: #e53935; color: #fff; }
/* 되돌릴 수 없는 조작용 버튼(구역장 이관). 삭제(.btn.danger)와 같은 위험 계열이지만
   한 모달에 나란히 서므로 채움 대신 테두리로 구분한다. 색을 직접 박지 않고 --danger만
   쓰는 이유: 배경을 칠하면 테마에 따라 밝은 배경 위 흰 글자가 되는 사고가 있었다(§2-86). */
.btn.danger-soft {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}
/* 라벨/값과 한 줄에 나란히 두는 작은 버튼. .btn의 width:100%/margin-top이
   flex row 안에서 옆 span을 짜부라뜨려 텍스트가 세로로 줄바꿈되던 문제를 막는다. */
.btn-inline { width: auto; flex-shrink: 0; margin-top: 0; padding: 6px 10px; font-size: calc(12px * var(--fs)); }
/* 내 정보 모달 액션 줄 — [🔁 구역장 이관]과 [🚚 구역 이동 요청]을 한 자리에 나란히 둔다.
   .btn의 width:100%/margin-top이 flex row 안에서 서로를 밀어내므로 여기서 다시 잡는다.
   한쪽만 보이는 계정에서는 그 버튼이 줄을 다 쓰고, 좁은 화면에서는 wrap되어 세로로 쌓인다.
   색은 테마 변수만 쓴다 — 배경을 직접 칠하면 다크테마에서 흰 배경 위 흰 글자가 된다(§2-86). */
.myinfo-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.myinfo-actions .btn {
  flex: 1 1 132px; width: auto; margin-top: 0;
  padding: 12px 8px; font-size: calc(14px * var(--fs));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.myinfo-actions + .field-hint { margin: 8px 2px 0; }
/* 모달 안 인라인 확인 단계 — 저장 직전에 한 번 되묻는다(심방일지 대상자 변경 등).
   텔레그램 앱 웹뷰에서 window.confirm()이 안 뜨는 경우가 있어(특히 iOS) 네이티브
   대화상자를 안 쓰고 모달 안에서 처리한다. 문구·버튼은 등록 확인 모달(claim-confirm)의
   "맞습니다 / 다시 확인" 두 버튼 패턴을 그대로 따른다.
   색은 테마 변수만 — 배경을 직접 칠하면 다크테마에서 흰 배경 위 흰 글자가 된다(§2-86). */
.inline-confirm {
  margin-top: 14px; padding: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 12px;
}
.inline-confirm-q { font-size: calc(14px * var(--fs)); line-height: 1.6; color: var(--text); word-break: keep-all; }
.inline-confirm-q b { color: var(--accent-ink); }
/* .btn의 width:100%/margin-top이 flex row 안에서 서로를 밀어내므로 여기서 다시 잡는다.
   320px에서는 wrap되어 세로로 쌓인다(잘리지 않는다). */
.inline-confirm-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-confirm-acts .btn {
  flex: 1 1 120px; width: auto; margin-top: 10px;
  padding: 12px 8px; font-size: calc(15px * var(--fs));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.user-btn {
  width: 100%; text-align: left; border: none; background: var(--card);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 8px;
  font-size: calc(15px * var(--fs)); cursor: pointer; color: var(--text);
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1);
}
.user-btn:active { transform: scale(0.98); }
.empty { text-align: center; color: var(--hint); padding: 30px 0; font-size: calc(14px * var(--fs)); }
.notice { text-align: center; padding: 60px 20px; color: var(--hint); line-height: 1.6; }
/* modal */
.modal-bg {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4);
  z-index: 10; align-items: flex-end; justify-content: center;
}
.modal-bg.active { display: flex; }
.modal {
  background: color-mix(in srgb, var(--card) 90%, transparent); width: 100%; max-width: 480px;
  border-radius: 24px 24px 0 0; padding: 24px 16px 28px;
  max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: slideUp 0.3s cubic-bezier(0.2,0.8,0.2,1);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.1);
  border-top: 1px solid rgba(128,128,128,.15);
}
.modal h2 { font-size: calc(19px * var(--fs)); font-weight: 700; margin-bottom: 16px; }
.modal label { display: block; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--hint); margin: 12px 2px 6px; }
.modal input, .modal textarea, .modal select {
  width: 100%; border: 1px solid rgba(128,128,128,.2); border-radius: 12px;
  padding: 12px 14px; font-size: calc(15px * var(--fs)); background: var(--bg); color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.modal input:focus, .modal textarea:focus, .modal select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
/* 입력칸 바로 아래 붙는 형식 안내문 */
.field-hint { font-size: calc(12px * var(--fs)); color: var(--hint); line-height: 1.5; margin: 4px 2px 0; }
.field-hint b { color: var(--accent-ink); }
/* 안내 배지·블록 — 좌우 여백은 .field-hint(2px)에 맞춰 카드와 어긋나지 않게 */
.notice-tag {
  display: inline-block; white-space: nowrap; margin-right: 6px;
  font-size: calc(11px * var(--fs)); font-weight: 700; line-height: 1.5;
  color: #fff; background: #e53935; border-radius: 999px; padding: 1px 8px;
}
.notice-tag.ref { background: rgba(128,128,128,.22); color: var(--hint); }
.notice-important {
  font-size: calc(13px * var(--fs)); line-height: 1.6; color: var(--text);
  background: rgba(229,57,53,.08);
  border-left: 3px solid #e53935; border-radius: 8px;
  padding: 11px 12px; margin: 12px 2px 0;
}
.notice-important b { color: #e53935; }

.notice-ref {
  font-size: calc(13px * var(--fs)); line-height: 1.6; color: var(--hint);
  background: var(--bg); border: 1px dashed rgba(128,128,128,.4);
  border-radius: 10px; padding: 11px 12px; margin: 10px 2px 0;
}
/* 라벨 옆 "(선택)" 같은 보조 표기 */
.opt { font-size: calc(12px * var(--fs)); font-weight: 500; color: var(--hint); }
.check-row {
  display: flex; align-items: center; gap: 8px; margin: 10px 2px 4px;
  font-size: calc(14px * var(--fs)); color: var(--text); cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; padding: 0; border-radius: 4px; accent-color: var(--accent);
}
/* 소속(지역 → 팀 → 구역) 선택 */
.place-picked {
  font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--hint);
  background: var(--bg); border: 1px solid rgba(128,128,128,.3);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.place-picked.done { color: var(--accent-ink); border-color: var(--accent); }
/* 회 → 지역 → (팀) → 구역 드롭다운을 세로로 쌓는다. 예전 칩 격자(.place-grid)는
   관리자에게 34지역이 한꺼번에 깔려 고르기 어려웠다 — max-height/스크롤도 그때 필요했던
   것이라 함께 걷어냈다(드롭다운은 몇 줄 안 된다). 남아 있던 죽은 규칙
   .place-step/.place-grid/.place-item 도 2026-08-25 에 정리했다. */
.place-list {
  border: 1px solid rgba(128,128,128,.3); border-radius: 10px;
  padding: 8px 10px 12px; background: var(--bg);
}
.place-field { margin-top: 6px; }
.place-field:first-child { margin-top: 0; }
.place-field select { width: 100%; }
.stage-list {
  max-height: 40vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(128,128,128,.3); border-radius: 10px;
  padding: 6px 8px 10px; background: var(--bg);
}
/* 정보입력에선 신앙단계표를 보기만(조정 불가) — 신앙단계관리에서만 편집 */
.stage-list.readonly { opacity: .85; }
.stage-list.readonly .stage-item { cursor: default; pointer-events: none; }
.faith-hint {
  font-size: calc(12px * var(--fs)); color: var(--hint); line-height: 1.5;
  background: var(--bg); border: 1px dashed rgba(128,128,128,.4);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
}
.faith-hint b { color: var(--accent-ink); }
/* 문의 화면 안내 — 참여를 유도하는 문구라 눈에 띄어야 한다.
   전에는 --hint 회색 13px 가운데정렬이라 배경에 묻혀 읽히지 않았다(2026-08-14 교체). */
.inq-notice {
  font-size: calc(14px * var(--fs)); line-height: 1.65;
  color: var(--text); font-weight: 600; text-align: left;
  /* 한글이 줄 끝에서 '빠 / 르게' 처럼 쪼개지지 않게. 띄어쓰기에서만 끊는다. */
  word-break: keep-all; overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 12px; padding: 12px 14px; margin: 12px 0 4px;
}
.inq-notice b { color: var(--accent-ink); font-weight: 800; }
.stage-owner {
  font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--accent-ink);
  padding: 10px 2px 2px; border-top: 1px solid rgba(128,128,128,.2); margin-top: 6px;
}
.stage-list .stage-owner:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.stage-group { font-size: calc(12px * var(--fs)); color: var(--hint); font-weight: 600; padding: 6px 2px 3px; }
.stage-item {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  background: var(--card); border: 1px solid transparent;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 4px;
}
.stage-item.picked { border-color: var(--accent); background: var(--accent-soft); }
.stage-code {
  flex: none; min-width: 34px; text-align: center;
  font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 6px; padding: 2px 4px;
}
.stage-item.picked .stage-code { background: var(--accent); color: var(--accent-text); }
.stage-desc { font-size: calc(13px * var(--fs)); line-height: 1.45; }
/* 내용 칸이 없는 표(자문회/부녀회)는 구분만 한 줄로 */
.stage-item.code-only { justify-content: center; padding: 10px; }
/* 표 아래 각주. 고를 수 있는 항목과 헷갈리지 않게 테두리 없이 흐린 글씨로 둔다. */
.stage-note {
  font-size: calc(12px * var(--fs));
  color: var(--hint);
  line-height: 1.5;
  padding: 10px 2px 2px;
}
.stage-item.code-only .stage-code { font-size: calc(13px * var(--fs)); padding: 3px 12px; }
.stage-list.compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.stage-list.compact .stage-item { margin-bottom: 0; padding: 10px 4px; }
.stage-list.compact .stage-code { min-width: 0; padding: 3px 6px; }
.move-row { display: flex; gap: 8px; align-items: center; }
.move-row button { margin: 0; width: auto; white-space: nowrap; padding: 11px 16px; }
.modal textarea { resize: none; height: 64px; }
.visit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.visit-date { font-weight: 600; font-size: calc(15px * var(--fs)); }
/* 일지 카드 오른쪽 수정/삭제 묶음 — 사용자 목록의 액션 묶음과 같은 생김새 */
.visit-acts, .user-actions { flex: none; display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.visit-edit { border: none; background: none; color: var(--accent-ink); font-size: calc(13px * var(--fs)); font-weight: 600; cursor: pointer; padding: 4px 2px; }
.visit-del { border: none; background: none; color: #e53935; font-size: calc(13px * var(--fs)); cursor: pointer; padding: 4px 2px; }
.user-status { color: var(--hint); }
.user-status.linked { color: #1f8f49; font-weight: 600; }
.visit-content { font-size: calc(14px * var(--fs)); white-space: pre-wrap; line-height: 1.5; }
/* 첨부 링크는 심방일지·문의사항이 같은 생김새를 공유한다 */
.visit-files, .inquiry-files { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.visit-file, .inquiry-files a {
  display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs));
  color: var(--accent-ink); text-decoration: none; word-break: break-all;
  background: var(--bg); border: 1px solid rgba(128,128,128,.2);
  border-radius: 8px; padding: 9px 11px;
}
.visit-file .ico, .inquiry-files a .ico { flex: none; }
.visit-author { font-size: calc(12px * var(--fs)); color: var(--hint); margin-top: 10px; text-align: right; }
.visit-row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(128,128,128,.15);
}
.visit-row:first-child { padding-top: 4px; }
.visit-row:last-child { border-bottom: none; padding-bottom: 4px; }
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(30,30,30,.9); color: #fff; padding: 10px 18px;
  border-radius: 20px; font-size: calc(14px * var(--fs)); display: none; z-index: 20;
}

/* ---- 구역온도 ---- */
.month-bar {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-size: calc(15px * var(--fs)); font-weight: 700; margin-bottom: 12px;
}
.month-btn {
  border: none; background: none; color: var(--accent-ink); font-size: calc(20px * var(--fs));
  cursor: pointer; padding: 4px 10px; border-radius: 8px; line-height: 1;
}
.month-btn:active { background: rgba(128,128,128,.14); }
/* 온도계 = 왼쪽 눈금 + 유리관·구근 통짜 실루엣(#thermoClip, SVG clip-path) + 그 안의 채움.
   예전엔 각진 사각형(tube)과 원(bulb)을 별개 DOM/그림자로 겹쳐서 이음매가 보였다.
   지금은 유리 배경과 채움 둘 다 같은 clip-path 하나 안에서 그려지므로
   관과 구근 경계에 물리적으로 선이 생길 수 없다. clip-path는 objectBoundingBox(0~1 비율)라
   --thermo-w/--thermo-h만 바꾸면(반응형 미디어쿼리) 모양은 그대로 크기만 따라간다.
   --thermo-col(눈금 0~1000 구간, 둥근 뚜껑 포함) + --thermo-foot(구근+어깨, 항상 채워짐) = --thermo-h */
.thermo-card {
  --thermo-w: 60px;
  --thermo-h: 255.8px;
  --thermo-foot: 65.8px;
  --thermo-col: 190px;
  position: relative; overflow: hidden;
  padding: 20px 16px 16px;
}
/* 구근 뒤로 은은하게 번지는 온기. 저채도·저투명이라 라이트/다크 어디서나 무난하다 */
.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%);
}
.thermo-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.thermo {
  flex: none; display: flex; align-items: flex-start; gap: 10px;
  padding: 28px 6px 6px 0;   /* 위: '목표 돌파' 깃발 자리. 구근이 이제 박스 안에 다 들어있어 아래 여유는 조금만 */
}
/* 눈금 라벨(200도 단위: 1000·800·600·400·200·0). 각 span은 top(JS가 %로 지정)에
   눈금선을 정확히 꽂고, 안쪽 <i>만 translateY(-50%)로 그 지점에 수직 중앙 정렬한다 —
   숫자를 span 자체에서 flex 중앙정렬하면 줄높이 계산이 브라우저마다 미세하게 튀어
   눈금선과 어긋나 보이는 문제(특히 200·400처럼 border라벨 없는 가운데 칸)가 있었다. */
.thermo-scale {
  position: relative; z-index: 2;      /* 눈금선이 관 위로 올라오게 */
  width: 36px; height: var(--thermo-col);
  font-size: calc(10.5px * var(--fs)); line-height: 1; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.3px;
  color: var(--hint);                                        /* 구형 폴백 */
  color: color-mix(in srgb, var(--text) 70%, transparent);   /* 대비 확보 */
}
.thermo-scale span {
  position: absolute; left: 0; right: 0;
  white-space: nowrap;
}
.thermo-scale span i {
  position: absolute; top: 0; right: 0;
  transform: translateY(-50%);
  font-style: normal;
}
.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;
}
.thermo-scale span:not(:first-child):not(:last-child)::after {  /* 관 위로 지나는 가는 눈금선.
  currentColor라 라이트/다크 어느 테마에서도 자동으로 대비가 맞는다(예전엔 흰색 고정이라 밝은 배경에서 안 보였다) */
  content: ''; position: absolute; top: 0; left: 100%;
  margin-left: 9px; width: 32px; height: 1px;
  background: currentColor; opacity: .16;
}
.thermo-scale span:first-child, .thermo-scale span:last-child { font-weight: 800; }
/* 드롭섀도우는 바깥(wrap)에서, clip-path는 안쪽(glass)에서 — 같은 요소에 두면
   실루엣 밖으로 나가는 그림자까지 clip-path가 잘라버려서 반드시 분리해야 한다 */
.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));
}
.thermo-glass {
  position: relative; width: 100%; height: 100%;
  clip-path: url(#thermoClip);
  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%);
}
.thermo-fill-track {
  position: absolute; left: 0; right: 0;
  bottom: var(--thermo-foot); height: var(--thermo-col);
}
/* 채움: 아래쪽 그라데이션 레이어는 관 전체 높이로 고정 + 아래 정렬해서
   낮으면 파랑, 높이 찰수록 청록→금빛→주황→빨강이 드러난다.
   위쪽 레이어는 액면(meniscus) 하이라이트 — 채움 박스 자체의 top(=현재 액면)에 얹혀
   height가 바뀌어도 늘 액체 표면에 붙어 함께 움직인다(별도 JS 계산 불필요).
   .thermo-glass의 clip-path 안쪽에서 그려지므로 구근 쪽으로 넘쳐도 실루엣 밖으로 안 샌다 */
.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);
}
.thermo-fill.over {            /* 100% 이상 = 짙은 빨강 + 번지는 빛 + 깃발 */
  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: thermo-pulse 1.9s ease-in-out infinite;
}
@keyframes thermo-pulse {
  0%, 100% { box-shadow: 0 0 9px rgba(211,47,47,.35); }
  50%      { box-shadow: 0 0 20px rgba(211,47,47,.7); }
}
.thermo-flag {
  display: none; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); margin-bottom: 8px;
  white-space: nowrap; font-size: calc(10px * var(--fs)); 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);
}
.thermo-flag::after {          /* 아래를 가리키는 삼각형 */
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #b71c1c;
}
/* 깃발이 이제 .thermo-glass-wrap 직계 자식(clip-path 밖)이라 .thermo-fill.over의
   형제가 아니게 됐다 — :has()로 wrap 안 어딘가에 .over가 있는지 보고 wrap 기준으로 노출 */
.thermo-glass-wrap:has(.thermo-fill.over) .thermo-flag { display: block; }
.thermo-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.thermo-deg { font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--hint); line-height: 1; }
.thermo-deg b {
  font-size: calc(40px * var(--fs)); 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;
}
.thermo-sub { font-size: calc(13px * var(--fs)); color: var(--hint); margin-top: 8px; }
.thermo-pct {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px;
  font-size: calc(12px * var(--fs)); 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);
}
.thermo-pct::before { content: '🔥'; font-size: calc(11px * var(--fs)); }
.thermo-by {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 16px; padding-top: 13px;
  border-top: 1px solid rgba(128,128,128,.18);
}
.temp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: calc(12px * var(--fs)); background: rgba(128,128,128,.12);
  border-radius: 999px; padding: 5px 10px 5px 9px;
}
.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;
}
.temp-chip.muted { color: var(--hint); }
@media (max-width: 359px) {
  .thermo-card { --thermo-w: 50px; --thermo-h: 215px; --thermo-col: 160px; --thermo-foot: 55px; }
  .thermo-top { gap: 12px; }
  .thermo-deg b { font-size: calc(33px * var(--fs)); }
}
@media (prefers-reduced-motion: reduce) {
  .thermo-fill.over { animation: none; box-shadow: 0 0 14px rgba(211,47,47,.5); }
}
/* 대분류 고르기. 개수는 서버(config.py TEMP_ACTIONS)가 정하므로 몇 개든 받아야 한다.
   2열을 유지하는 이유(실측, 모달 폭 기준): 3열로 넓히면 360px에선 버티지만 320px부터
   '전단지배포'(5글자)가 줄바꿈돼 그 줄만 43px→59px로 솟는다. 2열은 280px까지 43px 유지.
   텔레그램 웹앱은 폭이 좁아 320px 이하가 실제로 나온다. 대신 개수가 홀수면 마지막 하나가
   한 줄을 다 쓰게 해 빈칸을 없앤다(:last-child:nth-child(odd) = 짝이 없는 마지막 항목). */
.temp-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 6px 0 4px; }
.temp-actions > :last-child:nth-child(odd) { grid-column: span 2; }
/* 활동참여 모달의 대분류 버튼(#activity-category-list)도 2열 그리드라 같은 규칙을 쓴다.
   그리드 정의는 그쪽 인라인 스타일에 있고 여기서는 마지막 짝 없는 칸만 늘린다. */
#activity-category-list > :last-child:nth-child(odd) { grid-column: span 2; }
.temp-action {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid rgba(128,128,128,.3); border-radius: 10px;
  padding: 11px 8px; font-size: calc(14px * var(--fs)); text-align: center; cursor: pointer;
}
.temp-action.picked { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.temp-preview { font-size: calc(13px * var(--fs)); color: var(--hint); text-align: center; margin: 12px 0 2px; }
.temp-preview b { font-size: calc(15px * var(--fs)); color: #e0392c; }
/* 활동참여 행 오른쪽의 버튼 묶음(수정 ✎ · 삭제 ✕).
   .member-row 는 justify-content: space-between 이고 .info 에는 flex-grow 가 없다.
   그래서 버튼을 행에 바로 붙이면 칸이 셋으로 갈라져 **가운데 버튼이 줄 한복판으로
   밀린다**(2026-08-28 ✎ 를 넣었다가 겪었다). 한 덩어리로 싸서 행이 늘 본문·버튼
   둘로만 나뉘게 한다. 버튼을 더 달 때도 반드시 이 안에 넣어라. */
.row-acts { flex: none; display: flex; align-items: center; gap: 10px; margin-left: 10px; }
/* 행간·여백을 같게 둬야 두 버튼이 같은 줄에 앉는다.
   ⚠ 수정 버튼에 연필 기호(✎ U+270E)를 쓰지 마라. 윈도우·안드로이드에서 텍스트
   표시자(U+FE0E)를 붙여도 컬러 이모지로 떨어져, 옆의 가는 ✕ 와 굵기·색·기준선이
   전부 어긋난다(2026-08-28 렌더로 확인). 글자로 쓴다. */
.row-edit, .row-del {
  flex: none; border: none; background: none; cursor: pointer;
  line-height: 1; padding: 4px 0;
}
.row-edit { color: var(--accent-ink); font-size: calc(13px * var(--fs)); font-weight: 600; }
.row-del { color: var(--hint); font-size: calc(14px * var(--fs)); }

/* ---- 전도목표·전도결과 ---- */
/* 색은 구역온도와 같은 주황 계열(#f4511e)로 맞춘다 */
.evang-row { position: relative; padding: 11px 0 11px 32px; border-bottom: 1px solid rgba(128,128,128,.15); }
.evang-row:last-child { border-bottom: none; }
/* 번호 원 + 세로선으로 6단계가 순서대로 이어지는 걸 보여준다 */
.ev-no {
  position: absolute; left: 0; top: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(244,81,30,.12); color: #f4511e;
  font-size: calc(12px * var(--fs)); font-weight: 700; text-align: center; line-height: 22px;
}
.evang-row:not(:last-child)::before {
  content: ''; position: absolute; left: 10px; top: 36px; bottom: -2px;
  width: 2px; background: rgba(244,81,30,.2);
}
.ev-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  background: rgba(128,128,128,.04); border-radius: 12px; padding: 6px 8px;
}
/* 좌우 padding을 반드시 같게 유지할 것 — 예전엔 6px 6px 6px 12px(좌만 12)였는데, 좌우 padding이
   다르면 1fr 트랙 폭이 서로 같아도 그 안쪽 콘텐츠 박스 자체의 중심이 (좌-우)/2만큼 치우쳐서
   가운데(auto) 카운터/입력칸 열이 몇 px 옆으로 밀려 보인다(자릿수 상관없이 항상 같은 방향·크기로) */
.ev-label { min-width: 0; font-size: calc(15px * var(--fs)); font-weight: 600; }
/* min-width:0 없으면 nowrap 텍스트의 내용폭이 그리드 트랙의 최소폭을 밀어올려서
   좌(1fr 라벨)·우(1fr 뱃지) 트랙이 서로 달라지고, 그 결과 가운데(auto) 입력칸열이
   한쪽으로 치우쳐 보인다 — 전도결과 화면(뱃지 있음)에서만 드러나던 정렬 어긋남의 원인 */
.ev-goal {
  justify-self: end; min-width: 0; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--hint);
  white-space: nowrap; background: rgba(128,128,128,.08);
  padding: 6px 8px; border-radius: 8px;
}
/* 카운터+목표·결과 캡션을 한 덩어리로 묶어 행 가운데(1fr auto 1fr의 auto열)에 위치시킨다 */
.ev-input-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ev-cap { font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--hint); }
/* 전도목표·전도결과 공통 +/- 카운터 */
.ev-counter { display: flex; align-items: center; gap: 8px; }
.ev-cbtn {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  border: 1px solid rgba(128,128,128,.25); background: var(--card); color: var(--text);
  font-size: calc(16px * var(--fs)); font-weight: 700; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background .15s, border-color .15s;
}
.ev-cbtn:active { background: rgba(244,81,30,.15); border-color: #f4511e; }
.ev-cbtn:disabled { opacity: .4; cursor: default; }
.ev-cval { min-width: 30px; text-align: center; font-size: calc(16px * var(--fs)); font-weight: 700; }
.ev-prog { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.ev-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(128,128,128,.15); overflow: hidden; }
.ev-fill {
  height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #ff8a4c, #f4511e);
  transition: width .3s ease;
}
.ev-pct { flex: none; min-width: 40px; text-align: right; font-size: calc(12px * var(--fs)); font-weight: 700; color: #f4511e; }
/* 전도결과(이번 주)에서만: 그 단계에 있는 대상자 칩 + 찾기 단계의 이름 추가칸 */
.ev-people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-person {
  display: flex; align-items: center; gap: 4px;
  background: rgba(244,81,30,.08); border: 1px solid rgba(244,81,30,.2);
  border-radius: 999px; padding: 3px 4px 3px 10px; font-size: calc(12px * var(--fs));
}
.ev-person-name { font-weight: 600; }
.ev-person-btn {
  width: 20px; height: 20px; flex: none; border: none; border-radius: 50%;
  background: none; color: #f4511e; font-size: calc(11px * var(--fs)); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.ev-person-btn:active { background: rgba(244,81,30,.2); }
.ev-person-btn:disabled { opacity: .3; cursor: default; }
.ev-person-del { color: var(--hint); font-size: calc(13px * var(--fs)); }
.ev-person-grade {
  font-family: inherit;
  font-size: calc(11px * var(--fs));
  font-weight: 600;
  height: 20px;
  line-height: 1;
  padding: 0 4px;
  border: 1px solid rgba(128,128,128,.3);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  width: auto;
  flex: none;
  white-space: nowrap;
}
.ev-person-grade:focus { border-color: #f4511e; outline: none; }
.ev-person-grade:disabled { opacity: .4; cursor: default; }
/* 이름 입력칸은 칩들 뒤에 딸려 붙어 있어서, 사람이 늘면 줄 끝 아무 데나 밀려났다.
   자기 줄을 차지하게 하고 가운데로 모은다(2026-08-08 요청). flex-basis:100%가
   .ev-people(wrap) 안에서 줄바꿈을 강제하는 역할이다. */
.ev-person-add {
  display: flex; align-items: center; gap: 6px;
  flex-basis: 100%; justify-content: center; margin-top: 4px;
}
.ev-person-add .ev-person-grade {
  height: 26px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: calc(12px * var(--fs));
}
.ev-add-name {
  width: 110px; border: 1px solid rgba(128,128,128,.25); border-radius: 999px;
  background: var(--card); color: var(--text); font-size: calc(12px * var(--fs)); padding: 5px 12px;
}
.ev-add-name:focus { border-color: #f4511e; outline: none; }
.ev-add-btn {
  border: none; border-radius: 999px; background: #f4511e; color: #fff;
  font-size: calc(12px * var(--fs)); font-weight: 600; padding: 6px 12px; cursor: pointer;
}
.ev-add-btn:disabled { opacity: .4; cursor: default; }
.evang-sum { padding: 14px 16px; }
.ev-sum-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ev-sum-label { font-size: calc(14px * var(--fs)); font-weight: 700; }
.ev-sum-nums { flex: 1; text-align: right; font-size: calc(13px * var(--fs)); color: var(--hint); }
.ev-sum-nums b { font-size: calc(15px * var(--fs)); color: var(--text); }
.ev-help-btn {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid #f4511e; background: transparent;
  color: #f4511e; font-size: calc(12px * var(--fs)); font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none;
}
.ev-help-btn:active { background: rgba(244,81,30,.15); }
.ev-help-table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: calc(13px * var(--fs)); }
.ev-help-table th, .ev-help-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(128,128,128,.15); }
.ev-help-note { font-size: calc(13px * var(--fs)); color: var(--hint); line-height: 1.5; margin-top: 8px; }
.ev-term-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(128,128,128,.1); font-size: calc(14px * var(--fs)); }
.ev-term-del { border: none; background: none; color: var(--hint); font-size: calc(16px * var(--fs)); cursor: pointer; padding: 2px 8px; }
.dash-loc .btn-inline { margin-left: 8px; }
.patch-date { font-weight: 700; margin: 10px 0 4px; font-size: calc(14px * var(--fs)); }
.patch-date:first-child { margin-top: 0; }
.patch-list { margin: 0 0 8px 18px; padding: 0; font-size: calc(13px * var(--fs)); line-height: 1.6; }
.patchnotes-btn { position: relative; }
.patchnotes-btn.has-new::after {
  content: ''; position: absolute; top: 6px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e53935;
}
/* 자리 맞바꿈 요청함 진입 버튼의 빨간 점 — patchnotes-btn 과 같은 자리·모양이지만, patchnotes.js 의
   syncPatchNotesDot() 이 .patchnotes-btn 전체를 훑어 자기 상태로 덮어써 버리므로 클래스를 따로 둔다
   (app-13c-relocate.js refreshLeaderRequestsEntry() 가 토글한다). */
.lr-req-btn { position: relative; }
.lr-req-btn.has-new::after {
  content: ''; position: absolute; top: 6px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e53935;
}

/* ---- 신앙단계 현황 (지역장·서기) ---- */
.fo-total { font-size: calc(15px * var(--fs)); font-weight: 700; margin-bottom: 10px; }
/* gap이 카드 배경색으로 보여 세그먼트 사이 2px 여백이 된다 */
.fo-bar { display: flex; gap: 2px; height: 24px; border-radius: 6px; overflow: hidden; background: var(--bg); }
.fo-seg { min-width: 3px; }
.fo-empty { color: var(--hint); font-size: calc(13px * var(--fs)); padding: 3px 2px; }
.fo-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 14px; }
.fo-leg { display: flex; align-items: center; gap: 6px; font-size: calc(13px * var(--fs)); }
.fo-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.fo-leg-name { color: var(--text); }
.fo-leg-num { color: var(--hint); font-variant-numeric: tabular-nums; }
.fo-change-summary { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: calc(14px * var(--fs)); font-weight: 600; margin-bottom: 12px; }
.fo-up { color: #0ca30c; }
.fo-down { color: #d03b3b; }
.fo-new { color: var(--accent-ink); }
.fo-tot { color: var(--hint); font-weight: 500; margin-left: auto; }
.fo-net { display: flex; flex-direction: column; }
.fo-net-row { display: flex; justify-content: space-between; font-size: calc(14px * var(--fs));
  padding: 7px 2px; border-top: 1px solid rgba(128,128,128,.14); }
.fo-net-row:first-child { border-top: none; }
.fo-net-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---- 계정 관리 · 신원확인 ---- */
.fld-label { display: block; font-size: calc(13px * var(--fs)); color: var(--hint); margin: 2px 2px 4px; }
#scr-users .card > .fld-label:not(:first-child) { margin-top: 12px; }
/* 자리찾기 이름 입력칸. 화면 통합 때 id가 #login-claim-name/#gate-claim-name → #claim-name 으로
   합쳐졌는데 여기만 옛 이름으로 남아 스타일이 안 먹고 있었다(2026-08-25).
   겨냥 대상은 감싸개 #claim-name-box 가 아니라 입력칸 자신이다 — 규칙이 입력칸용이다. */
#scr-users input, #scr-users select,
#claim-name {
  width: 100%; box-sizing: border-box; border: 1px solid rgba(128,128,128,.2);
  border-radius: 12px; padding: 12px 14px; font-size: calc(15px * var(--fs));
  background: var(--bg); color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#scr-users input:focus, #scr-users select:focus,
#claim-name:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
.user-row .role-tag, .user-district-row .role-tag { font-size: calc(12px * var(--fs)); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 8px; padding: 1px 7px; margin-right: 6px; }


/* ---- 조직 구조 관리 ---- */
.region-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.region-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region-right { flex: none; display: flex; align-items: center; gap: 6px; }
.tree-action {
  flex: none; border: 1px solid rgba(128,128,128,.25); background: var(--card);
  color: var(--accent-ink); border-radius: 8px; padding: 5px 7px;
  font-size: calc(12px * var(--fs)); font-weight: 700; cursor: pointer;
}
.tree-action.danger { color: #e53935; }
/* 관리 버튼 2×2. 한 줄에 4개를 넣는 것은 320px 에서 물리적으로 불가능하다 —
   전에는 flex:none 으로 줄어들지 않아 구역장 이름 쪽을 3px 까지 밀어냈다. */
.district-actions[hidden] { display: none; }
.district-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 6px; margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.district-actions .tree-action {
  width: 100%; min-width: 0; min-height: calc(36px * var(--fs));
  padding: 6px; line-height: 1.2; white-space: nowrap;
}

/* ---- 권한 범위 현황 ---- */
.overview-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid rgba(128,128,128,.14);
}
.overview-row:last-child { border-bottom: none; }
.overview-row.clickable { cursor: pointer; }
.overview-main { flex: 1; min-width: 0; }
.overview-name { font-size: calc(15px * var(--fs)); font-weight: 700; }
.overview-sub {
  margin-top: 3px; font-size: calc(12px * var(--fs)); color: var(--hint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.overview-metric { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.overview-metric b { font-size: calc(18px * var(--fs)); color: #f4511e; }
.overview-metric span { display: block; font-size: calc(12px * var(--fs)); color: var(--hint); }
.overview-metric em { display: block; font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 700; color: #f4511e; }
.summary-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: calc(13px * var(--fs)); background: rgba(128,128,128,.12);
  border-radius: 999px; padding: 6px 10px; margin: 3px;
}
.summary-chip b { color: var(--accent-ink); }
.visit-overview-row .visit-pair { display: flex; gap: 8px; align-items: center; font-size: calc(15px * var(--fs)); }
.visit-overview-row .visit-pair span { color: var(--hint); }
/* 심방 현황 — '심방한 사람' 머리글. 눌러서 그 사람 일지를 펴고 접는다. */
.vov-author {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  padding: 11px 2px; border-bottom: 1px solid rgba(128,128,128,.2);
  font-size: calc(15px * var(--fs)); font-weight: 700; color: var(--text);
}
.vov-author:active { background: rgba(128,128,128,.08); }
.vov-author .arw { color: var(--hint); font-size: calc(12px * var(--fs)); }
.vov-author .cnt { margin-left: auto; color: var(--accent-ink); font-weight: 800;
  font-size: calc(13px * var(--fs)); }
/* 펼친 일지는 살짝 들여써서 머리글과 구분한다 */
.vov-group { padding-left: 10px; }
.visit-meta { font-size: calc(12px * var(--fs)); color: var(--hint); margin: 5px 0 8px; }


/* ---- 구역장 등록 카드(scr-claim) — 초대 화면에서 쓰던 .invite-card를 그대로 쓴다 ---- */
.invite-card .fld-label {
  display: block; font-size: calc(13px * var(--fs)); color: var(--hint); margin: 10px 2px 4px;
}
.invite-card input, .invite-card select {
  width: 100%; border: 1px solid rgba(128,128,128,.2); border-radius: 12px;
  padding: 12px 14px; font-size: calc(15px * var(--fs)); background: var(--bg); color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.invite-card input:focus, .invite-card select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}
.invite-card { margin-top: 12px; }

/* ---- 섭자등록 ---- */
#contacts-search {
  width: 100%; box-sizing: border-box; border: 1px solid rgba(128,128,128,.2);
  border-radius: 12px; padding: 12px 14px; font-size: calc(15px * var(--fs));
  background: var(--bg); color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#contacts-search:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus-ring);
}

/* ---- 문의사항 ---- */
/* ⚠️ .inquiry-* 목록 스타일은 지금 아무도 안 쓴다 — 사용자 화면은 작성 전용(.inq-notice)이고
   목록은 관리자 조회 화면을 따로 만들 때 붙일 예정이라 지우지 않고 남겨 둔다.
   한 건: 제목(굵게, 우측 상단에 수정·삭제 버튼) / 일시·글쓴이 / 내용 / 첨부링크. */
.inquiry-item { padding: 16px 0; border-bottom: 1px solid rgba(128,128,128,.15); }
.inquiry-item:first-child { padding-top: 4px; }
.inquiry-item:last-child { border-bottom: none; padding-bottom: 4px; }
.inquiry-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  font-size: calc(15px * var(--fs)); font-weight: 700; line-height: 1.4; word-break: break-word;
}
/* 제목 옆 수정/삭제 자리 — 줄바꿈 없이 우측 상단 고정 */
.inquiry-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.inquiry-head button {
  flex: none; border: none; background: none; color: var(--accent-ink);
  font-size: calc(13px * var(--fs)); font-weight: 600; cursor: pointer; padding: 4px 2px;
}
.inquiry-head button.danger { color: var(--danger); }
.inquiry-meta { font-size: calc(12px * var(--fs)); color: var(--hint); margin-top: 3px; }
/* 관리자 답변 — 어떤 테마에서도 대비가 유지되도록 색을 직접 박지 않고 변수만 쓴다 */
.inquiry-answer {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(128, 128, 128, .1); border-left: 3px solid var(--accent);
  font-size: calc(14px * var(--fs)); line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.inquiry-answer-head { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--hint); margin-bottom: 4px; }
.inquiry-body { font-size: calc(14px * var(--fs)); line-height: 1.5; white-space: pre-wrap; margin-top: 8px; }
/* 재문의 스레드(2026-08-20, 유영미 문의#49) — 답변 아래로 이어지는 대화.
   관리자 글은 답변과 같은 강조(accent 왼줄)를, 문의자 글은 옅은 배경만 준다. */
.inquiry-replies { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.inquiry-reply {
  padding: 8px 12px; border-radius: 10px; background: rgba(128, 128, 128, .06);
  font-size: calc(13px * var(--fs)); line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.inquiry-reply.admin { background: rgba(128, 128, 128, .1); border-left: 3px solid var(--accent); }
.inquiry-reply-head { font-size: calc(11px * var(--fs)); font-weight: 700; color: var(--hint); margin-bottom: 3px; }
/* 한 줄짜리 입력칸 대신 버튼 — 누르면 answer-modal-bg와 같은 모양의 큰 textarea 모달이 뜬다 */
.inquiry-reply-btn {
  display: block; width: 100%; margin-top: 10px; padding: 8px 12px;
  border: 1px dashed var(--accent); border-radius: 8px; background: none; color: var(--accent-ink);
  font-size: calc(13px * var(--fs)); font-weight: 600; cursor: pointer;
}
/* .modal textarea의 height:64px를 덮어 문의 내용칸을 넉넉하게.
   답변·재문의 칸도 같이 키운다 — 64px(두 줄)에 resize:none 이라, 이미 적어 둔 답변을
   고치려면 좁은 창 안에서 스크롤해야 했다. 고쳐 쓰기가 사실상 안 되는 크기였다. */
#inq-content, #answer-content, #reply-content { height: 140px; }

/* 답변 모달의 첨부 한 줄 = 링크 + 삭제 ✕. */
.ans-file-row { display: flex; align-items: center; gap: 6px; }
.ans-file-row .visit-file { flex: 1; min-width: 0; }
.ans-file-del {
  border: none; background: none; cursor: pointer; padding: 0 6px;
  font-size: calc(14px * var(--fs)); color: var(--hint); line-height: 1.6;
}
.ans-file-del:active { color: var(--danger); }

/* ---- 활동참여 ---- */
/* 그룹 헤더 아래 참여자 이름을 가로로 흘려 배치 */
.activity-names { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.activity-name {
  display: inline-flex; align-items: center;
  font-size: calc(13px * var(--fs)); background: rgba(128,128,128,.12);
  border-radius: 999px; padding: 5px 11px;
  word-break: break-all;
}

/* 일간/주간/월간 전환. 색은 변수와 회색 반투명만 쓴다 — 밝은/어두운 테마 양쪽에서
   대비가 유지되어야 한다(#fff을 박았다가 밝은 배경 위 흰 글자가 된 사고가 있었다). */
.seg-bar {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: rgba(128,128,128,.12); border-radius: 10px; padding: 3px;
}
.seg-btn {
  flex: 1; border: none; background: none; color: var(--hint);
  font-family: inherit; font-size: calc(14px * var(--fs)); font-weight: 600;
  padding: 9px 0; border-radius: 8px; cursor: pointer;   /* 44px 터치 권장치에 맞춘 높이 */
  transition: background .15s ease, color .15s ease;
}
.seg-btn.active { background: var(--card); color: var(--text); }

/* 기간 총계 — 카드 맨 위 한 줄 */
.act-sum-head { padding: 4px 0 10px; border-bottom: 1px solid var(--border); }
.act-sum-nums { font-size: calc(15px * var(--fs)); font-weight: 700; }
.act-sum-title { margin: 14px 0 2px; }
/* 주·월에서 활동이 있던 날 하나를 여는 머리줄. 아래에 그 날 활동이 일간과 같은
   모양으로 펼쳐지므로, 머리줄은 날짜와 숫자만 얇게 얹는다. */
.act-day-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.act-day-label { font-size: calc(15px * var(--fs)); font-weight: 700; }
.act-day-sub { font-size: calc(12px * var(--fs)); opacity: .7; }

/* ---- 구역 심방일지 모아보기 ---- */
/* 목록이 비어도 보이는 작성 경로 안내 */
#dvisits-hint {
  font-size: calc(13px * var(--fs)); text-align: center; margin: 4px 2px 0;
  background: var(--bg); border: 1px dashed rgba(128,128,128,.4);
  border-radius: 10px; padding: 12px 10px;
}

/* 드롭다운 화살표를 직접 그리고 크기를 못 박는다.
   원래 select {} 블록이 둘로 나뉘어 있었고 뒤 블록이 앞 블록의 background-position(14px)·
   background-size(16px)·padding-right(36px)를 !important로 덮어써 앞쪽 상당수가 죽어 있었다.
   앞 블록 주석은 "52px로 키웠다 / font-size 16px"이라 적혀 있었지만 실제로 적용되던 값은
   뒤 블록의 26px·13px 이었다 — 주석이 화면과 반대였다. 2026-08-25 에 **실제로 이기던
   선언만 남겨** 한 블록으로 합치고 주석을 지금 동작에 맞췄다(렌더 결과는 그대로다).
   높이는 원래(padding 12px)보다 오히려 낮춘다 — 세로로 길어 보기 싫다는 요청. 그래도 폭은
   그대로라 터치 면적은 충분하다. 개별 규칙(.modal select 등)이 padding/font-size를 이미
   잡고 있어 !important가 필요하다. */
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 13px !important;
  min-height: 26px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  padding-left: 10px !important;
  padding-right: 24px !important;
  font-size: calc(13px * var(--fs)) !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
}
/* 열린 목록 항목(데스크톱 브라우저만 반영, 모바일은 OS 기본 UI를 쓴다) */
select option, select optgroup { font-size: calc(13px * var(--fs)); padding: 2px 6px; }

/* ---- 구역 통째 이동 요청/승인 ---- */
/* 색은 변수와 회색 반투명만 쓴다 — 밝은/어두운 테마 어느 쪽에서도 대비가 유지되어야 한다.
   (#fff이나 rgba(255,…)를 박았다가 밝은 배경 위 흰 글자가 된 사고가 있었다) */
.dmove-card {
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border: 1px solid rgba(128,128,128,.15);
  border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 14px; margin-bottom: 10px;
}
.dmove-card.rejected { border-left-color: var(--danger); }
.dmove-card.approved, .dmove-card.canceled { border-left-color: rgba(128,128,128,.45); }
.dmove-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dmove-route { font-size: calc(15px * var(--fs)); font-weight: 700; line-height: 1.45; word-break: keep-all; }
.dmove-status {
  flex: none; white-space: nowrap; font-size: calc(12px * var(--fs)); font-weight: 700;
  color: var(--hint); background: rgba(128,128,128,.14);
  border-radius: 999px; padding: 3px 9px;
}
.dmove-status.pending { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.dmove-status.rejected { color: var(--danger); background: rgba(229,57,53,.12); }
.dmove-meta { font-size: calc(12px * var(--fs)); color: var(--hint); margin-top: 5px; }
.dmove-reason { font-size: calc(14px * var(--fs)); line-height: 1.5; margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
/* 결재 결과(특히 반려 사유) — 요청자가 왜 막혔는지 바로 읽어야 해서 본문색을 쓴다 */
.dmove-decide {
  margin-top: 8px; padding: 9px 11px; border-radius: 10px;
  background: rgba(128,128,128,.1); border-left: 3px solid var(--accent);
  font-size: calc(13px * var(--fs)); line-height: 1.5; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}
.dmove-card.rejected .dmove-decide { border-left-color: var(--danger); }
/* .btn의 width:100%/margin-top이 flex row에서 서로를 밀어내므로 여기서 되돌린다 */
.dmove-acts { display: flex; gap: 10px; margin-top: 12px; }
.dmove-acts .btn { flex: 1; width: auto; margin-top: 0; padding: 11px; font-size: calc(14px * var(--fs)); }
/* 폼의 읽기 전용 값(보내는 구역 / 결재 대상) — 입력칸과 헷갈리지 않게 회색 판 위에 */
.dmove-from {
  font-size: calc(15px * var(--fs)); font-weight: 700; color: var(--text);
  background: rgba(128,128,128,.1); border-radius: 12px; padding: 12px 14px;
}

/* 회·팀 드롭다운을 한 줄에 나란히. 팀이 없는 회에서는 회 하나가 폭을 다 쓴다
   (flex:1이라 자동). 좁은 화면에서도 두 칸이 유지되도록 min-width는 두지 않는다. */
.pick-row { display: flex; gap: 8px; margin: 0 0 12px; }
.pick-row > .assembly-pick { flex: 1; min-width: 0; margin: 0; }

/* 섭자조회 쪽 나눔 — 목록 아래 "전체 N건 중 x~y번째"와 쪽 이동 줄.
   month-bar를 재사용하는데 그건 아래 여백만 있어서, 목록 바로 뒤에 붙으면 붙어 보인다. */
.contacts-count { font-size: calc(12px * var(--fs)); color: var(--hint); text-align: center; padding: 10px 0 6px; }
#contacts-list .month-bar { margin-bottom: 4px; }

/* 섭자 진행 상태 배지 — 목록 각 행의 식별코드 옆.
   색은 evang의 .ev-* 처럼 고정 색상 하나에 같은 색 반투명 배경을 깔았다 — 밝은/어두운
   테마 어느 쪽에서도 대비가 유지된다(카드 배경색을 가정하지 않는다). */
.cstat {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: calc(11px * var(--fs)); font-weight: 600; line-height: 1.7;
  border-radius: 8px; padding: 0 7px; white-space: nowrap;
}
.cstat.live { background: rgba(52,168,83,.14); color: #34a853; }
.cstat.blocked { background: rgba(229,57,53,.14); color: #e53935; }
/* 진행불가 행의 사유·처리일 줄. .sub(회색)보다 눈에 띄어야 한다 */
.member-row .info .sub.contact-blocked-sub { color: #e53935; }
/* 모달 안 상태 전환 줄 — 카드가 아니라 폼 안이라 위 라벨과의 간격만 맞춘다 */
#cm-status-box .seg-bar { margin-bottom: 10px; }

/* 글씨 크기 조절 헤더 버튼 */
/* 이름 칩과 붙어 답답하다는 지적(2026-08-14)이 있어 헤더 gap(10px) 위에 여백을 더 준다.
   flex-shrink:0 은 칩 문구가 길어져도("홍길동 구역장") 이 버튼이 찌그러지지 않게 한다 —
   눌러야 하는 것이라 줄어들면 안 된다. 대신 제목(h1, flex:1)이 줄어든다. */
.fs-ctrl-box { position: relative; flex: none; flex-shrink: 0; margin-left: 10px; }
.fs-ctrl-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: transform 0.2s;
  /* data-fs 가 아직 안 붙은 순간(주입 직후 한 프레임)이나 JS 가 실패한 경우의 기본값.
     이게 없으면 버튼 기본 글꼴로 떨어져 '가' 가 깨알만 하게 보인다. */
  font-size: 15px; font-weight: 700;
}
/* 지금 고른 크기를 버튼 안 '가' 의 크기로 그대로 보여 준다 — 상자를 열지 않아도
   지금 설정이 무엇인지 알 수 있다. 버튼 상자(40px)는 그대로라 헤더는 안 흔들린다. */
.fs-ctrl-btn[data-fs="normal"] { font-size: 15px; font-weight: 700; }
.fs-ctrl-btn[data-fs="large"] { font-size: 18px; font-weight: 800; }
.fs-ctrl-btn[data-fs="xlarge"] { font-size: 21px; font-weight: 800; }
.fs-ctrl-btn:active { transform: scale(0.9); }
.fs-ctrl-pop {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  padding: 6px; z-index: 100; min-width: 110px;
}
.fs-ctrl-pop.active { display: block; }
.fs-ctrl-pop button {
  width: 100%; border: none; background: none; padding: 10px 12px;
  text-align: left; font-size: calc(14px * var(--fs)); font-weight: 600;
  color: var(--text); border-radius: 8px; cursor: pointer;
}
/* 고른 것을 꽉 찬 색으로 칠한다. color-mix() 는 구형 웹뷰(안드로이드 WebView·구형 iOS)에서
   조용히 무시돼 '지금 뭘 골랐는지' 표시가 통째로 사라진다 — 눈이 어두운 분에게는 치명적이라
   지원 범위가 넓은 단색으로 간다. 대비도 이쪽이 훨씬 세다. */
.fs-ctrl-pop button.active {
  background: var(--accent); color: var(--accent-text);
}
.fs-ctrl-pop button:active { background: var(--bg); }

/* ---- 계정 관리 트리(2026-08-27) — 조직도(.region-title/.team-title/.district-card)와 같은 생김새 ---- */
/* 지역 머리글은 누르면 접힌다. 지역이 4개 이상인 회는 접힌 채 시작한다(app-13 usersRegionIsOpen). */
.users-tree .region-title { cursor: pointer; user-select: none; margin-top: calc(16px * var(--fs)); }
.users-tree .region-title:first-child, .users-tree .users-assembly-title + .region-title { margin-top: calc(6px * var(--fs)); }
.users-tree .region-title.is-collapsed { opacity: .8; }
.users-region-arrow {
  display: inline-block; width: calc(14px * var(--fs));
  font-size: calc(12px * var(--fs)); color: var(--hint);
}
.users-region-body[hidden] { display: none; }
.users-region-body { padding-bottom: calc(4px * var(--fs)); }
/* 회 머리글 — 전역 관리자가 회를 안 골랐을 때만 그린다 */
.users-assembly-title { margin-top: calc(22px * var(--fs)); }
/* 구역 카드: 조직도 카드보다 얇게(계정은 인원수·기능 그리드가 없다) */
.user-district-row { padding: calc(12px * var(--fs)) calc(14px * var(--fs)); margin-bottom: calc(8px * var(--fs)); }
.user-district-row .leader { margin-left: calc(2px * var(--fs)); }
.user-district-row .role-tag { margin-right: calc(4px * var(--fs)); }
.user-district-row .count.user-status { font-size: calc(12px * var(--fs)); }
/* 계정 행이 없는 구역(자리 없음) — 누를 것도 메뉴도 없다 */
.user-district-row.is-empty { cursor: default; opacity: .55; }

/* ---- 자리 등록 현황: 회 줄을 누르면 미등록 자리 목록 (2026-08-27, 서기에게도 보인다) ---- */
.users-stat-row.clickable { cursor: pointer; align-items: center; }
.users-stat-row .users-stat-pct, .users-stat-total .users-stat-pct { font-weight: 600; margin-left: calc(12px * var(--fs)); }
/* 미등록 수는 눌러 볼 거리가 있다는 표시라 힌트색이 아니라 본문색으로 세운다 */
.users-stat-row .users-stat-missing-n { color: var(--accent-ink); font-weight: 600; }
.users-stat-row .users-stat-arrow { display: inline-block; color: var(--hint); transition: transform .15s; }
.users-stat-row.is-open .users-stat-arrow { transform: rotate(90deg); }
.users-stat-missing[hidden] { display: none; }
.users-stat-missing {
  padding: calc(2px * var(--fs)) 0 calc(10px * var(--fs));
  border-bottom: 1px solid rgba(128,128,128,.15);
  font-size: calc(13px * var(--fs));
}
.users-stat-missing .head { color: var(--hint); font-weight: 600; padding: calc(4px * var(--fs)) 0; }
.users-stat-missing .grp { margin-top: calc(6px * var(--fs)); font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--text-2); }
.users-stat-missing .row {
  display: flex; align-items: center; gap: calc(6px * var(--fs));
  padding: calc(7px * var(--fs)) calc(8px * var(--fs)); border-radius: calc(8px * var(--fs));
  cursor: pointer;
}
.users-stat-missing .row:active { background: var(--accent-soft); }
.users-stat-missing .row .who { color: var(--hint); }
/* 미등록 목록에서 내려온 카드를 1.2초 강조. box-shadow 는 --accent 로 두어 color-mix 를 못 쓰는
   구형 웹뷰에서도(--accent-soft 가 무시돼도) 테두리 강조만은 남게 한다 */
@keyframes usersFlash {
  from { box-shadow: 0 0 0 calc(3px * var(--fs)) var(--accent); background: var(--accent-soft); }
  to { box-shadow: 0 0 0 0 transparent; }
}
.user-district-row.is-flash { animation: usersFlash 1.2s ease-out; }

/* ── 구역 취합 · 투표 현황 ─────────────────────────────────────────────
   명단을 축으로 뒤집어 보여주는 카드. 회차 줄이 여덟 개까지 서므로 줄 사이를 좁게 두고,
   인원 0인 회차는 지우지 않고 흐리게만 둔다(아무도 안 고른 회차도 정보다).
   이름 줄은 길어지면 접히게 둔다 — 구역원이 열다섯 명이면 한 줄에 안 들어간다. */
.ws-roster .ws-sum {
  margin-left: auto;
  font-size: calc(12px * var(--fs));
  color: var(--text-2);
  font-weight: 600;
}
.ws-roster .ws-row {
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.ws-roster .ws-row:first-of-type { border-top: 0; }
.ws-roster .ws-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: calc(13px * var(--fs));
}
.ws-roster .ws-cnt {
  margin-left: auto;
  font-size: calc(12px * var(--fs));
  color: var(--hint);
  white-space: nowrap;
}
.ws-roster .ws-names {
  margin-top: 3px;
  font-size: calc(13px * var(--fs));
  color: var(--text-2);
  line-height: 1.6;
  word-break: keep-all;
}
/* 아무도 안 고른 회차 — 자리는 지키되 눈에 걸리지 않게 */
.ws-roster .ws-row.is-zero .ws-row-head { color: var(--hint); font-weight: 400; }
.ws-roster .ws-row.is-zero .ws-row-head b { font-weight: 500; }
/* 미응답은 이름 줄을 한 톤 낮춘다 — 명단 나열이라 본문만큼 무거울 이유가 없다 */
.ws-roster .ws-row-no .ws-names { color: var(--hint); }
/* 명단 밖 표는 눈에 띄어야 한다. 남의 구역 사람이 전달본에 답하면 여기로 온다 */
.ws-roster .ws-row-out {
  margin-top: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-soft);
}

/* 도장 — 유니코드에 '도장' 이모지가 없어서 직접 그린다(2026-09-04).
   em 단위로만 짜서 글씨 크기 설정(--fs)과 화면 크기를 그대로 따라간다.
   살짝 기울여 두면 눌러 찍은 것처럼 보인다. 색은 테마와 무관하게 도장 붉은색으로 고정한다 —
   다크 모드에서도 도장은 붉어야 도장으로 읽힌다. */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  margin-right: .35em;
  vertical-align: -.22em;
  border: 1.5px solid #d63a2f;
  border-radius: 50%;
  color: #d63a2f;
  font-size: .72em;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-10deg);
}