/* AI 에이전트 › AI 업무 (use-cases.js): the list's head (how many, as of when, over which scope, with its two
   buttons), the cases in the shared card, an open case beside them (.ds-split/.ds-side). Design tokens only. */
.uc-panel { margin-top: var(--ds-space-4); }
[hidden] { display: none !important; }
/* The older content-header's two buttons now sit in the list's head; its sentence is the shell's. */
[data-page="usecases"] > .content-header { display: none; }
.uc-summary { min-width: 0; flex: 1 1 420px; min-height: 60px; display: flex; flex-direction: column; justify-content: flex-end; }
/* A label and its value stay on one line while they fit it; a value longer than a line (a ref or an address with no
   space) breaks inside rather than standing past the panel's edge at 390. */
.uc-pair { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* A part of a sentence that begins with its dot: it wraps whole, and breaks inside only when it is longer than a line. */
.uc-part { display: inline-block; max-width: 100%; }
.uc-summary p { margin: 0; }
.uc-summary .ui-skeleton { max-width: 360px; }
.uc-total { font-size: var(--ds-fs-md); color: var(--ds-text-2); }
.uc-total b { font-size: var(--ds-fs-2xl); font-weight: 700; color: var(--ds-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.uc-total small { font-size: var(--ds-fs-sm); }
.uc-context { margin-top: var(--ds-space-1) !important; font-size: var(--ds-fs-sm); color: var(--ds-text-2); overflow-wrap: anywhere; }
.uc-scope-name { color: var(--ds-text); font-weight: 600; }
.uc-tools { display: flex; gap: var(--ds-space-2); align-items: center; }
#uc-status:empty { display: none; }
.uc-caveat { margin: 0; padding: var(--ds-space-2) 20px var(--ds-space-3); border-top: 1px solid var(--ds-line); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
/* The finder over the list: a word, a review state, on a phone the order (its column heads are not drawn there), and
   조건 지우기 while anything is left out; under it how many of the cases read are shown. */
.uc-finder { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-line); }
.uc-finder label { margin: 0; color: inherit; font-size: var(--ds-fs-sm); }
.uc-finder :is(input, select) { margin: 0; padding-top: 7px; padding-bottom: 7px; }
.uc-find-word { flex: 1 1 240px; max-width: 360px; }
.uc-shown { margin: 0; padding: var(--ds-space-2) var(--ds-space-4) 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.uc-none { padding: var(--ds-space-4); }
.uc-none .ui-frame { text-align: left; }
.uc-none > button { margin-top: var(--ds-space-2); }
/* A column's head that orders the list: its words, and the order it holds as an arrow (aria-sort says it). */
/* The page's button:hover fills a button; a column's head stays a head under the pointer (sc94 look: 등록 drawn as a
   dark block once pressed). */
.uc-catalog .uc-sort, .uc-catalog .uc-sort:is(:hover, :active, :focus) { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; filter: none; color: inherit; font: inherit; font-weight: inherit; white-space: nowrap; cursor: pointer; }
.uc-catalog .uc-sort:hover { color: var(--ds-text); text-decoration: underline; text-underline-offset: 3px; }
.uc-catalog .uc-sort:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.uc-catalog th[aria-sort] { color: var(--ds-text); }
/* Beside 저장: that a saved record is kept as written. */
.uc-save { align-items: center; }
.uc-kept { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
/* The list: a case's name is its one link; its review state reads beside it; counts are numbers; the open case
   is marked. A name or an owner breaks between words, never inside one. */
.uc-catalog td { vertical-align: middle; }
.uc-catalog :is(td, th).num { text-align: right; font-variant-numeric: tabular-nums; }
.uc-catalog :is(.uc-state, .uc-owner, .uc-kind, .uc-at), .uc-catalog td.num { white-space: nowrap; }
.uc-catalog td.uc-name { max-width: 320px; }
/* The scope a case is observed in is one line, cut with … past its room: beside
   an open case the column took what its longest word needed and 'Demo Company A 전체' stood on three lines, every
   row 84px tall beside a name column 700px empty. */
.uc-catalog td.uc-where { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* Every column but the name is as wide as what it says; a wide screen gives the room to the names, not to gaps. */
@media (min-width: 701px) { .uc-catalog :is(th, td):not(:first-child) { width: 1%; } .uc-catalog td.uc-name { max-width: none; } }
/* A wide screen with no case open: the name keeps a third of the row and what is read of the case stands across
   the rest. It took all the room the other columns left -- at 1920 a name of twelve letters ran 950px to its own
   state, the row's six facts packed into the last third. Beside an open case the list is narrow, as before. */
@media (min-width: 1181px) {
  .uc-layout:not(.ds-split) .uc-catalog th:first-child { width: 34%; }
  .uc-layout:not(.ds-split) .uc-catalog :is(th, td):not(:first-child) { width: auto; }
}
/* A name with no space in it (a service's id-like name) breaks inside only where its column cannot hold it, so it
   never widens the list past its card. */
.uc-catalog .uc-case { padding: 0; color: var(--ds-text); font-weight: 600; text-decoration: none; text-align: left; word-break: keep-all; overflow-wrap: anywhere; }
/* An owner's name or ref is one line, cut with … past its room, as the scope is. */
.uc-catalog td.uc-owner { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
/* A name that opens its page (a person, a scope, a device) is a link where it stands: an owner's is cut with … as its
   cell is; one in the case breaks inside a word with no space rather than standing past the panel. */
.uc-catalog td.uc-owner .uc-who-open { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
[data-page="usecases"] :is(.uc-who-open, [data-uc-device], a.uc-scope-name) { max-width: 100%; color: var(--ds-accent-text); text-align: left; overflow-wrap: anywhere; }
.uc-catalog .uc-case:hover, .uc-catalog .uc-case:focus-visible { color: var(--ds-accent-text); text-decoration: underline; }
.uc-catalog tr[aria-current="true"] { background: var(--ds-accent-soft); }
/* The open row's mark is on its first cell: WebKit draws no box-shadow on a table row. */
.uc-catalog tr[aria-current="true"] > td:first-child { box-shadow: inset 3px 0 0 var(--ds-accent); }
.uc-wait { display: inline-grid; width: 64px; vertical-align: middle; }
.uc-wait .ui-skeleton-line { width: 100%; height: 10px; }
#uc-list .empty { padding: 0; text-align: left; }
#uc-list .empty .ui-frame { text-align: left; }
.uc-panel time { white-space: nowrap; }
.uc-label { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.uc-scope { font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.uc-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-top: var(--ds-space-4); }
.uc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2) var(--ds-space-4); align-items: end; }
.uc-fields label { margin-top: 10px; font-size: var(--ds-fs-sm); }
.uc-asset, .uc-requirement { border-bottom: 1px solid var(--ds-line); padding: 10px 0; }
/* 업무 책임자's box with who a typed name found under it: each a press that writes that person's ID. */
.uc-pick { position: relative; display: grid; min-width: 0; }
.uc-found { position: absolute; z-index: 2; top: 100%; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-line-strong); border-radius: var(--ds-radius-s); background: var(--ds-surface); box-shadow: var(--ds-shadow-pop); font-size: var(--ds-fs-sm); }
.uc-found:empty { display: none; }
.uc-found > [data-uc-owner-refused] { margin: 0; }
.uc-fields button { justify-self: start; }
/* The scope's picker and the ID it writes are one row; the line under them says which scope the ID is and whether
   an observation can be picked for it. */
.uc-fields.uc-scope-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.uc-scope-said { margin: var(--ds-space-2) 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.uc-scope-said:empty { display: none; }
.uc-scope-said b { color: var(--ds-text); }
/* 검토 기준: 범위 버전 and 관측 유효 기간 have a value from the start, so they wait under a summary that says both;
   opened, each stands over what it means, and the period's picker beside its box in seconds. */
.uc-basis { margin-top: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-s); }
.uc-basis > summary { cursor: pointer; font-size: var(--ds-fs-sm); font-weight: 600; }
.uc-basis > summary span { font-weight: 400; color: var(--ds-text-2); }
.uc-basis .uc-fields { align-items: start; padding-bottom: var(--ds-space-2); }
.uc-age { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ds-space-2); align-items: end; }
/* A line under a box or a group saying what it means: quieter than the form's one help. */
.uc-hint { margin: var(--ds-space-2) 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); word-break: keep-all; overflow-wrap: break-word; }
/* A required evidence is one line -- its name, whether it is required, 제거 -- over the levels it accepts in one
   row: the name stood at the foot of a column of six boxes, the half above it empty. */
.uc-requirement.uc-fields { grid-template-columns: minmax(0, 1fr) auto auto; }
.uc-requirement > fieldset { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-5); margin-top: var(--ds-space-2) !important; padding: var(--ds-space-2) var(--ds-space-3); }
.uc-requirement > fieldset .uc-check { margin: 0; }
.uc-requirement > .uc-check { margin: 0 0 9px; white-space: nowrap; }
.uc-history { border-top: 1px solid var(--ds-line); padding: var(--ds-space-3) 0; }
.uc-history summary, .uc-grid summary { cursor: pointer; }
.uc-history summary { overflow-wrap: anywhere; }
.uc-reference, #uc-form-error { overflow-wrap: anywhere; }
.uc-error, #uc-form-error { color: var(--ds-danger-text); }
.uc-check { display: flex; gap: var(--ds-space-2); align-items: center; font-size: var(--ds-fs-sm); }
.uc-check input { width: auto; margin: 0; }
/* A case's applicability, toned as every screen tones a state; a word always goes with the colour. */
:is(.uc-panel, .uc-catalog) .state[data-tone="ok"] { background: var(--ds-ok-soft); color: var(--ds-ok-text); }
:is(.uc-panel, .uc-catalog) .state[data-tone="danger"] { background: var(--ds-danger-soft); color: var(--ds-danger-text); }
:is(.uc-panel, .uc-catalog) .state[data-tone="unknown"] { background: var(--ds-unknown-soft); color: var(--ds-unknown-text); outline: 1px dashed var(--ds-unknown); outline-offset: -1px; }
/* The decision this version has, before its applicability (승인 · 적용 가능성 불명): a recorded word, not a state chip. */
.uc-decided { flex: none; margin-right: var(--ds-space-2); color: var(--ds-ok-text); font-size: var(--ds-fs-sm); font-weight: 600; white-space: nowrap; }
.uc-decided::after { content: " ·"; color: var(--ds-text-3); font-weight: 400; }
/* Beside the name the two stay one line, so a wrap never leaves the dot at a line's end. */
.uc-verdict { display: inline-flex; flex: none; align-items: center; }
/* What stands for an open case's version -- the decision it has, why its state is what it is, what may be done next
   -- as one block over the buttons. The decision's word is the title's green and the reason the quieter line. */
.uc-now { display: grid; gap: var(--ds-space-1); margin: var(--ds-space-3) 0; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-s); background: var(--ds-surface-2); }
.uc-now p { margin: 0; word-break: keep-all; overflow-wrap: break-word; }
.uc-now [data-uc-reason] { color: var(--ds-text-2); }
.uc-now-decision b { color: var(--ds-ok-text); }
/* A step to take is the heavier line; a choice left open, or nothing to do, is said at the text's own weight. */
.uc-now[data-uc-now="do"] .uc-next-step { font-weight: 600; }
/* An open case: its name, state and the way back first; beside the list it is one column under the sticky
   shell header, and the list keeps the columns that fit (the counts and dates are in the case). */
.uc-panel .section-title { gap: var(--ds-space-3); align-items: flex-start; }
/* The case's state sits beside its name, apart from 닫기 above. */
.uc-panel .section-title h2 { min-width: 0; max-width: 100%; margin: 0; font-size: var(--ds-fs-lg); font-weight: 700; letter-spacing: 0; word-break: keep-all; overflow-wrap: anywhere; }
.uc-panel .section-title .state { flex: none; }
.uc-panel h2:focus { outline: none; }
.uc-panel h2:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-side#uc-detail { display: grid; gap: 0; scroll-margin-top: var(--ds-space-3); }
.ds-side#uc-detail > :is(article, section) { margin: 0; padding: var(--ds-space-4) 0; border: 0; border-top: 1px solid var(--ds-line); border-radius: 0; background: none; box-shadow: none; min-height: 0; }
.ds-side#uc-detail > :first-child { padding-top: 0; border-top: 0; }
.ds-side#uc-detail h3 { margin: 0 0 var(--ds-space-2); }
.ds-side#uc-detail .uc-actions { margin-top: var(--ds-space-3); }
.ds-side#uc-detail p { overflow-wrap: break-word; }
@media (min-width: 1181px) {
  [data-uc-detail-open] .uc-catalog .uc-extra { display: none; }
  /* Beside an open case the list is as wide as its half, not the shared table's 760px least: at a desk's width
     관측 범위 stood past the card's right edge, reached only by scrolling the card sideways. */
  [data-uc-detail-open] .uc-catalog .table-wrap table { min-width: 0; }
  .uc-layout .ds-side { top: 124px; max-height: calc(100vh - 140px); }
}
@media (max-width: 700px) {
  .uc-fields, .uc-fields.uc-scope-row { grid-template-columns: 1fr; }
  .uc-tools { width: 100%; }
  .uc-tools button { flex: 1; }
  /* A row is a card: its name and state, then who owns it and its counts, each count named. */
  .uc-catalog thead { display: none; }
  .uc-catalog table, .uc-catalog tbody { display: block; min-width: 0; }
  .uc-catalog tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border-top: 1px solid var(--ds-line); }
  .uc-catalog tr:first-child { border-top: 0; }
  .uc-catalog td { display: block; padding: 0; border: 0; }
  .uc-catalog td.uc-name { flex: 1 1 60%; min-width: 0; max-width: none; }
  .uc-catalog td.uc-state { flex: none; }
  .uc-catalog td.uc-owner { flex-basis: 100%; max-width: none; white-space: normal; overflow-wrap: anywhere; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
  .uc-catalog td.uc-owner .uc-who-open { white-space: normal; }
  /* The finder: the word across the card, the state and the order side by side under it. */
  .uc-finder { padding: var(--ds-space-3); }
  .uc-find-word { flex-basis: 100%; max-width: none; }
  
  /* 조건 지우기 takes its own line, so the two pickers keep their words whole (390: '검토 상태 · 5'). */
  .uc-finder [data-uc-clear] { flex: 1 1 100%; }
  .uc-shown { padding: var(--ds-space-2) var(--ds-space-3) 0; }
  .uc-catalog td.uc-extra { font-size: var(--ds-fs-sm); color: var(--ds-text-2); text-align: left; }
  .uc-catalog td.uc-extra::before { content: attr(data-label) " "; }
  
}
/* A wall screen: the cases are read from across a room. */
@media (min-width: 1700px) { .uc-catalog table { font-size: var(--ds-fs-md); } .uc-catalog .state { font-size: var(--ds-fs-sm); } }
/* P2-12 (10-06 review): the screen's running text is 14px, a note under it 13px; P2-17: what a read-only role is told. */
[data-page="usecases"] { font-size: var(--ds-fs-md); }
[data-page="usecases"] :is(.uc-catalog table, .uc-panel, .uc-grid) { font-size: var(--ds-fs-md); }
[data-page="usecases"] :is(.inventory-note, .row small) { font-size: var(--ds-fs-sm); }
.uc-held { margin: var(--ds-space-2) 0 0; font-size: var(--ds-fs-sm); color: var(--ds-text-2); }