/* RM3 Agent Universe와 Router -- this track's one stylesheet of the redesign (GOAL-redesign-wave 4절 CSS). Its parts are
   redesign-rf1.css's (prefix lx-); index.html links it after them. Only this track writes here.
   Router › 진단 · 적용 기록, the person page's Router card, and Agent Universe's controls and panels over the map: here
   are only what these screens add to the parts. Every colour is a design token (--ds-*) except the stage's own light
   values, which 명세 8.5 gives for the dark map. */

/* ---- Router (명세 8.11) -------------------------------------------------------------------------------------- */
/* (the sentence's end stands clear of what follows it on the line: PC3 eye 10-13, the long sentence touched its link) */
.rg-page .rg-top{align-items:baseline;gap:8px 32px}
/* The first sentence keeps a line's width: what stands beside it (a way on, the time read) goes under it before the
   sentence is squeezed (PC3 narrow look: at 390 px it stood 18 lines tall in a 64 px column beside them). */
.rg-page>.lx-row>.lx-lede{flex-basis:320px}
.rg-asof{margin-left:auto;white-space:nowrap}
/* What an amount is, after it: a small grey word, never in brackets (명세 7.1의 8). */
.rg-kind{margin-left:4px;color:var(--ds-text-3);font-size:13px;font-weight:400;letter-spacing:0;white-space:nowrap}
.rg-summary{padding:8px}
.rg-summary .lx-cols{gap:4px}
.rg-summary .lx-fig-s .rg-kind{font-size:13px}
.rg-search{width:260px;max-width:100%}
/* A link drawn as a button element (a press that opens nothing by address): the part's link, without a button's box. */
.rg-lkb,.rg-sort{appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:inherit;line-height:inherit;cursor:pointer}
.rg-lkb:hover,.rg-sort:hover{background:none}
.rg-lkb{font-weight:500}
.rg-sort{color:inherit}
.rg-sort:hover,.rg-sort:focus-visible{color:var(--ds-text);text-decoration:underline;text-underline-offset:3px}
.rg-sort[data-rg-sorted]{color:var(--ds-text);font-weight:600}
.rg-sort[data-rg-sorted="desc"]::after{content:" ↓"}
.rg-sort[data-rg-sorted="asc"]::after{content:" ↑"}
.rg-apps tbody tr,.rh-routes tbody tr{cursor:pointer}
.rg-apps td,.rh-routes td{vertical-align:middle}
/* The name's column cuts its lines with an ellipsis (명세 6.6): beside an open panel the row is whole, its figures and
   state never under the panel's edge. The width the columns leave is shared among them, not the name's alone (it
   stood 427 of 1096 where the design has 182: PC3 18453 10-13). The grey line of the values that left the row
   (.lx-dropsum) keeps the shared rule's own display: drawn only beside a panel or under 1100px -- display:block
   here outranked that rule, so the line stood under the name with its columns still in the row (a row 79 for 58). */
:is(.rg-apps,.rh-routes) :is(th,td):first-child{min-width:180px;max-width:0}
:is(.rg-apps,.rh-routes) td:first-child :is(.lx-nm,.lx-sub){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.rg-apps,.rh-routes) td:first-child :is(.lx-nm,.lx-sub:not(.lx-dropsum)){display:block}
.rh-routes td:first-child .lx-sub[data-rh-dropsum-saving]{overflow:visible;text-overflow:clip;white-space:normal;word-break:keep-all}
.rg-apps td:is(.lx-r,:last-child),.rh-routes td:not(:first-child){white-space:nowrap}
/* A wide page does not stretch the apps table: its model and its cost stood 830-940px apart at 1920 and 2560 (PC3
   W01). A table takes no max-width, so its width is the lesser of the page's and 1100px (b163 read: 1265 and 1430 with
   a max-width); its columns keep the shares they have under it; nothing else of the table changes. */
