/* ============================================================
   ARIFE AI 이미지 콘솔 v416
   생성 영역이 세 군데(상단 입력창 · 한글 텍스트 이미지 · 모델 모달)로
   흩어져 있던 것을 화면 하단 고정 바 하나로 모은다.
   문제가 생기면 image.html 에서 console-v416 두 줄만 지우면 원복된다.
   ============================================================ */

/* ---- 1. 박스 패널 제거 : 이미지가 카드에 갇히지 않게 ---- */
html body.ic-on section.image-library-section,
html body.ic-on section.image-personalization-v415,
html body.ic-on section[class*="image-personalization"]{
  background-color:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  width:min(1760px,calc(100% - 40px)) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
html body.ic-on .image-library-section{padding-bottom:40px !important}

/* ---- 2. 결과 카드 정리 : 날짜 · 영상 버튼 제거, 삭제는 모서리 × 로 ---- */
html body.ic-on .image-result-card footer small{display:none !important}
html body.ic-on .image-result-tovideo{display:none !important}
html body.ic-on .image-result-card{position:relative;overflow:hidden}
html body.ic-on .image-result-card{
  min-height:0 !important;
  height:auto !important;
  align-content:start !important;
  grid-template-rows:auto auto !important;
  grid-column:auto !important;   /* 생성 카드만 2칸을 먹어 크기가 들쭉날쭉하던 것 통일 */
  grid-row:auto !important;
}
html body.ic-on .image-result-grid{
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) !important;
  align-items:start !important;
}
html body.ic-on .image-result-upload,
html body.ic-on .image-empty-card{min-height:230px !important;height:auto !important}
html body.ic-on .image-result-card>img{
  width:100% !important;
  height:210px !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  display:block !important;
  background:#070c14;
}
html body.ic-on .image-result-card footer{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-top:1px solid rgba(38,58,86,.7) !important;
}
html body.ic-on .image-result-card footer strong{
  font-size:12px !important;
  font-weight:700 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html body.ic-on .image-result-card footer a{margin-left:auto !important;font-size:11.5px !important;white-space:nowrap}
/* 카드 폭 전체를 먹던 빨간 '삭제' 띠 → 우상단 원형 × */
html body.ic-on .image-result-card .image-result-delete{
  position:absolute !important;
  top:8px; right:8px; left:auto !important; bottom:auto !important;
  width:28px !important; height:28px !important;
  min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important;
  display:grid !important; place-items:center !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:50% !important;
  background:rgba(6,10,17,.72) !important;
  backdrop-filter:blur(6px);
  color:#dbe4f2 !important;
  font-size:0 !important;
  line-height:0 !important;
  opacity:0; transition:opacity .15s,background .15s,border-color .15s;
  cursor:pointer;
}
html body.ic-on .image-result-card .image-result-delete::after{
  content:"×"; font-size:16px; line-height:1; font-weight:600;
}
html body.ic-on .image-result-card:hover .image-result-delete,
html body.ic-on .image-result-card .image-result-delete:focus-visible{opacity:1}
html body.ic-on .image-result-card .image-result-delete:hover{
  border-color:#ff91a9 !important; background:rgba(120,20,40,.8) !important; color:#ffd8e0 !important;
}
@media(hover:none){body.ic-on .image-result-card .image-result-delete{opacity:.9}}

/* ---- 3. 하단 고정 생성 바 ---- */
html body.ic-on{padding-bottom:0}
.ic-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; justify-content:center;
  padding:0 16px 16px;
  pointer-events:none;
}
.ic-shell{
  pointer-events:auto;
  width:min(1180px,100%);
  border:1px solid #2c4363;
  border-radius:20px 20px 18px 18px;
  background:linear-gradient(180deg,rgba(13,21,33,.97),rgba(7,12,20,.98));
  box-shadow:0 -6px 34px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(16px) saturate(1.1);
  overflow:hidden;
}
.ic-tabs{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  border-bottom:1px solid rgba(38,58,86,.75);
}
.ic-tabs button{
  border:1px solid transparent; border-radius:11px;
  background:transparent; color:#8fa0b7;
  font:800 12.5px/1 inherit; padding:9px 14px; cursor:pointer;
  transition:.15s; font-family:inherit;
}
.ic-tabs button:hover{color:#dce8f9;background:rgba(121,170,255,.08)}
.ic-tabs button.on{
  border-color:#5879be; color:#fff;
  background:linear-gradient(145deg,#213656,#18213d);
  box-shadow:inset 0 1px rgba(255,255,255,.13);
}
.ic-tabs .ic-spacer{margin-left:auto}
.ic-tabs .ic-ghost{
  border-color:#33486a; color:#b7c6dc;
  background:rgba(9,17,28,.7);
}
.ic-tabs .ic-ghost:hover{border-color:#7597c5;color:#fff}
.ic-tabs .ic-collapse{padding:9px 12px}

.ic-panes{max-height:min(52vh,520px);overflow:auto;overscroll-behavior:contain}
.ic-pane{display:none;padding:12px 14px 14px}
.ic-pane.on{display:block}

/* 도크 안으로 옮겨온 원래 요소들의 여백·테두리를 걷어낸다 */
.ic-pane .image-composer,
.ic-pane .gti-studio{
  margin:0 !important; width:100% !important; max-width:none !important;
  border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  padding:0 !important;
}
.ic-pane .gti-head{margin-bottom:14px !important}
.ic-pane .gti-studio .gti-badge{display:none}

html body.ic-on.ic-collapsed .ic-panes{display:none}

/* 도크에 가리지 않도록 본문 아래 여백 확보 (JS 가 실제 높이로 갱신) */
html body.ic-on .image-library-section{padding-bottom:var(--ic-dock-space,300px) !important}

/* ---- 4. 무드보드 ---- */
.ic-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.ic-board{
  position:relative; border:1px solid #2c4363; border-radius:14px; overflow:hidden;
  background:#0a111c; text-align:left; cursor:pointer; padding:0; font-family:inherit;
  transition:border-color .15s,transform .15s;
}
.ic-board:hover{border-color:#7597c5;transform:translateY(-2px)}
.ic-board>span{display:block;height:96px;background:#070c14 center/cover no-repeat}
.ic-board>b{display:block;padding:9px 11px 3px;color:#eef3fb;font-size:12.5px;font-weight:800}
.ic-board>small{display:block;padding:0 11px 10px;color:#8190a5;font-size:11px}
.ic-board .ic-board-del{
  position:absolute; top:7px; right:7px; width:24px; height:24px;
  display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); background:rgba(6,10,17,.74);
  color:#dbe4f2; font-size:14px; line-height:1; cursor:pointer; opacity:0; transition:.15s;
}
.ic-board:hover .ic-board-del{opacity:1}
.ic-board .ic-board-del:hover{border-color:#ff91a9;background:rgba(120,20,40,.82);color:#ffd8e0}
.ic-board-new{
  display:grid; place-items:center; min-height:150px;
  border:1px dashed #35507a; border-radius:14px; background:rgba(9,17,28,.5);
  color:#93a5bd; font:800 12.5px/1.6 inherit; cursor:pointer; text-align:center; font-family:inherit;
}
.ic-board-new:hover{border-color:#7597c5;color:#dce8f9}
.ic-empty{padding:26px 4px;color:#8190a5;font-size:12.5px;line-height:1.7}

@media(max-width:760px){
  .ic-dock{padding:0 8px 8px}
  .ic-tabs{flex-wrap:wrap}
  .ic-panes{max-height:58vh}
  html body.ic-on section.image-library-section,
  html body.ic-on section[class*="image-personalization"]{width:calc(100% - 20px) !important}
  html body.ic-on .image-result-card>img{height:180px !important}
}

/* ---- 5. 비워진 상단 스테이지 정리 ----
   .image-composer 를 하단 도크로 옮기고 나면 .image-stage 에는
   화면에 보이면 안 되는 sr-only 두 개만 남아 400px 짜리 빈 칸이 된다.
   요소는 남겨 두고(스크립트가 여기에 상태를 써 넣는다) 화면에서만 감춘다. */
html body.ic-on .image-stage{display:none !important}
html body.ic-on .image-stage #image-stage-title,
html body.ic-on .image-stage #image-cloud-state{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---- 6. 도크 안 버튼을 사이트 파랑으로 통일 (라임 잔재 제거) ---- */
html body.ic-on .ic-pane .image-add-button,
html body.ic-on .ic-pane .image-model-trigger b,
html body.ic-on .ic-pane .gti-secondary,
html body.ic-on .ic-pane .gti-refine{
  border-color:rgba(121,170,255,.42) !important;
  background:rgba(121,170,255,.12) !important;
  color:#79aaff !important;
}
html body.ic-on .ic-pane .image-generate-button{
  background:linear-gradient(135deg,#397fce,#5265d8 55%,#755dde) !important;
  border-color:#8db6ff !important; color:#fff !important;
}

/* ============================================================
   v417 · 취향(Personalize) 계층
   ============================================================ */

/* ---- Personalize 버튼 ---- */
.ic-tabs .pz-open-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px}
.ic-tabs .pz-open-btn svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.ic-tabs .pz-open-btn span{font:800 12.5px/1 inherit;letter-spacing:.01em}

html body.pz-open{overflow:hidden}

/* ---- 취향 선택 패널 ---- */
.pz-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px}
.pz-modal.on{display:flex}
.pz-backdrop{position:absolute;inset:0;border:0;padding:0;background:rgba(4,7,12,.78);backdrop-filter:blur(7px);cursor:pointer}
.pz-dialog{
  position:relative;display:flex;flex-direction:column;
  width:min(1180px,100%);max-height:min(88vh,880px);
  border:1px solid #2c4363;border-radius:22px;
  background:linear-gradient(180deg,#0d1521,#070c14);
  box-shadow:0 34px 110px rgba(0,0,0,.66);overflow:hidden;
}
.pz-dialog>header{display:flex;align-items:flex-start;gap:18px;padding:22px 24px 16px;border-bottom:1px solid rgba(38,58,86,.7)}
.pz-dialog h2{margin:0 0 6px;font-size:21px;letter-spacing:-.03em;color:#f4f7fc}
.pz-dialog>header p{margin:0;color:#8190a5;font-size:12.5px;line-height:1.6}
.pz-close{margin-left:auto;width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid #33486a;border-radius:11px;background:rgba(9,17,28,.7);color:#c9d4e2;font-size:18px;cursor:pointer}
.pz-close:hover{border-color:#7597c5;color:#fff}

/* 게이지 */
.pz-gauge{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid rgba(38,58,86,.55)}
.pz-track{flex:1;height:9px;border-radius:999px;background:#16223a;border:1px solid #263a56;box-shadow:inset 0 1px rgba(0,0,0,.55);overflow:hidden}
.pz-fill{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#397fce,#5265d8 55%,#755dde);transition:width .28s ease}
.pz-full .pz-fill{background:linear-gradient(90deg,#3fb98f,#69e0f4)}
.pz-count{flex:0 0 auto;color:#dbe6f5;font:800 13px/1 inherit;font-variant-numeric:tabular-nums}
.pz-pct{flex:0 0 auto;min-width:44px;text-align:right;color:#78a9ff;font:800 13px/1 inherit;font-style:normal;font-variant-numeric:tabular-nums}
.pz-full .pz-pct{color:#69e0f4}

/* 이미지 격자 */
.pz-grid{flex:1;overflow:auto;overscroll-behavior:contain;padding:16px 24px 20px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;align-content:start}
/* 다른 시트가 grid-auto-rows 를 아주 작게 잡아 타일이 4px 로 찌그러졌다 */
html body .pz-modal .pz-grid{grid-auto-rows:max-content !important;align-items:start !important}
html body .pz-modal .pz-tile{display:block !important;height:auto !important;min-height:0 !important;align-self:start !important}
.pz-empty{grid-column:1/-1;padding:40px 4px;color:#8190a5;font-size:13px;text-align:center}
.pz-tile{position:relative;padding:0;border:1px solid #22334c;border-radius:14px;overflow:hidden;
  background:#080e17;cursor:pointer;font-family:inherit;transition:border-color .15s,transform .15s}
.pz-tile img{display:block;width:100%;height:132px;object-fit:cover;background:#070c14}
.pz-tile b{display:block;padding:8px 10px;color:#b7c6dc;font-size:11.5px;font-weight:700;text-align:left;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pz-tile:hover{border-color:#7597c5;transform:translateY(-2px)}
.pz-check{position:absolute;top:8px;right:8px;width:24px;height:24px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(6,10,17,.7);
  color:transparent;font-size:13px;font-style:normal;transition:.15s}
.pz-tile.on{border-color:#78a9ff;box-shadow:0 0 0 2px rgba(120,169,255,.28)}
.pz-tile.on .pz-check{border-color:#8db6ff;background:linear-gradient(135deg,#397fce,#5265d8);color:#fff}
.pz-tile.on b{color:#eef3fb}

.pz-dialog>footer{display:flex;align-items:center;gap:14px;padding:14px 24px 18px;border-top:1px solid rgba(38,58,86,.7)}
.pz-hint{color:#8190a5;font-size:12px}
.pz-save{margin-left:auto;min-height:44px;padding:0 20px;border:1px solid #8db6ff;border-radius:13px;
  background:linear-gradient(135deg,#397fce,#5265d8 55%,#755dde);color:#fff;
  font:800 13px/1 inherit;font-family:inherit;cursor:pointer;transition:.15s}
.pz-save:disabled{border-color:#33486a;background:rgba(9,17,28,.8);color:#7b8ba3;cursor:not-allowed}

/* ---- 확대 보기 ---- */
.pz-lb{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:28px}
.pz-lb.on{display:flex}
.pz-lb-back{position:absolute;inset:0;border:0;padding:0;background:rgba(4,7,12,.86);backdrop-filter:blur(8px);cursor:zoom-out}
/* 상자 폭을 그림 비율에서 끌어낸다.
   폭을 못 박고 max-height 로 누르면 비율이 깨져 위아래(또는 좌우)가 빈다.
   높이를 먼저 정하고 폭 = 높이 × 비율 로 계산하면 빈 자리가 없다. */
.pz-lb-box{position:relative;margin:0;display:flex;flex-direction:column;gap:0;
  --pz-maxh:64vh;
  /* 세로로 아주 긴 그림은 폭이 200px 대까지 줄어 프롬프트가 한 줄에 두세 글자씩
     떨어졌다(실측 213px). 글을 읽을 수 있는 최소 폭은 지킨다. */
  width:min(1080px,100%,max(340px,calc(var(--pz-maxh) * var(--pz-arn,1.5))));
  max-height:90vh;border:1px solid #2c4363;border-radius:20px;overflow:hidden;
  background:#070c14;box-shadow:0 34px 110px rgba(0,0,0,.7)}
.pz-lb-box img{display:block;width:100%;height:auto;
  aspect-ratio:var(--pz-ar,3 / 2);max-height:var(--pz-maxh);object-fit:contain;background:#04070c}
.pz-lb-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pz-lb-size{color:#8fa0b7;font:750 11.5px/1 inherit;font-variant-numeric:tabular-nums}
.pz-lb-box figcaption{padding:16px 20px 18px;border-top:1px solid rgba(38,58,86,.7);
  display:flex;flex-direction:column;gap:10px;overflow:auto}
.pz-lb-style{color:#78a9ff;font:800 12px/1 inherit}
.pz-lb-prompt{margin:0;color:#c4cfde;font-size:13px;line-height:1.75;word-break:break-word;
  max-height:20vh;overflow:auto;user-select:text}
.pz-lb-copy{align-self:flex-start;min-height:38px;padding:0 16px;border:1px solid rgba(121,170,255,.42);
  border-radius:11px;background:rgba(121,170,255,.12);color:#79aaff;
  font:800 12px/1 inherit;font-family:inherit;cursor:pointer;transition:.15s}
.pz-lb-copy:hover{background:rgba(121,170,255,.22);color:#fff}
html body.ic-on [data-personalization-card]{cursor:zoom-in}

/* ---- 스타일 패널 : 생성 · 업로드를 눌러야 펼쳐진다 ---- */
html body.pz-style-folded .image-result-grid,
html body.pz-style-folded .image-history-more{display:none !important}
html body.pz-style-folded .image-library-section{padding-bottom:120px !important}

@media(max-width:760px){
  .pz-modal,.pz-lb{padding:10px}
  .pz-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));padding:12px 14px 16px}
  .pz-tile img{height:104px}
  .pz-dialog>header,.pz-gauge,.pz-dialog>footer{padding-left:14px;padding-right:14px}
}