/* 현황 · AI 에이전트 (화면1): what only these screens draw -- 현황 › 요약 (.ov-*), the managed lists (.ml-*),
   the search's who-columns (.su-who*) and the entity page (.pe-*). Every value is a design token (--ds-*).
   A state's colour and edge (data-state), a quiet unknown, the unknown summary and the field grid are
   style.css's; here they are only placed and, for the 현황 figures, made larger. */

/* Read from across a room: outside management is a solid edge, not judged a dashed edge over stripes. */
/* The summary's whole state (failed, graph not built, no company) is the shared frame, apart from the card under it. */
#overview-root>.ui-frame{margin-bottom:var(--ds-space-4)}
:is([data-managed-no-roster],[data-managed-not-collected])>.text-action,:is([data-managed-no-roster],[data-managed-not-collected]) .ui-frame>button{margin-top:var(--ds-space-2)}
#overview-root :is(td,th).num{text-align:right;font-variant-numeric:tabular-nums}
/* 관리 밖 사유별 인원: a reason's count stands right after its name with its share as a bar (the largest reason is
   the bar's whole length), who acts and what they do follow, and the two ways on close the row -- the row was a
   name, 500px of nothing, two figures, and the ways on another 300-480px past what they act on. */
[data-managed-reasons] td.num{white-space:nowrap}
[data-managed-reasons][data-shares] :is(.ov-th-work,.ov-th-go){width:1%;white-space:nowrap}
/* What to do today and why people are not judged, under the reasons they come from. A to-do is one line -- who
   acts and how, the reason and its count, where it opens -- so the list is as short as what it says. When nobody
   is unjudged (or nobody can be counted) that card is one line and the to-dos take the width in two columns:
   no half of the row stands empty. */
