/* 카드 컴포넌트 — 가이드 §10.1 */

.card {
    display: block;
    padding: var(--spacing-5);                /* Mobile */
    background: var(--primary-0);
    border: 1px solid var(--neutral-disabled-bd);
    border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
    .card { padding: var(--spacing-6); }      /* PC */
}

/* 그림자 카드 (테두리 대신 shadow) */
.card.card-elevated {
    border: 0;
    box-shadow: var(--shadow-sm);
}

/* 클릭 가능한 카드 */
.card.card-interactive {
    cursor: pointer;
    transition: box-shadow var(--motion-fast), transform var(--motion-fast),
                border-color var(--motion-fast);
}
@media (hover: hover) {
    .card.card-interactive:hover {
        border-color: var(--primary-50);
        box-shadow: var(--shadow-md);
    }
}
.card.card-interactive:active {
    transform: translateY(1px);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--neutral-basic);
}

.card-body {
    color: var(--neutral-basic);
}

.card-footer {
    margin-top: var(--spacing-4);
    display: flex;
    gap: var(--spacing-2);
}

/* 카드 그리드 — 가이드 §10.1 카드 간 gap */
.card-grid {
    display: grid;
    gap: var(--spacing-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .card-grid { gap: var(--spacing-4); }
}
.card-grid.cols-2 {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
    .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Badge (§2.3 status) ────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    height: 24px;
    padding: 0 var(--spacing-2);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-xs);
    color: var(--primary-0);
    white-space: nowrap;
}

.badge-critical { background: var(--status-critical); }
.badge-danger   { background: var(--status-danger); }
.badge-warning  { background: var(--status-warning); color: var(--neutral-basic); }
.badge-success  { background: var(--status-success); }
.badge-neutral  { background: var(--neutral-disabled-bg); color: var(--neutral-basic); }