/* AICreator Auto Publishing Experience (TASK-006) — 독립 CSS, pub- 프리픽스.
   Hero→Brain→Workflow와 같은 다크 존을 이어받는다. */

.pub-root {
  --pub-bg-0: #05060a;
  --pub-bg-1: #0a0d16;
  --pub-text: #f8fafc;
  --pub-text-dim: rgba(248, 250, 252, 0.72);
  --pub-text-faint: rgba(248, 250, 252, 0.45);
  --pub-border: rgba(255, 255, 255, 0.12);
  --pub-accent-a: #5b7cff;
  --pub-accent-b: #8b5cf6;
  --pub-accent-c: #22d3ee;
  --pub-done: #34d399;
  --pub-pending: #fbbf24;
  --pub-ease: cubic-bezier(0.16, 1, 0.3, 1);

  position: relative;
  background: linear-gradient(180deg, var(--pub-bg-1), var(--pub-bg-0));
  color: var(--pub-text);
  padding: clamp(64px, 9vw, 120px) max(24px, 4vw);
  font-family: 'Noto Sans KR', sans-serif;
}
.pub-root * { box-sizing: border-box; }

.pub-container { max-width: 1320px; margin: 0 auto; }

.pub-heading { text-align: center; max-width: 680px; margin: 0 auto clamp(40px, 6vw, 72px); }
.pub-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #8b9bff; margin-bottom: 16px; }
.pub-title { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.3; margin: 0 0 16px; word-break: keep-all; }
.pub-sub { font-size: clamp(0.95rem, 1.2vw, 1.05rem); color: var(--pub-text-dim); line-height: 1.7; margin: 0; word-break: keep-all; }

.pub-layout {
  display: grid;
  grid-template-columns: 220px 100px 1fr;
  gap: clamp(12px, 2.4vw, 32px);
  align-items: center;
}

/* ── 좌측: Publishing Hub ─────────────────────────────── */
.pub-hub-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.pub-ready-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: #6ee7b7; background: rgba(52,211,153,0.12); border: 1px solid rgba(52,211,153,0.35);
  padding: 5px 12px; border-radius: 999px;
}
.pub-ready-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }

.pub-hub {
  position: relative; width: 128px; height: 128px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pub-accent-a), var(--pub-accent-b));
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  box-shadow: 0 0 70px rgba(91,124,255,0.35);
  transition: box-shadow 0.4s var(--pub-ease);
}
.pub-hub[data-state="publishing"] { box-shadow: 0 0 100px rgba(91,124,255,0.6); }
.pub-hub[data-state="complete"] { background: linear-gradient(135deg, var(--pub-done), var(--pub-accent-c)); box-shadow: 0 0 100px rgba(52,211,153,0.5); }
.pub-hub-mark { font-size: 30px; font-weight: 900; color: #05070d; }
.pub-hub-label { font-size: 10.5px; font-weight: 800; color: #05070d; letter-spacing: 0.04em; }

.pub-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 14px;
  background: linear-gradient(120deg, var(--pub-accent-a), var(--pub-accent-b));
  color: #05070d; border: none; cursor: pointer;
  transition: transform 0.18s var(--pub-ease), box-shadow 0.18s var(--pub-ease), opacity 0.2s;
}
.pub-trigger:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(91,124,255,0.4); }
.pub-trigger:focus-visible { outline: 2px solid var(--pub-accent-c); outline-offset: 3px; }
.pub-trigger:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

.pub-progress-text { font-size: 12px; color: var(--pub-text-faint); font-variant-numeric: tabular-nums; min-height: 16px; }

/* ── 중앙: SVG Connector ───────────────────────────────── */
.pub-connectors { position: relative; height: 100%; min-height: 340px; }
.pub-connectors svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pub-line-track { stroke: rgba(255,255,255,0.1); stroke-width: 1.5; fill: none; }
.pub-line-progress { stroke: url(#pubLineGradient); stroke-width: 1.5; fill: none; }
.pub-flow-dot { fill: var(--pub-accent-c); filter: drop-shadow(0 0 6px var(--pub-accent-c)); opacity: 0; }

/* ── 우측: Channel Cards ───────────────────────────────── */
.pub-cards { display: flex; flex-direction: column; gap: 10px; }
.pub-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--pub-border);
  transition: border-color 0.35s var(--pub-ease), background 0.35s var(--pub-ease), box-shadow 0.35s var(--pub-ease);
}
.pub-card-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  color: var(--pub-text-faint); transition: color 0.35s, background 0.35s;
}
.pub-card-icon svg { width: 18px; height: 18px; }
.pub-card-body { flex: 1; min-width: 0; }
.pub-card-name { font-size: 14px; font-weight: 700; color: var(--pub-text); }
.pub-card-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pub-text-faint); margin-top: 2px; }
.pub-card-status .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); flex-shrink: 0; transition: background 0.3s; }
.pub-card-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.06); color: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--pub-ease);
  transform: scale(0.6);
}

.pub-card[data-state="active"] { border-color: rgba(91,124,255,0.5); background: rgba(91,124,255,0.08); box-shadow: 0 12px 32px rgba(91,124,255,0.18); }
.pub-card[data-state="active"] .pub-card-icon { color: var(--pub-accent-a); background: rgba(91,124,255,0.16); }
.pub-card[data-state="active"] .pub-card-status { color: var(--pub-accent-a); }
.pub-card[data-state="active"] .pub-card-status .dot { background: var(--pub-accent-a); animation: pub-pulse 1s ease-in-out infinite; }
@keyframes pub-pulse { 50% { opacity: 0.4; } }

.pub-card[data-state="done"] { border-color: rgba(52,211,153,0.4); }
.pub-card[data-state="done"][data-tone="pending"] { border-color: rgba(251,191,36,0.4); }
.pub-card[data-state="done"] .pub-card-icon { color: var(--pub-text); background: rgba(255,255,255,0.1); }
.pub-card[data-state="done"] .pub-card-status { color: var(--pub-done); }
.pub-card[data-state="done"][data-tone="pending"] .pub-card-status { color: var(--pub-pending); }
.pub-card[data-state="done"] .pub-card-status .dot { background: var(--pub-done); }
.pub-card[data-state="done"][data-tone="pending"] .pub-card-status .dot { background: var(--pub-pending); }
.pub-card[data-state="done"] .pub-card-check { background: var(--pub-done); color: #05070d; transform: scale(1); }
.pub-card[data-state="done"][data-tone="pending"] .pub-card-check { background: var(--pub-pending); color: #05070d; }

/* ── Reduced Motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pub-root *, .pub-root *::before, .pub-root *::after { transition-duration: 0.1s !important; animation-duration: 0.1s !important; }
}

/* ── Tablet/Mobile: 세로 카드 레이아웃, 연결선 단순화 ───── */
@media (max-width: 1023px) {
  .pub-layout { grid-template-columns: 1fr; }
  .pub-connectors { display: none; }
  .pub-hub-col { margin-bottom: 28px; }
}

@media (max-width: 480px) {
  .pub-hub { width: 104px; height: 104px; }
  .pub-hub-mark { font-size: 24px; }
}