/* ── 재정서류작성기 (사귐의교회 양식 포팅) ── */
:root{
  --line:#a8a29e;        /* stone-400 */
  --hbg:#e7e5e4;         /* stone-200 */
  --green:#6a8f60;
  --primary:#0f766e;     /* teal-700 */
  --ink:#1c1917;         /* stone-900 */
  --muted:#78716c;       /* stone-500 */
  --soft:#f5f5f4;        /* stone-100 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,system-ui,sans-serif;
  color:var(--ink);background:#faf9f7;
  -webkit-text-size-adjust:100%;
}

/* 상단바 */
.fin-top{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  padding:10px 16px;background:#fff;border-bottom:1px solid #e7e5e4;
}
.fin-top .left{display:flex;align-items:center;gap:10px;min-width:0}
.fin-top h1{font-size:16px;font-weight:800;margin:0;white-space:nowrap}
.fin-top .home{font-size:12px;color:var(--primary);text-decoration:none;font-weight:700}
.fin-top .save-status{font-size:11px;color:#10b981}
.fin-top .right{display:flex;gap:6px;flex-wrap:wrap}
.btn{border:1px solid #d6d3d1;background:#fff;color:#44403c;border-radius:9px;padding:6px 11px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:#f5f5f4}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:#0d655e}
.btn-green{background:#059669;border-color:#059669;color:#fff}
.btn-green:hover{background:#047857}
.btn-red{background:#ef4444;border-color:#ef4444;color:#fff}
.btn-red:hover{background:#dc2626}
.fin-sel{border:1px solid #d6d3d1;border-radius:8px;padding:5px;font-size:12px;color:#44403c;background:#fff}

/* 도구 줄 */
.fin-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px}
.fin-tabs{display:flex;gap:3px;border:1px solid #e7e5e4;border-radius:10px;padding:3px;background:#fff}
.fin-tab{border:none;background:transparent;border-radius:7px;padding:6px 12px;font-size:12px;font-weight:600;color:#57534e;cursor:pointer}
.fin-tab.active{background:var(--primary);color:#fff}

/* 보관함 */
.archives{margin:0 16px 10px;border:1px solid #e7e5e4;border-radius:12px;background:#fff;overflow:hidden}
.arc-row{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;border-bottom:1px solid #f0efed}
.arc-row:last-child{border-bottom:none}
.arc-row.cur{background:#0f766e0d}
.arc-main{flex:1;text-align:left;background:none;border:none;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-main b{font-weight:700}
.arc-main .date{color:#a8a29e;margin-left:8px}
.arc-main .cur-tag{color:var(--primary);margin-left:4px}
.arc-act{background:none;border:none;cursor:pointer;font-size:11px;color:#78716c;flex-shrink:0}
.arc-act.del{color:#fb7185}
.arc-edit{flex:1;border:1px solid #d6d3d1;border-radius:6px;padding:4px 8px;font-size:12px;outline:none}
.arc-empty{padding:16px;text-align:center;color:#a8a29e;font-size:12px}

/* 양식 영역 */
.fin-wrap{max-width:760px;margin:0 auto;padding:0 16px 60px}
.fin-paper{background:#fff;border:1px solid #e7e5e4;border-radius:12px;padding:18px;overflow-x:auto}

/* 표 공통 */
.ft{border-collapse:collapse;width:100%;font-size:11px}
.ft.mt{margin-top:12px}
.hc{border:1px solid var(--line);background:var(--hbg);padding:4px 6px;font-weight:700;text-align:center;font-size:11px}
.vc{border:1px solid var(--line);padding:2px 4px;vertical-align:middle}
.bd{border:1px solid var(--line)}
.nb{border:none}
.inp{width:100%;background:transparent;border:none;padding:2px 4px;font-size:11px;outline:none;text-align:center;font-family:inherit;color:var(--ink)}
.inp.r{text-align:right}
.inp:focus{background:#eff6ff80}
.tar{text-align:right}.tac{text-align:center}
.fb{font-weight:700}
.title-doc{font-size:19px;font-weight:900;letter-spacing:2px}
.muted{color:var(--muted)}
.sign-note{font-size:11px;color:#a8a29e;flex-shrink:0;padding-right:4px}
.row-flex{display:flex;align-items:center;gap:4px}
.foot-date{margin-top:14px;text-align:right;font-size:11px;letter-spacing:2px}
.logo-foot{margin-top:12px;text-align:right}
.logo-foot img{height:40px;display:inline-block}

/* 一金 + DigitGrid */
.amt-cell{padding:8px 0}
.amt-inner{width:90%;margin:0 auto}
.ilgeum{font-size:11px;margin-bottom:2px}
.dc{border-collapse:collapse;width:90%;margin:0 auto;table-layout:fixed}
.dc td{border:1px solid var(--line);height:22px;text-align:center;font-size:11px;padding:1px}
.dc .lbl{font-weight:700}
.amt-num{margin-top:4px}

/* 리치 에디터 */
.rich{border:none}
.rich-tb{display:flex;flex-wrap:wrap;align-items:center;gap:3px;border-bottom:1px solid #d6d3d1;background:#fafaf9;padding:4px 6px}
.rich-tb select{border:1px solid #d6d3d1;border-radius:4px;font-size:11px;padding:1px 2px}
.rbtn{border:none;background:transparent;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:600;color:#57534e;cursor:pointer}
.rbtn:hover{background:#e7e5e4}
.rich-area{min-height:120px;padding:8px;font-size:11px;outline:none;line-height:1.5}
.rich-area:focus{background:#eff6ff14}
.rich-area table{border-collapse:collapse;width:100%;margin:4px 0}
.rich-area th,.rich-area td{border:1px solid var(--line);padding:4px 6px;font-size:11px;min-width:40px}
.rich-area th{background:#f5f5f4;font-weight:700}
.rich-area ul,.rich-area ol{padding-left:18px;margin:2px 0}
.rich-area p{margin:2px 0}

/* 모달 */
.modal-bg{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:#00000066;padding:16px}
.modal-bg.show{display:flex}
.modal{width:100%;max-width:380px;background:#fff;border-radius:16px;padding:22px;box-shadow:0 20px 50px #0003;max-height:90vh;overflow:auto}
.modal h3{font-size:14px;font-weight:800;margin:0 0 4px}
.modal .desc{font-size:11px;color:#a8a29e;margin:0 0 14px}
.modal .field{margin-bottom:10px}
.modal label{display:block;font-size:11px;color:#78716c;margin-bottom:3px}
.modal input{width:100%;border:1px solid #e7e5e4;border-radius:9px;padding:8px 10px;font-size:12px;outline:none}
.modal input:focus{border-color:var(--primary)}
.modal .acts{display:flex;gap:8px;margin-top:16px}
.modal .acts .btn{flex:1;justify-content:center;text-align:center}

.hint{font-size:11px;color:#a8a29e}

@media(max-width:640px){
  .fin-top h1{font-size:14px}
  .fin-wrap{padding:0 8px 60px}
  .fin-paper{padding:10px}
}


/* ── 새 서류 종류 메뉴 · 보관함 배지 (2026-07-28) ── */
.newwrap { position: relative; display: inline-block; }
.newmenu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  background: #fff; border: 1px solid #d6d3d1; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 4px; min-width: 180px;
}
.newmenu[hidden] { display: none; }
.nm-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 12px; font-size: 13px; cursor: pointer; border-radius: 6px; color: #1c1917;
}
.nm-item:hover { background: #f5f5f4; }
.nm-all { border-top: 1px solid #e7e5e4; margin-top: 4px; color: #78716c; font-size: 12px; }
.arc-badge {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: #f5f5f4; border: 1px solid #e7e5e4; color: #57534e;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}


/* ── 정산명세서 여러 장 (2026-07-28) ── */
.pgwrap { display: inline-flex; align-items: center; gap: 4px; }
.pgwrap[hidden] { display: none; }
.btn-sm { padding: 4px 9px; font-size: 13px; line-height: 1; }
.btn-sm:disabled { opacity: .35; cursor: default; }
.pg-info { font-size: 12px; color: #57534e; min-width: 30px; text-align: center; font-weight: 600; }
#formRoot .pg + .pg {
  margin-top: 28px; padding-top: 28px; border-top: 2px dashed #d6d3d1;
}
.pg-mark { font-size: 13px; font-weight: 700; letter-spacing: 0; color: #78716c; }