@conscience-technology/ctds 0.3.4 → 0.4.1

package/assets/components/Switch/Switch.module.css

@@ -56,11 +56,9 @@
   width: var(--_track-w);
   height: var(--_track-h);
   background: var(--bg-muted);
-  border: var(--hairline) solid var(--border);
   border-radius: var(--radius-full);
   transition:
     background var(--duration-slow) var(--ease-out),
-    border-color var(--duration-slow) var(--ease-out),
     box-shadow var(--duration-fast) var(--ease-out);
 }
 
@@ -82,19 +80,14 @@
 /* Checked — 트랙은 primary로 채우고, 썸을 우측 끝 - pad로 이동. */
 .input:checked + .track {
   background: var(--primary);
-  border-color: var(--primary);
 }
 .input:checked + .track .thumb {
-  left: calc(var(--_track-w) - var(--_thumb) - var(--_pad) - var(--hairline) * 2);
+  left: calc(var(--_track-w) - var(--_thumb) - var(--_pad));
 }
 
 /* Hover */
-.root:hover .input:not(:disabled) + .track {
-  border-color: var(--border-strong);
-}
 .root:hover .input:not(:disabled):checked + .track {
   background: var(--primary-hover);
-  border-color: var(--primary-hover);
 }
 
 /* Focus — 트랙에 링 표시 */
