/* Artemis 데스크 데이터 화면 디자인 시스템. 모든 규칙은 .ui 또는 .ui- 안에서만 동작한다(현황판·달력·메모는 영향 없음).
   쓰는 법: 문서/디자인_가이드.md. 대비 확인: node app/tools/contrast_check.js */

/* ===== 토큰: 전역 --ps-* (style.css)를 받아 쓴다. 라이트/다크는 style.css 한 곳에서 바뀐다 ===== */
.ui {
  --ui-surface: var(--ps-bg); --ui-surface-2: var(--ps-bg); --ui-surface-3: var(--ps-raised);
  --ui-line: var(--ps-hair); --ui-line-strong: var(--ps-rule);
  --ui-text: var(--ps-text); --ui-text-2: var(--ps-text2); --ui-muted: var(--ps-muted);
  --ui-accent: var(--ps-text); --ui-accent-ink: var(--ps-bg); --ui-accent-soft: var(--ps-raised);
  --ui-select-bg: var(--ps-raised); --ui-select-bar: var(--ps-text);
  --ui-good-fg: var(--ps-text2); --ui-good-bg: transparent;
  --ui-warn-fg: var(--ps-text2); --ui-warn-bg: transparent; --ui-warn-row: transparent; --ui-warn-bar: var(--ps-brand);
  --ui-bad-fg: var(--ps-bad); --ui-bad-bg: transparent;
  --ui-info-fg: var(--ps-text2); --ui-info-bg: transparent;
  --ui-neutral-fg: var(--ps-text2); --ui-neutral-bg: transparent;
  --ui-shadow: none; --ui-shadow-pop: none;
  --ui-chart-1: var(--ps-ch1); --ui-chart-2: var(--ps-ch2); --ui-chart-3: var(--ps-ch3); --ui-chart-4: var(--ps-ch4); --ui-chart-5: var(--ps-ch5); --ui-chart-6: var(--ps-ch6);

  /* 글자·간격·모양(테마와 무관) */
  --ui-fs-xs: 13px; --ui-fs-sm: 14px; --ui-fs: 15px; --ui-fs-md: 16px; --ui-fs-lg: 18px; --ui-fs-xl: 28px; --ui-fs-kpi: 30px;
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 24px; --ui-s6: 32px;
  --ui-r-sm: 2px; --ui-r: 2px; --ui-r-lg: 2px;
  --ui-row-h: 38px;
  --ui-table-min: 720px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color: var(--ui-text);
  font-size: var(--ui-fs);
  line-height: 1.5;
  font-family: "Pretendard Variable", Pretendard, "Malgun Gothic", system-ui, sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ===== 기본 ===== */
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui button, .ui input, .ui select, .ui textarea { font: inherit; letter-spacing: inherit; }
.ui :focus-visible { outline: 2px solid var(--ui-text); outline-offset: 2px; border-radius: 0; }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s3); }
.ui-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-s4); }
.ui-spacer { flex: 1; }
.ui-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-muted { color: var(--ui-muted); }
.ui-strong { font-weight: 700; }
.ui-help { font-size: var(--ui-fs-xs); color: var(--ui-muted); line-height: 1.5; }
.ui-help[title], .ui-tip[title] { cursor: help; text-decoration: underline dotted var(--ui-line-strong); text-underline-offset: 3px; }
.ui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== 페이지 머리 ===== */
.ui-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ui-s3) var(--ui-s5); margin: 0 0 var(--ui-s4); padding-bottom: var(--ui-s3); border-bottom: 1px solid var(--ui-line); }
.ui-head-text { flex: 1 1 320px; min-width: 0; }
.ui-title { margin: 0; font-size: var(--ui-fs-xl); line-height: 1.25; font-weight: 700; }
.ui-subtitle { margin: var(--ui-s1) 0 0; font-size: var(--ui-fs); color: var(--ui-muted); max-width: 70ch; }
.ui-actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); align-items: center; }

