/* JK.AI PLM — IA 재설계 와이어프레임 공통 스타일
   MES(Olix B안) 토큰계를 그대로 이식했다. 새로 만들지 않은 이유:
   MES 쪽 토큰은 이미 대비비를 실측해서 "칠하는 색"과 "글자 색"을 분리해 둔 상태다.
   여기서 색을 새로 고르면 그 검증을 처음부터 다시 해야 한다.
   출처: JK.AI.MES/src/JK.AI.MES.Web/src/app.css */
:root {
	--bg: #f5f6f9;
	--card: #fff;
	--ink: #1f2f3e;
	--ink2: #52526c;
	--muted: #646a72; /* 흰 5.46 / 페이지배경 5.05 / 파랑칩 4.83 — 세 배경 모두 AA */
	--line: #edf1f5;
	--line2: #e6eaef;
	--pri: #54a8fb;
	--pri-d: #2f8de6;
	--pri-soft: #e9f2fe;
	--focus: #1a6fc4;
	--focus-on-dark: #8ec5ff;
	/* 글자 전용 — 칠하는 색을 글자에 그대로 쓰면 2.5:1 로 안 읽힌다 */
	--pri-t: #1a6fc4;
	--pri-fill: #1a6fc4;
	--up-t: #256e39;
	--dn-t: #b3243a;
	--amber-t: #8a5a10;
	--slate: #eef1f6;
	--slate-ic: #5f6b78;
	--up: #3f9e57;
	--up-soft: #eaf4ec;
	--dn: #df5e70;
	--dn-soft: #fbecee;
	--amber: #cf8a2b;
	--amber-soft: #f7f0e2;
	--rail: #1b2a3a;
	--r: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
	font-family: 'Nunito Sans', 'Malgun Gothic', 'Segoe UI', system-ui, sans-serif;
	background: var(--bg);
	color: var(--ink);
	font-size: 13px;
	/* 한글은 기본값이면 글자 사이 아무 데서나 접힌다 — 「변경요청」이 「변경/요청」으로 찢어진다 */
	word-break: keep-all;
	overflow-wrap: break-word;
}
a { text-decoration: none; color: inherit; }
i.ti { line-height: 1; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ── 셸: 아이콘 레일 + 본문 ───────────────────────────── */
.app { display: flex; min-height: 100vh; }
.rail {
	width: 92px; background: var(--rail); position: sticky; top: 0; height: 100vh;
	flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding-top: 16px;
}
.rail .logo {
	width: 46px; height: 46px; border-radius: 12px; background: var(--pri); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; margin-bottom: 20px;
}
.rail a {
	width: 100%; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
	color: #8496a9; font-size: 10px; font-weight: 700; position: relative; text-align: center;
}
.rail a .ic { font-size: 20px; }
.rail a:hover { color: #cdd8e3; }
.rail a.on { color: #fff; }
.rail a.on::before {
	content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
	border-radius: 0 3px 3px 0; background: var(--pri);
}
.rail a.on .ic { color: var(--pri); }
.rail :focus-visible { outline-color: var(--focus-on-dark); }
.rail .spacer { flex: 1; }

/* 2단째 — 상단 탭(subnav).
   MES 와 동일하게 상단바 아래·본문 위에 가로로 놓는다.
   출처: JK.AI.MES/src/JK.AI.MES.Web/src/app.css 의 .subnav (수치 그대로).
   ⛔ 좌측 2단 패널이 아니다 — 세로 패널로 만들면 레일(92px) + 패널(208px)로
   가로를 300px 먹는다. BOM 표처럼 가로가 아쉬운 화면이 바로 눌린다. */
.subnav {
	background: #fff; border-bottom: 1px solid var(--line);
	display: flex; align-items: center; gap: 22px; padding: 0 26px; height: 50px;
	overflow-x: auto; position: sticky; top: 62px; z-index: 4;
}
.subnav a {
	font-size: 13px; font-weight: 700; color: var(--ink2); padding: 14px 0; white-space: nowrap;
	display: inline-flex; align-items: center; gap: 6px; /* 뱃지를 라벨과 같은 줄에 붙인다 */
}
.subnav a.on { color: var(--pri-t); border-bottom: 2.5px solid var(--pri); } /* 밑줄은 장식이라 밝은 브랜드 파랑 그대로 */
.subnav a:hover { color: var(--pri-t); }

/* 탭 건수 뱃지 — MES .subnav 에는 없다. 우리가 더한 것이다(2026-08-06 결정).
   ⛔ 색을 새로 고르지 않았다. 이미 대비비를 실측해 둔 쌍만 그대로 재사용한다 —
      기본 = .chip .cnt 와 같은 slate/ink2, 활성 = .st.info, hot = .st.bad.
      여기서 새 색을 고르면 그 세 쌍의 검증을 처음부터 다시 해야 한다.
   ⛔ hot 을 **색으로만** 가르지 않는다 — 적록색약에게 회색↔붉은색은 거의 같다.
      안쪽 테두리(inset)를 같이 넣어 색을 못 봐도 형태로 갈린다.
   ⛔ 숫자는 tabular-nums — 안 주면 1 과 7 의 폭이 달라 탭이 미세하게 흔들린다. */
.subnav a .n {
	min-width: 19px; height: 18px; padding: 0 5px; border-radius: 9px;
	background: var(--slate); color: var(--ink2);          /* 6.6:1 — AA */
	font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
	font-variant-numeric: tabular-nums;
}
.subnav a.on .n { background: var(--pri-soft); color: var(--pri-t); }   /* .st.info 와 동일 쌍 */
.subnav a .n.hot {
	background: var(--dn-soft); color: var(--dn-t);                      /* .st.bad 와 동일 쌍 */
	box-shadow: inset 0 0 0 1px #f0bcc4;
}

/* 화면에서만 숨기고 스크린리더에는 읽힌다. 「받은 결재 7」이 "무슨 7"인지 알려주는 단위. */
.sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 폴더 트리는 내비게이션이 아니라 콘텐츠다 — 탭으로 올리면 부서가 늘 때마다 탭이 늘어난다.
   본문 안 좌측 패널로 둔다(현행 DmsCategoryTree 와 같은 위치). */
.treepane { width: 194px; flex-shrink: 0; }
.treepane .grp { font-size: 10.5px; font-weight: 800; color: var(--muted); padding: 4px 10px 6px; }
.treepane a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink2); font-weight: 600; }
.treepane a:hover { background: #fff; }
.treepane a.on { background: var(--pri-soft); color: var(--pri-t); font-weight: 800; }
.treepane a .cnt { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted); }
.withtree { display: flex; gap: 16px; align-items: flex-start; }
.withtree > .grow { flex: 1; min-width: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top {
	height: 62px; background: #fff; border-bottom: 1px solid var(--line);
	display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 5;
}
.search {
	flex: 1; max-width: 440px; display: flex; align-items: center; gap: 10px; background: #f4f6f9;
	border: 1px solid var(--line2); border-radius: 24px; padding: 9px 16px; color: var(--muted); font-size: 13px;
}
.top .spacer { flex: 1; }
.tico {
	width: 36px; height: 36px; border-radius: 10px; background: var(--slate);
	display: flex; align-items: center; justify-content: center; color: var(--ink2); font-size: 16px; position: relative;
}
.tico .dot {
	position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
	background: var(--dn); border: 1.5px solid #fff;
}
.who { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.who .av {
	width: 32px; height: 32px; border-radius: 50%; background: var(--pri-fill); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
}
.body { padding: 20px 24px 40px; }

/* ── 공통 부품 ─────────────────────────────────────── */
.crumb { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.h1 { font-size: 19px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.h1 .tag {
	font-size: 10.5px; font-weight: 800; color: #fff; background: var(--slate-ic);
	padding: 3px 8px; border-radius: 5px;
}
.card { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); }
.card > .hd {
	padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 13.5px;
	display: flex; align-items: center; gap: 8px;
}
.card > .hd .spacer { flex: 1; }
.card > .bd { padding: 16px; }
.grid { display: grid; gap: 14px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }

.kpi { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r); padding: 14px 16px; }
.kpi .lab { font-size: 12px; color: var(--muted); font-weight: 700; }
.kpi .val { font-size: 27px; font-weight: 800; margin-top: 5px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .val .u { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.kpi .sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* 상태 칩은 절대 접히면 안 된다 — body 의 word-break:keep-all 이 어절 단위로 접어서
   「XREF 자식」 같은 두 어절 라벨이 두 줄이 된다. 칩이 접히면 표 행 높이가 들쭉날쭉해진다. */
.st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.st.ok { color: var(--up-t); background: var(--up-soft); } .st.ok::before { background: var(--up); }
.st.wait { color: var(--ink2); background: var(--slate); } .st.wait::before { background: var(--slate-ic); }
.st.warn { color: var(--amber-t); background: var(--amber-soft); } .st.warn::before { background: var(--amber); }
.st.bad { color: var(--dn-t); background: var(--dn-soft); } .st.bad::before { background: var(--dn); }
.st.info { color: var(--pri-t); background: var(--pri-soft); } .st.info::before { background: var(--pri); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tbl th {
	background: #fafbfc; text-align: left; padding: 9px 12px; font-size: 11.5px; color: var(--muted);
	font-weight: 800; border-bottom: 1px solid var(--line2); white-space: nowrap;
}
table.tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tr:hover td { background: #fafbfc; }
table.tbl td.num { text-align: right; }
.lnk { color: var(--pri-t); font-weight: 700; }

.btn {
	height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line2); background: #fff;
	font-size: 12.5px; font-weight: 700; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px;
}
.btn.pri { background: var(--pri-fill); border-color: var(--pri-fill); color: #fff; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
	height: 32px; padding: 0 13px; border: 1px solid var(--line2); border-radius: 17px; background: #fff;
	font-size: 12.5px; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
}
.chip.on { background: var(--pri-fill); color: #fff; border-color: var(--pri-fill); font-weight: 800; }
.chip .cnt { background: var(--slate); border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.chip.on .cnt { background: rgba(255, 255, 255, .22); color: #fff; }
.mut { color: var(--muted); font-size: 11.5px; }

/* 와이어프레임 주석 — 시안임을 숨기지 않는다 */
.note {
	border-left: 3px solid var(--pri); background: var(--pri-soft); border-radius: 0 8px 8px 0;
	padding: 11px 14px; font-size: 12.5px; color: var(--ink2); margin-bottom: 14px; line-height: 1.65;
}
.note b { color: var(--pri-t); }
.wf-badge {
	position: fixed; right: 14px; bottom: 14px; z-index: 200; background: var(--rail); color: #fff;
	border-radius: 20px; padding: 8px 15px; font-size: 11.5px; font-weight: 800; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}