/* ─── visual_studio.css — visual-studio-mirra-frontend (Phase 4 PR-A) ─── */
/* Parent spec rev1 §6 + 트랙 spec rev0 §3. */

/* ─── 1. Local tokens ────────────────────────────────────────────────────── */
:root {
  --vsm-muted: rgba(0, 0, 0, 0.45);
  --vsm-accent-bg: rgba(241, 90, 36, 0.08);
  --vsm-danger: #c0392b;
  --vsm-success: #27ae60;
  --vsm-info: #2980b9;
  --vsm-highlight: #7c3aed;
  --vsm-card-radius: 12px;
  --vsm-card-padding: 16px;
  --vsm-grid-gap: 16px;
  --vsm-modal-z: 1000;
  --vsm-modal-backdrop: rgba(0, 0, 0, 0.5);
}

/* ─── 2. Page shell + 상단 카드 3개 ─────────────────────────────────────── */
#page-visual-studio { padding: 24px; }
.vsm-container { max-width: 1280px; margin: 0 auto; }

.vsm-top-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--vsm-grid-gap);
  margin-bottom: 32px;
}
.vsm-top-card {
  padding: 20px; border-radius: var(--vsm-card-radius);
  background: var(--surface, #fff); border: 1px solid var(--border);
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.vsm-top-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.vsm-top-card.active {
  border-color: var(--accent); background: var(--vsm-accent-bg);
}
.vsm-top-card h3 { margin: 0 0 8px; font-size: 16px; }
.vsm-top-card p { margin: 0; color: var(--vsm-muted); font-size: 13px; }

/* ─── 3. Library grid + set cards ───────────────────────────────────────── */
.vsm-library-section { margin-bottom: 32px; }
.vsm-library-section h2 {
  font-size: 18px; margin: 0 0 16px;
  display: flex; align-items: center; gap: 8px;
}
.vsm-library-section h2 .vsm-count {
  font-size: 13px; color: var(--vsm-muted); font-weight: 400;
}

.vsm-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--vsm-grid-gap);
}
.vsm-set-card {
  border: 1px solid var(--border); border-radius: var(--vsm-card-radius);
  background: var(--surface, #fff); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.vsm-set-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.vsm-set-card.selected {
  border-color: var(--vsm-highlight); border-width: 2px;
}
.vsm-set-card .vsm-set-thumb {
  width: 100%; aspect-ratio: 4 / 5; background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  color: var(--vsm-muted); font-size: 12px;
}
.vsm-set-card .vsm-set-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.vsm-set-card .vsm-set-meta { padding: 12px; }
.vsm-set-card .vsm-set-name { font-weight: 600; margin: 0 0 4px; font-size: 14px; }
.vsm-set-card .vsm-set-info {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--vsm-muted);
}

/* ─── 4. Status chips (draft/analyzing/confirmed/archived) ───────────────── */
.vsm-status-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
}
.vsm-status-chip.draft     { background: #fef3c7; color: #92400e; }
.vsm-status-chip.analyzing { background: #dbeafe; color: #1e40af; }
.vsm-status-chip.confirmed { background: #d1fae5; color: #065f46; }
.vsm-status-chip.archived  { background: #f3f4f6; color: var(--vsm-muted); }

/* animated pulse dot for analyzing state */
.vsm-status-chip.analyzing::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: #1e40af; margin-left: 6px;
  animation: vsm-pulse 1s ease-in-out infinite;
}
@keyframes vsm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.5); }
}

/* ─── 5. Empty onboarding card (D-2 — 0 designs state) ──────────────────── */
.vsm-onboarding-card {
  padding: 64px 24px; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--vsm-card-radius);
  background: var(--surface, #fff);
}
.vsm-onboarding-card .vsm-onboarding-icon {
  font-size: 48px; margin-bottom: 16px; opacity: 0.5;
}
.vsm-onboarding-card h2 { margin: 0 0 8px; font-size: 20px; }
.vsm-onboarding-card p {
  margin: 0 0 24px; color: var(--vsm-muted);
}
.vsm-onboarding-card .vsm-btn-primary { padding: 12px 32px; font-size: 15px; }

