/* 공통 셸 레이아웃 — T011 (UI-01~09)
 * GNB(상단) + LNB(좌측 메뉴) + 제품 문맥 바 + 콘텐츠. 토큰만 쓴다(tokens.css).
 */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

/* ── 버튼 ── */
.btn { border: 1px solid var(--line-2); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); padding: 5px 12px; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-info { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-info:hover { filter: brightness(1.08); color: #fff; }
.btn-primary { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 2px 8px; font-size: 12px; }

/* ── GNB ── */
.gnb {
  position: fixed; inset: 0 0 auto 0; height: var(--gnb-h); z-index: 30;
  display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
}
.gnb .brand { font-weight: 700; color: var(--brand); font-size: 15px; letter-spacing: -.2px; }
.gnb .brand small { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 11px; }
.gnb .spacer { flex: 1; }
.gnb .who { color: var(--muted); font-size: 12px; }
.gnb .who b { color: var(--text); }
.gnb .icon-btn { border: none; background: none; color: var(--muted); font-size: 15px; padding: 4px 6px; border-radius: var(--radius-sm); }
.gnb .icon-btn:hover { background: var(--surface-2); color: var(--brand); }

/* ── LNB ── */
.lnb {
  position: fixed; top: var(--gnb-h); bottom: 0; left: 0; width: var(--lnb-w); z-index: 20;
  overflow-y: auto; background: var(--surface); border-right: 1px solid var(--line); padding: 8px 0;
}
.lnb .grp { padding: 10px 14px 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.lnb a {
  display: flex; align-items: center; gap: 6px; padding: 7px 14px; color: var(--text-2); font-size: 13px;
  border-left: 3px solid transparent;
}
.lnb a:hover { background: var(--surface-2); }
.lnb a.on { background: var(--surface-2); border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
.lnb a .sheet { margin-left: auto; font-size: 10px; color: var(--muted); }

/* ── 제품 문맥 바 (PRD §3.3 — 탭 이동이 제품을 바꾸지 않는다) ── */
.ctx {
  position: fixed; top: var(--gnb-h); left: var(--lnb-w); right: 0; height: var(--ctx-h); z-index: 15;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.ctx .pname { font-weight: 700; }
.ctx .kv { color: var(--muted); font-size: 12px; }
.ctx .kv b { color: var(--text-2); font-weight: 600; }
.ctx .dirty { color: var(--danger); font-size: 12px; font-weight: 700; }

/* ── 콘텐츠 ── */
.main {
  position: absolute; top: calc(var(--gnb-h) + var(--ctx-h)); left: var(--lnb-w); right: 0; bottom: 0;
  overflow: auto; padding: 16px;
}
.main.no-ctx { top: var(--gnb-h); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.card h2 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card h2 .help { margin-left: auto; }
.note { color: var(--muted); font-size: 12px; line-height: 1.6; }
/* ★ 색을 **글자**에 입히지 않는다 — 팔레트의 상태 색은 배경용이라 흰 바탕에서 대비가 무너진다.
 * 실측: `--fail` #f34444 = 3.67:1 · `--warning` #fac60a = **1.60:1** (AA 요구 4.5:1).
 * 색은 왼쪽 띠로 남기고 글자는 읽히는 색으로 둔다 — 색만으로 뜻을 전하지 않게 되는 효과도 함께 얻는다. */
.lbz-err {
  color: var(--text); font-size: 12px; padding: 8px 8px 8px 10px;
  border-left: 3px solid var(--fail); background: var(--surface-2);
}
/* 초안·누락 안내 — 오류(lbz-err)와 구분한다. 필수값이 빈 것은 "잘못" 이 아니라 "아직" 이다(T034) */
.lbz-warn {
  color: var(--text); font-size: 12px; line-height: 1.6; font-weight: 600;
  padding-left: 10px; border-left: 3px solid var(--warning);
}
/* 지금 채워야 하는 칸 — 화면이 먼저 알려 준다(서버가 다시 막는다) */
.lbz-need { border-color: var(--fail) !important; background: color-mix(in srgb, var(--fail) 8%, transparent); }

table.kv { border-collapse: collapse; width: 100%; font-size: 12px; }
table.kv th, table.kv td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; }
table.kv th { color: var(--muted); width: 180px; font-weight: 600; background: var(--surface-2); }

/* ── 로그인 ── */
/* ★ `hidden` 속성이 display 를 **이긴다**.
 * 이 규칙이 없으면 `.login-wrap { display:flex }` 가 `hidden` 을 덮어써서, 대시보드를 보고 있어도
 * 로그인·비밀번호변경 폼이 **접근성 트리에 그대로 남는다**(스크린리더가 "아이디 입력" 을 읽는다).
 * AutoTest 접근성 검사가 대시보드에서 `login.mustChange` 문구의 대비를 지적해서 알았다 —
 * 숨겼다고 생각한 화면이 실제로는 숨겨지지 않았던 것이다. 한 곳에서 전역으로 막는다. */
[hidden] { display: none !important; }

/* ★ 작은 글자에 `--muted-2`(color-gray2 #909090)를 쓰지 않는다 — 흰 배경에서 **3.19:1** 이라
 * WCAG AA(4.5:1)에 못 미친다(AutoTest 접근성 검사 실측). 새 색을 만들지 않고 팔레트 안의
 * `--muted`(color-gray1 #606060, 7.0:1)로 한 단계 진하게 쓴다 — tokens.css 의 "임의 색상 금지".
 * 다크에서도 같다(#7c8698 은 4.46:1 로 경계, #a8b0bd 는 7.4:1). `--muted-2` 는 큰 글자·면에만 쓴다. */

.login-wrap { display: flex; align-items: center; justify-content: center; height: 100%; }
.login {
  width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.login h1 { margin: 0 0 4px; font-size: 18px; color: var(--brand); }
.login p.sub { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.login label { display: block; margin: 10px 0 4px; font-size: 12px; color: var(--muted); }
.login input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.login input:focus { outline: none; border-color: var(--brand); }
.login .btn-info { width: 100%; margin-top: 16px; padding: 9px; }
.login .msg { margin-top: 12px; color: var(--fail); font-size: 12px; min-height: 16px; }
.login .msg.ok { color: var(--success); }

/* ── "?" 도움말 (전 화면 공통 — 저장소 DoD) ── */
.help {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--muted);
  width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-size: 12px; font-weight: 700; padding: 0;
}
.help:hover { border-color: var(--brand); color: var(--brand); }
.help-pop {
  position: fixed; z-index: 60; width: 380px; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(16, 16, 16, .18); padding: 14px 16px;
}
.help-pop h3 { margin: 0 0 8px; font-size: 14px; color: var(--brand); }
.help-pop .close { position: absolute; top: 8px; right: 10px; border: none; background: none; color: var(--muted); font-size: 14px; }
.help-pop ul { margin: 6px 0; padding-left: 18px; }
.help-pop li { margin: 3px 0; line-height: 1.55; }
.help-pop .miss { color: var(--muted); font-style: italic; }

/* ── 시트(편집형 표) ── */
.sheet-host { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.lbz-sheet-del { cursor: pointer; color: var(--danger); font-weight: 700; }
/* 상단 보라 border — 디자인가이드 grid 규칙 */
.dhx_grid-header { border-top: 2px solid var(--brand) !important; }
.dhx_grid-header-cell { background: var(--surface-2) !important; color: var(--text-2) !important; font-weight: 600 !important; }

/* ── 접근성 ── */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── T016 업무 목록·상태 배지·입력 행 ── */
table.list { border-collapse: collapse; width: 100%; font-size: 12px; margin: 8px 0; }
table.list th, table.list td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; }
table.list thead th { color: var(--muted); font-weight: 600; background: var(--surface-2); border-top: 2px solid var(--brand); }
table.list tbody tr:hover { background: var(--surface-2); }
.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.row input, .row select { padding: 5px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 12px; }
.row input { min-width: 110px; }
/* 상태 배지 — 색으로만 구분하지 않는다(글자도 함께 바뀐다) */
/* ★ 상태 배지 — 팔레트 색을 **글자색이 아니라 배경색**으로 쓴다.
 *
 * 전에는 `color: var(--color04)` 처럼 상태 색을 글자에 입혔는데, 팔레트의 상태 색은
 * **배경용**이라 흰 바탕에서 대비가 무너졌다 — AutoTest 접근성 검사 실측으로
 * 결재완료(#75d701)는 **1.77:1**(AA 4.5:1 요구)이었다. 같은 파일의 `.lbz-state` 는
 * 처음부터 "색은 배경, 글자는 읽히는 색" 이었으니, 배지도 그 규약에 맞춘다.
 * 같은 상태를 같은 색으로 쓰게 되므로 화면 간 일관성도 함께 잡힌다. */
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--muted); background: var(--surface-2); }
.badge.st-draft { color: var(--text-2); background: var(--surface-2); }
.badge.st-in_review { background: var(--color03); color: var(--text); border-color: transparent; }   /* 검토 — 노랑 위 진한 글자 */
.badge.st-approved { background: var(--color09-aa); color: #fff; border-color: transparent; }        /* 결재완료 — lbz-state 와 같은 색 · 흰 글자 5.12:1 */
.badge.st-rejected { background: var(--color01-aa); color: #fff; border-color: transparent; }        /* 반려 — 흰 글자 6.22:1 */
.badge.st-superseded, .badge.st-cancelled { text-decoration: line-through; color: var(--text-2); }

/* ★ 본인 확인 대화상자 — `prompt()` 대체(T013-R).
 * `prompt()` 는 입력을 화면에 그대로 보여줘 비밀번호에 쓸 수 없다. */
.ask-bg {
  position: fixed; inset: 0; background: rgba(16, 16, 16, .45);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.ask {
  width: 380px; max-width: calc(100vw - 32px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.ask h3 { margin: 0 0 8px; font-size: 15px; color: var(--text); }
.ask input {
  width: 100%; margin: 10px 0 6px; padding: 8px 10px; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.ask .row { margin-top: 12px; }