ksk-design-system 2.6.3 → 2.7.0

package/dist/{prompt-coordinator-DR5uqIaR.js → semantic-icons-CP9aRQ9C.js}

@@ -158,4 +158,38 @@ function b({ id: t, priority: n = 0, when: r, children: i }) {
 	});
 }
 //#endregion
-export { h as a, n as c, m as i, r as l, b as n, y as o, _ as r, v as s, i as t };
+//#region src/lib/semantic-icons.ts
+var x = {
+	selected: {
+		label: "選択済み",
+		glyph: "tick",
+		use: "選択対象が外枠を持つタイルや項目"
+	},
+	selectedSquare: {
+		label: "選択済み（四角）",
+		glyph: "TickSquare",
+		use: "独立した選択状態の表示"
+	},
+	success: {
+		label: "完了",
+		glyph: "TickCircle",
+		use: "処理の完了・成功"
+	},
+	close: {
+		label: "閉じる",
+		glyph: "Add rotated 45°",
+		use: "閉じる・選択解除（操作名はボタンへ指定）"
+	},
+	info: {
+		label: "情報",
+		glyph: "InfoCircleIcon",
+		use: "補足情報。警告とは区別する"
+	},
+	warning: {
+		label: "警告",
+		glyph: "Danger",
+		use: "注意が必要な状態。説明文を併記する"
+	}
+};
+//#endregion
+export { m as a, v as c, _ as i, n as l, i as n, h as o, b as r, y as s, x as t, r as u };

