/* RA1 현황 · AI 자산 › 사람 · 기기 (명세 8.1, 8.2): the layout of 현황 › 요약 (#overview-root), 현황 › 미관리
   (#unmanaged-root) and AI 자산 › 사람 · 기기 (#people-root, #agent-devices-root). The parts themselves -- card, stat,
   band (spec), chips, table rows, pager, panel, notes -- are RF1's lx- parts (redesign-rf1.css); this file only places
   them and names the columns of these screens' tables. Classes here are ra1-*. Colours are tokens only. */

.ra1-page{display:flex;flex-direction:column;gap:20px;min-width:0}
.ra1-page :is(.lx-lede,.lx-lbl,.lx-sub,.lx-nm,.lx-h2,.lx-h3){word-break:keep-all}
.ra1-ell{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ra1-page .lx-card{min-width:0}
.ra1-page .lx-card-h .lx-push{margin-left:auto}

/* ---- 현황 › 요약 ---- */
.ra1-first{gap:10px 12px}
.ra1-first .lx-lede{min-width:min(100%,420px)}
.ra1-renew-row:empty{display:none}
.ra1-renew-row{margin-top:-12px;color:var(--ds-text-3);font-size:var(--ds-fs-xs)}

/* 기준 시각 and its sources, folded beside the first line */
.ra1-asof{position:relative}
.ra1-asof>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;white-space:nowrap}
.ra1-asof>summary::-webkit-details-marker{display:none}
.ra1-asof>summary:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px;border-radius:4px}
.ra1-asof-dot{width:7px;height:7px;border-radius:50%;background:var(--ds-caution)}
.ra1-asof-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(360px,80vw);display:flex;flex-direction:column;gap:8px;
  padding:12px 14px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface);box-shadow:0 8px 24px rgba(15,23,40,.12)}
.ra1-fresh{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;font-size:var(--ds-fs-xs)}
.ra1-fresh-item[data-stale] b{color:var(--ds-caution-text)}

/* 직원 관리 상태 */
.ra1-status{display:flex;flex-direction:column}
/* The card is its own content's height, not the Task card's beside it (UR34-1·2, 사용자 10-20 12:28: stretched to a long
   Task, it left blank under the cells and the closed 자세히, and the 30 days grew with it). The figure and the 30-day
   line are one band right under the card's title (시안), the figure's foot on the line's; the closed 자세히 is its one
   line and opens only when pressed. */
.ra1-pair>.ra1-status{align-self:start}
/* Without a trend to fit, the shared equal-height row aligns the empty status with Task. */
.ra1-pair>.ra1-status:not(:has(.ra1-trend-plot,.ra1-trend-none)){align-self:stretch}
/* 부서별 too beside 지난 7일, whose Control lines with their kinds run long (R1 14:55: blank under its six rows). */
.ra1-pair>.ra1-units{align-self:start}
/* fitUnits folds whole rows to fit 지난 7일, so the card ends short of it by under one row (R1 T19: 9~10 px at 1440/1920/2560).
   While a row is folded the pair stands one height; with all rows shown it stays its own height. */
.ra1-pair>.ra1-units:has([data-managed-unit-more][hidden]){align-self:stretch}
.ra1-figure-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px 36px;margin-bottom:18px;flex:0 0 auto}
.ra1-figure{align-self:flex-end}
/* the 30 days beside the figure; too few days kept to draw it, the same place stands framed with the days kept said in
   it. The plot keeps v24 Main.html's own ratio (its svg 420 x 64, at least 64 px; UR38-1, 사용자 10-21: the fixed 165 px
   stood too tall beside 내 Task at 1440/1920/2560): as wide as the card spares, as tall as that ratio, not the card's --
   but for what 내 Task's whole lines leave beside it, which managed-status.js fitPair gives it (T19-19). */
