/* ============================================
   AI集客プロデューサー（Creators Brain）— ポータル風UI
   ネイビー(#010669) × イエロー(#f4fc03)
   ============================================ */

:root {
  --nv: #010669;
  --nv-d: #01044b;
  --gd: #f4fc03;
  --gd-soft: #fbfdcf;
  --bg: #f4f1ea;
  --card: #ffffff;
  --ink: #1f2733;
  --ink-soft: #5b6675;
  --line: #e6e0d3;
  --ok: #2f7d5b;
  --err: #b5402f;
  --radius: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* 丸数字（⓪①〜⑳）だけを常に日本語フォントで描く。
   -apple-system（Mac英字フォント）は①〜⑨しか丸数字を持たず、⑩以降だけ
   ヒラギノに落ちて見た目が揃わないため（2026/7/27 ボス指摘）。 */
@font-face {
  font-family: "MaruSuji";
  src: local("Hiragino Kaku Gothic ProN"), local("HiraKakuProN-W3"),
    local("Hiragino Sans"), local("Yu Gothic"), local("YuGothic"), local("Meiryo");
  unicode-range: U+24EA, U+2460-2473;
}

body {
  margin: 0;
  font-family: "MaruSuji", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
}

/* ---- ボタン ---- */
.btn {
  font-size: 15px; border-radius: 9px; border: 1px solid transparent;
  padding: 11px 20px; cursor: pointer; font-family: inherit; transition: .12s;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-primary { background: var(--nv); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--nv-d); }
.btn-gold { background: var(--gd); color: var(--nv); font-weight: 700; }
.btn-gold:hover:not(:disabled) { filter: brightness(.96); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { border-color: var(--nv); }
.btn-sm { font-size: 13px; padding: 7px 13px; border-radius: 8px; }

/* ============================================
   ログインゲート
   ============================================ */
.gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gate-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 34px 30px; width: 100%; max-width: 380px; text-align: center;
}
.gate-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 10px; }
.gate-eyebrow { font-size: 13px; color: var(--ink-soft); letter-spacing: .3px; }
.gate-logo {
  width: 50px; height: 50px; border-radius: 12px; background: var(--gd); color: var(--nv);
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800;
  letter-spacing: .5px;
}
.gate-title { font-size: 25px; font-weight: 800; color: var(--ink); letter-spacing: .3px; line-height: 1.2; }
.gate-name { font-size: 17px; color: var(--ink); display: block; }
.gate-org { font-size: 12px; color: var(--ink-soft); letter-spacing: .3px; }
.gate-tagline { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 18px; line-height: 1.7; }
.gate-sub { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 22px; }
.gate-label { display: block; text-align: left; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.gate-input {
  width: 100%; font-size: 16px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 9px; margin-bottom: 14px;
}
.gate-input:focus { outline: none; border-color: var(--nv); }
.gate-btn { width: 100%; }
.gate-error { color: var(--err); font-size: 13px; margin: 12px 0 0; }
.gate-help { font-size: 12.5px; color: var(--ink-soft); margin: 16px 0 0; }
.gate-help a { color: var(--nv); }

/* ============================================
   アプリ（サイドバー＋メイン）
   ============================================ */
.app { display: flex; min-height: 100vh; }

/* ---- サイドバー ---- */
.sb {
  width: 284px; flex: none; background: var(--nv); color: #e7ebff;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; }
.sb-logo {
  width: 38px; height: 38px; border-radius: 10px; background: var(--gd); color: var(--nv);
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700;
}
.sb-name { font-size: 14.5px; color: #fff; display: block; line-height: 1.3; }
.sb-org { font-size: 11px; color: #bcc6ff; }
.sb-nav {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; border: none; border-radius: 9px; background: transparent;
  font-size: 14px; color: #d4daff; cursor: pointer; font-family: inherit;
}
.sb-nav i { font-size: 18px; width: 20px; text-align: center; flex: none; }
.sb-nav:hover { background: rgba(255,255,255,.12); }
.sb-nav.on { background: var(--gd); color: var(--nv); font-weight: 700; }
.sb-no { font-weight: 700; }
.sb-tick { margin-left: auto; color: var(--gd); font-size: 16px; }
.sb-nav.on .sb-tick { color: var(--nv); }
.sb-sec { margin-top: 10px; color: #a6b0ee; font-size: 11px; padding: 6px 12px 2px; }
.sb-mini { font-size: 13px; color: #b9c2f5; }
.sb-user {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 8px 6px; border-top: 1px solid rgba(255,255,255,.18);
}
.sb-av {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--nv);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none;
}
.sb-user-t b { font-size: 13px; color: #fff; display: block; }
.sb-user-t span { font-size: 11px; color: #bcc6ff; }
.sb-logout {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 12px; border: none; background: transparent; color: #aeb8f2;
  font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.sb-logout:hover { color: #fff; }

/* ---- メイン ---- */
.mn { flex: 1; min-width: 0; padding: 26px 34px; max-width: 1080px; }

/* ---- 覚悟の一言バナー ---- */
.quote {
  background: var(--nv); border-radius: 14px; padding: 18px 22px;
  margin-bottom: 22px;
}
.quote small { color: var(--gd); font-size: 12px; }
.quote p { margin: 6px 0 0; color: #fff; font-size: 18px; font-weight: 600; }

/* ---- ダッシュボード ---- */
.dash-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.dash-hd h1 { margin: 0; font-size: 24px; }
.dash-hd p { margin: 3px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.fire { background: var(--nv); color: #fff; border-radius: 13px; padding: 9px 15px; text-align: center; font-size: 12px; flex: none; }
.fire b { display: block; font-size: 21px; color: var(--gd); }
.dash-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; margin-bottom: 15px; }
.metric { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; }
.metric-t { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.metric-b { font-size: 11px; color: var(--nv); background: var(--gd); border-radius: 20px; padding: 2px 9px; font-weight: 700; }
.metric-n { font-size: 19px; font-weight: 700; margin-top: 6px; }
.next-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; padding: 16px 18px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; margin-bottom: 18px;
}
.next-card small { font-size: 11px; color: var(--nv); background: var(--gd-soft); border-radius: 20px; padding: 3px 11px; }
.next-card b { display: block; margin-top: 8px; font-size: 16px; }
.next-card span { font-size: 12.5px; color: var(--ink-soft); }
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.step-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px;
  text-align: left; cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 6px;
}
.step-card:hover { border-color: var(--nv); }
.step-card.done { border-color: var(--line); }
.step-card-no { font-size: 18px; font-weight: 700; color: var(--nv); }
.step-card-name { font-size: 14px; font-weight: 600; }
.step-card-tag { font-size: 11.5px; color: var(--ink-soft); }
.step-card-tag.done { color: var(--nv); background: var(--gd); border-radius: 20px; padding: 2px 9px; width: fit-content; font-weight: 700; }
.step-card-tag.done i { margin-right: 3px; }

/* ============================================
   ステップ・パネル
   ============================================ */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.panel-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.panel-no {
  width: 40px; height: 40px; border-radius: 10px; background: var(--gd); color: var(--nv);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex: none;
}
.panel-title { font-size: 19px; font-weight: 700; }
.panel-sub { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.need-note {
  background: var(--gd-soft); border: 1px solid #e7eda0; color: #5f6a02;
  font-size: 13.5px; border-radius: 9px; padding: 13px 15px; margin: 0;
}

/* ---- 前段（性別・商品アンカー）---- */
.preface { background: #fbfaf6; border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; margin-bottom: 18px; }
.gender-row { display: flex; gap: 10px; margin-top: 4px; }
.gender-opt {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 18px; cursor: pointer; font-size: 15px;
}
.gender-opt:hover { border-color: var(--nv); }

/* ---- 16問フォーム ---- */
.qstage { margin-bottom: 18px; }
.qstage-title { font-size: 14px; font-weight: 700; color: var(--nv); border-left: 3px solid var(--gd); padding-left: 8px; margin-bottom: 10px; }
.qitem { margin-bottom: 14px; }
.qlabel { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.qhint { font-size: 12px; color: var(--ink-soft); }
.qex { font-size: 12px; color: #9a8f7a; margin-bottom: 5px; }
.qinput {
  width: 100%; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; resize: vertical; line-height: 1.6;
}
.qinput:focus { outline: none; border-color: var(--nv); }

/* ---- Phase2：会話型の深掘り ---- */
.deepen { background: #eef0ff; border: 1px solid #cfd4ff; border-radius: 11px; padding: 14px 16px; margin: 4px 0 16px; }
.deepen-head { margin-bottom: 10px; }
.deepen-title { font-size: 14px; font-weight: 700; color: var(--nv); border-left: 3px solid var(--nv); padding-left: 8px; }
.deepen-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.deepen-item .qlabel { color: var(--nv); }
.deepen-runner { margin-top: 8px; }
.deepen-runner .runner-status { margin-top: 8px; }

/* ---- オファー選択（メイン＋取り入れる）---- */
.offer-pick { margin-bottom: 16px; }
.offer-pick-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.offer-row { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px; }
.offer-row:hover { border-color: var(--nv); }
.offer-row-label { font-size: 14px; flex: 1; }
.offer-pick-radio, .offer-extra-lab { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.offer-pick-radio { color: var(--nv); font-weight: 600; }
.offer-tag { font-size: 12px; color: var(--ink-soft); }
.offer-pick-radio .offer-tag { color: var(--nv); }
.offer-extra-chk:disabled { cursor: not-allowed; }
.offer-extra-lab:has(.offer-extra-chk:disabled) { opacity: .35; cursor: not-allowed; }
.offer-note { margin-bottom: 16px; }
.offer-note .qlabel { font-weight: 600; }

/* ---- ⑧ 広告改善：数値フォーム ---- */
.metrics-form { margin-bottom: 8px; }
.metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; margin-bottom: 12px; }
.metric-input { text-align: left; }
@media (max-width: 860px) { .metrics-grid { grid-template-columns: 1fr; } }

/* ---- 生成ランナー ---- */
.runner { margin: 4px 0 8px; }
.runner-status { font-size: 13.5px; margin-top: 10px; border-radius: 8px; padding: 10px 12px; }
.runner-status.loading { background: #eef0ff; color: var(--nv); }
.runner-status.error { background: #fbece8; color: var(--err); }

/* ---- 結果表示 ---- */
.result-wrap { margin-top: 18px; border-top: 1px dashed var(--line); padding-top: 16px; }
.result-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.result-md {
  background: #fbfaf6; border: 1px solid var(--line); border-radius: 11px;
  padding: 16px 18px; font-size: 14.5px; overflow-wrap: anywhere;
}
.result-md h1, .result-md h2, .result-md h3, .result-md h4 { color: var(--nv); line-height: 1.5; }
.result-md h1 { font-size: 20px; border-bottom: 2px solid var(--gd); padding-bottom: 6px; }
.result-md h2 { font-size: 17px; margin-top: 1.4em; }
.result-md h3 { font-size: 15px; margin-top: 1.2em; }
.result-md strong { color: var(--nv-d); }
.result-md hr { border: none; border-top: 1px solid var(--line); margin: 1.2em 0; }
.result-md ul, .result-md ol { padding-left: 1.3em; }
.result-md code { background: #eef0ff; border-radius: 4px; padding: 1px 5px; font-size: 13px; }

/* ---- 短縮版（広告審査対策・ミニLP）を別ブロックで強調 ---- */
.short-card {
  margin-top: 22px;
  border: 2px solid var(--nv);
  background: var(--gd-soft);
  border-radius: 14px;
  padding: 16px 18px;
}
.short-card-head { display: flex; align-items: flex-start; gap: 12px; }
.short-card-badge {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: var(--gd); color: var(--nv);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.short-card-txt { flex: 1; min-width: 0; }
.short-card-txt b { display: block; font-size: 16px; color: var(--nv); }
.short-card-txt span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.short-card-head .btn-sm { flex: none; }
.short-card .result-md {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-top: 12px;
}
.short-card .result-md h2 { font-size: 16px; margin-top: 0; }
.short-card-head .sec-actions { flex: none; }

/* ---- 章ごとのブロック（各ブロックにコピー＋部分修正）---- */
.sec-group { margin: 22px 0 4px; }
.sec-group .result-md h2 { font-size: 18px; margin: 0; border-left: 4px solid var(--gd); padding-left: 10px; }
.sec-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-top: 12px;
}
.sec-head { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.sec-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sec-card .result-md { margin-top: 2px; }
.sec-card .result-md h2 { font-size: 16px; margin-top: 0; }
.sec-card .result-md h3 { margin-top: 0; }
.sec-refine { margin-top: 12px; background: #fbfaf6; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.sec-refine .qinput { margin-top: 0; }
.sec-refine .btn { margin-top: 8px; }
.sec-refine .runner-status { margin-top: 8px; }

/* ---- 部分修正（ここだけ直す）---- */
.refine { margin-top: 16px; background: #fbfaf6; border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.refine-title { font-size: 14px; font-weight: 700; color: var(--nv); border-left: 3px solid var(--gd); padding-left: 8px; margin-bottom: 4px; }
.refine .qinput { margin-top: 6px; }
.refine .btn { margin-top: 8px; }
.refine .runner-status { margin-top: 8px; }

/* ---- ⑤-2 FV画像プロンプト（⑤の付属ツール）---- */
.subtool { margin-top: 24px; border-top: 2px dashed var(--line); padding-top: 18px; }
.subtool-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.subtool-head .ti { font-size: 22px; color: var(--nv); margin-top: 2px; }
.subtool-head b { display: block; font-size: 15px; color: var(--nv); }
.subtool-head span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.6; }

/* ---- パターン選択（⑦画像・⑧動画）---- */
.pattern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pattern-opt {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-size: 13.5px; cursor: pointer; line-height: 1.4;
}
.pattern-opt:hover { border-color: var(--nv); }
.pattern-opt input { flex: none; width: 16px; height: 16px; }
.pattern-opt:has(input:checked) { border-color: var(--nv); background: var(--gd-soft); font-weight: 600; }
.pattern-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) { .pattern-grid { grid-template-columns: 1fr; } }

/* ---- セミナー体験版：トライアル残回数バッジ ---- */
.sb-trial {
  margin: 6px 10px 0; padding: 8px 10px; border-radius: 9px;
  background: rgba(244, 252, 3, 0.14); border: 1px solid rgba(244, 252, 3, 0.5);
  color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.5;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sb-trial b { font-size: 15px; }
.sb-trial.empty { background: rgba(255, 90, 90, 0.16); border-color: rgba(255, 90, 90, 0.5); }
.sb-trial-note { flex-basis: 100%; font-weight: 600; opacity: 0.9; font-size: 11.5px; }

/* ---- 自分の原稿を取り込む ---- */
.import-draft { margin: 10px 0 4px; }
.import-draft-toggle { display: inline-flex; align-items: center; gap: 6px; }
.import-draft-body {
  margin-top: 10px; background: #fbfaf6; border: 1px solid var(--line);
  border-radius: 11px; padding: 14px 16px;
}
.import-draft-body .qinput { margin-top: 6px; }
.import-file-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.import-file-row .qhint { margin: 0; }
.import-draft-body .btn { margin-top: 10px; }
.import-draft-body .runner-status { margin-top: 8px; }

/* ============================================
   ⓪ ファネル設計図（地図＋シミュレーター）
   ============================================ */
.fs-sec-title {
  font-size: 15px; font-weight: 700; color: var(--nv);
  border-left: 4px solid var(--gd); padding-left: 9px; margin: 24px 0 4px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.fs-sec-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 12px; padding-left: 13px; }
.fs-badge { font-size: 11.5px; background: var(--gd); color: var(--nv); border-radius: 20px; padding: 2px 10px; font-weight: 700; }

.fs-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.fs-type {
  text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 12px;
  padding: 13px 14px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 4px; line-height: 1.5;
}
.fs-type:hover { border-color: var(--nv); }
.fs-type.on { border-color: var(--nv); background: var(--gd-soft); box-shadow: 0 0 0 1px var(--nv) inset; }
.fs-type b { font-size: 14.5px; color: var(--nv); }
.fs-type span { font-size: 12px; color: var(--ink-soft); }
.fs-type .fs-flow { margin-top: 2px; font-size: 11.5px; }

.fs-map { margin-top: 4px; }
.fs-stage {
  background: #fbfaf6; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 15px; display: flex; gap: 14px; align-items: flex-start;
}
.fs-stage.base { background: var(--gd-soft); border-color: #e7eda0; }
.fs-stage-t { flex: none; width: 200px; }
.fs-stage-t b { display: block; font-size: 14.5px; color: var(--nv); }
.fs-stage-t span { font-size: 12px; color: var(--ink-soft); line-height: 1.5; display: block; margin-top: 2px; }
.fs-tools { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; align-content: flex-start; }
.fs-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: #fff; border-radius: 20px;
  padding: 5px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; color: var(--ink);
}
.fs-chip:hover:not(:disabled) { border-color: var(--nv); }
.fs-chip-no { font-weight: 700; color: var(--nv); }
.fs-chip.done { background: var(--nv); border-color: var(--nv); color: #fff; }
.fs-chip.done .fs-chip-no, .fs-chip.done .ti { color: var(--gd); }
.fs-chip.lock { opacity: .45; cursor: not-allowed; }
.fs-arrow { text-align: center; color: var(--nv); font-size: 16px; line-height: 1; padding: 4px 0; }

.fs-products { background: #fbfaf6; border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; margin-bottom: 14px; }
.fs-products .qhint { margin: 0 0 10px; }
.fs-prod-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.fs-prod-row .qinput { margin: 0; width: auto; }
.fs-prod-price { flex: 2; min-width: 110px; text-align: right; }
.fs-prod-share { flex: 1; min-width: 70px; text-align: right; }
.fs-prod-total { font-size: 12.5px; font-weight: 700; }
.fs-prod-total.ok { color: var(--ok); }
.fs-prod-total.ng { color: var(--err); }

.fs-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 14px; margin-bottom: 4px; }
.fs-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; line-height: 1.5; }
.fs-input-wrap { display: flex; align-items: center; gap: 6px; }
.fs-input-wrap .qinput { text-align: right; }
.fs-unit { font-size: 13px; color: var(--ink-soft); flex: none; }

.fs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 11px; margin: 16px 0 14px; }
.fs-kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fs-kpi small { font-size: 11.5px; color: var(--ink-soft); display: block; line-height: 1.4; }
.fs-kpi b { font-size: 20px; color: var(--nv); display: block; margin-top: 3px; line-height: 1.3; word-break: break-all; }
.fs-kpi.rev { background: var(--nv); border-color: var(--nv); }
.fs-kpi.rev small { color: #bcc6ff; }
.fs-kpi.rev b { color: var(--gd); }

.fs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: #fff; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.fs-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.fs-table td:last-child { text-align: right; font-weight: 700; color: var(--nv); }
.fs-table tr:last-child td { border-bottom: none; }

.fs-note {
  font-size: 12px; color: var(--ink-soft); background: #fbfaf6;
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px;
  margin: 16px 0 0; line-height: 1.7;
}

/* ============================================
   レスポンシブ（スマホ）
   ============================================ */
@media (max-width: 860px) {
  .app { flex-direction: column; }
  .sb {
    width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 4px; padding: 10px;
  }
  .sb-brand { padding: 4px 8px; width: 100%; }
  .sb-sec, .sb-user, .sb-org { display: none; }
  .sb-nav { width: auto; padding: 7px 10px; font-size: 13px; }
  .sb-tick { margin-left: 4px; }
  .sb-logout { width: auto; margin-left: auto; }
  .mn { padding: 18px 16px; }
  .dash-row, .step-grid { grid-template-columns: 1fr; }
  .dash-hd { flex-direction: column; align-items: flex-start; }
  .fs-type-grid, .fs-form-grid { grid-template-columns: 1fr; }
  .fs-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fs-stage { flex-direction: column; gap: 8px; }
  .fs-stage-t { width: auto; }
}

/* ============================================================
   ⑦-2b FV画像スタジオ（見本カード＋左右2カラム）2026-07-31
   ============================================================ */
.fvs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 10px 0 16px;
}
.fvs-card {
  border: 2px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0 0 6px;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.fvs-card img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.fvs-card span {
  display: block;
  padding-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nv);
}
.fvs-card:hover { border-color: var(--nv); }
.fvs-card.selected {
  border-color: var(--nv);
  box-shadow: 0 0 0 3px var(--gd);
}
.fvs-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 6px;
}
.fvs-preview {
  border: 1.5px dashed #c9c3b4;
  border-radius: 10px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  text-align: center;
  background: #fffdf6;
}
.fvs-preview img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(1, 6, 105, .14);
}
@media (max-width: 900px) {
  .fvs-cols { grid-template-columns: 1fr; }
  .fvs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================
   ㉒今日の1本（日次の発信ボード）
   ・カード＝1媒体。カードの中はA案／B案（別々の型）。
   ・上の「型」チップで全カードをその型の案にそろえる（このツールの背骨）。
   ============================================ */

/* 入力側：つくる量の切り替え・テーマ候補チップ・媒体チェック */
.dp-span { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.dp-spanbtn {
  text-align: left; font-family: inherit; cursor: pointer; background: #fff;
  border: 1.5px solid var(--line); border-radius: 11px; padding: 12px 14px; transition: .12s; color: var(--ink);
}
.dp-spanbtn:hover { border-color: var(--nv); }
.dp-spanbtn .ti { font-size: 19px; color: var(--nv); }
.dp-spanbtn b { display: block; font-size: 15px; color: var(--nv); margin-top: 2px; }
.dp-spanbtn span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.6; }
.dp-spanbtn.on { border-color: var(--nv); background: #f5f6ff; box-shadow: inset 0 0 0 1px var(--nv); }

/* 入力側：テーマ候補チップ・媒体チェック */
.dp-inline { margin-top: 8px; }
.dp-themes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.dp-theme {
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--ink);
  line-height: 1.6; transition: .12s;
}
.dp-theme:hover { border-color: var(--nv); }
.dp-theme.on { border-color: var(--nv); background: #f5f6ff; box-shadow: inset 3px 0 0 var(--nv); }
.dp-theme b { display: block; font-size: 15px; color: var(--nv); }
.dp-chip-kata {
  display: inline-block; margin-top: 5px; margin-right: 8px; font-size: 11.5px; font-weight: 700;
  background: var(--gd-soft); color: var(--nv); border-radius: 999px; padding: 2px 10px;
}
.dp-theme-note { font-size: 12.5px; color: var(--ink-soft); }

.dp-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 8px; }
.dp-pick {
  display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; background: #fff;
}
.dp-pick:hover { border-color: var(--nv); }
.dp-pick .ti { color: var(--nv); font-size: 17px; }

/* ボードのヘッダー */
.dp-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  background: var(--nv); color: #fff; border-radius: var(--radius); padding: 16px 18px; margin-top: 18px;
}
.dp-head-l { min-width: 0; flex: 1; }
.dp-head-eyebrow { font-size: 12px; opacity: .8; display: flex; align-items: center; gap: 6px; }
.dp-head-theme { font-size: 19px; font-weight: 700; line-height: 1.5; margin-top: 3px; }
.dp-head-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 12.5px; opacity: .9; }
.dp-head-meta b {
  display: inline-block; background: rgba(255,255,255,.16); border-radius: 999px;
  padding: 1px 9px; margin-right: 7px; font-weight: 700;
}
.dp-head-r { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.dp-progress { font-size: 13px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.dp-progress b { font-size: 16px; }
.dp-progress.full { background: var(--gd); color: var(--nv); font-weight: 700; }
.dp-head-btns { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* 型チップ（そろえる） */
.dp-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 13px 0 4px; }
.dp-filter-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-right: 3px; }
.dp-chip {
  font-family: inherit; font-size: 13px; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 6px 14px; transition: .12s;
}
.dp-chip:hover { border-color: var(--nv); }
.dp-chip.on { background: var(--nv); border-color: var(--nv); color: #fff; font-weight: 700; }
.dp-filter-hint { font-size: 11.5px; color: var(--ink-soft); flex-basis: 100%; }

/* テーマの束（1週間分のとき） */
.dp-group { margin-top: 16px; }
.dp-group-hd {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  border-left: 5px solid var(--nv); background: #fff; border-radius: 0 10px 10px 0;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 11px 15px;
}
.dp-group-no {
  font-size: 11.5px; font-weight: 700; color: var(--nv);
  background: var(--gd-soft); border-radius: 999px; padding: 2px 11px;
}
.dp-group-hd b { font-size: 15.5px; color: var(--ink); line-height: 1.6; }
.dp-group-meta { font-size: 12px; color: var(--ink-soft); }
.dp-group .dp-grid { margin-top: 10px; }

/* カード */
.dp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.dp-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 16px; display: flex; flex-direction: column;
}
.dp-card.dim { opacity: .55; }
.dp-card-hd { display: flex; align-items: center; gap: 8px; }
.dp-card-icon { color: var(--nv); font-size: 19px; }
.dp-card-name { font-size: 15px; color: var(--nv); flex: 1; min-width: 0; }
.dp-state {
  font-size: 11.5px; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
  background: #f1eee5; color: var(--ink-soft);
}
.dp-state.done { background: #e4f3ec; color: var(--ok); font-weight: 700; }

.dp-tabs { display: flex; gap: 6px; margin-top: 11px; }
.dp-tab {
  flex: 1; font-family: inherit; cursor: pointer; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft); font-size: 12px; padding: 6px 8px; line-height: 1.35; transition: .12s;
}
.dp-tab span { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; }
.dp-tab:hover { border-color: var(--nv); }
.dp-tab.on { border-color: var(--nv); background: #f5f6ff; color: var(--nv); }
.dp-tab.on span { color: var(--nv); }

.dp-tagrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.dp-tag { font-size: 11.5px; border-radius: 999px; padding: 2px 10px; }
.dp-tag.kata { background: var(--gd-soft); color: var(--nv); font-weight: 700; }
.dp-tag.role { background: #eef0ff; color: var(--nv); }

.dp-body {
  white-space: pre-wrap; word-break: break-word; font-size: 13.5px; line-height: 1.8;
  margin-top: 10px; background: #fbfaf6; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 13px; max-height: 168px; overflow: hidden; position: relative;
}
.dp-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42px;
  background: linear-gradient(to bottom, rgba(251,250,246,0), #fbfaf6);
}
.dp-body.open { max-height: none; overflow: visible; }
.dp-body.open::after { display: none; }
.dp-more {
  align-self: flex-start; margin-top: 6px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--nv); text-decoration: underline; padding: 2px 0;
}
.dp-aim {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.7;
  border-left: 3px solid var(--gd); padding-left: 10px;
}
.dp-aim b {
  display: inline-block; background: var(--gd-soft); color: var(--nv);
  border-radius: 999px; padding: 1px 9px; margin-right: 7px; font-size: 11.5px;
}
.dp-aim span { color: #9aa3b0; font-size: 11.5px; }
.dp-empty { font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.7; }
.dp-acts { display: flex; gap: 7px; margin-top: 12px; }
.dp-acts .dp-copy { flex: 1; }
.dp-memo {
  margin-top: 16px; background: #fbfaf6; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 18px 14px;
}
.dp-memo h2 { font-size: 15px; color: var(--nv); }

@media (max-width: 900px) {
  .dp-grid { grid-template-columns: 1fr; }
  .dp-picks { grid-template-columns: 1fr; }
  .dp-span { grid-template-columns: 1fr; }
  .dp-head-r { align-items: flex-start; width: 100%; }
  .dp-head-btns { justify-content: flex-start; }
}

/* ============================================================
   ナビ刷新（2026-09-06 ボス指示）
   ・22ツールを縦一列に並べるのをやめ、6つのかたまりに畳んだ
   ・画面から丸数字を外し、代わりに1行の説明を足した
   ・文字を 14px → 15〜16px に上げた（講座生「小さくて見えにくい」）
   ・作業中は左メニューを畳める（.app.mini）
   ※ここは既存ルールの上書きを含むので、必ずファイル末尾に置くこと。
   ============================================================ */

/* ---- サイドバー本体 ---- */
.sb { gap: 2px; padding: 16px 10px; }
.sb::-webkit-scrollbar { width: 8px; }
.sb::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 8px; }

.sb-brand { padding: 4px 6px 14px; gap: 10px; }
.sb-brand-t { min-width: 0; }
.sb-name { font-size: 15px; font-weight: 700; }
.sb-org { font-size: 11.5px; color: #c3cbff; }
.sb-fold {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28); background: transparent; color: #d8ddff;
  cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.sb-fold:hover { background: rgba(255,255,255,.14); color: #fff; }

/* トップ／その他ボタン（文字を大きく・コントラストを上げる） */
.sb-nav { font-size: 15px; color: #e2e7ff; padding: 11px 12px; }
.sb-mini { font-size: 13.5px; color: #c3cbff; }

/* ---- かたまりの見出し（押すと開閉） ---- */
.sb-grp {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  margin-top: 7px; padding: 10px 12px; border: none; border-radius: 9px; background: transparent;
  color: #fff; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.sb-grp:hover { background: rgba(255,255,255,.11); }
.sb-grp > i { font-size: 17px; width: 20px; text-align: center; flex: none; opacity: .9; }
.sb-grp-t { flex: 1; min-width: 0; }
.sb-cnt {
  font-size: 11.5px; font-weight: 700; color: var(--nv); background: var(--gd);
  border-radius: 20px; padding: 1px 9px; flex: none;
}
.sb-car { font-size: 13px; opacity: .75; transition: transform .15s; flex: none; }
.sb-grp.open .sb-car { transform: rotate(90deg); }

/* ---- かたまりの中身（開いた1つだけ出る） ---- */
.sb-items { display: none; margin: 2px 0 2px 15px; padding-left: 5px; border-left: 2px solid rgba(255,255,255,.17); }
.sb-items.open { display: block; }
.sb-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 9px 11px; border: none; border-radius: 8px; background: transparent;
  font-size: 14.5px; color: #d8ddff; cursor: pointer; font-family: inherit; line-height: 1.5;
}
.sb-item:hover { background: rgba(255,255,255,.13); color: #fff; }
.sb-item.on { background: var(--gd); color: var(--nv); font-weight: 700; }
.sb-item-t { flex: 1; min-width: 0; }
.sb-item .sb-tick { margin-left: auto; color: var(--gd); font-size: 14px; flex: none; }
.sb-item.on .sb-tick { color: var(--nv); }

.sb-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.sb-foot .sb-user { margin-top: 6px; border-top: none; padding: 8px 6px 4px; }

/* ---- 畳んだ状態（作業中に画面を広くする）---- */
.app.mini .sb { width: 66px; padding: 16px 8px; }
.app.mini .sb-brand { flex-direction: column; gap: 8px; padding-bottom: 12px; }
.app.mini .sb-fold { margin-left: 0; }
.app.mini .sb-fold i { transform: rotate(180deg); }
.app.mini .sb-brand-t,
.app.mini .sb-grp-t,
.app.mini .sb-cnt,
.app.mini .sb-car,
.app.mini .sb-items,
.app.mini .sb-sec,
.app.mini .sb-user-t,
.app.mini .sb-trial,
.app.mini .sb-nav span,
.app.mini .sb-logout span { display: none; }
.app.mini .sb-nav,
.app.mini .sb-grp,
.app.mini .sb-logout { justify-content: center; padding: 11px 0; gap: 0; }
.app.mini .sb-nav i, .app.mini .sb-grp > i { width: auto; }

/* ============================================================
   トップ画面＝ツールを選ぶ棚
   ============================================================ */
.mn { max-width: 1180px; }

/* 次にやること（ネイビーで1つだけ目立たせる＝1画面1メッセージ） */
.next-card-hero { background: var(--nv); border-color: var(--nv); padding: 18px 22px; margin-bottom: 24px; }
.next-card-hero small { background: var(--gd); color: var(--nv); font-weight: 700; }
.next-card-hero b { color: #fff; font-size: 20px; }
.next-card-hero span { color: #c3cbff; }
.next-card-hero .btn-gold { font-size: 16px; padding: 13px 30px; flex: none; }

.sec-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sec-hd h2 { margin: 0; font-size: 17px; font-weight: 800; }
.sec-hd p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

/* かたまりのタブ */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 9px 17px;
  font-size: 14px; color: var(--ink); cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 8px;
}
.tab:hover { border-color: var(--nv); }
.tab.on { background: var(--nv); border-color: var(--nv); color: #fff; font-weight: 700; }
.tab-n { font-size: 11.5px; background: var(--gd); color: var(--nv); border-radius: 20px; padding: 0 8px; font-weight: 700; }

/* 棚 */
.grp { margin-bottom: 26px; }
.grp-lab { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--nv); }
.grp-lab::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.grp-lab em { font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.tool {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 16px 18px;
  text-align: left; cursor: pointer; font-family: inherit; display: flex; gap: 13px;
  align-items: flex-start; transition: .12s; position: relative;
}
.tool:hover { border-color: var(--nv); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(1,6,105,.09); }
.tool.done { background: #fbfcf3; }
.tool-ic {
  width: 38px; height: 38px; border-radius: 10px; background: var(--nv); color: var(--gd);
  display: flex; align-items: center; justify-content: center; font-size: 19px; flex: none;
}
.tool-b { min-width: 0; padding-right: 52px; }
.tool-name { font-size: 16px; font-weight: 700; display: block; line-height: 1.5; }
.tool-desc { font-size: 13px; color: var(--ink-soft); display: block; margin-top: 3px; line-height: 1.6; }
.tool-tag {
  position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700;
  color: var(--nv); background: var(--gd); border-radius: 20px; padding: 2px 10px;
}
.tool-tag i { margin-right: 3px; }

.dash-row { margin: 4px 0 15px; }

/* パネル見出しの丸数字 → アイコン */
.panel-no i { font-size: 21px; }

/* ---- スマホ ---- */
@media (max-width: 860px) {
  /* 左メニューは「トップへ戻る」だけ。ツール選びはトップ画面の棚でやる。
     ※上の（メディアクエリ外の）新ルールが後勝ちで効いてしまうので、
       スマホで小さくしたいものはここで必ず指定し直すこと。 */
  .sb { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 10px; gap: 4px; }
  .sb-brand { padding: 2px 6px 6px; }
  .sb-logo { width: 30px; height: 30px; font-size: 15px; }
  .sb-name { font-size: 14px; }
  .sb-nav { width: auto; font-size: 13.5px; padding: 8px 11px; }
  .sb-foot .sb-nav, .sb-logout { font-size: 12.5px; padding: 6px 9px; }
  .sb-grp, .sb-items, .sb-sec, .sb-fold { display: none; }
  .sb-foot { margin-top: 0; width: 100%; border-top: none; padding-top: 4px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .sb-foot .sb-nav { width: auto; }
  .sb-foot .sb-user { margin-top: 0; }
  .sb-logout { width: auto; margin-left: auto; }
  .shelf { grid-template-columns: 1fr; }
  .tool-b { padding-right: 0; }
  .tool-tag { position: static; margin-left: auto; align-self: flex-start; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .tab { flex: none; }
  .next-card-hero { flex-direction: column; align-items: flex-start; }
}