/* RM2 Control (리디자인 명세 8.9): controls-console.js의 화면 배치. 부품은 redesign-rf1.css의 lx-이고, 이 파일은
   이 화면만의 자리 잡기다(접두사 ctrl-). 색과 크기는 토큰(--ds-*)만 쓴다. */

/* ---- 틀 C: 왼쪽 목록 + 오른쪽 Control ------------------------------------------------------------------------ */
.ctrl-frame{flex-wrap:nowrap;align-items:flex-start;column-gap:28px}
.ctrl-list{position:sticky;top:0;flex:0 0 348px;max-height:100vh;overflow:auto;gap:0}
.ctrl-main{flex:999 1 560px;min-width:0}
/* A wide window gives the list the width its names need (X432). */
@media (min-width:1900px){.ctrl-list{flex-basis:440px}}
.ctrl-tools{display:flex;flex-direction:column;gap:10px;padding:0 4px 12px}
.ctrl-tools .lx-find{min-width:0}
.ctrl-tabs{align-self:flex-start}
.ctrl-page>.ctrl-tabs{margin-bottom:-4px}
.ctrl-tools-order{flex-wrap:nowrap;gap:8px}
.ctrl-chips{gap:6px}
.ctrl-order{height:34px}
/* select:is(.lx-in,.lx-sel) (RF1: flex-shrink:0, max-width:100%) outweighs a single class: the order list is scoped to its line
   so it shrinks and stops at 170px, leaving the line's right end to Control 만들기. */
.ctrl-tools-order .ctrl-order{flex:1 1 auto;min-width:0;max-width:170px}
/* The same list on a tools line (예외 규칙, 버전) is no wider than its choices: .lx-in's width:100% took the line (P1). */
.ctrl-tools-row .ctrl-order{width:auto;max-width:170px}
.ctrl-tools-more{gap:8px;flex-wrap:wrap}
.ctrl-count{margin:0}
.ctrl-rows{display:flex;flex-direction:column;gap:2px}
.ctrl-row-name{display:flex;align-items:center;gap:6px;min-width:0}
.ctrl-row .lx-sub{display:flex;align-items:center;min-width:0}
.ctrl-row .lx-sub .lx-st{color:inherit}
.ctrl-dot{white-space:pre;color:var(--ds-text-3)}
.ctrl-loading{display:flex;flex-direction:column;gap:12px}
.ctrl-back{display:none}

/* ---- 틀 B(템플릿, 무시 규칙): 목록 + 오른쪽 패널 --------------------------------------------------------------- */
.ctrl-split{flex-wrap:nowrap;align-items:flex-start;column-gap:28px}
/* The frame's main gives the page its padding (24 / 28 / 40): this screen's own pages add none over it. */
.ctrl-page{flex:999 1 560px;min-width:0;padding:0}
.ctrl-first{gap:10px}
/* The template row's title keeps 160px at least; the long 기본 Control button wraps under it instead of squeezing it (B03). */
.ctrl-first{flex-wrap:wrap}
.ctrl-first>.lx-lede.lx-grow{flex:1 1 160px;min-width:0}
.ctrl-first>:not(.lx-lede){flex:0 1 auto}
.ctrl-tools-row{gap:10px}
.ctrl-table{width:100%;border-collapse:collapse}
.ctrl-table th{text-align:left}
.ctrl-table td{vertical-align:middle}
.ctrl-link{max-width:100%}
.ctrl-when{color:var(--ds-text-3);font-size:var(--ds-fs-xs);white-space:nowrap}
.ctrl-target-find{width:220px;max-width:100%}

/* ---- 고르기 창(거르기, ⋯) ------------------------------------------------------------------------------------- */
.ctrl-pop{position:relative}
.ctrl-pop>summary{list-style:none;cursor:pointer}
.ctrl-pop>summary::-webkit-details-marker{display:none}
.ctrl-pop-body{position:absolute;z-index:6;top:calc(100% + 6px);left:0;display:flex;flex-direction:column;gap:10px;min-width:220px;padding:12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);box-shadow:var(--ds-shadow-pop)}
/* An icon alone as a button (새로 고침, 다시 확인, ⋯): the look of a panel's 닫기, with a line where it stands among buttons. */

