/* =========================================================
   背景画像プロンプト生成ツール — style.css（ダーク版）

   ▼ このフォルダだけで完結する見た目です（サイト共通のCSSは読み込みません）。
     ヘッダー・フッター・ボタン・文字の大きさは、トップページと同じ作りで、
     色だけを反転させています。
   ▼ 調整はまず「1. 設定」の数値だけを変えてください。
   ========================================================= */


/* =========================================================
   1. 設定
   ========================================================= */
:root{
  /* 色（ダーク） */
  --bg:#0a1324;                         /* ページの背景（bg.js の残像色もこれに合わせる） */
  --surface:#111c33;                    /* 透けさせない面 */
  --glass:rgb(17 28 51 / .72);          /* カードの面（背景がうっすら透ける） */
  --glass-strong:rgb(17 28 51 / .9);    /* プレビュー・フッター */
  --soft:rgb(255 255 255 / .07);        /* ボタン・入力欄 */
  --soft-hover:rgb(255 255 255 / .13);
  --line:rgb(255 255 255 / .09);        /* 区切り線 */
  --heading:#f4f7ff;                    /* 見出し */
  --text:#d5ddec;                       /* 本文 */
  --muted:#8f9cb6;                      /* 補足 */
  --accent:#6b9bff;                     /* リンク・強調 */
  --accent-strong:#3f7bff;              /* 濃いボタン */
  --accent-soft:rgb(107 155 255 / .16);
  --code:#050b17;                       /* プロンプト欄 */

  /* フォント（トップページと同じ） */
  --font:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --font-en:"Oswald","Zen Kaku Gothic New",Impact,sans-serif;

  /* 文字サイズ */
  --fs-h2:30px;
  --fs-h3:16px;
  --fs-body:14px;
  --fs-sm:12.5px;
  --fs-xs:11px;
  --fs-kicker:13px;

  /* 余白・形 */
  --sp-section:36px;
  --pad:32px;
  --radius:16px;
  --radius-sm:12px;
  --hd:64px;

  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:1199px){ :root{ --fs-h2:26px; --pad:40px; } }
@media (max-width:900px){ :root{ --pad:28px; } }
@media (max-width:767px){
  :root{ --fs-h2:22px; --fs-h3:14px; --fs-sm:12px; --fs-xs:10.5px; --fs-kicker:12px; --pad:16px; --hd:56px; }
}


/* =========================================================
   2. 基本
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px);-webkit-text-size-adjust:100%;color-scheme:dark}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  font-size:var(--fs-body);line-height:1.75;letter-spacing:.04em;font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{border:0;background:none;cursor:pointer}
ol,ul{list-style:none}
h1,h2,h3{font-weight:700;color:var(--heading)}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--accent-strong);color:#fff;font-size:13px;transition:top .2s}
.skip:focus{top:10px}

/* 動く背景（bg.js が作るキャンバス） */
.fm-bg{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none}

/* 共通パーツ */
.kicker{display:block;font:500 var(--fs-kicker)/1 var(--font-en);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.btn-dark{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;height:50px;padding:0 30px;border-radius:999px;
  background:var(--accent-strong);color:#fff;font-size:14px;font-weight:700;letter-spacing:.1em;white-space:nowrap;
  transition:background .3s,box-shadow .3s;
}
.btn-dark span{font-family:var(--font-en);transition:transform .3s var(--ease)}
.btn-dark:hover{background:#5a8dff;box-shadow:0 10px 28px -10px rgb(63 123 255 / .7)}
.btn-dark:hover span{transform:translateX(4px)}
.btn-sm{height:40px;padding:0 22px;font-size:12.5px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--heading);background:var(--soft);transition:background .2s}
.btn-ghost:hover{background:var(--soft-hover)}


/* =========================================================
   3. ヘッダー・パンくず・フッター（トップページと同じ作り）
   ========================================================= */
.hd{
  position:sticky;top:0;z-index:60;height:var(--hd);
  display:flex;align-items:center;gap:56px;padding:0 var(--pad);
  background:rgb(10 19 36 / .72);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;font:700 24px/1 var(--font-en);letter-spacing:.02em;text-transform:uppercase;color:var(--heading);white-space:nowrap}
.logo img{display:block;height:32px;width:auto}
.hd .logo img{filter:brightness(0) invert(1)}   /* 黒いロゴを白に反転 */
.hd-nav{display:flex;gap:36px;height:100%}
.hd-nav a{display:flex;align-items:center;font-size:13.5px;font-weight:500;color:var(--muted);transition:color .2s}
.hd-nav a:hover{color:var(--heading)}
.page-back{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--heading);background:var(--soft);transition:background .2s;
}
.page-back span{font-family:var(--font-en);transition:transform .3s var(--ease)}
.page-back:hover{background:var(--soft-hover)}
.page-back:hover span{transform:translateX(3px)}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.crumb span[aria-hidden]{color:#4a5874}

.ft{display:flex;align-items:center;flex-wrap:wrap;gap:16px 40px;padding:28px var(--pad);background:var(--glass-strong);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.ft .logo{font-size:18px}
.ft .logo img{height:24px;filter:brightness(0) invert(1)}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--text)}
.ft nav a:hover{color:var(--accent)}
.ft small{flex-basis:100%;font:400 12px var(--font-en);letter-spacing:.06em}

