/**
 * widgets/ui/card — 카드 셸
 *
 * 🔴 색·치수를 직접 쓰지 않고 CSS 변수로 노출한다.
 *    사이트는 :root 의 --site-* 를 정의하거나 --w-card-* 를 직접 재정의해 디자인을 바꾼다.
 */
.w-card {
    --w-card-bg:         var(--site-card-bg, #fff);
    --w-card-fg:         var(--site-text, #1f2937);
    --w-card-muted:      var(--site-muted, #6b7280);
    --w-card-border:     var(--site-border, #e5e7eb);
    --w-card-radius:     var(--site-card-radius, 10px);
    --w-card-pad:        0.875rem;
    --w-card-head-h:     2.75rem;   /* 44px */
    --w-card-title-size: 0.9375rem; /* 15px */
    --w-card-icon:       var(--site-brand, #6c5ce7);
    --w-card-more:       #c3c7cf;

    background: var(--w-card-bg);
    color: var(--w-card-fg);
    border: 1px solid var(--w-card-border);
    border-radius: var(--w-card-radius);
    overflow: hidden;
}

/* ── 제목 줄 ─────────────────────────────────────── */
.w-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--w-card-head-h);
    padding: 0 var(--w-card-pad);
    border-bottom: 1px solid var(--w-card-border);
}

/* divider:false — 구분선 없는 카드(날씨처럼 본문과 한 덩어리인 경우) */
.w-card.is-plain .w-card__head { border-bottom: none; }

.w-card__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: var(--w-card-title-size);
    font-weight: 600;
    line-height: 1.2;
    color: var(--w-card-fg);
    min-width: 0;
}

.w-card__icon {
    font-size: 0.875em;
    color: var(--w-card-icon);
    flex-shrink: 0;
}

.w-card__more {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 4px;
    color: var(--w-card-more);
    font-size: 0.8125rem;
    text-decoration: none;
}

/* 호버 명암 — 프로젝트 규칙(배경 #f1f5f9 / 텍스트 #64748b) */
.w-card__more:hover {
    background: #f1f5f9;
    color: #64748b;
    text-decoration: none;
}

/* ── 본문 ────────────────────────────────────────── */
.w-card__body { padding: var(--w-card-pad); }

.w-card.is-flush .w-card__body { padding: 0; }

/* 카드 안의 빈 상태는 페이지급 빈 상태보다 작아야 한다 */
.w-card .w-card__empty {
    --w-empty-state-pad:       1.75rem 1rem;
    --w-empty-state-icon-size: 2.25rem;
}