/* ---- 오른쪽 본문 ------------------------------------------------------------------------------------------------ */
.ctrl-detail-split{flex-wrap:nowrap;align-items:flex-start}
/* What stands in the Control is laid out by the Control's own width, not the window's: beside the list at 1024px it
   has a phone's width (346px), and its panel or a wider window gives it more. */
.ctrl-detail{flex:999 1 560px;min-width:0;padding:0;container:ctrl-detail/inline-size}
.ctrl-head .lx-lede{min-width:10ch;margin:0}
/* the head's name and its meta line are 8px apart (v24 Control.html 116; CC-M02), not the shared stack's 12px */
.ctrl-head.lx-stack{gap:8px}
/* The name keeps its own width with the state after it, and what is done with the Control is one group at the
   line's right: where the line is short the whole group goes under the name, never one button alone. */
.ctrl-acts,.ctrl-do{flex-wrap:nowrap;gap:10px}
.ctrl-acts{margin-left:auto}
@container ctrl-detail (min-width:560px){.ctrl-head>.lx-row>.lx-lede{flex:0 1 auto}}
.ctrl-meta{gap:6px 14px;font-size:var(--ds-fs-xs)}
.ctrl-condition{margin:0;font-size:var(--ds-fs-lg);font-weight:500}
.ctrl-tags{gap:6px;margin-top:10px}
.ctrl-tags .lx-tag{height:auto;min-height:22px;white-space:normal}
.ctrl-fold{margin-top:12px}
.ctrl-fold>summary{color:var(--ds-text-2);font-size:var(--ds-fs-xs);font-weight:600;cursor:pointer}
.ctrl-query{margin:0 0 6px;padding:10px 12px;border-radius:var(--ds-radius-s);background:var(--ds-surface-2);overflow-wrap:anywhere}
.ctrl-kv{grid-template-columns:84px minmax(0,1fr);margin:0}
.ctrl-kv dd{margin:0}
.ctrl-said{margin:0;color:var(--ds-text-2)}
.ctrl-target-tools{gap:10px;margin-bottom:10px}
/* A head that orders the targets: the head's own words, pressed, with the mark of its order. */
.ctrl-sort{display:inline-flex;align-items:center;gap:4px;color:inherit;font:inherit;white-space:nowrap;cursor:pointer}
.ctrl-sort:hover{color:var(--ds-text)}
.ctrl-sort-mark{min-width:.8em;color:var(--ds-text-2)}
/* The targets' columns share the card's width, a long name or reason cut with …: the table never pushes the page wide. */
/* The 30-day trend of what is found: the line in the colour of the count beside it. */
.ctrl-trend{display:inline-flex;align-items:center}
.ctrl-trend polyline{fill:none;stroke:var(--ds-danger);stroke-width:1.5}
.ctrl-trend circle{fill:var(--ds-danger)}
.ctrl-targets-table{table-layout:fixed}
.ctrl-targets-table th:nth-child(1){width:24%}
.ctrl-targets-table th:nth-child(2){width:17%}
.ctrl-targets-table[data-view="Match"] th:nth-child(4){width:17%}
.ctrl-targets-table[data-view="Match"] th:nth-child(5){width:132px}
/* A wide window: 소유자 and 근거 take what 대상 and the date no longer need (X255). */
@media (min-width:1700px){
  .ctrl-targets-table th:nth-child(1){width:20%}
  .ctrl-targets-table th:nth-child(2){width:22%}
  .ctrl-targets-table[data-view="Match"] th:nth-child(4){width:12%}
}
/* When it was first found is read after the name and the reason, in the grey of a lesser value; where it takes two
   lines the day keeps one and the time the other. */
.ctrl-targets-table td.ctrl-when{color:var(--ds-text-3);font-size:var(--ds-fs-xs);white-space:normal}
.ctrl-when-part{white-space:nowrap}
.ctrl-targets-table .lx-cell{max-width:100%}
/* A row's data-kind mark (the shared badge) is as wide as its words, under the name or beside a state. */
.ctrl-frame .lx-cell>.prov-badge,[data-ctrl-aside] .lx-cell>.prov-badge,.ctrl-targets .prov-badge{align-self:flex-start;flex:none}
/* What a target was found by is read after its name: the words' own colour and weight, the link's colour under the
   pointer or the keys. The row's one link in the accent is its issue. */
