/* 회원 통합 관리 전용. 셸/①~④/운영 통계의 스타일을 바꾸지 않는다. */
#view-users .member-visuals { display: grid; gap: 16px; min-width: 0; }
#view-users .member-viz-heading, #view-users .member-chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
#view-users .member-viz-heading h4 { margin: 2px 0 5px; font-size: 24px; line-height: 1.4; color: var(--text-pure); }
#view-users .member-viz-eyebrow { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--neon-cyan); }
#view-users .member-viz-note, #view-users .member-viz-source { margin: 0; color: var(--text-sub); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
#view-users .member-viz-source { font-size: 12px; }
#view-users .member-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#view-users .member-kpi { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; padding: 16px; text-align: left; border: 1px solid var(--border-box-purple); border-radius: 14px; background: var(--bg-card-inner); color: var(--text-pure); font-family: var(--font-main); }
#view-users button.member-kpi { cursor: pointer; transition: border-color 160ms, background-color 160ms; }
#view-users .member-kpi[aria-pressed=true], #view-users button.member-kpi:hover { border-color: var(--neon-cyan); background: color-mix(in srgb, var(--neon-cyan) 6%, var(--bg-card-inner)); }
#view-users .member-kpi-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
#view-users .member-viz-icon { display: block; width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
#view-users .member-kpi-value { display: block; font-size: clamp(24px, 2.5vw, 36px); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#view-users .member-kpi-unit { margin-left: 5px; font-size: 14px; font-weight: 500; color: var(--text-sub); }
#view-users .member-kpi-note { font-size: 12px; line-height: 1.6; color: var(--text-sub); }
#view-users .member-viz-grid { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.25fr); gap: 14px; }
#view-users .member-viz-card { min-width: 0; padding: 18px; border: 1px solid var(--border-box-purple); border-radius: 14px; background: var(--bg-card-inner); }
#view-users .member-viz-card h5 { margin: 0 0 8px; color: var(--text-pure); font-size: 16px; line-height: 1.5; }
#view-users .member-tone-real { --member-series: var(--neon-cyan); }
#view-users .member-tone-sample { --member-series: var(--neon-purple); }
#view-users .member-size-rows { display: grid; gap: 14px; margin-top: 24px; }
#view-users .member-size-row { display: grid; grid-template-columns: 95px minmax(0, 1fr) 60px; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text-pure); cursor: pointer; font: 600 13px/1.5 var(--font-main); }
#view-users .member-size-row[aria-pressed=true] { border-color: var(--member-series); }
#view-users .member-size-row:hover { background: color-mix(in srgb, var(--member-series) 7%, transparent); }
#view-users .member-size-label { text-align: left; }
#view-users .member-size-row strong { text-align: right; font-size: 15px; font-variant-numeric: tabular-nums; }
#view-users .member-size-rail, #view-users .member-provider-rail { position: relative; display: block; height: 10px; border-radius: 10px; background: color-mix(in srgb, var(--text-sub) 12%, transparent); }
#view-users .member-size-bar, #view-users .member-provider-bar { display: block; height: 100%; border-radius: inherit; background: var(--member-series, var(--neon-cyan)); transform-origin: left; }
#view-users .member-size-bar::after { content: ''; display: block; position: absolute; left: 100%; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--member-series); transform: translate(-50%, -50%); }
#view-users .member-size-bar { position: relative; }
#view-users .member-size-bar[style="width: 0%;"]::after { display: none; }
#view-users .member-size-axis { display: flex; justify-content: space-between; margin: 10px 74px 20px 109px; color: var(--text-sub); font-size: 11px; font-variant-numeric: tabular-nums; }
#view-users .member-periods { display: flex; gap: 4px; }
#view-users .member-periods button { min-height: 34px; padding: 4px 9px; font-size: 12px; }
#view-users .member-trend-highlight { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 14px 0 0; }
#view-users .member-trend-highlight strong { font-size: 18px; color: var(--text-pure); }
#view-users .member-join-chart { display: block; width: 100%; min-height: 150px; margin-top: 4px; overflow: visible; }
#view-users .member-chart-grid { stroke: var(--border-box-purple); stroke-width: 1; }
#view-users .member-chart-text { fill: var(--text-sub); font: 13px var(--font-main); }
#view-users .member-chart-bar { fill: var(--member-series); transform-box: fill-box; transform-origin: bottom; }
#view-users .member-chart-legend { display: flex; gap: 14px; margin: 0 0 9px 0; font-size: 12px; }
#view-users .member-chart-legend span { color: var(--member-series); }
#view-users .member-trend-footer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
#view-users .member-date-detail { margin: 0; font-size: 12px; color: var(--text-sub); font-variant-numeric: tabular-nums; }
#view-users .member-date-select { min-height: 36px; min-width: 0; max-width: 100%; padding: 5px; font-size: 12px; }
#view-users .member-viz-unavailable { margin: 24px 0; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
#view-users .member-provider-card { padding: 12px 18px; }
#view-users .member-provider-card summary { cursor: pointer; color: var(--text-pure); font-size: 14px; font-weight: 700; line-height: 1.6; }
#view-users .member-provider-card[open] > .member-viz-note { margin-top: 10px; }
#view-users .member-provider-list { display: grid; gap: 14px; list-style: none; margin: 16px 0 6px; padding: 0; }
#view-users .member-provider-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr) 60px 130px; align-items: center; gap: 12px; color: var(--text-pure); font-size: 13px; }
#view-users .member-provider-list small { color: var(--text-sub); }
#view-users .member-list-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
#view-users .member-list-heading h4 { margin: 0; font-size: 18px; }
#view-users .members-controls .members-label-icon { display: none; }
#view-users .members-controls { padding: 12px; border-radius: 10px; background: var(--bg-card); }
#view-users .members-manager-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 192px; }
#view-users .members-manager-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#view-users .members-table th:first-child { width: 32%; }
#view-users .members-table th:nth-child(2) { width: 20%; }
#view-users .members-table th:nth-child(3) { width: 20%; }
#view-users .members-table th:nth-child(4) { width: 28%; }
#view-users .members-table td { padding-top: 14px; padding-bottom: 14px; }
#view-users .members-row { cursor: default; }
#view-users .members-name-button { display: inline-flex; align-items: center; gap: 8px; text-align: left; border: 0; background: none; color: var(--text-pure); padding: 4px 0; cursor: pointer; font: inherit; }
#view-users .member-row-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--neon-purple) 12%, var(--bg-card-inner)); color: var(--text-pure); font-size: 14px; }
#view-users .members-page-controls { justify-content: flex-end; }
#view-users .members-list-count { margin-right: auto; color: var(--text-sub); font-size: 13px; }
#view-users .member-visuals button:focus-visible, #view-users .member-visuals summary:focus-visible, #view-users .member-visuals select:focus-visible, #view-users .members-name-button:focus-visible { outline: 3px solid var(--neon-cyan); outline-offset: 3px; }
#view-users .member-visuals[data-motion=on] .member-size-bar, #view-users .member-visuals[data-motion=on] .member-provider-bar { animation: member-bar-in 480ms ease-out both; }
#view-users .member-visuals[data-motion=on] .member-chart-bar { animation: member-chart-in 500ms ease-out both; }
#view-users .member-visuals[data-motion=on] .member-kpi-value { animation: member-value-in 360ms ease-out both; }
#view-users .members-manager-dialog[open] { animation: member-dialog-in 180ms ease-out; }
@keyframes member-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes member-chart-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes member-value-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes member-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1200px) {
  #view-users .member-viz-grid { grid-template-columns: minmax(0, 1fr); }
  #view-users .member-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #view-users .member-viz-heading h4 { font-size: 21px; }
  #view-users .member-viz-card { padding: 14px; }
  #view-users .member-kpi-grid { gap: 8px; }
  #view-users .member-kpi { padding: 12px; gap: 8px; }
  #view-users .member-kpi-top { flex-wrap: wrap; font-size: 12px; gap: 5px; }
  #view-users .member-kpi-value { font-size: 28px; }
  #view-users .member-kpi-note { font-size: 11px; }
  #view-users .member-size-row { grid-template-columns: 80px minmax(0, 1fr) 46px; gap: 5px; font-size: 12px; }
  #view-users .member-size-row strong { font-size: 13px; }
  #view-users .member-size-axis { margin-left: 89px; margin-right: 55px; }
  #view-users .member-chart-heading { gap: 4px; }
  #view-users .member-provider-list li { grid-template-columns: 55px minmax(0, 1fr) 50px; gap: 8px; }
  #view-users .member-provider-list small { grid-column: 2 / -1; }
  #view-users .members-controls { padding: 10px; }
  #view-users .members-controls > label { flex: 1 1 100%; margin-left: 0; }
  #view-users .members-controls .members-filter-label, #view-users .members-controls .members-size-label { flex: 1 1 95px; }
  #view-users .members-controls > button { width: 100%; }
  #view-users .members-controls select { width: 100%; }
  #view-users .members-manager-tabs { gap: 4px; }
  #view-users .members-manager-tabs .members-label-icon { display: none; }
  #view-users .members-manager-tab { font-size: 12px; }
  #view-users .members-table td { padding-top: 0; padding-bottom: 0; }
  #view-users .members-page-controls { gap: 6px; }
  #view-users .members-list-count { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #view-users .member-visuals *, #view-users .members-manager-dialog[open] { animation: none !important; transition: none !important; }
}