.ra1-trend{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
.ra1-trend-head,.ra1-trend-ends{justify-content:space-between}
.ra1-trend-now{font-size:var(--ds-fs-xs);font-weight:600}
.ra1-trend-svg{display:block;width:100%;flex:1 1 auto;min-height:0}
.ra1-trend-plot{flex:0 0 auto;aspect-ratio:420/64;min-height:64px}
/* a day of the 30 under the pointer, a tap or the arrow keys: its vertical line, and its dot where it was kept */
.ra1-trend-days{position:absolute;inset:0}
.ra1-trend-day{position:absolute;top:0;bottom:0;outline:0;touch-action:manipulation}
.ra1-trend-day::before{content:"";position:absolute;top:0;bottom:0;left:var(--trend-x);width:1px;background:var(--ds-line-strong);opacity:0}
.ra1-trend-day:not([data-trend-none])::after{content:"";position:absolute;left:var(--trend-x);top:var(--trend-y);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ds-danger);box-shadow:0 0 0 2px var(--ds-surface,#fff);opacity:0}
.ra1-trend-day:is(:hover,:focus-visible,[aria-describedby])::before,.ra1-trend-day:not([data-trend-none]):is(:hover,:focus-visible,[aria-describedby])::after{opacity:1}
.ra1-trend-none{flex:0 0 auto;min-height:64px;display:flex;align-items:center;justify-content:center;padding:8px 12px;border:1px dashed var(--ds-line-strong);border-radius:8px;text-align:center}
.ra1-cells{gap:4px;margin-top:8px}
/* 자세히 (UR24, UR35-1): Managed, Unmanaged and Needs review side by side as the card's width allows -- a name and a count
   a line, the count right -- and the 관리 조건 under them, across. The states run down three columns at most, each whole
   in one, so a short one stands under the one before it (T19-19: as a grid, Needs review took a row of its own under
   Managed's one line, 140 to 180 px of blank beside it at 1440 to 2560 and 관리 현황 that much taller than 내 Task). */
.ra1-detail{columns:3 200px;column-gap:24px;margin-top:8px}
.ra1-detail>.ra1-detail-group{break-inside:avoid;margin-bottom:12px}
.ra1-detail-row{grid-template-columns:minmax(0,1fr) auto;min-height:0;padding:5px 6px}
.ra1-detail-row .lx-nm{color:inherit}
/* (a name cell is the shared .lx-cell, a column: its ⓘ stands beside the name on its line, not under it -- C g2 actual) */
.ra1-detail-row>.lx-cell{flex-direction:row;align-items:center;gap:6px}
.ra1-detail>.ra1-detail-group[data-managed-detail="conditions"]{display:flex;flex-direction:column;gap:6px;padding:8px 6px 0;margin-bottom:0;column-span:all}
/* a column's line that is no count (그 가운데 Task 진행 중, 겹침 있음: UR35-1), under its head */
.ra1-detail-note{display:flex;align-items:center;gap:6px;margin:0;padding:4px 6px}
.ra1-detail-tags{display:flex;flex-wrap:wrap;gap:4px}
.ra1-cell{color:inherit;text-decoration:none}
/* a state's badge is its word's width, not the cell's (UR30-13: the cell is a column) */
.ra1-cell>.lx-bdg{align-self:flex-start}
.ra1-cell:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.ra1-cell:focus-visible,.ra1-sig:focus-visible{outline:2px solid var(--ds-accent);outline-offset:1px}

/* 내 할 일 */
.ra1-buckets{gap:4px}
.ra1-buckets .lx-stat{color:inherit;text-decoration:none}
.ra1-buckets a.lx-stat:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.ra1-todo-top{margin:8px 0 0;padding:0}
/* 내 Task as tall as 관리 현황 opened beside it (UR34-2 D, lead 17:57): the card is a column and the further urgent lines
   take the height it is given -- basis 0, so they never make the row taller -- each whole line in it shown and the
   ones past it wrapped into a second column out of sight, so no blank under the lines and no half line. */
.ra1-todo{display:flex;flex-direction:column}
.ra1-todo-more{flex:1 1 0;min-height:0;flex-wrap:wrap;align-content:flex-start;overflow:hidden;margin:0;padding:0}
.ra1-todo-more>*{flex:none;width:100%}
/* A first line too tall for the room left wraps away whole too: a column's first item never wraps, so a 0-high first
   item stands before it (UR38-1 u355b 1440: the lower 30일 추이 left less than a line, and the line showed cut in half). */
.ra1-todo-more::before{content:"";flex:none;width:100%;height:0}
/* A line wrapped out of sight is hidden as well (managed-status.js fitTodo): no focus, nothing said (X493). */
.ra1-todo-more>[data-todo-out]{visibility:hidden}
.ra1-todo-click{margin-top:12px}
.ra1-card-foot{margin-top:12px}
.ra1-today-row{grid-template-columns:minmax(0,1fr) auto}
.ra1-today-go{display:flex;align-items:center;gap:10px;justify-self:end}
.ra1-today-more>summary{margin-top:8px;cursor:pointer}

/* 미관리 사유 */
.ra1-reason-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) 56px minmax(0,164px)}
.ra1-reason-row .lx-nm.ra1-ell,.ra1-reason-row .lx-sub.ra1-ell{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;word-break:keep-all}
.ra1-count{display:flex;align-items:center;gap:10px;min-width:0}
.ra1-count-n{min-width:44px;text-align:right;font-weight:600;white-space:nowrap}
.ra1-act-cell{justify-self:end;min-width:0}
.ra1-act{display:block;max-width:164px;overflow:hidden;text-overflow:ellipsis;line-height:26px}

