/* Router · Click · 보고 · 설정 (t-ades-screens-operations): this track's own screens. Reads the --ds-* tokens of style.css and writes only its own
   prefixes; the shared components (button, select, .tag, .kv, .table-wrap ...) are not redrawn here. */

/* Places that used to be written on the element itself. A value the data gives (a unit's depth, a role
   table's column count, a kind's colour) stays on the element as a custom property and is read here. */
[data-rc-loading]{grid-column:1 / -1}
[data-click-incident],[data-click-excluded]{min-height:0;margin-top:var(--ds-space-3)}
/* An incident and a kept target are cards of their own (.table-card draws none): what they say keeps the room the
   approval card on 승인 대기 keeps from its edge (.ds-card-head, .iap-cards), so no title or button sits on the line. */
article[data-click-incident],article[data-click-excluded]{padding:var(--ds-space-4) 20px}
article:is([data-click-incident],[data-click-excluded])>:first-child{margin-top:0}
article:is([data-click-incident],[data-click-excluded])>:last-child{margin-bottom:0}
/* A kept target's rule is a sentence, not a state word: on a phone it wraps inside its card instead of being cut at the card's edge. */
[data-click-excluded] .tag{white-space:normal}
/* The record ids fold of a request and of a kept target stands at the text's edge and a line's room from what follows:
   it sat on the buttons under it, and in a kept target 11px under its own line with the next note drawn 6px into it. */
:is([data-click-approval],article[data-click-excluded])>[data-click-ids]{position:relative;left:calc(-1 * var(--ds-space-1))}
[data-click-approval]>[data-click-ids]+.button-row{margin-top:var(--ds-space-2)}
article[data-click-excluded]>.inventory-note:has(+[data-click-ids]){margin-bottom:var(--ds-space-1)}
article[data-click-excluded]>[data-click-ids]+.inventory-note{margin-top:var(--ds-space-2)}
/* 통제 현황: the tool's registration line, a block (its basis folds inside it) that stands as the paragraph it was. */
.lo-tool-line{margin:1em 0}
/* Opened, a line's 세부 근거 ID fold keeps its title on the line's first row, its ids under it (not the line under them). */
:is(.lo-tool-line,.lo-ask-action)>[data-click-ids]>summary{vertical-align:top}
/* Click에게 묻기: an action the Agent took in a turn stands as the section's paragraphs do (.detail-section p). */
.lo-ask-action{margin:4px 0;overflow-wrap:anywhere}
/* A line that carries the Agent's 원문 fold (자율 범위's note, 순찰's error and done lines, 최근 조치's what-it-did) is a
   block, not a <p> -- a browser closes a paragraph at <details>, putting the fold outside its line. It stands as the
   paragraph it was (.detail-section p in a finding), and opened the fold keeps its title on the line's row. */
.lo-said-line [data-click-original]>summary{vertical-align:top}
/* Such a line, or a failed read's frame, said in a button row's status (자율 범위 저장, 순찰 실행) has the row under the
   buttons. Beside them the status was as wide and as tall as its words: the 원문 fold opened put the sentence and the
   fold itself under the buttons, or moved the sentence and the buttons a few px; a frame pushed the buttons down.
   Under 이 변경 되돌리기 it is a block of its own, clear of the button (as a block in an inline span WebKit moved it
   6px when the fold opened, and the note's -6px top margin drew its letters over the button's edge). */
:is([data-page="click-autonomy"],[data-page="click-patrol"]) .toolbar-row>[role="status"]:has(>:is(.lo-said-line,.empty)){flex:1 0 100%;min-width:0}
[data-click-single-result]:has(>.lo-said-line){display:block}
[data-click-single-result]>.lo-said-line{margin:var(--ds-space-1) 0}
/* The owners of a frozen call's devices and assets: their own line under the call's fields. */
[data-click-owners]{display:block;margin-top:var(--ds-space-1);color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
/* An Agent's error is one long token (a key list) — it breaks inside the cell instead of leaving it. */
[data-click-errors],[data-click-handled-error]{overflow-wrap:anywhere;min-width:16ch}
/* The error cell is its row's last: the shared table keeps a last cell on one line (an action column), which let a
   long error run out of the cell. It wraps like any other text. */
.table-wrap td[data-click-errors]{white-space:normal}
/* Click 활동·순찰·통제 (g11-r1). A thing's owner reads as one phrase, never broken inside a word; an id Governance holds no
   name for stays quiet and on one line. */
[data-click-owner]{white-space:nowrap}
/* A frame under the head keeps its distance from what follows it. */
[data-page^="click-"] [data-click-state]{margin-bottom:var(--ds-space-3)}
/* A Click tab's parts stand on the card surface the other menus keep -- a table, the day's digest, a finding's row.
   They stood on the page's grey under a 14px heading, so the whole menu read as another product's (visual review
   V-21). A part's name is the size of a card's heading. */
[data-page^="click-"] :is([id$="-root"],.lo-section)>.table-wrap,[data-page^="click-"] .lo-digest,[data-page^="click-"] [id$="-root"]>details.detail-section{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow)}
[data-page^="click-"] .lo-digest{padding:var(--ds-space-4) 20px}
[data-page^="click-"] [id$="-root"]>h4{margin:var(--ds-space-5) 0 var(--ds-space-2);font-size:var(--ds-fs-lg)}
/* 순찰's digest as its parts, in the Portal's text, not a fixed-width block. */
.lo-digest{display:grid;gap:var(--ds-space-3)}
.lo-digest-basis{margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.lo-digest-basis small{color:var(--ds-text-3)}
.lo-digest ul{margin:var(--ds-space-1) 0 0;padding-left:1.2em;font-size:var(--ds-fs-sm)}
.lo-digest li{margin:2px 0}
.lo-digest li.lo-sub{margin-left:1.2em;list-style:circle;color:var(--ds-text-2)}
.lo-digest-counts{list-style:none;padding-left:0!important;display:flex;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-4)}
.lo-digest-part p{margin:0}
.lo-digest-part [data-click-go],.lo-figures~.inventory-note [data-click-go]{padding:0 2px;min-height:24px;text-decoration:underline;text-underline-offset:2px}
/* 통제 현황: a scope's limits as label and value, its models folded. */
.lo-limits{display:flex;flex-wrap:wrap;gap:var(--ds-space-2) var(--ds-space-5);margin:var(--ds-space-2) 0}
.lo-limit{display:inline-flex;align-items:baseline;gap:var(--ds-space-1);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.lo-limit b{color:var(--ds-text);font-size:var(--ds-fs-md);font-variant-numeric:tabular-nums}
.lo-models{display:flex;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-2);margin:var(--ds-space-2) 0 0}
.lo-models code{white-space:nowrap}
/* A wide window: the figures are read from across a room. */
@media (min-width:1600px){.lo-figures .ov-metric strong{font-size:calc(var(--ds-fs-2xl) * 1.35)}}
/* 새로고침 stands beside the company, not after a separator. */
[data-page="click-autonomy"] .section-title [data-click-reload]{margin-left:var(--ds-space-2)}
.lo-section{margin:0 0 var(--ds-space-5)}
/* A row is its rule: the name, the sentence under it; a mode is as wide as its words, a number is right-aligned. */
.table-wrap .lo-rules td{vertical-align:middle}
.lo-rules [data-click-name]{display:block;font-weight:600;color:var(--ds-text)}
.lo-rules [data-click-rule]{display:block;margin-top:2px;color:var(--ds-text-2);font-size:var(--ds-fs-xs);white-space:normal}
/* The controls and figures take what they need; the rule takes the rest of the row. */
.table-wrap .lo-rules th:not(:first-child){width:1%;white-space:nowrap}
.table-wrap :is(.lo-rules,.lo-track) :is(th,td).num{text-align:right;font-variant-numeric:tabular-nums}
.lo-rules [data-click-mode]{width:auto;min-width:11.5em;max-width:16em;margin:0}
/* A row changed and not saved yet. */
.table-wrap .lo-rules tr[data-click-changed] td{background:var(--ds-caution-soft)}
.table-wrap .lo-track td.lo-suggest{white-space:normal}
/* The safety rule is a rule of its own, with the count it guards as a figure. */
.lo-safety{padding:var(--ds-space-4);border:1px solid var(--ds-line);border-left:3px solid var(--ds-accent);border-radius:var(--ds-radius-s);background:var(--ds-surface)}
.lo-safety h4{margin:0 0 var(--ds-space-2)}
.lo-bypass{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ds-space-1) var(--ds-space-2);margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.lo-bypass strong{color:var(--ds-text);font-size:var(--ds-fs-lg);font-variant-numeric:tabular-nums}
.lo-pending{margin:0 0 var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.lo-save .toolbar-row{margin-bottom:var(--ds-space-2)}
.lo-save .inventory-note,[data-click-used-means]{margin:var(--ds-space-2) 0 var(--ds-space-1)}
.lo-save [data-click-go]{display:inline;min-height:24px;padding:0 2px;text-decoration:underline;text-underline-offset:2px}
/* A phone: one action a card -- its rule, then mode, cap and today's use side by side, no sideways scroll; 저장 stays in reach. */
@media (max-width:640px){
  .lo-rules,.lo-rules tbody,.lo-rules tr,.lo-rules td{display:block}
  .table-wrap table.lo-rules{min-width:0}
  .lo-rules thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap .lo-rules tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ds-space-2) var(--ds-space-3);align-items:end;padding:var(--ds-space-3) 0;border-bottom:1px solid var(--ds-line)}
  /* The head is said, not drawn: its row is no grid of cards (its words stood past 0px cells, narrow390 b135 RENDER:click-autonomy:no-overflow). */
  .table-wrap .lo-rules thead tr{display:block;padding:0;border:0}
  .table-wrap .lo-rules td{padding:0;border:0;white-space:normal}
  .lo-rules td:first-child{grid-column:1 / -1}
  .lo-rules td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--ds-text-2);font-size:var(--ds-fs-xs);text-align:left}
  .lo-rules [data-click-mode]{min-width:0;width:100%}
  .lo-save{display:contents}
  .lo-savebar{position:sticky;bottom:0;z-index:1;padding:var(--ds-space-2) 0;border-top:1px solid var(--ds-line);background:var(--ds-bg)}
  .lo-savebar .toolbar-row{margin:0}
}
.so-next{margin-top:var(--ds-space-5)}
#click-control-root .period-control{display:inline-flex}
[data-mb-unit]{padding-left:calc(var(--mb-depth,0) * 18px)}
.map-legend-kind i{background:var(--org-kind)}
.so-map{width:100%;max-width:720px;min-height:240px;max-height:420px}
[data-map-asset-ref]{cursor:pointer}
/* An inner tab is at least a 24px target however short its label (단말, 직원, 부서). */
:is(#devices-root,#members-root) .tab{min-width:24px;padding-inline:var(--ds-space-1)}
/* 계정·역할 and 설치·기기 등록 (members, devices): the inner tabs are a step below the hub's tabs -- a quiet row of
   pills, not a second underline -- with 새로고침 at the row's end; the page's own header, emptied of its one
   button, takes no band. The row and its place stay while the screen reads. A phone's member card names its
   role and state. */
:is([data-page="members"],[data-page="devices"])>.content-header:not(:has(button)){display:none}
.so-tools{flex:0 0 auto}
.so-tools button{width:auto;min-height:32px;padding:4px 12px;font-size:var(--ds-fs-sm)}
/* A state's count opens the accounts it counts (pressed: those only, 전체 보기 beside the list). */
.mb-counts [data-mb-count],[data-mb-showing] .link-button{width:auto;min-height:0;padding:0;font-size:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){
  
  .so-bar .ui-tabs [role="tab"],.so-tools button{padding-inline:var(--ds-space-2)}
  
}
/* 멤버·단말 lists read at the size every table reads: a row 13px, its head and the line under a name 12px (the
   lists were a step under the tables beside them). The wall sizes below still outrank these. */
:where(.mc-row):is(.mb-row,.dv-row,.dv-token){font-size:var(--ds-fs-sm)}

/* The type floor on this track's pages: a small heading is 13px (the browser's own h5/h6 is .83em, under
   12px), the section heading of 조직 is the scale's 16px, and a fold's summary is a 24px target. */
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) :is(h5,h6){font-size:var(--ds-fs-sm)}
#org-overview h3{font-size:var(--ds-fs-lg)}
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) details>summary{min-height:24px;line-height:24px}

