/* ==== 디자인 토큰(UI 개선 1단계, docs/ui-improvement-plan.md) ====
   색은 아래 토큰으로만 쓴다(화면 규칙에 16진수 색을 직접 쓰지 않는다). 어두운 모드는 같은 이름의 값만 바꾼다.
   --on-* 는 그 색 배경 위의 글자색이다(어두운 모드에서는 밝은 배경색이 되므로 어두운 글자). */
:root {
  color-scheme: light dark; /* 기본 입력칸·달력·스크롤바도 모드를 따른다 */
  /* 바탕·글자 */
  /* 대비(WCAG AA, 6단계 점검): 글자 4.5:1 이상, 입력칸 테두리 3:1 이상 */
  --bg: #f4f6f7; --panel: #ffffff; --panel-alt: #eef1f4; --field-bg: #f8fafb; --line: #dfe5e8; --line-strong: #85939a;
  --text: #1b2b33; --muted: #56676f;
  /* 의미 색 */
  --accent: #077360; --accent-weak: #e3f4ef; --on-accent: #ffffff;
  --danger: #b3261e; --danger-weak: #fdeceb; --on-danger: #ffffff;
  --warn: #8a5a00; --warn-weak: #fff4dc;
  --info: #1d5fa8; --info-weak: #e6f0fb;
  --link: var(--accent);
  --pos: #2e7d32; --neg: var(--danger);       /* 이익·손실 금액 */
  --over: #1570c0;                           /* 입금 현황: 초과입금(밝은 파란색, 업무 답변 Q1) */
  --pin: #9e5c00; --on-pin: #ffffff;           /* 공지 상단 고정 */
  --on-badge: #ffffff;
  /* 상태 색(캠페인 집행전·집행중·집행완료·취소) */
  --pre: #1d5fa8; --peri: #087f68; --post: #4a5560; --cancel: #9a3b32;
  /* 차트 */
  --chart-bar: #a9d6ca; --chart-bar-sel: #087f68;
  --chart-pos: #8cc79a; --chart-pos-sel: #2e7d32; --chart-neg: #eba0a0; --chart-neg-sel: #b3261e;
  /* 그림자·덮개 */
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, .12); --backdrop: rgba(0, 0, 0, .45);
  /* 크기 단계: 간격 4·8·12·16·24, 글자 11·12·13·14·16·20·24 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
  --mx: 0px; --my: 0px; /* 화면 좌표 메뉴 위치(openPopupMenu가 요소마다 덮어씀) */
  --tx: 0px; --ty: 0px; /* 차트 말풍선 위치(chart.js가 덮어씀) */
  --radius: 6px; --radius-sm: 4px; --control-h: 34px; --control-h-sm: 28px;
  --font: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --mono: ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11181c; --panel: #1a2328; --panel-alt: #222d33; --field-bg: #141c20; --line: #2c3a41; --line-strong: #6b7d86;
    --text: #e4ebee; --muted: #93a4ad;
    --accent: #3ecbab; --accent-weak: #16352e; --on-accent: #0b1114;
    --danger: #ff8a80; --danger-weak: #3a1f1d; --on-danger: #0b1114;
    --warn: #ffcb6b; --warn-weak: #3a2f14;
    --info: #7fb4ee; --info-weak: #172a3d;
    --pos: #81c995;
    --over: #6cc0ff;
    --pin: #ffb74d; --on-pin: #0b1114;
    --on-badge: #0b1114;
    --pre: #7fb4ee; --peri: #3ecbab; --post: #a9b6bd; --cancel: #ff9b92;
    --chart-bar: #2b5e52; --chart-bar-sel: #3ecbab;
    --chart-pos: #3e7a50; --chart-pos-sel: #81c995; --chart-neg: #84403c; --chart-neg-sel: #ff8a80;
    --shadow-pop: 0 4px 14px rgba(0, 0, 0, .55); --backdrop: rgba(0, 0, 0, .6);
  }
}

