/* CTW Creative Manager スタイル（AdminKit 参考デザイン） */
:root {
    --bg: #f5f7fb;          /* AdminKit body背景 */
    --panel: #ffffff;
    --line: #dee2e6;        /* Bootstrap gray-300 */
    --line-soft: #edf0f3;
    --line-strong: #ced4da; /* gray-400：入力欄の枠・hover時の枠 */
    --text: #495057;        /* gray-700 本文 */
    --heading: #212529;     /* gray-900 見出し */
    --muted: #6c757d;       /* gray-600 */
    --primary: #015cfb;     /* AdminKit primary */
    --primary-d: #014ed5;
    --primary-soft: #eaf1fb;
    --primary-ink: #23486f;  /* primary-soft の上に置く濃い文字色（バッジ・選択中チップ） */
    --panel-soft: #fbfcfe;   /* 枠つきの薄い箱（スクロール箱・タグ欄） */
    --surface-2: #eef1f6;    /* 画像の下地・無効入力・バーの溝などの中間グレー */
    --surface-hover: #f1f3f6; /* ghost系ボタンの hover 面 */
    --danger: #d9534f;
    --success: #4bbf73;
    --warning: #f0ad4e;
    --info: #1f9bcf;
    --sidebar-bg: #ffffff;  /* 案A「紙とインク」：白地＋罫線1本 */
    --sidebar-text: #495057;
    --sidebar-active: #23486f;
    --sidebar-ico: #adb5bd;
    --radius: 6px;
    --shadow: 0 0 14px 0 rgba(53, 64, 82, .06);
    --shadow-navbar: 0 0 32px 0 rgba(33, 37, 41, .1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Inter", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { color: var(--heading); }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 運営（スーパー管理）閲覧バナー */
.super-banner { background: var(--warning); color: #3b2f0b; padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; gap: 12px; font-weight: 500; }
.super-banner a { color: #3b2f0b; text-decoration: underline; white-space: nowrap; }
/* sandbox の運営の画面だけに出す帯（2026-10-16〜・本番の運営の画面と取り違えないため）。色は固定。
   sticky にしない（目次リンクで見出しが帯の裏に隠れる・狭い画面で帯が画面を占め続けるため）。ふつうに上に置くだけ */
.env-banner { background: #c2410c; color: #fff; padding: 10px 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; text-align: center; border-bottom: 3px solid #7c2d12; }
.env-banner strong { font-size: 16px; font-weight: 700; letter-spacing: .02em; }
.env-banner span { font-size: 13px; opacity: .95; }
/* スマホ幅では説明文を隠し、見出しの1行だけにする（帯が4〜5行に伸びるため） */
@media (max-width: 640px) { .env-banner span { display: none; } }

/* ===== ヘッダー ===== */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    padding: 0 24px;
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand { font-weight: 700; color: var(--text); }
.brand:hover { text-decoration: none; }
.mainnav { display: flex; gap: 18px; flex: 1; }
.mainnav a { color: var(--text); font-size: 14px; }
.userbox { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.uname { color: var(--muted); }
.logout { color: var(--muted); }

/* width:100% がないと、flex-column の .main-col 内で margin:auto によりコンテンツ幅に収縮（タブ毎に幅が変わる原因）。100%で常に親幅を満たす */
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px; }

/* ===== 見出し・ボタン ===== */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}
.page-head h1 { font-size: 20px; margin: 0; font-weight: 600; color: var(--heading); }
.count { color: var(--muted); font-size: 14px; font-weight: normal; }
.actions { display: flex; gap: 8px; align-items: center; }
.inline { display: inline; }
.btn-link { background: none; border: none; padding: 0; margin: 0 0 0 10px; color: var(--primary); cursor: pointer; font: inherit; }
.btn-link:hover { text-decoration: underline; }
.btn-link-danger { background: none; border: none; padding: 0; margin: 0 0 0 10px; color: var(--danger); cursor: pointer; font: inherit; }
.btn-link-danger:hover { text-decoration: underline; }

.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary); /* ghost側で枠線を出しても高さが揃うよう、全ボタンに枠 */
    border-radius: var(--radius);
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--primary-d); border-color: var(--primary-d); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(1, 92, 251, .3); }
.btn:disabled { background: #b8c2d6; border-color: #b8c2d6; cursor: not-allowed; }
/* セカンダリ（白背景＋枠線）＝AdminKit の outline/secondary 感 */
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #c9302c; border-color: #c9302c; }
.btn-block { width: 100%; padding: 11px; font-size: 15px; }

/* ===== フラッシュ ===== */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash ul { margin: 0; padding-left: 18px; }
.flash-success { background: #e6f6ec; color: #1c7a44; }
.flash-error { background: #fdeaea; color: #b32626; }
.flash-info { background: #eaf1fd; color: #2257cc; }

/* ===== ログイン ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
/* sandbox の運営のログイン・初期設定は上に帯（.env-banner・1行で約48px）が乗るので、そのぶん縮めて 100vh を超えないようにする */
body:has(.env-banner) .login-wrap { min-height: calc(100vh - 48px); }
.login-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px; width: 100%; max-width: 360px; }
/* パスワード管理ソフト向けに置く隠しのメールアドレス（hidden）。下の form input の display:block に負けて見えていた（2026-11-04） */
.login-box input[hidden] { display: none; }
.login-title { font-size: 18px; text-align: center; margin: 0 0 20px; }

/* ===== フォーム ===== */
form label { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
form input[type=text], form input[type=email], form input[type=password],
form input[type=date], form input[type=datetime-local], form input[type=month], form input[type=number], form input[type=tel],
form input[type=url], form input[type=search], form select, form textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: normal;
    font-family: inherit;
    color: var(--text);
    background-color: var(--panel);
    transition: border-color .12s, box-shadow .12s;
}
form textarea { resize: vertical; }

/* ===== コントロール共通装飾（form 外の単体 input/select/textarea も対象・未装飾を解消） ===== */
select, textarea,
input[type=text], input[type=email], input[type=password], input[type=date], input[type=datetime-local],
input[type=month], input[type=number], input[type=tel], input[type=url], input[type=search] {
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    background-color: var(--panel);
    transition: border-color .12s, box-shadow .12s;
}
/* すべての select をカスタム矢印に統一（ネイティブ矢印を消して AdminKit 調のシェブロン） */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 16px 16px;
    cursor: pointer;
}
select::-ms-expand { display: none; }
input:focus, select:focus, textarea:focus,
textarea[data-var-text]:focus, .var-picker-filter:focus, input[data-var-genre-custom]:focus {
    outline: none;
    border-color: #90b4e8;
    box-shadow: 0 0 0 3px rgba(1, 92, 251, .18);
}
form .checkbox { display: flex; align-items: center; gap: 8px; font-weight: normal; }
form .checkbox input { width: auto; margin: 0; }
.narrow { max-width: 480px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
/* 設定ページは項目が多いので横幅いっぱいに使う（2026-09-24） */
.narrow.set-wide { max-width: none; }
/* WordPress の設定画面のように「見出し｜入力欄」を横に並べる。
   <label>見出し<input>…</label> の見出し文字は grid の無名アイテムになり、1列目に入る。
   入力欄と説明は2列目。チェックボックスや表など見出しの無いものは2列目の位置まで字下げする。
   幅の狭い画面では今までどおり縦に積む */
@media (min-width: 761px) {
    .set-wide > label:not(.checkbox) {
        display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px;
        align-items: baseline; margin-bottom: 18px;
    }
    .set-wide > label:not(.checkbox) > * { grid-column: 2; }
    .set-wide > label:not(.checkbox) > input,
    .set-wide > label:not(.checkbox) > select,
    .set-wide > label:not(.checkbox) > textarea { margin-top: 0; max-width: 520px; }
    .set-wide > label:not(.checkbox) > .hint { display: block; margin-top: 6px; font-weight: normal; }
    .set-wide > label.checkbox,
    .set-wide > label.checkbox + p.hint,
    .set-wide > .set-models,
    .set-wide > .set-rates,
    .set-wide > .set-r2-test,
    .set-wide > .cw-notify { margin-left: 244px; }
}
/* 運営の設定：R2 の「接続を確かめる」（入力欄の列にそろえる） */
.set-r2-test { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 18px; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; }
.hint { color: var(--muted); font-size: 13px; }

/* ===== タブ ===== */
/* ===== 切り替え（セグメント型）：6種類あった見た目を1つに。各画面のクラス名と JS の on / active / is-on はそのまま =====
   .gv2-seg（生成パネル）を基準に、.tabs（AI診断）・.lpimg-tabs（LP画像モーダル）・.pcards-tabs（商材一覧）を揃える。
   ※ 商材ページのLPタブ（.wsh-tabs）は下線タブ型のまま（ページ切替なのでセグメント型にしない・2026-09-03 に戻した） */
.gv2-seg, .tabs, .lpimg-tabs, .pcards-tabs { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.tabs, .lpimg-tabs, .pcards-tabs { overflow-x: auto; } /* 項目が多いときは横スクロール */
.gv2-seg > button, .tabs > .tab, .lpimg-tabs > .lpimg-tab, .lpimg-tabs > .lpimg-clear, .pcards-tabs > .pcards-tab {
    appearance: none; border: none; border-right: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 13px;
    line-height: 1.4; padding: 7px 13px; cursor: pointer; white-space: nowrap; text-decoration: none; }
.gv2-seg > button:last-child, .tabs > :last-child, .lpimg-tabs > :last-child, .pcards-tabs > :last-child { border-right: none; }
.gv2-seg > button:hover:not(:disabled), .tabs > .tab:hover, .lpimg-tabs > .lpimg-tab:hover, .pcards-tabs > .pcards-tab:hover { background: var(--bg); color: var(--heading); }
.gv2-seg > button.on, .tabs > .tab.active, .lpimg-tabs > .lpimg-tab.is-on, .pcards-tabs > .pcards-tab.on { background: var(--primary); color: #fff; font-weight: 600; }
.lpimg-tabs > .lpimg-clear { color: var(--primary); }
.lpimg-tabs > .lpimg-clear:hover { background: var(--bg); text-decoration: none; }
.tabs { margin-bottom: 20px; }
.tab-panel.hidden { display: none; }

/* ===== 新規作成の入口（つくるもの → 作り方）=====
   タブを1列に並べるのをやめ、カードで選ばせる。増えても崩れないように grid で折り返す */
.cl-lead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.cl-lead-t { font-size: 15px; font-weight: 600; color: var(--heading); }
.cl-lead-d { font-size: 13px; color: var(--muted); }
.cl-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted);
           text-decoration: none; margin: 0 0 12px; }
.cl-back:hover { color: var(--primary); text-decoration: none; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.cl-card { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line);
           border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; text-decoration: none;
           color: var(--text); transition: border-color .12s, box-shadow .12s, transform .12s; }
.cl-card:hover { text-decoration: none; color: var(--text); border-color: var(--primary);
                 box-shadow: 0 4px 14px rgba(20,30,50,.12); transform: translateY(-1px); }
.cl-card-lg { padding: 20px; }
.cl-card.is-off { border-style: dashed; box-shadow: none; cursor: default; }
.cl-card.is-off:hover { transform: none; border-color: var(--line); box-shadow: none; }
.cl-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius); background: var(--primary-soft);
          color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cl-card.is-off .cl-ico { background: var(--surface-hover); color: #adb5bd; }
.cl-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-t { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--heading); }
.cl-card-lg .cl-t { font-size: 16px; }
.cl-d { font-size: 12px; color: var(--muted); }
.cl-card.is-off .cl-t, .cl-card.is-off .cl-d { color: #adb5bd; }
.cl-badge { font-size: 11px; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); border-radius: 4px; padding: 1px 6px; }
.cl-badge-off { color: var(--muted); background: var(--surface-hover); }

/* 作り方を選んだあとの見出しバー（ここから戻る） */
.cl-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); flex-wrap: wrap; margin: 0 0 6px; }
.cl-crumb a { color: var(--muted); text-decoration: none; }
.cl-crumb a:hover { color: var(--primary); text-decoration: underline; }
.cl-crumb-cur { color: var(--heading); font-weight: 700; }
.cm-bar { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line);
          border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin: 0 0 18px; }
.cm-bar-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius); background: var(--primary-soft);
              color: var(--primary); display: flex; align-items: center; justify-content: center; }
.cm-bar-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cm-bar-t { font-size: 15px; font-weight: 700; color: var(--heading); }
.cm-bar-d { font-size: 12px; color: var(--muted); }
.cm-bar-btn { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; background: var(--panel); color: var(--text);
              border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; font-size: 13px;
              font-weight: 500; text-decoration: none; white-space: nowrap; }
.cm-bar-btn:hover { background: var(--surface-hover); border-color: var(--line-strong); color: var(--heading); text-decoration: none; }

.tab-panel form, .gen-form { max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.gen-note { color: var(--muted); font-size: 13px; }

/* ===== プロンプトテンプレート（AI生成タブ） ===== */
.prompt-label { margin-bottom: 6px; } /* テンプレートバーと組で見せるため、通常のラベルより詰める */
.tpl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.tpl-bar select { display: inline-block; width: auto; max-width: 240px; margin-top: 0; flex: 0 1 auto; }
.tpl-bar .btn { white-space: nowrap; padding: 7px 12px; font-size: 13px; }
.tpl-bar [data-tpl-status].is-error { color: var(--danger); }
/* ラベルで包まない直置きのプロンプト欄。次のフィールドと密着しないよう下に余白 */
.gen-form > textarea[name=prompt] { margin-bottom: 16px; }

/* テンプレート管理ページ */
.tpl-admin-new, .tpl-admin-item { max-width: 640px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.tpl-admin-new h2 { font-size: 15px; margin: 0 0 14px; }
.list-head { font-size: 16px; margin: 28px 0 14px; }
.tpl-admin-item { position: relative; }
.tpl-admin-remove { position: absolute; top: 20px; right: 20px; }

/* ===== フィルタ ===== */
.filters { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; box-shadow: var(--shadow); }
.filter-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.filter-row + .filter-row { margin-top: 12px; }
.filters label { margin: 0; font-size: 13px; }
.filters input, .filters select { margin-top: 4px; }
.filter-row input[type=number] { width: 110px; }
.filter-row input[type=date], .filter-row input[type=month] { width: 160px; }
/* クリエイティブ一覧の絞り込みは折りたたまずに2行（2026-10-14〜）。欄を少し詰めて、広い画面で2行に収める */
.filters[data-list-filters] .filter-row { gap: 10px 12px; }
.filters[data-list-filters] select { max-width: 200px; }
.filters[data-list-filters] input[type=number] { width: 90px; }
.filters-btns { display: flex; gap: 8px; align-items: flex-end; }
.filters-metric-note { align-self: center; color: var(--danger); }
.filters-metric-note[hidden] { display: none; }

/* ===== 一覧グリッド ===== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); color: var(--text); display: block; }
.card:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(20,30,50,.12); transform: translateY(-1px); transition: .12s; }
.card-link { display: block; color: var(--text); text-decoration: none; }
.card-link:hover { text-decoration: none; color: var(--text); }
.card-download { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; padding: 6px 7px; border-radius: 6px; line-height: 0; text-decoration: none; z-index: 2; display: inline-flex; align-items: center; justify-content: center; }
.card-download:hover { background: rgba(0,0,0,.8); color: #fff; text-decoration: none; }
.icon-dl { width: 14px; height: 14px; display: block; }
.btn-icon { padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.row-actions { white-space: nowrap; }
.row-actions .fav-btn { margin-right: 4px; }

/* ===== お気に入り（星） ===== */
.icon-star { width: 14px; height: 14px; display: block; }

/* カード：ダウンロードの左に黒半透明オーバーレイの星 */
.card-fav { position: absolute; top: 8px; right: 48px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; padding: 6px 7px; border-radius: 6px; line-height: 0; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.card-fav:hover { background: rgba(0,0,0,.8); }
.card-fav.is-fav { color: #ffcd3c; }
.card-fav.is-fav .icon-star { fill: currentColor; }

/* リスト：シンプルアイコンボタンの星 */
.fav-btn { background: transparent; border: none; padding: 5px 8px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; line-height: 0; border-radius: 6px; vertical-align: middle; }
.fav-btn:hover { background: rgba(0,0,0,.06); color: var(--text); }
.fav-btn.is-fav { color: #e8a200; }
.fav-btn.is-fav .icon-star { fill: currentColor; }
.fav-btn:disabled { opacity: .5; cursor: wait; }

/* 認証ページ：登録/ログイン切替リンク */
.auth-alt { margin-top: 14px; text-align: center; }
/* パスワードをお忘れの方・メールのリンク（2026-10-14〜） */
.auth-h { font-size: 17px; margin: 0 0 10px; text-align: center; color: var(--heading); }
.auth-p { font-size: 14px; line-height: 1.7; margin: 0 0 16px; overflow-wrap: anywhere; }
.auth-kinds { border: none; margin: 0 0 16px; padding: 0; }
.auth-kinds legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
form .auth-kind { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 400; cursor: pointer; }
form .auth-kind:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.auth-kind input { margin: 3px 0 0; flex: 0 0 auto; }
.auth-kind strong { display: block; font-size: 14px; }
.auth-kind .hint { display: block; margin: 2px 0 0; }
.sch-notes { margin: 18px 0 0; padding-left: 1.3em; line-height: 1.8; }   /* スケジュールの一覧の下の注意点（2026-10-14〜） */

/* ===== ページャー ===== */
.pager { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pager-info { font-size: 13px; color: var(--muted); }
.pager-pages { display: flex; align-items: center; gap: 4px; }
.pager-per-page { margin-left: auto; display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); }
.pg, .pg-pp { display: inline-block; min-width: 30px; text-align: center; padding: 4px 9px; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); text-decoration: none; background: var(--panel); }
.pg:hover, .pg-pp:hover { background: #f0f3f8; text-decoration: none; }
.pg.active, .pg-pp.active { background: var(--primary); color: #fff; border-color: var(--primary); cursor: default; }
.pg.disabled { color: var(--muted); background: #f7f9fc; cursor: not-allowed; }
.pg-ellipsis { color: var(--muted); padding: 0 4px; }
.card-check { position: absolute; top: 6px; left: 6px; z-index: 3; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; cursor: pointer; line-height: 1; }
.card-check input { margin: 0; width: 16px; height: 16px; vertical-align: middle; cursor: pointer; }

/* ===== 一括ダウンロードのアクションバー ===== */
.bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; margin-bottom: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.bulk-counter { font-size: 14px; }
.bulk-counter strong { color: var(--primary); }
.bulk-counter.over-limit strong { color: var(--danger); }
.bulk-hint { color: var(--muted); font-size: 12px; }
.bulk-bar .view-toggle { margin-left: auto; margin-bottom: 0; }
/* 一覧：一括操作のバー（選んだときだけ）＋表示の切り替え（いつも）を1行に（2026-10-09〜） */
.list-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.list-tools .bulk-bar { flex: 1 1 auto; margin-bottom: 0; padding: 8px 12px; }
.list-tools .view-toggle { margin: 0 0 0 auto; }
.bulk-bar[hidden], .bulk-edit[hidden] { display: none; }
/* 0件のときの「すべて選択」は表示の切り替えのすぐ左（右寄せの並び）に置く */
.list-tools-all { margin-left: auto; }
.list-tools-all[hidden] { display: none; }
.list-tools-all:not([hidden]) + .view-toggle { margin-left: 0; }
.bulk-over { margin-left: 6px; font-size: 12px; color: var(--danger); }
.bulk-over[hidden] { display: none; }

/* ===== ビュー切替（カード/リスト） ===== */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.view-toggle .vt { padding: 6px 12px; font-size: 13px; color: var(--muted); text-decoration: none; background: var(--panel); display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.view-toggle .vt svg { width: 16px; height: 16px; display: block; }
.view-toggle .vt:not(:last-child) { border-right: 1px solid var(--line); }
.view-toggle .vt:hover { background: #f0f3f8; text-decoration: none; }
.view-toggle .vt.active { background: var(--primary); color: #fff; }
.view-toggle .vt.active:hover { background: var(--primary-d); }

/* ===== リスト表示の行 ===== */
.list-view td, .list-view th { vertical-align: middle; }
.list-view tbody tr:hover { background: #f7f9fc; }
.row-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; background: var(--surface-2); }

/* リスト行のサムネをホバーで拡大表示 */
.row-thumb-wrap { position: relative; display: inline-block; }
.row-thumb-popup {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    padding: 4px;
    transition: opacity .12s, visibility .12s;
    pointer-events: none;
}
.row-thumb-popup img { display: block; max-width: 360px; max-height: 360px; border-radius: 4px; }
.row-thumb-wrap:hover .row-thumb-popup { visibility: visible; opacity: 1; }
.inline-badge { display: inline-block; font-size: 11px; padding: 1px 6px; vertical-align: middle; margin-left: 6px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.thumb { position: relative; aspect-ratio: 1/1; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.badge-ai { position: absolute; top: 8px; left: 44px; background: rgba(47,109,240,.92); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.inline-badge { position: static; }
/* 動画のクリエイティブの印（サムネの左下に重ねる／一覧の行では文字の横） */
.badge-video { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; background: rgba(17,24,39,.78); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px 2px 5px; border-radius: 999px; }
.badge-video svg { width: 12px; height: 12px; }
.badge-video.inline-badge { position: static; background: #111827; padding: 1px 7px; }
.detail-image video { display: block; width: 100%; max-height: 80vh; background: #000; border-radius: 8px; }
.card-body { padding: 10px 12px; }
.card-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.card-metric { margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--primary); }
/* ===== 空状態：1行目＝何が無いか（.empty-t）、2行目＝次にやること（できればボタン）を1つの型にする ===== */
.empty { color: var(--muted); font-size: 13px; line-height: 1.7; padding: 26px 18px; text-align: center; margin: 10px 0;
         border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.empty-t { display: block; color: var(--text); font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.empty p { margin: 0 0 6px; }
.empty .btn { margin-top: 12px; }
.empty-sm { padding: 12px 14px; text-align: left; margin: 6px 0; }               /* 列の中など狭い場所 */
.empty-sm .empty-t { font-size: 13px; margin-bottom: 2px; }
table td.empty { border: 0; border-radius: 0; background: none; padding: 32px 16px; } /* 表の中は枠を出さない */

/* ===== 詳細 ===== */
.detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.detail-image img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.dim { color: var(--muted); font-size: 13px; margin-top: 8px; }
.detail-info h2 { font-size: 15px; margin: 22px 0 8px; border-left: 3px solid var(--primary); padding-left: 8px; }
.textblock { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14px; margin: 0; }
.kv, .metrics-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv th, .metrics-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px 12px 8px 0; white-space: nowrap; vertical-align: top; width: 110px; }
.kv td, .metrics-table td { padding: 8px 0; }
.metrics-table tr { border-bottom: 1px solid var(--line); }

/* ===== テーブル一覧（ユーザー・数値項目） ===== */
.list-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
.list-table th, .list-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.list-table thead th { background: #f7f9fc; color: var(--muted); font-size: 13px; }
.list-table tr:last-child td { border-bottom: none; }
.muted { color: var(--muted); }

/* ===== 数値項目管理レイアウト ===== */
.metric-admin { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* フォーム内の見出し。設定ページのように複数セクションが続く場合、2つ目以降に上余白を入れて区切る */
.card-form h2 { font-size: 15px; margin: 28px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.card-form h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* ===== 一括編集パネル ===== */
.bulk-edit { padding: 12px 16px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
/* 1操作＝1行（商材／タグ追加／タグ削除）。横1行に詰めると折り返しで区切り線と「選択を削除」が浮くので縦に並べ、見出し列を揃える */
.bulk-edit > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bulk-edit > summary::-webkit-details-marker { display: none; }
.bulk-edit > summary::before { content: "▸"; color: var(--muted); }
.bulk-edit[open] > summary::before { content: "▾"; }
.bulk-edit > summary .hint { font-weight: 400; }
.bulk-edit-body { margin-top: 12px; }
.bulk-edit-row { display: flex; flex-direction: column; gap: 8px; }
.be-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.be-label { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.be-label-t { width: 56px; } /* 見出し列（「タグ追加」4文字ぶん）を揃える */
.bulk-edit select, .bulk-edit input[type=text] { margin: 0; width: 260px; max-width: 100%; padding: 6px 10px; font-size: 13px; }
.bulk-edit input[type=text] { width: 220px; }
@media (max-width: 640px) {
    .be-label { width: 100%; }
    .be-label select { flex: 1; width: auto; }
    .bulk-edit input[type=text] { width: 100%; }
}

/* ===== 新規作成の二段組み（左=フォーム / 右=生成キュー） ===== */
/* AI生成タブ：フォーム(.gen-form)の隣に生成キューを並べる。全体は最大1024px */
.create-main { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; max-width: 1024px; }
.create-main .gen-form { flex: 1 1 600px; margin: 0; }
.create-queue { flex: 0 1 320px; min-width: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; position: sticky; top: 16px; }
.queue-head { font-size: 15px; margin: 0 0 6px; }
.queue-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.queue-empty { margin: 0; }
.queue-item { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); }
.queue-item.is-processing { border-color: var(--primary); }
.queue-item.is-failed { border-color: var(--danger); }
.queue-item-head { display: flex; align-items: center; gap: 8px; }
.queue-item-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item-prompt { font-size: 12px; color: var(--muted); margin-top: 4px; }
.queue-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.badge-queued { background: var(--surface-2); color: #555; }
.badge-processing { background: #e8efff; color: var(--primary); }
.badge-done { background: #e7f6ec; color: #1a7f37; }
.badge-failed { background: #fdeaea; color: var(--danger); }
.queue-item-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.queue-clear { text-align: right; margin: 10px 0 4px; }
.queue-clear .btn-link-danger { margin: 0; font-size: 12px; }
.btn-icon-sm { background: #f4f6fa; border: 1px solid var(--line); border-radius: 6px; width: 26px; height: 24px; cursor: pointer; font-size: 12px; line-height: 1; }
.btn-icon-sm:disabled { opacity: .4; cursor: default; }
.queue-edit { margin-top: 8px; }
.queue-edit > summary { cursor: pointer; font-size: 12px; color: var(--primary); }
.queue-edit-form { margin-top: 8px; }
.queue-edit-form label { font-size: 12px; margin-bottom: 8px; }
.queue-edit-form input[type=text], .queue-edit-form textarea, .queue-edit-form select { font-size: 13px; padding: 6px 8px; }

/* ===== AI生成の参考画像プリロード ===== */
.ref-preloaded { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }
.ref-thumb img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; display: block; }

/* 参考画像の3ドロップゾーン（横並び・狭幅で折り返し） */
.ref-dropzones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.ref-dropzones .dropzone {
    flex: 1 1 0;
    min-width: 160px;
    margin-bottom: 0;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
}
/* ネイティブのファイル入力UI（「選択されていません」等）は幅を食うので隠し、ゾーンのクリック/ドロップで選択させる */
.ref-dropzones .dropzone input[type=file] { display: none; }
.ref-dropzones .dropzone-hint { margin: 0; }
.ref-dropzones .img-preview { margin: 10px 0 0; }
.ref-dropzones .img-preview img { max-width: 100%; max-height: 130px; }

/* ===== タグ管理 ===== */
.tag-admin .tag-check { text-align: center; width: 56px; }
.tag-rename { display: flex; gap: 8px; align-items: center; margin: 0; }
.tag-rename input[type=text] { width: 240px; max-width: 100%; margin: 0; }
.tag-merge-bar { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tag-merge-bar label { margin: 0; font-size: 13px; }
.tag-merge-bar select { width: auto; min-width: 160px; }

/* ===== 数値入力 ===== */
.metrics-fields { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 4px 0 16px; }
.metrics-fields legend { font-size: 13px; color: var(--muted); padding: 0 6px; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.metric-grid label { margin: 0; font-size: 13px; }
.unit-hint { color: var(--muted); font-weight: normal; }

/* ===== 画像プレビュー・再生成 ===== */
.img-preview { margin-bottom: 14px; }
.img-preview img { max-width: 260px; max-height: 260px; border: 1px solid var(--line); border-radius: 8px; }

/* ===== ドラッグ＆ドロップ ===== */
.dropzone {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 14px;
    text-align: center;
    background: #fafbfd;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dropzone.dragover { border-color: var(--primary); background: #eef3ff; }
.dropzone-hint { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.dropzone input[type=file] { font-size: 13px; }
.dropzone .img-preview { margin: 12px 0 0; }

/* ===== タグ ===== */
.tag-fields { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.tag-fields legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0 6px; }
.tag-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.tag-check { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: normal; font-size: 14px; }
.tag-check input { width: auto; margin: 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.card-product { font-size: 12px; color: var(--text); margin-top: 2px; font-weight: 600; }

/* ===== ドラッグ並べ替え ===== */
.drag-handle { cursor: grab; color: var(--muted); user-select: none; width: 28px; text-align: center; font-size: 16px; }
.drag-handle:active { cursor: grabbing; }
.drag-handle-mark { color: var(--muted); }
tr.dragging { opacity: .5; background: #eef3ff; }
.reorder-hint { margin: 0 0 14px; }
.reorder-status { color: var(--primary); font-weight: 600; margin-left: 6px; }
.reorder-status.is-error { color: var(--danger); }
/* 詳細ページ：プロンプト下のボタン列。折り返してもボタン同士が密着しないようgapを持たせる */
/* スワイプ詳細でも使う、画像下のボタン列 */
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* クリエイティブ詳細の画像下：入口は「作る」「直す」「…」の3つだけ。中身は説明つきメニュー */
.act-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.act-menu { position: relative; }
.act-btn { display: inline-flex; align-items: center; gap: 8px; }
.act-btn-i { width: 16px; height: 16px; flex: none; }
.act-caret { width: 14px; height: 14px; flex: none; opacity: .85; }
.act-btn-more { padding: 8px 12px; }
.act-btn-more svg { width: 18px; height: 18px; display: block; }
.act-pop { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 320px;
           background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
           box-shadow: 0 6px 20px rgba(20,30,50,.14); padding: 6px; }
.act-pop-r { left: auto; right: 0; min-width: 280px; }
.act-menu.is-open .act-pop { display: block; }
.act-pop form { margin: 0; }
.act-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0;
            border-radius: var(--radius); background: none; color: var(--text); font: inherit; text-align: left;
            text-decoration: none; cursor: pointer; }
.act-item:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.act-item:disabled { opacity: .6; cursor: default; }
/* 使えない項目（グレーアウト・理由を出す。漫画動画の画面で直す＝複製した動画など・2026-11-05〜）。中の「元の動画」のリンクは押せる
   項目全体は opacity で薄くしない（リンクまで薄くなる）。タイトルを muted に・アイコンは hover でも色を変えない。説明は元から muted */
.act-item.is-disabled { cursor: default; }
.act-item.is-disabled:hover { background: none; }
.act-item.is-disabled .act-t { color: var(--muted); }
.act-item.is-disabled .act-ico,
.act-item.is-disabled:hover .act-ico { color: var(--sidebar-ico); }
.act-ico { flex: none; color: var(--sidebar-ico); line-height: 0; margin-top: 1px; }
.act-ico svg { width: 18px; height: 18px; display: block; }
.act-item:hover .act-ico { color: var(--primary); }
.act-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.act-t { font-size: 13px; font-weight: 600; color: var(--heading); }
.act-d { font-size: 12px; color: var(--muted); }
.regen-box { margin-top: 28px; padding: 20px; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); max-width: 640px; }
.regen-box h2 { font-size: 15px; margin: 0 0 4px; }

/* 生成中の表示 */
.is-generating .btn { pointer-events: none; opacity: .6; }

/* ===== 別パターン生成タブ ===== */
.variations { max-width: 760px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
/* 非アクティブのステップを隠す（.variations は<form>でないため独自に） */
.var-step.hidden { display: none; }
/* 抽出テキスト欄（直下のlabel＋textarea）。<form>外なのでここで個別にスタイル */
.var-step > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.variations textarea, textarea[data-var-text] {
    display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line);
    border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--panel); resize: vertical;
}
.var-base { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.var-base img { width: 96px; height: 96px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; flex: 0 0 auto; }
.var-base-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.var-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.var-controls label { margin: 0; font-size: 13px; }
/* 入力コントロールは<form>外なので個別に。アプリ共通の角丸・枠線に合わせる */
.variations select, .variations input[type=number] {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 14px; font-family: inherit; background-color: var(--panel);
}
.var-controls select, .var-controls input[type=number] { margin-top: 4px; }
.var-controls select { width: auto; }
.var-controls input[type=number] { width: 90px; }
.var-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 13px; font-weight: 600; }
.var-inline select { width: auto; margin: 0; }
.var-cost { margin-left: auto; }
.var-ideas { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.var-idea { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fafbfd; }
.var-idea-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; }
.var-idea-head input[type=checkbox] { width: auto; margin: 0; flex: 0 0 auto; }
.var-idea-title { flex: 1; min-width: 0; margin: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-family: inherit; font-weight: 600; background: var(--panel); }
.var-idea-prompt { margin: 6px 0 0; }
.var-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0; }
.var-cell { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.var-cell-pic { display: block; position: relative; cursor: pointer; margin: 0; }
.var-cell-pic input[type=checkbox] { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; z-index: 2; cursor: pointer; }
.var-cell-pic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--surface-2); }
.var-cell-title { font-size: 12px; padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.var-cell-wait, .var-cell-fail { padding: 24px 8px; text-align: center; font-size: 12px; color: var(--muted); }
.var-cell.is-failed { border-color: var(--danger); }
.var-cell-fail { color: var(--danger); }
.var-status { margin-top: 10px; font-size: 13px; color: var(--primary); }
.var-status.is-error { color: var(--danger); }

/* ベース選択ピッカー */
.var-picker-filter { display: block; width: 100%; max-width: 320px; margin: 6px 0 12px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.var-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 460px; overflow-y: auto; }
.var-pick { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); cursor: pointer; padding: 0; text-align: left; }
.var-pick:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(20, 30, 50, .12); }
.var-pick img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--surface-2); }
.var-pick span { display: block; padding: 5px 7px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linklike { background: none; border: none; padding: 0; color: var(--primary); cursor: pointer; font: inherit; text-decoration: underline; }

/* ◯◯風チェックリスト（3階層） */
.var-genres { border: 1px solid var(--line); border-radius: 8px; margin: 4px 0 14px; }
.var-gcat { border-bottom: 1px solid var(--line); }
.var-gcat:last-child { border-bottom: none; }
.var-gcat > summary { cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 14px; background: #f7f9fc; }
.var-gsub { padding: 8px 12px 10px; border-top: 1px dashed var(--line); }
.var-gsub-head { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-weight: 600; font-size: 13px; color: var(--muted); }
.var-gsub-head input { width: auto; margin: 0; }
.var-gitems { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.var-gitem { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: normal; font-size: 13px; }
.var-gitem input { width: auto; margin: 0; }
input[data-var-genre-custom] { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--panel); }

/* ===== スワイプ ===== */
.swipe-media-badge { position: absolute; top: 8px; right: 8px; background: rgba(47,109,240,.92); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px; z-index: 2; }

@media (max-width: 900px) {
    .detail, .metric-admin { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .container { padding: 16px; }
}

/* ===== 集計の使い方（Meta連携ガイド） ===== */
.guide { max-width: 820px; line-height: 1.75; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 26px; }
.guide h2 { font-size: 16px; margin: 1.6em 0 .5em; padding-top: .4em; border-top: 1px solid var(--line); }
.guide h2:first-of-type { border-top: none; padding-top: 0; }
.guide ul, .guide ol { margin: .4em 0 .8em; padding-left: 1.3em; }
.guide li { margin: .3em 0; }
.guide code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-size: 13px; }
.guide-example { background: #f6f8fb; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 6px; padding: 12px 14px; margin: 10px 0; line-height: 1.9; }
.rawjson { background: #0d1117; color: #e6edf3; padding: 10px 12px; border-radius: 6px; overflow: auto; max-height: 280px; font-size: 12px; margin: 0; white-space: pre; }

/* ===== 生成ガイド ===== */
/* 準備の状態チェックリスト */
/* ヘルプの使い方の動画（16:9・幅いっぱい・2026-10-22〜） */
.help-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 10px 0 18px; border-radius: 8px; overflow: hidden; background: #000; }
.help-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.guide-status { list-style: none; margin: 12px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.guide-status-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.guide-status-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; line-height: 1; }
.guide-status-item.is-done { border-color: #bfe3cd; background: #f2fbf5; }
.guide-status-item.is-done .guide-status-mark { background: var(--success); color: #fff; }
.guide-status-item.is-todo { border-color: #f4d7a6; background: #fffaf0; }
.guide-status-item.is-todo .guide-status-mark { background: var(--warning); color: #fff; }
.guide-status-item.is-step .guide-status-mark { background: #e7edf6; color: var(--primary); }
.guide-status-body { flex: 1; min-width: 0; }
.guide-status-title { font-weight: 600; color: var(--heading); }
.guide-status-desc { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.6; }
.guide-status-badge { flex: none; align-self: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.guide-status-item.is-done .guide-status-badge { background: #dcf3e6; color: #1a7f44; }
.guide-status-item.is-todo .guide-status-badge { background: #fcedcf; color: #9a6a12; }

/* 準備ステップ（番号付き） */
.guide-flow { counter-reset: gflow; list-style: none; margin: 12px 0; padding: 0; }
.guide-flow > li { position: relative; counter-increment: gflow; padding: 2px 0 14px 42px; margin: 0; }
.guide-flow > li::before { content: counter(gflow); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.guide-flow > li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--line); }
.guide-flow > li strong { color: var(--heading); }
.guide-flow > li p { margin: 3px 0 6px; }
.guide-flow ul { margin: 6px 0 0; }

/* タブ説明カード */
.guide-ext-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.guide-tab { border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; background: var(--panel); }
.guide-tab.guide-tab-rec { border-left-color: var(--success); background: #f6fdf9; }
.guide-tab-name { font-weight: 700; color: var(--heading); font-size: 15px; margin-bottom: 4px; }
.guide-tab p { margin: 4px 0; }
.guide-tab-when { font-size: 13px; color: var(--muted); margin-top: 6px; }
.guide-tab-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); vertical-align: middle; margin-left: 4px; }
.guide-tab-tag-rec { background: #dcf3e6; color: #1a7f44; }

/* ===== Meta照合コード（クリエイティブ詳細） ===== */
.match-code-box { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.mc-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.mc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-code { font-size: 18px; font-weight: 700; letter-spacing: .04em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; color: var(--text); }
/* 白地の箱の上なので、コードとボタンだけ薄いグレーで浮かせる */
.mc-copy { padding: 6px 12px; font-size: 13px; background: var(--surface-2); }
.mc-copy:hover { background: var(--line); border-color: var(--line-strong); }
.match-code-box .hint { margin: 8px 0 0; }

/* ===== テンプレート：ユーザー切替・読み取り専用 ===== */
.tpl-user-switch { margin: 0; flex-shrink: 0; }
.tpl-user-switch label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.tpl-user-switch select { font-size: 14px; padding: 6px 10px; width: auto; margin-top: 0; flex: 0 0 auto; }
/* 読み取り専用フィールド：見た目は編集側と揃える（白背景）。編集不可はカーソルで示す */
.tpl-admin-item input[readonly], .tpl-admin-item textarea[readonly] { cursor: default; }

/* ===== Meta自動項目・一致状況 ===== */
.auto-badge { display: inline-block; font-size: 11px; background: var(--primary); color: #fff; padding: 1px 6px; border-radius: 4px; font-weight: 700; vertical-align: middle; margin-left: 4px; }
.metric-auto input[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.muted { color: var(--muted); }

/* ===== 分析ダッシュボード ===== */
.analytics-filters .filter-row { flex-wrap: wrap; gap: 10px 14px; }
.kpi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 20px; }
.kpi-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.kpi-k { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kpi-v { font-size: 22px; font-weight: 700; color: var(--text); }
.kpi-u { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.analytics-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.analytics-panel h2 { font-size: 15px; margin: 0 0 12px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rank-table th, .rank-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.rank-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.rank-no { color: var(--muted); width: 26px; }
.rank-cre { display: flex; align-items: center; gap: 8px; color: var(--text); }
.rank-cre img { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); flex: 0 0 auto; }
.rank-cre small { display: block; color: var(--muted); font-size: 11px; }
.rank-kpi { min-width: 120px; white-space: nowrap; }
.rank-bar-track { display: inline-block; width: 64px; height: 8px; background: var(--surface-2); border-radius: 4px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.rank-bar { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.rank-val { font-variant-numeric: tabular-nums; font-weight: 600; vertical-align: middle; }
/* 表は既定で横スクロールの箱に入れる（狭い画面で横にはみ出さない）。ビュー側で <div class="table-scroll"> で囲む */
.table-scroll { overflow-x: auto; max-width: 100%; }
.full-metrics { min-width: 760px; }
.full-metrics th, .full-metrics td { white-space: nowrap; }
.full-metrics .num { text-align: right; font-variant-numeric: tabular-nums; }
.list-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.list-pagesize { font-size: 13px; white-space: nowrap; }
.list-pagesize select { margin-left: 6px; width: auto; }
.full-metrics th.sortable { cursor: pointer; user-select: none; }
.full-metrics th.sortable:hover { color: var(--text); }
.full-metrics th .sort-ico::after { content: '⇅'; opacity: .35; margin-left: 4px; font-size: 11px; }
.full-metrics th.sorted .sort-ico::after { opacity: 1; color: var(--primary); }
.full-metrics th.sorted.asc .sort-ico::after { content: '▲'; }
.full-metrics th.sorted.desc .sort-ico::after { content: '▼'; }

/* Canva連携（クリエイティブ詳細） */
.canva-box { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.canva-head { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.canva-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.canva-actions .inline { display: inline; margin: 0; }

/* Meta連携中バッジ（クリエイティブ一覧） */
.meta-badge { display: inline-block; background: #e7f6ec; color: #1a7f37; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.card-metaline { margin-top: 4px; }
.dim-table { margin-top: 14px; }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; } }

/* 配信日別（クリエイティブ詳細） */
.daily-section{margin-top:32px;border-top:1px solid var(--line);padding-top:20px}
.daily-range{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.daily-chart{max-width:880px;margin:0 0 18px}
.daily-table{margin-bottom:24px}
.daily-table tfoot th,.daily-table tfoot td{font-weight:700;border-top:2px solid var(--line)}

/* AIクリエイティブ診断 */
.ai-lp-row{margin:14px 0}
.ai-lp-row input[type=url]{width:100%;max-width:560px}
.ai-actionbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:12px}
.ai-table-wrap{overflow-x:auto}
.ai-pick-table th.ai-sortable{cursor:pointer;white-space:nowrap;user-select:none}
.ai-pick-cell{display:flex;align-items:center;gap:8px;min-width:180px}
.ai-pick-thumb{width:44px;height:44px;object-fit:cover;border-radius:4px;flex:none}
.ai-processing{background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:20px;text-align:center}
.ai-overall{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:14px 18px;margin:14px 0 22px}
.ai-overall h2{margin:0 0 6px;font-size:16px}
.ai-cards{display:flex;flex-direction:column;gap:16px}
.ai-card{display:flex;gap:16px;border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--panel)}
.ai-card-img{flex:none;width:150px}
.ai-card-img img{width:150px;height:auto;border-radius:6px;display:block}
.ai-card-noimg{width:150px;height:120px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:#94a3b8;border-radius:6px;font-size:13px}
.ai-card-body{flex:1;min-width:0}
.ai-card-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ai-card-title{font-size:15px}
.ai-verdict{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.ai-v-good{background:#dcfce7;color:#166534}
.ai-v-bad{background:#fee2e2;color:#991b1b}
.ai-v-caution{background:#fef3c7;color:#92400e}
.ai-v-none{background:#f1f5f9;color:#64748b}
.ai-headline{font-weight:600;margin:4px 0}
.ai-metrics-note{color:#475569;font-size:13px;margin:4px 0 8px}
.ai-block{margin-top:8px}
.ai-block-label{display:inline-block;font-size:12px;font-weight:700;color:#334155;margin-bottom:2px}
.ai-block ul{margin:2px 0 0;padding-left:20px}
.ai-block li{margin:2px 0}
@media(max-width:640px){.ai-card{flex-direction:column}.ai-card-img,.ai-card-img img,.ai-card-noimg{width:100%}}
/* AI診断：タブパネル（.tab-panel の form 640px制約を避けるため専用クラス） */
.ai-tab-panel.hidden{display:none}
/* スワイプ広告診断：選択グリッド */
.badge-muted{background:#f1f5f9;color:#94a3b8}
.ai-swipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:12px}
.ai-swipe-card{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}
.ai-swipe-thumb{display:block;background:#f8fafc;line-height:0}
.ai-swipe-thumb img{width:100%;height:130px;object-fit:cover;display:block}
.ai-swipe-body{padding:8px 10px 10px;display:flex;flex-direction:column;gap:6px;flex:1}
.ai-swipe-meta{display:flex;flex-wrap:wrap;gap:4px}
.ai-swipe-title{font-size:13px;font-weight:600;color:#1e293b;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ai-swipe-form{margin-top:auto}
.ai-swipe-form .btn{width:100%}
/* スワイプ広告診断：レポート */
.ai-swipe-report{display:flex;gap:20px;border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--panel)}
.ai-swipe-report-img{flex:none;width:280px}
.ai-swipe-report-img img{width:280px;height:auto;border-radius:6px;display:block}
.ai-swipe-lp-link{display:inline-block;margin-top:8px;font-size:13px}
.ai-swipe-report-body{flex:1;min-width:0}
.ai-swipe-report-body .ai-block p{margin:2px 0 0;color:#334155;line-height:1.6}
.ai-block-accent{background:#f0f9ff;border-left:3px solid #38bdf8;padding:8px 10px;border-radius:0 6px 6px 0;margin-top:12px}
@media(max-width:640px){.ai-swipe-report{flex-direction:column}.ai-swipe-report-img,.ai-swipe-report-img img{width:100%}}
/* 勝ちパターン分析レポート */
.ai-sec-h{margin:28px 0 10px;font-size:16px;border-bottom:2px solid #e2e8f0;padding-bottom:6px}
.ai-win-conclusion{background:#f0fdf4;border:1px solid #bbf7d0}
.ai-win-conclusion h2{margin-top:0}
.ai-win-conclusion p{margin:6px 0;line-height:1.6}
.ai-win-verdict{font-size:15px}
.ai-win-card{border-left:3px solid #22c55e}
.ai-next-card{border-left:3px solid #6366f1}
.ai-prev{font-size:12px;color:#475569;background:#f1f5f9;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ai-conf{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ai-conf-high{background:#dcfce7;color:#166534}
.ai-conf-mid{background:#fef3c7;color:#92400e}
.ai-conf-low{background:#f1f5f9;color:#64748b}
.ai-conf-reason{font-size:12px;color:#64748b;margin:6px 0 0}
.ai-win-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:8px}
.ai-kv{display:flex;flex-direction:column;gap:1px;padding:4px 0;border-top:1px solid #f1f5f9}
.ai-kv-k{font-size:11px;font-weight:700;color:#64748b}
.ai-kv-v{font-size:13px;color:#1e293b;line-height:1.5}
.ai-evidence{margin-top:10px}
.ai-evidence-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ai-evidence-thumbs img{width:54px;height:54px;object-fit:cover;border-radius:5px;border:1px solid #e2e8f0}
.ai-evidence-id{font-size:12px;color:#94a3b8}
.ai-priorities{margin:0;padding-left:22px}
.ai-priorities li{margin:8px 0}
.ai-pri-head{font-size:14px}
.ai-pri-body{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:3px;font-size:12px;color:#475569}
.ai-pri-body b{color:#334155}
.ai-details{margin-top:20px;border:1px solid #e2e8f0;border-radius:8px;padding:8px 14px;background:#fafafa}
.ai-details summary{cursor:pointer;font-weight:600;font-size:13px;color:#475569}
.ai-details[open] summary{margin-bottom:8px}
@media(max-width:640px){.ai-win-grid{grid-template-columns:1fr}}

/* ===== サイドバー（AdminKit ダーク） ===== */
.app-shell{display:flex;align-items:stretch;min-height:100vh}
.sidebar{width:260px;flex:none;background:var(--sidebar-bg);color:var(--sidebar-text);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;transition:width .2s ease}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(33,37,41,.14);border-radius:3px}
/* 上部：ロゴ＋主アクション */
.sidebar-top{padding:16px 16px 14px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:14px}
.sidebar-brand-row{display:flex;align-items:center;gap:10px}
.sidebar-brand{display:block;min-width:0;flex:1;color:var(--heading);text-decoration:none}
.sidebar-brand:hover{text-decoration:none;color:var(--heading)}
.sidebar-brand-name{font-weight:700;font-size:16px;line-height:1.3}
.sidebar-brand-logo{display:block;width:100%;max-width:100%;height:auto}
.sidebar-toggle{flex:none;background:none;border:0;cursor:pointer;color:var(--muted);padding:6px;border-radius:var(--radius);display:inline-flex;line-height:0}
.sidebar-toggle:hover{background:var(--bg);color:var(--heading)}
.sidebar-toggle .icon{width:20px;height:20px}
/* 本体：見出しは日本語のまま、太さと余白で階層をつくる（大文字化・字間・グラデーションは使わない） */
.sidenav{flex:1;padding:6px 0 16px}
.nav-group{padding:0}
.nav-group-title{padding:18px 20px 6px;font-size:12px;font-weight:700;color:var(--heading);letter-spacing:0;text-transform:none}
.sidenav .navlink{display:flex;align-items:center;gap:11px;padding:8px 20px;color:var(--sidebar-text);text-decoration:none;font-size:14px;font-weight:400}
.sidenav .navlink .nav-ico{width:18px;height:18px;flex:none;color:var(--sidebar-ico)}
.sidenav .navlink span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidenav .navlink:hover{background:var(--bg);color:var(--heading);text-decoration:none}
.sidenav .navlink:hover .nav-ico{color:var(--muted)}
.sidenav .navlink.active{background:var(--primary-soft);color:var(--sidebar-active);font-weight:700;box-shadow:inset 3px 0 0 var(--primary)}
.sidenav .navlink.active .nav-ico{color:var(--primary)}
/* 下部：ログイン中のユーザー */
.sidebar-foot{border-top:1px solid var(--line-soft);padding:12px 20px;display:flex;align-items:center;gap:10px}
.sidebar-foot-av{width:30px;height:30px;flex:none;border-radius:50%;background:var(--primary-soft);color:var(--primary-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.sidebar-foot-main{min-width:0;flex:1;display:block}
.sidebar-foot-name{display:block;font-size:13px;font-weight:600;color:var(--heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-foot-role{display:block;font-size:11px;color:var(--muted)}
.sidebar-foot-out{color:var(--muted);display:inline-flex;padding:6px;border-radius:var(--radius);line-height:0}
.sidebar-foot-out:hover{background:var(--bg);color:var(--heading)}
.sidebar-foot-out .icon-sm{width:16px;height:16px}

/* ===== メイン列（トップバーは廃止：開閉はサイドバー内のアイコンで） ===== */
.main-col{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
/* スマホ（900px 以下）だけの上部バー（2026-10-16〜）。左にメニューを開くボタン、右にロゴ。スクロールしても上に残る（sticky） */
.m-topbar{display:none}
.sidebar-toggle-x{display:none}

.sidebar-overlay{display:none}
/* デスクトップ：折りたたむとアイコンだけのレールになる（68px）。スマホでは効かせない
   （前は広い画面で畳んだまま縦向きのスマホにすると、メニューがレールの見た目のまま出ていた）
   境目は「900px 以下でない」で書く（min-width:901px だと、ズームで 900.5px のような幅がどちらにも当たらない。
   JS の matchMedia('(max-width: 900px)') とちょうど裏表。下の sidebar-collapsed の4か所も同じ） */
@media not all and (max-width:900px){
  body.sidebar-collapsed .sidebar{width:68px}
  body.sidebar-collapsed .sidebar-top{padding:16px 10px 14px;gap:10px}
  body.sidebar-collapsed .sidebar-brand{display:none}
  body.sidebar-collapsed .sidebar-brand-row{justify-content:center}
  body.sidebar-collapsed .nav-group-title{display:none}
  body.sidebar-collapsed .nav-group + .nav-group{border-top:1px solid var(--line-soft);margin-top:8px;padding-top:8px}
  body.sidebar-collapsed .sidenav{padding:10px 0 16px}
  body.sidebar-collapsed .sidenav .navlink{justify-content:center;gap:0;padding:10px 0}
  body.sidebar-collapsed .sidenav .navlink span{display:none}
  body.sidebar-collapsed .sidenav .navlink.active{box-shadow:inset 3px 0 0 var(--primary)}
  body.sidebar-collapsed .sidebar-foot{flex-direction:column;gap:8px;padding:12px 10px}
  body.sidebar-collapsed .sidebar-foot-main{display:none}
}

@media(max-width:900px){
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s ease,visibility .2s;margin-left:0;
           width:min(300px, 86vw);height:100vh;height:100dvh;visibility:hidden}
  body.nav-open .sidebar{transform:translateX(0);box-shadow:2px 0 16px rgba(0,0,0,.3);visibility:visible}
  body.nav-open{overflow:hidden}   /* メニューを開いているあいだ、後ろの画面をスクロールさせない */
  body.nav-open .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}
  /* メニューの中のボタンは「閉じる（×）」 */
  .sidebar-toggle-menu{display:none}
  .sidebar-toggle-x{display:block}
  .m-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:45;
            height:56px;padding:0 14px 0 8px;background:var(--panel);border-bottom:1px solid var(--line);
            box-shadow:0 1px 4px rgba(20,30,50,.06)}
  .m-topbar-menu{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
                 background:none;border:0;border-radius:var(--radius);color:var(--heading);cursor:pointer;padding:0;line-height:0}
  .m-topbar-menu:hover,.m-topbar-menu:active{background:var(--bg)}
  .m-topbar-menu .icon{width:24px;height:24px}
  .m-topbar-menu{position:relative}
  .m-topbar-menu .bell-badge{top:4px;right:2px}
  .m-topbar-brand{display:block;flex:none;line-height:0;text-decoration:none}
  .m-topbar-brand .sidebar-brand-logo{width:auto;height:30px;max-width:none}
}

/* テナント管理（スーパー管理） */
.tenant-name-edit{display:flex;gap:6px;align-items:center}
.tenant-name-edit input[type=text]{width:150px}
.tenant-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tenant-actions form{margin:0}
.list-table td{vertical-align:middle}

/* 管理フォーム用パネル（画像カードの .card とは別。内側余白あり・ホバー無し） */
.form-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;color:var(--text)}
.form-box > h2:first-child{margin-top:0}

/* パスワード再設定の横並び（スーパー管理者一覧） */
.pw-reset{display:flex;gap:6px;align-items:center;margin:0}
.pw-reset input[type=password]{width:140px}

/* ===== 商材素材ライブラリ ===== */
.page-head-actions{display:flex;gap:8px;align-items:center}
.asset-layout{display:grid;grid-template-columns:360px 1fr;gap:22px;align-items:start}
@media (max-width:900px){.asset-layout{grid-template-columns:1fr}}
.asset-add{position:sticky;top:16px}
.asset-add .fg{margin:0 0 12px}
.asset-add textarea{width:100%;font:inherit;resize:vertical}
.url-fetch-status{display:block;margin-top:6px}

.asset-collection{display:flex;flex-direction:column;gap:20px;min-width:0}
.asset-group{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px}
.asset-group-head{margin:0 0 12px;font-size:15px}
.asset-list{display:flex;flex-direction:column;gap:10px}
.asset-list-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.asset-item{border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--panel);min-width:0}
.asset-list-grid .asset-item{display:flex;flex-direction:column;gap:8px}
.asset-thumb{width:100%;height:120px;object-fit:contain;background:#f7f8fa;border-radius:6px;display:block}
.asset-body{min-width:0}
.asset-label{font-weight:600;font-size:13px;word-break:break-word}
.asset-url{display:inline-block;font-size:12px;margin:2px 0;word-break:break-all}
.asset-text{margin:6px 0 0;font-size:13px;color:#444;white-space:pre-wrap;word-break:break-word}
.asset-item .row-actions{margin-top:8px;display:flex;gap:12px;align-items:center}
.asset-item .inline-form{display:inline;margin:0}
.linklike.danger{color:var(--danger)}
.badge-ref{background:#e7f6ec;color:#1a7f37;font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:6px}
.asset-edit{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.asset-edit textarea{width:100%;font:inherit;resize:vertical}

/* この商材で生成 */
.genfp-idea-title{flex:1;font:inherit}
.genfp-idea-prompt{width:100%;font:inherit;resize:vertical}
/* この商材で生成：使う素材の選択（テキスト=制限なし・画像=最大3枚） */
.genfp-refs{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.genfp-ref{position:relative;width:90px;cursor:pointer;border:2px solid transparent;border-radius:8px;padding:3px;display:flex;flex-direction:column;gap:3px;background:var(--panel)}
.genfp-ref img{width:100%;height:80px;object-fit:cover;border-radius:5px;display:block;border:1px solid var(--line)}
.genfp-ref input{position:absolute;top:7px;left:7px;width:18px;height:18px;margin:0;accent-color:var(--primary);cursor:pointer}
.genfp-ref:has(input:checked){border-color:var(--primary);background:#eff6ff}
.genfp-ref:has(input:disabled){opacity:.45;cursor:not-allowed}
.genfp-ref-label{font-size:11px;color:var(--muted);line-height:1.3;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.genfp-ref-must{border-color:#f59e0b}
.genfp-ref-must:has(input:checked){border-color:#f59e0b;background:#fffbeb}
.genfp-ref-badge{position:absolute;top:6px;right:5px;background:#f59e0b;color:#fff;font-size:11px;font-weight:700;padding:1px 5px;border-radius:999px;line-height:1.5;z-index:1;pointer-events:none}
.genfp-ref-badge.is-ref{background:#64748b}   /* 参考画像＝配色・装飾だけ（必ず入るものではない） */
.studio-pick{margin-bottom:18px}
.studio-pick select{min-width:240px}

/* 送信中ローダー（LP画像化など時間のかかる処理の二重送信・誤クリック防止） */
.busy-overlay{position:fixed;inset:0;background:rgba(20,30,50,.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.busy-overlay[hidden]{display:none}
.busy-box{background:var(--panel);color:var(--text);border-radius:var(--radius);padding:26px 30px;max-width:360px;width:100%;text-align:center;box-shadow:0 12px 44px rgba(20,30,50,.32)}
.busy-spinner{width:42px;height:42px;margin:0 auto 16px;border:4px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:busy-spin .9s linear infinite}
.busy-title{font-weight:700;margin-bottom:6px}
.busy-sub{font-size:13px;color:var(--muted);line-height:1.6}
.busy-actions{margin-top:14px}
.busy-time{font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
/* 処理中の見せ方の使い分け：秒で終わる＝文字だけ／分かかる＝.wait（スピナー＋経過）／複数ステップ＝.busy-overlay や進捗モーダル */
.wait{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:0}
.wait-spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:busy-spin .8s linear infinite;flex:none}
.wait-time{font-variant-numeric:tabular-nums}
@keyframes busy-spin{to{transform:rotate(360deg)}}

/* LPフルページ撮影（Chrome拡張連携）の操作エリア */
.fg-urlshot-note{margin-top:6px}
.lpmodal-tabs { margin: 4px 0 12px; }
.lpshot-mode{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:8px 0 10px;font-size:13px}
.lpshot-mode-label{font-weight:600;color:var(--muted)}
.lpshot-mode label{display:inline-flex;align-items:center;gap:5px;margin:0;font-weight:400}
/* スワイプ型LPのチェック（2026-10-20〜） */
.lpshot-swipe{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0 0 10px;font-size:13px;font-weight:400}
.lpshot-swipe .hint{flex-basis:100%;margin:0}
.lpshot-mode input[type=radio]{margin:0}
.lpshot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.lpshot-warn{color:#b45309}
@media (prefers-reduced-motion: reduce){.busy-spinner{animation-duration:2.4s}}

/* 一覧の「Meta広告名コード」コピー・ボタン（詳細ページのコピーと同挙動＝[data-copy]） */
.code-copy{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;letter-spacing:.3px}
.row-actions .code-copy{margin-right:6px}
.card-code{display:inline-block;margin:0 12px 12px}

/* サイドバーのブランド／バージョン表記は上部の AdminKit セクションで定義済み */

/* select のカスタム矢印用に右余白を確保（form内など padding を上書きするコンテキストに対応・ソース順で勝たせる） */
form select, .variations select, .bulk-edit select { padding-right: 34px; }

/* 新規作成：全タブで横幅を統一（幅100%）。タブ切替で content 幅が変わらないように各コンテナの max-width 制限を解除 */
.create-form-wrap .tabs,
.create-form-wrap .tab-panel,
.create-form-wrap .tab-panel > form,
.create-form-wrap .create-main,
.create-form-wrap .variations {
    max-width: 100%;
    width: 100%;
}
/* AI生成タブの本文フォームは queue と横並びの flex アイテム。width:100% にすると queue が下に折り返すので
   幅制限（640px）だけ解除し、幅は flex（flex:1 1 600px）に委ねる */
.create-form-wrap .gen-form { max-width: 100%; }

/* ===== 戦略マップ（商材分析ver2） ===== */
/* 作成フォーム：LP選択 */
.sm-lp-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.sm-lp{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius);padding:10px;cursor:pointer;background:var(--panel)}
.sm-lp:hover{border-color:var(--primary)}
.sm-lp.is-multi{border-style:dashed}
.sm-lp-thumb{width:64px;height:64px;object-fit:cover;object-position:top;border-radius:6px;background:#f1f5f9;flex:none}
.sm-lp-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.sm-lp-title{font-weight:600;font-size:13px}
.sm-lp-meta{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sm-lp-url{font-size:12px;color:var(--muted);word-break:break-all}
.sm-lp-parts{margin:-2px 0 6px 76px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sm-part{font-size:12px;display:inline-flex;gap:4px;align-items:center;margin:0}
.sm-check-list{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.sm-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:0;padding:4px 0}
.sm-check .muted{display:block;font-size:12px}
.sm-inline-fields{display:flex;gap:16px;flex-wrap:wrap}
.sm-inline-fields label{flex:1;min-width:160px}

/* 進捗 */
.sm-progress{display:flex;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);
             border-radius:var(--radius);padding:20px 22px;margin-bottom:18px}
.sm-progress .busy-spinner{margin:0;flex:none}
.sm-progress-title{font-weight:700;margin-bottom:4px}

/* ProductFacts / 語彙スペクトラムの折りたたみ */
.sm-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px}
.sm-panel>summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:14px}
.sm-panel-body{padding:0 16px 16px}
.sm-panel-body h3{font-size:13px;margin:14px 0 6px}
.sm-list{margin:0;padding-left:18px;font-size:13px;line-height:1.9}

/* バリデーションのバッジ */
.sm-checks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 18px}
.sm-check-badge{font-size:12px;font-weight:700;border-radius:5px;padding:2px 8px;cursor:help}
.sm-check-badge.is-pass{background:#e7f6ec;color:#1a7f37}
.sm-check-badge.is-warn{background:#fef3c7;color:#92400e}
.sm-check-badge.is-fail{background:#fee2e2;color:#991b1b}

/* マップ本体：行＝ファネル4段 × 列＝トラック2列 */
.sm-grid{display:grid;grid-template-columns:92px repeat(2,minmax(280px,1fr));gap:10px;align-items:stretch}
.sm-colhead{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:center;padding-bottom:2px}
.sm-rowhead{font-size:12px;font-weight:700;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;text-align:right}
.sm-cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;
         display:flex;flex-direction:column;gap:10px;min-height:76px}
.sm-cell.is-empty{background:transparent;border-style:dashed;color:#94a3b8;align-items:center;justify-content:center;font-size:12px}
.sm-card{border:1px solid var(--line);border-left:3px solid var(--primary);border-radius:8px;padding:10px;
         background:var(--panel);cursor:pointer;text-align:left;width:100%;font:inherit;display:flex;flex-direction:column;gap:4px}
.sm-card:hover{box-shadow:0 4px 14px rgba(20,30,50,.10)}
.sm-card.is-latent{border-left-color:#8b5cf6}
.sm-card-head{display:flex;align-items:center;gap:8px}
.sm-id{font-size:11px;font-weight:700;color:var(--muted);flex:none}
.sm-seg{font-weight:700;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sm-score{margin-left:auto;font-size:11px;font-weight:700;background:#eff6ff;color:#1d4ed8;border-radius:999px;padding:2px 8px;flex:none}
.sm-who{font-size:12px;color:var(--muted)}
.sm-core{background:#fffbeb;border-left:3px solid #f59e0b;padding:6px 8px;border-radius:0 6px 6px 0;font-weight:600;font-size:13px}
.sm-brain{display:flex;flex-wrap:wrap;gap:4px}
.sm-concept{font-size:12px;color:var(--muted)}
.sm-flags{display:flex;gap:4px;flex-wrap:wrap}
.sm-flag{font-size:11px;font-weight:700;border-radius:5px;padding:1px 6px}
.sm-flag-legal{background:#fee2e2;color:#991b1b}
.sm-flag-unver{background:#fef3c7;color:#92400e}
.sm-flag-time{background:#e0f2fe;color:#075985}
.sm-flag-note{background:#f1f5f9;color:#475569}

/* 展開層 */
.sm-dialog{border:none;border-radius:10px;padding:0;max-width:860px;width:92vw;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.sm-dialog::backdrop{background:rgba(15,23,42,.5)}
.sm-dialog-body{padding:20px 24px;max-height:82vh;overflow-y:auto}
.sm-dialog .page-head{margin-bottom:6px}
.sm-full{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.9;background:#f8fafc;
         border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:10px 0 0;font-family:inherit}

@media(max-width:900px){
    .sm-grid{grid-template-columns:1fr}
    .sm-colhead{justify-content:flex-start}
    .sm-rowhead{justify-content:flex-start;text-align:left;padding:8px 0 0}
}

/* 戦略マップ：生成中のプログレスバー */
.sm-progress-body{flex:1;min-width:0}
.sm-progress-title{display:flex;align-items:baseline;gap:10px}
.sm-progress-pct{margin-left:auto;font-size:12px;font-weight:700;color:var(--primary);flex:none}
.sm-bar{height:8px;background:#e9edf3;border-radius:999px;overflow:hidden;margin:8px 0 8px}
.sm-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#5aa0f2);border-radius:999px;
             transition:width .6s ease;min-width:6px}
@media (prefers-reduced-motion: reduce){.sm-bar-fill{transition:none}}

/* ===== 商材分析ページ ===== */
.pa-list { display: flex; flex-direction: column; gap: 16px; }
.pa-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.pa-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.pa-name { font-size: 16px; margin: 0; color: var(--heading); }
.pa-block { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pa-block:first-of-type { padding-top: 4px; border-top: 0; }
.pa-col-h { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.pa-none { margin: 4px 0 10px; }
.pa-result { margin: 6px 0 10px; }
.pa-result > summary { cursor: pointer; font-size: 14px; }
.pa-full { max-height: 360px; overflow: auto; margin-top: 8px; font-size: 13px; }
.pa-pending { font-size: 13px; }
.pa-run { margin-top: 6px; }
.pa-run input[type=url] { max-width: 360px; }
.pa-run-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pa-sm-list { margin: 4px 0 10px; padding-left: 18px; }
.pa-sm-list li { margin: 4px 0; }
.pa-materials { margin: 4px 0 8px; }
.pa-materials > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.pa-mat-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; max-height: 220px; overflow: auto; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: 6px; }
.pa-mat { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.pa-mat-t { font-weight: 600; white-space: nowrap; }
.lp-readify .asset-list { display: flex; flex-direction: column; gap: 8px; }
.lp-readify-item { padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 6px; }

/* 訴求ライブラリ */
.appeal-lib { margin: 0 0 18px; }
.appeal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.appeal-head h2 { margin: 0; }
.appeal-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.appeal-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.appeal-item.is-off { opacity: .55; }
.appeal-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.appeal-type { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--panel-2,#eef0f4); border-radius: 4px; padding: 1px 6px; }
.appeal-seg { font-size: 12px; color: var(--muted); }
.appeal-src { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.appeal-body { margin: 4px 0 0; font-size: 13px; color: var(--text); line-height: 1.6; }
.appeal-actions { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.appeal-edit { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.appeal-form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.appeal-form-row input[type=text] { flex: 1 1 160px; }
.appeal-add { margin-top: 6px; }
.appeal-add > summary { cursor: pointer; font-size: 13px; color: var(--primary); }
.appeal-add form { margin-top: 10px; }
.appeal-empty { margin: 8px 0; }

/* ===== 訴求ライブラリ：ペルソナ → 悩み → 訴求 ===== */
.appeal-from { margin: 3px 0 0; font-size: 11px; color: var(--muted); }
.pl-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* 「ペルソナを追加」の3択 */
.pl-menu { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.pl-menu-t { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pl-menu-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.pl-opt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 11px 12px; border: 1px solid var(--line);
          border-radius: 8px; background: var(--panel); font: inherit; color: var(--text); cursor: pointer; }
.pl-opt:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.pl-opt.is-rec { border-color: var(--primary); background: var(--primary-soft); }
.pl-opt-n { font-size: 14px; font-weight: 600; color: var(--heading); }
.pl-opt-d { font-size: 12px; color: var(--muted); line-height: 1.55; }
.pl-menu-note { margin: 8px 0 0; }
.pl-badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft);
            border-radius: 4px; padding: 1px 6px; }

/* 「誰に」カードの取り込み */
.pl-who { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.pl-who-h { font-size: 14px; font-weight: 600; color: var(--heading); margin-bottom: 8px; }
.pl-who-list { display: flex; flex-direction: column; gap: 6px; }
.pl-who-item { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid var(--line);
               border-radius: 6px; background: var(--panel); font-weight: 400; font-size: 13px; cursor: pointer; }
.pl-who-item input { width: auto; margin: 3px 0 0; flex: none; }
.pl-who-name { display: block; font-weight: 600; color: var(--heading); }
.pl-who-d { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.pl-who-img { margin-top: 10px; }

/* 認知段階のバッジ */
.pl-stage { flex: none; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 2px 8px; background: var(--surface-2); color: var(--muted); }
.pl-stage.is-now { background: var(--primary-soft); color: var(--primary-ink); }
.pl-stage.is-semi { background: #fdf3e2; color: #8a5a10; }
.pl-stage.is-latent { background: var(--surface-2); color: var(--muted); }

/* ペルソナのカード */
.pl-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.pl-p { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.pl-p.is-off { opacity: .6; }
.pl-p-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; }
.pl-p-toggle { flex: none; background: none; border: none; padding: 0; color: var(--muted); cursor: pointer; line-height: 0; }
.pl-chev { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .12s; }
.pl-p-toggle.is-open .pl-chev { transform: rotate(0deg); }
.pl-p-n { margin: 0; font-size: 15px; font-weight: 600; color: var(--heading); }
.pl-p-meta { font-size: 12px; color: var(--muted); }
.pl-p-actions { display: flex; gap: 12px; align-items: center; margin-left: auto; white-space: nowrap; }
.pl-p-b { padding: 0 14px 14px; }

/* 人物像の要約（左に人物イメージ） */
.pl-who-sum { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel-soft); }
.pl-who-main { min-width: 0; flex: 1 1 auto; }
.pl-portrait { flex: 0 0 120px; width: 120px; }
.pl-portrait img { display: block; width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.pl-portrait-none { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong);
                    border-radius: 8px; color: var(--muted); font-size: 12px; background: var(--panel); }
.pl-portrait-a { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pl-portrait-a .linklike { font-size: 12px; text-align: left; }
.pl-face { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; border: 1px solid var(--line); flex: none; background: var(--surface-2); }
@media (max-width: 700px) { .pl-who-sum { flex-direction: column; } }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-oneliner { margin: 8px 0 0; font-size: 14px; color: var(--heading); }
.pl-k { font-size: 11px; color: var(--muted); margin: 14px 0 6px; }
.pl-k:first-child { margin-top: 0; }

/* 1日のスケジュール */
.pl-sched { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.pl-sc { border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); padding: 8px 10px; }
.pl-sc.is-on { border-color: #b9d0ef; background: var(--primary-soft); }
.pl-sc-t { font-size: 12px; font-weight: 700; color: var(--heading); display: flex; align-items: center; gap: 6px; }
.pl-sc.is-on .pl-sc-t { color: var(--primary-ink); }
.pl-sc-p { font-size: 11px; font-weight: 600; color: var(--primary-ink); }
.pl-sc-d { font-size: 12px; margin-top: 2px; }
.pl-sc-f { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pl-sc.is-on .pl-sc-f { color: var(--primary-ink); }

/* 悩みの箇条書き */
.pl-pains { display: flex; flex-direction: column; gap: 4px; }
.pl-pain { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.pl-kind { flex: none; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 6px; background: var(--surface-2); color: var(--muted); }
.pl-kind.is-real { background: #fdf3e2; color: #8a5a10; }
.pl-pain-b { flex: 1 1 auto; min-width: 0; font-size: 13px; }
.pl-mk { flex: none; font-size: 12px; }
.pl-mk:disabled { color: var(--muted); cursor: not-allowed; text-decoration: none; }

/* 人物像の項目 */
.pl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; margin-top: 14px; }
.pl-f-k { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.pl-f-v { font-size: 13px; }

.pl-ap-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.pl-ap-h .pl-k { margin: 0; font-size: 13px; font-weight: 600; color: var(--heading); }
.pl-editform, .pl-newform { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }

/* ペルソナ未設定 */
.pl-orphan { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.pl-orphan .pl-p-h { padding: 0 0 4px; }
.pl-orphan-row { display: flex; align-items: flex-start; gap: 10px; }
.pl-orphan-row .appeal-item { flex: 1 1 auto; min-width: 0; }
.pl-move { flex: none; margin: 0; }
.pl-move select { width: auto; min-width: 170px; padding: 6px 30px 6px 10px; font-size: 13px; }

/* 悩み → 訴求のモーダル（z-index：AIチャットの列 900 より上・生成中のローダー .busy-overlay 1000 より下） */
.pl-modal { position: fixed; inset: 0; z-index: 950; background: rgba(33, 37, 41, .35); display: flex; align-items: flex-start;
            justify-content: center; padding: 40px 16px; overflow-y: auto; }
.pl-modal[hidden] { display: none; }
.pl-modal-box { width: 100%; max-width: 640px; background: var(--panel); border-radius: 8px; box-shadow: var(--shadow-navbar); padding: 16px 18px 18px; }
.pl-modal-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pl-modal-h h3 { margin: 0 0 2px; font-size: 16px; font-weight: 600; }
.pl-modal-h .hint { margin: 0; }
.pl-modal-x { background: none; border: none; padding: 2px 4px; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.pl-modal-pain { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 14px; padding: 10px 12px;
                 background: var(--panel-soft); border: 1px solid var(--line-soft); border-left: 3px solid var(--warning); border-radius: 6px; }
.pl-modal-pain p { margin: 0; font-size: 15px; font-weight: 600; color: var(--heading); }
.pl-modal-status { font-size: 13px; color: var(--muted); padding: 8px 0; }
.pl-modal-list { display: flex; flex-direction: column; gap: 8px; }
.pl-idea { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 12px; border: 1px solid var(--line);
           border-radius: 8px; font-weight: 400; cursor: pointer; }
.pl-idea:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.pl-idea input { width: auto; margin: 3px 0 0; flex: none; }
.pl-idea-m { min-width: 0; }
.pl-idea-t { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pl-idea-t strong { color: var(--heading); }
.pl-idea-b { display: block; margin-top: 4px; font-size: 13px; line-height: 1.6; }

/* ===== ペルソナの編集フォーム ===== */
.pf-sec { border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel-soft); padding: 12px 14px; margin-bottom: 12px; }
.pf-sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--heading); }
.pf-sec-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px;
            background: var(--primary-soft); color: var(--primary-ink); font-size: 11px; font-weight: 700; flex: none; }
.pf-sec-note { font-size: 12px; font-weight: 400; color: var(--muted); }
.pf-lead { margin: -4px 0 10px; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.pf-f { margin: 0 !important; font-size: 13px; }
.pf-wide { grid-column: 1 / -1; }
.pf-sub { font-weight: 400; color: var(--muted); font-size: 12px; }
.pf-rows { display: flex; flex-direction: column; gap: 8px; }
.pf-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 96px 28px; gap: 8px; align-items: center; }
.pf-row-head { font-size: 11px; color: var(--muted); }
.pf-row-pain { grid-template-columns: 88px minmax(0, 1fr) 28px; }
.pf-row input[type=text], .pf-row select { margin: 0; padding: 7px 9px; font-size: 13px; }
.pf-row select { padding-right: 28px; background-position: right 8px center; }
.pf-del { background: none; border: none; padding: 0; font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer; }
.pf-del:hover { color: var(--danger); }
.pf-add { margin-top: 10px; font-size: 13px; }
@media (max-width: 700px) {
    .pf-row { grid-template-columns: minmax(0, 1fr) 28px; }
    .pf-row-head { display: none; }
    .pl-orphan-row { flex-direction: column; }
}

/* 生成パネルの訴求チップ：ペルソナごとの見出し */
.gv2-apgroup { flex: 0 0 100%; font-size: 11px; font-weight: 700; color: var(--muted); margin: 6px 0 -2px; }

@media (max-width: 640px) { .appeal-item { grid-template-columns: 1fr; } }

/* LP内の画像を取り込む（トリガーカード） */
.lp-import { margin: 0 0 18px; }
.lp-import-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.lp-import-row input[type=url] { flex: 1 1 320px; max-width: 460px; }

/* 画像選択モーダル */
.lpimg-modal { position: fixed; inset: 0; background: rgba(20,30,50,.55); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lpimg-modal[hidden] { display: none; }
body.lpimg-open { overflow: hidden; }
.lpimg-dialog { background: var(--panel); color: var(--text); border-radius: var(--radius); box-shadow: 0 12px 44px rgba(20,30,50,.32); width: 100%; max-width: 920px; max-height: 88vh; display: flex; flex-direction: column; }
.lpimg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.lpimg-srcurl { font-size: 12px; margin-top: 2px; word-break: break-all; }
.lpimg-x { background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--muted); }
.lpimg-tabs { margin: 10px 18px; }
.lpimg-grid { padding: 14px 18px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.lpimg-empty { padding: 24px 18px; text-align: center; }
.lpimg-card { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.lpimg-card[hidden] { display: none; }
.lpimg-card.is-broken { opacity: .45; }
.lpimg-check { position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,.9); border-radius: 4px; padding: 1px 3px; }
.lpimg-thumb { height: 120px; display: flex; align-items: center; justify-content: center; background: var(--panel-2, #f4f5f8); border-radius: 6px; overflow: hidden; }
.lpimg-thumb img { max-width: 100%; max-height: 120px; object-fit: contain; }
.lpimg-cat { font-size: 12px; width: 100%; }
/* 説明文は2行で「…」。max-height だと行の途中で切れて省略記号も出ないので line-clamp にする */
.lpimg-alt { font-size: 11px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lpimg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line-soft); }
.lpimg-foot-actions { display: flex; gap: 10px; }
@media (max-width: 640px) { .lpimg-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } }

/* LP一括分析 進捗モーダル */
.lppipe-modal { position: fixed; inset: 0; background: rgba(20,30,50,.55); z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lppipe-modal[hidden] { display: none; }
body.lppipe-open { overflow: hidden; }
.lppipe-dialog { background: var(--panel); color: var(--text); border-radius: var(--radius); box-shadow: 0 12px 44px rgba(20,30,50,.32); width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
.lppipe-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.lppipe-stepper { display: flex; align-items: flex-start; padding: 18px 18px 4px; gap: 4px; }
.lppipe-step { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.lppipe-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--panel-2,#eef0f4); color: var(--muted); border: 2px solid var(--line); }
.lppipe-step.is-done .lppipe-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.lppipe-step.is-pending .lppipe-dot { border-color: var(--primary); color: var(--primary); }
.lppipe-step.is-error .lppipe-dot { border-color: #dc2626; color: #dc2626; }
.lppipe-step-l { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lppipe-conn { flex: 1 1 auto; height: 2px; background: var(--line); min-width: 8px; margin-top: 12px; }
.lppipe-body { padding: 8px 18px 16px; text-align: center; }
.lppipe-ring { width: 118px; height: 118px; border-radius: 50%; margin: 8px auto 12px; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--primary) 0%, var(--line-soft) 0); }
.lppipe-ring-inner { width: 90px; height: 90px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
.lppipe-cur { font-weight: 600; margin-bottom: 10px; }
.lppipe-list { list-style: none; margin: 0 auto 10px; padding: 0; max-width: 320px; text-align: left; }
.lppipe-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.lppipe-list .lppipe-st { margin-left: auto; font-size: 12px; }
.lppipe-ic { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; flex: none; }
.lppipe-ic.is-done { background: var(--primary); color: #fff; }
.lppipe-ic.is-error { color: #dc2626; }
.lppipe-ic.is-wait { border: 2px solid var(--line); }
.lppipe-ic.is-pending { border: 2px solid var(--primary); border-top-color: transparent; animation: busy-spin .9s linear infinite; }
.lppipe-note { text-align: left; line-height: 1.6; }
.lppipe-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line-soft); }

/* ===== 商材ワークスペース（制作コンソール・第1段） ===== */
.ws { --ws-signal:#d95d28; --ws-signal-ink:#b0481a; --ws-signal-soft:#f8e7db; --ws-good:#1f9d57; --ws-good-soft:#e2f2e9;
      --ws-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --ws-rad:12px; }
/* ページの最大幅は .container（1440px）に統一する。
   以前ここに max-width:1120px があり、商材一覧やワークスペースだけ内容が狭く、
   ページ見出し・ボタンと右端が揃っていなかった。 */
.ws .mono { font-family: var(--ws-mono); font-variant-numeric: tabular-nums; }
.ws-topbar { margin-bottom:16px; position:relative; }
.ws-switch { font-family:inherit; font-size:14px; color:var(--heading); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 16px; cursor:pointer; }
.ws-switch b { font-weight:700; }
.ws-caret { color:var(--muted); margin-left:4px; }
.ws-pop { position:absolute; top:calc(100% + 6px); left:0; width:min(400px,92vw); background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 40px rgba(33,37,41,.16); padding:12px; z-index:60; }
.ws-pop[hidden]{ display:none; }
.ws-pop-search input { width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:13px; color:var(--text); }
.ws-pop-label { font-family:var(--ws-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:12px 4px 6px; }
.ws-pop-list { display:flex; flex-direction:column; gap:2px; max-height:300px; overflow:auto; }
.ws-pop-item { display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:9px; text-decoration:none; }
.ws-pop-item:hover { background:var(--bg); }
.ws-pop-item.on { background:var(--ws-signal-soft); }
.ws-pop-av { width:32px; height:32px; border-radius:8px; background:var(--bg); border:1px solid var(--line); display:grid; place-items:center; font-weight:800; font-size:12px; color:var(--muted); flex:none; }
.ws-pop-item.on .ws-pop-av { background:var(--ws-signal); color:#fff; border-color:var(--ws-signal); }
.ws-pop-main { min-width:0; flex:1; display:flex; flex-direction:column; }
.ws-pop-name { font-size:14px; font-weight:700; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-pop-cat { font-size:12px; color:var(--muted); }
.ws-pop-pct { font-size:13px; font-weight:700; color:var(--ws-signal-ink); }
.ws-pop-foot { display:flex; justify-content:space-between; gap:10px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); flex-wrap:wrap; }

.ws-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.ws-name-row { display:flex; align-items:center; gap:11px; }
.ws-name { font-size:24px; font-weight:800; color:var(--heading); margin:0; letter-spacing:-.01em; }
.ws-live { font-family:var(--ws-mono); font-size:11px; font-weight:600; color:var(--ws-good); letter-spacing:.06em; display:inline-flex; align-items:center; gap:5px; }
.ws-live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--ws-good); }
.ws-live.off { color:var(--muted); } .ws-live.off::before { background:var(--muted); }
.ws-cat { font-size:14px; color:var(--muted); margin-top:4px; }
.ws-gauge { min-width:230px; }
.ws-gauge-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.ws-gauge-label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.ws-gauge-pct { font-size:22px; font-weight:700; color:var(--heading); }
.ws-gauge-bar { height:7px; border-radius:4px; background:var(--line); margin-top:6px; overflow:hidden; }
.ws-gauge-fill { height:100%; background:linear-gradient(90deg,var(--ws-signal),#e89b3f); border-radius:4px; }
.ws-gauge-read { font-size:11px; color:var(--muted); margin-top:7px; letter-spacing:.02em; }
.ws-gauge-read b { color:var(--text); }

.ws-flow { display:flex; align-items:stretch; gap:0; margin:20px 0 0; border:1px solid var(--line); border-radius:var(--ws-rad); overflow-x:auto; background:var(--panel); }
.ws-flow-arrow { display:flex; align-items:center; color:var(--muted); padding:0 2px; font-size:13px; flex:none; }
.ws-stage { flex:1 1 0; min-width:110px; padding:14px 15px; text-decoration:none; display:flex; flex-direction:column; justify-content:center; gap:5px; border-bottom:3px solid transparent; }
.ws-stage:hover { background:var(--bg); }
.ws-stage-n { font-size:16px; font-weight:700; color:var(--text); }
.ws-stage-s { font-size:11px; color:var(--muted); display:flex; align-items:center; }
.ws-ok { color:var(--ws-good); font-weight:700; margin-right:4px; }
.ws-stage.is-done { border-bottom-color:var(--ws-good); }
.ws-stage.is-done .ws-stage-n { color:var(--heading); }
.ws-stage.is-todo .ws-stage-n { color:var(--muted); }
.ws-stage.is-active { background:var(--panel); border-bottom-color:var(--ws-signal); }
.ws-stage.is-active .ws-stage-n { color:var(--ws-signal-ink); }
.ws-back { margin-left:12px; font-size:13px; color:var(--muted); text-decoration:none; }
.ws-back:hover { color:var(--ws-signal-ink); }
.ws-step { margin-top:16px; }
.ws-step .appeal-lib { margin:0; }
.ws-mat-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.ws-mat-group { padding:12px 0; border-top:1px solid var(--line-soft); }
.ws-mat-group:first-of-type { border-top:0; }
.ws-mat-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.ws-mat-list.is-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.ws-mat-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; }
.ws-mat-list.is-grid .ws-mat-item { flex-direction:column; align-items:stretch; text-align:center; }
.ws-mat-thumb { width:48px; height:48px; object-fit:cover; border-radius:6px; border:1px solid var(--line); flex:none; }
.ws-mat-list.is-grid .ws-mat-thumb { width:100%; height:80px; }
.ws-mat-body { flex:1; min-width:0; }
.ws-mat-label { font-size:13px; font-weight:600; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ws-mat-snip { font-size:12px; color:var(--muted); margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ws-cols { display:grid; grid-template-columns:1fr 340px; gap:16px; margin-top:16px; align-items:start; }
@media (max-width:900px){ .ws-cols { grid-template-columns:1fr; } }
.ws-main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.ws-side { display:flex; flex-direction:column; gap:16px; }
.ws-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--ws-rad); padding:18px; box-shadow:var(--shadow); }
.ws-kicker { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.ws-now-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ws-now-badge { font-size:11px; font-weight:600; color:var(--ws-signal-ink); background:var(--ws-signal-soft); border-radius:999px; padding:2px 10px; }
.ws-now-title { font-size:18px; font-weight:800; color:var(--heading); margin:8px 0 4px; }
.ws-now-desc { font-size:14px; color:var(--muted); margin:0 0 14px; }
.ws-now-actions { display:flex; gap:8px; flex-wrap:wrap; }
.ws .ws-btn { background:var(--ws-signal); border-color:var(--ws-signal); color:#fff; }
.ws .ws-btn:hover { background:var(--ws-signal-ink); border-color:var(--ws-signal-ink); }
.ws-progline { display:flex; align-items:center; margin-top:18px; }
.ws-progline-node { width:24px; height:24px; border-radius:50%; border:2px solid var(--line); background:var(--panel); display:grid; place-items:center; font-size:12px; color:#fff; flex:none; }
.ws-progline-node.is-done { background:var(--ws-good); border-color:var(--ws-good); }
.ws-progline-node.is-todo { background:var(--bg); }
.ws-progline-sep { flex:1; height:2px; background:var(--line); margin:0 2px; }
.ws-progline-sep.on { background:var(--ws-good); }
.ws-progline-labels { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--muted); }
.ws-progline-labels span { flex:1; text-align:center; }
.ws-progline-labels span:first-child { text-align:left; } .ws-progline-labels span:last-child { text-align:right; }

.ws-activity { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ws-activity li { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; }
.ws-act-ic { width:8px; height:8px; border-radius:50%; flex:none; background:var(--muted); }
.ws-act-asset { background:var(--primary); } .ws-act-appeal { background:var(--ws-signal); } .ws-act-gen { background:var(--ws-good); }
.ws-act-label { flex:1; color:var(--text); }
.ws-act-ts { font-size:11px; color:var(--muted); }

.ws-qa { display:flex; flex-direction:column; gap:4px; margin-top:10px; }
.ws-qa-item { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; text-decoration:none; color:var(--text); }
.ws-qa-item:hover { border-color:var(--ws-signal); }
.ws-qa-top { background:var(--ws-signal-soft); border-color:transparent; }
.ws-qa-tag { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--ws-signal-ink); border:1px solid var(--ws-signal); border-radius:4px; padding:1px 6px; }
.ws-qa-name { flex:1; font-size:14px; font-weight:600; }
.ws-qa-top .ws-qa-name { color:var(--ws-signal-ink); font-weight:700; }
.ws-qa-arrow { color:var(--muted); font-size:16px; }
.ws-info { display:grid; grid-template-columns:auto 1fr; gap:8px 14px; margin:10px 0 14px; font-size:13px; }
.ws-info dt { color:var(--muted); } .ws-info dd { margin:0; color:var(--text); text-align:right; font-weight:600; }

/* 商材カード一覧（すべての商材） */
.pcards-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.pcards-search { flex:1 1 220px; max-width:320px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; color:var(--text); }
.pcards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.pcard { display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); transition:border-color .15s, transform .1s; }
.pcard:hover { border-color:var(--ws-signal); transform:translateY(-1px); }
.pcard-top { display:flex; align-items:center; justify-content:space-between; }
.pcard-av { width:38px; height:38px; border-radius:9px; background:var(--ws-signal-soft); color:var(--ws-signal-ink); display:grid; place-items:center; font-weight:800; font-size:13px; }
.pcard-live { font-size:11px; font-weight:600; color:var(--ws-good); display:inline-flex; align-items:center; gap:5px; }
.pcard-live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ws-good); }
.pcard-live.off { color:var(--muted); } .pcard-live.off::before { background:var(--muted); }
.pcard-name { font-size:16px; font-weight:800; color:var(--heading); margin-top:12px; }
.pcard-cat { font-size:13px; color:var(--muted); margin-top:2px; }
.pcard-gauge { display:flex; align-items:center; gap:10px; margin-top:12px; }
.pcard-bar { flex:1; height:6px; border-radius:3px; background:var(--line); overflow:hidden; }
.pcard-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--ws-signal),#e89b3f); }
.pcard-gauge .mono { font-size:13px; font-weight:700; color:var(--heading); }
.pcard-next { font-size:11px; color:var(--muted); margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pmgmt-head { font-size:15px; color:var(--heading); margin:28px 0 6px; }

/* ===== 商材から生成v2（案レビュー：設計項目つきカード＋事実台帳） ===== */

.gv2-ideas { display: grid; gap: 12px; margin: 10px 0 14px; }
.gv2-idea { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 12px 14px; }
.gv2-idea.is-flag { border-color: var(--warning); box-shadow: inset 3px 0 0 var(--warning); }
.gv2-stream { flex: 0 0 auto; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 8px; }
.gv2-mono { font-size: 13px; color: var(--heading); margin: 0 0 8px; padding-left: 2px; }
.gv2-idea-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.gv2-idea-head .genfp-idea-title { flex: 1; font-weight: 600; }
.gv2-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gv2-copy { border-left: 3px solid var(--primary); padding-left: 10px; margin-bottom: 8px; }
.gv2-copy-row { display: flex; gap: 8px; font-size: 13px; margin: 2px 0; }
.gv2-copy-k { flex: 0 0 44px; color: var(--muted); font-size: 12px; padding-top: 1px; }
.gv2-copy-v { color: var(--heading); font-weight: 500; }
.gv2-prompt > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.gv2-prompt textarea { width: 100%; margin-top: 6px; font-size: 13px; line-height: 1.6; }

/* ===== 商材から生成v3：調整スライダー（ダイヤル） =====
   ※ 以前ここにあった .gv2-dials / .gv2-dial の横幅指定（max-width:320px）は、
      いまの1行レイアウトに残っていて右側がデッドスペースになる原因だったので撤去した。
      実際の指定は下の「.gv2-dial { display:flex … }」以降にある。 */
.gv2-dial-ticks span { flex: 1; text-align: center; }
.gv2-dial-ticks span:first-child { text-align: left; }
.gv2-dial-ticks span:last-child { text-align: right; }

/* 設定：固定モデルの表示 */
.fixed-model { display: inline-block; padding: 6px 12px; background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; color: var(--heading); }
.fixed-model code { font-size: 14px; font-weight: 600; }

/* ===== 商材から生成 v3/v4/4コマ パネル：カード型（2026-09-03〜）
   左＝1 素材（選んだ商材・LPのカード）／[選び方]／仕上がり（プリセットのカード）／生成設定／スタイル・タグ（アコーディオン）
   右＝「今回の設定」（要約・固定）＋作成ボタン。つまみのボタン／スライダー切替は .gv2-ctl-* のまま ===== */
.gv2 { max-width: none; }
.gv2 [hidden] { display: none !important; } /* display:flex/grid の要素でも hidden 属性を効かせる（LPの行・右レールの見出しなど） */
.gv2-badge { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); flex: none; align-self: center; }
.gv2-view-l { font-size: 11px; color: var(--muted); }
.gv2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
/* 保存モード（スケジュールの画面）：右の要約を出さないので1列 */
.gv2-grid.gv2-grid-single { grid-template-columns: minmax(0, 1fr); }
.gv2-rotate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 10px 0 0; }
.gv2-main { min-width: 0; }
.gv2-card { margin-bottom: 16px; }
.gv2-card:last-child { margin-bottom: 0; }
.gv2-card-h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.gv2-card-t { flex: 1; min-width: 0; }
.gv2-card-t h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--heading); line-height: 1.5; }
.gv2-card-t .hint { margin: 1px 0 0; }
.gv2-card-b { margin-left: 34px; }
.gv2-step-no { width: 24px; height: 24px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.gv2-badge-warn { border: 1px solid var(--warning); background: #fff8ec; color: #8a5a12; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; align-self: center; }
.gv2-reset { appearance: none; border: none; background: none; color: var(--primary); font: inherit; font-size: 12px; cursor: pointer; padding: 0; align-self: center; }
.gv2-reset:hover { text-decoration: underline; }
/* 生成開始で足りない項目（商材・LP・スワイプ）があったとき、その場所へ動かして少しのあいだ枠で目立たせる（JS が付け外し）。
   色は変数なのでダークでもそのまま。広がる光は動きを減らす設定では出さない */
.gv2-attn { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--radius); animation: gv2-attn 1.1s ease-out 2; }
@keyframes gv2-attn { from { box-shadow: 0 0 0 0 rgba(77, 141, 255, .45); } to { box-shadow: 0 0 0 12px rgba(77, 141, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .gv2-attn { animation: none; } }

/* .gv2-seg の基本の見た目は「切り替え（セグメント型）」の共通ルール（ファイル前半）にある */
.gv2-seg button.std { background: var(--surface-hover); color: var(--text); font-weight: 600; }
.gv2-seg button.std.on { background: var(--primary); color: #fff; }
.gv2-seg button:disabled { opacity: .5; cursor: not-allowed; }
.gv2-seg-sm button { font-size: 11px; padding: 4px 9px; }
.gv2-seg-dial button { font-size: 12px; padding: 6px 11px; }

/* 1 素材：選んだ商材・LPのカード。細かい選択は下の畳み（.gv2-adj）に */
.gv2-lpcard { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; background: var(--panel); }
.gv2-lpcard-thumb { flex: none; width: 168px; height: 96px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.gv2-lpcard-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gv2-lpcard-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.gv2-lpcard-name { font-size: 15px; font-weight: 700; color: var(--heading); }
.gv2-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gv2-picker select { width: auto; min-width: 240px; margin: 0; }
.gv2-lprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gv2-matsum { font-size: 12px; margin: 0; }
.gv2-mat-group { margin-bottom: 12px; }
.gv2-mat-group:last-of-type { margin-bottom: 0; }
.gv2-mat-h { font-size: 12px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.gv2-mat-h .hint { font-weight: 400; margin-left: 6px; }
.gv2-chips { display: flex; flex-wrap: wrap; gap: 7px; }
/* ===== チップは2種類だけ：読むだけ（.chip .av-chip .sm-chip）と 押せる（.gv2-chip .tag-chip）。押せるものだけ枠を濃くして hover を付ける ===== */
.chip, .av-chip, .sm-chip { display: inline-block; border: 1px solid var(--line-soft); background: var(--panel-soft); color: var(--muted); border-radius: 999px; padding: 2px 9px; font-size: 12px; line-height: 1.5; }
.gv2-chip, .tag-chip { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); border-radius: 999px;
                       padding: 5px 13px; font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; text-decoration: none; }
.gv2-chip:hover, .tag-chip:hover { background: var(--bg); border-color: var(--primary); text-decoration: none; }
.gv2-chip.on, .gv2-chip-sel:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
/* 押せないチップ（例：分析が終わっていないLP）。hover でも押せそうに見せない */
.gv2-chip:disabled, .gv2-chip:disabled:hover { cursor: not-allowed; opacity: .6; background: var(--panel); border-color: var(--line); color: var(--muted); font-weight: 400; }
.gv2-chip-sel input { display: none; }
.gv2-mats-empty { font-size: 13px; color: var(--muted); }

/* 畳み（素材を細かく選ぶ／自分で細かく設定する）：破線の1行。開くと下に本体 */
.gv2-adj > summary { cursor: pointer; font-size: 13px; color: var(--text); border: 1px dashed var(--line); border-radius: var(--radius); padding: 9px 14px; background: var(--panel-soft); list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.gv2-adj > summary::-webkit-details-marker { display: none; }
.gv2-adj > summary::before { content: "▸"; color: var(--muted); }
.gv2-adj[open] > summary::before { content: "▾"; }
.gv2-fold-st { color: var(--muted); font-size: 12px; }
.gv2-adj-b { padding: 14px 2px 2px; }
.gv2-ctlrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.gv2-ctlrow-note { margin-left: auto; font-size: 12px; }
.gv2-adj-g { margin-bottom: 14px; }
.gv2-adj-gh { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.gv2-dial { display: flex; align-items: center; gap: 20px; padding: 9px 0; }
.gv2-dial-l { width: 168px; flex: none; font-size: 14px; color: var(--heading); }
.gv2-dial-c { flex: 1; min-width: 0; }
/* スライダーは行いっぱいに。太くするぶん、左側の塗りは --p（JSが更新）で自前で描く */
.gv2-slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; max-width: none;
                                margin: 0; display: block; background: transparent; cursor: pointer; height: 22px; }
.gv2-slider input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px;
    background: linear-gradient(to right, var(--primary) var(--p, 50%), var(--line-soft) var(--p, 50%)); }
.gv2-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: var(--primary);
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(33,37,41,.25); }
.gv2-slider input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line-soft); }
.gv2-slider input[type=range]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--primary); }
.gv2-slider input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid #fff; border-radius: 50%;
    background: var(--primary); box-shadow: 0 1px 4px rgba(33,37,41,.25); }
.gv2-dial-ticks { display: flex; justify-content: space-between; gap: 8px; max-width: none;
                  font-size: 12px; color: var(--muted); margin-top: 4px; }
.gv2-dial-ticks span { white-space: nowrap; flex: 1; text-align: center; }
.gv2-dial-ticks span:first-child { text-align: left; }
.gv2-dial-ticks span:last-child { text-align: right; }
.gv2-ctl-seg .gv2-slider { display: none; }
.gv2-ctl-slider .gv2-seg-dial { display: none; }

.gv2-preview.hidden { display: none; }
.gv2-preview { border: 1px solid #d7e4f7; background: #f7fafe; border-radius: var(--radius); padding: 11px 13px; margin-top: 12px; }
.gv2-preview-h { font-size: 11px; font-weight: 700; color: var(--primary-ink); margin-bottom: 5px; }
.gv2-preview-b { font-size: 12px; color: var(--text); line-height: 1.8; }

/* 仕上がり：プリセットのカード（アイコン＋名前＋ひとこと）。1つだけ選ぶ */
.gv2-pcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gv2-pcard { position: relative; appearance: none; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 14px 10px 12px;
             display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; cursor: pointer; font: inherit; color: var(--text);
             transition: border-color .12s, background .12s; }
.gv2-pcard:hover { border-color: var(--primary); background: var(--bg); }
.gv2-pcard.on { border-color: var(--primary); background: #eff6ff; }
.gv2-pcard-img { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); }
.gv2-pcard-img img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px;
                     transform-origin: center top; transition: transform .18s ease, box-shadow .18s ease; }
/* サンプルにマウスを乗せたら2倍に拡大（周りのカードの上に重ねる）。端の列は画面の外へはみ出さないよう内側へ広げる */
@media (hover: hover) {
    .gv2-pcard:hover { z-index: 20; }
    .gv2-pcard-img:hover img { transform: scale(2); z-index: 20; box-shadow: 0 12px 32px rgba(15, 23, 42, .35); }
    .gv2-pcards > .gv2-pcard:nth-child(5n+1) .gv2-pcard-img img { transform-origin: left top; }
    .gv2-pcards > .gv2-pcard:nth-child(5n) .gv2-pcard-img img { transform-origin: right top; }
}
@media (hover: hover) and (max-width: 1200px) {
    .gv2-pcards > .gv2-pcard:nth-child(n) .gv2-pcard-img img { transform-origin: center top; }
    .gv2-pcards > .gv2-pcard:nth-child(4n+1) .gv2-pcard-img img { transform-origin: left top; }
    .gv2-pcards > .gv2-pcard:nth-child(4n) .gv2-pcard-img img { transform-origin: right top; }
}
/* 列数の切り替え（下の「折り返し」）と同じ幅で、端の列の判定も 3列・2列用に置き換える */
@media (hover: hover) and (max-width: 900px) {
    .gv2-pcards > .gv2-pcard:nth-child(n) .gv2-pcard-img img { transform-origin: center top; }
    .gv2-pcards > .gv2-pcard:nth-child(3n+1) .gv2-pcard-img img { transform-origin: left top; }
    .gv2-pcards > .gv2-pcard:nth-child(3n) .gv2-pcard-img img { transform-origin: right top; }
}
@media (hover: hover) and (max-width: 640px) {
    .gv2-pcards > .gv2-pcard:nth-child(2n+1) .gv2-pcard-img img { transform-origin: left top; }
    .gv2-pcards > .gv2-pcard:nth-child(2n) .gv2-pcard-img img { transform-origin: right top; }
}
.gv2-pcard.on .gv2-pcard-img { border-color: var(--primary); }
.gv2-sample-note { margin: 0 0 8px; font-size: 12px; }
.gv2-pcard-i { width: 36px; height: 36px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.gv2-pcard-i svg { width: 20px; height: 20px; }
.gv2-pcard-n { font-size: 13px; font-weight: 600; color: var(--heading); line-height: 1.35; }
.gv2-pcard-d { font-size: 11px; color: var(--muted); line-height: 1.45; }
.gv2-preset-eff { margin: 12px 0 10px; font-size: 12px; }
.gv2-preset-eff strong { color: var(--heading); font-weight: 600; }

/* 生成設定：上段＝案の数／画質の2カラム、下段＝アスペクト比のカード */
.gv2-out { display: flex; flex-direction: column; gap: 12px; }
.gv2-out-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.gv2-grp { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--panel); }
.gv2-out > .gv2-grp, .gv2-out-row > .gv2-grp { height: 100%; }
.gv2-grp-l { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 600; color: var(--heading); margin-bottom: 8px; }
.gv2-grp-sub { font-size: 12px; font-weight: 400; color: var(--muted); }
.gv2-grp-flag { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.gv2-grp-flag:empty { display: none; }
.gv2-grp-flag.is-ok { color: #2b7a4b; background: #e7f6ed; }
.gv2-grp-flag.is-warn { color: #8a5a10; background: #fdf3e2; }
.gv2-grp-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; }
.gv2-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 8px 0 0; }
.gv2-check-alone { margin-top: 6px; }
.gv2-check input { margin: 0; }

/* 案の数・画質：ボタンの中に単位や補足を入れて、何が違うのか読めるようにする */
.gv2-seg-count, .gv2-seg-q { display: flex; width: 100%; }
.gv2-seg-count > button, .gv2-seg-q > button { flex: 1 1 0; }
.gv2-seg-count > button { padding: 8px 6px; font-size: 15px; font-weight: 600; }
.gv2-seg-count > button small { font-size: 11px; font-weight: 400; margin-left: 1px; }
.gv2-seg-q > button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 6px; line-height: 1.3; }
.gv2-seg-q > button b { font-size: 14px; font-weight: 600; }
.gv2-seg-q > button small { font-size: 10px; font-weight: 400; opacity: .85; white-space: nowrap; }

/* アスペクト比：比率・実寸・使いどころをカードで見せる（チェックボックスに見えないように） */
.gv2-ratios { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.gv2-rcard { position: relative; display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px;
             border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); cursor: pointer;
             font: inherit; color: var(--text); transition: border-color .12s, background .12s; }
.gv2-rcard:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.gv2-rcard.on { border-color: var(--primary); background: var(--primary-soft); }
.gv2-rcard-b { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
               border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 13px; font-weight: 700; }
.gv2-rcard.on .gv2-rcard-b { background: var(--primary); color: #fff; }
.gv2-rcard-m { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gv2-rcard-n { font-size: 14px; font-weight: 600; color: var(--heading); }
.gv2-rcard-px { font-size: 11px; color: var(--muted); }
.gv2-rcard-u { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv2-rcard-ck { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 999px;
                background: var(--primary); color: #fff; display: none; align-items: center; justify-content: center; }
.gv2-rcard.on .gv2-rcard-ck { display: flex; }
.gv2-rcard-ck svg { width: 11px; height: 11px; }
/* 全比率のときは「どれか1つ」の選択が効かないので、カードを控えめにする */
.gv2-ratios.is-all .gv2-rcard { opacity: .45; }
.gv2-ratios.is-all .gv2-rcard.on { opacity: .7; }

/* 全比率で一括生成：枚数が3倍になることが分かるように1行で置く */
.gv2-allratio { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 12px;
                border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); cursor: pointer; }
.gv2-allratio input { margin: 0; flex: none; }
.gv2-allratio-m { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gv2-allratio-n { font-size: 13px; font-weight: 600; color: var(--heading); }
.gv2-allratio-d { font-size: 11px; color: var(--muted); line-height: 1.5; }
.gv2-allratio-x { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--primary-ink);
                  background: var(--primary-soft); border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.gv2-allratio:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

/* 実行ボタン：右レールではなくメインカラムの一番下 */
.gv2-go { text-align: center; }
/* 追加指示（既定は畳む） */
.gv2-extra { text-align: left; margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); padding: 10px 12px; }
.gv2-extra > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--heading); }
.gv2-extra textarea { width: 100%; margin: 8px 0 0; font: inherit; font-size: 13px; resize: vertical; }
.gv2-extra .hint { margin: 6px 0 0; }
.gv2-go .gv2-card-h { text-align: left; }
.gv2-go-btns { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gv2-go-main { min-width: 280px; padding: 12px 28px; font-size: 15px; font-weight: 600; }
.gv2-go-auto { font-size: 13px; padding: 9px 18px; white-space: normal; }
/* 主ボタンが「画像まで生成する」の版（4コマ）は横並び。左＝青／右＝白 */
.gv2-go-btns.is-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gv2-go-btns.is-row .gv2-go-main, .gv2-go-second { min-width: 240px; padding: 12px 22px; font-size: 15px; font-weight: 600; white-space: normal; }
.gv2-go-status { display: block; margin-top: 8px; overflow-wrap: anywhere; }
.gv2-go-short { margin-top: 8px; text-align: center; }   /* 生成開始の「残り◯・足りません」（2026-11-02〜・ボタンの並びの下） */

/* 任意：スタイル・タグのアコーディオン。閉じていても右端に状態（指定なし／未設定）が読める */
.gv2-accs { padding: 4px 16px; }
.gv2-acc { border-top: 1px solid var(--line-soft); }
.gv2-acc:first-child { border-top: none; }
.gv2-acc > summary { display: flex; align-items: center; gap: 10px; padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--heading); cursor: pointer; list-style: none; }
.gv2-acc > summary::-webkit-details-marker { display: none; }
.gv2-acc-ico { width: 18px; height: 18px; color: var(--muted); flex: none; }
.gv2-acc-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
.gv2-acc-st { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.gv2-acc-st.hidden, .gv2-badge-warn.hidden, .gv2-reset.hidden { display: none; }
.gv2-acc > summary .gv2-badge-warn { margin-left: auto; }
.gv2-acc-st + .gv2-badge-warn, .gv2-acc-st:not(.hidden) ~ .gv2-badge-warn { margin-left: 0; }
.gv2-acc-chev { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform .12s; }
.gv2-acc[open] > summary .gv2-acc-chev { transform: rotate(180deg); }
.gv2-acc-b { padding: 4px 4px 16px 32px; }
.gv2-style-lead { margin: 0 0 8px; }
.gv2-acc-b .var-genres { margin: 0; }
.gv2-style-custom { display: block; font-size: 13px; margin-top: 10px; }
.gv2-style-custom input { display: block; width: 100%; max-width: 420px; margin-top: 4px; }

/* 右：今回の設定 */
.gv2-rail { position: sticky; top: 24px; }
.gv2-rail-h { font-size: 16px; font-weight: 600; color: var(--heading); margin-bottom: 12px; }
.gv2-rail-lp { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.gv2-rail-thumb { width: 64px; height: 44px; flex: none; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
.gv2-rail-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.gv2-rail-lpmain { min-width: 0; }
.gv2-rail-pname { font-size: 14px; font-weight: 700; color: var(--heading); line-height: 1.35; overflow-wrap: anywhere; }
.gv2-rail-lpname { margin-top: 4px; }
.gv2-rail-lpname .chip { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.gv2-sum { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.gv2-sum-i { width: 32px; height: 32px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.gv2-sum-i svg { width: 16px; height: 16px; }
.gv2-sum-m { min-width: 0; }
.gv2-sum-k { font-size: 12px; color: var(--muted); }
.gv2-sum-v { font-size: 14px; color: var(--heading); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.gv2-sum-v small { font-weight: 400; color: var(--muted); font-size: 12px; }
.gv2-propose-note { margin: 8px 0 0; font-size: 12px; }

/* 折り返し：900px 以下でレールを下に。プリセットのカードは 5→4→3→2 列 */
@media (max-width: 1200px) { .gv2-pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) {
    .gv2-grid { grid-template-columns: minmax(0, 1fr); }
    .gv2-rail { position: static; }
    .gv2-out-row { grid-template-columns: minmax(0, 1fr); }
    .gv2-go-main { min-width: 0; width: 100%; }
    .gv2-pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gv2-lpcard { flex-wrap: wrap; }
    .gv2-dial { flex-wrap: wrap; gap: 6px 20px; }
}
@media (max-width: 640px) { .gv2-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gv2-card-b { margin-left: 0; } }

/* ===== 分析結果の要点ビュー ===== */
.av { border-top: 1px solid var(--line-soft); margin-top: 10px; padding-top: 12px; }
.av-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.av-title { font-size: 14px; font-weight: 700; color: var(--heading); }
.av-meta { font-size: 11px; color: var(--muted); }
.av-mat { border: 1px solid #d7e4f7; background: #f7fafe; border-radius: var(--radius); padding: 11px 13px; margin-bottom: 12px; }
.av-mat-h { font-size: 11px; font-weight: 700; color: var(--primary-ink); margin-bottom: 7px; }
.av-mat-b { display: flex; flex-direction: column; gap: 6px; }
.av-mat-row { display: flex; gap: 10px; align-items: baseline; }
.av-mat-l { flex: 0 0 116px; font-size: 11px; color: var(--muted); }
.av-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.av-chip-none { border-style: dashed; color: var(--muted); }
.av-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: start; }
.av-toc { display: flex; flex-direction: column; gap: 2px; }
.av-toc-i { appearance: none; border: none; background: none; font: inherit; text-align: left; font-size: 12px; color: var(--text); padding: 5px 8px; border-radius: 5px; cursor: pointer; }
.av-toc-i:hover { background: #f5f7fb; }
.av-toc-i.on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.av-toc-i.av-warn { color: #8a5a12; }
.av-toc-i.av-time { color: var(--muted); }
.av-sec { display: none; }
.av-sec.on { display: block; }
.av-sec-h { font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.av-sec-b { font-size: 13px; color: var(--text); line-height: 1.75; }
.av-sec-b .av-h { font-size: 12px; font-weight: 700; color: var(--heading); margin: 12px 0 4px; }
.av-sec-b .av-p { margin: 5px 0; }
.av-sec-b .av-ul { margin: 5px 0; padding-left: 20px; }
.av-sec-b .av-ul li { margin: 2px 0; }
/* 要点ビューはスクロール箱なのに枠が無く、文章が行の途中で切れて壊れて見えていた。タグ欄と同じ枠つきにする */
.av-plain { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 12px 14px 0; }
.av-tablewrap { overflow-x: auto; margin: 8px 0; }
.av-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.av-table th { text-align: left; background: #f7f8fa; color: var(--muted); font-weight: 600; padding: 6px 9px; border: 1px solid var(--line); white-space: nowrap; }
.av-table td { padding: 6px 9px; border: 1px solid var(--line); vertical-align: top; }
.av-raw { margin-top: 12px; }
.av-raw > summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.av-rawtext { max-height: 360px; overflow: auto; margin-top: 8px; font-size: 12px; background: var(--panel-soft); padding-bottom: 0; }
@media (max-width: 900px) { .av-body { grid-template-columns: 1fr; } }

/* ===== 商材一覧：商材 ＞ LP ＞ 素材・分析・訴求案 ===== */
.plist { display: flex; flex-direction: column; gap: 14px; }
.pcard2 { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 17px; }
.pcard2.is-nolp { border-color: var(--warning); }
.pcard2-h { display: flex; align-items: center; gap: 12px; }
.pcard2-t { min-width: 0; }
.pcard2-name { font-size: 15px; font-weight: 700; color: var(--heading); text-decoration: none; }
.pcard2-name:hover { color: var(--primary); }
.pcard2-cat { font-size: 12px; color: var(--muted); }
.pcard2-warn { border: 1px solid var(--warning); background: #fff8ec; color: #8a5a12; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.pcard2-act { margin-left: auto; display: flex; gap: 8px; }
.lprows { display: flex; flex-direction: column; gap: 8px; margin: 13px 0 0 46px; }
.lprow { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 9px 12px; background: var(--panel-soft); text-decoration: none; color: var(--text); }
.lprow:hover { border-color: var(--primary); background: #f7fafe; text-decoration: none; }
.lprow-i { color: var(--primary); flex: none; }
.lprow-un .lprow-i { color: var(--muted); }
.lprow-t { min-width: 0; }
.lprow-n { font-size: 13px; font-weight: 600; color: var(--heading); }
.lprow-u { font-size: 11px; color: #adb5bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
.lprow-c { margin-left: auto; display: flex; gap: 6px; flex: none; }
.lprow-c span { border: 1px solid var(--line-soft); background: var(--panel); border-radius: 5px; padding: 2px 8px; font-size: 12px; color: var(--text); }
.lprow-c b { color: var(--heading); }
.lprow-c .zero, .lprow-c .zero b { color: #adb5bd; }
.lpadd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0 46px; }
.lpadd input[type=url] { width: 320px; margin: 0; }
.lpadd input[type=text] { width: 180px; margin: 0; }
.lpadd .hint { flex-basis: 100%; }
@media (max-width: 900px) { .lprows, .lpadd { margin-left: 0; } .lpadd input[type=url], .lpadd input[type=text] { width: 100%; } }

/* ワークスペースのLP：パンくず＋セレクト */
.ws-lpnav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; }
.ws-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }
.ws-crumb a { color: var(--muted); text-decoration: none; }
.ws-crumb a:hover { color: var(--primary); text-decoration: underline; }
.ws-crumb-s { color: var(--line-strong); }
.ws-crumb-cur { color: var(--heading); font-weight: 600; }
.ws-crumb-u { font-size: 11px; color: #adb5bd !important; margin-left: 4px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lpsel { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; font-size: 12px; color: var(--muted); }
.ws-lpsel select { width: auto; min-width: 220px; margin: 0; }
.ws-lpsel-l { font-size: 11px; }
.ws-assign { border: 1px dashed var(--line); background: var(--panel-soft); border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px; }
.ws-assign-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ws-assign-t { font-size: 13px; color: var(--heading); }
.ws-assign-f select { width: auto; margin: 0; }
.lprow-wrap { display: flex; align-items: center; gap: 10px; }
.lprow-wrap .lprow { flex: 1; min-width: 0; }
.lprow-side { flex: none; }
.lprow-side .btn-link { appearance: none; border: none; background: none; padding: 0; font: inherit; font-size: 11px; color: var(--muted); cursor: pointer; }
.lprow-side .btn-link:hover { color: var(--primary); text-decoration: underline; }

/* 商材アバター：ロゴがあれば正方形の枠内に収めて表示（サイズ・形は変えない） */
.pcard-av.has-logo { background: #fff; border: 1px solid var(--line); overflow: hidden; padding: 3px; }
.pcard-av.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 商材の追加・編集モーダル */
.pmodal { position: fixed; inset: 0; z-index: 1000; display: none; }
.pmodal.is-open { display: block; }
.pmodal-bg { position: absolute; inset: 0; background: rgba(33, 37, 41, .45); }
.pmodal-box { position: relative; margin: 8vh auto 0; width: min(520px, calc(100% - 32px)); background: var(--panel); border-radius: 8px; box-shadow: 0 12px 40px rgba(33,37,41,.25); padding: 20px 22px 18px; max-height: 84vh; overflow: auto; }
.pmodal-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pmodal-h h2 { margin: 0; font-size: 16px; }
.pmodal-x { margin-left: auto; appearance: none; border: none; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.pmodal-x:hover { color: var(--heading); }
.pmodal-row { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.pmodal-row label { margin: 0; }
.pmodal-row input[type=number] { width: 120px; }
.pmodal-active { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.pcard2-edit { appearance: none; border: none; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.pcard2-edit:hover { color: var(--primary); text-decoration: underline; }
.page-head .btn { margin-left: auto; }

/* LPの準備画面（分析の進捗＋LP内画像の素材化） */
.lpstart-crumb { margin: -6px 0 16px; }
.lpstart { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.lpstart-col h2 { margin: 0 0 4px; font-size: 15px; }
.lpsteps { list-style: none; margin: 14px 0 0; padding: 0; }
.lpstep { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.lpstep:last-child { border-bottom: none; }
.lpstep-i { width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--line-strong); flex: none; }
.lpstep.is-done .lpstep-i { border-color: var(--success); background: var(--success); }
.lpstep.is-running .lpstep-i { border-color: var(--primary); border-right-color: transparent; animation: lpspin 1s linear infinite; }
.lpstep.is-error .lpstep-i { border-color: var(--danger); background: var(--danger); }
.lpstep-n { font-size: 13px; color: var(--heading); }
.lpstep.is-waiting .lpstep-n { color: var(--muted); }
.lpstep-s { margin-left: auto; font-size: 11px; color: var(--muted); }
@keyframes lpspin { to { transform: rotate(360deg); } }
.lpstart-links { margin-top: 14px; font-size: 13px; }
.lpimgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.lpimg { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.lpimg:has(input[data-lpimg-on]:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,92,251,.16); }
.lpimg-pic { display: block; position: relative; cursor: pointer; }
.lpimg-pic input { position: absolute; top: 7px; left: 7px; z-index: 1; }
.lpimg-pic img { display: block; width: 100%; height: 108px; object-fit: contain; background: #f7f8fa; }
.lpimg-cats { display: flex; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.lpimg-cats label { display: inline-flex; align-items: center; gap: 3px; margin: 0; }
.lpimg-actions { margin-top: 14px; }
@media (max-width: 900px) { .lpstart { grid-template-columns: 1fr; } }
.lpsteps-note { border: 1px solid var(--line-soft); background: var(--panel-soft); border-radius: var(--radius); padding: 11px 14px; margin: 4px 0 16px; }
.lpsteps-note-h { font-size: 12px; font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.lpsteps-note ol { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text); line-height: 1.9; }

/* LPの中身：素材・分析・訴求案の3列 */
.lpcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.lpcol { padding: 14px 16px; }
.lpcol-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lpcol-t { font-size: 14px; font-weight: 700; color: var(--heading); }
.lpcol-n { border: 1px solid var(--line-soft); background: var(--panel); border-radius: 5px; padding: 1px 8px; font-size: 11px; color: var(--muted); }
.lpcol-h .btn { margin-left: auto; }
.lpcol-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lpcol-list li { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 7px 9px; font-size: 13px; }
.lpcol-th { width: 34px; height: 26px; object-fit: cover; border-radius: 4px; flex: none; background: #f7f8fa; }
.lpcol-name { color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpcol-sub { margin-left: auto; font-size: 11px; color: var(--muted); flex: none; }
.lpcol-more { margin-top: 8px; font-size: 12px; color: var(--muted); }
@media (max-width: 1200px) { .lpcols { grid-template-columns: 1fr; } }

/* 分析ビュー：評価語の色分け・ペルソナカード・分析カード一覧 */
.av-v { border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; }
.av-v-hot { background: var(--primary); color: #fff; }
.av-v-ok { background: #eaf7ee; color: #1e7a45; }
.av-v-na { background: var(--surface-hover); color: var(--muted); }
.av-v-warn { background: #fff8ec; color: #8a5a12; }
.av-v-grade { min-width: 18px; display: inline-block; text-align: center; }
.av-g-A, .av-g-S { background: #eaf7ee; color: #1e7a45; }
.av-g-B { background: var(--primary-soft); color: var(--primary-ink); }
.av-g-C { background: #fff8ec; color: #8a5a12; }
.av-g-D { background: #fdecec; color: #a33; }
.av-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.av-card { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 11px 13px; background: var(--panel);
           border-left: 3px solid var(--primary); }
.av-card.is-latent { border-left-color: #b9a2e0; }
.av-card-h { font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: 6px; line-height: 1.5; }
.av-card-id { display: inline-block; background: var(--primary-soft); color: var(--primary-ink); border-radius: 5px;
              padding: 1px 6px; font-size: 11px; margin-right: 6px; font-family: var(--mono, monospace); }
.av-card.is-latent .av-card-id { background: #efe8fb; color: #543b86; }
.av-score { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.av-score-bar { flex: 1 1 auto; height: 5px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.av-score-bar i { display: block; height: 100%; background: var(--primary); }
.av-card.is-latent .av-score-bar i { background: #9b7fd4; }
.av-card .av-chips { margin-bottom: 7px; }
.av-card .av-sec-b { font-size: 12px; }
.pa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 0 0 16px; }
.pa-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel); }
.pa-card.is-pend { border-style: dashed; }
.pa-card-t { font-size: 13px; font-weight: 700; color: var(--heading); }
.pa-card-m { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* 素材ステップ：一覧は画像だけ。テキスト・URL・分析の素材は折りたたみに逃がす */
.asset-others { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.asset-others > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--heading); }
.asset-others > summary::marker { color: var(--muted); }
.asset-others > .hint { margin: 6px 0 10px; }

/* 素材ステップ：追加フォームを外したので1カラム */
.asset-layout.is-single { grid-template-columns: 1fr; }
/* LPステップ：フルページ撮影ブロック */
.lpcap .lpcap-l { display: block; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.lpcap .lpcap-l input { width: 100%; margin-top: 4px; }
.lpcap .fg-urlshot-note { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
/* 商材ホーム：LPを選ぶ */
.ws-lppick { margin-top: 4px; }
.ws-lppick-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ws-lppick-h .hint { margin: 4px 0 0; }
/* LPカードは2列（狭い画面では1列に落とす） */
.ws-lpgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 1200px) { .ws-lpgrid { grid-template-columns: 1fr; } }
.ws-lpcard { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line);
             border-radius: var(--radius); background: var(--panel); }
.ws-lpcard:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(20,40,80,.07); }
.ws-lpcard-main { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.ws-lpcard-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                 border-top: 1px solid var(--line-soft); padding-top: 9px; }
.ws-lpcard-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.ws-lpcard-act form { margin: 0; }
.ws-lphead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ws-lpcard-th { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--line-soft);
                display: flex; align-items: center; justify-content: center; }
.ws-lpcard-th img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ws-lpcard-noth { font-size: 12px; font-weight: 700; color: var(--muted); }
.ws-lpcard-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-lpcard-n { font-size: 14px; font-weight: 700; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lpcard-u { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lpcard-c { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-top: 3px; }
.ws-lpcard-c b { color: var(--text); }
.ws-lpcard-go { color: var(--muted); font-size: 18px; }
.ws-lpcard.is-un { border-style: dashed; }
.ws-lpall { margin-top: 12px; }
.ws-recent { margin-top: 18px; }

/* LP配下の共通ヘッダー：パンくず → LP名＋操作 → LPタブ → サブページ */
.wsh { margin: 0 0 18px; }
.wsh-crumb { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.wsh-crumb a { color: var(--muted); text-decoration: none; }
.wsh-crumb a:hover { color: var(--primary); text-decoration: underline; }
.wsh-crumb-cur { color: var(--heading); font-weight: 700; }
/* 名前が長くてもボタンを2段目に落とさない：折り返さず、左の「名前＋URL」だけを縮めて「…」にする */
.wsh-head { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; margin-top: 4px; }
.wsh-headl { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 auto; }
.wsh-t { font-size: 26px; font-weight: 800; color: var(--heading); margin: 0; letter-spacing: -.01em;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 3em; }
/* URLが並ぶときだけ、名前が場所を取りすぎないように上限をつける（URLも見えるように） */
.wsh-headl.has-url .wsh-t { max-width: 46%; }
.wsh-u { font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.wsh-u:hover { color: var(--primary); text-decoration: underline; }
.wsh-act { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* 画面が狭いときはボタンを下段へ（このときだけ2段になる） */
@media (max-width: 900px) {
    .wsh-head { flex-wrap: wrap; }
    .wsh-headl.has-url .wsh-t { max-width: 100%; }
    .wsh-act { width: 100%; justify-content: flex-end; }
}
/* 商材ページのLPタブ：下線タブ型（トップ／各LP／未仕分け＋「＋ LPを追加」）。ページ切替なのでセグメント型にはしない */
.wsh-tabs { display: flex; align-items: stretch; gap: 2px; margin-top: 14px; overflow-x: auto; }
.wsh-tab { padding: 8px 14px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap;
           border-bottom: 2px solid transparent; }
.wsh-tab:hover { color: var(--heading); }
.wsh-tab.is-on { color: var(--heading); font-weight: 700; border-bottom-color: var(--primary); }
.wsh-add { background: none; border: 0; cursor: pointer; padding: 8px 12px; font-size: 13px; color: var(--primary); white-space: nowrap; }
.wsh-add:hover { text-decoration: underline; }
.wsh-sub { display: flex; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: -1px; flex-wrap: wrap; }
.wsh-subi { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
            font-size: 13px; color: var(--muted); text-decoration: none; }
.wsh-subi:hover { background: var(--line-soft); color: var(--heading); }
.wsh-subi.is-on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.wsh-n { font-size: 11px; color: var(--muted); }
.wsh-subi.is-on .wsh-n { color: var(--primary-ink); }

/* 商材トップ（「すべて」タブ）の進捗ゲージ */
.ws-gauge-wide { margin: 0 0 18px; max-width: 420px; }

/* 共通ヘッダーのボタン：デザイン案の値をそのまま使う
   主ボタン #015cfb / 6px / 9px 18px / 13px 600、副ボタン #fff・#495057・枠#dee2e6 / 6px / 6px 12px / 12px */
/* 2つは並ぶので、寸法（padding・文字サイズ・行間・枠）は完全に揃える。色だけ変える */
.wsh-b, .wsh-bg { display: inline-block; font-family: inherit; line-height: 1.25; border-radius: 6px;
                  padding: 9px 18px; font-size: 13px; font-weight: 600; border: 1px solid transparent;
                  cursor: pointer; text-decoration: none; white-space: nowrap; }
.wsh-b { background: var(--primary); border-color: var(--primary); color: #fff; }
.wsh-b:hover { background: var(--primary-d); border-color: var(--primary-d); color: #fff; }
.wsh-bg { background: var(--panel); border-color: var(--line); color: var(--text); }
.wsh-bg:hover { border-color: var(--line-strong); color: var(--heading); }
.wsh-act form { display: inline-flex; margin: 0; }
/* カード内の「削除」＝控えめな赤 */
.btn-ghost.danger { color: var(--danger); border-color: #f0d3d3; }
.btn-ghost.danger:hover { background: #fdf3f3; border-color: #e3b6b6; color: var(--danger); }

/* 分析ステップ：分析を選ぶカード → 選んだ1つの詳細（デザイン案「分析結果の見せ方」） */
.pa-sel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .pa-sel { grid-template-columns: 1fr; } }
.acard { display: block; text-align: left; font: inherit; border: 1px solid var(--line); border-radius: 6px;
         padding: 12px 14px; background: var(--panel); text-decoration: none; color: inherit; cursor: pointer; }
.acard:hover { border-color: var(--primary); }
.acard.on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(1,92,251,.14); }
.acard.is-pend { border-style: dashed; }
.acard.is-add { border-style: dashed; color: var(--muted); text-align: center; font-size: 13px; }
.acard.is-add.on { color: var(--primary); border-color: var(--primary); box-shadow: none; }
.acard-h { font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: 5px; }
.acard-m { font-size: 11px; color: var(--muted); }
.pa-addpanel { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 14px 16px; margin-bottom: 18px; }
.pa-addpanel[hidden] { display: none; }
.pa-addpanel-h { display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700;
                 color: var(--heading); margin-bottom: 10px; flex-wrap: wrap; }
.pa-addgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pa-addi { border: 1px solid var(--line-soft); border-radius: 6px; padding: 11px 12px; }
.pa-addi-t { font-size: 12px; font-weight: 700; color: var(--heading); margin-bottom: 7px;
             display: flex; align-items: baseline; gap: 7px; }
.pa-addi .pa-run { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.pa-addi input[type="url"] { width: 100%; }
.pa-detail { padding: 18px 20px; }
/* 実績・権威性（分析の段・2026-11-06〜） */
.pa-proof { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 14px 16px; margin-bottom: 18px; }
.pa-proof .pa-addpanel-h .hint { font-weight: 400; }
/* 実績・権威性の一覧（実績1つ＝1行・2026-11-06〜）：強さの札・実績・補足（小さく）・直す・削除 */
.pa-proof-list { list-style: none; margin: 10px 0 0; padding: 0; }
.pa-proof-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.pa-proof-claim { font-size: 13px; font-weight: 700; color: var(--heading); line-height: 1.6; overflow-wrap: anywhere; }
.pa-proof-note { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 2px; overflow-wrap: anywhere; }
.pa-proof-edit > summary { cursor: pointer; font-size: 12px; color: var(--primary); margin-top: 4px; width: max-content; }
.pa-proof-form { display: grid; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.pa-proof-form label { display: grid; gap: 4px; }
.pa-proof-form select { width: max-content; }
.pa-proof-form input[type=text], .pa-proof-form textarea { width: 100%; box-sizing: border-box; font-size: 13px; line-height: 1.6; color: var(--text); }
.pa-proof-del { margin: 0; }
.pa-proof-del .btn-link-danger { margin: 2px 0 0; font-size: 12px; }
.pa-proof-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pa-proof-add { flex: 1 1 320px; min-width: 0; }
.pa-proof-add > summary { font-size: 13px; font-weight: 700; margin-top: 0; }
.pa-proof-rebuild { margin: 0; }
/* 強さの札（生成パネルのチップと同じ）：S＝濃い青・A＝薄い青・B＝灰・C＝枠だけ・なし＝灰 */
.pa-proof-rank, .gv2-material-option.is-proof .gv2-material-meta { flex: none; display: inline-grid; place-items: center; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1; background: var(--line-soft); color: var(--muted); }
.pa-proof-rank.is-s, .gv2-material-option.is-proof[data-rank="S"] .gv2-material-meta { background: var(--primary); color: #fff; }
.pa-proof-rank.is-a, .gv2-material-option.is-proof[data-rank="A"] .gv2-material-meta { background: var(--primary-soft); color: var(--primary-ink); }
.pa-proof-rank.is-c, .gv2-material-option.is-proof[data-rank="C"] .gv2-material-meta { background: transparent; border: 1px solid var(--line); }
.gv2-material-option.is-proof .gv2-chip-t { flex-direction: row; align-items: center; gap: 8px; }
.gv2-material-option.is-proof .gv2-chip-t > span { font-weight: 600; }
.pa-detail-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pa-detail-t { margin: 0; font-size: 16px; font-weight: 700; color: var(--heading); }
.pa-detail-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pa-detail-act form { margin: 0; }
.pa-detail .av-head { display: none; } /* 見出し・日付はカードのヘッダーに出しているので重複させない */

/* 分析の表示用ビュー（構造化JSONから描くブロック。デザイン案 Creative 相当） */
.avb-sum { margin: 0 0 14px; font-size: 13px; color: var(--text); line-height: 1.7; }
.avb-k { font-size: 11px; color: var(--muted); }
.avb-strong { font-size: 13px; font-weight: 700; color: var(--heading); }
.avb-mat { border: 1px solid #d7e4f7; background: #f7fafe; border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.avb-mat-h { font-size: 12px; font-weight: 700; color: var(--primary-ink); margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.avb-mat-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.avb-mat-g .avb-k { margin-bottom: 4px; }
.avb-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1200px) { .avb-cols { grid-template-columns: minmax(0, 1fr); } } /* 1fr だと中の表の幅で列が画面より広がる */
.avb-box { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 14px 16px; margin-bottom: 16px; }
.avb-box-h { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; color: var(--heading); margin-bottom: 10px; flex-wrap: wrap; }
.avb-pers { display: flex; flex-direction: column; gap: 10px; }
.avb-pc { border: 1px solid var(--line-soft); border-radius: 6px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; }
.avb-pc-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.avb-quote { font-size: 12px; color: var(--heading); background: #f7f8fa; border-radius: 5px; padding: 7px 9px; line-height: 1.6; }
.avb-gdt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .avb-gdt { grid-template-columns: 1fr; } }
.avb-gh { display: flex; align-items: baseline; gap: 7px; margin-bottom: 7px; }
.avb-gcells { display: flex; flex-direction: column; gap: 8px; }
.avb-gcell { border: 1px solid var(--line-soft); border-radius: 6px; padding: 9px 11px; display: flex; flex-direction: column; gap: 5px; }
.avb-gcell.is-hot { border-color: var(--primary); background: #f7fafe; }
.avb-gcell.is-na { background: #fafbfc; }
.avb-gcell-h { display: flex; align-items: center; gap: 7px; }
.avb-gn { font-size: 12px; font-weight: 700; color: var(--heading); }
.avb-glvl { margin-left: auto; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.avb-glvl.is-hot { background: var(--primary); color: #fff; }
.avb-glvl.is-ok { background: #eaf7ee; color: #1e7a45; }
.avb-glvl.is-na { background: var(--surface-hover); color: var(--muted); }
.avb-gcopy { font-size: 12px; color: var(--heading); line-height: 1.6; }
.avb-stack { border-top: 1px solid var(--line-soft); margin-top: 12px; padding-top: 11px; }
.avb-stack-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 7px; }
.avb-stack-i { border-left: 3px solid var(--primary); padding-left: 10px; }
.avb-say { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .avb-say { grid-template-columns: 1fr; } }
.avb-say-ok { border-left: 3px solid var(--success); padding-left: 11px; }
.avb-say-ng { border-left: 3px solid var(--warning); padding-left: 11px; }
.avb-say ul { margin: 5px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.8; }
.avb-say-ng ul { color: #8a5a12; }
.avb-more { font-size: 11px; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 12px; margin-bottom: 10px; }
/* LP準備画面：画像一覧のツールバー */
.lpimg-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.lpimg-bar-sp { flex: 1; }
/* ヘッダーのURLコピー */
.wsh-copy { flex: 0 0 auto; background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--muted);
            font: inherit; font-size: 11px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.wsh-copy:hover { border-color: var(--primary); color: var(--primary); }
.wsh-copy.is-done { border-color: var(--success); color: #1e7a45; }
/* 分析を追加：各分析の説明（既定は閉じる） */
.pa-about { margin: -2px 0 8px; }
.pa-about > summary { cursor: pointer; font-size: 11px; color: var(--muted); }
.pa-about > summary:hover { color: var(--primary); }
.pa-about p { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--text); }
/* 撮影ブロック：拡張が無いときの案内 */
.lpcap-ext { border: 1px solid #fbe7c6; background: #fffdf8; border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; }
.lpcap-ext[hidden] { display: none; }
.lpcap-ext-t { font-size: 13px; font-weight: 700; color: #8a5a12; margin-bottom: 4px; }
.lpcap-ext .hint { margin: 0 0 10px; }
.lpcap-ext-a { display: flex; gap: 8px; flex-wrap: wrap; }

/* LPステップ：ボックスの余白を整理 */
.ws-step > .ws-card + .ws-card { margin-top: 16px; }
.ws-step > .ws-card > .ws-kicker { margin-bottom: 12px; }
.ws-card > .hint { max-width: 900px; }
.lpcap .lpcap-l:first-of-type { margin-top: 0; }
.lpcap .lpshot-mode { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; }
.lpcap .lpshot-mode label { display: inline-flex; align-items: center; gap: 6px; }
.lpcap .lpshot-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.lpcap .fg-urlshot-note .hint:last-child { margin-bottom: 0; }
/* 画像化済みのLPの行：カード内で詰まって見えないように */
.ws-card .lprow { padding: 11px 13px; gap: 10px; flex-wrap: wrap; }
.ws-card .lprow + .lprow { margin-top: 10px; }
.ws-card .lprow .u { font-size: 13px; color: var(--heading); }
.ws-card .lprow .m { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ws-card .lprow .sp { flex: 1; }
/* 読み取ったテキストの表示 */
.lptext { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel-soft); padding: 12px 13px; margin-top: 10px; }
.lptext[hidden] { display: none; }
.lptext-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--heading); }
.lptext-h .sp { flex: 1; }
.lptext-b { max-height: 420px; overflow: auto; margin: 0; font-size: 12px; line-height: 1.8; white-space: pre-wrap; background: var(--panel-soft); padding-bottom: 0; }
/* 長い文章のスクロール箱（要点ビュー・元テキスト・LP本文）：下端を背景色へ溶かして「続きがある」と分かるようにする。
   sticky で表示領域の下に張り付き、末尾まで送ると箱の下余白（padding-bottom の代わり）に乗るので最後の行は隠れない */
.av-plain::after, .av-rawtext::after, .lptext-b::after { content: ''; display: block; position: sticky; bottom: 0; height: 40px;
                                                          background: linear-gradient(to bottom, rgba(251,252,254,0), var(--panel-soft)); pointer-events: none; }
/* 参照画像：サムネにマウスを載せると大きく見せる */
.genfp-ref-zoom { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(.96);
                  z-index: 40; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
                  box-shadow: 0 10px 30px rgba(33,37,41,.18); opacity: 0; visibility: hidden;
                  transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
.genfp-ref-zoom img { display: block; width: auto; height: auto; max-width: 320px; max-height: 320px;
                      border-radius: 5px; border: none; object-fit: contain; }
.genfp-ref:hover .genfp-ref-zoom { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }

/* 一括分析モーダル：待っているあいだ、どこかが必ず動いているようにする
   （全部止まっていると固まったように見えるため） */
.lppipe-ring { position: relative; }
.lppipe-ring-spin { position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
                    border: 3px solid transparent; border-top-color: var(--primary); opacity: 0; }
.lppipe-modal.is-running .lppipe-ring-spin { opacity: .55; animation: busy-spin 1.6s linear infinite; }
.lppipe-modal.is-running .lppipe-cur { animation: lppipe-breathe 2.2s ease-in-out infinite; }
.lppipe-elapsed { font-size: 12px; color: var(--muted); margin: -4px 0 10px; min-height: 17px; }
@keyframes lppipe-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
    .lppipe-modal.is-running .lppipe-ring-spin,
    .lppipe-modal.is-running .lppipe-cur { animation: none; }
}
.lpcap-target { font-size: 13px; color: var(--text); margin: 10px 0 0; }

/* 生成されたクリエイティブ：サムネにマウスを載せると大きく見せる */
.var-cell-pic { overflow: visible; }
.var-cell-zoom { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(.96);
                 z-index: 60; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
                 box-shadow: 0 10px 30px rgba(33,37,41,.18); opacity: 0; visibility: hidden;
                 transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
.var-cell-zoom img { display: block; width: auto; height: auto; max-width: 420px; max-height: 420px;
                     aspect-ratio: auto; object-fit: contain; border-radius: 5px; background: #fff; }
.var-cell-pic:hover .var-cell-zoom { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.var-cell { overflow: visible; }
/* 生成パネル：付けるタグ（「タグ」アコーディオンの中） */
/* タグは件数が読めない。max-height を低く取ると行の途中で切れて壊れて見えるので、
   枠のあるスクロール箱にして「続きがある」と分かる形にし、高さも6行ぶんまで伸ばす */
.gv2-tags { margin-bottom: 1em; max-height: 212px; overflow: auto; align-content: flex-start; padding: 0; }
.gv2-tagnew { width: 100%; max-width: 320px; border: 1px solid var(--line); border-radius: 6px;
              padding: 7px 11px; font: inherit; font-size: 13px; color: var(--text); }

/* 生成パネル：必ず1つ選ばせる設定（4コマの話の型・絵柄・コマ割り・カラー） */
.gv2-choice { margin-bottom: 14px; }
.gv2-choice:last-child { margin-bottom: 0; }
.gv2-choice-l { font-size: 12px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.gv2-choice-l .hint { font-weight: 400; margin-left: 6px; }
.gv2-choice-opts .gv2-chips + .gv2-choice-g { margin-top: 9px; }
.gv2-choice-g { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin-bottom: 5px; }
.gv2-propose-note { margin: 6px 0 0; }

/* 案レビュー：4コマのネーム（台本）。1枚の画像に4コマなので、コマは横に並べて流れを見せる */
.gv2-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 10px; }
.gv2-panels.is-4 { grid-template-columns: repeat(4, 1fr); }
.gv2-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 8px 10px; }
.gv2-panel-h { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.gv2-panel-no { font-size: 14px; font-weight: 700; color: var(--primary); line-height: 1; }
.gv2-panel-beat { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.gv2-panel-s { font-size: 13px; color: var(--text); line-height: 1.55; }
.gv2-panel-line { font-size: 13px; color: var(--heading); font-weight: 600; line-height: 1.55; margin-top: 5px; }
@media (max-width: 900px) { .gv2-panels.is-4 { grid-template-columns: repeat(2, 1fr); } }

/* 画像素材の一括操作（選択・タイプ変更・削除） */
.albulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line);
          border-radius: var(--radius); background: var(--panel-soft); padding: 9px 12px; margin-bottom: 12px; }
.albulk-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.albulk-n { font-size: 12px; color: var(--muted); }
.albulk-sp { flex: 1; }
.albulk-to { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.albulk-to select { margin: 0; width: auto; font-size: 13px; padding: 5px 9px; }
.asset-item { position: relative; }
.asset-pick { position: absolute; top: 7px; left: 7px; z-index: 2; background: rgba(255,255,255,.92);
              border-radius: 5px; padding: 2px; line-height: 0; box-shadow: 0 1px 3px rgba(33,37,41,.2); }
.asset-pick input { width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--primary); }

/* 素材画像：ホバーで拡大／クリックで全画面 */
.asset-thumb-btn { display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.asset-zoom { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) scale(.96);
              z-index: 50; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
              box-shadow: 0 10px 30px rgba(33,37,41,.18); opacity: 0; visibility: hidden;
              transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
.asset-zoom img { display: block; width: auto; height: auto; max-width: 380px; max-height: 380px; border-radius: 5px; }
.asset-thumb-btn:hover .asset-zoom { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.asset-item { overflow: visible; }
/* 全画面表示 */
.imglb { position: fixed; inset: 0; z-index: 1200; background: rgba(15,20,30,.88);
         display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px; }
.imglb[hidden] { display: none; }
body.imglb-open { overflow: hidden; }
.imglb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: #fff; }
.imglb-bar { position: absolute; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center;
             gap: 14px; padding: 0 16px; color: #fff; background: rgba(0,0,0,.35); }
.imglb-title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imglb-open { margin-left: auto; font-size: 12px; color: #cfe0f7; }
.imglb-open:hover { color: #fff; }
.imglb-x { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.wsh-bg-danger { color: var(--danger); border-color: #f0d3d3; }
.wsh-bg-danger:hover { background: #fdf3f3; border-color: #e3b6b6; color: var(--danger); }
/* 撮影ブロック：自動で始まるときは説明や設定を出さず、状況だけ見せる */
.lpcap.is-compact .fg-urlshot-note > .hint,
.lpcap.is-compact .lpshot-mode,
.lpcap.is-compact .lpcap-target { display: none; }
.lpcap.is-compact .lpshot-actions .btn { display: none; }
.lpcap.is-compact .fg-urlshot-note { border-top: none; padding-top: 0; margin-top: 0; }
.lpcap.is-compact .lpshot-actions { margin-top: 0; }
/* LP準備画面：止まったときの再開 */
.lpstart-resume { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px;
                 border-top: 1px solid var(--line-soft); padding-top: 12px; }
.lpstart-resume[hidden] { display: none; }

/* ===== 画像の部分修正（範囲を選んで直す） ===== */
.rt-lead { margin: -6px 0 14px; }
.rt-warn { color: var(--danger); }
.rt-lay { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.rt-stage-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
                 box-shadow: var(--shadow); padding: 14px; }
.rt-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0;
            background: repeating-conic-gradient(var(--surface-hover) 0% 25%, #ffffff 0% 50%) 50% / 16px 16px; }
/* 画像の上は十字カーソル。選択レイヤーが画像に重なるので、ステージ全体に効かせる
   （img だけに指定しても、上に乗った .rt-layer で矢印に戻ってしまう） */
.rt-stage, .rt-stage img, .rt-layer, .rt-sel { cursor: crosshair; }
.rt-stage img { display: block; max-width: 100%; height: auto; user-select: none; }
.rt-stage { touch-action: none; -webkit-user-select: none; user-select: none; } /* 指でなぞって範囲を選ぶ（ページをスクロールさせない） */
.rt-stage { -webkit-touch-callout: none; } /* iPhone：指を置いたまま止めても画像の長押しメニューを出さない（出ると描きかけの範囲が消える） */
/* 「画像の外を触るとページを送れる」の案内：指で触る端末だけ */
.rt-touch-hint { display: none; margin: 0 0 8px; }
@media (hover: none), (pointer: coarse) { .rt-touch-hint { display: block; } }
.rt-layer { position: absolute; inset: 0; }
.rt-sel { position: absolute; border: 2px solid var(--primary); background: rgba(1, 92, 251, .18); }
.rt-sel.is-draft { border-style: dashed; }
.rt-sel.is-active { border-color: var(--warning); background: rgba(240, 173, 78, .22); box-shadow: 0 0 0 2px rgba(240, 173, 78, .35); }
.rt-sel-no { position: absolute; top: -11px; left: -11px; width: 22px; height: 22px; border-radius: 50%;
             background: var(--primary); color: #fff; font-size: 12px; font-weight: 700;
             display: flex; align-items: center; justify-content: center; }
.rt-sel.is-active .rt-sel-no { background: var(--warning); color: #3b2f0b; }

/* 範囲ごとの指示（番号と連動） */
.rt-side-h { font-size: 14px; font-weight: 600; color: var(--heading); margin-bottom: 4px; }
.rt-side-lead { margin: 0 0 12px; }
.rt-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rt-note { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel-soft); }
.rt-note.is-active { border-color: var(--warning); background: #fffaf1; }
.rt-note-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.rt-no { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff;
         font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rt-note.is-active .rt-no { background: var(--warning); color: #3b2f0b; }
.rt-note-x { margin-left: auto; flex: none; width: 26px; height: 26px; padding: 0; display: inline-flex;
             align-items: center; justify-content: center; background: none; border: 1px solid transparent;
             border-radius: var(--radius); color: var(--muted); cursor: pointer; }
.rt-note-x svg { width: 15px; height: 15px; }
.rt-note-x:hover { color: var(--danger); border-color: #e3b6b6; background: #fdf1f1; }
.rt-note textarea { width: 100%; margin: 0; font-size: 13px; }
.rt-empty { margin: 0 0 14px; }
.rt-mode.is-disabled { opacity: .5; }
.rt-mode-lock { margin: 2px 0 0; }
.rt-sel-x { cursor: pointer; position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; border-radius: 50%;
            border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer;
            line-height: 1; font-size: 13px; padding: 0; }
.rt-sel-x:hover { color: var(--danger); border-color: #e3b6b6; }
.rt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.rt-count { font-size: 13px; color: var(--muted); }
.rt-side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
           box-shadow: var(--shadow); padding: 18px; }
.rt-side label { display: block; margin-top: 0; }
.rt-form .inline-form, .rt-panel .inline-form { display: inline-flex; margin: 0; }

/* 結果の確認 */
.rt-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rt-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
          box-shadow: var(--shadow); padding: 14px; }
.rt-col-h { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.rt-col-h-on { color: var(--primary); }
.rt-shot { line-height: 0; text-align: center; }
.rt-shot img { max-width: 100%; height: auto; border-radius: 4px; }
.rt-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
            box-shadow: var(--shadow); padding: 18px; margin-top: 16px; }
.rt-panel-h { font-size: 15px; font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.rt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 10px; }
@media (max-width: 900px) {
    .rt-lay { grid-template-columns: minmax(0, 1fr); }
    .rt-result { grid-template-columns: minmax(0, 1fr); }
}
/* 部分修正：仕上げ方の選択 */
.rt-modes { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.rt-mode { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius);
           padding: 10px 12px; cursor: pointer; margin: 0; }
.rt-mode:hover { border-color: var(--line-strong); }
.rt-mode input { width: auto; margin: 3px 0 0; flex: none; }
.rt-mode:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.rt-mode-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-mode-t { font-size: 13px; font-weight: 700; color: var(--heading); }
.rt-mode-d { font-size: 12px; color: var(--muted); }

/* ===== トップページ（ホーム）＝ 流れ → 次の一手 → クイック操作 ===== */
.hm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.hm-h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--heading); }
.hm-wave { margin-left: 6px; font-size: 20px; }
.hm-sub { margin: 0; font-size: 14px; color: var(--muted); }

/* 流れ */
.hm-flow { position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px;
           background: linear-gradient(155deg, #f8fbff 0%, #eff5fd 52%, #e8f1fc 100%);
           border: 1px solid #dfe9f7; border-radius: 12px; padding: 28px 30px; margin-bottom: 20px; }
.hm-flow-main { flex: 1 1 auto; min-width: 0; }
.hm-flow-t { margin: 0 0 10px; font-size: 20px; font-weight: 700; color: var(--heading); }
.hm-flow-d { margin: 0 0 26px; font-size: 14px; color: var(--text); line-height: 1.85; max-width: 540px; }
.hm-flow-d strong { font-weight: 700; color: var(--heading); }
/* ステップの文字は左そろえ、アイコンはステップの幅のまん中 */
.hm-steps { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; }
.hm-step { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.hm-step-ar { flex: 0 0 40px; color: #7fa3d3; display: flex; align-items: flex-start; justify-content: center; padding-top: 19px; }
.hm-step-ar svg { width: 20px; height: 20px; }
.hm-step-ico { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 999px; background: rgba(1, 92, 251, .10);
               color: #2f7ce0; display: flex; align-items: center; justify-content: center; }
.hm-step-ico svg { width: 25px; height: 25px; }
.hm-step.is-done .hm-step-ico { background: rgba(1, 92, 251, .2); }
.hm-step-h { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--heading); white-space: nowrap; }
.hm-step-n { width: 23px; height: 23px; border-radius: 999px; background: var(--primary); color: #fff;
             font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hm-step-d { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.7; white-space: nowrap; }
.hm-flow-art { flex: 0 0 340px; min-width: 0; }
.hm-flow-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.hm-art-hand text { font-family: 'Yomogi', 'Klee One', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
                    stroke: #2f6fd8; stroke-width: .6; paint-order: stroke fill; }

/* 次の一手 */
.hm-next-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 26px; align-items: stretch; }
.hm-next { display: flex; align-items: flex-start; gap: 18px; background: var(--panel); border: 1px solid var(--line);
           border-radius: 12px; box-shadow: var(--shadow); padding: 24px 26px; }
.hm-next-ico { flex: none; width: 62px; height: 62px; border-radius: 999px; background: var(--primary-soft); color: var(--primary);
               display: flex; align-items: center; justify-content: center; }
.hm-next-ico svg { width: 29px; height: 29px; }
.hm-next-b { flex: 1 1 auto; min-width: 0; }
.hm-badge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft);
            border: 1px solid #c3d9f5; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px; }
.hm-next-t { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--heading); }
.hm-next-d { margin: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.8; }
.hm-next-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
               padding: 13px 20px; font-size: 15px; font-weight: 700; border-radius: 8px; }
.hm-next-ar svg, .hm-side-ar svg, .hm-note-a svg, .hm-quick-all svg, .hm-q-ar svg, .hm-guide-btn svg { width: 15px; height: 15px; }
.hm-next-ar { display: inline-flex; }

.hm-side { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 20px 22px; }
.hm-side-t { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--heading); }
.hm-side-d { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.hm-side-row { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line);
               border-radius: 8px; font-size: 14px; font-weight: 700; color: var(--heading); background: var(--panel); }
.hm-side-row:hover { border-color: var(--line-strong); background: var(--surface-hover); text-decoration: none; }
.hm-side-row:last-child { margin-bottom: 0; }
.hm-side-ico { flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--primary-soft); color: var(--primary);
               display: inline-flex; align-items: center; justify-content: center; }
.hm-side-ico svg { width: 16px; height: 16px; }
.hm-side-ar { margin-left: auto; color: #adb5bd; display: inline-flex; }

.hm-note { background: #e9f1fd; border: 1px solid #d3e3f8; border-radius: 12px; padding: 20px 22px; }
.hm-note-h { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.hm-note-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
               border-radius: 999px; background: var(--panel); color: var(--primary); }
.hm-note-ico svg { width: 24px; height: 24px; }
.hm-note-t { margin: 0; font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.5; }
.hm-note-d { margin: 0 0 14px; font-size: 13px; color: var(--text); line-height: 1.8; }
.hm-note-a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
/* 処理中のタスク（全員ぶん・5秒ごとに差し替え） */
.hm-note-ico.is-run { color: #1f6feb; box-shadow: 0 0 0 4px rgba(1, 92, 251, .12); }
.hm-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-task { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
           background: var(--panel); border: 1px solid #d9e5f6; color: var(--text); }
a.hm-task:hover { border-color: var(--line-strong); text-decoration: none; }
.hm-task-b { flex: 1 1 auto; min-width: 0; }
.hm-task-h { display: flex; align-items: center; gap: 7px; min-width: 0; }
.hm-task-st { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); background: #eef2f7;
              border-radius: 999px; padding: 2px 8px; }
.hm-task-st.is-run { color: #fff; background: var(--primary); }
.hm-task-t { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; color: var(--heading);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-task-m { display: block; margin-top: 3px; font-size: 11px; color: var(--muted);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-task-ar { flex: none; color: #adb5bd; display: inline-flex; }
.hm-task-ar svg { width: 15px; height: 15px; }
.hm-tasks-rest { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
/* 0件のとき：見出しはそのまま、下にLP分析の案内を薄い区切りで添える */
.hm-note-none { color: var(--muted); }
.hm-note-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid #d3e3f8; }

/* クイック操作 */
.hm-quick-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.hm-quick-t { margin: 0; font-size: 18px; font-weight: 700; color: var(--heading); }
.hm-quick-d { margin: 0; font-size: 13px; color: var(--muted); }
.hm-quick-all { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.hm-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.hm-q { display: flex; align-items: flex-start; gap: 14px; background: var(--panel); border: 1px solid var(--line);
        border-radius: 12px; box-shadow: var(--shadow); padding: 18px 20px; color: var(--text); }
.hm-q:hover { border-color: var(--line-strong); text-decoration: none; }
.hm-q-ico { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--primary-soft); color: var(--primary);
            display: inline-flex; align-items: center; justify-content: center; }
.hm-q-ico svg { width: 22px; height: 22px; }
.hm-q-b { flex: 1 1 auto; min-width: 0; }
.hm-q-h { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.hm-q-t { font-size: 15px; font-weight: 700; color: var(--heading); }
.hm-q-ar { margin-left: auto; flex: none; color: #adb5bd; display: inline-flex; }
.hm-q-d { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.75; }

/* ガイド（カードではなく、区切り線の下の1行） */
.hm-guide { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line);
            padding: 22px 2px 4px; color: var(--text); }
.hm-guide:hover { text-decoration: none; }
.hm-guide:hover .hm-guide-t { color: var(--primary); }
.hm-guide-ico { flex: none; width: 32px; height: 32px; color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.hm-guide-ico svg { width: 26px; height: 26px; }
.hm-guide-b { min-width: 0; }
.hm-guide-t { display: block; font-size: 15px; font-weight: 700; color: var(--heading); }
.hm-guide-d { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.hm-guide-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 7px; }

/* イラストを出すと5ステップが横に並びきらないので、狭い画面ではイラストを畳む */
@media (max-width: 1400px) {
    .hm-flow-art { display: none; }
    .hm-flow-d { max-width: none; }
    /* 幅が足りない画面では、決め打ちの改行（<br>）をやめて自然に折り返す */
    .hm-q-d br, .hm-note-t br, .hm-note-d br { display: none; }
}
@media (max-width: 1200px) {
    .hm-next-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .hm-next { grid-column: 1 / -1; }
    .hm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 5ステップは横に並びきらなくなるので縦積み（アイコン｜見出し／説明） */
    .hm-steps { flex-direction: column; align-items: stretch; gap: 14px; }
    .hm-step { flex-flow: row wrap; align-items: center; gap: 0 14px; }
    .hm-step-ico { margin: 0; width: 46px; height: 46px; }
    .hm-step-ico svg { width: 21px; height: 21px; }
    .hm-step-h { flex: 1 1 auto; white-space: normal; }
    .hm-step-d { flex: 1 0 100%; margin-top: 4px; padding-left: 60px; white-space: normal; }
    .hm-step-d br { display: none; }
    .hm-step-ar { display: none; }
}
@media (max-width: 900px) {
    .hm-next-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hm-quick { grid-template-columns: minmax(0, 1fr); }
    .hm-guide { flex-wrap: wrap; }
    .hm-guide-btn { margin-left: 46px; }
}

/* ===== 商材管理ハブ / cmhub（独立した一覧UI） ===== */
.cmhub {
    --cmhub-radius: 16px;
    --cmhub-on-primary: #fff;
    --cmhub-backdrop: rgb(20 32 52 / 38%);
    --cmhub-action: #2563b5;
    color: var(--text);
    min-width: 0;
}
.cmhub [hidden] { display: none !important; }
.cmhub h1, .cmhub h2, .cmhub h3, .cmhub p { margin: 0; }
.cmhub h1 { font-size: 28px; letter-spacing: -.04em; margin: 6px 0 8px; }
.cmhub h2 { font-size: 17px; font-weight: 700; }
.cmhub h3 { font-size: 16px; }
.cmhub button, .cmhub input, .cmhub select { font: inherit; }
.cmhub button, .cmhub summary { cursor: pointer; }
.cmhub :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.cmhub-header, .cmhub-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.cmhub-header { margin-bottom: 26px; }
.cmhub-header p { color: var(--muted); }
.cmhub-eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .1em; font-weight: 600; }
.cmhub .cmhub-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--heading); font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; }
.cmhub .cmhub-button:hover { background: var(--panel-soft); border-color: var(--primary); }
.cmhub .cmhub-primary { background: var(--cmhub-action); border-color: var(--cmhub-action); color: var(--cmhub-on-primary); }
.cmhub .cmhub-primary:hover { background: var(--primary-ink); color: var(--cmhub-on-primary); }
.cmhub-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; margin-bottom: 32px; }
.cmhub-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--cmhub-radius); padding: 22px; box-shadow: var(--shadow); min-width: 0; }
.cmhub-register > p, .cmhub-guide > p { margin: 6px 0 18px; color: var(--muted); font-size: 13px; }
.cmhub-quickform { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.cmhub label { display: block; min-width: 0; font-size: 12px; font-weight: 600; color: var(--heading); }
.cmhub input, .cmhub select { width: 100%; min-width: 0; min-height: 42px; margin: 6px 0 0; border: 1px solid var(--line); border-radius: 8px; background-color: var(--panel); color: var(--text); }
.cmhub-options { grid-column: 1 / -1; font-size: 12px; }
.cmhub-options summary { color: var(--muted); padding: 4px 0; }
.cmhub-formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.cmhub-guide { background: var(--panel-soft); }
.cmhub-guide ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cmhub-guide li { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.cmhub-guide li > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; flex-shrink: 0; }
.cmhub-guide small { display: block; color: var(--muted); margin-top: 2px; }
.cmhub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.cmhub-main { min-width: 0; }
.cmhub-sectionhead { margin-bottom: 16px; }
.cmhub-sectionhead h2 > span { font-size: 13px; color: var(--muted); margin-left: 8px; }
.cmhub-sectionhead p { color: var(--muted); font-size: 12px; }
.cmhub-toolbar { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 20px; }
.cmhub-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.cmhub-filters button, .cmhub-views button { border: 0; background: transparent; color: var(--muted); border-radius: 7px; padding: 9px 10px; min-height: 40px; font-size: 12px; }
.cmhub-filters button[aria-pressed=true], .cmhub-views button[aria-pressed=true] { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.cmhub-filters button:hover, .cmhub-views button:hover { background: var(--surface-2); }
.cmhub-filters span { margin-left: 7px; font-size: 11px; }
.cmhub-tools { display: flex; align-items: center; flex: 1; gap: 10px; min-width: min(100%, 340px); }
.cmhub-search { flex: 1; }
.cmhub-tools input, .cmhub-tools select { margin: 0; font-size: 12px; }
.cmhub-views { display: flex; border: 1px solid var(--line); border-radius: 8px; flex-shrink: 0; }
.cmhub-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.cmhub-product { min-width: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--cmhub-radius); padding: 18px; box-shadow: var(--shadow); }
.cmhub-identity { display: flex; align-items: flex-start; gap: 10px; }
.cmhub-identity > div { min-width: 0; flex: 1; }
.cmhub-identity h3 { line-height: 1.6; overflow-wrap: anywhere; font-size: 15px; }
.cmhub-identity h3 a { color: var(--heading); }
.cmhub-identity p { font-size: 11px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.cmhub-avatar { width: 40px; height: 40px; border: 1px solid var(--line-soft); background: var(--primary-soft); color: var(--primary-ink); border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; font-weight: 700; overflow: hidden; }
.cmhub-avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--panel); }
.cmhub-edit, .cmhub-link { border: 0; background: transparent; color: var(--primary-ink); font-size: 12px; padding: 7px 0; flex-shrink: 0; }
.cmhub-edit:hover, .cmhub-link:hover { text-decoration: underline; }
.cmhub-badges { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 18px; }
.cmhub-badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; background: var(--surface-2); color: var(--muted); }
.cmhub-good { color: var(--ws-good, var(--heading)); background: var(--panel-soft); border: 1px solid var(--line-soft); }
.cmhub-signal { background: var(--ws-signal-soft, var(--primary-soft)); color: var(--ws-signal-ink, var(--primary-ink)); }
.cmhub-alert { color: var(--heading); background: var(--panel-soft); border: 1px solid var(--warning); }
.cmhub-progresshead { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.cmhub-progresshead strong { color: var(--primary-ink); }
.cmhub-steps { list-style: none; padding: 0; margin: 0 0 18px; display: flex; }
.cmhub-steps li { width: 25%; display: flex; flex-direction: column; align-items: center; position: relative; font-size: 11px; gap: 4px; }
.cmhub-steps li:not(:last-child)::after { content: ''; position: absolute; height: 2px; background: var(--line); top: 11px; left: calc(50% + 13px); width: calc(100% - 26px); }
.cmhub-steps li.cmhub-done:not(:last-child)::after { background: var(--primary); }
.cmhub-dot { width: 24px; height: 24px; border: 2px solid var(--line); background: var(--panel); border-radius: 50%; display: grid; place-items: center; margin-bottom: 3px; }
.cmhub-done .cmhub-dot { background: var(--cmhub-action); border-color: var(--cmhub-action); color: var(--cmhub-on-primary); }
.cmhub-steps small { color: var(--muted); }
.cmhub-next { flex: 1 1 auto; padding: 12px; background: var(--primary-soft); border-radius: 10px; min-height: 108px; }
.cmhub-next > span { display: block; color: var(--primary-ink); font-size: 10px; margin-bottom: 5px; }
.cmhub-next strong { display: block; font-size: 13px; color: var(--heading); }
.cmhub-next p { margin-top: 5px; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.cmhub-next .cmhub-errornote { border-top: 1px solid var(--line); padding-top: 6px; color: var(--heading); }
.cmhub-counts { display: flex; justify-content: space-between; gap: 6px; margin: 14px 0; flex-wrap: wrap; }
.cmhub-counts span { font-size: 10px; color: var(--muted); }
.cmhub-counts b { margin-left: 5px; color: var(--heading); font-size: 13px; }
.cmhub-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmhub-actions .cmhub-button { padding: 9px 5px; font-size: 12px; }
.cmhub-detail { margin-top: 16px; border-top: 1px solid var(--line-soft); }
.cmhub-detail summary { font-size: 12px; padding: 13px 0; }
.cmhub-detail summary > span { color: var(--muted); margin-left: 6px; }
.cmhub-lps { display: grid; gap: 10px; padding-bottom: 10px; }
.cmhub-lps > p { font-size: 12px; color: var(--muted); }
.cmhub-lp { display: flex; gap: 8px; background: var(--panel-soft); border: 1px solid var(--line-soft); padding: 9px; border-radius: 8px; font-size: 11px; color: var(--text); }
.cmhub-lp img { width: 36px; height: 48px; object-fit: cover; object-position: top; flex-shrink: 0; border-radius: 4px; }
.cmhub-lp div { min-width: 0; }
.cmhub-lp strong, .cmhub-lp span, .cmhub-lp small { display: block; overflow-wrap: anywhere; }
.cmhub-lp small { color: var(--muted); margin: 3px 0; }
.cmhub-unsorted { font-size: 11px; padding: 8px; color: var(--text); border: 1px dashed var(--line); border-radius: 8px; }
.cmhub-unsorted span { display: block; margin-top: 4px; }
.cmhub-cardfoot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmhub-cardfoot > span { font-size: 10px; color: var(--muted); }
.cmhub-addcard { min-height: 260px; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px; border: 1px dashed var(--line-strong); border-radius: var(--cmhub-radius); background: var(--panel-soft); color: var(--primary-ink); }
.cmhub-addcard:hover { background: var(--primary-soft); border-color: var(--primary); }
.cmhub-addcard > span, .cmhub-empty-mark { font-size: 28px; }
.cmhub-addcard small { color: var(--muted); font-size: 11px; }
.cmhub-sidebar { display: grid; gap: 20px; }
.cmhub-sidebar .cmhub-panel { padding: 20px; }
.cmhub-sidebar h2 { font-size: 15px; }
.cmhub-caption { font-size: 11px; color: var(--muted); margin-top: 7px !important; }
.cmhub-feed { list-style: none; padding: 0; margin: 16px 0 0; }
.cmhub-feed li + li { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 14px; }
.cmhub-feed a, .cmhub-feed .cmhub-feed-row { display: grid; gap: 5px; color: var(--text); font-size: 12px; overflow-wrap: anywhere; }
.cmhub-feed strong { color: var(--heading); font-weight: 600; }
.cmhub-feed small { color: var(--muted); font-size: 10px; }
.cmhub-taskstate { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 11px; }
.cmhub-sideempty { font-size: 12px; line-height: 1.9; color: var(--muted); padding-top: 20px; }
.cmhub-empty { text-align: center; padding: 48px 20px; background: var(--panel); border: 1px dashed var(--line); border-radius: var(--cmhub-radius); }
.cmhub-empty p { margin: 12px 0 20px; color: var(--muted); line-height: 1.9; }
.cmhub-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; border: 1px solid var(--line); border-radius: var(--cmhub-radius); padding: 26px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.cmhub-dialog::backdrop { background: var(--cmhub-backdrop); }
.cmhub-dialog form > label { margin-bottom: 16px; }
.cmhub-dialog .cmhub-actions { margin-top: 24px; }
.cmhub-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cmhub-products[data-view=list] { grid-template-columns: 1fr; }
.cmhub-products[data-view=list] .cmhub-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; }
.cmhub-products[data-view=list] .cmhub-identity { grid-column: 1; }
.cmhub-products[data-view=list] .cmhub-badges { grid-column: 1; margin: 0; }
.cmhub-products[data-view=list] .cmhub-progress { grid-column: 2; grid-row: 1 / 3; }
.cmhub-products[data-view=list] .cmhub-next { grid-column: 1; grid-row: 3 / 5; min-height: 0; }
.cmhub-products[data-view=list] .cmhub-counts { grid-column: 2; margin: 0; }
.cmhub-products[data-view=list] .cmhub-actions { grid-column: 2; }
.cmhub-products[data-view=list] .cmhub-detail, .cmhub-products[data-view=list] .cmhub-cardfoot { grid-column: 1 / -1; margin-top: 0; }
.cmhub-products[data-view=list] .cmhub-addcard { min-height: 110px; gap: 6px; }
@media (max-width: 1250px) {
    .cmhub-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmhub-quickform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .cmhub-namefield { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
    .cmhub-layout { grid-template-columns: minmax(0, 1fr); }
    .cmhub-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmhub-intro { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .cmhub-header { align-items: flex-start; flex-direction: column; gap: 16px; }
    .cmhub h1 { font-size: 25px; }
    .cmhub-intro, .cmhub-sidebar, .cmhub-products { grid-template-columns: minmax(0, 1fr); }
    .cmhub-tools { flex-wrap: wrap; min-width: 0; }
    .cmhub-search { flex-basis: 100%; }
    .cmhub-tools > label:not(.cmhub-search) { flex: 1; }
    .cmhub-filters { gap: 2px; }
    .cmhub-filters button { padding: 8px; }
    .cmhub-panel { padding: 18px; }
    .cmhub-products[data-view=list] .cmhub-product { display: block; }
    .cmhub-products[data-view=list] .cmhub-badges { margin: 12px 0; }
    .cmhub-products[data-view=list] .cmhub-counts { margin: 14px 0; }
    .cmhub-products[data-view=list] .cmhub-detail { margin-top: 16px; }
    .cmhub-addcard { min-height: 160px; }
    .cmhub-sectionhead { gap: 8px; flex-wrap: wrap; }
}

.cmhub-quickform label, .cmhub-formrow label { margin-bottom: 0; }

/* ピン留め（個人）とドラッグ並べ替え */
.cmhub-savenote { min-height: 15px; margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.cmhub-savenote.is-error { color: var(--heading); }
.cmhub-grip { flex: none; display: inline-flex; align-items: center; margin: 3px -3px 0 -5px; color: var(--muted); opacity: .5; cursor: grab; }
.cmhub-grip:hover { opacity: 1; color: var(--primary); }
.cmhub-grip:active { cursor: grabbing; }
/* 並べ替えを保存できない基準のとき、ピン留め中のカードは動かせないのでつまみを隠す */
.cmhub-products[data-reorderable="0"] .cmhub-grip,
.cmhub-product[data-pinned="1"] .cmhub-grip { visibility: hidden; }
.cmhub-product.is-dragging { opacity: .45; }
.cmhub-product[data-pinned="1"] { border-color: var(--primary); }
.cmhub-pin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.cmhub-pin:hover { background: var(--panel-soft); color: var(--primary); }
.cmhub-pin.is-on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-ink); }
.cmhub-pin.is-on svg { fill: currentColor; }
.cmhub-pin[disabled] { opacity: .5; cursor: default; }

/* 自分のプリセット（生成パネル）と、クリエイティブ詳細の「生成の設定」 */
/* つまみの下（.gv2-adj-b の末尾）に置くので、区切り線で分ける */
.gv2-mine { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.gv2-mine-h { font-size: 12px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.gv2-mine-h span { font-weight: 400; color: var(--muted); margin-left: 8px; font-size: 11px; }
.gv2-pcard-wrap { position: relative; display: flex; }
.gv2-pcard-wrap .gv2-pcard { flex: 1; min-width: 0; }
.gv2-pcard-more { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; padding: 0; line-height: 1;
    border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); font-size: 12px; cursor: pointer; }
.gv2-pcard-more:hover, .gv2-pcard-more[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
.gv2-pcard-pop { position: absolute; z-index: 5; top: 26px; left: 4px; min-width: 190px; display: flex; flex-direction: column; gap: 6px;
    padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); text-align: left; }
.gv2-pcard-pop button { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text);
    font-size: 12px; padding: 6px 8px; cursor: pointer; text-align: left; }
.gv2-pcard-pop button:hover { border-color: var(--primary); color: var(--primary); }
.gv2-pcard-pop button[disabled] { opacity: .5; cursor: default; }
.gv2-pcard-pop label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.gv2-pcard-pop input { margin: 0; font-size: 12px; padding: 5px 7px; }
.gv2-pcard-pop .gv2-pop-del:hover { border-color: var(--warning); color: var(--heading); }
.gv2-mine-save { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gv2-mine-save input { width: 220px; margin: 0; }
.gv2-mine-note { font-size: 12px; color: var(--muted); }
.gv2-mine-note.is-error { color: var(--heading); }
.gv2-mine-empty { margin: 0; }

.gset { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.gset-item { border: 1px solid var(--line-soft); background: var(--panel-soft); border-radius: 6px; padding: 3px 9px; font-size: 12px; color: var(--muted); }
.gset-item b { margin-left: 6px; color: var(--heading); font-weight: 600; }
.gset-item.is-changed { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.gset-item.is-changed b { color: var(--primary-ink); }
.gset-legend { margin-left: 10px; font-size: 11px; }
.gset-save { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.gset-name { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.gset-name input { width: 260px; margin: 0; }
.gset-note { font-size: 12px; color: var(--muted); }
.gset-note.is-error { color: var(--heading); }

/* スワイプから作る：もとにする1枚を選ぶ／適合度プレビュー */
.gv2-swipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.gv2-swipe { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; text-align: left;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.gv2-swipe:hover { border-color: var(--primary); background: var(--bg); }
.gv2-swipe.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.gv2-swipe img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: 6px; background: var(--surface-2); display: block; }
.gv2-swipe-n { font-size: 11px; color: var(--heading); line-height: 1.4; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gv2-swipe-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; padding: 2px 6px; border-radius: 999px;
    background: var(--panel); border: 1px solid var(--line-soft); color: var(--muted); }
.gv2-swipe-note { margin: 10px 0 0; }
.gv2-fit { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.gv2-fit-h { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.gv2-fit-score { font-size: 15px; color: var(--heading); }
.gv2-fit-h span { font-size: 12px; color: var(--muted); }
.gv2-fit-glance { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.gv2-fit-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 12px; }
.gv2-fit-row b { flex: none; min-width: 170px; color: var(--heading); font-weight: 600; }
.gv2-fit-row span { color: var(--text); overflow-wrap: anywhere; }
.gv2-fit-row.is-reuse b::before { content: "転用 "; color: var(--ws-good, var(--primary)); }
.gv2-fit-row.is-sub   b::before { content: "代替 "; color: #8a5a12; }
.gv2-fit-row.is-drop  b::before { content: "削除 "; color: var(--muted); }
.gv2-fit-div, .gv2-fit-warn { margin: 10px 0 0; font-size: 12px; }
.gv2-fit-div { color: var(--muted); }
.gv2-fit-warn { color: var(--heading); border-top: 1px solid var(--line-soft); padding-top: 8px; }
@media (max-width: 680px) {
    .gv2-swipes { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .gv2-fit-row { flex-direction: column; gap: 2px; }
    .gv2-fit-row b { min-width: 0; }
}

/* 商材一覧：稼働／停止のトグル（編集ダイアログを開かずに切り替える） */
.cmhub-switch { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 2px 4px 2px 0; min-height: 24px; font-size: 11px; color: var(--muted); }
.cmhub-switch-track { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--line-strong, var(--line)); transition: background .15s; flex: none; }
.cmhub-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(20, 30, 50, .25); transition: transform .15s; }
.cmhub-switch[aria-checked=true] { color: var(--heading); font-weight: 600; }
.cmhub-switch[aria-checked=true] .cmhub-switch-track { background: var(--cmhub-action); }
.cmhub-switch[aria-checked=true] .cmhub-switch-thumb { transform: translateX(14px); }
.cmhub-switch:disabled { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .cmhub-switch-track, .cmhub-switch-thumb { transition: none; } }

/* 素材ステップ：手元の画像をアップロード */
.asset-upload { margin: 0 0 18px; }
.asset-upload-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.asset-upload-row label { margin: 0; }
.asset-upload-row input[type=text] { width: 220px; max-width: 100%; }

/* 訴求ライブラリ：AIにペルソナを作らせるときの追加の指示 */
.pl-ai-l { display: block; margin: 10px 0 0; font-size: 12px; color: var(--heading); }
.pl-ai-l textarea { display: block; width: 100%; margin-top: 4px; }

/* ===== 分析の進み具合（トップのタスク・商材一覧・ワークスペースの帯・分析ページで共通） ===== */
.anp-prog { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; font-size: 11px; color: var(--primary-ink); }
.anp-prog-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.anp-bar { flex: 1 1 auto; min-width: 36px; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.anp-bar i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.anp-n { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 商材一覧：カードの「分析中のLP」はバッジの並びの下に1段で出す（リスト表示のグリッド配置を崩さないため、バッジの中に入れている） */
.cmhub-badges .anp-list { flex: 1 0 100%; }
.anp-list { display: grid; gap: 8px; margin-top: 4px; padding: 10px 12px; background: var(--panel-soft); border: 1px solid var(--line-soft); border-radius: 8px; }
.anp-list-h { font-size: 11px; color: var(--muted); }
.anp-rows { display: grid; gap: 8px; }
.anp-row b { display: block; font-size: 12px; color: var(--heading); overflow-wrap: anywhere; }
.anp-row .anp-prog { margin-top: 2px; }
.anp-row.is-done { font-size: 12px; font-weight: 600; color: var(--success); }
.cmhub-lp .cmhub-badge { flex: none; align-self: center; margin-left: auto; }
.cmhub-feed .anp-prog { margin-top: 0; }
/* ワークスペース：LPタブの「分析中」 */
.anp-tabpill { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 0 7px; border-radius: 99px; background: var(--primary-soft); color: var(--primary-ink); font-size: 10px; font-weight: 700; line-height: 1.7; vertical-align: 1px; }
.anp-tabpill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: anp-blink 1.6s ease-in-out infinite; }
@keyframes anp-blink { 50% { opacity: .35; } }
/* ワークスペース：このLPを分析中の帯 */
.anp-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: center; margin: 0 0 16px; padding: 14px 16px; background: #f3f8fe; border: 1px solid #d3e3f8; border-radius: 10px; }
.anp-band-k { display: inline-block; padding: 0 8px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.anp-band-cur { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--heading); line-height: 1.5; }
.anp-band-meta { margin: 2px 0 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.anp-band-note { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid #d3e3f8; font-size: 11px; color: var(--muted); }
.anp-stp-scroll { overflow-x: auto; }
.anp-stp { display: flex; align-items: flex-start; gap: 4px; min-width: max-content; padding: 2px 4px 2px 0; }
.anp-stp-i { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; }
.anp-stp-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; }
.anp-stp-i.is-done .anp-stp-dot { background: var(--primary); border-color: var(--primary); color: #fff; }
.anp-stp-i.is-run .anp-stp-dot { background: var(--panel); border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px rgba(1, 92, 251, .16); animation: anp-pulse 1.8s ease-in-out infinite; }
.anp-stp-i.is-next .anp-stp-dot { background: var(--panel); border-color: var(--primary); color: var(--primary); }
.anp-stp-i.is-err .anp-stp-dot { background: var(--panel); border-color: var(--danger); color: var(--danger); }
.anp-stp-l { font-size: 11px; color: var(--muted); white-space: nowrap; }
.anp-stp-i.is-run .anp-stp-l, .anp-stp-i.is-next .anp-stp-l { color: var(--primary-ink); font-weight: 700; }
.anp-stp-c { flex: 1 1 auto; min-width: 14px; height: 2px; margin-top: 11px; background: var(--line); }
.anp-stp-c.is-done { background: var(--primary); }
@keyframes anp-pulse { 50% { box-shadow: 0 0 0 7px rgba(1, 92, 251, .05); } }
@media (max-width: 760px) { .anp-band { grid-template-columns: minmax(0, 1fr); } }
/* 分析ページ：まだ始まっていない分析のカード（押せないので hover でも変えない） */
.acard.is-wait, .acard.is-wait:hover { border-style: dashed; border-color: var(--line); background: var(--panel-soft); cursor: default; }
.acard.is-wait .acard-h { color: var(--text); }
.anp-wait { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 99px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .anp-tabpill::before, .anp-stp-i.is-run .anp-stp-dot { animation: none; } }
/* 設定：チャットワークの自動通知のタイミング */
.cw-notify { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.cw-notify legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
form .cw-notify .checkbox { flex-wrap: wrap; align-items: baseline; }
.cw-notify .checkbox .hint { flex-basis: 100%; margin: 0 0 0 24px; font-size: 12px; }
/* 実行中のタスクを止める */
.anp-stop { display: inline-block; margin-top: 4px; padding: 0 8px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 11px; line-height: 20px; cursor: pointer; }
.anp-stop:hover { color: var(--danger, #c0392b); border-color: currentColor; }
.anp-stop:disabled { opacity: .5; cursor: default; }
.anp-band-stop { margin-top: 6px; }
.lpstart-stop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.sm-stop { margin-top: 8px; }
.queue-badge.badge-canceled, .badge-canceled { background: var(--surface-2); color: var(--muted); }


/* 設定ページ：文章AIの単価表（系統ごと） */
.set-subhead { margin: 22px 0 4px; font-size: 15px; font-weight: 600; color: var(--heading); }
.set-rates { border-collapse: collapse; margin: 6px 0 14px; width: 100%; max-width: 420px; }
.set-rates th, .set-rates td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); }
.set-rates th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel-soft); }
.set-rates td:first-child { font-variant-numeric: tabular-nums; }
.set-rates input { width: 100%; margin: 0; }
/* 原価率（行＝作業・列＝プラン。2026-10-07〜）。列が多いので幅を広げ、狭い画面では横に流す */
.set-rates.set-ratio { max-width: 820px; }
.set-ratio th { vertical-align: bottom; }
.set-ratio input { min-width: 64px; }

/* 設定ページ：立案モデルの選択（運営のみ） */
.set-models { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.set-models .checkbox { align-items: flex-start; }
.set-models .hint { display: block; margin-top: 1px; }

/* ===== ダークモード（2026-10-07〜）。<html data-theme="dark"> のとき色の変数を差し替える =====
   ※ 色を直接書いている所は、この下の「ダークモード：個別の上書き」で直す */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #12151b;
    --panel: #1b1f27;
    --line: #2e3440;
    --line-soft: #252a33;
    --line-strong: #3d4452;
    --text: #c9d1dc;
    --heading: #eef2f7;
    --muted: #8b95a5;
    --primary: #4d8dff;
    --primary-d: #3a7bf0;
    --primary-soft: #1d2b45;
    --primary-ink: #b9d0ff;
    --panel-soft: #20252e;
    --surface-2: #262c36;
    --surface-hover: #262c36;
    --danger: #ef6b67;
    --success: #5cc985;
    --warning: #f3b860;
    --info: #4fb3dc;
    --sidebar-bg: #161a21;
    --sidebar-text: #c9d1dc;
    --sidebar-active: #b9d0ff;
    --sidebar-ico: #6b7484;
    --shadow: 0 0 14px 0 rgba(0, 0, 0, .35);
    --shadow-navbar: 0 0 32px 0 rgba(0, 0, 0, .5);
}
.sidebar-brand-logo-dark { display: none; }
:root[data-theme="dark"] .sidebar-brand-logo { display: none; }
:root[data-theme="dark"] .sidebar-brand-logo-dark { display: block; }
/* お知らせのベル（2026-10-26〜・前のライト／ダークの切り替えの場所）。未読の数を右上に */
.sidebar-bell { position: relative; }
.bell-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; box-sizing: border-box; pointer-events: none; }

/* サイドバー：ロゴの下のアイコン（マイページ・トークンの使用履歴・ヘルプ・設定。等間隔・背景と枠線なし） */
.sidebar-quick { display: flex; justify-content: space-evenly; }
.sidebar-quick-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius);
    color: var(--muted); line-height: 0; text-decoration: none; }
.sidebar-quick-btn .icon { width: 18px; height: 18px; }
.sidebar-quick-btn:hover { color: var(--heading); text-decoration: none; }
.sidebar-quick-btn.active { color: var(--primary); }
@media not all and (max-width: 900px) { body.sidebar-collapsed .sidebar-quick { flex-direction: column; align-items: center; } /* 細いレールでは縦に並べる */ }

/* 運営の画面（super.*・body.is-super）の色（2026-10-29〜 ユーザー「テナント管理ページだともっとわかりやすくしたい。ツールページと何かの色を変えるとか？」→ Codex 案）。
   濃い紺のサイドバーと水色の印。ツールの青と、sandbox の帯のオレンジの両方から離した色。運営の画面はいつもライト */
body.is-super {
    --ops-ink: #142b3a; --ops-ink-soft: #1d3a4b; --ops-cyan: #54d3cf; --ops-cyan-pale: #e4f7f5; --ops-paper: #f2f6f7;
    background: var(--ops-paper);
}
body.is-super .sidebar { background: var(--ops-ink); color: #e7f0f3; border-right: 0; box-shadow: 5px 0 22px rgba(20, 43, 58, .12); }
body.is-super .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
body.is-super .sidebar-top { border-bottom-color: rgba(255, 255, 255, .14); }
/* 紺の上は白いロゴ（サイドバーとスマホの上のバー） */
body.is-super .sidebar .sidebar-brand-logo, body.is-super .m-topbar .sidebar-brand-logo { display: none; }
body.is-super .sidebar .sidebar-brand-logo-dark, body.is-super .m-topbar .sidebar-brand-logo-dark { display: block; }
body.is-super .sidebar-toggle { color: #a9c0ca; }
body.is-super .sidebar-toggle:hover { background: var(--ops-ink-soft); color: #fff; }
.sidebar-super-tag { align-self: stretch; padding: 8px 10px; border: 1px solid rgba(84, 211, 207, .42); border-radius: 5px;
    background: rgba(84, 211, 207, .12); color: var(--ops-cyan, #54d3cf); font-size: 12px; font-weight: 700; text-align: center; letter-spacing: .08em; }
@media not all and (max-width: 900px) { body.sidebar-collapsed .sidebar-super-tag { display: none; } }
body.is-super .nav-group-title { color: #8da9b5; }
body.is-super .sidenav .navlink { color: #d6e2e7; }
body.is-super .sidenav .navlink .nav-ico { color: #8da9b5; }
body.is-super .sidenav .navlink:hover { background: var(--ops-ink-soft); color: #fff; }
body.is-super .sidenav .navlink:hover .nav-ico { color: var(--ops-cyan); }
body.is-super .sidenav .navlink.active { background: rgba(84, 211, 207, .14); color: #fff; box-shadow: inset 3px 0 0 var(--ops-cyan); }
body.is-super .sidenav .navlink.active .nav-ico { color: var(--ops-cyan); }
body.is-super .sidebar-foot { border-top-color: rgba(255, 255, 255, .14); }
body.is-super .sidebar-foot-av { background: var(--ops-cyan); color: var(--ops-ink); }
body.is-super .sidebar-foot-name { color: #fff; }
body.is-super .sidebar-foot-role, body.is-super .sidebar-foot-out { color: #a9c0ca; }
body.is-super .sidebar-foot-out:hover { background: var(--ops-ink-soft); color: #fff; }
/* 右の列のいちばん上の帯（sandbox の帯の下・スマホの上のバーの下） */
.super-band { padding: 10px 24px; border-bottom: 1px solid #b9e3e1; background: var(--ops-cyan-pale, #e4f7f5); color: #155b61;
    font-size: 12px; font-weight: 700; letter-spacing: .12em; }
body.is-super .container { max-width: 1560px; }
body.is-super .page-head h1 { color: var(--ops-ink); }
body.is-super .form-box, body.is-super .table-scroll { box-shadow: 0 3px 14px rgba(20, 43, 58, .045); }
@media (max-width: 900px) {
    body.is-super .m-topbar { background: var(--ops-ink); border-bottom-color: var(--ops-ink); }
    body.is-super .m-topbar-menu { color: #fff; }
    .super-band { padding: 8px 16px; }
}

/* サイドバー：残りトークン（いちばん下・名前の上） */
.sidebar-tokens-wrap { border-top: 1px solid var(--line-soft); padding: 12px 20px 0; }
@media not all and (max-width: 900px) { body.sidebar-collapsed .sidebar-tokens-wrap { display: none; } /* アイコンだけのレールには入らない */ }
.sidebar-tokens-wrap + .sidebar-foot { border-top: 0; } /* 残りトークンと名前は1つのまとまり */
@media not all and (max-width: 900px) { body.sidebar-collapsed .sidebar-tokens-wrap + .sidebar-foot { border-top: 1px solid var(--line-soft); } }
.sidebar-tokens { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-decoration: none;
    margin: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel-soft); }
.sidebar-tokens-label { font-size: 11px; color: var(--muted); }
.sidebar-tokens-add { display: inline-block; margin-top: 2px; font-size: 12px; color: var(--primary); text-decoration: none; }
.sidebar-tokens-add:hover, .sidebar-tokens-add:focus-visible { text-decoration: underline; }
.sidebar-tokens-num { font-size: 15px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.sidebar-tokens.is-low .sidebar-tokens-num { color: var(--danger); }

/* トークンの明細 */
.tk-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 20px; }
.tk-balance { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; background: var(--panel); min-width: 200px; }
.tk-balance-label { display: block; font-size: 12px; color: var(--muted); }
.tk-balance-num { font-size: 28px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
/* チーム管理＞トークンの追加（2026-10-19〜） */
.tk-balance-num small { font-size: 13px; font-weight: 400; color: var(--muted); }
.tkb-limited { margin: -8px 0 20px; padding-left: 18px; font-size: 13px; color: var(--muted); }
.tkb-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; margin: 4px 0 18px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tkb-total strong { font-size: 24px; color: var(--heading); font-variant-numeric: tabular-nums; }
/* お支払いのカード（2026-10-28〜）：登録済みのカード／別のカード。別のカードの欄（.tkb-newcard）にも set-wide を付けて「見出し｜入力欄」に並べる */
.tkb-cards { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.tkb-cards legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--heading); }
.tkb-cardopt { display: flex; align-items: baseline; gap: 8px; margin: 0; font-weight: normal; cursor: pointer; }
.tkb-cardopt input { flex: none; margin: 0; }
.tkb-newcard > p.hint { margin: 0 0 12px; }
.tkb-row2 { display: flex; gap: 8px; max-width: 220px; }
.tkb-notes { margin: 6px 0 10px; padding-left: 18px; line-height: 1.8; }
.tkb-err { margin: 8px 0; color: var(--danger, #d64545); font-weight: 700; }
@media (min-width: 761px) { .set-wide > .tkb-total, .set-wide > .tkb-cards, .set-wide > .tkb-notes, .tkb-newcard > p.hint { margin-left: 244px; } }
/* 期間限定の箱の「うち ◯ が 11/15 まで」・履歴のメモの期限（2026-10-15〜） */
.tk-balance-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tk-exp { white-space: nowrap; color: var(--text); }
.tk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tk-table th, .tk-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.tk-table th { background: var(--panel-soft); font-size: 12px; color: var(--muted); font-weight: 600; }
.tk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.tk-date { white-space: nowrap; color: var(--muted); }
.tk-note { color: var(--muted); }
.tk-num.is-minus { color: var(--danger); }
.tk-type { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px; background: var(--surface-2); color: var(--text); }
.tk-type-grant, .tk-type-refund { background: #e8f5ee; color: #1f7a48; }
.tk-type-consume { background: var(--surface-2); }
.tk-type-expire { background: #fbeee8; color: var(--danger); }
/* 履歴の「1件ずつ／まとめて」（2026-10-15〜）。まとめた行は少し濃く、開いた中身は薄く下げる */
.tk-hist-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.tk-hist-h h2 { margin-right: auto; }
.tk-view { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; font-size: 12px; }
.tk-view a { padding: 4px 12px; color: var(--muted); text-decoration: none; }
.tk-view a.is-on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.tk-group td { background: var(--surface-2); }
.tk-open { margin-left: 6px; white-space: nowrap; font-size: 12px; }
.tk-ref { margin-left: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }   /* 作業の横の「動画#・クリエイティブ#」（2026-10-15〜） */
.tk-sub td { font-size: 12px; }
.tk-sub td:first-child { padding-left: 22px; }
.tk-sub[hidden] { display: none; }


/* 分析カード：実行前の目安 */
.pa-cost { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.pa-cost strong { color: var(--text); font-variant-numeric: tabular-nums; }
.pa-cost.is-short { color: var(--danger); }
.pa-cost.is-short strong { color: var(--danger); }
.pa-cost[hidden] { display: none; }   /* 上の display:block が hidden を打ち消すため（足りないときだけ出す1行） */
/* ボタンの中の目安の札（token_chip_html・2026-10-27〜）。高さ16px＝ボタンの高さを変えず、並んだボタンがそろう */
.tkc { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 0 6px; height: 16px; border-radius: 999px; vertical-align: middle;
       font-size: 11px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; white-space: nowrap;
       background: var(--surface-2); color: var(--muted); }
.btn-sm .tkc, .linklike .tkc { margin-left: 6px; padding: 0 5px; }
.btn:not(.btn-ghost) .tkc { background: rgba(255, 255, 255, .22); color: #fff; }   /* 色付きのボタンの上 */
.tkc.is-short, .btn:not(.btn-ghost) .tkc.is-short { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); color: var(--danger); }
.tkc[hidden] { display: none; }
.tkc-coin { flex: none; }
/* 人物の「AIで画像を作る」はボタンの中の svg に大きさ・線を付けている（.vd-cast-photo-btn svg）ので、コインは札の大きさに戻す。間は gap があるので詰める */
.tkc .tkc-coin { width: 10px; height: 10px; stroke: none; }
.vd-cast-photo-btn .tkc { margin-left: 0; }
.tkc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 読み上げだけ（「トークン」「足りません」） */
/* 札のあるボタンに乗せたときの吹き出し（app.js）。ボタンの title（説明）は下の行に移して出す */
.tkc-tip { position: fixed; z-index: 1000; max-width: min(300px, calc(100vw - 16px)); padding: 6px 10px; border-radius: 6px; pointer-events: none;
           background: #212529; color: #f5f7fb; font-size: 12px; line-height: 1.55; box-shadow: 0 4px 14px rgba(33, 37, 41, .2); }
.tkc-tip[hidden] { display: none; }
.tkc-tip-sub { display: block; margin-top: 2px; color: #adb5bd; font-size: 11px; }
.tkc-tip::after { content: ""; position: absolute; left: var(--ax, 50%); bottom: -4px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg); background: inherit; }
.tkc-tip.is-below::after { bottom: auto; top: -4px; }
:root[data-theme="dark"] .tkc-tip { background: #eef2f7; color: #12151b; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .tkc-tip-sub { color: #5b6473; }

/* 運営画面：プランと付与 */
.sp-plan, .sp-grant { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sp-plan select, .sp-grant select { width: auto; margin: 0; padding: 3px 6px; font-size: 12px; }
.sp-grant input[type="number"] { width: 78px; margin: 0; padding: 3px 6px; font-size: 12px; }
.sp-unl { display: flex; align-items: center; gap: 3px; font-size: 11px; white-space: nowrap; font-weight: normal; }
.sp-unl input { width: auto; margin: 0; }

/* ===== 申し込み（/payment）＝購入手続きの画面 ===== */
.co { max-width: 1040px; margin: 0 auto; padding: 0 16px 64px; font-size: 1.2em; color: var(--text); }
.co input, .co select, .co button { font-size: 1em; }

.co-head { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.co-logo { width: 150px; height: auto; display: block; }
.co-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.co-ico { width: 15px; height: 15px; flex: none; }

/* 進み具合 */
.co-steps { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none;
    margin: 0 0 26px; padding: 0; flex-wrap: wrap; }
.co-steps li { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.co-steps li + li::before { content: ""; width: 48px; height: 1px; background: var(--line-strong); margin: 0 14px; }
.co-steps .co-step-n { display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--muted);
    font-size: 13px; font-weight: 700; }
.co-steps .is-now { color: var(--heading); font-weight: 600; }
.co-steps .is-now .co-step-n { background: var(--primary); color: #fff; }

/* 2段組み */
.co-grid { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.co-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.co-box { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; }
.co-box h2 { font-size: 20px; margin: 0 0 6px; color: var(--heading); }
.co-lead { color: var(--muted); font-size: 14px; margin: 0 0 18px; }

/* プラン */
.co-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.co-plan { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; cursor: pointer;
    border: 1.5px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: normal; }
.co-plan.is-on { border-color: var(--primary); background: var(--primary-soft); }
.co-plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-plan-name { font-size: 14px; color: var(--muted); }
.co-plan-price { font-size: 23px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.co-plan-price small { font-size: 12px; font-weight: normal; color: var(--muted); margin-left: 2px; }
.co-plan-tokens { font-size: 12px; color: var(--muted); }
.co-plan-cyc { font-size: 11px; color: var(--primary-ink); margin-top: 2px; }
/* キャンペーン（2026-10-27〜。2026-10-29 ユーザー「付与トークンをもっと目立たせて」で、だいだい色の札・大きな数に） */
:root { --camp-ink: #c2410c; --camp-hot: #ea580c; --camp-bg: #fff7ed; --camp-bg-2: #ffedd5; --camp-line: #fdba74;
    --camp-grad: linear-gradient(90deg, #f59e0b, #ea580c); --camp-hero: linear-gradient(180deg, #fff1de 0%, #fff9f2 100%); }
:root[data-theme="dark"] { --camp-ink: #fdba74; --camp-hot: #fb923c; --camp-bg: #2b1e12; --camp-bg-2: #3a2614; --camp-line: #9a4a14;
    --camp-hero: linear-gradient(180deg, #33210f 0%, #24180d 100%); }
.co-plan { position: relative; }
/* 札は選んでいるプランにだけ出す（枠の上に重ねる＝出し入れで高さが変わらない） */
.co-plan-ribbon { position: absolute; top: -11px; left: 8px; max-width: calc(100% - 12px); display: none; align-items: center; gap: 3px;
    padding: 3px 7px; border-radius: 6px; background: var(--camp-grad); color: #fff; font-size: 10.5px; font-weight: 700;
    letter-spacing: -.02em; white-space: nowrap; overflow: hidden; box-shadow: 0 2px 6px rgba(234, 88, 12, .3); }
.co-plan-ribbon .co-ico { width: 12px; height: 12px; flex: none; }
/* 3列のカードが細い幅（900〜1060px）では「トークン」を省いて、札の数が切れないようにする */
@media (min-width: 901px) and (max-width: 1060px) { .co-plan-ribbon-unit { display: none; } }
.co-plan.is-on .co-plan-ribbon { display: inline-flex; }
.co-plan-camp { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding: 8px 10px; border-radius: 6px;
    background: var(--camp-bg); border: 1px solid transparent; color: var(--camp-ink); line-height: 1.35; }
.co-plan.is-on .co-plan-camp { background: var(--camp-bg-2); border-color: var(--camp-line); }
.co-plan-camp-h { font-size: 11px; font-weight: 700; }
.co-plan-camp strong { font-size: 17px; font-weight: 800; color: var(--camp-hot); font-variant-numeric: tabular-nums; }
.co-plan-camp strong small { display: inline-block; font-size: 11px; font-weight: 700; margin-left: 2px; }   /* 細いときは「トークン」ごと次の行へ */
.co-plan-camp-sub { font-size: 11px; color: var(--muted); }
/* 右の内容の、初月合計の大きな表示 */
.co-camp-hero { position: relative; margin-top: 14px; padding: 14px 12px 12px; border-radius: 10px; text-align: center;
    background: var(--camp-hero); border: 1px solid var(--camp-line); }
.co-camp-hero[hidden] { display: none; }
/* 大きな表示のぶん右の欄が高くなる。画面の低いときは追いかけさせない（下のお支払いの額が画面の外に切れたままになるため） */
@media (max-height: 1000px) { .co-side:has(.co-camp-hero:not([hidden])) { position: static; } }
.co-camp-hero::before, .co-camp-hero::after { content: "✦"; position: absolute; color: #f59e0b; font-size: 14px; opacity: .75; }
.co-camp-hero::before { top: 8px; left: 10px; }
.co-camp-hero::after { top: 8px; right: 10px; }
.co-camp-hero-flag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
    background: var(--camp-grad); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 2px 8px rgba(234, 88, 12, .3); }
.co-camp-hero-flag .co-ico { width: 16px; height: 16px; }
.co-camp-hero-label { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--heading); }
.co-camp-hero-total { color: var(--camp-hot); line-height: 1.1; font-variant-numeric: tabular-nums; }
.co-camp-hero-total span { font-size: 38px; font-weight: 900; letter-spacing: -.01em; }
.co-camp-hero-total small { font-size: 15px; font-weight: 800; margin-left: 3px; }
.co-camp-hero-cmp { display: flex; align-items: stretch; gap: 6px; margin-top: 10px; }
.co-camp-hero-was, .co-camp-hero-now { flex: 1; display: flex; flex-direction: column; padding: 6px 4px; border-radius: 8px; line-height: 1.25; }
.co-camp-hero-was { background: var(--panel); color: var(--muted); }
.co-camp-hero-now { background: var(--camp-bg-2); border: 1px solid var(--camp-line); color: var(--camp-ink); }
.co-camp-hero-cmp span { font-size: 11px; font-weight: 700; }
.co-camp-hero-cmp b { font-size: 18px; font-variant-numeric: tabular-nums; }
.co-camp-hero-was b { color: var(--text); }
.co-camp-hero-now b { color: var(--camp-hot); }
.co-camp-hero-cmp small { font-size: 10px; }
.co-camp-hero-arrow { align-self: center; font-weight: 800; color: var(--camp-ink); }
.co-camp-hero-pill { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin-top: 10px;
    padding: 8px 10px; border-radius: 999px; background: var(--camp-grad); color: #fff; font-size: 14px; font-weight: 800;
    box-shadow: 0 2px 8px rgba(234, 88, 12, .3); }
.co-camp-hero-pill .co-ico { width: 18px; height: 18px; }
.co-camp-hero-note { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.6; }
.co-features li.co-camp { align-items: flex-start; font-weight: 600; color: var(--camp-ink); }
.co-features li.co-camp[hidden] { display: none; }
.co-features li.co-camp small { display: block; font-weight: normal; color: var(--muted); font-size: 11px; }
/* 支払いの周期（月払い・半年払い・年間払い・2026-10-16〜）。プランと同じ見た目 */
.co-cycles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.co-cycle { display: flex; flex-direction: column; gap: 2px; padding: 12px; cursor: pointer;
    border: 1.5px solid var(--line); border-radius: 8px; background: var(--panel); font-weight: normal; }
.co-cycle[hidden] { display: none; }
.co-cycle.is-on { border-color: var(--primary); background: var(--primary-soft); }
.co-cycle input { position: absolute; opacity: 0; width: 0; height: 0; }
.co-cycle-name { font-size: 14px; color: var(--muted); }
.co-cycle-price { font-size: 19px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.co-cycle-price small { font-size: 11px; font-weight: normal; color: var(--muted); margin-left: 2px; }
.co-cycle-sub { font-size: 12px; color: var(--muted); }

/* 入力欄 */
.co-field { margin-bottom: 16px; }
.co-field:last-child { margin-bottom: 0; }
.co-label { display: block; font-size: 14px; font-weight: 600; color: var(--heading); margin-bottom: 5px; }
.co-field input { width: 100%; margin: 0; padding: 11px 13px; border: 1px solid var(--line-strong);
    border-radius: 7px; background: var(--panel); }
.co-field input::placeholder { color: #aab2bd; }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-row2 .co-field { margin-bottom: 0; }
.co-note { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.req { display: inline-block; background: var(--danger); color: #fff; border-radius: 4px;
    padding: 1px 6px; margin-left: 6px; font-size: 11px; font-weight: 600; line-height: 1.5; vertical-align: 1px; }

/* 支払い方法 */
.co-pay { border: 1.5px solid var(--line); border-radius: 8px; margin-top: 14px; overflow: hidden; }
.co-pay.is-on { border-color: var(--primary); }
.co-pay-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer;
    font-weight: 600; color: var(--heading); margin: 0; }
.co-pay.is-on .co-pay-head { background: var(--primary-soft); }
.co-pay-head input { width: auto; margin: 0; }
.co-pay-name { flex: 1; font-size: 16px; }
.co-pay-body { padding: 18px 16px; border-top: 1px solid var(--line); }
.co-brands { display: flex; gap: 4px; flex-wrap: wrap; }
.co-brand { font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #55636f;
    border: 1px solid var(--line-strong); border-radius: 3px; padding: 2px 5px; background: var(--panel); }

/* 同意・送信 */
.co-terms { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: normal;
    color: var(--text); margin: 4px 2px; }
.co-terms input { width: auto; margin: 0; }
.co-terms a { color: var(--primary); text-decoration: underline; }   /* 利用規約・プライバシーポリシー（2026-11-04〜・別のタブで開く） */
.co-error { background: #fdf3f3; border: 1px solid #e3b6b6; color: var(--danger);
    border-radius: 8px; padding: 12px 14px; font-size: 15px; }
.co-submit { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
    padding: 16px; border: 0; border-radius: 8px; background: var(--primary); color: #fff;
    font-size: 19px; font-weight: 700; cursor: pointer; transition: background .12s; }
.co-submit:hover:not(:disabled) { background: var(--primary-d); }
.co-submit:disabled { background: #b8c2d6; cursor: not-allowed; }
.co-trust { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
    margin: 6px 0 0; padding: 0; }
.co-trust li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* 右側：内容の確認 */
.co-summary h2 { font-size: 16px; margin-bottom: 14px; }
.co-item { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.co-item-ico { width: 46px; height: auto; border-radius: 8px; flex: none; }
.co-item-name { font-weight: 700; color: var(--heading); font-size: 15px; }
.co-item-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.co-features { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.co-features li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); }
.co-ico-check { color: var(--primary); width: 14px; height: 14px; }
.co-price { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.co-price > div { display: flex; justify-content: space-between; font-size: 13px; }
.co-price dt { color: var(--muted); margin: 0; }
.co-price dd { margin: 0; font-variant-numeric: tabular-nums; }
.co-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin-top: 14px; padding: 14px 16px; background: var(--primary-soft); border-radius: 8px; }
.co-total span { font-size: 14px; font-weight: 600; color: var(--primary-ink); }
.co-total strong { font-size: 24px; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.co-total small { font-size: 12px; font-weight: normal; margin-left: 2px; }
.co-firstcharge { font-size: 12px; color: var(--muted); margin: 12px 0 0; line-height: 1.7; }
.co-safe { background: var(--panel-soft); }
.co-safe-h { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px;
    color: var(--heading); margin-bottom: 7px; }
.co-safe p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.75; }

/* テストモードの帯（2026-10-21〜 ページのいちばん上・ひと目で分かるように太く） */
.pay-testmode { background: #fff8e6; border: 2px solid #e0b84a; border-radius: 8px;
    padding: 12px 14px; margin: 16px 0 0; font-size: 13px; line-height: 1.6; }
.pay-testmode strong { display: inline-block; background: #e0b84a; color: #4a3600; border-radius: 4px;
    padding: 2px 10px; margin-right: 8px; font-size: 16px; }
.pay-testmode-bad { background: #fdecec; border-color: #e07a76; }
.pay-testmode-bad strong { background: #d9534f; color: #fff; }

/* 完了画面 */
.pay-wrap { max-width: 620px; margin: 32px auto 64px; padding: 0 16px; font-size: 1.2em; }
.pay-wrap input, .pay-wrap button { font-size: 1em; }
.pay-head { text-align: center; margin-bottom: 28px; }
.pay-head h1 { font-size: 28px; margin: 0 0 8px; }
.pay-lead { color: var(--muted); margin: 0; }
.pay-note { text-align: center; margin-top: 10px; }
.pay-donebox { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: var(--panel); }
.pay-donebox h2 { font-size: 19px; margin: 0 0 4px; }

@media (max-width: 900px) {
    .co-grid { grid-template-columns: 1fr; }
    .co-side { position: static; order: -1; }   /* スマホでは内容を先に見せる */
    .co-plans { grid-template-columns: 1fr; }
    .co-cycles { grid-template-columns: 1fr; }
    .co-steps li + li::before { width: 24px; margin: 0 8px; }
    .co-box { padding: 18px 16px; }
}

/* 運営画面：契約 */
.sc-table td { vertical-align: top; }
.sc-date { white-space: nowrap; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sc-name { font-weight: 600; }
.sc-sub { font-size: 11px; color: var(--muted); }
.sc-badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
    background: var(--surface-2); color: var(--text); }
.sc-pending { background: #f3f0e6; color: #7a6a2f; }
.sc-trial   { background: #e6f1ef; color: var(--primary-ink); }
.sc-active  { background: #e8f5ee; color: #1f7a48; }
.sc-due     { background: #fbeee8; color: var(--danger); }
.sc-frozen  { background: #f5e6e6; color: var(--danger); }
.sc-cancel  { background: var(--surface-2); color: var(--muted); }
.sc-hooks span { font-size: 11px; margin-right: 6px; white-space: nowrap; }
.sc-gmo code { font-size: 10px; }

/* 運営画面：決済の履歴・会社の詳細 */
.sp-sum { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* 決済の履歴：スプレッドシートに読み込む CSV の URL（2026-10-30〜） */
.sp-csv { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; background: var(--panel); margin-bottom: 18px; }
.sp-csv > summary { cursor: pointer; font-weight: 600; }
.sp-csv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; margin: 10px 0; }
.sp-csv-row input { flex: 1 1 320px; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.sp-sum-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; background: var(--panel); }
.sp-sum-item span { display: block; font-size: 11px; color: var(--muted); }
.sp-sum-item strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.sp-sum-item.is-ng strong { color: var(--danger); }
/* 決済の履歴で直す（ref・mode・メモ・2026-10-30〜） */
.sp-memo { max-width: 220px; white-space: normal; word-break: break-word; }
.sp-edit > summary { cursor: pointer; font-size: 12px; color: var(--accent, inherit); white-space: nowrap; }
.sp-edit-form { display: flex; flex-direction: column; gap: 6px; min-width: 260px; margin-top: 6px; font-size: 12px; }
.sp-edit-form label { display: flex; flex-direction: column; gap: 2px; }
.sp-edit-form input[type="text"] { font-size: 12px; }
.sp-edit-form .hint { margin: 0; font-size: 11px; }
.sp-edit-form .btn { align-self: flex-start; }
/* 決済の履歴でチェックした行を削除（2026-11-04〜） */
.sp-del-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.sp-del-bar .hint { margin: 0; font-size: 12px; }
.sp-del-bar .btn-danger:disabled { background: #b8c2d6; border-color: #b8c2d6; }
.sp-pick { width: 28px; text-align: center; }
.sp-pick input { width: auto; margin: 0; }
.st-slug { font-size: 12px; color: var(--muted); font-weight: normal; }
.st-cards { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.st-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 18px; background: var(--panel); min-width: 130px; }
.st-card-label { display: block; font-size: 11px; color: var(--muted); }
.st-card-num { font-size: 20px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; }
.st-card-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* 必須の印（申し込みフォーム） */
.req { display: inline-block; background: var(--danger); color: #fff; border-radius: 4px;
    padding: 1px 6px; margin-right: 6px; font-size: 11px; font-weight: 600; line-height: 1.5;
    vertical-align: 1px; }

/* 申し込み：段階の切り替え */
/* 段階で囲んだぶん、箱の間隔（.co-main の gap）が効かなくなるので、ここでも指定する。
   hidden を display:flex が打ち消してしまうため、[hidden] を必ず後ろに置く */
.co-stage { display: flex; flex-direction: column; gap: 16px; }
.co-stage[hidden] { display: none; }
.co-nav { display: flex; gap: 10px; align-items: center; }
.co-nav .co-submit { flex: 1; }
.co-back { background: none; border: 1px solid var(--line-strong); color: var(--text);
    border-radius: 8px; padding: 16px 20px; font-size: 15px; cursor: pointer; white-space: nowrap; }
.co-back:hover { background: var(--surface-hover); }
.co-arrow { margin-left: 4px; }
.co-confirm { width: 100%; border-collapse: collapse; margin-top: 14px; }
.co-confirm th, .co-confirm td { text-align: left; padding: 11px 6px; border-bottom: 1px solid var(--line);
    vertical-align: top; font-size: 15px; }
.co-confirm th { width: 32%; color: var(--muted); font-weight: 600; font-size: 14px; }
.co-edit { width: 60px; text-align: right; }
.co-edit button { background: none; border: 0; color: var(--primary); font-size: 13px; cursor: pointer; padding: 0; }
.co-edit button:hover { text-decoration: underline; }
.co-firstnote { font-size: 13px; color: var(--muted); text-align: center; margin: 4px 0 0; }
/* 自動更新と解約（特商法の最終確認画面・2026-10-21〜） */
.co-renew { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.7; }
.co-renew strong { display: block; margin-bottom: 2px; }
.co-renew p { margin: 0; }

/* 申し込み完了（サンクス） */
.co-thanks { max-width: 620px; }
/* モニターの再購入（payment/monitor_again・2026-10-28〜）。幅は完了の画面と同じ */
.ma-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.ma-gap { margin-top: 16px; }
.ma-notes { margin: 0; padding-left: 1.2em; line-height: 1.8; }
/* フッター（特商法の表記・プライバシーポリシーなど・2026-10-16〜）。申し込みの画面と完了の画面で共通 */
.co-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }
.co-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 13px; }
.co-foot-links a { color: var(--muted); text-decoration: none; }
.co-foot-links a:hover, .co-foot-links a:focus-visible { color: var(--text); text-decoration: underline; }
.co-thanksbox { text-align: center; padding: 34px 30px; }
.co-thanksbox h1 { font-size: 25px; margin: 0 0 10px; color: var(--heading); }
.co-thanksbox h2 { font-size: 17px; margin: 28px 0 4px; text-align: left; }
.co-thanksbox .co-lead { margin-bottom: 4px; line-height: 1.9; }
.co-thanksbox .co-note { text-align: left; margin-bottom: 14px; }
.co-thanksbox form { text-align: left; margin-top: 14px; }
.co-thanks-ico { width: 54px; height: 54px; border-radius: 50%; background: #e8f5ee; color: #1f7a48;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.co-thanks-ico .co-ico { width: 26px; height: 26px; }

/* 円記号だけ大きく見える問題（英字フォントに¥が無く、日本語フォントに落ちるため）。
   少し小さくして数字と釣り合わせる */
.co-yen { font-size: .78em; font-weight: 700; margin-right: 1px; vertical-align: .04em; }

/* ── 決済の仕様書（運営画面・super/spec）────────────────────────────
   読み物のページなので、一覧系より本文を広く・行間をゆったり取る */
.spec-lead { max-width: 900px; margin: 0 0 18px; color: var(--text); line-height: 1.8; }

.spec-toc {
    display: flex; flex-wrap: wrap; gap: 8px 10px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px 16px; margin-bottom: 26px; box-shadow: var(--shadow);
}
.spec-toc a {
    font-size: 13px; color: var(--primary-ink); background: var(--primary-soft);
    border-radius: 999px; padding: 5px 12px; text-decoration: none; white-space: nowrap;
}
.spec-toc a:hover { background: #dce8fa; }

.spec-sec {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--shadow); scroll-margin-top: 16px;
}
.spec-sec > h2 {
    font-size: 17px; color: var(--heading); margin: 0 0 14px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.spec-sec > h3 { font-size: 14px; color: var(--heading); margin: 22px 0 10px; }
.spec-sec p { line-height: 1.85; margin: 0 0 12px; max-width: 900px; }
.spec-sub { font-size: 13px; color: var(--muted); }

.spec-list { margin: 0 0 12px; padding-left: 20px; max-width: 900px; }
.spec-list li { line-height: 1.85; margin-bottom: 7px; }
.spec-steps { margin: 0 0 12px; padding-left: 22px; max-width: 900px; }
.spec-steps li { line-height: 1.85; margin-bottom: 8px; }

.spec-table { margin-bottom: 12px; }
.spec-table th { white-space: nowrap; }
.spec-table td { line-height: 1.75; vertical-align: top; }
.spec-table code { white-space: nowrap; }
.spec-url { white-space: normal !important; word-break: break-all; }

/* 補足の囲み。警告（spec-warn）だけ色を変える */
.spec-note {
    background: var(--panel-soft); border: 1px solid var(--line);
    border-left: 3px solid var(--primary); border-radius: var(--radius);
    padding: 12px 16px; margin: 14px 0; font-size: 13px; line-height: 1.85; max-width: 900px;
}
.spec-warn { border-left-color: var(--warning); background: #fdf8ef; }

.spec-sec code {
    background: var(--surface-2); border-radius: 4px; padding: 1px 6px;
    font-size: .92em; color: var(--heading);
}

@media (max-width: 640px) {
    .spec-sec { padding: 18px 16px; }
    .spec-toc { padding: 12px; }
}

/* 使ったトークン数（作業のあとに出す）。目安の .pa-cost と対に見えるように揃える */
.pa-spent {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--muted);
}
.pa-spent strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── 2段階認証（ログイン画面と同じ枠の中）──────────────────── */
.login-box-wide { max-width: 460px; }
.tfa-lead { margin: -4px 0 16px; line-height: 1.8; }
.tfa-code {
    letter-spacing: .3em; text-align: center; font-size: 22px;
    font-variant-numeric: tabular-nums;
}
.tfa-remember {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--muted); font-weight: normal;
}
.tfa-remember input { width: auto; margin: 0; }
.tfa-key {
    background: var(--panel-soft); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.tfa-key-h { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.tfa-key-v { font-size: 16px; letter-spacing: .06em; word-break: break-all; color: var(--heading); }
.tfa-key-act { margin-top: 10px; }
.tfa-key-meta { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.7; }
.tfa-state { margin: 10px 0; font-size: 14px; color: var(--text); }
.tfa-state.is-on strong { color: var(--success); }

/* ── 表現のつまみ（表現リスクチェック・ターゲットコピー）──────────
   「コピーと案」のダイヤルと同じ見た目。選んだ段の説明だけ下に出す */
.gv2-kdial { align-items: flex-start; }
.gv2-kdial .gv2-dial-l { padding-top: 6px; }
.gv2-kdial-hint { font-size: 11px; line-height: 1.65; margin: 6px 0 0; }

/* ── 数値の見比べ（分析v2）──────────────────────────────────
   左右で2つの期間を並べる。左＝薄い青の帯、右＝素の白で見分ける */
.an2-form {
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.an2-scope { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.an2-scope label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.an2-scope select { min-width: 200px; }
.an2-scope .hint { padding-bottom: 6px; }

.an2-tabs { display: inline-flex; margin: 16px 0 14px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.an2-tab {
    appearance: none; border: none; border-right: 1px solid var(--line);
    background: var(--panel); color: var(--muted); font: inherit; font-size: 13px;
    padding: 7px 16px; cursor: pointer;
}
.an2-tab:last-child { border-right: none; }
.an2-tab.is-on { background: var(--primary); color: #fff; font-weight: 600; }
.an2-tab:not(.is-on):hover { background: var(--surface-hover); color: var(--text); }

.an2-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an2-side { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--panel-soft); }
.an2-side:first-child { background: var(--primary-soft); border-color: #cfe0f7; }
.an2-side-h { font-size: 12px; font-weight: 700; color: var(--heading); margin-bottom: 8px; }
.an2-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.an2-chip {
    font-size: 12px; padding: 4px 10px; border: 1px solid var(--line-strong);
    border-radius: 999px; background: var(--panel); cursor: pointer; color: var(--text);
}
.an2-chip input { display: none; }
.an2-chip:hover { border-color: var(--primary); }
.an2-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.an2-dates { display: flex; align-items: center; gap: 6px; }
.an2-dates input { width: auto; font-size: 13px; }
.an2-tilde { color: var(--muted); }
.an2-range { font-size: 11px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.an2-go { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }

.an2-table th small { display: block; font-weight: normal; color: var(--muted); font-size: 11px; }
.an2-table td.num, .an2-table th.num { font-variant-numeric: tabular-nums; }
.an2-table tr.an2-sub td { color: var(--muted); font-size: 12px; }
.an2-chg { font-variant-numeric: tabular-nums; }
.an2-chg small { color: var(--muted); font-size: 11px; margin-left: 2px; }
.an2-chg.is-good { color: var(--success); font-weight: 600; }
.an2-chg.is-bad  { color: var(--danger);  font-weight: 600; }
.an2-chg.is-good small, .an2-chg.is-bad small { color: inherit; opacity: .75; }
.an2-note { max-width: 900px; line-height: 1.8; margin-top: 10px; }

/* 左右の帯。日別は列が多いので、どちらの列かが分かるようにする */
.an2-daily th, .an2-daily td { white-space: nowrap; }
.an2-daily .an2-lh { background: var(--primary-soft); }
.an2-daily thead .an2-lh { background: #dce8fa; }
.an2-daily .an2-n { color: var(--muted); font-size: 12px; }
.an2-daily tfoot td { font-weight: 600; border-top: 2px solid var(--line-strong); }

@media (max-width: 820px) {
    .an2-sides { grid-template-columns: 1fr; }
    .an2-scope select { min-width: 0; width: 100%; }
}

/* ── Meta広告アカウントの一覧（設定ページ）───────────────── */
.ma-table input[type="text"], .ma-table input[type="password"] { width: 100%; min-width: 130px; font-size: 13px; }
.ma-table td { vertical-align: top; }
.ma-meta { font-size: 12px; line-height: 1.7; }
.ma-meta .hint { display: block; font-size: 11px; }
.ma-err { color: var(--danger); font-size: 11px; line-height: 1.6; margin-top: 4px; }
.set-legacy { margin: 16px 0; }
.set-legacy > summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.set-legacy > summary:hover { color: var(--text); }
.set-howto { margin: 4px 0 12px; }
.set-howto > summary { font-size: 12px; color: var(--muted); cursor: pointer; width: fit-content; }
.set-howto > summary:hover { color: var(--text); }
.set-howto > ul, .set-howto > div { margin: 6px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.set-howto > ul { padding-left: 28px; }
.set-howto p { margin: 0 0 6px; }
.set-howto p:last-child { margin-bottom: 0; }
.set-howto code { overflow-wrap: anywhere; }

/* ── 資料ノート：商材全体の素材。設計は Codex（2026-09-24）──────
   外枠は常に開き、畳むのは追加フォームと要約全文だけ。状態は記号＋文字＋色で見せる */
.pc-panel { margin-top: 24px; min-width: 0; }
/* 商材トップでは LP一覧の上に置く。すぐ下の LP一覧との間をあける */
.pc-panel + .ws-lppick { margin-top: 28px; }
.pc-title-row, .pc-counts, .pc-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pc-title-row h2 { margin: 4px 0; font-size: 18px; color: var(--heading); }
.pc-optional { font-size: 12px; color: var(--muted); background: var(--surface-hover); border-radius: var(--radius); padding: 2px 6px; }
.pc-counts { margin: 4px 0 0; font-size: 13px; }
.pc-count.is-failed { color: var(--danger); }
.pc-count.is-pending { color: var(--primary-ink); }
.pc-intro { margin: 12px 0; line-height: 1.7; }
.pc-intro > .hint { display: block; }
.pc-upload { margin-top: 16px; }
.pc-upload > summary.pc-add { display: inline-block; list-style: none; font-size: 14px; color: #fff; cursor: pointer; }
.pc-upload > summary::-webkit-details-marker { display: none; }
.pc-upload[open] > summary.pc-add { color: var(--text); background: var(--panel); border-color: var(--line); }
.pc-upload-body { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.pc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pc-fields label { min-width: 0; margin: 0; }
.pc-fields input { width: 100%; min-width: 0; max-width: 100%; }
.pc-fields label > .hint { display: block; margin-top: 4px; font-weight: normal; }
.pc-notice { margin: 16px 0 8px; line-height: 1.8; }
.pc-library { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.pc-library > h3 { margin: 0 0 12px; font-size: 14px; }
.pc-list { display: grid; gap: 12px; }
.pc-item { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.pc-item.is-failed { border-left: 3px solid var(--danger); }
.pc-item-head { display: block; position: relative; }   /* 右上の削除ボタンの基準（2026-10-18〜）。ボタンは状態のチップの行に並び、タイトルはその下から始まるので右の余白は要らない */
.pc-status { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 600;
             color: var(--heading); background: var(--panel-soft); border: 1px solid var(--line); }
.pc-status.is-done { border-color: var(--success); }
.pc-status.is-pending { color: var(--primary-ink); background: var(--primary-soft); border-color: var(--primary-soft); }
.pc-status.is-failed { color: var(--danger); border-color: var(--danger); }
.pc-item-title { margin: 8px 0 6px; font-size: 15px; line-height: 1.65; color: var(--heading); overflow-wrap: anywhere; }
.pc-item.is-done .pc-item-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.pc-meta { margin: 0 0 10px; }
.pc-meta > span { min-width: 0; overflow-wrap: anywhere; }
.pc-result { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.pc-result > summary { padding: 8px 0; cursor: pointer; color: var(--primary); font-size: 13px; }
.pc-message, .pc-body, .pc-estimate { overflow-wrap: anywhere; }
.pc-message { font-size: 13px; }
.pc-body { min-width: 0; margin-top: 10px; padding: 12px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.pc-body .av-tablewrap { max-width: 100%; overflow-x: auto; }
.pc-item-del { position: absolute; top: 0; right: 0; margin: 0; }   /* 資料の削除＝右上の赤いボタン（2026-10-18〜・前は右下の文字リンク） */
.pc-panel summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* 開閉で文言を入れ替える。子孫全体に掛けると別の details まで巻き込むので直下に限る */
.pc-panel details > summary .pc-when-open { display: none; }
.pc-panel details[open] > summary .pc-when-closed { display: none; }
.pc-panel details[open] > summary .pc-when-open { display: inline; }
.pc-estimate { font-size: 13px; margin: 8px 0; color: var(--text); }
.pc-estimate.is-bad { color: var(--danger); font-weight: 600; }
/* 資料ノート：保存の仕方・画像と動画・分割送信の進み具合（2026-10-06〜） */
.pc-save-modes { margin: 14px 0 6px; padding: 0; border: 0; display: grid; gap: 8px; }
.pc-save-modes legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.pc-save-mode { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: normal; }
.pc-save-mode input { margin-top: 4px; flex: none; }
.pc-save-mode .hint { display: block; }
.pc-save-mode input:disabled + span { opacity: .5; }
.pc-video-note { color: var(--danger); }
.pc-progress { font-size: 13px; margin: 8px 0; display: grid; gap: 4px; }
.pc-progress-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.pc-progress-bar > span { display: block; height: 100%; background: var(--primary); transition: width .2s; }
.pc-status.is-stored { color: var(--muted); border-color: var(--line-strong); }
/* 「そのまま保存」の行の「AIで要約する」（2026-10-18〜） */
.pc-resum { margin: 0 0 12px; }
.pc-resum .pc-notice { margin: 8px 0; }
.pc-resum-error { color: var(--danger); }
.pc-media { display: block; margin: 0 0 10px; }
.pc-media-img { display: block; max-width: min(100%, 320px); max-height: 240px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.pc-media-video { display: block; width: 100%; max-width: 480px; max-height: 320px; border-radius: var(--radius); background: #000; }
/* 保存容量のメーター（資料ノート・スワイプ一覧） */
.storage-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 0 12px; font-size: 12px; color: var(--muted); }
.storage-meter-bar { flex: 1 1 120px; max-width: 240px; height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.storage-meter-bar > span { display: block; height: 100%; background: var(--primary); }
.storage-meter.is-warn .storage-meter-bar > span { background: var(--warning); }
.storage-meter.is-full .storage-meter-bar > span { background: var(--danger); }
.storage-meter.is-full .storage-meter-label { color: var(--danger); font-weight: 600; }
@media (max-width: 640px) {
    .pc-panel { padding: 14px; }
    .pc-fields { grid-template-columns: minmax(0, 1fr); }
    .pc-upload-body, .pc-item { padding: 12px; }
    .pc-upload > summary.pc-add, .pc-upload-body [data-pc-submit] { width: 100%; text-align: center; }
}

/* ── 数値の見比べ：その期間に配信したクリエイティブ（左右）──────────
   左は数値の表と同じ薄い青の帯、右は白。狭い画面では縦に積む */
.an2-crs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
@media (max-width: 760px) { .an2-crs { grid-template-columns: minmax(0, 1fr); } }
.an2-cr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.an2-cr-l { border-top: 3px solid var(--primary); }
.an2-cr-r { border-top: 3px solid var(--line-strong); }
.an2-cr-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.an2-cr-t { font-weight: 700; font-size: 14px; color: var(--heading); }
.an2-cr-empty { margin: 6px 0; }
.an2-cr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.an2-cr-item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.an2-cr-item:first-child { border-top: none; padding-top: 0; }
.an2-cr-thumb { flex: none; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; background: var(--line-soft); }
.an2-cr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an2-cr-body { min-width: 0; flex: 1; }
.an2-cr-name { display: block; font-weight: 600; font-size: 13px; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an2-cr-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); margin: 2px 0 6px; }
.an2-cr-only { color: var(--primary-ink); background: var(--primary-soft); border-radius: 999px; padding: 0 8px; }
.an2-cr-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
.an2-cr-nums div { display: flex; gap: 4px; align-items: baseline; }
.an2-cr-nums dt { font-size: 11px; color: var(--muted); }
.an2-cr-nums dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }

/* ── 数値の見比べ：一番下の「AIで分析・提案する」（2026-10-09〜）──────────
   色は変数だけ（ダークでもそのまま）。提案は1行ずつの箱、狭い画面では「作る」が下に回る */
.an2-ai { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.an2-ai-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.an2-ai-res + .an2-ai-go, .an2-ai-err + .an2-ai-go { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.an2-ai-msg { color: var(--danger); font-size: 13px; }
.an2-ai-msg:empty { display: none; }
.an2-ai-wait .hint { margin: 4px 0 0; }
.an2-ai-err { color: var(--danger); margin: 0; overflow-wrap: anywhere; }
.an2-ai-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.an2-ai-title { font-size: 16px; margin: 0; }
.an2-ai-sum { margin: 0 0 12px; line-height: 1.8; color: var(--heading); }
.an2-ai-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .an2-ai-cols { grid-template-columns: minmax(0, 1fr); } }
.an2-ai-col { border-left: 3px solid var(--line-strong); padding: 2px 0 2px 12px; min-width: 0; }
.an2-ai-col.is-good { border-left-color: var(--success); }
.an2-ai-col.is-bad { border-left-color: var(--danger); }
.an2-ai-col h3, .an2-ai-sub { font-size: 13px; margin: 0 0 6px; }
.an2-ai-col ul { margin: 0; padding-left: 1.2em; line-height: 1.7; }
.an2-ai-col li + li { margin-top: 4px; }
.an2-ai-sub { margin-top: 16px; }
.an2-ai-props { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: an2ai; }
.an2-ai-prop { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); counter-increment: an2ai; }
.an2-ai-prop-body { flex: 1 1 260px; min-width: 0; }
.an2-ai-prop-t { font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.an2-ai-prop-t::before { content: counter(an2ai) ". "; color: var(--muted); font-weight: 600; }
.an2-ai-prop-r { margin: 2px 0 0; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.an2-ai-prop-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; flex: none; max-width: 100%; }
.an2-ai-prop-cr { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; background: var(--line-soft); flex: none; }
.an2-ai-prop-cr img { width: 100%; height: 100%; object-fit: cover; display: block; }
.an2-ai-started { font-size: 13px; color: var(--muted); }
.an2-ai-started a { margin-left: 6px; }
.an2-ai-dlg-base { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.an2-ai-dlg-base img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: var(--line-soft); flex: none; }
.an2-ai-dlg-base span { font-weight: 600; color: var(--heading); overflow-wrap: anywhere; }
.an2-ai-dlg-dl { margin: 0; display: grid; gap: 6px; }
.an2-ai-dlg-dl div { display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 8px; }
.an2-ai-dlg-dl dt { color: var(--muted); font-size: 13px; }
.an2-ai-dlg-dl dd { margin: 0; overflow-wrap: anywhere; line-height: 1.6; }
.an2-ai-dlg .an2-ai-msg { display: block; margin: 10px 0 0; }
.an2-ai-dlg .an2-ai-msg:empty { display: none; }

/* ── 資料ノート（2026-09-25）：種類ごとの区画。区画どうしは細い線で区切る ── */
.pc-kind { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pc-kind-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pc-kind-h h3 { margin: 0; font-size: 15px; color: var(--heading); }
.pc-kind-about { margin: 4px 0 8px; }
.pc-kind .pc-upload { margin-top: 6px; }
.pc-kind .pc-list { margin-top: 12px; }
.pc-upload > summary.pc-add.btn-ghost { color: var(--primary); }
.pc-textarea { display: block; margin-top: 12px; font-weight: normal; }
.pc-textarea textarea { width: 100%; min-height: 140px; font-size: 13px; }
.pc-textarea > .hint { margin-left: 6px; font-size: 12px; }
.pc-orig-body { margin-top: 10px; padding: 12px; max-height: 420px; overflow: auto; background: var(--panel-soft);
                border: 1px solid var(--line); border-radius: var(--radius); font-size: 12.5px; line-height: 1.8; overflow-wrap: anywhere; }
/* 「指示にない文字を入れない」のチェック（生成の画面共通）。説明は小さく添える */
.text-strict { margin-top: 6px; font-weight: normal; }
.text-strict .hint { display: inline; margin-left: 4px; font-size: 12px; }

/* 商材トップ：LP選択を先頭に、共通資料は種類ごとの開閉で整理する。 */
.wsh-top .wsh-head { flex-wrap: wrap; }
.wsh-top .wsh-headl { flex-basis: 100%; }
.wsh-top .wsh-t { white-space: normal; overflow-wrap: anywhere; }
.wsh-top .wsh-act { flex-wrap: wrap; justify-content: flex-start; max-width: 100%; }
.wsh-top .wsh-b, .wsh-top .wsh-bg { white-space: normal; }
.ws-top { min-width: 0; }
.ws-top-overview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.ws-top-overview p { margin: 0; color: var(--muted); font-size: 13px; }
.ws-top-overview strong { color: var(--heading); }
.ws-top .ws-lppick-h h2 { margin: 4px 0; font-size: 20px; color: var(--heading); }
.ws-top .ws-lppick-h > div { flex: 1 1 280px; min-width: 0; }
.ws-top .ws-lppick-h > .btn { flex-shrink: 0; }
.ws-top .ws-lppick .empty { margin-top: 16px; padding: 24px 16px; background: var(--panel-soft); border-radius: var(--radius); }
.ws-top .ws-lpcard { min-width: 0; }
.ws-top .ws-lpcard-n { white-space: normal; overflow-wrap: anywhere; }
.ws-top .ws-lpcard-c { flex-wrap: wrap; gap: 4px 10px; }
.ws-top .ws-lpcard-b > .anp-tabpill { align-self: flex-start; }
.ws-top .pc-panel { margin-top: 18px; }
.ws-top .pc-head .pc-counts { display: none; } /* 件数は各種類の開閉見出しに集約 */
.pc-kind-fold > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 8px 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--heading); }
.pc-kind-fold > summary::-webkit-details-marker { display: none; }
.pc-kind-fold > summary::before { content: '+'; color: var(--primary); }
.pc-kind-fold[open] > summary::before { content: '−'; }
.pc-kind-fold > summary .hint { font-weight: normal; }
.pc-kind-action { margin-left: auto; color: var(--primary); font-size: 12px; }
.pc-kind-fold[open] > summary .pc-kind-action { display: none; }
.ws-top-recent > summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.ws-top-recent > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ws-top .ws-act-label { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .wsh-top .wsh-act { width: 100%; }
    .wsh-top .wsh-b { width: 100%; text-align: center; }
    .ws-top > .ws-card { padding: 14px; }
    .ws-top .ws-lpcard-th { width: 48px; height: 60px; flex-basis: 48px; }
    .ws-top .ws-lpcard-steps { flex-basis: 100%; }
    .ws-top .ws-activity li { flex-wrap: wrap; gap: 4px 8px; }
    .ws-top .ws-act-ts { flex-basis: 100%; padding-left: 16px; }
    .ws-top .pc-kind-action { flex-basis: 100%; margin-left: 20px; }
}

/* 生成の素材選択：商材 → 着地先 → 選択内容。素材だけチェックを常時表示する */
.gv2-material-picker .gv2-lpcard { align-items: flex-start; }
.gv2-material-picker .gv2-picker { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.gv2-material-picker .gv2-picker select { width: 100%; min-width: 0; max-width: 100%; }
.gv2-material-picker .gv2-field-label { font-size: 12px; font-weight: 700; color: var(--heading); }
.gv2-material-picker .gv2-lprow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.gv2-material-picker .gv2-lprow .hint { margin: 0; }
.gv2-material-picker .gv2-lpfilter .gv2-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }
.gv2-material-summary { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 5px; }
.gv2-material-picker .gv2-matsum { color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
.gv2-material-picker .gv2-mat-group { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); }
.gv2-material-picker .gv2-mat-group:last-of-type { border-bottom: 0; }
.gv2-material-picker .gv2-mat-h { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-bottom: 9px; }
.gv2-material-picker .gv2-mat-h .hint { margin: 0; }
.gv2-material-picker .gv2-material-option { align-items: flex-start; max-width: 100%; min-width: 0; box-sizing: border-box; border-radius: 7px; padding: 9px 11px; gap: 8px; }
/* チェックボックスは見せない（2026-10-15 ユーザー指示）。キーボードで選べるように display:none にはせず、見えないだけにする */
.gv2-material-picker .gv2-material-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.gv2-material-option .gv2-chip-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.gv2-material-meta { font-size: 11px; font-weight: 500; line-height: 1.5; color: var(--muted); }
.gv2-material-option:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 素材の選択肢（2026-10-15 ユーザー指示）：チェックボックスは無し。選んだものは、太い青の枠・薄い青の背景・右上の ✓ で分かるように。
   動画・漫画動画の作り始めのフォームの .vd-form label（display:grid）に負けないように、label まで書いて強くする */
.gv2-material-picker label.gv2-material-option { position: relative; display: inline-flex; flex-direction: row; align-items: flex-start; gap: 8px; margin: 0; }
.gv2-material-picker label.gv2-material-option:has(input:checked) { box-shadow: inset 0 0 0 1px var(--primary); }
.gv2-material-picker label.gv2-material-option:has(input:checked)::after { content: '✓'; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--panel); }
.gv2-material-picker label.gv2-material-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.gv2-material-picker label.gv2-material-option:has(input:disabled):hover { background: var(--panel); border-color: var(--line-strong); }
@media (max-width: 600px) {
    .gv2-material-picker .gv2-lpcard { flex-direction: column; padding: 12px; }
    .gv2-material-picker .gv2-lpcard-main { width: 100%; }
    .gv2-material-picker .gv2-lpcard-thumb { width: 96px; height: 56px; }
    .gv2-material-picker .gv2-material-option { width: 100%; }
    .gv2-material-picker .gv2-card-h { flex-wrap: wrap; }
    .gv2-material-picker .gv2-card-t { min-width: 0; }
}

/* 資料ノートの「追加」：AIで読み取る／要約を自分で貼り付け のタブ（2026-09-28〜） */
.pc-add-tabs > .pc-tabs { margin: 12px 0 0; }
.pc-add-tabs > .pc-tabs + [data-pc-panel] > .pc-upload-body,
.pc-add-tabs > [data-pc-panel] > .pc-upload-body { margin-top: 10px; }

/* ===== 商材の登録手順・まとめて分析（products/setup.php・2026-09-28〜） ===== */
.su-steps ol { display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; flex-wrap: wrap; }
.su-steps li a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
                 background: var(--panel); color: var(--muted); text-decoration: none; font-size: 13px; }
.su-steps li a:hover { text-decoration: none; border-color: var(--primary); color: var(--heading); }
.su-steps .su-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); font-size: 12px; font-weight: 700; }
.su-steps li.is-past a { color: var(--text); }
.su-steps li.is-current a { border-color: var(--primary); color: var(--heading); font-weight: 700; }
.su-steps li.is-current .su-no { background: var(--primary); color: #fff; }
.su-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; }
.su-card h2 { margin: 0 0 8px; font-size: 17px; }
.su-card h3 { margin: 18px 0 6px; font-size: 14px; }
.su-lead { color: var(--text); line-height: 1.7; margin: 0 0 12px; }
/* 戻る・次へは左に寄せる（右下は「AIに依頼・質問」のボタンと重なるため・2026-10-21 ユーザー指示） */
.su-nav { display: flex; gap: 10px; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 16px 0 8px; }
.su-lplist { list-style: none; margin: 0 0 14px; padding: 0; border-top: 1px solid var(--line); }
.su-lplist li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.su-lpmain { display: grid; gap: 2px; min-width: 0; }
.su-url { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.su-lpform { display: grid; grid-template-columns: 2fr 1fr auto; gap: 10px; align-items: end; }
.su-lpform label { display: grid; gap: 4px; font-size: 13px; }
.su-lpform[hidden], .su-lptext[hidden] { display: none; }
.su-lptabs { margin: 0 0 12px; }
.su-lptext { display: grid; gap: 10px; }
.su-lptext label { display: grid; gap: 4px; font-size: 13px; }
.su-lptext textarea { width: 100%; min-width: 0; }
.su-lptext-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.su-lptext .hint { margin: 0; }
/* 登録手順は .cmhub の外なので、.cmhub-dialog が使う変数（角の丸み・背景の暗さ）を .cmhub と同じ値でここに置く（無いと角が直角・背景が暗くならない） */
.su-added { --cmhub-radius: 16px; --cmhub-backdrop: rgb(20 32 52 / 38%); }
.su-added::backdrop { background: rgb(20 32 52 / 38%); }   /* ::backdrop が変数を受け継がない古いブラウザ用に直接も書く */
.su-added h2 { margin: 0 0 10px; font-size: 18px; text-wrap: balance; }
.su-added p { margin: 0 0 18px; color: var(--muted); line-height: 1.7; }
.su-added-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.su-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; margin: 0 0 12px; }
.su-group legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.su-check { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; cursor: pointer; }
.su-check input { margin-top: 3px; flex: none; }
.su-check small { display: block; line-height: 1.6; }
.su-check.is-fixed { cursor: default; }
.su-sub { margin: 10px 0 2px; font-size: 12px; color: var(--muted); font-weight: 700; }
.su-more { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.su-more > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); padding: 2px 0; width: fit-content; }
.su-more > summary:hover { color: var(--text); }
.su-est { margin: 8px 0 0; padding: 10px 12px; border-radius: 6px; background: var(--panel-soft); font-size: 13px; }
.su-est.is-bad { background: #fff1f0; color: #a8071a; }
.su-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.su-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg); }
.su-badge.is-running { background: #e7f0ff; color: #0a3d91; }
.su-badge.is-done { background: #e6f6ec; color: #1a7f37; }
.su-badge.is-error, .su-badge.is-canceled { background: #fff1f0; color: #a8071a; }
.su-bar { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.su-bar > span { display: block; height: 100%; background: var(--primary); transition: width .3s; }
.su-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.su-steplist li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.su-dot { width: 9px; height: 9px; border-radius: 50%; background: #c9ced6; flex: none; }
.su-steplist li.is-pending .su-dot { background: var(--primary); }
.su-steplist li.is-done .su-dot { background: #1a7f37; }
.su-steplist li.is-error .su-dot { background: #d93025; }
.su-state { font-size: 12px; color: var(--muted); }
.su-steplist li.is-error .su-state { color: #a8071a; }
.su-notes { margin: 0; padding-left: 18px; font-size: 13px; color: var(--text); }
.su-comp { margin-top: 8px; }
@media (max-width: 640px) {
    .su-lpform { grid-template-columns: 1fr; }
    .su-lptext-row { grid-template-columns: 1fr; }
}

/* ===== ナレーション動画（videos/・ローカルで試作中 2026-09-29〜） ===== */
.vd-form { display: grid; gap: 12px; max-width: 640px; }
.vd-form label { display: grid; gap: 4px; font-size: 13px; }
.vd-len { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; display: grid; gap: 6px; }
.vd-len label { display: flex; gap: 8px; align-items: center; }
.vd-len label.vd-len-own { flex-wrap: wrap; gap: 6px 8px; }   /* 自分で指定（5〜600秒・2026-11-04〜） */
.vd-len-own input[type="number"] { width: 84px; }
.vd-len-own .hint { font-size: 12px; }
.mv-panels-own { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }   /* 漫画動画のコマ数「自分で指定」（4〜100・2026-11-04〜） */
.mv-panels-own[hidden] { display: none; }
.mv-panels-err { flex-basis: 100%; color: var(--danger, #c0392b); font-size: 12px; }
.mv-panels-err[hidden] { display: none; }
/* 映像のスタイル：見本の画像つきのカード（2026-10-05〜） */
.vd-style-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vd-style-card { position: relative; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
/* 並べ方は .vd-len label / .vd-form label / form label より強く（中央寄せ・gap 8px・下の余白が乗らないように）。枠の色は :hover / :checked が勝つよう上の行に残す */
.vd-len label.vd-style-card { display: flex; flex-direction: column; gap: 4px; align-items: stretch; margin: 0; }
.vd-style-card:hover { border-color: var(--primary); }
.vd-style-card:has(input:checked) { border-color: var(--primary); background: #eff6ff; box-shadow: 0 0 0 1px var(--primary) inset; }
.vd-style-card input { position: absolute; top: 14px; left: 14px; margin: 0; z-index: 1; }
.vd-style-img { display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; background: var(--bg); }
.vd-style-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-style-name { font-weight: 700; color: var(--heading); font-size: 14px; }
.vd-style-card .hint { font-size: 12px; line-height: 1.5; margin: 0; }
@media (max-width: 640px) { .vd-style-cards { grid-template-columns: 1fr; } }
.vd-regen { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.vd-regen label { display: grid; gap: 4px; font-size: 13px; flex: 1; min-width: 220px; }
.vd-audio { margin-top: 14px; display: grid; gap: 8px; }
.vd-audio audio { width: 100%; max-width: 560px; }
.vd-times { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.vd-times td { border-bottom: 1px solid var(--line); padding: 5px 8px; vertical-align: top; }
.vd-times td:first-child { white-space: nowrap; color: var(--muted); width: 1%; }
.vd-delete { margin: 10px 0 30px; text-align: right; }
.vd-bulk { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.vd-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; background: var(--panel); }
.vd-narr { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); }
.vd-media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vd-media img, .vd-media video { width: 100%; aspect-ratio: var(--vd-ar, 9 / 16); object-fit: cover; border-radius: 6px; background: #111; display: block; }
.vd-label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.vd-empty { aspect-ratio: var(--vd-ar, 9 / 16); border: 1px dashed var(--line); border-radius: 6px; display: grid; place-items: center; font-size: 12px; color: var(--muted); padding: 6px; text-align: center; }
.vd-empty.is-error { color: #a8071a; border-color: #f5c2c0; }
.vd-fix { display: grid; gap: 6px; font-size: 13px; }
.vd-fix label { display: grid; gap: 3px; }
.vd-fix-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vd-radio { display: inline-flex !important; gap: 4px; align-items: center; font-size: 12px; }
.vd-edit summary { cursor: pointer; font-size: 13px; color: var(--primary); }
.vd-final { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.vd-final video { width: 100%; max-width: 360px; aspect-ratio: var(--vd-ar, 9 / 16); background: #111; border-radius: 8px; }
.vd-new .gv2-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vd-mats { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 14px; }
.vd-imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-img { position: relative; width: 96px; display: grid; gap: 4px; font-size: 11px; color: var(--muted); cursor: pointer; }
.vd-img img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 2px solid var(--line); }
.vd-img input { position: absolute; top: 6px; left: 6px; }
.vd-img:has(input:checked) img { border-color: var(--primary); }
.vd-img:has(input:disabled) { opacity: .5; }
.vd-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.vd-actions-cost { margin: 6px 0 0; }
/* 仕上げの「タイトルとCTAは後からでも追加できます」（2026-10-19〜） */
.vd-later-note { margin: 4px 0 14px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 8px; background: var(--primary-soft); font-size: 13px; line-height: 1.7; color: var(--text); }   /* 「台本を作る」のトークンの目安はボタンの下（2026-10-19〜） */
.su-steps .su-fixed { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 13px; }
.su-steps li.is-current .su-fixed { border-color: var(--primary); color: var(--heading); font-weight: 700; }
.vd-steps li.is-past .su-no { background: #e7f6ec; color: #1f8a4c; }
.su-steps .su-off { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px dashed var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; opacity: .7; }
.vd-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 24, 32, .55); display: grid; place-items: center; padding: 16px; }
.vd-modal[hidden] { display: none; }
.vd-modal-box { background: var(--panel); border-radius: 12px; padding: 28px 32px; text-align: center; max-width: 360px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.vd-modal-box p { margin: 10px 0 0; }
.vd-spinner { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--primary); animation: vd-spin .9s linear infinite; }
@keyframes vd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vd-spinner { animation-duration: 2.5s; } }
.vd-audio + .vd-voiceform { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.vd-speed-h { display: flex; align-items: baseline; gap: 8px; }
.vd-speed-h > span { font-weight: 700; color: var(--heading); }
.vd-form[hidden], .vd-voiceform[hidden] { display: none; }   /* .vd-form の display: grid が hidden を上書きしないように */
.vd-list { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.vd-row { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.vd-row-h { display: flex; gap: 10px; align-items: baseline; }
.vd-scene { margin: 0; font-size: 14px; line-height: 1.7; }
.vd-row-media { grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.vd-row-media-l { display: grid; gap: 8px; min-width: 0; }
@media (max-width: 760px) { .vd-row-media { grid-template-columns: 1fr; } }
.vd-cast { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0 4px; background: var(--panel-soft); display: grid; gap: 10px; }
.vd-cast-p { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 12px; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; background: var(--panel); }
.vd-cast-p legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.vd-cast-p label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.vd-cast-p label.is-wide { grid-column: 1 / -1; }
.vd-cast-line { margin: 0; font-size: 13px; line-height: 1.7; }
@media (max-width: 640px) { .vd-cast-p { grid-template-columns: 1fr; } }
.vd-row-sb { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.vd-sb-img img, .vd-sb-img video { width: 100%; aspect-ratio: var(--vd-ar, 9 / 16); object-fit: cover; border-radius: 8px; background: #111; display: block; }
.vd-sb-img .vd-empty { width: 100%; }
.vd-state { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.vd-state.is-done { background: #e6f6ec; color: #1a7f37; }
.vd-state.is-generating { background: #e7f0ff; color: #0a3d91; }
.vd-state.is-error { background: #fff1f0; color: #a8071a; }
@media (max-width: 640px) { .vd-row-sb { grid-template-columns: 120px minmax(0, 1fr); } }
/* シーンの見出しを大きく（2026-09-29） */
.vd-row-h { align-items: center; flex-wrap: wrap; }
.vd-row-h strong { font-size: 17px; color: var(--heading); }
.vd-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: 14px; flex: none; }
.vd-time { font-size: 13px; font-weight: 700; color: var(--primary-ink, var(--primary)); background: var(--primary-soft, #e7f0ff); padding: 2px 10px; border-radius: 999px; }
.vd-sec-h { font-size: 16px; font-weight: 700; color: var(--heading); }
.vd-sec-h .hint { font-size: 12px; font-weight: 400; margin-left: 6px; }
/* 登場人物のカード（丸いアイコンつき） */
.vd-cast-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vd-cast-card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px; display: grid; gap: 10px; align-content: start; }
.vd-cast-top { display: flex; gap: 12px; align-items: center; }
.vd-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); }
.vd-avatar.is-empty { display: inline-grid; place-items: center; background: var(--bg); color: var(--muted); font-weight: 700; font-size: 20px; }
.vd-cast-desc { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text); }
.vd-cast-card .vd-cast-p { border: 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); background: none; }
/* ナレーション動画：右に固定のサブナビ（広い画面だけ。狭い画面では出さない） */
.vd-subnav { display: none; }
@media (min-width: 1280px) {
    .vd-subnav { display: block; position: fixed; right: 16px; top: calc(96px + env(safe-area-inset-top, 0px)); width: 150px; max-height: calc(100vh - 140px); overflow-y: auto;
                 background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 8px; z-index: 50; }
    .vd-subnav-h { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 6px 6px; }
    .vd-subnav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
    .vd-subnav a { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 6px; font-size: 12px; color: var(--text); text-decoration: none; }
    .vd-subnav a:hover { background: var(--bg); text-decoration: none; }
    .vd-subnav a.is-on { background: var(--primary-soft, #e7f0ff); color: var(--primary); font-weight: 700; }
    .vd-subnav-no { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); font-weight: 700; font-size: 11px; flex: none; }
    .vd-subnav a.is-on .vd-subnav-no { background: var(--primary); color: #fff; }
    /* サブナビと中身が重ならないよう、右に余白 */
    body:has(.vd-subnav) .su-card { margin-right: 170px; }
}
.vd-row, .vd-cast { scroll-margin-top: 80px; }
.vd-tone { border: 0; margin: 0; padding: 0; min-width: 0; }
.vd-tone legend { font-weight: 700; font-size: 13px; color: var(--heading); margin-bottom: 8px; padding: 0; }
.vd-tone-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.vd-tone-opt { position: relative; display: inline-flex; }
.vd-tone-opt label { display: inline-flex; cursor: pointer; margin: 0; }   /* form label の下の余白を消す（残ると ▶ が中央からずれる） */
.vd-tone-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vd-tone-opt span { padding: 8px 44px 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 13px; color: var(--text); }
.vd-tone-opt input:checked + span { border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 700; }
.vd-tone-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
/* サンプルの ▶（選択肢の右端に重ねる。再生中は ■、作成中は回る） */
.vd-tone-play { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%;
                border: 1px solid var(--line); background: var(--bg); cursor: pointer; padding: 0; display: grid; place-items: center; }
.vd-tone-play::before { content: ""; width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--primary); }
.vd-tone-play:hover { border-color: var(--primary); }
.vd-tone-play.is-playing::before { width: 8px; height: 8px; margin-left: 0; border: 0; background: var(--primary); border-radius: 1px; }
.vd-tone-play.is-loading::before { width: 10px; height: 10px; margin-left: 0; border: 2px solid var(--primary); border-right-color: transparent; border-radius: 50%; animation: vd-tone-spin .8s linear infinite; }
@keyframes vd-tone-spin { to { transform: rotate(360deg); } }
.vd-tone-opt label:has(input:checked) + .vd-tone-play { background: #fff; border-color: #fff; }
.vd-tones-per { margin: 4px 0 8px; font-size: 13px; }
.vd-tones-per summary { cursor: pointer; color: var(--primary); }
.vd-tones-per ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.vd-tone-tag { display: inline-block; min-width: 5.5em; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; text-align: center; }
/* 声のセレクトの横の「サンプルを聞く」（2026-10-08〜）。▶／■／回る はトーンの ▶ と同じ形。色は変数だけなのでダークでもそのまま見える。
   form label の下の余白（14px）が残ると、ボタンがセレクトより下にずれるので、余白は外側の箱に移す */
.vd-voice-pick { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.vd-voice-pick > label { flex: 1 1 260px; min-width: 0; margin: 0; }
.vd-voice-sample { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 8px; border: 1px solid var(--line); border-radius: 999px;
                   background: var(--panel); color: var(--heading); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; }
.vd-voice-sample:hover:not(:disabled), .vd-voice-sample.is-playing { border-color: var(--primary); }
.vd-voice-sample:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vd-voice-sample:disabled { cursor: not-allowed; opacity: .5; }
.vd-voice-sample-ico { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; flex: none; }
.vd-voice-sample-ico::before { content: ""; width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--primary); }
.vd-voice-sample.is-playing .vd-voice-sample-ico::before { width: 8px; height: 8px; margin-left: 0; border: 0; background: var(--primary); border-radius: 1px; }
.vd-voice-sample.is-loading .vd-voice-sample-ico::before { width: 10px; height: 10px; margin-left: 0; border: 2px solid var(--primary); border-right-color: transparent; border-radius: 50%; animation: vd-tone-spin .8s linear infinite; }
.vd-voice-sample-stop { display: none; }
.vd-voice-sample.is-playing .vd-voice-sample-play { display: none; }
.vd-voice-sample.is-playing .vd-voice-sample-stop { display: inline; }
/* シーン概要の登場人物：箱を重ねず、シーンの行と同じく線で区切ったリスト（左に写真・右に項目） */
.vd-cast.is-plan { border: 0; background: none; padding: 0; margin: 8px 0 20px; }
.vd-cast-list { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--line); }
.vd-cast-item { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); align-items: start; }
.vd-cast-item-h { grid-column: 1 / -1; font-weight: 700; color: var(--heading); font-size: 15px; }
.vd-cast-item.is-new .vd-cast-item-h { color: var(--muted); font-weight: 600; }
.vd-cast-photo { display: grid; gap: 8px; justify-items: stretch; width: 128px; }
.vd-cast-photo-box { width: 128px; height: 128px; border-radius: 10px; border: 1px dashed var(--line); background: var(--bg); display: grid; place-items: center; overflow: hidden; position: relative; }
.vd-cast-photo-img { width: 100%; height: 100%; object-fit: cover; }
.vd-cast-photo-none { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.5; }
.vd-cast-photo-btn { margin: 0 !important; display: inline-flex !important; align-items: center; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 12px; font-weight: 600; color: var(--heading); cursor: pointer; }
.vd-cast-photo-btn:hover { border-color: var(--primary); }
.vd-cast-photo-btn { gap: 6px; line-height: 1.4; font-family: inherit; width: 100%; max-width: 200px; justify-content: center; box-sizing: border-box; padding-left: 8px !important; padding-right: 8px !important; white-space: nowrap; }   /* 人物の3つのボタンは同じ長さ（写真の枠の幅）にそろえる */
.vd-cast-photo-btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vd-cast-photo-btn:disabled { opacity: .5; cursor: not-allowed; }
.vd-cast-photo-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.vd-cast-photo-btn:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.vd-cast-photo-rm { margin: 0 !important; display: flex !important; gap: 6px; align-items: center; font-size: 12px; font-weight: 400; color: var(--muted); }
/* シーン概要で人物の画像を作る・作り直す（2026-10-05） */
.vd-cast-ai { display: grid; gap: 6px; width: 100%; justify-items: stretch; }
.vd-cast-ai[hidden] { display: none; }
.vd-cast-ai textarea { width: 100%; margin: 0; font-size: 12px; padding: 6px 8px; resize: vertical; }
.vd-cast-ai .btn { margin: 0; }
.vd-castdlg { width: min(460px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.vd-castdlg::backdrop { background: rgba(15, 23, 42, .5); }
.vd-castdlg h3 { margin: 0 0 12px; font-size: 16px; }
.vd-castdlg label { display: grid; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--heading); }
.vd-castdlg textarea { margin: 0; width: 100%; }
.vd-castdlg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
/* 生成の前の確認（2026-11-06〜・app.js の setupGenConfirm）。本文・※の注意・「次からは表示しない」 */
.gen-cf-dlg .gen-cf-text { margin: 0 0 6px; line-height: 1.7; }
.gen-cf-dlg .gen-cf-note { margin: 0 0 12px; }
.vd-castdlg.gen-cf-dlg label.gen-cf-skip { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text); cursor: pointer; }
.gen-cf-dlg .gen-cf-skip input { width: auto; margin: 0; }
/* ナレーションの1文を直す（2026-11-02〜）。▶／■／回る は声のサンプルと同じ形。モーダルは2つのやり方を横に並べる（狭い画面は縦） */
.vd-vfix { margin: 18px 0 4px; }
.vd-vfix-h { font-weight: 700; color: var(--heading); font-size: 14px; }
.vd-vfix-h .hint { display: block; font-weight: 400; margin-top: 2px; }
.vd-vfix-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); counter-reset: vfix; }
.vd-vfix-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); counter-increment: vfix; }
.vd-vfix-row::before { content: counter(vfix); min-width: 1.6em; color: var(--muted); font-size: 12px; text-align: right; flex: none; }
.vd-vfix-text { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.6; }
.vd-vfix-row .btn { flex: none; }
.vd-vfix-done { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--primary); color: var(--primary); font-size: 11px; line-height: 18px; vertical-align: 1px; }
.vd-vfix-play { width: 32px; height: 32px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); display: grid; place-items: center; cursor: pointer; padding: 0; }
.vd-vfix-play:hover, .vd-vfix-play.is-playing { border-color: var(--primary); }
.vd-vfix-play:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.vd-vfix-play > span { width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--primary); }
.vd-vfix-play.is-playing > span { width: 8px; height: 8px; margin-left: 0; border: 0; background: var(--primary); border-radius: 1px; }
.vd-vfix-play.is-loading > span { width: 10px; height: 10px; margin-left: 0; border: 2px solid var(--primary); border-right-color: transparent; border-radius: 50%; animation: vd-tone-spin .8s linear infinite; }
.vd-vfixdlg { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.vd-vfix-target { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 8px; background: var(--bg); }
.vd-vfix-target p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--heading); }
.vd-vfix-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.vd-vfix-way { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.vd-vfix-way h4 { margin: 0; font-size: 14px; color: var(--heading); }
.vd-vfix-way .hint { margin: 0; }
.vd-vfix-way-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vd-vfix-way-wide { grid-column: 1 / -1; }
.vd-vfix-bubble { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 14px; }
.vd-vfix-inst { width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px; font: inherit; }
.vd-vfix-cand-text { flex-basis: 100%; margin-left: 40px; font-size: 13px; color: var(--muted); }
.vd-vfix-next { margin: 0; font-size: 13px; font-weight: 600; color: var(--heading); }
.vd-vfix-base { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 13px; }
.vd-vfix-base > span { font-weight: 600; color: var(--heading); }
.vd-vfix-base label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.vd-vfix-base[hidden] { display: none; }
.vd-vfix-recdone { display: grid; gap: 8px; }
.vd-vfix-recdone[hidden] { display: none; }
.vd-vfix-recdone audio { width: 100%; height: 36px; }
.vd-vfix-recdot { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; margin-right: 6px; display: inline-block; }
[data-vf-rec].is-rec { border-color: #e5484d; }
[data-vf-rec].is-rec .vd-vfix-recdot { border-radius: 2px; animation: anp-blink 1s step-end infinite; }
.vd-vfix-rectime { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.vd-vfix-busy { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 13px; color: var(--heading); }
.vd-vfix-busy[hidden] { display: none; }
.vd-vfix-busy .vd-spinner { width: 20px; height: 20px; border-width: 3px; margin: 0; }
.vd-vfixdlg [data-vf-err] { margin-top: 10px; }
.vd-vfix-cands { margin-top: 14px; }
.vd-vfix-cands-h { font-weight: 700; font-size: 14px; color: var(--heading); }
.vd-vfix-cands-h .hint { font-weight: 400; }
.vd-vfix-cands ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.vd-vfix-cands li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; }
.vd-vfixdlg .vd-vfix-cands label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; cursor: pointer; font-weight: 600; }
.vd-vfixdlg .vd-vfix-cands input[type=radio] { margin: 0; width: auto; }
.vd-vfix-warn { margin: 12px 0 0; }
@media (max-width: 640px) {
    .vd-vfix-ways { grid-template-columns: minmax(0, 1fr); }
}
.vd-cast-ai-badge { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(15, 23, 42, .65); color: #fff; font-size: 10px; font-weight: 600; }
.vd-cast-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.vd-cast-fields label { margin: 0; display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.vd-cast-fields label.is-wide { grid-column: 1 / -1; }
.vd-cast-fields input { margin: 0; }
@media (max-width: 640px) {
    .vd-cast-item { grid-template-columns: 1fr; }
    .vd-cast-photo { grid-template-columns: 96px 1fr; align-items: center; width: auto; justify-items: start; }
    .vd-cast-photo-btn, .vd-cast-ai { width: 200px; max-width: 100%; }
    .vd-cast-photo-box { width: 96px; height: 96px; grid-row: span 3; }
    .vd-cast-fields { grid-template-columns: 1fr; }
}
/* 人物の画像にマウスを乗せたら2倍に拡大（左上を基点に右下へ広げ、右の入力欄・下のボタンの上に重ねる。並びは動かさない・2026-10-08）。
   画像はクリックを受けない＝拡大した画像の下のボタン・入力欄はそのまま押せる（枠から出たら元の大きさに戻る）。写真なしのときは何もしない */
@media (hover: hover) {
    .vd-cast-photo-box { overflow: visible; }   /* 縮むときもはみ出した所が切れないよう、枠では切らずに画像側で角を丸める */
    .vd-cast-photo-box:hover { z-index: 5; }    /* 周りより手前・上の固定ヘッダー（z-index 10）よりは下 */
    .vd-cast-photo-img { border-radius: 9px; transform-origin: top left; pointer-events: none; transition: transform .15s ease, border-radius .15s ease, box-shadow .15s ease; }
    .vd-cast-photo-box:hover .vd-cast-photo-img:not([hidden]) { transform: scale(2); border-radius: 5px; box-shadow: 0 0 0 .5px var(--line), 0 4px 12px rgba(15, 23, 42, .3); }   /* 角・枠・影も2倍になるので半分の値で書く */
    .vd-cast-ai-badge { transition: opacity .15s ease; }
    .vd-cast-photo-box:hover .vd-cast-ai-badge { opacity: 0; }   /* 「AIの画像」は拡大中だけ隠す */
}
@media (prefers-reduced-motion: reduce) { .vd-cast-photo-img, .vd-cast-ai-badge { transition: none; } }
.vd-bgm-group { margin-top: 12px; }
.vd-bgm-emo { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
/* BGM の「自分の曲をアップロード」（2026-10-28〜・videos/_bgm_upload.php）。ファイルの欄はボタンの見た目の label の中に隠す */
.vbgm-up { margin-bottom: 14px; }
.vbgm-up-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.vbgm-up-pick { position: relative; overflow: hidden; cursor: pointer; margin: 0; }
.vbgm-up-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vbgm-up-pick:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.vbgm-up-pick:has(input:disabled) input[type="file"] { cursor: not-allowed; }
.vbgm-up-pick:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.vbgm-up-status { min-width: 0; overflow-wrap: anywhere; }
.vbgm-up-status.is-error { color: var(--danger); font-weight: 600; }
.vbgm-up-note { margin: 6px 0 0; line-height: 1.7; }
.vbgm-up [data-vbgm-row][hidden], .vbgm-up [data-vbgm-remove][hidden] { display: none; }
.vd-expire { font-size: 12px; color: var(--muted); }
.vd-expire.is-soon { color: #a8071a; font-weight: 600; }
.vd-cap-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }   /* おまかせ＋5スタイル（巻物を足した・2026-10-22）。狭い画面は4列・3列・2列（4列の段は AIチャットを開いたとき用も下の ch-open に） */
.vd-len label.vd-cap-card { display: flex; flex-direction: column; gap: 4px; align-items: stretch; margin: 0; }
.vd-cap-card { position: relative; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.vd-cap-card:hover { border-color: var(--primary); }
.vd-cap-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.vd-cap-card input { position: absolute; top: 12px; left: 12px; margin: 0; }
.vd-cap-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; display: block; background: var(--bg); }
.vd-cap-auto { display: grid; place-items: center; font-size: 22px; font-weight: 700; color: var(--primary); background: var(--primary-soft); }
.vd-cap-name { font-weight: 700; color: var(--heading); font-size: 14px; }
.vd-font-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-len label.vd-font-opt { display: inline-flex; gap: 8px; align-items: center; margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.vd-font-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.vd-font-opt img { height: 22px; width: auto; border-radius: 4px; display: block; }
.vd-font-name { font-size: 13px; font-weight: 600; color: var(--heading); }
@media (max-width: 1100px) { .vd-cap-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .vd-cap-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vd-cap-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vd-appeal { border-left: 3px solid var(--primary); background: var(--bg); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 4px 0 14px; }
.vd-appeal p { margin: 4px 0 0; font-size: 14px; line-height: 1.7; color: var(--heading); }
.vd-appeal summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
.vd-appeal summary::-webkit-details-marker { display: none; }
.vd-appeal summary::after { content: '▾'; margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 400; }
.vd-appeal:not([open]) summary::after { content: '▸'; }
.vd-appeal-flow { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; font-size: 12px; }
.vd-appeal-flow li { padding: 3px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--heading); }
.vd-appeal-flow li + li::before { content: "→"; margin: 0 6px 0 -2px; color: var(--muted); }
.vd-regen-box { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg); }
.vd-regen-box[hidden] { display: none; }
/* シナリオの型（2026-10-08〜）：新規作成のカード・台本の画面の表示・再生成の選択 */
.vd-scn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vd-scn-card { position: relative; padding: 8px 10px 8px 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
/* 並べ方は .vd-len label より強く（縦に積む・中央寄せにしない）。枠の色は :hover / :checked が勝つよう上の行に残す */
.vd-len label.vd-scn-card { display: flex; flex-direction: column; gap: 3px; align-items: stretch; margin: 0; font-weight: 400; }
.vd-scn-card:hover { border-color: var(--primary); }
.vd-scn-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.vd-scn-card input { position: absolute; top: 10px; left: 10px; margin: 0; }
.vd-scn-name { font-weight: 700; color: var(--heading); font-size: 14px; }
.vd-scn-card .hint { font-size: 12px; line-height: 1.5; margin: 0; }
.vd-scn-ex { font-size: 12px; line-height: 1.5; color: var(--heading); opacity: .8; overflow-wrap: anywhere; }
.vd-scn-cond { font-size: 11px; line-height: 1.5; color: var(--muted); }
.vd-scn-now { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.vd-scn-now strong { color: var(--heading); margin-right: 4px; }
.vd-scn-now .hint { font-size: 12px; }
.vd-scn-fell { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: 13px; line-height: 1.6; }
.vd-scn-pick { display: grid; gap: 4px; font-size: 13px; max-width: 360px; }
.vd-scn-pick select { width: 100%; }
.vd-scn-desc { margin: 4px 0 10px; font-size: 12px; line-height: 1.6; }
@media (max-width: 560px) {
    .vd-scn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vd-scn-card { padding: 8px 8px 8px 28px; }
    .vd-scn-card input { left: 8px; }
}
/* ナレーション動画の簡素化（2026-10-09〜）：作成画面の2段（1 LP・素材／2 シナリオの型）・型の名前だけのチップ・畳む欄 */
.vd-stage { display: grid; gap: 12px; }
.vd-stage[hidden], .vd-cast-item[hidden], .vd-cast-add[hidden] { display: none; }
/* 場所（背景）を画像で指定（プロトタイプ・2026-10-30〜） */
.vd-place { margin-top: 20px; }
.vd-place-photo-box { height: 96px; }
.vd-place-note { margin: 6px 0 0; font-size: 12px; }
.vd-scene-place { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.vd-scene-place[hidden] { display: none; }
.vd-scene-place select { width: auto; max-width: 100%; margin: 0; font-size: 12px; padding: 4px 8px; }
.vd-place-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.vd-place-card { width: 160px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 8px; display: grid; gap: 6px; font-size: 12px; color: var(--heading); }
.vd-place-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.vd-place-noimg { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); }
.vd-place-tag { margin: 4px 0 0; font-size: 12px; color: var(--muted); }   /* display: grid / inline-block が hidden を上書きしないように */
.vd-scn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* 並べ方は .vd-len label / form label より強く（下の余白を乗せない）。ラジオは見えなくしてもキーボードで選べるように残す */
.vd-len label.vd-scn-chip { display: inline-flex; position: relative; margin: 0; cursor: pointer; font-weight: 400; }
.vd-scn-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vd-scn-chip span { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 13px; line-height: 1.4; }
.vd-scn-chip:hover span { border-color: var(--primary); }
.vd-scn-chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.vd-scn-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 名言・実話（2026-10-29〜）：候補のカード（1つ選ぶ）・自分で入れる欄・確かめた印 */
.vd-quote-warn { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #8a5a00; font-size: 13px; line-height: 1.6; }
.vd-quote-list { display: grid; gap: 8px; margin: 0 0 12px; }
.vd-quote-card { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); cursor: pointer; font-weight: 400; }
.vd-quote-card:has(input[name="pick"]:checked) { border-color: var(--primary); background: var(--primary-soft); }
.vd-quote-card > input[type="radio"] { flex: none; margin-top: 3px; }
.vd-quote-card.is-manual { cursor: default; }
.vd-quote-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.vd-quote-tag { align-self: flex-start; margin: 0; font-size: 12px; font-weight: 600; color: var(--primary-ink); cursor: pointer; }
.vd-quote-text { color: var(--heading); font-size: 15px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.vd-quote-who { color: var(--text); font-size: 13px; }
/* 物語の材料（2026-10-30〜）：台本のつかみと物語はこの事実だけで作る＝確かめる対象なので、出典と同じくらい読める大きさで */
.vd-quote-facts { color: var(--text); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.vd-quote-fact-list { display: flex; flex-direction: column; }
/* 仕上げ：免責の文（名言・実話・2026-10-30〜） */
.vd-disc { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.vd-disc-on { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 13px; }
.vd-disc input[type="text"] { width: 100%; max-width: 520px; box-sizing: border-box; font-size: 13px; }
.vd-quote-src, .vd-quote-bridge { color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.vd-quote-src.is-none { font-style: italic; }
.vd-quote-caution { color: #8a5a00; font-size: 12px; line-height: 1.6; }
.vd-quote-fields { display: grid; gap: 8px; margin-top: 4px; }
.vd-quote-fields label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 13px; font-weight: 400; }
.vd-quote-fields textarea, .vd-quote-fields input, .vd-quote-fields select { width: 100%; max-width: 100%; box-sizing: border-box; }
.vd-quote-check { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-weight: 600; }
.vd-quote-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.vd-quote-more label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 13px; font-weight: 400; }
.vd-fold > summary { cursor: pointer; color: var(--primary); font-size: 13px; }
.vd-fold[open] > summary { margin-bottom: 8px; }
.vd-fold > .hint { margin: 0 0 8px; line-height: 1.7; }
.vd-cast-more { grid-column: 1 / -1; }
.vd-cast-add { justify-self: start; margin-top: 10px; }
.vd-render-opts > summary { list-style: none; }
.vd-render-opts > summary::-webkit-details-marker { display: none; }
.vd-fold-now { color: var(--text); margin-right: 12px; }
.vd-fold-now strong { color: var(--heading); }
.vd-render-opts-body { display: grid; gap: 12px; }
.vd-clip-dl { margin-top: 6px; }
.vd-registered { color: #1f8a4c; font-weight: 700; font-size: 14px; }
.vd-danger { color: #a8071a; border-color: #f5c2c0; }
.vd-danger:hover { background: #fff1f0; }
.vd-state.is-draft { background: #fff7e6; color: #ad6800; }
/* すべておまかせ（2026-10-08〜）：新規作成のボタン・確認の画面・動画の画面の上の帯・一覧の印 */
.vd-auto-new { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--line); }
.vd-auto-new .hint { margin: 0; font-size: 12px; }
.vd-autodlg { width: min(520px, calc(100% - 32px)); }
.vd-autodlg form { margin: 0; }
.vd-autodlg-flow { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--heading); }
.vd-autodlg-list { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; line-height: 1.6; }
.vd-autodlg-warn { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff7e6; color: #ad6800; font-size: 13px; font-weight: 600; }
.vd-autodlg-est .pa-cost { font-size: 13px; }
.vd-auto { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); background: var(--primary-soft); }
.vd-auto-spin { width: 28px; height: 28px; border-width: 3px; margin: 0; flex: none; }
.vd-auto-body { flex: 1 1 240px; min-width: 0; display: grid; gap: 4px; }
.vd-auto-h { font-size: 15px; color: var(--heading); }
.vd-auto-body .hint { margin: 0; font-size: 12px; line-height: 1.6; }
.vd-auto-bar { margin: 4px 0 2px; max-width: 420px; background: var(--panel); }
.vd-auto-msg { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.vd-auto-act { margin: 0; flex: none; }
.vd-auto.is-done { border-left-color: #1f8a4c; background: #e6f6ec; }
.vd-auto.is-error { border-left-color: #a8071a; background: #fff1f0; }
.vd-auto.is-error .vd-auto-msg { color: #a8071a; }
.vd-auto.is-stopped { border-left-color: var(--muted); background: var(--panel-soft); }
.vd-state.is-auto { background: var(--primary-soft); color: var(--primary); }
/* ===== 漫画動画（2026-10-09〜）。ナレーション動画の vd-* を土台に、コマの並び・2枚の絵・動かすスイッチだけ足す ===== */
.mv-choice .gv2-chips { margin-bottom: 8px; }
.mv-choice .gv2-choice-g { margin-top: 4px; }
.mv-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.mv-cast-list, .mv-panels, .mv-voices, .mv-lines { list-style: none; margin: 8px 0 16px; padding: 0; }
.mv-cast { padding: 12px 0; border-bottom: 1px solid var(--line); }
.mv-cast-top { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.mv-cast-top label { margin: 0; flex: 1 1 140px; }
.mv-cast-top label.is-wide { flex: 2 1 220px; }
.mv-cast-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.mv-cast-fields label { margin: 0; }
.mv-cast-fields .is-wide { grid-column: 1 / -1; }
.mv-cast.is-new summary, .mv-panel.is-new summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 13px; }
.mv-panel { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.mv-panel-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mv-panel-h select { width: auto; margin: 0; }
.mv-del { margin: 0 0 0 auto; font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.mv-chars { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.mv-chars label { margin: 0; display: inline-flex; gap: 4px; align-items: center; }
.mv-line { display: grid; grid-template-columns: 8.5em 7.5em minmax(0, 1fr) 8.5em 6em 9em; gap: 6px; }
.mv-line select, .mv-line input { margin: 0; min-width: 0; }
.mv-line[hidden] { display: none; }
/* 言い方（声の感情）の欄を足して6つになったので、狭い画面ではセリフの文を1行目に出し、ほかを2行目に並べる */
@media (max-width: 1100px) {
    .mv-line { grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr)); }
    .mv-line .mv-line-text { grid-column: 1 / -1; order: -1; }
}
.mv-sfx { margin: 0; max-width: 320px; }
.mv-pick { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.mv-tok[hidden] { display: none; }   /* .pa-cost の display:block が hidden を打ち消すため（動かすコマで何も選んでいないとき） */
.mv-voice { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mv-voice-who { display: flex; gap: 10px; align-items: center; min-width: 180px; }
.mv-voice-who .vd-avatar { width: 64px; height: 64px; font-size: 18px; }   /* 2026-11-04〜 キャラクターの段で決めた顔を見ながら声を選ぶので大きめに（前は 44px） */
.mv-redo-all, .vd-form label.mv-redo-all { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; margin: 4px 0 0; }   /* .vd-form label（grid）に負けてチェックボックスが横いっぱいに伸び、文字が下の行に落ちていた（2026-10-13） */
.mv-redo-all input[type=checkbox] { width: auto; margin: 0; flex: none; }
.mv-lines li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mv-lines .vd-no { width: 22px; height: 22px; font-size: 12px; }
.mv-lines audio { height: 32px; max-width: 100%; margin-left: auto; }
.mv-who { font-size: 11px; font-weight: 700; color: var(--muted); margin-right: 6px; }
.mv-text { flex: 1 1 200px; }
.mv-castrow { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.mv-castchip { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.mv-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mv-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel); display: grid; gap: 8px; align-content: start; }
.mv-card-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mv-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
/* コマの絵の縦横は --mv-ar（2026-11-04〜 動画の比率ごと。9:16 は既定の 2 / 3・4:5・1:1 は画面が :root に入れる＝manga_aspect_style_tag）。Kling の動画は動画の縦横 --vd-ar */
.mv-pair img, .mv-thumb img, .mv-thumb video { width: 100%; aspect-ratio: var(--mv-ar, 2 / 3); object-fit: cover; border-radius: 6px; background: #111; display: block; }
.mv-thumb video { aspect-ratio: var(--vd-ar, 9 / 16); }
/* 吹き出し・効果音の部品（2026-10-09〜）。見本は絵の上に部品を同じ割合の位置で重ねる（位置・幅は style で渡す） */
.mv-comp { position: relative; }
.mv-thumb .mv-comp-part { position: absolute; height: auto; aspect-ratio: auto; object-fit: fill; background: none; border-radius: 0; pointer-events: none; transition: opacity .15s; }
.mv-comp.is-dim .mv-comp-part:not(.is-hl) { opacity: .3; }
.mv-thumb .mv-comp-part.is-hl { outline: 2px solid var(--primary); outline-offset: 1px; }
.mv-comp.is-bare .mv-comp-part { visibility: hidden; }
.mv-thumb .is-zoomable { cursor: zoom-in; }
/* コマのカード（2026-11-04〜）：絵の右下に「大きく見る」、絵の下は「絵を直す」「吹き出しを直す」の2つ（頭のセリフの枠はなくした） */
.mv-card > .mv-thumb { position: relative; }
.mv-zoom-ico { position: absolute; right: 6px; bottom: 6px; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: rgba(15, 23, 42, .7); color: #fff; cursor: zoom-in; }
.mv-zoom-ico svg { width: 15px; height: 15px; display: block; }
.mv-zoom-ico:hover { background: rgba(15, 23, 42, .85); }
.mv-zoom-ico:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mv-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mv-menu-b { display: grid; gap: 2px; align-content: start; justify-items: start; min-height: 56px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--heading); text-align: left; font: inherit; cursor: pointer; }
.mv-menu-b:hover:not(:disabled) { border-color: var(--primary); }
.mv-menu-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mv-menu-b:disabled { opacity: .5; cursor: default; }
.mv-menu-t { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.mv-menu-t svg { width: 15px; height: 15px; flex: none; }
.mv-menu-s { font-size: 11px; line-height: 1.4; color: var(--muted); }
.mv-menu-why { margin: 0; font-size: 12px; }
.mv-menu.is-one { grid-template-columns: minmax(0, 1fr); }   /* 文字だけのコマは「ナレーションを直す」の1つ */
/* カードが狭い（4列など）ときは2つを縦に並べる（横に並べると「吹き出しを直す」が2行に割れる） */
.mv-grid > .mv-card { container-type: inline-size; }
@container (max-width: 280px) {
    .mv-menu { grid-template-columns: minmax(0, 1fr); }
    .mv-menu-b { min-height: 0; padding: 7px 10px; }
}
/* 吹き出しを直す画面（コマごと）：左に見本、右に部品の一覧（狭い画面は縦に並べる） */
.mv-bbdlg { width: min(860px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.mv-bbdlg [hidden] { display: none !important; }
.mv-bb-lay { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: 20px; align-items: start; }
.mv-bb-picside { display: grid; gap: 6px; }
.mv-bb-pic { width: min(100%, calc((100vh - 200px) * var(--mv-ar, 2 / 3))); width: min(100%, calc((100dvh - 200px) * var(--mv-ar, 2 / 3))); min-width: min(100%, 200px); }   /* 絵は 2:3（4:5・1:1 の動画はその比率＝--mv-ar）。縦に収まる幅にする（部品は絵に対する割合で重ねるので、絵の縦横は変えない） */
.mv-bb-picside > .hint { margin: 0; font-size: 12px; }
.mv-bb-side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.mv-bb-side > .hint { margin: 0; }
.mv-bb-flash:empty { display: none; }
.mv-bb-flash .flash { margin: 0 0 10px; }
.mv-part.is-sel { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.mv-ico[aria-pressed="true"]:not(.mv-listen) { border-color: var(--primary); background: var(--primary); color: #fff; }
@media (max-width: 640px) {
    .mv-bb-lay { grid-template-columns: minmax(0, 1fr); }
    .mv-bb-picside { width: min(100%, 280px); margin: 0 auto; }
}
.mv-part.is-on { background: var(--primary-soft); border-radius: 6px; }
.mv-part .linklike { flex: none; white-space: nowrap; }
/* 漫画動画の各段：display を持つ要素（grid・flex）でも hidden の属性で隠れるように（直す欄・動きの欄・印など） */
.su-card[id^="mv-"] [hidden] { display: none !important; }
/* 直す（2026-10-28〜 ユーザー「各コマごとに修正したい」）：ペン（コマの絵はボタン）で下に直す欄を開き、欄の「直す」でそこだけ作り直す。開いている行は枠で示す。
   前は印を付けて、画面の下に貼り付く帯からまとめて（2026-10-10〜・UX改善案5） */
.mv-fix { display: grid; gap: 4px; padding: 2px; border-radius: 6px; }
.mv-fix .btn { justify-self: start; }
.mv-part.is-open, .mv-fix.is-open { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.mv-fix-note { display: grid; gap: 3px; margin: 0; font-size: 12px; font-weight: 600; color: var(--heading); }
.mv-fix-note input, .mv-fix-note textarea { margin: 0; }
.mv-part-edit { display: grid; gap: 10px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.mv-part-edit input[type="text"], .mv-part-edit textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.mv-part-edit textarea { resize: vertical; font-weight: 400; field-sizing: content; min-height: 5.2em; max-height: 16em; }   /* 直したいところ（2026-10-29〜 textarea）。ラベルの太字を受けない・入れた文に合わせて伸びる（効かないブラウザは rows=3 のまま） */
.mv-part > .mv-part-edit { margin-left: 52px; }   /* 部品の絵（44px）＋すき間の右から。行の文字の頭にそろえる */
.mv-part-edit-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mv-part-edit-act .pa-cost { margin: 0; font-size: 11px; }
.mv-part-edit-act .linklike { margin-left: auto; font-size: 12px; }
/* 部品の行のボタン（ペン＝直す欄を開く・ごみ箱＝消す・2026-10-28〜 ユーザー「ペンのアイコンとゴミ箱アイコンを配置」） */
.mv-ico { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px;
    background: var(--panel); color: var(--text); cursor: pointer; }
.mv-ico svg { width: 15px; height: 15px; display: block; }
.mv-ico:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.mv-ico[aria-expanded="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }
.mv-ico.is-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }
.mv-ico:disabled { opacity: .45; cursor: default; }
.mv-ico:focus-visible, .mv-tailpad-b:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* しっぽの位置（テンキーのような 3×3・真ん中＝なし〔2026-10-28〜〕）。選んだ位置は塗る・どれも塗っていない＝自動 */
.mv-tailpad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mv-tailpad-h { flex: 1 0 100%; font-size: 12px; font-weight: 600; color: var(--heading); }
.mv-tailpad-grid { display: grid; grid-template-columns: repeat(3, 32px); grid-auto-rows: 32px; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.mv-tailpad-b { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); cursor: pointer; }
.mv-tailpad-b svg { width: 15px; height: 15px; display: block; }
.mv-tailpad-b.is-none { font-size: 10px; font-weight: 700; line-height: 1; color: var(--muted); }
.mv-tailpad-b:hover { border-color: var(--primary); color: var(--primary); }
.mv-tailpad-b[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }
/* 絵の中をクリックしてしっぽの向きを指す（2026-11-04〜）：押している間は見本を点線で囲み、指したところへ点線と点 */
.mv-tailpick { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mv-tailpick .hint { margin: 0; font-size: 12px; }
.mv-tailpick [data-mv-tailclick][aria-pressed="true"] { border-color: var(--primary); color: var(--primary); }
.mv-comp.is-tailpick { outline: 2px dashed var(--primary); outline-offset: 2px; }
.mv-comp.is-tailpick, .mv-comp.is-tailpick * { cursor: crosshair; }
.mv-tailmark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.mv-tailmark line { stroke: var(--primary); stroke-width: 2; stroke-dasharray: 5 4; }
.mv-tailmark-dot { position: absolute; z-index: 6; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #fff; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 1px rgba(15, 23, 42, .4); pointer-events: none; }
.mv-part-warn { margin: 0 0 0 52px; font-size: 11px; color: var(--danger); }
@media (hover: none) and (pointer: coarse) {   /* スマホは押しやすい大きさ・左の寄せをやめる */
    .mv-ico { width: 38px; height: 38px; }
    .mv-tailpad-grid { grid-template-columns: repeat(3, 42px); grid-auto-rows: 42px; }
    .mv-part > .mv-part-edit, .mv-part-warn { margin-left: 0; }
}
/* 続けて作っている間の上の帯（2026-10-10〜・UX改善案6）。ナレーション動画のおまかせの帯（.vd-auto）に段の並びを足す */
.mv-flow-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; }
.mv-flow-steps li { padding: 2px 8px; border-radius: 999px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.mv-flow-steps li.is-done { color: var(--text); }
.mv-flow-steps li.is-now { color: var(--primary); border-color: var(--primary); font-weight: 700; }
.mv-flow-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mv-flow-act form { margin: 0; }
.mv-modal-bar { width: min(280px, 100%); margin: 8px auto 0; }
/* ネームの読む形（2026-10-10〜・UX改善案7）。「直す」で今までの欄を開く */
.mv-read-cast { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 4px 0 8px; }
.mv-read-who { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; flex: 1 1 240px; min-width: 0; }
.mv-read-who .hint { margin: 0 0 0 2px; font-size: 12px; }
.mv-read { display: flex; gap: 10px; align-items: flex-start; }
.mv-read-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mv-read-body p { margin: 0; }
.mv-read-scene { font-size: 14px; color: var(--heading); overflow-wrap: anywhere; }
.mv-read-type { font-size: 12px; font-weight: 700; color: var(--primary); margin-right: 4px; }
.mv-read-line { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
/* 付けたルビ（読み方）を小さく添える（2026-11-06〜・ネームの読む形と声の段のセリフ） */
.mv-read-line rt, .mv-lines .mv-text rt { font-size: 10px; color: var(--muted); }
.mv-read-emo { margin-left: 4px; font-size: 11px; color: var(--muted); }
.mv-read-sfx { font-size: 13px; font-weight: 700; color: var(--muted); }
.mv-read-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mv-redo-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px !important; }
.mv-redo-mark { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--panel-soft); color: var(--danger); border: 1px solid currentColor; }
.mv-panel-edit { display: grid; gap: 8px; padding: 10px 0 2px 32px; }
.mv-panel.is-new .mv-panel-edit { padding-left: 0; }
.mv-motion-edit { display: grid; gap: 3px; margin: 0; font-size: 12px; font-weight: 600; color: var(--heading); }
.mv-motion-edit input { margin: 0; }
.mv-check { display: inline-flex; gap: 6px; align-items: center; margin: 8px 0 0 !important; font-size: 13px; font-weight: 600; }
.mv-zoomdlg { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.mv-zoom-body { display: grid; gap: 12px; }
.mv-zoomdlg [hidden] { display: none !important; }
.mv-zoom-pic { width: min(100%, calc((100vh - 260px) * var(--mv-ar, 2 / 3))); width: min(100%, calc((100dvh - 260px) * var(--mv-ar, 2 / 3))); min-width: min(100%, 220px); margin: 0 auto; }
.mv-zoom-pic .is-zoomable { cursor: default; }
@media (prefers-reduced-motion: reduce) { .mv-thumb .mv-comp-part { transition: none; } }
.mv-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mv-part { display: grid; gap: 4px; font-size: 12px; padding: 2px; border-radius: 6px; }
.mv-part-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mv-part-img { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; color: var(--muted);
    background: repeating-conic-gradient(var(--bg) 0% 25%, var(--panel) 0% 50%) 50% / 10px 10px; }   /* 透過が分かる市松模様（ダークでも変数で切り替わる） */
.mv-part-img { overflow: hidden; }
.mv-part-img img { width: 100%; height: 100%; object-fit: contain; display: block; }   /* グリッドの中では max-height:100% が効かず縦長の部品がはみ出した（2026-10-13）。枠いっぱいに固定して contain で収める */
/* 部品の行（2026-10-28〜）：左寄せ＝絵・種別／右寄せ＝聞く（声のあるセリフだけ）・ペン・ごみ箱。
   聞くのボタンは .mv-listen。
   入りきらないとき（カードが狭い・聞くがある）は、種別を削らずに、右のボタンの組を次の行の右へ落とす（flex-wrap） */
.mv-part-kind { flex: 0 1 auto; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-part-acts { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.mv-listen .mv-listen-stop, .mv-listen.is-playing .mv-listen-play { display: none; }
.mv-listen.is-playing .mv-listen-stop { display: block; }
.mv-listen.is-playing { border-color: var(--primary); background: var(--primary); color: #fff; }
/* 吹き出しの出る順のつまみ（ドラッグで入れ替え）・足した吹き出しの印・「＋ 吹き出しを追加」（2026-10-15〜） */
.mv-part-grip { flex: none; display: inline-flex; align-items: center; margin-right: -4px; color: var(--muted); opacity: .55; cursor: grab; }
.mv-part-grip:hover { opacity: 1; color: var(--primary); }
.mv-part-grip:active { cursor: grabbing; }
.mv-part.is-dragging { opacity: .45; }
.mv-parts-hint { margin: 0; font-size: 11px; }
.mv-parts-hint [data-mv-order-status] { margin-left: 4px; color: var(--primary); }
.mv-parts-hint [data-mv-order-status].is-error { color: var(--danger); }
.mv-parts-hint.is-blank:has([data-mv-order-status]:empty) { display: none; }   /* 文が無く、保存の知らせも空のとき（カードの gap だけ空くので隠す・2026-10-28〜） */
/* タッチ端末：HTML5 のドラッグは指では始まらないので、つまみと案内を出さない（一覧の上から＝出る順なのはそのまま） */
@media (hover: none) and (pointer: coarse) { .mv-part-grip, .mv-parts-hint { display: none; } }
/* ネームのコマの並べ替え（2026-10-24〜）：マウスはつまみをドラッグ・タッチ端末は「上へ・下へ」（指では HTML5 のドラッグが始まらないため） */
/* 消した部品（吹き出しだけ消したセリフ・ラベル）と「戻す」・セリフを消すときの選択（2026-10-24〜） */
.mv-parts-off { margin: 6px 0 0; font-size: 12px; }
.mv-part-off { display: inline-flex; align-items: baseline; gap: 4px; margin-right: 10px; }
.mv-pddlg-acts { flex-wrap: wrap; }
.mv-pgrip { flex: none; display: inline-flex; align-items: center; align-self: center; padding: 2px; color: var(--muted); opacity: .55; cursor: grab; }
.mv-pgrip:hover, .mv-pgrip:focus-visible { opacity: 1; color: var(--primary); }
.mv-pgrip:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-radius: 4px; }
.mv-pgrip:active { cursor: grabbing; }
.mv-panel.is-dragging { opacity: .45; }
.mv-pmove { display: none; gap: 4px; }
.mv-psort-hint [data-mv-psort-st] { color: var(--primary); }
@media (hover: none) and (pointer: coarse) { .mv-pgrip { display: none; } .mv-pmove { display: inline-flex; } }
/* 1コマだけ AI で直す（2026-10-24〜） */
.mv-aifix { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--bg); }
.mv-aifix .vd-actions { margin: 0; align-items: center; }
.mv-aifix [data-mv-aifix-st].is-error { color: var(--danger); }
.mv-add-btn { justify-self: start; }
.mv-add-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.mv-adddlg input[type="text"], .mv-adddlg select { margin: 0; width: 100%; }
.mv-adddlg label + label { margin-top: 10px; }
.mv-adddlg [hidden] { display: none; }
.mv-adddlg form { position: relative; }   /* 右上の × の基準（dialog 自体は position を変えない＝画面の中央に出たまま） */
.mv-adddlg h3 { padding-right: 32px; }
.mv-dlg-x { position: absolute; top: -12px; right: -10px; appearance: none; border: none; background: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 4px 6px; }   /* 「やめる」の代わりの × （2026-10-15〜） */
.mv-dlg-x:hover { color: var(--heading); }   /* .vd-castdlg label の display:grid が hidden（話している人）に勝たないように */
.mv-adddlg .mv-add-voice { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-weight: 600; }   /* 「声も生成する」（2026-10-15〜） */
.mv-adddlg .mv-add-voice[hidden] { display: none; }   /* 効果音のときは「声も生成する」の行を隠す（上の display:flex より後ろに） */
.mv-empty { aspect-ratio: var(--mv-ar, 2 / 3); display: flex; align-items: center; justify-content: center; text-align: center; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--muted); font-size: 12px; padding: 4px; }
.mv-empty.is-error { color: #a8071a; border-color: #ffa39e; }
.mv-card .vd-fix { margin: 0; }
.mv-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.mv-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mv-switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); transition: background .15s; flex: none; }
.mv-switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 2px rgba(20, 30, 50, .25); transition: transform .15s; }
.mv-switch input:checked + .mv-switch-track { background: var(--primary); }
.mv-switch input:checked + .mv-switch-track .mv-switch-thumb { transform: translateX(16px); }
.mv-switch input:focus-visible + .mv-switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.mv-switch input:disabled + .mv-switch-track { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .mv-switch-track, .mv-switch-thumb { transition: none; } }
@media (max-width: 640px) {
    .mv-line { grid-template-columns: 1fr 1fr; }
    .mv-line .mv-line-text { grid-column: 1 / -1; order: -1; }
    .mv-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .mv-part .linklike { margin-left: 52px; }
    .mv-part .linklike + .linklike { margin-left: 12px; }   /* 足した吹き出しの「消す」は「直す」の横 */
    .mv-panel-edit { padding-left: 0; }
    /* 直す欄（2026-10-28〜）：カードが2列（1枚150px ほど）になるので、左の寄せをやめ、3×3 は欄の幅に合わせて縮める（42px の固定だとカードの中身ごと右へはみ出した） */
    .mv-part-edit { padding: 8px; gap: 8px; }
    .mv-part > .mv-part-edit, .mv-part-warn { margin-left: 0; }
    .mv-tailpad-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; width: 100%; max-width: 150px; box-sizing: border-box; }
    .mv-tailpad-b { aspect-ratio: 1 / 1; height: auto; min-height: 28px; }
    .mv-read { flex-wrap: wrap; }
    .mv-read-side { flex-direction: row; align-items: center; margin-left: 32px; }
}
/* 違う比率で作り直す（クリエイティブ詳細・2026-10-06） */
.rr-dialog { width: min(460px, calc(100% - 32px)); border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.rr-dialog::backdrop { background: rgba(15, 23, 42, .5); }
.rr-dialog h3 { margin: 0 0 10px; font-size: 16px; }
.rr-opts { display: grid; gap: 8px; margin: 12px 0; }
.rr-opt { display: flex !important; gap: 8px; align-items: center; margin: 0 !important; font-weight: 600; }
.rr-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
/* ===== AIチャット（2026-10-06〜）
   閉じているときは右下のボタン。開くと画面の右に高さいっぱいの列になる（2026-10-08〜）。
   広い画面（1300px〜）はメインが左に寄って狭くなり、重ならない。それより狭い画面は右から重ねて出す。
   （1300＝サイドバー260＋列400＋メイン640。640 は画面幅 900px のときのメイン幅＝900px 系のルールが想定している最小）
   開いているか・広げたかは <html> の ch-open / ch-wide（layout.php の head で描く前に付ける＝ページを移るたびに動かない） ===== */
:root { --ch-w: 400px; }
html.ch-wide { --ch-w: 640px; }
.ch-root { position: fixed; right: 20px; bottom: 20px; z-index: 900; font-size: 14px; }
/* 右下の「AIに依頼・質問」：ほかのボタン（単色の青）と分けて青→紫のグラデ（2026-10-14 ユーザー指示） */
.ch-fab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: none; border-radius: 999px; background: linear-gradient(135deg, #2563ff 0%, #6d3df0 55%, #9b3fe0 100%); color: #fff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 24px rgba(109, 61, 240, .38); }
.ch-fab:hover { background: linear-gradient(135deg, #1d50e0 0%, #5c2fd6 55%, #8530c8 100%); }
.ch-fab svg { width: 18px; height: 18px; }
html.ch-open .ch-fab { display: none; }
html.ch-open .ch-root { top: 0; right: 0; bottom: 0; width: min(var(--ch-w), 100vw); background: var(--panel); border-left: 1px solid var(--line); box-shadow: -10px 0 32px rgba(15, 23, 42, .18); }
.ch-root.is-anim { animation: chIn .2s ease; }   /* ボタンで開いたときだけ右から出す（ページを移ったときは動かさない） */
@keyframes chIn { from { transform: translateX(100%); } }
.ch-panel { width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--panel); overflow: hidden; }
.ch-panel[hidden] { display: none; }
/* 広い画面：右の列のぶんメインを左に寄せる（重ねない） */
.app-shell { transition: margin-right .2s ease; }
@media (min-width: 1300px) {
    html.ch-wide { --ch-w: clamp(400px, calc(100vw - 900px), 640px); }   /* 広げてもメインが 640px を切らないように */
    html.ch-open .app-shell { margin-right: var(--ch-w); }
    html.ch-open .ch-root { box-shadow: none; }
}
/* 動画のシーン目次（右に固定）はチャットの列の左隣へ。メインが狭くなる画面では隠す */
@media (min-width: 1280px) and (max-width: 1599px) {
    html.ch-open .vd-subnav { display: none; }
    html.ch-open body:has(.vd-subnav) .su-card { margin-right: 0; }   /* 隠したので、目次のぶんの右の余白も取らない */
}
@media (min-width: 1600px) and (max-width: 1839px) {   /* 広げているとき（列は最大 640px）は 1840px まで隠す＝通常の 1600px と同じメイン幅になるまで */
    html.ch-open.ch-wide .vd-subnav { display: none; }
    html.ch-open.ch-wide body:has(.vd-subnav) .su-card { margin-right: 0; }
}
@media (min-width: 1600px) {
    html.ch-open .vd-subnav { right: calc(var(--ch-w) + 16px); }
}
/* メインを寄せている間の列の切り替え。既存の「画面幅」で切り替えるルール（980／1200／1250／1400px）を、
   メインの幅が同じになる画面幅で起こす（通常＝元の幅＋400px／広げた＝元の幅＋640px）。900px 以下のルールは不要（寄せている間のメインは 640px 以上）。
   ※元のルール（.gv2-pcards・.lpcols・.ws-lpgrid・.avb-cols・.avb-gdt・.hm-*・.cmhub-*）を変えたら、ここも直す。
   ※前置きは :where() で詳細度を 0 にし、元のルールと同じ強さにする（.cmhub-products[data-view=list] など元のルールに勝っている指定を潰さない） */
@media (hover: hover) and (min-width: 1300px) and (max-width: 1600px) {
    :where(html.ch-open:not(.ch-wide)) .gv2-pcards > .gv2-pcard:nth-child(n) .gv2-pcard-img img { transform-origin: center top; }
    :where(html.ch-open:not(.ch-wide)) .gv2-pcards > .gv2-pcard:nth-child(4n+1) .gv2-pcard-img img { transform-origin: left top; }
    :where(html.ch-open:not(.ch-wide)) .gv2-pcards > .gv2-pcard:nth-child(4n) .gv2-pcard-img img { transform-origin: right top; }
}
@media (min-width: 1300px) and (max-width: 1600px) {
    :where(html.ch-open:not(.ch-wide)) .gv2-pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    :where(html.ch-open:not(.ch-wide)) .lpcols { grid-template-columns: 1fr; }
    :where(html.ch-open:not(.ch-wide)) .ws-lpgrid { grid-template-columns: 1fr; }
    :where(html.ch-open:not(.ch-wide)) .avb-cols { grid-template-columns: minmax(0, 1fr); }
    :where(html.ch-open:not(.ch-wide)) .avb-gdt { grid-template-columns: 1fr; }
    :where(html.ch-open:not(.ch-wide)) .hm-next-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    :where(html.ch-open:not(.ch-wide)) .hm-next { grid-column: 1 / -1; }
    :where(html.ch-open:not(.ch-wide)) .hm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(html.ch-open:not(.ch-wide)) .hm-steps { flex-direction: column; align-items: stretch; gap: 14px; }
    :where(html.ch-open:not(.ch-wide)) .hm-step { flex-flow: row wrap; align-items: center; gap: 0 14px; }
    :where(html.ch-open:not(.ch-wide)) .hm-step-ico { margin: 0; width: 46px; height: 46px; }
    :where(html.ch-open:not(.ch-wide)) .hm-step-ico svg { width: 21px; height: 21px; }
    :where(html.ch-open:not(.ch-wide)) .hm-step-h { flex: 1 1 auto; white-space: normal; }
    :where(html.ch-open:not(.ch-wide)) .hm-step-d { flex: 1 0 100%; margin-top: 4px; padding-left: 60px; white-space: normal; }
    :where(html.ch-open:not(.ch-wide)) .hm-step-d br { display: none; }
    :where(html.ch-open:not(.ch-wide)) .hm-step-ar { display: none; }
}
@media (min-width: 1300px) and (max-width: 1650px) {
    :where(html.ch-open:not(.ch-wide)) .cmhub-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(html.ch-open:not(.ch-wide)) .cmhub-quickform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    :where(html.ch-open:not(.ch-wide)) .cmhub-namefield { grid-column: 1 / -1; }
}
@media (min-width: 1300px) and (max-width: 1380px) {   /* 元 980px（寄せている間のメインは 640px〜なので、900px 系と違いここは要る） */
    :where(html.ch-open:not(.ch-wide)) .cmhub-layout { grid-template-columns: minmax(0, 1fr); }
    :where(html.ch-open:not(.ch-wide)) .cmhub-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(html.ch-open:not(.ch-wide)) .cmhub-intro { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1300px) and (max-width: 1800px) {
    :where(html.ch-open:not(.ch-wide)) .hm-flow-art { display: none; }
    :where(html.ch-open:not(.ch-wide)) .hm-flow-d { max-width: none; }
    :where(html.ch-open:not(.ch-wide)) .hm-q-d br, :where(html.ch-open:not(.ch-wide)) .hm-note-t br, :where(html.ch-open:not(.ch-wide)) .hm-note-d br { display: none; }
}
/* 広げたとき（列は clamp で最大 640px なので、元の幅＋640px までで足りる） */
@media (hover: hover) and (min-width: 1300px) and (max-width: 1840px) {
    :where(html.ch-open.ch-wide) .gv2-pcards > .gv2-pcard:nth-child(n) .gv2-pcard-img img { transform-origin: center top; }
    :where(html.ch-open.ch-wide) .gv2-pcards > .gv2-pcard:nth-child(4n+1) .gv2-pcard-img img { transform-origin: left top; }
    :where(html.ch-open.ch-wide) .gv2-pcards > .gv2-pcard:nth-child(4n) .gv2-pcard-img img { transform-origin: right top; }
}
@media (min-width: 1300px) and (max-width: 1840px) {
    :where(html.ch-open.ch-wide) .gv2-pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    :where(html.ch-open.ch-wide) .lpcols { grid-template-columns: 1fr; }
    :where(html.ch-open.ch-wide) .ws-lpgrid { grid-template-columns: 1fr; }
    :where(html.ch-open.ch-wide) .avb-cols { grid-template-columns: minmax(0, 1fr); }
    :where(html.ch-open.ch-wide) .avb-gdt { grid-template-columns: 1fr; }
    :where(html.ch-open.ch-wide) .hm-next-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    :where(html.ch-open.ch-wide) .hm-next { grid-column: 1 / -1; }
    :where(html.ch-open.ch-wide) .hm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(html.ch-open.ch-wide) .hm-steps { flex-direction: column; align-items: stretch; gap: 14px; }
    :where(html.ch-open.ch-wide) .hm-step { flex-flow: row wrap; align-items: center; gap: 0 14px; }
    :where(html.ch-open.ch-wide) .hm-step-ico { margin: 0; width: 46px; height: 46px; }
    :where(html.ch-open.ch-wide) .hm-step-ico svg { width: 21px; height: 21px; }
    :where(html.ch-open.ch-wide) .hm-step-h { flex: 1 1 auto; white-space: normal; }
    :where(html.ch-open.ch-wide) .hm-step-d { flex: 1 0 100%; margin-top: 4px; padding-left: 60px; white-space: normal; }
    :where(html.ch-open.ch-wide) .hm-step-d br { display: none; }
    :where(html.ch-open.ch-wide) .hm-step-ar { display: none; }
}
@media (min-width: 1300px) and (max-width: 1890px) {
    :where(html.ch-open.ch-wide) .cmhub-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(html.ch-open.ch-wide) .cmhub-quickform { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    :where(html.ch-open.ch-wide) .cmhub-namefield { grid-column: 1 / -1; }
}
@media (min-width: 1300px) and (max-width: 1620px) {   /* 元 980px */
    :where(html.ch-open.ch-wide) .cmhub-layout { grid-template-columns: minmax(0, 1fr); }
    :where(html.ch-open.ch-wide) .cmhub-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(html.ch-open.ch-wide) .cmhub-intro { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1300px) and (max-width: 2040px) {
    :where(html.ch-open.ch-wide) .hm-flow-art { display: none; }
    :where(html.ch-open.ch-wide) .hm-flow-d { max-width: none; }
    :where(html.ch-open.ch-wide) .hm-q-d br, :where(html.ch-open.ch-wide) .hm-note-t br, :where(html.ch-open.ch-wide) .hm-note-d br { display: none; }
}
/* テロップのスタイルのカード（元 1100px で4列）：通常は＋400px・広げたときは＋640px */
@media (min-width: 1300px) and (max-width: 1500px) {
    :where(html.ch-open:not(.ch-wide)) .vd-cap-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1300px) and (max-width: 1740px) {
    :where(html.ch-open.ch-wide) .vd-cap-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ch-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 6px; border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.ch-title { flex: 1; min-width: 0; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.ch-ibtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; flex: none; }
.ch-ibtn:hover { background: var(--primary-soft); color: var(--primary); }
.ch-ibtn svg { width: 17px; height: 17px; }
.ch-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.ch-body[hidden] { display: none; }
.ch-msg { max-width: 88%; }
.ch-msg.ch-user { align-self: flex-end; }
.ch-msg.ch-ai { align-self: flex-start; }
.ch-text { padding: 9px 12px; border-radius: 12px; line-height: 1.7; word-break: break-word; }
.ch-user .ch-text { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.ch-ai .ch-text { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ch-ai.is-error .ch-text { border-color: #f1c7c5; background: #fdf3f2; color: #9b2c28; }
.ch-text p { margin: 0; }
.ch-text ul { margin: 4px 0; padding-left: 1.2em; }
.ch-text a { color: var(--primary); }
.ch-meta { margin-top: 4px; font-size: 11px; color: var(--muted); }
.ch-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.ch-card { display: block; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ch-card:hover { border-color: var(--primary); }
.ch-card-img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--line-soft); }
.ch-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-card-img em { position: absolute; left: 4px; top: 4px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: rgba(15, 23, 42, .7); padding: 1px 5px; border-radius: 4px; }
.ch-card-t { display: block; padding: 4px 6px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-welcome { color: var(--text); line-height: 1.7; }
.ch-welcome ul { margin: 6px 0; padding-left: 1.2em; color: var(--muted); }
.ch-note, .ch-empty, .ch-loading { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
/* ボールがどちらにあるか */
.ch-turn { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 12px; background: #eefaf3; color: #1d6b43; }
.ch-turn[hidden] { display: none; }
.ch-panel.is-ai .ch-turn { background: #fff7e6; color: #8a5a00; }
.ch-turn-t { font-weight: 700; flex: none; }
.ch-turn-d { color: inherit; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-you { width: 8px; height: 8px; border-radius: 50%; background: #22a35a; flex: none; }
.ch-dots { display: inline-flex; gap: 3px; flex: none; }
.ch-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e3a008; animation: chDot 1s infinite ease-in-out; }
.ch-dots i:nth-child(2) { animation-delay: .15s; }
.ch-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes chDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ch-form { display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--line); background: var(--panel); }
.ch-form[hidden] { display: none; }
.ch-form textarea { flex: 1; margin: 0; resize: none; min-height: 40px; max-height: 140px; padding: 9px 11px; border-radius: 10px; font: inherit; line-height: 1.5; }
.ch-form textarea:disabled { background: var(--line-soft); cursor: not-allowed; }
.ch-send { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: none; border-radius: 10px; background: var(--primary); color: #fff; cursor: pointer; }
.ch-send:disabled { background: #b8c2d6; cursor: not-allowed; }
.ch-send svg { width: 18px; height: 18px; }
.ch-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px 8px; font-size: 11px; color: var(--muted); background: var(--panel); }
.ch-foot label { display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; font-weight: 400; }
.ch-foot select { margin: 0; padding: 2px 22px 2px 8px; font-size: 11px; height: auto; width: auto; background-position: right 6px center; background-size: 12px 12px; }   /* 右の余白は矢印の分（全体の select の 34px を小さい欄に合わせて取り直す） */
.ch-threads { flex: 1; overflow-y: auto; padding: 8px; }
.ch-threads[hidden] { display: none; }
.ch-threads-h { font-size: 12px; color: var(--muted); padding: 4px 8px 8px; }
.ch-th { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.ch-th:hover, .ch-th.is-cur { background: var(--primary-soft); }
.ch-th-open { flex: 1; min-width: 0; text-align: left; padding: 9px 10px; border: none; background: none; font: inherit; color: var(--heading); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-th-open em { font-style: normal; font-size: 11px; color: #8a5a00; }
/* 確認カード（トークンを使う操作）と、見せた案 */
.ch-act, .ch-ideas { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.ch-act { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 10px; }
.ch-act.is-pending { border-left-color: #e3a008; background: #fffcf3; }
.ch-act.is-done { border-left-color: #22a35a; }
.ch-act.is-failed { border-left-color: #c0392b; }
.ch-act.is-canceled { border-left-color: var(--line); opacity: .75; }
.ch-act-item + .ch-act-item { border-top: 1px dashed var(--line); padding-top: 8px; }
.ch-act-h { font-weight: 700; color: var(--heading); margin-bottom: 4px; }
.ch-act-dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.ch-act-dl dt { color: var(--muted); white-space: nowrap; }
.ch-act-dl dd { margin: 0; color: var(--text); word-break: break-word; }
.ch-act-note { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ch-act-item.is-failed .ch-act-note { color: #9b2c28; }
.ch-act-item.is-done .ch-act-note { color: #1d6b43; }
.ch-act-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ch-btn { padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ch-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.ch-btn-go { background: var(--primary); border-color: var(--primary); color: #fff; }
.ch-btn-go:hover:not(:disabled) { background: var(--primary-d); color: #fff; }
.ch-btn:disabled { opacity: .55; cursor: not-allowed; }
.ch-act-est { font-size: 11px; color: var(--muted); }
.ch-act-err { font-size: 12px; color: #9b2c28; }
.ch-act-err[hidden] { display: none; }
/* パネルの中の確認（会話の改名・削除） */
.ch-panel { position: relative; }
.ch-dlg { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .35); }
.ch-dlg[hidden] { display: none; }
.ch-dlg-box { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--panel); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .25); }
.ch-dlg-t { font-weight: 700; color: var(--heading); line-height: 1.6; word-break: break-word; }
.ch-dlg-box input { margin: 0; }
.ch-dlg-err { font-size: 12px; color: #9b2c28; }
.ch-dlg-err[hidden] { display: none; }
.ch-btn-go.is-danger { background: #c0392b; border-color: #c0392b; }
.ch-btn-go.is-danger:hover:not(:disabled) { background: #a93226; }
/* ボタンで答える質問・スタイル選び */
.ch-choices, .ch-sp { margin-top: 6px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.ch-choices-q { font-weight: 700; color: var(--heading); }
.ch-choice.is-picked { background: var(--primary); border-color: var(--primary); color: #fff; opacity: 1; }
.ch-sp-cat summary { cursor: pointer; font-weight: 600; color: var(--heading); padding: 4px 0; }
.ch-sp-sub { margin: 4px 0 8px; }
.ch-sp-sub-h { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.ch-sp-items { display: flex; flex-wrap: wrap; gap: 4px; }
.ch-sp-item { padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.ch-sp-item:hover:not(:disabled) { border-color: var(--primary); }
.ch-sp-item.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ch-sp-item:disabled { cursor: default; }
.ch-idea { padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ch-idea-h { display: flex; gap: 8px; align-items: baseline; font-weight: 700; color: var(--heading); }
.ch-idea-h b { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 11px; }
.ch-idea-main { margin-top: 4px; font-weight: 600; }
.ch-idea-sub { font-size: 12px; color: var(--text); }
.ch-idea-about { margin-top: 4px; font-size: 12px; line-height: 1.6; color: var(--text); }
.ch-audio { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.ch-audio audio { width: 100%; height: 36px; }
.ch-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ch-link { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--primary); font-size: 12px; font-weight: 600; text-decoration: none; }
.ch-link:hover { border-color: var(--primary); }
.ch-panels { margin: 6px 0; padding-left: 1.4em; font-size: 12px; line-height: 1.6; list-style: decimal; }
.ch-panels li + li { margin-top: 3px; }
.ch-panels b { display: inline-block; margin-right: 6px; color: var(--heading); }
.ch-panels span { color: var(--text); }
.ch-panels q { display: block; color: var(--muted); quotes: "「" "」"; }
.ch-idea-meta { margin: 4px 0 6px; font-size: 11px; color: var(--muted); }
@media (max-width: 560px) {
    .ch-root { right: 12px; bottom: 12px; }
    html.ch-open .ch-root { width: 100%; border-left: 0; }
    .ch-head [data-ch-wide] { display: none; }   /* もう全画面なので「広げる」は出さない */
    .ch-fab span { display: none; }
}

/* ===== スケジュール（つくる ＞ スケジュール。2026-10-07〜） ===== */
/* 中に入力が並ぶ行（決め方・訴求・比率）は label を入れ子にできないので div。見た目は .set-wide の行に揃える */
.sch-form [hidden] { display: none !important; }
.sch-row { margin-bottom: 18px; }
.sch-row-t { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.sch-checks { display: flex; flex-direction: column; gap: 6px; }
.sch-checks .checkbox { margin: 0; }
.sch-form > label.checkbox { margin-bottom: 18px; }
.sch-cost { margin: 0; font-size: 12px; }
/* 作成・編集画面：上（名前・いつ）と下（追加指示・保存）のカード。間に「商材から生成」と同じパネルが入る */
.sch-form > .sch-card { margin-bottom: 20px; }
.sch-form > .gv2 { margin-bottom: 20px; }
/* 何を作るか（2026-10-16〜）：入力画面の上の帯。作るときだけ「作るものを選び直す」 */
.sch-kindbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; padding: 12px 16px;
               background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.sch-kindbar-t { font-size: 14px; }
.sch-kindbar-a { margin-left: auto; font-size: 13px; }
/* プロンプトから生成・別パターンの欄：2つ並べる行・もとにするクリエイティブの選び方 */
.sch-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 640px) { .sch-row2 { grid-template-columns: 1fr; } }
.sch-basemode { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 4px 0 14px; }
.sch-basemode .checkbox { margin: 0; }
.sch-pick-grid { margin-bottom: 14px; }
.var-pick { position: relative; }
.var-pick.on { border-color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.sch-pick-no:empty, .gv2-swipe-no:empty { display: none; }
.sch-pick-no, .gv2-swipe-no { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
               background: var(--primary); color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
@media (min-width: 761px) {
    .sch-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 24px; align-items: baseline; }
    .sch-row-t { margin-bottom: 0; }
    .sch-form > label.checkbox { margin-left: 244px; }
}
.sch-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 18px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }
.sch-meta dt { color: var(--muted); font-size: 13px; }
.sch-meta dd { margin: 0; }
.sch-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.sch-thumbs a { display: block; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.sch-thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* ===== マイページ（左下の自分の名前から。2026-10-07〜） ===== */
.mp-sec { margin-bottom: 16px; }
.mp-sec label[hidden] { display: none; }   /* form label の display:block が hidden に勝たないように（アカウントの「今のパスワード」・2026-10-28〜） */
.mp-sec .tk-top { margin-bottom: 10px; }
/* マイページ：ご契約（次の更新日・2026-10-19〜） */
.mp-contract { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 4px 0 10px; }
.mp-contract dt { color: var(--muted); font-size: 13px; }
.mp-contract dd { margin: 0; }
.mp-contract dd .hint { display: block; margin-top: 2px; }
.mp-sec input[readonly] { width: 100%; }
.mp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 0 10px; }
.mp-thumbs a { position: relative; display: block; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.mp-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.mp-thumbs .badge-video { left: 4px; bottom: 4px; }
/* 保存容量（2026-10-08〜）。色の段階は .storage-meter と同じ（70%で注意・90%でいっぱい）。色は変数だけなのでダークでもそのまま */
.mp-storage { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.mp-storage-bar { flex: 1 1 auto; min-width: 0; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mp-storage-bar > span { display: block; height: 100%; background: var(--primary); }
.mp-storage.is-warn .mp-storage-bar > span { background: var(--warning); }
.mp-storage.is-full .mp-storage-bar > span { background: var(--danger); }
.mp-storage-pct { flex: none; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp-storage.is-full .mp-storage-pct { color: var(--danger); font-weight: 600; }
.mp-storage-alert { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--danger); }
.mp-storage-na { color: var(--muted); }
.mp-storage-scope { margin: 12px 0 0; font-size: 12px; }
/* スマホ：数字の箱（使っている量・上限・残り）を幅いっぱいに2つずつ並べる（min-width 200px のままだと縦に不ぞろいに積まれる） */
@media (max-width: 640px) {
    .mp-sec .tk-balance { flex: 1 1 130px; min-width: 0; padding: 10px 14px; }
    .mp-sec .tk-balance-num { font-size: 22px; }
}
/* サイドバー左下：名前と役割の部分がマイページへのリンク */
.sidebar-foot-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
@media not all and (max-width: 900px) { body.sidebar-collapsed .sidebar-foot-me { flex: none; } }

/* ===== ダークモード：個別の上書き ===== */
/* 色を直接書いている所を、ダークのときだけ上書きする（ライトの見た目は変えない）。
   状態の色（成功・警告・危険・情報）の薄い背景は、ダークでは「暗い同系色＋明るい文字」にそろえる。
   画像そのもの（クリエイティブ・LPのスクショ）には filter をかけない。
   素材（ロゴなど透過画像）の下地と拡大表示の下地は、透過部分が見えなくならないよう白っぽいまま残す。 */
:root[data-theme="dark"] {
    --dk-ok-bg: rgba(92, 201, 133, .15);
    --dk-ok-ink: #7fd9a0;
    --dk-ok-line: rgba(92, 201, 133, .38);
    --dk-ng-bg: rgba(239, 107, 103, .15);
    --dk-ng-ink: #ff9d99;
    --dk-ng-line: rgba(239, 107, 103, .42);
    --dk-warn-bg: rgba(243, 184, 96, .15);
    --dk-warn-ink: #f5c77f;
    --dk-warn-line: rgba(243, 184, 96, .42);
    --dk-info-bg: rgba(77, 141, 255, .16);
    --dk-info-ink: #9cc0ff;
    --dk-info-line: rgba(77, 141, 255, .38);
    --dk-info-faint: rgba(77, 141, 255, .07);
    --dk-sky-bg: rgba(79, 179, 220, .15);
    --dk-sky-ink: #8fd3f0;
    --dk-purple-bg: rgba(155, 127, 212, .2);
    --dk-purple-ink: #cbb8f3;
    --dk-dim: #6b7484;           /* 「無効・薄く見せたい」文字（ライトの #adb5bd 相当） */
    --dk-chip: rgba(27, 31, 39, .9); /* 画像の上に載せるチェック欄などの下地 */
}

/* --- 共通部品：ボタン・フラッシュ・入力のフォーカス --- */
:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] .co-submit:disabled,
:root[data-theme="dark"] .ch-send:disabled { background: var(--surface-2); border-color: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .flash-success { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .flash-error { background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .flash-info { background: var(--dk-info-bg); color: var(--dk-info-ink); }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] .var-picker-filter:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(77, 141, 255, .25); }
:root[data-theme="dark"] .co-field input::placeholder { color: var(--muted); }
:root[data-theme="dark"] .btn-ghost.danger,
:root[data-theme="dark"] .wsh-bg-danger { border-color: var(--dk-ng-line); }
:root[data-theme="dark"] .btn-ghost.danger:hover,
:root[data-theme="dark"] .wsh-bg-danger:hover { background: var(--dk-ng-bg); border-color: var(--dk-ng-line); }
:root[data-theme="dark"] .btn-icon-sm { background: var(--surface-2); color: var(--text); }
:root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); }

/* --- 一覧・カード・ページ送り・表 --- */
:root[data-theme="dark"] .cl-card.is-off .cl-ico,
:root[data-theme="dark"] .cl-card.is-off .cl-t,
:root[data-theme="dark"] .cl-card.is-off .cl-d { color: var(--dk-dim); }
:root[data-theme="dark"] .fav-btn:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .pg:hover,
:root[data-theme="dark"] .pg-pp:hover,
:root[data-theme="dark"] .view-toggle .vt:hover,
:root[data-theme="dark"] .list-view tbody tr:hover { background: var(--surface-hover); }
:root[data-theme="dark"] .pg.disabled { background: var(--panel-soft); }
:root[data-theme="dark"] .card-check,
:root[data-theme="dark"] .lpimg-check,
:root[data-theme="dark"] .asset-pick { background: var(--dk-chip); }
:root[data-theme="dark"] .list-table thead th,
:root[data-theme="dark"] .av-table th,
:root[data-theme="dark"] .var-gcat > summary { background: var(--panel-soft); }
:root[data-theme="dark"] .meta-badge,
:root[data-theme="dark"] .badge-ref { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }

/* --- 生成キュー・アップロード・バリエーション --- */
:root[data-theme="dark"] .badge-queued { color: var(--muted); }
:root[data-theme="dark"] .badge-processing { background: var(--dk-info-bg); color: var(--dk-info-ink); }
:root[data-theme="dark"] .badge-done { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .badge-failed { background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .dropzone,
:root[data-theme="dark"] .var-idea { background: var(--panel-soft); }
:root[data-theme="dark"] .dropzone.dragover,
:root[data-theme="dark"] tr.dragging { background: var(--primary-soft); }

/* --- ヘルプ（ガイド） --- */
:root[data-theme="dark"] .guide-example { background: var(--panel-soft); }
:root[data-theme="dark"] .guide-status-item.is-done { border-color: var(--dk-ok-line); background: var(--dk-ok-bg); }
:root[data-theme="dark"] .guide-status-item.is-todo { border-color: var(--dk-warn-line); background: var(--dk-warn-bg); }
:root[data-theme="dark"] .guide-status-item.is-step .guide-status-mark { background: var(--primary-soft); }
:root[data-theme="dark"] .guide-status-item.is-done .guide-status-badge,
:root[data-theme="dark"] .guide-tab-tag-rec { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .guide-status-item.is-todo .guide-status-badge { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .guide-tab.guide-tab-rec { background: var(--dk-ok-bg); }

/* --- AI診断・スワイプ分析 --- */
:root[data-theme="dark"] .ai-processing { background: var(--panel-soft); }
:root[data-theme="dark"] .ai-overall { background: var(--dk-info-bg); border-color: var(--dk-info-line); }
:root[data-theme="dark"] .ai-card-noimg,
:root[data-theme="dark"] .badge-muted { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .ai-v-good,
:root[data-theme="dark"] .ai-conf-high { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .ai-v-bad { background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .ai-v-caution,
:root[data-theme="dark"] .ai-conf-mid { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .ai-v-none,
:root[data-theme="dark"] .ai-conf-low,
:root[data-theme="dark"] .ai-prev { background: var(--surface-2); color: var(--muted); }
:root[data-theme="dark"] .ai-metrics-note,
:root[data-theme="dark"] .ai-swipe-report-body .ai-block p,
:root[data-theme="dark"] .ai-pri-body,
:root[data-theme="dark"] .ai-details summary { color: var(--text); }
:root[data-theme="dark"] .ai-block-label,
:root[data-theme="dark"] .ai-swipe-title,
:root[data-theme="dark"] .ai-kv-v,
:root[data-theme="dark"] .ai-pri-body b { color: var(--heading); }
:root[data-theme="dark"] .ai-conf-reason,
:root[data-theme="dark"] .ai-kv-k,
:root[data-theme="dark"] .ai-evidence-id { color: var(--muted); }
:root[data-theme="dark"] .ai-swipe-thumb { background: var(--surface-2); }
:root[data-theme="dark"] .ai-block-accent { background: var(--dk-sky-bg); }
:root[data-theme="dark"] .ai-sec-h { border-bottom-color: var(--line); }
:root[data-theme="dark"] .ai-win-conclusion { background: var(--dk-ok-bg); border-color: var(--dk-ok-line); }
:root[data-theme="dark"] .ai-kv { border-top-color: var(--line-soft); }
:root[data-theme="dark"] .ai-evidence-thumbs img { border-color: var(--line); }
:root[data-theme="dark"] .ai-details { border-color: var(--line); background: var(--panel-soft); }

/* --- 素材・参考画像（商材から生成） --- */
:root[data-theme="dark"] .asset-text { color: var(--text); }
:root[data-theme="dark"] .genfp-ref:has(input:checked) { background: var(--primary-soft); }
:root[data-theme="dark"] .genfp-ref-must:has(input:checked) { background: var(--dk-warn-bg); }
:root[data-theme="dark"] .lpshot-warn { color: var(--dk-warn-ink); }

/* --- 戦略マップ（商材分析） --- */
:root[data-theme="dark"] .sm-lp-thumb { background: var(--surface-2); }
:root[data-theme="dark"] .sm-check-badge.is-pass { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .sm-check-badge.is-warn,
:root[data-theme="dark"] .sm-flag-unver { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .sm-check-badge.is-fail,
:root[data-theme="dark"] .sm-flag-legal { background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .sm-flag-time { background: var(--dk-sky-bg); color: var(--dk-sky-ink); }
:root[data-theme="dark"] .sm-flag-note { background: var(--surface-2); color: var(--text); }
:root[data-theme="dark"] .sm-cell.is-empty { color: var(--muted); }
:root[data-theme="dark"] .sm-score { background: var(--dk-info-bg); color: var(--dk-info-ink); }
:root[data-theme="dark"] .sm-core { background: var(--dk-warn-bg); }
:root[data-theme="dark"] .sm-dialog { background: var(--panel); color: var(--text); }
:root[data-theme="dark"] .sm-full { background: var(--panel-soft); }
:root[data-theme="dark"] .sm-bar { background: var(--surface-2); }

/* --- 訴求・LP取り込み・LP分析 --- */
:root[data-theme="dark"] .appeal-type,
:root[data-theme="dark"] .lpimg-thumb,
:root[data-theme="dark"] .lppipe-dot { background: var(--surface-2); }
:root[data-theme="dark"] .pl-stage.is-semi,
:root[data-theme="dark"] .pl-kind.is-real { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .pl-sc.is-on { border-color: var(--dk-info-line); }
:root[data-theme="dark"] .lppipe-step.is-error .lppipe-dot { border-color: var(--danger); color: var(--danger); }
:root[data-theme="dark"] .lppipe-ic.is-error { color: var(--danger); }
:root[data-theme="dark"] .lpimg-pic img,
:root[data-theme="dark"] .lpcol-th { background: var(--surface-2); }
:root[data-theme="dark"] .lprow:hover,
:root[data-theme="dark"] .avb-gcell.is-hot { background: var(--dk-info-faint); }
:root[data-theme="dark"] .lprow-u,
:root[data-theme="dark"] .lprow-c .zero,
:root[data-theme="dark"] .lprow-c .zero b { color: var(--dk-dim); }
:root[data-theme="dark"] .ws-crumb-u { color: var(--dk-dim) !important; }
:root[data-theme="dark"] .av-mat,
:root[data-theme="dark"] .avb-mat,
:root[data-theme="dark"] .gv2-preview,
:root[data-theme="dark"] .anp-band { border-color: var(--dk-info-line); background: var(--dk-info-faint); }
:root[data-theme="dark"] .anp-band-note { border-top-color: var(--dk-info-line); }
:root[data-theme="dark"] .av-toc-i:hover { background: var(--surface-hover); }
:root[data-theme="dark"] .av-toc-i.av-warn,
:root[data-theme="dark"] .avb-say-ng ul,
:root[data-theme="dark"] .lpcap-ext-t,
:root[data-theme="dark"] .gv2-fit-row.is-sub b::before { color: var(--dk-warn-ink); }
:root[data-theme="dark"] .av-v-ok,
:root[data-theme="dark"] .av-g-A,
:root[data-theme="dark"] .av-g-S,
:root[data-theme="dark"] .avb-glvl.is-ok,
:root[data-theme="dark"] .gv2-grp-flag.is-ok { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .av-v-warn,
:root[data-theme="dark"] .av-g-C,
:root[data-theme="dark"] .pcard2-warn,
:root[data-theme="dark"] .gv2-badge-warn,
:root[data-theme="dark"] .gv2-grp-flag.is-warn { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .av-g-D { background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .av-card.is-latent .av-card-id { background: var(--dk-purple-bg); color: var(--dk-purple-ink); }
:root[data-theme="dark"] .avb-quote { background: var(--surface-2); }
:root[data-theme="dark"] .avb-gcell.is-na { background: var(--panel-soft); }
:root[data-theme="dark"] .wsh-copy.is-done { color: var(--dk-ok-ink); }
:root[data-theme="dark"] .lpcap-ext { border-color: var(--dk-warn-line); background: var(--dk-warn-bg); }
:root[data-theme="dark"] .av-plain::after,
:root[data-theme="dark"] .av-rawtext::after,
:root[data-theme="dark"] .lptext-b::after { background: linear-gradient(to bottom, rgba(32, 37, 46, 0), var(--panel-soft)); }
:root[data-theme="dark"] .gv2-pcard.on { background: var(--primary-soft); }

/* --- 商材ワークスペース（.ws の色変数） --- */
:root[data-theme="dark"] .ws { --ws-signal-ink: #f29a70; --ws-signal-soft: rgba(217, 93, 40, .18); --ws-good: #4cc184; --ws-good-soft: rgba(31, 157, 87, .18); }

/* --- 画像の修正指示（選択範囲・メモ） --- */
:root[data-theme="dark"] .rt-stage { background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--panel) 0% 50%) 50% / 16px 16px; }
:root[data-theme="dark"] .rt-note.is-active { background: var(--dk-warn-bg); }
:root[data-theme="dark"] .rt-note-x:hover { border-color: var(--dk-ng-line); background: var(--dk-ng-bg); }
:root[data-theme="dark"] .rt-sel-x:hover { border-color: var(--dk-ng-line); }

/* --- ホーム --- */
:root[data-theme="dark"] .hm-flow { background: linear-gradient(155deg, #1b2230 0%, #1b2333 52%, #1c263a 100%); border-color: var(--line); }
:root[data-theme="dark"] .hm-step-ico { color: var(--primary); }
:root[data-theme="dark"] .hm-badge { border-color: var(--dk-info-line); }
:root[data-theme="dark"] .hm-note { background: var(--primary-soft); border-color: var(--dk-info-line); }
:root[data-theme="dark"] .hm-note-foot { border-top-color: var(--dk-info-line); }
:root[data-theme="dark"] .hm-task { border-color: var(--line); }
:root[data-theme="dark"] .hm-task-st { background: var(--surface-2); }

/* --- トークン・申し込み・運営（契約の状態） --- */
:root[data-theme="dark"] .tk-type-grant,
:root[data-theme="dark"] .tk-type-refund,
:root[data-theme="dark"] .sc-active,
:root[data-theme="dark"] .co-thanks-ico { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .tk-type-expire,
:root[data-theme="dark"] .sc-due,
:root[data-theme="dark"] .sc-frozen { background: var(--dk-ng-bg); }
:root[data-theme="dark"] .sc-pending { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .sc-trial { background: var(--dk-info-bg); }
:root[data-theme="dark"] .co-brand { color: var(--muted); }
:root[data-theme="dark"] .co-error { background: var(--dk-ng-bg); border-color: var(--dk-ng-line); }
:root[data-theme="dark"] .pay-testmode { background: var(--dk-warn-bg); border-color: var(--dk-warn-line); }
:root[data-theme="dark"] .pay-testmode strong { background: rgba(230, 207, 146, .22); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .pay-testmode-bad { background: var(--dk-ng-bg); border-color: var(--dk-ng-line); }
:root[data-theme="dark"] .pay-testmode-bad strong { background: rgba(239, 107, 103, .28); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .spec-toc a:hover { background: rgba(77, 141, 255, .26); }
:root[data-theme="dark"] .spec-warn { background: var(--dk-warn-bg); }

/* --- 分析（日別の表・サイド） --- */
:root[data-theme="dark"] .an2-side:first-child { border-color: var(--dk-info-line); }
:root[data-theme="dark"] .an2-daily thead .an2-lh { background: var(--primary-soft); }

/* --- スケジュール・動画（進み具合・状態） --- */
:root[data-theme="dark"] .su-est.is-bad,
:root[data-theme="dark"] .su-badge.is-error,
:root[data-theme="dark"] .su-badge.is-canceled,
:root[data-theme="dark"] .vd-state.is-error { background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .su-badge.is-running,
:root[data-theme="dark"] .vd-state.is-generating { background: var(--dk-info-bg); color: var(--dk-info-ink); }
:root[data-theme="dark"] .su-badge.is-done,
:root[data-theme="dark"] .vd-state.is-done,
:root[data-theme="dark"] .vd-steps li.is-past .su-no { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .vd-state.is-draft { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .su-dot { background: var(--line-strong); }
:root[data-theme="dark"] .su-steplist li.is-done .su-dot { background: var(--success); }
:root[data-theme="dark"] .su-steplist li.is-error .su-dot { background: var(--danger); }
:root[data-theme="dark"] .su-steplist li.is-error .su-state,
:root[data-theme="dark"] .vd-expire.is-soon { color: var(--dk-ng-ink); }
:root[data-theme="dark"] .vd-style-card:has(input:checked) { background: var(--primary-soft); }
:root[data-theme="dark"] .vd-empty.is-error,
:root[data-theme="dark"] .vd-danger { color: var(--dk-ng-ink); border-color: var(--dk-ng-line); }
:root[data-theme="dark"] .vd-danger:hover { background: var(--dk-ng-bg); }
:root[data-theme="dark"] .vd-registered { color: var(--dk-ok-ink); }
:root[data-theme="dark"] .vd-autodlg-warn { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .vd-auto.is-done { background: var(--dk-ok-bg); border-left-color: var(--dk-ok-ink); }
:root[data-theme="dark"] .vd-auto.is-error { background: var(--dk-ng-bg); border-left-color: var(--dk-ng-ink); }
:root[data-theme="dark"] .vd-auto.is-error .vd-auto-msg { color: var(--dk-ng-ink); }
:root[data-theme="dark"] .vd-state.is-auto { background: var(--dk-info-bg); color: var(--dk-info-ink); }
:root[data-theme="dark"] .vd-scn-fell { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .vd-quote-warn { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .vd-quote-caution { color: var(--dk-warn-ink); }
:root[data-theme="dark"] .mv-pick { background: var(--dk-info-bg); color: var(--dk-info-ink); }   /* 漫画動画（2026-10-09〜） */
:root[data-theme="dark"] .mv-empty.is-error { color: var(--dk-ng-ink); border-color: var(--dk-ng-line); }
@media (hover: hover) { :root[data-theme="dark"] .vd-cast-photo-box:hover .vd-cast-photo-img:not([hidden]) { box-shadow: 0 0 0 .5px var(--line-strong), 0 4px 12px rgba(0, 0, 0, .55); } }   /* 人物の画像の拡大：暗い地でも縁と影が見えるように */

/* --- チャット（右下） --- */
:root[data-theme="dark"] .ch-ai.is-error .ch-text { border-color: var(--dk-ng-line); background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .ch-turn { background: var(--dk-ok-bg); color: var(--dk-ok-ink); }
:root[data-theme="dark"] .ch-panel.is-ai .ch-turn { background: var(--dk-warn-bg); color: var(--dk-warn-ink); }
:root[data-theme="dark"] .ch-th-open em { color: var(--dk-warn-ink); }
:root[data-theme="dark"] .ch-act.is-pending { background: var(--dk-warn-bg); }
:root[data-theme="dark"] .ch-act-item.is-failed .ch-act-note,
:root[data-theme="dark"] .ch-act-err,
:root[data-theme="dark"] .ch-dlg-err { color: var(--dk-ng-ink); }
:root[data-theme="dark"] .ch-act-item.is-done .ch-act-note { color: var(--dk-ok-ink); }

/* オン・オフのトグルスイッチ（スケジュール等） */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; vertical-align: middle; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; transition: background .15s, border-color .15s; }
.switch .slider::before { content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch input:checked + .slider { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(1, 92, 251, .3); }
.switch input:disabled + .slider { opacity: .5; cursor: not-allowed; }
.switch-wrap { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.switch-wrap .switch-label { font-size: 13px; color: var(--muted); }

/* ===== 動画の「CTAを追加」（2026-10-13〜・ナレーション動画／漫画動画／おまかせの確認の画面） ===== */
.vcta { display: grid; gap: 12px; }
.vcta-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.vcta-mode { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--panel); cursor: pointer; font-size: 14px; }
.vcta-mode:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.vcta-mode input { margin: 0; width: auto; flex: none; }
.vcta .vcta-mode, .vcta .vcta-sec label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }   /* .vd-form label（grid）に負けて、丸いボタンの中で縦積みになっていた（2026-10-13） */
.vcta-pane { display: grid; gap: 8px; }
.vcta-pane[hidden] { display: none; }
.vcta-group { display: grid; gap: 6px; margin-bottom: 8px; }
.vcta-group-h { font-size: 12px; color: var(--muted); }
.vcta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 2px; }
.vcta-item { position: relative; display: grid; gap: 4px; padding: 4px; margin: 0; border: 2px solid transparent; border-radius: var(--radius); background: var(--panel-soft); cursor: pointer; }
.vcta-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.vcta-item input { position: absolute; opacity: 0; pointer-events: none; }
.vcta-item:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.vcta-item img { width: 100%; aspect-ratio: 9 / 16; object-fit: contain; background: #111; border-radius: 4px; }
.vcta-item-t { font-size: 11px; line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcta-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vcta-sec[hidden] { display: none; }
.vcta-sec input[type="number"] { width: 5em; margin: 0; }
.vcta-now { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.vcta-now img { width: 72px; aspect-ratio: var(--vd-ar, 9 / 16); object-fit: contain; background: #111; border-radius: 4px; }
.vcta-now > div { display: grid; gap: 2px; }
.vcta-line { margin: 4px 0 8px; }
.vd-autodlg-cta { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 12px; margin: 0 0 12px; }
.vd-autodlg-cta legend { font-size: 13px; padding: 0 4px; }

/* 漫画動画のネーム：登場人物に画像の列（写真で指定／AIで画像を作る。ナレーション動画の人物と同じ形・2026-10-13〜） */
.mv-cast-g { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px 20px; align-items: start; }
.mv-cast-main { min-width: 0; }
@media (max-width: 600px) {
    .mv-cast-g { grid-template-columns: 1fr; }
}

/* CTA の文言（2026-10-13〜）：入力欄と、選んだ画像に文言を重ねた見本（実際の画像は 720×1280 でサーバーが作る） */
.vcta-textrow { display: grid; gap: 6px; }
.vcta-textrow[hidden] { display: none; }
.vcta-textrow label { margin: 0; }
.vcta-prev { width: 150px; aspect-ratio: var(--vd-ar, 9 / 16); background: #000; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; box-sizing: border-box; }
.vcta-prev[hidden] { display: none; }
.vcta-prev-t { color: #fff; font-weight: 900; font-size: 11px; line-height: 1.5; text-align: center; word-break: break-all; }
.vcta-prev-t[hidden] { display: none; }
.vcta-prev img { display: block; max-width: 100%; min-height: 0; flex: 0 1 auto; object-fit: contain; }

/* 漫画動画のネーム：登場人物の1行に顔の画像（2026-10-13） */
.mv-read-who li { display: inline-flex; align-items: center; gap: 6px; }
.vd-avatar.mv-read-face { width: 32px; height: 32px; font-size: 13px; border-width: 1px; }

/* 漫画動画：部品を手で動かす（「大きく見る」の画面・2026-10-13〜） */
.mv-thumb .mv-comp.is-move .mv-comp-part { pointer-events: auto; cursor: move; outline: 1px dashed var(--primary); outline-offset: 0; touch-action: none; user-select: none; -webkit-user-drag: none; }
.mv-comp.is-move:not(.is-one) { touch-action: none; }   /* カード（.is-one）では絵の上のスワイプでページが動くように、部品と取っ手だけ（上と .mv-move-h・.mv-move-r） */
.mv-move-h { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); cursor: nwse-resize; touch-action: none; z-index: 3; }
/* 動画でも切れない範囲の点線（動かしている間だけ・上下4%・左右8%内側）。部品の操作は通す */
.mv-move-safe { position: absolute; top: 4%; bottom: 4%; left: 8%; right: 8%; border: 1px dashed rgba(0, 0, 0, .45); box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); pointer-events: none; z-index: 2; }
/* カードの見本で部品をクリックして動かす（2026-10-13〜）：選べる部品は乗せると枠、動かしている間は選んだ部品だけ実線＋取っ手 */
.mv-thumb .mv-comp.is-pick .mv-comp-part { pointer-events: auto; cursor: pointer; }
.mv-thumb .mv-comp.is-pick:not(.is-move) .mv-comp-part:hover { outline: 2px solid var(--primary); outline-offset: 1px; }
.mv-thumb .mv-comp.is-move.is-one .mv-comp-part:not(.is-sel) { outline: none; cursor: pointer; }
.mv-thumb .mv-comp.is-move.is-one .mv-comp-part.is-sel { outline: 2px solid var(--primary); outline-offset: 0; cursor: move; }
.mv-move-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 2px; }
.mv-move-bar .hint { flex: 1 1 100%; margin: 0; font-size: 12px; }
.mv-move-bar .mv-move-state:empty { display: none; }
.mv-move-bar .mv-move-state.is-error { color: var(--danger, #c0392b); }
/* 部品を回す丸（2026-10-13〜）：選んだ部品の上の真ん中の少し外。つまんで回す */
.mv-move-r { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); cursor: grab; touch-action: none; z-index: 3; display: grid; place-items: center; }
.mv-move-r::after { content: "↻"; font-size: 13px; line-height: 1; color: var(--primary); font-weight: 700; }
.mv-move-r:active { cursor: grabbing; }

/* 動画の冒頭のタイトル（2026-10-14〜）：付けない／テキスト／画像（AI）＋文字・スタイル・秒数と、9:16 の見本（背景は最初の絵を CSS でぼかす） */
.vop { display: grid; gap: 12px; }
.vop .vcta-mode { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.vop-body { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px 20px; align-items: start; }
.vop-body[hidden], .vop-image[hidden] { display: none; }
.vop-form { display: grid; gap: 8px; min-width: 0; }
.vop-form label { margin: 0; }
.vop-form textarea { min-height: 7.5em; }
.vop-image { display: grid; gap: 8px; }
.vop-style { display: inline-flex; align-items: center; gap: 8px; }
.vop-style select { width: auto; margin: 0; }
.vop-art-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vop-stale { color: var(--danger, #c0392b); margin: 0; }
.vop-stale[hidden] { display: none; }
.vop .vop-sec { display: inline-flex; align-items: center; gap: 6px; }
.vop-sec input[type="number"] { width: 5em; margin: 0; }
.vop-prev { display: grid; gap: 4px; justify-items: center; }
.vop-frame { position: relative; width: 160px; aspect-ratio: var(--vd-ar, 9 / 16); background: #222; border-radius: 6px; overflow: hidden; }
.vop-bg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(6px); }
.vop-fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vop-fg[hidden], .vop-dim[hidden] { display: none; }
.vop-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); display: flex; align-items: center; justify-content: center; padding: 8% 4%; box-sizing: border-box; }
.vop-dim img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .2s; }
.vop-none { color: #ddd; font-size: 12px; text-align: center; }
.mv-opening-ai, .vd-opening-ai { margin-top: 8px; }
@media (max-width: 600px) {
    .vop-body { grid-template-columns: 1fr; }
    .vop-prev { justify-items: start; }
}

/* 動画を直す（登録した動画に、あとからタイトル・CTA を付ける・2026-10-14〜） */
.act-note { margin: 4px 10px 2px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); line-height: 1.5; }
.ve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.ve-grid video { width: 100%; max-width: 320px; aspect-ratio: var(--vd-ar, 9 / 16); background: #000; border-radius: 6px; display: block; }
.ve-form { display: grid; gap: 16px; margin-top: 16px; }
.ve-form .vd-actions { flex-wrap: wrap; }

/* ホーム：申し込み直後（商材か LP が無い）の案内だけの表示（2026-10-14〜） */
.hm-solo { max-width: 760px; margin: 8px 0 26px; }
.hm-solo-steps { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 20px; padding-left: 1.4em; font-size: 13px; color: var(--muted); }
.hm-solo-steps li.is-now { color: var(--primary); font-weight: 700; }
.hm-solo-steps li.is-done { text-decoration: line-through; }
.hm-solo-ask { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--primary-soft); color: var(--text); font-size: 14px; }
/* ホーム（商材も LP もあるとき）：処理中のタスクを「何をつくりますか？」の上に。いつも出す（2026-10-14〜） */
.hm-home-tasks { margin: 0 0 20px; padding: 14px 18px; }
.hm-home-tasks .hm-note-h { gap: 12px; margin-bottom: 12px; }
/* 見出しと一言は1つに包んで、その中で折り返す（狭い幅でも一言の左端が見出しにそろう） */
.hm-home-tasks .hm-note-hb { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.hm-home-tasks .hm-note-h:last-child { margin-bottom: 0; }
.hm-home-tasks .hm-note-ico { width: 34px; height: 34px; }
.hm-home-tasks .hm-note-ico svg { width: 19px; height: 19px; }
.hm-home-tasks .hm-note-t { font-size: 15px; }
.hm-home-tasks .hm-note-n { margin-left: 4px; font-size: 13px; color: var(--primary); }
.hm-home-tasks .hm-note-none { margin: 0; font-size: 13px; }
.hm-home-tasks .hm-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
/* 案内のカードを「何をつくりますか？」と一緒に出すとき（商材か LP が無いが、クリエイティブはある会社） */
.page-head + .hm-solo { margin-top: 0; }

/* ホームの処理中のタスク：右端に「タスク一覧へ」（2026-10-14〜） */
.hm-note-all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.hm-note-all svg { width: 14px; height: 14px; }

/* タスク一覧（tasks.index・2026-10-14〜） */
.tk2-sec { margin: 18px 0 28px; }
.tk2-h { font-size: 17px; margin: 0 0 10px; }
.tk2-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tk2-chip { display: inline-block; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text); background: var(--panel); }
.tk2-chip:hover { border-color: var(--line-strong); text-decoration: none; }
.tk2-chip.is-on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.tk2-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.tk2-table th, .tk2-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft, var(--line)); text-align: left; vertical-align: top; }
.tk2-table th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--surface-2); }
.tk2-table tr:last-child td { border-bottom: 0; }
.tk2-kind, .tk2-time { white-space: nowrap; }
.tk2-title { min-width: 220px; overflow-wrap: anywhere; }
.tk2-res { min-width: 160px; overflow-wrap: anywhere; }
.tk2-detail { display: block; color: var(--text); }
.tk2-err { display: block; color: #d63939; font-size: 12px; }
.tk2-st { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.tk2-st.is-run { background: var(--primary); color: #fff; }
.tk2-st.is-done { background: #e3f4ea; color: #1c7a43; }
.tk2-st.is-failed { background: #fde8e8; color: #c22f2f; }
.tk2-st.is-partial { background: #fff3dc; color: #a46300; }
/* 一部止めた（失敗は無い）・依頼済み（動画のできあがりは動画の画面で）は、成功とも失敗とも言えないので中立の色 */
.tk2-st.is-stopped { background: #eceff3; color: #4f5a68; }
.tk2-st.is-sent { background: #e7f1f8; color: #2b6a8c; }
:root[data-theme="dark"] .tk2-st.is-done { background: rgba(46, 160, 90, .2); color: #7fd4a0; }
:root[data-theme="dark"] .tk2-st.is-failed { background: rgba(214, 57, 57, .22); color: #ff9b9b; }
:root[data-theme="dark"] .tk2-st.is-partial { background: rgba(214, 150, 40, .22); color: #f2c472; }
:root[data-theme="dark"] .tk2-st.is-stopped { background: rgba(139, 149, 165, .2); color: #c3cad5; }
:root[data-theme="dark"] .tk2-st.is-sent { background: rgba(79, 179, 220, .16); color: #93cde6; }
:root[data-theme="dark"] .tk2-err { color: #ff9b9b; }

/* クリエイティブ詳細の前後移動「‹ 3 / 120 ›」（2026-10-14〜）。右上のボタンの並び（編集・削除・一覧へ）の最後に置く。
   最初は画面の左右の端に丸ボタンで置いたが、クリエイティブに重なるので移した（同日） */
.cv-nav { display: inline-flex; align-items: center; gap: 4px; }
.cv-nav-btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 10px; padding-right: 10px;
              min-height: calc(1.4em + 18px); }   /* 文字のボタン（行の高さ1.4＋上下8px＋枠）と同じ高さ */
.page-head .cv-nav .btn { margin-left: 0; }
.cv-nav-btn svg { width: 16px; height: 16px; }
.cv-nav-btn.is-go { color: var(--primary); border-color: var(--primary); }
.cv-nav-btn.is-off { opacity: .35; pointer-events: none; }
.cv-nav-pos { min-width: 4.5em; text-align: center; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 狭い画面：ボタンの並び（編集・削除・一覧へ・‹ › ）をタイトルの下の行へ。収まらなければ ‹ › がさらに次の行へ（つぶれて縦長にならない） */
@media (max-width: 760px) {
    .page-head.cv-head { flex-wrap: wrap; }
    .page-head.cv-head h1 { flex: 1 1 100%; }
    .page-head.cv-head .actions { flex-wrap: wrap; }
    .page-head.cv-head .actions > .btn { margin-left: 0; }   /* 既存の .page-head .btn の auto で、折り返したとき左右にずれないように */
}

/* 処理中の全画面モーダル（app.js waitModal・.vd-modal を使い回す）の経過時間（2026-10-14〜） */
.wait-modal-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ログイン画面のロゴ（サイドバーと同じ画像・2026-10-14〜。ログイン画面はいつもライト表示） */
.login-brand { margin-bottom: 24px; line-height: 0; }
.login-logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto; }

/* ホーム：申し込み直後は画面の真ん中に案内だけ（2026-10-14 ユーザーのデザイン） */
.hm-first { min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 0; }
.hm-first .hm-badge { margin-bottom: 14px; }
.hm-first-t { margin: 0 0 14px; font-size: 24px; font-weight: 700; color: var(--heading); }
.hm-first-d { margin: 0 0 28px; font-size: 15px; color: var(--muted); line-height: 1.8; }
.hm-first-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 480px;   /* 960 → 480（2026-10-14 ユーザー指示：半分に） */
                padding: 16px 24px; font-size: 17px; font-weight: 700; border-radius: 10px; }
.hm-first .hm-solo-ask { max-width: 560px; }
@media (max-width: 640px) {
    .hm-first { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
    .hm-first-t { font-size: 20px; }
    .hm-first-d { font-size: 14px; }
}

/* ===== 作り始めの「商材とLPを選ぶ」モーダル（products/_start_picker.php・2026-10-15〜。まず漫画動画） ===== */
.sp-dlg { width: min(780px, calc(100% - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.sp-dlg::backdrop { background: rgba(15, 23, 42, .55); }
.sp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sp-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 18px; color: var(--heading); overflow-wrap: anywhere; }
.sp-x { appearance: none; border: none; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.sp-x:hover { color: var(--heading); }
.sp-search { width: 100%; margin: 0 0 12px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.sp-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; text-align: left; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.sp-card[hidden] { display: none; }
.sp-card:hover:not(:disabled), .sp-card:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.sp-card:disabled { opacity: .55; cursor: not-allowed; }   /* LPの登録・分析が済んでいない商材（生成の画面） */
.sp-card-t small.sp-card-off { font-weight: 700; }
.sp-card.is-current { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.sp-avatar { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 11px; background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; }
.sp-avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--panel); }
.sp-card-t, .sp-lp-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-card-t strong, .sp-lp-t strong { font-size: 14px; color: var(--heading); overflow-wrap: anywhere; }
.sp-card-t small, .sp-lp-t small { font-size: 11px; color: var(--muted); }
.sp-sub { margin: 0 0 10px; }
.sp-lpgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sp-lp { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; text-align: left; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.sp-lp:hover:not(:disabled), .sp-lp:focus-visible { border-color: var(--primary); background: var(--primary-soft); }
.sp-lp:disabled { opacity: .55; cursor: not-allowed; }
.sp-lp-img { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--panel-soft); color: var(--muted); font-size: 12px; border-bottom: 1px solid var(--line); }
.sp-lp-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sp-lp-t { padding: 10px 12px; }
.sp-current { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }   /* 下の余白は .vd-form の gap に任せる（足すと 24px 空く） */
.sp-current strong:empty { display: none; }
@media (max-width: 600px) {
    .sp-dlg { padding: 16px; }
    .sp-grid, .sp-lpgrid { grid-template-columns: 1fr; }
}

/* ナレーション動画の台本：ルビの書き方の囲み（2026-10-15 ユーザー指示「目立つように」） */
.vd-ruby { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--primary); border-left-width: 4px; border-radius: 8px; background: var(--primary-soft); }
.vd-ruby summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; cursor: pointer; list-style: none; font-weight: 700; color: var(--primary-ink); }
.vd-ruby summary::-webkit-details-marker { display: none; }
.vd-ruby summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.vd-ruby:not([open]) summary::after { content: '▸'; }
.vd-ruby-sub { font-size: 12px; font-weight: 400; color: var(--muted); }
.vd-ruby-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.9; color: var(--text); }
.vd-ruby code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--heading); font-size: 13px; }
.vd-ruby-note { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: var(--text); }

/* 素材のペルソナの選択肢の顔（人物イメージ・無ければ名前の頭の1字・2026-10-15〜） */
.gv2-persona-face { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-ink); font-size: 14px; font-weight: 700; border: 1px solid var(--line-soft); }
.gv2-persona-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv2-material-picker label.gv2-material-option:has(.gv2-persona-face) { align-items: center; }

/* 素材のペルソナ・訴求の選択肢：印（段階・訴求の種類）を札にして、名前・題名と1行に並べる（2026-10-15 ユーザー指示） */
.gv2-material-option.is-persona .gv2-chip-t, .gv2-material-option.is-appeal .gv2-chip-t { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.gv2-material-option.is-persona .gv2-material-meta, .gv2-material-option.is-appeal .gv2-material-meta { padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.gv2-material-option.is-appeal .gv2-material-meta { background: var(--primary-soft); color: var(--primary-ink); }
.gv2-material-option.is-persona .gv2-chip-t > span, .gv2-material-option.is-appeal .gv2-chip-t > span { font-weight: 700; color: var(--heading); }

/* 商材一覧のカードを削ぎ落とした形に（2026-10-15 ユーザー指示）：ロゴを大きく・稼働中のスイッチは右上・右の列（進み具合・数・ボタン）は無い。
   リスト表示も2列にせず1列に。分析中・分析エラー・分析中のLPが無いときは、印の行ごと出さない */
.cmhub-identity { align-items: center; }
.cmhub-identity .cmhub-avatar { width: 56px; height: 56px; border-radius: 14px; font-size: 16px; }
.cmhub-identity .cmhub-grip { margin-top: 0; }
.cmhub-identity .cmhub-switch { flex: none; }
.cmhub-products[data-view=list] .cmhub-product { display: flex; flex-direction: column; }
.cmhub-badges { margin: 12px 0 0; }
.cmhub-badges:not(:has(> :not([hidden]))) { display: none; }

/* 商材一覧の保存容量（2026-10-15〜）：一覧の上に会社全体のバー（.storage-meter）、各カードにその商材の合計 */
.cmhub-main > .storage-meter { margin: 0 0 24px; }   /* 下の絞り込みの枠とのあいだに1行ぶん空ける（2026-10-15 ユーザー指示） */
.cmhub-identity p.cmhub-storage { margin-top: 2px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 商材のページのトップ：保存容量のバーを商材名の右に（狭いときは下へ折り返す・2026-10-15〜） */
.wsh-top .wsh-headl { flex-wrap: wrap; align-items: center; row-gap: 4px; }
.wsh-headl > .storage-meter { margin: 0; flex: 0 1 360px; }

/* 運営画面のテナント一覧（2026-10-15 整理）：表は見るものだけ・操作は「入る」「設定」。設定はモーダル（.sp-dlg の見た目を使う） */
.st-tenants td { white-space: nowrap; }
.st-tenants .st-org { white-space: normal; }
.st-org strong { display: block; color: var(--heading); }
.st-org code { font-size: 11px; color: var(--muted); }
.st-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--primary-soft); color: var(--primary-ink); }
.st-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; background: var(--surface-2); color: var(--muted); }
.st-status.is-on { background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.st-ops { text-align: right; }
.st-ops form { display: inline; margin: 0; }
.st-ops .btn + .btn, .st-ops form + .btn { margin-left: 6px; }
.st-dlg { width: min(560px, calc(100% - 32px)); }
.st-sec { padding: 14px 0; border-top: 1px solid var(--line); }
.st-sec:first-of-type { border-top: 0; padding-top: 0; }
.st-sec h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.st-row input[type=text] { flex: 1 1 220px; width: auto; margin: 0; }
.st-row input[type=number] { width: 140px; margin: 0; }
.st-row select { width: auto; margin: 0; }
.st-row .sp-unl { font-size: 13px; }
.st-force { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 13px; font-weight: normal; }   /* 契約中でも削除する（2026-11-04〜） */
.st-force input { width: auto; margin: 0; }
/* 「期間限定で付与」の期限（2026-10-15〜）。hidden のときは出さない（display を上書きしているため） */
.st-row .st-exp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: normal; margin: 0; }
.st-row .st-exp[hidden] { display: none; }
.st-row .st-exp input[type=date] { width: auto; margin: 0; }
.st-sec .hint { margin: 8px 0 0; }
.st-danger h3 { color: var(--danger); }

/* 商材一覧のカードの右上：アイコン3つ（クリエイティブ一覧・編集・ピン）＋いちばん右に稼働中のスイッチ（2026-10-15〜） */
.cmhub-icons { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.cmhub-iconbtn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none; }
.cmhub-iconbtn:hover, .cmhub-iconbtn:focus-visible { background: var(--panel-soft); color: var(--primary); text-decoration: none; }
.cmhub-edit.cmhub-iconbtn { padding: 0; font-size: inherit; }
.cmhub-identity .cmhub-icons + .cmhub-switch { margin-left: 10px; }

/* 商材一覧のカード表示（と狭い画面）：右上のアイコン・スイッチが商材名を押しつぶすので組み直す（2026-10-15〜）。
   カード表示＝1段目にロゴを横幅いっぱい、2段目に商材名・カテゴリ・保存容量、3段目に（並べ替えのつまみ・）アイコン3つ・右端に稼働中のスイッチ */
.cmhub-products[data-view=grid] .cmhub-identity { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 12px; align-items: center; }
.cmhub-products[data-view=grid] .cmhub-identity > .cmhub-avatar { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; font-size: 28px; }
.cmhub-products[data-view=grid] .cmhub-identity > .cmhub-avatar img { object-fit: contain; }
.cmhub-products[data-view=grid] .cmhub-identity > div { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
.cmhub-products[data-view=grid] .cmhub-identity > .cmhub-grip { grid-column: 1; grid-row: 3; margin: 0; }
.cmhub-products[data-view=grid] .cmhub-identity > .cmhub-icons { grid-column: 2; grid-row: 3; justify-self: start; }
.cmhub-products[data-view=grid] .cmhub-identity > .cmhub-switch { grid-column: 3; grid-row: 3; justify-self: end; margin-left: 0; }
@media (max-width: 640px) {
    .cmhub-identity { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 12px; align-items: center; }
    .cmhub-identity > .cmhub-grip { grid-column: 1; grid-row: 1; }
    .cmhub-identity > .cmhub-avatar { grid-column: 2; grid-row: 1; }
    .cmhub-identity > div { grid-column: 3 / -1; grid-row: 1; min-width: 0; }
    .cmhub-identity > .cmhub-icons { grid-column: 1 / 4; grid-row: 2; justify-self: start; }
    .cmhub-identity > .cmhub-switch { grid-column: 4; grid-row: 2; justify-self: end; margin-left: 0; }
}

/* 商材一覧のカードのアイコン3つを1.5倍に（2026-10-15 ユーザー指示・アイコン 15→22px・押せる範囲 27→40px） */
.cmhub-icons .cmhub-iconbtn, .cmhub-icons .cmhub-pin { width: 40px; height: 40px; border-radius: 10px; }
.cmhub-icons svg { width: 22px; height: 22px; }

/* 商材一覧のごみ箱（2026-10-21 ユーザー指示）：稼働中のスイッチのすぐ左。押すと確認のモーダル（商材名を入れると「削除する」が押せる） */
.cmhub-iconbtn.cmhub-del:hover, .cmhub-iconbtn.cmhub-del:focus-visible { color: var(--danger); }
.cmhub-deldialog .cmhub-delwarn { margin: 0 0 14px; color: var(--heading); line-height: 1.8; overflow-wrap: anywhere; }
.cmhub-dellist { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 8px 0 18px; padding: 0; font-size: 13px; }
.cmhub-dellist b { margin-left: 4px; color: var(--heading); font-variant-numeric: tabular-nums; }
.cmhub-delchoice { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.cmhub-delchoice legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--heading); }
.cmhub-delchoice label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 400; color: var(--text); }
.cmhub-delchoice label + label { margin-top: 8px; }
.cmhub-delchoice input[type=radio] { flex: none; width: auto; min-height: 0; margin: 3px 0 0; }   /* .cmhub input の幅100%・高さ42px を外す */
.cmhub .cmhub-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.cmhub .cmhub-danger:hover { background: #c9302c; border-color: #c9302c; }
.cmhub .cmhub-danger:disabled, .cmhub .cmhub-danger:disabled:hover { background: var(--danger); border-color: var(--danger); opacity: .45; cursor: not-allowed; }

/* ホームの「最近の更新」（2026-10-15〜・商材一覧の右の欄と同じ部品）。横幅があるので3列ほどに並べる */
.hm-recent { margin-top: 24px; }
.hm-recent h2 { margin: 0; font-size: 16px; }
.hm-recent .cmhub-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; }
.hm-recent .cmhub-feed li + li { border-top: 0; margin-top: 0; padding-top: 0; }
.hm-recent .cmhub-feed li { border-top: 1px solid var(--line-soft); padding-top: 12px; }

/* 商材とLPを選ぶモーダルのLPのカード：縦長のLPの画像で枠が伸びないように（2026-10-15 ユーザー指示「画像が長過ぎる」）。
   画像は枠（16:10）いっぱいに重ねて、LPの上の部分だけを見せる */
.sp-lp-img { position: relative; overflow: hidden; }
.sp-lp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ホーム：「何をつくりますか？」の下に処理中のタスクを置いたので、上に少し空ける（2026-10-15〜） */
.create-form-wrap + .hm-home-tasks { margin-top: 24px; }


/* ===== スマホ表示の調整（2026-10-16〜）=====
   実機の幅（390px 前後）で全ページを撮って見つけた崩れをまとめて直す。広い画面の見た目は変えない。
   上部バー（.m-topbar）とメニューの開け閉めは「サイドバー」の節にある */
@media (max-width: 900px) {
    /* 上部バー（56px）の下に隠れないよう、上に張り付く部品の位置を下げる */
    .ai-actionbar { top: 56px; }
    .create-queue, .asset-add, .gv2-rail { top: 72px; }
    /* ページ内リンク（#product-content など）・scrollIntoView で飛んだ先の見出しが、上部バーの下に入らないように */
    html { scroll-padding-top: 64px; }
    /* ホームの「はじめての方へ」：画面1枚に収まるよう、上部バー（56px）の分も引く（元は container の上下 24px＋24px だけ） */
    .hm-first { min-height: calc(100vh - 104px); min-height: calc(100dvh - 104px); }
    /* 商材ページのLP：ボタンが折り返さず、左へはみ出して「このLPを削除」が見えなかった */
    .wsh-act { flex-wrap: wrap; justify-content: flex-start; }
    /* 念のための受け止め：どこかが横にはみ出しても、ページごと横に揺れないようにする（はみ出しは個別に直す） */
    .main-col { overflow-x: clip; }
}
@media (max-width: 640px) {
    /* 見出し＋右のボタン：並ばないときは折り返す（見出しやボタンの文字が縦に潰れていた） */
    .page-head { flex-wrap: wrap; align-items: flex-start; }
    .page-head h1 { flex: 1 1 auto; min-width: 0; }
    .page-head > .actions, .page-head > .page-head-actions, .actions { flex-wrap: wrap; }
    .tpl-user-switch { flex-shrink: 1; }

    /* 作り方の帯（新規作成の「画像を登録する …［作り方を変える］」）：説明が細い列に押し込まれていた → ボタンを下の段へ */
    .cm-bar { flex-wrap: wrap; }
    .cm-bar-main { flex: 1 1 calc(100% - 60px); }
    .cm-bar-btn { margin-left: 50px; }

    /* 表：見出しは1行に（「名前」「権限」が1字ずつ縦に並んでいた）。表は横にスクロールする */
    .table-scroll th, .ai-table-wrap th { white-space: nowrap; }
    .table-scroll td { min-width: 4.5em; }   /* 「管理者」「有効」が1字ずつ縦に並んでいた（表は横にスクロールする） */
    .list-table td .btn, .list-table td button, .tk-type { white-space: nowrap; }
    /* クリエイティブ一覧（リスト表示）：タイトルが2字ずつ折り返していた */
    .list-view td:nth-child(3) { min-width: 11em; }
    .list-view td:nth-child(4), .list-view td:nth-child(5), .list-view td:nth-child(6) { white-space: nowrap; }
    /* 分析の表：列が4字幅まで細くなって読めなかった → 1列に最低限の幅を持たせて横スクロール */
    .av-table th, .av-table td { min-width: 7.5em; }

    /* 「指示にない文字を入れない」：チェックの文言が3行に細く折れていた → 文章として流す */
    form .checkbox.text-strict, .checkbox.text-strict { display: block; }
    .checkbox.text-strict input { margin: 0 6px 0 0; vertical-align: -2px; }

    /* 生成の細かい設定（ダイヤル）：見出しと操作を縦に積む（操作の段が細くなって段階ボタンが切れていた） */
    .gv2-dial { flex-direction: column; align-items: stretch; gap: 6px; }
    .gv2-dial-l { width: auto; }
    /* 段階ボタン（「なし〜かなり多め」の6択など）：横に並びきらず右が切れていた → 幅いっぱいを等分し、長い語は2行に */
    .gv2-seg-dial { display: flex; width: 100%; }
    .gv2-seg-dial > button { flex: 1 1 0; min-width: 0; padding: 6px 3px; white-space: normal; line-height: 1.3; }

    /* 数値比較：日付の2つの欄が並ばず、期間の箱から右にはみ出していた */
    .an2-dates { flex-wrap: wrap; }
    .an2-dates input { flex: 1 1 130px; min-width: 0; }
    .an2-dates input { padding-left: 8px; padding-right: 4px; }   /* 16px の日付が欄の中で切れないよう、内側の余白を詰める */

    /* トークンの数字の箱：200px のまま縦に不ぞろいに積まれていた → 2つずつ並べる */
    .tk-top { gap: 10px; }
    .tk-top .tk-balance { flex: 1 1 140px; min-width: 0; padding: 10px 14px; }

    /* 一覧の右の「削除」：1字ずつ縦に折れていた */
    .su-lplist li > .inline-form, .su-lplist li > form { flex: none; }
    .vd-danger { white-space: nowrap; }
    .rt-bar .btn { white-space: nowrap; flex: none; }   /* 修正画面の「選択をすべて消す」が2行に折れていた */

    /* クリエイティブ一覧（カード）：1列だと1枚が画面いっぱいで探しにくい → 2列 */
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    /* 絞り込み：欄を2列にそろえて詰める（1列にばらばらに積まれて画面を埋めていた） */
    .filters[data-list-filters] .filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .filters[data-list-filters] select, .filters[data-list-filters] input[type=date],
    .filters[data-list-filters] input[type=month], .filters[data-list-filters] input[type=number] { width: 100%; max-width: none; }

    /* 動画のスタイル選び：1列だと縦に長すぎる → 2列 */
    .vd-style-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* 画面の下のほうの内容が、右下のチャットのボタンに隠れないよう、下に余白を足す */
    .main-col .container { padding-bottom: 88px; }
    /* ホームの「はじめての方へ」：上部バー 56px＋container の上 16px＋上の下余白 88px を引く（画面1枚に収める） */
    .hm-first { min-height: calc(100vh - 160px); min-height: calc(100dvh - 160px); }

    /* 入力欄の文字を 16px に（iPhone は 16px 未満の欄に触れると画面が拡大されてしまう） */
    input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),
    select, textarea { font-size: 16px !important; }
}
@media (max-width: 420px) {
    /* お申し込みの段階表示：3つが2段に分かれていた → 線を短く・文字を小さく */
    .co-steps li { font-size: 12px; gap: 4px; }
    .co-steps li + li::before { width: 12px; margin: 0 6px; }
    /* 契約の確認の表：長いメールアドレスで表が広がってはみ出していた */
    .co-confirm td { overflow-wrap: anywhere; }
}

/* 運営の会社の詳細：期間と使った量（実費）（2026-10-16〜）。切り替えは .tk-view と同じ見た目 */
.st-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 4px; }
.st-period label { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; }
.st-period input[type="date"] { width: auto; }
.st-presets { margin-left: 4px; }
.st-tabs { display: inline-flex; align-items: center; margin: 10px 0 8px; }
.st-csv { margin-left: 12px; font-size: 13px; }
.st-total th { border-top: 2px solid var(--line); }

/* チーム管理（2026-10-16〜）：タブの下の余白・決済の失敗 */
.team-tabs { margin-bottom: 16px; }
.an-tabs { margin-bottom: 16px; }   /* 数値分析の「数値表示／期間指定比較」（2026-10-28〜） */
.an-count { margin: -6px 0 12px; }   /* 数値表示の「対象 N / 全 M件」（前は見出しの横） */
.team-pay-ng { color: var(--danger); font-weight: 600; }

/* チーム管理＞ストレージ管理：すべてのデータを削除（左下・2026-10-16〜） */
.st-wipe { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.st-wipe-box { width: 100%; max-width: 560px; border: 1px solid var(--danger); border-radius: 8px; padding: 14px 16px; display: grid; gap: 10px; }
.st-wipe-lead { margin: 0; color: var(--danger); }
.st-wipe-list { margin: 0; padding-left: 1.2em; }
.st-wipe-box label { display: grid; gap: 6px; font-size: 13px; }
.st-wipe-actions { display: flex; gap: 8px; justify-content: flex-start; }
/* hidden を .st-wipe-box（grid）・.btn（inline-block）の display に負けさせない＝確認欄は押すまで閉じておく */
.st-wipe [hidden] { display: none !important; }

/* ===== 契約の知らせ（画面上部・2026-10-19〜）：支払い失敗の猶予中（赤）／解約済み（ふつう） ===== */
.contract-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding: 12px 16px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel-soft, #f6f7f9); color: var(--text); font-size: 14px; }
.contract-banner p { margin: 0; flex: 1 1 320px; min-width: 0; line-height: 1.6; }
.contract-banner .contract-banner-sub { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.contract-banner-ng { border-color: #f1b9b9; background: #fdeaea; color: #8f1f1f; }
.contract-banner-ng .contract-banner-sub { color: #8f1f1f; }
:root[data-theme="dark"] .contract-banner-ng { border-color: rgba(239, 107, 103, .35); background: var(--dk-ng-bg); color: var(--dk-ng-ink); }
:root[data-theme="dark"] .contract-banner-ng .contract-banner-sub { color: var(--dk-ng-ink); }

/* ===== チーム管理＞ご契約（2026-10-19〜）===== */
.ct-box { margin-top: 24px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.ct-box h2 { margin-top: 0; font-size: 16px; }
.ct-box-ng { border-color: #f1b9b9; }
:root[data-theme="dark"] .ct-box-ng { border-color: rgba(239, 107, 103, .35); }
.ct-cards { display: grid; gap: 8px; margin: 12px 0; }
.ct-cards label { display: flex; align-items: center; gap: 8px; }
.ct-agree { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; }
/* 解約（2026-10-28〜）：プランの変更の箱の外の右下の黒いボタンで、下の箱をアコーディオンで開く */
.ct-cancel-open { display: flex; justify-content: flex-end; margin-top: 16px; }
.ct-cancel-toggle { background: #1f2329; border-color: #1f2329; color: #fff; }
.ct-cancel-toggle:hover { background: #000; border-color: #000; }
:root[data-theme="dark"] .ct-cancel-toggle { background: #0b0d10; border-color: var(--line-strong); }
:root[data-theme="dark"] .ct-cancel-toggle:hover { background: #000; }
.ct-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.ct-acc.is-open { grid-template-rows: 1fr; }
.ct-acc-in { min-height: 0; overflow: hidden; }
/* 開き終わったら（JS が .is-shown を付ける）はみ出しを戻して、フォーカスの輪が欠けないようにする */
.ct-acc.is-shown > .ct-acc-in { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .ct-acc { transition: none; } }
.ct-agree input { margin-top: 4px; }
.ct-amount { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* プランの変更（2026-10-27〜）：プランのカード・周期・いつ変えるか */
.pc-step { margin: 18px 0 10px; padding-left: 9px; border-left: 3px solid var(--primary); font-size: 14px; font-weight: 700; color: var(--primary-ink); line-height: 1.3; }
.pc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; align-items: stretch;
    --pc-border: #b8cdf2; --pc-head-from: #e8f0fd; --pc-danger-bg: #fff3f1; --pc-danger-line: #f6d2cc;
    --pc-btn: var(--primary); --pc-btn-on: var(--primary-d); }   /* 塗りボタン・「上げる」の地（白文字） */
/* ダークの --primary は明るく白文字が薄い（約3.2:1）ので、ボタンの地だけ深い青に（白文字で 4.9:1・選択中 6.4:1） */
:root[data-theme="dark"] .pc-plans { --pc-border: #34507e; --pc-head-from: #1d2b45; --pc-danger-bg: #3a2224; --pc-danger-line: #5a3236;
    --pc-btn: #2d6be0; --pc-btn-on: #2459c0; }
/* 比較表の1列（2026-10-28〜 ユーザーのデザイン案）：帯＝印・プラン名・印・説明／金額の箱（ボタンつき）／線で区切った行／足りないときの赤い箱 */
.pc-plan { position: relative; display: flex; flex-direction: column; min-width: 0; cursor: pointer; overflow: hidden;
    border: 1.5px solid var(--pc-border); border-radius: 14px; background: var(--panel); font-weight: normal; box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.pc-plan:hover { border-color: var(--primary); }
.pc-plan.is-current { cursor: default; border-color: var(--line); }
.pc-plan.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.pc-plan input { position: absolute; opacity: 0; width: 0; height: 0; }
.pc-plan input:focus-visible ~ .pc-plan-body .pc-pick { outline: 2px solid var(--primary); outline-offset: 2px; }
.pc-plan-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 16px 14px; background: linear-gradient(135deg, var(--pc-head-from), var(--panel) 75%); }
.pc-plan.is-current .pc-plan-head { background: var(--panel-soft); }
.pc-emblem { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
    background: var(--panel); box-shadow: 0 1px 4px rgba(15, 30, 60, .12); color: var(--primary); }
.pc-plan.is-current .pc-emblem { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.pc-ico.pc-emblem-ico { width: 24px; height: 24px; color: inherit; }
.pc-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.pc-plan-name { font-size: 17px; font-weight: 700; color: var(--heading); line-height: 1.3; overflow-wrap: anywhere; }   /* 区切りのない長い名前を右端で切らない */
.pc-desc { font-size: 12px; color: var(--muted); line-height: 1.5; min-height: 3em; overflow: hidden;   /* 2行分の高さにそろえる（3行目からは切る） */
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pc-badges { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; }
.pc-plan-body { display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 16px; flex: 1; }   /* 上も空ける（金額の箱が帯にくっつかない・2026-10-28 ユーザー） */   /* .pc-body は資料ノートの欄が使っている（ぶつからないように別の名前） */
.pc-pricebox { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 14px 16px; border-radius: 10px; background: var(--panel-soft); border: 1px solid var(--line-soft); }
.pc-price-label { font-size: 12px; color: var(--muted); }
.pc-price { font-size: 15px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1.2; }
.pc-price b { font-size: 34px; font-weight: 800; letter-spacing: .01em; margin-right: 2px; }
.pc-price-sub { font-size: 12px; color: var(--muted); text-align: center; }
/* モニターから移るときのキャンペーン（2026-11-11〜・申し込み画面の .co-plan-camp と同じ色） */
.pc-camp { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; margin: 6px 0 4px; padding: 8px 10px; border-radius: 8px;
    background: var(--camp-bg); border: 1px solid var(--camp-line); color: var(--camp-ink); line-height: 1.35; text-align: center; }
.pc-camp-h { font-size: 11px; font-weight: 700; }
.pc-camp strong { font-size: 17px; font-weight: 800; color: var(--camp-hot); font-variant-numeric: tabular-nums; }
.pc-camp strong small { font-size: 11px; font-weight: 700; margin-left: 2px; }
.pc-camp-sub { font-size: 11px; color: var(--muted); }
.pc-pick { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 12px; padding: 10px 14px;
    border: 1.5px solid var(--pc-btn); border-radius: 999px; background: var(--pc-btn); color: #fff; font-size: 14px; font-weight: 700; }
.pc-pick-off, .pc-pick-on { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.pc-ico.pc-arrow { position: absolute; right: 2px; width: 18px; height: 18px; color: inherit; }
.pc-pick .co-ico { width: 15px; height: 15px; }
.pc-pick-on { display: none; }
.pc-plan.is-on .pc-pick { background: var(--pc-btn-on); border-color: var(--pc-btn-on); }
.pc-plan.is-on .pc-pick-off { display: none; }
.pc-plan.is-on .pc-pick-on { display: flex; }
.pc-pick.is-cur { background: var(--panel); border-color: var(--line-strong); color: var(--muted); }
.pc-feats { display: flex; flex-direction: column; width: 100%; padding: 0 4px; }
.pc-feat { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; line-height: 1.4; border-bottom: 1px solid var(--line-soft); }
.pc-feat:last-child { border-bottom: 0; }
.pc-feat strong { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-feat-l { color: var(--text); }
.pc-ico { width: 17px; height: 17px; flex-shrink: 0; color: var(--primary-ink); }
.pc-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; border: 0; color: var(--primary-ink); background: var(--primary-soft); }
.pc-badge.is-up { color: #fff; background: var(--pc-btn); }
.pc-badge.is-down { color: var(--primary-ink); background: var(--primary-soft); }
.pc-badge.is-cur { color: var(--text); background: var(--surface-2); }
.pc-over { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pc-danger-line);
    background: var(--pc-danger-bg); font-size: 12px; color: var(--danger, #c0392b); line-height: 1.7; }
.pc-ico.pc-alert { width: 18px; height: 18px; margin-top: 2px; color: var(--danger, #c0392b); }
.pc-cycles, .pc-when { display: flex; flex-direction: column; gap: 8px; }
.pc-cycles { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
.pc-opt { display: flex; align-items: flex-start; gap: 8px; font-weight: normal; }
.pc-opt input { margin-top: 4px; }
.pc-opt .hint { display: block; }
.pc-opt:has(input:disabled) { opacity: .5; }
.pc-pending { padding: 10px 12px; border-radius: 6px; background: var(--primary-soft); margin-bottom: 12px; }
.pc-pending p { margin: 0 0 8px; }
.pc-pending form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* お知らせ（2026-10-26〜）：利用者の一覧・運営の書く欄・マイページの「表示」 */
/* お知らせ（2026-10-28〜 一覧は日付とタイトルだけ・1ページ10件・タイトルを押すとモーダルで全文） */
.news-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.news-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.news-item.is-new { border-color: var(--primary); }
.news-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 1件ずつの未読／既読の札（2026-10-28〜）：未読は塗り、既読は枠だけ */
.news-state { display: inline-block; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 18px; }
.news-state.is-unread { border-color: var(--primary); background: var(--primary); color: #fff; font-weight: 700; }
.news-title { margin: 4px 0 0; font-size: 15px; line-height: 1.5; text-wrap: balance; }
.news-open { display: inline; padding: 0; border: 0; background: none; color: var(--heading); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.news-open:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.news-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.news-pager { max-width: 760px; box-sizing: border-box; }
.news-head { max-width: 760px; }   /* 「すべて既読にする」を一覧の右端にそろえる */
.news-dlg { width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.news-dlg[open] { display: flex; flex-direction: column; }
.news-dlg::backdrop { background: rgba(15, 23, 42, .5); }
.news-dlg-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
.news-dlg-head > div { flex: 1 1 auto; min-width: 0; }
.news-dlg-title { margin: 4px 0 0; font-size: 17px; line-height: 1.5; text-wrap: balance; overflow-wrap: anywhere; }
.news-dlg-x { flex: none; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.news-dlg-x:hover { border-color: var(--primary); color: var(--primary); }
.news-dlg > .news-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 20px; }
.news-dlg-foot { display: flex; justify-content: flex-end; padding: 10px 20px 16px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .news-dlg-head { padding: 14px 16px 10px; } .news-dlg > .news-body { padding: 14px 16px; } .news-dlg-foot { padding: 10px 16px 14px; } }
.news-body { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.news-body a { word-break: break-all; }
.news-form-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.news-form-row > label { flex: 1 1 260px; min-width: 0; }
.news-status { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.news-status legend { font-size: 13px; margin-bottom: 4px; padding: 0; }
.list-table td.nowrap { white-space: nowrap; }
.mp-theme { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-theme-opt { position: relative; margin: 0; }
.mp-theme-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mp-theme-opt span { display: inline-block; padding: 8px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); cursor: pointer; }
.mp-theme-opt input:checked + span { border-color: var(--primary); color: var(--primary); font-weight: 700; background: var(--primary-soft); }
.mp-theme-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
/* マイページ「表示」：生成の前の確認を戻す（2026-11-06〜・app.js）。ボタンは「次からは表示しない」にした確認があるときだけ（.btn の display が hidden に勝たないように） */
.mp-gencf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.mp-gencf-h { font-size: 14px; font-weight: 600; color: var(--heading); }
.mp-gencf-state { font-size: 14px; color: var(--text); }
.mp-gencf [hidden] { display: none; }

/* 漫画動画：黒地に文字だけのコマの「表示する文字」（コマの絵の段・2026-10-26〜） */
.mv-tt { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.mv-tt textarea { width: 100%; box-sizing: border-box; font-size: 15px; line-height: 1.6; }
.mv-tt input[type="text"] { width: 100%; box-sizing: border-box; }
.mv-tt-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* ナレーションを直す（モーダル・2026-11-04〜）：絵を直すと同じ並び（左に見本・右に欄）。カードの中の線と余白は付けない */
.mv-ttedlg .mv-tt { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.mv-ttedlg .vd-castdlg-actions { margin-top: 0; }
.mv-ttedlg .mv-tt > .hint { margin: 0; font-size: 12px; }
/* 書き方・位置・大きさ（2026-11-04〜） */
.mv-ttlay { margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.mv-ttlay legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--heading); }
.mv-ttlay .gv2-chips { gap: 6px; }
.mv-ttcol { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mv-ttsize { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.mv-ttsize input[type="range"] { flex: 1 1 160px; min-width: 0; accent-color: var(--primary); }
.mv-ttsize-n { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.mv-ttsize-n input { width: 72px; }
.mv-ttlay > .hint { margin: 4px 0 0; font-size: 12px; }
.mv-ttcol label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.mv-ttcol input[type="color"] { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); cursor: pointer; }

/* テナント管理＞メール管理（2026-10-28〜）：左に欄・右に見本（狭い画面は縦に積む） */
.ml-notes { margin: 14px 0 0; padding-left: 18px; line-height: 1.8; }
.ml-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .ml-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ml-grid label { display: block; }
.ml-grid input[type="text"], .ml-grid input[type="email"] { width: 100%; box-sizing: border-box; }
.ml-body { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.6; }
.ml-test { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ml-test > label { flex: 1 1 240px; min-width: 0; }
.ml-test > .hint { flex: 1 1 100%; }
.ml-reset { display: block; margin: 10px 0 0; }
.ml-h { margin: 22px 0 4px; font-size: 15px; }
.ml-var { padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--primary); font: inherit; font-size: 13px; cursor: pointer; }
.ml-var:hover { border-color: var(--primary); }
.ml-sample { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ml-preview { position: sticky; top: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.ml-preview-h { padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.ml-preview-subject { padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.ml-preview-body { padding: 12px 14px; max-height: calc(100vh - 140px); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; color: var(--text); }
/* 漫画動画のネーム：場所（背景）を画像で指定（2026-10-30〜・プロトタイプ） */
.mv-place-edit { margin: 0 0 12px; }
.mv-read-place .mv-read-who li { gap: 6px; }
.mv-read-placeimg { width: 44px; height: 33px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; }
/* 漫画動画：コマの絵を範囲を指定して直す（2026-11-02〜）。範囲の選び方は部分修正（.rt-*）と同じ。ダイアログに収まるよう絵の高さを抑える */
.mv-rt-way { display: grid; gap: 4px; }
.mv-rt-way .btn { justify-self: start; }
.mv-rt-or { margin: 2px 0 0; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; font-weight: 600; color: var(--muted); }
.mv-rt-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 0; padding: 8px 10px; border: 1px solid var(--primary); border-radius: 8px; background: var(--panel-soft); font-size: 12px; font-weight: 600; color: var(--heading); }
.mv-rtdlg { width: min(900px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.mv-rtdlg [hidden] { display: none !important; }
.mv-rt-lay { grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.mv-rt-pic { text-align: center; }
.mv-rt-pic .rt-stage img { max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); width: auto; }
.mv-rt-pic .rt-bar { justify-content: center; flex-wrap: wrap; }
.mv-rt-side > .hint { margin: 0 0 10px; }
.mv-rt-side .rt-notes { margin-bottom: 8px; }
.mv-rtdlg .rt-note textarea { resize: vertical; }
.mv-rtcmp { width: min(720px, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; }
.mv-rt-result { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }   /* スマホでも左右に並べる（見比べやすいように） */
.mv-rt-result .rt-col { padding: 8px; }
.mv-rt-result .rt-col-h { margin-bottom: 6px; }
.mv-rt-shot { width: min(100%, calc((100vh - 300px) * var(--mv-ar, 2 / 3))); width: min(100%, calc((100dvh - 300px) * var(--mv-ar, 2 / 3))); min-width: min(100%, 120px); margin: 0 auto; }
.mv-rt-marked { position: relative; }
.mv-rt-marks { position: absolute; inset: 0; pointer-events: none; }
.mv-rt-marks span { position: absolute; border: 2px dashed var(--warning); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.mv-rt-marks b { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--warning); color: #3b2f0b; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.mv-rt-asked { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; display: grid; gap: 6px; }
.mv-rt-asked li { display: flex; gap: 8px; align-items: flex-start; }
.mv-rt-asked .rt-no { width: 20px; height: 20px; font-size: 11px; }
@media (max-width: 900px) {
    .mv-rt-lay { grid-template-columns: minmax(0, 1fr); }
    .mv-rt-pic .rt-stage img { max-height: 60vh; max-height: 60dvh; }
}
/* ナレーション動画の作り始め：1段目の3つのボタン（AIで台本を生成／自分で台本を作成／すべてお任せ・2026-11-02〜）と、お任せの確認の画面の長さ */
.vd-start-acts + .hint { margin: 6px 0 0; }
.vd-autodlg-len { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.vd-autodlg-len legend { padding: 0 4px; }
/* 確認の画面の「自分で指定」（2026-11-04〜）：.vd-castdlg label の display:grid（丸の下に文字）に巻き込まず、1行を使って横に並べる */
.vd-castdlg .vd-autodlg-len label.vd-len-own { display: flex; flex: 1 1 100%; align-items: center; flex-wrap: wrap; gap: 6px 8px; }

/* 漫画動画：キャラクターの段（2026-11-04〜）。人物ごとに、選んでいる顔（左）と候補の並び（右）。候補は押すとすぐ顔になる */
.mv-char { display: flex; flex-wrap: wrap; gap: 20px; padding: 16px; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-soft); }
.mv-char-face { flex: 0 0 200px; display: grid; gap: 8px; align-content: start; }
.mv-char-pic { width: 200px; height: 200px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.mv-char-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mv-char-none { font-size: 13px; color: var(--muted); }
.mv-char-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.mv-char-ok svg { width: 14px; height: 14px; flex: none; color: var(--success); }
.mv-char-main { flex: 1 1 380px; min-width: 0; display: grid; gap: 10px; align-content: start; }
.mv-char-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mv-char-head strong { font-size: 16px; color: var(--heading); }
.mv-char-sub { font-size: 12px; color: var(--muted); }
.mv-cands { display: flex; flex-wrap: wrap; gap: 10px; }
.mv-cand { position: relative; box-sizing: border-box; width: 100px; height: 100px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); overflow: hidden; cursor: pointer; }
.mv-cand img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mv-cand:hover:not(:disabled) { border-color: var(--primary); }
.mv-cand:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mv-cand.is-on { border: 3px solid var(--primary); }
.mv-cand:disabled { cursor: default; }
.mv-cand-tag { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(7, 9, 12, .72); color: #fff; font-size: 11px; line-height: 1.5; }
.mv-cand-check { position: absolute; right: 4px; top: 4px; display: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; place-items: center; }
.mv-cand-check svg { width: 13px; height: 13px; }
.mv-cand.is-on .mv-cand-check { display: grid; }
.mv-cand.is-wait { display: grid; place-content: center; justify-items: center; gap: 6px; border-style: dashed; color: var(--muted); font-size: 11px; cursor: default; }
.mv-cand-spin { width: 18px; height: 18px; box-sizing: border-box; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: vd-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mv-cand-spin { animation: none; } }
.mv-char-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mv-char-acts > form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.mv-char-refbtn svg { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mv-char-look summary { cursor: pointer; padding: 4px 0; font-size: 13px; color: var(--muted); }
.mv-char-lookf { display: grid; gap: 8px; padding-top: 6px; }
.mv-char-lookf label { display: grid; gap: 4px; margin: 0; font-size: 13px; }
.mv-char-lookf textarea { width: 100%; margin: 0; }
.mv-char-lookf .hint { margin: 0; }
.mv-char-stale { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--warning); border-radius: 8px; background: var(--panel); }
.mv-char-stale p { margin: 0; font-size: 13px; color: var(--heading); }
.mv-char-narr { margin: 4px 0 0; }
@media (max-width: 560px) {
    .mv-char-face { flex-basis: 100%; }
    .mv-char-pic { width: 160px; height: 160px; }
    .mv-cand { width: 84px; height: 84px; }
}
/* キャラクターの段のダイアログ（ほかの候補を描く・参考画像から作る）。.vd-castdlg label の display:grid が hidden に勝たないように */
.mv-cdlg { width: min(820px, calc(100% - 32px)); }
.mv-cdlg [hidden] { display: none !important; }
.mv-cdlg-lay { display: flex; flex-wrap: wrap; gap: 20px; }
.mv-cdlg-pic { flex: 0 0 180px; display: grid; gap: 8px; align-content: start; }
.mv-cdlg-pic > img, .mv-cdlg-drop { box-sizing: border-box; width: 180px; height: 180px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); object-fit: cover; object-position: center 20%; }
.mv-cdlg-drop { display: grid; place-items: center; overflow: hidden; padding: 8px; font-size: 12px; color: var(--muted); text-align: center; }
.mv-cdlg-drop img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.mv-cdlg-drop:has(img:not([hidden])) { padding: 0; }
.mv-cdlg-pic .vd-cast-photo-btn { max-width: 180px; }
.mv-cdlg-side { flex: 1 1 320px; min-width: 0; display: grid; gap: 14px; align-content: start; }
.mv-cdlg-fs { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mv-cdlg-fs legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 700; color: var(--heading); }
.vd-castdlg label.mv-cdlg-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-weight: 400; cursor: pointer; }
.mv-cdlg-opt input { flex: none; margin: 3px 0 0; }
.mv-cdlg-opt > span { display: grid; gap: 2px; }
.mv-cdlg-opt strong { font-size: 14px; font-weight: 600; color: var(--heading); }
.mv-cdlg-opt small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.vd-castdlg label.mv-cdlg-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.vd-castdlg label.mv-cdlg-opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.mv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-castdlg label.mv-chip { display: inline-flex; position: relative; font-weight: 400; cursor: pointer; }
.mv-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mv-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text); }
.mv-chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.mv-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.vd-castdlg label.mv-cdlg-text { font-weight: 400; color: var(--muted); }
.mv-cdlg-warn { margin: 0; padding: 8px 10px; border: 1px solid var(--warning); border-radius: 8px; font-size: 12px; line-height: 1.7; color: var(--heading); }
@media (max-width: 640px) {
    .mv-cdlg-pic { flex-basis: 100%; }
}

/* 漫画動画：自分でネームを書く空のネーム（2026-11-04〜）。並べた書く行・「＋ コマを足す」で出す行・名前を入れるまで隠す「出る人」 */
.mv-panel[hidden], .mv-chars label[hidden] { display: none; }
.mv-panel.is-blank .mv-panel-edit { padding-left: 0; }
.mv-panel.is-blank .mv-panel-h .vd-no { flex: none; }
[data-mv-blank-add] { justify-self: start; margin-top: 10px; }
.mv-blank-ai { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mv-blank-ai .hint { margin: 0 0 8px; }

/* 動画の比率（2026-11-04〜・作成画面・スケジュール）：名前の前に形の小さな枠・下に向く場所 */
.vd-aspect .gv2-chip-t { display: inline-flex; align-items: center; gap: 6px; }
.vd-aspect-ico { display: inline-block; height: 16px; border: 1.5px solid currentColor; border-radius: 2px; flex: none; }
.vd-aspect-for { font-size: 11px; opacity: .7; }
.vd-visual .gv2-chip-t { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.vd-visual-for { font-size: 11px; opacity: .7; }

/* 同じ登場人物で作る（2026-11-09〜）：作成画面の上の、元の動画から引き継ぐ人物・絵柄・声のカード（videos/_keep_card.php） */
.vk-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--primary); border-left-width: 4px; border-radius: 8px; background: var(--primary-soft); }
.vk-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.vk-title { color: var(--primary-ink); font-size: 15px; }
.vk-card .hint { margin: 0; }
.vk-cast { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.vk-cast li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vk-face { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--panel); color: var(--primary-ink); font-weight: 700; border: 1px solid var(--line-soft); }
.vk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-who { display: flex; flex-direction: column; min-width: 0; }
.vk-who strong { color: var(--heading); font-size: 14px; }
.vk-who small { color: var(--muted); font-size: 12px; }
.vk-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 13px; color: var(--text); }
.vk-meta strong { color: var(--heading); }
/* 同じ台本で作り直す（2026-11-09〜・videos/remake.php）：元の動画のカード（台本・ネームの頭）と、選び直す欄 */
.rm-src { margin-bottom: 16px; }
.rm-head { margin: 0; padding: 8px 12px; list-style: none; border-radius: 6px; background: var(--panel); font-size: 13px; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.rm-head li { overflow-wrap: anywhere; }
.rm-now { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); font-size: 11px; font-weight: 600; }
.rm-form .vd-actions .btn [hidden] { display: none; }

/* ===== ご意見・ご要望（2026-11-10〜）。お客さんの送る画面（fb-form）と運営の一覧（fb-table）・詳細（fb-detail） ===== */
.fb-form { max-width: 640px; }
.fb-kinds { border: 0; padding: 0; margin: 0 0 14px; }
.fb-kinds legend { font-size: 13px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-chip { position: relative; margin: 0; cursor: pointer; }
.fb-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fb-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--panel); color: var(--text); font-size: 13px; }
.fb-chip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.fb-chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.fb-img-note { color: var(--danger); margin-top: -6px; }
/* 点数（良かった点のときだけ・0〜100点・2026-11-11〜） */
.fb-score[hidden] { display: none; }
.fb-score-in { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 400; }
.fb-score-in input { width: 7em; margin: 0; font-variant-numeric: tabular-nums; }
/* 運営のメニューの数（未対応の件数） */
.sidenav .navlink .nav-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; font-style: normal; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; flex: none; }
@media not all and (max-width: 900px) { body.sidebar-collapsed .sidenav .navlink { position: relative; }
    body.sidebar-collapsed .sidenav .navlink .nav-count { position: absolute; top: 2px; right: 10px; min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; padding: 0 4px; } }
.fb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.fb-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
    color: var(--text); font-size: 13px; text-decoration: none; }
.fb-tab:hover { text-decoration: none; border-color: var(--primary); }
.fb-tab.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); font-weight: 600; }
.fb-tab-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; }
.fb-filter label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.fb-filter select { width: auto; margin: 0; }
.fb-filter-on { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.fb-filter-on a { color: var(--muted); text-decoration: none; font-weight: 700; }
.fb-table th { white-space: nowrap; }
.fb-table td { vertical-align: top; font-size: 13px; }
.fb-row { cursor: pointer; }
.fb-row:hover td { background: var(--bg); }
.fb-c-id a { font-weight: 700; }
.fb-c-date { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fb-c-body { min-width: 260px; }
.fb-c-body a { color: var(--text); }
.fb-c-marks { display: inline-flex; gap: 4px; margin-left: 6px; }
.fb-c-marks span { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.fb-c-tenant, .fb-c-user { white-space: nowrap; }
/* 詳細：左に本文と画像、右に送った人の情報と状態・メモ */
.fb-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.fb-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.fb-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.fb-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.fb-body { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--text); overflow-wrap: anywhere; }
.fb-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fb-imgs img { display: block; max-width: 100%; max-height: 420px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.fb-side { display: flex; flex-direction: column; gap: 14px; }
.fb-meta { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: 13px; }
.fb-meta dt { color: var(--muted); font-size: 12px; margin-top: 10px; }
.fb-meta dt:first-child { margin-top: 0; }
.fb-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.fb-meta code { font-size: 12px; }
.fb-who-more { font-size: 12px; }
.fb-who-user { color: var(--muted); overflow-wrap: anywhere; }
.fb-wrap { white-space: normal; overflow-wrap: anywhere; }
.fb-ua { font-size: 12px; color: var(--muted); }
.fb-op { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.fb-op label { margin: 0; font-size: 12px; color: var(--muted); }
.fb-op select, .fb-op textarea { margin-top: 4px; }
.fb-op-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* 状態のセレクト（一覧・詳細・選んだらすぐ保存）。色は状態の札（sc-*）と同じ。sc-* の background の一括指定で矢印が消えるので、ここで付け直す（ダークも） */
.fb-st { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; white-space: nowrap; }
.fb-st-sel.sc-badge { width: auto; margin: 0; padding: 3px 24px 3px 10px; font-size: 12px; line-height: 1.5; border: 1px solid transparent; border-radius: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 12px 12px; }
:root[data-theme="dark"] .fb-st-sel.sc-badge { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 12px 12px; }
.fb-st-sel.sc-badge:hover { border-color: var(--line-strong); }
.fb-st-sel:disabled { opacity: .6; cursor: progress; }
.fb-st-note { font-size: 11px; color: var(--muted); }
.fb-st-note.bad { flex-basis: 100%; color: var(--danger); }   /* 失敗の知らせはセレクトの下に1行で（狭い列で縦に折れないように） */
.fb-table td.fb-c-del { width: 1%; text-align: right; white-space: nowrap; }
.fb-op-row { display: flex; align-items: center; gap: 10px; }
.fb-op-label { font-size: 12px; color: var(--muted); }
.fb-op-hint { margin: 0; }
@media (max-width: 960px) { .fb-detail { grid-template-columns: 1fr; } }

/* トークン不足の案内（モーダル・2026-11-12〜）。管理者には2枚のカードを横に並べる（狭い画面では縦） */
.vd-castdlg.tk-dlg { width: min(640px, calc(100% - 32px)); }
.tk-dlg .tk-dlg-lead { margin: 0 0 8px; line-height: 1.7; }
.tk-dlg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.tk-dlg-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.tk-dlg-card h4 { margin: 0 0 4px; font-size: 15px; color: var(--heading); }
.tk-dlg-card p { margin: 0; font-size: 13px; line-height: 1.7; }
.tk-dlg-card .btn { margin-top: auto; align-self: flex-start; }
.tk-dlg-card p:last-of-type { margin-bottom: 10px; }