@mezzanine-stack/css 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# @mezzanine-stack/css
+
+Mezzanine 共通スタイルレイヤを提供する CSS パッケージです。
+
+## 提供ファイル
+
+- `@mezzanine-stack/css/index.css`
+- `@mezzanine-stack/css/field-renderer.css`
+- `@mezzanine-stack/css/markdown.css`
+
+## 依存関係
+
+- `@mezzanine-stack/tokens` の CSS 変数を前提に設計
+
+## 利用例
+
+```css
+@import "@mezzanine-stack/tokens/tokens.core.css";
+@import "@mezzanine-stack/tokens/tokens.brand.defaults.css";
+@import "@mezzanine-stack/css/index.css";
+@import "@mezzanine-stack/css/markdown.css";
+```
+

package/field-renderer.css

@@ -0,0 +1,376 @@
+/**
+ * Mezzanine Field Renderer CSS
+ * フィールドレンダラーコンポーネント用の独立したスタイル
+ */
+
+/* 基本的なフィールドコンテナ */
+.mz-field-text,
+.mz-field-date,
+.mz-field-boolean,
+.mz-field-tags,
+.mz-field-gallery,
+.mz-field-sns,
+.mz-field-unknown {
+  margin-bottom: 1rem;
+}
+
+/* フィールドラベルと値の共通スタイル */
+.mz-field-label {
+  font-weight: bold;
+  margin-right: 0.5rem;
+}
+
+.mz-field-value {
+  color: #666;
+}
+
+/* テキストフィールド */
+.mz-field-text {
+  line-height: 1.6;
+}
+
+.mz-field-title,
+.mz-field-display-name {
+  margin: 0 0 1rem 0;
+  font-size: 2rem;
+  font-weight: bold;
+  line-height: 1.2;
+}
+
+.mz-field-other-text {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+/* 本文フィールド */
+.mz-field-body {
+  margin: 1.5rem 0;
+  line-height: 1.8;
+  font-size: 1rem;
+  color: #333;
+}
+
+.mz-field-body h1 {
+  font-size: 1.8rem;
+  font-weight: bold;
+  margin: 2rem 0 1rem 0;
+  line-height: 1.3;
+  color: #222;
+}
+
+.mz-field-body h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 1.75rem 0 0.75rem 0;
+  line-height: 1.4;
+  color: #333;
+}
+
+.mz-field-body h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 1.5rem 0 0.5rem 0;
+  line-height: 1.4;
+  color: #333;
+}
+
+.mz-field-body p {
+  margin-bottom: 1rem;
+  color: #444;
+}
+
+.mz-field-body ul,
+.mz-field-body ol {
+  margin: 1rem 0;
+  padding-left: 1.5rem;
+}
+
+.mz-field-body li {
+  margin-bottom: 0.5rem;
+  line-height: 1.7;
+}
+
+.mz-field-body ul {
+  list-style-type: disc;
+}
+
+.mz-field-body ol {
+  list-style-type: decimal;
+}
+
+.mz-field-body blockquote {
+  border-left: 4px solid #007acc;
+  margin: 1.5rem 0;
+  padding: 1rem 1.5rem;
+  background: rgba(0, 122, 204, 0.05);
+  font-style: italic;
+  color: #555;
+}
+
+.mz-field-body code {
+  font-family: "Consolas", "Monaco", "Courier New", monospace;
+  font-size: 0.9em;
+  background: #f5f5f5;
+  color: #e83e8c;
+  border: 1px solid #e1e1e1;
+  border-radius: 3px;
+  padding: 0.2em 0.4em;
+}
+
+.mz-field-body pre {
+  background: #f8f8f8;
+  color: #333;
+  border: 1px solid #e1e1e1;
+  border-radius: 6px;
+  padding: 1rem;
+  margin: 1.5rem 0;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+.mz-field-body pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.95em;
+}
+
+.mz-field-body a {
+  color: #007acc;
+  text-decoration: underline;
+  text-decoration-color: rgba(0, 122, 204, 0.4);
+  text-underline-offset: 0.2em;
+  transition: all 0.2s ease;
+}
+
+.mz-field-body a:hover {
+  text-decoration-color: #007acc;
+  color: #005999;
+}
+
+.mz-field-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  margin: 1.5rem 0;
+}
+
+.mz-field-body hr {
+  border: none;
+  border-top: 1px solid #e1e1e1;
+  margin: 2rem 0;
+}
+
+.mz-field-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  border: 1px solid #e1e1e1;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.mz-field-body th,
+.mz-field-body td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e1e1e1;
+}
+
+.mz-field-body th {
+  background: #f8f9fa;
+  font-weight: 600;
+  color: #333;
+}
+
+.mz-field-body tr:last-child td {
+  border-bottom: none;
+}
+
+/* 画像フィールド */
+.mz-field-hero-image {
+  max-width: 100%;
+  height: auto;
+  margin: 1rem 0;
+  border-radius: 8px;
+}
+
+.mz-field-avatar {
+  max-width: 200px;
+  border-radius: 50%;
+  display: block;
+  margin: 1rem 0;
+}
+
+/* 日付フィールド */
+.mz-field-date {
+  color: #888;
+  font-style: italic;
+  display: block;
+}
+
+/* ブール値フィールド */
+.mz-field-boolean {
+  padding: 0.5rem;
+  background: #f0f9ff;
+  border-left: 4px solid #0ea5e9;
+  border-radius: 4px;
+}
+
+/* タグフィールド */
+.mz-field-tags {
+  margin: 10px 0;
+}
+
+.mz-tag {
+  display: inline-block;
+  background: #e0e0e0;
+  padding: 0.2rem 0.5rem;
+  margin: 0.2rem;
+  border-radius: 3px;
+  font-size: 0.8rem;
+  color: #333;
+  font-weight: 500;
+}
+
+.mz-tag:hover {
+  background: #d0d0d0;
+}
+
+/* ギャラリーフィールド */
+.mz-field-gallery {
+  margin: 1.5rem 0;
+}
+
+.mz-field-gallery-title {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.mz-field-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.mz-field-gallery-card {
+  border-radius: 8px;
+  max-width: 100%;
+  height: auto;
+  transition: transform 0.2s ease;
+}
+
+.mz-field-gallery-card:hover {
+  transform: scale(1.02);
+}
+
+/* SNSフィールド */
+.mz-field-sns {
+  margin: 1.5rem 0;
+}
+
+.mz-field-sns-title {
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.mz-field-sns-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mz-field-sns-item {
+  margin: 0.5rem 0;
+}
+
+.mz-field-sns-link {
+  color: #0066cc;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.mz-field-sns-link:hover {
+  text-decoration: underline;
+  color: #0052a3;
+}
+
+/* 未対応フィールドタイプ */
+.mz-field-unknown {
+  background: #f5f5f5;
+  padding: 0.5rem;
+  border-radius: 4px;
+  font-family: monospace;
+  border: 1px solid #ddd;
+}
+
+.mz-field-unknown .mz-field-label {
+  color: #666;
+}
+
+.mz-field-unknown .mz-field-value {
+  color: #333;
+  font-size: 0.9rem;
+}
+
+/* レスポンシブ対応 */
+@media (max-width: 768px) {
+  .mz-field-title,
+  .mz-field-display-name {
+    font-size: 1.5rem;
+  }
+
+  .mz-field-body {
+    font-size: 0.95rem;
+    line-height: 1.7;
+  }
+
+  .mz-field-body h1 {
+    font-size: 1.5rem;
+  }
+
+  .mz-field-body h2 {
+    font-size: 1.3rem;
+  }
+
+  .mz-field-body h3 {
+    font-size: 1.1rem;
+  }
+
+  .mz-field-gallery-grid {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 0.75rem;
+  }
+
+  .mz-field-hero-image {
+    margin: 0.5rem 0;
+  }
+
+  .mz-field-avatar {
+    max-width: 150px;
+  }
+}
+
+@media (max-width: 480px) {
+  .mz-field-other-text {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mz-field-gallery-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .mz-tag {
+    font-size: 0.75rem;
+    padding: 0.15rem 0.4rem;
+  }
+}

package/index.css

@@ -0,0 +1,867 @@
+@layer reset, base, utilities, responsive,components;
+@import url("./field-renderer.css");
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  body {
+    margin: 0;
+  }
+  ul,
+  ol {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+  }
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+}
+@layer base {
+  body {
+    font-family: var(--font-sans);
+    color: var(--color-fg);
+    background: var(--color-bg);
+  }
+  :focus-visible {
+    outline: 3px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+  :where(code):not(pre code) {
+    font-family: var(--code-font);
+    font-size: 0.95em;
+    background: var(--code-inline-bg);
+    color: var(--code-inline-fg);
+    border: 1px solid var(--code-inline-border);
+    border-radius: calc(var(--code-radius) - 2px);
+    padding: 0.1em 0.35em;
+  }
+}
+@layer utilities {
+  .container {
+    width: min(1100px, 92vw);
+    margin-inline: auto;
+  }
+  .stack > * + * {
+    margin-top: var(--space-4);
+  }
+  .grid {
+    display: grid;
+    gap: var(--space-6);
+  }
+
+  /* カラム数ユーティリティ */
+  .grid-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .grid-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .grid-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  /* 自動フィット（カードギャラリー向け） */
+  .grid-auto {
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  }
+  @media (max-width: 800px) {
+    .grid-3 {
+      grid-template-columns: 1fr;
+    }
+  }
+  .cluster {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+  }
+  .table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+@layer responsive {
+  /* --- (オプション) スコープ運用したい場合は .mz-theme を body/html に付けて下の :root を .mz-theme に置換 --- */
+  :root,
+  .mz-theme {
+    --page-max: 1100px;
+    --content-gutter: clamp(16px, 4vw, 40px);
+    --bleed-max: 1920px;
+  }
+
+  /* 読み幅コンテナ（既存 .container は変更しない） */
+  .mz-container {
+    max-inline-size: var(--page-max);
+    margin-inline: auto;
+    padding-inline: var(--content-gutter);
+  }
+
+  /* 端まで。100vw/dvw フォールバック順で記述（このクラスを付けた要素のみに適用） */
+  .mz-bleed {
+    margin-inline: calc(50% - 50vw);
+    inline-size: 100vw;
+    margin-inline: calc(50% - 50dvw);
+    inline-size: 100dvw;
+  }
+  .mz-bleed--capped {
+    max-inline-size: var(--bleed-max);
+    margin-inline: auto;
+  }
+
+  /* コンテナクエリ起点（これを付けた親の中だけで cq: 系が効く） */
+  .mz-cq {
+    container-type: inline-size;
+    container-name: layout;
+  }
+
+  /* Grid プリミティブ（変数ベース） */
+  .mz-grid {
+    display: grid;
+    gap: var(--mz-gap, 1rem);
+    grid-template-columns: repeat(var(--mz-cols, 1), minmax(0, 1fr));
+  }
+  .mz-cols-1 {
+    --mz-cols: 1;
+  }
+  .mz-cols-2 {
+    --mz-cols: 2;
+  }
+  .mz-cols-3 {
+    --mz-cols: 3;
+  }
+  .mz-cols-4 {
+    --mz-cols: 4;
+  }
+
+  .mz-gap-2 {
+    --mz-gap: var(--space-2);
+  }
+  .mz-gap-3 {
+    --mz-gap: var(--space-3);
+  }
+  .mz-gap-4 {
+    --mz-gap: var(--space-4);
+  }
+  .mz-gap-6 {
+    --mz-gap: var(--space-6);
+  }
+
+  /* Viewport 変種（既存を上書きしない：mz-* のみ） */
+  @media (min-width: 768px) {
+    .md\:mz-cols-1 {
+      --mz-cols: 1;
+    }
+    .md\:mz-cols-2 {
+      --mz-cols: 2;
+    }
+    .md\:mz-cols-3 {
+      --mz-cols: 3;
+    }
+    .md\:mz-cols-4 {
+      --mz-cols: 4;
+    }
+
+    .md\:mz-gap-2 {
+      --mz-gap: var(--space-2);
+    }
+    .md\:mz-gap-3 {
+      --mz-gap: var(--space-3);
+    }
+    .md\:mz-gap-4 {
+      --mz-gap: var(--space-4);
+    }
+    .md\:mz-gap-6 {
+      --mz-gap: var(--space-6);
+    }
+  }
+  @media (min-width: 1024px) {
+    .lg\:mz-cols-1 {
+      --mz-cols: 1;
+    }
+    .lg\:mz-cols-2 {
+      --mz-cols: 2;
+    }
+    .lg\:mz-cols-3 {
+      --mz-cols: 3;
+    }
+    .lg\:mz-cols-4 {
+      --mz-cols: 4;
+    }
+
+    .lg\:mz-gap-2 {
+      --mz-gap: var(--space-2);
+    }
+    .lg\:mz-gap-3 {
+      --mz-gap: var(--space-3);
+    }
+    .lg\:mz-gap-4 {
+      --mz-gap: var(--space-4);
+    }
+    .lg\:mz-gap-6 {
+      --mz-gap: var(--space-6);
+    }
+  }
+
+  /* Container 変種（親に .mz-cq がある場合のみ効く） */
+  @container layout (min-width: 640px) {
+    .cq\:mz-cols-1 {
+      --mz-cols: 1;
+    }
+    .cq\:mz-cols-2 {
+      --mz-cols: 2;
+    }
+    .cq\:mz-cols-3 {
+      --mz-cols: 3;
+    }
+    .cq\:mz-cols-4 {
+      --mz-cols: 4;
+    }
+
+    .cq\:mz-gap-2 {
+      --mz-gap: var(--space-2);
+    }
+    .cq\:mz-gap-3 {
+      --mz-gap: var(--space-3);
+    }
+    .cq\:mz-gap-4 {
+      --mz-gap: var(--space-4);
+    }
+    .cq\:mz-gap-6 {
+      --mz-gap: var(--space-6);
+    }
+  }
+  @container layout (min-width: 960px) {
+    .cq-lg\:mz-cols-3 {
+      --mz-cols: 3;
+    }
+    .cq-lg\:mz-cols-4 {
+      --mz-cols: 4;
+    }
+    .cq-lg\:mz-gap-6 {
+      --mz-gap: var(--space-6);
+    }
+  }
+
+  /* Flow（縦積み↔横並び） */
+  .mz-flow {
+    display: flex;
+    gap: var(--mz-gap, 1rem);
+  }
+  .mz-stack {
+    flex-direction: column;
+  }
+  .mz-inline {
+    flex-direction: row;
+  }
+
+  /* セクション間隔ユーティリティ */
+  .mz-section-gap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-gap);
+  }
+  .mz-section-gap-sm {
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-gap-sm);
+  }
+  .mz-section-gap-lg {
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-gap-lg);
+  }
+
+  @media (min-width: 768px) {
+    .md\:mz-stack {
+      flex-direction: column;
+    }
+    .md\:mz-inline {
+      flex-direction: row;
+    }
+  }
+  @container layout (min-width: 640px) {
+    .cq\:mz-stack {
+      flex-direction: column;
+    }
+    .cq\:mz-inline {
+      flex-direction: row;
+    }
+  }
+}
+@layer components {
+  .mz-header {
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg);
+    padding-block: var(--space-3);
+  }
+
+  .mz-brand {
+    font-size: var(--text-lg);
+    font-weight: 700;
+    color: var(--color-fg);
+    text-decoration: none;
+  }
+  .mz-brand:hover {
+    color: var(--color-primary);
+  }
+
+  .mz-nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mz-nav a {
+    text-decoration: none;
+    color: var(--color-fg);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+  }
+  .mz-nav a:hover {
+    background: color-mix(in oklab, var(--color-primary) 15%, transparent);
+    color: var(--color-primary);
+  }
+
+  /* モバイルメニュー */
+  .mz-nav-mobile {
+    display: none;
+  }
+  .mz-nav-mobile summary {
+    cursor: pointer;
+    font-size: 1.5rem;
+    border-radius: var(--radius-sm);
+    padding: 0.25rem 0.5rem;
+    list-style: none;
+  }
+  .mz-nav-mobile summary::-webkit-details-marker {
+    display: none;
+  }
+  .mz-nav-mobile ul {
+    margin-top: var(--space-3);
+    list-style: none;
+    padding-left: 0;
+  }
+
+  @media (max-width: 768px) {
+    .mz-nav {
+      display: none;
+    }
+    .mz-nav-mobile {
+      display: block;
+    }
+  }
+  .mz-button {
+    display: inline-flex;
+    padding: 0.6em 0.9em;
+    border-radius: 8px;
+    font-weight: 600;
+  }
+  .mz-button.primary {
+    background: var(--color-primary);
+    color: #fff;
+  }
+  .mz-card {
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: var(--space-6);
+    background: #fff;
+  }
+
+  .mz-card.stack > * + * {
+    margin-top: var(--space-4);
+  }
+  .mz-breadcrumb ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .mz-breadcrumb li {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .mz-breadcrumb li + li::before {
+    content: "/";
+    opacity: 0.6;
+  }
+  .mz-breadcrumb a {
+    color: var(--color-fg);
+    text-decoration: none;
+    padding: 0.1rem 0.25rem;
+    border-radius: var(--radius-sm);
+  }
+  .mz-breadcrumb a:hover {
+    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+  }
+  .mz-breadcrumb [aria-current="page"] {
+    font-weight: 600;
+  }
+  .mz-pagination {
+    padding-block: var(--space-4);
+  }
+  .mz-pagination .mz-button {
+    min-width: 6rem;
+    text-align: center;
+  }
+  .mz-tag {
+    display: inline-block;
+    padding: 0.25em 0.75em;
+    border-radius: 999px;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    background: #f3f4f6;
+    color: #374151;
+    text-decoration: none;
+  }
+  .mz-tag:hover {
+    background: #e5e7eb;
+  }
+  /* Field */
+  .mz-field .req {
+    color: var(--color-primary);
+    margin-left: 0.25em;
+  }
+  .mz-label {
+    font-weight: 600;
+    display: inline-block;
+    margin-bottom: 0.35rem;
+  }
+  .mz-help {
+    font-size: var(--text-sm);
+    opacity: 0.8;
+    margin: 0.35rem 0 0;
+  }
+  .mz-error {
+    font-size: var(--text-sm);
+    color: #ef4444;
+    margin: 0.35rem 0 0;
+  }
+
+  /* Controls */
+  .mz-input,
+  .mz-textarea,
+  .mz-select {
+    width: 100%;
+    padding: 0.6rem 0.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    background: #fff;
+    color: var(--color-fg);
+    outline: none;
+    box-shadow: var(--shadow-1);
+  }
+  .mz-textarea {
+    resize: vertical;
+  }
+  .mz-input:focus,
+  .mz-textarea:focus,
+  .mz-select:focus {
+    outline: 3px solid
+      color-mix(in oklab, var(--color-primary) 40%, transparent);
+    outline-offset: 2px;
+    border-color: var(--color-primary);
+  }
+  [aria-invalid="true"].mz-input,
+  [aria-invalid="true"].mz-textarea,
+  [aria-invalid="true"].mz-select {
+    border-color: #ef4444;
+    box-shadow: 0 0 0 2px color-mix(in oklab, #ef4444 30%, transparent);
+  }
+
+  /* Checkbox / Radio */
+  .mz-check,
+  .mz-radio {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .mz-check input,
+  .mz-radio input {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  .catalog h2 + p {
+    margin-top: var(--space-2);
+    opacity: 0.8;
+  }
+  .stack > h2 + p {
+    margin-top: var(--space-2);
+  }
+  pre {
+    margin: 0;
+  }
+  pre:has(> code),
+  .codeblock {
+    /* .codeblock 単独でも使えるように */
+    background: var(--code-bg);
+    color: var(--code-fg);
+    border: 1px solid var(--code-border);
+    border-radius: var(--code-radius);
+    padding: 1rem 1.25rem;
+    overflow: auto;
+    box-shadow: var(--shadow-1);
+  }
+  pre > code,
+  .codeblock > code {
+    font-family: var(--code-font);
+    font-size: 0.92rem;
+    line-height: 1.6;
+    tab-size: 2;
+    white-space: pre; /* 長い行はスクロール */
+  }
+
+  /* オプション：行番号（.with-lines を pre に付与） */
+  .with-lines {
+    counter-reset: ln;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 1rem;
+  }
+  .with-lines code {
+    display: block;
+  }
+  .with-lines code > span {
+    display: block;
+    counter-increment: ln;
+  }
+  .with-lines code > span::before {
+    content: counter(ln);
+    display: inline-block;
+    min-width: 2ch;
+    margin-right: 0.75rem;
+    opacity: 0.5;
+    text-align: right;
+  }
+
+  /* 簡易シンタックス色付け（手動クラス用） */
+  .tok-keyword {
+    color: var(--syn-keyword);
+  }
+  .tok-string {
+    color: var(--syn-string);
+  }
+  .tok-number {
+    color: var(--syn-number);
+  }
+  .tok-func {
+    color: var(--syn-func);
+  }
+  .tok-comment {
+    color: var(--syn-comment);
+    font-style: italic;
+  }
+
+  /* Tabs: 見た目 */
+  .mz-tablist ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mz-tablist a {
+    text-decoration: none;
+    color: var(--color-fg);
+    padding: 0.45rem 0.75rem;
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent;
+    display: inline-block;
+  }
+  .mz-tablist a:hover {
+    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+  }
+
+  /* Panels: デフォは非表示、:target だけ表示。
+     ハッシュが無いときは 1枚目を表示する */
+  .mz-tabpanel {
+    display: none;
+    padding: var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: #fff;
+  }
+  .mz-tabs:has(.mz-tabpanel:target) .mz-tabpanel {
+    display: none;
+  }
+  .mz-tabpanel:target {
+    display: block;
+  }
+  .mz-tabs:not(:has(.mz-tabpanel:target)) .mz-tabpanel[data-default="true"] {
+    display: block;
+  }
+
+  .mz-tablist ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .mz-tablist a {
+    text-decoration: none;
+    color: var(--color-fg);
+    padding: 0.45rem 0.75rem;
+    border-radius: var(--radius-sm);
+    border: 1px solid transparent;
+    display: inline-block;
+  }
+  .mz-tablist a:hover {
+    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+  }
+  .mz-tablist a[aria-selected="true"] {
+    background: color-mix(in oklab, var(--color-primary) 16%, transparent);
+    border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+    color: var(--color-primary);
+  }
+
+  .mz-tabpanel {
+    padding: var(--space-4);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: #fff;
+  }
+  .mz-tabpanel[hidden] {
+    display: none;
+  }
+  /* Table */
+  .mz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: #fff;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+  }
+  .mz-table caption {
+    text-align: left;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+  }
+  .mz-table th,
+  .mz-table td {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid var(--color-border);
+  }
+  .mz-table thead th {
+    border-top: 0;
+    background: color-mix(in oklab, var(--color-primary) 6%, #fff);
+    text-align: left;
+  }
+  .mz-table.zebra tbody tr:nth-child(even) {
+    background: rgba(0, 0, 0, 0.025);
+  }
+  .mz-table.dense th,
+  .mz-table.dense td {
+    padding: 0.5rem 0.75rem;
+  }
+
+  /* Footer */
+  .mz-footer {
+    border-top: 1px solid var(--color-border);
+    padding-block: var(--space-4);
+    background: var(--color-bg);
+  }
+  .mz-footer a {
+    color: var(--color-fg);
+    text-decoration: none;
+  }
+  .mz-footer a:hover {
+    color: var(--color-primary);
+  }
+
+  /* Tooltip */
+  .mz-tooltip {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  .mz-tooltip::after {
+    content: attr(aria-label);
+    position: absolute;
+    white-space: nowrap;
+    background: #111;
+    color: #fff;
+    font-size: var(--text-sm);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+    opacity: 0;
+    transform: translateY(-4px);
+    pointer-events: none;
+    transition:
+      opacity 0.15s ease,
+      transform 0.15s ease;
+  }
+  .mz-tooltip:hover::after,
+  .mz-tooltip:focus-within::after {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  .mz-tooltip.top::after {
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translate(-50%, -4px);
+  }
+  .mz-tooltip.right::after {
+    left: calc(100% + 6px);
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+  .mz-tooltip.bottom::after {
+    top: calc(100% + 6px);
+    left: 50%;
+    transform: translate(-50%, 4px);
+  }
+  .mz-tooltip.left::after {
+    right: calc(100% + 6px);
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+  .mz-accordion {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 0.25rem 0.75rem;
+    background: #fff;
+  }
+  .mz-accordion > summary {
+    cursor: pointer;
+    padding: 0.5rem 0;
+  }
+  .mz-accordion[open] {
+    box-shadow: var(--shadow-1);
+  }
+  .mz-modal {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+  }
+  .mz-modal::backdrop {
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  /* Toaster positioning */
+  .mz-toaster {
+    position: fixed;
+    z-index: 9999;
+    display: grid;
+    gap: var(--space-3);
+    max-width: min(420px, 92vw);
+  }
+  .mz-toaster.bottom-right {
+    right: var(--space-4);
+    bottom: var(--space-4);
+  }
+  .mz-toaster.bottom-left {
+    left: var(--space-4);
+    bottom: var(--space-4);
+  }
+  .mz-toaster.top-right {
+    right: var(--space-4);
+    top: var(--space-4);
+  }
+  .mz-toaster.top-left {
+    left: var(--space-4);
+    top: var(--space-4);
+  }
+
+  /* Toast card */
+  .mz-toast {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: start;
+    gap: var(--space-3);
+    background: #fff;
+    color: var(--color-fg);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-2);
+    padding: var(--space-4);
+    animation: mz-toast-in 0.18s ease-out both;
+  }
+  .mz-toast.leaving {
+    animation: mz-toast-out 0.16s ease-in both;
+  }
+  .mz-toast-title {
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+  .mz-toast-body {
+    min-width: 0;
+  }
+  .mz-toast-message {
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+  .mz-toast-close {
+    appearance: none;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font-size: 1.1rem;
+    line-height: 1;
+    cursor: pointer;
+    padding: 0.25rem;
+    border-radius: var(--radius-sm);
+  }
+  .mz-toast-close:hover {
+    background: color-mix(in oklab, var(--color-primary) 12%, transparent);
+  }
+
+  /* Variants */
+  .mz-toast.info {
+    border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+  }
+  .mz-toast.success {
+    border-color: #16a34a33;
+  }
+  .mz-toast.warning {
+    border-color: #f59e0b55;
+  }
+  .mz-toast.danger {
+    border-color: #ef444466;
+  }
+
+  /* Animations */
+  @keyframes mz-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes mz-toast-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(6px);
+    }
+  }
+
+  /* ダーク（背景のみ少し暗めに） */
+  :root[data-theme="dark"] .mz-toast {
+    background: #0f141a;
+  }
+}

package/markdown.css

@@ -0,0 +1,169 @@
+/* Markdownコンテンツ専用スタイル */
+
+.markdown-content {
+  /* リセットを避けるためのベーススタイル */
+  line-height: var(--leading);
+  color: var(--color-fg);
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  line-height: 1.3;
+  font-weight: 600;
+}
+
+.markdown-content h1:first-child,
+.markdown-content h2:first-child,
+.markdown-content h3:first-child {
+  margin-top: 0;
+}
+
+.markdown-content h1 {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0.5rem;
+}
+
+.markdown-content h2 {
+  font-size: var(--text-lg);
+}
+
+.markdown-content h3 {
+  font-size: var(--text-md);
+}
+
+.markdown-content p {
+  margin-bottom: 1rem;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  margin: 1rem 0;
+  padding-left: 1.5rem;
+}
+
+.markdown-content ul {
+  list-style-type: disc;
+}
+
+.markdown-content ol {
+  list-style-type: decimal;
+}
+
+.markdown-content li {
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid var(--color-primary);
+  margin: 1.5rem 0;
+  padding: 1rem 1.5rem;
+  background: color-mix(in oklab, var(--color-primary) 5%, transparent);
+  font-style: italic;
+}
+
+.markdown-content code {
+  font-family: var(--code-font);
+  font-size: 0.9em;
+  background: var(--code-inline-bg);
+  color: var(--code-inline-fg);
+  border: 1px solid var(--code-inline-border);
+  border-radius: var(--radius-sm);
+  padding: 0.2em 0.4em;
+}
+
+.markdown-content pre {
+  background: var(--code-bg);
+  color: var(--code-fg);
+  border: 1px solid var(--code-border);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  margin: 1.5rem 0;
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+.markdown-content pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: 0.95em;
+}
+
+.markdown-content a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-decoration-color: color-mix(
+    in oklab,
+    var(--color-primary) 40%,
+    transparent
+  );
+  text-underline-offset: 0.2em;
+  transition: all 0.2s ease;
+}
+
+.markdown-content a:hover {
+  text-decoration-color: var(--color-primary);
+}
+
+.markdown-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+  margin: 1.5rem 0;
+}
+
+.markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 2rem 0;
+}
+
+.markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.markdown-content th,
+.markdown-content td {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.markdown-content th {
+  background: color-mix(in oklab, var(--color-fg) 5%, transparent);
+  font-weight: 600;
+}
+
+.markdown-content tr:last-child td {
+  border-bottom: none;
+}
+
+/* コレクション別スタイル拡張 */
+.markdown-content.works-style h1 {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+  border-bottom-width: 2px;
+}
+
+.markdown-content.blog-style {
+  font-size: var(--text-md);
+  line-height: 1.7;
+}
+
+.markdown-content.blog-style h1 {
+  text-align: center;
+  margin-bottom: 2rem;
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@mezzanine-stack/css",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "files": [
+    "index.css",
+    "field-renderer.css",
+    "markdown.css"
+  ],
+  "exports": {
+    "./index.css": "./index.css",
+    "./field-renderer.css": "./field-renderer.css",
+    "./markdown.css": "./markdown.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "devDependencies": {
+    "@mezzanine-stack/tokens": "0.1.0"
+  }
+}