/* Hero Motion Test (메인 영상 테스트): scoped to the copied test page */
body .page-one.hero-motion-test{background:#07111f;isolation:isolate}
.hero-scene{position:absolute;inset:0;z-index:-2;pointer-events:none;background:#07111f url('./onup-command-desktop-poster.webp') center/cover no-repeat}
.hero-scene picture,.hero-scene img,.hero-scene video{display:block;position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center}
.hero-scene video{opacity:0;transition:opacity .4s ease}
.hero-scene.is-playing video{opacity:1}
.hero-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#020a15f5 0%,#031020e3 33%,#03102082 50%,#03102018 70%),linear-gradient(0deg,#040b14bf,transparent 26%)}
body .hero-motion-test:after{pointer-events:none;z-index:0}
.hero-motion-control{position:absolute;right:22px;bottom:22px;z-index:5;min-height:44px;padding:9px 14px;border:1px solid #ffffff52;border-radius:999px;background:#071525d9;color:#eaf2f8;font:700 14px/1.5 system-ui,sans-serif;cursor:pointer}
.hero-motion-control:focus-visible{outline:3px solid #8eb4ff;outline-offset:4px}
@media(max-width:760px){
  body .page-one.hero-motion-test{align-items:flex-start;min-height:940px;min-height:max(940px,100svh)}
  .hero-motion-test .hero{padding-top:112px;padding-bottom:360px}
  .hero-motion-test .hero-scene{top:auto;bottom:0;height:auto;aspect-ratio:9/16;width:100%;background-size:cover}
  .hero-motion-test .hero-scene img,.hero-motion-test .hero-scene video{object-fit:contain}
  .hero-motion-test .hero-scene{background-image:url('./onup-command-mobile-poster.webp')}
  .hero-motion-test .hero-wash{background:linear-gradient(180deg,#031020ed 0%,#031020d6 42%,#0310207a 58%,#03102014 76%,#040b144f 100%)}
  .hero-motion-test .hero{max-width:100%}
  .hero-motion-test h1{font-size:clamp(1.85rem,8vw,3.5rem)}
  .hero-motion-test .actions{gap:10px}
  .hero-motion-test .actions .btn{padding:0 16px;font-size:.92rem;min-height:52px}
  .hero-motion-control{right:16px;bottom:18px}
}
@media(prefers-reduced-motion:reduce){.hero-scene video{transition:none}}
/* Approved Symbol and Command (확정 심볼 및 명령 연출) */
.nav .brand{display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand-symbol{width:60px;height:48px;object-fit:contain;border-radius:0;flex-shrink:0;filter:drop-shadow(0 0 3px #52d6ef44)}
.nav .brand small{display:inline-block;margin-left:3px;font-size:12px;letter-spacing:.07em;color:#bfd0dc}
.voice-command{position:absolute;right:8%;bottom:31%;z-index:3;padding:10px 18px;border:1px solid #58baff;border-radius:15px;background:#071525ed;color:#f4fbff;font-size:18px;font-weight:800;box-shadow:0 0 18px #329bff55;pointer-events:none;transition:opacity .3s ease}
.voice-command:after{content:"";position:absolute;bottom:-7px;right:20px;width:12px;height:12px;background:#071525;border-right:1px solid #58baff;border-bottom:1px solid #58baff;transform:rotate(45deg)}
.voice-command.is-hidden{opacity:0}
/* Desktop Command Placement (PC 말풍선 위치): follows the visible video crop */
@media(min-width:761px){
 .voice-command{left:var(--command-left,80%);top:var(--command-top,60%);right:auto;bottom:auto;white-space:nowrap}
}
@media(max-width:760px){
 body .page-one.hero-motion-test{min-height:0}
 .page-one.hero-motion-test>.wrap{margin:0 auto}
 body .page-one.hero-motion-test .hero{padding-top:96px;padding-bottom:calc(107vw + 70px)}
 .hero-motion-test .hero-wash{background:linear-gradient(180deg,#031020fa 0%,#031020e8 32%,#03102055 58%,#03102008 82%,#040b144f 100%)}
 .voice-command{right:18px;bottom:52vw;font-size:16px;padding:9px 14px}
 .nav .brand{gap:6px;font-size:1.4rem}
 .nav .brand small{display:inline-block;font-size:12px;letter-spacing:.025em}
 .brand-symbol{width:45px;height:36px;border-radius:0}
 .nav .demo-link{font-size:.75rem;padding:8px 9px}
}
@media(max-width:480px){
 .nav{height:68px}
 .nav .wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:6px}
 .nav .brand{flex:0 0 auto;gap:4px;font-size:clamp(17px,4.7vw,22px)}
 .nav .brand small{margin-left:1px;font-size:clamp(8px,2.2vw,10px);letter-spacing:0;white-space:nowrap}
 .nav .brand-symbol{width:clamp(24px,6.8vw,32px);height:30px}
 .nav .nav-actions{flex:0 0 auto;margin-left:auto;gap:4px;white-space:nowrap}
 .nav .demo-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:6px;font-size:clamp(10px,2.7vw,12px)}
 body .page-one.hero-motion-test .hero{padding-top:96px}
}
@media(prefers-reduced-motion:reduce){.voice-command{transition:none}}