/* A row of conditions and its button, on this track's pages: one line that wraps, each label above its
   field, the button on the fields' baseline (the shared .toolbar-form, for rows written as .toolbar-row). */
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) .toolbar-row{display:flex;flex-wrap:wrap;gap:var(--ds-space-2) var(--ds-space-3);align-items:end;margin:0 0 var(--ds-space-3)}
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) .toolbar-row>label{display:grid;gap:var(--ds-space-1);margin:0;font-size:var(--ds-fs-xs);color:var(--ds-text-2)}
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) .toolbar-row>label :is(select,input:not([type="checkbox"]):not([type="radio"])){margin:0;min-width:160px}
/* Router › 검증 on a phone: the analysis's own row is the two columns insights.css lays out (회사 beside 시간대, the
   period under them). The rules above outweighed it, so each took a row and one figure reached the first screen. */
@media(max-width:600px){
  [data-page="router-verify"] .insights-toolbar.toolbar-row{display:grid}
  [data-page="router-verify"] .insights-toolbar.toolbar-row>label :is(select,input:not([type="checkbox"]):not([type="radio"])){min-width:0}
}
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) .toolbar-row>label:has(>input:is([type="checkbox"],[type="radio"])){display:flex;align-items:center;gap:var(--ds-space-2);font-size:var(--ds-fs-sm);color:var(--ds-text)}
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) .toolbar-row[hidden]{display:none}

/* The shared note is pulled 6px up to sit under a heading; after a card it would cut into the card's edge
   (조직's scope count under the summary, 보고서's note under the report panel). */
:is([data-page="router-diagnosis"],[data-page="router"],[data-page="router-verify"],[data-page="router-choices"],[data-page="click-activity"],[data-page="click-patrol"],[data-page="click-autonomy"],[data-page="click-control"],[data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="snapshots"],[data-page="coverage"],[data-page="members"],[data-page="organization"],[data-page="devices"],[data-page="data-connections"],[data-page="audit-log"]) :is(.uc-panel,.su-panel,article)+.inventory-note,#org-list>.inventory-note:first-child{margin-top:var(--ds-space-3)}

/* Router: a read that failed is an alert band in its place, with its reason and 다시 시도 inside -- not a line that
   reads like the description above it. A role's refusal is a quiet band. */
:is(p[data-rd="failed"],p[data-rch="failed"],p[data-rc-ledger="failed"],p[data-rc-runs="failed"],p[data-rpc="failed"]){width:fit-content;max-width:100%;margin:0 0 var(--ds-space-3);padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-danger);border-radius:var(--ds-radius-s);background:var(--ds-danger-soft);color:var(--ds-text);font-size:var(--ds-fs-sm)}
:is(p[data-rd="failed"],p[data-rch="failed"])[data-refused]{border-style:dashed;border-color:var(--ds-line-strong);background:transparent}
:is(p[data-rd="failed"],p[data-rch="failed"],p[data-rc-ledger="failed"],p[data-rc-runs="failed"]) button{margin-left:var(--ds-space-2)}
/* 단말 (devices): the shared figure tiles, a 0 said quietly; the reading guide folded; a row's detail one click away. */
[data-dv-summary]{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 var(--ds-space-4)}
[data-dv-summary] .ov-metric{padding:var(--ds-space-3) var(--ds-space-4)}
[data-dv-summary] .ov-metric strong{font-size:var(--ds-fs-2xl)}
/* A figure's unit beside its number (대), a step under it (Entities ctx_1eb31679574d). */
[data-dv-summary] .ov-metric strong .ov-unit{margin-left:3px;font-size:var(--ds-fs-lg);font-weight:600;font-style:normal;color:var(--ds-text-2)}
[data-dv-summary] .ov-metric[data-zero] strong{color:var(--ds-text-3)}
/* 단말 목록: a figure is a button that narrows the list; the bar over the table finds, orders and says how many of
   how many are shown, with 목록 맞추기 at its end. */
