/*
 * [kprompts] の公開画面。
 *
 * テーマ(JIN)のスタイルに依存しない自己完結した指定にしてある。継承しているのはフォントだけ。
 * テーマ側の .post-content の指定に負けないよう、必要な箇所は .kp-root を親に付けて
 * 詳細度を上げている（!important は使わない）。
 *
 * 本文の寸法について:
 *   プロンプト本文はページ中でいちばん長い日本語の文章で、「見る」ものではなく「読む」もの。
 *   target_gap 版では周囲の数値表に合わせて小さく・低コントラストにしてしまい、
 *   読みづらいという指摘を受けて作り直した経緯がある。ここでは最初から
 *   周囲の本文より小さくせず、行間を広めに取る。
 */

.kp-root {
  --kp-accent: #3b4675;      /* サイトのブランド色（ヘッダと同じ） */
  --kp-text: #2b3242;
  --kp-muted: #6b7280;
  --kp-border: #e2e5ee;
  --kp-surface: #ffffff;
  --kp-surface2: #f7f8fb;
  margin: 32px 0 36px;
  color: var(--kp-text);
  font-family: inherit;
}

/* ── テーマ(JIN)の見出し装飾を打ち消す ─────────────────────────────
   JIN は本文の見出しを body クラス（h2-style02 / h3-style02）で装飾している:

     .h3-style02 h3:before / :after … left:0 に 5px の帯を絶対配置（赤＋黒50%）
     .h2-style02 h2:before          … 見出しの全面に 5% の黒を敷く
     .h3-style02 h3                 … padding: 10px 15px（＝この帯を避けるための余白）

   テーマ側は padding-left で帯を避けているが、こちらは自前の余白を持つため、
   打ち消さないと **帯が見出しの文字に重なる**（実際に重なった）。
   装飾を消したうえで、各見出しが padding / margin / border / background を
   すべて自分で指定する。どれか1つでも省くとテーマの値が残って崩れる。

   クラス名まで書いて詳細度を (0,2,0) にしてあるのは、読み込み順に依存させないため。
   いまは kp.css がテーマCSSより後に読まれるが、最小化・結合プラグインが入ると順序は変わりうる。 */
.kp-root .kp-title::before,
.kp-root .kp-title::after,
.kp-root .kp-card-title::before,
.kp-root .kp-card-title::after,
.kp-root .kp-gate-title::before,
.kp-root .kp-gate-title::after {
  content: none;
  display: none;
}

.kp-root .kp-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kp-accent);
  /* 見出しの上下は自分で決める（テーマは margin-top: 2rem を当ててくる）。
     セクション全体の上下余白は .kp-root 側に持たせている。 */
  margin: 0 0 6px;
  padding: 2px 0 2px 12px;
  border: none;
  border-left: 4px solid var(--kp-accent);
  background: none;
}

.kp-root .kp-lead {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--kp-muted);
  margin: 0 0 16px;
}

/* 760px の本文幅で2列、狭い画面では1列に落ちる */
.kp-root .kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.kp-root .kp-card {
  background: var(--kp-surface);
  border: 1px solid var(--kp-border);
  border-radius: 12px;
  padding: 16px 18px 15px;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.kp-root .kp-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kp-text);
  /* カード側の padding が余白を持つので、見出し自身は余白を持たない。
     テーマの padding: 10px 15px / margin-top: 2rem をここで打ち消している。 */
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.kp-root .kp-card-desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--kp-muted);
  margin: 5px 0 0;
}

/* 実際に送られる文面。カードより1段沈んだ面に置き、左のアクセント罫で
   「これがそのまま送られる」ことを示す。 */
.kp-root .kp-body {
  margin: 12px 0 14px;
  padding: 13px 15px;
  background: var(--kp-surface2);
  border: 1px solid var(--kp-border);
  border-left: 3px solid var(--kp-accent);
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: var(--kp-text);
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1 1 auto;
}

.kp-root .kp-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.kp-root .kp-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  /* 4つ（AI3社＋コピー）が本文幅760pxの2列レイアウトで1行に収まる寸法。
     ここを広げると「コピー」だけが次の行に落ちる。 */
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--kp-accent);
  background: var(--kp-accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.13s, background 0.13s;
}

.kp-root a.kp-btn:hover,
.kp-root a.kp-btn:focus {
  filter: brightness(1.15);
  color: #fff;
  text-decoration: none;
}

.kp-root .kp-btn-quiet,
.kp-root .kp-copy {
  background: var(--kp-surface);
  color: var(--kp-accent);
  font-weight: 500;
  border-color: #c8cddd;
}

.kp-root a.kp-btn-quiet:hover,
.kp-root a.kp-btn-quiet:focus {
  background: var(--kp-surface2);
  color: var(--kp-accent);
  filter: none;
}

.kp-root .kp-copy:hover {
  background: var(--kp-surface2);
}

/* コピーボタンは JS が動く環境でだけ出す（押しても何も起きないボタンを置かない）。
   kp.js が .kp-root に kp-js を付ける。 */
.kp-root .kp-copy { display: none; }
.kp-root.kp-js .kp-copy { display: inline-block; }

/* ── 非会員向け ────────────────────────────────────── */

.kp-root .kp-gate {
  background: var(--kp-surface2);
  border: 1px solid var(--kp-border);
  border-radius: 12px;
  padding: 22px 24px 20px;
}

.kp-root .kp-gate-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--kp-accent);
  /* 枠(.kp-gate)側が余白を持つので、見出し自身は余白を持たない。 */
  margin: 0 0 8px;
  padding: 0;
  border: none;
  background: none;
}

.kp-root .kp-gate-body {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--kp-text);
  margin: 0;
}

.kp-root .kp-teaser {
  list-style: none;
  margin: 14px 0 4px;
  padding: 0;
}

.kp-root .kp-teaser li {
  border-top: 1px solid var(--kp-border);
  padding: 9px 0 9px 20px;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.kp-root .kp-teaser li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kp-accent);
}

.kp-root .kp-teaser li span {
  display: block;
  font-size: 0.8rem;
  color: var(--kp-muted);
  margin-top: 2px;
}

.kp-root .kp-gate-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

@media (max-width: 600px) {
  .kp-root .kp-grid { grid-template-columns: 1fr; }
  .kp-root .kp-card { padding: 14px 15px; }
  .kp-root .kp-body { font-size: 0.92rem; padding: 12px 13px; }
}