@charset "utf-8";
/* Click 포털 리디자인 4단계: LLM Gateway, Router, 레드티밍(위치·겉모양만), 보고서, 감사 로그, 설정 (HANDOFF 5.3·5.7~5.9). Writer: 4단계 작업자.
   The screens' own rules in the Click design's look, read after click-parts.css (portal-modules.json styles) so a
   screen may restyle a shared part where it stands, never the part itself. Only click-tokens.css tokens (no new
   colour, no new shared part: ask the Click 디자인 전담 for one); markup, data-testid, API calls, permission checks
   and old addresses stay as they are. */

/* The step-4 screens' own sizes for the shared parts (a :where() scope over 30 screens) are gone: every screen takes the
   one size of each part from click-parts.css (Click Design System 2단계, DESIGN_SYSTEM.md D-05). */

/* ---------- LLM Gateway (HANDOFF 5.3) ----------
   가드레일 표: 행 위아래 --sp-3, 이름 본문 글꼴 600 위에 보조 줄 --fs-xs, 지난 7일은 오른쪽 끝에 카드 제목 글꼴 700 (디자인의 가드레일 표).
   A narrow place keeps its own layout (redesign-rm5.css's gr-guards container rules): these hold where the table is a
   table. 동작 is a segment drawn by HANDOFF 5.3's own branch (worker A, click-s3.css, PR #142), so nothing here sizes
   it. 장애 배너 (다시 확인 · 운영 담당자 호출) is not drawn: the company's outage
   field is the server's B2 (PR #97, unmerged) and 운영 담당자 호출 has no API (B21). */
@container gr-guards (min-width:341px){
  [data-page="gw-guardrails"] table.lx-t.gp-table tbody :is(th,td){padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
  [data-page="gw-guardrails"] table.lx-t.gp-table :is(th,td).lx-r{text-align:right}
  [data-page="gw-guardrails"] table.lx-t.gp-table td.lx-r{font-size:var(--fs-card-title);font-weight:var(--fw-bold)}
  [data-page="gw-guardrails"] table.lx-t.gp-table td.lx-r .lx-lk{color:var(--ink);font-weight:var(--fw-bold)}
}
[data-page="gw-guardrails"] table.lx-t.gp-table tbody th[scope="row"] .lx-nm{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
[data-page="gw-guardrails"] table.lx-t.gp-table .lx-sub{margin-top:var(--sp-1);font-size:var(--fs-xs)}
/* 문장 검사해 보기 · 탐지 내역의 문장: 디자인의 결과 칸 -- 옅은 바탕, 10px 모서리, 본문 글꼴 13.5/1.75; 찾은 곳은
   검토 필요의 바탕과 글자. guard-parts.js writes its sentence rules into the page after every sheet, so these name the
   page as well to weigh more. */
:is([data-page^="gw-"],[data-page="control"]) .gp-sentence{padding:12px 14px;border:0;border-radius:var(--r-inner);background:var(--bg-subtle);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-sm);line-height:1.75}
:is([data-page^="gw-"],[data-page="control"]) .gp-match{padding:1px 3px;border-radius:var(--r-xs);background:var(--st-review-bg);color:var(--st-review-fg);font-weight:var(--fw-semibold)}
/* 개요의 처리 단계: 디자인의 옅은 칸 (10px 모서리, 14/16 안쪽), 탐지만 보낸 단계는 검토 필요의 바탕 */
[data-page="gw-overview"] .gwo-pipeline .lx-step{padding:14px 16px;border-radius:10px;background:var(--bg-subtle)}
[data-page="gw-overview"] .gwo-pipeline .lx-step.lx-hot{background:var(--st-review-bg)}

/* ---------- Router (HANDOFF 5.3) ----------
   진단의 요약 세 칸은 디자인의 숫자 카드 (흰 카드 셋, 14px 모서리, 16/18 안쪽, 라벨 12.5 · 숫자 26); 앱 패널의 추천은
   현재 모델 → 후보 모델을 비교 카드 둘로 (현재는 흰 카드, 후보는 노랑 워시와 그 선). 지표 셋(품질 일치율 · 지연 ·
   실패)은 한 응답에 없어 그리지 않는다 (서버 B22). */
[data-page="router-diagnosis"] .lx-card.rg-summary{padding:0;border:0;background:transparent}
[data-page="router-diagnosis"] .rg-summary .lx-cols{gap:var(--gap)}
[data-page="router-diagnosis"] .rg-summary .lx-stat{padding:var(--sp-4) var(--sp-5);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="router-diagnosis"] .rg-summary .lx-stat>.lx-fig-s{margin-top:var(--sp-1);font-size:var(--fs-kpi);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-head)}
[data-page="router-diagnosis"] .rg-summary .lx-stat>[data-rg-stat-sub]{margin-top:2px;font-size:var(--fs-xs)}
[data-page^="router"] .rg-rec:is([data-rg-rec=""],[data-rg-rec="report"]){display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--sp-3)}
[data-page^="router"] .rg-rec>:is(.rg-from,.rg-to){min-width:0;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-weight:var(--fw-semibold);overflow-wrap:anywhere}
[data-page^="router"] .rg-rec>.rg-to{border-color:var(--primary-line);background:var(--primary-wash)}
[data-page^="router"] .rg-rec>.rg-arrow{color:var(--faint)}
@media (max-width:560px){[data-page^="router"] .rg-rec:is([data-rg-rec=""],[data-rg-rec="report"]){grid-template-columns:minmax(0,1fr)}[data-page^="router"] .rg-rec>.rg-arrow{justify-self:center;transform:rotate(90deg)}}
/* 적용 기록 패널의 진행 단계 (제안 → 승인 → 시험 적용 → 절감): 디자인의 단계 줄 -- 번호 동그라미, 끝난 단계는
   관리 중 초록에 체크, 단계 사이는 짧은 선. Which stage is done is the record's (data-rh-stage-done). */
