/* ============================================================
   ARIFE AI 이미지 갤러리 v418
   ============================================================ */

/* ---- 머리말 : 제목 한 줄 + 필터 세 개 ---- */
html body.gx-on .image-personalization-head-v415{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  margin:0 0 18px !important;
  padding:0 !important;
}
html body.gx-on .gx-title{margin:0;font-size:26px;letter-spacing:-.04em;color:#f4f7fc}
html body.gx-on .gx-filters{margin-left:auto;display:inline-flex;gap:3px;padding:4px;
  border:1px solid #263a56;border-radius:14px;background:#090f19}
html body.gx-on .gx-filters button{
  min-height:36px;padding:0 16px;border:1px solid transparent;border-radius:10px;
  background:transparent;color:#8fa0b7;font:800 12.5px/1 inherit;font-family:inherit;cursor:pointer;transition:.15s;
}
html body.gx-on .gx-filters button:hover{color:#dce8f9;background:rgba(121,170,255,.08)}
html body.gx-on .gx-filters button.on{
  border-color:#5879be;color:#fff;
  background:linear-gradient(145deg,#213656,#18213d);
  box-shadow:inset 0 1px rgba(255,255,255,.13);
}

/* ---- v415 의 8장 격자와 안내 문구는 쓰지 않는다 ---- */
html body.gx-on .image-personalization-grid-v415,
html body.gx-on .image-personalization-status-v415,
html body.gx-on .image-personalization-head-v415 p{display:none !important}
html body.gx-on .image-library-section.gx-hidden{display:none !important}

/* ---- 스타일 격자 : 벽돌쌓기 ----
   열을 직접 나눠 쌓기 때문에 새 이미지가 들어와도 앞의 것이 밀리지 않는다.
   각 칸은 비율만큼 자리를 미리 잡아 두어(padding-top) 이미지가 늦게 떠도
   화면이 튀지 않는다. */
html body.gx-on .gx-grid{display:none;gap:12px;align-items:flex-start}
html body.gx-style .gx-grid{display:flex}
html body.gx-on .gx-col{flex:1 1 0;min-width:0;display:block}
html body.gx-on .gx-card{
  display:block;width:100%;padding:0;margin:0 0 12px;
  border:0;border-radius:12px;overflow:hidden;background:#0a1119;
  cursor:zoom-in;font-family:inherit;
  opacity:0;transform:translateY(6px);
  transition:opacity .32s ease,transform .32s ease,filter .15s,box-shadow .15s;
}
html body.gx-on .gx-card.gx-in{opacity:1;transform:none}
html body.gx-on .gx-card:hover{filter:brightness(1.08);box-shadow:0 10px 26px rgba(0,0,0,.45)}
html body.gx-on .gx-frame{
  display:block;position:relative;width:100%;height:0;background:#0a1119;overflow:hidden;
}
html body.gx-on .gx-frame img{
  position:absolute;inset:0;display:block;
  width:100% !important;height:100% !important;min-height:0 !important;
  aspect-ratio:auto !important;object-fit:cover !important;background:#0a1119;
}
html body.gx-on .gx-empty{padding:46px 4px;color:#8190a5;font-size:13px;text-align:center}

/* ---- AI생성 · 업로드 격자도 같은 벽돌쌓기로 ----
   주의: 여기서 display:block!important 를 걸면 스타일 탭에서도 결과 격자가
   같이 보인다(같은 특이도 뒤쪽 규칙이 이겨서). 표시 여부는 아래에서만 정한다. */
html body.gx-on #image-result-grid{
  column-width:250px;column-gap:12px;
  grid-template-columns:none !important;
}
html body.gx-on:not(.gx-style) #image-result-grid{display:block !important}
html body.gx-on.gx-style #image-result-grid,
html body.gx-on.gx-style #image-history-more{display:none !important}
html body.gx-on #image-result-grid>*{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 12px !important;width:100% !important;
  border-radius:12px !important;
}
html body.gx-on .image-result-card>img{
  height:auto !important;min-height:0 !important;
  aspect-ratio:auto !important;object-fit:contain !important;
}
html body.gx-on .image-result-upload,
html body.gx-on .image-empty-card{min-height:190px !important}

/* ---- 취향 카드에 남아 있던 삭제 버튼·문구 제거 ---- */
html body.gx-on .image-personalization-hide-v415,
html body.gx-on .image-personalization-card-copy-v415{display:none !important}

/* ---- 맨 위로 ---- */
.gx-top{
  position:fixed;right:22px;bottom:calc(var(--ic-dock-space,300px) - 24px);z-index:80;
  display:none;flex-direction:column;align-items:center;gap:2px;
  width:52px;padding:9px 0;border:1px solid #33486a;border-radius:15px;
  background:rgba(9,17,28,.86);backdrop-filter:blur(10px);color:#b7c6dc;
  font:800 12px/1.2 inherit;font-family:inherit;cursor:pointer;transition:.15s;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.gx-top:first-line{font-size:12px}
.gx-top.on{display:flex}
.gx-top:hover{border-color:#7597c5;color:#fff;background:rgba(18,30,48,.92)}
.gx-top span{display:block}

@media(max-width:760px){
  html body.gx-on .image-personalization-head-v415{flex-wrap:wrap;gap:10px !important}
  html body.gx-on .gx-filters{margin-left:0;width:100%}
  html body.gx-on .gx-filters button{flex:1;padding:0 8px}
  html body.gx-on .gx-grid{gap:8px}
  html body.gx-on #image-result-grid{column-width:150px;column-gap:8px}
  html body.gx-on .gx-card,
  html body.gx-on #image-result-grid>*{margin-bottom:8px !important}
  .gx-top{right:12px;width:46px}
}

/* ============================================================
   생성 도크 정렬 : 옵션 줄을 한 줄 규격으로 맞춘다
   ============================================================ */
html body.ic-on .ic-pane .image-compose-controls{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:10px !important;
}
html body.ic-on .ic-pane .image-compose-controls>*{margin:0 !important}
html body.ic-on .ic-pane .image-model-trigger{
  flex:0 0 auto !important;min-width:230px !important;height:42px !important;
}
html body.ic-on .ic-pane .image-control{
  flex:0 0 auto !important;min-width:150px !important;height:42px !important;
}
html body.ic-on .ic-pane .image-count-control{flex:0 0 auto !important;height:42px !important}
html body.ic-on .ic-pane .gti-refine{
  flex:0 0 auto !important;min-width:0 !important;height:42px !important;
  order:8;
}
html body.ic-on .ic-pane .image-reference-chip{flex:0 0 auto !important;order:9}
html body.ic-on .ic-pane .image-api-status{
  flex:1 1 100% !important;order:10;margin:2px 2px 0 !important;
}

/* ---- 결과 카드 : 원본 보기 대신 이미지를 눌러 크게 본다 ---- */
html body.gx-on .image-result-card footer a{display:none !important}
html body.gx-on .image-result-card{cursor:zoom-in}
html body.gx-on .image-result-card>img{cursor:zoom-in}
html body.gx-on .image-result-card footer{
  justify-content:flex-start !important;
  padding:9px 12px !important;
}
html body.gx-on .image-result-card footer strong{
  font-size:11.5px !important;color:#8fa0b7 !important;font-weight:700 !important;
}

/* ---- 스크롤바가 뒤늦게 생기면서 열 너비가 줄어 전체가 한 번 밀리는 것 방지 ----
   칸 높이를 폭의 비율(padding-top %)로 잡기 때문에 폭이 변하면 전부 다시 계산된다.
   스크롤바 자리를 처음부터 비워 두면 폭이 끝까지 변하지 않는다. */
html:has(body.gx-on){scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){
  html:has(body.gx-on){overflow-y:scroll}
}

/* ============================================================
   스타일 탭에 남의 목록이 겹쳐 나오던 것 v1350

   이 화면에는 격자가 둘이다. 하나는 여기서 그리는 스타일 풀(승인된 것만),
   다른 하나는 예전 개인화 구역(v415)이 그리는 '내 자료'다. 후자는 카드
   아래에 '업로드' · 'ARIFE' 같은 꼬리표를 단다.
   스타일 탭을 만들면서 앞엣것만 끌어올리고 뒤엣것을 안 치웠다 —
   그래서 승인도 안 받은 내 업로드가 스타일 자리에 섞여 나왔다(실측 화면).
   ============================================================ */
html body.gx-on:not(#nope):not(#_):not(#_) .image-personalization-grid-v415,
html body.gx-on:not(#nope):not(#_):not(#_) .image-personalization-status-v415{
  display:none!important;
}

/* 탭에 따라 어느 격자를 보일지는 JS(arife-image-gallery-v418.js)가 정한다.
   여기서 또 감추면 두 곳이 같은 일을 하게 되고, 어긋나면 원인을 찾기 어렵다. */