/* v4 editor（44号）専用スタイル。index.htmlのCSS変数・様式と視覚的に一貫させる
（41号recovery.cssと同じ方針でトークン値をコピーする。index.html自体は
無改修・読取利用のみ）。絵文字は一切使わない。
案件20260822-01「UIデザイン改修」でトークン層を新設した（2b章）。既存13変数は
名前・値とも削除しない（後方互換）。新トークンはコンポーネントCSSと分離して
下の設定ブロックに集約する（2-5「再利用可否」: 本ツール固有の文言・
キャラクター参照・型固有値を含まない＝次のツールへその設定ブロックだけを
コピーできる状態）。 */
/* ===== design tokens ===== */
:root {
/* 旧トークン（44号以来。後方互換のため維持） */
--bg: #EEF3FC;
--card: #FFFFFF;
--ink: #101728;
--blue: #2563EB;
--blue-deep: #1D4ED8;
--blue-soft: #EAF1FF;
--line: #DCE6F5;
--ok: #16A34A;
--ok-soft: #ECFDF3;
--error: #DC2626;
--error-bg: #FEF2F2;
--error-border: #FCA5A5;
--muted: #5B6B85;
--font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", Meiryo, sans-serif;
/* 新トークン（案件20260822-01・2b章デザイン方針） */
--c-primary: #2563EB;
--c-primary-strong: #1D4ED8;
--c-primary-soft: #DBEAFE;
--c-accent: #0D9488;
--c-accent-soft: #CCFBF1;
--c-step-1: #2563EB;
--c-step-2: #0D9488;
--c-step-3: #EA580C;
--c-step-4: #7C3AED;
--c-bg: #F5F7FB;
--c-surface: #FFFFFF;
--c-surface-2: #F8FAFC;
--c-border: #E2E8F0;
--c-border-strong: #CBD5E1;
--c-text: #0F172A;
--c-text-2: #334155;
--c-text-3: #64748B;
--c-danger: #DC2626;
--c-danger-soft: #FEE2E2;
--c-danger-strong: #B91C1C;
/* 案件20260823-05差し戻し（5b章D5）: 「危険」ではなく「注意」を伝える
箇所（例: 型不一致の注意表示）専用のトークン。--c-dangerと混同しない
よう別名を持たせ、生hexでの直書きを禁止する（本トークン経由でのみ
参照する）。 */
--c-warn: #D97706;
--c-warn-soft: #FEF3C7;
--radius-s: 8px;
--radius-m: 12px;
--radius-l: 16px;
--shadow-card: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(37,99,235,.06);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* 見出しスケール（7章会議記録: displayはweight700・1280=34px/375=28px。
2bの800/32pxから意見番指摘で修正した最終値） */
--font-size-display: 28px;
--font-size-h2: 24px;
--font-size-h3: 20px;
--font-size-body: 16px;
--font-size-caption: 14px;
--font-size-label: 12px;
--shell-sidebar-w: 240px;
--shell-topbar-h: 64px;
--shell-navbar-h: 64px;
/* モバイル上部バーの左側にロゴロックアップを置くための予約幅
（最終修正F2。ロックアップ実測幅+余白を上回る値） */
--shell-lockup-w: 160px;
}
@media (min-width: 1024px) {
:root { --font-size-display: 34px; }
}
/* ===== /design tokens ===== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: var(--c-bg); }
body {
font-family: var(--font-sans);
color: var(--c-text);
font-size: 16px;
line-height: 1.7;
-webkit-text-size-adjust: 100%;
overflow-x: hidden;
font-variant-numeric: tabular-nums;
}
:focus-visible { outline: 3px solid var(--c-primary-strong); outline-offset: 2px; }
/* 案件20260823-04是正サイクル・CSO追加是正(4)（2026-08-23・kaihatsu）:
[tabindex="-1"]要素（画面遷移時にJSがプログラム的にfocus()する見出し・
モーダルのルート等。home.js/compose-shell.js/safety-screen.js/
static-page.js/lib/modal.js）は、tabindex=-1のためキーボードTabの通常の
到達順序に含まれない＝実機のキーボードユーザーがTabでここへ到達すること
はない。にもかかわらずChromiumの:focus-visibleヒューリスティックは
script由来のfocus()もvisibleと判定するため、マウス/タップ操作の画面遷移
でも枠が見えてしまっていた（差し戻し是正）。tabindex=-1要素だけ枠を
出さない（他の通常フォーカス可能要素＝ボタン・リンク・inputは上のグローバル
:focus-visible規則のまま・キーボードTab到達時は既存どおり可視）。 */
[tabindex="-1"]:focus-visible { outline: none; }
button, input, textarea, select { font: inherit; }
.ev-visually-hidden {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* 案件20260823-06 F-1/F-4是正（実測で根本原因を特定）: compose画面の
[data-ev-heading]（h1.ev-visually-hidden・tabindex=-1）はstep遷移の都度
app.js/home.jsがheading.focus()を呼ぶ（44号14章「step遷移後の見出し
focus」）。この要素はposition:absoluteだがtop/left省略のため通常フロー上の
位置（＝上部バー[data-ev-shell="topbar"]の直後）に実在し、ブラウザ既定の
focus時scrollIntoViewがこの位置へ実際にページをスクロールする
（実測: viewport高さにより36px前後のスクロールが発生し、sticky topbarの
高さ分だけ直後の[data-ev-screen-hint]が隠れる＝オーナー報告と一致）。
scroll-margin-topでtopbar分の余白をスクロール到達点に予約する。 */
[data-ev-heading] {
scroll-margin-top: calc(var(--shell-topbar-h) + 8px);
}
.ev-page {
max-width: 640px;
margin: 0 auto;
/* sticky bottom-actionsを持つ画面（appearance／content／layout。45-A
REVISE修正③でexportはsummaryPane内へactionsを移しsticky footerを
廃止した＝data-ev-has-bottom-actions="false"）だけ、footerがカード内容を
覆い隠さないよう余裕を持った下部paddingを確保する
（44号14章「sticky要素が内容を隠さない」）。無い画面で同じ余白を残すと
ただの死んだ余白になるため、小さいpaddingへ切り替える。 */
padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.ev-page[data-ev-has-bottom-actions="true"] {
/* layout/content/appearanceは常時1button（実測: 1button+gap+wrapper
paddingで約90px）。余裕を持たせて140pxを確保する。モバイルでは新設の
下部固定ステップバー（--shell-navbar-h）の分もさらに上乗せする
（7章会議記録: 固定要素の非交差）。 */
padding-bottom: calc(140px + var(--shell-navbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
.ev-page[data-ev-has-bottom-actions="true"] { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}
.ev-heading {
margin: 0 0 16px; font-size: var(--font-size-display); font-weight: 700; letter-spacing: -0.01em;
color: var(--c-text);
}
.ev-section-label { margin: 20px 0 10px; font-size: var(--font-size-caption); font-weight: 800; color: var(--c-text-3); text-transform: none; }
.ev-lead { margin: 0 0 8px; font-size: 13.5px; color: var(--c-text-3); line-height: 1.7; }
.ev-empty { padding: 24px 0; color: var(--c-text-3); font-size: 14px; }
/* ---- ボタン ---- */
.ev-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-width: 44px; min-height: 44px; padding: 12px 16px;
border-radius: var(--radius-m); font-size: 15px; font-weight: 700; font-family: var(--font-sans);
border: 1px solid transparent; cursor: pointer;
transition: background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
-webkit-tap-highlight-color: transparent;
/* 差し戻しR4: モバイル下部固定ステップバー(--shell-navbar-h)にボタンが
隠れないよう、scrollIntoView等のネイティブなスクロール到達（Tab移動・
アンカー・スクロール操作）でも手前に余白を残す（7章会議記録・
非交差契約のスクロール位置版。1024px以上は下部固定バーが無いため
実質無害）。 */
scroll-margin-bottom: calc(var(--shell-navbar-h) + var(--space-4));
}
@media (prefers-reduced-motion: reduce) { .ev-btn { transition: none; } }
.ev-btn-primary { background: var(--c-primary); color: #fff; width: 100%; box-shadow: var(--shadow-card); }
.ev-btn-primary:hover { background: var(--c-primary-strong); }
.ev-btn-primary:disabled { background: #C6CEDC; color: #8996AC; cursor: not-allowed; box-shadow: none; }
.ev-btn-secondary { background: #fff; color: var(--c-primary-strong); border-color: var(--c-primary); }
.ev-btn-outline { background: transparent; color: var(--c-text); border-color: var(--c-border); }
.ev-btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary-strong); }
.ev-btn-create { margin: 8px 0 20px; }
.ev-inline-error {
margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-s);
background: var(--c-danger-soft); border: 1px solid #FCA5A5; color: var(--c-danger);
font-size: 13px; font-weight: 700;
}
/* ---- ブランドロックアップ（[data-ev-brand-lockup]。D-01） ----
最終修正F2: 全画面で1個だけ。DOM上は.ev-pageの直接の子で、位置だけを
ここで切り替える（モバイル=上部バーの左／PC=サイドバー最上部）。
サイドバーは375pxでdisplay:noneになる契約があるため、その子要素には
できない（nav・案内カードと同じ設計）。 */
.ev-brand-lockup { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-text); }
.ev-brand-lockup-word { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.ev-page > .ev-brand-lockup {
position: fixed;
top: calc(16px + env(safe-area-inset-top));
left: max(16px, env(safe-area-inset-left));
height: 32px;
z-index: 16; /* 上部バー(15)より前面 */
}
@media (min-width: 1024px) {
.ev-page > .ev-brand-lockup {
top: var(--space-5); left: var(--space-4); height: auto;
z-index: 21; /* サイドバーの面(20)より前面 */
}
.ev-brand-lockup-word { font-size: 16px; }
}
/* ---- HOME 見出し行（ブランド＋見出し＋ヘルパーカード＝キャラクター） ----
1章勝利条件「キャラクターイラストが最低1箇所ある」は、右上に置く
ヘルパーカード（[data-ev-helper-card] ev-helper-card--home）が兼ねる
（2bレイアウト「右上に澄空ルカ」と2bシグネチャの案内カードは同一要素）。 */
.ev-home-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.ev-home-hero-text { min-width: 0; flex: 1 1 260px; }
.ev-home-top .ev-helper-card { flex: 0 1 320px; }
/* ---- HOME 手順・注記（公開版・大区切りC） ---- */
.ev-home-steps { list-style: none; margin: 4px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ev-home-step {
display: flex; align-items: center; gap: 12px;
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 10px 14px;
box-shadow: var(--shadow-card);
}
.ev-home-step-num {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
background: var(--c-primary); color: #fff; font-size: 14px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
/* 順序が情報として意味を持つ4項目のため、番号バッジ専用トークン
--c-step-1..4 を色符号化として用いる（2b「他用途へ流用禁止」の
「専用」対象そのもの＝工程①〜④の番号バッジ用途としてここで使う）。 */
.ev-home-step:nth-child(1) .ev-home-step-num { background: var(--c-step-1); }
.ev-home-step:nth-child(2) .ev-home-step-num { background: var(--c-step-2); }
.ev-home-step:nth-child(3) .ev-home-step-num { background: var(--c-step-3); }
.ev-home-step:nth-child(4) .ev-home-step-num { background: var(--c-step-4); }
.ev-home-step-text { font-size: 14px; font-weight: 700; color: var(--c-text); }
.ev-home-notes-card { margin-bottom: 20px; }
.ev-home-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.ev-home-notes li { font-size: 12.5px; color: var(--c-text-3); line-height: 1.7; }
/* ---- HOME 型サムネカード棚（[data-ev-home-example-shelf]。D-06） ---- */
.ev-home-example-shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 20px; }
@media (min-width: 640px) { .ev-home-example-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ev-home-example-card {
display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border);
border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card);
}
/* 差し戻しR3: ①カードと同じ4:3窓・object-fit:contain（上端切り抜き禁止）。 */
.ev-home-example-thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--c-surface-2); overflow: hidden; }
.ev-home-example-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* バッジは画像窓(.ev-home-example-thumb)の外（画像の下の独立した帯）へ。 */
.ev-home-example-badge {
display: inline-flex; align-self: flex-start; margin: 6px 8px 0; padding: 2px 7px; border-radius: 999px;
background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-3); font-size: 10.5px; font-weight: 700;
}
.ev-home-example-icon {
position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); color: var(--c-primary);
}
.ev-home-example-card:nth-of-type(4n+2) .ev-home-example-icon { color: var(--c-accent); }
.ev-home-example-card:nth-of-type(4n+3) .ev-home-example-icon { color: var(--c-step-3); }
.ev-home-example-card:nth-of-type(4n+4) .ev-home-example-icon { color: var(--c-step-4); }
.ev-home-example-name { margin: 8px 10px 10px; font-size: 12.5px; font-weight: 800; color: var(--c-text); }
/* ---- HOME 一覧 ---- */
.ev-confirmation-banner {
margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-m);
background: var(--c-primary-soft); border: 1px solid var(--c-border);
}
.ev-project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ev-project-card {
display: flex; align-items: center; gap: 12px;
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: 12px;
box-shadow: var(--shadow-card);
}
.ev-project-thumb {
flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radius-s); overflow: hidden;
background: var(--c-surface-2); display: flex; align-items: center; justify-content: center;
}
.ev-project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-project-body { min-width: 0; flex: 1 1 auto; }
.ev-project-actions { flex: 0 0 auto; }
.ev-project-name { margin: 0 0 4px; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-project-meta { margin: 0 0 4px; font-size: 12.5px; color: var(--c-text-3); }
.ev-project-stage { margin: 0 0 10px; font-size: 12.5px; color: var(--c-text-3); }
.ev-project-pending { margin: 6px 0 0; font-size: 12.5px; color: var(--c-text-3); }
/* ---- 空状態（[data-ev-empty-state]。D-07） ---- */
.ev-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); color: var(--c-text-3); }
.ev-empty-state-illustration { color: var(--c-border-strong); }
/* ---- ヘルパーカード（[data-ev-helper-card]。2bシグネチャ「ルカが案内する
設計図ワークスペース」。HOME/①/②/③/④共通コンポーネント） ---- */
.ev-helper-card {
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l);
padding: var(--space-4); box-shadow: var(--shadow-card);
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
position: relative;
}
.ev-helper-card-image { display: block; border-radius: 50%; object-fit: cover; }
.ev-helper-card-image-error {
display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--c-danger);
}
.ev-helper-card-body { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--c-text-2); }
/* HOME用（大ルカ・≦160px/PC・≦96px/モバイル。3b-5）。
最終修正F1: 表示する実体はluka-portrait.png（縦長の顔〜上半身）なので、
正方形へ切り詰めず高さ基準で原寸比を保つ（width:auto+contain）。 */
.ev-helper-card--home { flex-direction: row; align-items: center; gap: var(--space-4); }
.ev-helper-card--home .ev-helper-card-image {
width: auto; height: 96px; max-width: 120px; border-radius: var(--radius-m); object-fit: contain; flex: 0 0 auto;
}
@media (min-width: 1024px) {
.ev-helper-card--home .ev-helper-card-image { height: 160px; max-width: 180px; }
}
/* ①②③④共通（小アバター40〜48px。差し戻しR5: サイドバー内は縦積み＝
アバター上・本文下・本文は全幅。1行あたり最低12文字を確保できる幅を
前提にする＝サイドバー幅の折り返し崩れ対策）。 */
.ev-helper-card--compact { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); }
.ev-helper-card--compact .ev-helper-card-image { width: 44px; height: 44px; flex: 0 0 auto; }
.ev-helper-card--compact .ev-helper-card-body { width: 100%; }
/* ---- 安心文言（[data-ev-privacy-note]。画面②。1章商品整合） ---- */
.ev-privacy-note {
display: flex; align-items: flex-start; gap: var(--space-2);
margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-s);
background: var(--c-accent-soft); color: var(--c-text-2); font-size: 12.5px; line-height: 1.6;
}
.ev-privacy-note svg { flex: 0 0 auto; color: var(--c-accent); margin-top: 1px; }
/* ---- compose共通シェル（[data-ev-shell]。案件20260822-01 D-03） ---- */
.ev-shell-sidebar {
display: none;
}
@media (min-width: 1024px) {
.ev-shell-sidebar {
display: flex; flex-direction: column;
position: fixed; top: 0; left: 0; bottom: 0; width: var(--shell-sidebar-w);
background: var(--c-surface); border-right: 1px solid var(--c-border);
padding: var(--space-5) var(--space-4); z-index: 20; overflow-y: auto;
}
}
.ev-shell-topbar {
position: sticky; top: 0; z-index: 15; height: var(--shell-topbar-h);
display: flex; align-items: center;
background: var(--c-surface); border-bottom: 1px solid var(--c-border);
margin: 0 -16px; padding: 0 16px;
}
@media (max-width: 1023.98px) {
/* 最終修正F2: モバイルはロックアップを上部バーの左へ固定表示するため、
タイトル・保存チップがその下へ潜らないよう左側に予約幅を確保する
（上の.ev-shell-topbar宣言と同詳細度のため、source order優先で確実に
上書きできるようこの位置へ置く。重なりの有無はpublicE-01でbounding box
実測）。
あわせて上部バーを画面最上端へ寄せる: .ev-pageの上部padding分だけ
負のmargin-topで引き上げ、同じ量をmargin-bottomで返す（本文の位置は
変えずに、バーだけを上端へ）。これによりスクロール前でもsticky固定後でも
上部バーの矩形が常にy=0〜64pxで一定になり、position:fixedのロックアップ
（固定要素はstickyに追随できない）と縦位置が食い違わない。 */
.ev-shell-topbar {
padding-left: var(--shell-lockup-w);
margin-top: calc(-1 * (16px + env(safe-area-inset-top)));
margin-bottom: calc(16px + env(safe-area-inset-top));
}
}
.ev-project-bar {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
/* 案件20260823-04: 使い方ナビ追加で3要素目が増えたため、極端に狭い実効幅
（200%zoom相当=44号必須テスト51実測）でも横はみ出しにならないよう
折り返しを許可する（横スクロールより安全側）。通常幅では1行に収まる。 */
flex-wrap: wrap; row-gap: 4px;
}
.ev-project-bar-name { margin: 0; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-autosave-status { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--c-text-3); flex: 0 0 auto; }
.ev-autosave-status[data-ev-save-state="saving"] { color: var(--c-primary-strong); }
.ev-autosave-status[data-ev-save-state="saved"],
.ev-autosave-status[data-ev-save-state="clean"] { color: var(--c-accent); }
.ev-autosave-status[data-ev-save-state="failed"],
.ev-autosave-status[data-ev-save-state="conflict"] { color: var(--c-danger); }
/* ホームリンク（[data-ev-nav-home]。差し戻しR2新設）: モバイルでは出さない
（HOMEに下部固定ナビは不要。サイドバー先頭の項目としてのみ使う）。
.ev-step-nav-dotのスタイルを共有しつつ、独立したposition:fixed要素として
ステップナビの直上へ置く（サイドバーはdisplay:noneの子孫を描画しない
契約があるため、サイドバーの子要素にはできない＝nav同様の設計）。 */
/* .ev-step-nav-dot（共有クラス。display:flexを持つ）より確実に上書きする
必要があるため、同じ複合セレクタ（同一詳細度）をmobile非表示・PC表示の
両方で使い、source order（本ブロックが.ev-step-nav-dotの定義より後）で
確実に上書きする（単純クラス.ev-shell-nav-homeだけだと.ev-step-nav-dotと
詳細度が同点になり、後着のルールが勝つ事故が起きた＝実装時に1280px
非スクロール既存テストで回帰実測して修正）。 */
.ev-step-nav-dot.ev-shell-nav-home { display: none; }
@media (min-width: 1024px) {
.ev-step-nav-dot.ev-shell-nav-home {
display: flex;
position: fixed; left: var(--space-4); top: 96px;
width: calc(var(--shell-sidebar-w) - (var(--space-4) * 2));
z-index: 21;
}
}
.ev-step-nav-dot.ev-shell-nav-home.is-current { border-color: var(--c-primary); color: var(--c-primary-strong); background: var(--c-primary-soft); cursor: default; }
/* nav（[data-ev-step-nav]）: モバイルは下部固定4段ステップバー、
1024px以上はサイドバー内へ視覚的に重ねる縦並びナビ（7章「固定要素の
非交差」実測対象）。HOME画面から呼ばれる時（[data-ev-nav-context="home"]）
はモバイルで出さない（差し戻しR2: HOMEはPCシェルのみ・下部固定バーは
compose画面専用のまま）。 */
.ev-step-nav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: flex; align-items: stretch; justify-content: space-around; gap: 0;
margin: 0; padding: var(--space-2) max(var(--space-2), env(safe-area-inset-right)) calc(var(--space-2) + env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left));
height: var(--shell-navbar-h); box-sizing: border-box;
background: var(--c-surface); border-top: 1px solid var(--c-border);
}
@media (max-width: 1023.98px) {
.ev-step-nav[data-ev-nav-context="home"] { display: none; }
}
@media (min-width: 1024px) {
.ev-step-nav {
position: fixed; left: var(--space-4); right: auto; bottom: auto; top: 160px;
width: calc(var(--shell-sidebar-w) - (var(--space-4) * 2));
height: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-2);
padding: 0; border-top: none; background: transparent; z-index: 21;
}
}
.ev-step-nav-dot {
flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
min-width: 44px; min-height: 44px; border-radius: var(--radius-m); border: 1px solid var(--c-border);
background: var(--c-surface); color: var(--c-text-3); font-weight: 800; cursor: pointer;
-webkit-tap-highlight-color: transparent; transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (prefers-reduced-motion: reduce) { .ev-step-nav-dot { transition: none; } }
@media (min-width: 1024px) {
.ev-step-nav-dot { flex: 0 0 auto; justify-content: flex-start; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 52px; }
}
.ev-step-nav-dot:disabled,
.ev-step-nav-dot.is-disabled { cursor: not-allowed; opacity: .5; }
/* 工程番号バッジ（[data-ev-step-badge]。最終修正F3。差し戻しR6でアイコンへ
置き換えた際に消えた工程1〜4の番号を、アイコンの前へ復元する。色は
--c-step-1〜4＝HOMEの4ステップ説明（.ev-home-step-num）と同じ符号なので、
HOMEの説明とサイドバーの工程が視覚的に対応する）。 */
.ev-step-nav-badge {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: var(--c-text-3); color: #fff;
font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.ev-step-nav-dot[data-ev-nav-step="1"] .ev-step-nav-badge { background: var(--c-step-1); }
.ev-step-nav-dot[data-ev-nav-step="2"] .ev-step-nav-badge { background: var(--c-step-2); }
.ev-step-nav-dot[data-ev-nav-step="3"] .ev-step-nav-badge { background: var(--c-step-3); }
.ev-step-nav-dot[data-ev-nav-step="4"] .ev-step-nav-badge { background: var(--c-step-4); }
/* アイコン（差し戻しR6。旧.ev-step-nav-numの番号circleを置き換え） */
.ev-step-nav-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: inherit; }
/* ラベル＋1行説明の2段（1024px以上のみ表示。モックの密度） */
.ev-step-nav-lines { display: none; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
@media (min-width: 1024px) { .ev-step-nav-lines { display: flex; } }
/* 案件20260823-03修正: ラベル・1行説明は共にwhite-space:nowrapの単一行
テキストで折り返さないため、bodyのline-height:1.7を継承させる理由がない。
継承のまま（未指定）だと1行あたりの実高さが想定min-height:52pxを超えて
膨張し、サイドバー内でナビ直下に固定配置している案内カード
（.ev-compose > .ev-helper-card。top:416px）に被る事故が起きた
（実測: 継承時のナビ4項目合計高=263.13px→ナビ下端がカード上端(416px)より
下＝重なり。行間を単一行向けの1.2へ締めると合計232px に戻り、
カードとの間に24px確保できる＝先行RED red4-helper-overlap.txt参照）。 */
.ev-step-nav-text { font-size: 13px; font-weight: 700; line-height: 1.2; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-step-nav-desc { font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-step-nav-dot.is-current { border-color: var(--c-primary); color: var(--c-primary-strong); background: var(--c-primary-soft); }
.ev-step-nav-dot.is-complete { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-soft); }
/* 現在地であり、かつそのステップ自体の完了条件も満たしている場合
（例: layoutが現在地でも既に次へ進める状態）は、現在地表示（primary）を
優先する（3クラスセレクタ＝詳細度でis-completeより確実に上書きする）。 */
.ev-step-nav-dot.is-current.is-complete { border-color: var(--c-primary); color: var(--c-primary-strong); background: var(--c-primary-soft); }
/* compose画面のヘルパーカード（[data-ev-helper-card]）: モバイルは本文の
下（通常フロー）、1024px以上はサイドバー列内・ナビの直下へ固定配置する
（差し戻しR2: 「案内カードはナビ直下に置く。下端固定にしない」＝
サイドバー内の巨大な空白を解消）。 */
@media (min-width: 1024px) {
.ev-compose > .ev-helper-card {
position: fixed; left: var(--space-4); top: 416px; bottom: auto;
width: calc(var(--shell-sidebar-w) - (var(--space-4) * 2));
z-index: 21;
}
}
.ev-compose-main { min-height: 200px; }
.ev-step-content { display: flex; flex-direction: column; gap: 4px; }
.ev-card {
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l); padding: 16px;
margin-bottom: 16px; box-shadow: var(--shadow-card);
}
.ev-selected-layout { margin: 0; font-size: 16px; font-weight: 800; }
.ev-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--c-text-3); }
.ev-label:first-of-type { margin-top: 0; }
.ev-input, .ev-textarea {
display: block; width: 100%; border: 1px solid var(--c-border); border-radius: var(--radius-s);
padding: 12px 14px; font-size: 16px; font-family: var(--font-sans); color: var(--c-text); background: var(--c-surface);
}
.ev-textarea { resize: vertical; line-height: 1.6; }
.ev-hint { margin: 6px 0 0; font-size: 12px; color: var(--c-text-3); }
.ev-hint.is-invalid { color: var(--c-danger); font-weight: 700; }
.ev-field-group {
margin: 16px 0 0; padding: 12px 14px 14px; border-radius: var(--radius-m); background: var(--c-surface-2); border: 1px solid var(--c-border);
}
.ev-field-group-legend { padding: 0 4px; font-size: 13px; font-weight: 800; color: var(--c-text); }
.ev-field-error {
margin: 6px 0 0; font-size: 12.5px; color: var(--c-danger); font-weight: 700;
}
.ev-required-banner {
display: block; width: 100%; text-align: left; margin: 0 0 14px; padding: 10px 14px;
border-radius: var(--radius-s); background: var(--c-primary-soft); color: var(--c-primary-strong);
font-size: 13px; font-weight: 800; border: none; cursor: pointer; min-height: 44px;
}
.ev-required-banner.is-complete { background: var(--c-accent-soft); color: var(--c-accent); }
.ev-error-summary {
margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-m);
background: var(--c-danger-soft); border: 1px solid #FCA5A5;
}
.ev-error-summary h2 { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--c-danger); }
.ev-error-summary ul { margin: 0; padding-left: 18px; }
.ev-error-summary a { font-size: 13px; font-weight: 700; color: var(--c-danger); }
/* ---- appearance ---- */
.ev-preset-grid, .ev-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; }
.ev-preset-swatch {
display: flex; flex-direction: column; align-items: stretch; gap: 0;
min-width: 220px; min-height: 44px; padding: 0; border-radius: var(--radius-m);
border: 2px solid var(--c-border); background: var(--c-surface); cursor: pointer; -webkit-tap-highlight-color: transparent;
overflow: hidden; text-align: left; box-shadow: var(--shadow-card);
}
.ev-preset-swatch.is-selected { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.ev-preset-swatch-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ev-swatch-dot { width: 28px; height: 28px; border-radius: 50%; display: block; flex: 0 0 auto; }
.ev-swatch-label { font-size: 13px; font-weight: 800; color: var(--c-text); }
.ev-preset-desc { margin: 0 12px 10px; font-size: 12px; color: var(--c-text-3); line-height: 1.5; }
.ev-preset-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 12px 12px; }
.ev-preset-chip {
display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
background: var(--c-surface-2); border: 1px solid var(--c-border); font-size: 10.5px; font-weight: 700; color: var(--c-text-3);
}
.ev-preset-chip-swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ev-color-chip {
width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff;
outline: 1px solid var(--c-border); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ev-color-chip.is-selected { outline: 3px solid var(--c-primary-strong); }
.ev-custom-color { margin: 8px 0 16px; }
/* ---- 案件20260823-06 F-5: 「自分で決める」パネル（本体色・アクセント色の
2役割。生hexはappearance-presets-v4.js COLOR_ROLE_PALETTESに集約・
ここには一切書かない）。スウォッチ・パレット色は受入条件どおり375pxで
44px以上のタップ領域を確保する。 ---- */
.ev-color-panel { margin: 8px 0 16px; }
.ev-color-role { margin: 0 0 16px; }
.ev-color-role-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; flex-wrap: wrap; }
.ev-color-role-swatch {
width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: var(--radius-m);
border: 2px solid var(--c-border); cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 0;
}
.ev-color-role-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ev-color-role-hex { flex: 1 1 140px; min-width: 0; }
.ev-color-role-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-color-role-palette-swatch {
width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: var(--radius-s);
border: 2px solid #fff; outline: 1px solid var(--c-border); cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 0;
}
.ev-color-live {
margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-s);
background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-2);
font-size: 12.5px; font-weight: 700; line-height: 1.6; word-break: break-word;
}
.ev-contrast-warning {
margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-s);
background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 12.5px; font-weight: 700;
}
/* ---- 45-A REVISE修正③: 操作パネル + 実プレビューの2カラム化 ----
モバイル/1023px以下は縦積み（従来通り）。previewPaneをDOM上で先に置く
（appearance-step.js・export-step.js）ことで、1カラム表示でも
「見た目/結果を確認 → 操作で調整する」視線順になる。1024px以上では
CSS Gridで横並びにする（前段=preview、後段=操作/summary）。 */
.ev-compose-columns {
display: flex;
flex-direction: column;
gap: 20px;
}
.ev-compose-preview-pane { min-width: 0; }
.ev-compose-operations, .ev-compose-summary { min-width: 0; }
@media (min-width: 1024px) {
.ev-compose-columns {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
align-items: start;
gap: 32px;
}
}
.ev-preview-section { margin-top: 8px; }
.ev-preview-status { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--c-text-3); }
.ev-preview-slot {
width: 100%; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); padding: 8px;
}
.ev-preview-slot canvas { display: block; width: 100%; height: auto; }
/* ---- export ---- */
.ev-export-meta p { margin: 0 0 4px; font-size: 13px; }
.ev-export-type { font-size: 16px; font-weight: 800; }
.ev-export-image-slot { margin: 12px 0; border: 1px solid var(--c-border); border-radius: var(--radius-m); overflow: hidden; background: var(--c-surface); }
.ev-export-image { display: block; width: 100%; height: auto; }
.ev-export-status { margin: 8px 0; font-size: 13px; font-weight: 700; color: var(--c-text); min-height: 1.4em; }
.ev-export-actions { display: flex; flex-direction: column; gap: 8px; }
/* ---- 下部固定 ---- */
.ev-bottom-actions {
position: sticky; bottom: 0; z-index: 10;
background: linear-gradient(180deg, rgba(245,247,251,0) 0%, var(--c-bg) 30%);
padding: 14px 0 calc(10px + env(safe-area-inset-bottom));
margin: 0 -16px; padding-left: 16px; padding-right: 16px;
}
@media (max-width: 1023.98px) {
/* モバイル下部固定ステップバー(--shell-navbar-h)の上へ重ねずに置く
（7章会議記録: 固定要素どうしの非交差）。 */
.ev-bottom-actions { bottom: calc(var(--shell-navbar-h) + env(safe-area-inset-bottom)); }
}
/* ---- safety画面 ---- */
.ev-safety { text-align: left; }
/* 45-A REVISE修正③「1280/1920の巨大余白と細すぎる中央列を解消」。
従来はmax-width 640px（1920pxでも720px）のまま据え置きだったため、
PC幅では左右に巨大な余白だけが残り、2カラム化しても中央列が極端に
細くなっていた。compose画面（2カラム対応）を中心に、幅の余裕へ合わせて
段階的に拡張する。 */
@media (min-width: 1024px) {
.ev-page { max-width: 900px; padding-left: 24px; padding-right: 24px; }
/* appearanceのCTA（.ev-bottom-actions）をpreviewへ重ねない: 画面幅に
十分な余裕がある1024px以上ではsticky固定をやめ、通常の文書内配置へ戻す
（45号14章の対象=モバイルのsafe-area/sticky事故に限定する）。
.ev-bottom-actionsの無条件sticky定義より後段に置き、同specificityの
source order優先で確実に上書きする。 */
.ev-bottom-actions {
position: static;
background: none;
margin: 24px 0 0;
padding: 0;
}
}
@media (min-width: 1280px) {
.ev-page { max-width: 1120px; padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1920px) {
.ev-page { max-width: 1400px; }
}
/* ---- compose画面のPCシェル用オフセット（案件20260822-01 D-03） ----
.ev-pageの一般則より後段に置き、同specificityのsource order優先で
.ev-compose（サイドバー付きの画面）だけを上書きする。
モバイルは下部固定ステップバー（--shell-navbar-h）の分の下部余白を
常に確保する（sticky bottom-actionsが無い画面=exportでも、本文最後の
行がstep-navの下へ隠れないようにするため。has-bottom-actions="true"の
画面は上の属性セレクタ規則＝より高い詳細度がpadding-bottomを別途担当
するためここでは競合しない）。 */
/* 案件20260823-04: [data-ev-screen-hint]新設分の高さを吸収するため、
既存28pxのベース余白を70pxへ拡張する（実測: 375px画面④でstep-nav固定
バーとcopy-promptボタンが約11px交差する回帰をphase44-a11y系と同型の
bounding box実測=publicE-05で検出・is-has-bottom-actions=falseの画面
（export）はこのベース値のみに依存するため、他画面より余裕を持たせる）。 */
.ev-compose { padding-bottom: calc(70px + var(--shell-navbar-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
.ev-compose {
margin-left: 0; margin-right: 0; max-width: none; width: 100%;
padding-left: calc(var(--shell-sidebar-w) + var(--space-6));
padding-right: var(--space-6);
padding-top: var(--space-5);
padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.ev-compose .ev-compose-main { max-width: 1100px; }
}
/* ---- HOMEのPCシェル用オフセット（差し戻しR2）。.ev-composeと同型:
サイドバー分の余白を左に確保する。HOMEはモバイルで下部固定ナビを
持たないため、.ev-composeと違い--shell-navbar-h分の下部paddingは
加算しない。 */
@media (min-width: 1024px) {
.ev-home {
margin-left: 0; margin-right: 0; max-width: none; width: 100%;
padding-left: calc(var(--shell-sidebar-w) + var(--space-6));
padding-right: var(--space-6);
padding-top: var(--space-5);
}
}
/* ---- HOME 主CTA・PNGクイック作成（大区切りB） ---- */
.ev-btn-create-main { margin: 8px 0 16px; }
.ev-create-legacy { margin: 0 0 20px; }
/* ---- 画面①型ギャラリー（大区切りB。00号5章①） ---- */
.ev-recommend-slot { margin: 8px 0 20px; }
.ev-layout-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 16px;
margin: 12px 0 20px;
}
@media (min-width: 1024px) {
.ev-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
.ev-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ev-layout-card {
display: flex; flex-direction: column; height: 100%;
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 12px;
box-shadow: var(--shadow-card);
}
.ev-layout-card.is-recommended { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.ev-layout-card-image-window {
position: relative; width: 100%; aspect-ratio: 4 / 3;
background: var(--c-surface-2); border-radius: var(--radius-s); overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.ev-layout-card-image { width: 100%; height: 100%; object-fit: contain; display: block; }
.ev-layout-card-placeholder { font-size: 12px; color: var(--c-text-3); padding: 8px; text-align: center; }
.ev-layout-card-image-error {
position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; text-align: center;
font-size: 11.5px; font-weight: 700; color: var(--c-danger); background: rgba(255,255,255,0.92);
}
/* 差し戻しR3: バッジは画像窓(.ev-layout-card-image-window)の外（画像の下の
独立した帯）へ。サンプル画像内の文字を一切隠さない。 */
.ev-layout-card-badge {
display: inline-flex; align-self: flex-start; margin: 8px 0 0; padding: 3px 8px; border-radius: 999px;
background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-3); font-size: 11px; font-weight: 700;
}
.ev-layout-card-name { margin: 10px 0 0; font-size: 14.5px; font-weight: 800; }
.ev-layout-card-png-hint { margin: 2px 0 0; font-size: 11.5px; color: var(--c-text-3); }
.ev-layout-card-recommend-reason { margin: 4px 0 0; font-size: 11.5px; color: var(--c-primary-strong); font-weight: 700; }
.ev-layout-card .ev-btn { margin-top: 10px; width: 100%; }
/* ---- 画面③ レーン選択・AIレーン（大区切りB。00号5章③） ---- */
.ev-lane-chooser { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 20px; }
.ev-selected-lane-note { margin: 0 0 14px; font-size: 13px; font-weight: 800; color: var(--c-primary-strong); }
.ev-character-grid, .ev-arrange-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.ev-character-grid .ev-btn.is-selected, .ev-arrange-grid .ev-btn.is-selected {
border-color: var(--c-primary); color: var(--c-primary-strong); box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.ev-ai-aspect { margin: 6px 0 16px; font-size: 14px; font-weight: 700; }
.ev-ai-skeleton {
padding: 20px 16px; border: 1px dashed var(--c-border); border-radius: var(--radius-m); background: var(--c-surface); margin-bottom: 12px;
}
.ev-ai-skeleton-title { margin: 0; font-size: 16px; font-weight: 800; }
.ev-ai-example { border: 1px solid var(--c-border); border-radius: var(--radius-m); overflow: hidden; background: var(--c-surface); }
.ev-ai-example-image { display: block; width: 100%; height: auto; }
/* 差し戻しR3: バッジは画像窓の外（画像の下の独立した帯）へ。画像内の文字を
一切隠さない。 */
.ev-ai-example-badge {
display: block; margin: 0; padding: 5px 10px; border-top: 1px solid var(--c-border);
background: var(--c-surface-2); color: var(--c-text-3); font-size: 11px; font-weight: 700;
}
.ev-ai-preview-note { margin: 8px 0 0; font-size: 12px; color: var(--c-text-3); }
/* ---- 画面④ AIレーン書き出し（大区切りB） ---- */
.ev-prompt-text {
white-space: pre-wrap; word-break: break-word; font-family: var(--font-sans); font-size: 13.5px;
line-height: 1.7; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m); padding: 14px;
max-height: 60vh; overflow-y: auto; margin: 0;
}
.ev-copy-status { margin: 8px 0; font-size: 13px; font-weight: 700; color: var(--c-text); min-height: 1.4em; }
.ev-copy-status[data-ev-copy-status="success"] { color: var(--c-accent); }
.ev-copy-fallback {
display: block; width: 100%; margin-top: 8px; border: 1px solid var(--c-border); border-radius: var(--radius-s);
padding: 12px; font-size: 13px; font-family: var(--font-sans); background: var(--c-surface); color: var(--c-text);
}
.ev-luka-attach { margin: 16px 0; }
.ev-luka-reference-image { display: block; width: 100%; max-width: 240px; height: auto; border-radius: var(--radius-m); margin: 8px 0; }
.ev-luka-steps { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ev-luka-steps li { font-size: 12.5px; color: var(--c-text-3); line-height: 1.6; }
.ev-string-list-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.ev-string-list-row .ev-input { flex: 1 1 auto; }
/* ================================================================
案件20260823-04「HOME再設計・取扱説明書・削除・動線・モーション」
================================================================ */
/* ---- ヒーロー（[data-ev-hero]。2b「ヒーロー」・7章会議記録(C)） ----
型棚・最近の図解と視覚的に区別できるよう、独立したカード面（背景・角丸・
影）として描く（受入条件2）。 */
.ev-hero {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
flex-wrap: wrap; margin-bottom: var(--space-5);
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-l);
padding: var(--space-5); box-shadow: var(--shadow-card);
}
.ev-home-hero-text { min-width: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.ev-hero .ev-helper-card { flex: 0 1 320px; }
.ev-hero-value { margin: 0 0 4px; font-size: 15px; color: var(--c-text-2); line-height: 1.6; }
.ev-hero .ev-btn-create-main { margin: 8px 0 0; max-width: 420px; }
@media (max-width: 639.98px) { .ev-hero .ev-btn-create-main { max-width: none; } }
/* ---- HOME 注記カード（公開7項目。ヒーロー直下・見た目だけチップ風） ---- */
.ev-home-notes-card { margin-bottom: 20px; }
.ev-home-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.ev-home-notes li { font-size: 12.5px; color: var(--c-text-3); line-height: 1.7; }
/* ---- 型棚（[data-ev-home-example-shelf]。8枚・クリック可能） ---- */
.ev-shelf-lead { margin: 0 0 10px; font-size: 12.5px; color: var(--c-text-3); }
.ev-shelf-outro { margin: 10px 0 20px; font-size: 12.5px; color: var(--c-text-3); line-height: 1.7; }
.ev-shelf-card {
width: 100%; margin: 0; padding: 0; border: 1px solid var(--c-border);
cursor: pointer; text-align: left; font-family: var(--font-sans);
-webkit-tap-highlight-color: transparent;
transition: transform .12s ease, box-shadow .15s ease;
}
.ev-shelf-card:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
.ev-shelf-card:hover { box-shadow: 0 4px 16px rgba(37, 99, 235, .16); transform: translateY(-1px); border-color: var(--c-primary); }
}
@media (prefers-reduced-motion: reduce) { .ev-shelf-card { transition: none; } }
.ev-shelf-png-badge {
display: inline-flex; align-self: flex-start; margin: 4px 8px 0; padding: 2px 7px; border-radius: 999px;
background: var(--c-accent-soft); color: var(--c-accent); font-size: 10.5px; font-weight: 800;
}
.ev-shelf-more {
align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 800;
color: var(--c-primary-strong); background: var(--c-surface-2); min-height: 100px; padding: var(--space-4);
}
/* ---- 最近の図解: 削除ボタン（[data-ev-action="delete-project"]） ---- */
.ev-project-delete-btn {
display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px;
padding: 8px 12px; border-radius: var(--radius-s); border: 1px solid var(--c-border);
background: var(--c-surface); color: var(--c-danger); font-size: 13px; font-weight: 700;
cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: background-color .15s ease, border-color .15s ease;
}
.ev-project-delete-btn:active { background: var(--c-danger-soft); }
@media (hover: hover) and (pointer: fine) {
.ev-project-delete-btn:hover { background: var(--c-danger-soft); border-color: var(--c-danger); }
}
@media (prefers-reduced-motion: reduce) { .ev-project-delete-btn { transition: none; } }
.ev-project-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ev-empty-cta-hint { margin: -4px 0 0; font-size: 13px; font-weight: 700; color: var(--c-text-2); }
/* ---- 削除確認モーダル（lib/modal.js。[data-ev-modal]） ---- */
.ev-modal-backdrop {
position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
padding: var(--space-4); background: rgba(15, 23, 42, .45);
opacity: 0; transition: opacity .18s ease;
}
.ev-modal-backdrop.is-open { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ev-modal-backdrop { transition: none; opacity: 1; } }
.ev-modal {
width: 100%; max-width: 420px; background: var(--c-surface); border-radius: var(--radius-l);
box-shadow: 0 12px 40px rgba(15, 23, 42, .28); padding: var(--space-5);
}
.ev-modal-heading { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--c-text); }
.ev-modal-body { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--c-text-2); }
.ev-modal-error { margin: -8px 0 14px; font-size: 13px; font-weight: 700; color: var(--c-danger); }
/* 「やめる」（安全側）を先に置く（DOM順=やめる→削除する。column-reverseに
すると危険操作の確認ボタンが先に来てしまい7章会議記録の安全側デフォルト
方針と逆行するため避ける）。 */
.ev-modal-actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 480px) { .ev-modal-actions { flex-direction: row; justify-content: flex-end; } }
.ev-btn-danger { background: var(--c-danger); color: #fff; }
@media (hover: hover) and (pointer: fine) {
.ev-btn-danger:hover { background: var(--c-danger-strong); }
}
/* ---- トースト（lib/toast.js。[data-ev-toast]） ---- */
.ev-toast {
position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 70;
transform: translate(-50%, 12px); opacity: 0;
padding: 12px 18px; border-radius: 999px; background: var(--c-text); color: #fff;
font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
transition: opacity .2s ease, transform .2s ease;
}
.ev-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.ev-toast[data-ev-state="failed"] { background: var(--c-danger); }
@media (prefers-reduced-motion: reduce) {
.ev-toast { transition: none; transform: translate(-50%, 0); }
}
/* ---- 一言説明（[data-ev-screen-hint]。①〜④。F-07） ---- */
.ev-screen-hint {
/* 案件20260823-06 F-1/F-4是正（実測で根本原因を特定・publicE-05回帰是正で
再調整・2回目）: 1280/1920pxでの被り（実測: scrollY=0の静的レイアウトで
margin-topが負の場合に直前の見出し[data-ev-heading]の直後＝topbar
[data-ev-shell="topbar"]の下端の内側へ引き込まれる）を止めるには
margin-top>=0が必須（scroll-margin-topはscrollIntoView発生時にしか
効かないため375px側の是正にしかならず、1280/1920pxの静的重なりには
無力＝実測確認済み）。一方375px画面④はcopy-promptボタンと下部固定
ステップバーの元々のクリアランスが数px しかなく、screen-hintの総専有
高さ（margin-top+height+margin-bottom）が8px増えるだけで新規に交差する
（実測: publicE-05回帰。.ev-composeのpadding-bottom側での吸収は
copyBtnの位置に無関係=効果0だったことも実測済み）。marginを
`0 0 -4px`にして総専有高さを旧`-8px 0 4px`と同じに保ちつつ
margin-topだけ0以上にする（bottom側のマイナスは次要素との間に元々あった
視覚的余白を少し使うだけで、要素同士の文字が重なるほどの量ではない）。 */
margin: 0 0 -4px; font-size: 13px; line-height: 1.35; color: var(--c-text-2); font-weight: 700;
}
/* ---- サイドバー/上部バー「使い方」ナビ（[data-ev-nav="guide"]） ----
topbar（[data-ev-shell="topbar"]）内の.ev-project-barへ置く。topbarは
375px幅でもdisplay:noneにならないため、この1配置でモバイル・PC共通の
全画面到達性を満たす。 */
.ev-project-bar-name { flex: 1 1 auto; min-width: 0; }
.ev-nav-guide-link {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
min-width: 44px; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-s);
border: 1px solid transparent; background: transparent; color: var(--c-text-3);
font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
transition: background-color .15s ease, color .15s ease;
}
.ev-nav-guide-link:active { background: var(--c-surface-2); }
@media (hover: hover) and (pointer: fine) {
.ev-nav-guide-link:hover { background: var(--c-surface-2); color: var(--c-primary-strong); }
}
@media (prefers-reduced-motion: reduce) { .ev-nav-guide-link { transition: none; } }
.ev-nav-guide-link.is-current { color: var(--c-primary-strong); background: var(--c-primary-soft); cursor: default; }
.ev-nav-guide-label { white-space: nowrap; }
@media (max-width: 374.98px) { .ev-nav-guide-label { display: none; } }
/* ---- 使い方ページ（lib/static-page.js。[data-ev-screen="guide"]） ---- */
.ev-static-page-lead { margin: 0 0 20px; font-size: 14px; color: var(--c-text-2); }
.ev-static-page-sections { display: flex; flex-direction: column; gap: 20px; }
.ev-static-page-section {
background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-m);
padding: var(--space-4); box-shadow: var(--shadow-card);
}
.ev-static-page-section-heading { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--c-text); }
.ev-static-page-section-lead { margin: 0 0 10px; font-size: 12.5px; color: var(--c-text-3); }
.ev-static-page-section-body { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; color: var(--c-text-2); }
.ev-static-page-section-body:last-child { margin-bottom: 0; }
.ev-static-page-back { margin-top: 8px; }
@media (min-width: 1024px) {
.ev-static-page.ev-page {
margin-left: 0; margin-right: 0; max-width: none; width: 100%;
padding-left: calc(var(--shell-sidebar-w) + var(--space-6));
padding-right: var(--space-6);
padding-top: var(--space-5);
}
}
/* ---- ヒーロー初回表示スタガー（2bモーション。見出し→説明→CTAの順に60ms） ---- */
.ev-hero .ev-heading, .ev-hero-value, .ev-hero .ev-btn-create-main {
animation: ev-hero-stagger .24s ease both;
}
.ev-hero .ev-heading { animation-delay: 0ms; }
.ev-hero-value { animation-delay: 60ms; }
.ev-hero .ev-btn-create-main { animation-delay: 120ms; }
@keyframes ev-hero-stagger {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.ev-hero .ev-heading, .ev-hero-value, .ev-hero .ev-btn-create-main { animation: none; }
}
/* ================================================================
案件20260823-05「ネタ→AI整理プロンプト→貼り戻しで自動反映」
================================================================ */
/* ---- 「AIで整える」ブロック（[data-ev-organize-block]。画面②） ---- */
.ev-organize-block { margin-top: 4px; }
.ev-organize-block > .ev-btn { margin-top: 10px; }
.ev-organize-block > .ev-label:not(:first-of-type) { margin-top: 18px; }
/* 上書き確認ダイアログ（[data-ev-overwrite-dialog]。1b章裁定2）:
取り消し不可の操作である旨を色でも伝える（文言は別途、色だけに依存
しない）。 */
.ev-overwrite-dialog {
margin-top: 12px; border-color: var(--c-danger-strong); background: var(--c-danger-soft);
}
.ev-overwrite-dialog p { margin: 0 0 8px; font-size: 13.5px; }
.ev-overwrite-dialog .ev-btn { margin-top: 0; margin-right: 8px; }
/* 反映結果（[data-ev-apply-result]）: ok/partial/failedは色だけでなく
data-ev-state属性＋文言の両方で判別できる（fail-closed。色は補助）。 */
[data-ev-apply-result] {
margin: 12px 0; padding: 10px 12px; border-radius: var(--radius-s); font-size: 13px; font-weight: 700;
}
[data-ev-apply-result] p { margin: 0; }
[data-ev-apply-result][data-ev-state="ok"] { background: var(--c-accent-soft); color: var(--c-accent); }
[data-ev-apply-result][data-ev-state="partial"] { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
[data-ev-apply-result][data-ev-state="failed"] { background: var(--c-danger-soft); color: var(--c-danger); border: 1px solid #FCA5A5; }
[data-ev-apply-missing-list] { margin: 8px 0 0; padding-left: 18px; }
[data-ev-apply-missing-list] a { font-size: 13px; font-weight: 700; }
/* 型不一致通知（[data-ev-type-mismatch-notice]。会議記録7章(B)）。
差し戻し対応（5b章D5）: 「危険」ではなく「注意」の色にする
（.ev-inline-error=--c-danger系から、本ブロック専用の.ev-warn-notice=
--c-warn系へ切り替え。切替ボタンはprimaryのまま強調する）。 */
.ev-warn-notice {
margin: 12px 0; padding: 10px 12px; border-radius: var(--radius-s);
background: var(--c-warn-soft); border: 1px solid var(--c-warn); color: #92400E;
font-size: 13px; font-weight: 700;
}
[data-ev-type-mismatch-notice] .ev-btn { margin-top: 8px; }
/* 整理プロンプト全文の折りたたみ（[data-ev-organize-prompt-details]。
差し戻し対応（5b章D4）: 375幅で「整理プロンプトをコピー」ボタンが
全文より上に来るよう、全文はで既定折りたたみにする
（既定は閉。「指示文を見る」で開閉）。 */
[data-ev-organize-prompt-details] { margin-top: 10px; }
[data-ev-organize-prompt-details] > summary {
cursor: pointer; font-size: 13px; font-weight: 700; color: var(--c-primary-strong);
padding: 6px 2px; list-style: none;
}
[data-ev-organize-prompt-details] > summary::-webkit-details-marker { display: none; }
[data-ev-organize-prompt-details] > summary::before { content: '▸ '; }
[data-ev-organize-prompt-details][open] > summary::before { content: '▾ '; }
/* 項目あたりの文字数上限超過表示（[data-ev-field-overflow]。会議記録7章(C)。
黄色ハイライトは補助であり、文字数の実測テキストが主情報）。 */
.ev-field-overflow {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 6px 10px; border-radius: var(--radius-s);
background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-weight: 700;
}
.ev-field-overflow .ev-btn { min-height: 36px; padding: 6px 10px; }
/* 修正依頼プロンプト（[data-ev-fix-prompt-block]。1b章裁定3: fail-closedの
唯一の出口として常設）。 */
[data-ev-fix-prompt-block] { margin-top: 14px; }
[data-ev-fix-prompt-block] h3 { margin-top: 0; }