@charset "utf-8";
/* RA11 (리디자인 명세 8.18, 8.19, 9.4): 설정 › 알림 (notify-inbox.js, issue-integrations.js), 설정 › 보존
   (insights-retention.js), the bell panel's rows inside the frame's .lx-pop (RF2) and 내게 온 안내 on 내 사용량.
   Only the screens' own layout is here (.ra11-); every part is redesign-rf1.css's (.lx-), the frame's redesign-rf2.css's.
   Colours are the tokens' (명세 4절): a state colour on words is its -text token. */

/* ---------- 설정 › 알림 ---------- */
.ra11-notify{display:flex;flex-direction:column;gap:16px;min-width:0}
.ra11-first{align-items:flex-start;gap:12px}
.ra11-first .lx-lede{flex:1 1 360px;min-width:0}
.ra11-body{min-width:0}
.ra11-card .lx-card-h .lx-lbl{min-width:0}
/* 받는 곳 and 알림 종류 are two cards a gap apart, as the screen's other cards (PC2 P37: they touched). */
.ra11-dest{gap:16px}
.ra11-list{gap:12px}
.ra11-filters{gap:8px}
.ra11-tools{gap:8px}
.ra11-find{flex:0 1 280px;min-width:180px}
.ra11-pick{display:inline-flex}
.ra11-empty-next{margin:12px 0 0;text-align:center}

/* the tables: a severity's bars, a name of two lines, a moment that does not wrap */
.ra11-history th:first-child,.ra11-history td.ra11-sev{width:44px}
.ra11-history td:nth-child(2){max-width:0;width:100%}
.ra11-history .lx-nm,.ra11-notices .lx-nm{display:block}
.ra11-when{white-space:nowrap;color:var(--ds-text-2)}
.ra11-notices td:first-child{max-width:0;width:44%}
.ra11-places td:first-child{width:22%}
.ra11-places td:nth-child(2){width:18%}
.ra11-places td.lx-r{width:1%;white-space:nowrap}
.ra11-places tr[data-ra11-place="portal"]{cursor:default}
.ra11-kinds td:first-child{width:40%}

/* the panel's parts */
.ra11-fold summary{cursor:pointer;color:var(--ds-text-3);font-size:13px}
.ra11-fold[open] summary{margin-bottom:6px}
.ra11-fold .lx-sub{overflow-wrap:anywhere}
.ra11-states{gap:8px}
.ra11-members{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.ra11-member,.ra11-members>li{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-bottom:1px solid var(--ds-line)}
.ra11-members>li:last-child{border-bottom:0}
.ra11-steps{display:flex;flex-direction:column;gap:6px;margin:0;padding:0 0 0 18px;color:var(--ds-text-2);font-size:14px}
.ra11-steps [data-state="unknown"],.ra11-steps [data-state="waiting"]{color:var(--ds-text-3)}
.ra11-steps [data-state="failed"]{color:var(--ds-danger-text)}

/* 받는 곳's panel: the form, the reading back of states, the failed sends */
.ra11-form{gap:12px}
.ra11-field{gap:4px}
.ra11-map{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0}
.ra11-set{gap:8px;min-width:0;margin:0;padding:0;border:0}
.ra11-map-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ra11-pair{white-space:nowrap}
.ra11-failed{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--ds-line)}
.ra11-failed-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.ra11-failed-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--ds-line)}
.ra11-failed-row:last-child{border-bottom:0}
.ra11-failed-row .lx-cell{flex:1;min-width:0}
.ra11-off{padding-top:12px;border-top:1px solid var(--ds-line)}
.ra11-at{white-space:nowrap}

/* ---------- 알림 패널 (inside the frame's #bell-list.lx-pop-list, which scrolls: RF2) ---------- */
.ra11-bell{display:flex;flex-direction:column;min-width:0}
.ra11-bell-h{position:sticky;top:0;z-index:1;display:flex;justify-content:flex-end;padding:8px 16px;background:var(--ds-surface)}
.ra11-bell .lx-note{margin:0 16px 8px}
.ra11-bell .lx-empty{width:auto;margin:8px 16px}
.ra11-bell-list{display:flex;flex-direction:column}
/* the frame's row (button.lx-ni) with the moment as a third column; the view's choice beside the frame's title */
.ra11-bell .lx-ni{grid-template-columns:22px minmax(0,1fr) auto}
.ra11-bell .lx-ni:not(.lx-new) .lx-pipdot{visibility:hidden}
.ra11-bell-seg{margin-left:auto}
.ra11-bell-what{display:flex;flex-direction:column;min-width:0}
.ra11-bell-at{white-space:nowrap}
/* the foot is the pop-over's last line: its own ground follows the pop-over's round lower corners (14px, less its line) */
.ra11-bell-foot{position:sticky;bottom:0;padding:10px 16px;border-top:1px solid var(--ds-line);border-radius:0 0 13px 13px;background:var(--ds-surface)}

/* ---------- 설정 › 보존 ---------- */
.ra11-retention{gap:16px}
.ra11-control{flex-wrap:nowrap;gap:8px;justify-content:flex-end}
.ra11-number{width:96px;text-align:right}
.ra11-control>.ra11-number+span{min-width:2.5em}
.ra11-check{width:16px;height:16px;margin:0;accent-color:var(--ds-accent)}
.ra11-reach{max-width:560px}
.ra11-effect{display:flex;flex-direction:column;gap:6px}
.ra11-cut{display:flex;flex-wrap:wrap;gap:4px 12px}
.ra11-cut>span{min-width:140px;color:var(--ds-text-2)}
.ra11-ledger{margin-top:8px}
.ra11-purposes{gap:8px 20px}
.ra11-left .lx-stack{gap:6px}
.ra11-events{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;color:var(--ds-text-2);font-size:14px}

/* ---------- 내게 온 안내 (내 사용량) ---------- */
.ra11-mine{display:flex;flex-direction:column;gap:12px}
.ra11-mine-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.ra11-mine-item{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--ds-line)}
.ra11-mine-item:last-child{border-bottom:0}
.ra11-mine-text{margin:0;color:var(--ds-text-2);white-space:pre-line}

@media (max-width:900px){
  .ra11-find{flex:1 1 100%}
  .ra11-map-row{grid-template-columns:minmax(0,1fr)}
  .ra11-control{justify-content:flex-start}
}

/* 설정 본문 약 720px (명세 9.2): every part of 데이터 보관 is the one width, forms and tables alike (R5 u21: 720 above, 926 below). */
.ra11-card[data-retention-part]{max-width:720px}