/* ==================================================================
 *  재정 화면 윗칸 — **세 앱이 같은 한 곳**을 씁니다 (shared/fincards.css)
 * ------------------------------------------------------------------
 *  재정 앱은 shared/theme.css 를 쓰지 않으므로(혼자 서는 한 장짜리 앱),
 *  모양도 따로 떼어 두었습니다. 고치고 build.sh 를 돌립니다.
 *
 *  ★ 쓰는 색 이름은 통합 앱들의 것입니다(--hdr · --surface · --ink …).
 *    재정 앱은 :root 에서 그 이름을 제 색으로 이어 둡니다.
 * ================================================================== */
.fin-cards{margin-bottom:14px}
/* 총 수입 — 제목과 금액을 **한 줄**에. 예전에는 세로로 넓었습니다. */
.fc-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--hdr);color:var(--hdr-ink);border-radius:var(--radius);
  padding:11px 16px;margin-bottom:8px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.fc-sum .fc-lb{font-size:14px;font-weight:700;opacity:.92}
.fc-sum b{font-variant-numeric:tabular-nums;font-size:21px;font-weight:800;letter-spacing:-.02em}

/* ── 교회 예산 · 청년부 회비 · 통장 잔액 (2026-09-23 에 다시 잡았습니다) ──
   왼쪽에 동그란 아이콘, 오른쪽에 제목과 금액입니다. **안내 문구는 두지 않습니다** —
   「교회에서 지원받은 예산」 같은 줄이 자리만 먹었습니다.
   높이를 58px · 54px 로 못 박아 **예전보다 20~30px 낮습니다**(행사가 더 보입니다).
   금액이 길거나 글자를 키우면 늘어나게 두어 잘리지는 않습니다. */
.fin-cards .fc-bud,
.fin-cards .fc-box{box-sizing:border-box;position:relative;width:100%;min-width:0;margin:0;
  border:0;border-radius:var(--radius);color:var(--ink);font:inherit;text-align:left;appearance:none}
