/* ============================================================
   motion-hero.css — 리포트HOME Motion Hero (Section 0) · v3
   서비스 구조 정합 버전:
     시장 분석 → 리포트 생성(브랜드 적용) → 중개사에게 도착
     → 대시보드 고객 관리 → 중개사가 직접 전송
   - 모든 셀렉터 .motion-hero / .mh-bridge 네임스페이스 (전역 오염 없음)
   - 씬 클래스(.mh-s1~.mh-s6, .mh-payoff)는 motion-hero.js FLOW_TIMELINE이 부여
   - 이 파일의 transition-delay는 "해당 씬 시작 기준 상대값"
   - 성능: transform / opacity 전용. 라이브러리·canvas 없음.
   ============================================================ */

.motion-hero {
  position: relative;
  min-height: 100svh;
  padding-top: 64px;
  background: linear-gradient(180deg, #FAFBF9 0%, #FAFBF9 86%, #FFFFFF 100%);
  overflow: hidden;
}
.motion-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 54% at 50% 46%, rgba(23,117,86,.045), transparent 70%),
    linear-gradient(90deg, rgba(17,21,19,.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17,21,19,.022) 1px, transparent 1px);
  background-size: 100% 100%, 140px 140px, 140px 140px;
  pointer-events: none;
}

.mh-stage {
  position: relative;
  height: calc(100svh - 64px);
  min-height: 620px;
  max-width: 1680px;
  margin: 0 auto;
}

.mh-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---------- 공통 base(숨김) 상태 ---------- */
.mh-card, .mh-status, .mh-report, .mh-final, .mh-steps, .mh-line,
.mh-agent, .mh-dash, .mh-phone, .mh-mail-toast {
  opacity: 0;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: 0s;
  will-change: opacity, transform;
}

/* ============================================================
   데이터 카드 (SCENE 1)
   ============================================================ */
.mh-card {
  position: absolute;
  width: 288px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(11,61,46,.05);
  padding: 18px 22px 20px;
  transform: translateY(14px) scale(.98);
}
.mh-card-label {
  font-size: 14px; font-weight: 500; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between;
}
.mh-card-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-500); opacity: .7;
}
.mh-card-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px; font-weight: 500; color: var(--ink);
  margin-top: 10px;
}
.mh-c-volume .mh-card-value { font-size: 30px; color: var(--green-700); }
.mh-card-arrow {
  display: inline-block; margin-left: 8px;
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 11px solid var(--green-600);
  vertical-align: 2px;
}

.mh-c-deal   { left: 6%;  top: 11%; }
.mh-c-volume { left: 3.5%; top: 43%; }
.mh-c-price  { left: 7%;  top: 73%; }
.mh-c-jeonse { right: 6%; top: 11%; }
.mh-c-news   { right: 4%; top: 43%; }

.mh-spark { display: block; width: 100%; height: 44px; margin-top: 12px; }
.mh-spark polyline {
  fill: none; stroke: var(--green-700); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease);
}
.mh-spark-row { display: flex; align-items: flex-end; gap: 14px; }
.mh-spark-row .mh-card-value { margin-top: 0; white-space: nowrap; }

.mh-bars { display: flex; align-items: flex-end; gap: 12px; height: 52px; margin-top: 12px; flex: 1; }
.mh-bars span {
  width: 22px; border-radius: 3px;
  background: rgba(23,117,86,.18);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease);
}
.mh-bars span:last-child { background: var(--green-700); }

.mh-news-lines { margin-top: 14px; display: grid; gap: 11px; }
.mh-news-lines i {
  display: block; height: 7px; border-radius: 4px;
  background: rgba(17,21,19,.09);
}
.mh-news-lines i:nth-child(1) { width: 82%; }
.mh-news-lines i:nth-child(2) { width: 96%; position: relative; }
.mh-news-lines i:nth-child(3) { width: 62%; }
.mh-news-lines i:nth-child(2)::after {
  content: ""; position: absolute; inset: -4px -6px;
  border-radius: 7px; background: var(--green-100);
  opacity: 0; transition: opacity .5s var(--ease);
  z-index: -1;
}

/* SCENE 1 */
.mh-s1 .mh-card { opacity: 1; transform: none; transition-duration: .75s; }
.mh-s1 .mh-c-deal   { transition-delay: .15s; }
.mh-s1 .mh-c-jeonse { transition-delay: .68s; }
.mh-s1 .mh-c-volume { transition-delay: 1.22s; }
.mh-s1 .mh-c-news   { transition-delay: 1.75s; }
.mh-s1 .mh-c-price  { transition-delay: 2.28s; }
.mh-s1 .mh-c-deal .mh-spark polyline { stroke-dashoffset: 0; transition-delay: .75s; transition-duration: 1.4s; }
.mh-s1 .mh-bars span { transform: scaleY(1); }
.mh-s1 .mh-bars span:nth-child(1) { transition-delay: 1.15s; }
.mh-s1 .mh-bars span:nth-child(2) { transition-delay: 1.30s; }
.mh-s1 .mh-bars span:nth-child(3) { transition-delay: 1.45s; }
.mh-s1 .mh-bars span:nth-child(4) { transition-delay: 1.60s; }
.mh-s1 .mh-bars span:nth-child(5) { transition-delay: 1.75s; }

/* ============================================================
   SCENE 2 — 분석 수렴
   ============================================================ */
.mh-links { position: absolute; inset: 0; pointer-events: none; }
.mh-line {
  position: absolute; height: 0;
  border-top: 2px dashed rgba(11,61,46,.15);
  transform-origin: 0 0;
}
.mh-line-dot {
  position: absolute; top: -3.5px; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green-600);
  opacity: 0;
}
.mh-s2 .mh-line { opacity: 1; transition-duration: .8s; }
.mh-s2 .mh-line:nth-child(1) { transition-delay: .35s; }
.mh-s2 .mh-line:nth-child(2) { transition-delay: .60s; }
.mh-s2 .mh-line:nth-child(3) { transition-delay: .85s; }
.mh-s2 .mh-line:nth-child(4) { transition-delay: 1.10s; }
.mh-s2 .mh-line:nth-child(5) { transition-delay: 1.35s; }
@keyframes mh-dot-travel {
  0%   { transform: translateX(0);          opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(var(--len)); opacity: 0; }
}
.mh-s2 .mh-line-dot { animation: mh-dot-travel 2.6s var(--ease) infinite; }
.mh-s2 .mh-line:nth-child(2) .mh-line-dot { animation-delay: 1.0s; }
.mh-s2 .mh-line:nth-child(4) .mh-line-dot { animation-delay: 1.7s; }
.mh-s3 .mh-line-dot { animation: none; }
.mh-s3 .mh-line { opacity: 0; transition-duration: .45s; }

.mh-status {
  position: absolute; left: 50%; top: 47%;
  transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
}
.mh-status-en {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: .34em;
  color: var(--green-600); text-indent: .34em;
}
.mh-scanline {
  position: relative; width: 168px; height: 2px;
  margin: 15px auto 0; border-radius: 1px;
  background: rgba(17,21,19,.08); overflow: hidden;
}
.mh-scanline i {
  position: absolute; top: 0; left: 0; width: 46px; height: 100%;
  border-radius: 1px; background: var(--green-600);
}
@keyframes mh-scan { 0% { transform: translateX(-46px); } 100% { transform: translateX(168px); } }
.mh-s2 .mh-status { opacity: 1; transition-delay: .55s; transition-duration: .8s; }
.mh-s2 .mh-scanline i { animation: mh-scan 1.2s ease-in-out infinite; }
.mh-s2 .mh-c-news .mh-news-lines i:nth-child(2)::after { opacity: 1; transition-delay: 2.0s; }
.mh-s2 .mh-c-price .mh-spark polyline { stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease) 1.1s; }
.mh-s3 .mh-status { opacity: 0; transition-duration: .4s; }

/* ============================================================
   SCENE 3 — 리포트 조립 + 중개사 브랜드 적용 (하나의 씬)
   ============================================================ */
.mh-report {
  position: absolute; left: 50%; top: 49%;
  width: min(440px, 88vw);
  transform: translate(-50%, -50%) translateY(14px) scale(.985);
  background: var(--paper);
  border: 1px solid #D9E0DA;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(11,61,46,.09);
  padding: 20px 24px 24px;
  z-index: 3;
}
.mh-report::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 4px;
  border-radius: 16px 16px 0 0;
  background: var(--green-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .65s var(--ease);
}
.mh-report > * { opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: 0s; }

