/* ACP 콘솔 시안 버전 29 · 공통 스타일
   값 · 부품 계약 정본: 같은 폴더 DESIGN.md(앞머리 토큰 = 아래 :root)
   규칙: 70-변경구상/02-디자인컨셉/02_공통UX패턴과_권한원칙_v0.1.md
   브랜드 막대(.brandbar)는 기존 외형을 보존하고 본문 토큰을 물려받지 않는다 */

:root {
  --canvas: #F7F8FA; --surface: #FFFFFF; --surface-subtle: #F1F3F5;
  --ink: #1B1F24; --ink-muted: #48505B; --border: #D8DEE6; --border-control: #778391;
  /* 딜로이트 초록 계열 색 결정 2026-09-14(v0.1) · 개정 2026-09-14(v0.2) · 02-디자인컨셉/03_색체계_딜로이트초록_v0.1.md
     v0.2: --action을 로고 원색(H82, 올리브로 보임)에서 파생하지 않고 딜로이트가 함께 쓰는 초록 계열 값
     (#26890D·#046A38·#2C5234, 흔히 Green 5/6-7/8로 불림, 근거 §1)에서 그대로 가져왔다.
     --accent(#86BC25)은 로고 원색 그대로, 어두운 배경·진한 테두리와 짝지을 때만 비텍스트 표식으로 쓴다.
     --ink-muted/--unavailable은 AAA 7:1을 캔버스·흰 면·모든 옅은 배경에서 만족하도록 낮췄다(글자 크기 개정) */
  --brand-green: #86BC25; --accent: #86BC25;
  --action: #046A38; --action-hover: #185E36; --action-pressed: #2C5234; --on-action: #FFFFFF;
  /* 고른 줄 · 올린 줄 바탕. #E1F4EB → #E9F7F1(2026-09-17 · QA M-1): 막힌 줄 빗금을 얹은 채로 흐린 글자 7:1을 지키려고 한 단계 밝혔다.
     흰 바탕과의 차이는 1.145:1 → 1.103:1로 조금 줄지만, 고른 줄은 첫 칸 왼쪽 초록 막대(§표 .selected td:first-child)가 함께 알린다 */
  --selection: #E9F7F1; --focus: #005FCC;
  --success: #1B636A; --success-surface: #EDF7F7;
  --warning: #A15C00; --warning-surface: #FFF4DB;
  --danger: #B42318; --danger-surface: #FFF0EE;
  /* 증감 화살표 전용(70-변경구상/06-시안 컨셉안 N7 · BUILD_GUIDE K5, 2026-09-14) · 한국식: 증가 ▲ 빨강, 감소 ▼ 파랑, 배경 채움 없음
     --danger를 그대로 재사용(증가=위험이 아니라 방향 표시일 뿐이나, 대비 수치가 이미 충분해 새 빨강을 따로 만들지 않음).
     --surface #FFFFFF · --canvas #F7F8FA · --selection #E1F4EB 위에서 모두 4.5:1 이상(계산: 06-시안/contrast.py) */
  --delta-up: var(--danger);
  --delta-down: #1F5FBF;
  --draft: #6344CB; --draft-surface: #F1EDFF;
  --unavailable: #48505B;
  /* 쓸 수 없음 빗금 한 벌(2026-09-16 · 파생 P7 · S11): 카드 · 초안 행 · 막힌 단계 칸 · 못 쓰는 권한 타일이 같은 무늬를 쓴다.
     좁은 칸(줄임 단계 표시 · 칩)은 --hatch-sm. 페이지가 자기 그러데이션을 따로 적지 않는다 */
  --hatch: repeating-linear-gradient(135deg, var(--surface-subtle) 0 6px, var(--surface) 6px 12px);
  --hatch-sm: repeating-linear-gradient(135deg, var(--surface-subtle) 0 4px, var(--surface) 4px 8px);
  /* 같은 무늬의 비치는 판(2026-09-16): 막힌 목록 행처럼 아래 바탕색(고른 행 · 올린 행)이 살아 있어야 하는 자리에 background-image로 얹는다.
     농도 .03 → .025(2026-09-17 · QA M-1 · P7-l · P5): 고른 줄 · 올린 줄 바탕(--selection) 위에 얹혀도 흐린 글자 대비가 7:1 아래로 안 떨어지게 낮췄다.
     실측(흐린 글자 #48505B · 브라우저가 쓰는 알파 6/255 기준) — 고른 줄 빗금 띠 위 7.08:1 · 고른 줄 바탕 위 7.40:1 · 흰 줄 빗금 띠 위 7.82:1 ·
     줄무늬 띠와 바탕 사이 1.045:1(무늬는 보인다). 옛 값(#E1F4EB · .03)은 고른 줄에서 6.75:1이라 무늬를 걷고 있었다 */
  --hatch-over: repeating-linear-gradient(135deg, rgba(31, 41, 55, .025) 0 4px, transparent 4px 8px);
  --data-main: #26890D; --data-secondary: #356B8C; --data-tertiary: #4A4F57; --data-other: #7C8794;
  --r-small: 4px; --r-control: 8px; --r-panel: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 40px;
  --brand-h: 60px;
  --font: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --overlay: 0 8px 24px rgba(27, 31, 36, .14);
  --dragging: 0 6px 16px rgba(27, 31, 36, .18);
  --path-done: #CDEADB; --path-now-sub: #E1F4EB;
  --drawer-w: 400px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: break-word; }
/* 한글은 낱말 단위로만 꺾는다(V1). overflow-wrap: anywhere는 표 칸의 최소 폭을 글자 하나로 줄여 '테스|트|작성'을 만든다.
   긴 코드 · 번호 · 고정폭 글자에만 anywhere를 허용한다 */
table, th, td, .chip, .drawer, .modal, .pop, .path-detail { word-break: keep-all; overflow-wrap: normal; }
.mono, code, kbd, .code, .break-anywhere { overflow-wrap: anywhere; word-break: normal; }
a { color: var(--action); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; }
.page, .wrap { min-width: 0; }
.muted { color: var(--ink-muted); }
.num { text-align: right; white-space: nowrap; }

