/* TipnTools — [tnt_product] 상품 카드
 * Stebi 원본 스타일 + 테마 토큰 매핑 + .tnt-content / .entry-content 보정 */

/* ── stebi 상품 카드 ── */
.stebi-product-card {
  /* 원본 변수명 — 테마 토큰으로 매핑 */
  --border: var(--border-subtle, rgba(0, 0, 0, 0.08));
  --surface: var(--gray2, #e8e8e5);
  --hint: var(--ink4, #a0a09c);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 500px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 36px;
  margin-bottom: 36px;
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.25s;
}

.stebi-product-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* 단축코드 align="left" | "center" (기본: 가운데) */
.stebi-product-card.spc-align-left {
  margin-left: 0;
  margin-right: auto;
}

.stebi-product-card.spc-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* 이미지 — 정사각 160 고정 (본문 span line-height 등 영향 차단) */
.spc-image-wrap {
  position: relative;
  flex: 0 0 160px;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  height: 160px;
  min-height: 160px;
  max-height: 160px;
  line-height: 0;
  overflow: hidden;
  background: var(--surface);
}

.spc-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  display: block;
  transform-origin: center center;
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.stebi-product-card:hover .spc-image-wrap img {
  transform: scale(1.06);
}

/* 뱃지 */
.spc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 텍스트 영역 — flex 컬럼, 본문 span 일괄 규칙과 분리 */
.spc-body {
  padding: 12px 14px 14px 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px;
  line-height: normal;
  font-size: inherit;
  font-weight: inherit;
}

.spc-shop-label {
  display: none;
}

.spc-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.spc-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}

.spc-original-price {
  font-size: 13px;
  font-weight: 400;
  color: var(--hint);
  text-decoration: line-through;
}

.spc-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* 구매 버튼 — var(--bg) 대신 흰 글자(본문 링크색 상속 방지) */
.spc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 100px;
  width: fit-content;
  transition: background 0.2s, color 0.2s;
}

.stebi-product-card:hover .spc-btn {
  background: var(--accent);
  color: #fff;
}

/* 모바일 */
@media (max-width: 768px) {
  .stebi-product-card {
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
  }

  .stebi-product-card.spc-align-left {
    margin-left: 0;
    margin-right: auto;
  }

  .stebi-product-card.spc-align-center {
    margin-left: auto;
    margin-right: auto;
  }

  .spc-image-wrap {
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    max-width: 104px;
    height: 104px;
    min-height: 104px;
    max-height: 104px;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
  }

  .spc-body {
    padding: 8px 10px 10px 6px;
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name name"
      "price btn";
    align-items: center;
    justify-content: stretch;
    column-gap: 8px;
    row-gap: 12px;
  }

  .spc-name {
    grid-area: name;
    font-size: 15px;
    line-height: 1.45;
    margin: 0;
    margin-left: -1px;
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .spc-price-wrap {
    grid-area: price;
    margin: 0;
    margin-left: -1px;
    align-items: center;
    align-self: center;
    min-width: 0;
  }

  .spc-price {
    font-size: 17px;
    line-height: 1;
  }

  .spc-btn {
    grid-area: btn;
    align-self: center;
    justify-self: end;
    margin: 0;
    font-size: 11px;
    padding: 4px 10px;
    line-height: 1;
    min-height: 24px;
    white-space: nowrap;
  }
}

/* 카드 썸네일 하단 공백 방지 */
.stebi-product-card .spc-image-wrap img {
  margin: 0 !important;
  vertical-align: top;
}

/* 본문 링크 스타일(밑줄) 영향 차단 — 테마 a:hover의 border-bottom만 무력화, 카드 박스 테두리는 유지 */
.tnt-content .stebi-product-card,
.tnt-content .stebi-product-card:hover,
.entry-content .stebi-product-card,
.entry-content .stebi-product-card:hover,
.single-content .stebi-product-card,
.single-content .stebi-product-card:hover {
  text-decoration: none;
  opacity: 1;
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tnt-content .stebi-product-card:hover,
.entry-content .stebi-product-card:hover,
.single-content .stebi-product-card:hover {
  border-bottom: 1px solid var(--border);
  border-bottom-color: var(--border);
}

/* 본문 이미지 margin·크기 규칙 무력화 (삽입 img height:auto 등) */
.tnt-content .stebi-product-card .spc-image-wrap img,
.entry-content .stebi-product-card .spc-image-wrap img,
.single-content .stebi-product-card .spc-image-wrap img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  transform-origin: center center !important;
  transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1) !important;
}

