/* ═══ 반응이 몰린 구간 (밝은 배경 위 다크 카드) ═════════════════
   섹션은 밝게, 히트맵·채팅은 짙은 제품 패널로(2026-08-03 조현빈 결정
   - '큰 다크 카드' → '풀 다크 섹션' 을 거쳐 확정). 히어로와 같은
   문법: 밝은 바탕 위에 어두운 제품 화면이 섬처럼 놓인다. */
/* overflow 를 열어 둔다 - 섹션 경계에 걸치는 장면 카드(.fcard)가 잘리지 않게 */
.band-dark { position: relative; background: var(--warm); }
.band-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(52% 46% at 12% 0%, rgba(229,9,20,.05), transparent 62%); }
.dark-card { position: relative; }

.dark-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.62fr) minmax(0,1.02fr);
  gap: clamp(18px, 2.2vw, 34px); align-items: start;
}
@media (max-width: 1180px) {
  .dark-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); }
  .dark-head { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .dark-grid { grid-template-columns: 1fr; } }

.dark-head { display: grid; gap: 14px; align-content: start; }
.dark-head h2 { font-size: clamp(23px, 2.4vw, 32px); }
.dark-head p { color: var(--muted); font-size: 14.5px; line-height: 1.74; }

/* ── 히트맵 패널 ── */
/* 밝은 섹션 위의 짙은 제품 패널 - 히어로 화면과 같은 대비 */
.hm { background: var(--screen); border: 0;
  border-radius: 16px; padding: 16px 20px 14px;
  box-shadow: 0 2px 4px rgba(16,16,24,.06), 0 26px 54px -22px rgba(16,16,24,.4); }
.hm-head { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; }
.hm-ep { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 6px;
  background: rgba(229,9,20,.18); color: #ff9096; flex: 0 0 auto; }
.hm-title { font-size: 13px; color: var(--s-text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-total { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--s-muted);
  flex: 0 0 auto; }

.hm-plot { position: relative; height: clamp(80px, 8.4vw, 112px); cursor: grab; touch-action: none; }
.hm-plot:active { cursor: grabbing; }
.hm-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 1.5px; }
.hm-bars span { flex: 1; height: 4%; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #ff5b63, rgba(229,9,20,.2));
  transition: height .5s var(--ease), opacity .25s var(--ease); }
.hm-cursor { position: absolute; top: -5px; bottom: -8px; width: 2px; border-radius: 1px;
  background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.55); margin-left: -1px; }
.hm-badge {
  position: absolute; top: -35px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #fff;
  background: var(--accent); padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}
.hm-badge::after { content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 8px; height: 8px; background: var(--accent); border-radius: 1px;
  transform: translateX(-50%) rotate(45deg); }

/* 지금 이 회차를 보고 있는 사람들이 어느 구간에 모여 있는지.
   확장에서는 presence 가 모은 재생 위치를 구간으로 묶어 준다(HP-164·HP-192).
   붉은 파형이 '쌓인 반응'이라면 이 줄은 '지금 이 순간'이라 초록으로 가른다. */
.hm-live { position: relative; height: 26px; margin-top: 11px; }
.hm-live-pod { position: absolute; top: 0; transform: translateX(-50%);
  display: flex; align-items: center; transition: left 1.1s linear; }
.hm-live-pod .av { width: 19px; height: 19px; font-size: 9px; margin: 0 0 0 -7px;
  box-shadow: 0 0 0 2px var(--screen-2); }
.hm-live-pod .av:first-child { margin-left: 0; }
.hm-live-n { margin-left: 6px; font-family: var(--mono); font-size: 10.5px;
  color: #34d8a3; background: rgba(16,185,129,.15); padding: 2px 6px; border-radius: 5px;
  white-space: nowrap; }
.hm-live-cap { position: absolute; right: 0; top: 4px; font-size: 11.5px; color: var(--s-dim); }
@media (max-width: 1180px) { .hm-live-cap { display: none; } }

.hm-axis { display: flex; justify-content: space-between; margin-top: 12px;
  font-family: var(--mono); font-size: 10.5px; color: var(--s-dim); }
/* 반응이 몰린 지점. 누르면 그 지점으로 간다. */
.hm-marks { position: relative; height: 30px; margin-top: 4px; }
.hm-mark {
  position: absolute; top: 4px; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%; padding: 0;
  border: 1.5px solid rgba(255,255,255,.26); background: var(--screen-2); cursor: pointer;
  transition: transform .2s var(--spring), background .2s var(--ease), border-color .2s var(--ease);
}
.hm-mark:hover { transform: translateX(-50%) scale(1.3); border-color: rgba(255,255,255,.55); }
.hm-mark.on { background: var(--accent); border-color: var(--accent);
  transform: translateX(-50%) scale(1.22); box-shadow: 0 0 0 5px rgba(229,9,20,.18); }
.hm-mark span { position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  font-size: 11px; color: var(--s-muted); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .2s var(--ease); }
.hm-mark.on span, .hm-mark:hover span { opacity: 1; }