/* ── 브랜드 막대 (보존) ─────────────────────────────── */
.brandbar { position: sticky; top: 0; z-index: 80; min-height: var(--brand-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; background: #000; color: #fff; font-family: "Open Sans", "Malgun Gothic", system-ui, sans-serif; }
.brandbar .brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.brandbar .wordmark { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.brandbar .product { font-size: 13px; font-weight: 600; color: #EFEFEC; margin-left: 4px; }
.brandbar .tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px; border: 1px solid #4E535B; border-radius: var(--r-control); background: transparent; color: #fff; cursor: pointer; }
.bb-btn:hover { background: #1B1D21; border-color: #8A9099; }
.bb-btn svg { width: 18px; height: 18px; }
.bb-count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: #fff; color: #000; font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; }
.bb-who { text-align: left; line-height: 1.25; }
.bb-who b { display: block; font-size: 13px; }
.bb-who span { display: block; font-size: 13px; color: #C9CDD3; }
.bb-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #EFEFEC; color: #000; font-size: 13px; font-weight: 700; }

/* ── 왼쪽·오른쪽 사이드바: 버전 28 그대로 (사용자 결정 2026-09-13) ──────────────
   값은 버전 28 토큰을 두 사이드바 안에만 둔다. 본문은 getdesign 값을 쓴다.
   원본: _v28/index.html 95~157행(전역 내비) · 369~410행(상세 드로어)
   바꾼 곳: 약칭 글자 대신 아이콘(버전 28과 같음) · 12px 미만 글자와 대문자 변환은 검사 규칙에 맞춰 12px·보통 글자로 */
.sidenav, .drawer, .handle, .scrim {
  --c-primary: #86BC25; --c-primary-dark: #5A8019; --c-primary-light: #F4F8EC;
  --c-canvas: #FFFFFF; --c-panel: #F7F7F5; --c-panel-2: #EFEFEC;
  --c-ink: #14161A; --c-text: #6B7079; --c-blocked: #4E535B; --c-rule: #DFE0E0; --c-rule-mid: #C9CAC7;
  --s-1: 6px; --s-2: 12px; --s-3: 18px; --s-4: 24px; --r-chip: 2px; --r-control: 4px;
  font-family: "Open Sans", "Malgun Gothic", "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
}
:root { --nav-rail: 52px; --nav-open: 236px; --topbar-h: 60px; }

/* 전역 내비 · 고정하면 자리를 차지하며 펼쳐져 있고, 풀면 좁은 띠로 접혀 마우스를 올릴 때만 덮어 펼친다 */
.shell { padding-left: var(--nav-rail); transition: padding-left .16s ease-out; }
body.nav-pinned .shell { padding-left: var(--nav-open); }
.sidenav {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 45;
  width: var(--nav-rail); overflow: hidden;
  background: var(--c-canvas); border-right: 1px solid var(--c-rule);
  display: flex; flex-direction: column;
  transition: width .16s ease-out, box-shadow .16s ease-out;
}
body.nav-pinned .sidenav { width: var(--nav-open); }
body:not(.nav-pinned) .sidenav:hover,
body:not(.nav-pinned) .sidenav.nav-keyboard { width: var(--nav-open); box-shadow: 6px 0 18px rgba(20, 22, 26, .12); }
.nav-head { display: flex; align-items: center; gap: var(--s-1); padding: 8px 7px; border-bottom: 1px solid var(--c-rule); min-height: 44px; }
.nav-toggle {
  flex: 0 0 auto; width: 38px; height: 30px; display: grid; place-items: center;
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  border: 1px solid var(--c-rule-mid); border-radius: var(--r-control);
  background: var(--c-canvas); color: var(--c-ink);
}
.nav-toggle:hover { border-color: var(--c-ink); }
body.nav-pinned .nav-toggle { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-canvas); }
.nav-body { overflow-y: auto; overflow-x: hidden; padding-bottom: var(--s-4); }
.nav-group { border-bottom: 1px solid var(--c-rule); }
.nav-group > summary {
  display: flex; align-items: center; gap: var(--s-2); cursor: pointer; list-style: none;
  padding: 9px 7px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--c-ink);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: var(--c-panel); }
.nav-icon { flex: 0 0 38px; height: 28px; display: grid; place-items: center; background: transparent; color: var(--c-blocked); border-radius: var(--r-control); }
.nav-icon svg { width: 20px; height: 20px; display: block; }
.nav-group[data-here] .nav-icon { background: var(--c-ink); color: var(--c-canvas); }
.nav-title { overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; }
.nav-title .chip { min-height: 18px; padding: 0 5px; font-family: var(--font); }
.nav-caret { margin-left: auto; display: flex; align-items: center; color: var(--c-ink); transform: rotate(-90deg); transition: transform .14s ease-out; }
.nav-caret svg { width: 20px; height: 20px; display: block; }
.nav-group[open] .nav-caret { transform: none; }
.nav-group > summary:hover .nav-caret { color: var(--c-primary-dark); }
.nav-list { padding: 0 7px 8px 45px; display: flex; flex-direction: column; gap: 1px; }
.nav-link { font-size: 13px; color: var(--c-text); text-decoration: none; padding: 5px 8px; border-radius: var(--r-chip); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link:hover { background: var(--c-panel); color: var(--c-ink); }
.nav-link:focus-visible, .nav-group > summary:focus-visible { outline: 2px solid var(--c-primary-dark); outline-offset: -2px; }
.nav-link[aria-current="page"] { background: var(--c-primary-light); color: var(--c-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--c-primary); }
.nav-note { padding: 0 7px 10px 45px; font-size: 13px; color: var(--c-text); white-space: normal; }
body:not(.nav-pinned) .sidenav:not(:hover):not(.nav-keyboard) .nav-title,
body:not(.nav-pinned) .sidenav:not(:hover):not(.nav-keyboard) .nav-caret,
body:not(.nav-pinned) .sidenav:not(:hover):not(.nav-keyboard) .nav-list,
body:not(.nav-pinned) .sidenav:not(:hover):not(.nav-keyboard) .nav-note { display: none; }

.wrap { padding-inline: 20px; padding-block: 28px 96px; }
/* 본문 최대 폭 R3 · P7 (2026-09-16 개정 · 사용자 지적 "모든 페이지에 오른쪽 여백이 이렇게 넓은데 뭔가 어색하지 않냐 15인치 노트북이나 모니터로 보는것도 고려를 해야지").
   목록 · 표 · 운영 페이지는 화면 폭을 채우고(좌우 여백 토큰 20 유지) 1680px에서 멈춘 뒤 본문 칸 가운데에 둔다.
   설정 · 폼 · 단일 과업 화면(ACP.page({width: "form"}))은 880px을 가운데에 둔다. 머리 · 필터 줄 · 섹션 머리 · 표가 이 한 칼럼 폭을 같이 쓴다.
   드로어가 본문을 미는 1280 이상에서는 .wrap 오른쪽 여백이 늘어 이 칼럼이 그만큼 줄어든다.
   PW1(09-16 "또 늘어지거나 그러면 보기가 싫으니까"): 최대 1600(Carbon 최대 격자 1584와 같은 급) · 가운데.
   PW2: 넓어진 폭은 부품을 늘리는 데 쓰지 않고 배치를 바꾸는 데 쓴다. 판단은 뷰포트가 아니라 본문 칸 폭(컨테이너 page)으로 한 벌만 —
   좁음 < 760 · 보통 760~1279 · 넓음 ≥ 1280. 드로어가 열려 칼럼이 좁아지면 저절로 좁은 배치로 돌아간다. 페이지는 따로 @media를 만들지 않는다 */
#acp-page { max-width: 1600px; margin-inline: auto; container: page / inline-size; }
#acp-page[data-width="form"] { max-width: 880px; }
/* PW5 넓음 구간에서만 짧고 서로 관련된 보조 블록 둘을 옆에 둔다(셸 ui.pair). 주 표 · 목록은 나누지 않는다 */
/* 앞 블록이 좁은 쪽(2 : 3). divided는 한 카드 안 두 블록 — 쌓이면 위 구분선, 옆에 두면 왼쪽 구분선 */
.page-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; min-width: 0; }
.page-pair > * { min-width: 0; margin-top: 0 !important; }
.page-pair.divided { gap: 12px; }
.page-pair.divided > * + * { padding-top: 12px; border-top: 1px solid var(--border); }
@container page (min-width: 1280px) {
  .page-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .page-pair.divided { gap: 0; }
  .page-pair.divided > :first-child { padding-right: 32px; }
  .page-pair.divided > * + * { padding-top: 0; border-top: 0; padding-left: 32px; border-left: 1px solid var(--border); }
}
/* PW6 글 · kv: 설명 글은 72자 폭까지 · 페이지 kv는 레이블 160 고정 · 값 560까지(드로어 · 팝업 kv는 112 레이블 그대로) */
#acp-page :is(p, .note, .head-desc):not(td *, th *, .kpi *) { max-width: 72ch; }
#acp-page dl.kv { grid-template-columns: 160px minmax(0, 560px); }

/* 상세 드로어 · 넓은 화면에서는 덮지 않고 본문을 민다. 닫혀 있으면 오른쪽 가장자리에 손잡이가 남는다 */
.drawer {
  position: fixed; top: var(--topbar-h); right: 0; z-index: 60;
  width: var(--drawer-w); max-width: 100vw; height: calc(100dvh - var(--topbar-h)); overflow-y: auto;
  background: var(--c-canvas); border-left: 3px solid var(--c-primary);
  box-shadow: -10px 0 28px rgba(20, 22, 26, .13);
  transform: translateX(100%); transition: transform .18s ease-out; visibility: hidden;
  color: var(--ink);
}
body.drawer-open .drawer { transform: none; visibility: visible; }
.drawer:not(.ready) { transition: none; }
.scrim { position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 55; background: rgba(20, 22, 26, .28); border: 0; display: none; }
body.drawer-open .scrim { display: block; }
/* 1280 이상: 드로어가 본문을 민다(덮지 않는다). 그 아래: 덮고 뒤를 어둡게 한다(기획안 3.5).
   처음부터 열린 드로어는 밀린 상태로 바로 그린다(움직임은 첫 그림 뒤에만) */
@media (min-width: 1280px) {
  body.drawer-ready .wrap { transition: padding-right .18s ease-out; }
  body.drawer-open .wrap { padding-right: calc(var(--drawer-w) + 24px); }
  body.drawer-open .scrim { display: none; }
}
.handle {
  position: fixed; right: 0; top: calc(var(--topbar-h) + 36px); z-index: 50;
  width: var(--handle-w); box-sizing: border-box;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--c-ink); color: var(--c-canvas); border: 0;
  border-radius: var(--r-control) 0 0 var(--r-control); padding: 10px 0;
  writing-mode: vertical-rl; letter-spacing: .04em;
  box-shadow: -4px 0 12px rgba(20, 22, 26, .16);
}
.handle[hidden], body.drawer-open .handle { display: none; }
/* 손잡이가 보이는 동안 본문 오른쪽에 손잡이 폭만큼 비워 둔다 — 머리 행동 · 표 오른쪽 끝을 덮지 않는다 */
:root { --handle-w: 44px; }
body:not(.drawer-open):has(#handle:not([hidden])) .wrap { padding-right: calc(var(--handle-w) + 12px); }
.panel-head { padding: var(--s-3) var(--s-3) var(--s-2); border-bottom: 1px solid var(--c-rule); position: relative; }
.panel-close { position: absolute; top: 12px; right: 12px; font: inherit; font-size: 18px; line-height: 1; width: 28px; height: 28px; border: 1px solid var(--c-rule-mid); border-radius: var(--r-control); background: var(--c-canvas); color: var(--c-text); cursor: pointer; }
.panel-close:hover { border-color: var(--c-ink); color: var(--c-ink); }
.panel-axis { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--c-text); }
.panel-name { font-size: 20px; font-weight: 700; line-height: 1.25; margin-top: 1px; word-break: keep-all; padding-right: 36px; }
.panel-path { font-size: 13px; color: var(--c-text); margin-top: 2px; }
.panel-body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); font-family: var(--font); }
.panel-body .section-title { margin: 4px 0 -8px; font-size: 13px; font-weight: 600; }

@media (max-width: 760px) {
  :root { --topbar-h: 104px; --brand-h: 104px; --handle-w: 32px; }
  /* 좁은 폭: 브랜드 한 줄 · 도구 한 줄로 접어 막대 높이(104px) 안에 넣는다 — 도구가 화면 밖으로 밀리지 않게 */
  .brandbar { flex-wrap: wrap; align-content: center; row-gap: 8px; padding-inline: 16px; }
  .brandbar .brand { flex: 1 0 100%; }
  body:not(.drawer-open):has(#handle:not([hidden])) .wrap { padding-right: calc(var(--handle-w) + 8px); }
}

/* ── 머리 셋줄 ─────────────────────────────────────── */
.head { display: grid; gap: 4px; margin-bottom: 20px; }
.head-path { font-size: 13px; color: var(--ink-muted); }
/* 제목 줄: 왼쪽 제목 · 오른쪽 끝 페이지 행동 (N19 · UXR-01). 좁으면 행동이 제목 아래로 내려가도 메타 줄보다 위에 있다 */
.head-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.head-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.head-title h1 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.3; }
.head-desc { margin: 0; font-size: 13px; color: var(--ink-muted); }
.head-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.head-meta b { color: var(--ink); font-weight: 600; }
/* 할 일 줄: 상자 없이 메타 줄 아래 한 줄. 항목은 작은 테두리 알약 링크(밑줄 없음 · 끝에 ›) */
.head-todo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 14px; }
.head-todo .label { font-size: 13px; font-weight: 700; color: var(--ink); margin-right: 2px; }
.head-todo a { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 10px 2px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--action); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; max-width: 100%; }
.head-todo a::after { content: "›" / ""; font-size: 16px; line-height: 1; }
.head-todo a:hover { background: var(--surface-subtle); color: var(--action-pressed); text-decoration: none; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.head-actions .primary { order: 99; }

/* ── 칩 ─────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 3px 10px; border: 1px solid var(--border-control); border-radius: var(--r-small); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip svg { width: 12px; height: 12px; }
.chip.beta { border-color: var(--ink-muted); color: var(--ink-muted); background: var(--surface); letter-spacing: 0; }
.chip.over { border-color: var(--danger); background: var(--danger-surface); color: var(--danger); }
.chip.forecast, .chip.near, .chip.warn { border-color: var(--warning); background: var(--warning-surface); color: var(--warning); }
.chip.within { border-color: var(--border); color: var(--ink-muted); }
.chip.draft { border-color: var(--draft); background: var(--draft-surface); color: var(--draft); }
.chip.ok { border-color: var(--success); background: var(--success-surface); color: var(--success); }
.chip.unavail, .chip.restricted, .chip.uncollected { border-style: dashed; border-color: var(--unavailable); color: var(--unavailable); background: var(--surface-subtle); }
.chip.noauth { border-color: var(--unavailable); color: var(--unavailable); background: var(--hatch-sm); }
.chip.action { border-color: var(--action); color: var(--action); }

/* 요청 결과 상태 칩 (N23 · 공통 5장). 반려 · 적용 실패는 위험 채움, 기한 지남은 주의 채움. 기호와 말을 함께 쓴다 */
.chip.rs { gap: 4px; }
.chip.rs-wait { border-color: var(--action); background: var(--selection); color: var(--action-pressed); }
.chip.rs-info { border-color: var(--border-control); background: var(--surface); color: var(--ink); }
.chip.rs-ok { border-color: var(--success); background: var(--success-surface); color: var(--success); }
.chip.rs-bad { border-color: var(--danger); background: var(--danger); color: var(--on-action); font-weight: 700; }
.chip.rs-warn { border-color: var(--warning); background: var(--warning); color: var(--on-action); font-weight: 700; }
.chip.rs-neutral { border-color: var(--border-control); border-style: dashed; background: var(--surface-subtle); color: var(--ink-muted); }
.rs-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.rs-who { font-size: 13px; color: var(--ink-muted); }
.rs-note { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; color: var(--ink); }
.notice-status { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
/* 증감 화살표(N7 · K5): 배경 채움 없이 글자 색만. .flat("변화 없음"·0)은 본문 잉크로 중립 유지 */
.delta { font-weight: 600; white-space: nowrap; color: var(--ink); }
.delta.up { color: var(--delta-up); }
.delta.down { color: var(--delta-down); }
.delta.flat { color: var(--ink); }
/* 증감(ui.delta): 기호만 증감색, 숫자는 먹색(V12 · QA A-H4). 기호와 숫자는 같은 크기(바닥 13px). 기본은 .strong(굵게), quiet는 보통 굵기 */
.delta-quiet { white-space: nowrap; color: var(--ink); font-weight: 400; font-size: max(13px, 1em); }
.delta-quiet.strong { font-weight: 600; }
.delta-quiet .delta { font-size: 1em; }

/* ? 도움말 (N23): 모달이 아닌 작은 설명 창 */
.help { display: inline-flex; align-items: center; vertical-align: middle; }
.help-btn { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; margin-left: 4px; padding: 0; border: 1px solid var(--border-control); border-radius: 50%; background: var(--surface); color: var(--ink-muted); font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.help-btn:hover, .help-btn[aria-expanded="true"] { border-color: var(--action); color: var(--action); }
.help-pop { position: fixed; z-index: 120; max-width: 320px; padding: 10px 12px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--surface); color: var(--ink); box-shadow: var(--overlay); font-size: 14px; font-weight: 400; line-height: 1.6; text-align: left; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.help-pop[hidden] { display: none; }
.help-pop .hp { display: block; }
.help-pop .hp + .hp { margin-top: 6px; }
/* 섹션 ? 하나에 모은 용어 설명(D2): 용어 이름 굵게 · 앞 덩어리와 띄움. 길면 설명 창 안에서 스크롤 */
.help-pop { max-height: min(70vh, 520px); overflow-y: auto; }
.help-pop .hp.hp-term { margin-top: 12px; font-weight: 700; }
.help-pop .hp.hp-term:first-child { margin-top: 0; }
.section-head .section-title { display: flex; align-items: center; gap: 2px; min-width: 0; }
.section-head .section-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ── 단추 · 입력 ───────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border-radius: var(--r-control); border: 1px solid var(--border-control); background: var(--surface); color: var(--action); font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--action); }
.btn.primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
.btn.primary:hover { background: var(--action-hover); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-action); }
.btn.small { min-height: 34px; padding: 4px 10px; font-size: 15px; }
/* 꺼진 단추는 가리켜도 기본 단추 초록이 돌아오지 않는다 */
.btn[disabled], .btn[aria-disabled="true"], .btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--surface-subtle); border-color: var(--border); color: var(--ink-muted); cursor: not-allowed; }
.why { font-size: 13px; color: var(--ink-muted); }
.field { display: grid; gap: 4px; }
.field > label, .field > .label { font-size: 15px; font-weight: 600; }
input[type="text"], input[type="number"], select, textarea { min-height: 40px; padding: 8px 10px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--surface); }
textarea { min-height: 72px; resize: vertical; }

