/* ============================================================
   ARIFE 모션 전이 콘솔 v100  (2026-08-04)

   왜 다시 짰나
   ─────────────
   재 보니 한 번 돌리는 데 화면을 2.7~5.1번 스크롤해야 했고,
   조작부 높이가 8종류(18·26·34·38·42·43·54·161px), 모서리가 7종류였다.
   가로 넘침도 여섯 곳(430에서 모드 탭·미리보기 그림틀 포함).
   큰 모드 탭 두 장이 화면 맨 위를 통째로 먹고 있었는데,
   그건 하루에 한 번 누를까 말까 한 단추다.

   그래서 이렇게 바꿨다 (뎁스맵·미디어아트와 같은 벌)
     · 위는 **무대** — 움직임 영상과 캐릭터 이미지를 나란히, 결과가 나오면 크게
     · 아래는 **바 한 줄** — 넣기·설정·실행이 전부 여기
     · 설정은 기본값을 숨기고, 바꿨을 때만 칩에 그 값이 뜬다
     · 큰 모드 탭 두 장 → 바 안의 작은 세그먼트 하나
     · 왼쪽 프로젝트 세로 띠 → 바의 '프로젝트' 팝업

   지키는 규칙
     높이 34(칩·탭·세그) · 40(원형) · 44(보조 단추) · 54(실행) · 24(알약 안 지우개)
     모서리 999(알약) · 50%(원형) · 16(카드) · 22(바·팝업) · 11(작은 상자)
     카드에 고정 높이 금지 · 한글 낱말 안 끊기 · 아이콘 flex:none
     색은 --h 하나로만 바꾼다
     모션은 160~260ms · 이동은 3px 이내 · reduce 설정에서 전부 멈춘다
   ============================================================ */

#motionapp{
  /* 운영자가 고른 두 색.
     패널 = 회색 #bfbfbf 유리 · 단추 = 슬레이트 블루 #7596be
     둘 다 채도가 낮아 서로 튀지 않는다. */
  --h:215;
  --mo-grey:191,191,191;         /* 판 — #bfbfbf */
  --mo-grey2:176,176,176;
  --mo-blue:117,150,190;         /* 단추 — #7596be */

  --mo-h-chip:34px;
  --mo-h-round:40px;
  --mo-h-btn:44px;
  --mo-h-run:54px;

  --mo-r-s:11px;
  --mo-r-m:16px;
  --mo-r-l:22px;

  /* 바탕은 밝게, 판은 살짝 어둡게 — 스모크 글라스.
     밝은 판을 밝은 바탕에 올리면 경계가 녹아 없어지고,
     어두운 판을 어두운 바탕에 올리면 투명한 줄을 모른다.
     밝은 바탕 + 어두운 유리라야 '뒤가 비친다'가 눈에 들어온다. */
  --mo-ink:#171b22;
  --mo-dim:#3b424e;
  --mo-dim2:#535b68;

  /* 어두운 유리 한 벌 */
  --mo-glass:rgba(var(--mo-grey),.7);     /* 판 — 밝은 회색 유리 */
  --mo-glass2:rgba(var(--mo-grey),.82);   /* 도톰한 것 */
  --mo-glass3:rgba(var(--mo-grey),.9);    /* 팝업처럼 글이 많은 것 */
  --mo-edge:rgba(255,255,255,.9);         /* 위쪽 밝은 선 */
  --mo-edge2:rgba(255,255,255,1);
  --mo-under:rgba(50,54,62,.16);         /* 아래 안쪽 그늘 */
  --mo-line:rgba(90,96,106,.3);
  --mo-line2:rgba(90,96,106,.44);
  --mo-shade:rgba(24,27,33,.22);
  --mo-shade2:rgba(24,27,33,.4);

  --mo-ease:cubic-bezier(.2,.9,.25,1);
  --mo-t:.2s;

  --hue:#7596be;

  position:relative;
  width:100%;max-width:none;
  padding:0;
  min-height:calc(100vh - var(--mo-top,150px));
  word-break:keep-all;
  overflow-wrap:anywhere;

  /* 등장 연출이 이 요소에 transform 을 걸면 안쪽 position:fixed 가
     화면이 아니라 여기를 기준으로 잡혀 통째로 내려앉는다(미디어아트에서 실측). */
  animation:none!important;
  transform:none!important;
}

/* 머리말은 화면에서만 숨긴다 — 검색과 스크린리더는 그대로 읽는다 */
#motionapp .mo-head{
  position:absolute!important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%);
}
/* 엔진이 값을 읽어 가는 원래 조작부. 화면에서만 뺀다 —
   지우면 생성·저장이 통째로 멈춘다. */
#motionapp .mo-engine{
  position:absolute!important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%);
}

/* ============================================================
   무대 — 도크 위 남은 자리 그 자체
   ============================================================ */
#motionapp .mo-stage{
  position:fixed;
  left:0;right:0;
  top:var(--mo-top,150px);
  height:var(--mo-free,60vh);
  min-height:0;
  z-index:0;
  overflow:hidden;
  background:transparent;   /* 바탕은 페이지가 깐다 — 바 아래까지 이어져야 한다 */
}


#motionapp .mo-view{
  position:absolute;inset:0;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  padding:14px 18px;
  box-sizing:border-box;
}

/* ── 입력 두 칸 ────────────────────────────────────────────
   움직임(영상)과 캐릭터(이미지)는 성격이 다르다. 겹쳐 보는 게 아니라
   나란히 놓고 "어느 칸에 무엇을 넣는지"가 한눈에 보여야 한다.
   칸을 잘못 채우면 크레딧이 날아간다. */
#motionapp .mo-pair{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:14px;
  min-width:0;min-height:0;
}
#motionapp .mo-pair[hidden]{display:none!important}

#motionapp .mo-cell{
  position:relative;min-width:0;min-height:0;
  border-radius:var(--mo-r-m);
  overflow:hidden;
  background:rgba(214,220,230,.96);
  box-shadow:
    0 26px 52px -22px var(--mo-shade2),
    inset 0 1px 0 var(--mo-edge),
    inset 0 0 0 1px var(--mo-line);
  transition:box-shadow var(--mo-t),background var(--mo-t);
}
/* 빈 칸은 어두운 유리 — 밝은 바탕이 뒤로 비친다 */
#motionapp .mo-cell.is-empty{
  background:linear-gradient(180deg,rgba(var(--mo-grey),.82),rgba(var(--mo-grey2),.72));
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:
    0 26px 54px -22px var(--mo-shade2),
    inset 0 1px 0 var(--mo-edge2),
    inset 0 0 0 1px var(--mo-line),
    inset 0 -18px 34px -18px var(--mo-under);
}
#motionapp .mo-cell.is-over{
  background:linear-gradient(180deg,rgba(87,160,244,.3),#c2cfe0);
  box-shadow:
    0 30px 60px -20px var(--mo-shade2),
    inset 0 0 0 2px hsl(var(--h) 75% 68% / .9);
}
#motionapp .mo-cell-media{
  position:absolute;inset:0;
  display:grid;place-items:center;
}
/* 옛 작업실 CSS 가 미리보기에 제 나름의 크기를 걸어 둔다. 여기서는 우리가 정한다. */
#motionapp .mo-cell-media>video,
#motionapp .mo-cell-media>img{
  width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;min-width:0;min-height:0;
  object-fit:contain!important;
  display:block;background:transparent;
  border:0;border-radius:0;padding:0;margin:0;
}
#motionapp .mo-cell-media>[hidden]{display:none!important}

