/* ============================================================
   ARIFE 한글 이미지(포스터) — 유리판으로 다시 세우기 v4500

   무엇이 어색했나 (1600px 실측, 2026-08-02)
     · 감싸는 상자가 불투명한 검은 판(#14171b)이라, 같은 콘솔 안의
       '이미지 생성' 탭(유리판)과 재질이 달랐다.
     · 적는 칸이 510px 로 지나치게 넓었다. 제목 한 줄 적는 칸이
       화면 3분의 1을 가로지르니 눈이 따라가기 힘들다.
     · '스타일' 은 손대지 않은 기본 드롭다운(회색 화살표)이고 바로
       옆 '비율' 은 글자 칩이라, 나란히 선 둘의 생김새가 달랐다.
       게다가 '비율' 은 고르는 칸이 아니라 스타일에 따라 바뀌는
       알림글인데 입력칸처럼 보여 눌러 보게 만든다.
     · 'AI 문구 추천' 이 홀로 한 줄을 차지하며 왼쪽에 덩그러니 있었다.
     · 오른쪽 미리보기가 562×526 의 큰 빈 상자인데, 정작 만들 그림은
       세로 3:4 다. 나올 모양과 자리의 모양이 달랐다.

   어떻게 바꾸나
     판   콘솔 껍데기가 이미 유리다 — 판을 겹치지 않는다
     구조 머리글 / 적는 칸(좌) / 나올 자리(우) 세 층
     규격 적는 칸은 읽기 좋은 420px, 미리보기는 고른 비율 그대로
     디자인 칸·단추 높이를 44 · 52px 로 맞추고, 고르는 칸에는
          직접 그린 화살표를 단다
   ============================================================ */

/* ── 1) 판은 하나면 된다 ──────────────────────────────────────
   이 화면은 아래 콘솔(`.ic-dock .ic-shell`) 안에 들어 있다.
     .ic-dock > .ic-shell > .ic-panes > .ic-pane > .gti-studio
   그 껍데기가 이미 유리판이다. 여기에 또 판을 두르면 유리 위에
   유리가 얹혀 테두리가 두 겹으로 보인다. 바탕은 비우고, 안쪽
   상자(적는 칸·미리보기)만 은은하게 띄운다. */
body.image-studio-page .gti-studio:not(#_):not(#_){
  width:min(1040px,100%)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:4px 2px 6px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* ── 2) 머리글 : 세 줄을 낮게 ────────────────────────────────── */
