/* ============================================================
   ARIFE 스크롤 막대 색 v1730 — 오른쪽 검은 띠 없애기

   무엇이 보였나 (사장님 화면 캡처 · 라이브 실측 2026-08-08)
     마켓과 기업 라이선스 오른쪽 끝에 세로로 새까만 띠가 있었다.
     올려 주신 그림에서 픽셀을 재 보니 rgb(6,11,18) — 거의 순흑이다.
     밝은 화면 옆에 검은 막대가 붙어 있으니 '경계선' 으로 보인다.

   무엇이었나
     페이지 스크롤 막대의 **홈통(track)** 이었다.

       assets/css/arife-design-system-v500.css
         html{ background:var(--a-bg); … scrollbar-color:#344a66 var(--a-bg) }

     이 시트를 쓰던 시절 --a-bg 는 어두운 색이었다. 그 뒤 사이트가 밝은
     유리 결로 바뀌면서 **background 만** 밝은 색으로 덮였고,
     scrollbar-color 는 아무도 안 덮었다. 그래서 라이브에서 이렇게 된다.

       html 배경        rgb(219,227,239)   ← 밝다
       --a-bg           #060b12            ← 옛 어두운 값 그대로
       scrollbar-color  rgb(52,74,102) rgb(6,11,18)   ← 홈통이 새까맣다

     색 문제도 흐림(backdrop-filter) 문제도 아니었다. 지난번에 흐림만
     보고 이걸 놓쳤다.

   어떻게 고치나
     홈통을 특정 색으로 칠하지 않는다. **투명하게** 둔다.
     그러면 그 자리에 그 페이지의 html 배경이 그대로 비친다 —
     밝은 화면이면 밝게, 어두운 화면이면 어둡게, 저절로 맞는다.
     페이지마다 색을 적어 두면 배경을 바꿀 때 또 한 곳을 빠뜨린다.

     손잡이(thumb)만 밝은 화면에서 부드러운 파랑으로 바꾼다.
     영화 제작소(.film-page)는 진짜로 어두운 화면이라(html 배경 rgb(6,15,27))
     빼 둔다 — 거기서는 지금 색이 맞다.

   확인
     라이브에서 이 규칙을 넣고 오른쪽 끝 픽셀을 다시 쟀다.
       고치기 전  x=1560~1567  rgb(6,11,17)      ← 검은 띠
       고친 뒤    x=1560~1567  rgb(220,226,238)  ← 페이지 배경
   ============================================================ */

/* ── ① 모든 화면 — 홈통을 투명하게 ─────────────────────
   이 한 줄이 검은 띠를 없앤다. 어두운 화면은 어차피 배경이 어두워
   보이는 결과가 지금과 같다. */
html:not(#nope):not(#_):not(#__){
  scrollbar-color: rgb(52, 74, 102) transparent !important;
  scrollbar-width: thin !important;
}

/* ── ② 밝은 화면 — 손잡이도 밝은 결로 ────────────────
   밝은 화면 표식이 한 가지가 아니다(실측):
     marketplace  arife-glass · a-glass-page · data-glass-page
     index        a-glass-page · data-glass-page   ← arife-glass 가 없다
     checkout     arife-glass 만
   하나만 잡으면 반드시 몇 장이 빠진다. 셋 다 잡는다.
   밝은 판 위의 남색 막대는 그것대로 튄다. 사이트의 파랑에 맞춘다.
   `.film-page` 는 뺀다 — 그쪽은 html 배경이 rgb(6,15,27) 로 진짜 어둡다. */
