/* A menu's top summary as a picture (summary-graphic.js, U2 10-09): the ring or band of shares with its legend, the
   state chips and the figure cards. Colours are portalUi's tones (data-tone; 미관리 is danger). Every value is a
   design token (--ds-*). A phone (390) has one column; nothing is under 13px. */
.sg{display:grid;gap:var(--ds-space-3);margin:0 0 var(--ds-space-4)}
.sg-body{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ds-space-4);align-items:start}
.sg-body:not(:has(.sg-ratio)),.sg-body:has(>.sg-ratio[data-kind="bar"]){grid-template-columns:minmax(0,1fr)}
.sg-side{display:grid;gap:var(--ds-space-3);min-width:0}
.sg-ratio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ds-space-2) var(--ds-space-4);align-items:center;min-width:0}
.sg-ratio[data-kind="bar"]{grid-template-columns:minmax(0,1fr)}
.sg-ratio-label{grid-column:1/-1;margin:0;font-size:var(--ds-fs-md);font-weight:700;color:var(--ds-text)}
.sg-tone[data-tone]{--sg-tone:var(--ds-text-2);--sg-text:var(--ds-text-2);--sg-soft:var(--ds-surface-2)}
.sg-tone[data-tone="ok"]{--sg-tone:var(--ds-ok);--sg-text:var(--ds-ok-text);--sg-soft:var(--ds-ok-soft)}
.sg-tone[data-tone="info"]{--sg-tone:var(--ds-info);--sg-text:var(--ds-info-text);--sg-soft:var(--ds-info-soft)}
.sg-tone[data-tone="caution"]{--sg-tone:var(--ds-caution);--sg-text:var(--ds-caution-text);--sg-soft:var(--ds-caution-soft)}
.sg-tone[data-tone="danger"]{--sg-tone:var(--ds-danger);--sg-text:var(--ds-danger-text);--sg-soft:var(--ds-danger-soft)}
.sg-tone[data-tone="unknown"]{--sg-tone:var(--ds-unknown);--sg-text:var(--ds-unknown-text);--sg-soft:var(--ds-unknown-soft)}
.sg-tone[data-tone="blocked"]{--sg-tone:var(--ds-blocked);--sg-text:var(--ds-blocked);--sg-soft:var(--ds-surface-2)}

/* (A part's tone sets its colours -- the fill of a mark, the words in that state (its -text token, legible on white
   and on the soft ground) and the soft ground: .sg-tone is on every part that has one.) */
/* The ring: 132px on a wide screen, its figure in the middle. */
.sg-donut{position:relative;display:grid;place-items:center;width:132px;height:132px;margin:0}
.sg-donut>svg{display:block;width:100%;height:100%}
.sg-ring{fill:none;stroke:var(--ds-surface-3);stroke-width:4.4}
.sg-donut[data-summary-empty] .sg-ring{stroke:var(--ds-line-strong);stroke-dasharray:1.2 1.2}
.sg-slice{fill:none;stroke:var(--sg-tone);stroke-width:4.4}
.sg-slice[data-tone="unknown"]{stroke:var(--ds-unknown-2)}
.sg-donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.2;pointer-events:none}
.sg-donut-center b{font-size:var(--ds-fs-xl);font-weight:800;color:var(--ds-text)}
.sg-donut-center small{font-size:var(--ds-fs-xs);color:var(--ds-text-2)}

/* The band: one bar, each part its share; the legend under it. */
.sg-band{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--ds-surface-3)}
.sg-band[data-summary-empty]{background:repeating-linear-gradient(135deg,var(--ds-surface-3) 0 6px,var(--ds-surface-2) 6px 12px)}
.sg-band-part{display:block;height:100%;background:var(--sg-tone)}
.sg-band-part[data-tone="unknown"]{background:repeating-linear-gradient(135deg,var(--ds-unknown) 0 6px,var(--ds-unknown-2) 6px 12px)}
.sg-legend{display:grid;gap:2px;margin:0;padding:0;list-style:none;min-width:0}
.sg-ratio[data-kind="bar"] .sg-legend{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sg-legend-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--ds-space-2);width:100%;padding:4px 6px;border:0;border-radius:var(--ds-radius-xs);background:transparent;color:var(--ds-text);font:inherit;font-size:var(--ds-fs-sm);font-weight:500;text-align:left;text-decoration:none}
:is(a,button).sg-legend-item:hover{background:var(--ds-surface-2)}
.sg-legend-item[aria-pressed="true"]{background:var(--sg-soft);box-shadow:inset 0 0 0 1px var(--sg-tone)}
.sg-swatch{width:10px;height:10px;border-radius:3px;background:var(--sg-tone)}
.sg-legend-item[data-tone="unknown"] .sg-swatch{background:var(--ds-unknown-2)}
.sg-legend-label{min-width:0;color:var(--ds-text-2)}
.sg-legend-value{font-weight:700;font-variant-numeric:tabular-nums}

