/* ============================================================
   척척셀러 — Design System (v2, 2026-05-08)
   타겟: 40-50대 셀러. Apple HIG 참고 — clarity / deference / depth.
   원칙: 절제된 액센트, 무채색 위주, 가독성 우선, 그라디언트 최소화.
   ============================================================ */

/* ── CSS Variables ── */
:root {
  /* Colors — Neutral (cool 톤, Apple system gray 와 유사) */
  --gray-50: #f5f5f7;     /* macOS window bg */
  --gray-100: #ebebed;
  --gray-200: #d2d2d7;    /* Apple separator */
  --gray-300: #b8b8be;
  --gray-400: #8e8e93;    /* iOS Gray 1 */
  --gray-500: #6e6e73;
  --gray-600: #515154;
  --gray-700: #3a3a3c;
  --gray-800: #2c2c2e;
  --gray-900: #1d1d1f;    /* Apple primary text */

  /* Colors — Brand (Apple System Blue) */
  --primary-50:  #f0f6ff;
  --primary-100: #d6e4ff;
  --primary-200: #adc8ff;
  --primary-400: #4c92f5;
  --primary-500: #0071e3;  /* Apple marketing blue */
  --primary-600: #0066cc;
  --primary-700: #0055aa;

  /* Colors — Semantic (saturation 약하게) */
  --success-50: #ecfdf5;
  --success-500: #34c759;  /* iOS Green */
  --success-600: #2da94c;
  --success-700: #248a3d;
  --warning-50: #fff8eb;
  --warning-500: #ff9f0a;  /* iOS Orange */
  --warning-600: #e08300;
  --danger-50: #fff1f0;
  --danger-500: #ff3b30;   /* iOS Red */
  --danger-600: #d70015;
  --info-50: #f0f6ff;
  --info-500: #0071e3;     /* primary 와 통합 */

  /* Surface tokens (라이트 모드 기본).
     PR-0: 인라인 `background: white` 가 dark mode 토큰을 덮어쓰는 회귀를 막기
     위해 표면 색상은 항상 본 토큰을 통해 참조. 다크 모드에선 자동 swap. */
  --surface: white;            /* 카드·모달·드롭다운 표면 */
  --surface-input: white;      /* input/select/textarea 배경 */
  --surface-sticky: white;     /* sticky column 배경 */
  --surface-overlay: rgba(0,0,0,0.4);
  --bg-canvas: var(--gray-50);                /* body 배경 — 라이트 #f5f5f7 */
  --sidebar-bg: rgba(245, 245, 247, 0.92);    /* sidebar (translucent) */
  --hover-overlay: rgba(0, 0, 0, 0.04);       /* nav-item / row hover */

  /* 채널(판매처) 색상 — 06-refs §5.1. 표·차트에서 채널 즉시 식별. */
  --ch-naver: #03C75A;        /* 네이버 스마트스토어 */
  --ch-coupang: #E11D48;      /* 쿠팡 */
  --ch-11st: #FF6B00;         /* 11번가 */
  --ch-gmarket: #007AC8;      /* G마켓 */
  --ch-auction: #FFCE00;      /* 옥션 */
  --ch-cafe24: #0066FF;       /* 카페24 */
  --ch-domeggook: #6B7280;    /* 도매꾹 (도매처, neutral) */
  --ch-default: #9CA3AF;      /* 기타 / 미지정 — gray-400 */

  /* 손익 색상 — 06-refs §5.5. NN/G categorical only (magnitude 인코딩 X). */
  --profit-positive: #16A34A; /* green-600 — 양수 실수익 */
  --profit-negative: #DC2626; /* red-600 — 음수 실수익 (역마진) */
  --profit-warning: #D97706;  /* amber-600 — 마진 ≤ 5% (손익분기 근접) */

  /* 8px spacing scale — 06-refs §5.3 Linear. ad-hoc px 대신 토큰 사용. */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 64px;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --header-height: 60px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Shadows (subtle, Apple-style) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.10);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* Typography — macOS: -apple-system / SF Pro; Windows·Linux: Pretendard
     Variable (web font, dynamic subset) → 시각 일관성.
     Pretendard 웹폰트 로드 실패 시 OS fallback: Apple SD Gothic Neo (mac) /
     Malgun Gothic (Windows 기본 한글) / Noto Sans KR (linux). */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Pretendard Variable',
               'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic',
               'Noto Sans KR', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Pretendard Variable',
                  'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic',
                  system-ui, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* 16px = iOS body 크기. 노안 시작 연령대(45+) 가독성 보장 */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  color: var(--gray-900);
  background: var(--bg-canvas);
  /* line-height 1.5 가 한국어/노안에 가장 균형. 1.6 은 살짝 과도 */
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--primary-700); }

/* ── Layout ── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar (light, Apple Finder/System Settings 톤) ── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--gray-200);
  color: var(--gray-700);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: width var(--transition-slow);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand .brand-icon {
  width: 32px;
  height: 32px;
  background: var(--primary-500);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}
.sidebar-brand .brand-icon--logo {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.sidebar-brand .brand-icon--logo img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

.sidebar-brand .brand-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -0.2px;
}

.sidebar-brand .brand-badge {
  font-size: 10px;
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* Nav Groups */
.sidebar-nav {
  flex: 1;
  padding: 14px 0;
}

.nav-group {
  margin-bottom: 6px;
}

.nav-group-label {
  padding: 10px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--gray-500);
  text-transform: none;   /* 한글 라벨 가독성 */
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 1px 10px;
  border-radius: 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
}

.nav-item:hover {
  background: var(--hover-overlay);
  color: var(--gray-900);
}

.nav-item.active {
  background: var(--primary-500);
  color: white;
}
.nav-item.active .nav-icon { color: white; opacity: 1; }

.nav-item .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}

.nav-item.active .nav-icon { opacity: 1; }

.nav-item .nav-badge {
  margin-left: auto;
  background: var(--danger-500);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* ── Main Content ── */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* min-width: 0 — flex item 의 기본 ``min-width: auto`` 가 자식의 min-content
     (e.g. ``min-width: 240px`` 의 input) 만큼 부모 폭을 강제 확장시켜 viewport
     를 초과하는 사고 방지. ≤500px 에서 toolbar/header 가 우측 잘리던 원인. */
  min-width: 0;
}

/* ── Header ── */
.header {
  height: var(--header-height);
  background: var(--surface);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left h1 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.3px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--gray-400);
}

.breadcrumb a { color: var(--gray-500); }
.breadcrumb .separator { color: var(--gray-300); }
.breadcrumb .current { color: var(--gray-700); font-weight: 500; }

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--gray-200);
  color: var(--gray-700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray-500);
  transition: all var(--transition-fast);
  position: relative;
}

.header-btn:hover {
  background: var(--gray-300);
  border-color: var(--gray-400);
  color: var(--gray-900);
}
.header-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.header-btn .notification-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  background: var(--danger-500);
  border-radius: 50%;
  border: 2px solid white;
}

/* ── Page Content ── */
.page-content {
  flex: 1;
  padding: 24px;
}

/* ── Cards ── */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
}

.card-body {
  padding: 20px;
}

/* ── Stats Grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.stat-card .stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.stat-card .stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  /* uppercase 는 한글에서 의미 없고 영문일 때도 비즈니스 톤에 과함 */
  text-transform: none;
  letter-spacing: 0;
}

.stat-card .stat-icon {
  /* 무채색 + 단색. 채도 높은 카테고리 컬러는 Apple 스타일에서 회피. */
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--gray-100);
  color: var(--gray-600);
}

/* 의미적 액센트 (semantic emphasis) — 절제된 톤. */
.stat-card .stat-icon.blue { background: var(--primary-50); color: var(--primary-600); }
.stat-card .stat-icon.green { background: var(--success-50); color: var(--success-600); }
.stat-card .stat-icon.yellow { background: var(--warning-50); color: var(--warning-600); }
.stat-card .stat-icon.red { background: var(--danger-50); color: var(--danger-600); }
.stat-card .stat-icon.purple { background: var(--primary-50); color: var(--primary-600); }

.stat-card .stat-value {
  /* SF Display 처럼 큰 숫자에는 -letter-spacing 으로 시각 균형 */
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--gray-900);
  letter-spacing: -0.8px;
  line-height: 1.15;
}

.stat-card .stat-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
  color: var(--gray-500);
}

/* up/down 은 텍스트 컬러만 변경 (배경 chip 제거 — 시각 노이즈 줄임) */
.stat-change.up { color: var(--success-600); background: transparent; padding: 0; }
.stat-change.down { color: var(--danger-600); background: transparent; padding: 0; }

/* ── Tables ── */
.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-500);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
  white-space: nowrap;
}

table tbody td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}

table tbody tr:hover {
  background: var(--gray-50);
}

table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-success { background: var(--success-50); color: var(--success-600); }
.badge-warning { background: var(--warning-50); color: var(--warning-600); }
.badge-danger { background: var(--danger-50); color: var(--danger-600); }
.badge-info { background: var(--info-50); color: var(--info-500); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }
.badge-primary { background: var(--primary-50); color: var(--primary-600); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-sans);
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
}
.btn-primary:hover { background: var(--primary-700); }

.btn-secondary {
  background: var(--surface);
  color: var(--gray-700);
  border-color: var(--gray-300);
}
.btn-secondary:hover { background: var(--bg-canvas); }

.btn-danger {
  background: var(--surface);
  color: var(--danger-600);
  border-color: var(--danger-300);
}
.btn-danger:hover { background: var(--danger-50); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }

/* 키보드 포커스 표시 — 전역 접근성(a11y). .btn 등 상호작용 요소에 또렷한 포커스 링이
   없어 키보드 사용자가 위치를 못 보던 문제. 마우스 클릭(:focus)엔 안 뜨고 키보드
   탐색(:focus-visible)에만 표시. 라이트/다크 모두 --primary-500 으로 대비 확보.
   summary·[role=tab]·.onb-btn 등 비-.btn 컨트롤도 포함. (2026-05-29) */
.btn:focus-visible,
.onb-btn:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
.vm-btn:focus-visible,
a.mp-chip:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  border-radius: var(--radius-md, 8px);
}

/* ── Form input 표준 — admin/store 공용. 모든 input/select/textarea 통일.
   2026-05-19 — admin 페이지 12곳에 동일 inline style 반복되던 것을 단일 클래스로. */
.form-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 13px;
  color: var(--gray-900);
  background: var(--surface);
  box-sizing: border-box;
  font-family: inherit;
}
.form-input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}
.form-input.font-mono { font-family: var(--font-mono); }
.form-input.input-sm { padding: 5px 8px; font-size: 12px; }
.form-label { font-size: 12px; color: var(--gray-700); font-weight: 600; display: block; margin-bottom: 4px; }
.form-hint { font-size: 11px; color: var(--gray-500); margin-top: 4px; line-height: 1.5; }

