/* 웨슬리 재정 — 화면 스타일
 *
 * ★ finance-app/CLAUDE.md 6장 · PRD 7-4 를 따릅니다.
 *   · 글자 크기는 전부 rem — 「글자 크게」 단추(100/115/130%)가 처음부터 있습니다
 *   · 손가락 단추는 최소 44×44
 *   · 색으로만 뜻을 나누지 않습니다 (문구·모양을 함께)
 */

[hidden] { display: none !important; }

/* 🔴🔴 25b ⓪㉯ — 시험 자료칸 띠. 못 닫는 띠라 닫는 단추가 없습니다.
   모든 화면(로그인 창 포함) 맨 위에 뜨도록 body의 첫 자식으로 둡니다. */
#시험자료칸띠 {
  position: sticky; top: 0; z-index: 300;
  background: #fde68a; color: #1a1a1a;
  font-weight: 700; text-align: center;
  padding: 0.6rem 1rem; font-size: 0.95rem;
  border-bottom: 2px solid var(--노랑);
}

:root {
  /* 「글자 크게」 단추가 이 값을 바꿉니다 (100 / 115 / 130) — app.js 참고 */
  --fz: 100%;
  --남색: #1b3a5c;
  --파랑: #2563eb;
  --빨강: #b91c1c;
  --노랑: #b45309;
  --초록: #15803d;
  --글자: #1a1a1a;
  --옅은글자: #4b5563;
  --아주흐림: #98a3ae;
  --테두리: #d8dde3;
  --바탕: #f5f6f8;
  --카드바탕: #ffffff;
}

html { font-size: calc(16px * (var(--fz) / 100%)); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "맑은 고딕", "Malgun Gothic", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--글자);
  background: var(--바탕);
  font-size: 1rem;
  line-height: 1.5;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; margin: 0 0 0.8rem; }

button, input, select, textarea { font: inherit; color: inherit; }

/* ── 단추 — 최소 44×44 (7-4) ───────────────────────────────────────────── */
.btn {
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--테두리);
  background: var(--카드바탕);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover { filter: brightness(0.97); }