[data-managed-today-list] .row{align-items:center;gap:var(--ds-space-3);min-height:44px;break-inside:avoid}
[data-managed-today-list] .row>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--ds-space-3);min-width:0}
[data-managed-today-list] .row>button{flex:none;white-space:nowrap}
[data-managed-unknowns]:has([data-unknowns-empty="none"])>.inventory-note{display:none}
[data-managed-unknowns] [data-unknowns-empty] .empty{padding:var(--ds-space-1) 0 0;text-align:left}
/* The three rates are one comparison across the card's width (they stood in three of five columns). */
[data-managed-rates] .ov-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){[data-managed-rates] .ov-grid{grid-template-columns:minmax(0,1fr)}}
/* The six feature tiles span the page like the figures above them (they filled three quarters of it). */
[data-managed-tiles] .ov-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1100px){[data-managed-tiles] .ov-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){[data-managed-tiles] .ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The asset block is a card of its own under the summary: a card's gap apart (it touched the block above it). */
#overview-assets{margin-top:var(--ds-space-4)}
/* The installation's tag is a sentence: on a narrow screen it breaks inside the card, never off its edge (현황 390). */
#overview-assets .ov-install{min-width:0}
#overview-assets .ov-install .tag{display:inline-block;max-width:100%;height:auto;white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.4}

/* A state tile is 현황's figure, a step smaller; pressed is the shared look (style.css button.ov-metric[aria-pressed]). */
:is(.ml-states,.inv-band) .ov-metric{align-items:flex-start;text-align:left;padding:10px 14px;cursor:pointer;font-weight:400}
:is(.ml-states,.inv-band) .ov-metric strong{font-size:var(--ds-fs-2xl)}
:is(.ml-states,.inv-band) .ov-metric strong .ov-unit{font-size:var(--ds-fs-md)}
:is(.ml-states,.inv-band) .ov-metric strong .quiet-unknown{font-size:var(--ds-fs-lg);font-weight:600;letter-spacing:0}
/* A state tile here is a filter: its figure says the state (colour), and only the pressed one has an edge and a
   fill, the same for every state -- two tiles never both look chosen. Not judged keeps its dashed edge. A figure
   that is of nobody, or was not read, carries no state colour. */
:is(.ml-states,.inv-band) .ov-metric[data-state]:not([aria-pressed="true"]){border:1px solid var(--ds-line);background:var(--ds-surface)}
:is(.ml-states,.inv-band) .ov-metric[data-state="unknown"]:not([aria-pressed="true"]){border-style:dashed;border-color:var(--ds-unknown)}
:is(.ml-states,.inv-band) .ov-metric[aria-pressed="true"]{border:1px solid var(--ds-accent);border-style:solid;background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
:is(.ml-states,.inv-band) .ov-metric:is([data-nobody],[data-unread]) strong{color:var(--ds-text)}
:is(.ml-states,.inv-band) .ov-metric:is([data-nobody],[data-unread]):not([aria-pressed="true"]){border-style:solid;border-color:var(--ds-line)}
/* A reason nobody holds is still a filter, read after the ones that have people: quiet, not bold. */
.ml-tools{display:flex;flex-wrap:wrap;gap:var(--ds-space-2) var(--ds-space-3);align-items:center;margin:0}
.ml-unit{display:flex;gap:6px;align-items:center;margin:0;white-space:nowrap}
.ml-unit select{margin:0}
/* A word 용어 도움말 explains, explained where it is said (its bubble on hover and focus): a dotted line marks it. */
.ag-term{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
/* A kind filter's choice whose bubble says the dialog's sentence: its name is marked the same way. */
[data-inv-facet-group="kinds"] label[data-tooltip]>span{text-decoration:underline dotted;text-underline-offset:3px}
.ml-table td{vertical-align:middle}
.ml-table :is(td,th).num{text-align:right;font-variant-numeric:tabular-nums}
.ml-table td:first-child{max-width:260px}
.ml-table .ml-name{vertical-align:middle;color:var(--ds-text);font-weight:600;text-decoration:none}
.ml-table .ml-name:hover,.ml-table .ml-name:focus-visible{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);text-decoration:underline}
/* A reason is a line, and who acts on it is the same line of the next cell (one height for both); who acts is
   read first, bold in the text's own colour, what they do beside it. */
.ml-line{display:flex;align-items:center;gap:var(--ds-space-2);min-height:24px;min-width:0}
/* A reason line with its 기술 정보 (a hook's event names, managed-unmanaged.js hookFold): opened, the sentence stays on the
   fold's first line; where the line has no room beside the sentence (a phone), the fold goes under it whole. */
.ml-line>.detail-fold{margin-top:0}
.ml-line:has(>.detail-fold){align-items:baseline;flex-wrap:wrap;row-gap:0}
.ml-table td.who{color:var(--ds-text);font-size:var(--ds-fs-sm)}
.ml-table td.who b{flex:none;font-weight:600}
.ml-table td.who .ml-line>span{color:var(--ds-text-2);white-space:nowrap}
/* The columns keep their share whether the rows came or not, and on a wide screen the reasons do not push who
   acts to the far edge. */
.ml-table table{width:100%}
/* The list's head stays under the top bar while its rows are scrolled (a list of a hundred rows was read with no
   column names past the first screen: whole-review F-040). From 1440px the table has room to spare in its card
   (the reasons and who acts are as wide as they say, and a third of the row was left over there on the c3.47
   copy), so the wrap need not scroll sideways and the card clips instead of hiding -- a box that hides or scrolls
   would be what the head sticks to, and it would scroll away with it. Narrower, the wrap scrolls as before. */
@media(min-width:1440px){
  .ml-table{overflow:clip}
  .ml-table>.table-wrap{overflow:visible}
  .ml-table thead th{position:sticky;top:64px;z-index:2}
}
.ml-th-name{width:16%}.ml-th-id{width:8%}.ml-th-unit{width:14%}
/* The reasons are as wide as the widest of them and who acts takes what is left, right beside them: the eye goes
   from a reason to who acts on it without crossing a gap. The marks stand under the head's word. */
.ml-table td[data-col="why"]{white-space:nowrap}
.ml-table td[data-col="why"] :is(.ml-lines,.ml-line){min-width:max-content}
/* ...up to 20rem: a longer reason goes on under itself rather than push who acts past the card, which clips from
   1440px for the head that stays (rfqa c3.102 1440 기기: a hook reason held 사유 at 543px and 담당·조치 was cut 159px,
   with no way to scroll to it). Below 20rem the column is still its widest reason's width. */
@media(min-width:701px){
  .ml-table td[data-col="why"]{white-space:normal}
  .ml-table td[data-col="why"] :is(.ml-lines,.ml-line){min-width:0}
  
}
/* 기기 and 에이전트: who acts is the last column and takes what is left. Its line held the action on one line while
   telling the table it could be 0 wide (.ml-line min-width:0 in a grid), so a 20rem reason left it 152px and 'Gateway
   경유 설정·단말 정책' ran 74px past the card, which clips from 1440 (rh c3.108 기기: table 1200 in a 1126 card, 92 of
   100 cells; 1024: 226 in a 76px cell). The action goes on under its owner and wraps between its words, and the line
   is never narrower than its longest word, so the column is at least that wide. */
@media(min-width:701px){
  .ml-table table:not(:has(.ml-th-num)) td.who .ml-line{flex-wrap:wrap;row-gap:0;min-width:min-content}
  .ml-table table:not(:has(.ml-th-num)) td.who .ml-line>:is(span,.ml-act){white-space:normal;min-width:0;text-align:left}
}
/* 사람: who acts is as wide as what it says and the device count follows it, read with the row; the room the
   table has left is after the last column, not a gap between who acts and a number at the far edge. */
@media(min-width:701px){
  .ml-table table:has(.ml-th-num) td[data-col="who"]{white-space:nowrap;padding-right:var(--ds-space-6)}
  .ml-table table:has(.ml-th-num) td[data-col="who"] :is(.ml-lines,.ml-line){min-width:max-content}
  .ml-table table:has(.ml-th-num) :is(.ml-th-num,td[data-col="num"]){width:auto;text-align:left}
}
/* The list's order, said at the head of its rows in the text's own colour (it was a small grey aside by the count). */
.ml-table [data-managed-waiting]>.ui-skeleton,.ml-table[data-managed-waiting]>.ui-skeleton{padding:var(--ds-space-2) var(--ds-space-4)}
/* Why a row was not judged is the reason's own mark, dashed and quiet: the column is one shape, one row height. */
.ml-unjudged{padding-block:0;border-style:dashed;color:var(--ds-text-2);font-weight:500}
.ml-none{color:var(--ds-text-3)}
.ml-table td .quiet-unknown{white-space:nowrap}
@media(max-width:1100px){:is(.ml-states,.inv-band){grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* A narrow screen: the five states are one row and the reasons one line, so the list starts on the first screen. */
@media(max-width:700px){
  
  
  
  
  /* A row is its name with its state, what tells it apart under it, then its reasons and who acts on each: the
     columns are folded into the row, so nothing of it is off the screen's right edge. The head stays for a reader. */
  .ml-table .table-wrap table{min-width:0}
  .ml-table table,.ml-table tbody{display:block}
  .ml-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ml-table tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--ds-space-3);padding:var(--ds-space-3) var(--ds-space-4);border-bottom:1px solid var(--ds-line)}
  .ml-table tbody tr:last-child{border-bottom:0}
  .ml-table tbody td{display:block;padding:0;border:0;max-width:none;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
  .ml-table tbody td[data-col="name"]{order:-2;flex:1 1 0;min-width:0;max-width:none;font-size:var(--ds-fs-md)}
  .ml-table tbody td[data-col="state"]{order:-1;flex:none}
  /* The first line ends after the name and its state, whatever their widths. */
  .ml-table tbody tr::before{content:"";flex:0 0 100%;height:0;margin-bottom:-2px}
  .ml-table tbody td.num{text-align:left}
  .ml-table tbody td:is([data-col="why"],[data-col="who"]){flex:1 0 100%;order:1}
  .ml-table tbody td[data-col="who"]{order:2}
  .ml-table td.who .ml-line>span,.ml-table td[data-col="why"]{white-space:normal}
  .ml-table td[data-col="why"] :is(.ml-lines,.ml-line){min-width:0}
  .ml-table tbody .ml-name{min-height:0;padding-block:0}
  
}
/* A wall screen: the figures and the rows are read from across a room. */
@media(min-width:1700px){
  :is(.ml-states,.inv-band) .ov-metric strong{font-size:var(--ds-fs-figure)}
  :is(.ml-states,.inv-band) .ov-metric strong .ov-unit{font-size:var(--ds-fs-lg)}
  :is(.ml-states,.inv-band) .ov-metric>span,:is(.ml-states,.inv-band) .ov-metric small{font-size:var(--ds-fs-md)}
  .ml-table table,.ml-table td.who{font-size:var(--ds-fs-md)}
  .ml-table .tag,.ml-table .ui-mark,.ml-context,.ml-context .tag,.ml-count{font-size:var(--ds-fs-sm)}
  .ml-line{min-height:28px}
}

/* 검색: who a row is */
/* The columns take their widths from the head, not from what the rows hold (table-layout:fixed): a column does
   not move when a row's who, state or evidence is read after the page. Who and state are a share of the width
   each, cut with the full name in the title; the name and the read columns share the rest and wrap inside it. */
#agent-search-root [data-search-results]{table-layout:fixed}
#agent-search-root [data-search-results] th:is([data-col="who-person"],[data-col="who-device"],[data-col="who-unit"]){width:14%;min-width:120px}
#agent-search-root [data-search-results] th:is([data-col="who-managed"],[data-col="who-agents"],[data-col="result"]){width:10%;min-width:88px}
#agent-search-root [data-search-results] th:is([data-col="who-model"],[data-col="who-os"]){width:12%;min-width:104px}
#agent-search-root [data-search-results] th:is([data-col="who-gateway"],[data-col="who-devices"]){width:9%;min-width:84px}
#agent-search-root [data-search-results] th[data-col="boundary"]{width:12%;min-width:120px}
#agent-search-root [data-search-results] th:is([data-col="target"],[data-col="conditions"],[data-col="evidence"]){min-width:160px}
#agent-search-root [data-search-results] th[data-col="reasons"]{min-width:140px}
#agent-search-root [data-search-results] th{overflow:hidden;text-overflow:ellipsis}
#agent-search-root [data-search-results] td{max-width:none;overflow-wrap:anywhere}
#agent-search-root [data-search-results] td:last-child:not([data-row-who]){white-space:normal}
#agent-search-root [data-search-results] td[data-col="evidence"] .su-node-name{white-space:normal}
#agent-search-root td[data-row-who]{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Who and which device are a press inside a cut cell: the name itself is cut with an ellipsis (it was clipped
   at the cell's edge without one, mid-letter). */
#agent-search-root .su-who-none{color:var(--ds-text-3)}
/* A matched condition is said whole and wraps inside its cell; it never spills into the next column. */
#agent-search-root td[data-col="conditions"]{min-width:180px;max-width:320px;white-space:normal}

/* A value that would find nothing stays a choice, said quieter. */
#agent-search-root .su-unjudged{display:block;margin-top:2px;color:var(--ds-unknown-text);font-size:var(--ds-fs-xs)}
#agent-search-root .su-unjudged:empty{display:none}
/* A row's 상세: the last column is its one quiet button, as wide as the button. */
#agent-search-root [data-search-results] th[data-col="detail"]{width:72px}
#agent-search-root [data-search-results] td[data-col="detail"]{text-align:right;white-space:nowrap}
/* The detail itself (the shared drawer): the page's button first, then who, what the graph knows with each value's
   basis beside it, the relations as counts, and what this search said. It stands beside the root, so the
   screen's own marks are named again here. */
#su-row-detail{width:min(560px,100vw)}
#su-row-detail .button-row{margin:0 0 var(--ds-space-2)}
#su-row-detail h2:focus{outline:none}
#su-row-detail .drawer-sub small{margin-left:var(--ds-space-2);color:var(--ds-text-2);font-weight:400}
#su-row-detail .kv>span:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--ds-space-1) var(--ds-space-2);min-width:0}
#su-row-detail .su-who-none{color:var(--ds-text-3)}
#su-row-detail .button-row{display:flex;flex-wrap:wrap;gap:var(--ds-space-2)}
#su-row-detail .su-rd-list{margin:0;padding:0;list-style:none}
#su-row-detail .su-rd-list li{padding:var(--ds-space-2) 0;border-bottom:1px solid var(--ds-line)}
#su-row-detail .su-rd-list .link-button{font-weight:500;text-align:left;overflow-wrap:anywhere}
#su-row-detail .su-rd-unjudged{color:var(--ds-unknown-text)}
#su-row-detail .su-rd-id{margin-top:var(--ds-space-5);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
#su-row-detail .su-rd-id summary{cursor:pointer}
#su-row-detail .su-rd-id p{margin:var(--ds-space-1) 0 0;overflow-wrap:anywhere}
/* With no read column (matched conditions, evidence) the name keeps a third of the row and what is read of it
   stands right after it, the last column taking the room that is left (the other lists' way: 관리 밖, AI 업무).
   At shares of the whole width the name took 44% and a twelve-letter name stood 450px from its user (VA-5); a
   person or a device search, with one or two columns after the name, put them at the far right edge. */
#agent-search-root [data-search-results]:not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="target"]{width:34%}
#agent-search-root [data-search-results]:not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th:is([data-col="who-person"],[data-col="who-unit"]){width:20%}
#agent-search-root [data-search-results]:not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="who-device"]{width:22%}
#agent-search-root [data-search-results]:not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th:is([data-col="who-managed"],[data-col="who-agents"],[data-col="result"]){width:12%}
#agent-search-root [data-search-results]:not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th:last-child{width:auto}
/* An agent row with the fuller context (its unit, model and Gateway connection beside whose it is): eight columns
   share the card's width, so the last ones are not pushed out of it and a state mark is not cut (at 1440 the table
   is 870px: the shares above added up to 129% of it and 상세 stood outside the card). A model's name may take two
   lines. With a read column as well (matched conditions, evidence) there is no room for ten below a wall screen:
   the three added columns give way there and stay in the row's 상세. */
#agent-search-root [data-search-results]:has(th[data-col="who-model"]) :is(th,td){padding-inline:var(--ds-space-2)}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]) :is(th,td):first-child{padding-left:var(--ds-space-3)}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]) td[data-row-who="model"]{white-space:normal}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]):not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="target"]{width:19%}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]):not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="who-person"]{width:11%;min-width:0}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]):not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="who-unit"]{width:13%;min-width:0}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]):not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="who-device"]{width:15%;min-width:0}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]):not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="who-model"]{width:13%;min-width:0}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]):not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th:is([data-col="who-gateway"],[data-col="who-managed"],[data-col="result"]){width:10%;min-width:0}
#agent-search-root [data-search-results]:has(th[data-col="who-model"]):not(:has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"]))) th[data-col="detail"]{width:72px}
@media(max-width:1699px){
  #agent-search-root [data-search-results]:has(th[data-col="who-model"]):has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"])) :is(th:is([data-col="who-unit"],[data-col="who-model"],[data-col="who-gateway"]),td:is([data-row-who="unit"],[data-row-who="model"],[data-row-who="gateway"])){display:none}
}
@media(min-width:1700px){
  #agent-search-root [data-search-results]:has(th[data-col="who-model"]):has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"])) th[data-col="target"]{width:14%;min-width:0}
  #agent-search-root [data-search-results]:has(th[data-col="who-model"]):has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"])) th:is([data-col="who-person"],[data-col="who-unit"]){width:9%;min-width:0}
  #agent-search-root [data-search-results]:has(th[data-col="who-model"]):has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"])) th:is([data-col="who-device"],[data-col="who-model"]){width:11%;min-width:0}
  #agent-search-root [data-search-results]:has(th[data-col="who-model"]):has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"])) th:is([data-col="who-gateway"],[data-col="who-managed"],[data-col="result"]){width:7%;min-width:0}
  #agent-search-root [data-search-results]:has(th[data-col="who-model"]):has(th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"],[data-col="boundary"])) th:is([data-col="conditions"],[data-col="evidence"],[data-col="reasons"]){min-width:0}
}
/* A row's name is its one link, in the text's own colour like the other lists' names (관리 밖, 도구). */
#agent-search-root [data-testid="agent-search-row-open"]{color:var(--ds-text);font-weight:600;text-decoration:none}
#agent-search-root [data-testid="agent-search-row-open"]:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ds-accent) 8%,transparent);text-decoration:underline}
/* A wall screen: the count and the rows are read from across a room. */
@media(min-width:1700px){
  
  #agent-search-root [data-search-results]{font-size:var(--ds-fs-md)}
  #agent-search-root [data-search-results] .tag{font-size:var(--ds-fs-sm)}
}

/* A spaced dot and its no-break space keep together (person-entity.js DOT): WebKit under keep-all breaks between them. */
#entity-root h4:not(.lx-click-h){margin:22px 0 var(--ds-space-2);font-size:var(--ds-fs-lg)}
#entity-root .kv{justify-content:flex-start;gap:var(--ds-space-4);padding:9px 0;font-size:var(--ds-fs-sm)}
#entity-root .kv>span:first-child{flex:0 0 132px}
#entity-root .kv>span:last-child{flex:1;text-align:left}
#entity-root .quiet-unknown{cursor:help}
.pe-after{margin-top:var(--ds-space-2)}
@media(max-width:600px){#entity-root .kv>span:first-child{flex:none}}

/* AI 에이전트 › 도구: a row is one line -- only the name may wrap; a date or a state never breaks in two. */
.inv-main td:nth-child(n+2),.inv-main th{white-space:nowrap}
/* 정밀 검사's note (검사 정보 미수신, 상세에서 확인) is words, not a state: it wraps, so the company list's eight columns fit a
   1440 screen (22px past it, measured on b135 10-10); its verdict chip stays one line. */
.inv-main .inv-table td[data-testid="inventory-deep-scan-cell"]{white-space:normal}.inv-main .inv-table td[data-testid="inventory-deep-scan-cell"] .state{white-space:nowrap}
.inv-main td:nth-child(3){max-width:150px;overflow:hidden;text-overflow:ellipsis}
.inv-main :is(td,th){padding-left:10px;padding-right:10px}
.inv-main td:first-child{min-width:190px;max-width:360px}
/* The band of 관측 상태 over the filters and the list; the list in the shared card; a name is the row's one
   control and wraps whole (never cut); an empty answer is the shared frame. */
.inv-band{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ds-space-3);margin:0 0 var(--ds-space-4)}
/* The list's head: what the list is of, with 새로고침 beside it (inventory.js moved both out of the older
   content-header, whose sentence the shell already says). A figure still being read is its shape, not 판단 불가. */
[data-page="inventory"]>.content-header{display:none}
.inv-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-2) var(--ds-space-4);margin:0 0 var(--ds-space-3)}
.inv-head #inventory-status{flex:1 1 360px;margin:0;font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.inv-head>.inv-head-t{flex:1 1 360px;min-width:0}.inv-head-t>.lx-lede+#inventory-status{margin-top:4px}
.inv-wait{display:inline-grid;width:96px;vertical-align:middle}
.inv-wait .ui-skeleton-line{width:100%;height:22px}
/* A long name without a break wraps inside its cell instead of pushing the table wide. */
.inv-main .name-cell>div{min-width:0}
.inv-main td:first-child .name-cell{max-width:340px}
/* A tile keeps its note line when it says nothing yet (read, failed, nobody): the band is one height in every
   state and the list under it does not move when the counts come. */
:is(.inv-band,.ml-states) .ov-metric small:empty::before{content:"\200b"}
/* The list's columns keep their widths whether its rows came, failed or are still read: sized to the header alone
   when no row was drawn, they jumped once rows came. A long cell still grows its column (auto layout). */
.inv-table table{width:100%}
/* A header cell holds its column at the least its cells hold it (the name's 190px, the scope's 150px), so the head
   drawn alone -- rows still read, or a read that failed -- stands where it stands over its rows. The company list's
   kind, state, approval and two instants hold what their longest cell takes ('26. 10. 15. 오후 11:09' is 148px):
   at 15% of a desk's width an instant took 133px and pushed the name's column 19px left when the rows came. */
.inv-main th:first-child{min-width:190px}
.inv-main th:nth-child(3){min-width:150px}
[data-inv-company]>.inv-main .inv-table th:nth-child(2){min-width:84px}
/* 확인 근거's longest cell is the Needs review pill (UR30's word for 판단 불가; 85px at 1440): at 72px the column grew
   6px when the rows came and took it from the name's. */
[data-inv-company]>.inv-main .inv-table th:nth-child(4){min-width:88px}
/* The approval column's longest word is the marked '정책 없음' (81px): at 72px it grew 8px when the rows came. */
[data-inv-company]>.inv-main .inv-table th:nth-child(6){min-width:84px}
[data-inv-company]>.inv-main .inv-table th:is(:nth-child(5),:nth-child(7)){min-width:148px}
/* The name takes the room the two instants do not need: a long name wrapped in three lines at 21%. It is the one
   column with no share of its own and takes what the others leave (27% of seven columns): where a column is
   dropped or 정밀 검사 stands among them (091eadbe2), the shares come to less than the table, and that rest went to
   the columns by their cells, so they moved up to 3px when the rows came (browser_assets_company, 1440). */
[data-inv-company]>.inv-main .inv-table th:nth-child(1){width:auto}
[data-inv-company]>.inv-main .inv-table th:nth-child(2){width:10%}
[data-inv-company]>.inv-main .inv-table th:nth-child(3){width:15%}
[data-inv-company]>.inv-main .inv-table th:nth-child(4){width:9%}
[data-inv-company]>.inv-main .inv-table th:nth-child(5){width:15%}
[data-inv-company]>.inv-main .inv-table th:nth-child(6){width:9%}
[data-inv-company]>.inv-main .inv-table th:nth-child(7){width:15%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(1){width:20%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(2){width:10%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(3){width:14%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(4){width:9%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(5){width:14%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(6){width:10%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(7){width:15%}
.inv-layout:not([data-inv-company])>.inv-main .inv-table th:nth-child(8){width:8%}
/* 도구's filter groups open and close with the mark 검색's do (a chevron at the row's end), not the browser's triangle. */
.inv-facets:not(.su-filters) details:not(.inv-facet-fold)>summary{display:flex;align-items:center;gap:var(--ds-space-1);list-style:none}
.inv-facets:not(.su-filters) details:not(.inv-facet-fold)>summary::-webkit-details-marker{display:none}
.inv-facets:not(.su-filters) details:not(.inv-facet-fold)>summary::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-left:auto;border-right:1.5px solid var(--ds-text-2);border-bottom:1.5px solid var(--ds-text-2);transform:rotate(45deg) translateY(-2px);transition:transform .12s}
.inv-facets:not(.su-filters) details:not(.inv-facet-fold)[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
/* Inside a filter group a note (없음 · 미확인 · 불러오는 중) sits under the group's name, not pulled up onto it. */
.inv-facets details>div>.inventory-note{margin:var(--ds-space-1) 0 0}
/* A group's own note (what 최초 탐지일 is, what Gateway 설정 judges) is a line under its boxes: the class's pull-up
   drew it over the last box. */
.inv-facets details>.inventory-note{margin:var(--ds-space-2) 0 0}
/* The filters' fold is a narrow screen's line; on a wide one the filters are simply open beside the list. */
.inv-facet-fold>summary{padding:var(--ds-space-1) 0;cursor:pointer;font-size:var(--ds-fs-sm);font-weight:600}
@media(min-width:1181px){.inv-facet-fold[open]>summary{display:none}}
.inv-facets>.inv-facet-fold{border-top:0;padding:0}
/* A narrow screen: the list's head is one row, the four counts one row, the filters folded, so the list starts
   on the first screen. */
@media(max-width:700px){
  .inv-head{flex-wrap:nowrap}.inv-head #inventory-status{flex:1 1 0}.inv-head>button{flex:none}
  .inv-band{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ds-space-2);margin-bottom:var(--ds-space-3)}
  .inv-band .ov-metric{padding:8px 10px}
  .inv-band .ov-metric>span{font-size:var(--ds-fs-xs)}
  .inv-band .ov-metric strong{font-size:var(--ds-fs-lg)}
  .inv-band .ov-metric strong .ov-unit{font-size:var(--ds-fs-xs)}
  .inv-band .ov-metric strong .quiet-unknown{font-size:var(--ds-fs-sm)}
  .inv-band .inv-wait{width:100%}.inv-band .inv-wait .ui-skeleton-line{height:16px}
  .inv-layout>.inv-main .table-wrap table{min-width:880px}
  .inv-facets{padding:var(--ds-space-2) var(--ds-space-3)}
}
.inv-table .inv-name{padding:0;color:var(--ds-text);font-weight:600;text-decoration:none;text-align:left;white-space:normal;overflow-wrap:anywhere}
.inv-table .inv-name strong{font-size:var(--ds-fs-sm);font-weight:600}
.inv-table .inv-name:hover,.inv-table .inv-name:focus-visible{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);text-decoration:underline}
.inv-table :is(td,th).num{text-align:right}
.inv-table .ui-skeleton{padding:var(--ds-space-2) var(--ds-space-4)}
.inv-main .empty.ui-frame{margin:var(--ds-space-3) var(--ds-space-4);padding:var(--ds-space-5) var(--ds-space-4);text-align:left;font-size:var(--ds-fs-sm)}
.inv-main [data-inv-refused],.inv-main>.ui-frame{margin:0 0 var(--ds-space-3)}

/* A result row has one link, the thing it opens; who and which device are read, and open on a press. */
.su-query-said{margin:var(--ds-space-2) 0;font-size:var(--ds-fs-md)}
.su-query-tech{margin-bottom:var(--ds-space-3);font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.su-query-tech summary{cursor:pointer}
/* The entity page: sections flow into two even columns; where a value came from is said quietly after it. */
/* One shape on every entity page -- an agent's field grid, a device's or a person's rows and their tables' heads: a
   quiet word after the value (a device's page drew the same marks as coloured chips). */
#entity-root :is(.basis-tag,[data-basis]):not(.lx-bdg){background:transparent;border-color:transparent;padding-left:0;padding-right:0;font-weight:400;color:var(--ds-text-2)}
/* A sentence keeps a readable length on a wide screen and still takes its whole row. */
.rt-unit{display:inline-flex;align-items:center;gap:var(--ds-space-2);color:var(--ds-text);font-size:var(--ds-fs-md)}
/* The kept periods are the screen's figures: a step larger, and the same box in every browser (no stepper). */
.rt-unit input::-webkit-outer-spin-button,.rt-unit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* What the deletion job removes under these periods: read beside the save, in the text's own colour. */
/* A wide screen: more room between the two, and the figures, the fields' names and the notes a step larger. */
@media (min-width:1600px){
.rt-unit{font-size:var(--ds-fs-lg)}
}
.pe-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3);margin:0 0 var(--ds-space-3);font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.pe-list span{font-variant-numeric:tabular-nums}
/* The page's heading already says the name large; the card says it one step smaller. */
#entity-root [data-entity-title]{font-size:var(--ds-fs-xl)}
#entity-root [data-entity-title]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2)}
/* The reasons under a state (person-entity.js fafae370) stand right under its mark, not a browser's list away. */
#entity-root .kv ul[data-entity-reasons]{margin:var(--ds-space-1) 0 0;padding-left:var(--ds-space-4)}
/* A wall screen: an entity's rows, its sections' names and its own name are read from across a room. */
@media(min-width:1700px){
  #entity-root .kv,.pe-missing,.pe-list{font-size:var(--ds-fs-md)}
  #entity-root .kv>span:first-child{flex-basis:168px}
  
  #entity-root [data-entity-title]{font-size:var(--ds-fs-2xl)}
  
}
/* The asset drawer: the collector's identifiers are one quiet group at the panel's end, a line apart. */
/* The drawer's rows read from the left: a value stands right after its name. The shared .kv sets a value at the
   row's far edge -- in the 580px drawer that is 500px from its name, and a reason of several lines (Gateway 설정's)
   stood ragged on its left. Under 600px the shared rule already stacks a row. */
@media(min-width:601px){
  #asset-drawer .kv{justify-content:flex-start;gap:var(--ds-space-4)}
  #asset-drawer .kv>span:first-child{flex:0 0 128px}
  #asset-drawer .kv>span:last-child{flex:1 1 0;text-align:left}
}
/* A note after the last row stands a step under its line (it touched it). */
#asset-drawer .kv+.inventory-note{margin-top:var(--ds-space-3)}
#asset-drawer [data-asset-tech]{margin-top:var(--ds-space-5);padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line);color:var(--ds-text-2)}
#asset-drawer [data-asset-tech] small{margin-left:var(--ds-space-2);font-weight:400}
#asset-drawer [data-asset-tech]~.kv{color:var(--ds-text-2)}
#asset-drawer [data-asset-tech]~.kv code{overflow-wrap:anywhere}
/* A wall screen: 도구's rows a step larger, like the other lists'. */
@media(min-width:1700px){.inv-table table{font-size:var(--ds-fs-md)}.inv-table .tag{font-size:var(--ds-fs-sm)}}
/* The asset drawer's first lines: state, last sighting, what it touches, the next step and whose it is, above the
   tabs (제품 리뷰 P2-16), at the body's size. A record drawn from the canon alone says which first. */
#asset-drawer .asset-head{margin:0 0 var(--ds-space-4);padding:var(--ds-space-1) var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface-2)}
#asset-drawer .asset-head .kv{font-size:var(--ds-fs-md)}
#asset-drawer .asset-head .kv:last-child{border-bottom:0}
#asset-drawer .asset-head .banner{margin:var(--ds-space-2) 0}
/* A line said under a table of the page stands clear of it: the note's own pull-up (-6px, for a line under a
   paragraph) drew it over the table's last rule on a refused person page. */
#entity-root .table-wrap+.inventory-note{margin-top:var(--ds-space-2)}
/* The asset list's line: what it leaves out is help behind a mark (the shared tooltip, app.js data-tooltip). */
/* The ? beside the count and beside 필터 (the shell's .help-trigger): clear of the word it follows. */
.inv-help{margin-left:var(--ds-space-2);flex:0 0 auto}
/* A filter fold's ? (inventory.js foldHelp) is the fold's neighbour, not in its <summary> (a control in a control):
   it is laid over the head's line before the arrow, on the head's baseline, and the head keeps that room free. */
.inv-fold-help{display:grid}
.inv-fold-help>*{grid-area:1/1;align-self:baseline;min-width:0}
.inv-fold-help>.inv-help{z-index:1;justify-self:end;margin:0 calc(var(--ds-space-3) + var(--ds-space-2)) 0 0}
.inv-fold-help>details>summary::before{content:"";order:1;flex:0 0 calc(20px + var(--ds-space-3))}
.inv-fold-help>details>summary::after{order:2}
/* 본문 14px (제품 리뷰 P2-12, 이 화면들): the list's rows, the drawer's and the entity page's rows and tables are the
   body's size; a column head, a filter's choice, a count and a row's second line are one step under, never 12px. */
.inv-table table,#asset-drawer .kv,#entity-root .kv,#entity-root .table-wrap table,.inv-table .inv-name strong{font-size:var(--ds-fs-md)}
.inv-table th,.inv-facets label,.inv-toolbar .inv-count,.inv-table+.table-footer,.inv-table .table-footer,#asset-drawer .drawer-sub,#asset-drawer .kv small,#entity-root .kv small,#inventory-root .inventory-note,#asset-drawer .inventory-note,#entity-root .inventory-note{font-size:var(--ds-fs-sm)}
/* The summary reads from the left (사용자 리뷰 10-06): a state's reasons are lines of words, and at a row's far edge
   (the shared .kv) they stood ragged a page-width from their name. Each reason is one line under the state's mark. */
#entity-root [data-entity-reasons] small{color:var(--ds-text-2)}
/* A device or agent named inside a reason's line is a word of it: no button's room around it (it broke the line
   into pieces at 390). */
#entity-root [data-entity-reasons] .link-button{min-height:0;padding:0;font:inherit;font-weight:600;vertical-align:baseline}
/* On a phone 오늘's four figures stand two by two: one per row made four screens-tall cards of one number each. */
@media(max-width:600px){#entity-root [data-entity-person]>.ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* AI 자산 › 개요 (inventory-overview.js, .ao-*): the first line is the one large thing; the reach of the collection is a
   small line under it; the Gateway bar, what to look at, the kinds and the departments are plain blocks. A figure
   is a link-button in the line's own size. Colours are the colour table's (GOAL-next-wave-screen). */
.ao-page{display:grid;gap:var(--ds-space-5)}
.ao-page>*{margin:0;min-width:0}
.ao-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ds-space-1) var(--ds-space-3);align-items:start}
.ao-top>.help-trigger{grid-column:2;grid-row:1}
.ao-first{grid-column:1;margin:0;font-size:var(--ds-fs-2xl);font-weight:700;line-height:1.35;color:var(--ds-text)}
.ao-coverage{grid-column:1;margin:0;font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.ao-page .ao-figure{min-height:0;padding:0;font:inherit;font-weight:700;vertical-align:baseline}
.ao-first .ao-figure[data-ao-figure="not_connected"]{color:var(--ds-danger-text)}
.ao-install{grid-column:1/-1;display:grid;gap:var(--ds-space-3);justify-items:start}
.ao-block{display:grid;gap:var(--ds-space-2)}
.ao-block>h3{margin:0;font-size:var(--ds-fs-md)}
.ao-bar{display:flex;height:12px;border-radius:var(--ds-radius-xs);overflow:hidden;background:var(--ds-surface-3)}
.ao-seg{min-width:3px}
.ao-seg[data-tone="ok"],.ao-dot[data-tone="ok"]{background:var(--ds-ok)}
.ao-seg[data-tone="caution"],.ao-dot[data-tone="caution"]{background:var(--ds-caution)}
.ao-seg[data-tone="danger"],.ao-dot[data-tone="danger"]{background:var(--ds-danger)}
.ao-seg[data-tone="neutral"],.ao-dot[data-tone="neutral"]{background:var(--ds-text-3)}
.ao-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:var(--ds-space-2)}
.ao-table{width:100%;border-collapse:collapse}
.ao-table :is(th,td){padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line);text-align:left;font-weight:400;vertical-align:top}
.ao-table thead th{font-size:var(--ds-fs-xs);color:var(--ds-text-2);font-weight:600}
.ao-table td:nth-child(2){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 연동 사유, the connection table's last cell, wraps: the shared last-cell nowrap ran it past a 390 screen (10-09 after),
   and the overview's tables of two and three columns take the width they have, not the shared 760px (402px past 390). */
.table-wrap .ao-table td:nth-child(3){white-space:normal}
.table-wrap .ao-table{min-width:0}
.ao-reasons,.ao-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--ds-space-1)}
.ao-list>li{display:flex;justify-content:space-between;gap:var(--ds-space-3);padding:var(--ds-space-2) 0;border-bottom:1px solid var(--ds-line)}
.ao-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-5)}
/* 개요 (8.2, 10-16): the first row's right side is the one 기준 시각; four cards in two columns, left 2/3 and right 1/3 (one
   column under 900px, as the frame breaks); a figure is body-coloured and underlined only on hover or focus. */
.ao-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--ds-space-3)}
.ao-asof{color:var(--ds-text-3);font-size:var(--ds-fs-xs)}
.ao-cards{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--ds-space-5);align-items:start}
@media(max-width:899.98px){.ao-cards{grid-template-columns:minmax(0,1fr)}}
.ao-card{align-content:start;min-width:0;padding:24px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface)}
.ao-card>h3{font-size:var(--ds-fs-md);font-weight:700}
.ao-rate{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ds-space-1) var(--ds-space-3)}
.ao-rate-figure{font-size:var(--ds-fs-figure);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.ao-rate-of{margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.ao-denom{border-bottom:1px dotted currentColor;cursor:help}
.ao-bar.ao-bar-big{height:20px;border-radius:999px}
.ao-apart{margin:0;color:var(--ds-text-3);font-size:var(--ds-fs-xs)}
.ao-rows{margin:0;padding:0;list-style:none;display:grid;gap:var(--ds-space-1)}
.ao-rows>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,40%) 64px;align-items:center;gap:var(--ds-space-3);padding:6px 0}
.ao-row-name{min-width:0;overflow-wrap:anywhere}
.ao-meter{display:block;height:6px;border-radius:999px;background:var(--ds-surface-3);overflow:hidden}
.ao-meter>i{display:block;height:100%;background:var(--ds-info)}
.ao-row-figure,.ao-check-figure{text-align:right;font-variant-numeric:tabular-nums}
.ao-page .ao-figure{color:var(--ds-text);font-weight:600;text-decoration:none}
.ao-page .ao-figure:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ds-accent) 8%,transparent);text-decoration:underline}
.ao-more{margin:0}
.ao-more .link-button{color:var(--ds-text-2);text-decoration:none}
.ao-more .link-button:is(:hover,:focus-visible){text-decoration:underline}
@media(max-width:760px){.ao-two{grid-template-columns:minmax(0,1fr)}.ao-first{font-size:var(--ds-fs-xl)}}