/* 빈 칸 안내 — 누르면 넣는 창이 열린다 */
#motionapp .mo-drop{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:20px;text-align:center;
  background:none;border:0;color:inherit;font-family:inherit;
  cursor:pointer;
}
#motionapp .mo-drop[hidden]{display:none!important}
#motionapp .mo-drop i{
  width:56px;height:56px;border-radius:var(--mo-r-m);
  display:grid;place-items:center;flex:none;
  border:1px solid #7d92ae;
  background:linear-gradient(180deg,#b6c6dc,#93a8c6);
  color:#5a7291;font-style:normal;font-size:22px;line-height:1;
  box-shadow:0 12px 24px -12px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),background var(--mo-t);
}
#motionapp .mo-drop:hover i{
  background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  box-shadow:0 18px 32px -12px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
}
#motionapp .mo-drop strong{color:#171b22;font-size:15px;font-weight:900;line-height:1.5}
#motionapp .mo-drop span{color:var(--mo-dim);font-size:12.5px;line-height:1.7;max-width:32ch}
#motionapp .mo-drop span b{color:#171b22}

/* 칸 이름표 */
#motionapp .mo-tag{
  position:absolute;left:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  min-height:28px;padding:5px 12px;
  border-radius:999px;
  border:1px solid var(--mo-line2);
  background:var(--mo-glass2);
  backdrop-filter:blur(16px) saturate(1.5);
  color:#2a303a;font-size:11px;font-weight:800;line-height:1.4;
  box-shadow:0 10px 22px -10px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge2);
  pointer-events:none;
}
#motionapp .mo-tag b{color:#171b22;font-weight:900}
#motionapp .mo-tag em{color:var(--mo-dim2);font-style:normal;font-weight:700}
#motionapp .mo-tag[hidden]{display:none!important}

/* 칸 안의 작은 단추 (바꾸기·빼기) */
#motionapp .mo-cellbtns{
  position:absolute;right:10px;top:10px;z-index:4;
  display:flex;gap:6px;
}
#motionapp .mo-cellbtns[hidden]{display:none!important}
#motionapp .mo-mini{
  height:30px;min-height:30px;padding:0 12px;border-radius:999px;
  border:1px solid #7d92ae;
  background:linear-gradient(180deg,#b6c6dc,#93a8c6);
  color:#14202e;font-family:inherit;font-weight:800;font-size:11px;line-height:1;
  display:inline-flex;align-items:center;gap:5px;
  cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 10px 20px -10px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),color var(--mo-t),background var(--mo-t);
}
#motionapp .mo-mini:hover{
  color:#0d151f;background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  box-shadow:0 14px 26px -10px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
}
#motionapp .mo-mini:active{box-shadow:inset 0 3px 7px rgba(40,44,52,.25)}

/* ── 결과 칸 ──────────────────────────────────────────── */
#motionapp .mo-out{
  position:relative;min-width:0;min-height:0;
  align-self:center;justify-self:center;
  max-width:100%;max-height:100%;
  border-radius:var(--mo-r-m);
  overflow:hidden;
  background:#05050c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
#motionapp .mo-out:not(.is-fit){align-self:stretch;justify-self:stretch;width:auto;height:auto}
#motionapp .mo-out[hidden]{display:none!important}
#motionapp .mo-out-media{position:absolute;inset:0;display:grid;place-items:center}
#motionapp .mo-out-media>video{
  width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;display:block;background:transparent;
}

/* ── 재생 막대 (구간 손잡이가 함께 산다) ──────────────────
   '사용 구간'을 따로 슬라이더 두 개로 두면 재생 막대와 따로 놀아서
   어디를 자른 건지 눈으로 못 맞춘다. 같은 막대 위에서 자른다. */
/* 막대는 그 영상이 있는 칸 안에 산다 */
#motionapp .mo-tport{
  position:absolute;left:50%;bottom:46px;transform:translateX(-50%);z-index:7;
  display:flex;align-items:center;gap:10px;
  height:var(--mo-h-chip);padding:0 12px 0 4px;
  width:min(420px,calc(100% - 40px));
  border-radius:999px;
  border:1px solid var(--mo-line2);
  background:var(--mo-glass2);
  backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 16px 32px -14px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2);
  box-sizing:border-box;
}
#motionapp .mo-tport[hidden]{display:none!important}
#motionapp .mo-tplay{
  flex:none;width:28px;height:28px;border-radius:999px;
  border:1px solid #3a5679;
  background:linear-gradient(180deg,#5f80a8,#3a5679);
  display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 6px 14px -6px hsl(var(--h) 50% 40% / .8),inset 0 1px 0 rgba(255,255,255,.5);
  transition:box-shadow var(--mo-t),filter var(--mo-t);
}
#motionapp .mo-tplay:hover{filter:brightness(1.08)}
#motionapp .mo-tplay:active{box-shadow:inset 0 2px 5px rgba(30,20,80,.45)}
/* 모양은 글자가 아니라 도형으로 그린다 — 글꼴에 따라 안 그려진다 */
#motionapp .mo-tplay>i{
  display:block;width:9px;height:11px;box-sizing:border-box;
  border-left:3px solid #fff;border-right:3px solid #fff;
}
#motionapp .mo-tplay.is-play>i{
  width:0;height:0;margin-left:2px;border:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:10px solid #fff;
}
#motionapp .mo-tbar{
  position:relative;
  flex:1 1 auto;min-width:60px;height:16px;
  display:flex;align-items:center;cursor:pointer;touch-action:none;
  border-radius:999px;
  background:linear-gradient(180deg,transparent calc(50% - 2px),rgba(255,255,255,.18) calc(50% - 2px),rgba(255,255,255,.18) calc(50% + 2px),transparent calc(50% + 2px));
}
#motionapp .mo-tbar:focus-visible{outline:2px solid hsl(var(--h) 70% 66%);outline-offset:3px}
/* 쓰는 구간 */
#motionapp .mo-tuse{
  position:absolute;top:50%;height:4px;margin-top:-2px;
  border-radius:999px;
  background:hsl(var(--h) 55% 44% / .55);
}
#motionapp .mo-tfill{
  position:absolute;top:50%;left:0;height:4px;margin-top:-2px;
  border-radius:999px;
  background:#7ab6f9;
  width:0;
  transition:width .12s linear;
}
#motionapp .mo-thandle{
  position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:999px;
  border:1px solid #7ab6f9;
  background:linear-gradient(180deg,#fff,#cfe4fd);
  box-shadow:0 4px 10px -3px rgba(40,44,52,.25),inset 0 1px 0 #fff;
  cursor:ew-resize;touch-action:none;
  transition:transform .16s var(--mo-ease);
}
#motionapp .mo-thandle:hover{transform:scale(1.15)}
#motionapp .mo-thandle[hidden]{display:none!important}
#motionapp .mo-ttime{
  flex:none;color:var(--mo-dim);font-size:10.5px;font-weight:800;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* 무대 오른쪽 위 단추 */