/* ─── 6. Preview modal (2 tabs + focus trap structure) ───────────────────── */
.vsm-modal-backdrop {
  position: fixed; inset: 0;
  background: var(--vsm-modal-backdrop);
  z-index: var(--vsm-modal-z);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.vsm-modal {
  background: var(--surface, #fff); border-radius: var(--vsm-card-radius);
  max-width: 800px; width: 100%; max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.vsm-modal-header {
  padding: 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.vsm-modal-header h2 { margin: 0; font-size: 18px; }
.vsm-modal-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 20px; padding: 4px 8px; color: var(--vsm-muted);
}
.vsm-modal-close:hover { color: var(--text-primary, var(--text)); }

.vsm-modal-tabs {
  display: flex; border-bottom: 1px solid var(--border);
}
.vsm-modal-tab {
  padding: 12px 20px; cursor: pointer; border: none;
  background: transparent; font-size: 14px;
  color: var(--vsm-muted); border-bottom: 2px solid transparent;
}
.vsm-modal-tab.active {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 600;
}
.vsm-modal-body {
  flex: 1; overflow-y: auto; padding: 20px;
  min-height: 0; /* Flex shrink for proper body scroll */
}
.vsm-modal-footer {
  padding: 16px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px;
}
.vsm-modal-footer .vsm-btn-secondary[disabled] {
  opacity: 0.5; cursor: not-allowed;
}
.vsm-modal-footer .vsm-btn-secondary[disabled]::after {
  content: ' (다음 업데이트 예정)'; font-size: 11px; color: var(--vsm-muted);
}

/* Modal body — slide preview rows + structure table + muted text */
.vsm-slide-preview-row {
  margin-bottom: 16px; text-align: center;
}
.vsm-slide-preview-row img {
  max-width: 100%; max-height: 320px; border-radius: 6px;
  border: 1px solid var(--border);
}
.vsm-structure-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.vsm-structure-table th, .vsm-structure-table td {
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.vsm-structure-table th { font-weight: 600; color: var(--vsm-muted); }
.vsm-role-chip {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px;
}
.vsm-role-chip.cover    { background: #fef3c7; color: #92400e; }
.vsm-role-chip.body     { background: #dbeafe; color: #1e40af; }
.vsm-role-chip.closing  { background: #d1fae5; color: #065f46; }
.vsm-role-chip.unknown  { background: #f3f4f6; color: var(--vsm-muted); }
.vsm-muted {
  color: var(--vsm-muted); font-size: 13px; font-weight: 400;
}

/* ─── 7. Step A — batch upload + progress bar ────────────────────────────── */
.vsm-step-a-form {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 600px; margin: 0 auto;
}
.vsm-form-row { display: flex; flex-direction: column; gap: 6px; }
.vsm-form-row > label { font-weight: 500; font-size: 14px; }
.vsm-form-row > input, .vsm-form-row > select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 14px;
}

.vsm-ratio-group, .vsm-count-group {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.vsm-ratio-group label, .vsm-count-group label {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; font-size: 13px;
}
.vsm-ratio-group input[type=radio]:checked + span,
.vsm-count-group input[type=radio]:checked + span { font-weight: 600; }

.vsm-upload-zone {
  border: 2px dashed var(--border); border-radius: var(--vsm-card-radius);
  padding: 48px 20px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.vsm-upload-zone.dragover {
  border-color: var(--accent); background: var(--vsm-accent-bg);
}
.vsm-upload-zone p { margin: 8px 0 0; color: var(--vsm-muted); font-size: 13px; }

.vsm-upload-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px; margin-top: 16px;
}
.vsm-upload-thumb {
  aspect-ratio: 4 / 5; background: #f5f5f5;
  border-radius: 6px; position: relative; overflow: hidden;
}
.vsm-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vsm-upload-thumb .vsm-thumb-order {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0, 0, 0, 0.6); color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.vsm-upload-thumb .vsm-thumb-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0, 0, 0, 0.6); color: #fff; border: none;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  font-size: 12px;
}

.vsm-progress {
  padding: 20px; border: 1px solid var(--border); border-radius: var(--vsm-card-radius);
  background: var(--surface, #fff); margin-top: 16px;
}
.vsm-progress-bar {
  width: 100%; height: 8px; border-radius: 4px;
  background: #e5e7eb; overflow: hidden;
}
.vsm-progress-bar-fill {
  height: 100%; background: var(--accent);
  transition: width 0.3s ease-out;
}
.vsm-progress-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; font-size: 13px; color: var(--vsm-muted);
}
.vsm-progress-cancel {
  background: transparent; border: 1px solid var(--vsm-danger);
  color: var(--vsm-danger); padding: 4px 10px; border-radius: 6px;
  cursor: pointer; font-size: 12px; margin-top: 12px;
}

/* Wizard step indicator (Step A/B/C top bar) */
.wizard-steps {
  display: flex; gap: 8px; margin-bottom: 24px;
}
.wizard-steps .step {
  flex: 1; padding: 12px 16px; border-radius: 6px;
  background: var(--bg-soft, #f9fafb); color: var(--vsm-muted);
  font-size: 14px; text-align: center; border: 1px solid var(--border);
}
.wizard-steps .step.active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600;
}

/* Step navigation buttons (cancel + submit) */
.step-nav {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border);
}

/* ─── 8. Step B — slide list + role dropdown + Canvas placeholder ─────────── */
.vsm-step-b-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 768px) {
  .vsm-step-b-layout { grid-template-columns: 1fr; }
}

.vsm-slide-list {
  display: flex; flex-direction: column; gap: 12px;
}
.vsm-slide-card {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 12px;
  padding: 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface, #fff); align-items: center;
}
.vsm-slide-card.selected { border-color: var(--vsm-highlight); border-width: 2px; }
.vsm-slide-card .vsm-slide-thumb {
  aspect-ratio: 4 / 5; background: #f5f5f5; border-radius: 4px;
  overflow: hidden;
}
.vsm-slide-card .vsm-slide-thumb img {
  width: 100%; height: 100%; object-fit: cover;
}
.vsm-slide-card .vsm-slide-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
}
.vsm-slide-card .vsm-slide-meta .vsm-slide-order {
  font-weight: 600;
}
.vsm-slide-card .vsm-slide-role-select {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  font-size: 12px;
}
.vsm-slide-card.failed { background: #fef2f2; border-color: var(--vsm-danger); }
.vsm-slide-card.failed .vsm-slide-actions {
  display: flex; gap: 4px; flex-direction: column;
}

.vsm-canvas-placeholder {
  padding: 64px 24px; text-align: center;
  border: 1px dashed var(--border); border-radius: 8px;
  background: #fafafa; color: var(--vsm-muted);
}
.vsm-canvas-placeholder .vsm-icon {
  font-size: 32px; margin-bottom: 12px; opacity: 0.4;
}

/* ─── 9. Step C — summary + combination_pattern visualization ────────────── */
.vsm-step-c-summary {
  max-width: 600px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 20px;
}
.vsm-combination-visual {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px; background: #f9fafb; border-radius: 8px;
}
.vsm-combination-step {
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  background: var(--surface, #fff); border: 1px solid var(--border);
}
.vsm-combination-step.cover   { border-color: #3b82f6; color: #1e40af; }
.vsm-combination-step.body    { border-color: #10b981; color: #065f46; }
.vsm-combination-step.closing { border-color: #f59e0b; color: #92400e; }

.vsm-combination-arrow { color: var(--vsm-muted); font-size: 12px; }

/* ─── 10. Common buttons + utils + a11y ──────────────────────────────────── */
.vsm-btn-primary {
  padding: 10px 20px; border: none; border-radius: 6px;
  background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
  font-size: 14px;
}
.vsm-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.vsm-btn-secondary {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface, #fff); cursor: pointer;
}
.vsm-btn-danger {
  padding: 6px 12px; border: 1px solid var(--vsm-danger);
  background: transparent; color: var(--vsm-danger);
  border-radius: 6px; cursor: pointer; font-size: 12px;
}

.vsm-muted { color: var(--vsm-muted); font-size: 12px; }
.vsm-empty-hint {
  padding: 24px; text-align: center; color: var(--vsm-muted);
  border: 1px dashed var(--border); border-radius: 8px;
}

/* Accessibility — keyboard focus */
.vsm-set-card:focus-visible,
.vsm-top-card:focus-visible,
.vsm-modal-tab:focus-visible,
.vsm-slide-card:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Screen reader only */
.vsm-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}