/* ── 패널 · 표 · 탭 ────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 16px; }
.panel + .panel, .section + .section { margin-top: 16px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.panel-head .sub { font-size: 13px; color: var(--ink-muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.table-wrap { position: relative; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap > table.tbl { min-width: 100%; }
.table-wrap .tbl th:first-child, .table-wrap .tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.table-wrap .tbl tr.selected td:first-child { background: var(--selection); box-shadow: inset 3px 0 0 var(--accent), inset 5px 0 0 var(--action-pressed); }
.table-wrap .tbl tr.total td:first-child { background: var(--surface-subtle); }
table.tbl { width: 100%; border-collapse: collapse; background: var(--surface); }
.tbl th { font-size: 15px; font-weight: 600; color: var(--ink-muted); padding: 8px 12px; border-bottom: 1px solid var(--border-control); white-space: nowrap; background: var(--surface); }
/* UXR-18 · 4C: 표 머리(th)는 어디서나 가운데 정렬(숫자 열 th.num도 가운데), 칸 값은 자기 정렬(숫자 td.num 오른쪽 · 글자 왼쪽)을 그대로 쓴다.
   사용자 최종 결정 2026-09-14 "모든 표 가운데 정렬"(같은 날 값과 같은 쪽 안을 거쳐 되돌림). 열 폭 고정(colgroup)은 유지.
   .tbl이 아닌 표(.mini-tbl · .meter 등)도 이 규칙 하나로 맞춘다. 단계 상세 표도 .tbl.compact를 그대로 쓴다(N27). 페이지는 th에 text-align을 다시 두지 않는다.
   2026-09-16(P7-c): `.tbl th.col-act`가 특이도로 이 규칙을 이겨 limit · automation 표 머리만 오른쪽이 됐다. 통로를 막으려고 !important로 못 박는다 — 어떤 부품 · 페이지 규칙도 th 정렬을 바꾸지 못한다.
   2026-09-16(P7-h · P7-c): th 정렬을 적는 곳은 아래 한 줄뿐이다. 셸 · 페이지 어디든 th에 text-align을 새로 쓰면 check_mock의 check_th_align이 실패시킨다 — !important에 가려 안 먹는 선언이 남아 뜻과 화면이 어긋나던 일을 막는다 */
