/* SiteOne UI — light (default, :root) and dark (html[data-theme='dark']) themes. The theme is set as by an inline head script (no flash of wrong theme) and toggled via [data-theme-toggle] buttons. 色の役割分担: --accent = 操作色（ボタン・リンク・フォーカス・進捗・AI生成状態）。藍。 --warning = 警告色（残量低下・注意喚起・保留状態）。琥珀。 --brand = ブランドマーク（ロゴ六角形）専用。琥珀のまま固定（両テーマ共通）。 --live = 成功・公開中。--danger = 危険・削除。 */ :root { --bg: #eef1f5; --bg-raised: #ffffff; --bg-input: #e7ebf1; --input-bg: #ffffff; /* フォーム入力欄専用（ダークでは --bg-input と同値）。汎用の薄い面は --bg-input */ --border: #c9cfda; --input-border: #8b93a1; /* 入力欄の境界専用。白地で3:1（WCAG 1.4.11）を満たす */ --text: #1e222a; --text-dim: #5d6470; --accent: #2e5f96; --accent-text: #ffffff; --danger: #d1393e; --danger-text: #b3261e; --live: #2f7d43; --warning: #d88a00; --warning-text: #9a6a00; --brand: #f4a024; --accent-rgb: 46, 95, 150; --danger-rgb: 209, 57, 62; --live-rgb: 47, 125, 67; --warning-rgb: 216, 138, 0; --preview-bg: #e2e6ec; --hover-bg: rgba(15, 23, 42, 0.06); --overlay-bg: rgba(238, 241, 245, 0.72); --code-bg: #f2f4f8; --code-text: #333333; --checker-a: #e3e7ed; --checker-b: #eef1f5; --sitemap-bg: #e6eaef; --sitemap-dot: #c9cfda; --sitemap-line: #9aa2b1; --radius: 10px; --radius-sm: 8px; --radius-lg: 14px; /* 影はテーマ別（ライトでは軽く）。直書きの rgba(0,0,0,…) は使わない */ --shadow-1: 0 1px 2px rgba(32, 32, 40, 0.07); --shadow-2: 0 8px 24px rgba(32, 32, 40, 0.1); --shadow-3: 0 16px 48px rgba(32, 32, 40, 0.14); --font: 'Hiragino Sans', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* タイプスケール（7段）。新規・改修時は rem 直書きではなくこれを使う */ --text-xs: 0.72rem; --text-sm: 0.8rem; --text-base: 0.9rem; --text-md: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.8rem; color-scheme: light; } html[data-theme='dark'] { --bg: #101014; --bg-raised: #18181f; --bg-input: #1f1f28; --input-bg: #1f1f28; --border: #343643; --input-border: #6b7080; /* 入力欄の境界専用。暗地で3:1（WCAG 1.4.11）を満たす */ --text: #e9e8e4; --text-dim: #9b9aa3; --accent: #8ab4e8; --accent-text: #0f1b2d; --danger: #e5484d; --danger-text: #f3a6a8; --live: #46a758; --warning: #f4a024; --warning-text: #f4a024; --brand: #f4a024; --accent-rgb: 138, 180, 232; --danger-rgb: 229, 72, 77; --live-rgb: 70, 167, 88; --warning-rgb: 244, 160, 36; --preview-bg: #2a2a2e; --hover-bg: rgba(255, 255, 255, 0.07); --overlay-bg: rgba(16, 16, 20, 0.65); --code-bg: #1e1e1e; --code-text: #d4d4d4; --checker-a: #1c1c22; --checker-b: #16161a; --sitemap-bg: #0e0e13; --sitemap-dot: #2a2a34; --sitemap-line: #4a4a56; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.42); color-scheme: dark; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* The UI toggles visibility via the hidden attribute; author display rules (flex/grid) must never override it. */ [hidden] { display: none !important; } body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* キーボード操作時のフォーカスリング（マウスのクリックでは出さない）。 入力欄は枠線色でフォーカスを示すため対象外。 */ :where(a, button, summary, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 動きを減らす設定のユーザーには、常時アニメーション（スピナー等）を抑制する。 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ── Top bar ── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 1.25rem; height: auto; min-height: 56px; border-bottom: 1px solid var(--border); background: var(--bg-raised); } .brand { font-weight: 700; font-size: 1.05rem; color: var(--text); letter-spacing: -0.01em; } .brand:hover { text-decoration: none; color: var(--accent); } .brand-mark { display: inline-block; vertical-align: -0.12em; color: var(--brand); } /* ビルダー等 chrome トップバーのサービスアイコン（img/icon.png） */ .brand-icon { display: block; height: 24px; width: auto; } /* クライアント組織ごとの差し替えロゴ（代理店が設定）。トップバーの高さに収める */ .brand-logo { display: block; max-height: 40px; max-width: 180px; object-fit: contain; } .client-logo-preview { display: block; max-height: 48px; max-width: 260px; object-fit: contain; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-raised); } .topbar-nav { display: flex; align-items: center; gap: 1rem; } .topbar-nav a { color: var(--text-dim); font-size: 0.9rem; } .inline { display: inline; } .link-btn { background: none; border: none; color: var(--text-dim); font: inherit; font-size: 0.9rem; cursor: pointer; } .link-btn:hover { color: var(--text); } /* ── 代理ログインバー ── 代理ログイン中のみ全ページ最上部に表示（layouts/app.blade.php。ビルダー等の chrome ページ含む）。操作色 --accent の帯で通常画面と明確に区別する。 */ .impersonation-bar { display: flex; align-items: center; gap: 0.6rem; padding: 6px 1.25rem; background: var(--accent); color: var(--accent-text); font-size: var(--text-sm); } .impersonation-bar svg { flex: none; } .impersonation-bar-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .impersonation-bar-btn { flex: none; background: var(--accent-text); color: var(--accent); padding: 0.22rem 0.8rem; font-size: var(--text-sm); } /* ── Buttons ── */ .btn { display: inline-block; background: var(--accent); color: var(--accent-text); border: none; border-radius: var(--radius); padding: 0.65rem 1.4rem; font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease; } .btn:hover { filter: brightness(1.08); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-sm { padding: 0.42rem 0.95rem; font-size: 0.85rem; } .btn-lg { padding: 0.85rem 2rem; font-size: 1.05rem; } .btn-block { width: 100%; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--text-dim); filter: none; } /* ── Landing ── */ .main { max-width: min(1400px, 100%); margin: 0 auto; padding: 2rem 1.5rem; } .hero { text-align: center; padding: 14vh 1rem 6rem; } .hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .hero-sub { color: var(--text-dim); margin-top: 1.25rem; font-size: 1.08rem; line-height: 1.8; } .hero-actions { margin-top: 2.5rem; display: flex; gap: 1rem; justify-content: center; } .hero-steps { margin-top: 5rem; display: flex; gap: 2.5rem; justify-content: center; flex-wrap: wrap; color: var(--text-dim); font-size: 0.95rem; } .step { display: flex; align-items: center; gap: 0.6rem; } .step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); display: grid; place-items: center; font-size: 0.8rem; color: var(--accent); } /* ── Auth ── */ .auth-card { max-width: 400px; margin: 8vh auto 0; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; } .auth-card h1 { font-size: var(--text-xl); margin-bottom: 1.5rem; } .auth-card label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1rem; } .field-hint { font-size: 0.74rem; color: var(--text-dim); margin: -0.5rem 0 1rem; line-height: 1.6; } .field-hint strong { color: var(--text); } .auth-card input { width: 100%; margin-top: 0.35rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; color: var(--text); font: inherit; font-size: 0.95rem; } .auth-card input:focus { outline: none; border-color: var(--accent); } .auth-card label.auth-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .auth-card .auth-check input[type='checkbox'] { width: auto; margin-top: 0; accent-color: var(--accent); flex: none; } .auth-alt { margin-top: 1.25rem; font-size: 0.85rem; color: var(--text-dim); text-align: center; } .form-errors { color: var(--danger); font-size: 0.85rem; margin: 0.5rem 0 1rem; } /* ── OAuth 同意画面（MCP接続） ── */ .oauth-lead { font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.25rem; } .oauth-account { display: flex; flex-direction: column; gap: 0.2rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; margin-bottom: 1.25rem; } .oauth-account-label { font-size: 0.74rem; color: var(--text-dim); } .oauth-account-value { font-size: 0.9rem; font-weight: 600; } .oauth-scopes { list-style: none; margin: 0 0 1.25rem; padding: 0; } .oauth-scopes li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-dim); padding: 0.3rem 0; } .oauth-scopes li svg { color: var(--accent); flex: none; } .oauth-note { font-size: 0.78rem; color: var(--text-dim); margin-bottom: 1.5rem; } .oauth-actions { display: flex; gap: 0.75rem; } .oauth-actions form { flex: 1; } .oauth-actions .btn { width: 100%; } /* ── Dashboard ── */ .dashboard-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .dashboard h1 { font-size: var(--text-xl); } .quota-pill, .plan-pill { font-size: 0.82rem; color: var(--text-dim); background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; } .quota-expired { color: var(--danger); font-weight: 600; } /* 残量が少ないときだけ出す控えめな通知（普段は非表示） */ .usage-notice { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0.5rem 0 0; padding: 0.7rem 1rem; border-radius: var(--radius); font-size: 0.88rem; border: 1px solid var(--border); } .usage-notice .btn { flex-shrink: 0; } .usage-notice > svg { width: 16px; height: 16px; flex: none; } .usage-notice-low { background: color-mix(in srgb, var(--warning) 10%, transparent); border-color: color-mix(in srgb, var(--warning) 40%, var(--border)); } .usage-notice-low > svg { color: var(--warning-text); } .usage-notice-exhausted { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); } .usage-notice-exhausted > svg { color: var(--danger); } /* 主要指標のサマリータイル。数値の確認とページ内ジャンプ（残高→#credits）を兼ねる */ .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin: 1.5rem 0 0; } .dash-stat { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.95rem 1.1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; color: var(--text); } a.dash-stat { transition: border-color 0.15s ease; } a.dash-stat:hover { border-color: var(--accent); text-decoration: none; } .dash-stat-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-dim); } .dash-stat-label svg { width: 14px; height: 14px; flex: none; color: var(--accent); } .dash-stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .dash-stat-unit { font-size: 0.8rem; font-weight: 500; color: var(--text-dim); margin-left: 0.15rem; } .dash-stat-sub { font-size: 0.74rem; color: var(--text-dim); } /* セクション見出し（アイコン＋タイトル＋件数/上限）。アンカー着地時の余白も確保 */ .dash-section-head { display: flex; align-items: center; gap: 0.65rem; margin: 2.5rem 0 1rem; scroll-margin-top: 1rem; } .dash-section-head h2 { display: flex; align-items: center; font-size: 1.15rem; letter-spacing: -0.01em; } .section-icon { display: inline-flex; color: var(--accent); flex: none; margin-right: 0.5rem; } .section-icon svg { width: 17px; height: 17px; } .section-count { font-size: 0.76rem; color: var(--text-dim); background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 0.14rem 0.6rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .create-row { display: flex; align-items: center; gap: 0.75rem; margin: 1.75rem 0; flex-wrap: wrap; } .create-row .create-site { margin: 0; flex: 1; min-width: 240px; } .create-or { color: var(--text-dim); font-size: 0.85rem; } .create-site { display: flex; gap: 0.75rem; margin: 1.75rem 0; } .create-site input { flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.65rem 0.9rem; color: var(--text); font: inherit; } .create-site input:focus { outline: none; border-color: var(--accent); } .dashboard .create-row { margin: 0 0 1.1rem; } .dashboard .create-row .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; } .dashboard .create-row .btn svg { width: 15px; height: 15px; flex: none; } .site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 0.5rem; } .site-card { position: relative; display: block; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .site-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-2); } .site-card-link { display: block; color: var(--text); } /* カード上部のサムネイル（トップページのOGP画像相当）。比率はOGP標準の1200×630に 合わせ、カードのパディングを打ち消して上辺いっぱいに敷く。画像が無いサイトは 画像アイコンのプレースホルダーで高さを揃える */ .site-card-thumb { margin: -1.25rem -1.25rem 0.95rem; aspect-ratio: 1.91 / 1; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; overflow: hidden; background: var(--bg-input); border-bottom: 1px solid var(--border); display: grid; place-items: center; } .site-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .site-card-thumb svg { width: 26px; height: 26px; color: var(--text-dim); opacity: 0.55; } /* サムネイルの上に重なる歯車（クライアント管理）は、画像と被っても見えるよう背景を敷く */ .site-card:has(.site-card-thumb) .site-card-gear { background: color-mix(in srgb, var(--bg-raised) 85%, transparent); } .site-card:has(.site-card-thumb) .site-card-gear:hover, .site-card:has(.site-card-thumb) .site-card-gear[aria-expanded="true"] { background: var(--bg-raised); } .site-card-link:hover { text-decoration: none; } /* カード全体をクリック範囲にする（お知らせ欄が無い場合の空白部分も含む） */ .site-card-link::after { content: ""; position: absolute; inset: 0; z-index: 0; } .site-card-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.35; } /* バッジを1行目、URL＋統計チップを2行目に積む（狭い幅で「公開中」が折り返さないように）。 */ .site-card-meta { margin-top: 0.7rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; } .site-card-meta .badge { white-space: nowrap; } .site-card-meta-line { display: flex; align-items: center; gap: 0.5rem; width: 100%; flex-wrap: wrap; } .site-card-url { font-size: 0.78rem; color: var(--text-dim); word-break: break-all; } .site-card-stats { margin-left: auto; display: flex; gap: 0.3rem; } .site-card-pv { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--text-dim); background: var(--bg-input); border-radius: 999px; padding: 0.16rem 0.55rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .site-card-pv svg { width: 12px; height: 12px; flex: none; opacity: 0.8; } .site-card-actions { position: relative; z-index: 1; margin-top: 0.85rem; padding-top: 0.55rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; } .site-card-action-btn { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; } .site-card-actions a, .site-card-action-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-dim); padding: 0.3rem 0.55rem; border-radius: var(--radius-sm); } .site-card-actions > :first-child { margin-left: -0.55rem; } .site-card-actions a:hover, .site-card-action-btn:hover { color: var(--accent); background: var(--hover-bg); text-decoration: none; } /* カード右上の歯車メニュー（クライアント管理ページ）。カード全面リンク（.site-card-link::after）より手前に置く */ .site-card-menu { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; } .site-card:has(.site-card-menu) .site-card-name { padding-right: 2rem; } .site-card-gear { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-dim); cursor: pointer; } .site-card-gear:hover, .site-card-gear[aria-expanded="true"] { color: var(--text); background: var(--hover-bg); } .site-card-gear svg { width: 16px; height: 16px; } /* 未読の修正依頼があることを示すドット（メニュー内の件数バッジと対応） */ .site-card-gear-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 1px solid var(--bg-raised); } .site-card-dropdown { min-width: 190px; } /* hover時のtransformでカードがスタッキングコンテキストになるため、メニュー展開中は隣接カードより前面へ */ .site-card:has(.site-card-dropdown:not([hidden])) { z-index: 5; } .menu-item-danger, .menu-item-danger svg { color: var(--danger); } .menu-item-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); } .empty-note { color: var(--text-dim); } .dashboard .site-grid .empty-note { grid-column: 1 / -1; margin: 0; padding: 1.1rem 1.25rem; border: 1px dashed var(--border); border-radius: 12px; font-size: 0.88rem; } .badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); } .badge-live { border-color: color-mix(in srgb, var(--live) 50%, transparent); color: var(--live); background: rgba(var(--live-rgb), 0.1); } .badge-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } a.badge-live:hover { text-decoration: none; background: rgba(var(--live-rgb), 0.16); } .badge-scheduled { border-color: var(--accent); color: var(--accent); } /* 非公開（公開後に停止）は注意色、下書きは破線。状態を一目で区別できるようにする。 .badge-draft は管理画面（デザインナレッジ）に塗りつぶし版の同名クラスが後方に あるため、ダッシュボード側は .dashboard でスコープして破線を確定させる。 */ .badge-off { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); color: var(--warning-text); background: rgba(var(--warning-rgb), 0.08); } .dashboard .badge-draft { border: 1px dashed var(--border); background: transparent; color: var(--text-dim); } /* チーム・購入セクションはパネルにまとめ、サイト一覧との区切りを明確にする */ .dashboard .team-section, .dashboard .billing-section { margin-top: 2.5rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-raised); scroll-margin-top: 1rem; } .dashboard .team-section h2, .dashboard .billing-section h2 { display: flex; align-items: center; font-size: 1.05rem; } .dashboard .credit-option { background: var(--bg); } .dashboard .billing-section .credit-total { font-size: 0.9rem; } .dashboard .billing-section .credit-total strong { font-size: 1.25rem; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } .dashboard .create-row { flex-direction: column; align-items: stretch; } .dashboard .create-row .create-site { min-width: 0; flex-wrap: wrap; } .dashboard .create-site input { flex: 1 1 100%; } .dashboard .create-site .role-select { flex: 1 1 auto; } .dashboard .create-or { display: none; } } /* ── Builder ── */ /* flex column にして、トップバーが折り返して高さが変わっても本体が正しく残りを埋めるようにする */ .builder-body { overflow: hidden; display: flex; flex-direction: column; height: 100vh; height: 100dvh; } .builder-main { padding: 0; flex: 1 1 auto; min-height: 0; } .builder-topbar .topbar-left, .builder-topbar .topbar-right { display: flex; align-items: center; gap: 0.75rem; } .back-link { color: var(--text-dim); font-size: 1.1rem; } .back-link:hover { color: var(--text); text-decoration: none; } .site-title { font-weight: 600; font-size: 0.95rem; color: var(--text); } a.site-title:hover { color: var(--accent); text-decoration: none; } /* サイト配下のサブページ（投稿管理など）でヘッダーに出す現在地ラベル */ .site-chrome-label { padding-left: 0.6rem; margin-left: 0.15rem; border-left: 1px solid var(--border); color: var(--text-dim); font-size: 0.85rem; } #page-select { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font: inherit; font-size: 0.85rem; max-width: 220px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .page-select-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-dim); } /* Undo / redo — a connected icon pair (browser back/forward convention) */ .history-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .history-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; cursor: pointer; background: none; border: none; color: var(--text-dim); } .history-toggle button + button { border-left: 1px solid var(--border); } .history-toggle button:hover:not(:disabled) { color: var(--text); background: var(--bg-input); } .history-toggle button:disabled { opacity: 0.32; cursor: default; } .history-toggle button svg { width: 15px; height: 15px; } /* Topbar overflow menu */ .topbar-menu { position: relative; } .topbar-dropdown { position: absolute; right: 0; top: calc(100% + 6px); z-index: 950; min-width: 230px; padding: 0.4rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 0.1rem; } .menu-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; padding: 0.5rem 0.65rem; color: var(--text); font: inherit; font-size: 0.86rem; text-align: left; } .menu-item:hover { background: var(--hover-bg); } .menu-item svg { width: 15px; height: 15px; flex: none; color: var(--text-dim); } a.menu-item { color: var(--text); } a.menu-item:hover { text-decoration: none; } .menu-item:disabled { opacity: 0.45; cursor: default; } .menu-item:disabled:hover { background: none; } .menu-item svg { width: 15px; height: 15px; color: var(--text-dim); flex: none; } .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0.65rem; border-top: 1px solid var(--border); margin-top: 0.25rem; } .menu-row-label { font-size: 0.8rem; color: var(--text-dim); } /* 小さな×クローズボタン（ウィザードのステップ画面などで使用） */ .guide-dismiss { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.1rem 0.3rem; } .guide-dismiss:hover { color: var(--text); } /* Welcome suggestion chips */ .suggestion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; text-align: left; } .suggestion-grid .suggestion { margin-bottom: 0; } /* Welcome: how-to-start choice cards */ .start-choice { display: flex; flex-direction: column; gap: 0.7rem; } .start-card { position: relative; text-align: left; cursor: pointer; font: inherit; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; color: var(--text); display: flex; flex-direction: column; gap: 0.3rem; transition: border-color 0.15s ease, transform 0.15s ease; } .start-card:hover { border-color: var(--accent); transform: translateY(-1px); } .start-card-head { display: flex; align-items: center; gap: 0.5rem; } .start-card-icon { line-height: 1; color: var(--accent); display: inline-flex; flex: none; } .start-card-icon svg { width: 20px; height: 20px; } .start-card-title { font-weight: 700; font-size: 0.95rem; } .start-card-desc { font-size: 0.78rem; color: var(--text-dim); line-height: 1.55; } .start-card-badge { position: absolute; top: 0.8rem; right: 0.9rem; background: var(--accent); color: var(--accent-text); font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.5rem; } .start-templates { display: flex; flex-direction: column; gap: 0.7rem; } .start-back { align-self: center; font-size: 0.8rem; } /* Site wizard — 画面を大きく使うアプリ風ダイアログ。 ヘッダー・進捗バー・フッターを固定し、本文だけをスクロールさせる。 これで「戻る / 保存 / 次へ」が常に見え、長いステップでも操作に迷わない。 高さは内容に合わせて伸縮（短いステップで間延びしない）し、上限を超えたら本文がスクロール。 セレクタを .modal.wizard-modal にしているのは、後方で定義される .modal の width / padding / gap に同じ詳細度で負けないようにするため。 */ .modal.wizard-modal { width: min(1100px, 96vw); min-height: min(620px, 94vh); max-height: min(880px, 94vh); padding: 0; gap: 0; overflow: hidden; } .wizard-head { display: flex; align-items: center; gap: 0.7rem; flex: none; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); } .wizard-head strong { flex: 1; font-size: 1.05rem; } .wizard-progress { font-size: 0.8rem; color: var(--text-dim); flex: none; } /* ステップの進み具合バー（ヘッダー直下） */ .wizard-bar { flex: none; height: 3px; background: var(--border); } .wizard-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s ease; } /* 本文。左右paddingはclampで、広い画面でも読みやすい行長（800px前後）に保つ */ .wizard-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem clamp(1.5rem, 13%, 9rem) 2rem; } /* 作り方の選択画面だけ、内容を縦中央に置く */ .wizard-body.wizard-body-center { justify-content: center; } .wizard-question { font-size: 1.15rem; font-weight: 700; display: flex; flex-direction: column; gap: 0.35rem; } .wizard-hint { font-size: 0.82rem; font-weight: 400; color: var(--text-dim); line-height: 1.6; } .wizard-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; } .wizard-chip { background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.95rem; color: var(--text); font: inherit; font-size: 0.88rem; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .wizard-chip:hover { border-color: var(--accent); } .wizard-chip.on { background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); font-weight: 600; } .wizard-chip.fixed { cursor: default; opacity: 0.8; } /* Wizard: カラー選択（色イメージのチップ＋実色パレット） */ .wizard-chip-color { display: inline-flex; align-items: center; gap: 0.4rem; } .wizard-color-dot { width: 0.8rem; height: 0.8rem; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } .wizard-chip-sub { color: var(--text-dim); font-size: 0.74rem; } .wizard-chip.on .wizard-chip-sub { color: var(--text); } .wizard-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 0.6rem; } .wizard-palette { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; cursor: pointer; font: inherit; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem; color: var(--text); transition: border-color 0.12s ease, transform 0.12s ease; } .wizard-palette:hover { border-color: var(--accent); transform: translateY(-1px); } .wizard-palette.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .wizard-swatches { display: flex; gap: 0.35rem; } .wizard-swatch-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .wizard-swatch { width: 100%; height: 2rem; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); } .wizard-swatch-label { font-size: 0.66rem; color: var(--text-dim); } .wizard-palette-name { font-size: 0.82rem; font-weight: 600; } .wizard-palette-auto { align-items: center; justify-content: center; text-align: center; min-height: 92px; color: var(--text-dim); } .wizard-input, .wizard-textarea { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.65rem 0.8rem; color: var(--text); font: inherit; font-size: 0.95rem; line-height: 1.6; } .wizard-input:focus, .wizard-textarea:focus { outline: none; border-color: var(--accent); } .wizard-textarea { resize: vertical; min-height: 110px; } /* ページ選択の「AIにおまかせで追加」チェック */ .wizard-check { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.84rem; cursor: pointer; } .wizard-check input[type='checkbox'] { width: auto; margin-top: 0.2rem; accent-color: var(--accent); flex: none; } /* ページ別の内容ステップ：残りをまとめて飛ばして確認画面へ進むボタン */ .wizard-skip-btn { align-self: flex-start; color: var(--text-dim); } .wizard-footer { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex: none; padding: 0.85rem 1.5rem; border-top: 1px solid var(--border); } .wizard-footer-right { display: flex; align-items: center; gap: 0.6rem; } /* 自動保存の状態表示（保存されるたびに時刻を更新） */ .wizard-save-status { font-size: 0.76rem; color: var(--text-dim); } .wizard-summary { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; } .wizard-summary-row { display: flex; gap: 0.7rem; font-size: 0.88rem; line-height: 1.6; } .wizard-summary-label { flex: none; width: 5em; color: var(--text-dim); } .wizard-summary-value { flex: 1; white-space: pre-wrap; word-break: break-word; } /* 確認画面：既定は入力項目の一覧、「編集する」で入力欄に切り替わる */ .wizard-confirm { display: flex; flex-direction: column; gap: 0.6rem; } .wizard-edit-btn { align-self: flex-start; } .wizard-confirm-text { min-height: 320px; } /* Wizard: 入り口（簡単 / 詳細 の選択）。大画面ではカードが間延びしないよう幅を絞って中央へ */ .wizard-modes { display: flex; flex-direction: column; gap: 0.8rem; width: 100%; max-width: 620px; margin: 0 auto; } .wizard-body-center .wizard-hint { text-align: center; } /* 書きかけがあるときだけ出す「入力をクリアして最初からやり直す」導線 */ .wizard-reset-btn { align-self: center; margin-top: 0.4rem; color: var(--text-dim); } .wizard-mode-card { position: relative; display: flex; align-items: center; gap: 0.9rem; text-align: left; cursor: pointer; font: inherit; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.05rem 1.1rem; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; } .wizard-mode-card:hover { border-color: var(--accent); transform: translateY(-1px); } .wizard-mode-icon { line-height: 1; flex: none; color: var(--accent); display: inline-flex; } .wizard-mode-icon svg { width: 26px; height: 26px; } /* ウィザードはモーダルが .builder の外にあるため、ボタン内アイコンの大きさをここで指定 */ .wizard-modal .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .wizard-modal .btn svg { width: 15px; height: 15px; flex-shrink: 0; } .wizard-mode-text { display: flex; flex-direction: column; gap: 0.25rem; } .wizard-mode-title { font-weight: 700; font-size: 1rem; } .wizard-mode-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.55; } .wizard-mode-badge { position: absolute; top: 0.8rem; right: 0.9rem; background: var(--accent); color: var(--accent-text); font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.15rem 0.5rem; } /* Wizard: ヒアリングシート読み込み（CSVインポート） 3つの手順を1枚のカードに区切り線で積み、流れがひと目で分かるようにする */ .sheet-import { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; } .sheet-import-step { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.1rem 1.2rem; } .sheet-import-step + .sheet-import-step { border-top: 1px solid var(--border); } .sheet-step-num { flex: none; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--accent); color: var(--accent-text); display: grid; place-items: center; font-size: 0.9rem; font-weight: 700; } .sheet-import-step > div { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; min-width: 0; } /* 大きくなったモーダルでボタンが横幅いっぱいに伸びないよう、内容幅に合わせる */ .sheet-import-step .btn { align-self: flex-start; } .sheet-import-step p { font-size: 0.95rem; font-weight: 600; margin: 0; line-height: 1.55; } .sheet-import-step p.muted { font-size: 0.76rem; font-weight: 400; color: var(--text-dim); } .sheet-drop { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; align-self: flex-start; cursor: pointer; font-size: 0.85rem; color: var(--text); background: var(--bg-input); border: 1px dashed var(--border); border-radius: var(--radius); padding: 0.7rem 0.95rem; transition: border-color 0.12s ease, background 0.12s ease; } .sheet-drop:hover, .sheet-drop.drag { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } .sheet-drop svg { width: 16px; height: 16px; flex-shrink: 0; } .sheet-import-step .sheet-import-result { font-size: 0.82rem; font-weight: 400; } .sheet-import-result { font-size: 0.8rem; margin: 0; line-height: 1.5; } .sheet-import-result.ok { color: var(--live); } .sheet-import-result.err { color: var(--danger); } /* ヒアリングシートの確認画面：質問を上、回答を下に積んで読みやすく */ .wizard-summary.sheet .wizard-summary-row { flex-direction: column; gap: 0.12rem; } .wizard-summary.sheet .wizard-summary-label { width: auto; font-size: 0.76rem; font-weight: 600; } /* スマホではウィザードを全画面にして、入力領域を最大限確保する */ @media (max-width: 640px) { .modal.wizard-modal { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; border: none; } .wizard-head { padding: 0.8rem 1rem; } .wizard-body { padding: 1rem 1rem 1.5rem; } .wizard-footer { padding: 0.7rem 1rem; } .wizard-save-btn span { display: none; } /* アイコンのみ表示 */ .wizard-save-status { display: none; } } /* Collapsible sections (履歴ビュー) */ .panel-fold { border-top: 1px solid var(--border); } .panel-fold summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.85rem; cursor: pointer; list-style: none; user-select: none; border-radius: var(--radius-sm); } .panel-fold summary::-webkit-details-marker { display: none; } .panel-fold summary:hover { background: var(--bg-input); } /* 開閉アイコン。閉じているとき「›」、開くと90度回って下向きになる。 */ .fold-chevron { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--text-dim); transition: transform 0.15s ease, color 0.12s ease; } .panel-fold[open] > summary .fold-chevron { transform: rotate(90deg); } .panel-fold summary:hover .fold-chevron { color: var(--text); } .panel-fold summary strong { font-size: 0.85rem; flex: none; white-space: nowrap; } .fold-spacer { flex: 1; } .panel-fold > div { padding-bottom: 0.5rem; } /* リスト最終行の下線は次パネルの上線と二重に見えるので消す。 */ .panel-fold .generation-item:last-child, .panel-fold .snapshot-item:last-child { border-bottom: none; } /* 履歴系リストの「すべて表示／閉じる」トグル */ .list-more { display: block; width: calc(100% - 1.9rem); margin: 0.45rem 0.95rem 0.25rem; padding: 0.45rem; background: none; border: 1px dashed var(--border); border-radius: 6px; color: var(--text-dim); font: inherit; font-size: 0.78rem; cursor: pointer; text-align: center; transition: color 0.12s ease, border-color 0.12s ease; } .list-more:hover { color: var(--text); border-color: var(--accent); } /* Publish success modal */ .publish-modal { text-align: center; align-items: center; } .publish-celebrate { line-height: 1; color: var(--accent); } .publish-url-row { width: 100%; } .publish-url { display: block; background: var(--bg-input); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; font-size: 0.92rem; word-break: break-all; color: var(--text); font-weight: 600; } .publish-actions { display: flex; gap: 0.6rem; justify-content: center; } .publish-modal .modal-actions { justify-content: center; } .builder { display: grid; grid-template-columns: var(--dock-w, 420px) 1fr; /* minmax(0, …): grid items must never stretch the row to their content height — a long chat history would otherwise blow the whole layout past the viewport and kill every scroll area. */ grid-template-rows: minmax(0, 1fr); height: 100%; /* .builder-main(flex:1)の高さに追従。トップバー可変高でも崩れない */ position: relative; /* サイドバー幅リサイズハンドル(.dock-resize)の基準 */ } .chat-panel { display: flex; flex-direction: column; border-right: 1px solid var(--border); /* プレビュー側(白)と区別するため地をグレーにし、吹き出し・コンポーザーを 白カードとして浮かせる。ダークでは --bg が最暗面で同じ関係になる。 */ background: var(--bg); min-width: 0; min-height: 0; } /* AI無効のクライアント: チャット／AI編集を隠し、プレビューを全幅にする。 要素はDOMに残すので builder.js は通常どおり初期化される（操作だけ不可）。 */ .builder.builder--no-ai { grid-template-columns: 1fr; } .builder.builder--no-ai .chat-panel, .builder.builder--no-ai .dock-resize, .builder.builder--no-ai #chat-fab, .builder.builder--no-ai #editor-ai-btn { display: none !important; } /* コード編集が無効なクライアント: コードビューを開けないようにする安全網 （メニュー項目は非表示、switchView でも遮断済み）。 */ .builder.builder--no-code .view-editor { display: none !important; } /* ── チャット表示モード: 最小化（chat-min）/ 小窓（chat-float） ── どちらもプレビューを全幅にする。最小化はチャットを完全に隠して 左下のFABだけ残し、小窓はチャットボット風の固定ウィンドウになる。 */ body.chat-min .builder, body.chat-float .builder { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); /* モバイルの2行レイアウトでも空行を残さない */ } body.chat-min .chat-panel { display: none; } body.chat-float .chat-panel { position: fixed; left: 14px; bottom: 14px; z-index: 70; width: min(420px, calc(100vw - 28px)); height: min(640px, calc(100vh - 56px - 28px)); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; } /* ── 小窓モード: ツールバーをつかんで移動 / 端をつかんでリサイズ ── 位置・サイズは JS が left/top/width/height をインラインで上書きする。 ハンドルは小窓のときだけ表示し、ドック/最小化では無効化する。 */ body.chat-float .chat-panel .view-toolbar { cursor: move; } body.chat-float .chat-panel .view-toolbar button { cursor: pointer; } body.chat-float .chat-panel.is-dragging, body.chat-float .chat-panel.is-resizing { user-select: none; } body.chat-float .chat-panel.is-dragging .view-toolbar { cursor: grabbing; } .chat-resize { position: absolute; z-index: 6; display: none; touch-action: none; } body.chat-float .chat-panel > .chat-resize { display: block; } .chat-resize-e { top: 16px; bottom: 16px; right: 0; width: 7px; cursor: ew-resize; } .chat-resize-w { top: 16px; bottom: 16px; left: 0; width: 7px; cursor: ew-resize; } .chat-resize-s { left: 16px; right: 16px; bottom: 0; height: 7px; cursor: ns-resize; } .chat-resize-se { right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; } .chat-resize-sw { left: 0; bottom: 0; width: 18px; height: 18px; cursor: nesw-resize; } /* 右下だけは小さなグリップを描いて、リサイズできることに気づきやすくする */ .chat-resize-se::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); opacity: 0.55; border-bottom-right-radius: 4px; } /* ── ドック（サイドバー）の横幅リサイズ ── サイドバーとプレビューの境目をドラッグして横幅を変える。dock モードのみ。 幅は --dock-w に保持し、JS がサイトごとに記憶する。 ダブルクリックで既定幅（420px）に戻す。 */ .dock-resize { position: absolute; top: 0; bottom: 0; left: var(--dock-w, 420px); width: 11px; margin-left: -6px; z-index: 30; cursor: ew-resize; touch-action: none; } /* 小窓・最小化ではプレビューが全幅で境目が無いので隠す */ body.chat-min .dock-resize, body.chat-float .dock-resize { display: none; } /* つかめる場所を示す細い線（ホバー／ドラッグ中だけ色を付ける） */ .dock-resize::before { content: ''; position: absolute; top: 0; bottom: 0; left: 5px; width: 1px; background: transparent; transition: background 0.15s ease; } .dock-resize:hover::before, .builder.is-dock-resizing .dock-resize::before { background: var(--accent); } /* キーボードフォーカス時は線を太く色付けして掴んでいる位置を可視化する */ .dock-resize:focus-visible { outline: none; } .dock-resize:focus-visible::before { background: var(--accent); width: 3px; left: 4px; } .builder.is-dock-resizing { user-select: none; } .chat-fab { position: fixed; left: 16px; bottom: 16px; z-index: 70; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2); transition: transform 0.12s ease; } .chat-fab[hidden] { display: none; } .chat-fab:hover { transform: scale(1.07); } .chat-fab svg { width: 22px; height: 22px; } /* 生成中はゆっくり明滅して進行中を知らせる */ .chat-fab.is-generating { animation: fab-pulse 1.4s ease-in-out infinite; } @keyframes fab-pulse { 0%, 100% { box-shadow: var(--shadow-2); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); } } /* 最小化中に生成が完了したら未読ドットを出す */ .chat-fab.has-news::after { content: ''; position: absolute; top: 1px; right: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); } .chat-messages { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; } .msg { border-radius: 12px; padding: 0.7rem 0.95rem; font-size: 0.9rem; line-height: 1.65; white-space: pre-wrap; word-break: break-word; max-width: 92%; } /* 自分の発言は藍のトーンで右寄せ、AIの返答は白カードで左寄せ。 地色(--bg)に対して色相と面の高さで送り手を見分けられるようにする。 */ .msg-user { background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.22); align-self: flex-end; } .msg-ai { background: var(--bg-raised); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); align-self: flex-start; } .msg-error { background: rgba(var(--danger-rgb), 0.1); border: 1px solid rgba(var(--danger-rgb), 0.35); color: var(--danger-text); align-self: flex-start; } .chat-welcome { text-align: center; margin: auto 0; padding: 1rem; } .chat-welcome h2 { font-size: 1.22rem; letter-spacing: -0.01em; margin-bottom: 0.7rem; } .chat-welcome p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 1.6rem; line-height: 1.7; } .suggestion { display: block; width: 100%; margin-bottom: 0.6rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font: inherit; font-size: 0.86rem; text-align: left; padding: 0.7rem 0.9rem; cursor: pointer; transition: border-color 0.15s ease; } .suggestion:hover { border-color: var(--accent); } .chat-status { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 1rem; padding: 0.5rem 0.25rem 0; font-size: 0.8rem; color: var(--text-dim); } .chat-status-row { display: flex; align-items: center; gap: 0.6rem; } .chat-status[hidden] { display: none; } /* 完了時刻が読めないので、進行中だけ流れる不確定プログレスバー */ .gen-bar { height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; } .gen-bar > span { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--accent); animation: gen-bar-slide 1.3s ease-in-out infinite; } @keyframes gen-bar-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } #file-progress { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spinner { width: 14px; height: 14px; flex-shrink: 0; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Chat composer — one card holding textarea + all controls ── */ .chat-composer { margin: 0.7rem 1rem 1rem; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 16px; display: flex; flex-direction: column; position: relative; /* ヒント集ポップオーバーの基準位置 */ transition: border-color 0.15s ease, box-shadow 0.15s ease; } .chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.13); } .chat-composer textarea { resize: none; background: transparent; border: none; padding: 0.85rem 1rem 0.35rem; color: var(--text); font: inherit; font-size: 0.92rem; line-height: 1.55; min-height: 2.5em; max-height: 200px; overflow-y: auto; } .chat-composer textarea:focus { outline: none; } .chat-composer textarea::placeholder { color: var(--text-dim); opacity: 0.75; } .composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.55rem 0.55rem 0.6rem; } .composer-tools { display: flex; gap: 0.15rem; } .composer-btn { width: 32px; height: 32px; border-radius: 50%; background: none; border: none; color: var(--text-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.12s ease, color 0.12s ease; } .composer-btn:hover { background: var(--hover-bg); color: var(--text); } .composer-btn svg { width: 16px; height: 16px; } .composer-btn.btn-active { color: var(--danger); background: rgba(var(--danger-rgb), 0.12); animation: rec-pulse 1.3s ease-in-out infinite; } @keyframes rec-pulse { 50% { box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.12); } } /* min-width:0 を composer-right → scope-wrap → select と通して、 幅が足りないときはプルダウンだけが縮み（文字は省略）、送信ボタンを押し出さない */ .composer-right { display: flex; align-items: center; gap: 0.5rem; min-width: 0; } .composer-scope { background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.6rem; font: inherit; font-size: 0.76rem; cursor: pointer; max-width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; flex: 0 1 auto; min-width: 0; } .composer-scope:hover, .composer-scope:focus { color: var(--text); border-color: var(--accent); outline: none; } .send-btn { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: var(--accent); color: var(--accent-text); flex: none; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease; } .send-btn svg { width: 16px; height: 16px; } .send-btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .send-btn:active { transform: translateY(0); } .send-btn:disabled { opacity: 0.45; cursor: default; transform: none; filter: none; } /* Dim the affordance while there is nothing to send (submit already guards) */ .chat-composer:has(#prompt-input:placeholder-shown) .send-btn { opacity: 0.45; } .preview-panel { background: var(--preview-bg); min-width: 0; min-height: 0; } .preview-viewport { width: 100%; height: 100%; display: flex; justify-content: center; background: var(--preview-bg); transition: background-color 0.32s ease; } .preview-viewport[data-device='desktop'] { background: #fff; } /* Device width rules must out-specify the #preview-frame ID selector below, so they are anchored on the #preview-viewport ID too. */ #preview-viewport[data-device='desktop'] #preview-frame { width: 100%; } #preview-viewport[data-device='tablet'] #preview-frame { width: 768px; max-width: 100%; background: #fff; box-shadow: 0 0 0 1px var(--border), var(--shadow-3); } #preview-viewport[data-device='mobile'] #preview-frame { width: 390px; max-width: 100%; background: #fff; box-shadow: 0 0 0 1px var(--border), var(--shadow-3); } #preview-frame { width: 100%; height: 100%; border: none; display: block; /* 「シュッ」: 序盤に勢いよく動き、終わりは柔らかく減速するカーブ。 幅の切替はJSが常にpx→pxで与える（%↔pxはCSSが補間できないため）。 */ transition: width 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease; will-change: width; } /* ── Builder: right-panel views (preview / structure / code) ── */ .tab-view { display: flex; flex-direction: column; flex: 1; min-height: 0; } .tab-view[hidden] { display: none; } .preview-panel > .tab-view { background: var(--bg-raised); } .preview-viewport[hidden] { display: none; } .view-switch { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; flex: none; } .view-switch button, .view-switch a { display: inline-flex; align-items: center; text-decoration: none; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 0.82rem; padding: 0.42rem 0.85rem; cursor: pointer; white-space: nowrap; } .view-switch button + button, .view-switch a + a { border-left: 1px solid var(--border); } .view-switch button:hover, .view-switch a:hover { color: var(--text); } .view-switch button.active, .view-switch a.active { background: rgba(var(--accent-rgb), 0.14); color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } /* ページ構成・コード表示中はプレビュー専用の操作を隠す */ body.right-view-alt .page-select-label, body.right-view-alt #edit-mode-btn { display: none; } .view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 0.86rem; } /* チャット側のツールバーはヘッダーとして地色より一段濃いスレート面にし、 グレー地の履歴と区切る。テキスト色+藍をわずかに混ぜることで、 ライトでは濃く・ダークでは明るく、常に地との差が出る。 */ .chat-panel .view-toolbar { background: color-mix(in srgb, var(--accent) 5%, color-mix(in srgb, var(--text) 6%, var(--bg))); } /* 濃色ヘッダーに透明ボタンが溶けるため、ボタンは白面(--bg-raised)に載せ替えて 面差で判別できるようにする。枠線もテキスト色を混ぜて一段強め、 ヘッダー地とのコントラストを確保する。 */ .chat-panel .view-toolbar .btn-ghost, .chat-panel .view-toolbar .icon-btn { background: var(--bg-raised); /* テキスト色35%混合で、ボタン面(白)に対し枠線が約3.2:1(ダークは約3.9:1)。 WCAG 1.4.11 非テキストコントラスト 3:1 を満たす。 */ border-color: color-mix(in srgb, var(--text) 35%, var(--border)); color: var(--text); } .chat-panel .view-toolbar .btn-ghost:hover, .chat-panel .view-toolbar .icon-btn:hover { border-color: var(--accent); } .view-toolbar input[type='search'] { flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.4rem 0.65rem; color: var(--text); font: inherit; font-size: 0.84rem; } .view-toolbar input[type='search']:focus { outline: none; border-color: var(--accent); } .toolbar-actions { display: flex; gap: 0.3rem; } .icon-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font: inherit; font-size: 0.85rem; line-height: 1; width: 26px; height: 26px; cursor: pointer; } .icon-btn:hover { color: var(--text); border-color: var(--accent); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; } .scroll-area { flex: 1; overflow-y: auto; min-height: 0; } .muted { color: var(--text-dim); font-size: 0.85rem; } .pad { padding: 1rem; } .btn-danger { color: var(--danger-text); } .btn-danger:hover { border-color: var(--danger); } /* ── Conversation history ── */ .conversation-history { max-height: 260px; overflow-y: auto; border-bottom: 1px solid var(--border); background: var(--bg-input); flex-shrink: 0; } .conversation-item { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font: inherit; text-align: left; padding: 0.6rem 0.95rem; cursor: pointer; } .conversation-item:hover { background: rgba(var(--accent-rgb), 0.06); } .conversation-item.active { border-left: 2px solid var(--accent); } .conversation-title { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversation-meta { font-size: 0.74rem; color: var(--text-dim); } /* ── Structure view: sitemap diagram ── */ /* 外側は余白だけ。背景（ドット）と枠は sitemap-frame の範囲に限定する。 */ .sitemap-area { display: flex; flex-direction: column; align-items: center; padding: 1.25rem clamp(0.75rem, 3vw, 1.5rem); } /* キャンバス枠：ドットグリッド背景＋枠線。この内側だけが図の範囲。 */ .sitemap-frame { position: relative; display: flex; flex: 1; min-height: 240px; width: 100%; max-width: 960px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--sitemap-bg); background-image: radial-gradient(var(--sitemap-dot) 1.2px, transparent 1.2px); background-size: 22px 22px; } /* ── History view: same centered column as the sitemap ── */ #view-history .scroll-area { padding: 1rem clamp(1rem, 4vw, 3rem) 2rem; } #view-history .history-intro { max-width: 960px; margin: 0 auto 0.85rem; width: 100%; } #view-history .panel-fold { max-width: 960px; margin-inline: auto; width: 100%; } #view-history .panel-fold:first-of-type { border-top: none; } /* 枠いっぱいに広がるパン用ビューポート。内側に余白（パディング）を設ける。 */ /* 1本指スクロール（パン）は許可しつつ、2本指はブラウザの拡大縮小に渡さず 自前のピンチズーム（builder.js）で処理する。 */ .sitemap-diagram { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 2rem; touch-action: pan-x pan-y; } /* canvas は拡大縮小後の実サイズを占有し、スクロール領域を確保する。 overflow:hidden で stage の未拡大レイアウト箱がはみ出すのを抑え、 縮小時に不要なスクロールバーが出ないようにする。 */ .sitemap-canvas { position: relative; margin-inline: auto; overflow: hidden; } /* stage を transform: scale で拡大縮小。版面は中身（最も広い階層）に合わせる */ .sitemap-stage { position: relative; width: max-content; transform-origin: 0 0; } .sitemap-tiers { display: flex; flex-direction: column; gap: 3rem; position: relative; z-index: 1; } /* 同じ階層は折り返さず一列に並べ、階層構造を崩さない（多ページでも縦に散らばらない） */ .sitemap-tier { display: flex; flex-wrap: nowrap; justify-content: center; gap: 12px; align-items: flex-start; } /* 下層ページは親カードの真下に描く（組織図型）。subtree = カード + 子の行 */ .sitemap-subtree { display: flex; flex-direction: column; align-items: center; gap: 3rem; } .sitemap-children { display: flex; flex-wrap: nowrap; gap: 12px; align-items: flex-start; } .site-card-node { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 120px; max-width: 200px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.85rem; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-shadow: var(--shadow-1); } .site-card-node:hover { border-color: var(--accent); } .site-card-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .site-card-node.is-home { padding: 0.75rem 1rem; border-color: var(--accent); /* 不透明な土台（bg-raised）の上にアクセント色を薄く重ねる。 rgba 単体だと背景のドットが透けてしまうため重ね塗りにする。 */ background-color: var(--bg-raised); background-image: linear-gradient(0deg, rgba(var(--accent-rgb), 0.09), rgba(var(--accent-rgb), 0.09)); } .site-card-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25), 0 4px 16px rgba(var(--accent-rgb), 0.08); } .site-card-title { display: flex; align-items: center; gap: 0.35rem; font-size: 0.86rem; font-weight: 600; } .site-card-star { color: var(--accent); } .site-card-route { font-size: 0.72rem; color: var(--text-dim); } .site-card-node.is-selected .site-card-route { color: var(--accent); } .sitemap-connectors { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; } .sitemap-connectors path { stroke: var(--sitemap-line); stroke-width: 2; fill: none; /* 拡大縮小しても線の太さを一定に保ち、視認性を確保する */ vector-effect: non-scaling-stroke; transition: stroke 0.2s ease-out, stroke-width 0.2s ease-out; } .sitemap-connectors path.active { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.35)); } /* ── サイトマップのズーム操作（キャンバス枠の右下にフローティング）── */ .sitemap-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 0.1rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.15rem; box-shadow: var(--shadow-1); } .zoom-level-btn { min-width: 3.2rem; background: none; border: none; color: var(--text-dim); font: inherit; font-size: 0.74rem; font-variant-numeric: tabular-nums; padding: 0.2rem 0.3rem; border-radius: 6px; cursor: pointer; text-align: center; } .zoom-level-btn:hover { background: rgba(var(--accent-rgb), 0.08); color: var(--text); } .zoom-level-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── Site tab: 左右レイアウト（左:サイトマップ / 右:ページ詳細サイドバー）── */ .site-view-body { flex: 1; display: flex; min-height: 0; } .site-view-body .sitemap-area { flex: 1; min-width: 0; } /* ── Site tab: inspector（右サイドバー）── */ .page-inspector { width: clamp(220px, 30%, 300px); flex-shrink: 0; border-left: 1px solid var(--border); padding: 0.85rem 0.95rem; display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; background: var(--bg-input); } .inspector-head { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.92rem; flex-wrap: wrap; } /* このページの診断 */ .inspector-audit { display: flex; flex-direction: column; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--border); } .inspector-audit-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; } .inspector-audit-title { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); } .audit-ok { font-size: 0.8rem; color: var(--text-dim); } /* ホーム選択時に表示する「サイト全体の診断」（このページの診断と区切る） */ .inspector-audit-sitewide { margin-top: 0.2rem; } .page-slug { font-size: 0.76rem; color: var(--text-dim); } .page-desc { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; } .page-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } /* ── インスペクタの操作ボタン（見やすさ・アクセシビリティ重視）── */ .page-inspector .page-actions { gap: 0.5rem; margin-top: 0.2rem; } .page-inspector .page-actions .btn { flex: 1 1 auto; min-height: 40px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; font-size: 0.84rem; font-weight: 600; } /* 二次アクション（ghost）は薄グレー背景に埋もれないよう、白地＋濃いめの枠線にする */ .page-inspector .page-actions .btn-ghost { background: var(--bg-raised); color: var(--text); border: 1px solid var(--text-dim); } .page-inspector .page-actions .btn-ghost:hover { filter: none; border-color: var(--accent); color: var(--accent); } /* フォーカスは全ボタン（主アクションの保存も含む）に明確なリングを表示 */ .page-inspector .page-actions .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* 削除は危険操作として明確に区別 */ .page-inspector .page-actions .btn-danger { color: var(--danger-text); border-color: var(--danger); } .page-inspector .page-actions .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); } /* ページ名・スラッグ・説明の編集フォーム */ .page-rename-form { display: flex; flex-direction: column; gap: 0.75rem; } /* ラベルは読みやすく（本文色＋太字） */ .rename-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--text); } .rename-input { /* インスペクタ（薄グレー）と同化しないよう白地＋濃いめの枠線 */ width: 100%; background: var(--bg-raised); color: var(--text); border: 1px solid var(--text-dim); border-radius: var(--radius-sm); font: inherit; font-size: 0.9rem; font-weight: 400; padding: 0.5rem 0.65rem; min-height: 40px; } .rename-input::placeholder { color: var(--text-dim); opacity: 1; } .rename-input:hover { border-color: var(--text); } /* マウス操作でもわかるフォーカスリング、キーボードはさらに outline を追加 */ .rename-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); } .rename-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .rename-input:disabled { opacity: 0.55; cursor: not-allowed; } .rename-textarea { resize: vertical; min-height: 4.2em; line-height: 1.6; } .rename-slug-row { display: flex; align-items: center; gap: 0.3rem; } .rename-slug-row code { color: var(--text); font-weight: 600; } .rename-note { font-size: 0.74rem; line-height: 1.5; } .rename-error { font-size: 0.78rem; color: var(--danger-text); } /* ── Code view ── */ .view-editor { flex-direction: row; } .editor-files { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); min-height: 0; } .editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .editor-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .editor-path { flex: 1; font-size: 0.78rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor-dirty { color: var(--accent); font-size: 0.9rem; } .editor-container { flex: 1; min-height: 0; position: relative; } .editor-placeholder { display: grid; place-items: center; height: 100%; color: var(--text-dim); font-size: 0.85rem; padding: 1rem; text-align: center; } .editor-textarea { width: 100%; height: 100%; resize: none; border: none; background: var(--code-bg); color: var(--code-text); padding: 0.9rem; font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; } .editor-textarea:focus { outline: none; } .image-preview-pane { height: 100%; overflow: auto; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; background: repeating-conic-gradient(var(--checker-a) 0% 25%, var(--checker-b) 0% 50%) 50% / 24px 24px; } .image-preview-pane img { max-width: 100%; max-height: 60%; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; } .image-preview-path { display: flex; align-items: center; gap: 0.6rem; } .image-preview-path code { font-size: 0.8rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 0.25rem 0.55rem; } .image-preview-pane .muted { text-align: center; max-width: 420px; line-height: 1.6; } /* ── セクション見出し（クリックで折りたたみ）── */ .file-group { display: flex; align-items: center; gap: 0.25rem; width: 100%; background: none; border: none; cursor: pointer; user-select: none; text-align: left; font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); padding: 0.7rem 0.6rem 0.3rem 0.6rem; } .file-group:hover { color: var(--text); } .group-chevron { display: inline-flex; align-items: center; justify-content: center; width: 14px; flex-shrink: 0; transition: transform 0.12s ease; } .group-chevron svg { width: 13px; height: 13px; } .file-group:not(.collapsed) .group-chevron { transform: rotate(90deg); } /* 展開時は下向き ▾ */ .group-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* セクション内の項目はセクション見出しより一段深くインデント */ .file-group-body { padding-left: 0.35rem; } .file-group-body[hidden] { display: none; } /* ── ファイルツリー（VSCode 風に階層を折りたたみ表示）── */ .file-folder { display: flex; align-items: center; gap: 0.2rem; cursor: pointer; user-select: none; color: var(--text); font-size: 0.82rem; padding: 0.3rem 0.4rem 0.3rem calc(0.5rem + var(--depth, 0) * 0.75rem); } .file-folder:hover { background: rgba(var(--accent-rgb), 0.05); } .folder-chevron, .folder-icon, .file-gutter, .file-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; flex-shrink: 0; color: var(--text-dim); } .folder-chevron svg, .folder-icon svg, .file-icon svg { width: 15px; height: 15px; } .folder-chevron { transition: transform 0.12s ease; } /* 既定（閉）は右向き ▸ */ .file-folder:not(.collapsed) .folder-chevron { transform: rotate(90deg); } /* 展開時は下向き ▾ */ .folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-children[hidden] { display: none; } .file-item { display: flex; align-items: center; gap: 0.2rem; padding-left: calc(0.5rem + var(--depth, 0) * 0.75rem); } .file-item.active { background: rgba(var(--accent-rgb), 0.08); } .file-item.active .file-icon { color: var(--accent); } .file-name { flex: 1; background: none; border: none; color: var(--text); font: inherit; font-size: 0.82rem; text-align: left; padding: 0.35rem 0.2rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-item:hover { background: rgba(var(--accent-rgb), 0.05); } .file-delete { border: none; width: 22px; height: 22px; margin-right: 0.4rem; flex-shrink: 0; } .file-delete:hover { color: var(--danger); border: none; } /* ── ヒント集 popover (composer) ── */ .tpl-popover { position: absolute; bottom: calc(100% + 10px); left: 0; right: 0; z-index: 60; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); display: flex; flex-direction: column; max-height: min(420px, 55vh); overflow: hidden; } .tpl-popover[hidden] { display: none; } .tpl-popover-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); font-size: 0.86rem; flex-shrink: 0; } .tpl-popover-head input { flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.35rem 0.65rem; color: var(--text); font: inherit; font-size: 0.82rem; } .tpl-popover-head input:focus { outline: none; border-color: var(--accent); } .tpl-popover-list { overflow-y: auto; min-height: 0; } .composer-btn.tpl-open { background: var(--hover-bg); color: var(--accent); } .template-item { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font: inherit; text-align: left; padding: 0.55rem 0.95rem; cursor: pointer; } .template-item:hover { background: rgba(var(--accent-rgb), 0.06); } .template-title { font-size: 0.85rem; font-weight: 500; } .template-preview { font-size: 0.74rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .generation-item { padding: 0.6rem 0.95rem; border-bottom: 1px solid var(--border); } .generation-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .generation-prompt { font-size: 0.82rem; line-height: 1.5; } .generation-meta { font-size: 0.74rem; color: var(--text-dim); margin-top: 0.2rem; } .gen-status { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); } .gen-success { color: var(--live); border-color: var(--live); } .gen-error { color: var(--danger-text); border-color: var(--danger); } .gen-streaming { color: var(--accent); border-color: var(--accent); } .gen-cancelled { color: var(--text-dim); } .revision-undone { opacity: 0.55; } .revision-undone .generation-prompt { text-decoration: line-through; } /* ── Site audit (static evaluator) ── */ .audit-summary { font-size: 0.84rem; font-weight: 600; padding: 0 0.25rem; } .audit-issue { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8rem; line-height: 1.45; padding: 0.15rem 0.25rem; } .audit-badge { flex: none; font-size: 0.68rem; font-weight: 600; border-radius: 5px; padding: 0.1rem 0.4rem; margin-top: 0.1rem; } .audit-error .audit-badge { background: rgba(var(--danger-rgb), 0.15); color: var(--danger-text); } .audit-warning .audit-badge { background: rgba(var(--warning-rgb), 0.15); color: var(--warning-text); } .audit-info .audit-badge { background: var(--bg-input); color: var(--text-dim); } .audit-text { color: var(--text); word-break: break-word; } .audit-path { display: block; font-size: 0.7rem; color: var(--text-dim); font-family: var(--font-mono); } .audit-fix-btn { align-self: flex-start; margin: 0.3rem 0.25rem 0.1rem; } /* サイト診断モーダル（コンテンツ ▾ → 運用 → サイト診断）。 結果一覧はモーダル内でスクロールさせ、修正依頼ボタンを常に視界に残す */ .site-audit-modal { width: min(560px, 92vw); max-height: 86vh; } .site-audit-results { display: flex; flex-direction: column; gap: 0.45rem; min-height: 3rem; } .site-audit-list { overflow-y: auto; max-height: min(48vh, 26rem); } /* ── 投稿管理（お知らせ・ブログ） ── */ /* 投稿管理・投稿編集ページは白基調に揃える （ライトテーマで #fff。他ページの白いカード面やビルダーの各パネルと同じ var(--bg-raised)） */ body.posts-body { background: var(--bg-raised); } .posts-page { max-width: 1100px; margin: 0 auto; } .posts-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .posts-head h1 { font-size: var(--text-xl); } .posts-head h1 .muted { font-size: 0.85rem; font-weight: 400; margin-left: 0.4rem; } .posts-breadcrumb { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.3rem; } .flash { border-radius: var(--radius); padding: 0.65rem 0.95rem; margin-bottom: 1rem; font-size: 0.88rem; } .flash-success { background: rgba(var(--live-rgb), 0.1); border: 1px solid var(--live); color: var(--live); } .flash-error { background: rgba(var(--danger-rgb), 0.1); border: 1px solid var(--danger); color: var(--danger-text); } /* カテゴリータブと管理パネル */ .cat-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .cat-tab { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.32rem 0.85rem; font-size: 0.82rem; color: var(--text-dim); background: none; cursor: pointer; font-family: inherit; } .cat-tab:hover { color: var(--text); border-color: var(--text-dim); text-decoration: none; } .cat-tab.active { background: var(--bg-input); color: var(--text); border-color: var(--accent); font-weight: 600; } .cat-count { font-size: 0.72rem; color: var(--text-dim); } .cat-manage-toggle { margin-left: auto; border-style: dashed; } .cat-manage { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.4rem; } .cat-manage h2 { font-size: 0.95rem; margin-bottom: 0.5rem; } .cat-manage-note { font-size: 0.78rem; line-height: 1.7; margin-bottom: 0.8rem; } .cat-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .cat-rename-form { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; } .cat-rename-form input[type='text'] { margin-top: 0 !important; width: auto !important; flex: 1; max-width: 240px; } .cat-slug { font-size: 0.74rem; color: var(--text-dim); background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 0.15rem 0.5rem; } .cat-row-count { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; } .cat-add-form { display: flex; gap: 0.5rem; margin-top: 0.9rem; } .cat-add-form input[type='text'] { margin-top: 0 !important; flex: 1; } /* 選択中の投稿タイプの設定パネル内: カテゴリー管理 */ .topic-heading { font-size: 0.85rem; margin: 1rem 0 0.3rem; } .topic-manage { padding-left: 0.9rem; border-left: 2px solid var(--border); } .topic-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; flex-wrap: wrap; } .topic-add-form { margin-top: 0.4rem; } .topic-add-form input[type='text'] { max-width: 240px; } .topic-empty-note { font-size: 0.8rem; padding: 0.2rem 0; } .posts-row-topic { opacity: 0.75; } .cat-danger { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); } /* 選択中の投稿タイプの設定パネル内: フィールド設定（上級者向け）モーダル */ .cat-fields-row { display: flex; align-items: center; gap: 0.7rem; padding-left: 0.9rem; border-left: 2px solid var(--border); flex-wrap: wrap; } .cat-fields-summary { font-size: 0.8rem; } /* トリガーのアイコンはサイズ未指定だと大きく出るため明示する（他パネルボタンと同じ btn-sm 寸法に収める） */ .cat-fields-row > .btn { display: inline-flex; align-items: center; gap: 0.35rem; } .cat-fields-row > .btn svg { width: 12px; height: 12px; flex: none; } .field-settings-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.6rem; } .field-settings-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } .field-settings-form legend { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.45rem; padding: 0; } .pf-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; margin-right: 1rem; color: var(--text); } .pf-check input { accent-color: var(--accent); } .pf-note { font-size: 0.78rem; line-height: 1.7; margin: 0; } .pf-builtin .pf-note { display: block; margin-top: 0.35rem; } .pf-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; flex-wrap: wrap; } .pf-row .pf-label-input { margin-top: 0 !important; width: auto !important; flex: 1; min-width: 10rem; max-width: 240px; } .pf-row select { margin-top: 0 !important; } /* 入力とセレクトの高さをブラウザ差なく揃える（.posts-form-row と同じ手法） */ .pf-row input[type='text'], .pf-row select { height: 2.4rem; box-sizing: border-box; } .pf-type { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; } .pf-required { margin-right: 0; font-size: 0.8rem; } .pf-empty-note { font-size: 0.8rem; padding: 0.2rem 0; } #pf-add { margin-top: 0.4rem; } .create-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.4rem; } .posts-setup-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; } .posts-setup-card h2 { font-size: 1.05rem; margin-bottom: 0.7rem; } .posts-setup-card p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.8; margin-bottom: 1.2rem; } .posts-editor-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; margin-bottom: 1.8rem; } .posts-editor-card h2, .posts-list h2 { font-size: 1rem; margin-bottom: 0.9rem; } .posts-list h2 .muted { font-weight: 400; font-size: 0.82rem; } .posts-form-row { display: flex; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; } .posts-form-row label, .posts-field { display: block; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.9rem; } .posts-form-row label { margin-bottom: 0; } .posts-page select, .posts-page input[type='text'], .posts-page input[type='url'], .posts-page input[type='number'], .posts-page input[type='date'], .posts-page input[type='file'] { display: block; margin-top: 0.3rem; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem; } .posts-page input[type='text'], .posts-page input[type='url'] { width: 100%; } /* 投稿タイプ(select)と投稿日(date)の高さをブラウザ差なく揃える */ .posts-form-row select, .posts-form-row input[type='date'] { height: 2.4rem; box-sizing: border-box; } .posts-page input[type='file'] { max-width: 100%; } .posts-page input:focus, .posts-page select:focus { outline: none; border-color: var(--accent); } /* ラベル行・ツールバーは折返し可（狭い画面ではツールバーが2行目に落ちる） */ .posts-label-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 0.35rem; } .posts-label-tools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; row-gap: 0.35rem; } .posts-ai-btn { font-size: 0.75rem; padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--text-dim); cursor: pointer; } .posts-ai-btn:hover, .posts-ai-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); } .posts-ai-btn svg, .posts-toolbar button svg { vertical-align: -3px; } .ai-assist { margin: 0.5rem 0; padding: 0.8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); } .ai-assist textarea { width: 100%; resize: vertical; font-size: 0.85rem; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.55rem 0.7rem; } .ai-assist textarea:focus { outline: none; border-color: var(--accent); } .ai-assist-actions { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.5rem; } .ai-assist-actions .muted { font-size: 0.78rem; } .ai-assist-note { font-size: 0.74rem; margin-top: 0.5rem; } .posts-toolbar { display: flex; gap: 0.25rem; flex-wrap: wrap; } .posts-toolbar button { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); font: inherit; font-size: 0.78rem; padding: 0.2rem 0.6rem; cursor: pointer; } .posts-toolbar button:hover { border-color: var(--accent); } .posts-toolbar button.is-active { border-color: var(--accent); color: var(--accent); } .posts-toolbar button[data-cmd="bold"] { margin-left: 0.45rem; } /* 段落系と書式系の区切り */ .posts-toolbar button[data-cmd="html"] { margin-left: 0.45rem; } /* 書式系と表示系の区切り */ .posts-toolbar button:disabled { opacity: 0.4; cursor: default; } .posts-toolbar button:disabled:hover { border-color: var(--border); } /* ブログ執筆を想定した高さ。長文はエディタ内スクロールになり、ツールバーと操作バーが視界に残る */ .posts-body-editor { margin-top: 0.3rem; min-height: 320px; max-height: 70vh; overflow-y: auto; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-size: 0.92rem; line-height: 1.75; } .posts-body-editor:focus { outline: none; border-color: var(--accent); } .posts-body-editor h2 { font-size: 1.05rem; margin: 0.6rem 0 0.3rem; } .posts-body-editor h3 { font-size: 0.95rem; margin: 0.5rem 0 0.25rem; } .posts-body-editor a { color: var(--accent); } .posts-body-editor img { max-width: 100%; height: auto; display: block; margin: 0.6rem 0; border-radius: var(--radius-sm); } /* HTMLソース編集モードの textarea（ビジュアルエディタと同寸で入れ替わる） */ .posts-html-editor { display: block; width: 100%; margin-top: 0.3rem; min-height: 320px; max-height: 70vh; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.84rem; line-height: 1.6; resize: vertical; white-space: pre-wrap; } .posts-html-editor[hidden] { display: none; } .posts-html-editor:focus { outline: none; border-color: var(--accent); } /* 全画面（集中執筆）モード: 本文フィールドだけを画面いっぱいに出す */ .posts-field.is-fullscreen { position: fixed; inset: 0; z-index: 600; margin: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); padding: 1rem clamp(1rem, 5vw, 3rem) 1.2rem; } .posts-field.is-fullscreen > * { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; } .posts-field.is-fullscreen .posts-body-editor, .posts-field.is-fullscreen .posts-html-editor { flex: 1 1 auto; min-height: 0; max-height: none; resize: none; } .pe-scroll-lock { overflow: hidden; } /* 本文プレビュー: サイト実物の投稿テンプレートを描画するiframe（編集面と同寸で入れ替わる） */ .pe-preview { position: relative; margin-top: 0.3rem; } .pe-preview[hidden] { display: none !important; } .pe-preview iframe { display: block; width: 100%; height: min(70vh, 640px); background: #fff; border: 1px solid var(--input-border); border-radius: var(--radius-sm); } .pe-preview-spinner { position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%); } .posts-field.is-fullscreen .pe-preview { flex: 1 1 auto; min-height: 0; display: flex; } .posts-field.is-fullscreen .pe-preview iframe { height: auto; flex: 1 1 auto; } /* タイトル直下のURL（スラッグ）表示 */ .posts-permalink { font-size: 0.78rem; margin: -0.5rem 0 0.9rem; } .posts-permalink-path { color: var(--text); word-break: break-all; } /* アイキャッチ: プレビュー + 変更/削除ボタン */ .pe-eyecatch { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.4rem; flex-wrap: wrap; } .pe-eyecatch img { height: 72px; max-width: 160px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); } .pe-eyecatch-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .pe-eyecatch-controls .muted { font-size: 0.76rem; } /* カスタムフィールド（投稿タイプごとの定義 — 投稿一覧の「フィールド設定」で管理） */ .pe-cf-required { margin-left: 0.4rem; font-size: 0.68rem; border-radius: 4px; padding: 0.05rem 0.35rem; background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .pe-cf-textarea { display: block; width: 100%; margin-top: 0.3rem; resize: vertical; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem; line-height: 1.7; } .pe-cf-textarea:focus { outline: none; border-color: var(--accent); } .pe-gallery { margin-top: 0.4rem; } .pe-gallery-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .pe-gallery-grid:empty { margin-bottom: 0; } .pe-gallery-item { width: 96px; } .pe-gallery-item img { width: 96px; height: 96px; object-fit: cover; display: block; border-radius: var(--radius-sm); border: 1px solid var(--border); } .pe-gallery-item-tools { display: flex; justify-content: center; gap: 3px; margin-top: 3px; } .pe-gallery-item-tools button { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 0.15rem 0.4rem; cursor: pointer; color: var(--text-dim); display: inline-flex; align-items: center; } .pe-gallery-item-tools button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .pe-gallery-item-tools button:disabled { opacity: 0.35; cursor: default; } .posts-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; } /* 投稿エディタの操作バー: 左=保存系サブ操作／右=キャンセル+公開（主操作）。カード下端に吸着 */ .posts-actions.posts-actions-bar { justify-content: space-between; align-items: center; gap: 0.6rem 1rem; position: sticky; bottom: 0; z-index: 20; margin: 1.1rem -1.4rem -1.4rem; padding: 0.8rem 1.4rem; background: var(--bg-raised); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); } .posts-actions-group { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .posts-cancel { font-size: 0.85rem; color: var(--text-dim); } .posts-cancel:hover { color: var(--text); text-decoration: underline; } .posts-note { font-size: 0.78rem; margin-top: 0.7rem; } .posts-feed-note { font-size: 0.78rem; margin-top: 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--border); } .posts-feed-hint { color: var(--text-dim); } .pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; } .pager-btn { font-size: 0.82rem; padding: 0.35rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); } a.pager-btn:hover { border-color: var(--accent); text-decoration: none; } .pager-btn.is-disabled { opacity: 0.35; } .pager-info { font-size: 0.78rem; color: var(--text-dim); } /* 操作ボタンは常に右端。タイトルは残り幅で折り返す（行を折り返してボタンを落とさない） */ .posts-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border-bottom: 1px solid var(--border); padding: 0.7rem 0.2rem; } .posts-row.is-draft .posts-row-title { color: var(--text-dim); } .posts-row-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; flex: 1 1 auto; } .posts-row-meta { display: flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; color: var(--text-dim); flex-wrap: wrap; } .posts-row-title { font-size: 0.95rem; font-weight: 500; overflow-wrap: anywhere; } a.posts-row-title { color: var(--text); } a.posts-row-title:hover { color: var(--accent); text-decoration: underline; } .posts-row-type { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-input); padding: 0.1rem 0.55rem; font-size: 0.72rem; color: var(--text-dim); white-space: nowrap; } .posts-row-date { font-size: 0.76rem; color: var(--text-dim); white-space: nowrap; } .posts-row-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; } /* 投稿一覧はタイトル｜分類チップ｜日付｜操作の1行レイアウト。 タイトルが残り幅を使い、長い場合のみ2行に折り返して省略する */ .posts-list .posts-row-title { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .posts-list .posts-row-meta { flex: none; flex-wrap: nowrap; } /* 分類名が長くてもタイトル領域を潰さないよう省略する */ .posts-list .posts-row-type { display: inline-block; max-width: 12em; overflow: hidden; text-overflow: ellipsis; } /* 操作ボタンは行のホバー/フォーカス時のみ表示（ホバーが無いタッチ端末では常時表示）。 投稿一覧は常時表示（バナー等の他一覧はホバー表示のまま） */ @media (hover: hover) and (pointer: fine) { .posts-row .posts-row-actions { opacity: 0; transition: opacity 0.12s ease; } .posts-row:hover .posts-row-actions, .posts-row:focus-within .posts-row-actions, .posts-list .posts-row .posts-row-actions { opacity: 1; } } @media (max-width: 640px) { /* 狭い画面ではボタン列を下段へ折り返し、右寄せで並べる */ .posts-row { flex-wrap: wrap; } .posts-row-actions { width: 100%; justify-content: flex-end; } /* 投稿一覧: 1段目をタイトル、2段目を分類チップ・日付・操作にする */ .posts-list .posts-row { row-gap: 0.35rem; } .posts-list .posts-row-title { flex-basis: 100%; } .posts-list .posts-row-meta { flex: 0 1 auto; flex-wrap: wrap; } .posts-list .posts-row-actions { width: auto; margin-left: auto; } /* 投稿エディタ: ツールバーが折り返す幅では指で押しやすい高さを確保する */ .posts-label-row { align-items: flex-start; } .posts-toolbar button { min-height: 40px; padding: 0.45rem 0.7rem; } .posts-ai-btn { min-height: 40px; } /* 画面が狭い端末では本文欄の初期高さを抑え、フォーム全体を見渡せるようにする */ .posts-body-editor, .posts-html-editor { min-height: 240px; max-height: 60vh; } /* コード表示：220px固定の2カラムだとスマホで破綻するので縦積みに（UX-319） */ .view-editor { flex-direction: column; } .editor-files { width: auto; flex-shrink: 1; max-height: 34vh; border-right: none; border-bottom: 1px solid var(--border); } /* 小窓チャットが画面をほぼ覆う問題（UX-320）。スマホでは下半分のシート風にし、 プレビューを上に残す。JSのインライン位置・サイズより優先するため !important。 ドラッグ用リサイズハンドルもタッチでは無効化。 */ body.chat-float .chat-panel { left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important; width: auto !important; height: min(52vh, 420px) !important; } body.chat-float .chat-panel > .chat-resize { display: none; } } /* ── Visual editor ── */ .preview-panel { display: flex; flex-direction: column; } .preview-viewport { flex: 1; min-height: 0; } .btn-active { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.12); } .toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; background: var(--bg-raised); border: 1px solid var(--accent); border-radius: var(--radius); color: var(--text); font-size: 0.84rem; padding: 0.6rem 1rem; box-shadow: var(--shadow-2); max-width: 380px; } /* ── Snapshots ── */ .snapshot-section { border-top: 1px solid var(--border); margin-top: 1.5rem; } .snapshot-item { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.95rem; border-bottom: 1px solid var(--border); } .snapshot-info { min-width: 0; } .snapshot-label { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .snapshot-item .page-actions { flex-shrink: 0; flex-wrap: nowrap; } /* 外部バックアップ（ZIPのエクスポート/インポート）の行 — バックアップ一覧の下に置く */ .backup-file-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.95rem; border-top: 1px solid var(--border); } .backup-file-label { font-size: 0.84rem; font-weight: 600; white-space: nowrap; } .backup-file-row .btn { flex-shrink: 0; } /* ── Chat: attachments (inside the composer card) ── */ .attach-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 0.9rem 0; } .attach-thumb { position: relative; display: inline-block; } .attach-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; } .attach-remove { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); font-size: 0.7rem; line-height: 1; cursor: pointer; } .attach-remove:hover { border-color: var(--danger); color: var(--danger); } .cancel-btn { margin-left: auto; flex-shrink: 0; } /* ── Legal pages / consent / footer / danger zone ── */ .legal { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; line-height: 1.85; font-size: 0.92rem; } .legal h1 { font-size: var(--text-xl); margin-bottom: 0.4rem; } .legal h2 { font-size: 1.02rem; margin: 1.8rem 0 0.6rem; } .legal p { margin-bottom: 0.8rem; } .legal ol { padding-left: 1.4rem; margin-bottom: 0.8rem; } .legal li { margin-bottom: 0.3rem; } .legal-updated { color: var(--text-dim); font-size: 0.8rem; margin-bottom: 1.5rem; } .legal-toc { margin: 0 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); } .legal-toc ol { margin: 0; padding-left: 1.4rem; } .legal-toc li { margin-bottom: 0.35rem; } .legal-toc a { color: var(--text-dim); } .legal-toc a:hover { color: var(--accent); } .legal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 1.25rem 0; } .legal-table th, .legal-table td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; } .legal-table th { width: 32%; background: var(--bg-raised); font-weight: 600; } .consent-row { display: flex !important; align-items: flex-start; gap: 0.55rem; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 1rem; } .consent-row input[type='checkbox'] { width: auto !important; margin-top: 0.2rem; accent-color: var(--accent); } .site-footer { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem; border-top: 1px solid var(--border); font-size: 0.78rem; } .site-footer a { color: var(--text-dim); } .site-footer a:hover { color: var(--text); } .danger-zone { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; } .danger-zone summary { cursor: pointer; color: var(--text-dim); font-size: 0.85rem; } .danger-zone summary:hover { color: var(--danger); } .danger-zone p { margin: 0.8rem 0 0.6rem; } .danger-form { display: flex; gap: 0.6rem; flex-wrap: wrap; } .danger-form input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; color: var(--text); font: inherit; font-size: 0.86rem; min-width: 260px; } .danger-form input:focus { outline: none; border-color: var(--danger); } .btn-danger-solid { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger-solid:hover { filter: brightness(1.1); } /* ── Admin console ── */ .admin { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; } .admin-head { display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .admin-head h1 { font-size: var(--text-xl); } .admin-nav { display: flex; gap: 0.25rem; } .admin-nav a { color: var(--text-dim); font-size: 0.88rem; padding: 0.35rem 0.8rem; border-radius: 999px; text-decoration: none; } .admin-nav a:hover { color: var(--text); text-decoration: none; } .admin-nav a.active { background: var(--bg-input); color: var(--text); } .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; } .stat-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; } .stat-card-link { text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .stat-card-link:hover { border-color: var(--accent); background: var(--bg-input); transform: translateY(-1px); } .stat-value { font-size: 1.35rem; font-weight: 700; } .stat-label { font-size: 0.76rem; color: var(--text-dim); } .admin-subhead { font-size: 1rem; margin-bottom: 0.75rem; } /* 管理画面: 新規作成・追加フォーム（トリガーボタン＋モーダル）。 本体は components/create-modal + create-modal.js。 */ .create-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; } .create-actions .btn { display: inline-flex; align-items: center; gap: 0.4rem; } .create-actions .btn svg { width: 14px; height: 14px; flex: none; } .create-modal { max-height: 88vh; overflow-y: auto; } /* 幅・余白は base .modal（420px・1.5rem）より広く取る。定義順で負けないよう詳細度を上げる */ .modal.create-modal { width: min(860px, 94vw); padding: 2rem 7.2rem 2.4rem; } /* 狭い画面では横幅が限られるため余白を段階的に詰める */ @media (max-width: 900px) { .modal.create-modal { padding: 1.8rem 3rem 2rem; } } @media (max-width: 640px) { .modal.create-modal { padding: 1.5rem; } } .create-modal .admin-create-form { padding: 0; } .create-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .create-modal-close { background: none; border: none; padding: 0.3rem; margin: -0.3rem; color: var(--text-dim); cursor: pointer; border-radius: var(--radius-sm); display: inline-flex; } .create-modal-close:hover { color: var(--text); background: var(--bg-input); } .create-modal-close svg { width: 18px; height: 18px; } .create-modal-desc { font-size: 0.82rem; margin: -0.3rem 0 0; } .admin-create-form { padding: 0 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; } .admin-create-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.7rem; width: 100%; } .admin-create-grid label { display: flex; flex-direction: column; gap: 0.35rem; align-self: start; } .admin-field-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--text); } .admin-field-required, .admin-field-optional { font-size: 0.72rem; font-weight: 600; border-radius: 4px; padding: 0.05rem 0.35rem; } .admin-field-required { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .admin-field-optional { background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); } .admin-field-note { font-size: 0.73rem; color: var(--text-dim); line-height: 1.55; } .admin-field-note strong { color: var(--text); } .admin-create-grid input, .admin-create-grid select, .admin-create-grid textarea { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-sm); font: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; } .admin-create-grid textarea { resize: vertical; } .admin-create-grid input:focus, .admin-create-grid select:focus, .admin-create-grid textarea:focus { outline: none; border-color: var(--accent); } .admin-create-form .muted { font-size: 0.76rem; margin: 0; } .admin-create-footer { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .admin-create-section { width: 100%; margin-top: 0.2rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); font-size: 0.8rem; font-weight: 600; color: var(--text); } .admin-create-section .muted { font-weight: 400; margin-left: 0.4rem; } /* クライアント管理（代理店）：見出し直下の説明文と作成フォームの間隔。 見出しと下要素の間隔は .dashboard-head の margin-bottom（全ページ共通）が担う。 */ .agency-console-lead { margin: 0 0 1.25rem; } .admin-search { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .admin-search input { flex: 1; max-width: 360px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; color: var(--text); font: inherit; font-size: 0.86rem; } .admin-search input:focus { outline: none; border-color: var(--accent); } /* td に display:flex を当てるとセルが table-cell でなくなり行が崩れるため、inline-block で並べる */ .admin-actions { white-space: nowrap; } .admin-actions .inline { display: inline-block; } .admin-actions > * + * { margin-left: 0.4rem; } .admin-suspended td { opacity: 0.55; } .admin-ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-admin { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); margin-left: 0.4rem; } .badge-suspended { background: rgba(var(--danger-rgb), 0.15); color: var(--danger-text); } /* デザインナレッジ管理（/admin/design-references） */ .design-ref-lead { margin: 0 0 1.25rem; font-size: 0.84rem; line-height: 1.7; } .admin-thumb { width: 72px; height: 48px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 6px; display: block; background: var(--bg-input); } .mood-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.3rem 0.7rem; width: 100%; margin-bottom: 0.4rem; } .mood-check { font-size: 0.82rem !important; } .design-ref-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.5rem; align-items: start; } @media (max-width: 880px) { .design-ref-layout { grid-template-columns: 1fr; } } .design-ref-shot { display: flex; flex-direction: column; gap: 0.8rem; position: sticky; top: 1rem; } .design-ref-shot img { width: 100%; max-height: 70vh; object-fit: contain; object-position: top; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); } .design-ref-shot form { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .design-ref-recipe { font-family: var(--font-mono); font-size: 0.8rem !important; line-height: 1.6; resize: vertical; } .badge-draft { background: var(--bg-input); color: var(--text-dim); border: 1px solid var(--border); } .badge-approved { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); } .admin-breadcrumb { margin-bottom: 0.75rem; font-size: 0.84rem; } .admin-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 720px; } .admin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.9rem; } .admin-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--text-dim); } .admin-form input, .admin-form textarea, .admin-form select { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; color: var(--text); font: inherit; font-size: 0.88rem; } .admin-form input:focus, .admin-form textarea:focus { outline: none; border-color: var(--accent); } .admin-form-section { font-size: 0.92rem; margin-top: 0.4rem; } .admin-form-actions { display: flex; gap: 0.6rem; } .admin-form label.admin-form-check { flex-direction: row; align-items: flex-start; gap: 0.55rem; font-size: 0.86rem; color: var(--text); line-height: 1.55; } .admin-form-check input[type=checkbox] { width: auto; margin-top: 0.15rem; flex: none; } .admin-form-check .muted { font-weight: 400; } /* クライアント権限フォーム: チェックは縦一列で詰め、ボタンの前だけ広めに空ける。 */ .client-settings-form { gap: 0.7rem; } .client-settings-form .admin-create-footer { margin-top: 0.6rem; } /* ── Help tip: 「?」アイコン＋ホバー吹き出し ── */ .help-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0.3rem; cursor: help; outline: none; } .help-tip[hidden] { display: none; } /* class の display が UA の [hidden] に勝つため明示 */ .help-tip-mark { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--border); color: var(--text-dim); font-size: 0.66rem; font-weight: 700; line-height: 1; transition: background-color 0.12s ease, color 0.12s ease; } .help-tip:hover .help-tip-mark, .help-tip:focus-visible .help-tip-mark { background: var(--accent); color: var(--accent-text); } .help-tip-bubble { position: absolute; top: calc(100% + 8px); left: 0; width: max-content; max-width: 280px; background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: 0.5rem 0.7rem; font-size: 0.76rem; font-weight: 400; line-height: 1.6; text-align: left; white-space: normal; word-break: break-word; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s; z-index: 60; pointer-events: none; } .help-tip-bubble strong { color: var(--text); } .help-tip:hover .help-tip-bubble, .help-tip:focus-within .help-tip-bubble, .help-tip:focus-visible .help-tip-bubble { opacity: 1; visibility: visible; transform: translateY(0); } /* 吹き出しの上向き三角 */ .help-tip-bubble::before { content: ''; position: absolute; bottom: 100%; left: 9px; border: 5px solid transparent; border-bottom-color: var(--border); } /* 右寄せの「?」では吹き出しを左方向へ開き、パネル端で見切れないようにする */ .help-tip-end .help-tip-bubble { left: auto; right: 0; } .help-tip-end .help-tip-bubble::before { left: auto; right: 9px; } /* 画面下部（コンポーザー等）の「?」では吹き出しを上方向に開き、下端で見切れないようにする */ .help-tip-up .help-tip-bubble { top: auto; bottom: calc(100% + 8px); transform: translateY(3px); } .help-tip-up .help-tip-bubble::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--border); } /* ── Team section (dashboard) ── */ .team-section { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1.75rem; } .team-section h2 { font-size: 1.1rem; margin-bottom: 1rem; } .team-status { color: var(--live); font-size: 0.85rem; margin-bottom: 0.75rem; } .team-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-bottom: 1.25rem; } .team-table th { text-align: left; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text-dim); text-transform: uppercase; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); } .team-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); } .team-table tr.row-link { cursor: pointer; } .role-select { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: 6px; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.82rem; } .team-invite { display: flex; gap: 0.6rem; flex-wrap: wrap; } .team-invite input { flex: 1; min-width: 240px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.55rem 0.8rem; color: var(--text); font: inherit; font-size: 0.88rem; } .team-invite input:focus { outline: none; border-color: var(--accent); } /* ── Credit purchase (dashboard) ── */ .billing-section { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1.75rem; } .billing-section h2 { font-size: 1.1rem; margin-bottom: 0.5rem; } .billing-section .muted { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1.1rem; } .billing-status { color: var(--live); font-size: 0.88rem; margin: 0.75rem 0; } .client-login-form { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; } .client-login-form + .client-login-form { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--border); } /* 担当者ごとの代理ログインボタン行（担当者ログインタブ） */ .client-impersonate { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.9rem; } .client-impersonate .btn svg { vertical-align: -2px; margin-right: 0.3rem; } /* クレジット購入：金額プリセットのタイル＋「その他」の金額指定。 */ .credit-buy-head { font-size: 1.15rem; margin: 1.6rem 0 0.3rem; } .credit-buy-lead { margin: 0 0 1rem; font-size: 0.9rem; } .credit-buy { margin-bottom: 0.9rem; } .credit-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 0.9rem; } .credit-option { position: relative; cursor: pointer; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.35rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .credit-option:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); } .credit-option input { position: absolute; opacity: 0; pointer-events: none; } .credit-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .credit-option-price { font-size: 1.3rem; font-weight: 700; } .credit-option-badge { align-self: flex-start; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .credit-option-credits { font-size: 0.82rem; color: var(--text-dim); } .credit-custom-row { margin-bottom: 0.9rem; } .credit-custom-field { display: flex; align-items: center; gap: 0.4rem; max-width: 340px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius); padding: 0.1rem 0.75rem; } .credit-custom-field:focus-within { border-color: var(--accent); } .credit-custom-yen { color: var(--text-dim); } .credit-custom-field input { border: 0; background: transparent; padding: 0.55rem 0; width: 100%; color: var(--text); font-size: 1rem; } .credit-custom-field input:focus { outline: none; } .credit-custom-est { margin: 0.4rem 0 0; font-size: 0.85rem; } .credit-custom-est.is-error { color: var(--danger-text); } .credit-buy-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .credit-pack-note { font-size: 0.78rem; } /* ── Modal ── */ .modal-backdrop { position: fixed; inset: 0; z-index: 900; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; } .modal { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; width: min(420px, 92vw); display: flex; flex-direction: column; gap: 0.9rem; } .modal h3 { font-size: 1.05rem; } .modal-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.84rem; color: var(--text-dim); } .modal-field input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; color: var(--text); font: inherit; } .modal-field input:focus { outline: none; border-color: var(--accent); } .modal-field textarea { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; color: var(--text); font: inherit; resize: vertical; } .modal-field textarea:focus { outline: none; border-color: var(--accent); } /* Form settings modal */ .form-settings-modal { width: min(560px, 92vw); max-height: 86vh; overflow-y: auto; } .modal-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; } .modal-check input { accent-color: var(--accent); width: 16px; height: 16px; } .fs-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; } .fs-fieldset:disabled { opacity: 0.45; } .fs-auto-fields { display: flex; flex-direction: column; gap: 0.9rem; padding-left: 0.25rem; } .fs-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.78rem; } .fs-var-chip { background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; color: var(--text); font: inherit; font-size: 0.76rem; padding: 0.15rem 0.6rem; cursor: pointer; } .fs-var-chip:hover { border-color: var(--accent); color: var(--accent); } .fs-recaptcha { border-top: 1px solid var(--border); padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; } .fs-rc-fields { display: flex; flex-direction: column; gap: 0.9rem; padding-left: 0.25rem; } .fs-rc-guide { margin: 0; padding-left: 1.2rem; font-size: 0.8rem; display: flex; flex-direction: column; gap: 0.25rem; } .fs-rc-guide a { color: var(--accent); } .fs-rc-guide code { word-break: break-all; } .slug-row { display: flex; align-items: center; gap: 0.4rem; } .slug-row input { flex: 1; } .slug-row code { color: var(--text-dim); } .modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; } /* ── Custom domains (settings modal) ── */ #settings-modal .modal { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; } .settings-domains { border-top: 1px solid var(--border); padding-top: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; } .settings-publish-state { border-top: 1px solid var(--border); padding-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; } .settings-publish-state .btn { flex-shrink: 0; } .settings-section-head { display: flex; flex-direction: column; gap: 0.15rem; } .settings-section-head .muted { font-size: 0.78rem; } .domain-add-row { display: flex; gap: 0.5rem; } .domain-add-row input { flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; color: var(--text); font: inherit; font-size: 0.86rem; } .domain-add-row input:focus { outline: none; border-color: var(--accent); } .domain-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; } .domain-card-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .domain-host { font-weight: 600; font-size: 0.88rem; word-break: break-all; } .domain-badge { font-size: 0.72rem; font-weight: 600; border-radius: 5px; padding: 0.12rem 0.45rem; } .domain-verified { background: rgba(var(--live-rgb), 0.15); color: var(--live); } .domain-pending { background: rgba(var(--warning-rgb), 0.15); color: var(--warning-text); } .domain-card-actions { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; } .domain-setup { background: var(--bg-input); border-radius: var(--radius-sm); padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.6rem; } .domain-setup-lead { font-size: 0.78rem; color: var(--text-dim); } .domain-record { display: flex; flex-direction: column; gap: 0.35rem; } .domain-record-tag { font-size: 0.74rem; font-weight: 600; color: var(--accent); } .domain-record-row { display: flex; align-items: center; gap: 0.5rem; } .domain-record-label { font-size: 0.74rem; color: var(--text-dim); min-width: 4.5rem; flex: none; } .domain-record-value { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.5rem; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text); word-break: break-all; } /* ── Section picker (visual editor: add section) ── */ .section-picker { width: min(560px, 94vw); max-height: 86vh; overflow-y: auto; } .section-picker-head { display: flex; flex-direction: column; gap: 0.2rem; } .section-picker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; } .section-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.55rem; cursor: pointer; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; font: inherit; } .section-card:hover { border-color: var(--accent); } .section-card.selected { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } .section-card-icon { color: var(--accent); display: inline-flex; } .section-card-label { font-size: 0.84rem; font-weight: 600; } .section-card-desc { font-size: 0.72rem; color: var(--text-dim); line-height: 1.35; } .section-picker-footer { display: flex; align-items: center; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: 0.8rem; } .section-picker-footer strong { font-size: 0.85rem; white-space: nowrap; } .section-picker-input { flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; color: var(--text); font: inherit; font-size: 0.84rem; } .section-picker-input:focus { outline: none; border-color: var(--accent); } /* ── Inline AI edit (⌘K) ── */ .inline-ai-modal { width: min(560px, 94vw); } .inline-ai-head { display: flex; align-items: center; gap: 0.5rem; } .inline-ai-head svg { color: var(--accent); flex: none; } .inline-ai-path { font-size: 0.74rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inline-ai-selection { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; max-height: 130px; overflow: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); white-space: pre-wrap; word-break: break-all; } .inline-ai-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; color: var(--text); font: inherit; font-size: 0.88rem; resize: vertical; min-height: 52px; } .inline-ai-input:focus { outline: none; border-color: var(--accent); } .inline-ai-hint { margin-right: auto; font-size: 0.74rem; } .editor-main { position: relative; } .editor-ai-overlay { position: absolute; inset: 0; z-index: 40; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; } .editor-ai-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; box-shadow: var(--shadow-2); } .editor-ai-spinner { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid var(--border); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } /* ── Device toggle ── */ .device-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .device-toggle button { background: none; border: none; color: var(--text-dim); font-size: 0.85rem; padding: 0.35rem 0.55rem; cursor: pointer; display: inline-flex; align-items: center; } .device-toggle button:hover { color: var(--text); } .device-toggle button.active { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); } .device-toggle button svg { width: 15px; height: 15px; } /* ── SVG icons in buttons (legacy studio icon set) ── */ .builder .btn, .builder-topbar .btn, .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; } .builder .btn svg, .builder-topbar .btn svg { width: 14px; height: 14px; flex-shrink: 0; } .icon-btn svg { width: 13px; height: 13px; } .file-delete svg { width: 11px; height: 11px; } .attach-remove { display: inline-flex; align-items: center; justify-content: center; padding: 0; } .attach-remove svg { width: 10px; height: 10px; } @media (max-width: 880px) { .builder { grid-template-columns: 1fr; grid-template-rows: 1fr 45vh; } .chat-panel { border-right: none; border-top: 1px solid var(--border); order: 2; } .preview-panel { order: 1; } /* 縦積みレイアウトでは横の境目が無いのでリサイズハンドルを隠す */ .dock-resize { display: none; } /* 狭幅トップバー: 操作が1行に収まらないため折返しを許し高さを可変にする。 本体は flex column（.builder-body）なので2行になっても崩れない。 */ .builder-topbar { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 0.4rem; padding: 10px 0.75rem; } .builder-topbar .topbar-left { min-width: 0; flex: 1 1 auto; } .builder-topbar .site-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .builder-topbar .topbar-right { flex-wrap: wrap; row-gap: 0.3rem; } } @media (max-width: 640px) { /* さらに狭い幅ではボタン群を詰めて2行以内に収める */ .builder-topbar .topbar-left, .builder-topbar .topbar-right { gap: 0.45rem; } .builder-topbar .view-switch button, .builder-topbar .view-switch a { padding: 0.3rem 0.55rem; font-size: 0.78rem; } } /* ── 既存サイト取り込みウィザード ── */ .import-dialog { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto; } .import-head { display: flex; align-items: center; justify-content: space-between; } .import-x { background: none; border: none; color: var(--text-dim); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .import-x:hover { color: var(--text); } .import-step { display: flex; flex-direction: column; gap: 0.9rem; } .import-drop { display: flex; align-items: center; justify-content: center; text-align: center; border: 1.5px dashed var(--border); border-radius: 12px; padding: 2.2rem 1rem; cursor: pointer; color: var(--text); transition: border-color 0.15s, background 0.15s; } .import-drop:hover, .import-drop.dragging { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); } .import-drop-label { font-size: 0.95rem; } .import-error { color: var(--danger); font-size: 0.85rem; margin: 0; } .import-summary { color: var(--text-dim); font-size: 0.85rem; margin: 0; } .import-warnings { display: flex; flex-direction: column; gap: 0.4rem; } .import-warn { font-size: 0.82rem; margin: 0; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); border-left: 3px solid; } .import-warn-error { color: var(--danger-text); background: rgba(var(--danger-rgb), 0.1); border-color: var(--danger); } .import-warn-warning { color: var(--warning-text); background: rgba(var(--warning-rgb), 0.1); border-color: var(--warning); } .import-warn-info { color: var(--text-dim); background: var(--bg-input); border-color: var(--border); } .import-pages { max-height: 220px; overflow-y: auto; } .import-page { padding: 0.3rem 0; } .import-page code { color: var(--text-dim); font-size: 0.78rem; } .import-page input:disabled { opacity: 0.6; } .import-home-tag { font-size: 0.72rem; font-weight: 600; border-radius: 5px; padding: 0.08rem 0.4rem; background: rgba(var(--live-rgb), 0.15); color: var(--live); } .import-skipped { font-size: 0.82rem; color: var(--text-dim); } .import-skipped summary { cursor: pointer; } .import-skipped ul { margin: 0.5rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; } .import-skipped code { word-break: break-all; } .import-loading { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 2rem 0; color: var(--text-dim); } /* ── UXレビュー対応の追加スタイル ── */ /* フォームの項目別エラー（UX-111/238） */ .field-error { color: var(--danger); font-size: 0.8rem; margin: -0.7rem 0 1rem; line-height: 1.6; } input.is-error, textarea.is-error, [aria-invalid="true"] { border-color: var(--danger) !important; } /* チャットの error/quota メッセージに付くアクション（UX-005/103） */ .msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; } .msg-action-btn { text-decoration: none; } .msg-action-note { font-size: 0.82rem; color: var(--text-dim); } /* トップバーのブランドロゴ＝ホーム（UX-110） */ .topbar-brand { font-size: 1.15rem; line-height: 1; color: var(--brand); text-decoration: none; flex-shrink: 0; } .topbar-brand:hover { text-decoration: none; opacity: 0.85; } /* トップバーのAIクレジット常時表示ピル（UX-005） */ .credit-pill { flex-shrink: 0; font-size: 0.76rem; line-height: 1; white-space: nowrap; padding: 0.3rem 0.6rem; border-radius: 999px; text-decoration: none; border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-input); } .credit-pill:hover { text-decoration: none; border-color: var(--accent); color: var(--text); } .credit-pill.credit-low { border-color: var(--warning); color: var(--text); background: rgba(var(--warning-rgb), 0.15); } .credit-pill.credit-exhausted { border-color: var(--danger); color: var(--danger-text); background: rgba(var(--danger-rgb), 0.12); font-weight: 600; } /* 投稿エディタ：未来日＝予約投稿の注意（UX-105） */ .posts-schedule-note { font-size: 0.82rem; color: var(--text); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin: 0.6rem 0 0; line-height: 1.6; } .posts-schedule-note[hidden] { display: none; } /* iOS Safari は16px未満の入力欄でフォーカス時に自動ズームし、戻らず横スクロールが 発生する。スマホではフォーム要素を16px以上に固定する（UX-116）。 */ @media (max-width: 768px) { input:not([type="checkbox"]):not([type="radio"]), textarea, select { font-size: 16px !important; } } /* ── 操作中のフォーカスを明確に（UX-230） ── 既存の :focus は outline:none・border-color のみで、明所やキーボード操作で 現在位置が分かりにくい。:focus-visible に box-shadow のリングを足して可視化する。 なお、ボタン/リンクはマウスクリックではリングが出ないが、テキスト入力欄・select・ contenteditable は仕様上クリックでも :focus-visible が立つため、クリック時にも リングが出る（入力位置を示す正しいアクセシビリティ挙動）。 */ input:not([type="checkbox"]):not([type="radio"]):focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable="true"]:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35); outline: none; } /* ── アプリ内ダイアログ（confirm / prompt 置き換え・UX-214 / UX-237） ── */ .app-dialog-backdrop { z-index: 1000; } /* 他のモーダルより前面に重ねる */ .app-dialog { width: min(440px, 92vw); } .app-dialog-msg { font-size: 0.9rem; color: var(--text); line-height: 1.7; white-space: pre-wrap; word-break: break-word; margin: 0; } .app-dialog-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; color: var(--text); font: inherit; width: 100%; } textarea.app-dialog-input { resize: vertical; min-height: 4rem; } .app-dialog-wide { width: min(640px, 94vw); } /* 追加アクション（appDialog の actionLabel）— 閉じる/OKと区別して左寄せ */ .app-dialog-action { margin-right: auto; } /* ── 公開前の確認 — 変更内容の一覧（pubdiff） ── */ .pubdiff { display: flex; flex-direction: column; gap: 0.55rem; max-height: min(52vh, 480px); overflow-y: auto; margin: 0.2rem 0; padding-right: 0.2rem; } .pubdiff-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.55rem 0.7rem; background: var(--bg-input); } .pubdiff-item-head { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; } .pubdiff-badge { font-size: 0.72rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; flex: none; } .pubdiff-badge-added { color: var(--live); border-color: var(--live); } .pubdiff-badge-modified { color: var(--warning-text); border-color: var(--warning); } .pubdiff-badge-deleted { color: var(--danger-text); border-color: var(--danger); } .pubdiff-item-title { font-size: 0.88rem; font-weight: 600; flex: none; } .pubdiff-item-path { color: var(--text-dim); font-size: 0.74rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pubdiff-texts { list-style: none; margin: 0.45rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .pubdiff-texts li { font-size: 0.8rem; line-height: 1.5; display: flex; flex-direction: column; gap: 0.15rem; } .pubdiff-texts del, .pubdiff-texts ins { display: block; border-radius: 6px; padding: 0.14rem 0.45rem; word-break: break-word; } .pubdiff-texts del { background: rgba(var(--danger-rgb), 0.1); color: var(--danger-text); text-decoration: line-through; text-decoration-color: rgba(var(--danger-rgb), 0.55); } .pubdiff-texts ins { background: rgba(var(--live-rgb), 0.12); color: var(--live); text-decoration: none; } .pubdiff-texts del::before { content: '− '; } .pubdiff-texts ins::before { content: '＋ '; } .pubdiff-note { color: var(--text-dim); font-size: 0.76rem; margin-top: 0.4rem; } .pubdiff-images { margin-top: 0.45rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .pubdiff-images-label { color: var(--text-dim); font-size: 0.76rem; } .pubdiff-chip { border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.74rem; } .pubdiff-chip-add { color: var(--live); border-color: rgba(var(--live-rgb), 0.55); } .pubdiff-chip-del { color: var(--danger-text); border-color: rgba(var(--danger-rgb), 0.55); } /* ── 変更履歴の差分ポップアップ — コードの before/after（revdiff） ── */ .app-dialog-xl { width: min(1100px, 96vw); max-height: 88vh; } .revision-diff-btn { margin-left: auto; flex: none; } .revdiff { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; flex: 1 1 auto; overflow: hidden; } .revdiff-meta { font-size: 0.78rem; color: var(--text-dim); flex: none; } .revdiff-scroll { display: flex; flex-direction: column; gap: 0.7rem; overflow-y: auto; min-height: 0; padding-right: 0.2rem; } .revdiff-file { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-input); } .revdiff-file-head { display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding: 0.5rem 0.7rem; cursor: pointer; list-style: none; user-select: none; } .revdiff-file-head::-webkit-details-marker { display: none; } .revdiff-file[open] > .revdiff-file-head .fold-chevron { transform: rotate(90deg); } .revdiff-badge { font-size: 0.72rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; flex: none; } .revdiff-badge-created { color: var(--live); border-color: var(--live); } .revdiff-badge-modified { color: var(--warning-text); border-color: var(--warning); } .revdiff-badge-deleted { color: var(--danger-text); border-color: var(--danger); } .revdiff-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; min-width: 0; overflow-wrap: anywhere; } .revdiff-stats { margin-left: auto; display: flex; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; flex: none; } .revdiff-stat-add { color: var(--live); } .revdiff-stat-del { color: var(--danger-text); } .revdiff-table-wrap { border-top: 1px solid var(--border); } .revdiff-table { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.74rem; line-height: 1.55; } .revdiff-no { width: 1%; min-width: 2.8em; padding: 0 0.55em; text-align: right; color: var(--text-dim); user-select: none; vertical-align: top; } .revdiff-code { padding: 0 0.6em 0 1.5em; white-space: pre-wrap; word-break: break-all; position: relative; } .revdiff-code::before { position: absolute; left: 0.5em; top: 0; color: var(--text-dim); } .revdiff-add { background: rgba(var(--live-rgb), 0.12); } .revdiff-add .revdiff-no { background: rgba(var(--live-rgb), 0.16); } .revdiff-add .revdiff-code::before { content: '+'; color: var(--live); } .revdiff-del { background: rgba(var(--danger-rgb), 0.1); } .revdiff-del .revdiff-no { background: rgba(var(--danger-rgb), 0.14); } .revdiff-del .revdiff-code::before { content: '−'; color: var(--danger-text); } .revdiff-gap td { padding: 0.12rem 0.6em; text-align: center; color: var(--text-dim); background: rgba(var(--accent-rgb), 0.07); user-select: none; } .revdiff-table-wrap .list-more { width: calc(100% - 1.4rem); margin: 0.45rem 0.7rem; } /* ── 画像差し替えダイアログ — 現在の画像と新しい画像を並べて見せる ── */ .img-swap-modal { width: min(640px, 94vw); } .img-swap-body { display: flex; align-items: stretch; gap: 0.8rem; margin: 1rem 0 1.2rem; } .img-swap-pane { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; } .img-swap-arrow { align-self: center; color: var(--text-dim); font-size: 1.25rem; flex: none; } .img-swap-thumb, .img-swap-drop { height: 180px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-input); } .img-swap-thumb { border: 1px solid var(--border); } .img-swap-thumb img, .img-swap-drop img { max-width: 100%; max-height: 100%; object-fit: contain; } .img-swap-thumb-missing { color: var(--text-dim); font-size: 0.8rem; } .img-swap-drop { border: 2px dashed var(--border); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .img-swap-drop:hover, .img-swap-drop:focus-visible, .img-swap-drop.img-swap-drop-over { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); outline: none; } .img-swap-drop.img-swap-drop-has { border-style: solid; } .img-swap-drop-hint { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; color: var(--text-dim); text-align: center; padding: 0 1rem; } .img-swap-drop-hint strong { color: var(--text); font-size: 0.85rem; } .img-swap-drop-note { font-size: 0.72rem; } .img-swap-caption { font-size: 0.78rem; color: var(--text); } .img-swap-meta { font-size: 0.72rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* アセットから選ぶ（アップロード済み assets/img/ の一覧。1件以上あるときだけ表示） */ .img-swap-assets { margin: -0.4rem 0 1rem; border-top: 1px solid var(--border); padding-top: 0.7rem; } .img-swap-assets-caption { font-size: 0.78rem; color: var(--text); margin-bottom: 0.45rem; } .img-swap-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 0.5rem; max-height: 210px; overflow-y: auto; } .img-swap-asset { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-raised); padding: 0; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; font: inherit; color: var(--text-dim); } .img-swap-asset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--bg-input); } .img-swap-asset-name { font-size: var(--text-xs); padding: 0.15rem 0.35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .img-swap-asset:hover, .img-swap-asset:focus-visible { border-color: var(--accent); outline: none; } .img-swap-asset-selected, .img-swap-asset-selected:hover { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35); } /* ── 動画変更ダイアログ — レイアウトは画像差し替え（img-swap-*）を共用 ── */ .vid-swap-input { background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; color: var(--text); font: inherit; font-size: 0.84rem; } .vid-swap-input:focus { outline: none; border-color: var(--accent); } /* ── 直接編集が自動で直せずチャットに下書きを入れたときの合図（UX-212） ── */ @keyframes composer-flash-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); border-color: var(--accent); } 100% { box-shadow: 0 0 0 9px rgba(var(--accent-rgb), 0); } } .chat-composer.composer-flash { animation: composer-flash-pulse 1.6s ease-out; } /* ── 初回（ページ未生成）は上級者向けツールを隠す段階開示（UX-218） ── 最初のページができたら builder.js が topbar-minimal を外して表示する。 ページ選択・直接編集・画面サイズはプレビュー操作バー側で別途制御する。 公開ボタンも、公開する対象（ページ）ができるまで隠す。 */ .builder-topbar.topbar-minimal #view-switch, .builder-topbar.topbar-minimal .history-toggle, .builder-topbar.topbar-minimal #open-site-view-btn, .builder-topbar.topbar-minimal #publish-btn { display: none; } /* ── サイト設定の最下部に小さく置くサイト削除リンク ── */ .settings-delete-row { margin-top: 0.25rem; text-align: right; } .link-danger { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.78rem; color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; } .link-danger:hover { color: var(--danger); } /* ── プレビュー操作バー（ヘッダーから移設：ページ・直接編集・画面サイズ） ── */ .preview-panel { position: relative; } .preview-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.65rem 0.9rem; flex-shrink: 0; background: var(--bg-raised); border-bottom: 1px solid var(--border); } .preview-bar[hidden] { display: none; } .preview-bar-spacer { flex: 1 1 auto; } .preview-bar-label { font-size: 0.8rem; color: var(--text-dim); } /* ── 編集方法の説明（最初の1回だけ表示するコーチマーク） ── */ .edit-coach { position: absolute; top: 3.1rem; left: 1rem; z-index: 40; max-width: min(340px, calc(100% - 2rem)); background: var(--bg-raised); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 0.9rem 1rem; font-size: 0.82rem; line-height: 1.65; color: var(--text); } .edit-coach[hidden] { display: none; } .edit-coach-lead { font-weight: 600; margin: 0 0 0.5rem; } .edit-coach ul { margin: 0 0 0.75rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; } .edit-coach strong { color: var(--accent); } /* ── 編集方法のコーチマークツアー（初回のみ・実物のUIをスポットライトで案内） ── .coach-spot は対象要素に重ねる枠。巨大な box-shadow の広がりで周囲を1枚で 減光する（穴あきオーバーレイ）。pointer-events は持たせず操作を妨げない。 モーダル(900)より下・他の固定要素(〜500)より上に重ねる。 */ .coach-spot { position: fixed; z-index: 800; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 2px var(--accent), 0 0 0 9999px var(--overlay-bg); transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease; } .coach-tip { position: fixed; z-index: 801; max-width: min(360px, calc(100vw - 1rem)); background: var(--bg-raised); border: 1px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 0.9rem 1rem; font-size: 0.82rem; line-height: 1.65; color: var(--text); } .coach-tip-step { margin: 0 0 0.2rem; font-size: 0.72rem; color: var(--text-dim); } .coach-tip-title { margin: 0 0 0.3rem; font-weight: 600; color: var(--accent); } .coach-tip-body { margin: 0 0 0.6rem; } .coach-tip-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; } .coach-example-btn { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.78rem; cursor: pointer; } .coach-example-btn:hover, .coach-example-btn:focus-visible { border-color: var(--accent); color: var(--accent); } .coach-tip-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; } .coach-skip-btn { border: none; background: none; padding: 0; cursor: pointer; font-size: 0.78rem; color: var(--text-dim); text-decoration: underline; } .coach-skip-btn:hover { color: var(--text); } /* 対象ページ選択（UX-302）。ラベル語は廃し、selectの「サイト全体」表示と ホバーのtitle / aria-labelで意味を伝える。 */ .composer-scope-wrap { display: inline-flex; align-items: center; min-width: 0; } /* 編集範囲セレクトの補足（?）はセレクト直後に寄せる */ .composer-scope-tip { margin-left: -0.25rem; } /* 履歴ビューの冒頭で3つの戻し方の違いを説明（UX-303） */ .history-intro { font-size: 0.8rem; line-height: 1.7; margin: 0 0 0.6rem; padding: 0.6rem 0.75rem; background: var(--bg-input); border-radius: var(--radius-sm); } .history-intro strong { color: var(--text); } /* ウィザードで「次へ」が押せない理由（UX-306） */ /* 「次へ」が押せない理由は、無効ボタンにマウスを乗せたとき吹き出しで出す。 無効ボタンはホバーを拾わないので pointer-events を切り、ラッパーで :hover を受ける。 */ .wizard-next-group { position: relative; display: inline-flex; align-items: center; } .wizard-next-group .btn:disabled { pointer-events: none; } .wizard-next-group .help-tip-bubble { left: auto; right: 0; top: auto; bottom: calc(100% + 8px); transform: translateY(3px); } .wizard-next-group .help-tip-bubble::before { left: auto; right: 20px; top: 100%; bottom: auto; border-top-color: var(--border); border-bottom-color: transparent; } .wizard-next-group.has-hint:hover .help-tip-bubble { opacity: 1; visibility: visible; transform: translateY(0); } /* 動きを抑える設定では新規アニメーションを無効化 */ @media (prefers-reduced-motion: reduce) { .chat-composer.composer-flash { animation: none; } } /* ===================================================================== MANAGEMENT CONSOLE — readability / color pass (admin + agency) Appended at end of app.css (wins later-source ties). CSS only. --------------------------------------------------------------------- Both-theme safe: every color derives from existing tokens via color-mix(in srgb, …) or rgba(var(--*-rgb), …), so values recompute against the active theme (:root light / html[data-theme='dark']). Scoping: ALL rules are scoped under .admin (admin console) and .agency-console (agency console) so the builder, public sites and the regular dashboard — including the dashboard team table whose header carries a help-tip bubble — are left completely untouched. The :root/[data-theme] tokens and the bare .btn-ghost rule are NOT modified. Indigo (--accent) stays the single action hue. ===================================================================== */ /* ── 1. TABLES (.team-table inside a console) ──────────────────────── Problem: faint --border dividers (near-invisible in light), no header background, no zebra → tall rows feel disconnected and unscannable. Fix: frame the table as a rounded raised panel, give it a readable header band (no tiny all-caps), text-derived dividers, zebra + a clear accent-tinted hover row. Console tables have no in-cell help-tips, so overflow:hidden corner-clipping is safe here. */ .admin .team-table, .agency-console .team-table { border-collapse: separate; /* required to round corners + clip the header band */ border-spacing: 0; /* keep single 1px dividers, no gaps */ border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-raised); /* the table reads as one panel against the page */ } /* Header band: subtle raised tint + readable header text. */ .admin .team-table thead th, .admin .team-table th, .agency-console .team-table thead th, .agency-console .team-table th { background: color-mix(in srgb, var(--text) 6%, var(--bg-raised)); color: var(--text); font-size: 0.78rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, var(--border)); } /* Body row dividers: stronger than raw --border so rows are easy to follow. */ .admin .team-table tbody td, .agency-console .team-table tbody td { border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, var(--border)); vertical-align: top; } .admin .team-table tbody tr:last-child td, .agency-console .team-table tbody tr:last-child td { border-bottom: none; } /* Zebra striping: barely-there neutral wash for left-to-right tracking. */ .admin .team-table tbody tr:nth-child(even) td, .agency-console .team-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--text) 3.5%, transparent); } /* Row hover: gentle accent wash signals the row is interactive. */ .admin .team-table tbody tr:hover td, .agency-console .team-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* Suspended (dimmed) rows keep a danger hover, not the amber action tint. */ .admin .team-table tbody tr.admin-suspended:hover td { background: color-mix(in srgb, var(--danger) 7%, transparent); } /* Primary name cells () stay clearly primary over zebra/hover tints. */ .admin .team-table td strong, .agency-console .team-table td strong { color: var(--text); } /* ── 2. CONSOLE GHOST BUTTONS (设定 / サイトを管理 / 前へ・次へ) ────── Problem: .btn-ghost is transparent with a faint --border — barely reads as a button, worst light-on-light. Give it an input-like filled face, a firmer text-derived border and a clear amber hover. The bare .btn-ghost rule (the builder depends on it) is left untouched. */ .admin .btn-ghost, .agency-console .btn-ghost { background: var(--bg-input); border: 1px solid color-mix(in srgb, var(--text) 22%, var(--border)); color: var(--text); font-weight: 600; transition: background 0.15s ease, border-color 0.15s ease; } .admin .btn-ghost:hover, .agency-console .btn-ghost:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-input)); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--text); filter: none; } .admin .btn-ghost:active, .agency-console .btn-ghost:active { background: color-mix(in srgb, var(--accent) 18%, var(--bg-input)); } /* Disabled pagination chips ("前へ"/"次へ" on first/last page) stay quiet. */ .admin .btn-ghost[aria-disabled='true'], .agency-console .btn-ghost[aria-disabled='true'] { background: transparent; border-color: var(--border); color: var(--text-dim); } /* ── 3. BADGES — legible status / plan chips ──────────────────────── Problem: outline-only chips, several low-contrast and hard to tell apart. Fix: soft tinted fills + matching borders keyed to each existing hue. • bare .badge → "Free", "クライアント: …", 非公開/下書き → neutral • .badge-live → "Pro", 代理店, 公開中, SUCCESS → green • .badge-admin → 個別設定, heading 代理店/管理画面 → amber • .badge-scheduled → scheduled states → amber • .badge-suspended → 期限切れ → danger */ .admin .badge, .agency-console .badge { font-weight: 600; background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 16%, var(--border)); color: var(--text); } .admin .badge-live, .agency-console .badge-live { background: color-mix(in srgb, var(--live) 16%, transparent); border-color: color-mix(in srgb, var(--live) 45%, transparent); color: var(--live); } .admin a.badge-live:hover, .agency-console a.badge-live:hover { background: color-mix(in srgb, var(--live) 24%, transparent); text-decoration: none; } .admin .badge-admin, .agency-console .badge-admin { background: rgba(var(--accent-rgb), 0.16); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); font-weight: 600; } .admin .badge-scheduled, .agency-console .badge-scheduled { background: rgba(var(--accent-rgb), 0.16); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } .admin .badge-suspended, .agency-console .badge-suspended { background: rgba(var(--danger-rgb), 0.16); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); font-weight: 600; } /* ── 4. NAV + SURFACES ────────────────────────────────────────────── A touch more definition without a new hue. */ .admin .admin-nav a:hover, .agency-console .admin-nav a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); } .admin .admin-nav a.active, .agency-console .admin-nav a.active { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .admin .admin-nav a.active:hover, .agency-console .admin-nav a.active:hover { color: var(--accent); } /* Stat cards: a hair firmer edge so the metric tiles delineate from the page. */ .admin .stat-card { border-color: color-mix(in srgb, var(--text) 12%, var(--border)); } /* サイト別クレジット消費の内訳。普段は畳んでおき、開いたときだけ表示する。 */ .usage-breakdown { margin-top: 0.75rem; } .usage-breakdown summary { cursor: pointer; font-size: 0.88rem; } .usage-breakdown[open] summary { margin-bottom: 0.6rem; } .usage-breakdown .team-table { margin-bottom: 0; } .usage-breakdown .team-table td:nth-child(n+2), .usage-breakdown .team-table th:nth-child(n+2) { text-align: right; } /* クレジット残高の合計と内訳（利用量バー）。バーは消費した割合を示し、 使うほど伸びる。消費80%以上で警告色、100%で危険色に切り替える。 */ .credit-total { margin-bottom: 0.75rem; } .credit-bars { max-width: 560px; margin-bottom: 1.1rem; } .usage-bar { margin: 0 0 0.9rem; } .usage-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.88rem; } .usage-bar-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .usage-bar-track { height: 8px; margin-top: 0.35rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); } .usage-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.3s ease; } .usage-bar-fill.is-high { background: var(--warning); } .usage-bar-fill.is-full { background: var(--danger); } .usage-bar-note { margin: 0.3rem 0 0; font-size: 0.8rem; } .usage-bar-extra { margin: 0; font-size: 0.88rem; } .usage-bar-extra strong { font-variant-numeric: tabular-nums; } /* ── テーブルの横スクロール基盤 ── 幅の広いテーブルを狭い画面でも欠けなく見せる。ラッパ側で横スクロールを引き受け、 テーブル自身は縮まず最小幅を保つ。 */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll > table { min-width: max-content; } /* ── 管理画面: ナビ・検索・フォーム補助 ── */ .admin-back-home { margin-left: auto; font-size: 0.84rem; color: var(--text-dim); align-self: center; white-space: nowrap; } .admin-back-home:hover { color: var(--text); } .admin-search-note { margin: -0.4rem 0 1rem; font-size: 0.84rem; } .admin-search-note a { margin-left: 0.6rem; } /* 入力直下のエラーはラベル内の gap で間隔を取るため、汎用の負マージンを打ち消す */ .admin-create-grid .field-error, .admin-form .field-error { margin: 0; } .admin-pass-tools { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* 代理店一覧: 配下クライアントの行。左枠線とインデントで代理店との従属関係を示す */ .admin-client-row td:first-child { padding-left: 1.6rem; box-shadow: inset 3px 0 0 var(--border); } .admin-client-row .admin-note-row { margin-left: 0; } /* 代理店一覧: クライアント行の開閉トグル（既定は畳む。開くとシェブロンが下向きに回転） */ .admin-clients-toggle { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.4rem; padding: 0.1rem 0.4rem; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-dim); font-size: 0.78rem; cursor: pointer; white-space: nowrap; } .admin-clients-toggle:hover { color: var(--text); border-color: var(--text-dim); } .admin-clients-toggle svg { transition: transform 0.15s ease; } .admin-clients-toggle[aria-expanded="true"] svg { transform: rotate(90deg); } /* 契約先一覧: 運営メモの抜粋（.table-scroll 内で吹き出しは見切れるため常時表示） */ .admin-note-row { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.2rem; max-width: 280px; white-space: normal; color: var(--text-dim); font-size: 0.78rem; font-weight: 400; } .admin-note-row svg { flex: none; } /* 管理画面の共通確認モーダル: 変更前→変更後の列挙で使う改行を保持 */ #admin-confirm-body { white-space: pre-line; } /* ── 狭幅トップバー ── 管理者兼代理店だとリンクが56px・折返し不可の1行に収まらないため、 640px以下では折返しを許し高さを可変にする。ビルダーのトップバー （.builder-topbar）は独自レイアウトのため対象外。 */ @media (max-width: 640px) { .topbar:not(.builder-topbar) { height: auto; min-height: 56px; flex-wrap: wrap; gap: 0.5rem 0.9rem; padding-top: 10px; padding-bottom: 10px; } .topbar:not(.builder-topbar) .topbar-nav { flex-wrap: wrap; gap: 0.5rem 0.9rem; } } /* ── スクリーンリーダー専用テキスト（視覚的には非表示） ── */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ── 生成中の経過時間（チャットのステータス行） ── */ #status-elapsed { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ── プレビュー再読込中のプログレスバー（ビューポート上端・不確定） ── .gen-bar と同じ流れるアニメーション（gen-bar-slide）を流用する。 */ .preview-viewport { position: relative; } .preview-loading { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 30; background: rgba(var(--accent-rgb), 0.15); overflow: hidden; } .preview-loading > span { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--accent); animation: gen-bar-slide 1.3s ease-in-out infinite; } .preview-loading[hidden] { display: none; } /* ── 画像ファイルをコンポーザーへドラッグ中の視覚フィードバック ── */ .chat-composer.composer-dragover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25); } /* ── 公開ボタンの未公開変更ドット ── 公開リリースより新しい編集があるとき builder.js が付与する。 下書き（リリースなし）では出さない。 */ #publish-btn { position: relative; } #publish-btn.has-unpublished::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-raised); /* トップバー背景で縁取り、ボタンと同系色でも見えるように */ } /* ===================================================================== APP SHELL — サイドバー型ナビゲーション（管理画面群） layouts/app.blade.php が @section('shell') のあるページで描画する。 ビルダー（chrome差し替え）と公開ページには影響しない。 ===================================================================== */ .app-shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; min-height: calc(100vh - 57px); /* topbar の下を埋める */ } .app-sidebar { position: sticky; top: 0; align-self: stretch; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 0.7rem 1rem; border-right: 1px solid var(--border); background: var(--bg-raised); } .app-nav { display: flex; flex-direction: column; gap: 0.1rem; } .app-nav-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.9rem; } .app-nav-item svg { width: 16px; height: 16px; flex: none; } .app-nav-item:hover { background: var(--hover-bg); color: var(--text); text-decoration: none; } .app-nav-item.active { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); font-weight: 600; } .app-nav-sep { border-top: 1px solid var(--border); margin: 0.45rem 0.5rem; } /* サイドバー下部のクレジット残量ゲージ（オーナー非クライアントのみ） */ .app-nav-gauge { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.76rem; } .app-nav-gauge:hover { background: var(--hover-bg); text-decoration: none; color: var(--text); } .app-nav-gauge-label strong { color: var(--text); font-variant-numeric: tabular-nums; } .app-nav-gauge-track { display: block; height: 5px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); } .app-nav-gauge-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .app-nav-gauge-fill.is-high { background: var(--warning); } .app-nav-gauge-fill.is-full { background: var(--danger); } .app-shell-content { min-width: 0; width: 100%; max-width: 1120px; padding: 2rem 1.5rem 3rem; margin: 0 auto; } /* 狭幅: サイドバーを横並びナビに畳む（ゲージは非表示） */ @media (max-width: 880px) { .app-shell { grid-template-columns: 1fr; min-height: 0; } .app-sidebar { position: static; flex-direction: row; align-items: center; padding: 0.4rem 0.75rem; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; } .app-nav { flex-direction: row; gap: 0.15rem; } .app-nav-item { white-space: nowrap; padding: 0.4rem 0.65rem; } .app-nav-sep { border-top: none; border-left: 1px solid var(--border); margin: 0.3rem 0.35rem; } .app-nav-gauge { display: none; } } /* 設定ページ: アカウント情報テーブルの行見出し */ .settings-section { margin-top: 0.5rem; } .settings-section h2 { font-size: var(--text-lg); margin-bottom: 0.8rem; } .settings-account-table { max-width: 640px; } .settings-account-table th { width: 11em; text-transform: none; letter-spacing: 0; font-size: 0.82rem; } /* 設定ページ: API・外部連携（MCP） */ .settings-h2 { display: flex; align-items: center; gap: 0.5rem; } .settings-h2 .badge { flex: none; font-weight: 400; } .settings-subhead { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 1.6rem 0 0.6rem; } .settings-subhead h3 { font-size: 0.95rem; } .settings-subhead .btn { display: inline-flex; align-items: center; gap: 0.4rem; } .settings-subhead .btn svg { width: 14px; height: 14px; flex: none; } /* 接続URL＋コピー */ .mcp-endpoint-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.8rem; } .mcp-endpoint-label { font-size: var(--text-sm); font-weight: 600; } .mcp-endpoint { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.2rem 0.5rem; font-family: var(--font-mono); font-size: 0.82rem; user-select: all; word-break: break-all; } .copy-btn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; } .copy-btn svg { width: 13px; height: 13px; flex: none; } .copy-btn.is-copied, .copy-btn.is-copied:hover { color: var(--live); border-color: var(--live); filter: none; } .token-reveal .copy-btn.is-copied { background: var(--live); color: var(--accent-text); } /* 発行直後のトークン表示（1回限り） */ .token-reveal { background: var(--bg-raised); border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1rem; } .token-reveal-title { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9rem; } .token-reveal-title svg { width: 15px; height: 15px; flex: none; color: var(--live); } .token-reveal-note { font-size: var(--text-sm); color: var(--text-dim); margin: 0.15rem 0 0.55rem; } .token-reveal-row { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; } .token-reveal-value { flex: 1 1 320px; padding: 0.5rem 0.65rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.78rem; word-break: break-all; user-select: all; } /* トークン一覧の権限チップ */ .token-scope-cell { max-width: 26em; } .scope-chip { display: inline-block; font-size: var(--text-xs); line-height: 1.5; color: var(--text-dim); background: var(--bg-input); border: 1px solid var(--border); border-radius: 999px; padding: 0.06rem 0.5rem; margin: 0.12rem 0.25rem 0.12rem 0; white-space: nowrap; } /* 発行モーダル: スコープ選択リスト。「すべて選択」はラベルと同じ行の右端に置く */ .token-scopes { width: 100%; } .token-scopes-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.45rem; } .token-scopes-toggle { flex: none; padding: 0.22rem 0.7rem; font-size: 0.78rem; line-height: 1.3; } .token-scope-list { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-raised); } .token-scope-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.75rem; cursor: pointer; } .token-scope-item + .token-scope-item { border-top: 1px solid var(--border); } .token-scope-item:hover { background: var(--hover-bg); } .token-scope-item:has(input:checked) { background: rgba(var(--accent-rgb), 0.08); } .token-scope-item input[type='checkbox'] { accent-color: var(--accent); margin-top: 0.25rem; flex: none; } .token-scope-name { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.85rem; font-weight: 600; line-height: 1.5; } .token-scope-id { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; color: var(--text-dim); background: var(--code-bg); padding: 0.02rem 0.35rem; border-radius: 4px; } .token-scope-desc { display: block; font-size: 0.78rem; color: var(--text-dim); line-height: 1.6; } .token-scopes-error { margin: 0.45rem 0 0; } .table-actions form { display: inline; } /* ── Page styles: 投稿管理（Bladeから移設） ── */ details.posts-feed-note summary { cursor: pointer; list-style: none; } details.posts-feed-note summary::-webkit-details-marker { display: none; } details.posts-feed-note summary::before { content: '▸ '; } details.posts-feed-note[open] summary::before { content: '▾ '; } details.posts-feed-note p { margin: 0.5rem 0 0; } /* フラッシュ内のエラー一覧（投稿管理・投稿エディタで共用） */ .flash-list { margin: 0; padding-left: 1.2rem; } .flash-list li + li { margin-top: 0.2rem; } .cat-manage-icon { vertical-align: -2px; margin-right: 0.15rem; } .posts-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.6rem; } .posts-filter-search { flex: 1 1 12rem; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; color: var(--text); font: inherit; } .posts-filter-search:focus { outline: none; border-color: var(--accent); } .posts-filter-status { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; color: var(--text); font: inherit; } .posts-filter-status:focus { outline: none; border-color: var(--accent); } .posts-filter-note { margin: 0 0 0.6rem; font-size: 0.85rem; } /* ── Page styles: フォーム受信箱（Bladeから移設） ── */ .sub-row { flex-direction: column; align-items: stretch; gap: 0; } .sub-summary { display: flex; align-items: center; gap: 0.55rem; width: 100%; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; } .sub-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .sub-caret { flex: none; transition: transform 0.15s; color: var(--text-dim); } .sub-row.is-open .sub-caret { transform: rotate(90deg); } .sub-summary-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 auto; } .sub-summary-meta { display: flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; color: var(--text-dim); flex-wrap: wrap; } .sub-summary-from { font-size: 0.95rem; font-weight: 500; } .sub-summary-from.is-none { color: var(--text-dim); font-weight: 400; } .sub-preview { font-size: 0.83rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-unread { border-color: var(--accent); color: var(--accent); } .sub-detail { margin-top: 0.7rem; border-top: 1px solid var(--border); padding-top: 0.7rem; } .sub-detail-actions { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.6rem; } table.sub-fields { width: 100%; border-collapse: collapse; font-size: 0.88rem; } table.sub-fields th, table.sub-fields td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); } table.sub-fields th { width: 30%; color: var(--text-dim); font-weight: 500; white-space: nowrap; } table.sub-fields td { white-space: pre-wrap; word-break: break-word; } .sub-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0 0.8rem; } .sub-toolbar .spacer { flex: 1 1 auto; } /* ── Page styles: アクセス解析（Bladeから移設） ── */ /* サマリーカード */ .stats-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin: 0.8rem 0 1.4rem; } .stats-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; background: var(--bg-raised); } .stats-card-label { font-size: 0.8rem; color: var(--text-dim); } .stats-card-value { font-size: 1.6rem; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; } .stats-card-unit { font-size: 0.85rem; font-weight: 400; color: var(--text-dim); margin-left: 0.15rem; } @media (max-width: 560px) { .stats-cards { grid-template-columns: 1fr; } } /* 日別PVの縦棒グラフ（純CSS） */ .stats-section { margin: 0 0 1.8rem; } .stats-section h2 { margin: 0 0 0.7rem; font-size: 1.05rem; } .stats-chart { display: flex; align-items: flex-end; gap: 2px; height: 180px; padding: 0 0.2rem; border-bottom: 1px solid var(--border); } .stats-chart-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; height: 100%; } .stats-bar { width: 100%; max-width: 34px; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; transition: opacity 0.15s; } .stats-bar.is-zero { background: var(--border); } .stats-chart-col:hover .stats-bar { opacity: 0.8; } .stats-xaxis { display: flex; gap: 2px; padding: 0.3rem 0.2rem 0; } .stats-xaxis-cell { flex: 1 1 0; text-align: center; font-size: 0.68rem; color: var(--text-dim); min-width: 0; overflow: hidden; } /* ランキング（ページ別・参照元） */ .stats-rank { list-style: none; margin: 0; padding: 0; } .stats-rank-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .stats-rank-main { min-width: 0; flex: 1 1 auto; } .stats-rank-label { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stats-rank-bar-track { height: 5px; margin-top: 0.3rem; border-radius: 999px; background: var(--bg-input); overflow: hidden; } .stats-rank-bar { height: 100%; border-radius: 999px; background: var(--accent); } .stats-rank-value { flex: none; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--text-dim); min-width: 3.5rem; text-align: right; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } @media (max-width: 720px) { .stats-grid { grid-template-columns: 1fr; } } .stats-note { font-size: 0.82rem; color: var(--text-dim); margin: 0.5rem 0 0; } .stats-empty { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; text-align: center; background: var(--bg-raised); } .stats-empty p { margin: 0 0 0.6rem; } .stats-empty p:last-child { margin-bottom: 0; } /* ── Page styles: 投稿エディタ（Bladeから移設） ── */ /* UX-307: AIアシストの利用案内。普段は控えめ、残りわずか／使い切りだけ少し目立たせる */ .ai-assist-credit { margin: .4rem 0 0; font-size: .8rem; } .ai-assist-credit[data-state="low"] { color: var(--accent); } .ai-assist-credit[data-state="exhausted"] { color: var(--danger-text); } /* UX-308: リンク挿入の小さなインラインポップオーバー */ .pe-link-pop { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .4rem 0 0; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-input); } .pe-link-pop input[type="url"] { flex: 1 1 12rem; min-width: 8rem; } .pe-link-pop .pe-link-msg { flex-basis: 100%; margin: 0; font-size: .8rem; color: var(--danger-text); } /* UX-322: 画面内トースト（OS alert の置き換え） */ .pe-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); max-width: min(90vw, 420px); padding: .7rem 1rem; border-radius: var(--radius); background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); font-size: .88rem; line-height: 1.5; box-shadow: 0 6px 24px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s ease, transform .2s ease; z-index: 9999; pointer-events: none; } .pe-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } /* 見出し横のステータスバッジ */ .posts-head h1 .badge { font-weight: 400; vertical-align: 0.2em; margin-left: 0.3rem; white-space: nowrap; } /* 自動保存ドラフトの復元バー */ .pe-draft-bar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .55rem .8rem; border: 1px solid var(--accent); border-radius: var(--radius); background: rgba(var(--accent-rgb), .08); font-size: .84rem; } .pe-draft-bar[hidden] { display: none; } .pe-draft-bar-actions { display: flex; gap: .4rem; flex-shrink: 0; } /* 保存直後の案内（プレビューリンク付き）。.flash-list は投稿管理セクションで定義済み */ .posts-flash-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; } /* フィールド直下エラーはラベル内に置くため余白を取り直す */ .posts-page .field-error { display: block; margin: .35rem 0 0; } /* タイトル・本文の文字数カウンター */ .posts-title-count { display: block; margin-top: .3rem; font-size: .78rem; text-align: right; } .posts-body-count { display: block; margin-top: .3rem; font-size: .78rem; text-align: right; } /* 送信中スピナー（ボタン内） */ .posts-actions .btn .spinner { display: inline-block; vertical-align: -2px; margin-right: .35rem; } /* ── Page styles: ホーム・取り込みモーダル（Bladeから移設） ── */ /* 取り込みの進捗表示（アップロード→解析） */ .import-loading-body { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .import-progress { width: 160px; max-width: 40vw; height: 6px; border-radius: 999px; background: var(--bg-input); overflow: hidden; } .import-progress-bar { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 0.15s ease; } /* 取り込み方法の選択カード（WordPress / HTML） */ .import-choice-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0 0.25rem; } .import-choice { display: flex; align-items: flex-start; gap: 0.9rem; width: 100%; text-align: left; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .import-choice:hover, .import-choice:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-raised)); box-shadow: 0 1px 6px color-mix(in srgb, var(--accent) 18%, transparent); } .import-choice-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .import-choice-icon svg { width: 18px; height: 18px; } .import-choice-body { display: block; min-width: 0; } .import-choice strong { display: block; margin-bottom: 0.2rem; } .import-choice .muted { font-size: 0.85rem; line-height: 1.6; } /* WordPress取り込みのエクスポート手順 */ .wp-import-steps { margin: 0.75rem 0; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.9; } /* プレビュー破棄の中止確認（モーダル内に重ねる） */ .import-confirm { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, 0.5); } .import-confirm-box { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; width: min(340px, 100%); display: flex; flex-direction: column; gap: 1rem; } .import-confirm-msg { margin: 0; font-size: 0.9rem; line-height: 1.6; } /* 確認を重ねられるよう、ダイアログを位置基準にする */ .import-dialog { position: relative; } /* ── Page styles: 代理店共通・初期パスワード欄（Bladeから移設） ── */ .pw-field { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .pw-field input { flex: 1; min-width: 140px; } .pw-copied { font-size: 0.8rem; color: var(--accent); } /* ── Page styles: クライアント管理・一覧（Bladeから移設） ── */ /* 検索中の注記は運営管理（前方定義の .admin-search-note）と値が異なるため、 :where() で詳細度を上げずに代理店画面だけ上書きする */ :where(.agency-console) .admin-search-note { margin: -0.5rem 0 1rem; font-size: 0.82rem; } .client-count { margin-top: 1rem; font-size: 0.82rem; } /* ── Page styles: クライアント管理・詳細（Bladeから移設） ── */ /* サイト作成フォーム：LPの目的セレクトなどを並べるため、末端で折り返す。 ダッシュボードの .create-site に影響しないよう :where() で代理店画面に限定 */ :where(.agency-console) .create-site { flex-wrap: wrap; align-items: flex-end; } /* セクション見出し（ウェブサイト / ランディングページ）：右側に作成ボタンを配置 */ .client-sites-head { font-size: 1.1rem; margin: 0 0 0.9rem; } .client-lp-head { margin-top: 2.75rem; } .client-sites-headrow { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.9rem; } .client-sites-headrow .client-sites-head { margin: 0; } /* 見出し脇の作成ボタンは控えめなサイズにする（create-modal のトリガー） */ .client-sites-headrow > .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.7rem; font-size: 0.78rem; } .client-sites-headrow > .btn svg { width: 12px; height: 12px; flex: none; } .client-lp-headrow { margin-top: 2.75rem; } /* サイト作成モーダル内の「既存サイトを取り込む」への分岐（押すと方式カードをインライン展開） */ .create-modal-alt { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--border); } .create-modal-alt-row { display: flex; align-items: center; gap: 0.75rem; } .create-modal-alt .btn { display: inline-flex; align-items: center; gap: 0.4rem; } .create-modal-alt .btn svg { width: 14px; height: 14px; flex: none; } .import-inline-chevron { transition: transform 0.15s ease; } #import-choice-open[aria-expanded="true"] .import-inline-chevron { transform: rotate(180deg); } .import-choice-inline { margin-top: 1rem; } .import-choice-inline-lead { font-size: 0.85rem; margin: 0 0 0.6rem; } .import-choice-inline .import-choice-list { margin: 0; } /* ── Page styles: サイト構成提案（Bladeから移設） ── */ .proposal-section { margin: 1.6rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); } .proposal-section h2 { font-size: 1rem; margin: 0 0 0.8rem; display: flex; align-items: center; gap: 0.3rem; } .proposal-danger { border-style: dashed; } /* 案件情報＋事前情報の統合フォーム：フィールドは縦1列で幅を揃え、ボタンは右下にまとめる */ .proposal-info-grid { grid-template-columns: minmax(0, 480px); } .proposal-info-footer { width: 100%; max-width: 480px; justify-content: flex-end; } .sheet-steps { margin: 0 0 1rem; padding-left: 1.4rem; display: grid; gap: 0.6rem; } .sheet-step-label { display: inline-block; margin-right: 0.6rem; } /* ビルダー側にも .sheet-drop（前方定義）があるため、:where() で詳細度を 上げずに提案画面だけ上書きする（:hover は前方定義のまま効かせる） */ :where(.proposal-page) .sheet-drop { margin-top: 0.4rem; padding: 0.9rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } :where(.proposal-page) .sheet-drop.dragover { border-color: var(--accent); } .hearing-answers { margin-top: 0.6rem; } .hearing-answers summary { cursor: pointer; } .hearing-q { width: 40%; color: var(--muted); } .generate-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; } .sitemap-editor { display: grid; gap: 0.45rem; } .sitemap-editor .map-row { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; } .sitemap-editor .map-row.child { margin-left: 1.8rem; } .sitemap-editor .map-path { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); padding-top: 0.55rem; min-width: 8rem; } .sitemap-editor .map-fields { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 0.7fr) minmax(12rem, 2fr) auto; gap: 0.4rem; align-items: start; } .sitemap-editor .map-fields input, .sitemap-editor .map-fields textarea { width: 100%; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; } .sitemap-editor .map-fields input:focus, .sitemap-editor .map-fields textarea:focus { outline: none; border-color: var(--accent); } .sitemap-editor .map-fields textarea { min-height: 2.2rem; resize: vertical; } .sitemap-editor .map-actions { display: flex; gap: 0.2rem; white-space: nowrap; } .sitemap-editor .map-actions .icon-btn { font-size: 0.78rem; padding: 0.3rem 0.45rem; } .sitemap-add-row { margin-top: 0.6rem; display: flex; gap: 0.5rem; } .sitemap-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .share-active, .share-issue-row { display: grid; gap: 0.5rem; } .share-url-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .share-url-row input { flex: 1; min-width: 220px; } .share-issue-row { display: flex; align-items: end; gap: 0.6rem; flex-wrap: wrap; } .inline-label { display: grid; gap: 0.25rem; font-size: 0.85rem; } /* .pw-copied は代理店共通セクションで定義済み */ /* 読み取り専用ツリー（合意済み表示。公開ページと同じクラス名） */ .sitemap-tree { list-style: none; margin: 0.8rem 0 0; padding: 0; } .sitemap-tree ul { list-style: none; margin: 0.35rem 0 0.35rem 1.1rem; padding-left: 1rem; border-left: 2px solid var(--border); } .sitemap-tree li { margin: 0.35rem 0; } .sitemap-node .sitemap-path { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); margin-right: 0.5rem; } .sitemap-node .sitemap-title { font-weight: 600; } .sitemap-desc { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--muted); } /* ── Page styles: 見積書（一覧・編集） ── */ .estimate-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .estimate-pages { margin-top: 0.8rem; } .estimate-pages summary { cursor: pointer; display: flex; align-items: baseline; gap: 0.5rem; } .estimate-pages ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.88rem; columns: 2; column-gap: 2rem; } .estimate-pages li { break-inside: avoid; padding: 0.1rem 0; } .estimate-base-note, .estimate-notes { grid-column: 1 / -1; } .estimate-notes textarea { width: 100%; min-height: 4.5rem; resize: vertical; } /* デフォルトの設定内の小見出し（料金 / 自社情報 / 印鑑） */ .estimate-settings-head { margin: 1rem 0 0.5rem; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.3rem; } .admin-create-form .estimate-settings-head:first-child { margin-top: 0; } /* 印鑑の選択・プレビュー（デフォルトの設定フォーム内） */ .estimate-seal-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; } .estimate-seal-preview { width: 56px; height: 56px; object-fit: contain; flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 4px; } /* 追加項目の行: 項目名 / 数量 / 単価 / 金額 / 削除 */ .estimate-items-head, .estimate-item-row { display: grid; grid-template-columns: minmax(12rem, 1fr) 4.5rem 8rem 7rem auto; gap: 0.4rem; align-items: center; } .estimate-items-head { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.35rem; } #estimate-items { display: grid; gap: 0.45rem; } .estimate-item-row input { width: 100%; background: var(--bg-input); color: var(--text); border: 1px solid var(--input-border, var(--border)); border-radius: 6px; font: inherit; font-size: 0.85rem; padding: 0.35rem 0.5rem; } .estimate-item-row input:focus { outline: none; border-color: var(--accent); } .estimate-item-row input[data-field="qty"], .estimate-item-row input[data-field="unit_price"] { text-align: right; } .estimate-item-amount { font-size: 0.85rem; text-align: right; white-space: nowrap; } .estimate-items-empty { margin: 0.2rem 0 0; } /* 金額サマリ（ライブ計算） */ .estimate-summary { margin: 1.2rem 0 0.4rem; padding: 0.9rem 1rem; max-width: 26rem; margin-left: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); display: grid; gap: 0.3rem; } .estimate-summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; } .estimate-summary dt { font-size: 0.85rem; color: var(--text-dim); } .estimate-summary dt .muted { font-size: 0.78rem; margin-left: 0.3rem; } .estimate-summary dd { margin: 0; font-variant-numeric: tabular-nums; } .estimate-summary .estimate-summary-sub { border-top: 1px solid var(--border); padding-top: 0.4rem; margin-top: 0.2rem; } .estimate-summary .estimate-summary-total { border-top: 2px solid var(--text); padding-top: 0.45rem; margin-top: 0.2rem; } .estimate-summary .estimate-summary-total dt { color: var(--text); font-weight: 600; } .estimate-summary .estimate-summary-total dd { font-weight: 700; font-size: 1.05rem; } @media (max-width: 720px) { .estimate-items-head { display: none; } .estimate-item-row { grid-template-columns: 1fr 1fr; } .estimate-item-row input[data-field="name"] { grid-column: 1 / -1; } .estimate-pages ul { columns: 1; } } /* ── Page styles: パスワード再設定（Bladeのインラインstyleから移設） ── */ .auth-card > .muted { margin-bottom: 1rem; } /* ── 共通部品: ページ内タブ（tabs.js と対）。選択中タブに下線が付くタブ切り替え型 ── */ .page-tabs-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: stretch; margin: 0.2rem 0 1.4rem; border-bottom: 1px solid var(--border); } .page-tab { display: inline-flex; align-items: center; gap: 0.35rem; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.5rem 0.15rem; margin-bottom: -1px; font-size: var(--text-sm); color: var(--text-dim); background: none; cursor: pointer; font-family: inherit; } .page-tab:hover { color: var(--text); } .page-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .page-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ── Page styles: 提案詳細・進行ステッパー ── */ .proposal-steps { margin: 0.2rem 0 1.4rem; } .proposal-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.3rem; } .proposal-step { display: flex; align-items: center; } /* ステップ間の接続線 */ .proposal-step + .proposal-step::before { content: ''; width: 1.4rem; height: 1px; background: var(--border); margin: 0 0.3rem; flex: none; } .proposal-step a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.35rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-dim); text-decoration: none; } .proposal-step a:hover { color: var(--text); background: var(--hover-bg); } /* 表示中のステップ（進行状態 .is-current / .is-done とは独立） */ .proposal-step.is-active a { background: var(--bg-input); border-color: var(--accent); color: var(--text); } .proposal-step-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none; border: 2px solid var(--border); color: var(--accent-text); } .proposal-step.is-done .proposal-step-dot { background: var(--accent); border-color: var(--accent); } .proposal-step.is-current .proposal-step-dot { border-color: var(--accent); } .proposal-step.is-current a { color: var(--text); font-weight: 600; } .proposal-steps-next { margin: 0.45rem 0 0; font-size: var(--text-sm); } /* ステップの前後移動（各ステップの末尾。次へ = 主ボタンで迷わせない） */ .proposal-step-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin: 1.4rem 0 0.2rem; } .proposal-step-nav #step-next { margin-left: auto; } /* ===================================================================== BUILDER TOPBAR — 2メニュー（コンテンツ/設定）とサイト切替 ===================================================================== */ /* ドロップダウン内のグループ見出しと区切り線 */ .menu-head { padding: 0.35rem 0.65rem 0.1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; } .menu-sep { border-top: 1px solid var(--border); margin: 0.3rem 0.2rem; } .menu-item-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* サイト切替（トップバーのサイト名がドロップダウンを兼ねる） */ .site-switcher { display: inline-flex; min-width: 0; } .site-switch-btn { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; background: none; border: none; padding: 0.25rem 0.35rem; margin: -0.25rem 0; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--text); } .site-switch-btn:hover { background: var(--hover-bg); } .site-switch-btn svg { flex: none; color: var(--text-dim); } .site-switch-btn .site-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site-switch-menu { left: 0; right: auto; max-height: min(420px, 60vh); overflow-y: auto; min-width: 240px; } .site-switch-menu .menu-item-current { background: rgba(var(--accent-rgb), 0.1); font-weight: 600; } .site-switch-menu .badge { flex: none; } /* ===================================================================== CONTENT PANEL — テキストが載るコンテンツ面は白いパネルにする （ページ背景 = 寒色グレー、コンテンツ = 白。ダークでは raised 面） ===================================================================== */ .dashboard { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 2rem 2.25rem; box-shadow: var(--shadow-1); } /* パネル内の白い部品は境界だけで区切る（白 on 白の面は透明に寄せる） */ .dashboard .team-section, .dashboard .billing-section { background: transparent; } /* 金額タイルはパネル上で薄グレー地（選択状態のアクセント枠は従来どおり） */ .dashboard .credit-option { background: var(--bg); } @media (max-width: 640px) { .dashboard { padding: 1.1rem 1rem 1.5rem; border-radius: var(--radius); } } /* 運営管理も同じ白パネル処理（コンテンツ面 = 白、ページ背景 = グレー） */ .admin { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: 1.75rem 2rem 2.25rem; } /* 概要の統計タイルはパネル上で薄グレー地（.dash-stat と同じ扱い） */ .admin .stat-card { background: var(--bg); } @media (max-width: 640px) { .admin { padding: 1.1rem 1rem 1.5rem; border-radius: var(--radius); } } /* ============================================================ バナー管理（/sites/{site}/banners）— 一覧・エディタ 公開サイト側の表示は public/js/banner.js が自前でスタイルを注入する。 ============================================================ */ .banners-intro { margin: -0.4rem 0 1.2rem; max-width: 46rem; } .banners-row-main { display: flex; align-items: center; gap: 0.8rem; } .banner-thumb { flex: none; width: 72px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); } .banner-thumb-empty { display: grid; place-items: center; background: var(--bg-input); color: var(--text-dim); } .banners-preview-note { margin-top: 1rem; } /* エディタ: 入力1カラム。表示イメージはページ右下/左下の実際の位置に固定表示 */ .banner-editor-grid { display: flex; gap: 2rem; flex-wrap: wrap; } .banner-editor-fields { flex: 1 1 22rem; min-width: 0; max-width: 42rem; } /* バナーサイズ（幅×高さ px）。AI生成・公開表示・プレビューの実寸 */ .banner-size-row { display: flex; align-items: flex-end; gap: 0.6rem; } .banner-size-x { color: var(--text-dim); padding-bottom: 0.45rem; } .banner-size-input { display: inline-flex; align-items: center; gap: 0.4rem; } .banner-size-input input[type='number'] { width: 5.5rem; } .banner-size-unit { color: var(--text-dim); } .banner-settings-row label { min-width: 11rem; } .banner-active-check { margin: 0 0 1.1rem; } /* 画像の入手方法（アップロード / AI生成）を1つの枠にまとめる */ .banner-image-source { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; margin-top: 0.35rem; } .banner-image-source-label { display: block; font-weight: 600; margin-bottom: 0.2rem; } .banner-ai { margin-top: 0.7rem; } .banner-ai-title { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; margin-bottom: 0.5rem; } .banner-ai-field { display: block; margin-bottom: 0.7rem; } .banner-ai-field input[type='text'], .banner-ai-field textarea { width: 100%; margin-top: 0.3rem; } .banner-ai-fix { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--border); } .banner-ai-status { margin: 0.5rem 0 0; } /* スマホでの表示（3択ラジオ + 「スマホ用の画像を表示」時の設定ブロック） */ .banner-mobile-choices { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.35rem; } .banner-mobile-choice { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; } .banner-mobile-choice input { margin: 0; flex: none; } .banner-mobile-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8rem 0.9rem 0.2rem; margin-top: 0.6rem; } .banner-mobile-image-field { margin-top: 0.9rem; } /* 表示イメージ: 実際の表示と同じく、ページ全体の右下/左下に実寸で固定表示する （位置・オフセット・影は public/js/banner.js の実表示と揃える）。 スマホ用の画像を設定するときはカード上のタブでPC/スマホを切り替える */ .banner-preview-dock { position: fixed; bottom: 16px; z-index: 500; /* モーダル(900)より下・ページ内容より上 */ display: flex; flex-direction: column; gap: 8px; } .banner-preview-dock[data-position="bottom-right"] { right: 16px; align-items: flex-end; } .banner-preview-dock[data-position="bottom-left"] { left: 16px; align-items: flex-start; } .banner-preview-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-input); overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .banner-preview-toggle button { border: none; background: transparent; padding: 0.25rem 0.75rem; font-size: var(--text-sm); color: var(--text-dim); cursor: pointer; } .banner-preview-toggle button.is-active { background: var(--accent); color: var(--accent-text); } .banner-preview-card { position: relative; /* 実寸プレビュー: 幅・高さ・角丸はエディタJSが入力値で上書きする */ width: 320px; height: 200px; max-width: calc(100vw - 32px); background: #ffffff; border-radius: 0; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18); overflow: hidden; line-height: 0; } .banner-preview-card img { display: block; width: 100%; height: 100%; object-fit: cover; } .banner-preview-empty { display: grid; place-items: center; height: 100%; padding: 1rem; text-align: center; color: var(--text-dim); font-size: 0.8rem; line-height: 1.5; background: var(--bg-input); border: 1px dashed var(--border); border-radius: inherit; } .banner-preview-note { margin-top: 0.6rem; } /* ── 修正依頼の管理（クライアントのマーキング指示） ───────────────── */ .rvm-page { max-width: 1100px; } .rvm-issue { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .rvm-note { font-size: var(--text-sm); margin: 0 0 1.2rem; } .rvm-round { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.1rem; background: var(--bg-raised); overflow: hidden; } /* 見出し行はボタン（クリックで展開/折りたたみ） */ .rvm-round-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; width: 100%; text-align: left; border: none; background: none; padding: 0.85rem 1.1rem; cursor: pointer; color: var(--text); font: inherit; } .rvm-round-head:hover { background: var(--hover-bg); } .rvm-round-head h2 { font-size: var(--text-md); margin: 0; } .rvm-caret { flex-shrink: 0; color: var(--text-dim); transition: transform 0.15s ease; } .rvm-round-head[aria-expanded='true'] .rvm-caret { transform: rotate(90deg); } .rvm-round-meta { font-size: var(--text-xs); } .rvm-round-count { margin-left: auto; font-size: var(--text-sm); white-space: nowrap; } .rvm-round-body { padding: 0 1.1rem 1rem; border-top: 1px solid var(--border); } .rvm-url { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.8rem 0 0.6rem; } .rvm-url input { flex: 1; min-width: 220px; font-size: var(--text-sm); } .rvm-waiting { font-size: var(--text-sm); margin: 0.6rem 0 0; } /* 表示切り替え（一覧/ビジュアル） */ .rvm-viewbar { display: flex; gap: 0.6rem; align-items: center; margin: 0.8rem 0 0.6rem; } .rvm-seg { display: inline-flex; border: 1px solid var(--input-border); border-radius: var(--radius-sm); overflow: hidden; } .rvm-seg button { border: none; background: var(--bg-raised); color: var(--text-dim); font-size: var(--text-sm); padding: 0.35rem 0.8rem; cursor: pointer; } .rvm-seg button + button { border-left: 1px solid var(--border); } .rvm-seg button.active { background: var(--accent); color: var(--accent-text); } .rvm-seg-icons button { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.6rem; } .rvm-expand-btn { display: inline-flex; align-items: center; justify-content: center; } .rvm-expand-btn .rvm-expand-in, .rvm-expand-btn .rvm-expand-out { display: inline-flex; align-items: center; gap: 0.3rem; } .rvm-expand-btn [hidden] { display: none; } .rvm-extend { display: inline-flex; gap: 0.35rem; align-items: center; } .rvm-expired { border-color: var(--danger); color: var(--danger-text); } .rvm-bulk { display: flex; gap: 0.6rem; align-items: center; margin: 0.4rem 0 0.6rem; flex-wrap: wrap; } .rvm-check-all { font-size: var(--text-sm); color: var(--text-dim); display: inline-flex; gap: 0.35rem; align-items: center; } .rvm-table-wrap { overflow-x: auto; } .rvm-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .rvm-table th, .rvm-table td { text-align: left; padding: 0.5rem; border-top: 1px solid var(--border); vertical-align: top; } .rvm-table thead th { border-top: none; font-size: var(--text-xs); color: var(--text-dim); font-weight: 600; } .rvm-no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: var(--text-xs); font-weight: 700; flex-shrink: 0; } .rvm-place code { font-size: var(--text-xs); cursor: help; } .rvm-comment { white-space: pre-wrap; word-break: break-word; min-width: 12rem; } .rvm-col-actions { white-space: nowrap; } .rvm-col-actions .btn { margin: 0 0.15rem 0.25rem 0; } [data-rvm-status-select] { font-size: var(--text-xs); padding: 0.25rem 0.4rem; } .rvm-progress { display: block; font-size: var(--text-xs); margin-top: 0.2rem; max-width: 14rem; white-space: normal; } .rvm-round-foot { display: flex; gap: 0.6rem; margin-top: 0.8rem; align-items: center; flex-wrap: wrap; } .rvm-empty-state { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); } /* AIで解決できるのは未対応の項目のみ */ .rvm-table tr:not([data-status='pending']) [data-rvm-ai], .rvm-task:not([data-status='pending']) [data-rvm-ai] { display: none; } /* ビジュアル表示: プレビュー＋タスクカード */ .rvm-visual { display: flex; gap: 0.8rem; align-items: stretch; } .rvm-visual-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; } .rvm-visual-tools { display: flex; gap: 0.6rem; align-items: center; min-height: 1.8rem; } .rvm-visual-note { font-size: var(--text-xs); } .rvm-visual-main iframe { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #ffffff; } .rvm-tasks { width: 320px; flex-shrink: 0; overflow-y: auto; max-height: calc(70vh + 2.2rem); display: grid; gap: 0.55rem; align-content: start; } .rvm-task { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; font-size: var(--text-sm); cursor: pointer; background: var(--bg-raised); } .rvm-task:hover { border-color: var(--accent); } .rvm-task-flash { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35); } .rvm-task[data-status='done'] { opacity: 0.7; } .rvm-task-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; } .rvm-task-head code { font-size: var(--text-xs); } .rvm-task-head select { margin-left: auto; } .rvm-task-comment { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.55; } .rvm-task-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; } @media (max-width: 900px) { .rvm-visual { flex-direction: column; } .rvm-tasks { width: auto; max-height: 40vh; } .rvm-visual-main iframe { height: 55vh; } } /* 箇所（クリックで位置の詳細ポップアップ） */ .rvm-place-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: none; background: none; padding: 0; cursor: pointer; color: var(--text); font: inherit; } .rvm-place-btn:hover code { text-decoration: underline; color: var(--accent); } .rvm-vw { display: inline-block; padding: 0 0.4rem; border: 1px solid var(--input-border); border-radius: 999px; font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; } .rvm-place-modal { width: min(480px, 94vw); } .rvm-place-rows { margin: 0.4rem 0 0; } .rvm-place-rows dt { font-size: var(--text-xs); color: var(--text-dim); margin-top: 0.6rem; } .rvm-place-rows dd { margin: 0.1rem 0 0; font-size: var(--text-sm); word-break: break-word; } /* 進捗欄の文中ボタン（中止・元に戻す） */ .rvm-link { border: none; background: none; padding: 0; margin-left: 0.4rem; font-size: var(--text-xs); color: var(--accent); text-decoration: underline; cursor: pointer; } /* 待機・処理中の項目はAIボタンを隠す（連打による重複投入を防ぐ） */ [data-queued] [data-rvm-ai] { display: none; } /* 拡大表示（プレビューを画面いっぱいに） */ .rvm-view-visual.rvm-visual-max { position: fixed; inset: 0; z-index: 45; background: var(--bg); padding: 0.8rem 1rem; overflow: auto; } .rvm-visual-max .rvm-visual-main iframe { height: calc(100vh - 5rem); } .rvm-visual-max .rvm-tasks { max-height: calc(100vh - 5rem); } body.rvm-noscroll { overflow: hidden; } /* 幅切替時はプレビューを中央寄せ */ .rvm-visual-main iframe { display: block; margin: 0 auto; max-width: 100%; } /* 画像差し替えモーダル */ .rvm-img-modal { width: min(440px, 94vw); } .rvm-img-modal .rvm-img-preview { display: block; max-width: 100%; max-height: 200px; margin: 0.6rem auto; border: 1px solid var(--border); border-radius: var(--radius-sm); object-fit: contain; } .rvm-img-modal p { font-size: var(--text-sm); margin: 0.4rem 0; } .rvm-img-modal input[type='file'] { width: 100%; font-size: var(--text-sm); margin: 0.4rem 0 0.6rem; } /* ── Page styles: 素材の受け取り（クライアントからの画像アップロード） ── */ .mtl-page { max-width: 1100px; } .mtl-issue { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .mtl-note { font-size: var(--text-sm); margin: 0 0 1.2rem; } .mtl-url { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.2rem; } .mtl-url input { flex: 1; min-width: 220px; font-size: var(--text-sm); } .mtl-extend { display: inline-flex; gap: 0.35rem; align-items: center; } .mtl-expired { border-color: var(--danger); color: var(--danger-text); } .mtl-count { font-size: var(--text-sm); margin: 0 0 0.6rem; } .mtl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.8rem; } .mtl-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; display: flex; flex-direction: column; } .mtl-thumb { display: block; aspect-ratio: 4 / 3; background: var(--bg-input); } .mtl-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .mtl-card-body { padding: 0.6rem 0.7rem 0.7rem; display: grid; gap: 0.3rem; align-content: start; flex: 1; } .mtl-name-row { display: flex; gap: 0.4rem; align-items: flex-start; } .mtl-name-row .icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; } .mtl-name { margin: 0; font-size: var(--text-sm); font-weight: 600; word-break: break-all; flex: 1; } .mtl-rename-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .mtl-rename-form input { flex: 1; min-width: 120px; font-size: var(--text-sm); } .mtl-memo { margin: 0; font-size: var(--text-sm); white-space: pre-wrap; word-break: break-word; } .mtl-meta { margin: 0; font-size: var(--text-xs); } .mtl-adopted { margin: 0; font-size: var(--text-xs); display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .mtl-adopted code { font-size: var(--text-xs); word-break: break-all; } .mtl-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: 0.3rem; } .mtl-empty-state { text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); }