/* そなえ帖（読みもののページ）の部品。決まりは 02_visual ⑮（D31）、部品の名前は DESIGN.md §4「読みもののページ（そなえ帖）の部品」。
   形は試作 prototypes/2026-09-30_そなえ帖_読みものの4案/ の c_list.html・c_article.html（表紙の棚）。
   試作の c.css が直接書いていた値を、tokens の変数に置き換えた（余白は段階の値に丸め、13px・12px の文字は14pxにした）。
   ヘッダー・ボタン・下の帯・メニュー・フッターは、どのページにも共通の site.css の部品を使う。このファイルには書かない。
   中身は生成りの地だけで組み、黄の章を挟まない。区切りは1pxの罫線。記事のカードには枠も面も付けない。
   切り替えの幅は @media の中で変数が使えないので、1023px と書いて --layout-breakpoint-lg を指す */

/* 土台の足し：英字の書体の数字、改行させない語、build.py と sonaecho.js が付け外しする hidden */
.num { font-family: var(--font-latin); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-latin); }
.nw { white-space: nowrap; }
[data-cho] [hidden] { display: none !important; }
picture { display: block; }

/* 1本の記事のページでは、ヘッダーとメニューの「そなえ帖」に、いまいる場所の下線を付ける（aria-current="true"） */
.hd nav [aria-current="true"], .spmenu [aria-current="true"] { text-decoration-line: underline; }

/* フッターの丘の上の人物は、上の中身に重ならないように、ページの終わりに余白をとる */
[data-cho] { padding-bottom: var(--space-128); }

/* 読みものの題と見出しの明朝体（題・本文の見出し・すぐできるトライの一文だけ） */
.c-mast h1, .c-lead h2, .c-card h3, .c-result h2, .cc-open h1, .cc-body h2, .cc-body h3, .cc-act p, .cc-rel h2 { font-family: var(--font-reading); font-weight: var(--font-weight-bold); }

/* 分野と日付の1行 */
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4) var(--space-16); font-size: var(--font-size-small); }
.meta b { font-weight: var(--font-weight-bold); }
.meta .num { color: var(--color-text-secondary); }

/* いちばん上の題 */
.c-mast { text-align: center; padding: var(--space-88) 0 var(--space-48); }
.c-mast .kicker { font-size: var(--font-size-small); color: var(--color-text-secondary); margin-bottom: var(--space-16); }
.c-mast h1 {
  font-size: var(--font-size-reading-masthead); line-height: var(--line-height-reading-masthead);
  letter-spacing: var(--letter-spacing-reading-masthead); margin-right: calc(var(--letter-spacing-reading-masthead) * -1);
}
.c-mast .intro { max-width: var(--layout-text-max); margin: var(--space-24) auto 0; word-break: auto-phrase; text-wrap: balance; }

/* 絞り込み：上下を1pxの罫線ではさむ。1行目は分野のタブ（件数つき）、2行目はキーワード */
.c-filter { display: grid; justify-items: center; gap: var(--space-16); padding: var(--space-32) 0; border-block: var(--border-width-hairline) solid var(--color-border-hairline); }
.c-tabs { display: flex; align-items: center; }
.c-tabs a { display: inline-flex; align-items: baseline; gap: var(--space-8); padding: var(--space-8) var(--space-24); font-weight: var(--font-weight-bold); white-space: nowrap; }
.c-tabs a + a { border-left: var(--border-width-hairline) solid var(--color-text-secondary); }
.c-tabs .num { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.c-tabs a[aria-current] { text-decoration: underline; text-decoration-thickness: var(--border-width-line); text-underline-offset: var(--space-8); }
.c-tabs a:not([aria-current]):hover { text-decoration: underline; text-decoration-thickness: var(--border-width-hairline); text-underline-offset: var(--space-8); }
.c-kws { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-8); max-width: calc(var(--layout-text-max) * 1.5); font-size: var(--font-size-small); color: var(--color-text-secondary); }
.c-kws a { display: inline-flex; align-items: center; min-height: var(--layout-target-min); padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); white-space: nowrap; }
.c-kws a:not([aria-current]):hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: var(--space-4); }
.c-kws a[aria-current] { color: var(--color-bg-base); background: var(--color-text-primary); }