.toast{
  position:fixed;left:50%;bottom:24px;z-index:90;translate:-50% 0;max-width:calc(100% - 32px);
  padding:12px 22px;border-radius:999px;background:#f4f7ff;color:#0a1324;font-size:13px;font-weight:700;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease);
}
.toast.show{opacity:1;transform:none}


/* =========================================================
   4. ページ
   ========================================================= */
.pg{max-width:1360px;margin:0 auto;padding:24px var(--pad) calc(var(--sp-section) * 2)}

.pg-hero{padding:32px 0 24px;max-width:820px}
.pg-hero h1{font-size:clamp(28px,3.4vw,44px);line-height:1.3;letter-spacing:.04em;margin-bottom:14px}
.pg-lead{font-size:var(--fs-body);line-height:1.9;color:var(--text)}
.pg-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pg-badges li{padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft)}

/* おすすめ・おまかせ */
.quick{margin-bottom:20px}
.quick-h{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}
.quick-row{display:flex;flex-wrap:wrap;gap:8px}
.presets{display:contents}
.preset{
  height:36px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:700;
  color:var(--heading);background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .2s,color .2s,box-shadow .2s;
}
.preset:hover{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px rgb(107 155 255 / .35)}
.preset-rnd{color:#fff;background:var(--accent-strong);box-shadow:none}
.preset-rnd:hover{background:#5a8dff;color:#fff;box-shadow:none}


/* =========================================================
   5. ジェネレーター（左：項目／右：プレビュー）
   ========================================================= */
.gen{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:28px;align-items:start}
.gen-main{min-width:0}

/* 検索＋カテゴリナビ（スクロールしても上に残る） */
.gen-tools{
  position:sticky;top:var(--hd);z-index:20;margin:0 -8px 12px;padding:10px 8px;
  background:rgb(10 19 36 / .82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:0 0 var(--radius) var(--radius);
}
.search{display:flex;align-items:center;gap:8px;height:42px;padding:0 6px 0 16px;border-radius:999px;background:var(--soft);color:var(--muted)}
.search:focus-within{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent)}
.search .i{width:16px;height:16px}
.search input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:14px;color:var(--heading)}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-cancel-button{display:none}
.search-clear{width:30px;height:30px;border-radius:50%;font-size:16px;color:var(--muted)}
.search-clear:hover{background:var(--soft-hover)}
.search:has(input:placeholder-shown) .search-clear{visibility:hidden}

.cat-nav{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.cat-nav::-webkit-scrollbar{display:none}
.cnav{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 6px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap;transition:background .2s,color .2s;
}
.cnav:hover{background:var(--soft)}
.cnav.is-active{background:var(--heading);color:var(--bg)}
.cnav-n{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:600 11px/1 var(--font-en);background:var(--soft);color:var(--muted)}
.cnav.is-active .cnav-n{background:rgb(10 19 36 / .12);color:var(--bg)}
.cnav-c[hidden],.ptab-c[hidden]{display:none}
.cnav-c{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font:600 10.5px/1 var(--font-en);color:#fff;background:var(--accent-strong)}

/* カテゴリのカード */
.gcard{padding:22px 24px 8px;border-radius:var(--radius);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:14px;scroll-margin-top:calc(var(--hd) + 120px)}
.gcard-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.gcard-hd h2{display:flex;align-items:center;gap:10px;font-size:var(--fs-h3);letter-spacing:.06em}
.gcard-n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:600 12px/1 var(--font-en);color:#fff;background:var(--accent-strong)}
.gcard-clear{height:28px;padding:0 12px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--soft)}
.gcard-clear:hover{color:var(--heading);background:var(--soft-hover)}
.gcard-desc{font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px}

/* グループ */
.grp{padding:12px 0 14px}
.grp + .grp{border-top:1px solid var(--line)}
.grp-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.grp-label{font-size:13px;font-weight:700;color:var(--heading)}
.grp-type{font-size:11px;color:var(--muted)}

/* 選択ボタン */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  min-height:32px;padding:4px 13px;border-radius:999px;font-size:13px;line-height:1.5;
  color:var(--text);background:var(--soft);transition:background .15s,color .15s,box-shadow .15s;
}
.chip:hover{background:var(--soft-hover);color:var(--heading)}
.chip[aria-pressed="true"]{color:#fff;background:var(--accent-strong);box-shadow:0 0 0 1px rgb(107 155 255 / .5),0 4px 14px -4px rgb(63 123 255 / .7)}
.chip[aria-pressed="true"]::before{content:"✓ ";font-size:11px}

/* 場所のタブ */
.ptabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:6px 0 8px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.ptabs::-webkit-scrollbar{display:none}
.ptab{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;
  font-size:12.5px;font-weight:700;color:var(--muted);transition:background .2s,color .2s;
}
.ptab:hover{color:var(--heading);background:var(--soft)}
.ptab[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
.ptab-c{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font:600 10.5px/1 var(--font-en);color:#fff;background:var(--accent-strong)}

/* 自由入力 */
.extra{
  width:100%;min-height:64px;padding:10px 14px;border:0;border-radius:10px;background:var(--soft);color:var(--heading);
  font-size:14px;line-height:1.7;resize:vertical;
}
.extra::placeholder{color:var(--muted)}
.extra:focus{outline:0;background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent)}

/* 検索中：タブを外して、当てはまる項目を全部見せる */
.gen-form.is-search .ptabs{display:none}
.gen-form.is-search .ptab-panel{display:block !important}
.gen-form.is-search .gcard-desc{display:none}
.search-empty{padding:40px 20px;text-align:center;color:var(--muted);border-radius:var(--radius);background:var(--glass)}


/* ---------- プレビュー ---------- */
.preview{position:sticky;top:calc(var(--hd) + 12px);scroll-margin-top:calc(var(--hd) + 12px)}
.pv-card{padding:20px;border-radius:var(--radius);background:var(--glass-strong);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -24px rgb(0 0 0 / .6)}
.pv-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.pv-hd h2{font-size:var(--fs-h3);letter-spacing:.06em}
.pv-count{font:500 11px var(--font-en);letter-spacing:.06em;color:var(--muted)}

/* 出力形式・言語の切り替え */
.pv-opts{display:grid;gap:8px;margin-bottom:10px}
.seg{display:flex;align-items:center;gap:10px}
.seg-label{flex-shrink:0;width:64px;font-size:11.5px;font-weight:700;color:var(--muted)}
.seg-btns{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:3px;border-radius:12px;background:var(--soft)}
.seg-btn{min-height:30px;padding:3px 10px;border-radius:9px;font-size:12px;font-weight:700;background:transparent;color:var(--muted)}
.seg-btn:hover{background:var(--soft);color:var(--heading)}
.seg-btn[aria-pressed="true"]{background:var(--heading);color:var(--bg);box-shadow:none}
.seg-btn[aria-pressed="true"]::before{content:none}
.pv-note{font-size:11.5px;color:var(--muted);margin:-2px 0 8px}

/* プロンプト本体 */
.pv-prompt{
  max-height:min(46vh,420px);min-height:180px;overflow:auto;margin:0 0 12px;padding:16px;border-radius:12px;
  font:13px/1.75 ui-monospace,"SFMono-Regular",Consolas,"Hiragino Sans",monospace;white-space:pre-wrap;word-break:break-word;
  color:#dfe7f7;background:var(--code);box-shadow:inset 0 0 0 1px var(--line);
  scrollbar-width:thin;scrollbar-color:#2c3a58 transparent;
}
.pv-actions{display:flex;gap:8px}
.pv-copy{flex:1}
.pv-actions .btn-ghost{flex-shrink:0;height:50px}

/* 選択中の一覧 */
.pv-sel{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pv-sel-h{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.pv-sel-h b{font-family:var(--font-en);color:var(--accent)}
.sel-list{display:flex;flex-wrap:wrap;gap:6px;max-height:140px;overflow:auto}
.sel-chip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 11px;border-radius:999px;
  font-size:12px;color:var(--heading);background:var(--accent-soft);transition:background .2s;
}
.sel-chip span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:12px;color:var(--accent)}
.sel-chip:hover{background:rgb(107 155 255 / .28)}
.sel-empty{font-size:12px;color:var(--muted)}
.pv-legal{margin-top:14px;font-size:10.5px;line-height:1.7;color:var(--muted)}
.pv-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

.pv-banner{display:block;margin-top:14px;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease)}
.pv-banner:hover{transform:translateY(-2px)}
.pv-banner img{display:block;width:100%;height:auto;aspect-ratio:557 / 112;object-fit:cover}


/* =========================================================
   6. 使い方・解説・よくある質問
   ========================================================= */
.guide-sec{max-width:820px;padding-top:calc(var(--sp-section) * 1.5);scroll-margin-top:calc(var(--hd) + 16px)}
.guide-sec h2{font-size:var(--fs-h2);letter-spacing:.06em;margin-bottom:18px}
.howto{list-style:none;counter-reset:s;display:grid;gap:10px}
.howto li{position:relative;counter-increment:s;display:grid;gap:4px;padding:16px 18px 16px 62px;border-radius:var(--radius-sm);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.howto li::before{
  content:counter(s);position:absolute;left:18px;top:16px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font:600 14px/1 var(--font-en);color:#fff;background:var(--accent-strong);
}
.howto b{font-size:14.5px;color:var(--heading)}
.howto span{font-size:var(--fs-sm);line-height:1.8;color:var(--text)}
.about{display:grid;gap:12px;padding:20px 22px;border-radius:var(--radius);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.about p{font-size:var(--fs-body);line-height:1.95}

/* よくある質問（開閉式） */
.faq{border-radius:var(--radius-sm);background:var(--glass);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:8px}
.faq summary{
  position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px 52px 16px 18px;cursor:pointer;list-style:none;
  font-size:var(--fs-body);font-weight:700;line-height:1.6;color:var(--heading);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:20px;top:50%;width:12px;height:2px;border-radius:2px;background:var(--muted);transition:transform .3s var(--ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq[open] summary::after{transform:rotate(0)}
.faq summary:hover{color:var(--accent)}
.faq-q{flex-shrink:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:600 12px/1 var(--font-en);color:#fff;background:var(--accent-strong);margin-top:1px}
.faq-a{padding:0 18px 18px 56px;font-size:var(--fs-body);line-height:1.9}

/* ほかのアプリへ */
.doc-contact{
  display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:820px;margin-top:calc(var(--sp-section) * 1.5);
  padding:24px 28px;border-radius:var(--radius);background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgb(107 155 255 / .25);
}
.doc-contact h2{font-size:var(--fs-h3);letter-spacing:.06em;margin-bottom:4px}
.doc-contact p{font-size:var(--fs-sm);color:var(--text)}


/* =========================================================
   7. タブレット・スマホ
   ========================================================= */
.mbar{display:none}

@media (max-width:1099px){
  .gen{grid-template-columns:minmax(0,1fr)}
  .preview{position:static}
  .pv-prompt{max-height:none}

  .mbar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;
    padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background:rgb(10 19 36 / .9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);
  }
  .mbar-view{flex:1;height:46px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--heading);background:var(--soft)}
  .mbar-view b{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-left:6px;padding:0 6px;border-radius:999px;font:600 11.5px/1 var(--font-en);color:#fff;background:var(--accent-strong)}
  .mbar-copy{width:120px;height:46px;border-radius:999px;font-size:13.5px;font-weight:700;color:#fff;background:var(--accent-strong)}
  body.has-mbar{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  body.has-mbar .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .hd{gap:40px}
  .hd-nav{gap:28px}
}

@media (max-width:767px){
  .hd{gap:10px}
  .hd-nav{display:none}
  .logo{font-size:21px}
  .logo img{height:28px}

  .pg{padding-top:16px}
  .pg-hero{padding:24px 0 18px}
  .gen-tools{margin:0 calc(var(--pad) * -1) 10px;padding:8px var(--pad);border-radius:0}
  .gcard{padding:18px 16px 6px}
  .chip{font-size:12.5px;padding:4px 11px}
  .seg{flex-direction:column;align-items:stretch;gap:4px}
  .seg-label{width:auto}
  .pv-card{padding:16px}
  .pv-actions{flex-wrap:wrap}
  .pv-copy{flex-basis:100%}
  .pv-actions .btn-ghost{flex:1;height:42px}
  .howto li{padding:14px 14px 14px 56px}
  .howto li::before{left:14px;top:14px}
  .faq summary{padding:14px 44px 14px 14px;gap:10px}
  .faq summary::before,.faq summary::after{right:16px}
  .faq-a{padding:0 14px 16px 48px}
  .doc-contact{flex-direction:column;align-items:flex-start;padding:20px}
  .ft{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}