@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;
  /* ── 선(line) 토큰 — 2026-10-07 사용자 지시 「선이 너무 진하다 · 전체 통일감」 ──
     ⚠️ 안내·경고 상자의 **왼쪽 색 막대는 이 토큰만** 쓴다(3px). 구: 700번대 진한 색 4px 가 화면마다 제각각(인라인 55곳).
        색은 의미(경고·위험·확인·정보)를 지키되 한 단계 연하게 — 막대는 장식이라 글자 대비 기준(4.5:1)과 무관하다.
        **글자색은 지금처럼 700번대**(대비 규칙 design-system.md). 막대만 연하게 한다. */
  --line: var(--border);            /* 카드·표 구분선 */
  --line-strong: #D5DED9;           /* 탭 줄·묶음 경계 — --line 보다 한 단계 */
  --tab-accent: #5FA98C;            /* 고른 탭 위 띠 */
  --bar-warn: #E9B872;
  --bar-danger: #EC9A9A;
  --bar-ok: #7CC4A6;
  --bar-info: #8DBFE0;
  --bar-neutral: #C3CCD6;
  --bar-violet: #BBA8F0;
}

/* 입력 안내문(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;
}
/* 사용 중지 메뉴(사이드바 data-disabled) — 눌러도 열리지 않는다는 것이 보여야 한다 */
.sidebar__item[data-disabled] { opacity: .4; cursor: not-allowed; }
.sidebar__item[data-disabled]:hover { background: transparent; }

