/* DeepWork 관리자 콘솔. 폐쇄망 전용: 외부 글꼴·CDN·아이콘 라이브러리를 쓰지 않는다. */
:root {
  --brand-900: #0f2747; --brand-700: #173a6b; --brand-50: #eef2f8;
  --accent-700: #1a4fa8; --accent-600: #2563c9; --accent-100: #d6e4f8; --accent-50: #eaf1fc;
  --gray-0: #fff; --gray-25: #f9fafb; --gray-50: #f4f5f7; --gray-100: #eceef1; --gray-200: #e1e4e9;
  --gray-300: #c9cdd5; --gray-400: #a3a9b5; --gray-500: #7a8190; --gray-600: #59606e; --gray-700: #3d4452;
  --gray-800: #2a303b; --gray-900: #1a1f27;
  --success-700: #18794a; --success-200: #bfe5cc; --success-50: #e7f5ec;
  --warning-700: #9a5b00; --warning-200: #f7d9a0; --warning-50: #fff4db;
  --danger-800: #a11e24; --danger-700: #c0262d; --danger-200: #f5c2bf; --danger-50: #fdecec;
  --diff-add-bg: #eaf6ee; --diff-add-gutter: #d5eedd; --diff-add-word: #bfe5cc;
  --diff-del-bg: #fdedec; --diff-del-gutter: #f7d4d2; --diff-del-word: #f5c2bf;
  --font: "Pretendard", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", "Nanum Gothic", system-ui, sans-serif;
  --mono: "D2Coding", "Cascadia Mono", Consolas, "Malgun Gothic", monospace;
  --shadow-1: 0 1px 2px rgb(16 24 40 / .06);
  --shadow-2: 0 4px 12px rgb(16 24 40 / .10);
  --shadow-3: 0 12px 32px rgb(16 24 40 / .18);
  --header: 56px; --sidebar: 232px; --gutter: 24px;
}
@media (min-width: 1440px) { :root { --gutter: 32px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/24px var(--font); color: var(--gray-900); background: var(--gray-50); letter-spacing: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent-700); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--mono); font-size: 14px; }
.muted { color: var(--gray-600); }
.small { font-size: 13px; line-height: 18px; }
.nowrap { white-space: nowrap; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--gray-0); padding: 8px 12px; border-radius: 4px; box-shadow: var(--shadow-2); }
.skip:focus { top: 8px; }
svg.i { width: 16px; height: 16px; flex: none; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: var(--header) 1fr; min-height: 100vh;
  background: linear-gradient(90deg, var(--gray-0) calc(var(--sidebar) - 1px), var(--gray-200) calc(var(--sidebar) - 1px), var(--gray-200) var(--sidebar), transparent var(--sidebar)); }