@@ -108,7 +101,6 @@
 }
 .input:disabled + .track {
   background: var(--bg-muted);
-  border-color: transparent;
 }
 .input:disabled + .track .thumb {
   background: var(--fg-disabled);

package/assets/components/Topbar/Topbar.module.css

@@ -1,10 +1,12 @@
 /* Root ─────────────────────────────────────────────────
-   투명. 배경·보더·그림자 없음. children 자유 배치.
+   투명. 배경·보더·그림자 없음. 부모 폭을 반드시 꽉 채운다 — 이게 없으면
+   AppFrame.topbarSlot(flex) 안에서 콘텐츠 폭만큼만 차지해 좌측에 몰려버림.
    size는 높이만 결정 — padding/gap은 동일. */
 .root {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
+  width: 100%;
+  min-width: 0;
   height: var(--topbar-h);
   padding-inline: var(--space-5);
   background: transparent;
@@ -20,7 +22,33 @@
   height: var(--topbar-h-md);
 }
 
-/* Spacer ───────────────────────────────────────────── */
-.spacer {
-  flex: 1 1 auto;
+/* Zone ─────────────────────────────────────────────────
+   공통. 자식은 가로 flex + 작은 컴포넌트 간 gap(--space-1, 메모리 규칙). */
+.zone {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+}
+
+/* leading — 왼쪽, 자연 폭. */
+.leading {
+  flex: 0 0 auto;
+}
+
+/* center — 가운데 1fr, 내용은 중앙 정렬. 있으면 L과 T 사이 공간을 1fr로 먹음. */
+.center {
+  flex: 1 1 0;
+  justify-content: center;
+}
+
+/* trailing — 오른쪽 자연 폭.
+   margin-inline-start: auto 가 핵심 — center가 없는 조합(L + T만)에서도
+   남는 공간을 전부 왼쪽 margin이 흡수해 자동으로 오른쪽 끝에 붙는다.
+   center가 있으면 center의 flex:1이 먼저 공간을 요구하기 때문에 margin은
+   0으로 수렴. 어떤 조합이든 안정적 배치. */
+.trailing {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  justify-content: flex-end;
 }

package/assets/components/Topbar/Topbar.tsx

@@ -8,6 +8,10 @@ import styles from "./Topbar.module.css";
 /* Root ─────────────────────────────────────────────────
    자유 슬롯 컨테이너. 자체 표현(bg/border/shadow) 없음.
    컨테이너 표현은 상위 AppFrame variant가 담당.
+
+   구조는 leading / center / trailing 3-zone 고정. 루트가 부모 폭을 꽉 채우고
+   세 zone이 flex로 자리를 나눠서 "왼쪽에 몰림" 현상을 구조적으로 차단.
+
    size는 세로 높이만 결정 (sm=얇게, md=기본). */
 export type TopbarSize = "sm" | "md";
 
@@ -31,17 +35,68 @@ const TopbarRoot = forwardRef<HTMLElement, TopbarProps>(function TopbarRoot(
   );
 });
 
-/* Spacer ───────────────────────────────────────────────
-   좌/우 정렬용 flex:1 빈 블록. */
-function TopbarSpacer() {
-  return <div className={styles.spacer} aria-hidden />;
-}
+/* Zones ────────────────────────────────────────────────
+   leading / center / trailing. zone 안 자식은 가로 flex + space-1 gap.
+   center는 flex:1 + 가운데 정렬 — 비워두면 leading과 trailing 사이가 자연히 벌어짐. */
+type ZoneProps = HTMLAttributes<HTMLDivElement>;
+
+const TopbarLeading = forwardRef<HTMLDivElement, ZoneProps>(function TopbarLeading(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(styles.zone, styles.leading, className)}
+      data-topbar-zone="leading"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+const TopbarCenter = forwardRef<HTMLDivElement, ZoneProps>(function TopbarCenter(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(styles.zone, styles.center, className)}
+      data-topbar-zone="center"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+const TopbarTrailing = forwardRef<HTMLDivElement, ZoneProps>(function TopbarTrailing(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(styles.zone, styles.trailing, className)}
+      data-topbar-zone="trailing"
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
 
 type TopbarComponent = typeof TopbarRoot & {
-  Spacer: typeof TopbarSpacer;
+  Leading: typeof TopbarLeading;
+  Center: typeof TopbarCenter;
+  Trailing: typeof TopbarTrailing;
 };
 
 const Topbar = TopbarRoot as TopbarComponent;
-Topbar.Spacer = TopbarSpacer;
+Topbar.Leading = TopbarLeading;
+Topbar.Center = TopbarCenter;
+Topbar.Trailing = TopbarTrailing;
 
 export { Topbar };

package/assets/components/_data.ts

@@ -527,6 +527,7 @@ export const componentSlugs: Record<string, string> = {
   "Menu Item": "general/menu-item",
   Badge: "general/badge",
   Avatar: "general/avatar",
+  "Avatar Upload": "general/avatar-upload",
   Tooltip: "general/tooltip",
   Shortcut: "general/shortcut",
   "Filter Button": "general/filter-button",
@@ -552,8 +553,11 @@ export const componentSlugs: Record<string, string> = {
   "Identity Button": "nav/identity-button",
   Pagination: "nav/pagination",
   "App Frame": "layout/app-frame",
+  "Page Header": "nav/page-header",
   Stepper: "nav/stepper",
   "Context Menu": "overlay/context-menu",
+  "Dropdown Menu": "overlay/dropdown-menu",
+  Disclosure: "overlay/disclosure",
   Callout: "feedback/callout",
   Modal: "feedback/modal",
   Drawer: "feedback/drawer",
@@ -562,9 +566,11 @@ export const componentSlugs: Record<string, string> = {
   "Table Row": "data/table-row",
   "Table Row Select": "data/table-row-select",
   "Table Row Edit": "data/table-row-edit",
+  "Event List Item": "data/event-list-item",
   "Event Chip": "data/event-chip",
   "List Item": "data/list-item",
   "Metric Card": "data/metric-card",
+  "Kanban": "data/kanban",
   "Gallery Item": "data/gallery-item",
   "Empty State": "data/empty-state",
   "Progress Bar": "feedback/progress-bar",
@@ -596,7 +602,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "general",
     title: "General",
     items: [
-      "Button", "Split Button", "Icon Button", "Menu Item", "Toolbar", "Badge", "Avatar",
+      "Button", "Split Button", "Icon Button", "Menu Item", "Toolbar", "Badge", "Avatar", "Avatar Upload",
       "Tooltip", "Shortcut", "Filter Button", "Chip", "Separator", "Skeleton", "Aspect Ratio",
       "Code Block",
     ],
@@ -616,7 +622,8 @@ export const components: { id: string; title: string; items: string[] }[] = [
     title: "Data Display",
     items: [
       "Table Header", "Table Row", "Table Row Select", "Table Row Edit",
-      "List Item", "Metric Card", "Gallery Item", "File Icon", "Attachment Item", "Event Chip",
+      "List Item", "Metric Card", "Gallery Item", "File Icon", "Attachment Item", "Event Chip", "Event List Item",
+      "Kanban",
       "Empty State", "Description List", "Timeline",
     ],
   },
@@ -624,7 +631,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "nav",
     title: "Navigation",
     items: [
-      "App Frame", "Tabs", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Identity Button", "Pagination",
+      "App Frame", "Page Header", "Tabs", "Breadcrumb", "Sidebar", "Sidebar Split", "Topbar", "Identity Button", "Pagination",
       "Stepper",
     ],
   },
@@ -640,7 +647,7 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "overlay",
     title: "Overlay / Menu",
     items: [
-      "Context Menu", "Collapsible", "Toggle Group",
+      "Context Menu", "Dropdown Menu", "Disclosure", "Collapsible", "Toggle Group",
     ],
   },
   {

package/assets/components/index.ts

@@ -29,6 +29,7 @@ export * from "./Drawer";
 export * from "./DropdownMenu";
 export * from "./EmptyState";
 export * from "./EventChip";
+export * from "./EventListItem";
 export * from "./FileIcon";
 export * from "./FilterButton";
 export * from "./GalleryItem";
@@ -47,6 +48,7 @@ export * from "./MessageTable";
 export * from "./MetricCard";
 export * from "./Modal";
 export * from "./Onboarding";
+export * from "./PageHeader";
 export * from "./Pagination";
 export * from "./ProgressBar";
 export * from "./QuotationBar";

package/assets/components/tokens.css

@@ -97,6 +97,16 @@
   --input-w-md: calc(280px * var(--space-scale));
   --input-w-lg: calc(400px * var(--space-scale));
 
+  /* Breakpoint — 레이아웃 전환 임계점.
+     CSS @media의 feature value는 var() 참조가 불가하므로 변수 자체는 참조용/문서용.
+     실제 미디어쿼리는 아래 값과 동일한 리터럴을 쓴다. 두 자리 뿐이라 흩어뜨리지 않는다.
+       sm = 560px  — 모바일/태블릿 경계. "한 손 조작" vs "두 손 조작"
+       md = 900px  — 태블릿 세로/데스크톱 경계. shell(topbar+sidebar) 축소 전환
+     신규 미디어쿼리를 작성할 땐 이 두 값 중 하나로 통일한다. 다른 값이 필요하면
+     여기 토큰부터 추가. */
+  --bp-sm: 560px;
+  --bp-md: 900px;
+
   --radius-none: 0;
   --radius-xs: 6px;
   --radius-sm: 8px;
@@ -308,7 +318,7 @@
 
   /* interactive / overlay
      --hover: 컴포넌트 hover 시 표면·그림자에 얹는 공통 오버레이.
-     라이트=검정 3%, 다크=흰색 3%. 데이터 테이블·리스트 등 반복 행에서
+     라이트=검정 3%, 다크=흰색 4%. 데이터 테이블·리스트 등 반복 행에서
      "너무 두드러지지 않는" 톤. */
   --hover: oklch(0 0 0 / 0.03);
   /* tooltip: Mode 반전. 라이트에선 다크 bg + 밝은 fg, 다크에선 라이트 bg + 어두운 fg.
@@ -326,7 +336,7 @@
   --shadow-color: 0 0 0;
 
   --shadow-xs: 0 1px 2px oklch(var(--shadow-color) / 0.04);
-  --shadow-sm: 0 1px 3px oklch(var(--shadow-color) / 0.06), 0 1px 2px oklch(var(--shadow-color) / 0.04);
+  --shadow-sm: 0 2px 8px oklch(var(--shadow-color) / 0.03), 0 1px 2px oklch(var(--shadow-color) / 0.018);
   --shadow-md: 0 6px 16px -4px oklch(var(--shadow-color) / 0.07),
     0 2px 6px -2px oklch(var(--shadow-color) / 0.04);
   --shadow-lg: 0 12px 20px -6px oklch(var(--shadow-color) / 0.1),
@@ -498,7 +508,7 @@
   --radius-image-circle: var(--radius-2xl);
 
   --shadow-xs: 0 1px 2px oklch(var(--shadow-color) / 0.04);
-  --shadow-sm: 0 2px 6px -1px oklch(var(--shadow-color) / 0.06), 0 1px 2px oklch(var(--shadow-color) / 0.04);
+  --shadow-sm: 0 3px 10px -1px oklch(var(--shadow-color) / 0.032), 0 1px 3px oklch(var(--shadow-color) / 0.018);
   --shadow-md: 0 8px 20px -4px oklch(var(--shadow-color) / 0.08), 0 3px 8px -3px oklch(var(--shadow-color) / 0.04);
   --shadow-lg: 0 16px 32px -8px oklch(var(--shadow-color) / 0.14), 0 6px 12px -6px oklch(var(--shadow-color) / 0.06);
   --shadow-xl: 0 32px 60px -14px oklch(var(--shadow-color) / 0.20);
@@ -515,7 +525,7 @@
   --radius-3xl: 36px;
 
   --shadow-xs: 0 1px 2px oklch(var(--shadow-color) / 0.04);
-  --shadow-sm: 0 1px 3px oklch(var(--shadow-color) / 0.06), 0 1px 2px oklch(var(--shadow-color) / 0.04);
+  --shadow-sm: 0 2px 8px oklch(var(--shadow-color) / 0.03), 0 1px 2px oklch(var(--shadow-color) / 0.018);
   --shadow-md: 0 6px 16px -4px oklch(var(--shadow-color) / 0.07), 0 2px 6px -2px oklch(var(--shadow-color) / 0.04);
   --shadow-lg: 0 12px 20px -6px oklch(var(--shadow-color) / 0.10), 0 4px 8px -4px oklch(var(--shadow-color) / 0.06);
   --shadow-xl: 0 24px 40px -12px oklch(var(--shadow-color) / 0.16);
@@ -668,7 +678,7 @@
   --radius-3xl: 22px;
 
   --shadow-xs: 0 1px 0 oklch(var(--shadow-color) / 0.06);
-  --shadow-sm: 0 1px 2px oklch(var(--shadow-color) / 0.08), 0 0 0 1px oklch(var(--shadow-color) / 0.04);
+  --shadow-sm: 0 1px 3px oklch(var(--shadow-color) / 0.04), 0 0 0 1px oklch(var(--shadow-color) / 0.025);
   --shadow-md: 0 2px 4px oklch(var(--shadow-color) / 0.10), 0 0 0 1px oklch(var(--shadow-color) / 0.06);
   --shadow-lg: 0 4px 8px oklch(var(--shadow-color) / 0.12), 0 0 0 1px oklch(var(--shadow-color) / 0.06);
   --shadow-xl: 0 8px 16px oklch(var(--shadow-color) / 0.16), 0 0 0 1px oklch(var(--shadow-color) / 0.06);
@@ -681,11 +691,14 @@
 :root[data-mode="dark"],
 [data-mode="dark"] {
   --bg:            oklch(0.20 var(--tone-chroma) var(--tone-hue));
-  --bg-subtle:     oklch(0.25 var(--tone-chroma) var(--tone-hue));
-  --bg-muted:      oklch(0.31 var(--tone-chroma) var(--tone-hue));
+  --bg-subtle:     oklch(0.235 var(--tone-chroma) var(--tone-hue));
+  --bg-muted:      oklch(0.27 var(--tone-chroma) var(--tone-hue));
   --fg-strong:     oklch(1.0   var(--tone-chroma) var(--tone-hue));
   --fg:            oklch(0.95  var(--tone-chroma) var(--tone-hue));
-  /* 다크: 밝은 잉크(≈0.95)를 낮은 알파로 얹음. */
+  /* 다크: 밝은 잉크(≈0.95)를 낮은 알파로 얹음.
+     fg-muted 알파 0.60은 다크 bg(0.20) 위에서 effective L ≈ 0.65, 콘트라스트 ≈ 3.5:1.
+     WCAG AA "normal text" 4.5:1 임계 아래 — 보조 라벨·placeholder 전용.
+     중요한 보조 텍스트에는 --fg를 쓸 것. prefers-contrast: more에서 자동 상향됨. */
   --fg-muted:      oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.60);
   --fg-subtle:     oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.40);
   --fg-disabled:   oklch(0.95 var(--tone-chroma) var(--tone-hue) / 0.24);
@@ -695,7 +708,7 @@
 
   /* primary / status는 :root의 정의를 그대로 사용 — --lightness가 아래에서 재정의되어 자동 반영됨 */
 
-  --hover: oklch(1 0 0 / 0.06);
+  --hover: oklch(1 0 0 / 0.04);
   /* tooltip은 Mode 반전 — 다크 모드에선 밝은 bg + 어두운 fg. */
   --tooltip-bg:   oklch(0.95 var(--tone-chroma) var(--tone-hue));
   --tooltip-fg:   oklch(0.18 var(--tone-chroma) var(--tone-hue));
@@ -742,7 +755,7 @@
   --tooltip-fg:   oklch(1 0 0);
 
   --shadow-xs: 0 1px 2px oklch(var(--shadow-color) / 0.04);
-  --shadow-sm: 0 1px 3px oklch(var(--shadow-color) / 0.06), 0 1px 2px oklch(var(--shadow-color) / 0.04);
+  --shadow-sm: 0 2px 8px oklch(var(--shadow-color) / 0.03), 0 1px 2px oklch(var(--shadow-color) / 0.018);
   --shadow-md: 0 6px 16px -4px oklch(var(--shadow-color) / 0.07),
     0 2px 6px -2px oklch(var(--shadow-color) / 0.04);
   --shadow-lg: 0 12px 20px -6px oklch(var(--shadow-color) / 0.1),

package/assets/prompts/ASSEMBLY.md

@@ -0,0 +1,219 @@
+# CTDS 조립 가이드
+
+**벤더에 없는 자리를 조립할 때** 쓰는 메타 알고리즘. 벤더 컴포넌트 문서(`components/*.md`)가 **"있는 컴포넌트를 어떻게 쓰는가"**를 다룬다면, 이 문서는 **"없는 컴포넌트를 어떻게 짜는가"**를 다룬다.
+
+> 전제: [[PRINCIPLES]]·[[GUIDE]]를 이미 읽었다. 이 문서는 그 위의 조립 레이어.
+
+---
+
+## 0. 왜 이 문서가 필요한가
+
+CTDS 벤더(`web/components/`)는 공통 자리(Button·Input·Modal·Badge 등)만 담는다. **페이지 헤더·섹션 헤더·배너·도메인 리스트 row** 같은 자리는 프로젝트마다 생김새가 다르다 — 벤더로 못 박기 어렵고, 유저·AI가 그때그때 조립할 수밖에 없다.
+
+이 "조립" 자리가 CTDS의 **진짜 결과물**이다. 토큰은 토큰대로, 벤더는 벤더대로 지켜져도, **조립 알고리즘이 없으면 매 프로젝트마다 리듬·위계·여백이 흩어진다.**
+
+이 문서는 그 흩어짐을 막는 **조립 순서**를 못 박는다.
+
+---
+
+## 1. 조립 알고리즘 (5단계)
+
+벤더에 없는 자리를 짤 때 **반드시 이 순서로** 생각한다. 건너뛰면 수제 하드코딩으로 샌다.
+
+### 1단계 — "이게 정말 벤더에 없는가"를 먼저 의심한다
+
+조립 전에 벤더를 재확인한다. [[PRINCIPLES]] §5a — 역할이 같은 벤더가 있으면 반드시 쓴다.
+
+- `web/components/index.ts` 또는 `prompts/components/` 디렉토리 전수 스캔
+- "비슷한 역할"이 아니라 **"같은 역할"**이면 벤더 사용. 생김새가 조금 다른 건 variant·size로 해결 가능한지 재검토
+- 벤더 기존 variant로 안 되면 → **새 variant/size 신설**이 로컬 조립보다 우선 ([[PRINCIPLES]] §5a)
+- 정말로 벤더에 없는 자리임을 확인한 뒤에만 2단계로
+
+**[HARD] 리스트/반복 자리는 1단계에서 반드시 벤더로 확정** — "반복 아이템 N개"가 보이는 순간 Table/ListItem/EventListItem/MenuItem 중 하나를 **반드시** 쓴다. 레시피 조립은 리스트 자리를 커버하지 않는다. ([[PRINCIPLES]] §5a HARD, card-row 레시피 폐기 참고)
+
+### 2단계 — "가장 가까운 벤더 anatomy"를 베낀다
+
+새 자리의 뼈대를 **같은 성격의 벤더 컴포넌트에서 복제**한다. 새로 짜지 않는다.
+
+- "액션+라벨 묶음"이면 Button/Toolbar의 anatomy
+- "표시 라벨"이면 Badge/Chip의 anatomy
+- "텍스트 블록"이면 Callout의 anatomy (단, [[PRINCIPLES]] §5b 준수)
+- "아이콘+텍스트 row"이면 ListItem의 anatomy
+
+anatomy = padding·gap·radius·border 전략. 이걸 복제하면 벤더가 축에 반응하는 방식이 자동으로 따라온다.
+
+**벤더 사용 시 반드시 확인:**
+- **Prop 이름·타입**은 `web/components/<Name>/<Name>.tsx`의 export type 선언에서 확인 (레시피 예시 그대로 믿지 말 것 — Badge는 `tone`이 아니라 `status`, Stepper는 `value`가 아니라 `activeIndex`)
+- **Icon 이름**은 `web/components/Icon/Icon.tsx`의 phosphor 레지스트리에서 확인 — 레시피/다른 문서에 등장하는 이름이 실제 등재된 이름이라는 보장 없음
+- **`"use client"` 전염**: 쓰는 벤더 중 하나라도 `"use client"`면 조립하는 **page 자체도 `"use client"`**. compound(`Stepper.Item`·`Card.Header` 등)를 Server Component에서 접근하면 **런타임 undefined**(Next 15/React 19 경계 이슈). 현재 Button/Icon/IconButton/Stepper 등 대다수 vendor가 client — 사실상 조립 page는 모두 client로 가는 쪽이 안전
+
+### 3단계 — 레시피를 확인한다
+
+`prompts/recipes/`에 **자리별 조립 레시피**가 있다. 맞는 레시피가 있으면 그 토큰·구조 그대로 쓴다.
+
+- 레시피는 "이 자리에서 어떤 토큰 조합을 쓰는가"를 명시
+- 레시피가 **없는 자리**면 4단계로. 레시피가 **있는데 맞지 않으면** 레시피를 수정하거나 신설(이 문서를 업데이트)
+- 안티패턴 메모리(`antipattern_*`)에 해당하는 자리인지도 확인 — 긍정형 레시피가 없어도 "하지 마"는 있을 수 있다
+
+### 4단계 — 토큰만 쓴다
+
+조립 코드에 리터럴을 쓰지 않는다. [[PRINCIPLES]] §6.
+
+- 색·크기·시간·그림자·폰트 — 전부 `var(--*)` 또는 vendor 컴포넌트 경유
+- 간격은 [[tokens/spacing]]의 "앱 리듬 vs 랜딩 리듬"에서 먼저 리듬 선택 → 그 안에서 스케일
+- `gap`과 `padding/margin`을 양쪽에서 동시에 잡지 않는다 (이중 여백 금지, [[tokens/spacing]] Don't)
+- 20px 미만 `semibold`/`bold` 금지, 섹션 h2/h3 semibold 금지 ([[tokens/typography]])
+
+### 5단계 — 조립 검증
+
+조립이 끝나면 자가 검증. 항목:
+
+**값·토큰**
+- [ ] 토큰·vendor 외에 **리터럴 값**이 있는가 → 없어야 함
+- [ ] `width/height/max-width`에 **1px/0.75em** 같은 리터럴 있는가 → 금지. hairline은 `border-left: 1px solid var(--border)` + `align-self: stretch`로
+- [ ] `border: 1px solid transparent` 가드 패턴 있는가 → 금지 (check_bg_stroke_combo hook). border 안 쓸 땐 선언 자체를 생략
+- [ ] 날짜·시간이 숫자 전용("10. 13", "2026-10-13")인가 → "10월 13일 / 12분 전" 또는 Tooltip에 ISO ([[feedback-date-writing]])
+- [ ] **font-weight 토큰 이름이 정확한가** → `var(--font-weight-medium)` ✓ 아니라 `var(--font-medium)` ✗ 유령 토큰. 조용히 400으로 상속되어 **"얇음" 증상의 숨은 원인** ([[PRINCIPLES]] §6a)
+
+**레이아웃·그룹**
+- [ ] 간격을 `margin-top` 또는 `A + B` 선택자로 만들고 있는가 → **그룹 설계가 틀렸음**. wrapper를 추가해 flex column + gap으로 풀어라 (§2a)
+- [ ] 섹션 header에 `margin-bottom`이 있는가 → section 자체를 flex column + gap으로. header는 margin 없음
+- [ ] 섹션 상단에 큰 padding으로 "위 공간" 확보 중인가 → 섹션 사이 분리는 부모 그룹의 gap으로 (§2a)
+- [ ] 조립 코드에 `<section>`/`<article>`/`<nav>` semantic 태그를 썼는가 → **금지**. AppShell의 `.content section`이 `padding-top: 80px` 꽂아 "섹션 머리에 거대한 여백" 함정. `<div>`로 짠다 ([[feedback-no-semantic-tags-in-components]])
+
+**리스트·반복 자리 (HARD)**
+- [ ] 반복 아이템 N개를 `<ul>`/`<li>` + 자체 className으로 짰는가 → **즉시 금지** ([[PRINCIPLES]] §5a HARD). 아래 중 하나로 교체:
+  - 표 역할 → [[components/table-row]]
+  - 단건 반복(알림·활동·작업·자원) → [[components/list-item]]
+  - 날짜 중심 이벤트 → [[components/event-list-item]]
+  - 메뉴 아이템 → [[components/menu-item]] / [[components/sidebar-item]]
+- [ ] "카드처럼 보이는 리스트"가 필요하다는 이유로 수제 조립 중인가 → ListItem은 **chrome 없음이 공식**. border/bg 두르는 리스트는 (1) 블록 하나면 Callout, (2) 리스트 전체라면 **ListItem에 새 variant 신설**. 수제 조립 금지
+
+**리듬·여백**
+- [ ] 부모 gap + 자식 padding 이중 여백이 있는가 → 한쪽만
+- [ ] 콘솔 리듬에서 **섹션 간 gap이 space-6 이상**인가 → `space-4` 고려. 섹션이 border/배경으로 분리돼 있으면 space-6는 "구조 끊어진" 느낌 ([[tokens/spacing]])
+- [ ] 작은 컴포 묶음(버튼↔버튼) gap이 `space-1`인가 → 고정
+- [ ] 아이콘·텍스트가 hairline에 padding 없이 붙었는가 → padding 확보
+- [ ] **멀티라인 블록**(banner·card)에서 padding이 상하 `space-3` 이상인가 → single-line과 같은 padding 쓰면 타이트
+- [ ] **title + sub** 2줄 묶음의 내부 gap이 `space-1` 이상인가 → `space-0.5`는 녹아보임
+
+**정렬**
+- [ ] 아이콘 + 여러 줄 텍스트 조합에서 `align-items: center`인가 → **첫 줄과 어긋남**. `flex-start` + 아이콘 `margin-top: space-0.5`로 보정
+- [ ] "라벨 하나만" 블록 위에 뜨거나 혼자 떠서 여백이 깨지는가 → 라벨은 header 자리에 묶거나, 블록 밖으로 승격
+
+**색·면**
+- [ ] 배경 + 테두리 동시 적용이 있는가 → 둘 중 하나만 ([[PRINCIPLES]] §5b)
+- [ ] 평상시 border만, hover에서 bg 추가 패턴 쓰는가 → OK (`cardRow` 전략 A). 역으로 평상시 bg + hover border 금지
+
+**타이포·숫자**
+- [ ] 숫자 셀을 우측정렬했는가 → 좌측정렬 유지
+- [ ] 가운뎃점(·) 구분자가 있는가 → hairline 세로선으로 교체
+- [ ] 20px 미만 글자에 `semibold` 썼는가 → medium 이하 ([[tokens/typography]])
+- [ ] **섹션 타이틀(h2)이 text-xl 이상**인가 → 콘솔 리듬에서는 `text-lg` 기본. medium 가중치만으론 크면 "크고 얇은" 느낌으로 뜸
+
+**아이콘**
+- [ ] 아이콘을 인라인 `<svg>`로 쐈는가 → Icon 컴포넌트 경유
+
+이 체크리스트는 메모리에 쌓인 피드백의 **긍정형 자동화** — 조립 시점에 매번 돌린다. 특히 1~3번은 **hook이 자동 차단**하므로 미리 검증.
+
+---
+
+## 2. "조립 자리"로 흔히 등장하는 패턴
+
+벤더에 없는 자리 중 반복적으로 등장하는 것들. **각 패턴은 `recipes/` 아래에 레시피가 있다** (없으면 신설).
+
+- **페이지 헤더** — 큰 타이틀 + 서브텍스트 + (옵션) 우측 액션 → [[recipes/page-header]]
+- **섹션 헤더** — 중간 타이틀 + (옵션) 설명 1줄 + (옵션) 우측 액션/카운트 → [[recipes/section-header]]
+- **메타 라인** — 라벨 여러 개가 가로로 나열, 사이 구분자 필요 → [[recipes/meta-line]]
+- **카드 리스트 row** → ~~레시피 아님~~. [[components/list-item]] 벤더 ([[PRINCIPLES]] §5a HARD)
+- **폼 푸터** — Spacer + outline(취소) + primary(제출) → [[recipes/form-footer]]
+- **페이지 상단 안내 배너** — 톤 있는 가로 바, 좌측 아이콘+텍스트 + 우측 액션 → [[recipes/page-banner]]
+- **흐름 속 참고 각주** — 아이콘 + 1~2줄 muted 텍스트, 톤·액션 없음 → vendor [[components/hint]] (레시피 아님. "아이콘-텍스트 라인 맞추기" 함정 반복 때문에 벤더로 확정)
+
+이 목록 자체가 "지금 CTDS가 자주 조립해야 하는 자리"의 정식 지도다. 새 패턴이 세 번 반복되면 이 목록에 추가하고 레시피를 쓴다.
+
+---
+
+## 2a. 레이아웃 1원칙 — "관련있는 것끼리 묶는다"
+
+**레이아웃 설계의 가장 중요한 결정은 "그룹"이다.** 어떤 요소가 어떤 요소와 한 묶음인지 먼저 정하고, 그 다음 각 그룹을 flex column으로 만들고, gap으로 간격을 준다. padding/margin으로 간격을 벌리는 접근은 **틀렸다**.
+
+**원칙:**
+1. 역할이 가까운 요소들을 **같은 flex 컨테이너**로 묶는다 (한 그룹 = 한 wrapper)
+2. 그룹 안은 **좁은 gap** (`space-2` ~ `space-3`), 그룹끼리는 **넓은 gap** (`space-6` ~ `space-10`)
+3. **모든 간격은 flex gap**. `margin-top`/`margin-bottom` 트릭 금지. `+` 선택자로 "다음 요소에만 추가 공간" 트릭도 금지 — gap으로 못 풀면 **그룹을 다시 짜라**
+4. 섹션 header의 `margin-bottom` 금지. 섹션 자체를 flex column + gap으로 만들어 header와 body를 자연스럽게 묶는다
+
+**전형 (3-tier 리듬):**
+```
+page (gap: space-10)                             ← 그룹 사이 넓게
+├─ group A: 소개 (gap: space-3)                   ← 같은 그룹은 좁게
+│  ├─ banner
+│  ├─ page-header
+│  └─ inline hint
+├─ group B: Stepper (gap: space-2)
+│  ├─ eyebrow
+│  └─ Stepper
+└─ group C: 섹션들 (gap: space-6)                 ← 중간 호흡
+   ├─ section (gap: space-2)                     ← 섹션 안은 좁게
+   │  ├─ section-header
+   │  └─ card-list (gap: space-2)
+   └─ section (gap: space-2)
+```
+
+**금지:**
+- [HARD] `.page { gap: X }` 하나로 모든 자식 블록 간격 담당 — 역할 다른 블록이 "통짜"로 뜸
+- [HARD] `A + B { margin-top: ... }`로 특정 자리만 벌리기 — 그룹 설계가 틀렸다는 신호. wrapper를 추가해서 gap으로 풀어라
+- [HARD] 섹션 header `margin-bottom` — section을 flex column + gap으로. 섹션 자체가 header↔body를 묶음
+- [HARD] 섹션 head 쪽에 큰 padding으로 "위 공간 확보" — padding은 "안쪽" 공간, 섹션 사이 분리는 부모 그룹의 gap으로
+
+**갭 선택 — 핵심 원칙: "가까운 관계일수록 더 좁게"**
+
+갭의 크기는 **관계의 가까움에 반비례**한다. 두 요소가 "가장 가까운 관계"면 가장 좁은 gap, "성격이 다른 묶음"이면 가장 넓은 gap. **인접한 두 레벨은 반드시 한 단계 이상 차이**가 나야 위계가 생긴다 — 같으면 뭉쳐 보임.
+
+**관계 → 갭 매핑 (앱/콘솔 리듬, 실측 기준):**
+
+| 관계 | 갭 | 예시 |
+|---|---|---|
+| **리스트 안 반복 아이템** (가장 가까움) | `space-1` | cardList의 cardRow들 |
+| **그룹 안 미니 묶음** | `space-2` | 타이틀+설명, eyebrow+컨트롤, Stepper eyebrow+Stepper |
+| **같은 그룹 안 header ↔ body** | `space-3` | section header ↔ cardList, pageHeader ↔ inlineHint |
+| **같은 그룹 안 성격 다른 요소** | `space-6` | 메타 banner ↔ 본문 headerBlock |
+| **섹션 ↔ 섹션 (반복 작업 단위)** | `space-20` (80px) | "작업 계획" ↔ "코드 변경안 실행 요청" |
+| **그룹 ↔ 그룹 (성격 다른 묶음)** | `space-20` (80px) | introGroup ↔ stepperGroup ↔ sectionsGroup |
+
+**철칙: 인접 레벨 간 반드시 한 단계 이상 차이**
+- 예: 리스트 아이템 gap `space-1` → 섹션 header↔body gap `space-3` (한 단계 뛰어넘음)
+- 예: 섹션 header↔body `space-3` → 섹션 ↔ 섹션 `space-20` (큰 점프)
+- **같은 값 금지**: 아이템 간 `space-2` + 섹션 header↔body `space-2` → "타이틀과 아이템이 같은 레벨"로 뭉쳐 보임
+
+> ⚠ 처음엔 "섹션 반복은 space-6, 그룹끼리는 space-10"으로 잡았지만 실측에서 둘 다 **좁았음**. 콘솔 리듬이라도 **"독립된 작업 단위"끼리는 space-20 수준의 호흡**이 자연스러움. "space-6은 섹션 내부 블록 단위"로만 쓸 것.
+
+## 2b. 카드로 감싸는 자리 — "균일 padding 지킬 수 있을 때만"
+
+조립 자리에 **카드(border + radius + bg)**를 두르면 안쪽은 **상하좌우 균일 padding**이 공식 ([[tokens/spacing]] "카드·패널 내부 padding"). 지키지 못하면 카드 자체를 포기하는 게 낫다.
+
+**카드 포기 시그널:**
+- 카드 안에 **라벨/eyebrow가 혼자** 떠서 균일 padding을 깬다 → 라벨을 밖(PageHeader eyebrow)으로 승격 또는 생략, 카드 폐기
+- 카드 안 요소들이 **각자 다른 수평 정렬**(가운데 정렬 Stepper + 오른쪽 정렬 라벨) → 균일 padding으론 못 담음. 풀어 놓거나 요소 하나만 남김
+- 카드가 "그냥 공간 묶음용"일 뿐 **분리 신호가 없다** → border·bg 자체가 노이즈. 페이지 흐름에 그대로 두고 gap만
+
+## 3. 조립 시 자주 틀리는 자리
+
+조립할 때 사람·AI 모두 자주 미끄러지는 자리. 안티패턴 메모리와 쌍을 이룬다.
+
+- **"페이지 맨 위에 Tabs만"** — Tabs 위에 PageHeader(h1/breadcrumb)가 먼저 와야 한다 ([antipattern-tabs-without-title])
+- **"워크스페이스 스위처를 수제 Button+Dropdown으로 조립"** — 전용 IdentityButton + DropdownMenu 사용 ([antipattern-workspace-switcher])
+- **"Topbar leading에만 요소 몰림"** — leading/center/trailing 3구역 균형. leading·trailing 짝 필수 ([[components/topbar]])
+- **"Sidebar 2단 쉘을 SidebarSplit으로"** — 바깥 flex로 Rail+Sidebar 직접 조립 ([feedback-sidebar-scroll])
+- **"안내 영역을 outline Callout으로"** — 색 테두리 + 색 배경 조합은 영구 금지 ([feedback-no-outlined-callout]). muted 인라인 텍스트 한 줄로 대체
+
+---
+
+## 관련
+
+- [[PRINCIPLES]] — 전역 원칙. 특히 §1(값/판단 분리), §5a(컴포넌트 우선), §5b(배경 또는 테두리), §6(하드코딩 금지)
+- [[GUIDE]] — 섹션 문서 작성 가이드. ASSEMBLY는 그 위의 **조립 레이어**
+- [[components/_variants]] — 역할 × variant 매핑. 2단계(가장 가까운 벤더 anatomy)에서 참조
+- [[tokens/spacing]] — 앱 리듬 vs 랜딩 리듬. 4단계(토큰) 참조
+- `prompts/recipes/` — 자리별 조립 레시피 모음. 3단계 참조