/* 목업 모드 — 컨트롤 바 + 매체 탭 + 지면 그리드 */
.mock-mode{position:relative;height:100%;display:flex;flex-direction:column;min-height:0}
.mock-bar{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;flex-shrink:0;
  padding:12px 22px;border-bottom:1px solid var(--border);background:var(--bg-soft);
}
.mock-upload{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;cursor:pointer;
  border:1px solid var(--primary);border-radius:var(--radius);
  background:var(--bg);color:var(--primary);font-size:12.5px;font-weight:700;
}
.mock-upload:hover{background:var(--accent-bg)}
.mock-upload input{display:none}
.mock-status:not(:empty){
  flex-shrink:0;margin:0 22px 10px;padding:8px 12px;border-radius:var(--radius);
  background:var(--warn-bg);color:var(--warn);font-size:12.5px;
}
.mock-field{display:flex;flex-direction:column;gap:3px}
.mock-bar [hidden]{display:none} /* .mock-field 의 display:flex 가 [hidden] 을 이기지 않게 */
.mock-label{font-size:10.5px;color:var(--text-muted)}
.mock-field select,.mock-field input{
  padding:5px 9px;border:1px solid var(--border-strong);border-radius:var(--radius);
  font:inherit;font-size:12.5px;background:var(--bg);color:var(--text);min-width:112px;
}
.mock-media{ /* 칩은 조회와 같은 .media-chip(media-bar.css) — 여기서는 자리·여백만 */
  flex:0 0 auto;gap:6px;
  padding:10px 22px;border-bottom:1px solid var(--border);background:var(--bg);
}
.mock-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px}
.mock-section+.mock-section{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.mock-grid-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.mock-grid-head h2{display:flex;align-items:center;gap:6px;margin:0;font-size:15px}
.mock-notice{
  margin-bottom:14px;padding:7px 11px;border-radius:var(--radius);
  background:var(--info-bg);color:var(--info);font-size:11.5px;
}
.mock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px}
.mock-card{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:var(--bg);display:flex;flex-direction:column;
  min-width:0; /* 줄바꿈 없는 긴 캡션이 그리드 열을 넓히지 않게 */
}
/* 이름 1줄 + 캡션 1줄로 높이를 고정한다 — 캡션 길이에 따라 꺾이면 카드마다 프레임 시작 높이와
   버튼 줄이 어긋난다. 넘치는 글자는 … 로 자르고 전체 문구는 title 툴팁으로 본다. */
.mock-cap{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:7px 10px;border-bottom:1px solid var(--border);background:var(--bg-soft);
}
.mock-name,.mock-spec{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-name{font-size:12px;font-weight:700;line-height:1.4}
.mock-spec{font-size:10.5px;color:var(--text-muted);line-height:1.4;min-height:1.4em}
/* 그림 자리는 236:430 상자로 고정한다 — 캡처(모바일·PC)는 그 안에 비율을 지켜 넣어 카드마다
   프레임·버튼 줄이 맞는다. */
.mock-stage{
  aspect-ratio:236/430;margin-bottom:8px;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.mock-stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.mock-stage.loading::after{content:'…';color:var(--text-muted);font-size:14px}
.mock-warn{
  display:inline-block;margin-right:5px;padding:0 5px;border-radius:4px;vertical-align:1px;cursor:help;
  background:var(--warn-bg, #fef3c7);color:var(--warn, #b45309);font-size:9.5px;font-weight:700;line-height:1.6;
}
.mock-mine{
  display:inline-block;margin-right:5px;padding:0 5px;border-radius:4px;vertical-align:1px;
  background:var(--accent-bg);color:var(--primary);font-size:9.5px;font-weight:700;line-height:1.6;
}
/* 조회에서 "지면 목업 만들기"로 들어온 상품 */
.mock-card.focused{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
/* 버튼은 카드 맨 아래에 붙인다(그리드 행의 카드 높이가 같으므로 버튼 줄이 맞는다). */
.mock-card .btn{margin:auto 10px 10px;text-align:center}

@media (max-width:1000px){
  .mock-bar,.mock-media{padding:10px 14px}
  .mock-body{padding:14px}
}

/* 이미지를 올리기 전 본문 자리. 진단의 드롭 상자와 같은 모양이라 같은 동작을 기대하게 한다.
   흰 배경(--bg) — 페이지 배경(--bg-soft, 옅은 회색) 위에 그대로 두면
   회색 배경에 회색 글자가 겹쳐 가독성이 떨어진다. */
.mock-drop{
  border:2px dashed var(--border-strong);border-radius:var(--radius-lg);
  padding:34px 18px;text-align:center;cursor:pointer;background:var(--bg);
}
.mock-drop:hover{border-color:var(--primary);background:var(--accent-bg)}
.mock-drop-title{font-weight:700;font-size:14px;color:var(--text-sub)}
.mock-drop-hint{margin-top:6px;font-size:12.5px;color:var(--text-muted)}

/* 파일을 끌고 들어온 동안만 화면 전체에 덮이는 안내막. */
.mock-dropzone{
  position:absolute;inset:0;z-index:20;display:none;
  align-items:center;justify-content:center;pointer-events:none;
  background:rgba(27,111,183,.10);border:2px dashed var(--primary);
  border-radius:var(--radius-lg);color:var(--primary);font-weight:700;font-size:15px;
}
.mock-mode.dragging .mock-dropzone{display:flex}