/* ============================================================
   ARIFE 기업 라이선스 — 목록은 고른 카드, 팝업은 자산 모양 v4000

   방침이 갈린다
     목록  자산의 해상도가 제각각이어도 카드는 모두 같은 크기다.
           화면비는 '모양' 이 아니라 카드 위 규격 띠(16:9 · 4K · 00:45)로
           읽는다. 정보는 그대로 있고 줄만 반듯해진다.
     팝업  열었을 때는 자산의 화면비 그대로 보여 준다.
           무엇을 빌리는지 확인하는 자리라 여기서는 모양이 곧 정보다.

   그 밖에
     · 미리보기 단추가 마우스에 흔들리지 않는다(필름 띠가 대신 흐른다).
     · 조건 줄에서 검은 선을 걷고 검색·정렬을 단추와 같은 줄에 세운다.
   ============================================================ */

/* ── 1) 고른 카드 ─────────────────────────────────────────────
   한 줄에 들어가는 카드는 모두 같은 높이, 같은 그림칸을 쓴다. */
.enterprise-license-page .enterprise-grid:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))!important;
  grid-auto-rows:auto!important;
  gap:18px!important;
  align-items:stretch!important;
}

/* 첫 상품(`is-featured`)만 줄 전체를 차지하며 좌우 두 칸으로 갈라져
   혼자 다른 모양이었다(실측: 1370px, 나머지는 329px). 고른 카드로 맞춘다. */
.enterprise-license-page .enterprise-license-card.is-featured:not(#_):not(#_){
  grid-column:auto!important;
  grid-template-columns:none!important;
  min-height:0!important;
}
.enterprise-license-page .enterprise-license-card.is-featured .enterprise-preview:not(#_):not(#_){
  min-height:0!important;
  border-right:0!important;
  border-bottom:1px solid var(--enterprise-line)!important;
}

.enterprise-license-page .enterprise-license-card{
  display:flex;
  flex-direction:column;
  /* 3D '입술' 그림자는 카드가 떠오를 때를 전제로 그려졌다.
     이제 카드는 안 떠오르므로 입술을 걷고 평평한 그림자만 남긴다. */
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 18px 40px rgba(0,0,0,.34)!important;
  transition:border-color .22s ease,box-shadow .22s ease!important;
}

/* 그림칸은 어떤 자산이든 16:9 한 판.
   세로 자산도 여기서는 같은 틀에 담기고, 실제 모양은 팝업에서 본다. */