/* AI 자산 › 에이전트 · 도구 · 모델 (inventory-tabs.js, .at-*): the first line says how many under which condition;
   the filters are one wrapping row; the table is the shared one. A cell's state word carries its tone as a dot of
   the colour table, never as the only sign (the word says it). A head is a press that sorts (.at-sort), drawn as the
   head it was. On a phone the filters stack and a row stands as a block, each cell under its column's head
   (data-label), inside the screen instead of a table gone on sideways; the heads stay above as the sort's presses. */
.at-page{display:grid;gap:var(--ds-space-4)}
.at-page>*{margin:0;min-width:0}
.at-filters{display:flex;flex-wrap:wrap;gap:var(--ds-space-2) var(--ds-space-4);align-items:center}
.at-filter{display:flex;gap:6px;align-items:center;margin:0;white-space:nowrap;font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.at-filter select{margin:0;max-width:11rem}
.at-toggle input,.at-columns-list input{margin:0}
/* 추가 조건 (UX-005): its press after the filters an agent is judged by, the chips of the conditions it holds while
   folded, and opened, its filters as a line of their own under the row, wrapping in reading order. */
.at-applied{display:inline-flex;flex-wrap:wrap;gap:var(--ds-space-2);min-width:0}
.at-extra{display:flex;flex-wrap:wrap;flex-basis:100%;gap:var(--ds-space-2) var(--ds-space-4);align-items:center;min-width:0;padding-left:var(--ds-space-3);border-left:2px solid var(--ds-line-strong)}
.at-extra[hidden]{display:none}
.at-columns{position:relative;margin-left:auto;font-size:var(--ds-fs-sm)}
.at-columns>summary{cursor:pointer;color:var(--ds-text-2)}
.at-columns-list{position:absolute;right:0;z-index:5;display:grid;gap:var(--ds-space-2);margin-top:var(--ds-space-1);padding:var(--ds-space-3);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-s);background:var(--ds-surface);white-space:nowrap}
.at-columns-list label{display:flex;gap:6px;align-items:center;margin:0}
.at-table .link-button{min-height:0;padding:0;font:inherit;text-align:left}
.table-wrap .at-table td:last-child{white-space:normal}
.at-table td[data-at-cell="people"],.at-table td[data-at-cell="agents"]{white-space:nowrap}
.at-table td[data-at-cell="managed"] .lx-bdg-st{white-space:nowrap}
.at-none,.at-note{color:var(--ds-text-2)}
.at-table th .at-sort{display:inline-flex;gap:4px;align-items:center;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
.at-table th .at-sort:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);text-decoration:underline;text-underline-offset:3px}
.at-sort-mark{color:var(--ds-text)}
.at-sort-mark:empty{display:none}
.at-empty{display:grid;gap:var(--ds-space-3);justify-items:start}
.at-empty>.ui-frame{justify-self:stretch}
@media(max-width:760px){
  .at-columns{margin-left:0}
  .at-columns-list{right:auto;left:0}
  .at-filter select{max-width:9rem}
}
@media(max-width:600px){
  /* 제품별로 묶어 보기's three columns fit as a table; the rows' table stands as blocks. */
  .table-wrap table.at-table{min-width:0}
  .at-page .table-wrap:has(>.at-table:not([data-at-table="groups"])){overflow:visible;-webkit-mask-image:none;mask-image:none}
  .at-table:not([data-at-table="groups"]),.at-table:not([data-at-table="groups"])>:is(thead,tbody),.at-table:not([data-at-table="groups"]) tr{display:block;width:100%}
  .at-table:not([data-at-table="groups"])>thead>tr{display:flex;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-4);padding:var(--ds-space-2) 0;border-bottom:1px solid var(--ds-line-strong)}
  .table-wrap .at-table:not([data-at-table="groups"])>thead th{display:block;padding:0;border:0;background:transparent}
  .table-wrap .at-table:not([data-at-table="groups"])>thead th:not([aria-sort]){display:none}
  .at-table:not([data-at-table="groups"])>tbody>tr{padding:var(--ds-space-2) 0;border-bottom:1px solid var(--ds-line)}
  .table-wrap .at-table:not([data-at-table="groups"]) td{display:block;max-width:none;padding:2px 0;border:0;white-space:normal}
  .at-table td[data-label]:not([data-at-cell="name"])::before{content:attr(data-label) " ";color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
  .at-table td[data-at-cell="name"]{font-weight:600}
}

