/* ★ヘッダーは header.css に集めてある★（2026-09-17）お店・ネタ帳・管理画面で1つ。直すときはそちら */
@import url("/header.css");
/* ============================================================
   style.css — 見た目（動画の画面と画像の画面で共通）

   ★もとは index.html の <style> に書いてあった★（DECISIONS D-114）
   /image/ を足すときに写すと、直したつもりが片方だけになる。
   実際、色の変数は「片方に書き忘れる」と暗い配色でだけ読めなくなり、
   気づくのが遅れる型の壊れ方をする。1つに寄せて、両方から読む。

   ★色は必ず変数を通すこと★ 直に #fff と書くと暗い配色で切り替わらない。
   ============================================================ */
  /* ★色は必ず変数を通す★ 直に #fff と書くと暗い配色で切り替わらない */
  :root {
    --gold:#d4af37; --bg:#faf9f7; --line:#e6e2da; --ink:#2b2724; --sub:#7d766c;
    --card:#fff; --field:#fff; --hover:#faf9f7; --bad:#b4402f;
    --chipBg:#fdf3f1; --chipLine:#f0d9d4; --shade:rgba(0,0,0,.5);
    --goldRing:rgba(212,175,55,.22);
    /* ★金色の上は濃い文字にする★ 白だとコントラストが1.9しかなく読みにくい */
    --onGold:#2b2724;
    /* お知らせのバナー。★配色ごとに持つこと★
       ここを決め打ちにしたせいで、暗い配色のときに
       **明るい背景へ明るい文字が乗って読めなくなった**（実際に出した） */
    --banInfoBg:#eef4f8; --banInfoLine:#c9dceb;
    --banWarnBg:#fdf3f1; --banWarnLine:#f0d9d4;
    --banGiftBg:#fdf8e8; --banGiftLine:#e8d48a;
    /* ★動画/画像の見分け（バッジの色）★（2026-09-03）既定＝動画。金系でなじませる */
    --svcBg:#fdf8e8; --svcLine:#e8d48a; --svcInk:#8a6d1a;
  }
  :root[data-theme="dark"] {
    --gold:#d9b950; --bg:#111014; --line:#2c2a30; --ink:#e9e6e1; --sub:#9a938c;
    --card:#1a191e; --field:#232128; --hover:#232128; --bad:#e0705c;
    --chipBg:#2a1f1e; --chipLine:#4a302c; --shade:rgba(0,0,0,.7);
    --goldRing:rgba(217,185,80,.28);
    --onGold:#1a1712;
    /* ★暗い配色では、背景も暗いほうを使う★ 文字は --ink（明るい）のまま乗る */
    --banInfoBg:#16212a; --banInfoLine:#2f4a5e;
    --banWarnBg:#2a1f1e; --banWarnLine:#4a302c;
    --banGiftBg:#282216; --banGiftLine:#4e4222;
    --svcBg:#282216; --svcLine:#4e4222; --svcInk:#d9b950;
    /* ★ブラウザが描く部分にも暗いと伝える★
       これが無いと、選択肢の一覧・スクロールバー・日付入力などが白いまま残る */
    color-scheme: dark;
  }
  /* ★画像の画面だけ色を変える★（2026-09-03・D-142）
     見た目を1つに統一した（D-114）ぶん、いまどちらの画面にいるか
     一目で分からなくなっていた。バッジの色だけ変えて、他は触らない
     （CTAの金色など、ブランドの軸は動画・画像で共通のまま）。
     data-service は <html> に付く（サーバが /image/ の生HTMLに焼き込む・
     app.js もフォールバックで付ける）。 */
  :root[data-service="image"] { --svcBg:#eef0fb; --svcLine:#c9d0f0; --svcInk:#4a54a8; }
  :root[data-theme="dark"][data-service="image"] { --svcBg:#1c1e2e; --svcLine:#39406b; --svcInk:#9aa4e8; }
  :root { color-scheme: light; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: system-ui, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
         background:var(--bg); color:var(--ink); }
  main { max-width:920px; margin:0 auto; padding:20px; }
  /* ★角丸と影を少しだけ★（2026-09-03）枠線1本だけだと管理画面に見える。
     影は薄く（動画の邪魔をしない）。色は変数のまま */
  .card { background:var(--card); border:1px solid var(--line); border-radius:14px;
          padding:18px; margin-bottom:16px;
          box-shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04); }

  /* ---------- ログイン前のヒーロー（2026-09-03） ----------
     ★最初の1画面に動く実物を1本★ 文字とボタンだけでは温度が下がる。
     動画は縦(480×736)なので右に細く置き、スマホでは上に積む */
  /* ★#guest に限定すること★（2026-09-04・D-146追記の反省）
     素の .hero にしたら、おすすめプランの既存クラス（.plan.hero）に衝突して
     プランカードが横並びに壊れた。名前の広い共通クラスは作らない */
  #guest .hero { display:flex; gap:24px; align-items:center; padding:24px; overflow:hidden; }
  .hero-copy { flex:1; min-width:0; }
  /* ★看板娘ルクサ★（2026-09-08）丸く切り抜いて見出しの上に */
  #mascot { display:flex; flex-direction:column; align-items:center; margin:0 0 16px; }
  #mascot img { width:120px; height:120px; object-fit:cover; object-position:50% 22%;
                border-radius:50%; border:3px solid var(--gold);
                box-shadow:0 6px 20px rgba(0,0,0,.35); }
  #mascot .mascot-name { margin-top:8px; font-size:12px; font-weight:700; color:var(--gold);
                         letter-spacing:.08em; }
  .hero-media { flex:0 0 240px; position:relative; }
  .hero-media video, .hero-media img { width:100%; aspect-ratio:480/736; object-fit:cover;
    border-radius:12px; display:block; background:var(--field);
    box-shadow:0 8px 32px rgba(0,0,0,.25); }
  /* ★主役の名前★（2026-09-17）看板娘を丸で二重に出すのをやめ、大きい1枚に名札を添える */
  .hero-media .hero-name { position:absolute; left:10px; bottom:10px; padding:4px 12px; border-radius:999px;
    background:rgba(0,0,0,.6); color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.1em;
    backdrop-filter:blur(4px); pointer-events:none; }
  /* ★読み込み中の黒い箱をやめる★ 絵の色に寄せた地をゆっくり光らせ、届いたら消す */
  .hero-media.loading video, .hero-media.loading img {
    background:linear-gradient(120deg, #2b2420 30%, #4a3a26 50%, #2b2420 70%); background-size:200% 100%;
    animation:heroShimmer 1.6s linear infinite; }
  @keyframes heroShimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
  @media (prefers-reduced-motion: reduce) { .hero-media.loading video, .hero-media.loading img { animation:none; } }
  /* ★見出しの末尾1文字だけが2行目に落ちない★ 2行を均等に割る */
  #guestTitle { font-size:20px; line-height:1.45; margin:0 0 8px; text-wrap:balance; }
  #guestLead { text-wrap:balance; }
  /* ★押す場所は1つ★ ログインのボタンを特典の箱と同じ幅で、いちばん大きく */
  #google { width:100%; max-width:340px; padding:15px 20px; font-size:16px; border-radius:12px;
            box-shadow:0 8px 22px rgba(202,166,75,.28); }
  /* 同意の文は小さく・左揃えの2行に。中央揃えの3行は読みにくい */
  #guestTerms { max-width:340px; margin:12px auto 0; text-align:left; font-size:11px; line-height:1.7; }
  @media (max-width: 640px) {
    #guest .hero { flex-direction:column; gap:14px; padding:16px; }
    /* ★スマホでは動画を上に・小さめに★
       大きく置くとログインボタンが最初の1画面から沈む */
    .hero-media { flex:none; width:min(160px, 48%); }
  }
  h2 { font-size:15px; margin:0 0 12px; }
  label { display:block; font-size:13px; color:var(--sub); margin:10px 0 4px; }
  /* ★文字色を必ず指定する★
     背景だけ変えて色を書かないと、ブラウザ既定の黒のままになり
     暗い配色で読めなくなる */
  textarea, select, input[type=text], input[type=file] {
    width:100%; padding:10px; border:1px solid var(--line);
    border-radius:8px; font-size:14px; font-family:inherit;
    background:var(--field); color:var(--ink); }
  /* 選択肢の一覧はブラウザが描くので、これで暗い側に寄せる */
  select option { background:var(--field); color:var(--ink); }
  textarea { min-height:84px; resize:vertical; }
  /* ★フォーカスは金色のリングに★（2026-09-03）
     暗い配色でブラウザ既定の白い枠が悪目立ちしていた。色は変数を通す */
  textarea:focus, select:focus, input[type=text]:focus {
    outline:none; border-color:var(--gold);
    box-shadow:0 0 0 3px var(--goldRing);
  }
  /* ★残り字数★ ふだんは案内、4,800字を超えたら赤で残量 */
  .charCount { text-align:right; font-size:11px; color:var(--sub); margin:4px 2px 0; }
  .charCount.warn { color:var(--bad); font-weight:700; }
  /* ★文章を消すボタン（D-205）★ 字数表示と同じ行の右端に置く */
  .promptFoot { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
  /* ★タグ補完の候補★（2026-09-17）文章欄の直下に重ねる。押しやすい高さ・件数は薄く */
  #promptBlock { position:relative; }
  /* ★候補の箱を置く基準★ これが無いと画面の左上に出る（absolute の親が body になる） */
  .booruBar { position:relative; }
  .tagPop { position:absolute; left:0; right:0; z-index:5; background:var(--card); border:1px solid var(--line);
            border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); max-height:240px; overflow:auto; padding:4px; }
  .tagPop .tp { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:14px; }
  .tagPop .tp.on, .tagPop .tp:hover { background:var(--hover); }
  .tagPop .tp b { font-weight:600; }
  .tagPop .tp .via { color:var(--sub); font-size:12px; }
  .tagPop .tp .n { margin-left:auto; color:var(--sub); font-size:11px; white-space:nowrap; }
  .tagPop .tp .cat { font-size:10px; padding:1px 6px; border-radius:999px; background:var(--svcBg); color:var(--svcInk); border:1px solid var(--svcLine); }
  .promptFoot .charCount { margin-top:0; flex:1; }
  .promptClear { font-size:12px; padding:5px 12px; flex:none; white-space:nowrap; }
  /* 戻せる状態のあいだは金色にして、押せることを目立たせる */
  .promptClear.undo { border-color:var(--gold); color:var(--gold); font-weight:700; }
  /* ★2択はプルダウンではなくボタンで★（2026-09-03）
     向き・長さ・絵柄はどれも2〜3択。開く操作がもったいない。
     長さは値段も一緒に見せる（押す前に把握できる） */
  .seg { display:flex; gap:8px; flex-wrap:wrap; }
  .seg button { background:var(--card); color:var(--sub); border:1px solid var(--line);
    font-weight:400; padding:8px 14px; }
  .seg button[aria-selected=true] { background:var(--gold); color:var(--onGold);
    border-color:var(--gold); font-weight:700; }
  .seg button .sub { display:block; font-size:11px; font-weight:400; opacity:.8; }
  .row { display:flex; gap:12px; flex-wrap:wrap; }
  .row > div { flex:1; min-width:150px; }
  /* ★音の設定のチェック★（D-203）指で押せるように文字ごと当たり判定にする */
  .checks { display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; }
  .chk { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--ink);
    cursor:pointer; user-select:none; padding:4px 0; }
  .chk input { width:18px; height:18px; accent-color:var(--gold); cursor:pointer; margin:0; }
  button { font-family:inherit; font-size:14px; padding:10px 18px; border-radius:8px;
    border:1px solid var(--gold); background:var(--gold); color:var(--onGold); cursor:pointer; font-weight:700;
    transition:filter .15s, transform .15s; }
  /* ★押せるものは触ると少し反応する★（2026-09-03）色は変えず明るさだけ */
  button:hover:not(:disabled) { filter:brightness(1.06); }
  button:active:not(:disabled) { transform:translateY(1px); }
  button.ghost { background:var(--card); color:var(--ink); border-color:var(--line); font-weight:400; }
  button:disabled { opacity:.5; cursor:default; }
  /* ★折り返しを許し、文字は折らない★（2026-09-17）375px で「文章から／画像から／続きを作る／この子で作る」の
     4つが1行に押し込まれ、1文字ずつ縦に積まれていた（実測）。2行に折れたほうがずっと読める */
  .tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
  .tabs button { background:var(--card); color:var(--sub); border:1px solid var(--line); font-weight:400;
                 white-space:nowrap; }
  /* 狭い画面だけ、折れた行の中で幅を分け合う（PCまで伸ばすと間延びする） */
  @media (max-width: 560px) { .tabs button { flex:1 1 auto; } }
  .tabs button[aria-selected=true] { background:var(--gold); color:var(--onGold); border-color:var(--gold); font-weight:700; }
  .note { font-size:12px; color:var(--sub); margin-top:8px; }
  /* ★説明文の改行は行末をきれいに★（2026-09-17）末尾1〜2文字だけが次の行に落ちるのを防ぐ（対応ブラウザだけ効く） */
  .note, .muted, .stamp-note, .langNote, .plan-note, .perk, .grid figcaption, #stampTitle { text-wrap:pretty; }
  /* ★金色は「押すもの」と「残高」だけ★（2026-09-17）値段まで金色だとボタンと競って目が散る */
  .price { font-size:13px; color:var(--ink); font-weight:600; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
  /* ページ送り。件数が増えても探せるようにする */
  .pager { display:flex; align-items:center; justify-content:center; gap:12px;
           margin-top:16px; font-size:13px; color:var(--sub); }
  .pager button[disabled] { opacity:.4; cursor:default; }
  /* ★使い方に合わせた案内★（2026-09-03）
     売り込みに見せない。字を小さく、色も落として、事実として添える。 */
  /* ★特典の案内★（2026-09-03）売り込みに見せない。字を小さく、色を落とす */
  .perk { font-size:12px; color:var(--sub); line-height:1.7; margin:8px 0 0; opacity:.9; }
  #shortPlan { margin-top:10px; padding:10px 12px; font-size:13px; line-height:1.7;
               border-left:3px solid var(--gold); background:rgba(212,175,55,.06);
               border-radius:0 8px 8px 0; color:var(--sub); }
  /* ★ページ送り★（2026-09-02）狭い画面では折り返す。
     釦が7つ並ぶので、gap は上で決めた12pxのままだと横に溢れる */
  .pager { flex-wrap:wrap; gap:8px; }
  .pager .jump { display:flex; align-items:center; gap:6px; }
  .pager .jump input { width:56px; padding:6px 8px; text-align:center;
                       font-size:13px; border:1px solid var(--line);
                       border-radius:8px; background:var(--card); color:inherit; }
  /* 数字の増減つまみは邪魔なので消す（打つか、釦で動かす） */
  .pager .jump input::-webkit-outer-spin-button,
  .pager .jump input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  .pager .jump input { -moz-appearance:textfield; appearance:textfield; }
  .grid figure { margin:0; border:1px solid var(--line); border-radius:14px; overflow:hidden;
                 background:var(--card); display:flex; flex-direction:column; }
  .grid img, .grid video { width:100%; display:block; background:var(--field); }
  .grid figcaption { padding:12px; font-size:12px; color:var(--sub);
                     display:flex; flex-direction:column; gap:8px; flex:1; }
  /* ★長い文章でカードが伸びないように畳む★ 全文は「プロンプト」から見る */
  .grid .said { color:var(--ink); font-size:13px; word-break:break-word; line-height:1.5;
                display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
                overflow:hidden; min-height:2.6em; }
  .grid .meta { font-size:11px; color:var(--sub); margin-top:auto; padding-top:2px; }
  .grid img, .grid video { cursor:zoom-in; }

  /* 一番やりたいこと（画像→動画 / 動画→続き）を目立たせる */
  .grid .main { display:flex; align-items:center; gap:10px; }
  .grid .primary { flex:1; background:var(--gold); color:var(--onGold); border:1px solid var(--gold);
                   border-radius:8px; padding:9px 10px; font-weight:700; font-size:13px;
                   cursor:pointer; font-family:inherit; }
  /* 「⋯」で畳んだ中身 */
  .grid .more { flex:0 0 auto; background:none; border:1px solid var(--line); border-radius:8px;
                color:var(--sub); font-size:14px; line-height:1; padding:8px 10px;
                cursor:pointer; font-family:inherit; }
  .grid .more:hover { border-color:var(--gold); color:var(--ink); }
  .grid .extra { display:flex; flex-direction:column; gap:8px; margin-top:8px;
                 padding-top:8px; border-top:1px solid var(--line); }
  /* ★.hidden より強く指定すること★
     `.grid .extra` は指定が2つぶんで、`.hidden`（1つぶん）に勝ってしまう。
     そのままだと畳んだつもりが開いたままになる（管理画面でも同じ型の事故があった） */
  .grid .extra.hidden { display:none; }
  .grid .extra .meta { margin-top:0; }
  .grid .del { background:none; border:0; color:var(--bad); font-size:12px; cursor:pointer;
               font-family:inherit; padding:4px; }
  /* ★2列に組む★（2026-09-03・「共有」を足して4つになったため）
     横1列だと4つで1つ50pxしかなく、「きれいにする（300）」が3行に折り返していた。
     2列なら1つ105px使えて、高さも揃う（grid は行の高さが揃うので、
     折り返した釦だけ背が高い、という見た目にならない）。 */
  .grid .subs { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
  .grid .subs a, .grid .subs button { flex:1; text-align:center; font-size:12px; padding:7px 6px;
    border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink);
    cursor:pointer; text-decoration:none; font-family:inherit; font-weight:400; }
  .grid .subs a:hover, .grid .subs button:hover { background:var(--hover); }
  /* ★作っている間の下地（進行中のカード）★
     リロードすると監視ループが死んで、サーバでは動いているのに画面から
     痕跡が消えていた。ここに「今これをしています」を残す。
     ★向きに合わせて縦横比を変える★ 出来上がりと同じ形にしておくと、
     並んだときに位置がずれない。 */
  .grid figure.working { border:1px dashed var(--line); }
  .grid figure.working .ph { width:100%; border-radius:10px; display:block;
     background-color:#17161a;
     background-image:linear-gradient(100deg,#17161a 34%,#2b2832 50%,#17161a 66%);
     background-size:220% 100%; animation:shimmer 1.5s linear infinite; }
  @keyframes shimmer { from { background-position:220% 0 } to { background-position:-220% 0 } }
  /* ★動きを止めたい人には止める★ 目が回る人がいる */
  @media (prefers-reduced-motion: reduce) {
    .grid figure.working .ph { animation:none; }
  }
  .grid figure.working .said { color:var(--ink); font-weight:700; }

  .grid .pick { display:flex; align-items:center; gap:6px; font-size:12px;
                padding:8px 12px; border-top:1px solid var(--line); cursor:pointer; }
  .grid .pick input { width:16px; height:16px; }
  .grid figure.on { outline:3px solid var(--gold); }
  /* 尺。文章の右に小さく添える（文章が2行で畳まれても消えない位置） */
  .grid .dur { display:inline-block; margin-left:6px; padding:1px 6px;
     border:1px solid var(--line); border-radius:999px;
     font-size:10px; color:var(--sub); white-space:nowrap;
     font-variant-numeric:tabular-nums; vertical-align:middle; }
  /* ★つなげられないものは薄くする（消さない）★
     消すと「動画が消えた」に見えるうえ、この一覧は作品ギャラリー本体なので
     保存・削除・続きを作るも一緒に使えなくなる。最多の人は85本持っている。
     薄くすれば、押す前に選べないと分かり、並びも動かない。 */
  .grid figure.unpickable { opacity:.42; }
  .grid figure.unpickable .pick { cursor:not-allowed; }
  .grid figure.unpickable .pickLabel { color:var(--sub); }
  /* ★どれを拡大したものか一目で分かるようにする★（D-74）
     元動画と拡大版は**サムネイルが同じに見えて当然**（同じ絵を大きくしただけ）。
     カード幅に縮めて並べれば見分けがつかないので、印を重ねる。 */
  .grid figure { position:relative; }
  .grid .badgeKind { position:absolute; top:8px; right:8px; z-index:2;
     background:rgba(0,0,0,.62); color:#fff; font-size:11px; font-weight:700;
     padding:3px 8px; border-radius:999px; line-height:1.5;
     /* ★動画の操作を邪魔しない★ 上に乗ると下の再生ボタンが押せなくなる */
     pointer-events:none; }
  /* ★左上に大きさ★（D-74）
     「つないだ・3本」だけでは、**綺麗なものをつないだのか元のままか分からない**。
     大きさが出ていれば 480×736 か 960×1472 かで一目で読める。
     右上（何であるか）と左上（どれだけ大きいか）で役割を分ける。 */
  .grid .badgeSize { position:absolute; top:8px; left:8px; z-index:2;
     background:rgba(0,0,0,.62); color:#fff; font-size:11px; font-weight:700;
     padding:3px 8px; border-radius:999px; line-height:1.5;
     font-variant-numeric:tabular-nums; pointer-events:none; }
  .grid .order { color:var(--gold); font-weight:700; }
  /* ★スマホは必ず2列★
     1列だと縦にずらりと並び、目当てのものを探すのに延々とスクロールが要る。
     幅の指定だけで2列にすると、PC側が7列になって1枚が小さくなりすぎるので、
     狭い画面だけ列数を固定する。 */
  @media (max-width: 560px) {
    .grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .grid figcaption { padding:8px; }
    .grid .said { font-size:12px; }
    .grid .subs a, .grid .subs button { padding:6px 4px; font-size:11px; }
    /* ★狭い画面では縦に積む★（2026-09-02）
       カード幅144pxに2つ並べると1つ59pxしかなく、
       「きれいにする（無料・あと20回）」が**4行に折り返して高さ74px**になった（実測）。
       縦に積めば1つが144px使えるので、2行で収まる。
       ★横並びをやめても場所は増えない★ どのみち折り返して高さを食っていた。 */
    .grid .subs { grid-template-columns:1fr; gap:6px; }
    /* ★主ボタンを1行に収める★
       カード幅144pxしかないので、「⋯」と余白を削って主ボタンに幅を回す。
       削らないと「▸ 動画に／する」と折り返して読みにくい（実測で高さ57px） */
    .grid .main { gap:6px; }
    .grid .primary { font-size:12px; padding:9px 6px; }
    .grid .more { padding:5px 7px; font-size:13px; }
  }

  .counts { font-size:13px; color:var(--sub); margin:-6px 0 12px; }

  /* 友だちに教える（紹介）の数字。★狭い画面でも折り返して収まるように★ */
  .stats { display:flex; gap:10px; flex-wrap:wrap; }
  .stats .s { flex:1; min-width:96px; background:var(--bg); border:1px solid var(--line);
              border-radius:8px; padding:10px 12px; text-align:center; }
  .stats .s b { display:block; font-size:20px; color:var(--gold); }
  .stats .s span { font-size:11px; color:var(--sub); }
  #inviteUrl { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
  #inviteHistory div, #inviteRewards div { display:flex; justify-content:space-between;
                       gap:10px; font-size:13px; padding:6px 0;
                       border-bottom:1px solid var(--line); }
  #inviteRewards b { color:var(--gold); }
  /* ★登録のぶんは色を変える★ 課金のぶんと桁がまるで違うので、
     並べたときに「登録だけでは大きくない」ことが伝わるようにする */
  #inviteRewards .first { border-bottom:2px solid var(--line); }
  .tabs .num { opacity:.7; font-weight:400; margin-left:4px; }

  /* 素材の選択スロット。★モードを持たない★ どちらのボタンも常に1回で選べる */
  .slot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  /* ★正方形に固定しない★
     72x72 の object-fit:cover にしていたため、中身が縦でも横でも
     正方形に見え、**切り取った結果を確かめられなかった**。
     高さだけ揃え、幅は比率に任せる（contain で全体を見せる） */
  .slot .thumb { width:auto; max-width:120px; height:72px; object-fit:contain; border-radius:8px;
                 border:1px solid var(--line); }
  .slot .none { color:var(--sub); font-size:13px; margin-right:2px; }
  .slot .err { color:var(--bad); font-size:12px; width:100%; }
  /* 落とし口。押すとファイル選択も開く */
  .slot .dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center;
                    gap:2px; min-width:180px; padding:14px 18px; cursor:pointer;
                    border:2px dashed var(--line); border-radius:10px;
                    background:var(--field); color:var(--sub); font:inherit; text-align:center; }
  .slot .dropzone:hover { border-color:var(--gold); background:var(--hover); }
  .slot .dropzone .plus { font-size:22px; line-height:1; color:var(--gold); }
  .slot .dropzone .lead { font-size:13px; color:var(--ink); }
  .slot .dropzone .sub  { font-size:11px; color:var(--sub); }
  /* ドラッグ中。落とせる場所だと分かるように光らせる */
  .slot.drop .dropzone { border-color:var(--gold);
                         background:color-mix(in srgb, var(--gold) 10%, var(--field)); }
  .slot.drop { outline:2px dashed var(--gold); outline-offset:6px; border-radius:8px; }
  /* 選んだものと、その取り消しボタン */
  .thumbwrap { position:relative; display:inline-block; line-height:0; }
  .thumbwrap .x { position:absolute; top:-8px; right:-8px; width:22px; height:22px; padding:0;
                  border-radius:50%; border:1px solid var(--line); background:var(--card);
                  color:var(--ink); font-size:14px; line-height:1; cursor:pointer;
                  display:flex; align-items:center; justify-content:center; }
  .thumbwrap .x:hover { border-color:var(--bad); color:var(--bad); }

  /* 選ぶ専用の窓。★ここでは「選ぶ」以外のことはできない★ */
  /* ★ネタ帳ピッカーも同じ見た目★（D-197）窓の作りは作品ピッカーと共通 */
  #pickerBox, #bookPickBox, #charBox { position:fixed; inset:0; background:var(--shade); display:none;
               align-items:center; justify-content:center; z-index:60; padding:20px; }
  #pickerBox.on, #bookPickBox.on, #charBox.on { display:flex; }
  #pickerBox .inner, #bookPickBox .inner, #charBox .inner { background:var(--card); border-radius:12px; padding:20px; max-width:760px;
                      width:100%; max-height:84vh; display:flex; flex-direction:column; }
  /* ネタ帳のタグ帯（D-197追記）。多いときは折り返して、それ以上はスクロール */
  /* ★flex:none★（2026-09-11 オーナー指摘）窓がflex縦積みなので、指定しないと
     帯が押し潰されてチップの上下が見切れていた。余白も上下に足す */
  /* ★キャラ図鑑★（2026-09-17）hybrid の図鑑と同じ「眺めて押す」窓。サムネは 3:4 で顔を上に */
  #charBox .inner { max-width:960px; }
  /* ★右ドック★（2026-09-17・オーナー専用）本文は body の右余白で避ける（固定ヘッダーも一緒に縮む） */
  /* ★本文は他の利用者と同じ（画面中央・920px）★（2026-09-17 オーナー指示）ドックは右の空きに浮かべるだけで、本文を動かさない。
     空きが足りない画面では app.js がドックの幅を空きに合わせ、それでも足りなければたたんで始める */
  html.dockOn { --dockW: 400px; }
  /* ★固定ヘッダー（z-index 80）の下から始める★ top:0 だと帯（タブ・»）がヘッダーの裏に隠れる（2026-09-17 実害）。
     高さは app.js がヘッダーを測って --hdrH に入れる */
  #dock { position:fixed; top:var(--hdrH, 62px); right:0; bottom:0; width:var(--dockW); z-index:55; display:flex; flex-direction:column;
          background:var(--bg); border-left:1px solid var(--line); box-shadow:-6px 0 24px rgba(0,0,0,.08); }
  #dock.hidden { display:none; }
  #dockGrip { position:absolute; left:-3px; top:0; bottom:0; width:6px; cursor:col-resize; z-index:1; }
  #dockGrip:hover { background:color-mix(in srgb, var(--gold) 40%, transparent); }
  .dockBar { display:flex; align-items:center; gap:4px; padding:8px 8px 6px; border-bottom:1px solid var(--line); background:var(--card); flex:none; }
  .dockBar button { padding:6px 10px; font-size:12px; border:1px solid var(--line); background:var(--card); color:var(--sub); font-weight:400; border-radius:8px; }
  .dockBar button[aria-selected=true] { background:var(--gold); color:var(--onGold); border-color:var(--gold); font-weight:700; }
  .dockBar #dockHide { padding:6px 8px; margin-left:auto; }
  .dockPane { flex:1; min-height:0; display:flex; flex-direction:column; }
  .dockPane.hidden { display:none; }
  .dockPane iframe { flex:1; width:100%; border:0; background:var(--bg); }
  /* 図鑑の中身をドックに入れたときの詰め方 */
  #dockChars .inner { display:flex; flex-direction:column; flex:1; min-height:0; padding:8px; }
  #dockChars .inner h2, #dockChars .inner > .note:first-of-type, #dockChars #charClose { display:none; }
  #dockChars .charBar input { flex:1 1 100%; font-size:13px; padding:7px 9px; }
  #dockChars #charChips button { padding:3px 8px; font-size:11px; }
  #dockChars #charGrid { grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; margin:8px 0; }
  #dockChars #charGrid .ch .nm { font-size:11px; }
  #dockChars #charGrid .ch .sr { font-size:10px; }
  /* Danbooru タブ */
  .booruBar { display:flex; gap:8px; align-items:center; padding:8px 8px 0; flex-wrap:wrap; }
  .booruBar input[type=search] { flex:1 1 160px; padding:7px 9px; font-size:13px; border:1px solid var(--line); border-radius:8px;
                                 background:var(--field); color:var(--ink); font-family:inherit; }
  .booruBar .chk { font-size:12px; }
  .booruBar select { width:auto; padding:6px 8px; font-size:12px; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); }
  #booruGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; overflow:auto; margin:8px; flex:1;
               align-content:start; grid-auto-rows:max-content; }
  #booruGrid .bp { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card); display:flex; flex-direction:column; }
  #booruGrid .bp img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; background:var(--field); display:block; cursor:zoom-in; }
  #booruGrid .bp .act { display:flex; gap:4px; padding:5px; }
  #booruGrid .bp .act button { flex:1; padding:4px 0; font-size:11px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-weight:400; border-radius:6px; }
  #booruGrid .bp .act button:hover { border-color:var(--gold); }
  #booruGrid .bp .who { font-size:10px; color:var(--sub); padding:0 6px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    /* たたんだときの取っ手（右端の中ほど） */
  #dockShow { position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:55; padding:12px 8px 12px 10px;
              border-radius:12px 0 0 12px; font-size:18px; box-shadow:-4px 0 16px rgba(0,0,0,.15); }
  #dockShow.hidden { display:none; }
  /* ドックがあるときは、図鑑を開く小さなボタンは要らない */
  html.dockMode #charPick { display:none; }
  .charBar { display:flex; gap:8px; flex-wrap:wrap; }
  .charBar input { flex:1 1 200px; padding:8px 10px; font-size:14px; }
  #charChips { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 0; flex:none; }
  #charChips button { border:1px solid var(--line); background:var(--card); color:var(--ink);
                      border-radius:999px; padding:4px 10px; font-size:12px; font-weight:400; cursor:pointer; }
  /* ★選んでも太字にしない★ 幅が変わって隣の粒がずれ、押し間違いを誘う（実測） */
  #charChips button.on { background:var(--gold); color:var(--onGold); border-color:transparent; }
  #charChips .sep { width:1px; background:var(--line); margin:0 4px; }
  #charGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px;
              overflow:auto; margin:12px 0; align-content:start; grid-auto-rows:max-content; }
  #charGrid .ch { display:flex; flex-direction:column; padding:0; border:1px solid var(--line); border-radius:10px;
                  overflow:hidden; background:var(--card); cursor:pointer; text-align:left; font-family:inherit; color:var(--ink); font-weight:400; }
  #charGrid .ch:hover { border-color:var(--gold); }
  #charGrid .ch.on { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
  #charGrid .ch .th { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:top; background:var(--field); display:block; }
  #charGrid .ch .th.none { display:flex; align-items:center; justify-content:center; color:var(--sub); font-size:22px; }
  #charGrid .ch .nm { font-size:12px; font-weight:700; padding:6px 8px 0; line-height:1.3; }
  #charGrid .ch .sr { font-size:11px; color:var(--sub); padding:2px 8px 8px; text-decoration:underline dotted; }
  .charFoot { display:flex; align-items:center; gap:10px; flex:none; }
  .charFoot .note { flex:1; margin:0; }
  #bookPickTags { display:flex; gap:6px; flex-wrap:wrap; align-items:center;
                  max-height:92px; overflow-y:auto; padding:4px 2px; flex:none; }
  #bookPickTags button { border:1px solid var(--line); background:var(--card); color:var(--ink);
                         border-radius:999px; padding:3px 10px; font-size:12px; font-weight:400;
                         white-space:nowrap; cursor:pointer; }
  #bookPickTags button.on { background:var(--gold); color:var(--onGold); border-color:transparent; font-weight:700; }
  #bookPickTags small { opacity:.75; margin-left:3px; }
  /* ネタ帳の一覧: 1行1件（文章が主役なので、作品ピッカーの格子より読みやすい） */
  #bookPickGrid { display:flex; flex-direction:column; gap:8px; overflow:auto; margin:14px 0; }
  #bookPickGrid button { display:flex; gap:10px; align-items:flex-start; text-align:left;
                         padding:10px 12px; border:1px solid var(--line); border-radius:10px;
                         background:var(--card); color:var(--ink); font-weight:400; cursor:pointer; }
  #bookPickGrid button:hover { background:var(--hover); }
  /* ★選択中は金枠★（2026-09-11・タップで入れる/外せる複数選択） */
  #bookPickGrid button.on { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
  #bookPickGrid img { width:48px; height:64px; object-fit:cover; border-radius:6px; flex:none; }
  #bookPickGrid .bp-ttl { font-weight:700; font-size:13px; }
  #bookPickGrid .bp-pv { font-size:11px; color:var(--sub); line-height:1.5;
                         display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* ★align-content を start にすること★
     既定の stretch のままだと、窓の高さに合わせて**行が圧縮される**。
     件数が増えるほど潰れ、40件で1行21pxになり、中の画像がはみ出して
     「細い帯が並ぶ」表示になっていた（実測で確認）。
     start にすると行は内容の高さのままになり、あふれた分はスクロールする。 */
  /* ★土台→味付けの親子を線で示す★（2026-09-17）同じ見た目の2列だと、どちらが親か初見で読めない */
  .flavorRow { display:flex; flex-wrap:wrap; gap:6px; margin-left:6px; padding-left:12px;
               border-left:2px solid color-mix(in srgb, var(--gold) 55%, transparent); }
  .pkHead { margin:0 0 6px; font-size:12px; color:var(--sub); display:flex; align-items:center; gap:6px; }
  .pkHead .n { display:inline-flex; width:18px; height:18px; border-radius:50%; background:var(--gold);
               color:#1a1a1a; font-size:11px; font-weight:700; align-items:center; justify-content:center; flex:none; }
  #pickerGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
                gap:12px; overflow:auto; margin:14px 0;
                align-content:start; grid-auto-rows:max-content; }
  #pickerPager { display:flex; align-items:center; gap:10px; justify-content:center;
                 font-size:13px; color:var(--sub); }
  #pickerPager button[disabled] { opacity:.4; cursor:default; }
  #pickerGrid button { padding:0; border:1px solid var(--line); border-radius:10px;
                       overflow:hidden; background:var(--card); cursor:pointer; font-family:inherit;
                       position:relative; /* 秒数バッジの基準（2026-09-11） */ }
  /* ★動画の秒数バッジ★（2026-09-11 オーナー要望）右上にはっきり。
     作ったものピッカーと用意された動きの見本で共用 */
  .durBadge { position:absolute; top:6px; right:6px;
              background:rgba(0,0,0,.72); color:#fff;
              font-size:13px; font-weight:700; line-height:1;
              padding:5px 10px; border-radius:999px; pointer-events:none; }
  #pickerGrid button:hover { border-color:var(--gold); }
  /* ★切り抜かない★（2026-09-11 オーナー指摘）cover だと縦長の作品は頭や下が必ず切れて、
     どの作品か見分けられなかった。contain で全体を見せ、余った部分は薄い地色で埋める */
  #pickerGrid img, #pickerGrid video { width:100%; display:block; aspect-ratio:1;
                                       object-fit:contain; background:rgba(0,0,0,.15); }
  #pickerGrid .cap { padding:6px; font-size:11px; color:var(--sub); text-align:left;
                     overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ログインボーナスのスタンプ。★横一列で、狭い画面でも収まるように★ */
  #stampCard { background:var(--card); border:1px solid var(--line); border-radius:10px;
               padding:14px 16px; margin-bottom:16px; }
  .stamp-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  .stamp-head span { font-size:13px; font-weight:700; flex:1; }
  .stamp-head button { padding:8px 16px; font-size:13px; }
  #stampRow { display:flex; gap:6px; }
  #stampRow .s { flex:1; aspect-ratio:1; max-width:44px; border-radius:50%;
                 border:2px solid var(--line); display:flex; align-items:center;
                 justify-content:center; font-size:11px; color:var(--sub); }
  /* 押した日 */
  #stampRow .s.on { background:var(--gold); border-color:var(--gold);
                    color:var(--onGold); font-weight:700; }
  /* 今日押せる場所。★点滅させず、枠で示す★ 動くと作る操作の邪魔になる */
  #stampRow .s.now { border-color:var(--gold); border-style:dashed; color:var(--gold); }
  /* 1周の最終日。他より大きい報酬なので目印を付ける */
  #stampRow .s.big { font-size:10px; font-weight:700; }
  .stamp-note { font-size:11px; color:var(--sub); margin-top:8px; }
  /* ★受け取り済みは1行に畳む★（2026-09-17 デザイン見直し）
     押すものが無い日にカードが最初の1画面を占めて、主役の「作る」が沈んでいた。
     題名＋小さいスタンプ列だけ残し、説明とボタンは隠す。押した直後は演出のため畳まない（app.js） */
  #stampCard.done { display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:8px 14px; }
  #stampCard.done .stamp-head { flex:1 1 auto; margin:0; min-width:0; }
  #stampCard.done .stamp-head button { display:none; }
  #stampCard.done #stampRow { flex:0 0 auto; gap:4px; }
  #stampCard.done #stampRow .s { width:24px; max-width:24px; font-size:9px; border-width:1.5px; }
  #stampCard.done .stamp-note, #stampCard.done #perkBonus { display:none; }

  /* 入る前の人に見せる特典。★ここが弱いと、押されても登録されない★ */
  /* ★2026-09-17★ 箱がボタンより大きく主役を食っていたので、1〜2行の帯にした */
  #guestOffer { background:color-mix(in srgb,var(--gold) 10%,var(--card));
                border:1px solid var(--gold); border-radius:12px;
                padding:10px 14px; margin:16px auto 0; max-width:340px;
                display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:2px 8px; }
  #guestOffer .tag { display:inline-block; background:var(--gold); color:var(--onGold);
                     font-size:11px; font-weight:700; padding:2px 10px; border-radius:99px; }
  #guestOffer .big { font-size:22px; font-weight:700; color:var(--gold); margin:0; }
  #guestOffer .sub { font-size:12px; color:var(--sub); margin:0; flex-basis:100%; text-wrap:balance; }

  /* オープンの日と記念。★一番上に、目立たせて★ */
  #buyOpen { background:color-mix(in srgb,var(--gold) 12%,var(--card));
             border:1px solid var(--gold); border-radius:10px;
             padding:12px 14px; margin-bottom:12px; font-size:13px; line-height:1.9; }
  #buyOpen b { color:var(--gold); }

  /* お知らせのバナー。★期間中ずっと、作る画面の一番上に出す★
     メンテナンスの予告は、一度見せて終わりでは足りない。
     ★閉じられるようにしない★ 閉じられると「知らせた」と言えなくなる。
     出す期間はサーバ側で決める（過ぎれば自動で消える）。 */
  .banner { border-radius:10px; padding:12px 14px; margin-bottom:14px;
            font-size:13px; line-height:1.7; text-align:left;
            /* ★文字色を必ず指定する★
               指定しないと、そのときの配色の文字色をそのまま受け継ぐ。
               背景だけ決め打ちにしていたので、暗い配色で読めなくなった */
            color:var(--ink); }
  .banner .t { font-weight:700; display:block; margin-bottom:2px; }
  .banner.info { background:var(--banInfoBg); border:1px solid var(--banInfoLine); }
  .banner.warn { background:var(--banWarnBg); border:1px solid var(--banWarnLine); }
  .banner.gift { background:var(--banGiftBg); border:1px solid var(--banGiftLine); }

  /* お知らせ。★一度だけ、真ん中に出す★
     隅に小さく出すと、コインを配った理由が伝わらない */
  #noticeBox { position:fixed; inset:0; background:var(--shade); display:none;
               align-items:center; justify-content:center; z-index:90; padding:20px; }
  #noticeBox.on { display:flex; }
  /* ★一覧に変えた★（D-210）ポップアップより広く、上から読む形 */
  #noticeBox .inner { background:var(--card); border:2px solid var(--gold); border-radius:14px;
                      padding:18px 20px; max-width:520px; width:100%; text-align:left;
                      max-height:80vh; display:flex; flex-direction:column; }
  .noticeHead { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  #noticeList { overflow-y:auto; }
  /* 1件ぶん。未読は左に金色の帯を立てて、読んだものと見分ける */
  .nItem { display:flex; gap:12px; padding:12px 10px; border-bottom:1px solid var(--line); }
  .nItem:last-child { border-bottom:0; }
  .nItem.unread { background:var(--goldRing); border-left:3px solid var(--gold); border-radius:6px; }
  .nItem .ic { font-size:22px; line-height:1.2; flex:none; }
  .nItem .bd { flex:1; min-width:0; }
  .nItem .ttl { font-weight:700; margin-bottom:2px; }
  .nItem .txt { font-size:14px; line-height:1.7; white-space:pre-line; word-break:break-word; }
  .nItem .amt { font-size:18px; font-weight:700; color:var(--gold); margin-top:4px; }
  .nItem .at { font-size:11px; color:var(--sub); margin-top:4px; }
  /* ★ベルのバッジ★ 未読の数。0のときは出さない（app.js が隠す） */
  #bellBadge { position:absolute; top:2px; right:2px; min-width:16px; height:16px;
               padding:0 4px; border-radius:8px; background:var(--bad); color:#fff;
               font-size:10px; font-weight:700; line-height:16px; text-align:center; }

  /* えがくAI: いま選んでいるものを出すボタン */
  .pick { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
          padding:10px 12px; }
  .pick .nm { font-weight:700; }
  .pick .pr { color:var(--gold); font-weight:700; font-size:13px; margin-left:auto;
              white-space:nowrap; }
  .pick .caret { color:var(--sub); font-size:11px; }

  /* えがくAI を選ぶ窓（D-114・2026-08-30） */
  #aiBox { position:fixed; inset:0; background:var(--shade); display:none;
           align-items:center; justify-content:center; z-index:86; padding:20px; }
  #aiBox.on { display:flex; }
  #aiBox .inner { background:var(--card); border-radius:12px; padding:20px;
                  max-width:720px; width:100%; max-height:86vh; overflow:auto; }
  .ai-wrap { display:flex; gap:14px; align-items:flex-start; }
  /* 会社の一覧。★件数も出す★ どこに何個あるか分かる */
  .ai-vendors { display:flex; flex-direction:column; gap:4px; flex:0 0 150px; }
  .ai-vendors button { display:flex; align-items:center; gap:8px; width:100%;
                       text-align:left; padding:9px 11px; border:1px solid transparent;
                       border-radius:8px; background:none; color:var(--sub);
                       font-weight:400; font-size:13px; }
  .ai-vendors button:hover { background:var(--hover); }
  .ai-vendors button[aria-selected="true"] { background:var(--hover); color:var(--ink);
                                             font-weight:700; border-color:var(--line); }
  .ai-vendors .num { margin-left:auto; font-size:12px; color:var(--sub); font-weight:400; }
  .ai-models { flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; }

  /* ★狭い画面では会社を横一列にする★
     縦の仕切りを残すと、375px では中身の幅が半分以下になって読めない */
  @media (max-width: 560px) {
    .ai-wrap { flex-direction:column; }
    .ai-vendors { flex-direction:row; flex:none; width:100%; overflow-x:auto;
                  padding-bottom:4px; }
    .ai-vendors button { width:auto; white-space:nowrap; }
    .ai-vendors .num { margin-left:4px; }
  }

  /* えがくAI のカード（画像の画面・D-114）
     ★横に並べて、そのまま押せるようにする★
     窓を開かせると、選ぶのに2回押させることになる（素材の選び方と同じ考え） */
  .cards { display:grid; gap:8px; margin-top:4px;
           grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
  /* ★横スクロールの帯★（D-194）場所・動きのプリセット。
     格子だと1機能で画面を500px近く占有していた（2026-09-10 オーナー指摘）。
     帯なら1行90pxで、増やしても場所を取らない */
  .presetStrip { display:flex; gap:8px; margin-top:6px; overflow-x:auto; padding:4px 2px;
                 -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  /* ★セルは縦長★（2026-09-10 オーナー指摘）横長セルに縦長の全身を入れると
     中央クロップで「胴のドアップ」だけが並び、どの動きか分からなかった */
  .presetStrip button { flex:none; width:78px; padding:0; border:2px solid var(--line);
                        border-radius:10px; background:var(--card); color:var(--ink);
                        overflow:hidden; cursor:pointer;
                        position:relative; /* 秒数バッジの基準（2026-09-11） */ }
  /* 見本は枠が小さいので、バッジも一回り小さく */
  .presetStrip .durBadge { font-size:10px; padding:3px 6px; top:4px; right:4px; }
  .presetStrip button img,
  .presetStrip button video { display:block; width:100%; height:108px;
                              object-fit:cover; object-position:top; }
  .presetStrip button span { display:block; font-size:10.5px; padding:4px 3px 5px; text-align:center;
                             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .presetStrip button.on { border-color:var(--gold); }
  .presetStrip button:hover { background:var(--hover); }
  .cards button { display:flex; align-items:flex-start; gap:10px; text-align:left;
                  padding:11px 13px; border:1px solid var(--line); border-radius:10px;
                  background:var(--card); color:var(--ink); font-weight:400; }
  .cards button:hover { background:var(--hover); }
  /* ★選ばれているものを、色だけに頼らず示す★ 枠も太くする */
  .cards button[aria-pressed="true"] { border-color:var(--gold); border-width:2px;
                                       padding:10px 12px; background:var(--hover); }
  .cards .nm { font-weight:700; font-size:14px; }
  .cards .ds { font-size:12px; color:var(--sub); line-height:1.5; margin-top:2px; }
  .cards .pr { font-size:12px; color:var(--gold); font-weight:700; white-space:nowrap;
               margin-top:3px; }
  .cards .body { flex:1; min-width:0; }
  /* ★選ばれているものに印を付ける★ 枠の色だけだと、色が見えにくい人に伝わらない */
  .cards .tick { color:var(--gold); font-weight:700; font-size:15px; }
  /* ★作り手の作例サムネイル★（2026-09-04・D-147）
     文の説明より絵1枚。作例（provider付き）が無い作り手は文字だけのまま */
  /* ★96px に拡大★（2026-09-16 利用者のデザイナーさんの提案・オーナー判断 A）見本は「顔を左・背景を右」の正方形で作り直す */
  .cards .thumb { flex:none; width:96px; height:96px; object-fit:cover;
                  /* ★上寄せで切り取る★ 作例は縦長で顔が上にあるので、
                     真ん中で切ると頭が見切れる（2026-09-05 オーナー指摘） */
                  object-position: top;
                  border-radius:8px; border:1px solid var(--line); }

  /* つくるものを選ぶ（☰）。★D-114★
     動画と画像は別サービスだが、会員もコインも同じなので行き来できる */
  #svcBox { position:fixed; inset:0; background:var(--shade); display:none;
            align-items:center; justify-content:center; z-index:85; padding:20px; }
  #svcBox.on { display:flex; }
  #svcBox .inner { background:var(--card); border-radius:12px; padding:22px;
                   max-width:360px; width:100%; }
  /* ★いま見ているほうが分かるようにする★
     押しても同じ場所なら、押した人は壊れたと思う */
  .svc { display:flex; align-items:center; gap:14px; padding:14px;
         border:1px solid var(--line); border-radius:10px; margin-top:10px;
         text-decoration:none; color:var(--ink); background:var(--card); }
  .svc:hover { background:var(--hover); }
  .svc[aria-current="page"] { border-color:var(--gold); background:var(--hover); }
  /* ★近日公開★（2026-09-03）押せない・薄く。hover でも反応しない */
  .svc.soon { opacity:.55; cursor:default; }
  .svc.soon:hover { background:var(--card); }
  /* ★☰に文字を添える★ 狭い画面では印だけに戻す（ヘッダが2段に折れるため） */
  .svc-ico { font-size:26px; line-height:1; flex:none; }
  .svc-txt { display:flex; flex-direction:column; gap:3px; }
  .svc-txt small { color:var(--sub); font-size:12px; }

  /* じぶん（プロフィール＋設定） */
  #settingsBox { position:fixed; inset:0; background:var(--shade); display:none;
                 align-items:center; justify-content:center; z-index:80; padding:20px; }
  #settingsBox.on { display:flex; }
  /* ★中身が伸びるので高さを止める★ 履歴を入れると画面からはみ出す */
  #settingsBox .inner { background:var(--card); border-radius:12px; padding:22px;
                        max-width:400px; width:100%; max-height:86vh; overflow:auto; }

  /* ヘッダのアイコン。★画像が無い人もいる★ ので頭文字で代用する */

  .prof-head { display:flex; align-items:center; gap:12px; margin-bottom:4px; }
  .prof-head img, .prof-head .letter { width:48px; height:48px; border-radius:50%;
                                       object-fit:cover; flex:none; }
  .prof-head .letter { background:var(--gold); color:#fff; font-size:20px; font-weight:700;
                       display:flex; align-items:center; justify-content:center; }
  .prof-sec { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
  .prof-sec h3 { font-size:12px; color:var(--sub); font-weight:400; margin:0 0 8px; }
  #profBalance { font-size:24px; color:var(--gold); font-weight:700; }
  #profRefUrl { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
  #profHistory div { display:flex; justify-content:space-between; gap:10px; font-size:12px;
                     padding:5px 0; border-bottom:1px solid var(--line); }
  #profHistory .minus { color:var(--sub); }
  #profHistory .plus { color:var(--gold); }
  #profHistory .cnt { color:var(--sub); margin-left:4px; }
  /* 畳んだ「コインの動き」。見出しと同じ見た目で、押せることが分かるよう右に ▸ */
  #profHistBox > summary { list-style:none; cursor:pointer; font-size:12px; color:var(--sub);
                           display:flex; align-items:center; justify-content:space-between;
                           padding:4px 0; }
  #profHistBox > summary::-webkit-details-marker { display:none; }
  #profHistBox > summary::after { content:'▸'; font-size:13px; transition:transform .15s; }
  #profHistBox[open] > summary { margin-bottom:6px; }
  #profHistBox[open] > summary::after { transform:rotate(90deg); }
  #profHistMore { margin-top:8px; width:100%; }

  /* 報告 */
  #reportBox { position:fixed; inset:0; background:var(--shade); display:none;
               align-items:center; justify-content:center; z-index:70; padding:20px; }
  #reportBox.on { display:flex; }
  #reportBox .inner { background:var(--card); border-radius:12px; padding:22px; max-width:480px;
                      width:100%; max-height:86vh; overflow:auto; }
  #reportReasons { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
  #reportReasons label { display:flex; align-items:center; gap:8px; font-size:13px;
                         color:var(--ink); margin:0; cursor:pointer; }
  label.inline { display:flex; align-items:center; gap:8px; font-size:13px;
                 color:var(--ink); margin-top:12px; cursor:pointer; }
  .grid .acts .report { color:var(--sub); }

  /* コインを買う */
  #buyBox { position:fixed; inset:0; background:var(--shade); display:none;
            align-items:center; justify-content:center; z-index:60; padding:20px; }
  #buyBox.on { display:flex; }
  #buyBox .inner { background:var(--card); border-radius:12px; padding:22px; max-width:760px;
                   width:100%; max-height:86vh; overflow:auto; }
  #packs { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
           gap:12px; margin:14px 0; }
  #packs .pack { border:1px solid var(--line); border-radius:12px; padding:16px 12px;
                 text-align:center; position:relative; background:var(--card); }
  #packs .pack.best { border-color:var(--gold); }
  #packs .badge { position:absolute; top:-9px; left:50%; transform:translateX(-50%);
                  background:var(--gold); color:var(--onGold); font-size:11px; font-weight:700;
                  padding:2px 10px; border-radius:99px; white-space:nowrap; }
  #packs .coins { font-size:20px; font-weight:700; }
  #packs .unit { font-size:11px; color:var(--sub); }
  #packs .usd { font-size:18px; font-weight:700; margin-top:8px; }
  #packs .videos { font-size:11px; color:var(--sub); margin-top:6px; }
  #packs .pack button { width:100%; margin-top:12px; font-size:13px; padding:8px; }

  /* 月額。★一番来てほしいので大きく★ */
  /* ★ふだんは控えめ★ 3枚とも金枠だと、全部目立って どれも目立たない。
     対比は「他を落とす」ことでしか作れない（D-106） */
  .plan { border:1px solid var(--line); border-radius:12px; padding:18px; margin-top:12px;
          background:var(--card); }
  /* ★おすすめの1枚だけ金枠★ ここに目が行くようにする */
  .plan.hero { border:2px solid var(--gold);
          background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 8%,var(--card)),var(--card)); }
  .plan:not(.hero) .plan-name { color:var(--ink); }
  .plan:not(.hero) > .badge { background:var(--sub); }
  /* ★どの言語でも書ける★（D-110）入力欄のすぐ下に、控えめに置く。
     大きくすると本文の邪魔になるが、無いと日本語専用だと思われる */
  .langNote { font-size:12px; color:var(--sub); margin:6px 0 0; line-height:1.7; }

  /* 共通の特典は、カードの外に1行だけ */
  .plan-common { font-size:13px; color:var(--sub); margin:4px 0 0; }
  .plan-common b { color:var(--ink); }

  /* ★コインが足りないときの案内★（D-107）
     赤い警告にしない。**買えば続けられる**という案内なので、
     叱られている感じにならないよう金色の枠で置く */
  #shortBox { border:2px solid var(--gold); border-radius:12px; padding:16px; margin-top:12px;
              background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 10%,var(--card)),var(--card)); }
  .shortTitle { font-weight:700; font-size:15px; }
  .shortSub { font-size:13px; color:var(--sub); margin:6px 0 12px; line-height:1.8; }
  .shortSub b { color:var(--ink); }
  .shortBtns { display:flex; gap:8px; flex-wrap:wrap; }
  #shortBox button { padding:10px 18px; border-radius:8px; border:1px solid var(--line);
                     background:var(--card); color:var(--ink); cursor:pointer; font-weight:700; }
  #shortBox button.gold { background:var(--gold); border-color:var(--gold); color:#2b2724; }
  /* ★保存期間が終わった作品★（D-103）消さずに、理由を出して置いておく */
  #works figure.expired { opacity:.85; }
  #works .gone { display:flex; flex-direction:column; align-items:center; justify-content:center;
                 gap:4px; background:var(--line); border-radius:8px; text-align:center;
                 padding:10px; font-size:12px; color:var(--sub); }
  #works .gone b { color:var(--ink); font-size:13px; }
  #works .goneIcon { font-size:26px; line-height:1; }
  #works .goneSub { font-size:11px; line-height:1.5; }
  #works button.off, #works a.off { opacity:.4; pointer-events:none; }

  .plan { position:relative; }
  /* ★3段を並べる★（D-102）2つ目からは間を空ける */
  .plan + .plan { margin-top:18px; }
  /* いま入っているプランは、枠を落ち着かせて「選ぶもの」から外す */
  .plan.mine { border-color:var(--line); }
  .plan.mine > .badge { background:var(--sub); }
  .plan > .badge { position:absolute; top:-11px; left:18px; background:var(--gold);
                   color:var(--onGold); font-size:11px; font-weight:700;
                   padding:3px 10px; border-radius:999px; }
  .plan-name { font-weight:700; color:var(--gold); letter-spacing:.06em; }
  .plan-yen { font-size:30px; font-weight:700; margin:4px 0; }
  .plan-yen span { font-size:14px; font-weight:400; color:var(--sub); }
  .plan-coins { font-size:14px; }
  /* ★得になる点は目立たせる★ 値段の差だけでは入る理由にならない */
  .plan-lead { font-size:13px; margin-top:6px; }
  .plan-lead b { color:var(--gold); }
  .plan-perks { margin:10px 0 0; padding-left:1.2em; font-size:13px; line-height:1.9; }
  .plan-perks b { color:var(--ink); }
  .plan-note { font-size:12px; color:var(--sub); margin-top:6px; }
  .plan button { margin-top:12px; padding:10px 24px; }
  #packs .yen { font-size:18px; font-weight:700; margin-top:8px; }
  /* 加入者への増量。増えていることが分かるように */
  #packs .bonus { color:var(--gold); font-weight:700; }

  /* ★増量前の枚数に二重線★
     ★消していいのは「枚数」だけ。値段には絶対に使わないこと★
     景品表示法の二重価格表示は、消し線にする価格に実際の販売実績（8週間の
     うち過半）が要る。売った実績のない値段を消すと有利誤認表示になる。
     枚数は「加入していない人が実際に受け取る本物の数」なので、
     消しても実態と食い違わない。 */
  #packs .was { font-size:13px; color:var(--sub); text-decoration:line-through;
                text-decoration-thickness:1.5px; line-height:1.3; }
  #packs .up { font-size:11px; color:var(--gold); font-weight:700; margin-top:2px; }

  /* プロンプトの全文 */
  #promptBox { position:fixed; inset:0; background:var(--shade); display:none;
               align-items:center; justify-content:center; z-index:60; padding:20px; }
  #promptBox.on { display:flex; }
  #promptBox .inner { background:var(--card); border-radius:12px; padding:20px; max-width:560px;
                      width:100%; max-height:80vh; overflow:auto; }
  #promptBox .text { white-space:pre-wrap; word-break:break-word; font-size:14px;
                     line-height:1.7; margin:12px 0 18px; }

  /* 拡大表示 */
  #lightbox { position:fixed; inset:0; background:var(--shade); display:none;
              /* ★どの窓より前★ 作り手を選ぶ窓（z-index:86）の見本から開くので、それより上（2026-09-16 実害: 後ろに出た） */
              align-items:center; justify-content:center; z-index:200; cursor:zoom-out; }
  #lightbox.on { display:flex; }
  #lightbox > * { max-width:94vw; max-height:92vh; }
  #lightbox .close { position:absolute; top:14px; right:20px; color:#fff; font-size:28px;
                     background:none; border:0; cursor:pointer; }
  .hidden { display:none; }
  /* ★直し方のボタン（D-290）★ id は .hidden より強いので :not(.hidden) で書く（D-286 と同じ罠） */
  #editChips:not(.hidden) { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px; }
  #editChips button { padding:6px 12px; border-radius:16px; font-size:13px; cursor:pointer;
    border:1px solid var(--line); background:transparent; color:var(--ink); }
  .center { text-align:center; padding:48px 20px; }
  .err { color:var(--bad); font-size:13px; margin-top:8px; }

  /* ★「作る」を主役に★（2026-09-16 オーナー要望 → 2回目: 値段はボタンのすぐ隣・縁と光は控えめに）
     右寄せで値段→ボタンの順。スマホでも1行。金のグラデーションと薄い影だけで目立たせる */
  #goRow { display:flex; flex-direction:row-reverse; align-items:center; justify-content:flex-start;
           gap:14px; margin-top:18px; }
  #goRow #go { font-size:16px; font-weight:700; letter-spacing:.08em; padding:12px 40px; border-radius:12px;
               border:1px solid rgba(255,255,255,.22);
               background:linear-gradient(180deg, #f1d27a 0%, var(--gold) 55%, #b8933f 100%);
               color:#1e1a12; box-shadow:0 6px 18px rgba(202,166,75,.32), inset 0 1px 0 rgba(255,255,255,.35);
               transition:transform .08s, box-shadow .15s, filter .15s; }
  #goRow #go:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.05);
               box-shadow:0 8px 22px rgba(202,166,75,.42), inset 0 1px 0 rgba(255,255,255,.35); }
  #goRow #go:active:not(:disabled) { transform:translateY(0); box-shadow:0 3px 10px rgba(202,166,75,.3); }
  #goRow #go:disabled { opacity:.5; box-shadow:none; transform:none; filter:none; }
  #goRow .price { text-align:right; }

  /* ★ログインボーナスの手応え★（2026-09-16 オーナー判断: 派手ではなく「押した瞬間だけ気持ちいい」）
     ポンッ … 押したスタンプが少し膨らんで戻る
     +N    … もらった数がボタンの上にふわっと浮いて消える
     7日目 … 金の粒が散る（毎日ではなく週1の山） */
  #stampCard { position:relative; overflow:hidden; }
  #stampRow .s.pop { animation:stampPop .5s cubic-bezier(.2,1.4,.4,1); }
  @keyframes stampPop { 0% { transform:scale(.6); } 60% { transform:scale(1.18); } 100% { transform:scale(1); } }
  .floatCoin { position:absolute; pointer-events:none; font-weight:700; color:var(--gold); font-size:15px;
               text-shadow:0 1px 2px rgba(0,0,0,.4); animation:floatUp 1.2s ease-out forwards; }
  @keyframes floatUp { 0% { opacity:0; transform:translateY(6px); } 15% { opacity:1; } 100% { opacity:0; transform:translateY(-34px); } }
  .spark { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--gold); pointer-events:none;
           box-shadow:0 0 6px var(--gold); animation:sparkFly 1s ease-out forwards; }
  @keyframes sparkFly { 0% { opacity:1; transform:translate(0,0) scale(1); } 100% { opacity:0; transform:translate(var(--dx), var(--dy)) scale(.3); } }
  #coin.tick { animation:coinTick .35s ease-out; }
  @keyframes coinTick { 0% { transform:scale(1); } 40% { transform:scale(1.08); color:#f1d27a; } 100% { transform:scale(1); } }

  /* ★プランのログインボーナスを目立たせる★（2026-09-16 オーナー指摘） */
  #planBox li.perkBonus { color:var(--gold); background:rgba(202,166,75,.12); border-radius:8px; padding:4px 8px; margin:4px 0 4px -8px; list-style:none; }