.topbar { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 16px 0 20px; background: var(--brand-700); color: #fff; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; }
.brand small { font-size: 15px; font-weight: 400; color: #c9d4e5; }
.env { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; font-size: 13px; font-weight: 700;
  border: 1px solid #f7d9a0; color: #ffe8b8; }
.env.prod { border-color: #ff9c97; color: #ffd2cf; background: rgb(192 38 45 / .35); }
.menu-toggle { display: none; width: 36px; height: 36px; border: 0; border-radius: 4px; background: transparent; color: #fff; cursor: pointer; }
.menu-toggle:hover { background: var(--brand-900); }
.userbtn { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; text-align: left; }
.userbtn:hover, .userbtn[aria-expanded="true"] { background: var(--brand-900); }
.avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--brand-700); font-size: 13px; font-weight: 700; }
.userbtn .who { display: flex; flex-direction: column; line-height: 18px; }
.userbtn .who b { font-size: 15px; }
.userbtn .who span { font-size: 13px; color: #c9d4e5; }
.idle { font-size: 13px; color: #c9d4e5; white-space: nowrap; }
.idle.warn { color: #ffd27a; font-weight: 700; }
.usermenu { position: absolute; right: 12px; top: calc(var(--header) - 4px); width: 300px; background: var(--gray-0); color: var(--gray-900);
  border: 1px solid var(--gray-200); border-radius: 6px; box-shadow: var(--shadow-2); padding: 8px 0; z-index: 40; }
.usermenu .um-head { padding: 8px 16px 12px; border-bottom: 1px solid var(--gray-200); }
.usermenu .um-head b { display: block; }
.usermenu dl { margin: 8px 16px; font-size: 13px; line-height: 20px; display: grid; grid-template-columns: 84px 1fr; gap: 2px 8px; }
.usermenu dt { color: var(--gray-600); }
.usermenu dd { margin: 0; }
.usermenu button { display: block; width: 100%; text-align: left; padding: 8px 16px; border: 0; background: none; cursor: pointer; }
.usermenu button:hover { background: var(--gray-50); }
.usermenu hr { border: 0; border-top: 1px solid var(--gray-200); margin: 6px 0; }

.sidebar { background: var(--gray-0); border-right: 1px solid var(--gray-200); padding: 12px 0 24px; position: sticky; top: var(--header);
  height: calc(100vh - var(--header)); overflow-y: auto; }
.nav-group { padding: 16px 20px 6px; font-size: 13px; color: var(--gray-600); }
.nav a { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 20px; color: var(--gray-800); text-decoration: none; }
.nav a:hover { background: var(--gray-50); }
.nav a[aria-current="page"] { background: var(--accent-50); color: var(--accent-700); font-weight: 700; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--accent-600); }
.nav a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.nav .count { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--accent-600); color: #fff;
  font-size: 13px; line-height: 22px; text-align: center; font-weight: 700; }
.content { min-width: 0; padding: 24px var(--gutter) 64px; }
.content > * + * { margin-top: 20px; }

/* ---------- page head ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.crumb { font-size: 13px; color: var(--gray-600); }
.crumb a { color: var(--gray-600); }
.page-head h1 { font-size: 22px; line-height: 30px; letter-spacing: -.01em; }
[data-page-title]:focus { outline: none; }
.page-head .desc { margin-top: 4px; color: var(--gray-600); max-width: 76ch; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; padding-top: 14px; }
.updated { font-size: 13px; color: var(--gray-600); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 4px;
  border: 1px solid var(--gray-300); background: var(--gray-0); color: var(--gray-900); font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--gray-50); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--gray-100); color: var(--gray-500); border-color: var(--gray-200); }
.btn-primary { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-primary:hover { background: var(--accent-700); border-color: var(--accent-700); }
.btn-danger { background: var(--danger-700); border-color: var(--danger-700); color: #fff; }
.btn-danger:hover { background: var(--danger-800); border-color: var(--danger-800); }
.btn-danger-outline { color: var(--danger-700); border-color: var(--danger-200); }
.btn-danger-outline:hover { background: var(--danger-50); }
.btn-text { border-color: transparent; background: transparent; color: var(--accent-700); padding: 0 8px; }
.btn-text:hover { background: transparent; text-decoration: underline; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
.btn-lg { height: 48px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: 36px; padding: 0; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.kpi { display: block; text-align: left; padding: 16px 20px; border: 1px solid var(--gray-200); border-radius: 6px; background: var(--gray-0);
  box-shadow: var(--shadow-1); color: inherit; text-decoration: none; cursor: pointer; font: inherit; width: 100%; }
a.kpi:hover, button.kpi:hover { border-color: var(--accent-100); background: var(--gray-25); text-decoration: none; }
.kpi-label { font-size: 14px; color: var(--gray-600); }
.kpi-value { display: block; font-size: 28px; line-height: 36px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi-sub { display: block; font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.kpi.alert .kpi-value { color: var(--danger-700); }
.kpi.attention .kpi-value { color: var(--warning-700); }
.home-group { margin-top: 28px; }
.home-group > h2 { font-size: 18px; line-height: 26px; margin-bottom: 12px; }

/* ---------- panel, toolbar ---------- */
.panel { background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 6px; box-shadow: var(--shadow-1); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
.panel-head h2 { font-size: 18px; line-height: 26px; }
.panel-body { padding: 20px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; border-bottom: 1px solid var(--gray-200); }
.toolbar .grow { flex: 1; }
.search { position: relative; width: 320px; max-width: 100%; }
.search svg { position: absolute; left: 10px; top: 10px; color: var(--gray-500); }
.search input { width: 100%; height: 36px; padding: 0 34px 0 34px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--gray-0); }
.search input:hover { border-color: var(--gray-400); }
/* The custom clear button replaces the browser one (Edge/Chrome draw their own x in type=search). */
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search .clear { position: absolute; right: 4px; top: 4px; width: 28px; height: 28px; border: 0; background: none; color: var(--gray-600); cursor: pointer; border-radius: 4px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--gray-300); border-radius: 999px;
  background: var(--gray-0); font-size: 14px; cursor: pointer; white-space: nowrap; }
.chip:hover { background: var(--gray-50); }
.chip[aria-pressed="true"] { background: var(--accent-50); border-color: var(--accent-600); color: var(--accent-700); font-weight: 700; }
.chip .n { font-variant-numeric: tabular-nums; color: var(--gray-600); font-weight: 400; }
.chip[aria-pressed="true"] .n { color: var(--accent-700); }
.seg { display: inline-flex; border: 1px solid var(--gray-300); border-radius: 4px; overflow: hidden; }
.seg button { height: 32px; padding: 0 12px; border: 0; border-left: 1px solid var(--gray-300); background: var(--gray-0); font-size: 14px; cursor: pointer; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--accent-50); color: var(--accent-700); font-weight: 700; }
.tb-label { font-size: 14px; color: var(--gray-700); font-weight: 700; }
.result-count { font-size: 14px; color: var(--gray-600); white-space: nowrap; }
.filter-summary { display: flex; align-items: center; gap: 8px; padding: 8px 20px; font-size: 14px; color: var(--gray-700); background: var(--gray-25); border-bottom: 1px solid var(--gray-200); }
.toolbar select, .toolbar input[type="datetime-local"], .toolbar input[type="text"].sm { height: 32px; padding: 0 8px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--gray-0); font-size: 14px; }

/* ---------- tables ---------- */
.table-wrap { overflow: auto; max-height: calc(100vh - var(--header) - 120px); }
.table-wrap.short { max-height: none; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
table.data th { position: sticky; top: 0; z-index: 2; background: var(--gray-50); color: var(--gray-700); font-size: 14px; font-weight: 700; text-align: left;
  padding: 9px 12px; border-bottom: 1px solid var(--gray-300); white-space: nowrap; }
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
table.data th:first-child, table.data td:first-child { padding-left: 20px; }
table.data th:last-child, table.data td:last-child { padding-right: 20px; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tbody tr:hover td { background: var(--gray-25); }
table.data tr.clickable { cursor: pointer; }
table.data tr.dim td { color: var(--gray-600); }
table.data tr.is-selected td { background: var(--accent-50); }
table.data tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent-600); }
table.data.dense td { padding-top: 7px; padding-bottom: 7px; }
table.data th.actions, table.data td.actions { position: sticky; right: 0; text-align: right; white-space: nowrap; }
table.data td.actions { background: var(--gray-0); box-shadow: -8px 0 8px -8px rgb(16 24 40 / .15); }
table.data th.actions { z-index: 3; box-shadow: -8px 0 8px -8px rgb(16 24 40 / .15); }
table.data td.actions .btn + .btn { margin-left: 6px; }
.sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: inherit; font-weight: 700; cursor: pointer; }
.sort svg { width: 12px; height: 12px; color: var(--gray-500); }
th[aria-sort] .sort svg { color: var(--accent-600); }
.row-link { border: 0; padding: 0; background: none; font: inherit; font-weight: 700; color: var(--gray-900); text-align: left; cursor: pointer; }
.row-link:hover { color: var(--accent-700); text-decoration: underline; }
.sub { display: block; font-size: 13px; line-height: 18px; color: var(--gray-600); }
.trunc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 46ch; }
.trunc1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--gray-200); font-size: 14px; color: var(--gray-700); }
.pager .pg { display: flex; align-items: center; gap: 6px; }
.pager select { height: 32px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--gray-0); padding: 0 6px; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--gray-200);
  background: var(--gray-100); color: var(--gray-700); font-size: 13px; font-weight: 700; white-space: nowrap; vertical-align: middle; }
