/* ============================================================
   ARIFE 생성 모델 고르기 — 유리 팝업 v4400

   무엇이 잘못돼 있었나 (1600px 실측, 2026-08-02)
     · 칸이 겹쳐 잘렸다. 칸 안에 든 것은 208px 인데 칸은 182px 로
       서서, '선택' 단추가 아래 칸 머리글 위로 26px 씩 튀어나왔다.
       카드 여덟 장이 모두 그랬다.
       원인은 `<button>` 을 격자로 쓴 것이다. 단추는 속 내용으로
       제 키를 재지 못해(크로미움), 줄 높이가 `min-height:182px` 에
       그대로 묶였다. 그래서 키를 못 박고, 설명을 두 줄로 자른다.
     · 판이 불투명한 회색(#1b1f22)이라 유리판으로 바꾼 아래 콘솔과
       따로 놀았다.
     · 폭이 760px 로 묶여 1600px 화면에서도 두 열이었다.
     · 마우스를 대면 카드가 1px 들썩였다(transform:translateY(-1px)).

   어떻게 바꾸나
     판   콘솔과 같은 유리 — 흐림 26px, 어두운 막을 얇게
     규격 화면이 넓으면 세 열, 좁으면 두 열, 더 좁으면 한 열
     구조 머리글 / 갈래 고르기 / 카드밭 세 층으로 또렷하게
     카드 눈썹 · 이름 · 설명 두 줄 · 규격 딱지 · 고르기 단추 순서로
          키를 못 박아 모두 같은 크기
     효과 닿으면 빛 띠가 좌우로 흐른다 — 자리는 움직이지 않는다
   ============================================================ */

/* ── 1) 뒤를 가리는 막 ───────────────────────────────────────── */
.image-modal .image-modal-backdrop:not(#_):not(#_){
  background:rgba(2,6,12,.62)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1)!important;
  backdrop-filter:blur(14px) saturate(1.1)!important;
}

/* ── 2) 유리판 ───────────────────────────────────────────────── */
.image-model-dialog:not(#_):not(#_){ grid-template-rows:auto auto minmax(0,1fr)!important; }
.image-library-dialog:not(#_):not(#_){ grid-template-rows:auto minmax(0,1fr)!important; }

.image-model-dialog:not(#_):not(#_),
.image-library-dialog:not(#_):not(#_){
  width:min(1120px,calc(100vw - 48px))!important;
  max-height:min(860px,calc(100vh - 96px))!important;
  overflow:hidden!important;
  border:1px solid rgba(151,197,231,.22)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(12,19,30,.78),rgba(7,11,18,.84))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.09)!important;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .image-model-dialog:not(#_):not(#_),
  .image-library-dialog:not(#_):not(#_){
    background:linear-gradient(180deg,rgba(12,19,30,.6),rgba(7,11,18,.68))!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.25)!important;
    backdrop-filter:blur(26px) saturate(1.25)!important;
  }
}

/* ── 3) 머리글 ───────────────────────────────────────────────── */
.image-model-dialog > header:not(#_):not(#_),
.image-library-dialog > header:not(#_):not(#_){
  align-items:center!important;
  min-height:0!important;
  padding:20px 22px 16px!important;
  border-bottom:1px solid rgba(151,197,231,.14)!important;
  background:transparent!important;
}
.image-model-dialog > header h2:not(#_):not(#_),
.image-library-dialog > header h2:not(#_):not(#_){
  margin:0!important;
  color:#f0f6ff!important;
  font-size:20px!important;
  letter-spacing:-.03em!important;
}
.image-model-dialog > header p:not(#_):not(#_),
.image-library-dialog > header p:not(#_):not(#_){
  margin:6px 0 0!important;
  color:#8b9bb1!important;
  font-size:12px!important;
  line-height:1.5!important;
}
/* 닫기는 정사각 하나 — 글자와 겹치지 않게 자리를 비워 둔다 */
.image-model-dialog > header > button:not(#_):not(#_),
.image-library-dialog > header > button:not(#_):not(#_){
  flex:0 0 auto!important;
  width:40px!important;
  height:40px!important;
  padding:0!important;
  border:1px solid rgba(151,197,231,.2)!important;
  border-radius:12px!important;
  background:rgba(9,15,24,.55)!important;
  color:#cfdcec!important;
  font-size:18px!important;
}

/* ── 4) 갈래 고르기 줄 ──────────────────────────────────────── */
.image-model-tools:not(#_):not(#_){
  padding:14px 22px 0!important;
  border-bottom:0!important;
  background:transparent!important;
}
#image-model-families:not(#_):not(#_){
  display:flex!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  padding:4px!important;
  border:1px solid rgba(151,197,231,.16)!important;
  border-radius:13px!important;
  background:rgba(6,12,20,.42)!important;
}
#image-model-families button:not(#_):not(#_){
  position:relative!important;
  overflow:hidden!important;
  min-height:34px!important;
  padding:0 13px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#8b9bb1!important;
  font-size:11.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  transition:color .18s ease,background-color .18s ease!important;
}
#image-model-families button.active:not(#_):not(#_){
  background:rgba(95,214,245,.16)!important;
  color:#bdeeff!important;
}

/* ── 5) 카드밭 : 넓으면 세 열 ───────────────────────────────── */
.image-model-options:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr))!important;
  /* 줄 높이를 못 박는다. 단추는 제 속을 못 재서(위 머리말 참고)
     `auto` 로 두면 줄이 182px 로 주저앉고 내용이 아래로 삐져나온다. */
  grid-auto-rows:202px!important;
  align-content:start!important;
  gap:10px!important;
  padding:14px 22px 22px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}

