/* =====================================================================
   전역 디자인 시스템 (ds.css) — 기장전표 2.3.3 style.css 의 :root 토큰·그리드 표준(table.sg)·칩 줄·풍선·정렬을 그대로 옮긴 것.
   근태급여의 모든 화면은 이 파일의 토큰만 따른다. 화면별 CSS(style.css)는 여기 토큰을 참조만 하고 값을 새로 정하지 않는다.
   → 레이아웃 폭·행 높이·글자·색을 바꿀 때는 이 파일의 :root 한 곳만 고친다.
   출처: 기장전표 public/style.css (2026-10-15 17:58) · sg.js · grid.js · std.js
   ===================================================================== */
:root {
  /* ---- 기장전표 기본 색 토큰 (동일) ---- */
  --bg: #f4f7f8; --panel: #fff; --ink: #1d2b30; --muted: #66777d; --line: #dde5e8;
  --brand: #11606f; --brand-2: #1a7d8f; --focus: #93dde8; --soft: #e8f4f6;
  --hi: #1e7b4f; --hi-bg: #e5f4ec; --mid: #8a5a00; --mid-bg: #fdf1d8; --lo: #a3342b; --lo-bg: #fbe6e3;
  --dep: #0b5ea8; --wd: #b23b2e;
  /* ---- 글자 ---- */
  --font: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: ui-monospace, "IBM Plex Mono", Menlo, Consolas, monospace;
  --fs: 14px; --lh: 1.5;
  /* ---- 레이아웃 폭 (화면 전체 폭 = none · 가운데 모으려면 예: 1500px) — 머리줄·본문·도구줄이 모두 이 값을 따른다 ---- */
  --page-max: none; --page-pad: 16px; --page-pad-y: 10px;
  --narrow-max: 520px;            /* 로그인·폰 화면 */
  --chrome: 150px;                /* 머리줄+메뉴 높이 — 표 높이 계산용 */
  --grid-maxh: calc(100vh - var(--chrome) - 80px);
  /* ---- 그리드 표준 토큰 (기장전표 2.3.3 · 화면표준 7장: 행 높이 = 할 일 › 통장 26px, 화면 높이 820px 이하 24px) ---- */
  --sg-row: 26px; --sg-head-h: 32px; --sg-px: 9px; --sg-fs: 13px; --sg-fs-sm: 12px;
  --sg-head: #f4f7f8; --sg-line: #eef2f4; --sg-hover: #fafcfc; --sg-sel: #eef8fa; --sg-edit: #fffdf2; --sg-seed: #f1f4f5;
  --sg-ok: #1e7b4f; --sg-warn: #8a5a00; --sg-bad: #a3342b;
  --sg-min-w: 900px;
  /* ---- 모서리·그림자·단추 ---- */
  --r-sm: 4px; --r: 6px; --r-lg: 8px; --r-card: 10px;
  --shadow: 0 8px 24px rgba(10,30,35,.2);
  --btn-h: 30px; --btn-h-xs: 26px;
}
@media (max-height: 820px) { :root { --sg-row: 24px; } }

/* ---------- 바탕 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs)/var(--lh) var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
svg.ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sico { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 레이아웃: 폭은 토큰 하나 ---------- */
.page, .wrap, .topbar-in, main { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-pad); }
.wrap { padding-block: var(--page-pad-y) 40px; }
.wrap.narrow { max-width: var(--narrow-max); }