/* ==== 기본 ==== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: var(--fs-base)/1.5 var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* ==== 폼 요소(모든 화면 공통: 검색칸·표 안 선택 상자·폼) ==== */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), select, textarea {
  height: var(--control-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--field-bg); color: var(--text); max-width: 100%;
}
textarea { height: auto; min-height: 64px; padding: var(--sp-2) 10px; resize: vertical; line-height: 1.5; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
[aria-invalid=true] { border-color: var(--danger) !important; }
input[type=file] { font-size: var(--fs-md); }
::placeholder { color: var(--muted); opacity: .8; }
.grid input:not([type=checkbox]):not([type=radio]), .grid select { height: var(--control-h-sm); padding: 0 6px; } /* 표 안은 낮게 */

.field { display: grid; gap: var(--sp-1); margin-bottom: 14px; }
.field label, .field > .lbl { font-size: var(--fs-md); color: var(--muted); }
.field .checks { min-height: var(--control-h); align-items: center; }
.field label.check { color: var(--text); }
.field-error { color: var(--danger); font-size: var(--fs-sm); margin-top: 2px; }
.field-error:empty { display: none; }
label.check { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-md); }
/* 폼 칸 배치: 기본은 칸 폭에 맞춰 자동, .cols-2는 두 칸 고정(.span-all은 한 줄 전체) */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }

/* ==== 버튼·알림 ==== */
.btn { height: var(--control-h); padding: 0 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--panel); }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn.primary:hover:not(:disabled), .btn.danger:hover:not(:disabled) { filter: brightness(1.08); }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { border-color: var(--line-strong); }
.btn.icon { width: 32px; height: 32px; padding: 0; font-size: var(--fs-lg); line-height: 1; }
.req { color: var(--danger); }
.banner { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); margin: 0 0 var(--sp-3); font-size: var(--fs-md); border: 1px solid transparent; }
.banner.error { background: var(--danger-weak); color: var(--danger); border-color: var(--danger); }
.banner.info { background: var(--info-weak); color: var(--info); }
.banner.warn { background: var(--warn-weak); color: var(--warn); }
.hint { font-size: var(--fs-sm); color: var(--muted); }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }
.linklike { background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; text-align: left; font: inherit; }
.linklike:hover { text-decoration: underline; }
a { color: var(--link); }

/* ==== 로그인 ==== */
.login-wrap { min-height: 100vh; min-height: 100dvh; /* #app 높이가 내용만큼이라 %로는 화면 가운데가 안 된다 */ display: grid; place-items: center; padding: var(--sp-4); }
.login-card { width: min(380px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.login-card h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); }
.login-card p.sub { margin: 0 0 var(--sp-5); color: var(--muted); font-size: var(--fs-md); }
.sample-note { margin-top: 18px; font-size: var(--fs-sm); color: var(--muted); }

