@charset "utf-8";
/* =========================================================================
   Click Design System — UI primitives and product components (Layer 2 · 3).
   docs/design/COMPONENT_GUIDELINES.md says what each part is for, its variants, sizes and states.

   One sheet gives every shared part of the Portal its size, type, colour, line and corner, by click-tokens.css's tokens
   only (no hex here). It is read after redesign-rf1.css (where the parts' structure and behaviour hooks live), after
   every screen's sheet and the frame's (portal-modules.json "styles"), and before click-bridge.css, so a part looks
   the same on every screen: a screen sheet places parts, it does not resize or repaint them.

   - The class names stay the Portal's (.lx-*, portalUi in portal-ui.js); tests and screens name them. Each part here
     is the Click design handoff's part of the same role (COMPONENT_GUIDELINES.md has the table: .lx-btn = .btn,
     .lx-chip = .pill, .lx-bdg = .badge, .lx-tag = .chip, .lx-st = .tag, .lx-spec = .bar, .lx-t = .dtable,
     .lx-click = .suggest, .lx-opt = .option, .lx-kv = .kv, .lx-tl = .timeline, .lx-setrow = .set-row ...).
   - Sizes are the redesign brief's where the handoff differs (DESIGN_SYSTEM.md 결정 기록): button 34 (small 28),
     badge 22, pill 30, row 48, status bar 6, card corner 12, figure 26.
   - The management state is the design's four (HANDOFF 3절): Managed green, Partial light green, Unmanaged red, Needs
     review orange with a dashed dot (a band's part hatched). Its words stay the shared contract's (ui-terms); colour
     and shape are said only where the markup already says which state it is (data-status, data-managed-state, ...).
   ========================================================================= */

/* ---------- 1. 글자 역할 (Typography roles) ---------- */
/* Page headline · section · card title · figure · label · meta: one size and weight each, everywhere. */
.lx-lede{color:var(--ink);font-size:var(--fs-page);font-weight:var(--fw-bold);letter-spacing:var(--ls-head);line-height:var(--lh-snug);text-wrap:pretty}
.lx-lede b{font-weight:var(--fw-bold)}
/* PageHeader in a screen's own markup: the headline (.lx-lede: a sentence or the screen's title) and, under it, its one
   quiet line (.lx-lede-sub: the facts a screen used to chain after the title with " · "). */
.lx-lede>.lx-lede-sub,.lx-lede+.lx-lede-sub,.insights-lede>.lx-lede-sub{display:block;margin:4px 0 0;color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-regular);letter-spacing:0;line-height:var(--lh-body)}
.lx-lede>.lx-lede-sub b{color:var(--ink-2);font-weight:var(--fw-semibold)}
.lx-h2{color:var(--ink);font-size:var(--fs-section);font-weight:var(--fw-semibold);letter-spacing:-.01em;line-height:var(--lh-snug)}
.lx-h3{color:var(--ink);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:var(--lh-snug)}
.lx-fig{font-size:var(--fs-kpi);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1.15}
.lx-fig-xl{font-size:var(--fs-kpi-xl)}
.lx-fig-s{font-size:var(--fs-kpi-sm);font-weight:var(--fw-semibold);letter-spacing:-.02em;line-height:1.2}
.lx-unit{color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.lx-lbl{color:var(--muted);font-size:var(--fs-xs)}
.lx-sub{color:var(--muted);font-size:var(--fs-xs);line-height:var(--lh-body)}
.lx-mono{font-family:var(--font-mono);font-size:var(--fs-mono)}
/* An identifier (agent, device, revision): the whole value is the text, cut only by the line's end (a selection copies
   it whole; one press selects it all), a stop of the keyboard that draws it whole while focused. */
.lx-id{display:inline-block;max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-family:var(--font-mono);font-size:var(--fs-mono);color:var(--muted);user-select:all}
.lx-id:focus-visible{max-width:none;outline:0;box-shadow:var(--focus-ring)}
.lx-na{color:var(--muted)}
.lx-lk{color:var(--ink);font-weight:var(--fw-medium)}
.lx-lk:not(.lx-nm):hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}

/* The first line (portalUi.firstLine, .ds-first-line): one sentence with its figure, the page's headline -- no longer a
   40–48px number standing above the words (GAP-1111 원인 1). */
.ds-first-line{margin:0 0 var(--sp-2);color:var(--ink);font-size:var(--fs-page);font-weight:var(--fw-bold);letter-spacing:var(--ls-head);line-height:var(--lh-snug)}
.ds-first-figure{margin:0 2px;font-size:inherit;font-weight:var(--fw-bold);letter-spacing:inherit;line-height:inherit}
.ds-sub-line{gap:var(--sp-1) var(--sp-5);margin:0 0 var(--sp-4);color:var(--muted);font-size:var(--fs-sm)}
.ds-sub-line b{color:var(--ink);font-weight:var(--fw-semibold)}
.ds-mark{border-color:var(--border-strong);border-radius:var(--r-sm);color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}
@media(max-width:600px){.ds-first-line{font-size:var(--fs-section)}}

/* ---------- 2. 카드 · 안쪽 블록 · 알림 줄 · 빈 상태 (Card, Inset, Alert, EmptyState) ---------- */
.lx-card{padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card)}
.lx-card-h{gap:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
.lx-inset{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-inner);background:var(--bg-subtle)}
.lx-hr{background:var(--divider)}
/* Alert (명세 banner): note is the quiet grey, warn and bad carry their line so they read as one block. */
.lx-note{padding:10px 14px;border:1px solid transparent;border-radius:var(--r-inner);background:var(--divider-soft);color:var(--ink-3);font-size:var(--fs-sm);line-height:var(--lh-body)}
.lx-note-warn{border-color:var(--warn-banner-line);background:var(--warn-banner-bg);color:var(--warn-banner-fg)}
.lx-note-bad{border-color:var(--danger-line);background:var(--st-unmanaged-bg);color:var(--st-unmanaged-fg)}
/* EmptyState: a short line on the quiet inset ground, not a dashed slab that takes the screen (GAP-1111 원인 7; 25
   screens drew one). */