[data-page="router"] .rg-stages{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;padding:0;list-style:none;counter-reset:rg-stage}
[data-page="router"] .rg-stages>li{display:inline-flex;align-items:center;gap:8px;counter-increment:rg-stage;font-size:var(--fs-sm)}
[data-page="router"] .rg-stages>li::before{content:counter(rg-stage);display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--divider-soft);color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
[data-page="router"] .rg-stages>li[data-rh-stage-done="true"]::before{content:"\2713";background:var(--st-managed);color:var(--surface)}
[data-page="router"] .rg-stages>li[data-rh-stage-done="true"]>.lx-lbl{color:var(--ink);font-weight:var(--fw-semibold)}
[data-page="router"] .rg-stages>li:not(:last-child)::after{content:"";width:24px;height:1px;flex:none;background:var(--border-strong)}

/* ---------- 보고서 · 감사 로그 (HANDOFF 5.8) ----------
   화면 머리: the first line's sentence -- the last report confirmed (보고서), the records under the conditions (감사 로그),
   each made of the server's own figures -- takes the design's headline (clamp 22~28, 700). 감사 로그's lists are the
   design's one card (white, its line, 14px corner) with rows 12/20 inside and the time in the mono face.
   Not drawn yet, each waiting on an unmerged server PR (the screen shows what it shows today until then):
   - 프레임워크 점검's four states (충족 · 위반 · 근거 부족 · 범위 밖) are B16, PR #114 (items[].state4, summary.state4);
     a confirmed report without them keeps its five states;
   - 감사 로그's chips 정책 변경 · 설정 (B12 kind=policy|settings|etc, PR #117 merged) stay the screen's present ones
     until the chips are redrawn; 자동 조치 · 개인 기록 조회 as chips are B17. A record's before → after (B12) is drawn
     below. A report taken out (report_downloaded, B20 PR #115) is named with its form in the list already. */
