/* 리디자인 트랙 RM5 (리디자인 명세 8.10, 8.15, 9.1): LLM Gateway › 개요, 보호 › 가드레일, 보호 › 탐지 내역.
   The parts are RF1's (lx-*, redesign-rf1.css): here are only these screens' own layout rules, under names no older
   sheet holds (gwo-: 개요, gd-: 탐지 내역, gr-: 가드레일; gw-period: the Gateway screens' shared period control).
   Text in a status colour uses the -text tokens; nothing here names an older variable. */

/* ---- The Gateway screens' period (gw-console-common.js periodControl) ---------------------------------------- */
.gw-period{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.gw-period-at{display:inline-flex;align-items:center;gap:6px;color:var(--ds-text-3);font-size:13px}
/* The two instants are the common one-line input (36px); 기간 적용 is the common button (34px, 14px). */
.gw-period-at .lx-in{width:auto}
/* The response-source mark kept with the dot before it (gw-console-common dotted, .gw-keep: narrower than its line by the
   dot's room) wraps its own words inside its edge: the shared badge's nowrap would leave the words of a long source
   (모의 응답과 출처를 확인하지 못한 기록) beyond the narrowed mark, out of a figure's card (W1A/W1B gw-ops 1280-1920). */
.gw-keep>.gw-source{white-space:normal}
.gwc-first{align-items:flex-start;flex-wrap:wrap;row-gap:8px}
.gwc-first .lx-lede{flex:1 1 15em;min-width:min(100%,15em);margin:0}

/* ---- LLM Gateway › 개요 (gw-console-overview.js) -------------------------------------------------------------- */
#gw-overview-root,[data-gwc-overview]{display:flex;flex-direction:column;gap:20px;min-width:0}
[data-gwc-overview][hidden],[data-gwc-risk][hidden]{display:none}
[data-gwc-raise]:empty{display:none}
/* The first line's pieces stand one 32px high on one middle, as a screen's first line does (redesign-rf1.css
   data-insights-first): the period's joined control is 32px, so 이번 달, 기간 적용, the two instants and 가드레일 설정
   검토 are too -- the button stood 34px and 이번 달 28px beside it (PC2 FB-008, 명세 8.10 구성 2). */
.gwo-controls .gw-period{max-width:100%}
.gwo-controls :is(.gw-period,[data-gwc-raise])>.lx-btn,.gwo-controls .gw-period-at .lx-in{height:32px}
/* Under the three figures, what they were read over: one quiet line. A state in it is a dot and its word, a caution
   its words in the caution's text colour -- no filled piece beside the figures. The collection's state is the shared
   dot and word itself (gw-console-common collectionLine, .lx-st); the rules below are for the partial and short-sample
   chips, which are still .state. */
#gw-overview-root [data-gwc-envelope]{gap:2px 0;margin:0;padding:0;color:var(--ds-text-3);font-size:13px;line-height:1.5}
#gw-overview-root [data-gwc-envelope] small{color:inherit;font-size:inherit}
#gw-overview-root [data-gwc-envelope] .state{display:inline;padding:0;border:0;border-radius:0;background:none;color:var(--ds-text-2);font-size:inherit;font-weight:500;white-space:normal}
#gw-overview-root [data-gwc-envelope] .state:is(.warning,.critical){color:var(--ds-caution-text)}
/* (PC 눈 대조 10-13 recheck-4 eye 04: 20px under the figures and 20px over the first card the line stood as a thin
   strip of its own. It is the figures' footnote: 8px under them, the page's 20px before the card.) */
#gw-overview-root .gwo-stats+[data-gwc-envelope]{margin-top:-12px}
/* The kinds under the figures and their footnote: 12px under them, not the page's 20px. A chip without a list to
   open is said, not pressed. */
.gwo-kinds{gap:8px;margin:-8px 0 0}
.gwo-kinds>span.lx-chip,.gwo-kinds>span.lx-chip:hover{border-color:var(--ds-line);cursor:default}
.gwo-figure-link{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.gwo-figure-link:hover,.gwo-figure-link:focus-visible{color:var(--ds-accent-text);text-decoration:underline;text-underline-offset:3px}
.gwo-stats{gap:8px 28px}
/* 처리 단계's first part (UR20-2): the figures, their line and the kinds. v24 Gateway.html draws the six steps alone in this
   card (Air v24 10-20 08:07: the figures over them, their line and the kinds took 158 px and put the two columns under
   it out of the first screen), and the steps say the same counts large: here each figure is its name and its count on
   one line, small, and the line and the kinds follow them, wrapping where the card is narrow. */
.gwo-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-width:0;margin-bottom:16px}
.gwo-order>.lx-card-h .gwo-head{margin:0;flex-wrap:nowrap;gap:6px 16px}
.gwo-stats .lx-stat{padding-left:0}
.gwo-head .gwo-stats{gap:6px 20px}
.gwo-head .gwo-stats .lx-stat{flex-direction:row;align-items:baseline;gap:6px;padding:0}
.gwo-head .gwo-stats .lx-fig-s{font-size:16px;font-weight:600;letter-spacing:0;line-height:24px}
#gw-overview-root .gwo-head .gwo-stats+[data-gwc-envelope]{margin-top:0}
.gwo-head .gwo-kinds{margin:0}
.gwo-pipeline{margin:0;padding:0;list-style:none}
/* The six steps stand in one row or in two even rows, never five and one (auto-fit left '6 기록' alone on a second line: X166). */
.gwo-pipeline{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1280px){.gwo-pipeline{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.gwo-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gwo-pipeline .lx-step>a{text-decoration:none}
.gwo-pipeline .lx-step>a:hover,.gwo-pipeline .lx-step>a:focus-visible{color:var(--ds-accent-text);text-decoration:underline}
.gwo-step-figures{display:flex;flex-direction:column;gap:2px;min-width:0}
.gwo-step-lead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
.gwo-more{margin-top:14px}
.gwo-more>summary{width:fit-content;color:var(--ds-accent-text);font-size:13px;font-weight:500;cursor:pointer}
/* (display: an older sheet makes every table a block on a phone, and the two columns then stand at its left.) */
.gwo-table{display:table;width:100%;max-width:520px;margin-top:8px;border-collapse:collapse;font-size:14px}
/* (A row's name is a head cell: an older sheet fills every th grey and writes it small.) */
.gwo-table th,.gwo-table td{box-sizing:border-box;height:46px;padding:8px 6px;border-bottom:1px solid var(--ds-line);background:transparent;color:var(--ds-text);font-size:14px;font-weight:400;text-align:left}
.gwo-table thead th{color:var(--ds-text-3);font-size:13px;font-weight:500}
.gwo-table td,.gwo-table thead th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.gwo-table tr:last-child>*{border-bottom:0}
.gwo-table .gwo-sub>*{padding-top:4px;padding-bottom:4px;color:var(--ds-text-3);font-size:13px}
.gwo-table .gwo-sub>th{padding-left:20px}
.gwo-unlinked{display:flex;flex-direction:column;gap:12px}
.gwo-unlinked .lx-card-h{margin-bottom:0}
.gwo-unlinked>p{margin:0}
.gwo-unlinked-figure{align-items:baseline;gap:8px}
.gwo-unlinked-figure a{text-decoration:none}
.gwo-unlinked-figure a:hover,.gwo-unlinked-figure a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.gwo-reasons{display:flex;flex-direction:column}
.gwo-top-row{grid-template-columns:minmax(0,1fr) 104px 80px}
.gwo-top[hidden]{display:none}
.gwo-top>p{margin:8px 0 0}
.gwo-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.gwo-lower .lx-li:last-child{border-bottom:0}
.gwo-lower .lx-li:hover>.lx-grow{text-decoration:underline;text-underline-offset:3px}
.gwo-lines{display:flex;flex-direction:column;gap:6px;margin:8px 0 0;padding-left:18px}
.gwo-start{display:flex;flex-direction:column;gap:16px}
.gwo-start-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0;padding:0;list-style:none}
.gwo-start-steps>li{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface)}
.gwo-trend>.lx-h2{margin:0 0 10px}

/* ---- LLM Gateway › 보호 › 탐지 내역 (gw-detections.js) ---------------------------------------------------------- */
#gw-detections-root{display:flex;flex-direction:column;gap:16px;min-width:0}
.gd-first .lx-lede{margin:0}
.gd-body{min-width:0}
[data-gd-view]{display:flex;flex-direction:column;gap:12px;min-width:0}
[data-gd-view][hidden]{display:none}
.gd-filters{gap:8px}
.gd-chips{gap:6px}
.gd-narrow{position:relative}
.gd-narrow>summary{list-style:none;cursor:pointer}
.gd-narrow>summary::-webkit-details-marker{display:none}
.gd-narrow-body{position:absolute;z-index:5;top:calc(100% + 6px);left:0;display:flex;flex-direction:column;gap:10px;min-width:220px;padding:12px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface);box-shadow:var(--ds-shadow)}
.gd-narrow-body label{display:flex;flex-direction:column;gap:4px}
.gd-find{flex:0 1 280px;min-width:160px}
/* 9.1: the period stays in the one filter line -- the chips wrap inside their own span first, where the line was the
   one to wrap and put the period alone under it (T19-4 B 17). 900 and under the line wraps as before. */