.badge svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.badge.ok { background: var(--success-50); border-color: var(--success-200); color: var(--success-700); }
.badge.warn { background: var(--warning-50); border-color: var(--warning-200); color: var(--warning-700); }
.badge.err { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }
.badge.info { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.badge + .badge { margin-left: 4px; }
.okt { display: inline-flex; align-items: center; gap: 4px; color: var(--gray-600); font-size: 14px; }
.okt svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- empty, error, skeleton ---------- */
.state { text-align: center; padding: 48px 24px; }
.state svg { width: 40px; height: 40px; color: var(--gray-400); fill: none; stroke: currentColor; stroke-width: 1.5; }
.state h3 { font-size: 16px; line-height: 24px; margin-top: 12px; }
.state p { color: var(--gray-600); margin: 4px auto 0; max-width: 60ch; }
.state .btn { margin-top: 16px; }
.state.error svg { color: var(--danger-700); }
.state .code { margin-top: 8px; font-size: 13px; color: var(--gray-600); }
.skel td span { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--gray-100), var(--gray-50), var(--gray-100)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel td span, .btn[aria-busy="true"]::before { animation: none; } }

/* ---------- banners ---------- */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 6px; border: 1px solid var(--accent-100); background: var(--accent-50); color: var(--gray-900); }
.banner svg { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--accent-700); fill: none; stroke: currentColor; stroke-width: 1.8; }
.banner.warn { background: var(--warning-50); border-color: var(--warning-200); }
.banner.warn svg { color: var(--warning-700); }
.banner.err { background: var(--danger-50); border-color: var(--danger-200); }
.banner.err svg { color: var(--danger-700); }
.banner b { display: block; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > .label { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--gray-700); }
.field .req { margin-left: 4px; font-size: 13px; font-weight: 400; color: var(--danger-700); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--gray-0); }
.field textarea { min-height: 88px; resize: vertical; line-height: 22px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--gray-400); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--gray-100); color: var(--gray-500); }
.field .help { font-size: 13px; line-height: 18px; color: var(--gray-600); }
.field .err { display: none; font-size: 13px; line-height: 18px; color: var(--danger-700); font-weight: 700; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger-700); }
.field.invalid .err { display: block; }
.field .counter { justify-self: end; font-size: 13px; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.field .before { font-size: 13px; color: var(--gray-600); }
.checks { display: grid; gap: 8px; }
.check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--accent-600); }
.check .sub { margin-top: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-rules { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; font-size: 14px; }
.pw-rules li { display: flex; gap: 6px; align-items: center; color: var(--gray-600); }
.pw-rules li.met { color: var(--success-700); }
.pw-rules svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.secret-box { display: flex; gap: 8px; align-items: center; padding: 12px; border: 1px dashed var(--gray-300); border-radius: 4px; background: var(--gray-25); }
.secret-box code { font-family: var(--mono); font-size: 16px; flex: 1; word-break: break-all; }

/* ---------- dialog & drawer ---------- */
dialog { padding: 0; border: 0; color: var(--gray-900); }
dialog::backdrop { background: rgb(16 24 40 / .45); }
dialog.modal { width: min(520px, calc(100vw - 32px)); border-radius: 8px; box-shadow: var(--shadow-3); }
dialog.modal.wide { width: min(720px, calc(100vw - 32px)); }
.modal-head { padding: 20px 24px 0; }
.modal-head h2 { font-size: 18px; line-height: 26px; }
.modal-body { padding: 16px 24px; display: grid; gap: 16px; max-height: calc(100vh - 220px); overflow-y: auto; }
.modal-foot, .drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--gray-200); }
.modal-foot .left, .drawer-foot .left { margin-right: auto; }
.impact { padding: 12px 14px; border-radius: 6px; background: var(--gray-50); border: 1px solid var(--gray-200); }
.impact ul { margin: 6px 0 0; padding-left: 20px; }
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(600px, calc(100vw - 48px)); max-width: none; height: 100vh; max-height: none;
  box-shadow: var(--shadow-3); display: none; flex-direction: column; }
