/* 웨슬리 심방플러스 — 화면 꾸미기
 *
 * ★ **모양은 교적과 같고, 빛깔만 다릅니다** (2026-08-29 대표 결정).
 *
 *   > 「비슷하지만 색감이 다른 구조지? 교적은 좀 옅고 재정은 진해졌어.
 *   >   그리고 우리 심방은 파일 로고 색도 그렇지만 **약간 보라빛이 돌게** 하면 좋을 것 같고.」
 *
 *   | 프로그램 | 빛깔 |
 *   |---|---|
 *   | 교적     | 파랑 `#2563EB` · 옅은 바탕 |
 *   | 재정     | 남색 `#1B3A5C` · 진한 차림표 |
 *   | 심방플러스 | **보라 `#662D91`** · 옅은 바탕에 보라기 |
 *
 *   ★ 셋의 **뼈대는 같습니다** — 칸 · 표 · 단추 모양 · 모서리 8px.
 *     달라 보이면 목회자가 다른 회사 것으로 보십니다.
 *     **다르게 하는 것은 빛깔 하나뿐**입니다.
 *
 * 🔴 보라는 **아이콘에서 가져온 것**입니다 — `favicon.svg` 의 `#662d91 → #382273`.
 *    셋의 아이콘은 도형이 같고 빛깔만 다릅니다(교적 청록 · 재정 파랑 · 심방 보라).
 *    **아이콘과 화면이 같은 보라라야** 한 벌로 보입니다.
 */

:root {
  /* 🔴 회색에도 **보라기를 아주 조금** 섞었습니다.
       파랑기 도는 회색(교적 것)을 그대로 두고 단추만 보라로 바꾸면
       두 빛깔이 서로 밀어내 탁해 보입니다. 바탕이 함께 기울어야 한 벌이 됩니다.
       ★ 다만 **아주 조금**입니다. 종이처럼 보여야 하니까요. */
  --bg: #EFEDF5;
  --surface: #FFFFFF;
  --surface-2: #FAF9FC;
  --border: #E5E1EE;
  --border-strong: #CFC8DE;
  --text: #241F33;
  --text-muted: #6B6280;
  --text-faint: #9C94AE;

  /* 아이콘에서 온 보라 */
  --primary: #662D91;
  --primary-soft: #F3EBFA;
  --primary-hover: #52236F;
  --primary-deep: #382273;   /* 아이콘 그라데이션의 끝 — 단락 이름에 씁니다 */

  /* 🔴 뜻이 있는 색은 **바꾸지 않습니다.**
       초록은 「됐습니다」, 빨강은 「탈이 났습니다」 — 세 프로그램이 같아야 합니다.
       여기까지 보라로 바꾸면 목회자가 빨강을 못 알아보십니다. */
  --success: #0E9F6E;
  --success-soft: #E7F8F2;
  --warning: #D97706;
  --warning-soft: #FEF3E2;
  --danger: #DC2626;
  --danger-soft: #FDEDED;

  --radius: 8px;
  --shadow: 0 1px 2px rgba(36,31,51,.06), 0 1px 8px rgba(36,31,51,.04);
}

* { box-sizing: border-box; }

/* ★ 반드시 맨 위에 (교적팀이 2026-08-18에 잡은 사고)
 *   화면을 감추고 보이는 데 hidden 을 씁니다. 그런데 아래에서 display:flex 를
 *   주면 그 규칙이 hidden 을 이겨서 감춘 화면이 그대로 보입니다. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo',
               -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════ 공통 조각 ═══════════ */

.btn {
  border: none; border-radius: var(--radius); font-size: 13.5px; padding: 9px 16px;
  cursor: pointer; font-weight: 600; font-family: inherit; transition: .15s;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { background: var(--border-strong); cursor: default; }
.btn-ghost {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border);
  font-weight: 500; padding: 7px 12px; font-size: 12.5px;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 13.5px; color: var(--text);
  background: var(--surface); font-family: inherit;
}
.field input:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}

/* ★ 여러 줄 글이 한 줄로 뭉치지 않게 — 서버 안내 글에는 줄바꿈이 있습니다 */
.알림 { border-radius: var(--radius); padding: 10px 12px; font-size: 12.5px; margin: 4px 0 14px;
       white-space: pre-line; }
.알림.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid #F6C9C9; }

