@charset "utf-8";
/* ==========================================================================
   BMTECH — 제품 스펙 테이블 (.tb2, 제품 상세 PC·모바일 공용)
   원본: webdot-blueprints 05_product/spec-table/_code/a1_hyulim_spec-table_horizontal-scroll
   포팅: 헤더 셀 = 옅은 회색 채움 + 1px 헤어라인, 행 hover 하이라이트,
         가로 스크롤 래퍼 + 모바일 스크롤 힌트(≤800px).
   편차: 원본 tbody 셀 고정 높이 116px 은 5행 모델 비교표 기준이라
         수십 행짜리 스펙 표에는 padding 18px 로 대체.
   editorial 레이어(.tb2 헤어라인 스타일)를 덮으므로 로드 순서 맨 마지막.
   ========================================================================== */

/* --- Scroll Wrap (원본 .wd-spec__scroll-area / __scroll-content) --- */
.tb2 {
  border-top: 0;
  overflow-x: auto;
  position: relative;
}

.tb2 table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}

.tb2 tr { border-bottom: 0; }

/* 스크롤 힌트 (원본 .wd-spec__scroll-hint — 모바일에서만 표시) */
.tb2::before {
  content: '가로로 스크롤 하여 보실 수 있습니다.';
  display: none;
  align-items: center;
  text-align: left;
  color: var(--bmt-muted);
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: 14px;
  letter-spacing: -0.03em;
  padding-left: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23999999' stroke-width='1.5'/%3E%3Ctext x='8' y='11.5' text-anchor='middle' font-size='9' font-weight='600' fill='%23999999' font-family='sans-serif'%3Ei%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: left center;
}

/* --- Header cells (원본 thead th) --- */
.tb2 thead th,
.tb2 tbody th {
  font-family: var(--bmt-font);
  font-weight: 600;
  background-color: var(--bmt-surface-alt);
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  border-left: 0;
  border-bottom: 1px solid var(--bmt-line-soft);
}

.tb2 thead th { height: 58px; }

.tb2 thead th p,
.tb2 tbody th p {
  font-family: var(--bmt-font);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--bmt-ink);
  letter-spacing: normal;
}

.tb2 thead tr:nth-child(2) th p { font-weight: 500; }

/* --- Body cells (원본 tbody td) --- */
.tb2 tbody td {
  text-align: center;
  vertical-align: middle;
  padding: 18px 10px;
  border: 0;
  border-bottom: 1px solid var(--bmt-line-soft);
}

.tb2 tbody td p {
  font-family: var(--bmt-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--bmt-body);
}

/* --- Row hover (원본 tbody tr:hover td) --- */
.tb2 tbody tr:hover td {
  background-color: var(--bmt-surface-alt);
  transition: background-color var(--bmt-duration) var(--bmt-ease);
}

/* --- Responsive (원본 breakpoint 그대로) --- */
@media (max-width: 800px) {
  .tb2::before { display: flex; }
}

@media (max-width: 480px) {
  .tb2 thead th { height: 40px; }
  .tb2 thead th p, .tb2 tbody th p { font-size: 14px; }
  .tb2 tbody td { padding: 12px 10px; }
  .tb2 tbody td p { font-size: 15px; }
}