@conscience-technology/ctds 0.4.3 → 0.4.4

package/README.md

@@ -7,6 +7,21 @@ CTDS — 하이브리드 디자인 시스템 설치/온보딩 CLI.
 - Node.js 18+
 - Next.js App Router 프로젝트 (`app/` 또는 `src/app/` 디렉토리)
 
+### 검증된 조합
+
+| 패키지 | 검증 범위 | 비고 |
+|---|---|---|
+| Next.js | `>=14.0 <17.0` | Next 16은 자동 패치로 복구 (아래 참고) |
+| React | `>=18.2 <20.0` | React 19 strict 타입 호환 |
+
+**Next.js 16 자동 호환 처리**: `create-next-app@latest`가 뽑는 `turbopack.rules["*.css"] + @tailwindcss/turbopack` 조합이 Turbopack built-in Lightning CSS CSS Modules 경로를 bypass해서 `.module.css`의 class가 undefined로 처리되는 함정이 있어요. `ctds init`은 이걸 감지해서 **자동으로**:
+
+1. `next.config.ts`의 `turbopack.rules["*.css"]` 블록을 삭제
+2. `postcss.config.mjs`를 신규 생성해 `@tailwindcss/postcss` plugin 등록
+3. 콘솔 fallback으로 `@tailwindcss/turbopack` 제거 명령 안내
+
+Next 15 LTS 플젝에서는 위 변경이 적용되지 않고 그대로 작동.
+
 ## 설치 (end user)
 
 ```bash

package/assets/components/ChatInput/ChatInput.module.css

@@ -24,6 +24,19 @@
 .root:focus-within {
   box-shadow: var(--ring), var(--shadow-md);
 }
+
+/* variant=flush — shell(사이드바 바닥·바텀바 등)에 edge-to-edge로 들러붙는 형태.
+   외곽 radius·shadow·border 제거, overflow만 유지해 scroll clip은 보장. focus ring도 없음
+   (바깥 shell이 focus signal을 책임지는 자리이거나 입력이 늘 활성인 맥락). */
+.variant-flush {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.variant-flush:focus-within {
+  box-shadow: none;
+}
+
 .disabled {
   opacity: 0.5;
   pointer-events: none;

package/assets/components/ChatInput/ChatInput.tsx

@@ -21,6 +21,7 @@ import { SendButton } from "./SendButton";
 import styles from "./ChatInput.module.css";
 
 export type ChatInputShape = "multi" | "single";
+export type ChatInputVariant = "framed" | "flush";
 
 /** 첨부 공용 타입 — ChatInput·Message 양쪽에서 재사용. */
 export interface ChatAttachmentImage {
@@ -48,6 +49,8 @@ export interface ChatInputModel {
 
 export interface ChatInputProps {
   shape?: ChatInputShape;
+  /** 외곽 처리. framed(기본)=radius·border·shadow 떠있음, flush=shell 바닥에 edge-to-edge. */
+  variant?: ChatInputVariant;
 
   value: string;
   onChange: (v: string) => void;
@@ -85,6 +88,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
   function ChatInput(props, ref) {
     const {
       shape = "multi",
+      variant = "framed",
       value,
       onChange,
       onSend,
@@ -167,6 +171,7 @@ export const ChatInput = forwardRef<HTMLDivElement, ChatInputProps>(
     const rootCls = [
       styles.root,
       styles[`shape-${shape}`],
+      styles[`variant-${variant}`],
       disabled ? styles.disabled : "",
       className,
     ]

package/assets/components/ChatInput/index.ts

@@ -2,6 +2,7 @@ export { ChatInput } from "./ChatInput";
 export type {
   ChatInputProps,
   ChatInputShape,
+  ChatInputVariant,
   ChatInputModel,
   ChatAttachment,
   ChatAttachmentImage,

package/assets/components/Onboarding/OnboardingPage.tsx

@@ -612,6 +612,7 @@ function Rail({
         className={styles.railSteps}
         activeIndex={stepIdx}
         onStepClick={onStepClick}
+        marker="number"
       >
         {STEPS.map((s, i) => (
           <Stepper.Item

package/assets/components/_data.ts

@@ -488,7 +488,7 @@ export const shadows: [string, string, string][] = [
   ["shadow-sm", "var(--shadow-sm)", "Card 기본"],
   ["shadow-md", "var(--shadow-md)", "Dropdown, Popover"],
   ["shadow-lg", "var(--shadow-lg)", "Modal"],
-  ["shadow-xl", "var(--shadow-xl)",],
+  ["shadow-xl", "var(--shadow-xl)", "Command Palette"],
   ["shadow-inner", "var(--shadow-inner)", "눌린 상태"],
 ];
 
@@ -648,7 +648,8 @@ export const components: { id: string; title: string; items: string[] }[] = [
     id: "overlay",
     title: "Overlay / Menu",
     items: [
-      "Context Menu", "Dropdown Menu", "Disclosure", "Collapsible", "Toggle Group",
+      "Context Menu", "Dropdown Menu",
+ "Disclosure", "Collapsible", "Toggle Group",
     ],
   },
   {

package/assets/prompts/ASSEMBLY.md

@@ -47,6 +47,17 @@ anatomy = padding·gap·radius·border 전략. 이걸 복제하면 벤더가 축
 - **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로 가는 쪽이 안전
 
+**벤더 수정 vs 로컬 파생 결정 트리** ([[feedback_no_vendor_modification]], [[feedback_local_derivative_over_handrolled]]):
+
+벤더에 "비슷하지만 그대로는 안 되는" 자리를 만들 때 네 갈래 중 하나를 **글로 적어 결정**한다 — 수제(div+span 하드코딩) 로 빠지는 순간 토큰·여백·사이즈 리듬이 전부 깨진다.
+
+1. **벤더 variant/size 로 커버됨** → 그대로 import, 변경 금지.
+2. **커버 안 됨 + 다른 사용처에도 쓰일 패턴** → `ctds-component` 스킬로 넘겨 **벤더에 새 variant/size 신설**. Layer 1(코드)과 Layer 2(문서) 쌍으로 수정. 영향 범위 평가 필수.
+3. **커버 안 됨 + 번역/페이지 이 자리에만 필요** → **로컬 파생**: 가장 비슷한 벤더 코드(JSX + CSS Module)를 소비 프로젝트 로컬 경로(`web/app/_components/` 또는 `app/components/<page>/_parts/`)에 **다른 이름**으로 복사. 토큰·height·padding·gap·radius 기본값은 **건드리지 말고 유지** — 조정은 추가 slot/위치/variant 수준. 벤더 패키지(`packages/ctds-cli/assets/`, `node_modules/ctds/`) 는 **절대 수정 금지**.
+4. **벤더에 비슷한 것도 없고 레시피에도 없음** → 사용자에게 보고. 수제 조립로 임의 결정 금지.
+
+**왜 로컬 파생이 수제보다 통일성이 좋은가**: 벤더의 토큰 선택을 그대로 베낀 상태로 시작하므로 Shape/Density/Hue 축 스왑에 자동 반응. 수제는 padding `12px`·gap `8px` 같은 직관값이 CTDS space scale 과 미묘하게 어긋나거나 하드코딩되고, 축 스왑에서 그 자리만 깨진다.
+
 ### 3단계 — 레시피를 확인한다
 
 `prompts/recipes/`에 **자리별 조립 레시피**가 있다. 맞는 레시피가 있으면 그 토큰·구조 그대로 쓴다.

package/assets/prompts/axes/icon.md

@@ -16,11 +16,14 @@ Weight는 축이 아니라 `<Icon weight="..." />` prop (컴포넌트별 자유
 - 아이콘은 항상 의미 기반 이름으로 참조: `<Icon name="check" />`.
 - 프로젝트 시작 시 Family 하나 결정. 리스킨 아닌 이상 안 바꾼다.
 - 활성/선택 상태 표시엔 `weight=fill`, 그 외에는 `weight=regular`.
+- **단순한 상징 우선** — Button/MenuItem 라벨이 이미 의미를 담고 있으니, 아이콘은 1초 안에 분류되는 "모양 꼬리표" 역할. 조합형 메타포(`envelope-plus`, `pencil-simple` 등)보다 원형 상징(`plus`, `x`, `check`, `search`, `trash`, `arrow-right`)이 우선 ([[feedback_simple_icons]]).
 
 ### Don't
 - 한 페이지에서 두 Family를 섞지 않는다.
 - 아이콘을 SVG로 하드코딩하지 않는다. 항상 `<Icon />` 경유.
 - Lucide에서 `weight=fill`을 요구하지 않는다 (원본이 fill 미제공).
+- 조합형 메타포로 의미를 "그림으로 설명" 하지 않는다 — "새 메시지" 는 `plus` 지 `envelope-plus`/`pencil-simple` 가 아니다. "제출" 은 `arrow-right` 지 `paper-plane` 이 아니다. 라벨에 의미를 넣고 아이콘은 보편 상징.
+- 예외: Sidebar·네비처럼 **아이콘 혼자 뜻을 담아야 하는 자리**는 구체 아이콘 OK (`gear`, `house`, `bell`).
 
 ### Fallback
 Family는 `phosphor`, Weight는 `regular`.

package/assets/prompts/axes/voice.md

@@ -24,10 +24,13 @@ Theme과 독립 — editorial이든 mechanical이든 어떤 Theme에도 어떤 V
 - 접근성 문구(에러 설명, 필수 필드 안내, 스크린리더 라벨)는 Voice와 무관하게 **명확성 우선**.
   `casual`이어도 필수 정보를 희석하지 않는다 (예: "비밀번호는 필수입니다" 수준은 유지).
 - Voice에 CSS 변수나 토큰을 할당하지 않는다. 코드 레벨 영향은 `data-voice` 속성 노출뿐.
-- **제목·헤딩·버튼 라벨·메뉴명에 em dash(—), en dash(–), 하이픈(-)으로 부제를 잇지 않는다.**
-  모든 Voice 공통 하드 룰. 문서·UI 카피·AI 생성물 전부 해당.
-  나쁜 예: "온보딩 — 테마를 고릅니다", "설정 — 기본값", "저장 — 완료".
-  대신: 한 줄 제목으로 끝내거나(`"테마 고르기"`), 부제가 꼭 필요하면 별도 하위 텍스트로 분리.
+- **[HARD] em dash(—), en dash(–), 생략부호(…), 수사적 큰따옴표 전면 금지.** ([[feedback_no_em_dash]])
+  모든 Voice 공통 하드 룰. 범위는 **제목·헤딩·버튼 라벨·메뉴명뿐 아니라 본문·테이블 셀·설명·툴팁·에러 메시지까지 모든 사람 UI 카피** 전부. 문서·UI 카피·AI 생성물 전부 해당.
+  나쁜 예:
+  - 제목: "온보딩 — 테마를 고릅니다", "설정 — 기본값", "저장 — 완료"
+  - 본문: "작업이 완료되었습니다 — 다시 시작하려면...", "결과는 다음과 같습니다…"
+  - 테이블 셀: "완료 — 2026년 10월 15일"
+  대신: 한 줄 제목으로 끝내거나(`"테마 고르기"`), 부제가 꼭 필요하면 별도 하위 텍스트로 분리. 본문에서는 쉼표·마침표·괄호로 흐름을 끊고, "…" 대신 **"기다리는 중"** 처럼 상태를 명시.
 
 ### Fallback
 `neutral`.

package/assets/prompts/components/callout.md

@@ -4,21 +4,24 @@
 사이드바·리스트 끝·설정 패널의 여백에 상주하는 소형 안내 카드. 페이지 흐름을 끊지 않고 새 기능·이동 경로를 제시한다. hover가 없는 [[components/tooltip]], 휘발되는 Toast, 페이지 폭 전체를 덮는 [[recipes/page-banner]]와 구분된다.
 
 ### Do
-- 표면 강도는 `variant`, 강조 색은 `tone`으로 독립 제어한다.
+- 표면은 `fill` 하나 — tone tint 배경 + 투명 border 로 신호를 담는다. 색 테두리 없음.
+- 강조 색은 `tone` 으로 제어한다.
 - `dismissible=true`면 `onDismiss`와 함께 부모가 숨김 상태를 저장한다.
 - `actions`는 [[components/button]] slot이다 — variant는 자유, size는 `xs`(기본) 또는 `sm`만.
 - 액션 Button의 색은 `tone`을 따라간다 — solid/soft 버튼이면 같은 tone(warning엔 warning 버튼, destructive엔 destructive 버튼), 아니면 `ghost`/`outline` 중립. tone과 다른 색 solid 버튼으로 신호를 깨지 않는다.
 - 좁은 컨테이너에선 `actionsPlacement="bottom"` 유지, `right`는 본문이 짧고 카드가 가로로 넓을 때만.
 - `warning`/`destructive` tone은 `icon` 미지정 시 각각 `warning-circle`(주의) / `warning`(위험)이 자동. 다른 의미 아이콘이 필요할 때만 override한다.
+- 톤을 "비권장" 수준으로 낮추고 싶으면 Callout 자체를 쓰지 않는다 — [[components/callout]] 대신 `fg-muted` 색 **인라인 텍스트 한 줄**로 처리.
 
 ### Don't
 - 페이지 폭 전역 경고에 쓰지 않는다 — [[recipes/page-banner]] 영역.
 - 임시 피드백에 쓰지 않는다 — Toast를 쓴다.
 - 본문을 4줄 넘게 채우지 않는다.
 - `tone`을 임의 색상으로 확장하지 않는다.
+- **[HARD] `variant="outline"` 금지** — 색 테두리 + 색 배경 조합(outlined Callout류) 영구 금지. "안 연한 배경 + 진한 스트로크" 는 UI 를 싸구려·시끄럽게 만듦 ([[PRINCIPLES]] §5b, [[feedback_no_outlined_callout]]). 과거 outline variant 는 폐기 — 쓰지 말 것. 비권장 메시지는 Callout 자체 대신 muted 인라인 텍스트로.
 
 ### Fallback
-`variant` 애매하면 `fill`. `tone` 애매하면 `brand`. `actionsPlacement` 애매하면 `bottom`.
+`variant` 는 `fill` 하나뿐. `tone` 애매하면 `brand`. `actionsPlacement` 애매하면 `bottom`.
 
 ### 관련
 - [[recipes/page-banner]] — 페이지 폭 전면 경고. Callout은 국소 카드.
@@ -31,7 +34,6 @@
 <Callout
   title={ReactNode}                                     // required
   icon={IconName}
-  variant="fill | outline"                              // default: fill
   tone="neutral | brand | success | warning | destructive"  // default: brand
   actions={ReactNode}
   actionsPlacement="bottom | right"                     // default: bottom
@@ -41,16 +43,20 @@
 >{children}</Callout>
 ```
 
