/* 조회 상세 → 좌측 목업 클릭 시 우측에서 슬라이드로 열리는 "상품 확대 & 시뮬레이션"
   드로어. mockup-drawer.js(지면 목업 만들기)와 같은 스크림/리사이즈 패턴이다.
   세이프존 박스 자체(.zone-box/.zone-box-handle)는 zone-box.css 를 공유한다. */
.zoom-scrim{
  position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.35);
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.zoom-scrim.open{opacity:1;pointer-events:auto}
.zoom-panel{
  position:fixed;top:0;right:0;height:100%;width:50vw;min-width:420px;max-width:94vw;z-index:91;
  background:var(--bg);box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;min-height:0;
  transform:translateX(100%);transition:transform .2s ease;
}
.zoom-panel.open{transform:translateX(0)}
.zoom-panel.resizing{transition:none;user-select:none}
.zoom-resize-handle{
  position:absolute;top:0;left:-4px;width:8px;height:100%;z-index:2;
  cursor:col-resize;touch-action:none;
}
.zoom-resize-handle::after{
  content:'';position:absolute;top:0;left:3px;width:2px;height:100%;background:var(--border);
}
.zoom-resize-handle:hover::after,.zoom-resize-handle.active::after{background:var(--primary)}
.zoom-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.zoom-head h2{margin:0;font-size:15px}
.zoom-body{flex:1;min-height:0;overflow-y:auto;padding:18px}

.zoom-layout{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.zoom-stage{
  flex:1;min-width:320px;background:var(--bg-soft);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;
  display:flex;align-items:flex-start;justify-content:center;overflow:hidden;
}
/* 실제 표시 크기이자 세이프존 좌표(퍼센트)의 기준 박스 — 드로어가 넓어도 목업을
   카드 미리보기의 1.3배 정도로만 살짝 키운다. 여기를 넓히면 안 되는 이유는
   js/mockup-zoom.js 쪽 주석 참고. */
.zoom-stage-inner{position:relative;width:100%;max-width:400px}
.zoom-stage-inner svg{width:100%;height:auto;display:block}
.zoom-side{width:400px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}
.zoom-section{
  border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;background:var(--bg);
}
.zoom-section h3{margin:0 0 8px;font-size:12.5px;color:var(--text-sub)}
.zoom-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.zoom-section-head h3{margin:0}
.zoom-section-head .btn{flex-shrink:0}
.zoom-hint{margin:0 0 8px;font-size:11.5px;color:var(--text-sub);line-height:1.5}
.zoom-hint.warn{color:var(--warn)}

.zoom-zone-actions{display:flex;gap:8px;margin-bottom:8px}
.zoom-sim-actions{display:flex;gap:8px}
.zoom-coord-display{
  font-size:11px;color:var(--text-muted);font-family:'SF Mono',Consolas,monospace;
  text-align:center;padding:4px;background:var(--bg-soft);border-radius:4px;margin-bottom:10px;
}
.zoom-radius-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px}
.zoom-radius-label{flex-shrink:0;color:var(--text-sub)}
.zoom-radius-slider{flex:1;accent-color:var(--primary)}
.zoom-radius-value{flex-shrink:0;min-width:42px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}

.zoom-row-picker{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:12px}
.zoom-row-picker select{
  flex:1;padding:5px 8px;border:1px solid var(--border-strong);border-radius:var(--radius);
  background:var(--bg);color:var(--text);font:inherit;font-size:12px;
}

.zoom-spec-list{display:flex;flex-direction:column;gap:6px}
.zoom-spec-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px}
.zoom-spec-k{color:var(--text-muted)}
.zoom-spec-v{font-weight:600;color:var(--text);text-align:right}

.zoom-status:not(:empty){margin-top:8px;font-size:11.5px}
.zoom-status.ok{color:var(--success)}
.zoom-status.bad{color:var(--warn)}

.zoom-drop{
  border:2px dashed var(--border-strong);border-radius:var(--radius);
  padding:16px 12px;text-align:center;cursor:pointer;background:var(--bg-soft);
  color:var(--text-sub);font-size:12.5px;
}
.zoom-drop:hover,.zoom-drop.over{border-color:var(--primary);background:var(--accent-bg)}
.zoom-drop .zoom-drop-hint{margin-top:4px;font-size:11px;color:var(--text-muted)}
.zoom-drop .zoom-file{display:none}

