/* RA6 (redesign 10-12 spec 8.8): AI Governance › 정책 and AI 업무. The parts are RF1's (redesign-rf1.css, `lx-`);
   this file lays out the screens around them -- the list's column beside its panel (틀 B), the tables, the panels'
   forms -- with the tokens only (no colour written here). Loaded after redesign-rf1.css, so a part is never redrawn
   here: anything a part lacks is asked of RF1. */

/* ---- the screen: the list's column and the panel beside it ---- */
.ra6-screen{min-height:calc(100vh - 140px);align-items:stretch}
/* In the frame the margin is the frame's main's (24/28/40): the screen's own page adds none (under 900px; over it
   the screen takes the main's whole box -- see 'beside the list'). */
.ra6-screen>.lx-page.ra6-page{gap:16px;padding:0}
.ra6-screen [hidden]{display:none !important}
.ra6-head{display:flex;flex-direction:column;gap:12px}
.ra6-lede{margin:0;word-break:keep-all}
.ra6-lede a.ra6-figure{color:inherit;text-decoration:none}
.ra6-lede a.ra6-figure:hover b{text-decoration:underline}
.ra6-lede-wait{display:block;width:min(420px,70%);height:20px}
.ra6-band{display:flex;flex-direction:column;gap:8px}
.ra6-legend{gap:6px 18px;font-size:var(--ds-fs-xs)}
.ra6-legend-go{color:inherit;text-decoration:none}
.ra6-legend-go:hover .lx-st{text-decoration:underline}
.ra6-zero,.ra6-link.ra6-zero{color:var(--ds-text-3)}
/* the first line and, at its right, ⋯ › 기본값 (UR24: no default line over the list) */
.ra6-first{align-items:center;flex-wrap:nowrap}
.ra6-first>.ra6-lede{flex:1 1 auto;min-width:0}
.ra6-link{display:inline;padding:0;border:0;background:none;color:var(--ds-accent-text);font:inherit;font-weight:500;cursor:pointer;text-align:left}
.ra6-link:hover{background:none;text-decoration:underline}
.ra6-link[disabled]{color:var(--ds-muted);cursor:not-allowed;text-decoration:none}
.ra6-views{gap:10px;min-width:0}
.ra6-panels,.ra6-view,.ra6-part{display:flex;flex-direction:column;gap:12px;min-width:0}
.ra6-tools{gap:8px 10px}
.ra6-chips{gap:6px}
.ra6-find{flex:1 1 220px;max-width:340px}
.ra6-order .lx-in{width:auto;min-width:160px;height:34px}
.ra6-said{margin:0}
/* The shared ? (.help-trigger, app.js's bubble on hover, focus and a press) beside a grey line: the line's size, clear of
   its last word. */
.ra6-said .ra6-info{width:18px;height:18px;min-width:18px;margin-left:4px}
.ra6-signed-out{padding:24px 28px}