+> `variant` prop 은 폐기됨. 과거 코드는 자동으로 `fill` 로 동작하지만, 신규 작성 시 명시하지 않는다.
+
 ### Variant 매트릭스
-variant × tone 축이 독립 조합. 표는 tone 기준으로 정렬, 각 tone에 variant 두 종을 보여준다.
+`variant` 는 `fill` 하나로 고정. tone 별 표면 색만 바뀐다.
+
+| tone | fill (유일 variant) | 용도 |
+|---|---|---|
+| `neutral`     | 회색 표면(`bg-subtle`) + `fg-muted` 아이콘 | 톤 없는 기본 안내·중립 컨텍스트 |
+| `brand`       | tone 8% tint 표면 + brand 아이콘 | 신기능·프로모션·마이그레이션 유도 |
+| `success`     | success 8% tint + success 아이콘 | 완료·다음 스텝 제안 |
+| `warning`     | warning 8% tint + warning 아이콘 | 만료·용량 임박·설정 누락 |
+| `destructive` | destructive 8% tint + destructive 아이콘 | 삭제 예정·비가역 상태 |
 
-| tone | fill | outline | 용도 |
-|---|---|---|---|
-| `neutral`     | 회색 표면(`bg-subtle`) + `fg-muted` 아이콘 | 표면 투명 + `border` 경계 | 톤 없는 기본 안내·중립 컨텍스트 |
-| `brand`       | tone 8% tint 표면 + brand 아이콘·경계 | 표면 투명 + brand 경계 | 신기능·프로모션·마이그레이션 유도 |
-| `success`     | success 8% tint + success 아이콘·경계 | 표면 투명 + success 경계 | 완료·다음 스텝 제안 |
-| `warning`     | warning 8% tint + warning 아이콘·경계 | 표면 투명 + warning 경계 | 만료·용량 임박·설정 누락 |
-| `destructive` | destructive 8% tint + destructive 아이콘·경계 | 표면 투명 + destructive 경계 | 삭제 예정·비가역 상태 |
+모든 tone 에서 border 는 `transparent` — 색 테두리는 fill 표면과 신호가 겹쳐 소음만 더한다. 영역 분리가 필요하면 외부 레이아웃 gap 으로 해결, Callout 자체는 테두리를 그리지 않음.
 
 **금지 조합**
 tone이 톤 신호를 쥐고 있으므로, 그 안의 요소들(액션 버튼·아이콘)도 같은 신호를 유지해야 한다. 색이 어긋나면 사용자는 어느 쪽을 믿어야 할지 결정하지 못한다.

