@charset "utf-8";
/* Redesign parts (리디자인 명세 4·6·9.2·9.3절, RF1). The one sheet of the new parts every screen track uses.

   이름 대응: the design's class (design/redesign-1012/preview/click.css) with "lx-" before it, every class alike --
   the modifiers too. A state may be said by ARIA instead of the modifier class, drawn the same.
     .btn .btn-p .btn-g .btn-d .btn-s .btn-l   -> .lx-btn .lx-btn-p .lx-btn-g .lx-btn-d .lx-btn-s .lx-btn-l
     .ibtn .ibtn.line .ibtn.act               -> .lx-ibtn .lx-ibtn.lx-line (= .lx-ibtn-line) .lx-ibtn.lx-on (or [aria-pressed|expanded="true"])
     .chip.on / .seg .on / .choice.on / .opt.on -> .lx-chip.lx-on / .lx-seg .lx-on / .lx-choice.lx-on / .lx-opt.lx-on
                                                   or [aria-pressed="true"] / [aria-selected="true"] / [aria-checked="true"]
     .sw.on                                     -> .lx-sw.lx-on or .lx-sw[aria-checked="true"] (role="switch")
     .tr.is-sel .tr.hl .tr.th                   -> .lx-tr.lx-is-sel (or [aria-selected="true"]) .lx-tr.lx-hl .lx-tr.lx-th
     (명세 6.6, no class in the design)         -> .lx-drop .lx-dropsum .lx-t-cols (--lx-cols, --lx-cols-narrow)
     .st .st-ok|info|bad|warn|block|unk|off     -> .lx-st .lx-st-ok ...           (portalUi.st)
     .bdg .bdg-ok|info|bad|warn|unk|block|click -> .lx-bdg .lx-bdg-ok ...         (portalUi.badge)
     .sev .sev-crit|high|mid|low                -> .lx-sev .lx-sev-crit ...       (portalUi.sev)
     .spec .spec-lg .spec-sm .s-ok ...          -> .lx-spec .lx-spec-lg .lx-spec-sm .lx-s-ok ... (portalUi.spec)
     .na .tag .n .i .dot                        -> .lx-na .lx-tag .lx-n .lx-i .lx-dot           (portalUi.na, portalUi.tag)
     .aside .aside-w .aside-h .aside-t          -> .lx-aside .lx-aside-w .lx-aside-h .lx-aside-t (portalUi.panel)
     .pager .selbar .draftbar                   -> .lx-pager .lx-selbar .lx-draftbar (portalUi.pager, selbar, draftBar)
     .note .note-warn .note-bad .empty          -> .lx-note .lx-note-warn .lx-note-bad .lx-empty (portalUi.writeRefused)
     .click .click-h .opt .opt-n .opt-tag .who .who-l .ask -> .lx-click .lx-click-h .lx-opt ... (Click 제안, RM4)
     .stage .glass .d-chip .d-seg .d-btn .d-btn-p .d-ibtn .d-li .d-dim .d-bad -> .lx-stage .lx-glass .lx-d-chip ...
     and so for .page .split .cols .c-8-4 .c-7-5 .c-5-7 .c-2 .c-3 .c-4 .row .stack .push .grow .lede .h2 .h3 .fig
     .fig-xl .fig-s .unit .lbl .muted .sub .mono .ell .c-ok .c-bad .c-warn .c-unk .c-info .c-click .lk .card .card-h
     .inset .hr .field .flabel .in .sel .find .find-lg .ck .choices .choice .t .th .r .nm .cell .kv .tl .tl-i .tl-d
     .lane .lane-h .node .steps .step .stat .cov .sig .chain .bars .av .av-lg .rail .fc .chip-add .grp .inc .inc-h
     .inc-b .mlist .mi .mi-n .setrow .full .sect .sect-h .li.
   The frame's classes (.app .side .brand .org .nav* .me .main .top .h1 .crumb .tabs .tab .util .cmd .kbd .pip
   .snav* .pop .pop-h .ni) take the same rule in redesign-rf2.css (RF2).

   Colours: the tokens are style.css's :root (명세 4절's values). A state colour on words is its -text token (--ds-ok-text ...);
   --ds-ok/info/danger/caution/unknown fill dots and bands. --ds-new, --ds-nav-*, --line, --muted are not used here.

   The old sheets' element rules (button, input, select, textarea, label, h2-h4, p, ul) do not reach a part: what they set
   and a part does not is undone below for the parts' elements, before the parts' own rules. A rule of an old screen's
   sheet on its own descendants (".xx button") is not undone: a part is not put inside an old screen's container. */