.tnt-content .stebi-product-card:hover .spc-image-wrap img,
.entry-content .stebi-product-card:hover .spc-image-wrap img,
.single-content .stebi-product-card:hover .spc-image-wrap img {
  transform: scale(1.06) !important;
}

.tnt-content .stebi-product-card .spc-body,
.entry-content .stebi-product-card .spc-body,
.single-content .stebi-product-card .spc-body {
  row-gap: 14px !important;
  line-height: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

.tnt-content .stebi-product-card .spc-image-wrap,
.entry-content .stebi-product-card .spc-image-wrap,
.single-content .stebi-product-card .spc-image-wrap {
  line-height: 0 !important;
}

.tnt-content .stebi-product-card .spc-image-wrap,
.tnt-content .stebi-product-card .spc-image-wrap img,
.entry-content .stebi-product-card .spc-image-wrap,
.entry-content .stebi-product-card .spc-image-wrap img,
.single-content .stebi-product-card .spc-image-wrap,
.single-content .stebi-product-card .spc-image-wrap img {
  margin: 0 !important;
}

/* 본문 기본 p 마진이 카드 내부에 적용되지 않도록 차단 */
.tnt-content .stebi-product-card p,
.entry-content .stebi-product-card p,
.single-content .stebi-product-card p {
  margin: 0;
}

/* 상품명 — 여백은 .spc-body gap으로 통일 */
.tnt-content .stebi-product-card .spc-name,
.entry-content .stebi-product-card .spc-name,
.single-content .stebi-product-card .spc-name {
  margin: 0 !important;
  line-height: 1.35;
}

@media (max-width: 768px) {
  .tnt-content .stebi-product-card .spc-body,
  .entry-content .stebi-product-card .spc-body,
  .single-content .stebi-product-card .spc-body {
    row-gap: 12px !important;
    column-gap: 8px !important;
  }

  .tnt-content .stebi-product-card .spc-name,
  .entry-content .stebi-product-card .spc-name,
  .single-content .stebi-product-card .spc-name {
    margin: 0 !important;
    line-height: 1.45;
  }
}

/* 본문 span(!important) 규칙 덮어쓰기 — color: inherit 금지 */
.tnt-content .stebi-product-card .spc-price-wrap,
.tnt-content .stebi-product-card .spc-shop-label {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
}

.tnt-content .stebi-product-card .spc-name {
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
}

.tnt-content .stebi-product-card .spc-original-price {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--hint) !important;
}

.tnt-content .stebi-product-card .spc-price {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  line-height: 1.2 !important;
}

.tnt-content .stebi-product-card .spc-btn {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--ink) !important;
}

.tnt-content .stebi-product-card:hover .spc-btn {
  background: var(--accent) !important;
  color: #fff !important;
}

.tnt-content .stebi-product-card .spc-badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .tnt-content .stebi-product-card .spc-name {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .tnt-content .stebi-product-card .spc-price {
    font-size: 17px !important;
    line-height: 1 !important;
  }
  .tnt-content .stebi-product-card .spc-btn {
    font-size: 11px !important;
    color: #fff !important;
    background: var(--ink) !important;
  }
  .tnt-content .stebi-product-card:hover .spc-btn {
    color: #fff !important;
    background: var(--accent) !important;
  }
}