.ctrl-targets-table .ctrl-why{color:var(--ds-text);font-weight:400}
.ctrl-targets-table .ctrl-why:is(:hover,:focus-visible){color:var(--ds-accent-text)}
.ctrl-reasons{gap:6px}
.ctrl-idle b{font-size:var(--ds-fs-lg)}
.ctrl-idle-go{justify-content:center;margin-top:14px}
.ctrl-stats{justify-content:center;gap:6px 20px;margin:12px 0 0}
[data-ctrl-aside] .ctrl-stats{justify-content:flex-start;margin:0}
.ctrl-stat{display:inline-flex;align-items:baseline;gap:6px}
.ctrl-stat b{font-size:var(--ds-fs-lg);font-weight:700}
.ctrl-targets{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}

/* ---- 오른쪽 패널 ------------------------------------------------------------------------------------------------ */
/* Wide: the panel stands beside what opened it and stays in view while the page scrolls. Under 900px the parts' own
   rule draws it over the screen from the right (redesign-rf1.css). */
/* The panel stands at the body's right edge and from its top (시안 .split > .page + .aside): out over the frame's own
   page padding (main.lx-page 24 / 28), which this screen's split sits inside. */
/* It stays in view to the page's end: it reaches down through the page's own bottom margin and is a little
   shorter than the window, so the end of what holds it never pushes its head out of view. It stands under the frame's
   sticky header (.lx-top, 60px; the frame is zoomed by --lx-scale, so the window is 100vh / scale high): a panel as
   tall as the window started 60px down and ended below the window, then slid up under that header (cq1 b182 at
   1440x900: bottom 957 of 900; top 3 at the end of the page). */
@media(min-width:901px){:root .ctrl-aside{--ctrl-aside-h:calc(100vh / var(--lx-scale, 1) - 72px)}
.ctrl-aside{--ctrl-aside-h:calc(100vh - 72px);position:sticky;top:69px;align-self:stretch;max-height:var(--ctrl-aside-h);overflow:auto;min-height:var(--ctrl-aside-h);margin-top:-24px;margin-right:-28px;margin-bottom:-40px}}
.ctrl-aside .lx-aside-t{margin:0}
.ctrl-aside .lx-kv{margin:0}
.ctrl-aside .lx-kv dd{margin:0}
/* The panel is a column beside the Control while the Control keeps 560px of words beside it; the wide one gives way
   first, from 500px down to the narrow one's 348px (명세 5절, 10-16: PC3 X85, 2560 stood over the Control that had 624px
   left). Only where even the narrow panel leaves the Control under 560px (the split is under 908px) the panel stands over
   the right edge of the Control (taking no width, so nothing moves), below the top line, and stays in view as the page
   scrolls; the wide one is then 500px, as at 1440. The split's own width decides, not the window's: the menu, the list
   and the frame's scale all change what is left. A panel beside a table (템플릿, 무시 규칙) is a column at the shared part's
   width, narrow or wide: the table drops its lesser cells (the shared part's .lx-drop) and keeps the rest in view. */
.ctrl-detail-split{container:ctrl-split/inline-size}
@media(min-width:901px){
  .ctrl-detail-split>.ctrl-aside.lx-aside-w{flex-basis:clamp(348px,100% - 560px,500px)}
}
@media(min-width:901px){
  @container ctrl-split (max-width:907.99px){
    .ctrl-detail-split>.ctrl-aside{flex:0 0 348px;width:348px;max-width:none;height:var(--ctrl-aside-h);margin-left:-348px;z-index:4;box-shadow:var(--ds-shadow-pop)}
    .ctrl-detail-split>.ctrl-aside.lx-aside-w{flex-basis:500px;width:500px;margin-left:-500px}
  }
}