/* ── Content Grid ──
   2026-05-19 — .grid / .grid-cols-N base utility 정의를 *media query 보다 위* 로
   유지해야 모바일 override (line 725, 756) 가 cascade 로 이긴다. 이전 line 843
   에 있을 때 unconditional `.grid-cols-4 { repeat(4,1fr) }` 가 media 룰을
   무효화해 모바일에서 4-column 유지하는 버그. admin/store 양쪽 dashboard 영향. */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.grid           { display: grid; }
.grid-cols-2    { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3    { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4    { grid-template-columns: repeat(4, 1fr); }

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--gray-400);
}

.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  font-size: 16px;
  color: var(--gray-600);
  margin-bottom: 4px;
}

.empty-state p {
  font-size: 13px;
  max-width: 400px;
  margin: 0 auto;
}

/* ── Provider/Marketplace Pills ── */
.site-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--gray-100);
  color: var(--gray-700);
}

.site-pill.active { background: var(--success-50); color: var(--success-600); }
.site-pill.skeleton { background: var(--gray-100); color: var(--gray-400); }

.site-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.site-pill.active .dot { background: var(--success-500); }
.site-pill.skeleton .dot { background: var(--gray-300); }

/* ── Margin Display ── */
.margin-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.margin-bar .bar {
  flex: 1;
  height: 6px;
  background: var(--gray-100);
  border-radius: 3px;
  overflow: hidden;
}

.margin-bar .bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width var(--transition-slow);
}

.margin-bar .bar-fill.good { background: var(--success-500); }
.margin-bar .bar-fill.warning { background: var(--warning-500); }
.margin-bar .bar-fill.danger { background: var(--danger-500); }

.margin-bar .bar-label {
  font-size: 12px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

/* ── Responsive ── */

/* Mobile drawer toggle button — desktop 에선 숨김 */
.sidebar-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray-700);
  font-size: 18px;
}

/* Sidebar drawer overlay (mobile only) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

/* ── Tablet (≤1024px) — 사이드바 collapse, 통계 2열 ── */
@media (max-width: 1024px) {
  .sidebar { width: var(--sidebar-collapsed); }
  .sidebar .brand-text,
  .sidebar .brand-badge,
  .sidebar .nav-group-label,
  .sidebar .nav-item span,
  .sidebar .nav-badge { display: none; }
  .sidebar .nav-item { justify-content: center; padding: 10px; }
  /* 64px 너비에선 텍스트 콘텐츠 위주 위젯이 압축돼 캐릭터 단위로 vertical 표시됨.
     완전히 숨김 — 사용자는 viewport 넓힐 때 다시 보임. ≤768 drawer 모드(.open)
     에서는 sidebar 가 240px 로 복귀하므로 아래 룰로 다시 표시. */
  .sidebar .reg-widget,
  .sidebar .sb-banner-wrap,
  .sidebar .sb-foot { display: none; }
  .main-content { margin-left: var(--sidebar-collapsed); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (≤768px) — drawer + 단일 컬럼 레이아웃 ── */
@media (max-width: 768px) {
  /* Sidebar 를 drawer 로 전환 — 기본 숨김, .open 시 슬라이드 인 */
  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    z-index: 100;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open + .sidebar-overlay,
  .sidebar-overlay.open { display: block; }
  .sidebar .brand-text,
  .sidebar .brand-badge,
  .sidebar .nav-group-label,
  .sidebar .nav-item span,
  .sidebar .nav-badge { display: inline; }
  .sidebar .nav-item { justify-content: flex-start; padding: 10px 14px; }
  /* drawer 가 240px 로 복귀했으므로 ≤1024 collapsed 에서 숨겼던 widget 복원 */
  .sidebar .reg-widget,
  .sidebar .sb-foot { display: block; }
  .sidebar .sb-banner-wrap { display: block; }

  .main-content { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }

  /* 통계 / 그리드 단일 컬럼 */
  .stats-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  /* 인라인 `grid-column: span N` 자식이 1fr 단일컬럼에서도 암묵적 컬럼을 만들어
     그리드를 다시 다단으로 펼치는 회귀 차단 (margin_scoped 폼 2026-05-29 라이브 확인).
     인라인 style 은 specificity 가 높아 !important 로만 덮을 수 있다. 모바일에선
     모든 collapse 대상 그리드의 자식 span 을 1칸으로 강제. [[인라인 grid/flex = @media 무력화]] */
  .grid-2 > *, .grid-3 > *,
  .grid-cols-2 > *, .grid-cols-3 > *, .grid-cols-4 > * { grid-column: auto !important; }

  /* 카드 / page-content 여백 축소 */
  .page-content { padding: 16px; }
  .stat-card { padding: 18px; }
  .card-body { padding: 16px; }
  .card-header { padding: 14px 16px; }

  /* 페이지 타이틀 사이즈 다운 */
  .page-title { font-size: 22px; }
  .page-subtitle { font-size: 13px; }

  /* NOTE: 이전엔 ``.card-body table { display:block; overflow-x:auto;
     white-space:nowrap }`` 로 가로 스크롤 fallback 했음. 통합 fluid base
     (table-layout:fixed + word-break) 도입으로 불필요 + 충돌. ``display:block``
     이 ``table-layout:fixed`` 를 깨고 ``white-space:nowrap`` 이 셀 wrap 을
     무력화해 좁은 viewport 에서 우측 잘림 재발. 룰 삭제. 와이드 그리드
     (.cc-table-wide) 는 부모 ``overflow-x:auto`` 으로 별도 처리. */

  /* admin topbar 가로 스크롤 (sticky 유지) */
  .admin-topbar { overflow-x: auto; flex-wrap: nowrap; padding: 10px 16px; }
  .admin-topbar a { padding: 6px 10px; }
  .admin-shell { padding: 0 16px 32px; }

  /* header sticky 위 mobile-only 사이드바 토글 표시 */
  .header { padding: 0 16px; }
}

/* ── 작은 모바일 (≤480px) — 추가 압축 ── */
@media (max-width: 480px) {
  .stat-card .stat-value { font-size: 26px; }
  .page-title { font-size: 20px; }
}

/* ============================================================
   Utility Classes (v2, 2026-05-08)
   인라인 style 을 흡수해 디자인 시스템 일관성 강제. Tailwind 부분 차용.
   ============================================================ */

/* Typography */
.text-2xs   { font-size: 10px; }
.text-xs    { font-size: 11px; }
.text-sm    { font-size: 12px; }
.text-base  { font-size: 14px; }
.text-md    { font-size: 15px; }
.text-lg    { font-size: 17px; }
.text-xl    { font-size: 20px; }
.text-2xl   { font-size: 24px; }

.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }
.font-bold      { font-weight: 700; }
.font-mono      { font-family: var(--font-mono); }

.text-muted     { color: var(--gray-500); }
.text-subtle    { color: var(--gray-400); }
.text-strong    { color: var(--gray-900); }
.text-primary   { color: var(--primary-600); }
.text-success   { color: var(--success-600); }
.text-warning   { color: var(--warning-600); }
.text-danger    { color: var(--danger-600); }
.text-mono      { font-family: var(--font-mono); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layout — flex/grid */
.flex             { display: flex; }
.inline-flex      { display: inline-flex; }
.flex-col         { flex-direction: column; }
.flex-1           { flex: 1; }
.items-center     { align-items: center; }
.items-start      { align-items: flex-start; }
.items-end        { align-items: flex-end; }
.justify-between  { justify-content: space-between; }
.justify-center   { justify-content: center; }
.justify-end      { justify-content: flex-end; }
.flex-between     { display: flex; align-items: center; justify-content: space-between; }
.flex-center      { display: flex; align-items: center; justify-content: center; }

.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-6  { gap: 24px; }

/* Spacing */
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }

.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.ml-auto { margin-left: auto; }

/* Sizing — fixed pixel widths (2026-05-13 refactor: 80+ inline width=Npx 흡수).
   th/td column 폭, form input·select 폭 표준화. 짧은 라벨 시스템과 일관됨. */
.w-40     { width: 40px; }
.w-60     { width: 60px; }
.w-80     { width: 80px; }
.w-90     { width: 90px; }
.w-100    { width: 100px; }
.w-120    { width: 120px; }
.w-140    { width: 140px; }
.w-160    { width: 160px; }
.w-200    { width: 200px; }
.w-full   { width: 100%; }
.min-w-0  { min-width: 0; }
.max-w-md { max-width: 480px; }

/* Surface */
.bg-white       { background: white; }
.bg-gray-50     { background: var(--gray-50); }
.bg-gray-100    { background: var(--gray-100); }
.rounded-sm     { border-radius: var(--radius-sm); }
.rounded-md     { border-radius: var(--radius-md); }
.rounded-lg     { border-radius: var(--radius-lg); }
.border         { border: 1px solid var(--gray-200); }
.border-t       { border-top: 1px solid var(--gray-200); }
.border-b       { border-bottom: 1px solid var(--gray-200); }
.divide-y > * + * { border-top: 1px solid var(--gray-100); }

/* Inline icon (Lucide) — 통계 카드 / 버튼에 통일된 크기 */
.icon            { display: inline-block; width: 18px; height: 18px; line-height: 1; }
.icon-sm         { width: 14px; height: 14px; }
.icon-lg         { width: 24px; height: 24px; }
.i              { /* Lucide font 베이스라인 정렬 */ vertical-align: -3px; }

/* Page header — 모든 페이지 상단 일관 */
.page-header { margin-bottom: 28px; }
.page-title  { font-family: var(--font-display); font-size: 26px; font-weight: 600;
               color: var(--gray-900); letter-spacing: -0.5px; line-height: 1.2; margin: 0; }
.page-subtitle { font-size: 14px; color: var(--gray-500); margin-top: 6px; }
/* 헤더(제목+액션버튼)가 좁은 화면에서 제목을 압박해 'CS 대시보/드' 식으로 글자 개행되던
   문제 — 모바일에선 제목 위, 액션 아래로 stack. .page-header.flex-between 만 대상(헤더 한정). */
@media (max-width: 640px) {
  .page-header.flex-between { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Section 타이틀 (카드 안 등) */
.section-title { font-size: 13px; font-weight: 600; color: var(--gray-700);
                 text-transform: none; letter-spacing: 0; }

/* Definition list — label/value 쌍 */
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: 13px; }
.dl dt { color: var(--gray-500); font-weight: 500; }
.dl dd { color: var(--gray-900); margin: 0; }

/* ============================================================
   Dark Mode — theme system (2026-05-08 redesign)
   ----------------------------------------------------------------
   3 가지 테마 상태:
     1. data-theme="light"   — 강제 라이트 (OS 무시)
     2. data-theme="dark"    — 강제 다크 (OS 무시)
     3. data-theme="auto"    — OS 의 prefers-color-scheme 따라감 (기본)

   JS 가 <head> 의 inline 스크립트에서 즉시 `<html>` 에 다음을 부착:
     - data-theme="..."   (사용자 선택값)
     - .is-dark           (현재 effective dark 여부 — auto 인 경우 OS query)

   CSS 는 `.is-dark` 클래스 하나만 보고 토큰 swap. JS 비활성 환경 fallback 으로
   @media (prefers-color-scheme: dark) :root:not(.is-dark) 도 함께 적용.
   ============================================================ */
:root.is-dark {
  /* ── Grayscale (개선된 dark 팔레트, 06-refs §5.5 + WCAG 명도비) ── */
  /* layer 간 시각 구분 강화: body / card / input / border 가 모두 한 단계씩 */
  --gray-50:  #1A1A1D;   /* card 표면 — body 와 1.36:1 contrast */
  --gray-100: #25252A;   /* input · elevated 표면 */
  --gray-200: #34343A;   /* border (visible) */
  --gray-300: #48484E;   /* border emphasis */
  --gray-400: #6E6E76;   /* muted text — AA 4.5:1 on card */
  --gray-500: #8E8E94;
  --gray-600: #AEAEB4;
  --gray-700: #C7C7CC;
  --gray-800: #D1D1D7;
  --gray-900: #F2F2F7;   /* primary text */

  /* Brand — 명도 상향 (다크 배경 대비 확보) */
  --primary-50:  #0a3a6a;
  --primary-100: #144a85;
  --primary-200: #1c5fa8;
  --primary-400: #4090ee;
  --primary-500: #0a84ff;   /* iOS Blue (dark) */
  --primary-600: #409cff;
  --primary-700: #5fafff;

  --success-50: #0a2e1c;
  --success-500: #30d158;
  --success-600: #4cd97a;
  --success-700: #6bdf94;

  --warning-50: #3a230a;
  --warning-500: #ff9f0a;
  --warning-600: #ffb84d;

  --danger-50: #3a0e0d;
  --danger-500: #ff453a;
  --danger-600: #ff6961;

  --info-50: #0a3a6a;
  --info-500: #0a84ff;

  /* Surface — dark variants */
  --surface: var(--gray-50);
  --surface-input: var(--gray-100);
  --surface-sticky: var(--gray-50);
  --surface-overlay: rgba(0,0,0,0.6);
  --bg-canvas: #0A0A0C;                         /* body — slight cool tint, OLED-friendly */
  --sidebar-bg: rgba(20, 20, 23, 0.92);         /* sidebar (translucent) */
  --hover-overlay: rgba(255, 255, 255, 0.06);   /* nav-item / row hover */
}

/* JS 미활성/지연 fallback — OS dark 면 .is-dark 가 부착되지 않은 상태에서도 적용.
   JS 로 .is-dark 가 부착되면 위 :root.is-dark 가 우선 (specificity 동일하면 source order). */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --gray-50:  #1A1A1D;
    --gray-100: #25252A;
    --gray-200: #34343A;
    --gray-300: #48484E;
    --gray-400: #6E6E76;
    --gray-500: #8E8E94;
    --gray-600: #AEAEB4;
    --gray-700: #C7C7CC;
    --gray-800: #D1D1D7;
    --gray-900: #F2F2F7;
    --primary-50:  #0a3a6a;
    --primary-100: #144a85;
    --primary-200: #1c5fa8;
    --primary-400: #4090ee;
    --primary-500: #0a84ff;
    --primary-600: #409cff;
    --primary-700: #5fafff;
    --success-50: #0a2e1c;
    --success-500: #30d158;
    --success-600: #4cd97a;
    --success-700: #6bdf94;
    --warning-50: #3a230a;
    --warning-500: #ff9f0a;
    --warning-600: #ffb84d;
    --danger-50: #3a0e0d;
    --danger-500: #ff453a;
    --danger-600: #ff6961;
    --info-50: #0a3a6a;
    --info-500: #0a84ff;
    --surface: var(--gray-50);
    --surface-input: var(--gray-100);
    --surface-sticky: var(--gray-50);
    --surface-overlay: rgba(0,0,0,0.6);
    --bg-canvas: #0A0A0C;
    --sidebar-bg: rgba(20, 20, 23, 0.92);
    --hover-overlay: rgba(255, 255, 255, 0.06);
  }
}