#motionapp .mo-viewbtns{
  position:absolute;right:16px;top:14px;z-index:6;
  display:flex;gap:6px;
}
#motionapp .mo-vb{
  height:var(--mo-h-chip);min-height:var(--mo-h-chip);padding:0 14px;border-radius:999px;
  border:1px solid #7d92ae;
  background:linear-gradient(180deg,#b6c6dc,#93a8c6);
  color:#14202e;font-family:inherit;font-weight:800;font-size:11.5px;line-height:1;
  cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:0 12px 24px -10px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),color var(--mo-t),background var(--mo-t);
}
#motionapp .mo-vb:hover{color:#0d151f;background:linear-gradient(180deg,#adbfd7,#8ba2c2);box-shadow:0 16px 28px -10px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3)}
#motionapp .mo-vb:active{box-shadow:inset 0 3px 7px rgba(40,44,52,.25)}
#motionapp .mo-vb[hidden]{display:none!important}

/* ============================================================
   도크 — 바 한 줄
   ============================================================ */
#motionapp .mo{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:30;
  padding:0 16px 16px;
  display:grid;
  justify-items:center;
  gap:10px;
  pointer-events:none;
}
#motionapp .mo>*{pointer-events:auto}

#motionapp .mo-veil{
  position:fixed;inset:0;z-index:-1;
  background:rgba(226,231,240,.6);
  backdrop-filter:blur(4px);
  border:0;padding:0;
}
#motionapp .mo-veil[hidden]{display:none!important}

#motionapp .mo-notes{
  width:min(1240px,100%);
  display:grid;gap:8px;max-height:34vh;overflow:auto;overscroll-behavior:contain;
}
#motionapp .mo-notes:empty{display:none}
#motionapp .mo-msg{
  margin:0;padding:11px 15px;
  border-radius:0 var(--mo-r-s) var(--mo-r-s) 0;
  background:linear-gradient(90deg,rgba(var(--mo-grey),.86),rgba(var(--mo-grey),.72));
  backdrop-filter:blur(18px) saturate(1.5);
  color:#2a303a;font-size:12.5px;line-height:1.7;
  box-shadow:inset 4px 0 0 #7ab6f9,0 12px 26px -14px rgba(40,44,52,.28);
  animation:mo-rise .26s var(--mo-ease) backwards;
}
#motionapp .mo-msg b{color:#171b22}
#motionapp .mo-msg.warn{
  background:linear-gradient(90deg,rgba(84,58,20,.72),rgba(40,30,20,.58));
  box-shadow:inset 4px 0 0 #f0ad55,0 12px 26px -14px rgba(40,44,52,.28);color:#f6dfba;
}
#motionapp .mo-msg.warn b{color:#fff2dc}
#motionapp .mo-msg.bad{
  background:linear-gradient(90deg,rgba(88,26,44,.72),rgba(44,18,28,.58));
  box-shadow:inset 4px 0 0 #f2708d,0 12px 26px -14px rgba(40,44,52,.28);color:#f8d3dc;
}
#motionapp .mo-msg.bad b{color:#ffe8ee}

#motionapp .mo-gauge{
  width:min(1240px,100%);
  position:relative;height:7px;border-radius:999px;
  background:rgba(206,213,225,.7);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(40,44,52,.25),0 1px 0 var(--mo-edge);
}
#motionapp .mo-gauge[hidden]{display:none!important}
#motionapp .mo-gauge i{
  position:absolute;inset:0;width:var(--p,0%);
  background:linear-gradient(90deg,hsl(var(--h) 70% 58%),hsl(var(--h) 92% 74%));
  transition:width .3s var(--mo-ease);
}
#motionapp .mo-gauge span{
  position:absolute;right:0;top:-18px;
  color:var(--mo-dim);font-size:10.5px;font-weight:800;
}

#motionapp .mo-after{
  width:min(1240px,100%);
  display:flex;flex-wrap:wrap;gap:8px;
}
#motionapp .mo-after:empty{display:none}
#motionapp .mo-btn{
  height:var(--mo-h-btn);min-height:var(--mo-h-btn);
  display:inline-flex;align-items:center;gap:8px;padding:0 16px;
  border:1px solid var(--mo-line2);border-radius:999px;
  background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  color:#14202e;font-family:inherit;font-weight:800;font-size:12px;line-height:1;
  text-decoration:none;cursor:pointer;
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 12px 24px -10px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),color var(--mo-t),background var(--mo-t);
}
#motionapp .mo-btn:hover:not(:disabled){color:#0d151f;background:linear-gradient(180deg,#adbfd7,#8ba2c2);box-shadow:0 16px 30px -10px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3)}
#motionapp .mo-btn:active:not(:disabled){box-shadow:inset 0 3px 9px rgba(40,44,52,.24)}
#motionapp .mo-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
#motionapp .mo-btn.key{
  border-color:#3a5679;
  background:linear-gradient(180deg,#5f80a8,#3a5679);
  color:#fff;
  box-shadow:0 14px 28px -10px rgba(46,58,76,.85),inset 0 1px 0 rgba(255,255,255,.46),inset 0 -3px 0 rgba(48,56,70,.3);
}

/* ── 바 ─────────────────────────────────────────────── */
#motionapp .mo-bar{
  position:relative;
  width:min(1240px,100%);
  display:grid;gap:10px;
  padding:12px 14px;
  border-radius:var(--mo-r-l);
  border:1px solid var(--mo-line2);
  background:linear-gradient(180deg,rgba(var(--mo-grey),.78),rgba(var(--mo-grey2),.66));
  backdrop-filter:blur(26px) saturate(1.6);
  box-shadow:
    0 34px 66px -26px rgba(40,44,52,.20),
    inset 0 1px 0 var(--mo-edge2),
    inset 0 -22px 40px -22px var(--mo-under);
  box-sizing:border-box;
}

#motionapp .mo-files{display:flex;flex-wrap:wrap;gap:8px}
#motionapp .mo-files:empty{display:none}
#motionapp .mo-fchip{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 6px 0 13px;
  border-radius:999px;
  border:1px solid #7d92ae;
  background:linear-gradient(180deg,#b6c6dc,#93a8c6);
  color:#14202e;font-size:11.5px;font-weight:800;line-height:1;
  max-width:100%;
  box-shadow:0 8px 18px -9px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
}
#motionapp .mo-fchip>i{flex:none;color:hsl(var(--h) 90% 80%);font-style:normal;font-size:13px}
#motionapp .mo-fchip>b{
  color:#171b22;font-weight:900;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch;
}
#motionapp .mo-fchip>em{color:var(--mo-dim2);font-style:normal;font-weight:700;white-space:nowrap}
#motionapp .mo-fchip>button{
  flex:none;width:26px;height:26px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);
  color:#14202e;font-family:inherit;font-size:12px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--mo-t),color var(--mo-t);
}
#motionapp .mo-fchip>button:hover{background:#e8566f;border-color:#e8566f;color:#fff}

