/* ============================================================
   ARIFE AI 이미지 콘솔 — 한 줄로 서는 유리판 v4300

   무엇이 문제였나 (1600px 실측)
     · 만드는 칸이 297px, 참조 칸이 396×297 — 참조가 화면의 1/4 을
       빈 채로 차지했다. 실제로 자주 쓰는 건 프롬프트인데 프롬프트
       입력칸은 516px 밖에 안 됐다.
     · 조건들(모델·화면비·해상도·품질·수량)이 두 줄로 접혀 169px.
     · '이미지 생성' 단추가 178×98 로 글이 세 줄로 쪼개졌다
       ('이미지 생성' / '선택 수량 · 3 크레딧 차감' / '스탠다드').
       가장 큰 덩어리가 가장 안 읽히는 상태였다.
     · 판이 불투명해서 아래 이미지가 완전히 가려졌다.

   어떻게 바꾸나
     위   프롬프트를 넓게, 참조는 옆에 작게
     아래 조건 한 줄 + 오른쪽 끝에 '만들기' 한 덩어리
     판   유리처럼 비치게 — 아래 이미지가 은은히 보인다
   ============================================================ */

/* ── 1) 유리판 ────────────────────────────────────────────────
   뒤가 비치되 글은 읽혀야 한다. 흐림을 세게 주고 어두운 막을 얇게
   덮는다. 흐림을 못 쓰는 브라우저에서는 불투명에 가깝게 되돌린다. */
.ic-dock .ic-shell:not(#_):not(#_){
  border:1px solid rgba(151,197,231,.22)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(12,19,30,.72),rgba(7,11,18,.78))!important;
  box-shadow:0 -8px 40px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.09)!important;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .ic-dock .ic-shell:not(#_):not(#_){
    background:linear-gradient(180deg,rgba(12,19,30,.52),rgba(7,11,18,.6))!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.25)!important;
    backdrop-filter:blur(26px) saturate(1.25)!important;
  }
}