/* ==== 셸 ==== */
.shell { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.topbar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar h1 { font-size: 15px; margin: 0; }
.topbar .grow { flex: 1; }
.chip { font-size: var(--fs-sm); padding: 2px var(--sp-2); border-radius: 999px; background: var(--warn-weak); color: var(--warn); }
.userbox { font-size: var(--fs-md); color: var(--muted); }
.main { display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.nav { background: var(--panel); border-right: 1px solid var(--line); overflow: auto; padding: var(--sp-2) 0; }
/* 메뉴 그룹 아코디언: 한 그룹만 펼침. 높이는 grid 행(0fr↔1fr) 전환으로 부드럽게 바뀐다. */
.nav-title { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--sp-2) var(--sp-4); border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.nav-title:hover { background: var(--accent-weak); }
.nav-title:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-title .chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .25s ease; opacity: .6; }
.nav-title[aria-expanded=true] .chev { transform: rotate(45deg); }
.nav-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .28s ease, opacity .28s ease; }
.nav-panel.open { grid-template-rows: 1fr; opacity: 1; }
.nav-panel > ul { min-height: 0; overflow: hidden; }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { .nav-panel, .nav-title .chev { transition: none; } }
.nav-item { display: block; width: 100%; text-align: left; padding: 5px var(--sp-4) 5px 28px; border: 0; background: none; font-size: var(--fs-md); }
.nav-item:hover:not(:disabled) { background: var(--accent-weak); }
.nav-item[aria-current=page] { background: var(--accent-weak); color: var(--accent); font-weight: 600; }
.nav-item.pending { color: var(--muted); }
.nav-badge { display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: var(--on-danger); font-size: var(--fs-xs); line-height: 18px; text-align: center; }
.workspace { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
.tabbar { display: flex; gap: 2px; padding: 6px var(--sp-3) 0; border-bottom: 1px solid var(--line); overflow-x: auto; background: var(--bg); }
.tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--panel); white-space: nowrap; }
.tab[aria-selected=true] { color: var(--accent); font-weight: 600; background: var(--panel); }
.tab:not([aria-selected=true]) { background: var(--bg); color: var(--muted); }
.tab .x { border: 0; background: none; padding: 0 2px; color: var(--muted); }
.tabpanels { overflow: auto; padding: 14px; min-height: 0; }
.statusbar { padding: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); background: var(--panel); border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
/* 셸 높이: 창 전체가 아니라 화면 영역(.tabpanels)만 스크롤되게 */
.shell { height: 100vh; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
.main, .workspace { min-height: 0; overflow: hidden; }
.workspace { grid-template-columns: minmax(0, 1fr); } /* 넓은 표가 화면 폭을 밀어내지 않게(표 안에서 가로 스크롤) */
.main { transition: grid-template-columns .2s ease; }
.main { grid-template-columns: 220px minmax(0, 1fr); }
.main.nav-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.main.nav-collapsed .nav { visibility: hidden; border-right: 0; }
@media (prefers-reduced-motion: reduce) { .main { transition: none; } }
.nav-search-box { padding: 0 var(--sp-3) var(--sp-2); }
.nav-search { width: 100%; height: var(--control-h-sm) !important; }
.tabbar-row { display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); background: var(--bg); min-width: 0; }
.tabbar-row .tabbar { flex: 1; border-bottom: 0; min-width: 0; }
.tab-list-btn { margin: 0 var(--sp-2) 2px; }
/* 작은 메뉴(사용자 메뉴·탭 메뉴·열린 탭 목록) */
.menu-anchor { position: relative; }
.popup-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 180px; max-height: 60vh; overflow: auto; margin: 0; padding: var(--sp-1); list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.popup-menu.align-end { left: auto; right: 0; }
.popup-menu.at-point { position: fixed; left: var(--mx); top: var(--my); }
.menu-item { display: block; width: 100%; text-align: left; padding: 6px var(--sp-3); border: 0; border-radius: var(--radius-sm); background: none; white-space: nowrap; }
.menu-item:hover:not(:disabled), .menu-item:focus { background: var(--accent-weak); outline: none; }
.menu-item.danger { color: var(--danger); }
.menu-sep { height: 1px; margin: var(--sp-1) 0; background: var(--line); }
.user-btn { display: inline-flex; align-items: center; gap: 6px; }
.user-btn .user-team { color: var(--muted); font-size: var(--fs-md); }
.user-btn .chev-down { color: var(--muted); font-size: var(--fs-xs); }
.nav-backdrop { display: none; }
.skip-link { position: absolute; left: var(--sp-2); top: -100px; z-index: 100; padding: var(--sp-2) var(--sp-3); background: var(--accent); color: var(--on-accent); border-radius: var(--radius); }
.skip-link:focus { top: var(--sp-2); }
.tabpanels:focus { outline: none; }
/* 태블릿·모바일(1024px 이하): 메뉴는 왼쪽 서랍(덮개). 작업 공간은 전체 폭 */
@media (max-width: 1024px) {
  .main, .main.nav-collapsed { grid-template-columns: minmax(0, 1fr); position: relative; }
  .nav { position: absolute; z-index: 40; top: 0; bottom: 0; left: 0; width: min(280px, 85vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; box-shadow: var(--shadow-pop); }
  .main.drawer-open .nav { transform: none; visibility: visible; }
  .main.drawer-open .nav-backdrop { display: block; position: absolute; inset: 0; z-index: 39; background: var(--backdrop); }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .nav { transition: none; } }
@media (max-width: 760px) {
  .topbar { gap: var(--sp-2); padding: var(--sp-2); }
  .topbar h1 { font-size: var(--fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar .chip, .user-btn .user-team { display: none; }
  .user-btn .user-name { max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabpanels { padding: var(--sp-2); }
  .page-actions { width: 100%; }
  .filter-buttons { width: 100%; justify-content: flex-end; }
  .filter-bar .field { min-width: 0; flex: 1 1 140px; }
}

/* ==== 화면 공통: 카드·검색 영역·요약 카드 ==== */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) 14px; margin-bottom: var(--sp-3); }
.filterbar { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; }
.filterbar .group { display: grid; gap: var(--sp-1); }
.filterbar .group > span.lbl { font-size: var(--fs-sm); color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.checks label { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-md); }
.range { display: flex; gap: 6px; align-items: center; }
.type-checks { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-2) 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: var(--sp-3); }
.stat { text-align: left; padding: 10px var(--sp-3); border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); border-left-width: 4px; }
.stat .n { font-size: var(--fs-2xl); font-weight: 700; display: block; }
.stat .t { font-size: var(--fs-sm); color: var(--muted); }
.stat[aria-pressed=true] { background: var(--accent-weak); border-color: var(--accent); }
.stat.all { border-left-color: var(--accent); } .stat.s10 { border-left-color: var(--pre); } .stat.s20 { border-left-color: var(--peri); }
.stat.s30 { border-left-color: var(--post); } .stat.s90 { border-left-color: var(--cancel); }
.stat.r1 { border-left-color: var(--info); } .stat.r2 { border-left-color: var(--accent); } .stat.r3 { border-left-color: var(--warn); } .stat.r4 { border-left-color: var(--danger); }

