/* 記事ページ共通の読みやすい体裁(WordPressテーマ Cocoon を参考にした見た目)
   対象: /parents/ と /articles/ の下の記事HTMLに、build.mjs が自動で読み込ませる(土台は page-base.css)。
   各ページの色は、そのページが持つ変数(--pop / --pink / --gold など)をそのまま使う。
   使える部品は docs/article-format.md を参照。 */
/* 文字: Cocoonと同じ、端末標準のゴシック体・16px・行間1.8・やや黒のグレー */
article b,article strong{font-weight:700}
main{max-width:720px!important}
/* 本文のカード */
main>article{background:var(--paper,#fff);border:1px solid var(--line,#ddd);border-radius:14px;padding:22px 18px 26px;margin-top:4px}
@media(min-width:600px){main>article{padding:32px 36px 36px}}
article p,article li,article dd{text-wrap:wrap}  /* 行末の余白を作らない(pretty/balanceは使わない) */
article p{margin:1.05em 0 0}
article>h1{font-size:clamp(22px,5.6vw,28px);line-height:1.5;font-weight:700;margin:0}
article>.meta{margin:12px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line,#ddd);font-size:12.5px;line-height:1.7}
article>.meta+p{margin-top:20px}
/* 太字は蛍光ペンふう */
article b,article strong{background:linear-gradient(transparent 62%,var(--a-mark) 62%)}
article .cta b,article .info dt,article .info b,article .refs b{background:none}
/* 箇条書き */
article ul,article ol{margin:1em 0 0;padding-left:0;list-style:none}
article ul>li{position:relative;padding-left:1.4em;margin-top:.55em}
article ul>li::before{content:"";position:absolute;left:.3em;top:.78em;width:.55em;height:.55em;border-radius:50%;background:var(--a)}
article ol:not(.refs){counter-reset:n}
article ol:not(.refs)>li{position:relative;padding-left:2.1em;margin-top:.6em;counter-increment:n}
article ol:not(.refs)>li::before{content:counter(n);position:absolute;left:0;top:.3em;width:1.55em;height:1.55em;border-radius:50%;background:var(--a-deep);color:var(--a-ink);font-size:.82em;font-weight:800;line-height:1.55em;text-align:center}
.rules{padding-left:0!important}.rules li{margin-bottom:0!important}
/* 要点ボックス(基本情報) */
.info{margin:22px 0 0!important;padding:0!important;border:2px solid var(--a-line)!important;border-radius:12px!important;background:var(--a-soft)!important;overflow:hidden}
.info::before{content:"要点まとめ";display:block;padding:6px 14px;background:var(--a-deep);color:var(--a-ink);font-weight:800;font-size:13.5px;letter-spacing:.08em}
.info dl{margin:0!important;padding:12px 14px;gap:10px 12px!important;font-size:15px!important;line-height:1.7!important}
.info dt{color:var(--a-deep)!important}
/* ボックス(新しい記事で使う): <div class="callout point|warn|memo"><p class="callout-t">タイトル</p>…</div> */
.callout{margin:22px 0 0;padding:14px 16px;border:2px solid var(--a-line);border-radius:12px;background:var(--a-soft)}
.callout>.callout-t{margin:0 0 4px;font-weight:800;color:var(--a-deep)}
.callout>p:not(.callout-t){margin-top:.6em}
.callout.warn{border-color:#f0b4a0;background:#fff3ee;color:#4a2a20}.callout.warn>.callout-t{color:#b3401f}
.callout.memo{border-style:dashed;background:transparent}
/* 引用元の番号は小さく目立たなく */
.rf{font-size:.68em!important;font-weight:400;vertical-align:super;margin-left:1px}
.rf a{color:var(--muted,#666)!important;background:none!important;text-decoration:none;padding:0 1px}
.rf a:hover{color:var(--a-deep)!important;text-decoration:underline}
/* 図・表 */
.fig{margin:22px 0 0!important;padding:12px 10px 10px;border:1px solid var(--line,#ddd);border-radius:12px;background:var(--paper,#fff)}
.fig figcaption{font-size:12.5px!important;text-align:center;margin-top:8px!important}
.tblwrap{margin:20px 0 0!important;border:1px solid var(--line,#ddd);border-radius:10px}
article table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6}
article th,article td{padding:9px 10px;border-bottom:1px solid var(--line,#ddd);text-align:left;vertical-align:top}
article thead th,article th{background:var(--a-soft);color:var(--a-deep);font-weight:800;white-space:nowrap}
article tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--a) 4%,transparent)}
/* 出典・注意書き */
.refs{font-size:13.5px!important;line-height:1.75!important;padding-left:1.5em!important;margin-top:14px!important}
.refs li{margin-bottom:8px!important;padding-left:.2em!important}.refs li::before{display:none!important}
article ol.refs{list-style:decimal}
.note{margin-top:28px!important;padding:12px 14px!important;border:1px dashed var(--a-line)!important;border-radius:10px;background:var(--a-soft);font-size:13px!important;line-height:1.75!important}
/* 目次(build後にarticle.jsが自動で入れる) */
.toc{margin:24px 0 0;border:2px solid var(--a-line);border-radius:12px;background:var(--paper,#fff)}
.toc summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:800;color:var(--a-deep);display:flex;justify-content:space-between;align-items:center;gap:8px}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"▼ 閉じる";font-size:12px;font-weight:700;color:var(--muted,#666)}
.toc:not([open]) summary::after{content:"▶ 開く"}
.toc ol{margin:0!important;padding:2px 14px 14px 14px!important}
.toc li{margin-top:.35em!important;padding-left:2.1em!important;font-size:15px;line-height:1.6}
.toc li a{color:var(--ink,#222);text-decoration:none;background:none!important}
.toc li a:hover{color:var(--a-deep);text-decoration:underline}
main h2[id]{scroll-margin-top:12px}
/* 終わりのまとめ */
.cta{border-radius:16px!important;margin-top:32px!important}
.more{margin-top:32px!important}
.more ul{padding-left:0!important}
.more li{padding-left:0!important;margin:8px 0 0!important}.more li::before{display:none!important}
.more li a{display:block;padding:11px 14px;border:1px solid var(--line,#ddd);border-radius:10px;background:var(--paper,#fff);color:var(--ink,#222);text-decoration:none;line-height:1.6}
.more li a::after{content:" ›";color:var(--a-deep);font-weight:800}
.more li a:hover{border-color:var(--a);background:var(--a-soft)}
.crumb{margin-top:6px}
.pr b{white-space:nowrap;flex:none}
@media(max-width:520px){
  .info dl{grid-template-columns:1fr!important;gap:0!important}
  .info dt{margin-top:10px}.info dt:first-child{margin-top:0}
}
article h1,main h2,article h3{word-break:normal;overflow-wrap:break-word;text-wrap:wrap}  /* 見出しは文字が行いっぱいに並ぶ通常の折り返し(途中でわざと改行しない) */
/* 本文中のリンクは、Cocoonと同じく青い文字+下線 */
article p a,article li a,article dd a{color:var(--a-link);text-decoration:underline;text-underline-offset:2px}
article p a:hover,article li a:hover{text-decoration:none}
article .rf a,article .toc a,article .btn{text-decoration:none}
.fig text{font-family:inherit}