@conscience-technology/ctds 0.4.0 → 0.4.2

package/assets/components/Kanban/Kanban.tsx

@@ -0,0 +1,371 @@
+"use client";
+
+/**
+ * Kanban — 가로 트랙(Board) + 컬럼(Column) + 카드(Card)의 3-레벨 compound.
+ *
+ * 레벨별 축:
+ *   Kanban (board)
+ *     columnWidth  — 컬럼 1장 width. 기본 var(--kanban-column-width) = 320px
+ *     gap          — 컬럼 사이 가로 간격. 기본 space-3
+ *     scroll       — 가로 스크롤 on/off. 기본 true. false면 flex-wrap으로 반응형.
+ *
+ *   Kanban.Column
+ *     chrome       — line (border) | filled (bg-muted) | plain (chrome 없음)
+ *     accent       — none | dot | bar. 상태 색 신호 위치.
+ *     tone         — neutral | primary | success | warning | danger | info
+ * *     layout       — stack (기본) | wrap
+ *                    · stack(권장): header만 자체 chrome을 가지고 카드 스택은
+ *                      chrome 없이 그 아래 자유롭게 쌓이는 "얹어진" 형태.
+ *                    · wrap(비권장): header와 카드가 한 쉘 안에 함께 들어있는
+ *                      "감싸는" 형태. 전통적 칸반이지만 카드가 그릇에 갇혀 답답함.
+ *
+ *   Kanban.Card
+ *     content은 Card.Cover · Card.Header · Card.Title · Card.Description
+ *                  · Card.Meta · Card.Footer slot으로 자유 조립.
+ *     interactive  — href/onClick 자동 hover (ListItem과 동일)
+ *
+ * DnD는 호출부가 바깥에서 dnd-kit로 감싸는 opt-in. 시각 먼저, 상호작용은 선택.
+ */
+
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+  type Ref,
+} from "react";
+
+import styles from "./Kanban.module.css";
+
+/* ──────────────────────────────────────────────────────
+   Kanban (board)
+   ──────────────────────────────────────────────────── */
+
+export type KanbanProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** 컬럼 1장 width. CSS 길이 문자열(e.g. "280px", "320px"). */
+  columnWidth?: string;
+  /** 컬럼 사이 가로 간격. CSS 길이. 기본 var(--space-3). */
+  gap?: string;
+  /** 가로 스크롤. 기본 true. false면 flex-wrap으로 반응형. */
+  scroll?: boolean;
+  children?: ReactNode;
+};
+
+const KanbanRoot = forwardRef<HTMLDivElement, KanbanProps>(function Kanban(
+  { columnWidth, gap, scroll = true, className, style, children, ...rest },
+  ref,
+) {
+  const rootClass = [
+    styles.board,
+    scroll ? styles.scroll : styles.noscroll,
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const cssVars: Record<string, string> = {};
+  if (columnWidth) cssVars["--kanban-column-width"] = columnWidth;
+  if (gap) cssVars["--kanban-column-gap"] = gap;
+
+  return (
+    <div
+      ref={ref}
+      className={rootClass}
+      style={{ ...cssVars, ...style }}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+KanbanRoot.displayName = "Kanban";
+
+/* ──────────────────────────────────────────────────────
+   Column
+   ──────────────────────────────────────────────────── */
+
+export type KanbanColumnChrome = "line" | "filled" | "plain";
+export type KanbanColumnAccent = "none" | "dot";
+export type KanbanColumnTone =
+  | "neutral"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info";
+export type KanbanColumnLayout = "wrap" | "stack";
+
+export type KanbanColumnProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+  title?: ReactNode;
+  count?: number | string;
+  action?: ReactNode;
+  footer?: ReactNode;
+  chrome?: KanbanColumnChrome;
+  accent?: KanbanColumnAccent;
+  tone?: KanbanColumnTone;
+  layout?: KanbanColumnLayout;
+  children?: ReactNode;
+};
+
+const Column = forwardRef<HTMLElement, KanbanColumnProps>(function KanbanColumn(
+  {
+    title,
+    count,
+    action,
+    footer,
+    chrome = "line",
+    accent = "none",
+    tone = "neutral",
+    layout = "stack",
+    className,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const cls = [
+    styles.column,
+    styles[`layout-${layout}`],
+    styles[`chrome-${chrome}`],
+    styles[`accent-${accent}`],
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const showHeader =
+    title !== undefined ||
+    count !== undefined ||
+    accent !== "none" ||
+    action !== undefined;
+
+  return (
+    <div
+      ref={ref as Ref<HTMLDivElement>}
+      className={cls}
+      data-tone={tone}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
+      {showHeader && (
+        <div className={styles.columnHeader}>
+          {accent !== "none" && (
+            <span className={styles.accentMark} aria-hidden data-accent={accent} />
+          )}
+          {title !== undefined && (
+            <span className={styles.columnTitle}>{title}</span>
+          )}
+          {count !== undefined && (
+            <span className={styles.columnCount}>{count}</span>
+          )}
+          {action !== undefined && (
+            <span className={styles.columnAction}>{action}</span>
+          )}
+        </div>
+      )}
+      <div className={styles.columnBody}>{children}</div>
+      {footer !== undefined && (
+        <div className={styles.columnFooter}>{footer}</div>
+      )}
+    </div>
+  );
+});
+Column.displayName = "Kanban.Column";
+
+/* ──────────────────────────────────────────────────────
+   Card
+   ──────────────────────────────────────────────────── */
+
+type CardCommon = {
+  children?: ReactNode;
+};
+
+type CardDivProps = CardCommon &
+  Omit<HTMLAttributes<HTMLDivElement>, keyof CardCommon> & { href?: undefined };
+
+type CardAnchorProps = CardCommon &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof CardCommon> & {
+    href: string;
+  };
+
+export type KanbanCardProps = CardDivProps | CardAnchorProps;
+
+const Card = forwardRef<HTMLElement, KanbanCardProps>(function KanbanCard(
+  props,
+  ref,
+) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props as CardCommon & { className?: string } & Record<string, unknown>;
+
+  const isLink = typeof (props as CardAnchorProps).href === "string";
+  const isInteractive =
+    isLink ||
+    typeof (props as HTMLAttributes<HTMLElement>).onClick === "function";
+
+  const cls = [
+    styles.card,
+    isInteractive ? styles.cardInteractive : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (isLink) {
+    return (
+      <a
+        ref={ref as Ref<HTMLAnchorElement>}
+        className={cls}
+        {...(rest as AnchorHTMLAttributes<HTMLAnchorElement>)}
+        href={(props as CardAnchorProps).href}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <div
+      ref={ref as Ref<HTMLDivElement>}
+      className={cls}
+      {...(rest as HTMLAttributes<HTMLDivElement>)}
+    >
+      {children}
+    </div>
+  );
+});
+Card.displayName = "Kanban.Card";
+
+/* ── Card slots ─────────────────────────────────────── */
+
+type DivProps = HTMLAttributes<HTMLDivElement>;
+
+const CardCover = forwardRef<HTMLDivElement, DivProps>(function KanbanCardCover(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={[styles.cover, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+CardCover.displayName = "Kanban.Card.Cover";
+
+const CardHeader = forwardRef<HTMLDivElement, DivProps>(function KanbanCardHeader(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={[styles.cardHeader, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+CardHeader.displayName = "Kanban.Card.Header";
+
+const CardTitle = forwardRef<HTMLDivElement, DivProps>(function KanbanCardTitle(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={[styles.cardTitle, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+CardTitle.displayName = "Kanban.Card.Title";
+
+const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function KanbanCardDescription({ className, children, ...rest }, ref) {
+    return (
+      <p
+        ref={ref}
+        className={[styles.cardDescription, className ?? ""]
+          .filter(Boolean)
+          .join(" ")}
+        {...rest}
+      >
+        {children}
+      </p>
+    );
+  },
+);
+CardDescription.displayName = "Kanban.Card.Description";
+
+const CardMeta = forwardRef<HTMLDivElement, DivProps>(function KanbanCardMeta(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={[styles.cardMeta, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+CardMeta.displayName = "Kanban.Card.Meta";
+
+const CardFooter = forwardRef<HTMLDivElement, DivProps>(function KanbanCardFooter(
+  { className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={[styles.cardFooter, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+CardFooter.displayName = "Kanban.Card.Footer";
+
+/* ──────────────────────────────────────────────────────
+   compound export
+   ──────────────────────────────────────────────────── */
+
+type CardCompound = typeof Card & {
+  Cover: typeof CardCover;
+  Header: typeof CardHeader;
+  Title: typeof CardTitle;
+  Description: typeof CardDescription;
+  Meta: typeof CardMeta;
+  Footer: typeof CardFooter;
+};
+
+const KanbanCard = Card as CardCompound;
+KanbanCard.Cover = CardCover;
+KanbanCard.Header = CardHeader;
+KanbanCard.Title = CardTitle;
+KanbanCard.Description = CardDescription;
+KanbanCard.Meta = CardMeta;
+KanbanCard.Footer = CardFooter;
+
+type KanbanCompound = typeof KanbanRoot & {
+  Column: typeof Column;
+  Card: typeof KanbanCard;
+};
+
+const Kanban = KanbanRoot as KanbanCompound;
+Kanban.Column = Column;
+Kanban.Card = KanbanCard;
+
+export { Kanban };

package/assets/components/Kanban/index.ts

@@ -0,0 +1,10 @@
+export { Kanban } from "./Kanban";
+export type {
+  KanbanProps,
+  KanbanColumnProps,
+  KanbanColumnChrome,
+  KanbanColumnAccent,
+  KanbanColumnTone,
+  KanbanColumnLayout,
+  KanbanCardProps,
+} from "./Kanban";

package/assets/components/PageHeader/PageHeader.module.css

@@ -0,0 +1,109 @@
+/* Root ─────────────────────────────────────────────────
+   grid-area로 slot 배치 — DOM 순서와 무관하게 Title+Actions가 같은 줄에
+   서고 Eyebrow/Lead/Meta는 그 위아래로 자동 정렬된다. 이 트릭이 compound
+   API의 '자식 생략 가능' 요구와 맞물려서 가장 안정적. 빈 slot은 grid가
+   공간을 안 먹음(자식이 없는 행은 암묵적으로 0).
+
+   세로 간격(eyebrow→title→lead→meta)은 row-gap으로.
+   PageHeader → 다음 섹션 간격은 **상위 wrapper gap이 담당** — 벤더가
+   margin-bottom으로 공급하지 않는다. margin trick 금지, group wrapper + gap만
+   ([[feedback_page_differential_rhythm]], [[feedback_no_double_spacing]]). */
+.root {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    "eyebrow eyebrow"
+    "title   actions"
+    "lead    lead"
+    "meta    meta";
+  row-gap: var(--space-1);
+  align-items: start;
+}
+
+/* Size — 타이포 사이즈만 스왑. 외부 간격은 소비처 상위 gap. */
+.root[data-size="sm"] .title {
+  font-size: var(--text-xl);
+  line-height: var(--lh-xl);
+}
+.root[data-size="sm"] .lead {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+}
+
+.root[data-size="md"] .title {
+  font-size: var(--text-2xl);
+  line-height: var(--lh-2xl);
+}
+.root[data-size="md"] .lead {
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+}
+
+.root[data-size="lg"] .title {
+  font-size: var(--text-3xl);
+  line-height: var(--lh-3xl);
+}
+.root[data-size="lg"] .lead {
+  font-size: var(--text-base);
+  line-height: var(--lh-base);
+}
+
+/* Eyebrow ──────────────────────────────────────────────
+   작은 상단 라벨. muted + small, uppercase/wide tracking 금지. */
+.eyebrow {
+  grid-area: eyebrow;
+  color: var(--fg-subtle);
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Title ─────────────────────────────────────────────────
+   semibold, letter-spacing은 globals의 .page-title 리듬 승계. */
+.title {
+  grid-area: title;
+  color: var(--fg);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-tighter);
+  margin: 0;
+  min-width: 0;
+}
+
+/* Lead ──────────────────────────────────────────────────
+   muted 본문. */
+.lead {
+  grid-area: lead;
+  color: var(--fg-muted);
+  margin: 0;
+  max-width: 72ch;
+}
+
+/* Meta ──────────────────────────────────────────────────
+   Badge·날짜·author 등. 가로 묶음, gap은 space-2 (작은 컴포넌트 사이 규칙은
+   이웃 간 긴밀한 묶음에 적용되고, meta는 서로 다른 '정보 조각'이라 space-2).
+
+   row-gap(space-1)이 title↔lead에 맞춰 꽤 좁아져 있는데, Meta는 '본문'이 아니라
+   '별도 정보 묶음'이라 그 간격이 어색하게 좁다. 윗 slot(lead/title/eyebrow 중
+   존재하는 것)과의 사이만 추가 margin-top으로 벌림. */
+.meta {
+  grid-area: meta;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  color: var(--fg-muted);
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  margin-top: var(--space-2);
+}
+
+/* Actions ───────────────────────────────────────────────
+   Title과 같은 줄, 오른쪽 끝에 pin.
+   자식 사이 gap은 작은 컴포넌트 간 규칙대로 space-1. */
+.actions {
+  grid-area: actions;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  align-self: center;
+}

package/assets/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { cn } from "../_cn";
+import styles from "./PageHeader.module.css";
+
+/* Root ─────────────────────────────────────────────────
+   페이지 body 첫 블록의 head. "이 페이지가 뭔지"를 담는 자리.
+   Topbar(chrome)와 역할이 다르다 — Topbar는 지금 어디(breadcrumb)·공용 액션,
+   PageHeader는 h1·eyebrow·lead·메타·페이지 액션.
+
+   레이아웃은 수직 스택이지만 Actions가 들어오면 Title과 같은 가로줄로
+   자동 분리 (가장 흔한 패턴). Lead/Meta는 Title 아래에 계속 수직. */
+
+export type PageHeaderSize = "sm" | "md" | "lg";
+
+export interface PageHeaderProps extends HTMLAttributes<HTMLElement> {
+  size?: PageHeaderSize;
+}
+
+const PageHeaderRoot = forwardRef<HTMLElement, PageHeaderProps>(function PageHeaderRoot(
+  { size = "md", className, children, ...rest },
+  ref,
+) {
+  return (
+    <header
+      ref={ref}
+      className={cn(styles.root, className)}
+      data-size={size}
+      {...rest}
+    >
+      {children}
+    </header>
+  );
+});
+
+/* Eyebrow — 선택. 작은 상단 라벨("Overview · Billing" 같은 카테고리 표시).
+   uppercase + wide tracking 조합은 금지, muted 색 + 작은 사이즈로만. */
+const PageHeaderEyebrow = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function PageHeaderEyebrow({ className, children, ...rest }, ref) {
+    return (
+      <div ref={ref} className={cn(styles.eyebrow, className)} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+/* Title — 필수. <h1> 자동.
+   Actions가 같은 부모 안에 있으면 titleRow에 묶여 가로 분리된다. */
+const PageHeaderTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  function PageHeaderTitle({ className, children, ...rest }, ref) {
+    return (
+      <h1 ref={ref} className={cn(styles.title, className)} {...rest}>
+        {children}
+      </h1>
+    );
+  },
+);
+
+/* Lead — 선택. muted 본문 1~2문장. em dash·ellipsis 금지. */
+const PageHeaderLead = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function PageHeaderLead({ className, children, ...rest }, ref) {
+    return (
+      <p ref={ref} className={cn(styles.lead, className)} {...rest}>
+        {children}
+      </p>
+    );
+  },
+);
+
+/* Meta — 선택. Badge·날짜·author 등 작은 메타 조각 가로 묶음.
+   gap은 space-2 (meta 토큰 사이는 작은 컴포넌트 사이가 아니라 '정보 묶음' 사이). */
+const PageHeaderMeta = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function PageHeaderMeta({ className, children, ...rest }, ref) {
+    return (
+      <div ref={ref} className={cn(styles.meta, className)} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+/* Actions — 선택. Title과 같은 줄로 오른쪽 끝에 pin.
+   자식 사이 gap은 작은 컴포넌트 간 규칙대로 space-1. */
+const PageHeaderActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function PageHeaderActions({ className, children, ...rest }, ref) {
+    return (
+      <div ref={ref} className={cn(styles.actions, className)} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+type PageHeaderComponent = typeof PageHeaderRoot & {
+  Eyebrow: typeof PageHeaderEyebrow;
+  Title: typeof PageHeaderTitle;
+  Lead: typeof PageHeaderLead;
+  Meta: typeof PageHeaderMeta;
+  Actions: typeof PageHeaderActions;
+};
+
+const PageHeader = PageHeaderRoot as PageHeaderComponent;
+PageHeader.Eyebrow = PageHeaderEyebrow;
+PageHeader.Title = PageHeaderTitle;
+PageHeader.Lead = PageHeaderLead;
+PageHeader.Meta = PageHeaderMeta;
+PageHeader.Actions = PageHeaderActions;
+
+export { PageHeader };

package/assets/components/PageHeader/index.ts

@@ -0,0 +1,2 @@
+export { PageHeader } from "./PageHeader";
+export type { PageHeaderProps, PageHeaderSize } from "./PageHeader";

package/assets/components/index.ts

@@ -34,6 +34,7 @@ export * from "./FileIcon";
 export * from "./FilterButton";
 export * from "./GalleryItem";
 export * from "./GeneratedImage";
+export * from "./Hint";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./IdentityButton";

package/assets/prompts/components/hint.md

@@ -0,0 +1,57 @@
+# Hint
+
+### 원칙
+흐름 속에 스며드는 **참고 한 줄~두 줄**. 아이콘 하나와 muted 텍스트로만 구성된 가장 가벼운 안내. 페이지 폭을 차지하지 않고, 톤도 신호도 띠지 않는다. 자리의 성격은 "이 자리에서 알아야 할 것"의 각주 — [[components/callout]]처럼 액션으로 유도하지 않고, [[recipes/page-banner]]처럼 상태를 외치지 않는다.
+
+### Do
+- 아이콘은 **1개 고정**, text는 1~2줄. 길어지면 Callout 또는 별도 블록으로.
+- 톤 색 금지 — `fg-muted` 하나만. tone·variant 축 없음.
+- 아이콘 수직 정렬은 **첫 줄 캡 하이트 중앙** — flex align-items 트릭 대신 `display: inline` + `vertical-align`로 line box 안에 흘려넣기 (내부 구현 책임).
+- 폼 필드 helper text는 [[components/form-field]]의 자체 helper를 쓴다. Hint는 **블록 단위 안내** — 폼 밖, 섹션 안 설명.
+
+### Don't
+- [HARD] 액션 버튼을 넣지 않는다 — 액션이 필요하면 [[components/callout]].
+- [HARD] 톤 신호(warning·destructive·success 배경)를 띠지 않는다 — 신호가 필요하면 [[components/callout]] 또는 [[recipes/page-banner]].
+- [HARD] 배경 + 테두리 금지 ([[PRINCIPLES]] §5b). Hint는 **배경·테두리 둘 다 없음**이 기본.
+- [SOFT] 3줄 이상 텍스트 금지 — 길어지면 섹션 자체가 "안내 블록"이 돼야 함. Hint는 각주 성격 유지.
+- [SOFT] 리스트·강조 같은 서식 금지. 평문만.
+
+### Fallback
+아이콘이 애매하면 `info` 또는 `question`. 자리가 코드/기술 설명이면 `brackets-square`.
+
+### 관련
+- [[components/callout]] — 톤·액션 있는 안내 블록. Hint는 액션 없음.
+- [[recipes/page-banner]] — 페이지 폭 상태 바. Hint는 흐름 속 각주.
+- [[components/form-field]] — 폼 helper text 전용 자리.
+- [[tokens/color]] — fg-muted
+- [[tokens/typography]] — text-sm 기본, line-height 1.6
+
+### Props 시그니처
+```tsx
+<Hint
+  icon={IconName}        // default: "info"
+  size="sm | md"         // default: "sm" (앱 리듬 기본)
+>{children}</Hint>
+```
+
+### Variant 매트릭스
+variant 축 **없음**. Hint는 "참고 각주" 성격 하나만 — 톤·강도 다 제거해서 가장 조용함.
+
+| size | font-size | line-height | icon size | 자리 |
+|---|---|---|---|---|
+| `sm` | `--text-sm` | 1.6 | 16 | 섹션 안 각주 (기본) |
+| `md` | `--text-base` | 1.6 | 20 | 페이지 폭 참고 블록 |
+
+### 조합 예시
+```tsx
+<Hint icon="brackets-square">
+  문서 등록은 추출·정리까지 자동 처리합니다. AI 작업 계획을 요청하고 승인한 뒤 실행을 요청하면,
+  연결된 실행기가 코드 변경안과 테스트 결과를 작성합니다.
+</Hint>
+```
+
+### 구현 노트 (벤더 코드에만 적용)
+아이콘 수직 정렬이 **반복 함정**이라 명시:
+- flex `align-items: center/flex-start` + `margin-top` 보정 조합은 **금지** — line-height 바뀔 때마다 어긋남
+- 내부 구현은 **`display: inline` + `vertical-align: text-bottom`** (또는 유사 line-box 정렬) 조합으로 자동 정렬
+- line-height는 `1.6` 고정 (muted 다줄 가독성 — [[tokens/spacing]] "텍스트 gap·line-height" 기본 1.5보다 한 눈금 높음)