/* ==== 목록 표 ==== */
.gridwrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
table.grid { border-collapse: collapse; width: 100%; font-size: var(--fs-md); }
.grid th, .grid td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.grid th { position: sticky; top: 0; background: var(--panel-alt); font-weight: 600; z-index: 1; }
.grid th button { all: unset; cursor: pointer; display: inline-flex; gap: var(--sp-1); align-items: center; }
.grid th button:focus-visible { outline: 2px solid var(--accent); }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tbody tr.clickable { cursor: pointer; }
.grid tbody tr.clickable:hover { background: var(--accent-weak); }
.grid tbody tr[aria-selected=true] { background: var(--accent-weak); outline: 1px solid var(--accent); outline-offset: -1px; }
.grid.dense th, .grid.dense td { padding: var(--sp-1) var(--sp-2); }
.grid td .btn { height: var(--control-h-sm); padding: 0 10px; font-size: var(--fs-md); } /* 표 안 버튼은 낮게(행 높이 유지) */
/* 고정 열: 첫 열(왼쪽)·행 동작 열(오른쪽). 겹친 내용을 가리도록 바탕색을 칠한다 */
.grid .sticky-start, .grid .sticky-end { position: sticky; z-index: 1; background: var(--panel); }
.grid .sticky-start { left: 0; box-shadow: inset -1px 0 0 var(--line); }
.grid .sticky-end { right: 0; box-shadow: inset 1px 0 0 var(--line); }
.grid th.sticky-start, .grid th.sticky-end { z-index: 3; background: var(--panel-alt); }
.grid tbody tr.clickable:hover > .sticky-start, .grid tbody tr.clickable:hover > .sticky-end,
.grid tbody tr[aria-selected=true] > .sticky-start, .grid tbody tr[aria-selected=true] > .sticky-end { background: var(--accent-weak); }
/* 표 안 안내(불러오는 중·없음·오류) */
.grid tr.grid-msg td { text-align: center; color: var(--muted); padding: 28px 10px; white-space: normal; }
.grid tr.grid-msg.error td { color: var(--danger); }
.grid td.name { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.grid tbody th { position: static; background: none; z-index: auto; } /* 행 머리글은 고정하지 않는다(열 머리글만 위에 고정) */
.grid tfoot th { position: static; border-top: 2px solid var(--line); }
.gridfoot { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; padding: var(--sp-2) var(--sp-1); font-size: var(--fs-md); }
.pager { display: flex; gap: 6px; align-items: center; }
.row-actions { display: inline-flex; gap: var(--sp-1); }

/* ==== 상태 배지·금액 강조 ==== */
.badge { display: inline-block; min-width: 56px; padding: 0 var(--sp-2); border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 20px; text-align: center; color: var(--on-badge); white-space: nowrap; }
/* 상태 배지 색(StatusBadge, components.js의 STATUS 표가 정한다) */
.badge.t-draft { background: transparent; color: var(--muted); border-color: var(--line-strong); }
.badge.t-info { background: var(--info); }
.badge.t-progress { background: var(--accent); }
.badge.t-done { background: var(--post); }
.badge.t-warn { background: var(--warn); }
.badge.t-danger { background: var(--danger); }
.badge.t-cancel { background: var(--cancel); }
.badge.s10 { background: var(--pre); } .badge.s20 { background: var(--peri); } .badge.s30 { background: var(--post); } .badge.s90 { background: var(--cancel); }
.badge.r1 { background: var(--info); } .badge.r2 { background: var(--accent); } .badge.r3 { background: var(--warn); } .badge.r4 { background: var(--danger); }
.badge.plain { background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.badge.pin { background: var(--pin); color: var(--on-pin); min-width: 0; padding: 0 6px; }
.num.neg-warn { color: var(--danger); font-weight: 600; }
.neg { color: var(--neg); }
.calc-diff { color: var(--warn); font-weight: 600; }
/* 입금 현황: 초과입금 금액은 밝은 파란색, 미수 잔액은 빨간색(업무 답변 Q1) */
.over { color: var(--over); font-weight: 600; }
.owed { color: var(--danger); font-weight: 600; }

/* ==== 상세(키-값) ==== */
.detail { display: grid; gap: var(--sp-3); }
.detail h2 { margin: 0; font-size: var(--fs-lg); }
.detail-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
/* .kv: 이름(위)·값(아래) 묶음을 여러 칸으로. 자식 div마다 <span class="k">이름</span><span>값</span> */
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-2) var(--sp-4); }
.kv div span { display: block; }
.kv .k { font-size: var(--fs-sm); color: var(--muted); }
/* .kv-grid > .kv-row: "이름  값"을 한 줄씩 */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0; }
.kv-row { display: flex; gap: var(--sp-2); font-size: var(--fs-md); }
.kv-row .k { color: var(--muted); min-width: 84px; }

