/* ============================================================
   ARIFE 마켓·기업 라이선스 색 맞추기 v1440

   왜 (라이브 실측 2026-08-07)
     기업 라이선스 화면의 '기업 계약 센터' 구슬이 보라였다.
       .enterprise-console-orb → rgba(140,125,255,.23)
     사이트는 파랑인데 저기만 보라라, 다른 서비스 화면 같아 보인다.

     한 군데만 고쳐도 되지만 뿌리를 보니 색을 변수로 뽑아 쓰고 있었다.
       arife-commerce-v1800.css
         --c-violet: #8c7dff
         --persona / --gold / --role-gold 까지 전부 그 보라를 가리킨다
     즉 이 보라는 마켓·기업 라이선스·판매 등록 세 화면 곳곳에 흩어져 있다.
     하나하나 덮는 것보다 변수를 바꾸는 편이 빠지는 곳이 없다.

   한 벌 더 필요한 까닭
     이 세 화면에는 콘솔 시트(arife-console-droplet-v1260)가 안 실려 있다.
     그 시트는 콘솔 전용 규칙이 많아 공개 화면에 통째로 얹으면 엉뚱한 데가
     바뀐다. 그래서 색만 따로 뽑아 얇은 시트로 둔다.

   글자 잘림도 여기서 같이 잡는다
     실측: 이 화면들의 큰 제목이 word-break:normal 이라, 좁아지면
     "기업의 다음 장 / 면으로." 처럼 낱말 중간이 끊긴다.
   ============================================================ */

/* ── 보라를 사이트 파랑으로 ─────────────────────────────
   변수는 :root 가 아니라 body 에 걸려 있다. 그런데 저쪽 선택자가
     body.arife-glass.enterprise-license-page.enterprise-v109.commerce-rental-v1800
   처럼 클래스를 다섯 개나 이어 붙여 무게가 (0,5,1) 이다(실측).
   클래스 하나로는 못 이긴다 — 가짜 아이디 둘로 확실히 올린다. */
html body:is(.commerce-rental-v1800,.commerce-sell-v1800,.commerce-market-v1800,.enterprise-license-page,.market-v225):not(#nope):not(#_){
  --c-violet:#2f6ec9;
  --c-violet-2:#5b9bec;
  --c-violet-soft:rgba(91,155,236,.13);
  /* 하늘색(#41d8ff)도 이 화면에서 튄다. --flow/--tone/--lime 이 이걸 본다. */
  --c-cyan:#2f6ec9;
  --c-cyan-2:#5b9bec;
  --c-cyan-soft:rgba(91,155,236,.13);
  --persona:#2f6ec9;
  --gold:#2f6ec9;
  --role-gold:#2f6ec9;
}

/* 변수를 안 거치고 직접 박아 둔 자리 — 기업 계약 센터 구슬 */
html body:not(#nope):not(#_):not(#__) .enterprise-console-orb{
  background:
    linear-gradient(145deg,rgba(91,155,236,.24),rgba(47,110,201,.16) 62%,rgba(255,255,255,.5))!important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 18px 34px -22px rgba(30,80,160,.6)!important;
}

/* ── 한글이 낱말 중간에서 끊기지 않게 ───────────────────
   콘솔 쪽에는 이미 걸어 뒀는데 이 세 화면에는 그 시트가 없어 빠져 있었다. */
