/* hero-wall.css — 히어로 «라이브 제품 벽» (C안 쇼룸 콘셉트).
 * public/style.css 뒤에 로드된다(로드 순서가 곧 우선순위 — .hero 등 기존 규칙을 여기서 덮어쓴다).
 * 색·타이포는 style.css 토큰(--gold/--light-gold/--muted/--line/--bg)만 쓴다. 새 웹폰트 없음. */

/* ── 히어로 골격: 2열 그리드(옛 폰 3D) → 카피 한 단 + 배경 벽 ───────────── */
.hw-hero{display:flex;flex-direction:column;justify-content:center;min-height:100svh;}
.hw-hero-copy{position:relative;z-index:2;max-width:640px;width:100%;}
.hw-hero .hero-bottom{z-index:2;}

/* ── 라이브 킥커 점 ──────────────────────────────────────────────── */
.hw-kicker{position:relative;}
.hw-live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5fd38a;box-shadow:0 0 0 0 #5fd38a88;animation:hw-live 1.8s infinite;}
.hw-live-dot.hw-paused{animation-play-state:paused;}
@keyframes hw-live{70%{box-shadow:0 0 0 9px #5fd38a00}100%{box-shadow:0 0 0 0 #5fd38a00}}

/* ── 헤드라인 리빌: h1 내용은 손대지 않고(그대로 유지) 바깥 마스크만 감싼다.
   JS 없이도 CSS 애니메이션만으로 100% 끝까지 보인다(끝 프레임 = 정상 상태). ── */
.hw-h1-mask{overflow:hidden;padding-bottom:4px;margin-bottom:-4px;}
.hw-h1{animation:hw-h1-up .9s cubic-bezier(.16,1,.3,1) both;}
@keyframes hw-h1-up{from{transform:translateY(14%);filter:blur(7px);opacity:.05}to{transform:translateY(0);filter:blur(0);opacity:1}}
.hw-h1 em{display:inline-block;animation:hw-em-pop 1s cubic-bezier(.16,1,.3,1) .1s both;}
@keyframes hw-em-pop{from{transform:translateY(8%) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.hw-h1.hw-done,.hw-h1.hw-done em{animation:none;}

/* ── 통계 칩 ─────────────────────────────────────────────────────── */
.hw-stats{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0;}
.hw-stat{border:1px solid var(--line);border-radius:16px;padding:10px 14px;min-width:84px;background:#0e0d0bcc;}
.hw-stat-num{display:block;font-family:Georgia,serif;font-style:italic;font-size:26px;color:var(--light-gold);line-height:1;}
.hw-stat span{font-size:10px;color:var(--muted);letter-spacing:.2px;}

/* ── 스크롤 속도 게이지(데스크톱 전용) ───────────────────────────── */
.hw-speed{position:absolute;right:clamp(16px,4vw,56px);bottom:28px;z-index:2;display:flex;align-items:center;gap:12px;color:var(--muted);font:10px ui-monospace,monospace;letter-spacing:.28em;text-transform:uppercase;}
.hw-speed i{width:120px;height:2px;background:#a39e9133;position:relative;overflow:hidden;display:block;}
.hw-speed-bar{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(.08);}

/* ── 제품 벽(배경층) ─────────────────────────────────────────────── */
.hw-wall-wrap{position:absolute;top:0;left:50%;height:100%;width:100%;overflow:hidden;transform:translateX(-50%);z-index:0;pointer-events:auto;}
.hw-wall{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-42%,-50%) rotateX(18deg) rotateZ(-14deg);transform-style:preserve-3d;display:flex;gap:16px;justify-content:center;align-content:flex-start;perspective:1400px;transition:opacity .3s linear;}
.hw-col{display:flex;flex-direction:column;gap:16px;flex:none;align-self:flex-start;will-change:transform;}
.hw-card{position:relative;flex:none;width:clamp(118px,10.6vw,190px);aspect-ratio:9/19;border-radius:26px;overflow:hidden;background:#14110c;border:0;padding:0;box-shadow:0 0 0 1px #d9b46a33,0 24px 50px #0008;cursor:pointer;filter:brightness(.62) saturate(.8);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),filter .45s;}
.hw-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.hw-card-tag{position:absolute;left:8px;right:8px;bottom:8px;padding:7px 9px;border-radius:13px;background:#090909d9;backdrop-filter:blur(6px);font-size:11px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:6px;opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);min-width:0;}
.hw-card-tag b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.hw-card-tag i{font-style:normal;font-family:ui-monospace,monospace;font-size:8px;letter-spacing:.1em;color:var(--gold);flex:none;}
.hw-card:focus-visible{outline:2px solid var(--light-gold);outline-offset:3px;}
.hw-card:focus-visible .hw-card-tag{opacity:1;transform:none;}
@media(hover:hover) and (pointer:fine){
  .hw-card:hover{transform:translateZ(60px) scale(1.06);box-shadow:0 0 0 1.5px var(--gold),0 0 50px #d9b46a55,0 30px 70px #000c;filter:none;z-index:2;}
  .hw-card:hover .hw-card-tag{opacity:1;transform:none;}
}

/* ── 가독 스크림(왼쪽에서 오른쪽으로) ───────────────────────────── */
.hw-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(9,9,9,.93) 30%,rgba(9,9,9,.58) 52%,rgba(9,9,9,0) 74%),
             linear-gradient(0deg,var(--bg) 0%,rgba(9,9,9,0) 24%);}

/* ── 동작 줄이기: 정적, 완전히 읽히는 레이아웃 ───────────────────── */
@media(prefers-reduced-motion:reduce){
  .hw-h1,.hw-h1 em{animation:none!important;opacity:1!important;transform:none!important;filter:none!important;}
  .hw-live-dot{animation:none!important;box-shadow:none!important;}
  .hw-card{transition:none!important;}
  .hw-wall{opacity:.5!important;}
  .hw-speed{display:none!important;}
}
.hw-hero--reduced .hw-wall{opacity:.5;}
.hw-hero--reduced .hw-speed{display:none;}

/* ── 모바일 ≤720: 벽은 상단 ~58vh, 카피는 그 아래(내용만큼만 높이) ── */
@media(max-width:720px){
  .hw-hero{display:block;min-height:0;padding-top:0;padding-bottom:40px;}
  .hw-hero-copy{max-width:none;padding-top:34vh;}
  .hw-wall-wrap{height:58vh;}
  .hw-wall{gap:10px;}
  .hw-card{width:clamp(84px,26vw,116px);border-radius:20px;}
  .hw-card-tag{display:none;}
  .hw-scrim{background:linear-gradient(0deg,var(--bg) 18%,rgba(9,9,9,.86) 46%,rgba(9,9,9,.15) 66%,rgba(9,9,9,0) 80%);}
  .hw-stats{gap:8px;}
  .hw-stat{min-width:0;flex:1 1 calc(50% - 8px);padding:9px 12px;}
  .hw-speed{display:none;}
}
@media(max-width:360px){.hw-stat{flex-basis:100%;}}

/* 글 상자는 벽 위에 투명하게 겹친다(폰은 위 34vh 가 통째로 빈 여백) — 상자는 터치를 통과시키고
   글·링크·통계만 받는다. 안 그러면 벽 카드가 눈에는 보이는데 눌리지 않는다(09-28 라이브 실측: 폰 탭 무반응). */
.hw-hero-copy{pointer-events:none}
.hw-hero-copy > *{pointer-events:auto}