/* ---------- Old element rules undone for the parts ---------- */
:where([class^="lx-"],[class*=" lx-"]){word-break:keep-all;overflow-wrap:break-word;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
:where(.lx-page,.lx-aside,.lx-card,.lx-inset,.lx-click,.lx-empty,.lx-note,.lx-kv,.lx-tl,.lx-inc,.lx-sect,.lx-setrow,.lx-mlist,.lx-rail,.lx-stage,.lx-draftbar,.lx-toast) :where(h1,h2,h3,h4,p,dl,dt,dd,ul,ol,figure){margin:0}
:where(.lx-page,.lx-aside,.lx-card,.lx-inset,.lx-click,.lx-tl,.lx-inc,.lx-sect,.lx-mlist,.lx-rail,.lx-stage) :where(ul,ol){padding:0;list-style:none}
:is(.lx-btn,.lx-ibtn,.lx-chip,.lx-sel,.lx-sw,.lx-opt,.lx-choice,.lx-stat,.lx-node,.lx-mi,.lx-li,.lx-sig,.lx-cov,.lx-nm,.lx-lk,.lx-tr,.lx-fc,.lx-ck,.lx-field,.lx-flabel,.lx-in,.lx-more-item,.lx-d-chip,.lx-d-btn,.lx-aside-x,.lx-x),.lx-seg>:is(button,a),.lx-d-seg>button,.lx-field>label,.lx-find input,.lx-ask input,.lx-ck input,.lx-fc input,.lx-choice input{margin:0;filter:none;transform:none;min-height:0;box-shadow:none;text-transform:none;letter-spacing:inherit}
:is(.lx-btn,.lx-ibtn,.lx-chip,.lx-sel,.lx-sw,.lx-opt,.lx-choice,.lx-stat,.lx-node,.lx-mi,.lx-li,.lx-sig,.lx-cov,.lx-nm,.lx-lk,.lx-tr,.lx-more-item,.lx-d-chip,.lx-d-btn,.lx-aside-x,.lx-x):is(:hover,:active,:focus,:disabled,[aria-disabled="true"]),.lx-seg>:is(button,a):is(:hover,:active),.lx-d-seg>button:is(:hover,:active){filter:none;transform:none}
/* A part drawn as a button or an <a> starts bare. :where keeps this under the part's own rule below: as
   :is(button,a) it outweighed .lx-lk and .lx-nm (a link came out in the words' colour and weight: RA10 10-12) and
   took the padding and the line of .lx-li, .lx-sig and .lx-stat. */
:where(button,a):is(.lx-nm,.lx-lk,.lx-li,.lx-sig,.lx-cov,.lx-stat,.lx-x){padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
:is(.lx-ck,.lx-fc,.lx-flabel,.lx-field),.lx-field>label{color:inherit;font-size:inherit}
.lx-ck input,.lx-fc input,.lx-choice input{padding:0;border-radius:0}
.lx-find input,.lx-ask input{width:auto;height:auto;padding:0;border-radius:0;box-shadow:none}
.lx-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 배치 ---------- */
.lx-page{display:flex;flex-direction:column;gap:20px;min-width:0;padding:24px 28px 40px}
/* In the frame the page is the frame's <main>; a screen's own .lx-page inside it adds no second margin (PC-3 10-12:
   44px over, 60 beside and 88 under a list). */
.lx-page .lx-page{padding:0}
.lx-split{display:flex;align-items:stretch;min-width:0}
.lx-split>.lx-split-main,.lx-split>.lx-page{flex:1 1 0;min-width:0}
.lx-cols{display:grid;gap:20px;align-items:start}
.lx-cols.lx-eq{align-items:stretch}
.lx-c-8-4{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.lx-c-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.lx-c-5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lx-c-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lx-c-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lx-c-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lx-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lx-stack{display:flex;flex-direction:column;gap:12px}
.lx-push{margin-left:auto}
.lx-grow{flex:1 1 0;min-width:0}

/* ---------- 글 ---------- */
.lx-lede{margin:0;color:var(--ds-text);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.4}
.lx-lede b{font-weight:750}
.lx-h2{margin:0;color:var(--ds-text);font-size:var(--ds-fs-lg);font-weight:650;letter-spacing:-.01em;line-height:1.5}
.lx-h3{margin:0;color:var(--ds-text);font-size:14px;font-weight:650;line-height:1.5}
.lx-fig{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.lx-fig-xl{font-size:var(--ds-fs-hero)}
.lx-fig-s{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.lx-unit{margin-left:2px;color:var(--ds-text-2);font-size:14px;font-weight:500;letter-spacing:0}
.lx-lbl{color:var(--ds-text-3);font-size:13px}
.lx-muted{color:var(--ds-text-3)}
.lx-sub{display:block;color:var(--ds-text-3);font-size:13px;font-weight:400}
.lx-mono{font-family:var(--ds-font-mono);font-size:13px;letter-spacing:0}
/* A value that is not there (–) is read: the third grey (#5E6A82, 5.4:1 on the page, 4.7:1 on a chosen row), where the
   fourth (#8691A6) stood at 3.2:1 (look b155, color-contrast on 170 of them in six lists, 10-13). 개요's own words for
   what was not judged (.quiet-unknown: "미확인 3") take the same grey there; the dash, data-unknown and 0 are as they were. */
.lx-na{color:var(--ds-text-3)}
.ao-page :is(.ao-figure,b)[data-zero]:not(:hover):not(:focus-visible){color:var(--ds-text-3);font-weight:400}
/* portalUi.value's other ends of a read, each its own mark (data-ui-value): a value still read is a short moving line
   in the cell's own line, one kept from the screen is dots. A dash or a badge that has a why says so to a pointer. */
.lx-na[data-tooltip],.lx-bdg[data-tooltip]{cursor:help}
.lx-wait{display:inline-grid;width:64px;vertical-align:middle}
.lx-wait .ui-skeleton-line{width:100%;height:10px}
.lx-held{letter-spacing:.08em}
/* An amount of 0 (portalUi.money) is said in the quiet grey as a count of 0 is; its kind's word keeps its own. */
.ui-money[data-ui-zero]{color:var(--ds-text-3)}
#assets-overview-root .quiet-unknown{color:var(--ds-text-3)}
.lx-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-c-ok{color:var(--ds-ok-text)}.lx-c-bad{color:var(--ds-danger-text)}.lx-c-warn{color:var(--ds-caution-text)}.lx-c-unk{color:var(--ds-unknown-text)}.lx-c-info{color:var(--ds-info-text)}.lx-c-click{color:var(--ds-click-text)}
.lx-lk{color:var(--ds-accent-text);font-weight:500;text-decoration:none;cursor:pointer}
.lx-lk:not(.lx-nm):hover{color:var(--ds-accent-text);text-decoration:underline}
.lx-lk.lx-nm:hover{text-decoration:underline}

/* ---------- 표면 ---------- */
.lx-card{padding:20px;border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface)}
.lx-card-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-bottom:14px}
.lx-inset{padding:14px 16px;border-radius:10px;background:var(--ds-surface-2)}
.lx-hr{height:1px;border:0;margin:0;background:var(--ds-line)}
/* A note is one run of words: a <b> or a link inside it stays in the sentence (as a flex row each piece stood apart,
   10px from the next: RM7 10-12). With the design's icon at its start it is the icon and one <span> of the words. */
.lx-note{display:block;margin:0;padding:10px 14px;border-radius:10px;background:var(--ds-surface-2);color:var(--ds-text-2);font-size:13px;line-height:1.5}
.lx-note.lx-row{display:flex}
.lx-note:has(>.lx-i:first-child){display:flex;align-items:flex-start;gap:10px}
.lx-note>.lx-i:first-child{margin-top:2px}
.lx-note-warn{background:var(--ds-caution-soft);color:var(--ds-caution-text)}
.lx-note-bad{background:var(--ds-danger-soft);color:var(--ds-danger-text)}
/* (It takes its line whole: in a flex row it shrank to its words and stood at the left -- PC3 forms, 10-12.) */
.lx-empty{flex:1 1 100%;width:100%;padding:28px 20px;border:1px dashed var(--ds-line-strong);border-radius:12px;color:var(--ds-text-3);font-size:14px;text-align:center}
.lx-empty b{display:block;margin-bottom:2px;color:var(--ds-text);font-weight:600}
.lx-empty .lx-btn{margin-top:12px}

/* ---------- 버튼과 입력 ---------- */
.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--ds-line-strong);border-radius:8px;background:var(--ds-surface);color:var(--ds-text);font:600 14px/1.5 var(--ds-font);white-space:nowrap;text-decoration:none;cursor:pointer;opacity:1}
.lx-btn:hover{border-color:var(--ds-line-strong);background:var(--ds-surface-2);color:var(--ds-text)}
.lx-btn-p,.lx-btn-p:hover{border-color:var(--ds-accent);background:var(--ds-accent);color:var(--ds-accent-ink)}
.lx-btn-p:hover{border-color:var(--ds-accent-strong);background:var(--ds-accent-strong)}
.lx-btn-g,.lx-btn-g:hover{border-color:transparent;color:var(--ds-text-2)}
.lx-btn-g{background:transparent}
.lx-btn-d,.lx-btn-d:hover{color:var(--ds-danger-text)}
.lx-btn-s{height:28px;padding:0 10px;font-size:13px}
.lx-btn-l,.lx-btn-l:hover{border-color:var(--ds-click);background:var(--ds-click);color:#fff}
.lx-btn-l:hover{border-color:var(--ds-click-text);background:var(--ds-click-text)}
.lx-btn:is([disabled],[aria-disabled="true"]),.lx-btn:is([disabled],[aria-disabled="true"]):hover{border-color:var(--ds-line);background:var(--ds-surface-2);color:var(--ds-muted);cursor:not-allowed;opacity:1}
/* The button a file input draws inside itself (파일 선택) is the small secondary button: left alone it is the
   browser's own (Arial 14px, square corners, a 2px outset edge, 24px high). The input around it, the chosen file's
   name beside it, its focus ring and what choosing a file does are as they were. */
input[type="file"]::file-selector-button{height:28px;margin:0 8px 0 0;padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:8px;background:var(--ds-surface);color:var(--ds-text);font:600 13px/1.5 var(--ds-font);white-space:nowrap;cursor:pointer}
input[type="file"]:not(:disabled)::file-selector-button:hover{background:var(--ds-surface-2)}
input[type="file"]:disabled::file-selector-button{border-color:var(--ds-line);background:var(--ds-surface-2);color:var(--ds-muted);cursor:not-allowed}
/* An icon alone (새로 고침, 다시 확인, ⋯): its name is its aria-label. */
.lx-ibtn{display:grid;place-items:center;position:relative;width:34px;height:34px;flex:none;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ds-text-2);cursor:pointer}
.lx-ibtn:hover{background:var(--ds-surface-3)}
.lx-ibtn:is(.lx-line,.lx-ibtn-line),.lx-ibtn:is(.lx-line,.lx-ibtn-line):hover{border:1px solid var(--ds-line-strong);background:var(--ds-surface)}
.lx-ibtn:is(.lx-on,[aria-pressed="true"],[aria-expanded="true"]),.lx-ibtn:is(.lx-on,[aria-pressed="true"],[aria-expanded="true"]):hover{background:var(--ds-surface-3);color:var(--ds-text)}
.lx-ibtn:is([disabled],[aria-disabled="true"]){color:var(--ds-muted);cursor:not-allowed}
.lx-field{display:flex;flex-direction:column;gap:6px}
.lx-field>.lx-sel{width:100%}
.lx-field>label,.lx-flabel{display:block;margin:0;color:var(--ds-text-2);font-size:13px;font-weight:600}
.lx-in{width:100%;height:36px;margin:0;padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:8px;background-color:var(--ds-surface);color:var(--ds-text);font:400 14px var(--ds-font)}
/* A select keeps the old sheet's chevron (style.css select: background-image), with room for it (RA5 10-12). */
/* (A select is the design's .sel: 34px, 500 -- PC3 10-12: it stood 36px/400 as a text field.) */
select.lx-in{height:34px;padding-right:30px;font-weight:500;line-height:1.5}
/* A select is as wide as its longest choice (UR31-6): a row does not squeeze it and a screen's cap does not cut the
   choice shown; the row's width stays its limit, so a phone line is not pushed past the screen. */
select:is(.lx-in,.lx-sel){flex-shrink:0;max-width:100%}
.lx-in::placeholder{color:var(--ds-text-3)}
textarea.lx-in{height:auto;min-height:72px;padding:8px 10px;resize:vertical}
.lx-in:disabled{background-color:var(--ds-surface-3);color:var(--ds-text-3);cursor:not-allowed}
.lx-sel{display:inline-flex;width:fit-content;max-width:100%;align-items:center;justify-content:space-between;gap:8px;height:34px;padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:8px;background:var(--ds-surface);color:var(--ds-text);font:500 14px var(--ds-font);white-space:nowrap;cursor:pointer}
.lx-sel:hover{background:var(--ds-surface-2)}
.lx-sel .lx-i{color:var(--ds-text-3)}
/* A screen's first line (data-insights-first, UR27): its pickers, menus, search box and buttons stand one 32px high on
   one middle, so their words sit on one line. A label around a picker has no margin and is a flex box, as is the 분석
   menu's box: the old sheet's label{margin:18px 0 7px} stood the sort picker 5.5px under 분석 and 기준 시각 (관리 현황 ›
   미관리 at 1440, g2 10-18). */
[data-insights-first] :is(select.lx-in,.lx-sel,.lx-find,.lx-btn:not(.lx-btn-s)){height:32px}
[data-insights-first] .lx-ibtn{width:32px;height:32px}
[data-insights-first] :is(label:not(.lx-field):has(>select.lx-in),.insights-pop){display:inline-flex;align-items:center;margin:0}
/* (Drawn as a <label> it takes the old sheet's label{margin:18px 0 7px}: a 44px box stood 69px tall and 5.5px off
   the button beside it -- PC3 찾기, 10-12.) */
.lx-find{display:flex;align-items:center;gap:8px;height:34px;margin:0;padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:8px;background:var(--ds-surface);color:var(--ds-text-3)}
.lx-find input{flex:1;min-width:0;border:0;background:transparent;color:var(--ds-text);font:400 14px var(--ds-font);outline:0}
.lx-find:focus-within{outline:2px solid var(--ds-focus);outline-offset:2px}
.lx-find-lg{height:44px;padding:0 14px;border-radius:10px;font-size:15px}
.lx-find-lg input{font-size:15px}
.lx-ck{display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer}
.lx-ck input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--ds-accent)}
/* A tick box or a radio anywhere on a redesigned page is the design's 16px, whatever part it stands in (정책 drew
   13x16, PC3 10-12). :where keeps this under a screen's own rule. */
