@charset "utf-8";
/* Click 포털 리디자인 3단계: 조치 흐름 — Task, Click Agent, Control, AI Policy (HANDOFF 5.4~5.6). Writer: 3단계 작업자.
   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.

   One frame for the four menus (HANDOFF 4절 화면 머리 · 카드, 5.4 · 5.6: a list card and its detail card side by side):
   - the screen's first line is its headline (the design's clamp(22px, 1.9vw, 28px) 700), the line over it the small
     13px grey line; the words are the screen's own (U3: no sentence the server did not give is made here);
   - a list stands on its own white card (1px line, 14px corner), its rows the design's 14px name over a 12.5px grey
     line; the panel beside it is a second card with the page's gap between them, not a sheet against the window's edge;
   - a head's main action is the design's 38px button, a chip row the design's 34px 상태 알약.
   Each menu's block names its own screens (their sheets' classes, or the section's data-page); nothing here reaches
   a screen of step 2 or 4. */

/* ================= Task (todo · todo-all · todo-done; HANDOFF 5.4, PAGE_PATTERNS C) ================= */
/* List + detail (Click Design System 3단계): the page's head -- its scope line, the first line, the list's tools, Task 생성
   and the bucket chips -- stands over both columns (todo-screen.js .ra4-top); under it the list keeps ≈32% and the
   panel the rest, both white cards in the page's room. Sizes are the shared parts' (click-parts.css): no 38px button,
   34px chip or 64px line of the screen's own. */
