@charset "utf-8";
/* Click 포털 리디자인 2단계: 대시보드(현황)와 AI 자산 (HANDOFF 5.1·5.2). Writer: Click 디자인 전담.
   The screens' own rules in the Click design's look, read after click-parts.css (portal-modules.json styles) so a
   screen may restyle a shared part where it stands, never the part itself. Only click-tokens.css tokens (no new
   colour, no new shared part: ask the Click 디자인 전담 for one); markup, data-testid, API calls, permission checks
   and old addresses stay as they are. */

/* ---------- 현황: 헤드라인 (HANDOFF 5.1) ---------- */
.ra1-overview .ra1-first{flex-wrap:wrap;align-items:flex-end;gap:16px 24px;margin:0}
.ra1-headline-wrap{min-width:0;flex:1 1 480px}
.ra1-headline{margin:0;color:var(--ink);font-size:var(--fs-page);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:var(--ls-head);text-wrap:pretty}
.ra1-headline .lx-na{font-size:inherit}
.ra1-headline-sub{margin:6px 0 0;color:var(--ink-3);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}

/* ---------- 현황: 관리율 카드 · 관리 밖 사유와 내 Task (HANDOFF 5.1, 6) ---------- */
/* 직원 관리 상태 and the conditions are one card: one frame, a divider between, each part its own padding. */
.ra1-rate{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.ra1-rate>.lx-card{border:0;border-radius:0;background:transparent;box-shadow:none}
.ra1-rate>.lx-card+.lx-card{border-top:1px solid var(--divider)}
.ra1-trio{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
@media (min-width:1080px){
  .ra1-rate{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ra1-rate>.lx-card+.lx-card{border-top:0;border-left:1px solid var(--divider)}
  .ra1-trio{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:2560px){
  .ra1-trio:has(>:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 현황: 관리율 카드의 안 (Click Design System 3단계) ----------
   The card's note is its subtitle's quiet line, not a grey box above the figure; the trend's "not yet" a quiet inset, not
   a dashed slab; the four states a legend -- a dot and the state's word over its count -- not four badges. */
.ra1-status>.lx-note{margin:-6px 0 12px;padding:0;border:0;background:transparent;color:var(--muted);font-size:var(--fs-xs)}
/* (G1-04: with no day kept the trend is one quiet line under its name, no box: its place stays, empty, only as the room
   that matches 내 Task's height beside it -- fitPair, UR34-2.) */
.ra1-trend-none{min-height:56px;justify-content:flex-start;align-items:flex-start;padding:0;border:0;border-radius:0;background:transparent;color:var(--muted);font-size:var(--fs-xs)}
.ra1-cells{gap:4px 8px;margin-top:14px}
.ra1-status .ra1-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){.ra1-status .ra1-cells:is(.lx-c-4){grid-template-columns:repeat(4,minmax(0,1fr))}.ra1-status .ra1-cells:is(.lx-c-3){grid-template-columns:repeat(3,minmax(0,1fr))}}
.ra1-cell{gap:4px;padding:8px 10px}
.ra1-cell>.lx-bdg,.ra1-cell>.lx-bdg.lx-bdg-st{gap:6px;height:auto;margin:0;padding:0;border:0;background:transparent;color:var(--ink-3);font-size:var(--fs-xs);font-weight:var(--fw-medium);line-height:1.4}
.ra1-cell>.lx-bdg::before{content:"";box-sizing:border-box;width:7px;height:7px;flex:none;border:0;border-radius:50%;background:var(--faint)}
.ra1-cell[data-state="controlled"]>.lx-bdg::before{background:var(--st-managed)}
.ra1-cell[data-state="partial"]>.lx-bdg::before{background:var(--st-partial)}
.ra1-cell[data-state="unmanaged"]>.lx-bdg::before{background:var(--st-unmanaged)}
.ra1-cell:is([data-state="unknown"],[data-state="needs_review"])>.lx-bdg::before{border:1.5px dashed var(--st-review);background:transparent}
.ra1-reason-table>.lx-th>*{white-space:nowrap}

/* ---------- 현황: 관리 조건 줄 (HANDOFF 5.1 "관리 조건 4개: 충족률 막대 + 빠진 대상") ---------- */
/* Inside the 관리율 card, each condition is one numbered line: number | name, and its words under | the bar | the share.
   The line's own parts (head, .lx-spec, .lx-lbl) are placed by the grid; nothing is drawn or counted here. A phone keeps
   the stacked line. */
@media (min-width:768px){
  .ra1-rate .ra1-ratio-list{counter-reset:ra1-cond;gap:0}
  .ra1-rate .ra1-ratio{counter-increment:ra1-cond;display:grid;grid-template-columns:22px minmax(0,1.15fr) minmax(72px,1fr) minmax(64px,auto);grid-template-areas:"num name bar fig" "num words bar fig";align-items:center;gap:2px 14px;padding:12px 0;border-top:1px solid var(--divider)}
  .ra1-rate .ra1-ratio:first-child{padding-top:4px;border-top:0}
  .ra1-rate .ra1-ratio:last-child{padding-bottom:0}
  .ra1-rate .ra1-ratio::before{content:counter(ra1-cond);grid-area:num;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--bg-subtle);color:var(--ink-3);font:500 11px/1 var(--font-mono)}
  .ra1-rate .ra1-ratio-head{display:contents}
  .ra1-rate .ra1-ratio-head>:first-child{grid-area:name;min-width:0}
  .ra1-rate .ra1-ratio-head>.lx-fig-s{grid-area:fig;justify-self:end;white-space:nowrap}
  .ra1-rate .ra1-ratio>.lx-spec{grid-area:bar;align-self:center}
  .ra1-rate .ra1-ratio>.lx-lbl{grid-area:words;min-width:0;color:var(--muted)}
}
/* 빠진 대상: the condition's lack (its own link or button, as drawn) stands as the design's pill, in its state's tone. */
.ra1-rate .ra1-ratio .ra1-lack{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;font-weight:600;text-decoration:none}
.ra1-rate .ra1-ratio .ra1-lack.lx-c-bad,.ra1-rate .ra1-ratio .ra1-lack.lx-c-bad:hover{background:var(--st-unmanaged-bg);color:var(--st-unmanaged-fg)}
.ra1-rate .ra1-ratio .ra1-lack.lx-c-warn,.ra1-rate .ra1-ratio .ra1-lack.lx-c-warn:hover{background:var(--st-review-bg);color:var(--st-review-fg)}
.ra1-rate .ra1-ratio .ra1-lack:hover{box-shadow:inset 0 0 0 1px currentColor}

/* ---------- AI 자산: 제품별 보기 (HANDOFF 5.2) ---------- */
.at-table[data-at-table="groups"] .at-group-states-cell{width:28%;min-width:140px}
.at-table[data-at-table="groups"] .at-group-states{width:100%;height:8px}

/* ---------- AI 자산: 개요 머리 (PAGE_PATTERNS A, HANDOFF 5.2) ----------
   The headline and its grey line at the left, 기준 시각 · 새로고침 · 목록 대조 at the right on the headline's last line. */
.ao-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-3) var(--sp-6)}
.ao-top>.ao-headline-wrap{flex:1 1 480px;min-width:0}
.ao-top>.ao-head{flex:0 0 auto;margin-left:auto}
.ao-headline{margin:0;color:var(--ink);font-size:var(--fs-page);font-weight:var(--fw-bold);line-height:var(--lh-snug);letter-spacing:var(--ls-head);text-wrap:pretty}
.ao-headline-sub{margin:6px 0 0;color:var(--ink-3);font-size:var(--fs-body);line-height:var(--lh-body)}

/* ---------- AI 자산: 개요 타일 (HANDOFF 5.2 개요) ----------
   Six tiles, never one left alone on a row: four a row as the design draws them (4 + 2), three on a narrow body, two on
   a tablet, one on a phone, the six in one row from 1760px. A tile is the MetricCard: its name and arrow, the 26px
   figure, one grey line, the 4px bar and the line of what is missing at its foot. */
.ao-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap)}
@media(min-width:560px){.ao-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.ao-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.ao-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1760px){.ao-tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ao-tile{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;padding:var(--sp-4) var(--sp-5);box-shadow:none}
.ao-tile-h{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink);font-size:var(--fs-body);font-weight:var(--fw-semibold);text-decoration:none}
.ao-tile-h:hover .ao-tile-go{color:var(--ink)}
.ao-tile-go{color:var(--faint)}
.ao-tile-figure{margin:4px 0 0;line-height:1.1}
.ao-tile-n{color:var(--ink);font-size:var(--fs-kpi);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.ao-tile-n.lx-na{color:var(--muted)}
.ao-tile-figure .lx-unit{margin-left:3px;color:var(--muted)}
.ao-tile-parts,.ao-tile-basis{margin:0;overflow:hidden;color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-body);white-space:nowrap;text-overflow:ellipsis}