/* ==== 대화상자 ==== */
dialog.confirm { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); width: min(420px, 92vw); background: var(--panel); color: var(--text); box-shadow: var(--shadow-pop); }
dialog.confirm::backdrop { background: var(--backdrop); }
dialog.confirm h3 { margin: 0 0 var(--sp-2); }
dialog.confirm .btns { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }
dialog.confirm.form { width: min(560px, 94vw); max-height: 92vh; overflow: auto; }
dialog.confirm.form.wide { width: min(780px, 94vw); }
.form-banner:empty { display: none; }

/* ==== 화면 머리(PageHeader) ==== */
.page-header { margin-bottom: var(--sp-3); }
.page-title-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.page-title { margin: 0; font-size: var(--fs-lg); flex: 1 1 auto; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.page-actions label.check { height: var(--control-h); padding: 0 var(--sp-2); }
.page-desc { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--muted); }
details.page-desc summary { cursor: pointer; width: max-content; }
details.page-desc p { margin: var(--sp-1) 0 0; }

/* ==== 검색 영역(FilterBar): 조건은 왼쪽, 버튼은 오른쪽 끝 ==== */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) 14px; margin-bottom: var(--sp-3); }
.filter-fields, .filter-more { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2) var(--sp-3); }
.filter-fields { flex: 1 1 auto; }
.filter-bar .field { margin-bottom: 0; min-width: 150px; }
.filter-bar .field.grow { flex: 1 1 240px; }
.filter-buttons { display: flex; gap: var(--sp-2); margin-left: auto; }
.filter-more { flex-basis: 100%; padding-top: var(--sp-2); border-top: 1px dashed var(--line); }

/* ==== 목록 + 오른쪽 상세(DetailPanel) ==== */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.split.has-detail.dw-sm { grid-template-columns: minmax(0, 1fr) 360px; }
.split.has-detail.dw-md { grid-template-columns: minmax(0, 1fr) 480px; }
.split.has-detail.dw-lg { grid-template-columns: minmax(0, 1fr) 640px; }
.split-main { min-width: 0; }
.detail-panel { position: sticky; top: 0; max-height: calc(100vh - 150px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.detail-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); background: var(--panel); border-bottom: 1px solid var(--line); }
.detail-title { flex: 1; margin: 0; font-size: var(--fs-lg); }
.detail-title:focus { outline: none; } /* 열릴 때 제목으로 포커스를 옮긴다(읽기 시작점). 누를 수 있는 요소가 아니다 */
.detail-tools { display: flex; gap: var(--sp-1); }
.detail-body { padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); }
@media (max-width: 1099px) {
  .split.has-detail.dw-sm, .split.has-detail.dw-md, .split.has-detail.dw-lg { grid-template-columns: minmax(0, 1fr); }
  .detail-panel { position: fixed; inset: 0; z-index: 30; max-height: none; border-radius: 0; border: 0; }
  .detail-tools .dp-width { display: none; } /* 전체 화면에서는 폭 조절이 의미 없다 */
}