.mh-r-head { display: flex; align-items: flex-start; justify-content: space-between; min-height: 56px; }
.mh-r-owner { position: relative; width: 246px; min-height: 54px; }
.mh-r-owner-ph {
  position: absolute; inset: 0;
  border: 1.2px dashed #D5DDD8; border-radius: 10px;
  transition: opacity .45s var(--ease);
}
.mh-r-owner-ph i { position: absolute; background: rgba(17,21,19,.08); border-radius: 4px; }
.mh-r-owner-ph i:nth-child(1) { left: 13px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: #EFF3F0; }
.mh-r-owner-ph i:nth-child(2) { left: 52px; top: 15px; width: 118px; height: 9px; }
.mh-r-owner-ph i:nth-child(3) { left: 52px; top: 32px; width: 82px; height: 8px; }
.mh-r-owner-brand { display: flex; align-items: center; gap: 12px; padding-top: 5px; }
.mh-r-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--green-ink); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.85);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mh-r-mark svg { width: 20px; height: 20px; }
.mh-r-owner-names { line-height: 1.3; }
.mh-r-owner-name {
  font-size: 17px; font-weight: 700; color: var(--ink);
  opacity: 0; transform: translateX(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.mh-r-owner-sub {
  font-size: 13px; color: var(--muted);
  opacity: 0; transform: translateX(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.mh-r-weekly {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: .1em; color: var(--muted-2);
  padding-top: 8px;
}
.mh-r-sweep {
  position: absolute; inset: -4px -2px;
  border-radius: 10px; overflow: hidden;
  pointer-events: none; opacity: 0;
}
.mh-r-sweep i {
  position: absolute; top: 0; bottom: 0; width: 46px;
  background: linear-gradient(90deg, transparent, rgba(23,117,86,.28));
  border-right: 2px solid var(--green-600);
  transform: translateX(-52px);
}
@keyframes mh-sweep { 0% { transform: translateX(-52px); } 100% { transform: translateX(268px); } }

.mh-r-divider { height: 1px; background: var(--surface-2); margin: 12px 0 14px; transform: scaleX(0); transform-origin: left; }
.mh-r-title { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); transform: translateY(8px); }
.mh-r-meta { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mh-r-region {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--green-100); color: var(--green-ink);
  font-size: 14px; font-weight: 600;
}
.mh-r-region::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); }
.mh-r-week { font-size: 13px; color: var(--muted-2); }
.mh-r-badge {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: 999px;
  background: var(--green-700); color: #fff;
  font-size: 12.5px; font-weight: 600;
  transform: scale(.88);
}
.mh-r-badge svg { width: 12px; height: 12px; }

.mh-r-chart { display: block; width: 100%; height: 118px; margin-top: 16px; }
.mh-r-chart .mh-grid-l { stroke: var(--surface-2); stroke-width: 1; }
.mh-r-chart .mh-area { fill: url(#mhAreaFill); opacity: 0; transition: opacity .8s var(--ease); }
.mh-r-chart polyline.mh-main {
  fill: none; stroke: var(--green-700); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease);
}
.mh-r-chart .mh-enddot { fill: var(--green-700); opacity: 0; transition: opacity .3s var(--ease); }

.mh-r-line1 { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-top: 14px; }
.mh-r-skels { display: grid; gap: 9px; margin-top: 10px; }
.mh-r-skels i { display: block; height: 8px; border-radius: 4px; background: rgba(17,21,19,.07); }
.mh-r-skels i:nth-child(2) { width: 74%; }
.mh-r-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 16px; }
.mh-r-stat {
  background: #F6F8F6; border: 1px solid var(--surface-2);
  border-radius: 10px; padding: 10px 13px;
}
.mh-r-stat b { display: block; font-size: 12px; font-weight: 400; color: var(--muted-2); }
.mh-r-stat span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.mh-r-stat:last-child span { color: var(--green-700); }

/* 리포트 우상단 메일칩 — 씬4 비행 중에만 표시 */
.mh-r-mailchip {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-ink); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(11,61,46,.25);
  opacity: 0; transform: scale(.7);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.mh-r-mailchip svg { width: 19px; height: 19px; }

/* SCENE 3 시퀀스 (씬 길이 5.5s) */
.mh-s3 .mh-report { opacity: 1; transform: translate(-50%, -50%); transition-delay: .15s; transition-duration: .7s; }
.mh-s3 .mh-report::before { transform: scaleX(1); transition-delay: .5s; }
.mh-s3 .mh-c-deal, .mh-s3 .mh-c-volume, .mh-s3 .mh-c-price,
.mh-s3 .mh-c-jeonse, .mh-s3 .mh-c-news { opacity: .22; transition: opacity 1s var(--ease) .25s; }
.mh-s3 .mh-r-head    { opacity: 1; transition-delay: .75s; }
.mh-s3 .mh-r-divider { opacity: 1; transform: scaleX(1); transition-delay: 1.1s; }
.mh-s3 .mh-r-title   { opacity: 1; transform: none; transition-delay: 1.3s; }
.mh-s3 .mh-r-meta    { opacity: 1; transition-delay: 1.7s; }
.mh-s3 .mh-r-badge   { opacity: 0; }
.mh-s3 .mh-r-chart   { opacity: 1; transition-delay: 1.9s; }
.mh-s3 .mh-r-chart polyline.mh-main { stroke-dashoffset: 0; transition-delay: 2.0s; transition-duration: 1.6s; }
.mh-s3 .mh-r-chart .mh-area { opacity: 1; transition-delay: 2.5s; }
.mh-s3 .mh-r-chart .mh-enddot { opacity: 1; transition-delay: 3.6s; }
.mh-s3 .mh-r-line1   { opacity: 1; transition-delay: 3.5s; }
.mh-s3 .mh-r-skels   { opacity: 1; transition-delay: 3.8s; }
.mh-s3 .mh-r-stats   { opacity: 1; transition-delay: 4.15s; }
.mh-s3 .mh-r-badge   { opacity: 1; transform: scale(1); transition-delay: 4.55s; }
/* 브랜드 적용 — 씬3 마무리 */
.mh-s3 .mh-r-owner-ph { opacity: 0; transition-delay: 4.85s; }
.mh-s3 .mh-r-sweep { opacity: 1; transition: opacity .01s 4.8s; }
.mh-s3 .mh-r-sweep i { animation: mh-sweep .72s var(--ease) 4.82s forwards; }
.mh-s3 .mh-r-mark { opacity: 1; transform: scale(1); transition-delay: 5.05s; }
.mh-s3 .mh-r-owner-name { opacity: 1; transform: none; transition-delay: 5.28s; transition-duration: .55s; }
.mh-s3 .mh-r-owner-sub  { opacity: 1; transform: none; transition-delay: 5.55s; transition-duration: .55s; }

/* ============================================================
   SCENE 4 — 완성 리포트가 "중개사에게" 이메일로 도착
   ============================================================ */
.mh-agent {
  position: absolute;
  right: 4.5%; bottom: 15%;
  width: 360px;
  transform: translateY(18px);
  z-index: 2;
}
.mh-agent-svg { display: block; width: 100%; height: auto; }
@keyframes mh-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
.mh-agent-figure { animation: mh-idle 4.5s ease-in-out infinite; }

.mh-mail-toast {
  position: absolute; left: -6px; top: 96px;
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(11,61,46,.08);
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  transform: translateY(8px);
  white-space: nowrap; width: max-content;
}
.mh-mail-toast svg { width: 15px; height: 15px; color: var(--green-700); flex-shrink: 0; }

.mh-s4 .mh-c-deal, .mh-s4 .mh-c-volume, .mh-s4 .mh-c-price,
.mh-s4 .mh-c-jeonse, .mh-s4 .mh-c-news { opacity: 0; transition: opacity .8s var(--ease); }
.mh-s4 .mh-agent { opacity: 1; transform: none; transition-delay: .25s; transition-duration: .8s; }
.mh-s4 .mh-r-mailchip { opacity: 1; transform: scale(1); transition-delay: .55s; }
/* 리포트 비행: JS가 --mh-flyx/--mh-flyy 계산 (노트북 덮개 중심) */
.mh-s4 .mh-report {
  transform: translate(calc(-50% + var(--mh-flyx, 470px)), calc(-50% + var(--mh-flyy, 60px))) scale(.2);
  transition-delay: 1.05s;
  transition-duration: 1.15s;
}
.mh-s4 .mh-mail-toast { opacity: 1; transform: none; transition-delay: 2.45s; transition-duration: .6s; }

/* ============================================================
   SCENE 5 — 대시보드: 고객 리스트 + 메시지 컴포저
   ============================================================ */
.mh-dash {
  position: absolute; left: 44%; top: 47%;
  transform: translate(-50%, -50%) translateY(16px) scale(.97);
  width: 424px;
  background: var(--paper);
  border: 1px solid #D9E0DA;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(11,61,46,.09);
  padding: 18px 20px 20px;
  z-index: 3;
}
.mh-dash-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.mh-dash-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.mh-dash-sub { font-size: 12px; color: var(--muted-2); }
.mh-rows { display: grid; gap: 6px; }
.mh-row {
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              background .45s var(--ease), border-color .45s var(--ease);
  position: relative;
}
.mh-row-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #F1F4F1; border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  flex-shrink: 0;
}
.mh-row-name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.mh-row-tail { margin-left: auto; font-size: 12px; color: var(--muted-2); opacity: 0; transition: opacity .4s var(--ease); }
.mh-row1::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px; background: var(--green-700);
  opacity: 0; transition: opacity .4s var(--ease);
}
.mh-composer {
  margin-top: 14px; padding: 13px 14px 14px;
  background: #F7F9F7; border: 1px solid var(--surface-2);
  border-radius: 12px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  position: relative;
}
.mh-cline1 {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.5;
  white-space: nowrap; overflow: hidden;
  max-width: 0;
  transition: max-width 1.15s linear;
}
.mh-cline2 {
  display: block; height: 8px; border-radius: 4px;
  background: rgba(17,21,19,.08);
  margin-top: 9px; width: 0;
  transition: width .55s var(--ease);
}
.mh-send {
  position: absolute; right: 12px; bottom: -14px;
  height: 32px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: var(--green-ink); color: #fff;
  font-size: 13px; font-weight: 600;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(11,61,46,.22);
  opacity: 0; transform: scale(.9);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
@keyframes mh-press {
  0% { transform: scale(1); }
  45% { transform: scale(.92); background-color: var(--green-800); }
  100% { transform: scale(1); }
}

.mh-s5 .mh-report { opacity: 0; transition: opacity .5s var(--ease); }
.mh-s5 .mh-dash { opacity: 1; transform: translate(-50%, -50%); transition-delay: .35s; transition-duration: .7s; }
.mh-s5 .mh-row { opacity: 1; transform: none; }
.mh-s5 .mh-row1 { transition-delay: .70s; }
.mh-s5 .mh-row2 { transition-delay: .85s; }
.mh-s5 .mh-row3 { transition-delay: 1.00s; }
.mh-s5 .mh-row4 { transition-delay: 1.15s; }
/* 중개사가 고객 한 명을 "선택" */
.mh-s5 .mh-row1 { background: var(--green-50); border-color: var(--green-100); transition-delay: .70s, .70s, 1.75s, 1.75s; }
.mh-s5 .mh-row1::before { opacity: 1; transition-delay: 1.75s; }
.mh-s5 .mh-row1 .mh-row-tail { opacity: 1; transition-delay: 1.9s; }
.mh-s5 .mh-composer { opacity: 1; transform: none; transition-delay: 2.15s; }
.mh-s5 .mh-cline1 { max-width: 100%; transition-delay: 2.5s; }
.mh-s5 .mh-cline2 { width: 62%; transition-delay: 3.7s; }
.mh-s5 .mh-send { opacity: 1; transform: scale(1); transition-delay: 2.3s; }
.mh-s5 .mh-mail-toast { opacity: 0; transition: opacity .5s var(--ease) 1.6s; }

/* ============================================================
   SCENE 6 — 중개사가 직접 전송 → 고객 스마트폰 "확인"
   ============================================================ */
.mh-phone {
  position: absolute; left: 66%; top: 40%;
  width: 158px;
  transform: translateY(14px);
  z-index: 2;
}
.mh-ph-frame {
  background: var(--paper);
  border: 1.5px solid #D5DCD6;
  border-radius: 22px;
  box-shadow: 0 8px 26px rgba(11,61,46,.09);
  padding: 26px 12px 18px;
  position: relative;
}
.mh-ph-notch {
  position: absolute; top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 5px; border-radius: 3px;
  background: #E3E8E3;
}
.mh-ph-from {
  display: block; text-align: center;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  margin-bottom: 12px;
}
.mh-ph-slot { min-height: 86px; }
.mh-ph-bubble {
  background: var(--green-100);
  border-radius: 12px 12px 12px 4px;
  padding: 10px 11px;
  display: grid; gap: 7px;
  opacity: 0; transform: scale(.92);
  transform-origin: bottom left;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mh-ph-bubble i { display: block; height: 6px; border-radius: 3px; background: rgba(11,61,46,.28); }
.mh-ph-bubble i:nth-child(2) { width: 64%; }
.mh-ph-read {
  display: inline-block; margin-top: 8px;
  font-size: 11px; font-weight: 600; color: var(--green-700);
  opacity: 0; transition: opacity .45s var(--ease);
}
.mh-flybubble {
  position: absolute; left: 0; top: 0;
  width: 13px; height: 13px; border-radius: 50% 50% 50% 3px;
  background: var(--green-700);
  opacity: 0; z-index: 4;
  pointer-events: none;
}
@keyframes mh-flyb {
  0%   { transform: translate(0, 0) scale(.65); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate(var(--bx, 320px), var(--by, -60px)) scale(1); opacity: 0; }
}

.mh-s6 .mh-send { animation: mh-press .42s ease .35s; }
.mh-s6 .mh-phone { opacity: 1; transform: none; transition-delay: .15s; transition-duration: .7s; }
.mh-s6 .mh-flybubble { animation: mh-flyb .85s var(--ease) .62s forwards; }
.mh-s6 .mh-ph-bubble { opacity: 1; transform: scale(1); transition-delay: 1.42s; }
.mh-s6 .mh-ph-read { opacity: 1; transition-delay: 2.35s; }

/* ============================================================
   최종 브랜드 페이오프
   ============================================================ */
.mh-final {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%) translateY(10px);
  text-align: center; z-index: 5; pointer-events: none;
  transition-duration: .8s;
}
.mh-final-l1 {
  font-size: clamp(25px, 2.5vw, 39px);
  font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
.mh-final-l2 {
  margin-top: 14px;
  font-size: clamp(14px, 1.25vw, 19px);
  font-weight: 500; color: var(--muted);
}
.mh-final-brand {
  margin-top: clamp(34px, 4.6vh, 58px);
  font-size: clamp(48px, 5.2vw, 88px);
  font-weight: 800; letter-spacing: -0.045em;
  color: var(--ink); line-height: 1;
  white-space: nowrap;
}
.mh-final-brand em { font-style: normal; color: var(--green-700); }

.mh-payoff .mh-final { opacity: 1; transform: translate(-50%, -50%); transition-delay: .5s; transition-duration: .6s; }
@keyframes mh-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .93; } }
.mh-payoff .mh-final-brand { animation: mh-breathe 6.5s ease-in-out 2.4s infinite; }

/* ============================================================
   하단 Step Navigation — 4단계 (실제 서비스 구조)
   ============================================================ */
.mh-steps {
  position: absolute; left: 50%; bottom: 30px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  z-index: 5;
}
.mh-s1 .mh-steps { opacity: 1; transition-delay: .3s; }
.mh-step { display: flex; align-items: center; gap: 9px; }
.mh-step-dot {
  position: relative;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper); border: 1.4px solid #D8DFDA;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; color: var(--muted-2);
  transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.mh-step-dot svg {
  position: absolute; width: 12px; height: 12px;
  color: var(--green-700); opacity: 0; transition: opacity .3s var(--ease);
}
.mh-step-label {
  font-size: 15px; font-weight: 600; color: var(--muted-2);
  transition: color .45s var(--ease);
  white-space: nowrap;
}
.mh-lb-short { display: none; }
.mh-track {
  position: relative; width: 66px; height: 2px;
  border-radius: 1px; background: #E2E7E3; overflow: hidden;
}
.mh-track i {
  position: absolute; inset: 0;
  background: var(--green-700);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}

