/* kaudit 화면 — 기장전표·근태급여 화면 표준(색·글 크기·메뉴 섬)을 따름 (ADR-006) */
:root {
  --brand: #11606f; --soft: #e8f4f6; --line: #dde5e8; --muted: #66777d; --bg: #f5f8f9; --ink: #1f2d31;
  --warn: #b26a00; --bad: #b3261e; --good: #2e7d32; --row: 28px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.45 "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }

/* 로그인 */
.login { min-height: 100%; display: grid; place-items: center; background: linear-gradient(160deg, #0d4d59, #11606f 55%, #2a7f8e); }
.login-box { width: min(340px, calc(100vw - 32px)); background: #fff; border-radius: 12px; padding: 24px; display: grid; gap: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.login-box h1 { margin: 0 0 4px; font-size: 22px; color: var(--brand); letter-spacing: .02em; }
.login-box label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.login-box input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 14px; color: var(--ink); }
.login-box input.bad, .login-box input.bad:focus { border-color: var(--bad); outline: 2px solid var(--bad); outline-offset: -1px; }   /* ADR-018 틀린 칸 */
.login-box .err { word-break: keep-all; }
.login-box .inhint { color: var(--warn); font-size: 11.5px; margin-left: 4px; }
.login-box button:disabled { opacity: .7; cursor: wait; }
.err { color: var(--bad); min-height: 1em; margin: 0; font-size: 12px; }

/* 머리글 한 줄 */
.top { height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--brand); color: #fff; }
.top b { font-size: 14px; white-space: nowrap; }
.top .grow { flex: 1; }
.top .who { font-size: 12.5px; opacity: .9; white-space: nowrap; }
#navBtn { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; width: 32px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 15px; line-height: 1; }
#navBtn:hover, body.nav-open #navBtn { background: rgba(255,255,255,.22); }
.top .btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }

/* 화면 안 탭 */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 8px 0; background: #2b3a3f; min-height: 30px; }
.tab { display: flex; align-items: center; gap: 6px; padding: 4px 6px 5px 10px; border-radius: 7px 7px 0 0; background: #3c4d53; color: #d7e2e5; cursor: pointer; max-width: 220px; font-size: 12.5px; }
.tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.on { background: var(--bg); color: var(--ink); font-weight: 600; }
.tab button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 3px; border-radius: 4px; opacity: .7; }
.tab button:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* 메뉴 섬 */
.wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 10px; padding: 10px; align-items: start; }
body.nav-float .wrap { grid-template-columns: minmax(0, 1fr); }
.nav { font-size: 13px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px 6px 8px; }
body:not(.nav-float) .nav { position: sticky; top: 8px; max-height: calc(100vh - 100px); overflow: auto; }
body.nav-float .nav { position: fixed; left: 10px; top: 80px; width: 248px; max-height: calc(100vh - 92px); overflow: auto; z-index: 60;
  box-shadow: 0 12px 34px rgba(0,0,0,.2); transform: translateX(-16px); opacity: 0; pointer-events: none; transition: transform .16s ease, opacity .16s ease; }
body.nav-float.nav-open .nav { transform: none; opacity: 1; pointer-events: auto; }
#navDim { display: none; position: fixed; inset: 0; z-index: 59; background: rgba(0,0,0,.06); }
body.nav-float.nav-open #navDim { display: block; }
.nav-head { display: flex; align-items: center; gap: 4px; padding: 4px 2px 6px; border-bottom: 1px solid #eef2f3; margin-bottom: 4px; }
.nav-head input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.nav-head button { border: 0; background: none; color: var(--muted); cursor: pointer; height: 24px; border-radius: 6px; font-size: 11.5px; padding: 0 6px; white-space: nowrap; }
.nav-head button:hover { background: #f1f6f7; color: var(--brand); }
#navPin.on { color: var(--brand); background: var(--soft); }
body:not(.nav-float) #navX { display: none; }
.grp { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; cursor: pointer;
  font-size: 11.5px; color: var(--muted); margin: 6px 0 1px; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; }
.grp:hover { background: #f6f9fa; }
.grp::after { content: '▾'; font-size: 10px; }
.grp.shut::after { content: '▸'; }
.it { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 5px 8px 5px 12px; border-radius: 6px; color: inherit; cursor: pointer; white-space: nowrap; }
.it:hover { background: #f1f6f7; }
.it.on { background: var(--soft); color: var(--brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.it.soon { color: #9aa8ad; cursor: default; }
.it.soon:hover { background: none; }
.it .tag { margin-left: auto; font-size: 10.5px; color: #9aa8ad; border: 1px solid #e3eaec; border-radius: 9px; padding: 0 6px; }

/* 화면 */
#panes { min-width: 0; }
.pane { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 14px; }
.pane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.pane-head h2 { margin: 0; font-size: 16px; }
.pane-head .hint { color: var(--muted); font-size: 12px; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 7px; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); color: #fff; }
.btn.small { padding: 1px 8px; font-size: 12px; }

/* 표: 옆 스크롤은 표 안에서만 */
.tbl-wrap { overflow: auto; max-width: 100%; width: fit-content; border: 1px solid var(--line); border-radius: 8px; }
table.grid { border-collapse: separate; border-spacing: 0; }  /* 내용 폭 그대로 왼쪽 (표준 2장) */
table.grid th, table.grid td { height: var(--row); padding: 3px 10px; border-bottom: 1px solid #eef2f3; white-space: nowrap; text-align: left; max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
table.grid th { position: sticky; top: 0; background: #f4f8f9; font-weight: 600; color: #3b4d52; font-size: 12px; z-index: 1; }
table.grid tbody tr:hover { background: #f8fbfc; }
table.grid tbody tr.click { cursor: pointer; }
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); padding: 18px 4px; }
.pill { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: 11.5px; background: #eef2f3; color: #3b4d52; }
.pill.good { background: #e6f4ea; color: var(--good); } .pill.warn { background: #fff4e0; color: var(--warn); } .pill.brand { background: var(--soft); color: var(--brand); } .pill.bad { background: #fde8e7; color: var(--bad); }
/* 상태 칩: 제목 옆 한 줄, 누르면 거르기 (UI 표준 0장 — 큰 카드 금지) */
.chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 14px; padding: 1px 10px; cursor: pointer; font-size: 12.5px; white-space: nowrap; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on { background: var(--soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.chip.zero { color: #9aa8ad; }

/* 대화상자 */
dialog { border: 0; border-radius: 12px; padding: 0; width: min(560px, calc(100vw - 24px)); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(10, 30, 35, .35); }
#dlgForm { padding: 16px 18px; }
#dlgForm h3 { margin: 0 0 12px; font-size: 15px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.fgrid label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.fgrid label.wide { grid-column: 1 / -1; }
.fgrid label.chk { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; }
.fgrid input:not([type=checkbox]), .fgrid select, .fgrid textarea { border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; color: var(--ink); width: 100%; }
.dlg-btns { display: flex; gap: 8px; margin-top: 12px; }
#toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #263238; color: #fff; padding: 8px 16px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 100; }
#toast.show { opacity: .95; }

/* 폰: 탭 없이 한 화면, 메뉴는 서랍 */
@media (max-width: 900px) {
  .wrap { grid-template-columns: minmax(0, 1fr); padding: 6px; }
  .fgrid { grid-template-columns: 1fr; }
  .top .who { display: none; }
}

/* 조서 화면 (UI 표준 8장) — 머리글 한 줄 · 결과 한 줄 · 표. 큰 상자 없음 */
.wp-head { border-bottom: 1px solid #eef2f3; padding-bottom: 8px; }
.result { font-size: 13.5px; margin: 0 0 4px; }
.result b { color: var(--brand); }
.warns { margin: 0 0 8px; padding-left: 18px; color: var(--warn); font-size: 12.5px; }
.warns:empty { display: none; }
.warn-t { color: var(--warn); }
.muted { color: var(--muted); }
.pane section { margin-top: 12px; }
.pane h3 { font-size: 13.5px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, max-content)); gap: 4px 28px; }
table.form { border-collapse: collapse; }
table.form th { text-align: left; font-weight: normal; color: var(--muted); padding: 3px 12px 3px 0; white-space: nowrap; font-size: 12.5px; }
table.form td { padding: 3px 0; }
.in { border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; color: var(--ink); background: #fff; }
.in:focus { outline: 2px solid var(--soft); border-color: var(--brand); }
input.in.num { text-align: right; width: 150px; font-variant-numeric: tabular-nums; }
input.in.pctin { width: 70px; }
input.in.wide { width: 260px; }
table.grid td input.in, table.grid td select.in { padding: 1px 6px; }
#people input.in[data-p=name] { width: 110px; } #people input.in[data-p=duty] { width: 100px; } #people input.in.num { width: 80px; }
.hint-c { color: var(--muted); font-size: 12px; white-space: normal; max-width: 420px; }
tr.na td { color: #b0bcc0; } tr.na input { background: #f6f8f9; }
tr.total td { font-weight: 700; border-top: 2px solid var(--line); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .wp-grid { grid-template-columns: minmax(0, 1fr); } input.in.num { width: 120px; } input.in.wide { width: 100%; }
  table.form { width: 100%; table-layout: fixed; } table.form th { width: 38%; white-space: normal; } table.form select.in { max-width: 100%; } }

/* 대화상자: 구간 제목 · 자동 판정 안내 */
dialog { width: min(720px, calc(100vw - 24px)); }
#dlgBody { max-height: calc(100vh - 170px); overflow: auto; padding-right: 4px; }
.fsec { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--brand); border-bottom: 1px solid #eef2f3; padding: 6px 0 2px; margin-top: 4px; }
small.sg { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; }
small.sg.diff { color: var(--warn); }
small.sg.diff::after { content: ' · 고른 값이 자동 판정과 다릅니다'; }

/* 계약: 확인 필요·Claude 제안 */
.sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
.chip.warnc { border-color: #f0c98a; color: var(--warn); }
.chkbox { border: 1px solid #f0e2c8; background: #fffaf2; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; font-size: 12.5px; }
.chkbox ul { margin: 4px 0 0; padding-left: 18px; } .chkbox li.warn { color: var(--warn); } .chkbox li.info { color: var(--muted); }
.aip { border-top: 1px dashed #e6d6b8; margin-top: 8px; padding-top: 6px; }
.aip .btn { margin-top: 4px; }
code { background: #eef2f3; padding: 1px 6px; border-radius: 5px; font-size: 12px; }

/* ── 화면 표준 공용 부품 (UI 표준 11장 — ds-acctax 에서 가져옴 2026-10-31) ── */
table.grid tbody tr.sel { background: var(--soft); box-shadow: inset 3px 0 0 var(--brand); }
table.grid:focus { outline: none; }
table.grid th.num { text-align: right; }
table.grid th.sg-sortable { cursor: pointer; user-select: none; }
table.grid th.sg-sortable:hover, table.grid th.sorted { color: var(--brand); }
table.grid th.sorted { font-weight: 700; }
table.grid th .sg-sk { margin-left: 3px; font-size: 10px; }
.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; }
.grid-xlsx-bar { position: sticky; top: 0; height: 0; z-index: 3; text-align: right; overflow: visible; }
.grid-xlsx { position: relative; top: 2px; z-index: 3; margin: 0 4px 0 0; font: inherit; font-size: 11px; line-height: 18px; padding: 0 6px; border: 1px solid #c9d6d9; border-radius: 4px; background: rgba(255,255,255,.92); color: #3b4d52; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.tbl-wrap > table.grid > thead > tr > th:last-child { padding-right: 36px; } /* 오른쪽 위 [⊞ 엑셀] 단추가 마지막 머리글 글자를 가리지 않게 (v0.6.0 캡처 점검) */
.grid-xlsx .t { display: none; } .grid-xlsx:hover .t, .grid-xlsx:focus .t { display: inline; }
.grid-xlsx:hover { background: #e4f1f3; border-color: #7fb3bb; }
.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; }
.pg-t { display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; margin: 0 0 8px; }
.pg-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.pg-q { flex: none; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid #b9c9cd; background: #fff; color: #4d6167; font: 600 11.5px/18px inherit; cursor: pointer; align-self: center; }
.pg-q:hover, .pg-q.on { border-color: var(--brand); color: var(--brand); background: #eaf3f5; }
/* 이름 메뉴 · 화면 크기 */
.top .me-g { position: relative; flex: none; }
.top button.who { border: 0; background: none; color: #fff; cursor: pointer; font: inherit; font-size: 12.5px; opacity: .92; padding: 4px 6px; border-radius: 6px; }
.top button.who:hover { background: rgba(255,255,255,.14); }
.me-dd { position: absolute; right: 0; top: 34px; z-index: 50; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 8px 10px; white-space: nowrap; }
.sf-sc { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.sf-sc-t { color: var(--muted); margin-right: 4px; }
.sf-sc button { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 2px 9px; cursor: pointer; font: inherit; }
.sf-sc button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 넘치면 숨기지 않고 두 줄 (scrfit.js 가 sf-tight → sf-wrap) */
.top.sf-wrap { height: auto; min-height: 42px; flex-wrap: wrap; padding-top: 4px; padding-bottom: 4px; }
.top.sf-wrap .grow { display: none; } .top.sf-wrap .me-g { margin-left: auto; }

/* ── 일반조서 화면 (REQ-004) — 양식 모양 그대로, 큰 상자 없음 ── */
.wpg-wrap { overflow: auto; max-width: 100%; max-height: calc(100vh - 150px); border: 1px solid var(--line); border-radius: 8px; }
table.wpg { border-collapse: collapse; table-layout: fixed; font-size: 12.5px; }
table.wpg td { border: 1px solid #eef2f3; padding: 2px 5px; vertical-align: top; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
table.wpg td.wl.b { font-weight: 700; } table.wpg td.c { text-align: center; } table.wpg td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.wpg td.wf { background: #f6f9fa; color: #24464d; }
table.wpg td.wc { padding: 1px; background: #fffef3; }
table.wpg td.wc.auto { background: #eef6fb; }
table.wpg .wi { width: 100%; box-sizing: border-box; border: 1px solid transparent; background: transparent; font: inherit; color: var(--ink); padding: 1px 4px; border-radius: 3px; resize: none; overflow: hidden; display: block; min-height: 20px; }
table.wpg .wi:hover { border-color: var(--line); } table.wpg .wi:focus { outline: none; border-color: var(--brand); background: #fff; }
table.wpg .wi.num { text-align: right; font-variant-numeric: tabular-nums; }
table.wpg td.wc.auto .wi { color: #2a5d86; }
.tools { position: relative; display: inline-block; }
.tools .menu { position: absolute; z-index: 20; top: 28px; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px; display: grid; min-width: 180px; }
.tools .menu[hidden] { display: none; }
.tools .menu button { text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 6px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.tools .menu button:hover { background: var(--soft); }
.pane-head label.chk { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink); white-space: nowrap; }

/* 1단계 감사 준비 — 검증 차이 (UI 표준 7장 2) */
.diffv { display: inline-block; background: #fde8e8; color: var(--bad); padding: 0 4px; border-radius: 4px; }
pre.log { margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 ui-monospace, Consolas, monospace; background: #f6f7f8; padding: 6px 8px; border-radius: 4px; }
/* REQ-007 로고·서명 (UI 표준 13장) — 머리글은 청록 바탕이라 로고는 흰 칩 위에, 기본 표시는 흰 바탕 청록 글자 */
.flogo { display: inline-flex; align-items: center; height: 26px; padding: 1px 4px; background: #fff; border-radius: 5px; flex: none; }
.flogo img { height: 22px; width: auto; max-width: 140px; display: block; }
.flogo-d { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; background: #fff; color: var(--brand); font-weight: 700; font-size: 13px; flex: none; }
.top .hwarn { border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 12px; border-radius: 10px; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
img.sig { height: 22px; width: auto; max-width: 90px; vertical-align: middle; margin: 0 3px; }
.sigc { white-space: nowrap; }
.imgpick { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ip-prev { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.ip-prev img { max-height: 56px; max-width: 280px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; border: 1px solid var(--line, #ddd); }
.adm-rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; grid-column: 1 / -1; }
.adm-rows input { width: 100%; }
@media (max-width: 700px) { .adm-rows { grid-template-columns: 1fr 1fr; } }
/* 계정조서 지시서 절차 표 (REQ-007 1장) */
table.procs td { vertical-align: top; }
table.procs tr.pt td { background: var(--soft); font-weight: 600; color: var(--brand); }
table.procs tr.need td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
table.procs .subs { color: var(--muted); font-size: 12px; margin-top: 2px; }
table.procs select.in, table.procs input.in, table.procs textarea.in { width: 100%; box-sizing: border-box; margin-bottom: 2px; }
.acct-pick { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 220px; overflow: auto; padding: 4px 0; }
table.procs { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }
table.procs th, table.procs td { padding: 4px 8px; border-bottom: 1px solid #eef2f3; text-align: left; white-space: normal; }
table.procs th { position: sticky; top: 0; background: #f4f8f9; font-weight: 600; color: #3b4d52; font-size: 12px; z-index: 1; }