html body:is(.commerce-rental-v1800,.commerce-sell-v1800,.commerce-market-v1800,.enterprise-license-page,.market-v225):not(#nope):not(#_)
  :is(main h1,main h2,main h3,main h4){
  word-break:keep-all!important;
  overflow-wrap:break-word;
  text-wrap:balance;
}


/* ── 마켓의 '기업 = 보라' 를 파랑 계열 안으로 ───────────
   이 보라는 잔재가 아니라 뜻이 있는 색이었다.
     arife-market-align-v2700.css
       기업 = 보라 (#8c7dff)  — 인증 기업 전용
       개인 = 하늘색 (#4fd3ea)
   색으로 가르는 설계 자체는 좋다. 다만 굳이 팔레트 밖 색을 쓸 까닭이
   없어서, 가르는 일은 그대로 두고 두 색만 파랑 계열 안으로 옮긴다.
     기업 = 짙은 남색   (묵직하고 공식적인 쪽)
     개인 = 밝은 파랑   (가볍고 즉시 사는 쪽)
   명도 차가 충분해서 나란히 놓아도 한눈에 갈린다.
   :root 에 걸린 변수라 :root 에서 덮는다 — 뒤에 오는 시트가 이긴다. */
:root{
  --mk-violet:#1f4f96;      /* 기업 · 인증 */
  --mk-cyan:#4f93e6;        /* 개인 · 즉시 구매 */
}

/* 변수를 안 거치고 보라를 직접 박아 둔 자리들 */
html body:not(#nope):not(#_):not(#__) .market-card .market-badge.contract{
  border-color:rgba(31,79,150,.45)!important;
  background:rgba(31,79,150,.12)!important;
  color:#1f4f96!important;
}
html body:not(#nope):not(#_):not(#__) .market-art-object{
  background:linear-gradient(145deg,#bcd6f6,#2f6ec9)!important;
}
html body:not(#nope):not(#_):not(#__) .mk-strip-v3700 i{
  background:linear-gradient(145deg,#a9cbf6,#2f6ec9)!important;
}


/* ============================================================
   미리보기 창 두 개 (라이브 실측 2026-08-07)
   ============================================================ */

/* ── ① 마켓 시트: 가짜 필름스트립 ───────────────────────
   영상 아래 색색 조각 여섯이 깔려 있었다. 장면 썸네일처럼 보이지만
   실제로는 그냥 색 블록이다(실측: rgba(95,214,245) 와 rgba(140,125,255)
   그라데이션이 번갈아 들어간 <i> 여섯 개). 게다가 보라는 팔레트 밖이다.
   옆의 00:00 / 00:45 눈금도 영상이 없으면 움직이지 않는다.

   없는 것을 있는 척하는 자리다. 길이는 바로 옆 스펙표에 '길이 45초' 로
   이미 적혀 있으니, 이 줄은 지운다. */
html body:not(#nope):not(#_):not(#__) .mk-timeline-v3800{ display:none!important }

/* ── ② 마켓 시트: 재생 자리가 검은 상자 ─────────────────
   창은 밝은데 그 안 재생 자리만 까맣다(실측: 두 겹 모두
   rgba(...) → rgba(0,0,0,...) 로 떨어지는 옛 어두운 판의 값).
   작품이 아직 없을 때 보이는 자리라 더 눈에 띈다. */
html body:not(#nope):not(#_):not(#__) .market-preview-stage{
  background:radial-gradient(112% 78% at 50% 8%,#fff,rgba(255,255,255,.86) 42%,rgba(238,244,253,.9))!important;
  box-shadow:inset 0 1.5px 1px -1px #fff,inset 0 0 0 1px rgba(160,196,244,.6)!important;
}
html body:not(#nope):not(#_):not(#__) .market-preview-stage .market-art{
  background:radial-gradient(circle at 50% 45%,rgba(91,155,236,.22),rgba(214,230,250,.5) 58%,rgba(255,255,255,0))!important;
}
html body:not(#nope):not(#_):not(#__) .market-preview-stage .market-art-ring{
  border-color:rgba(91,155,236,.45)!important;
}
/* 재생 단추는 밝은 판 위에 올라오므로 또렷하게.
   arife-market-v620 이 가짜 아이디 셋에 [data-glass-page] 와 클래스까지
   붙여 두어(실측) 셋으로는 못 이긴다 — 넷으로 올린다. */
html body:not(#nope):not(#_):not(#__):not(#___) .market-preview-play{
  background:linear-gradient(180deg,#5b9bec,#2f6ec9)!important;
  box-shadow:inset 0 1.5px 1px -1px rgba(255,255,255,.8),0 16px 26px -14px rgba(30,80,160,.9)!important;
  color:#fff!important;
}
/* 워터마크 표식은 이 창에서 뺀다.
   ① 판이 밝아지면서 흰 로고가 회색 덩어리로 남았다(뒤집어 봐도 마찬가지).
   ② 이제 미리보기 클립에는 표식이 화면에 구워져 나간다(v1350).
      영상 위에 또 얹을 까닭이 없다.
   ③ 오른쪽 설명에 '미리보기에는 보호용 워터마크가 적용됩니다' 라고
      이미 적혀 있다. */
html body:not(#nope):not(#_):not(#__) .market-preview-stage .market-watermark{
  display:none!important;
}

/* ── ③ 마켓 시트: 같은 말이 두 번 ───────────────────────
   스펙표의 '이용 범위 · 브랜드 프로젝트 1건' 바로 아래에 같은 문장이
   맨 <p> 로 한 번 더 있었다. 두 번 읽게 만들 까닭이 없다. */
html body:not(#nope):not(#_):not(#__)
  .market-preview-foot .mk-spec-v3800 + p{ display:none!important }

/* ── ④ 기업 미리보기: 머리띠 글자가 안 읽힘 ─────────────
   검은 띠 위에 짙은 회색 글자라 'LICENSE PREVIEW · WATERMARKED' 가
   거의 안 보였다. 워터마크가 걸려 있다는 것을 알리는 자리인데
   정작 그 말이 안 읽히면 알릴 수가 없다. */
html body:not(#nope):not(#_):not(#__) .enterprise-media-modal :is(.enterprise-media-tag,[class*=media-tag]),
html body:not(#nope):not(#_):not(#__) .enterprise-media-modal header span{
  color:rgba(255,255,255,.78)!important;
  letter-spacing:.14em!important;
}

/* ── ⑤ 기업 미리보기: 영상이 자리 안에서 어디에 놓이나 ──
   처음에는 '자리를 영상에 맞춰' 검은 여백을 없애려 했다. 그런데 그러면
   카드에 적힌 화면비(9:16 등)와 창에서 보이는 모양이 달라진다.
   사장님과 정한 것은 **작품 화면비를 지키는 쪽**이다 —
   자리는 그 작품의 화면비 그대로 두고, 영상만 가운데에 놓는다.
   지금 견본 넷이 모두 가로 데모 영상을 쓰는 탓에 9:16 작품에서
   위아래가 검게 남지만, 실제 작품이 올라오면 클립이 그 작품의 화면비로
   만들어지므로 저절로 맞는다.
   (규칙은 아래 ⑧ 한 벌로 모았다. 여기 있던 '자리를 영상에 맞추는'
    규칙은 그것과 반대라 지웠다 — 두 벌이 남아 있으면 나중에 어느 쪽이
    도는지 알 수 없게 된다.) */


/* ── ⑥ 마켓 시트: 왼쪽 아래가 텅 빈다 ───────────────────
   실측: 창 740 · 재생 자리 408 · 오른쪽 설명 624.
   높이를 정하는 것은 오른쪽인데 왼쪽은 408 에서 끝나, 그 아래 330px 이
   빈 자리로 남았다.
   늘려서 채우지는 않는다 — 재생 자리는 작품 화면비(16:9, 1:1 …)를 그대로
   지켜야 하고, 늘리면 그 모양이 찌그러진다. 대신 세로 가운데에 두어
   빈 자리를 위아래로 나눈다. 한쪽에만 몰려 있으면 빠뜨린 것처럼 보인다. */
html body:not(#nope):not(#_):not(#__) .market-preview-dialog{
  align-items:center!important;
}
/* 실측: 창의 세로 칸이 78 / 564 / 215 인 셋인데, 오른쪽 설명은 둘째·셋째를
   걸쳐 있고 재생 자리는 둘째에만 있다. 그래서 셋째 칸의 왼쪽(재생 자리
   아래)이 통째로 비었다. 재생 자리도 끝까지 걸치게 하고 그 안에서
   가운데에 둔다 — 크기는 그대로, 빈 자리만 위아래로 나뉜다. */
html body:not(#nope):not(#_):not(#__) .market-preview-stage{
  grid-row:2 / -1!important;
  align-self:center!important;
}


/* ── ⑦ 재생 자리 안의 '액자 속 액자' ─────────────────────
   실측: .market-preview-stage::before 가 456×456 짜리 상자를 43px 안쪽에
   그리고 있었다. 1px 테두리에 가운데를 가르는 세로 줄까지 들어 있어,
   판 안에 또 하나의 판이 있는 것처럼 보인다.
     border: 1px solid rgba(123,179,211,.18)
     background: linear-gradient(90deg, transparent 49.85%, rgba(121,176,207,…))
   어두운 판에서는 '촬영 구도선' 처럼 읽혔지만, 밝은 판에서는 그냥
   지우다 만 선으로 보인다. 지운다. */
html body:not(#nope):not(#_):not(#__) .market-preview-stage::before{
  display:none!important;
}

/* 안쪽 그림에 남아 있던 하늘·보라 얼룩도 파랑으로
   (실측: linear-gradient(145deg, rgba(65,216,255,.2), rgba(140,125,255,…))) */
html body:not(#nope):not(#_):not(#__) .market-preview-stage .market-art::before,
html body:not(#nope):not(#_):not(#__) .market-preview-stage .market-art::after{
  background:linear-gradient(145deg,rgba(91,155,236,.22),rgba(47,110,201,.14))!important;
  border-color:rgba(160,196,244,.4)!important;
}

/* ── ⑧ 기업 미리보기: 영상이 위로 붙는다 ────────────────
   실측: 세로(9:16) 작품 자리에 가로(16:9) 데모 영상이 들어가면 위에 붙고
   아래로 검은 자리가 길게 남는다. 반대(가로 자리에 세로 영상)도 마찬가지다.
   영상은 자리 한가운데 놓여야 한다. */
html body:not(#nope):not(#_):not(#__) .enterprise-media-stage,
html body:not(#nope):not(#_):not(#__) div:has(> [data-enterprise-media-video]){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
html body:not(#nope):not(#_):not(#__) [data-enterprise-media-video]{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  margin:auto!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
}


/* ── ⑨ 팝업 뒷배경이 짙은 남색이라 바깥이 갈라져 보인다 ──
   실측: 세 창의 뒷배경이 모두 rgba(16,46,104,.72) 짙은 남색이다.
     .market-preview-backdrop
     .enterprise-media-modal__backdrop
     .license-modal__backdrop

   왜 '양옆에 경계선' 이 생기나
     이 화면들은 가운데 정렬 레이아웃이라, 작품 격자는 화면 가운데
     1330px 안에만 있고 그 바깥은 몸통 배경이다(실측: x 6~270 과
     1854~2118 은 카드가 아니라 body 가 깔린다).
     평소에는 티가 안 나지만, 그 위에 짙은 남색을 72%로 덮으면 두 바탕의
     차이가 그대로 드러나 세로 띠처럼 보인다.
     게다가 몸통에는 radial-gradient(… rgba(162,172,185,.85) …) 회색 얼룩이
     왼쪽 위에 걸려 있어 한쪽만 더 어둡다.

   앞서 판매자 시작 창은 밝게 바꿨는데 이 셋은 빠져 있었다.
   밝은 톤으로 맞추고 흐림을 세게 줘서, 뒤에 무엇이 있든 한 겹으로
   뭉개지게 한다. 그러면 바탕이 갈리는 자리가 보이지 않는다. */
html body:not(#nope):not(#_):not(#__) :is(
  .market-preview-backdrop,
  .enterprise-media-modal__backdrop,
  .license-modal__backdrop,
  .enterprise-request-modal__backdrop
){
  /* 흐림(backdrop-filter)이 바로 그 경계선의 원인이었다.
     사장님 브라우저에서 하나씩 껐다 켜며 확인했다.
       흐림 켠 채로 덮는 힘 .94 → 양옆 세로선 그대로
       흐림만 끔               → 선이 깨끗이 사라짐
     크롬은 backdrop-filter 가 걸린 요소 뒤를 '한 덩어리'로 보고 거르는데,
     뒤에 깔린 것이 자리마다 다르면(가운데는 카드, 양옆은 몸통 바탕)
     걸러진 결과도 자리마다 달라져 그 이음매가 선으로 드러난다.
     흐림을 빼면 한 겹 색으로만 덮이므로 어디를 봐도 같다.
     뒤가 살짝 비치는 정도는 남겨 둔다 — 어느 화면 위에 떠 있는지는
     보이는 편이 낫다. */
  background:rgba(203,220,244,.94)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* 뒷배경이 밝아졌으니 창이 뜬 자리를 그림자로 또렷이 갈라 준다.
   안 그러면 밝은 판이 밝은 배경에 잠겨 어디까지가 창인지 흐려진다. */
html body:not(#nope):not(#_):not(#__) :is(
  .market-preview-dialog,
  .enterprise-media-modal__dialog,
  .license-modal__dialog
){
  box-shadow:
    0 40px 90px -40px rgba(20,45,90,.55),
    0 0 0 1px rgba(160,196,244,.55)!important;
}


/* ── ⑩ 창은 화면 전체를 덮는다 ──────────────────────────
   자리 옮기기는 arife-modal-lift-v1510.js 가 한다(창을 <main> 밖으로
   꺼내 <body> 바로 아래로). 여기서는 꺼낸 창이 확실히 맨 위에 오도록
   층만 정해 준다. 붙박이 차림표가 120, 작업 부두가 그 위쯤이라
   넉넉히 띄운다. */
html body:not(#nope):not(#_):not(#__) :is(
  .market-preview-modal,
  .enterprise-media-modal,
  .license-modal,
  .enterprise-request-modal
){
  z-index:12000!important;
}

/* ── ⑧ 팝업 뒤 배경막 — 갈라짐 없이 한 장으로 (2026-08-15) ───────
   미리보기·계약 팝업이 뜨면 반투명 막 너머로 뒤 페이지가 비쳤다.
   페이지의 흰 본문 기둥과 파르스름한 양옆 여백이 그대로 비쳐,
   화면이 세로로 갈라진 것처럼 보였다(실측: 세로 경계선 2줄).
   비치지 않는 한 장짜리 막으로 바꾼다. */
html body:not(#nope):not(#_):not(#__) .market-preview-modal.is-open{
  background:radial-gradient(120% 90% at 50% 0%, #f2f7fd, #dde9f8 70%, #d3e2f5)!important;
}
html body:not(#nope):not(#_):not(#__) .license-modal::before{
  background:radial-gradient(120% 90% at 50% 0%, #f2f7fd, #dde9f8 70%, #d3e2f5)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* ── ⑨ 마켓 미리보기 팝업: 위 영상, 아래 정보·계약 (2026-08-15) ───
   왼쪽 영상 / 오른쪽 정보의 가로 배치는 화면비가 넓은 작품에서
   영상이 작게 눌렸다. 위에 작품 비율 그대로 크게 틀고,
   아래에 규격·가격·계약 단추를 둔다 — 크게 보기와 계약이 한 창에서. */
html body:not(#nope):not(#_):not(#__) .market-preview-dialog.mk-viewer-v3800{
  --mk-arn-v1560:1.7778;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  width:min(860px,calc(100vw - 40px))!important;
  max-height:calc(100vh - 40px)!important;overflow:auto!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800[data-mk-ar="9:16"]{--mk-arn-v1560:.5625}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800[data-mk-ar="1:1"]{--mk-arn-v1560:1}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800[data-mk-ar="21:9"]{--mk-arn-v1560:2.3333}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800[data-mk-ar="4:3"]{--mk-arn-v1560:1.3333}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-stage{
  grid-column:1 / -1!important;grid-row:auto!important;
  justify-self:center!important;align-self:start!important;
  width:min(100%,calc(min(46vh,440px) * var(--mk-arn-v1560,1.7778)))!important;
  margin:16px 0 0!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .mk-timeline-v3800{
  grid-column:1 / -1!important;grid-row:auto!important;justify-self:center!important;
  width:min(100%,calc(min(46vh,440px) * var(--mk-arn-v1560,1.7778)))!important;
  margin:10px 0 0!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-foot{
  grid-column:1 / -1!important;grid-row:auto!important;
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:14px!important;margin:16px 0 0!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-foot > div{
  display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;
  gap:12px 20px!important;align-items:start!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .mk-spec-v3800{grid-column:1!important;grid-row:1 / span 3!important;margin:0!important;}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 #market-preview-description{grid-column:2!important;margin:0!important;}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-info{grid-column:2!important;}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-foot > div > small{grid-column:2!important;}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 #preview-to-contract{justify-self:stretch!important;width:100%!important;}

/* ── ⑩ 세로 팝업 아래 정보 구역 재구성 (2026-08-15) ───────────
   값·부가세 표가 옛 가로 배치 그대로 한 줄에 눌려 있었다.
   왼쪽 규격표 / 오른쪽 값 카드(이름표 → 큰 값 → 부가세)로 다시 짠다. */
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-foot > div{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-info{
  display:grid!important;grid-template-columns:minmax(0,1fr)!important;
  gap:7px!important;justify-items:start!important;align-content:start!important;
  padding:14px 16px!important;border-radius:14px!important;
  background:rgba(255,255,255,.5)!important;
  box-shadow:inset 0 0 0 1px rgba(160,196,244,.4)!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 .market-preview-info > strong{
  font-size:30px!important;line-height:1.05!important;letter-spacing:-.01em!important;
}
html body:not(#nope):not(#_):not(#__) .mk-viewer-v3800 #market-preview-description{
  font-size:12.5px!important;line-height:1.7!important;
}