/* 관리자 탭(워크스페이스 관리자 — 멤버·결제·감사 로그) — 구조 층(옛 셸·새 셸 공용). 값은 전부 토큰이라 새 셸에선 framer.css 가 갈아 끼운 값을 그대로 받는다.
 *   Framer 전용 모양(알약·표면 단·여백 별칭)은 v2/admin.css 가 덮는다. 원시 색 0 — 성공/오류는 토스트(toast.js)가 말한다.
 *   2026-09-18 개편: docs/design/admin-uiux-audit-2026-09-18.md */

/* ── 틀: 좌측 서브내비 + 우측 패널 ── */
.admin-wrap { display: flex; gap: var(--sp-xl, 32px); align-items: flex-start; padding: var(--sp-lg, 24px); max-width: 1200px; margin: 0 auto; }
.admin-subnav { display: flex; flex-direction: column; gap: var(--sp-xxs, 4px); min-width: 148px; position: sticky; top: var(--sp-lg, 24px); }
/* ⚠️ .btn.X 로 특이도 2 필요: button.css 가 admin.css 보다 뒤에 로드된다(index.html). */
.btn.admin-subnav-btn {
  width: 100%; min-width: 0; height: auto; min-height: 36px; justify-content: flex-start; text-align: left;
  padding: var(--sp-xs) var(--sp-sm); border-radius: var(--r-md); border-color: transparent; color: var(--ink-48);
}
.btn.admin-subnav-btn:hover { background: var(--surface-1); color: var(--ink); transform: none; }
.btn.admin-subnav-btn:active { transform: none; }
.btn.admin-subnav-btn.is-active { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.admin-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-xl, 32px); }

/* ── 머리 · 섹션 — 제목은 한 단, 섹션은 그 아래 한 단 ── */
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.admin-head-text { display: flex; flex-direction: column; gap: var(--sp-xs); min-width: 0; max-width: 72ch; }
.admin-title { margin: 0; font-size: var(--fs-lead); line-height: 1.2; font-weight: 600; color: var(--ink); }
.admin-lede, .admin-sub { margin: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-48); }
.admin-head-actions { display: flex; gap: var(--sp-xs); align-items: center; }
.admin-section { display: flex; flex-direction: column; gap: var(--sp-sm); }
.admin-section-head { display: flex; flex-direction: column; gap: var(--sp-xxs); }
.admin-section-head--row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-wrap: wrap; }
.admin-section-title { margin: 0; font-size: var(--fs-tagline); line-height: 1.25; font-weight: 600; color: var(--ink); }
.admin-note { padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-80); font-size: var(--fs-caption); }
.admin-note.is-err { color: var(--danger); background: var(--danger-soft); }
.admin-empty { padding: var(--sp-lg) var(--sp-md); border-radius: var(--r-md); background: var(--surface-1); color: var(--ink-48); font-size: var(--fs-caption); text-align: center; }
.admin-results { display: flex; flex-direction: column; gap: var(--sp-lg); }

/* ── 상태 카드 — 격자라 마지막 줄 카드가 한 줄 통째로 늘어나지 않는다(전엔 flex-wrap 이라 6번째가 908px) ── */
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-sm); }
.admin-stat-val { font-size: var(--fs-lead); line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.admin-stat-key { font-size: var(--fs-caption); color: var(--ink-48); }

/* ── 폼 — 라벨 붙은 필드 · 한 줄 정렬은 아래끝 ── */
.admin-form { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: flex-end; }
.admin-field { display: flex; flex-direction: column; gap: var(--sp-xxs); min-width: 160px; }
.admin-field--grow { flex: 1 1 220px; }
.admin-field--user { flex: 1 1 280px; max-width: 420px; }
.admin-field-label { font-size: var(--fs-fine); font-weight: 500; color: var(--ink-48); }
.admin-input {
  height: 40px; box-sizing: border-box; padding: 0 var(--sp-sm); border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink); font: inherit; font-size: var(--fs-caption);
}
.admin-input::placeholder { color: var(--ink-48); }
/* 폼 한 줄의 버튼은 입력과 같은 높이 — 전엔 입력 36·버튼 28 이 한 줄에 섞여 기준선이 흔들렸다 */
:is(.admin-form, .admin-row-editor) > .btn { height: 40px; }