/* ---- 양식(패널 안) ---------------------------------------------------------------------------------------------- */
.ctrl-form{gap:14px}
.ctrl-form .lx-in{max-width:100%}
.ctrl-area{height:auto;min-height:72px;padding:8px 10px;resize:vertical}
.ctrl-rule-targets{min-width:0;margin:0;padding:0;border:0}
.ctrl-rule-radios{gap:6px 18px}
.ctrl-rule-picker{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--ds-line);border-radius:var(--ds-radius)}
.ctrl-rule-find{align-items:flex-end;gap:8px}
.ctrl-rule-found{display:flex;flex-direction:column;gap:2px;max-height:220px;margin:0;padding:0;overflow:auto;list-style:none}
.ctrl-rule-found label{display:flex;align-items:center;gap:8px;min-height:30px;cursor:pointer}
.ctrl-rule-found input{flex:none;width:16px;height:16px;margin:0;padding:0;border-radius:0;accent-color:var(--ds-accent)}
.ctrl-rule-picked{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ctrl-rule-chip{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:0 4px 0 10px;border-radius:999px;background:var(--ds-surface-3);font-size:var(--ds-fs-xs)}
.ctrl-rule-chip[data-rule-chip-still]{padding-right:10px}
.ctrl-rule-chip small{color:var(--ds-text-3)}
.ctrl-rule-expiry{gap:8px}
.ctrl-rule-state{display:flex;flex-direction:column;gap:10px}
.ctrl-rule-said{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:10px;background:var(--ds-surface-2)}
.ctrl-rule-sentence,.ctrl-rule-impact,.ctrl-rule-ask,.ctrl-rule-memo{margin:0}
.ctrl-rule-impact{color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
.ctrl-rule-impact b{color:var(--ds-danger-text)}
.ctrl-rule-confirm{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius)}
.ctrl-rule-memo{display:flex;gap:10px;color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
.ctrl-rule-memo span{flex:none;color:var(--ds-text-3)}
.ctrl-rule-go{display:flex;flex-wrap:wrap;gap:8px}
.ctrl-rule-blocked{color:var(--ds-text-3);font-size:var(--ds-fs-xs)}

/* ---- 범위에서 기기 찾기(Gateway 정책 화면도 이 부품을 쓴다) ------------------------------------------------------ */
.ctrl-scope-find{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;color:var(--ds-text-2);font-size:var(--ds-fs-xs)}
.ctrl-scope-find>label{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin:0;font-weight:600}
.ctrl-scope-find>label small{color:var(--ds-text-3);font-weight:400}
.ctrl-scope-find>input[data-scope-find-text]{box-sizing:border-box;width:100%;height:36px;margin:0;padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:var(--ds-radius-s);background:var(--ds-surface);color:var(--ds-text);font:400 14px var(--ds-font)}
.ctrl-scope-chosen{color:var(--ds-text-3);white-space:nowrap}
.ctrl-scope-found{display:none;position:absolute;z-index:5;top:100%;left:0;box-sizing:border-box;width:max-content;min-width:100%;max-width:min(520px,90vw);margin-top:4px;padding:6px;border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);box-shadow:var(--ds-shadow-pop)}
.ctrl-scope-find:focus-within>.ctrl-scope-found:not(:empty){display:block}
.ctrl-scope-found button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:7px 10px;border:0;border-radius:var(--ds-radius-s);background:transparent;color:var(--ds-text);font:inherit;text-align:left;cursor:pointer}
.ctrl-scope-found button:hover,.ctrl-scope-found button:focus-visible,.ctrl-scope-found button[aria-selected="true"]{border:0;background:color-mix(in srgb,var(--ds-accent) 12%,transparent);color:var(--ds-text)}
.ctrl-scope-found button small{color:var(--ds-text-3)}
.ctrl-scope-head{display:block;padding:6px 10px;color:var(--ds-text-3)}
.ctrl-scope-refused:empty{display:none}
.ctrl-scope-refused{color:var(--ds-caution-text)}