:where(.lx-page,.lx-aside,.ui-confirm) input:where([type="checkbox"],[type="radio"]){width:16px;height:16px;flex:none;margin:0;padding:0;accent-color:var(--ds-accent)}
.lx-sw{position:relative;width:34px;height:20px;flex:none;padding:0;border:0;border-radius:999px;background:#C5CBD6;cursor:pointer}
.lx-sw:hover{background:#C5CBD6}
.lx-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,40,.25)}
.lx-sw:is(.lx-on,[aria-checked="true"]),.lx-sw:is(.lx-on,[aria-checked="true"]):hover{background:var(--ds-accent)}
.lx-sw:is(.lx-on,[aria-checked="true"])::after{left:16px}
/* (A row of more pieces than its line holds takes a second line: nothing is cut or scrolled -- 현황's five
   states at 390, PC1 10-12.) */
.lx-seg{display:inline-flex;flex-wrap:wrap;width:fit-content;max-width:100%;padding:2px;border-radius:9px;background:var(--ds-surface-3)}
.lx-seg>:is(button,a){display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--ds-text-2);font:500 13px/1.5 var(--ds-font);text-decoration:none;white-space:nowrap;cursor:pointer}
.lx-seg>:is(button,a):hover{background:transparent;color:var(--ds-text)}
.lx-seg>:is(.lx-on,[aria-pressed="true"],[aria-selected="true"],[aria-current]),.lx-seg>:is(.lx-on,[aria-pressed="true"],[aria-selected="true"],[aria-current]):hover{background:var(--ds-surface);color:var(--ds-text);font-weight:650;box-shadow:var(--ds-shadow)}
.lx-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--ds-line);border-radius:999px;background:var(--ds-surface);color:var(--ds-text-2);font:500 13px/1.5 var(--ds-font);white-space:nowrap;text-decoration:none;cursor:pointer}
.lx-chip:hover{border-color:var(--ds-line-strong);background:var(--ds-surface);color:var(--ds-text-2)}
.lx-chip b{color:var(--ds-text);font-weight:650}
.lx-chip .lx-n{color:var(--ds-text-3);font-size:13px;font-weight:500}
.lx-chip:is(.lx-on,[aria-pressed="true"]),.lx-chip:is(.lx-on,[aria-pressed="true"]):hover{border-color:var(--ds-accent);background:var(--ds-accent-soft);color:var(--ds-accent-text);font-weight:600}
.lx-chip:is(.lx-on,[aria-pressed="true"]) b:not(.lx-n){color:var(--ds-accent-text)}
.lx-chip-add{border-style:dashed;color:var(--ds-text-3)}
.lx-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lx-choice{display:flex;flex-direction:column;gap:2px;margin:0;padding:10px 12px;border:1px solid var(--ds-line-strong);border-radius:10px;background:var(--ds-surface);color:var(--ds-text);cursor:pointer}
.lx-choice:hover{background:var(--ds-surface)}
.lx-choice>span:first-child{display:flex;align-items:center;gap:8px;font-weight:650}
.lx-choice input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--ds-accent)}
.lx-choice:is(.lx-on,:has(input:checked)){border-color:var(--ds-accent);box-shadow:0 0 0 3px var(--ds-accent-soft)}

/* ---------- 상태: 표 안에서는 점과 글자, 머리말에서는 배지 하나 ---------- */
.lx-st{display:inline-flex;align-items:center;gap:6px;color:var(--ds-text);font-size:13px;font-weight:500;line-height:18px;white-space:nowrap;vertical-align:middle}
/* 명세 6.1 (and 16절's own line in it: a state's English name, "색과 모양은 이 표의 뜻을 따른다"): in a table or a list a
   state is its dot and its word, v24 lotse.css .st; the coloured round chip is .lx-bdg, the one state a head stresses. */
.lx-st::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--ds-neutral)}
.lx-st-ok::before{background:var(--ds-ok)}.lx-st-info::before{background:var(--ds-info)}.lx-st-bad::before{background:var(--ds-danger)}
.lx-st-warn::before{background:var(--ds-caution)}.lx-st-block::before{border-radius:2px;background:var(--ds-blocked)}
.lx-st-unk::before{border:1.5px dashed var(--ds-unknown);background:transparent}
.lx-st-off{color:var(--ds-text-3)}
.lx-bdg{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:999px;background:var(--ds-neutral-soft);color:var(--ds-text-2);font-size:11px;font-weight:700;line-height:18px;white-space:nowrap}
.lx-bdg-ok{background:var(--ds-ok-soft);color:var(--ds-ok-text)}.lx-bdg-info{background:var(--ds-info-soft);color:var(--ds-info-text)}
.lx-bdg-bad{background:var(--ds-danger-soft);color:var(--ds-danger-text)}.lx-bdg-warn{background:var(--ds-caution-soft);color:var(--ds-caution-text)}
.lx-bdg-unk{border:1px dashed var(--ds-unknown-line);background:var(--ds-unknown-soft);color:var(--ds-unknown-text)}
.lx-bdg-block{background:var(--ds-blocked-soft);color:var(--ds-blocked)}
.lx-bdg-click{background:var(--ds-click-soft);color:var(--ds-click-text)}
.lx-bdg.lx-bdg-st{height:18px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;vertical-align:middle;margin-left:4px;white-space:nowrap}
.lx-kv .lx-bdg.lx-bdg-st{margin-left:0}
.lx-bdg-st[data-status="partial"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ds-caution);flex:none}
.lx-bdg-st[data-status="needs_review"]{background:var(--ds-caution-soft);color:var(--ds-caution-text);border:0}
.lx-bdg-st[data-status="out_of_scope"]{background:transparent;color:var(--ds-text-3);padding:0 2px}
/* 명세 6.1: in a table's cell or a list's row a state drawn as a badge (portalBadge.status, gw badge(), portalUi.badge)
   reads as .lx-st -- its dot and its word, its class, data-status and testid kept; a value's basis (Configured,
   Inferred, Registered) stays the small badge right of the value, and a head's badge the one it stresses (T19-4 A).
   Verified is the one small green badge Registered is on every screen (portal-badges.js, UR17-6a; T19-9: in a cell it
   read as a dot and its word -- 자산 목록's 확인 and 증거 범위' 영역 -- while Registered stayed the badge), and so is an
   asset's presence seen (inventory.js: Observed, said Verified). Its word, hover and testid are as given; nothing here
   says a value is verified that the screen did not. */
