/* ============================================================
   ARIFE AI 이미지 — 이미지가 화면을 채운다 v4100

   왜 바꾸는가
     첫 화면에서 정작 이미지가 안 보였다. 실측하면 이렇다(1920px 기준).
       큰 제목 판 '한 장면을 정확하게'   376px
       모델별 차감 기준 표              340px
       ─────────────────────────────────────
       합계 716px — 문서 전체 1241px 의 절반이 넘는다.
     게다가 화면이 1420px 로 묶여 있어 양옆으로 245px 씩, 합쳐서 490px 이
     빈 채로 남았다. 볼 것은 이미지인데 이미지가 설 자리가 가장 좁았다.

   어떻게 바꾸는가
     1) 제목 판과 차감 표를 걷는다. 크레딧은 생성 단추에 이미 적혀 있다
        ('선택 수량 · N 크레딧 차감') — 표가 없어도 낼 값은 그대로 보인다.
     2) 이미지는 양옆 끝까지 채운다. 만드는 자리(프롬프트·참조)는 읽기
        좋은 폭으로 가운데 두고, 보는 자리(갤러리)만 넓게 편다.
     3) 넓어진 만큼 열을 더 나눈다 — 한눈에 더 많이 들어온다.

   `100vw` 는 쓰지 않는다. 세로 스크롤 막대 너비가 빠지지 않아 가로로
   몇 px 씩 넘치고, 그 넘침이 다른 화면 검사까지 흔든다(전에 겪었다).
   대신 감싸는 상자 자체를 넓혀 안쪽에서 폭을 되돌리는 방식을 쓴다.
   ============================================================ */

/* ── 1) 큰 제목 판과 차감 표를 걷는다 ────────────────────────── */
body.image-studio-page .tool-intro-v2000:not(#_):not(#_),
body.image-studio-page .tool-rate-panel-v2000:not(#_):not(#_){
  display:none!important;
}

/* ── 2) 바깥 상자를 화면 끝까지 ───────────────────────────────
   `main` 이 1420px 로 묶여 있어 양옆이 통째로 비었다. 상자를 풀고,
   글을 읽는 칸만 안에서 다시 좁힌다. */
body.image-studio-page .image-studio:not(#_):not(#_){
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:14px 18px 84px!important;
}

/* 만드는 자리는 읽기 좋은 폭으로 가운데 — 여기까지 넓히면
   프롬프트 한 줄이 화면을 가로질러 눈이 따라가기 힘들다. */
body.image-studio-page .image-stage:not(#_):not(#_),
body.image-studio-page .gti-studio:not(#_):not(#_){
  width:min(1420px,100%)!important;
  margin-inline:auto!important;
}

/* 보는 자리는 끝까지 — 양옆 여백에도 이미지가 들어간다 */
body.image-studio-page .image-personalization-v415:not(#_):not(#_),
body.image-studio-page .image-library-section:not(#_):not(#_){
  width:100%!important;
  max-width:none!important;
  margin:22px 0 0!important;
  padding:0!important;
}

/* ── 3) 넓어진 만큼 열을 더 나눈다 ────────────────────────────
   벽돌쌓기 격자(gx-grid)의 열 수는 자바스크립트가 폭을 보고 정하므로
   여기서는 칸 사이만 좁혀 이미지가 더 크게 보이게 한다. */
html body.gx-on .gx-grid{ gap:10px!important; }
html body.gx-on .gx-card{ margin-bottom:10px!important; border-radius:10px!important; }

/* AI생성·업로드 격자
   여기서 `display` 를 건드리면 안 된다. 갤러리 묶음(v418)이 탭에 따라
   이 격자를 켜고 끄는데, 뒤에 오는 규칙이 그 판단을 덮어써서 '스타일'
   탭에서도 결과 격자가 같이 보인다. 실제로 그렇게 만들어 놨었고,
   사장님 화면에서 사진 구간이 끝난 뒤 다른 모양의 칸들이 줄줄이
   나왔다 — 그게 이 격자였다.
   자리(열 나눔)는 v418 이 정하게 두고 여기서는 간격만 다듬는다. */
body.image-studio-page #image-result-grid:not(#_):not(#_){
  column-gap:10px!important;
  margin:0!important;
}
html body.gx-on #image-result-grid > *{ margin-bottom:10px!important; }

/* ── 새로고침 직후 빈 칸 벽이 보이던 것 ──────────────────────
   갤러리 묶음(v418)이 자리를 잡기 전 아주 잠깐, 예전 배치가 그대로
   그려진다 — 사진이 아직 안 온 검은 칸 여덟 개와 '불러오는 중…' 이
   먼저 뜨고 나서야 벽돌쌓기로 바뀐다. 그 사이가 화면에서는 '깨진
   화면으로 시작하는 것'처럼 보인다.

   자리는 그대로 잡아 두고(높이 유지) 내용만 잠깐 감춘다. 혹시 묶음이
   안 실리더라도 2.5초 뒤에는 무조건 보이게 해서, 감춘 채로 남는
   일이 없게 한다. */
body.image-studio-page .image-personalization-v415:not([data-gx]) .image-personalization-grid-v415,
body.image-studio-page .image-personalization-v415:not([data-gx]) .image-personalization-status-v415,
body.image-studio-page:not(.gx-on) #image-result-grid,
body.image-studio-page:not(.gx-on) #image-history-more{
  opacity:0;
  animation:img-late-show-v4100 0s linear 2.5s forwards;
}
@keyframes img-late-show-v4100{ to{ opacity:1; } }

/* 사진이 아직 안 왔을 때 칸이 검게 비어 보이지 않도록 옅은 바탕만 */
html body.gx-on .image-result-card{ background:#0b1119!important; }
html body.gx-on .image-result-card > img{ background:#0b1119!important; }

/* 머리말은 한 줄로 낮게 — 위에서 자리를 덜 먹는다 */
html body.gx-on .image-personalization-head-v415{
  margin:0 0 12px!important;
  padding:0 2px!important;
}
html body.gx-on .gx-title{ font-size:20px!important; }

/* ── 4) 만드는 자리도 조금 낮게 ───────────────────────────────
   제목 판을 걷으면서 위가 허전해지지 않도록 간격만 다듬는다. */
body.image-studio-page .image-stage:not(#_):not(#_){
  margin-top:0!important;
}

@media (max-width:820px){
  body.image-studio-page .image-studio:not(#_):not(#_){ padding:10px 12px 72px!important; }
  body.image-studio-page #image-result-grid:not(#_):not(#_){ column-gap:8px!important; }
}