/* =============================================================================
* swnm 카드 컴포넌트 — .ui-card (사인오프 2026-06-10)
* -----------------------------------------------------------------------------
* 페이지 본문에 놓이는 "면 박스"(정보 카드/패널). 모달(팝업)과 다름.
* hex/크기 하드코딩 금지(전부 tokens.css 토큰 사용).
*
* 통일 대상 = 겉 틀(배경/보더/radius/패딩/구분선). 카드 안 콘텐츠는 자유.
*
* 단순 박스:
* … 아무 내용 …
*
* 섹션형(선택 — 제목줄/버튼줄 있는 카드):
*
*
* 그림자: 기본 플랫. 떠있는 패널만 필요 시 box-shadow:var(--shadow-md) 직접 추가.
* 네임스페이스 ui-card 는 기존 *-card/*-panel 과 분리. 기존 무변화, 점진 흡수.
* ============================================================================= */
.ui-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm); /* 4px */
padding: var(--space-5); /* 20px */
color: var(--text-primary);
}
/* ===== 섹션형 ===== */
/* 섹션을 쓰면 카드 자체 패딩은 0, 각 섹션이 자체 패딩을 가짐 */
.ui-card--sectioned {
padding: 0;
overflow: hidden; /* 모서리 radius 안으로 섹션 정리 */
}
.ui-card__header {
padding: var(--space-4) var(--space-5); /* 16px 20px */
border-bottom: 1px solid var(--border);
font-size: var(--font-base);
font-weight: var(--fw-bold); /* 700 */
}
.ui-card__body {
padding: var(--space-5); /* 20px */
}
.ui-card__footer {
display: flex;
justify-content: flex-end;
align-items: center;
gap: var(--space-2); /* 8px (버튼 사이) */
padding: var(--space-4) var(--space-5); /* 16px 20px */
border-top: 1px solid var(--border);
}
/* ===== modifier ===== */
.ui-card--pad-sm { padding: var(--space-3); } /* 12px */
.ui-card--pad-none { padding: 0; } /* 그리드/지도 등 */
.ui-card--sectioned.ui-card--pad-none > .ui-card__body { padding: 0; }
.ui-card--sectioned.ui-card--table-frame > .ui-card__body { padding: var(--space-3) 0 0; } /* 표 카드: header/tabs와 Tabulator 헤더 사이 상단 여백만 복구 */
/* =============================================================================
* 카드 그리드 — .ui-card-grid (반응형 자동 재배치, 사인오프 2026-06-10)
* -----------------------------------------------------------------------------
* 같은 종류 카드 여러 개를 줄세우는 그리드. 폭 줄면 auto-fit으로 열수 자동 감소
* (4→3→2→1) → 페이지별 @media 불필요. opt-in(추가형), 기존 페이지 무영향.
*
*
*
* 칸 최소폭은 카드 종류별로 페이지가 조정(동작은 통일):
* KPI 작은 카드 style="--card-min:200px"
* 기본 (기본 260px)
* 넓은 차트 카드 style="--card-min:360px"
* gap 도 필요시 override: style="gap:var(--space-6)"
* ============================================================================= */
.ui-card-grid {
display: grid;
gap: var(--space-4); /* 16 */
grid-template-columns: repeat(auto-fit, minmax(var(--card-min, 260px), 1fr)); /* 260 */
}
/* KPI 줄 — 좁은 gap. 한 줄에 펼치되, 폭이 부족하면 카드 폭(--card-min)까지 줄인 뒤 다음 줄로 넘긴다(auto-fit).
줄바꿈 전까지는 아래 clamp 로 폰트·여백이 함께 축소돼 글자가 칸을 벗어나지 않는다. */
.ui-card-grid--kpi { --card-min: 120px; gap: var(--space-3); } /* 하한 120·gap12 */
/* 줄바꿈 직전까지 값·라벨 폰트와 패딩·높이를 함께 축소.
카드 자체를 컨테이너로 삼아 cqw(카드 폭 1%) 기준 → 사이드바·카드 개수와 무관하게 실제 칸 폭에 맞는다. */
.ui-card-grid--kpi .ui-kpi {
container-type: inline-size;
--kpi-value-size: clamp(var(--font-lg), 22cqw, var(--font-3xl));
--kpi-label-size: clamp(var(--font-xs), 11cqw, var(--font-md));
--kpi-min-h: clamp(88px, 9vw, 130px);
gap: var(--space-2);
padding: clamp(var(--space-3), 1.2vw, var(--space-5));
min-width: 0; /* 그리드 칸 안에서 내용이 칸 폭을 넘기지 않도록 */
}
/* =============================================================================
* KPI 카드 — .ui-kpi (ui-card 위에 얹는 지표 카드, 2026-06-23)
* 2026-06-24 · jiwon · __sub(값 옆 보조수치) 슬롯 + 아이콘 색 훅(--kpi-icon-color/-bg) 추가
* (데이터품질 상세 dqd-kpi-* 흡수)
* -----------------------------------------------------------------------------
* 아이콘(선택)+라벨 머리줄 / 우하단 큰 값. 면(배경·보더·radius·패딩)은 ui-card 담당.
*
*
*
// 아이콘 없으면 head 생략
*
* 유효율
*
*
99.2%
*
12312.3%
* 아이콘 색은 공용 상태 토큰 재사용: --good/--caution/--critical. 무상태는 중립 칩.
* 도메인 색(차트 카테고리 등)이 필요하면 modifier 대신 인라인 변수:
* …
* 줄세우기는 .ui-card-grid.ui-card-grid--kpi.
*
* 크기는 변수로 조절(기본값=토큰). 페이지에서 덮어쓰기:
*
* --kpi-value-size(값) · --kpi-unit-size(단위) · --kpi-label-size(라벨)
* --kpi-min-h(카드 최소높이) · --kpi-icon-size(아이콘 칩)
* ============================================================================= */
.ui-kpi {
--kpi-value-size: var(--font-3xl);
--kpi-unit-size: var(--font-2xl);
--kpi-sub-size: var(--font-md);
--kpi-label-size: var(--font-md);
--kpi-min-h: 130px;
--kpi-icon-size: 32px;
display: flex;
flex-direction: column;
gap: var(--space-3);
min-height: var(--kpi-min-h);
}
.ui-kpi__head { display: flex; align-items: center; gap: var(--space-2); }
.ui-kpi__icon {
width: var(--kpi-icon-size); height: var(--kpi-icon-size);
flex-shrink: 0;
border-radius: var(--radius-sm);
display: inline-flex; align-items: center; justify-content: center;
/* 기본=중립 칩. 도메인 색이 필요한 곳은 페이지에서 --kpi-icon-color/-bg 주입 */
background: var(--kpi-icon-bg, var(--bg-surface-alt));
color: var(--kpi-icon-color, var(--text-muted));
}
.ui-kpi__icon--good { color: var(--status-normal); background: var(--status-normal-bg); }
.ui-kpi__icon--caution { color: var(--status-caution); background: var(--status-caution-bg); }
.ui-kpi__icon--critical { color: var(--status-critical); background: var(--status-critical-bg); }
.ui-kpi__label {
color: var(--text-secondary);
font: var(--fw-semibold) var(--kpi-label-size)/1.2 var(--font-sans);
}
.ui-kpi__value {
margin-top: auto;
text-align: right;
line-height: 1;
color: var(--text-primary);
font-weight: var(--fw-semibold);
font-size: var(--kpi-value-size);
}
.ui-kpi__unit {
margin-left: var(--space-1);
color: var(--text-secondary);
font-size: var(--kpi-unit-size);
}
/* __sub: 값 옆 보조 지표(비율 등). __unit(값의 단위)과 역할 구분 — 값 색 modifier 비적용, 중립 유지 */
.ui-kpi__sub {
margin-left: var(--space-2);
font-size: var(--kpi-sub-size);
font-weight: var(--fw-semibold);
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.ui-kpi--good .ui-kpi__value { color: var(--status-normal); }
.ui-kpi--caution .ui-kpi__value { color: var(--status-caution-text); }
.ui-kpi--critical .ui-kpi__value { color: var(--status-critical); }
.ui-kpi--primary .ui-kpi__value { color: var(--primary); }