.lx-empty{padding:var(--sp-5) var(--sp-4);border:0;border-radius:var(--r-inner);background:var(--bg-subtle);color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-body)}
.lx-empty b{margin-bottom:2px;color:var(--ink);font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.lx-empty .lx-btn{margin-top:var(--sp-3)}
/* The screen frame's states (portalUi.frame: loading, empty, error, forbidden) and the skeleton. */
/* The shared state frame (loading, empty, error, forbidden) is the handoff's .empty: no dashed line, a white ground that
   disappears inside a card, its first line 15/600 over the muted text. */
.ui-frame{border:0;border-radius:var(--r-card);background:var(--surface);color:var(--muted);font-size:var(--fs-sm)}
.ui-frame>b{color:var(--ink);font-size:var(--fs-section);font-weight:var(--fw-semibold)}
.ui-frame[data-state="error"]>b{color:var(--st-unmanaged-fg)}
/* locked: a part the role does not read -- one quiet line where the part would stand, the ? beside it (G5-48). */
.ui-frame[data-state="locked"]{display:flex;align-items:center;justify-content:flex-start;gap:var(--sp-2);padding:var(--sp-3) 0;background:transparent;color:var(--muted)}

/* ---------- 3. 버튼 (Button, IconButton) ---------- */
/* Primary (-p) ink, default white with the control line, ghost (-g) no line, danger (-d) red words, link (-l) Click's
   ink. Sizes: 34 (default) · 28 (-s). Weight 600 on 13.5px: a button reads as one, not as a heading. */
.lx-btn{gap:6px;height:var(--ctl-h);padding:0 12px;border-radius:var(--r-ctl);font-size:var(--fs-sm);font-weight:var(--fw-semibold);transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.lx-btn:not(.lx-btn-p,.lx-btn-g,.lx-btn-d,.lx-btn-l){border-color:var(--border-strong);background:var(--surface);color:var(--ink-2)}
.lx-btn:not(.lx-btn-p,.lx-btn-g,.lx-btn-d,.lx-btn-l):hover{border-color:var(--border-strong);background:var(--bg-subtle);color:var(--ink)}
.lx-btn-p,.lx-btn-p:hover{border-color:var(--primary);background:var(--primary);color:var(--surface)}
.lx-btn-p:hover{border-color:var(--primary-hover);background:var(--primary-hover)}
.lx-btn-g,.lx-btn-g:hover{border-color:transparent;color:var(--ink-3)}
.lx-btn-g:hover{background:var(--divider-soft);color:var(--ink)}
.lx-btn-d,.lx-btn-d:hover{border-color:var(--danger-line);color:var(--danger-ink)}
.lx-btn-d:hover{background:var(--st-unmanaged-bg)}
.lx-btn-l,.lx-btn-l:hover{border-color:var(--primary);background:var(--primary);color:var(--surface)}
.lx-btn-l:hover{border-color:var(--primary-hover);background:var(--primary-hover)}
.lx-btn-s{height:var(--ctl-h-sm);padding:0 10px;font-size:var(--fs-xs)}
.lx-btn-p:is([disabled],[aria-disabled="true"]),.lx-btn-l:is([disabled],[aria-disabled="true"]),.lx-btn-d:is([disabled],[aria-disabled="true"]),.lx-btn-g:is([disabled],[aria-disabled="true"]){border-color:var(--border);background:var(--bg-subtle);color:var(--faint);cursor:not-allowed}
.lx-btn-g:is([disabled],[aria-disabled="true"]){border-color:transparent;background:transparent}
.lx-btn[aria-busy="true"]{cursor:progress}
.lx-ibtn{width:var(--icon-btn);height:var(--icon-btn);border-radius:var(--r-ctl);color:var(--ink-3)}
.lx-ibtn:hover{background:var(--divider-soft);color:var(--ink)}
.lx-ibtn:is(.lx-line,.lx-ibtn-line),.lx-ibtn:is(.lx-line,.lx-ibtn-line):hover{border-color:var(--border-strong)}

/* ---------- 4. 입력 (Input, Textarea, Select, Search, Checkbox, Radio, Switch) ---------- */
.lx-in{height:var(--ctl-h);padding:0 10px;border-color:var(--border-strong);border-radius:var(--r-ctl);color:var(--ink);font-size:var(--fs-sm);font-weight:var(--fw-regular)}
textarea.lx-in{height:auto;min-height:88px;padding:8px 10px;line-height:var(--lh-body)}
.lx-in:hover{border-color:var(--faint)}
.lx-in:focus{border-color:var(--ink);outline:0;box-shadow:0 0 0 3px var(--divider)}
.lx-in::placeholder{color:var(--faint)}
.lx-in:disabled{background-color:var(--bg-subtle);color:var(--faint)}
.lx-in:is([aria-invalid="true"],.lx-bad){border-color:var(--st-unmanaged)}
.lx-sel{height:var(--ctl-h);padding:0 10px;border-color:var(--border-strong);border-radius:var(--r-ctl);color:var(--ink-2);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.lx-sel:hover{background:var(--bg-subtle)}
.lx-sel .lx-i{color:var(--faint)}
.lx-find{height:var(--ctl-h);padding:0 10px;border-color:var(--border-strong);border-radius:var(--r-ctl);color:var(--muted)}
.lx-find input{color:var(--ink);font-size:var(--fs-sm)}
.lx-find:focus-within{border-color:var(--ink);outline:0;box-shadow:0 0 0 3px var(--divider)}
.lx-find-lg{height:var(--ctl-h-lg);padding:0 14px;border-radius:var(--r-inner);font-size:var(--fs-body)}
.lx-find-lg input{font-size:var(--fs-body)}
.lx-field{gap:6px}
.lx-field>label,.lx-flabel{color:var(--ink-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.lx-ck{gap:8px;font-size:var(--fs-sm)}
.lx-ck input,.lx-choice input{accent-color:var(--ink)}
.lx-sw{width:34px;height:20px;background:var(--border-strong);transition:background-color var(--dur-fast) var(--ease)}
.lx-sw:hover{background:var(--faint)}
.lx-sw::after{box-shadow:var(--shadow-seg);transition:left var(--dur-fast) var(--ease)}
.lx-sw:is(.lx-on,[aria-checked="true"]),.lx-sw:is(.lx-on,[aria-checked="true"]):hover{background:var(--primary)}
.lx-sw:is([disabled],[aria-disabled="true"]){opacity:.45;cursor:not-allowed}
.lx-choice{padding:10px 12px;border-color:var(--border);border-radius:var(--r-inner)}
.lx-choice:hover{border-color:var(--border-strong)}
.lx-choice:is(.lx-on,:has(input:checked)){border-color:var(--ink);background:var(--select-bg);box-shadow:none}

/* ---------- 5. 세그먼트 · 필터 알약 (Tabs in a page, SegmentedControl, FilterPill) ---------- */
.lx-seg{padding:3px;border-radius:9px;background:var(--divider)}
.lx-seg>:is(button,a){height:28px;padding:0 12px;border-radius:7px;color:var(--ink-3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.lx-seg>:is(button,a):hover{color:var(--ink)}
/* A tablist a screen drew with buttons (role=tab, one of them primary) reads as the segment: one black start point per
   page is its primary action, never a tab (GAP-1111 원인 3). */
.lx-row[role="tablist"]:has(>.lx-btn[role="tab"]){display:inline-flex;flex-wrap:wrap;gap:2px;width:fit-content;max-width:100%;padding:3px;border-radius:9px;background:var(--divider)}
[role="tablist"]>.lx-btn[role="tab"]{height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;box-shadow:none;color:var(--ink-3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
[role="tablist"]>.lx-btn[role="tab"]:hover{border:0;background:transparent;color:var(--ink)}
[role="tablist"]>.lx-btn[role="tab"][aria-selected="true"],[role="tablist"]>.lx-btn[role="tab"][aria-selected="true"]:hover{background:var(--surface);box-shadow:var(--shadow-seg);color:var(--ink)}
.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(--surface);color:var(--ink);font-weight:var(--fw-semibold);box-shadow:var(--shadow-seg)}
.lx-seg .lx-n{color:var(--muted);font-weight:var(--fw-medium)}
/* A status filter pill: one row of them over a list; the chosen one ink with white words. */
.lx-chip{gap:7px;height:var(--pill-h);padding:0 12px;border-color:var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.lx-chip:hover{border-color:var(--border-strong);color:var(--ink)}
.lx-chip b{color:var(--ink);font-weight:var(--fw-semibold)}
.lx-chip .lx-n{color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.lx-chip:is(.lx-on,[aria-pressed="true"]),.lx-chip:is(.lx-on,[aria-pressed="true"]):hover{border-color:var(--brand-ink);background:var(--brand-ink);color:var(--surface);font-weight:var(--fw-semibold)}
.lx-chip:is(.lx-on,[aria-pressed="true"]) b:not(.lx-n){color:var(--surface)}
.lx-chip:is(.lx-on,[aria-pressed="true"]) .lx-n{color:var(--border-strong)}
/* A chosen chip is ink: the state word and the '–' in it take its light words (they kept their own ink and grey: 1:1, 3.7:1). */
.lx-chip:is(.lx-on,[aria-pressed="true"]) :is(.lx-st,.lx-na,.lx-muted,.quiet-unknown){color:inherit}
.lx-chip-add{border-style:dashed;color:var(--muted)}
/* Several chips of one row pressed at once (a multi-select filter, e.g. 감사 로그's kinds) draw the quiet chosen look --
   ink line, selection ground, ink text -- not a row of ink fills; one pressed chip keeps the design's ink. */
.lx-row:has(>.lx-chip:is(.lx-on,[aria-pressed="true"])~.lx-chip:is(.lx-on,[aria-pressed="true"]))>.lx-chip:is(.lx-on,[aria-pressed="true"]),.lx-row:has(>.lx-chip:is(.lx-on,[aria-pressed="true"])~.lx-chip:is(.lx-on,[aria-pressed="true"]))>.lx-chip:is(.lx-on,[aria-pressed="true"]):hover{border-color:var(--ink);background:var(--select-bg);color:var(--ink)}
.lx-row:has(>.lx-chip:is(.lx-on,[aria-pressed="true"])~.lx-chip:is(.lx-on,[aria-pressed="true"]))>.lx-chip:is(.lx-on,[aria-pressed="true"]) .lx-n{color:var(--muted)}
/* A row of chips that chooses one scope (not a filter that adds up) is a segment: .lx-seg around .lx-chip buttons draws as
   the segment's items, the chosen one white on the track, never ink (one ink start per screen: the primary button). */
.lx-seg>.lx-chip,.lx-seg>.lx-chip:hover{height:28px;padding:0 12px;border:0;border-radius:7px;background:transparent;box-shadow:none;color:var(--ink-3)}
.lx-seg>.lx-chip:hover{color:var(--ink)}
.lx-seg>.lx-chip:is(.lx-on,[aria-pressed="true"]),.lx-seg>.lx-chip:is(.lx-on,[aria-pressed="true"]):hover{border:0;background:var(--surface);box-shadow:var(--shadow-seg);color:var(--ink)}
.lx-seg>.lx-chip:is(.lx-on,[aria-pressed="true"]) b:not(.lx-n){color:var(--ink)}
.lx-seg>.lx-chip:is(.lx-on,[aria-pressed="true"]) .lx-n{color:var(--muted)}
/* A state badge inside a filter pill is the pill's dot and word (the design's .pill .dot), not a tinted badge in a pill. */
.lx-chip>.lx-bdg{gap:6px;height:auto;margin:0;padding:0;border:0;background:transparent;color:inherit;font-size:inherit;font-weight:inherit}
.lx-chip>.lx-bdg::before{content:"";box-sizing:border-box;width:7px;height:7px;flex:none;border-radius:50%;background:var(--faint)}
.lx-chip>.lx-bdg.lx-bdg-bad::before{background:var(--st-unmanaged)}
.lx-chip>.lx-bdg.lx-bdg-warn::before{border:1.5px dashed var(--st-review);background:transparent}
.lx-chip>.lx-bdg.lx-bdg-ok::before{background:var(--st-managed)}
.lx-chip>.lx-bdg.lx-bdg-info::before{background:var(--st-partial)}

/* ---------- 6. 상태 (StatusBadge, StatusTag, RiskIndicator, Tag) ---------- */
/* .lx-st: a dot and its word -- a state in a row. .lx-bdg: the filled badge -- a state a head stresses, or a basis
   (Registered, Verified) beside a value. .lx-tag: a quiet chip for a kind, a count or a label. */
.lx-st{gap:7px;color:var(--ink-2);font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.4}
.lx-st::before{width:var(--dot);height:var(--dot)}
.lx-st-off{color:var(--muted)}
.lx-bdg,.lx-bdg.lx-bdg-st{gap:6px;height:var(--badge-h);padding:0 9px;border-radius:var(--r-pill);font-size:var(--fs-2xs);font-weight:var(--fw-semibold);line-height:var(--badge-h)}
.lx-tag{gap:5px;height:var(--chip-h);padding:0 8px;border-radius:var(--r-sm);background:var(--divider-soft);color:var(--ink-3);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}
.lx-sev{gap:2px;color:var(--ink-2);font-size:var(--fs-sm)}
.lx-dot{width:var(--dot);height:var(--dot)}
.lx-dot.lx-s-off{background:var(--border-strong)}

/* The management state: 일부 관리 and 검토 필요 (HANDOFF 3절). */
.lx-bdg:is([data-status="partial"],[data-managed-state="partial"]){--lx-dot:var(--st-partial);background:var(--st-partial-bg);color:var(--st-partial-fg)}
.lx-bdg-st[data-status="partial"]::before{background:var(--st-partial)}
:is(.lx-st[data-managed-state="partial"],[data-managed-state="partial"]>.lx-st,[data-status="partial"]>.lx-st)::before{background:var(--st-partial)}
.lx-spec>i:is([data-managed-bar="partial"],[data-spec="partial"],[data-at-band-part="partial"]){background:var(--st-partial)}
.lx-bdg:is([data-status="needs_review"],[data-managed-state="unknown"]){border:0;background:var(--st-review-bg);color:var(--st-review-fg)}
.lx-bdg-st:is([data-status="needs_review"],[data-managed-state="unknown"])::before{content:"";box-sizing:border-box;width:7px;height:7px;flex:none;border:1.5px dashed var(--st-review);border-radius:50%;background:transparent}
.lx-st[data-ui-status="unjudged"]::before{border:1.5px dashed var(--st-review);background:transparent}
.lx-s-unk,.lx-spec>i:is([data-spec="unknown"],[data-managed-bar="unknown"],[data-at-band-part="unknown"]){background:var(--hatch-review)}
/* 사람 · 기기 · 에이전트 목록(managed-unmanaged.js)의 상태 칩과 막대: 칩·조각이 data-managed-filter-state로 상태를 말한다 */
.lx-chip[data-managed-filter-state="partial"] .lx-st::before,.lx-spec>i[data-managed-filter-state="partial"]{background:var(--st-partial)}
.lx-chip[data-managed-filter-state="unknown"] .lx-st::before{border:1.5px dashed var(--st-review);background:transparent}
.lx-spec>i[data-managed-filter-state="unknown"]{background:var(--hatch-review)}
/* AI 자산 개요의 관리 상태 칸(inventory-overview.js): 점이 data-ao-state-cell로 상태를 말한다 */
[data-ao-state-cell="partial"]>.lx-dot{background:var(--st-partial)}
[data-ao-state-cell="unknown"]>.lx-dot{box-sizing:border-box;border:1.5px dashed var(--st-review);background:transparent}
/* 검토 필요 is one of the four management states: its badge keeps the review ground, not the lighter amber a known caution
   takes (click-bridge.css --ds-caution-soft). */
.lx-bdg-st[data-status="needs_review"]{background:var(--st-review-bg)}

/* ---------- 7. 상태 막대 · 진행 (StatusProgress, Progress) ---------- */
/* 6px (brief §3.3: 4–6), 4px in a row. A summary bar says the share; the words beside it say what to do. */
.lx-spec{gap:2px;height:var(--bar-h);border-radius:var(--r-pill);background:var(--divider-soft)}
.lx-spec-lg{height:var(--bar-h);border-radius:var(--r-pill)}
.lx-spec-sm{height:var(--bar-h-sm);border-radius:var(--r-pill)}
.lx-spec-legend{gap:4px 16px;margin-top:10px;color:var(--ink-3);font-size:var(--fs-xs)}
.lx-spec-legend b{color:var(--ink);font-weight:var(--fw-semibold)}
.lx-spec-legend b[data-zero]{color:var(--muted);font-weight:var(--fw-regular)}
/* 배포 중 막대 조각 (HANDOFF 3절 빗금: 배포 중은 초록 빗금) */
.lx-spec>i.lx-s-pending,.lx-bar>i.lx-s-pending{background:var(--hatch-pending)}
/* A meter with no state (a count's share: 요청 결과, 종류별) is slate, not ink: ink is the one main press's colour. */
.lx-bar>i:not([class*="lx-s-"]){background:var(--ink-3)}

/* ---------- 8. 표 (DataTable: .lx-t as rows, table.lx-t) ---------- */
/* Row 48 (comfortable 56 · compact 40 by [data-density]), the head 12px muted on its line, a cell 13.5px. The row line
   is the soft divider; hover the warm grey; chosen the neutral selection ground -- never the yellow. */
.lx-tr{column-gap:var(--sp-4);min-height:var(--row-min-h);padding:var(--row-pad) var(--sp-2);border-bottom:1px solid var(--divider-soft);color:var(--ink);font-size:var(--fs-sm);font-weight:var(--fw-regular)}
.lx-tr.lx-th{min-height:0;padding:9px var(--sp-2);border-bottom-color:var(--divider);color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}
.lx-tr.lx-hl:hover,.lx-tr:not(.lx-th):not(.lx-is-sel):not([aria-selected="true"]):hover{background:var(--bg-hover)}
.lx-tr:is(.lx-is-sel,[aria-selected="true"]),.lx-tr:is(.lx-is-sel,[aria-selected="true"]):hover{background:var(--select-bg);box-shadow:inset 0 0 0 1px var(--divider)}
table.lx-t{font-size:var(--fs-sm)}
table.lx-t :is(th,td){padding:var(--row-pad) var(--sp-2);border-bottom-color:var(--divider-soft);color:var(--ink);font-size:var(--fs-sm)}
table.lx-t td{height:var(--row-min-h)}
table.lx-t th{padding:9px var(--sp-2);border-bottom:1px solid var(--divider);color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}
table.lx-t tbody tr:not(.lx-is-sel):not([aria-selected="true"]):hover td,table.lx-t tr.lx-hl:hover td{background:var(--bg-hover)}
table.lx-t tr:is(.lx-is-sel,[aria-selected="true"]) td{background:var(--select-bg)}
/* 표의 마지막 줄은 밑줄이 없다(redesign-rf1.css: tbody tr:last-child td): 줄 머리(th scope=row)도 같이. */
table.lx-t tbody tr:last-child>th{border-bottom:0}
/* A table that stands on the page itself (not in a card, a panel, an inset or a dialog) is the design's .dtable: a white
   card of its own, its first and last cells 16px in, no line under its last row. */
table.lx-t:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"]) *){border:1px solid var(--border);border-collapse:separate;border-spacing:0;border-radius:var(--r-card);background:var(--surface);overflow:hidden}
table.lx-t:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"]) *) :is(th,td):first-child{padding-left:var(--sp-4)}
table.lx-t:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"]) *) :is(th,td):last-child{padding-right:var(--sp-4)}
table.lx-t:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"]) *) tbody tr:last-child>:is(td,th){border-bottom:0}
div.lx-t[role="table"]:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"],table.lx-t) *){border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
div.lx-t[role="table"]:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"],table.lx-t) *)>.lx-tr,div.lx-t[role="table"]:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"],table.lx-t) *)>[role="rowgroup"]>.lx-tr{padding-inline:var(--sp-4)}
div.lx-t[role="table"]:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"],table.lx-t) *)>.lx-tr:last-child,div.lx-t[role="table"]:not(:is(.lx-card,.lx-aside,.lx-inset,.at-list,dialog,.lx-more-menu,.lx-click,.lx-opt,.ui-frame,[class*="-card"],[class*="card-"],table.lx-t) *)>[role="rowgroup"]:last-child>.lx-tr:last-child{border-bottom:0}
/* A cell's two lines: the name in ink, its meta one size down in the muted grey. */
.lx-cell{gap:2px}
.lx-cell>.lx-sub{font-size:var(--fs-xs)}
.lx-grp{gap:8px;padding:var(--sp-4) var(--sp-2) 6px;color:var(--ink-3);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.lx-grp .lx-n{color:var(--muted);font-weight:var(--fw-medium)}
.lx-pager{gap:8px;padding-top:var(--sp-3);color:var(--muted);font-size:var(--fs-xs)}

/* ---------- 9. 일괄 작업 바 · 저장 바 (Selection bar, Save bar) ---------- */
/* portalUi.selbar and portalUi.draftBar are ink bars, their main action yellow; a bar that says the list moved under it
   keeps its caution tone. A bar a screen writes itself keeps its light tone until that screen is redrawn. */
.lx-selbar[data-selbar],.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved){border:1px solid var(--brand-ink);border-radius:var(--r-inner);background:var(--brand-ink);color:var(--surface);box-shadow:var(--shadow-float)}
.lx-selbar[data-selbar]>.lx-btn,.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved)>.lx-btn:not(.lx-btn-p){border-color:transparent;background:transparent;color:var(--surface)}
.lx-selbar[data-selbar]>.lx-btn:hover,.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved)>.lx-btn:not(.lx-btn-p):hover{border-color:transparent;background:color-mix(in srgb,var(--surface) 10%,transparent);color:var(--surface)}
.lx-selbar[data-selbar]>.lx-btn-g{color:var(--faint)}
.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved)>.lx-btn-p,.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved)>.lx-btn-p:hover{border-color:var(--brand-yellow);background:var(--brand-yellow);color:var(--brand-ink)}
.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved)>.lx-btn.lx-btn-d:not(.lx-btn-p){color:var(--st-unmanaged-bg)}
.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved)>.lx-btn:is([disabled],[aria-disabled="true"]),.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved)>.lx-btn:is([disabled],[aria-disabled="true"]):hover{border-color:transparent;background:transparent;color:var(--muted)}
.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved) .lx-sub{color:var(--border-strong)}
.lx-draftbar[data-draftbar]:not(.lx-draftbar-moved) .help-trigger{color:inherit}
.lx-selbar:not([data-selbar]){border-radius:var(--r-inner);background:var(--select-bg);color:var(--ink)}
.lx-draftbar:not([data-draftbar]){border-color:var(--ink);border-radius:var(--r-inner)}

