/* 解説記事(一覧ページ・各記事ページ)共通のスタイル */
:root{--bg:#14171c;--panel:#1d2129;--line:#2c313b;--text:#ece9e2;--text-dim:#9aa0ab;--amber:#e8963a;--teal:#4fb6a6;}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;margin:0;line-height:1.2;}
a{color:var(--teal);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
header{border-bottom:1px solid var(--line);padding:20px 0;}
header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand a{display:flex;align-items:baseline;gap:10px;color:var(--text);}
.brand a:hover{text-decoration:none;}
.brand-mark{width:24px;height:24px;display:block;flex-shrink:0;align-self:center;}
.brand h1{font-size:1.15rem;}
.brand span.sub{color:var(--text-dim);font-size:0.85rem;}
nav{display:flex;gap:24px;font-size:0.92rem;}
nav a{color:var(--text);}
nav a:hover{color:var(--teal);}
nav a.current{color:var(--amber);}
.lang{border:1px solid var(--line);padding:0 10px;border-radius:2px;font-size:0.85rem;}
.lang:hover{border-color:var(--amber);text-decoration:none;}
.page-head{padding:64px 0 40px;border-bottom:1px solid var(--line);}
.page-head h2{font-size:2rem;letter-spacing:-0.01em;}
.page-head p{max-width:56ch;color:var(--text-dim);margin:16px 0 0;}
.page-head p.crumb{max-width:none;font-size:0.85rem;margin:0 0 14px;}
.crumb a{color:var(--text-dim);}
.crumb a:hover{color:var(--teal);}
.section{padding:48px 0 72px;}
footer{padding:32px 0;border-top:1px solid var(--line);}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.82rem;color:var(--text-dim);}
footer a{color:var(--text-dim);}
footer a:hover{color:var(--teal);}

/* ===== 記事一覧(articles.html) ===== */
.cat-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px;}
.cat-nav a{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:4px 14px;font-size:0.88rem;border-radius:2px;}
.cat-nav a:hover{border-color:var(--amber);text-decoration:none;}
.cat{margin:0 0 56px;scroll-margin-top:16px;}
.cat:last-child{margin-bottom:0;}
.cat-title{font-size:1.25rem;border-left:4px solid var(--amber);padding-left:12px;margin:0 0 8px;}
.cat-desc{color:var(--text-dim);font-size:0.9rem;margin:0 0 20px;max-width:68ch;}
.cat-empty{color:var(--text-dim);font-size:0.9rem;margin:0;}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.art-card{display:block;background:var(--panel);padding:22px 20px;border-left:2px solid var(--teal);color:inherit;}
.art-card:hover{text-decoration:none;background:#222731;}
.art-card h4{font-size:1.02rem;margin:0 0 8px;}
.art-card p{color:var(--text-dim);font-size:0.88rem;margin:0;}
.art-date{display:block;font-size:0.75rem;color:var(--amber);margin-top:10px;}

/* ===== 記事本文(articles/*.html) =====
   見出しは h3(大見出し)と h4(小見出し)を使う。ページ上部の h2 は記事タイトル */
.article{max-width:none;}
.article h3{font-size:1.3rem;margin:48px 0 14px;border-left:4px solid var(--amber);padding-left:12px;}
.article h3:first-child{margin-top:0;}
.article h4{font-size:1.05rem;margin:32px 0 8px;}
.article p,.article li{font-size:0.95rem;line-height:1.8;}
.article p{margin:0 0 16px;}
.article ul,.article ol{padding-left:1.4em;margin:0 0 16px;}
.article li{margin:0 0 4px;}
.article img{display:block;max-width:100%;height:auto;margin:20px 0;border:1px solid var(--line);}
.article figure{margin:20px 0;}
.article figure img{margin:0;}
.article figcaption{color:var(--text-dim);font-size:0.82rem;margin-top:8px;}
.article code{background:var(--panel);border:1px solid var(--line);padding:1px 6px;font-size:0.88em;border-radius:2px;}
.article pre{background:var(--panel);border:1px solid var(--line);padding:14px 16px;overflow-x:auto;margin:0 0 20px;}
.article pre code{border:0;padding:0;background:none;}
.article blockquote{margin:0 0 16px;padding:8px 16px;border-left:2px solid var(--line);color:var(--text-dim);}
.article .note{border-left:2px solid var(--amber);background:var(--panel);padding:14px 18px;margin:0 0 20px;font-size:0.92rem;}
.article .note p:last-child{margin-bottom:0;}
.article .tbl{overflow-x:auto;margin:0 0 20px;}
.article table{border-collapse:collapse;width:100%;font-size:0.9rem;}
.article th,.article td{text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.article th{color:var(--text-dim);font-weight:500;}
.related{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);}
.related h4{font-size:1.05rem;margin:0 0 8px;}
.related ul{padding-left:1.2em;margin:0;font-size:0.92rem;}
.back{margin:48px 0 0;font-size:0.92rem;}
.article a,.related a,.back a{color:var(--amber);}

@media (max-width:600px){.page-head{padding:48px 0 32px;}.page-head h2{font-size:1.6rem;}nav{gap:16px;font-size:0.85rem;}}