.lx-bdg-ok{--lx-dot:var(--ds-ok)}.lx-bdg-info{--lx-dot:var(--ds-info)}.lx-bdg-bad{--lx-dot:var(--ds-danger)}.lx-bdg-warn{--lx-dot:var(--ds-caution)}.lx-bdg-block{--lx-dot:var(--ds-blocked)}
:is(table.lx-t td,.lx-t .lx-tr:not(.lx-th)>*) .lx-bdg:where(:is(.lx-bdg-st,.lx-bdg-ok,.lx-bdg-info,.lx-bdg-bad,.lx-bdg-warn,.lx-bdg-block,.lx-bdg-unk):not([data-status="configured"],[data-status="attributed"],[data-status="registered"],[data-status="verified"],[data-inv-presence="Observed"])){gap:6px;height:auto;padding:0;border:0;border-radius:0;background:none;color:var(--ds-text);font-size:13px;font-weight:500}
:is(table.lx-t td,.lx-t .lx-tr:not(.lx-th)>*) .lx-bdg:where(:is(.lx-bdg-st,.lx-bdg-ok,.lx-bdg-info,.lx-bdg-bad,.lx-bdg-warn,.lx-bdg-block,.lx-bdg-unk):not([data-status="configured"],[data-status="attributed"],[data-status="registered"],[data-status="verified"],[data-inv-presence="Observed"]))::before{content:"";width:8px;height:8px;flex:none;border-radius:50%;background:var(--lx-dot,var(--ds-neutral))}
:is(table.lx-t td,.lx-t .lx-tr:not(.lx-th)>*) .lx-bdg.lx-bdg-block::before{border-radius:2px}
:is(table.lx-t td,.lx-t .lx-tr:not(.lx-th)>*) .lx-bdg:is(.lx-bdg-unk,[data-status="needs_review"])::before{border:1.5px dashed var(--ds-unknown);background:transparent}
:is(table.lx-t td,.lx-t .lx-tr:not(.lx-th)>*) .lx-bdg.lx-bdg-st[data-status="out_of_scope"]{color:var(--ds-text-3)}
.lx-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:6px;background:var(--ds-surface-3);color:var(--ds-text-2);font-size:12.5px;font-weight:500;white-space:nowrap}
.lx-sev{display:inline-flex;align-items:flex-end;gap:2px;color:var(--ds-text);font-size:13px;font-weight:500;white-space:nowrap}
.lx-sev i{width:3px;border-radius:1px;background:var(--ds-line-strong);font-style:normal}
.lx-sev i:nth-child(1){height:5px}.lx-sev i:nth-child(2){height:8px}.lx-sev i:nth-child(3){height:11px}.lx-sev i:nth-child(4){height:14px}
.lx-sev>span{margin-left:5px}
.lx-sev-crit i{background:var(--ds-danger-text)}
.lx-sev-high i:nth-child(-n+3){background:var(--ds-danger)}
.lx-sev-mid i:nth-child(-n+2){background:var(--ds-caution)}
.lx-sev-low i:nth-child(1){background:var(--ds-text-3)}
.lx-spec{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:var(--ds-surface-3)}
.lx-spec>i{display:block;min-width:3px}
.lx-spec-lg{height:14px;border-radius:7px}
.lx-spec-sm{height:6px;border-radius:3px}
.lx-s-ok{background:var(--ds-ok)}.lx-s-info{background:var(--ds-info)}.lx-s-bad{background:var(--ds-danger)}.lx-s-warn{background:var(--ds-caution)}
.lx-s-unk{background:repeating-linear-gradient(135deg,var(--ds-unknown) 0 3px,#EBD58A 3px 6px)}
.lx-s-off{background:#C5CBD6}.lx-s-block{background:var(--ds-blocked)}.lx-s-accent{background:var(--ds-accent)}
.lx-spec-wrap{min-width:0}
.lx-spec-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;padding:0;list-style:none;color:var(--ds-text-2);font-size:13px}
.lx-spec-legend li{display:inline-flex;align-items:center;gap:6px}
.lx-spec-legend b{color:var(--ds-text);font-weight:650}
.lx-spec-legend b[data-zero]{color:var(--ds-text-3);font-weight:400}
.lx-bar{height:6px;border-radius:3px;background:var(--ds-surface-3);overflow:hidden}
.lx-bar>i{display:block;height:100%;border-radius:3px;background:var(--ds-accent)}
.lx-bar>i.lx-s-bad{background:var(--ds-danger)}.lx-bar>i.lx-s-warn{background:var(--ds-caution)}.lx-bar>i.lx-s-ok{background:var(--ds-ok)}.lx-bar>i.lx-s-info{background:var(--ds-info)}
.lx-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--ds-neutral)}
.lx-dot.lx-s-ok{background:var(--ds-ok)}.lx-dot.lx-s-info{background:var(--ds-info)}.lx-dot.lx-s-bad{background:var(--ds-danger)}.lx-dot.lx-s-warn{background:var(--ds-caution)}.lx-dot.lx-s-off{background:#C5CBD6}
.lx-dot.lx-s-unk{border:1.5px dashed var(--ds-unknown);background:transparent}

/* ---------- 표: 세로줄 없음, 가로줄 1px, 행 46px 이상, 숫자는 오른쪽 ---------- */
.lx-t{display:flex;flex-direction:column;min-width:0}
.lx-tr{display:grid;align-items:center;column-gap:16px;min-height:46px;padding:9px 6px;border:0;border-bottom:1px solid var(--ds-line);border-radius:0;background:transparent;color:var(--ds-text);font:400 14px/1.5 var(--ds-font);text-align:left}
.lx-tr:last-child{border-bottom:0}
.lx-tr.lx-th{min-height:0;padding:8px 6px;color:var(--ds-text-3);font-size:13px;font-weight:500}
.lx-tr.lx-hl{cursor:pointer}
.lx-tr.lx-hl:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.lx-tr:not(.lx-th):not(.lx-is-sel):not([aria-selected="true"]):hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.lx-tr:is(.lx-is-sel,[aria-selected="true"]),.lx-tr:is(.lx-is-sel,[aria-selected="true"]):hover{border-radius:8px;border-bottom-color:transparent;background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
table.lx-t{display:table;width:100%;border-collapse:collapse;font-size:14px}
table.lx-t :is(th,td){padding:9px 6px;border:0;border-bottom:1px solid var(--ds-line);background:transparent;color:var(--ds-text);font-size:14px;font-weight:400;text-align:left;vertical-align:middle}
table.lx-t td{height:46px}
table.lx-t th{padding:8px 6px;color:var(--ds-text-3);font-size:13px;font-weight:500;white-space:nowrap}
table.lx-t tbody tr:last-child td{border-bottom:0}
table.lx-t tr:is(.lx-hl){cursor:pointer}
table.lx-t tr.lx-hl:hover td{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
table.lx-t tbody tr:not(.lx-is-sel):not([aria-selected="true"]):hover td,.table-wrap tbody tr:not(.lx-is-sel):not([aria-selected="true"]):hover td{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
table.rm1-table tbody tr:not(.lx-is-sel):not([aria-selected="true"]):hover td{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
/* A table row's 8% is its cells' alone (the rule above): one on the row as well stacked to 15%, a grey – at 4.28:1 (UR32-1). */
.clickable:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
/* The chosen row is one r8 shape with no line under it, as .lx-tr's (시안 .tr.is-sel): a table row's corners are its
   end cells' (RA9's 기기 way, here for every table.lx-t -- PC3 10-12: the fill stood square in each cell). */
table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td{border-bottom-color:transparent;background:var(--ds-accent-soft)}
table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:first-child{border-radius:8px 0 0 8px}
table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:last-child{border-radius:0 8px 8px 0}
table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:only-child{border-radius:8px}
table.lx-t :is(th,td).lx-r{text-align:right}
.lx-r{justify-self:end;text-align:right}
.lx-nm{color:var(--ds-text);font-weight:600;text-decoration:none}
a.lx-nm:hover,button.lx-nm:hover{text-decoration:underline;text-underline-offset:3px}
.lx-cell{display:flex;flex-direction:column;min-width:0}
/* A narrow list keeps every value (명세 6.6): a cell marked .lx-drop leaves its row while a panel stands beside the
   list or the window is under 1100px, and what it said stays in the name's grey line .lx-dropsum (drawn only then)
   and in the panel. A grid list opts in with .lx-t-cols and its two column lists, --lx-cols and --lx-cols-narrow; a
   <table class="lx-t"> needs the classes alone. Severity and state are never .lx-drop.
   Over 1440px every column stays beside the panel (명세 5): the scaled page may be narrower than
   portalUi's roomy threshold, but this is still a large window. The narrow rules apply only up to 1440px. */
.lx-t-cols>.lx-tr{grid-template-columns:var(--lx-cols)}
@media(max-width:899px){
  [data-desktop-ai-applications]>.lx-tr[data-desktop-ai-application-row]{grid-template-columns:minmax(0,1fr);gap:12px;padding-block:16px}
  [data-desktop-ai-applications]>.lx-tr:not([data-desktop-ai-application-row]){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  [data-desktop-ai-applications] [role=cell][data-label]::before{content:attr(data-label);color:var(--ds-text-3);font-size:13px}
}
.lx-t .lx-dropsum{display:none}
@media(max-width:1440px){
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .lx-t .lx-drop{display:none}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .lx-t .lx-dropsum{display:block}
/* (With its end cells gone the chosen row's corners are the cells that end what is left -- RA9 10-12.) */
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:not(.lx-drop):not(td:not(.lx-drop)~td){border-radius:8px 0 0 8px}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:not(.lx-drop):not(:has(~td:not(.lx-drop))){border-radius:0 8px 8px 0}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:not(.lx-drop):not(td:not(.lx-drop)~td):not(:has(~td:not(.lx-drop))){border-radius:8px}
.lx-split:has(>.lx-aside):where(:not([data-lx-roomy])) .lx-t-cols>.lx-tr{grid-template-columns:var(--lx-cols-narrow,var(--lx-cols))}
}
@media(max-width:1100px){
  .lx-t .lx-drop{display:none}
  .lx-t .lx-dropsum{display:block}
  table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:not(.lx-drop):not(td:not(.lx-drop)~td){border-radius:8px 0 0 8px}
  table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:not(.lx-drop):not(:has(~td:not(.lx-drop))){border-radius:0 8px 8px 0}
  table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td:not(.lx-drop):not(td:not(.lx-drop)~td):not(:has(~td:not(.lx-drop))){border-radius:8px}
  .lx-t-cols>.lx-tr{grid-template-columns:var(--lx-cols-narrow,var(--lx-cols))}
}
.lx-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;padding-top:12px;color:var(--ds-text-3);font-size:13px}
.lx-kv{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px 16px;margin:0}
.lx-kv dt{color:var(--ds-text-3);font-size:13px}
.lx-kv dd{margin:0;min-width:0}
.lx-selbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:10px;background:var(--ds-accent-soft);color:var(--ds-accent-text);font-weight:600}
.lx-grp{display:flex;align-items:center;gap:8px;padding:16px 6px 6px;color:var(--ds-text-2);font-size:13px;font-weight:650}
.lx-grp:first-child{padding-top:0}
.lx-grp .lx-n{color:var(--ds-text-3);font-weight:500}

/* ---------- Click 제안과 누가 했는지 ---------- */
.lx-click{padding:14px 16px;border:1px solid var(--ds-click-line);border-radius:12px;background:var(--ds-click-soft)}
.lx-click-h{display:flex;align-items:center;gap:6px;color:var(--ds-click-text);font-size:13px;font-weight:650}
/* (Drawn as an h2-h4 inside a screen, the screen's own heading size reached it -- 할 일 14px, 사람 15px, PC3 10-12:
   inside its box the title says its size once more, over a rule of one class and an element.) */
.lx-click .lx-click-h{font-size:13px;font-weight:650;line-height:1.5;letter-spacing:-.005em}
.lx-who{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;background:var(--ds-surface-3);color:var(--ds-text-2);font-size:12.5px;font-weight:600;white-space:nowrap}
.lx-who-l{background:var(--ds-click-soft);color:var(--ds-click-text)}
.lx-opt{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface);color:var(--ds-text);font:400 14px/1.5 var(--ds-font);text-align:left;cursor:pointer}
.lx-opt:hover{background:var(--ds-surface)}
.lx-opt b{display:block;font-weight:650}
.lx-opt:is(.lx-on,[aria-checked="true"],[aria-pressed="true"]){border-color:var(--ds-click);box-shadow:0 0 0 3px var(--ds-click-soft)}
.lx-opt-n{display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--ds-surface-3);color:var(--ds-text-2);font-size:12.5px;font-weight:700}
.lx-opt:is(.lx-on,[aria-checked="true"],[aria-pressed="true"]) .lx-opt-n{background:var(--ds-click);color:#fff}
.lx-opt-tag{margin-left:auto;flex:none;color:var(--ds-text-3);font-size:13px;white-space:nowrap}
.lx-ask{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 6px 0 14px;border:1px solid var(--ds-click-line);border-radius:12px;background:var(--ds-surface);color:var(--ds-click-text)}
.lx-ask input{flex:1;min-width:0;border:0;background:transparent;color:var(--ds-text);font:400 14px var(--ds-font);outline:0}
.lx-ask input::placeholder{color:var(--ds-text-3)}
.lx-ask:focus-within{outline:2px solid var(--ds-focus);outline-offset:2px}

/* ---------- 흐름과 기록 ---------- */
.lx-tl{display:flex;flex-direction:column}
.lx-tl-i{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;padding-bottom:16px}
.lx-tl-i::before{content:"";position:absolute;left:9.5px;top:18px;bottom:0;width:1px;background:var(--ds-line)}
.lx-tl-i:last-child{padding-bottom:0}
.lx-tl-i:last-child::before{display:none}
.lx-tl-d{width:9px;height:9px;margin:6px 5.5px 0;border-radius:50%;background:var(--ds-line-strong)}
.lx-tl-d.lx-l{background:var(--ds-click)}.lx-tl-d.lx-p{background:var(--ds-text)}.lx-tl-d.lx-ok{background:var(--ds-ok)}
.lx-lane{display:flex;flex-direction:column;gap:6px;min-width:0}
.lx-lane-h{display:flex;align-items:center;gap:6px;color:var(--ds-text-3);font-size:13px;font-weight:500}
.lx-node{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 10px;border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-surface);color:var(--ds-text);font:500 13px/1.5 var(--ds-font);text-align:left;text-decoration:none}
a.lx-node:hover,button.lx-node:hover{background:var(--ds-surface);color:var(--ds-text)}
.lx-node.lx-me-node{border-color:var(--ds-text);font-weight:650}
.lx-node.lx-bad{border-color:var(--ds-danger);box-shadow:0 0 0 3px var(--ds-danger-soft)}
.lx-chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 28px}
.lx-chain .lx-lane{position:relative}
.lx-chain .lx-lane+.lx-lane::before{content:"";position:absolute;left:-19px;top:40px;width:7px;height:7px;border-top:1.5px solid var(--ds-line-strong);border-right:1.5px solid var(--ds-line-strong);transform:rotate(45deg)}
/* The arrow stands at the middle of a lane's first node (40px: the lane's head, the gap, half a node). A chain whose
   lanes hold no node at all is as tall as its heads, and the arrows then stood under it, on the card's lower line
   (사람 상세 with nothing collected, look of uiw1 10-13): there they stand at the heads' middle. */
.lx-chain:not(:has(.lx-node)) .lx-lane+.lx-lane::before{top:6px}
.lx-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:4px}
.lx-step{display:flex;min-width:0;flex-direction:column;gap:2px;padding:12px 14px;border-radius:8px;background:var(--ds-surface-2)}
.lx-step.lx-hot{background:var(--ds-caution-soft)}
.lx-av{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--ds-accent-soft);color:var(--ds-accent-text);font-size:12px;font-weight:700}

