/* Control · 이슈 · 승인 (t-ades-screens-controls): 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. */

/* ---- 이슈 › 열린 이슈 · 해소·거절 (issues-console.js): the figures, the list, and the issue opened beside it ---- */
.iss-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--ds-space-3);margin:0 0 var(--ds-space-3)}
/* A figure tile in one band: its name and line on the left, the figure on the right -- the list starts higher. */
.iss-stats .ov-metric{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name figure" "line figure";align-items:center;column-gap:var(--ds-space-3);padding:10px 14px}
.iss-stats .ov-metric>span{grid-area:name}
.iss-stats .ov-metric>small{grid-area:line;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iss-stats .ov-metric>strong{grid-area:figure;font-size:28px}
.iss-stats .ov-metric[data-zero]>strong{color:var(--ds-text-2);font-weight:600}
.iss-screen [data-issues-stats="pending"] .ui-skeleton-tile{height:62px}
.iss-stats .ov-metric[data-tone="danger"]{border:1.5px solid var(--ds-danger);background:var(--ds-danger-soft)}
.iss-stats .ov-metric[data-tone="danger"] strong{color:var(--ds-danger-text)}
.iss-stats .ov-metric[data-tone="unknown"]{border:1.5px dashed var(--ds-unknown);background:var(--ds-unknown-soft)}
.iss-stats .ov-metric[data-tone="unknown"] strong{color:var(--ds-unknown-text)}
.iss-layout{display:grid;gap:var(--ds-space-4);align-items:start}
.iss-layout:not(.ds-split){grid-template-columns:minmax(0,1fr)}
.iss-main{min-width:0}
.iss-side:empty{display:none}
.iss-side>.su-panel{margin:0}
.iss-sections>section{margin-top:var(--ds-space-3);padding-top:var(--ds-space-2);border-top:2px solid var(--ds-line-strong)}
.iss-sections>section>h4{margin:var(--ds-space-1) 0;font-size:var(--ds-fs-sm);color:var(--ds-text)}
/* The issue's steps in the order the work goes, each named above its fields; 처리 시작 leads. */
.iss-actions{display:grid;gap:var(--ds-space-3);margin:var(--ds-space-3) 0 0}
.iss-actions>.iss-start{justify-self:stretch}
.iss-act{display:grid;gap:var(--ds-space-1);align-items:start}
.iss-act-name{font-size:var(--ds-fs-sm);font-weight:600;color:var(--ds-text-2)}
.iss-act-fields{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);align-items:center}
.iss-act-fields :is(input,select){flex:1 1 140px;min-width:0;width:auto;margin:0}
.iss-act-fields input[type="datetime-local"]{flex-basis:200px}
.iss-act-fields input[type="datetime-local"][data-empty]:not(:focus)::-webkit-datetime-edit{color:transparent}
.iss-act-fields>button{flex:0 0 auto;min-width:96px}
.iss-act[data-iss-step="reject"] .iss-act-fields>select{flex:0 0 auto;max-width:100%}
.iss-act-hint{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
/* Three axes, three shapes: a severity is a filled mark, the verdict an outlined one, the handling a dot and its word. */
.iss-status{display:inline-flex;align-items:center;gap:6px;font-size:var(--ds-fs-sm);font-weight:600;color:var(--ds-text);white-space:nowrap}
.iss-status>i{width:8px;height:8px;border-radius:50%;background:var(--ds-text-3);flex:none}
.iss-status:is([data-issue-status="new"],[data-issue-status="recurred"],[data-issue-status="reopened"])>i{background:var(--ds-accent)}
.iss-status:is([data-issue-status="in_progress"],[data-issue-status="reported"])>i{background:transparent;border:2px solid var(--ds-accent)}
.iss-status[data-issue-status="resolved"]>i{background:var(--ds-ok)}
.iss-status[data-issue-status="resolved"],.iss-status[data-issue-status="rejected"]{color:var(--ds-text-2)}
/* The verdict mark is outlined wherever a severity chip stands near it -- the issue lists and a Control's own page
   (its detected targets drew the same mark filled: one verdict, two shapes). 판단 불가 keeps its dashed edge. */
:is(.iss-screen,#control-detail-root) [data-testid="search-result-mark"]{background:transparent;outline:1px solid currentColor;outline-offset:-1px}
:is(.iss-screen,#control-detail-root) [data-testid="search-result-mark"].amber{outline-style:dashed}
/* The open issues by severity, each a filter of the list, and the note on the verdict and the handling beside them. */
.iss-band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-4);margin:0 0 var(--ds-space-3)}
.iss-band>.inventory-note{flex:1 1 360px;margin:0;max-width:72em}
.iss-sev-slot:empty{display:none}
/* The band keeps its height while the figures are still asked, so the list does not move when the chips come. */
[data-issues-view="issues"] .iss-band{min-height:40px}
.iss-sev{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0}
.iss-sev-chip{display:inline-flex;align-items:baseline;gap:var(--ds-space-2);padding:5px 12px;border:1px solid var(--ds-line-strong);border-radius:999px;background:var(--ds-surface);color:var(--ds-text);font-size:var(--ds-fs-sm);font-weight:500;min-height:30px}
.iss-sev-chip:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.iss-sev-chip b{font-family:var(--ds-font-num);font-variant-numeric:tabular-nums;font-weight:700}
.iss-sev-chip:is([data-severity="Critical"],[data-severity="High"]) b{color:var(--ds-danger-text)}
.iss-sev-chip[aria-pressed="true"]{border-color:var(--ds-accent);background:color-mix(in srgb,var(--ds-accent) 12%,transparent);color:var(--ds-accent-text)}
/* Denser rows in fixed columns (every state keeps them where the rows put them): a Control's whole name in up to
   two lines beside its severity -- its ending (3명 이상이 쓴다) is what tells two Controls apart -- and a target's
   kind and who uses it on one line under its name. */
[data-issues-view] .iss-main table{table-layout:fixed;min-width:0}
[data-issues-view] .iss-main th.iss-c-id{width:96px}
[data-issues-view] .iss-main th.iss-c-target{width:19%}
[data-issues-view] .iss-main th.iss-c-status{width:88px}
[data-issues-view] .iss-main th.iss-c-verdict{width:96px}
/* 담당 holds an operator's name on one line (a-admin2 broke after its hyphen at 68px on the 10-06 copy); a longer
   name is cut with its whole in the cell's title. */
[data-issues-view] .iss-main th.iss-c-who{width:84px}
[data-issues-view] .iss-main td.iss-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A time column holds the longest time on one line (2026. 12. 23. 오전 11:13, the year whole since the 10-06
   review) inside the cell's own padding. */
[data-issues-view] .iss-main th.iss-c-due{width:184px}
[data-issues-view] .iss-main th.iss-c-when{width:184px}
[data-issues-view][data-detail-open] .iss-main th.iss-c-target{width:30%}
/* 해소·거절: the verdict says why it closed and the closing time is whole. */
/* Each column by what it holds (measured on 533 closed rows of a QA copy and the fixture): the verdict with why it
   closed on one line (불일치 + 재평가에서 더 이상 맞지 않음), an expiry and a closing time whole on one line, and what is
   left to the Control's name -- a name of 16 letters (사람 키로 허용 밖 모델 호출) is one line, not two. 대상 is a plain
   width: max() on a fixed table's column was read as none, so it took half of what was left. */
/* No one assigned is quiet, so a row that has someone is the one seen (25 rows said 없음 in the weight of a name). */
[data-issues-view] td[data-unassigned]{color:var(--ds-text-3)}
/* How an issue closed stands under its verdict, whole: beside the mark its last word fell alone to a second line. */
[data-issues-view] td small[data-resolution]{display:block;margin-top:2px;white-space:nowrap}
[data-issues-view="closed-issues"] .iss-main th.iss-c-verdict{width:200px}
[data-issues-view="closed-issues"] .iss-main th.iss-c-when{width:184px}
[data-issues-view="closed-issues"] .iss-main th.iss-c-target{width:150px}
[data-issues-view="closed-issues"] .iss-main th.iss-c-who{width:60px}
[data-issues-view="closed-issues"] .iss-main th.iss-c-due{width:148px}
[data-issues-view="closed-issues"] .iss-main td.iss-when[data-label="수용 기한"]{white-space:normal}
[data-issues-view="closed-issues"] .iss-control-name{-webkit-line-clamp:3}
[data-issues-view="closed-issues"] .iss-when .iss-due-left{display:block}
/* A wide screen's cells are padded more and their words a size up: the time columns widen with them. */
@media (min-width:1700px){
  [data-issues-view] .iss-main th.iss-c-due{width:204px}
  [data-issues-view] .iss-main th.iss-c-when{width:204px}
  [data-issues-view="closed-issues"] .iss-main th.iss-c-when{width:204px}
  [data-issues-view="closed-issues"] .iss-main th.iss-c-due{width:116px}
}
/* The fixed columns are wider than a narrow window: the table keeps the width its Control column needs and goes on
   sideways in its frame, instead of that column closing to nothing (a phone stacks the rows, below; beside an open
   issue the extra columns are not shown). */
@media (min-width:641px){
  [data-issues-view]:not([data-detail-open]) .iss-main table{min-width:960px}
  [data-issues-view="closed-issues"]:not([data-detail-open]) .iss-main table{min-width:1040px}
}
.iss-screen .iss-sort-mark{color:var(--ds-text);font-weight:700}
.iss-screen td{padding-top:8px;padding-bottom:8px}
[data-issues-view] td{padding-top:5px;padding-bottom:5px;line-height:1.4}
.iss-screen td.iss-control{max-width:none}
.iss-control-cell{display:flex;align-items:center;gap:var(--ds-space-2);min-width:0}
.iss-control-cell>.tag{flex:none;margin:0}
.iss-control-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;overflow-wrap:anywhere}
.iss-screen td.iss-target{max-width:none}
.iss-screen td.iss-target>.link-button{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iss-screen td.iss-target .iss-sub{display:block;color:var(--ds-text-2);font-size:var(--ds-fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iss-due-left{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
/* The rows' place in its other states: loading (its shape, said in words), failed, empty -- under the same head. */
.iss-screen tr.iss-state-row:hover{background:none}
.iss-screen tr.iss-state-row>td{padding:var(--ds-space-3);white-space:normal}
.iss-loading>p{margin:0 0 var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.iss-loading .ui-skeleton-row{height:40px}
.iss-screen [data-testid="issues-error"] .ui-frame{margin:0}
/* A failed read's frame says what failed, what is not known and what to do on lines of their own. */
:is(#issues-root,#closed-issues-root,#issue-trend-root,#controls-root,#control-detail-root,#ignore-rules-root,#approvals-root) .ui-frame[data-state="error"] p,.iss-unread>p{white-space:pre-line;line-height:1.6}
.iss-unread>p{margin:var(--ds-space-2) 0}
.iss-screen td.iss-target .iss-sub .su-context{display:inline;margin:0;font-size:inherit}
.iss-screen td.iss-target .iss-sub .su-context::before{content:" · "}
/* What an opened issue's side hides of a row is said under its status only beside it (below, min-width 1181px). */
.iss-brief{display:none}
/* A word the 용어 도움말 explains, explained where it is said (its bubble on hover and focus): a dotted line marks it. */
:is(.iss-screen,.su-trend) .iss-term{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
.iss-screen{--iss-side-top:80px}
.iss-screen tr[data-issue-row]{scroll-margin-top:var(--iss-side-top)}
.iss-screen .iss-mine{flex:none;white-space:nowrap;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:0;line-height:1}
.iss-sections .kv .iss-name{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.iss-empty{display:grid;justify-items:start;gap:var(--ds-space-2)}
.iss-empty>.ui-frame{width:100%;margin:0}
.iss-screen tr.selected{background:color-mix(in srgb,var(--ds-accent) 12%,transparent);box-shadow:inset 3px 0 0 var(--ds-accent)}

/* ---- Control › 목록 · 상세 · 무시 규칙 (controls-console.js) ---- */
.ctl-stats,.ctl-totals,.apr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--ds-space-3);margin:0 0 var(--ds-space-4)}
.ctl-totals{margin:var(--ds-space-2) 0 var(--ds-space-3)}
[data-controls-stats="pending"]{margin:0 0 var(--ds-space-4)}
[data-controls-stats="pending"] .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
:is(th,td).ctl-num{text-align:right;font-family:var(--ds-font-num);font-variant-numeric:tabular-nums}
.ctl-unknown{color:var(--ds-unknown-text);border-bottom:1px dashed var(--ds-unknown)}
.ctl-inline-form{display:flex;gap:var(--ds-space-2);align-items:center;justify-content:flex-end}
.ctl-inline-form input{width:auto;min-width:180px;margin:0}
/* Control 목록·상세 (controls/control-detail-g3-r1): the figures in one band as on 이슈, a row's second line says what
   the Control does, the counts name what they count; a narrow screen stacks a row's facts under its name. */
:is(#controls-root .ctl-stats,#control-detail-root .ctl-totals) .ov-metric{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name figure" "line figure";align-items:center;column-gap:var(--ds-space-3);padding:10px 14px}
:is(#controls-root .ctl-stats,#control-detail-root .ctl-totals) .ov-metric>span{grid-area:name}
:is(#controls-root .ctl-stats,#control-detail-root .ctl-totals) .ov-metric>small{grid-area:line}
:is(#controls-root .ctl-stats,#control-detail-root .ctl-totals) .ov-metric>strong{grid-area:figure;font-size:28px}
#controls-root [data-controls-stats="pending"] .ui-skeleton-tile,#control-detail-root .ctl-totals-shape .ui-skeleton-tile{height:62px}
.ctl-totals-shape .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#controls-root .ctl-card td{padding-top:6px;padding-bottom:6px;line-height:1.4}
/* Under a Control's name, one line: what it does, then its version (and its scope when the list holds several). A
   count that is a real 0 steps back so the Controls that find something are the figures the eye meets. */
#controls-root .ctl-row-line{margin-top:1px;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
#controls-root .ctl-row-line>small{font-size:inherit}
#controls-root .ctl-row-line>.ctl-row-does{color:var(--ds-text)}
#controls-root .ctl-card td.ctl-num[data-some]{font-weight:700}
#controls-root .ctl-card td.ctl-num[data-zero]{color:var(--ds-text-3)}
.ctl-stats .ov-metric[data-zero]>strong{color:var(--ds-text-2);font-weight:600}
.ctl-template-about{-webkit-line-clamp:3}
.ctl-defaults-on{color:var(--ds-text-2);font-size:var(--ds-fs-sm);white-space:nowrap}
.ctl-detail-meta{margin:var(--ds-space-1) 0 var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
/* The versions are a record, not a step: folded under the attributes until asked for. */
.ctl-detail-history>summary{cursor:pointer;color:var(--ds-text-2);font-size:var(--ds-fs-sm);font-weight:600}
.ctl-detail-history[open]>summary{margin-bottom:var(--ds-space-2)}
/* Control 상세 reads top to bottom: its name with its severity, state and kind beside it, its condition as one
   sentence, then what it found; the attributes and versions follow the targets. */
/* The head is a card, as an entity's page keeps its head, and the Control's name is the page's own size. */
.ctl-detail-head{margin:0;padding:var(--ds-space-4) 20px;min-height:0}
.ctl-detail-none{display:grid;justify-items:start;gap:var(--ds-space-3)}
.ctl-detail-none>.ui-frame{width:100%;margin:0}
.ctl-unknown-note{margin:0 0 var(--ds-space-2)}
/* A 판단 불가 row's reason is words beside its mark: mark and reason were two amber chips on each of 50 rows. */
#control-detail-root [data-control-results] td>.su-reason{background:none;padding:0;margin:0;color:var(--ds-text);font-size:var(--ds-fs-sm)}
#control-detail-root [data-control-results] td>.su-reason+.su-reason::before{content:" · ";color:var(--ds-text-3)}
.ctl-detail-title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1) var(--ds-space-3)}
.ctl-detail-title>h3{margin:0}
.ctl-detail-tags{display:inline-flex;flex-wrap:wrap;gap:var(--ds-space-1)}
.ctl-detail-tags .tag{margin:0}
.ctl-detail-condition{margin:var(--ds-space-2) 0 0;max-width:96ch}
/* The state and its reason (portalUi.detail.status) sit under the name as the condition does, at the same step. */
.ctl-detail-head .detail-status{margin:var(--ds-space-2) 0 0;font-size:var(--ds-fs-sm)}
.ctl-detail-condition>.su-tech{margin:0}
.ctl-detail-condition>.su-tech>summary{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
/* What the Control is for and what to do about it is a card under its targets, as its head and its versions are:
   on the page's ground it read as loose text between two cards. Its lines keep a reading width. */
.ctl-detail-attrs>*{max-width:96ch}
#control-detail-root .ctl-card+details{margin-top:var(--ds-space-2)}
#control-detail-root .ctl-card+details>summary{color:var(--ds-text-2);font-size:var(--ds-fs-sm);cursor:pointer}
.ctl-condition{margin:0 0 var(--ds-space-1);font-size:var(--ds-fs-md);line-height:1.55}
.ctl-condition>b{font-weight:600}
.ctl-notfound{display:grid;justify-items:start;gap:var(--ds-space-3)}
.ctl-notfound>.ui-frame{width:100%;margin:0}
.ctl-detail-loading>p{margin:0}
#control-detail-root [data-act="edit"]{margin-top:var(--ds-space-3)}
@media (max-width:640px){
  #controls-root .ctl-card table{min-width:0}
  #controls-root .ctl-card thead{display:none}
  #controls-root .ctl-card tr[data-control-row]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--ds-space-3);padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
  #controls-root .ctl-card tr[data-control-row]>td{display:block;padding:0;border:0;text-align:left;max-width:none;white-space:normal}
  #controls-root .ctl-card tr[data-control-row]>td:first-child{grid-column:1/-1;margin-bottom:var(--ds-space-1)}
  #controls-root .ctl-card tr[data-control-row]>td[data-label]::before{content:attr(data-label) " ";color:var(--ds-text-2);font-size:var(--ds-fs-sm);font-family:var(--ds-font)}
}
@media (min-width:1700px){#controls-root .ctl-card :is(td,th){font-size:var(--ds-fs-md)}#controls-root .ctl-row-line{font-size:var(--ds-fs-sm)}}


/* ---- AI 에이전트 › 승인 (approvals.js) ---- */
.apr-panel{padding:var(--ds-space-4) var(--ds-space-4);margin:0 0 var(--ds-space-4)}
/* The lists in cards, each head inside its card; a tool is its name over its kind; the decision opens beside the lists. */
.apr-head{margin:0 0 var(--ds-space-4)}
.apr-head .inventory-note{margin:var(--ds-space-1) 0 0;max-width:86ch}
.apr-lists{display:grid;gap:var(--ds-space-4)}
.apr-card{margin:0;padding:0}
.apr-count{margin-left:var(--ds-space-1);font-family:var(--ds-font-num);font-variant-numeric:tabular-nums;color:var(--ds-text-2);font-weight:600}
.apr-card>.ui-frame{margin:0 20px 20px}
.apr-more{padding:var(--ds-space-2) 20px;margin:0}
.apr-tool b{display:block;font-weight:600;color:var(--ds-text)}
.apr-tool small{display:block;color:var(--ds-text-2)}
.apr-tool [data-approval-pin]{font-size:var(--ds-fs-sm);font-family:var(--ds-font-num)}
.apr-state .tag+.tag{margin-left:0}
.apr-state>[data-approval-ended]{display:table;margin-top:var(--ds-space-1)}
.apr-why{max-width:280px}
.apr-why>span{display:block}
.apr-why small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ds-text-2)}
:is(td,th).apr-when,td.apr-who small,[data-approval-system]{white-space:nowrap}
td.apr-who small{display:block;color:var(--ds-text-2)}
.apr-force ul{margin:0;padding:0;list-style:none}
td.apr-acts{text-align:right;white-space:nowrap}
.apr-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ds-space-2)}
.apr-panel-head .eyebrow{margin:0}
.apr-screen .iss-side>.apr-panel{margin:0}
.apr-head{align-items:center}
[data-approval-form] input[type="datetime-local"][data-empty]:not(:focus)::-webkit-datetime-edit{color:transparent}
.apr-panel fieldset{display:flex;flex-direction:column;gap:var(--ds-space-2);margin:var(--ds-space-3) 0;padding:var(--ds-space-2) var(--ds-space-3) var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s)}
.apr-panel fieldset legend{padding:0 var(--ds-space-1);font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.apr-panel fieldset label{display:flex;align-items:center;gap:var(--ds-space-2);margin:0;font-size:var(--ds-fs-sm);color:var(--ds-text)}
.apr-panel fieldset input[type="checkbox"]{width:16px;height:16px;margin:0;padding:0}
/* 이력 in the side panel: one revision a block, newest first, its facts as a definition list. */
.apr-history{margin:var(--ds-space-2) 0 0;padding:0;list-style:none}
.apr-history>li{padding:var(--ds-space-3) 0;border-top:1px solid var(--ds-line)}
.apr-history-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2)}
.apr-history-head small{margin-left:auto;color:var(--ds-text-2)}
.apr-history-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--ds-space-1) var(--ds-space-3);margin:var(--ds-space-2) 0 0;font-size:var(--ds-fs-sm)}
.apr-history-facts dt{color:var(--ds-text-2)}
.apr-history-facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.apr-history-facts dd small{display:block;color:var(--ds-text-2)}
.apr-history-facts ul{margin:0;padding:0;list-style:none}
/* The first read: the skeletons of the figures and the list, spaced as the drawn screen is. */
.scr-loading{display:grid;gap:var(--ds-space-4)}
/* An issue's number and its times are read whole: never broken in two. */
.iss-screen td.iss-id{white-space:nowrap}
.iss-screen td.iss-id small{display:block;color:var(--ds-text-2)}
.iss-screen td.iss-when{white-space:nowrap}
/* Control 상세: a field's sentence reads from its left edge beside a fixed label column, as the entity page reads. */
#control-detail-root .kv{justify-content:flex-start;gap:var(--ds-space-4)}
#control-detail-root .kv>span:first-child{flex:0 0 96px}
#control-detail-root .kv>span:last-child{flex:1;text-align:left}
#control-detail-root .ctl-totals+p{margin-top:var(--ds-space-2)}
/* The shared list-and-detail layout (style.css .ds-split/.ds-side) opens only with a detail; the panel inside it
   drops its own frame (the side is the frame), and the list keeps the columns that fit beside it. */
.ds-card-head small{color:var(--ds-text-2)}
.ds-side>:is(.su-panel,.apr-panel,.table-card){margin:0;padding:0;border:0;background:none;box-shadow:none}
@media (min-width:1181px){
  .iss-screen[data-detail-open] .iss-extra{display:none}
  /* Its status column holds the longest mark whole (조치 보고됨 ended 2px past its cell at 1920, c3.48) and the line
     that says what of the four columns not drawn sets the row apart (issues-console.js brief). */
  [data-issues-view][data-detail-open] .iss-main th.iss-c-status{width:112px}
  [data-issues-view][data-detail-open] .iss-main .iss-brief{display:block;margin-top:2px;color:var(--ds-text-2);font-size:var(--ds-fs-sm);line-height:1.35;white-space:normal}
  [data-issues-view][data-detail-open] .iss-main .iss-brief>span{display:inline-block;max-width:100%;overflow-wrap:anywhere}
  .iss-screen[data-detail-open] .iss-main table{min-width:0}
  .iss-screen[data-detail-open] .iss-main :is(th,td){padding-left:var(--ds-space-3);padding-right:var(--ds-space-2)}
  .iss-screen .ds-side{top:var(--iss-side-top);max-height:calc(100vh - max(var(--iss-side-top),var(--iss-side-fit,0px)) - var(--ds-space-4))}
  /* A panel taller than the window scrolls inside itself: its lower edge fades instead of cutting a line of text
     in half (the edge read as a broken screen). At its end the fade rests in the panel's own padding. */
  .iss-screen .ds-side::after{content:"";position:sticky;bottom:calc(-1 * var(--ds-space-4));display:block;height:24px;margin:0 0 calc(-1 * var(--ds-space-4));background:linear-gradient(to bottom,transparent,var(--ds-surface) 85%);pointer-events:none}
}
/* 이슈 › 추이: the period's figures, then the days that changed in a card; the unchanged days fold under one line. */
.iss-trend-card{padding:0}
.iss-trend-still{margin:0;padding:var(--ds-space-3) 20px}
/* 이슈 추이: the last day is today counted until the read (P2-25); the read's time and its zone stay on one line. */
.iss-trend-now{margin:0;padding:0 20px var(--ds-space-3)}
.iss-trend-at{white-space:nowrap}
/* 이슈 › 승인 대기 (issue-approvals.js): each incident a card whose head says what it is about; its requests under it. */
.iap-list{display:grid;gap:var(--ds-space-3)}
.iap-cards{padding:0 20px var(--ds-space-4)}
.apr-tool .apr-unpinned{color:var(--ds-unknown-text)}
/* A hook's other rows of the same event name, and what its pin names now: quiet lines under the tool. The dot before
   the count heads its part (no line ends on it). On a wide window the tool keeps room for the line among the
   decisions' columns (sized by what they hold); narrower, that room would push the table sideways. */
.apr-tool .apr-kin{font-size:var(--ds-fs-sm);white-space:normal;overflow-wrap:anywhere}
.apr-tool .apr-covers{display:inline-block;max-width:100%}
.apr-rule{margin:0 0 var(--ds-space-3)}
@media (min-width:1700px){table:not(.apr-waiting) .apr-tool .apr-kin{min-width:24em}}
/* Control › 목록: the list in a shared card; the templates in one card of tiles; a template opens beside them. */
.ctl-card,.ctl-templates{padding:0;min-height:0}
.ctl-main{display:grid;gap:var(--ds-space-4)}
.ctl-main>*{margin:0;min-width:0}
.ctl-templates>.ds-card-head{align-items:center}
.ctl-templates>.ds-card-head>small{flex:1;min-width:200px}
.ctl-install-note{margin:0 20px var(--ds-space-2)}
.ctl-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--ds-space-3);padding:var(--ds-space-2) 20px 20px}
article.ctl-template{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ds-space-1);min-height:0;padding:var(--ds-space-3) var(--ds-space-3) var(--ds-space-2);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s)}
article.ctl-template:hover{border-color:var(--ds-line-strong)}
article.ctl-template[data-open]{border-color:var(--ds-accent);box-shadow:inset 3px 0 0 var(--ds-accent);background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
.ctl-template-meta{display:flex;align-items:center;gap:var(--ds-space-2);margin:0}
.ctl-template-meta .tag{flex:none;margin:0}
.ctl-template-meta small{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.ctl-template>b{font-size:var(--ds-fs-md);font-weight:650;line-height:1.4;color:var(--ds-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* A clamp in a box taller than its lines would draw the lines after the ellipsis: the box keeps its own height, the action goes to the foot. */
.ctl-template-made{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.ctl-template-about{margin:0;font-size:var(--ds-fs-sm);color:var(--ds-text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctl-template>.text-action{margin:auto 0 0 -6px;padding-top:var(--ds-space-2)}
.ctl-template-panel h3{font-size:var(--ds-fs-lg);line-height:1.4}
.ctl-template-panel h3:focus{outline:none}
.ctl-template-panel .eyebrow{margin:0 0 2px}
.ctl-template-desc{margin:var(--ds-space-2) 0;font-size:var(--ds-fs-sm);color:var(--ds-text)}
.ctl-template-panel .kv{justify-content:flex-start;gap:var(--ds-space-3)}
.ctl-template-panel .kv>span:first-child{flex:0 0 72px}
.ctl-template-panel .kv>span:last-child{flex:1;text-align:left}
.ctl-template-panel .kv .tag{margin:0 2px 2px 0}
.ctl-template-form{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--ds-space-2) var(--ds-space-3);margin:var(--ds-space-3) 0}
.ctl-template-form label{min-width:0}
.ctl-template-form select{width:100%;min-width:0;max-width:none}
.ctl-template-totals{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-2)}
.ctl-template-totals .ov-metric{padding:var(--ds-space-2) var(--ds-space-3)}
.ctl-template-totals .ov-metric strong{font-size:var(--ds-fs-xl,20px)}
.ctl-template-targets{margin:var(--ds-space-2) 0 0;padding:0;list-style:none}
.ctl-template-targets>li{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ds-space-2);padding:var(--ds-space-2) 0;border-top:1px solid var(--ds-line);font-size:var(--ds-fs-sm)}
.ctl-template-target{min-width:0;overflow-wrap:anywhere}
.ctl-template-target small{display:block;color:var(--ds-text-2)}
@media (min-width:1181px){.iss-screen[data-detail-open] .ctl-template-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
/* The issue beside the list reads from the left beside a fixed label column, as Control 상세 and the entity page read;
   a long compliance item wraps instead of running out of the panel. */
.iss-sections .kv{justify-content:flex-start;gap:var(--ds-space-3)}
.iss-sections .kv>span:first-child{flex:0 0 84px}
.iss-sections .kv>span:last-child{flex:1;text-align:left;min-width:0}
.iss-sections .kv .tag{white-space:normal;margin:0 2px 2px 0}
/* A wide screen read from further away: the severity figures and a row's handling a size up. */
@media (min-width:1700px){.iss-sev-chip{font-size:var(--ds-fs-md);padding:6px 14px}.iss-sev-chip b{font-size:var(--ds-fs-lg)}.iss-screen .iss-status{font-size:var(--ds-fs-md)}}
/* A re-read over what is drawn (portalUi.busy sets aria-busy on the screen's root): the old rows stay, dimmed, under a
   moving line until the answer is drawn. */
:is(#issues-root,#closed-issues-root,#controls-root,#approvals-root)[aria-busy="true"] :is(.ds-card,.ov-metric){opacity:.55;transition:opacity .15s}
:is(#issues-root,#closed-issues-root,#controls-root,#approvals-root)[aria-busy="true"]{position:relative;cursor:progress}
:is(#issues-root,#closed-issues-root,#controls-root,#approvals-root)[aria-busy="true"]::before{content:"";position:absolute;inset:-6px 0 auto;height:3px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--ds-accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:scr-reread 1.1s linear infinite}
@keyframes scr-reread{from{background-position:-40% 0}to{background-position:140% 0}}
@media (prefers-reduced-motion:reduce){:is(#issues-root,#closed-issues-root,#controls-root,#approvals-root)[aria-busy="true"]::before{animation:none;background:var(--ds-accent);opacity:.6}}
/* 무시 규칙: the rules and the form to make one are two cards; a field's help sits under its field, not in its name. */
.su-rules{display:grid;gap:var(--ds-space-4)}
.su-rules>*{margin:0;min-width:0}
.ctl-rule-form{padding:0;min-height:0}
.ctl-rule-fields{--ctl-rule-field-h:37px;padding:var(--ds-space-2) 20px 20px;margin:0}
.ctl-rule-fields label>small{color:var(--ds-text-2);font-size:var(--ds-fs-sm);font-weight:400}
/* 무시 규칙 (ignore-rules-g6-r1): the rows' place alone waits, fails and says it is empty (a frame wraps in the
   shared last-cell nowrap); a narrow screen stacks a rule's facts; the form says what it needs, finds targets by name,
   says the rule in one sentence with what it rejects now, and asks before it is made. */
.table-wrap .ctl-rules-table td.ctl-rules-frame{white-space:normal;padding:var(--ds-space-3)}
.ctl-rules-table td.ctl-rules-frame .ui-frame{margin:0}
.ctl-rules-table td.ctl-rule-act{text-align:right}
.ctl-rule-need{margin-left:4px;color:var(--ds-text-3);font-size:var(--ds-fs-sm);font-weight:400}
.ctl-rule-targets{margin:18px 0 7px;padding:0;border:0;min-width:0}
.ctl-rule-targets legend{float:left;width:100%;padding:0;margin-bottom:9px;font-size:var(--ds-fs-sm);color:var(--muted)}
/* The two choices stand in a box of the selects' own size and line beside them. A radio is drawn in the theme's
   colours (the browser's dark one is a grey fill, the same as a locked one): not chosen a hollow ring, chosen the
   accent's ring and dot, locked faded. */
.ctl-rule-radios{clear:both;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--ds-space-4);min-height:var(--ctl-rule-field-h);padding:4px 12px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-s);background:var(--ds-surface)}
.ctl-rule-targets:disabled .ctl-rule-radios{background:var(--ds-surface-3)}
.ctl-rule-fields label.ctl-rule-choice{flex-direction:row;align-items:center;gap:6px;margin:0;color:var(--ds-text);font-size:var(--ds-fs-sm);cursor:pointer}
.ctl-rule-choice input[type="radio"]{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:0;padding:0;border:1.5px solid var(--ds-text-3);border-radius:50%;background:var(--ds-surface);cursor:inherit}
.ctl-rule-choice input[type="radio"]:checked{border-color:var(--ds-accent);background:radial-gradient(circle closest-side,var(--ds-accent) 0 52%,var(--ds-surface) 58%)}
.ctl-rule-fields label.ctl-rule-choice:has(input:disabled){color:var(--ds-text-3);cursor:not-allowed}
.ctl-rule-choice input[type="radio"]:disabled{opacity:.5}
/* 만료: the time sits beside its choice in the same cell, so 메모 keeps the row's third place either way. */
.ctl-rule-expiry{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0 var(--ds-space-2);min-width:0}
.ctl-rule-expiry>label{flex:1 1 128px;min-width:0}
.ctl-rule-expiry>input{flex:1.5 1 196px;min-width:0;width:auto;height:var(--ctl-rule-field-h);margin:0 0 7px;padding-top:0;padding-bottom:0}
.ctl-rule-picker{display:grid;gap:var(--ds-space-2);padding:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface-2)}
.ctl-rule-find{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) auto;gap:var(--ds-space-2);align-items:end}
.ctl-rule-find>button{min-height:var(--ctl-rule-field-h);margin:0 0 7px}
.ctl-rule-found{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px var(--ds-space-3);max-height:240px;overflow:auto}
.ctl-rule-fields .ctl-rule-found label{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:0;padding:4px 2px;color:var(--ds-text);font-size:var(--ds-fs-sm);cursor:pointer}
.ctl-rule-found input{width:auto;margin:0;align-self:center}
.ctl-rule-found .su-context{flex-basis:100%;padding-left:22px;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.ctl-rule-picked{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2);font-size:var(--ds-fs-sm);color:var(--ds-text)}
.ctl-rule-picked>b{font-weight:600}
.ctl-rule-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 2px 2px 10px;border:1px solid var(--ds-line-strong);border-radius:999px;background:var(--ds-surface);overflow-wrap:anywhere}
.ctl-rule-chip small{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.ctl-rule-chip button{min-width:24px;min-height:24px;padding:0 6px;margin:0;line-height:1}
.ctl-rule-chip[data-rule-chip-still]{padding:2px 10px}
.ctl-rule-state{display:grid;gap:var(--ds-space-2);padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line)}
.ctl-rule-said{display:grid;gap:2px}
.ctl-rule-said[hidden]{display:none}
/* The rule's sentence is the form's own statement: a size over the help, what was chosen bold in the text's colour. */
.ctl-rule-sentence{margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-md);line-height:1.6}
.ctl-rule-sentence b{color:var(--ds-text);font-weight:650}
.ctl-rule-impact{margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.ctl-rule-impact b{color:var(--ds-text);font-weight:600}
.ctl-rule-blocked{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
/* 만들기 전 확인: one frame holds what is asked, the rule, what it rejects now, the memo and the two buttons; the
   fields above it stand as read values, not as greyed-out controls. */
.ctl-rule-confirm{display:grid;gap:var(--ds-space-2);padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-accent);border-radius:var(--ds-radius-s);background:var(--ds-accent-soft);scroll-margin:var(--ds-space-4)}
.ctl-rule-ask{margin:0;color:var(--ds-text);font-size:var(--ds-fs-sm)}
.ctl-rule-memo{display:flex;align-items:baseline;gap:var(--ds-space-2);margin:0;color:var(--ds-text);font-size:var(--ds-fs-sm);overflow-wrap:anywhere}
.ctl-rule-memo>span{flex:none;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.ctl-rule-go{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin-top:var(--ds-space-1)}
.ctl-rule-go>button{margin:0}
.ctl-rule-form[data-rule-confirming] .ctl-rule-fields :is(select,input:not([type="radio"]):not([type="checkbox"])):disabled{background-color:var(--ds-surface-2);background-image:none;border-color:var(--ds-line);color:var(--ds-text);-webkit-text-fill-color:var(--ds-text);opacity:1;font-weight:600;cursor:default}
.ctl-rule-form[data-rule-confirming] .ctl-rule-radios{background:var(--ds-surface-2);border-color:var(--ds-line)}
.ctl-rule-form[data-rule-confirming] label.ctl-rule-choice{cursor:default}
.ctl-rule-form[data-rule-confirming] label.ctl-rule-choice[data-rule-chosen]{color:var(--ds-text);font-weight:600}
.ctl-rule-form[data-rule-confirming] .ctl-rule-choice[data-rule-chosen] input[type="radio"]{opacity:1}
.ctl-rule-fields>.ui-frame{grid-column:1/-1;margin:0}
@media (max-width:900px){.ctl-rule-find{grid-template-columns:1fr}}
/* A wide screen read from further away: the rules, the frames' words and the rule's sentence a size up. */
@media (min-width:1700px){
  .ctl-rules-table :is(td,th){font-size:var(--ds-fs-md)}
  .ctl-rules-table td small{font-size:var(--ds-fs-sm)}
  #ignore-rules-root .su-rules>.inventory-note{font-size:var(--ds-fs-md)}
  .ctl-rule-fields{--ctl-rule-field-h:38px}
  .ctl-rule-fields label,.ctl-rule-targets legend{font-size:var(--ds-fs-sm)}
  .ctl-rule-fields :is(select,input:not([type="radio"]):not([type="checkbox"])),.ctl-rule-fields label.ctl-rule-choice,.ctl-rule-picked{font-size:var(--ds-fs-md)}
  .ctl-rule-sentence{font-size:var(--ds-fs-lg)}
  .ctl-rule-impact,.ctl-rule-ask,.ctl-rule-memo,.ctl-rule-blocked{font-size:var(--ds-fs-md)}
  .ctl-rule-memo>span{font-size:var(--ds-fs-sm)}
}
@media (max-width:640px){
  .table-wrap table.ctl-rules-table{min-width:0}
  .ctl-rules-table thead{display:none}
  .ctl-rules-table tr[data-rule]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--ds-space-3);padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
  .ctl-rules-table tr[data-rule]>td{display:block;padding:0;border:0;text-align:left;white-space:normal}
  .ctl-rules-table tr[data-rule]>td:first-child,.ctl-rules-table tr[data-rule]>td.ctl-rule-act{grid-column:1/-1}
  .ctl-rules-table tr[data-rule]>td[data-label]:not(:first-child)::before{content:attr(data-label) " ";color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
  .ctl-rules-table tr[data-rule] .ctl-inline-form{flex-wrap:wrap;justify-content:flex-start}
  .ctl-rules-table tr[data-rule] .ctl-inline-form input{flex:1 1 100%;min-width:0}
  .ctl-rules-table td.ctl-rules-frame{display:block}
}
/* issues r2: the last column whole at 1440, zero counts neutral, the opened row marked in WebKit too (a tr draws no
   shadow there), the head says severity, handling and verdict apart. */
@media (max-width:1699px){.iss-screen .iss-main :is(th,td){padding-left:var(--ds-space-3);padding-right:var(--ds-space-2)}}
.iss-sev-chip[data-zero] b{color:var(--ds-text-2) !important}
.iss-screen tr.selected>td:first-child{box-shadow:inset 3px 0 0 var(--ds-accent)}
/* Under the title, when the opened issue is not one of the list's rows: why, in a quiet band, and the release of the
   condition that keeps it out (c3.50 U50-6). */
.iss-apart{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--ds-space-2);margin:var(--ds-space-1) 0 0;padding:var(--ds-space-1) var(--ds-space-2);border-radius:var(--ds-radius-s);background:var(--ds-surface-2);color:var(--ds-text-2);font-size:var(--ds-fs-sm);line-height:1.5}
.iss-apart>span{flex:1 1 12em;min-width:0}
.iss-apart>.text-action{padding:0;white-space:nowrap}
.iss-head-marks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3);margin:var(--ds-space-2) 0 0}
.iss-head-marks .tag{margin:0}
.iss-mark-group{display:inline-flex;align-items:center;gap:6px}
.iss-mark-group>small{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.iss-head-marks>.text-action{margin-left:auto}
/* Under the marks, what the issue is about: its target (name, kind, who uses it) and the evidence it was found on. */
.iss-head-what{display:grid;gap:2px;margin:var(--ds-space-2) 0 0;font-size:var(--ds-fs-sm)}
.iss-head-what>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--ds-space-2);min-width:0}
.iss-head-what small{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.iss-head-what>span>small:first-child{flex:0 0 56px}
.iss-head-what>:is([data-issue-remedy],[data-issue-tools]){flex-wrap:nowrap}
/* The status line under the marks (portalUi.detail.status) at the panel's text size, close to the marks it explains. */
.iss-head-what>[data-issue-remedy]>span{flex:1;min-width:0}
/* The tools under the target's name, each kind, state and pin on its own line (a hook's pin as 승인 says it). */
.iss-head-what>[data-issue-tools][hidden]{display:none}
.iss-head-what .iss-tools{flex:1;min-width:0;display:grid;justify-items:start;gap:1px}
.iss-head-what .iss-tools>span{overflow-wrap:anywhere}
.iss-head-what .iss-tools-note{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.iss-head-what .iss-tools>.text-action{padding-left:0;padding-right:0}
.iss-head-what .link-button{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iss-head-what .su-context{margin:0}
.iss-head-what .su-context::before{content:"· "}
[data-issue-work]>.iss-actions{margin:0 0 var(--ds-space-3)}
/* closed-issues · issue-trend g3-r1. The count keeps its place while the list is read or failed; a resolved issue
   that closed because its target left the scope or its Control was switched off is a hollow mark, not the
   confirmed green; a narrow screen stacks a row's facts under its number, each with its column's name. */
.iss-count{min-width:8em;text-align:right;align-self:center;line-height:1}
/* 열린 이슈's toolbar is one line at 1440: the search field gives its width to the five filters, so CSV 내보내기 does not
   stand on a second line of its own above the rows. */
[data-issues-view="issues"] .inv-toolbar input[type=search]{flex-basis:140px;min-width:140px}
.iss-recurred{color:var(--ds-text) !important;font-weight:600}
.iss-status[data-issue-status="resolved"][data-issue-resolution]>i{background:transparent;border:2px solid var(--ds-text-3)}
@media (max-width:640px){
  [data-issues-view] .iss-main table{table-layout:auto}
  [data-issues-view] .iss-main thead{display:none}
  [data-issues-view] .iss-main tr[data-issue-row]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px var(--ds-space-3);padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
  [data-issues-view] .iss-main tr[data-issue-row]>td{display:block;padding:0;border:0;max-width:none;white-space:normal;min-width:0}
  [data-issues-view] .iss-main tr[data-issue-row]>td:is(.iss-id,.iss-control,.iss-target){grid-column:1/-1}
  [data-issues-view] .iss-main tr[data-issue-row]>td[data-label]:not(.iss-control):not(.iss-target)::before{content:attr(data-label) " ";color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
  [data-issues-view] .iss-main tr[data-issue-row]>td.iss-when br{display:none}
  /* The due time and what is left of it share one line there: a dot between them, not "오후 4:416일 남음" (System 390). */
  [data-issues-view] .iss-main tr[data-issue-row]>td.iss-when .iss-due-left::before{content:" · "}
  /* A tile is half the width there: its line wraps instead of ending in … ("허용된 관리 범위 기준" was cut, System 390). */
  .iss-stats .ov-metric>small{white-space:normal}
  [data-issues-view] .inv-toolbar>input[type="search"]{flex-basis:100%}
  .iss-count{min-width:0;text-align:left}
}
@media (min-width:1700px){[data-issues-view] .iss-main :is(td,th){font-size:var(--ds-fs-md)}[data-issues-view] .iss-main td small{font-size:var(--ds-fs-sm)}}
/* 추이: the chart as wide as its card at its written text size, the tiles in one band with their unit. */
.iss-trend-plot{padding:0 20px var(--ds-space-3);overflow:hidden}
.iss-trend-chart{display:block;max-width:100%;height:auto;max-height:none}
.iss-trend-day-hit{fill:transparent;stroke:none}
.iss-trend-card>.ds-card-head>small{color:var(--ds-text-2)}
.iss-trend-quiet{display:grid;justify-items:start;gap:var(--ds-space-2);padding:0 20px 20px}
.iss-trend-quiet>.ui-frame{width:100%;margin:0}
.iss-trend-stats .ov-metric{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name figure" "line figure";align-items:center;column-gap:var(--ds-space-3);padding:10px 14px}
.iss-trend-stats .ov-metric>span{grid-area:name}
.iss-trend-stats .ov-metric>small{grid-area:line}
.iss-trend-stats .ov-metric>strong{grid-area:figure;font-size:28px}
.iss-trend-stats .ov-metric[data-zero]>strong{color:var(--ds-text-2);font-weight:600}
.iss-unit{margin-left:2px;font-family:var(--ds-font);font-size:var(--ds-fs-sm);font-weight:500;color:var(--ds-text-2);letter-spacing:0}
.iss-trend-stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.iss-trend-shape .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.iss-trend-shape .ui-skeleton-tile{height:62px}
/* A narrow screen stacks a field's name over its value (style.css .kv column): the label column's width is not a height. */
@media (max-width:600px){#control-detail-root .kv>span:first-child,.iss-sections .kv>span:first-child{flex:none}}
/* AI 에이전트 › 승인 (approvals-g3-r1): the figures in one band and a one-line head, so the nine waiting rows fit a
   1440x900 screen; the waiting list keeps a tool's devices, last sighting and its decision beside its name; a
   narrow screen stacks them under the name with the decision in view. */
.apr-stats .ov-metric{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name figure" "line figure";align-items:center;column-gap:var(--ds-space-3);padding:10px 14px}
.apr-stats .ov-metric>span{grid-area:name}
.apr-stats .ov-metric>small{grid-area:line}
.apr-stats .ov-metric>strong{grid-area:figure;font-size:28px}
.apr-stats .ov-metric[data-zero]>strong{color:var(--ds-text-2);font-weight:600}
.apr-stats-shape{margin:0 0 var(--ds-space-4)}
.apr-stats-shape .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.apr-stats-shape .ui-skeleton-tile{height:62px}
.apr-loading-rows{padding:0 20px 20px}
.apr-loading-rows .ui-skeleton-row{height:44px}
.apr-head{margin:0 0 var(--ds-space-3)}
.apr-head>.inventory-note{margin:0}
.apr-head>button{flex:none;white-space:nowrap}
.apr-screen .apr-card td{padding-top:6px;padding-bottom:6px;line-height:1.4}
table.apr-waiting{table-layout:fixed}
/* A waiting tool is read across: its name, on how many devices, when last seen -- side by side, not a wide blank
   between the name and its figures -- and the decision at the row's end takes what is left. */
table.apr-waiting th:first-child{width:36%}
table.apr-waiting th:nth-child(2){width:132px}
table.apr-waiting th:nth-child(3){width:200px;padding-left:var(--ds-space-5)}
table.apr-waiting td:nth-child(3){padding-left:var(--ds-space-5)}
table.apr-waiting th.apr-acts{text-align:right}
table.apr-waiting td.ctl-num{font-weight:600}
/* Beside an open decision the waiting list has half the width: its columns draw in so every row's 결정 stays in
   view (at 1200-1366 the table kept its full width and the buttons stood 26-89px past the card's edge, behind a
   sideways scroll). From 1440 it fits as it is. */
@media (min-width:1181px) and (max-width:1439px){
  .apr-screen[data-detail-open] .apr-card table.apr-waiting{min-width:0}
  .apr-screen[data-detail-open] table.apr-waiting th:first-child{width:auto}
  .apr-screen[data-detail-open] table.apr-waiting th:nth-child(2){width:88px}
  .apr-screen[data-detail-open] table.apr-waiting th:nth-child(3){width:140px}
  .apr-screen[data-detail-open] table.apr-waiting :is(th,td):nth-child(3){padding-left:var(--ds-space-3)}
  .apr-screen[data-detail-open] table.apr-waiting th.apr-acts{width:100px}
  /* A name that wraps there wraps at its hyphen (WebKit under keep-all cut mysql-communit|y at the edge). */
  .apr-screen[data-detail-open] table.apr-waiting .apr-tool b{word-break:normal}
}
.apr-unit{margin-left:2px;color:var(--ds-text-2);font-family:var(--ds-font);font-size:var(--ds-fs-sm)}
[data-approval-error]>.ui-frame{margin:0}
@media (max-width:640px){
  .apr-screen .apr-card table{min-width:0}
  table.apr-waiting thead{display:none}
  table.apr-waiting,table.apr-waiting tbody{display:block;width:100%}
  table.apr-waiting tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--ds-space-3);align-items:center;padding:var(--ds-space-2) var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
  table.apr-waiting td{display:block;padding:0;border:0;text-align:left;max-width:none;white-space:normal}
  table.apr-waiting td.apr-tool{grid-column:1/-1}
  table.apr-waiting td[data-label]{grid-column:1}
  table.apr-waiting td[data-label]::before{content:attr(data-label) " ";color:var(--ds-text-2);font-size:var(--ds-fs-sm);font-family:var(--ds-font)}
  table.apr-waiting td.apr-acts{grid-column:2;grid-row:2 / span 2;align-self:center}
}
@media (min-width:1700px){.apr-screen .apr-card :is(td,th){font-size:var(--ds-fs-md)}.apr-screen .apr-card td small{font-size:var(--ds-fs-sm)}}
/* g3-r2 (approvals · closed-issues · issue-trend): what the review's second round left.
   승인: the order's second key is a quieter mark; an empty list sits in its card as the other does; a decision's reason
   alone reads as its purpose would; a hook approved by name only says so in words under its state, not as a chip. */
.iss-screen .iss-sort-mark.apr-sort-next{color:var(--ds-text-3);font-weight:400}
.apr-card{min-height:0}
.apr-card>.apr-empty{padding:0 20px 20px}
.apr-empty>.ui-frame{margin:0}
.apr-why>.apr-reason{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.apr-state .apr-unpinned{display:inline;color:var(--ds-unknown-text);font-size:var(--ds-fs-sm);white-space:normal;overflow-wrap:normal}
.apr-screen .apr-card th.apr-grant{white-space:normal}
/* 해소·거절: 내 담당 on the toolbar's line; a narrow screen gives the verdict and why it closed the row's whole width. */
.iss-screen .inv-toolbar>.iss-mine{margin:0}
.iss-screen .iss-mine>input{margin:0;flex:none}
[data-issues-view] td small[data-issue-closed-how]{color:var(--ds-text-2);white-space:nowrap}
@media (max-width:640px){
  [data-issues-view="closed-issues"] .iss-main tr[data-issue-row]>td[data-label="Control 판정"]{grid-column:1/-1}
  [data-issues-view] .iss-main tr[data-issue-row]>td{word-break:keep-all}
}
/* 추이: a narrow screen keeps the five figures in three short rows so the chart starts in the first screen; the
   loading shape is the read screen's; a wide screen reads the chart's scale and the days a size up. */
.iss-trend-wait{padding-bottom:20px}
.iss-trend-card{min-height:0}
@media (max-width:640px){
  .iss-trend-stats,.iss-trend-shape .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-space-2)}
  .iss-trend-stats .ov-metric:first-child,.iss-trend-shape .ui-skeleton-tile:first-child{grid-column:1/-1}
  .iss-trend-stats .ov-metric{padding:8px 12px}
  .iss-trend-stats .ov-metric>small{display:none}
  .iss-trend-stats .ov-metric>strong{font-size:22px}
  .iss-trend-shape .ui-skeleton-tile{height:42px}
}
@media (min-width:1700px){
  .iss-trend-chart text{font-size:var(--ds-fs-md)}
  .iss-trend-card :is(td,th){font-size:var(--ds-fs-md)}
  .iss-trend-stats .ov-metric>strong{font-size:34px}
}

/* Waiting on a person is not 판단 불가: the dashed amber stays the mark of what is not known, and a count or a mark of
   what waits for a decision (결정 대기, 승인 대기) is the shared caution tone (.tag.caution, style.css) with a whole line. */
:is(.apr-stats,.iap-stats) .ov-metric[data-state="pending"]{border:1.5px solid var(--ds-caution);background:var(--ds-caution-soft)}
:is(.apr-stats,.iap-stats) .ov-metric[data-state="pending"] strong{color:var(--ds-caution-text)}
/* A template card's 이미 만든 Control line stands on one line across a row of cards, right above its action. */
.ctl-template>.ctl-template-made{margin-top:auto}
.ctl-template>.ctl-template-made+.text-action{margin-top:0}
/* 승인 › 결정 (QA-03, P2-22): a field says beside itself what it still needs, an exception marks its purpose and end
   as required, further help stands behind ⓘ, and one line over the button says what recording changes. */
.apr-need{margin-left:4px;color:var(--ds-text-3);font-size:var(--ds-fs-sm);font-weight:400}
/* The help mark is the Portal's shared one (.help-trigger, opened on hover, focus and a press -- app.js): here only
   its size beside a line of text. */
.apr-info{width:18px;height:18px;min-width:18px;margin-left:4px;font-family:var(--ds-font);font-style:normal}
.apr-field-problem{display:block;margin-top:4px;color:var(--ds-danger-text);font-size:var(--ds-fs-sm)}
.apr-panel :is(input,select)[aria-invalid="true"]{border-color:var(--ds-danger)}
.apr-summary{margin:var(--ds-space-3) 0 var(--ds-space-2);padding:var(--ds-space-2) var(--ds-space-3);border-left:3px solid var(--ds-line-strong,var(--ds-line));background:var(--ds-surface-2,transparent);font-size:var(--ds-fs-md);color:var(--ds-text);overflow-wrap:anywhere}
/* 이슈·Control (P1-08, P2-20·21): the ⓘ beside a line holds what is not needed to read it (as .apr-info). */
.iss-info,.ctl-info{width:18px;height:18px;min-width:18px;margin-left:4px;font-family:var(--ds-font);font-style:normal}
/* 승인 › 결정 (P1-08): what to do next stands under a decision's 적용 상태 mark, each on its own line. */
.apr-force>.tag{display:inline-block}
.apr-next{display:block;margin:2px 0 var(--ds-space-1);color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.apr-next>.apr-keep{white-space:nowrap}
/* P2-12: what a person reads as a line is 14px on every width (it was 14px only from 1700px, 13px below), and what
   stands beside it -- a unit, a mark, a second line under a name -- is 13px; nothing on these screens is 12px. */
[data-issues-view] .iss-main :is(td,th),#controls-root .ctl-card :is(td,th),#control-detail-root .ctl-card :is(td,th),.apr-screen .apr-card :is(td,th),.ctl-rules-table :is(td,th){font-size:var(--ds-fs-md)}
[data-issues-view] .iss-main td small,#controls-root .ctl-row-line,.apr-screen .apr-card td small,.ctl-rules-table td small{font-size:var(--ds-fs-sm)}
.iss-status,.ctl-template-about,.ctl-template-desc,.ctl-rule-impact,.ctl-rule-ask,.ctl-rule-memo,.ctl-rule-picked,.iss-head-what,.iss-loading>p,.apr-history-facts,.apr-panel fieldset label,.ctl-rule-fields label.ctl-rule-choice,.apr-field-problem,.iss-sections>section>h4{font-size:var(--ds-fs-md)}
:is(.iss-screen,.apr-screen,.ctl-screen,#controls-root,#control-detail-root,#ignore-rules-root) .inventory-note{font-size:var(--ds-fs-md)}
/* A tool's name and a date stay on one line in the decided list; the four closing reasons' tiles stand in one row. */
.apr-screen .apr-card td.apr-tool>b{white-space:nowrap}
.iss-trend-stats[data-trend-closed-split="true"]{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
/* Seven in a row leave a tile about 150px: its name, figure and line stand one under another there, so the name is
   not broken a word a line beside the figure (10-06 consistency actual, 1440). */
.iss-trend-stats[data-trend-closed-split="true"] .ov-metric{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "figure" "line";align-content:start;row-gap:2px}
.iss-trend-stats[data-trend-closed-split="true"] .ov-metric>strong{justify-self:start}
/* Beside an open decision the 적용 상태 column is not drawn: a decision not yet in force says so under its state. */
.apr-applied-brief{display:none}
.apr-screen[data-detail-open] .apr-state>.apr-applied-brief{display:block;margin-top:2px;color:var(--ds-caution-text);font-size:var(--ds-fs-sm);white-space:normal}
/* At phone width two tiles a row left each name and line a column beside a wide figure, wrapped to four lines (rfqa
   c3.86 at 390): one tile a row keeps them on one line. */
@media (max-width:480px){:is(.ctl-stats,.ctl-totals,.apr-stats),:is(.ctl-totals-shape,.apr-stats-shape) .ui-skeleton[data-skeleton="tiles"]{grid-template-columns:1fr}}
/* 관리 범위의 기기 찾기 (P2-14, controls-console.js scopeFindHtml): a box beside a scope list (an ignore rule's, a
   template's, the Gateway policy's), the devices found in a list under it while it holds the focus. */
.ctl-scope-find{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;font-size:var(--ds-fs-xs);color:var(--muted)}
.ctl-scope-find>label{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 6px;align-items:baseline;margin:0}
.ctl-scope-find>input[data-scope-find-text][type="search"]{box-sizing:border-box;width:100%;margin:0;padding:7px 10px}
.ctl-scope-chosen{color:var(--muted);font-size:var(--ds-fs-xs);white-space:nowrap}
.ctl-scope-found{display:none;position:absolute;top:100%;left:0;z-index:5;box-sizing:border-box;margin-top:4px;width:max-content;min-width:100%;max-width:min(440px,calc(100vw - 32px));max-height:320px;overflow:auto;padding:4px;background:var(--ds-surface);border:1px solid var(--ds-line-strong);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.14)}
.ctl-scope-find:focus-within>.ctl-scope-found:not(:empty){display:block}
.ctl-scope-found>button[role="option"]{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;width:100%;height:auto;margin:0;padding:7px 8px;background:transparent;color:var(--text);border:0;border-radius:6px;box-shadow:none;font-size:var(--ds-fs-sm);font-weight:500;text-align:left}
.ctl-scope-found>button[role="option"]:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.ctl-scope-found>button[aria-selected="true"]{background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
.ctl-scope-found>button[role="option"] small{flex:none;color:var(--muted);font-size:var(--ds-fs-xs);font-weight:400}
.ctl-scope-head{display:block;padding:6px 8px;color:var(--muted);font-size:var(--ds-fs-xs)}
/* The graph's refusal of the words typed stands under the box, not in its list (which closes when the box is left). */
.ctl-scope-refused{color:var(--ds-danger-text);font-size:var(--ds-fs-xs)}
.ctl-scope-refused:empty{display:none}
[data-page="control"] .toolbar-row>#cp-scope-find{flex:0 1 260px;min-width:160px}
.ctl-template-form>.ctl-scope-find{flex:0 1 240px}

/* ---- Control › the page's headline over the list and the chosen Control (controls-console.js headHtml) ---- */
.ctrl-head:empty{display:none}
.ctrl-head>.ds-sub-line:last-child{margin-bottom:var(--sp-4)}
/* 예외 규칙: the table's head and what stands under it are one card (.ctrl-rules-card); the table inside draws no box of its own. */
.ctrl-rules-card{padding:0}
.ctrl-page .ctrl-rules-card>table.ctrl-table.ctrl-rules-table{border:0;border-radius:0}
.ctrl-rules-card>.ctrl-rules-none{padding:var(--sp-2) var(--sp-4) var(--sp-4)}

/* ---- 이슈 · 종료 · 추이: the headline with its quiet line under it, the view switch at the head's right ---- */
.ra5-head>.ra5-title{min-width:0}
.ra5-head>.ra5-views{flex:none}
/* A target cell is two lines: its name, then its kind and who it is on one quiet line (the context no third line). */
.ra5-tr>.ra5-c1>.lx-sub>.su-context{display:inline;margin:0;font-size:inherit}
.ra5-tr>.ra5-c1>.lx-sub>.su-context::before{content:" · "}
/* 이슈 추이: the chart's legend keeps a gap between its entries, each sample beside its own word. */
div.lx-row.lx-sub[data-trend-legend]{flex-wrap:wrap;gap:var(--sp-1) var(--sp-4)}
div.lx-row.lx-sub[data-trend-legend]>span{display:inline-flex;align-items:center;gap:var(--sp-1)}