/* ============================================================
   ARIFE AI생성 카드 · 확대 팝업 재디자인 v1111

   무엇이 문제였나 (실측)
     · 카드 속 그림 칸이 16:10 인데 object-fit:contain 이라, 초광각 그림은
       위아래가 전부 검은 여백이 됐다. 결과물 10장을 재보니 1:1 한 장,
       1.3~1.8 세 장, 2.7~4 다섯 장, 10:1 한 장 — 절반 이상이 초광각이다.
       10:1 짜리는 카드의 16% 만 그림이었다.
     · '✎부분 편집' 단추가 떠 있지 않고 흐름에 끼어, 카드마다 아래쪽에
       42px 씩 빈 자리를 만들고 있었다.
     · 카드와 팝업만 어두운 색으로 남아 밝은 물방울 배경 위에 떠 보였다.

   어떻게 했나
     · 카드는 크기를 하나로 통일한다(16:10, 채우기). 줄이 칼같이 맞는다.
       그림이 잘리는 건 목록에서만이고, 눌러서 크게 보면 원래 비율 그대로 뜬다.
     · 단추 두 개를 그림 위에 제대로 띄운다. 왼쪽 위 '부분 편집',
       오른쪽 위 '삭제'. 평소엔 숨고 손을 올리면 나온다.
     · 카드와 팝업 모두 물방울 밝은 판으로 맞춘다.

   특이도 메모
     이 화면은 CSS 가 38개 시트에 겹쳐 있고 !important 가 곳곳에 있다.
     그래서 이 파일은 맨 뒤에서 읽히고, :not(#nope) 세 번으로 ID 3개 무게를
     얻어 확실히 이긴다. (프로젝트에서 쓰던 방식 그대로)
   ============================================================ */

/* ─────────────────────────────────────────────
   ① 카드 : 크기 하나로 통일
   ───────────────────────────────────────────── */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 10 !important;   /* 모든 카드가 같은 크기 */
  object-fit: cover !important;       /* 남는 여백 없이 채운다 */
  object-position: center !important;
  display: block !important;
  border-radius: 15px 15px 0 0 !important;
  background: rgba(214, 226, 242, .5) !important;   /* 늦게 뜨는 동안의 자리 */
}

html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card {
  position: relative !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 17px !important;
  background:
    radial-gradient(92% 58% at 50% 4%, rgba(255,255,255,.98), rgba(255,255,255,.6) 34%, transparent 58%),
    linear-gradient(180deg, rgba(234,241,250,.38), rgba(196,220,250,.5) 86%) !important;
  box-shadow:
    inset 0 2px 1px -1px #fff,
    inset 0 -9px 14px -8px #fff,
    inset 0 -1.5px 2px rgba(90,140,220,.5),
    inset 0 0 0 1px rgba(160,196,244,.5),
    0 14px 22px -12px rgba(96,156,240,.42) !important;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease !important;
  cursor: zoom-in !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 2px 1px -1px #fff,
    inset 0 -9px 14px -8px #fff,
    inset 0 -1.5px 2px rgba(90,140,220,.5),
    inset 0 0 0 1px rgba(170,205,250,.72),
    0 20px 30px -14px rgba(96,156,240,.55) !important;
}
/* 예전에 그림 위에 깔던 어두운 그라데이션 제거 */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card::after {
  content: none !important;
}

/* ─────────────────────────────────────────────
   ② 글자 띠 : 그림 아래
   ───────────────────────────────────────────── */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 1px 8px !important;
  inset: auto !important;
  padding: 9px 12px 11px !important;
  background: none !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer strong {
  grid-column: 1 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  color: #1d3557 !important; font-size: 12px !important; font-weight: 800 !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer small {
  grid-column: 1 !important;
  color: #6b83a6 !important; font-size: 11px !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer a,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer button {
  grid-column: 2 !important; grid-row: 1 / 3 !important;
  align-self: center !important;
  padding: 7px 11px !important;
  border: 0 !important; border-radius: 999px !important;
  background:
    radial-gradient(92% 58% at 50% 4%, rgba(255,255,255,.98), rgba(255,255,255,.55) 36%, transparent 60%),
    linear-gradient(180deg, rgba(238,244,252,.55), rgba(200,222,250,.6) 86%) !important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.55),
    0 8px 14px -9px rgba(96,156,240,.5) !important;
  color: #21467e !important;
  font-size: 11px !important; font-weight: 800 !important;
  text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important;
  transition: background .15s ease, color .15s ease !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer a:hover,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer button:hover {
  background: linear-gradient(180deg, rgba(112,168,244,.9), rgba(28,86,190,.95) 82%, rgba(64,124,214,.95)) !important;
  color: #fff !important;
}
/* '영상으로 만들기' 는 아래 줄 전체를 쓴다 */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card > footer [data-to-video] {
  grid-column: 1 / -1 !important; grid-row: auto !important;
  justify-self: stretch !important; text-align: center !important;
  margin-top: 7px !important;
}

