/* ============================================================
   ARIFE 부분 편집 창 v4900 — 콘솔·모델 팝업과 같은 유리 재질
   ============================================================ */
.image-result-card .ip-open-btn{
  position:absolute; right:8px; bottom:8px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px;
  border:1px solid rgba(143,125,255,.5); border-radius:99px;
  background:rgba(24,18,52,.88);
  color:#c9c2ff; font-size:11px; font-weight:820;
  line-height:1; white-space:nowrap; cursor:pointer;
  opacity:0; transition:opacity .15s ease,border-color .15s ease,background-color .15s ease;
}
.image-result-card:hover .ip-open-btn,
.image-result-card .ip-open-btn:focus-visible{ opacity:1; }
.image-result-card .ip-open-btn:hover{
  border-color:rgba(143,125,255,.85); background:rgba(38,28,78,.94);
}
.image-result-card .ip-open-btn > i{ font-style:normal; font-size:12px; }

.ip-wrap{
  position:fixed; inset:0; z-index:680;
  display:grid; place-items:center;
  padding:22px;
}
.ip-wrap[hidden]{ display:none; }
.ip-back{
  position:absolute; inset:0;
  border:0; padding:0;
  background:rgba(2,6,12,.66);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  backdrop-filter:blur(14px) saturate(1.1);
  cursor:default;
}
.ip-box{
  position:relative;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:min(1120px,calc(100vw - 36px));
  max-height:min(860px,calc(100vh - 60px));
  overflow:hidden;
  border:1px solid rgba(151,197,231,.22);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(12,19,30,.78),rgba(7,11,18,.84));
  box-shadow:0 30px 90px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.09);
  color:#e8f0fb;
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)){
  .ip-box{
    background:linear-gradient(180deg,rgba(12,19,30,.6),rgba(7,11,18,.68));
    -webkit-backdrop-filter:blur(26px) saturate(1.25);
    backdrop-filter:blur(26px) saturate(1.25);
  }
}
.ip-box > header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px 14px;
  border-bottom:1px solid rgba(151,197,231,.14);
}
.ip-box h2{ margin:0; color:#f0f6ff; font-size:19px; letter-spacing:-.03em; }
.ip-box header p{ margin:5px 0 0; color:#8b9bb1; font-size:11.5px; line-height:1.5; }
.ip-x{
  flex:0 0 auto; width:40px; height:40px;
  border:1px solid rgba(151,197,231,.2); border-radius:12px;
  background:rgba(9,15,24,.55); color:#cfdcec; font-size:18px; cursor:pointer;
}
.ip-x:hover{ border-color:rgba(120,225,250,.4); background:rgba(20,38,54,.7); }

.ip-body{
  display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:18px; padding:16px 22px 18px;
  overflow:auto; overscroll-behavior:contain;
}
.ip-stage{ display:grid; align-content:start; gap:8px; min-width:0; }
/* 그리는 판은 원본 해상도. 여기서는 보이기만 줄인다 —
   판 자체를 줄이면 마스크 크기가 어긋나 fal 이 거절한다. */
/* 상자를 그림 비율 그대로 잡는다.
   `width:100%` 에 `max-height` 를 걸면 비율이 깨진다 — 그러면 그림은
   `object-fit:contain` 으로 가운데 letterbox 되고, 그리는 판만 상자를
   꽉 채워 **보이는 곳과 칠하는 곳이 어긋난다**(실측: 1:1 그림이
   736×560 상자에 들어가 좌우로 88px 씩 밀렸다). 가운데만 우연히 맞아
   '칠했는데 딴 데가 바뀌거나 그대로' 로 보였다.
   높이를 먼저 정하고 폭을 비율로 계산하면 어긋날 자리가 없다. */
.ip-canvas{
  position:relative;
  width:min(100%, calc(var(--ip-maxh, 520px) * var(--ip-arn, 1.6)));
  aspect-ratio:var(--ip-ar, 16 / 9);
  max-height:none;
  margin-inline:auto;
  border:1px solid rgba(151,197,231,.18); border-radius:14px;
  background:rgba(6,12,20,.5);
  overflow:hidden;
  display:grid; place-items:center;
}
.ip-canvas > .ip-base,
.ip-canvas > .ip-paint{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.ip-canvas > .ip-base{ object-fit:contain; }
.ip-canvas > .ip-paint{ cursor:crosshair; touch-action:none; }
.ip-load{ margin:0; padding:60px 10px; color:#8b9bb1; font-size:12.5px; text-align:center; }
.ip-size{ margin:0; color:#75839a; font-size:11px; text-align:center; }

.ip-side{ display:grid; align-content:start; gap:12px; min-width:0; }
.ip-tools{
  display:grid; gap:10px;
  padding:12px;
  border:1px solid rgba(151,197,231,.16); border-radius:13px;
  background:rgba(9,15,24,.5);
}
.ip-seg{
  display:inline-flex; gap:4px; padding:4px;
  border:1px solid rgba(151,197,231,.16); border-radius:11px;
  background:rgba(6,12,20,.42);
}
.ip-seg button{
  flex:1 1 auto;
  min-height:32px; padding:0 12px;
  border:0; border-radius:9px;
  background:transparent; color:#8b9bb1;
  font-size:11.5px; font-weight:800; cursor:pointer;
  transition:color .18s ease,background-color .18s ease;
}
.ip-seg button.on{ background:rgba(95,214,245,.16); color:#bdeeff; }
/* 가장자리 — 붓 자국을 그대로 살릴지, 살짝 풀지 */
.ip-edge{ display:grid; gap:5px; min-width:0; }
.ip-edge > span{ color:#8fa0b7; font-size:11.5px; font-weight:750; }
.ip-edge .ip-seg{ display:flex; width:100%; }
.ip-edge .ip-seg button{ padding:0 6px; font-size:11px; }
.ip-edgehelp{
  color:#75839a; font-size:10.5px; line-height:1.5;
  word-break:keep-all;
}
.ip-brush{ display:grid; gap:5px; }
.ip-brush > span{ color:#8fa0b7; font-size:11.5px; font-weight:750; }
.ip-brush b{ color:#bdeeff; }
.ip-undo{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ip-undo button{
  min-height:34px;
  border:1px solid rgba(151,197,231,.18); border-radius:10px;
  background:rgba(255,255,255,.04); color:#a9b8cc;
  font-size:11.5px; font-weight:750; cursor:pointer;
}
.ip-undo button:hover{ border-color:rgba(120,225,250,.4); color:#e2eefb; }

.ip-field{ display:grid; gap:6px; min-width:0; }
.ip-field[hidden]{ display:none; }
.ip-field > span{ color:#8fa0b7; font-size:11.5px; font-weight:750; }
.ip-field > span em{ color:#6c7c92; font-style:normal; }
.ip-field b{ color:#bdeeff; }
/* 프롬프트 업그레이드 — 보조 단추 결.
   공용 디자인 묶음(arife-design-system-v500)이 `body.a-ui button…` 으로
   min-height:32px 와 font-size !important 를 걸어 둔다. 클래스만으로는
   그쪽이 이겨 단추가 32px 로 주저앉는다(실측). 자리값을 못 박는다. */
.ip-ask .ip-up:not(#_):not(#_){
  justify-self:stretch;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:38px!important; height:38px!important; padding:0 12px;
  border:1px solid rgba(143,125,255,.34); border-radius:11px;
  background:rgba(143,125,255,.12); color:#c9c2ff;
  font-size:11.5px!important; font-weight:800; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.ip-ask .ip-up:hover:not(:disabled){ border-color:rgba(143,125,255,.7); background:rgba(143,125,255,.2); color:#ded9ff; }
.ip-ask .ip-up:disabled{ opacity:.55; cursor:default; }
.ip-prompt, .ip-model, .ip-speedsel{
  width:100%; min-height:42px; padding:10px 13px;
  border:1px solid rgba(151,197,231,.18); border-radius:12px;
  background:rgba(9,15,24,.55); color:#eef4ff; font-size:13px;
  font-family:inherit; line-height:1.6; resize:vertical;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.ip-model, .ip-speedsel{
  -webkit-appearance:none; appearance:none;
  padding-right:34px; min-height:42px; line-height:1;
  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");
  background-repeat:no-repeat; background-position:right 12px center;
  cursor:pointer;
}
.ip-prompt::placeholder{ color:#5f6e83; }
.ip-prompt:focus, .ip-model:focus, .ip-speedsel:focus{
  outline:none; border-color:rgba(120,225,250,.55);
  box-shadow:0 0 0 3px rgba(95,214,245,.14);
}
.ip-note{ margin:-4px 0 0; color:#75839a; font-size:11px; line-height:1.55; }
.ip-brush input[type=range], .ip-strength input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:99px;
  background:linear-gradient(90deg,rgba(95,214,245,.5),rgba(143,125,255,.5));
  cursor:pointer;
}
.ip-brush input[type=range]::-webkit-slider-thumb,
.ip-strength input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  box-shadow:0 2px 8px rgba(55,182,224,.45);
}

.ip-box > footer{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 22px 18px;
  border-top:1px solid rgba(151,197,231,.14);
}
.ip-cost{ color:#8fa0b7; font-size:11.5px; font-weight:750; }
.ip-go{
  flex:0 0 auto;
  min-height:46px; padding:0 26px;
  border:1px solid rgba(120,225,250,.5); border-radius:12px;
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  box-shadow:0 8px 24px rgba(55,182,224,.28),inset 0 1px rgba(255,255,255,.4);
  color:#04222c; font-size:13.5px; font-weight:850; cursor:pointer;
}
.ip-go:hover:not(:disabled){ background:linear-gradient(160deg,#7ce6fb,#45c3ea); }
.ip-go:disabled{ opacity:.45; box-shadow:none; cursor:not-allowed; }

@media (max-width:900px){
  .ip-wrap{ padding:10px; }
  .ip-box{ max-height:calc(100vh - 20px); border-radius:18px; }
  .ip-body{ grid-template-columns:minmax(0,1fr); }
  .ip-canvas{ --ip-maxh:300px; }
  .ip-box > footer{ flex-direction:column; align-items:stretch; gap:10px; }
  .ip-go{ width:100%; }
}


/* ── 만드는 중 · 결과 비교 ───────────────────────────────────── */
.ip-busy, .ip-done{ display:none; }
.ip-box.is-busy .ip-body, .ip-box.is-busy > footer,
.ip-box.is-done .ip-body, .ip-box.is-done > footer{ display:none; }
.ip-box.is-busy .ip-busy, .ip-box.is-done .ip-done{ display:grid; }

/* 만드는 과정을 눈으로 보여 주는 자리.
   왼쪽에 원본이 부드럽게 작아지며 자리 잡고, 오른쪽에 같은 크기의 빈 자리가
   열리고, 사이에서 빛이 흘러간다. 아래에 게이지.
   움직임은 `transform` 과 `opacity` 로만 준다 — 자리(레이아웃)를 건드리지
   않으므로 글이 밀리거나 상자를 벗어나지 않는다. */
.ip-busy{
  align-content:center; justify-items:center; gap:18px;
  padding:26px 24px 24px;
  overflow:auto; overscroll-behavior:contain;
  text-align:center;
}
.ip-busy strong{ color:#e8f0fb; font-size:14px; font-weight:820; }
.ip-busy small{ color:#8b9bb1; font-size:11.5px; line-height:1.6; }

/* ── 두 자리 나란히 ─────────────────────────────────────────── */
.ip-flow{
  --ip-fh:min(430px, calc(100vh - 330px));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:18px;
  width:100%; max-width:1000px;
}
.ip-fl{
  display:grid; justify-items:center; gap:9px;
  margin:0; min-width:0;
}
.ip-fl > figcaption{
  color:#8fa0b7; font-size:11.5px; font-weight:780;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.ip-fl-box{
  position:relative;
  display:block;
  width:min(100%, calc(var(--ip-fh) * var(--ip-arn, 1.6)));
  aspect-ratio:var(--ip-ar, 16 / 9);
  overflow:hidden;
  border:1px solid rgba(151,197,231,.2);
  border-radius:16px;
  background:rgba(6,12,20,.5);
  box-shadow:0 18px 46px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.07);
}
.ip-fl-box > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
/* 결과는 처음엔 없다 — 도착하면 떠오른다 */
.ip-fl-after{ opacity:0; transform:scale(.97); transition:opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.ip-box.is-ready .ip-fl-after{ opacity:1; transform:none; }

/* 들어올 때 : 원본은 커진 채로 오른쪽에 있다가 작아지며 왼쪽으로 앉고,
   결과 자리는 오른쪽에서 미끄러져 들어온다 */
@keyframes ip-shrink-left{
  from{ opacity:.35; transform:translateX(15%) scale(1.18); }
  to{ opacity:1; transform:none; }
}
@keyframes ip-slide-right{
  from{ opacity:0; transform:translateX(-14%) scale(.9); }
  to{ opacity:1; transform:none; }
}
@keyframes ip-arrow-in{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.ip-box.is-busy .ip-fl.a{ animation:ip-shrink-left .62s cubic-bezier(.22,.61,.36,1) both; }
.ip-box.is-busy .ip-fl.b{ animation:ip-slide-right .62s cubic-bezier(.22,.61,.36,1) .1s both; }
.ip-box.is-busy .ip-fl-arrow{ animation:ip-arrow-in .5s cubic-bezier(.22,.61,.36,1) .24s both; }

/* 아직 안 나온 자리 — 빛이 쓸고 지나간다 */
.ip-fl-skel{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;   /* 다 된 뒤에도 위에 남아 결과 그림 클릭을 막고 있었다 */
  background:
    linear-gradient(115deg, transparent 32%, rgba(143,125,255,.22) 48%, rgba(95,214,245,.26) 54%, transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, rgba(20,30,48,.6), rgba(9,14,24,.7));
  background-size:260% 100%, auto, auto;
  animation:ip-sweep 1.5s linear infinite;
  transition:opacity .45s ease;
}
@keyframes ip-sweep{ from{ background-position:-80% 0, 0 0, 0 0; } to{ background-position:180% 0, 0 0, 0 0; } }
.ip-box.is-ready .ip-fl-skel{ opacity:0; animation:none; }

/* ── 사이의 화살표 ─────────────────────────────────────────── */
.ip-fl-arrow{
  position:relative;
  display:grid; place-items:center; gap:0;
  width:96px; height:56px;
  color:#8fe6ff;
}
.ip-fl-arrow > svg{
  position:relative; z-index:2;
  width:38px; height:22px;
  filter:drop-shadow(0 0 8px rgba(95,214,245,.55));
  animation:ip-nudge 1.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes ip-nudge{
  0%,100%{ transform:translateX(-3px); opacity:.75; }
  50%{ transform:translateX(3px); opacity:1; }
}
/* 알갱이가 왼쪽에서 오른쪽으로 흘러간다 — 무언가 옮겨지는 중 */
.ip-fl-track{
  position:absolute; inset:0;
  display:block;
  overflow:hidden;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, rgba(95,214,245,.09) 22%, rgba(143,125,255,.11) 78%, transparent);
}
.ip-fl-track > i{
  position:absolute; top:50%; left:0;
  width:6px; height:6px; margin-top:-3px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #d9f6ff, #5fd6f5 55%, rgba(143,125,255,.85));
  box-shadow:0 0 10px rgba(95,214,245,.8);
  opacity:0;
  animation:ip-drift 1.5s linear infinite;
}
.ip-fl-track > i:nth-child(2){ animation-delay:.3s; margin-top:-11px; }
.ip-fl-track > i:nth-child(3){ animation-delay:.6s; margin-top:5px; }
.ip-fl-track > i:nth-child(4){ animation-delay:.9s; margin-top:-16px; }
.ip-fl-track > i:nth-child(5){ animation-delay:1.2s; margin-top:10px; }
@keyframes ip-drift{
  0%{ transform:translateX(2px) scale(.6); opacity:0; }
  18%{ opacity:1; }
  78%{ opacity:1; }
  100%{ transform:translateX(90px) scale(1.05); opacity:0; }
}
/* 다 되면 화살표는 조용해지고 한 번 빛난다 */
.ip-box.is-ready .ip-fl-arrow > svg{ animation:none; transform:none; opacity:1; }
.ip-box.is-ready .ip-fl-track > i{ animation:none; opacity:0; }
.ip-box.is-ready .ip-fl-track{ background:linear-gradient(90deg, transparent, rgba(95,214,245,.16), transparent); }

/* ── 아래 게이지 ───────────────────────────────────────────── */
.ip-gauge{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:12px;
  width:min(100%, 620px);
}
.ip-gauge-bar{
  position:relative;
  display:block; height:8px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px rgba(0,0,0,.35);
}
.ip-gauge-bar > i{
  position:relative;
  display:block; height:100%; width:3%;
  border-radius:99px;
  background:linear-gradient(90deg,#63dcf6,#8f7dff);
  box-shadow:0 0 14px rgba(95,214,245,.5);
  transition:width .45s cubic-bezier(.22,.61,.36,1);
}
.ip-gauge-bar > i::after{
  content:''; position:absolute; inset:0;
  border-radius:99px;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  background-size:220% 100%;
  animation:ip-gsweep 1.3s linear infinite;
}
@keyframes ip-gsweep{ from{ background-position:-60% 0; } to{ background-position:160% 0; } }
.ip-box.is-ready .ip-gauge-bar > i::after{ animation:none; opacity:0; }
.ip-gauge-pct{
  min-width:44px;
  color:#bdeeff; font-size:12px; font-weight:860;
  font-variant-numeric:tabular-nums; text-align:right;
}
.ip-cost.over{ color:#ffb4a8!important; font-weight:800; }
.ip-flow-note{
  margin:0; max-width:640px;
  color:#8b9bb1; font-size:11.5px; line-height:1.6;
  word-break:keep-all;
}
/* 편집 모델은 영어로만 글을 읽는다 — 실제로 보낸 문장을 보여 준다 */
.ip-sent{
  margin:0; max-width:min(100%, 760px);
  padding:8px 12px;
  border:1px solid rgba(143,125,255,.26); border-radius:10px;
  background:rgba(143,125,255,.09);
  color:#c9c2ff; font-size:11px; line-height:1.6;
  text-align:left;
  word-break:break-word;
}
.ip-sent[hidden]{ display:none; }
.ip-flow-acts{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  width:100%;
}
.ip-flow-acts button{
  min-height:42px; padding:0 16px;
  border:1px solid rgba(151,197,231,.18); border-radius:11px;
  background:rgba(255,255,255,.04); color:#a9b8cc;
  font-size:12px; font-weight:780; cursor:pointer; white-space:nowrap;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease, opacity .25s ease;
}
.ip-flow-acts button:hover{ border-color:rgba(120,225,250,.4); background:rgba(20,38,54,.6); color:#e2eefb; }
.ip-flow-acts button.main{
  border-color:rgba(120,225,250,.5);
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  color:#04222c; font-weight:850;
}
/* 만드는 중에는 비교할 것이 없다 — 다 되면 나타난다 */
.ip-cmp-open, .ip-edit-new2, .ip-keep{ display:none; }
.ip-box.is-ready .ip-cmp-open,
.ip-box.is-ready .ip-edit-new2,
.ip-box.is-ready .ip-keep{ display:inline-flex; align-items:center; justify-content:center; }
.ip-flow-acts .ip-keep.kept:not(#_):not(#_){
  border-color:rgba(120,225,250,.4);
  background:rgba(95,214,245,.14);
  color:#bdeeff;
}

/* 그림을 누르면 크게 본다 */
.ip-fl-box > img{ cursor:zoom-in; }
.ip-lb{
  position:absolute; inset:0; z-index:30;
  display:grid; place-items:center;
  padding:22px;
}
.ip-lb[hidden]{ display:none; }
.ip-lb-back{
  position:absolute; inset:0;
  border:0; padding:0;
  background:rgba(2,6,12,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  cursor:zoom-out;
}
.ip-lb-box{
  position:relative;
  display:grid; justify-items:center; gap:10px;
  margin:0; max-width:100%; max-height:100%;
  pointer-events:none;
}
.ip-lb-box > img{
  display:block;
  max-width:100%; max-height:calc(100% - 34px);
  width:auto; height:auto;
  border-radius:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.ip-lb-box figcaption{
  display:flex; align-items:center; gap:10px;
  color:#8fa0b7; font-size:11.5px; font-weight:750;
}
.ip-lb-box figcaption b{ color:#bdeeff; font-variant-numeric:tabular-nums; }
.ip-lb-x{
  position:absolute; right:14px; top:14px; z-index:2;
  width:40px; height:40px;
  border:1px solid rgba(151,197,231,.24); border-radius:12px;
  background:rgba(9,15,24,.75); color:#cfdcec; font-size:18px; cursor:pointer;
}
.ip-lb-x:hover{ border-color:rgba(120,225,250,.5); }

@media (max-width:900px){
  .ip-flow{ --ip-fh:min(240px, 30vh); gap:10px; }
  .ip-fl-arrow{ width:52px; height:44px; }
  .ip-fl-arrow > svg{ width:26px; height:16px; }
  @keyframes ip-drift{
    0%{ transform:translateX(2px) scale(.6); opacity:0; }
    18%{ opacity:1; }
    78%{ opacity:1; }
    100%{ transform:translateX(46px) scale(1.05); opacity:0; }
  }
  .ip-busy{ padding:18px 14px; gap:14px; }
  .ip-flow-acts button{ flex:1 1 auto; }
}

.ip-done{ gap:12px; padding:16px 22px 20px; align-content:start; }
.ip-done > h3{ margin:0; color:#f0f6ff; font-size:15px; font-weight:830; }
.ip-done > p{ margin:0; color:#8b9bb1; font-size:11.5px; line-height:1.6; }
/* 두 갈래 비교 — 손잡이를 끌면 전/후가 갈린다 */
.ip-cmp{
  position:relative;
  width:min(100%, calc(var(--ip-maxh, 460px) * var(--ip-arn, 1.6)));
  aspect-ratio:var(--ip-ar, 16 / 9);
  margin-inline:auto;
  overflow:hidden;
  border:1px solid rgba(151,197,231,.2); border-radius:14px;
  background:rgba(6,12,20,.5);
  touch-action:none;
  user-select:none;
}
.ip-cmp img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.ip-cmp .ip-after{ clip-path:inset(0 0 0 var(--ip-split, 50%)); }
.ip-cmp .ip-line{
  position:absolute; top:0; bottom:0; left:var(--ip-split, 50%);
  width:2px; margin-left:-1px;
  background:linear-gradient(180deg,rgba(120,225,250,.2),#63dcf6,rgba(120,225,250,.2));
  pointer-events:none;
}
.ip-cmp .ip-grip{
  position:absolute; top:50%; left:var(--ip-split, 50%);
  width:34px; height:34px; margin:-17px 0 0 -17px;
  display:grid; place-items:center;
  border:1px solid rgba(120,225,250,.6); border-radius:50%;
  background:rgba(6,20,28,.86);
  color:#bdeeff; font-size:12px; font-weight:900;
  cursor:ew-resize;
}
.ip-cmp .ip-tag{
  position:absolute; top:9px;
  padding:4px 9px;
  border-radius:99px;
  background:rgba(3,9,15,.72);
  color:#cfdcec; font-size:10.5px; font-weight:800;
  pointer-events:none;
}
.ip-cmp .ip-tag.l{ left:9px; }
.ip-cmp .ip-tag.r{ right:9px; }
.ip-done-acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.ip-done-acts button{
  min-height:42px; padding:0 16px;
  border:1px solid rgba(151,197,231,.18); border-radius:11px;
  background:rgba(255,255,255,.04); color:#a9b8cc;
  font-size:12px; font-weight:780; cursor:pointer; white-space:nowrap;
}
.ip-done-acts button:hover{ border-color:rgba(120,225,250,.4); color:#e2eefb; }
.ip-done-acts button.main{
  border-color:rgba(120,225,250,.5);
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
  color:#04222c; font-weight:850;
}
@media (prefers-reduced-motion: reduce){
  .ip-fl.a, .ip-fl.b, .ip-fl-arrow,
  .ip-fl-arrow > svg, .ip-fl-track > i,
  .ip-fl-skel, .ip-gauge-bar > i::after{ animation:none!important; }
  .ip-fl-after, .ip-gauge-bar > i{ transition:none!important; }
  .ip-fl-track > i{ opacity:0; }
}