#motionapp .mo-tools{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
#motionapp .mo-sp{flex:1 1 auto;min-width:0}

/* 원형 단추 — 눌리는 것처럼 보이게 위는 밝고 아래는 그늘 */
#motionapp .mo-round{
  flex:none;
  width:var(--mo-h-round);height:var(--mo-h-round);border-radius:50%;
  border:1px solid #6c85a4;
  background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  color:#14202e;font-family:inherit;font-size:18px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:
    0 10px 20px -8px rgba(40,44,52,.25),
    inset 0 1px 0 var(--mo-edge2),
    inset 0 -4px 0 rgba(48,56,70,.32);
  transition:box-shadow var(--mo-t),background var(--mo-t),color var(--mo-t);
}
#motionapp .mo-round:hover{
  color:#0d151f;background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  box-shadow:0 14px 26px -8px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -4px 0 rgba(48,56,70,.32);
}
#motionapp .mo-round:active{box-shadow:inset 0 4px 9px rgba(40,44,52,.25)}
#motionapp .mo-round.on{
  color:#0d151f;border-color:#6c85a4;
  background:linear-gradient(180deg,hsl(var(--h) 66% 62%),hsl(var(--h) 60% 46%));
  box-shadow:inset 0 4px 8px rgba(24,32,44,.26),inset 0 -1px 0 rgba(255,255,255,.28),0 1px 0 rgba(255,255,255,.5);
}

/* 칩 — 하나하나가 '누를 것'으로 보여야 한다.
   테두리 한 줄만으로는 바탕과 구별이 안 갔다(운영자 지적).
   위 밝은 선 + 아래 그늘 + 바깥 그림자로 도톰하게 세운다. */
#motionapp .mo-chip{
  flex:none;
  height:var(--mo-h-chip);min-height:var(--mo-h-chip);
  display:inline-flex;align-items:center;gap:7px;padding:0 14px;
  border-radius:999px;
  border:1px solid #6c85a4;
  background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  color:#14202e;font-family:inherit;font-weight:800;font-size:11.5px;line-height:1;
  cursor:pointer;white-space:nowrap;
  backdrop-filter:blur(10px);
  box-shadow:
    0 8px 18px -8px rgba(40,44,52,.25),
    inset 0 1px 0 var(--mo-edge2),
    inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),background var(--mo-t),color var(--mo-t);
}
#motionapp .mo-chip>i{flex:none;color:hsl(var(--h) 90% 80%);font-style:normal;font-size:12px}
#motionapp .mo-chip>u{text-decoration:none;color:#171b22;font-weight:900}
#motionapp .mo-chip>s{text-decoration:none;color:var(--mo-dim2);font-weight:700}
#motionapp .mo-chip:hover{
  color:#0d151f;background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  box-shadow:0 12px 24px -8px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
}
#motionapp .mo-chip:active{box-shadow:inset 0 3px 8px rgba(40,44,52,.24)}
#motionapp .mo-chip.on{
  color:#0d151f;border-color:#6c85a4;
  background:linear-gradient(180deg,#7f9fc6,#97b1d1);
  box-shadow:0 12px 26px -8px hsl(var(--h) 60% 40% / .8),inset 0 1px 0 rgba(255,255,255,.48),inset 0 -3px 0 rgba(48,56,70,.3);
}
#motionapp .mo-chip.on>i{color:#2f3d52}
#motionapp .mo-chip.on>u{color:#0b1119}
#motionapp .mo-chip.on>s{color:rgba(11,17,25,.72)}
#motionapp .mo-chip:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* 도구 세그먼트 — 큰 탭 두 장을 대신한다 */
/* 세그먼트 — 홈이 파인 판에 알약 하나가 올라와 있는 모양 */
#motionapp .mo-seg{
  flex:none;display:inline-flex;gap:3px;padding:3px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(206,213,225,.7);
  box-shadow:inset 0 3px 7px rgba(40,44,52,.20),0 1px 0 var(--mo-edge);
}
#motionapp .mo-seg button{
  height:28px;min-height:28px;padding:0 13px;border-radius:999px;
  border:1px solid transparent;background:none;
  color:var(--mo-dim);font-family:inherit;font-weight:800;font-size:11.5px;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:color var(--mo-t),background var(--mo-t),box-shadow var(--mo-t);
}
#motionapp .mo-seg button:hover{color:#0d151f;background:rgba(255,255,255,.75)}
#motionapp .mo-seg button.on{
  color:#0d151f;border-color:#6c85a4;
  background:linear-gradient(180deg,#7f9fc6,#97b1d1);
  box-shadow:inset 0 3px 6px rgba(24,32,44,.24),inset 0 -1px 0 rgba(255,255,255,.28);
}

#motionapp .mo-go{display:inline-flex;align-items:center;gap:10px;flex:none;margin-left:auto}
#motionapp .mo-cost{
  color:var(--mo-dim);font-size:11.5px;font-weight:800;white-space:nowrap;
  max-width:16ch;overflow:hidden;text-overflow:ellipsis;
}
#motionapp .mo-cost b{color:#5a7291;font-weight:900;font-size:13.5px}
#motionapp .mo-run{
  flex:none;
  width:var(--mo-h-run);height:var(--mo-h-run);border-radius:50%;
  border:1px solid #3a5679;
  background:linear-gradient(180deg,#5f80a8,#3a5679);
  color:#fff;font-family:inherit;font-size:22px;font-weight:900;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:
    0 14px 28px -10px rgba(46,58,76,.8),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -4px 0 rgba(20,26,34,.42);
  transition:box-shadow var(--mo-t),filter var(--mo-t);
}
#motionapp .mo-run:hover:not(:disabled){
  filter:brightness(1.07);
  box-shadow:0 18px 34px -10px hsl(var(--h) 55% 40% / .85),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(28,18,70,.32);
}
#motionapp .mo-run:active:not(:disabled){box-shadow:inset 0 4px 10px rgba(28,18,70,.5)}
/* 전역 규칙(body:not(.landing-page) button:disabled{opacity:.5})이
   이 단추를 통째로 지워 버린다. id 로 이겨 둔다. */
#motionapp .mo-run:disabled{
  filter:grayscale(.4)!important;opacity:.72!important;cursor:not-allowed;transform:none;
}
#motionapp .mo-run.is-busy>span{animation:mo-spin 1s linear infinite;display:block}

