/* ============================================================
   STATLAB — 配色は matplotlib の viridis（知覚均等カラーマップ）から採取。
   統計サイトの色は、装飾ではなくデータの言語であるべきという方針。
   ============================================================ */
:root {
  --v0: #440154; --v1: #414487; --v2: #2a788e; --v3: #22a884; --v4: #7ad151; --v5: #fde725;
  --mag-warn: #fca636; --mag-risk: #e4548a; --mag-deep: #b12a90;

  --bg: #070a14;
  --bg2: #0b1020;
  --panel: rgba(17, 24, 45, 0.72);
  --panel-solid: #111a2d;
  --panel-hi: rgba(30, 42, 74, 0.6);
  --line: rgba(126, 150, 200, 0.16);
  --line-str: rgba(126, 150, 200, 0.34);
  --ink: #e8eefb;
  --ink-2: #b3c0dd;
  --ink-dim: #7c8bb0;

  --r: 14px; --r-s: 9px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Bricolage Grotesque", "Zen Kaku Gothic New", system-ui, sans-serif;
  --body: "Zen Kaku Gothic New", "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 署名要素：二変量正規密度の等高線フィールド ---------- */
#contourField {
  position: fixed; inset: 0; z-index: 0; opacity: .5;
  pointer-events: none;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(42, 120, 142, .20), transparent 62%),
    radial-gradient(900px 520px at 8% 105%, rgba(68, 1, 84, .34), transparent 60%);
}
.shell { position: relative; z-index: 2; display: flex; min-height: 100vh; }

/* ---------- サイドバー ---------- */
.rail {
  width: 238px; flex: 0 0 238px; padding: 22px 14px 40px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 15, 30, .92), rgba(8, 12, 24, .82));
  backdrop-filter: blur(14px);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: baseline; gap: 9px; padding: 4px 10px 2px; }
