/* ============================================================
   ARIFE 콘솔 '편집' 칸 v5000

   재질은 지금 콘솔 그대로(유리), 칸과 간격도 기존 규격을 따른다.
     칸 높이 42px · 큰 단추 46px · 바깥 여백 22px · 모서리 12~16px
   3D 와 움직임은 `transform` 과 `opacity` 로만 준다 — 자리(레이아웃)를
   건드리지 않으므로 옆 글이 밀리거나 상자를 벗어나지 않는다.
   ============================================================ */

.ie-pane .ie-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  align-items:stretch;
  gap:20px;
  padding:4px 2px 6px;
}

/* ── 왼쪽 : 3D 판 ──────────────────────────────────────────── */
/* 가로로 긴 그림은 판이 납작해진다. 위에 붙여 두면 오른쪽 칸만 길어
   보이고 아래가 텅 빈다 — 세로 가운데에 놓는다. */
.ie-stage{
  display:grid; justify-items:center; align-content:center; gap:10px;
  min-width:0;
  perspective:1100px;
}
.ie-slab{
  position:relative;
  width:min(100%, calc(min(360px, 42vh) * var(--ie-arn, 1.6)));
  aspect-ratio:var(--ie-ar, 16 / 9);
  max-height:min(360px, 42vh);
  display:grid; place-items:center;
  overflow:hidden;
  border:1px solid rgba(151,197,231,.2);
  border-radius:18px;
  background:
    radial-gradient(120% 90% at var(--ie-lx,50%) var(--ie-ly,50%), rgba(95,214,245,.12), transparent 62%),
    linear-gradient(180deg, rgba(12,19,30,.6), rgba(7,11,18,.7));
  box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.08);
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.ie-slab.has{ border-color:rgba(120,225,250,.4); }
/* 끌어다 놓는 중 */
.ie-slab.ie-drop{
  border-color:rgba(120,225,250,.85);
  box-shadow:0 0 0 3px rgba(95,214,245,.22) inset, 0 26px 60px rgba(0,0,0,.5);
}
.ie-slab.ie-drop::after{
  content:'여기에 놓으세요';
  position:absolute; inset:auto 0 14px; z-index:3;
  color:#bdeeff; font-size:12px; font-weight:850; text-align:center;
  pointer-events:none;
}
.ie-slab:hover{ box-shadow:0 32px 70px rgba(0,0,0,.58), 0 0 0 1px rgba(120,225,250,.18) inset; }
/* 빛무리 — 마우스를 따라 옮겨 붙는다(위치는 JS 가 변수로 준다) */
.ie-glow{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(60% 60% at var(--ie-lx,50%) var(--ie-ly,50%), rgba(143,125,255,.22), transparent 72%);
  opacity:.9;
  transition:background .18s ease-out;
}
.ie-shot{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:none;
  object-fit:contain;
  transform:translateZ(28px);
}
.ie-slab.has .ie-shot{ display:block; }
.ie-slab.has .ie-empty{ display:none; }