/* 수집·정책 범위 */
.ra1-ratio-list{margin:0;padding:0;list-style:none;gap:20px}
.ra1-ratio{display:flex;flex-direction:column;gap:8px}
.ra1-ratio-head{justify-content:space-between}
/* What is lacking is said in its state's colour and the label's weight. A link inside a sentence -- 미설치 · 미연동 ·
   정책 없음 · 일부 연동 here, 기기 보기 and its action in 소유자 없는 기기's sentence -- is told from the words around it by
   its underline, never its colour alone (명세 12 "상태를 색만으로 전하지 않는다"; PC1 A08's expectation "문장 안 링크는 색
   외에 밑줄로 구별"): red or amber on the label's grey is 1.2:1, so f82b38efc's underline under the pointer only left
   them told by colour alone (axe link-in-text-block serious, cq1 PV0015 10-14). A link standing alone is as .lx-lk. */
.ra1-ratio .ra1-lack{font-weight:inherit}
.ra1-ratio .lx-lbl .lx-lk,.lx-lbl[data-managed-reason="ownerless"] .lx-lk{text-decoration:underline;text-underline-offset:2px}
.ra1-ratio .ra1-lack.lx-c-bad,.ra1-ratio .ra1-lack.lx-c-bad:hover{color:var(--ds-danger-text)}
.ra1-ratio .ra1-lack.lx-c-warn,.ra1-ratio .ra1-lack.lx-c-warn:hover{color:var(--ds-caution-text)}

/* 부서별 */
/* Unmanaged's column is as wide as its head, and a head of two words breaks into even lines -- Task / 진행 중, never 중
   alone under Task 진행 with Unmanaged running into it (UR30-9 a181u 1440, 10-21). */
.ra1-unit-row{grid-template-columns:minmax(0,1.1fr) 56px minmax(0,1.6fr) 56px 56px 72px 64px;color:inherit;text-decoration:none}
/* T13-17: with Partial's column after Managed (the overview departments, where the summary says the five states) */
.ra1-unit-row[data-managed-partial]{grid-template-columns:minmax(0,1.1fr) 56px minmax(0,1.6fr) 56px 56px 56px 72px 64px}
.ra1-unit-row.lx-th>span{text-wrap:balance}
.ra1-unit-row .lx-spec{align-self:center}
.ra1-unit-bad b{color:var(--ds-danger-text)}

