@conscience-technology/ctds 0.3.4 → 0.4.0

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/ListItem/ListItem.module.css

@@ -1,59 +1,73 @@
 /*
- * ListItem — row 레벨 수평 anatomy. 수직 리듬은 parent gap/hairline에 위임.
+ * ListItem — 3구역 뼈대: [leading] [content] [trailing]
  *
- * padding/border/bg는 자체적으로 걸지 않지만, hover bg는 "chrome"이 아니라
- * "상호작용 피드백"이므로 row 레벨에서 담당.
+ * 수직 리듬은 CSS 변수로 조절:
+ *   --li-pad-y        세로 padding (hit area)
+ *   --li-gap-x        leading↔content↔trailing 가로 gap
+ *   --li-gap-title    Title↔Description 간격 (조밀)
+ *   --li-gap-body     Description↔Meta·Note 간격 (한 숨 벌림)
+ *   --li-gap-header   Header 아이템 간 가로 gap
+ *   --li-gap-meta     Meta 라인 아이템 간 가로 gap
  *
- * 색상 훅 (부모 컨테이너에서 오버라이드):
- *   --list-item-fg          body 서술 색 (default: --fg)
- *   --list-item-from-fg     from(누구) 색 (default: --fg-strong)
- *   --list-item-meta-fg     meta/상대시간 색 (default: --fg-muted)
- *   --list-item-hover-bg    hover 시 row bg (default: --hover). transparent로 끄기
+ * chrome 없음 — bg·border·radius 자체 공급 X. 리스트 분리는 부모가 담당.
+ * 블록 외형이 필요하면 [[Callout]] 사용.
  */
 
 .root {
+  --li-pad-y: var(--space-3);
+  --li-pad-x: var(--space-2);
+  --li-gap-x: var(--space-3);
+  --li-gap-title: var(--space-0_5);
+  --li-gap-body: var(--space-2);
+  --li-gap-header: var(--space-2);
+  --li-gap-meta: var(--space-2);
+
   display: flex;
-  align-items: flex-start;
-  gap: var(--space-3);
-  color: var(--list-item-fg, var(--fg));
-  text-decoration: none;
+  gap: var(--li-gap-x);
   min-width: 0;
-  /* 좌우 padding 없음 — 가로 anatomy는 flex gap만 담당해서 좌우 비대칭 방지.
-     세로 padding만 걸어 hover hit area 확보. 부모 li가 세로 hairline/padding을
-     담당하면 음의 margin으로 리듬 유지. 좌우로 hover bg를 넓히고 싶으면
-     부모 wrapper에 padding/negative margin을 걸어 조정한다. */
-  padding-block: var(--space-3);
-  margin-block: calc(var(--space-3) * -1);
+  color: var(--fg);
+  text-decoration: none;
+  /* hit area를 좌우로 넓혀 hover bg가 한 숨 바깥까지 번지도록 (negative margin으로 정렬 유지) */
+  padding: var(--li-pad-y) var(--li-pad-x);
+  margin-inline: calc(var(--li-pad-x) * -1);
+  border-radius: var(--radius-md);
   transition: var(--transition-colors);
 }
 
