/* 작품 올리기 · 수정 — 패턴 위 머리 카드 + 폼 카드(7) · 진행 요약 카드(5).
   컴포넌트(dlab-*) 클래스는 덮어쓰지 않고 바깥 배치 · 직접 만든 요소만 정한다. 색 · 간격 · 선은 --dlab-* 토큰만 쓴다. */

/* 머리 카드 — 상태 배지는 제목 줄 오른쪽(Mobile은 제목 아래) */
.upload-head-status { display: flex; flex: 0 0 auto; }

/* 작성 영역 — 진행 요약은 Tablet 이상에서만 옆에 둔다(Mobile은 머리 카드의 상태 배지로 충분). */
.upload-workspace { align-items: start; }
.upload-side { display: none; }
@media (min-width: 720px) {
  .upload-side { display: block; position: -webkit-sticky; position: sticky; top: var(--dlab-space-20); }
}

/* 진행 요약 — 같은 모양 5줄이라 선 없이 여백과 1px 회색 구분선으로만 나눈다(가이드 7장 1단계). */
.upload-progress { list-style: none; display: flex; flex-direction: column; }
.upload-progress > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dlab-space-10);
  min-height: 50px;
  border-bottom: var(--dlab-border-width-thin) solid var(--dlab-color-border-faint);
}
.upload-progress > li:last-child { border-bottom: 0; }

/* 파일 고르기(.service-file) 안 아이콘 · 오류 상태 */
.upload-file-icon { display: inline-flex; color: var(--dlab-color-text-secondary); }
.service-file[data-invalid] { border-color: var(--dlab-color-border-negative); }
.service-file[data-disabled] { opacity: 0.4; }
.service-file[data-disabled] input[type="file"] { cursor: not-allowed; }

/* Text 버튼 줄 — 왼쪽 여백만큼 당겨 글자 줄을 맞춘다 */
.upload-inline-actions { margin-left: calc(-1 * var(--dlab-space-10)); }
.upload-inline-actions:empty { display: none; }

/* 대표 이미지 미리보기 — 16:9 틀(직각, 옅은 바탕) */
.upload-thumbnail-frame { position: relative; width: 100%; max-width: 400px; height: 0; padding-top: min(56.25%, 225px); overflow: hidden; background: var(--dlab-color-bg-subtle); }
.upload-thumbnail-frame img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* 업로드 기준 */
.upload-rule-list { padding-left: var(--dlab-space-20); color: var(--dlab-color-text-secondary); }
.upload-zip-example { margin: 0; padding: var(--dlab-space-15) var(--dlab-space-20); overflow-x: auto; background: var(--dlab-color-bg-subtle); white-space: pre; }

/* 검증 진행 — Gauge + 진행 중 Loading */
.upload-progress-row { display: flex; align-items: center; gap: var(--dlab-space-15); }
.upload-progress-row > .dlab-gauge { flex: 1 1 auto; }
.upload-progress-loading { display: flex; flex: 0 0 auto; }
.upload-progress-loading[hidden] { display: none; }

/* 검증 단계 5줄 — 번호 · 이름 · 상태 배지(반복이라 회색 채움, 진행 중만 outlined-accent) */
.upload-steps { list-style: none; display: flex; flex-direction: column; gap: var(--dlab-space-10); }
.upload-step { display: flex; align-items: center; gap: var(--dlab-space-10); min-width: 0; }
.upload-step-index { flex: 0 0 auto; width: 20px; color: var(--dlab-color-text-secondary); }
.upload-step-label { flex: 1 1 auto; min-width: 0; }
.upload-step .dlab-badge { flex: 0 0 auto; }

.upload-preview-actions { gap: var(--dlab-space-20); }

/* Preview — 폼 안에 펼치는 실행 화면(검정 틀, sandbox iframe) */
.upload-preview-viewer-head,
.upload-preview-viewer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--dlab-space-10); min-width: 0; }
.upload-preview-viewer-foot { flex-wrap: wrap; }
.upload-preview-viewer-head h3:focus { outline: none; }
.upload-preview-viewer-head h3:focus-visible { outline: var(--dlab-border-width-regular) solid var(--dlab-color-border-accent); outline-offset: var(--dlab-border-width-regular); }
.upload-preview-media { height: 60vh; min-height: 320px; max-height: 720px; }
.upload-preview-media > .upload-preview-frame { background: var(--dlab-color-bg-default); }
.upload-preview-media > [hidden] { display: none; }

/* 요청 전 확인 — 정의 목록(GRAY 50 판, 테두리 없음) */
.upload-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dlab-space-15); padding: var(--dlab-space-20); background: var(--dlab-color-bg-subtle); }
.upload-summary > div { display: flex; flex-direction: column; gap: var(--dlab-space-5); min-width: 0; }
.upload-summary dt { color: var(--dlab-color-text-secondary); }
.upload-summary dd { margin: 0; white-space: pre-wrap; }
@media (min-width: 720px) {
  .upload-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #summary-change-summary-row { grid-column: 1 / -1; }
}

/* 대표 이미지 맞추기(Modal) — 16:9 무대, 이미지는 JS가 크기 · 위치를 정한다 */
.thumbnail-crop-stage {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--dlab-color-bg-inverse);
  cursor: grab;
  touch-action: none;
  outline: none;
}
.thumbnail-crop-stage:focus-visible { outline: var(--dlab-border-width-regular) solid var(--dlab-color-border-accent); outline-offset: var(--dlab-border-width-regular); }
.thumbnail-crop-stage.is-dragging { cursor: grabbing; }
.thumbnail-crop-stage img { position: absolute; top: 0; left: 0; max-width: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.thumbnail-crop-controls { display: flex; align-items: center; gap: var(--dlab-space-10); }
.thumbnail-crop-controls > .dlab-slider { flex: 1 1 auto; min-width: 0; }
.thumbnail-crop-controls output { flex: 0 0 auto; min-width: 50px; font-variant-numeric: tabular-nums; text-align: right; }

/* 비어 있는 알림 자리는 간격을 차지하지 않는다 */
#validation-result:empty,
#upload-form-feedback:empty { display: none; }
.upload-retry-button { align-self: flex-start; }