.hm-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.hm-play {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08);
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.hm-play:hover { background: rgba(255,255,255,.16); }
.hm-play:active { transform: scale(.93); }
.hm-hint { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--s-muted);
  transition: opacity .4s var(--ease); }
.hm-hint svg { animation: nudge 1.9s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
.hm.touched .hm-hint { opacity: 0; }
.hm-go {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 15px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.hm-go:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.24); }
.hm-go:active { transform: translateY(1px); }

/* ── 그 지점의 반응 ──
   높이를 고정한다. 채팅이 누적되면 컨테이너가 함께 늘어나 카드 높이가
   계속 자라던 문제가 있었다. 넘친 줄은 위로 잘려 나가면 된다. */
.hm-side { background: var(--screen); border: 0;
  border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;
  height: clamp(252px, 25.5vw, 322px);
  box-shadow: 0 2px 4px rgba(16,16,24,.06), 0 26px 54px -22px rgba(16,16,24,.4); }
.hm-side-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--s-line);
  display: flex; align-items: baseline; gap: 8px; }
.hm-side-t { font-family: var(--mono); font-size: 14px; font-weight: 600; color: #ff8f95; }
.hm-side-label { font-size: 12.5px; color: var(--s-muted); }
/* 이 구간을 '지금' 보는 사람 - 아래 목록(쌓인 반응)과 시간 축이 다르므로 색으로 가른다 */
.hm-side-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #34d8a3; white-space: nowrap; }
.hm-side-live b { font-family: var(--mono); font-weight: 600; }
/* 아래 정렬 - 새 채팅이 밑에 붙고 오래된 줄은 위로 밀려 잘린다(채팅창과 같다) */
.hm-list { flex: 1; min-height: 0; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 13px;
  overflow: hidden; }
.hm-list .msg { font-size: 13.5px; }
.hm-list .av { width: 25px; height: 25px; font-size: 11px; }
.hm-list .msg-name { font-size: 12.5px; }
.hm-empty { color: var(--s-dim); font-size: 13px; margin: auto 0; }

/* ═══ 반응이 몰린 구간 — 단순화 버전 (#scenes, 2026-08-12) ═══════
   위의 인터랙티브 히트맵(#scenes-legacy, 감춤)을 대체한 정적 구성.
   밝은 배경에 제목·설명, 시각물만 어두운 카드(파형이 다크에서만 사는 색이라).
   파형 = 랜딩 기존 빨간 막대, 핀 = 확장 실물 "N명 시청 중" 크림 알약
   (Replix-extension styles.css .rx-vm-pill 의 색·질감을 옮김). */

.pulse-head { text-align: center; margin-bottom: 44px; }
.pulse-head h2 { font-size: clamp(22px, 3.2vw, 32px); }
.pulse-head p { color: var(--muted); font-size: 15px; margin-top: 10px; max-width: 520px; margin-inline: auto; }

/* 스테이지 — B처럼 본문 폭(860px) 안에 담는다.
   ⚠ 스테이지에 padding 을 주지 말 것 — 핀 레이어(inset:0)는 패딩까지 포함하고
   막대는 콘텐츠 박스 안이라 핀 %좌표가 막대와 어긋난다. 좌우 여백은 바깥 .wrap 이 담당. */
.pulse-stage { position: relative; max-width: 860px; margin: 0 auto; }
.pulse-bars { display: flex; align-items: flex-end; gap: 2px; height: 110px; }
.pulse-bars span {
  flex: 1; border-radius: 2px 2px 0 0; min-height: 3px;
  background: linear-gradient(180deg, #ff5b63, rgba(229,9,20,.18));
}

/* 핀 레이어는 파형(110px)에만 겹친다 — inset:0 이면 재생바·타임코드까지
   덮어 핀 bottom 기준이 내려가 재생바와 겹친다 */
.pulse-pins { position: absolute; left: 0; right: 0; top: 0; height: 110px; pointer-events: none; }
.pulse-pin {
  position: absolute; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.pulse-pill {
  padding: 4px 11px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  letter-spacing: -.2px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(16,16,24,.25);
}
.pulse-pill em { font-style: normal; font-weight: 600; font-size: 10px; opacity: .7; }
.pulse-pin::after {
  content: ''; margin-top: -.5px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid rgba(16,16,24,.85);
}

.pulse-track {
  position: relative; height: 4px; border-radius: 2px;
  background: rgba(16,16,24,.1); margin-top: 6px;
}
.pulse-track i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 33%;
  background: var(--accent); border-radius: 2px;
}
.pulse-track em {
  position: absolute; top: 50%; left: 33%; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent);
  transform: translate(-50%,-50%); box-shadow: 0 0 0 4px rgba(229,9,20,.16);
}
.pulse-times {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
}

/* ── 모바일 대응 ── */
@media (max-width: 480px) {
  .pulse-head h2 { font-size: clamp(20px, 6vw, 26px); }
  .pulse-head p { font-size: 14px; }
  .pulse-bars { height: 72px; }
  .pulse-pins { height: 72px; }
  .pulse-pin { transform: translateX(-50%) scale(.85); }
}