/* ── 비-token rules — dark 일 때만 적용. .is-dark OR (auto + OS dark) 둘 모두 ── */
:root.is-dark .bg-white,
:root.is-dark thead tr.bg-gray-50,
:root.is-dark .bg-gray-50 { background: var(--gray-100) !important; }
:root.is-dark .bg-gray-100 { background: var(--gray-200) !important; }
:root.is-dark .border, :root.is-dark .border-t, :root.is-dark .border-b { border-color: var(--gray-200); }
:root.is-dark .divide-y > * + * { border-top-color: var(--gray-200); }

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .bg-white,
  :root:not(.theme-light) thead tr.bg-gray-50,
  :root:not(.theme-light) .bg-gray-50 { background: var(--gray-100) !important; }
  :root:not(.theme-light) .bg-gray-100 { background: var(--gray-200) !important; }
  :root:not(.theme-light) .border,
  :root:not(.theme-light) .border-t,
  :root:not(.theme-light) .border-b { border-color: var(--gray-200); }
  :root:not(.theme-light) .divide-y > * + * { border-top-color: var(--gray-200); }
}

/* ============================================================
   Form Controls — input/select/textarea 글로벌 정의
   인라인 style 의 절반 정도가 form 입력 스타일 → utility 흡수.
   ============================================================ */
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="datetime-local"],
select, textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--gray-400);
  border-radius: var(--radius-md);
  background: var(--surface-input);
  color: var(--gray-900);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}
input::placeholder, textarea::placeholder { color: var(--gray-400); }

.input-sm { padding: 5px 10px; font-size: 12px; }
.input-lg { padding: 10px 14px; font-size: 16px; }

label { font-size: 12px; color: var(--gray-600); font-weight: 500; }
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row label { margin-bottom: 0; }


/* ── Sidebar bottom user card ── */
.sb-user-avatar {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--primary-100); color: var(--primary-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.sb-user-name { font-size: 12px; font-weight: 600; color: var(--gray-700); }
.sb-logout { font-size: 11px; color: var(--gray-400); text-decoration: none; }
.sb-logout:hover { color: var(--gray-700); }

/* ── Sidebar bottom banners (recharge / trial / pwa-install) ── */
/* ── 헤더 등록 mini chip (avatar 옆) ── */
.header-reg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-right: 6px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--gray-50);
  text-decoration: none;
  font-size: 11px;
  color: var(--gray-700);
  height: 26px;
  position: relative;
}
.header-reg-chip:empty { display: none; }
.header-reg-chip:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}
.header-reg-chip-pct {
  font-weight: 700;
  color: var(--success-700, #047857);
  font-variant-numeric: tabular-nums;
}
.header-reg-chip-text {
  color: var(--gray-600);
  font-variant-numeric: tabular-nums;
}
.header-reg-chip-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-500, #0071e3);
  box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.5);
  animation: reg-widget-pulse 1.6s ease-out infinite;
}
.header-reg-chip .lucide { width: 12px; height: 12px; }

@media (max-width: 480px) {
  .header-reg-chip { padding: 4px 8px; }
  .header-reg-chip-text { display: none; }
}

