:root { color-scheme: light; /* 背景 */ --color-bg: #ffffff; --color-bg-subtle: #fafafa; --color-surface: #ffffff; /* 罫線・区切り */ --color-border: #d2d2d7; --color-border-subtle: #e8e8ed; /* 文字色 */ --color-text: #1d1d1f; --color-text-secondary: #6e6e73; --color-text-tertiary: #86868b; /* アクセントカラー(訪問者が選択可能。base/activeは対白コントラスト比4.5:1以上、 hoverは既存の青と同水準(4.3台)を確保済み。値は各色ここでしか定義しない ―― 切り替えUIのスウォッチもこのトークンを直接参照するため、見本色と 実際に適用される色が常に一致する)。 */ --accent-blue: #0071e3; --accent-blue-hover: #0077ed; --accent-blue-active: #006edb; --accent-blue-subtle: #f2f8fd; --accent-orange: #c05610; --accent-orange-hover: #c65910; --accent-orange-active: #b04f0e; --accent-orange-subtle: #fcf5f0; --accent-green: #0b856c; --accent-green-hover: #0b8970; --accent-green-active: #0a7a63; --accent-green-subtle: #f0fcfa; --accent-pink: #df1c77; --accent-pink-hover: #e4237d; --accent-pink-active: #cd196d; --accent-pink-subtle: #fcf0f6; --accent-purple: #8b53ec; --accent-purple-hover: #8f59ed; --accent-purple-active: #8144ea; --accent-purple-subtle: #f5f0fc; /* 現在選択中のアクセントカラー(既定はblue)。data-accent属性で切り替える。 サイト内のアクセント表示はすべてこの4変数だけを参照している。 */ --color-accent: var(--accent-blue); --color-accent-hover: var(--accent-blue-hover); --color-accent-active: var(--accent-blue-active); --color-accent-subtle: var(--accent-blue-subtle); /* 状態色 */ --color-success: #1a7f37; --color-success-subtle: #eafaf0; --color-danger: #d70015; --color-danger-subtle: #fdeeee; /* Discordログインボタンのみ、ブランド認知のため公式カラーを例外的に使用 */ --color-discord: #5865f2; --color-discord-hover: #4752c4; /* 形状 */ --radius: 8px; --radius-sm: 6px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06); --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* data-accent は に立つ(accent/ パッケージが解決したCookie値をbase.htmlが描画)。 4変数を差し替えるだけなので、サイト内の全アクセント表示がここだけで連動する。 */ :root[data-accent="orange"] { --color-accent: var(--accent-orange); --color-accent-hover: var(--accent-orange-hover); --color-accent-active: var(--accent-orange-active); --color-accent-subtle: var(--accent-orange-subtle); } :root[data-accent="green"] { --color-accent: var(--accent-green); --color-accent-hover: var(--accent-green-hover); --color-accent-active: var(--accent-green-active); --color-accent-subtle: var(--accent-green-subtle); } :root[data-accent="pink"] { --color-accent: var(--accent-pink); --color-accent-hover: var(--accent-pink-hover); --color-accent-active: var(--accent-pink-active); --color-accent-subtle: var(--accent-pink-subtle); } :root[data-accent="purple"] { --color-accent: var(--accent-purple); --color-accent-hover: var(--accent-purple-hover); --color-accent-active: var(--accent-purple-active); --color-accent-subtle: var(--accent-purple-subtle); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { background: var(--color-bg); font-family: var(--font-family); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* 日本語見出し用の折り返し調整。 デフォルトの行分割は任意の文字間で起こりうるため、「自動化」のような 単語の途中(自動/化)で不自然に改行されることがある。keep-allでCJK文字間の 任意区切りを抑制し、読点(、)など自然な区切りでのみ折り返されるようにする。 overflow-wrapは、区切りが無く1行に収まらない場合の保険(はみ出し防止)。 */ h1, h2, h3 { word-break: keep-all; overflow-wrap: break-word; } code { background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); padding: 0.1em 0.4em; border-radius: 4px; font-size: 0.9em; } .icon { display: block; } /* ===== ヘッダー ===== */ .site-header { border-bottom: 1px solid var(--color-border-subtle); position: sticky; top: 0; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); z-index: 10; } .site-header-inner { max-width: 1080px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .brand { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); } .site-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 0.9rem; } .site-nav > a:not(.btn) { color: var(--color-text-secondary); transition: color 0.15s; } .site-nav > a:not(.btn):hover { color: var(--color-text); } .nav-user { display: flex; align-items: center; gap: 0.6rem; padding-left: 1rem; border-left: 1px solid var(--color-border-subtle); } .nav-avatar { width: 26px; height: 26px; border-radius: 50%; } .nav-logout { color: var(--color-text-tertiary); font-size: 0.85rem; } .nav-logout:hover { color: var(--color-danger); } .lang-switch { display: flex; align-items: center; gap: 0.5rem; padding-left: 1rem; border-left: 1px solid var(--color-border-subtle); font-size: 0.82rem; } .lang-switch a { color: var(--color-text-tertiary); } .lang-switch a:hover { color: var(--color-text); } .lang-switch a.active { color: var(--color-accent); font-weight: 600; } /* ===== アクセントカラー切り替え ===== */ .accent-switch { display: flex; align-items: center; gap: 2px; padding-left: 1rem; border-left: 1px solid var(--color-border-subtle); } .accent-swatch { position: relative; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; } .accent-swatch:focus { outline: 2px solid var(--color-text-tertiary); outline-offset: 1px; } /* 見た目の色そのもの(スウォッチの見本 = 実際に適用される色。同じトークンを参照) */ .accent-swatch::before { content: ""; width: 16px; height: 16px; border-radius: 50%; transition: transform 0.15s ease, box-shadow 0.15s ease; } .accent-swatch-blue::before { background: var(--accent-blue); } .accent-swatch-orange::before { background: var(--accent-orange); } .accent-swatch-green::before { background: var(--accent-green); } .accent-swatch-pink::before { background: var(--accent-pink); } .accent-swatch-purple::before { background: var(--accent-purple); } .accent-swatch:hover::before { transform: scale(1.15); } /* 選択中: 白い隙間+グレーの外枠の二重リング(色だけに頼らない見分けを、 下のチェックマークと合わせて確保する) */ .accent-swatch.active::before { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text-tertiary); } .accent-swatch.active::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: translate(-50%, -65%) rotate(45deg); } /* ===== ボタン ===== */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.4rem; border-radius: var(--radius); font-weight: 500; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background-color 0.15s, border-color 0.15s, color 0.15s; } .btn-small { padding: 0.45rem 0.9rem; font-size: 0.85rem; } .btn-primary { background: var(--color-accent); color: #ffffff; } .btn-primary:hover { background: var(--color-accent-hover); } .btn-primary:active { background: var(--color-accent-active); } .btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); } .btn-ghost:hover { background: var(--color-bg-subtle); } .btn-discord { background: var(--color-discord); color: #ffffff; } .btn-discord:hover { background: var(--color-discord-hover); } .btn-danger { background: var(--color-danger-subtle); color: var(--color-danger); border-color: transparent; } .btn-danger:hover { background: #fbdfdf; } /* ===== ヒーロー ===== */ .hero { max-width: 720px; margin: 0 auto; padding: 6rem 1.5rem 4rem; text-align: center; } .hero-kicker { color: var(--color-text-tertiary); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; margin: 0 0 1rem; } .hero h1 { font-size: 2.75rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 1.25rem; /* 複数行になった際、各行の長さをできるだけ均等にし、 最終行だけ極端に短い1〜2文字が浮くのを防ぐ。 */ text-wrap: balance; } .hero-lead { color: var(--color-text-secondary); font-size: 1.05rem; margin: 0 0 2.25rem; } .hero-actions { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; } /* ===== 機能一覧 ===== */ .features { max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem 5rem; } .section-title { text-align: center; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2.5rem; } .section-title-sm { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.4rem; } .section-sub { color: var(--color-text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem; } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .feature-card { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: 1.75rem; } .feature-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-accent-subtle); color: var(--color-accent); margin-bottom: 1.1rem; } .feature-card h3 { margin: 0 0 0.5rem; font-size: 1.02rem; font-weight: 600; } .feature-card p { margin: 0; color: var(--color-text-secondary); font-size: 0.9rem; } /* ===== CTA ===== */ .cta { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 6rem; } .cta-box { background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: 14px; padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cta-box h2 { margin: 0 0 0.4rem; font-size: 1.25rem; font-weight: 600; } .cta-box p { margin: 0; color: var(--color-text-secondary); max-width: 460px; font-size: 0.92rem; } /* ===== フッター ===== */ .site-footer { text-align: center; color: var(--color-text-tertiary); font-size: 0.85rem; padding: 3rem 1.5rem 3.5rem; border-top: 1px solid var(--color-border-subtle); } .footer-nav { display: flex; justify-content: center; gap: 1.25rem; margin-top: 0.75rem; } .footer-nav a { color: var(--color-text-tertiary); } .footer-nav a:hover { color: var(--color-text); } /* ===== フラッシュメッセージ ===== */ .flash-stack { max-width: 1080px; margin: 1rem auto 0; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } .flash { padding: 0.8rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid transparent; } .flash-success { background: var(--color-success-subtle); color: var(--color-success); } .flash-error { background: var(--color-danger-subtle); color: var(--color-danger); } .notice { max-width: 1080px; margin: 1rem auto 0; padding: 0.8rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.9rem; } .notice-error { background: var(--color-danger-subtle); color: var(--color-danger); } /* ===== ページ共通見出し ===== */ .page-head { max-width: 1080px; margin: 0 auto; padding: 2.75rem 1.5rem 1.75rem; } .page-head h1 { margin: 0 0 0.4rem; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; } .page-head p { margin: 0; color: var(--color-text-secondary); font-size: 0.92rem; } .mode-switch { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 1rem; padding: 0.25rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); } .mode-switch a { padding: 0.3rem 0.75rem; border-radius: calc(var(--radius) - 0.2rem); font-size: 0.85rem; color: var(--color-text-tertiary); } .mode-switch a:hover { color: var(--color-text); } .mode-switch a.active { background: var(--color-bg); color: var(--color-accent); font-weight: 600; } /* ===== サーバー選択 ===== */ .server-section { max-width: 1080px; margin: 0 auto; padding: 0.5rem 1.5rem 3rem; } .server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .server-card { display: flex; align-items: center; gap: 0.75rem; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: 1rem; transition: border-color 0.15s; } a.server-card:hover { border-color: var(--color-accent); } .server-card-static { justify-content: space-between; } .server-icon { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; } .server-icon-fallback { display: flex; align-items: center; justify-content: center; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); color: var(--color-text-secondary); font-weight: 600; } .server-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .empty-state { color: var(--color-text-secondary); font-size: 0.92rem; } /* ===== ダッシュボード レイアウト ===== */ .dashboard { max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem 4rem; display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; } .dashboard-sidebar { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: 1.25rem; position: sticky; top: 5.5rem; } .dashboard-guild { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border-subtle); } .dashboard-guild .server-icon { width: 30px; height: 30px; } .dashboard-guild .server-name { font-size: 0.92rem; } .dashboard-nav { display: flex; flex-direction: column; gap: 0.15rem; } .dashboard-nav a { padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--color-text-secondary); } .dashboard-nav a:hover { background: var(--color-bg-subtle); color: var(--color-text); } .dashboard-nav a.active { background: var(--color-accent-subtle); color: var(--color-accent); font-weight: 600; } .dashboard-back { display: flex; align-items: center; gap: 0.3rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-subtle); color: var(--color-text-tertiary); font-size: 0.85rem; } .dashboard-back:hover { color: var(--color-text); } .dashboard-content .page-head { padding: 0 0 1.5rem; margin: 0; } /* ===== タブ切り替え(複数ページを1つに統合したダッシュボード画面用) ===== JS無し。?tab=xxx クエリパラメータをサーバー側で出し分けるだけの、 ただのリンクの並び(preview.js以外のJS依存を増やさない方針)。 */ .tab-bar { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--color-border-subtle); margin-bottom: 1.5rem; overflow-x: auto; } .tab-link { padding: 0.7rem 1rem; font-size: 0.9rem; color: var(--color-text-secondary); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-link:hover { color: var(--color-text); } .tab-link-active { color: var(--color-text); font-weight: 600; border-bottom-color: var(--color-accent); } /* ===== 概要サマリー ===== */ .summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } .summary-card { display: flex; flex-direction: column; gap: 0.4rem; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: 1.1rem; transition: border-color 0.15s; } .summary-card:hover { border-color: var(--color-accent); } .summary-label { color: var(--color-text-secondary); font-size: 0.85rem; } .summary-value { font-size: 1.15rem; font-weight: 600; } /* ===== 概要ページのチャート(メンバー数推移・参加/脱退数) ===== */ /* SVGはcharts.pyがサーバー側で組み立てる。色はここではなく生成側で 検証済みの固定色(参加/脱退)またはサイト共通の --color-accent (メンバー数推移)を直接指定しているため、ここでは形状のみを扱う。 */ .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; /* summary-gridとの間の余白。チャート側のカードにだけ付けることで、 page-head直下に来た場合に余白が二重にならないようにする。 */ margin-top: 1.5rem; } .chart-card { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } /* .panel(共有クラス、このファイルの後方 .panel 定義)が align-items: flex-start を持っており、単なる `.chart-card { align-items: stretch }` は同じ詳細度 (0,0,1,0)のセレクタ同士の後勝ちで .panel 側に上書きされてしまっていた (実際にPlaywrightでcomputed styleを確認して特定。min-width: 0だけでは 直らなかった不具合の真因)。`.panel.chart-card` で詳細度を上げて確実に勝たせる。 stretchにすることで、列方向flexの子(.chart-scroll)がカード幅まで縮み、 中の.chart-svg(min-width: 480px)がはみ出す分は.chart-scroll自身の overflow-x:autoでスクロールするようになる。 */ .panel.chart-card { align-items: stretch; } .chart-card h2 { margin: 0; font-size: 1rem; } .chart-scroll { overflow-x: auto; min-width: 0; } .chart-svg { display: block; width: 100%; height: auto; min-width: 480px; } .chart-axis { stroke: var(--color-border); stroke-width: 1; } .chart-axis-label { fill: var(--color-text-tertiary); font-size: 10px; } .chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chart-bar-join { fill: #2a78d6; } .chart-bar-leave { fill: #eb6834; } .chart-legend-label { fill: var(--color-text-secondary); font-size: 11px; dominant-baseline: middle; } /* ===== トグル一覧 ===== */ .toggle-list { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); overflow: hidden; } .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border-subtle); } .toggle-row:last-child { border-bottom: none; } .toggle-label { font-size: 0.95rem; } .switch { width: 44px; height: 25px; border-radius: 999px; background: var(--color-border); border: none; position: relative; cursor: pointer; padding: 0; flex-shrink: 0; transition: background-color 0.15s; } .switch-knob { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-sm); transition: left 0.15s; } .switch-on { background: var(--color-accent); } .switch-on .switch-knob { left: 21px; } /* ===== テーブル ===== */ .table-wrap { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; white-space: nowrap; } .data-table th, .data-table td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--color-border-subtle); } .data-table tr:last-child td { border-bottom: none; } .data-table th { color: var(--color-text-tertiary); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .table-actions form { margin: 0; } /* ===== フォーム / パネル ===== */ .panel { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .current-value { margin: 0; font-size: 0.92rem; color: var(--color-text-secondary); } .inline-form { display: flex; gap: 0.6rem; } select, input[type="text"] { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font-size: 0.9rem; font-family: inherit; } select:focus, input[type="text"]:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; } /* ===== テンプレート編集(入室・退室メッセージ / モデレーションログ) ===== */ .template-section { display: flex; flex-direction: column; gap: 1rem; } .template-section + .template-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-subtle); } .template-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .template-section-head h2 { margin: 0; font-size: 1.05rem; } .field { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; } .field label { font-size: 0.85rem; color: var(--color-text-secondary); } .field-hint { margin: 0; font-size: 0.8rem; color: var(--color-text-tertiary); } textarea { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; font-size: 0.9rem; font-family: inherit; resize: vertical; min-height: 5.5rem; } textarea:focus { outline: 2px solid var(--color-accent); outline-offset: -1px; } .preview-box { margin: 0; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-size: 0.88rem; color: var(--color-text); white-space: pre-wrap; word-break: break-word; min-height: 2.4em; } .preview-box.preview-error { color: var(--color-danger); } /* Discordの簡易Markdownレンダリング結果(static/preview.js の renderDiscordMarkdown が生成する要素)。テンプレートプレビュー(.preview-box) と埋め込みビルダーのプレビュー(.embed-card-description)の両方で共有する (同じ関数の出力を表示するため、対象セレクタも共通化している)。 完全な再現ではなく、装飾が効いていると分かる程度を狙った控えめなサイズ感。 */ .preview-box .md-h, .embed-card-description .md-h { display: block; font-weight: 700; } .preview-box .md-h1, .embed-card-description .md-h1 { font-size: 1.3em; } .preview-box .md-h2, .embed-card-description .md-h2 { font-size: 1.15em; } .preview-box .md-h3, .embed-card-description .md-h3 { font-size: 1.05em; } .preview-box .md-quote, .embed-card-description .md-quote { display: block; border-left: 3px solid var(--color-border); padding-left: 0.6em; color: var(--color-text-secondary); } .preview-box a, .embed-card-description a { color: var(--color-accent); text-decoration: underline; } .preview-box code, .embed-card-description code { background: var(--color-border-subtle); border-radius: 4px; padding: 0.1em 0.35em; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .preview-box pre, .embed-card-description pre { margin: 0.4em 0; padding: 0.6em 0.8em; background: var(--color-border-subtle); border-radius: var(--radius-sm); overflow-x: auto; } .preview-box pre code, .embed-card-description pre code { background: none; padding: 0; display: block; white-space: pre; } .template-actions { display: flex; gap: 0.6rem; } /* ===== タグ一覧(入室/退室メッセージ・モデレーションログ 共通) ===== */ .tag-reference { width: 100%; } .tag-reference-title { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--color-text-secondary); } .tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; } .tag-list li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; } .tag-list code { background: var(--color-border-subtle); border-radius: 4px; padding: 0.1em 0.4em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--color-text); flex-shrink: 0; } .tag-desc { color: var(--color-text-secondary); } /* ===== 埋め込みビルダー ===== */ .embed-builder-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 1.5rem; align-items: start; } .embed-builder-form { display: flex; flex-direction: column; gap: 1rem; } .embed-preview-wrap { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } /* Discordの埋め込みカードを模したプレビュー(完全な再現は狙わない)。 左端のカラーバーはJS側でstyle.borderLeftColorを直接書き換える。 */ .embed-card { background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.88rem; } .embed-card-title { font-weight: 700; font-size: 1rem; } .embed-card-title:empty, .embed-card-description:empty, .embed-card-footer:empty { display: none; } .embed-card-description { white-space: pre-wrap; word-break: break-word; color: var(--color-text); } .embed-card-description.preview-empty-hint { color: var(--color-text-tertiary); } .embed-card-image { max-width: 100%; border-radius: var(--radius-sm); display: block; } .embed-card-footer { color: var(--color-text-tertiary); font-size: 0.8rem; } @media (max-width: 720px) { .embed-builder-layout { grid-template-columns: 1fr; } .embed-preview-wrap { position: static; } } /* ===== 送信済み埋め込みパネル一覧 ===== */ .embed-panel-card { align-items: stretch; } .embed-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; width: 100%; } .embed-panel-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .embed-panel-details { width: 100%; } .embed-panel-details[open] { display: flex; flex-direction: column; gap: 1rem; } .embed-panel-summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--color-accent); user-select: none; } .embed-panel-summary:hover { text-decoration: underline; } .embed-panel-summary .current-value { display: inline; font-weight: 400; margin-left: 0.25rem; } .embed-panel-description { margin: 0; color: var(--color-text-secondary); font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; } .roles-title { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--color-text); } .role-pair-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; } .role-pair-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; } .role-pair-row code { background: var(--color-border-subtle); border-radius: 4px; padding: 0.15em 0.5em; font-size: 1rem; } /* ===== 規約・ポリシー等の長文ページ ===== */ .legal-updated { color: var(--color-text-tertiary) !important; font-size: 0.85rem !important; } .legal { max-width: 760px; margin: 0 auto; padding: 0 1.5rem 5rem; color: var(--color-text-secondary); font-size: 0.95rem; } .legal h2 { color: var(--color-text); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; margin: 2.5rem 0 1rem; } .legal h2:first-child { margin-top: 0; } .legal h3 { color: var(--color-text); font-size: 1rem; font-weight: 600; margin: 1.75rem 0 0.75rem; } .legal p { margin: 0 0 1rem; } .legal ul { margin: 0 0 1rem; padding-left: 1.25rem; } .legal li { margin-bottom: 0.5rem; } .legal a:not(.btn) { color: var(--color-accent); } .legal a:not(.btn):hover { text-decoration: underline; } .legal strong { color: var(--color-text); font-weight: 600; } .legal-note { font-size: 0.85rem; color: var(--color-text-tertiary); margin-top: -0.5rem; } .legal .table-wrap { margin-bottom: 1.5rem; } .legal-actions { margin: 0 0 1.5rem; } .docs-toc { background: var(--color-bg-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 2rem; } .docs-toc strong { font-size: 0.85rem; color: var(--color-text); } .docs-toc ul { margin: 0.5rem 0 0; padding-left: 1.1rem; } .docs-toc li { font-size: 0.9rem; } .legal-table { white-space: normal; } .legal-table th, .legal-table td { vertical-align: top; font-size: 0.85rem; } .legal-table td:first-child { font-weight: 600; color: var(--color-text); white-space: nowrap; } /* ===== エラー / denied ===== */ .denied { max-width: 440px; margin: 5rem auto; text-align: center; padding: 0 1.5rem; } .denied-icon { display: flex; justify-content: center; color: var(--color-text-tertiary); margin: 0 0 1.25rem; } .denied h1 { margin: 0 0 0.75rem; font-size: 1.4rem; font-weight: 600; } .denied p { color: var(--color-text-secondary); margin: 0 0 1.75rem; } /* ===== レスポンシブ ===== */ @media (max-width: 800px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } .dashboard { grid-template-columns: 1fr; } .dashboard-sidebar { position: static; } } @media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } .site-nav { gap: 0.75rem; } .nav-user span { display: none; } .accent-switch { gap: 0; padding-left: 0.5rem; } .accent-swatch { width: 22px; height: 22px; } .hero h1 { font-size: 2rem; } .cta-box { flex-direction: column; align-items: flex-start; } }