/* ==== 부품 견본 화면(/ui-gallery.html) ==== */
.gallery { max-width: 1400px; margin: 0 auto; padding: var(--sp-4); }
.gallery-section { margin-top: var(--sp-3); }
.gallery-section h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.gallery-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 6px 0; }
.gallery-row .code { min-width: 130px; }

/* ==== 알림(toast): 오른쪽 아래, 최대 3개 ==== */
.toasts { position: fixed; right: var(--sp-4); bottom: 40px; z-index: 50; display: grid; gap: var(--sp-2); width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 10px var(--sp-3); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: var(--fs-md); animation: toast-in .2s ease; transition: opacity .2s ease, transform .2s ease; }
.toast.info { border-left-color: var(--info); }
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
.toast.leaving { opacity: 0; transform: translateY(4px); }
.toast-msg { flex: 1; }
.toast-x { border: 0; background: none; color: var(--muted); font-size: var(--fs-lg); line-height: 1; padding: 0 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; transition: none; } }

/* ==== 업무 현황 흐름도 ==== */
.lane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; margin-bottom: var(--sp-3); }
.lane h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); color: var(--muted); font-weight: 600; }
.laneflow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.stack { display: grid; gap: var(--sp-2); }
.arrow { color: var(--muted); font-size: var(--fs-xl); }
.lanegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-3); }
.node { display: grid; justify-items: center; gap: 2px; min-width: 150px; padding: 10px var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); text-align: center; font: inherit; color: inherit; }
button.node.link { cursor: pointer; border-color: var(--accent); }
button.node.link:hover { background: var(--accent-weak); }
.node .count { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-weak); color: var(--accent); font-size: var(--fs-xl); font-weight: 700; border: 2px solid var(--accent); }
.node .count.na { background: var(--bg); color: var(--muted); border: 2px dashed var(--line); }
.node .nlabel { font-size: var(--fs-md); font-weight: 600; }
.node .ndetail { font-size: var(--fs-xs); color: var(--muted); max-width: 190px; }
.node.unavailable { opacity: .75; border-style: dashed; }

