/* CNC連載の承認済み文字組。配色は全ページ共通のテーマ変数を使う。 */
html:has([data-cnc-reading]) .article-shell{max-width:760px;margin:1.75rem auto 0}
html:has([data-cnc-reading]) .article-header{padding:0;border:0}
html:has([data-cnc-reading]) .article-header-grid{display:flex;flex-direction:column;gap:1rem}
html:has([data-cnc-reading]) .article-index{border:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;font-size:12px}
html:has([data-cnc-reading]) .article-index .field-label{display:none}
html:has([data-cnc-reading]) .article-index-list{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0}
html:has([data-cnc-reading]) .article-index-list>div{display:flex;gap:.4rem;align-items:baseline}
html:has([data-cnc-reading]) .article-index-list dd{margin:0;color:var(--muted);font-weight:400}
html:has([data-cnc-reading]) .article-tags{margin-top:.65rem;gap:.35rem}
html:has([data-cnc-reading]) .article-tags li{font-size:11px;padding:.15rem .55rem}
html:has([data-cnc-reading]) .article-deck{font-size:14px;line-height:1.8;margin-top:1rem;color:var(--muted)}
html:has([data-cnc-reading]) .article-header h1{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans CJK JP",sans-serif;color:var(--ink);font-size:32px;font-weight:750;line-height:1.55;letter-spacing:.01em}
html:has([data-cnc-reading]) .article-body{max-width:none;margin-top:2rem;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans CJK JP",sans-serif;font-size:17px;line-height:1.95;color:var(--ink);overflow-wrap:anywhere}
html:has([data-cnc-reading]) .article-body :is(h2,h3,h4,strong,b,em,th,td,code,blockquote){color:var(--ink);font-family:inherit}
html:has([data-cnc-reading]) .article-body p{margin:0 0 22px;line-height:1.95}
html:has([data-cnc-reading]) .article-body :is(strong,b){font-weight:750}
html:has([data-cnc-reading]) .article-body em{font-style:normal}
html:has([data-cnc-reading]) .article-body>p>em:only-child{display:block;font-size:13px;line-height:1.85;color:var(--muted)}
html:has([data-cnc-reading]) .article-body h2{border:0;padding:0;margin:52px 0 20px;font-size:24px;font-weight:750;line-height:1.65;letter-spacing:normal}
html:has([data-cnc-reading]) .article-body h3{margin:34px 0 16px;font-size:19px;line-height:1.7;font-weight:700;letter-spacing:normal}
html:has([data-cnc-reading]) .article-body a{color:var(--winter);text-decoration-color:var(--link-underline);text-underline-offset:4px}
html:has([data-cnc-reading]) .article-body a:hover{color:var(--winter-hover)}
html:has([data-cnc-reading]) .article-body :is(.author-note,.source-note){font-size:13px;line-height:1.8;color:var(--note-ink);background:var(--paper-raised);padding:14px 18px;margin:24px 0;border-left:3px solid var(--line-strong)}
html:has([data-cnc-reading]) .article-body .source-note{background:var(--paper);border-left:2px solid var(--line)}
html:has([data-cnc-reading]) .article-body figure{margin:28px 0 25px}
html:has([data-cnc-reading]) .article-body figure>a{display:block}
html:has([data-cnc-reading]) .article-body figure img{display:block;width:100%;height:auto;max-height:620px;object-fit:contain;margin:0;background:var(--paper-raised);border:1px solid var(--line-soft);border-radius:0}
html:has([data-cnc-reading]) .article-body figure.machine-photo{max-width:600px;margin-inline:auto}
html:has([data-cnc-reading]) .article-body figcaption{font-size:12px;color:var(--muted);margin:10px 0 0;line-height:1.8}
html:has([data-cnc-reading]) .article-body .media-link{padding:13px 17px;background:var(--paper-raised);font-size:14px}
html:has([data-cnc-reading]) .article-body .process{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;align-items:stretch!important;background:var(--paper-raised);padding:18px 12px;margin:26px 0}
html:has([data-cnc-reading]) .article-body .process>div{display:flex!important;flex:1;flex-direction:column;justify-content:center;min-width:0;text-align:center;font-size:12px;line-height:1.6;border:1px solid var(--line);border-radius:4px;background:var(--paper);padding:10px 5px}
html:has([data-cnc-reading]) .article-body .process b{font-size:13px;margin-bottom:6px}
html:has([data-cnc-reading]) .article-body .process .arrow{align-self:center;font-size:13px;color:var(--muted)}
html:has([data-cnc-reading]) .article-body table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:14px;line-height:1.8;margin:25px 0 30px;border:1px solid var(--line);table-layout:auto!important}
html:has([data-cnc-reading]) .article-body :is(th,td){padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;min-width:130px;width:auto!important}
html:has([data-cnc-reading]) .article-body th{background:var(--paper-raised);font-weight:700}
html:has([data-cnc-reading]) .article-body td:first-child{font-weight:600}
html:has([data-cnc-reading]) .article-body :is(.next-link,.series-nav){margin-top:34px;padding:20px 0;border-top:1px solid var(--line);font-weight:650;font-size:15px}
html:has([data-cnc-reading]) .article-body .footnotes{font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px}
html:has([data-cnc-reading]) .article-body .footnotes p{margin:0;font-size:12px;line-height:1.8}
html:has([data-cnc-reading]) .article-body .footnotes li{padding-block:7px}
@media(max-width:620px){
html:has([data-cnc-reading]) .article-header h1{font-size:26px;line-height:1.6}
html:has([data-cnc-reading]) .article-body{font-size:16px;line-height:1.98}
html:has([data-cnc-reading]) .article-body h2{font-size:21px;margin-top:40px}
html:has([data-cnc-reading]) .article-body h3{font-size:18px}
html:has([data-cnc-reading]) .article-body p{margin-bottom:21px}
html:has([data-cnc-reading]) .article-body :is(.author-note,.source-note){padding:12px 14px;font-size:12px}
html:has([data-cnc-reading]) .article-body figcaption{font-size:11px}
html:has([data-cnc-reading]) .article-body .process{flex-direction:column;gap:5px!important;padding:14px 20px}
html:has([data-cnc-reading]) .article-body .process>div{padding:10px 14px;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-align:left}
html:has([data-cnc-reading]) .article-body .process b{margin:0;font-size:14px}
html:has([data-cnc-reading]) .article-body .process .arrow{transform:rotate(90deg);line-height:1}
html:has([data-cnc-reading]) .article-body table{font-size:13px}
html:has([data-cnc-reading]) .article-body :is(th,td){padding:12px 13px}
}
html:has([data-cnc-reading]) .article-header :is(p,span,li,dt,dd){color:var(--muted)}