@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
/* ===== 관리자 페이지 공통 ===== */

* { box-sizing: border-box; }
body.admin {
  margin: 0;
  font-family: 'Noto Sans KR', 'Pretendard', -apple-system, sans-serif;
  background: #f6f8fb;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:root {
  /* 좌우 여백 토큰 — 고객 styles.css 와 동일 값 (#42) */
  --gutter: 16px;
  --primary: #047857;
  --primary-dark: #065F46;
  --sidebar-bg: #08130E;
  --sidebar-bg-2: #0F1F17;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #00FFA6;
  --border: #e8eaed;
  --text-muted: #6b7280;
  /* 입력 안내문 — **입력한 값보다 확실히 연하게**(아래 ::placeholder). 고객 styles.css 와 같은 값 */
  --placeholder: #9ca3af;
  --bg-soft: #f8fafc;
  --radius: 12px;
}

/* 입력 안내문(placeholder) — 2026-09 · 사용자 실측 「직접 입력한 것과 구분이 안 된다」.
   브라우저 기본값(#757575 안팎)은 본문과 농도가 비슷해 **이미 채워 넣은 칸처럼 보인다.**
   ⚠️ `opacity: 1` 이 함께 있어야 한다 — Firefox 는 placeholder 에 기본 투명도를 얹는다.
   ⚠️ 관리자 폼은 칸마다 `<label>` 이 붙는다 — placeholder 는 예시일 뿐이라 이 색이
      대비 4.5:1 을 지키지 않아도 된다(지켜야 할 문구면 라벨로 올린다). */
::placeholder { color: var(--placeholder); opacity: 1; }

/* ===== 레이아웃 ===== */
.admin-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr); /* #78 minmax(0,·) — 탑바 제목(nowrap) min-content 가 트랙을 밀어 문서폭 초과하던 실사고 */
  min-height:100vh;min-height:100dvh;
}
.admin-layout.collapsed { grid-template-columns: 64px minmax(0, 1fr); }
@media (max-width: 768px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 사이드바 ===== */
.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  position: sticky;
  top: 0;
  height:100vh;height:100dvh;
  overflow-y: auto;
}
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 20px;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 12px;
}
.sidebar__logo span.dot { font-size: 24px; }
/* 공식 로고 (admin.css 단독 로드 — styles.css 미적용 환경에서도 크기 제약 필수) */
.sidebar__logo-text { display: inline-flex; align-items: flex-end; gap: 6px; line-height: 0; }
.sidebar__logo .logo__word { height: 22px; width: auto; display: block; }
.sidebar__logo .logo__ride { color: #fff; font-weight: 900; font-size: 14px; letter-spacing: .02em; line-height: 1; transform: skewX(-10deg); transform-origin: bottom left; position: relative; bottom: 1px; }
.sidebar__role {
  font-size: 11px;
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
  font-weight: 700;
}

.sidebar__nav { flex: 1; padding: 0 8px; }
.sidebar__group {
  padding: 14px 14px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .42);
  text-transform: uppercase;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  margin: 2px 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
  user-select: none;
}
.sidebar__item:hover { background: rgba(255,255,255,0.06); }
.sidebar__item.active {
  background: rgba(0,255,166,0.15);
  color: var(--primary);
  font-weight: 600;
}
.sidebar__item-icon { font-size: 18px; min-width: 20px; text-align: center; }
.admin-layout.collapsed .sidebar__item-label,
.admin-layout.collapsed .sidebar__logo-text,
.admin-layout.collapsed .sidebar__role { display: none; }

.sidebar__footer {
  padding: 12px 16px;
  font-size: 12px;
  color: #475569;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar__collapse-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--sidebar-text);
  border-radius: 8px;
  padding: 8px;
  margin: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  display: none;
}
@media (min-width: 769px) { .sidebar__collapse-btn { display: block; } }

/* 사이드바 백드롭 (모바일 드로어용) - 기본은 항상 숨김 */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
}

/* 모바일 사이드바 (드로어) */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    width: 260px;
    z-index: 1000;
    transition: left 0.25s;
    box-shadow: 4px 0 20px rgba(0,0,0,0.2);
  }
  .sidebar.open { left: 0; }
  .sidebar-backdrop.visible { display: block; }
}

/* ===== Topbar ===== */
.topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0; /* #78 그리드 아이템 수축 허용 — 제목(nowrap) min-content 가 컬럼 트랙을 밀어 문서폭 초과하던 실사고 (#41 계약) */
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__menu-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  display: none;
}
@media (max-width: 768px) { .topbar__menu-btn { display: block; } }

.topbar__title { flex: 1; font-size: 18px; font-weight: 700; }
.topbar__title small { font-size: 13px; font-weight: 400; color: var(--text-muted); margin-left: 8px; }