/* ---------- AI 자산: 에이전트 관리 상태 카드 ----------
   The four states as the dashboard's legend: a dot and the state's word over its count, four in a row (two on a phone). */
.ao-card .ao-rate-figure{font-size:var(--fs-kpi);font-weight:var(--fw-bold)}
.ao-card .ao-rate-name{font-size:var(--fs-body)}
.ao-states{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);margin:var(--sp-3) 0 var(--sp-2)}
.ao-state{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:6px;row-gap:2px;color:var(--ink-3);font-size:var(--fs-xs)}
.ao-state>.lx-dot{grid-row:1;grid-column:1}
.ao-state>.ao-state-word{grid-row:1;grid-column:2;font-weight:var(--fw-medium)}
.ao-state>:is(.ao-figure,.lx-na){grid-row:2;grid-column:1/-1;justify-self:start;margin:0;font-size:var(--fs-kpi-sm);font-weight:var(--fw-semibold)}
.ao-state>.ao-state-sub{grid-column:1/-1;padding:0}
@media(max-width:599.98px){.ao-states{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* G1-13: a reason's count, then its bar (the shared .lx-bar) taking the rest of the column, as 현황's 미관리 사유 */
.ao-page .ao-table[data-ao-managed-reasons] td:nth-child(2){width:40%}
.ao-reason-n{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.ao-reason-n>.ao-figure{flex:none;min-width:var(--sp-10);text-align:right}
.ao-reason-n>.lx-bar{flex:1 1 0;min-width:0}
/* G1-11: a tile with no bar keeps the bar's place, so the six tiles' lines stand level */
.ao-tile-bar,.ao-tile-bar-slot{height:var(--bar-h-sm);margin-top:6px}
.ao-tile-bar-slot{display:block}
.ao-tile-problem{margin:auto 0 0;padding-top:2px;font-size:var(--fs-xs);font-weight:var(--fw-semibold)}

/* ---------- AI 자산: 목록 탭 (HANDOFF 5.2 열) ---------- */
/* The list's tools as the design's one toolbar (PAGE_PATTERNS B): the kinds, 찾기, the reasons and 거르기 flow on one
   line across the page (two when they do not fit), not a 720px stack of two rows with the reasons wrapped under. */
@container (min-width:761px){
  .at-filters>.lx-stack{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px;min-width:0}
  .at-filters>.lx-stack>.lx-row{flex-wrap:wrap;gap:8px}
  .at-filters>.lx-stack>.lx-row:has(.at-find){flex:1 1 100%;flex-wrap:nowrap}
  .at-filters .at-narrow{flex-wrap:wrap;min-width:0}
}
/* The table is a white card (the design's .dtable), its pager at its foot; a reason's action stands at the right of
   the reason and its evidence, so a line is two lines, not three. */
.at-list{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.at-list>table.lx-t :is(th,td):first-child{padding-left:var(--sp-4)}
.at-list>table.lx-t :is(th,td):last-child{padding-right:var(--sp-4)}
.at-list>.lx-pager{margin:0;padding:var(--sp-2) var(--sp-4);border-top:1px solid var(--divider-soft)}
.at-list>table.lx-t tbody tr:last-child td{border-bottom:0}
.at-table td>.lx-cell:has(>.lx-lk){flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.at-table td>.lx-cell:has(>.lx-lk)>.lx-cell{flex:1 1 auto;min-width:0}
.at-table td>.lx-cell>.lx-lk{flex:none;font-size:var(--fs-xs)}
/* 쓰는 사람: three faces overlapping, then the count (B6) */
.at-avs{display:inline-flex;vertical-align:middle;margin-right:8px}
.at-avs .lx-av{width:24px;height:24px;font-size:var(--fs-3xs);box-shadow:0 0 0 2px var(--surface)}
.at-avs .lx-av+.lx-av{margin-left:-6px}
/* 사용 근거: the bases' badges side by side, wrapping in a narrow cell */
.at-bases{display:inline-flex;flex-wrap:wrap;gap:4px}

/* ---------- AI 자산: 상세 패널의 요약 한 문장 (HANDOFF 5.2, B9) ---------- */
.asset-summary{margin:8px 0 0;color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body)}
/* 제품별 보기의 행동 칸: 오른쪽 끝, 줄바꿈 없음 */
.at-table[data-at-table="groups"] .at-group-act{text-align:right;white-space:nowrap}

/* 목록 탭 공통 (HANDOFF 4 세그먼트 · 5.2 목록 탭): 종류 선택은 회색 트랙 안 흰 버튼(.lx-seg와 같은 모양, 마크업 그대로) */
.lx-row[data-asset-categories]{display:inline-flex;flex-wrap:wrap;gap:0;width:fit-content;max-width:100%;padding:2px;border-radius:9px;background:var(--divider)}
.lx-row[data-asset-categories]>.lx-chip{height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--ink-3);box-shadow:none}
.lx-row[data-asset-categories]>.lx-chip:hover{background:transparent;color:var(--ink)}
.lx-row[data-asset-categories]>.lx-chip:is(.lx-on,[aria-pressed="true"]),.lx-row[data-asset-categories]>.lx-chip:is(.lx-on,[aria-pressed="true"]):hover{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-seg)}
/* 사유의 근거(그 사유가 가리키는 이름들)는 모노 */
.at-evidence{font-family:var(--font-mono);font-size:var(--fs-2xs)}

/* 현황의 Gateway 장애 배너 닫기 (HANDOFF 5.1) */
[data-managed-gateway-reach]{position:relative;padding-right:40px}
.ra1-reach-x{position:absolute;top:50%;right:10px;transform:translateY(-50%);display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:6px;background:transparent;color:var(--ink-3);cursor:pointer}
.ra1-reach-x:hover{background:var(--bg-subtle);color:var(--ink)}
.ra1-reach-x svg{width:16px;height:16px;fill:currentColor}
/* 확인할 것 (AI 자산 개요): a fixed two columns gave a lone item half the card, and its name broke onto two lines (HANDOFF 9
   QA, 1280–1440). As many columns of 190px as the card holds -- a lone item has the whole row. */
.ao-page .ao-checks.lx-cols{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
/* G1-14: a cell that opens a list is one press -- a › at its right and a press's hover over the whole cell */
.ao-page .ao-check[data-ao-open]{position:relative;padding-right:var(--sp-8);cursor:pointer}
.ao-page .ao-check[data-ao-open]:hover{background:var(--bg-subtle)}
.ao-check-go{position:absolute;top:50%;right:var(--sp-3);transform:translateY(-50%);color:var(--faint)}
.ao-page .ao-check[data-ao-open]:hover .ao-check-go{color:var(--ink)}

/* ================= 기기 (devices; HANDOFF 08, PAGE_PATTERNS B list) =================
   The OS chips stay the filter row's start; 정밀 검사 (a company setting that lives beside the list) is its own quiet
   strip under them, starting at the left like the rows it governs, not a second toolbar pushed to the right. */
#devices-root .dv-filters>.dv-tools:has(>.dv-deep,>[data-dv-deep-scan-held]){flex:1 1 100%;justify-content:flex-start;margin-left:0;padding:6px var(--sp-3);border-radius:var(--r-ctl);background:var(--bg-subtle)}
#devices-root .dv-deep-row{color:var(--ink-3);font-size:var(--fs-sm)}
#devices-root :is(.dv-deep-stage,.dv-deep-switch){color:var(--ink-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}

/* 자산 목록 머리 (PAGE_PATTERNS B): the headline row, then the band once, then one line of the state pills with the
   population segment at its end -- the population chips stood on a row of their own above the band (HANDOFF 03: one row). */
.at-head{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--sp-3)}
.at-head>*{flex:1 1 100%;min-width:0}
.at-head>.lx-spec{order:1}
.at-head>.at-state-row{order:2;flex:1 1 auto}
.at-head>[data-at-populations]{order:3;flex:0 0 auto;width:auto;margin-left:auto}
/* 내 Task with no Task drawn (the read failed, partly read, or none) is as tall as what it says, not the neighbour's
   height of blank card (HANDOFF 5.1 QA: an empty card standing as tall as Unmanaged 사유). */
.ra1-trio>.ra1-todo:not(:has(.ra1-todo-top)){align-self:start}
/* 사람 · 미관리 영역 목록 (PAGE_PATTERNS B): the rows are the design's table card, white on the page, 16px in. */
.ra1-list-table{border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.ra1-list-table>.lx-tr{padding-inline:var(--sp-4)}
.ra1-list-table>.lx-tr:last-child{border-bottom:0}
/* The list's one-sentence scope is a quiet line over the table, not a second grey box under the toolbar. */
.ra1-list>[data-managed-scope].lx-note{margin:0;padding:0;border:0;background:transparent;color:var(--muted);font-size:var(--fs-sm)}
/* 도구 목록: 사용 범위 (to 찾기) stands at the name cell's right, not as a third line under the name and kind. */
.at-table td:has(>[data-testid="assets-tool-usage"]){position:relative;padding-right:88px}
.at-table td>[data-testid="assets-tool-usage"]{position:absolute;top:50%;right:var(--sp-3);transform:translateY(-50%);font-size:var(--fs-xs)}
/* (G1-24: shown on the row pointed at, focused or open, not repeated down every row at rest; a touch screen keeps it) */
@media (hover:hover){.at-table tr:not(:hover,:focus-within,[aria-selected="true"]) td>[data-testid="assets-tool-usage"]{opacity:0}}