:root {
  --tblr-font-sans-serif: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--tblr-font-sans-serif);
}

/* 대시보드 카드 썸네일: 비율이 제각각인 상품 이미지를 균일한 높이로 보여준다 */
.product-thumb {
  display: block;
  height: 180px;
  background: var(--tblr-bg-surface-secondary);
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* 지표 추세를 나타내는 색 점 (rising/stable/falling 등) */
.trend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
  background: var(--tblr-border-color);
}

.trend-dot.trend-good {
  background: var(--tblr-green);
}

.trend-dot.trend-warn {
  background: var(--tblr-yellow);
}

.trend-dot.trend-bad {
  background: var(--tblr-red);
}

.summary-thumb {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: var(--tblr-bg-surface-secondary);
  border-radius: var(--tblr-border-radius);
}

.json-pre {
  max-height: 320px;
  overflow: auto;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ApexCharts가 넓은 카드에서 과도하게 늘어나지 않도록 높이를 고정한다 */
.chart-wrap {
  position: relative;
  height: 320px;
}

/* Tabler는 사이드바에 overflow-y: scroll을 걸어 스크롤바를 항상 노출한다 */
.navbar-vertical.navbar-expand-lg {
  overflow-y: auto;
}