/* Compat layer: legacy tailwind class names used by vidi-results.js & vidi-assistant.js */

.translate-x-full { transform: translateX(100%); }
.translate-x-0 { transform: translateX(0); }
.opacity-0 { opacity: 0; }
.pointer-events-none { pointer-events: none; }
.hidden { display: none !important; }

#tcResults.grid-posters .rounded-xl,
#tcResults .card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}

#tcMessage,
#tcRejected {
  color: var(--tx-2);
}

#tcMessage .text-white\/90,
#tcMessage span {
  color: inherit;
}

.vidi-pill.chip.on,
button.chip.on {
  background: rgba(138, 43, 226, 0.16);
  border-color: var(--line-accent);
  color: var(--vidi-accent-ink);
}

button.chip {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-3);
  color: var(--tx-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 99px;
}

#vidiChatDrawer.drawer {
  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

#vidiDrawerOpen.fab-hidden {
  opacity: 0;
  pointer-events: none;
}

.skeleton-line {
  animation: vidi-pulse 1.6s ease-in-out infinite;
  background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-4) 50%, var(--bg-3) 100%);
  background-size: 200% 100%;
}

@keyframes vidi-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.vidi-logs summary {
  cursor: pointer;
  color: var(--vidi-accent-ink);
}

a.nav-item {
  text-decoration: none;
  color: inherit;
}

.nav-items .seg a {
  display: inline-flex;
  align-items: center;
}

.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;
}

.dropzone.vidi-drop-active {
  border-color: var(--vidi-accent) !important;
  background: rgba(138, 43, 226, 0.05) !important;
}

/* Preproduction workbench — dark theme via variable remap */
.pp-themed {
  color-scheme: dark;
  --ink: #f3f2f7;
  --muted: #a8a6b6;
  --line: rgba(255, 255, 255, 0.1);
  --paper: #0c0c11;
  --panel: #121218;
  --panel-2: #17171f;
  --teal: #a855f7;
  --teal-dark: #c084fc;
  --coral: #ff3b54;
  --mustard: #f5b14c;
  --green: #36d399;
  --shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
}

.pp-themed .workspace {
  padding: var(--pad) calc(var(--pad) * 1.5) 48px;
}

.pp-themed input,
.pp-themed textarea,
.pp-themed select {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--tx-1);
}

.pp-themed .primary-btn {
  background: var(--vidi-accent);
  border-color: transparent;
  color: #fff;
}

.pp-themed .quiet-btn {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--tx-1);
}

.pp-themed h1,
.pp-themed h2,
.pp-themed h3,
.pp-themed strong {
  color: var(--tx-1);
}

/* 단계 제목 — 메인 히어로 글씨체(디스플레이 폰트 + 대문자) */
.pp-themed .section-head h1,
.pp-themed .section-head h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.98;
}

.pp-themed .nav-pill {
  background: var(--bg-3);
  border-color: var(--line);
  color: var(--tx-2);
}

.pp-themed .nav-pill.active,
.pp-themed .nav-pill:hover {
  background: rgba(138, 43, 226, 0.18);
  border-color: var(--line-accent);
  color: var(--tx-1);
}

.pp-themed .section,
.pp-themed .brief-form,
.pp-themed .status-panel,
.pp-themed .storyline-panel,
.pp-themed .reference-control-panel {
  background: var(--panel) !important;
  border-color: var(--line) !important;
  color: var(--tx-1);
}

.pp-themed .eyebrow {
  color: var(--tx-3);
}

/* 반응형은 vidi-design.css의 오프캔버스 시스템(1180/860/560)에서 처리 */