dialog.drawer[open] { display: flex; }
dialog.drawer.wide { width: min(880px, calc(100vw - 48px)); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--gray-200); }
.drawer-head h2 { font-size: 18px; line-height: 26px; }
.drawer-head .crumb { margin-bottom: 2px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px 32px; }
.drawer-body > * + * { margin-top: 20px; }
.drawer-body h3 { font-size: 16px; line-height: 24px; }
.close { width: 36px; height: 36px; border: 0; border-radius: 4px; background: none; cursor: pointer; color: var(--gray-700); flex: none; }
.close:hover { background: var(--gray-100); }
dl.kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 16px; margin: 0; }
dl.kv dt { color: var(--gray-600); font-size: 14px; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
dl.kv dt.tip { cursor: help; }
dl.kv dt.tip::after { content: "?"; display: inline-block; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: var(--gray-200); color: var(--gray-700); font-size: 11px; line-height: 15px; text-align: center; font-weight: 700; vertical-align: 1px; }
.audit-desc { margin: 0 0 16px; padding: 12px 14px; background: var(--gray-50); border-left: 4px solid var(--accent-700); border-radius: 4px; font-size: 15px; line-height: 1.6; }
.audit-desc b { color: var(--gray-900); }
details.tech { margin-top: 20px; }
details.tech > summary { color: var(--gray-700); }
details.tech dl.kv { margin-top: 10px; }
.copy { margin-left: 6px; height: 24px; padding: 0 6px; font-size: 13px; border: 1px solid var(--gray-300); border-radius: 4px; background: var(--gray-0); cursor: pointer; vertical-align: middle; }
.minitable { width: 100%; border-collapse: collapse; font-size: 14px; }
.minitable th { text-align: left; font-weight: 700; color: var(--gray-700); padding: 6px 8px; border-bottom: 1px solid var(--gray-300); background: var(--gray-50); }
.minitable td { padding: 7px 8px; border-bottom: 1px solid var(--gray-200); vertical-align: top; overflow-wrap: anywhere; }
.minitable .num { text-align: right; }
.cmp td.before { background: var(--diff-del-bg); }
.cmp td.after { background: var(--diff-add-bg); }
details.raw summary { cursor: pointer; color: var(--accent-700); font-weight: 700; }
details.raw pre, pre.json { margin: 8px 0 0; padding: 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 4px;
  font: 13px/20px var(--mono); white-space: pre-wrap; word-break: break-all; }

/* ---------- toast ---------- */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 200; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 12px 16px; background: var(--gray-0); border: 1px solid var(--gray-200);
  border-left: 4px solid var(--success-700); border-radius: 6px; box-shadow: var(--shadow-2); }
.toast.err { border-left-color: var(--danger-700); }
.toast .t-body { flex: 1; }
.toast .t-body b { display: block; }
.toast .t-meta { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.toast .close { width: 28px; height: 28px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--gray-200); padding: 0 20px; overflow-x: auto; }
.tabs [role="tab"] { height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tabs [role="tab"][aria-selected="true"] { font-weight: 700; border-bottom-color: var(--accent-600); color: var(--gray-900); }
.tabs [role="tab"]:hover { color: var(--accent-700); }
.tab-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); font-size: 13px; line-height: 20px; font-weight: 700; text-align: center; }
.tabs.flush { padding: 0; }