[data-dv-summary] button.ov-metric{cursor:pointer;font:inherit;text-align:left}
.dv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3);margin:0 0 var(--ds-space-2)}
.dv-find{flex:0 1 280px;margin:0}
.dv-find input{width:100%;min-height:36px}
.dv-order{display:flex;flex-direction:row;align-items:center;gap:var(--ds-space-2);margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.dv-order select{width:auto;min-height:36px}
/* A column's head that sorts the list (devices.js button.dv-sort, aria-sort on its cell): the head's own words, pressed. */
.dv-sort-mark{color:var(--ds-text)}
.dv-bar .dv-range{margin:0}
.dv-bar>[data-dv-reconcile]{margin-left:auto}
/* 등록 토큰: how many can be used now leads, each part of the line whole; the tokens that ended are a closed record
   under the ones that can still enroll a device. */
.dv-state{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px var(--ds-space-2);vertical-align:top}
/* A row's actions are quiet beside its state: one mark at the row's end opens them as a small list beside the
   mark, to its left (two buttons on every row hid the states; opened under the mark the list lay over the next
   row's mark, and a press on that mark was a press on this row's 폐기 -- rfqa c3.62). 폐기 is the last of them and turns red only under the
   pointer; the red button is the confirm window's last one. */
.dv-acts{position:relative}
.dv-acts>summary{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);color:var(--ds-text-2);font-size:var(--ds-fs-md);font-weight:700;line-height:1;cursor:pointer;list-style:none}
.dv-acts>summary::-webkit-details-marker{display:none}
.dv-acts>summary:hover,.dv-acts[open]>summary{border-color:var(--ds-line-strong);background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.dv-acts-list{position:absolute;top:0;right:calc(100% + var(--ds-space-1));z-index:5;display:grid;gap:var(--ds-space-1);padding:var(--ds-space-2);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:var(--ds-shadow-pop);white-space:nowrap}
.dv-acts-list button{width:100%;margin:0;text-align:left}
/* The confirm window: the device as the list names it with its whole id under it, the reason marked required, and
   the buttons apart from the fields. */
[data-dv-confirm-device] small{display:block;margin-top:2px;color:var(--ds-text-2)}
[data-dv-confirm-device] .dv-whole{user-select:all;overflow-wrap:anywhere}
/* No device yet: the ways forward sit in the frame; the list's own button above it keeps its distance. */
.dv-empty-tools{margin-bottom:var(--ds-space-3)}
[data-dv-list="empty"] .ui-frame .button-row{margin-top:var(--ds-space-2)}
/* A list not read has one way to read again: the frame's own. */
#devices-root:has([data-dv-list="failed"] button[data-testid-key="devices"]) #dv-refresh{display:none}
/* While the list reads: the five figures at their size, the find row's place, what is read in words, then rows
   at a device row's height. */
.dv-wait-bar{display:flex;gap:var(--ds-space-3);margin:0 0 var(--ds-space-3)}
.dv-wait-bar span{height:36px;border-radius:var(--ds-radius-s);background:var(--ds-surface-2)}
.dv-wait-bar span:first-child{flex:0 1 320px}.dv-wait-bar span:last-child{flex:0 0 180px}
/* A narrow screen: a row is a card whose lines say what they are; the figures are one compact row so the first
   device is on the first screen. */
@media(max-width:900px){
  .dv-row [data-dv-label]:not([data-dv-label="단말"]){display:grid;grid-template-columns:5.5em minmax(0,1fr);column-gap:var(--ds-space-2)}
  .dv-row [data-dv-label]:not([data-dv-label="단말"])::before{content:attr(data-dv-label);color:var(--ds-text-2);font-size:var(--ds-fs-xs);line-height:20px}
  .dv-row [data-dv-label]:not([data-dv-label="단말"])>*{grid-column:2}
  .dv-row [data-dv-label]>.tag{justify-self:start}
  
  .dv-acts-list{top:calc(100% + var(--ds-space-1));right:auto;left:0}
}
@media(max-width:760px){
  [data-dv-summary]{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--ds-space-1)}
  [data-dv-summary] .ov-metric{min-width:0;padding:var(--ds-space-2) var(--ds-space-1);align-items:center;text-align:center}
  [data-dv-summary] .ov-metric span{font-size:var(--ds-fs-xs);white-space:nowrap}
  [data-dv-summary] .ov-metric strong{font-size:var(--ds-fs-lg)}
  [data-dv-summary] .ov-metric small{display:none}
  .dv-find{flex:1 1 100%}
  .dv-bar>[data-dv-reconcile]{margin-left:0}
}
/* A booth screen reads the list from a distance, by the size rule the other lists keep there (현황's lists, 검색,
   도구): the row a step up to the product's wall size, its marks and its head one under it (as a table's there), and the
   figures the wall figure. (The row was two steps over them: arriving from 현황 the screen read as zoomed in.) */