/* 지난 7일 */
.ra1-week-line{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--ds-line)}
.ra1-week-line:last-child{border-bottom:0}
.ra1-week-line .lx-sig{flex:1;min-width:0;border-bottom:0;font:inherit;text-align:left;background:transparent;border-left:0;border-right:0;border-top:0;cursor:pointer}
.ra1-week-line div.lx-sig{cursor:default}
.ra1-week-go{font-size:var(--ds-fs-xs);white-space:nowrap}
/* 보안 이벤트's kinds under 차단 and 탐지: a kind, its source, its count (UR30-9) */
.ra1-week-kinds{list-style:none;margin:0;padding:0 0 6px 12px;border-bottom:1px solid var(--ds-line)}
.ra1-week-kinds .ra1-kind{display:flex;align-items:baseline;gap:8px;padding:3px 0;font-size:var(--ds-fs-sm);color:inherit;text-decoration:none}
.ra1-week-kinds a.ra1-kind:hover .lx-grow{text-decoration:underline}
.ra1-week-gap{margin:6px 0}

/* 시작 단계 */
.ra1-steps ol{margin:0;padding:0;list-style:none}
.ra1-step-at{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ds-surface-3);font-size:var(--ds-fs-xs);font-weight:600}
.ra1-step[data-step-done="true"] .ra1-step-at{background:var(--ds-ok-soft);color:var(--ds-ok-text)}

/* ---- 미관리 · 사람 · 기기 (틀 B) ---- */
.ra1-list{position:relative}
.ra1-list-first{gap:10px 14px}
.ra1-list-lede{min-width:min(100%,360px)}
.ra1-list-judged{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.ra1-list-band{cursor:pointer}
.ra1-insights-pick{display:contents}
.ra1-insights-pick:empty{display:none}
.ra1-head{gap:10px}
.ra1-states>button b{font-weight:500;color:var(--ds-text-3)}
.ra1-states>button:is(.lx-on,[aria-pressed="true"]) b{color:inherit}
.ra1-tools{gap:8px;align-items:flex-start}
.ra1-find{display:flex;align-items:center;gap:6px;flex:0 1 260px;min-width:200px}
.ra1-find .lx-find{flex:1;min-width:0}
.ra1-reason-chips{display:contents}
.ra1-picks{gap:8px}
.ra1-state-row{gap:10px}
.ra1-zero-chips{display:contents}
.ra1-zero-chips[hidden]{display:none}
.ra1-zero-chip{border-style:dashed;color:var(--ds-text-3)}
.ra1-pick select{width:auto;min-width:140px;max-width:240px}
.ra1-cond{gap:4px;padding-right:4px}
.ra1-cond-x{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer}
.ra1-cond-x:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.ra1-wait{display:inline-block;width:2.5em;height:1em;vertical-align:middle}
.ra1-wait-chips{width:240px;height:30px}

/* the list's table: one grid per set of columns (명세 6.6: rows 46px and more, names on two lines, no wrapping) */
.ra1-list-table .lx-tr{column-gap:16px}
.ra1-list-table .lx-tr[data-managed-pick]{cursor:pointer}
.ra1-list-table .lx-tr[data-managed-pick]:focus-visible{outline:2px solid var(--ds-accent);outline-offset:-2px;border-radius:8px}
.ra1-list-table [role="cell"]{min-width:0}
.ra1-list-table .lx-cell{min-width:0}
.ra1-list-table .lx-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra1-why{min-width:0}
.ra1-cols-name-unit-state-why,.ra1-cols-name-owner-state-why,.ra1-cols-name-dev-state-why{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 108px minmax(0,1.8fr)}
.ra1-cols-name-unit-why,.ra1-cols-name-owner-why,.ra1-cols-name-dev-why{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,2fr)}
.ra1-cols-name-unit-state-issue-why,.ra1-cols-name-owner-state-issue-why,.ra1-cols-name-dev-state-issue-why{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) 108px minmax(0,1fr) minmax(0,1.5fr)}
.ra1-cols-name-unit-issue-why,.ra1-cols-name-owner-issue-why,.ra1-cols-name-dev-issue-why{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1.6fr)}
/* 사람's devices are a number column of their own, right-aligned (G1-29) */
.ra1-cols-name-unit-count-state-why{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) 76px 108px minmax(0,1.8fr)}
.ra1-cols-name-unit-count-state-issue-why{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 76px 108px minmax(0,.9fr) minmax(0,1.5fr)}
.ra1-list-table [data-col="count"]{justify-self:end;text-align:right;padding-right:var(--sp-5)}
/* (stacked under 900px the heads are hidden: the count says its name before it, at the row's start) */
.ra1-cell-lbl{display:none}
/* 기기's last collection is a column of its own (G1-31): how long ago, short words */
.ra1-cols-name-owner-seen-state-why{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) 88px 108px minmax(0,1.7fr)}
.ra1-cols-name-owner-seen-state-issue-why{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) 88px 108px minmax(0,.9fr) minmax(0,1.4fr)}
.ra1-row-act{max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:0;border:0;background:transparent;font:inherit;font-size:var(--ds-fs-xs);text-align:left;cursor:pointer;display:block;white-space:nowrap}
.ra1-pager{padding-top:12px}