/* ---- 좁은 화면(900px 아래): 목록과 Control이 따로 보인다(패널은 부품의 규칙대로 화면을 덮는다) ----------------------------------- */
@media(max-width:900px){
  .ctrl-frame,.ctrl-split,.ctrl-detail-split{flex-wrap:wrap}
  .ctrl-list{position:static;flex-basis:100%;max-height:none;border-right:0}
  .ctrl-frame[data-ctrl-view="controls"]>.ctrl-main{display:none}
  .ctrl-frame[data-ctrl-view="control-detail"]>.ctrl-list{display:none}
  .ctrl-back{display:inline-flex}
  .ctrl-target-find{width:100%}
}
/* A phone gives a template's name the room: what it looks at is said in its panel. */
@media(max-width:640px){.ctrl-templates-table :is(th,td):nth-child(2){display:none}}
/* A narrow Control (a phone, or beside the list under about 1240px) has one card to a line and keeps a target's name,
   what was found on it and its issue: whose it is and when it was first found are in the target's panel, and the
   issue's state takes a second line instead of being cut. Its head gives the name a line, then the two ways out and the short
   group from the left. (Reads of the copy: at 390px the 근거 column had no width left, 10-12; at 1024px
   the 탐지되면 card wrote a letter a line and 근거 stood at 0px, 10-13.) */
@container ctrl-detail (max-width:559px){
  .ctrl-acts{display:contents}
  .ctrl-head>.lx-row>.lx-lede{flex:1 1 12em}
  .ctrl-detail>.lx-cols{grid-template-columns:minmax(0,1fr)}
  .ctrl-targets-table :is(th,td):nth-child(2),.ctrl-targets-table[data-view="Match"] :is(th,td):nth-child(4){display:none}
  .ctrl-targets-table th:nth-child(1){width:36%}
  .ctrl-targets-table[data-view="Match"] th:nth-child(5){width:104px}
  .ctrl-targets-table .lx-st{white-space:normal}
}
/* A Control beside the list in a 1280px window (about 600px, 630px with its panel open; a 1440px window gives it
   762px): wider than a phone's, narrower than its head and its two cards were laid out for. The two cards share it
   evenly and the label column is as wide as its longest word, so what follows a detection is read in the lines it
   has at 1440px (PC eye 10-13 at 1280: 7:5 and an 84px label left the words 100px, the issue's sentence seven lines).
   Its head is the two lines it is at 1440px (PC3 look 10-13 at 1280: the group under the name and the facts on two
   lines stood 131.5px for 68px): the name's line keeps one button and ⋯, the other ways standing in ⋯
   (controls-console.js draws each there too), a long name is cut with … (its title says it whole), and the facts
   keep one line -- what has no room is counted on 외 N, which shows them all (접기 folds them again).
   Under 900px, where the Control stands without the list, nothing of this applies. */
.ctrl-menu .ctrl-more-also{display:none;text-decoration:none}
.ctrl-meta-more[hidden]{display:none}
@media(min-width:901px){
  @container ctrl-detail (min-width:560px) and (max-width:719px){
    .ctrl-detail>.lx-cols.lx-c-7-5{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .ctrl-detail>.lx-cols .ctrl-kv{grid-template-columns:72px minmax(0,1fr);column-gap:12px}
    .ctrl-head>.lx-row:not(.ctrl-meta){flex-wrap:nowrap}
    .ctrl-head>.lx-row>.lx-lede{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .ctrl-head>.lx-row>.lx-bdg{flex:none}
    .ctrl-acts[data-control-lead="revise"]>[data-act="issues"],.ctrl-acts>[data-act="search"],.ctrl-do>[data-act="evaluate"]{display:none}
    .ctrl-menu .ctrl-more-also{display:flex}
    .ctrl-acts[data-control-lead="issues"] .ctrl-more-also[data-act="issues"]{display:none}
    .ctrl-meta:not([data-meta-open]){position:relative;max-height:22px;overflow:hidden}
    .ctrl-meta[data-meta-more]:not([data-meta-open]){padding-right:48px}
    .ctrl-meta:not([data-meta-open])>.lx-lbl{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
    .ctrl-meta:not([data-meta-open])>.ctrl-meta-more{position:absolute;top:0;right:0;line-height:22px}
    .ctrl-meta-more{font-size:var(--ds-fs-xs);outline-offset:-2px}
  }
}