.topbar__actions { display: flex; gap: 8px; align-items: center; }
.topbar__btn {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
.topbar__btn:hover { background: #eef0f3; }
.topbar__btn.primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.topbar__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.topbar__user-info { display: none; }
@media (min-width: 600px) { .topbar__user-info { display: block; } }
.topbar__user-name { font-size: 13px; font-weight: 700; }
.topbar__user-role { font-size: 11px; color: var(--text-muted); }

/* ===== 메인 컨텐츠 ===== */
.main-content {
  padding: 24px;
  max-width: 100%;
  min-width: 0; /* #78 그리드 아이템 수축 허용 — 탑바 제목(nowrap) min-content 가 컬럼을 밀어 문서폭이 뷰포트를 넘던 실사고 (#41 계약) */
  overflow-x: hidden;
}
@media (max-width: 768px) { .main-content { padding: 16px; } }

.section { display: none; }
.section.active { display: block; }

.page-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 4px;
  /* ⚠️ 섹션 제목의 우측 조치 버튼에 **`float` 을 쓰지 않는다.**
        플로트는 h2 밖으로 삐져나오고, 뒤따르는 카드는 박스만 전체 폭을 차지한 채
        **텍스트가 플로트 옆 좁은 폭으로 흐른다** — 모바일에서 PASS 안내 문구가
        두세 글자씩 끊겨 보이던 실사고가 이것이다(협력사 「렌트차 관리」).
        제목 자체를 flex 로 두고 버튼은 `.title-actions` 로 감싼다. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.page-title .title-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  /* 좁은 화면에서는 제목과 한 줄에 못 들어간다 — 아래 줄로 내리고 왼쪽 정렬한다.
     (억지로 같은 줄에 두면 제목이 눌려 세로로 깨진다) */
  .page-title .title-actions { margin-left: 0; width: 100%; }
}
.page-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 20px;
}

/* ===== KPI 카드 ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 1024px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position: relative;
}
.kpi-card__label {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-card__value {
  font-size: 26px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.5px;
}
.kpi-card__value small { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.kpi-card__delta {
  font-size: 12px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kpi-card__delta.up { color: #15803d; }
.kpi-card__delta.down { color: #dc2626; }

/* ===== 카드 래퍼 ===== */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.card-head__sub { font-size: 12px; color: var(--text-muted); margin-left: 8px; font-weight: 400; }
.card-body { padding: 18px; }
.card-body.no-pad { padding: 0; }

/* #82 .chart-card — 차트·요약 블록 컨테이너.
   ⚠️ 이 클래스는 3개 관리자에서 계속 쓰였는데 CSS 정의가 아예 없었다(배경·테두리·라운드 0) →
      직영 화면 11곳이 「카드가 아닌 맨 div」로 렌더돼 본사·협력사와 다른 인상을 줬다(사용자 리포트 #82).
   .card 와 같은 표면을 쓰되, 내부에 .card-head/.card-body 를 두지 않으므로 패딩을 자기가 갖는다. */
.chart-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.chart-card > h3:first-child { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.chart-card > .table-wrap { margin: 0 -18px -18px; }   /* 표는 카드 가장자리까지 (card-body 와 동일 인상) */

/* ===== 차트 ===== */
.chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } }

canvas.chart { width: 100%; height: 280px; display: block; }

/* ===== 테이블 → 카드 (모바일 자동 변환) ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* ⚠️ 좌우 여백 10px — 구 14px 은 열이 9~12개인 보드에서 **표를 카드 밖으로 밀어내** 가로 스크롤을
   만들었다(실측: 협력사 143px · 신차 관리 184px · 중고 매물 217px 초과). 한 칸에 8px 씩이라
   열이 많을수록 그대로 쌓인다. 세로 여백(12px)은 그대로다 — 행 높이는 가독성 축이다. */
.data-table th, .data-table td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
/* ⚠️ 조치 버튼 칸만 **줄바꿈을 허용**한다. 버튼 3~4개가 한 줄로 늘어서면 그 열 하나가
   170~250px 이 되어 표 전체를 밀어낸다 — 좁으면 두 줄로 접히게 두는 편이 낫다.
   (모바일은 이미 카드형으로 바뀌며 전 칸이 줄바꿈이다) */