/* ── 6) 카드 한 장 ───────────────────────────────────────────── */
.image-model-option:not(#_):not(#_){
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  /* 위 칸이 남는 자리를 먹고, 고르기 단추는 언제나 카드 바닥에 붙는다.
     `margin-top:auto` 만으로는 안 된다 — 칸이 내용 크기로 잡혀 설명
     길이에 따라 단추 높이가 카드마다 달라졌다. */
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:10px!important;
  min-width:0!important;
  min-height:0!important;
  height:202px!important;
  padding:16px 16px 14px!important;
  overflow:hidden!important;
  border:1px solid rgba(151,197,231,.16)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.04)!important;
  color:#e8f0fb!important;
  text-align:left!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease!important;
}
.image-model-option-copy:not(#_):not(#_){
  display:grid!important;
  align-content:start!important;
  gap:6px!important;
  min-width:0!important;
}
.image-model-option-copy > small:not(#_):not(#_){
  color:#6fd3ee!important;
  font:850 10.5px/1.2 Consolas,monospace!important;
  letter-spacing:.1em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.image-model-option-copy > strong:not(#_):not(#_){
  color:#f2f7ff!important;
  font-size:15px!important;
  font-weight:820!important;
  letter-spacing:-.02em!important;
}
/* 설명은 두 줄로 자른다 — 모델마다 길이가 달라 카드 키가 들쭉날쭉했다 */
.image-model-option-copy > em:not(#_):not(#_){
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  min-height:34px!important;
  color:#8a9ab0!important;
  font-size:11.5px!important;
  font-style:normal!important;
  line-height:1.5!important;
}
.image-model-option-specs:not(#_):not(#_){
  display:flex!important;
  flex-wrap:wrap!important;
  gap:4px!important;
  margin-top:2px!important;
}
.image-model-option-specs b:not(#_):not(#_){
  padding:4px 7px!important;
  border:1px solid rgba(151,197,231,.14)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.04)!important;
  color:#93a4ba!important;
  font-size:10.5px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
/* 고르기 단추는 언제나 카드 맨 아래 같은 자리에 */
.image-model-option > b:not(#_):not(#_){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:38px!important;
  height:38px!important;
  margin-top:auto!important;
  border:1px solid rgba(151,197,231,.18)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.05)!important;
  color:#b9c8dc!important;
  font-size:11.5px!important;
  font-weight:800!important;
}

