/* ============================================================= akizakura.css — Akizakura kawaii-music.moe のデザイン規則（design-doc/）を 1 枚で完結させた 軽量 UI フレームワーク。 最優先方針（design-doc/layout.md）: 1. カードをネストさせない 2. 区切る線は最小限にする（まず余白で構造を作る） 3. 区切りは目（線）ではなく並び（近接・余白）から感じさせる 使い方: フォント（IBM Plex Sans JP）はこの CSS には含めない。 レンダリングをブロックしないよう、利用側の HTML で読み込むこと （typography.md / 実例は frontend/demo.html）: ============================================================= */ /* ------------------------------------------------------------- 1. トークン（design-doc/color, typography, spacing, shape） 色・余白・角丸・フォントは必ずここ経由で参照する。 ------------------------------------------------------------- */ :root { /* --- フォント（typography.md） --- */ --font: 'IBM Plex Sans JP', sans-serif; /* --- 色: ベース（color.md） --- */ --bg: #ffffff; --surface-tint: rgba(0, 0, 0, 0.03); --border: #000000; --border-focus: rgba(180, 120, 200, 0.7); /* --- 色: テキスト --- */ --text: #1a1a1a; --text-sub: #666666; --text-muted: #999999; /* --- 色: アクセント --- */ --accent: #c87ddb; --accent-2: #e8a0f0; --accent-dark: #9a4fbf; /* --- 色: 状態 --- */ --danger: #d9534f; --success: #4caf7d; /* --- 色: リンク --- */ --link-hover: var(--accent-dark); /* --- 余白スケール（spacing.md） 単位は rem --- */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; /* --- 角丸（shape.md） --- */ --radius: 0.5rem; --radius-lg: 0.75rem; /* --- レイアウト補助（design-doc では未規定。フレームワーク用の調整値） --- */ --container-max: 960px; } /* ------------------------------------------------------------- 2. ベース / リセット margin を子要素ごとに積まず、間隔は親の gap で取る方針 （card.md / list.md）に合わせ、見出し・段落の margin を 0 にする。 ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-weight: 400; color: var(--text); background: var(--bg); /* line-height はブラウザ既定をそのまま使う（typography.md） */ } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; } img, svg { display: block; max-width: 100%; } /* ------------------------------------------------------------- 3. タイポグラフィ（typography.md） ------------------------------------------------------------- */ h1 { font-size: 2rem; font-weight: 600; } h2 { font-size: 1.5rem; font-weight: 600; } h3 { font-size: 1.2rem; font-weight: 600; } /* ページ最上位の見出しを特に強調したい場合 */ .h2--hero { font-size: 1.6rem; } /* 補足テキスト / キャプション */ .text-sub { color: var(--text-sub); } .text-muted { color: var(--text-muted); } /* --- リンク（アンカー） --- */ a { color: currentColor; text-decoration: none; } a:hover { color: var(--link-hover); } /* --- サイトタイトル（ヘッダー） --- マークアップ例:

KAWAII-MUSIC.MOE

'.' は単独の に分け accent 色を当てる。 */ .site-title { font-family: var(--font); font-weight: 600; letter-spacing: 0.02em; font-size: 1.4rem; /* 見出しスケールから独立した固定値 */ } .site-title span { color: var(--accent); } /* --- コード（専用フォントは入れず monospace フォールバックのみ。typography.md） 線ではなく面（--surface-tint）で軽く囲う（layout.md）。 */ code, kbd, samp, pre { font-family: monospace; } code { font-size: 0.9em; padding: 0.1em 0.3em; border-radius: var(--radius); background: var(--surface-tint); } pre { padding: var(--space-md); border-radius: var(--radius); background: var(--surface-tint); overflow-x: auto; } pre code { padding: 0; font-size: inherit; background: none; } /* ------------------------------------------------------------- 4. レイアウト補助 「並びと余白で構造を作る」方針を支えるための最小限のユーティリティ。 ------------------------------------------------------------- */ /* 中央寄せのページ幅コンテナ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-md); } /* 縦積み: margin を積まず gap で間隔を取る。--stack-gap で上書き可。 */ .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-md)); } /* 横並び（折り返しあり）: アイコン群・タグ・ボタン列など。 */ .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-sm)); } /* ------------------------------------------------------------- 5. カード（card.md / layout.md） - 縦方向の flex + gap で内部を組む（子の margin を積まない）。 - 区切りは「枠線」か「面（薄い塗り）」のどちらか一方のみ。 - 既定は枠線も塗りも持たない素のサーフェス（余白で見せる）。 - 影は標準では使わない。 ------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: var(--card-gap, var(--space-md)); padding: var(--card-pad, var(--space-md)); border-radius: var(--radius); background: var(--bg); } /* 大きめサーフェス（ページ最上位の囲いなど） */ .card--lg { border-radius: var(--radius-lg); padding: var(--space-lg); } /* 密度を上げたいとき */ .card--dense { --card-pad: var(--space-sm); --card-gap: var(--space-sm); } /* 区切り: 枠線（構造的に独立した存在として見せたいとき） */ .card--bordered { border: 1px solid var(--border); } /* 特に強い独立性を持たせたい場合に限り太線 */ .card--strong { border: 3px solid var(--border); } /* 区切り: 面（一覧の中で軽くまとまりを示したいとき） */ .card--tint { background: var(--surface-tint); } /* 一覧中で軽く浮き上がらせたいときのみ。直下に薄くにじむ程度の弱い影。 */ .card--raised { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } /* カード内の段落間隔は親の gap で揃える（段落自身の margin は 0） */ .card > p { margin: 0; } /* ------------------------------------------------------------- 6. リスト（list.md / layout.md） -