/* 새 셸 화면별 완성도 층 — admin. DESIGN.md(Framer) 준수 · body.shell-v2 스코프.
 *   구조는 ui/admin.css 가 소유한다(토큰만 써서 이 층 없이도 선다). 여기는 Framer 의 모양만 얹는다:
 *   허브 페이지와 같은 여백 별칭 · 알약 내비 · 표면 단 카드(테두리 0) · 입력은 차콜 표면.
 *   2026-09-18 개편: docs/design/admin-uiux-audit-2026-09-18.md */

/* 여백 — 홈·라이브러리·목록·보드와 같은 별칭(전엔 20px 로 혼자 좁았다) */
body.shell-v2 .admin-wrap { padding: var(--sp-xl) var(--page-gutter) var(--sp-section); gap: var(--sp-xl); }
body.shell-v2 .admin-pane { gap: var(--sp-xl); }
body.shell-v2 .admin-title { font-size: var(--fs-title-1); line-height: var(--lh-title-1); letter-spacing: var(--ls-display-md); font-weight: 500; }
body.shell-v2 .admin-section-title { font-size: var(--fs-title-3); line-height: var(--lh-title-3); letter-spacing: var(--ls-tagline); font-weight: 600; }

/* 서브내비 — 알약, 활성 = 표면 단. hover 는 포인터 기기에서만(터치에선 방금 누른 탭에 hover 가 남아 선택이 둘로 보였다 — 390 실측). */
body.shell-v2 .btn.admin-subnav-btn { color: var(--ink-48); border-color: transparent; border-radius: var(--r-pill); font-weight: 500; padding: 0 var(--row-pad-inline); }
@media (hover: hover) { body.shell-v2 .btn.admin-subnav-btn:hover { background: var(--surface-1); color: var(--ink); } }
body.shell-v2 .btn.admin-subnav-btn.is-active { background: var(--surface-2); color: var(--ink); }

/* 카드·행·설정 — 테두리 없이 표면 단(canvas → surface-1 → surface-2), 모서리 lg/xl */
body.shell-v2 .admin-cards .home-stat { padding: var(--card-pad); border-radius: var(--r-lg); }
body.shell-v2 :is(.admin-row-wrap, .admin-list > .admin-row) { border-radius: var(--r-lg); }
body.shell-v2 .skel-admin-rows { --skel-row-r: var(--r-lg); }
body.shell-v2 .admin-row-editor { border-top-color: var(--hairline-soft); }
body.shell-v2 .admin-row { padding-inline: var(--row-pad-inline) var(--sp-sm); }
body.shell-v2 :is(.admin-empty, .admin-note) { border-radius: var(--r-lg); }
/* 역할 배지 → 알약. 제품의 다른 배지(feed-badge·pl-row-badge·ttile-badge·hub-chip·showcase-badge)가 전부 알약이고
 *   DESIGN 이 알약을 브랜드 어휘로 못박는다. 구조 파일(ui/admin.css)은 v1 도 쓰므로 여기서만 덮는다. */
body.shell-v2 .admin-role { border-radius: var(--r-pill); }
/* 카드(surface-1) 위의 차콜 알약은 한 단 위로 — 같은 표면이면 사라진다(framer.css ② 와 같은 규칙) */
body.shell-v2 :is(.admin-row-wrap, .admin-list > .admin-row) .btn--secondary { background: var(--surface-2); }
body.shell-v2 :is(.admin-row-wrap, .admin-list > .admin-row) .btn--secondary:hover { background: var(--ink); color: var(--canvas); }

/* 입력 — 차콜 표면·테두리 없음(framer.css ③). 행 안 입력은 한 단 위 */
body.shell-v2 :is(input, select).admin-input { border-radius: var(--r-md); height: 40px; padding: 0 var(--sp-sm); font-size: var(--fs-caption); }
/* 셀렉트 셰브런은 tools.css 가 그린다(km-filter-select 와 공용) — 오른쪽 여백만 셰브런 자리로 */
body.shell-v2 select.admin-input { padding-right: 34px; }
body.shell-v2 .admin-row-wrap :is(input, select).admin-input { background-color: var(--surface-2); }
body.shell-v2 .admin-seg { background: var(--canvas); border-radius: var(--r-pill); }
body.shell-v2 .admin-seg-btn { border-radius: var(--r-pill); }
body.shell-v2 .admin-seg-btn[aria-pressed='true'] { background: var(--surface-3); }
body.shell-v2 .admin-seg-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }

/* 표 — 캔버스 위 헤어라인(#1a1a1a)은 우주 배경에 묻힌다 → 표 전용 --grid-line */
body.shell-v2 .admin-table th { color: var(--ink-48); }
/* ui#4 — v1(admin.css)과 같은 이유로 행 머리는 열 머리 색을 안 물려받는다. */
body.shell-v2 .admin-table th[scope='row'] { color: var(--ink); }
body.shell-v2 .admin-table tbody tr:hover td { background: var(--surface-1); }


@media (max-width: 810px) {
  body.shell-v2 .admin-wrap { flex-direction: column; align-items: stretch; padding: var(--sp-lg) var(--sp-md) 64px; gap: var(--sp-lg); }
  body.shell-v2 .admin-pane { gap: var(--sp-xl); }
  /* 좁은 폭에서 카드가 한 줄에 하나면 결제 탭이 카드 높이만큼 길게 스크롤된다 — 두 칸으로 */
  body.shell-v2 .admin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.shell-v2 .admin-cards .home-stat { padding: var(--sp-md); }
  /* 서브내비가 가로로 넘칠 때 — 오른쪽 끝을 흐려 '더 있다'는 단서를 준다(탭이 셋이라 390px 에선 대개 다 보인다) */
  body.shell-v2 .admin-subnav {
    flex-direction: row; flex-wrap: nowrap; position: static; min-width: 0; width: 100%; gap: var(--sp-xxs);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  body.shell-v2 .admin-subnav::-webkit-scrollbar { display: none; }
  body.shell-v2 .btn.admin-subnav-btn { width: auto; flex: none; min-height: 44px; white-space: nowrap; }
  body.shell-v2 .admin-row { flex-wrap: wrap; row-gap: var(--sp-xs); padding: var(--sp-sm) var(--sp-md); }
  body.shell-v2 .admin-user-email { flex-basis: 100%; }
  body.shell-v2 .admin-row-actions { margin-left: auto; }
  body.shell-v2 :is(.admin-input, .admin-seg-btn, .admin-row .btn, .admin-form > .btn, .admin-row-editor > .btn) { height: 44px; min-height: 44px; font-size: 16px; }
  body.shell-v2 .admin-field--user { max-width: none; }
  body.shell-v2 .admin-field { flex: 1 1 100%; }
}