/* ============================================================
   ARIFE 마켓 팝업 v3800

   뺀 문구 (상품 미리보기 창에 있을 내용이 아니다)
     · 바닥의 사업자 정보 한 덩이 — 상호·대표·사업자등록번호·주소·문의
       (푸터에 이미 있고, 창을 아래로 200px 늘리기만 했다)
     · `작품 크게 보기` / `WATERMARK PREVIEW` — 이미 크게 보고 있고,
       워터마크 얘기는 아래 안내 한 줄이 이미 하고 있다
     · 그림 안의 형식 칩(4K FILM) — 바로 아래 같은 값이 또 있다
     · 그림 안의 ▶ — 옆에 `미리보기 재생` 단추가 따로 있다

   화면비는 v3800 스크립트가 작품에서 받아 상자에 건다.
   여기서는 그 상자가 화면을 넘지 않게만 잡아 준다.
   ============================================================ */

/* ── 1) 창 크기 : 화면비에 따라 ─────────────────────────── */
.market-preview-dialog:not(#_):not(#_){
  width:min(1080px,calc(100vw - 40px))!important;
  max-height:calc(100vh - 40px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
/* 세로 작품은 창을 좁고 길게 — 가로로 넓으면 양옆이 통째로 빈다 */
.market-preview-dialog.is-mk-portrait-v3800:not(#_):not(#_){
  width:min(520px,calc(100vw - 40px))!important;
}
.market-preview-dialog.is-mk-square-v3800:not(#_):not(#_){
  width:min(720px,calc(100vw - 40px))!important;
}
.market-preview-dialog.is-mk-ultra-v3800:not(#_):not(#_){
  width:min(1240px,calc(100vw - 40px))!important;
}

/* 상자가 화면보다 길어지지 않게 (세로 작품에서 특히) */
.market-preview-stage:not(#_):not(#_){
  width:100%!important;
  max-height:calc(100vh - 300px)!important;
  margin-inline:auto!important;
}
.market-preview-dialog.is-mk-portrait-v3800 .market-preview-stage:not(#_):not(#_){
  max-height:calc(100vh - 290px)!important;
  max-width:calc((100vh - 290px) * 9 / 16)!important;
}

/* ── 2) 뺄 문구 ─────────────────────────────────────────── */
.market-preview-foot .footer-biz:not(#_):not(#_){ display:none!important; }
.market-preview-status:not(#_):not(#_){ display:none!important; }
#market-preview-stage .market-art-chip:not(#_):not(#_),
#market-preview-stage .market-art-object:not(#_):not(#_){ display:none!important; }
/* 워터마크는 로고만 남긴다 — 옆의 'PREVIEW' 글자와 겹쳐 있었다 */
#market-preview-stage [class*="watermark"] > span:not(#_):not(#_),
.market-preview-stage [class*="watermark"] > span:not(#_):not(#_){ display:none!important; }

/* ── 3) 자리와 간격 ─────────────────────────────────────── */
.market-preview-dialog > header:not(#_):not(#_){
  position:sticky!important;
  top:0!important;
  z-index:4!important;
  padding:20px 22px 16px!important;
  background:linear-gradient(180deg,rgba(9,14,22,.98),rgba(9,14,22,.92))!important;
  border-bottom:1px solid rgba(150,183,222,.16)!important;
}
.market-preview-dialog > header h2:not(#_):not(#_){
  margin:0 0 4px!important;
  font-size:19px!important;
  letter-spacing:-.03em!important;
}
.market-preview-dialog > header span:not(#_):not(#_){
  color:#8092a8!important;
  font:800 10.5px/1 ui-monospace,Consolas,monospace!important;
  letter-spacing:.14em!important;
}
.market-preview-stage:not(#_):not(#_){
  position:relative!important;
  margin:16px 22px!important;
  border:1px solid rgba(150,183,222,.16)!important;
  border-radius:16px!important;
  overflow:hidden!important;
}
/* 재생 단추 — 화면 한가운데 하나 */
/* 이 단추도 '글자를 감춘 동그라미' 위에 글자가 되살아난 자리다.
   58×58 상자에 `▶ 미리보기 재생` 이 들어가 세로로 109px 로 쌓여 있었다.
   글자가 들어갈 만큼 상자를 늘린다. */
#market-preview-play:not(#_):not(#_){
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  white-space:nowrap!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  line-height:1!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:3!important;
  min-height:46px!important;
  padding:0 20px!important;
  border:1px solid rgba(190,236,252,.45)!important;
  border-radius:99px!important;
  background:linear-gradient(150deg,rgba(95,214,245,.92),rgba(52,150,190,.88))!important;
  color:#04141c!important;
  font-size:12.5px!important;
  font-weight:800!important;
  box-shadow:0 14px 34px rgba(0,0,0,.45)!important;
}

/* 바닥 — 설명 / 값 / 단추를 한 줄 흐름으로 */
.market-preview-foot:not(#_):not(#_){
  position:sticky!important;
  bottom:0!important;
  z-index:4!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:14px 18px!important;
  padding:16px 22px 20px!important;
  border-top:1px solid rgba(150,183,222,.16)!important;
  background:linear-gradient(180deg,rgba(9,14,22,.9),rgba(9,14,22,.99))!important;
}
.market-preview-foot > div:not(#_):not(#_){
  min-width:0!important;
  display:grid!important;
  gap:8px!important;
}
#market-preview-description:not(#_):not(#_){
  margin:0!important;
  color:#aab7c9!important;
  font-size:13px!important;
  line-height:1.75!important;
  word-break:keep-all!important;
}
.market-preview-info:not(#_):not(#_){
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:6px 10px!important;
}
.market-preview-info > strong:not(#_):not(#_){
  color:#f2f7ff!important;
  font-size:22px!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
}
.market-preview-foot small:not(#_):not(#_){
  color:#75839a!important;
  font-size:11.5px!important;
  line-height:1.7!important;
}
#preview-to-contract:not(#_):not(#_){
  align-self:end!important;
  min-height:48px!important;
  padding:0 24px!important;
  border-radius:13px!important;
  white-space:nowrap!important;
}

/* ── 4) 좁은 화면 ───────────────────────────────────────── */
@media (max-width:720px){
  .market-preview-dialog:not(#_):not(#_),
  .market-preview-dialog.is-mk-portrait-v3800:not(#_):not(#_),
  .market-preview-dialog.is-mk-square-v3800:not(#_):not(#_),
  .market-preview-dialog.is-mk-ultra-v3800:not(#_):not(#_){
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
  }
  .market-preview-stage:not(#_):not(#_){
    margin:12px 14px!important;
    max-height:calc(100vh - 340px)!important;
  }
  .market-preview-dialog.is-mk-portrait-v3800 .market-preview-stage:not(#_):not(#_){
    max-width:calc((100vh - 340px) * 9 / 16)!important;
  }
  .market-preview-dialog > header:not(#_):not(#_){ padding:16px 14px 13px!important; }
  .market-preview-foot:not(#_):not(#_){
    grid-template-columns:minmax(0,1fr)!important;
    padding:14px 14px 16px!important;
  }
  #preview-to-contract:not(#_):not(#_){ width:100%!important; }
}

/* ── 5) 상자 안에 남아 있던 군더더기 ─────────────────────────
   실측으로 하나씩 확인한 것들이다.
     · 재생 단추의 `::before` 가 ▶ 를 하나 더 붙여 `▶ ▶ 미리보기 재생`
     · 워터마크 옆 `ARIFE VIDEO PREVIEW` 글자가 로고 위에 겹쳐 있었다
     · 오른쪽 아래 작품 제목 — 창 맨 위에 같은 제목이 이미 크게 있다  */
#market-preview-play:not(#_):not(#_)::before{ content:none!important; }
/* 실제 자리: `.market-preview-placeholder > span` (= ARIFE VIDEO PREVIEW)
   와 `> strong` (= 작품 제목). 로고 위에 겹치고 제목은 위에 또 있다. */
.market-preview-placeholder > span:not(#_):not(#_),
.market-preview-placeholder > strong:not(#_):not(#_),
.market-preview-stage [class*="watermark"] span:not(#_):not(#_){
  display:none!important;
}

/* ============================================================
   v3810 — 미리보기 창을 '뷰어' 로 다시 짠다

   예전 창은 카드를 그대로 키운 모양이었다. 큰 그림 한 판 아래
   설명 문단이 있고, 해상도·길이 같은 규격은 문단 안에 섞여 있어
   눈에 들어오지 않았다. 영상은 '규격'으로 사는 물건이다.

     [ 화면 ]          [ 규격 판 ]
     [ 필름 띠 ]        화면비 / 해상도 / 길이 / 이용 범위 / 수수료
                       ─────────────
                       값 · 부가세 안내
                       [ 이용 범위 확인 ]

   세로 작품은 화면이 길어지므로 위아래로 세워 쌓는다.
   ============================================================ */

/* ── 뼈대 : 화면 | 규격 ─────────────────────────────────── */
.market-preview-dialog.mk-viewer-v3800:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
  grid-template-rows:auto auto auto!important;
  align-content:start!important;
  column-gap:16px!important;
  row-gap:0!important;
  padding:0 18px 18px!important;   /* 여백은 창이 갖는다 */
}
/* ── 겹침의 원인 ────────────────────────────────────────────
   화면·필름 띠에 `width:100%` 와 `margin-left:18px` 을 같이 주었다.
   100% 는 '칸 전체' 라서, 거기에 왼쪽 여백을 더하면 칸을 18px 넘어
   오른쪽 규격 판 밑으로 들어간다(실측으로 확인).
   여백은 칸 바깥(= 창의 안쪽 여백)에서 주고, 칸 안의 것들은
   폭을 스스로 정하지 않게 한다. 그러면 칸이 곧 경계가 된다. */
.mk-viewer-v3800 > header:not(#_):not(#_){
  grid-column:1 / -1!important;
  margin:0 -18px!important;      /* 머리만 창 끝까지 */
}
.mk-viewer-v3800 .market-preview-stage:not(#_):not(#_){
  grid-column:1!important;
  grid-row:2!important;
  width:auto!important;
  margin:18px 0 0!important;
  align-self:start!important;
  justify-self:stretch!important;
}
.mk-viewer-v3800 .mk-timeline-v3800{
  grid-column:1!important;
  grid-row:3!important;
  width:auto!important;
  margin:10px 0 0!important;
  min-width:0!important;
}
.mk-viewer-v3800 .market-preview-foot:not(#_):not(#_){
  grid-column:2!important;
  grid-row:2 / span 2!important;
  position:static!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  gap:14px!important;
  width:auto!important;
  min-width:0!important;
  margin:18px 0 0!important;
  padding:18px!important;
  border:1px solid rgba(150,183,222,.16)!important;
  border-top:1px solid rgba(150,183,222,.16)!important;
  border-radius:16px!important;
  background:
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 44%),
    rgba(8,12,20,.72)!important;
}

/* ── 규격 판 ──────────────────────────────────────────────── */
.mk-spec-v3800{
  display:grid;
  gap:1px;
  margin:0;
  border:1px solid rgba(150,183,222,.16);
  border-radius:12px;
  background:rgba(150,183,222,.16);
  overflow:hidden;
}
.mk-spec-v3800 > div{
  display:grid;
  grid-template-columns:66px minmax(0,1fr);
  gap:10px;
  padding:9px 12px;
  background:#080d15;
}
.mk-spec-v3800 dt{ color:#7f8ea3; font-size:11px; font-weight:700; }
.mk-spec-v3800 dd{ margin:0; color:#ccd8e8; font-size:11.5px; line-height:1.55; word-break:keep-all; }

/* ── 필름 띠 : 길이를 눈으로 ─────────────────────────────── */
.mk-timeline-v3800{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
}
.mk-timeline-v3800[hidden]{ display:none; }
.mk-tl-frames-v3800{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:3px;
  padding:3px;
  border:1px solid rgba(150,183,222,.16);
  border-radius:9px;
  background:rgba(255,255,255,.02);
}
.mk-tl-frames-v3800 i{
  height:22px;
  border-radius:4px;
  background:linear-gradient(140deg,rgba(95,214,245,.3),rgba(140,125,255,.16));
}
.mk-tl-frames-v3800 i:nth-child(2n){ background:linear-gradient(140deg,rgba(140,125,255,.26),rgba(95,214,245,.14)); }
.mk-tl-frames-v3800 i:nth-child(3n){ background:linear-gradient(140deg,rgba(95,214,245,.4),rgba(140,125,255,.1)); }
.mk-tl-time-v3800{
  color:#93a3b8;
  font:800 11px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.06em;
  white-space:nowrap;
}
.mk-tl-time-v3800 em{ margin:0 5px; font-style:normal; opacity:.45; }

/* ── 값과 단추 ────────────────────────────────────────────── */
.mk-viewer-v3800 #market-preview-description:not(#_):not(#_){
  font-size:12.5px!important;
  line-height:1.8!important;
}
.mk-viewer-v3800 .market-preview-info:not(#_):not(#_){
  padding-top:12px!important;
  border-top:1px solid rgba(150,183,222,.16)!important;
}
.mk-viewer-v3800 .market-preview-info > strong:not(#_):not(#_){ font-size:24px!important; }
.mk-viewer-v3800 #preview-to-contract:not(#_):not(#_){ width:100%!important; }
.mk-viewer-v3800 .market-preview-foot small:not(#_):not(#_){ font-size:11px!important; }

/* ── 세로·정사각 작품 : 위아래로 쌓는다 ─────────────────── */
.market-preview-dialog.mk-viewer-v3800.is-mk-portrait-v3800:not(#_):not(#_){
  grid-template-columns:minmax(0,1fr) 290px!important;
  width:min(860px,calc(100vw - 40px))!important;
}
.market-preview-dialog.mk-viewer-v3800.is-mk-square-v3800:not(#_):not(#_){
  width:min(900px,calc(100vw - 40px))!important;
}
.market-preview-dialog.mk-viewer-v3800.is-mk-ultra-v3800:not(#_):not(#_){
  width:min(1320px,calc(100vw - 40px))!important;
}
.mk-viewer-v3800.is-mk-portrait-v3800 .market-preview-stage:not(#_):not(#_){
  max-height:calc(100vh - 200px)!important;
  max-width:calc((100vh - 200px) * 9 / 16)!important;
}

/* ── 좁은 화면 : 한 줄로 ─────────────────────────────────── */
@media (max-width:900px){
  .market-preview-dialog.mk-viewer-v3800:not(#_):not(#_),
  .market-preview-dialog.mk-viewer-v3800.is-mk-portrait-v3800:not(#_):not(#_),
  .market-preview-dialog.mk-viewer-v3800.is-mk-square-v3800:not(#_):not(#_),
  .market-preview-dialog.mk-viewer-v3800.is-mk-ultra-v3800:not(#_):not(#_){
    grid-template-columns:minmax(0,1fr)!important;
    width:calc(100vw - 20px)!important;
  }
  .mk-viewer-v3800 .market-preview-stage:not(#_):not(#_){ margin:14px 14px 0!important; }
  .mk-viewer-v3800 .mk-timeline-v3800{ margin:8px 14px 0!important; }
  .mk-viewer-v3800 .market-preview-foot:not(#_):not(#_){
    grid-column:1!important;
    grid-row:auto!important;
    margin:14px!important;
  }
  .mk-viewer-v3800.is-mk-portrait-v3800 .market-preview-stage:not(#_):not(#_){
    max-height:calc(100vh - 420px)!important;
    max-width:calc((100vh - 420px) * 9 / 16)!important;
  }
}

/* 화면 왼쪽 아래에 남아 있던 빈 알약(워터마크 로고 자리)과
   그림 안 떠 있던 작은 고리를 정리한다 */
.mk-viewer-v3800 .market-preview-stage [class*="watermark"]:not(#_):not(#_){
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  opacity:.32!important;
}
.mk-viewer-v3800 .market-preview-placeholder:not(#_):not(#_){
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* 좁은 화면에서도 같은 규칙 — 여백은 창이 갖는다 */
@media (max-width:900px){
  .market-preview-dialog.mk-viewer-v3800:not(#_):not(#_){ padding:0 14px 14px!important; }
  .mk-viewer-v3800 > header:not(#_):not(#_){ margin:0 -14px!important; }
  .mk-viewer-v3800 .market-preview-stage:not(#_):not(#_){ margin:14px 0 0!important; }
  .mk-viewer-v3800 .mk-timeline-v3800{ margin:8px 0 0!important; }
  .mk-viewer-v3800 .market-preview-foot:not(#_):not(#_){ margin:14px 0 0!important; }
}