/* ── 팝업 ────────────────────────────────────────────── */
#motionapp .mo-pop{
  position:absolute;left:14px;right:14px;bottom:calc(100% + 10px);
  z-index:5;
  padding:16px 18px;
  border-radius:var(--mo-r-l);
  border:1px solid var(--mo-line2);
  background:linear-gradient(180deg,rgba(var(--mo-grey),.92),rgba(var(--mo-grey2),.86));
  backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:0 38px 76px -24px rgba(12,6,40,.75),inset 0 1px 0 var(--mo-edge2);
  max-height:min(64vh,var(--mo-popmax,520px));
  overflow:auto;overscroll-behavior:contain;
  animation:mo-pop .22s var(--mo-ease) backwards;
}
#motionapp .mo-pop[hidden]{display:none!important}
#motionapp .mo-pop-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 12px;
}
#motionapp .mo-pop-head strong{color:#171b22;font-size:13.5px;font-weight:900;line-height:1.4}
#motionapp .mo-pop-head small{color:var(--mo-dim);font-size:11.5px;line-height:1.6}
#motionapp .mo-pop-close{
  margin-left:auto;flex:none;
  width:var(--mo-h-round);height:var(--mo-h-round);border-radius:50%;
  border:1px solid #6c85a4;
  background:linear-gradient(180deg,#adbfd7,#8ba2c2);
  color:#14202e;font-family:inherit;font-size:16px;line-height:1;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 16px -7px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),color var(--mo-t),background var(--mo-t);
}
#motionapp .mo-pop-close:hover{color:#0d151f;background:linear-gradient(180deg,#8ba2c2,rgba(40,33,88,.9))}
#motionapp .mo-pop-close:active{box-shadow:inset 0 3px 8px rgba(40,44,52,.24)}

#motionapp .mo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;
}
#motionapp .mo-opt{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;
  border-radius:var(--mo-r-s);
  border:1px solid var(--mo-line);
  background:linear-gradient(180deg,#ccd8e6,#aebfd4);
  color:#14202e;font-family:inherit;text-align:left;
  cursor:pointer;
  box-shadow:0 8px 18px -9px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge),inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),background var(--mo-t);
}
#motionapp .mo-opt:hover{background:linear-gradient(180deg,#adbfd7,#8ba2c2);box-shadow:0 14px 26px -9px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3)}
#motionapp .mo-opt:active{box-shadow:inset 0 3px 8px rgba(40,44,52,.25)}
#motionapp .mo-opt.on{
  color:#0d151f;border-color:#5a7291;
  background:linear-gradient(180deg,#7f9fc6,#97b1d1);
  box-shadow:inset 0 3px 6px rgba(24,32,44,.24),inset 0 -1px 0 rgba(255,255,255,.28),0 1px 0 rgba(255,255,255,.5);
}
#motionapp .mo-opt>i{
  flex:none;width:36px;height:36px;border-radius:var(--mo-r-s);
  display:grid;place-items:center;
  border:1px solid var(--mo-line2);background:rgba(255,255,255,.1);
  color:#5a7291;font-style:normal;font-weight:900;font-size:11.5px;line-height:1;
}
#motionapp .mo-opt>span{display:grid;gap:3px;min-width:0}
#motionapp .mo-opt strong{color:#171b22;font-size:12.5px;font-weight:900;line-height:1.4}
#motionapp .mo-opt small{color:var(--mo-dim);font-size:11px;line-height:1.5}
#motionapp .mo-opt.on>i{background:rgba(255,255,255,.55);color:#2f3d52}
#motionapp .mo-opt.on strong{color:#0b1119}
#motionapp .mo-opt.on small{color:rgba(11,17,25,.72)}

/* 값 고르는 줄 */
#motionapp .mo-rows{display:grid;gap:14px}
#motionapp .mo-row{display:grid;gap:8px;min-width:0}
#motionapp .mo-row-head{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
#motionapp .mo-row-head strong{color:#171b22;font-size:12.5px;font-weight:900;line-height:1.4}
#motionapp .mo-row-head small{color:var(--mo-dim2);font-size:11px;line-height:1.6}
#motionapp .mo-row-head output{
  margin-left:auto;color:#5a7291;font-size:12px;font-weight:900;
  font-variant-numeric:tabular-nums;
}
#motionapp .mo-pills{display:flex;flex-wrap:wrap;gap:6px}
#motionapp .mo-pill{
  height:var(--mo-h-chip);min-height:var(--mo-h-chip);padding:0 14px;border-radius:999px;
  border:1px solid #7d92ae;
  background:linear-gradient(180deg,#b6c6dc,#93a8c6);
  color:#14202e;font-family:inherit;font-weight:800;font-size:11.5px;line-height:1;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 7px 15px -8px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3);
  transition:box-shadow var(--mo-t),color var(--mo-t),background var(--mo-t);
}
#motionapp .mo-pill:hover{color:#0d151f;background:linear-gradient(180deg,#adbfd7,#8ba2c2);box-shadow:0 11px 22px -8px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2),inset 0 -3px 0 rgba(48,56,70,.3)}
#motionapp .mo-pill:active{box-shadow:inset 0 3px 8px rgba(40,44,52,.24)}
#motionapp .mo-pill.on{
  color:#0d151f;border-color:#6c85a4;
  background:linear-gradient(180deg,#7f9fc6,#97b1d1);
  box-shadow:inset 0 3px 6px rgba(24,32,44,.24),inset 0 -1px 0 rgba(255,255,255,.28),0 1px 0 rgba(255,255,255,.5);
}
#motionapp .mo-pill:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}

#motionapp .mo-slider{
  width:100%;height:26px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;cursor:pointer;
}
#motionapp .mo-slider::-webkit-slider-runnable-track{
  height:5px;border-radius:999px;background:rgba(40,44,52,.18);
  box-shadow:inset 0 1px 3px rgba(40,44,52,.25);
}
#motionapp .mo-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-8px;border-radius:999px;
  border:1px solid hsl(var(--h) 45% 56%);
  background:linear-gradient(180deg,hsl(var(--h) 72% 68%),hsl(var(--h) 60% 48%));
  box-shadow:0 5px 12px -4px rgba(46,58,76,.8),inset 0 1px 0 rgba(255,255,255,.55);
}
#motionapp .mo-slider::-moz-range-track{height:5px;border-radius:999px;background:rgba(40,44,52,.18)}
#motionapp .mo-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:999px;border:1px solid hsl(var(--h) 70% 70%);
  background:hsl(var(--h) 62% 52%);
}

#motionapp .mo-area{
  width:100%;min-height:96px;resize:vertical;
  padding:12px 14px;
  border-radius:var(--mo-r-s);
  border:1px solid var(--mo-line2);
  background:rgba(206,213,225,.66);
  color:var(--mo-ink);font-family:inherit;font-size:13px;line-height:1.7;
  box-shadow:inset 0 2px 6px rgba(40,44,52,.20);
  box-sizing:border-box;
}
#motionapp .mo-area:focus{outline:2px solid hsl(var(--h) 65% 60%);outline-offset:1px}
#motionapp .mo-count{color:var(--mo-dim2);font-size:11px;font-weight:800;text-align:right}

#motionapp .mo-check{
  display:flex;align-items:flex-start;gap:9px;
  color:var(--mo-dim);font-size:11.5px;line-height:1.7;cursor:pointer;
}
#motionapp .mo-check input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:hsl(var(--h) 62% 58%)}

