/* ============================================================
   4열 캔버스 — 단계별 화면
   접수 · 산출 · 점검 · 집행 · 정산 · 원장

   금액을 그리는 규약은 chrome.css 의 `.n` · `.unset` 이다. 여기서는 그것을
   **표 · 흐름 · 막대**로 배치한다. 값이 없으면 막대를 그리지 않는다
   (설계문서.md §4-3) — 0 으로 그으면 「줄었다」로 읽힌다.
   ============================================================ */

.page { max-width: 1040px; margin: 0 auto; padding: 22px 24px 56px; }
.page.wide { max-width: 1240px; }

.sec { margin-bottom: 30px; }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sec-h h3 { font-size: var(--fs-15); font-weight: 650; letter-spacing: -.01em; }
.sec-h .sh-d { font-size: var(--fs-11); color: var(--text-3); }
.sec-h .sh-rt { margin-left: auto; display: flex; gap: 6px; align-items: center; }

.card {
  border: 1px solid var(--border-1); border-radius: var(--r-10);
  background: var(--bg-panel); padding: 16px 18px; margin-bottom: 12px;
}
.card.flat { padding: 0; overflow: hidden; }
.card.warnish { border-color: var(--warning-border); background: var(--warning-subtle); }
.card.badish { border-color: var(--danger-border); background: var(--danger-subtle); }

.note { font-size: var(--fs-11); color: var(--text-2); line-height: 1.7; }
.note b { font-weight: 650; color: var(--text-1); }
.note code { background: var(--bg-subtle); padding: 0 4px; border-radius: 3px; font-size: .95em; }
.note + .note { margin-top: 5px; }

/* 시연용 가상값 고지 — 숨기지 않는다 */
.demo-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 18px;
  border: 1px solid var(--warning-border); background: var(--warning-subtle);
  border-radius: var(--r-8); font-size: var(--fs-11); color: var(--warning);
}
.demo-bar b { font-weight: 700; }

/* ============================================================
   표
   ============================================================ */

.tb { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.tb th, .tb td { border-bottom: 1px solid var(--border-1); padding: 8px 10px; text-align: left; }
.tb thead th {
  background: var(--bg-sidebar); font-weight: 650; color: var(--text-2);
  font-size: var(--fs-11); white-space: nowrap; border-bottom: 1px solid var(--border-2);
  position: sticky; top: 0; z-index: 1;
}
.tb tbody tr:hover { background: var(--bg-sidebar); }
.tb td.n, .tb th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tb tr.sum td { background: var(--accent-subtle); font-weight: 700; border-bottom-color: var(--accent-border); }
.tb tr.sub td { background: var(--bg-subtle); font-weight: 650; }
.tb tr.muted td { color: var(--text-3); }
.tb .lbl2 { color: var(--text-3); font-size: var(--fs-10); display: block; margin-top: 2px; }
.tb code { font-size: var(--fs-10); background: var(--bg-subtle); padding: 1px 4px; border-radius: 3px; }

/* ============================================================
   원장 — 요구 → 확정 → 계약(차수) → 집행 → 정산
   ============================================================ */

/* 위쪽 여백은 증감 라벨(`.dl`)의 자리다. **`overflow-x: auto` 는 세로도 함께
   자른다** — 한 축이 `visible` 이 아니면 다른 축의 `visible` 이 `auto` 로 계산되기
   때문이다. 여백 없이 라벨을 칸 위에 얹으면 글자 아랫부분만 남고, 그것은 깨진
   화면이 아니라 **읽히는 다른 숫자**로 보인다. */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 15px 0 6px; }
/* **금액이 들어갈 만큼 넓게 둔다.** 132px 이던 동안 `742,000,000원` 이
   `742,000,00…` 으로 잘렸다. 좁아지면 칸을 줄이는 대신 `.flow` 가 가로로
   스크롤한다 — 금액은 줄이지 않는다(`.amt` 주석). */
.flow-n {
  flex: 1 1 0; min-width: 158px;
  border: 1px solid var(--border-2); border-radius: var(--r-8);
  background: var(--bg-panel); padding: 11px 12px;
  position: relative;
}
.flow-n + .flow-n { margin-left: 18px; }
/* 칸 사이 화살표. 증감이 미확정이면 회색이다. */
.flow-n + .flow-n::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  width: 10px; height: 1px; background: var(--border-3);
}
.flow-n + .flow-n::after {
  content: ""; position: absolute; left: -7px; top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent; border-left-color: var(--border-3);
}
.flow-n .k {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-10); font-weight: 700; color: var(--text-3);
}
.flow-n .k i { width: 6px; height: 6px; border-radius: 50%; background: var(--st-request); }
/* **금액에 말줄임을 걸지 않는다.** 잘린 금액은 깨진 화면으로 보이지 않고
   **다른 숫자로 읽힌다** — `742,000,00…` 은 7억 4천 2백만인지 7천 4백만인지
   구별되지 않는다. 이 앱이 막으려는 사고와 같은 종류다(`설계문서.md` §4-3).
   자리가 모자라면 칸이 아니라 `.flow` 가 스크롤한다. */