table th, table th.num { text-align: center !important; }
table td.num { text-align: right; }
/* 표 밀도(사용자 지적 2026-09-15 "여백이 너무 많다"): 칸 여백 8px 12px가 기본(옛 .compact 값). 행 최소 높이 48px(컨셉 3.1)은 td height로 지킨다 — 표 칸에서 min-height는 먹지 않는다 */
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; height: 48px; font-size: 15px; }
.tbl tr.selected td { background: var(--selection); }
.tbl tr.total td { font-weight: 600; background: var(--surface-subtle); }
/* 행 전체 클릭(N12 개정 · 공통 §5 '행과 드로어'): 누를 수 있는 행은 옮기지 않고 색만 옮긴다(크기 변화 없음) */
tr[data-req-row], [data-row-open] { cursor: pointer; transition: background-color .12s; }
/* 초점만으로는 행을 칠하지 않는다 — 상세를 닫고 초점이 이름 단추로 돌아와도 초록이 남지 않게(초점은 단추의 초점 테두리로 보인다 · 사용자 지적 2026-09-14) */
.tbl tr[data-req-row]:hover td,
.tbl tr[data-row-open]:hover td { background: var(--selection); }
.table-wrap .tbl tr[data-req-row]:hover td:first-child,
.table-wrap .tbl tr[data-row-open]:hover td:first-child { background: var(--selection); }
@media (prefers-reduced-motion: reduce) { tr[data-req-row], [data-row-open] { transition: none; } }
.tbl .name-btn.mono, dl.kv dd.mono { white-space: nowrap; }
.tbl .name-btn { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 600; cursor: pointer; text-align: left; }
.tbl .name-btn:hover { color: var(--action); text-decoration: underline; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tab { min-height: 40px; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--action-pressed); border-bottom-color: var(--action); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.seg { display: inline-flex; border: 1px solid var(--border-control); border-radius: var(--r-control); overflow: hidden; }
.seg button { min-height: 36px; padding: 6px 12px; border: 0; background: var(--surface); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button[aria-pressed="true"] { background: var(--selection); color: var(--action-pressed); font-weight: 600; }

/* ── 두 축 카드 · 막대 ─────────────────────────────── */
.axis-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.axis { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 16px; }
.axis-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.axis-label { font-size: 14px; font-weight: 600; }
.axis-value { font-size: 28px; font-weight: 600; line-height: 1.2; margin-top: 4px; }
.axis-value small { font-size: 15px; font-weight: 400; color: var(--ink-muted); }
.axis-lines { display: grid; gap: 2px; margin-top: 8px; font-size: 14px; max-width: 520px; }   /* PW4 · PW6 넓은 카드에서도 레이블과 값이 멀어지지 않게 */
.axis-lines .row { display: flex; justify-content: space-between; gap: 12px; }
.bar { position: relative; height: 12px; margin: 12px 0 18px; max-width: 520px; }   /* PW7 막대 520까지 */
.bar .track { position: absolute; inset: 0; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 2px; }
.bar .used { position: absolute; left: 0; top: 0; bottom: 0; background: var(--data-main); border-radius: 2px 0 0 2px; }
.bar .used.over { background: var(--danger); }
.bar .fc { position: absolute; top: 5px; height: 0; border-top: 2px dashed var(--ink-muted); }
.bar .limit { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.bar .limit-label { position: absolute; top: 14px; transform: translateX(-50%); font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.mini-bar { position: relative; display: block; height: 8px; min-width: 96px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 2px; }
.mini-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--data-main); }
.mini-bar i.over { background: var(--danger); }
.mini-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }

/* ── 책임 한 줄 · 판 머리 ─────────────────────────── */
.resp { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface-subtle); font-size: 13px; }
.resp span b { font-weight: 600; color: var(--ink); }
.resp .restricted { color: var(--unavailable); font-style: normal; }
/* 기준 시각은 이름 + 값이 아니라 페이지 머리 메타 줄과 같은 `MM-DD HH:MM 기준` 한 덩어리다(2026-09-17 P-DATE-1) — 머리와 같은 흐린 글자 */
.resp .resp-asof { color: var(--ink-muted); }
/* .resp-brief는 2026-09-17(QA M-2)에 없앴다 — 드로어 책임 · 기준 한 줄은 .resp 한 모양이다 */
.rev { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.rev .draft { color: var(--draft); font-weight: 600; }

/* ── 빈 상태 · 알림 줄 ─────────────────────────────── */
.empty { padding: 20px 16px; border: 1px dashed var(--border-control); border-radius: var(--r-control); background: var(--surface); color: var(--ink-muted); max-width: 70ch; }
.empty b { color: var(--ink); display: block; margin-bottom: 4px; }
.empty .empty-action { margin-top: 10px; }
.note { font-size: 13px; color: var(--ink-muted); }
.blocked-draft { border: 1px dashed var(--unavailable) !important; background: var(--hatch) !important; }

/* ── 떠 있는 메뉴 · 알림 패널 · 토스트 ─ */
.pop { position: fixed; top: calc(var(--brand-h) - 4px); right: 16px; z-index: 90; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--overlay); padding: 12px; font-family: var(--font); }
.pop[hidden] { display: none; }
.pop-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.pop-sub { font-size: 13px; color: var(--ink-muted); }
.person { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: var(--r-control); background: none; text-align: left; cursor: pointer; }
.person:hover, .person:focus-visible { background: var(--surface-subtle); }
.person[aria-current="true"] { background: var(--selection); }
.person .meta { display: block; font-size: 13px; color: var(--ink-muted); }
.pop-account { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; padding: 4px 8px; font-size: 13px; }
.pop-account .avatar { min-width: 28px; min-height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-subtle); font-size: 13px; font-weight: 700; }
.pop-account .meta { display: block; font-size: 13px; color: var(--ink-muted); }
.pop-todo { margin: 0 0 8px; }
#bell-pop { width: min(480px, calc(100vw - 24px)); right: 12px; padding: 0; display: flex; flex-direction: column; max-height: calc(100dvh - var(--brand-h) - 16px); overflow: hidden; }
#bell-pop[hidden] { display: none; }
.bell-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; flex: none; }
.bell-heading { display: flex; align-items: baseline; gap: 10px; }
#bell-title { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 700; }
#bell-unread { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.bell-actions { display: flex; align-items: center; gap: 8px; }
.bell-actions button { border: 0; background: transparent; cursor: pointer; min-height: 40px; color: var(--action); font-size: 14px; white-space: nowrap; }
.bell-actions button:disabled { color: var(--ink-muted); cursor: default; }
#bell-close { width: 36px; padding: 7px; color: var(--ink); }
#bell-close svg { display: block; width: 22px; height: 22px; }
#bell-tabs { flex: none; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
#bell-tabs .tab { flex: none; white-space: nowrap; min-height: 44px; padding: 9px 12px; font-size: 14px; }
#bell-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.notice { position: relative; border-bottom: 1px solid var(--border); background: var(--surface); }
.notice:last-child { border-bottom: 0; }
.notice.unread { background: var(--surface); }
.notice-primary { display: grid; grid-template-columns: 6px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px 20px; width: 100%; box-sizing: border-box; text-align: left; border: 0; border-radius: 0; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; font-family: inherit; }
.notice-primary:hover { background: var(--surface-subtle); color: var(--ink); text-decoration: none; }
.notice-primary:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; background: var(--surface-subtle); }
.notice-dot { height: 6px; width: 6px; margin-top: 7px; border-radius: 50%; background: transparent; }
.notice.unread .notice-dot { background: var(--action); }
.notice-content { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.notice-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 20px; color: var(--ink-muted); font-size: 13px; line-height: 1.4; }
.notice-meta > :last-child { flex: none; }
.notice-lead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.notice-event { display: inline-flex; flex: none; }
/* 알림 패널 안에서만 상태 칩을 작게(글자는 13px 바닥). 채움 · 색은 공통 칩 그대로 */
.notice-event .rs { min-height: 20px; padding: 0 6px; gap: 3px; line-height: 18px; }
.notice-deadline { display: inline-flex; align-items: center; font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.notice-deadline .dday { font-size: 13px; }
.notice-title { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.notice.unread .notice-title { font-weight: 650; }
.notice-detail { color: var(--ink-muted); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.notice-secondary { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: -4px 20px 16px 38px; }
.notice-secondary a { font-size: 14px; line-height: 1.5; }
.bell-empty { padding: 48px 20px; text-align: center; color: var(--ink-muted); font-size: 15px; }
.person .avatar { min-width: 28px; min-height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-subtle); font-size: 13px; font-weight: 700; }
.pop hr { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
@media (max-width: 480px) {
  .bell-header { padding: 14px 12px 8px; gap: 4px; }
  .bell-heading { gap: 6px; }
  .bell-actions { gap: 2px; }
  #bell-tabs { padding: 0 8px; }
  #bell-tabs .tab { padding-inline: 10px; }
  .notice-primary { padding: 14px 14px; gap: 10px; }
}
/* 토스트: 오른쪽 위 종 아래 (UXR-12 · C5) */
.toast { position: fixed; top: calc(var(--topbar-h) + 8px); right: 16px; z-index: 95; display: flex; align-items: center; gap: 8px; max-width: min(440px, calc(100vw - 32px)); padding: 10px 12px 10px 14px; border: 1px solid var(--ink); border-radius: var(--r-control); background: var(--ink); color: var(--on-action); font-size: 14px; box-shadow: var(--overlay); }
.toast.error { background: var(--danger-surface); border-color: var(--danger); color: var(--danger); font-weight: 600; }
.toast-mark { flex: 0 0 auto; }
.toast-text { flex: 1 1 auto; }
.toast-x { flex: 0 0 auto; min-width: 32px; min-height: 32px; border: 1px solid currentColor; border-radius: var(--r-control); background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.toast[hidden] { display: none; }
.flash { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (max-width: 1279px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 959px) { .axis-pair, .grid-2, .grid-3 { grid-template-columns: 1fr; } .bb-who span { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 드로어 머리는 버전 28 모양을 쓴다. 본문 카드의 .panel-head(가로 배치)와 이름이 겹쳐 드로어 안에서 되돌린다 */
.drawer .panel-head { display: block; margin-bottom: 0; }
.drawer .panel-name:focus { outline: none; }

/* ── 단계 팝업 (공통 4A.2 크기 · 겹침) ─────────────────────
   폭: sm 460 · md 880 · lg 1280, 모두 화면 폭 - 48px 이하. 높이: 최대 화면 높이 - 48px.
   머리(제목 · Path · 단계 상세)와 바닥(단추)은 고정하고 본문만 스크롤한다. 1440×900 · 1100×800에서 잘리지 않는다 */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: hidden; background: rgba(27, 31, 36, .45); }
.modal { display: flex; flex-direction: column; width: min(640px, calc(100vw - 48px)); max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; background: var(--surface); color: var(--ink); border-radius: var(--r-panel); box-shadow: var(--overlay); font-family: var(--font); }
.modal.sm { width: min(440px, calc(100vw - 48px)); }   /* R4 확인 · 문의처 */
.modal.md { width: min(640px, calc(100vw - 48px)); }   /* R4 남은 짧은 목록 팝업 자리(2026-09-16 요청 · 검토 · 진행은 lg로 옮김) */
.modal.lg { width: min(960px, calc(100vw - 48px)); }   /* R4 요청 쓰기 · 검토 · 진행 · 호출 승인 · 설정 마법사(본문 두 단 ui.popupBody) */
.modal.full { width: calc(100vw - 48px); height: calc(100vh - 48px); height: calc(100dvh - 48px); }   /* R4 워크플로 캔버스 전용 */
.modal-head, .modal-top, .modal-foot { flex: 0 0 auto; }
.modal-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 14px 20px 10px; border-bottom: 1px solid var(--border); }
.modal-heading { min-width: 0; }
/* 팝업 제목 줄: 페이지 머리(.head-title)와 같은 가로 줄이다 — 제목 옆에 ? · 칩이 선다(2026-09-17 QA M-5 · P-H6-1 · P7-c).
   .modal-heading은 눈썹 줄과 제목 줄을 세로로 쌓는 칸이라 ?를 여기 넣으면 제목 아랫줄에 홀로 떨어진다 */
.modal-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; margin-top: 2px; }
.modal-eyebrow { font-size: 13px; font-weight: 600; color: var(--ink-muted); display: flex; gap: 6px; align-items: center; }
.modal-title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.modal-title:focus { outline: none; }
.icon-close { flex: 0 0 auto; min-width: 40px; min-height: 40px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink-muted); }
.icon-close:hover { color: var(--ink); border-color: var(--border-control); }
.modal-top { padding: 12px 20px 0; display: grid; gap: 8px; }
.modal-top[hidden] { display: none; }
.modal-path[hidden], .path-detail[hidden] { display: none; }
/* 단계 안내: 단계 표시(초록)와 섞이지 않게 초록을 쓰지 않는다 — 옅은 회색 바탕 · 먹색 보통 글자(사용자 지적 2026-09-15) */
/* 단계 상세(공통 4A.2 '단계 상세' · N27): 기본 닫힘, 펼치면 Path 바로 아래에 본문 · 안내 줄과 같은 폭으로 밀어 내린다.
   본문 위에 뜨지 않는다(overlay 아님) — 이 자리는 .modal-top 안 보통 문서 흐름 한 칸이다 */
.path-detail { display: flex; flex-direction: column; max-height: 30vh; overflow: hidden; padding: 8px 12px; border: 1px solid var(--border); border-left: 3px solid var(--ink); border-radius: var(--r-control); background: var(--surface); font-size: 14px; }
.path-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; margin-bottom: 8px; }
.path-detail .step-head { margin: 0; min-width: 0; }
.path-detail-content { min-height: 0; overflow: auto; }
.path-detail ul.plain { margin: 4px 0 0; }
.path-detail-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; margin: 0 0 0 auto; flex: 0 0 auto; border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-muted); cursor: pointer; }
.path-detail-close:hover { background: var(--surface-subtle); color: var(--ink); }
.path-detail-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* 동일 요청 단계표는 단계와 내용 길이에 관계없이 열 너비를 유지한다. 긴 이름·시각은 셀 안에서 줄바꿈한다. */
.request-stage-table { table-layout: fixed; width: 100%; min-width: 0; }
.request-stage-table th, .request-stage-table td { white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; display: grid; gap: 12px; align-content: start; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); }
.modal-foot .left, .modal-foot .right { display: flex; gap: 8px; align-items: center; }
.modal-foot .right { margin-left: auto; }
/* R5 팝업 안 카드 겹침 금지(2026-09-15 사용자 승인): 묶음은 테두리 카드가 아니라 제목(17px 700) · 수 · 오른쪽 섹션 행동 + 묶음 사이 32px */
.modal-body :is(.panel, .wz-sec, .sk-sec, .card) { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.modal-body :is(.panel, .wz-sec, .sk-sec, section, .card) + :is(.panel, .wz-sec, .sk-sec, section, .card) { margin-top: 20px; }
.modal-body .empty:not(.compact) { padding: 12px 0; border: 0; background: none; }   /* 본문 gap 12 + 20 = 32 */
.modal-body .section-head { margin: 0 0 8px; min-height: 36px; align-items: center; }
.modal-body .section-head :is(h2, h3) { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
/* 바닥에 단추가 하나도 없으면 바닥 줄을 숨긴다(머리 ✕가 닫기) */
.modal-foot:not(:has(button, a, input)) { display: none; }

/* Path 큰 모양: 칸마다 단추. 완료 ✓ · 현재 ▸ 동작색 · 예정 흐림 · 막힘 자물쇠 빗금 · 반려/실패 ✕ 위험 · 취소 ⊘ */
.path { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.path-step { flex: 1 1 0; min-width: 0; }
.path-btn { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: max(48px, 100%); padding: 6px 16px 6px 22px; border: 0; background: var(--surface-subtle); color: var(--ink-muted); font: inherit; text-align: left; cursor: pointer; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.path-step:first-child .path-btn { clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: var(--r-control) 0 0 var(--r-control); padding-left: 12px; }
.path-step:last-child .path-btn { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%); border-radius: 0 var(--r-control) var(--r-control) 0; }
.path-btn:hover { filter: brightness(.95); }
.path-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; box-shadow: inset 0 0 0 5px var(--surface), inset 0 0 0 7px var(--focus); }
.path-label { display: flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }
.path-mark { flex: 0 0 auto; font-weight: 700; }
.path-mark.lock svg { width: 13px; height: 13px; display: block; }
/* P-PATH-1: 아래 줄은 글이 없어도 자리를 지켜 여섯 칸 높이가 같다(빈 칸은 빈 줄만) */
.path-sub { min-height: 18px; font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.path-step.done .path-btn { background: var(--path-done); color: var(--ink); }
.path-step.now .path-btn { background: var(--action); color: var(--on-action); box-shadow: inset 0 -3px 0 var(--accent); }
.path-step.now .path-label { font-weight: 700; }
.path-step.now .path-sub { color: var(--path-now-sub); }
.path-step.blocked .path-btn { background: var(--hatch); color: var(--unavailable); }
.path-step.bad .path-btn { background: var(--danger); color: var(--on-action); }
.path-step.overdue .path-btn { background: var(--warning); color: var(--on-action); }
.path-step.overdue .path-sub { color: var(--on-action); }
.path-step.bad .path-label { font-weight: 700; }
.path-step.stopped .path-btn { background: var(--surface-subtle); color: var(--ink); }
.path-step.stopped .path-label { font-weight: 700; }
.path-step.skipped .path-btn { background: var(--surface); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--border); }
.pm-cell.skipped { background: var(--surface); color: var(--ink-muted); }
.path-step.selected .path-btn { box-shadow: inset 0 -3px 0 var(--ink); }
.path-step.now.selected .path-btn { box-shadow: inset 0 -3px 0 var(--on-action); }
/* R7 팝업 Path: 칸 부제가 없으면 번호 + 1~2단어 한 줄 · 높이 40(요청 Path의 D-Day 줄이 있으면 두 줄) */
.modal-path .path-btn:not(:has(.path-sub)) { min-height: 40px; padding-block: 4px; padding-right: 10px; }
.modal-path .path-btn:not(:has(.path-sub)) .path-label { white-space: nowrap; }
.modal-path .path-btn { padding-right: 8px; }
.modal-path .path-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* D-Day 한 단위는 한 줄 */
.path-toggle { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; }
.path-caret { flex: none; width: 7px; height: 7px; margin-left: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }   /* 필터 알약 .fb-caret과 같은 CSS 삼각형 */
.path-toggle[aria-expanded="true"] .path-caret { transform: translateY(1px) rotate(225deg); }

/* Path 줄임 모양 (표 · 드로어 · 알림): 같은 부품. 칸 여섯 · 이름만 · 현재 칸 강조 · 누르면 진행 보기 */
.path-mini { display: inline-flex; max-width: 100%; padding: 2px; border: 0; border-radius: var(--r-small); background: none; font: inherit; color: inherit; text-align: left; }
button.path-mini { cursor: pointer; }
button.path-mini:hover .pm-cell { filter: brightness(.95); }
button.path-mini:hover .pm-cell.cur { text-decoration: underline; }
/* 줄임 모양은 언제나 한 줄(칸 여섯). 넘치면 표의 다른 열이 줄바꿈을 맡는다 */
.pm-cells { display: inline-flex; flex-wrap: nowrap; align-items: stretch; gap: 1px; white-space: nowrap; }
.pm-cell { display: inline-flex; align-items: center; gap: 1px; min-height: 26px; padding: 3px 7px 3px 10px; font-size: 13px; line-height: 1.2; white-space: nowrap; background: var(--surface-subtle); color: var(--ink-muted); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%, 6px 50%); }
.pm-cell:first-child { padding-left: 6px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); border-radius: var(--r-small) 0 0 var(--r-small); }
.pm-cell:last-child { padding-right: 6px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%); border-radius: 0 var(--r-small) var(--r-small) 0; }
.pm-cell .path-mark { font-size: 13px; }
.pm-cell .path-mark.lock svg { width: 12px; height: 12px; }
.pm-cell.done { background: var(--path-done); color: var(--ink); }
.pm-cell.now { background: var(--action); color: var(--on-action); box-shadow: inset 0 -2px 0 var(--accent); }
.pm-cell.bad { background: var(--danger); color: var(--on-action); font-weight: 700; }
.pm-cell.overdue { background: var(--warning); color: var(--on-action); font-weight: 700; }
.pm-cell.stopped { background: var(--surface-subtle); color: var(--ink); }
.pm-cell.blocked { background: var(--hatch-sm); color: var(--unavailable); }
.pm-cell.cur { font-weight: 700; }
button.path-mini:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); }

