/* 소프트웨어 관리 (from 회사직원관리 project page) */

.swroot {
  --color-bg: #f6f7f9; --color-panel: #ffffff; --color-fg: #1d2330; --color-fg-muted: #5e6675; --color-border-line: #e1e4ea;
  --color-ok: #1f7a4d; --color-warn: #a35a00; --color-bad: #b42318;
  --series-1: #2f6fd6; --series-2: #1aa39a; --series-3: #8a63d2; --series-4: #d9822b; --series-5: #c2477a; --series-6: #5b8c2a; --series-7: #7a6a55; --series-8: #3b8fb8;
  --cds-chart-grid: #e9ecf1; --cds-chart-muted: #b7bdc8; --cds-chart-axis: #c9ced8;
  --cds-surface-popover: #ffffff; --cds-border: #d6dae2; --cds-shadow-popover: 0 4px 16px rgba(20, 30, 50, .12); --cds-text-secondary: #5e6675;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 12px; --cds-gap-lg: 20px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 16px; --cds-radius: 8px;
  --cds-font-size-caption: 12.5px; --cds-font-size-body: 14px; --cds-font-size-heading: 16px; --cds-font-size-title: 26px;
  --cds-font-weight-medium: 600; --cds-dur-slow: .3s;
  --font-anthropic-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-anthropic-serif: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .swroot {
    --color-bg: #12151b; --color-panel: #1a1e26; --color-fg: #e7eaf0; --color-fg-muted: #9aa3b2; --color-border-line: #2b313c;
    --color-ok: #4cc38a; --color-warn: #f0a24a; --color-bad: #f07167;
    --series-1: #6b9cf0; --series-2: #3cc7bd; --series-3: #a98be6; --series-4: #eda25a; --series-5: #e07aa3; --series-6: #8fbf5a; --series-7: #b3a38c; --series-8: #6cb6d9;
    --cds-chart-grid: #262c36; --cds-chart-muted: #4c5463; --cds-chart-axis: #3a414d;
    --cds-surface-popover: #222833; --cds-border: #353c48; --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .4); --cds-text-secondary: #9aa3b2;
    color-scheme: dark;
  }
}
.swroot { color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); }
.swroot .page { max-width: 1240px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 16px; }
.swroot .page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.swroot .page-head .t { font-size: 13px; color: var(--color-fg-muted); letter-spacing: .02em; }
.swroot .page-head .meta { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.dash-skeleton { color: transparent !important; background: var(--cds-chart-grid); border-radius: 4px; min-width: 3ch; display: inline-block; }

:root[data-theme="dark"] .swroot {
    --color-bg: #12151b; --color-panel: #1a1e26; --color-fg: #e7eaf0; --color-fg-muted: #9aa3b2; --color-border-line: #2b313c;
    --color-ok: #4cc38a; --color-warn: #f0a24a; --color-bad: #f07167;
    --series-1: #6b9cf0; --series-2: #3cc7bd; --series-3: #a98be6; --series-4: #eda25a; --series-5: #e07aa3; --series-6: #8fbf5a; --series-7: #b3a38c; --series-8: #6cb6d9;
    --cds-chart-grid: #262c36; --cds-chart-muted: #4c5463; --cds-chart-axis: #3a414d;
    --cds-surface-popover: #222833; --cds-border: #353c48; --cds-shadow-popover: 0 4px 16px rgba(0, 0, 0, .4); --cds-text-secondary: #9aa3b2;
    color-scheme: dark;
}


.hr { display: flex; flex-direction: column; gap: var(--cds-gap-lg); font-family: var(--font-anthropic-sans); }
.hr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--cds-gap-md); }
.hr-head h1 { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); }
.hr-take { margin: var(--cds-gap-xs) 0 0; color: var(--color-fg-muted); max-width: 46rem; }
.hr-ctl { display: flex; flex-direction: column; gap: var(--cds-gap-xs); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hr-ctl select { font: inherit; font-size: var(--cds-font-size-body); color: var(--color-fg); background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); min-width: 12rem; }
.hr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--cds-gap-md); }
.hr-kpi { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-md) var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-xs); }
.hr-kpi .lab { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hr-kpi .num { font-family: var(--font-anthropic-serif); font-weight: 400; font-size: var(--cds-font-size-title); font-variant-numeric: tabular-nums; }
.hr-kpi .sub { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.hr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--cds-gap-md); }
.hr-card { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-lg); display: flex; flex-direction: column; gap: var(--cds-gap-sm); min-width: 0; }
.hr-card h2 { margin: 0; font-size: var(--cds-font-size-heading); font-weight: var(--cds-font-weight-medium); }
.hr-card .note { margin: 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hr-bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: var(--cds-gap-xs) var(--cds-gap-sm); align-items: center; font-size: var(--cds-font-size-caption); min-height: 6rem; }
.hr-bars .k { color: var(--color-fg); white-space: nowrap; }
.hr-bars .track { height: 14px; border-radius: 4px; background: var(--cds-chart-grid); overflow: hidden; display: flex; }
.hr-bars .fill { height: 100%; border-radius: 4px; }
.hr-bars .v { font-variant-numeric: tabular-nums; color: var(--color-fg-muted); text-align: right; }
.hr-bars .v b { color: var(--color-fg); font-weight: 600; }
.hr-legend { display: flex; gap: var(--cds-gap-md); font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.hr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.hr-year { position: relative; min-height: 240px; }
.hr-tip { position: absolute; pointer-events: none; background: var(--cds-surface-popover); border: 1px solid var(--cds-border); border-radius: var(--cds-radius); box-shadow: var(--cds-shadow-popover); padding: var(--cds-pad-xs) var(--cds-pad-sm); font-size: var(--cds-font-size-caption); white-space: nowrap; }
.hr-tip .d { color: var(--cds-text-secondary); }
[data-dash-source-state=empty] { color: transparent; }
[data-dash-source-state=refreshing] { opacity: .5; transition: opacity var(--cds-dur-slow); }
.hr-fail { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 6rem; color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); grid-column: 1 / -1; }
.hr-fail::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--color-bad); }

