/* 제품 페이지 히어로 15초 티저(16:9 무음 루프)와 아래 캡션 — /pro, /seouldream 공용. 강조색은 body.product-*의 --product-accent */
.hero-teaser {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hero-teaser-border, #b9c8e0);
  border-radius: 12px;
  background: var(--hero-teaser-ground, #071226);
  box-shadow: 0 28px 64px rgba(16, 24, 40, 0.22);
}

.hero-teaser-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-teaser-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-width: 44px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: var(--hero-teaser-chip, rgba(7, 18, 38, 0.72));
  color: #f4f8ff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.hero-teaser-toggle:hover {
  background: var(--hero-teaser-chip-hover, rgba(7, 18, 38, 0.9));
}

.hero-teaser-toggle:focus-visible {
  outline: 3px solid var(--hero-teaser-focus, #5cc6ff);
  outline-offset: 2px;
}

.hero-teaser-caption {
  display: block;
  margin-top: 12px;
  color: var(--cats-ink, #0f172a);
}

.hero-teaser-caption small,
.hero-teaser-caption strong,
.hero-teaser-caption em {
  display: block;
}

.hero-teaser-caption small {
  color: var(--product-accent, #1d4ed8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.hero-teaser-caption strong {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.4;
}

.hero-teaser-caption em {
  margin-top: 2px;
  color: var(--cats-muted, #64748b);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.hero-teaser-caption:hover em {
  color: var(--product-accent, #1d4ed8);
}

/* 가설재: 영상 바탕(#030E16)과 청록 강조 */
body.product-seouldream {
  --hero-teaser-border: #b6dcd5;
  --hero-teaser-ground: #030e16;
  --hero-teaser-chip: rgba(3, 14, 22, 0.72);
  --hero-teaser-chip-hover: rgba(3, 14, 22, 0.9);
  --hero-teaser-focus: #5eead4;
}