/* BASIC css start */
/* ============================================================================
   최근 본 상품(today_product) — 어헤이
   ----------------------------------------------------------------------------
   ⚠ HTML 을 거의 손대지 않았으므로 CSS 가 원본 클래스명을 .nv-td 안에서 그대로 쓴다.
   ⚠ 메이크샵은 CSS 탭을 교체하므로 레이아웃은 전부 여기서 직접 정의한다.
   ⚠ 모바일에서 공통 스킨이 .page-title-wrap h2 를, 사이드바 CSS 가 .sidebar 를
     숨긴다 → 반응형 블록에서 되살린다.
   · 관심상품(그리드)과 달리 체크박스·삭제가 있는 리스트형이다.
   ============================================================================ */

.nv-td {
  --nv-brand: var(--color-brand-blue, #b78d7e);
  --nv-ink:   var(--cw-heading-color, #121212);
  --nv-sub:   var(--cw-color-80, #555);
  --nv-muted: var(--cw-color-60, #999);
  --nv-line:  var(--cw-color-30, #dedede);
  --nv-line2: var(--cw-color-20, #ededed);
  --nv-soft:  var(--cw-color-10, #f6f6f6);
}
.nv-td, .nv-td * { box-sizing: border-box; }
/* 마지막 요소와 푸터가 붙지 않도록 하단 여백 */
.nv-td .content-body { padding-bottom: 3.5rem; }
.nv-td ul, .nv-td li { list-style: none; margin: 0; padding: 0; }
.nv-td p { margin: 0; }
.nv-td a { text-decoration: none; color: inherit; }
.nv-td img { max-width: 100%; }
.nv-td h2 { margin: 0; }

/* ── 제목 ──────────────────────────────────────────────────────────── */
.nv-td .page-title-wrap { margin: 0 !important; padding: 0 !important; text-align: left; }
.nv-td .page-title-wrap h2 {
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; color: var(--nv-ink);
}

/* ── 전체선택 / 선택삭제 ───────────────────────────────────────────── */
.nv-td .product-list { margin-top: 1.5rem; }
.nv-td .product-goods--header {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 .25rem .75rem; border-bottom: 1px solid var(--nv-ink);
}
.nv-td .form-check-inline { display: inline-flex; align-items: center; }
.nv-td .check-box,
.nv-td .form-check-label {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .813rem; font-weight: 600; color: var(--nv-sub); cursor: pointer;
}
.nv-td input[type="checkbox"] {
  width: 1.0625rem; height: 1.0625rem; accent-color: var(--nv-brand); cursor: pointer;
}
.nv-td .product-goods--header .ml-auto {
  margin-left: auto; font-size: .781rem; font-weight: 600; color: var(--nv-muted);
  transition: color .16s;
}
.nv-td .product-goods--header .ml-auto:hover { color: var(--nv-brand); }

/* ── 상품 리스트 ───────────────────────────────────────────────────── */
.nv-td .product-goods--list { display: block; }
.nv-td .product-goods--list > li {
  padding: 1rem .25rem; border-bottom: 1px solid var(--nv-line2);
  transition: background-color .16s;
}
.nv-td .product-goods--list > li:hover { background: var(--nv-soft); }

/* 체크박스 줄 + 삭제 */
.nv-td .flex.items-center { display: flex; align-items: center; gap: .5rem; }
.nv-td .flex.ml-auto { margin-left: auto; }
.nv-td .lnk-delete {
  display: inline-flex; align-items: center; height: 1.75rem; padding: 0 .625rem;
  border: 1px solid var(--nv-line); border-radius: 999px;
  font-size: .719rem; font-weight: 600; color: var(--nv-muted);
  transition: border-color .16s, color .16s;
}
.nv-td .lnk-delete:hover { border-color: var(--nv-brand); color: var(--nv-brand); }

/* 본문 : 썸네일 / 정보 / 적립 / 버튼 */
.nv-td .product-goods--info {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto auto;
  align-items: center; gap: 1rem; margin-top: .625rem;
}
.nv-td .product-goods-image .goods-imgs {
  display: block; width: 5.5rem; height: 5.5rem; overflow: hidden;
  border: 1px solid var(--nv-line2); border-radius: .75rem; background: var(--nv-soft);
}
.nv-td .product-goods-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.nv-td .product-goods--list > li:hover .product-goods-image img { transform: scale(1.04); }

.nv-td .product-goods-details { min-width: 0; }
.nv-td .product-goods-details .title a {
  font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--nv-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nv-td .product-goods-details .title a:hover { color: var(--nv-brand); }
.nv-td .product-goods-details .price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .375rem;
  margin-top: .375rem; font-size: .875rem;
}
.nv-td .product-goods-details .price strong { font-weight: 800; color: var(--nv-ink); }
.nv-td .product-goods-details .strike { font-size: .75rem; color: var(--nv-muted); }

.nv-td .product-goods-benefits {
  font-size: .75rem; color: var(--nv-muted); white-space: nowrap;
}
.nv-td .product-goods-benefits:empty { display: none; }
.nv-td .product-goods-benefits span {
  display: inline-block; margin-right: .25rem; padding: .125rem .375rem;
  border-radius: .25rem; background: var(--nv-soft);
  font-size: .688rem; font-weight: 700; color: var(--nv-sub);
}

.nv-td .product-goods-end .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.25rem; padding: 0 1rem; white-space: nowrap;
  border: 1px solid var(--nv-line); border-radius: 999px; background: #fff;
  font-size: .781rem; font-weight: 600; color: var(--nv-sub);
  transition: border-color .16s, color .16s, background-color .16s;
}
.nv-td .product-goods-end .btn:hover {
  border-color: var(--nv-brand); background: var(--nv-brand); color: #fff;
}

/* ── 빈 상태 ───────────────────────────────────────────────────────── */
.nv-td .nv-td-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; margin: 1.5rem 0 0 !important; padding: 3.5rem 1.25rem !important;
  border: 1px solid var(--nv-line2); border-radius: .875rem; background: #fff;
}
.nv-td .nv-td-empty-t { font-size: .9375rem; font-weight: 700; color: var(--nv-ink); }
.nv-td .nv-td-empty-s { margin-top: .375rem; font-size: .813rem; color: var(--nv-muted); }
.nv-td .nv-td-empty-cta {
  display: inline-flex; align-items: center; height: 2.625rem; margin-top: 1.125rem;
  padding: 0 1.375rem; border-radius: 999px; background: var(--nv-brand); color: #fff;
  font-size: .844rem; font-weight: 700; transition: filter .16s, transform .16s;
}
.nv-td .nv-td-empty-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ── 페이지 번호 (JS 가 만든다) ────────────────────────────────────── */
.nv-td .nv-td-paging {
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  margin-top: 1.75rem;
}
.nv-td .nv-td-paging a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding: 0 .375rem; border-radius: .5rem;
  font-size: .813rem; font-weight: 600; color: var(--nv-sub);
  font-variant-numeric: tabular-nums; transition: background-color .16s, color .16s;
}
.nv-td .nv-td-paging a:hover { background: var(--nv-soft); color: var(--nv-ink); }
.nv-td .nv-td-paging a.active { background: var(--nv-brand); color: #fff; }

/* ── 반응형 ────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* ⚠ 사이드바 CSS 가 .sidebar 를 숨기므로 되살리고 본문 아래로 내린다 */
  .nv-td .sidebar { display: block !important; order: 2; margin-top: 2.5rem; }
  .nv-td .content { order: 1; width: 100%; }
}
@media (max-width: 767.98px) {
  /* ⚠ 공통 스킨이 좁은 화면에서 .page-title-wrap h2 를 숨긴다 → 되살린다 */
  .nv-td .page-title-wrap h2 { display: block !important; font-size: 1.125rem; }

  /* 썸네일 + 정보 2칸으로 접고, 적립·버튼은 아랫줄 */
  .nv-td .product-goods--info {
    grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: .75rem;
  }
  .nv-td .product-goods-image .goods-imgs { width: 4.5rem; height: 4.5rem; }
  .nv-td .product-goods-details .title a { font-size: .875rem; }
  .nv-td .product-goods-benefits { grid-column: 2; }
  .nv-td .product-goods-end { grid-column: 1 / -1; margin-top: .25rem; }
  .nv-td .product-goods-end .btn { width: 100%; }
}

/* BASIC css end */