/* =========================================================================
course.css — コース教材ページ 共通スタイル
-------------------------------------------------------------------------
各 courseN/index.html の に1行:
▼ コースごとに変えるのは色だけです。ページの で上書きします:
--acc1 … 主アクセント（見出し番号・ボタン・目次のハイライト・トップへ戻る）
--acc2 … 副アクセント（グラデーションのもう一方）
--acc-num … 章番号バッジのグラデ終端（既定 = --acc2）
--acc-quiz … クイズ見出しの色（既定 = --s7）
※ 見た目は既存ページから変えていません（色以外は共通）。
========================================================================= */
:root{
color-scheme: light;
--surface-1:#fcfcfb; --page:#f4f4f1; --panel:#ffffff;
--ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
--grid:#e1e0d9; --line:#c3c2b7; --border:rgba(11,11,11,.10);
--s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
--s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;
--good:#0ca30c; --warn:#c98500; --crit:#d03b3b;
--code-bg:#f5f6f8; --code-ink:#0b2540;
--shadow:0 1px 2px rgba(11,11,11,.04),0 8px 28px rgba(11,11,11,.06);
--radius:14px;
/* ---- アクセント（コース側で上書き可） ---- */
--acc1:var(--s1); --acc2:var(--s3);
--acc-num:var(--acc2); --acc-quiz:var(--s7);
}
:root[data-theme="dark"]{
color-scheme: dark;
--surface-1:#1a1a19; --page:#0d0d0d; --panel:#161615;
--ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
--grid:#2c2c2a; --line:#383835; --border:rgba(255,255,255,.10);
--s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
--s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
--good:#0ca30c; --warn:#eda100; --crit:#e66767;
--code-bg:#12161c; --code-ink:#cfe3ff;
--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0; background:var(--page); color:var(--ink);
font-family:system-ui,-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
line-height:1.75; font-size:16px; -webkit-font-smoothing:antialiased;
}
a{color:var(--s1)}
/* ---------- Layout ---------- */
.app{display:grid; grid-template-columns:300px 1fr; min-height:100vh}
.sidebar{
position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
background:var(--panel); border-right:1px solid var(--border); padding:22px 16px;
}
.content{max-width:920px; margin:0 auto; padding:40px 40px 120px; width:100%; min-width:0}
@media(max-width:900px){
.app{grid-template-columns:1fr}
.sidebar{position:fixed; z-index:40; width:290px; left:-320px; transition:left .25s; box-shadow:var(--shadow)}
.sidebar.open{left:0}
.content{padding:76px 18px 100px}
.menu-btn{display:inline-flex !important}
}
/* ---------- Sidebar ---------- */
.brand{font-weight:800; font-size:15px; letter-spacing:.02em; margin:2px 6px 4px; display:flex; align-items:center; gap:9px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--acc1),var(--acc2));box-shadow:0 0 0 4px color-mix(in oklab,var(--acc1) 18%,transparent)}
.brand small{display:block; font-weight:600; font-size:11px; color:var(--muted); letter-spacing:.14em; margin-top:2px}
.prog-wrap{margin:14px 6px 16px}
.prog-track{height:8px;border-radius:99px;background:var(--grid);overflow:hidden}
.prog-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc1),var(--acc2));transition:width .4s}
.prog-label{font-size:11.5px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
nav.toc{margin-top:6px}
nav.toc a{
display:flex; gap:9px; align-items:flex-start; text-decoration:none; color:var(--ink2);
font-size:13.5px; padding:8px 10px; border-radius:9px; margin:1px 0; line-height:1.4;
border:1px solid transparent;
}
nav.toc a .n{color:var(--muted); font-variant-numeric:tabular-nums; font-weight:700; min-width:20px}
nav.toc a:hover{background:color-mix(in oklab,var(--acc1) 8%,transparent); color:var(--ink)}
nav.toc a.active{background:color-mix(in oklab,var(--acc1) 14%,transparent); color:var(--ink); font-weight:600; border-color:color-mix(in oklab,var(--acc1) 30%,transparent)}
nav.toc a.done .n::after{content:"✓"; color:var(--good); margin-left:2px}
.toc-foot{margin:16px 6px 4px; font-size:11px; color:var(--muted)}
/* ---------- Topbar (mobile) ---------- */
.topbar{
display:none; position:fixed; top:0; left:0; right:0; z-index:30; height:56px;
background:var(--panel); border-bottom:1px solid var(--border); align-items:center; gap:12px; padding:0 14px;
}
@media(max-width:900px){.topbar{display:flex}}
.menu-btn{display:none; align-items:center; justify-content:center; width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-1);color:var(--ink);cursor:pointer;font-size:18px}
.topbar .brand{font-size:13px}
/* ---------- Theme toggle ---------- */
.theme-btn{margin-left:auto; border:1px solid var(--border); background:var(--surface-1); color:var(--ink2);
border-radius:99px; padding:6px 12px; font-size:12.5px; cursor:pointer; display:inline-flex; gap:7px; align-items:center}
.theme-btn:hover{color:var(--ink)}
/* ---------- Hero ---------- */
.hero{
background:
radial-gradient(1100px 320px at 12% -10%, color-mix(in oklab,var(--acc1) 20%,transparent), transparent 60%),
radial-gradient(900px 300px at 95% 0%, color-mix(in oklab,var(--acc2) 16%,transparent), transparent 55%),
var(--panel);
border:1px solid var(--border); border-radius:20px; padding:34px 32px; box-shadow:var(--shadow); margin-bottom:30px;
}
.hero .kicker{font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--acc1); text-transform:uppercase}
.hero h1{font-size:30px; line-height:1.28; margin:10px 0 8px; letter-spacing:.01em}
.hero p{color:var(--ink2); margin:0 0 4px; max-width:var(--lead-max,62ch)}
.hero .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip{font-size:12px; padding:5px 11px; border-radius:99px; background:var(--surface-1); border:1px solid var(--border); color:var(--ink2)}
/* ---------- Module ---------- */
section.module{scroll-margin-top:74px; margin:0 0 26px}
.mhead{display:flex; align-items:center; gap:14px; margin:38px 0 6px}
.mnum{
flex:0 0 auto; width:46px;height:46px;border-radius:13px; display:grid; place-items:center;
font-weight:800; font-size:19px; color:#fff; background:linear-gradient(135deg,var(--acc1),var(--acc-num));
box-shadow:0 6px 16px color-mix(in oklab,var(--acc1) 34%,transparent)}
.module h2{font-size:23px; margin:0; line-height:1.3}
.module h3{font-size:17.5px; margin:26px 0 8px; letter-spacing:.01em}
.module h4{font-size:15px; margin:18px 0 6px; color:var(--ink)}
.module p{color:var(--ink2)}
.module em{color:var(--s3); font-style:normal; font-weight:600}
.objectives{
border:1px solid var(--border); border-left:4px solid var(--s3); background:color-mix(in oklab,var(--s3) 6%,var(--panel));
border-radius:12px; padding:14px 18px; margin:14px 0 6px}
.objectives b{font-size:12.5px; letter-spacing:.1em; color:var(--s6); text-transform:uppercase}
.objectives ul{margin:8px 0 2px; padding-left:20px} .objectives li{margin:3px 0; color:var(--ink2)}
/* ---------- Callouts ---------- */
.note,.warnbox,.keybox{border-radius:12px; padding:14px 16px 14px 46px; margin:16px 0; position:relative; border:1px solid var(--border); font-size:14.5px}
.note{background:color-mix(in oklab,var(--s1) 7%,var(--panel))}
.warnbox{background:color-mix(in oklab,var(--warn) 12%,var(--panel))}
.keybox{background:color-mix(in oklab,var(--s7) 9%,var(--panel))}
.note::before,.warnbox::before,.keybox::before{position:absolute; left:15px; top:13px; font-size:18px}
.note::before{content:"💡"} .warnbox::before{content:"⚠️"} .keybox::before{content:"🔑"}
.note b,.warnbox b,.keybox b{color:var(--ink)}
/* ---------- Tables ---------- */
.tbl{width:100%; border-collapse:collapse; margin:16px 0; font-size:13.5px; overflow:hidden; border-radius:12px; border:1px solid var(--border)}
.tbl th,.tbl td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--grid)}
.tbl thead th{background:var(--surface-1); font-size:12px; letter-spacing:.03em; color:var(--ink2); text-transform:uppercase}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:color-mix(in oklab,var(--acc1) 5%,transparent)}
.tbl td.num{font-variant-numeric:tabular-nums; text-align:right}
.tblwrap{overflow-x:auto}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;color:#fff}
/* ---------- Code ---------- */
pre{background:var(--code-bg); color:var(--code-ink); border:1px solid var(--border); border-radius:12px; padding:15px 16px; overflow:auto; font-size:13px; line-height:1.65; margin:14px 0}
code{font-family:"SF Mono",ui-monospace,"Cascadia Code",Menlo,monospace}
p code,li code,td code{background:var(--code-bg); padding:1px 6px; border-radius:6px; font-size:.9em; color:var(--code-ink); border:1px solid var(--border)}
.cm{color:var(--muted)} .kw{color:var(--s7);font-weight:600} .st{color:var(--s3)} .fn{color:var(--s1)}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
/* ---------- Stat tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:18px 0}
.tile{border:1px solid var(--border); border-radius:13px; background:var(--panel); padding:14px 16px; box-shadow:var(--shadow)}
.tile .v{font-size:var(--tile-v,24px); font-weight:800; letter-spacing:-.01em; line-height:var(--tile-v-lh,1.15)}
.tile .l{font-size:12.5px; color:var(--ink2); margin-top:4px}
.tile .s{font-size:11px; color:var(--muted); margin-top:2px}
/* ---------- Stack diagram ---------- */
.stack{display:flex; flex-direction:column; gap:8px; margin:18px 0}
.layer{display:flex; align-items:center; gap:14px; border:1px solid var(--border); border-radius:12px; padding:13px 16px; background:var(--panel); box-shadow:var(--shadow); position:relative; overflow:hidden}
.layer::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--c)}
.layer .ico{flex:0 0 auto; width:40px;height:40px;border-radius:10px; display:grid;place-items:center; font-size:20px; background:color-mix(in oklab,var(--c) 16%,var(--panel))}
.layer .tx b{display:block; font-size:14.5px} .layer .tx span{font-size:12.5px; color:var(--ink2)}
.layer .ex{margin-left:auto; font-size:11.5px; color:var(--muted); text-align:right; max-width:44%}
/* ---------- Pipeline ---------- */
.pipe{display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; margin:18px 0}
.pnode{flex:1 1 120px; min-width:120px; border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:12px; text-align:center; box-shadow:var(--shadow)}
.pnode .pi{font-size:22px} .pnode b{display:block; font-size:13px; margin-top:4px} .pnode span{font-size:11.5px; color:var(--muted)}
.parrow{display:grid; place-items:center; color:var(--muted); font-size:20px}
/* スマホ幅では矢印を縦向きに。回転で横にはみ出さないよう幅と高さを固定する */
@media(max-width:640px){.parrow{transform:rotate(90deg); flex:1 1 100%; width:100%; height:24px; align-self:center}}
/* ---------- Inline SVG figures (theme-aware) ---------- */
figure.svgfig{margin:20px 0; border:1px solid var(--border); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); padding:18px 18px 8px; overflow:hidden}
figure.svgfig svg{display:block; width:100%; height:auto}
figure.svgfig svg text{font-family:system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
figure.svgfig figcaption{font-size:12.5px; color:var(--muted); margin-top:10px; padding-top:10px; border-top:1px solid var(--border); text-align:center; line-height:1.6}
/* ---------- Quiz ---------- */
.quiz{border:1px solid var(--border); border-radius:14px; background:var(--panel); padding:18px 20px; margin:22px 0; box-shadow:var(--shadow)}
.quiz .qh{display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; color:var(--acc-quiz); margin-bottom:2px}
.quiz .q{font-weight:600; margin:12px 0 8px}
.quiz .opt{display:block; width:100%; text-align:left; border:1px solid var(--border); background:var(--surface-1); color:var(--ink);
border-radius:10px; padding:10px 13px; margin:6px 0; cursor:pointer; font-size:14px; transition:.15s}
.quiz .opt:hover{border-color:var(--acc1)}
.quiz .opt.correct{background:color-mix(in oklab,var(--good) 16%,var(--panel)); border-color:var(--good)}
.quiz .opt.wrong{background:color-mix(in oklab,var(--crit) 14%,var(--panel)); border-color:var(--crit)}
.quiz .opt:disabled{cursor:default}
.quiz .fb{font-size:13px; margin-top:8px; padding:10px 12px; border-radius:9px; display:none}
.quiz .fb.show{display:block}
.quiz .fb.ok{background:color-mix(in oklab,var(--good) 12%,var(--panel)); color:var(--ink)}
.quiz .fb.no{background:color-mix(in oklab,var(--crit) 10%,var(--panel)); color:var(--ink)}
.done-row{display:flex; align-items:center; gap:10px; margin:18px 0 4px; padding-top:14px; border-top:1px dashed var(--line)}
.done-btn{border:1px solid var(--s3); background:transparent; color:var(--s6); font-weight:700; font-size:13px; padding:8px 16px; border-radius:99px; cursor:pointer; display:inline-flex; gap:7px; align-items:center}
.done-btn.on{background:var(--s3); color:#fff; border-color:var(--s3)}
/* ---------- Glossary ---------- */
details.gl{border:1px solid var(--border); border-radius:10px; margin:8px 0; background:var(--panel); overflow:hidden}
details.gl summary{cursor:pointer; padding:12px 16px; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center}
details.gl summary::-webkit-details-marker{display:none}
details.gl summary::after{content:"+"; color:var(--muted); font-size:18px}
details.gl[open] summary::after{content:"–"}
details.gl .gb{padding:0 16px 14px; color:var(--ink2); font-size:14px}
details.gl .term-en{font-size:12px; color:var(--muted); font-weight:500}
/* ---------- misc ---------- */
.lead{font-size:17px; color:var(--ink2); margin:6px 0 18px}
.divider{height:1px; background:var(--grid); margin:30px 0}
ul.clean{padding-left:20px} ul.clean li{margin:5px 0; color:var(--ink2)}
.footer{margin-top:40px; padding-top:20px; border-top:1px solid var(--border); font-size:12.5px; color:var(--muted)}
.footer a{color:var(--s1)}
.backtop{position:fixed; right:22px; bottom:22px; z-index:20; width:44px;height:44px;border-radius:50%;
background:var(--acc1); color:#fff; border:none; cursor:pointer; box-shadow:var(--shadow); font-size:18px; display:none}
.backtop.show{display:block}
.srcnote{font-size:12px; color:var(--muted); margin-top:6px}
/* ---------- Audio buttons ---------- */
.audio-btn{
display:inline-flex; align-items:center; gap:8px; cursor:pointer;
border:1px solid color-mix(in oklab,var(--acc1) 45%,var(--border));
background:color-mix(in oklab,var(--acc1) 10%,var(--panel)); color:var(--acc1);
border-radius:99px; padding:7px 14px; font-size:13px; font-weight:700;
font-family:inherit; transition:.18s; white-space:nowrap; line-height:1;
}
.audio-btn:hover{background:color-mix(in oklab,var(--acc1) 18%,var(--panel))}
.audio-btn .ai{font-size:13px; width:14px; text-align:center}
.audio-btn.playing{background:var(--acc1); color:#fff; border-color:var(--acc1)}
.audio-btn.playing .ai{animation:pulse 1.4s ease-in-out infinite}
.audio-btn.loading{opacity:.75}
.audio-btn.error{background:color-mix(in oklab,var(--warn) 16%,var(--panel)); color:var(--warn); border-color:color-mix(in oklab,var(--warn) 45%,var(--border))}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.mhead .audio-btn{margin-left:auto}
.audio-hint{font-size:12.5px; color:var(--muted); margin:8px 6px 0; display:flex; gap:7px; align-items:flex-start; line-height:1.5}
/* ---------- 再生速度（course.js が挿入） ---------- */
.rate-box{display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap;
border:1px solid var(--border); background:var(--surface-1); border-radius:99px; padding:5px 12px 5px 13px}
.rate-box .rl{font-size:12.5px; font-weight:700; color:var(--ink2); white-space:nowrap}
.rate-box select{
font-family:inherit; font-size:13px; font-weight:700; color:var(--ink);
background:var(--panel); border:1px solid var(--border); border-radius:99px;
padding:4px 10px; cursor:pointer; line-height:1.4;
}
.rate-box select:focus-visible{outline:2px solid var(--acc1); outline-offset:1px}
.rate-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px}
/* ---------- Back-to-index link ---------- */
.backlink{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink2); text-decoration:none;
border:1px solid var(--border); background:var(--surface-1); border-radius:99px; padding:6px 12px; transition:.15s; white-space:nowrap}
.backlink:hover{color:var(--ink); border-color:var(--line); background:color-mix(in oklab,var(--acc1) 8%,var(--panel))}
.sidebar .backlink{margin:0 6px 14px}
/* ---------- Summary figure ---------- */
.summary{margin:44px 0 8px; scroll-margin-top:74px}
.summary .shead{display:flex; align-items:center; gap:14px; margin:0 0 14px}
.summary .snum{flex:0 0 auto; width:46px;height:46px;border-radius:13px; display:grid; place-items:center;
font-size:22px; color:#fff; background:linear-gradient(135deg,var(--acc2),var(--acc1));
box-shadow:0 6px 16px color-mix(in oklab,var(--acc2) 34%,transparent)}
.summary h2{font-size:23px; margin:0; line-height:1.3}
.summary figure{margin:0; border:1px solid var(--border); border-radius:16px; background:var(--panel);
box-shadow:var(--shadow); overflow:hidden}
.summary a.figlink{display:block; line-height:0}
.summary img{display:block; width:100%; height:auto; background:var(--surface-1)}
.summary figcaption{font-size:12.5px; color:var(--muted); padding:12px 16px; line-height:1.6; border-top:1px solid var(--border)}
.summary .imgfallback{display:none; padding:38px 20px; text-align:center; color:var(--muted); font-size:13.5px; line-height:1.7}
.summary figure.missing img{display:none}
.summary figure.missing .imgfallback{display:block}
.summary figure.missing figcaption{display:none}