/* 팝업 본문 부품 */
.done-box { padding: 12px 16px; border: 1px solid var(--success); border-radius: var(--r-control); background: var(--success-surface); }
.done-box p { margin: 4px 0 0; }
.note-box { margin: 0; padding: 8px 12px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--surface-subtle); font-size: 14px; max-width: 70ch; }
.form-error { padding: 8px 12px; border: 1px solid var(--danger); border-radius: var(--r-control); background: var(--danger-surface); color: var(--danger); font-size: 14px; font-weight: 600; max-width: 70ch; }
.form-error[hidden], .field-error[hidden] { display: none; }
.field-error { font-size: 14px; font-weight: 600; color: var(--danger); }
.field-error::before { content: "✕ "; }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.ask { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid var(--border-control); border-left: 4px solid var(--action); border-radius: var(--r-control); }
.ask.danger { border-left-color: var(--danger); }
.ask h3 { margin: 0; font-size: 18px; font-weight: 700; }
.ask h3:focus { outline: none; }
dl.kv { display: grid; grid-template-columns: 112px minmax(0, 560px); gap: 10px 16px; margin: 0; font-size: 16px; }
dl.kv dt { color: var(--ink-muted); font-size: 13px; }
dl.kv dd { margin: 0; }
/* 요청 정보(공통 4A.2 '팝업 본문' ③ · N27): 레이블은 먹색(그레이 아님) · 값은 보통 굵기 */
dl.kv.kv-ink dt { color: var(--ink); font-weight: 600; }
dl.kv.kv-ink dd { font-weight: 400; }
ul.plain { margin: 0; padding-left: 18px; }
.section-title { font-size: 13px; font-weight: 600; }
/* 판단 팝업 본문 ①(N27): 무엇을 얼마나, 제목 다음 큰 글자 하나 */
.decide-what { margin: 0; font-size: 18px; font-weight: 700; }
.decide-what .delta-quiet, .decide-what .delta.flat { margin-left: 8px; font-size: 15px; font-weight: 600; }
/* 판단 팝업 본문 ②(N27): 적용 뒤 바뀌는 값은 문장이 아니라 짧은 증감 줄로 */
.impact-rows { display: grid; gap: 6px; margin-top: 10px; }
.impact-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px; }
.impact-row .ir-label { color: var(--ink-muted); font-size: 13px; flex: 0 0 auto; }
.impact-row .ir-val { font-weight: 600; }
.impact-axis { display: grid; gap: 4px; }
.req-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.req-form .full { grid-column: 1 / -1; }
/* 한도 상향 요청 팝업(openLimitRequest): 확인 단계 첫 줄은 무엇을 얼마나(크게) · 같은 항목 진행 중 안내는 주의 줄 */
.lr-lead { margin-bottom: 12px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lr-lead b { font-weight: 700; }
.lr-form { align-items: start; }
.lr-form .why b { font-weight: 600; color: var(--ink); }
.lr-dup { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border: 1px solid var(--warning); border-radius: var(--r-control); background: var(--warning-surface); font-weight: 600; }
.lr-dup[hidden] { display: none; }
/* R5(2026-09-16 · P-R5-2): 팝업 본문 안에 상자를 겹치지 않는다 — fieldset도 테두리 없이 두고 제목(legend)은 섹션 제목(.ds-title)과 같은 모양으로 둔다.
   radio 묶음의 뜻은 fieldset · legend가 갖고 모양은 섹션 제목이 말한다 */
fieldset.decide { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
fieldset.decide legend { padding: 0; margin: 8px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.decide-options { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.radio { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--action); }
.radio:has(input:disabled) { color: var(--ink-muted); cursor: not-allowed; }
.decide-partial { display: grid; gap: 8px; padding: 8px 12px; border: 1px dashed var(--border-control); border-radius: var(--r-control); }
.decide-partial[hidden] { display: none; }
/* 넓은 팝업 본문 R4 · P7(2026-09-16 사용자 지적 "팝업들이 너무 좁은거 아니냐"): 셸 부품 ui.popupBody 하나.
   두 단(pb-split): 변경 줄(pb-lead)은 전체 폭 → 왼쪽 3/5 판단 근거(pb-main) · 오른쪽 2/5 요청 정보 + 입력(pb-side).
   본문 스크롤은 하나다. 오른쪽 단이 본문 높이 안에 들면 셸이 data-stick을 달아 붙여 둔다(길면 붙이지 않아 아래가 잘리지 않는다).
   접는 기준은 화면 폭이 아니라 팝업 본문 칸 폭(컨테이너 쿼리 920 = lg 960 − 좌우 여백 40). 한 단(pb-single)은 입력칸이 늘어지지 않게 640까지 */
.modal-body { container: modalbody / inline-size; }
.pb { display: grid; gap: 20px; align-content: start; min-width: 0; }
.pb-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.pb-single { max-width: 640px; }
@container modalbody (min-width: 920px) {
  .pb-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 32px; align-items: start; }
  .pb-split > .pb-lead { grid-column: 1 / -1; }
  .pb-split[data-stick] > .pb-side { position: sticky; top: 0; }
}

/* 좁은 화면(960px 미만): 팝업은 전체 화면, Path는 "3/6 · 판단"으로 줄이고 누르면 칸을 세로로 펼친다 */
@media (max-width: 959px) {
  .modal-backdrop { padding: 0; }
  .modal, .modal.sm, .modal.md, .modal.lg, .modal.full { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  /* 좁은 폭 팝업 머리 칸은 45vh까지 · 넘으면 스크롤. 줄(행) 하나가 내용보다 작게 눌리지 않게 max-content로 못 박는다
     (2026-09-16 · P-PATH-2): `.path-detail`이 `overflow: hidden`이라 자동 최소 크기가 0이 되어, 높이가 정해진 이 격자 안에서
     단계 상세 줄이 20px로 찌그러졌다 — 760에서 단계 칸을 눌러도 상세가 안 보이던 원인이다 */
  .modal-top { max-height: 45vh; overflow-y: auto; grid-auto-rows: max-content; }
  .path-toggle { display: inline-flex; }
  .modal-path .path { display: none; }
  .modal-path.show-steps .path { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
  .modal-path.show-steps .path-btn, .modal-path.show-steps .path-step:first-child .path-btn, .modal-path.show-steps .path-step:last-child .path-btn { clip-path: none; border-radius: var(--r-small); padding-left: 12px; }
  /* P-PATH-1 좁은 폭: 칸이 세로로 쌓여 폭이 이미 같으므로 빈 아래 줄 자리는 두지 않는다(글이 있는 칸만 두 줄) */
  .modal-path.show-steps .path-sub:empty { display: none; }
  .req-form { grid-template-columns: 1fr; }
}

/* ══ 셸 부품 일관성 (리뷰 04 부품일관성 감사 · 컨셉안 S11 · S15 · N25 · N26 · 2026-09-14) ══════════════
   반복되는 부품은 여기 한 곳에서만 모양 · 간격 · 줄어드는 규칙을 정한다. 줄어드는 기준은 화면 폭이 아니라 부품이 놓인 칸의 폭이다
   (컨테이너 쿼리 · 못 쓰는 브라우저는 shell.js가 칸 폭을 재어 data-cols · data-narrow를 준다). 페이지는 이 치수를 다시 정하지 않는다 */

/* 경고 표식 ! (▲ ▼은 증감 전용) */
.wmark { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 16px; height: 16px; margin-right: 2px; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--font); font-size: 13px; font-weight: 700; line-height: 1; font-style: normal; }
.path-mark.wmark { margin-right: 3px; }

/* 요약 타일 띠 (ui.kpis): 붙은 띠 하나. 칸 ≥ 720px 한 줄 넷 · 480~719px 2×2 · 480px 미만 한 줄에 하나 */
.kpis-wrap { container-type: inline-size; container-name: kpis; min-width: 0; }
.kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; }
.kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 24px; background: var(--surface); text-align: center; }
.kpi-label { display: flex; align-items: center; justify-content: center; min-height: 24px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink-muted); }
.kpi-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kpi-value { font-size: 30px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value .delta-quiet.strong, .kpi-value .delta { font-weight: 700; }
.kpi-unit { margin-left: 1px; font-size: 16px; font-weight: 400; color: var(--ink-muted); }
/* 보조 줄은 **두 줄 안**이고 잘리지 않는다(2026-09-17 QA Low · P-CLIP-1 · CL1 · N26)
   값이 없어도 빈 줄 자리를 두고(min-height 1.5em) 타일 높이를 맞춘다 — 같은 줄 타일끼리는 아래 subgrid가 자리 높이를 함께 맞추므로
   한 칸만 꺾여도 그 칸이 튀어나오지 않는다(2026-09-16 P7-b가 `한 줄 · 말줄임`으로 막았던 자리 · 그 뒤 subgrid가 들어와 근거가 바뀌었다).
   보조 줄이 담는 것은 막힘 원인 수 같은 판단 정보라, 말줄임으로 자르면 그만큼 판단 정보가 준다(CL1) */
.kpi-sub { min-height: 1.5em; font-size: 15px; line-height: 1.5; color: var(--ink-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.kpi-chip { margin-top: auto; }
.kpi-chip:not(:empty) { padding-top: 4px; }
.kpi-chip .chip { white-space: nowrap; }
.kpi-bar:not(:empty) { padding-top: 6px; }
.kpi .mini-bar { min-width: 0; width: min(100%, 240px); margin-inline: auto; }
@supports (grid-template-rows: subgrid) {
  /* 같은 줄의 타일끼리 자리(레이블 · 값 · 보조 · 칩 · 막대)의 높이를 맞춘다 */
  .kpi { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 4px; align-content: start; }
  .kpi-chip { margin-top: 0; align-self: end; }
  .kpi-bar { align-self: end; }
}
@container kpis (min-width: 480px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis[data-n="3"] > .kpi:last-child { grid-column: 1 / -1; }
}
@container kpis (min-width: 720px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis[data-n="3"] > .kpi:last-child { grid-column: auto; }
}
/* PW4(09-16): 타일 한 칸이 480을 넘으면 가로 배치 — 왼쪽 레이블 · 숫자 · 보조, 오른쪽 막대(최대 480) · 칩. 480 이하면 세로 그대로.
   타일 폭 = 띠 폭 ÷ 열 수라서 열 수별 띠 폭으로 가른다(n=1 → 480 · 2 → 962 · 3 → 1444 · 4 → 1926).
   2026-09-16(P7-b 검수 중 발견): 가름값이 타일 안 여백 48 + 칸 사이 32를 빼먹어서, 1100 폭 한도 요청(n=2 · 띠 1008)에서
   막대 칸이 글 칸 자리를 다 먹고 레이블 · 값 · 보조가 폭 0으로 사라졌다. 막대 칸을 타일의 52%로 묶어 글 자리를 남긴다 */
@container kpis (min-width: 480px) {
  .kpis[data-n="1"] > .kpi { grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 52%)); column-gap: 32px; align-items: center; text-align: left; }
  :is(.kpis[data-n="1"] > .kpi) > :is(.kpi-label, .kpi-value, .kpi-sub) { grid-column: 1; }
  :is(.kpis[data-n="1"] > .kpi) > .kpi-label { justify-content: flex-start; }
  :is(.kpis[data-n="1"] > .kpi) > .kpi-bar { grid-column: 2; grid-row: 2; align-self: center; padding-top: 0; }
  :is(.kpis[data-n="1"] > .kpi) > .kpi-chip { grid-column: 2; grid-row: 3; align-self: start; padding-top: 0; }
  :is(.kpis[data-n="1"] > .kpi) .mini-bar { width: 100%; margin-inline: 0; }
}
@container kpis (min-width: 962px) {
  .kpis[data-n="2"] > .kpi { grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 52%)); column-gap: 32px; align-items: center; text-align: left; }
  :is(.kpis[data-n="2"] > .kpi) > :is(.kpi-label, .kpi-value, .kpi-sub) { grid-column: 1; }
  :is(.kpis[data-n="2"] > .kpi) > .kpi-label { justify-content: flex-start; }
  :is(.kpis[data-n="2"] > .kpi) > .kpi-bar { grid-column: 2; grid-row: 2; align-self: center; padding-top: 0; }
  :is(.kpis[data-n="2"] > .kpi) > .kpi-chip { grid-column: 2; grid-row: 3; align-self: start; padding-top: 0; }
  :is(.kpis[data-n="2"] > .kpi) .mini-bar { width: 100%; margin-inline: 0; }
}
@container kpis (min-width: 1444px) {
  .kpis[data-n="3"] > .kpi { grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 52%)); column-gap: 32px; align-items: center; text-align: left; }
  :is(.kpis[data-n="3"] > .kpi) > :is(.kpi-label, .kpi-value, .kpi-sub) { grid-column: 1; }
  :is(.kpis[data-n="3"] > .kpi) > .kpi-label { justify-content: flex-start; }
  :is(.kpis[data-n="3"] > .kpi) > .kpi-bar { grid-column: 2; grid-row: 2; align-self: center; padding-top: 0; }
  :is(.kpis[data-n="3"] > .kpi) > .kpi-chip { grid-column: 2; grid-row: 3; align-self: start; padding-top: 0; }
  :is(.kpis[data-n="3"] > .kpi) .mini-bar { width: 100%; margin-inline: 0; }
}
@container kpis (min-width: 1926px) {
  .kpis[data-n="4"] > .kpi { grid-template-columns: minmax(0, 1fr) minmax(0, min(480px, 52%)); column-gap: 32px; align-items: center; text-align: left; }
  :is(.kpis[data-n="4"] > .kpi) > :is(.kpi-label, .kpi-value, .kpi-sub) { grid-column: 1; }
  :is(.kpis[data-n="4"] > .kpi) > .kpi-label { justify-content: flex-start; }
  :is(.kpis[data-n="4"] > .kpi) > .kpi-bar { grid-column: 2; grid-row: 2; align-self: center; padding-top: 0; }
  :is(.kpis[data-n="4"] > .kpi) > .kpi-chip { grid-column: 2; grid-row: 3; align-self: start; padding-top: 0; }
  :is(.kpis[data-n="4"] > .kpi) .mini-bar { width: 100%; margin-inline: 0; }
}
.kpis[data-n="1"] { grid-template-columns: minmax(0, 1fr) !important; }
.kpis[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@supports not (container-type: inline-size) {
  .kpis-wrap[data-cols="2"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-wrap[data-cols="4"] .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpis-wrap[data-cols="4"] .kpis[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 요약 바로 뒤 위쪽 여유 한 줄 (ui.upperRoom) */
.upper-room { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin: 8px 0 0; font-size: 15px; color: var(--ink-muted); }
.upper-room b { color: var(--ink); }

/* 분할 단추 (ui.seg · ui.unitToggle): 필터 줄 · 머리 행동 자리의 다른 조작과 같은 높이 40px */
.seg button { min-height: 38px; }
/* 표 섹션 머리의 분할 전환(조회 단계 · 기준)은 필터 줄 조작과 같은 36px(테두리 포함) */
.section-actions .seg button { height: 34px; min-height: 34px; padding-block: 0; line-height: 1.2; }
.seg.fill { display: flex; }
.seg.fill button { flex: 1 1 0; }
.seg-count, .tab-count, .fchip-count { font-weight: 400; color: var(--ink-muted); }
.seg button[aria-pressed="true"] .seg-count { color: inherit; }
.seg-label { font-size: 15px; font-weight: 600; color: var(--ink-muted); }

/* 필터 줄 F1~F6 (ui.filterBar · 2026-09-15 사용자 승인): 바탕 띠 없음 · 조작 높이 36px · 줄 폭 = 표 폭
   한 줄 [검색 280px] [알약] [+ 필터] [필터 지우기] │ 오른쪽 끝 [정렬 ▾] → 조건이 걸렸을 때만 표 바로 위 왼쪽 건수 */
.fb-wrap { container-type: inline-size; container-name: filterbar; min-width: 0; margin-bottom: 8px; }
.filterbar { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.fb-left, .fb-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fb-pills { display: contents; }
.fb-left { flex: 1 1 auto; }
.fb-right { margin-left: auto; }
/* F1 검색: 고정 폭 · 돋보기 · 입력 중 × */
.fb-search { position: relative; flex: 0 0 280px; width: 280px; max-width: 100%; }
.fb-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.filterbar input[type="search"] { display: block; width: 100%; height: 36px; min-height: 36px; padding: 0 34px 0 34px; border: 1px solid var(--border-control); border-radius: var(--r-control); background: var(--surface); font-size: 15px; }
.filterbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.fb-search-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.fb-search-x[hidden] { display: none; }
.fb-search-x:hover { background: var(--surface-subtle); color: var(--ink); }
/* F2 알약: 미적용 = 테두리만 · 적용 = 연한 초록 채움 + 진한 초록 테두리. × 는 그 조건만 해제 */
.fb-pill-wrap { display: inline-flex; align-items: center; height: 36px; max-width: 100%; border: 1px solid var(--border-control); border-radius: 999px; background: var(--surface); color: var(--ink); vertical-align: middle; }
.fb-pill-wrap:hover { border-color: var(--action); }
.fb-pill-wrap.on, .fb-pill-toggle[aria-pressed="true"], .fb-narrow-btn.on { background: var(--selection); border-color: var(--action); }
.fb-pill-wrap > details { display: flex; min-width: 0; height: 100%; }
.fb-pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 0; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer; list-style: none; }
.fb-pill::-webkit-details-marker { display: none; }
.fb-pill-k { color: var(--ink-muted); }
.fb-pill-wrap.on .fb-pill { padding-right: 2px; font-weight: 600; }
.fb-pill-wrap.on .fb-pill-k { font-weight: 400; }
.fb-pill-static { cursor: default; }
.fb-pill-toggle { height: 36px; padding: 0 14px; }
.fb-pill-toggle[aria-pressed="true"] { font-weight: 600; }
.fb-pill-x { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: 3px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--action-pressed); font-size: 18px; line-height: 1; cursor: pointer; }
.fb-pill-x:hover { background: var(--surface); }
.fb-caret { flex: none; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
details[open] > .fb-pill .fb-caret { transform: translateY(1px) rotate(225deg); }
.fb-toggle { display: inline-flex; align-items: center; gap: 2px; }
.fb-add-btn { height: 36px; border: 1px dashed var(--border-control); color: var(--action); font-weight: 600; }
.fb-add-btn:hover { border-color: var(--action); }
.fb-add[hidden], .fb-pill-wrap[hidden] { display: none; }
.fb-sort { border-radius: var(--r-control); }
.fb-sort .fb-pill { border-radius: var(--r-control); }
/* 팝오버: 셸 메뉴(.row-menu .menu-pop) 모양 그대로 · 고른 항목 앞 ✓ */
.fb-menu .menu-pop.fb-pop { width: auto; min-width: 200px; max-width: min(320px, calc(100vw - 24px)); max-height: min(420px, 70vh); overflow-y: auto; }
.fb-menu .menu-item.fb-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; font-weight: 400; white-space: nowrap; }
.fb-menu .fb-opt[hidden] { display: none; }
.fb-menu .menu-item.fb-opt[aria-checked="true"] { font-weight: 600; }
.fb-check { flex: none; width: 16px; height: 10px; }
.fb-opt[aria-checked="true"] .fb-check::before { content: ""; display: block; width: 10px; height: 5px; margin: 1px 0 0 2px; border-left: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: rotate(-45deg); }
.fb-opt-count { margin-left: auto; padding-left: 12px; color: var(--ink-muted); }
.fb-group + .fb-group { margin-top: 2px; padding-top: 2px; border-top: 1px solid var(--border); }
.fb-group-label { padding: 6px 10px 2px; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.fb-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--action); color: var(--on-action); font-size: 13px; font-weight: 600; }
.fb-left .fb-narrow { display: none; }
.fb-narrow-btn { height: 36px; border: 1px solid var(--border-control); }
/* F4 · F5 */
.fb-clear { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--action); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.fb-clear:hover { color: var(--action-hover); }
.fb-clear:focus-visible, .fb-pill-x:focus-visible, .fb-search-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fb-count-row { display: flex; align-items: center; min-height: 20px; }
.fb-count { font-size: 14px; color: var(--ink-muted); white-space: nowrap; }
/* 좁은 칸: 960 미만 검색 240px · 768 미만 검색 한 줄 + [필터 N] 하나로 접기 */
@container filterbar (max-width: 959px) {
  .fb-search { flex-basis: 240px; width: 240px; }
}
@container filterbar (max-width: 767px) {
  .fb-left { display: contents; }   /* 검색 한 줄 → [필터 N] [필터 지우기] … [정렬]이 다음 한 줄 */
  .fb-search { flex: 1 1 100%; width: 100%; }
  .fb-pills { display: none; }
  .fb-left .fb-narrow { display: inline-block; }
}
@supports not (container-type: inline-size) {
  .fb-wrap[data-narrow] .fb-left { display: contents; }
  .fb-wrap[data-narrow] .fb-search { flex: 1 1 100%; width: 100%; }
  .fb-wrap[data-narrow] .fb-pills { display: none; }
  .fb-wrap[data-narrow] .fb-left .fb-narrow { display: inline-block; }
}

/* 섹션 머리 건수 · 탭 */
.sh-count { font-weight: inherit; }
.tab-panel:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 표 (리뷰 04 §2-9): 보조 줄 14px · 드로어 · 팝업 안은 compact(기본보다 더 촘촘) · 첫 열 최소 폭 · 누를 수 있는 행 */
.tbl .cell-sub { display: block; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--ink-muted); }
.tbl td.col-name { min-width: 12em; }
/* 에이전트 이름 한 모양(ui.agentName · 사용자 지적 2026-09-15): 이름 앞 작은 로봇 아이콘(데이터 초록) + 이름. 칩 · 테두리 없음.
   아이콘은 글자 크기에 맞춘다: 기본 14px(표 · 목록 · 알림) · lg 18px(드로어 머리 · 제목) */
.agent-ico { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--data-main); flex: none; }
.agent-ico.lg { width: 18px; height: 18px; margin-right: 6px; vertical-align: -2px; }
.agent-ico.auto { width: 19.6px; }
.agent-ico.auto.lg { width: 25.2px; }
/* 아이콘으로 시작하는 이름 아래 보조 줄은 아이콘 뒤 글자 시작점에 맞춘다(사용자 지적 2026-09-15 "밑에 있는 글자도 위에 글자 시작점이랑 맞춰") */
td:has(> .name-btn:first-child > .agent-name:first-child) > :is(.cell-sub, .row-sub),
td:has(> .agent-name:first-child) > :is(.cell-sub, .row-sub) { padding-left: 19px; }
td:has(> .name-btn:first-child > .agent-name[data-agent-kind="auto"]:first-child) > :is(.cell-sub, .row-sub),
td:has(> .agent-name[data-agent-kind="auto"]:first-child) > :is(.cell-sub, .row-sub) { padding-left: 24.6px; }
.agent-link { text-decoration: none; }
.agent-link .agent-label { text-decoration: underline; text-underline-offset: 2px; }
/* 증감 0: 표의 숫자 칸에서는 흐리게(증감이 있는 칸보다 앞서 보이지 않게) */
.tbl td.num .delta.flat { color: var(--ink-muted); font-weight: 400; }
.tbl.compact th, .tbl.compact td { padding: 6px 10px; height: auto; }
/* 표 폭 R2 (2026-09-15 사용자 승인 · .tbl.fit 폐지): 표는 놓인 칸 폭 100%. 주 열(이름 · 내용 · 사유 중 하나, th · td에 .col-main)이 남는 폭을 갖고,
   나머지 열은 내용 폭 · 줄바꿈 없음 · 숫자 오른쪽. 행동 열(.col-act)은 맨 오른쪽 · 머리 글자 없음 · 버튼 폭. 표 머리는 가운데 정렬 그대로(사용자 결정).
   R6: 한 줄 행 48px · 두 줄 행(아래 흐린 줄) 64px 최소 · 칸 좌우 여백 12px · 자간 0 */