.enterprise-license-page .enterprise-preview:not(#_):not(#_){
  position:relative!important;
  aspect-ratio:16 / 9!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border-radius:23px 23px 0 0!important;
  background:
    radial-gradient(120% 100% at 30% 20%,var(--preview-a,#1b4b5b),transparent 62%),
    linear-gradient(160deg,var(--preview-a,#1b4b5b),var(--preview-b,#222848))!important;
}

/* 글칸: 설명은 두 줄로 자르고, 값과 단추는 카드 바닥에 붙인다.
   그래야 카드마다 단추가 같은 높이에 선다. */
.enterprise-license-page .enterprise-license-card__body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
}
.enterprise-license-page .enterprise-license-card__description{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:0;
}
.enterprise-license-page .enterprise-license-card__bottom{
  margin-top:auto;
}

/* ── 2) 흔들리지 않는 미리보기 단추 ───────────────────────────
   카드 hover 로 6px 떠오르던 것을 멈춘다. */
.enterprise-license-page .enterprise-license-card:hover:not(#_):not(#_),
.enterprise-license-page .enterprise-license-card:focus-within:not(#_):not(#_){
  transform:none!important;
  translate:none!important;
  scale:none!important;
  border-color:#5a6b7d!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 22px 52px rgba(0,0,0,.42)!important;
}

/* 단추는 제자리에 못 박는다 — hover 든 focus 든 좌표가 안 바뀐다.
   `transform` 만 막아서는 안 된다. 공용 묶음(arife-unified-v400)이
   `translate:0 -2px` 라는 별도 속성으로 모든 단추를 띄우고 있다.
   이 둘은 서로 다른 속성이라 하나를 덮어도 다른 하나가 남는다(실측:
   transform 은 그대로인데 단추가 2px 올라갔다). 셋 다 못 박는다. */
.enterprise-license-page .enterprise-preview__play:not(#_):not(#_),
.enterprise-license-page .enterprise-preview__play:not(#_):not(#_):hover,
.enterprise-license-page .enterprise-preview__play:not(#_):not(#_):focus-visible,
.enterprise-license-page .enterprise-preview__play:not(#_):not(#_):active{
  transform:translate(-50%,-50%)!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  filter:none!important;
  overflow:hidden!important;
  padding:7px 17px 7px 8px!important;
  opacity:1!important;
  transition:border-color .22s ease,background .22s ease,box-shadow .22s ease!important;
}
.enterprise-license-page .enterprise-preview__play:not(#_):not(#_):hover{
  border-color:#cfc7ff!important;
  background:rgba(12,14,24,.84)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 10px 28px rgba(0,0,0,.46),0 0 26px rgba(140,125,255,.26)!important;
}

/* 필름 띠 — 단추 안쪽 바닥을 프레임이 왼쪽으로 흘러간다.
   프레임을 낱개 상자로 만들어 움직이면 그 상자가 단추 밖으로 나간다.
   눈에는 안 보여도(단추에 overflow:hidden) 실제 좌표는 단추 밖이라,
   그 위를 지나는 다른 것과 부딪칠 수 있다. 그래서 상자는 제자리에
   두고 '무늬' 만 흐르게 한다 — 움직이는 건 배경이지 상자가 아니다. */
.ent-film-v4000{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  opacity:0;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(207,199,255,.95) 0 14px,
    transparent 14px 18px
  );
  background-size:18px 100%;
  background-position:0 0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.enterprise-preview__play:hover .ent-film-v4000,
.enterprise-preview__play:focus-visible .ent-film-v4000{
  opacity:1;
  animation:ent-film-run-v4000 .85s linear infinite;
}
@keyframes ent-film-run-v4000{
  from{ background-position:0 0; }
  to{   background-position:-18px 0; }
}
@media (prefers-reduced-motion: reduce){
  .enterprise-preview__play:hover .ent-film-v4000,
  .enterprise-preview__play:focus-visible .ent-film-v4000{ animation:none; }
}

/* ── 3) 규격 띠 ───────────────────────────────────────────────
   카드 모양이 고르면 '이게 세로 자산인지' 를 눈으로 알 수 없다.
   그래서 화면비 · 해상도 · 길이를 그림칸 위에 글로 적는다.
   값이 없는 칸은 아예 만들지 않는다. */
.ent-spec-v4000{
  position:absolute;
  z-index:4;
  left:14px;
  top:14px;
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  max-width:calc(100% - 28px);
  font-style:normal;
}
.ent-spec-v4000 span{
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:7px;
  background:rgba(4,7,11,.6);
  backdrop-filter:blur(9px);
  color:rgba(236,242,252,.86);
  font:800 10px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.06em;
  white-space:nowrap;
}
/* 그림칸 위에 얹히는 것들이 네 귀퉁이로 흩어져 서로 안 겹치게 한다.
   실측: 카드가 329px 로 좁아지자 번호·분류·규격·권리표시·워터마크가
   전부 아래쪽 한 자리에 몰려 글자가 겹쳐 읽을 수 없었다.
     왼쪽 위  규격 띠(16:9 · 4K · 00:45)
     오른쪽 위 RIGHTS VERIFIED
     왼쪽 아래 분류(CORPORATE FILM)
     오른쪽 아래 ARIFE 워터마크 */
.enterprise-license-page .enterprise-preview__top:not(#_):not(#_){
  top:13px!important;
  bottom:auto!important;
  left:auto!important;
  right:14px!important;
  width:auto!important;
  justify-content:flex-end!important;
  gap:0!important;
  pointer-events:none!important;
}
/* 카드 번호는 규격 띠와 자리를 다투기만 한다 — 뺀다 */
.enterprise-license-page .enterprise-preview__top > :first-child:not(#_):not(#_){ display:none!important; }

.enterprise-license-page .enterprise-preview__bottom:not(#_):not(#_){
  left:14px!important;
  right:auto!important;
  bottom:12px!important;
  width:auto!important;
  max-width:calc(100% - 120px)!important;
  gap:0!important;
  pointer-events:none!important;
}
/* 분류 옆의 규격 글(4K · 시네마틱 소스 28종)은 위 규격 띠와 같은 말이다 */
.enterprise-license-page .enterprise-preview__bottom > span:not(#_):not(#_){ display:none!important; }
.enterprise-license-page .enterprise-preview__bottom > b:not(#_):not(#_){
  font-size:10px!important;
  line-height:1.25!important;
  letter-spacing:.1em!important;
}

.enterprise-license-page .enterprise-preview__watermark:not(#_):not(#_){
  right:12px!important;
  bottom:10px!important;
  padding:5px 7px!important;
  border-radius:8px!important;
}
.enterprise-license-page .enterprise-preview__watermark img:not(#_):not(#_){ width:44px!important; }
.enterprise-license-page .enterprise-preview__watermark span:not(#_):not(#_){ display:none!important; }

/* 카드 안 태그 줄만 홀로 맨 글자였다 — 위의 두 칩과 같은 옷을 입힌다 */
.enterprise-license-page .enterprise-license-card .enterprise-tags:not(#_):not(#_){
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:8px!important;
}
.enterprise-license-page .enterprise-license-card .enterprise-tags > span:not(#_):not(#_){
  display:inline-flex!important;
  align-items:center!important;
  min-height:26px!important;
  padding:0 9px!important;
  border:1px solid rgba(151,197,231,.14)!important;
  border-radius:999px!important;
  background:rgba(151,197,231,.05)!important;
  color:#8f9fb1!important;
  font-size:11px!important;
  white-space:nowrap!important;
}

/* ── 값 줄 ────────────────────────────────────────────────────
   329px 카드 안에서 '월 이용료 · VAT 별도' 와 34px 짜리 금액이
   좌우로 마주 서다 보니, 설명이 세 줄로 쪼개지고 '/월' 이 금액에
   겹쳐 그어진 것처럼 보였다. 위아래로 세운다. */
.enterprise-license-page .enterprise-license-card__price:not(#_):not(#_){
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:4px!important;
  padding:20px 0 16px!important;
}
.enterprise-license-page .enterprise-license-card__price small:not(#_):not(#_){
  order:-1!important;
  white-space:nowrap!important;
  font-size:11.5px!important;
}
.enterprise-license-page .enterprise-license-card__price strong:not(#_):not(#_){
  display:flex!important;
  align-items:baseline!important;
  gap:3px!important;
  font-size:clamp(22px,2vw,28px)!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}

/* ── 4) 조건 줄 — 검은 선을 걷고 한 줄로 세운다 ────────────────
   실측
     · 줄 상자에 `0 5px 0 #04060a` 라는 5px 검은 입술이 깔려 있었다.
     · 단추마다 `0 3px 0 #0d6f81` 이 또 하나 깔려 있었다.
       두 겹이 겹쳐 단추 아래가 검은 선으로 보였다.
     · 단추는 높이 40px·위 1244, 검색·정렬은 46px·위 1253 이라
       같은 줄인데 9px 어긋나 있었다. 게다가 '검색'·'정렬' 이라는
       글자가 칸 위에 떠 있어 줄 높이가 70px 로 벌어졌다. */
.enterprise-license-page .enterprise-filterbar:not(#_):not(#_){
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:10px 14px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;   /* 5px 검은 입술 제거 */
  filter:none!important;
}
.enterprise-license-page .enterprise-filterbar .enterprise-tags:not(#_):not(#_){
  display:flex!important;
  flex:1 1 auto!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
.enterprise-license-page .enterprise-filterbar__tools:not(#_):not(#_){
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:8px!important;
}
/* '검색'·'정렬' 글자표는 칸 위에 떠서 줄을 벌리기만 했다.
   칸 안의 안내문과 고른 값이 이미 같은 말을 한다. */
.enterprise-license-page .enterprise-filterbar__tools label:not(#_):not(#_){
  display:block!important;
  position:relative!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
}
.enterprise-license-page .enterprise-filterbar__tools label > span:not(#_):not(#_){
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}

/* 단추 · 검색 · 정렬 — 같은 높이, 같은 모서리, 같은 테두리.
   3D 입술을 걷고 눌린 듯한 안쪽 그림자도 없앤다. */
.enterprise-license-page .enterprise-tags button:not(#_):not(#_),
.enterprise-license-page .enterprise-filterbar__tools input:not(#_):not(#_),
.enterprise-license-page .enterprise-filterbar__tools select:not(#_):not(#_){
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  border:1px solid rgba(151,197,231,.2)!important;
  border-radius:11px!important;
  background:rgba(9,15,23,.72)!important;
  box-shadow:none!important;   /* 3px 검은 입술 · 안쪽 눌림 그림자 제거 */
  filter:none!important;
  color:#c6d2e0!important;
  font:750 13px/1 inherit!important;
  letter-spacing:-.01em!important;
  vertical-align:middle!important;
}
.enterprise-license-page .enterprise-filterbar__tools input:not(#_):not(#_){ width:270px!important; }
/* 정렬 칸은 `appearance:none` 때문에 화살표가 사라져 그냥 글자처럼 보였다.
   내려오는 칸이라는 표시를 배경 그림으로 다시 그려 넣는다. */
.enterprise-license-page .enterprise-filterbar__tools select:not(#_):not(#_){
  width:160px!important;
  padding:0 32px 0 14px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238ea0b6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
}

.enterprise-license-page .enterprise-tags button:not(#_):not(#_):hover,
.enterprise-license-page .enterprise-filterbar__tools input:not(#_):not(#_):hover,
.enterprise-license-page .enterprise-filterbar__tools select:not(#_):not(#_):hover{
  translate:none!important;   /* 공용 묶음의 -2px 들림 차단 */
  transform:none!important;
  border-color:rgba(151,197,231,.36)!important;
  color:#e6eef8!important;
}
.enterprise-license-page .enterprise-tags button[aria-pressed="true"]:not(#_):not(#_),
.enterprise-license-page .enterprise-tags button.is-active:not(#_):not(#_){
  border-color:rgba(95,214,245,.5)!important;
  background:rgba(95,214,245,.12)!important;
  color:#cdeefb!important;
}
.enterprise-license-page .enterprise-filterbar__tools input:not(#_):not(#_):focus,
.enterprise-license-page .enterprise-filterbar__tools select:not(#_):not(#_):focus{
  border-color:rgba(95,214,245,.5)!important;
  box-shadow:0 0 0 3px rgba(95,214,245,.12)!important;
  outline:0!important;
}
.enterprise-license-page .enterprise-filterbar__tools input::placeholder{ color:#75839a!important; }

/* ── 5) 팝업 창 — 여기서는 자산 화면비 그대로 ──────────────────
   창의 너비는 JS(sizeViewer)가 정한다. 남는 높이에서 거꾸로 구해야
   영상칸과 설명칸이 함께 화면 안에 들어오기 때문이다. 여기서는
   '어떻게 쌓이는지' 만 정한다 — 위에 영상, 아래 설명, 넘치지 않게. */
.enterprise-media-modal__dialog.ent-viewer-v4000{
  display:flex!important;
  flex-direction:column!important;
  max-height:100%!important;
  margin:0!important;
  overflow:hidden!important;   /* 안쪽 스크롤이 생기면 잘린 것이다 */
}
.enterprise-media-modal__dialog.ent-viewer-v4000 .enterprise-media-stage{
  flex:0 0 auto!important;
  min-height:0!important;
}
/* 설명칸은 남는 자리를 쓰고, 넘치면 저 혼자 움직인다.
   창 전체가 길어져 제목·계약 단추가 화면 밖으로 밀리는 일이 없다. */
.enterprise-media-modal__dialog.ent-viewer-v4000 > footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  /* 자리가 모자라면 격자가 줄 높이를 눌러 버린다. 실측: 규격 표가
     192px 인데 줄은 182px 로 눌려, 남은 10px 이 아래 줄(계약 단추)로
     삐져나와 표 마지막 칸을 덮었다. 줄은 제 높이를 지키게 하고,
     모자라는 몫은 설명칸이 스스로 움직여 감당한다. */
  align-content:start!important;
  grid-auto-rows:min-content!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  gap:10px 18px!important;
  padding:16px 20px!important;
}
/* 규격 표는 아래에서 줄 전체를 쓴다 — 다섯 칸이 한 줄에 선다 */
.enterprise-media-modal__dialog.ent-viewer-v4000 > footer > .ent-viewspec-v4000{
  grid-column:1 / -1!important;
  grid-row:2!important;
}
/* 계약 단추는 설명이 길어도 늘 손 닿는 자리에 있다.
   `space-between` 이 걸려 있는데 안에 든 게 글자 하나뿐이라
   가운데가 아니라 왼쪽에 붙어 있었다 — 가운데로 모은다. */
.enterprise-media-modal__dialog.ent-viewer-v4000 > footer .enterprise-button:not(#_):not(#_){
  grid-column:2!important;
  grid-row:1!important;
  align-self:start!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:170px!important;
  min-height:46px!important;
  padding:0 18px!important;
  border-radius:11px!important;
}
/* 안내 문장은 한 줄로 — 설명칸이 화면의 절반을 먹지 않게 */
.enterprise-media-modal__dialog.ent-viewer-v4000 > footer p{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  margin:0!important;
}
.enterprise-media-modal__dialog.ent-viewer-v4000 > footer h2{
  margin:4px 0 6px!important;
  font-size:20px!important;
  line-height:1.25!important;
}
.enterprise-media-modal__dialog.ent-viewer-v4000 .ent-viewspec-v4000{ margin-top:10px!important; }
.enterprise-media-modal__dialog.ent-viewer-v4000 .ent-viewspec-v4000 > div{ padding:7px 10px!important; }

/* 팝업 안의 재생·일시정지 단추도 제자리에 못 박는다.
   카드 쪽 미리보기 단추만 잡아 두고 여기를 빠뜨렸다 — 실측하니
   마우스를 대는 순간 `translate:0 -2px` 가 걸려 단추가 흔들렸다
   (공용 묶음 arife-unified-v400 이 모든 단추에 거는 규칙).
   `transform` 은 -50% 로 고정한다. 원래 규칙이 hover 에서 -53% 로
   바꿔 3% 더 띄우고 있었고, 재생 중 위치(아래로 내려간 상태)에서도
   같은 값을 쓰므로 이 값으로 묶어 두면 두 상태 다 안 움직인다. */
.enterprise-media-modal__dialog .enterprise-media-stage__control:not(#_):not(#_),
.enterprise-media-modal__dialog .enterprise-media-stage__control:not(#_):not(#_):hover,
.enterprise-media-modal__dialog .enterprise-media-stage__control:not(#_):not(#_):focus-visible,
.enterprise-media-modal__dialog .enterprise-media-stage__control:not(#_):not(#_):active{
  transform:translate(-50%,-50%)!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  filter:none!important;
  overflow:hidden!important;
  transition:border-color .22s ease,background .22s ease,box-shadow .22s ease,opacity .22s ease!important;
}
.enterprise-media-modal__dialog .enterprise-media-stage__control:not(#_):not(#_):hover{
  border-color:#cfc7ff!important;
  background:rgba(12,14,24,.86)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 10px 28px rgba(0,0,0,.48),0 0 26px rgba(140,125,255,.28)!important;
}
/* 카드 단추와 같은 반응 — 위치는 그대로, 바닥에서 필름 띠가 흐른다 */
.enterprise-media-modal__dialog .enterprise-media-stage__control::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  opacity:0;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(207,199,255,.95) 0 14px,
    transparent 14px 18px
  );
  background-size:18px 100%;
  transition:opacity .2s ease;
  pointer-events:none;
}
.enterprise-media-modal__dialog .enterprise-media-stage__control:hover::after,
.enterprise-media-modal__dialog .enterprise-media-stage__control:focus-visible::after{
  opacity:1;
  animation:ent-film-run-v4000 .85s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .enterprise-media-modal__dialog .enterprise-media-stage__control:hover::after{ animation:none; }
}

/* 닫기(×)와 계약 요청 단추도 같은 이유로 3px 씩 들렸다.
   조준해서 누르는 단추가 다가가는 순간 움직이면 빗나간다.
   빛과 테두리로만 반응하게 둔다. */
.enterprise-media-modal__dialog .enterprise-media-modal__close:not(#_):not(#_),
.enterprise-media-modal__dialog .enterprise-media-modal__close:not(#_):not(#_):hover,
.enterprise-media-modal__dialog > footer .enterprise-button:not(#_):not(#_),
.enterprise-media-modal__dialog > footer .enterprise-button:not(#_):not(#_):hover,
.enterprise-media-modal__dialog > footer .enterprise-button:not(#_):not(#_):focus-visible{
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  transform:none!important;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
.enterprise-media-modal__dialog .enterprise-media-modal__close:not(#_):not(#_):hover{
  border-color:rgba(207,199,255,.7)!important;
  background:rgba(14,17,26,.86)!important;
}
.enterprise-media-modal__dialog > footer .enterprise-button:not(#_):not(#_):hover{
  filter:brightness(1.08)!important;
  box-shadow:0 0 26px rgba(140,125,255,.3)!important;
}

/* 영상은 제 해상도 그대로 다 보여 준다.
   `object-fit:cover` 는 상자에 맞추려고 위아래(또는 좌우)를 잘라낸다.
   빌릴 물건을 확인하는 자리에서 잘라 보여 주면 안 된다. */
.enterprise-media-modal__dialog.ent-viewer-v4000 video:not(#_):not(#_){
  object-fit:contain!important;
  background:#04070a!important;
}

/* 좁은 창에서는 위쪽 표시 두 개(워터마크 · 재생 상태)가 서로 겹친다.
   실측: 409px 창에서 'LICENSE PREVIEW · WATERMARKED' 위로
   'PREVIEW PAUSED' 가 올라타 글자가 서로 파묻혔다. 글은 줄이고
   표시는 남긴다 — 워터마크가 찍혀 있다는 사실은 그대로 보인다. */
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .enterprise-media-stage__watermark span{
  display:none!important;
}
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .enterprise-media-stage__watermark{
  left:14px!important;
  top:14px!important;
  padding:7px 9px!important;
}
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .enterprise-media-stage__watermark img{ width:60px!important; }
/* 재생 상태는 옆에 나란히 세우지 않고 워터마크 아래로 내린다.
   좁은 창에서 둘을 한 줄에 두면 어떻게 줄여도 글자가 서로 파묻힌다. */
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .enterprise-media-stage__status{
  left:14px!important;
  right:auto!important;
  top:58px!important;
  max-width:calc(100% - 28px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
/* 좁은 창에서는 설명칸도 한 칸으로 — 단추가 제목을 밀지 않게.
   세로 자산은 영상칸이 길어 설명칸에 줄 자리가 얼마 없다. 안내 문장은
   접고 규격 표를 두 칸으로 줄여 꼭 필요한 것만 남긴다. */
.enterprise-media-modal__dialog.is-ent-narrow-v4000 > footer{
  grid-template-columns:minmax(0,1fr)!important;
  gap:8px!important;
  padding:12px 14px 14px!important;
}
.enterprise-media-modal__dialog.is-ent-narrow-v4000 > footer p{ display:none!important; }
.enterprise-media-modal__dialog.is-ent-narrow-v4000 > footer h2{
  margin:3px 0 0!important;
  font-size:17px!important;
}
/* 규격 표는 세 칸으로 — 다섯 항목이 두 줄에 들어간다.
   두 칸이면 세 줄이 되고, 그 한 줄(약 55px)만큼 영상칸이 작아진다. */
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .ent-viewspec-v4000{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  margin-top:8px!important;
}
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .ent-viewspec-v4000 > div{ padding:6px 8px!important; }
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .ent-viewspec-v4000 dt{ font-size:9.5px!important; }
.enterprise-media-modal__dialog.is-ent-narrow-v4000 .ent-viewspec-v4000 dd{ font-size:10.5px!important; line-height:1.4!important; }
.enterprise-media-modal__dialog.is-ent-narrow-v4000 > footer .enterprise-button{
  grid-column:1!important;
  grid-row:3!important;
  width:100%!important;
}
.enterprise-media-modal__dialog.is-ent-narrow-v4000 > footer > .ent-viewspec-v4000{ grid-row:2!important; }

/* 창이 화면보다 커지지 않게 — 여백은 좁은 화면에서 줄인다 */
.enterprise-media-modal:not(#_):not(#_){ padding:24px!important; }
@media (max-width:720px){
  .enterprise-media-modal:not(#_):not(#_){ padding:10px!important; }
  .enterprise-media-modal__dialog.ent-viewer-v4000{ max-height:100%!important; }
}

/* 팝업 아래 규격 표 */
.ent-viewspec-v4000{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:1px;
  margin:14px 0 0;
  border:1px solid rgba(150,183,222,.16);
  border-radius:12px;
  background:rgba(150,183,222,.16);
  overflow:hidden;
}
.ent-viewspec-v4000 > div{
  display:grid;
  gap:4px;
  padding:9px 12px;
  background:#080d15;
}
.ent-viewspec-v4000 dt{ color:#7f8ea3; font-size:10px; font-weight:700; letter-spacing:.08em; }
.ent-viewspec-v4000 dd{ margin:0; color:#dbe5f3; font-size:12px; font-weight:700; line-height:1.5; word-break:keep-all; }

/* ── 계약 요청 창 ─────────────────────────────────────────────
   미리보기 창과 같은 원칙으로 다시 세운다.

   실측한 문제
     · 창 안쪽이 1254px 인데 화면에 보이는 건 918px — 아래가 잘렸다.
     · 왼쪽 글칸이 1120px 로 부풀어(높이 100%를 물려받아) 제목 아래로
       한참 늘어졌고, 그 위에 320px 짜리 장식 원이 떠서 제목을 덮었다.
     · '기업 라이선스 계약 요청' 이 '요 / 청' 으로 잘려 두 줄이 됐다.

   고치는 방향
     창은 화면 안에 들어오고, 길어지는 쪽(입력 폼)만 저 혼자 움직인다.
     왼쪽은 무엇을 계약하는지 보여 주는 자리 — 그림은 자산 화면비대로,
     글은 짧게. */
.license-modal:not(#_):not(#_){ padding:24px!important; }
.license-modal > section:not(#_):not(#_){
  display:flex!important;
  flex-direction:column!important;
  width:min(1080px,100%)!important;
  /* 창 높이에서 여백을 빼는 계산은 여백이 바뀔 때마다 어긋난다
     (실측: 1px~25px 씩 화면 밖으로 나갔다). 부모의 안쪽 높이를
     그대로 물려받으면 여백이 얼마든 정확히 맞는다. */
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
/* 배치에 `min-height:680px` 이 걸려 있어 칸이 줄어들지 못했다.
   그래서 창이 안쪽에서 잘리고(1254 중 918만 보임) 정작 폼은
   제 스크롤을 못 썼다. 최소 높이를 풀어 칸이 창에 맞춰 줄게 한다. */
/* 창과 배치 사이에 이름 없는 상자가 하나 더 있다(모달 본문).
   이 상자가 안 줄어들어서 아래 배치도 못 줄었다 — 실측하니 폼 칸이
   934px 인데 창은 802px, 132px 이 잘려 있었고 폼은 제 스크롤을 못 썼다. */
.license-modal > section > div:not([class]):not(#_):not(#_){
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
}
.license-modal > section > p:not(#_):not(#_){
  flex:0 0 auto!important;
  margin:0!important;
  padding:0 26px 14px!important;
}

.license-modal .enterprise-request-layout:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  /* 줄 높이를 `1fr` 로 못 박아야 두 칸이 창 높이 안에서 줄어든다.
     `max-height:100%` 만으로는 부모 높이가 확정되지 않아 안 먹었다
     (실측: 폼 칸이 934px 인데 창은 802px — 132px 이 잘려 있었다). */
  grid-template-rows:minmax(0,1fr)!important;
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:100%!important;
  overflow:hidden!important;
}
/* 왼쪽 — 제 화면비대로 놓인 그림과 짧은 설명 */
.license-modal .enterprise-request-preview:not(#_):not(#_){
  min-height:0!important;
  height:100%!important;
  padding:22px!important;
  overflow:auto!important;
}
/* 320px 짜리 장식 원은 글 위로 떠올라 제목을 덮기만 했다 — 걷는다.
   자산 그림은 아래 `__visual` 이 제 화면비로 이미 보여 준다. */
.license-modal .enterprise-request-preview::before{ content:none!important; }

/* 높이에 뚜껑만 씌우면 세로 자산에서 화면비가 깨진다(실측: 9:16 인데
   1.33 로 납작해졌다). 높이 한계를 화면비로 되돌려 '너비'를 줄인다 —
   그러면 높이는 저절로 한계 안에 들어오고 비율은 그대로다. */
.license-modal .enterprise-request-preview__visual:not(#_):not(#_){
  position:relative!important;
  aspect-ratio:var(--ent-ar,16 / 9)!important;
  width:min(100%,calc(min(34vh,320px) * var(--ent-arnum,1.7778)))!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin-inline:auto!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
/* 'RIGHTS VERIFIED' 와 규격 띠가 둘 다 왼쪽 위라 글자가 포개졌다
   (실측: 규격 칩 뒤로 …IED 가 삐져나와 보였다). 권리 표시는 아래로. */
.license-modal .enterprise-request-preview__visual > span:not(#_):not(#_){
  left:12px!important;
  top:auto!important;
  bottom:12px!important;
  padding:4px 8px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:7px!important;
  background:rgba(4,7,11,.6)!important;
  font-size:9.5px!important;
  letter-spacing:.12em!important;
}
/* 규격 띠는 `<u>` 로 들어와 밑줄이 그어졌다 */
.license-modal .ent-spec-v4000:not(#_):not(#_){
  left:12px!important;
  top:12px!important;
  text-decoration:none!important;
}

/* 글칸이 높이 100% 를 물려받아 1120px 로 부풀던 것 */
.license-modal .enterprise-request-preview__content:not(#_):not(#_){
  display:block!important;
  height:auto!important;
  min-height:0!important;
  margin-top:14px!important;
}
.license-modal .enterprise-request-preview__content > p:first-child{
  margin:0 0 4px!important;
  color:#5fd6f5!important;
  font:850 10px/1 ui-monospace,Consolas,monospace!important;
  letter-spacing:.18em!important;
}
.license-modal .enterprise-request-preview h2:not(#_):not(#_){
  margin:0 0 8px!important;
  font-size:clamp(20px,2vw,26px)!important;
  line-height:1.2!important;
  letter-spacing:-.04em!important;
  word-break:keep-all!important;
}
.license-modal .enterprise-request-preview__content > span{
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  color:#a4b1c3!important;
  font-size:12.5px!important;
  line-height:1.75!important;
  word-break:keep-all!important;
}
.license-modal .enterprise-request-preview__content > div{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin:10px 0 0!important;
}
.license-modal .enterprise-request-preview__content > div b{
  padding:4px 9px!important;
  border:1px solid rgba(151,197,231,.16)!important;
  border-radius:999px!important;
  background:rgba(151,197,231,.05)!important;
  color:#8f9fb1!important;
  font:700 11px/1.4 inherit!important;
}
.license-modal .enterprise-request-preview__content dl{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:6px 12px!important;
  margin:14px 0 0!important;
  padding-top:12px!important;
  border-top:1px solid rgba(151,197,231,.14)!important;
}
.license-modal .enterprise-request-preview__content dt{ color:#7f8ea3!important; font-size:11px!important; white-space:nowrap!important; }
.license-modal .enterprise-request-preview__content dd{ margin:0!important; color:#dbe5f3!important; font-size:12px!important; line-height:1.5!important; word-break:keep-all!important; }

/* 오른쪽 — 길어지는 입력 폼만 저 혼자 움직인다 */
.license-modal .enterprise-request-panel:not(#_):not(#_){
  min-height:0!important;
  height:100%!important;
  padding:24px 26px 26px!important;
  overflow:auto!important;
}
.license-modal .enterprise-request-panel h2:not(#_):not(#_){
  margin:6px 0 8px!important;
  font-size:clamp(20px,2vw,26px)!important;
  line-height:1.25!important;
  word-break:keep-all!important;   /* '요 / 청' 으로 갈라지던 것 */
}
.license-modal .enterprise-request-panel > p:not(#_):not(#_){
  margin:0 0 4px!important;
  font-size:13px!important;
  line-height:1.7!important;
  word-break:keep-all!important;
}
.license-modal .enterprise-request-panel form:not(#_):not(#_){ gap:12px!important; margin-top:16px!important; }
.license-modal .enterprise-request-panel input:not(#_):not(#_),
.license-modal .enterprise-request-panel select:not(#_):not(#_){ height:46px!important; }
.license-modal .enterprise-request-panel textarea:not(#_):not(#_){ min-height:84px!important; }

/* ── 창 안의 조작부 세 가지 ───────────────────────────────────
   보고 나서야 안 맞는다는 걸 알았다. 실측한 값은 이렇다.
     닫기(×)  속이 비어 있어(배경 투명) 폼 글자가 비쳐 보였고,
              폼 칸 위에 얹혀 있어 굴리면 글이 그 밑으로 지나갔다.
     동의칸   20×46px — 네모 칸이 세로로 늘어나 있었다. 브라우저
              기본 모양 그대로라 나머지 화면과 옷이 달랐다.
     보내기   `space-between` 인데 안에 화살표 하나뿐이라 글자는
              왼쪽, 화살표는 맨 오른쪽으로 갈라져 있었다.
              모서리도 14px 로 입력칸(11px)과 안 맞았다. */

/* 닫기 — 속을 채우고 글 위로 확실히 올린다 */
.license-modal .license-modal-close:not(#_):not(#_){
  z-index:9!important;
  right:14px!important;
  top:14px!important;
  width:40px!important;
  height:40px!important;
  border:1px solid rgba(151,197,231,.28)!important;
  border-radius:50%!important;
  background:#111823!important;
  box-shadow:0 6px 18px rgba(0,0,0,.5)!important;
  color:#dbe5f3!important;
  font-size:20px!important;
  line-height:1!important;
}
.license-modal .license-modal-close:not(#_):not(#_):hover{
  border-color:rgba(207,199,255,.7)!important;
  background:#161e2b!important;
  translate:none!important;
  transform:none!important;
}
/* 제목이 닫기 밑으로 들어가지 않게 그만큼 자리를 비운다 */
.license-modal .enterprise-request-panel > .enterprise-heading:not(#_):not(#_),
.license-modal .enterprise-request-panel > h2:not(#_):not(#_){
  padding-right:54px!important;
}

/* 동의 — 네모 칸을 직접 그린다. 늘어나지 않고 글 첫 줄과 맞선다 */
.license-modal .license-consent:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:start!important;
  gap:11px!important;
  padding:2px 0!important;
  cursor:pointer!important;
}
.license-modal .license-consent input[type="checkbox"]:not(#_):not(#_){
  appearance:none!important;
  -webkit-appearance:none!important;
  width:20px!important;
  height:20px!important;
  min-height:0!important;
  flex:none!important;
  margin:0!important;
  padding:0!important;
  align-self:start!important;
  display:grid!important;
  place-content:center!important;
  border:1px solid rgba(151,197,231,.34)!important;
  border-radius:6px!important;
  background:rgba(9,15,23,.9)!important;
  cursor:pointer!important;
  transition:border-color .16s ease,background .16s ease!important;
}
.license-modal .license-consent input[type="checkbox"]:not(#_):not(#_)::after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid #04212b;
  border-bottom:2px solid #04212b;
  transform:rotate(-45deg) translate(1px,-1px);
  opacity:0;
  transition:opacity .12s ease;
}
.license-modal .license-consent input[type="checkbox"]:not(#_):not(#_):checked{
  border-color:#5fd6f5!important;
  background:#5fd6f5!important;
}
.license-modal .license-consent input[type="checkbox"]:not(#_):not(#_):checked::after{ opacity:1; }
.license-modal .license-consent input[type="checkbox"]:not(#_):not(#_):focus-visible{
  outline:0!important;
  box-shadow:0 0 0 3px rgba(95,214,245,.22)!important;
}
.license-modal .license-consent > span:not(#_):not(#_){
  color:#b6c3d3!important;
  font-size:12.5px!important;
  font-weight:600!important;
  line-height:20px!important;   /* 네모 칸과 첫 줄을 나란히 */
  word-break:keep-all!important;
}

/* 보내기 — 글자와 화살표를 가운데로 모으고 입력칸과 같은 모서리로 */
.license-modal .enterprise-request-panel form .enterprise-button:not(#_):not(#_),
.license-modal .enterprise-request-panel form button[type="submit"]:not(#_):not(#_){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-height:52px!important;
  margin-top:4px!important;
  padding:0 18px!important;
  border-radius:11px!important;
  font-size:15px!important;
  font-weight:800!important;
  translate:none!important;
  transform:none!important;
}
.license-modal .enterprise-request-panel form .enterprise-button > span:not(#_):not(#_),
.license-modal .enterprise-request-panel form .enterprise-button > b:not(#_):not(#_){
  flex:0 0 auto!important;
  margin:0!important;
}

/* 좁은 화면 — 한 칸으로 세우고 창 전체가 움직인다 */
@media (max-width:860px){
  .license-modal:not(#_):not(#_){ padding:10px!important; }
  .license-modal > section:not(#_):not(#_){
    max-height:100%!important;
    overflow:auto!important;
  }
  .license-modal .enterprise-request-layout:not(#_):not(#_){
    grid-template-columns:minmax(0,1fr)!important;
  }
  .license-modal > section > div:not([class]):not(#_):not(#_){
    display:block!important;
    overflow:visible!important;
  }
  .license-modal .enterprise-request-layout:not(#_):not(#_){
    grid-template-rows:auto auto!important;
    overflow:visible!important;
  }
  .license-modal .enterprise-request-preview:not(#_):not(#_),
  .license-modal .enterprise-request-panel:not(#_):not(#_){
    height:auto!important;
    overflow:visible!important;
  }
  /* 높이에 뚜껑을 씌우면 또 비율이 깨진다(실측: 1:1 이 1.02 로 눌렸다).
     좁은 화면에서도 '너비' 쪽을 줄여 비율을 지킨다. */
  .license-modal .enterprise-request-preview__visual:not(#_):not(#_){
    width:min(100%,calc(min(30vh,280px) * var(--ent-arnum,1.7778)))!important;
    max-height:none!important;
  }
}

/* ── 6) 좁은 화면 ───────────────────────────────────────────── */
@media (max-width:760px){
  .enterprise-license-page .enterprise-grid:not(#_):not(#_){
    grid-template-columns:1fr!important;
  }
  .enterprise-license-page .enterprise-filterbar__tools:not(#_):not(#_){
    flex:1 1 100%!important;
  }
  .enterprise-license-page .enterprise-filterbar__tools input:not(#_):not(#_){ width:auto!important; flex:1 1 auto!important; }
  .enterprise-license-page .enterprise-filterbar__tools select:not(#_):not(#_){ width:130px!important; flex:0 0 auto!important; }
}