/* step 상태 — 누적 클래스 캐스케이드 */
.mh-s1 .mh-step1 .mh-step-dot { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.mh-s1 .mh-step1 .mh-step-label { color: var(--ink); }

.mh-s3 .mh-track1 i { transform: scaleX(1); }
.mh-s3 .mh-step1 .mh-step-dot { background: var(--green-50); border-color: rgba(23,117,86,.4); color: transparent; }
.mh-s3 .mh-step1 .mh-step-dot svg { opacity: 1; transition-delay: .45s; }
.mh-s3 .mh-step1 .mh-step-label { color: var(--muted); }
.mh-s3 .mh-step2 .mh-step-dot { background: var(--green-ink); border-color: var(--green-ink); color: #fff; transition-delay: .5s; }
.mh-s3 .mh-step2 .mh-step-label { color: var(--ink); transition-delay: .5s; }

.mh-s4 .mh-track2 i { transform: scaleX(1); }
.mh-s4 .mh-step2 .mh-step-dot { background: var(--green-50); border-color: rgba(23,117,86,.4); color: transparent; transition-delay: 0s; }
.mh-s4 .mh-step2 .mh-step-dot svg { opacity: 1; transition-delay: .45s; }
.mh-s4 .mh-step2 .mh-step-label { color: var(--muted); transition-delay: 0s; }
.mh-s4 .mh-step3 .mh-step-dot { background: var(--green-ink); border-color: var(--green-ink); color: #fff; transition-delay: .5s; }
.mh-s4 .mh-step3 .mh-step-label { color: var(--ink); transition-delay: .5s; }

.mh-s5 .mh-track3 i { transform: scaleX(1); }
.mh-s5 .mh-step3 .mh-step-dot { background: var(--green-50); border-color: rgba(23,117,86,.4); color: transparent; transition-delay: 0s; }
.mh-s5 .mh-step3 .mh-step-dot svg { opacity: 1; transition-delay: .45s; }
.mh-s5 .mh-step3 .mh-step-label { color: var(--muted); transition-delay: 0s; }
.mh-s5 .mh-step4 .mh-step-dot { background: var(--green-ink); border-color: var(--green-ink); color: #fff; transition-delay: .5s; }
.mh-s5 .mh-step4 .mh-step-label { color: var(--ink); transition-delay: .5s; }

/* ============================================================
   PAYOFF OVERRIDES — 최종 카피 진입 시 주변 UI 정리
   (특이도 상승 + 파일 후반 배치로 씬별 delay 상속 리셋)
   ============================================================ */
.motion-hero.mh-payoff .mh-report,
.motion-hero.mh-payoff .mh-agent,
.motion-hero.mh-payoff .mh-dash,
.motion-hero.mh-payoff .mh-phone,
.motion-hero.mh-payoff .mh-mail-toast,
.motion-hero.mh-payoff .mh-steps {
  opacity: 0;
  transition-duration: .7s;
  transition-delay: 0s;
}
.motion-hero.mh-payoff .mh-flybubble { animation: none; }
.motion-hero.mh-payoff .mh-agent-figure { animation: none; }

/* ============================================================
   SCROLL TRANSITION — 스크롤 시 워드마크 미세 상승 + fade
   ============================================================ */
.motion-hero.mh-payoff.mh-scrolled .mh-final {
  opacity: .18;
  transform: translate(-50%, -54%);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: 0s;
}

/* ============================================================
   BRIDGE — Motion Hero ↔ Sales Hero 사이 editorial 연결 구간
   ============================================================ */
.mh-bridge {
  position: relative;
  padding: 78px 24px 86px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFEFD 45%, #FFFFFF 100%);
  text-align: center;
}
.mh-bridge-line {
  display: block;
  width: 1px; height: 30px;
  margin: 0 auto 22px;
  background: var(--green-600);
  opacity: .55;
}
.mh-bridge-copy {
  font-size: 18px; line-height: 1.75;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.mh-bridge-copy strong {
  display: block;
  margin-top: 2px;
  font-size: 21px; font-weight: 700;
  color: var(--ink);
}
.mh-bridge-copy strong em { font-style: normal; color: var(--green-700); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .mh-card { width: 250px; padding: 15px 18px 17px; }
  .mh-c-deal   { left: 3%; }
  .mh-c-volume { left: 2%; }
  .mh-c-price  { left: 4%; }
  .mh-c-jeonse { right: 3%; }
  .mh-c-news   { right: 2%; }
  .mh-agent { width: 300px; right: 2.5%; }
  .mh-dash { left: 42%; width: 400px; }
  .mh-phone { left: 68%; }
}

@media (max-width: 820px) {
  .mh-stage { min-height: 660px; }

  .mh-c-price, .mh-c-news { display: none; }
  .mh-card { width: min(46vw, 235px); }
  .mh-c-deal   { left: 4%;  top: 3.5%; }
  .mh-c-jeonse { right: 4%; top: 3.5%; }
  .mh-c-volume { left: 4%;  top: 22%; }
  .mh-card-value { font-size: 17px; }
  .mh-c-volume .mh-card-value { font-size: 24px; }

  .mh-status { top: 42%; }

  .mh-report { width: min(400px, 92vw); top: 47%; padding: 16px 18px 18px; }
  .mh-r-title { font-size: 20px; }
  .mh-r-chart { height: 96px; }
  .mh-r-owner { width: 220px; }
  .mh-r-stats { gap: 8px; }
  .mh-r-stat { padding: 8px 10px; }
  .mh-r-stat span { font-size: 14px; }

  /* 모바일: 캐릭터 일러스트 생략, 토스트가 수신 장면을 대신함 */
  .mh-agent { right: auto; left: 50%; top: 20%; bottom: auto; width: 0; transform: none; }
  .mh-agent-svg { display: none; }
  .mh-mail-toast { left: 50%; top: 0; transform: translateX(-50%) translateY(8px); }
  .mh-s4 .mh-mail-toast { transform: translateX(-50%); }
  .mh-s4 .mh-report {
    transform: translate(calc(-50% + var(--mh-flyx, 0px)), calc(-50% + var(--mh-flyy, -220px))) scale(.16);
  }

  .mh-dash { left: 50%; top: 46%; width: min(400px, 90vw); }
  .mh-phone { left: 50%; top: auto; bottom: 34%; transform: translateX(-50%) translateY(14px); width: 148px; }
  .mh-s6 .mh-phone { transform: translateX(-50%); }
  .mh-phone { left: auto; right: 5%; top: 8%; bottom: auto; transform: translateY(14px); }
  .mh-s6 .mh-phone { transform: none; }

  .mh-steps { bottom: 22px; gap: 6px; }
  .mh-track { width: 18px; }
  .mh-step { gap: 5px; }
  .mh-step-dot { width: 22px; height: 22px; font-size: 11px; }
  .mh-step-label { font-size: 12px; }
  .mh-lb-full { display: none; }
  .mh-lb-short { display: inline; }

  .mh-final-l1 { font-size: clamp(20px, 5.4vw, 26px); }
  .mh-final-l2 { font-size: clamp(13px, 3.6vw, 16px); }
  .mh-final-brand { font-size: clamp(40px, 11vw, 54px); margin-top: 30px; }

  .mh-bridge { padding: 56px 20px 62px; }
  .mh-bridge-copy { font-size: 16px; }
  .mh-bridge-copy strong { font-size: 18px; }
}

/* ============================================================
   Reduced motion — 핵심 상태(브랜드 리포트 + 중개사 + 스텝) 정적 표시
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .motion-hero *, .motion-hero *::before, .motion-hero *::after {
    animation: none !important;
    transition: none !important;
  }
  .motion-hero .mh-card, .motion-hero .mh-report, .motion-hero .mh-report > *,
  .motion-hero .mh-steps, .motion-hero .mh-agent { opacity: 1 !important; transform: none !important; }
  .motion-hero .mh-report { transform: translate(-50%, -50%) !important; }
  .motion-hero .mh-report::before { transform: scaleX(1) !important; }
  .motion-hero .mh-spark polyline, .motion-hero .mh-r-chart polyline.mh-main { stroke-dashoffset: 0 !important; }
  .motion-hero .mh-r-chart .mh-area, .motion-hero .mh-r-chart .mh-enddot { opacity: 1 !important; }
  .motion-hero .mh-bars span { transform: scaleY(1) !important; }
  .motion-hero .mh-r-owner-ph, .motion-hero .mh-r-sweep { opacity: 0 !important; }
  .motion-hero .mh-r-mark, .motion-hero .mh-r-owner-name, .motion-hero .mh-r-owner-sub { opacity: 1 !important; transform: none !important; }
  .motion-hero .mh-r-badge { opacity: 1 !important; transform: none !important; }
  .motion-hero .mh-r-mailchip, .motion-hero .mh-mail-toast, .motion-hero .mh-status,
  .motion-hero .mh-line, .motion-hero .mh-dash, .motion-hero .mh-phone,
  .motion-hero .mh-flybubble, .motion-hero .mh-final { opacity: 0 !important; }
}

/* ============================================================
   HERO 통합 오버라이드 — Motion Hero를 Sales Hero 우측 컬럼에 이식
   (.hero-motion 래퍼 기준. 기존 씬/타이밍/JS 로직 무변경.
    전체 화면용 배치를 우측 컬럼(약 640×620) 규모로 컴팩트 재배치)
   ============================================================ */

/* Hero 2열 비율: 좌 43% / 우 57% (데스크톱에서만) */
@media (min-width: 821px) {
  .hero .hero-inner { grid-template-columns: 50fr 50fr; }
}

/* 래퍼: 섹션 스타일 해제 */
.hero-motion {
  min-height: 0;
  height: 620px;
  padding-top: 0;
  background: none;
  overflow: visible;
  position: relative;
}
.hero-motion::before { content: none; }
.hero-motion .mh-stage {
  height: 100%;
  min-height: 0;
  max-width: none;
  margin: 0;
}

/* ---- 컴팩트 데이터 카드 (기존 시각 흐름 유지, 크기만 축소) ---- */
.hero-motion .mh-card { width: 204px; padding: 13px 16px 15px; border-radius: 12px; }
.hero-motion .mh-card-label { font-size: 12px; }
.hero-motion .mh-card-value { font-size: 15px; margin-top: 7px; }
.hero-motion .mh-c-volume .mh-card-value { font-size: 22px; }
.hero-motion .mh-card-arrow { border-left-width: 5px; border-right-width: 5px; border-bottom-width: 8px; }
.hero-motion .mh-spark { height: 32px; margin-top: 8px; }
.hero-motion .mh-bars { height: 38px; gap: 8px; margin-top: 8px; }
.hero-motion .mh-bars span { width: 15px; }
.hero-motion .mh-news-lines { margin-top: 10px; gap: 8px; }
.hero-motion .mh-c-price { display: none; }   /* 좁은 컬럼: 카드 4장 구성 */
.hero-motion .mh-c-deal   { left: 1%;  top: 3%; }
.hero-motion .mh-c-jeonse { right: 1%; top: 3%; }
.hero-motion .mh-c-volume { left: 0;   top: 25%; }
.hero-motion .mh-c-news   { right: 0;  top: 25%; }

.hero-motion .mh-status { top: 50%; }
.hero-motion .mh-scanline { width: 132px; margin-top: 11px; }
.hero-motion .mh-status-en { font-size: 11px; }

/* ---- 리포트 ---- */
.hero-motion .mh-report { width: 356px; top: 47%; padding: 15px 18px 18px; }
.hero-motion .mh-r-title { font-size: 19px; }
.hero-motion .mh-r-chart { height: 88px; margin-top: 12px; }
.hero-motion .mh-r-owner { width: 212px; min-height: 50px; }
.hero-motion .mh-r-owner-name { font-size: 15px; }
.hero-motion .mh-r-owner-sub { font-size: 12px; }
.hero-motion .mh-r-mark { width: 34px; height: 34px; }
.hero-motion .mh-r-owner-ph i:nth-child(2) { width: 100px; }
.hero-motion .mh-r-owner-ph i:nth-child(3) { width: 70px; }
.hero-motion .mh-r-line1 { font-size: 12.5px; margin-top: 11px; }
.hero-motion .mh-r-skels { gap: 7px; margin-top: 8px; }
.hero-motion .mh-r-stats { gap: 8px; margin-top: 12px; }
.hero-motion .mh-r-stat { padding: 7px 10px; }
.hero-motion .mh-r-stat span { font-size: 13.5px; }
.hero-motion .mh-r-stat b { font-size: 11px; }
.hero-motion .mh-r-meta { margin-top: 9px; gap: 9px; }
.hero-motion .mh-r-region { height: 26px; padding: 0 11px; font-size: 12.5px; }
.hero-motion .mh-r-week { font-size: 12px; }
.hero-motion .mh-r-badge { height: 26px; padding: 0 11px; font-size: 11px; }
.hero-motion .mh-r-mailchip { width: 34px; height: 34px; top: -12px; right: -12px; }
.hero-motion .mh-r-mailchip svg { width: 16px; height: 16px; }

/* ---- 캐릭터 / 토스트 ---- */
.hero-motion .mh-agent { width: 236px; right: -1%; bottom: 9%; }
.hero-motion .mh-mail-toast {
  left: -30px; top: 56px;
  height: 30px; padding: 0 12px; font-size: 12px;
}
.hero-motion .mh-mail-toast svg { width: 13px; height: 13px; }

/* ---- 대시보드 ---- */
.hero-motion .mh-dash { width: 336px; left: 42%; top: 46%; padding: 14px 16px 16px; }
.hero-motion .mh-dash-title { font-size: 14px; }
.hero-motion .mh-dash-sub { font-size: 11px; }
.hero-motion .mh-row { height: 38px; padding: 0 10px; gap: 10px; }
.hero-motion .mh-row-avatar { width: 26px; height: 26px; font-size: 12px; }
.hero-motion .mh-row-name { font-size: 13px; }
.hero-motion .mh-row-tail { font-size: 11px; }
.hero-motion .mh-composer { margin-top: 11px; padding: 11px 12px 12px; }
.hero-motion .mh-cline1 { font-size: 12px; }
.hero-motion .mh-send { height: 28px; padding: 0 15px; font-size: 12px; bottom: -12px; }

/* ---- 스마트폰 ---- */
.hero-motion .mh-phone { width: 128px; left: auto; right: 1%; top: 20%; }
.hero-motion .mh-ph-frame { padding: 20px 10px 14px; border-radius: 18px; }
.hero-motion .mh-ph-from { font-size: 10.5px; margin-bottom: 9px; }
.hero-motion .mh-ph-slot { min-height: 70px; }

/* ---- 최종 payoff (우측 컬럼 중앙 기준) ---- */
.hero-motion .mh-final { top: 45%; width: 100%; }
.hero-motion .mh-final-l1 { font-size: clamp(19px, 1.45vw, 25px); }
.hero-motion .mh-final-l2 { font-size: clamp(12.5px, .95vw, 15px); margin-top: 10px; }
.hero-motion .mh-final-brand { font-size: clamp(36px, 3.2vw, 58px); margin-top: clamp(24px, 3.4vh, 40px); }

/* ---- Step Navigation ---- */
.hero-motion .mh-steps { bottom: 8px; gap: 8px; }
.hero-motion .mh-step { gap: 6px; }
.hero-motion .mh-step-dot { width: 22px; height: 22px; font-size: 11px; }
.hero-motion .mh-step-label { font-size: 12.5px; }
.hero-motion .mh-track { width: 22px; }

/* ---- 통합 후 모바일 (hero-inner가 1열로 전환) ---- */
@media (max-width: 820px) {
  .hero-motion { height: 580px; max-width: 440px; margin: 0 auto; width: 100%; }
  .hero-motion .mh-stage { min-height: 0; }
  /* 카드 2×2 그리드: 위 실거래·전세가율 / 아래 거래량·시장 뉴스
     — 4장 모두 동일한 크기(폭 46%·높이 104px 고정)로 통일, 중앙 갭 5% 확보 */
  .hero-motion .mh-c-news   { display: block; }
  .hero-motion .mh-c-deal   { left: 1.5%;  top: 8px; }
  .hero-motion .mh-c-jeonse { right: 1.5%; top: 8px; left: auto; }
  .hero-motion .mh-c-volume { left: 1.5%;  top: 126px; }
  .hero-motion .mh-c-news   { right: 1.5%; top: 126px; left: auto; }
  .hero-motion .mh-card {
    width: 46%; height: 104px;
    padding: 12px 14px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .hero-motion .mh-bars { gap: 6px; height: 34px; margin-top: 0; }
  .hero-motion .mh-bars span { width: 11px; }
  .hero-motion .mh-spark { height: 30px; margin-top: 0; }
  .hero-motion .mh-spark-row { gap: 10px; }
  .hero-motion .mh-news-lines { margin-top: 0; gap: 9px; }
  .hero-motion .mh-card-value { font-size: 14px; margin-top: 0; }
  .hero-motion .mh-c-volume .mh-card-value { font-size: 20px; }
  .hero-motion .mh-agent { width: 0; right: auto; left: 50%; }
  .hero-motion .mh-mail-toast { left: 50%; top: 0; }
  .hero-motion .mh-report { width: min(356px, 90vw); }
  .hero-motion .mh-dash { left: 50%; width: min(336px, 88vw); }
  .hero-motion .mh-phone { right: 2%; top: 6%; }
  .hero-motion .mh-final-l1 { font-size: 19px; }
  .hero-motion .mh-final-l2 { font-size: 12.5px; }
  .hero-motion .mh-final-brand { font-size: 38px; }
}

/* ============================================================
   통합 Hero 타이포그래피 — 좌측 컬럼 축소에 따른 헤드라인 대응
   (main.css 무수정. 우선순위: ① 컬럼 비율 48:52 재조정
    ② .hero-text 컨테이너화 ③ cqi 유동 폰트 ④ nowrap ⑤ keep-all)
   ============================================================ */
.hero .hero-text { word-break: keep-all; }   /* 한국어 카피: 음절 중간 줄바꿈 금지 (전 해상도) */

@media (min-width: 821px) {
  .hero .hero-text { container-type: inline-size; }
  .hero .hero-headline .hl-line-2 {
    white-space: nowrap;
    font-size: clamp(44px, 5.4vw, 88px);    /* fallback: cqi 미지원 브라우저 */
    font-size: clamp(44px, 13.2cqi, 88px);  /* 좌측 컬럼 폭 기준 유동 크기 */
  }
}

/* ============================================================
   MOTION 컴포지션 확대 — 우측 Motion Hero만 스케일업
   (좌측 카피/레이아웃 무변경. buildGeometry가 scale 보정 처리)
   ============================================================ */
@media (min-width: 821px) {
  .hero-motion .mh-stage {
    transform: scale(var(--mh-zoom, 1.12));
    transform-origin: 50% 46%;
  }
}
@media (min-width: 1440px) {
  .hero-motion .mh-stage { --mh-zoom: 1.18; }
}
@media (min-width: 1920px) {
  .hero-motion .mh-stage { --mh-zoom: 1.24; }
}

/* ============================================================
   좌측 카피 확대 — Hero 컨테이너 폭 확장으로 좌 컬럼을 키우고
   (헤드라인은 cqi가 자동 추종 → 한 줄 유지) 서브 카피도 비례 상향.
   우측은 스테이지 자체가 넓어지므로 zoom을 낮춰 기존 시각 크기 유지.
   ============================================================ */
@media (min-width: 821px) {
  .hero .hero-inner { max-width: 1400px; gap: 60px; }
  .hero .hero-eyebrow { font-size: 14.5px; padding: 8px 16px; }
  .hero .hero-sub { font-size: 20.5px; max-width: 600px; }
  .hero .hero-sub-em { font-size: 19px; }
  .hero .hero-cta-group .btn-lg { padding: 20px 36px; font-size: 18.5px; }
  .hero .hero-cta-note { font-size: 15px; }
  .hero .hero-urgency { font-size: 15px; }
  .hero .hero-headline .hl-line-1 { font-size: clamp(28px, 6.6cqi, 44px); }

  /* 넓어진 스테이지 보정: 기존 시각 크기 유지 수준으로 zoom 하향 */
  .hero-motion .mh-stage { --mh-zoom: 1.05; }
}
@media (min-width: 1440px) {
  .hero-motion .mh-stage { --mh-zoom: 1.10; }
}
@media (min-width: 1920px) {
  .hero-motion .mh-stage { --mh-zoom: 1.15; }
}

/* ============================================================
   섹션 제목 스케일 상향 — Hero 85px 기준 재정렬
   위계: Hero 85 > Final CTA 66 > 메인 주장 섹션 56 > 일반/질문형 52 > 보조 48
   (main.css 무수정 · 이 파일이 main.css보다 뒤에 로드되어 override,
    poster/patent 전용 CSS보다는 특이도로 우선)
   ============================================================ */
/* ── 데스크톱/태블릿(821px+)에서만 상향. 모바일은 아래 블록에서 별도 처리 ── */
@media (min-width: 821px) {
  .section-title { font-size: clamp(42px, 3vw, 52px); }
  /* 메인 주장 섹션 */
  #product-flow .section-title,
  #stats .section-title,
  #how .section-title,
  #pricing .section-title { font-size: clamp(44px, 3.2vw, 56px); }
  /* 보조 섹션 (점두 브리핑) */
  #poster-system .section-title { font-size: clamp(38px, 2.6vw, 44px); }
  section .patent-engine-title { font-size: clamp(42px, 2.8vw, 48px); }
  section .relationship-roi-title { font-size: clamp(44px, 3.2vw, 56px); }
  .cta-title { font-size: clamp(54px, 3.6vw, 66px); }
}

/* ── 모바일(≤820px): 대부분 2줄로 떨어지는 크기. 화면폭에 따라 유동 ── */
@media (max-width: 820px) {
  .section-title,
  section .patent-engine-title,
  section .relationship-roi-title {
    font-size: clamp(23px, 6.9vw, 29px);
  }
  #poster-system .section-title { font-size: clamp(22px, 6.6vw, 28px); }
  .cta-title { font-size: clamp(25px, 7.4vw, 31px); }
}

/* 줄바꿈 품질 (전 해상도) */
.section-title,
section .patent-engine-title,
section .relationship-roi-title,
.cta-title { word-break: keep-all; }

#poster-system .section-title .nb { white-space: nowrap; }

/* ============================================================
   MOBILE 섹션 압축 (≤820px) — 스크롤 길이 22화면 → 16화면
   원칙: 삭제보다 압축. 단 중복 섹션(how)만 모바일에서 숨김.
   데스크톱은 일절 영향 없음.
   ============================================================ */
@media (max-width: 820px) {

  /* ── ① 특허 엔진: 출원번호 배지를 상단으로, 다이어그램 압축 ──
     주의: motion-hero.css가 patent-engine-section.css보다 먼저 로드되므로
     #patent-engine 으로 특이도를 올려야 override 된다. */
  #patent-engine .patent-engine-inner { display: flex; flex-direction: column; }
  #patent-engine .patent-engine-head    { order: 1; }
  #patent-engine .patent-engine-trust   { order: 2; margin: 4px 0 20px; }  /* 출원번호 = 핵심 자산 */
  #patent-engine .patent-engine-flow    { order: 3; }
  #patent-engine .patent-engine-ip-notice { order: 4; }

  #patent-engine .patent-engine-sub { display: none; }        /* 제목이 같은 내용 */
  #patent-engine .patent-engine-conduit { display: none; }    /* 세로 스택에선 무의미한 장식선 */
  #patent-engine .patent-engine-flow { gap: 12px; }
  #patent-engine .patent-engine-zone { padding: 14px 16px; gap: 10px; }

  /* 신호 출처 4종 → 2×2 그리드 */
  #patent-engine .patent-engine-source-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  #patent-engine .patent-engine-source { padding: 9px 10px; gap: 4px; }
  #patent-engine .patent-engine-source-name { font-size: 12.5px; }

  /* 엔진 3단계 압축 */
  #patent-engine .patent-engine-engine-steps { gap: 6px; }
  #patent-engine .patent-engine-engine-step { padding: 7px 0; }
  #patent-engine .patent-engine-engine-step-desc { font-size: 12px; }
  #patent-engine .patent-engine-engine-card { padding: 14px; }

  /* 출력 샘플: 결론 제목까지만, 상세 3행은 접기 */
  #patent-engine .patent-engine-output-rows { display: none; }
  #patent-engine .patent-engine-output-card { padding: 14px; }

  /* ── ② 시장 데이터: 3번째 수치(ROI 섹션과 중복) 제외 ── */
  #stats .stat-block:nth-child(3) { display: none; }
  #stats .stat-desc-body { font-size: 13px; line-height: 1.5; }
  #stats .stat-block { padding: 26px 20px; }

  /* ── ③ 사용 장면: 3장면 → 2장면 (장면 2는 점두 브리핑과 중복) ── */
  #scenarios .scenario-card:nth-child(2) { display: none; }

  /* ── ④ 점두 브리핑: 3종 설명을 한 줄 칩으로 압축 ── */
  #poster-system .poster-system-point {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
  }
  #poster-system .poster-system-point-tag { flex-shrink: 0; }
  #poster-system .poster-system-point br { display: none; }
  #poster-system .poster-system-point { font-size: 13px; line-height: 1.45; }
  #poster-system .poster-system-sub br { display: none; }
}

/* ── 모바일 추가 압축 (≤820px) ── */
@media (max-width: 820px) {
  /* 신뢰 요소 4종 → 2×2 그리드 (텍스트 유지, 세로 길이 절반) */
  #trust .trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  #trust .trust-item { padding: 16px 14px; }
  #trust .trust-item br { display: none; }

  /* 후기: 3개 → 2개 (사회적 증거는 2개로 충분) */
  #reviews .review-card:nth-child(3) { display: none; }

  /* 체크리스트: 행 간격 압축 */
  #problem .check-row { padding-top: 14px; padding-bottom: 14px; }
  #problem .problem-closing br { display: none; }

  /* 점두 브리핑 샘플: 종이 미리보기 축소 */
  #poster-system .poster-system-preview { transform: scale(.86); transform-origin: top center; margin-bottom: -60px; }
}

/* 신호 출처 칩: 2×2 그리드에서 한 줄로 떨어지게 미세 조정 */
@media (max-width: 820px) {
  #patent-engine .patent-engine-source { padding: 8px 9px; gap: 6px; }
  #patent-engine .patent-engine-source-tag { font-size: 9px; padding: 2px 5px; }
  #patent-engine .patent-engine-source-name { font-size: 11.5px; white-space: nowrap; }
  #patent-engine .patent-engine-trust-meta { font-size: 11px; line-height: 1.5; }
}

@media (max-width: 380px) {
  #patent-engine .patent-engine-source { padding: 8px 7px; }
  #patent-engine .patent-engine-source-name { font-size: 11px; }
  #patent-engine .patent-engine-source-list { gap: 6px; }
}



/* ============================================================
   결제 섹션 — 2플랜 구성 (프로 / 비즈니스 문의)
   ============================================================ */
.pricing-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
  margin-inline: auto;
}
.plan-vat {
  margin: -6px 0 18px;
  font-size: 12.5px;
  color: var(--muted-2);
  letter-spacing: -0.01em;
}
.plan-card.featured .plan-vat { color: rgba(255,255,255,0.62); }
.price-inquiry {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.plan-price-inquiry { display: flex; align-items: baseline; }
.plan-card-inquiry { display: flex; flex-direction: column; }
.plan-card-inquiry .plan-features { margin-bottom: auto; }

/* 모바일: 2장 세로 스택 + 내부 압축 (캐러셀 불필요) */
@media (max-width: 820px) {
  .pricing-grid-2 { grid-template-columns: 1fr; gap: 14px; max-width: 440px; }
  #pricing .plan-card { padding: 24px 20px; }
  #pricing .plan-tagline { font-size: 13px; line-height: 1.45; }
  #pricing .plan-price { margin: 12px 0 6px; }
  #pricing .plan-vat { margin: 0 0 14px; font-size: 12px; }
  #pricing .plan-features { gap: 8px; }
  #pricing .plan-features li { font-size: 13.5px; }
  #pricing .plan-note { margin-top: 8px; font-size: 12px; }
  #pricing .price-inquiry { font-size: 26px; }
}

/* 모바일: 비즈니스(문의) 카드는 존재와 연락 경로만 — 상세 기능은 데스크톱에서 */
@media (max-width: 820px) {
  #pricing .plan-card-inquiry { padding: 20px; }
  #pricing .plan-card-inquiry .plan-features li:nth-child(n+3) { display: none; }
  #pricing .plan-card-inquiry .plan-vat { margin-bottom: 12px; }
  #pricing .plan-card-inquiry .plan-price { margin: 10px 0 4px; }
  #pricing .plan-card-inquiry .plan-note { font-size: 11.5px; }
}

/* ============================================================
   MOBILE 3-BEAT LOOP (≤820px 전용) — 2026-08-16
   데스크톱 32초 타임라인 대체: 분석 → 내 이름 리포트 → 매주 도착
   · 데스크톱: .mh-mstage 미표시 (기존 모션 그대로)
   · 모바일: .mh-stage 숨김 + 이 스테이지만 (JS도 타임라인 스킵)
   · 파일 맨 끝 배치 — 기존 캐스케이드 순서 규약 준수
   ============================================================ */
.mh-mstage { display: none; }

@media (max-width: 820px) {
  .hero-motion .mh-stage { display: none; }

  .mh-mstage {
    position: relative;
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 4px auto 0;
    aspect-ratio: 5 / 5.9;
    /* 프레임 없음 — 내부 카드들이 히어로 배경 위에 바로 부양 */
    background: none;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .mhm-beat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .mh-mstage.mhm-b1 .mhm-beat1,
  .mh-mstage.mhm-b2 .mhm-beat2,
  .mh-mstage.mhm-b3 .mhm-beat3,
  .mh-mstage.mhm-b4 .mhm-beat4 { opacity: 1; transform: translateY(0); }

  /* BEAT 4 — 브랜드 사인오프 */
  .mhm-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    transform: scale(0.88);
    transition: transform 0.7s var(--ease);
  }
  .mh-mstage.mhm-b4 .mhm-logo { transform: scale(1); }
  .mhm-logo-dot {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--green-ink);
    position: relative;
    flex-shrink: 0;
  }
  .mhm-logo-dot::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 4px;
    background: var(--green-500);
  }
  .mhm-logo-word {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .mhm-logo-word em { font-style: normal; color: var(--green-600); }
  .mhm-logo-sub {
    margin-top: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.1em;
    color: var(--muted);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease) 0.45s, transform 0.5s var(--ease) 0.45s;
  }
  .mh-mstage.mhm-b4 .mhm-logo-sub { opacity: 1; transform: translateY(0); }

  /* 캡션 — 큼직하게 */
  .mhm-cap { text-align: center; margin-top: 26px; }
  .mhm-cap-k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--green-600);
  }
  .mhm-cap-t {
    margin-top: 8px;
    font-size: 22.5px;
    line-height: 1.35;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--green-ink);
    word-break: keep-all;
  }

  /* BEAT 1 — 시장 분석 */
  .mhm-chart { position: relative; width: 236px; height: 150px; }
  .mhm-bars {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    padding: 0 8px;
  }
  .mhm-bars i {
    flex: 1;
    border-radius: 6px 6px 2px 2px;
    background: var(--green-100);
    transform-origin: bottom;
    transform: scaleY(0.12);
    transition: transform 0.9s var(--ease);
  }
  .mhm-bars i:nth-child(1) { height: 52%; }
  .mhm-bars i:nth-child(2) { height: 74%; }
  .mhm-bars i:nth-child(3) { height: 96%; background: var(--green-500); }
  .mhm-bars i:nth-child(4) { height: 64%; }
  .mh-mstage.mhm-b1 .mhm-bars i { transform: scaleY(1); }
  .mh-mstage.mhm-b1 .mhm-bars i:nth-child(1) { transition-delay: 0.15s; }
  .mh-mstage.mhm-b1 .mhm-bars i:nth-child(2) { transition-delay: 0.3s; }
  .mh-mstage.mhm-b1 .mhm-bars i:nth-child(3) { transition-delay: 0.45s; }
  .mh-mstage.mhm-b1 .mhm-bars i:nth-child(4) { transition-delay: 0.6s; }
  .mhm-chip {
    position: absolute;
    padding: 7px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 6px 18px rgba(11, 61, 46, 0.10);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--green-ink);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .mhm-chip b { color: var(--green-600); }
  .mhm-chip1 { top: -8px; left: -14px; }
  .mhm-chip2 { top: 34px; right: -20px; }
  .mh-mstage.mhm-b1 .mhm-chip { opacity: 1; transform: translateY(0); }
  .mh-mstage.mhm-b1 .mhm-chip1 { transition-delay: 0.7s; }
  .mh-mstage.mhm-b1 .mhm-chip2 { transition-delay: 0.95s; }

  /* BEAT 2 — 화이트라벨 리포트 */
  .mhm-cover {
    width: 230px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(11, 61, 46, 0.16);
    transform: scale(0.92);
    transition: transform 0.7s var(--ease);
  }
  .mh-mstage.mhm-b2 .mhm-cover { transform: scale(1); }
  .mhm-cover-bar { height: 7px; background: var(--green-ink); }
  .mhm-cover-bar i { display: block; width: 32%; height: 100%; background: var(--green-500); }
  .mhm-cover-in { padding: 16px 18px 18px; text-align: left; }
  .mhm-adv {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    letter-spacing: 0.16em;
    color: var(--green-700);
  }
  .mhm-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--green-ink);
  }
  .mhm-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--green-ink);
    position: relative;
    flex-shrink: 0;
  }
  .mhm-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 2px;
    background: var(--green-500);
  }
  .mhm-hl {
    background-image: linear-gradient(transparent 62%, var(--green-100) 62%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.8s var(--ease) 0.5s;
  }
  .mh-mstage.mhm-b2 .mhm-hl { background-size: 100% 100%; }
  .mhm-title { margin-top: 14px; font-size: 22px; line-height: 1.22; font-weight: 800; letter-spacing: -0.03em; }
  .mhm-tg { color: var(--green-600); }
  .mhm-td { color: var(--green-ink); }
  .mhm-no {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 2px solid var(--green-ink);
  }
  .mhm-no b { font-size: 15px; color: var(--ink); }
  .mhm-no span { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted-2); }

  /* BEAT 3 — 매주 도착 */
  .mhm-toast {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(11, 61, 46, 0.16);
    transform: scale(0.9);
    transition: transform 0.6s var(--ease);
  }
  .mh-mstage.mhm-b3 .mhm-toast { transform: scale(1); }
  .mhm-toast::after {
    content: "1";
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--green-600);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mhm-toast svg { width: 26px; height: 26px; color: var(--green-600); flex-shrink: 0; }
  .mhm-toast-tt { text-align: left; }
  .mhm-toast-tt b {
    display: block;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .mhm-toast-tt span { font-size: 12px; color: var(--muted); }
  .mhm-weeks { display: flex; gap: 10px; margin-top: 22px; }
  .mhm-week {
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted-2);
    opacity: 0.55;
    transition: opacity 0.45s var(--ease), background 0.45s var(--ease), color 0.45s var(--ease);
  }
  .mh-mstage.mhm-b3 .mhm-week {
    opacity: 1;
    color: #fff;
    background: var(--green-600);
    border-color: var(--green-600);
  }
  .mh-mstage.mhm-b3 .mhm-week:nth-child(1) { transition-delay: 0.35s; }
  .mh-mstage.mhm-b3 .mhm-week:nth-child(2) { transition-delay: 0.6s; }
  .mh-mstage.mhm-b3 .mhm-week:nth-child(3) { transition-delay: 0.85s; }

  /* 진행 점 */
  .mhm-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
  }
  .mhm-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-100);
    transition: background 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .mh-mstage.mhm-b1 .mhm-dots i:nth-child(1),
  .mh-mstage.mhm-b2 .mhm-dots i:nth-child(2),
  .mh-mstage.mhm-b3 .mhm-dots i:nth-child(3),
  .mh-mstage.mhm-b4 .mhm-dots i:nth-child(4),
  .mh-mstage.mhm-b5 .mhm-dots i:nth-child(5) { background: var(--green-600); transform: scale(1.35); }
}

