/* =============================================================
   settle.css — 정산 관리. 거래처 상세 · 거래 내역 확인 창 · 등록 창.
   잔액 현황은 공용 그리드 한 판이라 여기 없다(grid.css).
   색은 tokens.css 하나가 정한다 — 여기서 색을 짓지 않는다.
   ============================================================= */

/* ---- 거래처 상세 ---- */
.stl { padding: 16px 18px 24px; }

.stl-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stl-name { font-size: 15px; font-weight: 700; }

/* 방향 탭 — **두 칸의 폭을 같게 고정한다**(§2-8). 거래처를 바꿔도 자리가 안 흔들린다. */
.stl-tabs { display: inline-flex; gap: 2px; padding: 2px; margin-bottom: 12px;
            background: var(--sunk); border-radius: 9px; }
.stl-tab {
  width: 118px; height: 30px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.stl-tab.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
/* ⛔ **흐리게만 두지 마라** — *"왜 안 눌리지"* 하고 한 번 더 누른다. 건수(`0`)가 그 물음을 없앤다. */
.stl-tab.off { color: var(--faint); cursor: default; }

/* 지금 잔액 둘 — **빼지 않는다**(§2-7). 좌우로 나란히 선다. */
.stl-sum {
  display: flex; align-items: center; gap: 28px;
  padding: 12px 16px; margin: 0 0 16px;
  background: var(--head); border: 1px solid var(--border); border-radius: 10px;
}
.stl-cell { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.stl-cell b { font-size: 17px; font-weight: 700; }
.stl-cell.minus b { color: var(--danger); }
.stl-cl { font-size: 11px; color: var(--muted); }
.stl-note { font-style: normal; font-size: 10.5px; color: var(--faint); }
.stl-vat { font-size: 11.5px; color: var(--faint); }

.stl-block { margin-bottom: 20px; }
.stl-bt { font-size: 12.5px; font-weight: 700; }
/* 제목 한 줄 — 오른쪽 끝에 **그 표의 필터**가 선다(방향 탭과 같은 규칙). */
.stl-bh { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.stl-days { display: flex; align-items: center; gap: 6px; }
.stl-day { width: 132px; height: 27px; font-size: 12px; }
.stl-tilde { color: var(--faint); font-size: 12px; }
/* 잘라 낸 것을 **말없이 숨기지 않는다**(화면 규칙 §7) — 표 밑에 한 줄로 적는다. */
.stl-foot { margin-top: 5px; font-size: 11px; color: var(--faint); }
.stl-t {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow-x: auto; font-variant-numeric: tabular-nums;
}
.stl-th, .stl-th2, .stl-r { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 34px; }
.stl-th, .stl-th2 { background: var(--head); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.stl-th2 { min-height: 26px; border-bottom: 1px solid var(--line); }
/* 2단 머리 — 「대 금」/「세금계산서」가 **어느 축인지** 위 단이 말한다.
   ⛔ 「지급액」 옆의 「수령액」처럼 나란히 두면 **돈을 받은 것으로 읽힌다.** */
/* ⭐ 폭은 **아래 단 세 칸 + 사이 두 틈**이다: 86×3 + 8×2 = 274.
   손으로 어림하면 위아래가 어긋나 「거래금액」이 옆 축 위에 앉는다. */
.stl-th2 .sx-grp {
  flex: none; width: 274px; text-align: center; font-weight: 700; color: var(--text);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
.stl-th { border-bottom: 1px solid var(--border); }
.stl-r { border-bottom: 1px solid var(--line); font-size: 12.5px; }
.stl-r:last-child { border-bottom: 0; }
.stl-r:hover { background: var(--hover); }
/* ⭐ **누를 수 있는 줄**(2026-08-06) — 누르면 「거래 내역 확인」 창이 열린다.
   손 모양과 `›` 둘이 함께 말한다: 하나만으로는 **읽는 줄과 구별이 안 된다.** */
.stl-r.link { cursor: pointer; }
/* 마감된 줄은 물러난다 — 눈이 미결부터 읽어야 한다. */
.stl-r.done { color: var(--muted); }
.stl-r.loose { background: var(--even); }
.stl-none { padding: 16px 12px; text-align: center; font-size: 12px; color: var(--faint); }

.sx-no    { flex: none; width: 92px; }
.sx-date  { flex: none; width: 88px; color: var(--muted); }
.sx-when  { flex: none; width: 96px; color: var(--muted); }
.sx-kind  { flex: none; width: 76px; }
.sx-memo  { flex: 1; min-width: 90px; color: var(--muted);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 마감조정 줄만 다르다 — **뱃지 옆에 ［마감 취소］** 가 선다(§2-4). 자르면 단추가 잘린다. */
.sx-memo.wide { display: flex; align-items: center; gap: 6px; overflow: visible; }
.sx-memo.wide .btn { height: 24px; padding: 0 8px; font-size: 11px; }
/* ⭐ 92 → 86 (2026-08-06) — 아티팩트(iframe)는 데모 창보다 좁아 **표가 가로로 넘쳐**
   줄 끝 단추가 접힌 자리로 밀렸다. 여덟 칸이라 6px 이 48px 이다. */
.sx-n     { flex: none; width: 86px; text-align: right; }
/* ⭐ **잔액만 밝고 굵다** (2026-08-06 사장님 지시 — *"결과적으로 잔액이 얼마인지가
   눈에 띄는것이 좋기때문에"*). 거래금액·받은 돈은 **어떻게 그 잔액이 나왔나**를
   설명하는 값이라 뒤로 물러나고, 눈이 찾는 **답 한 칸**만 앞으로 나온다.
   ⛔ 다 밝게 두지 마라 — 여덟 칸이 다 같은 무게면 **읽을 순서가 없다.** */
.sx-n.dim   { color: var(--faint); }
.sx-n.bal   { color: var(--text); font-weight: 700; }
.sx-n.minus { color: var(--danger); font-weight: 700; }
.sx-badge { flex: none; width: 88px; text-align: center; }
/* 열리는 줄의 끝 화살표 — **누를 수 있다**를 말하는 한 글자다. */
.sx-go    { flex: none; width: 16px; text-align: right; color: var(--faint); }
.stl-r.link:hover .sx-go { color: var(--text); }
/* 단추는 접혀도 된다 — **잘리는 것보다 접히는 것이 낫다**(화면 규칙 §7). */
.sx-act   { flex: 1; min-width: 190px; display: flex; flex-wrap: wrap;
            justify-content: flex-end; gap: 6px; }
.sx-act .btn { height: 26px; padding: 0 9px; font-size: 11.5px; }

/* ---- 거래 내역 확인 창 ⭐ (2026-08-06) — **표에서 걷어낸 단추가 여기 산다** ---- */
/* 줄이 몇이든 창은 화면을 안 넘는다 — 넘치는 것은 **몸통만** 구른다(머리·바닥은 붙박이). */
.blk.stv {
  width: 720px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; max-height: 84vh;
}
.stv-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px;
}
.stv-top { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.stv-dot { color: var(--faint); }
.stv-day { color: var(--muted); font-variant-numeric: tabular-nums; }

/* 축 한 칸 — 왼쪽에 이름, 가운데 숫자 셋, 오른쪽 끝에 **그 축의 단추 하나.** */
.stv-ax {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; background: var(--head);
  border: 1px solid var(--border); border-radius: 10px;
}
/* 다 닫힌 축은 물러난다 — **사라지지는 않는다**(단추가 옮겨 다니면 안 된다). */
.stv-ax.done { background: var(--even); }
/* ⭐ 두 칸의 이름 폭을 **같게 고정한다** — 「대 금」과 「세금계산서」의 글자 수가 달라
   자동 폭으로 두면 밑줄의 「거래금액」이 위아래로 어긋난다. */
.stv-axh { flex: none; width: 76px; font-size: 12px; font-weight: 700; color: var(--muted); }
.stv-nums { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
/* ⭐ **폭을 고정한다** — 「받은 돈」과 「발행」은 글자 수가 달라, 자동 폭으로 두면
   두 줄의 같은 칸이 어긋나 **눈이 그 칸을 다시 찾는다**(2026-08-06 사장님 지시). */
.stv-c { flex: none; width: 116px; display: flex; flex-direction: column; gap: 1px; }
.stv-c i { font-style: normal; font-size: 10.5px; color: var(--faint); }
.stv-c b { font-size: 14px; font-weight: 600; }
/* 앞의 둘은 **어떻게 그 잔액이 나왔나**를 설명할 뿐이라 물러난다. */
.stv-c.dim i, .stv-c.dim b { color: var(--faint); font-weight: 500; }
.stv-c.bal b { color: var(--text); font-weight: 700; font-size: 15px; }
.stv-c.minus b { color: var(--danger); font-weight: 700; font-size: 15px; }

.stv-t { margin-top: 4px; }
.stv-t .sx-act { min-width: 150px; }
.stv-t .sx-act .stl-note { font-size: 10.5px; }

/* ---- 등록 창 — 넷이 한 부품이다(§1-2) ---- */
.blk.stf { width: 460px; max-width: calc(100vw - 32px); }

.stf-body { display: flex; flex-direction: column; gap: 10px; }
.stf-f { display: flex; align-items: center; gap: 10px; }
.stf-l { flex: none; width: 92px; font-size: 12px; color: var(--muted); }
.stf-f > .dd, .stf-f > .stf-in, .stf-f > .stf-amt { flex: 1; min-width: 0; }
.stf-in { width: 100%; }
.stf-val { flex: 1; font-size: 12.5px; font-weight: 600; }
.stf-amt { display: flex; align-items: center; gap: 8px; }
.stf-amt .slp-in { flex: 1; min-width: 0; text-align: right; }
/* ⭐ **「(VAT 포함)」은 늘 보이는 글이다** — 물음표에 숨기지 않는다(§1-1).
   치는 순간에 못 보면 두 기준이 섞인다. */
.stf-unit { flex: none; font-size: 11.5px; color: var(--faint); }