/* SPA src/audio-hint-waves.css — Our Story 다크 배경용 보정 포함 */
/**
 * 헤드셋 안내 — 콘텐츠 전체 너비 파동 트랙 + 중앙 SVG
 */

:root {
  --audio-wave-navy: #2a3f5c;
  --audio-wave-navy-mid: #3d5675;
}

/* 히어로 본문과 같은 가로로 늘림. `--hero-pad-x`는 `.hero`에만 있으므로, 히어로 밖(Our Story 앞)에서는 `0` 폴백. */
.hero-audio-hint__wave-track {
  position: relative;
  display: block;
  width: calc(100% + 2 * var(--hero-pad-x, 0px));
  margin-left: calc(-1 * var(--hero-pad-x, 0px));
  margin-right: calc(-1 * var(--hero-pad-x, 0px));
  min-height: 104px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.hero-audio-hint__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero-audio-hint__ic {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-audio-hint__svg {
  position: relative;
  display: block;
  color: var(--audio-wave-navy);
  filter: drop-shadow(0 1px 2px rgba(42, 63, 92, 0.15));
}


.our-stroy .hero-audio-hint__svg {
  color: rgb(255 255 255 / 0.95);
  filter: drop-shadow(0 1px 6px rgb(255 255 255 / 0.18));
}

.our-stroy .hero-audio-hint__wave-track {
  width: calc(100% + 2 * var(--section-pad-x, 0px));
  margin-left: calc(-1 * var(--section-pad-x, 0px));
  margin-right: calc(-1 * var(--section-pad-x, 0px));
}