/* reduced-motion: 모바일에서 b2(화이트라벨) 정적 고정 */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .mh-mstage .mhm-beat { transition: none; }
  .mh-mstage .mhm-beat2 { opacity: 1; transform: none; }
  .mh-mstage .mhm-beat1, .mh-mstage .mhm-beat3, .mh-mstage .mhm-beat4 { opacity: 0 !important; }
  .mh-mstage .mhm-cover { transform: scale(1); }
  .mh-mstage .mhm-hl { background-size: 100% 100%; }
  .mhm-dots { display: none; }
}

/* ── §11 ANSWERS 답변 레이어 라벨 (2026-08-16) ─────────────
   답변을 '대응 매뉴얼'로 읽히게 하는 미니 태그 */
.obj-a-tag {
  display: inline-block;
  margin-right: 9px;
  padding: 2.5px 8px;
  border-radius: 5px;
  background: var(--green-50);
  font-family: 'JetBrains Mono', 'Pretendard Variable', monospace;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--green-700);
  white-space: nowrap;
  vertical-align: 1px;
}
.obj-answer-inner > div p + p { margin-top: 12px; }
@media (max-width: 820px) {
  .obj-a-tag { display: block; width: max-content; margin: 0 0 5px; }
}

/* ============================================================
   DESKTOP 5-BEAT STAGE (821px+) — 2026-08-16 교체
   구 32초 6장면(.mh-stage) 대체. 분석→리포트→도착→고객 관리→로고.
   · 모바일(≤820px): 표시 안 함 (.mh-mstage가 담당)
   · 구 .mh-s1~.mh-payoff CSS는 미사용 상태로 보존 (롤백 안전)
   ============================================================ */