.fin-cards .fc-bud{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;
  gap:9px;min-height:58px;padding:7px 11px;margin-bottom:6px;background:var(--fc-budget-bg,#E9F2EB)}
.fc-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:50%}
.fc-icon svg{display:block;width:18px;height:18px}
.fin-cards .fc-bud .fc-icon{background:var(--fc-icon-bg,#D5E6DA);color:var(--fc-icon-ink,#365E46)}
.fc-bud-body{min-width:0}
.fc-card-title{display:block;margin:0;font-size:12px;font-weight:800;line-height:16px}
.fc-bud .fc-card-title{padding-right:14px}
.fc-budget-values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:2px}
/* 예산과 남은 예산은 **한 칸 안에서 좌우로** 갈라 세웁니다(가운데 세로 금) */
.fc-bud .fc-row{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;padding:0 6px 0 0}
.fc-bud .fc-row + .fc-row{border-left:1px solid var(--fc-divider,#BECFC2);padding:0 0 0 9px}
.fc-bud .fc-row .fc-lb{color:var(--ink-soft);font-size:10.5px;font-weight:700;line-height:13px}
.fc-bud .fc-row b,.fc-bud .fc-row b.dim{color:var(--ink);font-size:13.5px;font-weight:800;line-height:17px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow-wrap:anywhere}
.fc-bud .fc-row b.dim{color:var(--ink-soft)}
/* 회비와 통장 잔액은 **두 칸 나란히** */
.fc-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin-bottom:12px}
.fin-cards .fc-box{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;
  gap:7px;min-height:54px;padding:7px 9px}
.fc-box .fc-icon{width:26px;height:26px}
.fc-box .fc-icon svg{width:16px;height:16px}
.fc-box-body{min-width:0}
.fc-box .fc-card-title{padding-right:10px}
.fc-box-value{display:block;margin-top:2px;color:var(--ink);font-size:13.5px;font-weight:800;
  line-height:18px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fin-cards .fc-box.o{background:var(--fc-dues-bg,#FBEEE2)}
.fin-cards .fc-box.b{background:var(--fc-bank-bg,#EAF2FB)}
.fc-box.o .fc-icon{background:var(--fc-icon-o,#F3DCC7);color:var(--fc-icon-oi,#80502E)}
.fc-box.b .fc-icon{background:var(--fc-icon-b,#D4E3F5);color:var(--fc-icon-bi,#3B587B)}
.fc-go{position:absolute;top:6px;right:9px;font-size:17px;line-height:16px;color:var(--ink-mute)}
.fin-cards button.fc-bud,.fin-cards button.fc-box{cursor:pointer}
.fin-cards button.fc-bud:active,.fin-cards button.fc-box:active{filter:brightness(.97)}

/* ── 행사 ── */
.fc-evh{display:flex;align-items:center;font-size:15px;font-weight:800;color:var(--ink);margin:0 2px 8px}
.fc-evadd{margin-left:auto;font-size:12px;font-weight:700;color:var(--hdr);
  background:var(--hdr-tint);border:0;border-radius:99px;padding:6px 12px}
.fc-ev{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;max-height:300px}
/* 행사 한 칸 — 왼쪽 끝에 그라데이션 띠, 제목 줄 오른쪽에 기간, 그 아래 금액들 */
.fc-evc{box-sizing:border-box;position:relative;display:block;width:100%;min-width:0;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px 10px 17px;margin-bottom:8px;overflow:hidden}
.fc-evc:last-child{margin-bottom:0}
.fc-evc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px}
.fc-evc.plus::before{background:linear-gradient(180deg,#5FAE86,#2E7D5B)}
.fc-evc.minus::before{background:linear-gradient(180deg,#D98A85,#B9504C)}
.fc-evc:active{background:var(--surface-2)}
/* ★ 제목 · 기간 · 화살표를 **각각 제 열**에 둡니다. 서로 밀거나 겹치지 않습니다.
   제목 열에 88px 을 남겨 두어, 기간이 길어도 제목이 사라지지 않습니다. */
.fc-evt{display:grid;grid-template-columns:minmax(0,1fr);align-items:baseline;gap:7px;min-width:0;
  font-size:14.5px;font-weight:800;line-height:20px}
.fc-evt.has-period{grid-template-columns:minmax(88px,1fr) auto}
.fc-evt.is-tappable{grid-template-columns:minmax(0,1fr) 10px}
.fc-evt.has-period.is-tappable{grid-template-columns:minmax(88px,1fr) auto 10px}
.fc-evname{min-width:0;overflow-wrap:anywhere}
/* 누를 수 있는 줄은 **한 줄 요약**입니다 — 눌러 들어가면 전문이 보입니다 */
.fc-evt.is-tappable .fc-evname{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fc-evt .fc-evp{display:block;min-width:0;margin:0;text-align:right;overflow-wrap:anywhere;
  font-size:10.5px;font-weight:600;line-height:20px;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.fc-evt .fc-evgo{margin:0;text-align:right;font-size:17px;font-weight:400;line-height:20px;color:var(--ink-mute)}
.fc-evs{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px}
.fc-evs i{font-style:normal;font-size:11.5px;color:var(--ink-mute);font-weight:600}
.fc-evs b{font-variant-numeric:tabular-nums;font-weight:800}
.fc-evs b.tr{color:var(--fc-transfer,#4A6FA5)}
.fc-evs b.in{color:var(--fc-positive,#2E7D5B)}
.fc-evs b.out{color:var(--fc-negative,#B9504C)}
.fc-evn{display:block;text-align:right;margin-top:3px;font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:800}
.fc-evc.plus .fc-evn{color:var(--fc-positive,#2E7D5B)}
.fc-evc.minus .fc-evn{color:var(--fc-negative,#B9504C)}
.fc-none{padding:20px 0;text-align:center;font-size:13px;color:var(--ink-mute);
  background:var(--surface);border:1px solid var(--line);border-radius:12px}

/* ── 홈 맨 아래 「전체 수입·지출 내역」 — 아이콘이 있는 **칸 모양 단추** ──
   예전에는 한 줄짜리 흐린 띠라 눌러도 되는 자리인지 알기 어려웠습니다.
   아이콘 바탕은 #3b5169 한 색입니다(모양은 그대로 둡니다). */
.fc-ledger{box-sizing:border-box;display:flex;align-items:center;gap:11px;width:100%;
  min-height:48px;margin:0;padding:7px 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;
  font-size:13.5px;font-weight:800;text-align:left;cursor:pointer}
.fc-ledger .fc-icon{width:32px;height:32px;border-radius:10px;background:#3b5169;color:#fff}
.fc-ledger .fc-icon svg{width:19px;height:19px}
.fc-ledger-label{flex:1;min-width:0;overflow-wrap:anywhere}
.fc-ledger-go{flex:none;font-size:20px;color:var(--ink-mute);font-weight:400}
.fc-ledger:active{background:var(--surface-2)}

/* ── 메모 목록 — 날짜 · 제목 · 「수정」. 다섯 줄쯤 넘으면 **이 칸 안에서만** 밀립니다 ──
   theme.css 에 있던 것을 여기로 옮겼습니다(재정 앱도 같은 모양이라야 합니다). */
.memo-list{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;max-height:226px}
.memo-row{display:grid;grid-template-columns:74px minmax(0,1fr) 52px;align-items:center;gap:8px;
  width:100%;text-align:left;padding:0 0 0 12px;border-bottom:1px solid var(--line-soft);
  background:none;border-left:0;border-right:0;border-top:0}
.memo-row:last-child{border-bottom:0}
.memo-d{font-size:12px;color:var(--ink-mute);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.memo-t{min-width:0;font-size:14px;font-weight:700;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.memo-e{height:44px;border:0;background:none;color:var(--hdr);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.memo-e:active{opacity:.6}

/* ── 통장 잔액 화면 — 세 앱이 같은 차림입니다 ── */
.fc-bank,.fc-bank *{box-sizing:border-box}
.fc-bank-panel{min-width:0;margin:0 0 12px;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface)}
.fc-bank-panel h3{margin:0 0 8px;font-size:14px;font-weight:800;line-height:20px}
.fc-bank-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.fc-bank label{display:block;min-width:0}
.fc-bank label>span{display:block;margin-bottom:4px;color:var(--ink-soft);font-size:12px;font-weight:700}
.fc-bank input,.fc-bank textarea{display:block;width:100%;min-width:0;max-width:100%;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);
  font:inherit;font-size:15px;line-height:20px}
.fc-bank input{min-height:40px}
.fc-bank-note{margin-top:10px}
/* 비고는 **적은 만큼 늘어납니다**(그래서 스크롤막대를 두지 않습니다) */
.fc-bank textarea{min-height:58px;overflow:hidden;resize:none}
.fc-bank-actions,.fc-bank-memoh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fc-bank-actions{margin-top:10px}
.fc-bank-actions .fc-bank-msg{min-width:0;color:var(--ink-mute);font-size:12px;overflow-wrap:anywhere}
.fc-bank-save{flex:none;min-height:42px;padding:0 18px;border:0;border-radius:8px;
  background:var(--hdr);color:var(--hdr-ink);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.fc-bank-memoh{margin-bottom:8px}
.fc-bank-memoh h3{margin:0}

/* 가용 예산과 홈 바로가기 */
.fc-pair{margin-bottom:6px}
.fc-available{
  box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;
  gap:8px;min-width:0;min-height:50px;padding:8px 13px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--hdr-tint);color:var(--ink)
}
.fc-available span{flex:none;font-size:12px;font-weight:800}
.fc-available b{
  min-width:0;text-align:right;font-size:20px;font-weight:800;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere
}
.fc-available.missing b{font-size:12px;color:var(--ink-soft)}
.fc-actions{
  display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:6px;margin:10px 0 12px
}
.fc-actions button{box-sizing:border-box;min-width:0;min-height:48px;margin:0}
.fc-actions .fc-ledger{
  gap:7px;padding:7px 9px;background:var(--hdr);border-color:var(--hdr);
  color:var(--hdr-ink);font-size:12.5px
}
.fc-actions .fc-ledger .fc-icon{
  width:27px;height:27px;flex:none;background:rgba(255,255,255,.18)
}
.fc-actions .fc-ledger-go{display:none}
.fc-calc-link{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 5px;border:1px solid var(--hdr);border-radius:12px;
  background:var(--surface);color:var(--hdr);
  font:inherit;font-size:12.5px;font-weight:800
}
.fc-calc-link .fc-icon{width:20px;height:20px}
.fc-calc-link .fc-icon svg{width:18px;height:18px}
.fc-calc-link:active{background:var(--hdr-tint)}

/* 회계 앱의 행사 줄: 평소 44px, 긴 이름은 필요한 만큼 늘어남 */
.fin-cards button.fc-evc{display:flex;align-items:center;min-height:44px;padding:7px 10px 7px 16px}
.fin-cards button.fc-evc .fc-evt{width:100%}

/* 재정 계산기: 재정 앱은 theme.css를 읽지 않으므로 여기에 둡니다. */
.fc-calc-page{min-width:0;max-width:560px;margin:0 auto;color:var(--ink)}
.fc-calc-page [hidden]{display:none!important}
.fc-calc-tabs,.fc-calc-percent-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.fc-calc-page button{font:inherit;cursor:pointer}
.fc-calc-tabs button,.fc-calc-percent-modes button{
  min-width:0;min-height:44px;padding:6px 2px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink-soft);
  font-size:12px;font-weight:800;overflow-wrap:anywhere
}
.fc-calc-tabs [aria-selected="true"],.fc-calc-percent-modes [aria-pressed="true"]{
  background:var(--hdr);border-color:var(--hdr);color:var(--hdr-ink)
}
.fc-calc-panel{
  min-width:0;margin-top:9px;padding:13px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface)
}
.fc-calc-display,.fc-calc-result{
  display:block;min-width:0;text-align:right;overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;font-size:clamp(24px,7vw,36px);
  font-weight:800;line-height:1.25
}
.fc-calc-display{min-height:52px;padding:4px 2px 10px}
.fc-calc-result{padding:15px 0 3px;color:var(--hdr)}
.fc-calc-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.fc-calc-keys button{
  min-width:0;min-height:48px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);color:var(--ink);font-size:19px;font-weight:700
}
.fc-calc-keys button:last-child{background:var(--hdr);color:var(--hdr-ink)}
.fc-calc-hint,.fc-calc-msg,.fc-calc-rate{
  margin:6px 0;font-size:12px;line-height:1.5;color:var(--ink-soft)
}
.fc-calc-rate{font-size:15px;font-weight:800;color:var(--ink)}
.fc-calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.fc-calc-fields label{min-width:0;font-size:12px;font-weight:800}
.fc-calc-fields label span{
  display:flex;align-items:center;min-width:0;margin-top:4px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2)
}
.fc-calc-fields input{
  box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px;
  border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px
}
.fc-calc-fields i{flex:none;padding-right:8px;font-style:normal;color:var(--ink-mute)}
.fc-calc-refresh,.fc-calc-copy{
  min-height:44px;margin-top:12px;padding:7px 12px;border:1px solid var(--hdr);
  border-radius:9px;background:var(--surface);color:var(--hdr);font-weight:800
}
.fc-calc-copy{width:100%}
.fc-calc-percent-modes button{font-size:11px}
@media (max-width:370px){
  .fc-calc-panel{padding:10px}
  .fc-calc-percent-modes button{font-size:10px}
}

/* ── 어두운 화면 ──
   ★ 반드시 @media 로 감쌉니다. `:root:not([data-theme="light"])` 는 data-theme 이
     아예 없을 때도 맞으므로, 감싸지 않으면 밝은 화면에도 그대로 걸립니다.
   ★ 재정 앱은 <html data-theme="light"> 라서 여기에 걸리지 않습니다 —
     그 앱에는 어두운 화면 색이 아예 없어, 카드만 어두워지면 뒤죽박죽이 됩니다. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fin-cards,
  :root:not([data-theme="light"]) .fc-bank{
    --fc-budget-bg:#23332A; --fc-dues-bg:#352B22; --fc-bank-bg:#222E3D;
    --fc-icon-bg:#39483F; --fc-icon-ink:#E0EBE4;
    --fc-icon-o:#4A3A2C; --fc-icon-oi:#EFD6BE; --fc-icon-b:#2C3D52; --fc-icon-bi:#CBDDF3;
    --fc-divider:#56675B;
    --fc-positive:#8DD1AD; --fc-negative:#EEAAA5; --fc-transfer:#ACC7EF;
  }
}
:root[data-theme="dark"] .fin-cards,
:root[data-theme="dark"] .fc-bank{
  --fc-budget-bg:#23332A; --fc-dues-bg:#352B22; --fc-bank-bg:#222E3D;
  --fc-icon-bg:#39483F; --fc-icon-ink:#E0EBE4;
  --fc-icon-o:#4A3A2C; --fc-icon-oi:#EFD6BE; --fc-icon-b:#2C3D52; --fc-icon-bi:#CBDDF3;
  --fc-divider:#56675B;
  --fc-positive:#8DD1AD; --fc-negative:#EEAAA5; --fc-transfer:#ACC7EF;
}