/* ─────────────────────────────────────────────
   ③ 그림 위 단추 두 개 : 부분 편집 · 삭제
      평소엔 숨고, 카드에 손을 올리면 살짝 내려오며 나타난다.
      손가락 기기는 hover 가 없으므로 항상 보이게 둔다.
   ───────────────────────────────────────────── */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .ip-open-btn,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-delete {
  position: absolute !important;
  top: 10px !important; bottom: auto !important;
  z-index: 5 !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  min-height: 0 !important;
  width: auto !important; margin: 0 !important;
  padding: 7px 12px !important;
  border: 0 !important; border-radius: 999px !important;
  background:
    radial-gradient(92% 58% at 50% 4%, rgba(255,255,255,1), rgba(255,255,255,.82) 40%, rgba(255,255,255,.68) 100%) !important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 10px 18px -10px rgba(20,40,80,.55) !important;
  font-size: 11.5px !important; font-weight: 850 !important;
  line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important;
  opacity: 0 !important; transform: translateY(-5px) !important;
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1), background .15s ease, color .15s ease !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .ip-open-btn {
  left: 10px !important; right: auto !important;
  inset: 10px auto auto 10px !important;
  color: #1c4a86 !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-delete {
  right: 10px !important; left: auto !important;
  inset: 10px 10px auto auto !important;
  color: #a92f47 !important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(232,160,178,.7),
    0 10px 18px -10px rgba(90,20,40,.5) !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card:hover .ip-open-btn,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card:hover .image-result-delete,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card:focus-within .ip-open-btn,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card:focus-within .image-result-delete {
  opacity: 1 !important; transform: translateY(0) !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .ip-open-btn:hover {
  background: linear-gradient(180deg, rgba(112,168,244,.95), rgba(28,86,190,.98) 82%) !important;
  color: #fff !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-delete:hover {
  background: linear-gradient(180deg, rgba(244,124,148,.95), rgba(186,32,64,.98) 82%) !important;
  color: #fff !important;
}
@media (hover: none) {
  html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .ip-open-btn,
  html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-delete {
    opacity: 1 !important; transform: none !important;
  }
}

/* ─────────────────────────────────────────────
   ④ 업로드 칸 · 빈 칸도 같은 판으로
   ───────────────────────────────────────────── */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-upload,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-empty-card {
  min-height: 214px !important;   /* 16:10 카드 한 장과 비슷한 키 */
  border: 0 !important; border-radius: 17px !important;
  background:
    radial-gradient(92% 58% at 50% 4%, rgba(255,255,255,.98), rgba(255,255,255,.6) 34%, transparent 58%),
    linear-gradient(180deg, rgba(234,241,250,.38), rgba(196,220,250,.5) 86%) !important;
  box-shadow:
    inset 0 2px 1px -1px #fff,
    inset 0 -9px 14px -8px #fff,
    inset 0 -1.5px 2px rgba(90,140,220,.5),
    inset 0 0 0 1px rgba(160,196,244,.5),
    0 14px 22px -12px rgba(96,156,240,.42) !important;
  color: #2b4f86 !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-upload small,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-empty-card small {
  color: #7089ad !important;
}

/* ─────────────────────────────────────────────
   ⑤ 격자 간격
   ───────────────────────────────────────────── */
/* v1113 — CSS 다단(column-width)에서 진짜 격자(grid)로 바꾼다.
   다단은 "칸 높이를 고르게 만드는" 방식이라, 칸 수가 적거나 높이가 다르면
   오른쪽 열을 아예 안 쓰고 왼쪽에 몰아 넣는다(실측: 폭은 남는데 한 줄만 쓴다).
   이제 카드 크기가 전부 같으므로 격자가 더 맞다 —
   폭이 남으면 반드시 칸을 더 만들고, 줄도 칼같이 맞는다. */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
  align-items: start !important;
  column-width: auto !important;
  column-count: auto !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > * {
  margin: 0 !important;
  width: auto !important;
  break-inside: auto !important;
}

/* ═════════════════════════════════════════════
   ⑥ 확대 팝업 — 물방울로
      상자 크기는 원래 코드가 그림 비율(--pz-ar)로 계산한다.
      여기서는 색과 마감만 바꾼다.
   ═════════════════════════════════════════════ */
/* 배경 덮개.
   이 요소는 <button> 이라, 사이트 전체에 건 물방울 단추 규칙이 여기까지 와서
   알약 모양으로 쪼그라뜨려 놓았다 — 실측 2×32px, position:relative.
   그래서 화면을 못 덮고, 안쪽 ✕ 도 엉뚱한 자리에 앉았다. 원래대로 되돌린다. */
html body:not(#nope):not(#_):not(#_) .pz-lb-back {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  min-width: 0 !important; min-height: 0 !important;
  max-width: none !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  transform: none !important;
  /* 덮개가 반투명하면 뒤에 칸이 있는 가운데는 하얗게, 칸이 없는 양옆은
     파랗게 비쳐서 세로 줄이 생긴다(실측). 거의 불투명하게 덮어 없앤다. */
  background: radial-gradient(125% 100% at 50% 38%,
    rgba(238, 244, 251, .975), rgba(206, 219, 238, .985) 70%, rgba(194, 209, 232, .99)) !important;
  backdrop-filter: blur(20px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.08) !important;
  cursor: zoom-out !important;
}
/* 닫기 × — 배경 자체가 닫기 단추라 여기에 표시만 얹는다 */
html body:not(#nope):not(#_):not(#_) .pz-lb-back::after {
  content: "✕";
  position: absolute; top: 22px; right: 26px; left: auto; bottom: auto;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background:
    radial-gradient(92% 58% at 50% 4%, rgba(255,255,255,1), rgba(255,255,255,.8) 40%, rgba(255,255,255,.66) 100%);
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 12px 22px -12px rgba(20,40,80,.5);
  color: #244d8a; font-size: 15px; font-weight: 800;
}
html body:not(#nope):not(#_):not(#_) .pz-lb-box {
  border: 0 !important;
  border-radius: 22px !important;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.98), rgba(255,255,255,.72) 38%, transparent 62%),
    linear-gradient(180deg, rgba(238,244,252,.72), rgba(206,226,250,.78) 88%) !important;
  box-shadow:
    inset 0 2px 1px -1px #fff,
    inset 0 -10px 16px -9px #fff,
    inset 0 0 0 1px rgba(160,196,244,.62),
    0 40px 90px -34px rgba(24,52,100,.6) !important;
}
html body:not(#nope):not(#_):not(#_) .pz-lb-box img {
  background: rgba(214,226,242,.6) !important;
  border-radius: 22px 22px 0 0 !important;
  object-fit: contain !important;     /* 크게 볼 때는 자르지 않는다 */
}
html body:not(#nope):not(#_):not(#_) .pz-lb-box figcaption {
  border-top: 1px solid rgba(160,196,244,.5) !important;
  background: rgba(255,255,255,.35) !important;
  padding: 15px 20px 18px !important;
}
html body:not(#nope):not(#_):not(#_) .pz-lb-style { color: #1f5bb0 !important; }
html body:not(#nope):not(#_):not(#_) .pz-lb-size  { color: #6b83a6 !important; }
html body:not(#nope):not(#_):not(#_) .pz-lb-prompt {
  color: #24384f !important;
  background: rgba(255,255,255,.5) !important;
  border-radius: 13px !important;
  padding: 11px 13px !important;
  box-shadow: inset 0 0 0 1px rgba(160,196,244,.4) !important;
}
html body:not(#nope):not(#_):not(#_) .pz-lb-copy {
  border: 0 !important; border-radius: 999px !important;
  background:
    radial-gradient(92% 58% at 50% 4%, rgba(255,255,255,.98), rgba(255,255,255,.55) 36%, transparent 60%),
    linear-gradient(180deg, rgba(238,244,252,.6), rgba(200,222,250,.66) 86%) !important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 10px 18px -11px rgba(96,156,240,.55) !important;
  color: #21467e !important;
}
html body:not(#nope):not(#_):not(#_) .pz-lb-copy:hover {
  background: linear-gradient(180deg, rgba(112,168,244,.92), rgba(28,86,190,.96) 82%) !important;
  color: #fff !important;
}

/* ─────────────────────────────────────────────
   ⑦ 참조 이미지 업로드 칸 제거 (v1112)
      이미지 생성 쪽에 참조 이미지를 넣는 자리가 따로 있어서 중복이었다.
      목록 맨 앞자리를 차지하고 있어 결과물이 한 칸씩 밀리기도 했다.
      기능 자체는 그대로 두고 이 목록에서만 감춘다.
   ───────────────────────────────────────────── */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-upload {
  display: none !important;
}

/* ─────────────────────────────────────────────
   ⑧ 삭제 단추 마감 (v1112)
      다른 시트가 ::after 로 '×' 를 덧붙이고 있어서 '삭제 ×' 로 보였다(실측).
      글자는 '삭제' 하나면 충분하다.
   ───────────────────────────────────────────── */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-delete::after,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-delete::before {
  content: none !important;
  display: none !important;
}

/* 확대 창 뒤 배경막 — 뒤 페이지의 흰 기둥·파란 여백이 비쳐
   세로로 갈라져 보였다(2026-08-15). 비치지 않는 한 장짜리 막으로. */
html body:not(#nope):not(#_):not(#_) .pz-lb-back{
  background:radial-gradient(120% 90% at 50% 0%, rgba(242,247,253,.99), rgba(221,233,248,.99) 70%, rgba(211,226,245,.99))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* ── 빛 바꾸기 알약 (v1700) ────────────────────────────────
   '부분 편집'(왼쪽 위) · '삭제'(오른쪽 위)와 같은 계통으로 맞춘다.
   자리를 두 번 옮겼다.
     ① 어두운 알약 · 카드 맨 아래 — 밝은 띠 위에 검은 알약이 혼자 떠서
        다른 화면에서 온 물건처럼 보였다.
     ② 흰 알약 · 카드 맨 아래 — 색은 맞았지만 자리가 그림 밖(이름이 적힌
        띠 위)이라 'ARIFE' 글자와 겹쳤다.
   카드 아래쪽은 띠 높이에 따라 자리가 흔들린다. 그래서 흔들리지 않는
   위쪽에 붙인다 — '부분 편집' 바로 아래. 왼쪽에 둘, 오른쪽에 삭제 하나.
   같은 그림에 하는 일끼리 한쪽에 모이는 편이 눈에도 편하다. */
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-relight {
  position: absolute !important;
  inset: 48px auto auto 10px !important;   /* '부분 편집'(top:10, 높이 약 29) 바로 아래 */
  z-index: 5 !important;
  display: inline-flex !important; align-items: center !important;
  width: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 7px 12px !important;
  border: 0 !important; border-radius: 999px !important;
  background:
    radial-gradient(92% 58% at 50% 4%, rgba(255,255,255,1), rgba(255,255,255,.82) 40%, rgba(255,255,255,.68) 100%) !important;
  box-shadow:
    inset 0 1.5px 1px -1px #fff,
    inset 0 0 0 1px rgba(160,196,244,.6),
    0 10px 18px -10px rgba(20,40,80,.55) !important;
  color: #1c4a86 !important;
  font-size: 11.5px !important; font-weight: 850 !important;
  line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important;
  opacity: 0 !important; transform: translateY(-5px) !important;   /* 위 두 알약과 같은 방향으로 내려온다 */
  transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1), background .15s ease, color .15s ease !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card:hover .image-result-relight,
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card:focus-within .image-result-relight {
  opacity: 1 !important; transform: translateY(0) !important;
}
html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-relight:hover {
  background: linear-gradient(180deg, rgba(112,168,244,.95), rgba(28,86,190,.98) 82%) !important;
  color: #fff !important;
}
/* 손가락 기기는 hover 가 없다 — 늘 보이게 둔다(위 두 알약과 같은 규칙) */
@media (hover: none) {
  html body.image-studio-page:not(#nope):not(#_):not(#_) #image-result-grid > .image-result-card .image-result-relight {
    opacity: 1 !important; transform: none !important;
  }
}