/* ---- tables: no vertical lines, 1px rows of 46px and more, the head in 13px grey (spec 6.6) ---- */
.ra6-table-wrap{min-width:0;overflow-x:auto}
.ra6-table{width:100%;border-collapse:collapse;font-size:var(--ds-fs-sm)}
.ra6-table th{padding:8px 6px;border-bottom:1px solid var(--ds-line);background:transparent;color:var(--ds-text-3);font-size:var(--ds-fs-xs);font-weight:500;text-align:left;white-space:nowrap}
.ra6-table td{height:46px;padding:9px 6px;border-bottom:1px solid var(--ds-line);color:var(--ds-text);vertical-align:middle;word-break:keep-all;overflow-wrap:break-word}
/* A reported 0 in a cell is the grey 0, not body ink: .ra6-zero alone (0,1,0) lost to the cell rule above (0,1,1). */
.ra6-table td.ra6-zero{color:var(--ds-text-3)}
.ra6-table tbody tr:last-child td{border-bottom:0}
.ra6-table td .lx-sub{display:block}
.ra6-row{cursor:pointer}
.ra6-row:hover td{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.ra6-row.lx-is-sel td{border-bottom-color:transparent;background:color-mix(in srgb,var(--ds-accent) 12%,transparent)}
.ra6-row.lx-is-sel td:first-child{border-radius:8px 0 0 8px}
.ra6-row.lx-is-sel td:last-child{border-radius:0 8px 8px 0}
.ra6-cell-name{min-width:180px;max-width:320px;overflow-wrap:anywhere}
.ra6-name{display:block;max-width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ra6-name .lx-nm{display:block}
.ra6-name:hover{background:none}
.ra6-name:hover .lx-nm{text-decoration:underline}
.ra6-name:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px;border-radius:4px}
.ra6-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ra6-table th.ra6-num{text-align:right}
.ra6-when{white-space:nowrap;font-variant-numeric:tabular-nums}
.ra6-acts{width:1%;white-space:nowrap;text-align:right}
.ra6-reason{max-width:240px}
.ra6-reason .lx-ell{display:block}
/* Who asked is one long run for some accounts: it breaks inside its cell, the words unchanged. */
.ra6-table td[data-label="요청"]{min-width:140px;max-width:240px;overflow-wrap:anywhere}
.ra6-targets{min-width:150px;max-width:280px}
.ra6-table td[data-label="정책"]{min-width:150px}
.ra6-table td[data-gov-reach="allow"]{min-width:220px}
.ra6-sort{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
.ra6-sort:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent)}
.ra6-sort-mark{font-size:11px}
.ra6-cell-wait{display:inline-block;width:64px;height:12px}
.ra6-figure-button{font-variant-numeric:tabular-nums;font-weight:600}
.ra6-target{display:inline-flex;align-items:baseline;gap:4px;margin-right:6px;word-break:keep-all}
.ra6-inline{display:inline !important}
.ra6-pin,.ra6-kin{color:var(--ds-text-3)}
.ra6-marks{display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ra6-standing{display:flex;flex-direction:column;gap:2px}
.ra6-empty{display:flex;flex-direction:column;gap:8px}
.ra6-empty-next{margin:0;text-align:center}
:not(.ra6-empty)>.ra6-empty-next{margin-top:8px}
.ra6-more{margin:0}

/* A narrow list keeps every value (명세 6.6, RF1's .lx-drop / .lx-dropsum): a cell marked .lx-drop leaves its row
   while this screen's panel stands open beside the list or the window is under 1100px, and the name's grey line
   .lx-dropsum says it then. The screen's panel stays in the page while closed, so it is its open mark that tells.
   Over 1440px the page beside the panel is often as wide as a window that draws the list whole: the screen's split
   then says data-lx-roomy (portal-ui.js, redesign-rf1.css) and the list beside the panel is the whole one -- every
   cell, no grey line saying a cell again, the heads and names on one line. It is never said at 1440 and under.
   :where keeps each rule's weight as it was (AI 업무's open mark is on the view, over its split). */
.ra6-table td .lx-dropsum{display:none}
:is([data-detail-open],[data-uc-detail-open]) .ra6-table:where(.ra6-screen:not([data-lx-roomy]) *) .lx-drop{display:none}
:is([data-detail-open],[data-uc-detail-open]) .ra6-table:where(.ra6-screen:not([data-lx-roomy]) *) td .lx-dropsum{display:block}
/* 명세 6.6: the name's grey line is one line -- the kind, then the folded cells' summary after a ' · ', cut with an ellipsis
   where it is long (a head and its cells beside the panel never break it into more lines). */
.ra6-subline{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ra6-subline>.lx-sub{display:inline}
.ra6-subline>.lx-dropsum::before{content:" · "}
:is([data-detail-open],[data-uc-detail-open]) .ra6-table:where(.ra6-screen:not([data-lx-roomy]) *) td .ra6-subline .lx-dropsum{display:inline}
/* Beside the panel a head and a time may take two lines, a long name breaks, and an allow line's people need no
   room of their own. */
:is([data-detail-open],[data-uc-detail-open]) .ra6-table:where(.ra6-screen:not([data-lx-roomy]) *) :is(th,.ra6-when){white-space:normal}
:is([data-detail-open],[data-uc-detail-open]) .ra6-table:where(.ra6-screen:not([data-lx-roomy]) *) td[data-gov-reach="allow"]{min-width:0}
:is([data-detail-open],[data-uc-detail-open]) .ra6-table:where(.ra6-screen:not([data-lx-roomy]) *) .ra6-cell-name{min-width:140px}
:is([data-detail-open],[data-uc-detail-open]) .ra6-uc:where(:not([data-lx-roomy])) :is(.uc-owner,.uc-state){white-space:normal}
/* The rules table's cells beside a panel, over 1440px too: a roomy page still has the panel's 575px beside it, and the whole
   table (nowrap heads, an allow line's 220px) is wider than what is left (1920: 885px in 868px, the last two columns
   scrolled out of sight). Heads take two lines and the allow line needs no room of its own, as they do under 1440px;
   no cell is dropped. */
:is([data-detail-open],[data-uc-detail-open]) .ra6-table.ra6-rules :is(th,.ra6-when){white-space:normal}
:is([data-detail-open],[data-uc-detail-open]) .ra6-table.ra6-rules td[data-gov-reach="allow"]{min-width:0}
:is([data-detail-open],[data-uc-detail-open]) .ra6-table:where(.ra6-screen:not([data-lx-roomy]) *) .ra6-name .lx-nm{white-space:normal;overflow-wrap:anywhere}
@media (max-width:1100px){
  .ra6-table .lx-drop{display:none}
  .ra6-table td .lx-dropsum{display:block}
  .ra6-table td .ra6-subline .lx-dropsum{display:inline}
}
/* A choice card's words are the design's 14px (the older sheet's label rule made them 13px). */
.ra6-panel .lx-choice{font-size:14px}

/* ---- the panel (spec 5 .aside): its parts stacked, its forms in fields ---- */
.ra6-side{position:relative}
.ra6-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.ra6-close{flex:none}
.ra6-kv{margin:0}
.ra6-kv dd{margin:0;min-width:0;overflow-wrap:anywhere;word-break:keep-all}
.ra6-kv dd .lx-sub{display:block}
.ra6-where{margin:0}
.ra6-need{color:var(--ds-danger-text);font-weight:500}
.ra6-field-problem{color:var(--ds-danger-text);font-size:var(--ds-fs-xs)}
.ra6-problem{margin:0;color:var(--ds-danger-text);font-size:var(--ds-fs-xs)}
.ra6-problem:empty{display:none}
.ra6-text{height:auto;min-height:72px;padding:8px 10px;resize:vertical}
/* A list of several to choose opens nothing: no chevron. */
.ra6-multi{height:auto;min-height:120px;padding:6px;background-image:none}
/* A choice the answer gave no name (gov-rules.js nameless, paintChoice): its 줄표 grey in the list and as the chosen one. */
.ra6-panel select.lx-na,.ra6-panel option.lx-na{color:var(--ds-text-3)}
.ra6-choices-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ra6-gap{gap:12px}
.ra6-scopes{display:flex;flex-direction:column;gap:6px;margin:4px 0 0;padding:0;border:0}
.ra6-scopes legend{margin-bottom:4px}
.ra6-steps,.ra6-plain{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.ra6-steps li{display:flex;flex-direction:column;gap:2px}
.ra6-steps .lx-sub{display:block}
.ra6-devices li{font-size:var(--ds-fs-xs)}
.ra6-people .lx-sub{display:block}
.ra6-history{margin:0;padding:0;list-style:none}
.ra6-history-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.ra6-raw summary{color:var(--ds-text-3);font-size:var(--ds-fs-xs);cursor:pointer}
.ra6-raw p{margin:6px 0 0}
.ra6-codes{display:flex;flex-wrap:wrap;gap:6px}
.ra6-review{margin-right:8px}
.ra6-more-menu{position:relative}
.ra6-more-menu>summary{list-style:none}
.ra6-more-menu>summary::-webkit-details-marker{display:none}
.ra6-menu{position:absolute;left:0;right:auto;z-index:5;display:flex;flex-direction:column;gap:4px;min-width:140px;margin-top:4px;padding:6px;border:1px solid var(--ds-line);border-radius:var(--ds-radius-s);background:var(--ds-surface);box-shadow:var(--ds-shadow)}
/* In a case's detail the ⋯ sits at the panel's right edge: its menu opens leftwards so 감사 내보내기 stays on screen at any width. */
.ra6-uc .ra6-more-menu>.ra6-menu{left:auto;right:0}
.ra6-scopes-line{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--ds-line)}
.ra6-scopes-line .lx-row{gap:8px 14px}
.ra6-scopes-input{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---- AI 업무 (use-cases.js): the same list beside its wide panel ---- */
.ra6-uc .uc-detail-host{min-width:0}
.ra6-uc-head{align-items:flex-start;gap:12px 16px}
.ra6-uc-head .uc-summary{min-height:0;justify-content:flex-start}
.ra6-uc-head .uc-total{color:var(--ds-text)}
.ra6-uc-head .uc-total b{font-size:inherit;font-weight:700;letter-spacing:inherit}
.ra6-uc .uc-finder{padding:0;border:0}
.ra6-uc .uc-shown{padding:0}
.ra6-uc .uc-caveat{padding:8px 0 0;border:0}
.ra6-uc .uc-none{padding:16px 0}
.ra6-uc .uc-case{color:var(--ds-text);font-weight:600;text-decoration:none;word-break:keep-all;overflow-wrap:anywhere}
.ra6-uc .uc-case:hover{text-decoration:underline}
.ra6-uc .uc-case:focus-visible{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);text-decoration:underline}
.ra6-uc .uc-state,.ra6-uc .uc-owner,.ra6-uc .uc-kind{white-space:nowrap}
.ra6-uc td.uc-owner{max-width:200px;overflow:hidden;text-overflow:ellipsis}
.ra6-uc td.uc-where{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra6-uc .uc-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:6px}
.ra6-uc .uc-facts p{margin:0 0 4px}
.ra6-uc .uc-now{margin:0}
.ra6-uc .uc-actions{margin-top:0}
.ra6-uc .uc-history{padding:8px 0}
.ra6-uc .uc-reference{overflow-wrap:anywhere}
.ra6-uc [data-uc-detail-title]:focus{outline:none}
.ra6-uc [data-uc-detail-title]:focus-visible,.ra6-uc [data-uc-form-title]:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px}
.ra6-uc [data-uc-form-title]:focus{outline:none}
.ra6-uc-section{display:flex;flex-direction:column;gap:8px}
.ra6-uc-section h3{margin:0;font-size:var(--ds-fs-lg);font-weight:650}
.ra6-uc-actions{gap:8px}
.ra6-uc-link-row{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--ds-line)}
.ra6-uc-link-row:last-child{border-bottom:0}
.ra6-uc-form{display:flex;flex-direction:column;gap:14px}
.ra6-uc-form .uc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* A label's words run in one line above its field (a label of two parts, 'a · b', is one line too). */
.ra6-uc-form label{display:block;margin:0;color:var(--ds-text-2);font-size:var(--ds-fs-xs);font-weight:600}
.ra6-uc-form label>:is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){display:block;margin-top:6px}
.ra6-uc-form label.uc-check{display:flex;align-items:center;gap:8px;font-weight:500}
.ra6-uc-form input:not([type="checkbox"]):not([type="radio"]),.ra6-uc-form select,.ra6-uc-form textarea{width:100%;min-height:36px;padding:0 10px;border:1px solid var(--ds-line-strong);border-radius:8px;background-color:var(--ds-surface);color:var(--ds-text);font:400 14px var(--ds-font)}
/* (background-color, not the shorthand: a select keeps the sheet's chevron, with room for it.) */
.ra6-uc-form select{padding-right:30px}
/* 책임자 찾기: the people found are a menu under the field (RF1's .lx-more-item rows), one to a line. */
.ra6-uc-form .uc-found{top:calc(100% + 4px);flex-direction:column;flex-wrap:nowrap;gap:0;max-height:240px;padding:4px;overflow:auto;border:1px solid var(--ds-line);border-radius:10px}
.ra6-uc-form .uc-found .lx-more-item{flex:none;white-space:normal;overflow-wrap:anywhere}
.ra6-uc-form .uc-found>[data-uc-owner-refused]{padding:6px 10px;font-weight:400}
.ra6-uc-form [aria-invalid="true"]{border-color:var(--ds-danger)}
.ra6-uc-form textarea{min-height:72px;padding:8px 10px}
.ra6-uc-form fieldset{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0;padding:10px 12px;border:1px solid var(--ds-line);border-radius:8px}
.ra6-uc-form .uc-asset,.ra6-uc-form .uc-requirement{grid-column:1/-1;padding:10px 12px;border:1px solid var(--ds-line);border-radius:8px}

