/* =====================================================================
   クマひよ工房 ／ コラムの一覧と記事本文の組版
   設計トークンと共通の部品は site.css が持つ。色はトークンだけを使う。
   記事本文にはクラスを書かないため、.column-body の中は要素で当てる。
   ===================================================================== */

/* ---- 日付とカテゴリー（記事の見出しと一覧） ---- */
.column-meta{display:flex;flex-wrap:wrap;gap:2px 20px;margin:0;color:var(--ink-2);font-size:14px}

/* ---- 記事の一覧 ---- */
.column-list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.column-list li{border-bottom:1px solid var(--line)}
.column-list a{display:block;padding:24px 4px;text-decoration:none}
.column-list-title{margin-bottom:6px;font-size:19px}
.column-list a:hover .column-list-title{text-decoration:underline}
.column-list .column-meta{margin-bottom:8px}
.column-list a>:last-child{margin-bottom:0}
.column-pager{margin-bottom:28px}

/* ---- 記事本文。読みやすい行の長さに収める ---- */
.column-body{max-width:760px}
.column-body>:last-child{margin-bottom:0}
.column-body h2{margin-top:64px}
.column-body h3{margin:40px 0 12px;font-size:21px}
.column-body h4{margin:28px 0 8px;font-size:18px}
.column-body>:first-child{margin-top:0}
.column-body li+li{margin-top:.4em}
.column-body code{padding:.1em .35em;background:var(--soft);border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;overflow-wrap:anywhere}
.column-body pre{margin:0 0 1.4em;padding:16px 18px;overflow-x:auto;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;line-height:1.7}
.column-body pre code{padding:0;background:none;font-size:inherit;overflow-wrap:normal}

@media (max-width:760px){
  .column-list a{padding:20px 0}
  .column-list-title{font-size:18px}
  .column-body h2{margin-top:48px}
  .column-body h3{font-size:19px}
}