/* ---------- 숫자 묶음 ---------- */
.lx-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none}
:is(a,button).lx-stat{padding:10px 12px;border-radius:10px}
:is(a,button).lx-stat:hover{background:var(--ds-surface-2);color:inherit}
.lx-cov{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
:is(a,button).lx-cov:hover{background:transparent;color:inherit}
:is(a,button).lx-cov:hover .lx-h3{text-decoration:underline;text-underline-offset:3px}
.lx-sig{display:flex;align-items:center;gap:12px;width:100%;padding:12px 2px;border-bottom:1px solid var(--ds-line);color:inherit;text-decoration:none}
:is(a,button).lx-sig{padding:12px 2px;border-bottom:1px solid var(--ds-line)}
.lx-sig:last-child{border-bottom:0}
:is(a,button).lx-sig:hover{background:transparent}
.lx-inc{border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-surface)}
.lx-inc-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px}
.lx-inc-b{padding:6px 16px 16px}
.lx-inc-b .lx-tl-i>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.lx-inc-b .lx-sub{flex-basis:100%}

/* ---------- 오른쪽 패널: 목록 옆에서 한 건을 본다 (portalUi.panel) ---------- */
/* Its width is a share of the split, not of the window, so a wide panel stays beside its list at 1280 with the menu
   beside them (RA4 10-12: 560 + 500 did not fit on one line and the panel went under the list). */
/* (The narrow panel is the design's 348px at every width: its .aside is flex:1 0 348px beside a page that takes
   999 parts of what is left, so it never grew. A share of the row drew 382px at 1440 -- PC3, 10-12.) */
.lx-aside{flex:0 0 348px;max-width:400px;display:flex;flex-direction:column;gap:16px;min-width:0;padding:20px 22px 32px;border-left:1px solid var(--ds-line);background:var(--ds-surface)}
/* (The wide one is the design's 500px (명세 6.4: 500~560) wherever its list keeps 520px beside it -- 1280 with the
   menu and up; a share of the row drew 430~478px at 1280, PC1 10-12. Under that it gives way down to 440px.) */
/* The wide one gives the page its room first: the page keeps 616px (560px of words inside its 28px sides) and the
   panel takes what is left, from 500px down to the narrow one's 348px (명세 4절, 10-13: at 1280 a 500px panel left the
   page 478px of words and a list's head, chips and tabs went to a second line; now 418px beside 560px). From 1362px
   it is 500px as before. */
.lx-aside.lx-aside-w{flex-basis:clamp(348px,100% - 616px,500px);max-width:560px}
/* An attachment's preview is read in the panel: it takes room from the list while it is open. */
.lx-aside.lx-aside-w:has([data-attachment-shown]){flex-basis:clamp(348px,100% - 480px,860px);max-width:860px}
.lx-aside-h{display:flex;align-items:flex-start;gap:10px}
.lx-aside-tw{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.lx-aside-t{flex:1;min-width:0;margin:0;color:var(--ds-text);font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
/* (The design's close is its icon button, 34x34 -- PC3 panels, 10-12: it stood 32.) */
.lx-aside-x{display:grid;place-items:center;width:34px;height:34px;flex:none;padding:0;border:0;border-radius:8px;background:transparent;color:var(--ds-text-2);font:500 18px/1 var(--ds-font);cursor:pointer}
.lx-aside-x:hover{background:var(--ds-surface-3);color:var(--ds-text)}
.lx-aside-b{display:flex;flex-direction:column;gap:16px;min-width:0}
/* What portalUi.panel draws stays in view while a long list scrolls under it; the panel's line runs the page's height. */
/* It stands 80px from the top, under the sticky top line (60px at 1440, 69px at 1920: the offset is zoomed with it) and 20px below it,
   so its title and 닫기 are not covered once the page scrolls (X59). It starts 85px down the page before any scroll, so at the window less
   100px its bottom is inside the window both there and pinned (1280x800 read 845px under the older 40px: L06, X223). */
.lx-aside-in{position:sticky;top:80px;display:flex;flex-direction:column;gap:16px;min-width:0;max-height:calc(100vh - 100px);margin:-4px;padding:4px;overflow-y:auto}
/* The panel's own head (its title and 닫기) stays at the top of the panel while what is under it is scrolled, by hand
   or by a part of it brought into view: it scrolled away with the body, so a form opened low in a panel left the
   title and 닫기 above the panel's top (가드레일 › 회사 규칙 추가: the title at y -209 at 1440, -46 at 1920; PC,
   10-13). What is brought into view stops under the head, not behind it: 64px in the panel's own column, 84px where
   the panel covers the window and scrolls itself, its head 20px lower (under 900px). (The head takes back the
   column's 4px so nothing shows beside or over it; its 8px under it are given back by the margin.) */
.lx-aside-in>.lx-aside-h{position:sticky;top:0;z-index:2;margin:-4px -4px -8px;padding:4px 4px 8px;background:var(--ds-surface)}
.lx-aside-in{scroll-padding-top:64px}
/* The 시스템 panel (registered-systems) keeps its outer frame inside the window like .ctrl-aside / .ra6-side: header bottom is 69px, so it sticks there and never grows past the viewport bottom (PL02, B05). */
@media(min-width:901px){.lx-aside:has([data-systems-panel]){position:sticky;top:69px;align-self:flex-start;max-height:calc(100vh - 72px);overflow-y:auto}}
.lx-aside{scroll-padding-top:84px}
.lx-sect{display:flex;flex-direction:column;gap:8px}
.lx-sect-h{display:flex;align-items:center;gap:8px;color:var(--ds-text-3);font-size:13px;font-weight:600}
.lx-li{display:flex;align-items:center;gap:10px;width:100%;min-height:36px;padding:6px 0;border-bottom:1px solid var(--ds-line);color:inherit;text-decoration:none}
:is(a,button).lx-li{padding:6px 0;border-bottom:1px solid var(--ds-line)}
.lx-li:last-child{border-bottom:0}
:is(a,button).lx-li:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);box-shadow:-8px 0 0 color-mix(in srgb,var(--ds-accent) 8%,transparent),8px 0 0 color-mix(in srgb,var(--ds-accent) 8%,transparent)}