/* ---- beside the list (over 900px): the screen is the main's whole box (its margin back, the list's page keeping
   24/28/40), so the panel stands at the main's edges -- under the tabs, to its right and bottom -- and takes the
   shared widths as the frame's own split would (RF1 v1.8: .lx-aside 348px, .lx-aside-w clamp(440px,100% - 520px,500px));
   it never goes under the list and stays in sight while the list is scrolled, scrolling in itself ---- */
/* The panel starts under the top line (69px), never over it (PC3 10-15, X81: its top stood 20px above the line's foot at
   1280 and 1440). It stood where the screen starts because the panel was as tall as the screen, leaving the sticky top no
   room to move it down: the screen is now as tall as the panel's least height and the panel's bottom margin gives that room
   (as .ctrl-aside's does). The window's height is in the frame's zoomed pixels, as .ctrl-aside's is. */
@media (min-width:901px){
  .ra6-screen{--ra6-h:calc(100vh - 78px);flex-wrap:nowrap;align-items:flex-start;margin:-24px -28px -40px;min-height:var(--ra6-h)}
  :root .ra6-screen{--ra6-h:calc(100vh / var(--lx-scale, 1) - 78px)}
  .ra6-screen>.lx-page.ra6-page{flex:1 1 0;padding:24px 28px 40px}
  .ra6-screen>.ra6-side{flex-grow:0;flex-shrink:0;position:sticky;top:69px;min-height:var(--ra6-h);max-height:calc(var(--ra6-h) + 6px);margin-bottom:-40px;overflow:auto}
}

/* ---- narrow (spec 5: under 900px the panel covers the screen; 390px is tried) ---- */
@media (max-width:900px){
  .ra6-screen .ra6-side:not([hidden]){position:fixed;inset:0;z-index:40;max-width:none;overflow:auto}
  .ra6-cell-name{min-width:140px}
  .ra6-uc-form .uc-fields{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ra6-table thead{display:none}
  .ra6-table,.ra6-table tbody,.ra6-table tr,.ra6-table td{display:block;width:100%}
  .ra6-table tr{padding:10px 0;border-bottom:1px solid var(--ds-line)}
  .ra6-table td{height:auto;padding:3px 0;border:0;text-align:left}
  .ra6-table td[data-label]::before{content:attr(data-label);display:block;color:var(--ds-text-3);font-size:var(--ds-fs-xs)}
  .ra6-table td[data-none]{display:none}
  .ra6-num{text-align:left}
  .ra6-choices-2{grid-template-columns:1fr}
}