/* ════════════════════════════════════════════════════════════════
   app.css — 회비관리시스템 전용 (vc.css 위에 겹친다)
   ★vc.css 를 갈아치우지 않는다. 배치·치수 규격은 vc.css 가 정본이다.★
   ════════════════════════════════════════════════════════════════ */

/* 화면 골격 — 제목 / 검색패널 / 그리드 (그리드는 하단까지 채운다) */
.page { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.page-head { display: flex; align-items: center; gap: 10px; flex: none; }
.page-head h2 { font-size: 16px; font-weight: 800; }
.page-head .hint { font-size: 12px; color: var(--txm); }
.page-head .sp { flex: 1; }
.vcs-search { padding: 12px 14px; flex: none; }
.grid-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 세로는 VCGrid 내부가 스크롤한다. 가로는 컬럼이 많아 표시폭을 넘칠 때 ★스크롤로 접근★하게 둔다.
   overflow:hidden 이면 좁은 화면(1280)에서 맨 오른쪽 작업열이 잘려 못 누른다(MAKE_UI 1차 A-1). */
.grid-wrap > .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-x: auto; overflow-y: hidden; }

/* 카드 (대시보드) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.card { background: var(--sf); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.card .lbl { font-size: 12px; color: var(--txm); }
.card .val { font-size: 22px; font-weight: 800; margin-top: 6px; letter-spacing: -.4px; }
.card .val.sm { font-size: 18px; }
.card .sub { font-size: 11.5px; color: var(--txd); margin-top: 4px; }
.card.accent { border-color: var(--ac); }
.card.accent .val { color: var(--ac2); }
.card.warn .val { color: var(--danger); }

/* 섹션 */
.sec { background: var(--sf); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sec-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.sec-head .sp { flex: 1; }
.sec-body { padding: 12px 14px; }
.sec-body.nopad { padding: 0; }

/* 상태 뱃지 */
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; border: 1px solid var(--line); background: var(--sf2); color: var(--txm); }
.badge.open { border-color: #2d73f5; color: #1d5fd6; background: #eaf1ff; }
.badge.closed { border-color: #16a34a; color: #15803d; background: #eafbf0; }
.badge.warn { border-color: #dc2626; color: #b91c1c; background: #fdecec; }
.badge.dormant { border-color: #c2410c; color: #c2410c; background: #fff4ec; }

/* 손댄 값 표시 — 자동계산을 사람이 고친 칸 */
.manual { position: relative; color: #b45309; font-weight: 700; }
.manual::after { content: '수정'; position: absolute; top: -1px; right: 2px; font-size: 9px; color: #b45309; opacity: .8; }

/* 토스트 */
#app-toast { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: flex; flex-direction: column; gap: 8px; }
.app-toast-item { padding: 10px 16px; border-radius: 8px; font-size: 13px; color: #fff; background: #334155;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); animation: toastin .22s ease; max-width: 420px; }
.app-toast-item.err { background: #b91c1c; }
.app-toast-item.out { opacity: 0; transform: translateY(6px); transition: .3s; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* 모달 */
.app-modal { position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center; }
.app-modal-mask { position: absolute; inset: 0; background: rgba(15,23,42,.42); }
.app-modal-box { position: relative; background: var(--sf); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; }
.app-modal-head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; display: flex; align-items: center; }
.app-modal-x { margin-left: auto; border: none; background: none; font-size: 15px; color: var(--txm); cursor: pointer; }
.app-modal-body { padding: 14px 16px; overflow: auto; flex: 1; min-height: 0; }
.app-modal-foot { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* 편집 폼 (모달 안) — 검색칸과 같은 치수 규격을 쓴다 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, var(--fld-cell)); gap: 8px 12px; align-items: center; justify-content: start; }
.form-grid .vcs-fld { display: flex; align-items: center; gap: 6px; min-width: 0; }
.form-grid .vcs-fld > label { flex: none; width: var(--fld-label); min-width: var(--fld-label); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; color: var(--tx); }
.form-grid .vcs-fld > input:not([type=checkbox]), .form-grid .vcs-fld > select, .form-grid .vcs-fld > textarea {
  width: var(--fld-w); min-width: 0; flex: none; height: 30px; font-size: 12.5px;
  border: 1px solid var(--bd); border-radius: 6px; background-color: #fff; padding: 0 8px; box-sizing: border-box; }
.form-grid .vcs-fld > textarea { height: 60px; padding: 6px 8px; }
.form-grid .wide { grid-column: span 2; }
/* ★명시도 주의★ 위 .vcs-fld>input:not(...) 이 (0,3,1) 이라 .wide>input(0,2,1) 을 이겨
   wide 칸 input 이 216 으로 눌렸다(주소·상세주소가 안 넓어짐). vcs-fld.wide + :not 로 (0,4,1) 로 올려 이긴다. */
.form-grid .vcs-fld.wide > input:not([type=checkbox]), .form-grid .vcs-fld.wide > textarea { width: calc(var(--fld-w) * 2 + var(--fld-label) + 18px); }

/* 표 (간단 표시용 — 조회 그리드는 VCGrid 를 쓴다) */
table.mini { width: 100%; border-collapse: collapse; }
table.mini th { background: var(--sf2); font-size: 11.5px; font-weight: 700; height: 28px; padding: 3px 8px; border: 1px solid var(--line); white-space: nowrap; }
table.mini td { height: 28px; padding: 3px 8px; border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; }
table.mini td.num, table.mini th.num { text-align: right; }
table.mini td.ctr, table.mini th.ctr { text-align: center; }
table.mini tfoot td { background: var(--sf2); font-weight: 700; }
table.mini tbody tr:hover { background: var(--row-hover); }

/* 막대 (추이) */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 6px 2px 0; }
.bars .b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.bars .b .bar { width: 70%; background: linear-gradient(180deg, #6b9bff, #2d73f5); border-radius: 4px 4px 0 0; min-height: 2px; }
.bars .b .bar.paid { background: linear-gradient(180deg, #6ee7b7, #16a34a); }
.bars .b .cap { font-size: 10.5px; color: var(--txm); white-space: nowrap; }
.bars .b .amt { font-size: 10px; color: var(--txd); }

/* 명세서 인쇄 — 협회 종이 양식과 같은 모양 */
@media print {
  .gnb, .topbar, .vcs-search, .page-head .btn, #app-toast, .app-modal, .no-print { display: none !important; }
  .shell, .main, .content { display: block !important; overflow: visible !important; height: auto !important; }
  .content { padding: 0 !important; }
  body { background: #fff; }
  .print-area { display: block !important; }
  /* ★종이에는 인쇄용 DOM 만 나간다★ — 화면용 카드·그리드가 따라 나가면 A4 폭을 넘겨 잘린다.
     :has() 로 인쇄 DOM 이 실제로 그려진 화면에서만 숨긴다 (다른 화면 Ctrl+P 는 그대로 나온다). */
  .page:has(.print-area:not(:empty)) > *:not(.print-area) { display: none !important; }
  table.stmt { font-size: 9pt; }
  @page { size: A4 landscape; margin: 10mm; }
}
.print-area { display: none; }
table.stmt { width: 100%; border-collapse: collapse; }
table.stmt th, table.stmt td { border: 1px solid #333; padding: 2px 4px; font-size: 11px; height: 22px; }
table.stmt th { background: #eee; text-align: center; font-weight: 700; }
table.stmt td.num { text-align: right; }
table.stmt td.ctr { text-align: center; }
table.stmt tfoot td { font-weight: 700; background: #f4f4f4; }
.stmt-title { text-align: center; font-size: 18px; font-weight: 800; margin: 6px 0 12px; letter-spacing: 2px; }

/* 업로드 영역 */
.drop { border: 2px dashed var(--bd); border-radius: 10px; padding: 26px; text-align: center; color: var(--txm); background: var(--sf); cursor: pointer; }
.drop.over { border-color: var(--ac); background: #f2f7ff; color: var(--ac2); }
.drop b { color: var(--tx); }

/* 매핑 표 */
.map-tbl { width: 100%; border-collapse: collapse; }
.map-tbl th, .map-tbl td { border: 1px solid var(--line); padding: 4px 8px; font-size: 12.5px; height: 32px; }
.map-tbl th { background: var(--sf2); font-size: 11.5px; white-space: nowrap; }
.map-tbl select { height: 26px; width: 100%; border: 1px solid var(--bd); border-radius: 5px; font-size: 12px; }
.map-tbl .req { color: var(--danger); font-weight: 700; }

/* 좁은 화면 보정 — 위 wide 규칙과 같은 명시도(0,4,1)로 맞춰야 이긴다 */
@media (max-width: 900px) {
  .form-grid .vcs-fld.wide > input:not([type=checkbox]), .form-grid .vcs-fld.wide > textarea { width: var(--fld-w); }
}