@conscience-technology/ctds 0.3.4 → 0.4.1

package/assets/components/Icon/Icon.tsx

@@ -3,12 +3,13 @@
 /**
  * 의미 기반 Icon 컴포넌트.
  *
- * 설계 원칙 — "family별 독립 세트":
- *   - 각 family(phosphor/solar/lucide)는 자기만의 아이콘 세트를 가진다.
- *   - 서로 다른 라이브러리 간의 "의미 매핑"은 하지 않는다.
- *     (search 하나를 phosphor·solar·lucide 세 군데에서 억지로 연결하지 않음)
- *   - 활성 family에 해당 이름이 없으면 그 family 전용 placeholder 아이콘을 렌더.
- *     (레이아웃 공간 유지 + 축 전환 시 "어떤 아이콘이 그 family엔 없다"는 사실이 시각적으로 드러남)
+ * 설계 원칙 — "phosphor 기준 전면 매핑":
+ *   - phosphor를 기준 세트로 삼고, solar/lucide는 가능한 한 의미가 가장 가까운
+ *     아이콘으로 1:1 매핑한다. family 축을 바꿔도 "그림이 비는" 자리가 생기지 않도록.
+ *   - 라이브러리에 적절한 분리 아이콘이 없으면 "수렴 매핑"을 허용한다
+ *     (예: solar에 자동차 아이콘이 없음 → truck/car가 같은 Truck으로 수렴).
+ *     이건 라이브러리 한계라는 사실을 받아들이는 거지, 설계 결함이 아님.
+ *   - 매핑 자체가 아예 없는 경우에만 family 전용 placeholder("빗금 사각형")를 렌더.
  *
  * weight(regular/fill) 반응:
  *   phosphor → weight prop으로 반응
@@ -390,6 +391,33 @@ import {
   MedalRibbonStarLinear as SoMedalL, MedalRibbonStarBold as SoMedalB,
   CrownLinear as SoCrownL, CrownBold as SoCrownB,
   LeafLinear as SoLeafL, LeafBold as SoLeafB,
+  // --- 수렴 분리용 추가 ---
+  SmileCircleLinear as SoSmileyHappyL, SmileCircleBold as SoSmileyHappyB,
+  ConfoundedCircleLinear as SoSmileyMehL, ConfoundedCircleBold as SoSmileyMehB,
+  SadCircleLinear as SoSmileySadL, SadCircleBold as SoSmileySadB,
+  LockUnlockedLinear as SoLockOpenL, LockUnlockedBold as SoLockOpenB,
+  GarageLinear as SoFactoryL, GarageBold as SoFactoryB,
+  CompassBigLinear as SoNavigationL, CompassBigBold as SoNavigationB,
+  MinimizeSquareLinear as SoCornersInL, MinimizeSquareBold as SoCornersInB,
+  MaximizeSquareLinear as SoCornersOutL, MaximizeSquareBold as SoCornersOutB,
+  RefreshCircleLinear as SoArrowsClockwiseL, RefreshCircleBold as SoArrowsClockwiseB,
+  LinkMinimalisticLinear as SoLinkSimpleL, LinkMinimalisticBold as SoLinkSimpleB,
+  RoundAltArrowDownLinear as SoCaretCircleDownL, RoundAltArrowDownBold as SoCaretCircleDownB,
+  DoubleAltArrowUpLinear as SoArrowsVerticalL, DoubleAltArrowUpBold as SoArrowsVerticalB,
+  CheckSquareLinear as SoCheckSquareL, CheckSquareBold as SoCheckSquareB,
+  ShieldCheckLinear as SoSealCheckL, ShieldCheckBold as SoSealCheckB,
+  DocumentsLinear as SoCopySimpleL, DocumentsBold as SoCopySimpleB,
+  Widget6Linear as SoGridNineL, Widget6Bold as SoGridNineB,
+  Widget3Linear as SoTableL, Widget3Bold as SoTableB,
+  WidgetAddLinear as SoGridFourL, WidgetAddBold as SoGridFourB,
+  ChecklistLinear as SoTabsL, ChecklistBold as SoTabsB,
+  MenuDotsCircleLinear as SoDotsThreeOutlineL, MenuDotsCircleBold as SoDotsThreeOutlineB,
+  SortFromTopToBottomLinear as SoCaretUpDownAltL, SortFromTopToBottomBold as SoCaretUpDownAltB,
+  BanknoteLinear as SoCoinsL, BanknoteBold as SoCoinsB,
+  DocumentLinear as SoArticleL, DocumentBold as SoArticleB,
+  Planet2Linear as SoAirplaneAltL, Planet2Bold as SoAirplaneAltB,
+  HandHeartLinear as SoHandWavingL, HandHeartBold as SoHandWavingB,
+  SquareShareLineLinear as SoStepsL, SquareShareLineBold as SoStepsB,
 } from "solar-icon-set";
 
 // Lucide ──────────────────────────────────────────────────────────
@@ -584,6 +612,17 @@ import {
   Flower as LuFlower,
   Leaf as LuLeaf,
   Trees as LuTree,
+  // --- 수렴 분리용 추가 (아래 세트에서만 사용) ---
+  CalendarRange as LuCalendarBlank,
+  CalendarDays as LuCalendarDots,
+  MessagesSquare as LuChatCenteredDots,
+  Ellipsis as LuDotsThreeOutline,
+  Newspaper as LuArticle,
+  FolderClosed as LuFolderSimple,
+  BadgeCheck as LuSealBadge,
+  SquareDashed as LuPlaceholder,
+  Minimize as LuCornersIn,
+  Maximize as LuCornersOut,
 } from "lucide-react";
 
 /**
@@ -807,8 +846,8 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   warning: { regular: SoWarningL, fill: SoWarningB },
   "warning-circle": { regular: SoWarningCircleL, fill: SoWarningCircleB },
   "check-circle": { regular: SoCheckCircleL, fill: SoCheckCircleB },
-  "check-square": { regular: SoCheckL, fill: SoCheckB },
-  "seal-check": { regular: SoCheckCircleL, fill: SoCheckCircleB },
+  "check-square": { regular: SoCheckSquareL, fill: SoCheckSquareB },
+  "seal-check": { regular: SoSealCheckL, fill: SoSealCheckB },
   star: { regular: SoStarL, fill: SoStarB },
   heart: { regular: SoHeartL, fill: SoHeartB },
   user: { regular: SoUserL, fill: SoUserB },
@@ -829,8 +868,8 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   "caret-up-down": { regular: SoCaretUpDownL, fill: SoCaretUpDownB },
   "caret-double-left": { regular: SoCaretDoubleLeftL, fill: SoCaretDoubleLeftB },
   "caret-double-right": { regular: SoCaretDoubleRightL, fill: SoCaretDoubleRightB },
-  "caret-circle-down": { regular: SoCaretDownL, fill: SoCaretDownB },
-  "arrows-vertical": { regular: SoCaretUpDownL, fill: SoCaretUpDownB },
+  "caret-circle-down": { regular: SoCaretCircleDownL, fill: SoCaretCircleDownB },
+  "arrows-vertical": { regular: SoArrowsVerticalL, fill: SoArrowsVerticalB },
   columns: { regular: SoWidget4L, fill: SoWidget4B },
   layout: { regular: SoWidgetL, fill: SoWidgetB },
   house: { regular: SoHomeL, fill: SoHomeB },
@@ -854,9 +893,9 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   textbox: { regular: SoTextL, fill: SoTextB },
   keyboard: { regular: SoKeyboardL, fill: SoKeyboardB },
   info: { regular: SoInfoCircleL, fill: SoInfoCircleB },
-  article: { regular: SoDocumentTextL, fill: SoDocumentTextB },
-  "grid-four": { regular: SoWidget2L, fill: SoWidget2B },
-  "grid-nine": { regular: SoWidget5L, fill: SoWidget5B },
+  article: { regular: SoArticleL, fill: SoArticleB },
+  "grid-four": { regular: SoGridFourL, fill: SoGridFourB },
+  "grid-nine": { regular: SoGridNineL, fill: SoGridNineB },
   selection: { regular: SoSelectionL, fill: SoSelectionB },
   "radio-button": { regular: SoRadioL, fill: SoRadioB },
   "toggle-right": { regular: SoRadioL, fill: SoRadioB },
@@ -867,17 +906,17 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   clock: { regular: SoClockL, fill: SoClockB },
   "upload-simple": { regular: SoUploadL, fill: SoUploadB },
   "download-simple": { regular: SoDownloadL, fill: SoDownloadB },
-  table: { regular: SoWidget4L, fill: SoWidget4B },
+  table: { regular: SoTableL, fill: SoTableB },
   cards: { regular: SoCardsL, fill: SoCardsB },
   "chart-line": { regular: SoChartL, fill: SoChartB },
   "trend-up": { regular: SoTrendUpL, fill: SoTrendUpB },
   "trend-down": { regular: SoTrendDownL, fill: SoTrendDownB },
-  tabs: { regular: SoWidget4L, fill: SoWidget4B },
+  tabs: { regular: SoTabsL, fill: SoTabsB },
   path: { regular: SoPathL, fill: SoPathB },
   sidebar: { regular: SoSidebarL, fill: SoSidebarB },
   "sidebar-simple": { regular: SoSidebarSimpleL, fill: SoSidebarSimpleB },
   "dots-three": { regular: SoDotsThreeL, fill: SoDotsThreeB },
-  "dots-three-outline": { regular: SoDotsThreeL, fill: SoDotsThreeB },
+  "dots-three-outline": { regular: SoDotsThreeOutlineL, fill: SoDotsThreeOutlineB },
   compass: { regular: SoCompassL, fill: SoCompassB },
   "chat-circle": { regular: SoChatCircleL, fill: SoChatCircleB },
   "chat-text": { regular: SoChatTextL, fill: SoChatTextB },
@@ -896,7 +935,7 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   "pencil-simple": { regular: SoPenL, fill: SoPenB },
   "share-network": { regular: SoShareL, fill: SoShareB },
   copy: { regular: SoCopyL, fill: SoCopyB },
-  "copy-simple": { regular: SoCopyL, fill: SoCopyB },
+  "copy-simple": { regular: SoCopySimpleL, fill: SoCopySimpleB },
   scissors: { regular: SoScissorsL, fill: SoScissorsB },
   "clipboard-text": { regular: SoClipboardTextL, fill: SoClipboardTextB },
   camera: { regular: SoCameraL, fill: SoCameraB },
@@ -905,7 +944,7 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   placeholder: { regular: SoSquareL, fill: SoSquareB },
   square: { regular: SoSquareL, fill: SoSquareB },
   "square-half": { regular: SoSquareL, fill: SoSquareB },
-  steps: { regular: SoPathL, fill: SoPathB },
+  steps: { regular: SoStepsL, fill: SoStepsB },
   "line-segments": { regular: SoLineSegmentsL, fill: SoLineSegmentsB },
   "paint-bucket": { regular: SoPaintBucketL, fill: SoPaintBucketB },
   "split-horizontal": { regular: SoSplitHorizontalL, fill: SoSplitHorizontalB },
@@ -916,9 +955,9 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   file: { regular: SoFileL, fill: SoFileB },
   "file-text": { regular: SoDocumentTextL, fill: SoDocumentTextB },
   link: { regular: SoLinkL, fill: SoLinkB },
-  "link-simple": { regular: SoLinkL, fill: SoLinkB },
+  "link-simple": { regular: SoLinkSimpleL, fill: SoLinkSimpleB },
   lock: { regular: SoLockL, fill: SoLockB },
-  "lock-open": { regular: SoLockL, fill: SoLockB },
+  "lock-open": { regular: SoLockOpenL, fill: SoLockOpenB },
   key: { regular: SoKeyL, fill: SoKeyB },
   "sign-out": { regular: SoSignOutL, fill: SoSignOutB },
   "sign-in": { regular: SoSignInL, fill: SoSignInB },
@@ -946,12 +985,12 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   "arrow-down": { regular: SoArrowDownL, fill: SoArrowDownB },
   "arrow-clockwise": { regular: SoArrowClockwiseL, fill: SoArrowClockwiseB },
   "arrow-counter-clockwise": { regular: SoArrowCCWL, fill: SoArrowCCWB },
-  "arrows-clockwise": { regular: SoArrowClockwiseL, fill: SoArrowClockwiseB },
+  "arrows-clockwise": { regular: SoArrowsClockwiseL, fill: SoArrowsClockwiseB },
   "arrows-left-right": { regular: SoArrowsLeftRightL, fill: SoArrowsLeftRightB },
   "arrows-out": { regular: SoArrowsOutL, fill: SoArrowsOutB },
   "arrows-in": { regular: SoArrowsInL, fill: SoArrowsInB },
-  "corners-out": { regular: SoArrowsOutL, fill: SoArrowsOutB },
-  "corners-in": { regular: SoArrowsInL, fill: SoArrowsInB },
+  "corners-out": { regular: SoCornersOutL, fill: SoCornersOutB },
+  "corners-in": { regular: SoCornersInL, fill: SoCornersInB },
   play: { regular: SoPlayL, fill: SoPlayB },
   pause: { regular: SoPauseL, fill: SoPauseB },
   stop: { regular: SoStopL, fill: SoStopB },
@@ -976,26 +1015,26 @@ const solarSet: Partial<Record<IconName, SolarPair>> = {
   "credit-card": { regular: SoCardL, fill: SoCardB },
   wallet: { regular: SoWalletL, fill: SoWalletB },
   receipt: { regular: SoBillL, fill: SoBillB },
-  coins: { regular: SoDollarL, fill: SoDollarB },
+  coins: { regular: SoCoinsL, fill: SoCoinsB },
   buildings: { regular: SoBuildingsL, fill: SoBuildingsB },
-  factory: { regular: SoBuildingsL, fill: SoBuildingsB },
+  factory: { regular: SoFactoryL, fill: SoFactoryB },
   storefront: { regular: SoStorefrontL, fill: SoStorefrontB },
   truck: { regular: SoTruckL, fill: SoTruckB },
-  airplane: { regular: SoPaperPlaneL, fill: SoPaperPlaneB },
+  airplane: { regular: SoAirplaneAltL, fill: SoAirplaneAltB },
   car: { regular: SoTruckL, fill: SoTruckB },
   bicycle: { regular: SoBicycleL, fill: SoBicycleB },
   "map-trifold": { regular: SoMapTrifoldL, fill: SoMapTrifoldB },
-  navigation: { regular: SoCompassL, fill: SoCompassB },
+  navigation: { regular: SoNavigationL, fill: SoNavigationB },
   shield: { regular: SoShieldL, fill: SoShieldB },
   "shield-check": { regular: SoShieldCheckL, fill: SoShieldCheckB },
   lifebuoy: { regular: SoLifebuoyL, fill: SoLifebuoyB },
   question: { regular: SoQuestionL, fill: SoQuestionB },
-  smiley: { regular: SoSmileyL, fill: SoSmileyB },
-  "smiley-meh": { regular: SoSmileyL, fill: SoSmileyB },
-  "smiley-sad": { regular: SoSmileyL, fill: SoSmileyB },
+  smiley: { regular: SoSmileyHappyL, fill: SoSmileyHappyB },
+  "smiley-meh": { regular: SoSmileyMehL, fill: SoSmileyMehB },
+  "smiley-sad": { regular: SoSmileySadL, fill: SoSmileySadB },
   "thumbs-up": { regular: SoThumbsUpL, fill: SoThumbsUpB },
   "thumbs-down": { regular: SoThumbsDownL, fill: SoThumbsDownB },
-  "hand-waving": { regular: SoHeartL, fill: SoHeartB },
+  "hand-waving": { regular: SoHandWavingL, fill: SoHandWavingB },
   trophy: { regular: SoTrophyL, fill: SoTrophyB },
   medal: { regular: SoMedalL, fill: SoMedalB },
   crown: { regular: SoCrownL, fill: SoCrownB },
@@ -1011,7 +1050,7 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   "warning-circle": LuWarningCircle,
   "check-circle": LuCheckCircle,
   "check-square": LuCheckSquare,
-  "seal-check": LuSealCheck,
+  "seal-check": LuSealBadge,
   star: LuStar,
   heart: LuHeart,
   user: LuUser,
@@ -1036,7 +1075,7 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   "arrows-vertical": LuArrowsVertical,
   columns: LuColumns,
   square: LuSquare,
-  placeholder: LuSquare,
+  placeholder: LuPlaceholder,
   rectangle: LuRectangle,
   layout: LuLayout,
   house: LuHouse,
@@ -1058,8 +1097,8 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   "toggle-right": LuToggleRight,
   "toggle-left": LuToggleLeft,
   calendar: LuCalendar,
-  "calendar-blank": LuCalendar,
-  "calendar-dots": LuCalendar,
+  "calendar-blank": LuCalendarBlank,
+  "calendar-dots": LuCalendarDots,
   clock: LuClock,
   "upload-simple": LuUpload,
   "download-simple": LuDownload,
@@ -1078,7 +1117,7 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   sidebar: LuSidebar,
   "sidebar-simple": LuSidebarSimple,
   "dots-three": LuDotsThree,
-  "dots-three-outline": LuDotsThree,
+  "dots-three-outline": LuDotsThreeOutline,
   compass: LuCompass,
   "chat-circle": LuChatCircle,
   "chat-text": LuChatText,
@@ -1101,7 +1140,7 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   "squares-four": LuGrid3X3,
   list: LuList,
   info: LuInfo,
-  article: LuFileText,
+  article: LuArticle,
   "grid-four": LuLayoutGrid,
   "arrow-square-out": LuExternalLink,
   "pencil-simple": LuPencil,
@@ -1115,7 +1154,7 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   "square-half": LuSquareHalf,
   folder: LuFolder,
   "folder-open": LuFolderOpen,
-  "folder-simple": LuFolder,
+  "folder-simple": LuFolderSimple,
   file: LuFile,
   "file-text": LuFileText,
   link: LuLink,
@@ -1131,7 +1170,7 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   "map-pin": LuMapPin,
   "push-pin": LuPushPin,
   "paper-plane": LuPaperPlane,
-  "chat-centered-dots": LuChatText,
+  "chat-centered-dots": LuChatCenteredDots,
   hash: LuHash,
   at: LuAt,
   bookmark: LuBookmark,
@@ -1153,8 +1192,8 @@ const lucideSet: Partial<Record<IconName, AnyComp>> = {
   "arrows-left-right": LuArrowsLeftRight,
   "arrows-out": LuArrowsOut,
   "arrows-in": LuArrowsIn,
-  "corners-out": LuArrowsOut,
-  "corners-in": LuArrowsIn,
+  "corners-out": LuCornersOut,
+  "corners-in": LuCornersIn,
   play: LuPlay,
   pause: LuPause,
   stop: LuStop,

package/assets/components/Kanban/Kanban.module.css

@@ -0,0 +1,339 @@
+/*
+ * Kanban — 보드 / 컬럼 / 카드 3-레벨.
+ *
+ * CSS 변수 조절점:
+ *   --kanban-column-width  컬럼 1장 width
+ *   --kanban-column-gap    컬럼 사이 가로 간격
+ *   --kanban-column-pad    컬럼 내부 padding
+ *   --kanban-card-pad      카드 내부 padding
+ *   --kanban-card-gap      카드 안 slot 세로 gap
+ *   --kanban-stack-gap     한 컬럼 안 카드 세로 gap
+ *
+ * layout 축:
+ *   wrap   — 컬럼 자체가 chrome(배경/테두리)을 가지고 header·body가 안에 함께 들어감.
+ *   stack  — 컬럼 자체엔 chrome 없고 header와 body가 각자 자체 chrome을 가진
+ *            두 블록으로 세로 분리. header가 chrome 바깥 위에 "얹어진" 모습.
+ */
+
+/* ──────────────────────────────────────────────────────
+   Board
+   ──────────────────────────────────────────────────── */
+
+.board {
+  /* Kanban 컬럼 전용 폭 — 공용 space 스케일에 등가 토큰 없음, 로컬 상수로 선언. */
+  --kanban-column-width: 320px; /* lint-hardcoded: ignore */
+  --kanban-column-gap: var(--space-3);
+  --kanban-column-pad: var(--space-3);
+  --kanban-stack-gap: var(--space-2);
+
+  display: flex;
+  gap: var(--kanban-column-gap);
+  align-items: stretch;
+  min-width: 0;
+}
+
+.board.scroll {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: var(--space-1);
+}
+
+/* scroll=false: 가로 스크롤 끄되 wrap하지 않음. 칸반은 무조건 로우. */
+.board.noscroll {
+  overflow: visible;
+}
+
+/* ──────────────────────────────────────────────────────
+   Column — 공통 뼈대
+   ──────────────────────────────────────────────────── */
+
+.column {
+  position: relative;
+  flex: 0 0 var(--kanban-column-width);
+  width: var(--kanban-column-width);
+  max-width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  color: var(--fg);
+}
+
+/* scroll=false면 각 컬럼이 남는 공간을 균등 분할. 로우 유지. */
+.board.noscroll .column {
+  flex: 1 1 var(--kanban-column-width);
+}
+
+/* ──────────────────────────────────────────────────────
+   layout=wrap — 컬럼 자체가 chrome 가짐. header/body 공통 쉘.
+   ──────────────────────────────────────────────────── */
+
+.layout-wrap {
+  gap: var(--space-2);
+  padding: var(--kanban-column-pad);
+  border-radius: var(--radius-lg);
+  transition: var(--transition-colors);
+}
+
+/* chrome 축 — layout=wrap. [[feedback_bg_or_stroke_only]]: 배경만 or 테두리만. */
+.layout-wrap.chrome-line {
+  background: transparent;
+  border: 1px solid var(--border);
+}
+.layout-wrap.chrome-filled {
+  background: var(--column-fill, var(--bg-muted));
+}
+.layout-wrap.chrome-plain {
+  background: transparent;
+  padding: 0;
+}
+
+/* tone별 fill 색 — chrome=filled일 때 적용됨.
+   neutral은 중립 bg-muted(기본값), 나머지는 base color 4% opacity.
+   글로벌 *-subtle(8%)보다 더 연하게 — 컬럼은 "면"이라 subtle보다 조용해야 함. */
+.column[data-tone="primary"]  { --column-fill: color-mix(in oklab, var(--primary) 4%, transparent); }
+.column[data-tone="success"]  { --column-fill: color-mix(in oklab, var(--success) 4%, transparent); }
+.column[data-tone="warning"]  { --column-fill: color-mix(in oklab, var(--warning) 4%, transparent); }
+.column[data-tone="danger"]   { --column-fill: color-mix(in oklab, var(--destructive) 4%, transparent); }
+.column[data-tone="info"]     { --column-fill: color-mix(in oklab, var(--info) 4%, transparent); }
+
+/* chrome=filled일 때 header 안 텍스트·아이콘도 tone 색계열로 (fill 색 full opacity).
+   neutral은 기본 fg-strong 유지.
+   action 안 IconButton까지 색이 번지도록 자손 svg·button까지 상속. */
+.chrome-filled[data-tone="primary"]  .columnHeader,
+.chrome-filled[data-tone="primary"]  .columnHeader * { color: var(--primary); }
+.chrome-filled[data-tone="success"]  .columnHeader,
+.chrome-filled[data-tone="success"]  .columnHeader * { color: var(--success); }
+.chrome-filled[data-tone="warning"]  .columnHeader,
+.chrome-filled[data-tone="warning"]  .columnHeader * { color: var(--warning); }
+.chrome-filled[data-tone="danger"]   .columnHeader,
+.chrome-filled[data-tone="danger"]   .columnHeader * { color: var(--destructive); }
+.chrome-filled[data-tone="info"]     .columnHeader,
+.chrome-filled[data-tone="info"]     .columnHeader * { color: var(--info); }
+
+/* ──────────────────────────────────────────────────────
+   layout=stack — header만 chrome. body(카드 스택)는 chrome 없음.
+   header가 그릇 바깥 위에 "얹어진" 모습 — 카드들은 그 아래 분리된 공간.
+   ──────────────────────────────────────────────────── */
+
+.layout-stack {
+  gap: var(--space-2);
+  background: transparent;
+  padding: 0;
+}
+
+/* stack: header만 chrome 보유 */
+.layout-stack .columnHeader {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  transition: var(--transition-colors);
+  position: relative;
+}
+
+/* stack: body는 chrome 없음. 카드 스택만. */
+.layout-stack .columnBody {
+  padding: 0;
+}
+
+/* chrome 축 — layout=stack: header에만 적용 */
+.layout-stack.chrome-line .columnHeader {
+  background: transparent;
+  border: 1px solid var(--border);
+}
+.layout-stack.chrome-filled .columnHeader {
+  background: var(--column-fill, var(--bg-muted));
+}
+.layout-stack.chrome-plain .columnHeader {
+  padding: 0 var(--space-1);
+}
+
+/* ──────────────────────────────────────────────────────
+   Column header (공통)
+   ──────────────────────────────────────────────────── */
+
+.columnHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  padding-inline: var(--space-1);
+}
+
+.columnTitle {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg-strong, var(--fg));
+  line-height: var(--lh-base);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.columnCount {
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  margin-left: calc(var(--space-2) * -1 + var(--space-1));
+  margin-right: auto;
+}
+
+.columnAction {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex-shrink: 0;
+  color: var(--fg-muted);
+}
+
+/* ──────────────────────────────────────────────────────
+   Accent (tone 색 지점)
+   ──────────────────────────────────────────────────── */
+
+.accentMark {
+  flex-shrink: 0;
+  background: var(--column-accent, var(--fg-muted));
+}
+
+.accentMark[data-accent="dot"] {
+  width: var(--space-2);
+  height: var(--space-2);
+  border-radius: var(--radius-full);
+}
+
+.column[data-tone="neutral"]  { --column-accent: var(--fg-muted); }
+.column[data-tone="primary"]  { --column-accent: var(--primary); }
+.column[data-tone="success"]  { --column-accent: var(--success); }
+.column[data-tone="warning"]  { --column-accent: var(--warning); }
+.column[data-tone="danger"]   { --column-accent: var(--destructive); }
+.column[data-tone="info"]     { --column-accent: var(--info); }
+
+/* ──────────────────────────────────────────────────────
+   Column body (카드 스택)
+   ──────────────────────────────────────────────────── */
+
+.columnBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kanban-stack-gap);
+  min-height: var(--space-8);
+  border-radius: var(--radius-md);
+  transition: var(--transition-colors);
+}
+
+
+.columnFooter {
+  padding-top: var(--space-1);
+  color: var(--fg-muted);
+}
+
+/* ──────────────────────────────────────────────────────
+   Card
+   ──────────────────────────────────────────────────── */
+
+.card {
+  --kanban-card-pad: var(--space-3);
+  --kanban-card-gap: var(--space-2);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--kanban-card-gap);
+  padding: var(--kanban-card-pad);
+  background: color-mix(in oklab, var(--bg) 80%, transparent);
+  border-radius: var(--radius-md);
+  color: var(--fg);
+  text-decoration: none;
+  min-width: 0;
+  transition: var(--transition-colors), transform var(--duration-base) var(--ease-out),
+    box-shadow var(--duration-base) var(--ease-out);
+}
+
+.card:hover {
+  background: var(--bg);
+  border-color: var(--border-strong);
+  transform: translateY(calc(var(--space-0_5) * -1));
+  box-shadow: var(--shadow-md);
+}
+
+.cardInteractive {
+  cursor: pointer;
+}
+.cardInteractive:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+}
+
+/* ── Card slots ────────────────────────────────────── */
+
+.cover {
+  margin: calc(var(--kanban-card-pad) * -1) calc(var(--kanban-card-pad) * -1) 0;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  overflow: hidden;
+  display: block;
+}
+.cover > img,
+.cover > video {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  color: var(--fg-muted);
+}
+
+.cardTitle {
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  color: var(--fg-strong, var(--fg));
+  font-weight: var(--font-weight-medium);
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.cardDescription {
+  margin: 0;
+  font-size: var(--text-sm);
+  line-height: var(--lh-sm);
+  color: var(--fg-muted);
+  font-weight: var(--font-weight-regular);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* title 바로 뒤의 description — 둘은 한 묶음으로 간주해 gap 좁힘.
+   card의 기본 gap(space-2)에서 space-1만큼 당겨 space-1(=4px)로 유지. */
+.cardTitle + .cardDescription {
+  margin-top: calc(var(--space-1) * -1);
+}
+
+.cardMeta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+  line-height: var(--lh-sm);
+  color: var(--fg-subtle);
+  font-variant-numeric: tabular-nums;
+}
+
+.cardFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  color: var(--fg-muted);
+  font-size: var(--text-xs);
+  line-height: var(--lh-sm);
+}