/* ============================================================
   만드는 중 화면 — 밝은 물방울 v1170

   생성이 도는 동안 뜨는 것들(진행 막대, 결과 창, 안내 줄)만 모았다.
   이 부분들은 아직 어두운 색으로 짜여 있어서, 밝아진 화면 한가운데에
   검은 판이 떠 있고 그 위 글자는 어두운 판 기준이라 잘 안 보였다.

   손대는 곳
     · 모션 전이 · 요소 교체 : #motion-job-meter, .ws-modal(생성 결과 창)
     · 미디어아트           : .mc-gauge, .mc-note
     · 공용 진행 막대는 arife-unified-v400 에서 이미 밝게 바꿨다

   `:not(#nope):not(#_):not(#_)` 은 아이디 세 개 값을 만드는 장치이고
   아이디를 실제로 쓰지 않으므로 아무 요소도 놓치지 않는다.
   페이지 안쪽 <style> 이 `html body.ws-page …` 로 꽤 무겁게 적혀 있어
   이만큼은 필요하다.
   ============================================================ */

/* ── 모션 전이 : 생성 결과 창 ─────────────────────────── */
html body:not(#nope):not(#_):not(#_) .ws-modal-backdrop{
  /* 반투명하면 뒤에 판이 있는 자리와 없는 자리가 다르게 비쳐
     세로 경계선이 생긴다(실측). 고르게 덮는다. */
  background:radial-gradient(120% 100% at 50% 34%,#eef3fb,#ccd9ec 68%,#bccbe4)!important;
  backdrop-filter:blur(18px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.06)!important;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-dialog{
  border:1px solid rgba(255,255,255,.85)!important;
  border-radius:26px!important;
  background:linear-gradient(160deg,#fbfdff,#e9f0fa 62%,#dee8f7)!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(163,197,240,.45),
    0 30px 62px -26px rgba(18,45,88,.5)!important;
  color:#16324f!important;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-head{
  border-bottom:1px solid rgba(150,185,230,.4)!important;background:transparent!important;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-head small{color:#4d76ad!important}
html body:not(#nope):not(#_):not(#_) .ws-modal-head h2{color:#16324f!important;font-weight:800}
html body:not(#nope):not(#_):not(#_) .ws-modal-head p{color:#4a6380!important}
html body:not(#nope):not(#_):not(#_) .ws-modal-body{background:transparent!important;color:#16324f!important}
html body:not(#nope):not(#_):not(#_) .ws-modal-dialog .ws-close{
  width:40px!important;height:40px!important;
  border:0!important;border-radius:50%!important;
  background:radial-gradient(92% 58% at 50% 4%,#fff,rgba(255,255,255,.82) 40%,rgba(255,255,255,.68))!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 10px 18px -12px rgba(20,40,80,.5)!important;
  color:#244d8a!important;filter:none!important;
}

/* 결과 영상 자리 — 여기는 어두운 채로 둔다(영상이 대부분 어둡다) */
html body:not(#nope):not(#_):not(#_) .ws-result-video{
  border-radius:16px!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.5),0 14px 26px -18px rgba(20,45,90,.5)!important;
}
html body:not(#nope):not(#_):not(#_) .ws-review-empty{
  border:2px dashed rgba(120,170,235,.55)!important;border-radius:18px!important;
  background:rgba(255,255,255,.55)!important;color:#4a6380!important;
}
html body:not(#nope):not(#_):not(#_) .ws-review-empty i{color:#3f7fd6!important}
html body:not(#nope):not(#_):not(#_) .ws-review-empty strong{color:#3d5f88!important}

/* ── 모션 전이 : 진행 막대 ────────────────────────────── */
html body:not(#nope):not(#_):not(#_) #motion-job-meter{
  margin-top:12px!important;padding:14px 16px!important;
  border:0!important;border-radius:18px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 12px 22px -18px rgba(20,45,90,.5)!important;
}
html body:not(#nope):not(#_):not(#_) #motion-job-meter .ws-job-track,
html body:not(#nope):not(#_):not(#_) #motion-job-meter .ws-meter-track,
html body:not(#nope):not(#_):not(#_) #motion-job-meter [data-arife-job-track]{
  height:10px!important;border-radius:999px!important;
  background:rgba(214,228,246,.9)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.55),inset 0 2px 4px rgba(30,60,110,.1)!important;
}
html body:not(#nope):not(#_):not(#_) #motion-job-meter [data-arife-job-bar]{
  background:linear-gradient(90deg,#7fb4f4,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.75)!important;
}
html body:not(#nope):not(#_):not(#_) #motion-job-meter [data-arife-job-percent]{color:#1d4b8c!important}
html body:not(#nope):not(#_):not(#_) #motion-job-meter [data-arife-job-elapsed]{color:#6f89a6!important}

/* 다 됐을 때 — 초록으로 바뀌고 한 번 훑고 지나간다 */
html body:not(#nope):not(#_):not(#_) #motion-job-meter.is-complete{
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(120,205,170,.85),
    0 12px 24px -16px rgba(30,130,100,.5)!important;
}
html body:not(#nope):not(#_):not(#_) #motion-job-meter.is-complete [data-arife-job-bar]{
  background:linear-gradient(90deg,#59c79c,#3aa87f 60%,#59c79c)!important;
}

/* ── 미디어아트 : 진행 막대와 안내 줄 ─────────────────── */
html body:not(#nope):not(#_):not(#_) #mediaart .mc-gauge{
  height:10px!important;border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.6),inset 0 2px 4px rgba(30,60,110,.1)!important;
}
html body:not(#nope):not(#_):not(#_) #mediaart .mc-gauge i{
  background:linear-gradient(90deg,#7fb4f4,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.75)!important;
}
html body:not(#nope):not(#_):not(#_) #mediaart .mc-gauge::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)!important;
}
/* 안내 줄은 상자가 아니라 글줄이다. 어두운 판을 전제로 그림자를 깔아 두어
   밝은 바탕에서는 글자가 지저분해 보였다. 그림자를 걷고 색만 바꾼다. */
html body:not(#nope):not(#_):not(#_) #mediaart .mc-note{
  text-shadow:none!important;color:#4a6380!important;
}
html body:not(#nope):not(#_):not(#_) #mediaart .mc-note b{color:#1d4b8c!important}


/* ── 창 안쪽 조각들 ───────────────────────────────────
   판만 밝게 하면 그 안의 단계 표시·미리보기 칸이 검은 타일로 남는다.
   실제로 그렇게 나왔다 — 밝은 판 한가운데 검은 네모 넷. */
html body:not(#nope):not(#_):not(#_) [data-motion-modal-step]{
  min-height:44px!important;
  border:0!important;border-radius:14px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.55)!important;
  color:#5d7893!important;font-size:11px!important;
}
html body:not(#nope):not(#_):not(#_) [data-motion-modal-step].active{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 10px 18px -12px rgba(30,80,160,.85)!important;
  color:#fff!important;
}
html body:not(#nope):not(#_):not(#_) [data-motion-modal-step].is-complete{
  background:rgba(226,246,238,.95)!important;
  box-shadow:inset 0 0 0 1px rgba(120,205,170,.8)!important;
  color:#2b7c5f!important;
}

/* 미리보기 칸 — 테두리만 밝게, 그림 자리는 어두운 채로 */
html body:not(#nope):not(#_):not(#_) .ws-modal-preview{
  border:0!important;border-radius:16px!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.6),0 12px 22px -18px rgba(20,45,90,.5)!important;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-preview>figcaption,
html body:not(#nope):not(#_):not(#_) .ws-modal-preview>span:last-child{color:#4a678c!important}

/* 숫자 칸(사용 구간 · 동작 추종 …) */
html body:not(#nope):not(#_):not(#_) .ws-modal-stats>*{
  border:0!important;border-radius:14px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.55)!important;
  color:#16324f!important;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-stats small,
html body:not(#nope):not(#_):not(#_) .ws-modal-stats span{color:#6f89a6!important}
html body:not(#nope):not(#_):not(#_) .ws-modal-stats strong,
html body:not(#nope):not(#_):not(#_) .ws-modal-stats b{color:#1d4b8c!important}

/* 아래 단추 줄 */
html body:not(#nope):not(#_):not(#_) .ws-modal-actions .ws-btn{
  border:0!important;border-radius:16px!important;
  background:radial-gradient(96% 60% at 50% 2%,#fff,rgba(255,255,255,.86) 44%,rgba(246,250,255,.78))!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 10px 18px -14px rgba(20,45,90,.55)!important;
  color:#1b3e6b!important;font-weight:800;filter:none!important;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-actions .ws-btn.ws-btn-main,
html body:not(#nope):not(#_):not(#_) .ws-modal-actions .ws-btn.primary{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 14px 24px -14px rgba(30,80,160,.85)!important;
  color:#fff!important;
}

/* 비어 있는 미리보기 칸과 진행 글줄.
   그림이 들어오기 전에는 어두운 판 위에 어두운 글씨라 이름이 안 보였다. */
html body:not(#nope):not(#_):not(#_) .ws-modal-preview,
html body:not(#nope):not(#_):not(#_) .ws-modal-preview>span{
  background:rgba(255,255,255,.66)!important;
  color:#4a678c!important;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-preview video,
html body:not(#nope):not(#_):not(#_) .ws-modal-preview img{
  background:#0b1220!important;border-radius:12px!important;
}
html body:not(#nope):not(#_):not(#_) #motion-modal-progress-label{
  border-radius:14px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.55)!important;
  color:#3d5f88!important;
}

/* 권리 동의 줄 — 생성 시작 바로 위 */
html body:not(#nope):not(#_):not(#_) .ws-modal-consent{
  display:flex;align-items:center;gap:10px;
  margin:14px 0 0;padding:13px 15px;
  border-radius:16px;
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.6);
  color:#3d5f88;font-size:12.5px;line-height:1.55;cursor:pointer;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-consent input{
  appearance:none;-webkit-appearance:none;
  position:relative;flex:0 0 22px;width:22px;height:22px;margin:0;
  border:0;border-radius:8px;cursor:pointer;
  background:#fff;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.8);
  transition:background .15s ease,box-shadow .15s ease;
}
html body:not(#nope):not(#_):not(#_) .ws-modal-consent input:checked{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9);
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8);
}
html body:not(#nope):not(#_):not(#_) .ws-modal-consent input:checked::after{
  content:'';position:absolute;left:7px;top:3px;
  width:6px;height:11px;border:2.4px solid #fff;border-top:0;border-left:0;
  border-radius:1px;transform:rotate(42deg);
}
html body:not(#nope):not(#_):not(#_) .ws-modal-actions .ws-btn:disabled{
  opacity:.55!important;cursor:not-allowed!important;filter:saturate(.6)!important;
}
html body:not(#nope):not(#_):not(#_) #motion-modal-download[hidden]{display:none!important}
html body:not(#nope):not(#_):not(#_) .ws-modal-progress[hidden]{display:none!important}


/* ── 보관함·샘플 고르는 창 v1220 ──────────────────────
   두 창 모두 아직 어두운 판이라, 밝은 화면 위에 검은 상자로 떠 있고
   그 안 글자는 어두운 판 기준이라 거의 안 보였다(실측). */

/* 내 작업 불러오기 · 보관함에서 고르기 (모션 전이) */
html body:not(#nope):not(#_):not(#_) #motionapp .mo-libitem{
  border:0!important;border-radius:18px!important;
  background:radial-gradient(96% 60% at 50% 2%,#fff,rgba(255,255,255,.88) 44%,rgba(246,250,255,.8))!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 12px 22px -16px rgba(20,45,90,.55)!important;
  color:#16324f!important;filter:none!important;
}
html body:not(#nope):not(#_):not(#_) #motionapp .mo-libitem:hover{
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(140,185,245,.9),
    0 20px 30px -18px rgba(20,45,90,.62)!important;
}
html body:not(#nope):not(#_):not(#_) #motionapp .mo-libitem :is(video,img){
  border-radius:12px!important;background:#0b1220!important;
}
html body:not(#nope):not(#_):not(#_) #motionapp .mo-libitem span{color:#3d5f88!important}
html body:not(#nope):not(#_):not(#_) #motionapp .mo-empty{color:#4a6380!important}
html body:not(#nope):not(#_):not(#_) #motionapp .mo-maphint{color:#4a6380!important}
html body:not(#nope):not(#_):not(#_) #motionapp .mo-maplink{color:#2f6ec9!important}

/* 무료 샘플 영상 창 */
html body:not(#nope):not(#_):not(#_) .stock-video-modal{color:#16324f!important}
html body:not(#nope):not(#_):not(#_) .stock-video-modal::before,
html body:not(#nope):not(#_):not(#_) .stock-video-backdrop{
  background:radial-gradient(120% 100% at 50% 34%,#eef3fb,#ccd9ec 68%,#bccbe4)!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-dialog{
  border:1px solid rgba(255,255,255,.85)!important;border-radius:26px!important;
  background:linear-gradient(160deg,#fbfdff,#e9f0fa 62%,#dee8f7)!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(163,197,240,.45),
    0 30px 62px -26px rgba(18,45,88,.5)!important;
  color:#16324f!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-head h2{color:#16324f!important}
html body:not(#nope):not(#_):not(#_) .stock-video-head p,
html body:not(#nope):not(#_):not(#_) .stock-video-foot,
html body:not(#nope):not(#_):not(#_) .stock-video-results{color:#4a6380!important}
html body:not(#nope):not(#_):not(#_) .stock-video-head small{color:#4d76ad!important}
html body:not(#nope):not(#_):not(#_) .stock-video-dialog input[type="search"],
html body:not(#nope):not(#_):not(#_) .stock-video-dialog input[type="text"]{
  border:0!important;border-radius:14px!important;
  background:rgba(255,255,255,.85)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.6),inset 0 2px 5px rgba(30,60,110,.07)!important;
  color:#16324f!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-dialog button{
  border:0!important;border-radius:14px!important;
  background:rgba(255,255,255,.75)!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.55)!important;
  color:#1b3e6b!important;filter:none!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-dialog button.is-on,
html body:not(#nope):not(#_):not(#_) .stock-video-dialog button[aria-pressed="true"],
html body:not(#nope):not(#_):not(#_) .stock-video-dialog button.active{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 10px 18px -12px rgba(30,80,160,.85)!important;
  color:#fff!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-card,
html body:not(#nope):not(#_):not(#_) .stock-video-grid>*{
  border:0!important;border-radius:16px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.55)!important;
  color:#16324f!important;
}

/* 요소 교체 칸에 넣은 그림 */
html body:not(#nope):not(#_):not(#_) #motionapp .mo-cell-media img{
  width:100%;height:100%;object-fit:contain;display:block;border-radius:14px;
}


/* ── 내 작업 불러오기 v1240 ────────────────────────────
   창틀은 밝은데 그 안 카드만 예전 어두운 판이라, 흰 바탕 위에
   검은 상자가 떠 있고 제목·날짜 글자가 회색이라 거의 안 읽혔다(실측).
   카드도 같은 물방울로 맞춘다. */
html body:not(#nope):not(#_):not(#_) #motion-library-modal .ws-library-tools{
  color:#16324f!important;
}
html body:not(#nope):not(#_):not(#_) #motion-library-modal .ws-library-tabs button{
  border:0!important;border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.55)!important;
  color:#1b3e6b!important;filter:none!important;
}
html body:not(#nope):not(#_):not(#_) #motion-library-modal .ws-library-tabs button.active{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 10px 18px -12px rgba(30,80,160,.85)!important;
  color:#fff!important;
}
html body:not(#nope):not(#_):not(#_) #motion-library-count{color:#4a6380!important}

/* 이 창에는 카드 모양을 잡아 주는 규칙이 아예 실려 있지 않았다(실측:
   arife-motion-library-v112.css 는 motion.html 에 걸려 있지 않다).
   그래서 그림 칸에 높이가 없어 납작해지고, 제목과 단추가 한 줄에 뭉쳤다.
   색만 바꿔서는 안 되고 뼈대부터 여기서 세운다. */
html body:not(#nope):not(#_):not(#_) .motion-library-card{
  position:relative!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;
  border:0!important;border-radius:18px!important;overflow:hidden!important;
  background:radial-gradient(96% 60% at 50% 2%,#fff,rgba(255,255,255,.9) 44%,rgba(246,250,255,.82))!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 12px 22px -16px rgba(20,45,90,.55)!important;
  color:#16324f!important;filter:none!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-card:hover{
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(140,185,245,.9),
    0 20px 30px -18px rgba(20,45,90,.62)!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-card-media{
  position:relative!important;width:100%!important;height:132px!important;flex:none!important;
  display:grid!important;place-items:center!important;overflow:hidden!important;
  border-bottom:1px solid rgba(160,196,244,.45)!important;
  background:linear-gradient(180deg,#eaf1fb,#dbe6f6)!important;
}
/* 격자가 한 줄뿐일 때 카드가 세로로 늘어나 아래에 빈 판이 생겼다 */
html body:not(#nope):not(#_):not(#_) #motion-library-grid{
  align-content:start!important;grid-auto-rows:max-content!important;
}
/* 제목과 단추를 한 줄에 두면 카드가 좁아(190px) 제목이 '테스…' 로 잘린다.
   위아래로 나눈다 — 제목은 두 줄까지 보이고 단추는 통째로 넓어진다. */
html body:not(#nope):not(#_):not(#_) .motion-library-card-copy{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:9px!important;align-items:stretch!important;padding:11px 12px 12px!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-card-copy>div{min-width:0!important}
html body:not(#nope):not(#_):not(#_) .motion-library-card-copy strong{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
  overflow:hidden!important;white-space:normal!important;line-height:1.35!important;
  word-break:break-all!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-card-copy small{
  display:block!important;overflow:hidden!important;
  text-overflow:ellipsis!important;white-space:nowrap!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-card-copy small{margin-top:5px!important;font-size:11px!important}
/* 아래쪽 검은 그림자 띠 — 밝은 카드에서는 얼룩으로만 보인다 */
html body:not(#nope):not(#_):not(#_) .motion-library-card-media:after{display:none!important}
html body:not(#nope):not(#_):not(#_) .motion-library-card-media :is(img,video){
  width:100%!important;height:100%!important;display:block!important;
  object-fit:contain!important;background:#0b1220!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-card-media>span{
  position:absolute!important;z-index:2!important;left:9px!important;top:9px!important;
  padding:5px 8px!important;border-radius:999px!important;
  font:800 10px/1 ui-monospace,Consolas,monospace!important;
  border:0!important;
  background:rgba(255,255,255,.86)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.7)!important;
  color:#2f6ec9!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-card-copy strong{color:#16324f!important;font-size:12.5px!important}
html body:not(#nope):not(#_):not(#_) .motion-library-card-copy small{color:#4a6380!important}
html body:not(#nope):not(#_):not(#_) .motion-library-use{
  width:100%!important;
  border:0!important;border-radius:999px!important;padding:9px 12px!important;
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 10px 18px -12px rgba(30,80,160,.85)!important;
  color:#fff!important;font-weight:800!important;filter:none!important;cursor:pointer!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-delete{
  position:absolute!important;z-index:3!important;right:9px!important;top:9px!important;
  width:26px!important;height:26px!important;display:grid!important;place-items:center!important;
  font-size:15px!important;line-height:1!important;cursor:pointer!important;
  border:0!important;border-radius:50%!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:inset 0 0 0 1px rgba(224,150,150,.8),0 6px 12px -8px rgba(90,20,20,.6)!important;
  color:#b4394a!important;filter:none!important;
}
html body:not(#nope):not(#_):not(#_) :is(.motion-library-empty,.motion-library-loading){
  grid-column:1/-1!important;min-height:230px!important;
  display:flex!important;flex-direction:column!important;
  align-items:center!important;justify-content:center!important;gap:10px!important;
  border-radius:18px!important;text-align:center!important;
  border:1px dashed rgba(150,186,236,.85)!important;
  background:rgba(255,255,255,.5)!important;color:#4a6380!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-empty strong{color:#16324f!important}
html body:not(#nope):not(#_):not(#_) .motion-library-empty p{color:#4a6380!important}
html body:not(#nope):not(#_):not(#_) .motion-library-empty i{
  border:0!important;
  background:linear-gradient(160deg,#eaf1fb,#cfe0f6)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.7)!important;
}
html body:not(#nope):not(#_):not(#_) .motion-library-empty a{
  border:0!important;
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:0 10px 18px -12px rgba(30,80,160,.85)!important;color:#fff!important;
}

/* ── 무료 샘플 영상 창 마무리 v1240 ────────────────────
   카드 안쪽(영상 자리·글자·배지)까지는 밝게 못 갔다. */
html body:not(#nope):not(#_):not(#_) .stock-video-media{
  border-radius:14px!important;
  background:linear-gradient(180deg,#eaf1fb,#dbe6f6)!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-media video{
  object-fit:cover!important;background:#0b1220!important;
}
html body:not(#nope):not(#_):not(#_) :is(.stock-video-badge,.stock-video-duration){
  border:0!important;
  background:rgba(255,255,255,.88)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.7)!important;
  color:#2f6ec9!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-copy strong{color:#16324f!important}
html body:not(#nope):not(#_):not(#_) .stock-video-copy small{color:#4a6380!important}
html body:not(#nope):not(#_):not(#_) .stock-video-use{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 10px 18px -12px rgba(30,80,160,.85)!important;
  color:#fff!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-source{
  background:rgba(255,255,255,.9)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.7)!important;
  color:#2f6ec9!important;border:0!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-state{
  border:1px dashed rgba(150,186,236,.85)!important;
  background:rgba(255,255,255,.5)!important;color:#4a6380!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-state strong{color:#16324f!important}
html body:not(#nope):not(#_):not(#_) .stock-video-progress{
  background:radial-gradient(120% 100% at 50% 34%,rgba(238,243,251,.94),rgba(204,217,236,.94) 68%)!important;
  color:#16324f!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-progress :is(strong,small){color:#16324f!important}
html body:not(#nope):not(#_):not(#_) .stock-video-foot a{color:#2f6ec9!important}


/* ── 무료 샘플 영상 창 뼈대 v1240 ──────────────────────
   실측: 모션 전이 화면에는 이 창의 전용 스타일(arife-stock-video-library.css)이
   실려 있지 않다. 영화 제작소에만 걸려 있다. 그래서 머리글은 검은 띠가 되고,
   배지·길이·제목·제공자가 한 줄에 뭉쳐 나왔다. 색만 바꿔서는 안 되고
   여기서 뼈대를 세운다. (영화 제작소는 이 파일을 안 쓰므로 영향이 없다.) */
html body:not(#nope):not(#_):not(#_) .stock-video-head{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;
  gap:18px!important;margin:0 0 14px!important;padding:0 44px 0 0!important;
  border:0!important;background:none!important;box-shadow:none!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-eyebrow{
  color:#2f6ec9!important;font:850 10.5px/1 ui-monospace,Consolas,monospace!important;
  letter-spacing:.16em!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-head h2{
  margin:8px 0 0!important;color:#16324f!important;font-size:21px!important;
  line-height:1.2!important;letter-spacing:-.03em!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-head p{
  margin:6px 0 0!important;color:#4a6380!important;font-size:11.5px!important;line-height:1.55!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-tools{
  display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:9px!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-search{
  display:flex!important;align-items:center!important;gap:8px!important;flex:1 1 320px!important;min-width:0!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-search>span{color:#7d9ab8!important;font-size:15px!important}
html body:not(#nope):not(#_):not(#_) .stock-video-search input{flex:1 1 auto!important;min-width:0!important;height:38px!important;padding:0 12px!important}
html body:not(#nope):not(#_):not(#_) .stock-video-search button{height:38px!important;padding:0 16px!important;flex:none!important}
html body:not(#nope):not(#_):not(#_) .stock-video-providers{display:flex!important;gap:6px!important;flex:none!important}
html body:not(#nope):not(#_):not(#_) .stock-video-providers button{height:38px!important;padding:0 13px!important;font-size:12px!important}
html body:not(#nope):not(#_):not(#_) .stock-video-results{margin-top:4px!important}

html body:not(#nope):not(#_):not(#_) .stock-video-card{
  position:relative!important;display:flex!important;flex-direction:column!important;
  gap:9px!important;padding:9px!important;overflow:hidden!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-media{
  position:relative!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-media video{
  width:100%!important;height:100%!important;display:block!important;border-radius:14px!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-badge{
  position:absolute!important;z-index:2!important;left:8px!important;top:8px!important;
  padding:4px 8px!important;border-radius:999px!important;
  font:800 10px/1 ui-monospace,Consolas,monospace!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-duration{
  position:absolute!important;z-index:2!important;right:8px!important;bottom:8px!important;
  padding:4px 8px!important;border-radius:999px!important;font:800 10px/1 inherit!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-source{
  position:absolute!important;z-index:3!important;right:14px!important;top:14px!important;
  width:26px!important;height:26px!important;display:grid!important;place-items:center!important;
  border-radius:50%!important;font-size:13px!important;text-decoration:none!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-copy{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-copy>div{min-width:0!important}
html body:not(#nope):not(#_):not(#_) .stock-video-copy strong{
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;
  overflow:hidden!important;font-size:12.5px!important;line-height:1.35!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-copy small{
  display:block!important;margin-top:5px!important;overflow:hidden!important;
  font-size:11px!important;text-overflow:ellipsis!important;white-space:nowrap!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-use{width:100%!important;height:36px!important;padding:0 12px!important;border-radius:999px!important;font-weight:800!important}
html body:not(#nope):not(#_):not(#_) .stock-video-more{width:100%!important;height:40px!important;margin-top:12px!important;border-radius:999px!important;font-weight:800!important}
html body:not(#nope):not(#_):not(#_) .stock-video-more[hidden]{display:none!important}
html body:not(#nope):not(#_):not(#_) .stock-video-state{
  grid-column:1/-1!important;min-height:210px!important;display:grid!important;place-items:center!important;
  border-radius:18px!important;padding:20px!important;text-align:center!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-state i{display:block!important;font-size:24px!important;font-style:normal!important}
html body:not(#nope):not(#_):not(#_) .stock-video-state strong{display:block!important;margin-top:10px!important;font-size:13px!important}
html body:not(#nope):not(#_):not(#_) .stock-video-state p{margin:8px auto 0!important;max-width:420px!important;font-size:11.5px!important;line-height:1.6!important}
html body:not(#nope):not(#_):not(#_) .stock-video-foot{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  flex-wrap:wrap!important;gap:8px!important;margin-top:14px!important;padding-top:12px!important;
  border-top:1px solid rgba(160,196,244,.5)!important;font-size:11px!important;line-height:1.6!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-progress{
  position:absolute!important;z-index:5!important;inset:0!important;
  display:grid!important;place-items:center!important;border-radius:26px!important;text-align:center!important;
}
html body:not(#nope):not(#_):not(#_) .stock-video-progress[hidden]{display:none!important}
html body:not(#nope):not(#_):not(#_) .stock-video-progress i{
  width:34px;height:34px;display:block;margin:0 auto 12px;border-radius:50%;
  border:3px solid rgba(90,140,210,.28);border-top-color:#2f6ec9;
  animation:ajp-spin .9s linear infinite;
}
html body:not(#nope):not(#_):not(#_) .stock-video-progress strong{display:block!important;font-size:13px!important}
html body:not(#nope):not(#_):not(#_) .stock-video-progress small{display:block!important;margin-top:6px!important;font-size:11px!important;color:#4a6380!important}
@keyframes ajp-spin{to{transform:rotate(1turn)}}