/* ===== 격자 ===== */
.ui-grid { display: grid; gap: var(--ui-s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
.ui-kpis { display: grid; gap: var(--ui-s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--ui-s4); }
@media (min-width: 1100px) { .ui-grid-2, .ui-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .ui-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ui-grid-wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1099px) { .ui-grid-wide { grid-template-columns: minmax(0, 1fr); } }

/* 목록-상세 분할 */
.ui-split { display: grid; gap: var(--ui-s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .ui-split { grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr); } }
@media (min-width: 1920px) { .ui-split { grid-template-columns: minmax(480px, 5fr) minmax(0, 7fr); } }
.ui-split-list, .ui-split-detail { min-width: 0; }
.ui-split .ui-table { min-width: 560px; }
.ui-split-detail { position: sticky; top: var(--ui-s3); }
@media (max-width: 1099px) { .ui-split-detail { position: static; } }

/* ===== 카드 · 차트 카드 ===== */
.ui-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow); padding: var(--ui-s4) var(--ui-s5); min-width: 0; }
.ui-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ui-s2) var(--ui-s4); margin-bottom: var(--ui-s3); }
.ui-card-title { margin: 0; font-size: var(--ui-fs-lg); font-weight: 700; }
.ui-card-sub { font-size: var(--ui-fs-sm); color: var(--ui-muted); }
.ui-card-body { min-width: 0; }
.ui-card-flush { padding: 0; overflow: hidden; }
.ui-card-flush > .ui-card-head { padding: var(--ui-s4) var(--ui-s5) 0; }
.ui-legend { display: flex; flex-wrap: wrap; gap: var(--ui-s2) var(--ui-s4); margin-left: auto; font-size: var(--ui-fs-sm); color: var(--ui-text-2); }
.ui-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.ui-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--ui-chart-1); flex: none; }
.ui-chart-box { min-height: 220px; }

/* ===== 요약 카드(KPI) ===== */
.ui-kpi { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow); padding: var(--ui-s4); min-width: 0; border-top: 4px solid var(--ui-line-strong); }
.ui-kpi.ui-tone-good { border-top-color: var(--ui-good-fg); }
.ui-kpi.ui-tone-warn { border-top-color: var(--ui-warn-bar); }
.ui-kpi.ui-tone-bad { border-top-color: var(--ui-bad-fg); }
.ui-kpi.ui-tone-info { border-top-color: var(--ui-accent); }
.ui-kpi-label { font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-text-2); }
.ui-kpi-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--ui-s2); margin-top: var(--ui-s1); }
.ui-kpi-value { font-size: var(--ui-fs-kpi); line-height: 1.2; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ui-kpi-unit { font-size: var(--ui-fs-md); font-weight: 600; color: var(--ui-text-2); }
.ui-kpi-delta { font-size: var(--ui-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ui-text-2); }
.ui-kpi-delta.ui-tone-good { color: var(--ui-good-fg); }
.ui-kpi-delta.ui-tone-bad { color: var(--ui-bad-fg); }
.ui-kpi-note { margin-top: var(--ui-s1); font-size: var(--ui-fs-xs); color: var(--ui-muted); }

/* ===== 버튼 ===== */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 var(--ui-s4); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r); background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-fs); font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.ui-btn:hover { background: var(--ui-surface-3); }
.ui-btn:active { background: var(--ui-line); }
.ui-btn-primary { background: var(--ui-accent); border-color: var(--ui-accent); color: var(--ui-accent-ink); }
.ui-btn-primary:hover { background: var(--ui-accent); filter: brightness(1.12); }
.ui-btn-primary:active { filter: brightness(.92); background: var(--ui-accent); }
.ui-btn-ghost { background: transparent; border-color: transparent; color: var(--ui-accent); }
.ui-btn-ghost:hover { background: var(--ui-accent-soft); }
.ui-btn-danger { color: var(--ui-bad-fg); border-color: var(--ui-bad-fg); background: var(--ui-surface); }
.ui-btn-danger:hover { background: var(--ui-bad-bg); }
.ui-btn-sm { min-height: 32px; padding: 0 var(--ui-s3); font-size: var(--ui-fs-sm); border-radius: var(--ui-r-sm); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ===== 분할 탭(보기 전환) ===== */
.ui-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--ui-surface-3); border: 1px solid var(--ui-line); border-radius: var(--ui-r); max-width: 100%; overflow-x: auto; }
.ui-seg-item { min-height: 34px; padding: 0 var(--ui-s4); border: 0; border-radius: var(--ui-r-sm); background: transparent; color: var(--ui-text-2); font-size: var(--ui-fs); font-weight: 600; cursor: pointer; white-space: nowrap; }
.ui-seg-item:hover { background: var(--ui-line); }
.ui-seg-item[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-accent); font-weight: 800; box-shadow: inset 0 -3px 0 var(--ui-accent); }
.ui-seg-count { margin-left: 6px; font-size: var(--ui-fs-xs); font-weight: 600; color: var(--ui-muted); font-variant-numeric: tabular-nums; }