.zoom-download-opts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:8px 0;font-size:11.5px;color:var(--text-sub)}
.zoom-download-opt{display:flex;align-items:center;gap:5px;cursor:pointer}
.zoom-download-btn{margin-left:auto}

.zoom-sim-result:empty{display:none}
.zoom-validation{margin-top:10px;padding:8px 10px;border-radius:var(--radius);font-size:11.5px}
.zoom-validation ul{margin:4px 0 0;padding-left:16px}
.zoom-validation.bad{background:var(--warn-bg);color:var(--warn)}
.zoom-validation.warn{background:#FFFBEB;color:#92400E}
.zoom-validation.ok{background:var(--success-bg);color:var(--success);font-weight:600}

.zoom-preview{
  position:absolute;border:3px solid var(--success);box-sizing:border-box;overflow:hidden;
}
.zoom-preview img{width:100%;height:100%;object-fit:cover;display:block}
/* 소재 미리보기 위의 영역 박스 — 소재가 보이게 채움을 빼고, 조정 모드가 꺼져 있으면 미리보기의
   초록 테두리만 보이게 박스 테두리·펄스도 감춘다(켜면 점선 테두리·핸들로 끌어 맞춘다). */
.zone-box.has-preview{background:transparent}
.zone-box.has-preview.not-editable{border-color:transparent;animation:none}
.zoom-preview{pointer-events:none}

/* PC 캡처 — 가로로 길어 모바일 폭(400px)에서는 너무 작다. 드로어만 넓히고(직접 끌어 바꾼 폭은 inline style 이 이긴다)
   오른쪽 설정 열은 그대로 둔 채 이미지가 남는 폭을 다 쓴다. */
.zoom-panel.wide{width:90vw}
.zoom-layout.pc{flex-wrap:nowrap}
.zoom-layout.pc .zoom-stage{min-width:0}
.zoom-layout.pc .zoom-stage-inner{max-width:none}

@media (max-width:760px){
  .zoom-layout{flex-direction:column}
  .zoom-side{width:100%}
}

/* 실제 배경 이미지 섹션 — 출처 한 줄·내 배경 드롭존·기본으로(zoom-background.js) */
.zoom-bg-line{margin:4px 0 10px;font-weight:600}
.zoom-sim-actions[hidden],.zoom-download-opts[hidden]{display:none} /* display:flex 가 [hidden] 을 이기지 않게 */

/* 공용 드롭존(drop-zone.js) — 확대 드로어·데이터 관리가 함께 쓴다. 토큰은 .mm-drop 과 같다. */
.drop-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:96px;padding:14px;border:2px dashed var(--border-strong);border-radius:var(--radius);
  background:var(--bg-soft);text-align:center;cursor:pointer;transition:background .15s,border-color .15s;
}
.drop-zone.compact{min-height:0;padding:8px 10px;flex-direction:row;flex-wrap:wrap;gap:8px}
.drop-zone:hover,.drop-zone.over{background:var(--accent-bg);border-color:var(--primary)}
.drop-zone.error{border-color:var(--warn)}
.drop-zone.busy{opacity:.6;cursor:progress}
/* pointer-events:none — 자식 위를 지날 때 dragleave/dragover 가 번갈아 나 .over 가 깜빡이지 않게 */
.drop-zone-title{font-weight:600;font-size:12.5px;color:var(--text);pointer-events:none}
.drop-zone-sub{font-size:11px;color:var(--text-muted);pointer-events:none}
.drop-zone-error{font-size:11.5px;font-weight:600;color:var(--warn);pointer-events:none}
.drop-zone-input{display:none}

/* 출처 배지(내 설정/기본값/목업)와 로그인 안내 — 확대 드로어 */
.src-badge{font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:10px;border:1px solid var(--border);white-space:nowrap}
.src-badge.mine{background:var(--primary);color:#fff;border-color:var(--primary)}
.src-badge.default,.src-badge.mockup{color:var(--text-muted)}
.src-badge.staged{background:#FFFBEB;color:#92400E;border-color:#FCD34D}
.zoom-login-hint{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted)}
.zoom-manage-link{align-self:flex-start;margin-top:4px}
.zoom-reset-foot{border-top:1px solid var(--border);padding-top:10px}
.zoom-section-head .src-badge{margin-right:auto}