/* 안쪽 상자들도 같이 비치게 — 판만 유리면 속이 떠 보인다 */
.ic-dock .image-prompt-field:not(#_):not(#_),
.ic-dock .tool-reference-v2000:not(#_):not(#_),
.ic-dock .image-control:not(#_):not(#_),
.ic-dock .image-model-trigger:not(#_):not(#_),
.ic-dock .image-count-control:not(#_):not(#_){
  background:rgba(9,15,24,.55)!important;
  border-color:rgba(151,197,231,.18)!important;
  box-shadow:none!important;
}
.ic-dock .ic-tabs:not(#_):not(#_){
  border-bottom-color:rgba(151,197,231,.16)!important;
  background:transparent!important;
  gap:6px!important;
  padding:8px 12px!important;
}

/* ── 1-1) 탭 줄 오른쪽 : 접기 단추가 둘이었다 ────────────────
   `.ic-collapse`(▾)  콘솔 v416 이 만든 것 — 생성 바를 접는다
   `.ic-fold-v2400`   접기 묶음이 나중에 덧붙인 것 — 같은 일을 한다
   둘 다 `margin-left:auto` 라 서로를 밀어내, Personalize 가 줄 한가운데
   어정쩡하게 떠 있었다(실측 x=846, 오른쪽 끝은 1374). 뒤에 붙은 쪽을
   걷어 내면 Personalize·▾ 한 쌍이 오른쪽 끝에 붙는다. */
.ic-dock .ic-fold-v2400:not(#_):not(#_){ display:none!important; }

.ic-dock .ic-tabs .ic-ghost:not(#_):not(#_){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0 14px!important;
  border:1px solid rgba(151,197,231,.2)!important;
  border-radius:12px!important;
  background:rgba(9,15,24,.5)!important;
  color:#cfdcec!important;
  font-size:12.5px!important;
  font-weight:750!important;
  white-space:nowrap!important;
}
/* ▾ 는 Personalize 와 한 쌍이다 — 같은 키의 정사각으로 붙여 세운다 */
.ic-dock .ic-tabs .ic-collapse:not(#_):not(#_){
  width:40px!important;
  padding:0!important;
  font-size:12px!important;
}

/* ── 2) 만드는 칸 : 두 줄로 나눈다 ────────────────────────────
   윗줄  프롬프트 ─┬─ 참조 이미지
   아랫줄 조건들   ─┴─ 만들기

   조건이 여섯 덩어리(모델·화면비·해상도·품질·수량·다듬기)라 한 줄에
   861px 이 필요하다. 전에는 조건 줄이 프롬프트 칸 안에만 갇혀 있어
   684px 밖에 못 썼고 — 그래서 늘 두 줄로 접혔다. 조건 줄을 판 전체
   너비로 끌어내면 890px 을 쓴다. 한 줄에 선다.

   묶음을 자바스크립트로 옮기지 않는다. 감싸는 두 겹(프롬프트 묶음,
   프롬프트 줄)을 `display:contents` 로 풀면 안쪽 넷이 바로 이 격자의
   칸이 되어, 자리만 이름으로 지정하면 된다. */
.ic-dock .tool-composer-grid-v2000:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 190px!important;
  grid-template-areas:
    "prompt   ref"
    "controls submit"!important;
  align-items:stretch!important;
  gap:12px!important;
}
.ic-dock .tool-prompt-stack-v2000:not(#_):not(#_),
.ic-dock .image-prompt-row:not(#_):not(#_){ display:contents!important; }
.ic-dock .image-prompt-field:not(#_):not(#_){ grid-area:prompt!important; }
.ic-dock .tool-reference-v2000:not(#_):not(#_){ grid-area:ref!important; }
.ic-dock .image-compose-controls:not(#_):not(#_){ grid-area:controls!important; }
.ic-dock #image-generate-submit:not(#_):not(#_){
  grid-area:submit!important;
  align-self:start!important;
}
.ic-dock .image-progress:not(#_):not(#_){ grid-column:1 / -1!important; }
.ic-dock .image-prompt-field:not(#_):not(#_){
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  padding:12px 14px!important;
  border-radius:13px!important;
}
.ic-dock .image-prompt-field > span:not(#_):not(#_){
  display:block!important;
  margin-bottom:6px!important;
  color:#8fa0b7!important;
  font-size:11.5px!important;
  font-weight:700!important;
}
.ic-dock #image-prompt:not(#_):not(#_){
  flex:1 1 auto!important;
  width:100%!important;
  min-height:96px!important;
  max-height:none!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#eef4ff!important;
  font-size:14px!important;
  line-height:1.6!important;
  resize:none!important;
}

/* 참조 이미지 — 옆에 세워 두는 작은 칸.
   안쪽 내용(아이콘 34 + 이름 + 두 줄 설명 + 단추 32)이 168px 을 쓴다.
   높이를 못 박으면 '파일 선택' 단추가 아래로 삐져나오고, 이 칸에는
   `overflow:hidden` 이 걸려 있어 그대로 잘린다(실측 15px). 넉넉히
   잡아 두면 왼쪽 프롬프트 칸도 같은 높이로 늘어난다 — 쓸 곳이 넓어진다. */
.ic-dock .tool-reference-v2000:not(#_):not(#_){
  display:grid!important;
  place-items:center!important;
  width:190px!important;
  height:100%!important;
  min-height:172px!important;
  aspect-ratio:auto!important;
  padding:14px 12px!important;
  overflow:visible!important;
  border-radius:14px!important;
  border-style:dashed!important;
}
.ic-dock .tool-drop-copy-v2000:not(#_):not(#_){
  display:grid!important;
  justify-items:center!important;
  gap:4px!important;
  text-align:center!important;
}
.ic-dock .tool-drop-copy-v2000 > i:not(#_):not(#_){
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  background:rgba(95,214,245,.14)!important;
  color:#5fd6f5!important;
  font-size:17px!important;
  font-style:normal!important;
}
.ic-dock .tool-drop-copy-v2000 > strong:not(#_):not(#_){ font-size:12.5px!important; }
/* 안내글이 '…선택하 / 세요.' 처럼 낱말 중간에서 끊겼다.
   한글은 낱말 단위로 끊어야 읽힌다. */
.ic-dock .tool-drop-copy-v2000 > small:not(#_):not(#_){
  color:#7d8ca1!important;
  font-size:10.5px!important;
  line-height:1.45!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}
/* '파일 선택' 글자는 이 단추의 `::after` 가 그린다(tools-v2000).
   여기에 빛 띠용 `::after{content:''}` 를 얹었더니 글자가 통째로
   지워져 빈 단추만 남았다 — 실측으로 확인. 이 단추만 띠를 걷는다. */
.ic-dock .image-add-button:not(#_):not(#_){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-height:34px!important;
  height:34px!important;
  margin-top:2px!important;
  padding:0 16px!important;
  border:1px solid rgba(120,225,250,.34)!important;
  border-radius:10px!important;
  background:rgba(95,214,245,.12)!important;
  box-shadow:none!important;
  color:#bdeeff!important;
  font-size:12px!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  transition:border-color .2s ease,background-color .2s ease!important;
}
@media (hover:hover){
  .ic-dock .image-add-button:hover:not(#_):not(#_){
    border-color:rgba(120,225,250,.6)!important;
    background:rgba(95,214,245,.2)!important;
  }
}

/* ── 3) 조건 한 줄 + 오른쪽 끝 '만들기' ───────────────────── */
.ic-dock .image-compose-controls:not(#_):not(#_){
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  align-content:flex-start!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.ic-dock .image-model-trigger:not(#_):not(#_),
.ic-dock .image-control:not(#_):not(#_),
.ic-dock .image-count-control:not(#_):not(#_){
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0 10px!important;
  border-radius:11px!important;
  white-space:nowrap!important;
}
.ic-dock .image-control > span:not(#_):not(#_),
.ic-dock .image-count-control > span:not(#_):not(#_),
.ic-dock .image-model-trigger small:not(#_):not(#_){
  color:#8494a9!important;
  font-size:11px!important;
  font-weight:700!important;
}
.ic-dock .image-control select:not(#_):not(#_){
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#e6eef8!important;
  font:750 12.5px/1 inherit!important;
}
.ic-dock .image-model-trigger strong:not(#_):not(#_){ font-size:12.5px!important; }
.ic-dock .image-count-control button:not(#_):not(#_){
  width:24px!important;
  height:24px!important;
  min-height:0!important;
  padding:0!important;
  border-radius:7px!important;
  line-height:1!important;
}

/* 지금 걸린 모델을 알려 주는 한 줄. 조건 줄 아래에 낮게 눕힌다 —
   전에는 42px 을 차지해 판이 그만큼 높아졌다(실측). */
.ic-dock .image-api-status:not(#_):not(#_){
  order:99!important;
  flex:1 1 100%!important;
  min-height:0!important;
  height:auto!important;
  margin:1px 0 0 2px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:#75839a!important;
  font-size:11px!important;
  line-height:16px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* '만들기' 는 한 줄로 읽히는 알약 하나.
   유리판 위에서는 원래 칠이 묻혀 거의 안 보였다(실측 화면에서 유령처럼
   비쳤다). 이 단추만은 또렷하게 칠한다 — 여기서 할 일이 시작되는 곳이다. */
.ic-dock #image-generate-submit:not(#_):not(#_){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-direction:column!important;
  gap:3px!important;
  width:100%!important;
  min-width:0!important;
  min-height:56px!important;
  height:56px!important;
  padding:0 12px!important;
  border:1px solid rgba(120,225,250,.5)!important;
  border-radius:12px!important;
  background:linear-gradient(160deg,#63dcf6,#37b6e0)!important;
  box-shadow:0 8px 24px rgba(55,182,224,.28),inset 0 1px rgba(255,255,255,.4)!important;
  color:#04222c!important;
  white-space:nowrap!important;
  opacity:1!important;
  translate:none!important;
  transform:none!important;
}
.ic-dock #image-generate-submit:not(#_):not(#_):hover{
  background:linear-gradient(160deg,#7ce6fb,#45c3ea)!important;
  box-shadow:0 10px 28px rgba(55,182,224,.38),inset 0 1px rgba(255,255,255,.45)!important;
}
.ic-dock #image-generate-submit:not(#_):not(#_):disabled{ opacity:.5!important; box-shadow:none!important; }
.ic-dock #image-generate-submit strong:not(#_):not(#_){
  color:#04222c!important;
  font-size:14px!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
}
/* 안쪽 글이 낱말마다 줄바꿈되던 것 — 상자를 flex 로 두면 낱말이
   저마다 칸이 되어 좁아지는 순간 하나씩 접힌다. 글로 흐르게 둔다. */
.ic-dock #image-generate-submit small:not(#_):not(#_){
  display:inline-block!important;
  padding:3px 9px!important;
  border-radius:99px!important;
  background:rgba(4,34,44,.18)!important;
  color:#04222c!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.ic-dock #image-generate-submit small b:not(#_):not(#_){ color:#04222c!important; font-weight:900!important; }
/* 크레딧이 두 번 적히던 것.
   공용 묶음이 `#image-generate-cost::after` 로 ' 크레딧' 을 붙이는데,
   이 화면은 HTML 에 이미 '크레딧 차감' 이라고 적혀 있다 —
   둘이 겹쳐 '18 크레딧 크레딧 차감' 이 됐다(실측). 붙이는 쪽을 끈다. */
.ic-dock #image-generate-cost:not(#_):not(#_)::after{ content:none!important; }
/* 안쪽 심볼과 요금제 딱지는 알약을 늘리기만 한다 */
.ic-dock #image-generate-submit > i:not(#_):not(#_){ display:none!important; }
.ic-dock #image-generate-submit [class*="plan"]:not(#_):not(#_){ display:none!important; }

/* '프롬프트 다듬기' 도 같은 줄에 같은 키로 — 혼자 42px 이라 줄이
   미세하게 어긋나 보였다(실측 40 vs 42). */
.ic-dock .gti-refine:not(#_):not(#_),
.ic-dock [id="gti-refine-btn"]:not(#_):not(#_),
.ic-dock .gti-secondary:not(#_):not(#_),
.ic-dock [id="image-prompt-polish"]:not(#_):not(#_){
  min-height:40px!important;
  height:40px!important;
  margin:0!important;
  padding:0 12px!important;
  border-radius:11px!important;
  font-size:12.5px!important;
  white-space:nowrap!important;
}

/* ── 3-1) 단추에 닿았을 때 : 빛 띠가 좌우로 흐른다 ────────────
   전에 쓰던 '살짝 내려앉기'(translate:0 -2px)는 마우스를 스칠 때마다
   줄 전체가 들썩여 어지러웠다. 자리는 그대로 두고 빛만 지나가게 한다.
   띠는 절대 위치라 칸 나눔에 끼어들지 않는다(단추가 격자·flex 라
   가상요소를 그냥 두면 칸 하나로 잡혀 배치가 틀어진다). */
.ic-dock .ic-tabs .ic-ghost:not(#_):not(#_),
.ic-dock .image-model-trigger:not(#_):not(#_),
.ic-dock .image-control:not(#_):not(#_),
.ic-dock .image-count-control:not(#_):not(#_),
.ic-dock .gti-refine:not(#_):not(#_),
.ic-dock #image-generate-submit:not(#_):not(#_){
  position:relative!important;
  overflow:hidden!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease!important;
}
.ic-dock .ic-tabs .ic-ghost::after,
.ic-dock .image-model-trigger::after,
.ic-dock .image-control::after,
.ic-dock .image-count-control::after,
.ic-dock .gti-refine::after,
.ic-dock #image-generate-submit::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,.16) 50%,transparent 66%)!important;
  transform:translateX(-115%)!important;
  transition:transform .01s!important;
}
@media (hover:hover){
  .ic-dock .ic-tabs .ic-ghost:hover::after,
  .ic-dock .image-model-trigger:hover::after,
  .ic-dock .image-control:hover::after,
  .ic-dock .image-count-control:hover::after,
  .ic-dock .gti-refine:hover::after,
  .ic-dock #image-generate-submit:hover:not(:disabled)::after{
    transform:translateX(115%)!important;
    transition:transform .62s cubic-bezier(.22,.61,.36,1)!important;
  }
  .ic-dock .ic-tabs .ic-ghost:hover:not(#_):not(#_),
  .ic-dock .image-model-trigger:hover:not(#_):not(#_),
  .ic-dock .image-control:hover:not(#_):not(#_),
  .ic-dock .image-count-control:hover:not(#_):not(#_),
  .ic-dock .gti-refine:hover:not(#_):not(#_){
    border-color:rgba(120,225,250,.42)!important;
    background:rgba(20,38,54,.62)!important;
  }
}
/* 글은 띠 위로 */
.ic-dock .image-model-trigger > *,
.ic-dock .image-control > *,
.ic-dock .image-count-control > *,
.ic-dock .ic-tabs .ic-ghost > *,
.ic-dock #image-generate-submit > *{ position:relative!important; z-index:1!important; }

/* ── 4) 좁은 화면 ───────────────────────────────────────────── */
@media (max-width:900px){
  .ic-dock .tool-composer-grid-v2000:not(#_):not(#_){
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:
      "prompt"
      "ref"
      "controls"
      "submit"!important;
  }
  .ic-dock .tool-reference-v2000:not(#_):not(#_){
    width:100%!important;
    height:auto!important;
    min-height:120px!important;
  }
  .ic-dock .image-prompt-field:not(#_):not(#_){ height:auto!important; }
  .ic-dock #image-prompt:not(#_):not(#_){ min-height:76px!important; }
  /* 참조 칸을 가로로 눕힌다 — 좁은 화면에서 세로로 세우면 콘솔이
     화면 절반을 넘게 먹는다(실측 581px / 1000px). */
  /* 칸이 내용 폭에 맞춰 좁아지면(실측 220px) 안쪽 글이 한 글자씩
     끊긴다. 한 칸짜리 격자로 못 박아 폭을 다 쓰게 한다. */
  .ic-dock .tool-reference-v2000:not(#_):not(#_){
    grid-template-columns:minmax(0,1fr)!important;
    place-items:center stretch!important;
  }
  .ic-dock .tool-drop-copy-v2000:not(#_):not(#_){
    grid-auto-flow:column!important;
    /* 칸 너비를 못 박아 둔다. 자동으로 나누면 설명 글이 좁은 칸에
       갇혀 여러 줄로 늘어지고, 그 바람에 오히려 더 높아진다
       (실측 192 → 431px). 설명만 남은 자리를 갖게 한다. */
    grid-template-columns:auto auto minmax(0,1fr) auto!important;
    align-items:center!important;
    justify-items:start!important;
    gap:12px!important;
    width:100%!important;
    /* 바탕 묶음이 220px 로 묶어 둔다 — 풀어야 폭을 다 쓴다 */
    max-width:none!important;
    text-align:left!important;
  }
  .ic-dock .tool-drop-copy-v2000 > small:not(#_):not(#_){ text-align:left!important; }
  .ic-dock .image-add-button:not(#_):not(#_){ margin:0!important; }
}
@media (max-width:560px){
  .ic-dock .tool-reference-v2000:not(#_):not(#_){ min-height:92px!important; }
  .ic-dock .tool-drop-copy-v2000:not(#_):not(#_){
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }
  .ic-dock .tool-drop-copy-v2000 > small:not(#_):not(#_){ display:none!important; }
}

/* 2026-09-04 390px 실측 — 탭 줄(이미지 생성·포스터·무드보드·편집·생성 설정·Personalize)이
   한 줄에 8개가 끼어 글자가 세로로 한 자씩 내려앉았다(폭 40px, 높이 222px).
   폰에서는 줄을 옆으로 밀어 보게 하고 단추는 제 폭을 지킨다. */
@media (max-width:700px){
  .ic-dock .ic-tabs:not(#_):not(#_){
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:6px!important;
    padding:8px 10px!important;
  }
  .ic-dock .ic-tabs::-webkit-scrollbar{ display:none; }
  .ic-dock .ic-tabs > *:not(#_):not(#_){
    flex:0 0 auto!important;
    white-space:nowrap!important;
    writing-mode:horizontal-tb!important;
    height:auto!important;
    min-height:38px!important;
    line-height:1.2!important;
  }
  .ic-dock .ic-tabs .ic-ghost:not(#_):not(#_){ margin-left:6px!important; }
}