/* ==== 권한 관리·사용자 관리 ==== */
.perm-tabs { display: flex; gap: 6px; margin: var(--sp-2) 0; }
.perm-tabs .btn[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.perm-scroll { overflow: auto; max-height: 70vh; }
.perm-grid th, .perm-grid td { padding: var(--sp-1) var(--sp-2); white-space: nowrap; }
.perm-grid .perm-group th { background: var(--panel-alt); color: var(--muted); text-align: left; }
.perm-grid .code { color: var(--muted); font-size: var(--fs-xs); }
.perm-grid .fixed { color: var(--muted); font-size: var(--fs-sm); }
.perm-split { display: flex; gap: var(--sp-4); align-items: flex-start; }
.perm-accounts { list-style: none; margin: 0; padding: 0; min-width: 240px; max-height: 70vh; overflow: auto; }
.perm-accounts .nav-item { width: 100%; text-align: left; }
.perm-accounts .nav-item.sel { font-weight: 600; }
.perm-accounts .sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
.perm-detail { flex: 1; overflow: auto; max-height: 70vh; }
.user-list { flex: 1; min-width: 0; max-height: 70vh; }
.user-detail { flex: 0 0 340px; }
.user-detail .kv { margin: 6px 0 var(--sp-3); }
.code { color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 900px) { .perm-split { flex-direction: column; align-items: stretch; } .user-detail { flex-basis: auto; } }
.temp-pw-box { border: 2px solid var(--warn); }
.temp-pw { display: inline-block; font: 600 18px/1.4 var(--mono); padding: var(--sp-1) 10px; background: var(--bg); border-radius: var(--radius-sm); user-select: all; }

/* ==== 월간매출 대시보드·매출이익 차트 ==== */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-4); }
.kpi { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: var(--sp-3) 14px; }
.kpi-label { font-size: var(--fs-sm); color: var(--muted); }
.kpi-value { font-size: var(--fs-xl); font-weight: 700; margin-top: var(--sp-1); }
.kpi-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.sd-chart { width: 100%; height: auto; max-width: 900px; display: block; }
.sd-bar { fill: var(--chart-bar); }
.sd-bar.sel { fill: var(--chart-bar-sel); }
.sd-bar.pos { fill: var(--chart-pos); }
.sd-bar.neg { fill: var(--chart-neg); }
.sd-bar.pos.sel { fill: var(--chart-pos-sel); }
.sd-bar.neg.sel { fill: var(--chart-neg-sel); }
.sd-grid { stroke: var(--line); stroke-width: 1; }
.sd-zero { stroke: var(--muted); stroke-width: 1.5; }
.sd-axis { font-size: var(--fs-xs); fill: var(--muted); }
/* 막대 차트 부품(chart.js) */
.chart-fig { margin: 0; }
.chart-title { font-weight: 600; margin-bottom: var(--sp-2); }
.chart { position: relative; }
.sd-bar { cursor: pointer; transition: opacity .15s ease; }
.sd-bar:hover, .sd-bar:focus { opacity: .8; outline: none; stroke: var(--text); stroke-width: 1.5; }
.sd-axis.sel { fill: var(--text); font-weight: 700; }
.sd-value { font-size: var(--fs-sm); font-weight: 700; fill: var(--text); }
.chart-tip { position: absolute; left: var(--tx); top: var(--ty); transform: translate(-50%, calc(-100% - 6px)); padding: var(--sp-1) var(--sp-2); background: var(--text); color: var(--panel); border-radius: var(--radius-sm); font-size: var(--fs-sm); white-space: nowrap; pointer-events: none; z-index: 5; }
.chart-legend { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.chart-legend .lg::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: var(--sp-1); border-radius: 2px; vertical-align: -1px; }
.chart-legend .lg.pos::before { background: var(--chart-pos); }
.chart-legend .lg.neg::before { background: var(--chart-neg); }
.chart-legend .lg.sel::before { background: var(--text); }
.chart-table { margin-top: var(--sp-2); font-size: var(--fs-md); }
.chart-table summary { cursor: pointer; color: var(--muted); width: max-content; }
.chart-table table { max-width: 360px; margin-top: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .sd-bar { transition: none; } }
.sd-top { max-width: 520px; padding-left: var(--sp-5); }
.sd-top li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 3px 0; border-bottom: 1px solid var(--line); }
.finance { margin-top: var(--sp-2); }
.finance table { max-width: 520px; }

/* ==== 공지·회의·바로가기 ==== */
.notice-body { white-space: pre-wrap; line-height: 1.6; margin: var(--sp-2) 0; }
.files { padding-left: 18px; }
.files li { margin: var(--sp-1) 0; display: flex; gap: var(--sp-2); align-items: center; }
.meeting-list, .quick-links { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.quick-links { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.quick-links .unused { opacity: .6; }
.meeting-head { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; }
.linklike.unread, .grid .unread { font-weight: 700; }
.new-dot { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; }
.readers ul { margin: var(--sp-1) 0 0; padding-left: 18px; font-size: var(--fs-md); }

/* ==== 캠페인 선택기 ==== */
.picker { position: relative; }
.picker-list { position: absolute; z-index: 5; left: 0; right: 0; max-height: 240px; overflow: auto; margin: 2px 0 0; padding: var(--sp-1); list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.picker-item { width: 100%; text-align: left; background: none; border: 0; padding: 6px var(--sp-2); cursor: pointer; font: inherit; color: inherit; }
.picker-item:hover, .picker-item:focus { background: var(--accent-weak); outline: 2px solid var(--accent); outline-offset: -2px; }
.picker-chosen { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-1); font-size: var(--fs-md); }

/* ==== 바로빌 매칭 ==== */
.bb-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.bb-cands li { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bb-cands li.nofit { opacity: .75; }