/* 기존 session_web/style.css의 변수(--indigo 등)와 공통 클래스
   (.screen/.btn/.field/.topbar/.quota-bar/.panel/.panel-title/.dropzone 등)를
   그대로 물려받는다. CAPTURE 변환 UI와 동일한 panel 기반 시각 언어를 따르고,
   이 파일은 PDF 업로드 화면에만 필요한 것만 추가한다. */
@import url("/static/session_web/style.css");

.upload-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 20px 24px 40px;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- 차감 안내 배너 ---------- */
.notice-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(43, 58, 103, 0.08);
  border: 1px solid rgba(43, 58, 103, 0.18);
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
}
.notice-banner strong {
  color: var(--indigo);
}

/* ---------- 업로드 dropzone ---------- */
.dropzone {
  cursor: pointer;
  min-height: 260px;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 14px;
}
.dropzone-empty,
.dropzone-file {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dropzone-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--indigo);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.dropzone-file .dropzone-main { word-break: break-all; }

#convertBtn { margin-top: 4px; }

/* ---------- 변환 진행 상태 ---------- */
.status-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px;
  text-align: center;
}
.status-note { max-width: 360px; }
.muted { color: var(--ink-soft); font-size: 0.85rem; }

.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(43, 58, 103, 0.15);
  border-top-color: var(--indigo);
  animation: pdf-spin 0.9s linear infinite;
}
@keyframes pdf-spin {
  to { transform: rotate(360deg); }
}

.success-text {
  color: #1a7f37;
  font-size: 0.9rem;
  margin: 2px 0 0;
}