/* PyoBot 공용 스타일 — Tailwind CDN 위에 살짝 얹는 보조 스타일 */

:root {
  --pb-bg: #0f172a;        /* slate-900 */
  --pb-bg-soft: #1e293b;   /* slate-800 */
  --pb-accent: #6366f1;    /* indigo-500 */
  --pb-accent-2: #f472b6;  /* pink-400 */
  --pb-ink: #f8fafc;       /* slate-50 */
}

html { scroll-behavior: smooth; }
body { font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; }

/* Hero gradient */
.pb-hero {
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(99,102,241,.45) 0%, rgba(99,102,241,0) 60%),
    radial-gradient(60% 60% at 80% 30%, rgba(244,114,182,.35) 0%, rgba(244,114,182,0) 60%),
    radial-gradient(80% 80% at 50% 100%, rgba(14,165,233,.30) 0%, rgba(14,165,233,0) 60%),
    linear-gradient(180deg, #0b1024 0%, #0f172a 100%);
}

.pb-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pb-card:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  transform: translateY(-2px);
}

/* 카드 썸네일 — 이미지 없을 때 컬러 + 이모지 폴백 */
.pb-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: white;
}

.pb-thumb.tone-a { background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.pb-thumb.tone-b { background: linear-gradient(135deg,#06b6d4,#3b82f6); }
.pb-thumb.tone-c { background: linear-gradient(135deg,#f472b6,#ef4444); }
.pb-thumb.tone-d { background: linear-gradient(135deg,#22c55e,#10b981); }
.pb-thumb.tone-e { background: linear-gradient(135deg,#f59e0b,#f97316); }
.pb-thumb.tone-f { background: linear-gradient(135deg,#a3e635,#22d3ee); }

.pb-badge {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 9999px;
}
.pb-badge.lv-1 { background: #dcfce7; color: #166534; }
.pb-badge.lv-2 { background: #fef3c7; color: #92400e; }
.pb-badge.lv-3 { background: #fee2e2; color: #991b1b; }

.pb-tag {
  font-size: 0.7rem; color: #475569; background: #f1f5f9;
  padding: 1px 8px; border-radius: 9999px;
}

/* 상단 진단용 박스 */
.pb-console {
  background: #0f172a; color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.5;
  padding: 10px 12px; border-radius: 8px;
  max-height: 180px; overflow: auto;
}