/* ============================================================
   admin.css — 밸류브릿지 관리자(다크) 공용 chrome
   · 대상: admin/ 하위 10개 페이지(admin·cards·db·import·manual·members·orders·push·reviews·sales)
   · 로드 순서: theme.css → (core.css) → admin.css → 페이지 인라인 <style>
     → 페이지 인라인이 뒤에 오므로, 각 페이지의 @media 반응형 override(.top 등)는 인라인 유지
   · 상단 네비바(.top)·미니버튼(.mini)·카운트라인(.count-line) 단일 소스
   · compact 통일 기준(사용자 지정): .top padding 18px 24px · 로고 28px · nav gap 6px · link 8px 13px
     → 기존 20px/30px/8px/14px 였던 페이지는 이 기준으로 수렴(의도된 디자인 통일)
   ============================================================ */

/* ── 상단 네비바 ── */
.top{border-bottom:1px solid var(--line);padding:18px 24px;display:flex;
  align-items:center;justify-content:space-between;position:sticky;top:0;
  background:var(--bar-bg);backdrop-filter:blur(8px);z-index:30;gap:16px;flex-wrap:wrap;}
.top .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none;}
.top .brand img{height:28px;width:auto;}
.top .brand b{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:.5px;color:var(--text);}
.top .brand span{color:var(--muted);font-size:13px;letter-spacing:1px;}
.top .nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.top .nav a{font-size:13px;color:var(--muted);padding:8px 13px;border-radius:8px;
  border:1px solid transparent;transition:.15s;white-space:nowrap;text-decoration:none;}
.top .nav a:hover{color:var(--text);border-color:var(--line);}
.top .nav a.active{color:var(--gold-text);border-color:var(--gold-dim);background:color-mix(in srgb, var(--gold) 5%, transparent);}

/* ── Capacitor 앱(edge-to-edge) 안전영역 ─────────────────────────
   앱에서만(html.vb-native, native.js가 주입) 상태바(시계·배터리)와 콘텐츠가
   겹쳐 터치를 막지 않도록 위쪽 여백을 확보한다. 웹 브라우저에는 vb-native
   클래스가 없어 이 블록 전체가 미적용 → 웹 화면 100% 그대로.
   ★실제값 소스: env(safe-area-inset-top). 이 값은 각 페이지 viewport 메타에
   viewport-fit=cover 가 있어야만 0이 아니게 잡힌다(없으면 0 → 이 여백 무력). --safe-area-inset-*
   를 주입하는 것은 현재 없음(SafeArea 플러그인 미설치) → var() 는 항상 env() 폴백으로 떨어짐.
   var() 는 향후 플러그인 도입 대비로만 유지. */
html.vb-native body{
  padding-top:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
}
/* sticky 상단바(.top)는 스크롤로 최상단에 고정되면 body 패딩을 벗어나 다시
   상태바 밑으로 들어간다. 그래서 바 '내부'에 안전영역만큼 패딩을 주어 고정
   시에도 내용(로고·nav)이 상태바 아래에 있게 하고, 스크롤=0 일 때의 이중
   여백은 음수 margin-top 으로 상쇄한다(바 배경 --bar-bg 가 상태바 영역을 채움). */
html.vb-native .top{
  margin-top:calc(-1 * var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
  padding-top:calc(18px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)));
}

/* ── 미니 버튼(상단 액션 · pill) ── */
.mini{background:none;border:1px solid var(--gold-line);color:var(--text-sec);
  border-radius:99px;padding:7px 14px;font-size:11px;letter-spacing:.04em;font-family:var(--sans-kr);
  cursor:pointer;transition:.25s var(--ease);text-decoration:none;display:inline-block;}
.mini:hover{border-color:var(--gold);color:var(--gold-text);}

/* ── 카운트 라인 ── */
.count-line{font-size:13px;color:var(--text-sec);margin-bottom:18px;letter-spacing:.02em;}
.count-line b{color:var(--gold-text);font-weight:500;}

/* ── 페이지 소제목(eyebrow) 라이트 모드 대비 보정 (WCAG AA) ──
   각 admin 페이지 인라인의 .head .eyebrow{color:var(--gold)} 는 라이트(페이퍼) 배경에서 2.15:1 로 안 읽힘.
   라이트 모드에만 더 진한 골드(#8A6D28=4.6:1)로 덮는다. 명시도 0-4-0 > 인라인 0-2-0 이라 로드순서 무관하게 우선.
   다크는 선택자 미매칭 → 인라인 골드(#C9A84C, 8.5:1) 유지. 같은 eyebrow 패턴을 쓰는 신규 페이지도 자동 적용. */
:root[data-theme="light"] .head .eyebrow{color:#8A6D28;}