.mh-dstage { display: none; }

@media (min-width: 821px) {
  .mh-dstage { display: block; width: 100%; }

  .mhd-stagebox { position: relative; height: 560px; }

  .mhd-dots {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }
  .mhd-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-100);
    transition: background 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .mh-dstage.mhd-b1 .mhd-dots i:nth-child(1),
  .mh-dstage.mhd-b2 .mhd-dots i:nth-child(2),
  .mh-dstage.mhd-b3 .mhd-dots i:nth-child(3),
  .mh-dstage.mhd-b4 .mhd-dots i:nth-child(4),
  .mh-dstage.mhd-b5 .mhd-dots i:nth-child(5) { background: var(--green-600); transform: scale(1.4); }

  .mhd-beat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  }
  .mh-dstage.mhd-b1 .mhd-beat1,
  .mh-dstage.mhd-b2 .mhd-beat2,
  .mh-dstage.mhd-b3 .mhd-beat3,
  .mh-dstage.mhd-b4 .mhd-beat4,
  .mh-dstage.mhd-b5 .mhd-beat5 { opacity: 1; transform: translateY(0); }

  .mhd-cap { text-align: center; margin-top: 30px; }
  .mhd-cap-k {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--green-600);
    font-weight: 600;
  }
  .mhd-cap-t {
    margin-top: 9px;
    font-size: clamp(21px, 1.9vw, 27px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--green-ink);
    word-break: keep-all;
    line-height: 1.35;
  }

  /* ── B1 시장 분석 ── */
  .mhd-panel {
    position: relative;
    width: min(480px, 100%);
    padding: 26px 28px 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(11, 61, 46, 0.12);
  }
  .mhd-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  .mhd-panel-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
  .mhd-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--green-600);
  }
  .mhd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); animation: mhd-pulse 1.6s ease-in-out infinite; }
  @keyframes mhd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
  .mhd-chart { position: relative; height: 170px; }
  .mhd-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 18px; padding: 0 6px; }
  .mhd-bars i {
    flex: 1;
    border-radius: 8px 8px 3px 3px;
    background: var(--green-100);
    transform-origin: bottom;
    transform: scaleY(0.1);
    transition: transform 1s var(--ease);
  }
  .mhd-bars i:nth-child(1) { height: 44%; }
  .mhd-bars i:nth-child(2) { height: 62%; }
  .mhd-bars i:nth-child(3) { height: 50%; }
  .mhd-bars i:nth-child(4) { height: 82%; background: var(--green-500); }
  .mhd-bars i:nth-child(5) { height: 68%; }
  .mh-dstage.mhd-b1 .mhd-bars i { transform: scaleY(1); }
  .mh-dstage.mhd-b1 .mhd-bars i:nth-child(1) { transition-delay: 0.1s; }
  .mh-dstage.mhd-b1 .mhd-bars i:nth-child(2) { transition-delay: 0.22s; }
  .mh-dstage.mhd-b1 .mhd-bars i:nth-child(3) { transition-delay: 0.34s; }
  .mh-dstage.mhd-b1 .mhd-bars i:nth-child(4) { transition-delay: 0.46s; }
  .mh-dstage.mhd-b1 .mhd-bars i:nth-child(5) { transition-delay: 0.58s; }
  .mhd-spark { position: absolute; left: 6px; right: 6px; top: 8px; height: 70px; width: calc(100% - 12px); }
  .mhd-spark polyline {
    fill: none;
    stroke: var(--green-600);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.4s var(--ease) 0.4s;
  }
  .mh-dstage.mhd-b1 .mhd-spark polyline { stroke-dashoffset: 0; }
  .mhd-chip {
    position: absolute;
    padding: 9px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 8px 22px rgba(11, 61, 46, 0.12);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--green-ink);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .mhd-chip b { color: var(--green-600); }
  .mhd-chip1 { top: -16px; left: -20px; }
  .mhd-chip2 { top: 44px; right: -26px; }
  .mhd-chip3 { bottom: -14px; left: -8px; }
  .mh-dstage.mhd-b1 .mhd-chip { opacity: 1; transform: translateY(0); }
  .mh-dstage.mhd-b1 .mhd-chip1 { transition-delay: 0.7s; }
  .mh-dstage.mhd-b1 .mhd-chip2 { transition-delay: 0.9s; }
  .mh-dstage.mhd-b1 .mhd-chip3 { transition-delay: 1.1s; }

  /* ── B2 화이트라벨 리포트 ── */
  .mhd-cover {
    width: min(320px, 92%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(11, 61, 46, 0.16);
    transform: scale(0.92);
    transition: transform 0.7s var(--ease);
  }
  .mh-dstage.mhd-b2 .mhd-cover { transform: scale(1); }
  .mhd-cover-bar { height: 9px; background: var(--green-ink); }
  .mhd-cover-bar i { display: block; width: 32%; height: 100%; background: var(--green-500); }
  .mhd-cover-in { padding: 22px 24px 24px; text-align: left; }
  .mhd-adv { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--green-700); }
  .mhd-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--green-ink);
  }
  .mhd-dot { width: 15px; height: 15px; border-radius: 4px; background: var(--green-ink); position: relative; flex-shrink: 0; }
  .mhd-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 2px; background: var(--green-500); }
  .mhd-hl {
    background-image: linear-gradient(transparent 62%, var(--green-100) 62%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.8s var(--ease) 0.5s;
  }
  .mh-dstage.mhd-b2 .mhd-hl { background-size: 100% 100%; }
  .mhd-title { margin-top: 18px; font-size: 28px; line-height: 1.22; font-weight: 800; letter-spacing: -0.03em; }
  .mhd-tg { color: var(--green-600); }
  .mhd-td { color: var(--green-ink); }
  .mhd-no { display: flex; gap: 16px; align-items: baseline; margin-top: 16px; padding-top: 13px; border-top: 2px solid var(--green-ink); }
  .mhd-no b { font-size: 19px; color: var(--ink); }
  .mhd-no span { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted-2); }

  /* ── B3 캐릭터 + 도착 ── */
  .mhd-agentwrap { position: relative; width: min(440px, 96%); }
  .mhd-agentwrap > svg { width: 100%; height: auto; display: block; }
  .mhd-agent-figure { animation: mhd-bob 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes mhd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
  .mhd-toast {
    position: absolute;
    top: -6px;
    right: -14px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 19px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: 0 16px 40px rgba(11, 61, 46, 0.16);
    opacity: 0;
    transform: translateY(12px) scale(0.94);
    transition: opacity 0.55s var(--ease) 0.5s, transform 0.55s var(--ease) 0.5s;
  }
  .mh-dstage.mhd-b3 .mhd-toast { opacity: 1; transform: translateY(0) scale(1); }
  .mhd-toast::after {
    content: "1";
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mhd-toast > svg { width: 24px; height: 24px; color: var(--green-600); flex-shrink: 0; }
  .mhd-toast b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
  .mhd-toast span { font-size: 11.5px; color: var(--muted); }

  /* ── B4 고객 관리 ── */
  .mhd-dash {
    width: min(430px, 100%);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(11, 61, 46, 0.12);
    overflow: hidden;
    transform: scale(0.94);
    transition: transform 0.6s var(--ease);
  }
  .mh-dstage.mhd-b4 .mhd-dash { transform: scale(1); }
  .mhd-dash-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .mhd-dash-title { font-size: 15px; font-weight: 800; color: var(--ink); }
  .mhd-dash-sub { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted-2); }
  .mhd-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--green-50);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .mh-dstage.mhd-b4 .mhd-row { opacity: 1; transform: translateX(0); }
  .mh-dstage.mhd-b4 .mhd-row1 { transition-delay: 0.3s; }
  .mh-dstage.mhd-b4 .mhd-row2 { transition-delay: 0.48s; }
  .mh-dstage.mhd-b4 .mhd-row3 { transition-delay: 0.66s; }
  .mhd-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--green-800);
    flex-shrink: 0;
  }
  .mhd-row-name { font-size: 14px; font-weight: 700; color: var(--ink); }
  .mhd-row-tag { font-size: 11.5px; color: var(--muted); }
  .mhd-send {
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--green-ink);
    background: var(--green-100);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .mhd-send-on { background: var(--green-600); color: #fff; }
  .mhd-dash-foot { padding: 12px 20px; font-size: 12px; color: var(--muted); background: var(--green-50); }
  .mhd-dash-foot b { color: var(--green-800); }

  /* ── B5 로고 사인오프 ── */
  .mhd-logo { display: flex; align-items: center; gap: 14px; transform: scale(0.88); transition: transform 0.7s var(--ease); }
  .mh-dstage.mhd-b5 .mhd-logo { transform: scale(1); }
  .mhd-logo-dot { width: 36px; height: 36px; border-radius: 10px; background: var(--green-ink); position: relative; flex-shrink: 0; }
  .mhd-logo-dot::after { content: ""; position: absolute; inset: 10px; border-radius: 5px; background: var(--green-500); }
  .mhd-logo-word { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
  .mhd-logo-word em { font-style: normal; color: var(--green-600); }
  .mhd-logo-sub {
    margin: 18px 0 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: var(--muted);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease) 0.45s, transform 0.5s var(--ease) 0.45s;
  }
  .mh-dstage.mhd-b5 .mhd-logo-sub { opacity: 1; transform: translateY(0); }

  /* ── 스텝 내비 ── */
  .mhd-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; }
  .mhd-step { display: flex; align-items: center; gap: 8px; }
  .mhd-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-2);
    background: #fff;
    border: 1.5px solid var(--line);
    transition: all 0.4s var(--ease);
    position: relative;
  }
  .mhd-step-dot svg { display: none; width: 13px; height: 13px; }
  .mhd-step-label { font-size: 13.5px; font-weight: 600; color: var(--muted-2); transition: color 0.4s var(--ease); white-space: nowrap; }
  .mhd-step-line { width: 34px; height: 1.5px; background: var(--line); flex-shrink: 0; }
  .mhd-step.on .mhd-step-dot { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
  .mhd-step.on .mhd-step-label { color: var(--ink); font-weight: 700; }
  .mhd-step.done .mhd-step-dot { background: var(--green-100); border-color: var(--green-100); color: transparent; }
  .mhd-step.done .mhd-step-dot svg { display: block; position: absolute; color: var(--green-700); }
  .mhd-step.done .mhd-step-label { color: var(--muted); }

  /* 좁은 데스크톱(821~1150px): 스텝 압축 */
  @media (max-width: 1150px) {
    .mhd-stagebox { height: 540px; }
    .mhd-step-label { font-size: 12px; }
    .mhd-step-line { width: 14px; }
    .mhd-steps { gap: 6px; }
    .mhd-chip { font-size: 12.5px; padding: 7px 12px; }
    .mhd-chip1 { left: -6px; }
    .mhd-chip2 { right: -8px; }
    .mhd-chip3 { left: 0; }
  }
}

