@charset "utf-8";
/* RA8 -- 설정 › 조직 (계정 · 역할, 부서, 시스템 등록) and 설정 › 운영 › 관리 이력 (리디자인 명세 9.4). The parts are
   redesign-rf1.css's (lx-); these are the screens' own few rules, every class "ra8-". Colours are style.css's tokens;
   words in a state colour take its -text token. */

/* The frame's main gives the page its one margin (main.lx-page 24/28/40, redesign-rf2.css); the screen's own wrap adds none. */
.ra8-page{padding:0;gap:16px}
/* A tab's body (members.js data-mb-body) holds the page's rows: the same 16px between them (UR31-10b u19: 첫 줄 and 찾기 touched). */
.ra8-page>[data-mb-body]{display:flex;flex-direction:column;gap:16px}
.ra8-first{gap:10px 12px;align-items:center}
.ra8-first .lx-lede{min-width:min(100%,180px)}
.ra8-tools{gap:8px;align-items:center}
/* The own account's 나 tag (members.js selfTag) sits under the name at its own width, not across the cell. */
.ra8-members-row [data-mb-self="row"]{align-self:flex-start}
/* A find box takes the room its row has, as 기기's does (시안 v24 .find.grow, UR31-10b). */
.ra8-find{flex:1 1 300px;min-width:200px}
.ra8-info{margin-left:2px}

/* Tables: their columns (명세 6.6: an name cell of two lines, numbers right, no cell that scrolls). */
/* 계정, 관리 이력 and 시스템 등록 are RF1's narrow lists (.lx-t-cols): beside a panel the .lx-drop cells leave the row. */
.ra8-members{--lx-cols:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1fr);--lx-cols-narrow:minmax(0,1.6fr) minmax(0,1.1fr) minmax(64px,.6fr)}
.ra8-company-role{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.7fr)}
.ra8-companies-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,.8fr)}
.ra8-units-row{grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) minmax(0,.6fr)}
/* (명세 5절: what a page wider than a 1440px window's adds goes first to the column that is cut. 관리 이력's 대상 and
   시스템 등록's 연결 기준 take several of every px a row has over its width there (914px, read as 916 and under) --
   3.5 and 4, so a 1680px window's row already gives them their whole line -- up to 420px and 430px, before the
   other columns share the rest; at 916px and under the columns are as they were. PC3 10-13: 대상 on two lines in
   346px and 연결 기준 cut at 372 of 398px with 540px and 640px of their tables unused; an1 10-13: whole at 400px
   and 410px in 1920 and 2560, still cut at 1680 with two of every px.) */
.ra8-audit{--lx-cols:minmax(108px,.8fr) minmax(0,1.2fr) minmax(60px,.5fr) minmax(0,1.2fr) minmax(clamp(0px,calc((100% - 916px) * 3.5),420px),1.3fr);--lx-cols-narrow:minmax(108px,.8fr) minmax(0,1.7fr) minmax(60px,.5fr)}
.ra8-audit-row{align-items:start}
.ra8-exports-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto}
.ra8-systems{--lx-cols:minmax(0,1.4fr) minmax(0,1fr) minmax(64px,.55fr) minmax(96px,.65fr) minmax(clamp(0px,calc((100% - 916px) * 4),430px),1.4fr);--lx-cols-narrow:minmax(0,1.6fr) minmax(0,1fr) minmax(64px,.6fr)}
.ra8-systems-row>:is(:nth-child(3),:nth-child(4)){white-space:nowrap}
.ra8-unit-name{padding-left:calc(var(--ra8-depth,0) * 18px)}
.ra8-when{white-space:nowrap}
.ra8-high{color:var(--ds-caution-text);font-weight:600}