/* ===== 필터 바 · 칩(필터 전용: 알약 모양 + 체크 표시) ===== */
.ui-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2) var(--ui-s5); padding: var(--ui-s3) var(--ui-s4); margin-bottom: var(--ui-s3); background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-r); }
.ui-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-s2); }
.ui-filter-label { font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-text-2); margin-right: 2px; }
.ui-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 var(--ui-s3); border: 1px dashed var(--ui-line-strong); border-radius: 99px; background: transparent; color: var(--ui-text-2); font-size: var(--ui-fs-sm); cursor: pointer; white-space: nowrap; }
.ui-chip:hover { background: var(--ui-surface-3); }
.ui-chip[aria-pressed="true"] { border-style: solid; border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent); font-weight: 700; }
.ui-chip[aria-pressed="true"]::before { content: "\2713"; font-weight: 800; }
.ui-search { width: 260px; max-width: 100%; }

/* ===== 표 ===== */
.ui-tablewrap { overflow: auto; max-height: var(--ui-table-maxh, calc(100vh - 220px)); min-height: 120px; border: 1px solid var(--ui-line); border-radius: var(--ui-r); background: var(--ui-surface); }
.ui-tablewrap.ui-flat { max-height: none; }
.ui-table { width: 100%; min-width: var(--ui-table-min); border-collapse: separate; border-spacing: 0; font-size: var(--ui-fs-sm); line-height: 1.4; }
.ui-table th, .ui-table td { height: var(--ui-row-h); padding: 6px var(--ui-s3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ui-line); }
.ui-table td { background: var(--ui-row-bg, var(--ui-surface)); color: var(--ui-text); }
.ui-table th { position: sticky; top: 0; z-index: 2; background: var(--ui-surface-3); color: var(--ui-text-2); font-size: var(--ui-fs-sm); font-weight: 700; white-space: nowrap; border-bottom: 2px solid var(--ui-line-strong); }
.ui-table th.ui-num, .ui-table td.ui-num { text-align: right; }
.ui-table td.ui-wrap { white-space: normal; min-width: 160px; }
.ui-table td.ui-clip { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-table tbody tr:hover { --ui-row-bg: var(--ui-accent-soft); }
.ui-striped tbody tr:nth-child(even) { --ui-row-bg: var(--ui-surface-2); }
.ui-striped tbody tr:nth-child(even):hover { --ui-row-bg: var(--ui-accent-soft); }
.ui-table tr.ui-click { cursor: pointer; }
.ui-table tr.ui-selected { --ui-row-bg: var(--ui-select-bg); }
.ui-table tr.ui-selected td:first-child { box-shadow: inset 5px 0 0 var(--ui-select-bar); font-weight: 700; }
.ui-table tr.ui-warnrow { --ui-row-bg: var(--ui-warn-row); }
.ui-table tr.ui-warnrow td:first-child { box-shadow: inset 5px 0 0 var(--ui-warn-bar); }
.ui-table tr.ui-selected.ui-warnrow td:first-child { box-shadow: inset 5px 0 0 var(--ui-select-bar), inset 9px 0 0 var(--ui-warn-bar); }
.ui-table .ui-total td { font-weight: 800; background: var(--ui-surface-3); border-top: 2px solid var(--ui-line-strong); border-bottom: 0; }
.ui-table tfoot .ui-total td { position: sticky; bottom: 0; z-index: 1; }
.ui-sticky-first th:first-child, .ui-sticky-first td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--ui-line); }
.ui-sticky-first th:first-child { z-index: 3; }
.ui-table-note { margin: var(--ui-s2) 0 0; font-size: var(--ui-fs-xs); color: var(--ui-muted); text-align: right; }
@media (min-width: 1600px) { .ui { --ui-table-min: 900px; } }
@media (min-width: 1920px) { .ui { --ui-table-min: 1100px; --ui-fs-kpi: 34px; } }
@media (min-width: 2560px) { .ui { --ui-table-min: 1400px; --ui-fs-kpi: 38px; } }
@media (max-width: 1365px) { .ui { --ui-table-min: 640px; } }