/* A state's chip: its colour, its words, its figure. */
.sg-chips{display:flex;flex-wrap:wrap;gap:var(--ds-space-2)}
.sg-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid transparent;border-radius:999px;background:var(--sg-soft);color:var(--sg-text,var(--sg-tone));font:inherit;font-size:var(--ds-fs-sm);font-weight:700;white-space:nowrap;text-decoration:none}
.sg-chip small{font-weight:500;color:var(--ds-text-2)}
.sg-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--sg-tone);flex:none}
.sg-chip[data-tone="unknown"] .sg-chip-dot{background:var(--ds-unknown-2)}
:is(a,button).sg-chip:hover{border-color:var(--sg-tone)}
.sg-chip[aria-pressed="true"]{border-color:var(--sg-tone);box-shadow:inset 0 0 0 1px var(--sg-tone)}

/* A figure's card: the icon in its tone, the words, the large number, a note. */
.sg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--ds-space-2)}
.sg-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon label" "icon value" "note note";align-items:center;column-gap:var(--ds-space-3);row-gap:0;padding:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius);background:var(--ds-surface);color:var(--ds-text);font:inherit;font-weight:400;text-align:left;text-decoration:none}
:is(a,button).sg-card:hover{border-color:var(--ds-line-strong);background:var(--ds-surface-2)}
.sg-card[aria-pressed="true"]{border-color:var(--sg-tone);box-shadow:inset 0 0 0 1px var(--sg-tone)}
.sg-card>.sg-icon{grid-area:icon;align-self:start}
.sg-card-label{grid-area:label;font-size:var(--ds-fs-sm);color:var(--ds-text-2)}
.sg-card-figure{grid-area:value;display:flex;align-items:baseline;gap:2px;min-width:0}
.sg-card-value{font-size:var(--ds-fs-2xl);line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--ds-text);font-variant-numeric:tabular-nums}
.sg-card:not([data-tone="neutral"]) .sg-card-value{color:var(--sg-text,var(--sg-tone))}
.sg-card-figure .sg-unit{font-size:var(--ds-fs-md);font-weight:600;font-style:normal;color:var(--ds-text-2)}
.sg-card-mark,.sg-card-note{grid-area:note;font-size:var(--ds-fs-xs);color:var(--ds-text-2)}
.sg-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--ds-radius-s);background:var(--sg-soft,var(--ds-surface-2));color:var(--sg-text,var(--ds-text-2));flex:none}
.sg-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sg-unknown{font-size:var(--ds-fs-md);font-weight:600;color:var(--ds-unknown-text);border-bottom:1px dotted currentColor}

@media(max-width:700px){
  .sg-body,.sg-ratio{grid-template-columns:minmax(0,1fr)}
  .sg-donut{justify-self:center;width:120px;height:120px}
  .sg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-card{padding:var(--ds-space-2) var(--ds-space-3)}
}
.sg-fallback{font-size:var(--ds-fs-sm);font-weight:500;border-bottom:0}
.sg-chip strong{font-weight:800;font-variant-numeric:tabular-nums}
/* A screen's own control around a static part (its testid and data-* its readers keep): the control's box is cleared
   and the part inside shows the focus and the pressed state. */
.sg-chips>.sg-press{display:inline-flex;width:auto}
.sg-press{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer;border-radius:var(--ds-radius)}
/* (a link's underline is drawn by the link over everything inside it: no part that is or sits in a link has one) */
:is(a.sg-card,a.sg-chip,a.sg-legend-item,a.sg-press){text-decoration:none}
.sg-press:focus-visible{outline:2px solid var(--ds-focus,var(--ds-accent));outline-offset:2px}
.sg-press:hover>.sg-card{border-color:var(--ds-line-strong);background:var(--ds-surface-2)}
.sg-press:hover>.sg-chip{border-color:var(--sg-tone)}
:is(.sg-press[aria-pressed="true"]>.sg-card,.sg-press[aria-pressed="true"]>.sg-chip,.sg-card[data-pressed="true"],.sg-chip[data-pressed="true"]){border-color:var(--sg-tone);box-shadow:inset 0 0 0 1px var(--sg-tone)}