/* A head is the press that sorts by it. */
.ra8-sort{display:inline-flex;align-items:center;gap:4px;margin:0;padding:0;border:0;border-radius:0;min-height:0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.ra8-sort:hover{background:color-mix(in srgb,var(--ds-accent) 8%,transparent);text-decoration:underline;text-underline-offset:3px}
.ra8-sort-mark{color:var(--ds-text)}
.ra8-sort-mark:empty{display:none}

/* 관리 이력: the time two pieces, who acted with their kind's mark, ids small. */
.ra8-open{display:inline-flex;flex-direction:column;align-items:flex-start;padding:0;border:0;background:transparent;color:var(--ds-text);font:inherit;text-align:left;cursor:pointer}
.ra8-open:hover{text-decoration:underline;text-underline-offset:3px}
.ra8-day,.ra8-clock{white-space:nowrap}
.ra8-clock{color:var(--ds-text-3);font-size:13px}
.ra8-who{display:inline-flex;align-items:flex-start;gap:6px;min-width:0}
.ra8-who>.lx-i{flex:none;margin-top:3px}
.ra8-who .ra8-ref{overflow-wrap:break-word}
.ra8-kind{color:var(--ds-text-3)}
.ra8-what{overflow-wrap:anywhere}
/* 관리 이력's 대상 in a row: its kind and name on one line, cut with … where the column is narrow (명세 6.6: a name
   cell does not fold) -- uiw1 10-13: the name on two lines in 26 of 68 rows at 1440 (221px) and in 46 at 1280. The
   whole name stands in the row's panel, where it folds as before.
   The box holds what it cuts (position:relative): the 대상's ID said to a screen reader alone (.sr-only, absolute) stood
   at the end of the uncut line and widened the page -- W1A 10-14 #audit-log +180px at 1280, +139px at 1440. */
.ra8-audit-row .ra8-what{position:relative;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra8-audit-row .ra8-what>.lx-sub{overflow:hidden;text-overflow:ellipsis}
.ra8-ref{color:var(--ds-text-3);font-size:12.5px}
.ra8-more-filters{position:relative}
.ra8-more-filters>summary{list-style:none;cursor:pointer}
.ra8-more-filters>summary::-webkit-details-marker{display:none}
/* The box opens under 거르기 toward the row's start: the button stands after the kind chips, near the page's right
   edge at 1280, and a box opened to the right ran off the side. */
.ra8-filter-box{position:absolute;z-index:5;top:calc(100% + 6px);right:0;min-width:300px;max-width:min(520px,calc(100vw - 32px));padding:12px;border:1px solid var(--ds-line);border-radius:10px;background:var(--ds-surface);box-shadow:var(--ds-shadow);gap:10px;align-items:flex-end}
.ra8-filter{flex:1 1 130px;min-width:0}
.ra8-filter>.lx-in{max-width:100%}
.ra8-export-say{white-space:nowrap}

/* The panel: its actions, its folds, the forms' picks. */
.ra8-panel{display:flex;flex-direction:column;gap:14px}
.ra8-acts{gap:8px}
.ra8-form-acts{gap:8px;margin-top:4px}
.ra8-fold>summary{cursor:pointer;color:var(--ds-text-2);font-size:13px;font-weight:600}
.ra8-fold>div,.ra8-fold>dl{margin-top:8px}
.ra8-fold .lx-mono{overflow-wrap:anywhere}
.ra8-fieldset{margin:0;padding:0;border:0;min-width:0}
.ra8-fieldset legend{padding:0;margin-bottom:6px}
.ra8-checks{display:flex;flex-direction:column;gap:6px}
.ra8-perms{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.ra8-pick{position:relative}
.ra8-pick>summary{list-style:none;cursor:pointer;width:100%;max-width:none;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ra8-pick>summary::-webkit-details-marker{display:none}
.ra8-pick-list{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:10px 12px;border:1px solid var(--ds-line);border-radius:8px;background:var(--ds-surface)}
.ra8-chosen{gap:6px}
.ra8-chosen .lx-x{margin-left:4px;padding:0 2px;border:0;background:transparent;color:var(--ds-text-3);font:inherit;cursor:pointer}
.ra8-unit-found{display:flex;flex-direction:column}
.ra8-unit-found .lx-li{display:flex;gap:8px;padding:6px 4px;border-bottom:1px solid var(--ds-line)}

/* 역할별 허용 동작: the roles beside the actions, or under each action in a narrow box; a role's name is never cut. */
.ra8-roles-wrap{overflow-x:auto;border:1px solid var(--ds-line);border-radius:10px;container:ra8-roles/inline-size}
.ra8-roles{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
/* Nine roles beside the actions fit the page at 1280 (766px); a narrower box stacks them (below), and only roles past
   the nine would move sideways, the actions staying. */
.ra8-roles td{height:46px}
.ra8-roles th,.ra8-roles td{padding:9px 8px;border-bottom:1px solid var(--ds-line);text-align:left;vertical-align:middle;background:var(--ds-surface)}
.ra8-roles thead th{color:var(--ds-text-3);font-size:13px;font-weight:500;min-width:62px;word-break:keep-all}
.ra8-roles tbody tr:last-child>*{border-bottom:0}
.ra8-roles .ra8-roles-act{position:sticky;left:0;z-index:1;min-width:168px;padding-left:12px;font-weight:500;color:var(--ds-text);box-shadow:1px 0 0 var(--ds-line)}
.ra8-roles thead .ra8-roles-act{color:var(--ds-text-3)}
/* A box narrower than the nine roles beside the actions take (726px, with room for a wider font; a phone's 356px)
   stands each action as its own block with every role under it, the role's name (data-mb-role-name) beside its 허용
   or –: nothing scrolls sideways and no cell is left out. The column heads stay for a screen reader. */
@container ra8-roles (max-width:759px){
  .ra8-roles,.ra8-roles tbody{display:block}
  .ra8-roles thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .ra8-roles tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:2px 16px;padding:10px 12px;border-bottom:1px solid var(--ds-line);background:var(--ds-surface)}
  .ra8-roles tbody tr:last-child{border-bottom:0}
  .ra8-roles tbody tr>*{border-bottom:0}
  .ra8-roles tbody .ra8-roles-act{position:static;grid-column:1/-1;min-width:0;padding:0 0 4px;box-shadow:none}
  .ra8-roles tbody td{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:4px 0}
  .ra8-roles tbody td::before{content:attr(data-mb-role-name);min-width:0;color:var(--ds-text-2);font-size:13px;overflow-wrap:anywhere}
  .ra8-roles tbody td>*{flex:none}
}
.ra8-company-roles{margin-top:8px}

@media (max-width:900px){
  .ra8-members,.ra8-audit,.ra8-systems{--lx-cols:minmax(0,1fr);--lx-cols-narrow:minmax(0,1fr)}
  .ra8-members-row,.ra8-company-role,.ra8-companies-row,.ra8-units-row,.ra8-audit-row,.ra8-exports-row,.ra8-systems-row{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .lx-tr.lx-th:is(.ra8-members-row,.ra8-company-role,.ra8-companies-row,.ra8-units-row,.ra8-audit-row,.ra8-exports-row,.ra8-systems-row){display:flex;flex-wrap:wrap;gap:4px 14px}
  .ra8-find{flex:1 1 100%}
  .ra8-filter-box{position:static;min-width:0;box-shadow:none}
  .ra8-export-say{white-space:normal}
}