/* ---------- 결과 좁히기, 왼쪽 목록, 설정 양식 ---------- */
.lx-rail{flex:0 0 220px;display:flex;flex-direction:column;gap:20px;min-width:0;padding:20px 16px 28px;border-right:1px solid var(--ds-line)}
.lx-fc{display:flex;align-items:center;gap:8px;min-height:30px;margin:0;color:var(--ds-text);cursor:pointer}
.lx-fc input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--ds-accent)}
.lx-fc .lx-n{margin-left:auto;color:var(--ds-text-3);font-size:13px}
.lx-mlist{flex:0 0 348px;display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px 12px 24px;border-right:1px solid var(--ds-line)}
.lx-mi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.lx-mi:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);color:inherit}
.lx-mi:is(.lx-on,[aria-current],[aria-selected="true"]),.lx-mi:is(.lx-on,[aria-current],[aria-selected="true"]):hover{background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
.lx-mi-n{min-width:34px;font-size:15px;font-weight:700;text-align:right}
.lx-setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 20px;padding:16px 0;border-bottom:1px solid var(--ds-line)}
.lx-setrow:first-child{padding-top:0}
.lx-setrow:last-child{padding-bottom:0;border-bottom:0}
.lx-setrow .lx-full{grid-column:1 / -1}
/* A policy's explanation and choices each keep a readable line on a phone. */
@media(max-width:900px){
  :is(#web-ai-settings-root,#desktop-ai-settings-root,#gemini-browser-settings-root,#gemini-cli-settings-root,#drawing-policy-root) .lx-setrow{grid-template-columns:minmax(0,1fr);gap:12px}
  :is(#web-ai-settings-root,#desktop-ai-settings-root,#gemini-browser-settings-root,#gemini-cli-settings-root,#drawing-policy-root) .lx-setrow>div{min-width:0}
  :is(#web-ai-settings-root,#desktop-ai-settings-root,#gemini-browser-settings-root,#gemini-cli-settings-root,#drawing-policy-root) .lx-setrow :is(.lx-seg,.lx-in){max-width:100%;min-width:0}
  :is(#web-ai-settings-root,#desktop-ai-settings-root,#gemini-browser-settings-root,#gemini-cli-settings-root,#drawing-policy-root) .lx-setrow .lx-seg{flex-wrap:wrap}
  #web-ai-settings-root .lx-setrow :is(code,pre){white-space:pre-wrap;overflow-wrap:anywhere}
}
/* 바꾼 내용 막대: 바꾼 것이 있을 때만 양식 아래에 뜬다 (portalUi.draftBar) */
.lx-draftbar{position:sticky;bottom:12px;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:16px;padding:10px 12px 10px 14px;border:1px solid var(--ds-accent);border-radius:10px;background:var(--ds-accent-soft);color:var(--ds-accent-text);font-weight:600}
.lx-draftbar[hidden]{display:none}
.lx-draftbar .lx-push{margin-left:auto}
.lx-draftbar.lx-draftbar-moved{border-color:var(--ds-caution);background:var(--ds-caution-soft);color:var(--ds-caution-text)}
.lx-draftbar .lx-cell b{font-weight:650}
/* Over a panel that covers the page (portalUi.draftBar's data-lx-lifted; RM17 10-13: at 390, 700 and 1024 its buttons
   stood under the panel) the bar stands at the foot of the panel's column, over it, with the panel's width less its
   gaps; the panel keeps room for it under its last line, and a focused stop is scrolled clear of it. Beside the page
   (1280, 1440) and with no panel the bar is where it was. */
.lx-draftbar[data-lx-lifted]{position:fixed;inset:auto 12px 12px auto;z-index:71;width:calc(min(100vw,440px) - 24px);max-height:calc(100vh - 24px);margin:0;overflow-y:auto;box-shadow:var(--ds-shadow-pop)}
.lx-aside[data-lx-bar-room]{padding-bottom:calc(32px + var(--lx-bar-room,0px));scroll-padding-bottom:var(--lx-bar-room,0px)}

/* ---------- 확인 창 안: 바뀌는 것 목록과 대상 확인 체크 (portalUi.confirm, askReason) ---------- */
.lx-confirm-lines{display:flex;flex-direction:column;gap:4px;margin:10px 0 0;padding:10px 14px 10px 30px;border-radius:10px;background:var(--ds-surface-2);color:var(--ds-text-2);font-size:13px;list-style:disc}
#ui-confirm [data-lx-check]{margin-top:12px}
#ui-confirm [data-lx-ask-problem]{margin-top:12px}
#ui-confirm [data-lx-ask-problem][hidden]{display:none}

/* ---------- ⋯ 메뉴: 드물거나 되돌리기 어려운 동작 (portalUi.more) ---------- */
.lx-more{position:relative;display:inline-flex}
.lx-more-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:30;display:flex;flex-direction:column;min-width:168px;max-width:calc(100vw - 32px);padding:4px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface);box-shadow:var(--ds-shadow-pop)}
.lx-more-menu[hidden]{display:none}
.lx-more-item{display:flex;align-items:center;width:100%;min-height:34px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--ds-text);font:500 14px var(--ds-font);text-align:left;white-space:nowrap;cursor:pointer}
.lx-more-item:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ds-accent) 8%,transparent);color:var(--ds-text)}
.lx-more-item.lx-btn-d,.lx-more-item.lx-btn-d:is(:hover,:focus-visible){color:var(--ds-danger-text)}
.lx-more-item[aria-disabled="true"],.lx-more-item[aria-disabled="true"]:hover{background:transparent;color:var(--ds-muted);cursor:not-allowed}