/* 대상 페이지의 연결 관계와 조치 (entity-relations.js, .er-*): the chain is one row of steps with an arrow between
   them; a step holds its first few names and "외 n", so a wide chain stays one row and wraps by step on a narrow
   screen (never a sideways scroll). The asset's own step is marked. Under it the facts at a glance and the presses,
   one of them emphasised. */
.er-part{display:grid;gap:var(--ds-space-3);padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface-2)}
.er-step-name{font-size:var(--ds-fs-xs);font-weight:600;color:var(--ds-text-2)}
.er-none{color:var(--ds-text-2)}

/* 개요의 기존 목록과 대조 (.ao-compare-*): the file's pick, then who and what was found that the list does not name. */
.ao-compare-pick{display:flex;flex-wrap:wrap;gap:var(--ds-space-2) var(--ds-space-3);align-items:center}
.ao-compare-file{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center;margin:0;font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.ao-compare-file input{margin:0;max-width:100%}
.ao-compare-name{font-size:var(--ds-fs-sm);overflow-wrap:anywhere}
.ao-compare-result{display:grid;gap:var(--ds-space-3)}
.ao-compare-result>*{margin:0}
.ao-compare-side{display:grid;gap:var(--ds-space-2)}
.ao-compare-side>p{margin:0}
.ao-compare-figure{color:var(--ds-danger-text)}
.ao-compare-names{display:flex;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-4);margin:0;padding:0;list-style:none;font-size:var(--ds-fs-sm)}
.ao-compare-names .link-button{min-height:0;padding:0;font:inherit}
.ao-compare-rest{color:var(--ds-text-2)}
.ao-compare-problem{color:var(--ds-danger-text)}
.ao-shared-first{grid-column:1;min-width:0}
.ao-shared-first>.ds-sub-line{margin-bottom:0}

.ao-why>summary{cursor:pointer;color:var(--ds-text-2)}
.ao-why[open]>summary{margin-bottom:var(--ds-space-1)}