html:has(body.arife-glass):not(:has(body.film-page)):not(#nope):not(#_):not(#__),
html:has(body.a-glass-page):not(:has(body.film-page)):not(#nope):not(#_):not(#__),
html:has(body[data-glass-page]):not(:has(body.film-page)):not(#nope):not(#_):not(#__){
  scrollbar-color: rgba(116, 158, 212, .62) transparent !important;
}

/* ── ③ 옛 브라우저(웹킷) 대비 ────────────────────────
   요즘 크롬은 위 scrollbar-color 를 그대로 읽는다. 사파리 옛 판을 위해
   같은 뜻을 한 번 더 적어 둔다. 값이 어긋나지 않게 색을 똑같이 쓴다. */
html:not(#nope):not(#_):not(#__)::-webkit-scrollbar-track,
html:not(#nope):not(#_):not(#__)::-webkit-scrollbar-corner{
  background: transparent !important;
}
html:has(body.arife-glass):not(:has(body.film-page)):not(#nope):not(#_)::-webkit-scrollbar-thumb,
html:has(body.a-glass-page):not(:has(body.film-page)):not(#nope):not(#_)::-webkit-scrollbar-thumb,
html:has(body[data-glass-page]):not(:has(body.film-page)):not(#nope):not(#_)::-webkit-scrollbar-thumb{
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(116, 158, 212, .62) !important;
}

/* ============================================================
   ARIFE 팝업 덮개가 오른쪽 끝까지 닿게 v1740

   무엇이 보였나 (사장님 화면 · 실측으로 재현 2026-08-08)
     "영상 미리보기를 열면 팝업 말고 이 경계선이 왜 나오냐" —
     미리보기를 여는 순간 화면 오른쪽에 세로 줄이 하나 생겼다.

   무엇이었나
     팝업의 덮개(뒤를 어둡게/밝게 덮는 판)가 **창 끝까지 안 닿는다.**

       창 너비                       1400
       .license-modal (fixed·inset:0)  1390   ← 10px 모자람
       덮개 ::before (inset:0)         1390   ← 같이 모자람

     이유는 CSS 규칙이다. `position:fixed; inset:0` 의 기준은
     **스크롤 막대를 뺀 영역**이다(초기 포함 블록). 그래서 스크롤 막대
     자리(10~11px)만 덮개가 안 깔리고, 그 자리에 페이지 배경이 그대로
     남는다 — 덮인 곳과 안 덮인 곳의 경계가 바로 그 세로 줄이다.

     팝업이 없을 때는 이 자리가 그냥 배경이라 안 보인다. 팝업을 열어
     주변이 어두워지는 순간에만 튀어나온다. 그래서 "미리보기 하면"
     생기는 것으로 보였다.

   고치는 법
     덮개의 너비를 `100vw` 로 준다. `100vw` 는 스크롤 막대 자리까지
     포함한 창 전체 너비다. 위(v1730)에서 스크롤 막대 홈통을 투명하게
     해 뒀으므로, 그 자리에 덮개가 그대로 비쳐 줄이 사라진다.

     팝업 상자 자체는 가운데 정렬이라 5px 정도만 움직인다 — 눈에 안 띈다.

   왜 '스크롤을 잠그는' 방법을 안 쓰나
     팝업을 열 때 페이지 스크롤을 막으면 막대가 사라지면서 본문이
     11px 옆으로 밀린다. 열 때마다 화면이 한 번 튀는데, 그게 더 나쁘다.
   ============================================================ */
html:not(#nope):not(#_) :is(
  .license-modal, .enterprise-media-modal, .enterprise-request-modal,
  .market-preview-modal, .contract-modal, .film-modal, .film-bridge-modal,
  .image-modal, .account-media-modal, .motion-modal, .motion-model-modal,
  .motion-library-modal, .stock-video-modal, .studio-access-modal,
  .studio-prompt-modal, .studio-version-modal, .studio-workflow-modal-v306,
  .unified-result-modal, .unified-model-modal, .unified-library-modal,
  .buyer-guide-modal-v304, .plan-review-modal-v308, .arife-plan-modal,
  .enterprise-brief-modal-v305, .production-flow-modal-v309,
  .seller-entry-modal, .trust-guide-modal-v310, .launch-modal-v302,
  .image-personalization-modal-v415, .pz-modal, .auth-popup-layer,
  .ir-overlay, .ir-lightbox, .lb-viewer
){
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
}

/* ── v1740 ② 팝업이 열린 동안만, 막대 자리를 덮개 색으로 ──────
   막대 자리는 페이지가 아니라 브라우저가 칠하는 자리다. 그래서
   덮개를 100vw 로 늘려도 그 위에 안 비치는 경우가 있다.
   그럴 때를 대비해 **막대 홈통 자체를 덮개와 같은 색**으로 칠한다.
   표(arife-modal-open-v1740)는 arife-modal-gutter-v1740.js 가 붙인다.

   가짜 아이디를 넷 쓴다. 위 ① 규칙이 셋이라, 셋으로는 지고
   홈통이 계속 투명하게 남는다(실측으로 확인).

   색은 실측값이다 — 마켓에서 팝업을 열고 덮개 바로 안쪽 픽셀을 쟀다.
     밝은 화면 덮개 안쪽  rgb(202,219,243)
   덮개 색을 바꾸면 이 값도 같이 바꿔야 한다. 한 곳에만 적어 둔다. */
html.arife-modal-open-v1740:not(#nope):not(#_):not(#__):not(#___){
  scrollbar-color: rgba(116, 158, 212, .62) rgb(202, 219, 243) !important;
}
html.arife-modal-open-v1740:not(#nope):not(#_):not(#__):not(#___)::-webkit-scrollbar-track{
  background: rgb(202, 219, 243) !important;
}
/* 영화 제작소처럼 어두운 판을 쓰는 화면은 덮개도 어둡다 */
html.arife-modal-open-v1740:has(body.film-page):not(#nope):not(#_):not(#__):not(#___){
  scrollbar-color: rgb(52, 74, 102) rgb(9, 14, 22) !important;
}
html.arife-modal-open-v1740:has(body.film-page):not(#nope):not(#_):not(#__):not(#___)::-webkit-scrollbar-track{
  background: rgb(9, 14, 22) !important;
}