: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);
}

/* 상품명이 길어 두 줄로 감길 때 기본 line-height가 너무 좁다 */
.page-header .page-title {
  line-height: 1.45;
}

/* 기본 nav-tabs의 active 표시(얇은 밑줄)가 눈에 잘 띄지 않아 배경/굵기로 보강한다 */
.nav-tabs .nav-link.active {
  font-weight: var(--tblr-font-weight-bold, 600);
  color: var(--tblr-primary);
  background-color: var(--tblr-primary-lt);
  border-color: transparent;
  border-bottom: 2px solid var(--tblr-primary);
}

/* 정렬 탭이 넘칠 때 가로 스크롤은 허용하되 스크롤바 자체는 숨긴다 */
.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* 상품 이미지는 판매처 URL을 직접 참조하므로 식별에 필요한 최소 크기로만 노출한다 */
.thumb-box {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  background: var(--tblr-bg-surface-secondary);
  border-radius: var(--tblr-border-radius);
}

.thumb-box>img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* img가 로드에 실패해 제거되면 이 대체 아이콘이 드러난다 */
.thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tblr-secondary);
}

.product-thumb {
  width: 96px;
  height: 96px;
}

@media (max-width: 575.98px) {
  .product-thumb {
    width: 72px;
    height: 72px;
  }
}

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

/* Bootstrap/Tabler에 없는 유틸. flex 아이템의 기본 min-width:auto를 풀어야 .text-truncate가 실제로 줄어든다 */
.min-w-0 {
  min-width: 0;
}

/* 카테고리·수집시각·평점·리뷰·재고를 한 줄에 가운뎃점으로 이어 붙인다 */
.product-facts>span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.product-facts>span+span::before {
  content: "·";
  margin: 0 0.35rem;
  color: var(--tblr-border-color);
}

.product-price {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.product-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tblr-border-color);
  text-align: center;
}

.product-metric-label {
  font-size: 0.75rem;
  color: var(--tblr-secondary);
}

.product-metric-value {
  font-weight: 600;
}

.product-metrics-empty {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tblr-border-color);
}

/* 지표 추세를 나타내는 색 점 (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: 120px;
  height: 120px;
}

.list-thumb {
  width: 56px;
  height: 56px;
}

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

.chart-wrap-sm {
  height: 200px;
}

.option-row {
  cursor: pointer;
}

.option-row-caret {
  flex: none;
  transition: transform 0.2s ease;
}

.option-row.table-active .option-row-caret {
  transform: rotate(180deg);
}

/* 좁은 화면에서는 옵션 표가 가로 스크롤되지 않도록 헤더 줄바꿈을 허용하고 여백을 줄인다 */
@media (max-width: 767.98px) {
  .option-stock-table thead th {
    white-space: normal;
  }

  .option-stock-table> :not(caption)>*>* {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .option-stock-table tr td:first-child,
  .option-stock-table tr th:first-child {
    padding-left: 0.75rem;
  }

  .option-stock-table tr td:last-child,
  .option-stock-table tr th:last-child {
    padding-right: 0.75rem;
  }

  .option-stock-table .option-chart-panel .p-3 {
    padding: 0.75rem !important;
  }
}

/* 재고 추이 패널 펼침/접힘 (max-height는 내용 높이보다 넉넉하게 잡은 상한값) */
.option-chart-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.22s ease, opacity 0.18s ease;
}

.option-chart-panel.is-open {
  max-height: 320px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .option-chart-panel {
    transition: none;
  }

  .option-row-caret {
    transition: none;
  }
}

/* Tabler는 사이드바에 overflow-y: scroll을 걸어 스크롤바를 항상 노출한다 */
/* lg 미만에서는 상단 헤더바로 축소되는데, overflow-y가 걸려있으면 사용자 메뉴 드롭다운이 잘려 보인다 */
@media (min-width: 992px) {
  .navbar-vertical.navbar-expand-lg {
    overflow-y: auto;
  }

  /* offcanvas-body는 Bootstrap이 lg 이상에서 가로 flex로 되돌리므로 세로 사이드바에 맞춰 되돌린다 */
  .navbar-vertical.navbar-expand-lg .offcanvas-body {
    flex-direction: column;
    flex-grow: 1;
  }
}

/* lg 미만: 사이드바 메뉴를 상단 펼침이 아니라 좌측 드로어로 띄운다 */
@media (max-width: 991.98px) {
  .navbar-vertical .offcanvas.navbar-collapse {
    --tblr-offcanvas-width: 15rem;
    align-items: stretch;
    flex-basis: auto;
  }

  .navbar-vertical .offcanvas .offcanvas-body {
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
  }
}

/* Tabler의 .btn-icon .icon은 음수 마진으로 아이콘을 버튼 밖까지 밀어내서
   작은 아이콘 버튼끼리 겹치고 클릭 영역도 어긋난다 */
.note-actions .btn-icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
}

.note-actions .btn-icon .icon {
  margin: 0;
}

/* input-group 안의 검색 버튼을 배경 없는 아이콘처럼 보이게 한다 */
.search-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-color: var(--tblr-border-color);
  color: var(--tblr-secondary);
}

.search-submit-btn .icon {
  margin: 0;
}

.search-submit-btn:hover,
.search-submit-btn:focus {
  background: transparent;
  color: var(--tblr-primary);
}