.gti-studio .gti-head:not(#_):not(#_){
  align-items:flex-start!important;
  gap:12px!important;
  margin:0 0 12px!important;
  padding:0 0 10px!important;
  border-bottom:1px solid rgba(151,197,231,.14)!important;
}
.gti-studio .gti-kicker:not(#_):not(#_){
  margin:0 0 5px!important;
  color:#8f7dff!important;
  font-size:10.5px!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
}
.gti-studio .gti-head h2:not(#_):not(#_){
  margin:0!important;
  color:#f0f6ff!important;
  font-size:19px!important;
  font-weight:830!important;
  letter-spacing:-.03em!important;
}
.gti-studio .gti-head > div > span:not(#_):not(#_){
  display:block!important;
  margin:5px 0 0!important;
  color:#8b9bb1!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}

/* ── 3) 두 칸 : 적는 자리 / 나올 자리 ─────────────────────────
   적는 칸은 읽기 좋은 폭으로 못 박고, 남는 자리는 전부 미리보기가
   갖는다. 전에는 510 : 561 로 반씩 나눠 둘 다 어중간했다. */
.gti-studio .gti-grid:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:minmax(0,420px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:22px!important;
}
.gti-studio .gti-form:not(#_):not(#_){
  display:grid!important;
  align-content:start!important;
  gap:10px!important;
  min-width:0!important;
}

/* ── 4) 적는 칸 ──────────────────────────────────────────────── */
.gti-studio .gti-field:not(#_):not(#_){
  display:grid!important;
  gap:6px!important;
  min-width:0!important;
  margin:0!important;
}
.gti-studio .gti-field > span:not(#_):not(#_){
  color:#8fa0b7!important;
  font-size:11.5px!important;
  font-weight:750!important;
}
.gti-studio .gti-field > span em:not(#_):not(#_){
  color:#6c7c92!important;
  font-style:normal!important;
  font-weight:700!important;
}
.gti-studio .gti-field input:not(#_):not(#_),
.gti-studio .gti-field select:not(#_):not(#_),
.gti-studio .gti-field textarea:not(#_):not(#_){
  width:100%!important;
  min-height:42px!important;
  padding:0 13px!important;
  border:1px solid rgba(151,197,231,.18)!important;
  border-radius:12px!important;
  background:rgba(9,15,24,.55)!important;
  box-shadow:none!important;
  color:#eef4ff!important;
  font-size:13.5px!important;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease!important;
}
.gti-studio .gti-field textarea:not(#_):not(#_){
  min-height:58px!important;
  padding:10px 13px!important;
  line-height:1.6!important;
  resize:vertical!important;
}
.gti-studio .gti-field input::placeholder,
.gti-studio .gti-field textarea::placeholder{ color:#5f6e83!important; }
.gti-studio .gti-field input:focus:not(#_):not(#_),
.gti-studio .gti-field select:focus:not(#_):not(#_),
.gti-studio .gti-field textarea:focus:not(#_):not(#_){
  outline:none!important;
  border-color:rgba(120,225,250,.55)!important;
  background:rgba(13,24,36,.7)!important;
  box-shadow:0 0 0 3px rgba(95,214,245,.14)!important;
}

/* 고르는 칸에는 화살표를 직접 그린다 — 브라우저 기본 화살표는
   회색이라 이 화면에서 혼자 튀었다. */
.gti-studio .gti-field select:not(#_):not(#_){
  -webkit-appearance:none!important;
  appearance:none!important;
  padding-right:36px!important;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238fa0b7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 13px center!important;
  cursor:pointer!important;
}

/* ── 5) 스타일 + 비율 한 줄 ───────────────────────────────────
   '비율' 은 고르는 칸이 아니라 스타일을 따라 바뀌는 알림이다.
   적는 칸처럼 보이지 않게 딱지 모양으로 바꾼다. */
.gti-studio .gti-row:not(#_):not(#_){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,152px)!important;
  align-items:end!important;
  gap:10px!important;
  margin:0!important;
}
.gti-studio .gti-field--hint:not(#_):not(#_){ min-width:0!important; }
.gti-studio .gti-field--hint > b:not(#_):not(#_){
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  min-height:42px!important;
  padding:0 13px!important;
  border:1px dashed rgba(151,197,231,.24)!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#bdeeff!important;
  font-size:12.5px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}

/* ── 6) AI 문구 추천 : 부제 칸 오른쪽 끝에 붙인다 ─────────────
   혼자 한 줄을 차지하며 왼쪽에 떠 있었다. 줄을 하나 아낀다. */
.gti-studio .gti-secondary:not(#_):not(#_){
  justify-self:end!important;
  min-height:36px!important;
  height:36px!important;
  margin:-6px 0 0!important;
  padding:0 13px!important;
  border:1px solid rgba(143,125,255,.34)!important;
  border-radius:10px!important;
  background:rgba(143,125,255,.13)!important;
  box-shadow:none!important;
  color:#c9c2ff!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  transition:border-color .2s ease,background-color .2s ease!important;
}
.gti-studio .gti-suggest:not(#_):not(#_){
  display:grid!important;
  gap:6px!important;
  margin:0!important;
  padding:10px!important;
  border:1px solid rgba(151,197,231,.16)!important;
  border-radius:12px!important;
  background:rgba(9,15,24,.5)!important;
}
.gti-studio .gti-suggest[hidden]:not(#_):not(#_){ display:none!important; }

/* ── 7) 만들기 단추 ─────────────────────────────────────────── */
.gti-studio .gti-generate:not(#_):not(#_){
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  width:100%!important;
  min-height:50px!important;
  height:50px!important;
  margin:2px 0 0!important;
  padding:0 14px!important;
  overflow:hidden!important;
  border:1px solid rgba(120,225,250,.5)!important;
  border-radius:13px!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;
  transform:none!important;
  translate:none!important;
  scale:none!important;
}
.gti-studio .gti-generate strong:not(#_):not(#_){
  position:relative!important;
  z-index:1!important;
  color:#04222c!important;
  font-size:14px!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
}
.gti-studio .gti-generate small:not(#_):not(#_){
  position:relative!important;
  z-index:1!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;
}
.gti-studio .gti-generate .arife-plan-badge:not(#_):not(#_){ display:none!important; }
.gti-studio .gti-generate:disabled:not(#_):not(#_){ opacity:.5!important; box-shadow:none!important; }
.gti-studio .gti-mini:not(#_):not(#_){
  margin:0!important;
  color:#75839a!important;
  font-size:10.5px!important;
  line-height:1.5!important;
}

/* ── 8) 나올 자리 : 고른 비율 그대로 ──────────────────────────
   `--gti-ar` 은 곁들인 스크립트가 고른 스타일에 맞춰 넣어 준다
   (포스터 3/4 · 썸네일 16/9 · 배너 16/9 · 카드 1/1).
   값이 없어도 세로 3:4 로 선다. */
.gti-studio .gti-output:not(#_):not(#_){
  display:grid!important;
  place-items:center!important;
  /* 폭을 '가장 큰 높이 × 비율' 로 못 박으면 높이는 비율이 정한다.
     높이를 못 박고 폭을 100% 로 두면 비율이 깨진다(가로로 퍼진다) —
     실제로 세로 3:4 인데 656×526 가로 상자가 나왔다. */
  width:min(100%,calc(min(480px,50vh) * var(--gti-arn,.75)))!important;
  aspect-ratio:var(--gti-ar,3 / 4)!important;
  height:auto!important;
  min-height:0!important;
  padding:16px!important;
  overflow:hidden!important;
  border:1px solid rgba(151,197,231,.18)!important;
  border-radius:16px!important;
  background:rgba(6,12,20,.5)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
}
/* 비율을 지키려면 폭이 남을 때가 있다 — 가운데 세운다 */
.gti-studio .gti-grid:not(#_):not(#_) > .gti-output{ justify-self:center!important; }

.gti-studio .gti-placeholder:not(#_):not(#_){
  display:grid!important;
  justify-items:center!important;
  gap:12px!important;
  text-align:center!important;
}
.gti-studio .gti-placeholder > span:not(#_):not(#_){
  display:grid!important;
  place-items:center!important;
  width:56px!important;
  height:56px!important;
  border:1px solid rgba(143,125,255,.3)!important;
  border-radius:17px!important;
  background:rgba(143,125,255,.14)!important;
  color:#b9aeff!important;
  font-size:24px!important;
  font-weight:800!important;
}
.gti-studio .gti-placeholder > p:not(#_):not(#_){
  margin:0!important;
  color:#7d8ca1!important;
  font-size:12px!important;
  line-height:1.65!important;
}
/* 만들어진 그림은 자리를 넘지 않는다 */
.gti-studio .gti-result-fig:not(#_):not(#_){
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
}
.gti-studio .gti-result-fig img:not(#_):not(#_){
  max-width:100%!important;
  max-height:100%!important;
  width:auto!important;
  height:auto!important;
  border-radius:11px!important;
  object-fit:contain!important;
  cursor:zoom-in!important;
}
.gti-studio .gti-loading:not(#_):not(#_),
.gti-studio .gti-error:not(#_):not(#_){
  color:#8b9bb1!important;
  font-size:12.5px!important;
  text-align:center!important;
}

/* ── 9) 닿았을 때 : 빛 띠가 좌우로 흐른다 ────────────────────── */
.gti-studio .gti-generate::after,
.gti-studio .gti-secondary::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,.18) 50%,transparent 66%)!important;
  transform:translateX(-115%)!important;
  transition:transform .01s!important;
}
.gti-studio .gti-secondary:not(#_):not(#_){ position:relative!important; overflow:hidden!important; }
@media (hover:hover){
  .gti-studio .gti-generate:hover:not(:disabled)::after,
  .gti-studio .gti-secondary:hover::after{
    transform:translateX(115%)!important;
    transition:transform .62s cubic-bezier(.22,.61,.36,1)!important;
  }
  .gti-studio .gti-generate:hover:not(:disabled):not(#_):not(#_){
    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;
  }
  .gti-studio .gti-secondary:hover:not(#_):not(#_){
    border-color:rgba(143,125,255,.55)!important;
    background:rgba(143,125,255,.2)!important;
  }
}
@media (prefers-reduced-motion:reduce){
  .gti-studio .gti-generate::after,
  .gti-studio .gti-secondary::after{ display:none!important; }
}

/* ── 10) 좁은 화면 ──────────────────────────────────────────── */
@media (max-width:980px){
  .gti-studio .gti-grid:not(#_):not(#_){
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  /* 좁으면 미리보기가 먼저 보이는 게 낫다 — 무엇을 만드는지부터 */
  .gti-studio .gti-form:not(#_):not(#_){ order:2!important; }
  .gti-studio .gti-output:not(#_):not(#_){
    order:1!important;
    width:min(100%,calc(min(320px,34vh) * var(--gti-arn,.75)))!important;
    justify-self:center!important;
  }
}
@media (max-width:560px){
  body.image-studio-page .gti-studio:not(#_):not(#_){ padding:16px 14px 18px!important; }
  .gti-studio .gti-head h2:not(#_):not(#_){ font-size:19px!important; }
  .gti-studio .gti-row:not(#_):not(#_){ grid-template-columns:minmax(0,1fr)!important; }
  .gti-studio .gti-field--hint > b:not(#_):not(#_){ width:100%!important; }
}

/* ── 11) 이 탭만 콘솔을 조금 더 연다 ──────────────────────────
   콘솔의 속칸(`.ic-panes`)은 520px 에서 잘리고 안에서 스크롤된다.
   '이미지 생성' 탭은 430px 이라 넉넉하지만, 이 탭은 적는 칸이
   일곱 줄이라 520px 안에 들어가지 않아 판 안에서 또 굴려야 했다.
   판 안의 스크롤은 어디까지가 화면인지 헷갈린다 — 이 탭일 때만
   턱을 올려 한눈에 들어오게 한다.

   `:has()` 를 못 읽는 브라우저에서는 예전대로 속에서 굴러간다 —
   기능이 막히지는 않는다. */
.ic-dock .ic-panes:has(> .ic-pane.on > .gti-studio):not(#_):not(#_){
  max-height:min(620px,66vh)!important;
}