/* ---------- 요약 한 줄 (화면표준 1장) ---------- */
.kpi { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 12px; padding: 3px 8px; background: #f4fafb; border: 1px solid #e3eef0; border-radius: var(--r); margin: 0; color: var(--muted); user-select: none; }
.kpi .stat-box { display: inline-flex; align-items: baseline; gap: 0 5px; line-height: 1.45; padding: 0 4px; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; }
.kpi .stat-box .k { font-size: 12px; color: var(--muted); } .kpi .stat-box b, .kpi .stat-box .v { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .stat-box .sico { margin-right: 1px; color: var(--muted); align-self: center; }
.kpi .stat-box:hover { background: #e4f1f3; } .kpi .stat-box.on { background: #d6ebee; box-shadow: inset 0 -2px 0 var(--brand); }
.kpi .stat-box.opn { text-decoration: underline dotted; text-underline-offset: 3px; }
.kpi .sep { display: none; }
.lead { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.lead .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 1.6em; }
.lead.open .t { white-space: normal; max-height: none; color: var(--ink); }
.lead .q { flex: 0 0 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: 11px; padding: 0; line-height: 1; cursor: pointer; }
.lead.open .q { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- 칩 · 줄 위 도구 (sg-bar — 왼쪽에 모음, 오른쪽 끝은 [엑셀]·[열 폭 기본]만) ---------- */
.sg-bar, .tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; font-size: 12.5px; }
.sg-bar .sg-lbl { flex: none; width: 52px; font-size: 11.5px; color: var(--muted); }
.sg-bar .chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sg-bar .chip, .tools .fchip { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 0 10px; font-size: 12px; line-height: 22px; color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sg-bar .chip b, .tools .fchip b { color: var(--ink); font-weight: 600; }
.sg-bar .chip.on, .tools .fchip.on { background: var(--soft); border-color: var(--brand-2); color: var(--brand); }
.sg-bar select, .sg-bar input[type=date], .sg-bar input[type=search], .sg-bar input[type=text], .sg-bar input[type=month],
.tools select, .tools input[type=date], .tools input[type=search], .tools input[type=text], .tools input[type=month], .tools .in.xs, .tools .in.sel { font: inherit; font-size: 12px; height: var(--btn-h-xs); padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); width: auto; }
.sg-bar .btn, .tools .btn { height: var(--btn-h-xs); padding: 0 10px; font-size: 12px; }
.sg-bar .sep, .tools .sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.sg-foot { display: flex; gap: 14px; padding: 5px 2px; color: var(--muted); font-size: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- 그리드 표준 (table.sg = 기장전표 · table.grid = 근태급여 — 같은 규칙) ----------
   전체 폭 · 열 폭 자유(grid.js) / 행 높이 고정 · 넘치면 말줄임 + 풍선(ds.js) · 셀 안 둥근 입력창 없음 · 날짜·글자 왼쪽 / 숫자 오른쪽 · 가운데 정렬 없음(체크 칸만) */
.sg-wrap, .tbl-wrap { position: relative; width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); max-height: var(--grid-maxh); }
.tbl-wrap.card0, .sg-wrap.auto { max-height: none; }
table.sg, table.grid { table-layout: auto; width: 100%; min-width: 0; border-collapse: collapse; font-size: var(--sg-fs); font-variant-numeric: tabular-nums; }
table.sg.fixed, table.grid.fixed { table-layout: fixed; min-width: var(--sg-min-w); }
table.sg > thead > tr > th, table.grid > thead > tr > th { height: var(--sg-head-h); padding: 0 var(--sg-px); background: var(--sg-head); color: var(--muted); font-weight: 500; font-size: var(--sg-fs-sm); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.25; }
table.sg > tbody > tr > td, table.grid > tbody > tr > td { height: var(--sg-row); padding: 0 var(--sg-px); border-bottom: 1px solid var(--sg-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-align: left; max-width: 420px; line-height: 1.3; }
table.sg > tfoot > tr > td, table.grid > tfoot > tr > td, table.grid > tbody > tr.sum > td { height: var(--sg-row); padding: 0 var(--sg-px); font-weight: 600; background: var(--sg-head); white-space: nowrap; position: sticky; bottom: 0; z-index: 2; border-top: 1px solid var(--line); text-align: left; }
table.sg th.num, table.sg td.num, table.grid th.num, table.grid td.num, table.grid th.r, table.grid td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.sg td.ck, table.sg th.ck, table.grid td.ck, table.grid th.ck, table.grid td.nox, table.grid th.nox { padding: 0 6px; text-align: center; width: 30px; }
table.grid td.c, table.grid th.c { text-align: left; } /* 가운데 정렬 없음 */
table.sg td.calc, table.sg td.hint, table.sg .hint, table.grid td.hint, table.grid .hint { color: #9bb0b6; }
table.sg > tbody > tr:hover > td, table.grid > tbody > tr:hover > td { background: var(--sg-hover); }
table.sg > tbody > tr.sel > td, table.grid > tbody > tr.sel > td, table.grid > tbody > tr.on > td { background: var(--sg-sel); }
table.sg > tbody > tr.cur > td, table.grid > tbody > tr.cur > td { background: #f2fbfc; }
table.sg > tbody > tr.edit > td, table.sg > tbody > tr.new > td, table.grid > tbody > tr.edit > td { background: var(--sg-edit); }
table.sg > tbody > tr.head > td, table.grid > tbody > tr.head > td { font-weight: 600; }
table.sg > tbody > tr.seed > td, table.grid > tbody > tr.seed > td, table.grid > tbody > tr.muted > td { background: var(--sg-seed); color: var(--muted); }
table.sg > tbody > tr.flash > td, table.grid > tbody > tr.flash > td { background: #ffe9a8 !important; transition: background .4s; }
table.grid tr[data-act] { cursor: pointer; }
table.grid td.wide { max-width: 600px; }
table.grid > tbody > tr.detail > td { white-space: normal; height: auto; overflow: visible; }
/* 셀 안 입력: 둥근 상자 없음, 포커스 때만 밑줄 */
table.sg td input.sg-in, table.sg td textarea.sg-in, table.grid td .in.gi, table.grid td input:not([type=checkbox]):not([type=file]):not([type=date]), table.grid td select {
  display: block; width: 100%; height: 22px; border: 0; border-bottom: 1.5px solid transparent; border-radius: 0; background: transparent; font: inherit; font-size: var(--sg-fs); padding: 0; margin: 0; color: var(--ink); outline: none; text-overflow: ellipsis; }
table.sg tr:hover td input.sg-in, table.grid tr:hover td .in.gi { border-bottom-color: var(--line); }
table.sg td input.sg-in:focus, table.grid td .in.gi:focus, table.grid td input:focus, table.grid td select:focus { border-bottom-color: var(--brand-2); background: #f3f9fa; outline: none; }
table.sg td input.sg-in::placeholder, table.grid td input::placeholder { color: #b7c4c8; }
table.sg td.num input.sg-in, table.grid td.r input, table.grid td.num input { text-align: right; }
table.sg td input[type=checkbox], table.grid td input[type=checkbox], table.grid th input[type=checkbox] { width: 13px; height: 13px; margin: 0; vertical-align: middle; }
table.grid td .btn.xs { height: 20px; line-height: 18px; padding: 0 7px; font-size: 11.5px; }
@media (max-height: 820px) { table.sg td input.sg-in, table.grid td .in.gi { height: 21px; } }
/* 줄에 마우스를 올렸을 때만 보이는 단추 */
table.sg tr:not(:hover):not(:focus-within) .hov, table.grid tr:not(:hover):not(:focus-within) .hov { visibility: hidden; }
/* 칸 안의 짧은 표식 */
.sg .st, .grid .st { display: inline-block; font-size: 11.5px; line-height: 18px; border-radius: 3px; padding: 0 6px; background: #eef2f4; color: var(--muted); }
.sg .st.done, .grid .st.done { background: var(--hi-bg); color: var(--hi); } .sg .st.wait, .grid .st.wait { background: var(--mid-bg); color: var(--mid); } .sg .st.none, .grid .st.none { background: var(--lo-bg); color: var(--lo); } .sg .st.brand, .grid .st.brand { background: var(--soft); color: var(--brand); }
.sg .ok, .grid .ok { color: var(--sg-ok); } .sg .warn, .grid .warn { color: var(--sg-warn); } .sg .bad, .grid .bad { color: var(--sg-bad); }
.sg .code, .grid .code { color: var(--muted); font-size: 11px; margin-right: 3px; }
/* 머리글 정렬 (화면표준 8장) */
table.sg > thead > tr > th.sg-sortable, table.grid > thead > tr > th.sg-sortable { cursor: pointer; user-select: none; }
table.sg > thead > tr > th.sg-sortable:hover, table.grid > thead > tr > th.sg-sortable:hover { color: var(--brand); }
table.sg > thead > tr > th.sorted, table.grid > thead > tr > th.sorted { color: var(--brand); font-weight: 600; }
table.sg th .sg-sk, table.grid th .sg-sk { margin-left: 3px; font-size: 10px; }
/* 열 폭 끌기 손잡이 (grid.js) */
th > .gr-h { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
th > .gr-h:hover, th > .gr-h.on { background: linear-gradient(to right, transparent 3px, var(--brand) 3px, var(--brand) 5px, transparent 5px); }
thead th:hover > .gr-h { background: linear-gradient(to right, transparent 3px, #c9d6d9 3px, #c9d6d9 4px, transparent 4px); }
table.gr-fixed { table-layout: fixed; }
table.gr-fixed > thead th, table.gr-fixed > tbody > tr > td { overflow: hidden; text-overflow: ellipsis; }
body.gr-drag, body.gr-drag * { cursor: col-resize !important; user-select: none !important; }
.gr-menu { position: fixed; z-index: 99999; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 4px; display: grid; min-width: 180px; }
.gr-menu button { text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: var(--r); font: inherit; font-size: 13px; cursor: pointer; }
.gr-menu button:hover, .gr-menu button:focus { background: #eaf3f5; outline: none; }
.gr-menu button:disabled { color: #9aa7ab; cursor: default; background: none; }
/* [엑셀] 단추 (표 오른쪽 위에 떠 있음 — std.js 방식) · 근태급여는 도구줄의 [엑셀]을 씀 */
.grid-xlsx { font: inherit; font-size: 11px; line-height: 18px; padding: 0 6px; border: 1px solid #c9d6d9; border-radius: var(--r-sm); background: rgba(255,255,255,.92); color: #3b4d52; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.grid-xlsx:hover { background: #e4f1f3; border-color: #7fb3bb; }
/* 셀 풍선 (화면에 1개 — std.js 와 같은 모양) */
.cell-tip { position: fixed; z-index: 9000; max-width: 420px; background: #1f2d33; color: #fff; font-size: 12px; line-height: 1.45; padding: 6px 9px; border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.22); pointer-events: none; white-space: normal; display: none; }
.cell-tip.on { display: block; } .cell-tip .tp-x { color: #cfe3e6; margin-top: 2px; } .cell-tip .tp-row { color: #cfe3e6; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 4px; font-size: 11.5px; } .cell-tip .tp-k { color: #9fd3da; }
/* 줄 아래 고르기 창 (화면에 1개) */
.sg-pop, .cands { position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--brand-2); border-radius: var(--r-lg); box-shadow: 0 8px 24px rgba(17,96,111,.18); font-size: 12.5px; }
.sg-pop { width: 460px; max-width: calc(100vw - 32px); }
.sg-pop .ph { padding: 6px 10px; color: var(--muted); font-size: 11.5px; border-bottom: 1px solid var(--sg-line); display: flex; gap: 8px; align-items: center; }
.sg-pop .cand, .cands div { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--sg-line); cursor: pointer; }
.sg-pop .cand.on, .cands div.on, .cands div:hover { background: var(--soft); }
.cands div.none { color: var(--muted); cursor: default; }
@media (max-width: 900px) { .sg-pop { width: calc(100vw - 16px); left: 8px !important; } }