package/assets/prompts/components/chat-input.md

@@ -5,6 +5,7 @@ AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(t
 
 ### Do
 - Shape은 두 가지 — `multi`(기본, 긴 입력·오버레이 UI), `single`(토픽바·검색봉 느낌).
+- Variant는 두 가지 — `framed`(기본, radius·border·shadow 가진 떠있는 블록), `flush`(radius·border·shadow 모두 제거, shell 바닥에 edge-to-edge).
 - 외곽 radius는 Shape 축 토큰이 직접 결정 — prop으로 받지 않음.
 - `models` + `selectedModel` + `onSelectModel` 셋이 다 있을 때만 모델 selector 노출.
 - 전송은 `Enter`로 — multi에선 `Shift+Enter`가 줄바꿈. 스트리밍 중엔 `Enter`나 send 클릭이 `onStop`을 호출.
@@ -16,9 +17,10 @@ AI 채팅의 입력 영역. **첨부물 바 → 인용 바 → 입력 본문**(t
 - 모델 선택 메뉴를 내부에서 열지 않는다 — 현재는 라벨 클릭 시 다음 모델로 토글만. 실제 ContextMenu는 소비처에서 조립 (ChatInput의 책임 과잉 방지).
 - SingleLine에서 모델 라벨을 끝까지 노출하지 않는다 — 10자 넘으면 자동 compact(아이콘만).
 - Send 버튼 색을 변경하지 않는다 — 비활성=`bg-subtle` / 활성·스트리밍=`primary`로 고정.
+- `flush`를 떠있는 자리(페이지 중앙·오버레이)에 쓰지 않는다 — 외곽선 없이 공중에 뜨면 영역이 흐려짐. 반드시 shell 바닥·바텀바처럼 바깥 경계가 이미 존재하는 자리에만.
 
 ### Fallback
-shape 애매하면 `multi`. maxRows 애매하면 `8`.
+shape 애매하면 `multi`. variant 애매하면 `framed`. maxRows 애매하면 `8`.
 
 ### 관련
 - [[components/file-icon]] / [[components/attachment-thumb]] / [[components/attachment-item]] / [[components/quotation-bar]] — 조립 요소
@@ -30,6 +32,7 @@ shape 애매하면 `multi`. maxRows 애매하면 `8`.
 ```tsx
 <ChatInput
   shape="multi | single"               // default: multi
+  variant="framed | flush"             // default: framed
 
   value={string}
   onChange={(v) => void}
@@ -64,7 +67,8 @@ type ChatAttachment =
 - `kind: "file"`은 AttachmentItem이 filename 확장자로 FileIcon을 자동 결정.
 
 ### 레이아웃
-- 외곽: hairline border, `var(--bg)`, radius=Shape 축 (`--radius-sm`)
+- 외곽(framed): hairline border, `var(--bg)`, radius=Shape 축, `--shadow-md`
+- 외곽(flush): border·radius·shadow 전부 0 — bg만 유지. 바깥 shell(사이드바 바닥·바텀바)이 경계를 책임지는 자리 전용
 - **스크롤 룰**: root `padding: 0; overflow: hidden`. textarea에 상·하·좌·우 padding 전부 → 긴 글 스크롤 시 글이 root border까지 흘러 자연스레 clip. (wrapper에 padding 두면 scroll 시 "빈 띠"가 남아 어색 — [[primitives/scroll]])
 - focus-within에서 ring
 - 내부 세로 gap: `--space-2`, padding: `--space-3`

package/assets/prompts/components/list-item.md

@@ -146,6 +146,7 @@
 - **leading에 inline `<svg>` 금지**: 반드시 `<Icon />`/Badge/Avatar 경유. [[feedback_no_inline_svg]].
 - **한 리스트 안 size 혼용 금지**: sm 리스트는 전부 sm.
 - **자리마다 세로 간격 손 조정 금지**: 균형 안 맞으면 `size` 또는 리듬 토큰(`--li-gap-title`·`--li-gap-body`)으로.
+- **[HARD] `border-bottom` 있는 li 에 세로 padding 생략 금지** ([[feedback_no_touching_edges]]) — 콘텐츠가 선에 붙으면 무조건 문제. 최소 `--space-3` 유지. border + padding 을 다른 레이어가 공급해도 결과적으로 접촉 금지는 소비처가 책임.
 
 ## Fallback
 leading 애매하면 Icon. size 애매하면 md. align 애매하면 center(한 줄)·top(2줄 이상).
@@ -160,6 +161,27 @@ leading 애매하면 Icon. size 애매하면 md. align 애매하면 center(한
 | `--li-gap-body` | 큰 블록 간 간격 | `var(--space-2)` |
 | `--li-gap-meta` | Meta 라인 아이템 간 가로 gap | `var(--space-2)` |
 
+### MetaDivider 스펙
+
+가운뎃점·bullet·파이프 대신 쓰는 짧고 연한 세로 hairline. 가운뎃점·`|`·`•` 전부 금지 ([[feedback_no_bullet_separator]]).
+
+```css
+.metaDivider {
+  display: inline-block;
+  width: 1px;
+  height: calc(var(--text-xs) * 0.8);   /* Meta 텍스트 높이 대비 약간 짧게 */
+  background: var(--fg);
+  opacity: 0.2;                          /* hairline 톤 */
+  margin-inline: var(--space-1);        /* 좌우 작게 — Meta 토큰 간격은 --li-gap-meta 가 담당 */
+  vertical-align: baseline;
+}
+```
+
+핵심 원칙:
+- 색은 `--fg` × 낮은 알파 (fg 톤 유지, bg 와 섞이지 않음) — 다크/라이트 모드 전환 자동 반응.
+- 높이는 Meta 폰트 크기(`--text-xs`) 기준 상대값 — Density 축 스왑에 자동 반응.
+- 좌우 margin 은 `--space-1` 로 고정, Meta 토큰 간 가로 gap 은 상위 Meta wrapper 의 `gap` (`--li-gap-meta`)이 담당.
+
 ## Props 시그니처
 ```tsx
 <ListItem

package/assets/prompts/components/topbar.md

@@ -17,6 +17,7 @@
 - zone 밖에 **자식을 바로 넣지 않는다**. `<Topbar><Breadcrumb/>...</Topbar>` 같은 구조 금지 — 반드시 Leading/Center/Trailing 중 하나로 감싼다.
 - `h1`·큰 hero head·환영 메시지("good morning, …")·페이지 섹션 타이틀을 Topbar 안에 넣지 않는다 — Topbar는 **얇은 축**이고 큰 타이포가 들어가는 순간 `align-items` 전쟁이 벌어진다. 이걸 로컬 CSS로 때우는 순간(`align-items: flex-start`, `padding-bottom` override 등) Topbar의 "축" 약속이 깨지고, 아래 body와의 수직 리듬도 어긋난다. hero는 body의 첫 섹션으로 꺼낸다.
 - 수직 스택(eyebrow + title 세로 두 줄 같은 조합)을 Topbar 안에 넣지 않는다. 수직 리듬은 body의 섹션 head에서.
+- **[HARD] Topbar 안 IdentityButton 에 `sub` prop 금지** ([[feedback_topbar_single_line_identity]]) — 2줄 모드가 Topbar "얇은 축" 리듬을 깬다. 2줄이 필요하다 느껴지면 자리 자체가 틀림: 콘텐츠 소속감이 필요한 자리면 PageHeader(body 안), 네비게이션 소속감이면 Sidebar.Footer 로 옮긴다.
 - 알림·검색·Breadcrumb 외의 **콘텐츠**(KPI·요약·공지 문구)를 Topbar에 끼우지 않는다. 그건 body hero 섹션 또는 Callout의 자리.
 - Topbar에 로컬 `padding`·`align-items`를 override해서 "큰 요소 끼운 걸 수습"하지 않는다 — 수습이 필요한 순간 그 요소가 Topbar의 자리가 아니라는 신호.
 - 자체 bg/border/shadow 추가 금지 — AppFrame variant가 쥐고 있는 자리.

package/assets/prompts/primitives/scroll.md

@@ -38,12 +38,19 @@
 
 ### 스크롤바 시각 정책 (전역, globals.css)
 
+핵심은 **overlay 방식 전용** — 스크롤바는 콘텐츠 위에 뜨기만 하고 **공간을 먹지 않는다**. 공간을 먹는 "고정 스크롤바" 는 다크 모드에서 OS·브라우저 조합이 트랙·코너를 흰색으로 강제 렌더해 그 자리가 하얗게 뜨는 함정이 있어 영구 금지 ([[feedback_scrollbar_no_fixed_track]]).
+
 - 평상시: thumb 투명 → 스크롤바 자리는 있지만 안 보임 (overlay)
 - 부모 `:hover` 또는 `:focus-within`: thumb에 `--border-strong` 페이드 인
 - thumb `:hover`: `--fg-muted`로 진해짐
-- 두께: `--scrollbar-size` 토큰 (Density 축 영향 없음, 고정)
+- 두께: `--scrollbar-size` 토큰 — overlay 두께이지 공간 할당 아님. 커지면 overlay 가 더 두껍게 뜰 뿐, 콘텐츠는 안 밀림.
 - macOS 방식(사용 중일 때만 얇게 노출) — Notion/Linear/Figma 스타일
 
+#### Don't (스크롤바)
+- `scrollbar-gutter: stable` 로 트랙 공간 미리 확보하기 — 그게 "고정 스크롤바" 다.
+- 컴포넌트/페이지에서 `::-webkit-scrollbar-*` 또는 `scrollbar-*` 를 재선언해 트랙 폭을 만들기.
+- 평상시에도 트랙·thumb 이 보이는 "always visible" 스타일. 특히 다크 모드에서 흰 띠가 뜸.
+
 ### 스크롤 페이드 (edge fade mask)
 
 스크롤로 잘려나가는 콘텐츠 경계를 부드럽게 처리. 사용자에게 "더 있음"을 암시하면서 카드 벽에 텍스트가 딱 붙는 느낌을 없앤다.

package/assets/prompts/recipes/page-header.md

@@ -14,7 +14,7 @@
 
 - eyebrow와 title 사이: `space-1`
 - title과 description 사이: `space-2`
-- 블록 전체 아래 (다음 섹션까지): `space-6` (앱 리듬) / `space-10` (랜딩 리듬)
+- **블록 전체 아래 (다음 섹션까지)의 간격은 상위 wrapper 의 `gap` 이 담당**. `space-6` (앱 리듬) / `space-10` (랜딩 리듬). PageHeader 자체는 `margin-bottom` 을 걸지 않는다 ([[feedback_page_header_no_bottom_margin]]).
 - actions는 title과 같은 row — `align-items: center`, `flex: 1 1 auto` title / `flex: 0 0 auto` actions
 
 ### Do
@@ -34,29 +34,43 @@
 서브텍스트가 애매하면 생략. 설명이 1줄 미만이면 쓰지 않는다. actions도 없으면 h1 단독으로.
 
 ### 조립 예시
+
+PageHeader → 다음 섹션 사이 간격은 **외부 wrapper 가 담당**. PageHeader 자체는 `margin-bottom` 을 걸지 않음.
+
 ```tsx
-<header className="page-header">
-  {/* eyebrow 옵션 */}
-  <div className="eyebrow">프로젝트</div>
-  <div className="title-row">
-    <h1>개발 계획·실행</h1>
-    <div className="actions">
-      <Button variant="outline" size="md">가져오기</Button>
-      <Button variant="primary" size="md">새 계획</Button>
+<div className="page-shell">
+  <header className="page-header">
+    {/* eyebrow 옵션 */}
+    <div className="eyebrow">프로젝트</div>
+    <div className="title-row">
+      <h1>개발 계획·실행</h1>
+      <div className="actions">
+        <Button variant="outline" size="md">가져오기</Button>
+        <Button variant="primary" size="md">새 계획</Button>
+      </div>
     </div>
-  </div>
-  <p className="description">
-    확정본을 선택해 개발 계획을 요청하고, 계획과 작업 범위를 승인한 뒤 실행하세요.
-  </p>
-</header>
+    <p className="description">
+      확정본을 선택해 개발 계획을 요청하고, 계획과 작업 범위를 승인한 뒤 실행하세요.
+    </p>
+  </header>
+
+  {/* 다음 섹션 — gap 이 PageHeader 와 섹션 사이 간격을 공급 */}
+  <section>...</section>
+</div>
 ```
 
 ```css
+.page-shell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);   /* 앱 리듬. 랜딩이면 --space-10 */
+}
+
 .page-header {
   display: flex;
   flex-direction: column;
   gap: var(--space-1); /* eyebrow→title */
-  margin-bottom: var(--space-6);
+  /* margin-bottom 금지 — 상위 .page-shell 의 gap 이 담당 */
 }
 .page-header .title-row {
   display: flex;

package/assets/skills/ctds-wireframe/SKILL.md

@@ -99,6 +99,11 @@ description: 와이어프레임·목업·기존 페이지를 CTDS로 번역·교
 - **그룹핑 재편**: 역할이 같은 것은 하나의 Section/Card에, 다른 것은 분리.
 - **원본에 없던 CTDS 패턴 추가**: EmptyState·Toolbar·Breadcrumb 등 원본엔 없지만 CTDS 페이지에 필요한 요소는 **추가하는 게 기본**.
 - **벤더에 없는 자리는 레시피 참조**: 페이지 헤더·섹션 헤더·카드 row·메타 라인·폼 푸터·안내 배너 등 자주 등장하는 자리는 `prompts/recipes/<자리>.md`를 **반드시 열어** 토큰·구조 조합을 확인. 수제 조립로 가지 않는다 ([[ASSEMBLY]]).
+- **Sidebar 패딩 공급 계획 — 조립 코드 작성 전에** ⭐ ([[feedback_wireframe_sidebar_padding_check]]) 번역 결과에 Sidebar 가 포함되면 글로 적어서 확정하고 넘어간다:
+  - `Sidebar.Header` 안쪽 패딩은 누가 공급하는가? (벤더는 공급 안 함)
+  - `Sidebar.Body` 안 섹션 패딩은 누가 공급하는가? preset slot(`data-sidebar-slot`) vs 콘텐츠 래퍼 vs 바깥 flex 조립 중 하나로 결정.
+  - `Sidebar.Footer` 가 있으면 안쪽 패딩은 누가 공급하는가?
+  - 결정 없이 바로 조립 들어가면 메뉴·검색이 가장자리에 붙음.
 
 ## 체크리스트 — 번역 완료 전 전부 통과
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conscience-technology/ctds",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "CTDS — 하이브리드 디자인 시스템 설치 · 온보딩 CLI (shadcn식 코드 생성기)",
   "type": "module",
   "sideEffects": [
@@ -48,9 +48,9 @@
     "directory": "packages/ctds-cli"
   },
   "peerDependencies": {
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
-    "next": ">=14.0.0",
+    "react": ">=18.2.0 <20.0.0",
+    "react-dom": ">=18.2.0 <20.0.0",
+    "next": ">=14.0.0 <17.0.0",
     "@phosphor-icons/react": "^2.1.10",
     "solar-icon-set": "^2.0.1",
     "lucide-react": "^1.47.0",

package/src/commands/init.js

@@ -23,7 +23,13 @@ import { checkMissingDeps, renderInstallCmd } from "../utils/deps.js";
 import { c, step, success, warn, info, kv } from "../utils/log.js";
 import { computeFilesMap, writeMeta } from "../utils/meta.js";
 import { hasDevScript, startDevAndOpen } from "../utils/launch.js";
-import { patchGlobalsCss, patchLayoutTsx, inspectNextConfig } from "../utils/patch.js";
+import {
+  patchGlobalsCss,
+  patchLayoutTsx,
+  patchNextConfig,
+  patchPostCssConfig,
+  hasPkgDep,
+} from "../utils/patch.js";
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const CLI_PKG_PATH = join(__dirname, "..", "..", "package.json");
@@ -58,9 +64,20 @@ export async function run(args) {
   kv("경로", cwd);
   kv("app router", project.appDir);
   kv("src/ 사용", project.useSrcDir ? "yes" : "no");
+  if (project.nextVersion) kv("next", project.nextVersion);
   if (dry) kv("모드", c.yellow("dry run (쓰기 없음)"));
   console.log("");
 
+  // Next 16+는 create-next-app이 `@tailwindcss/turbopack` + `turbopack.rules["*.css"]`를
+  // 자동 생성하는데, 그 룰이 built-in Lightning CSS CSS Modules 경로를 bypass해버려
+  // `.module.css`의 class export가 전부 undefined로 깨짐. 아래 자동 패치로 Tailwind를
+  // PostCSS 경로로 옮기면 Next 15/16 모두 안전하게 작동. (아래 patchNextConfig/
+  // patchPostCssConfig가 그 역할.)
+  if (project.nextMajor != null && project.nextMajor >= 16) {
+    info(`Next.js ${project.nextMajor} 감지 — Tailwind를 PostCSS 경로로 자동 전환합니다.`);
+    console.log("");
+  }
+
   const assets = getAssetSources();
   info(`자산 소스: ${assets.mode === "bundled" ? "번들" : "로컬 레포"}`);
   console.log("");
@@ -175,15 +192,53 @@ export async function run(args) {
     });
   }
 
-  // 3-3) next.config의 Turbopack *.css 전역 룰 감지
-  // (Tailwind create-next-app 등으로 생성된 설정에서 .module.css가 undefined로 깨지는 함정)
-  const nextCheck = inspectNextConfig(cwd);
-  if (nextCheck.status === "risk") {
+  // 3-3) next.config의 turbopack.rules["*.css"] 삭제 + Tailwind를 PostCSS로 전환.
+  // Next 15 사용자는 next.config가 영향 없고 (룰이 없음), Next 16은 자동 복구.
+  const nextResult = patchNextConfig(cwd, { dry });
+  if (nextResult.status === "applied") {
+    const name = (nextResult.filePath ?? "next.config").split("/").pop();
+    step(dry ? `[dry] 패치` : `패치`, `${name} — turbopack.rules의 *.css 삭제`);
+  } else if (nextResult.status === "failed") {
+    warn(`next.config 자동 패치 실패: ${nextResult.reason}`);
     manualFallbacks.push({
-      title: `${c.cyan(nextCheck.name)}의 turbopack.rules가 *.css를 전역 처리하고 있어요. CSS Modules가 깨질 수 있으니 *.module.css 제외 룰을 추가:`,
+      title: `${c.cyan("next.config.ts")}에서 ${c.bold(`turbopack.rules["*.css"]`)} 블록을 통째로 삭제하세요.`,
       lang: "ts",
-      body: `turbopack: {\n  rules: {\n    "*.css": { loaders: [/* 기존 설정 */], as: "*.css" },\n    "*.module.css": {}, // ← CSS Modules는 Next 기본 처리로 넘김\n  },\n},`,
-      note: "증상: styles.foo가 undefined로 import됨 → 레이아웃 전부 깨짐.",
+      body: `// 삭제 전\nturbopack: {\n  rules: {\n    "*.css": { loaders: ["@tailwindcss/turbopack"], as: "*.css" },\n  },\n},\n\n// 삭제 후 — turbopack 블록 자체 제거`,
+      note: "이 룰이 Lightning CSS CSS Modules 경로를 bypass해 .module.css class를 global로 처리하게 만듦.",
+    });
+  }
+
+  // 3-4) PostCSS 설정 — Tailwind 사용 플젝에만. postcss.config이 없으면 신규 생성해
+  // Next 16 native PostCSS 처리로 Tailwind를 돌리게. @tailwindcss/turbopack 대체.
+  const hasTailwind = hasPkgDep(cwd, "tailwindcss");
+  const postCssResult = patchPostCssConfig(cwd, { dry, hasTailwind });
+  if (postCssResult.status === "applied") {
+    step(dry ? `[dry] 생성` : `생성`, `postcss.config.mjs — @tailwindcss/postcss plugin`);
+  } else if (postCssResult.status === "failed") {
+    warn(`postcss.config 자동 패치 실패: ${postCssResult.reason}`);
+    manualFallbacks.push({
+      title: `${c.cyan(postCssResult.filePath?.split("/").pop() ?? "postcss.config.mjs")}에 ${c.bold("@tailwindcss/postcss")} 플러그인을 추가:`,
+      lang: "js",
+      body: `export default {\n  plugins: { "@tailwindcss/postcss": {} },\n};`,
+    });
+  }
+
+  // 3-5) @tailwindcss/postcss 미설치 안내 (Tailwind 쓰는데 플러그인 없는 경우)
+  if (hasTailwind && !hasPkgDep(cwd, "@tailwindcss/postcss")) {
+    manualFallbacks.push({
+      title: `${c.bold("@tailwindcss/postcss")}를 설치하세요 (Tailwind가 PostCSS 경로로 작동):`,
+      lang: "bash",
+      body: `npm install -D @tailwindcss/postcss`,
+    });
+  }
+
+  // 3-6) @tailwindcss/turbopack이 설치돼 있으면 제거 안내 (자동 삭제는 npm 호출이 리스크)
+  if (hasTailwind && hasPkgDep(cwd, "@tailwindcss/turbopack")) {
+    manualFallbacks.push({
+      title: `${c.bold("@tailwindcss/turbopack")}은 더이상 필요 없어요. 제거하세요:`,
+      lang: "bash",
+      body: `npm uninstall @tailwindcss/turbopack`,
+      note: "@tailwindcss/postcss가 Turbopack native PostCSS 경로로 Tailwind를 처리합니다.",
     });
   }
 

package/src/utils/detect.js

@@ -19,10 +19,10 @@ export function detectProject(cwd) {
     return { ok: false, reason: `package.json 파싱 실패: ${e.message}` };
   }
 
-  const hasNext =
+  const nextRange =
     (pkg.dependencies && pkg.dependencies.next) ||
     (pkg.devDependencies && pkg.devDependencies.next);
-  if (!hasNext) {
+  if (!nextRange) {
     return {
       ok: false,
       reason: "package.json에 next 의존성이 없습니다. Next.js 플젝이 아닙니다.",
@@ -38,10 +38,22 @@ export function detectProject(cwd) {
     };
   }
 
+  // Next major 버전 감지. "^16.4.1" / "16.0.0" / ">=15.0.0 <17.0.0" 등 느슨히 커버.
+  // 못 뽑으면 null — 경고 없이 통과.
+  const nextMajor = parseMajor(nextRange);
+
   return {
     ok: true,
     name: pkg.name ?? "(unnamed)",
     useSrcDir,
     appDir: useSrcDir ? "src/app" : "app",
+    nextVersion: nextRange,
+    nextMajor,
   };
 }
+
+/** semver range 문자열에서 유의미한 major 숫자 하나 추출. 범위면 하한 기준. */
+function parseMajor(range) {
+  const m = String(range).match(/\d+/);
+  return m ? Number(m[0]) : null;
+}

package/src/utils/patch.js

@@ -145,41 +145,151 @@ export function patchLayoutTsx(
 }
 
 /**
- * next.config.(ts|mjs|js) 감지:
- *   turbopack.rules가 `*.css` 또는 `**\/*.css` 전역에 loader를 걸고 있는데
- *   `*.module.css` 제외 규칙이 없으면 CSS Modules import가 undefined로 깨짐.
- *   (Next create 시 Tailwind 옵션으로 생성된 설정에서 자주 발생)
+ * next.config.(ts|mjs|js) 자동 패치:
+ *   `turbopack.rules["*.css"]` 블록을 **삭제**.
  *
- * 자동 패치는 AST가 필요해 깨지기 쉬우므로 감지만 하고 수동 fallback으로 안내.
+ * 왜: Turbopack glob 매칭은 `.module.css`도 `.css`에 포함시킴.
+ *     사용자 룰이 등록되면 built-in Lightning CSS CSS Modules 경로가 bypass되고
+ *     결과가 global CSS로 처리돼 `.module.css`의 class export가 전부 undefined.
+ *     create-next-app이 `@tailwindcss/turbopack` 옵션으로 뽑은 설정이 이 함정에 걸림.
+ *     Next 16은 PostCSS를 네이티브 지원하므로 Tailwind는 postcss.config로 옮기면 됨.
  *
- * 리턴:
- *   { status: "ok" }                      — 설정 안전 or 파일 없음
- *   { status: "risk", filePath, snippet } — 전역 .css 룰은 있는데 .module.css 제외 없음
+ * 전략:
+ *   1) `"*.css":` 룰 블록을 짝맞춤 `}`로 추적해 통째 삭제 (앞뒤 콤마·공백 포함)
+ *   2) `rules: {}` 가 비어지면 `rules` 자체 제거
+ *   3) `turbopack: {}` 가 비어지면 `turbopack` 자체 제거
+ *   4) 매칭 실패하면 fail → 수동 fallback
  */
-export function inspectNextConfig(cwd) {
+export function patchNextConfig(cwd, { dry = false } = {}) {
+  const filePath = findNextConfig(cwd);
+  if (!filePath) return { status: "skipped", reason: "next.config.(ts|mjs|js) 없음." };
+
+  const before = readFileSync(filePath, "utf8");
+  const cssRuleMatch = before.match(/(["'`])(\*\*\/)?\*\.css\1\s*:\s*\{/);
+  if (!cssRuleMatch) {
+    return { status: "skipped", reason: "turbopack.rules의 *.css 룰이 없음." };
+  }
+
+  // "*.css": { ... }, ← 블록 전체 범위 추적
+  const keyStart = cssRuleMatch.index;
+  const openBrace = cssRuleMatch.index + cssRuleMatch[0].length - 1;
+  let depth = 1;
+  let closeBrace = -1;
+  for (let i = openBrace + 1; i < before.length; i++) {
+    const ch = before[i];
+    if (ch === "{") depth += 1;
+    else if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) {
+        closeBrace = i;
+        break;
+      }
+    }
+  }
+  if (closeBrace === -1) {
+    return { status: "failed", reason: "`*.css` 룰 블록 짝 `}`를 찾지 못함 — 수동 설정 필요." };
+  }
+
+  // 블록 뒤의 선택적 콤마까지 삭제 범위에 포함
+  let endExclusive = closeBrace + 1;
+  if (before[endExclusive] === ",") endExclusive += 1;
+
+  // 블록 앞의 라인 선두 공백도 함께 삭제해서 빈 라인이 남지 않게
+  let startInclusive = keyStart;
+  while (startInclusive > 0 && /[ \t]/.test(before[startInclusive - 1])) {
+    startInclusive -= 1;
+  }
+
+  let next =
+    before.slice(0, startInclusive) +
+    before.slice(endExclusive);
+
+  // 룰 삭제 결과 생긴 공백 라인 하나 정리 (연속 \n\n\n → \n\n)
+  next = next.replace(/\n[ \t]*\n[ \t]*\n/g, "\n\n");
+
+  // `rules: {}` 가 비어졌으면 `rules` 자체 제거
+  next = next.replace(/\s*rules\s*:\s*\{\s*\}\s*,?/g, "");
+
+  // `turbopack: {}` 가 비어졌으면 `turbopack` 자체 제거
+  next = next.replace(/\s*turbopack\s*:\s*\{\s*\}\s*,?/g, "");
+
+  if (next === before) {
+    return { status: "skipped", reason: "변경 사항 없음." };
+  }
+  if (dry) {
+    return { status: "applied", reason: "(dry) turbopack.rules *.css 삭제", before, after: next };
+  }
+  copyFileSync(filePath, filePath + ".bak");
+  writeFileSync(filePath, next, "utf8");
+  return {
+    status: "applied",
+    reason: "turbopack.rules의 *.css 룰 삭제 (CSS Modules 복구)",
+    filePath,
+  };
+}
+
+function findNextConfig(cwd) {
   const candidates = ["next.config.ts", "next.config.mjs", "next.config.js"];
-  let filePath = null;
+  for (const name of candidates) {
+    const abs = `${cwd}/${name}`;
+    if (existsSync(abs)) return abs;
+  }
+  return null;
+}
+
+/**
+ * postcss.config.{mjs,js,cjs,json} 자동 패치/생성:
+ *   `@tailwindcss/postcss` 플러그인을 추가해 Turbopack native PostCSS 경로로 Tailwind 처리.
+ *   `@tailwindcss/turbopack`을 쓰던 자리를 대체. 멱등.
+ *
+ * 1) 설정 파일이 하나도 없고 Tailwind가 설치돼 있으면 postcss.config.mjs 신규 생성
+ * 2) 설정 파일이 있고 `@tailwindcss/postcss` 플러그인이 이미 있으면 skip
+ * 3) 그 외 (설정 파일 있는데 플러그인 없음) → fail (사용자 수정이 안전)
+ *
+ * Tailwind 미사용 플젝에서는 skip.
+ */
+export function patchPostCssConfig(cwd, { dry = false, hasTailwind = false } = {}) {
+  if (!hasTailwind) {
+    return { status: "skipped", reason: "Tailwind 미사용 — PostCSS 설정 불필요." };
+  }
+
+  const candidates = ["postcss.config.mjs", "postcss.config.js", "postcss.config.cjs", "postcss.config.json"];
   for (const name of candidates) {
     const abs = `${cwd}/${name}`;
     if (existsSync(abs)) {
-      filePath = abs;
-      break;
+      const src = readFileSync(abs, "utf8");
+      if (/@tailwindcss\/postcss/.test(src)) {
+        return { status: "skipped", reason: `${name}에 @tailwindcss/postcss 이미 등록됨.` };
+      }
+      return {
+        status: "failed",
+        reason: `${name}이 있는데 @tailwindcss/postcss 없음 — 수동 추가 필요.`,
+        filePath: abs,
+      };
     }
   }
-  if (!filePath) return { status: "ok" };
-
-  const src = readFileSync(filePath, "utf8");
-  // turbopack 블록 안에 .css 전역 룰이 있는지 (loaders 지정)
-  const hasTurbopackCssRule =
-    /turbopack\s*:\s*\{[\s\S]*?rules\s*:\s*\{[\s\S]*?["'`](?:\*\*\/)?\*\.css["'`]\s*:/.test(
-      src,
-    );
-  if (!hasTurbopackCssRule) return { status: "ok" };
 
-  const hasModuleExclusion = /["'`](?:\*\*\/)?\*\.module\.css["'`]\s*:\s*(?:\[\s*\]|false)/.test(src);
-  if (hasModuleExclusion) return { status: "ok" };
+  // 설정 없음 → 신규 생성
+  const newPath = `${cwd}/postcss.config.mjs`;
+  const content = `export default {\n  plugins: { "@tailwindcss/postcss": {} },\n};\n`;
+  if (dry) {
+    return { status: "applied", reason: "(dry) postcss.config.mjs 신규 생성 예정", filePath: newPath };
+  }
+  writeFileSync(newPath, content, "utf8");
+  return { status: "applied", reason: "postcss.config.mjs 신규 생성", filePath: newPath };
+}
 
-  return { status: "risk", filePath, name: filePath.split("/").pop() };
+/** `pkg.dependencies`·`pkg.devDependencies`에서 특정 이름 체크. */
+export function hasPkgDep(cwd, name) {
+  try {
+    const pkg = JSON.parse(readFileSync(`${cwd}/package.json`, "utf8"));
+    return Boolean(
+      (pkg.dependencies && pkg.dependencies[name]) ||
+        (pkg.devDependencies && pkg.devDependencies[name]),
+    );
+  } catch {
+    return false;
+  }
 }
 
 /** 파일 상단의 마지막 import 바로 아래에 line 삽입. import가 없으면 파일 최상단. */

package/assets/prompts/themes/focus.md

@@ -1,72 +0,0 @@
-#  Focus
-
-### 원칙
-데이터 밀도 중심 — 관리자 대시보드, 분석 도구, 로그 뷰어, 트레이딩 콘솔처럼 **한 화면에 많은 정보를 올려야 하고 사용자가 매일 몇 시간씩 들여다보는** 자리의 Theme. 꾸밈을 걷어내고 밀도를 올려 "읽기 좋음"에 전부를 투자한다. `spare`가 "매일 쓰는 도구의 중앙값"이라면 `focus`는 그 극단 — 밀도를 한 단계 더 올리고 브랜드 액센트를 완전히 중성화한다.
-
-### Do
-- 테이블·리스트·사이드바에 가능한 많은 행을 노출. 섹션 간 호흡은 Density가 결정하되 추가 margin은 금지.
-- 상태는 색이 아니라 **배지·형태·weight**로 먼저 전달. 색은 status(warning/danger/success/info)에만 남긴다.
-- 액션은 Toolbar·IconButton·DropdownMenu 중심. 큰 primary 버튼은 폼 제출·CTA 자리에만.
-- 모든 숫자·금액 셀은 좌측 정렬 유지 — [[feedback_no_right_align_numbers]] 그대로.
-- 사이드바·탑바는 작은 size(sm)로 밀도를 더 쪼은다.
-
-### Don't
-- 마케팅·랜딩·온보딩에 쓰지 않는다. 액센트가 없어 전환이 안 터진다.
-- "비어 보여서" 간격이나 장식을 추가하지 않는다. compact density는 의도된 밀도.
-- `vivid`/`pastel` palette로 override하지 않는다 — 밀도가 높을수록 색 노이즈가 피로를 가속.
-- 브랜드 identity를 색으로 보여야 하는 자리엔 이 Theme이 맞지 않음. [[themes/spare]]나 [[themes/expressive]]로.
-
-### Fallback
-축 preset은 아래 표 값으로 고정. palette만 브랜드 선호에 따라 `mono` ↔ `standard` 사이 선택 가능.
-
-### 관련
-- [[themes/_SCHEMA]] — Theme 스키마
-- [[themes/spare]] — "매일 쓰는 도구의 중앙값". 밀도를 한 단계 낮춘 버전.
-- [[axes/palette]] — `mono` 값과의 상호작용(아이콘·포커스·nav-active 전부 중성 fg 톤).
-- [[axes/density]] — `compact` 값 전용 프리셋.
-
----
-
-### Signature
-이 Theme IS "매일 몇 시간씩 머무는 작업실" UI. 데이터 밀도가 디자인의 1원칙이고, 꾸밈은 피로 가속기라는 전제 위에 있다. 터미널의 자제력을 웹 앱의 레이어에 끌어들인 결과물 — not minimalism, but engineered legibility.
-
-### Preset
-
-| Axis | Value | Why |
-|---|---|---|
-| [[axes/mode]] | `dark` | 장시간 사용 환경에서 피로 최소화. light override는 소비자 선호. |
-| [[axes/palette]] | `mono` | 브랜드 액센트 완전 제거. 아이콘·포커스·nav-active 전부 fg 톤. status만 유색 유지. |
-| [[axes/shape]] | `crisp` | 격자 자체가 신호. soft radius는 밀도 환경에서 "뭉개짐"으로 읽힌다. |
-| [[axes/density]] | `compact` | 핵심 축. 행 간격·컨트롤 높이가 한 단계 좁아진다. |
-| [[axes/font]] | `lang=ko` | 한국어 기본. 폰트 스택은 Font 축이 담당. |
-| [[axes/icon]] | `phosphor` | regular/fill 매트릭 완전 매칭. 밀도 환경에선 아이콘 식별이 중요. |
-| [[axes/motion]] | `calm` | 애니메이션 최소화 — 눈이 머무는 시간이 길어 bounce/overshoot가 피로. none은 접근성 승인된 사용자용. |
-
-### Layout
-2-column 또는 3-pane이 디폴트 — 좌측 사이드바(sm size) + 중앙 작업 영역 + 우측 디테일 패널. 한 화면에 가능한 많은 정보를 수평으로 분할. 1-column 중심 레이아웃(블로그·마케팅)엔 맞지 않음.
-
-### Imagery
-없음. 데이터와 아이콘만. 사진·일러스트는 이 Theme의 성격과 어긋남 — 작업 중 시선을 분산시킴. 예외: 사용자 아바타·조직 로고 같은 identity 식별자.
-
-### Decoration
-없음. hairline과 bg-subtle의 톤 차이만으로 그룹 구분. gradient·noise·pattern 금지. 이 Theme에서 "장식은 피로"의 공리.
-
-### Negative
-- no primary accent color — status 외 모든 색은 중성 fg 톤
-- no large hero section — "눈에 띄는 한 자리"가 없는 게 디폴트
-- no illustrations · no photography — 작업 영역에 아트는 노이즈
-- no soft radius — crisp 격자가 밀도의 전제
-- no bouncy motion — overshoot는 매일 보기 피곤
-
-### Override
-전부 자유. 사용자가 "focus에서 shape만 soft로"처럼 지시하면 그대로 적용. 책임은 사용자. Theme 선언을 벗어난 조합의 완성도는 보증하지 않는다 ([[PRINCIPLES]] §7).
-
-### Known Gaps
-- 랜딩·마케팅 자리는 커버 안 함 — [[themes/expressive]]로.
-- 모바일 터치 중심 UX는 커버 안 함 — compact density는 데스크톱·태블릿 가로 전제.
-- 색으로 identity를 전달해야 하는 브랜드엔 맞지 않음 — mono가 디폴트이므로.
-
-### Iteration Guide
-1. 밀도를 더 올리고 싶으면 size prop(xs/sm)으로 가되, density 축 자체는 compact에서 더 내릴 수 없다 — compact이 최종 밀도.
-2. palette를 `mono`에서 `standard` 또는 `calm`으로 올리는 override는 허용. 그 외(vivid/pastel)는 Theme과 상충.
-3. motion을 bouncy로 올리는 override는 **금지** — focus의 핵심 자제가 깨짐.