/* ---------- 10. Click 제안 · 선택지 (RecommendationPanel, ApprovalPanel option) ---------- */
.lx-click{padding:14px 16px;border:1px solid var(--primary-line);border-radius:var(--r-inner);background:var(--primary-wash)}
.lx-click-h,.lx-click .lx-click-h{gap:6px;color:var(--ink);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:var(--lh-body);letter-spacing:0}
.lx-who-l{background:var(--primary-tint);color:var(--primary-ink)}
.lx-opt{gap:12px;padding:14px 16px;border:1.5px solid var(--border);border-radius:var(--r-inner);background:var(--surface);color:var(--ink);font-size:var(--fs-sm);font-weight:var(--fw-regular)}
.lx-opt:hover{border-color:var(--border-strong);background:var(--surface)}
.lx-opt b{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.lx-opt:is(.lx-on,[aria-checked="true"],[aria-pressed="true"]){border-color:var(--ink);background:var(--select-bg);box-shadow:none}
.lx-opt-n{width:24px;height:24px;background:var(--divider-soft);color:var(--ink-3);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
.lx-opt:is(.lx-on,[aria-checked="true"],[aria-pressed="true"]) .lx-opt-n{background:var(--ink);color:var(--surface)}
.lx-opt-tag{color:var(--muted);font-size:var(--fs-xs)}

/* ---------- 11. 상세 패널 · 키-값 · 타임라인 · 목록 (DetailPanel, KeyValueGrid, ActivityTimeline, EntityList) ---------- */
.lx-aside{gap:var(--sp-4);padding:var(--sp-5) var(--sp-6) var(--sp-8);border-left:1px solid var(--border);background:var(--surface)}
.lx-aside-t{color:var(--ink);font-size:var(--fs-drawer-title);font-weight:var(--fw-bold);letter-spacing:var(--ls-head);line-height:1.3}
.lx-aside-x{width:var(--icon-btn);height:var(--icon-btn);border-radius:var(--r-ctl);color:var(--ink-3)}
.lx-aside-x:hover{background:var(--divider-soft);color:var(--ink)}
.lx-aside-b{gap:var(--sp-4)}
.lx-aside-in>.lx-aside-h{background:var(--surface)}
.lx-sect{gap:var(--sp-2)}
.lx-sect-h{gap:8px;color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
.lx-kv{grid-template-columns:112px minmax(0,1fr);gap:10px var(--sp-4);font-size:var(--fs-sm)}
.lx-kv dt{color:var(--muted);font-size:var(--fs-sm)}
.lx-kv dd{color:var(--ink)}
.lx-li{gap:10px;min-height:40px;padding:8px 0;border-bottom:1px solid var(--divider-soft);font-size:var(--fs-sm)}
.lx-tl-i::before{background:var(--divider)}
.lx-tl-d{background:var(--border-strong)}
.lx-tl-d.lx-l{background:var(--brand-yellow);box-shadow:0 0 0 1px var(--primary-line)}
.lx-tl-d.lx-p{background:var(--ink)}
.lx-tl-d.lx-ok{background:var(--st-managed)}
.lx-mlist{gap:2px;border-right:1px solid var(--border)}
.lx-mi{padding:10px 12px;border-radius:var(--r-inner)}
.lx-mi:hover{background:var(--bg-hover)}
.lx-mi:is(.lx-on,[aria-current],[aria-selected="true"]),.lx-mi:is(.lx-on,[aria-current],[aria-selected="true"]):hover{background:var(--select-bg);box-shadow:inset 0 0 0 1.5px var(--ink)}
.lx-mi-n{font-size:var(--fs-section);font-weight:var(--fw-semibold)}
.lx-steps{gap:4px}
.lx-step{padding:12px 14px;border-radius:var(--r-ctl);background:var(--bg-subtle)}
.lx-step.lx-hot{background:var(--st-caution-bg)}
.lx-stat{padding:10px 12px;border-radius:var(--r-inner)}
.lx-sig{gap:12px;padding:12px 2px;border-bottom:1px solid var(--divider-soft)}
.lx-av{background:var(--primary-tint);color:var(--primary-ink);font-size:var(--fs-3xs);font-weight:var(--fw-bold)}

/* ---------- 12. 설정 줄 (Settings row: portalUi.setRow) ---------- */
.lx-setrow{gap:8px 24px;padding:15px 0;border-bottom-color:var(--divider-soft)}
/* A setting line written as <article> is not the old page's article card (style.css: a 235px floor, a box). */
article.lx-setrow{display:grid;min-height:0;border-width:0 0 1px;border-style:solid;border-radius:0;background:transparent;box-shadow:none}
.lx-setrow>div:first-child>b{color:var(--ink);font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.lx-setrow>div:first-child>.lx-sub{display:block;margin-top:3px;color:var(--muted);font-size:var(--fs-xs)}
.lx-setrow-c{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;min-width:0}

/* ---------- 13. 메뉴 · 토스트 · 도움말 (Popover menu, Toast, Tooltip trigger) ---------- */
.lx-more-menu{padding:6px;border:1px solid var(--border);border-radius:var(--r-inner);background:var(--surface);box-shadow:var(--shadow-pop)}
.lx-more-item{min-height:34px;padding:0 10px;border-radius:var(--r-ctl);color:var(--ink-2);font-size:var(--fs-sm);font-weight:var(--fw-regular)}
.lx-more-item:is(:hover,:focus-visible){background:var(--bg-hover);color:var(--ink)}
.lx-more-item.lx-btn-d,.lx-more-item.lx-btn-d:is(:hover,:focus-visible){color:var(--danger-ink)}
.lx-toast{padding:12px 16px;border-radius:var(--r-inner);background:var(--ink);color:var(--surface);font-size:var(--fs-sm);font-weight:var(--fw-medium);box-shadow:var(--shadow-float)}
.help-trigger{border-color:var(--border-strong);background:var(--surface);color:var(--muted)}
.help-trigger:hover,.help-trigger:focus-visible{border-color:var(--ink);background:var(--surface);color:var(--ink)}
.detail-fold>summary{color:var(--ink-2);font-size:var(--fs-xs)}
.detail-fold-body{color:var(--ink-3);font-size:var(--fs-xs)}

/* ---------- 14. 숫자 타일 (MetricCard: portalUi.figures .ov-metric) ---------- */
.ov-grid{gap:var(--sp-3)}
.ov-metric,.ov-metric.is-static{gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);color:var(--ink)}
.ov-metric:hover{border-color:var(--border-strong);background:var(--surface)}
.ov-metric.is-static:hover{border-color:var(--border)}
.ov-metric span{color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-medium)}
.ov-metric strong{color:var(--ink);font-size:var(--fs-kpi);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1.15}
.ov-metric small{color:var(--muted);font-size:var(--fs-2xs)}
.ov-metric[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* A tile's state is its figure's colour and a quiet ground, not a 1.5px red or dashed frame (GAP-1111 원인 2). */
.ov-metric:is([data-state="unmanaged"],.red){border:1px solid var(--border);background:var(--surface)}
.ov-metric:is([data-state="unmanaged"],.red) strong{color:var(--danger-ink)}
.ov-metric:is([data-state="unknown"],.amber){border:1px dashed var(--st-review);background:var(--surface)}
.ov-metric:is([data-state="unknown"],.amber) strong{color:var(--st-review-fg)}
.ov-metric[data-state="controlled"] strong{color:var(--st-managed-fg)}
.ov-metric[data-state="caution"] strong{color:var(--st-review-fg)}
/* 카드 안 숫자 띠 (figures(…, {band: true})): 카드 한 장의 아래 띠. 칸 사이 세로 선, 칸마다 테두리·반경 없음, 고른 칸은 선택 바탕. */
.ov-grid.is-band{gap:0;border-top:1px solid var(--border)}
.ov-grid.is-band>.ov-metric{border:0;border-left:1px solid var(--border);border-radius:0;background:transparent}
.ov-grid.is-band>.ov-metric:first-child{border-left:0}
.ov-grid.is-band>.ov-metric:hover{background:var(--bg-hover)}
.ov-grid.is-band>.ov-metric[aria-pressed="true"]{background:var(--surface-selected);box-shadow:none}

/* ---------- 15. 포커스 (Focus: one ring for every control, HANDOFF 8절) ---------- */
:is(.lx-btn,.lx-ibtn,.lx-chip,.lx-seg>button,.lx-seg>a,.lx-opt,.lx-mi,.lx-lk,.lx-sw,.lx-more-item,.ov-metric,.lx-tr.lx-hl,.cx-pill,.cx-chip,.cx-icon-btn,.cx-send):focus-visible{outline:2px solid var(--select-ring);outline-offset:2px}

/* Agent Universe's stage stays dark: its words were the old dark side bar's (--ds-nav-*, universe-style.js --uv-ink), which
   the Click bridge turned to the light side bar's ink -- dark words on the dark stage (browser_hover_contrast). The stage
   keeps the dark ones. */
:root .uv,:root .uv-present{--ds-nav-text:var(--stage-text);--ds-nav-dim:var(--stage-dim);--ds-nav-hover:var(--stage-hover)}

/* ---------- 16. Inner menu: settings, Gateway (HANDOFF 설정 목차; .lx-snav) ----------
   A group's name is the small grey label (no line over it); a screen a 30px line; the open one the current menu's pale
   yellow, as the sidebar says its own (no bar at its left). Counts are quiet. */
.lx-snav{flex:0 0 var(--subnav-w);gap:0;padding:var(--sp-4) var(--sp-3) var(--sp-6);border-right:1px solid var(--border)}
.lx-snav-g,button.lx-snav-g[data-snav-group-fold]{margin:var(--sp-4) 0 var(--sp-1);padding:4px 10px;border-top:0;color:var(--muted);font-size:var(--fs-3xs);font-weight:var(--fw-semibold);letter-spacing:0;line-height:1.3}
.lx-snav-g:first-child,.lx-snav-list>.lx-snav-g:first-child{margin-top:var(--sp-1);padding-top:4px}
button.lx-snav-g[data-snav-group-fold]{border-radius:var(--r-sm);color:var(--ink-3);font-size:var(--fs-xs)}
button.lx-snav-g[data-snav-group-fold]::after{color:var(--faint);font-size:var(--fs-sm)}
:is(button,a).lx-snav-i{min-height:30px;padding:5px 10px;border-radius:var(--r-ctl);color:var(--ink-2);font-size:var(--fs-sm);font-weight:var(--fw-regular)}
.lx-snav-g~:is(button,a).lx-snav-i{padding-left:10px}
:is(button,a).lx-snav-i:hover{background:var(--bg-hover);color:var(--ink)}
:is(button,a).lx-snav-i.active{border-radius:var(--r-ctl);background:var(--primary-tint);box-shadow:none;color:var(--primary-ink);font-weight:var(--fw-semibold)}
.lx-snav-i .lx-n{color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium)}

/* ---------- 17. Bar list (insights: 일별 · 종류별 막대) ----------
   A name, a 6px bar on its pale track, the figure; the bar is ink, never a 10-14px slab. */
.insights-bar-track svg,.ic-part .insights-bar-track svg{display:block;height:var(--bar-h);border-radius:var(--r-pill);background:var(--bg-subtle);overflow:hidden}
.insights-bar-track rect{fill:var(--ink-2)}
.insights-bar{color:var(--ink-2);font-size:var(--fs-xs)}
.insights-bar-value{color:var(--ink);font-weight:var(--fw-semibold)}

/* ---------- 18. Native controls a screen left unclassed ----------
   A select, a text or date field or a fold a screen drew without the parts takes the parts' size: 34px, 13.5px, the
   control line and 8px corners (style.css's 10px padding made a select 40px+). Zero-specificity selectors: any part
   or screen rule with a class still wins. A fold's own triangle is the quiet grey mark, not the browser's black one. */
select:where(:not(.lx-in,.lx-sel,[multiple],[size])){height:var(--ctl-h);padding-top:0;padding-bottom:0;padding-left:10px;border-color:var(--border-strong);border-radius:var(--r-ctl);font-size:var(--fs-sm);line-height:1.2}
/* Every single-choice select draws the one chevron (a shorthand background on .lx-sel, and RM1's appearance:auto, had put
   the system arrow back on some). */
select:is(.lx-sel,.lx-in,.rm1-select):not([multiple],[size]){appearance:none;-webkit-appearance:none;padding-right:30px;background-image:var(--ds-chevron);background-repeat:no-repeat;background-position:right 10px center;background-size:12px}
input:where([type="text"],[type="date"],[type="time"],[type="datetime-local"],[type="month"],[type="number"],[type="email"],[type="url"],[type="search"],[type="password"],:not([type])):where(:not(.lx-in)){height:var(--ctl-h);padding:0 10px;border-color:var(--border-strong);border-radius:var(--r-ctl);font-size:var(--fs-sm)}
input:where([type="date"],[type="time"],[type="datetime-local"],[type="month"])::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
input[type="file"]::file-selector-button{height:var(--ctl-h-sm);border-color:var(--border-strong);border-radius:var(--r-ctl);color:var(--ink-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold)}
summary:where(*){cursor:pointer}
summary::marker{color:var(--faint);font-size:.75em}
/* Disclosure (details/summary): one chevron, turned right when closed and down when open, in place of the system triangle
   (감사 2차: native ▶ on ~16 screens). Only the folds that kept the system marker; a fold that draws its own (a menu, a
   popover, an icon button) is not in the list. */
:where(details.lx-fold>summary,details.lx-inset>summary,details.lx-card>summary,details:not([class],[data-inv-facet-group])>summary,.ra6-raw>summary,.ra11-fold>summary,.gp-fold>summary,.gwo-more>summary,.rm9-fold>summary,.ra8-fold>summary,.ra10-info-more>summary,.ra1-state-detail>summary,.inv-notes>summary,.msv-more>summary,details.lx-sub>summary){list-style:none;cursor:pointer}
:where(details.lx-fold>summary,details.lx-inset>summary,details.lx-card>summary,details:not([class],[data-inv-facet-group])>summary,.ra6-raw>summary,.ra11-fold>summary,.gp-fold>summary,.gwo-more>summary,.rm9-fold>summary,.ra8-fold>summary,.ra10-info-more>summary,.ra1-state-detail>summary,.inv-notes>summary,.msv-more>summary,details.lx-sub>summary)::-webkit-details-marker{display:none}
:where(details.lx-fold>summary,details.lx-inset>summary,details.lx-card>summary,details:not([class],[data-inv-facet-group])>summary,.ra6-raw>summary,.ra11-fold>summary,.gp-fold>summary,.gwo-more>summary,.rm9-fold>summary,.ra8-fold>summary,.ra10-info-more>summary,.ra1-state-detail>summary,.inv-notes>summary,.msv-more>summary,details.lx-sub>summary)::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:var(--ds-chevron) center/12px 12px no-repeat;transform:rotate(-90deg);transition:transform .12s}
:where(details.lx-fold[open]>summary,details.lx-inset[open]>summary,details.lx-card[open]>summary,details[open]:not([class],[data-inv-facet-group])>summary,.ra6-raw[open]>summary,.ra11-fold[open]>summary,.gp-fold[open]>summary,.gwo-more[open]>summary,.rm9-fold[open]>summary,.ra8-fold[open]>summary,.ra10-info-more[open]>summary,.ra1-state-detail[open]>summary,.inv-notes[open]>summary,.msv-more[open]>summary,details.lx-sub[open]>summary)::before{transform:none}
input:where([type="checkbox"],[type="radio"]){accent-color:var(--ink)}

/* ---------- 19. Plate: Click Agent's ground and its parts (Click Agent.html 시안, user 11-12; .cx-*) ----------
   cx-plate     one round plate: the near-white ground, a dot grid fading out by half its height, and the Click yellow
                washing up from the bottom across its whole width (::after, --plate-wash; --plate-glow sets how strong).
                overflow:clip, not hidden: a sticky part inside still sticks to the window. cx-plate-bleed: the plate
                across its page's whole room, no edge and no corner, its wash held at the window's bottom however
                long the plate grows (Click Agent 채팅).
   cx-pill      a one-line banner: a yellow badge, a line, an arrow (a link).
   cx-chip      a question to start from: a mark and its words in a pill (a button).
   cx-icon-btn  a quiet square control drawn by its icon alone (its name is its title and a sr-only span).
   cx-send      the round ink button that sends.
   cx-mark      the Click mark: the yellow bolt on an ink square (cx-mark-s: the small one beside a name). */
.cx-plate{position:relative;isolation:isolate;overflow:clip;border:1px solid var(--border);border-radius:var(--r-plate);background:var(--plate-bg)}
.cx-plate::before,.cx-plate::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.cx-plate::before{inset:0;background-image:radial-gradient(var(--dot-grid) 1px,transparent 1px);background-size:var(--dot-step) var(--dot-step);-webkit-mask-image:linear-gradient(to bottom,black,transparent 50%);mask-image:linear-gradient(to bottom,black,transparent 50%)}
.cx-plate::after{inset:0;background:var(--plate-wash);opacity:var(--plate-glow,1);transition:opacity .6s ease}
.cx-plate-bleed{border:0;border-radius:0}
.cx-plate-bleed::after{background-attachment:fixed}
.cx-pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:34px;padding:4px 12px 4px 5px;border:1px solid var(--border);border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink-2);font-size:var(--fs-sm);text-decoration:none}
.cx-pill:hover{border-color:var(--ink);color:var(--ink)}
.cx-pill[hidden]{display:none}
.cx-pill-badge{display:inline-flex;align-items:center;gap:4px;flex:none;height:24px;padding:0 9px;border-radius:var(--r-pill);background:var(--brand-yellow);color:var(--brand-ink);font-size:var(--fs-2xs);font-weight:700;white-space:nowrap}
.cx-pill-badge .ck-i{width:14px;height:14px}
.cx-pill-line{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-pill .cx-pill-go{width:16px;height:16px;color:var(--faint)}
.cx-chip{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;min-height:36px;padding:7px 14px 7px 12px;border:1px solid var(--border);border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink-2);font-size:var(--fs-sm);font-weight:500;line-height:1.35;text-align:left;overflow-wrap:anywhere;cursor:pointer}
.cx-chip:hover{border-color:var(--border-strong);background:var(--surface);color:var(--ink)}
.cx-chip .ck-i{width:16px;height:16px;color:var(--ink-3)}
.cx-icon-btn{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:0;border-radius:var(--r-ctl);background:transparent;color:var(--ink-3);cursor:pointer}
.cx-icon-btn:hover:not(:disabled){background:var(--bg-hover);color:var(--ink)}
.cx-icon-btn:disabled{color:var(--faint);cursor:default}
.cx-icon-btn .ck-i{width:18px;height:18px}
.cx-send{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:0;border-radius:var(--r-pill);background:var(--brand-ink);color:var(--surface);cursor:pointer}
.cx-send:hover:not(:disabled){background:var(--primary-hover)}
.cx-send:disabled{background:var(--border-strong);cursor:default}
.cx-send .ck-i{width:18px;height:18px}
.cx-mark{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-card);background:var(--brand-ink);color:var(--brand-yellow)}
.cx-mark .ck-i{width:24px;height:24px}
.cx-mark-s{width:24px;height:24px;border-radius:var(--r-sm)}
.cx-mark-s .ck-i{width:15px;height:15px}