.lx-t.rg-apps{width:min(100%,1100px)}
.rg-apps [data-rg-reason-cell]{max-width:220px}
.rg-apps [data-rg-reason-cell] .lx-ell{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* T19-15 (copy w1793005895919-3112950 1024 beside an app's panel: the card 374 wide, its table 466 -- 예상 절감액 cut and
   상태 under the panel). A card too narrow for the app, its cost, its saving and its state does as a phone's width: the
   cost is the open panel's, the name's column gives way. Read on the card, not the window: 1280 beside a panel (518)
   keeps its four columns. */
.rg-rank{container:rg-rank/inline-size}
@container rg-rank (max-width:479px){
  .rg-apps[data-rg-saving-col] [data-rg-cost-cell]{display:none}
  .rg-apps :is(th,td):first-child{min-width:104px}
}
/* The model now and the one recommended on one line, each cut with an ellipsis before the arrow is lost. */
.rg-models{display:flex;align-items:center;gap:6px;min-width:0}
.rg-models .lx-mono{min-width:0}
.rg-from{color:var(--ds-text-3)}
.rg-to{font-weight:500}
/* (the arrow says now → recommended to the eye -- the sr-only 에서 says it to a reader -- so it takes a text's contrast:
   --ds-muted was 2.81:1 on a row's hover rgb(237,241,253), --ds-text-3 is 4.82:1 there and 5.44:1 on white; UR32 E2, 139) */
.rg-arrow{flex:none;color:var(--ds-text-3)}
.rg-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.rg-none{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.rg-how[hidden]{display:none}
/* One app in the panel: its sections a column, each fact a line. */
.rg-app{display:flex;flex-direction:column;gap:20px}
.rg-app-head{flex-wrap:nowrap}
.rg-app-head .lx-sub{display:flex;flex-wrap:wrap;gap:4px 6px}
.rg-rec{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:15px}
.rg-state{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.rg-why{margin:0;color:var(--ds-text-2);font-size:14px}
.rg-lines{display:flex;flex-direction:column;gap:4px;margin:0;padding-left:18px;color:var(--ds-text-2);font-size:14px}
.rg-figures{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;color:var(--ds-text-2);font-size:13px}
.rg-actions{display:flex;flex-direction:column;gap:8px}
.rg-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.rg-site{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-top:1px solid var(--ds-line)}
.rg-site p{margin:0}
.rg-app .lx-kv dd,[data-rh="route"] .lx-kv dd{min-width:0;margin:0;overflow-wrap:anywhere}
.rg-app h4,[data-rpc] h4{margin:4px 0 0}
[data-rh="route"]{display:flex;flex-direction:column;gap:20px}
/* A middle dot and the space after it are one piece: a line breaks before a dot, never after it. */
.rd-dot{white-space:nowrap}

/* The person page's Router card (router-diagnosis.js renderLedger): one person's keys in the ledger. */
[data-rpc="ready"],[data-rl]{display:flex;flex-direction:column;gap:12px}
.rl-tiles{gap:12px}
.rl-tile{border:1px solid var(--ds-line)}
.rl-tile-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.rl-amounts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.rl-amounts small,.rl-tile small{color:var(--ds-text-3);font-size:13px;font-weight:400;letter-spacing:0}
.rl-basis{display:flex;flex-direction:column}
.rl-saving-lines{grid-template-columns:minmax(0,1fr) auto;margin:4px 0}
.rl-saving-lines dd{margin:0;text-align:right}
.rl-saving-lines dd b{font-variant-numeric:tabular-nums}
.rl-saving-word{margin-left:4px;color:var(--ds-text-3);font-size:13px}
[data-rl-saving-state="cost_increase"] b{color:var(--ds-danger-text)}
[data-rl] [data-money="zero"]{color:var(--ds-text-3);font-weight:400}
.rl-id{white-space:nowrap}
.rl-tail{margin-left:4px;color:var(--ds-text-3);font-family:var(--ds-font-mono);font-size:13px}
.rl-ran{white-space:nowrap}
.rl-go,.rl-none-go{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.rl-groups-head{margin-top:4px}
.rl-groups-head .rl-head-go{margin-left:auto}
.rl-cost-note{display:block;color:var(--ds-text-3);font-size:13px;font-weight:400}
/* A figure's meaning by its colour, as the card said it before: a saving, a key that is blocked, a route run elsewhere. */
[data-rl-saving="positive"] b{color:var(--ds-ok-text)}
[data-rl-saving="zero"] b{color:var(--ds-muted);font-weight:400}
[data-rl-blocked],.rl-ran[data-rl-ran="other"]{color:var(--ds-unknown-text)}
[data-rl] p,[data-rpc] p{margin:0}
@media(max-width:560px){
  /* A phone's width: the name's column gives way further, and the cost keeps its figure over its kind. */
  :is(.rg-apps,.rh-routes) :is(th,td):first-child{min-width:104px}
  .rg-apps td.lx-r .rg-kind{display:block;margin-left:0}
  /* With a recommendation the apps table has a column more (예상 절감액): its heads break inside their cells and the
     name's column gives way once more, so the table is as wide as its card (g2 390: 368 of 316, the page 405 of 390). */
  .rg-apps th .rg-sort{white-space:normal;text-align:inherit}
  .rg-apps th{padding-left:4px;padding-right:4px}
  .rg-apps :is(th,td):first-child{min-width:92px}
}
@media(max-width:900px){
  .rg-summary .lx-cols,.rl-tiles{grid-template-columns:minmax(0,1fr)}
  .rg-asof{margin-left:0}
  .rg-search{width:100%}
  /* A person's Router card in a narrow page: its tables' heads, IDs and models break inside their cells, so the table
     is as wide as its card (uiw1 390: the heads and an ID on one line each made it 467 of 316 and the page 504 of 390). */
  [data-rpc] [data-rl] table.lx-t :is(th,td),[data-rpc] [data-rl] table.lx-t :is(.rl-id,.rl-ran){white-space:normal;overflow-wrap:anywhere}
}

/* ---- Agent Universe: what stands over the map (명세 8.5의 2 · 3 · 6; PC3 recheck-3 header 15 · 16 · 18 · 25, eye 12 · 13) --
   universe-style.js adds the screen's own sheet after this one, so each rule here is written under the page's mount
   (#universe-root): 발표 모드 stands under another mount and takes none of them. Only where the row, the panels, the
   legend and the totals stand and how large their words are: every control, its words and what it does are the map's. */
/* 지도에서 찾기 is the common field and Control the common choice (명세 6.5: 36 px 14/400, 34 px 14/500). The
   field is the design's magnifier, opened over the chips while used (universe-style.js), and Control as wide as the
   name it says, up to 320 px (BOOTH-6 18453 10-20 1440: 'Control: 개인정보 유출 ·' cut at 190), so the row (찾기,
   강조해서 보기, Control, 거르기 and at its right the map's buttons) is one line at 1440 with every 강조 chip drawn
   (T19-5 · A.tsv 37); what it finds keeps a list's width under it. */
#universe-root .uv[data-uv-bleed]:not([data-uv-present]) .uv-results{right:auto;width:max(100%,260px);max-width:calc(100vw - 32px)}
#universe-root .uv[data-uv-bleed]:not([data-uv-present]) .uv-search input{height:36px;font-size:14px;font-weight:400}
#universe-root .uv[data-uv-bleed]:not([data-uv-present]) .uv-ctl select{field-sizing:content;flex:0 1 auto;width:auto;min-width:0;max-width:320px;height:34px;font-size:14px}
/* The legend is the design's small grey line, and the totals stand at the right of their line with 기준 and the poll
   after them: the legend reads as the left of the map's foot and the counts as its right. */
#universe-root .uv[data-uv-bleed]:not([data-uv-present]) .uv-legend{gap:4px 14px;font-size:13px}
#universe-root .uv[data-uv-bleed]:not([data-uv-present]) .uv-legend i{width:8px;height:8px}
#universe-root .uv[data-uv-bleed]:not([data-uv-present]) .uv-total-row{margin-left:auto}
#universe-root .uv[data-uv-bleed]:not([data-uv-present]) .uv-poll{margin-left:0}
@media(min-width:1181px){
  /* 가벼운 보기: the panels stand beside the map (its drawing is not moved clear of a pane), at the glass list's width
     and 20 px inside the frame, as in the 3D view. */
  #universe-root .uv[data-uv-bleed]:not([data-uv-view="gl"],[data-uv-at="lanes"],[data-uv-present]) .uv-body{grid-template-columns:minmax(0,1fr) 304px}
  #universe-root .uv[data-uv-bleed]:not([data-uv-view="gl"],[data-uv-at="lanes"],[data-uv-present]) .uv-rail{padding-right:20px}
  /* What is chosen is whole over the list, up to 55% of the map's height (its share was taken from its own height: at
     1280x800 할 일 만들기 stood cut in half under the list); the list takes what is left and scrolls. */
  #universe-root .uv[data-uv-bleed]:not([data-uv-view="gl"],[data-uv-at="lanes"],[data-uv-present]) .uv-left{flex:0 0 auto;max-height:calc(var(--uv-h) * .55)}
  #universe-root .uv[data-uv-bleed]:not([data-uv-view="gl"],[data-uv-at="lanes"],[data-uv-present]) .uv-side{flex:0 1 auto}
  /* The 3D view: what to see is the row, one line at 1440 with every chip and the map's buttons at its right, and
     wrapping where it needs (1280: a second line). Where one is (the crumbs) stands at the map's top left under the
     row, and the panels under that line; in 전체 화면 the map's buttons stand on that line's right. */
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]){--rm3-tools:368px}
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-ctl{row-gap:0;padding-top:8px}
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-ctl>*{margin-top:8px}
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-crumbs{flex-wrap:nowrap;max-width:calc(100% - 52px - var(--rm3-tools))}
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-crumbs button{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-crumbs button[aria-current="true"]{flex-shrink:0}
  /* No name of the map is read through the row or a panel (PC 10-13: claude-sonnet stood through the first sentence,
     사람 165 through Control and 거르기): the row's ground is the stage's own top shade, as tall as the row and
     opaque (at .96 a lit name still stood faintly in it) -- it lies over the map and its names and under the crumbs and the map's buttons --, the glass
     panels are as dark, and the legend stands on a shade of its own. The map, its names and where they stand are not
     touched. */
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-ctl{background:none}
  /* 전체 화면 is the stage alone: the row is not over it, so its crumbs and map's buttons stand 8 px under its top and
     the shade under them is theirs only (BOOTH-6 18453 10-20 1440: a 140 px empty band, + over 회사 전체). */
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-stage:fullscreen{--uv-top:0px}
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-stage::before{height:calc(var(--uv-top,0px) + 14px);background:linear-gradient(#0b1330 calc(100% - 14px),rgba(11,19,48,0))}
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-rail{--ds-surface:rgba(11,19,48,.94)}
  /* The legend wraps before the list and none of it is faded (an item at a line's end stood half under the fade); its
     shade runs on under the list, so it has no edge of its own. */
  #universe-root .uv[data-uv-bleed][data-uv-view="gl"]:not([data-uv-at="lanes"],[data-uv-present]) .uv-legend{right:0;padding-right:328px;background:linear-gradient(rgba(11,19,48,0),rgba(11,19,48,.82) 16px);-webkit-mask-image:none;mask-image:none}
}
/* 이번 주 변화 · 발표 모드 on the title line (universe-map.js placeTitle; v24 Universe.html, 명세 8.5-1) */
.lx-place-slot .uv-title-acts{display:inline-flex;align-items:center;gap:8px}