# ログインページのブランディング

ブランディングは、ホスト型ログイン、アカウントポータル、メールの見た目を変更します。設定は次の順序で継承されます: プラットフォームの既定値、環境、アプリケーション、組織。各トークンは、その値を定義している最も具体的なレベルの値を使用します。

## 設定できる項目

- 色: `color.primary`、`color.primary_contrast`、`color.background`、`color.surface`、`color.text`、`color.text_muted`、`color.border`、`color.link`、`color.focus_ring`、`color.error`、`color.success`。いずれも sRGB の 16 進数で指定します。ライトとダークには別々の値を設定でき、`mode` は `light`、`dark` または `system` です。
- フォント: 許可されたフォントの一覧から選ぶ `font.body` と `font.heading`、またはアップロードしたフォント。`font.size_base` は 14 から 18 px です。
- 形状: `radius.card` は 0 から 24 px、`radius.control` は 0 から 16 px です。
- レイアウト: `center`、`split_left`、`split_right`。
- 画像: `logo`、`logo_height`（24 から 80 px）、`favicon`、`background_image`（`split_*` レイアウトの場合のみ）。

組織が上書きできるのは `logo` と `color.primary` のトークンのみです。組織のブランドは、組織のコンテキストが検証された場合にのみ表示されます。たとえば、有効な招待や組織ピッカーの後などです。単独の `organization` パラメータではページの見た目は変わりません。

## コントラストの保護

保存時に KeenAuth は、ライトとダークそれぞれについて次の組み合わせを確認します。

| 組み合わせ | 最小比率 |
|---|---|
| 背景上のテキスト | 4.5:1 |
| 背景上の `color.link` | 4.5:1 |
| `color.primary` 上の `color.primary_contrast` | 4.5:1 |
| 背景上のコントロールの境界線 | 3:1 |
| 背景上のフォーカスリング（`color.focus_ring`） | 3:1 |

最小値を下回る組み合わせは、Management API により `422 brand_contrast_insufficient`（RFC 9457）で拒否されます。エラーの本文には該当フィールドが示され、基準を満たす最も近い色が提案されます。提案では色相と彩度は維持され、明度のみが変更されます。ダッシュボードでも同じ提案をワンクリックで適用できます。基準を満たさない値は公開できません。エラー形式の詳細は [ブランディングを公開する](/docs/api/management/branding/publish) を参照してください。

カスタム CSS（Startup プラン）はコントラストを下げる可能性がありますが、KeenAuth はそれを修正しません。プレビューのスキャンでは問題がダッシュボードに警告として表示されます。カスタム CSS による変更の適合性はお客様の責任となります。

## アセット

画像とフォントは `POST /v1/branding/assets` でアップロードします。画像は 1 MB 以下、フォントは 300 KB 以下です。PNG、JPEG、WebP を受け付けます。ICO はファビコンのみ、WOFF2 はフォントのみで受け付けます。SVG は拒否されます。画像は PNG として再エンコードされ、最大 1024×1024 px に縮小され、メタデータは削除されます。環境ごとに 200 ファイル、合計 50 MB まで保存できます。

## カスタム CSS とテンプレート

Startup プラン以上では、カスタム CSS とページテンプレートを追加できます。ページのセキュリティ上重要な部分は保護されたレイヤーに描画され、お客様の CSS で非表示にしたり覆ったりすることはできません。対象は、同意画面のアプリケーション名と検証済みのオリジン、要求された権限の一覧、許可と拒否のボタン、セキュリティ警告、環境バナー、法的リンクです。顧客の JavaScript は、どのプランでも実行されません。

論理 CSS プロパティ（`margin-inline-start`、`margin-left` ではない）を使用してください。物理プロパティは拒否されるため、スタイルは右から左に書く言語でも機能します。詳細は [言語と右から左への表示](/docs/guides/localization) を参照してください。

## KeenAuth のマーク

ホスト型ログイン、アカウントポータル、メールには、保護されたレイヤーに「Secured by KeenAuth」という小さな行が表示されます。Business および Enterprise プランと、`development` 環境では表示されません。プランはページやメールを描画するたびに確認されるため、プランが変更された場合は再び表示されます。カスタム CSS やテキストの上書きで、この表示を隠したり変更したりすることはできません。

## 公開

変更は下書きとして保存され、公開すると反映されます。以前のバージョンは一覧表示でき、ロールバックもできます。API のページは `/docs/api/management/branding/` 配下にあり、最初のページは [ブランディングを公開する](/docs/api/management/branding/publish) です。