.btn-primary { background: var(--남색); border-color: var(--남색); color: #fff; }
.btn-secondary { background: #fff; }
.btn-text { background: transparent; border: none; color: var(--옅은글자); text-decoration: underline; }
.btn-danger { background: #fff; border-color: var(--빨강); color: var(--빨강); }
.btn-small { min-height: 36px; padding: 0 0.7rem; font-size: 0.9rem; }
/* 🔴 40장 — 「글자로 복사」가 주보용 명단 화면에서 제일 많이 쓰입니다. 크게 */
.btn-large { min-height: 56px; padding: 0 1.6rem; font-size: 1.15rem; }

/* ── 로그인 화면 ─────────────────────────────────────────────────────── */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #16324a, #1b3a5c);
  padding: 1rem;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--카드바탕);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  text-align: center;
}
.login-card .brand { color: var(--옅은글자); font-size: 0.85rem; letter-spacing: 0.05em; }
.login-card h1 { margin: 0.2rem 0 1.2rem; }
.field { text-align: left; margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.9rem; margin-bottom: 0.3rem; color: var(--옅은글자); }
.field input {
  width: 100%;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 1px solid var(--테두리);
  border-radius: 8px;
}
.로그인기억 { text-align: left; margin-bottom: 1rem; font-size: 0.9rem; }
.login-card .btn-primary { width: 100%; margin-top: 0.4rem; }
.sub-note { font-size: 0.82rem; color: var(--옅은글자); margin-top: 1rem; line-height: 1.6; }
.알림 { border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.9rem; margin: 0.6rem 0; }
.알림.danger { background: #fdecec; color: var(--빨강); border: 1px solid #f4b9b9; }
.알림.ok { background: #eaf7ee; color: var(--초록); border: 1px solid #b7e3c3; }
.알림.warn { background: #fdf3e3; color: var(--노랑); border: 1px solid #f0d29a; }

/* 예산 확정 상태 띠 (재-07-3) — 폰에서는 아래로 쌓입니다. 폭에 관한 값은 넣지 않습니다 */
.예산확정띠 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; }
.예산확정띠 .알림 { margin: 0; }
/* 남은 예산이 0 이하일 때 「전용」 단추 — 진짜 disabled 대신 흐리게만 하고 눌리면 이유를 알려 줍니다(폰은 hover가 없습니다) */
.bg-전용-막힘 { opacity: 0.45; }

/* ── 예산 — 집행률 뱃지 (재-07 ②). 색만으로 나누지 않습니다 — 숫자·글자가 함께 있습니다 ── */
.집행률뱃지 {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.88rem;
}
.집행률뱃지.blue { background: #eaf1fb; color: var(--파랑); }
.집행률뱃지.yellow { background: #fdf3e3; color: var(--노랑); }
.집행률뱃지.red { background: #fdecec; color: var(--빨강); }
/* 🔴 12c — 수입 달성률 색. 100% 이상은 초록입니다(지출 집행률과 정반대) */
.집행률뱃지.green { background: #eaf7ee; color: var(--초록); }
.집행률뱃지.gray { background: #eef0f2; color: var(--옅은글자); }
.예산-숫자 { text-align: right; white-space: nowrap; }
/* 🔴 칸 여덟 개짜리 큰 표 — 32rem 기본 최소너비로는 항목 이름이 짜부라집니다 */
.예산표 { min-width: 54rem; }
.예산표 td:first-child, .예산표 th:first-child { min-width: 8rem; }

/* ── 홈 (재-14 · 25장). 🔴 카드그리드는 auto-fill로 접혀서 375px에서 media 쿼리 없이 한 줄에 하나가 됩니다 ── */
.홈띠 {
  padding: 0.6rem 0.9rem; margin-bottom: 0.5rem; border-radius: 0.4rem;
  background: #eaf1fb; color: var(--파랑); font-size: 0.95rem;
}
.홈띠.급함 { background: #fdecec; color: var(--빨강); }
.홈띠.홈-누를수있음 { cursor: pointer; }
.홈-누를수있음 { cursor: pointer; }

/* ── 25b — 홈 손본 안. 인사·뼈대(두 기둥)·예산 막대 둘·이번 달 견줌·상태·주의 ── */
.홈-인사줄 { margin: 0.6rem 0 1.1rem; }
.홈-인사 { font-size: 1.3rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.홈-역할 { font-weight: 600; color: var(--옅은글자); font-size: 0.9rem; margin-left: 0.5rem; }
.홈-오늘 { font-size: 0.84rem; color: var(--아주흐림); margin: 0.2rem 0 0; }

.홈-뼈대 { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .홈-뼈대 { grid-template-columns: 1fr; } }
/* 🔴🔴 25c ① — grid 칸(track)에 minmax(0, …)를 줘도, 그 안에 든 항목(item) 자체는
   기본이 min-width:auto라 내용만큼은 안 줄어듭니다. 1000px 밑에서 한 칸으로
   접힌 뒤에도 이 항목이 안 줄어들어 body가 통째로 옆으로 밀렸습니다 —
   측정해 보니 400px에서 505px까지 넘쳤습니다. #설정내용(25b)과 같은 자리입니다. */
.홈-뼈대 > * { min-width: 0; }

.홈-묶음 { margin: 0 0 1.1rem; }
.홈-묶음이름 { font-size: 0.78rem; font-weight: 700; color: var(--아주흐림); letter-spacing: 0.05em; margin: 0 0 0.55rem; }

.홈-카드제목 { font-size: 0.84rem; font-weight: 700; margin: 0 0 0.75rem; }
.card.홈-조용 { background: #fafbfc; padding: 0.9rem 1.1rem; }
.홈-카드제목.홈-조용글 { margin-bottom: 0.2rem; color: var(--옅은글자); font-weight: 600; }

.홈-줄 { display: grid; gap: 0.9rem; }
.홈-줄.홈-셋 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.홈-줄.홈-둘 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .홈-줄.홈-셋, .홈-줄.홈-둘 { grid-template-columns: 1fr; } }
/* 🔴 같은 까닭 — 620px 밑에서 한 칸으로 접힌 뒤에도 카드 항목이 안 줄어듭니다 */
.홈-줄 > * { min-width: 0; }

/* ── 회계별 막대 둘(수입·지출) ── */
.홈-회계 { padding: 0.9rem 0; border-top: 1px solid #eef1f5; }
.홈-회계:first-of-type { border-top: 0; padding-top: 0.1rem; }
.홈-회계:last-of-type { padding-bottom: 0; }
.홈-회계머리 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.6rem; flex-wrap: wrap; }
.홈-회계이름 { font-size: 0.9rem; font-weight: 700; }
.홈-총액 { font-size: 0.81rem; color: var(--아주흐림); white-space: nowrap; }
.홈-두막대 { display: flex; flex-direction: column; gap: 0.55rem; }
.홈-막대줄 { display: flex; align-items: center; gap: 0.6rem; }
.홈-막대이름 { flex: 0 0 2.1rem; font-size: 0.81rem; color: var(--옅은글자); font-weight: 700; }
.홈-막대통 { flex: 1 1 auto; min-width: 0; height: 15px; border-radius: 8px; background: var(--바탕); overflow: hidden; display: flex; }
.홈-막대통 span { display: block; height: 100%; }
/* 🔴 25c ② — 예산 미편성이면 다른 쪽 예산에 견줘 막대를 채우지 않습니다.
   회색 점선 테두리만 남기고 안은 비웁니다 — 「목표를 다 채웠다」로 안 보이게 (흠 ⑪과 같은 병) */
.홈-막대통.홈-미편성 { background: transparent; border: 1px dashed var(--테두리); }
.홈-수입칠 { background: var(--초록); } .홈-수입칠.홈-특 { background: #3f8c6b; }
.홈-지출칠 { background: var(--남색); } .홈-지출칠.홈-특 { background: #6b3f8c; }
.홈-예정칠 { background: #c3d3e4; } .홈-예정칠.홈-특 { background: #d9cbe6; }
.홈-막대값 { flex: 0 0 auto; display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.홈-막대값 b { font-size: 0.875rem; font-weight: 700; }
.홈-막대값 i { font-style: normal; font-size: 0.81rem; font-weight: 800; color: var(--옅은글자); display: inline-block; min-width: 2.5rem; text-align: right; }
.홈-밑줄글 { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline; margin: 0.6rem 0 0; }
.홈-몫 { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.78rem; color: var(--옅은글자); min-width: 0; }
.홈-몫차액 { font-size: 0.78rem; color: var(--옅은글자); margin-left: auto; }
.홈-몫차액 b.홈-플러스 { color: var(--초록); } .홈-몫차액 b.홈-마이너스 { color: var(--빨강); }
.홈-점 { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 auto; transform: translateY(-1px); }
.홈-점.홈-예정 { background: #c3d3e4; }

/* ── 이번 달 카드 셋 · 지난달 견줌 ── */
.홈-돈이름 { font-size: 0.78rem; color: var(--옅은글자); margin: 0 0 0.2rem; }
.홈-돈 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.홈-돈.홈-플러스 { color: var(--초록); } .홈-돈.홈-마이너스 { color: var(--빨강); } .홈-돈.홈-영 { color: var(--아주흐림); }
.홈-견줌 { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--아주흐림); display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.홈-화살 { font-weight: 800; white-space: nowrap; }
.홈-화살.홈-올 { color: var(--초록); } .홈-화살.홈-내 { color: var(--빨강); } .홈-화살.홈-평 { color: var(--아주흐림); }

/* ── 지금 상태 ── */
.홈-상태목록 { list-style: none; margin: 0; padding: 0; }
.홈-상태목록 li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0; border-top: 1px solid #f0f3f6; }
.홈-상태목록 li:first-child { border-top: 0; padding-top: 0; }
.홈-상태목록 li:last-child { padding-bottom: 0; }
.홈-상태이름 { font-size: 0.875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.홈-상태값 { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.홈-상태값.홈-없음 { font-size: 0.84rem; font-weight: 600; color: var(--아주흐림); }

/* ── 예산 주의 ── */
.홈-주의줄 { padding: 0.55rem 0; border-top: 1px solid #f0f3f6; }
.홈-주의줄:first-of-type { border-top: 0; padding-top: 0; }
.홈-주의머리 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.홈-주의이름 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.홈-주의율 { font-size: 0.81rem; font-weight: 800; white-space: nowrap; }
.홈-주의율.빨강 { color: var(--빨강); } .홈-주의율.노랑 { color: var(--노랑); } .홈-주의율.gray { color: var(--옅은글자); }
.홈-잔막대 { height: 6px; border-radius: 3px; background: var(--바탕); margin-top: 0.4rem; overflow: hidden; }
.홈-잔막대 span { display: block; height: 100%; }
.홈-잔막대 span.빨강 { background: var(--빨강); } .홈-잔막대 span.노랑 { background: var(--노랑); } .홈-잔막대 span.gray { background: var(--옅은글자); }

/* ── 최근 수입·지출 — 표 대신 한 줄씩 ── */
.홈-줄목록 { list-style: none; margin: 0; padding: 0; }
.홈-줄목록 li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid #f0f3f6; min-width: 0; }
.홈-줄목록 li:first-child { border-top: 0; padding-top: 0; }
.홈-날짜 { color: var(--아주흐림); font-size: 0.78rem; flex: 0 0 2.6rem; }
.홈-이름 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.홈-이름 .홈-항목 { color: var(--아주흐림); font-size: 0.78rem; margin-left: 0.4rem; }
.홈-금액 { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }

@media (max-width: 620px) {
  .홈-돈 { font-size: 1.35rem; }
  .홈-막대줄 { flex-wrap: wrap; }
  .홈-막대이름 { flex: 0 0 auto; }
  .홈-막대통 { flex: 1 1 100%; order: 3; }
  .홈-막대값 { margin-left: auto; }
  .홈-몫차액 { margin-left: 0; width: 100%; }
}

/* ── 🔴 회기 띠 — 모든 화면 맨 위에 늘 (PRD 재-08) ──────────────────────── */
.회기띠 {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; border-radius: 10px; margin-bottom: 1.4rem;
  background: #eef2f6; border: 1px solid var(--테두리); font-weight: 600;
}
/* 🔴 36장 — 마감·마감 취소 단추 둘이 더해지며 이 줄이 길어졌습니다.
   flex-wrap 없이는 폰(375px)에서 body가 가로로 흔들립니다 — 넘치면
   줄만 바뀌게 합니다. */
.회기띠.지난회기 {
  background: #fff2e0; border-color: #f0b429; color: #7a4a00;
  font-size: 1.1rem; font-weight: 800;
}
.회기띠 select { min-height: 40px; border-radius: 8px; border: 1px solid var(--테두리); padding: 0 0.6rem; }

/* ── 🔴 인터넷 끊김 띠 (재-02 · 2026-08-24 대표 확정) ──────────────────── */
.끊김띠 {
  position: sticky; top: 0; z-index: 50;
  background: var(--빨강); color: #fff; font-weight: 700;
  padding: 0.7rem 1rem; border-radius: 10px; margin-bottom: 1rem;
  text-align: center;
}

/* 🔴 기간을 정해 뽑은 결산서 — **종이에도 반드시 찍힙니다** (2026-09-05)
   회기 결산서와 헷갈리면 은행에 잘못 나갑니다. 화면전용이 아닙니다. */
.기간지정띠 {
  margin: 0.15rem 0 0.3rem; padding: 0.3rem 0.5rem;
  border: 1px solid #7a3e00; border-radius: 4px;
  font-size: 0.72rem; font-weight: 700; text-align: center; color: #7a3e00;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

/* 🔴 「눌렀는데 아무 일도 안 일어납니다」를 막는 띠 (2026-09-05)
   아무도 안 잡은 실패가 여기에 뜹니다. app.js 의 잘안됨띠() 와 짝입니다. */
.잘안됨띠 {
  position: sticky; top: 0; z-index: 49;
  display: flex; align-items: center; gap: 0.6rem;
  background: #fff4e5; color: #7a3e00; border: 1px solid #f0b374;
  font-weight: 600; padding: 0.65rem 0.9rem; border-radius: 10px; margin-bottom: 1rem;
}
.잘안됨띠 span { flex: 1; }
.잘안됨띠 .잘안됨-까닭 { font-weight: 400; }
.잘안됨-닫기 {
  border: none; background: transparent; color: inherit;
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.3rem 0.4rem;
}

/* ── 헌금 계수 확인 (재-02) ─────────────────────────────────────────────── */
.계수진행 { font-weight: 700; margin-bottom: 1rem; font-size: 1.05rem; }

/* 🔴 2026-09-05 — 하나하나 열어 보지 않고 금액만 보고 확인하실 수 있게 (17장 ②) */
.계수합계 {
  background: var(--연한바탕, #f6f8fa);
  border: 1px solid var(--테두리, #d8dee4);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;
  font-size: 1.05rem;
}
.계수합계 .흐린안내 { margin-top: 0.35rem; font-size: 0.92rem; }
.계수합계-줄 { font-size: 1.12rem; }
/* 🔴 「모두 확인」은 크게 — 주일 아침에 손이 떨립니다 (계수단추줄과 같은 결) */
.계수-모두확인 { width: 100%; margin-top: 0.7rem; min-height: 50px; font-size: 1.02rem; }

/* 🔴 내가 입력한 줄 — 내가 확인할 수 없는 것이니 미리 알아보게 합니다.
   ⚠ 단추를 감추지는 않습니다(17장 ⑤ — 눌렀을 때 이유를 보여 주는 것이 규칙입니다). */
.계수줄-내것 { opacity: 0.62; }
.계수줄-내것표 {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--연한바탕, #eef1f4);
  color: var(--옅은글자, #6b7480);
  font-size: 0.8rem;
  font-weight: 700;
}
.계수목록 { display: flex; flex-direction: column; gap: 0.6rem; }
.계수줄 {
  background: var(--카드바탕); border: 1px solid var(--테두리); border-radius: 10px;
  padding: 0.9rem 1rem; cursor: pointer;
}
.계수줄:hover { border-color: var(--파랑); }
.계수줄-머리 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.계수줄-순번 { font-weight: 800; color: var(--옅은글자); }
.계수줄-금액 { font-weight: 800; font-size: 1.15rem; }
.계수줄-부제 { color: var(--옅은글자); font-size: 0.92rem; margin-top: 0.2rem; }

/* 🔴 확인·수정요청은 서로 떨어뜨립니다 — 주일 아침에 손이 떨립니다 */
.계수단추줄 { display: flex; gap: 1.2rem; margin-top: 1rem; }
.계수단추줄 .btn { flex: 1; min-height: 52px; font-size: 1.05rem; }
.btn-확인 { background: var(--초록); border-color: var(--초록); color: #fff; }
.btn-수정요청 { background: #fff; border-color: var(--빨강); color: var(--빨강); }

.계수끝 { text-align: center; color: var(--옅은글자); padding: 3rem 1rem; font-size: 1.05rem; }

/* ── 헌금 확인 절차 카드 넷 (17장 「가」) — 세로로 쌓기만 하므로 폰에서 따로 손댈 것이 없습니다 ── */
.계수카드묶음 { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.6rem 0; }
.계수카드 {
  display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem 1rem;
  border: 1px solid var(--테두리); border-radius: 10px; cursor: pointer; min-height: 44px;
}
.계수카드 input { margin-top: 0.2rem; flex-shrink: 0; width: 18px; height: 18px; }
.계수카드-선택 { border-color: var(--남색); background: #eef2f6; }
.계수카드-이름 { font-weight: 700; }
.계수카드-설명 { display: block; font-size: 0.85rem; color: var(--옅은글자); margin-top: 0.15rem; }

/* ── 회차 — 상자 하나 (17장 ②) ─────────────────────────────────────────── */
.회차띠 {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
  background: var(--카드바탕); border: 1px solid var(--테두리); border-radius: 10px;
  padding: 0.9rem 1rem; cursor: pointer; margin-bottom: 0.6rem; font-weight: 700;
}
.회차띠:hover { border-color: var(--파랑); }
.회차띠 .회차띠-남은금액.모자람 { color: var(--빨강); }
.회차띠 .회차띠-남은금액.맞음 { color: var(--초록); }
.회차띠-닫힘 { font-weight: 400; color: var(--옅은글자); }
.계수이름줄들 { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0; }
.계수이름줄들 .tag { display: inline-flex; align-items: center; gap: 0.3rem; }
.계수이름줄들 .btn-text { min-height: auto; padding: 0; font-size: 0.85rem; }

/* ── 프로그램 뼈대 ───────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px;
  flex: 0 0 240px;
  background: var(--남색);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}
.교회머리 {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 0.5rem;
}
.교회로고 {
  width: 30px; height: 30px; border-radius: 7px; object-fit: contain;
  background: #fff; flex: none;
}
.church-name { font-weight: 700; font-size: 1.05rem; }

.nav-item {
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  font-size: 0.98rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.85);
}
.nav-item:hover { background: rgba(255,255,255,0.08); }
/* 🔴 2026-09-08 — 마우스 없이 쓰실 때 「지금 어디에 있는지」가 보여야 합니다.
   차림 항목이 <div> 라 Tab 으로 갈 수 없었습니다. app.js 가 tabindex 를 달고,
   여기서 닿은 자리에 테를 그립니다. :focus-visible 이라 마우스로 누를 때는
   안 나옵니다 — 키보드로 오셨을 때만 나옵니다. */
.nav-item:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.nav-item.active { background: rgba(255,255,255,0.16); color: #fff; font-weight: 700; border-left: 4px solid #fff; }
/* 🔴 37장 — 여섯 덩어리를 가르는 가로줄. 비는 덩어리에서는 렌더차림()이
   아예 그리지 않으므로 여기서는 「있으면 어떻게 보일지」만 정합니다. */
.nav-sep { height: 1px; margin: 0.5rem 1.1rem; background: rgba(255,255,255,0.18); flex: none; }

.사이드바-아래 { margin-top: auto; padding: 1rem 1.1rem 0; border-top: 1px solid rgba(255,255,255,0.15); }
.글자크기 { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.8rem; font-size: 0.85rem; }
.글자크기 span { color: rgba(255,255,255,0.7); margin-right: 0.2rem; }
.fz-btn {
  min-width: 32px; min-height: 32px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.35);
  background: transparent; color: #fff; cursor: pointer;
}
.fz-btn[data-fz="115"] { font-size: 1.1rem; }
.fz-btn[data-fz="130"] { font-size: 1.25rem; }
.fz-btn.active { background: #fff; color: var(--남색); font-weight: 700; }

.내이름 { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 0.5rem; }
.사이드바-아래 .btn-text { color: rgba(255,255,255,0.75); padding: 0; min-height: auto; }

/* ── 🔴 알림 종 (재-22 · 44장) — 차림 항목이 아니라 사이드바 아래 늘 보이는 단추입니다 ── */
.종버튼 {
  position: relative;
  min-width: 40px; min-height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.3);
  background: transparent; color: #fff; font-size: 1.2rem; cursor: pointer;
  margin-bottom: 0.6rem;
}
.종버튼:hover { background: rgba(255,255,255,0.1); }
.종배지 {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--빨강); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
}

/* ── 🔴 만든 곳과 물어보실 곳 (재-17 ⑤ · 2026-08-27 대표 선택 「갑」)
   흰 판이 남색 위에서 따로 놀던 것을 고쳤습니다. 상자는 바탕보다 아주
   조금만 밝게, 로고는 흰색 판(wesleysoft-logo-white.svg)을 씁니다. ── */
.만든곳 {
  margin: 0.9rem 0 0.2rem;
  padding: 14px 12px 13px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}
.만든곳로고 {
  width: 112px; max-width: 100%; height: auto;
  display: block; margin: 0 auto 0.5rem;
  /* 🔴 흰 판을 없앴습니다 — 로고 자체가 흰색입니다 */
  background: none; border-radius: 0; padding: 0;
}
/* 🔴 글자 없는 그림만 있는 판 — 컴퓨터에서는 안 씁니다(폰 전용, 2026-08-27) */
.만든곳마크 { display: none; }
.만든곳전화, .만든곳메일 {
  display: block; width: 100%; min-height: 28px; padding: 2px 0; margin: 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; letter-spacing: -0.01em; text-align: center;
}
.만든곳전화 { font-size: 0.84rem; font-weight: 700; color: rgba(255,255,255,0.92); }
.만든곳메일 { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.62); margin-top: 0.15rem; }
.만든곳전화:hover, .만든곳메일:hover { color: #fff; text-decoration: underline; }
.만든곳시간 { margin-top: 0.45rem; font-size: 0.72rem; color: rgba(255,255,255,0.45); letter-spacing: -0.01em; }

/* ── 🔴 화면 폭 (7-5-1 · 2026-08-27 대표 지적) ──────────────────────────
   전에는 .content 전체를 1100px로 막아, 큰 화면에서 오른쪽 절반이 비고
   칸 여덟짜리 목록 표가 좁은 데 욱여넣어져 있었습니다.
   · 목록·표·통계·결산서(.content 기본값) — 화면 폭을 다 씁니다
   · 입력 폼(.입력폼카드) — 1,200px쯤에서 멈추고 가운데
   · 글이 긴 안내(.안내폭) — 800px쯤에서 멈춥니다                        */
.content { flex: 1; padding: 2rem 2.4rem; }
.placeholder { color: var(--옅은글자); }
.입력폼카드 { max-width: 1200px; margin-left: auto; margin-right: auto; }
.안내폭 { max-width: 800px; }

/* ── 🔴 쪽 제목 줄 — 화면 전체에 걸리는 단추는 여기(제목 오른쪽)에 둡니다
   (7-5-1). ────────────────────────────────────────────────────────── */
.쪽제목줄 { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: nowrap; }
.쪽제목줄 h1 { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0; }
.쪽제목단추 { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: nowrap; }
.쪽제목단추:empty { display: none; }
@media (max-width: 720px) {
  /* 🔴 글자를 감추지 않습니다. 단추 줄을 제목 밑으로 내립니다
     (2026-08-27 대표가 폰에서 잡아냄 — 그림만 남은 단추 셋이 똑같아 보였습니다) */
  .쪽제목줄 { flex-wrap: wrap; }
  .쪽제목단추 {
    flex: 1 0 100%;
    flex-wrap: wrap;
    margin-top: 0.6rem;
  }
  .쪽제목단추 .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ── 설정 · 탭 ───────────────────────────────────────────────────────── */
.tabbar { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--테두리); margin-bottom: 1.4rem; flex-wrap: wrap; }
.tab-item {
  padding: 0.7rem 1rem; cursor: pointer; font-weight: 600; color: var(--옅은글자);
  border-bottom: 3px solid transparent; min-height: 44px; display: flex; align-items: center;
}
.tab-item.active { color: var(--남색); border-bottom-color: var(--남색); }
.tab-item:focus-visible { outline: 2px solid var(--남색); outline-offset: -2px; border-radius: 3px; }

.card { background: var(--카드바탕); border: 1px solid var(--테두리); border-radius: 10px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }

/* ── 부서장 확인 서명 — 지출결의서 청구 (재-05 · 2026-08-27 대표 지시) ──── */
.서명패드 {
  border: 1px solid var(--테두리); border-radius: 8px; touch-action: none;
  background: #fff; width: 100%; max-width: 400px; height: 150px; display: block;
}
/* 🔴 확인을 누르면 잠깁니다 — 남이 덧그리지 못하게. 색만으로 나누지 않고
   글자(✓ 부서장 확인을 마쳤습니다)를 함께 둡니다(CLAUDE.md 6장) */
.서명패드-잠김 { border-color: var(--초록); border-width: 2px; }
.서명패드-단추줄 { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.서명패드-확인글 { color: var(--초록); font-weight: 700; font-size: 0.9rem; }

/* ── 내 서명 (재-11 · 39장) — 지금 저장된 서명 미리보기 ─────────────────── */
.ms-미리보기줄 { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.ms-미리보기 { max-width: 200px; max-height: 80px; border: 1px solid var(--테두리); border-radius: 6px; background: #fff; }

/* ── 표 ──────────────────────────────────────────────────────────────── */
table.list { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.list th, table.list td { text-align: left; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--테두리); }
table.list th { color: var(--옅은글자); font-weight: 600; font-size: 0.85rem; }
table.list tr:hover td { background: #fafbfc; }

/* 🔴 칸이 넷을 넘는 표는 폰에서 짜부라집니다 — 화면 밖으로 밀지 말고
   표 안에서만 가로로 넘기십시오 (PRD 7-5-1 · 2026-08-27 대표가 폰에서 잡아냄).
   🔴 :has()를 쓰지 않습니다 — 옛 브라우저가 이 규칙을 통째로 버립니다(미자립
   교회의 오래된 컴퓨터. 2026-08-27 대표 지적). 화면을 그린 뒤 app.js의
   표상자붙이기()가 이 클래스를 답니다 — 손으로 이미 붙인 결재 상세 안 표
   둘(.표상자)도 클래스가 같아 그대로 씁니다. */
.표상자 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.표상자 > table.list { min-width: 32rem; }
/* 🔴 25c ③ — 손분개 창(.jm-표)은 32rem 최소폭이 640px짜리 창보다는 작아
   괜찮지만, 375px 폰에서는 여전히 넘칩니다. 표 안에서 가로로 넘기되(.표상자),
   「삭제」 칸만은 오른쪽에 고정해 늘 보이게 합니다 — 줄을 잘못 넣었을 때
   지우는 단추라 스크롤하지 않아도 눌러야 합니다. */
.표상자 > table.jm-표 { min-width: 28rem; }
.jm-표 select, .jm-표 input { width: 100%; box-sizing: border-box; font-size: 0.9rem; padding: 0 0.4rem; }
.jm-표 th:last-child, .jm-표 td:last-child {
  position: sticky; right: 0; background: var(--카드바탕);
  box-shadow: -6px 0 6px -6px rgba(0,0,0,0.2);
}
.tag {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px;
  font-size: 0.78rem; border: 1px solid var(--테두리); background: #f0f2f5;
}
.tag.표시 { border-color: #f0b429; background: #fff7e0; }

/* ── 계정과목 ─────────────────────────────────────────────────────────── */
.acct-목이름 { padding-left: 1.6rem; }
.acct-그룹제목 { margin: 1.4rem 0 0.4rem; font-size: 1.05rem; }
/* 25b ② — 예산관리 목록에서 「항」 자신은 예산이 없어도 이름만 보여 주는 줄 (자식이 어디 딸렸는지) */
.acct-부모줄 td { background: var(--바탕); font-weight: 700; padding-top: 0.5rem; padding-bottom: 0.5rem; }
input[type="checkbox"].donation-flag { width: 20px; height: 20px; }
input[type="checkbox"].donation-flag:disabled { opacity: 0.35; cursor: not-allowed; }
.흐린안내 { font-size: 0.78rem; color: var(--옅은글자); }

/* ── 칸마다 무엇을 적는 곳인지 (PRD 7-5-2) — 접거나 끌 수 없게 늘 보입니다 ── */
.설명목록 { margin: 0.6rem 0 1.2rem; font-size: 0.85rem; }
.설명목록 dt { font-weight: 700; margin-top: 0.5rem; }
.설명목록 dd { margin: 0.15rem 0 0; color: var(--옅은글자); line-height: 1.5; }

/* ── 찾기·거르개 줄 ───────────────────────────────────────────────────── */
.toolbar { display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.toolbar input[type="text"], .toolbar select {
  min-height: 40px; padding: 0 0.7rem; border: 1px solid var(--테두리); border-radius: 8px;
}
.pager { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.8rem; font-size: 0.9rem; }

/* ── 계정 만들기·고치기 창 ───────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
.modal { position: relative; background: #fff; border-radius: 12px; padding: 1.6rem; width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; }

/* 🔴 창 오른쪽 위 ✕ — 창 안에 무엇이 그려지든 늘 있습니다 (2026-09-05).
   Esc 로도 닫힙니다. app.js 의 「창나갈길」과 짝입니다. */
/* sticky 로 둔 까닭 — 긴 창(지출결의서·은행 거래내역)에서 아래로 내리셔도
   ✕ 가 늘 눈에 보이게 하려는 것입니다. 아래 margin 을 -36px 로 두어
   글의 자리를 빼앗지 않습니다. */
.창닫기 {
  position: sticky; top: 0; z-index: 3;
  display: block; width: 36px; height: 36px; padding: 0;
  margin: -0.5rem -0.5rem -36px auto;
  border: none; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  color: var(--옅은글자); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.창닫기:hover { background: #eef1f5; color: var(--글자); }
.창닫기:focus-visible { outline: 2px solid var(--파랑); outline-offset: 2px; }
.modal > h2 { padding-right: 2.8rem; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; }
.form-grid .field-wide { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: 0.88rem; color: var(--옅은글자); margin-bottom: 0.25rem; }
.form-grid input, .form-grid select {
  width: 100%; min-height: 42px; padding: 0 0.7rem; border: 1px solid var(--테두리); border-radius: 8px;
}
/* 🔴 23f — 위 규칙이 라디오·체크박스에도 번져 42px짜리 길쭉한 타원이 됩니다
   (지출결의서 「지급 방법」에서 실제로 봤습니다). 폭·높이를 제 크기로 되돌립니다. */
.form-grid input[type="radio"], .form-grid input[type="checkbox"] {
  width: auto; min-height: auto; padding: 0; border: none;
}

/* 지출결의서 「담을 항목」 한 줄 — 🔴 인라인 style로 박지 마십시오.
   @media가 못 이깁니다 (2026-08-27 대표가 폰에서 잡아냄) */
.결의줄담기 { grid-template-columns: repeat(6, 1fr); gap: 0.5rem; align-items: end; }
.결의줄담기 .항목칸 { grid-column: span 2; }

/* ── 권한 체크칸 묶음 (3-5 「스물여섯을 두 묶음으로」) ──────────────────── */
details.perm-group { border: 1px solid var(--테두리); border-radius: 10px; margin-top: 0.8rem; }
details.perm-group summary {
  cursor: pointer; padding: 0.7rem 1rem; font-weight: 700; list-style: none;
  display: flex; justify-content: space-between; align-items: center; min-height: 44px;
}
details.perm-group summary::-webkit-details-marker { display: none; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.5rem; padding: 0.4rem 1rem 1rem; }
.perm-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; min-height: 32px; }
.perm-check input { width: 18px; height: 18px; }
.perm-check.바뀜 { color: var(--남색); font-weight: 700; }
.바뀜표시 { font-size: 0.78rem; color: var(--남색); font-weight: 700; }

.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.4rem; }

/* 🔴 브라우저 alert·confirm·prompt 대신 — 다른 창(계정창 등) 위에도 반드시 뜨도록
   z-index를 더 높입니다. member-app이 층이 같아 창이 뒤에 숨었던 사고와 같은 종류라
   미리 막아 둡니다 (2026-08-28). */
.알림창-배경 { z-index: 200; }
/* 🔴 36장 — 여러 줄로 지은 안내(회기 마감 확인 등)가 한 줄로 뭉개지지
   않게 줄바꿈을 그대로 살립니다. 한 줄짜리 안내는 그대로 한 줄입니다. */
#알림창-설명 { white-space: pre-line; }

/* ── 수입관리 — 요약 칩 · 교인 자동완성 (재-03) ──────────────────────────── */
.칩줄 { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.칩 {
  flex: 1; min-width: 150px; background: var(--카드바탕); border: 1px solid var(--테두리);
  border-radius: 10px; padding: 0.8rem 1rem;
}
.칩 .칩-이름 { font-size: 0.82rem; color: var(--옅은글자); margin-bottom: 0.3rem; }
.칩 .칩-값 { font-size: 1.25rem; font-weight: 800; }

.자동완성자리 { position: relative; }
.자동완성목록 {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--카드바탕); border: 1px solid var(--테두리); border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto;
}
.자동완성줄 { padding: 0.6rem 0.8rem; cursor: pointer; font-size: 0.92rem; }
.자동완성줄:hover { background: #f0f4fa; }
.자동완성줄 .흐린안내 { display: block; }

.데스크톱전용 { }
@media (max-width: 800px) {
  .데스크톱전용 { display: none !important; }
}

@media (max-width: 800px) {
  .app-shell { flex-direction: column; }
  /* 🔴 왼쪽 세로 차림이 아니라 위쪽 가로 탭입니다 (재-02) */
  .sidebar { width: 100%; flex: none; flex-direction: column; padding: 0; }
  .교회머리 { display: none; }
  .nav-item { white-space: nowrap; }
  .content { padding: 1rem; }
  .form-grid { grid-template-columns: 1fr; }
  /* 🔴 폰에서는 세로로 쌓습니다. 여섯 칸을 가로로 넣을 수 없습니다 */
  .결의줄담기 { grid-template-columns: 1fr; gap: 0.7rem; }
  .결의줄담기 .항목칸 { grid-column: auto; }

  /* 차림 줄은 가로로 훑어 넘깁니다. 로그아웃·글자 크게는 감추지 않습니다 —
     감추면 폰에서 아예 손이 안 닿는 단추가 됩니다(예전 판의 실수를
     여기서 바로잡습니다). */
  #차림목록 { display: flex; overflow-x: auto; padding: 0.4rem; gap: 0.1rem; }
  /* 🔴 가로로 훑어 넘기는 줄에서는 가로줄이 아니라 세로줄입니다 */
  .nav-sep { width: 1px; height: auto; align-self: stretch; margin: 0.4rem 0.3rem; }
  .사이드바-아래 {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0; padding: 0.5rem 0.8rem; border-top: 1px solid rgba(255,255,255,0.15);
  }
  .내이름 { margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .글자크기 { margin-bottom: 0; }
  /* 🔴 폰 단추는 최소 44×44 (7-4) */
  .종버튼 { min-width: 44px; min-height: 44px; margin-bottom: 0; }
  /* 🔴 폰 단추는 최소 44×44 (7-4) — 데스크톱 32px보다 키웁니다 */
  .fz-btn { min-width: 44px; min-height: 44px; font-size: 1rem; }
  .fz-btn[data-fz="115"] { font-size: 1.15rem; }
  .fz-btn[data-fz="130"] { font-size: 1.3rem; }

  /* 🔴 만든곳 상자 — 폰에서 .사이드바-아래 한 줄에 짜부라져 있던 것을
     넷째 칸으로 끼우지 않고 통째로 한 줄을 쓰게 뺍니다 (2026-08-27 대표 지적) */
  .만든곳 {
    flex: 1 0 100%;
    display: flex; align-items: center; justify-content: center; gap: 0.9rem;
    margin: 0.5rem 0 0.1rem; padding: 8px 10px; text-align: left;
  }
  .만든곳로고 { display: none; }         /* 글자 있는 것은 폰에서 감춥니다 */
  .만든곳마크 {
    display: block;
    width: 34px; height: auto;
    flex: none;                          /* 🔴 줄어들지 않게 */
    margin: 0;
  }
  .만든곳시간 { display: none; }
  .만든곳전화, .만든곳메일 { width: auto; min-height: 44px; }
}

/* ── 헌금 조회·통계 (재-03 뒷부분) ───────────────────────────────────────── */
.막대칸 { display: flex; align-items: flex-end; gap: 0.4rem; height: 160px; margin: 1rem 0; }
.막대 { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; justify-content: flex-end; height: 100%; }
.막대-기둥 { width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.막대-기둥-속 { width: 45%; background: var(--파랑); border-radius: 3px 3px 0 0; min-height: 2px; }
.막대-기둥-속.지난 { background: #cbd5e1; }
.막대-이름 { font-size: 0.78rem; color: var(--옅은글자); }
.확인대기안내 { background: #fff7e0; border: 1px solid #f0b429; border-radius: 8px; padding: 0.5rem 0.8rem; font-size: 0.88rem; margin: 0.6rem 0; }

/* 🔴 인쇄는 그 탭 화면 그대로 — 차림·탭줄·단추는 종이에 안 나갑니다 */
@media print {
  .sidebar, .tabbar, .toolbar, .끊김띠, .회기띠, .pager, .btn { display: none !important; }
  .content { padding: 0; max-width: none; }
  .app-shell { display: block; }
}

/* ── 감사보고서·감사자료 — A4 세로 한 장 (재-09 · 재-10-2) ────────────────── */
/* 🔴 25c ① — 결산보고(재무부장 보고서)의 4칸 표(.인쇄표.결산표)가 폰 폭보다
   넓어 body 전체가 옆으로 밀렸습니다. .서식판(23장)과 같은 자리 —
   화면에서는 이 상자 안에서만 가로로 넘기고, 인쇄에서는 그대로 다 보입니다. */
.A4인쇄판 { max-width: 210mm; margin: 0 auto; padding: 1rem; background: #fff; overflow-x: auto; }
.인쇄표 { width: 100%; border-collapse: collapse; margin: 0.6rem 0; }
.인쇄표 th, .인쇄표 td { border: 1px solid var(--테두리); padding: 0.4rem 0.6rem; text-align: left; font-size: 0.9rem; }
.인쇄표 th { background: #f5f6f8; white-space: nowrap; width: 8rem; }
.인쇄표.결산표 { min-width: 30rem; }
/* 🔴 41장 — 결산서(재무부장 보고서) 인쇄판 전용. 결산보고 화면(.인쇄표.결산표
   그대로)은 건드리지 않고, 이 인쇄판(.결산서-표)에서만 줄을 더 촘촘히 그려
   A4 한 장에 맞춥니다 — 원본 서식도 칸이 촘촘합니다. */
.인쇄표.결산서-표 th, .인쇄표.결산서-표 td { padding: 0.05rem 0.4rem; font-size: 0.7rem; line-height: 1.25; }
.인쇄표.결산서-표 th { width: auto; white-space: normal; }
.감사-두장 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .감사-두장 { grid-template-columns: 1fr; } }
.감사서명줄 { display: flex; justify-content: flex-end; gap: 2rem; margin: 1.2rem 0; }
.감사서명칸 { font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }
.감사서명그림 { max-height: 2.4rem; max-width: 6rem; }
.감사증빙묶음 { margin: 0.8rem 0; page-break-inside: avoid; }
.감사증빙사진 { max-width: 100%; max-height: 400px; display: block; margin: 0.3rem 0; }
@media print {
  .A4인쇄판 { max-width: none; padding: 0; overflow-x: visible; }
  .감사증빙묶음 { break-inside: avoid; }
}

/* ── 증빙 사진 첨부 (재-17) ──────────────────────────────────────────────── */
.증빙-단추줄 { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.6rem 0; }
.증빙-그리드 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.7rem; margin: 0.8rem 0;
}
.증빙-칸 {
  position: relative; border: 1px solid var(--테두리); border-radius: 8px; overflow: hidden;
  aspect-ratio: 1 / 1; background: #f0f2f5;
}
.증빙-칸 img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.증빙-칸 .증빙-삭제 {
  position: absolute; top: 4px; right: 4px; min-width: 32px; min-height: 32px;
  border-radius: 999px; border: none; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.증빙-칸 .증빙-차례 {
  position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 999px;
}
.증빙-개수 { font-size: 0.85rem; color: var(--옅은글자); }
.증빙-PDF { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--옅은글자); text-align: center; padding: 0.4rem; }

/* 나란히 보기 (올리기 전 미리보기 + 자르기 + 돌리기) */
.사진창-나란히 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.8rem 0; }
@media (max-width: 640px) { .사진창-나란히 { grid-template-columns: 1fr; } }
.사진창-패널 { text-align: center; }
.사진창-패널 h4 { font-size: 0.85rem; color: var(--옅은글자); margin: 0 0 0.4rem; }
.사진창-패널-틀 {
  position: relative; border: 1px solid var(--테두리); border-radius: 8px; overflow: hidden;
  background: #111; display: flex; align-items: center; justify-content: center; min-height: 220px;
}
.사진창-패널-틀 canvas, .사진창-패널-틀 img { max-width: 100%; max-height: 60vh; display: block; }
.사진창-자르기틀 { position: absolute; inset: 0; touch-action: none; }
.사진창-손잡이 {
  position: absolute; width: 22px; height: 22px; margin: -11px; border-radius: 999px;
  background: #fff; border: 3px solid var(--파랑); cursor: grab; touch-action: none;
}
.사진창-경고 { color: var(--빨강); font-size: 0.88rem; margin: 0.4rem 0; }
.사진창-흐림 { opacity: 0.6; pointer-events: none; }

/* ── 사진 확대해서 보기 — 프로그램 위에 겹칩니다 (재-17 ②) ─────────────── */
.사진뷰-배경 { background: rgba(0,0,0,0.85); padding: 0; }
.사진뷰-배경 img { max-width: 92vw; max-height: 88vh; object-fit: contain; user-select: none; }
.사진뷰-닫기 {
  position: absolute; top: 1rem; right: 1rem; min-width: 44px; min-height: 44px;
  border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff;
  font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.사진뷰-닫기:hover { background: rgba(255,255,255,0.28); }
.사진뷰-화살 {
  position: absolute; top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px;
  border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff;
  font-size: 1.8rem; cursor: pointer; line-height: 1;
}
.사진뷰-화살:hover { background: rgba(255,255,255,0.28); }
.사진뷰-이전 { left: 1rem; }
.사진뷰-다음 { right: 1rem; }
.사진뷰-차례 { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.9rem; }

/* ── 🔴 증빙 사진 단추 — 기기마다 다르게 (재-17 ①) ──────────────────────
   손가락으로 쓰는 기기(pointer: coarse)인가로 가릅니다. 화면 너비로 가르면
   창을 좁힌 컴퓨터가 폰으로 오인됩니다. <input type="file"> 셋은 그대로
   두고 단추만 감춥니다. */
@media (pointer: fine), (pointer: none) {
  .증빙단추-촬영, .증빙단추-사진첩 { display: none; }
}
@media (pointer: coarse) {
  .증빙단추-파일 { display: none; }
}

/* ── 엑셀 올리기 — 사람을 못 정한 줄 고르기 (재-03 「사람 찾는 차례」) ─────── */
.사람못정함-영역 { background: #fff7e0; border: 1px solid #f0b429; border-radius: 8px; padding: 0.8rem 1rem; margin: 0.8rem 0; }
.사람못정함-줄 { padding: 0.6rem 0; border-top: 1px solid #f0dca0; }
.사람못정함-줄:first-of-type { border-top: none; }
.사람못정함-후보 { display: block; padding: 0.3rem 0; font-size: 0.92rem; cursor: pointer; }
.사람못정함-후보 input { margin-right: 0.4rem; }

/* ── 인쇄 화면에서만 감추는 것 — .toolbar는 @media print가 이미 감추지만
   그 밖의 요소(안내 문구 등)에는 이 클래스를 따로 달아야 합니다 (재-09·재-10) */
@media print {
  .화면전용 { display: none !important; }
}

/* ── 서식출력 — 기부금영수증 대상자 목록 (재-10) ──────────────────────── */
.서식-보관띠 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; }

/* ── 주민번호 적는 화면 — 열 분씩 다섯 장 (재-10 ⑫) ──────────────────────
   🔴 줄 높이를 줄이지 않습니다 — 13자리를 치는 칸이고, 글자 크게를 쓰시는
   분이 바로 이 일을 하는 분입니다. 아래 단추 줄은 화면 밑에 붙박고,
   표만 스크롤됩니다(1366×768 낡은 노트북에서도 단추 줄이 늘 보입니다). */
.rrn-표상자 { max-height: 60vh; overflow-y: auto; overflow-x: auto; }
.rrn-표 th, .rrn-표 td { padding: 0.9rem 0.7rem; }
.rrn-표 td:last-child { min-width: 16rem; }
.rrn-입력 { width: 100%; max-width: 16rem; padding: 0.5rem 0.6rem; border: 1px solid var(--테두리); border-radius: 8px; font-size: 1rem; }
.rrn-이미있음 { display: inline-flex; align-items: center; gap: 0.5rem; }
.rrn-확인필요 { color: var(--노랑); margin: 0.3rem 0 0; }
.rrn-바닥줄 {
  position: sticky; bottom: 0; background: var(--카드바탕); border-top: 1px solid var(--테두리);
  padding: 0.7rem 0; margin-top: 0.6rem; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 0.6rem; z-index: 5;
}
.rrn-바닥단추 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ── 발급대장 ───────────────────────────────────────────────────────────── */
.dj-취소줄 { opacity: 0.55; }

/* ── 영수증 인쇄 — 소득세법 시행규칙 별지 제45호의2서식 (재-10 ⑭) ─────────
   🔴 직인 이미지를 넣지 않습니다 — 지름 30mm를 비워 종이에 실제로 찍습니다.
   한 사람에 2장(교인 보관용·교회 보관용), 한 사람당 한 쪽. */
.영수증-장 { position: relative; page-break-after: always; }
.영수증-보관표시 { position: absolute; top: 0; right: 0; font-size: 0.78rem; color: var(--옅은글자); }
.영수증-서명줄 { display: flex; flex-direction: column; gap: 1.4rem; margin: 1.6rem 0 0.6rem; font-size: 0.95rem; }
.영수증-도장자리 {
  display: inline-block; width: 30mm; height: 30mm; border: 1px dashed var(--테두리);
  border-radius: 50%; vertical-align: middle;
}
@media print {
  .영수증-장 { page-break-after: always; }
  .영수증-장:last-child { page-break-after: auto; }
}

/* ── 발급 방식 선택 — 회기마다 종이·전자·둘 다 (재-10 · 16b ⑤) ──────────── */
.발급방식-줄 {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0;
  border-top: 1px solid var(--테두리); cursor: pointer;
}
.발급방식-줄:first-of-type { border-top: none; }
.발급방식-줄 input[type="radio"] { margin-top: 0.2rem; flex-shrink: 0; }

/* ── 🔴 설정 화면 — 가로 빈자리를 씁니다 (재-13 · 2026-08-28 대표 지적) ──
   기본은 「두 칸 다 쓰기」입니다 — 클래스를 안 단 탭(계정과목·사용자 계정
   같은 표 탭)은 지금과 한 픽셀도 다르지 않게 그려집니다.
   폼 카드에만 .설정카드-좁게 를 달아 나란히 세웁니다. */
#설정내용 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;          /* 🔴 짧은 카드가 긴 카드 키만큼 늘어나지 않게 */
}
#설정내용 > *              { grid-column: 1 / -1; min-width: 0; }   /* 기본 = 지금과 같음 */
#설정내용 > .설정카드-좁게 { grid-column: auto; }
#설정내용 > .card          { margin-bottom: 0; }      /* 간격은 gap이 냅니다 */
/* 🔴🔴 25b ⑤ — 격자 칸(min-width:0 없이는)은 안의 넓은 표(.예산표 min-width:54rem)
   만큼 늘어나 버립니다 — 그러면 옆 칸이 찌그러지거나 화면이 가로로 흔들리고,
   .표상자(overflow-x:auto)가 처음부터 오른쪽으로 밀려 그려집니다. 카드
   자체는 절대 넘치지 않고, 넘치는 것은 표상자 안에서만 스크롤됩니다. */

@media (max-width: 1100px) {
  #설정내용 { grid-template-columns: 1fr; }
}

/* 설정 탭의 저장 단추 줄 — 카드를 여럿으로 쪼갠 탭에서 씁니다 (21b) */
.설정저장줄 { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* ── 빈 서식 인쇄 (23장 · PRD 5-0) — 인쇄 규칙은 .A4인쇄판·.인쇄표를
   그대로 씁니다. 여기는 그 규칙에 없는 것만 더합니다. ─────────────────── */
.빈서식-목록 { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }

/* 감리회 서식(5-24)을 원본 치수로 그립니다 — 23c
   🔴 표(<table>) 뭉치를 통째로 버리고 <svg>로 다시 그립니다. 원본이
   A4 가로 두 단(왼쪽=본문·오른쪽=영수증 붙이는 면)이라 23b가 지었던
   세로 표로는 고쳐 쓸 수 없었습니다. */
.서식판 { background: #fff; margin: 0 auto 1rem; max-width: 297mm; overflow-x: auto; }
.서식판 svg { display: block; width: 100%; height: auto; }
.서식판 svg text {
  font-family: "Haansoft Dotum", "한컴돋움", "HCR Dotum", "Malgun Gothic", "맑은 고딕", sans-serif;
  fill: #000;
}
@media print {
  .서식판 { max-width: none; margin: 0; overflow: visible; }
  .서식판 svg { width: 297mm; height: 210mm; page-break-after: always; }
  .서식판:last-child svg { page-break-after: auto; }
}
/* 🔴 .A4인쇄판으로 감싸지 않습니다 — 그 클래스는 max-width가 210mm(세로)입니다. */

/* 빈 헌금 집계표 — 계수자·확인자 서명란 둘 (재-02) */
.집계표-서명줄 { display: flex; justify-content: flex-end; gap: 3rem; margin: 1.2rem 0 0; }
.집계표-서명칸 { text-align: center; font-size: 0.95rem; }
.집계표-서명칸-칸 { border-bottom: 1px solid #333; min-width: 8rem; min-height: 2.2rem; margin-bottom: 0.3rem; }

/* 영수증 붙임 별지 — 붙임 칸은 90mm×120mm 이상 (재-17, PRD가 재 둔 값이라
   줄이지 않습니다) */
.별지-상자줄 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.별지-상자 { border: 1px dashed var(--테두리); border-radius: 8px; min-width: 90mm; min-height: 120mm; }
@media (max-width: 800px) { .별지-상자줄 { grid-template-columns: 1fr; } }

/* 신청 QR (23장 ③) — 흑백만, 오류보정 Q·여백 4는 서버가 그립니다.
   화면은 크기만 정합니다. */
.QR-상자 svg { display: block; margin: 0 auto; height: auto; }
.QR-작게 svg { width: 25mm; }
.QR-크게 svg { width: 100mm; }
.QR-주소글자 { font-family: monospace; font-size: 0.85rem; word-break: break-all; text-align: center; }
.QR-피싱막이 {
  border: 1px solid var(--빨강); border-radius: 8px; padding: 0.6rem 0.8rem;
  white-space: pre-line; font-size: 0.9rem; margin-top: 0.8rem;
}
.설정저장줄 .알림 { margin: 0; }

/* ── 주보용 헌금자 명단 (재-20 · 40장) ──────────────────────────────────────
   🔴 이름 하나하나가 폰에서 누르는 단추입니다(체크 해제 = 뺌). 44×44 이상을
   지키려고 <label>을 통째로 눌림판으로 씁니다 — 눈에 보이는 체크박스는
   작아도, label 자체의 키를 키워 누르는 자리를 넓힙니다. */
.주보-종류줄 { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.주보칩 {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  padding: 0 0.9rem; border-radius: 999px; background: #eef0f2; font-size: 0.95rem; cursor: pointer;
}
.주보칩:has(input:not(:checked)) { background: transparent; border: 1px dashed var(--테두리); opacity: 0.55; text-decoration: line-through; }
.주보-묶음 { margin: 1rem 0; }
.주보-묶음 h3 { margin: 0 0 0.3rem; font-size: 1rem; }

/* ── 세무 달력 (재-21 · 43장) ────────────────────────────────────────────── */
/* ── 세무 달력 세 갈래 (2026-09-08) ─────────────────────────────────────
   9월에 열었는데 1월 것부터 죽 나오고, 놓친 것이 그 사이에 조용히 묻혀
   있었습니다. 「놓친 것 · 앞으로 하실 것 · 끝낸 것」으로 나눕니다.
   🖨 인쇄용 일정표는 그대로 한 해 치를 차례대로 냅니다 — 종이는 그것이 맞습니다. */
.세무-갈래이름 { margin: 1.6rem 0 0.7rem; font-size: 1.02rem; }
.세무-갈래이름:first-child { margin-top: 0.2rem; }
.세무-갈래수 {
  display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: var(--테두리); color: var(--옅은글자);
  font-size: 0.82rem; font-weight: 700; vertical-align: middle;
}
.세무-갈래놓침 { color: var(--빨강); }
.세무-갈래놓침 .세무-갈래수 { background: var(--빨강); color: #fff; }
.세무-지남 { color: var(--빨강); font-weight: 700; }
.세무-오늘 { color: var(--빨강); font-weight: 700; }
.세무-임박 { color: var(--남색); font-weight: 700; }
.세무-끝낸것 { margin-top: 1.8rem; }
.세무-끝낸것 > summary {
  cursor: pointer; font-weight: 700; padding: 0.5rem 0; min-height: 44px;
  display: flex; align-items: center; color: var(--옅은글자);
}
.세무-끝낸것 > summary:focus-visible { outline: 2px solid var(--남색); outline-offset: 2px; border-radius: 3px; }
.세무-끝낸것 .세무-줄 { opacity: 0.72; }

.세무-줄 { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.세무-제목 { font-weight: 700; margin: 0 0 0.2rem; }
.세무-단추줄 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ── 알림 (재-22 · 44장) ─────────────────────────────────────────────────
   🔴 폭에 관한 값은 인라인 style에 절대 두지 않습니다 — 클래스로만
   (CLAUDE.md 6장 — 지출결의서 「담을 항목」 줄이 이 실수로 폰에서 짜부라졌던 일). */
.알림설정줄 { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 0.6rem; }
.알림설정칸 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; min-height: 32px; }
.알림고정안내 { font-size: 0.85rem; color: var(--옅은글자); margin: 0.3rem 0 0; }

.알림목록 { display: flex; flex-direction: column; gap: 0; }
.알림줄 {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--테두리); cursor: pointer;
  min-height: 44px;
}
.알림줄:last-child { border-bottom: none; }
.알림줄:hover { background: #fafbfc; }
.알림줄-점 { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--파랑); margin-top: 0.35rem; }
.알림줄.읽음 .알림줄-점 { background: transparent; }
.알림줄-본문 { flex: 1; min-width: 0; }
.알림줄-제목 { font-weight: 700; }
.알림줄.읽음 .알림줄-제목 { font-weight: 500; color: var(--옅은글자); }
.알림줄-부제 { font-size: 0.9rem; color: var(--옅은글자); margin-top: 0.15rem; overflow-wrap: break-word; }
.알림줄-시각 { font-size: 0.78rem; color: var(--옅은글자); white-space: nowrap; margin-top: 0.2rem; }

.아이폰안내-걸음줄 { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.6rem; }
.아이폰안내-걸음 {
  flex: 1 1 160px; min-width: 140px; text-align: center; padding: 0.8rem 0.5rem;
  background: #f8fafc; border-radius: 8px; font-size: 0.88rem;
}
.아이폰안내-걸음 .번호 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--파랑); color: #fff;
  font-weight: 700; margin-bottom: 0.4rem;
}
.세무-처리표시 { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; font-size: 0.92rem; cursor: pointer; }


/* ═══════════════════════════════════════════════════════════════════════
   🔴 로그아웃 단추 — **세 프로그램이 같은 모양이라야 합니다**
        (2026-09-10 대표 지시 · 서버 관리자)

   ★ 무엇이 잘못되어 있었나 — 대표께서 눌러 보시고 짚어 주셨습니다

       교적        네모칸에 「나가기」
       재정        밑줄 친 글자 「로그아웃」  (박스가 아예 없었습니다)
       심방플러스   네모칸에 「나가기」  (교적보다 작아 보였습니다)

     ⚠ 재어 보니 **심방플러스의 여백이 오히려 1px 더 컸습니다**(7px 대 6px).
       작아 보인 까닭은 크기가 아니라 **옅은 테두리 · 투명 바탕 ·
       가는 글자(500)** 셋이었습니다. 눈에 덜 걸린 것입니다.

   ★ 그래서 이렇게 정했습니다

       · 글자는 셋 다 **「로그아웃」** — 「로그인」으로 들어와서 「나가기」로
         나가면 짝이 안 맞습니다
       · 모양은 **교적을 본**으로 (대표께서 고르셨습니다)
       · 🔴 **색은 각 프로그램 것을 그대로 씁니다.** 치수와 짜임만 맞춥니다.
         색까지 같게 하면 그 프로그램의 색 체계가 깨집니다

   ★ 🔴 왜 btn-ghost 를 안 고치고 새 이름을 지었나

       btn-ghost 를 쓰는 자리가 **교적 56곳 · 심방플러스 8곳**입니다.
       그것을 고치면 로그아웃과 상관없는 단추가 다 함께 바뀝니다.
       그래서 **로그아웃 단추에만 붙는 이름**을 새로 지었습니다.

   ★ ⚠ `.btn.btn-logout` 처럼 둘을 붙여 씁니다 — `.btn` 과 `.btn-ghost` 를
     확실히 이기려는 것입니다. `!important` 로 때우지 않습니다.

   ★ 🔴 폰에서는 조금 커집니다 (min-height 44px)
     재정팀 규칙 — 「폰 단추는 최소 44x44」. 손가락으로 누르는 자리라
     그 규칙이 모양보다 앞섭니다. 컴퓨터에서는 셋 다 교적 모양 그대로입니다.
   ═══════════════════════════════════════════════════════════════════════ */
.btn.btn-logout {
  background: var(--카드바탕);
  color: var(--옅은글자);
  border: 1px solid var(--테두리);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  /* 🔴 재정의 .btn 은 min-height 44px 입니다. 컴퓨터에서는 풀고
        폰에서만 다시 겁니다 — 아래 @media 를 보십시오 */
  min-height: 0;
}
@media (max-width: 640px) {
  .btn.btn-logout { min-height: 44px; padding: 6px 14px; }
}

/* 🔴 그 칸을 다 쓰게 합니다 + 남색 바탕에 맞춥니다 (2026-09-10 대표 지시)

     ⚠ 재정 사이드바만 **짙은 남색**(--남색 #1b3a5c)입니다.
       교적·심방은 밝은 회색(--surface-2)입니다.
       그래서 위 `.btn.btn-logout` 의 흰 바탕·어두운 글자를 그대로 쓰면
       남색 위에 흰 상자가 튀어 보입니다.

     🟢 치수와 짜임은 셋이 같게 두고, **색만 그 프로그램 바탕을 따릅니다.**
       앞서 이 자리의 `.btn-text` 도 `rgba(255,255,255,0.75)` 였습니다. */
.사이드바-아래 .btn.btn-logout {
  width: 100%;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,255,255,0.35);
}
.사이드바-아래 .btn.btn-logout:hover { background: rgba(255,255,255,0.18); }
@media (max-width: 640px) {
  .사이드바-아래 .btn.btn-logout { width: auto; }
}