@media(min-width:1800px){
  
  
  
  
  /* 등록 토큰's list by the same sizes as 단말's beside it (it stood at 12px on the wall). */
  
  
  
  [data-dv-summary] .ov-metric span{font-size:var(--ds-fs-md)}
  [data-dv-summary] .ov-metric strong{font-size:var(--ds-fs-figure)}
  [data-dv-summary] .ov-metric small,.dv-order,.dv-bar .dv-range,.dv-guide summary,.dv-more summary{font-size:var(--ds-fs-sm)}
}
/* 보고서 만들기 brought into view by a press elsewhere (UX-015): its heading stands clear of the page's sticky head. */
#proof-report-panel{scroll-margin-top:96px}
/* The frozen reports: a table whose actions sit on one line; a time never breaks inside itself, a typed title wraps. */
.rp-count{margin:0 0 var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
/* A wall screen read from a distance: the report's name a step larger (its times keep the row's size: screens-reports.css).
   The count line a step larger too but still the quiet line over the table, under the card's heading and the report's
   name (at their 16px and dark it read as a second heading). */
@media(min-width:1800px){
  
  .rp-count{font-size:var(--ds-fs-md)}
}
/* 조직·명부: the register in figures, the scopes as a table in a card, the status line quiet. */
#org-status{font-size:var(--ds-fs-sm);color:var(--ds-text-2);margin:0 0 var(--ds-space-3)}
.org-summary{margin:0 0 var(--ds-space-4);padding:0 0 var(--ds-space-4)}
.org-summary>:not(.ds-card-head){margin-left:20px;margin-right:20px}
/* The figures use the card's whole width at any size (five or six tiles never leave a third of it empty). */
.org-figures{margin-top:var(--ds-space-2);grid-template-columns:repeat(auto-fit,minmax(156px,1fr))}
.org-figures .ov-metric[data-zero] strong{color:var(--ds-text-3)}
/* A number and the mark for not known stand in the same box, so the line under each tile's figure is on one level;
   the unit is small beside the number. */
.org-figures .ov-metric strong{display:block;height:32px;line-height:32px;font-size:var(--ds-fs-2xl);white-space:nowrap}
.org-unit{margin-left:2px;font-style:normal;font-family:var(--ds-font);font-size:var(--ds-fs-sm);font-weight:500;letter-spacing:0;color:var(--ds-text-2)}
/* The sentence under a figure breaks between words and in lines of like length, never one word alone on the last. */
.org-figures .ov-metric small{word-break:keep-all;text-wrap:balance}
/* A value not known: one shape on this screen -- an amber dash and quiet words, in a tile as in a cell. */
.org-unknown{color:var(--ds-text-3);font-size:var(--ds-fs-sm);font-weight:400;white-space:nowrap}
.org-unknown i{font-style:normal;color:var(--ds-unknown-text)}
.org-figures .ov-metric strong .org-unknown{font-size:var(--ds-fs-md);line-height:32px;vertical-align:top}
/* Under the tiles: the reading rule a line below them, then the fold with its own marker (the same in every
   browser) and nothing left over under it. */
.org-summary{min-height:0}
.org-summary .org-reading{margin-top:var(--ds-space-3);margin-bottom:0}
.org-summary .org-reading:empty{display:none}
.org-summary details{margin-top:var(--ds-space-3)}
.org-summary details>summary{min-height:24px;line-height:24px;cursor:pointer;list-style:none;color:var(--ds-accent-text);font-size:var(--ds-fs-sm);font-weight:600}
.org-summary details>summary::-webkit-details-marker{display:none}
.org-summary details>summary::before{content:"▸";display:inline-block;width:1.2em}
.org-summary details[open]>summary::before{content:"▾"}
/* The line reads on from the screen's lead above it (one block of two lines) at any width. */
#org-status:not([data-org-status="failed"],[data-org-status="missing"],[data-org-status="refused"]){margin-top:calc(-1*var(--ds-space-3))}
/* 새로고침 and 관리 범위 등록 stand on the status line's row, not in a band of their own above it. */
@media(min-width:761px){
  [data-page="organization"]>.content-header{float:right;margin:0 0 var(--ds-space-2) var(--ds-space-4)}
  #org-overview{clear:both}
  /* The frame of a register not read starts on the buttons' row (the status line above it is not drawn). */
  #org-overview:has(>[data-org-failed]){clear:none}
}
/* The status line when something was not read: a read that failed is an alert band, a refusal a quiet one.
   When the register itself was not read the shared frame below says it, and the line is kept for a screen reader. */
#org-status:is([data-org-status="failed"],[data-org-status="missing"]){width:fit-content;max-width:100%;padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-danger);border-radius:var(--ds-radius-s);background:var(--ds-danger-soft);color:var(--ds-text)}
#org-status[data-org-status="refused"]{width:fit-content;max-width:100%;padding:var(--ds-space-2) var(--ds-space-3);border:1px dashed var(--ds-line-strong);border-radius:var(--ds-radius-s);color:var(--ds-text)}
#org-status:has(+#org-overview>[data-org-failed]){position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* While the first read is out: the two cards that are coming, their heads said, the figures six to the row they will
   stand in and the register's rows inside its card. */
[data-org-loading]{margin:0 0 var(--ds-space-4)}
/* A second fact under a figure takes a line of its own (never a line that starts with its separator). */
.org-figures .ov-metric small .org-then{display:block;font:inherit;color:inherit}
/* The register not read: its frame's 다시 시도 is the one way to read again; the page's 새로고침 steps aside. */
[data-page="organization"]:has(>#org-overview>[data-org-failed])>.content-header #org-refresh{display:none}
.org-summary .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(156px,1fr));margin-top:var(--ds-space-2)}
/* The waiting tile is as tall as a tile with its one line under the figure (96px left the list 26px higher than
   it lands). */