/* ── 사용자 행 — 이름 · uid · (오른쪽) 역할·동작. 행 편집기는 누를 때만 열린다 ── */
.admin-list { display: flex; flex-direction: column; gap: var(--sp-xs); }
.admin-row-wrap { display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--surface-1); }
.admin-list > .admin-row { border-radius: var(--r-md); background: var(--surface-1); }
.admin-row { display: flex; align-items: center; gap: var(--sp-sm); min-height: 52px; padding: var(--sp-xs) var(--sp-sm) var(--sp-xs) var(--sp-md); }
/* 뼈대(admin.js select — 탭 전환 대기) — 패널마다 모양이 다르지만 공통 기본은 이 목록 행. */
.skel-admin-rows { --skel-row-gap: var(--sp-xs); --skel-row-pad: var(--sp-xs) var(--sp-sm) var(--sp-xs) var(--sp-md); --skel-row-bg: var(--surface-1); --skel-row-r: var(--r-md); }
.skel-admin-rows .skel-row { min-height: 52px; }
.admin-row-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-xs); flex: none; }
.admin-row-editor { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md) var(--sp-md); border-top: 1px solid var(--hairline); }
.admin-row-editor[hidden] { display: none; }
.admin-user-email { display: inline-flex; align-items: center; gap: var(--sp-xs); min-width: 0; flex: 1 1 auto; font-weight: 500; }
.admin-user-ava { flex: none; }
.admin-user-email-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-role { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--sp-xs); border-radius: var(--r-sm); font-size: var(--fs-fine); color: var(--ink-80); background: var(--surface-2); }
.admin-role--admin { color: var(--ink); }

/* ── 두 칸 세그먼트(adminSegmented.js — 설정 공개 여부·요금 주기) — 선택 = 표면 단 ── */
.admin-seg { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--canvas); }
.admin-seg-btn {
  min-width: 64px; min-height: 32px; padding: 0 var(--sp-sm); border: 0; border-radius: calc(var(--r-md) - 3px);
  background: transparent; color: var(--ink-48); font: inherit; font-size: var(--fs-caption); font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.admin-seg-btn:hover:not(:disabled) { color: var(--ink); }
.admin-seg-btn[aria-pressed='true'] { background: var(--surface-3); color: var(--ink); cursor: default; }
.admin-seg-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.admin-seg-btn:focus-visible { outline: 2px solid var(--accent-focus); outline-offset: 1px; }

/* ── 표 — 구분선은 표 전용 토큰(--grid-line) · 숫자는 오른쪽 + 고정폭 ── */
.admin-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.admin-table th, .admin-table td { text-align: left; padding: var(--sp-xs) var(--sp-sm); border-bottom: 1px solid var(--grid-line); color: var(--ink); vertical-align: middle; }
.admin-table th { color: var(--ink-48); font-weight: 500; white-space: nowrap; border-bottom-color: var(--grid-line-strong); }
/* ui#4 — 행 머리(<th scope="row">, adminDom.table() rowHeader)는 열 머리(thead th)와 달리 그 행의 본문
   내용(항목명·워크스페이스명)이다 — 옅은 색·nowrap·굵기로 죽이지 않고 일반 td 와 같게 되돌린다. */
.admin-table th[scope='row'] { color: var(--ink); font-weight: inherit; white-space: normal; border-bottom-color: var(--grid-line); }
.admin-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table tbody tr:hover td { background: var(--surface-1); }

@media (max-width: 720px) {
  .admin-wrap { flex-direction: column; align-items: stretch; }
  .admin-subnav { flex-direction: row; flex-wrap: nowrap; position: static; overflow-x: auto; }
  .admin-row { flex-wrap: wrap; }
  .admin-seg { align-self: flex-start; }
}