/* ═══════════════════════════════════════════════════════════════════
   table_align.css — 표 정렬 공통 규칙 (2026-08-03 사장님 확정 「1-C」)
   ───────────────────────────────────────────────────────────────────
   왜 만들었나
     사장님이 마진계산기 「일별 마진」 표에서 “삐뚤어졌다”고 지적하셨다.
     실측해 보니 머리글은 왼쪽 끝, 숫자는 오른쪽 끝이라 한 칸 안에서
     최대 287px 이 벌어져 있었다.

     원인은 화면 하나의 실수가 아니라 **구조**였다 —
       · 값 칸에는 `.num`(오른쪽) 을 붙이는데
       · 머리글 칸(`th`)에는 아무 표시도 안 붙인다
       · 그래서 `th{text-align:left}` 기본값이 그대로 남는다
     같은 짜임이 프로그램 곳곳의 표에 그대로 있다.

   무엇으로 고쳤나 (사장님 확정)
     ① 표의 머리글과 내용을 **둘 다 가운데**로 둔다.
     ② 숫자는 자릿수 폭을 고정한다(1과 8이 같은 폭) — 가운데라도 덜 흔들린다.
     ③ 긴 글(상품명·주소 등)이 든 칸은 **왼쪽 그대로** 둔다.
        가운데로 몰면 줄마다 시작점이 달라져 오히려 못 읽는다.
        어느 칸이 긴 글인지는 table_align.js 가 렌더된 내용을 보고 정한다.

   ★ base.html 에서 tokens.css 뒤에 싣는다(뒤에 오는 것이 이긴다).
   ★ 어떤 표를 이 규칙에서 빼고 싶으면 그 <table> 에 data-align-keep 을 준다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① 머리글·내용 가운데 ────────────────────────────────────────────
   `.정렬동기화` 는 table_align.js 가 표를 훑은 뒤에만 붙인다.
   자바스크립트가 막히면 규칙이 아예 안 걸려 **지금 화면 그대로** 남는다
   (반쯤 적용돼 더 이상해지는 것보다 낫다). */
/* 🔴 [2026-08-03] `html body` 를 앞에 붙인 이유 — 라이브에서 잡힌 결함.
   화면이 `table.km td.r{text-align:right}` 처럼 적으면 내 규칙과 **세기가 똑같아**
   (둘 다 0,2,2) 뒤에 실리는 쪽이 이긴다. 화면의 <style> 은 늘 뒤에 온다.
   `html body` 두 마디로 세기를 올려 순서와 상관없이 이기게 한다
   (자동화 설정 화면 표에서 머리글만 가운데로 가고 값은 오른쪽에 남아 있었다). */
html body table.정렬동기화:not([data-align-keep]) th,
html body table.정렬동기화:not([data-align-keep]) td{
  text-align:center;
}

/* ── ② 숫자는 자릿수 폭 고정 ──────────────────────────────────────── */
html body table.정렬동기화:not([data-align-keep]) td{
  font-variant-numeric:tabular-nums;
}

/* ── ③ 긴 글이 든 칸은 왼쪽 ───────────────────────────────────────────
   table_align.js 가 칸(열)마다 재서 `.칸-글` 을 붙인다. */
html body table.정렬동기화 th.칸-글,
html body table.정렬동기화 td.칸-글{
  text-align:left;
  font-variant-numeric:normal;
}

/* ── 칸 안의 「덩어리 단추」 가운데로 ─────────────────────────────────
   글자 정렬은 글자만 움직인다 — 한 줄을 통째로 차지하는 단추(블록)는
   가운데 정렬을 해도 제자리에 남는다.
   라이브 실측(2026-08-03 소싱처 계정 「액션」 칸): 머리글·값 둘 다 가운데인데
   편집 단추만 25px 오른쪽에 붙어 있었다. 덩어리 요소는 양옆 여백으로 가운데 보낸다. */
table.정렬동기화 td:not(.칸-글) > button,
table.정렬동기화 td:not(.칸-글) > a.btn,
table.정렬동기화 td:not(.칸-글) > .btn{
  margin-left:auto;
  margin-right:auto;
}

/* ── 입력칸·단추는 건드리지 않는다 ────────────────────────────────────
   금액 입력칸은 오른쪽 정렬이라야 자릿수를 세면서 칠 수 있다. */
table.정렬동기화 td input,
table.정렬동기화 td textarea{
  text-align:inherit;
}
table.정렬동기화 td input[type="number"],
table.정렬동기화 td input.금액,
table.정렬동기화 td input[inputmode="numeric"]{
  text-align:right;
}