/* The 운영/사람 group of AI 사용 인사이트 (insights-people.js): what only its tabs draw, from design tokens. */
.people-card { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-s); padding: var(--ds-space-3); margin: var(--ds-space-2) 0; background: var(--ds-surface); }
.people-card h4 small { font-weight: 400; color: var(--ds-text-2); }
.people-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ds-space-3); }
.people-split h5 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
/* The inbox scrolls in its own box, so the channel list below it stays in reach. A row is six places -- what
   (how severe, its name, its kind), whom, on what, when, its state, its actions -- at the same x on every row,
   under a line that names them; a time is never broken in the middle. The places are as wide as what they hold
   and sit together from the left, so a row is read across without a gap; only the actions stand at its end. */
.people-alerts { list-style: none; margin: 0; max-height: 28rem; overflow-y: auto; scrollbar-gutter: stable; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-s); padding: 0 var(--ds-space-3); }
/* More rows below the box's edge are shown by a shadow there, so a row cut by the edge reads as more to scroll.
   The shadow is dark on either theme (the text colour made it a light band on a dark one). */
.people-alerts { background: linear-gradient(transparent, var(--ds-surface) 70%) bottom / 100% 28px no-repeat local, radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--ds-nav-bg) 28%, transparent), transparent) bottom / 100% 12px no-repeat scroll var(--ds-surface); }
.people-part { margin: var(--ds-space-5) 0 var(--ds-space-2); }
.people-alerts li { display: grid; grid-template-columns: minmax(0, 24rem) minmax(0, 12rem) minmax(0, 16rem) 10.5rem 4.5rem minmax(6.5rem, 1fr); align-items: center; gap: var(--ds-space-1) var(--ds-space-3); padding: var(--ds-space-2) 0; border-bottom: 1px solid var(--ds-line); font-size: var(--ds-fs-sm); }
.people-alerts li:last-child { border-bottom: 0; }
.people-alerts .pa-cols { position: sticky; top: 0; z-index: 1; padding: var(--ds-space-2) 0 var(--ds-space-1); background: var(--ds-surface); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: 600; }
/* The name starts at the same x on every row: the unread mark keeps its place on a read row, and a severity is two letters. */
.people-alerts .pa-cols > :first-child { padding-left: calc(8px + var(--ds-space-2)); }
.people-alerts .pa-what { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ds-space-2); }
.people-alerts .pa-what::before { content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; }
.people-alerts li[data-alert-state="open"] .pa-what::before { background: var(--ds-accent); }
.people-alerts li:not([data-alert-state="open"]) .pa-what b { font-weight: 500; }
.people-alerts .pa-what small, .people-alerts .pa-who, .people-alerts .pa-basis { color: var(--ds-text-2); }
.people-alerts .pa-who, .people-alerts .pa-basis { min-width: 0; overflow-wrap: anywhere; }
.people-alerts .pa-basis { font-variant-numeric: tabular-nums; }
.people-alerts .pa-basis[data-alert-basis="known"] { color: var(--ds-text); }
.people-alerts .pa-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ds-text-2); }
.people-alerts .pa-state { white-space: nowrap; font-weight: 600; }
.people-alerts li:not([data-alert-state="open"]) .pa-state { font-weight: 400; color: var(--ds-text-2); }
/* The actions are quiet until the pointer or the focus is on one: what a row says is read before what can be done to it. */
.people-alerts .pa-actions { display: flex; gap: var(--ds-space-1); justify-content: flex-end; }
.people-alerts .pa-actions button { border-color: transparent; background: none; color: var(--ds-text-2); }
.people-alerts .pa-actions button:hover, .people-alerts .pa-actions button:focus-visible { border-color: var(--ds-line-strong); color: var(--ds-text); }
.people-alerts li[data-alert-state="dismissed"] { color: var(--ds-text-3); }
/* The channels' state: sending off as a tag, then how many are set, read before the sentence under them. */
.pa-delivery { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.pa-delivery b { color: var(--ds-text); font-variant-numeric: tabular-nums; }
.pa-channels { margin: var(--ds-space-2) 0 0; padding-left: var(--ds-space-4); font-size: var(--ds-fs-sm); }
.insights-panel > .notify-tabs { margin: 0 0 var(--ds-space-2); }
.insights-panel > .ui-frame + .people-part { margin-top: var(--ds-space-4); }
/* A narrow panel: what it is on the first line, then whom it is about and what it was raised on, each on its
   own line under its name (the columns' names are gone here, and every row's values start at the same place),
   then when and its state with the actions at the line's end. The line of names is for the columns only. */
@media (max-width: 1180px) {
  .people-alerts li { grid-template-columns: max-content minmax(0, 1fr) auto; }
  .people-alerts .pa-cols { display: none; }
  .people-alerts .pa-what { grid-area: 1 / 1 / 2 / 4; }
  .people-alerts .pa-who { grid-area: 2 / 1 / 3 / 4; }
  .people-alerts .pa-basis { grid-area: 3 / 1 / 4 / 4; }
  .people-alerts .pa-who, .people-alerts .pa-basis { display: grid; grid-template-columns: 3em minmax(0, 1fr); align-items: baseline; }
  .people-alerts .pa-who::before { content: "대상"; }
  .people-alerts .pa-basis::before { content: "근거"; }
  .people-alerts .pa-who::before, .people-alerts .pa-basis::before { color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: 600; }
  .people-alerts .pa-when { grid-area: 4 / 1; min-width: 9.5em; }
  .people-alerts .pa-state { grid-area: 4 / 2; }
  .people-alerts .pa-actions { grid-area: 4 / 3; }
  .people-alerts .pa-actions button { padding-inline: var(--ds-space-2); }
}
[data-incident] { background: var(--ds-unknown-soft); }
/* A link to another screen is the screen's name in the Portal's link colour, underlined only under the pointer or focus. */
.people-link { color: var(--ds-accent-text); font-weight: 600; text-decoration: none; }
.people-link:hover, .people-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* 묶기 is a choice of a few words: its field is as wide as its longest choice, beside its name -- not the card's
   width (gw-ops-g6-r2). */
.insights-by { display: inline-flex; align-items: center; gap: var(--ds-space-2); width: auto; margin: 0 0 var(--ds-space-2); }
.insights-by > select { width: auto; min-width: 9rem; margin: 0; }

/* 데이터 처리 지역 is eleven columns: a count's name breaks under itself and an id breaks where it must, so the table
   is as wide as its panel on a desktop and goes on sideways in its frame only where it cannot be (c3.40 WebKit 1440). */
.insights-table.people-regions th { white-space: normal; word-break: keep-all; vertical-align: bottom; }
/* An id (the application, the model, the connection) breaks where it must but keeps a readable width; a count is never broken. */
.insights-table.people-regions td:nth-child(-n+3) { min-width: 9rem; overflow-wrap: anywhere; }
.insights-table.people-regions td:nth-child(n+4):nth-child(-n+9) { white-space: nowrap; }
/* 지연·장애: what each of the table's three times spans, on one line over it (name, then the span), and under a
   figure measured on fewer attempts than the row counts, how many -- small and quiet, on its own line. */
.people-clocks { display: flex; flex-wrap: wrap; gap: 2px var(--ds-space-5); margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.people-clocks > div { display: flex; gap: var(--ds-space-2); min-width: 0; }
.people-clocks dt { flex: none; font-weight: 600; color: var(--ds-text); }
.people-clocks dd { margin: 0; }
.insights-table .people-of { display: block; font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
/* The latency table's heads are two words each (공급자 지연 · p50/p95): where the table is narrower than its seven
   heads on one line, a head breaks between them. Kept on one line (the shared head, insights.css) they asked for
   829px, and the table ran sideways on an 860px window. */
.insights-table.people-latency th { white-space: normal; word-break: keep-all; }
.insights-table.people-latency th:nth-child(2) { white-space: nowrap; }
/* P1-06: an alert raised to be looked at first -- beside its severity, never in its place (as 알림함's .ntf-priority). */
.people-alerts .pa-priority { background: none; color: var(--ds-accent-text); outline: 1px dashed var(--ds-accent); outline-offset: -1px; cursor: help; }