@media (min-width: 769px) {
  .data-table td.actions { white-space: normal; }
  /* 자유 텍스트가 들어가는 칸도 줄바꿈을 허용한다 — 열이 11개인 두 보드에서는
     조치 칸을 접고 여백을 줄여도 이 칸들이 표를 카드 밖으로 밀어낸다(실측).
     ⚠️ 잘라내지(ellipsis) 않는다 — 관리자 보드에서 값이 잘리면 담당자가 그걸 전부로 읽는다. */
  #uaTable td[data-label="차량"],
  #uaTable td[data-label="신청자"],
  #uaTable td[data-label="처리 메모"],
  #usedListingsTable td[data-label="판매자"],
  #usedListingsTable td[data-label="모델명"] { white-space: normal; }
}
.data-table th {
  background: var(--bg-soft);
  font-weight: 600;
  color: #4b5563;
  font-size: 12px;
  letter-spacing: 0.2px;
  position: sticky;
  top: 0;
}
.data-table tr:hover td { background: #fafbfc; }
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: #fff;
    white-space: normal;
  }
  .data-table td {
    border: none;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    white-space: normal;
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
  }
  .data-table td.actions { justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 6px; }
  .data-table td.actions::before { display: none; }
}

/* 표 셀 정렬 ─────────────────────────────────────────────────────────────
   ⚠️ 셀 세로 정렬은 **middle** 이다. 기본값(baseline)이면 한 줄짜리 셀과 두 줄짜리 셀
      (연락처 = 전화+이메일 · 역할 = 배지+직책)이 섞인 행에서 글자 밑선끼리 맞춰져
      배지·버튼이 제각기 다른 높이에 놓인다 — 협력사 직원 표에서 실제로 어긋나 보였다.
   ⚠️ 가로 정렬 유틸(col-c·col-r)은 **데스크톱 표에서만** 건다. ≤768 에서는 표가 카드로 바뀌고
      셀이 flex(라벨-값)라, text-align 을 주면 라벨과 값이 따로 흩어진다. */