/* one row's panel */
.ra1-panel{gap:16px}
.ra1-panel-state{gap:8px;align-items:flex-start}
.ra1-panel-lead{margin:0;color:var(--ds-text-2)}
.ra1-panel-acts{gap:8px}
.ra1-panel-li{align-items:flex-start}
.ra1-aside{position:absolute;top:0;right:0;bottom:0;z-index:5;overflow:auto;box-shadow:-8px 0 24px rgba(15,23,40,.08)}

@media (max-width:900px){
  .ra1-reason-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 56px}
  .ra1-reason-row>:nth-child(4),.ra1-reason-row>:nth-child(5){grid-column:span 1}
  .ra1-reason-row>.ra1-act-cell{grid-column:1/-1;justify-self:start}
  .ra1-unit-row{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px}
  .ra1-unit-row>:nth-child(4),.ra1-unit-row>:nth-child(5),.ra1-unit-row>:nth-child(7){display:none}
  .ra1-unit-row[data-managed-partial]{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px}
  .ra1-unit-row[data-managed-partial]>:nth-child(6),.ra1-unit-row[data-managed-partial]>:nth-child(8){display:none}
  .ra1-unit-row[data-managed-partial]>:nth-child(7){display:block}
  .ra1-list-table .lx-tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ra1-list-table .lx-th{display:none}
  .ra1-list-table [data-col="count"]{justify-self:start;text-align:left;padding-right:0}
  .ra1-list-table .ra1-cell-lbl{display:inline;color:var(--muted)}
  .ra1-find{flex-basis:100%}
  .ra1-aside{position:fixed;left:0;width:auto;max-width:none}
}
/* A part of the page that was not read (RA37, 명세 6.8 읽기 오류): the whole part in the shared empty frame inside its
   card, or one line at the card's foot under the values that were read -- what was not read, and 다시 시도. */
.ra1-overview .lx-card>.ra1-part-unread.lx-empty{flex:0 0 auto;padding:20px 16px}
/* (why it was not read is its own line: 다시 시도 stands under it, not at the end of the sentence) */
.ra1-overview .ra1-part-unread.lx-empty>span{display:block}
.ra1-overview .lx-row.ra1-part-unread{gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--ds-line)}
.ra1-overview .lx-row.ra1-part-unread .lx-btn{flex:0 0 auto}