/* LLM Gateway (t-mdes-screens-gateway): 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. */

/* What every Gateway screen opens with: the period, whose company it is, then what the answer covers. */
[data-gwc-toolbar]{margin-bottom:var(--ds-space-2)!important}
[data-gwc-toolbar]>small{color:var(--ds-text-2);font-size:var(--ds-fs-xs);margin-left:auto}
[data-gwc-envelope],[data-gwc-demo]{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1) var(--ds-space-2);margin:0 0 var(--ds-space-2);font-size:var(--ds-fs-xs);color:var(--ds-text-2)}
[data-gwc-envelope] small,[data-gwc-demo] small{font-size:var(--ds-fs-xs)}
/* The collection's state as words of a first line (envelopeLine inline): after the title on the same line, at the
   size of the line's small words, never a line of its own over the body (T19-4 B 52·185). */
.gwc-first .lx-lede [data-gwc-envelope]{display:inline-flex;margin:0 0 0 var(--ds-space-2);vertical-align:middle;font-weight:500;letter-spacing:0;line-height:1.5}
[data-gwc-demo]{padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface-2)}

/* Figures in groups of one subject. */
/* A figure's unit is read with it but does not weigh as much as the figure. */
.ov-metric strong .gw-unit{margin-left:2px;font-size:.55em;font-weight:600;letter-spacing:0}
.ov-metric small .gw-unit{font-size:inherit}
/* 개요 while it reads: the placeholder stands in the groups and cards of the answer (gw-console-overview.js waiting). */
[data-gwc-waiting]{gap:0}
[data-gwc-waiting] td .ui-skeleton-row{height:18px}
[data-gwc-waiting] .gw-ops-figures{margin-top:var(--ds-space-2)}
[data-gwc-waiting] .gw-panel .ui-skeleton-row{height:22px;margin-top:0;margin-bottom:var(--ds-space-3)}
[data-gwc-overview]>.ui-skeleton[data-skeleton="tiles"],[data-gwc-cost]>.ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 비용: a kind with no record is said quietly in its tile, never a big US$0.00. */
.ov-metric[data-gwc-amount="none"] strong{font-size:var(--ds-fs-lg);font-weight:600;color:var(--ds-text-2)}
/* A kind with no record is a quiet cell beside the kinds that have an amount: no fill, a dashed edge. */
.ov-metric[data-gwc-amount="none"]{background:transparent;border-style:dashed;box-shadow:none}
@media(max-width:1100px){:is([data-gwc-overview],[data-gwc-cost])>.ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 운영 상태: five figures on one row in one weight, then two even rows of cards; the placeholder in that shape. */
.gw-ops-figures{grid-template-columns:repeat(5,minmax(0,1fr));margin:var(--ds-space-3) 0 var(--ds-space-4)}
@media(max-width:1100px){.gw-ops-figures{grid-template-columns:repeat(3,minmax(0,1fr))}}
[data-gwc-ops]>.ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){[data-gwc-ops]>.ui-skeleton[data-skeleton="tiles"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 운영 상태's five figures carry small units, so two fit a phone's row at a smaller size (gw-ops-g6-r2: one a row left
   half the screen empty and three of five on the first screen). */
@media(max-width:520px){.gw-ops-figures .ov-metric strong{font-size:26px}}

/* A panel of the Gateway screens: its own height, never stretched to its neighbour's. */
.dashboard-grid:has(>.gw-panel){align-items:start}
.gw-panel>.section-title{margin-bottom:var(--ds-space-2)}
.gw-panel .empty{padding:var(--ds-space-4) 0;text-align:left}

/* Ranked rows (name, share of the largest, count) and plain rows (name, mark, count). */
.gw-rank,.gw-rows,.gw-lines{list-style:none;margin:0;padding:0}
.gw-rank li,.gw-rows li{display:grid;align-items:center;gap:var(--ds-space-3);padding:var(--ds-space-2) 0;border-bottom:1px solid var(--ds-line);font-size:var(--ds-fs-sm)}
/* The count column keeps a floor so every row's bar starts on one line whatever its number's width. */
.gw-rank li{grid-template-columns:minmax(0,1fr) minmax(60px,30%) minmax(7ch,max-content)}
/* On a narrow screen the reason chip and the count took the row and left a tool's name 47px, a few letters a line
   (rh·rfqa c3.104 개요 at 390): there the name has a line of its own and the chip and the count stand under it. */
.gw-rank li:last-child,.gw-rows li:last-child{border-bottom:0}
.gw-rank-name{min-width:0;overflow-wrap:anywhere}
.gw-rank-name small{color:var(--ds-text-2);font-size:var(--ds-fs-xs);margin-left:var(--ds-space-1)}
.gw-rank li>b,.gw-rows li>b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* A ranked row's count stands at the row's end with or without a bar (with none it stood in the bar's column, a gap
   short of the edge the next card's counts end on), and a name that is a button starts where a plain name does. */
.gw-rank li>b{grid-column:3}
.gw-rank-name>.text-action{padding:0;text-align:left}
/* A key or app with no name is its ID: kept whole on a line where it fits, and drawn apart from the names beside it. */
[data-gwc-unmanaged="some"] li{padding-left:var(--ds-space-3);box-shadow:inset 3px 0 0 var(--ds-danger)}
.gw-more{margin-top:var(--ds-space-1);border-top:1px solid var(--ds-line)}
.gw-more>summary{padding:var(--ds-space-2) 0;font-size:var(--ds-fs-xs);font-weight:600;color:var(--ds-accent-text);cursor:pointer}

/* 비용 (cost-g7-r3): the kinds that have an amount take the row and a kind with no record stands beside them at
   about half their width (two empty dashed tiles filled the right half of the row); kinds all alike share it evenly. */
[data-gwc-cost] [data-gwc-totals]{display:flex;flex-wrap:wrap}
[data-gwc-cost] [data-gwc-totals]>.ov-metric{flex:2 1 220px;width:auto}
[data-gwc-cost] [data-gwc-totals]>.ov-metric[data-gwc-amount="none"]{flex:1 1 150px}
/* A total's name line is one height with or without its 추정·가정 mark, so the four figures stand on one line
   (cost-g7-r3 a); the tiles drawn while it waits are the height of the tiles that come (c). */
[data-gwc-cost] .ov-metric>span:first-child{display:flex;align-items:center;gap:var(--ds-space-1);min-height:24px}
[data-gwc-cost] .ui-skeleton[data-skeleton="tiles"] .ui-skeleton-tile,[data-gwc-cost] .ui-skeleton .gw-figure-group .ui-skeleton-tile{height:134px}
/* 비용's groups on a phone (U2, 390): a row is a card inside the screen instead of a table gone on sideways -- its name
   over it, whole (a long name breaks anywhere), then each kind and 사람·시스템 a line, the column's name (the cell's
   data-label) at the left and the figure at the right, then its 요청 기록. The heads stay for a screen reader; the order
   is the list over the table (gw-cost-order). The box to find a group takes its line. */
@media(max-width:760px){
  [data-gwc-cost] table[data-gwc-cost-table]{min-width:0}
  [data-gwc-cost] table[data-gwc-cost-table] :is(tbody,tr,td){display:block;width:auto}
  [data-gwc-cost] table[data-gwc-cost-table] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-gwc-cost] table[data-gwc-cost-table] tr[data-testid="gw-cost-group"]{padding:var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
  [data-gwc-cost] table[data-gwc-cost-table] tr[data-testid="gw-cost-group"]:last-child{border-bottom:0}
  [data-gwc-cost] table[data-gwc-cost-table] td{max-width:none;padding:3px 0;border:0}
  [data-gwc-cost] table[data-gwc-cost-table] td:first-child{padding-bottom:var(--ds-space-1);font-size:var(--ds-fs-sm);font-weight:600;overflow-wrap:anywhere}
  [data-gwc-cost] table[data-gwc-cost-table] td[data-label]{display:flow-root}
  [data-gwc-cost] table[data-gwc-cost-table] td[data-label]::before{content:attr(data-label);float:left;margin-right:var(--ds-space-2);color:var(--ds-text-2);font-size:var(--ds-fs-xs);font-variant-numeric:normal}
  
  [data-gwc-cost] [data-gwc-cost-tools] label:has(>input[type="search"]){flex:1 1 100%}
  [data-gwc-cost] [data-gwc-cost-tools] input[type="search"]{flex:1 1 auto;min-width:0;margin:0}
}

/* Requests the relay did not carry (telemetry.relay_closed): under a key's refusals on a line of its own; in 개요 a
   why with its count is one piece, its dot at the piece's head. */
[data-gwc-relay-closed-why]{display:inline-block}
[data-gwc-reconciled="matches"]::before{content:"✓ ";color:var(--ds-ok-text);font-weight:700}
.gw-panel{min-height:0}

/* The note starts where the lines over it start (it stood 12px in, with no box around it to stand in). */
[data-gwc-no-body]{margin:0 0 var(--ds-space-3);padding:var(--ds-space-2) 0}


/* One request is one row of the list's columns: its decision and reason, when, whose key and application, the
   model asked and run, the policy -- each at the same place on every row -- and what else is known as short facts
   under them. The columns are named once above the rows. */
/* The list's columns, and the same ones for the names' row drawn while it is read (outside the list). */
/* 키·앱 holds two names (a key and its application): it takes the widest share, where it was the narrowest and
   cut both (pop-support… 앱 … on the c3.45 copy at 1440). */
.gw-req-list,[data-skeleton="requests"]{--gw-req-cols:minmax(150px,1.1fr) 158px minmax(190px,2.6fr) minmax(118px,.8fr) minmax(130px,1fr)}
/* Where the list is wide enough for it (1440 and up) 모델 holds a model's whole name on one line: claude-sonnet-5-5-cli
   broke after a hyphen at 118px (review 10-06). Its floor is that name's width, taken from 키·앱's share; a narrower
   screen keeps the earlier columns, whose floors already fill it. */
@media(min-width:1400px){.gw-req-list,[data-skeleton="requests"]{--gw-req-cols:minmax(150px,1.1fr) 158px minmax(190px,2.4fr) minmax(164px,.9fr) minmax(130px,1fr)}}
/* Where the rows' letters are a size larger 모델 takes a wider floor. */
@media(min-width:1700px){.gw-req-list,[data-skeleton="requests"]{--gw-req-cols:minmax(150px,1.1fr) 158px minmax(190px,2.4fr) minmax(190px,.9fr) minmax(130px,1fr)}}
.gw-req-policy small{color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
/* A fact under a row is its name, then what it is (user review 10-06: a detail's facts stand each under a name, not
   as one sentence); the raw values -- IDs, a revision's code -- are whole under the shared closed fold, one a line. */
.gw-tech{display:grid;gap:2px;margin:0}
.gw-tech>div{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);column-gap:var(--ds-space-3);align-items:baseline}
.gw-tech dt{color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.gw-tech dd{min-width:0;margin:0}
.gw-tech code{display:inline;padding:0;background:none;font-size:var(--ds-fs-sm);overflow-wrap:anywhere;white-space:normal}
@media(max-width:640px){.gw-tech>div{grid-template-columns:minmax(0,1fr)}}
/* A separator dot of a line of parts (each module's DOT: ' <span class="gw-dot">· </span>') keeps to the part after
   it -- the dot and its space do not wrap, so a line breaks before the dot and never ends on it; the words and their
   spaces read as before (screen-consistency c3.102: 소유자 확인됨 ·, 도구 결과 신호 6 ·, 실행 권한 종료 · at 390 and 1440).
   The box is an inline box, so a line laid as a flex row holds its sentence in one element (the demo line, a form's
   label): a dot box that is a flex item of its own stands apart from the words on either side. */
.gw-dot{white-space:nowrap}
/* A chip or a button right after a dot is a box of its own in the line, and WebKit breaks between the dot's box and it:
   the two are one piece that does not break (gw-console-common dotted), the box's own words wrap as they did and it is
   narrower than the line by the dot's room (the shared .ui-keep rule, for this sheet's '· ' dot). */
.gw-keep{white-space:nowrap}
:where(.gw-keep > :not(.gw-dot)){white-space:normal;max-width:calc(100% - 1em)}
/* A fold that follows a dot in its line opens as a block under the line: the dot before it is not left ending the line. */
.gw-session{display:block;padding:var(--ds-space-2) var(--ds-space-3)}
/* A key and its application share one line, each cut with an ellipsis inside its own button (a button is one box:
   its parent's ellipsis never reaches the words in it -- at 390 the name was cut bare, gw-requests-g10-r3 7). */
/* The key and its application share the cell's line when both fit; when they do not the application takes the next
   line whole, never an ellipsis in place of its name (on the c3.47 copy the cell read 'demo-app… 앱 …'). */
.gw-req-key{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The key and its application give way alike and the application keeps room for the start of its name: it shrank
   twice as fast, so beside a long key name it was cut to its label alone ('앱…'). */
[data-skeleton="requests"] .ui-skeleton-row{height:36px}
/* A failed read stands as far under the fields as the list does. */
[data-gwc-rows]>[data-gwc-failed]+*{margin-top:var(--ds-space-3)}
/* No row to show: the frame's sentence is the plain empty line's words, in the frame's own type. */
.gw-none p.empty{margin:0;padding:0;border:0;background:transparent;text-align:left;color:var(--ds-text)}
/* Panels that answer one another (운영 상태) keep one height per row. */
.gw-panel .kv:last-of-type{border-bottom:0}
/* A record's last pull stays in one piece beside its state: the words and their instant are not parted. */
.gw-panel .kv .gwc-pulled{display:inline-block;white-space:nowrap}

/* A cell of two facts: the one read first, the one that qualifies it under it. */
[data-gwc-unknown-keys="some"] li{padding-left:var(--ds-space-3);box-shadow:inset 3px 0 0 var(--ds-danger)}
/* A key's row is two lines tall: its two routes sit side by side, and the state cell says the Gateway's report in one line. */
[data-gwc-keys] td[data-gwc-key-state]>small{white-space:nowrap}
[data-gwc-keys] :is(th,td){padding-left:8px;padding-right:8px}
[data-gwc-keys] td[data-gwc-owner]{max-width:200px}
/* On a narrow screen the table scrolls sideways: said above it, where the cut column is. */
.gw-none{display:grid;gap:var(--ds-space-2);justify-items:start}
.gw-none p{margin:0}
/* The keys' placeholder rows are as tall as a key's row, so the list does not jump when it arrives. */
[data-gwc-loading] .ui-skeleton-row{height:62px}

/* Long lists of the key and run panels: a row's actions in one row, and the list scrolls inside its panel so what
   follows it (forms, the trace) stays in reach. */
#cp-keys-panel .row{align-items:center;padding:var(--ds-space-2) var(--ds-space-2);gap:var(--ds-space-2) var(--ds-space-4)}
#cp-keys-panel .row>div:first-child{min-width:0;overflow-wrap:anywhere}
/* A key's row is a detail (user review 10-06): its name, its state and why on one line, its facts under their names,
   its references under the shared closed fold; the row's buttons stand at its head. */
#cp-keys .cp-key{align-items:flex-start}
#cp-keys .cp-key>div:first-child{flex:1 1 0}
#cp-keys .cp-key .detail-status{margin:var(--ds-space-1) 0 var(--ds-space-2);font-size:var(--ds-fs-md)}
#cp-keys .cp-key .detail-facts{margin:0}
#cp-keys .cp-key .detail-fact>dd{font-size:var(--ds-fs-md)}
/* On a narrow screen a row's buttons took the width they wanted (up to 300px) and left its words a 19px strip, a
   letter a line (rh c3.104 control at 390, both engines): there the buttons go under the words, from the left. */
@media(max-width:640px){#cp-keys-panel .row{grid-template-columns:minmax(0,1fr)}
  }
#cp-keys{max-height:min(560px,70vh);overflow-y:auto;border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);padding:0 var(--ds-space-3);margin:var(--ds-space-2) 0 var(--ds-space-3);background:var(--ds-surface)}
/* 키 찾기 stays at the top of the key window while it scrolls; a row the words do not hold is set aside (R2-6). */
#cp-keys [data-cp-keys-miss]{display:none}
#cp-keys:empty{display:none}
/* A list in a window of its own ends in a fade, not in a row cut by the window's edge: what is under it is reached by
   scrolling the window (visual review VA-1 / V-11: the last row read as broken). At the list's end the fade lies on
   the blank step under the last row. */
:is(#cp-keys,.gw-scroll-list)::after{content:"";position:sticky;bottom:0;display:block;height:var(--ds-space-5);margin:0 calc(-1*var(--ds-space-3));background:linear-gradient(to bottom,transparent,var(--ds-surface));pointer-events:none}

/* A form row on any Gateway view: fields side by side, each under its label, buttons on the field baseline. */
:is([data-page="connections"],[data-page="control"],[data-page="gw-limits"],[data-page="gw-guardrails"],[data-page="gw-mcp"],[data-page="gw-endpoint"],[data-page="gw-requests"],[data-page="cost"]) .toolbar-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ds-space-2) var(--ds-space-3);margin:var(--ds-space-2) 0 var(--ds-space-3)}
:is([data-page="connections"],[data-page="control"],[data-page="gw-limits"],[data-page="gw-guardrails"],[data-page="gw-mcp"],[data-page="gw-endpoint"],[data-page="gw-requests"],[data-page="cost"]) .toolbar-row>label{display:flex;flex-direction:column;gap:var(--ds-space-1);flex:0 1 220px;min-width:140px;margin:0}
:is([data-page="connections"],[data-page="control"],[data-page="gw-limits"],[data-page="gw-guardrails"],[data-page="gw-mcp"],[data-page="gw-endpoint"],[data-page="gw-requests"],[data-page="cost"]) .toolbar-row>label>:is(input:not([type="checkbox"]):not([type="radio"]),select){width:100%;margin:0;padding:7px 10px}
:is([data-page="connections"],[data-page="control"],[data-page="gw-limits"],[data-page="gw-guardrails"],[data-page="gw-mcp"],[data-page="gw-endpoint"],[data-page="gw-requests"],[data-page="cost"]) .toolbar-row>label:has(>input[type="checkbox"]){flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--ds-space-2);min-width:0;padding:8px 0;font-size:var(--ds-fs-sm);color:var(--ds-text)}
:is([data-page="connections"],[data-page="control"],[data-page="gw-limits"],[data-page="gw-guardrails"],[data-page="gw-mcp"],[data-page="gw-endpoint"],[data-page="gw-requests"],[data-page="cost"]) .toolbar-row>label>input[type="checkbox"]{flex:none;width:auto;margin:0}
/* A long checkbox label (the tool argument checks) wraps inside the row instead of widening the page at 390. */
[data-page="control"] .toolbar-row>label:has(>input[type="checkbox"]){flex:0 1 auto;max-width:100%;overflow-wrap:anywhere}
/* 허용 도구 동작 (정책 편집): one action a row with its six values at the same six places down the list, the
   six names once over it (the first stored action and the new one keep theirs). A row's sentence stays where it
   says what the boxes cannot (a command read out of its code, an endpoint grant); one that only repeats the six
   values is left to them. Under 1101px a row keeps wrapping, each box under its name. */
@media(min-width:1101px){
  [data-cp-mcp-actions]>[data-cp-mcp-row]{display:grid;grid-template-columns:1.4fr 1.3fr 1fr 1.6fr 1.2fr 1.5fr 7.5em;align-items:end;gap:var(--ds-space-1) var(--ds-space-2);margin:0;padding:var(--ds-space-1) 0}
  [data-cp-mcp-actions]>[data-cp-mcp-row]>:is(small,b){grid-column:1/-1;min-width:0;overflow-wrap:anywhere}
  [data-cp-mcp-actions]>[data-cp-mcp-row]>label{min-width:0}
  [data-cp-mcp-actions]>[data-cp-mcp-row]>label>input:not([type="checkbox"]){font-size:var(--ds-fs-sm)}
  [data-cp-mcp-actions]>[data-cp-mcp-row]:not([data-cp-mcp-row="0"],[data-cp-mcp-row="new"],[data-cp-mcp-row="endpoint"])>label:not(:has(>input[type="checkbox"])){gap:0;font-size:0}
  [data-cp-mcp-actions]>[data-cp-mcp-row]>small[data-cp-mcp-kind="exact"]{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  [data-cp-mcp-actions]>[data-cp-mcp-row]:is([data-cp-mcp-row="new"],[data-cp-mcp-row="endpoint"]){margin-top:var(--ds-space-3);padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line)}
  [data-cp-mcp-actions]>[data-cp-mcp-row="endpoint"]>label:first-of-type{grid-column:span 2}
}
/* 정책 편집: a list a person reads whole has the row's width (허용 모델 leads its row, 허용 MCP 별칭 takes what its
   row has left), and a note among the boxes stands on a line of its own with its button under it, not as a word in
   the sentence. */
#cp-policy-form .toolbar-row>label:has(>#cp-f-models){order:-1;flex:1 1 100%;max-width:none}
#cp-policy-form textarea#cp-f-models{display:block;width:100%;min-height:0;resize:vertical;line-height:1.5;field-sizing:content;max-height:12lh}
/* 변경 사유 is a sentence: room for one beside 초안 저장, not a number box's width. */
#cp-policy-form .toolbar-row>label:has(>#cp-f-reason){flex:1 1 360px;max-width:560px}
#cp-policy-form .toolbar-row>label:has(>#cp-f-aliases){flex:1 1 420px}
#cp-policy-form .toolbar-row>p.inventory-note{flex:1 1 100%;margin:0}
#cp-policy-form .inventory-note>button{display:block;margin-top:var(--ds-space-2)}
/* 컴파일 결과: what was not compiled is a quiet list like the lines over it, not the browser's bullets. */
[data-cp-plan] [data-cp-uncompiled]{list-style:none;margin:0 0 var(--ds-space-2);padding:0;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
/* 버전: who wrote a version stays in its line (an account the member list does not name is a small of its own). */
#cp-policy-versions .row small>small{display:inline}
#cp-policy-versions .gw-more>summary{padding:var(--ds-space-3) 0}
/* The Router readiness row holds a table digest with no break in it: its text column may shrink and break anywhere. */
#cp-router-readiness .row{grid-template-columns:minmax(0,1fr) auto}
#cp-router-readiness .row>*{min-width:0;overflow-wrap:anywhere}
/* 허용 모델·경로 (#control): the scope select shows its whole choice; while the scopes are read the controls wait;
   a read that failed looks like one and has its own 다시 조회; the policy in force is a headline (its version and
   the stage it reached) over one setting a line; the step strip says each step's present state. */
[data-page="control"] .toolbar-row>label:has(>#cp-scope){flex:1 1 420px;max-width:560px}
#cp-scope{text-overflow:ellipsis}
:is(#cp-scope,#cp-refresh):disabled{opacity:.55;cursor:not-allowed}
[data-page="control"] .toolbar-row>label:has(>input[type="checkbox"]:disabled){opacity:.55;cursor:not-allowed}
:is(#cp-policy-status:is([data-cp-status="failed"],[data-cp-status="offline"]),#cp-keys-status[data-cp-keys-status="failed"],#gr-status[data-gr-list="failed"]){display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2) var(--ds-space-3);margin:var(--ds-space-2) 0;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);background:var(--ds-danger-soft);color:var(--ds-text)}
:is(#cp-policy-status:is([data-cp-status="failed"],[data-cp-status="offline"]),#cp-keys-status[data-cp-keys-status="failed"],#gr-status[data-gr-list="failed"])::before{content:"!";flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ds-danger-text);color:var(--ds-surface);font-size:12px;font-weight:700;line-height:1}
:is(#cp-policy-status,#cp-keys-status,#gr-status)>b{color:var(--ds-danger-text)}
:is(#cp-policy-status,#cp-keys-status,#gr-status)>button{border-color:var(--ds-danger)}
[data-cp-next]{margin:0 0 var(--ds-space-3)}
/* A status line or a form with nothing in it takes no room (the divider of an empty form was a stray rule). */
:is(#cp-policy-status,#cp-target,#cp-policy-form,#cp-key-form,#gr-form):empty{display:none}
/* A wall screen: the card's values and the steps' states are read from the booth's distance. */
.cp-names{display:flex;flex-wrap:wrap;gap:var(--ds-space-1) var(--ds-space-2);margin:var(--ds-space-2) 0 0;padding:0;list-style:none}
.cp-names li{padding:1px 7px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-xs);background:var(--ds-surface-2);font-size:var(--ds-fs-xs)}
.cp-id{color:var(--ds-text-2);font-family:inherit;font-size:var(--ds-fs-xs);font-weight:400}



/* MCP 도구: an alias opens its entry as a link, not as the screen's primary button; a grant with no entry is a gap. */
button.link[data-mcp-open]{background:transparent;border:0;padding:0;color:var(--ds-accent-text);font-weight:600;font-size:var(--ds-fs-sm);text-align:left}
button.link[data-mcp-open]:hover{text-decoration:underline;filter:none}
/* MCP 서버 목록: a name is not broken at its hyphen, a tool and what it does stay together, and on a phone each
   server is a block of labelled lines (the cell's data-label stands in for the table head). */
button.link[data-mcp-open]{white-space:nowrap}
button.link[data-mcp-open][data-mcp-long]{max-width:100%;white-space:normal;overflow-wrap:anywhere}
[data-mcp-list] td small[data-mcp-alias-said]{display:block;margin:2px 0 0;color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
[data-mcp-list] [data-mcp-scope-named="false"]{color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
[data-mcp-meaning]{margin-top:0}
/* MCP 서버 등록·고치기: from 901px the boxes stand two to a row by what they hold (a name beside a name, the
   Gateway's ID beside the address, the owner beside the credential switch); the description, the tool list, the
   stop switch and the reason take the row. A switch is a box with its words beside it. Narrower, one to a row. */
[data-mcp-form]>label:has(>input[type="checkbox"]){display:flex;align-items:center;gap:var(--ds-space-2)}
[data-mcp-form]>label>input[type="checkbox"]{flex:none;width:16px;height:16px;margin:0;padding:0}
[data-mcp-form]>button{margin-top:var(--ds-space-3)}
/* What a tool's line is made of stands beside the field's name, quieter than it. */
[data-mcp-form]>label>small{margin-left:var(--ds-space-2);font-weight:400;color:var(--ds-text-3)}
@media(min-width:901px){
  [data-mcp-form]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ds-space-4);align-items:end}
  [data-mcp-form]>:is(.eyebrow,[data-mcp-problem],label:has(>:is(textarea,[name="description"],[name="disabled"],[name="reason"]))){grid-column:1/-1}
  [data-mcp-form]>label:has(>[name="credential"]){padding-bottom:var(--ds-space-2)}
  [data-mcp-form]>button{justify-self:start}
}
/* MCP 도구 r3 (gw-mcp-g8-r2): what nobody entered is plain muted words everywhere; a row's rule is a tag with its
   sentence under it and its two stages a line each; the count over the table; the main action is the filled one. */
.gw-absent{color:var(--ds-text-2);font-weight:400}
@media(min-width:1101px){[data-mcp-list] td[data-label="지금 정책으로"]{min-width:350px}[data-mcp-list] td[data-label="등록"]{min-width:230px}}
/* A state's count is pressed to show that state's servers: it reads as the count it is, the pressed one underlined. */
.gw-mcp-count-rule{appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.gw-mcp-count-rule:hover:not(:disabled) b,.gw-mcp-count-rule[aria-pressed="true"] b{text-decoration:underline;text-underline-offset:3px}
.gw-mcp-count-rule:disabled{cursor:default}
.gw-mcp-count-rule:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px;border-radius:2px}
/* A sentence breaks between words, not inside one (a phone split 허|용합니다; the shared small rule resets word-break). */
[data-mcp-list] td [data-mcp-stage="registered"]{white-space:normal;word-break:keep-all}
@media(min-width:1101px){[data-mcp-list] td[data-label="도구"]{width:24%}[data-mcp-list] td[data-label="서버"]{width:20%}}
[data-skeleton="mcp"] td .ui-skeleton-row{display:block;height:18px;margin:var(--ds-space-2) 0}
[data-skeleton="mcp"]>.ui-skeleton-label{margin:0 20px var(--ds-space-2)}
/* The list closes the card: no band under its last row (the card rule under '3단계 공유 카드' drops the list's margin). */
[data-mcp-meaning] .link-button{padding:0;font-size:inherit}
@media(min-width:1700px){
  [data-mcp-list] .gw-table table,[data-mcp-list] .gw-table .tag,button.link[data-mcp-open]{font-size:var(--ds-fs-md)}
  .gw-mcp-why,[data-mcp-list] td small[data-mcp-alias-said]{font-size:var(--ds-fs-sm)}
  
  [data-mcp-meaning],[data-mcp-unregistered]{font-size:var(--ds-fs-sm)}
}
@media(max-width:720px){
  [data-mcp-list] :is(table,tbody,tr,td){display:block;width:auto}
  /* The shared table keeps a least width for its columns; stacked, a row is as wide as the card, so a sentence wraps inside it. */
  [data-mcp-list] table{min-width:0}
  [data-mcp-list] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-mcp-list] tr{padding:var(--ds-space-3) var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
  [data-mcp-list] tr:last-child{border-bottom:0}
  [data-mcp-list] td{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:baseline;gap:var(--ds-space-2);padding:3px 0;border:0}
  [data-mcp-list] td::before{content:attr(data-label);color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
  [data-mcp-list] td>div{min-width:0}
  button.link[data-mcp-open]{white-space:normal;overflow-wrap:anywhere}
}
/* An alias the policy allows and the registry lacks is a known fact that needs care: the solid caution edge, not the
   dashed one that says 'not known' (the shared colour rule, F-038). */
[data-mcp-unregistered]{margin:var(--ds-space-2) 0 var(--ds-space-3);padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-caution);border-radius:var(--ds-radius-s);background:var(--ds-caution-soft);color:var(--ds-text)}
/* 가드레일 바꾸기's 변경 사유 is a sentence: it has a row of its own and room for one, not a select's width. */
[data-gu-form] .toolbar-row>label:has(>#gu-reason){flex:1 1 100%;max-width:640px}
/* A form that changes what is in force (가드레일 바꾸기, 단말 정책의 다음 버전) is closed until it is asked for: its
   summary is the one quiet button of the card, saying which way it goes. */
:is([data-gu-form-fold],[data-ep-form-fold])>summary{display:inline-flex;align-items:center;width:max-content;padding:6px var(--ds-space-3);border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-s);background:var(--ds-surface);color:var(--ds-text);font-size:var(--ds-fs-sm);font-weight:600;cursor:pointer;list-style:none}
:is([data-gu-form-fold],[data-ep-form-fold])>summary::-webkit-details-marker{display:none}
:is([data-gu-form-fold],[data-ep-form-fold])>summary:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
:is([data-gu-form-fold],[data-ep-form-fold])[open]>summary{margin-bottom:var(--ds-space-3)}
:is([data-gu-form-fold],[data-ep-form-fold]):not([open]) [data-fold-when="open"],:is([data-gu-form-fold],[data-ep-form-fold])[open] [data-fold-when="closed"]{display:none}

/* 단말 정책: cards on one inset; the device list and the version history scroll inside their cards under a
   header that stays; the next version is two columns of fields with the reason and the buttons under both. */
.ep-list>button{margin-top:var(--ds-space-3)}
/* which hooks the count above is of, folded: one hook a line */
.ep-own-hook-list>summary{cursor:pointer;width:fit-content}
.ep-own-hook-list>ul{margin:2px 0 0;padding:0 0 0 1.1em}
/* MCP servers against the endpoint policy (plain sessions on): a server a row, three named lines under its name. */
.ep-mcp>[data-ep-mcp-slot]:not(:empty){margin-top:var(--ds-space-3)}
.ep-mcp-list{list-style:none;margin:var(--ds-space-2) 0;padding:0}
.ep-mcp-list>li{padding:var(--ds-space-3) 0;border-top:1px solid var(--ds-line);font-size:var(--ds-fs-md);line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.ep-mcp-name{margin:0 0 var(--ds-space-1);color:var(--ds-text-2)}
.ep-mcp-name b{color:var(--ds-text);font-weight:600}
/* Why a device does not apply its version (agent_minimum): a plain line under the state chip, never a warning's colour. */
.ep-blocked{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--ds-space-3);margin:var(--ds-space-3) 0 0;padding:var(--ds-space-2) var(--ds-space-3);border:1px solid var(--ds-unknown-2);border-left:3px solid var(--ds-unknown);border-radius:var(--ds-radius-s);background:var(--ds-unknown-soft);color:var(--ds-text);font-size:var(--ds-fs-sm)}
.ep-blocked b{white-space:nowrap;color:var(--ds-unknown-text)}
/* A wall screen: the version, the confirmed count, the chips and the lines a size up. */
@media(min-width:1700px){
  .ep-card .ov-head h3 small,.ep-ack-note,.ep-line,.ep-blocked,.ep-chips .chip-button,.ep-chips .tag,.ep-deliver .tag{font-size:var(--ds-fs-md)}
  
  
}

/* 허용 모델·경로: the per-application list scrolls inside its panel like the key and run lists, so the Router routes,
   the compile result and the version steps under it stay in reach. */
.gw-scroll-list{max-height:min(520px,65vh);overflow-y:auto;margin:var(--ds-space-2) 0 var(--ds-space-3);padding:0 var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface)}
.gw-scroll-list>.row{padding:var(--ds-space-2) 0}
.gw-scroll-list>.row:last-child{border-bottom:0}
.gw-scroll-list>.row small{display:block;margin-top:2px;overflow-wrap:anywhere}

/* The compile result's raw JSON wraps inside its box in every engine (WebKit kept it on one line past the panel). */
/* A raw answer under a fold wraps inside its box and scrolls in it: the rollout panel's JSON ran off a 390px screen
   as unwrapped text (WebKit counted 396px of page overflow; no element was wider than the screen, only its text). */
:is([data-cp-detail],[data-bundle-raw],#budget-rules-panel details,#connections-root details) pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:480px;overflow:auto}
.gw-scroll-list:focus-visible,.ep-scroll:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}

/* 3단계 공유 카드(.ds-card > .ds-card-head + .table-wrap): a Gateway panel's other content keeps the card's inset, a table
   inside runs to the card's edges. */
.gw-panel.ds-card{padding:0}
.gw-panel.ds-card>:not(.ds-card-head):not(.table-wrap):not(.gw-table):not([data-mcp-list]){margin-left:20px;margin-right:20px}
.gw-panel.ds-card>:last-child:not(.table-wrap):not(.gw-table){margin-bottom:var(--ds-space-4)}
.gw-panel.ds-card>[data-mcp-list]>:not(.table-wrap){margin-left:20px;margin-right:20px}
.gw-panel.ds-card>[data-mcp-list]:last-child:has(>.gw-table:last-child){margin-bottom:0}


/* 모델 연결 (connections-g8-r1): the page's 새로고침 sits on the first line of the screen instead of a band of its
   own; the five figures come before the notice; an empty list and a failed read are frames; the placeholder has
   the answer's layout; a phone keeps the fifth figure on its own row; a wall screen reads the figures and states. */
[data-page="connections"]>.content-header{display:flex;justify-content:flex-end;height:0;margin:0;position:relative;z-index:1}
[data-page="connections"]>.content-header .toolbar{position:absolute;top:0;right:0}
[data-page="connections"]>.content-header #mc-refresh{padding:6px 12px;font-size:var(--ds-fs-sm)}
#connections-root>:first-child{min-height:34px;margin-right:104px}
#connections-root>.ui-skeleton:first-child{margin-right:0}
#connections-root>.ui-skeleton>.ui-skeleton-label{display:block;min-height:34px;margin-right:104px}
/* A limit is the line under the state in every row, each of its parts whole (connections N1). */
[data-mc-detail-ids] code{overflow-wrap:anywhere}
[data-skeleton="connections"]>.ui-skeleton-row:not(.mc-wait-tabs){height:58px}
[data-skeleton="connections"] .mc-h{margin:var(--ds-space-3) 0 var(--ds-space-2);color:var(--ds-text-2)}
#connections-root .gw-none{margin:var(--ds-space-2) 0 var(--ds-space-3)}
@media(max-width:600px){
  #connections-root [data-mc-boundary]{font-size:var(--ds-fs-xs);padding:8px 10px}
}
@media(min-width:1700px){
  
  
  #connections-root .mc-row .tag,#connections-root [data-mc-relay] .tag{font-size:var(--ds-fs-sm);padding:3px 9px}
  #connections-root .gw-none b{font-size:var(--ds-fs-md)}
}

/* 운영 상태 (gw-ops-g6-r2, the last round): three cards on one row so the analysis under them is on the first screen;
   a count's share of its card as a bar; a figure with nothing to count from is quiet, not a warning; the records
   card says each record's name over its state so nothing breaks mid-phrase. */
/* The two count cards share the first row and the pulls stand under them as one strip, each record's pull a column
   and the two counts a half each: beside the pulls' tall card the count cards left a band empty under themselves
   (c3.43 copy; gw-ops-g7-r3 a). */
@media(min-width:1101px){
  .gw-ops-pulls>*{grid-column:1/-1}
  .gw-ops-pulls>:is(.kv:is([data-gwc-stream],[data-gwc-native-sync]),.ui-skeleton-row){grid-column:span 2;border-bottom:0}
  .gw-ops-pulls>.kv:is([data-gwc-set-aside],[data-gwc-kill-switches]){grid-column:span 3;border-top:1px solid var(--ds-line);border-bottom:0}
}
/* What gw-ops-g7-r3 (PASS) left: a card is as tall as what it holds (the two count cards stood half empty beside
   the pulls' card); a pull's state and its time are one line when they fit and always apart by a gap; a result that
   is not the good one is a quieter bar, and a small share is still a bar; the placeholder's rows are a count row's. */
.gw-ops-pulls .kv:is([data-gwc-stream],[data-gwc-native-sync])>span:last-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--ds-space-2)}
@media(max-width:600px){[data-gwc-ops] .gw-ops-figures>:first-child{grid-column:1/-1}}
.gw-ops-figures .ov-metric[data-state="none"]{background:transparent;border-style:dashed;box-shadow:none}
.gw-ops-figures .ov-metric[data-state="none"] strong{font-size:var(--ds-fs-lg);font-weight:600;color:var(--ds-text-2)}
.gw-ops-pulls .kv{padding-top:var(--ds-space-2);padding-bottom:var(--ds-space-2)}
.gw-ops-pulls .kv:is([data-gwc-stream],[data-gwc-native-sync]){display:block}
/* The two count rows keep their name on one line (the shared .kv gives a name 38%). */
.gw-ops-pulls .kv:is([data-gwc-set-aside],[data-gwc-kill-switches])>span:first-child{flex:1 1 auto}
.gw-ops-pulls .kv:is([data-gwc-set-aside],[data-gwc-kill-switches])>span:last-child{flex:0 0 auto}
.gw-ops-pulls .kv:is([data-gwc-stream],[data-gwc-native-sync])>span:first-child{display:block;margin-bottom:2px;color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
.gw-panel>.gw-card-none,.gw-ops-cards .gw-panel>.empty{margin:0;padding:var(--ds-space-3) 0}
[data-skeleton="ops"]>.ui-skeleton-label{display:block;margin-bottom:var(--ds-space-2)}

/* 가드레일: the version's three steps are one strip across the page, each step's name over its state, in the order
   the card's head says them (발행 → 적용 확인 → 실제 탐지). One under another where three do not fit. */
/* 지금 적용 중 (가드레일의 두 카드): a value stands right after its name, read as one line, instead of at the
   card's far edge (the shared .kv sets it right, 650px from its name in a half-page card). The names are short in
   the injection card and a list of detectors in the other, so each card keeps its own name width. */
:is([data-gu-check],[data-gu-sensitive])>.kv{justify-content:flex-start;gap:var(--ds-space-4)}
:is([data-gu-check],[data-gu-sensitive])>.kv>span:last-child{text-align:left;color:var(--ds-text);font-weight:600}
[data-gu-check]>.kv>span:first-child{flex-basis:8em}
[data-gu-sensitive]>.kv>span:first-child{flex-basis:58%}
@media(max-width:600px){:is([data-gu-check],[data-gu-sensitive])>.kv>span:first-child{flex-basis:auto}}
/* The two cards of what is in force share a row and end on one line: the shorter one stood with a blank under it
   beside the longer (independent review F-036, c3.48 user stack). */
:is([data-gu-check],[data-gu-sensitive]){align-self:stretch}
[data-gu-steps]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
[data-gu-steps]>:not(.kv){grid-column:1/-1}
[data-gu-steps]>.kv{display:block;padding:var(--ds-space-1) 0 var(--ds-space-3);border-bottom:0}
[data-gu-steps]>.kv>span{display:block;text-align:left}
[data-gu-steps]>.kv>span:first-child{margin-bottom:var(--ds-space-1)}
[data-gu-steps]>.kv .state{white-space:normal}
@media(max-width:900px){[data-gu-steps]{grid-template-columns:minmax(0,1fr)}}
/* 정책 카드 › 키: the last column is the models a key may use -- words, not a row's actions -- and wraps in its cell,
   as wide as the table leaves it. The shared table keeps a row's last cell on one line (style.css .table-wrap
   td:last-child) and no wider than 360px: a key of 24 models ran 1,277px past its cell
   (UC:person-page:person-with-many-agents, QA C-4f048146). */
[data-policy-card] .table-wrap [data-card-key]>td:last-child{white-space:normal;max-width:none}
/* A policy over the person is its name and a few facts (the shared detail facts), one block a policy. */
[data-policy-card] .gw-card-scopes{list-style:none;margin:0;padding:0}
[data-policy-card] .gw-card-scopes>li+li{margin-top:var(--ds-space-3);padding-top:var(--ds-space-3);border-top:1px solid var(--ds-line)}
[data-policy-card] .gw-card-scope-name{display:block;margin-bottom:var(--ds-space-1)}
/* 모델 연결의 대화상자(양식은 model-connections.js): a form longer than the window keeps 저장 · 취소 in view -- a
   company connection's form is 888px in a dialog of 792px on a 1440×900 window, and 저장 stood under the fold.
   Only the form's body scrolls; the dialog's title and × stay above it, and the line under it (#mc-form-error)
   stands outside the scroll, so a save that is refused is said wherever the form was being read. The × keeps its
   corner (the shared dialog's 27px inset): a float does not hold in the column this dialog becomes. */
#mc-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
#mc-dialog>.close{position:absolute;top:27px;right:27px}
#mc-dialog>h2{flex:none;padding-right:var(--ds-space-6)}
/* (The shared note pulls itself up under what stands before it; the first line of a scroll has nothing above to pull to.) */
#mc-form-error{flex:none}
/* QA-08: whose answers a latency was measured on -- a mock answer, the provider's, both, or not stated -- beside the value. */
.gw-source{vertical-align:baseline}
.gw-source[data-gwc-source="simulated"],.gw-source[data-gwc-source="mixed"],.gw-source[data-gwc-source="simulated_unstated"]{background:var(--amber-soft);color:var(--amber);border:1px solid #e2c27c}
.gw-source[data-gwc-source="provider"]{background:var(--ds-surface-2);color:var(--ds-text-2);border:1px solid var(--ds-line)}
.gw-source[data-gwc-source="unknown"]{background:var(--amber-soft);color:var(--amber);border:1px dashed #e2c27c}
.gw-source-parts{color:var(--ds-text-2)}
/* P2-12 (10-06 product review): body text 14px and small text 13px on the LLM Gateway screens. The scale's two small
   steps are raised for these pages, as the Click screens do (screens-click.css), so every rule that names a step follows. */
:is([data-page^="gw-"],[data-page="cost"],[data-page="control"],[data-page="connections"]){--ds-fs-sm:14px;--ds-fs-xs:13px}
:is([data-page^="gw-"],[data-page="cost"],[data-page="control"],[data-page="connections"]) :is(.prov-badge,.basis-badge,.tag,.state){font-size:var(--ds-fs-xs)}
/* Help behind ⓘ on the Gateway screens (the shared tooltip, app.js data-tooltip), as .ctl-info on the policy console. */
.gw-help{margin-left:var(--ds-space-1)}
/* LLM Gateway › 개요 (L1). The first line and the lines of figures under it are the shared ones (portal-ui's
   .ds-first-line, .ds-first-figure, .ds-sub-line; style.css); what follows is this screen's own: a figure that opens
   its requests, what was only detected, the sections, the last quiet line and the start flow of an empty company. */
/* What was only detected and sent: apart from the figure above, one quiet block with its one way up. */
[data-gwc-overview]>[data-gwc-envelope]{margin-bottom:var(--ds-space-4)}
/* The sections under the first lines: the order, the days, who and which app. */
:is(.gw-order,.gw-trend,.gw-top,.gw-attention)>h3{margin:0 0 var(--ds-space-2);font-size:var(--ds-fs-md);font-weight:700;color:var(--ds-text)}
:is(.gw-order,.gw-trend){margin:0 0 var(--ds-space-5)}
/* A company with no request: why it is empty beside the three steps that fill it. */
.gw-start-steps{display:grid;gap:var(--ds-space-2);margin:0;padding:0;list-style:none}
.gw-start-steps>li{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:2px var(--ds-space-4);padding:var(--ds-space-3) var(--ds-space-4);border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface)}
.gw-start-steps>li>b{grid-column:1;font-size:var(--ds-fs-md);font-weight:700;color:var(--ds-text)}
.gw-start-steps>li>span{grid-column:1;color:var(--ds-text-2);font-size:var(--ds-fs-sm)}
.gw-start-steps>li>a{grid-column:2;grid-row:1/span 2;text-decoration:none}
.gw-start-steps>li[data-gwc-step-done]>b::after{content:" · 완료";color:var(--ds-ok-text);font-weight:600}
@media(max-width:520px){.gw-start-steps>li{grid-template-columns:minmax(0,1fr)}.gw-start-steps>li>a{grid-column:1;grid-row:auto;justify-self:start;margin-top:var(--ds-space-1)}}
/* 키 종류 앱 hides the box that names a person to bill: a label given display by these sheets keeps [hidden] off. */
[data-cp-key-subject-field][hidden]{display:none}
/* 기기 정책's device list and version history (user review 4, 10-10: list, long text, 390). At 1440 a device's name
   (person · OS) broke after the name and stood on two lines in every row. On a phone (600px and under) the seven
   columns went on sideways past the second, each row as high as its hidden cells: a row stands as a card instead,
   the device (the version) on its own line and each cell with its column's head beside it (data-label), 보고 버전 and
   재수집 대기 side by side, so about three cards stand in the list's own box (kept: without it the 27 cards made the
   page four times as long, 버전 이력 and the form far below). The same cells and words; data-ep-cell and the rows'
   marks are as they were; the head row stays for screen readers. */
[data-page="gw-endpoint"] [data-testid="gw-endpoint-devices-table"] td[data-ep-name]{min-width:8em}
@media(max-width:600px){
  [data-page="gw-endpoint"] .ep-list .table-wrap>table,[data-page="gw-endpoint"] .ep-list .table-wrap>table>tbody{display:block;min-width:0;width:100%}
  [data-page="gw-endpoint"] .ep-list .table-wrap>table>thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  [data-page="gw-endpoint"] .ep-list .table-wrap>table>tbody>tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--ds-space-1) var(--ds-space-3);padding:var(--ds-space-3);border-bottom:1px solid var(--ds-line)}
  [data-page="gw-endpoint"] .ep-list .table-wrap>table>tbody>tr>td{display:block;grid-column:1 / -1;min-width:0;max-width:none;padding:0;border:0;white-space:normal}
  [data-page="gw-endpoint"] .ep-list .table-wrap>table>tbody>tr>td[data-ep-name]{font-size:var(--ds-fs-sm);font-weight:600}
  [data-page="gw-endpoint"] .ep-list .table-wrap>table>tbody>tr>td:is([data-ep-cell="version"],[data-ep-cell="pending"]){grid-column:auto}
  [data-page="gw-endpoint"] .ep-list .table-wrap>table>tbody>tr>td[data-label]{position:relative;padding-left:7.5em}
  [data-page="gw-endpoint"] .ep-list .table-wrap>table>tbody>tr>td[data-label]::before{content:attr(data-label);position:absolute;top:1px;left:0;width:7em;color:var(--ds-text-2);font-size:var(--ds-fs-xs);font-weight:500;line-height:1.4}
  /* 가드레일's cards of what is in force: a short value beside its name, not under it (style.css stacks every .kv
     at this width, which gave six lines of label over value for 켜짐, 높음 · 둘 다, 탐지만). The value keeps its own
     width and the name wraps: beside 개인정보 기본(…) a shrinking value was 22 px and broke 탐지만 by letters. */
  [data-page="gw-guardrails"] :is([data-testid="gw-guardrails-check"],[data-testid="gw-guardrails-sensitive"]) .kv{flex-direction:row;gap:var(--ds-space-3)}
  [data-page="gw-guardrails"] :is([data-testid="gw-guardrails-check"],[data-testid="gw-guardrails-sensitive"]) .kv>span:first-child{flex:1 1 auto;min-width:0}
  [data-page="gw-guardrails"] :is([data-testid="gw-guardrails-check"],[data-testid="gw-guardrails-sensitive"]) .kv>span:last-child{flex:0 0 auto;max-width:55%;text-align:right;word-break:keep-all;overflow-wrap:anywhere}
}

/* 개요 with its two views: the way to 가드레일 stands on the views' line, so the line under it is only the kinds of
   check, and none is drawn where there are none (GovGW22 P08: the head stood 167px deeper than the preview's). */
#gw-overview-root .gwo-first:has(>.gwo-lede:only-child:empty){display:none}
/* GovGW22 P12: a rule's On / Off chip is as wide as its word (16절 상태 칩), not stretched by the column row. */
.gr-rule>.lx-grow>.lx-bdg{align-self:flex-start}
/* UR30-20: a Gateway panel in the v24 order (Todo.html aside): its state, its key values, the evidence, one row of what
   to do, then its sections. The row of buttons wraps on a narrow panel; a section with nothing yet read (비용 확정 before
   its button is pressed) is not drawn as a bare heading. */
.rm9-panel-acts{flex-wrap:wrap;gap:8px}
.lx-sect[data-gwc-sect="settlement"]:not(:has(dl, .rm9-slot:not([hidden]))){display:none}
.epv-panel-state{gap:8px 16px;flex-wrap:wrap}

/* Gateway 정책's top line (9.1, T19-4 B 22): one line -- 적용 대상's list with its device find beside it as one choice
   (the find says its name and count as its box's label, read aloud, not a second name over it), what is in force and
   새로 고침, as on the guardrail screen. The list and the find keep to widths that leave the line its room at 1440. */
.rm6-top{align-items:center}
.rm6-top.lx-row>#cp-scope{max-width:230px}
.rm6-top.lx-row>#cp-scope-find{flex:0 1 180px;min-width:140px}
.rm6-top>#cp-scope-find .ctrl-scope-find{flex-direction:row;align-items:center}
.rm6-top>#cp-scope-find .ctrl-scope-find>label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rm6-top>#cp-scope-find .ctrl-scope-find>.lx-find{flex:1 1 auto;min-width:0}
.rm6-top>.rm6-inforce{min-width:0}
/* Gateway 키's head beside its panel (5절, T19-4 B 45): the first line's sentence takes only what it says, so the period
   and 키 발급 stay on it; an application's or an order's list is as wide as a name may be, not its longest option. */
.gwc-first[data-gwk-first-row]>p.lx-lede{flex-basis:auto;min-width:0}
[data-gwc-keys-find]>select.lx-sel{max-width:180px;text-overflow:ellipsis}
/* A date and time field says its value in the Portal's words (gwConsole.dateTimeField, 명세 7.1; T19-4 B 47 · 149): the
   browser's own mask is not drawn until the field is opened, these words stand over it, and an empty one says nothing. */
.gw-dt{position:relative;display:inline-flex;min-width:0}
.gw-dt>input:not(:focus),.gw-dt>input:not(:focus)::-webkit-datetime-edit{color:transparent;-webkit-text-fill-color:transparent}
.gw-dt:has(>input:not(:focus))::before{content:attr(data-gw-dt);position:absolute;left:11px;right:32px;top:50%;transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--ds-fs-sm);color:var(--ds-text);pointer-events:none}
.gw-dt:has(>input:disabled)::before{color:var(--ds-text-3)}

/* Usage limits and company MCP catalog keep their columns inside a keyboard-scrollable frame.
   These route scopes override the later shared fixed-table widths without changing other lists. */
[data-page="gw-limits"] .lim-app-scroll,
[data-page="gw-mcp"] .msv-catalog-scroll{max-width:100%;min-width:0;overflow-x:auto}
[data-page="gw-limits"] .lim-app-scroll:focus-visible,
[data-page="gw-mcp"] .msv-catalog-scroll:focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px}
[data-page="gw-limits"] table.lim-apps{table-layout:auto;min-width:860px}
[data-page="gw-limits"] table.lim-apps :is(th,td){min-width:104px;white-space:normal;overflow-wrap:break-word;word-break:normal}
[data-page="gw-limits"] table.lim-apps :is(th,td):first-child{min-width:152px}
[data-page="gw-limits"] table.lim-apps [data-br-col="owner"]{min-width:144px}
[data-page="gw-limits"] table.lim-apps .lim-sort{max-width:100%;white-space:normal;text-align:inherit}
[data-page="gw-limits"] table.lim-apps .lim-sort-mark{flex:none}
[data-page="gw-limits"] table.lim-apps .lim-open{max-width:100%}
[data-page="gw-mcp"] [data-mcp-catalog] table.msv-table{table-layout:auto;min-width:960px}
[data-page="gw-mcp"] [data-mcp-catalog] table.msv-table :is(th,td):nth-child(n){width:auto;min-width:112px;white-space:normal;overflow-wrap:break-word;word-break:normal}
[data-page="gw-mcp"] [data-mcp-catalog] table.msv-table :is(th,td):first-child{min-width:160px}
[data-page="gw-mcp"] [data-mcp-catalog] table.msv-table :is(th,td):nth-child(3),
[data-page="gw-mcp"] [data-mcp-catalog] table.msv-table :is(th,td):nth-child(5){min-width:144px}
[data-page="gw-mcp"] [data-mcp-catalog] table.msv-table :is(th,td):last-child{min-width:136px}
[data-page="gw-mcp"] [data-mcp-catalog] table.msv-table td:last-child .lx-btn{margin:2px;white-space:normal}

/* ---------- Phase 4 (2026-11-12): LLM Gateway 개요 -- layout only, tokens only ----------
   The headline over the controls, a section gap under it; a KPI card's line breaks between its words, not inside them
   (two lines at most); 확인할 점's stream name keeps a space before its state. */
[data-page="gw-overview"] [data-gwo-lede-slot]>.gwo-lede{margin:0 0 var(--sp-4)}
[data-page="gw-overview"] .gwo-kpi>[data-gwc-kpi-sub]{overflow-wrap:normal;word-break:keep-all}
[data-page="gw-overview"] .gwo-lines>li[data-gwc-stream]>:is(.lx-st,.lx-bdg){margin-left:var(--sp-1)}