/* 파일 고르는 창 */
#motionapp .mo-tabs2{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
#motionapp .mo-lib{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;
}
#motionapp .mo-libitem{
  position:relative;padding:0;overflow:hidden;
  border-radius:var(--mo-r-s);
  border:1px solid var(--mo-line2);
  background:rgba(198,206,220,.78);
  cursor:pointer;
  box-shadow:0 10px 20px -10px rgba(40,44,52,.25),inset 0 1px 0 var(--mo-edge);
  transition:box-shadow var(--mo-t),border-color var(--mo-t);
}
#motionapp .mo-libitem:hover{border-color:#6c85a4;box-shadow:0 16px 28px -10px rgba(40,44,52,.28),inset 0 1px 0 var(--mo-edge2)}
#motionapp .mo-libitem:active{box-shadow:inset 0 3px 8px rgba(40,44,52,.25)}
#motionapp .mo-libitem video,#motionapp .mo-libitem img{
  width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#dfe4ec;
}
#motionapp .mo-libitem span{
  display:block;padding:8px 10px;
  color:#14202e;font-size:11px;font-weight:800;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;
}
#motionapp .mo-empty{
  grid-column:1/-1;
  padding:26px 14px;text-align:center;
  color:var(--mo-dim2);font-size:12px;line-height:1.8;
}

/* 참조 맵 넣는 칸 */
#motionapp .mo-maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
#motionapp .mo-map{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;
  border-radius:var(--mo-r-s);
  border:1px dashed rgba(255,255,255,.3);
  background:rgba(var(--mo-grey),.7);
  color:#14202e;font-family:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--mo-t),background var(--mo-t),box-shadow var(--mo-t);
}
#motionapp .mo-map:hover{border-color:#6c85a4;background:#a4b6ce;box-shadow:0 10px 20px -10px rgba(40,44,52,.25)}
#motionapp .mo-map.on{
  border-style:solid;border-color:#6c85a4;
  background:linear-gradient(180deg,#7f9fc6,#97b1d1);
  box-shadow:inset 0 3px 6px rgba(24,32,44,.24),inset 0 -1px 0 rgba(255,255,255,.28);
}
#motionapp .mo-map>i{flex:none;color:#5a7291;font-style:normal;font-size:16px}
#motionapp .mo-map>span{display:grid;gap:2px;min-width:0}
#motionapp .mo-map strong{color:#171b22;font-size:12px;font-weight:900;line-height:1.4}
#motionapp .mo-map.on>i{color:rgba(255,255,255,.95)}
#motionapp .mo-map.on strong{color:#0b1119}
#motionapp .mo-map.on small{color:rgba(11,17,25,.72)!important}
#motionapp .mo-map small{color:var(--mo-dim2);font-size:10.5px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 끌어다 놓는 동안 */
#motionapp .mo-drag{
  position:fixed;inset:var(--mo-top,150px) 0 0;
  z-index:40;display:grid;place-items:center;
  background:rgba(198,206,220,.78);backdrop-filter:blur(6px);
  pointer-events:none;
  animation:mo-fade .18s var(--mo-ease);
}
#motionapp .mo-drag[hidden]{display:none!important}
#motionapp .mo-drag>div{
  display:grid;gap:10px;justify-items:center;
  padding:34px 44px;
  border-radius:var(--mo-r-l);
  border:2px dashed #8cc2fb;
  background:rgba(var(--mo-grey),.94);
  backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 34px 66px -24px rgba(40,44,52,.28);
}
#motionapp .mo-drag strong{color:#fff;font-size:16px;font-weight:900}
#motionapp .mo-drag small{color:var(--mo-dim);font-size:12px}

@keyframes mo-rise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes mo-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:0}to{opacity:1}}
@keyframes mo-spin{to{transform:rotate(360deg)}}

/* 요소 교체: 왼쪽 원본 영상, 오른쪽에 요소·참조 두 칸 */
#motionapp .mo-pair2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
#motionapp .mo-col2{
  display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:14px;min-width:0;min-height:0;
}

@media (max-width:900px){
  #motionapp .mo-pair{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.15fr) minmax(0,1fr);gap:10px}
  #motionapp .mo-pair2{grid-template-rows:minmax(0,1.2fr) minmax(0,1fr)}
  #motionapp .mo-col2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:10px}
}
@media (max-width:640px){
  #motionapp .mo-view{padding:10px 12px}
  #motionapp .mo{padding:0 10px 10px}
  #motionapp .mo-bar{padding:10px;border-radius:18px}
  #motionapp .mo-pop{left:10px;right:10px;padding:14px}
  #motionapp .mo-viewbtns{right:12px;top:10px}
  #motionapp .mo-tport{width:calc(100% - 24px);gap:8px;padding:0 10px 0 4px}
  #motionapp .mo-chip{font-size:11px;padding:0 11px}
  #motionapp .mo-grid{grid-template-columns:1fr}
  #motionapp .mo-go{margin-left:auto}
}

@media (prefers-reduced-motion:reduce){
  #motionapp *,#motionapp *::before,#motionapp *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ============================================================
   밝은 바탕은 '무대'가 아니라 '페이지'가 깔아야 한다.
   무대만 밝게 하면 그 아래 바가 앉는 자리는 여전히 어두워서
   유리판이 그냥 어두운 판으로 보인다(실측).
   ============================================================ */
body.mo-page{
  background:
    radial-gradient(70% 46% at 10% 6%,hsl(214 14% 68% / .85),transparent 62%),
    radial-gradient(64% 44% at 92% 10%,hsl(200 13% 70% / .8),transparent 60%),
    radial-gradient(58% 44% at 62% 98%,hsl(220 12% 66% / .78),transparent 64%),
    linear-gradient(180deg,#8f949d,#82878f 58%,#767a83)!important;
  color:#171b22;
}
body.mo-page::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.16) 0 2px,transparent 2px 9px);
  opacity:.5;
}

/* 이 화면에서는 옛 작업실 껍데기를 통째로 접는다 */
body.mo-page .ws-topline,
body.mo-page .ws-mode-tabs,
body.mo-page .ws-project-rail{display:none!important}
body.mo-page .ws-shell{padding:0!important;max-width:none!important;margin:0!important}
body.mo-page .ws-layout{display:block!important;gap:0!important}

/* ============================================================
   유리 단추 (v320)
   ------------------------------------------------------------
   운영자: "단추들을 투명한 유리 같은 느낌으로 안 되나?"

   유리로 보이려면 세 가지가 같이 있어야 한다.
     1) 뒤가 비친다      → 반투명 + backdrop-filter
     2) 윗면에 빛이 돈다 → 위쪽 밝은 선 + 위 절반에 얹힌 옅은 광택
     3) 두께가 있다      → 아래쪽 안쪽 반사 + 바깥 그림자

   셋 중 하나만 빠져도 그냥 '흐린 판'이 된다.
   이 묶음은 파일 맨 끝에 둔다 — 앞의 색 규칙을 덮어야 하기 때문이다.
   ============================================================ */
