/* JavaScript 入門 学習資料 共通スタイル。章の色（.chNN）と番号の数え方は各ページに書く */
:root{
	--navy1:#12224d; --navy2:#2f5fbf; --ink:#1c2330; --ink-soft:#4a5568; --line:#d9dfe8; --code-bg:#f4f6fa; --link:#1a4fa0;
	--accent:var(--navy1); --accent2:var(--navy2); --soft:#f2f5fb;
}
body{margin:0;background:#ffffff;color:var(--ink,#1c2330);font-family:"Segoe UI","Yu Gothic UI","Meiryo",sans-serif;font-size:15.5px;line-height:1.85;}
a{color:var(--link,#1a4fa0);background:transparent;}

/* タイトルバー */
.titlebar{background:linear-gradient(135deg,var(--navy1,#12224d),var(--navy2,#2f5fbf));color:#fff;padding:34px 30px 30px;}
.titlebar .inner{max-width:1600px;margin:0 auto;padding:0 30px;}
.titlebar h1{font-size:2em;margin:0 0 6px;color:#fff;}
.titlebar .lead,.titlebar .date{color:#e6ecf8;background:transparent;margin:4px 0;font-size:0.92em;}
.titlebar code{background:rgba(255,255,255,0.16);color:#fff;border:none;}

.wrap{max-width:1600px;margin:0 auto;padding:0 30px;}
footer{max-width:1600px;margin:0 auto;padding:18px 30px 30px;background:#ffffff;color:var(--ink-soft,#4a5568);}

/* 前へ・次へ・目次のバッジ（色は各リンクの style で資料ごとに渡す） */
.docnav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;}
footer .docnav{margin:0;}
a.doclink{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 9px;border-radius:6px;background:linear-gradient(100deg,var(--accent,#12224d),var(--accent2,#2f5fbf));color:#fff;text-decoration:none;box-shadow:0 2px 5px rgba(0,0,0,0.15);}
a.doclink.home{background:linear-gradient(100deg,var(--navy1,#12224d),var(--navy2,#2f5fbf));color:#fff;}
a.doclink svg{width:16px;height:16px;}

/* 目次 */
.toc ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0;}
.toc ol a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:310px;max-width:100%;padding:6px 12px;border-radius:6px;font-weight:700;text-decoration:none;background:linear-gradient(100deg,var(--accent,#12224d),var(--accent2,#2f5fbf));color:#fff;box-sizing:border-box;}

/* 章 */
section{margin:34px 0;padding:4px 26px 26px;border-radius:10px;background:linear-gradient(180deg,var(--soft,#f2f5fb),#ffffff);color:var(--ink,#1c2330);}
section h1{font-size:1.5em;margin:26px 0 20px;padding:14px 20px;border-radius:8px;background:linear-gradient(100deg,var(--accent,#12224d),var(--accent2,#2f5fbf));color:#fff;box-shadow:0 3px 10px rgba(0,0,0,0.18);}
section h1 code{background:rgba(255,255,255,0.16);color:#fff;border:none;}
h2{font-size:1.18em;margin:30px 0 12px;padding:6px 12px;border-left:6px solid var(--accent,#12224d);background:linear-gradient(90deg,var(--soft,#f2f5fb),#ffffff);color:var(--ink,#1c2330);}
h3{font-size:1.05em;margin:20px 0 8px;padding-bottom:3px;display:inline-block;border-bottom:2px dotted var(--accent2,#2f5fbf);color:var(--ink,#1c2330);background:transparent;}
strong{color:var(--accent,#12224d);background:transparent;}

/* コード */
code{font-family:Consolas,"BIZ UDGothic","MS Gothic",monospace;background:var(--code-bg,#f4f6fa);border:1px solid var(--line,#d9dfe8);color:#17335f;padding:0 4px;border-radius:4px;font-size:0.92em;}
pre{background:linear-gradient(180deg,var(--code-bg,#f4f6fa),#ffffff);color:var(--ink,#1c2330);border:1px solid var(--line,#d9dfe8);border-left:5px solid var(--accent2,#2f5fbf);border-radius:6px;padding:13px 16px;overflow-x:auto;line-height:1.6;margin:10px 0;}
pre code{background:transparent;border:none;padding:0;color:#17335f;font-size:0.92em;}
pre.output{background:#fbfbf7;color:#2d3a2a;border-left-color:#7a8a5a;}
pre.output code{color:#2d3a2a;background:transparent;}
.tk-com{color:#5f6b7a;background:transparent;font-style:italic;}
.tk-str{color:#a3360f;background:transparent;}
.tk-num{color:#0b6e4f;background:transparent;}
.tk-key{color:#7a1fa2;background:transparent;font-weight:700;}

/* 例と実行 */
.example{margin:14px 0 18px;}
.example .filename{margin:10px 0 -6px;font-size:0.85em;font-weight:700;color:var(--ink-soft,#4a5568);background:transparent;}
.is-hidden{display:none !important;}
.run-bar{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 8px;}
.run-btn{font:inherit;font-size:0.85em;font-weight:700;padding:2px 12px;border-radius:6px;border:none;cursor:pointer;color:#fff;background:linear-gradient(100deg,var(--accent,#12224d),var(--accent2,#2f5fbf));}
.run-btn.b-edit,.run-btn.b-reset{background:linear-gradient(100deg,#5a6472,#97a1ae);color:#fff;}
.run-btn.b-stop{background:linear-gradient(100deg,#a51f22,#e05a5c);color:#fff;}
.run-btn:disabled{opacity:0.55;cursor:default;}
.code-editor{display:block;width:100%;box-sizing:border-box;font-family:Consolas,"BIZ UDGothic","MS Gothic",monospace;font-size:0.9em;line-height:1.6;padding:12px 14px;border:2px solid var(--accent2,#2f5fbf);border-radius:6px;background:#ffffff;color:#17335f;margin:10px 0;tab-size:4;}
.console{border-radius:6px;overflow:hidden;margin:0 0 14px;box-shadow:0 2px 6px rgba(0,0,0,0.12);}
.console-head{font-size:0.8em;font-weight:700;padding:3px 12px;background:#2b3240;color:#e6ecf8;}
.frame-box{background:#ffffff;color:var(--ink,#1c2330);border-bottom:3px solid #2b3240;}
.example-frame{display:block;width:100%;height:120px;border:none;background:#ffffff;}
.console-body{background:#1d222c;color:#e8edf5;padding:8px 12px;font-family:Consolas,"BIZ UDGothic","MS Gothic",monospace;font-size:0.88em;line-height:1.55;}
.console-body .line{white-space:pre-wrap;word-break:break-all;background:transparent;color:#e8edf5;}
.console-body .warn{color:#ffd479;background:rgba(255,212,121,0.08);}
.console-body .error{color:#ff9b9b;background:rgba(255,120,120,0.10);}
.console-body .note{color:#9fb0c8;background:transparent;font-style:italic;}

/* 表 */
.tablewrap{overflow-x:auto;}
table{border-collapse:collapse;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,0.08);margin:10px 0;}
th{background:linear-gradient(100deg,var(--accent,#12224d),var(--accent2,#2f5fbf));color:#fff;padding:9px 12px;text-align:left;font-size:0.95em;}
th code{background:rgba(255,255,255,0.16);color:#fff;border:none;}
td{padding:9px 12px;border-bottom:1px solid var(--line,#d9dfe8);vertical-align:top;background:#ffffff;color:var(--ink,#1c2330);}
tr:nth-child(even) td{background:#fafbfe;}
td.nowrap,th.nowrap{white-space:nowrap;}
td.num{text-align:right;white-space:nowrap;}

/* バッジ */
.badge{display:inline-block;padding:0 8px;margin-right:4px;border-radius:6px;font-size:0.82em;font-weight:700;white-space:nowrap;color:#fff;background:linear-gradient(100deg,var(--accent,#12224d),var(--accent2,#2f5fbf));}
.b-ok{background:linear-gradient(100deg,#1d7a3c,#45b56c);color:#fff;}
.b-ng{background:linear-gradient(100deg,#a51f22,#e05a5c);color:#fff;}
.b-none{background:linear-gradient(100deg,#5a6472,#97a1ae);color:#fff;}
.b-warn{background:linear-gradient(100deg,#b8620a,#f0a548);color:#fff;}

/* callout */
.callout{border-left:6px solid var(--accent,#12224d);background:linear-gradient(180deg,var(--soft,#f2f5fb),#ffffff);color:var(--ink,#1c2330);border-radius:0 8px 8px 0;padding:8px 16px;margin:14px 0;box-shadow:0 1px 4px rgba(0,0,0,0.06);}
.callout strong{color:var(--accent,#12224d);background:transparent;}
.callout-tip{border-left-color:#1d7a3c;}
.callout-important{border-left-color:#5b2bb5;}
.callout-warning{border-left-color:#b8620a;}
.callout-caution{border-left-color:#a51f22;}
.callout .label{font-weight:700;}

/* 図 */
figure{margin:16px 0;}
figure svg{display:block;width:100%;max-width:920px;height:auto;}
/* 地図の図の箱はリンク。指を乗せると明るくし、キーボードで選ぶと枠を出す */
svg.map a{cursor:pointer;}
svg.map a:hover rect{filter:brightness(1.18);}
svg.map a:focus{outline:none;}
svg.map a:focus-visible rect{stroke:#f0a548;stroke-width:3;}
svg.map a:focus-visible text{text-decoration:underline;}
figcaption{font-size:0.88em;color:var(--ink-soft,#4a5568);background:transparent;margin-top:4px;}

/* 資料一覧 */
h3.part-head{font-size:1.15em;margin:26px 0 4px;}
.part-desc{margin:0 0 4px;color:var(--ink-soft,#4a5568);background:transparent;font-size:0.95em;}
ul.chapters.grouped .part{display:none;}
ul.chapters{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
ul.chapters a{display:block;height:100%;box-sizing:border-box;padding:12px 16px;border-radius:8px;text-decoration:none;background:linear-gradient(100deg,var(--accent,#12224d),var(--accent2,#2f5fbf));color:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.15);}
ul.chapters .part{display:block;font-size:0.8em;opacity:0.9;color:#fff;background:transparent;}
ul.chapters .ttl{display:block;font-weight:700;font-size:1.08em;color:#fff;background:transparent;}
ul.chapters .desc{display:block;font-size:0.86em;color:#fff;background:transparent;}

@media (max-width:640px){
	.wrap,footer,.titlebar .inner{padding-left:12px;padding-right:12px;}
	section{padding:4px 14px 18px;}
	/* 表は 1 行を 1 枚のカードにして縦に積む。列の見出しは、セルの前に data-label から出す */
	.tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block;width:100%;box-sizing:border-box;}
	.tablewrap thead{display:none;}
	.tablewrap tr{margin:0 0 10px;border:1px solid var(--line,#d9dfe8);border-radius:8px;overflow:hidden;}
	.tablewrap td{border-bottom:1px solid var(--line,#d9dfe8);}
	.tablewrap td:last-child{border-bottom:none;}
	.tablewrap td.nowrap{white-space:normal;}
	.tablewrap td::before{content:attr(data-label);display:block;font-size:0.82em;font-weight:700;color:var(--accent,#12224d);background:transparent;}
	.tablewrap table{box-shadow:none;border-radius:0;overflow:visible;}
	/* 図は 600px より小さくせず、図の中で横にずらして見せる。右端の影で、続きがあると分かるようにする */
	figure{overflow-x:auto;background:linear-gradient(90deg,#ffffff 30%,rgba(255,255,255,0)) left center / 24px 100% no-repeat local,linear-gradient(270deg,#ffffff 30%,rgba(255,255,255,0)) right center / 24px 100% no-repeat local,radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,0.18),rgba(0,0,0,0)) right center / 12px 100% no-repeat scroll;color:var(--ink,#1c2330);}
	figure svg{min-width:600px;}
	/* 説明文は図と一緒に横へずらさず、左に留める */
	figcaption{position:sticky;left:0;}
}