/* 말랩스 앱 공통 부품 v2
═══════════════════════════════════════════════════════════════
`v1.css` 는 **값**을 맞췄다(색·글꼴·인터랙션·돌아가기 알약). 그것만으로는
화면이 정갈해지지 않았다 — 값이 같아도 **모양**이 화면마다 달랐기 때문이다.
실측이 그렇게 말한다(2026-09-13):
시딩 페이지 평균 92줄 · 공용 부품 4개 ← 조립한다
adref 페이지 평균 444줄 · 공용 부품 20개 ← 화면마다 다시 그린다
허브 페이지 평균 235줄 · 공용 부품 0개 ← 전부 다시 그린다
그래서 이 파일은 **모양**을 맞춘다. 카드 머리·표·빈 상태·요약 띠가
어느 앱에서든 같은 것이 되도록.
── 기준을 어디서 가져왔나 ────────────────────────────────────
대표가 데모 일곱 곳에서 둘을 골랐고(2026-09-13), 그 둘의 실제 소스를 받아
수치를 나란히 놓고 섞었다. 추측한 값이 없다.
shadcn 공식 blocks (레지스트리 new-york-v4 원본)
Material Dashboard Shadcn (GitHub, MIT)
항목 shadcn Material 우리 왜
─────────────────────────────────────────────────────────
카드 모서리 12 12 12 둘이 같다
카드 여백 24 24 24 둘이 같다
카드 내부 간격 24 — 24 shadcn. 우리에겐 없던 규칙이다
카드 그림자 있음 없음 없음 대표가 「깔끔」으로 고른 쪽
버튼 높이 36 40 36 shadcn. 조밀한 쪽
버튼 입체 없음 있음 있음 대표가 「입체감」으로 고른 쪽
표 셀 8 16 12/16 둘 사이. 손익표는 오래 본다
빈 상태 4단 없음 4단 shadcn. 우리는 글자 한 줄뿐이었다
한 줄로 줄이면 — **면은 평평하게, 누르는 것만 입체로.**
⛔ **아이콘은 이모지를 계속 쓴다**(2026-09-13 대표 결정). lucide 로 바꾸는
안이 있었지만 ⚠·⛔ 는 슬랙·문서에서도 쓰는 우리 말버릇이라 그대로 둔다.
── 쓰는 법 ──────────────────────────────────────────────────
그리고 앱은 `src/components/ui/` 의 얇은 부품 파일을 복사해 쓴다. 값은
**여기 한 곳**에서 나오므로, 나중에 톤을 바꿔도 이 파일만 고치면 된다.
⛔ **판본을 올릴 때는 v3.css 를 새로 만든다.** 이 파일을 덮으면 한 앱을
고치려다 전 앱이 같이 바뀌고, 그때는 되돌릴 자리가 없다.
⛔ **클래스 이름을 지우거나 바꾸지 않는다.** 2026-09-13 에 이 파일의 초안이
`.v2-*` 를 쓰고 있었는데 정본을 만들면서 `.m2-*` 로 통째로 갈아엎었다.
그 순간 `.v2-*` 를 쓰던 화면이 **아무 스타일도 없는 상태**가 되어 대표에게
그대로 보였다. 서빙되는 파일 쪽에서는 **누가 쓰고 있는지 알 수 없다** —
값은 바꿔도 되지만 이름은 남긴다.
⛔ **고치면 부르는 쪽의 `?v=` 를 같이 올린다.** 서빙 헤더가
`max-age=300, stale-while-revalidate=86400` 이라, 옛 파일을 받아둔
브라우저는 **최대 하루** 그걸 계속 쓴다. 같은 날 이것 때문에 멀쩡한
화면까지 깨져 보였다. 지금 판: **v=27**
⛔ **이 파일은 `@layer` 밖이다 — Tailwind 유틸리티로 못 덮는다.**
Tailwind 유틸리티는 `@layer utilities` 안에 있고, CSS 규칙상 **레이어 밖이
레이어 안을 항상 이긴다**(구체성과 무관하다). 그래서
← p-6 은 안 먹는다. 여백은 24px
← 11px 아니라 규격 글자크기
← margin 을 규격이 다시 적는다
**빌드도 통과하고 클래스도 남아 있는데 아무 일도 안 일어난다.** 2026-09-22
goal100 에서 `Card` 가 언제나 `--flush`(padding:0) 라 화면 34곳의
`p-3`·`p-5`·`p-6` 이 한 곳도 안 먹었고, 글자가 카드 테두리에 붙어 있었다.
사람이 두 번 고치고 두 번 다 「여전해」였다.
고치는 법 — 유틸리티를 지우고 **규격 부품의 변형**을 쓰거나, 규격을 고친다.
그래도 덮어야 하면 **감싼 칸(`
`)에 준다** — 규격 클래스가 없는 칸이라 먹는다.
점검기 `/root/bin/ui-audit.py` 가 「안 먹는 유틸리티」로 매일 센다. */
/* ─── 치수 ─────────────────────────────────────────────
`@theme` 로 넣은 Tailwind 토큰(marlabs-hub#278)과 **같은 값**이다.
Tailwind 를 안 쓰는 앱도 같은 치수를 갖게 하려고 여기 한 번 더 적는다. */
:root {
--m2-radius: 0.75rem; /* 12px — 카드·패널·버튼·입력칸 */
--m2-radius-sm: 0.375rem; /* 6px — 작은 칩·배지 */
--m2-pad: 1.5rem; /* 24px — 카드 안 여백 (shadcn·Material 일치) */
--m2-gap: 1.5rem; /* 24px — 카드 **안쪽** 덩어리 사이. shadcn gap-6 */
--m2-gap-sm: 0.75rem; /* 12px — 버튼끼리, 칩끼리 */
--m2-cell-y: 0.75rem; /* 12px — 표 셀 위아래 */
--m2-cell-x: 1rem; /* 16px — 표 셀 좌우 */
--m2-h: 2.25rem; /* 36px — 버튼·입력칸 높이 (shadcn h-9) */
--m2-text: 0.875rem; /* 14px */
--m2-text-sm: 0.8125rem; /* 13px */
}
/* ─── 층 ──────────────────────────────────────────────
⛔ **면에는 그림자를 주지 않는다.** 층은 테두리 1px 하나로 낸다.
대표 규칙(「층은 그림자·테두리 하나만」)이자 Material 카드의 실제 모습이다.
그림자를 쓰는 것은 **누를 수 있는 것 하나뿐**이다. */
/* ─── 카드 ─────────────────────────────────────────────
내부는 세로 flex + gap 24 로 리듬을 고정한다. 지금까지는 자식마다
`mb-2`·`mb-5`·`mt-0.5` 를 따로 붙여서 카드마다 간격이 달랐다. */
.m2-card {
display: flex;
flex-direction: column;
gap: var(--m2-gap);
padding: var(--m2-pad);
border: 1px solid var(--m-border, oklch(92.9% 0.013 255.508));
border-radius: var(--m2-radius);
background: var(--m-surface, #fff);
box-shadow: none;
color: var(--m-text, oklch(20.8% 0.042 265.755));
}
/* ─── 면만 필요할 때 ───────────────────────────────────────
`.m2-card` 는 **자식 사이를 24px 로 벌린다.** 그게 목적인 자리(제목·본문·
단추가 층층이 쌓이는 카드)에는 맞지만, **촘촘한 숫자 더미**에는 안 맞는다.
⛔ goal100 의 지표 타일이 그랬다(2026-09-14). 「전체 ROAS」 밑에 숫자, 그
밑에 설명을 `mt-0.5`(2px)·`mt-1`(4px)로 **일부러 붙여** 놨는데, 카드로
감싸니 24px 씩 벌어져 한 덩어리로 안 읽히게 됐다.
→ 소스를 읽고 잡았다. 그 앱은 로컬 실행이 안 돼서 화면으로는 못 봤다.
그래서 **면만** 주는 것을 따로 둔다. 자식이 자기 간격을 직접 정하는 자리에 쓴다.
판단 한 줄: **간격을 카드가 정하면 `.m2-card`, 자식이 정하면 `.m2-surface`.** */
.m2-surface {
padding: var(--m2-pad);
border: 1px solid var(--m-border, oklch(92.9% 0.013 255.508));
border-radius: var(--m2-radius);
background: var(--m-surface, #fff);
box-shadow: none;
color: var(--m-text, oklch(20.8% 0.042 265.755));
}
[data-theme="dark"] .m2-surface {
border-color: var(--m-border, oklch(37.2% 0.044 257.287));
background: var(--m-surface, oklch(20.8% 0.042 265.755));
color: var(--m-text, oklch(96.8% 0.007 247.896));
}
/* 표를 통째로 담는 카드는 안쪽 여백이 없어야 한다 — 셀이 이미 갖고 있다 */
.m2-card--flush {
padding: 0;
gap: 0;
overflow: hidden;
}
.m2-card__title {
font-size: var(--m2-text);
font-weight: 600;
margin: 0;
}
.m2-card__sub {
font-size: var(--m2-text-sm);
color: var(--m-text-muted, oklch(55.4% 0.046 257.417));
margin: 0.25rem 0 0;
}
/* 제목+부제는 한 덩어리다 — 사이는 4px, 다음 덩어리와는 24px */
.m2-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--m2-gap-sm);
flex-wrap: wrap;
}
/* 큰 상자(화면 안의 구역)의 제목. 위계를 셋으로 둔다:
20px 페이지 제목 · 16px 구역 제목 · 14px 카드 제목 */
.m2-card__title--lg {
font-size: 1rem;
}
/* 표를 담는 구역 — 머리는 여백을 갖고 본문만 가장자리까지 간다.
`--flush`(여백을 통째로 없앰)와 다르다. 제목이 있는 상자에 쓴다. */
.m2-card--flushbody {
overflow: hidden;
}
.m2-card--flushbody > :last-child {
margin-inline: calc(var(--m2-pad) * -1);
margin-bottom: calc(var(--m2-pad) * -1);
}
/* ─── 페이지 머리 ───────────────────────────────────────
허브 35화면이 저마다 다르게 그리고 있었다. 하나로 둔다. */
.m2-pagehead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--m2-gap-sm);
flex-wrap: wrap;
margin-bottom: var(--m2-gap);
}
.m2-pagehead h1 {
font-size: 1.25rem; /* 20px */
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
}
.m2-pagehead p {
font-size: var(--m2-text-sm);
color: var(--m-text-muted, oklch(55.4% 0.046 257.417));
margin: 0.25rem 0 0;
}
.m2-pagehead__actions {
display: flex;
gap: var(--m2-gap-sm);
flex-wrap: wrap;
}
/* ─── 요약 띠 ───────────────────────────────────────────
숫자 몇 개를 나란히 보여주는 자리.
⛔ **색면을 깔지 않는다** (2026-09-14 대표: *"이런건 너무 투박하게 안이쁜데?
레퍼런스 2개를 잘 합친거맞아? 깔끔한 느낌이 없잖아"* — goal100 오가닉 띠).
그 전 판은 연한 강조색으로 **면 전체를 칠하고 라벨까지 강조색**으로 뒀다.
레퍼런스 둘 다 그렇게 안 한다:
shadcn *Section Cards* 흰 면 + 테두리 · 라벨은 흐린 회색 · 숫자만 크게
Material 대시보드 흰 카드 + **작은 색 아이콘 한 점**
둘 다 강조는 **한 점**이지 면이 아니다. 대표가 준 카드뉴스도 그랬다 —
큰 검정 덩어리에 오렌지가 한 점.
⛔ **숫자 크기를 칸마다 다르게 두지 않는다.** goal100 은 첫 칸만 `text-5xl`,
나머지는 `text-3xl` 이라 밑줄이 안 맞아 들쭉날쭉해 보였다. 여기서 한 벌로
고정한다 — 더 강조하고 싶은 칸은 `--lead` 를 준다(크기가 아니라 색이다).
칸 사이 실선은 `gap:1px` + 바깥 배경으로 낸다. 줄바꿈이 일어나도 격자가
그대로 유지된다(테두리를 칸에 직접 주면 두 줄째 첫 칸에 선이 남는다). */
/* ⚠️ 칸 사이 선을 `gap:1px` + 바깥 배경으로 내면, 줄바꿈이 일어나 **마지막 줄에
빈 칸이 남을 때 그 자리가 구분선 색(회색)으로 보인다.** 폰 폭에서 5칸이 2열로
접히자 실제로 그랬다(2026-09-14 실측). 칸마다 `box-shadow` 로 테두리를 그리면
빈 자리는 그냥 비어 있고, 이웃한 선은 같은 색이라 1px 로 겹쳐 보인다. */
.m2-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
gap: 0;
padding: 0;
border: 1px solid var(--m-border, oklch(92.9% 0.013 255.508));
border-radius: var(--m2-radius);
background: var(--m-surface, #fff);
overflow: hidden;
}
.m2-band > * {
/* 좌우는 **표 셀과 같은 16px.** 다르게 두면 띠 밑에 표가 오는 화면에서
왼쪽 글자 줄이 어긋나 보인다(2026-09-14 전수 점검). */
padding: 1rem var(--m2-cell-x);
background: var(--m-surface, #fff);
box-shadow: 0 0 0 0.5px var(--m-border, oklch(92.9% 0.013 255.508));
}
/* 숫자 칸은 **한 줄**이다. 「14,917,954원」이 두 줄로 꺾이면 카드 높이가 제각각이 되어
줄이 어긋난다(2026-09-16 대표: "숫자가 한번에 안들어가", 주간회의·매출·오가닉).
칸 폭에 맞춰 글자를 줄인다 — 값을 직접 담은 칸이 컨테이너다(cqi). 폭이 넉넉하면 24px. */
:where(:has(> .m2-band__value)) {
container-type: inline-size;
min-width: 0;
}
.m2-band__label {
font-size: var(--m2-text-sm);
font-weight: 500;
color: var(--m-text-muted, oklch(55.4% 0.046 257.417));
margin: 0;
}
.m2-band__value {
font-size: clamp(1rem, 11cqi, 1.5rem);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1.25;
color: var(--m-text, oklch(20.8% 0.042 265.755));
margin: 0.25rem 0 0;
white-space: nowrap;
}
/* 그 줄에서 제일 중요한 숫자 하나. 크기가 아니라 **색**으로 든다 — 크기를
키우면 밑줄이 어긋나고, 그게 「투박하다」의 정체였다. */
.m2-band__value--lead {
color: var(--m-accent-text-on-bg, oklch(45.7% 0.24 277.023));
}
/* 숫자 뒤에 붙는 단위(건·원·%). 숫자보다 작고 흐리다 */
.m2-band__unit {
font-size: var(--m2-text);
font-weight: 500;
color: var(--m-text-muted, oklch(55.4% 0.046 257.417));
margin-left: 0.25rem;
}
/* ─── 표 ───────────────────────────────────────────────
shadcn 8px 과 Material 16px 사이. 손익·정산은 오래 들여다보는 표라
위아래는 여유를 주고(12), 좌우는 읽는 폭을 지킨다(16). */
.m2-table {
width: 100%;
border-collapse: collapse;
font-size: var(--m2-text);
}
/* ⛔ **셀은 줄바꿈하지 않는다.** 폰 폭(390px)에서 표를 렌더하면 열이 눌리면서
셀 안 글자가 **세로로 쪼개진다** — 「8월 / 10 / 일」, 「공 / 용」(2026-09-14 실측).
대표가 같은 병을 단추에서 먼저 짚었다: *"버튼 세로로 되는것도 문제고,
모바일버전에서 봤을때 배율맞게 최적화되어야된다는것도 잊으면 안돼"*
표는 좁아지는 게 아니라 **넘쳐서 옆으로 스크롤**되는 것이 맞다. 그래서
`.m2-scroll` 로 감싼다(아래). 긴 문장을 담는 열만 `wrap` 으로 푼다. */
.m2-table th,
.m2-table td {
padding: var(--m2-cell-y) var(--m2-cell-x);
text-align: left;
vertical-align: middle;
white-space: nowrap;
}
/* 긴 글이 들어가는 열에만 준다 — 메모·설명처럼 접혀도 되는 것 */
.m2-table .wrap {
white-space: normal;
}
/* ⛔ **폰에서 페이지가 통째로 가로로 넘치는 진짜 원인** (2026-09-14 실측)
`body` 를 flex 컨테이너로 쓰는 앱이 여럿이다(허브 `flex min-h-full flex-col`,
비품 `flex min-h-dvh flex-col md:flex-row`). flex 자식은 `min-width: auto` 라
**자기 min-content 보다 작아지지 않는다.** 안에 넓은 표가 하나 있으면
`` 이 표의 min-content 만큼(측정값 746px) 부풀고, 화면이 390px 이면
페이지 전체가 옆으로 스크롤된다 — 표만이 아니라 제목·칩 줄까지 잘려 보인다.
`overflow-x:auto` 감싸개를 제대로 씌워도 소용없다. 넘치는 것은 감싸개가
아니라 **그 조상**이다.
`:where()` 로 무게 0 에 둔다 — 앱이 자기 규칙으로 언제든 덮을 수 있다. */
/* 글꼴은 여기서 한 번만 정한다. `:where()` 라 무게가 0 이고, 앱이 자기
규칙으로 언제든 덮을 수 있다 — 덮을 일이 없어야 맞지만 막지는 않는다. */
:where(body) {
font-family: var(--m-font-sans);
}
/* ⛔ **부품은 테두리를 높이 안에 넣는다.** 안 그러면 같은 클래스인데 태그마다
높이가 달라진다 — `