/* ── 등록 현황 진행 중 카드 (상세 페이지 in_flight 행) ── */
.reg-flight-list { display: flex; flex-direction: column; gap: 8px; }
.reg-flight-row {
  display: grid;
  /* 4-col: checkbox | 썸네일 | 본문(1fr) | 액션. _in_flight.html 에서 사용 — 인라인
     style 로 grid-template-columns 를 덮어쓰면 @media wrap 룰이 무력화되므로
     반드시 클래스 통해 정의. (회귀 사례: 모바일 393px '재시' 잘림 2026-05-09) */
  grid-template-columns: 24px 56px 1fr auto;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  background: var(--gray-50);
  align-items: center;
}
.reg-flight-row.no-bulk {
  /* checkbox 없는 변형 (_recent_failures.html). */
  grid-template-columns: 56px 1fr auto;
}
.reg-flight-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; background: var(--gray-100);
}
.reg-flight-thumb-empty { background: var(--gray-100); }
.reg-flight-main { min-width: 0; }
.reg-flight-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.reg-flight-title {
  color: var(--gray-900); font-weight: 600; text-decoration: none;
  font-size: 13px;
}
.reg-flight-title:hover { color: var(--primary-600, #0071e3); }
.reg-flight-meta { font-size: 11px; color: var(--gray-500); }
.reg-flight-status { margin: 4px 0; display: flex; gap: 4px; flex-wrap: wrap; }
.reg-flight-badge {
  display: inline-block;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600; line-height: 1.4;
}
.reg-flight-badge-warn { background: var(--warning-50, #fff7ed); color: var(--warning-700, #c2410c); }
.reg-flight-badge-info { background: var(--primary-50, #eff6ff); color: var(--primary-700, #1d4ed8); }
.reg-flight-badge-gray { background: var(--gray-100); color: var(--gray-600); }
.reg-flight-badge-blue { background: var(--primary-50, #eff6ff); color: var(--primary-600, #0071e3); }
.reg-flight-reason {
  font-size: 12px; color: var(--gray-700);
  margin-top: 2px; line-height: 1.5;
}
.reg-flight-reason strong { color: var(--gray-500); font-weight: 600; margin-right: 4px; }
.reg-flight-action {
  font-size: 12px; color: var(--success-700, #047857);
  margin-top: 2px; line-height: 1.5;
}
.reg-flight-action strong { color: var(--gray-500); font-weight: 600; margin-right: 4px; }
.reg-flight-actions {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end; align-self: center;
}
@media (max-width: 720px) {
  /* 모바일/좁은 태블릿 — 썸네일+본문 2열로 압축, 액션은 다음 행 전체 폭. */
  .reg-flight-row { grid-template-columns: 24px 44px 1fr; gap: 8px; padding: 10px; }
  .reg-flight-row.no-bulk { grid-template-columns: 44px 1fr; }
  .reg-flight-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .reg-flight-thumb { width: 44px; height: 44px; }
  /* 본문 텍스트 wrap 유지 — 1fr 컨텐츠가 좁은 화면에서 강제로 늘어나지 않도록. */
  .reg-flight-main { min-width: 0; }
  .reg-flight-title { font-size: 12px; }
  .reg-flight-reason, .reg-flight-action { font-size: 11px; }
}
@media (max-width: 480px) {
  /* 매우 좁은 모바일 — 액션 버튼 라벨 짧게, btn-sm 폭 축소. */
  .reg-flight-actions .btn-sm { padding: 5px 10px; font-size: 11px; }
}

/* ── 등록 현황 위젯 (사이드바, brand 아래) ── */
.reg-widget {
  display: block;
  margin: 10px 14px 4px;
  padding: 10px 12px;
  border: 1px solid var(--gray-100);
  border-radius: 10px;
  background: var(--gray-50);
  text-decoration: none;
  color: var(--gray-900);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.reg-widget:hover {
  background: var(--gray-100);
  border-color: var(--gray-200);
}
.reg-widget-head {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 6px;
}
.reg-widget-ico { font-size: 14px; color: var(--gray-600); }
.reg-widget-ico.lucide { width: 14px; height: 14px; }
.reg-widget-title {
  font-size: 11px; font-weight: 700; color: var(--gray-700);
  letter-spacing: 0.02em; text-transform: uppercase;
  flex: 1;
}
.reg-widget-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary-500, #0071e3);
  box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.6);
  animation: reg-widget-pulse 1.6s ease-out infinite;
}
@keyframes reg-widget-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(0, 113, 227, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 113, 227, 0); }
}
/* 오늘 진행률 — N/M + 진행바 */
.reg-widget-progress {
  margin: 4px 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--gray-100);
}
.reg-widget-progress-text {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; color: var(--gray-500);
  margin-bottom: 4px;
}
.reg-widget-progress-text strong {
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.reg-widget-progress-bar {
  height: 6px; border-radius: 999px;
  background: var(--gray-100); overflow: hidden;
}
.reg-widget-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success-500, #34c759), var(--success-600, #15803d));
  transition: width 0.4s ease;
}
.reg-widget-progress-pct {
  text-align: right;
  font-size: 10px; font-weight: 600;
  color: var(--success-700, #047857);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.reg-widget-rows { display: flex; flex-direction: column; gap: 3px; }
.reg-widget-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
}
.reg-widget-label { color: var(--gray-500); }
.reg-widget-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 14px;
}
.reg-widget-num-blue  { color: var(--primary-600, #0071e3); }
.reg-widget-num-gray  { color: var(--gray-700); }
.reg-widget-num-green { color: var(--success-600); }
.reg-widget-num-red   { color: var(--danger-600); }
.reg-widget-row-warn { padding-top: 4px; border-top: 1px dashed var(--gray-100); margin-top: 2px; }
.reg-widget-foot {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--gray-100);
  font-size: 10px; color: var(--gray-500); text-align: right;
}

.sb-banner-wrap { padding: 10px 16px; border-top: 1px solid var(--gray-100); }
.sb-banner {
  display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
}
.sb-banner-warn  { background: var(--warning-50); border: 1px solid var(--warning-500); }
.sb-banner-trial { background: linear-gradient(135deg, var(--success-50), var(--warning-50)); border: 1px solid var(--warning-50); }
.sb-banner-tag   { font-size: 11px; color: #92400e; font-weight: 600; }
.sb-banner-title { font-size: 13px; color: var(--gray-900); font-weight: 700; margin-top: 2px; }
.sb-banner-hint  { font-size: 10px; color: var(--gray-500); margin-top: 2px; }

.sb-foot { padding: 12px 16px; border-top: 1px solid var(--gray-100); }
.sb-pwa-btn {
  display: none; width: 100%; margin-bottom: 8px; padding: 8px 12px;
  border: 1px solid var(--primary-200); border-radius: 8px;
  background: var(--primary-50); color: var(--primary-700);
  font-size: 12px; font-weight: 600; cursor: pointer;
  align-items: center; justify-content: center; gap: 6px;
}

/* ── empty-state aux ── */
.empty-state-icon { font-size: 32px; color: var(--gray-300); margin-bottom: 6px; }
.empty-state-icon .lucide { width: 32px; height: 32px; line-height: 1; }

/* ============================================================
   Data Table — 표준 표 컴포넌트 (06-refs §3, §5.4)
   사용처: 주문 목록·상품 목록·정산 표 등 P&L · 데이터 위주 표.
   spec: row 48px / padding 16px / sticky header / frozen 1열 / tabular nums
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.data-table thead th {
  /* 2026-05-13: sticky 제거 — wrapper 의 overflow-x:auto 가 새 stacking context 생성하여
     thead 의 top:var(--header-height) 가 wrapper top 기준으로 계산됨 → 첫 row 와 위치 충돌.
     dark mode 에서 row 의 데이터가 헤더 위치에 비쳐 보이는 회귀 (사용자 사진 검증) 의 근본 원인.
     thead 가 자연 흐름 위치에 정확히 1번만 렌더되도록 sticky 해제. */
  background: var(--bg-canvas);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--gray-500);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}
.data-table tbody td {
  height: 48px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  vertical-align: middle;
}
.data-table tbody tr:hover td { background: var(--hover-overlay); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* frozen 1열 — 좌측 sticky. 가로 스크롤 시 컨텍스트 유지 (06-refs §5.4 eleken) */
.data-table .col-frozen {
  position: sticky;
  left: 0;
  background: var(--surface-sticky);
  z-index: 5;
  box-shadow: 1px 0 0 var(--gray-200);
}
.data-table thead .col-frozen { z-index: 15; background: var(--bg-canvas); }

/* 숫자 셀 — 우정렬 + tabular numerals */
.data-table .num {
  text-align: right;
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.data-table .num.muted { color: var(--gray-500); }
.data-table .num.profit-pos { color: var(--profit-positive); font-weight: 600; }
.data-table .num.profit-neg { color: var(--profit-negative); font-weight: 600; }
.data-table .num.profit-warn { color: var(--profit-warning); font-weight: 600; }

/* 합계 footer 행 */
.data-table tfoot td {
  font-weight: 600;
  color: var(--gray-900);
  background: var(--bg-canvas);
  border-top: 2px solid var(--gray-200);
  padding: 12px 16px;
}
.data-table tfoot .col-frozen { background: var(--bg-canvas); }

/* 2026-05-13: 상태/메모/에러 등 가변 길이 셀이 옆 컬럼으로 흘러나오는 회귀 방지.
   - table-layout: fixed 는 .cc-orders-list 같이 명시 width 가 모든 컬럼에 있는 표에만 적용.
     전 .data-table 적용 시 width 미지정 표는 균등분배되어 레이아웃 깨짐 + sticky thead
     스택 컨텍스트 변경되어 row content 가 비쳐 보이는 회귀 발생 (dark mode 확인).
   - max-width 로 텍스트 줄바꿈은 그대로 유지 */
.data-table.cc-orders-list { table-layout: fixed; }

/* 데이터 테이블 mobile 회귀 차단 — wrapper 패턴 (2026-05-13).

   원인: inline width=N%/Npx 가 narrow viewport 에서 num 셀 폭을 ~25-35px 로
   줄여 nowrap+right-align 숫자가 좌측 overflow → 옆 셀과 시각적 overlap.

   해결 (Bootstrap .table-responsive 패턴 차용):
     - 테이블 자체는 건드리지 않음 (col-frozen sticky, border-collapse, …
       모든 native table 동작 유지).
     - 와이드 테이블 (.product-list-table / .data-table.cc-orders-list /
       .data-table-wide) 에 min-width:720px 적용. .table-wrap 부모가 가로
       스크롤 처리. opt-in 방식이라 컴팩트 표 (예: data-table-compact) 는
       자동 제외.
     - .table-wrap 래퍼 클래스 — 부모에 가로 스크롤 부여. 기존 inline
       `<div style="overflow-x:auto">` 를 단일 클래스로 표준화. */
.data-table-wide,
.data-table.cc-orders-list,
.product-list-table { min-width: 720px; }

/* table-wrap — 데이터 테이블 wrapper. overflow-x:auto + 둥근 모서리 일관성. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table .col-status,
.data-table .cell-error-msg,
.data-table .cell-wrap {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.data-table .cell-error-msg {
  max-height: 3.6em;        /* ~3줄 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* num 셀 좌측 overflow 안전망 — nowrap + right-align 패턴에서 셀이 콘텐츠
   보다 좁아질 때, 텍스트가 인접 셀로 넘어가 시각적 overlap 발생. min-width 가
   기본 보호이지만, 어떤 회귀 시나리오에서도 안전한 fallback. */
.data-table .num {
  overflow: hidden;
  text-overflow: clip;   /* ellipsis 는 숫자엔 부적합 (자리수 잘림 인식 어려움) — 차라리 clip */
}


/* 채널 chip — 표 1열에 사용 */
.ch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--gray-100);
  color: var(--gray-700);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ch-chip > * { min-width: 0; }
/* 표 셀 안에서 폭이 부족하면 chip 자체를 축소 표시 — 글자도 truncate. */
td .ch-chip { vertical-align: middle; }
.ch-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ch-naver    { background: rgba(3, 199, 90, 0.12);  color: var(--ch-naver); }
.ch-coupang  { background: rgba(225, 29, 72, 0.12); color: var(--ch-coupang); }
.ch-gmarket  { background: rgba(0, 122, 200, 0.12); color: var(--ch-gmarket); }
.ch-auction  { background: rgba(255, 206, 0, 0.18); color: #8B6A00; }
.ch-default  { background: rgba(156, 163, 175, 0.12); color: var(--ch-default); }
.ch-11st     { background: rgba(255, 107, 0, 0.12); color: var(--ch-11st); }
.ch-cafe24   { background: rgba(0, 102, 255, 0.12); color: var(--ch-cafe24); }
.ch-domeggook{ background: rgba(107, 114, 128, 0.12); color: var(--ch-domeggook); }

/* ============================================================
   Chart Helpers (PR-6) — bullet graph / horizontal bar / sparkline
   06-refs §4 — Stephen Few bullet > gauge / NN/g length·position
   ============================================================ */
/* Bullet — 단일 metric + 목표선 표시 (gauge 대체) */
.bullet-track {
  position: relative;
  height: 8px;
  background: var(--gray-100);
  border-radius: 4px;
  margin-top: 12px;
}
.bullet-fill {
  height: 100%;
  border-radius: 4px;
  transition: width var(--transition-slow);
  background: var(--profit-warning);
}
.bullet-fill.profit-pos { background: var(--profit-positive); }
.bullet-fill.profit-neg { background: var(--profit-negative); }
.bullet-mark {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  background: var(--gray-400);
}
.bullet-mark.target { background: var(--gray-700); }

/* Horizontal bar list — 채널·카테고리 비교 (pie/donut 대체) */
.hbar-list { display: flex; flex-direction: column; gap: 12px; }
.hbar-row {
  display: grid;
  grid-template-columns: 140px 1fr 220px;
  gap: 12px;
  align-items: center;
}
.hbar-label { font-size: 12px; }
.hbar-track {
  height: 12px;
  background: var(--gray-100);
  border-radius: 6px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width var(--transition-slow);
  background: var(--primary-500);
}
.hbar-fill.ch-naver     { background: var(--ch-naver); }
.hbar-fill.ch-coupang   { background: var(--ch-coupang); }
.hbar-fill.ch-gmarket   { background: var(--ch-gmarket); }
.hbar-fill.ch-auction   { background: var(--ch-auction); }
.hbar-fill.ch-default   { background: var(--ch-default); }
.hbar-fill.ch-11st      { background: var(--ch-11st); }
.hbar-fill.ch-cafe24    { background: var(--ch-cafe24); }
.hbar-fill.ch-domeggook { background: var(--ch-domeggook); }
.hbar-value {
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--gray-700);
}
@media (max-width: 768px) {
  .hbar-row { grid-template-columns: 1fr; gap: 4px; }
  .hbar-value { text-align: left; }
}

/* ── Admin chart helpers — trend chip + audit diff (2026-05-19) ──
   _admin_charts.html macro (trend_chip, diff_rows) 와 짝. 추가 의존 X. */
.trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.trend-chip.up      { background: var(--success-50); color: var(--success-700, var(--success-600)); }
.trend-chip.down    { background: var(--danger-50);  color: var(--danger-700, var(--danger-600)); }
.trend-chip.neutral { background: var(--gray-100);   color: var(--gray-500); }

.metric-card-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.metric-card-stack .metric-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.metric-card-stack .metric-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

/* Admin spotlight 트리거 — header 하단 fixed pill button (mobile 풀폭, desktop right). */
.admin-spotlight-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 24px 0;
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 12px;
  color: var(--gray-500);
  cursor: pointer;
  width: fit-content;
  transition: background var(--transition-fast);
}
.admin-spotlight-trigger:hover { background: var(--gray-100); color: var(--gray-700); }
.admin-spotlight-trigger kbd {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
  color: var(--gray-700);
}
@media (max-width: 768px) {
  .admin-spotlight-trigger { margin: 8px 16px 0; width: auto; justify-content: center; }
  .admin-spotlight-trigger kbd { display: none; }
}

/* Admin spotlight (cmd+k 사용자 검색) — admin_spotlight.js. 모든 admin 페이지
   공통 활성. 사용자 typing 흐름 방해 안 하도록 modal 패턴 + 최소 입력 후 fetch. */
.admin-spotlight {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 11000;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 16px 16px;
}
.admin-spotlight.open { display: flex; }
.admin-spotlight-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.admin-spotlight-panel {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.admin-spotlight-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gray-100);
}
.admin-spotlight-search .lucide { color: var(--gray-400); font-size: 18px; }
.admin-spotlight-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: var(--gray-900);
}
.admin-spotlight-search kbd {
  background: var(--gray-100);
  color: var(--gray-500);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
}
.admin-spotlight-list {
  list-style: none;
  padding: 6px;
  margin: 0;
  max-height: 360px;
  overflow-y: auto;
}
.admin-spotlight-item a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.admin-spotlight-item.active a { background: var(--primary-50, rgba(0, 113, 227, 0.08)); }
.admin-spotlight-item-main { display: flex; align-items: center; gap: 6px; }
.admin-spotlight-username { font-weight: 600; color: var(--gray-900); font-size: 14px; }
.admin-spotlight-item-meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.admin-spotlight-empty { padding: 24px; text-align: center; font-size: 13px; color: var(--gray-400); }
.admin-spotlight-hint {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--gray-100);
  font-size: 11px;
  color: var(--gray-500);
  flex-wrap: wrap;
}
.admin-spotlight-hint kbd {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  margin-right: 3px;
  font-family: inherit;
}
@media (max-width: 600px) {
  .admin-spotlight { padding: 40px 8px 8px; }
}

/* Typed confirmation modal — admin_confirm.js + 모든 destructive 액션 공통.
   data-table-cards 와 마찬가지로 모바일 풀스크린, 데스크탑 center. */
.admin-confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-confirm-modal.open { display: flex; }
.admin-confirm-box {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-confirm-title { margin: 0; font-size: 17px; color: var(--gray-900); font-weight: 600; }
.admin-confirm-body { font-size: 13px; color: var(--gray-700); line-height: 1.55; }
.admin-confirm-body code { background: var(--gray-100); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.admin-confirm-body .danger-line { color: var(--danger-700, var(--danger-600)); font-weight: 600; }
.admin-confirm-type-row { display: flex; flex-direction: column; gap: 6px; }
.admin-confirm-type-label { font-size: 12px; color: var(--gray-600); }
.admin-confirm-type-label code { font-weight: 700; }
.admin-confirm-type-input { font-family: var(--font-mono); }
.admin-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 600px) {
  .admin-confirm-box { max-width: none; }
}

.audit-diff-rows { display: flex; flex-direction: column; gap: 2px; }
.audit-diff-row {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  flex-wrap: wrap;
}
.audit-diff-key   { color: var(--gray-700); font-weight: 600; min-width: 90px; }
.audit-diff-del   { color: var(--danger-600); text-decoration: line-through; word-break: break-all; }
.audit-diff-add   { color: var(--success-700, var(--success-600)); word-break: break-all; }
.audit-diff-arrow { color: var(--gray-400); }

/* Health list — alert 항목 + count (대시보드 운영 상태 카드) */
.health-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.health-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-100);
}
.health-list li:last-child { border-bottom: none; }
.health-list li a { color: var(--gray-700); text-decoration: none; }
.health-list li:hover a { color: var(--gray-900); }
.health-list li strong {
  color: var(--gray-500);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.health-list li.warn strong { color: var(--warning-600); }

/* ============================================================
   Theme Switcher (header 우측 상단 — sun/moon/monitor 아이콘 + 드롭다운)
   ============================================================ */
.theme-switcher { position: relative; }
.theme-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 220;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-menu[hidden] { display: none; }
.theme-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.theme-menu-item:hover { background: var(--hover-overlay); color: var(--gray-900); }
.theme-menu-item.active { background: var(--primary-50); color: var(--primary-600); font-weight: 600; }
.theme-menu-item .check { margin-left: auto; opacity: 0; }
.theme-menu-item.active .check { opacity: 1; }

/* ============================================================
   User Menu (header 우측 상단 avatar 드롭다운 — 06-refs §1)
   Stripe / GitHub / Linear 표준 패턴: 이름·이메일 → 액션 → 분리선 → 로그아웃.
   ============================================================ */
.user-menu { position: relative; }
.user-avatar-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}
.user-avatar-btn:hover { border-color: var(--gray-300); }
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-500);
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 220;
  display: flex;
  flex-direction: column;
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-header {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 4px;
}
.user-menu-name { font-size: 13px; font-weight: 600; color: var(--gray-900); }
.user-menu-email { font-size: 12px; color: var(--gray-500); margin-top: 2px; word-break: break-all; }
.user-menu-divider { height: 1px; background: var(--gray-100); margin: 4px 0; }
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--gray-700);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.user-menu-item:hover { background: var(--hover-overlay); color: var(--gray-900); }
.user-menu-item.user-menu-logout { color: var(--danger-600); }
.user-menu-item.user-menu-logout:hover { background: var(--danger-50); color: var(--danger-600); }
.user-menu-item .lucide { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   Alert / Inline Banner (Phase 5, 2026-05-08)
   인라인 background + color + border 조합을 흡수.
   ============================================================ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  border: 1px solid transparent;
  border-left-width: 4px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}