/* ---------- knowledge review ---------- */
.kr-head { display: grid; gap: 6px; }
.kr-head .title-row { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.kr-head h1 { font-size: 22px; line-height: 30px; }
.kr-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--gray-600); font-size: 14px; }
.kr-meta b { color: var(--gray-800); font-weight: 400; }
.kr { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.kr-side { position: sticky; top: calc(var(--header) + 16px); display: grid; gap: 16px; }
.kr-files { list-style: none; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--gray-200); }
.kr-files button { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 8px 20px; border: 0; background: none; cursor: pointer; text-align: left; }
.kr-files button:hover { background: var(--gray-25); }
.kr-files button[aria-current="true"] { background: var(--accent-50); box-shadow: inset 3px 0 0 var(--accent-600); }
.kr-files .path { font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }
.kr-files .st { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plus { color: var(--success-700); font-weight: 700; }
.minus { color: var(--danger-700); font-weight: 700; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 20px; border-bottom: 1px solid var(--gray-200); background: var(--gray-25); }
.viewer-bar .file-title { font-family: var(--mono); font-size: 14px; font-weight: 700; flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.viewer { padding: 0; }
.viewer .pad { padding: 20px 24px; }
.approve-card { padding: 16px 20px; display: grid; gap: 12px; }
.approve-card h2 { font-size: 16px; line-height: 24px; }
.progress { height: 8px; border-radius: 999px; background: var(--gray-100); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--success-700); }
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.people li { display: flex; gap: 8px; align-items: flex-start; }
.people svg { width: 16px; height: 16px; margin-top: 3px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.people .done { color: var(--success-700); }
.people .stale { color: var(--gray-500); text-decoration: line-through; }
.why { font-size: 14px; color: var(--warning-700); font-weight: 700; }
.decide { display: flex; gap: 8px; }
.decide .btn { flex: 1; }
.timeline { list-style: none; margin: 0; padding: 4px 0 0 0; position: relative; }
.timeline li { position: relative; padding: 0 0 18px 28px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; background: var(--gray-200); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gray-400); background: var(--gray-0); }
.timeline .dot.ok { border-color: var(--success-700); background: var(--success-50); }
.timeline .dot.err { border-color: var(--danger-700); background: var(--danger-50); }
.timeline .dot.warn { border-color: var(--warning-700); background: var(--warning-50); }
.timeline .when { font-size: 13px; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.timeline .what { font-weight: 700; }
.timeline .note { margin-top: 4px; padding: 8px 12px; background: var(--gray-50); border-radius: 4px; white-space: pre-wrap; }

/* diff (kview.js) */
.diff__scroll { overflow: auto; max-height: 70vh; }
.diff-tbl { width: 100%; border-collapse: collapse; font: 13px/20px var(--mono); }
.diff-tbl td { padding: 0 8px; vertical-align: top; white-space: pre; }
.wrap-lines .diff-tbl td.code { white-space: pre-wrap; word-break: break-all; }
.diff-tbl td.ln { width: 48px; min-width: 48px; text-align: right; color: var(--gray-600); background: var(--gray-25); user-select: none; border-right: 1px solid var(--gray-200); }
.diff-tbl td.sign { width: 20px; text-align: center; user-select: none; font-weight: 700; }
.diff-tbl--split td.code { width: 50%; }
.diff-tbl tr.add td, .diff-tbl td.add { background: var(--diff-add-bg); }
.diff-tbl tr.add td.ln, .diff-tbl td.ln.add { background: var(--diff-add-gutter); }
.diff-tbl tr.del td, .diff-tbl td.del { background: var(--diff-del-bg); }
.diff-tbl tr.del td.ln, .diff-tbl td.ln.del { background: var(--diff-del-gutter); }
.diff-tbl tr.add td.sign::before { content: "+"; color: var(--success-700); }
.diff-tbl tr.del td.sign::before { content: "\2212"; color: var(--danger-700); }
.diff-tbl td.empty { background: var(--gray-50); }
.diff-tbl ins { background: var(--diff-add-word); text-decoration: underline; text-decoration-color: var(--success-700); }
.diff-tbl del { background: var(--diff-del-word); text-decoration: line-through; text-decoration-color: var(--danger-700); }
.diff-tbl tr.hunk td { background: var(--accent-50); color: var(--accent-700); padding: 4px 12px; }
.diff-tbl tr.fold td { background: var(--gray-50); text-align: center; padding: 2px; }
.fold-btn { border: 0; background: none; color: var(--accent-700); cursor: pointer; font: 13px/24px var(--font); }
.fold-btn:hover { text-decoration: underline; }

/* document preview */
.md { max-width: 80ch; font-size: 16px; line-height: 28px; }
.md > * + * { margin-top: 16px; }
.md h1 { font-size: 24px; line-height: 32px; }
.md h2 { font-size: 20px; line-height: 28px; padding-bottom: 6px; border-bottom: 1px solid var(--gray-200); margin-top: 28px; }
.md h3 { font-size: 17px; line-height: 26px; margin-top: 22px; }
.md h4, .md h5, .md h6 { font-size: 16px; }
.md ul, .md ol { padding-left: 24px; }
.md table { border-collapse: collapse; font-size: 15px; }
.md th, .md td { border: 1px solid var(--gray-200); padding: 6px 10px; text-align: left; }
.md th { background: var(--gray-50); }
.md pre { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 4px; padding: 12px; overflow: auto; font: 13px/20px var(--mono); }
.md code { font-family: var(--mono); font-size: 14px; background: var(--gray-50); padding: 1px 4px; border-radius: 3px; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin-left: 0; padding-left: 14px; border-left: 3px solid var(--accent-100); color: var(--gray-600); }
.md hr { border: 0; border-top: 1px solid var(--gray-200); }
.md .md-link { color: var(--accent-700); text-decoration: underline; }
.md .md-ext { margin-left: 4px; font-size: 13px; color: var(--gray-600); }
.md .md-img { display: inline-block; padding: 0 6px; border: 1px dashed var(--gray-300); color: var(--gray-600); font-size: 14px; }
.md-add { background: var(--diff-add-bg); box-shadow: inset 3px 0 0 var(--success-700); padding: 4px 12px; border-radius: 2px; }
.md-add > * { text-decoration: underline; text-decoration-color: var(--success-700); text-decoration-thickness: 1px; }
.md-del { background: var(--diff-del-bg); box-shadow: inset 3px 0 0 var(--danger-700); padding: 4px 12px; border-radius: 2px; }
.md-del > * { text-decoration: line-through; text-decoration-color: var(--danger-700); color: var(--gray-700); }
.md-chg { display: grid; gap: 4px; }
.md-inline { box-shadow: inset 3px 0 0 var(--accent-600); padding: 4px 12px; background: var(--gray-50); border-radius: 2px; }
.md-inline ins { background: var(--diff-add-word); color: var(--gray-900); text-decoration: underline; text-decoration-color: var(--success-700); text-decoration-thickness: 2px; text-underline-offset: 3px; padding: 0 2px; border-radius: 2px; }
.md-inline del { background: var(--diff-del-word); color: var(--gray-700); text-decoration: line-through; text-decoration-color: var(--danger-700); padding: 0 2px; border-radius: 2px; }
.md-inline li.li-add::marker { color: var(--success-700); }
.md-inline li.li-del::marker { color: var(--danger-700); }
.md.deleted { color: var(--gray-600); }
.meta-card { border: 1px solid var(--gray-200); border-radius: 6px; background: var(--gray-25); padding: 12px 16px; max-width: 80ch; margin-bottom: 20px; }
.meta-card h3 { font-size: 14px; color: var(--gray-700); margin-bottom: 6px; }
.meta-card table { border-collapse: collapse; width: 100%; font-size: 14px; }
.meta-card td, .meta-card th { padding: 4px 8px; border-bottom: 1px solid var(--gray-200); text-align: left; vertical-align: top; }
.meta-card th { width: 140px; color: var(--gray-600); font-weight: 400; font-family: var(--mono); }
.meta-card tr.chg td { background: var(--warning-50); }

/* ---------- login ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 440px) 1fr; background: var(--gray-0); }
.login-brand { background: var(--brand-700); color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.login-brand h1 { font-size: 28px; line-height: 38px; margin-top: 40px; }
.login-brand p { color: #dbe3ef; margin-top: 12px; }
.login-brand .facts { font-size: 14px; color: #dbe3ef; display: grid; gap: 4px; }
.login-brand .facts b { color: #fff; }
.login-main { display: grid; place-items: center; padding: 40px 24px; }
.login-form { width: min(400px, 100%); display: grid; gap: 18px; }
.login-form h2 { font-size: 22px; line-height: 30px; }
.login-form .lead { color: var(--gray-600); margin-top: -10px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 76px !important; }
.pw-wrap .toggle { position: absolute; right: 4px; top: 4px; height: 32px; padding: 0 10px; border: 0; border-radius: 4px; background: var(--gray-100); cursor: pointer; font-size: 14px; }
.caps { font-size: 13px; color: var(--warning-700); font-weight: 700; }
.login-help { font-size: 14px; color: var(--gray-600); border-top: 1px solid var(--gray-200); padding-top: 16px; }
.reset-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.reset-card { width: min(480px, 100%); background: var(--gray-0); border: 1px solid var(--gray-200); border-radius: 8px; box-shadow: var(--shadow-1); padding: 28px; display: grid; gap: 16px; }

/* ---------- misc ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.inline-list { display: flex; flex-wrap: wrap; gap: 4px; }
.stage-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.stage-list li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; }
.stage-list svg { width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 2; }
.stage-list .ok { color: var(--success-700); }
.stage-list .fail { color: var(--danger-700); }
.stage-list .skip { color: var(--gray-400); }
.print-head { display: none; }
.denied-page { max-width: 640px; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) { [data-priority="3"] { display: none; } .kr { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 1100px) {
  .kr { grid-template-columns: minmax(0, 1fr); }
  .kr-side { position: static; }
  [data-priority="2"] { display: none; }
}
@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .sidebar { position: fixed; left: 0; top: var(--header); bottom: 0; width: var(--sidebar); z-index: 25; transform: translateX(-100%); transition: transform .15s; box-shadow: var(--shadow-3); }
  .shell.nav-open .sidebar { transform: none; }
  .userbtn .who, .idle { display: none; }
  .login-page { grid-template-columns: 1fr; }
  .login-brand { padding: 24px; }
  .login-brand h1 { margin-top: 12px; font-size: 22px; line-height: 30px; }
  .form .row2, .grid2 { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
  .page-actions { padding-top: 0; justify-content: flex-start; }
}

/* ---------- print (감사 로그 출력) ---------- */
@page { size: A4 landscape; margin: 12mm; }
@media print {
  body { background: #fff; font-size: 11pt; }
  .topbar, .sidebar, .toolbar, .pager, .toasts, .page-actions, .filter-summary, .no-print, dialog { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; }
  .panel { border: 0; box-shadow: none; }
  .table-wrap { max-height: none; overflow: visible; }
  table.data th { position: static; }
  table.data thead { display: table-header-group; }
  table.data tr { break-inside: avoid; }
  table.data td, table.data th { padding: 4px 6px; font-size: 9pt; line-height: 13pt; }
  table.data td.actions, table.data th.actions { display: none; }
  .trunc, .trunc1 { display: block; -webkit-line-clamp: unset; max-width: none; white-space: normal; overflow: visible; }
  .badge { background: #fff !important; color: #000 !important; border-color: #666 !important; }
  .print-head { display: block; margin-bottom: 8mm; font-size: 10pt; }
  .print-head h1 { font-size: 16pt; }
  .print-head .conf { float: right; border: 1px solid #000; padding: 2px 8px; font-weight: 700; }
  .diff-tbl, .md-add, .md-del, .md-inline { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ---------- round-2 review fixes (UX·design meeting 2) ---------- */
body { word-break: keep-all; overflow-wrap: break-word; }
.mono, code, pre, .sub.mono { word-break: normal; overflow-wrap: anywhere; }
h1[tabindex="-1"]:focus, [data-page-title]:focus { outline: none; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.modal-body > * + * { margin-top: 16px; }
.content > .print-head + * { margin-top: 0; }
.page-head { flex-wrap: wrap; row-gap: 12px; }
.page-head > :first-child { flex: 1 1 480px; min-width: 0; }
.page-actions { flex: 0 0 auto; flex-wrap: nowrap; }
table.data .mono, table.data .col-time, table.data .person, .person { white-space: nowrap; }
table.data td.col-title { min-width: 24ch; }
table.data.audit { font-size: 14px; line-height: 20px; }
table.data.audit td { padding-top: 8px; padding-bottom: 8px; }
table.data.audit td.reason { white-space: normal; min-width: 12ch; max-width: 28ch; }
table.data.audit .sub.mono { font-size: 12px; }
.badge.tag { background: var(--gray-0); border-color: var(--gray-300); color: var(--gray-700); }
.badge.wait { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.field .req { color: var(--gray-600); }
.why { color: var(--gray-700); font-weight: 400; padding: 8px 12px; background: var(--gray-50); border-radius: 4px; }
.kpi.attention .kpi-value { color: var(--gray-900); }
.kpi.attention, .kpi.alert { border-left: 3px solid var(--warning-700); }
.kpi.alert { border-left-color: var(--danger-700); }
.kpi-value.text { font-size: 20px; line-height: 36px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.drawer-body .kpis { gap: 12px; }
.drawer-body .kpi { padding: 12px 16px; box-shadow: none; }
.drawer-body .kpi-value { font-size: 22px; line-height: 30px; }
.kr-head { display: grid; gap: 8px; margin-bottom: 16px; }
.kr-meta { row-gap: 2px; }
.approve-card .mono { font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
.progress { background: var(--gray-200); box-shadow: inset 0 0 0 1px var(--gray-300); }
.progress > span { background: var(--accent-600); }
.progress.done > span { background: var(--success-700); }
.field > .label { order: 0; }
.field > input, .field > select, .field > textarea, .field > .pw-wrap { order: 1; }
.field > .err { order: 2; }
.field > .help { order: 3; }
.field > .counter { order: 3; }
.field > .before { order: 4; }
.diff-tbl { font: 14px/22px var(--mono); }
.diff-tbl td.ln { font-size: 13px; color: var(--gray-600); }
.md-del { background: #fdf4f3; }
.md-add { background: #f1f9f4; }
.md-chg { gap: 8px; }
.md-add::before, .md-del::before { display: block; font: 700 13px/18px var(--font); margin-bottom: 4px; text-decoration: none; }
.md-del::before { content: "삭제"; color: var(--danger-700); }
.md-add::before { content: "추가"; color: var(--success-700); }
.md-inline::before { content: "일부 변경"; display: block; font: 700 13px/18px var(--font); color: var(--accent-700); margin-bottom: 4px; }
.diff-tbl--split td.code + td.ln { border-left: 2px solid var(--gray-300); }
dialog.modal { margin: max(48px, 8vh) auto auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--gray-200); }
.modal-head .close { flex: none; }
.modal-body { padding-top: 20px; }
.toolbar .result-count { margin-left: auto; }
table.data td.actions, table.data th.actions { box-shadow: inset 1px 0 0 var(--gray-200); }
.drawer-head .inline-list { margin-top: 6px; }
.home-banner { margin-bottom: 4px; }
.kv dd .person { white-space: normal; }
@media (max-width: 1279px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-actions { flex-basis: 100%; justify-content: flex-start; padding-top: 0; }
  table.data.audit .sub.mono { display: none; }
}
@media (max-width: 1100px) {
  .kr-side { order: -1; }
}
@media (max-width: 1023px) { .row2 { grid-template-columns: 1fr; } }
@media print {
  .page-head, .content > .crumb { display: none !important; }
  .content > * + * { margin-top: 0; }
  table.data { table-layout: fixed; width: 100%; }
  table.data td, table.data th { white-space: normal !important; overflow-wrap: anywhere; }
  table.data .mono, table.data .sub { word-break: break-all; }
  table.data.audit .sub.mono { display: block; }
  table.data.audit col.c-seq { width: 5%; } table.data.audit col.c-time { width: 14%; } table.data.audit col.c-event { width: 18%; }
  table.data.audit col.c-actor { width: 13%; } table.data.audit col.c-target { width: 18%; } table.data.audit col.c-outcome { width: 7%; }
  table.data.audit col.c-ip { width: 10%; } table.data.audit col.c-reason { width: 15%; }
  .print-head [data-print-meta] p { margin: 2px 0; }
  .md-inline::before, .md-add::before, .md-del::before { print-color-adjust: exact; }
}
.print-only { display: none; }
@media print { .print-only { display: block; } .screen-only { display: none !important; } }
.quick-label { font-size: 13px; line-height: 28px; color: var(--gray-600); margin-right: 2px; }
.tab-count.ok { background: var(--success-50); color: var(--success-700); }
.tab-count.err { background: var(--danger-50); color: var(--danger-700); }
.page-actions.gl-link { flex-direction: column; align-items: flex-end; gap: 4px; }
.meta-card th b { font-weight: 700; }
/* 감사 표: 화면에서도 열 폭 고정 → 사유 열이 잘리지 않음 */
@media screen and (min-width: 1024px) {
  table.data.audit { table-layout: fixed; width: 100%; }
  table.data.audit td, table.data.audit th { overflow-wrap: anywhere; }
  table.data.audit td.reason { max-width: none; }
  table.data.audit col.c-seq { width: 64px; } table.data.audit col.c-time { width: 16%; } table.data.audit col.c-event { width: 19%; }
  table.data.audit col.c-actor { width: 13%; } table.data.audit col.c-target { width: 14%; } table.data.audit col.c-outcome { width: 82px; }
  table.data.audit col.c-ip { width: 9%; } table.data.audit col.c-reason { width: auto; }
  table.data.audit .person { white-space: normal; }
}
.page-head .desc { max-width: 64ch; }
/* round-3: 툴바 = 검색 | 필터 묶음(라벨+칩) | 건수 */
.toolbar.ttool { flex-wrap: nowrap; align-items: flex-start; }
.toolbar.ttool > .search { flex: 0 0 300px; }
.toolbar .tb-filters { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.toolbar .fgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.toolbar .result-count { flex: none; margin-left: auto; line-height: 36px; }
.toolbar.count-only { padding-top: 8px; padding-bottom: 8px; }
.toolbar.count-only .result-count { line-height: 20px; }
@media (max-width: 1023px) { .toolbar.ttool { flex-wrap: wrap; } .toolbar.ttool > .search { flex: 1 1 100%; } }
table.data td .tnum { white-space: nowrap; }
@media print {
  table.data .mono, table.data .person, table.data .col-time, table.data .sub, table.data td .tnum { white-space: normal !important; overflow-wrap: anywhere; }
}
@media screen and (min-width: 1024px) { table.data.audit .sub.mono { white-space: normal; overflow-wrap: anywhere; } }
.md-new { margin-bottom: 8px; }
/* round-3: 표 안 스크롤이 행을 숨기지 않도록 페이지 스크롤로 (가로만 표 안에서) */
.table-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }

.diff-legend ins { background: var(--diff-add-word); color: var(--gray-900); text-decoration: underline; padding: 0 3px; }
.diff-legend del { background: var(--diff-del-word, #fbd5d5); color: var(--gray-900); padding: 0 3px; }