/* 불사자싱크 — DESIGN-SYSTEM.md 확정 CSS (목업 a-light-admin.html <style> 이식).
   임의 변형 금지. 토큰·컴포넌트는 UI-SPEC 계약 그대로. */

:root {
  --bg: #f8fafc; --card: #ffffff; --border: #e2e8f0;
  --text: #0f172a; --sub: #64748b; --accent: #2563eb;
  --success: #16a34a; --success-bg: #f0fdf4; --fail: #dc2626;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--text); font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 15px; line-height: 1.5; }
header { background: var(--card); border-bottom: 1px solid var(--border); padding: 0 32px; display: flex; align-items: center; gap: 28px; }
header .logo { font-size: 17px; font-weight: 700; padding: 14px 0; }
nav { display: flex; gap: 4px; height: 100%; }
nav a { padding: 16px 14px 13px; font-size: 14px; color: var(--sub); text-decoration: none; border-bottom: 3px solid transparent; cursor: pointer; }
nav a.on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
header .conn-mini { margin-left: auto; font-size: 13px; color: var(--success); }
header .conn-mini.off { color: var(--sub); }
main { max-width: 960px; margin: 32px auto; padding: 0 24px; display: grid; gap: 24px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 24px; }
.card h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.row { display: flex; gap: 10px; align-items: center; }
input[type=password], select { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; background: #fff; }
input[type=password] { flex: 1; }
.btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn.secondary { background: #fff; color: var(--sub); border: 1px solid var(--border); }
.btn:disabled, .btn[disabled] { background: #cbd5e1; color: #fff; cursor: not-allowed; }
.status { margin-top: 14px; display: flex; align-items: center; gap: 8px; background: var(--success-bg); border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.status b { color: var(--success); }
.status .sub { color: var(--sub); }
.status.fail { background: #fef2f2; border-color: #fecaca; }
.status.fail .dot { background: var(--fail); }
.status.fail b { color: var(--fail); }
.field { display: grid; gap: 6px; }
.field label { font-size: 13px; color: var(--sub); }
.placeholder { color: var(--sub); font-size: 15px; }

/* 가져오기 페이지 마켓 행 나열 (D-11) — UI-SPEC 계약 완성판 (Plan 03).
   기존 토큰·규칙 변형 없이 추가만. 색은 기존 토큰(--accent/--success/--fail/--sub/
   --border/#f1f5f9/#cbd5e1/#e2e8f0) 범위 내에서만 사용. */
.empty-hint { color: var(--sub); font-size: 15px; }
.filter-row { display: flex; align-items: end; gap: 16px; margin-bottom: 16px; }
.filter-hint { font-size: 13px; color: var(--sub); }

/* 마켓 행 리스트: 상단 필터 row와 md(16px) 간격 (filter-row margin-bottom로 확보) */
.market-list { list-style: none; padding: 0; margin: 0; }
/* 행: 상하 padding 12px, 하단 1px #f1f5f9(마지막 행 제외 — :not(:last-child)),
   flex 정렬, 컨트롤 노출/숨김 전환에도 높이 불변(min-height = 버튼 높이 기준),
   좁은 폭 flex-wrap 허용 */
.market-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 0; min-height: 62px;
}
.market-row:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
.market-row .market-name { flex: 1; font-size: 15px; color: var(--text); }
/* 마켓명↔인디케이터 gap 16px: 인디케이터 좌측 마진으로 확보 */
.market-row .market-indicator {
  font-size: 13px; color: var(--sub);
  font-variant-numeric: tabular-nums; margin-left: 8px;
}
.market-row .market-indicator .ind-done { color: var(--success); }
.market-row .market-indicator .ind-fail { color: var(--fail); }

/* secondary 버튼([총갯수 확인])은 기존 .btn.secondary 규칙 사용 (흰 배경 + --sub 글자,
   accent 금지). disabled 배경 #cbd5e1도 기존 .btn:disabled 규칙과 일치. */

/* 하단 진행 영역: 상단 1px --border 구분선 + padding-top 16px, 문구↔바 간격 8px */
.progress-area {
  border-top: 1px solid var(--border);
  margin-top: 16px; padding-top: 16px;
}
/* 진행 문구 ↔ [중단] 버튼 한 줄 배치 (문구 flex:1, 버튼 우측) */
.progress-area .progress-head {
  display: flex; align-items: center; gap: 12px;
}
.progress-area .progress-text {
  flex: 1; margin: 0;
  font-size: 15px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* [중단] 버튼은 secondary 규칙 사용 — 진행 head에서 줄어들지 않게 고정 */
.progress-area .progress-head [data-role="stop-btn"] { flex: 0 0 auto; }
/* 진행 바: 높이 6px, radius 999px, 트랙 #e2e8f0, 채움 --accent */
.progress-bar {
  margin-top: 8px; height: 6px; border-radius: 999px;
  background: #e2e8f0; overflow: hidden;
}
.progress-bar .progress-fill {
  display: block; height: 100%; background: var(--accent);
  border-radius: 999px; transition: width 0.3s ease;
}
.progress-area .progress-hint {
  margin-top: 8px; font-size: 13px; color: var(--sub);
}

/* ===========================================================================
   Phase 4 리스트·상세 (D-04~D-07) — 추가만. 기존 규칙 변형 금지.
   색은 기존 토큰(--accent/--sub/--text/--border/#f1f5f9/#f8fafc/#eff6ff/
   #cbd5e1)만 사용. 목업 a-light-admin.html #p3 table/th/td/.num/.toolbar 이식,
   .products-table 스코프로 전역 셀렉터 누출 방지 (PATTERNS 권고). */

/* 리스트·상세 페이지 폭 1200px 오버라이드 — page-wide 스코프로 다른 페이지 960px 유지 */
.page-wide { max-width: 1200px; }
main:has(.page-wide) { max-width: 1200px; }

/* Empty state (매트릭스 1) / 필터 0건 (매트릭스 4) */
.list-empty-title { font-size: 15px; color: var(--text); font-weight: 600; }
.list-empty-body { margin-top: 8px; font-size: 15px; color: var(--sub); }
.list-filter-empty { font-size: 15px; color: var(--sub); }

/* 4컬럼 테이블 (목업 이식) */
.products-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.products-table th {
  text-align: left; color: var(--sub); font-weight: 500; font-size: 13px;
  border-bottom: 1px solid var(--border); padding: 8px 10px;
}
.products-table th a { color: inherit; text-decoration: none; cursor: pointer; }
.products-table th a:hover { color: var(--text); }
.products-table th .sort-glyph { color: var(--text); }
.products-table td { border-bottom: 1px solid #f1f5f9; padding: 10px; }
.products-table td a { color: var(--text); text-decoration: none; }
.products-table tr.product-row { cursor: pointer; }
.products-table tr.product-row:hover td { background: #f8fafc; }
.products-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* 툴바 (좌 요약 + 우 페이지네이션) */
.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; font-size: 13px; color: var(--sub);
}
.toolbar-summary { font-variant-numeric: tabular-nums; }

/* 페이지네이션: 버튼형 링크 (DF-8 비활성 #cbd5e1, 현재 페이지 accent) */
.pagination { display: flex; align-items: center; gap: 4px; }
.pagination a,
.pagination span.current,
.pagination span.disabled,
.pagination span.ellipsis {
  padding: 6px 10px; border-radius: 8px; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.pagination a { color: var(--sub); text-decoration: none; }
.pagination a:hover { background: #f1f5f9; color: var(--text); }
.pagination span.current { color: var(--accent); font-weight: 600; }
.pagination span.disabled { color: #cbd5e1; }
.pagination span.ellipsis { color: var(--sub); padding: 6px 4px; }

/* ===========================================================================
   Phase 4 Plan 02 — 상품 상세 (VIEW-02, D-08~D-10) — 추가만. 기존 규칙 변형 금지.
   색은 기존 토큰(--text/--sub/--border/--accent/#f1f5f9/#f8fafc)만 사용. */

/* [← 목록] 복귀 버튼 영역 (섹션 간 24px 확보) */
.detail-back { margin-bottom: 24px; }

/* 상세 카드 섹션 간 24px (main gap 24px 상속, 명시 여백 보강) */
.detail-section { margin-bottom: 24px; }
.detail-section:last-child { margin-bottom: 0; }
.detail-subhead {
  font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--text);
}
/* 기본정보 카드의 h2(상품명) 아래 서브헤드는 상단 여백으로 구분 */
.card h2 + .detail-subhead { margin-top: 16px; }

/* 기본정보 키-값 2열 표 (라벨 13px --sub, 값 15px --text, 행 구분 #f1f5f9) */
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table tr { border-bottom: 1px solid #f1f5f9; }
.detail-table .detail-label {
  text-align: left; vertical-align: top; white-space: nowrap;
  color: var(--sub); font-size: 13px; font-weight: 500;
  padding: 8px 16px 8px 0; width: 260px;
}
.detail-table .detail-value {
  color: var(--text); font-size: 15px; padding: 8px 0;
  word-break: break-word;
}

/* 옵션·카테고리 자식 테이블 (14px, 목업 표 스타일 재사용) */
.detail-child-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.detail-child-table th {
  text-align: left; color: var(--sub); font-weight: 500; font-size: 13px;
  border-bottom: 1px solid var(--border); padding: 8px 10px;
}
.detail-child-table td {
  border-bottom: 1px solid #f1f5f9; padding: 8px 10px; color: var(--text);
  word-break: break-word;
}
.detail-child-table .num {
  text-align: right; font-variant-numeric: tabular-nums;
}
/* 대표 옵션 표기 (DF-6 — 배지 아님 12px 일반 텍스트) */
.detail-child-table .opt-main { font-size: 12px; color: var(--sub); }

.detail-empty { color: var(--sub); font-size: 15px; }

/* 이미지 격자 (DF-3) — auto-fill minmax(160px), gap 8px, 1:1 contain 흰 배경 */
.detail-images {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.detail-image-cell {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: #fff;
}
.detail-image-cell img {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: contain; background: #fff;
}
/* 로드 실패 폴백: 셀 내부 패딩 + URL 링크(accent) */
.detail-image-cell .image-fallback {
  padding: 12px; font-size: 13px; color: var(--sub); word-break: break-all;
}
.detail-image-cell .image-fallback a { color: var(--accent); }
.detail-image-cell .image-fallback .image-url-text { color: var(--sub); }

/* JSON 8종 접힘 (DF-4 — <pre> 13px 모노스페이스) */
.detail-json { border-bottom: 1px solid #f1f5f9; }
.detail-json:last-child { border-bottom: 0; }
.detail-json summary {
  cursor: pointer; padding: 8px 0; font-size: 13px; font-weight: 500;
  color: var(--text);
}
.detail-json pre {
  margin: 0 0 12px; padding: 12px; background: #f8fafc;
  border-radius: 8px; font-size: 13px;
  font-family: ui-monospace, monospace;
  white-space: pre-wrap; word-break: break-word;
}

/* ===========================================================================
   Phase 4 Plan 03 — 엑셀식 컬럼 필터 UI (D-04) — 추가만. 기존 규칙 변형 금지.
   색은 기존 토큰(--accent/--sub/--text/--border/#f1f5f9/#eff6ff/#bfdbfe/#94a3b8)만.
   목업 a-light-admin.html #p3 .filter-btn/.chips/.chip 이식. */

/* 필터 칩 (매트릭스 3) — 목업 확정값: gap 6px, 하단 마진 12px, padding 3px 10px, radius 999px */
.chips { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--accent); background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 999px; padding: 3px 10px;
}
.chip .x { cursor: pointer; color: #93b4f5; font-weight: 700; text-decoration: none; }
.chip .x:hover { color: var(--accent); }

/* 필터 ▼ 버튼 (목업 확정: padding 2px 4px, radius 4px, 기본 #94a3b8, 활성 accent+#eff6ff) */
.filter-btn {
  border: 0; background: transparent; color: #94a3b8; font-size: 11px;
  cursor: pointer; padding: 2px 4px; border-radius: 4px; margin-left: 4px;
}
.filter-btn:hover { background: #f1f5f9; color: var(--text); }
.filter-btn.active { color: var(--accent); background: #eff6ff; }

/* 정렬 링크(<a>)와 ▼ 버튼이 한 th 안에 공존 — 패널의 절대 위치 기준점 */
.products-table th.th-filter { position: relative; }

/* 필터 드롭다운 패널 (UI-SPEC: 230px, radius 8px, 그림자, --card 배경 + 1px --border) */
.filter-panel {
  position: absolute; top: 100%; left: 0; z-index: 20;
  width: 230px; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  padding: 12px; margin-top: 4px;
  font-size: 13px; font-weight: 400; color: var(--text); text-align: left;
  cursor: default;
}
.filter-panel .panel-search {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; background: #fff; margin-bottom: 8px;
}
.filter-panel .panel-check {
  display: flex; align-items: center; gap: 6px; padding: 4px 0;
  font-size: 13px; font-weight: 400; color: var(--text); cursor: pointer;
}
.filter-panel .panel-check .panel-count {
  margin-left: auto; font-size: 12px; color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.filter-panel .panel-divider {
  border-top: 1px solid var(--border); margin: 8px 0;
}
.filter-panel .panel-options {
  max-height: 220px; overflow-y: auto;
}
.filter-panel .panel-msg {
  font-size: 13px; color: var(--sub); padding: 8px 0;
}
.filter-panel .panel-price-row {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.filter-panel .panel-price-label {
  flex: 1; display: grid; gap: 4px; font-size: 13px; color: var(--sub);
}
.filter-panel .panel-price-label input {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; background: #fff;
  font-variant-numeric: tabular-nums;
}
.filter-panel .panel-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;
}
.filter-panel .panel-actions .btn { padding: 6px 14px; font-size: 13px; }

/* 범위 탭 (2026-08-06 사용자 결정) — 총상품|업로드상품|업로드가져온상품 */
.scope-tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.scope-tab {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
  color: var(--sub); text-decoration: none; padding: 8px 14px 7px;
  border-bottom: 2px solid transparent; cursor: pointer;
}
.scope-tab:hover { color: var(--text); }
.scope-tab.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); cursor: default; }
.scope-tab .scope-count {
  font-size: 12px; color: var(--sub); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.scope-tab.active .scope-count { color: var(--accent); background: #eff6ff; border-color: #bfdbfe; }