package/dist/types/components/ui/semantic-icon.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type SemanticIconName } from "../../lib/semantic-icons";
+export { SEMANTIC_ICONS, type SemanticIconName } from "../../lib/semantic-icons";
+export interface SemanticIconProps extends React.ComponentProps<"svg"> {
+    name: SemanticIconName;
+    color?: string;
+    style?: React.CSSProperties;
+    /** Cross-platform alias for aria-label; aria-label wins when both are supplied. */
+    accessibilityLabel?: string;
+    size?: number | string;
+}
+/**
+ * 意味から選ぶ装飾アイコン。選択状態や操作名は親のコントロールで伝える。
+ * 単独の情報画像として使う場合は aria-label を指定する。
+ */
+export declare function SemanticIcon({ name, size, className, accessibilityLabel, color, style, ...props }: SemanticIconProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -279,3 +279,5 @@ export { weddingCategories, projectCategories, getCategoricalColor, getCategoric
 export type { CategoryPresetItem } from "./lib/category-presets";
 export { CATEGORICAL_SURFACE_CLASS, CATEGORICAL_DOT_CLASS, categoricalSurfaceClass, categoricalVar, } from "./lib/categorical";
 export type { CategoricalIndex } from "./lib/categorical";
+export { SemanticIcon, SEMANTIC_ICONS } from "./components/ui/semantic-icon";
+export type { SemanticIconProps, SemanticIconName } from "./components/ui/semantic-icon";

package/dist/types/lib/semantic-icons.d.ts

@@ -0,0 +1,34 @@
+/** Meaning first: Check is a checkbook; InfoCircle in iconsax is an exclamation mark. */
+export declare const SEMANTIC_ICONS: {
+    readonly selected: {
+        readonly label: "選択済み";
+        readonly glyph: "tick";
+        readonly use: "選択対象が外枠を持つタイルや項目";
+    };
+    readonly selectedSquare: {
+        readonly label: "選択済み（四角）";
+        readonly glyph: "TickSquare";
+        readonly use: "独立した選択状態の表示";
+    };
+    readonly success: {
+        readonly label: "完了";
+        readonly glyph: "TickCircle";
+        readonly use: "処理の完了・成功";
+    };
+    readonly close: {
+        readonly label: "閉じる";
+        readonly glyph: "Add rotated 45°";
+        readonly use: "閉じる・選択解除（操作名はボタンへ指定）";
+    };
+    readonly info: {
+        readonly label: "情報";
+        readonly glyph: "InfoCircleIcon";
+        readonly use: "補足情報。警告とは区別する";
+    };
+    readonly warning: {
+        readonly label: "警告";
+        readonly glyph: "Danger";
+        readonly use: "注意が必要な状態。説明文を併記する";
+    };
+};
+export type SemanticIconName = keyof typeof SEMANTIC_ICONS;

package/dist/types/native/components/Alert.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
 export type AlertTone = "info" | "success" | "warning" | "caution";
+export type AlertVariant = "inline-info" | "inline-warning" | "inline-caution";
 export interface AlertProps {
+    /** Borderless inline presentation, matching the Web Alert variants. Overrides tone. */
+    variant?: AlertVariant;
     tone?: AlertTone;
     title?: string;
     description?: string;
     children?: React.ReactNode;
 }
-export declare function Alert({ tone, title, description, children }: AlertProps): React.JSX.Element;
+export declare function Alert({ tone, variant, title, description, children }: AlertProps): React.JSX.Element;

package/dist/types/native/components/SemanticIcon.d.ts

@@ -0,0 +1,12 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+import type { SemanticIconName } from "../../lib/semantic-icons";
+export { SEMANTIC_ICONS, type SemanticIconName } from "../../lib/semantic-icons";
+export interface SemanticIconProps {
+    name: SemanticIconName;
+    size?: number;
+    color?: string;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+}
+/** Meaning-compatible native glyphs. View geometry keeps SVG an optional dependency. */
+export declare function SemanticIcon({ name, size, color, accessibilityLabel, style }: SemanticIconProps): import("react").JSX.Element;

package/dist/types/native/components/Sheet.d.ts

@@ -20,6 +20,8 @@ export interface SheetProps {
      * シート下端に固定で表示する要素（例：「つづける」ボタン）。
      * children の ScrollView と分離されるためコンテンツのスクロールに
      * 追従しない。snap mode（bottom + snapPoints）でのみ有効。
+     * ソフトキーボード表示中はその上に固定し、本文を一時拡張する。
+     * キーボード回避は Sheet が所有するため footer に追加 inset は不要。
      */
     footer?: React.ReactNode;
     /**

package/dist/types/native/components/StatCard.d.ts

@@ -1,8 +1,15 @@
 import React from "react";
+import { type StyleProp, type ViewStyle, type TextProps } from "react-native";
 export interface StatCardProps {
+    /** Card surface layout, including stretch within an equal-height row. */
+    style?: StyleProp<ViewStyle>;
+    /** Minimum label slot height; grows naturally when Dynamic Type needs more space. */
+    labelMinHeight?: number;
+    /** Reports natural label layout, independently of the label slot minimum. */
+    onLabelLayout?: TextProps["onLayout"];
     label: string;
     value: string | number;
     delta?: string;
     trend?: "up" | "down" | "neutral";
 }
-export declare function StatCard({ label, value, delta, trend }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, value, delta, trend, style, labelMinHeight, onLabelLayout }: StatCardProps): React.JSX.Element;

package/dist/types/native/components/index.d.ts

@@ -41,7 +41,7 @@ export { Slider, type SliderProps } from "./Slider";
 export { NumberInput, type NumberInputProps } from "./NumberInput";
 export { FormField, type FormFieldProps } from "./FormField";
 export { FormRoot, FormSection, FormActions, type FormRootProps, type FormSectionProps, type FormActionsProps, } from "./Form";
-export { Alert, type AlertProps, type AlertTone } from "./Alert";
+export { Alert, type AlertProps, type AlertTone, type AlertVariant } from "./Alert";
 export { Dialog, type DialogProps, type DialogPosition } from "./Dialog";
 export { Scrim, type ScrimProps, type ScrimAlign } from "./Scrim";
 export { AlertDialog, type AlertDialogProps } from "./AlertDialog";
@@ -133,3 +133,4 @@ export { ReviewCard, type ReviewCardProps } from "./ReviewCard";
 export { ReviewSummary, type ReviewSummaryProps } from "./ReviewSummary";
 export { AppShell, type AppShellProps } from "./AppShell";
 export { MarketingShell, type MarketingShellProps } from "./MarketingShell";
+export { SemanticIcon, SEMANTIC_ICONS, type SemanticIconProps, type SemanticIconName } from "./SemanticIcon";

package/dist/types/native/sheet-snap-gesture.d.ts

@@ -51,3 +51,5 @@ export type ReleaseAction = {
 };
 /** 指を離した時の着地先。close は dismissible のときだけ返す。 */
 export declare function resolveRelease(startTY: number, dy: number, startActive: number, config: SnapGestureConfig): ReleaseAction;
+/** The dedicated handle is draggable even when body content is scrolled. */
+export declare function shouldStartHandleDrag(animating: boolean, keyboardReducedViewport: boolean): boolean;

package/dist/types/native/sheet-viewport-layout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Receives the actual Modal working area after iOS keyboard avoidance or
+ * Android adjustResize. Never subtract keyboard height again here.
+ */
+export declare function resolveSheetViewportLayout(fullHeight: number, panelHeight: number, measuredHeight: number | null, keyboardOpen: boolean): {
+    availableHeight: number;
+    panelHeight: number;
+    expandToViewport: boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "2.6.3",
+  "version": "2.7.0",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "CLAUDE.md",
     "DESIGN.md",
     "src/preset.css",
+    "src/preset-core.css",
     "src/styles",
     "src/themes",
     "src/components/COMPONENT_LOOKUP.md",
@@ -65,6 +66,14 @@
       "import": "./src/preset.css",
       "default": "./src/preset.css"
     },
+    "./preset-core": {
+      "import": "./src/preset-core.css",
+      "default": "./src/preset-core.css"
+    },
+    "./safelist": {
+      "import": "./src/styles/source-safelist.css",
+      "default": "./src/styles/source-safelist.css"
+    },
     "./styles": {
       "import": "./src/preset.css",
       "default": "./src/preset.css"
@@ -204,11 +213,16 @@
     "test:watch": "vitest",
     "test:interaction": "vitest run --config vitest.storybook.config.ts",
     "test:a11y": "vitest run --config vitest.a11y.config.ts",
-    "check": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.type-tests.json --noEmit && bash scripts/lint-scratch.sh && bash scripts/check-deps.sh && node scripts/check-published-deps.mjs && node scripts/check-radix-floor.mjs && node scripts/check-css-setup.mjs && bash scripts/check-drift.sh && node scripts/check-screen-contracts.mjs && node scripts/check-docs-drift.mjs && node scripts/check-agents-docs-sync.mjs && node scripts/check-contrast.mjs && node scripts/check-design-md.mjs && node scripts/check-tailwind-v4.mjs && node scripts/check-prefix-order.mjs && node scripts/check-flex-shrink.mjs && node scripts/check-deprecations.mjs && node scripts/check-rules-contract.mjs && node scripts/sync-version.mjs --check && node scripts/generate-migration-doc.mjs --check && bash scripts/check-responsive.sh && node scripts/generate-component-lookup.mjs --check && node scripts/generate-platform-tokens.mjs --check && node scripts/generate-token-hex-cache.mjs --check && node scripts/generate-source-safelist.mjs --check && tsc -p tsconfig.native.json --noEmit && node scripts/check-native-parity.mjs && node scripts/generate-native-component-lookup.mjs --check",
+    "check": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.type-tests.json --noEmit && bash scripts/lint-scratch.sh && bash scripts/check-deps.sh && node scripts/check-published-deps.mjs && node scripts/check-radix-floor.mjs && node scripts/check-css-setup.mjs && bash scripts/check-drift.sh && node scripts/check-screen-contracts.mjs && node scripts/check-docs-drift.mjs && node scripts/check-agents-docs-sync.mjs && node scripts/check-contrast.mjs && node scripts/check-design-md.mjs && node scripts/check-tailwind-v4.mjs && node scripts/check-prefix-order.mjs && node scripts/check-flex-shrink.mjs && node scripts/check-deprecations.mjs && node scripts/check-rules-contract.mjs && node scripts/sync-version.mjs --check && node scripts/generate-migration-doc.mjs --check && bash scripts/check-responsive.sh && node scripts/generate-component-lookup.mjs --check && node scripts/generate-platform-tokens.mjs --check && node scripts/generate-token-hex-cache.mjs --check && node scripts/generate-source-safelist.mjs --check && tsc -p tsconfig.native.json --noEmit && node scripts/check-native-parity.mjs && node scripts/generate-native-component-lookup.mjs --check && npm run check:native-support",
     "check:agent": "npm run lint && npm run check && npm test && npm run lint:story-reuse",
     "version": "node scripts/sync-version.mjs",
     "mcp:build": "cd mcp-server && npm install && npm run build",
-    "mcp:start": "node mcp-server/dist/index.js"
+    "mcp:start": "node mcp-server/dist/index.js",
+    "test:docs": "node scripts/check-storybook-docs.mjs",
+    "test:visual": "node scripts/check-visual.mjs",
+    "test:visual:guards": "node --test test/visual/*.test.mjs",
+    "generate:native-support": "node scripts/generate-native-support.mjs",
+    "check:native-support": "node scripts/generate-native-support.mjs --check"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.3.0",
@@ -279,6 +293,7 @@
     "iconsax-reactjs": "^0.0.8",
     "jsdom": "^25.0.1",
     "playwright": "^1.62.0",
+    "pngjs": "^7.0.0",
     "radix-ui": "^1.6.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

package/src/components/COMPONENT_LOOKUP.md

@@ -61,6 +61,7 @@
 | SectionNav | `@/components/ui/section-nav` | — | Vertical, Horizontal, StickyGuide |
 | Section | `@/components/ui/section` | **spacing**: `sm`, `md`, `lg`, `xl`<br>**background**: `none`, `subtle`, `accent-subtle` | FullBleedBandWithContainedContent |
 | Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue | `@/components/ui/select` | **size**: `sm`, `default`, `lg` | WithPlaceholder, WithGroups, WithDisabledItem, DisabledSelect, OpensAndSelectsOption, SelectsWithKeyboard |
+| SEMANTIC_ICONS, SemanticIcon | `@/components/ui/semantic-icon` | — | — |
 | Separator | `@/components/ui/separator` | — | Horizontal, Vertical |
 | Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetDragIndicator | `@/components/ui/sheet` | **side**: `top`, `bottom`, `left`, `right`, `float`, `float-glass`, `bottom-glass` | BottomSheet, FloatSheet, TopSheet, FloatSheetTallContent, RightSheet, A11yOptions, TitleAutoFocusAppearance, Float Glass (Liquid Glass), Bottom Glass (Liquid Glass), BottomSheet — swipeToClose, Float — 仮想キーボード追従, BottomSheet — swipeToClose (full height / scrollable), BottomSheet — Snap 0.4/0.9, BottomSheet — Snap (push-up layout), BottomSheet — nested (#158), OpensAndIsImmediatelyInteractive, ChildDescriptionIsLinked, ChildDescriptionIsLinkedWithSwipeToClose, NoDescriptionLeavesNoDescribedBy, ChildDescriptionIsLinkedWithSnapPoints, ChildDescriptionIsLinkedWithSwipeSideDrawer, DescriptionPropIsLinked, ExplicitDescribedByWins |
 | Skeleton, SkeletonText | `@/components/ui/skeleton` | — | CardSkeleton, TextSkeleton, SkeletonText (5 lines) |
@@ -153,7 +154,7 @@
 | Screen | `@/components/patterns/screen` | — | ScrollableWithFooter, WithHeader, FixedPhotoHero |
 | SearchBar | `@/components/patterns/search-bar` | — | Default, WithValue, Disabled, WithOnSearch, AsForm |
 | SectionHeader | `@/components/patterns/section-header` | — | WithAction, WithoutAction, TitleOnly, WithGhostButton |
-| SettingsSection, SettingsListRow | `@/components/patterns/settings-section` | — | Group, Card, Danger |
+| SettingsSection, SettingsListRow | `@/components/patterns/settings-section` | — | Group, Card, Danger, CompactSpacing |
 | ShareButtons | `@/components/patterns/share-buttons` | — | Circle, Inline, SelectiveProviders, JapanDefault, ExtendedProviders, With onShare tracking |
 | SideDrawerFrame | `@/components/patterns/side-drawer-frame` | — | RightDrawer, LeftDrawer, RightDrawer — swipeToClose, LeftDrawer — swipeToClose, Glass |
 | SimplePagination | `@/components/patterns/simple-pagination` | — | アイテム数指定 (items), ページ数指定 (pages), compact (モバイル省略表示), 境界での disabled, 0 件 |

package/src/native/COMPONENT_LOOKUP.md

@@ -4,7 +4,7 @@
 
 React Native / Expo consumer は、新規 UI を作る前にこの一覧で既存コンポーネントを確認してください。すべて `ksk-design-system/native/ui` から import します。
 
-- Public native component exports: 152
+- Public native component exports: 154
 - Import: `import { Button, Screen } from "ksk-design-system/native/ui"`
 
 | Component | Source | Section |
@@ -161,3 +161,5 @@ React Native / Expo consumer は、新規 UI を作る前にこの一覧で既
 | `ReviewSummary` | `src/native/components/ReviewSummary.tsx` | Phase 7: Commerce |
 | `AppShell` | `src/native/components/AppShell.tsx` | Phase 8: Shells |
 | `MarketingShell` | `src/native/components/MarketingShell.tsx` | Phase 8: Shells |
+| `SEMANTIC_ICONS` | `src/native/components/SemanticIcon.tsx` | Phase 8: Shells |
+| `SemanticIcon` | `src/native/components/SemanticIcon.tsx` | Phase 8: Shells |

package/src/preset-core.css

@@ -0,0 +1,252 @@
+/* =============================================================
+   KSK Design System — Preset Core CSS
+
+   preset から「DS 部品用の safelist（styles/source-safelist.css）」だけを
+   除いたもの。トークン・shadcn 互換ブリッジ・アニメーション・
+   container 幅・scrollbar-hide・base layer の保険はすべて含む。
+
+   使い方（DS 部品を使わないページだけの consumer）:
+   @import "tailwindcss";
+   @import "ksk-design-system/preset-core";
+   @import "ksk-design-system/themes/default";
+
+   DS 部品（Button 等）を使う consumer は従来どおり
+   `ksk-design-system/preset`（= preset-core + safelist）を使うこと。
+   safelist が無いと、DS 部品内部でしか使わないユーティリティは
+   consumer の @source が DS の dist を走査したときにしか生成されない。
+
+   preset.css はこのファイルと safelist を読み込むだけの薄い入口。
+   トークンや base layer を足すときはこのファイルに書く。
+   ============================================================= */
+
+@import "./styles/primitive.css";
+/* 角丸の意味別トークン（issue #553）。定義元は styles/radius.css の1箇所で、
+   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
+@import "./styles/radius.css";
+/* ページセクション間の縦リズム（issue #560）。定義元は
+   styles/section-spacing.css の1箇所で、product-theme.css からも読み込まれる
+   （個別 subpath 構成の消費側対策）。 */
+@import "./styles/section-spacing.css";
+/* 重なり順（issue #563）。定義元は styles/z-index.css の1箇所で、
+   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
+@import "./styles/z-index.css";
+/* 影（issue #563）。定義元は styles/shadow.css の1箇所で、
+   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
+@import "./styles/shadow.css";
+@import "./styles/semantic.css";
+@import "./styles/categorical.css";
+@import "./styles/typography.css";
+@import "./styles/glass.css";
+@import "./styles/bottom-nav.css";
+@import "./styles/motion.css";
+@import "./styles/sheet-keyboard.css";
+/* プロダクト単位で上書きしてよい寸法・面の公開変数（issue #364）。
+   許可リストの正本は contracts/product-theme-overrides.json。 */
+@import "./styles/product-theme.css";
+
+/* ─── Bridge Layer: shadcn/ui 互換マッピング ───
+
+   命名が 2 系統あるのは意図的な設計。統一しない。
+
+   - `--Surface-Primary` のような **PascalCase-ケバブ** は KSK の semantic 層。
+     UI を書くときに参照するのは常にこちら（CLAUDE.md のセルフチェック参照）。
+   - `--primary` / `--muted-foreground` のような **小文字ケバブ** は shadcn/ui
+     （および Radix ベースの外部コンポーネント）が決め打ちで参照する名前。
+     shadcn の CLI で追加したコンポーネントや、consumer が別途入れた
+     shadcn 資産をそのまま動かすための互換レイヤーであり、名前は
+     shadcn 側の仕様なので KSK 側では変えられない。
+
+   つまり小文字ケバブ側は「外部規約への適合」であって命名の揺れではない。
+   新しいトークンを増やすときは PascalCase 側（semantic.css）に足し、
+   shadcn 互換名が必要な場合だけここで var() でエイリアスすること。 */
+:root {
+  --radius: 0.5rem;
+
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+
+  --card: var(--Surface-Primary);
+  --card-foreground: var(--Text-High-Emphasis);
+
+  --popover: var(--Surface-Primary);
+  --popover-foreground: var(--Text-High-Emphasis);
+
+  --primary: var(--Brand-Primary);
+  --primary-foreground: var(--Text-on-Inverse);
+
+  --secondary: var(--Surface-Secondary);
+  --secondary-foreground: var(--Text-High-Emphasis);
+
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+
+  --accent: var(--Surface-Secondary);
+  --accent-foreground: var(--Text-High-Emphasis);
+
+  --destructive: var(--Caution-Base);
+  --destructive-foreground: var(--Text-on-Inverse);
+
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+
+  --sidebar-background: var(--Surface-Primary);
+  --sidebar-foreground: var(--Text-High-Emphasis);
+  --sidebar-primary: var(--Brand-Primary);
+  --sidebar-primary-foreground: var(--Text-on-Inverse);
+  --sidebar-accent: var(--Surface-Accent-Primary-Light);
+  --sidebar-accent-foreground: var(--Text-Accent-Primary);
+  --sidebar-border: var(--Border-Low-Emphasis);
+  --sidebar-ring: var(--Focus-High-Emphasis);
+}
+
+.dark {
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+  --card: var(--Surface-Secondary);
+  --card-foreground: var(--Text-High-Emphasis);
+  --popover: var(--Surface-Secondary);
+  --popover-foreground: var(--Text-High-Emphasis);
+  --primary: var(--Brand-Primary);
+  --primary-foreground: var(--Text-on-Inverse);
+  --secondary: var(--Surface-Tertiary);
+  --secondary-foreground: var(--Text-High-Emphasis);
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+  --accent: var(--Surface-Tertiary);
+  --accent-foreground: var(--Text-High-Emphasis);
+  --destructive: var(--Caution-Base);
+  --destructive-foreground: var(--Text-on-Inverse);
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+}
+
+/* ─── Radius Tokens ───
+   定義はこのファイルから styles/radius.css へ切り出した（issue #553）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Section Spacing Tokens ───
+   定義はこのファイルから styles/section-spacing.css へ切り出した（issue #560）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Z-Index Scale ───
+   定義はこのファイルから styles/z-index.css へ切り出した（issue #563）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Shadow Tokens ───
+   定義はこのファイルから styles/shadow.css へ切り出した（issue #563）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Animation ─── */
+@keyframes slide-in-right {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+@keyframes slide-in-left {
+  from { transform: translateX(-100%); opacity: 0; }
+  to   { transform: translateX(0);     opacity: 1; }
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes celebration-confetti-fall {
+  from {
+    opacity: 1;
+    transform: translate3d(0, -16px, 0) rotate(0deg);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(var(--celebration-drift, 0), 110vh, 0) rotate(var(--celebration-rotate, 360deg));
+  }
+}
+@keyframes celebration-confetti-burst {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(var(--celebration-burst-mid-x, 0), var(--celebration-burst-mid-y, 0), 0)
+      rotate(calc(var(--celebration-rotate, 360deg) * 0.75)) scale(1);
+  }
+  80% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(var(--celebration-burst-x, 0), var(--celebration-burst-y, 0), 0)
+      rotate(var(--celebration-rotate, 360deg)) scale(1);
+  }
+}
+@keyframes celebration-pop {
+  from { opacity: 0; transform: translateY(8px) scale(0.94); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes celebration-emoji-pop {
+  0%   { transform: scale(0); }
+  50%  { transform: scale(1.4); }
+  70%  { transform: scale(0.9); }
+  100% { transform: scale(1); }
+}
+
+@theme inline {
+  /* duration / easing は src/styles/motion.css のトークンを参照する
+     （値は従来どおり slide/fade-up=200ms・fade/scale=150ms の ease-out）。 */
+  --animate-slide-in-right: slide-in-right var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
+  --animate-slide-in-left:  slide-in-left var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
+  --animate-fade-in:        fade-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
+  --animate-fade-in-up:     fade-in-up var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
+  --animate-scale-in:       scale-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
+}
+
+/* ─── Container Query Breakpoints ───
+   @sm: / @md: などは viewport の sm: / md: と別スケール。
+   tokens.json の breakpoints.container と同じ値を publish 側にも固定し、
+   Tailwind の既定値変更や consumer 側設定に依存させない。 */
+@theme {
+  --container-sm: 24rem;   /* 384px */
+  --container-md: 28rem;   /* 448px */
+  --container-xl: 36rem;   /* 576px */
+  --container-2xl: 42rem;  /* 672px */
+  --container-3xl: 48rem;  /* 768px */
+  --container-4xl: 56rem;  /* 896px */
+}
+
+/* ─── Scrollbar Hide Utility ─── */
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* ─── Base Layer: ボーダー / アウトライン色のセーフティネット ───
+   Tailwind CSS v4 の破壊的変更で、border / outline の既定色は
+   gray-200 ではなく `currentColor`（＝要素の文字色）になった。
+   そのため `border` `border-b` のように「幅だけで色を指定しない」
+   クラスは、消費側が親に濃い文字色（例: --Text-High-Emphasis = #1C1A1A）
+   を敷くと枠線が黒ずむ。これを防ぐため、shadcn / 多くの DS と同じく
+   全要素のフォールバック色をテーマ追従の --border / --ring に固定する。
+
+   ※ これは「保険」。コンポーネント側は引き続き
+     border-[var(--Border-Low-Emphasis)] のように明示色を指定すること
+     （明示色を持つ要素は utilities レイヤが base を上書きするため不変）。 */
+@layer base {
+  *,
+  ::after,
+  ::before {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+}