@media(min-width:901px){.gd-filters[data-gd-filters]{flex-wrap:nowrap}.gd-filters[data-gd-filters]>.gd-chips{flex:0 1 auto;min-width:0}.gd-filters[data-gd-filters]>:is(.gd-narrow,.lx-seg){flex:none}}
.gd-condition{gap:6px;margin:0}
.gd-drop{padding:0 2px;border:0;background:none;color:inherit;font:inherit;line-height:1;cursor:pointer}
.gd-table-wrap{overflow-x:auto}
.gd-table{min-width:660px}
@media(max-width:1440px){.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .gd-table{min-width:0}}
.gd-table tr.lx-hl{cursor:pointer}
.gd-table td:first-child{white-space:nowrap}
.gd-table td>.lx-nm,.gd-table td>.lx-lbl,.gd-allow-table td>.lx-nm,.gd-allow-table td>.lx-lbl{display:block;max-width:280px}
.gd-allow-table td>.lx-nm{overflow-wrap:anywhere}
.gd-head{all:unset;font:inherit;color:inherit;cursor:pointer}
.gd-head:hover{background:none}
.gd-head:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px;border-radius:4px}
.gd-open{font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-allow-act{text-align:right;white-space:nowrap}
.gd-detail{display:flex;flex-direction:column;gap:16px;overflow-wrap:anywhere}
.gd-detail .lx-nm,.gd-detail .lx-nm+.lx-lbl{display:block}
.gd-actions,.gd-mark,.gd-allow{gap:8px}
.gd-mark,.gd-allow{margin:0}
.gd-mark label,.gd-allow label{display:inline-flex;align-items:center;gap:6px}
.gd-mark .lx-in,.gd-allow .lx-in{width:auto}
.gd-pattern{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.gd-pattern>.lx-h2{margin:0}
.gd-pattern>.lx-row{align-items:flex-end}
.gd-pattern label{display:flex;flex-direction:column;flex:1 1 180px;gap:4px;min-width:0}

/* ---- LLM Gateway › 보호 › 가드레일 (guardui-screen.js, guard-parts.js, guard-detail.js, guard-check.js,
   guardrail-rules.js; 리디자인 명세 8.15) -------------------------------------------------------------------------
   The parts are RF1's (lx-*): here are the screen's own layout rules only. gr-: the screen and its panels,
   gp-: the guardrail parts both this screen and 탐지 내역 draw. Quiet text is --ds-text-3; a state's dot keeps the
   palette's plain token; no text here is in a status colour. */
#gw-guardrails-root{display:flex;flex-direction:column;gap:16px;min-width:0}
.gr-first{align-items:flex-start}
.gr-first .lx-lede{margin:0}
.gr-pick:empty{display:none}
/* Over the table, one line (8.15-3): the choice of the scope, what is in force beside it, the company's week pushed
   to the right and 새로 고침 at its end; a narrow window wraps it. */
.gr-scope{display:flex;flex-direction:column;gap:6px;min-width:0}
.gr-scope-top{align-items:center;gap:8px 12px;min-width:0}
.gr-scope-pick{flex:0 1 auto;align-items:center;gap:8px 12px;min-width:0}
.gr-week{margin-left:auto}
.gr-week:empty+.gr-refresh{margin-left:auto}
/* (The picker's name and list are a label: an older sheet gives every label 18px over it and 7px under.) */
.gr-scope-pick>label{margin:0}
.gr-refresh{flex:none}
/* A field of this screen is the common one: no margin of its own, its name 6px over its control. */
#gw-guardrails-root .gr-field,.lx-aside .gr-field,#guardrail-rules-panel .gr-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;color:var(--ds-text-3);font-size:13px}
.gr-field .lx-in{min-width:180px}
.gr-check{display:inline-flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}
[data-gu-scope-found]{gap:6px}
:is([data-gu-scope-found],[data-gu-scopes-cut],[data-gu-status],[data-gu-readiness],[data-gu-estimate])[hidden]{display:none}
:is([data-gu-version],[data-gu-week]):empty{display:none}
.gr-main{display:flex;flex-direction:column;gap:20px;min-width:0}
[data-gu-body]{display:flex;flex-direction:column;gap:14px;min-width:0}
:is([data-gu-result],[data-gu-check-host]):empty{display:none}
[data-gu-body]>.lx-note{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}

/* The five guardrails: a row each, its choice with the state's dot beside it. */
.gr-guards{display:flex;flex-direction:column;gap:10px;min-width:0;container:gr-guards/inline-size}
.gp-table{width:100%}
/* The name's cell is the row's head: it takes a cell's padding, so a row of a name and its helper line is the
   design's 59.5px (21 + 19.5 + 9 + 9 + the line). */
table.lx-t.gp-table tbody th[scope="row"]{padding:9px 6px;color:var(--ds-text);font-size:14px;font-weight:400;text-align:left;white-space:normal}
.gp-table .lx-nm,.gp-table .lx-sub{display:block}
.gp-table td{vertical-align:middle}
table.lx-t.gp-table tbody tr:last-child>th{border-bottom:0}
/* 지난 7일 reads from the left, beside the choice, as the other two columns do. */
table.lx-t.gp-table :is(th,td).lx-r{text-align:left}
table.lx-t.gp-table tr[aria-selected="true"]>*{border-bottom-color:transparent;background:var(--ds-accent-soft)}
table.lx-t.gp-table tr[aria-selected="true"]>th{border-radius:8px 0 0 8px}
.gr-act{display:inline-flex;align-items:center;gap:8px}
.gr-act::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ds-muted)}
.gr-act:is([data-state="detect"],[data-state="mask"])::before{background:var(--ds-caution)}
.gr-act[data-state="block"]::before{background:var(--ds-blocked)}
.gr-sel{width:auto;min-width:112px;height:30px}
.gr-under{align-items:center;gap:8px 12px}
.gr-under>p{margin:0}
.gp-elsewhere{margin:0}
.gp-elsewhere b{color:var(--ds-text);font-weight:600}