.alert-success { background: var(--success-50); color: var(--success-700, var(--success-600)); border-color: var(--success-50); border-left-color: var(--success-500); }
.alert-warning { background: var(--warning-50); color: var(--warning-600); border-color: var(--warning-50); border-left-color: var(--warning-500); }
.alert-danger  { background: var(--danger-50);  color: var(--danger-600);  border-color: var(--danger-50);  border-left-color: var(--danger-500); }
.alert-info    { background: var(--info-50);    color: var(--info-500);    border-color: var(--info-50);    border-left-color: var(--info-500); }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert .alert-icon { flex-shrink: 0; opacity: 0.85; }

/* ============================================================
   Modal — 표준 다이얼로그
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: var(--surface-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 80px);
  overflow: auto;
  border: 1px solid var(--gray-200);
}
.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.modal-header h3 { font-size: 15px; font-weight: 600; color: var(--gray-900); }
.modal-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--gray-400); padding: 6px; border-radius: 6px;
}
.modal-close:hover { background: var(--gray-100); color: var(--gray-700); }
.modal-body { padding: 20px; }
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--gray-100);
  display: flex; gap: 8px; justify-content: flex-end;
}
.modal-lg { max-width: 800px; }
.modal-sm { max-width: 400px; }

@media (prefers-color-scheme: dark) {
  .modal-overlay { background: rgba(0, 0, 0, 0.6); }
  .modal { background: var(--gray-50); border-color: var(--gray-200); }
}

/* ============================================================
   Tabs — 가로 탭 네비게이션
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 16px;
}
.tab {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--gray-700); }
.tab.active {
  color: var(--gray-900);
  border-bottom-color: var(--primary-500);
  font-weight: 600;
}

/* ============================================================
   Switch / Toggle — on/off 스위치
   ============================================================ */
.switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0;
  background-color: var(--gray-300);
  border-radius: 20px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.switch .slider::before {
  content: "";
  position: absolute;
  height: 16px; width: 16px;
  left: 2px; top: 2px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: var(--shadow-xs);
}
.switch input:checked + .slider { background: var(--primary-500); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:disabled + .slider { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   Form Fieldset — 라벨 + 입력 + 도움말 + 에러
   ============================================================ */
.form-fieldset {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.form-fieldset > label,
.form-fieldset .form-label {
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 500;
}
.form-help {
  font-size: 12px;
  color: var(--gray-500);
  line-height: 1.4;
}
.form-error {
  font-size: 12px;
  color: var(--danger-600);
}
.form-fieldset.required > label::after {
  content: " *";
  color: var(--danger-500);
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.pagination .page,
.pagination a, .pagination button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--surface);
  color: var(--gray-700);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pagination .page:hover,
.pagination a:hover { border-color: var(--gray-300); background: var(--gray-50); }
.pagination .page.active,
.pagination .page[aria-current="page"] {
  background: var(--primary-600);
  color: white;
  border-color: var(--primary-600);
}
.pagination .page.disabled,
.pagination [aria-disabled="true"] {
  color: var(--gray-300); cursor: not-allowed; pointer-events: none;
}
.pagination .ellipsis { padding: 0 4px; color: var(--gray-400); border: 0; background: transparent; }


/* ============================================================
   View Mode Toggle — 목록 / 카드 / 컴팩트 segmented control.
   레퍼런스: Cafe24 상품관리, Shopify Products, Notion DB views, NN/g List vs Grid.
   클릭 시 cookie + localStorage 동기화 후 페이지 reload.
   ============================================================ */
.view-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: var(--gray-100);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
}
.view-mode-toggle .vm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.view-mode-toggle .vm-btn .lucide { font-size: 14px; line-height: 1; }
.view-mode-toggle .vm-btn:hover { color: var(--gray-900); }
.view-mode-toggle .vm-btn.active {
  background: var(--surface);
  color: var(--gray-900);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.view-mode-toggle .vm-btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .view-mode-toggle .vm-label { display: none; }
  .view-mode-toggle .vm-btn { padding: 6px 8px; }
}

/* ── 페이지 상단 toolbar (헤더 — 페이지 액션 버튼) ── */
.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.list-toolbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── results bar — list-view 카드 바로 위 전용 행.
   좌: 결과/필터 요약, 우: view-mode 토글.
   Shopify/Linear/Notion 패턴 — 페이지 액션 버튼과 분리되어 위치가 viewport 폭에
   따라 흔들리지 않음. standalone 박스 (어떤 컨테이너 위에도 어울림). ── */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--gray-600);
}
.results-bar-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.results-bar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 480px) {
  .results-bar { padding: 8px 10px; }
}

/* ── 표 가로 overflow 가드 — 좁은 viewport 에서 카드 안 표가 잘리는 문제 방지.
   .card { overflow: hidden } 와 fixed-width 셀 합이 카드 폭 초과 시 우측 텍스트
   잘림. 테이블을 .scroll-x 로 감싸면 가로 스크롤 가능. ── */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.scroll-x > table { min-width: max-content; }
/* NOTE: 이전엔 좁은 viewport(≤640 또는 ≤768)에서 list/compact 를 자동으로 카드 mode
   로 강제 전환했음. 그러나 fluid base (table-layout:fixed + word-break) 가 어떤
   viewport 에서도 우측 잘림 없이 비율 스케일링하므로 강제 전환은 사용자 선택을
   무력화하는 부작용만 냄 (사용자가 "목록"/"컴팩트" 클릭해도 카드만 보이는 버그).
   이제는 사용자의 data-view 선택을 모든 viewport 에서 존중. 좁은 viewport 에서
   list 모드의 가독성이 떨어진다고 느끼면 사용자가 직접 "카드" 토글 가능. */

/* ── 반응형 grid utility — 가로폭 부족 시 자동 stack ── */
.grid-auto-2 {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr);
  gap: 14px;
}
@media (max-width: 720px) {
  .grid-auto-2 { grid-template-columns: minmax(0, 1fr); }
}
.grid-auto-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* 페이지당 항목 수 select (25/50/100) — view-mode 토글과 같은 톤 */
.per-page-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-600); cursor: pointer;
}
.per-page-select {
  padding: 5px 8px;
  font-size: 12px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--surface-input);
  color: var(--gray-900);
  cursor: pointer;
}
.per-page-select:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .per-page-label .vm-label { display: none; }
}

/* ============================================================
   Product List — 3 모드 공유 클래스. data-view 로 전환.
   ============================================================ */

/* ── 카드 그리드 (data-view="card") ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  padding: 16px;
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.product-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}
.product-card-img {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card-img img { width: 100%; height: 100%; object-fit: cover; }
.product-card-img.placeholder { color: var(--gray-300); font-size: 28px; }
.product-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.product-card-title {
  font-size: 13px;
  line-height: 1.4;
  color: var(--gray-900);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(13px * 1.4 * 2);
}
.product-card-title a { color: inherit; text-decoration: none; }
.product-card-meta {
  font-size: 11px;
  color: var(--gray-500);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.product-card-prices {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.product-card-prices .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.product-card-prices .label { font-size: 10px; color: var(--gray-500); }
.product-card-prices .supply { font-size: 12px; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.product-card-prices .selling {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────────
   통합 데이터 테이블 base — 모든 list/compact 표가 공유.

   핵심 원칙:
   1. ``table-layout: fixed`` + ``width: 100%`` → 컬럼 너비 합이 viewport 를
      초과해도 비율 스케일링되어 절대 가로 overflow 안 발생. 사용자가 보고한
      "우측 잘림" 의 근본 원인이 이걸로 사라짐.
   2. 셀 ``word-break: break-word`` + ``overflow-wrap: break-word`` → 좁은
      viewport 에서도 텍스트 wrap, 가로 스크롤 불필요.
   3. compact 변형은 dense ellipsis 사용 (``white-space: nowrap`` + ``overflow:
      hidden`` + ``text-overflow: ellipsis``). table-layout: fixed 가 컬럼
      너비를 보장하므로 ellipsis 클리핑이 안전.
   4. 페이지별 전용 .reg-review-* / data-page 룰 폐기. 모든 list/compact 표가
      이 base 만으로 좁은 viewport 에서도 정상 동작.

   클래스 alias: .product-list-table / .product-compact-table / .cc-data-table
   세 클래스가 동일 base 공유 — 신규 페이지는 .cc-data-table 사용 권장.
   ────────────────────────────────────────────────────────────────────── */