/* reduced-motion: 데스크톱은 b2(화이트라벨) 정적 고정 */
@media (min-width: 821px) and (prefers-reduced-motion: reduce) {
  .mh-dstage .mhd-beat { transition: none; }
  .mh-dstage .mhd-beat2 { opacity: 1; transform: none; }
  .mh-dstage .mhd-beat1, .mh-dstage .mhd-beat3,
  .mh-dstage .mhd-beat4, .mh-dstage .mhd-beat5 { opacity: 0 !important; }
  .mh-dstage .mhd-cover { transform: scale(1); }
  .mh-dstage .mhd-hl { background-size: 100% 100%; }
  .mhd-dots { display: none; }
  .mhd-agent-figure, .mhd-live i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   hx-* — 히어로 워크플로 (2026-08-31 · 지속 객체 + 상태 기반 전환)
   v2 composition (2026-08-31) — 구조 동일, 스테이지·객체 크기와 depth 강화

   원칙: The object survives the scene transition.
   객체는 DOM 에 한 번만 존재하고, 박자 클래스(.mhd-b1~b5)마다
   transform / opacity / filter / z-index 만 바뀐다.
   width·height·top·left 를 애니메이션하지 않는다(리플로우 0).

   레이어(z-index)
     0  .hx-bg      배경 패널 — 제품 영역을 규정
     1  .hx-fig     에디터(마스터 원화) — 카드가 그 앞을 지나며 겹친다
     2  .hx-cust    물러난 카드
     3~6 활성 카드 · 연결선 · 완료 칩
   ═══════════════════════════════════════════════════════════════ */

.motion-hero {
  --hx-e:   cubic-bezier(.22, .9, .24, 1);
  --hx-e-s: cubic-bezier(.25, .9, .25, 1.035);   /* 아주 미세한 오버슈트(착지 전용) */
  --hx-t:   .82s;
}

.mh-dstage { display: block; width: 100%; }
.mhd-stagebox { position: relative; overflow: visible; }

/* ── 카메라 · 캔버스 ─────────────────────────────────────────── */
.hx-camera { position: absolute; inset: 0; display: grid; place-items: center;
  transition: transform 1.1s var(--hx-e); will-change: transform; }
.hx-canvas { position: relative; width: 600px; height: 460px; }

.mh-dstage.mhd-b1 .hx-camera { transform: translate3d(0, 0, 0); }
.mh-dstage.mhd-b2 .hx-camera { transform: translate3d(-5px, 0, 0); }
.mh-dstage.mhd-b3 .hx-camera { transform: translate3d(6px, -3px, 0); }
.mh-dstage.mhd-b4 .hx-camera { transform: translate3d(-4px, -6px, 0); }
.mh-dstage.mhd-b5 .hx-camera { transform: translate3d(0, -3px, 0) scale(.98); }

/* ── 배경 레이어 — 제품 영역을 규정하고 빈 공간을 없앤다 ────── */
.hx-bg { position: absolute; left: 150px; top: 34px; width: 440px; height: 396px; z-index: 0;
  border-radius: 30px; background: linear-gradient(170deg, rgba(228,242,235,.62), rgba(246,247,246,.28) 62%, rgba(255,255,255,0));
  transition: transform 1.1s var(--hx-e), opacity .6s var(--hx-e); }
.mh-dstage.mhd-b1 .hx-bg { transform: translate3d(0, 0, 0) scale(1); }
.mh-dstage.mhd-b2 .hx-bg { transform: translate3d(-6px, -4px, 0) scale(1.02); }
.mh-dstage.mhd-b3 .hx-bg { transform: translate3d(4px, 2px, 0) scale(1.01); }
.mh-dstage.mhd-b4 .hx-bg { transform: translate3d(-4px, 4px, 0) scale(1.03); }
.mh-dstage.mhd-b5 .hx-bg { transform: translate3d(0, 0, 0) scale(1.02); opacity: .8; }

/* ── 공통 카드 룩 ───────────────────────────────────────────── */
.hx-report, .hx-cust, .hx-blog, .hx-office {
  position: absolute; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  transform-origin: 50% 50%;
  transition: transform var(--hx-t) var(--hx-e), opacity .5s var(--hx-e), filter .5s var(--hx-e),
              border-color .5s var(--hx-e), box-shadow .5s var(--hx-e);
  will-change: transform, opacity;
}

/* ══ 지속 객체 1 — 데이터 셸 → 리포트 → 콘텐츠 원본 ══════════ */
.hx-report { left: 204px; top: 108px; width: 356px; height: 226px; overflow: hidden; z-index: 4; }
.hx-topbar { height: 7px; background: var(--green-ink); transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--hx-e); }
.hx-face { position: absolute; left: 0; right: 0; top: 7px; bottom: 0; padding: 20px 24px;
  transition: opacity .45s var(--hx-e), transform .6s var(--hx-e); }
.hx-face--data   { opacity: 1; }
.hx-face--report { opacity: 0; transform: translateY(10px); }

.hx-face-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap;
  font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 18px; white-space: nowrap; }
.hx-live { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap;
  font-size: 10.5px; color: var(--muted-2); font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 400; }
.hx-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); }
.hx-chart { position: relative; height: 128px; }
.hx-bars { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; gap: 9px; height: 96px; }
.hx-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--green-100);
  transform: scaleY(.12); transform-origin: bottom; transition: transform .6s var(--hx-e); }