-.inline {
-  align-items: center;
+.root:hover {
+  background: var(--hover);
 }
 
-.stacked {
+.align-center {
+  align-items: center;
+}
+.align-top {
   align-items: flex-start;
-  /* 두 줄짜리는 세로 호흡을 한 단계 더. margin-block은 root 기본값(-space-3) 유지해
-     실제 레이아웃 박스가 벌어지도록. */
-  padding-block: var(--space-4);
 }
 
-/* row hover — 모든 리스트 항목에서 "지금 이 줄" 신호.
-   pure 좌표에서 끄려면 --list-item-hover-bg: transparent. */
-.root:hover {
-  background: var(--list-item-hover-bg, var(--hover));
+/* size=md (기본) — 작업/자원 리스트 밀도. 전체 호흡은 넉넉하되
+   Title↔Description은 조밀하게 묶어 "제목+부제" 유닛감 유지. */
+.size-md {
+  --li-pad-y: var(--space-3);
+  --li-gap-title: var(--space-0_5);
+  --li-gap-body: var(--space-2);
+}
+
+/* size=sm — 활동 로그·추출 완료처럼 타이트하게 쌓이는 리스트. */
+.size-sm {
+  --li-pad-y: var(--space-2);
+  --li-gap-title: var(--space-0_5);
+  --li-gap-body: var(--space-1);
 }
 
 .interactive {
   cursor: pointer;
 }
-
 .interactive:focus-visible {
   outline: none;
   box-shadow: var(--ring-shadow);
 }
 
-/* Leading — Avatar / Icon / 커스텀 */
 .leading {
   flex-shrink: 0;
   display: inline-flex;
@@ -62,16 +76,20 @@
   color: var(--fg-muted);
 }
 
-/* leading 안쪽에 size=auto인 leadingIcon이 있으면 wrapper를 투명화해서
-   leadingIcon이 root flex의 직접 자식이 되게 한다 — 그래야 align-self: stretch가
-   root content 전체 높이를 받고, root gap이 leadingIcon에 직접 적용됨. */
-.leading:has(.leadingIcon.auto) {
-  display: contents;
+/* leading/trailing 안 raw Icon(svg)은 리스트 밀도에 맞춰 16px로 축소.
+   LeadingIcon·Avatar·Badge·DateStamp·Button·IconButton 등 wrapped 요소는 자체 크기를 가지므로
+   :scope > svg 직접 자식만 겨냥 — 중첩된 아이콘(Badge 안 icon 등)에는 영향 없음. */
+.leading > svg,
+.trailing > svg {
+  width: var(--space-4);
+  height: var(--space-4);
+}
+
+.align-top > .leading {
+  align-items: flex-start;
+  padding-top: var(--space-0_5);
 }
 
-/* ListItemLeadingIcon — "배경색 + 아이콘" leading 타입.
-   Avatar와 같은 사이즈 트랙에 올려 리스트에서 섞여도 정렬이 깨지지 않는다.
-   bg/fg는 tone 프리셋 또는 CSS 변수로 자유 조절. */
 .leadingIcon {
   flex-shrink: 0;
   display: inline-flex;
@@ -81,28 +99,16 @@
   color: var(--leading-icon-fg, var(--fg));
   border-radius: var(--radius-sm);
 }
-
-.leadingIcon.xs { width: var(--space-4);  height: var(--space-4);  border-radius: var(--radius-xs); }
-.leadingIcon.sm { width: var(--space-6);  height: var(--space-6);  border-radius: var(--radius-sm); }
-.leadingIcon.md { width: var(--space-8);  height: var(--space-8);  border-radius: var(--radius-md); }
-.leadingIcon.lg { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-lg); }
-
-/* auto — stacked 두 줄 content 높이에 딱 맞는 정사각 마크.
-   flex 아이템에서 aspect-ratio + align-self: stretch 조합은 width가 min-content로
-   풀려 세로로 길어진다. 그래서 height를 토큰 기반으로 명시해 폭을 그에 묶는다.
-   계산: stacked content 두 줄 = from(text-sm × lh-tight) + body(text-sm × lh-sm) + gap(space-1).
-   오버라이드가 필요하면 --leading-icon-size로 통째로 교체. */
-.leadingIcon.auto {
-  align-self: center;
-  height: var(--leading-icon-size,
-    calc(var(--text-sm) * var(--lh-tight) + var(--lh-sm) + var(--space-1))
-  );
+.leadingIcon.li-xs { width: var(--space-4);  height: var(--space-4);  border-radius: var(--radius-xs); }
+.leadingIcon.li-sm { width: var(--space-6);  height: var(--space-6);  border-radius: var(--radius-sm); }
+.leadingIcon.li-md { width: var(--space-8);  height: var(--space-8);  border-radius: var(--radius-md); }
+.leadingIcon.li-lg { width: var(--space-12); height: var(--space-12); border-radius: var(--radius-lg); }
+.leadingIcon.li-auto {
+  align-self: stretch;
   aspect-ratio: 1 / 1;
-  width: auto;
   border-radius: var(--radius-md);
 }
 
-/* tone 프리셋 — subtle bg + solid fg 쌍. */
 .leadingIcon[data-tone="neutral"] {
   --leading-icon-bg: var(--bg-muted);
   --leading-icon-fg: var(--fg);
@@ -128,191 +134,65 @@
   --leading-icon-fg: var(--info);
 }
 
-/* Read-state 톤 신호 ──────────────────────────────────
-   dot/badge 없이 텍스트 톤만으로 읽음/안읽음을 표현.
-   - unread: 전체 톤이 가장 진하게 (body=fg-strong), meta는 primary로 "지금"을 강조
-   - read: 전체 톤이 한두 단계 뒤로 물러남
-   - 둘 다 미지정: 중립 — 리드 개념 없는 자리 */
-
-/* unread — meta primary, body/from 가장 진한 톤 */
-.unread .body,
-.unread .target,
-.unread .narrativeBody {
-  color: var(--fg-strong, var(--fg));
-}
-.unread .from {
-  color: var(--fg-strong, var(--fg));
-  font-weight: var(--font-weight-medium);
-}
-.unread .meta {
-  color: var(--primary);
-  font-weight: var(--font-weight-regular);
-}
-
-/* read — 전체 한 단계 뒤로 */
-.read .body,
-.read .target,
-.read .narrativeBody {
-  color: var(--fg-muted);
-}
-.read .from {
-  color: var(--fg-muted);
-  font-weight: var(--font-weight-regular);
-}
-.read .meta,
-.read .verb,
-.read .surface {
-  color: var(--fg-subtle);
-}
-.read .leading {
-  opacity: 0.7;
-}
-
-/* Content wrapper. stacked에서 title↔subtitle gap은 xs(space-1). */
 .content {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--space-1);
+  gap: 0;
 }
 
-/* 서술 모드 (A): from  body (inline). dash 없이 공백으로만 분리. */
-.narrativeBody {
-  display: inline;
+.title {
   font-size: var(--text-sm);
   line-height: var(--lh-sm);
-  color: var(--list-item-fg, var(--fg));
-  font-weight: var(--font-weight-regular);
+  color: var(--fg-strong, var(--fg));
+  font-weight: var(--font-weight-medium);
   min-width: 0;
-}
-
-.narrativeBody .from {
-  margin-inline-end: var(--space-2);
-}
-
-/* 서술 모드 (B): from · verb · target · surface */
-.actionBody {
+  /* Badge 등 inline 요소가 Title 앞에 섞여도 수직 중앙 정렬 유지 */
   display: inline-flex;
   flex-wrap: wrap;
-  align-items: baseline;
-  gap: var(--space-1_5);
-  font-size: var(--text-sm);
-  line-height: var(--lh-sm);
-  min-width: 0;
-}
-
-/* stacked: content가 flex-column이라 from·body가 자동 2줄로. */
-.stacked .from {
-  font-size: var(--text-sm);
-  line-height: var(--lh-tight);
+  align-items: center;
+  gap: var(--space-2);
 }
 
-.stacked .body {
+.description {
+  margin: var(--li-gap-title) 0 0;
   font-size: var(--text-sm);
   line-height: var(--lh-sm);
-  color: var(--list-item-fg, var(--fg));
-}
-
-.from {
-  font-weight: var(--font-weight-medium);
-  color: var(--list-item-from-fg, var(--fg-strong));
-}
-
-.body {
-  color: var(--list-item-fg, var(--fg));
-  font-weight: var(--font-weight-regular);
-}
-
-.verb {
-  color: var(--list-item-meta-fg, var(--fg-muted));
-  font-weight: var(--font-weight-regular);
-}
-
-.target {
-  color: var(--list-item-fg, var(--fg));
+  color: var(--fg-muted);
   font-weight: var(--font-weight-regular);
 }
 
-/* 작은 글자(surface, meta)는 본문보다 한 단계 더 연하게 — subtle. */
-.surface {
-  font-size: var(--text-xs);
-  color: var(--list-item-meta-fg, var(--fg-subtle));
-  margin-inline-start: var(--space-1);
-}
-
-/* Meta — 오른쪽 끝 상대시간. 작은 글자라 subtle 톤. */
 .meta {
-  flex-shrink: 0;
+  margin-top: var(--li-gap-title);
+  display: flex;
+  align-items: center;
+  gap: var(--li-gap-meta);
   font-size: var(--text-xs);
-  color: var(--list-item-meta-fg, var(--fg-subtle));
+  line-height: var(--lh-sm);
+  color: var(--fg-subtle);
   font-variant-numeric: tabular-nums;
-  align-self: center;
 }
-
-.stacked .meta {
-  align-self: flex-start;
-  margin-top: var(--space-0_5);
+.meta time {
+  color: inherit;
 }
 
-/* Trailing — meta 자리 커스텀 */
-.trailing {
+.metaDivider {
+  display: inline-block;
+  width: var(--hairline);
+  height: var(--space-3);
+  background: var(--border);
   flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-2);
-  color: var(--list-item-meta-fg, var(--fg-muted));
-  font-size: var(--text-xs);
 }
 
-/* hoverActions — 평상시 숨김, row hover/focus에서 등장 */
-.hoverActions {
+.trailing {
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
-  flex-shrink: 0;
-  width: 0;
-  margin-inline-start: 0;
-  opacity: 0;
-  pointer-events: none;
-  overflow: hidden;
-  transition:
-    width var(--duration-fast) var(--ease-out),
-    margin-inline-start var(--duration-fast) var(--ease-out),
-    opacity var(--duration-fast) var(--ease-out);
-}
-
-.root:hover .hoverActions,
-.root:focus-visible .hoverActions,
-.root:focus-within .hoverActions {
-  width: auto;
-  margin-inline-start: var(--space-2);
-  opacity: 1;
-  pointer-events: auto;
-}
-
-@media (hover: none) {
-  .hoverActions {
-    width: auto;
-    margin-inline-start: var(--space-2);
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
-
-/* Variant별 default — anatomy는 공통. */
-.activity {
-  /* no-op */
-}
-
-.notification {
-  /* TSX에서 unread default true 처리 */
-}
-
-.mention .body {
-  font-style: italic;
-}
-
-.system .leading {
   color: var(--fg-muted);
+  align-self: center;
+}
+.align-top > .trailing {
+  align-self: flex-start;
 }