.hr-tabs { display: flex; gap: var(--cds-gap-xs); border-bottom: 1px solid var(--color-border-line); }
.hr-tabs button { font: inherit; font-size: var(--cds-font-size-body); background: none; border: 0; border-bottom: 2px solid transparent; color: var(--color-fg-muted); padding: var(--cds-pad-sm) var(--cds-pad-md); cursor: pointer; margin-bottom: -1px; }
.hr-tabs button[aria-selected="true"] { color: var(--color-fg); border-bottom-color: var(--color-fg); font-weight: var(--cds-font-weight-medium); }
.hr-tabs button:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.hr [hidden] { display: none !important; }
.hr-page { display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
.sw-wrap { display: flex; flex-direction: column; gap: var(--cds-gap-lg); }
.sw-tablebox { overflow: auto; max-height: 26rem; }
.sw-table { width: 100%; border-collapse: collapse; font-size: var(--cds-font-size-caption); font-variant-numeric: tabular-nums; }
.sw-table th { position: sticky; top: 0; background: var(--color-panel); text-align: left; font-weight: var(--cds-font-weight-medium); color: var(--color-fg-muted); padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); white-space: nowrap; }
.sw-table td { padding: var(--cds-pad-xs) var(--cds-pad-sm); border-bottom: 1px solid var(--color-border-line); vertical-align: middle; }
.sw-table td.n, .sw-table th.n { text-align: right; }
.sw-table tr.expired td { color: var(--color-fg-muted); }
.sw-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--cds-font-size-caption); white-space: nowrap; border: 1px solid currentColor; }
.sw-pill.ok { color: var(--color-ok); }
.sw-pill.warn { color: var(--color-warn); }
.sw-pill.bad { color: var(--color-bad); }
.sw-pill.muted { color: var(--color-fg-muted); }
.sw-days { display: flex; align-items: center; gap: var(--cds-gap-xs); min-width: 9rem; }
.sw-days .track { flex: 1; height: 8px; border-radius: 4px; background: var(--cds-chart-grid); overflow: hidden; }
.sw-days .fill { height: 100%; border-radius: 4px; }
.sw-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.sw-cardhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--cds-gap-sm); }
.ext-filters { display: flex; flex-wrap: wrap; gap: var(--cds-gap-sm); align-items: center; }
.ext-filters input, .ext-filters select { font: inherit; font-size: var(--cds-font-size-caption); color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-line); border-radius: var(--cds-radius); padding: var(--cds-pad-xs) var(--cds-pad-sm); }
.ext-filters input { flex: 1 1 12rem; min-width: 0; }
.ext-count { font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); }
.ext-rows { display: grid; grid-template-columns: max-content 1fr max-content; gap: var(--cds-gap-xs) var(--cds-gap-sm); align-items: center; font-size: var(--cds-font-size-caption); }
.ext-rows .k { background: none; border: 0; padding: 0; font: inherit; color: var(--color-fg); text-align: left; cursor: pointer; white-space: nowrap; }
.ext-rows .k:hover, .ext-rows .k[aria-pressed="true"] { text-decoration: underline; }
.ext-rows .k:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.ext-rows .track { display: flex; height: 14px; gap: 1px; }
.ext-rows .seg { height: 100%; }
.ext-rows .seg:first-child { border-radius: 4px 0 0 4px; }
.ext-rows .seg:last-child { border-radius: 0 4px 4px 0; }
.ext-rows .seg:only-child { border-radius: 4px; }
.ext-rows .v { font-variant-numeric: tabular-nums; color: var(--color-fg-muted); text-align: right; }
.sw-empty { color: var(--color-fg-muted); font-size: var(--cds-font-size-caption); }

.swroot .page{padding:0;max-width:none}
.swroot,.swroot .page,.swroot .hr{min-width:0}
.swroot .hr-tabs{overflow-x:auto;scrollbar-width:none}
.swroot .hr-tabs button{white-space:nowrap}