/** widgets/ui/empty-state — 색·치수는 변수로만 노출한다.
 *
 * 🔴 기본값은 바꾸지 않는다. 카드 안처럼 작게 써야 할 때만 상위에서 변수를 덮는다:
 *    .w-card .w-card__empty { --w-empty-state-pad: 1.75rem 1rem; --w-empty-state-icon-size: 2.25rem; }
 */
.w-empty-state {
    --w-empty-state-fg:         var(--site-text, #1f2937);
    --w-empty-state-muted:      var(--site-muted, #6b7280);
    --w-empty-state-pad:        3.5rem 1rem;
    --w-empty-state-icon-size:  2.5rem;
    --w-empty-state-icon-color: #cbd5e1;
    --w-empty-state-msg-size:   0.875rem;

    padding: var(--w-empty-state-pad);
    text-align: center;
    color: var(--w-empty-state-muted);
}

.w-empty-state__icon {
    font-size: var(--w-empty-state-icon-size);
    color: var(--w-empty-state-icon-color);
    margin: 0 auto 0.75rem;   /* 🔴 좌우 auto — 아래 설명 */
    display: block;
}
/* 🔴 Font Awesome 은 아이콘 폭을 고정한다(실측 50px). display:block 인 좁은 블록은
      부모의 text-align:center 를 받지 않고 **왼쪽에 붙는다** — 제목·코드는 가운데인데
      아이콘만 왼쪽 위로 떨어졌다(2026-09-10 실측: 아이콘 중심 x=53, 섹션 중심 x=188).
      좌우 여백을 auto 로 두면 폭이 좁든 넓든 가운데에 온다. */

.w-empty-state__code {
    margin: 0; font-size: 2.75rem; font-weight: 800; line-height: 1;
    color: #cbd5e1; letter-spacing: -0.02em;
}

.w-empty-state__title {
    margin: 0.6rem 0 0; font-size: 1.0625rem; font-weight: 700;
    color: var(--w-empty-state-fg);
}

.w-empty-state__message { margin: 0.4rem 0 0; font-size: var(--w-empty-state-msg-size); }

.w-empty-state__actions { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.1rem; }