:is([data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="coverage"]) .pr-first>.lx-lede,[data-page="audit-log"] .ra8-first>.lx-lede{font-size:var(--fs-page);font-weight:700;line-height:1.35;letter-spacing:-.025em;text-wrap:pretty}
[data-page="audit-log"] .lx-t.lx-t-cols{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
[data-page="audit-log"] .lx-t.lx-t-cols>.lx-tr{padding:12px 20px}
[data-page="audit-log"] .lx-t.lx-t-cols>.lx-tr.lx-th{padding-top:10px;padding-bottom:10px;border-radius:0;border-bottom:1px solid var(--divider)}
[data-page="audit-log"] .lx-t.lx-t-cols>.lx-tr:is(.lx-is-sel,[aria-selected="true"]){border-radius:0}
[data-page="audit-log"] .ra8-audit .ra8-clock{font-family:var(--font-mono);font-size:var(--fs-2xs)}

/* One line where the design has one (QA 1280 · 1440 · 1920, dev too): 감사 로그's time -- the press that opens a record --
   is its day and its clock side by side, never two lines, in a time column wide enough for both; 보고서's framework
   name is one line cut with an ellipsis (redesign-ra*'s three-line clamp is let go here), its row the same height as
   the others. The name, the press and the record are the screen's. */
[data-page="audit-log"] .ra8-audit{--lx-cols:minmax(184px,.9fr) minmax(0,1.2fr) minmax(60px,.5fr) minmax(0,1.2fr) minmax(clamp(0px,calc((100% - 916px) * 3.5),420px),1.3fr);--lx-cols-narrow:minmax(184px,.9fr) minmax(0,1.7fr) minmax(60px,.5fr)}
[data-page="audit-log"] .ra8-open{flex-direction:row;flex-wrap:nowrap;align-items:baseline;gap:6px;white-space:nowrap}
:is([data-page="reports"],[data-page="evidence"],[data-page="compliance"],[data-page="coverage"]) table.lx-t.pr-frameworks .lx-nm.lx-ell{display:block;max-width:100%;overflow:hidden;-webkit-line-clamp:unset;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 감사 로그: 바뀌기 전 → 바뀐 뒤 (HANDOFF 5.8; server B12, PR #117) ----------
   In the record's panel, every record the server said both sides of: each changed key in a line -- its name in the
   muted grey, the value before in the red wash, an arrow, the value after in the green wash, the values in mono. The
   panel can stand outside the page's section, so the rules are by the list's own class. Under 480px a line stacks. */
.ra8-sides{display:flex;flex-direction:column;gap:8px}
.ra8-sides>ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.ra8-sides li{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr) 16px minmax(0,1fr);align-items:center;gap:10px;font-size:var(--fs-xs)}
.ra8-side-k{min-width:0;color:var(--muted);overflow-wrap:anywhere}
.ra8-side{min-width:0;padding:6px 8px;border-radius:6px;font-family:var(--font-mono);font-size:var(--fs-2xs);overflow-wrap:anywhere}
.ra8-side :is(code,.lx-mono){padding:0;background:none;color:inherit;font-size:inherit}
.ra8-side[data-mb-audit-side="before"]{background:var(--st-unmanaged-bg);color:var(--st-unmanaged-fg)}
.ra8-side[data-mb-audit-side="after"]{background:var(--st-managed-bg);color:var(--st-managed-fg)}
.ra8-side .lx-muted{color:inherit;opacity:.75}
.ra8-side-to{color:var(--faint);text-align:center}
@media (max-width:480px){.ra8-sides li{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr)}.ra8-side-k{grid-column:1 / -1}}

/* ---------- 설정 (HANDOFF 5.9) ----------
   A settings screen is the three blocks: the setting line (portalUi.setRow, the shared .lx-setrow), the table (.lx-t,
   the common sizes above) and the number cards (portalUi.figures). The line takes the design's: 15px above and below,
   the name 14px 600, its line 12.5px 1.5 under it, the control at the right; a switch 38 by 22. The inner contents of
   설정 (216px, 조직 · 수집 · 운영 · AI; a select under 1080px) are the shell's; the dot of a screen with a problem is
   below. */
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-setrow:not(:first-child){padding-top:15px}
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-setrow:not(:last-child){padding-bottom:15px}
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-setrow>div:first-child>b{font-size:var(--fs-body)}
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-setrow>div:first-child>.lx-sub{margin-top:3px;font-size:var(--fs-xs);line-height:1.5;text-wrap:pretty}
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-setrow{align-items:center}
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-sw{width:38px;height:22px}
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-sw::after{width:18px;height:18px}
:is([data-page="members"],[data-page="systems"],[data-page="devices"],[data-page="data-connections"],[data-page="organization"],[data-page="ax-connections"],[data-page="customer-gateway"],[data-page="oauth-ai-apps"],[data-page="notifications"],[data-page="managed-criteria"],[data-page^="web-ai-"],[data-page="desktop-ai-settings"],[data-page="drawing-policy"],[data-page^="gemini-"],[data-page="outage-mode-settings"],[data-page="admin-consent"],[data-page="shadow-ai-candidates"],[data-page="retention"],[data-page="llm-usage"],[data-page="ai-model-connection"],[data-page="gw-raw-record"]) .lx-sw:is(.lx-on,[aria-checked="true"])::after{left:18px}

/* ---------- 설정 목차의 점 (HANDOFF 5.9 "빨강 · 주황 · 잉크"; server B24, PR #132) ----------
   settings-problems.js puts the worst state of an entry's problems on it through portalShell.setTabMark: the entry's
   data-mark, its words in its title and once for a reader. The dot is 7px at the entry's right end. The states differ
   in shape as well as colour (HANDOFF 8, colour + shape + words): bad a filled red circle, warn an orange diamond,
   info an ink ring. A topic not checked has no mark, so no dot; no dot is never said 정상. */
:is(#menu-snav,#menu-tabs) [data-entry][data-mark]::after{content:"";flex:0 0 auto;box-sizing:border-box;width:7px;height:7px;border-radius:50%}
#menu-tabs [data-entry][data-mark]::after{margin-left:2px}
#menu-snav [data-entry][data-mark]>.lx-n{margin-left:auto}
:is(#menu-snav,#menu-tabs) [data-entry][data-mark="bad"]::after{background:var(--st-unmanaged)}
:is(#menu-snav,#menu-tabs) [data-entry][data-mark="warn"]::after{border-radius:1px;background:var(--st-review);transform:rotate(45deg) scale(.9)}
:is(#menu-snav,#menu-tabs) [data-entry][data-mark="info"]::after{border:1.5px solid var(--ink);background:transparent}
@media (forced-colors:active){:is(#menu-snav,#menu-tabs) [data-entry][data-mark]::after{forced-color-adjust:none;border:1.5px solid CanvasText}}

/* ---------- 5단계: '같은 패턴' 화면 (REPORT 6절 -- LLM Gateway 추가 탭 · Router 추가 탭 · AI 레드티밍 추가 화면) ----------
   The screens the design did not draw are made of its three blocks -- the setting line, the table, the number card --
   from the shared parts (click-parts.css) and the step-4 common sizes above, whose scope already holds every one of
   them. What follows names only their own parts that stand apart from those. Markup, data-testid, API calls,
   permissions and old addresses stay as they are; 개요 (gw-overview) and its figures are HANDOFF 5.3's branch. */

/* 숫자 카드: 운영 상태의 다섯 수, 비용의 네 종류 (both .rm9-stats) -- the design's number card: a white card on its line,
   14px corner, 16/18 inside; the name 12.5 in grey, the number 26 700, the line under it 12 in the faint grey. A figure
   that opens the request list keeps its link and its press; its hover is the stronger line. A figure with nothing to
   count stays the grey dash that says why (the screen's). */
:is([data-page="gw-ops"],[data-page="cost"]) .rm9-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
:is([data-page="gw-ops"],[data-page="cost"]) .rm9-stats>.lx-stat{gap:2px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
:is([data-page="gw-ops"],[data-page="cost"]) .rm9-stats>:is(a,button).lx-stat{padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
:is([data-page="gw-ops"],[data-page="cost"]) .rm9-stats>:is(a,button).lx-stat:hover{border-color:var(--border-strong);background:var(--surface)}
:is([data-page="gw-ops"],[data-page="cost"]) .rm9-stats>.lx-stat>.lx-lbl:first-child{color:var(--muted);font-size:var(--fs-xs)}
:is([data-page="gw-ops"],[data-page="cost"]) .rm9-stats>.lx-stat>.lx-fig-s{margin-top:4px;font-size:var(--fs-kpi);font-weight:700;line-height:1.2;letter-spacing:-.03em}
:is([data-page="gw-ops"],[data-page="cost"]) .rm9-stats>.lx-stat>.lx-lbl:last-child:not(:first-child){margin-top:2px;color:var(--muted);font-size:var(--fs-2xs)}

/* Router › 평가: the screen's four figures (평가 후보 · 평가 중 · 공용 크레딧 · 자동 최초 평가) as number tiles on
   the page (Phase 4: the headline stands above them, so they are the page's number cards) -- the card line and corner,
   16/20 inside, the number 26. */
[data-page="router-evaluation"] [data-re-figures]{gap:var(--gap)}
[data-page="router-evaluation"] [data-re-figures]>.lx-stat{padding:var(--sp-4) var(--sp-5);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="router-evaluation"] [data-re-figures]>.lx-stat>.lx-lbl:first-child{font-size:var(--fs-xs)}
[data-page="router-evaluation"] [data-re-figures]>.lx-stat>.lx-fig-s{margin-top:var(--sp-1);font-size:var(--fs-kpi);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:var(--ls-head)}

/* LLM Gateway › 구독 중계 (gw-local-relay): each fact of 지금 상태 is a pair (its own <div> of <dt> and <dd>), which the
   shared two-column .lx-kv set side by side with the name of the second in the 112px column. Here each pair is a
   setting line of its own: the name at the left in grey, the value beside it, the soft divider between lines; under
   560px the value goes under its name. */
[data-page="gw-local-relay"] .lx-kv{grid-template-columns:minmax(0,1fr);gap:0}
[data-page="gw-local-relay"] .lx-kv>div{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--divider-soft)}
[data-page="gw-local-relay"] .lx-kv>div:last-child{border-bottom:0}
[data-page="gw-local-relay"] .lx-kv>div>dt{color:var(--muted);font-size:var(--fs-xs)}
[data-page="gw-local-relay"] .lx-kv>div>dd{font-size:var(--fs-sm);line-height:1.6}
@media (max-width:560px){[data-page="gw-local-relay"] .lx-kv>div{grid-template-columns:minmax(0,1fr)}}

/* LLM Gateway › 사용 한도 (gw-limits): 'Gateway 미반영 설정' -- each setting the Gateway has not taken yet is a setting
   line in the note: its name at the left, its state badge (Pending · Failed) and its "?" held at the right (placed,
   not flexed, so the name keeps the spacing of its own words), the soft divider between lines. The lines, their words
   and the reasons under 자세히 are the screen's. */
[data-page="gw-limits"] .lim-held ul{margin:8px 0 0;padding:0;list-style:none}
[data-page="gw-limits"] .lim-held li{position:relative;min-height:36px;padding:8px 112px 8px 0;border-top:1px solid var(--divider-soft);font-size:var(--fs-sm);line-height:20px}
[data-page="gw-limits"] .lim-held li+li{margin-top:0}
[data-page="gw-limits"] .lim-held li>:is(.lx-bdg,.help-trigger){position:absolute;top:50%;margin:0;transform:translateY(-50%)}
[data-page="gw-limits"] .lim-held li>.lx-bdg{right:30px}
[data-page="gw-limits"] .lim-held li>.help-trigger{right:0}

/* AI 레드티밍 추가 화면 (U6: 위치 · 겉모양만) -- 공격 세트 · 반복 평가 · 교전 규칙 · 협업 · 정책 초안 · 규정·프레임워크. Their own
   cards take the design card's inside and title (18/24, 15px 600); their own tables the step-4 table: the head 12 in
   grey on the plain ground over the divider, the rows 13.5 on the soft divider, 10/12 inside. Nothing else moves. */
:is([data-page="redteam-attack-sets"],[data-page="redteam-recurrence"],[data-page="redteam-engagement"],[data-page="redteam-collaboration"],[data-page="redteam-policy-draft"],[data-page="redteam-frameworks"]) :is(.rto-card,.rtc-card){padding:18px 24px 20px}
:is([data-page="redteam-attack-sets"],[data-page="redteam-recurrence"],[data-page="redteam-engagement"],[data-page="redteam-collaboration"],[data-page="redteam-policy-draft"],[data-page="redteam-frameworks"]) :is(.rto-card,.rtc-card)>h3{margin-bottom:12px;font-size:var(--fs-card-title);font-weight:600}
:is([data-page="redteam-attack-sets"],[data-page="redteam-recurrence"],[data-page="redteam-engagement"],[data-page="redteam-collaboration"],[data-page="redteam-policy-draft"],[data-page="redteam-frameworks"]) :is(.rto-table,.rt-fw-table,.rtc-history) :is(th,td){padding:10px 12px;border-bottom-color:var(--divider-soft);font-size:var(--fs-sm)}
:is([data-page="redteam-attack-sets"],[data-page="redteam-recurrence"],[data-page="redteam-engagement"],[data-page="redteam-collaboration"],[data-page="redteam-policy-draft"],[data-page="redteam-frameworks"]) :is(.rto-table,.rt-fw-table,.rtc-history) thead th{border-bottom-color:var(--divider);background:transparent;color:var(--muted);font-size:var(--fs-2xs);font-weight:500}
:is([data-page="redteam-attack-sets"],[data-page="redteam-recurrence"],[data-page="redteam-engagement"],[data-page="redteam-collaboration"],[data-page="redteam-policy-draft"],[data-page="redteam-frameworks"]) :is(.rto-sub,.rto-empty,.rt-fw-notice,.rt-fw-hint,.rt-fw-meta){font-size:var(--fs-xs)}

/* ---------- Phase 4 (2026-11-12): LLM Gateway screens -- layout only, tokens only ---------- */
/* 구독 중계: Mac and Windows side by side (one column under 900); the devices' table in its own card scrolls inside it,
   its short ids on one line; the choice of devices (segment) and 켜기 · 끄기 on one row; a long explanation in a fold
   under its line. */
[data-page="gw-local-relay"] .glr-os{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
@media (max-width:900px){[data-page="gw-local-relay"] .glr-os{grid-template-columns:minmax(0,1fr)}}
[data-page="gw-local-relay"] .glr-more{margin-top:var(--sp-1)}
[data-page="gw-local-relay"] .glr-more>.lx-sub,[data-page="gw-local-relay"] .glr-more>.lx-list{margin-top:var(--sp-1)}
[data-page="gw-local-relay"] .lx-lede+.glr-more{margin-top:calc(-1 * var(--sp-2))}
[data-page="gw-local-relay"] [data-gw-local-relay-os]>.lx-h3+p{margin-top:var(--sp-1)}
[data-page="gw-local-relay"] .glr-devices{max-width:100%;margin-top:var(--sp-3);overflow-x:auto}
[data-page="gw-local-relay"] .glr-devices table.lx-t{width:100%;min-width:560px}
[data-page="gw-local-relay"] .glr-devices table.lx-t :is(th,td):first-child{white-space:nowrap}
[data-page="gw-local-relay"] .glr-devices table.lx-t td .lx-sub{margin-top:2px}
[data-page="gw-local-relay"] .glr-switch{flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
[data-page="gw-local-relay"] [data-gw-local-relay-part] .lx-empty{margin-top:var(--sp-3)}

/* ---------- Phase 4: Gateway 정책 (control) and 기기 정책 (gw-endpoint) ---------- */
/* control: the headline leads, its primary at the row's end; the scope toolbar under it; a status with no words is not drawn */
[data-page="control"] .cp-first{align-items:center;gap:var(--sp-3);flex-wrap:wrap}
[data-page="control"] .cp-first>.lx-lede{margin:0;min-width:0}
[data-page="control"] #cp-headline:empty{display:none}
/* the setup steps: a numbered row, an arrow between steps */
[data-page="control"] .cp-steps{list-style:none;margin:0;padding:0;gap:var(--sp-2) var(--sp-3);color:var(--muted)}
[data-page="control"] .cp-steps>li{display:inline-flex;align-items:center;gap:var(--sp-2)}
[data-page="control"] .cp-steps>li+li::before{content:"→";color:var(--faint)}
/* gw-endpoint: the chips' row ends with CSV; the counts are one quiet row under it */
[data-page="gw-endpoint"] .epv-quiet{gap:var(--sp-1) var(--sp-4);color:var(--muted)}
[data-page="gw-endpoint"] .epv-quiet>*{margin:0}
/* the collection stop: its state on a line of its own, the device counts and what it does not reach quiet under it */
[data-page="gw-endpoint"] [data-ep-halt]>b{flex:1 0 100%}

/* ---------- Phase 4: 탐지 내역 (gw-detections) and 가드레일 (gw-guardrails) ---------- */
/* 탐지 내역: the headline (the screen's name) with 탐지 | 허용 목록 and CSV at its right; its quiet line only when the
   view says something. The filter line is one row -- the chips, then the search, the period and 필터 at its end -- and
   where it cannot be, the search, period and 필터 go under the chips together, never one alone. */
[data-page="gw-detections"] .gd-first{flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
[data-page="gw-detections"] .gd-first>.lx-lede>.lx-lede-sub:empty{display:none}
[data-page="gw-detections"] .gd-filters[data-gd-filters]{flex-wrap:wrap;align-items:center;row-gap:var(--sp-2)}
[data-page="gw-detections"] .gd-filters[data-gd-filters]>.gd-chips{flex:none;flex-wrap:nowrap}
[data-page="gw-detections"] .gd-filters[data-gd-filters]>.gd-tools{flex:1 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--sp-2);min-width:0}
[data-page="gw-detections"] .gd-filters[data-gd-filters]>.gd-tools>.gd-find{flex:1 1 200px;min-width:140px;max-width:280px}
[data-page="gw-detections"] .gd-filters[data-gd-filters]>.gd-tools>:is(.lx-seg,.gd-narrow){flex:none}
[data-page="gw-detections"] .gd-filters[data-gd-filters] .gd-narrow>.gd-narrow-body{right:0;left:auto}
@media (max-width:560px){[data-page="gw-detections"] .gd-filters[data-gd-filters]>.gd-chips{flex:1 1 100%;flex-wrap:wrap}}
/* A row is two lines at most: 누가's person, and one grey line (기기 · 도구 · 모델 · 앱 · 팀) cut with an ellipsis; 규칙
   keeps its name on one line. */
[data-page="gw-detections"] .gd-table td{vertical-align:middle}
[data-page="gw-detections"] .gd-table td>[data-gd-sender-line]{max-width:320px}
[data-page="gw-detections"] .gd-table tbody td:nth-child(3){white-space:nowrap}
/* 가드레일: the headline with the company's week its quiet line. The summary over the table is three lines -- the totals;
   the stage and the scope; what is not applied, short items with their sentence on hover. 동작's segment is as compact
   as the design's (each option is a label, and the old sheet's label margin stood every box 58px high); the state and
   its way to Gateway 정책 stand apart; the two folds are a quiet chevron line each; 문장 검사 is the body's width (the
   check box's .gr-check name had made its place an inline row the card's content wide). */
[data-page="gw-guardrails"] .gr-first>.lx-lede>.lx-lede-sub:empty{display:none}
[data-page="gw-guardrails"] .gr-scope-top>.gr-refresh{margin-left:auto}
[data-page="gw-guardrails"] [data-gu-protection-summary]{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3)}
[data-page="gw-guardrails"] [data-gu-protection-summary]>:is(b,ul){flex:1 1 100%}
[data-page="gw-guardrails"] [data-gu-protection-summary]>p{margin:0}
[data-page="gw-guardrails"] [data-gu-protection-summary]>ul{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:0;padding:0;list-style:none}
[data-page="gw-guardrails"] [data-gu-protection-summary]>ul>li{margin:0}
[data-page="gw-guardrails"] [data-gu-protection-summary]>ul>li>.lx-lbl{margin-left:var(--sp-1)}
[data-page="gw-guardrails"] .gr-act.gr-seg>.gr-seg-o{margin:0}
[data-page="gw-guardrails"] .gp-table [data-testid="gw-guardrails-policy-open"]{margin-left:var(--sp-3)}
[data-page="gw-guardrails"] :is(.gr-guards>[data-gu-advanced],[data-gu-body]>[data-gu-results])>summary{display:flex;align-items:center;gap:var(--sp-2);width:fit-content;list-style:none;color:var(--ink-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
[data-page="gw-guardrails"] :is(.gr-guards>[data-gu-advanced],[data-gu-body]>[data-gu-results])>summary::-webkit-details-marker{display:none}
[data-page="gw-guardrails"] :is(.gr-guards>[data-gu-advanced],[data-gu-body]>[data-gu-results])>summary::before{content:"";flex:none;width:12px;height:12px;background:var(--ds-chevron) center/12px 12px no-repeat;transform:rotate(-90deg)}
[data-page="gw-guardrails"] :is(.gr-guards>[data-gu-advanced],[data-gu-body]>[data-gu-results])[open]>summary::before{transform:none}
[data-page="gw-guardrails"] :is(.gr-guards>[data-gu-advanced],[data-gu-body]>[data-gu-results])>summary .lx-lbl{margin-left:0}
[data-page="gw-guardrails"] .gr-main>.gr-check:not([hidden]){display:block;font-size:inherit;white-space:normal}
[data-page="gw-guardrails"] .gr-check .gp-check-text>textarea{resize:none}

/* ---------- Phase 4: 운영 상태 · 요청 기록 · 키 · 비용 · 사용 한도 · MCP ---------- */
/* The first row's headline (the screen's name or its sentence) and, under it, the collection's state on the quiet line
   (gwConsole.firstRow's sub): the state starts the line, no gap before it; a line with no state yet takes no room. */
:is([data-page="gw-ops"],[data-page="cost"],[data-page="gw-keys"],[data-page="gw-requests"]) .gwc-first .lx-lede-sub [data-gwc-envelope]{margin:0}
:is([data-page="gw-ops"],[data-page="cost"],[data-page="gw-keys"],[data-page="gw-requests"]) .gwc-first .lx-lede-sub:empty,[data-page="gw-requests"] .gwc-first .lx-lede-sub:has(>[data-gwc-envelope-slot]:empty){display:none}
:is([data-page="gw-ops"],[data-page="cost"],[data-page="gw-keys"],[data-page="gw-requests"]) .gwc-first>.lx-lede>[data-gwc-title]+[data-testid]:not(:empty){margin-left:var(--sp-2)}
/* 요청 기록: 요청 | 세션 and the decision chips, the search and 필터 on one row (필터 at its end); a row's 키 · 앱 cell is
   two lines -- who, then one grey line of device · tool · key · app. */
[data-page="gw-requests"] .rm9-page>.rm9-body{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--sp-3)}
[data-page="gw-requests"] .rm9-page>.rm9-body>*{flex:1 0 100%;min-width:0}
[data-page="gw-requests"] .rm9-page>.rm9-body>[data-gwc-views-slot]{flex:0 0 auto}
[data-page="gw-requests"] .rm9-page>.rm9-body>[data-gwc-views-slot]+.rm9-conditions{flex:1 1 480px}
[data-page="gw-requests"] .rm9-conditions>[data-gwc-filter-toggle]{order:3}
[data-page="gw-requests"] .rm9-req-cols .rm9-who-line{display:block}
[data-page="gw-requests"] :is(.rm9-reasons,.rm9-conditions) .lx-chip .reason-label{text-decoration:none}
/* 운영 상태: the cards under the figures stand at their own height (A14 G3-22: stretched, a short card stood half empty). */
[data-page="gw-ops"] .rm9-ops-cards{align-items:start}
/* 비용: 묶기 (and 찾기 · 순서 when there are rows to find) and the table's CSV on one row over the table. */
[data-page="cost"] .rm9-page>.rm9-body{flex-direction:row;flex-wrap:wrap;align-items:center}
[data-page="cost"] .rm9-page>.rm9-body>*,[data-page="cost"] .rm9-page>.rm9-body>[data-gwc-cost-groups]>*{flex:1 0 100%;min-width:0}
[data-page="cost"] .rm9-page>.rm9-body>[data-gwc-cost-groups]{display:contents}
[data-page="cost"] .rm9-page>.rm9-body>[data-gwc-cost-tools-at]{flex:1 1 0}
[data-page="cost"] .rm9-page>.rm9-body>[data-gwc-cost-tools-at]+[data-gwc-cost-groups]>[data-gwc-csv-row]:first-child{flex:0 0 auto}
/* 비용: a kind with no record says 기록 없음 at the section size in the faint grey, not as a 26px figure. */
[data-page="cost"] .rm9-stats>.lx-stat[data-gwc-amount="none"]>.lx-fig-s{color:var(--muted);font-size:var(--fs-section);font-weight:var(--fw-semibold);letter-spacing:0}
/* 키: the search box no wider than its text needs beside 앱 and 순서. */
[data-page="gw-keys"] .gwk [data-gwc-keys-find]>.lx-find{flex:0 1 360px}
/* 키: notes holding only a hidden mark take no place (no double gap between the views row and the find row). */
[data-page="gw-keys"] .gwk>.gwk-notes:not(:has(>:not([hidden]))){display:none}

/* ---------- Phase 4 (2026-11-12): Router screens -- layout only, tokens only ---------- */
/* Router › 평가 (router-evaluation): the headline row (the sentence, its ? and read time, 새로고침 at its right); the
   preparation as one soft panel -- what to do with its one button at the line's end, the groups under a divider; the
   candidates' find box, category and 찾기 in the card's head, one row that wraps under the title when narrow. */
[data-page="router-evaluation"] .re-first{align-items:flex-start;gap:var(--sp-3)}
[data-page="router-evaluation"] .re-head{gap:var(--sp-4)}
[data-page="router-evaluation"] .re-prep{display:grid;gap:var(--sp-3)}
[data-page="router-evaluation"] .re-prep-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3)}
[data-page="router-evaluation"] .re-prep-h>div{flex:1 1 320px;min-width:0}
[data-page="router-evaluation"] .re-prep-h p{margin:2px 0 0}
[data-page="router-evaluation"] .re-prep-groups{display:grid;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--border)}
[data-page="router-evaluation"] [data-re-list]>.lx-card-h{flex-wrap:wrap}
[data-page="router-evaluation"] .re-search{flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
[data-page="router-evaluation"] .re-search>.lx-find{width:240px;max-width:100%}
[data-page="router-evaluation"] table.lx-t[data-re-candidates] td{vertical-align:middle}
/* Router › 추천 (router-diagnosis): the headline with the read time as its quiet line, a way on at its right. */
[data-page="router-diagnosis"] .rg-top{align-items:flex-start}
[data-page="router-diagnosis"] .rg-page>.lx-lede{margin-bottom:var(--sp-1)}
/* Router › 적용 기록 (router): the headline and the find box on one row; with no recommendation yet, the empty card
   holds its words and the way to 추천 under them, centred. */
[data-page="router"] .rh-first{align-items:flex-start;gap:var(--sp-3)}
[data-page="router"] .rh-empty{display:grid;justify-items:center;gap:var(--sp-3);text-align:center}
[data-page="router"] .rh-empty>.rg-go{justify-content:center}

/* ---------- Phase 4 (2026-11-12): customer Gateway · raw record · AI usage -- layout only, tokens only ---------- */
/* AI 사용량: the headline and the month select on one line, the select held at the line's top right; Click Agent's unit
   and the billing estimate (two short cards) side by side at the card gap, one under the other on a narrow screen. */
[data-page="llm-usage"] [data-llm-head]{align-items:flex-start;flex-wrap:nowrap;gap:var(--sp-4)}
[data-page="llm-usage"] [data-llm-head]>select{flex:none;width:auto}
[data-page="llm-usage"] [data-llm-pair]{gap:var(--gap)}
@media (max-width:900px){[data-page="llm-usage"] [data-llm-pair]{grid-template-columns:minmax(0,1fr)}}
/* 설정 › 관리 기준 (managed-criteria.js, 디자인 11-15): the conditions as the shared .lx-t-cols list. A meaning keeps one
   line beside the others (its whole text on the ?); an off row's text is --muted with its counts .lx-na (grey, never 0);
   a 해당 없음 row is grey only -- never the yellow of 확인 필요. A count and its unit never break apart. Under 600px a
   row stacks: name and switch, meaning, chips, counts each with its column's name; the head row leaves the eye. */
[data-page="managed-criteria"] .mc-t>.lx-tr{align-items:center;column-gap:var(--sp-4)}
[data-page="managed-criteria"] .mc-title{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--sp-1)}
[data-page="managed-criteria"] .mc-help{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-page="managed-criteria"] .mc-targets{flex-direction:row;flex-wrap:wrap;gap:var(--sp-1)}
[data-page="managed-criteria"] .mc-count{display:block}
[data-page="managed-criteria"] .mc-n{white-space:nowrap}
[data-page="managed-criteria"] .mc-switch{align-items:flex-end}
[data-page="managed-criteria"] .lx-na{color:var(--muted)}
[data-page="managed-criteria"] .mc-t>.lx-tr:is([data-dim="true"],[data-managed-criteria-na-row]) .lx-cell{color:var(--muted)}
[data-page="managed-criteria"] .mc-t>.lx-tr[data-managed-criteria-na-row] .lx-sw:disabled{cursor:not-allowed}
@media(max-width:600px){
  [data-page="managed-criteria"] .mc-t{--lx-cols:minmax(0,1fr) auto}
  [data-page="managed-criteria"] .mc-t>.lx-tr:not(.lx-th){row-gap:var(--sp-2);align-items:start}
  [data-page="managed-criteria"] .mc-t>.lx-tr.lx-th{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-page="managed-criteria"] .mc-name{grid-row:1;grid-column:1}
  [data-page="managed-criteria"] .mc-switch{grid-row:1;grid-column:2}
  [data-page="managed-criteria"] :is(.mc-targets,.mc-count){grid-column:1/-1}
  [data-page="managed-criteria"] .mc-help{white-space:normal}
  [data-page="managed-criteria"] .mc-count[data-label]::before{content:attr(data-label) " ";color:var(--muted);font-size:var(--fs-xs)}
  [data-page="managed-criteria"] .mc-history{--lx-cols:minmax(0,1fr)}
  [data-page="managed-criteria"] .mc-history>.lx-tr.lx-th{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}