/* 지금 쓰는 모델 — 아래 콘솔의 '이미지 생성' 과 같은 청록으로 맞춘다 */
.image-model-option.active:not(#_):not(#_){
  border-color:rgba(120,225,250,.5)!important;
  background:rgba(95,214,245,.1)!important;
  box-shadow:inset 0 0 0 1px rgba(120,225,250,.18),0 10px 30px rgba(55,182,224,.16)!important;
}
.image-model-option.active > b:not(#_):not(#_){
  border-color:rgba(120,225,250,.45)!important;
  background:linear-gradient(160deg,#63dcf6,#37b6e0)!important;
  color:#04222c!important;
}
.image-model-option.active .image-model-option-copy > small:not(#_):not(#_){ color:#8ee6ff!important; }

/* ── 7) 닿았을 때 : 빛 띠가 좌우로 흐른다 ──────────────────────
   카드가 격자라서 가상요소를 그냥 두면 칸 하나로 잡힌다.
   절대 위치로 띄우고 카드에 `overflow:hidden` 을 걸어 잘라 낸다. */
.image-model-option::after,
#image-model-families button::after,
.image-model-dialog > header > button::after,
.image-library-dialog > header > button::after{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.14) 50%,transparent 66%)!important;
  transform:translateX(-115%)!important;
  transition:transform .01s!important;
}
#image-model-families button,
.image-model-dialog > header > button,
.image-library-dialog > header > button{ position:relative; overflow:hidden; }
.image-model-option > *{ position:relative!important; z-index:1!important; }

@media (hover:hover){
  .image-model-option:hover::after,
  #image-model-families button:hover::after,
  .image-model-dialog > header > button:hover::after,
  .image-library-dialog > header > button:hover::after{
    transform:translateX(115%)!important;
    transition:transform .62s cubic-bezier(.22,.61,.36,1)!important;
  }
  .image-model-option:not(.active):hover:not(#_):not(#_){
    border-color:rgba(120,225,250,.36)!important;
    background:rgba(20,38,54,.5)!important;
  }
  .image-model-option:not(.active):hover > b:not(#_):not(#_){
    border-color:rgba(120,225,250,.34)!important;
    color:#d7ecfa!important;
  }
  #image-model-families button:not(.active):hover:not(#_):not(#_){
    background:rgba(255,255,255,.06)!important;
    color:#cfdcec!important;
  }
  .image-model-dialog > header > button:hover:not(#_):not(#_),
  .image-library-dialog > header > button:hover:not(#_):not(#_){
    border-color:rgba(120,225,250,.4)!important;
    background:rgba(20,38,54,.7)!important;
  }
}