#motionapp .mo-chip,
#motionapp .mo-pill,
#motionapp .mo-round,
#motionapp .mo-btn,
#motionapp .mo-mini,
#motionapp .mo-vb,
#motionapp .mo-pop-close,
#motionapp .mo-fchip,
#motionapp .mo-opt,
#motionapp .mo-map,
#motionapp .mo-tplay{
  position:relative;
  isolation:isolate;
  border-color:rgba(255,255,255,.62);
  background:
    linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.1) 48%,rgba(255,255,255,.3)),
    rgba(var(--mo-blue),.32);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:
    0 10px 22px -10px rgba(18,24,32,.5),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -9px 16px -11px rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(255,255,255,.16);
}
/* 윗면 광택 — 유리에 하늘이 비친 자리 */
#motionapp .mo-chip::before,
#motionapp .mo-pill::before,
#motionapp .mo-round::before,
#motionapp .mo-btn::before,
#motionapp .mo-mini::before,
#motionapp .mo-vb::before,
#motionapp .mo-pop-close::before,
#motionapp .mo-run::before,
#motionapp .mo-tplay::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:7%;right:7%;top:1px;height:44%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));
}
#motionapp .mo-opt::before,
#motionapp .mo-map::before,
#motionapp .mo-fchip::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:4px;right:4px;top:1px;height:40%;
  border-radius:var(--mo-r-s);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));
}

#motionapp .mo-chip:hover,
#motionapp .mo-pill:hover,
#motionapp .mo-round:hover,
#motionapp .mo-btn:hover:not(:disabled),
#motionapp .mo-mini:hover,
#motionapp .mo-vb:hover,
#motionapp .mo-pop-close:hover,
#motionapp .mo-opt:hover,
#motionapp .mo-map:hover{
  border-color:rgba(255,255,255,.85);
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.18) 48%,rgba(255,255,255,.38)),
    rgba(var(--mo-blue),.42);
  box-shadow:
    0 14px 28px -10px rgba(18,24,32,.55),
    inset 0 1px 0 #fff,
    inset 0 -9px 16px -11px rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(255,255,255,.24);
}
/* 누르면 유리가 쑥 들어간다 */
#motionapp .mo-chip:active,
#motionapp .mo-pill:active,
#motionapp .mo-round:active,
#motionapp .mo-btn:active:not(:disabled),
#motionapp .mo-mini:active,
#motionapp .mo-vb:active,
#motionapp .mo-pop-close:active,
#motionapp .mo-opt:active,
#motionapp .mo-map:active{
  box-shadow:
    inset 0 4px 9px rgba(18,26,38,.4),
    inset 0 -1px 0 rgba(255,255,255,.5),
    0 1px 0 rgba(255,255,255,.5);
}

/* 고른 것 — 같은 유리인데 색을 머금고 눌려 있다 */
#motionapp .mo-chip.on,
#motionapp .mo-pill.on,
#motionapp .mo-round.on,
#motionapp .mo-seg button.on,
#motionapp .mo-opt.on,
#motionapp .mo-map.on{
  border-color:rgba(255,255,255,.72);
  background:
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.04) 52%,rgba(255,255,255,.2)),
    rgba(var(--mo-blue),.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:
    inset 0 3px 8px rgba(16,24,36,.34),
    inset 0 -1px 0 rgba(255,255,255,.45),
    0 1px 0 rgba(255,255,255,.5);
}
#motionapp .mo-seg button.on::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:8%;right:8%;top:1px;height:40%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));
}
#motionapp .mo-seg button{position:relative;isolation:isolate}

/* 실행 · 재생 — 더 깊은 유리. 흰 화살표가 또렷해야 하는 자리다. */
#motionapp .mo-run,
#motionapp .mo-tplay{
  border-color:rgba(255,255,255,.5);
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.04) 46%,rgba(255,255,255,.16)),
    rgba(46,70,102,.88);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:
    0 14px 28px -10px rgba(14,20,28,.62),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -9px 16px -11px rgba(255,255,255,.4);
}
#motionapp .mo-run:hover:not(:disabled),
#motionapp .mo-tplay:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 46%,rgba(255,255,255,.22)),
    rgba(56,84,120,.92);
}
#motionapp .mo-run:active:not(:disabled),
#motionapp .mo-tplay:active{
  box-shadow:inset 0 5px 11px rgba(10,16,24,.6),inset 0 -1px 0 rgba(255,255,255,.4);
}
#motionapp .mo-btn.key{
  border-color:rgba(255,255,255,.5);
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.04) 46%,rgba(255,255,255,.16)),
    rgba(46,70,102,.88);
  color:#fff;
}

/* 유리를 못 쓰는 브라우저에서는 불투명하게 — 글자가 안 읽히면 안 된다 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #motionapp .mo-chip,#motionapp .mo-pill,#motionapp .mo-round,#motionapp .mo-btn,
  #motionapp .mo-mini,#motionapp .mo-vb,#motionapp .mo-pop-close,#motionapp .mo-fchip,
  #motionapp .mo-opt,#motionapp .mo-map{background:linear-gradient(180deg,#c2cfe0,#a4b6ce)}
  #motionapp .mo-chip.on,#motionapp .mo-pill.on,#motionapp .mo-round.on,
  #motionapp .mo-seg button.on,#motionapp .mo-opt.on,#motionapp .mo-map.on{
    background:linear-gradient(180deg,#7f9fc6,#97b1d1)}
  #motionapp .mo-run,#motionapp .mo-tplay,#motionapp .mo-btn.key{
    background:linear-gradient(180deg,#5f80a8,#3a5679)}
}

/* ============================================================
   유리 두께 더 (v330) + 위쪽 띠도 유리로
   ============================================================ */
/* 유리는 '가장자리에서 빛이 꺾인다'. 위 모서리 흰 선, 아래 안쪽 반사,
   그리고 테두리 한 겹을 더 얹어야 두께가 생긴다. */
#motionapp .mo-chip,
#motionapp .mo-pill,
#motionapp .mo-round,
#motionapp .mo-btn,
#motionapp .mo-mini,
#motionapp .mo-vb,
#motionapp .mo-pop-close,
#motionapp .mo-fchip,
#motionapp .mo-opt,
#motionapp .mo-map{
  box-shadow:
    0 14px 26px -12px rgba(14,20,28,.6),
    0 3px 6px -3px rgba(14,20,28,.35),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(255,255,255,.42),
    inset -1px 0 0 rgba(255,255,255,.42),
    inset 0 -11px 18px -12px rgba(255,255,255,.9),
    inset 0 12px 20px -16px rgba(14,20,28,.5);
}
/* 아래쪽 반사 — 유리 밑면에 바닥이 비친다 */
#motionapp .mo-chip::after,
#motionapp .mo-pill::after,
#motionapp .mo-round::after,
#motionapp .mo-btn::after,
#motionapp .mo-mini::after,
#motionapp .mo-vb::after,
#motionapp .mo-run::after,
#motionapp .mo-tplay::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  left:12%;right:12%;bottom:1px;height:28%;
  border-radius:999px;
  background:linear-gradient(0deg,rgba(255,255,255,.5),rgba(255,255,255,0));
}
#motionapp .mo-chip::before,
#motionapp .mo-pill::before,
#motionapp .mo-round::before,
#motionapp .mo-btn::before,
#motionapp .mo-mini::before,
#motionapp .mo-vb::before,
#motionapp .mo-pop-close::before,
#motionapp .mo-run::before,
#motionapp .mo-tplay::before{
  left:5%;right:5%;height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.12) 70%,rgba(255,255,255,0));
}
#motionapp .mo-chip.on,
#motionapp .mo-pill.on,
#motionapp .mo-round.on,
#motionapp .mo-seg button.on,
#motionapp .mo-opt.on,
#motionapp .mo-map.on{
  box-shadow:
    inset 0 4px 10px rgba(12,20,32,.4),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1.5px 0 rgba(255,255,255,.55),
    inset 0 -9px 14px -12px rgba(255,255,255,.7),
    0 1px 0 rgba(255,255,255,.6);
}
#motionapp .mo-run,
#motionapp .mo-tplay{
  box-shadow:
    0 16px 30px -12px rgba(10,16,24,.72),
    0 3px 6px -3px rgba(10,16,24,.5),
    inset 0 1.5px 0 rgba(255,255,255,.75),
    inset 1px 0 0 rgba(255,255,255,.3),
    inset -1px 0 0 rgba(255,255,255,.3),
    inset 0 -11px 18px -12px rgba(255,255,255,.55);
}