.badge { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.badge-soft { background: var(--primary-soft); color: var(--primary); }

/* ═══════════ 로그인 ═══════════ */

.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  /* 로그인 창 뒤 — 위쪽이 아주 옅은 보라로 밝습니다 */
  background: radial-gradient(circle at 50% 0%, #F7F3FC 0%, var(--bg) 60%);
}
.login-card {
  width: 340px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 34px 30px 28px; box-shadow: var(--shadow);
}
.login-card .brand {
  font-size: 12px; letter-spacing: .08em; color: var(--text-faint); margin-bottom: 4px;
}
.login-card h1 { font-size: 22px; font-weight: 700; margin: 0 0 26px; color: var(--text); }
.login-card .btn-primary { width: 100%; padding: 11px; }

/* 아이디 저장 · 로그인 유지 */
.로그인기억 {
  display: flex; gap: 18px; align-items: center;
  margin: 2px 0 18px; font-size: 12.5px; color: var(--text-muted);
}
.로그인기억 label {
  display: flex; align-items: center; gap: 6px;
  margin: 0; font-size: 12.5px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.로그인기억 input[type=checkbox] { width: 15px; height: 15px; margin: 0; flex: none; cursor: pointer; }
.sub-note { margin: 20px 0 0; font-size: 11.5px; color: var(--text-faint); line-height: 1.7; }

/* ═══════════ 전체 틀 ═══════════ */

.app-shell { display: grid; grid-template-columns: 190px 1fr; height: 100vh; background: var(--surface); }

.sidebar {
  background: var(--surface-2); border-right: 1px solid var(--border);
  padding: 16px 10px; display: flex; flex-direction: column;
}
.sidebar .church-name {
  font-size: 13px; font-weight: 700; color: var(--text);
  padding: 6px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.menu { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.menu-item {
  border: none; background: transparent; text-align: left; cursor: pointer;
  padding: 9px 10px; border-radius: var(--radius); font-size: 13px;
  color: var(--text-muted); font-family: inherit;
}
.menu-item:hover { background: var(--surface); color: var(--text); }
.menu-item.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

.sidebar-foot { border-top: 1px solid var(--border); padding-top: 12px; }
.who { font-size: 12px; color: var(--text-muted); padding: 0 10px 8px; }

.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
}
.topbar h2 { margin: 0; font-size: 16px; font-weight: 700; }
/* 🔴🔴 2026-08-31 — 글자 크기 (대표 확정 · 종이와 화면 둘 다)
     **읽는 자리만** 키웁니다. 차림표와 머리띠까지 키우면 폰에서 넘칩니다.
     `--화면배` 는 `app.js` 의 `글자크기입히기()` 가 뿌리에 얹습니다.
   ⚠ `zoom` 을 씁니다. `transform: scale()` 은 자리를 안 다시 잡아 겹칩니다.
     안 먹는 브라우저에서는 **1 인 채로 그대로 돕니다** — 글자만 안 커질 뿐
     화면이 깨지지 않습니다. */
.content { padding: 18px 22px; overflow: auto; zoom: var(--화면배, 1); }

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.search {
  width: 240px; padding: 8px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 13px; font-family: inherit; color: var(--text);
}
.search:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.count { font-size: 12.5px; color: var(--text-muted); }

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-weight: 600; color: var(--text-muted); font-size: 12px;
  padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.table tbody tr:hover { background: var(--surface-2); }
.table td.empty { text-align: center; color: var(--text-faint); padding: 30px 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   2·3단계 — 심방 준비 (2026-08-28)

   ★ 여기서 고르시는 것이 **AI 로 나가는 전부**입니다. 그래서 화면도
     「무엇을 고르셨는지」가 한눈에 보이게 두었습니다 — 켜진 것은 파랑으로.
   ══════════════════════════════════════════════════════════════════════ */

.topbar-right { display: flex; align-items: center; gap: 10px; }
.끝칸 { text-align: right; white-space: nowrap; }

/* 옅은 단추 — 「고치기」·「넣기」처럼 자주 누르지만 주된 것이 아닌 자리 */
.btn-quiet {
  background: var(--primary-soft); color: var(--primary);
  padding: 6px 12px; font-size: 12.5px;
}
.btn-quiet:hover { background: #E9DDF5; }
.btn-큰 { padding: 11px 22px; font-size: 14px; }

/* 여쭙는 말 — 막지 않고 여쭙기만 하는 자리 (「이 종류가 맞으십니까」) */
.알림.warn { background: #FFF7E6; color: #92400E; border: 1px solid #FDE1A9; }

/* 누구를 뵈러 가는가 */
.누구 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.누구-이름 { font-size: 19px; font-weight: 700; }
.누구-곁 { font-size: 12.5px; color: var(--text-muted); }

/* 칸 하나 = 고르시는 것 하나 */
.칸 {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.칸-머리 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.칸-머리 h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.칸-곁 { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.칸-풀이 { margin: 6px 0 0; font-size: 12px; color: var(--text-muted); }
.두칸 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 고르는 단추들 */
.고름판 { display: flex; flex-wrap: wrap; gap: 7px; }
.고름 {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 8px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--text); transition: .12s;
}
.고름:hover { border-color: var(--primary); }
/* 🔴 켜진 것은 **테두리까지** 바뀝니다. 빛깔만 바꾸면 어르신께 잘 안 보입니다 */
.고름.on {
  background: var(--primary-soft); border-color: var(--primary);
  color: var(--primary); font-weight: 600;
}
.고름-작게 { padding: 6px 10px; font-size: 12.5px; }
.고름-그림 { font-size: 15px; }

/* 상황 — 갈래로 묶습니다 (몸 · 마음 · 집안 · 믿음 …) */
.갈래 { width: 100%; margin-bottom: 8px; }
.갈래-이름 {
  font-size: 11.5px; color: var(--text-faint); font-weight: 600;
  letter-spacing: .04em; margin-bottom: 5px;
}
.갈래-속 { display: flex; flex-wrap: wrap; gap: 6px; }

/* 말씀 후보 셋 */
.줄단추 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#후보판 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.후보 {
  text-align: left; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font-family: inherit;
  color: var(--text); transition: .12s;
}
.후보:hover { border-color: var(--primary); }
.후보.on { background: var(--primary-soft); border-color: var(--primary); }
.후보-장절 { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.후보-왜 { font-size: 12px; color: var(--text-muted); line-height: 1.65; }
/* 🔴 찬송은 **그 심방에 쓸 것만** 보입니다. 목록을 보이지 않습니다 (PRD 10장) */
.찬송줄 {
  grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted);
  padding-top: 4px; border-top: 1px dashed var(--border-strong);
}

.직접칸 { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.직접칸 label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.고른본문 {
  margin: 12px 0 0; padding: 9px 12px; border-radius: var(--radius);
  background: var(--success-soft); color: #0B7A55; font-size: 13px; font-weight: 600;
}

.바닥단추 {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: 20px 0 30px;
}

/* ══════════ 만드는 중 ══════════ */
.기다림칸 { text-align: center; padding: 70px 20px; }
.기다림칸 h3 { margin: 18px 0 6px; font-size: 16px; }
.셈초 { font-variant-numeric: tabular-nums; color: var(--text-faint); }
.돌개 {
  width: 34px; height: 34px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: 돌기 .9s linear infinite;
}
@keyframes 돌기 { to { transform: rotate(360deg); } }
/* 어지러움을 타시는 분도 계십니다 — 운영체제 설정을 따릅니다 */
@media (prefers-reduced-motion: reduce) {
  .돌개 { animation: none; border-top-color: var(--border); }
}

/* ══════════ 4·5단계 — 초안 · 수정 ══════════ */
.초안머리 {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 6px;
}
.초안-누구 { font-size: 17px; font-weight: 700; }
.초안-곁 { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
/* 초안 안내 — 「걸린 것이 있지만 드립니다」 같은 말. 붉지도 노랗지도 않게 */
#초안-안내 { background: var(--primary-soft); color: var(--primary); border: 1px solid #DDCDEE; }

.단락 {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
.단락:hover { border-color: var(--border-strong); }
.단락-머리 { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.단락-이름 { font-size: 12px; font-weight: 700; color: var(--primary-deep); }
.단락-셈 { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.단락-고치기 { margin-left: auto; }
/* 🔴 `pre-wrap` — 원고의 줄바꿈이 그대로 보여야 합니다. 종이와 같게 */
.단락-글 { white-space: pre-wrap; font-size: 13.5px; line-height: 1.85; cursor: text; }
.단락-입력 {
  width: 100%; padding: 10px 12px; border: 1px solid var(--primary);
  border-radius: var(--radius); font-family: inherit; font-size: 13.5px;
  line-height: 1.85; color: var(--text); resize: vertical;
}
.단락-입력:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.단락-고치는중 .줄단추 { margin-top: 8px; }
.단락-길이 { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   교인 목록 — 왼쪽 소속 · 오른쪽 명부 (2026-08-29)

   🔴 대표 지적 — 「1000명 교회는 어려움이 있겠지? …… 속회를 누르면
      그 속회에 있는 사람들이 나오게 하면 좋겠고」

   ★ 왼쪽 칸을 **접히지 않게** 두었습니다. 단계를 접었다 폈다 하는 재미보다
     「어디를 보고 있는가」가 늘 보이는 편이 낫습니다. 대신 들여쓰기로
     구역 → 교구 → 속회를 나타냅니다.
   ══════════════════════════════════════════════════════════════════════════ */
.교인판 { display: grid; grid-template-columns: 216px 1fr; gap: 16px; align-items: start; }
.교인칸 { min-width: 0; }   /* 🔴 없으면 표가 넓어질 때 왼쪽 칸을 밀어냅니다 */

.조직칸 {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 8px 8px;
  position: sticky; top: 0;
}
.조직칸-머리 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-faint); padding: 0 8px 8px;
}
.조직나무 { display: flex; flex-direction: column; gap: 1px; max-height: 62vh; overflow-y: auto; }

/* 🔴 `<button>` 입니다 — 자판만으로도 고르실 수 있어야 합니다 */
.조직줄 {
  display: flex; align-items: center; gap: 6px;
  width: 100%; text-align: left; border: none; background: none;
  font: inherit; font-size: 13px; color: var(--text);
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.조직줄:hover { background: var(--surface-2); }
.조직줄.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.조직줄 .이름 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.조직줄 .몇명 { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.조직줄.on .몇명 { color: var(--primary); }
/* 들여쓰기로 단계를 나타냅니다 */
.조직줄.깊이1 { padding-left: 20px; }
.조직줄.깊이2 { padding-left: 32px; }
.조직가름 { height: 1px; background: var(--border); margin: 6px 4px; }

.더보기줄 { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 14px 0 4px; }
.더보기곁 { font-size: 12.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* 방금 만든 원고 — 인쇄를 마치고 돌아왔을 때 다시 열 수 있는 자리 (2026-08-29) */
.방금줄 {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--primary-soft); border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.방금말 { flex: 1; min-width: 0; font-size: 13px; color: var(--primary-deep); }

/* 심방 갈 곳 · 길안내 (2026-08-29) — 이름 바로 밑에 한 줄 */
.갈곳 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 9px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.갈곳-딱지 {
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--text-faint); flex: none;
}
.갈곳-주소 { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); }

/* ⚠ `.편수줄` 이 여기 있었습니다 — 초안 맨 위에 「한 편이 차감되었습니다」를
     띄우던 것입니다. **걷어냈습니다** (2026-08-29 대표 — 「굳이 그렇게 써넣지 않아도 되」).
     남은 편수는 7단계에서 오른쪽 위 딱지에 숫자로 보여 드립니다. */

/* 좁은 화면 — 노트북 한 대로 보시는 분이 많습니다 */
@media (max-width: 1000px) {
  .두칸 { grid-template-columns: 1fr; }
  #후보판 { grid-template-columns: 1fr; }
}

/* 더 좁으면 소속 칸을 위로 올려 눕힙니다 */
@media (max-width: 820px) {
  .교인판 { grid-template-columns: 1fr; }
  .조직칸 { position: static; }
  .조직나무 { max-height: 34vh; }
}

/* ══════════════════════════════════════════════════════════════════════════
   만든 곳과 물어보실 곳 (2026-08-29)

   🔴 **교적 `app.css` 의 `.만든곳` 을 그대로 옮겼습니다.**
      값을 손대지 마십시오 — 세 프로그램의 왼쪽 아래가 같아 보여야 합니다.
      교적 쪽이 바뀌면 여기도 그대로 다시 옮기십시오.

   ★ 쓰시다 막히시면 **어디로 물어야 하는지가 늘 보여야** 합니다 (2026-08-19 대표 지시).
   ══════════════════════════════════════════════════════════════════════ */

.만든곳 {
  margin-top: auto; padding: 14px 10px 10px; text-align: center;
  border-top: 1px solid var(--border);
}
.만든곳로고 { width: 118px; max-width: 100%; height: auto; display: block; margin: 0 auto 6px; }
/* 🔴 링크가 아니라 **단추**입니다 (2026-08-20 대표 지시).
     `tel:` 로 두면 컴퓨터에서 「앱 선택」 창만 뜨고 아무 일도 일어나지 않습니다. */
.만든곳전화, .만든곳메일 {
  display: block; width: 100%; padding: 2px 0; margin: 0;
  background: none; border: none; cursor: pointer;
  font-family: inherit; letter-spacing: -.01em; text-align: center;
}
.만든곳전화 { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.만든곳메일 { font-size: 11.5px; font-weight: 600; color: var(--text-faint); margin-top: 1px; }
.만든곳전화:hover, .만든곳메일:hover { color: var(--primary); text-decoration: underline; }
.만든곳시간 { margin-top: 4px; font-size: 10.5px; color: var(--text-faint); letter-spacing: -.01em; }
/* 만든 곳이 아래를 밀어 주므로 여기서는 밀지 않습니다 */
.sidebar-foot { margin-top: 0; }

/* ══════════ 우리 창 — 브라우저 alert 를 쓰지 않습니다 ══════════
   🔴 2026-08-20 대표 지시 — 「이렇게 위로 뜨는 게 이쁘지 않아.」
      브라우저가 주는 회색 띠가 아니라 **우리 창**이어야 합니다. */
.덮개 {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(36, 31, 51, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.선택창 {
  background: var(--surface); border-radius: 14px; width: 420px; max-width: 100%;
  max-height: 82vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(36, 31, 51, .25);
}
.선택창머리 { padding: 20px 22px 12px; border-bottom: 1px solid var(--border); }
.선택창머리 h3 { margin: 0; font-size: 15.5px; }
.선택창몸 { flex: 1; overflow: auto; padding: 8px 12px; }
.선택창바닥 {
  display: flex; gap: 8px; padding: 14px 22px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 14px 14px;
}
.선택창바닥 .btn { padding: 9px 20px; }
.선택창몸 .field { padding: 0 12px; margin-top: 10px; }
.field label .hint { color: var(--text-faint); font-size: 11px; margin-left: 4px; }
.field small.hint { display: block; color: var(--text-faint); font-size: 11.5px; margin-top: 5px; }
.field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); font-size: 13.5px; font-family: inherit;
  color: var(--text); background: var(--surface); line-height: 1.7;
}
.field textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }

.문의창 { width: 560px; }
.문의받는곳 { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.문의창 .선택창몸 { padding: 14px 22px 4px; }
.문의창 textarea { min-height: 150px; resize: vertical; }
.문의창 .알림.danger { white-space: pre-line; }

.알림창 { width: 400px; }
/* 🔴 `pre-line` — 안내 글의 줄바꿈이 그대로 보여야 합니다 */
.알림몸 { margin: 6px 12px; font-size: 13.5px; line-height: 1.75; white-space: pre-line; }

/* ── 교회 로고 — 🔴 교적 `app.css` 의 값을 그대로 옮겼습니다 (2026-08-29) ──
     셋이 나란히 열려 있는데 크기가 다르면 눈에 걸립니다. */
.교회머리 {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 14px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.교회로고 {
  width: 30px; height: 30px; border-radius: 7px; object-fit: contain;
  background: var(--surface); border: 1px solid var(--border); flex: none;
}
/* 이름은 이제 `.교회머리` 가 감싸므로 스스로 밀지 않습니다 */
.교회머리 .church-name { padding: 0; border: none; margin: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   심방 계획 · 심방 일정 (2026-08-29)

   🔴 대표 지적 — 「우리 차림표에 **교인 달랑 하나**인게 맘에 걸려」
      「스케줄 뿐만 아니라 **심방 계획하는 곳도** 있어야 하잖아」

   ★ 카드 생김새는 대표께서 보여 주신 목업을 따랐습니다 —
     이름·시각 / 종류·소속 / 주소와 〔길안내〕 / 딱지 / 아래 단추들.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 심방 계획 ─────────────────────────────────────────────────────────── */
.계획줄 {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.계획줄:hover { background: var(--surface-2); }
/* 이미 일정을 잡으신 분은 **지우지 않고 흐리게** 둡니다 —
   사라지면 「내가 잡았던가?」 하고 다시 찾으십니다 */
.계획줄.잡힘 { opacity: .55; }
.계획-왼 { flex: 1; min-width: 0; }
.계획-오른 { flex: none; }
.계획-이름 { font-size: 14.5px; font-weight: 700; color: var(--text); }
.계획-직분 { font-size: 12.5px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.계획-곁 { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }
.잡힘말 { font-size: 12.5px; color: var(--text-faint); }

/* 🔴 딱지가 곧 「왜 이분이 위에 있는가」입니다.
     점수(38점)는 목회자에게 아무 뜻이 없어 화면에 안 보여 드립니다. */
.딱지들 { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.딱지 {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-deep);
}
.딱지.조용 { background: var(--surface-2); color: var(--text-faint); }

/* ── 날짜 옮기기 줄 ────────────────────────────────────────────────────── */
.날짜줄 {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.날짜가운데 { flex: 1; text-align: center; }
.날짜글 { font-size: 15px; font-weight: 700; color: var(--text); }
.날짜곁 { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ── 일정 카드 ─────────────────────────────────────────────────────────── */
.일정카드 {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 13px 15px; margin-bottom: 11px;
}
/* 다녀오신 것과 안 계셨던 것은 **한눈에 갈립니다** */
.일정카드.상태-done { opacity: .6; }
.일정카드.상태-absent { border-color: var(--border-strong); background: var(--surface-2); }

.일정-머리 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.일정-이름 { font-size: 15px; font-weight: 700; color: var(--text); }
.일정-시각 { font-size: 13.5px; font-weight: 700; color: var(--primary); flex: none; }
.일정-곁 { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

/* 🔴 「길안내 버튼도 딱 이 폰의 이 화면에 들어가면 되거든」 — 2026-08-29 대표 */
.일정-가는길 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border);
}
.일정-주소 { flex: 1; min-width: 0; font-size: 13px; color: var(--text); }
.일정-주소.없음 { color: var(--text-faint); }

.일정-발 { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.일정-끝 { font-size: 12.5px; color: var(--text-muted); }
.일정-끝.부재 { color: var(--danger); }
/* 되돌릴 수 있는 일이라 붉게 하지 않고 **글자만** 다르게 둡니다 */
.btn.위험 { color: var(--danger); }

.일정창 { width: 460px; }

/* ═══════════════ 흐린 차림 (아직 속이 없는 보관함·설정) ═══════════════
   🔴 2026-08-29 대표 결정 — 「흐리게 미리 올리기」
      교적의 「심방플러스」 단추를 흐리게 두신 것과 같은 이치입니다.
   ⚠ `pointer-events: none` 을 주지 마십시오. 그러면 눌러도 아무 반응이 없어
     **고장으로 보입니다.** 누르시면 「곧 나옵니다」라고 말씀은 드려야 합니다. */
.menu-item.흐림 { opacity: .42; }
.menu-item.흐림:hover { opacity: .62; background: var(--surface); color: var(--text-muted); }
.menu-item.흐림::after {
  content: '곧'; float: right; font-size: 10.5px; font-weight: 600;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px;
  padding: 0 6px; line-height: 16px; margin-top: 1px;
}

/* ═══════════════ 심방 계획 — 위아래 두 칸 ═══════════════
   🔴 2026-08-29 대표 지시 — 「화면을 위아래 반을 나누어서」
   ★ 반씩 딱 자르지 않고 `auto` 로 두었습니다. 교인이 세 분인 교회에서
     위 칸을 억지로 반이나 비워 두면 아래가 안 보입니다. */
.계획위아래 { display: flex; flex-direction: column; gap: 18px; }
.계획위 { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.계획칸머리 {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px;
}
.계획칸머리 b { font-size: 13.5px; color: var(--text); }
.계획칸머리 .hint { margin: 0; }
/* 위 칸의 목록은 길어지지 않게 눌러 둡니다 — 아래 칸이 화면 밖으로 밀리면
   대표께서 「추천이 안 보인다」 하십니다. 넘치면 그 안에서 굴립니다. */
.계획위 .교인칸 { max-height: 340px; overflow-y: auto; }
.계획위 .조직나무 { max-height: 340px; overflow-y: auto; }

/* ═══════════════ 달력 ═══════════════
   🔴 2026-08-29 대표 지시 — 「심방일정 차림표를 누르면 달력과 함께」
   ★ 일정이 있는 날에는 **점**만 찍습니다. 칸이 좁아 이름을 적으면
     「김권」처럼 잘려 아무 도움이 안 됩니다. */
.달력칸 {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px 14px; margin-bottom: 16px;
}
.달력머리 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.달력달 { flex: 1; text-align: center; font-weight: 600; font-size: 14px; }
.달력요일, .달력판 { display: grid; grid-template-columns: repeat(7, 1fr); }
.달력요일 { margin-bottom: 4px; }
.달력요일 span {
  text-align: center; font-size: 11.5px; color: var(--text-muted); padding: 4px 0;
}
.달력요일 .일 { color: var(--danger); }
.달력요일 .토 { color: #2563EB; }
.달력빈칸 { height: 44px; }
.달력날 {
  height: 44px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  font: inherit; color: var(--text); padding: 0;
}
.달력날:hover { background: var(--surface-2); }
/* 🔴 숫자에 **동그라미**를 씌웁니다 — 칸 전체를 칠하면 폰에서
     세로로 긴 알약이 되어 볼썽사납습니다 (2026-08-31 크롬으로 보고 고침). */
.달력날 .날숫자 {
  font-size: 13px; line-height: 26px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%;
}
.달력날.일 .날숫자 { color: var(--danger); }
.달력날.토 .날숫자 { color: #2563EB; }
/* 오늘은 **테두리**, 고르신 날은 **채움** — 둘이 같은 날일 수도 있습니다 */
.달력날.오늘 .날숫자 { box-shadow: inset 0 0 0 1px var(--border-strong); }
.달력날.고른날 .날숫자 { background: var(--primary); }
.달력날.고른날 .날숫자,
.달력날.고른날.일 .날숫자,
.달력날.고른날.토 .날숫자 { color: #fff; font-weight: 600; }
.날점 { height: 8px; font-size: 11px; line-height: 8px; color: var(--primary); letter-spacing: -1px; }
.달력날.고른날 .날점 { color: var(--primary); }

/* ═══════════════ 일정 잡기 창 — 그날 시간표와 겹침 ═══════════════
   🔴 2026-08-29 대표 지시 — 「같은 시간에 잡으려고 할때 경고 알람이 떠야」 */
.그날일정칸 {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 9px 11px; margin: 2px 0 12px;
}
.그날머리 { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.그날줄들 { display: flex; flex-wrap: wrap; gap: 6px; }
.그날줄 {
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-muted);
}
.그날줄 b { color: var(--text); font-weight: 600; }
/* 겹치는 시각은 **눈으로 먼저** 보이게 — 글은 그다음입니다 */
.그날줄.겹침 {
  background: #FFF7E6; border-color: #FDE1A9; color: #92400E;
}
.그날줄.겹침 b { color: #92400E; }

/* ══════════════════════════════════════════════════════════════════════════
   폰 화면 (2026-08-31 대표 지시)

   > 「이거 **난잡하기 그지 없다.** 이렇게 되면 **완성도에도 문제**가 되어 보이고.
   >  **폰용으로는 UI설정을 다시** 해야겠는데.」

   ★ 대표께서 폰으로 열어 보시고 사진을 보내 주셨습니다. 이랬습니다 —
       · 왼쪽 차림표가 **화면 절반**을 먹음
       · 이름이 「구/평/화」·「부/담/임/목/사」로 **세로로 쪼개짐**
       · 「오늘」 단추가 **화면 밖으로 잘림**
       · 달력 머리가 「2026 / 년 8 / 월」로 깨짐
       · 옆으로 밀림

   🔴 근본 원인은 하나입니다 — **데스크톱 화면을 폰 폭에 그대로 밀어 넣은 것.**
      특히 다섯 칸짜리 **표**를 360px 에 넣으면 글자가 세로로 서 버립니다.
      **폰에서 표는 쓰지 않습니다. 줄 카드로 바꿉니다.**

   ⚠ 여기서 **화면을 두 벌 만들지 않았습니다.** 같은 HTML 을 CSS 로 다시 앉힙니다.
     두 벌이 되면 다음에 한쪽만 고치게 됩니다 (이 프로그램에서 이미 두 번 겪은 병).
   ══════════════════════════════════════════════════════════════════════════ */

/* 아래 띠 — 컴퓨터에서는 아예 없습니다 */
.탭바 { display: none; }

@media (max-width: 720px) {

  /* ── 뼈대 ────────────────────────────────────────────────────────────
       왼쪽 차림표를 **통째로 감춥니다.** 그 자리가 아래 띠로 갑니다.
       🔴 `100vh` 를 쓰지 않습니다 — 폰 브라우저는 주소창이 접혔다 펴지며
          `vh` 가 흔들려 아래가 잘립니다. `100dvh` 가 실제로 보이는 높이입니다. */
  .app-shell { grid-template-columns: 1fr; height: 100dvh; height: 100svh; }
  .sidebar { display: none; }

  .탭바 {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    /* 🔴🔴 **불투명해야 합니다** (2026-08-31 대표 지적)
         > 「메뉴창이 **투명해서 잘 안보이고** 더 보기를 누르면 더 안보이네」
       처음에 `var(--card)` 라고 적었는데 **그런 이름이 없습니다.** 제가 지어냈습니다.
       CSS 는 모르는 이름을 만나면 **그 줄을 조용히 버립니다** — 탈이 하나도 안 뜹니다.
       그래서 띠가 유리처럼 비쳐 뒤의 교인 이름과 글자가 겹쳤습니다.
       ⚠ 여기에 반투명(`rgba`)이나 `opacity` 를 넣지 마십시오.
         뒤로 목록이 흘러 지나가는 자리입니다. */
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px rgba(36, 31, 51, .10);
    /* 아이폰 아래 가로줄에 단추가 가리지 않게 */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .탭 {
    border: 0; background: none; font: inherit; cursor: pointer;
    padding: 11px 2px 12px; font-size: 12px; font-weight: 600;
    color: var(--text-faint); letter-spacing: -.02em;
    border-top: 2px solid transparent; margin-top: -1px;
  }
  .탭.on { color: var(--primary); border-top-color: var(--primary); }

  .topbar { padding: 12px 16px; }
  .topbar h2 { font-size: 17px; }
  .content {
    padding: 14px 16px;
    /* 아래 띠에 마지막 줄이 가리지 않게 */
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0));
  }
  /* 🔴 어떤 것도 옆으로 밀지 않습니다 — 폰에서 가로 스크롤은 고장으로 보입니다 */
  body, .app-shell, .main, .content { overflow-x: hidden; }

  /* ── 표를 줄 카드로 ──────────────────────────────────────────────────
       🔴 대표 확정 — **이름 · 직분 · 속회만** 보여 드립니다.
          성별과 생년월일은 명부를 훑으실 때 거의 안 보시는 칸입니다.
          폰에서 그 둘을 살리면 이름이 세로로 섭니다. */
  .table { border: 0; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1px 7px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--border);
  }
  .table td { border: 0; padding: 0; white-space: normal; }
  .table td:nth-child(1) {            /* 이름 */
    grid-area: 1 / 1 / 2 / 2;
    font-size: 16px; font-weight: 600; color: var(--text);
  }
  .table td:nth-child(2) {            /* 직분 */
    grid-area: 1 / 2 / 2 / 3;
    font-size: 13px; color: var(--text-muted);
  }
  .table td:nth-child(3) {            /* 속회 */
    grid-area: 2 / 1 / 3 / 3;
    font-size: 12.5px; color: var(--text-faint);
  }
  .table td:nth-child(4),             /* 성별 — 감춥니다 */
  .table td:nth-child(5) { display: none; }   /* 생년월일 — 감춥니다 */
  .table td:nth-child(6) {            /* 단추 — 오른쪽에 세로로 걸칩니다 */
    grid-area: 1 / 3 / 3 / 4; text-align: right;
  }
  .table td:nth-child(6) .btn { white-space: nowrap; }
  /* 찾으시는 분이 없을 때의 한 줄은 카드가 아니라 그냥 글입니다 */
  .table td.empty, .table td[colspan] {
    display: block; grid-area: auto; text-align: center; padding: 22px 0;
  }
  .table tr:has(td[colspan]) { display: block; }

  /* ── 소속 나무 — 접어 둡니다 ─────────────────────────────────────────
       🔴 열 줄짜리 나무를 늘 펴 두면 **교인이 화면 밖으로 밀립니다.**
          평소에는 접고, 「소속」을 누르셨을 때만 폅니다. */
  .교인판 { grid-template-columns: 1fr; gap: 10px; }
  .조직칸 { position: static; }
  .조직칸.접힘 .조직나무 { display: none; }
  .조직칸-머리 {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; padding: 11px 13px; margin: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); font-size: 13px; font-weight: 600;
  }
  .조직칸-머리::after {
    content: '펴기'; font-size: 11.5px; font-weight: 600; color: var(--primary);
  }
  .조직칸:not(.접힘) .조직칸-머리::after { content: '접기'; }
  .조직나무 {
    max-height: 46vh; overflow-y: auto; margin-top: 8px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 6px;
  }
  .조직줄 { padding: 11px 12px; font-size: 14px; }   /* 손가락이 닿는 크기 */

  .toolbar { flex-wrap: wrap; gap: 8px; }
  .search { flex: 1 1 100%; font-size: 16px; }  /* 🔴 16px 미만이면 아이폰이 화면을 확대합니다 */

  /* ── 계획 화면 ──────────────────────────────────────────────────────
       위 칸을 340px 로 눌러 두었는데, 폰에서는 그러면 **두 줄만** 보입니다.
       폰은 어차피 세로로 기니 그냥 흐르게 두고, 아래 칸은 스크롤로 만납니다. */
  .계획위 .교인칸, .계획위 .조직나무 { max-height: none; }
  .계획위 { padding-bottom: 14px; }
  .계획칸머리 { gap: 4px; }
  .계획칸머리 .hint { font-size: 12px; }
  .계획줄 { flex-wrap: wrap; gap: 8px; padding: 13px 2px; }
  .계획-오른 { width: 100%; }
  .계획-오른 .btn { width: 100%; padding: 10px; }

  /* ── 달력 ───────────────────────────────────────────────────────────
       🔴 「2026 / 년 8 / 월」로 깨지고 「오늘」이 잘려 나갔습니다.
          머리를 두 줄로 나누고, 달 이름은 **줄바꿈을 막습니다.** */
  .달력칸 { padding: 10px 8px 12px; }
  .달력머리 { flex-wrap: wrap; row-gap: 8px; }
  .달력달 { white-space: nowrap; font-size: 15px; order: 1; flex: 1 1 auto; }
  .달력-앞달 { order: 0; }
  .달력-뒷달 { order: 2; }
  .달력머리 #일정-오늘 { order: 3; flex: 1 1 100%; }   /* 잘리지 않게 한 줄을 통째로 */
  .달력날, .달력빈칸 { height: 42px; }
  .달력날 .날숫자 { font-size: 14px; }

  /* ── 날짜줄 · 일정 카드 ──────────────────────────────────────────── */
  .날짜줄 { gap: 6px; }
  .날짜글 { white-space: nowrap; font-size: 14.5px; }
  .날짜곁 { font-size: 12px; }
  .일정카드 { padding: 14px; }
  .일정-머리 { flex-wrap: wrap; gap: 2px 10px; }
  .일정-가는길 { flex-direction: column; align-items: stretch; gap: 8px; }
  .일정-가는길 .줄단추 { display: flex; gap: 8px; }
  .일정-가는길 .줄단추 .btn { flex: 1; padding: 11px 0; }   /* 길에서 누르는 단추입니다 */
  .일정-발 { display: flex; flex-wrap: wrap; gap: 8px; }
  .일정-발 .btn { flex: 1 1 auto; padding: 10px 12px; }
  .일정-발 .btn-primary { flex-basis: 100%; }

  /* ── 창 ─────────────────────────────────────────────────────────────
       폰에서 가운데 뜨는 네모 창은 좁고 답답합니다. **아래에서 올라오게** 합니다. */
  .선택창 { width: 100%; max-width: 100%; max-height: 90dvh; border-radius: 16px 16px 0 0; }
  .덮개 { align-items: flex-end; padding: 0; }   /* 위와 같은 까닭 — 틈을 남기지 않습니다 */
  .일정창 { width: 100%; }
  .선택창몸 { max-height: none; }
  .선택창바닥 { position: sticky; bottom: 0; background: var(--surface); }
  .선택창바닥 .btn { flex: 1; padding: 12px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .두칸 { grid-template-columns: 1fr; }
  .그날줄들 { gap: 5px; }
}

/* ── 폰의 「더보기」 장 ──────────────────────────────────────────────── */
/* 🔴 바닥에 **딱 붙습니다.** `.덮개` 의 padding 20px 을 그대로 두면
     장 아래에 틈이 생기고 그 틈으로 **아래 띠가 비쳐** 보입니다
     (2026-08-31 크롬으로 보고 고침). */
.아래덮개 { align-items: flex-end; padding: 0; }
.더보기장 {
  /* 🔴 위 `.탭바` 와 같은 까닭입니다 — **불투명해야 읽힙니다.** */
  width: 100%; background: var(--surface);
  box-shadow: 0 -14px 40px rgba(36, 31, 51, .28);
  border-radius: 16px 16px 0 0; padding: 8px 14px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; gap: 2px;
}
.더보기손잡이 {
  width: 38px; height: 4px; border-radius: 99px; background: var(--border);
  margin: 6px auto 12px;
}
.더보기줄단추 {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  width: 100%; padding: 13px 12px; border: 0; border-radius: var(--radius);
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.더보기줄단추:hover { background: var(--surface-2); }
.더보기줄단추 span { font-size: 15px; font-weight: 600; color: var(--text); }
.더보기줄단추 small { font-size: 12px; color: var(--text-faint); }
/* 🔴 흐린 것도 **누르면 말은 합니다.** 말없이 죽은 단추는 고장으로 보입니다. */
.더보기줄단추.흐림 span { color: var(--text-faint); }
.더보기닫기 { margin-top: 8px; padding: 12px; }

/* ═══════════════ 보관함 (2026-08-31) ═══════════════
   🔴 오늘부터 원고가 실제로 남습니다. 「지난주 그 원고」를 찾으시는 자리입니다.
   ★ 계획 줄과 같은 결로 두었습니다 — 같은 프로그램 안에서 목록이 서로
     다르게 생기면 그때마다 눈이 다시 배웁니다. */
.원고줄 {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--border);
}
.원고줄:hover { background: var(--surface-2); }
.원고-이름 { font-size: 15px; font-weight: 600; color: var(--text); }
.원고-직분 { font-size: 12.5px; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.원고-곁 { margin-top: 3px; font-size: 12.5px; color: var(--text-faint); }
.원고줄 .딱지 { margin-top: 6px; }
.원고-오른 { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 720px) {
  .원고줄 { flex-wrap: wrap; }
  .원고-오른 { width: 100%; }
  .원고-오른 .btn { flex: 1; padding: 10px; }
}

/* ═══════════════ 설정 — 이번 달 편수 (2026-08-31) ═══════════════
   🔴 PRD 4-C ⑥ — 「편수를 다 쓰셨을 때 반드시 물어봅니다」
      **모르고 돈이 나가면 그 교회는 다음 달에 해지합니다.** */
.설정칸 {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
}
.설정머리 { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 12px; }
.편수큰줄 { display: flex; align-items: baseline; gap: 6px; }
.편수쓴것 { font-size: 32px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.편수한도 { font-size: 15px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.편수막대 {
  height: 7px; border-radius: 99px; background: var(--surface-2);
  margin: 12px 0 10px; overflow: hidden;
}
.편수막대 i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
/* 한도에 닿으면 빛깔이 바뀝니다 — 숫자보다 눈이 먼저 봅니다 */
.편수막대.넘음 i { background: var(--danger); }
.설정표 { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.설정표 dt { font-size: 13px; color: var(--text-faint); }
.설정표 dd { font-size: 13.5px; color: var(--text); margin: 0; }
/* 오른쪽 위 딱지에 숫자가 들어갑니다 */
.badge.넘음 { background: var(--danger-soft); color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════════════
   🔴🔴 여러 목회자 · 권한 (2026-08-31 대표 확정 — 원고는 쓰신 분의 것)

   ⚠ 여기 쓰는 이름은 **정말 있는 것만**입니다 —
     `--surface` `--surface-2` `--bg` `--text` `--text-muted` `--text-faint`
     `--border` `--border-strong` `--primary` `--danger`
     8월 30일에 `--card` `--muted` 라는 **없는 이름**을 열두 군데 썼다가
     차림표가 투명해졌습니다. CSS 는 모르는 이름을 **말없이 버립니다.**
   ══════════════════════════════════════════════════════════════════════════ */

/* 「온 교회 원고 보기」 — 담임목사님께만 보입니다 */
.온교회칸 {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-muted); cursor: pointer;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface); user-select: none;
}
.온교회칸:hover { border-color: var(--border-strong); color: var(--text); }
/* 🔴 폰에서 눌러도 확대되지 않게 — 입력칸은 16px 이상이어야 합니다 */
.온교회칸 input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }

/* 켜신 동안의 알림 — 위험(빨강)이 아닙니다. **알고 계시라는 말**입니다 */
.알림.온교회알림 {
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.알림.온교회알림 b { color: var(--text); }

/* 「○○ 목회자」 딱지 — 남의 것이라는 표입니다. 눈에 띄되 겁주지 않습니다 */
.딱지.남의것 {
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}

/* 고치지 못하는 단락 — **눌러도 안 열립니다.** 손 모양을 바꿔 미리 알려 드립니다 */
.단락-글.못고침 { cursor: default; }
.단락-글.못고침:hover { background: transparent; }

/* 설정 화면 「누가 몇 편」 — 이름과 편수뿐입니다 */
.설정표.사람별 { margin-top: 10px; }
.설정표.사람별 dd { font-variant-numeric: tabular-nums; }

/* ── 함께 계신 분들 — 가정 심방 · 속회 심방 (2026-08-31) ────────────────────
     ★ **전원 체크된 채로** 뜹니다. 못 오신 분만 빼시면 됩니다. */
.함께칸 {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 12px 14px; margin-bottom: 14px;
}
.함께머리 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.함께제목 { font-size: 13.5px; font-weight: 700; color: var(--text); }
.함께판 { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.함께줄 {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 2px; cursor: pointer; user-select: none;
}
/* 🔴 폰에서 손가락이 닿아야 합니다 — 작은 네모는 못 누르십니다 */
.함께줄 input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }
.함께이름 { font-size: 13.5px; color: var(--text); }
.함께직분 { font-size: 12px; color: var(--text-faint); }
.함께없음 { margin: 0; font-size: 12.5px; color: var(--text-faint); }

/* ── 모아 인쇄 줄 — 준비된 원고가 있는 날에만 뜹니다 (2026-08-31) ────────── */
.모아줄 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.모아곁 { font-size: 12.5px; color: var(--text-faint); }

/* ── 글자 크기 고르기 (2026-08-31 대표 확정 · 종이와 화면 둘 다) ────────────
     ★ 맛보기 줄이 **고르신 크기 그대로** 보입니다. 「12.5pt」라는 말보다
       눈으로 보시는 편이 빠릅니다. */
.글자고르기 { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.글자단추 {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font-family: inherit;
}
.글자단추:hover { border-color: var(--border-strong); }
.글자단추.on {
  border-color: var(--primary); background: var(--primary);
  color: #fff;
}
.글자이름 { font-size: 13.5px; font-weight: 600; }
.글자값   { font-size: 11px; opacity: .72; font-variant-numeric: tabular-nums; }
/* 맛보기 — 종이에 찍힐 크기를 그대로 봅니다 (`--종이글자` 는 같은 값입니다) */
.글자맛보기 {
  margin: 0 0 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); color: var(--text);
  font-size: var(--종이글자, 11pt);
  line-height: var(--종이줄간, 1.80);
}

/* ── 적으며 여쭙기 — 「다녀왔습니다」의 메모 한 줄 (2026-08-31) ────────────── */
.알림적기 { display: block; margin: 12px 12px 2px; }
.알림적기 > span {
  display: block; font-size: 12px; color: var(--text-faint); margin-bottom: 5px;
}
.알림적기 textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  padding: 9px 10px; line-height: 1.7;
  /* 🔴 폰에서 16px 아래면 손대는 순간 화면이 **확대됩니다** */
  font-size: 16px; font-family: inherit;
}
.알림적기 textarea:focus { outline: none; border-color: var(--primary); }

/* 🔴 음력 생신 딱지 — 2026-09-05 (교적팀 sql/80 · 대표 지시)
     날짜만 보여 드리면 목사님이 양력으로 읽으십니다. 작게, 그러나 보이게. */
.음력딱지 { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* 🔴 진행 막대 — 2026-09-06 대표 지시
     「누른 사람은 마냥 기다리잖아. % 진행됨을 표시해주는건 어떨까」
   ★ 굵게 두었습니다. 어르신 목회자께서 멀리서도 보셔야 합니다.
   ★ 색을 두 가지로 나누지 않았습니다 — 「빨강이 되면 잘못된 것인가」로 읽힙니다. */
.진행틀 {
  width: 100%;
  max-width: 320px;
  height: 12px;
  margin: 18px auto 10px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.진행막대 {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 999px;
  /* 0.5초마다 다시 그리니 그보다 조금 길게 — 툭툭 끊기지 않게 */
  transition: width .6s linear;
}
@media (prefers-reduced-motion: reduce) {
  .진행막대 { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   🔴 로그아웃 단추 — **세 프로그램이 같은 모양이라야 합니다**
        (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(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 640px) {
  .btn.btn-logout { min-height: 44px; padding: 6px 14px; }
}

/* 🔴 그 칸을 다 쓰게 합니다 (2026-09-10 대표 지시)
     대표 말씀 — 「로그아웃 버튼 크기가 메뉴창 오른을 적당히 채웠으면 좋겠어」

     교적에는 `.sidebar-foot .btn { width:100% }` 가 이미 있었습니다.
     그래서 교적만 그 칸을 다 쓰고 있었고, 심방플러스는 글자 폭만큼이었습니다.
     이제 로그아웃 단추에는 셋 다 이 규칙이 걸립니다. */
.sidebar-foot .btn.btn-logout { width: 100%; }
@media (max-width: 640px) {
  .sidebar-foot .btn.btn-logout { width: auto; }
}