/* 제품 카드 v2 — 3개 사이트 공용. 외곽 클래스(.mha-prod 등)의 배경·그림자·리빌 동작은
   사이트 CSS 가 담당하고, 이 파일은 내부 레이아웃·타이포그래피만 정의한다. */
/* 색상 토큰 — 제품 리스트 전 범위 공용 팔레트(전역 재사용 가능) */
:root {
  --xrv-primary:       #0B8F7A;
  --xrv-primary-dark:  #076358;
  --xrv-primary-light: #E6F4F1;
  --xrv-heading:       #111318;
  --xrv-text:          #4B5563;
  --xrv-border:        #E7EAED;
  --xrv-image-bg:      #F3F4F6;
}
.prodv2 { position: relative; }

.prodv2__media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  margin: 20px 20px 24px;
  padding: 16px;
  border-radius: 14px;
  background: var(--xrv-image-bg);
  overflow: hidden;
}
.prodv2__media img,
.prodv2__media video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.prodv2__body { padding: 22px 26px 28px; text-align: left; min-width: 0; }

.prodv2__eyebrow {
  margin: 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--xrv-primary);
}

.prodv2__title {
  margin: 0 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(15px, 1.5vw, 20px);  /* 메타후프 기준 (2026-10-04 통일) */
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--xrv-heading);
}

.prodv2__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prodv2__features li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--xrv-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prodv2__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--xrv-primary);
}

.prodv2__desc {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 0.8125rem;                  /* 메타후프 기준 (2026-10-04 통일) */
  line-height: 1.72;
  color: var(--xrv-text);
}

/* 카드 전체를 덮는 링크 — 어디를 눌러도 detail_url 로 이동 */
.prodv2__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.prodv2__link:focus-visible { outline: 2px solid #0B8F7A; outline-offset: -4px; }

/* 카드 CTA — 전체 카드가 링크이므로 시각 표시만 (2026-10-04) */
.prodv2__cta {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #0B8F7A;
  transition: color .2s ease;
}
.prodv2:hover .prodv2__cta { color: #067A68; text-decoration: underline; }

/* ── 제품 리스트 페이저 (prod-pager.js) ─────────────────────────────────
   페이지 단위 가로 이동. 뷰포트는 카드 hover 상승(-5px)이 잘리지 않도록 여백을 준다. */
.prodpager__viewport {
  overflow: hidden;
  padding: 10px 0 18px;
  margin: -10px 0 -18px;
}
.prodpager__track {
  display: flex;
  width: 100%;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.prodpager__page { flex: 0 0 100%; min-width: 0; }
.prodpager__controls { margin-top: 28px; }
.prodpager__controls[hidden] { display: none; }
/* 자동 전환 타이머가 없으므로 점의 진행률 채움 애니메이션은 쓰지 않는다 */
.prodpager__dots .xrv-ov__dot.is-active::after { display: none; }

/* 그룹 라벨 — 제품 리스트 그룹(관리자 정의) 머리말. Overview 라벨(.xrv-ov__label)과 같은 형태, 색은 검정.
   페이지 안에서 가운데 정렬되며, 같은 페이지 두 번째 이후 그룹은 위 여백을 더 준다. */
.prodgroup-label {
  display: flex;
  width: fit-content;
  margin: 4px auto -4px;
  color: #000;
}
.prodgroup-label::before { background: linear-gradient(90deg, transparent, #000); }
.prodgroup-label::after  { background: linear-gradient(90deg, #000, transparent); }
/* 그룹 섹션 간 간격 — 각 그룹은 자기 라벨·카드·네비게이션을 가진 독립 묶음 */
.prodgroup + .prodgroup { margin-top: 56px; }
/* 흰 배경 섹션용 컨트롤 색 — Overview 컨트롤은 어두운 배경 전제라 흰색 반투명 값을 쓰므로
   구조·크기는 그대로 두고 색 변수만 밝은 배경 값으로 덮어쓴다(제품 리스트 범위 한정). */
.prodpager__controls {
  --xrv-carousel-fg:           #111827;
  --xrv-carousel-accent:       #0B8F7A;
  --xrv-carousel-capsule-bg:   rgba(17, 24, 39, .06);
  --xrv-carousel-dot-inactive: rgba(17, 24, 39, .22);
  --xrv-carousel-dot-track:    rgba(17, 24, 39, .45);
}

/* ── 카드 외곽 (3개 사이트 섹션 범위) — 사이트 CSS 의 외곽 규칙보다 상세도를 올려 적용 ── */
.mha-products .prodv2,
.axprod-section .prodv2,
.xrv-products .prodv2 {
  border: 1px solid var(--xrv-border);
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
  height: 100%;
}
.mha-products .prodv2:hover,
.axprod-section .prodv2:hover,
.xrv-products .prodv2:hover { border-color: var(--xrv-primary-light); }
.prodv2 .prodv2__media img { transition: transform .25s ease; }
.prodv2:hover .prodv2__media img { transform: scale(1.03); }
.prodv2 .prodv2__title { transition: color .25s ease; }
.prodv2:hover .prodv2__title { color: var(--xrv-primary); }

/* ── 섹션 제목·더보기 — 제품 리스트 3개 사이트 공통 타이포 스케일 ── */
.mha-products .news-head .news-title,
.axprod-section .news-head .news-title,
.xrv-products .news-head .news-title {
  font-size: clamp(32px, 2.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--xrv-heading);
}
.mha-products .news-head .xrv-ov__desc-toggle,
.axprod-section .news-head .xrv-ov__desc-toggle,
.xrv-products .news-head .xrv-ov__desc-toggle {
  font-size: 14px;
  font-weight: 600;
  color: var(--xrv-primary-dark);
}

/* ── 그룹 라벨 — 장식 대시 대신 짧은 얇은 선 + 텍스트 ── */
.prodgroup-label {
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--xrv-primary);
}
.prodgroup-label::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--xrv-primary-light);
}
.prodgroup-label::after { display: none; }