.org-summary .ui-skeleton-tile{height:122px}
.org-scopes-wait{padding:var(--ds-space-3) 20px var(--ds-space-4)}
/* A phone: the figures two to a row, and the page's two buttons share one row instead of stacking full width. */
@media(max-width:760px){
  .org-figures,.org-summary .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The two lines of explanation read together, then the buttons, then the register. */
  [data-page="organization"]:not([hidden]){display:flex;flex-direction:column}
  [data-page="organization"]>#org-status{order:-1}
  /* The header's own sentence is not shown (the lead says it); its empty place leaves no band above the buttons. */
  [data-page="organization"]>.content-header>div:first-child{display:none}
  [data-page="organization"]>.content-header .toolbar{display:flex;flex-direction:row;gap:var(--ds-space-2)}
  [data-page="organization"]>.content-header .toolbar button{flex:1 1 0;width:auto}
}
.org-team-none{font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
.org-scopes :is(td,th).num{text-align:right;font-variant-numeric:tabular-nums}
.org-scopes-more,.org-scopes-empty{padding:var(--ds-space-3) 20px}
/* 조직 관리 on a wall screen: the summary's figures, their names and the lines under them by the sizes 단말's summary
   keeps there (they stood a step under it), and the list's marks by the size the other lists' marks keep. */
@media(min-width:1800px){
  .org-figures .ov-metric>span{font-size:var(--ds-fs-md)}
  .org-figures .ov-metric strong{height:44px;line-height:44px;font-size:var(--ds-fs-figure)}
  .org-figures .ov-metric strong .org-unknown{line-height:44px}
  .org-figures .ov-metric strong .org-unit{font-size:var(--ds-fs-md)}
  .org-figures .ov-metric small{font-size:var(--ds-fs-sm)}
  .org-scopes .tag{font-size:var(--ds-fs-sm)}
  .org-summary .ui-skeleton-tile{height:138px}
}
/* 관리 범위 등록: the thirteen values stand two to a row in the order they are written (ID with name, source with its
   reference, unit with count, org with team, support with access, cadence with state), so 저장 is on the dialog
   without scrolling it; 변경 사유 and 저장 keep the whole row. One column on a phone. */
#org-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-4);align-items:end;margin-top:var(--ds-space-4)}
#org-form>label{margin:0}
#org-form>label:has([name="reason"]),#org-form>button{grid-column:1/-1}
#org-form>button{justify-self:start}
@media(max-width:640px){#org-form{grid-template-columns:minmax(0,1fr)}}
/* 데이터 연결: a panel is as tall as what it says. */
.uc-panel[data-testid^="feed-health-"]{min-height:0}
/* A quarantined batch's or record's row: a long source or request id breaks inside its column rather than pushing the
   batch's chip out of the card, and on a phone the chip stands under the row's words (at 390 a 29-letter source id
   pushed the page 80px sideways). */
.uc-panel[data-testid^="feed-health-"] .row{grid-template-columns:minmax(0,1fr) auto}
.uc-panel[data-testid^="feed-health-"] .row b{overflow-wrap:anywhere}
@media(max-width:760px){
  .uc-panel[data-testid^="feed-health-"] .row{grid-template-columns:minmax(0,1fr);gap:var(--ds-space-1)}
  .uc-panel[data-testid^="feed-health-"] .row>.state{justify-self:start;max-width:100%;overflow-wrap:anywhere}
}
/* 관리 이력: the export card with its action in the head, the records as a table. */
article.al-card,.al-card{margin:0 0 var(--ds-space-4);min-height:0;padding:0}
.al-card .al-body{padding:0 20px var(--ds-space-4)}
/* A record's target id is shown whole (the column has the room); it breaks inside its cell rather than being cut. */
.al-card td code.al-ref{overflow-wrap:anywhere}
.al-card td code{font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.al-card td small{margin-left:var(--ds-space-1);color:var(--ds-text-2)}
.al-card .al-more{padding:var(--ds-space-3) 20px}
/* 관리 이력: how many of how many beside the title, read before the kinds line under it, and the record's one
   action (its signed bundle) at the head's end in every state; the times' zone in the table's head. Who and on
   what: the words first, an id after them on the same line -- a long one drawn by its prefix and end (whole in its
   title and text), never cut by the cell, so it reads the same in every browser. */
.al-card .ds-card-head{align-items:center;min-height:68px}
.al-card .al-count{margin-right:auto;color:var(--ds-text);font-size:var(--ds-fs-md);font-weight:600;font-variant-numeric:tabular-nums}
.al-card .ds-card-head h3:last-child,.al-card .ds-card-head h3:has(+.al-export){margin-right:auto}
.al-card .al-export-note{margin:0 20px var(--ds-space-3)}
.al-card .al-export-note:empty{display:none}
/* Which change a record was, in the state colour it has everywhere; what it changed on its own line under it. A
   sign-in is quiet beside a change. */
.al-card td .al-change{margin-left:var(--ds-space-1)}
.al-card td small.al-detail{display:block;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-table tr[data-mb-kind="access"] td b{color:var(--ds-text-2);font-weight:400}
/* How a record ended reads the same in every row: done in quiet words, anything else in its state colour. */
.al-table .al-done{color:var(--ds-text-2)}
.al-card .al-kinds{margin:calc(-1*var(--ds-space-2)) 20px var(--ds-space-3)}
.al-table th small.al-zone{margin-left:var(--ds-space-1);color:var(--ds-text-3);font-weight:400}
.al-who,.al-what{display:inline-flex;align-items:baseline;gap:var(--ds-space-1);max-width:100%;white-space:nowrap}
.al-who code.al-ref,.al-what code.al-ref{flex:none;white-space:nowrap}
.al-card td .al-who small,.al-card td .al-what small{margin-left:0}
/* A name on what a record was done to is kept whole: an address goes on at its @ to a second line, not cut. */
.al-what .al-name{min-width:0;white-space:normal;overflow-wrap:anywhere}
.al-what small .al-name{font-weight:400}
.al-what .al-at,.mb-row b .al-at{display:inline-block;max-width:100%}
.al-card .al-none{margin:var(--ds-space-2) 0 0}
/* 관리 이력's conditions (기간, 종류, 행위자) over the list, how many of those read meet them under it; a record's
   time opens it whole in a row under it, its fields label beside value. */
.al-card .al-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ds-space-2) var(--ds-space-3);margin:0 20px var(--ds-space-3)}
.al-card .al-filter{display:flex;flex-direction:column;gap:var(--ds-space-1);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.al-card .al-filter select{min-width:140px;max-width:260px}
.al-card .al-met{margin:0 20px var(--ds-space-2)}
/* A record's time is its 자세히 (UX-016): plain text in the table's colour with a fold mark before it, not the filled
   action button on every row; the open record is marked by its row, a thin edge and the mark turned down. Its date
   and its time to the second are two pieces that go to two lines whole where the column is narrow, never cut; the
   figures keep one width so the times line up. */
.al-card td.al-when{white-space:normal}
.al-table button.al-open{position:relative;display:inline-block;max-width:100%;min-height:0;margin:-2px -4px;padding:2px 4px 2px 20px;border:1px solid transparent;border-radius:var(--ds-radius-s);background:transparent;color:var(--ds-text);font:inherit;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4;text-align:left;white-space:normal;cursor:pointer}
.al-table button.al-open::before{content:'';position:absolute;left:7px;top:calc(2px + .7em - 4px);width:6px;height:6px;border:solid var(--ds-text-2);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform var(--ds-dur-fast) var(--ds-ease)}
.al-table button.al-open[aria-expanded="true"]::before{transform:rotate(45deg)}
.al-table button.al-open:hover{filter:none;border-color:var(--ds-line);background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.al-table button.al-open:active{transform:none}
.al-table button.al-open[aria-expanded="true"]{border-color:var(--ds-line-strong,var(--ds-line))}
.al-table button.al-open :is(.al-day,.al-clock){display:inline-block;white-space:nowrap}
.al-table tr.al-row-open>td{background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
.al-table tr.al-open-row td{background:var(--ds-surface-2);white-space:normal;overflow:visible}
.al-table tr.al-open-row code{overflow-wrap:anywhere}
/* The columns keep one width whether rows are read or still coming, so the head does not move when they arrive.
   The time's column holds the longest instant whole (a two-digit month, day and hour) at every width. */
@media(min-width:761px){
  .al-card table.al-table{table-layout:fixed;width:100%}
  .al-table th:nth-child(1){width:200px}.al-table th:nth-child(2){width:20%}.al-table th:nth-child(3){width:7%}.al-table th:nth-child(4){width:24%}
  .al-table td{overflow:hidden;text-overflow:ellipsis}
}
/* A narrower window keeps every value whole: how it ended keeps the room its mark takes, and who and on what take a
   second line for an id rather than cut it. */
@media(min-width:761px) and (max-width:1279px){
  .al-table th:nth-child(3){width:80px}
  .al-who,.al-what{flex-wrap:wrap;white-space:normal}
}
/* A wide window keeps a record on one line: what it changed follows its name and change on the same line (cut at
   the cell's end, whole in its title), so a change reads as tall as a sign-in and the first screen holds more of
   them; the record's column takes the room the time and the names leave, and what a record was done to keeps room
   for a sign-in address on one line. Narrower, it keeps its own line. */
@media(min-width:1280px){
  .al-table th:nth-child(2){width:30%}.al-table th:nth-child(4){width:19%}
  .al-table td[data-label="기록"]{white-space:nowrap}
  .al-card td small.al-detail{display:inline;margin:0 0 0 var(--ds-space-2)}
}
/* While the rows read: what is being read is said, the table's head stands, and each row to come is a short bar in
   each of its columns. */
.al-wait>p{margin:0 20px var(--ds-space-2)}
.al-wait tbody.ui-skeleton{display:table-row-group}
.al-wait tbody.ui-skeleton td{padding-block:var(--ds-space-3)}
.al-wait tbody.ui-skeleton .ui-skeleton-line,.al-wait tbody.ui-skeleton .ui-skeleton-line:first-of-type{height:14px;width:62%}
.al-wait tbody.ui-skeleton td:nth-child(odd) .ui-skeleton-line{width:78%}
.al-wait tbody.ui-skeleton td:nth-child(3) .ui-skeleton-line{width:44px}
.al-card .al-body>[data-mb-audit-list],.al-card .al-body>[data-mb-exports]{margin-top:var(--ds-space-2)}
.al-card .al-body[data-mb-audit-list="loading"]{padding-top:var(--ds-space-2)}
/* A phone: each record is a block of named values -- who and on what are read without a sideways scroll. */
@media(max-width:760px){
  .al-card .table-wrap{overflow:visible}
  .al-card .table-wrap table.al-table,.al-table tbody,.al-table tr,.al-table td{display:block;width:auto;min-width:0;max-width:none}
  .al-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .al-table tr{padding:var(--ds-space-3) 20px;border-top:1px solid var(--ds-line)}
  .al-table td{padding:2px 0;border:0;white-space:normal}
  .al-table td::before{content:attr(data-label);display:inline-block;min-width:3.5em;margin-right:var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
  /* Who and on what take a second line here too: an address's '@domain' stood past its record (narrow390 b135 RENDER:audit-log:no-overflow). */
  .al-who,.al-what{flex-wrap:wrap;white-space:normal}
  /* ... and the record's last value (대상) goes under its label when it is wider than the room beside it: the shared
     .table-wrap td:last-child{white-space:nowrap} kept the label and a cell-wide value on one line, 17-47px past the
     record (ph2, GOV ba8b55c1: 8 of 100 rows at 390 and 360). */
  .al-card .al-table td:last-child{white-space:normal}
  .al-card td.al-when{white-space:normal}
  .al-card td small.al-detail{margin-left:calc(3.5*var(--ds-fs-xs) + var(--ds-space-2));white-space:normal}
  /* While it is read, a record is the same block across the card: its lines one under another as tall as a record's
     values (the table-row group above shrank it to a 50px column of 313px rows, 3,108px for eight). */
  .al-wait tbody.ui-skeleton{display:block}
  .al-wait tbody.ui-skeleton td{padding-block:4px}
  .al-wait tbody.ui-skeleton td::before{content:none}
}
@media(min-width:1800px){
  /* The record by the wall size every list keeps (style.css: rows a step up, head and second line one under). */
  .al-table th:nth-child(1){width:220px}
  .al-table .tag{font-size:var(--ds-fs-sm);font-weight:600}
  .al-card td code,.al-card td small{font-size:var(--ds-fs-sm)}
  /* How many of how many stays a step under the card's title here too (it stood at 20px beside a 16px title). */
  .al-card .al-kinds{font-size:var(--ds-fs-md)}
}
/* 통제 범위: how many areas stand in each state, said before the areas. */
.pc-figures{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:var(--ds-space-3) 0}
.pc-figures .ov-metric{padding:var(--ds-space-3) var(--ds-space-4)}
.pc-figures button.ov-metric{cursor:pointer;font:inherit;text-align:left}
.pc-figures .ov-metric strong{font-size:var(--ds-fs-2xl)}
.pc-figures .ov-metric[data-zero] strong{color:var(--ds-text-3)}
/* An area: what it is, its gaps and its evidence on the left, its verdict and the way to its screen on the right. The
   evidence is named values in columns, each name over its value. */
.pc-area{align-items:flex-start;gap:var(--ds-space-4)}
.pc-area>div:first-child{min-width:0;flex:1 1 auto}
/* An area's lines read at the body size (14px), as the card's own line over them (c3.78 consistency review: 13px). */
.pc-area small{display:block;font-size:var(--ds-fs-md)}
.pc-verdict{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--ds-space-2);flex:0 0 auto}
.pc-evidence{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--ds-space-2) var(--ds-space-4);margin:var(--ds-space-2) 0 0}
.pc-evidence dt{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.pc-evidence dd{margin:0;font-size:var(--ds-fs-sm);font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pc-evidence dd[data-unknown]{color:var(--ds-unknown-text);font-weight:500}
.pc-pair{white-space:nowrap}
.pc-evidence>.pc-wide{grid-column:1 / -1}
/* On a wide screen the verdict stands beside what it judges, not at the far edge. */
@media(min-width:1200px){.pc-area{grid-template-columns:minmax(0,104ch) auto;justify-content:start}}
.tag.pc-out{background:transparent;color:var(--ds-text-2);outline:1px solid var(--ds-line-strong);outline-offset:-1px}
[data-page="coverage"] h5 small{color:var(--ds-text-2);font-weight:500;font-size:var(--ds-fs-sm)}
/* The shared .row is a two-column grid; on a phone an area is one column, its verdict under what it says. */
@media(max-width:760px){.pc-area{grid-template-columns:minmax(0,1fr)}.pc-verdict{justify-content:flex-start}}
@media(min-width:1800px){
  .pc-figures .ov-metric strong{font-size:var(--ds-fs-figure)}
  .pc-figures .ov-metric>span{font-size:var(--ds-fs-lg);font-weight:600}
  .pc-figures .ov-metric small{font-size:var(--ds-fs-sm)}
  .pc-evidence dt{font-size:var(--ds-fs-sm)}
  .pc-area b{font-size:var(--ds-fs-lg)}
  .pc-area small{font-size:var(--ds-fs-md)}
  .pc-area .tag{font-size:var(--ds-fs-sm)}
  .pc-evidence dd{font-size:var(--ds-fs-md)}
  [data-page="coverage"] h5{font-size:var(--ds-fs-md)}
  [data-page="coverage"] h5 small{font-size:var(--ds-fs-sm)}
}
/* 준수 항목: what the verdicts stand on as named values, a framework's states as marks each with its own count, and
   an item's linked Controls a row each -- the name the way to the Control, its counts in number columns. */
.pc-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,max-content));gap:var(--ds-space-2) var(--ds-space-6);margin:0 0 var(--ds-space-3)}
.pc-terms dt{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.pc-terms dd{margin:0;font-size:var(--ds-fs-md);font-weight:600}
.pc-terms dd :is(span,time){white-space:nowrap}
/* 증거 팩 고정: what the button freezes under it as named values; its status speaks beside the button, so the card
   holds no empty line while it says nothing. */
.pc-framework{align-items:center;gap:var(--ds-space-4)}
.pc-framework small{display:block}
.pc-states{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:var(--ds-space-2) var(--ds-space-5)}
.pc-states .pc-lead{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.pc-state{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.pc-state b{font-size:var(--ds-fs-xl);font-variant-numeric:tabular-nums;line-height:1.2}
.pc-state small{display:inline;margin-left:1px;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.pc-state[data-zero] b{color:var(--ds-text-3);font-size:var(--ds-fs-lg);font-weight:500}
.pc-items :is(td,th).num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-items td{max-width:none}
.pc-items td.pc-name{min-width:22ch;max-width:64ch}
.pc-items td:is(.pc-scope,.pc-verdict-cell){white-space:nowrap}
.pc-items tr.pc-group th{background:transparent;color:var(--ds-text);font-size:var(--ds-fs-sm);font-weight:600;padding-top:var(--ds-space-3);text-align:left;white-space:normal}
.pc-items tr.pc-group:hover{background:transparent}
.pc-items .link-button{min-height:24px;padding:0;font-size:inherit;text-align:left;white-space:normal}
.pc-items .tag+.pc-also{display:block;margin-top:var(--ds-space-1);color:var(--ds-unknown-text)}
/* The line under the table stands clear of it (a note's own -6px drew it over the table's last line). */
.pc-items+.inventory-note{margin-top:var(--ds-space-3)}
.pc-n{font-weight:600}
.pc-n[data-zero]{color:var(--ds-text-3);font-weight:400}
.pc-n[data-state="unknown"]{color:var(--ds-unknown-text)}
[data-proof-items="empty"]{display:grid;justify-items:start;gap:var(--ds-space-2);margin:0 0 var(--ds-space-3)}
[data-proof-items="empty"]>.ui-frame{width:100%}
/* On a phone a framework's states go under its name, and an item is a block: its verdict, what is counted for the
   item, then each linked Control with its own counts. */
@media(max-width:760px){
  .pc-framework{grid-template-columns:minmax(0,1fr);align-items:flex-start}
  .pc-states{justify-content:flex-start}
  .pc-items tr{display:flex;flex-direction:column}
  .pc-items tr.pc-group{padding:var(--ds-space-3) 0 0;border:0}
  .pc-items tr.pc-group th{display:block;padding:0}
  .pc-items tr.pc-more{padding-top:0}
  .pc-items tr:has(+tr.pc-more){padding-bottom:var(--ds-space-2);border-bottom:0}
  .pc-items td.num{text-align:left}
  .pc-items td.pc-tail{order:1}
  .pc-items td:not(.pc-tail):not([rowspan]){order:2}
  .pc-items tr:not(.pc-more) td.pc-name{margin-top:var(--ds-space-2)}
  .pc-items td.pc-name{max-width:none}
  .pc-items td:is(.pc-scope,.pc-verdict-cell){white-space:normal}
  
  .pc-terms{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-2) var(--ds-space-4)}
  .pc-terms>div:last-child:nth-child(n+2){grid-column:1 / -1}
  /* 프레임워크 점검's and 통제 범위's heads: a named value a row, its name over it. Two halves put an unbroken instant
     in one (3px past the card at 390) and left 판정 근거 alone beside an empty half. */
  .pc-terms[data-proof-evaluated]{grid-template-columns:minmax(0,1fr)}
  /* A cell is a name | value grid (style.css); here the names are longer ('판단 불가 대상(개)'), so the name column is as
     wide as they are, the verdict chip keeps its own width and the line under it stands in the value column (at 5.5em
     the count was drawn over its name and '판단 불가 대상도 있음' fell into the name column, four short lines). */
  
  .pc-items td>.tag{justify-self:start}
  .pc-items .tag+.pc-also{grid-column:2;display:block;margin:var(--ds-space-1) 0 0}
}
@media(min-width:1800px){
  .pc-terms dd{font-size:var(--ds-fs-lg)}
  .pc-terms dt,.pc-states .pc-lead,.pc-state small{font-size:var(--ds-fs-sm)}
  .pc-framework>div>b{font-size:var(--ds-fs-lg)}
  .pc-framework .tag{font-size:var(--ds-fs-sm)}
  .pc-state b{font-size:var(--ds-fs-2xl)}
  .pc-state[data-zero] b{font-size:var(--ds-fs-xl)}
  .pc-items tr.pc-group th{font-size:var(--ds-fs-md)}
  .pc-items .tag{font-size:var(--ds-fs-sm)}
  /* A booth screen: the table by the size every list keeps there (rows a step up, the head and the marks one under
     -- its names, counts and links were a further step over the rows), the judged instant the largest of the head. */
  .pc-items td{font-size:var(--ds-fs-md)}
  .pc-items thead th{font-size:var(--ds-fs-sm)}
  .pc-terms [data-proof-judged] dd{font-size:var(--ds-fs-xl);font-weight:600}
}
/* Click Agent: the shared figure tiles at the page's own density; a 0 is quiet. */
.lo-figures{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:0 0 var(--ds-space-4)}
.lo-figures .ov-metric{padding:var(--ds-space-3) var(--ds-space-4)}
.lo-figures .ov-metric strong{font-size:var(--ds-fs-2xl)}
.lo-figures .ov-metric[data-zero] strong{color:var(--ds-text-3)}
/* Click 활동·통제 (click-activity-g12-r2, click-control-g12-r2). A tile's note wraps as even lines, never one syllable
   alone; on a phone the tiles are two to a row and, with an odd number of them, the first (what waits for a person)
   takes the row, so none is left alone at the end. */
.lo-figures .ov-metric small{text-wrap:balance}
@media (max-width:600px){
  .lo-figures{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lo-figures[data-click-stats]>.ov-metric:first-child:nth-last-child(odd){grid-column:1 / -1}
}
/* While a tab reads: the shapes of what is coming at their sizes, each part apart from the next as the parts are. */
.lo-wait{display:grid;gap:var(--ds-space-4)}
.lo-wait .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.lo-wait .ui-skeleton-tile{height:95px}
.lo-wait .ui-skeleton-row{height:46px}
.lo-wait .ui-skeleton-line,.lo-wait .ui-skeleton-line:first-of-type{height:16px;width:min(100%,46em)}
@media (max-width:600px){.lo-wait .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-click-wait="activity"] .ui-skeleton-tile:first-of-type{grid-column:1 / -1}}
/* A way to a list further down the tab: a link of the Portal's, a 24px target. */
[data-click-jump]{display:inline;min-height:24px;padding:0 2px;font-size:inherit;text-decoration:underline;text-underline-offset:2px}
[data-click-kept]{margin:var(--ds-space-2) 0 0}
[data-click-section]:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
/* 최근 조치. The columns are given their widths, so both engines draw the same and a row stays low; a word is never
   cut in the middle (a date, a time and a state word each stay whole), a long id or address breaks where it must. */
.table-wrap table.lo-audit{table-layout:fixed}
.lo-audit .lo-c-target{width:14%}
.table-wrap .lo-audit td{max-width:none;vertical-align:top;overflow-wrap:anywhere}
.table-wrap .lo-audit td :is(small,code){word-break:keep-all}
.table-wrap .lo-audit td:last-child{white-space:normal}
.table-wrap .lo-audit .tag{white-space:normal;overflow-wrap:normal}
/* 누가: a sign-in address breaks at its @ only -- each side is a box, broken inside only when wider than the cell. */
.lo-audit .lo-at{display:inline-block;max-width:100%}
/* 대상's long list (자산 N개 · 모두 보기): opened, one of the list to a line with no bullet, an id in the small type. */
.lo-many>ul{margin:var(--ds-space-1) 0 0;padding:0;list-style:none}
.lo-many>ul>li{margin:0 0 2px}
.lo-many>ul code{font-size:var(--ds-fs-xs)}
.lo-nowrap{white-space:nowrap}
/* Why, as one line that opens to the whole of it and the record ids. */
.lo-why>summary{display:flex;align-items:baseline;gap:var(--ds-space-1);cursor:pointer;list-style:none}
.lo-why>summary::-webkit-details-marker{display:none}
.lo-why>summary::before{content:"\25B8";flex:none;color:var(--ds-text-2)}
.lo-why[open]>summary::before{content:"\25BE"}
.lo-why-line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lo-why[open] .lo-why-line{overflow:visible;white-space:normal}
.lo-why-more{margin:var(--ds-space-1) 0 0 calc(1em + var(--ds-space-1));color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
.lo-why-more :is(p,.lo-said-line){margin:0 0 var(--ds-space-1)}
.lo-why-more code{font-size:inherit}
[data-click-undo]{color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
/* Who acted: a person is a round mark, the Agent by itself a square outline -- told apart by shape as well as colour. */
.tag[data-click-actor="person"]{border-radius:999px;padding-inline:9px}
.tag[data-click-actor="agent"]{background:transparent;color:var(--ds-text-2);outline:1px solid var(--ds-line-strong);outline-offset:-1px}
/* Gateway 경유: a label and its value a line. */
.lo-held{display:grid;gap:var(--ds-space-1);margin:0 0 var(--ds-space-4);font-size:var(--ds-fs-sm)}
.lo-held>div{display:grid;grid-template-columns:11.5em minmax(0,1fr);gap:var(--ds-space-3);align-items:baseline}
.lo-held dt{color:var(--ds-text-2)}
.lo-held dd{margin:0;color:var(--ds-text);overflow-wrap:anywhere}
.lo-held dd small{color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
@media (max-width:600px){.lo-held>div{grid-template-columns:1fr;gap:0}.lo-held>div+div{margin-top:var(--ds-space-2)}}
/* A long ID on one line, cut in its middle; its end stays. */
code.lo-id{display:inline-flex;max-width:14em;white-space:nowrap;vertical-align:bottom;overflow-wrap:normal;word-break:normal}
code.lo-id .lo-cut{flex:0 1 auto;min-width:2ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
code.lo-id .lo-end{flex:none}
/* Gateway 요청: a value that is not there, said one way; a run's ID once for its rows; the tools turned off by why. */
.lo-none,.lo-unknown{color:var(--ds-text-2)}
.table-wrap .lo-requests td.lo-run{vertical-align:top;white-space:normal;border-left:1px solid var(--ds-line)}
.lo-requests td.lo-run small{display:block;margin-top:2px}
.lo-off{margin:0 0 var(--ds-space-3)}
.lo-off>.inventory-note{margin:0}
.lo-off-group{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ds-space-1) var(--ds-space-2);margin:0 0 var(--ds-space-2);font-size:var(--ds-fs-sm)}
/* A part the management server did not give: at the left under its heading, as the heading is. */
div.lo-unread{padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-line-strong);border-left:3px solid var(--ds-danger);border-radius:var(--ds-radius-s);font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
div.lo-unread b{display:block;color:var(--ds-text);font-size:var(--ds-fs-md);font-weight:600}
div.lo-unread p{margin:var(--ds-space-1) 0 0;max-width:60em}
[data-click-wait="control"] .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(144px,1fr))}
[data-click-wait="control"] .ui-skeleton-tile{height:104px}
@media (max-width:600px){[data-click-wait="control"] .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:1fr}[data-click-wait="control"] .ui-skeleton-tile{height:74px}}
/* A note under a table keeps off the table's last line. */
[data-page^="click-"] .table-wrap+.inventory-note{margin-top:var(--ds-space-2)}
/* 최근 조치 on a phone: each action a block -- its name and when on the first line, then what it came to, who, why,
   what it was about and its undo -- instead of a table wider than the screen. */
@media (max-width:600px){
  .table-wrap table.lo-audit{min-width:0;table-layout:auto}
  .lo-audit,.lo-audit tbody,.lo-audit tr,.lo-audit td{display:block}
  .lo-audit colgroup{display:none}
  .lo-audit thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap .lo-audit tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ds-space-1) var(--ds-space-3);padding:var(--ds-space-3) 0;border-bottom:1px solid var(--ds-line)}
  /* The head is said, not drawn, as 활동 설정's (narrow390 b135 RENDER:click-activity:no-overflow). */
  .table-wrap .lo-audit thead tr{display:block;padding:0;border:0}
  .table-wrap .lo-audit td{padding:0;border:0}
  .table-wrap .lo-audit td:nth-child(1){grid-column:2;grid-row:1;text-align:right;color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
  .table-wrap .lo-audit td:nth-child(2){grid-column:1;grid-row:1;font-weight:600;color:var(--ds-text)}
  .table-wrap .lo-audit td:nth-child(n+3){grid-column:1 / -1}
  .table-wrap .lo-audit td:is(:nth-child(4),:nth-child(6))::before{content:attr(data-label);margin-right:var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
  .table-wrap .lo-audit td:empty{display:none}
  .lo-audit td br{display:none}
}
/* 자율 범위 (click-autonomy-g11-r2 잔여). While it reads, the rows of the table that is coming under the one frame. With
   something changed and not saved, the save line stays at the foot of the window at any width (저장 was below the
   first screen); with nothing changed it stands in its place and covers no row. */
[data-click-wait="autonomy"] .ui-skeleton-row{height:62px}
.lo-save:has([data-click-pending]:not([data-click-pending="0"])){display:contents}
.lo-savebar:has([data-click-pending]:not([data-click-pending="0"])){position:sticky;bottom:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ds-space-2) var(--ds-space-4);padding:var(--ds-space-2) 0;border-top:1px solid var(--ds-line);background:var(--ds-bg)}
.lo-savebar:has([data-click-pending]:not([data-click-pending="0"])) :is(.lo-pending,.toolbar-row){margin:0}
/* 저장 stands at that line's end and stays there when its status says something (a refusal, the question before approval
   is turned off, a cap that is no number): the status has the line under it, and 저장 keeps the room its row left after
   it. As a cell beside 저장 the status widened 저장's row -- 저장 moved left by the words' width, or its row went under
   what is not saved and 저장 to the line's start. Where 저장 is already under what is not saved, it stands as it did. */
.lo-savebar:has([data-click-pending]:not([data-click-pending="0"])) .toolbar-row:has(>[role="status"]:not(:empty)){display:contents}
.lo-savebar:has([data-click-pending]:not([data-click-pending="0"])) .toolbar-row:has(>[role="status"]:not(:empty))>[data-click-save]{margin-right:var(--ds-space-3)}
.lo-savebar:has([data-click-pending]:not([data-click-pending="0"])) .toolbar-row>[role="status"]:not(:empty){flex:1 0 100%;min-width:0}
@media (max-width:640px){
  .lo-savebar:not(:has([data-click-pending]:not([data-click-pending="0"]))){position:static;border-top:0;padding:0}
}
/* 순찰·예약 (click-patrol-g12-r2 잔여). While it reads, the tiles at their size; an earlier record of a finding folded
   under the newest keeps the row's inset. */
[data-click-wait="patrol"] .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.lo-again{margin:0 0 var(--ds-space-2) var(--ds-space-4)}
[data-click-finding] summary [data-click-action-mark]{margin-left:var(--ds-space-2)}

/* ---- Phase 4 settings screens (web-ai-rules, web-ai-capture-switch, gemini-browser-settings, data-connections, browsers):
   placement only -- a screen's blocks stand a card gap apart, and a div table (.lx-t-cols) says its own columns. ---- */
#web-ai-rules-root{display:flex;flex-direction:column;gap:var(--gap)}
#web-ai-rules-root>.lx-lede{margin:0}
#web-ai-rules-root>.lx-draftbar{margin-top:0}
#web-ai-rules-root [data-web-ai-rules-table]{overflow-x:auto}
#web-ai-rules-root [data-web-ai-rules-table="rules"]>.lx-tr{grid-template-columns:minmax(200px,1.4fr) repeat(4,minmax(128px,1fr));min-width:760px}
#web-ai-rules-root [data-web-ai-rules-table="coverage"]>.lx-tr{grid-template-columns:minmax(160px,1fr) minmax(96px,180px) minmax(96px,180px)}
#web-ai-rules-root [data-web-ai-rules-part="coverage"]>.lx-setrow{margin-bottom:var(--sp-2)}
#web-ai-rules-root [data-web-ai-rules-part]>.lx-sub+.lx-t,#web-ai-rules-root [data-web-ai-rules-part]>.lx-t+.lx-sub{margin-top:var(--sp-3)}
#web-ai-rules-root [data-web-ai-rules-advanced]>summary{padding:var(--sp-1) 0}
#web-ai-rules-root [data-web-ai-rules-advanced][open]>summary~.lx-card{margin-top:var(--gap)}
/* 웹 AI 대화 수집: the headline, then cards a gap apart; the reasons and the notice's items as quiet lists in columns,
   not 14 bare lines; the notice body grows downward only. */
#web-ai-capture-switch-root>.lx-lede{margin:0 0 var(--gap)}
#web-ai-capture-switch-root>.lx-stack{gap:var(--gap)}
#web-ai-capture-switch-root [data-capture-switch-status]{gap:var(--sp-1)}
#web-ai-capture-switch-root :is([data-capture-switch-reasons],[data-capture-switch-required]){display:grid;gap:var(--sp-1) var(--sp-6);margin:var(--sp-1) 0 0;padding-left:var(--sp-5);color:var(--ink-2);font-size:var(--fs-sm);line-height:var(--lh-body);list-style:disc}
#web-ai-capture-switch-root [data-capture-switch-required]{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
#web-ai-capture-switch-root [data-capture-switch-reasons]>li::marker,#web-ai-capture-switch-root [data-capture-switch-required]>li::marker{color:var(--faint)}
#web-ai-capture-switch-root [data-capture-switch-notice-form]{gap:var(--sp-4);margin-top:var(--sp-3)}
#web-ai-capture-switch-root [data-capture-switch-notice-form] textarea{resize:vertical}
#web-ai-capture-switch-root [data-capture-switch-languages]{gap:var(--sp-4)}
#web-ai-capture-switch-root .lx-setrow:last-child{border-bottom:0;padding-bottom:0}
/* Google 계정 · Gemini: the domains' box spans its row under the name; the re-collected states are one row a device. */
#gemini-browser-settings-root>.lx-lede{margin:0 0 var(--gap)}
#gemini-browser-settings-root>.lx-stack{gap:var(--gap)}
#gemini-browser-settings-root [data-gemini-field="workspace_domains"] textarea{width:100%;resize:vertical}
#gemini-browser-settings-root [data-gemini-part="recollection"]>:is(p,details,.lx-row)+:is(p,details,.lx-row){margin-top:var(--sp-2)}
#gemini-browser-settings-root [data-gemini-recollection-list] .lx-t{margin-top:var(--sp-2)}
#gemini-browser-settings-root [data-gemini-recollection-list] .lx-cell>.lx-sub{display:block}
/* 수집 상태 (data-connections): the 구성요소 상태 card sits after the connections, its four parts as setting lines; the
   주기 and 안내 pair are as tall as their own content. */
[data-page="data-connections"] [data-fh-pair]{align-items:start}
[data-page="data-connections"] [data-fh-components]:empty{display:none}
[data-page="data-connections"] [data-component-health-rows]>.lx-setrow:last-child{border-bottom:0}
[data-page="data-connections"] [data-testid="component-health"]>p[role="status"]{margin-top:var(--sp-2)}
[data-page="data-connections"] [data-component-health-rows] .lx-setrow>div:first-child>.lx-h3{margin:0}
/* 브라우저 (browsers): headline, the protection note, the four MetricCard tiles, then cards a gap apart; the detail folds
   are lines in one 상세 card. */
#browsers-root{display:flex;flex-direction:column;gap:var(--gap)}
#browsers-root>.lx-lede,#browsers-root>.lx-note{margin:0}
#browsers-root [data-browser-summary]>.ov-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
#browsers-root [data-browser-summary] .ov-metric>.lx-lk{justify-self:start;align-self:flex-start}
#browsers-root [data-browser-details]>details{margin:0}
#browsers-root [data-browser-details]>details+details{padding-top:var(--sp-2);border-top:1px solid var(--divider-soft)}
#browsers-root [data-browser-details] .detail-fold-body{padding-top:var(--sp-3)}
#browsers-root [data-testid="browsers-conversations-section"] .lx-list{margin:0;padding-left:var(--sp-5);list-style:disc}