.brand h1 {
  font-family: var(--disp); font-size: 25px; font-weight: 800; margin: 0;
  letter-spacing: -.03em;
  background: linear-gradient(96deg, var(--v5), var(--v4) 34%, var(--v3) 62%, var(--v2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand small { font-family: var(--mono); font-size: 9.5px; color: var(--ink-dim); letter-spacing: .18em; }
.rail-sub {
  font-family: var(--mono); font-size: 10px; color: var(--ink-dim);
  padding: 0 10px 16px; letter-spacing: .04em; border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.nav-group { margin-bottom: 16px; }
.nav-group > span {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .19em;
  color: var(--ink-dim); padding: 0 10px 7px; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-bottom: 2px; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--ink-2); font-family: var(--body); font-size: 13px;
  text-align: left; cursor: pointer; transition: background .16s, color .16s;
}
.nav-item:hover { background: var(--panel-hi); color: var(--ink); }
.nav-item[aria-current="true"] {
  background: linear-gradient(90deg, rgba(34, 168, 132, .20), rgba(34, 168, 132, .02));
  color: var(--ink); box-shadow: inset 2px 0 0 var(--v3);
}
.nav-item .g { width: 16px; height: 16px; flex: 0 0 16px; opacity: .9; }

/* ---------- メイン ---------- */
.main { flex: 1; min-width: 0; padding: 26px 30px 90px; max-width: 1520px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.crumb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink-dim); }
h2.page {
  font-family: var(--disp); font-size: 30px; font-weight: 700; letter-spacing: -.025em;
  margin: 2px 0 6px;
}
.page-lede { color: var(--ink-2); max-width: 74ch; margin: 0; font-size: 13.5px; }

.dataChip {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px;
  border: 1px solid var(--line-str); border-radius: 100px; background: var(--panel);
  font-family: var(--mono); font-size: 11px; color: var(--ink-2); backdrop-filter: blur(8px);
}
.dataChip b { color: var(--v4); font-weight: 600; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v3); box-shadow: 0 0 10px var(--v3); }
.dot.off { background: var(--mag-warn); box-shadow: 0 0 10px var(--mag-warn); }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 18px; backdrop-filter: blur(12px);
}
.panel > h3 {
  font-family: var(--disp); font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 4px; display: flex; align-items: center; gap: 9px;
}
.panel > h3::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--v5), var(--v3));
}
.panel > .hint { color: var(--ink-dim); font-size: 12px; margin: 0 0 14px; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- フォーム ---------- */
.field { margin-bottom: 12px; }
.field > label {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  color: var(--ink-dim); text-transform: uppercase; margin-bottom: 5px;
}
select, input[type="text"], input[type="number"], textarea {
  width: 100%; padding: 8px 11px; border-radius: var(--r-s);
  border: 1px solid var(--line-str); background: rgba(6, 10, 22, .74);
  color: var(--ink); font-family: var(--mono); font-size: 12.5px;
  transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--v3); box-shadow: 0 0 0 3px rgba(34, 168, 132, .16);
}
textarea { line-height: 1.6; resize: vertical; min-height: 130px; }
select[multiple] { min-height: 132px; font-size: 12px; }
input[type="range"] { width: 100%; accent-color: var(--v3); }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px;
  border: 0; border-radius: var(--r-s); cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(96deg, var(--v3), var(--v2)); color: #04120e;
  transition: transform .12s, filter .16s, box-shadow .16s;
  box-shadow: 0 5px 20px rgba(34, 168, 132, .22);
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  background: transparent; border: 1px solid var(--line-str); color: var(--ink-2);
  box-shadow: none; font-weight: 500;
}
.btn.ghost:hover { border-color: var(--v3); color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btnrow { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

.chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 5px 11px; border-radius: 100px; border: 1px solid var(--line-str);
  background: transparent; color: var(--ink-2); font-family: var(--mono); font-size: 11px; cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--v3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--v3); border-color: var(--v3); color: #04120e; font-weight: 600; }

/* ---------- 数値カード ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.stat {
  padding: 11px 13px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: rgba(8, 13, 27, .6);
}
.stat .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; }
.stat .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: -.02em; margin-top: 2px; }
.stat.hot .v { color: var(--v5); }
.stat.pos .v { color: var(--v4); }
.stat.neg .v { color: var(--mag-risk); }

/* ---------- 表 ---------- */
.tbl-wrap { overflow-x: auto; border-radius: var(--r-s); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
th, td { padding: 8px 12px; text-align: right; white-space: nowrap; }
th {
  background: rgba(8, 13, 27, .84); color: var(--ink-dim); font-weight: 500;
  font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
  position: sticky; top: 0; border-bottom: 1px solid var(--line-str);
}
th:first-child, td:first-child { text-align: left; }
tbody tr { border-bottom: 1px solid rgba(126, 150, 200, .08); }
tbody tr:hover { background: rgba(34, 168, 132, .06); }
td.sig { color: var(--v5); font-weight: 600; }
td.nsig { color: var(--ink-dim); }
.tbl-wrap.data { max-height: 340px; overflow-y: auto; }
.tbl-wrap.data td { font-size: 11.5px; }

/* ---------- アドバイス ---------- */
.advice { display: grid; gap: 9px; }
.adv {
  border-left: 3px solid var(--line-str); border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: 11px 15px; background: rgba(8, 13, 27, .5);
}
.adv .t {
  font-weight: 700; font-size: 13px; margin-bottom: 3px; display: flex; align-items: center; gap: 8px;
}
.adv .t .tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; padding: 1px 7px;
  border-radius: 100px; border: 1px solid currentColor; text-transform: uppercase; font-weight: 500;
}
.adv .b { color: var(--ink-2); font-size: 13px; }
.adv .b b { color: var(--ink); }
.adv.key { border-left-color: var(--v3); background: linear-gradient(90deg, rgba(34, 168, 132, .10), rgba(8, 13, 27, .5) 60%); }
.adv.key .t { color: var(--v3); }
.adv.ok { border-left-color: var(--v4); } .adv.ok .t { color: var(--v4); }
.adv.info { border-left-color: var(--v2); } .adv.info .t { color: #6fc9dc; }
.adv.warn { border-left-color: var(--mag-warn); } .adv.warn .t { color: var(--mag-warn); }
.adv.risk { border-left-color: var(--mag-risk); background: linear-gradient(90deg, rgba(228, 84, 138, .10), rgba(8, 13, 27, .5) 60%); }
.adv.risk .t { color: var(--mag-risk); }

/* ---------- プロット ---------- */
.plot { width: 100%; min-height: 340px; }
.plot.tall { min-height: 460px; }
.plot.short { min-height: 250px; }
.js-plotly-plot .plotly .modebar { background: transparent !important; }

.empty {
  padding: 46px 20px; text-align: center; color: var(--ink-dim);
  border: 1px dashed var(--line-str); border-radius: var(--r); font-size: 13px;
}
.empty b { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 5px; }

.drop {
  border: 1.5px dashed var(--line-str); border-radius: var(--r); padding: 26px 20px;
  text-align: center; cursor: pointer; transition: all .18s; background: rgba(8, 13, 27, .38);
}
.drop:hover, .drop.over { border-color: var(--v3); background: rgba(34, 168, 132, .07); }
.drop .big { font-family: var(--disp); font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.drop .sm { color: var(--ink-dim); font-size: 12px; }

.note {
  font-size: 12px; color: var(--ink-dim); border-top: 1px solid var(--line);
  padding-top: 11px; margin-top: 14px;
}
.formula {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  background: rgba(6, 10, 22, .6); border: 1px solid var(--line);
  border-radius: var(--r-s); padding: 10px 13px; overflow-x: auto; margin: 10px 0;
}
.pill {
  display: inline-block; font-family: var(--mono); font-size: 10px; padding: 2px 8px;
  border-radius: 100px; border: 1px solid var(--line-str); color: var(--ink-dim); margin-left: 6px;
}
.pill.live { color: var(--v4); border-color: var(--v4); }

/* 決定木の描画 */
.treebox { overflow: auto; max-height: 560px; padding: 10px; }
.tnode rect { rx: 6; }
.tnode text { font-family: var(--mono); font-size: 10px; fill: var(--ink); }
.tedge { stroke: var(--line-str); fill: none; stroke-width: 1.2; }

.progress { height: 3px; background: rgba(126, 150, 200, .16); border-radius: 3px; overflow: hidden; margin: 10px 0; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--v3), var(--v5)); transition: width .2s; }

.sect { display: none; }
.sect.on { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.railToggle { display: none; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .rail {
    position: static; width: 100%; flex: none; height: auto;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 14px;
  }
  .rail.collapsed .nav-group, .rail.collapsed .rail-sub { display: none; }
  .railToggle { display: inline-flex; margin-top: 10px; }
  .main { padding: 18px 14px 70px; }
  h2.page { font-size: 23px; }
  .nav-group { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
  .nav-group > span { width: 100%; }
  .nav-item { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #contourField { display: none; }
}
:focus-visible { outline: 2px solid var(--v4); outline-offset: 2px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(126, 150, 200, .22); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(126, 150, 200, .4); }

/* ============ 診断ナビ / ハンドブック ============ */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.step {
  position: relative; padding: 14px 16px 14px 18px; border-radius: var(--r-s);
  border: 1px solid var(--line); background: rgba(8, 13, 27, .55);
}
.step .num {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--v3);
  border: 1px solid var(--v3); border-radius: 100px; padding: 1px 8px; display: inline-block; margin-bottom: 7px;
}
.step h4 { font-family: var(--disp); font-size: 14px; margin: 0 0 4px; font-weight: 700; }
.step p { margin: 0; font-size: 12.5px; color: var(--ink-2); }

.wz { display: grid; gap: 12px; }
.wz .q { font-family: var(--disp); font-size: 17px; font-weight: 700; }
.wz .opts { display: grid; gap: 8px; }
.wz .opt {
  text-align: left; padding: 12px 15px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid var(--line-str); background: rgba(8, 13, 27, .5); color: var(--ink);
  font-family: var(--body); font-size: 13.5px; transition: all .15s;
}
.wz .opt:hover { border-color: var(--v3); background: rgba(34, 168, 132, .09); transform: translateX(3px); }
.wz .opt small { display: block; color: var(--ink-dim); font-size: 11.5px; margin-top: 2px; }
.wz .trail { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.wz .trail b { color: var(--v4); font-weight: 500; }

.result {
  border: 1px solid var(--v3); border-radius: var(--r); padding: 18px 20px;
  background: linear-gradient(140deg, rgba(34, 168, 132, .12), rgba(8, 13, 27, .6) 60%);
}
.result .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--v3); }
.result h4 { font-family: var(--disp); font-size: 21px; margin: 4px 0 8px; font-weight: 800; letter-spacing: -.02em; }
.result .why { color: var(--ink-2); font-size: 13.5px; margin-bottom: 14px; }
.result ul { margin: 6px 0 0; padding-left: 19px; color: var(--ink-2); font-size: 13px; }
.result ul li { margin-bottom: 4px; }
.result .sub { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-dim); text-transform: uppercase; margin-top: 13px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.card {
  padding: 15px 17px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: rgba(8, 13, 27, .5); cursor: pointer; transition: all .16s;
}
.card:hover { border-color: var(--v3); transform: translateY(-2px); }
.card h4 { font-family: var(--disp); font-size: 14.5px; margin: 0 0 5px; font-weight: 700; }
.card p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.card .go { font-family: var(--mono); font-size: 10.5px; color: var(--v3); margin-top: 9px; display: block; }

.gbody h4 {
  font-family: var(--disp); font-size: 16px; font-weight: 700; margin: 22px 0 7px;
  padding-left: 11px; border-left: 3px solid var(--v3);
}
.gbody h4:first-child { margin-top: 4px; }
.gbody h5 { font-family: var(--disp); font-size: 13.5px; margin: 16px 0 5px; color: var(--v4); font-weight: 700; }
.gbody p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 9px; }
.gbody p b, .gbody li b { color: var(--ink); }
.gbody ul, .gbody ol { color: var(--ink-2); font-size: 13.5px; padding-left: 20px; margin: 0 0 11px; }
.gbody li { margin-bottom: 4px; }
.gbody table td:first-child { color: var(--ink); }
.gbody .tbl-wrap { margin-bottom: 12px; }
.gbody table { font-size: 11.5px; }
.gbody th, .gbody td { white-space: normal; min-width: 78px; }

.kv { display: grid; gap: 7px; margin-bottom: 12px; }
.kv > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(126, 150, 200, .1); }
.kv .term { font-weight: 700; color: var(--v4); font-size: 13px; }
.kv .def { color: var(--ink-2); font-size: 13px; }
@media (max-width: 640px) { .kv > div { grid-template-columns: 1fr; gap: 2px; } }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.gallery > div { min-height: 210px; }
.warnbox {
  border: 1px solid var(--mag-warn); border-radius: var(--r-s); padding: 12px 15px;
  background: rgba(252, 166, 54, .07); color: var(--ink-2); font-size: 13px; margin: 10px 0;
}
.warnbox b { color: var(--mag-warn); }
.okbox {
  border: 1px solid var(--v3); border-radius: var(--r-s); padding: 12px 15px;
  background: rgba(34, 168, 132, .07); color: var(--ink-2); font-size: 13px; margin: 10px 0;
}
.okbox b { color: var(--v3); }
.searchbox { margin-bottom: 14px; }