main.lx-page .ra4-screen{margin:0}
main.lx-page .ra4-screen .ra4-page{padding:0}
.ra4-screen{display:flex;flex-direction:column;gap:var(--sp-4)}
.ra4-screen .ra4-top{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.ra4-screen .ra4-top>[data-todo-scope]{margin:0}
/* PageHeader order: the headline row first, the screen's one-sentence scope under it as its quiet line (it stood above
   the title), then the bucket chips. A head row with nothing in it (완료 with no Task) takes no line. */
.ra4-screen .ra4-top>.ra4-head{order:0}
.ra4-screen .ra4-top>[data-todo-scope]{order:1;margin-top:calc(var(--sp-2) * -1);color:var(--muted);font-size:var(--fs-sm)}
.ra4-screen .ra4-top>.ra4-head:not(:has(>:not(.lx-push,[data-todo-create-head]:empty))){display:none}
.ra4-screen .ra4-top>.ra4-head:not(:has(>:not(.lx-push,[data-todo-create-head]:empty)))+[data-todo-scope]{margin-top:0}
.ra4-screen .ra4-top>:not(.ra4-head,[data-todo-scope]){order:2}
.ra4-screen .ra4-split{gap:var(--gap);align-items:flex-start}
.ra4-screen .ra4-page{gap:var(--sp-4)}
.ra4-screen .ra4-has-panel>.ra4-page{flex:0 0 clamp(320px,32%,480px)}
/* Task 생성 opens the shell's panel and hides this screen's own (ra4-create-open): the list then has the row to itself,
   not a 32% column centred in it. */
.ra4-create-open .ra4-screen .ra4-has-panel>.ra4-page,.ra4-screen.ra4-create-open .ra4-has-panel>.ra4-page{flex:1 1 auto;margin:0}
.ra4-screen .ra4-head{align-items:center;gap:var(--sp-3)}
.ra4-screen .ra4-lede{gap:8px 12px}
.ra4-screen .ra4-lede .ra4-fig-main{color:var(--ink);font-size:var(--fs-page);font-weight:var(--fw-bold);letter-spacing:var(--ls-head);line-height:1.3}
.ra4-screen .ra4-lede .ra4-fig-main b{font-weight:var(--fw-bold)}
.ra4-screen .ra4-lede .ra4-fig-sub{color:var(--muted);font-size:var(--fs-sm)}
.ra4-screen p.lx-lede[data-todo-first]{color:var(--ink);font-size:var(--fs-page);font-weight:var(--fw-bold);letter-spacing:var(--ls-head);line-height:1.3}
.ra4-screen .ra4-urgent[aria-pressed="true"]{border-color:var(--brand-ink);background:var(--brand-ink);color:var(--surface);box-shadow:none}
.ra4-screen .ra4-gap{background:var(--border)}

/* The list: one white card; a bucket's head the small grey line; a line its severity, the name over its grey line and
   its end (state, due) at the right. The chosen line is the neutral selection ground with the ink edge (the design's
   list item). */
.ra4-screen .ra4-list{padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.ra4-screen .ra4-list>.ra4-grp{padding:12px 8px 6px;color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-semibold)}
.ra4-screen .ra4-list>.ra4-grp:first-child{padding-top:10px}
.ra4-screen .ra4-list>.ra4-grp .lx-n{color:var(--muted)}
.ra4-screen .ra4-grp-press.lx-c-bad{color:var(--st-unmanaged-fg)}
.ra4-screen .ra4-list>.lx-tr{padding:12px 8px;border-bottom-color:var(--divider-soft);border-radius:var(--r-ctl)}
.ra4-screen .ra4-list>.lx-tr:last-child{border-bottom:0}
.ra4-screen .ra4-list>.lx-tr:is(.lx-is-sel,[aria-selected="true"]){box-shadow:inset 0 0 0 1.5px var(--ink)}
.ra4-screen .ra4-row .lx-nm{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.ra4-screen .ra4-row .lx-sub{margin-top:2px;color:var(--muted);font-size:var(--fs-xs)}
.ra4-screen .ra4-row .ra4-do{color:var(--ink-2);font-weight:var(--fw-medium)}
.ra4-screen .ra4-row .ra4-click-mark{color:var(--primary-ink);font-weight:var(--fw-semibold)}
/* Beside the panel the list is narrow: a line's end (steps, state, due) drops under its name, as the design's third line,
   so the name's grey line is not cut. */
.ra4-screen .ra4-has-panel .ra4-row{grid-template-columns:22px minmax(0,1fr)}
.ra4-screen .ra4-has-panel .ra4-row:has(>.ra4-due-short){grid-template-columns:minmax(0,1fr)}
.ra4-screen .ra4-has-panel .ra4-row-end{grid-column:-2/-1;justify-content:flex-start;flex-wrap:wrap;gap:6px 10px;margin-top:6px;font-size:var(--fs-xs)}
.ra4-screen .ra4-due{color:var(--muted);font-size:var(--fs-2xs)}
.ra4-screen .ra4-due.lx-c-bad{color:var(--st-unmanaged-fg);font-weight:var(--fw-semibold)}
.ra4-screen .ra4-step>i{background:var(--border-strong)}
.ra4-screen .ra4-step>i[data-on]{background:var(--brand-ink)}
.ra4-screen .ra4-more{padding:10px 8px 8px 40px;color:var(--ink-2);font-weight:var(--fw-semibold)}
.ra4-screen .ra4-coming{border-top-color:var(--divider-soft)}
.ra4-screen .ra4-pager{padding:12px 4px 4px}

/* The panel: the detail card beside the list, as wide as the page leaves it; its title the panel title, its facts the
   key-value grid. Its inside keeps the parts' sticky column (it stays in view while the list scrolls). */
.ra4-screen .ra4-aside{flex:1 1 0;min-width:0;max-width:none;padding:0;border-left:0;background:transparent}
.ra4-screen .ra4-aside>.lx-aside-in{margin:0;padding:var(--sp-5) var(--sp-6) var(--sp-6);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.ra4-screen .ra4-aside>.lx-aside-in>.lx-aside-h{margin:-6px -8px -8px;padding:6px 8px 8px}
.ra4-screen .ra4-item .detail-facts{padding:14px 0;border-top:1px solid var(--divider-soft);border-bottom:1px solid var(--divider-soft)}
.ra4-screen .ra4-item .detail-fact>dt{color:var(--muted);font-size:var(--fs-2xs)}
.ra4-screen .ra4-item .detail-fact>dd{font-weight:var(--fw-semibold)}
.ra4-screen .ra4-steps>li[aria-current="step"]{background:var(--primary-tint);color:var(--primary-ink)}
.ra4-screen .ra4-steps>li+li::before{background:var(--border-strong)}
@media (max-width:1099px){
  .ra4-screen .ra4-has-panel>.ra4-page{flex-basis:auto}
}
@media (max-width:900px){
  .ra4-screen .ra4-split{gap:0}
  .ra4-screen .ra4-has-panel .ra4-aside{padding:0;background:var(--surface)}
  .ra4-screen .ra4-aside>.lx-aside-in{border:0;border-radius:0;padding:20px 16px 32px}
}

/* 선택지를 실행하면 (B10): each choice the item offers on one line -- its name, then what it does -- on the design's
   grey box under the facts ("N번을 실행하면", 11-tasks). */
.ra4-outcomes{display:grid;gap:8px;margin:0;padding:12px 14px;border-radius:10px;background:var(--bg-subtle);list-style:none}
.ra4-outcomes>li{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);align-items:baseline;gap:4px 12px;font-size:var(--fs-sm);line-height:1.5}
.ra4-outcomes>li>b{color:var(--ink);font-weight:600}
.ra4-outcomes>li>span{color:var(--ink-2);overflow-wrap:anywhere}
@media(max-width:640px){.ra4-outcomes>li{grid-template-columns:minmax(0,1fr)}}

/* ================= Task › 이슈 · 종료 · 추이 · 승인 대기 (issues-console.js, issue-approvals.js; same frame) ================= */
.ra5-split{gap:var(--gap)}
:is(.ra5-split,.ra5-approvals,.ra5-trend) .ra5-head .lx-lede{color:var(--ink);font-size:var(--fs-page);font-weight:700;letter-spacing:-.025em;line-height:1.3}
:is(.ra5-split,.ra5-approvals,.ra5-trend) .ra5-head>.lx-btn{height:38px;padding:0 14px;font-size:var(--fs-sm)}
.ra5-split .ra5-chips .lx-chip,.ra5-split .ra5-views .lx-chip{height:34px;padding:0 12px;font-size:var(--fs-sm)}
.ra5-split .ra5-t,.ra5-trend .ra5-days{padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.ra5-split .ra5-t>.lx-tr:not(.lx-th),.ra5-trend .ra5-days>.lx-tr:not(.lx-th){min-height:56px;border-bottom-color:var(--divider-soft)}
.ra5-split .ra5-t>.lx-th,.ra5-trend .ra5-days>.lx-th{min-height:42px;border-bottom-color:var(--divider);color:var(--muted);font-size:var(--fs-2xs)}
.ra5-split .ra5-t .lx-sub{color:var(--muted);font-size:var(--fs-xs)}
.ra5-split .ra5-aside{padding:22px 24px 24px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);top:80px;max-height:calc(100vh - 100px)}
.ra5-split .ra5-aside .lx-aside-t{font-size:var(--fs-kpi-sm)}
.ra5-approvals .lx-inc{border-color:var(--border);border-radius:var(--r-card);background:var(--surface)}
@media (max-width:900px){
  .ra5-split{gap:0}
  .ra5-split .ra5-aside{top:0;max-height:none;border:0;border-left:1px solid var(--border);border-radius:0;padding:20px 16px 32px}
}

/* 5단계 (REPORT 6절 같은 패턴, Task › 이슈 = AI 자산 목록 + 상세 패널): 추이's three figures and its chart stand on white
   cards as the list's table does (the issue opened is the shared detail panel already, portalUi.detail). */
.ra5-trend .ra5-stat{border-color:var(--border);border-radius:var(--r-card);background:var(--surface)}
.ra5-trend .ra5-plot{padding:16px 20px 14px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.ra5-trend .ra5-plot>.lx-sect-h{color:var(--ink);font-size:var(--fs-sm);font-weight:600}

/* ================= Click Agent › 채팅 on ink (a dark theme, data-theme="dark" -- the portal has none yet) ================= */
:root[data-theme="dark"] [data-page="click-chat"] .lc-compose{border-color:var(--brand-ink-line);background:var(--brand-ink)}
:root[data-theme="dark"] [data-page="click-chat"] textarea.lc-in{color:var(--brand-cloud)}
:root[data-theme="dark"] [data-page="click-chat"] textarea.lc-in::placeholder{color:var(--brand-ink-label)}
:root[data-theme="dark"] [data-page="click-chat"] .lc-send:not(:disabled){border-color:var(--brand-yellow);background:var(--brand-yellow);color:var(--brand-ink)}
[data-page="click-chat"] textarea.lc-in{font-size:var(--fs-body)}
[data-page="click-chat"] textarea.lc-in::placeholder{color:var(--muted)}
/* ================= Click Agent › 활동 · 정기 점검 · 조치 권한 · 판단 모델 (click-activity.js · click-patrol.js ·
   click-autonomy.js · click-control.js; HANDOFF 5.5, docs/screens/12b · 12c · 12d) ================= */
/* The tabs' parts as the design draws them: cards on the cloud ground with the page's gap, the tables on white cards
   with the design's grey heads, figures in separate cards (판단 모델's 요청 지표, 조치 권한's 30일 기록), the main
   action the 38px ink button. */
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity){gap:var(--gap)}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-first>.lx-btn-p,:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-first .lx-row>.lx-btn-p{height:38px;padding:0 14px;font-size:var(--fs-sm)}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lx-card{padding:20px 24px;border-color:var(--border);border-radius:var(--r-card);background:var(--surface)}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lx-h2{color:var(--ink);font-size:var(--fs-card-title);font-weight:600}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-table{border-color:var(--border);border-radius:var(--r-card)}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-table>table.lx-t th{height:42px;background:var(--bg-head);color:var(--muted);font-size:var(--fs-2xs)}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-table>table.lx-t td{height:56px;border-bottom-color:var(--divider-soft)}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-table>table.lx-t :is(th,td):first-child{padding-left:20px}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-table>table.lx-t :is(th,td):last-child{padding-right:20px}
:is(.lo-patrol,.lo-autonomy,.lo-control,.lo-activity) .lo-views{align-self:flex-start}
/* Figures: each its own card, the label 12px grey over the design's 22px figure. */
:is(.lo-autonomy,.lo-control) .lo-tiles{gap:16px;padding:0;border:0;background:transparent}
:is(.lo-autonomy,.lo-control) .lo-tile{padding:16px 20px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
:is(.lo-autonomy,.lo-control) .lo-tile>span:first-child{color:var(--muted);font-size:var(--fs-2xs)}
:is(.lo-autonomy,.lo-control) .lo-tile>strong{font-size:var(--fs-kpi)}
/* 판단 모델's first card: 모델 and Gateway 연결 side by side with a line between (12d). */
.lo-control .lo-state{padding:0}
.lo-control .lo-state .lx-cols{gap:0}
.lo-control .lo-state-cell{padding:20px 24px}
.lo-control .lo-state-cell+.lo-state-cell{border-left:1px solid var(--divider)}
.lo-control .lo-state-cell>.lx-lbl:first-child{color:var(--muted);font-size:var(--fs-2xs)}
.lo-control .lo-state-value{font-size:var(--fs-card-title)}
.lo-control .lo-state-cell[data-click-state-cell="today"] .lo-state-value{font-size:var(--fs-kpi)}
@media (max-width:767px){.lo-control .lo-state-cell+.lo-state-cell{border-top:1px solid var(--divider);border-left:0}}
/* 활동: the counts the design's figure cards, the state line the subtle ground. */
.lo-activity .lo-count{border-color:var(--border);border-radius:var(--r-card)}
.lo-activity .lo-count[data-click-count-on][data-click-count="approval"]{border-color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand-ink)}
.lo-activity .lo-count[data-click-count-on][data-click-count="judgement"]{border-color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand-ink)}
.lo-activity .lo-state-line{border-radius:var(--r-card);background:var(--surface);border:1px solid var(--border)}

/* ================= Control (controls-console.js: controls · control-detail · ignore-rules · Managed by Tatum;
   HANDOFF 5.6, docs/screens/13-control.png) ================= */
/* The list of Controls and the Control on view are the design's two cards with the page's gap between them; the list
   stays in view under the top line while the page scrolls (it did, from the window's top). */
.ctrl-frame,.ctrl-split{column-gap:var(--gap)}
.ctrl-frame>.ctrl-list.lx-mlist{top:calc(var(--header-h) + var(--tabs-h) + 16px);max-height:calc(100vh - var(--header-h) - var(--tabs-h) - 32px);padding:14px 10px 16px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.ctrl-frame>.ctrl-list .lx-mi{min-height:56px;padding:10px 12px;border-radius:10px}
.ctrl-frame>.ctrl-list .lx-mi:hover{background:var(--bg-subtle)}
.ctrl-frame>.ctrl-list .lx-mi:is(.lx-on,[aria-current],[aria-selected="true"]){background:var(--select-bg);box-shadow:inset 0 0 0 1px var(--divider)}
.ctrl-frame>.ctrl-list .lx-nm{font-size:var(--fs-sm);font-weight:600}
.ctrl-frame>.ctrl-list .lx-sub{color:var(--muted);font-size:var(--fs-2xs)}
.ctrl-frame>.ctrl-list .lx-mi-n{font-size:var(--fs-card-title)}
.ctrl-detail-split>.ctrl-detail{padding:24px 26px 28px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.ctrl-head .lx-lede{color:var(--ink);font-size:clamp(20px,1.6vw,24px);font-weight:700;letter-spacing:-.02em}
:is(.ctrl-page,.ctrl-list) .lx-lede{color:var(--ink);font-size:var(--fs-page);font-weight:700;letter-spacing:-.025em}
.ctrl-frame .ctrl-list .lx-lede{font-size:var(--fs-card-title)}
.ctrl-page .lx-card{border-color:var(--border);border-radius:var(--r-card)}
/* (the Control's own parts -- 조건, 조치, 대상 -- are sections of its one card, a line over each, as 13-control draws them) */
.ctrl-detail .lx-card{padding:20px 0 0;border:0;border-top:1px solid var(--divider-soft);border-radius:0;background:transparent}
.ctrl-detail .lx-sect-h,.ctrl-page .lx-sect-h{color:var(--muted);font-size:var(--fs-2xs)}
.ctrl-acts>.lx-btn-p,.ctrl-first>.lx-btn-p{height:38px;padding:0 14px;font-size:var(--fs-sm)}
.ctrl-chips .lx-chip{height:34px;padding:0 12px;font-size:var(--fs-sm)}
/* The panel beside a Control or a list (대상, 예외 규칙, a template): a card in the row, not a sheet against the
   window's edge (its old margins took back the frame's former 24 · 28 · 40 padding). */
@media(min-width:901px){
  .ctrl-aside{top:calc(var(--header-h) + var(--tabs-h) + 16px);align-self:flex-start;min-height:0;max-height:calc(100vh - var(--header-h) - var(--tabs-h) - 32px);margin:0;padding:22px 24px 24px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
  .ctrl-detail-split{column-gap:var(--gap)}
  .ctrl-detail-split>.ctrl-aside .lx-aside-t,.ctrl-split>.ctrl-aside .lx-aside-t{font-size:var(--fs-kpi-sm)}
}
@media(max-width:900px){
  .ctrl-frame>.ctrl-list.lx-mlist{max-height:none}
}

/* Control › 위험 경로 · 필요 권한 선언 · 관측 범위 · AI 보호자산 and the screens a path opens (security-*.js): the screen's
   title its headline, each table on a white card. */
[data-page^="security-"] :is(.lx-lede,.psn-head>.lx-h2,.ssa-title>.lx-h2,.sxd-title>.lx-h2,h2.lx-h2[data-spd-cause]),#security-protected-assets-root>h2.lx-h2{color:var(--ink);font-size:var(--fs-page);font-weight:700;letter-spacing:-.025em;line-height:1.3}
[data-page^="security-"] :is(.rpl-table,.sc-scroll,.spd-scroll,.pnc-scroll,.srm-scroll,.ssa-scroll,.sxd-scroll){padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page^="security-"] :is(.rpl-table>.lx-th,.lx-t th,.lx-t .lx-th>th){color:var(--muted);font-size:var(--fs-2xs)}
[data-page^="security-"] :is(.rpl-table>.lx-tr:not(.lx-th),.lx-t td){border-bottom-color:var(--divider-soft)}
[data-page^="security-"] .rpl-chips .lx-chip{height:34px;padding:0 12px;font-size:var(--fs-sm)}
[data-page="security-protected-assets"] table.lx-table{width:100%;border:1px solid var(--border);border-radius:var(--r-card);border-collapse:separate;border-spacing:0;background:var(--surface);overflow:hidden}
[data-page="security-protected-assets"] table.lx-table :is(th,td){padding:10px 14px;border-bottom:1px solid var(--divider-soft);text-align:left}
[data-page="security-protected-assets"] table.lx-table th{background:var(--bg-head);color:var(--muted);font-size:var(--fs-2xs);font-weight:500}
[data-page^="security-"] .lx-card{border-color:var(--border);border-radius:var(--r-card)}

/* 5단계 (REPORT 6절 같은 패턴, Control 추가 탭): Managed by Tatum's templates and 예외 규칙's rules are the list's white
   table card (their head on the card, not on the page); 필요 권한 선언's form and its declarations are cards; 위험 조치
   (a path's what-if and remediation) is one card, its title the card's, its parts lines under it; 위험 경로's find
   field keeps the list's width, not the page's. */
.ctrl-page table.ctrl-table:is(.ctrl-templates-table,.ctrl-rules-table),[data-page="security-permission-need"] table.lx-t[data-psn-rows]{border:1px solid var(--border);border-radius:var(--r-card);border-collapse:separate;border-spacing:0;background:var(--surface);overflow:hidden}
.ctrl-page table.ctrl-table:is(.ctrl-templates-table,.ctrl-rules-table) :is(th,td),[data-page="security-permission-need"] table.lx-t[data-psn-rows] :is(th,td){border-bottom-color:var(--divider-soft)}
.ctrl-page table.ctrl-table:is(.ctrl-templates-table,.ctrl-rules-table) th,[data-page="security-permission-need"] table.lx-t[data-psn-rows] th{color:var(--muted);font-size:var(--fs-2xs);font-weight:500}
.ctrl-page table.ctrl-table:is(.ctrl-templates-table,.ctrl-rules-table) tbody tr:last-child>:is(td,th),[data-page="security-permission-need"] table.lx-t[data-psn-rows] tbody tr:last-child>:is(td,th){border-bottom:0}
[data-page="security-permission-need"] form[data-psn-form]{padding:20px 24px 22px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="security-permission-need"] form[data-psn-form]>.lx-h3{margin-top:0;color:var(--ink);font-size:var(--fs-card-title);font-weight:700}
[data-page="security-remediation"] .srm{padding:22px 24px 24px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="security-remediation"] .srm [data-srm-head] .lx-nm{color:var(--ink);font-size:var(--fs-card-title);font-weight:700}
[data-page="security-remediation"] .srm>[data-srm-section]{padding-top:16px;border-top:1px solid var(--divider-soft)}
[data-page="security-paths"] .rpl-find{max-width:560px}

/* ================= AI Policy (gov-policy.js · use-cases.js · gw-endpoint-policy.js · hook-sessions.js;
   HANDOFF 5.6, docs/screens/14-policy.png) ================= */
/* 도구 정책 and 앱 정책: the list's column and the decision beside it are the design's two cards with the page's gap
   between them (the screen took back the frame's former 24 · 28 · 40 padding to stand its panel at the window's edge). */
.ra6-lede{color:var(--ink);font-size:var(--fs-page);font-weight:700;letter-spacing:-.025em;line-height:1.3}
.ra6-lede b{font-weight:700}
.ra6-screen .ra6-table-wrap{padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.ra6-screen .ra6-table th{color:var(--muted);font-size:var(--fs-2xs)}
.ra6-screen .ra6-table td{border-bottom-color:var(--divider-soft)}
.ra6-screen .ra6-views .lx-chip,.ra6-screen .ra6-views .lx-seg>button{font-size:var(--fs-sm)}
.ra6-screen .ra6-views .lx-chip{height:34px;padding:0 12px}
.ra6-uc-head .lx-btn-p,.ra6-first>.lx-btn-p{height:38px;padding:0 14px;font-size:var(--fs-sm)}
@media (min-width:901px){
  .ra6-screen{margin:0;column-gap:var(--gap);min-height:0}
  .ra6-screen>.lx-page.ra6-page{padding:0}
  .ra6-screen>.ra6-side:not([hidden]){top:calc(var(--header-h) + var(--tabs-h) + 16px);align-self:flex-start;min-height:0;max-height:calc(100vh - var(--header-h) - var(--tabs-h) - 32px);margin:0;padding:22px 24px 24px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
  .ra6-screen>.ra6-side .lx-aside-t{font-size:var(--fs-kpi-sm)}
}
/* Hook 기록: the screen's head line its headline, its lists the design's white table cards. */
[data-page="hook-sessions"] .lx-lede{color:var(--ink);font-size:var(--fs-page);font-weight:700;letter-spacing:-.025em}
[data-page="hook-sessions"] .lx-t.lx-t-cols{padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="hook-sessions"] .lx-t-cols>.lx-tr:not(.lx-th){border-bottom-color:var(--divider-soft)}
[data-page="hook-sessions"] .lx-t-cols>.lx-th{color:var(--muted);font-size:var(--fs-2xs)}
/* 기기 정책: its first line the headline, the policy's form (정책 내용) a white card, its tables too. */
[data-page="gw-endpoint"] .lx-lede[data-ep-first]{color:var(--ink);font-size:var(--fs-page);font-weight:700;letter-spacing:-.025em;line-height:1.3}
[data-page="gw-endpoint"] .epv-form{padding:20px 24px 8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="gw-endpoint"] .epv-page .lx-chip{height:34px;padding:0 12px;font-size:var(--fs-sm)}
[data-page="gw-endpoint"] .epv-scroll{padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}

/* ================= LLM Gateway (gw-*: guardui-screen.js, gw-console-*.js; HANDOFF 5.3, docs/screens/09-gateway.png) =================
   Gateway's shared sizes are 4단계's (click-s4.css); these are the parts 3단계's writer drew on top of them. */
/* 가드레일 표의 동작: the design's segment (탐지만 / 마스킹 / 차단) -- a grey track, the pressed action a white key in
   ink (차단 in the blocked colour), an action the row cannot take faint. The radios stay in the page for the keyboard
   and the change handler; the state's dot is the segment itself. */
[data-page="gw-guardrails"] .gr-act.gr-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--border);border-radius:var(--r-ctl);background:var(--bg-subtle)}
[data-page="gw-guardrails"] .gr-act.gr-seg::before{display:none}
[data-page="gw-guardrails"] .gr-seg-o{position:relative;display:inline-flex}
[data-page="gw-guardrails"] .gr-seg-o>input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
[data-page="gw-guardrails"] .gr-seg-o>input:disabled{cursor:not-allowed}
[data-page="gw-guardrails"] .gr-seg-o>span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:6px;color:var(--muted);font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
[data-page="gw-guardrails"] .gr-seg-o>input:checked+span{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-seg)}
[data-page="gw-guardrails"] .gr-seg-o>input[value="block"]:checked+span{color:var(--ds-blocked)}
[data-page="gw-guardrails"] .gr-seg-o>input:disabled+span{color:var(--faint)}
[data-page="gw-guardrails"] .gr-seg-o>input:not(:disabled):not(:checked):hover+span{color:var(--ink)}
[data-page="gw-guardrails"] .gr-seg-o>input:focus-visible+span{outline:2px solid var(--primary-line);outline-offset:1px}
[data-page="gw-guardrails"] .gr-seg-note{padding:0 8px;color:var(--muted);font-size:var(--fs-2xs);white-space:nowrap}
/* 장애 배너 (#97 gateway_status = outage): the design's banner over the screen -- the Unmanaged ground and line, a mark,
   the sentence in 15px 700, 다시 확인 and 운영 상태 at its right; under 640px the buttons go under the sentence. */
[data-page="gw-overview"] .gwo-outage{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:16px 20px;border:1px solid var(--st-unmanaged);border-radius:var(--r-card);background:var(--st-unmanaged-bg);color:var(--ink)}
[data-page="gw-overview"] .gwo-outage-mark{flex:none;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--surface);color:var(--st-unmanaged-fg);font-weight:800}
[data-page="gw-overview"] .gwo-outage-mark::before{content:"!"}
[data-page="gw-overview"] .gwo-outage>b{font-size:var(--fs-card-title);font-weight:700}
[data-page="gw-overview"] .gwo-outage-acts{display:inline-flex;flex:none;flex-wrap:wrap;align-items:center;gap:8px}
[data-page="gw-overview"] .gwo-outage-paged{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--fs-xs);font-weight:600}
[data-page="gw-overview"] .gwo-outage-acts [data-gwc-outage-page-failed]{color:var(--st-unmanaged-fg);font-size:var(--fs-2xs)}
@media (max-width:640px){[data-page="gw-overview"] .gwo-outage{flex-wrap:wrap}[data-page="gw-overview"] .gwo-outage-acts{width:100%}}
/* KPI 5: the design's five white cards in a row over the steps (요청 · 탐지 · 차단 · 마스킹 · 연동 에이전트), the figure
   26px with its unit, the line under it 12px grey; three a row under 1100px, two under 640px. */
[data-page="gw-overview"] .gwo-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 16px}
[data-page="gw-overview"] .gwo-kpi-slot{display:contents}
[data-page="gw-overview"] .gwo-kpi.lx-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:16px 18px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="gw-overview"] .gwo-kpi>.lx-lbl{color:var(--muted);font-size:var(--fs-xs)}
[data-page="gw-overview"] .gwo-kpi>.lx-fig-s{margin-top:4px;font-size:var(--fs-kpi);font-weight:700;letter-spacing:-.03em;line-height:1.2}
[data-page="gw-overview"] .gwo-kpi>.lx-fig-s .gwo-figure-link{color:inherit;font:inherit}
[data-page="gw-overview"] .gwo-kpi-of{color:var(--faint);font-size:var(--fs-sm);font-weight:600}
[data-page="gw-overview"] .gwo-kpi>[data-gwc-kpi-sub]{color:var(--muted);font-size:var(--fs-2xs);overflow-wrap:anywhere}
@media (max-width:1099px){[data-page="gw-overview"] .gwo-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){[data-page="gw-overview"] .gwo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 문장 검사해 보기: the design's open white card under the guardrail table (a fold before), its line under the title the
   check's word on what it keeps; the box the design's 4 lines. */
[data-page="gw-guardrails"] .gr-check{margin-top:16px}
[data-page="gw-guardrails"] .gr-check .gp-check.lx-card{padding:18px 24px 20px;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
[data-page="gw-guardrails"] .gp-check-sub{margin:-6px 0 2px;color:var(--muted);font-size:var(--fs-xs)}
[data-page="gw-guardrails"] .gp-check-text>textarea{min-height:104px;border-radius:10px}

/* ================= Router › 추천 panel (router-diagnosis.js; HANDOFF 5.3, docs/screens/10-router.png) =================
   단계: the design's line of steps over the actions -- a numbered circle, a step done Managed green with its check, the
   step running in ink, a step not reached grey, a short line between. (Router's history keeps 4단계's .rg-stages.) */
[data-page="router-diagnosis"] .rg-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 14px;padding:0;list-style:none}
[data-page="router-diagnosis"] .rg-steps>li{display:inline-flex;align-items:center;gap:8px;color:var(--faint);font-size:var(--fs-sm)}
[data-page="router-diagnosis"] .rg-steps>li:not(:last-child)::after{content:"";width:28px;height:1px;flex:none;background:var(--border-strong)}
[data-page="router-diagnosis"] .rg-step-n{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;background:var(--divider-soft);color:var(--muted);font-size:var(--fs-2xs);font-weight:700}
[data-page="router-diagnosis"] .rg-steps>li[data-rg-step-state="done"]{color:var(--ink);font-weight:600}
[data-page="router-diagnosis"] .rg-steps>li[data-rg-step-state="done"]>.rg-step-n{background:var(--st-managed);color:var(--surface);font-size:0}
[data-page="router-diagnosis"] .rg-steps>li[data-rg-step-state="done"]>.rg-step-n::before{content:"\2713";font-size:var(--fs-2xs)}
[data-page="router-diagnosis"] .rg-steps>li[data-rg-step-state="now"]{color:var(--ink);font-weight:700}
[data-page="router-diagnosis"] .rg-steps>li[data-rg-step-state="now"]>.rg-step-n{background:var(--brand-ink);color:var(--surface)}

/* ---------- Click Agent › 정기 점검 (PATROL-UI-GAP 11-12 L2–L10; the design's 12b) ----------
   One status strip (the badge, the schedule's facts and switch, 새로 고침 · 미리 보기 · 지금 점검; what is wrong one line
   under it), the summary card (Click's mark, the newest patrol's line, the five parts as one band of numbers), the views'
   line with the basis on its right, and the found list as three-line rows in one card. Layout only: the parts are
   click-parts.css's. */
.lo-patrol .lo-strip{flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);padding:var(--sp-3) var(--sp-5)}
.lo-patrol .lo-strip>.lx-lede{flex:none;margin:0}
.lo-patrol .lo-strip-switch{display:inline-flex;flex:none;align-items:center;gap:var(--sp-2)}
.lo-patrol .lo-strip .lt-plan-facts dt>[data-tooltip]{cursor:help}
.lo-patrol .lo-strip>.lx-lede .lx-lede-sub{margin:0}
.lo-patrol .lo-strip-plan,.lo-patrol .lo-strip-plan>.lt-plan{display:contents}
.lo-patrol .lo-strip .lt-plan-facts{display:flex;flex:1 1 0;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-5);min-width:min(100%,280px);margin:0;padding:0;border:0}
.lo-patrol .lo-strip .lt-plan-facts>div{display:flex;align-items:center;gap:var(--sp-2)}
.lo-patrol .lo-strip .lt-plan-facts dt{color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-regular)}
.lo-patrol .lo-strip .lt-plan-facts dd{margin:0;color:var(--ink);font-size:var(--fs-sm)}
.lo-patrol .lo-strip .lt-plan-facts dd b{font-weight:var(--fw-semibold)}
.lo-patrol .lo-strip>.lx-grow{display:none}
.lo-patrol .lo-strip-act{flex:none;gap:var(--sp-2);margin-left:auto}
.lo-patrol .lo-strip .lt-plan-verdict{order:5;flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-3);margin:0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--warn-banner-line);border-radius:var(--r-ctl);background:var(--warn-banner-bg);color:var(--warn-banner-fg);font-size:var(--fs-sm)}
.lo-patrol .lo-strip .lt-plan-verdict .lo-warn-fact{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1)}
.lo-patrol .lo-strip .lt-plan-verdict [data-click-patrol-retry]{margin-left:auto}
.lo-patrol .lo-strip-wide{order:6;flex-basis:100%}
.lo-patrol .lo-strip-wide:empty{display:none}
/* The summary card: a head line, then the band of numbers flush to the card's edges. */
.lo-patrol .lo-sum{display:grid;gap:0;padding:0;overflow:hidden}
.lo-patrol .lo-sum-h{flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);padding:var(--sp-4) var(--sp-5)}
.lo-patrol .lo-sum-mark{display:grid;place-items:center;flex:none;width:var(--icon-lg);height:var(--icon-lg);border-radius:var(--r-sm);background:var(--brand-ink);color:var(--brand-yellow)}
.lo-patrol .lo-sum-mark svg{display:block;width:var(--icon-sm);height:var(--icon-sm);fill:currentColor}
.lo-patrol .lo-sum .lx-click-h{display:flex;align-items:center;gap:var(--sp-1);margin:0;color:var(--ink);font-size:var(--fs-card-title);font-weight:var(--fw-semibold)}
.lo-patrol .lo-sum [data-click-patrol-latest]{margin:0;color:var(--muted);font-size:var(--fs-xs)}
.lo-patrol .lo-sum .ov-grid.is-band{grid-template-columns:repeat(5,minmax(0,1fr))}
.lo-patrol .lo-sum .lo-rechecks,.lo-patrol .lo-sum>.lo-digest-more{margin:0;padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border)}
/* The views' line: the views left, the basis right, on one line. */
.lo-patrol .lo-views-row{flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4)}
.lo-patrol .lo-views-row .lt-basis{display:block;margin:0;color:var(--muted);font-size:var(--fs-xs)}
/* The found list: one card, its head (the filter said, CSV right), the rows apart by a line. */
.lo-patrol .lo-found{padding:0}
.lo-patrol .lo-list-h{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);border-bottom:1px solid var(--border);background:var(--bg-subtle)}
.lo-patrol .lo-list-h[hidden]{display:none}
.lo-patrol .lo-list-h .lo-filter{color:var(--ink);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.lo-patrol .lo-views-csv[hidden]{display:none}
.lo-patrol .lo-found .lo-findings{display:block;margin:0;border:0}
.lo-patrol .lo-frow{display:flex;align-items:flex-start;gap:var(--sp-4);padding:0 var(--sp-5) 0 0;border-bottom:1px solid var(--divider-soft)}
.lo-patrol .lo-frow:hover{background:var(--bg-hover)}
.lo-patrol .lo-frow:has(>.lo-finding-row[aria-current="true"]){background:var(--surface-selected)}
.lo-patrol .lo-frow:last-child{border-bottom:0}
.lo-patrol .lo-frow[hidden]{display:none}
.lo-patrol .lo-frow>.lo-finding-row{display:grid;flex:1 1 auto;min-width:0;gap:var(--sp-1);padding:var(--sp-4) var(--sp-5);border:0;border-radius:0;background:transparent;text-align:left}
.lo-patrol .lo-frow-1{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);color:var(--ink);font-size:var(--fs-body)}
.lo-patrol .lo-frow-1 b{font-weight:var(--fw-semibold)}
.lo-patrol .lo-frow-2{color:var(--ink-2);font-size:var(--fs-sm)}
.lo-patrol .lo-frow-2>b{color:var(--ink);font-weight:var(--fw-semibold)}
.lo-patrol .lo-frow-2 .lo-frow-fail{color:var(--danger-ink)}
.lo-patrol .lo-frow-3{color:var(--muted);font-size:var(--fs-xs)}
.lo-patrol :is(.lo-frow-2,.lo-frow-3) .lx-bdg{vertical-align:middle}
.lo-patrol .lo-frow-teach{display:grid;flex:none;justify-items:end;gap:var(--sp-1);padding-top:var(--sp-4)}
.lo-patrol .lo-frow-teach small{color:var(--muted);font-size:var(--fs-2xs)}
/* A phone: the five numbers two to a line, 동의 · 이견 one line under its row. */
@media(max-width:600px){
  .lo-patrol .lo-sum .ov-grid.is-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lo-patrol .lo-sum .ov-grid.is-band>.ov-metric:nth-child(odd){border-left:0}
  .lo-patrol .lo-sum .ov-grid.is-band>.ov-metric:nth-child(n+3){border-top:1px solid var(--border)}
  .lo-patrol .lo-frow{flex-direction:column;gap:0;padding:0}
  .lo-patrol .lo-frow-teach{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-5) var(--sp-4)}
}