/* 絞り込んだときの見出しと、当てはまる記事が0本のとき */
.c-result { text-align: center; padding-top: var(--space-56); }
.c-result h2 { font-size: var(--font-size-h2); line-height: var(--line-height-reading-title); letter-spacing: var(--letter-spacing-heading); }
.c-result h2 .num { font-size: var(--font-size-h3); color: var(--color-text-secondary); margin-left: var(--space-8); }
.c-result a { display: inline-flex; align-items: center; min-height: var(--layout-target-main); margin-top: var(--space-4); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); color: var(--color-text-link); text-decoration: underline; text-underline-offset: var(--space-4); }
.c-result a:hover { text-decoration-thickness: var(--border-width-line); }
.c-empty { text-align: center; padding-top: var(--space-40); color: var(--color-text-secondary); }

/* 新着：絞り込んでいない1ページ目だけ。左に16:9の画像（幅の約6割）、右に横書きの題 */
.c-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-56); align-items: center; padding: var(--space-72) 0; border-bottom: var(--border-width-hairline) solid var(--color-border-hairline); }
.c-lead .side { display: grid; gap: var(--space-16); justify-items: start; }
.c-lead .new { font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); padding-bottom: var(--space-4); border-bottom: var(--border-width-line) solid var(--color-border-line); }
.c-lead h2 { font-size: var(--font-size-reading-lead); line-height: var(--line-height-reading-title); letter-spacing: var(--letter-spacing-reading-title); }
.c-lead .s { font-size: var(--font-size-small); color: var(--color-text-secondary); word-break: auto-phrase; }
.c-lead .kw { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-16); font-size: var(--font-size-small); color: var(--color-text-secondary); }
.c-lead:hover h2, .c-card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--border-width-hairline); text-underline-offset: var(--space-8); }

/* 記事のカード：PCは3列、スマホは1列。画像・分野と日付・題の順 */
.c-grid { display: grid; grid-template-columns: repeat(var(--layout-reading-columns), minmax(0, 1fr)); gap: var(--space-64) var(--space-40); padding-top: var(--space-64); }
.c-card { display: grid; align-content: start; gap: var(--space-12); }
.c-card h3 { font-size: var(--font-size-reading-card); line-height: var(--line-height-reading-card); letter-spacing: var(--letter-spacing-body); }

/* サムネイル：16:9、角を丸めない。写真は枠いっぱいに切り取る */
.th { aspect-ratio: var(--layout-thumb-ratio); border-radius: var(--radius-thumb); overflow: hidden; }
.th picture, .th img { width: 100%; height: 100%; }
.th img { object-fit: cover; }

/* ページ送り：前のページ・番号・次のページ。いまのページは墨の下線 */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-40); margin-top: var(--space-112); }
.pager ol { display: flex; gap: var(--space-16); }
.pager li > * { display: grid; place-items: center; min-width: var(--layout-target-main); height: var(--layout-target-main); font-family: var(--font-latin); font-size: var(--font-size-h3); font-weight: var(--font-weight-medium); }
.pager [aria-current] { font-weight: var(--font-weight-bold); text-decoration: underline; text-decoration-thickness: var(--border-width-line); text-underline-offset: var(--space-8); }
.pager .pg-step { display: inline-flex; align-items: center; min-height: var(--layout-target-main); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); }
.pager .pg-step[aria-disabled] { color: var(--color-text-secondary); }
.pager a:hover { text-decoration: underline; text-decoration-thickness: var(--border-width-hairline); text-underline-offset: var(--space-8); }

/* 1本の記事 */
.cc-crumb { display: flex; flex-wrap: wrap; gap: var(--space-8); padding-top: var(--space-40); font-size: var(--font-size-small); color: var(--color-text-secondary); }
.cc-crumb li + li::before { content: "／"; margin-right: var(--space-8); }
.cc-crumb a { text-decoration: underline; text-underline-offset: var(--space-4); }
.cc-crumb a:hover { color: var(--color-text-primary); }
.cc-open { padding-top: var(--space-64); }
.cc-open .meta { justify-content: center; }
.cc-open h1 {
  max-width: var(--layout-reading-figure-max); margin: var(--space-24) auto 0; text-align: center;
  font-size: var(--font-size-reading-title); line-height: var(--line-height-reading-title); letter-spacing: var(--letter-spacing-reading-title);
}
.cc-open .lead { max-width: var(--layout-text-max); margin: var(--space-32) auto 0; word-break: auto-phrase; }
.cc-fig { max-width: var(--layout-reading-figure-max); margin: var(--space-56) auto 0; }
.cc-fig figcaption { margin-top: var(--space-8); font-size: var(--font-size-small); color: var(--color-text-secondary); text-align: right; }
.cc-body { max-width: var(--layout-text-max); margin: var(--space-80) auto 0; }
.cc-body h2 { margin: var(--space-72) 0 var(--space-24); font-size: var(--font-size-h2); line-height: var(--line-height-reading-title); letter-spacing: var(--letter-spacing-reading-title); }
.cc-body h3 { margin: var(--space-48) 0 var(--space-16); font-size: var(--font-size-h3); line-height: var(--line-height-reading-title); letter-spacing: var(--letter-spacing-reading-title); }
.cc-body > :first-child { margin-top: 0; }
/* 本文の段落と箇条（原稿から作るので class が付かない）。監修・出典・キーワードの行は下で別に決める */
.cc-body > p:not([class]), .cc-body > ul:not([class]) { margin-bottom: var(--space-24); }
.cc-body > ul:not([class]) { padding-left: var(--space-24); list-style: disc; }
.cc-body > p:not([class]) a, .cc-body > ul:not([class]) a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: var(--space-4); }
.cc-body strong { font-weight: var(--font-weight-bold); }

