/* ==========================================================================
   인트로(index.html) — 상품 포스터와 같은 모션 그래프 문법으로 다섯 고민을 한 화면에 모은다.
   히어로(다섯 채널 오실로스코프) → 고민 채널 5개 → 숫자·시간·문장 실제 계산 → 3분 순서 → 패키지 이하 기존 구역.
   모션: js/components/product-poster.js(spectrum·mini) · 채움: js/pages/home.js · 공통 모양: css/product-poster.css
   ========================================================================== */

/* ── 히어로 — 고른 채널 색(--pp-ch)이 제목·계기판·버튼에 번진다 ─────────── */
.hm-hero { --pp-ch: #ff5fd2; }
.hm-title { max-width: none; }
.hm-title .hm-line { display: inline-block; }
.hm-hero .hm-title em {
  color: var(--pp-ch);
  text-shadow: 0 0 18px color-mix(in srgb, var(--pp-ch) 45%, transparent);
  transition: color .35s, text-shadow .35s;
}
.hm-hero .is-swap { animation: hm-swap .5s cubic-bezier(.2, 1.2, .4, 1); }
.hm-title em.is-beat.is-swap { animation: hm-swap .5s cubic-bezier(.2, 1.2, .4, 1), pp-thump .42s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hm-swap {
  0% { opacity: 0; transform: translateY(.35em) skewX(-8deg); filter: blur(4px); }
  60% { opacity: 1; filter: none; }
  100% { transform: none; }
}
.hm-monitor { height: clamp(200px, 17vw, 236px); margin-bottom: 18px; }
.hm-monitor canvas { cursor: pointer; }
.hm-hero .pp-readout { color: var(--pp-ch); text-shadow: 0 0 12px color-mix(in srgb, var(--pp-ch) 45%, transparent); }
.hm-hero .pp-readout-num i { color: var(--pp-ch); text-shadow: 0 0 12px var(--pp-ch); }
.hm-hero .pp-cta {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pp-ch) 70%, #fff) 0%, var(--pp-ch) 100%);
  color: #12031f; box-shadow: 0 10px 28px color-mix(in srgb, var(--pp-ch) 45%, transparent);
  transition: transform .2s, box-shadow .2s, background .35s;
}

/* 채널 버튼 — 고른 채널은 그 색으로 채워진다 */
.hm-channels { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-ch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(8, 3, 30, .55); color: rgba(255, 255, 255, .82);
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: border-color .25s;
}
.hm-ch i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.hm-ch:hover { border-color: var(--c); color: #fff; }
.hm-ch[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #12031f; }
.hm-ch[aria-pressed="true"] i { background: #12031f; box-shadow: none; }
.hm-ch:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ── 구역 공통 ─────────────────────────────────────────────────────────── */
.hm-main { padding-top: 12px; }
.hm-sec { margin: 64px 0; scroll-margin-top: 84px; }
.hm-kicker { margin: 0; font-family: var(--font-main); font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--neon-cyan); }
.hm-h2 { margin: 4px 0 8px; font-size: clamp(25px, 3.6vw, 38px); font-weight: 900; line-height: 1.25; letter-spacing: -.02em; color: var(--text-pure); }
.hm-h2 em { font-style: normal; color: var(--pink-ink); }
.hm-desc { margin: 0 0 22px; max-width: 46em; font-size: 15.5px; line-height: 1.75; color: var(--text-sub); }

/* ── 고민 채널 5개 — 채널마다 자기 모션 화면 ─────────────────────────────── */
.hm-router { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.hm-card {
  --c: var(--neon-pink);
  grid-column: span 2; position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-box-purple);
  color: inherit; text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.hm-card.is-wide { grid-column: span 3; }
.hm-card:hover, .hm-card:focus-visible { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 16px 36px color-mix(in srgb, var(--c) 28%, transparent); }
.hm-card:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
/* 밤 모드 모션 화면. 낮 모드는 theme.css가 이 판을 흰색으로 덮는다. */
.hm-screen {
  position: relative; height: 150px; margin: 10px 10px 0; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 16%, #0a0420) 0%, #07021a 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.hm-card.is-wide .hm-screen { height: 176px; }
/* 위쪽 26px는 채널 번호가 앉는 상태 줄 — 그림은 그 아래에 그린다 */
.hm-screen canvas { position: absolute; top: 26px; left: 0; width: 100%; height: calc(100% - 26px); display: block; }
.hm-screen[data-pp-motion="heat"] canvas { top: 30px; left: 14px; width: calc(100% - 28px); height: calc(100% - 40px); }
.hm-ch-no {
  position: absolute; top: 8px; left: 12px; z-index: 1; font-family: var(--font-main); font-weight: 800; font-size: 12px; letter-spacing: .1em;
  color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent);
}
.hm-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.hm-card-tag { margin: 0; font-size: 13px; font-weight: 800; color: var(--c-ink, var(--c)); }
.hm-card h3 { margin: 0; font-size: 20px; font-weight: 900; line-height: 1.35; letter-spacing: -.01em; color: var(--text-pure); }
.hm-card h3 em { display: inline-block; font-style: normal; color: var(--c-ink, var(--c)); transform-origin: 30% 70%; }
.hm-card h3 em.is-beat { animation: pp-thump .42s cubic-bezier(.2, 1.6, .4, 1); }
.hm-card-body p:not(.hm-card-tag) { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-sub); }
.hm-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px;
  border-top: 1px dashed var(--border-box-purple); font-size: 13.5px; font-weight: 700; color: var(--text-sub);
}
.hm-card-foot b { color: var(--text-pure); }
.hm-go {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--c); color: #12031f; font-size: 18px; font-weight: 900; transition: transform .25s;
}
.hm-card:hover .hm-go { transform: translateX(4px) rotate(-8deg); }
.hm-card[data-ch="crush"] { --c: #ff5fd2; }
.hm-card[data-ch="timing"] { --c: #00e5ff; }
.hm-card[data-ch="love"] { --c: #00ffa3; }
.hm-card[data-ch="marriage"] { --c: #e8c069; }
.hm-card[data-ch="reunion"] { --c: #b487e8; }

/* 낮 모드 — 흰 카드 위 글자는 채널 색을 진하게(모니터 화면·버튼은 그대로) */
html[data-theme="light"] .hm-card[data-ch="crush"] { --c-ink: #b0147f; }
html[data-theme="light"] .hm-card[data-ch="timing"] { --c-ink: #00707f; }
html[data-theme="light"] .hm-card[data-ch="love"] { --c-ink: #007a4d; }
html[data-theme="light"] .hm-card[data-ch="marriage"] { --c-ink: #8a5d00; }
html[data-theme="light"] .hm-card[data-ch="reunion"] { --c-ink: #6b3fae; }

/* ── 숫자·시간·문장 — 샘플 두 사람의 실제 계산 ─────────────────────────── */
.hm-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.hm-proof-card {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; border-radius: 22px;
  background: var(--bg-card); border: 1px solid var(--border-box-purple);
}
.hm-proof-card[hidden] { display: none; }
.hm-proof-tag { margin: 0; font-family: var(--font-main); font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--neon-cyan); }
.hm-proof-tag span { font-family: 'Pretendard', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 0; color: var(--text-muted); }
.hm-proof-card h3 { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.35; color: var(--text-pure); }
.hm-proof-viz { position: relative; min-height: 196px; display: grid; align-content: start; }
.hm-proof-viz.is-loading { border-radius: 16px; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--text-sub) 10%, transparent) 50%, transparent 80%) 0 0 / 200% 100%; animation: hm-shimmer 1.4s linear infinite; }
@keyframes hm-shimmer { to { background-position: -200% 0; } }
/* 홈 카드 물결만 120px. 상품 페이지 게이지(176px)는 그대로 두고, 아래 문장과 카드 높이를 맞춘다. */
.hm-proof-viz .pp-cut-viz,
.hm-proof-viz .pp-cut-viz svg { height: 120px; margin: 0; }
.hm-proof-cap { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-sub); }
.hm-proof-cap b { color: var(--text-pure); }
.hm-proof-link { margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 800; color: var(--neon-cyan); text-decoration: none; }
.hm-proof-link:hover { text-decoration: underline; }
.hm-mix { display: grid; gap: 6px; margin-top: 14px; }
.hm-mix-row { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2.2em; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
.hm-mix-row b { font-family: var(--font-main); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 800; text-align: right; color: var(--text-pure); }
.hm-mix-row.is-top b, .hm-mix-row.is-top span { color: var(--neon-lime); }
.hm-mix-row i { display: block; height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--text-sub) 14%, transparent); overflow: hidden; }
.hm-mix-row i::after { content: ''; display: block; width: calc(var(--v) * 1%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7a22d6, #ff5fd2); transform-origin: left; transform: scaleX(0); }
.hm-mix-row.is-top i::after { background: linear-gradient(90deg, #00e5ff, #00ffa3); }
.is-play .hm-mix-row i::after { animation: hm-fill .7s cubic-bezier(.3, 1, .4, 1) forwards; animation-delay: calc(var(--k) * 80ms + .4s); }
.hm-meet {
  margin-top: 8px; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--neon-pink) 10%, transparent); border: 1px dashed var(--border-box-bright);
}
.hm-meet-tag { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; color: var(--neon-yellow); }
.hm-meet-text {
  margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--text-sub);
  text-align: justify; text-align-last: start; text-justify: inter-word;
}
.is-play .hm-meet { animation: hm-pop .45s cubic-bezier(.2, 1.4, .4, 1) .25s both; }
.is-still .hm-meet { animation: none; }
.is-still .hm-mix-row i::after { transform: none; }
@keyframes hm-fill { to { transform: scaleX(1); } }
.hm-proof-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* 시간 — 다음 골든타임 + 이번 주 날마다 가장 좋은 칸 */
.hm-when { display: grid; gap: 2px; margin-bottom: 14px; }
.hm-when-date { font-family: var(--font-main); font-weight: 900; font-size: 38px; font-variant-numeric: tabular-nums; line-height: 1; color: var(--neon-lime); text-shadow: 0 0 14px rgba(0, 255, 163, .35); }
.hm-when-clock { font-size: 15px; font-weight: 800; color: var(--text-pure); }
.hm-when-band { font-size: 13px; font-weight: 800; color: var(--pink-ink); }
/* 앞 46px는 아래 히트의 시간 칸과 열을 맞춘다. 화요일 막대와 가장 좋은 칸이 같은 줄에 선다. */
.hm-bars { display: grid; grid-template-columns: 46px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: end; height: 84px; }
.hm-bars::before { content: ''; }
.hm-bar { display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; text-align: center; }
.hm-bar i {
  align-self: end; display: block; height: calc(var(--h, 0) * 1%); border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #ff5fd2, #7a22d6); transform-origin: bottom; transform: scaleY(0);
}
.hm-bar.is-top i { background: linear-gradient(180deg, #ffe600, #00ffa3); box-shadow: 0 0 12px rgba(0, 255, 163, .5); }
.hm-bar span { font-size: 11.5px; font-weight: 800; color: var(--text-muted); }
.hm-bar.is-top span { color: var(--neon-lime); }
.is-play .hm-bar i { animation: hm-grow .6s cubic-bezier(.2, 1.2, .4, 1) forwards; animation-delay: calc(var(--k) * 90ms); }
.is-still .hm-bar i { transform: none; }
@keyframes hm-grow { to { transform: scaleY(1); } }

/* 요일 × 시간대 — 썸 타이밍 히트. 칸이 밝을수록 흐름이 세다. 가장 좋은 칸만 라임. */
.hm-heat { display: grid; grid-template-columns: 46px repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.hm-heat-corner { display: block; }
.hm-heat-day, .hm-heat-time {
  align-self: center; font-size: 10.5px; font-weight: 800; line-height: 1; color: var(--text-muted); text-align: center;
}
.hm-heat-time { font-family: var(--font-main); text-align: right; padding-right: 2px; }
.hm-heat-day.is-best { color: var(--neon-lime); }
.hm-heat-cell {
  display: block; height: 34px; border-radius: 7px; font-style: normal;
  background: rgba(203, 35, 162, calc(.18 + var(--k, 0) * .75));
  transform: scale(.6); opacity: 0;
}
.hm-heat-cell.is-best { background: linear-gradient(135deg, #ffe600, #00ffa3); box-shadow: 0 0 10px rgba(0, 255, 163, .45); }
.is-play .hm-heat-cell { animation: hm-cell .4s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(var(--i, 0) * 16ms + .15s); }
.is-still .hm-heat-cell { transform: none; opacity: 1; animation: none; }
@keyframes hm-cell { to { transform: none; opacity: 1; } }
html[data-theme="light"] .hm-heat-cell { background: rgba(176, 20, 127, calc(.22 + var(--k, 0) * .62)); }
html[data-theme="light"] .hm-heat-cell.is-best { background: linear-gradient(135deg, #e6b800, #0c9a62); box-shadow: none; }
html[data-theme="light"] .hm-heat-day.is-best { color: #007a4d; }

/* 문장 — 내 말풍선 → 무료 전문 → 심층 앞부분 */
.hm-words { display: flex; flex-direction: column; gap: 8px; }
.hm-words .pp-bubble { max-width: 96%; font-size: 14.5px; animation: none; }
.hm-words.is-play .pp-bubble { opacity: 0; animation: hm-pop .4s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.hm-words.is-play .pp-bubble:nth-child(2) { animation-delay: .5s; }
.hm-words.is-play .pp-bubble:nth-child(3) { animation-delay: 1.1s; }
.hm-words.is-still .pp-bubble { opacity: 1; animation: none; }
@keyframes hm-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── 3분 순서 — 선을 따라 빛이 흐른다 ───────────────────────────────────── */
.hm-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hm-steps::before {
  content: ''; position: absolute; top: 31px; left: 8%; right: 8%; height: 2px; z-index: 0;
  background: linear-gradient(90deg, #ff5fd2, #00e5ff, #00ffa3); opacity: .45;
}
.hm-steps::after {
  content: ''; position: absolute; top: 26px; left: 8%; width: 12px; height: 12px; border-radius: 50%; z-index: 0;
  background: #fff; box-shadow: 0 0 14px #00e5ff, 0 0 26px #ff5fd2; opacity: 0;
}
.hm-steps.is-play::after { animation: hm-travel 2.6s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes hm-travel { 0% { left: 8%; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(92% - 12px); opacity: 0; } }
.hm-step {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 0 18px 20px;
  border-radius: 22px; background: var(--bg-card); border: 1px solid var(--border-box-purple);
}
.hm-step-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 10px 0 6px; border-radius: 14px;
  font-family: var(--font-main); font-weight: 900; font-size: 18px; color: #12031f; background: linear-gradient(135deg, #ff5fd2, #00e5ff);
}
.hm-steps.is-play .hm-step-num { animation: pp-thump .42s cubic-bezier(.2, 1.6, .4, 1) both; }
.hm-steps.is-play .hm-step:nth-child(2) .hm-step-num { animation-delay: 1s; }
.hm-steps.is-play .hm-step:nth-child(3) .hm-step-num { animation-delay: 2s; }
.hm-step b { font-size: 18px; font-weight: 900; color: var(--text-pure); }
.hm-step span:not(.hm-step-num) { font-size: 14.5px; line-height: 1.65; color: var(--text-sub); }
.hm-how-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; }

/* 패키지 이하 기존 구역 — 위 포스터 구역과 폭을 맞춘다 */
.hm-main .products-box-section { margin-top: 24px; }

/* ── 반응형 ─────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
  .hm-channels { flex-basis: 100%; margin-bottom: 4px; }
  .hm-router { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-card, .hm-card.is-wide { grid-column: span 1; }
  .hm-card:last-child { grid-column: 1 / -1; }
  .hm-proof-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hm-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-steps::before { top: 8%; bottom: 8%; left: 39px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, #ff5fd2, #00e5ff, #00ffa3); }
  .hm-steps::after { display: none; }
  .hm-step { padding-bottom: 16px; }
}
@media (max-width: 599px) {
  .hm-router { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hm-card:last-child { grid-column: auto; }
  .hm-screen, .hm-card.is-wide .hm-screen { height: 128px; }
  .hm-card h3 { font-size: 18.5px; }
  .hm-monitor { height: 236px; }
  .hm-channels { flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding: 2px 18px 6px; scrollbar-width: none; }
  .hm-ch { flex: 0 0 auto; }
  .hm-chip-extra { display: none; } /* 좁은 화면은 칩 셋만 — 나머지 둘은 '3분 순서'에서 다시 말한다 */
  .hm-sec { margin: 48px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero .is-swap, .hm-title em.is-beat.is-swap, .hm-card h3 em.is-beat, .hm-steps.is-play .hm-step-num { animation: none; }
  .hm-proof-viz.is-loading { animation: none; }
  .hm-heat-cell { opacity: 1; transform: none; }
  .hm-card, .hm-go { transition: none; }
}