.product-list-table,
.product-compact-table,
.cc-data-table,
table.w-full,
table.data-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.product-list-table thead,
.product-compact-table thead,
.cc-data-table thead {
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--gray-200);
}
.product-list-table thead th,
.product-compact-table thead th,
.cc-data-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap; /* 헤더는 짧은 라벨이라 wrap 보다 nowrap 이 자연스러움 */
}
.product-list-table tbody td,
.product-compact-table tbody td,
.cc-data-table tbody td {
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.product-list-table tbody tr:hover,
.product-compact-table tbody tr:hover,
.cc-data-table tbody tr:hover { background: var(--hover-overlay); }
.product-list-table .num,
.product-compact-table .num,
.cc-data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.product-list-table .center,
.product-compact-table .center,
.cc-data-table .center { text-align: center; }

/* ── .w-full / .data-table — 별도 디자인 클래스(.cc-data-table 미사용)지만 fluid 동작은 공유.
   td word-break 만 추가하여 좁은 viewport 에서 가로 overflow 방지. ── */
table.w-full td,
table.data-table td {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── 와이드 그리드 (cc-table-wide) — 동적 컬럼 수 + sticky 첫 컬럼 + 부모
   overflow-x:auto 패턴. plans_matrix 같이 컬럼 수가 가변이고 컬럼별 min-width
   가 의미있는 표는 fixed-layout 이 부적절. 가로 스크롤 허용이 정답. ── */
table.cc-table-wide {
  width: 100%;
  border-collapse: collapse;
  /* table-layout: auto 명시 — 위 fluid base 클래스가 fixed 를 강제하는 경우 대비 */
  table-layout: auto;
}

/* ── List 변형 — 13px 폰트, 10/12 패딩, 셀 wrap, vertical-align: top ── */
.product-list-table,
.cc-data-table { font-size: 13px; }
.product-list-table thead th,
.cc-data-table thead th { padding: 10px 12px; font-size: 11px; }
.product-list-table tbody td,
.cc-data-table tbody td {
  padding: 10px 12px;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: break-word;
}
.product-list-table .thumb,
.product-list-table .thumb-placeholder,
.cc-data-table .thumb,
.cc-data-table .thumb-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  font-size: 18px;
}

/* ── Compact 변형 — 12px 폰트, 6/10 패딩, dense ellipsis ── */
.product-compact-table { font-size: 12px; }
.product-compact-table thead th { padding: 6px 10px; font-size: 10px; }
.product-compact-table tbody td {
  padding: 6px 10px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-compact-table .title-cell { max-width: 360px; }

/* ── 공통 column-width 헬퍼 — list/compact/data-table 모두 사용 가능.
   ``<th class="col-wide">`` 형태로 inline width 대체. 순수 % 기반 (min-width 없음)
   이라 좁은 viewport 에서도 부모를 초과해 overflow 시키지 않음. table-layout:fixed
   가 비율을 정확히 유지. ── */
.cc-col-fluid    { width: auto; }
.cc-col-narrow   { width: 8%; }
.cc-col-mid      { width: 14%; }
.cc-col-wide     { width: 28%; }
.cc-col-actions  { width: 16%; }
.cc-col-thumb    { width: 9%; }
.cc-col-checkbox { width: 5%; }

/* ── 반응형 컬럼 숨김 — 좁은 viewport 에서 우선순위 낮은 컬럼 hide.
   많은 컬럼을 가진 표(주문 list 10 cols 등)에서 cardmode 강제 없이도 가독성
   유지. ``<th class="cc-hide-md">`` + 같은 row 의 ``<td class="cc-hide-md">``.
   tfoot 의 colspan 도 함께 조정 필요.
   .cc-hide-lg  ≤1024px 부터 hide (사이드바 collapsed 영역)
   .cc-hide-md  ≤768px 부터 hide (drawer 모드)
   .cc-hide-sm  ≤480px 부터 hide (mobile narrow)
   ── */
@media (max-width: 1024px) {
  .cc-hide-lg { display: none !important; }
}
@media (max-width: 768px) {
  .cc-hide-md { display: none !important; }

  /* 와이드 P&L 표(cc-orders-list)의 모바일 회귀 차단 (2026-05-29).
     이 표는 cc-hide-md/lg 로 모바일에서 5컬럼(판매처·상품·수량·판매가·실수익)만
     남도록 설계됐다. 그러나 .cc-orders-list 의 무조건 min-width:720px(가로스크롤용)
     + table-layout:fixed + 10컬럼 기준 고정 width% 가 남은 컬럼을 720px 로 늘여
     ① 가로 스크롤 발생 ② 핵심 컬럼(실수익)이 화면 밖으로 밀림 ③ 판매처 칩 잘림
     을 유발했다. 모바일에선 이 셋을 해제해 '컬럼 숨김' 설계가 실제로 화면에 맞도록
     한다 (강제 카드 전환 아님 — 폐기된 per-page 강제룰 회귀 방지).
     [[data-table 모바일 카드 패턴]] 의 와이드-표 분기를 완성하는 규칙. */
  .data-table.cc-orders-list { min-width: 0; table-layout: auto; }
  .data-table.cc-orders-list th,
  .data-table.cc-orders-list td { width: auto !important; }
}
@media (max-width: 480px) {
  .cc-hide-sm { display: none !important; }
}

/* ── 모바일 thumb 충돌 회피 (≤480px)
   원인: .thumb 가 fixed 44px 인데 .cc-col-thumb 가 9% — 414px viewport 에서 37px.
   image (44px) > cell (37px) 라 다음 cell 영역 침범 → text 와 시각적 겹침.
   해결: image 를 부모 cell 폭에 fit (max-width 100%) + cell 비율 조정.
   ── */
@media (max-width: 480px) {
  .product-list-table .thumb,
  .product-list-table .thumb-placeholder,
  .cc-data-table .thumb,
  .cc-data-table .thumb-placeholder {
    width: 100%;
    max-width: 40px;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  /* 5-col table 모바일 비율 재배분 — text(상품) 더 넓게, thumb 조금 더 넓게 */
  .cc-col-thumb    { width: 14%; }
  .cc-col-wide     { width: 36%; }
  .cc-col-actions  { width: 22%; }
}

/* ── data-view 컨테이너: 활성 layout 만 보이도록 ── */
.list-view[data-view] .lv-list,
.list-view[data-view] .lv-card,
.list-view[data-view] .lv-compact { display: none; }
.list-view[data-view="list"] .lv-list { display: block; }
.list-view[data-view="card"] .lv-card { display: block; }
.list-view[data-view="compact"] .lv-compact { display: block; }

/* 폰(≤480) 강제 카드 — 다컬럼 데이터 표는 폰 폭에서 내용에 맞춰도 들어가지 않아
   (주문 P&L 5컬럼 ≈ 504px > 390px) 핵심 컬럼(실수익)이 가로 스크롤 너머로 밀린다.
   .list-view 를 쓰는 모든 목록(주문·상품·소싱·등록검수 5개)이 lv-card 를 갖추고
   있으므로, 폰에서는 저장된 view-mode 와 무관하게 카드로 보여 세로 스택 + 잘림 0 을
   보장한다. 데스크탑/태블릿(>480)은 사용자의 목록/카드/컴팩트 선택을 그대로 존중
   → 폐기된 'tablet(≤1024) 강제 카드' 버그와 다르다(그건 표가 맞는 폭에서까지 선택을
   덮어써 문제였음). 토글은 폰에서 효과가 없으므로 숨긴다 (NN/g — 효과 없는 컨트롤 비노출). */
@media (max-width: 480px) {
  .list-view[data-view] .lv-list,
  .list-view[data-view] .lv-compact { display: none !important; }
  .list-view[data-view] .lv-card { display: block !important; }
  .results-bar .view-mode-toggle { display: none !important; }

  /* 폰에서 가로 입력행(입력칸 + 버튼 한 줄)이 안 좁혀져 버튼/입력이 화면 밖으로
     밀리는 회귀 차단 (settings/security 2FA·passkey·IP 폼 2026-05-29 라이브 확인).
     입력행은 form/div 가리지 않고 `.flex.items-end` 패턴을 쓰므로 그것을 타깃 →
     form-row·버튼을 전체폭으로 wrap(세로 스택). form-row 내부는 column 이라
     라벨+입력 정렬 유지. recurrence-proof (개별 폼 수정 불요). */
  .flex.items-end { flex-wrap: wrap; }
  .flex.items-end > .form-row { flex: 1 1 100% !important; min-width: 0; }
  .flex.items-end > .btn { width: 100%; justify-content: center; }
}

/* NOTE: 페이지별 ``data-page`` 강제 카드 모드 룰은 폐기됨.
   이전엔 reg-review 가 좁은 viewport 에서 우측 잘리는 회피책으로 ≤1024px 에서
   카드로 강제 전환했으나, 사용자가 list/compact 를 선택해도 카드로 고정되는
   버그 발생. 통합 fluid table 이 좁은 viewport 에서도 잘림 없이 표시하므로
   페이지별 강제 룰 불필요. */

/* ── 카드 위 overlay (소싱 검색 결과용 체크박스 + 상태 배지) ── */
.product-card.has-overlay { position: relative; }
.product-card-checkbox-overlay {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 26px; height: 26px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.product-card-checkbox-overlay input { width: 16px; height: 16px; cursor: pointer; }
.product-card-state-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  padding: 3px 8px; border-radius: 12px;
  font-size: 10px; font-weight: 600;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.product-card-state-badge.listed       { color: var(--success-600); border: 1px solid var(--success-50); }
.product-card-state-badge.sourced      { color: var(--warning-600); border: 1px solid var(--warning-50); }
.product-card-state-badge.dismissed    { color: var(--gray-500);    border: 1px solid var(--gray-200); }
.product-card-state-badge.similar_listed,
.product-card-state-badge.similar_sourced { color: var(--gray-700); background: var(--gray-50); border: 1px solid var(--gray-200); }
.product-card.is-blocked { opacity: 0.55; }
.product-card.is-blocked .product-card-checkbox-overlay input { cursor: not-allowed; }

/* ── 약어 도움말 (?) — hover/focus 시 풀 설명 버블. data-hint 속성에 텍스트. ── */
.cs-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  margin-left: 3px;
  border-radius: 50%;
  color: var(--gray-400);
  cursor: help;
  vertical-align: middle;
  position: relative;
  outline: none;
}
.cs-hint:hover, .cs-hint:focus { color: var(--primary-500); }
.cs-hint .lucide { font-size: 13px; line-height: 1; }
.cs-hint::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 6px;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s, visibility .12s;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.cs-hint::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gray-900);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s, visibility .12s;
  z-index: 51;
}
.cs-hint:hover::after, .cs-hint:focus::after,
.cs-hint:hover::before, .cs-hint:focus::before {
  opacity: 1;
  visibility: visible;
}

/* /orders/ 상태 셀의 긴 에러 메시지 — 클릭 expand (모바일 친화) + hover title (데스크탑) */
details.error-detail summary {
  list-style: none;
  cursor: pointer;
}
details.error-detail summary::-webkit-details-marker {
  display: none;
}
details.error-detail[open] summary .error-detail-toggle {
  display: none;  /* 펼친 후 [펼치기] 라벨 숨김 */
}
details.error-detail[open] summary {
  font-weight: 500;  /* 펼쳐진 summary 강조 */
}

/* ============================================================
   .data-table-cards — 모바일에서 카드 스택 레이아웃으로 자동 전환
   ============================================================
   목적 (2026-05-17 d0rk):
     좁은 viewport (≤ 640px) 에서 .data-table 의 num 컬럼이 nowrap 으로
     자리 차지 → 텍스트 컬럼(상품명 등) 이 1글자폭까지 압축되어 한글이
     세로로 깨지는 회귀가 반복 발견됨. table.data-table td 에
     `word-break: break-word` 가 적용되어 CJK 문자가 매 글자마다 break.

   해결: 모바일에서 thead 숨김 + 각 row 가 vertical card 로 stack.
     td 마다 `data-label` 속성을 두고 ::before 로 라벨 표시.
     모든 필드 가시 + 줄바꿈 자연스러움 + horizontal scroll 불필요.

   사용:
     <table class="data-table data-table-cards">
       ...
       <td data-label="상품명">...</td>
       <td data-label="매출" class="num">...</td>
     </table>

   주의: 적용 대상은 row 수가 적은 drill-down 표 (Top5, 작은 상태표).
     주문 목록처럼 N>50 인 큰 표는 horizontal scroll 패턴(.data-table-wide) 유지.

   breakpoint ≤768 (2026-05-29): 액션 버튼(처리/삭제 등)을 가진 7컬럼 검토 표
     (policy-violations·margin_scoped 등)는 641~768(타블렛)에서도 컬럼이 좁아
     버튼이 셀 밖으로 돌출했다. 카드 전환 기준을 ≤640→≤768 로 올려 타블렛에서도
     카드로 stack (적용 대상이 전부 카드 친화적 목록이라 안전). */
@media (max-width: 768px) {
  .data-table-cards thead { display: none; }
  .data-table-cards,
  .data-table-cards tbody,
  .data-table-cards tr,
  .data-table-cards td { display: block; width: auto; }
  /* 와이드 테이블(.product-list-table 등 min-width:720px) 이 카드 스택 시에도 720px 를
     유지해 우측 잘림(reg-review 사유 컬럼 clip, 2026-05-27 라이브 확인)이 나던 문제 —
     카드 모드에선 min-width 해제해 viewport 폭에 맞춰 stack. */
  .data-table-cards { min-width: 0 !important; }
  /* [hidden] 우선순위 회복 — display:block 이 attribute hidden 의 display:none 을
     덮어버리던 회귀 (Top5 탭 토글 시 두 tbody 동시 노출). */
  .data-table-cards [hidden],
  .data-table-cards tbody[hidden] { display: none !important; }
  .data-table-cards tr {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--surface);
    margin: 10px;
    padding: 12px 14px;
  }
  .data-table-cards tbody tr + tr { margin-top: 10px; }
  .data-table-cards tbody td {
    height: auto;
    padding: 6px 0;
    border-bottom: none;
    /* CJK 텍스트 정상 줄바꿈 — break-word 해제하여 단어 단위 wrap. */
    word-break: keep-all;
    overflow-wrap: anywhere;
    /* base 표(product-compact-table 등)의 nowrap·ellipsis 를 카드모드에서 해제 —
       카드에선 셀 값이 한 줄로 잘리지 않고 전부 보여야 한다 (2026-05-29 dormant/bulk
       /duplicates 가 compact-table 의 white-space:nowrap 을 물려받아 값이 잘리던 회귀). */
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
  }
  .data-table-cards tbody td.num {
    /* 모바일에선 우정렬 풀고 라벨-값 inline 노출 */
    text-align: left;
    white-space: normal;
    overflow: visible;
  }
  .data-table-cards tbody td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 72px;
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-right: 8px;
  }
  /* index(#) 컬럼은 카드 헤더처럼 — 라벨 숨김 + 강조 */
  .data-table-cards tbody td.row-index {
    font-weight: 700;
    color: var(--gray-900);
    font-size: 13px;
    padding: 2px 0 8px;
    border-bottom: 1px dashed var(--gray-100);
    margin-bottom: 6px;
  }
  .data-table-cards tbody td.row-index::before { display: none; }
  /* a 링크 색상 유지 */
  .data-table-cards tbody td a { color: var(--gray-900); text-decoration: none; }
  .data-table-cards tbody td.num.profit-pos,
  .data-table-cards tbody td.num.profit-neg,
  .data-table-cards tbody td.num.profit-warn { font-weight: 700; }
}

/* ═══════════════════════════════════════════════════════════════
   자동화 설정 (/settings/automation, 2026-05-27)
   plan 업셀 유인 — 권한 없는 기능은 grayed-out + 업그레이드 CTA.
   타겟(40-50대) 가독성 우선 · Apple HIG 토큰 재사용.
   ═══════════════════════════════════════════════════════════════ */