/* A folded part (시험 사례 결과, a panel's sections, 지원하지 않는 정규식). */
/* AI 오탐 검증 under the table is folded to its head line (T19-4 B 11). */
.gr-review>summary{margin-bottom:0;cursor:pointer}
.gr-review[open]>summary{margin-bottom:14px}
.gp-fold{min-width:0}
.gp-fold>summary{width:fit-content;color:var(--ds-accent-text);font-size:13px;font-weight:500;cursor:pointer}
.gp-fold>summary .lx-lbl{margin-left:8px;font-weight:400}
.gp-fold[open]>summary{margin-bottom:8px}
.gp-fold>p{margin:0 0 8px}
.gp-scroll{max-width:100%;overflow-x:auto}
.gr-results>.lx-btn{margin-top:10px}

/* The right panel: a guardrail's settings over its counts, 적용 상태, 바꾼 내용, 회사 규칙. */
.gr-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.gr-panel>[data-guard-detail-settings]:empty{display:none}
.gr-set{display:flex;flex-direction:column;gap:12px;min-width:0}
.gr-set>p{margin:0}
.gr-set-row{align-items:flex-end;gap:8px 16px}
.gr-set .lx-li{display:flex;align-items:center;gap:10px;min-width:0}
.gr-set .lx-li>.lx-grow{min-width:0}
.gr-set .lx-sect-h{display:flex;align-items:baseline;gap:8px}
/* A step's or an item's choice in the panel is the design's small one (28px, 13px), no wider than its longest
   word: the names keep the row, the choices stand as one quiet column at its end. */
