/* ════════════════════════════════════════
   editor.css — 쇼핑몰 편집기 (풀스크린 슬라이드업)
   "내 쇼핑몰 → 편집" 시 쫙 펼쳐지는 라이브 에디터
════════════════════════════════════════ */
.editor-scrim{
  position:fixed;inset:0;z-index:140;
  background:rgba(4,4,12,.6);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:.32s var(--ease);
}
.editor-scrim.on{opacity:1;visibility:visible}

.editor{
  position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);
  width:min(1100px,100%);height:92vh;
  background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:24px 24px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.6);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform .42s var(--ease);
}
.editor-scrim.on .editor{transform:translate(-50%,0)}

/* 핸들 */
.ed-grip{width:46px;height:5px;border-radius:99px;background:var(--line-2);margin:10px auto 0;flex-shrink:0}

/* 헤더 */
.ed-head{display:flex;align-items:center;gap:14px;padding:14px 22px 16px;border-bottom:1px solid var(--line)}
.ed-badge{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--brand-2);padding:5px 11px;border-radius:99px;background:color-mix(in srgb,var(--brand) 12%,transparent);flex-shrink:0}
.ed-name{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);font-family:var(--font-display);font-weight:700;font-size:20px;padding:6px 8px;border-radius:10px;transition:.2s}
.ed-name:focus{background:var(--surf)}
.ed-actions{display:flex;gap:8px;flex-shrink:0}

/* 본문: 좌측 스킨 레일 + 우측 라이브 프리뷰 */
.ed-body{flex:1;display:flex;min-height:0}
.ed-skins{
  width:200px;flex-shrink:0;border-right:1px solid var(--line);
  padding:16px 12px;overflow-y:auto;
}
.ed-skins-cap{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--sub);padding:0 6px 10px}
.ed-skin{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:11px;margin-bottom:4px;color:var(--txt-2);
  font-size:13px;font-weight:500;border:1px solid transparent;transition:.16s var(--ease);
}
.ed-skin:hover{background:var(--surf)}
.ed-skin.on{background:var(--surf-2);color:var(--txt);border-color:var(--line-2)}
.ed-skin .es-sw{width:18px;height:18px;border-radius:6px;flex-shrink:0;border:1px solid var(--line-2)}
.ed-skin .es-meta{line-height:1.2;min-width:0}
.ed-skin .es-meta b{display:block;font-weight:600;font-size:12.5px}
.ed-skin .es-meta i{font-style:normal;font-size:10px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ed-preview{flex:1;overflow-y:auto;background:#000;min-width:0}

@media (max-width:760px){
  .editor{height:94vh;border-radius:20px 20px 0 0}
  .ed-body{flex-direction:column}
  .ed-skins{width:auto;border-right:none;border-bottom:1px solid var(--line);display:flex;gap:8px;overflow-x:auto;padding:12px}
  .ed-skins-cap{display:none}
  .ed-skin{flex-shrink:0;width:auto;margin-bottom:0}
  .ed-skin .es-meta i{display:none}
}