.auto-hero {
  display: flex; gap: 16px; align-items: center;
  background: linear-gradient(135deg, #0071e3 0%, #2b8fff 100%);
  color: #fff; border-radius: var(--radius-lg, 14px);
  padding: 20px 22px; margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(0, 113, 227, .25);
}
.auto-hero__icon { flex-shrink: 0; }
.auto-hero__icon .lucide { width: 32px; height: 32px; }
.auto-hero__text { display: flex; flex-direction: column; gap: 4px; }
.auto-hero__text strong { font-size: 16px; }
.auto-hero__text span { font-size: 13px; opacity: .92; line-height: 1.55; }

.auto-form { display: flex; flex-direction: column; gap: 16px; }
.auto-section { padding: 0; overflow: hidden; }
.auto-section__head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--gray-100);
}
.auto-section__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: var(--primary-50); color: var(--primary-500);
  display: flex; align-items: center; justify-content: center;
}
.auto-section__icon .lucide { width: 20px; height: 20px; }
.auto-section__title { flex: 1; min-width: 0; }
.auto-section__title h2 { font-size: 16px; font-weight: 600; margin: 0 0 3px; color: var(--gray-900); }
.auto-section__title p { font-size: 13px; color: var(--gray-500); margin: 0; line-height: 1.5; }
.auto-section__body { padding: 6px 20px 14px; }

.auto-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--gray-100);
}
.auto-row:last-child { border-bottom: none; }
.auto-row--block { flex-direction: column; align-items: stretch; }
.auto-row__label { display: flex; flex-direction: column; gap: 3px; }
.auto-row__label > span { font-size: 14px; font-weight: 500; color: var(--gray-900); }
.auto-row__label small { font-size: 12px; color: var(--gray-500); line-height: 1.5; }

/* 스위치 토글 */
.switch { position: relative; display: inline-block; width: 46px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; inset: 0; cursor: pointer; background: var(--gray-300);
  border-radius: 999px; transition: .2s;
}
.switch__slider::before {
  content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + .switch__slider { background: var(--primary-500); }
.switch input:checked + .switch__slider::before { transform: translateX(18px); }
.switch input:disabled + .switch__slider { cursor: not-allowed; }

.auto-select {
  /* 2026-07-02 테마 정합 fix: 종전 background:#fff 하드코딩이라 다크 테마에서 흰 박스로
     떠 어긋났음 → --surface-input(라이트=white/다크=gray-100). 네이티브 화살표도 테마와
     안 맞아 appearance 제거 후 커스텀 chevron(중립 그레이, 양 테마 판독). */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 9px 34px 9px 12px; border: 1px solid var(--gray-200); border-radius: 8px;
  font-size: 14px; background-color: var(--surface-input); color: var(--gray-900);
  min-width: 150px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.auto-select:hover { border-color: var(--gray-300); }
.auto-select:focus { outline: none; border-color: var(--primary, #0071e3); box-shadow: 0 0 0 3px var(--primary-a15, rgba(0,113,227,.15)); }
.auto-select:disabled { background-color: var(--gray-50); cursor: not-allowed; opacity: .6; }

/* 우선 소싱 키워드 (2026-07-02) — 테마 변수만 사용(다크/라이트 자동) */
.auto-kw-add { display: flex; gap: 8px; margin-bottom: 14px; }
.auto-input {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--gray-200);
  border-radius: 8px; font-size: 14px; background-color: var(--surface-input); color: var(--gray-900);
}
.auto-input:focus { outline: none; border-color: var(--primary, #0071e3); box-shadow: 0 0 0 3px var(--primary-a15, rgba(0,113,227,.15)); }
.auto-kw-list { display: flex; flex-wrap: wrap; gap: 8px; }
.auto-kw {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  border: 1px solid var(--gray-200); border-radius: 999px;
  background-color: var(--surface-input); font-size: 13px; color: var(--gray-900);
}
.auto-kw--auto { border-style: dashed; color: var(--gray-600); }
.auto-kw__badge { font-size: 11px; color: var(--gray-500); background-color: var(--gray-100); padding: 2px 7px; border-radius: 999px; }
.auto-kw__del { display: inline-flex; margin: 0; }
.auto-kw__del button { border: none; background: none; cursor: pointer; color: var(--gray-500); font-size: 16px; line-height: 1; padding: 0 2px; }
.auto-kw__del button:hover { color: var(--danger, #ff3b30); }
.auto-trend-toggle { margin: 0; display: inline-flex; align-items: center; }

/* per-market 선택 그리드 */
.auto-market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.auto-market {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid var(--gray-200); border-radius: 10px; transition: .15s;
}
.auto-market input { position: absolute; opacity: 0; }
.auto-market__check {
  width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--gray-300);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: .15s;
}
.auto-market__check .lucide { width: 14px; height: 14px; color: #fff; opacity: 0; }
.auto-market input:checked ~ .auto-market__check { background: var(--primary-500); border-color: var(--primary-500); }
.auto-market input:checked ~ .auto-market__check .lucide { opacity: 1; }
.auto-market input:checked ~ .auto-market__name { color: var(--gray-900); font-weight: 600; }
.auto-market:has(input:checked) { border-color: var(--primary-500); background: var(--primary-50); }
.auto-market__name { font-size: 14px; color: var(--gray-700); }

/* 라디오 카드 (CS 모드) */
.auto-radio-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 10px; }
.auto-radio {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; cursor: pointer;
  border: 1.5px solid var(--gray-200); border-radius: 10px; transition: .15s;
}
.auto-radio input { position: absolute; opacity: 0; }
.auto-radio.is-active, .auto-radio:has(input:checked) { border-color: var(--primary-500); background: var(--primary-50); }
.auto-radio__title { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.auto-radio__desc { font-size: 12px; color: var(--gray-500); line-height: 1.4; }

/* 상태 칩 */
.auto-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.auto-chip .lucide { width: 13px; height: 13px; }
.auto-chip--on { background: var(--success-50); color: var(--success-700); }
.auto-chip--lock { background: var(--gray-100); color: var(--gray-600); }

/* 잠금 섹션 */
.auto-section.is-locked .auto-section__body { opacity: .55; }
.auto-lockbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 14px 20px; padding: 12px 14px; border-radius: 10px;
  background: linear-gradient(135deg, #fff6e6, #fff);
  border: 1px solid var(--warning-200, #ffe0a3);
}
.auto-lockbar .lucide { color: var(--warning-600, #c77700); width: 16px; height: 16px; flex-shrink: 0; }
.auto-lockbar span { font-size: 13px; color: var(--gray-700); flex: 1; min-width: 160px; }
.auto-upgrade-btn { flex-shrink: 0; }

/* 저장 바 */
.auto-save-bar { display: flex; justify-content: flex-end; padding: 4px 0 8px; }

/* AI 기능 그리드 */
.auto-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.auto-feature { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--gray-100); border-radius: 10px; }
.auto-feature.is-locked { opacity: .7; }
.auto-feature__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; background: var(--gray-50); color: var(--primary-500); display: flex; align-items: center; justify-content: center; }
.auto-feature__icon .lucide { width: 18px; height: 18px; }
.auto-feature__title { font-size: 14px; font-weight: 600; color: var(--gray-900); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.auto-feature__body p { font-size: 12.5px; color: var(--gray-500); margin: 4px 0 0; line-height: 1.5; }
.auto-upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--primary-50); }
.auto-upsell strong { display: block; font-size: 14px; color: var(--gray-900); }
.auto-upsell span { font-size: 13px; color: var(--gray-600); }
.auto-empty { font-size: 13px; color: var(--gray-500); }

/* 사이드바 강조 단독 항목 */
.nav-item--automation {
  position: relative;
  background: linear-gradient(135deg, rgba(0,113,227,.10), rgba(43,143,255,.04));
  border: 1px solid rgba(0,113,227,.18);
  margin: 4px 0;
}
.nav-item--automation:hover { background: linear-gradient(135deg, rgba(0,113,227,.16), rgba(43,143,255,.07)); }
.nav-item--automation.active { background: var(--primary-500); border-color: var(--primary-500); }
.nav-item--automation .nav-spark { color: var(--primary-500); }
.nav-item--automation.active .nav-spark { color: #fff; }
.nav-pro-badge {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--primary-500); color: #fff;
}
.nav-item--automation.active .nav-pro-badge { background: rgba(255,255,255,.25); }

@media (max-width: 640px) {
  .auto-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .auto-row .switch, .auto-row .auto-select { align-self: flex-start; }
  .auto-market-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 대시보드 — 실수익 분리(profit-split) / 신규 시작 가이드 / KPI 카드 순서 ──
   profit-split 은 dashboard/index.html 의 인라인 <style> 에서 이전 (2026-05-29). */
.profit-split { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--gray-100); display: flex; flex-direction: column; gap: 6px; }
.profit-split-item { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.profit-split-item .ps-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ps-dot--confirmed { background: var(--success, #10b981); }
.ps-dot--pending { background: var(--warning, #f59e0b); }
.profit-split-item .ps-label { color: var(--gray-600); }
.profit-split-item .ps-val { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* 신규 사용자 시작 가이드 — 빈 계정에서만 노출. 토큰 기반이라 라이트/다크 모두 안전. */
.dash-firstrun { border: 1px solid var(--primary-200); background: var(--primary-50); }
.dash-firstrun .card-body { padding: 20px 24px; }
.dash-firstrun-head { display: flex; align-items: flex-start; gap: 14px; }
.dash-firstrun-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--primary-600); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.dash-firstrun-icon .lucide { width: 24px; height: 24px; }
.dash-firstrun-title { font-size: 18px; font-weight: 700; color: var(--gray-900); line-height: 1.3; }
.dash-firstrun-sub { font-size: 14px; color: var(--gray-600); margin-top: 3px; }
.dash-firstrun-steps {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.dash-firstrun-steps li {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 12px 14px;
}
.dash-firstrun-steps li > div { min-width: 0; }
.dash-firstrun-steps .dfr-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-600); color: #fff;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.dash-firstrun-steps li b { display: block; font-size: 14px; color: var(--gray-900); }
.dash-firstrun-steps li span { display: block; font-size: 12px; color: var(--gray-600); line-height: 1.45; margin-top: 1px; word-break: keep-all; }
.dash-firstrun-cta { margin-top: 18px; }

@media (max-width: 768px) {
  .dash-firstrun .card-body { padding: 18px; }
  .dash-firstrun-steps { grid-template-columns: 1fr; }
  .dash-firstrun-cta { width: 100%; justify-content: center; }
  /* 모바일에선 '운영 상태(할 일)' 카드를 KPI 맨 위로 — NN/G goal-driven layout.
     단일 .dash-kpi-grid 안에서 order 로만 이동(데스크탑 source order 유지). */
  .dash-kpi-grid .dash-todo-card { order: -1; }
}