/* =============================================================================
   a안 · 안전장비 쪽 조정 (kit/v-a.css 위에 얹는다. 색 · 서체 · 버튼 값은 건드리지 않는다)
   4차 지시(2026-10-02): AI CCTV + 지게차 안전장치 두 묶음만.
     1. .hw-duo · .hw-pick                 히어로의 두 제품 큰 버튼(실화면 + 제품 이름 칩. 칩이 링크이고 카드 전체가 눌린다)
     2. .hw-group · .hw-top · .hw-head     제품 묶음. 묶음 머리 = 제품 이름 + 칩 + 상담 버튼
                                          묶음 사이는 넓게, 묶음 안 행 사이는 좁게 잡아 두 제품이 나뉘어 보이게 한다
     3. .hw-glow                           묶음 머리 뒤의 옅은 빛(가장자리가 선으로 보이지 않게 섹션 안쪽에 둔 타원)
     4. .hw-row--wide · .hw-stage--video   가로 영상(16:9)을 자르지 않고 보여 주는 행과 무대
     5. .hw-stage--cam · .hw-stage--land   가로 실사 · 카메라 화면을 자르지 않고(4:3 · 16:10) 그대로
     6. .hw-fact                           무대 없는 장면 카드(구축 방식 · 지원 수치): 제목 한 줄 + 칩
   ============================================================================= */

/* ---- 1. 히어로 큰 버튼 2 -------------------------------------------------------- */
.hw-duo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cm-card-gap);
  margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none;
}
.hw-pick {
  position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0 0 18px; overflow: hidden;
  background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-2);
}
.hw-pick__media { position: relative; display: block; width: 100%; margin: 0 0 16px; aspect-ratio: 16 / 10; overflow: hidden; }
.hw-pick__media > img, .hw-pick__media > video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
}
/* 칩이 링크다. 누르는 자리는 카드 전체로 넓힌다(누를 때 줄어드는 것은 카드 쪽 .cm-lift 가 한다) */
.hw-pick__go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
a.hw-pick__go:active { transform: none; }
.hw-pick:has(.hw-pick__go:focus-visible) { outline: 3px solid var(--cm-brand); outline-offset: 3px; }
.hw-pick__go:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) { .hw-pick:hover .hw-pick__go { background: var(--cm-violet-100); } }
@media (max-width: 699px) {
  .hw-duo { gap: 12px; }
  .hw-pick { padding-bottom: 14px; border-radius: 20px; }
  .hw-pick__media { margin-bottom: 12px; aspect-ratio: 4 / 3; }
  .hw-pick__go.min-chip { min-height: 36px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 359px) { .hw-pick__go.min-chip { padding: 0 9px; font-size: 13px; } }

/* ---- 2. 제품 묶음 -------------------------------------------------------------- */
.hw-group { position: relative; }
.hw-group > .min-sec { padding-block: clamp(36px, 5vw, 72px); }
.hw-group > .hw-top { padding-top: var(--min-sec-y); padding-bottom: clamp(4px, 1vw, 12px); }

.hw-head {
  display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;
  scroll-margin-top: 24px;   /* #cctv · #forklift 로 바로 올 때 고정 헤더 아래에 제품 이름이 온다 */
}
.hw-head .min-chips { justify-content: center; margin-top: 16px; }
.hw-head .min-actions { margin-top: 0; }
@media (max-width: 480px) { .hw-head .min-actions { width: 100%; } }
@media (min-width: 900px) {
  .hw-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; text-align: left; }
  .hw-head .min-chips { justify-content: flex-start; margin-top: 20px; }
  .hw-head .min-actions { flex: none; }
}

/* ---- 3. 묶음 머리 뒤 빛 --------------------------------------------------------- */
.hw-glow {
  position: absolute; inset: 0 0 auto 0; z-index: -1; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse 58% 62% at 50% 58%, var(--cm-glow-1), var(--cm-glow-2) 46%, transparent 72%);
}

/* ---- 4. 가로 영상 행 · 무대 ------------------------------------------------------ */
@media (min-width: 900px) {
  .va-row.hw-row--wide { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
.va-stage.hw-stage--video { aspect-ratio: 16 / 9; border: 0; background: #fff; }
.hw-stage--video > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 5. 가로 실사 무대 ---------------------------------------------------------- */
.va-stage.hw-stage--cam { aspect-ratio: 4 / 3; }
.va-stage.hw-stage--land { aspect-ratio: 16 / 10; }

/* ---- 6. 무대 없는 장면 카드 ------------------------------------------------------ */
.hw-group > .hw-fact-sec { padding-top: 0; }   /* 앞 행의 아래 여백만으로 띄운다(행 사이 간격의 절반) */
.hw-fact {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px); text-align: center;
  border: 1px solid var(--cm-line); border-radius: var(--va-stage-r); box-shadow: var(--cm-shadow-2);
  background: #fff radial-gradient(ellipse at 50% 0%, var(--cm-glow-1), var(--cm-glow-2) 48%, transparent 72%);
}
.hw-fact .min-chips { justify-content: center; margin-top: 20px; }
@media (max-width: 899px) { .hw-fact { border-radius: var(--cm-r-card); } }

/* 340px 아래에서는 제목 구절 묶음을 풀어 넘침을 막는다 */
@media (max-width: 339px) { .va-row__text .min-nb, .hw-fact .min-nb { white-space: normal; } }

@media (prefers-reduced-motion: reduce) {
  /* 감속 모드: 영상은 재생하지 않고 조작 막대가 보인다. 히어로 영상의 조작 막대가 눌리도록 카드 전체 링크를 칩 크기로 되돌린다 */
  .hw-pick:has(video) .hw-pick__go::after { content: none; }
}
@media (prefers-contrast: more) {
  .hw-fact, .hw-pick { border-color: var(--cm-grey-500); box-shadow: none; }
  .hw-fact { background: #fff; }
  .hw-glow { display: none; }
}