/* publish_wizard.css — publish-wizard-blog-renewal */

/* Modal — design-system tokens (publish-wizard-step1-redesign spec §4.1) */
.pw-modal-backdrop {
  position: fixed; inset: 0;
  background: var(--comp-modal-overlay-bg);
  z-index: var(--comp-modal-overlay-z, 9000);
  display: flex; align-items: center; justify-content: center;
  animation: ds-modal-overlay-in 0.2s var(--sema-ease-out);
}
.pw-modal {
  background: var(--comp-modal-bg);
  border-radius: var(--comp-modal-radius);
  box-shadow: var(--comp-modal-shadow);
  width: 720px; max-width: calc(100vw - 32px);
  height: 80vh; max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  animation: ds-modal-in 0.24s var(--sema-ease-out);
}
.pw-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--sema-color-border);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--sema-color-text-primary);
  font-weight: 700;
}
.pw-modal-body {
  flex: 1; overflow-y: auto; padding: 24px;
  color: var(--sema-color-text-primary);
}
.pw-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--sema-color-border);
  display: flex; justify-content: space-between;
  gap: 8px;
}

/* Stepper Circles */
.pw-stepper { display: flex; justify-content: space-between; padding: 16px 8px; }
.pw-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.pw-step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
  background: var(--bg-secondary); color: var(--text-tertiary);
  border: 2px solid var(--border); z-index: 1;
}
.pw-step-label { margin-top: 8px; font-size: 12px; color: var(--text-tertiary); }
.pw-step-line { position: absolute; top: 16px; left: 55%; right: -45%; height: 2px; background: var(--border); }

.pw-step.completed .pw-step-circle { background: var(--accent); color: white; border-color: var(--accent); }
.pw-step.completed .pw-step-label { color: var(--accent); font-weight: 600; }
.pw-step.completed .pw-step-line { background: var(--accent); }
.pw-step.active .pw-step-circle {
  background: var(--accent); color: white; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.pw-step.active .pw-step-label { color: var(--text-primary); font-weight: 700; }
.pw-step.completed { cursor: pointer; }
.pw-step.completed .pw-step-circle:hover { transform: scale(1.05); transition: transform 100ms; }

/* default-style placeholder */
.pw-depart-placeholder {
  min-height: 240px; background: var(--bg-tertiary); border: 1px dashed var(--border);
  border-radius: 8px; padding: 32px; text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}

/* Mobile bottom-sheet */
@media (max-width: 768px) {
  .pw-modal {
    width: 100%; max-width: 100%;
    height: 95dvh; max-height: 95dvh;
    border-radius: 12px 12px 0 0;
    align-self: flex-end;
  }
  .pw-modal-backdrop { align-items: flex-end; }
}

/* toast-warn CSS rule (rev1 P1-#12 fold-in) — wizard 가 'warn' / 'warning' 둘 다 사용 가능하도록 */
.toast-warn, .toast-warning {
  background: linear-gradient(180deg, #F5A623 0%, #C47D0E 100%);
  color: #fff;
}

/* ✕ 닫기 — ghost 의 작은 variant (header 우측 정렬용) */
.pw-close-btn {
  padding: 4px 10px;
  font-size: 16px;
  line-height: 1;
  min-width: auto;
}