:root {
  /* SEED Design 토큰 매핑 (DESIGN.md 기준, 값 옆은 대응 role 토큰) */
  --primary: #1f3b73;        /* 회사 로고 남색 · fg-brand / bg-brand-solid */
  --primary-dark: #142a52;   /* 로고 그라데이션 어두운 쪽 · bg-brand-solid-pressed */
  --brand-weak: #edeff4;     /* 로고 남색의 옅은 틴트 · bg-brand-weak */
  --bg: #f7f8f9;             /* gray-100 · bg-layer-fill */
  --bg-weak: #f3f4f5;        /* gray-200 · bg-neutral-weak (hover/서브 표면) */
  --card: #ffffff;           /* gray-00 · bg-layer-default */
  --border: #dcdee3;         /* gray-400 · stroke-neutral-weak */
  --text: #1a1c20;           /* gray-1000 · fg-neutral */
  --text-muted: #555d6d;     /* gray-800 · fg-neutral-muted */
  --neutral-solid: #1a1c20;  /* gray-1000 · bg-neutral-solid */
  --danger: #fa342c;         /* red-700 · fg-critical / bg-critical-solid */
  --danger-weak: #fdf0f0;    /* red-100 · bg-critical-weak */
  --danger-weak-pressed: #fde7e7; /* red-200 · bg-critical-weak-pressed */
  --success: #079171;        /* green-700 · fg-positive */
  --success-weak: #edfaf6;   /* green-100 · bg-positive-weak */
  --success-text: #075445;   /* green-900 · fg-positive-contrast */
  --warn: #9b7821;           /* yellow-700 · fg-warning */
  --warn-weak: #fff7de;      /* yellow-100 · bg-warning-weak */
  --warn-border: #fbdc65;    /* yellow-300 · stroke-warning-weak */
  --warn-text: #4f3e1f;      /* yellow-900 · fg-warning-contrast */
  --info-weak: #eff6ff;      /* blue-100 · bg-informative-weak */
  --overlay: rgba(0, 0, 0, .455); /* static-black-alpha-700 · bg-overlay */
  --radius: 10px;            /* r2.5 */
}
* { box-sizing: border-box; }
/* 아이폰 사파리에서 폭이 100%인 요소가 1px만 넘쳐도 좌우로 출렁이는(elastic bounce) 게 눈에 띄게 보임
   (안드로이드 크롬은 같은 정도의 오버플로를 그냥 잘라서 보여줘서 티가 덜 남) - 안전장치로 가로 스크롤 자체를 막는다. */
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background: var(--bg);
  color: var(--text);
}
a { color: var(--primary); }

.app-shell { max-width: 1080px; margin: 0 auto; padding: 16px; }
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.app-header h1 { font-size: 18px; margin: 0; display: flex; align-items: center; gap: 8px; }
.app-header .header-logo { height: 26px; width: auto; display: block; }
.app-header .badge { font-size: 12px; color: var(--text-muted); }

.tabs {
  display: flex; gap: 4px; overflow-x: auto; margin: 14px 0;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  padding: 10px 14px; border: none; background: none; cursor: pointer;
  font-size: 14px; color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px;
}
.card h2 { margin-top: 0; font-size: 16px; }
.card h3 { font-size: 14px; color: var(--text-muted); margin: 0 0 10px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; color: var(--text-muted); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px;
  /* 16px 미만이면 아이폰 사파리가 입력칸 탭할 때마다 자동으로 확대해버려서(포커스 줌) 화면이 튀어 보인다 */
  font-size: 16px; background: #fff; color: var(--text);
}
input[type=file] { font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px;
  border: none; background: var(--primary); color: #fff; font-size: 14px; cursor: pointer;
  font-weight: 500;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: var(--bg-weak); color: var(--text); }
.btn.secondary:hover { background: var(--border); }
.btn.danger { background: var(--danger-weak); color: var(--danger); }
.btn.danger:hover { background: var(--danger-weak-pressed); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--text-muted); font-weight: 600; font-size: 12px; }
tr:hover td { background: var(--bg-weak); }
.num-input { width: 80px; padding: 5px 6px; }

.toast-wrap {
  position: fixed; top: 16px; right: 16px; z-index: 999; display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--neutral-solid); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px;
  box-shadow: 0px 2px 10px 0px rgba(0,0,0,.102); animation: fadein .15s ease-out;
}
.toast.error { background: var(--danger); }
.toast.success { background: var(--success); }
@keyframes fadein { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: translateY(0);} }