/* ===== 상태 뱃지(색 + 기호 + 글자) ===== */
.ui-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 8px; border-radius: 99px; font-size: var(--ui-fs-sm); font-weight: 700; line-height: 1.4; white-space: nowrap; border: 1px solid currentColor; }
.ui-badge-mark { font-size: 13px; }
.ui-badge-good { background: var(--ui-good-bg); color: var(--ui-good-fg); }
.ui-badge-warn { background: var(--ui-warn-bg); color: var(--ui-warn-fg); }
.ui-badge-bad { background: var(--ui-bad-bg); color: var(--ui-bad-fg); }
.ui-badge-info { background: var(--ui-info-bg); color: var(--ui-info-fg); }
.ui-badge-neutral { background: var(--ui-neutral-bg); color: var(--ui-neutral-fg); border-color: var(--ui-line-strong); }
.ui-text-good { color: var(--ui-good-fg); } .ui-text-bad { color: var(--ui-bad-fg); } .ui-text-warn { color: var(--ui-warn-fg); }

/* ===== 입력 · 라벨 · 대화창 ===== */
.ui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ui-s4); }
.ui-label { font-size: var(--ui-fs-sm); font-weight: 700; color: var(--ui-text-2); }
.ui-input { width: 100%; min-height: 40px; padding: 6px var(--ui-s3); border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); color: var(--ui-text); font-size: var(--ui-fs); }
.ui-input:hover { border-color: var(--ui-text-2); }
.ui-input:focus { outline: 3px solid var(--ui-accent); outline-offset: 0; border-color: var(--ui-accent); }
.ui-input[aria-invalid="true"] { border-color: var(--ui-bad-fg); }
textarea.ui-input { min-height: 90px; resize: vertical; line-height: 1.5; }
.ui-input.ui-num { text-align: right; }
.ui-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--ui-line); border-radius: var(--ui-r-lg); background: var(--ui-surface); color: var(--ui-text); box-shadow: var(--ui-shadow-pop); overflow: hidden; }
.ui-dialog[open] { display: flex; flex-direction: column; }
.ui-dialog::backdrop { background: color-mix(in srgb, var(--ps-bg) 72%, transparent); }
.ui-dialog-wide { width: min(860px, calc(100vw - 32px)); }
.ui-dialog-head { display: flex; align-items: center; gap: var(--ui-s3); padding: var(--ui-s4) var(--ui-s5); border-bottom: 1px solid var(--ui-line); }
.ui-dialog-title { margin: 0; flex: 1; font-size: var(--ui-fs-lg); font-weight: 700; }
.ui-dialog-body { padding: var(--ui-s5); overflow: auto; }
.ui-dialog-foot { display: flex; justify-content: flex-end; gap: var(--ui-s2); padding: var(--ui-s3) var(--ui-s5); border-top: 1px solid var(--ui-line); background: var(--ui-surface-2); }

/* ===== 빈 화면 · 불러오는 중 · 오류 ===== */
.ui-empty { display: flex; flex-direction: column; align-items: center; gap: var(--ui-s2); padding: var(--ui-s6) var(--ui-s4); text-align: center; border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-r-lg); background: var(--ui-surface-2); }
.ui-empty-icon { font-size: 32px; line-height: 1; color: var(--ui-muted); }
.ui-empty-text { font-size: var(--ui-fs-md); font-weight: 700; }
.ui-empty-hint { font-size: var(--ui-fs-sm); color: var(--ui-muted); max-width: 52ch; }
.ui-loading { display: flex; flex-direction: column; gap: var(--ui-s2); padding: var(--ui-s4); }
.ui-loading-text { font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-text-2); }
.ui-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--ui-surface-3) 25%, var(--ui-line) 50%, var(--ui-surface-3) 75%); background-size: 200% 100%; animation: ui-shimmer 1.4s linear infinite; }
.ui-skel:nth-child(2) { width: 85%; } .ui-skel:nth-child(3) { width: 65%; }
@keyframes ui-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ui-error { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--ui-s3); padding: var(--ui-s3) var(--ui-s4); border: 1px solid var(--ui-bad-fg); border-left-width: 6px; border-radius: var(--ui-r); background: var(--ui-bad-bg); color: var(--ui-bad-fg); font-weight: 600; }
.ui-error-mark { font-weight: 800; }
.ui-error-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }


/* ===== 움직임 줄이기 ===== */
@media (prefers-reduced-motion: reduce) {
  .ui *, .ui *::before, .ui *::after { animation: none !important; transition: none !important; }
}