@font-face{font-family:MotionFont;src:url('vendor/font.ttf')}*{box-sizing:border-box}body{margin:0;background:#f5f7f9;color:#1a2933;font:16px/1.5 -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif}header{padding:20px 4vw;display:flex;gap:18px;justify-content:space-between;align-items:center;border-bottom:1px solid #dce3e8;background:white}a{color:#226b9a;text-underline-offset:3px}main{max-width:1420px;margin:auto;padding:36px 4vw}h1{font-size:clamp(30px,4vw,48px);line-height:1.2;margin:10px 0 20px}h2{font-size:23px;line-height:1.4}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;color:#44697c}.muted{color:#526b78;font-size:14px}.workbench{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:28px;margin:32px 0 45px}.preview-column{min-width:0}#preview{width:100%;aspect-ratio:1080/830;height:auto;border-radius:20px}#settings{background:white;border:1px solid #dce4eb;border-radius:20px;padding:22px;display:grid;gap:12px}#settings h2,#settings p{margin:0}label{display:grid;gap:6px;font-size:14px;font-weight:600}input,select,textarea,button{font:inherit}input,select,textarea{max-width:100%;min-width:0;padding:10px;border:1px solid #becdd6;border-radius:9px;background:#fff;color:#152632}input[type=file]{font-size:12px}input[type=color]{width:100%;height:45px;padding:5px}button{min-height:44px;border:1px solid #a7bbc8;border-radius:10px;background:#fff;color:#175b87;padding:9px 15px;cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #187db4;outline-offset:3px}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions,.transport{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.transport{margin-top:15px}.transport input{flex:1;width:130px;min-width:70px}.transport output{font-variant-numeric:tabular-nums;min-width:65px}#status{min-height:48px;color:#315f72}.filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.motion-card{background:white;border:1px solid #d2dfe7;border-radius:14px;overflow:hidden;display:grid;text-align:left;padding:0;color:#1c3647;align-content:start}.motion-card .thumb{height:175px;background:#101922;overflow:hidden;width:100%}.motion-card strong{font-size:16px;padding:14px 14px 5px}.motion-card small{padding:0 14px 14px;color:#536e7d}.motion-card[aria-pressed=true]{outline:3px solid #247ca5}.diagnostics{padding:24px 0}.diagnostics output{display:block;white-space:pre-wrap;font-size:13px;margin-top:12px}footer{font-size:13px;padding:35px 0;color:#536e7d}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:780px){.workbench{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}.filters label:first-child{grid-column:1/-1}header strong{display:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.motion-card .thumb{height:135px}main{padding:24px 16px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

[hidden]{display:none!important}
.references{padding:30px 0 0;margin-top:18px;border-top:1px solid #dce3e8}
.references h2{font-size:19px;margin:0 0 6px}
.references ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.references li{background:#fff;border:1px solid #dce4eb;border-radius:14px;padding:14px 16px}
.references li a{font-weight:700}
.references li span{display:block;margin-top:5px}

/* MOTIONEMBED1030 — 에셋 화면의 미리보기 창(`?embed=1`).
   이 페이지를 통째로 iframe 에 넣으면 첫 화면인 소개 글만 보이고 모션은 스크롤 아래에 있다.
   embed 에서는 **미리보기 하나만** 남기고 나머지(머리·소개·설정 폼·목록·참고 링크·바닥글)를 감춘다.
   높이는 iframe 을 꽉 채우고, 무대(1080×830)는 mount.js 의 fit() 이 비율을 지켜 가운데 맞춘다. */
html.embed body{background:#0d0f11}
html.embed header,html.embed .intro,html.embed #settings,html.embed section[aria-label="모션 찾기"],
html.embed .diagnostics,html.embed .references,html.embed footer{display:none}
html.embed main{max-width:none;margin:0;padding:0}
html.embed .workbench{grid-template-columns:1fr;gap:0;margin:0}
html.embed .preview-column{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100vh;min-height:0}
html.embed #preview{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
html.embed .transport{margin:0;padding:6px 8px;gap:8px;background:#14181c;color:#e8e8e8}
html.embed .transport button{min-height:30px;padding:4px 11px;border-color:#3a444c;background:#1d2328;color:#e8e8e8;font-size:12px}
html.embed .transport input{width:auto;min-width:60px;padding:0}
html.embed .transport output{min-width:52px;font-size:12px;color:#b9c2c9}
html.embed #status{display:none}