.modal-backdrop {
  position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center;
  justify-content: center; z-index: 500; padding: 16px;
}
.modal {
  background: var(--card); border-radius: var(--radius); padding: 20px; width: 100%; max-width: 420px;
  max-height: 90vh; overflow-y: auto;
}
.modal.modal-wide { max-width: 760px; }
.modal.modal-wide .payslip-doc { border: none; padding: 0; }
.modal h3 { margin-top: 0; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.pill.draft { background: var(--warn-weak); color: var(--warn-text); }
.pill.sent { background: var(--success-weak); color: var(--success-text); }

/* 금액 색상 유틸리티 (개요·인사배치·자재·재무 등에서 위치와 무관하게 사용) */
.bp { color: var(--primary-dark); }
.pos { color: var(--success); }
.neg { color: var(--danger); }

/* 인사정보 아코디언 */
.acc-list { display: flex; flex-direction: column; gap: 8px; }
.acc-item { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.acc-item.resigned { background: var(--bg-weak); }
.acc-item.resigned .acc-name, .acc-item.resigned .acc-wage { color: var(--text-muted); }
.acc-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.acc-row .acc-name { font-size: 14px; font-weight: 700; white-space: nowrap; }
.acc-row .acc-id { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.acc-row .acc-wage { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--primary-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-row .acc-chevron { color: var(--text-muted); font-size: 11px; transition: transform .15s ease; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-detail { display: none; padding: 0 14px 14px; border-top: 1px solid var(--border); }
.acc-item.open .acc-detail { display: block; }
.acc-detail dl { display: grid; grid-template-columns: 76px 1fr; row-gap: 8px; margin: 12px 0; font-size: 13px; }
.acc-detail dt { color: var(--text-muted); }
.acc-detail dd { margin: 0; word-break: break-all; }
.acc-fields { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.acc-fields label { font-size: 11px; color: var(--text-muted); }
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .acc-item.open .acc-chevron { transition: none; } }

/* 카메라 스캐너 */
.scanner-wrap { position: relative; width: 100%; max-width: 420px; margin: 0 auto; border-radius: var(--radius); overflow: hidden; background: #000; }
.scanner-wrap video { width: 100%; display: block; }
.scanner-frame {
  position: absolute; inset: 15%; border: 3px solid #10ab7d; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 999px rgba(0,0,0,.35);
}
.scan-result { text-align: center; padding: 10px; font-size: 13px; color: var(--text-muted); }

/* 갤러리 */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.gallery figure { margin: 0; position: relative; }
.gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.gallery figcaption { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.gallery .del-btn {
  position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); color: #fff; border: none;
  border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 12px;
}

/* 달력 */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; color: var(--text-muted); padding: 4px 0; }
.cal-cell {
  min-height: 64px; border: 1px solid var(--border); border-radius: 8px; padding: 4px; font-size: 11px;
  background: #fff; cursor: pointer;
}
.cal-cell.empty { background: transparent; border: none; cursor: default; }
.cal-cell .d { font-size: 12px; color: var(--text-muted); }
.cal-cell .g { margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--primary); }
.cal-cell.today { border-color: var(--primary); }
.cal-cell:hover { background: var(--bg-weak); }
.cal-legend { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

.qr-box { text-align: center; }
.qr-box #qrcode-container { display: inline-block; padding: 14px; background: #fff; border-radius: 12px; border: 1px solid var(--border); }

.empty-state { text-align: center; color: var(--text-muted); padding: 30px 10px; font-size: 13px; }

.landing { max-width: 640px; margin: 60px auto; text-align: center; padding: 0 16px; }
.landing .landing-logo { height: 140px; width: auto; display: block; margin: 0 auto; }
.landing p { color: var(--text-muted); }
.landing .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
@media (max-width: 560px) { .landing .cards { grid-template-columns: 1fr; } }
.landing .cards a {
  display: block; padding: 26px; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  text-decoration: none; color: var(--text); font-weight: 600; font-size: 16px;
}
.landing .cards a:hover { border-color: var(--primary); }
.landing .cards .sub { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.muted { color: var(--text-muted); font-size: 12px; }
.hidden { display: none !important; }

/* 급여명세서 문서 뷰 */
.payslip-doc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.payslip-doc-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.payslip-doc-header h2 { margin: 0; font-size: 20px; }
.payslip-doc h3 { font-size: 13px; color: var(--text-muted); margin: 20px 0 8px; }
.payslip-info-table { margin-bottom: 4px; }
.payslip-info-table th { width: 22%; background: var(--bg-weak); font-size: 12px; color: var(--text-muted); font-weight: 600; }
.payslip-info-table td { width: 28%; font-size: 13px; }
.payslip-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .payslip-breakdown { grid-template-columns: 1fr; } }
.payslip-breakdown table thead th { background: var(--bg-weak); text-align: center; font-size: 12px; }
.payslip-breakdown td:last-child { text-align: right; }
.payslip-breakdown tr.total-row td { font-weight: 700; border-top: 2px solid var(--border); border-bottom: none; }
.payslip-netpay {
  display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding: 14px 16px;
  background: var(--brand-weak); border-radius: var(--radius); font-size: 15px; font-weight: 700; color: var(--primary-dark);
}
.payslip-netpay span { font-size: 20px; }
.payslip-doc-footer { text-align: right; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.payslip-doc-footer div:last-child { font-weight: 600; color: var(--text); margin-top: 2px; }

/* ---------- 급여명세서 편집기 ---------- */
.ps-editor .ps-sec { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; background: var(--bg); }
.ps-editor .ps-sec > h3 { margin: 0 0 10px; font-size: 15px; }
.ps-editor .ps-line { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.ps-editor .ps-line .ps-label { flex: 1; font-size: 14px; }
.ps-editor .ps-line .ps-label .muted { font-size: 11px; }
.ps-editor input.ps-amt { width: 130px; text-align: right; font-variant-numeric: tabular-nums; padding: 6px 8px; }
.ps-editor .ps-presets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.ps-editor select { width: auto; padding: 6px 8px; }
.ps-sumbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px 16px; background: var(--brand-weak); border-radius: var(--radius);
  font-weight: 700; color: var(--primary-dark);
}
.ps-sumbar .ps-sub { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ps-sumbar .ps-net { font-size: 20px; }

/* ---------- 알림 ---------- */
.notif-bell { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.notif-badge {
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-banner {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  background: var(--warn-weak); border: 1px solid var(--warn-border); border-radius: var(--radius);
  padding: 10px 14px; font-size: 14px; color: var(--warn-text);
}
.notif-banner .notif-go { margin-left: auto; font-weight: 700; color: var(--warn-text); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; gap: 11px; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.notif-item:last-child { border-bottom: none; }
.notif-item .notif-ic {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: var(--info-weak);
}
.notif-item.unread .notif-ic { background: var(--danger-weak); }
.notif-item .notif-t { font-size: 14px; font-weight: 600; }
.notif-item .notif-b { font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.notif-item .notif-d { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.notif-item.clickable { cursor: pointer; }
.notif-item.clickable:hover { background: var(--bg-weak); }
.tab-btn .tab-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); margin-left: 4px; vertical-align: middle;
}

/* ---------- 현장 선택 바 ---------- */
.site-scope-bar {
  position: sticky; top: 56px; z-index: 15;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border-bottom: 1px solid var(--border);
  padding: 10px 4px; margin: 0 -4px 4px;
}
.site-scope-bar .ssb-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted);
  text-transform: uppercase;
}
.site-scope-bar #site-scope { width: auto; min-width: 160px; font-weight: 600; }
.site-scope-bar #site-scope-info { font-size: 12px; }

.tabs .tab-sep {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text); align-self: center; white-space: nowrap;
  padding: 5px 10px; margin: 0 2px 0 6px;
  background: var(--border); border-radius: 6px;
}
.tabs .tab-sep:first-child { margin-left: 0; }

/* ---------- PC 화면: 좌측 사이드바 내비게이션 (A안, 관리자앱 전용) ----------
   모바일/태블릿(1023px 이하)에서는 위 규칙 그대로(가로 탭 + 위쪽 현장 선택 바).
   PC 폭(1024px 이상)에서만 .admin-shell을 그리드로 바꿔 좌측 사이드바 + 우측 본문으로 재배치한다.
   전부 .admin-app-shell/.admin-shell 아래로 한정 - 사용자앱(user.html)도 .tabs/.tab-btn을 쓰므로
   범위를 안 좁히면 사용자앱 PC 화면까지 이 스타일이 새어 들어간다(실제로 있었던 버그). */
@media (min-width: 1024px) {
  .admin-app-shell { max-width: 1320px; }

  .admin-shell {
    display: grid;
    grid-template-columns: 224px 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    align-items: start;
  }

  .admin-shell .site-scope-bar {
    grid-column: 1; grid-row: 1;
    flex-direction: column; align-items: stretch; gap: 6px; flex-wrap: nowrap;
    margin: 0; padding: 14px 14px 12px;
    border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0;
    top: 56px;
  }
  .admin-shell .site-scope-bar #site-scope { width: 100%; min-width: 0; }
  .admin-shell .site-scope-bar #site-scope-info { font-size: 11.5px; }

  .admin-shell .tabs {
    grid-column: 1; grid-row: 2;
    flex-direction: column; align-items: stretch; overflow-x: visible; overflow-y: auto;
    border: 1px solid var(--border); border-top: none; border-bottom: none;
    border-radius: 0 0 var(--radius) var(--radius);
    margin: 0; padding: 8px; gap: 1px;
    /* 현장 선택 바(헤더 56px + 자기 높이 약 109px) 바로 아래에 붙도록 */
    position: sticky; top: 165px;
    max-height: calc(100vh - 165px);
  }
  .admin-shell .tab-btn {
    text-align: left; border-radius: 8px; border-bottom: none; white-space: normal;
    padding: 9px 12px;
  }
  .admin-shell .tab-btn:hover { background: var(--bg-weak); }
  .admin-shell .tab-btn.active { background: var(--primary); color: #fff; font-weight: 600; }

  .admin-shell .tabs .tab-sep {
    align-self: stretch; text-align: left; white-space: normal;
    margin: 14px 0 6px; padding: 6px 10px;
  }
  .admin-shell .tabs .tab-sep:first-child { margin-top: 4px; }

  .admin-content { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
}

/* ---------- 개요 대시보드 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
}
.stat-card .t {
  font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted);
}
.stat-card .v {
  font-size: 20px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.stat-card .v.bp { color: var(--primary-dark); }
.stat-card .v.pos { color: var(--success); }
.stat-card .v.neg { color: var(--danger); }
.ov-recent-item {
  display: flex; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.ov-recent-item:last-child { border-bottom: none; }
.ov-recent-item .muted { min-width: 88px; }

/* ---------- 인사배치 ---------- */
tr.muted-row td { color: var(--text-muted); }
.assign-docs-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.assign-docs { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 4px 0; }
.assign-docs label {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; color: var(--text);
}
.assign-docs input[type=checkbox] { width: auto; }

/* ---------- 데이터 카드 (개요·인사배치·자재·재무 목록 공용 - 인사정보 아코디언과 같은 톤) ---------- */
.dcard-list { display: flex; flex-direction: column; gap: 8px; }
.dcard { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--card); }
.dcard.auto { background: var(--bg-weak); }
.dcard.linked { cursor: pointer; }
.dcard.linked:hover { border-color: var(--primary); }
.dcard-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.dcard-head .muted { font-weight: 400; font-size: 12px; }
.dcard-head .spacer { flex: 1; }
.dcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 16px; }
.dcard-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dcard-grid .k { font-size: 11px; color: var(--text-muted); }
.dcard-grid .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.dcard-grid .v.bp { color: var(--primary-dark); }
.dcard-grid .v.pos { color: var(--success); }
.dcard-grid .v.neg { color: var(--danger); }
.dcard-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.dcard-head .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.led-row { padding: 9px 14px; }
.led-row .dcard-head { margin-bottom: 0; font-size: 13px; font-weight: 500; }
.dcard-foot {
  display: flex; justify-content: space-between; align-items: center; font-weight: 700;
  padding: 10px 14px; border-top: 2px solid var(--border); margin-top: 2px; font-size: 14px;
}

/* ---------- 자재 / 재무 ---------- */
.subtab-bar { display: flex; gap: 6px; flex-wrap: wrap; }
tr.fin-auto td { background: var(--bg-weak); color: var(--text-muted); }
tr.fin-auto td:first-child { color: var(--text); font-weight: 500; }
.fin-bars {
  display: flex; align-items: flex-end; gap: 10px; height: 110px; padding-top: 6px;
}
.fin-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; }
.fin-bar-pair { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; }
.fin-bar-pair i { flex: 1; display: block; border-radius: 3px 3px 0 0; min-height: 2px; }
.fin-bar-pair i.inc { background: var(--primary); }
.fin-bar-pair i.exp { background: var(--danger); }
.fin-bar-label { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 재무 입력 폼의 발생일/지급(결제)예정일/계산서발행 - 라벨 없는 입력칸 사이에서 날짜 두 개를 구분하기 위함 */
.ledger-date-field, .ledger-check-field {
  display: flex; align-items: center; gap: 4px; flex: 1 1 180px; min-width: 180px;
  font-size: 11px; color: var(--text-muted); margin: 0; white-space: nowrap;
}
.ledger-date-field input { width: auto; flex: 1; min-width: 0; }
.ledger-check-field { min-width: 110px; flex: 0 0 auto; }
.ledger-check-field input[type=checkbox] { flex: none; }

/* ---------- 미수채권/미지급금 ---------- */
.pill.overdue { background: var(--danger-weak); color: var(--danger); }