.flow-n .amt {
  display: block; margin-top: 5px;
  font-size: var(--fs-14); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.flow-n .at { display: block; margin-top: 3px; font-size: 9.5px; color: var(--text-3); }
.flow-n[data-s="unconfirmed"] { border-style: dashed; background: var(--bg-sidebar); }
.flow-n[data-s="unconfirmed"] .amt { font-size: var(--fs-12); }
/* 칸과 칸 사이 화살표 위에 앉는다. **폭을 금액에 맞춘다** — 60px 이던 동안
   `△57,000,000원` 이 상자 밖으로 흘러 양옆 칸을 덮었다. */
.flow-n .dl {
  position: absolute; left: -52px; top: -13px; width: 104px;
  padding: 1px 0; border-radius: 4px;
  background: var(--bg-app);
  text-align: center; font-size: var(--fs-10); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 막대 — 값이 없으면 그리지 않는다 */
.bars { display: grid; gap: 7px; }
.bar-r { display: grid; grid-template-columns: 92px 1fr 128px; gap: 10px; align-items: center; }
.bar-r .bl { font-size: var(--fs-11); font-weight: 600; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-r .bt { height: 15px; border-radius: 4px; background: var(--bg-subtle); overflow: hidden; position: relative; }
.bar-r .bt i { display: block; height: 100%; border-radius: 4px; transition: width .5s ease; }
/* 미확정 칸은 빈 트랙에 빗금을 둔다. 0 길이 막대로 그리면 「0원」으로 읽힌다. */
.bar-r .bt.none {
  background: repeating-linear-gradient(135deg,
    var(--bg-subtle) 0 5px, var(--bg-hover) 5px 10px);
}
.bar-r .bv { font-size: var(--fs-11); font-weight: 650; text-align: right;
  font-variant-numeric: tabular-nums; }

/* 집행률 게이지 */
.gauge { margin-top: 4px; }
.gauge .gt { height: 22px; border-radius: 5px; background: var(--bg-subtle); position: relative; overflow: hidden; }
.gauge .gt i { display: block; height: 100%; background: var(--success); transition: width .6s ease; }
.gauge .gt.none { background: repeating-linear-gradient(135deg,
  var(--bg-subtle) 0 6px, var(--bg-hover) 6px 12px); }
.gauge .gl {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-11); font-weight: 700; color: var(--text-1);
  text-shadow: 0 0 4px rgba(255, 255, 255, .8);
}

/* 요약 타일 */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.tile {
  border: 1px solid var(--border-1); border-radius: var(--r-8);
  background: var(--bg-panel); padding: 12px 13px;
}
.tile .tk { font-size: var(--fs-10); font-weight: 650; color: var(--text-3); }
.tile .tv {
  display: block; margin-top: 4px; font-size: var(--fs-15); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.tile .td { display: block; margin-top: 3px; font-size: 9.5px; color: var(--text-3); line-height: 1.45; }
.tile[data-s="good"] { border-color: #bfe3cc; background: var(--success-subtle); }
.tile[data-s="warn"] { border-color: var(--warning-border); background: var(--warning-subtle); }
.tile[data-s="bad"] { border-color: var(--danger-border); background: var(--danger-subtle); }

/* ============================================================
   접수 — 서류 판독
   ============================================================ */

.drop {
  border: 2px dashed var(--border-3); border-radius: var(--r-10);
  background: var(--bg-panel); padding: 30px 24px; text-align: center;
  transition: border-color .15s, background .15s;
}
.drop.hot { border-color: var(--accent); background: var(--accent-subtle); }
.drop .di { font-size: 26px; opacity: .5; }
.drop b { display: block; margin-top: 8px; font-size: var(--fs-13); font-weight: 650; }
.drop span { display: block; margin-top: 4px; font-size: var(--fs-11); color: var(--text-3); line-height: 1.6; }
.drop .btn { margin-top: 12px; }

.doc-r {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; border-bottom: 1px solid var(--border-1);
}
.doc-r:last-child { border-bottom: 0; }
.doc-r .dk {
  flex: 0 0 auto; padding: 2px 7px; border-radius: var(--r-4);
  background: var(--accent-subtle); border: 1px solid var(--accent-border);
  font-size: var(--fs-10); font-weight: 700; color: var(--accent-text); white-space: nowrap;
}
.doc-r .dk[data-s="none"] { background: var(--warning-subtle); border-color: var(--warning-border); color: var(--warning); }
.doc-r .dm { flex: 1; min-width: 0; }
.doc-r .dm b { display: block; font-size: var(--fs-12); font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-r .dm .dv { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; font-size: var(--fs-11); }
.doc-r .dm .dv em { font-style: normal; color: var(--text-3); }
.doc-r .dm .dv strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   산출 — 조건 입력
   ============================================================ */

.cond { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.cond .cf { display: flex; flex-direction: column; gap: 4px; }
.cond .cf label { font-size: var(--fs-10); font-weight: 650; color: var(--text-3); }
.cond .cf .hint { font-size: 9.5px; color: var(--text-3); line-height: 1.45; }

.mini-tb { width: 100%; border-collapse: collapse; font-size: var(--fs-11); }
.mini-tb th, .mini-tb td { padding: 5px 7px; border-bottom: 1px solid var(--border-1); }
.mini-tb th { font-size: var(--fs-10); color: var(--text-3); font-weight: 650; text-align: left; }
.mini-tb td.n, .mini-tb th.n { text-align: right; font-variant-numeric: tabular-nums; }
.mini-tb .inp { height: 24px; font-size: var(--fs-11); width: 100%; }
.mini-tb .rm { border: 0; background: transparent; color: var(--text-3); cursor: pointer; font: inherit; padding: 2px 5px; border-radius: 4px; }
.mini-tb .rm:hover { background: var(--danger-subtle); color: var(--danger); }

/* 기준표에서 못 찾은 것 — 숨기지 않는다 */
.unres { border-left: 3px solid var(--warning); padding: 9px 12px; background: var(--warning-subtle); border-radius: 0 var(--r-6) var(--r-6) 0; }
.unres b { display: block; font-size: var(--fs-11); font-weight: 700; color: var(--warning); margin-bottom: 4px; }
.unres ul { margin: 0; padding-left: 16px; }
.unres li { font-size: var(--fs-11); color: var(--text-2); line-height: 1.6; }

/* ============================================================
   점검 — findings
   ============================================================ */

.find {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 11px;
  align-items: start; padding: 11px 13px;
  border-bottom: 1px solid var(--border-1);
}
.find:last-child { border-bottom: 0; }
.find[data-s="block"] { background: #fef8f8; }
.find.waived { opacity: .68; background: var(--success-subtle); }
.find .fb {
  padding: 2px 0; border-radius: var(--r-4); text-align: center;
  font-size: var(--fs-10); font-weight: 700;
}
.find[data-s="block"] .fb { background: var(--danger-subtle); color: var(--danger); }
.find[data-s="warn"] .fb { background: var(--warning-subtle); color: var(--warning); }
.find[data-s="info"] .fb { background: var(--bg-subtle); color: var(--text-2); }
.find.waived .fb { background: #d7efdf; color: var(--success); }
.find .fm { min-width: 0; }
.find .fm b { font-size: var(--fs-12); font-weight: 650; }
.find .fm .fr { display: block; font-size: var(--fs-10); color: var(--text-3); margin-top: 2px; }
.find .fm .fw {
  display: block; margin-top: 6px; padding: 6px 9px;
  background: var(--bg-panel); border: 1px solid #bfe3cc; border-radius: var(--r-6);
  font-size: var(--fs-10); color: var(--text-2); line-height: 1.6;
}
.find .fm .fw b { color: var(--success); font-size: var(--fs-10); }
.find .fn { text-align: right; white-space: nowrap; }
.find .fn .fv { font-size: var(--fs-12); font-weight: 700; font-variant-numeric: tabular-nums; }
.find .fn .fl { display: block; font-size: var(--fs-10); color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.find .fn .btn { margin-top: 6px; }

/* ============================================================
   집행 — 월별 막대
   ============================================================ */

.months { display: flex; align-items: flex-end; gap: 6px; height: 128px; padding: 6px 0 0; }
.months .mo { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; }
.months .mo i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; transition: height .5s ease; }
.months .mo em { font-style: normal; font-size: 9px; color: var(--text-3); white-space: nowrap; }
.months .mo b { font-size: 9px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* 안 붙은 행 — 버리지 않고 보여 준다 */
.unmatched { border: 1px solid var(--warning-border); border-radius: var(--r-8); background: var(--warning-subtle); overflow: hidden; }
.unmatched .uh { padding: 9px 13px; font-size: var(--fs-11); font-weight: 650; color: var(--warning); border-bottom: 1px solid var(--warning-border); }
.unmatched .ur { display: flex; gap: 10px; padding: 7px 13px; font-size: var(--fs-11); border-bottom: 1px solid rgba(240, 216, 176, .55); }
.unmatched .ur:last-child { border-bottom: 0; }
.unmatched .ur .uc { flex: 1; min-width: 0; color: var(--text-2); }
.unmatched .ur .un { font-variant-numeric: tabular-nums; font-weight: 650; }

/* ============================================================
   정산 — 폴더 분류안
   ============================================================ */

.fold {
  border: 1px solid var(--border-1); border-radius: var(--r-8);
  background: var(--bg-panel); margin-bottom: 8px; overflow: hidden;
}
.fold .fh {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; background: var(--bg-sidebar); border-bottom: 1px solid var(--border-1);
}
.fold .fh code { font-size: var(--fs-12); font-weight: 700; color: var(--accent-text); }
.fold .fh .fc { font-size: var(--fs-10); color: var(--text-3); }
.fold .fh .fa { margin-left: auto; font-size: var(--fs-12); font-weight: 700; font-variant-numeric: tabular-nums; }
.fold .ff { display: flex; align-items: center; gap: 9px; padding: 7px 13px; border-bottom: 1px solid var(--border-1); font-size: var(--fs-11); }
.fold .ff:last-child { border-bottom: 0; }
.fold .ff .fp { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold .ff .fs { font-size: var(--fs-10); color: var(--text-3); }
.fold .ff .fn { font-variant-numeric: tabular-nums; font-weight: 650; }

.unread { border: 1px solid var(--warning-border); border-radius: var(--r-8); background: var(--warning-subtle); overflow: hidden; }
.unread .uh { padding: 10px 13px; border-bottom: 1px solid var(--warning-border); }
.unread .uh b { font-size: var(--fs-12); font-weight: 700; color: var(--warning); }
.unread .uh span { display: block; font-size: var(--fs-10); color: var(--text-2); margin-top: 3px; line-height: 1.6; }
.unread .uf { display: flex; gap: 10px; padding: 8px 13px; font-size: var(--fs-11); border-bottom: 1px solid rgba(240, 216, 176, .55); }
.unread .uf:last-child { border-bottom: 0; }
.unread .uf code { flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unread .uf span { color: var(--text-2); }

/* ============================================================
   설정 — 기준표 · 서식
   ============================================================ */

.std-r {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 11px 13px; margin-bottom: 7px;
  border: 1px solid var(--border-1); border-radius: var(--r-8);
  background: var(--bg-panel); font: inherit; text-align: left; cursor: pointer;
}
.std-r:hover { border-color: var(--accent-border); }
.std-r.on { border-color: var(--accent); background: var(--accent-subtle); }
.std-r .sm { flex: 1; min-width: 0; }
.std-r .sm b { font-size: var(--fs-12); font-weight: 650; }
.std-r .sm .sd { display: block; font-size: var(--fs-10); color: var(--text-3); margin-top: 3px; }
.std-r .sr { flex: 0 0 auto; display: flex; gap: 5px; align-items: center; }

.sheet-tabs { display: flex; gap: 2px; padding: 3px; background: var(--bg-subtle); border-radius: var(--r-6); margin-bottom: 11px; flex-wrap: wrap; }
.sheet-tabs button {
  border: 0; border-radius: var(--r-4); background: transparent;
  padding: 4px 10px; font: inherit; font-size: var(--fs-11); font-weight: 600;
  color: var(--text-2); cursor: pointer;
}
.sheet-tabs button.on { background: var(--bg-panel); color: var(--accent-text); box-shadow: var(--sh-1); }

/* ============================================================
   산출서식 6종 카드
   ============================================================ */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.form-c {
  border: 1px solid var(--border-1); border-radius: var(--r-8);
  background: var(--bg-panel); padding: 12px 13px;
}
.form-c .fn { display: flex; align-items: center; gap: 7px; }
.form-c .fn .no {
  display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: var(--r-4); background: var(--accent); color: #fff;
  font-size: var(--fs-10); font-weight: 700;
}
.form-c .fn b { font-size: var(--fs-12); font-weight: 650; }
.form-c .fp { font-size: var(--fs-10); color: var(--text-3); margin-top: 6px; line-height: 1.6; }
.form-c .fg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.form-c .fv { margin-top: 9px; font-size: var(--fs-13); font-weight: 700; font-variant-numeric: tabular-nums; }