/*
   playground-common.css
   Playground 페이지 공통 레이아웃 + 인터랙션 토큰. 신규 페이지가 그대로 재사용.
   기존 페이지는 자기 .razor.css 의 동일 정의가 우선이라 시각적 영향 없음 (scoped CSS attribute).
*/

.playground {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    color: #0f172a;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #64748b;
}

.nav-back {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
}

.nav-back:hover { color: #0f172a; }
.nav-divider { color: #cbd5e1; }

.playground .header { margin-bottom: 1.5rem; }
.playground .header h1 { margin: 0; font-size: 1.75rem; font-weight: 700; }
.playground .subtitle { color: #64748b; margin: 0.25rem 0 0; font-size: 0.95rem; }

.playground .context-bar {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.playground .context-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.playground .context-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.playground .context-field select,
.playground .context-field input[type="text"] {
    padding: 0.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.875rem;
}

.playground .tab-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.playground .tab-panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.playground .action-bar {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
    flex-wrap: wrap;
    align-items: center;
}

.playground .btn {
    padding: 0.5rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.playground .btn:hover:not(:disabled) { background: #f1f5f9; }
.playground .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.playground .btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.playground .btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.playground .btn-secondary { background: #64748b; border-color: #64748b; color: #fff; }
.playground .btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.playground .btn-small { padding: 0.25rem 0.6rem; font-size: 0.8rem; }

.playground .hint { color: #64748b; font-size: 0.85rem; }

.playground .result-panel {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
}
.playground .result-panel.success { background: #f0fdf4; border-color: #86efac; }
.playground .result-panel.error { background: #fef2f2; border-color: #fecaca; }
.playground .result-panel h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
.playground .result-panel pre { white-space: pre-wrap; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: #991b1b; margin: 0; }

/* Card 그리드 — 신규 페이지가 사용 */
.playground .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}

.playground .card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}

.playground .card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.playground .card-icon {
    font-size: 1.1rem;
    color: #2563eb;
}

.playground .card-body {
    font-size: 0.875rem;
    color: #334155;
    flex: 1;
}

.playground .badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e0e7ff;
    color: #3730a3;
}

.playground .badge-ok { background: #d1fae5; color: #065f46; }
.playground .badge-warn { background: #fef3c7; color: #92400e; }
.playground .badge-error { background: #fee2e2; color: #991b1b; }