/* 본사 메뉴 권한 — 조회만 되는 메뉴의 머리 안내(admin.html applyHqMenuPerms) */
.perm-readonly-note {
  display: flex; align-items: center; gap: 8px;
  margin: -8px 0 16px; padding: 10px 14px;
  background: #fffbeb; border-left: 3px solid var(--bar-warn); border-radius: 6px;
  font-size: 13px; color: #78350f;
}
.perm-readonly-note svg { flex: none; color: #b45309; }
body.admin.dark .perm-readonly-note { background: #2a2111; color: #fde68a; }
/* 「CSV 내려받기」 권한이 없는 본사 계정 — 내려받기 버튼을 숨긴다(나중에 그려지는 버튼도 걸리도록 속성 선택자).
   ⚠️ 화면 숨김일 뿐이다 — 공용 생성기 adminExportCSV 와 서버 감사 기록(data.export)도 함께 막는다 */
/* 조회 전용 메뉴에서 잠근 변경 버튼(admin.html hqLockIn) — 비활성이 눈에 보여야 한다 */
.perm-locked, .perm-locked:hover { opacity: .45; cursor: not-allowed !important; filter: grayscale(.6); }
body.hq-no-export button[onclick*="xport"],
body.hq-no-export button[onclick*="CSV"] { display: none !important; }

/* ===== 상품 미리보기 팝업(admin.html previewHqListing·previewHqUsed) — 관리 화면 안에서 고객 상세 구성을 보여 준다 =====
   z-index 는 사진 확대(adm-lb 99990)보다 낮아야 확대가 위에 뜬다 */
.pv-bd { position: fixed; inset: 0; z-index: 9000; background: rgba(8,19,14,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pv-card { background: #fff; color: #111827; width: min(1040px, 100%); max-height: calc(100vh - 48px); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.pv-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #f8fafc; }
.pv-tag { font-size: 12px; font-weight: 700; color: #047857; letter-spacing: .02em; }
.pv-status { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.pv-status--on { background: #ecfdf5; color: #047857; }
.pv-status--off { background: #fef3c7; color: #92400e; }
.pv-x { margin-left: auto; border: 0; background: none; font-size: 18px; cursor: pointer; color: #4b5563; padding: 4px 8px; border-radius: 6px; }
.pv-x:hover { background: #e5e7eb; }
.pv-scroll { overflow-y: auto; padding: 20px; }
.pv-foot { display: flex; justify-content: center; padding: 12px 16px; border-top: 1px solid #e5e7eb; background: #f8fafc; }
.pv-foot .btn-sm { min-width: 120px; }
.pv-notice { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--bar-warn); background: #fffbeb; color: #78350f; border-radius: 6px; font-size: 13px; }
body.admin.dark .pv-notice { background: #2a2111; color: #fde68a; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
.pv-main { position: relative; aspect-ratio: 4/3; background: #f3f4f6; border-radius: 10px; overflow: hidden; }
.pv-main--art { display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(160deg, #f1f5f9, #e2e8f0); }
.pv-main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.pv-main__label { position: absolute; left: 10px; bottom: 10px; background: rgba(8,19,14,.7); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 6px; }
.pv-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }
.pv-thumb { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #f3f4f6; cursor: pointer; aspect-ratio: 4/3; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-thumb.is-on { border-color: #047857; }
.pv-brand { font-size: 14px; color: #4b5563; font-weight: 600; }
.pv-title { font-size: 22px; margin: 2px 0 6px; }
.pv-meta { font-size: 13px; color: #4b5563; }
.pv-colors, .pv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pv-color { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: inherit; }
.pv-color i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.pv-color.is-on { border-color: #047857; box-shadow: 0 0 0 1px #047857; }
.pv-chip { font-size: 12px; background: #f1f5f9; color: #334155; padding: 3px 8px; border-radius: 6px; }
.pv-price { font-size: 26px; font-weight: 800; margin: 14px 0 4px; }
.pv-price small { font-size: 15px; font-weight: 600; margin-left: 2px; }
.pv-pass { font-size: 13px; color: #047857; font-weight: 600; }
.pv-dl { margin: 14px 0; display: grid; gap: 6px; font-size: 13px; }
.pv-dl > div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.pv-dl dt { color: #6b7280; }
.pv-dl dd { margin: 0; }
.pv-badge { font-size: 11px; background: #047857; color: #fff; padding: 1px 6px; border-radius: 4px; }
.pv-badge--gray { background: #6b7280; }
.pv-actions { display: flex; gap: 8px; }
.pv-btn { flex: 1; padding: 12px; border-radius: 8px; border: 1px solid #d1d5db; background: #fff; font-weight: 600; font-size: 14px; color: #111827; }
.pv-btn--primary { background: #00FFA6; border-color: #00FFA6; color: #08130E; flex: 1.6; }
.pv-btn:disabled { opacity: .5; cursor: not-allowed; }
.pv-sec { margin-top: 24px; }
.pv-sec h3 { font-size: 16px; margin: 0 0 10px; }
.pv-desc { font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.pv-desc img { max-width: 100%; height: auto; }
.pv-cond { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.pv-cond__it { display: flex; justify-content: space-between; gap: 6px; padding: 8px 10px; background: #f8fafc; border-radius: 6px; font-size: 13px; }
.pv-muted { font-size: 12px; color: #6b7280; margin-top: 16px; }
@media (max-width: 768px) {
  .pv-bd { padding: 0; }
  .pv-card { max-height: 100vh; height: 100%; border-radius: 0; }
  .pv-grid { grid-template-columns: 1fr; }
  .pv-thumbs { grid-template-columns: repeat(4, 1fr); }
}
body.admin.dark .pv-card { background: #111827; color: #e5e7eb; }
body.admin.dark .pv-top, body.admin.dark .pv-foot { background: #0b1220; border-color: #1f2937; }
body.admin.dark .pv-main, body.admin.dark .pv-thumb,body.admin.dark .pv-cond__it, body.admin.dark .pv-chip { background: #1f2937; color: #e5e7eb; }
body.admin.dark .pv-btn, body.admin.dark .pv-color { background: #1f2937; color: #e5e7eb; border-color: #374151; }
body.admin.dark .pv-btn--primary { background: #00FFA6; color: #08130E; }
body.admin.dark .pv-brand, body.admin.dark .pv-meta, body.admin.dark .pv-dl dt, body.admin.dark .pv-muted { color: #9ca3af; }
body.admin.dark .pv-tag, body.admin.dark .pv-pass { color: #00FFA6; }

/* ===== 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; }
  /* 반품/교환 큐의 「사유 · 귀책」 — 사유·귀책·배송비 부담·고객 메모 네 줄이 들어가는 칸이라
     줄바꿈을 허용한다(고객이 적은 말을 자르지 않는다). 표 id 가 보드마다 달라 클래스로 건다 */
  .data-table td.rma-reason { white-space: normal; min-width: 190px; }
}
.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; }
/* 정렬 가능한 표(admin.js mountTableSort) — 머리글 클릭 · 현재 정렬 열에 ▲▼ */
.sortable-table thead th { user-select: none; }
.sortable-table thead th:hover { color: #111827; }
.sortable-table thead th[data-sort-dir]::after { margin-left: 4px; font-size: 10px; color: var(--primary); }
.sortable-table thead th[data-sort-dir="asc"]::after { content: '▲'; }
.sortable-table thead th[data-sort-dir="desc"]::after { content: '▼'; }
.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; }
/* 체크박스 목록 공용(반품 「추가 자료 요청」 항목 선택 등)
   ⚠️ 권한 매트릭스와 **같은 이유·같은 기하**다 — 모달 안 `.form-field input { width:100% }` 가
      체크박스까지 늘려 글자 시작선이 항목마다 어긋난다(실제로 그렇게 보였다).
      18px 고정 + 1fr 2열로 못 박고, **라벨은 한 줄로 둔다** — 두 줄로 접히면 칸마다 높이가 달라
      목록이 들쭉날쭉해진다. 그래서 선택자는 `.form-field label`(0,1,1)을 이기도록 한 단계 더 준다. */
/* 정렬 가능한 표 머리 — 누를 수 있다는 것이 보여야 한다(글자만 두면 클릭 대상인 줄 모른다).
   화살표는 `aria-hidden` 이고 현재 축은 색으로도 구분한다(↕ = 정렬 안 됨 · ↑↓ = 이 축으로 정렬 중) */
.sort-th {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.sort-th:hover { color: var(--primary); }
.sort-th:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.sort-th span { font-size: 11px; color: #64748B; }
.sort-th:hover span { color: var(--primary); }

.check-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
/* 문장이 긴 목록(인수인계 점검표처럼)은 한 열로 — 좁은 칸에 밀어 넣어 말줄임하면 담당자가 잘린 문구를 전부로 읽는다 */
.check-picker--wide { grid-template-columns: 1fr; }
.check-picker label.check-opt {
  display: grid;
  grid-template-columns: 18px 1fr;      /* 체크박스 폭을 못 박아 글자 시작선을 맞춘다 */
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.check-picker label.check-opt:hover { border-color: #a7f3d0; }
/* 고른 칸은 눈으로도 구분되게 — 체크 표시 하나로만 나타내면 무엇을 골랐는지 훑기 어렵다.
   `:has()` 로 걸어 **화면마다 JS 로 클래스를 토글하지 않는다**(`.bw-item` 과 같은 방식) */
.check-picker label.check-opt:has(input:checked) { border-color: var(--primary); background: #F0FDF4; font-weight: 600; }
.check-picker label.check-opt:focus-within { outline: 2px solid var(--primary); outline-offset: 1px; }
/* ⚠️ 라디오도 **같은 규칙**이다(2026-09-21 실사고) — 반품 승인 모달의 「귀책주체」 라디오가
   `.form-field input { width:100%; padding:10px 12px }` 에 걸려 **칸 전체 폭 상자**가 되고
   라벨이 그 아래로 밀려 내려갔다(동그라미가 글자 위에 혼자 뜬 모습). 선택지는 체크박스든
   라디오든 이 픽커를 쓴다 — 낱개 체크박스 하나도 마찬가지다(`--wide` 한 칸). */
.check-picker input[type="checkbox"],
.check-picker input[type="radio"] { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--primary); cursor: pointer; }
.check-picker .check-opt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 한 칸이 두 줄(제목 + 부연)인 경우 — 체크박스·라디오는 첫 줄에 맞춘다 */
.check-picker label.check-opt:has(small) { align-items: start; }
.check-picker label.check-opt:has(small) input { margin-top: 2px; }
.check-picker .check-opt small { display: block; margin-top: 2px; color: #4b5563; font-weight: 400; white-space: normal; font-size: 11.5px; line-height: 1.5; }
.check-picker .check-opt:has(small) span { white-space: normal; overflow: visible; }
/* 고를 수 없게 된 선택지(귀책이 판매자면 배송비 항목) — 눌러도 되는 것처럼 보이지 않게 */
.check-picker label.check-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; background: var(--bg-soft); }
body.admin.dark .check-picker label.check-opt { background: #1a202e; border-color: #2d3548; color: #e2e8f0; }
body.admin.dark .check-picker label.check-opt:has(input:checked) { background: #14301f; }
body.admin.dark .check-picker label.check-opt:has(input:disabled) { background: #151b28; }
body.admin.dark .check-picker .check-opt small { color: #94a3b8; }
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: 3px solid var(--bar-warn); }
.api-card--down     { border-left: 3px solid var(--bar-danger); }
.api-card--healthy  { border-left: 3px solid var(--bar-ok); }

.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;
}

/* ===== 설정 탭 ===== */
/* ===== 탭 — 책갈피(서류철 인덱스) 모양 (2026-10-07 · 사용자 지시 「탭이 식별이 안 된다 — 책갈피 같은 느낌으로」) =====
   구: 글자 + 밑줄 2px 뿐이라 탭인지 제목인지 구분되지 않았다.
   이제: 탭마다 위가 둥근 칸(연회색 · 테두리) → 고른 탭은 **흰 바탕 + 위쪽 초록 띠 + 아래 선을 덮어** 내용과 한 장으로 이어진다.
   ⚠️ 한 벌로 묶는다 — 설정·고객센터·정산·B2B(.settings-tab) · 리뷰 관리(.rg-tab) · 회원 메모(.memo-tab) · 주문 관리(.bm-tab).
      탭마다 모양이 갈리면 「어느 것이 탭인가」를 다시 학습해야 한다. 전환 핸들러는 클래스별로 따로다(전역 .settings-tab[data-tab] 범위 주의). */
.settings-tabs, .memo-tabs, .bm-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 16px;
  padding: 0 4px;
  border-bottom: 1px solid var(--line-strong);   /* 톤다운(사용자 지시) — 구: 초록 2px 는 너무 강했다 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.settings-tab, .rg-tab, .memo-tab, .bm-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px 8px;
  margin-bottom: -1px;               /* 아래 선(1px) 위에 올라앉는다 — 고른 탭이 선을 덮어 내용과 이어진다 */
  background: #F1F5F3;
  border: 1px solid var(--line-strong);
  border-radius: 10px 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background .15s, color .15s, transform .15s;
}
.settings-tab:hover, .rg-tab:hover, .memo-tab:hover, .bm-tab:hover {
  background: #E6EFEA;
  color: #1a1a1a;
  transform: translateY(-1px);
}
.settings-tab.active, .rg-tab.active, .memo-tab.active, .bm-tab.active {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  border-color: #C9D6CF;
  border-bottom-color: #fff;         /* 아래 선을 덮는다 */
  box-shadow: inset 0 2px 0 var(--tab-accent), 0 -1px 4px rgba(4, 120, 87, .05);   /* 위쪽 띠 = 책갈피 머리 · 톤다운한 초록 */
  transform: none;
  z-index: 1;
}
.memo-tab { padding: 7px 14px 6px; }   /* 팝업 안 — 한 단계 작게 */
@media (prefers-reduced-motion: reduce) {
  .settings-tab, .rg-tab, .memo-tab, .bm-tab { transition: none; }
  .settings-tab:hover, .rg-tab:hover, .memo-tab:hover, .bm-tab:hover { transform: none; }
}
body.admin.dark .rg-tab { color: #4b5563; }
body.admin.dark .rg-tab.active { 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 var(--bar-danger); }
.notif-warning  { background: #fffbeb; border-left: 3px solid var(--bar-warn); }
.notif-info     { border-left: 3px solid var(--bar-info); }
.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(--bar-ok); }   /* 톤다운 — 구: 초록 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-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 var(--bar-danger); }
.memo-item.note    { background: #fffbeb; border-left: 3px solid var(--bar-warn); }
.memo-item.vip     { background: #f5f3ff; border-left: 3px solid var(--bar-violet); }
.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 { --line-strong: #2d3548; --tab-accent: #2f8f6c; --bar-warn: #8a6a33; --bar-danger: #8a4545; --bar-ok: #2f7a5e; --bar-info: #3d6a8a; --bar-neutral: #4b5563; --bar-violet: #5b4a8f; }
body.admin.dark .settings-tabs, body.admin.dark .memo-tabs, body.admin.dark .bm-tabs { border-bottom-color: #2d3548; }
body.admin.dark .settings-tab, body.admin.dark .rg-tab, body.admin.dark .memo-tab, body.admin.dark .bm-tab {
  background: #1b2232; border-color: #2d3548; color: #9ca3af;
}
body.admin.dark .settings-tab:hover, body.admin.dark .rg-tab:hover, body.admin.dark .memo-tab:hover, body.admin.dark .bm-tab:hover { background: #232b3d; color: #e5e7eb; }
body.admin.dark .settings-tab.active, body.admin.dark .rg-tab.active, body.admin.dark .memo-tab.active, body.admin.dark .bm-tab.active {
  background: #1a202e; color: #34d399; border-color: #3a4558; border-bottom-color: #1a202e; box-shadow: inset 0 2px 0 #2f8f6c;   /* 다크 카드 바탕과 같은 색 — 내용과 한 장으로 이어진다 */
}
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,
.rg-tab:focus-visible,
.memo-tab:focus-visible,
.bm-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, .rg-tab, .bm-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; } }

/* ===== 파일 선택(input[type=file]) — 관리자 폼(답변 사진·로고·후기 답변 등) · 고객 규칙과 같은 모양 (2026-09-19) ===== */
input[type="file"] {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 10px; font-family: inherit; font-size: 12.5px; color: #4b5563; line-height: 1.4;
  border: 1.5px dashed var(--border); border-radius: 10px; background: var(--bg-soft); cursor: pointer;
  transition: border-color .15s, background .15s;
}
input[type="file"]:hover, input[type="file"]:focus-visible { border-color: var(--primary); background: #fff; outline: none; }
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--primary);
  border: none; border-radius: 8px; padding: 7px 12px; margin: 0 10px 0 0; cursor: pointer; transition: background .15s;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover { background: #065F46; }
body.admin.dark input[type="file"] { color: #cbd5e1; background: #0f172a; border-color: #334155; }
body.admin.dark input[type="file"]:hover { background: #1e293b; }

/* ===== 상품정보제공고시 입력 위젯 (admin.js adminNoticeBlock — 본사·협력사·직영 액세서리 폼 공용) =====
   모바일 375px 가로 넘침 방지: 칸은 1열로 접히고 입력은 min-width:0 + box-sizing (iOS 날짜 입력 고유폭 대비) */
.nb-box { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 12px 14px; background: #fff; }
.nb-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.nb-type { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #374151; flex: 1 1 260px; min-width: 0; }
.nb-type select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-family: inherit; font-size: 14px; box-sizing: border-box; }
.nb-rec { flex: 1 1 220px; font-size: 11.5px; color: #4b5563; min-width: 0; }
.nb-cert { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 9px 12px; border-radius: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; font-size: 12.5px; cursor: pointer; }
.nb-cert input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }
.nb-cert small { display: block; color: #4b5563; font-weight: 400; margin-top: 2px; }
.nb-empty, .nb-err { font-size: 12px; color: #4b5563; margin: 10px 0 0; }
.nb-err { color: #B45309; }
.nb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px 14px; margin-top: 12px; }
.nb-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nb-field > label:first-child { font-size: 12px; font-weight: 700; color: #374151; }
.nb-field input[data-nb-val], .nb-field textarea { width: 100%; min-width: 0; box-sizing: border-box; -webkit-appearance: none; padding: 9px 10px; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; font-family: inherit; font-size: 14px; }
.nb-field input[data-nb-val]:disabled, .nb-field textarea:disabled { background: #f1f5f9; color: #64748B; }
.nb-req { color: #B91C1C; }
.nb-cert-tag { display: inline-block; font-size: 10.5px; font-weight: 800; color: #fff; background: #047857; border-radius: 4px; padding: 0 5px; vertical-align: 1px; }
.nb-ref { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: #374151; cursor: pointer; }
.nb-ref input { width: 15px; height: 15px; }
.nb-help { font-size: 11px; color: #4b5563; line-height: 1.45; }
/* 입력란 모양 — admin.js noticeShape() 한 곳이 정한다(항목마다 하드코딩 금지): 여러 줄·긴 예시 = 한 줄 전체 · 연월/날짜 = 좁은 칸 */
.nb-field--wide { grid-column: 1 / -1; }
.nb-field--short input[data-nb-val] { max-width: 200px; }
.nb-legacy { font-size: 11px; color: #B45309; line-height: 1.45; }
/* 남은 글자 수 (admin.js adminFmt — textarea[maxlength][data-count]) */
.fmt-count { display: block; margin-top: 3px; font-size: 11px; color: #6b7280; text-align: end; }
.fmt-count.is-near { color: #B45309; font-weight: 700; }
body.admin.dark .fmt-count { color: #94a3b8; }
body.admin.dark .nb-legacy { color: #fbbf24; }
body.admin.dark .nb-box { background: #111827; border-color: #334155; }
body.admin.dark .nb-cert { background: #052e1c; border-color: #14532d; }
body.admin.dark .nb-type, body.admin.dark .nb-field > label:first-child, body.admin.dark .nb-ref { color: #e5e7eb; }
body.admin.dark .nb-rec, body.admin.dark .nb-help, body.admin.dark .nb-cert small, body.admin.dark .nb-empty { color: #cbd5e1; }

/* 본사 「상품정보제공고시 관리」 (admin.html sec-product-notice) */
.pn-type { border: 1px solid var(--border, #e2e8f0); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: #fff; }
.pn-type.is-off { opacity: .7; }
.pn-type__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--bg-soft, #f8fafc); }
.pn-type__head h4 { margin: 0; font-size: 15px; }
.pn-type__head small { color: #4b5563; }
.pn-type__acts { display: flex; gap: 6px; flex-wrap: wrap; }
body.admin.dark .pn-type { background: #111827; border-color: #334155; }
body.admin.dark .pn-type__head { background: #0f172a; }