/* ── 8) 좁은 화면 ───────────────────────────────────────────── */
@media (max-width:760px){
  .image-model-dialog:not(#_):not(#_){
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 28px)!important;
    border-radius:18px!important;
  }
  .image-model-dialog > header:not(#_):not(#_),
  .image-library-dialog > header:not(#_):not(#_){ padding:16px 16px 13px!important; }
  .image-model-dialog > header h2:not(#_):not(#_),
  .image-library-dialog > header h2:not(#_):not(#_){ font-size:17px!important; }
  .image-model-tools:not(#_):not(#_){ padding:12px 16px 0!important; }
  .image-model-options:not(#_):not(#_){
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:196px!important;
    padding:12px 16px 18px!important;
  }
  .image-model-option:not(#_):not(#_){ height:196px!important; }
}

/* 움직임을 줄이도록 설정한 분에게는 띠를 흘리지 않는다 */
@media (prefers-reduced-motion:reduce){
  .image-model-option::after,
  #image-model-families button::after,
  .image-model-dialog > header > button::after{ display:none!important; }
}

/* ============================================================
   참조 이미지 고르기 — 같은 유리판 v4400

   무엇이 잘못돼 있었나 (실측 2026-08-02)
     · 칸 안에 든 것은 170px 인데 칸은 128px 로 서서, 사진이 위아래로
       잘리고 이름표가 사진 한가운데를 가로질렀다. 열두 칸 모두.
       좁은 화면(586px)에서는 칸이 44px 까지 주저앉아 사진이 띠처럼
       한 줄만 보였다 — 무엇을 고르는지 알 수 없었다.
       원인은 모델 팝업과 같다. `<button>` 은 제 속으로 키를 못 잰다.
     · '새 이미지 업로드' 글자도 같은 이유로 잘려 있었다.
     · 폭이 606px 로 묶여 넓은 화면에서도 세 칸이었다.
   ============================================================ */
.image-library-modal-grid:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(166px,1fr))!important;
  /* 줄 높이를 못 박는다 — 단추의 키를 브라우저에 맡기면 주저앉는다 */
  grid-auto-rows:172px!important;
  align-content:start!important;
  gap:10px!important;
  padding:16px 22px 22px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
.image-library-tile:not(#_):not(#_){
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  height:172px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(151,197,231,.16)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.04)!important;
  color:#e8f0fb!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
/* 사진은 칸을 꽉 채운다 — 자리를 잡는 건 칸이지 사진이 아니다 */
.image-library-tile > img:not(#_):not(#_){
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  transform:none!important;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)!important;
}
/* 이름표는 아래 한 줄. 사진 위에 어두운 그러데이션을 깔아 글을 살린다 */
.image-library-tile > span:not(#_):not(#_){
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:2!important;
  padding:20px 10px 9px!important;
  border-radius:0!important;
  background:linear-gradient(180deg,transparent,rgba(3,7,13,.86))!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  color:#e8f0fb!important;
  font-size:11px!important;
  font-weight:700!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
/* 첫 칸은 올리는 자리 — 점선으로 구분해 사진들과 헷갈리지 않게 */
.image-library-tile.upload:not(#_):not(#_){
  display:grid!important;
  place-content:center!important;
  justify-items:center!important;
  gap:9px!important;
  border-style:dashed!important;
  border-color:rgba(120,225,250,.32)!important;
  background:rgba(95,214,245,.07)!important;
}
.image-library-tile.upload > b:not(#_):not(#_){
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  margin:0!important;
  border:1px solid rgba(120,225,250,.36)!important;
  border-radius:13px!important;
  background:rgba(95,214,245,.14)!important;
  color:#6fd3ee!important;
  font-size:20px!important;
}
.image-library-tile.upload > strong:not(#_):not(#_){
  color:#bdeeff!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.image-library-loading:not(#_):not(#_){
  grid-column:1 / -1!important;
  padding:26px 8px!important;
  color:#8b9bb1!important;
  font-size:12px!important;
  text-align:center!important;
}

/* 닿았을 때 — 사진이 천천히 커지고 테두리에 불이 들어온다.
   칸은 그대로 있다(사진만 움직인다). */
@media (hover:hover){
  .image-library-tile:hover:not(#_):not(#_){
    border-color:rgba(120,225,250,.5)!important;
    box-shadow:0 10px 28px rgba(55,182,224,.2)!important;
  }
  .image-library-tile:hover > img:not(#_):not(#_){ transform:scale(1.06)!important; }
  .image-library-tile.upload:hover:not(#_):not(#_){ background:rgba(95,214,245,.13)!important; }
}
@media (prefers-reduced-motion:reduce){
  .image-library-tile > img:not(#_):not(#_){ transition:none!important; }
  .image-library-tile:hover > img:not(#_):not(#_){ transform:none!important; }
}

@media (max-width:760px){
  .image-library-modal-grid:not(#_):not(#_){
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;
    grid-auto-rows:148px!important;
    padding:12px 16px 18px!important;
  }
  .image-library-tile:not(#_):not(#_){ height:148px!important; }
}