/* 디자인 토큰 + 미세 조정 (Tailwind 외) */

html { -webkit-tap-highlight-color: transparent; }

body {
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* 다크모드 시스템 추종 (class 토글로 오버라이드 가능) */
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) { color-scheme: dark; }
}

/* Pretendard Variable 폴백 */
:root {
  --font-num: 'Pretendard Variable', ui-monospace, SFMono-Regular, monospace;
}

/* 필터 드롭다운 */
.filter-dd {
  position: relative;
}
.filter-dd > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgb(241 245 249);
  font-size: 12px;
  font-weight: 600;
  color: rgb(51 65 85);
  white-space: nowrap;
}
.dark .filter-dd > button {
  background: rgb(30 41 59);
  color: rgb(203 213 225);
}
.filter-dd > button:hover {
  background: rgb(226 232 240);
}
.dark .filter-dd > button:hover {
  background: rgb(51 65 85);
}
.filter-dd[data-active="1"] > button {
  background: rgb(10 132 255 / 0.1);
  color: rgb(10 132 255);
}
.filter-dd > .panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.1);
  padding: 6px;
  z-index: 50;
  display: none;
}
.dark .filter-dd > .panel {
  background: rgb(15 23 42);
  border-color: rgb(51 65 85);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
}
.filter-dd[data-open="1"] > .panel { display: block; }
.filter-dd .panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.filter-dd .panel label:hover {
  background: rgb(241 245 249);
}
.dark .filter-dd .panel label:hover {
  background: rgb(30 41 59);
}
.filter-dd .panel input[type="checkbox"] {
  accent-color: rgb(10 132 255);
}

/* 활성 칩 */
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgb(10 132 255 / 0.1);
  color: rgb(10 132 255);
  font-weight: 600;
}
.active-chip button {
  margin-left: 2px;
  opacity: 0.7;
}
.active-chip button:hover { opacity: 1; }

/* KPI 카드 변화량 */
.kpi-delta-up   { color: rgb(22 163 74); }
.kpi-delta-down { color: rgb(220 38 38); }
.kpi-delta-flat { color: rgb(100 116 139); }

/* 테이블 hover */
#table-body tr:hover {
  background: rgb(248 250 252);
}
.dark #table-body tr:hover {
  background: rgb(30 41 59 / 0.4);
}
#table-body td { padding: 10px 12px; vertical-align: middle; }
#table-body a { color: rgb(10 132 255); }
#table-body a:hover { text-decoration: underline; }

/* 상태 배지 */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.badge-판매완료, .badge-정산완료 { background: rgb(22 163 74 / 0.12); color: rgb(22 163 74); }
.badge-정산대기 { background: rgb(217 119 6 / 0.12); color: rgb(217 119 6); }
.badge-취소 { background: rgb(220 38 38 / 0.12); color: rgb(220 38 38); }

/* 모바일에서 테이블 컬럼 약간 좁게 */
@media (max-width: 640px) {
  #table-body td { padding: 8px 10px; font-size: 13px; }
}

/* 정렬 표시 */
th[data-sort] { user-select: none; }
th[data-sort]:hover { color: rgb(10 132 255); }
th.sort-asc::after { content: ' ▲'; font-size: 9px; }
th.sort-desc::after { content: ' ▼'; font-size: 9px; }