/* 統計の考え方ガイド 共通スタイル（サイト本体の紺と金に合わせる） */
:root {
    --navy:#1a2535; --navy2:#2c3e50; --gold:#c9a84c; --gold-deep:#9a7a2a;
    --text:#2c3e50; --muted:#5a6c7d; --faint:#8a97a3;
    --bg:#f7f8fa; --white:#ffffff; --tint:#f1f4f7; --line:rgba(0,0,0,0.08);
    --pop:#3d6fa8; --pop-soft:#c9d8ea; --mean:#b3541e; --biased:#8a464f; --accent2:#3f7352;
    --radius:12px;
    --serif:'DM Serif Display',"Hiragino Mincho ProN","Yu Mincho",serif;
    --sans:'DM Sans',"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",Meiryo,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.8; font-size:16px; }
a { color:var(--navy2); }
a:focus-visible, button:focus-visible, select:focus-visible, input[type=range]:focus-visible, input:focus-visible + label { outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }

/* NAV */
.site-nav { position:sticky; top:0; z-index:100; background:rgba(26,37,53,0.97); backdrop-filter:blur(12px); border-bottom:2px solid var(--gold); height:56px; display:flex; align-items:center; }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:14px; width:100%; }
.nav-logo { color:var(--gold); text-decoration:none; font-weight:600; font-size:0.95em; font-family:var(--serif); white-space:nowrap; }
.nav-sep { color:rgba(255,255,255,0.3); }
.crumb { color:rgba(255,255,255,0.6); font-size:0.88em; text-decoration:none; white-space:nowrap; }
a.crumb:hover { color:var(--gold); }
.crumb.now { color:rgba(255,255,255,0.88); overflow:hidden; text-overflow:ellipsis; }
.lang-switch { margin-left:auto; display:flex; align-items:center; gap:4px; flex-shrink:0; }
.lang-btn { padding:4px 10px; border-radius:12px; font-size:0.78em; font-weight:700; letter-spacing:0.04em; text-decoration:none; border:1.5px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.6); line-height:1; }
a.lang-btn:hover { border-color:var(--gold); color:var(--gold); }
.lang-btn.active { background:var(--gold); border-color:var(--gold); color:#1a2535; }

/* HEADER */
.page-header { background:linear-gradient(135deg,var(--navy) 0%,#243447 60%,#1a3040 100%); color:#fff; padding:52px 0 46px; position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(201,168,76,0.03) 40px,rgba(201,168,76,0.03) 41px); }
.page-header-inner { max-width:820px; margin:0 auto; padding:0 24px; position:relative; }
.eyebrow { font-size:0.74em; letter-spacing:0.16em; color:var(--gold); font-weight:600; margin-bottom:12px; }
.eyebrow b { font-family:var(--serif); font-weight:400; font-size:1.5em; letter-spacing:0; margin-right:8px; vertical-align:-2px; }
.eyebrow a { color:inherit; text-decoration:none; }
.page-header h1 { font-family:var(--serif); font-weight:400; font-size:2.35em; line-height:1.35; text-wrap:balance; }
.page-header .sub { color:rgba(255,255,255,0.72); margin-top:10px; font-size:0.98em; }

/* ARTICLE */
.article { max-width:820px; margin:0 auto; padding:40px 24px 24px; }
section { margin-top:56px; }
section:first-child { margin-top:0; }
h2 { font-family:var(--serif); font-weight:400; font-size:1.6em; color:var(--navy2); line-height:1.4; margin-bottom:14px; text-wrap:balance; }
h3 { font-size:1.02em; font-weight:600; color:var(--navy2); margin-bottom:4px; }
p + p { margin-top:14px; }
.muted { color:var(--muted); }
.num { font-variant-numeric:tabular-nums; white-space:nowrap; }

.oneline { background:var(--white); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius); padding:22px 26px; }
.oneline .label { font-size:0.74em; letter-spacing:0.14em; font-weight:700; color:var(--gold-deep); margin-bottom:6px; }
.oneline p { font-family:var(--serif); font-size:1.28em; line-height:1.7; color:var(--navy2); }

.examples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.ex { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; }
.ex h3 { font-size:0.98em; }
.ex p { font-size:0.88em; color:var(--muted); margin-top:4px; line-height:1.7; }

.terms { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin-top:20px; padding:16px 20px; background:var(--tint); border-radius:var(--radius); font-size:0.92em; }
.terms dt { font-weight:600; color:var(--navy2); white-space:nowrap; }

/* FIGURES（本文内の静的な図） */
.figure { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 14px; margin-top:20px; }
.figure canvas { display:block; width:100%; height:260px; }
.figure + p, .figure + .terms, .lab + .article > section:first-child { margin-top:18px; }
.figcap { font-size:0.84em; color:var(--muted); margin-top:8px; line-height:1.7; }
.stat-row { display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:14px; font-size:0.9em; }
.stat-row div { display:flex; flex-direction:column; }
.stat-row span { font-size:0.8em; color:var(--muted); }
.stat-row b { font-family:var(--serif); font-weight:400; font-size:1.45em; color:var(--navy2); font-variant-numeric:tabular-nums; line-height:1.3; }

/* LAB（体験パネル。本文より広い） */
.lab { max-width:1000px; margin:22px auto 0; padding:0 24px; }
.lab-inner { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px 24px 20px; box-shadow:0 10px 30px -18px rgba(26,37,53,0.35); }
.lab-top { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.lab-title { font-family:var(--serif); font-size:1.25em; color:var(--navy2); margin-right:auto; }
.seg { display:inline-flex; flex-wrap:wrap; border:1.5px solid var(--navy2); border-radius:22px; overflow:hidden; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg label { padding:6px 14px; font-size:0.86em; cursor:pointer; color:var(--navy2); font-variant-numeric:tabular-nums; }
.seg input:checked + label { background:var(--navy2); color:#fff; }
.seg-cap { font-size:0.82em; color:var(--muted); display:block; }
.lab-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; margin-top:16px; }
.lab canvas { display:block; width:100%; height:300px; }
.btns { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.btn { font:inherit; font-size:0.88em; font-weight:600; padding:8px 16px; border-radius:22px; border:1.5px solid var(--navy2); background:var(--navy2); color:#fff; cursor:pointer; transition:filter .2s; }
.btn:hover { filter:brightness(1.15); }
.btn.ghost { background:transparent; color:var(--navy2); }
.btn:disabled { opacity:.5; cursor:default; }
.select { font:inherit; font-size:0.9em; padding:6px 10px; border-radius:8px; border:1.5px solid var(--navy2); color:var(--navy2); background:var(--white); }
.range-row { display:flex; align-items:center; gap:10px; font-size:0.88em; }
.range-row input[type=range] { flex:1; accent-color:var(--navy2); }
.side { display:flex; flex-direction:column; gap:12px; font-size:0.9em; }
.readout { display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:14px 16px; background:var(--tint); border-radius:10px; }
.readout dt { color:var(--muted); font-size:0.9em; }
.readout dd { text-align:right; font-weight:600; color:var(--navy2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.readout dd.off { color:var(--biased); }
.toggle { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1.5px dashed color-mix(in srgb,var(--biased) 45%,white); border-radius:10px; }
.toggle input { margin-top:5px; accent-color:var(--biased); width:16px; height:16px; flex-shrink:0; }
.toggle label { font-size:0.92em; line-height:1.6; cursor:pointer; }
.toggle label small { display:block; color:var(--muted); font-size:0.88em; }
.last { margin-top:14px; font-size:0.86em; color:var(--muted); }
.chips { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.chip { font-size:0.84em; padding:1px 8px; border-radius:8px; background:var(--tint); color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.chip.heavy { background:color-mix(in srgb,var(--mean) 14%,white); color:var(--mean); font-weight:600; }
.hint { margin-top:12px; padding:12px 16px; border-radius:10px; background:color-mix(in srgb,var(--gold) 12%,white); font-size:0.9em; line-height:1.75; }

/* TABLE / FORMULA */
table.data { width:100%; border-collapse:collapse; margin-top:14px; background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); font-size:0.94em; }
table.data th, table.data td { padding:10px 14px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; }
table.data th:first-child, table.data td:first-child { text-align:left; }
table.data thead th { background:var(--tint); font-weight:600; font-size:0.88em; color:var(--muted); }
table.data tr:last-child td { border-bottom:none; }
.table-wrap { overflow-x:auto; }
.formula { font-family:var(--serif); font-size:1.15em; color:var(--navy2); }
.formula-block { text-align:center; margin:18px 0; padding:14px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; }

/* MYTHS */
.myths { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.myth { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; display:grid; grid-template-columns:auto 1fr; gap:4px 14px; }
.myth .x { grid-row:span 2; width:26px; height:26px; border-radius:50%; background:color-mix(in srgb,var(--biased) 12%,white); color:var(--biased); display:flex; align-items:center; justify-content:center; font-size:0.8em; margin-top:2px; }
.myth h3 { color:var(--biased); }
.myth p { font-size:0.94em; }

/* COURSE LINKS */
.course-links { display:flex; flex-direction:column; border-top:1px solid var(--line); margin-top:8px; }
.cl { display:grid; grid-template-columns:170px 1fr auto; gap:4px 16px; align-items:baseline; padding:12px 4px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--text); }
.cl:hover { background:var(--white); }
.cl b { color:var(--c); font-weight:600; white-space:nowrap; }
.cl span { font-size:0.92em; }
.cl i { color:var(--faint); font-size:0.8em; }

/* 英語版：授業名が長いので欄を広げ、折り返しを許す */
html[lang="en"] .cl { grid-template-columns:minmax(0,240px) minmax(0,1fr) auto; }
html[lang="en"] .cl b { white-space:normal; }

/* PAGER / SOURCE / FOOTER */
.pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:48px; }
.pg { border:1px solid var(--line); border-radius:var(--radius); padding:14px 18px; background:var(--white); color:var(--navy2); font-size:0.94em; text-decoration:none; }
a.pg:hover { border-color:var(--navy2); }
.pg small { display:block; font-size:0.8em; letter-spacing:0.08em; color:var(--faint); }
.pg.next { text-align:right; }
.pg.empty { visibility:hidden; }
.source { margin-top:40px; font-size:0.82em; color:var(--muted); line-height:1.8; }
.page-footer { background:var(--navy2); color:rgba(255,255,255,0.7); text-align:center; padding:32px 16px; font-size:0.88em; margin-top:56px; }
.page-footer a { color:var(--gold); text-decoration:none; }

@media (max-width:820px) {
    .lab-grid { grid-template-columns:minmax(0,1fr); }
    .examples { grid-template-columns:minmax(0,1fr); }
    .cl, html[lang="en"] .cl { grid-template-columns:minmax(0,1fr) auto; }
    .cl span { grid-column:1; }
}
@media (max-width:640px) {
    .nav-inner { padding:0 16px; }
    .crumb:not(.now), .nav-sep:not(:first-of-type) { display:none; }
    .page-header h1 { font-size:1.8em; }
    .article, .lab, .page-header-inner { padding-left:16px; padding-right:16px; }
    .lab-inner { padding:18px 16px; }
    .terms { grid-template-columns:minmax(0,1fr); gap:2px; }
    .terms dd { margin-bottom:8px; }
    .pager { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { .btn { transition:none; } }