/* 업로드 페이지 모바일 핸드오프 전용 스타일 (SPEC-MOBILE-001).
 * 목적: 모바일 뷰포트에서 이미지 영역지정 업로드만 노출하고,
 * 업로드 후 핸드오프 모달 UI를 제공한다. */

/* 데스크톱: 모바일 전용 요소 숨김 */
.mobile-only-banner,
.mobile-handoff-modal {
  display: none;
}

@media (max-width: 768px) {
  /* PDF 직접 업로드 / 일반 이미지 변환 흐름 숨김 */
  #pdf-dropzone,
  #pdf-form,
  #pdf-message,
  #pdf-preview-container,
  #pdf-error-modal,
  #dropzone,
  #upload-form,
  #toggle-remove-container,
  #message,
  #progress,
  #progress-bar,
  #preview-container {
    display: none !important;
  }

  /* 이미지 영역지정 드롭존 강조 */
  #img-region-dropzone {
    min-height: 160px;
    font-size: 1.05rem;
    line-height: 1.4;
    padding: 24px 16px;
  }

  /* 모바일 안내 배너 표시 */
  .mobile-only-banner {
    display: block;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #eef6ff;
    border: 1px solid #cfe3ff;
    border-radius: 10px;
    color: #1f3a6d;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  /* 우측 업데이트/게시판 카드는 모바일에서 사용성 ↓ → 하단으로 밀거나 숨김 */
  .home-aside {
    display: none;
  }
}

/* 모바일 핸드오프 모달: 폼 제출 시 JS가 활성화 */
.mobile-handoff-modal[data-visible="true"] {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: flex-end;
  justify-content: center;
}

.mobile-handoff-modal[data-visible="true"] .mhm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.mobile-handoff-modal[data-visible="true"] .mhm-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px 18px 22px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}

.mobile-handoff-modal .mhm-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
}

.mobile-handoff-modal .mhm-desc {
  margin: 0 0 14px;
  color: #555;
  font-size: 0.88rem;
  line-height: 1.45;
}

.mobile-handoff-modal .mhm-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.95rem;
  margin-bottom: 14px;
  box-sizing: border-box;
}

.mobile-handoff-modal .mhm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-handoff-modal .mhm-btn {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}

.mobile-handoff-modal .mhm-btn-primary {
  background: #007bff;
  color: #fff;
}

.mobile-handoff-modal .mhm-btn-secondary {
  background: #fff;
  color: #1f3a6d;
  border-color: #cfe3ff;
}

.mobile-handoff-modal .mhm-btn-ghost {
  background: transparent;
  color: #6b7280;
}