.hx-bars i:nth-child(4), .hx-bars i:nth-child(6) { background: var(--green-500); }
.hx-bars i:nth-child(1) { height: 44%; } .hx-bars i:nth-child(2) { height: 60%; }
.hx-bars i:nth-child(3) { height: 52%; } .hx-bars i:nth-child(4) { height: 80%; }
.hx-bars i:nth-child(5) { height: 66%; } .hx-bars i:nth-child(6) { height: 100%; }
.hx-bars i:nth-child(1) { transition-delay: .06s; } .hx-bars i:nth-child(2) { transition-delay: .13s; }
.hx-bars i:nth-child(3) { transition-delay: .20s; } .hx-bars i:nth-child(4) { transition-delay: .27s; }
.hx-bars i:nth-child(5) { transition-delay: .34s; } .hx-bars i:nth-child(6) { transition-delay: .41s; }
.hx-spark { position: absolute; inset: 0 0 26px 0; width: 100%; height: 82px; overflow: visible; }
.hx-spark polyline { fill: none; stroke: var(--green-700); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--hx-e) .28s; }

.hx-rep-adv { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: .16em; color: var(--muted-2); }
.hx-rep-brand { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 15px; font-weight: 700; color: var(--green-800); }
.hx-rep-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-600); }
.hx-rep-title { margin-top: 12px; font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.hx-rep-no { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.hx-rep-no b { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 14px; color: var(--ink); }

.mh-dstage.mhd-b1 .hx-report { transform: translate3d(0, 46px, 0) scale(.97); }
.mh-dstage.mhd-b2 .hx-report { transform: translate3d(0, 18px, 0) scale(1.05); transition-timing-function: var(--hx-e-s); }
.mh-dstage.mhd-b3 .hx-report { transform: translate3d(-14px, -70px, 0) scale(.8); }
.mh-dstage.mhd-b4 .hx-report { transform: translate3d(-44px, -156px, 0) scale(.5); opacity: .95; }
.mh-dstage.mhd-b5 .hx-report { transform: translate3d(58px, -152px, 0) scale(.38); opacity: .92; }
.mh-dstage.mhd-b2 .hx-topbar, .mh-dstage.mhd-b3 .hx-topbar,
.mh-dstage.mhd-b4 .hx-topbar, .mh-dstage.mhd-b5 .hx-topbar { transform: scaleX(1); }
.mh-dstage.mhd-b1 .hx-bars i { transform: scaleY(1); }
.mh-dstage.mhd-b1 .hx-spark polyline { stroke-dashoffset: 0; }
.mh-dstage.mhd-b2 .hx-face--data, .mh-dstage.mhd-b3 .hx-face--data,
.mh-dstage.mhd-b4 .hx-face--data, .mh-dstage.mhd-b5 .hx-face--data { opacity: 0; transform: translateY(-8px); }
.mh-dstage.mhd-b2 .hx-face--report, .mh-dstage.mhd-b3 .hx-face--report,
.mh-dstage.mhd-b4 .hx-face--report, .mh-dstage.mhd-b5 .hx-face--report { opacity: 1; transform: translateY(0); transition-delay: .18s; }

/* ── 01 데이터 조각 — 서로 다른 depth 에 흩어졌다가 셸로 수렴 ── */
.hx-chip { position: absolute; z-index: 6; display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--green-800);
  background: var(--paper); border: 1px solid var(--green-100); border-radius: 999px; padding: 9px 16px;
  box-shadow: var(--shadow-1); transform-origin: 50% 50%; opacity: 0;
  transition: transform .78s var(--hx-e), opacity .45s var(--hx-e); }
.hx-chip b { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--green-700); }
/* CHARACTER SAFE ZONE (캔버스 좌표, 원화 알파 실측 기준)
   .hx-fig 는 left -116px · width 404px · bottom 0 → 박스 x -116..288 / y 56..460.
   원화에서 머리·목이 차지하는 비율:  남 x .380~.653 · y 0~.324   여 x .338~.582 · y 0~.285
   → 캔버스 좌표로 남 x 38~148 / y 56~187,  여 x 21~119 / y 56~171.
   상체 여유까지 포함해 **x 0~270 · y 40~270 안에는 floating chip·connector·label 을 두지 않는다.**
   (z-index 로 덮어 가리는 대신 실제 좌표를 제품 컬럼 쪽으로 옮긴다) */
.hx-chip1 { left: 214px; top: 100px; }
.hx-chip2 { left: 412px; top: 62px; }
.hx-chip3 { left: 300px; top: 392px; z-index: 5; }
.mh-dstage.mhd-b1 .hx-chip { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.mh-dstage.mhd-b1 .hx-chip1 { transition-delay: .5s; }
.mh-dstage.mhd-b1 .hx-chip2 { transition-delay: .62s; }
.mh-dstage.mhd-b1 .hx-chip3 { transition-delay: .74s; }
/* 02 로 넘어갈 때 각자 셸 중심(382, 267)으로 빨려 들어간다 */
.hx-chip1 { transform: translate3d(109px, 149px, 0) scale(.42); }
.hx-chip2 { transform: translate3d(-98px, 187px, 0) scale(.42); }
.hx-chip3 { transform: translate3d(12px, -143px, 0) scale(.42); }

/* ── 02 진행 상태 ────────────────────────────────────────────── */
.hx-ticks { position: absolute; left: 204px; top: 76px; width: 356px; display: flex; flex-wrap: nowrap;
  justify-content: center; gap: 7px; z-index: 6; }
.hx-tick { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--green-800);
  background: var(--paper); border: 1px solid var(--green-100); border-radius: 999px; padding: 6px 12px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--hx-e), transform .4s var(--hx-e); }
.hx-tick svg { width: 12px; height: 12px; color: var(--green-600); }
.mh-dstage.mhd-b2 .hx-tick { opacity: 1; transform: translateY(0); }
.mh-dstage.mhd-b2 .hx-t1 { transition-delay: .34s; }
.mh-dstage.mhd-b2 .hx-t2 { transition-delay: .5s; }
.mh-dstage.mhd-b2 .hx-t3 { transition-delay: .66s; }

/* ══ 지속 객체 2 — 고객 상담 (자동 발송 아님) ═════════════════ */
.hx-cust { left: 214px; top: 258px; width: 372px; padding: 18px 20px; z-index: 5;
  opacity: 0; transform: translate3d(30px, 20px, 0) scale(.94); }
.hx-cust-head { display: flex; align-items: center; gap: 11px; }
.hx-cust-ico { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 11px; background: var(--green-50); color: var(--green-700); }
.hx-cust-ico svg { width: 19px; height: 19px; }
.hx-cust-head b { font-size: 16px; color: var(--ink); }
.hx-cust-rows { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.hx-person { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2);
  background: var(--surface); border-radius: 999px; padding: 5px 12px 5px 5px; }