/* すぐできるトライ：1pxの罫線の枠。呼び名は枠の上の線の上に置く */
.cc-act { position: relative; margin: var(--space-88) 0 var(--space-56); padding: var(--space-48); border: var(--border-width-hairline) solid var(--color-border-hairline); text-align: center; }
.cc-act .label { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 0 var(--space-16); background: var(--color-bg-base); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); line-height: var(--line-height-small); white-space: nowrap; }
.cc-act p:not(.label) { font-weight: var(--font-weight-medium); font-size: var(--font-size-h3); line-height: var(--line-height-reading-try); word-break: auto-phrase; text-wrap: balance; }

.cc-by { font-size: var(--font-size-small); color: var(--color-text-secondary); text-align: center; }
.cc-by b { color: var(--color-text-primary); font-weight: var(--font-weight-bold); }
.cc-src { display: grid; gap: var(--space-8); margin-top: var(--space-24); font-size: var(--font-size-small); line-height: var(--line-height-small); color: var(--color-text-secondary); text-align: center; }
.cc-src a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: var(--space-4); overflow-wrap: anywhere; }
.cc-kw { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-24); margin-top: var(--space-32); font-size: var(--font-size-small); }
.cc-kw a { display: inline-flex; align-items: center; min-height: var(--layout-target-min); }
.cc-kw a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }

/* いちばん下の、同じ分野の記事3本 */
.cc-rel { margin-top: var(--space-128); }
.cc-rel h2 { padding-bottom: var(--space-24); border-bottom: var(--border-width-hairline) solid var(--color-border-hairline); font-size: var(--font-size-h2); letter-spacing: var(--letter-spacing-heading); text-align: center; }
.cc-rel .c-grid { padding-top: var(--space-48); }

/* スマホ（--layout-breakpoint-lg より狭い画面） */
@media (max-width: 1023px) {
  [data-cho] { padding-bottom: var(--space-96); }
  .c-mast { padding: var(--space-48) 0 var(--space-24); }
  .c-mast .intro { margin-top: var(--space-16); text-align: left; }
  .c-filter { justify-items: stretch; gap: var(--space-12); padding: var(--space-16) 0; }
  .c-tabs, .c-kws { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; max-width: none; margin-inline: calc(var(--layout-gutter-sp) * -1); padding-inline: var(--layout-gutter-sp); scrollbar-width: none; }
  .c-tabs a { padding: var(--space-8) var(--space-16); }
  .c-tabs a:first-child { padding-left: 0; }
  .c-kws a:first-child { margin-left: calc(var(--space-12) * -1); }
  .c-lead { grid-template-columns: 1fr; gap: var(--space-24); padding: var(--space-32) 0 var(--space-40); }
  .c-lead .side { gap: var(--space-12); }
  .c-grid { grid-template-columns: 1fr; gap: var(--space-40); padding-top: var(--space-40); }
  .c-card { gap: var(--space-8); }
  .pager { gap: var(--space-16); margin-top: var(--space-64); }
  .pager ol { gap: var(--space-4); }

  .cc-crumb { padding-top: var(--space-24); }
  .cc-open { padding-top: var(--space-32); }
  .cc-open .meta { justify-content: flex-start; }
  .cc-open h1 { margin-top: var(--space-16); text-align: left; }
  .cc-open .lead { margin-top: var(--space-24); }
  .cc-fig { margin: var(--space-32) calc(var(--layout-gutter-sp) * -1) 0; }
  .cc-fig figcaption { padding-inline: var(--layout-gutter-sp); }
  .cc-body { margin-top: var(--space-48); }
  .cc-body h2 { margin-top: var(--space-48); }
  .cc-act { margin-top: var(--space-64); padding: var(--space-32) var(--space-24); }
  .cc-rel { margin-top: var(--space-80); }
}