.ie-empty{
  position:relative;
  display:grid; justify-items:center; gap:8px;
  padding:24px 22px;
  text-align:center;
  transform:translateZ(22px);
}
.ie-empty > i{
  display:grid; place-items:center;
  width:46px; height:46px;
  border:1px solid rgba(143,125,255,.34); border-radius:14px;
  background:rgba(143,125,255,.14);
  color:#c9c2ff; font-size:19px; font-style:normal;
}
.ie-empty > strong{ color:#e8f0fb; font-size:13.5px; font-weight:820; }
.ie-empty > small{
  max-width:280px;
  color:#8b9bb1; font-size:11px; line-height:1.6;
  word-break:keep-all;
}
.ie-meta{
  margin:0; min-height:16px;
  color:#8fa0b7; font-size:11px; font-weight:750;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
/* 새 그림이 놓일 때 한 번 떠오른다 */
@keyframes ie-rise{
  from{ opacity:0; transform:translateZ(0) scale(.965); }
  to{ opacity:1; transform:translateZ(0) scale(1); }
}
.ie-slab.ie-in{ animation:ie-rise .34s cubic-bezier(.22,.61,.36,1); }

/* ── 오른쪽 : 고르는 자리 ─────────────────────────────────── */
.ie-side{ display:grid; align-content:start; gap:12px; min-width:0; }
.ie-head{ display:grid; gap:5px; min-width:0; }
.ie-head > b{ color:#f0f6ff; font-size:15px; font-weight:830; letter-spacing:-.02em; }
.ie-head > span{
  color:#8b9bb1; font-size:11.5px; line-height:1.6;
  word-break:keep-all;
}
.ie-picklab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-width:0;
}
.ie-picklab > span{
  color:#8fa0b7; font-size:11.5px; font-weight:750;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ie-picklab > b{
  flex:0 0 auto;
  padding:3px 9px;
  border:1px solid rgba(120,225,250,.3); border-radius:99px;
  background:rgba(95,214,245,.1);
  color:#bdeeff; font-size:10.5px; font-weight:850;
}

.ie-pick{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(72px, 1fr));
  grid-auto-rows:72px;
  gap:7px;
  max-height:184px;
  padding:9px;
  overflow:auto; overscroll-behavior:contain;
  border:1px solid rgba(151,197,231,.16); border-radius:13px;
  background:rgba(9,15,24,.5);
}
.ie-none{
  grid-column:1/-1; margin:0;
  padding:22px 6px;
  color:#75839a; font-size:11.5px; line-height:1.6; text-align:center;
  word-break:keep-all;
}
/* 칸 높이를 못 박는다 — `<button>` 은 제 속으로 키를 못 재서
   자동으로 두면 줄이 주저앉고 사진이 잘린다(다른 창에서 겪은 것과 같다). */
.ie-thumb{
  position:relative;
  display:block; width:100%; height:72px;
  padding:0; overflow:hidden;
  border:1px solid rgba(151,197,231,.16); border-radius:10px;
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.22,.61,.36,1), border-color .18s ease, box-shadow .18s ease;
}
.ie-thumb > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.ie-thumb:hover{ border-color:rgba(120,225,250,.44); transform:translateY(-2px); }
.ie-thumb:hover > img{ transform:scale(1.07); }
.ie-thumb.on{
  border-color:rgba(120,225,250,.8);
  box-shadow:0 0 0 2px rgba(95,214,245,.35);
}
.ie-mark{
  position:absolute; right:5px; top:5px; z-index:2;
  display:grid; place-items:center;
  width:18px; height:18px;
  border:1px solid rgba(255,255,255,.45); border-radius:6px;
  background:rgba(3,9,15,.6);
  opacity:0; transition:opacity .15s ease;
}
.ie-mark::after{
  content:''; width:8px; height:4px;
  border-left:2px solid #04222c; border-bottom:2px solid #04222c;
  transform:rotate(-45deg) translate(1px,-1px);
}
.ie-thumb.on .ie-mark{
  opacity:1;
  border-color:rgba(120,225,250,.9);
  background:linear-gradient(160deg,#63dcf6,#37b6e0);
}

.ie-acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ie-pane .ie-acts button:not(#_):not(#_){
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px!important; height:42px!important; padding:0 12px;
  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; overflow:hidden; text-overflow:ellipsis;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.ie-acts button:hover{ border-color:rgba(120,225,250,.4); background:rgba(20,38,54,.6); color:#e2eefb; }
.ie-acts button:disabled{ opacity:.5; cursor:default; }

.ie-pane .ie-go:not(#_):not(#_){
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px!important; height:46px!important; padding:0 20px;
  overflow:hidden;
  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;
  white-space:nowrap;
  transition:box-shadow .2s ease, background .2s ease;
}
.ie-go:hover:not(:disabled){ background:linear-gradient(160deg,#7ce6fb,#45c3ea); }
.ie-go:disabled{ opacity:.45; box-shadow:none; cursor:not-allowed; }
/* 닿으면 빛 띠가 지나간다 — 다른 단추와 같은 결 */
.ie-go::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.35) 50%,transparent 66%);
  transform:translateX(-115%);
  transition:transform .01s;
}
@media (hover:hover){
  .ie-go:hover:not(:disabled)::after{
    transform:translateX(115%);
    transition:transform .62s cubic-bezier(.22,.61,.36,1);
  }
}
.ie-tip{
  margin:0;
  color:#75839a; font-size:11px; line-height:1.55;
  word-break:keep-all;
}

@media (max-width:980px){
  .ie-pane .ie-wrap{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .ie-slab{ max-height:190px; }
  .ie-pick{ max-height:104px; }
  .ie-head > span{ display:none; }
}
@media (max-width:560px){
  .ie-acts{ grid-template-columns:minmax(0,1fr); }
  .ie-pick{ grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); grid-auto-rows:62px; }
  .ie-thumb{ height:62px; }
}
@media (prefers-reduced-motion: reduce){
  .ie-slab, .ie-thumb, .ie-thumb > img{ transition:none!important; }
  .ie-slab.ie-in{ animation:none!important; }
  .ie-go::after{ display:none!important; }
}