.hx-person i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-100); color: var(--green-800); font-size: 11px; font-weight: 700; font-style: normal; }
.hx-cust-note { margin-top: 13px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mh-dstage.mhd-b3 .hx-cust { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-timing-function: var(--hx-e-s); transition-delay: .16s; }
.mh-dstage.mhd-b4 .hx-cust { opacity: 0; transform: translate3d(-150px, -196px, 0) scale(.46); z-index: 2; }
.mh-dstage.mhd-b5 .hx-cust { opacity: 0; transform: translate3d(-150px, -260px, 0) scale(.42); z-index: 2; }

/* 리포트 ↔ 고객 연결선 (03) */
.hx-link { position: absolute; left: 380px; top: 222px; width: 3px; height: 34px; border-radius: 3px;
  background: var(--green-500); transform: scaleY(0); transform-origin: top center; z-index: 6;
  transition: transform .5s var(--hx-e), opacity .3s var(--hx-e); opacity: 0; }
.mh-dstage.mhd-b3 .hx-link { transform: scaleY(1); opacity: 1; transition-delay: .3s; }

/* ══ 지속 객체 3 — 같은 데이터에서 파생된 콘텐츠 ══════════════ */
.hx-blog { left: 206px; top: 146px; width: 384px; padding: 0; overflow: hidden; z-index: 5;
  opacity: 0; transform: translate3d(0, 28px, 0) scale(.94); }
.hx-browser { display: flex; align-items: center; gap: 6px; padding: 11px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.hx-browser i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.hx-browser span { margin-left: 10px; font-size: 12px; font-weight: 700; color: var(--green-800); }
.hx-browser em { margin-left: 6px; font-style: normal; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .14em; color: var(--muted-2); }
.hx-blog-in { padding: 16px 18px 18px; }
.hx-blog-tag { font-size: 12px; color: var(--green-700); font-weight: 700; }
.hx-blog-title { margin-top: 7px; font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.hx-blog-line { margin-top: 12px; height: 8px; border-radius: 4px; background: var(--surface-2); }
.hx-blog-line--s { margin-top: 7px; width: 58%; }
.mh-dstage.mhd-b4 .hx-blog { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-delay: .28s; transition-timing-function: var(--hx-e-s); }
.mh-dstage.mhd-b5 .hx-blog { opacity: 1; transform: translate3d(86px, -56px, 0) scale(.58); }

/* 리포트 → 블로그 파생 연결선 (04 에서 실제로 그려진다) */
.hx-conn { position: absolute; left: 172px; top: 78px; width: 84px; height: 78px; z-index: 6; overflow: visible;
  opacity: 0; transition: opacity .3s var(--hx-e), transform var(--hx-t) var(--hx-e); }
.hx-conn path { stroke: var(--green-500); stroke-width: 2.4; vector-effect: non-scaling-stroke;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .62s var(--hx-e); }
.mh-dstage.mhd-b4 .hx-conn { opacity: 1; transform: translate3d(112px, 10px, 0) scale(.72); transition-delay: .1s; }
.mh-dstage.mhd-b4 .hx-conn-p { stroke-dashoffset: 0; transition-delay: .12s; }
.mh-dstage.mhd-b4 .hx-conn-h { stroke-dashoffset: 0; transition-delay: .56s; }
.mh-dstage.mhd-b5 .hx-conn { opacity: 0; transform: translate3d(174px, -20px, 0) scale(.5); }   /* 05 는 스택이 촘촘해 선이 들어갈 자리가 없다 */
.mh-dstage.mhd-b5 .hx-conn path { stroke-dashoffset: 0; }

/* ══ 지속 객체 4 — 지역 콘텐츠에 붙는 사무소 소개 ═════════════ */
.hx-office { left: 206px; top: 336px; width: 384px; padding: 16px 18px; z-index: 5;
  border-color: var(--green-100); background: var(--green-50);
  opacity: 0; transform: translate3d(0, 24px, 0) scale(.96); }
.hx-office-k { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.hx-office-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.hx-office-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 11px; background: var(--green-ink); color: #fff; font-size: 16px; font-weight: 700; }
.hx-office-row b { display: block; font-size: 15px; color: var(--ink); }
.hx-office-row span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.mh-dstage.mhd-b4 .hx-office { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition-delay: .58s; transition-timing-function: var(--hx-e-s); }
.mh-dstage.mhd-b5 .hx-office { opacity: 1; transform: translate3d(86px, -128px, 0) scale(.58); }

/* ══ 최종 수렴 ══════════════════════════════════════════════ */
.hx-done { position: absolute; left: 176px; top: 386px; z-index: 8;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-size: 16px; font-weight: 700; color: var(--green-800);
  background: var(--paper); border: 1px solid var(--green-100); border-radius: 999px; padding: 11px 24px;
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translate3d(0, 16px, 0) scale(.96);
  transition: transform .7s var(--hx-e), opacity .45s var(--hx-e); }
.hx-done svg { width: 16px; height: 16px; color: var(--green-600); }
.mh-dstage.mhd-b5 .hx-done { opacity: 1; transform: translate3d(0, 0, 0) scale(1);
  transition-delay: .32s; transition-timing-function: var(--hx-e-s); }

/* ── 에디터 — 확정 master 원화. 카드가 그 앞을 지나며 겹친다 ── */
.hx-fig { position: absolute; bottom: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .7s var(--hx-e), transform .9s var(--hx-e); }
.hx-fig img { width: 404px; height: auto; display: block; }   /* 아이콘이 아니라 '설명하는 에디터' 크기 */
.hx-fig--m { left: -116px; transform: translate3d(-18px, 0, 0); }
.hx-fig--f { left: -116px; transform: translate3d(-18px, 0, 0); }
.mh-dstage.mhd-b1 .hx-fig--m, .mh-dstage.mhd-b2 .hx-fig--m { opacity: 1; transform: translate3d(0, 0, 0); }
.mh-dstage.mhd-b3 .hx-fig--f, .mh-dstage.mhd-b4 .hx-fig--f { opacity: 1; transform: translate3d(0, 0, 0); }
/* 05 — 두 에디터가 함께 결과를 확인한다 */
.mh-dstage.mhd-b5 .hx-fig--m { opacity: 1; transform: translate3d(-34px, 30px, 0) scale(.8); }
.mh-dstage.mhd-b5 .hx-fig--f { opacity: 1; transform: translate3d(146px, 34px, 0) scale(.8); }

/* ── 캡션 ───────────────────────────────────────────────────── */
.hx-caps { position: absolute; left: 0; right: 0; bottom: 4px; height: 76px; }
.hx-cap { position: absolute; inset: 0; text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity .45s var(--hx-e), transform .55s var(--hx-e); }
.hx-cap-k { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .15em; color: var(--green-600); font-weight: 600; }
.hx-cap-t { margin-top: 8px; font-size: clamp(19px, 1.75vw, 25px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.mh-dstage.mhd-b1 .hx-cap1, .mh-dstage.mhd-b2 .hx-cap2, .mh-dstage.mhd-b3 .hx-cap3,
.mh-dstage.mhd-b4 .hx-cap4, .mh-dstage.mhd-b5 .hx-cap5 { opacity: 1; transform: translateY(0); transition-delay: .12s; }

/* ── 데스크톱 ───────────────────────────────────────────────── */
@media (min-width: 821px) {
  .mhd-stagebox { height: 596px; }
  .hx-camera { bottom: 78px; }
}
/* 좁아지면 스테이지 전체를 균일 축소 — 배치는 그대로 */
@media (min-width: 821px) and (max-width: 1339px) { .hx-canvas { transform: scale(.86); } }
@media (min-width: 821px) and (max-width: 1150px) { .hx-canvas { transform: scale(.72); } }

/* ── 모바일 — 같은 객체, 세로 흐름 ───────────────────────────── */
@media (max-width: 820px) {
  .mhd-stagebox { height: 486px; }
  .mhd-steps { display: none; }
  .hx-camera { top: 10px; bottom: 92px; }
  .hx-canvas { width: 320px; height: 372px; transform: scale(.96); }
  .hx-fig { display: none; }
  .hx-bg { left: 0; top: 10px; width: 320px; height: 350px; border-radius: 22px; }

  .hx-report { left: 10px; top: 6px; width: 300px; height: 180px; }
  .hx-face { padding: 14px 16px; }
  .hx-face-head { font-size: 13px; margin-bottom: 12px; }
  .hx-chart { height: 92px; }
  .hx-bars { height: 68px; gap: 7px; }
  .hx-spark { inset: 0 0 20px 0; height: 60px; }
  .hx-rep-title { font-size: 24px; margin-top: 8px; }
  .hx-rep-brand { font-size: 13px; margin-top: 10px; }
  .hx-rep-no { margin-top: 12px; }
  .mh-dstage.mhd-b1 .hx-report { transform: translate3d(0, 24px, 0) scale(.97); }
  .mh-dstage.mhd-b2 .hx-report { transform: translate3d(0, 10px, 0) scale(1); }
  .mh-dstage.mhd-b3 .hx-report { transform: translate3d(0, -8px, 0) scale(.8); }
  .mh-dstage.mhd-b4 .hx-report { transform: translate3d(0, -40px, 0) scale(.52); opacity: .95; }
  .mh-dstage.mhd-b5 .hx-report { transform: translate3d(0, -62px, 0) scale(.52); opacity: .68; }

  .hx-chip { font-size: 11.5px; padding: 6px 12px; }
  .hx-chip1 { left: 2px;   top: 208px; transform: translate3d(112px, -110px, 0) scale(.42); }
  .hx-chip2 { left: 196px; top: 224px; transform: translate3d(-72px, -126px, 0) scale(.42); }
  .hx-chip3 { left: 88px;  top: 282px; transform: translate3d(24px, -184px, 0) scale(.42); }

  .hx-ticks { left: 10px; top: 196px; width: 300px; gap: 5px; }
  .hx-tick { font-size: 10.5px; padding: 4px 9px; }

  .hx-cust { left: 10px; top: 206px; width: 300px; padding: 14px 16px; }
  .hx-cust-head b { font-size: 14px; }
  .hx-cust-note { font-size: 10.5px; }
  .mh-dstage.mhd-b3 .hx-cust { transform: translate3d(0, 0, 0) scale(1); }
  .mh-dstage.mhd-b4 .hx-cust { opacity: 0; transform: translate3d(0, -150px, 0) scale(.5); }
  .mh-dstage.mhd-b5 .hx-cust { opacity: 0; transform: translate3d(0, -196px, 0) scale(.5); }

  .hx-link { left: 158px; top: 168px; width: 3px; height: 30px; }

  .hx-conn { left: 150px; top: 104px; width: 26px; height: 50px; }
  .hx-conn-h { display: none; }   /* 세로로 눌린 곡선에서 화살표는 왜곡되므로 선만 쓴다 */

  .hx-blog { left: 10px; top: 160px; width: 300px; }
  .hx-blog-title { font-size: 17px; }
  .hx-blog-in { padding: 13px 15px 15px; }
  .hx-office { left: 10px; top: 292px; width: 300px; padding: 13px 15px; }
  .hx-office-k { font-size: 10.5px; }
  .hx-office-row b { font-size: 13.5px; }
  .mh-dstage.mhd-b5 .hx-blog, .mh-dstage.mhd-b5 .hx-office { transform: translate3d(0, -40px, 0) scale(.97); }
  .mh-dstage.mhd-b5 .hx-conn { transform: translate3d(0, -40px, 0); }

  .hx-done { left: 50%; top: 330px; font-size: 14px; padding: 9px 18px; margin-left: -84px; }
  .hx-caps { bottom: 2px; height: 84px; }
  .hx-cap-t { font-size: 21px; line-height: 1.35; }
  .hx-cap-k { font-size: 11.5px; }

  /* 모바일에는 스텝 내비 대신 하단 도트 */
  .mhd-dots { position: absolute; left: 50%; bottom: 0; top: auto; transform: translateX(-50%);
    display: flex; gap: 7px; z-index: 2; }
  .mhd-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-100);
    transition: background .4s var(--hx-e), transform .4s var(--hx-e); }
  .mh-dstage.mhd-b1 .mhd-dots i:nth-child(1),
  .mh-dstage.mhd-b2 .mhd-dots i:nth-child(2),
  .mh-dstage.mhd-b3 .mhd-dots i:nth-child(3),
  .mh-dstage.mhd-b4 .mhd-dots i:nth-child(4),
  .mh-dstage.mhd-b5 .mhd-dots i:nth-child(5) { background: var(--green-600); transform: scale(1.35); }
}

/* ── reduced motion — 루프 없이 04 워크플로 정적 구성 ────────── */
@media (prefers-reduced-motion: reduce) {
  .hx-camera, .hx-bg, .hx-report, .hx-cust, .hx-blog, .hx-office, .hx-done,
  .hx-chip, .hx-tick, .hx-fig, .hx-cap, .hx-face, .hx-topbar, .hx-link,
  .hx-bars i, .hx-spark polyline, .hx-conn, .hx-conn path {
    transition: none !important; transition-delay: 0s !important;
  }
  .hx-camera { transform: none !important; }
  .hx-bg { transform: none !important; }
  .hx-report { transform: translate3d(-186px, -128px, 0) scale(.5) !important; opacity: 1 !important; }
  .hx-topbar { transform: scaleX(1) !important; }
  .hx-face--data { opacity: 0 !important; }
  .hx-face--report { opacity: 1 !important; transform: none !important; }
  .hx-chip, .hx-tick, .hx-done, .hx-link, .hx-cust { opacity: 0 !important; }
  .hx-blog, .hx-office { opacity: 1 !important; transform: none !important; }
  .hx-conn { opacity: 1 !important; transform: none !important; }
  .hx-conn path { stroke-dashoffset: 0 !important; }
  .hx-fig--f { opacity: 1 !important; transform: none !important; }
  .hx-fig--m { opacity: 0 !important; }
  .hx-cap { opacity: 0 !important; }
  .hx-cap4 { opacity: 1 !important; transform: none !important; }
  .mhd-dots { display: none; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .hx-report { transform: translate3d(0, -40px, 0) scale(.52) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   b6 — 브랜드 사인오프 (2026-09-01)
   카드는 **제자리에서** 페이드아웃하고(위치 이동 없음) 배경 패널만 남는다.
   두 에디터도 바깥으로 흘리며 사라진다 — 06 은 로고가 주인공인 순수 브랜드 컷이다.
   (잔상 카드를 희미하게 남겨봤으나 인물 뒤 글자가 노이즈로 읽혀 0 으로 내렸다)
   → 06 → 01 복귀 시 카드가 다시 밝아지기만 하면 되므로 이음새가 튀지 않는다.
   ═══════════════════════════════════════════════════════════════ */

/* 카드는 b5 위치 그대로 유지하고 투명도만 내린다 */
.mh-dstage.mhd-b6 .hx-report { transform: translate3d(58px, -152px, 0) scale(.38); opacity: 0; z-index: 0; }
.mh-dstage.mhd-b6 .hx-blog   { transform: translate3d(86px, -56px, 0) scale(.58);   opacity: 0; z-index: 0; }
.mh-dstage.mhd-b6 .hx-office { transform: translate3d(86px, -128px, 0) scale(.58);  opacity: 0; z-index: 0; }
.mh-dstage.mhd-b6 .hx-conn   { transform: translate3d(174px, -20px, 0) scale(.5);   opacity: 0; z-index: 0; }
.mh-dstage.mhd-b6 .hx-cust   { opacity: 0; transform: translate3d(-150px, -260px, 0) scale(.42); z-index: 2; }
.mh-dstage.mhd-b6 .hx-bg     { transform: translate3d(-70px, 0, 0) scale(1.04); opacity: .72; }   /* 캐릭터가 빠졌으니 패널도 캔버스 중앙으로 */
.mh-dstage.mhd-b6 .hx-camera { transform: translate3d(0, -2px, 0) scale(.99); }
/* 완료 배지는 워드마크에 자리를 넘긴다 */
.mh-dstage.mhd-b6 .hx-done   { opacity: 0; transform: translate3d(0, -10px, 0) scale(.96); }

/* 두 에디터가 중앙으로 모여 나란히 선다 */
.mh-dstage.mhd-b6 .hx-fig--m { opacity: 0; transform: translate3d(-74px, 44px, 0) scale(.78); }
.mh-dstage.mhd-b6 .hx-fig--f { opacity: 0; transform: translate3d(186px, 48px, 0) scale(.78); }

/* 워드마크 */
.hx-mark { position: absolute; left: 0; right: 0; top: 204px; z-index: 9;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  opacity: 0; transform: translate3d(0, 12px, 0) scale(.97);
  transition: transform .8s var(--hx-e), opacity .5s var(--hx-e); }
.hx-mark-dot { width: 19px; height: 19px; border-radius: 50%; background: var(--green-600); flex: 0 0 auto; }
.hx-mark-word { font-size: 54px; font-weight: 800; letter-spacing: -.035em; color: var(--green-ink); line-height: 1; }
.hx-mark-word em { font-style: normal; color: var(--green-600); }
.mh-dstage.mhd-b6 .hx-mark { opacity: 1; transform: translate3d(0, 0, 0) scale(1);
  transition-delay: .3s; transition-timing-function: var(--hx-e-s); }

/* 캡션 · 도트 */
.mh-dstage.mhd-b6 .hx-cap6 { opacity: 1; transform: translateY(0); transition-delay: .12s; }
@media (min-width: 821px) {
  .mh-dstage.mhd-b6 .mhd-dots i:nth-child(6) { background: var(--green-600); transform: scale(1.4); }
}

/* ── 모바일 — 06 에서만 두 에디터를 보여준다(다른 장면은 그대로 숨김) ── */
@media (max-width: 820px) {
  .mh-dstage.mhd-b6 .mhd-dots i:nth-child(6) { background: var(--green-600); transform: scale(1.35); }
  .mh-dstage.mhd-b6 .hx-report { transform: translate3d(0, -62px, 0) scale(.52); opacity: 0; z-index: 0; }
  .mh-dstage.mhd-b6 .hx-blog,
  .mh-dstage.mhd-b6 .hx-office { transform: translate3d(0, -40px, 0) scale(.97); opacity: 0; z-index: 0; }
  .mh-dstage.mhd-b6 .hx-conn   { transform: translate3d(0, -40px, 0); opacity: 0; }
  /* 모바일 배경 패널은 이미 캔버스 폭 전체라 좌측 이동이 필요 없다 */
  .mh-dstage.mhd-b6 .hx-bg { transform: translate3d(0, 0, 0) scale(1.02); opacity: .72; }
  .hx-mark { top: 148px; gap: 11px; }
  .hx-mark-dot { width: 14px; height: 14px; }
  .hx-mark-word { font-size: 36px; }
}

/* reduced-motion — 대표 정지 화면은 04 그대로. 워드마크는 숨긴다 */
@media (prefers-reduced-motion: reduce) {
  .hx-mark { transition: none !important; opacity: 0 !important; }
  .hx-cap6 { opacity: 0 !important; }
}

/* ── 장면별 주인공 카드 강조 (2026-09-01) ─────────────────────
   전부 진하게 만들지 않는다. 그 장면의 primary object 하나만
   테두리·그림자를 올려 시선의 중심을 만든다. paint 속성뿐이라 리플로우 0. */
.mh-dstage.mhd-b1 .hx-report,
.mh-dstage.mhd-b2 .hx-report { border-color: var(--green-800); box-shadow: 0 12px 38px rgba(11, 61, 46, .16); }
.mh-dstage.mhd-b3 .hx-cust   { border-color: var(--green-800); box-shadow: 0 12px 38px rgba(11, 61, 46, .16); }
.mh-dstage.mhd-b4 .hx-blog,
.mh-dstage.mhd-b5 .hx-blog   { border-color: var(--green-800); box-shadow: 0 14px 42px rgba(11, 61, 46, .18); }
/* 주인공이 아닌 카드는 원래의 얇은 선을 유지한다 */
.mh-dstage.mhd-b3 .hx-report,
.mh-dstage.mhd-b4 .hx-report,
.mh-dstage.mhd-b5 .hx-report { border-color: var(--line); box-shadow: var(--shadow-1); }