/* ── 위쪽 띠도 유리로 ────────────────────────────────────── */
body.mo-page.ws-page .site-nav{
  background:
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 52%,rgba(255,255,255,.22))
    ,rgba(191,191,191,.5)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6)!important;
  border-bottom:1px solid rgba(255,255,255,.5)!important;
  box-shadow:0 10px 26px -14px rgba(14,20,28,.5),inset 0 1.5px 0 rgba(255,255,255,.9);
}
body.mo-page.ws-page .site-nav .nav-links a{color:#2a303a!important}
body.mo-page.ws-page .site-nav .nav-links a:hover,
body.mo-page.ws-page .site-nav .nav-links a.active{color:#0d151f!important}
body.mo-page.ws-page .site-nav .brand{color:#171b22!important}
body.mo-page.ws-page .site-nav .company-logo{filter:invert(1) brightness(.35)}
body.mo-page.ws-page .site-nav .menu-button{color:#171b22!important}
body.mo-page.ws-page .site-nav .nav-pill,
body.mo-page.ws-page .site-nav .button{
  position:relative;isolation:isolate;
  border:1px solid rgba(255,255,255,.62)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.1) 48%,rgba(255,255,255,.3)),
    rgba(117,150,190,.32)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6);
  color:#14202e!important;
  box-shadow:
    0 12px 22px -12px rgba(14,20,28,.55),
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 0 -10px 16px -12px rgba(255,255,255,.85);
}
body.mo-page.ws-page .site-nav .nav-pill.primary,
body.mo-page.ws-page .site-nav .button.primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.04) 46%,rgba(255,255,255,.16)),
    rgba(46,70,102,.9)!important;
  border-color:rgba(255,255,255,.5)!important;color:#fff!important;
}
/* 스크립트가 얹는 크레딧·역할 칩도 같은 벌로 */
body.mo-page.ws-page .site-nav [class*="credit"],
body.mo-page.ws-page .site-nav [class*="role"]{
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.1) 48%,rgba(255,255,255,.28)),
    rgba(117,150,190,.3)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  backdrop-filter:blur(14px) saturate(1.6)!important;
  border-color:rgba(255,255,255,.6)!important;
  color:#14202e!important;
  box-shadow:0 12px 22px -12px rgba(14,20,28,.5),inset 0 1.5px 0 rgba(255,255,255,1)!important;
}
body.mo-page.ws-page .site-nav [class*="credit"] b,
body.mo-page.ws-page .site-nav [class*="credit"] strong{color:#0d151f!important}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.mo-page.ws-page .site-nav{background:#c6cad0!important}
}

/* 나브 안 링크 상자도 유리로 — 여기가 어두우면 글자가 안 읽힌다 */
body.mo-page.ws-page .site-nav .nav-links{
  border:1px solid rgba(255,255,255,.55)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.06) 50%,rgba(255,255,255,.24)),
    rgba(191,191,191,.42)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.5);
  backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.5),
    0 8px 18px -10px rgba(14,20,28,.45)!important;
}
body.mo-page.ws-page .site-nav .nav-links>a{color:#2a303a!important}
body.mo-page.ws-page .site-nav .nav-links>a:hover{color:#0d151f!important;background:rgba(255,255,255,.5)!important}
body.mo-page.ws-page .site-nav .nav-links>a.active{
  color:#0d151f!important;
  border-color:rgba(255,255,255,.7)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.04) 52%,rgba(255,255,255,.2)),
    rgba(117,150,190,.8)!important;
  box-shadow:inset 0 3px 8px rgba(16,24,36,.32),inset 0 -1px 0 rgba(255,255,255,.5)!important;
}

/* ── 팝업도 밝은 화면에 맞춘다 (2026-08-22) ────────────────
   작업 화면은 mo- 팔레트로 밝게 갈아입혔는데, 생성 확인·보관함·모델 선택
   세 팝업만 옛 어두운 색(motion.html 안 인라인 CSS)이 그대로 남아 있었다.
   밝은 판에서 새까만 창이 튀어나와 다른 사이트처럼 보였다.
   여기서 다시 칠한다 — 파일이 뒤에 실려 인라인 규칙을 이긴다. */
body.mo-page .ws-modal-backdrop{
  background:rgba(120,126,136,.55)!important;
  backdrop-filter:blur(14px) saturate(.9)!important;
}
body.mo-page .ws-modal-dialog{
  background:linear-gradient(180deg,#f7f9fc,#eef2f7 78%)!important;
  border:1px solid rgba(22,50,79,.14)!important;
  color:#171b22!important;
  box-shadow:0 30px 90px rgba(20,30,45,.35)!important;
}
body.mo-page .ws-modal-dialog h2,
body.mo-page .ws-modal-dialog h3,
body.mo-page .ws-modal-dialog strong,
body.mo-page .ws-modal-dialog b,
body.mo-page .ws-modal-dialog p,
body.mo-page .ws-modal-dialog span,
body.mo-page .ws-modal-dialog small,
body.mo-page .ws-modal-dialog label{color:#171b22!important}
body.mo-page .ws-modal-dialog small{opacity:.72}
/* 미리보기 칸·통계줄·카드는 흰 판 위 옅은 회색으로 */
body.mo-page .ws-modal-preview,
body.mo-page .ws-modal-dialog .ws-card,
body.mo-page .ws-modal-stats span,
body.mo-page .ws-model-option{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(22,50,79,.12)!important;
  color:#171b22!important;
}
body.mo-page .ws-model-option:hover{border-color:rgba(47,98,173,.45)!important}
body.mo-page .ws-model-option.is-active,
body.mo-page .ws-model-option[aria-pressed="true"]{
  border-color:#2f62ad!important;background:rgba(47,98,173,.1)!important;
}
/* 영상·이미지 칸은 검은 바탕이 맞다 — 그대로 둔다 */
body.mo-page .ws-modal-preview video,
body.mo-page .ws-modal-preview img,
body.mo-page .ws-result-video{background:#0b1119!important}
/* 단계 표시줄 01~04 */
body.mo-page .ws-modal-steps span{color:#5b6675!important}
body.mo-page .ws-modal-steps span.is-done{color:#2f62ad!important}
body.mo-page .ws-modal-steps span.active{color:#16324f!important;font-weight:800}