.data-table td { vertical-align: middle; }
@media (min-width: 769px) {
  .data-table th.col-c, .data-table td.col-c { text-align: center; }
  .data-table th.col-r, .data-table td.col-r { text-align: right; }
  .data-table td.actions { text-align: right; }
  .data-table td.actions button { vertical-align: middle; }
}
/* 표 안 보조 식별자(직원번호·코드) */
.muted-mono { color: #4b5563; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }

/* 행 펼치기(권한 더보기) — 셀에는 개수만 두고 상세는 그 행 아래에 편다 */
.perm-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.perm-more:hover { background: #f0fdf9; border-color: #a7f3d0; }
.perm-more svg { transition: transform .18s ease; }
.perm-more.is-open svg { transform: rotate(180deg); }
.perm-row > td { background: var(--bg-soft); white-space: normal; }
/* 권한 상세 — 행 아래에 펼치는 패널. 표 배경과 구분되게 안쪽 여백만 준다
   (구: `__head` 만 정의돼 있고 겉껍데기는 정의가 없었다 — 회귀 `guard83 G1`) */
.perm-panel { padding: 4px 2px 6px; }
.perm-panel__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.perm-group { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }
.perm-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.perm-chip {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
}
.perm-chip.is-sens { border-color: #fecaca; color: #b91c1c; font-weight: 600; }

/* 권한 선택 매트릭스(직원 편집 모달)
   ⚠️ 체크박스와 설명을 `display:flex` 로만 붙여 두면 **줄이 맞지 않는다** —
      모달 안의 `.form-field input` 규칙이 `width:100%` 라 체크박스까지 늘어나,
      항목마다 글자 시작 위치가 제각각이 된다(실제로 그렇게 보였다).
      그래서 **18px 고정 + 1fr** 2열 그리드로 못 박는다. */
.perm-picker {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  background: var(--bg-soft);
  margin-bottom: 14px;
}
.perm-picker__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; }
.perm-picker__level + .perm-picker__level { margin-top: 12px; }
.perm-picker__level-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.perm-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 6px; }
.perm-opt {
  display: grid;
  grid-template-columns: 18px 1fr;      /* 체크박스 폭을 못 박아 글자 시작선을 맞춘다 */
  align-items: start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  line-height: 1.45;
  cursor: pointer;
}
.perm-opt:hover { border-color: #a7f3d0; }
.perm-opt input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; }
.perm-opt small { color: #4b5563; }
.perm-opt.is-fixed { opacity: .65; cursor: default; }
body.admin.dark .perm-picker { background: #151b28; border-color: #2d3548; }
body.admin.dark .perm-opt { background: #1a202e; border-color: #2d3548; }
body.admin.dark .perm-more,
body.admin.dark .perm-chip { background: #1a202e; border-color: #2d3548; color: #cbd5e1; }
body.admin.dark .perm-row > td { background: #1a202e; }
@media (prefers-reduced-motion: reduce) { .perm-more, .perm-more svg { transition: none; } }

/* 상태 뱃지 */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

/* 인라인 버튼 */
.btn-sm {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.btn-sm:hover { background: var(--bg-soft); }
.btn-sm.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-sm.danger { color: #dc2626; border-color: #fecaca; }

/* 목록 「더보기」 — 표 폭을 꽉 채우는 띠.
   ⚠️ 글자색은 #047857(--primary)다. 밝은 초록 배경 위 500번대 초록은 흰 배경 AA 를 못 넘긴다. */
.load-more {
  display: block;
  width: 100%;
  padding: 13px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  background: linear-gradient(180deg, #f0fdf9, #e6faf1);
  color: var(--primary);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.load-more:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
body.admin.dark .load-more { background: #10291f; border-color: #1f5a41; color: #34d399; }
body.admin.dark .load-more:hover { background: #14523c; border-color: #34d399; color: #fff; }
@media (prefers-reduced-motion: reduce) { .load-more { transition: none; } }

/* 필터 바 */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-bar input, .filter-bar select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.filter-bar input { min-width: 200px; flex: 1; }
.filter-bar select { min-width: 120px; }

/* 모달 */
.modal-bd {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 20px;
}
.modal-bd.visible { display: flex; }
.modal-card {
  background: #fff;
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height:85vh;max-height:85dvh;
  overflow-y: auto;
  padding: 24px;
  position: relative;
}
.modal-card h2 { margin: 0 0 16px; font-size: 18px; }
.modal-card .close-x {
  position: absolute;
  top: 12px; right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
.form-field {
  display: block;
  margin-bottom: 12px;
}
.form-field label {
  display: block;
  font-size: 12px;
  color: #4b5563;
  font-weight: 600;
  margin-bottom: 4px;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.form-field textarea { min-height: 80px; resize: vertical; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state__icon { font-size: 48px; margin-bottom: 12px; }

/* 로그인 화면 */
.login-page {
  min-height:100vh;min-height:100dvh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #047857 0%, #065F46 100%);
  padding: 20px;
}
.login-card {
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  text-align: center;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p { margin: 0 0 24px; color: var(--text-muted); font-size: 13px; }
.login-card .form-field { text-align: left; }
.login-card .role-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.login-card .role-pick button {
  padding: 14px;
  border: 2px solid var(--border);
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.login-card .role-pick button.active {
  border-color: var(--primary);
  background: #DCFCE7;
  color: var(--primary);
}

/* 알림(토스트) */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 2000;
  display: none;
}
.toast.visible { display: block; animation: toastIn 0.3s; }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 작은 통계 카드 */
.mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.mini-stat {
  background: var(--bg-soft);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}
.mini-stat__label { font-size: 11px; color: var(--text-muted); }
.mini-stat__value { font-size: 18px; font-weight: 700; }

/* 진행 바 */
.progress {
  width: 100%; height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
  border-radius: 999px;
}

/* ===== API 연동 카드 그리드 ===== */
.api-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.api-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.api-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.api-card--degraded { border-left: 4px solid #b45309; }
.api-card--down     { border-left: 4px solid #dc2626; }
.api-card--healthy  { border-left: 4px solid #15803d; }

.api-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.api-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.api-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: apiPulse 2s ease-in-out infinite;
}
@keyframes apiPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.api-version {
  font-size: 10px;
  background: #f3f4f6;
  color: #4b5563;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: monospace;
}
.api-alert {
  font-size: 10px;
  background: #fee2e2;
  color: #dc2626;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.api-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.api-metric {
  background: var(--bg-soft);
  padding: 8px 10px;
  border-radius: 6px;
}
.api-metric__label {
  font-size: 10px;
  color: #4b5563;
  margin-bottom: 2px;
}
.api-metric__value {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
.api-metric__value.warn { color: #dc2626; }
.api-metric__sub {
  font-size: 10px;
  color: #475569;
  margin-top: 2px;
}

.api-card__foot {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.api-endpoint {
  font-size: 10px;
  color: #4b5563;
  background: #f9fafb;
  padding: 4px 8px;
  border-radius: 4px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 설정 탭 ===== */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.settings-tab {
  padding: 10px 16px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  font-family: inherit;
}
.settings-tab:hover { color: #1a1a1a; }
.settings-tab.active {
  color: var(--primary);
  border-color: var(--primary);
}

/* 권한 매트릭스 */
.perm-matrix th, .perm-matrix td {
  text-align: center;
  white-space: nowrap;
}
.perm-matrix th:first-child, .perm-matrix td:first-child {
  text-align: left;
}

/* 서류 항목 */
.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--bg-soft);
  border-radius: 8px;
  margin-bottom: 8px;
}
.doc-item > div:last-child { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 600px) {
  .doc-item { flex-direction: column; align-items: stretch; }
}

/* 사진 그리드 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.photo-tile {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  cursor: pointer;
  transition: transform .15s;
}
.photo-tile:hover { transform: scale(1.02); }
.photo-tile small { font-size: 11px; margin-top: 4px; }

/* 손상 보고 카드 */
.damage-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: var(--bg-soft);
  border-radius: 10px;
  margin-bottom: 10px;
}

/* 메시지 스레드 */
.message-thread { display: flex; flex-direction: column; gap: 12px; }
.message-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #15803d, #15803d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== 글로벌 검색 (⌘K) ===== */
.g-search-bd {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: none;
  align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  z-index: 1200;
}
.g-search-bd.visible { display: flex; }
.g-search-modal {
  background: #fff;
  width: 90%; max-width: 560px;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}
.g-search-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.g-search-head input {
  flex: 1; border: none; outline: none;
  font-size: 16px; background: transparent;
  font-family: inherit;
}
.g-search-head kbd {
  font-size: 11px; background: #f3f4f6; color: #4b5563;
  padding: 2px 6px; border-radius: 4px;
  font-family: monospace;
}
.g-search-results { max-height:50vh;max-height:50dvh; overflow-y: auto; }
.g-search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
}
.g-search-item:hover, .g-search-item.sel { background: #DCFCE7; }
.g-search-cat {
  background: #DCFCE7; color: var(--primary);
  padding: 2px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 700;
  min-width: 60px; text-align: center;
}
.g-search-body { flex: 1; min-width: 0; }
.g-search-body strong { font-size: 14px; }
.g-search-body small { display: block; color: #475569; font-size: 11px; }
.g-search-hint, .g-search-empty {
  padding: 30px 24px; text-align: center; color: #475569;
}
.g-search-hint ul { list-style: none; padding: 0; margin: 12px 0 0; font-size: 12px; }
.g-search-hint li { margin: 4px 0; }

.topbar__search-btn {
  display: inline-flex !important;
  align-items: center;
  min-width: 160px;
}
@media (max-width: 600px) { .topbar__search-btn span { display: none; } }

/* ===== 알림 드롭다운 ===== */
.notif-dropdown {
  position: absolute;
  top: 56px; right: 16px;
  width: 360px; max-width: 90vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.14);
  display: none;
  z-index: 1100;
  max-height: 480px;
  overflow: hidden;
}
.notif-dropdown.visible { display: block; }
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.notif-body { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
}
.notif-item:hover { background: #fafbfc; }
.notif-critical { background: #fef2f2; border-left: 3px solid #dc2626; }
.notif-warning  { background: #fffbeb; border-left: 3px solid #b45309; }
.notif-info     { border-left: 3px solid #0369a1; }
.notif-icon { font-size: 20px; flex-shrink: 0; }
.notif-content { flex: 1; min-width: 0; }
.notif-content strong { font-size: 13px; display: block; }
.notif-content p { font-size: 12px; margin: 2px 0; color: #4b5563; }
.notif-content small { font-size: 10px; color: #475569; }
.notif-foot { padding: 10px 16px; text-align: center; border-top: 1px solid var(--border); }
.notif-foot a { color: var(--primary); font-size: 13px; font-weight: 600; }

/* ===== 캘린더 ===== */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-head {
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  color: #4b5563;
}
.cal-cell {
  min-height: 100px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: border-color .15s;
}
.cal-cell:hover { border-color: var(--primary); }
.cal-cell.cal-empty { background: transparent; border: none; cursor: default; }
.cal-cell.cal-today { background: #DCFCE7; border-color: var(--primary); border-width: 2px; }
.cal-date { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cal-events { display: flex; flex-direction: column; gap: 2px; }
.cal-event {
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-event--pickup  { background: #BBF7D0; color: #166534; }
.cal-event--return  { background: #fef3c7; color: #78350F; }   /* #88 구 #a16207 은 4.42:1 로 AA 미달 */
.cal-event--service { background: #fee2e2; color: #991b1b; }
.cal-event--holiday { background: #e0e7ff; color: #3730a3; }
.cal-more { font-size: 10px; color: #4b5563; padding: 1px 4px; }

@media (max-width: 768px) {
  .cal-cell { min-height: 60px; padding: 4px; }
  .cal-date { font-size: 11px; }
  .cal-event { font-size: 9px; padding: 1px 3px; }
}

/* ===== 자동화 워크플로우 / 리포트 ===== */
.quick-reports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.quick-report {
  padding: 16px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  font-family: inherit;
  transition: all .15s;
}
.quick-report:hover {
  border-color: var(--primary);
  background: #DCFCE7;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,255,166,0.1);
}

/* ===== 메모 탭 (회원 관리) ===== */
.memo-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.memo-tab {
  padding: 8px 14px;
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.memo-tab.active { color: var(--primary); border-color: var(--primary); }
.memo-cnt {
  background: #e5e7eb;
  color: #4b5563;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.memo-tab.active .memo-cnt { background: var(--primary); color: #fff; }
.memo-item {
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.6;
}
.memo-item.dispute { background: #fef2f2; border-left: 3px solid #dc2626; }
.memo-item.note    { background: #fffbeb; border-left: 3px solid #b45309; }
.memo-item.vip     { background: #f5f3ff; border-left: 3px solid #7c3aed; }
.memo-add {
  display: flex; gap: 6px;
  margin-top: 8px;
}
.memo-add textarea {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
}

/* ===== 리치 텍스트 에디터 ===== */
.editor-toolbar {
  display: flex; gap: 2px;
  padding: 6px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  flex-wrap: wrap;
}
.editor-toolbar button {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.editor-toolbar button:hover { background: #DCFCE7; border-color: var(--primary); }
.editor-sep { color: #cbd5e1; padding: 0 4px; align-self: center; }
.editor-body {
  min-height: 140px;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.7;
}
.editor-body:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.editor-body:empty:before {
  content: '여기에 공지 내용을 작성하세요...';
  color: #475569;
}

/* ===== 다크모드 ===== */
body.admin.dark {
  background: #0a0f1c;
  color: #e5e7eb;
}
body.admin.dark .topbar,
body.admin.dark .kpi-card,
body.admin.dark .card,
body.admin.dark .chart-card,
body.admin.dark .mini-stat,
body.admin.dark .form-field input,
body.admin.dark .form-field select,
body.admin.dark .form-field textarea,
body.admin.dark .api-card,
body.admin.dark .api-metric,
body.admin.dark .doc-item,
body.admin.dark .damage-card,
body.admin.dark .message-row,
body.admin.dark .quick-report,
body.admin.dark .cal-cell,
body.admin.dark .notif-dropdown,
body.admin.dark .modal-card,
body.admin.dark .g-search-modal {
  background: #1a202e !important;
  color: #e5e7eb;
  border-color: #2d3548;
}
body.admin.dark .filter-bar input,
body.admin.dark .filter-bar select,
body.admin.dark .topbar__btn { background: #1a202e; color: #e5e7eb; border-color: #2d3548; }
body.admin.dark .data-table th { background: #232b3d; color: #cbd5e1; }
body.admin.dark .data-table tr:hover td { background: #1f2638; }
body.admin.dark .data-table td { border-color: #2d3548; }
body.admin.dark .card-head { border-color: #2d3548; }
body.admin.dark .main-content { background: #0a0f1c; }
body.admin.dark .kpi-card__value { color: #fff; }
body.admin.dark .kpi-card__label,
body.admin.dark .muted,
body.admin.dark .small-label { color: #4b5563; }
/* 다크에서는 밝기를 낮춰 연하게 만든다 — 라이트의 #9ca3af 를 그대로 쓰면 어두운 입력칸 위에서
   오히려 입력값(#e5e7eb)과 비슷하게 떠 보인다(밝은 배경 기준으로 고른 색이다) */
body.admin.dark { --placeholder: #6b7280; }
body.admin.dark .settings-tab { color: #4b5563; }
body.admin.dark .settings-tab.active { color: var(--primary); }
body.admin.dark .settings-tabs { border-color: #2d3548; }
body.admin.dark .cal-cell.cal-empty { background: transparent !important; }
body.admin.dark .cal-cell.cal-today { background: #0f3a2a !important; }
body.admin.dark code { background: #232b3d !important; color: #fbbf24; }
body.admin.dark .btn-sm { background: #232b3d; color: #e5e7eb; border-color: #2d3548; }
body.admin.dark .btn-sm:hover { background: #2d3548; }
body.admin.dark .perm-matrix small { color: #475569; }

/* ===== 키보드 포커스 가시화 ===== */
.sidebar__item:focus-visible,
.btn-sm:focus-visible,
.topbar__btn:focus-visible,
.data-table button:focus-visible,
.settings-tab:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* 모토 비서 z-index 보호 */
#motoChat { z-index: 1500; }

/* 신차 리스팅 에디터 */
/* 에디터의 빈 본문 안내문도 같은 색이다 — 여기만 진하면 「글이 이미 있는」 것으로 읽힌다 */
[contenteditable][data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--placeholder); }
.nl-photo { border: 2px dashed var(--border); border-radius: 10px; padding: 10px 6px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 2px; align-items: center; }

/* FFIcon 베이스라인 보정 (관리자 페이지는 styles.css 미로드) */
.ff-ic { vertical-align: -0.18em; flex-shrink: 0; }


/* ===== 모바일 보정 (≤640px) — 탑바 최소폭이 뷰포트를 밀어내던 문제 ===== */
@media (max-width: 640px) {
  .topbar { padding: 12px 12px; gap: 8px; }
  .topbar__title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar__title small { display: none; }
  .topbar__actions { gap: 6px; flex-shrink: 0; }
  .topbar__search-btn { min-width: 40px !important; width: 40px; padding: 8px 0 !important; justify-content: center; }
  .topbar__search-btn span { opacity: 1 !important; }
  .topbar__search-btn span i + * { display: none; }
  .topbar__search-btn kbd { display: none; }
  .modal-card { max-width: calc(100vw - 28px); padding: 18px 16px; }
  .g-search-modal { width: calc(100vw - 24px); }
}

/* ============================================================
   모바일 인체공학 표준 (감사 #41 — 고객 styles.css와 동일 정책)
   관리자 페이지는 styles.css 를 로드하지 않으므로 여기에 동일 규칙을 둔다.
   ============================================================ */
body.mt-modal-open { overflow: hidden !important; }
body.mt-modal-open.mt-lock-fixed { position: fixed; width: 100%; left: 0; right: 0; }
.modal-card, .g-search-results, .modal-bd [style*="overflow-y"] { overscroll-behavior: contain; }

/* 한글 줄바꿈 + 날짜 입력 오버플로 (#50 — 고객 styles.css 사본, 한쪽만 고치면 관리자 화면이 갈린다) */
body { word-break: keep-all; overflow-wrap: break-word; }
input, textarea, code, pre, [type="email"], [type="url"] {
  word-break: break-word; overflow-wrap: anywhere;
}
input[type="date"], input[type="datetime-local"], input[type="time"],
input[type="month"], input[type="week"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
  font-family: inherit; text-align: start;
}
@media (max-width: 960px) {   /* 터치 타깃은 모바일에서만 */
  input[type="date"], input[type="datetime-local"], input[type="time"],
  input[type="month"], input[type="week"] { min-height: 44px; }
}
.form-field { min-width: 0; }

@media (max-width: 960px) {
  /* iOS 자동확대 차단 — 16px 미만 입력 금지 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select, textarea { font-size: 16px !important; line-height: 1.35; }
  .form-field input, .form-field select, .form-field textarea { padding-block: 9px; }

  /* 터치 타깃 44px */
  .btn-sm, .settings-tab, .sidebar__item, .topbar__btn, .tabs button,
  .data-table td.actions button, select { min-height: 44px; }
  .topbar__menu-btn { width: 44px; height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .perm-matrix td label, .check-row label { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
  /* login/signup 은 styles.css 를 로드하지 않으므로 여기에도 동일 규칙 */
  .linklike, .s-btn, .sf-check .arrow { min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }
  .sf-check .arrow { min-width: 44px !important; }
  .sidebar__logout, .sidebar a, .sidebar__footer a, .s-back { display: inline-flex !important; align-items: center; min-height: 44px !important; padding: 6px 4px; }
  .form-field input, .form-field select, .login-card input, .find-modal input { min-height: 44px; }
  label > input[type="checkbox"], label > input[type="radio"] { width: 22px !important; height: 22px !important; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; display: flex; align-items: center; }
  .term-cb, .sf-check input[type="checkbox"] { width: 22px !important; height: 22px !important; }
  .sf-check { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  button:not([class]) { min-height: 44px; padding-block: 10px; }
}

@media (max-width: 640px) {
  /* KPI 카드 1열 → 2열 (첫 화면 정보 밀도) */
  .kpi-grid, .stat-grid, .mini-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi-card, .mini-stat { padding: 12px 12px !important; }
  .kpi-card__value, .mini-stat__value { font-size: 22px !important; }
  .kpi-card__label, .mini-stat__label { font-size: 11.5px !important; }
}

/* 다크 사이드바 위 활성 라벨은 네온 브랜드(#00FFA6)로 — 딥에메랄드는 3.45:1 미달 */
.sidebar .sidebar__item.active .sidebar__item-label,
.sidebar .sidebar__item.active { color: #00FFA6; }
.sidebar .sidebar__item-label { color: rgba(255,255,255,.82); }

/* 탑바 아이콘 버튼: 44px 은 361px 이상에서만 — 320px 레거시 기기에서는
   탑바 최소폭이 뷰포트를 밀어내므로 40px 로 완화(높이는 44px 유지) */
@media (min-width: 361px) and (max-width: 960px) {
  .topbar__btn { min-width: 44px; }
  .topbar__search-btn { min-width: 44px !important; width: 44px; }
}

/* 320px 레거시 기기: 탑바가 min-content 로 뷰포트를 밀어내지 않도록 */
@media (max-width: 360px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar__title { font-size: 14px; min-width: 0; flex: 1 1 auto; }
  .topbar__title small { display: none; }
  .topbar__actions { gap: 2px; min-width: 0; }
  .topbar__btn { padding-inline: 6px; }
}

@media (min-width: 768px)  { :root { --gutter: 20px; } }
@media (min-width: 1200px) { :root { --gutter: 24px; } }

/* ===== 회원 등급 배지 (admin.js adminTierBadge — styles.css .tier-badge 와 동일 계약) =====
   배경은 흰색, 등급색은 테두리·글자에만. 배경 틴트 금지(AA 미달) */
.tier-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  background: #fff; border: 1px solid var(--tier, #64748b);
  color: var(--tier, #64748b); font-size: 11.5px; font-weight: 800; line-height: 1.35;
  white-space: nowrap; vertical-align: middle;
}
.tier-badge b { font-weight: 800; }

/* ===== 함께구매 신차 선택기 (악세사리 등록 폼 — 협력사/본사 공통) ===== */
.bw-picker { max-height: 210px; overflow-y: auto; border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px; padding: 10px; background: var(--bg-soft, #f8fafc); }
.bw-group { margin-bottom: 10px; }
.bw-group > strong { display: block; font-size: 11.5px; color: #4b5563; margin-bottom: 5px; }
.bw-items { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 999px;
  background: #fff; font-size: 12px; min-height: 32px; }
.bw-item input { width: 14px; height: 14px; cursor: pointer; accent-color: #047857; }
.bw-item:has(input:checked) { border-color: #047857; background: #DCFCE7; font-weight: 700; }
@media (max-width: 640px) { .bw-item { min-height: 36px; font-size: 12.5px; } }

/* ===== 상품 배지 미리보기 (관리자 사본 — styles.css .pbadge 와 동일 계약) ===== */
.pbadge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; flex: 0 0 auto; max-width: 100%;
  line-height: 1.35; padding: 3px 9px; border-radius: 999px; color: #fff; background: #4B5563;
  white-space: nowrap; letter-spacing: -.1px; }
.pbadge--ghost { background: #fff; color: #1f2937; }   /* ⚠️ 불투명 유지 — 구 rgba(255,255,255,.92) 는 뒤 이미지가 8% 비쳐
                                                            등급색 글자(B+ #4d7c0f·B #b45309)가 4.14:1 로 AA 미달이었다(#87) */

/* ===== 맨 위로 버튼 (#61 — styles.css 사본: 관리자는 nav.js/styles.css 미로드) ===== */
.scroll-top {
  position: fixed; right: 24px; bottom: 28px; z-index: 900;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  background: rgba(17, 24, 39, .78); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s, background .15s;
}
.scroll-top.is-on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.scroll-top:hover { background: rgba(4, 120, 87, .92); }
@media (max-width: 760px) { .scroll-top { right: 14px; bottom: 20px; width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .scroll-top { transition: none; transform: none; } }

/* ===== #73 기획전 인라인 폼 — 작성 방식 토글 + 썸네일 픽커 =====
   구 모달 픽커는 .form-field input { width:100% } 이 체크박스에도 적용돼 데스크톱에서
   체크박스가 행 전체를 차지하고 라벨 텍스트가 밀려나 "흰 바"만 보였다 — 전용 스코프로 종결 */
label.ev-mode { display: inline-flex; align-items: flex-start; gap: 8px; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 0; cursor: pointer; background: #fff; font-size: 13px; font-weight: 600; color: inherit; }
label.ev-mode:has(input:checked) { border-color: var(--primary, #047857); background: rgba(4, 120, 87, .05); }
label.ev-mode input[type="radio"] { width: 16px !important; height: 16px !important; flex: 0 0 auto; margin: 2px 0 0; padding: 0; accent-color: var(--primary, #047857); }
label.ev-mode small { display: block; color: #64748B; font-size: 11.5px; font-weight: 400; margin-top: 1px; }
.ev-pick { max-height: 236px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 10px; padding: 4px; background: #fff; }
/* .form-field label { display:block } (0,1,1) 이 행 라벨을 세로로 깨뜨림 → 2클래스(0,2,0)로 승격 */
.ev-pick .ev-pick__row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 0; border-radius: 8px; cursor: pointer; min-height: 44px; font-weight: 400; }
.ev-pick .ev-pick__row:hover { background: var(--bg-soft); }
.ev-pick .ev-pick__row.is-on { background: rgba(4, 120, 87, .07); }
.ev-pick .ev-pick__row input[type="checkbox"] { width: 17px !important; height: 17px !important; flex: 0 0 auto; padding: 0; margin: 0; accent-color: var(--primary, #047857); }
.ev-pick__thumb { width: 48px; height: 36px; border-radius: 6px; overflow: hidden; background: #f1f5f9; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.ev-pick__thumb svg, .ev-pick__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-pick__meta { flex: 1; min-width: 0; }
.ev-pick__meta strong { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-pick__meta small { display: block; color: #64748B; font-size: 11.5px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(4, 120, 87, .08); color: #047857; border: 1px solid rgba(4, 120, 87, .25); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ev-chip:hover { background: rgba(4, 120, 87, .14); }
/* 테마색·시작일·종료일 3칸 — 인라인 style 은 모바일 1열 미디어쿼리를 이겨버리므로 클래스로 (#73) */
.form-row.ev-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 540px) { .form-row.ev-row3 { grid-template-columns: 1fr; } }