/* ---------- 잠깐 뜨는 알림 (portalUi.toast) ---------- */
.lx-toast{position:fixed;left:50%;bottom:24px;z-index:1200;max-width:min(480px,calc(100vw - 32px));padding:10px 16px;border-radius:10px;background:var(--ds-text);color:#fff;font:500 14px/1.5 var(--ds-font);box-shadow:var(--ds-shadow-pop);transform:translateX(-50%);pointer-events:none}
.lx-toast:empty,.lx-toast[hidden]{display:none}

/* ---------- 어두운 무대: Agent Universe, 발표 모드, 로그인 ---------- */
.lx-stage{position:relative;overflow:hidden;background:var(--ds-stage-bg);color:var(--ds-stage-text)}
.lx-d-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--ds-stage-line);border-radius:999px;background:rgba(11,19,48,.78);color:var(--ds-stage-text);font:500 13px var(--ds-font);white-space:nowrap;cursor:pointer}
.lx-d-chip:hover{background:rgba(11,19,48,.78);color:var(--ds-stage-text)}
.lx-d-chip:is(.lx-on,[aria-pressed="true"]),.lx-d-chip:is(.lx-on,[aria-pressed="true"]):hover{border-color:#7FA2FF;background:rgba(59,116,234,.32)}
.lx-d-chip b{font-weight:700}
.lx-d-dim{color:var(--ds-stage-dim)}
.lx-d-bad{color:#FF9485}
.lx-d-seg{display:inline-flex;padding:2px;border:1px solid var(--ds-stage-line);border-radius:9px;background:rgba(11,19,48,.78)}
.lx-d-seg>button{height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--ds-stage-dim);font:500 13px var(--ds-font);white-space:nowrap;cursor:pointer}
.lx-d-seg>button:hover{background:transparent;color:var(--ds-stage-text)}
.lx-d-seg>:is(.lx-on,[aria-pressed="true"],[aria-selected="true"]),.lx-d-seg>:is(.lx-on,[aria-pressed="true"],[aria-selected="true"]):hover{background:rgba(255,255,255,.16);color:#fff;font-weight:650}
.lx-d-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--ds-stage-line);border-radius:8px;background:rgba(255,255,255,.08);color:var(--ds-stage-text);font:600 13px var(--ds-font);white-space:nowrap;text-decoration:none;cursor:pointer}
.lx-d-btn:hover{background:rgba(255,255,255,.16);color:#fff}
.lx-d-btn-p,.lx-d-btn-p:hover{border-color:#fff;background:#fff;color:var(--ds-stage-bg)}
.lx-d-btn-p:hover{background:#E9EEFC}
.lx-stage .lx-spec{background:var(--ds-stage-line)}
.lx-stage :is(.lx-s-ok,.lx-dot.lx-s-ok){background:#35C48F}
.lx-stage :is(.lx-s-info,.lx-dot.lx-s-info){background:#6FA0FF}
.lx-stage :is(.lx-s-bad,.lx-dot.lx-s-bad){background:#FF6B57}
.lx-stage .lx-s-unk{background:repeating-linear-gradient(135deg,#E3C24F 0 3px,rgba(227,194,79,.35) 3px 6px)}

/* ---------- 좁은 화면(900px 아래): 나란한 구역은 아래로 쌓이고, 오른쪽 패널은 화면을 덮어 열린다 ---------- */
@media(max-width:900px){
  .lx-cols{grid-template-columns:minmax(0,1fr)}
  .lx-chain{grid-template-columns:minmax(0,1fr)}
  .lx-chain .lx-lane+.lx-lane::before{display:none}
  .lx-choices{grid-template-columns:minmax(0,1fr)}
  .lx-rail,.lx-mlist{flex-basis:100%;border-right:0;border-bottom:1px solid var(--ds-line)}
  .lx-page{padding:20px 16px 32px}
  /* A row's first sentence keeps a reading width: from a basis of 0 it took what the buttons, the period or the time
     beside it left, 30-120px at 390, and its words stood a letter a line (Control 템플릿, 수집 상태, Click 순찰, Gateway
     개요, Router 진단: PC narrow 10-12). Now it takes its own line when less than 300px is left (15em of its 20px, the
     width RM8's and RM9's first lines chose) and the row's other pieces go under it; a back button before it stays
     beside it. The place a screen fills with its sentence later (.lx-grow holding the .lx-lede: Gateway 개요, MCP) is
     the same, in px as its own letters are smaller. :where keeps a screen's own width for its sentence above this; a
     row of a list (.lx-grow without .lx-lede) is untouched. */
  .lx-row>:where(.lx-lede.lx-grow,.lx-grow:has(>.lx-lede)){flex-basis:300px}
  .lx-aside,.lx-aside.lx-aside-w{position:fixed;inset:0 0 0 auto;z-index:70;width:min(100vw,440px);max-width:none;overflow-y:auto;border-left:1px solid var(--ds-line);box-shadow:var(--ds-shadow-pop)}
  .lx-aside-in{position:static;max-height:none;overflow:visible}
}
/* In a frame with its inner menu (.lx-snav, 212px: LLM Gateway, 설정) a panel beside the page left it too little:
   at 1024 the wide one left 126px and a list's columns stood at 0px (RM15 요청 기록, 10-13). Where the page beside it
   would be under 300px (the width a first line's sentence keeps) the panel covers the page's right edge under the top
   line: the wide one up to 1197px (menu 236 + frame 10 + 212 + 440 + 300 = 1198), the narrow one up to 1105px (348). Wider, and in a
   frame without the inner menu, it stands beside as before (1280: the page keeps 322px beside the wide one). */
/* From 901 to 1197px the panel stands as it does from 1106px up: over the page's right edge under the top line, never
   fixed from the window's top, which covered the title, 찾기, 알림 and 도움말 (UM0620 at 900, 960, 1024: the wide panel
   was 440px and fixed at top 0, and the page beside it kept 502px of its 560). The wide one takes 348px here, the width
   the narrow one has, before it covers anything; the page keeps its width beneath it, and what the panel covers of its
   right edge is the one place the words are read over (명세 4절). Not at 900 itself: there the frame is the narrow one
   (redesign-rf2.css: the menu folded, .lx-split a block, the inner menu a strip over the page) and the panel covers the
   window as under it; placed over the page's edge there it stood under the list, 348px past the window's left edge, and
   a pressed row showed nothing (설정 시스템·기기 at 900, T19-1 A.tsv L122, T19-8). */
/* The page's own panel frames (AI 업무, Control 목록 세부) start under the top line (69px) and were as tall as the window, so
   their foot stood 57-69px below it (PL02, panel-look-r1). Their height is the window less that start. */
@media(min-width:901px){
  :root .ra5-aside{max-height:calc(100vh - 69px)}
}
/* Beside the inner menu a wide panel keeps the page its 560px of words before it keeps its own 500px (PL01, 명세 5절 138행,
   decided 10-16): from 1440 it takes what is left, no less than 348px (1440: 366px, the page 560px), and is 500px again
   where the window has room for both. A frame without the inner menu keeps its 500px at 1440. */
@media(min-width:1422px){
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside.lx-aside-w{flex-basis:clamp(348px,calc(100vw - 1074px),500px)}
}
/* Over the page here both panels are 348px, so the bar lifted over one is its column's 324px, as from 1106px up: at
   440px less its sides it stood past the panel's left edge (browser_redesign_parts, 1024 beside the inner menu). */
@media(min-width:901px) and (max-width:1197px){
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside.lx-aside-w{--lx-over:1;position:relative;z-index:35;flex-basis:348px;margin-left:-348px;box-shadow:var(--ds-shadow-pop)}
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside.lx-aside-w[data-lx-bar-room] .lx-aside-in{max-height:calc(100vh - 100px - var(--lx-bar-room,0px))}
  .lx-split:has(>.lx-snav:not([hidden])):has(>.lx-aside.lx-aside-w) .lx-draftbar[data-lx-lifted]{width:324px}
}
@media(min-width:901px) and (max-width:1105px){
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside:not(.lx-aside-w){--lx-over:1;position:relative;z-index:35;flex-basis:348px;margin-left:-348px;box-shadow:var(--ds-shadow-pop)}
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside:not(.lx-aside-w)[data-lx-bar-room] .lx-aside-in{max-height:calc(100vh - 100px - var(--lx-bar-room,0px))}
  .lx-split:has(>.lx-snav:not([hidden])):has(>.lx-aside:not(.lx-aside-w)) .lx-draftbar[data-lx-lifted]{width:324px}
}
/* Beside the inner menu the page cannot keep its 560px of words even beside a 348px panel under 1422px (menu 236 +
   frame 10 + 212 + 348 + 616), which is where 1280 stands (설정 기기: 418px, its head on two lines). From where the
   rule above ends the panel then stands over the page's right edge without taking its width: it starts under the top
   line, whose 찾기, 알림 and 도움말 stay pressable, and stays in view as the page scrolls (--lx-over tells portalUi, so
   the draft bar is lifted over it as over a covering one). The wide one does so up to 1439px; at 1440 both are as
   they were (명세 4절: 1440 유지). It is over the page and a page's ⋯ menu (30) and under the top line's windows (40):
   at 70 the "?" window opened over 설정 기기 stood under it (served read of cc03e57e at 1280, 10-13). */
@media(min-width:1106px) and (max-width:1421px){
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside:not(.lx-aside-w){--lx-over:1;position:relative;z-index:35;flex-basis:348px;margin-left:-348px;box-shadow:var(--ds-shadow-pop)}
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside:not(.lx-aside-w)[data-lx-bar-room] .lx-aside-in{max-height:calc(100vh - 100px - var(--lx-bar-room,0px))}
  .lx-split:has(>.lx-snav:not([hidden])):has(>.lx-aside:not(.lx-aside-w)) .lx-draftbar[data-lx-lifted]{width:324px}
}
/* The 시스템 panel sticks under the top line (top 69px, from its own start) where it stands beside the page. Where it
   stands over the page's right edge instead (900 to 1421px beside the inner menu, the rules above) that top moved it
   69px down from where the other panels start and its own start left it as short as its words; there it starts and
   reaches as theirs do (X205). */
@media(min-width:901px) and (max-width:1421px){
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside:not(.lx-aside-w):has([data-systems-panel]){top:auto;align-self:stretch}
}
/* The wide one is 348px here too (X483: 440px left 354px of the page at 1280), before it covers the page's edge; from
   1422px the page keeps its 560px beside the clamp above (1422: 348px, 1439: 365px). */
@media(min-width:1198px) and (max-width:1421px){
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside.lx-aside-w{--lx-over:1;position:relative;z-index:35;flex-basis:348px;margin-left:-348px;box-shadow:var(--ds-shadow-pop)}
  .lx-split:has(>.lx-snav:not([hidden]))>.lx-aside.lx-aside-w[data-lx-bar-room] .lx-aside-in{max-height:calc(100vh - 100px - var(--lx-bar-room,0px))}
  .lx-split:has(>.lx-snav:not([hidden])):has(>.lx-aside.lx-aside-w) .lx-draftbar[data-lx-lifted]{width:324px}
}
/* A frame without the inner menu (a panel a screen draws inside its page: 할 일, AI 업무, 행 세부) keeps the page its
   560px beside a 348px panel only from 1210px (X240, X443: 1200 left 550px, 1000 left 350px). Under it the panel covers
   the page's right edge as the one beside the inner menu does, 901px up. */
@media(min-width:901px) and (max-width:1209px){
  .lx-split:not(:has(>.lx-snav:not([hidden])))>.lx-aside{--lx-over:1;position:relative;z-index:35;flex-basis:348px;margin-left:-348px;box-shadow:var(--ds-shadow-pop)}
  .lx-split:not(:has(>.lx-snav:not([hidden])))>.lx-aside[data-lx-bar-room] .lx-aside-in{max-height:calc(100vh - 100px - var(--lx-bar-room,0px))}
  .lx-split:not(:has(>.lx-snav:not([hidden]))):has(>.lx-aside) .lx-draftbar[data-lx-lifted]{width:324px}
}
/* ---------- 넓은 종이: 내용 폭의 상한 (명세 5절) ---------- */
/* The page's content -- its first line with what stands at that line's right, the chips, a table or list, the cards --
   is one piece at most --lx-page-max wide (about 1360px of the design's px, a little over the 1140px it has in a 1440px
   window; the one place the limit is said) and stands in the middle of a wider paper, so its first line and what is
   under it start and end together. The top line (title, tabs, 찾기) keeps the paper's width; a panel stands at the
   paper's right as before and the page keeps the limit in what is left (a row's name and its state, time and action
   are read together: PC1 big-screen, 10-13, 22 of 32 screens had them at the two ends). Up to 1440px the page never
   reaches it. At 1920 the frame leaves about 1368px for content, so the 1370px limit is not reached and the first
   line stays aligned with the title; at 2560 about 150px stay at each side. Agent Universe's map takes the
   whole paper. (56px: the page's two sides, .lx-page's padding.) */
.lx-split>main.lx-page{--lx-page-max:1370px;max-width:calc(var(--lx-page-max) + 56px);margin-inline:auto}
.lx-split>main.lx-page:has(>.app-view[data-page="landscape"]:not([hidden])){max-width:none}
/* A panel a screen draws itself stands inside the page (.lx-split > .lx-page + .lx-aside: 할 일, AI 업무, 승인,
   Control 템플릿 · 예외 규칙), so on a paper wider than the limit it stood that much short of the paper's right with
   the page's free sides left unused (2560: 200px at each side while the list went from 1416 to 916). While such a
   panel is open the page takes the whole paper, so the panel's outer edge is the paper's as the frame's own panel's
   is, and the limit is kept by the page beside it, in the middle of what the panel leaves. Closed, and up to 1440px
   (where the page never reaches the limit), nothing changes. */
.lx-split>main.lx-page:has(>.app-view:not([hidden]) .lx-split>.lx-aside:not([hidden])){max-width:none}
main.lx-page .lx-split:has(>.lx-aside:not([hidden]))>:is(.lx-page,.lx-split-main){max-width:calc(var(--lx-page-max) + 56px);margin-inline:auto}
/* ---------- 큰 화면(1440px 위): 프레임과 공통 창이 함께 커진다 (명세 5절) ---------- */
/* Up to 1440px everything is as it was. Over it the frame (.lx-app: the menu, the top line, the page, a panel) and the
   windows over it (a <dialog>, the toast) are drawn larger together, by one number that grows with the window with no
   step: 1 at 1440, 1.15 at 1920, 1.3 at 2560 and no more over that (words of 14px read as 16px and 18px), and never
   so much that the window would show less than 800px of the design's height (a wide, low window is made less large,
   1920x700 not at all). The number is read from the window's width and height in px with no script
   (tan(atan2(100vw,1px))), and is --lx-scale for whoever needs it (1 at 1440 and under); a browser that cannot read
   it draws as before. The sign-in page (.lx-login) is not in the frame and grows
   by its own rule (redesign-rf2.css), so it is not made larger twice.
   What is made larger counts its px larger, but a vh stays the window's and a script's getBoundingClientRect, pointer
   and innerHeight are the window's px. So a height said in vh is said here again, the window's height over the
   number, for the frame, the windows and the columns of a screen that stand the window's height (each as its own
   sheet says it, with the one division), and a height a script wrote in the window's px (--iss-side-fit) is divided
   the same. The help words that follow the pointer (#app-tooltip, placed by app.js in the window's px) are not made
   larger as a box: their letters and room are. Agent Universe divides what it measures by the same number in its own
   files (PC3 big-screen-sample, 10-13: its map stood 57px under a 1920x1080 window). */
/* (Said as a number, so a script reads "1.15" from it and it is 1 where it is not set; a script that needs how much
   larger one element is drawn reads that element's currentCSSZoom.) */
@property --lx-scale{syntax:"<number>";inherits:true;initial-value:1}
@media(min-width:1441px){
  @supports (zoom:calc(1 / tan(atan2(100vw,1px)))){
    :root{--lx-vw:tan(atan2(100vw,1px));--lx-vh:tan(atan2(100vh,1px));--lx-scale:clamp(1,min(1 + (var(--lx-vw) - 1440) * .0003125,1.15 + (var(--lx-vw) - 1920) * .000234375,var(--lx-vh) / 800),1.3)}
    .lx-app,dialog,.lx-toast{zoom:var(--lx-scale)}
    /* A dialog the page places inside the frame (the Universe present mode) is already drawn larger by the frame: once, not twice (X77). */
    .lx-app dialog{zoom:1}
    :root #app-tooltip.app-tooltip{max-width:min(calc(340px * var(--lx-scale)),calc(100vw - 24px));padding:calc(10px * var(--lx-scale)) calc(12px * var(--lx-scale));font-size:calc(13px * var(--lx-scale))}
    :root .lx-app{min-height:calc(100vh / var(--lx-scale))}
    :root .lx-side{height:calc(100vh / var(--lx-scale))}
    .lx-aside-in{max-height:calc(100vh / var(--lx-scale) - 100px)}
    dialog{max-height:calc(88vh / var(--lx-scale))}
    :root dialog:is(.lx-gloss,.drawer,.lt-ask-dialog){height:calc(100vh / var(--lx-scale));max-height:calc(100vh / var(--lx-scale))}
    :root dialog.lt-cmd{max-height:min(560px,calc(100vh / var(--lx-scale) - 96px))}
    :root .ra5-aside{max-height:calc(100vh / var(--lx-scale) - 69px)}
    :root .ctrl-list{max-height:calc(100vh / var(--lx-scale))}
    :root .ctrl-aside{--ctrl-aside-h:calc(100vh / var(--lx-scale) - 72px)}
    :root .ra6-screen{min-height:calc(100vh / var(--lx-scale) - 140px)}
    :root .ra6-screen>.ra6-side{min-height:calc(100vh / var(--lx-scale) - 78px);max-height:calc(100vh / var(--lx-scale) - 72px)}
    .ds-side{max-height:calc(100vh / var(--lx-scale) - 2 * var(--ds-space-4))}
    @media(min-width:1600px){.ds-rail{max-height:calc(100vh / var(--lx-scale) - 2 * var(--ds-space-4))}}
    :root .uc-layout .ds-side{max-height:calc(100vh / var(--lx-scale) - 140px)}
    :root .iss-screen .ds-side{max-height:calc(100vh / var(--lx-scale) - max(var(--iss-side-top),var(--iss-side-fit,0px) / var(--lx-scale)) - var(--ds-space-4))}
  }
}
@media(prefers-reduced-motion:reduce){.lx-toast{transition:none}}

/* UM0620 at 960px (decision A): from 900 to 1105px the 안쪽 목차 (.lx-snav, 212px) stands folded to its button and opens over
   the page's left edge, so the page, its table and the panel keep the width the menu took. The page is not moved by it
   and the entries keep their order, groups and keyboard way: the button, Tab through the entries, Esc back to the button. */
.lx-snav-fold{display:none}
@media(min-width:900px) and (max-width:1105px){
  .lx-split>.lx-snav{position:relative;z-index:36;flex:0 0 44px;padding:12px 6px;align-items:center}
  .lx-snav-fold{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-surface);color:var(--ds-text-2);cursor:pointer}
  .lx-snav-fold:hover{background:var(--ds-surface-2);color:var(--ds-text)}
  .lx-snav-fold .lx-i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  .lx-snav:not([data-snav-open])>.lx-snav-list{display:none}
  .lx-snav[data-snav-open]>.lx-snav-list:not([hidden]){position:absolute;top:0;left:0;width:212px;min-height:100%;box-sizing:border-box;padding:52px 12px 24px;background:var(--ds-surface);border-right:1px solid var(--ds-line);box-shadow:var(--ds-shadow-pop,0 8px 24px rgba(0,0,0,.18))}
  .lx-snav[data-snav-open]>.lx-snav-fold{position:relative;z-index:1}
}

/* The inner menu (.lx-snav-list, 허용 모델 secnav) is sticky below the sticky top line, not under it (UM0496 C004/C005, b184 sample-1: list top 13.8px under a 69px header). */
:root .lx-snav-list,:root .rm6-secnav{top:72px}
/* a count that is still being read keeps the width of a three-digit one, so the search row beside it does not move when the count arrives (states ST14/15) */
.lx-chip .lx-n{font-variant-numeric:tabular-nums}
.lx-n[data-gd-n-wait],.lx-n[data-gwc-n-wait]{display:inline-block;min-width:3ch;text-align:center}
/* a state chip in a stacked cell keeps its own content width instead of filling the cell (cause MGC16: Active 195px in #gw-keys) */
.lx-cell>:is(.lx-bdg,.lx-st){align-self:flex-start}
/* Every bubble is one line in its own 340px (spec 16 1670, user 10-18: a ⓘ/? and every other bubble, none made wider);
   a press opens its whole words in the same width (app.js showTooltip sets data-expanded). */
#app-tooltip.app-tooltip{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app-tooltip.app-tooltip[data-expanded]{overflow:visible;white-space:normal;text-overflow:clip}

/* A state mark whose cell has left the row stands under the name (portalUi.foldStates, 명세 155): drawn only where the cell is
   really not drawn, so the mark shows once. */
.lx-dropst{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:2px;white-space:normal}