/* U44 (brief/12, the user 11-12 21:00): data as parts, never a sentence. portalUi.counts · detailTop · diff · tags. */
/* Count chips: a dot of the state's tone, the label quiet, the number tabular; 0 quiet; all 0 is one 이상 없음 line. */
.lx-counts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0;padding:0;list-style:none}
.lx-count{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.4;white-space:nowrap;text-decoration:none}
.lx-count::before{content:"";box-sizing:border-box;width:7px;height:7px;flex:none;border-radius:50%;background:var(--border-strong)}
.lx-count b{color:var(--ink);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.lx-count[data-tone="ok"]::before{background:var(--st-managed)}
.lx-count[data-tone="warn"]::before{background:var(--st-review)}
.lx-count[data-tone="bad"]::before{background:var(--st-unmanaged)}
.lx-count[data-tone="block"]::before{border-radius:2px;background:var(--ink)}
.lx-count[data-tone="unk"]::before{border:1.5px dashed var(--border-strong);background:transparent}
.lx-count[data-zero]{color:var(--muted)}
.lx-count[data-zero]::before{opacity:.4}
.lx-count[data-zero] b{color:var(--muted);font-weight:var(--fw-regular)}
a.lx-count:hover b{text-decoration:underline}
.lx-clear{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-size:var(--fs-sm)}
.lx-clear::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--st-managed)}
/* The top of a detail panel's body: the state badge, one quiet summary line, the actions, 3-4 figure tiles. */
.lx-dtop{display:grid;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--divider-soft)}
.lx-dtop-st,.lx-dtop-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lx-dtop-sum{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:var(--lh-body)}
.lx-mtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.lx-mtile{display:grid;align-content:start;gap:2px;min-width:0;padding:10px 12px;border:1px solid var(--divider-soft);border-radius:var(--r-inner);background:var(--surface)}
.lx-mtile>span,.lx-mtile>small{overflow:hidden;color:var(--muted);font-size:var(--fs-2xs);text-overflow:ellipsis;white-space:nowrap}
.lx-mtile>b{color:var(--ink);font-size:var(--fs-kpi-sm);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;line-height:1.25}
.lx-mtile>b.lx-mtile-t{overflow:hidden;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.6;text-overflow:ellipsis;white-space:nowrap}
.lx-mtile[data-tone="bad"]>b{color:var(--st-unmanaged)}
.lx-mtile[data-tone="warn"]>b{color:var(--st-review-fg)}
.lx-mtile[data-zero]>b{color:var(--muted);font-weight:var(--fw-semibold)}
/* 변경 전후 and scope chips; a long original as a fixed-width block of its own. */
.lx-diff{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-sm)}
.lx-diff-k{min-width:96px;color:var(--muted)}
.lx-diff-a{color:var(--muted);text-decoration:line-through}
.lx-diff-b{color:var(--ink);font-weight:var(--fw-semibold)}
.lx-tags{display:inline-flex;flex-wrap:wrap;gap:4px}
.lx-codebox{max-height:320px;margin:0;overflow:auto;padding:10px 12px;border-radius:var(--r-inner);background:var(--surface-subtle);color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-mono);line-height:var(--lh-body);white-space:pre-wrap;word-break:break-word}