/* PW3(2026-09-16 사용자 결정 · P-PW3-2): 남는 폭을 주 열 하나가 다 흡수하지 않는다.
   글 열은 자기 글 폭까지(주 열은 44em까지)만 넓어지고, 그러고도 남는 폭은 맨 오른쪽 빈 칸(.col-slack · 셸 padTables)이 가져가
   표 안쪽 여백이 된다. 그래야 가운데 정렬한 열 머리가 그 열 값 바로 위에 놓인다(1920 · 2560) */
.tbl th.col-main, .tbl td.col-main { width: auto; min-width: 10em; max-width: 44em; white-space: nowrap; }
/* 주 열도 제 글 폭까지만: 44em을 넘으면 한 줄로 자른다(N26 목록 한 칸 두 줄 안) */
.tbl td.col-main > .cell-main, .tbl td.col-main > .col-main-text { display: block; max-width: 44em; overflow: hidden; text-overflow: ellipsis; }
.tbl th.col-slack, .tbl td.col-slack { width: 100%; min-width: 0; padding: 0; }
.tbl thead td.col-slack { border-bottom: 1px solid var(--border-control); background: var(--surface); }
/* PW3(09-16 · 2026-09-16 고침): 주 열 아래 흐린 줄(목적 · 설명)은 44em에서 한 줄로 자른다 — 주 열이 제 글 폭이라 줄을 바꾸면 칸이 두 줄을 넘는다(N26) */
.tbl td.col-main > .cell-sub { max-width: 44em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* PW3(09-16): 빈 칸이 남는 폭을 가져가려면 글 열이 제 글 폭을 지켜야 한다 — 주 열과 빈 칸을 뺀 모든 칸은 줄바꿈 없음(표가 좁으면 감싸개가 가로로 스크롤한다 · V2).
   폭을 미리 나눈 표(table-layout: fixed · 단계 상세)는 뺀다: 칸 폭이 이미 정해져 있어 줄바꿈을 막으면 글이 칸 밖으로 흘러 옆 칸 글과 겹친다
   (2026-09-16 사용자 지적 "이거 QA에서 놓쳤는데?" · P6 읽을 수 없는 화면 · P7). 아래 .request-stage-table 줄이 이기도록 특이도를 낮추지 말고 여기서 제외한다 */
.tbl:not(.request-stage-table) thead th:not(.col-main):not(.col-slack), .tbl:not(.request-stage-table) tbody td:not(.col-main):not(.col-slack) { white-space: nowrap; }
.tbl th.col-act, .tbl td.col-act { width: 1%; white-space: nowrap; }
.tbl td.col-act { text-align: right; }   /* 머리는 UXR-18대로 가운데 · 칸 값만 오른쪽(2026-09-16 P7-c) */
.tbl:not(.compact) tbody tr:has(> td .cell-sub, > td .row-sub) > td { height: 64px; }
.tbl tbody tr[data-row-open]:hover td, .tbl tbody tr[data-req-row]:hover td { background: var(--selection); }
div[data-row-open]:hover, li[data-row-open]:hover { background: var(--selection); }   /* 초점만으로 칠하지 않는다(상세를 닫고 초점이 돌아와도 초록이 남지 않게) */
.row-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
/* 행 끝 ⋯ 메뉴 (ui.rowMenu) */
.row-menu { display: inline-block; position: relative; }
.row-menu > summary { list-style: none; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu .menu-pop { position: fixed; z-index: 70; width: 260px; max-width: calc(100vw - 24px); display: grid; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); box-shadow: var(--overlay); }
.row-menu .menu-item { display: grid; gap: 2px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--r-small); background: none; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.row-menu .menu-item:hover:not([disabled]), .row-menu .menu-item:focus-visible { background: var(--surface-subtle); }
.row-menu .menu-item.danger { color: var(--danger); }
.row-menu .menu-item[disabled] { color: var(--ink-muted); cursor: not-allowed; }
.row-menu .menu-item .why { font-weight: 400; }
.row-menu .menu-sep { border-top: 1px solid var(--border); margin: 2px 0; }

/* 요청 목록 (ui.reqTable): 요청(번호 + 문제 표식) · 구분 · 상태(섞일 때만) · 기한 D-Day · 대상 · 내용(바뀌는 값) · 사유 한 줄. 진행 단계(Path)는 표에 두지 않는다 */
.req-table td.rq-id, .req-table td.rq-kind, .req-table td.rq-status, .req-table td.rq-due { white-space: nowrap; }
/* 대상 · 내용은 내용 폭(R2) — 남는 폭은 주 열(사유)이 가져간다 */
.req-table td.rq-what { font-weight: 600; }
/* 사유가 주 열이면 남는 폭 안에서 한 줄로 자른다(칸 최소 폭이 긴 사유로 늘지 않게 max-width: 0) */
/* PW3-3 (2026-09-16 사용자 지적 "1100 폭에서 사유 열 머리와 글이 오른쪽 끝에서 잘려 보인다"):
   사유는 길이가 정해지지 않은 자유 글이라 44em을 끝까지 지키다 표가 제 칸을 넘겼다 — 1100 · 1280 · 1440에서 받은 요청 표가 가로로 스크롤했다.
   주 열은 '남는 폭 안에서만' 44em까지 쓴다. 남는 폭 = 본문 칸(100cqi) - 요청 표의 나머지 열 폭(54em ≈ 요청 · 상태 · 기한 · 대상 · 내용 · 행동).
   좁아지면 가로 스크롤보다 말줄임(…)을 먼저 쓰고, 전체 사유는 행을 눌러 여는 판단 · 진행 팝업에 그대로 있다(PW3 · P6 · P7).
   이름 열(에이전트 · 스킬 · 대상)은 길이가 정해진 값이라 이 규칙을 걸지 않는다 — 44em 그대로다 */
.req-table td.rq-reason.col-main { max-width: min(44em, max(12em, 100cqi - 54em)); min-width: 12em; }
/* PW3(09-16): 넓은 칸에서도 사유 한 줄은 44em(한글 약 44자 · 영문 약 80자)까지만 쓰고 자른다 — 한 줄로 끝없이 늘어지지 않게 */
.req-table td.rq-reason.col-main .rq-reason-text { max-width: 44em; }
/* PW3-5 페이지 열의 보조 줄은 열 폭을 늘리지 않는다(2026-09-17 · P-PW3-5 · 파생 P6 · P7 · P9)
   요청 표 페이지 열(요청자 · 지금 검토자 …)의 흐린 아래 줄은 곁들이는 말이다. 그 줄이 길다고 열이 넓어지면
   주 열(사유)이 12em 바닥까지 눌리고도 표가 본문 칸을 넘는다 — 자동 실행 `검토할 자동 실행 권한 요청`이
   1100에서 27px 넘친 원인이 `제안 출처 에이전트 제안` 한 줄이었다. 7em 고정 폭으로 두고 넘으면 줄을 바꾼다 — 말줄임보다 줄바꿈이 읽히고, 고정 폭이라 열이 글자 수를 따라 늘지도 줄지도 않는다 */
.req-table td:not(.col-main) .cell-sub { width: 7em; white-space: normal; }
.rq-name { display: inline-flex; align-items: center; gap: 6px; }
.rq-target-name { display: block; }
.rq-reason-text { display: block; max-width: 26em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-table .btn { white-space: nowrap; }
.req-table .rq-status .req-turn { display: inline-flex; gap: 2px; margin: 0 0 0 8px; vertical-align: middle; }
.req-turn { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--action-pressed); }
.req-line { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 15px; }
.req-line-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.req-progress { display: grid; gap: 4px; justify-items: start; }

/* 문제 표식 (ui.issueMark · S15): 이름 옆 원 안의 ! 하나. 문제는 빨강, 경고만 있으면 주황 */
.issue-mark { display: inline-grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; font-size: 13px; font-weight: 700; line-height: 1; color: var(--on-action); cursor: default; }
.issue-mark.bad { background: var(--danger); }
.issue-mark.warn { background: var(--warning); }
/* 사용 조건 (ui.useState · 사용자 지적 2026-09-14 "권한 없음에 대한 표시를 동일하게"): 사용 가능 · 보유는 흐린 평문, 막힘은 위험색 평문 한 가지.
   칩 · ! · ✕ · 빗금 없음. 사유 상세는 아래 줄 흐린 작은 글자 */
.use-state.ok { color: var(--ink-muted); }
/* 막힘 표식은 어디서나 자물쇠 하나(2026-09-16 사용자 재지적 · P5 · P7) — 값 앞에 두고 색 없이도 읽히게 한다 */
.use-state.bad { display: inline-flex; align-items: center; gap: 4px; color: var(--danger); }
.use-state.bad > svg { flex: 0 0 auto; width: 13px; height: 13px; }
/* 안 B(2026-09-16 사용자 재지적 뒤 다시 비교해 고름): 빗금은 **막힌 줄 전체**에 깐다 — 기준으로 삼은 설정 팝업 단계 표시가
   막힌 칸 한 덩어리를 통째로 덮는 것과 같은 단위다(P8). 칸 한 조각만 칠하면 무늬가 줄 가운데서 끊겨 무엇이 막혔는지 가리키지 못한다.
   **글자는 흐리게 하지 않는다** — 사유(`권한 없음`)와 조치 단추는 그대로 읽혀야 한다(P5-b). 비치는 판이라 고른 행 · 올린 행 색이 그대로 보인다 */
.tbl tbody tr[data-use-blocked] > td, .lr-row[data-use-blocked] { background-image: var(--hatch-over); }
.table-wrap .tbl tbody tr[data-use-blocked] > td:first-child { background-image: var(--hatch-over); }
/* 2026-09-17(QA M-1 · P7-l · P5): 고른 줄 · 올린 줄에서 무늬를 걷던 규칙을 없앤다 — 정본은 `막힌 줄 전체 빗금`(안 B)이고,
   무늬가 상태에 따라 사라지면 같은 막힘이 화면에서 두 모양이 된다. 대비는 무늬를 걷어서가 아니라 농도(--hatch-over .025)와
   고른 줄 바탕(--selection #E9F7F1) 두 값으로 맞췄다 — 실측 7.08:1(§2.4 흐린 글자 7:1 위).
   고른 줄 · 올린 줄 규칙은 `background` 묶음 속성이라 background-image를 none으로 되돌린다 — 같은 선택자 자리에서 무늬를 다시 얹어 둔다 */
.tbl tbody tr[data-use-blocked]:hover > td, .tbl tbody tr[data-use-blocked].selected > td,
.table-wrap .tbl tbody tr[data-use-blocked]:hover > td:first-child, .table-wrap .tbl tbody tr[data-use-blocked].selected > td:first-child,
.lr-row[data-use-blocked]:hover, .lr-row[data-use-blocked].selected { background-image: var(--hatch-over); }
/* 줄이 아닌 자리(못 쓰는 권한 타일 · 쓸 수 없는 카드)는 예전대로 제 상자가 받는다 */
.cap-tile[data-use-blocked-cell], .pick-card[data-use-blocked-cell] { background-image: var(--hatch-over); }
.use-detail { display: block; font-size: 14px; font-weight: 400; color: var(--ink-muted); }
/* 표 묶음 머리 행(MCP 카탈로그 서버별 묶음): <tr class="group-row"><th scope="rowgroup" colspan>.
   2026-09-16(P7-h): 예전 주석은 '묶음 이름이라 왼쪽 정렬(UXR-18 예외)'이라 적었지만 위 !important가 이겨 화면은 줄곧 가운데였다.
   사용자 결정 2026-09-14 '모든 표 가운데 정렬'을 따라 예외를 없애고 정렬 선언을 지운다 — th 정렬은 위 한 줄만 정한다 */
.tbl .group-row th, .table-wrap .tbl .group-row th:first-child { font-weight: 400; color: var(--ink); white-space: normal; background: var(--surface-subtle); border-bottom: 1px solid var(--border); height: 48px; }
.tbl .group-row .group-name { font-weight: 700; margin-right: 8px; }
.tbl .group-row .group-meta { color: var(--ink-muted); font-size: 14px; }
/* 다른 화면에서 주소로 짚어 들어온 행: 2초 옅은 바탕 뒤 사라짐(드로어 없이 행만 알린다) */
.tbl tr.row-flash td, .table-wrap .tbl tr.row-flash td:first-child { background: var(--selection); }
.tbl tr.row-flash-out td { transition: background-color .6s; }
/* 기한 D-Day (ui.dday · S15): D-2 먹색 · D-1 · D-Day 주황 · D+3 빨강 ! */
.dday { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.dday.soon { color: var(--warning); font-weight: 700; }
.dday.over { color: var(--danger); font-weight: 700; }

/* 드로어 항목 (ui.drawerSection · drawerActions · drawerLinks): 소제목 하나 · 행동 자리 하나 · 링크 모양 하나 */
.ds-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin: 8px 0 -4px; }
.ds-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.ds-head .help { margin-left: -6px; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ds { display: grid; gap: 12px; }
.ds-body { display: grid; gap: 8px; min-width: 0; }
.drawer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.drawer-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.resp-timeline { margin: 0; padding: 8px 10px; list-style: none; }
.resp-timeline li { display: inline; }
.resp-timeline li + li::before { content: "→"; margin: 0 6px; color: var(--ink-muted); }

/* 범례 (ui.legend) */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-muted); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.lg-mark { display: inline-block; flex: 0 0 auto; width: 22px; height: 10px; border: 1px solid var(--data-main); background: var(--data-main); }
.lg-mark.fc { background: var(--path-done); border-style: dashed; }
.lg-mark.dash { height: 0; border: 0; border-top: 2px dashed var(--ink); background: none; }
.lg-mark.line { height: 0; border: 0; border-top: 2px solid var(--data-main); background: none; }
.lg-mark.now { height: 0; border: 0; border-top: 3px solid var(--accent); box-shadow: 0 1px 0 var(--ink); background: none; }
.lg-mark.up { background: var(--delta-up); border-color: var(--delta-up); }
.lg-mark.down { background: var(--delta-down); border-color: var(--delta-down); }
.lg-mark.rest { background: var(--data-tertiary); border-color: var(--data-tertiary); }
.lg-mark.secondary { background: var(--data-secondary); border-color: var(--data-secondary); }

/* 조회 범위 (ui.scopePath) */
.scope-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 16px; }
.sp-label { display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink-muted); }
.sp-list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.sp-list li { display: inline-flex; align-items: center; }
.sp-list li + li::before { content: "›"; margin: 0 4px; color: var(--ink-muted); }
.sp-link { min-height: 32px; padding: 4px; border: 0; background: none; color: var(--action); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.sp-now { padding: 4px; font-weight: 600; }
.sp-count { font-size: 15px; color: var(--ink-muted); }
/* 경로 마지막 마디 = 아래 범위 고르기(2026-09-16 사용자 지시 "이런 느낌으로 그대로 유지"): 경로 모양은 그대로 두고
   지금 보는 곳 굵은 먹색 + 작은 ▾ 하나만 더 붙인다. 테두리 상자 · 단추 껍데기 · 드롭다운 모양을 씌우지 않는다 */
.sp-now:has(.sp-menu) { padding: 0; }
.sp-pick { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.sp-pick .menu-caret { border-left-width: 4px; border-right-width: 4px; border-top-width: 5px; color: var(--ink-muted); }
.sp-pick:hover, .sp-menu[open] > .sp-pick { text-decoration: underline; text-underline-offset: 2px; }
.sp-menu .menu-pop.sp-pop { max-height: min(420px, 70vh); overflow-y: auto; }

/* 사용 대비 한도 칸 (ui.usageCell): 값 → 막대 → 보조 → 칩 */
.usage-cell { display: grid; gap: 4px; min-width: 9em; justify-items: stretch; }
.uc-value { font-weight: 600; white-space: nowrap; }
.uc-sub { font-size: 14px; color: var(--ink-muted); }
.uc-chip { justify-self: start; }
/* 한 줄 사용률 칸(ui.usageCell inline): 값 고정 폭 오른쪽 정렬(열 안에서 세로로 가지런히) → 막대가 남는 폭 → 흐린 사유 */
.usage-cell.inline { display: flex; align-items: center; gap: var(--s3); min-width: 12em; }
.usage-cell.inline .uc-value { flex: 0 0 4.5rem; text-align: right; }
.usage-cell.inline .uc-value.over { color: var(--danger); }
.usage-cell.inline .mini-bar { flex: 1 1 auto; min-width: 72px; max-width: 320px; }   /* PW3 · PW7 막대는 넓은 칸에서도 320까지(남는 폭은 주 열이 가진다) */
.usage-cell.inline .uc-sub, .usage-cell.inline .uc-chip { flex: 0 1 auto; }
/* PW3-4 좁은 본문 칸에서는 사용률 칸만 줄인다(2026-09-16 사용자 지적 · P-PW3-4 · 파생 P6 · P7 · P9)
   조직 표에 `초과 시` 열이 붙으면서(P7-i 병합) 1100 폭에서 표가 본문 칸을 넘었다. 열은 뺄 수 없고 줄일 수 있는 자리는 이 막대 칸 하나뿐이다.
   가름값은 화면 폭이 아니라 본문 칸 폭(컨테이너 page)이다 — 1100 폭 본문 칸 1008 · 1280 폭 본문 칸 1188이라 1100 이하에서만 걸린다.
   넓은 폭 모양(값 4.5rem · 막대 72~320)은 그대로다. 드로어가 밀어 좁아진 본문 칸도 같은 규칙을 받는다 */
@container page (max-width: 1100px) {
  .usage-cell.inline { min-width: 8em; gap: var(--s2); }
  .usage-cell.inline .uc-value { flex: 0 0 3.4rem; }
  .usage-cell.inline .mini-bar { min-width: 48px; }
}

/* 빈 상태 한 줄 · 결과 칩 · 할 수 있음 · 없음 카드 */
.empty.compact { padding: 8px 0; border: 0; background: none; }
/* 드로어 · 표 칸 빈 상태는 흐린 한 줄(2026-09-16 · P-M6-2) — 굵게 띄우지 않는다 */
.empty.compact b { display: inline; margin: 0 6px 0 0; color: var(--ink-muted); font-weight: 400; }
.pick-card { border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface); }
.pick-card.selected, .pick-card[aria-selected="true"], .pick-card[aria-pressed="true"] { border: 2px solid var(--action); }
.card-blocked { border-style: dashed; border-color: var(--unavailable); background: var(--hatch); color: var(--ink); }
.card-reason { display: block; font-size: 14px; font-weight: 600; color: var(--unavailable); }

/* 두 축 카드 한 쌍 (ui.axisPair): 칸 ≥ 640px 2열 */
.axis-pair-wrap { container-type: inline-size; container-name: axispair; min-width: 0; }
.axis-pair-wrap .axis-pair { grid-template-columns: minmax(0, 1fr); }
@container axispair (min-width: 640px) { .axis-pair-wrap .axis-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@supports not (container-type: inline-size) { .axis-pair-wrap[data-cols="2"] .axis-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 머리 할 일 줄 나머지 */
.todo-rest { display: inline-flex; align-items: center; color: var(--ink-muted); }

/* 팝업 단추가 [닫기] 하나면 보조 모양(리뷰 04 L2) · 되돌릴 수 없는 [요청 취소]는 위험 테두리(L3) */
.modal-foot .right > .btn.primary:only-child[data-close] { background: var(--surface); border-color: var(--border-control); color: var(--action); }
.btn[data-cancel-req] { border-color: var(--danger); color: var(--danger); }

.request-input-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.request-input-heading h3 { margin: 0; font-size: 16px; }
.request-input-heading span { font-size: 14px; color: var(--ink-muted); }

.path-detail-content[hidden] { display: none; }
.path-detail.is-collapsed .path-detail-heading { margin-bottom: 0; }

/* 2026-09-15 비용과 예산 재구성: 한도 상향 요청 검토 정보(요청한 축 강조 · 레이블 먹색) · 머리 메뉴 [새 요청 ▾] · 연결된 요청 한 줄 */
.impact-row .ir-label, .impact-axis .ir-label { color: var(--ink); font-weight: 600; }
/* 두 축 블록은 같은 모양(왼쪽 띠 3 + 여백 8, 2026-09-16): 요청한 축만 초록 띠, 다른 축은 옅은 띠. 테두리 상자 · 안 카드는 두지 않는다(R5) */
.impact-axis { padding-left: 8px; border-left: 3px solid var(--border); }
.impact-axis.impact-main { border-left-color: var(--action); }
.head-menu > summary { display: inline-flex; align-items: center; gap: 8px; }
.head-menu .menu-caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform .15s; }
.head-menu[open] .menu-caret { transform: rotate(180deg); }
.req-related { display: grid; gap: 8px; }
.req-related li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* 표 페이지 나누기(ui.pager): 표 바로 아래 · 이전 · 몇 페이지 · 다음 */
.pager { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-top: var(--s3); }

/* 리스트 행 R1 (ui.listRows · 2026-09-15 사용자 승인 · DESIGN.md §5.5)
   왼쪽 이름 15px 600 + 보조 14px 흐림 │ 오른쪽 끝 고정 칸 둘(상태 → 행동, 비어도 자리 유지) · 한 줄 48 · 두 줄 64 · 행 사이 가는 선 · 그룹 머리 연한 바탕 */
.lr-wrap { container-type: inline-size; container-name: listrows; min-width: 0; }
.lr-list { list-style: none; margin: 0; padding: 0; }
.list-rows { border-top: 1px solid var(--border); }
.lr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--lr-state-w, 128px) var(--lr-act-w, 120px); align-items: center; column-gap: 16px; min-height: 48px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.lr-row.two { min-height: 64px; }
.lr-row.selected { background: var(--selection); }
.lr-row:not(:has(.lr-meta)) { grid-template-columns: minmax(0, 1fr) var(--lr-state-w, 128px) var(--lr-act-w, 120px); }
.lr-main { min-width: 0; }
.lr-name { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); overflow-wrap: break-word; }
.lr-sub { font-size: 14px; line-height: 1.45; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-meta { font-size: 14px; color: var(--ink-muted); white-space: nowrap; text-align: right; }
.lr-state { min-width: 0; font-size: 15px; }
.lr-act { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; }
.lr-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 40px; padding: 6px 12px; background: var(--surface-subtle); border-bottom: 1px solid var(--border); font-size: 14px; color: var(--ink-muted); }
.lr-group-head .group-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.lr-row.row-flash { background: var(--selection); }
/* 칸이 좁으면(560 미만) 상태 · 행동이 이름 아래 한 줄로 내려간다 */
@container listrows (max-width: 559px) {
  .lr-row, .lr-row:not(:has(.lr-meta)) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding-block: 10px; }
  .lr-main { grid-column: 1 / -1; }
  .lr-meta { text-align: left; grid-column: 1 / -1; }
  .lr-state { grid-column: 1; }
  .lr-act { grid-column: 2; }
  .lr-sub { white-space: normal; }
}

/* 시나리오 안내: 브랜드바와 별개인 접을 수 있는 시연 도구. */
.scn { position: fixed; right: 16px; bottom: 16px; z-index: 65; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - var(--topbar-h) - 32px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); box-shadow: var(--overlay); padding: 12px; word-break: keep-all; }
.scn[hidden], .scn-pill[hidden] { display: none; }
.scn-pill { position: fixed; right: 16px; bottom: 16px; z-index: 65; min-height: 40px; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border-control); background: var(--surface); box-shadow: var(--overlay); font-weight: 600; cursor: pointer; }
.scn ol { margin: 8px 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.scn li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: 14px; }
.scn li.done { color: var(--ink-muted); }
.scn li.now { font-weight: 600; }
.scn .scn-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.scn select { width: 100%; margin-top: 8px; }
body.drawer-open .scn, body.drawer-open .scn-pill { right: calc(var(--drawer-w, 400px) + 16px); }
@media (max-width: 959px) { body.drawer-open .scn, body.drawer-open .scn-pill { right: 16px; } }

.head-usage-controls { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.head-usage-controls .usage-refresh { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; padding: 0; }