.gr-set .lx-li>select.lx-in.gr-sel{flex:none;width:auto;min-width:0;height:28px;padding:0 26px 0 8px;font-size:13px;background-position:right 8px center}
/* (PC 눈 대조 10-13 recheck-4 eye 06: a long item's name ended in … beside a choice that read heavier than the name.
   A name is whole, on a second line where it must; the names are the row's weight and a choice is the words' own;
   one that follows the default is quiet until the pointer or the keys are on it.) */
.gr-set .lx-li>.lx-grow{font-weight:500}
.gr-set .lx-li>.lx-grow.lx-ell,.gr-set .lx-li>.lx-grow>.lx-sub.lx-ell{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}
.gr-set .lx-li>select.lx-in.gr-sel{font-weight:400}
.gr-set .lx-li>select.lx-in.gr-sel:has(>option[value=""]:checked):not(:hover,:focus-visible,:disabled){border-color:var(--ds-line);color:var(--ds-text-2)}
.gr-n{flex:none;min-width:48px;color:var(--ds-text-3);font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
.gr-n:empty{display:none}
.gr-sub{padding-left:16px;color:var(--ds-text-3);font-size:13px}
.gr-facts,.gr-estimate{margin:0}
.gr-steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.gr-steps>li{display:flex;flex-direction:column;gap:2px;min-width:0}
.gr-changes{margin:0;padding-left:18px}
.gr-changes>li{margin:2px 0}
.gp-detail{display:flex;flex-direction:column;gap:12px;min-width:0}
.gp-detail-first,.gp-detail-raise{margin:0}
.gp-detail-table{width:100%}

/* 회사 규칙 (the rules panel's node, mounted in the right panel). Its own heading and standing note are the panel's
   title and the list's first line now: hidden until index.html's node is reduced to its parts (RF2). */
#guardrail-rules-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
#guardrail-rules-panel>.section-title,#guardrail-rules-panel>.inventory-note:not(#gr-status){display:none}
#guardrail-rules-panel>:empty{display:none}
#gr-rules{display:flex;flex-direction:column;gap:8px;min-width:0}
#gr-rules>p{margin:0}
.gr-tools{align-items:flex-end;gap:8px 12px}
.gr-rule{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:10px 0;border-top:1px solid var(--ds-line)}
.gr-rule>.lx-grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.gr-rule .lx-sub{overflow-wrap:anywhere}
.gr-rule-act{flex:none;gap:6px}
.gr-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0}
/* The pattern and the reason take the form's width; the pattern's two flags stand as one line under it. */
.gr-form>:is(.lx-row,p,.lx-note,button),.gr-form>.gr-field:has(textarea,#gr-pattern,#gr-reason){grid-column:1/-1}
.gr-form>.gr-check{align-self:end;padding-bottom:8px}
.gr-form>.gr-check:has(#gr-flag-i,#gr-flag-m){align-self:center;margin-top:-4px;padding-bottom:0}
.gr-form .lx-in{min-width:0;width:100%}
.gr-form>button{justify-self:start}

/* 문장 검사해 보기 (guard-check.js). */
.gp-check{display:flex;flex-direction:column;gap:10px;min-width:0}
.gp-check-text,.gp-check-stage{display:flex;flex-direction:column;gap:4px;min-width:0}
.gp-check-text>textarea{width:100%;min-height:88px;resize:vertical}
.gp-check-tools{align-items:flex-end;gap:8px 12px}
.gp-check-stage>select{width:auto}
.gp-check-verdict{align-items:center;gap:8px;margin:0}

@media(max-width:900px){
  .gr-form{grid-template-columns:1fr}
  .gr-rule{flex-direction:column}
}
/* A narrow place (a phone, or the list beside 회사 규칙's wide panel): the five rows keep the width they are given.
   The name's column takes what the choice and the count leave, and its helper line and what a row says in place of
   a choice go on to a second line instead of widening the table. */
@container gr-guards (max-width:520px){
  table.lx-t.gp-table{table-layout:fixed}
  /* The choice's column holds its widest word, 단계마다 다름, whole (390 cut it to 단계마다 다, UR28 G114 copy). */
  table.lx-t.gp-table thead th:nth-child(2){width:160px}
  table.lx-t.gp-table thead th:nth-child(3){width:64px}
  table.lx-t.gp-table .lx-sub{white-space:normal;overflow:visible;text-overflow:clip}
  table.lx-t.gp-table td{overflow-wrap:anywhere}
  .gr-sel{min-width:0;width:auto;max-width:100%}
}
/* Narrower still (the list beside the wide panel at 1280): a row is its name's line, then its choice with the count
   at the line's end. */
@container gr-guards (max-width:340px){
  table.lx-t.gp-table,table.lx-t.gp-table tbody{display:block}
  table.lx-t.gp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.lx-t.gp-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--ds-line)}
  table.lx-t.gp-table tbody tr:last-child{border-bottom:0}
  table.lx-t.gp-table tbody tr>*{height:auto;border-bottom:0}
  table.lx-t.gp-table tbody th[scope="row"]{grid-column:1/-1;padding-bottom:0}
  table.lx-t.gp-table tbody td{padding-top:6px}
  table.lx-t.gp-table tr[aria-selected="true"]{border-radius:8px;background:var(--ds-accent-soft)}
  table.lx-t.gp-table tr[aria-selected="true"]>:is(th,td){border-radius:0;background:transparent}
}