/* ブログ（一覧と記事）。土台は site.css（フォント・色・ヘッダー・フッター）と legal.css（長い文章の組み）。ここでは、記事に固有の部品だけ。 */

.post-hero { position: relative; isolation: isolate; overflow: clip; color: #fff; background: var(--ink); padding: clamp(116px, 16vh, 150px) 0 clamp(40px, 6vw, 60px); }
.post-hero .eyebrow { color: var(--rose-3); }
.post-hero h1 { margin: 16px 0 0; max-width: 22em; font: 900 clamp(1.9rem, 4.6vw, 3.2rem)/1.35 var(--f-display); letter-spacing: -.02em; font-feature-settings: "palt" 1; text-wrap: balance; text-autospace: no-autospace; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 13.5px; color: rgba(255, 255, 255, .68); }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-tag { padding: 4px 12px; border-radius: 999px; font: 700 12px/1.4 var(--f-display); letter-spacing: .08em; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px var(--line-d); }

/* 記事の本文 */
.article .post-lead { margin: 0 0 40px; padding-bottom: 32px; font-size: 17px; line-height: 2.1; color: #2b2531; border-bottom: 1px solid var(--line); }
.article h2 { margin-top: clamp(48px, 6vw, 68px); }
.article h3 { margin: 32px 0 10px; }
.article hr { margin: 48px 0; border: 0; height: 1px; background: var(--line); }
.article code { padding: .1em .45em; border-radius: 6px; font: 500 .88em/1.6 var(--f-mono); background: var(--paper-2); color: var(--rose-deep); }
.article .toc { margin: 0 0 44px; padding: 22px 26px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.article .toc b { display: block; margin-bottom: 8px; font: 800 12px/1 var(--f-latin); letter-spacing: .2em; color: var(--rose); }
.article .toc ol { margin: 0; }
.article .toc li { margin: 0; }
.article .toc a { text-decoration: none; color: var(--ink); }
.article .toc a:hover { color: var(--rose); }

/* プロンプトの例：そのままコピーして使える */
.prompt-box { margin: 22px 0 30px; border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: 0 24px 50px -34px rgba(225, 29, 72, .6), 0 0 0 1px rgba(13, 9, 18, .9); }
.prompt-box-label { display: flex; align-items: center; gap: 10px; padding: 11px 20px; font: 700 12px/1 var(--f-display); letter-spacing: .14em; color: var(--rose-3); border-bottom: 1px solid var(--line-d); background: rgba(255, 255, 255, .04); }
.prompt-box-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rose-2); box-shadow: 0 0 10px var(--rose-2); }
.prompt-box pre { margin: 0; padding: 20px 24px; font: 400 14.5px/2 var(--f-body); letter-spacing: .02em; white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; color: #f3eef7; }
.prompt-box .k { color: var(--rose-3); font-weight: 700; }
.prompt-box.bad { box-shadow: 0 0 0 1px rgba(13, 9, 18, .9); }
.prompt-box.bad .prompt-box-label { color: #b7a9c4; }
.prompt-box.bad .prompt-box-label::before { background: #8a7f96; box-shadow: none; }

/* 比べる表 */
.article table th { width: auto; }

/* 記事の最後の呼びかけ */
.cta-box { position: relative; isolation: isolate; overflow: clip; margin: clamp(56px, 8vw, 88px) 0 0; padding: clamp(28px, 5vw, 44px); border-radius: 26px; color: #fff; background: linear-gradient(135deg, #3a1230, #170f1f 70%); box-shadow: 0 40px 80px -40px rgba(225, 29, 72, .6); }
.cta-box::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; z-index: -1; background: radial-gradient(circle, rgba(255, 77, 115, .5), transparent 70%); }
.cta-box h2 { margin: 0 0 12px; padding: 0; font: 900 clamp(1.4rem, 3vw, 1.9rem)/1.4 var(--f-display); font-feature-settings: "palt" 1; color: #fff; }
.cta-box h2::before { display: none; }
.legal .cta-box p { color: rgba(255, 255, 255, .85); }
.cta-box .btn { margin-top: 10px; color: #fff; text-decoration: none; }
.legal .cta-box a.btn { color: #fff; }

.related { margin-top: clamp(48px, 7vw, 72px); }
.related h2 { margin-bottom: 18px; }
.related-list { display: grid; gap: 12px; }
.related-list a { display: block; padding: 18px 22px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); font: 700 15.5px/1.7 var(--f-display); font-feature-settings: "palt" 1; transition: box-shadow .25s, transform .25s var(--ease); }
.related-list a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(225, 29, 72, .3), 0 20px 40px -24px rgba(225, 29, 72, .4); color: var(--rose); }

/* 一覧 */
.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.post-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 28px 26px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(225, 29, 72, .28), 0 30px 60px -30px rgba(225, 29, 72, .4); }
.legal a.post-card { color: var(--ink); text-decoration: none; }
.post-card .post-tag { align-self: flex-start; color: var(--rose); background: var(--paper-2); box-shadow: none; }
.post-card h2 { margin: 4px 0 0; padding: 0; font: 900 1.2rem/1.5 var(--f-display); letter-spacing: 0; font-feature-settings: "palt" 1; text-wrap: balance; }
.post-card h2::before { display: none; }
.post-card p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--muted); }
.post-card .more { margin-top: auto; padding-top: 8px; font: 700 13.5px/1 var(--f-display); letter-spacing: .08em; color: var(--rose); }
.post-card time { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; font-family: var(--f-latin); }
.blog-lead { max-width: 36em; margin: 0 0 40px; color: var(--muted); }

@media (max-width: 640px) {
  /* 記事の表（3列）は、スマホでは、1行を1かたまりに：先頭のセルを太字に、見出しの行は隠す */
  .article table tr:first-child:has(th:nth-child(2)) { display: none; }
  .article td:first-child { padding-top: 16px; padding-bottom: 2px; font-weight: 700; color: var(--ink); }
  .article td:not(:first-child) { padding-top: 2px; padding-bottom: 4px; font-size: 14px; color: var(--muted); }
  .article td:last-child { padding-bottom: 16px; }
}

@media (max-width: 760px) {
  .post-list { grid-template-columns: 1fr; }
  .prompt-box pre { padding: 16px 18px; font-size: 14px; }
}