/* =========================================================================
   GDOCK 第3層｜cat-solution.css — ソリューションカテゴリ（01〜04）
   置き場所：wp-content/themes/swell_gdock/assets/css/cat-solution.css
   functions.php の cat-{slug}.css 自動読み込みで、solution カテゴリの投稿だけに効く。
   スコープ：.post_content .gds の内側のみ（本文の外には触らない）

   SWELLの見出しはインライン<style>で後から来る。詳細度で上回り、
   打ち消すプロパティは background / padding / border 系を全部書く（実装メモ§2）。
   ========================================================================= */

.post_content .gds{
  --gds-ink: var(--ink, #14151a);
  --gds-sub: var(--ink-2, #4a4b55);
  --gds-mute: var(--ink-3, #8a8b95);
  --gds-line: var(--line, #e6e2dc);
  --gds-bg: var(--mist, #f6f4f1);
  --gds-or: var(--accent, #ff6a13);
  --gds-or-soft: #fff4ea;
  --gds-grad: var(--grad, linear-gradient(135deg,#ff5a1f,#ffab2e));
  --gds-r: var(--r-card, 8px);
  --gds-r-lg: var(--r-lg, 12px);
  --gds-r-chip: var(--r-chip, 2px);
  font-feature-settings: "palt";
}
.post_content .gds *{ box-sizing: border-box }

/* -------------------------------------------------------------------------
   1. SWELL 見出しデザインの打ち消し（h2 / h3 / h4）
   ------------------------------------------------------------------------- */
.post_content .gds h2,
.post_content .gds h3,
.post_content .gds h4{
  background: none;
  background-image: none;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--gds-ink);
  text-shadow: none;
  position: relative;
}
.post_content .gds h2::before, .post_content .gds h2::after,
.post_content .gds h3::before, .post_content .gds h3::after,
.post_content .gds h4::before, .post_content .gds h4::after{
  content: none;
  display: none;
  position: static;
  width: auto; height: auto;
  top: auto; left: auto; right: auto; bottom: auto;
  border: none;
  background: none;
}

/* 本文の章見出し（wp:heading の h2）— ストーリーと同じ“間”と、オレンジの短い罫 */
.post_content .gds h2.wp-block-heading{
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  margin: 3.2em 0 1em;
  padding-top: 22px;
  scroll-margin-top: 90px;
}
.post_content .gds h2.wp-block-heading::before{
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 3px;
  border-radius: var(--gds-r-chip);
  background: var(--gds-grad);
}

/* 本文の段落・リスト */
.post_content .gds > p,
.post_content .gds > .wp-block-group__inner-container > p{ font-size: 16px; line-height: 2.05; color: var(--gds-ink) }
.post_content .gds > p a,
.post_content .gds > .wp-block-group__inner-container > p a{ color: var(--gds-or); font-weight: 600 }
.post_content .gds > ul.wp-block-list,
.post_content .gds > .wp-block-group__inner-container > ul.wp-block-list{ margin: 0 0 1.6em; padding-left: 1.3em }
.post_content .gds > ul.wp-block-list li,
.post_content .gds > .wp-block-group__inner-container > ul.wp-block-list li{ font-size: 15.5px; line-height: 1.95; margin-bottom: .45em; color: var(--gds-ink) }

/* -------------------------------------------------------------------------
   2. 部品
   ------------------------------------------------------------------------- */
.post_content .gds-eyebrow{display:inline-block;font-size:12px;letter-spacing:.18em;color:var(--gds-or);font-weight:700;margin-bottom:10px}

/* FV（キャッチは h2 ではなく p — 目次に拾わせない） */
.post_content .gds-hero{padding:8px 0 24px}
.post_content .gds-hero .gds-catch{font-size:clamp(26px,5vw,40px);line-height:1.45;font-weight:800;margin:0 0 18px;color:var(--gds-ink);letter-spacing:.01em}
.post_content .gds-hero p{font-size:16px;line-height:2;color:var(--gds-ink);margin:0 0 12px}
.post_content .gds-hero img{width:100%;height:auto;border-radius:var(--gds-r);margin-top:18px}
.post_content .gds-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.post_content .gds-tags li{font-size:13px;padding:6px 12px;border:1px solid var(--gds-line);border-radius:var(--gds-r-chip);background:#fff;margin:0;list-style:none}
.post_content .gds-tags li::before{content:none}

/* 4ステップ */
.post_content .gds-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.post_content .gds-step{background:var(--gds-bg);border-radius:var(--gds-r);padding:18px 16px}
.post_content .gds-step .n{font-size:12px;letter-spacing:.14em;color:var(--gds-or);font-weight:700}
.post_content .gds-step h3{font-size:17px;font-weight:700;margin:6px 0 8px}
.post_content .gds-step p{font-size:14px;line-height:1.8;margin:0;color:var(--gds-sub)}
.post_content .gds-step.is-last{background:var(--gds-or-soft)}

/* ファイル名ビフォー・アフター */
.post_content .gds-names{border:1px solid var(--gds-line);border-radius:var(--gds-r);overflow:hidden;margin:20px 0}
.post_content .gds-names .row{display:grid;grid-template-columns:7em 1fr;border-top:1px solid var(--gds-line)}
.post_content .gds-names .row:first-child{border-top:none}
.post_content .gds-names .k{padding:14px;background:var(--gds-bg);font-size:13px;font-weight:700}
.post_content .gds-names .v{padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;word-break:break-all}
.post_content .gds-names .before .v{color:#9a9a9a;text-decoration:line-through}
.post_content .gds-names .after .v{color:var(--gds-ink);font-weight:700}

/* フォルダ構成図（01） */
.post_content .gds-tree{background:var(--gds-bg);border-radius:var(--gds-r);padding:22px;margin:20px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:2.1;overflow-x:auto;white-space:pre}
.post_content .gds-tree b{color:var(--gds-or)}

/* 「AIを使いません」の囲み（01） */
.post_content .gds-noai{position:relative;background:var(--gds-bg);border-radius:var(--gds-r);padding:18px 22px 18px 26px;margin:20px 0;font-size:15px;line-height:1.9;overflow:hidden}
.post_content .gds-noai::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gds-grad)}

/* 導入事例 */
.post_content .gds-case{background:var(--gds-bg);border-radius:var(--gds-r-lg);padding:28px 24px;margin:24px 0}
.post_content .gds-case .lbl{font-size:12px;letter-spacing:.14em;color:var(--gds-or);font-weight:700}
.post_content .gds-case h3{font-size:22px;font-weight:700;line-height:1.6;margin:8px 0 16px}
.post_content .gds-case p{font-size:15px;line-height:2;margin:0 0 12px}
.post_content .gds-case .fname{display:block;background:#fff;border:1px dashed var(--gds-or);border-radius:var(--gds-r);padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;font-weight:700;margin:14px 0;word-break:break-all}
.post_content .gds-case .note{font-size:13px;color:var(--gds-sub)}
.post_content .gds-case .note a{color:var(--gds-or);font-weight:700}
.post_content .gds-case img{width:100%;height:auto;border-radius:var(--gds-r);margin:6px 0 18px}

/* 業種別カード */
.post_content .gds-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
.post_content .gds-use{border:1px solid var(--gds-line);border-radius:var(--gds-r);overflow:hidden;background:#fff}
.post_content .gds-use img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.post_content .gds-use .b{padding:16px}
.post_content .gds-use h4{font-size:16px;font-weight:700;margin:0 0 6px}
.post_content .gds-use p{font-size:14px;line-height:1.8;margin:0;color:var(--gds-sub)}
.post_content .gds-use code{display:block;margin-top:10px;font-size:12px;background:var(--gds-bg);color:var(--gds-ink);padding:8px;border-radius:var(--gds-r-chip);word-break:break-all;border:none}

/* 標準／カスタマイズ */
.post_content .gds-scope{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.post_content .gds-scope > div{border-radius:var(--gds-r);padding:20px}
.post_content .gds-scope .std{background:var(--gds-bg)}
.post_content .gds-scope .cst{background:var(--gds-or-soft)}
.post_content .gds-scope h4{font-size:16px;font-weight:700;margin:0 0 10px}
.post_content .gds-scope ul{margin:0;padding-left:1.2em;font-size:14px;line-height:1.9}
.post_content .gds-scope a{font-weight:700;color:var(--gds-or)}

/* ほかのソリューション */
.post_content .gds-others{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.post_content .gds-others a{display:block;border:1px solid var(--gds-line);border-radius:var(--gds-r);padding:18px;text-decoration:none;color:var(--gds-ink);background:#fff;transition:border-color .2s, transform .2s}
.post_content .gds-others a:hover{border-color:var(--gds-or);transform:translateY(-2px)}
.post_content .gds-others .n{display:block;font-size:11px;letter-spacing:.14em;color:var(--gds-or);font-weight:700}
.post_content .gds-others strong{display:block;font-size:15px;margin:4px 0 6px;background:none}
.post_content .gds-others span:not(.n){display:block;font-size:13px;line-height:1.7;color:var(--gds-sub)}

/* かからないもの */
.post_content .gds-free{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.post_content .gds-free li{background:var(--gds-bg);border-radius:var(--gds-r);padding:14px;font-size:15px;margin:0;list-style:none}
.post_content .gds-free li::before{content:none}
.post_content .gds-free li b{color:var(--gds-or)}

/* FAQ（wp:details） */
.post_content .gds .wp-block-details{border-top:1px solid var(--gds-line);padding:16px 4px;margin:0}
.post_content .gds .wp-block-details:last-of-type{border-bottom:1px solid var(--gds-line)}
.post_content .gds .wp-block-details summary{font-weight:700;font-size:15.5px;cursor:pointer;line-height:1.7}
.post_content .gds .wp-block-details p{font-size:15px;line-height:1.95;margin:10px 0 0;color:var(--gds-sub)}

/* CTA（本文幅のまま・暗色） */
.post_content .gds-cta{background:var(--gds-ink);border-radius:var(--gds-r-lg);padding:36px 24px;text-align:center;margin:40px 0 24px;position:relative;overflow:hidden}
.post_content .gds-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 260px at 85% 0%,rgba(255,120,24,.28),transparent 60%);pointer-events:none}
.post_content .gds-cta p{position:relative;color:#fff;font-size:16px;line-height:1.9;margin:0 0 20px}
.post_content .gds-cta .btns{position:relative;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.post_content .gds-cta a{display:inline-block;padding:15px 30px;border-radius:var(--gds-r-chip);font-weight:700;text-decoration:none}
.post_content .gds-cta .p{background:var(--gds-grad);color:#fff}
.post_content .gds-cta .s{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.post_content .gds-cta .s:hover{background:#fff;color:var(--gds-ink)}

/* -------------------------------------------------------------------------
   4. SWELL 標準目次 — 黒い帯をやめて、記事のトーンに合わせる
   （本番 cat-story.css と同じ指定。このファイルは solution の投稿でしか読まれない）
   ------------------------------------------------------------------------- */
.post_content .p-toc,
.p-toc:not(.-modal){
  max-width:var(--readw,700px);
  margin-inline:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-card,4px);
  box-shadow:none;
  padding:26px 28px;
}
.p-toc:not(.-modal) .p-toc__ttl{
  display:block;
  background:none;
  color:var(--accent);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-align:left;
  padding:0 0 14px;
  border:none;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.p-toc:not(.-modal) .p-toc__ttl::before,
.p-toc:not(.-modal) .p-toc__ttl::after{content:none;display:none}
.p-toc:not(.-modal) a{
  color:var(--ink-2);
  font-size:14.5px;
  line-height:1.9;
}
.p-toc:not(.-modal) a:hover{color:var(--accent)}

/* -------------------------------------------------------------------------
   3. スマートフォン
   ------------------------------------------------------------------------- */
@media (max-width:768px){
  .post_content .gds-steps{grid-template-columns:1fr 1fr}
  .post_content .gds-uses,
  .post_content .gds-others,
  .post_content .gds-scope,
  .post_content .gds-free{grid-template-columns:1fr}
  .post_content .gds-names .row{grid-template-columns:1fr}
  .post_content .gds-names .k{padding:8px 14px}
}