/* 랜딩 첫 화면 앱 창 모션 (landing-hero.js 와 짝)
   .lp-stage 에 .lp-hm 이 붙었을 때만 동작한다. 자바스크립트가 없거나 움직임 줄이기면 기존 화면 그대로.
   시안 원본: 글로그_자료/모션/hero-v3.html */
[data-lp-hm-txt]{display:none!important}

.lp-hm{perspective:1800px;isolation:isolate}

/* 창 뒤의 파스텔 빛 */
.lp-hm__mesh{position:absolute;left:-18%;right:-18%;top:-90px;bottom:-40px;z-index:-1;pointer-events:none;opacity:0}
.lp-hm__mesh i{position:absolute;border-radius:50%;filter:blur(80px)}
.lp-hm__mesh i:nth-child(1){width:46%;aspect-ratio:1;left:2%;top:10%;background:rgba(70,150,255,.42)}
.lp-hm__mesh i:nth-child(2){width:42%;aspect-ratio:1;right:0;top:-6%;background:rgba(255,140,165,.38)}
.lp-hm__mesh i:nth-child(3){width:38%;aspect-ratio:1;left:34%;top:46%;background:rgba(170,160,255,.30)}

/* 창: 리퀴드 글래스 */
.lp-hm .lp-win{
  transform-origin:50% 100%;
  background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.68));
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  border-color:transparent;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 30px rgba(255,255,255,.4),0 2px 6px rgba(30,50,110,.05),0 24px 70px rgba(30,50,110,.14);
}
.lp-hm .lp-win::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.2) 30%,rgba(255,255,255,0) 55%,rgba(180,200,255,.5) 80%,rgba(255,190,210,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
}
.lp-hm .lp-win__bar,.lp-hm .lp-win__side,.lp-hm .lp-win__ai{background:rgba(255,255,255,.34)}
.lp-hm .lp-bubble{background:rgba(255,255,255,.6)}

/* 기존 CSS 반복 움직임은 끄고 타임라인이 맡는다(파형과 녹음 점은 그대로) */
.lp-hm .lp-line,.lp-hm .lp-bubble__live li,.lp-hm .lp-win__count span{animation:none!important}
.lp-hm .lp-line{opacity:1}
.lp-hm .lp-hm-w{display:inline-block;will-change:transform,opacity}
.lp-hm .lp-term{background:linear-gradient(var(--accent-soft),var(--accent-soft)) no-repeat 0 0/0% 100%}
.lp-hm .lp-caret{opacity:0}

/* 유리 위를 지나가는 빛 */
.lp-hm__sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;border-radius:inherit}
.lp-hm__sheen::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-30%;width:22%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(var(--sx,-150%)) skewX(-12deg)}

/* 떠다니는 유리 카드 (넓은 화면만) */
.lp-hm__chip{
  position:absolute;z-index:4;display:none;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;text-align:left;
  font-size:13px;line-height:1.35;color:var(--text-muted);white-space:nowrap;
  background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.4));
  -webkit-backdrop-filter:blur(14px) saturate(1.9);backdrop-filter:blur(14px) saturate(1.9);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 20px rgba(255,255,255,.35),0 16px 40px rgba(30,50,110,.16);
}
.lp-hm__chip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:linear-gradient(135deg,#fff,rgba(255,255,255,.1) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.8));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lp-hm__chip b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.lp-hm__ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.lp-hm__ico--ctx{background:linear-gradient(135deg,#6db3ff,#2f7bff)}
.lp-hm__ico--tr{background:linear-gradient(135deg,#c3a8ff,#8a6cf0)}
.lp-hm__ico--ok{background:linear-gradient(135deg,#7fdcae,#2fae74)}
.lp-hm__chip--1{left:-150px;top:340px}
.lp-hm__chip--2{right:-130px;top:-18px}
.lp-hm__chip--3{right:-120px;top:400px}
@media (min-width:1360px){.lp-hm__chip{display:flex}}

/* AI에게 묻기 입력창 */
.lp-hm__ask{
  position:absolute;z-index:5;left:50%;bottom:26px;width:min(560px,calc(100% - 32px));height:56px;margin-left:calc(min(560px,calc(100% - 32px)) / -2);
  display:flex;align-items:center;gap:12px;padding:0 8px 0 18px;border-radius:28px;text-align:left;
  background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(16px) saturate(1.9);backdrop-filter:blur(16px) saturate(1.9);
  box-shadow:inset 0 1.5px 0 #fff,inset 0 0 20px rgba(255,255,255,.4),0 0 0 1px rgba(47,123,255,.18),0 18px 44px rgba(30,70,160,.2);
  opacity:0;
}
.lp-hm__ask svg.sp{flex:none;color:var(--accent)}
.lp-hm__q{flex:1;min-width:0;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:clip}
.lp-hm__q::after{content:"";display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--accent);opacity:var(--caret,0)}
.lp-hm__send{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(0,117,222,.35)}

/* AI 답 (요약 칸의 빈 줄 자리) */
.lp-hm__ans{font-size:13px;line-height:1.55;color:var(--text-dim);padding:var(--space-3);border-radius:var(--r-card);background:rgba(0,117,222,.07);opacity:0}
.lp-hm__ans b{color:var(--accent-strong);font-weight:600}
.lp-hm .lp-skel{background:linear-gradient(90deg,var(--panel-2) 0,#e9f1fe 40%,var(--panel-2) 80%) 0 0/200% 100%}

@media (max-width:880px){
  .lp-hm__ask{height:50px;bottom:18px}
  .lp-hm__q{font-size:14px}
  .lp-hm__mesh{left:-30%;right:-30%}
}