:root { --bg: #f6f5f1; --card: #ffffff; --ink: #2b2a26; --muted: #8a877e; --accent: #b4543a; --accent-soft: #f3e3dd; --line: #e4e1d8; --ok: #4a7c59; } * { box-sizing: border-box; } /* hidden属性を常に効かせる。display指定を持つクラス（.badge等）がUAの [hidden]{display:none} に 勝ってしまい、JSの el.hidden = true が無効化されていた（採用中バッジ2枚同時表示・2026-08-21 E2E P2-1） */ [hidden] { display: none !important; } body { margin: 0; font-family: "Hiragino Sans", "Yu Gothic", sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.72; } main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 80px; } main.wide { max-width: 1040px; } /* 互換性のため残置（全ページ統一） */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line); } .brand { font-weight: 700; color: var(--ink); text-decoration: none; } .userbox { font-size: 13px; color: var(--muted); display: inline-flex; gap: 14px; align-items: center; } .inline { display: inline; margin-left: 8px; } .linklike { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; text-decoration: underline; } h1 { font-size: 22px; margin: 16px 0; } h2 { font-size: 16px; margin: 0 0 12px; } h3 { font-size: 15px; margin: 20px 0 8px; color: var(--accent); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; } .card.link { display: block; text-decoration: none; color: inherit; position: relative; padding-right: 50px; } .card.link:hover { border-color: var(--accent); } /* 進めるカードに「次へ進める」矢印を右下に常設（全 .card.link 共通） */ .card.link::after { content: '→'; position: absolute; right: 14px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; line-height: 1; transition: transform .15s ease, background .15s ease; } .card.link:hover::after { background: var(--accent); color: #fff; transform: translateX(4px); } .card.narrow { max-width: 480px; margin: 60px auto; } .cards { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 680px) { .cards { grid-template-columns: 1fr 1fr; } } .guide { background: var(--accent-soft); border-radius: 8px; padding: 12px 16px; font-size: 14px; color: #6e4438; } .note { font-size: 13px; color: var(--muted); margin: 4px 0; } .meta { font-size: 13px; color: var(--muted); } .big { font-size: 24px; font-weight: 700; margin: 4px 0; } .notice { background: #fff8e1; border-radius: 8px; padding: 10px 14px; font-size: 14px; } .notice.dev { background: #e3f2fd; } .question { margin: 20px 0; padding-top: 12px; border-top: 1px dashed var(--line); } .question label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; } /* 編集できるエリア: 白地＋左のアクセントライン（書き込み可能の印） */ textarea, .input { width: 100%; padding: 10px 12px; border: 1px solid #d8d2c4; border-left: 3px solid var(--accent); border-radius: 8px; font: inherit; font-size: 14px; background: #ffffff; } /* textarea は内容に応じて自動で広がる（モダンブラウザ） */ textarea { field-sizing: content; min-height: 2.6em; overflow: hidden; resize: vertical; } textarea:focus, .input:focus { outline: 2px solid var(--accent); border-color: transparent; } /* 空欄（placeholder表示中）は背景を黄色っぽくして「未入力」を視覚化 */ .input.numonly:placeholder-shown { background: #fff8d6; border-left-color: #e9b800; } .badge { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 1px 10px; margin-left: 8px; vertical-align: middle; } .badge.self { background: var(--accent-soft); color: var(--accent); } /* 🔴 2026-08-17: ロジック構築面・磨き面のエリア／CTA表示（self と同じ語彙・白地×ブルー枠） */ .badge.area { background: #fff; border: 1px solid #85B7EB; color: #185FA5; } .badge.cta { background: #F3F8FD; border: 1px solid #85B7EB; color: #185FA5; font-weight: 600; } .badge.ai { background: #e8eef5; color: #4a6785; } .badge.warn { background: #fdecc8; color: #9a6700; } .badge.danger { background: #fde8e8; color: #c0392b; } .qactions { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; } .savestate { font-size: 12px; color: var(--ok); min-width: 80px; } .charcount { font-size: 11px; color: var(--muted); margin-left: auto; } .charcount.near { color: var(--accent); font-weight: 600; } .hintbox { background: #eef3ee; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-top: 8px; } .btn { display: inline-block; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 8px 18px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; color: var(--ink); } .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn.primary:disabled { background: var(--muted); border-color: var(--muted); cursor: not-allowed; } .btn.small { font-size: 12px; padding: 4px 12px; } .btn.ghost { border-style: dashed; color: var(--muted); } .progress { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 8px 0 4px; } .progress .bar { height: 100%; background: var(--accent); } .checklist { font-size: 13px; color: var(--muted); padding-left: 20px; } table.limits { width: 100%; border-collapse: collapse; font-size: 14px; } table.limits td, table.limits th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; } .report p { margin: 8px 0; } .threadbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .threadlink { font-size: 13px; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 99px; padding: 3px 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .threadlink.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .chatlog { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .msg { max-width: 85%; padding: 12px 16px; border-radius: 12px; font-size: 14px; } .msg.user { align-self: flex-end; background: var(--accent-soft); white-space: pre-wrap; } .msg.assistant p { margin: 6px 0; } .msg.assistant h3 { margin: 10px 0 4px; font-size: 14px; } .msg.assistant ul { margin: 6px 0; padding-left: 20px; } .msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); } .chatform { display: flex; gap: 8px; align-items: flex-end; } .chatform textarea { flex: 1; } .tabbar { display: block; padding: 8px 16px 0; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .tabbar .tabrow { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; } .tabbar .tabrow.main { padding-bottom: 2px; } .tabbar .tabrow.sub { border-top: 1px solid var(--line); padding-top: 4px; padding-bottom: 2px; } .tab { font-size: 14px; color: var(--muted); text-decoration: none; padding: 8px 16px 10px; border-bottom: 2px solid transparent; } .tab.sub { font-size: 13px; padding: 4px 12px 6px; opacity: .85; } .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .tab.sub.active { font-weight: 600; } .tab:hover { color: var(--ink); } /* 2大ワークのプロジェクト切替バー */ .project-switcher { background: #f5f8fc; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0 16px; } .project-switcher .ps-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .project-switcher .ps-label { font-size: 13px; color: var(--muted); font-weight: 600; } .project-switcher .ps-select { flex: 1 1 200px; min-width: 160px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; background: #fff; } .project-switcher .ps-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 6px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; } .project-switcher .ps-btn:hover { background: #eef3f9; } .project-switcher .ps-btn.ps-danger { color: #b53b3b; border-color: #f0c8c8; } .project-switcher .ps-btn.ps-danger:hover { background: #fbeded; } /* プロジェクト選択画面 */ .project-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .project-list li { margin: 0; } .project-pick { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--ink); } .project-pick:hover { background: #eef3f9; border-color: var(--accent); } .project-pick .project-name { flex: 1; font-weight: 600; } .project-pick .project-arrow { color: var(--muted); font-size: 18px; } .project-pick .badge-main { background: #e9b800; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; } .project-pick .badge-active { background: #2a7d2a; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; } .project-pick.active { border-color: #2a7d2a; background: #f0f8f0; } .project-pick.active:hover { background: #e6f4e6; } .project-item { display: flex; flex-direction: column; gap: 6px; } .project-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 14px; } .project-progress { display: flex; align-items: center; gap: 10px; padding: 0 14px; } .project-progress .progress { flex: 1; } .project-progress-meta { font-size: 12px; color: var(--muted); white-space: nowrap; } /* 新: プロジェクト管理ページのカード（1プロジェクト=1枚に集約） */ .proj-card-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; } .proj-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .proj-card.is-active { border-color: #2a7d2a; background: #f4faf4; } .proj-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .proj-card-name { font-size: 17px; font-weight: 700; color: var(--ink); text-decoration: none; flex: 1; min-width: 0; } .proj-card-name:hover { color: var(--accent); text-decoration: underline; } .proj-card-badges { display: flex; gap: 6px; align-items: center; } .proj-card .badge-main { background: #e9b800; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; } .proj-card .badge-active { background: #2a7d2a; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; } .proj-card-progress { display: flex; align-items: center; gap: 10px; } .proj-card-progress .progress { flex: 1; } .proj-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 6px; border-top: 1px dashed var(--line); } /* 一覧画面の「紐付くプロジェクト」タグ */ .proj-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; background: #f3f4f6; border-radius: 99px; font-size: 12px; color: var(--ink); } .proj-tag-name { font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 直前の要素（生成ボタン等・カード以外）と密着しない最低間隔（2026-08-13 和佐さん実機指摘） */ .card.nextstep { margin-top: 14px; } .nextstep { border: 2px solid var(--accent); background: #fdf8f6; box-shadow: 0 4px 14px rgba(180,84,58,.12); transition: transform .12s ease, box-shadow .12s ease; padding-right: 64px; } .nextstep:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(180,84,58,.2); } .nextstep h2 { color: var(--accent); margin-bottom: 6px; } /* 次のステップカードの矢印は大きく目立たせる */ .card.link.nextstep::after { width: 44px; height: 44px; font-size: 22px; background: var(--accent); color: #fff; box-shadow: 0 3px 8px rgba(180,84,58,.25); right: 16px; bottom: 16px; } .card.link.nextstep:hover::after { background: #9b4730; transform: translateX(6px); } .disabled-next { border: 1px dashed var(--line); background: #f8f7f4; opacity: 0.85; } .disabled-next h2 { margin-bottom: 6px; } /* 診断レポート 履歴一覧 */ .report-history { list-style: none; padding: 0; margin: 8px 0 0; } .report-history li { padding: 8px 12px; border-bottom: 1px solid var(--line); } .report-history li:last-child { border-bottom: none; } .report-history .hist-active { color: var(--accent); } /* 診断レポートの判定バッジ（コンセプト化へ進むカード内） */ .badge.ok-badge { display: inline-block; padding: 4px 12px; border-radius: 14px; background: #e3f3e3; color: #2a7d2a; font-size: 13px; font-weight: 600; } .badge.brush-badge { display: inline-block; padding: 4px 12px; border-radius: 14px; background: #fff4d6; color: #9a6700; font-size: 13px; font-weight: 600; } /* このプロジェクトの軸（コンセプト状態） */ .axis-card { margin: 8px 0 16px; } .axis-card.axis-confirmed { border-left: 4px solid var(--ok); background: #f5fbf5; } .axis-card.axis-confirmed h2 { color: var(--ok); } .axis-card.axis-pending { border-left: 4px solid var(--accent); background: #fdf8f6; } .axis-card.axis-pending h2 { color: var(--accent); } .axis-card.axis-ready { border-left: 4px solid var(--accent); background: #fdf8f6; } .axis-card.axis-ready h2 { color: var(--accent); } .axis-card.axis-locked { border-left: 4px solid var(--line); background: #f8f7f4; } /* シート編集中の軸ストリップ（1行コンパクト） */ .axis-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; margin: 6px 0 14px; background: #f5fbf5; border-left: 4px solid var(--ok); border-radius: 6px; font-size: 14px; } .axis-strip-label { color: var(--muted); font-size: 12px; } .axis-strip-concept { color: var(--ok); } .axis-strip-killer { color: var(--ink); font-size: 13px; } .axis-strip-edit { margin-left: auto; font-size: 12px; color: var(--accent); padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; background: #fff; } .axis-strip-edit:hover { background: var(--accent-soft); } /* シートページ末尾のナビゲーション */ .sheet-footnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 8px; padding: 16px 0; border-top: 1px solid var(--line); flex-wrap: wrap; } /* ボツ案のリスト */ .archive-list { list-style: none; padding: 0; margin: 8px 0 0; } .archive-list li { padding: 8px 10px; margin: 6px 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; } /* コンセプト化のステップナビ（3段階） */ .phase-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 16px; font-size: 14px; } .phase-step { padding: 4px 12px; border-radius: 14px; background: #f0eee6; color: var(--muted); border: 1px solid var(--line); text-decoration: none; } a.phase-step:hover { background: #e8e6dc; } .phase-step.on { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } .phase-step.done { background: #e3f3e3; color: var(--ok); border-color: #c5e3c5; } .phase-step.locked { opacity: 0.55; cursor: not-allowed; } a.phase-step.on:hover { background: var(--accent); } a.phase-step.done:hover { background: #d2ecd2; } .phase-sep { color: var(--muted); } /* コンセプト確定済みの mini カード */ .axis-confirmed-mini { background: #f5fbf5; border-left: 4px solid var(--ok); } .conceptcard { border-top: 1px dashed var(--line); padding: 10px 0; } /* 18案を一覧性高く2列で表示するグリッド */ .concept-words-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; } button.conceptcard { display: flex; flex-direction: column; gap: 8px; align-items: stretch; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .12s ease, background .12s ease, transform .12s ease; } button.conceptcard:hover { border-color: var(--accent); background: #fdf8f6; transform: translateY(-1px); } button.conceptcard .concepttext { font-size: 15px; font-weight: 700; margin: 0; color: var(--ink); } button.conceptcard .concept-pick { font-size: 12px; color: var(--accent); } /* おすすめ案（TOP5）の強調 */ button.conceptcard.recommended { background: #fff8e1; border-color: #e9b800; border-width: 2px; box-shadow: 0 2px 8px rgba(233, 184, 0, 0.18); } button.conceptcard.recommended:hover { background: #fff2cc; } button.conceptcard .rec-badge { display: inline-block; align-self: flex-start; background: #e9b800; color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; } /* フレームの見出し行（再生成ボタン併置） */ .frame-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } /* conceptcard を div ベースに */ .conceptcard { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; transition: border-color .12s ease, background .12s ease; } .conceptcard:hover { border-color: var(--accent); background: #fdf8f6; } .conceptcard.starred { border-color: #2a7d2a; background: #f5fbf5; } .conceptcard.killer-selected { border-color: #d9a900; background: #fffbe6; box-shadow: inset 3px 0 0 #d9a900; } .conceptcard.killer-selected::before { content: "★ 選択中"; display: inline-block; background: #d9a900; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; align-self: flex-start; letter-spacing: 0.05em; } .conceptcard .concepttext { font-size: 15px; font-weight: 700; color: var(--ink); } .conceptcard-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .star-toggle.starred { color: #2a7d2a; border-color: #2a7d2a; } /* 気になる候補エリア */ .starred-card { background: #fafff4; border-left: 4px solid #2a7d2a; } .hybrid-card { background: #f5f8ff; border-left: 4px solid #4a6cd6; } .role-badge { display: inline-block; font-size: 11px; background: #eef1f7; color: #4a6cd6; border: 1px solid #d4dceb; padding: 1px 8px; border-radius: 10px; margin-bottom: 4px; letter-spacing: 0.02em; } .starred-list { display: flex; flex-direction: column; gap: 8px; } .starred-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; } .starred-chip > span { flex: 1; font-weight: 600; } @media (max-width: 640px) { .concept-words-grid { grid-template-columns: 1fr; } } .stepcard { border: 1px solid var(--accent); border-radius: 10px; padding: 16px 20px; margin: 12px 0; background: #fdf8f6; } .stage.locked { opacity: 0.55; } .startform { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; } .brushrow { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; } .brushrow .input { flex: 1; min-width: 220px; } /* 指示欄が複数行（1,000字）のときの見え方（表示/非表示はインライン style で制御している） */ .brushrow textarea.input { align-self: flex-start; resize: vertical; } .startform .input { flex: 1; min-width: 240px; } .publishbox { background: #f0eee6; border: 1px solid var(--line); border-radius: 8px; padding: 16px; font: inherit; font-size: 14px; white-space: pre-wrap; margin: 8px 0; } .stepcard h3 { margin-top: 4px; } .concepttext { font-size: 16px; font-weight: 700; margin: 4px 0; } .subtitle { font-size: 14px; color: var(--muted); margin: 2px 0 6px; } .killerform { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); } .killerform label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; } .killerform .input { margin-bottom: 8px; } .pagefoot { max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; border-top: 1px solid var(--line); text-align: center; font-size: 14px; } .pagefoot a { color: var(--accent); } .tokfoot { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); } /* ABテスト */ .ablabel { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 4px; } .abtext { width: 100%; } .abpxrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; } .abpx { width: 80px; } .abvariant { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 8px; } .abfields { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 720px) { .abfields { grid-template-columns: 1fr 1fr; } } .absnippet { background: #f0eee6; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; overflow-x: auto; white-space: pre; font-family: var(--font-mono, monospace); } .abcodeblock { display: flex; gap: 8px; align-items: stretch; margin: 4px 0 8px; } .abcodeblock .absnippet { flex: 1; margin: 0; } .abcodeblock .abcopycode { white-space: nowrap; flex-shrink: 0; } .abdbg { word-break: break-all; color: var(--accent); } .abprev { border-top: 1px dashed var(--line); padding: 10px 0; } .abprev-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; } .abprev-box { background: #faf9f6; border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .abprev-box .meta { display: block; margin-bottom: 6px; } .abprev-pc { width: 460px; max-width: 100%; font-weight: 700; } .abprev-sp-box .abprev-sp { width: 300px; max-width: 100%; font-weight: 700; } /* ABテスト リッチエディタ */ .abeditor { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 8px 0; background: #fff; } .abtabs { display: flex; gap: 4px; margin-bottom: 8px; } .abtab { font: inherit; font-size: 13px; padding: 6px 16px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px 8px 0 0; cursor: pointer; color: var(--muted); } .abtab.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } .abtoolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px; background: var(--bg); border-radius: 8px; margin-bottom: 8px; } .abtool, .abeffect { font: inherit; font-size: 13px; min-width: 30px; padding: 4px 8px; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; } .abtool:hover, .abeffect:hover { border-color: var(--accent); } .abtool-grp { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); } .abswatch, .abmark { width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; padding: 0; } .abmark-bar { width: auto; min-width: 26px; background: #fff !important; font-size: 13px; line-height: 1; } .abcolor { width: 28px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; background: #fff; } .absize, .abfont, .ablsp, .ablh, .abemoji, .abspw, .abeffcolor, .abbg { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #d8d2c4; border-radius: 6px; background: #fff; } .abstages { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .abstage { flex: 1; min-width: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; } .abstage.on { border-color: var(--accent); border-width: 2px; background: #fffaf0; } .abstage.done { opacity: 0.6; } .abstage-h { font-weight: 700; margin-bottom: 2px; } .abdialog { width: min(960px, 94vw); max-height: 90vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); } .abdialog::backdrop { background: rgba(0,0,0,0.45); } .abdialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .absuggest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; font-size: 13px; color: var(--muted, #6b6b6b); } .abchip { font-size: 13px; padding: 5px 11px; border: 1px solid #d8d2c4; border-radius: 999px; background: #fff; cursor: pointer; line-height: 1.3; } .abchip:hover { border-color: var(--accent); } .abchip.on { background: var(--accent); color: #fff; border-color: var(--accent); } .absizecustom { display: inline-flex; align-items: center; gap: 4px; } .absizenum { width: 56px; font-size: 13px; padding: 4px 6px; border: 1px solid #d8d2c4; border-radius: 6px; background: #fff; } .absizego { padding: 4px 8px; font-size: 12px; } .abregen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .abregen-dir { flex: 1; min-width: 240px; } .abapplyrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; } .abapply-btn { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; } .abapply-btn:hover { background: var(--accent); color: #fff; } .abeditfoot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; } .abeditfoot .note { margin: 0; } .abcount { font-weight: 700; color: var(--ink); } /* PC=1000px相当の編集幅を正確に出すため、枠は横スクロール可能（画面が狭いときだけスクロール） */ .abeditwrap { overflow-x: auto; max-width: 100%; border-radius: 8px; } .abedit { min-height: 500px; border: 1px solid #d8d2c4; border-left: 3px solid var(--accent); border-radius: 8px; padding: 16px; background: #fff; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 1.35; outline: none; overflow-wrap: anywhere; overflow-y: auto; box-sizing: border-box; } .abedit:focus { outline: 2px solid var(--accent); border-color: transparent; } .abwidthnote { margin-top: 4px; } .editpane { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 900px) { .editpane { grid-template-columns: 3fr 2fr; } } /* ゲート内（dev）: 右カラムのチャットを出さない面はエディタ全幅（2026-08-13） */ @media (min-width: 900px) { .editpane.single { grid-template-columns: 1fr; } } .editright { border-left: 1px solid var(--line); padding-left: 16px; } @media (max-width: 899px) { .editright { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } } .reviewsplit { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 900px) { .reviewsplit { grid-template-columns: 1fr 1fr; } } .fixcol { border-left: 1px solid var(--line); padding-left: 16px; } @media (max-width: 899px) { .fixcol { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; } } .editright .chatlog { max-height: 480px; overflow-y: auto; } .editright .msg { max-width: 100%; font-size: 13px; } .fixcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 10px 0; } .fixbefore { background: #fdecec; border-radius: 6px; padding: 8px 12px; font-size: 13px; text-decoration: line-through; color: #8a4a44; white-space: pre-wrap; } .fixafter { background: #eaf3ea; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #3e6347; white-space: pre-wrap; } .aiorig { max-height: 560px; overflow-y: auto; font-size: 13px; color: var(--muted); } /* 編集できないエリア: グレー地（表示専用の印）。左のアクセントラインも消す */ textarea[readonly] { background: #f0eee6; color: #5a584f; border-left: 1px solid var(--line); } .stepper { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 20px; } .step { font-size: 13px; padding: 4px 14px; border-radius: 99px; border: 1px solid var(--line); text-decoration: none; color: var(--muted); background: var(--card); white-space: nowrap; } .step.done { color: var(--ok); border-color: #b5cbbd; } .step.current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } a.step:hover { border-color: var(--accent); } .step.locked { opacity: 0.45; } .refcard { padding: 10px 20px; } .refbox summary { cursor: pointer; font-size: 13px; color: var(--accent); padding: 4px 0; } .refpre { max-height: 320px; overflow-y: auto; font-size: 13px; color: #5a584f; } .lockbanner { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; } .stepnav { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); justify-content: flex-end; } .introopt { background: #f0eee6; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; font-size: 14px; white-space: pre-wrap; margin: 4px 0; } .conceptcard.recommended { background: #fdf8f6; border-left: 3px solid var(--accent); padding-left: 12px; } .reviewpane { max-height: 75vh; overflow-y: auto; margin-top: 8px; } /* 管理画面の左サイドバー */ .adminwrap { display: flex; align-items: flex-start; } .sidebar { width: 190px; min-width: 170px; background: var(--card); border-right: 1px solid var(--line); min-height: calc(100vh - 49px); padding: 16px 0; position: sticky; top: 0; } .sidebar a { display: block; padding: 10px 20px; color: var(--muted); text-decoration: none; font-size: 13px; border-left: 3px solid transparent; } .sidebar a:hover { color: var(--ink); background: var(--bg); } .sidebar a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); font-weight: 600; } .adminmain { flex: 1; max-width: 1100px; padding: 18px 22px 80px; min-width: 0; } @media (max-width: 760px) { .adminwrap { flex-direction: column; } .sidebar { width: 100%; min-height: auto; display: flex; overflow-x: auto; padding: 0; position: static; border-right: none; border-bottom: 1px solid var(--line); } .sidebar a { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; } .sidebar a.active { border-bottom-color: var(--accent); } } /* ダッシュボードKPI・ミニファネル */ .cards.kpi4 { grid-template-columns: 1fr 1fr; } @media (min-width: 900px) { .cards.kpi4 { grid-template-columns: repeat(4, 1fr); } } .funnelbar { display: flex; gap: 8px; flex-wrap: wrap; } .funnelcell { flex: 1; min-width: 90px; text-align: center; background: var(--bg); border-radius: 8px; padding: 8px 4px; } .funnelcell .big { margin: 0; font-size: 22px; } /* LP構成案のサブヘッド・チェックボックス（ハイブリッド構成） */ .subcheck { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; cursor: pointer; background: #fff; } .subcheck:hover { border-color: var(--accent); } .subcheck.checked { border-color: var(--accent); background: var(--accent-soft); } /* 🔴 2026-08-17: ドックに入っている案は**薄いブルー**で区別（デザインCの pale/soft-line）。 ⚠️ .checked（旧チェックボックス方式）とは別クラス＝どちらの経路でも見分けが付く。 */ .subcheck.picked { background: #F3F8FD; border-color: #85B7EB; } .subcheck.picked:hover { border-color: var(--accent); } .subcheck input { margin-top: 4px; } .subcheck .checknum { min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: transparent; } .subcheck.checked .checknum { background: var(--accent); } .subcheck-body { display: flex; flex-direction: column; gap: 2px; } .subcheck-head { font-weight: 600; font-size: 14px; } .subcheck-role { font-size: 12px; color: var(--muted); } .composebar { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px; background: var(--bg); border-radius: 8px; position: sticky; bottom: 8px; } /* サブヘッドごとの編集カード（LP Stage 5 構成添削） */ .subhead-editor { display: flex; flex-direction: column; gap: 10px; } .subhead-cards { display: flex; flex-direction: column; gap: 10px; } .subhead-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; } .subhead-card-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .subhead-num { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: 99px; white-space: nowrap; } .subhead-card .subhead-head { flex: 1; min-width: 200px; font-weight: 600; font-size: 15px; } .subhead-card-btns { display: flex; gap: 4px; } .subhead-card-btns .btn.small { padding: 4px 8px; font-size: 12px; } .subhead-card .subhead-body { width: 100%; box-sizing: border-box; font-size: 13px; color: var(--ink); resize: vertical; } .subhead-add-row { display: flex; justify-content: flex-start; padding: 4px 0; } .subhead-card.dragging { opacity: 0.5; } /* 完全ヘッドコピー Stage 2-2: 5フック型を並列表示するカード */ .typecard { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: #fff; display: flex; flex-direction: column; gap: 10px; } .typecard-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .typecard-label { font-weight: 800; font-size: 20px; color: var(--accent); background: var(--accent-soft); padding: 6px 14px; border-radius: 10px; white-space: nowrap; letter-spacing: 0.02em; } .typecard-tip { font-size: 13px; color: var(--muted); } .typecard-empty { color: var(--muted); margin: 0; padding: 8px 0; font-style: italic; } .typecard-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .typecard-select { display: flex; padding-bottom: 8px; border-bottom: 1px dashed var(--line); } .typecard-regen { display: flex; flex-direction: column; gap: 6px; } .typecard-regen-label { margin: 0; font-size: 12px; color: var(--muted); } .typecard-regen .brushrow { margin: 0; } /* 和佐個人キーワード警告バナー */ .wasa-leak-banner { background: #fff5f0; border: 1px solid #ff9966; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; } .wasa-leak-banner strong { color: #c0432a; font-size: 14px; } .wasa-leak-keys { font-size: 13px; color: #b85a3b; } .wasa-leak-note { font-size: 12px; color: var(--muted); } .wasa-leak-banner .btn { align-self: flex-start; } /* ボディ1案の上に表示する確定済みサブヘッド1見出し（表示専用） */ .subhead1label { font-weight: 700; font-size: 15px; color: var(--accent); margin: 6px 0 4px; padding-left: 8px; border-left: 3px solid var(--accent); } /* ボディ1案の下に表示する次のサブヘッド2見出し（繋ぎの確認用・表示専用） */ .subhead2label { font-size: 13px; color: #4a6785; margin: 6px 0 4px; padding-left: 8px; border-left: 3px dashed #4a6785; } /* ホームのお知らせ行 */ .newsrow { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); } .newsrow:first-of-type { border-top: none; } .newsrow:hover .newstitle { color: var(--accent); } .newsrow .meta { min-width: 110px; flex-shrink: 0; } .newstitle { font-weight: 600; } /* ───────── スマホ最適化 ───────── */ /* 長いURL・英数字の連続でも横にはみ出さないよう、文字列を折り返す（全幅共通） */ .publishbox, .introopt, .msg, .report, .newstitle, .threadlink, .fixbefore, .fixafter, .refpre { overflow-wrap: anywhere; } /* トップバーは要素が収まらなければ折り返す（ボタンが画面外に切れないように） */ .topbar { flex-wrap: wrap; gap: 4px 12px; } @media (max-width: 640px) { main { padding: 16px 14px 64px; } .adminmain { padding: 16px 14px 64px; } .card { padding: 16px; } h1 { font-size: 21px; margin: 12px 0; } h2 { font-size: 16px; } .big { font-size: 24px; } /* iOSで入力欄をタップしたとき勝手に拡大しないよう16px以上に（テキスト入力が多いアプリなので重要） */ textarea, .input { font-size: 16px; } /* トップバー: メールアドレスは省略してボタンを優先（自分のアドレスは自明なので隠す） */ .topbar { padding: 10px 14px; } .useremail { display: none; } .userbox { font-size: 12px; gap: 10px; } /* チャットの吹き出しを少し広げる */ .msg { max-width: 92%; } /* タブの文字を少し詰める */ .tab { padding: 8px 12px 10px; font-size: 13px; } /* 横長テーブルは、はみ出さずに横スクロール（管理画面・会員画面の両方）。 2026-08-09: 会員側（ファネル/シミュレーター等）でも同じ崩れが出ていたため .adminmain 限定を解除。 個別に
で包む方式は取らない（同じ処理が散らばるため）。 */ table.limits { display: block; overflow-x: auto; white-space: nowrap; } } /* 記事一覧: プロジェクト種別の色分け */ .article-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } /* 列は「タグ｜タイトル｜状態meta｜複製｜削除」の5つ（規約10の行構成）。 4列のままだと5つ目＝削除ボタンだけが次の行に落ちて折り返して見える（2026-08-11 修正）。 タイトル列は minmax(0,1fr) にする（長いタイトルで行全体が横に伸びるのを防ぐ）。 */ .article-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; } .article-row > form { white-space: nowrap; } .article-row.is-premised { border-left: 4px solid #2a7d2a; background: #fafff4; } .article-row.is-none { border-left: 4px solid #777; background: #fafafa; } .article-row .article-title { font-weight: 600; color: var(--ink); text-decoration: none; } .article-row .article-title:hover { text-decoration: underline; } .article-row .article-meta { font-size: 12px; } .ap-pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 8px; border-radius: 10px; border: 1px solid; white-space: nowrap; } .ap-pill-work { background: #e6f4e6; color: #2a7d2a; border-color: #c5e3c5; } .ap-pill-none { background: #efefef; color: #555; border-color: #dadada; } @media (max-width: 640px) { .article-row { grid-template-columns: 1fr; row-gap: 4px; } } /* 再生成系ボタン（決定系の primary とは別の色で識別） */ .btn.regen { background: #f0f4ff; color: #3955b8; border-color: #b8c4e8; } .btn.regen:hover { background: #e0e8ff; border-color: #95a8d8; } .btn.regen:disabled { background: #f4f4f4; color: #aaa; border-color: #ddd; cursor: not-allowed; } /* 記事プロジェクト一覧（記事執筆ページ上部） */ .ap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .ap-list-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; } .ap-list-row.is-premised { border-left: 4px solid #2a7d2a; } .ap-list-row.is-none { border-left: 4px solid #777; } .ap-settings-link { text-decoration: none; font-size: 14px; margin-left: 4px; color: var(--muted); } .ap-settings-link:hover { color: var(--accent); } /* 採用ボタン: primary より控えめに（緑系で「これに決める」を示す） */ .btn.pick { background: #f0f8f3; color: #2a7d2a; border-color: #c5e3c5; font-weight: 600; } .btn.pick:hover { background: #e3f3e3; border-color: #95c895; } .btn.pick:disabled { background: #f4f4f4; color: #aaa; border-color: #ddd; cursor: not-allowed; } /* 記事執筆フローの全ステップ表示 */ .flow-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 10px 0 16px; padding: 8px 12px; background: #f5f8fc; border: 1px solid #d4e0f0; border-radius: 8px; font-size: 12px; } .flow-step { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--muted); } .flow-step-num { font-weight: 700; font-size: 11px; } .flow-step-label { font-size: 12px; } .flow-step.on { background: var(--accent); color: #fff; border-color: var(--accent); } .flow-step.done { background: #e3f3e3; color: var(--ok); border-color: #c5e3c5; } .flow-step-sep { color: #b8c4dc; font-size: 12px; } .flow-remaining { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; } @media (max-width: 640px) { .flow-steps { font-size: 11px; } .flow-step-label { display: none; } .flow-step { padding: 2px 6px; } } /* ステップ内のサブステップ表示（2-1 メイン → 2-2 サブ など） */ .substepper { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 12px; background: #fff9ef; border: 1px solid #e9d8a0; border-radius: 8px; font-size: 13px; } .substep { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--line); color: var(--muted); } .substep.current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } .substep.done { background: #e3f3e3; color: var(--ok); border-color: #c5e3c5; } .substep.locked { opacity: 0.5; } .substep-sep { color: #b88a30; } /* 構成手動添削: H2 ごとのカード式エディタ */ .outline-editor { display: flex; flex-direction: column; gap: 8px; } .outline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .outline-row { padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; gap: 4px; } .outline-row-head { display: flex; justify-content: space-between; align-items: center; } .outline-num { font-weight: 700; font-size: 13px; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 10px; } .outline-row-actions { display: inline-flex; gap: 4px; } .outline-row-actions .btn.small { padding: 2px 8px; font-size: 12px; } .outline-field-label { display: block; font-size: 12px; font-weight: 600; color: #555; margin: 6px 0 2px; } .outline-hint { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 4px; } /* 1行から始まり、内容に応じて自動で広がる textarea（構成カードの見出し・役割など） */ .outline-autosize { field-sizing: content; min-height: 1.6em; line-height: 1.5; padding: 8px 10px; resize: none; overflow: hidden; } /* 構成添削出口の「分割／一括」2択ボタン（横並び・同サイズ） */ .advance-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .advance-twin form { margin: 0; } .advance-twin .advance-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 64px; padding: 12px 14px; font-size: 14px; font-weight: 600; line-height: 1.4; border-radius: 10px; } .advance-twin .advance-btn .advance-sub { display: block; font-size: 11px; font-weight: 400; opacity: 0.85; margin-top: 4px; } @media (max-width: 540px) { .advance-twin { grid-template-columns: 1fr; } } /* タスク詳細AI生成の進行表示 */ @keyframes ftm-spin { to { transform: rotate(360deg); } } /* タスク計画・モジュール生成のスピナー（インライン style から参照される共通 keyframes） */ @keyframes plan-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .detail-regen-overlay { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.88); display: flex; align-items: center; justify-content: center; border-radius: 6px; z-index: 5; } .detail-regen-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 28px; background: #FFFFFF; border: 1px solid #E5D8BC; border-radius: 8px; box-shadow: 0 4px 14px rgba(133, 79, 11, 0.12); } .detail-regen-spinner { width: 28px; height: 28px; border: 3px solid #F0E5CC; border-top-color: #D17B00; border-radius: 50%; animation: ftm-spin 0.9s linear infinite; } .detail-regen-text { font-size: 13px; font-weight: 600; color: #854F0B; text-align: center; line-height: 1.6; } .btn-loading { position: relative; opacity: 0.7; cursor: wait !important; } .btn-loading::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ftm-spin 0.8s linear infinite; vertical-align: -1px; } /* タスク詳細 Markdown 表示の整形 */ .task-detail-md h1, .task-detail-md h2, .task-detail-md h3, .task-detail-md h4 { color: #854F0B; margin: 16px 0 6px; line-height: 1.4; } .task-detail-md h1 { font-size: 17px; border-bottom: 2px solid #E5D8BC; padding-bottom: 4px; } .task-detail-md h2 { font-size: 15px; border-bottom: 1px solid #E5D8BC; padding-bottom: 3px; } .task-detail-md h3 { font-size: 14px; } .task-detail-md h4 { font-size: 13px; color: #6b4309; } .task-detail-md > *:first-child { margin-top: 0; } .task-detail-md p { margin: 6px 0; } .task-detail-md ul, .task-detail-md ol { margin: 6px 0 10px; padding-left: 22px; } .task-detail-md li { margin: 3px 0; } .task-detail-md li > p { margin: 2px 0; } .task-detail-md strong { color: #4a2c00; font-weight: 700; } .task-detail-md em { color: #6b4309; } .task-detail-md a { color: #D17B00; text-decoration: underline; } .task-detail-md code { background: #FFF5E1; border: 1px solid #F0E5CC; padding: 1px 6px; border-radius: 3px; font-size: 12px; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; color: #854F0B; word-break: break-all; } .task-detail-md pre { background: #FAFAF8; border: 1px solid #E5D8BC; border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 8px 0; font-size: 12px; line-height: 1.6; } .task-detail-md pre code { background: transparent; border: none; padding: 0; color: #2b2b2b; white-space: pre; } /* コードブロックのコピーボタン（タスク詳細・UTAGE MCP接続マニュアル等） */ .codeblock-wrap { position: relative; margin: 8px 0; } .codeblock-wrap pre { margin: 0; padding-right: 90px; /* コピーボタンの分の余白 */ } .codeblock-copy { position: absolute; top: 6px; right: 6px; background: #FFFFFF; border: 1px solid #D17B00; color: #854F0B; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: -apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', 'Yu Gothic', sans-serif; line-height: 1.2; z-index: 2; transition: background 0.15s, color 0.15s, border-color 0.15s; } .codeblock-copy:hover { background: #FFF5E1; } .codeblock-copy.copied { background: #2ecc71; color: #ffffff; border-color: #27ae60; } .task-detail-md blockquote { border-left: 3px solid #D17B00; background: #FFF8EC; margin: 8px 0; padding: 6px 12px; color: #5a3a06; border-radius: 0 4px 4px 0; } .task-detail-md hr { border: none; border-top: 1px dashed #E5D8BC; margin: 14px 0; } .task-detail-md input[type="checkbox"] { margin-right: 6px; } .task-detail-md table { border-collapse: collapse; margin: 8px 0; font-size: 12px; } .task-detail-md th, .task-detail-md td { border: 1px solid #E5D8BC; padding: 4px 8px; text-align: left; } .task-detail-md th { background: #FFF5E1; } /* 和佐大輔の宝物庫: 4 階層の展開ツリー */ .treasure-toggle > summary { cursor: pointer; user-select: none; list-style: none; padding: 4px 0; display: flex; align-items: center; gap: 8px; } .treasure-toggle > summary::-webkit-details-marker { display: none; } .treasure-toggle > summary::before { content: '▶'; font-size: 0.7em; color: #999; transition: transform 0.15s ease; display: inline-block; flex-shrink: 0; } .treasure-toggle[open] > summary::before { transform: rotate(90deg); color: var(--accent); } .treasure-toggle > summary:hover { color: var(--accent); } /* L1 = モジュール（カード全体、最も目立つ） */ .treasure-l1 > summary { font-size: 17px; font-weight: 700; color: #854F0B; padding: 2px 0; } /* L2-L4 共通: 薄いグレー左ボーダー + インデント。装飾は控えめ、階層差はテキストの太さで */ .treasure-l2, .treasure-l3, .treasure-l4 { padding: 2px 0 2px 12px; border-left: 1px solid #E5E5E5; } .treasure-l2 { margin: 10px 0 10px 0; } .treasure-l3 { margin: 6px 0 6px 14px; } .treasure-l4 { margin: 3px 0 3px 28px; } .treasure-l2 > summary { font-size: 14px; font-weight: 700; color: #1A1A1A; } .treasure-l3 > summary { font-size: 13px; font-weight: 600; color: #555; } .treasure-l4 > summary { font-size: 13px; font-weight: 400; color: #333; } /* ══════════════════════════════════════════════════════════ デザインC 統合テーマ（2026-07-03 カラー整理版・正典: docs/design_c_tokens.md） dev限定: body.sidenav-mode / body.theme-c は SHOW_DEV_FEATURES 時のみ付与＝本番は従来デザイン。 使う色相は4つだけ: 墨 #26251F #2E2C25 #3D3B33 / 文字 #2C2C2A #5F5E5A #888780 #B4B2A9 / 線 #EDEAE2 #DAD6CA / 面 #FDFCFA #F6F4EE #FFF ブルー #12293F #185FA5 #2470BD #378ADD #85B7EB #E6F1FB (#F3F8FD=次の一歩の薄地) イエロー淡 #FFF9EE #F5DDAE #8A6D1B（注意のみ・実地茶色は禁止） レッド #A32D2D #FCEBEB（危険・削除のみ） ══════════════════════════════════════════════════════════ */ /* ── サイドバーレイアウト ── */ /* サイドバー幅は1変数に集約（畳む・ドックの左端・本文マージンが全部これを見る） */ /* ⚠️ padding-left / left に transition を付けない。値が var() 由来だと Chrome はアニメーションせず **古い値のまま固まる**（2026-08-11 実測: --sidenav-w=0 なのに padding-left=212px のまま）。 動きはサイドバー自身の transform だけで付ける。 */ body.sidenav-mode { --sidenav-w: 212px; padding-left: var(--sidenav-w); } body.sidenav-mode.sidenav-collapsed { --sidenav-w: 0px; } body.sidenav-mode .tabbar { position: fixed; left: 0; top: 0; bottom: 0; width: 212px; box-sizing: border-box; transition: transform .18s ease; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 16px; background: #26251F; border-right: 1px solid #3D3B33; border-bottom: none; overflow-y: auto; z-index: 40; } body.sidenav-mode .tabrow { display: flex; flex-direction: column; gap: 2px; border: none; padding: 0; margin: 0; background: transparent; overflow: visible; flex: none; white-space: normal; } body.sidenav-mode .tabrow.sub { margin-top: 0; padding-top: 0; border-top: none; } body.sidenav-mode .tab { display: block; padding: 8px 12px 8px 34px; border-radius: 8px; font-size: 13.5px; border: none; background: transparent; text-align: left; color: #B4B2A9; white-space: normal; line-height: 1.4; word-break: break-word; text-indent: -22px; /* アイコン分のぶら下げインデント: 長いラベルは2行になり、折り返しはラベル頭で揃う */ } body.sidenav-mode .tab:hover { background: #2E2C25; color: #EDEAE2; } body.sidenav-mode .tab.active { background: #12293F; color: #85B7EB; font-weight: 600; } body.sidenav-mode .side-brand { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #EDEAE2; text-decoration: none; padding: 6px 10px 10px; } body.sidenav-mode .nav-sec { font-size: 10px; color: #888780; letter-spacing: 0.08em; margin: 12px 10px 4px; } body.sidenav-mode .nav-foot { margin-top: auto; padding: 14px 10px 4px; } body.sidenav-mode .side-tok-track { height: 4px; background: #3D3B33; border-radius: 2px; } body.sidenav-mode .side-tok-bar { height: 4px; width: 0; background: #378ADD; border-radius: 2px; transition: width 0.6s ease; } body.sidenav-mode .side-tok-label { display: block; font-size: 10px; color: #888780; margin-top: 5px; } body.sidenav-mode .topbar { display: flex; align-items: center; justify-content: flex-end; position: relative; z-index: 50; } body.sidenav-mode .topbar .brand { display: none; } body.sidenav-mode .topbar .userbox { margin-left: auto; } /* ハンバーガー・ホーム・バックドロップは既定（PC幅）では非表示。スマホでだけ有効化 */ .nav-toggle { display: none; } .nav-home { display: none; } .nav-backdrop { display: none; } @media (max-width: 840px) { /* スマホ: サイドバーはハンバーガー(☰)で開閉するドロワー。ホーム(🏠)はドロワー外＝トップバーに常駐 */ body.sidenav-mode { --sidenav-w: 0px; padding-left: 0; } body.sidenav-mode .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 8px; padding: 0; border: 1px solid #DAD6CA; border-radius: 8px; background: #FFF; color: #2C2C2A; font-size: 18px; line-height: 1; cursor: pointer; } body.sidenav-mode .nav-home { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #DAD6CA; border-radius: 8px; background: #FFF; color: #2C2C2A; font-size: 17px; line-height: 1; text-decoration: none; } body.sidenav-mode .nav-home.active { border-color: #85B7EB; background: #E6F1FB; } body.sidenav-mode .tabbar { width: 244px; max-width: 82vw; z-index: 60; transform: translateX(-100%); transition: transform 0.24s ease; } body.sidenav-mode.nav-open .tabbar { transform: translateX(0); box-shadow: 4px 0 26px rgba(0,0,0,0.30); } body.sidenav-mode.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.42); z-index: 55; } } /* ── テーマ変数（旧アクセントを使う全要素が一括で切替わる）── */ body.theme-c { background: #FDFCFA; color: #2C2C2A; --bg: #FDFCFA; --ink: #2C2C2A; --card: #FFF; --line: #EDEAE2; --muted: #888780; --accent: #185FA5; --accent-soft: #E6F1FB; } body.theme-c .topbar { background: #FDFCFA; border-bottom: 1px solid #EDEAE2; } /* ── タイポグラフィ ── */ body.theme-c main { padding: 24px 24px 80px; } body.theme-c h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 14px 0 12px; } body.theme-c h2 { font-size: 16px; font-weight: 700; } body.theme-c h3 { color: #185FA5; } body.theme-c .guide { background: #F6F4EE; color: #5F5E5A; border-radius: 10px; padding: 14px 18px; font-size: 13.5px; line-height: 1.9; } body.theme-c .meta, body.theme-c .note { color: #888780; } body.theme-c .linklike { color: #185FA5; } body.theme-c .pagefoot { color: #B4B2A9; } /* ── カード・一覧・テーブル ── */ body.theme-c .card { border-color: #EDEAE2; border-radius: 12px; padding: 16px 20px; margin-bottom: 16px; } body.theme-c .card.link:hover { border-color: #85B7EB; } body.theme-c .article-row { border-radius: 10px; padding: 12px 14px; border-color: #EDEAE2; } body.theme-c .article-row:hover { background: #F6F4EE; border-color: #DAD6CA; } body.theme-c .article-row.is-premised { border-left: 3px solid #378ADD; background: #FFF; } body.theme-c .article-row.is-none { border-left: 3px solid #B4B2A9; background: #FFF; } body.theme-c table.limits th { font-size: 12px; color: #888780; font-weight: 600; } body.theme-c table.limits td, body.theme-c table.limits th { padding: 8px 10px; border-bottom: 1px solid #EDEAE2; } /* ── ボタン（本文側に黒背景・茶色は禁止）── */ body.theme-c .btn { border-radius: 8px; border: 1px solid #DAD6CA; background: #FFF; color: #5F5E5A; } body.theme-c .btn:hover { background: #F6F4EE; } body.theme-c .btn.ghost { background: transparent; border-color: #DAD6CA; color: #5F5E5A; } body.theme-c .btn.ghost:hover { background: #F6F4EE; } body.theme-c .btn.primary, body.theme-c .btn.small.primary { background: #378ADD; border-color: #378ADD; color: #FFF; } body.theme-c .btn.primary:hover, body.theme-c .btn.small.primary:hover { background: #2470BD; border-color: #2470BD; } /* ── バッジ（黒地禁止・ピル型）── */ body.theme-c .badge { border-radius: 999px; } body.theme-c .badge.self { background: #FFF; color: #185FA5; border: 1px solid #85B7EB; } body.theme-c .badge.ai { background: #FFF; color: #5F5E5A; border: 1px solid #DAD6CA; } body.theme-c .badge.warn, body.theme-c .badge.brush-badge { background: #FFF9EE; color: #8A6D1B; border: 1px solid #F5DDAE; } body.theme-c .badge.danger { background: #FCEBEB; color: #A32D2D; border: none; } body.theme-c .badge.ok-badge { background: #E6F1FB; color: #185FA5; border: none; } /* ── ステッパー ── */ body.theme-c .stepper .step { background: #F6F4EE; color: #888780; border: none; border-radius: 999px; } body.theme-c .stepper .step.current { background: #378ADD; color: #FFF; font-weight: 600; } body.theme-c .stepper .step.done { background: #E6F1FB; color: #185FA5; } body.theme-c .stepper .step.locked { background: #F6F4EE; color: #B4B2A9; } body.theme-c a.step:hover { background: #EDEAE2; } /* ── フォーム・通知・チップ ── */ body.theme-c .input { border-color: #DAD6CA; border-radius: 8px; } body.theme-c .input:focus { border-color: #378ADD; box-shadow: 0 0 0 3px #E6F1FB; outline: none; } body.theme-c .notice { background: #E6F1FB; color: #185FA5; border-radius: 8px; } body.theme-c .error { color: #A32D2D; } body.theme-c .proj-tag { background: #F6F4EE; color: #5F5E5A; border: none; border-radius: 999px; } /* ── スマホ最適化（Design C・≤640px。デスクトップ無影響）── */ @media (max-width: 640px) { /* 本文の余白を詰めて横幅を活かす（26px→14px） */ body.theme-c main { padding: 16px 14px 72px; } body.theme-c h1 { font-size: 22px; margin: 8px 0 12px; } body.theme-c h2 { font-size: 16px; } body.theme-c .card { padding: 16px 15px; margin-bottom: 14px; border-radius: 10px; } body.theme-c .guide { padding: 12px 14px; font-size: 13px; line-height: 1.85; } /* iOSのフォーカス時オートズーム防止（入力欄は16px以上にする） */ body.theme-c textarea, body.theme-c .input { font-size: 16px; } /* 横はみ出しの保険: 長いURL・コード・表がページごと横スクロールしないように */ body.theme-c pre { max-width: 100%; overflow-x: auto; } body.theme-c .card, body.theme-c .article-title { overflow-wrap: break-word; } body.theme-c table { display: block; max-width: 100%; overflow-x: auto; } /* ステッパーはやや小さく */ body.theme-c .stepper { gap: 4px; } body.theme-c .stepper .step { font-size: 12px; padding: 5px 10px; } } /* ───────────── 壁打ち相談パネル（ConsultPanel・AI壁打ち全面統一の共通部品） ───────────── src/views/bootcamp.tsx の .bc-consult インラインstyleを移植（bootcamp側の既存コードは今回は書き換えない）。 色は Design C の CSS 変数（--accent/--muted/--ink/--line）を利用。配線は public/app.js。 */ .consult { margin-top: 14px; border: 1px solid #D3E3F5; background: #F4F9FE; border-radius: 10px; padding: 11px 13px; } .consult-hd { font-size: 12px; font-weight: 700; color: var(--accent); margin-bottom: 8px; } .consult-note { font-weight: 400; font-size: 10.5px; color: var(--muted); } .consult-log { display: flex; flex-direction: column; gap: 7px; max-height: 340px; overflow-y: auto; margin-bottom: 9px; } .consult-empty { font-size: 12px; color: var(--muted); line-height: 1.55; margin: 2px 0; background: #fff; border: 1px dashed var(--line); border-radius: 8px; padding: 9px 11px; } .consult-msg { font-size: 13px; line-height: 1.65; border-radius: 9px; padding: 8px 11px; white-space: pre-wrap; word-break: break-word; max-width: 92%; } .consult-msg.user { align-self: flex-end; background: #EDF4FC; color: var(--ink); border: 1px solid #D3E3F5; } .consult-msg.ai { align-self: flex-start; background: #fff; color: var(--ink); border: 1px solid var(--line); } .consult-msg.err { align-self: flex-start; background: #FDF0EE; color: #A32D2D; border: 1px solid var(--line); } .consult-inrow { display: flex; gap: 7px; align-items: flex-end; } .consult-input { flex: 1; min-height: 46px; resize: vertical; font-size: 13px; } .consult-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .consult-hint { font-size: 11px; } .consult-clear { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 11px; cursor: pointer; font-family: inherit; text-decoration: underline; } .consult-clear:hover { color: #A32D2D; } .consult-clear:disabled { opacity: .5; cursor: default; } /* ───────────── ステップ内ステップのサブナビ（SubStepNav・docs/step_spec.md §5） ───────────── */ .substep-nav { display: flex; gap: 0; margin: 18px 0 20px; border-bottom: 2px solid var(--line); flex-wrap: wrap; } .substep-tab { border: none; background: none; padding: 9px 18px 10px; font-size: 14.5px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: inherit; } .substep-tab.on { color: #185FA5; font-weight: 700; border-bottom-color: #185FA5; } .substep-tab:focus-visible { outline: 2px solid #378ADD; outline-offset: -2px; } /* リンク型サブナビ（SubStepLinks・別々のSSRページを行き来する機能用）。上の定義は1文字も変えない＝追記のみ */ a.substep-tab { text-decoration: none; } .substep-tab.locked { opacity: .5; cursor: not-allowed; } /* ───────────── 壁打ちドック（ConsultDock・下部固定＋折りたたみ） ───────────── */ .consult-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; pointer-events: none; } .consult-dock-inner { max-width: 1040px; margin: 0 auto; padding: 0 16px; pointer-events: auto; } .consult-dockbar { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #185FA5; color: #fff; border: none; border-radius: 12px 12px 0 0; padding: 10px 18px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 -3px 16px rgba(20, 50, 90, .25); } /* ダブルドック（2026-08-13 和佐さん承認モック）: バーは横並び・開くのは常に一方だけ・閉じている側は薄く。 バーが1本だけの面は .single が付く＝従来と同じ全幅の1本バーに見える（見た目を変えない）。 */ .dock-bars { display: flex; gap: 8px; align-items: stretch; } /* バーのキー識別クラス .consult が旧インライン相談ボックスの `.consult{margin-top:14px…}` を拾い、 青バーだけ14px押し下げられて下辺がズレていた（2026-08-13 実機実測で特定）。行内のバーはマージン0で統一 */ .dock-bars .consult-dockbar { flex: 1; min-width: 0; border-radius: 10px 10px 0 0; margin: 0; } .dock-bars.single .consult-dockbar { border-radius: 12px 12px 0 0; } /* 2本並ぶときは**必ず同じ高さ**にする（2026-08-13 和佐さん実機報告: 左の壁打ちバーだけ低く見えた）。 原因は中身（件数バッジの文言・絵文字・字種）で行の高さが変わること。stretch だけでは 「高いほうに揃う」ので、字種で1〜2px 揺れる。padding・font-size・line-height を両バーで同値に固定し、 さらに min-height で下限を切る＝中身が何であっても上辺・底辺が揃う。 1本バーの面（.single）は従来の見た目のまま＝この規則を当てない。 */ .dock-bars:not(.single) .consult-dockbar { /* min-height だと中身（「はじめる」ピル等）で高い側に引っ張られて揃わない（2026-08-13 実機で再発）。 固定 height ＋ overflow hidden で「中身が何であっても同じ高さ」を構造で保証する */ padding: 0 14px; font-size: 13px; line-height: 1.4; height: 46px; box-sizing: border-box; align-items: center; overflow: hidden; } .dock-bars:not(.single) .consult-dock-count { line-height: 18px; height: 22px; display: inline-flex; align-items: center; } .dock-bars:not(.single) .consult-dock-title, .dock-bars:not(.single) .consult-dock-count, .dock-bars:not(.single) .consult-dock-preview, .dock-bars:not(.single) .consult-dock-arrow { line-height: 18px; } .dock-bars:not(.single) .consult-dock-count { padding: 2px 9px; font-size: 12px; } .dock-bars:not(.single) .consult-dock-arrow { font-size: 12px; } /* 表題が長い面（「📌 選んだキラーコピー候補」など）でも高さを増やさない＝はみ出さずに省略する */ .dock-bars:not(.single) .consult-dock-title { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; } .consult-dockbar.pick { background: #1D7A52; } .consult-dockbar.open { background: #124A80; } .consult-dockbar.pick.open { background: #145F3E; } .consult-dockbar.dim { opacity: .58; } /* 2本並ぶと1本あたりが狭いので、プレビュー文は横並びのときだけ隠す（件数と表題を優先） */ .dock-bars:not(.single) .consult-dock-preview { display: none; } /* ⚠️ プレビューを隠すと「幅を埋める子（flex:1）」が居なくなり、中身が左に寄って**バーの右半分が空白**になる。 1本バーの面ではプレビューが埋めているので起きない＝2本並ぶ面だけの症状。 見た目は「2本の間に大きな隙間が空き、右のバーだけ離れている」ように読める（2026-08-13 和佐さん実機報告）。 開閉の矢印を右端へ逃がして、表題+件数=左／矢印=右 でバーの幅いっぱいを埋める（承認モックと同じ体裁）。 */ .dock-bars:not(.single) .consult-dock-arrow { margin-left: auto; } .consult-dock-panel.pick .consult-dock-head { background: #1D7A52; } .consult-dock-inrow.dock-pick-foot { align-items: center; } /* 選んだ項目の1行（番号 → 本文 → ↑↓✕）。見出しのように並び順が意味を持つ選択で使う */ /* 🔴 2026-08-17 レイアウト崩壊の修正: 1行flexにセレクト・チェック・↑↓✕を足したら textarea が1文字幅まで潰れた（縦書き状態）。⭐ **2段構成**にして、上段は textarea 専有にする。 */ .pick-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px dashed var(--line); } .pick-row:first-child { border-top: none; } /* 上段＝番号＋本文（本文が行幅を占める） */ .pick-row-main { display: flex; align-items: flex-start; gap: 8px; width: 100%; } /* 下段＝操作系（狭幅では折り返す） */ .pick-row-ctrl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-left: calc(1.6em + 8px); } .pick-row-area { flex: 0 1 200px; max-width: 200px; min-width: 120px; font-size: 12px; padding: 3px 6px; } .pick-row-num { flex: 0 0 1.6em; font-size: 11.5px; padding-top: 2px; } .pick-row-text { flex: 1; min-width: 0; font-size: 13.5px; } .pick-row .btn { flex: 0 0 auto; } .consult-dock-title { white-space: nowrap; } .consult-dock-count { background: rgba(255, 255, 255, .2); border-radius: 10px; padding: 1px 9px; font-size: 12px; white-space: nowrap; } .consult-dock-preview { flex: 1; font-weight: 400; font-size: 12.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .consult-dock-arrow { font-size: 12px; white-space: nowrap; } .consult-dock-panel { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 -3px 16px rgba(20, 50, 90, .25); } .consult-dock-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #185FA5; color: #fff; font-size: 14px; font-weight: 600; } .consult-dock-head span { flex: 1; } .consult-dock-fold { border: none; background: rgba(255, 255, 255, .16); color: #fff; border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; } .consult-dock-chips { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: #FAFCFE; } .consult-dock-chip { font-size: 11.5px; background: #E6F1FB; color: #185FA5; border-radius: 12px; padding: 2px 10px; } .consult-dock-log { height: min(38vh, 340px); overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } /* 選んだ候補ドック（PickDock）の一覧は最大5件なので、高さは中身なり（上限だけ壁打ちと同じ）。 壁打ちの履歴は下端に貼り付けたいので固定高、こちらは空白が間延びしないよう max-height にする。 */ .consult-dock-log[data-pick-list] { height: auto; max-height: min(38vh, 340px); min-height: 52px; } .consult-dock-log[data-pick-list] .starred-chip { margin: 0; } .consult-dock-inrow { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); } .consult-dock-inrow .consult-input { flex: 1; min-height: 46px; } .consult-dock-inrow .btn { white-space: nowrap; } .consult-dock-foot { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; flex-wrap: wrap; } /* ドックのバー・パネルに本文が隠れないよう、本文の下に余白を確保する */ body.has-consult-dock main { padding-bottom: 120px; } body.has-consult-dock.consult-dock-open main { padding-bottom: calc(min(38vh, 340px) + 210px); } @media (max-width: 600px) { .consult-dock-inner { padding: 0; } .consult-dockbar { border-radius: 0; padding: 10px 12px; gap: 8px; } /* スマホは横幅が足りないので左右padだけ詰める。高さの固定（min-height）は外さない＝2本の高さは揃ったまま */ .dock-bars:not(.single) .consult-dockbar { padding: 11px 10px; gap: 6px; } .consult-dock-preview { display: none; } .consult-dock-panel { border-radius: 0; border-left: none; border-right: none; } .consult-dock-log { height: min(34vh, 260px); } } /* アイコン無しサイドバー（dev・2026-08-11 和佐さん指定）。 既定の .tab はアイコン分の padding-left:34px と text-indent:-22px でぶら下げを作っているので、 絵文字を消したらその余白も戻さないと行頭が右にずれて見える。 */ body.sidenav-mode .tab.noicon { padding-left: 12px; text-indent: 0; } /* ドックは本文カラム（右カラム）内に収める（2026-08-11 和佐さん指摘: 全幅だと左サイドバーに被る）。 サイドバー幅は body.sidenav-mode .tabbar の 212px と揃える。840px 以下はサイドバーがハンバーガー化＝全幅に戻す。 */ body.sidenav-mode .consult-dock { left: var(--sidenav-w); } @media (max-width: 840px) { body.sidenav-mode .consult-dock { left: 0; } } /* 畳んだ状態: サイドバーを画面外へ出す。⚠️ デスクトップ幅限定にする——スマホでは同じ .tabbar を ハンバーガーのドロワー（.nav-open）が制御しており、この指定が後ろにあると勝ってしまい **ドロワーが開かなくなる**（2026-08-11 実測: nav-open でも translateX(-244px) のままだった）。 */ @media (min-width: 841px) { body.sidenav-mode.sidenav-collapsed .tabbar { transform: translateX(-100%); } } /* デスクトップ用の折りたたみトグル（スマホはハンバーガー .nav-toggle がそのまま担当） */ /* サイドバーのヘッダ行（ブランド＋畳むボタン）。ボタンはカラム内に置く＝何を畳むのか一目で分かる */ .sidenav-collapse-btn, .sidenav-reopen { display: none; } body.sidenav-mode .side-head { display: flex; align-items: center; gap: 6px; } body.sidenav-mode .side-head .side-brand { flex: 1; padding-right: 0; } body.sidenav-mode .sidenav-collapse-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; padding: 0; margin-right: 4px; border: none; border-radius: 6px; background: transparent; color: #888780; font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit; } body.sidenav-mode .sidenav-collapse-btn:hover { background: #3D3B33; color: #EDEAE2; } /* 畳んだ時の左端つまみ。細い縦タブで「何かが畳まれている」ことを見せる */ body.sidenav-mode.sidenav-collapsed .sidenav-reopen { display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 45; width: 20px; height: 76px; padding: 0; border: 1px solid #3D3B33; border-left: none; border-radius: 0 8px 8px 0; background: #26251F; color: #B4B2A9; font-size: 14px; line-height: 1; cursor: pointer; font-family: inherit; box-shadow: 2px 0 8px rgba(0,0,0,.18); } body.sidenav-mode.sidenav-collapsed .sidenav-reopen:hover { background: #3D3B33; color: #EDEAE2; width: 24px; } @media (max-width: 840px) { /* スマホは従来どおりハンバーガー。折りたたみUIは出さない */ body.sidenav-mode .sidenav-collapse-btn, body.sidenav-mode.sidenav-collapsed .sidenav-reopen { display: none; } } /* 本文（body.theme-c main）の左右パディング 24px と内側を揃える（スマホの全幅指定は上書きしない） */ @media (min-width: 601px) { body.theme-c .consult-dock-inner { padding: 0 24px; } } /* ───────────── 共通モーダル（SharePopup・2026-08-11 和佐さん指示の共通部品） ───────────── */ /* 共通モーダル（SharePopup 等）＝画面いっぱいの固定レイヤー。中身は上下左右とも中央。 ⚠️ `position: fixed` は、祖先に transform を持つ要素があると**画面ではなくその要素**が基準になる。 カードの hover（.nextstep:hover の translateY 等）で実際に事故った（2026-08-11・和佐さん報告）ため、 モーダルは public/app.js が読み込み時に **body 直下へ移動**させている。ここを触るときはその前提を壊さないこと。 */ .modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 30, 45, .45); } .modal-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; width: min(520px, 92vw); max-height: 85vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(20, 40, 70, .28); } .modal-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; padding: 0; border: none; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit; border-radius: 6px; } .modal-close:hover { background: #F6F4EE; color: var(--ink); } /* モーダル表示中は背景をスクロールさせない */ body.modal-open { overflow: hidden; } @media (max-width: 600px) { /* スマホは下から出るシート（既存の意図的なデザイン）。幅は画面いっぱい。 */ .modal-overlay { padding: 12px; align-items: flex-end; } .modal-card { width: 100%; padding: 18px 16px; max-height: 82vh; border-radius: 12px 12px 0 0; } } /* ───────────── 待機表示 P3: 段階表示オーバーレイ（StagedOverlay・CLAUDE.md 規約4） ───────────── 全画面・白92%（P2の LoadingOverlay と同じ地色）＋工程チェックリスト＋経過時間。 色は Design C の4色ルール内（青＝進行中／緑＝済み／グレー＝未着手）。 */ .staged-ovl { position: fixed; inset: 0; z-index: 2000; background: rgba(255,255,255,.92); display: none; align-items: center; justify-content: center; padding: 20px; } .staged-ovl.on { display: flex; } .staged-inner { text-align: center; max-width: 480px; } .staged-title { font-size: 16.5px; font-weight: 700; margin: 0 0 6px; color: var(--ink); } .staged-list { list-style: none; margin: 22px 0 0; padding: 0; text-align: left; display: inline-block; } .staged-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14.5px; color: var(--muted); transition: color .3s; } .staged-ic { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; border: 2px solid var(--line); color: transparent; flex: none; } .staged-list li.done { color: var(--ink); } .staged-list li.done .staged-ic { border-color: var(--ok); background: var(--ok); color: #fff; } .staged-list li.now { color: var(--accent); font-weight: 700; } .staged-list li.now .staged-ic { border-color: var(--accent); border-top-color: var(--line); animation: plan-spin .9s linear infinite; } .staged-elapsed { margin-top: 18px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .staged-dots span { display: inline-block; animation: staged-blink 1.4s infinite both; } .staged-dots span:nth-child(2) { animation-delay: .2s; } .staged-dots span:nth-child(3) { animation-delay: .4s; } @keyframes staged-blink { 0%, 80%, 100% { opacity: .2 } 40% { opacity: 1 } } @media (prefers-reduced-motion: reduce) { .staged-list li.now .staged-ic, .staged-dots span { animation: none; } .staged-list li.now .staged-ic { border-color: var(--accent); } } @media (max-width: 600px) { .staged-list li { font-size: 13.5px; padding: 6px 0; } .staged-title { font-size: 15.5px; } } /* ───────── 一覧行の積み上げレイアウト（.rowstack・2026-08-11 和佐さん指定・ゲート内のみ） ───────── 背景: 1行1グリッドだと長い管理名称が狭い左列で何行にも折り返し、押せる場所が文字の上だけになっていた （「タイトルしかクリックできない」「クリックできないエリアが多い」＝実機報告）。 方針: 名前は全幅で1行目、状態・要約は下の行へ積む。**行のどこを押しても開く**（削除・複製は除く）。 ⚠️ この class は SHOW_DEV_FEATURES のときだけ付ける＝本番の行は従来のグリッドのまま。 */ .article-row.rowstack { display: block; /* 既存のグリッド指定を上書きして縦積みにする */ position: relative; /* 見えないリンク（::after）の基準 */ padding: 12px 14px; } .article-row.rowstack:hover { background: #F6F4EE; } .article-row.rowstack .rowstack-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .article-row.rowstack .rowstack-head .article-title { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; /* 長い名前は全幅で自然に折り返す */ } .article-row.rowstack .rowstack-tail { margin-left: auto; display: flex; align-items: center; gap: 8px; } .article-row.rowstack .rowstack-line { margin: 4px 0 0; font-size: 12.5px; overflow-wrap: anywhere; } .article-row.rowstack .rowstack-line.meta { font-size: 12px; } /* 行全体をクリック領域にする（stretched link）。操作要素は上に重ねて拾わせる。 */ .article-row.rowstack .article-title::after { content: ''; position: absolute; inset: 0; z-index: 1; } .article-row.rowstack form, .article-row.rowstack button, .article-row.rowstack .rowstack-tail a { position: relative; z-index: 2; } @media (max-width: 480px) { .article-row.rowstack .rowstack-tail { margin-left: 0; width: 100%; justify-content: space-between; } .article-row.rowstack .rowstack-head .article-title { flex: 1 1 100%; } } /* ───────── 丸ピル型メインステッパーの「段数が多い版」（.phase-nav.many・ゲート内のみ） ───────── 記事執筆は10段あり、そのままだと1段ずつ改行されて縦に伸びる。 ピルと矢印を小さめにして、横に並ぶ数を増やす（.phase-nav 自体の見た目は変えない＝コンセプト・本番はそのまま）。 */ .phase-nav.many { gap: 4px 5px; font-size: 12.5px; line-height: 1.9; } .phase-nav.many .phase-step { padding: 3px 9px; border-radius: 12px; } .phase-nav.many .phase-sep { font-size: 11px; } @media (max-width: 480px) { .phase-nav.many { gap: 3px 4px; font-size: 11.5px; } .phase-nav.many .phase-step { padding: 3px 8px; } /* 未解放（🔒）が続くと画面が埋まるので、狭い画面では少しだけ薄くして現在地を目立たせる */ .phase-nav.many .phase-step.locked { opacity: 0.45; } } /* 生成トリガー標準（案B・2026-08-12）: 指示欄の下に全幅ボタンの縦積み。ui-kit.tsx GenTrigger が使う */ .gen-trigger { display: flex; flex-direction: column; gap: 10px; } .gen-trigger textarea { width: 100%; box-sizing: border-box; } .gen-trigger button, .gen-trigger .btn { display: block; width: 100%; } /* ───────── 2案の比較レイアウト（.rebuild-compare-grid 系・2026-08-15 共通化） ───────── 記事の見出し再構築／記事の本文2案／LPのサブヘッド再構築／LPの本文2案の4面が使う。 以前は面ごとにインライン