/* オプション研究 第2世代 — 共通スタイル
   配色は既存のバリュエーション推移（--vt-*）と同じ暗い面を使い、
   系列色だけを検証済みの 5 色に差し替えてある。
   （明度帯 L 0.48–0.67・彩度下限・色覚特性での分離・面とのコントラストを検証済み） */
.or {
  --or-bg:#0b0e14; --or-panel:#10141d; --or-panel2:#131924; --or-panel3:#161c28;
  --or-line:#202836; --or-line2:#2b3547; --or-grid:#1b2431;
  --or-hover:#141a26; --or-accent-soft:#16233a; --or-ok-line:#1e5c45;
  --or-text:#e9edf4; --or-muted:#7f8b9e; --or-dim:#5b6678;
  --or-on-accent:#ffffff; --or-help-text:#c8d1de; --or-help-sub:#8b96a8;
  --or-shadow:rgba(0,0,0,.66);
  /* 系列色（この順で固定。使い回さない・循環させない） */
  --or-c1:#3987e5; --or-c2:#d95926; --or-c3:#199e70; --or-c4:#9085e9; --or-c5:#e66767;
  /* 割安 ←→ 割高（青↔赤、中立は無彩色） */
  --or-cheap:#3987e5; --or-mid:#384250; --or-rich:#e66767;
  /* 連続量（青の 1 色相ランプ・淡→濃） */
  --or-s1:#cde2fb; --or-s2:#9ec5f4; --or-s3:#6da7ec; --or-s4:#3987e5;
  --or-s5:#256abf; --or-s6:#184f95;
  background:var(--or-bg); color:var(--or-text);
  font-feature-settings:"tnum" 1, "lnum" 1;
}
.or *{box-sizing:border-box}
.or-wrap{max-width:1180px;margin:0 auto;padding:0 14px 60px}
.or-hero{padding:26px 0 14px}
.or-hero h1{font-size:var(--kb-fs-h1);line-height:1.25;margin:0 0 8px;letter-spacing:.01em}
.or-hero p{color:var(--or-muted);margin:0;font-size:14px;line-height:1.8}
.or-tag{display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--or-c1);
  border:1px solid var(--or-line);border-radius:999px;padding:4px 12px;margin-bottom:12px}
.or-sec{margin:30px 0 0}
.or-sec>h2{font-size:var(--kb-fs-h2);margin:0 0 4px;font-weight:650}
.or-sec>.or-lead{color:var(--or-muted);font-size:13px;line-height:1.8;margin:0 0 14px}
.or-panel{background:var(--or-panel);border:1px solid var(--or-line);border-radius:var(--kb-radius-lg);padding:16px}
.or-panel+.or-panel{margin-top:14px}

/* 指数カード（いま割高か） */
.or-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.or-card{background:var(--or-panel);border:1px solid var(--or-line);border-radius:var(--kb-radius-lg);
  padding:var(--kb-space-4) var(--kb-space-4);cursor:pointer;transition:border-color .15s,transform .15s}
.or-card:hover{border-color:var(--or-line2);transform:translateY(-1px)}
.or-card.is-on{border-color:var(--or-c1);box-shadow:0 0 0 1px var(--or-c1) inset}
.or-card h3{margin:0 0 2px;font-size:15px;font-weight:650}
.or-card .or-sub{color:var(--or-dim);font-size:11px;margin-bottom:10px}
.or-kpi{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.or-kpi b{font-size:26px;font-weight:680;letter-spacing:-.01em}
.or-kpi span{font-size:12px;color:var(--or-muted)}
.or-gauge{margin-top:10px}
.or-gauge-bar{position:relative;height:8px;border-radius:var(--kb-radius-sm);overflow:hidden;
  background:linear-gradient(90deg,var(--or-cheap) 0%,var(--or-mid) 50%,var(--or-rich) 100%)}
.or-gauge-pin{position:absolute;top:-3px;width:2px;height:14px;background:var(--or-text);
  border-radius:var(--kb-radius-sm);box-shadow:0 0 0 2px var(--or-panel)}
.or-gauge-cap{display:flex;justify-content:space-between;font-size:10px;color:var(--or-dim);margin-top:5px}
.or-verdict{font-size:12px;font-weight:650;margin-top:9px;display:flex;align-items:center;gap:6px}
.or-dot{width:8px;height:8px;border-radius:50%;flex:none}
.or-mini{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:11px;
  border-top:1px solid var(--or-line);padding-top:9px}
.or-mini div{font-size:11px;color:var(--or-muted)}
.or-mini b{display:block;font-size:14px;color:var(--or-text);font-weight:620;margin-top:1px}

/* 操作行 */
.or-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.or-seg{display:inline-flex;background:var(--or-panel2);border:1px solid var(--or-line);
  border-radius:var(--kb-radius-md);overflow:hidden}
.or-seg button{background:none;border:0;color:var(--or-muted);font-size:12px;
  padding:6px 12px;cursor:pointer;font-family:inherit}
.or-seg button.is-on{background:var(--or-c1);color:var(--or-on-accent)}
.or-seg button:hover:not(.is-on){color:var(--or-text);background:var(--or-hover)}
.or-label{font-size:12px;color:var(--or-dim);margin-right:2px}

/* チャート */
.or-chart{position:relative;width:100%}
.or-chart canvas{display:block;width:100%}
.or-legend{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 2px;font-size:12px}
.or-legend span{display:inline-flex;align-items:center;gap:6px;color:var(--or-muted)}
.or-legend i{width:14px;height:3px;border-radius:var(--kb-radius-sm);display:inline-block}
.or-tip{position:absolute;pointer-events:none;background:var(--or-panel3);border:1px solid var(--or-line2);
  border-radius:var(--kb-radius-md);padding:8px var(--kb-space-3);font-size:12px;line-height:1.6;color:var(--or-text);
  box-shadow:0 8px 24px var(--or-shadow);opacity:0;transition:opacity .1s;z-index:5;white-space:nowrap}
.or-tip.is-on{opacity:1}
.or-tip .t-d{color:var(--or-dim);font-size:11px;margin-bottom:4px}
.or-tip .t-r{display:flex;justify-content:space-between;gap:14px}
.or-tip .t-r i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}

/* 表 */
.or-table{width:100%;border-collapse:collapse;font-size:13px}
.or-table th,.or-table td{padding:7px var(--kb-space-3);text-align:right;border-bottom:1px solid var(--or-grid)}
.or-table th{color:var(--or-dim);font-weight:600;font-size:11px;text-align:right;
  position:sticky;top:0;background:var(--or-panel)}
.or-table th:first-child,.or-table td:first-child{text-align:left}
.or-table tbody tr:hover{background:var(--or-hover)}
.or-table .num{font-variant-numeric:tabular-nums}
.or-scroll{max-height:460px;overflow:auto;border-radius:var(--kb-radius-md)}
.or-note{color:var(--or-dim);font-size:11.5px;line-height:1.8;margin-top:10px}
.or-note b{color:var(--or-muted);font-weight:600}
.or-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.or-grid2{grid-template-columns:1fr}}
.or-loading{color:var(--or-dim);font-size:13px;padding:40px 0;text-align:center}
.or-badge{display:inline-block;font-size:10.5px;padding:2px var(--kb-space-2);border-radius:var(--kb-radius-sm);
  border:1px solid var(--or-line);color:var(--or-muted)}

/* ページ間のナビ（オプション研究のどこにいるか） */
.or-subnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
/* 2026-09-03: 絵文字を線画アイコンに置き換えたので、行の中で縦に揃える。 */
.or-subnav-ico{width:14px;height:14px;flex:0 0 auto;opacity:.85}
.or-subnav a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-md);
  border:1px solid var(--or-line);background:var(--or-panel2);color:var(--or-muted);
  text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.or-subnav a:hover{color:var(--or-text);border-color:var(--or-line2);background:var(--or-hover)}
.or-subnav a.is-on{background:var(--or-c1);border-color:var(--or-c1);color:var(--or-on-accent)}
/* 既存の明るいページ（/option/ のトップ）へ置いたとき用 */
/* opt-subnav は main.php 独自の写しに付いていた class。共通部品へ一本化したので、
   古い CSS を残す意味はもう無いが、他ページの残存に備えて or-subnav と同じにしておく。 */
.opt-subnav,.or-subnav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.opt-subnav a{display:inline-block;font-size:12.5px;padding:var(--kb-space-2) var(--kb-space-3);border-radius:var(--kb-radius-md);
  border:1px solid var(--kb-border);background:var(--kb-surface);color:var(--kb-text-muted);text-decoration:none}
.opt-subnav a:hover{border-color:var(--kb-border-strong);color:var(--kb-text)}
.opt-subnav a.is-on{background:var(--kb-accent);border-color:var(--kb-accent);color:var(--kb-accent-contrast)}

/* 狭い画面：タブは折り返さず横スクロールにする（縦に潰れて読めなくなるのを防ぐ） */
@media (max-width: 700px) {
  .or-wrap{padding:0 10px 40px}
  .or-hero h1{font-size:var(--kb-fs-h1-sm)}
  .or-seg{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .or-seg::-webkit-scrollbar{display:none}
  .or-seg button{white-space:nowrap;padding:8px 12px;flex:none}
  .or-controls{gap:6px}
  .or-subnav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:2px}
  .or-subnav::-webkit-scrollbar{display:none}
  .or-subnav a{white-space:nowrap;flex:none}
  .or-scroll{overflow-x:auto}
  .or-table{min-width:520px}
  .or-mini{grid-template-columns:1fr 1fr 1fr}
  .or-panel{padding:12px}
}

/* /option/ トップに置く「いまの状態」バー（明るい面のページ用） */
.opt-today{background:var(--kb-surface);border:1px solid var(--kb-border);border-radius:var(--kb-radius-lg);padding:16px var(--kb-space-5);margin:0 0 18px}
.opt-today-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:12px}
.opt-today-head b{font-size:15px;color:var(--kb-text)}
.opt-today-head span{font-size:11.5px;color:var(--kb-text-muted)}
.opt-today-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.opt-today-card{display:block;border:1px solid var(--kb-border);border-radius:var(--kb-radius-md);padding:var(--kb-space-3) var(--kb-space-3);
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;background:var(--kb-surface-raised)}
.opt-today-card:hover{border-color:var(--kb-border-strong);box-shadow:var(--kb-shadow-sm)}
.opt-today-name{font-size:12px;color:var(--kb-text-muted);margin-bottom:3px}
.opt-today-iv{font-size:23px;font-weight:680;color:var(--kb-text);letter-spacing:-.01em;line-height:1.15}
.opt-today-iv span{font-size:11px;font-weight:400;color:var(--kb-text-muted);margin-left:6px}
.opt-today-bar{position:relative;height:6px;border-radius:var(--kb-radius-sm);margin:9px 0 6px;
  background:linear-gradient(90deg,var(--kb-accent) 0%,var(--kb-border-strong) 50%,var(--kb-negative) 100%)}
.opt-today-bar i{position:absolute;top:-3px;width:2px;height:12px;background:var(--kb-text);border-radius:var(--kb-radius-sm);
  box-shadow:0 0 0 2px var(--kb-surface-raised)}
.opt-today-verdict{font-size:12px;font-weight:650;display:flex;justify-content:space-between;gap:8px}
.opt-today-verdict span{font-weight:400;color:var(--kb-text-muted)}
.opt-today-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--kb-border)}
.opt-today-links a{font-size:12.5px;color:var(--kb-accent);text-decoration:none;padding:var(--kb-space-1) var(--kb-space-3);
  border:1px solid var(--kb-border);border-radius:var(--kb-radius-sm);background:var(--kb-surface)}
.opt-today-links a:hover{border-color:var(--kb-accent);background:var(--kb-surface-subtle)}
.opt-today-hint{font-size:12px;color:var(--kb-text-muted);line-height:1.7}

/* 「きょう見ておくこと」（明るい面のトップページ用） */
.opt-sig{margin-top:14px;padding-top:13px;border-top:1px solid var(--kb-border)}
.opt-sig-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:9px}
.opt-sig-head b{font-size:14px;color:var(--kb-text)}
.opt-sig-head span{font-size:11.5px;color:var(--kb-text-muted)}
.opt-sig-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:8px}
.opt-sig-item{display:block;padding:var(--kb-space-2) 12px;border-radius:var(--kb-radius-md);text-decoration:none;color:inherit;
  border:1px solid var(--kb-border);background:var(--kb-surface-raised);transition:border-color .15s,background .15s}
.opt-sig-item:hover{border-color:var(--kb-border-strong);background:var(--kb-surface-subtle)}
.opt-sig-item b{display:block;font-size:12.5px;color:var(--kb-text);margin-bottom:3px}
.opt-sig-item span{display:block;font-size:11.5px;color:var(--kb-text-muted);line-height:1.7}
.opt-sig-warn{border-left:3px solid var(--kb-warning)}
.opt-sig-info{border-left:3px solid var(--kb-accent)}
.opt-sig-evs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;
  padding-top:9px;border-top:1px dashed var(--kb-border)}
.opt-sig-evlabel{font-size:11.5px;color:var(--kb-text-muted)}
.opt-sig-ev{font-size:12px;color:var(--kb-text-muted)}
.opt-sig-ev b{color:var(--kb-text)}

/* ------------------------------------------------ ルール検証（/option/rule/） */
.or .rb-sel{background:var(--or-panel2);border:1px solid var(--or-line);color:var(--or-text);
  border-radius:var(--kb-radius-md);padding:var(--kb-space-2) var(--kb-space-3);font-size:12.5px;font-family:inherit;max-width:100%}
.or .rb-sel:focus{outline:none;border-color:var(--or-c1)}
.or .rb-rule h2{font-size:var(--kb-fs-h2);margin:0 0 4px;font-weight:650}
.or .rb-presets{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px}
.or .rb-presets button{font-size:12px;padding:var(--kb-space-2) 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--or-line);background:var(--or-panel2);color:var(--or-muted);font-family:inherit}
.or .rb-presets button:hover{border-color:var(--or-line2);color:var(--or-text)}
.or .rb-presets button.is-on{border-color:var(--or-c1);color:var(--or-text);background:var(--or-accent-soft)}
.or .rb-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 0}
@media(max-width:820px){.or .rb-zones{grid-template-columns:1fr}}
.or .rb-zone{background:var(--or-panel2);border:1px solid var(--or-line);border-radius:var(--kb-radius-md);padding:12px}
.or .rb-zhead{font-size:13px;margin-bottom:8px;color:var(--or-text)}
.or .rb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle}
.or .rb-th{display:block;font-size:11.5px;color:var(--or-dim);margin-bottom:7px}
.or .rb-th input{width:56px;background:var(--or-bg);border:1px solid var(--or-line);color:var(--or-text);
  border-radius:var(--kb-radius-sm);padding:3px var(--kb-space-2);font-size:13px;font-family:inherit;text-align:right}
.or .rb-zone .rb-sel{width:100%}
.or .rb-zstat{color:var(--or-dim);font-size:11px;line-height:1.65;margin-top:8px;min-height:2.6em}
.or .rb-slider{position:relative;height:34px;margin:16px 4px 0}
.or .rb-track{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:var(--kb-radius-sm)}
.or .rb-slider input[type=range]{position:absolute;left:0;width:100%;top:6px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;height:22px}
.or .rb-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:16px;height:16px;border-radius:50%;background:var(--or-text);border:2px solid var(--or-bg);
  cursor:grab;box-shadow:0 1px 4px var(--or-shadow)}
.or .rb-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;
  border-radius:50%;background:var(--or-text);border:2px solid var(--or-bg);cursor:grab}
.or .rb-adv{margin-top:14px;border-top:1px solid var(--or-grid);padding-top:10px}
.or .rb-adv summary{cursor:pointer;font-size:12px;color:var(--or-muted);list-style:none}
.or .rb-adv summary::-webkit-details-marker{display:none}
.or .rb-adv summary::before{content:'▸ ';color:var(--or-dim)}
.or .rb-adv[open] summary::before{content:'▾ '}
.or .rb-advgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.or .rb-advgrid label{font-size:11.5px;color:var(--or-dim);display:flex;align-items:center;gap:7px}
.or .rb-advgrid input[type=number]{width:64px;background:var(--or-bg);border:1px solid var(--or-line);
  color:var(--or-text);border-radius:var(--kb-radius-sm);padding:4px var(--kb-space-2);font-size:12.5px;font-family:inherit;text-align:right}
.or .rb-advgrid .rb-chk{cursor:pointer}
.or .rb-advgrid .rb-chk input{accent-color:var(--or-c1)}
.or .or-card.is-good .or-big{color:var(--or-c3)}
.or .or-card.is-bad .or-big{color:var(--or-c5)}
.or .or-big{font-size:26px;font-weight:750;line-height:1.2}
.or .or-table .up{color:var(--or-c3)}
.or .or-table .down{color:var(--or-c5)}
.or .rb-pick{cursor:pointer}
.or .rb-pick:hover{background:var(--or-hover)}
.or .rb-note{font-size:11px;color:var(--or-dim);max-width:340px;white-space:normal}
.or .rb-tag{display:inline-block;font-size:10px;padding:1px var(--kb-space-2);border-radius:var(--kb-radius-sm);
  border:1px solid var(--or-line);color:var(--or-dim)}
.or .rb-tag.ok{border-color:var(--or-ok-line);color:var(--or-c3)}
.or .rb-second{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;
  padding-top:12px;border-top:1px solid var(--or-grid)}
.or .rb-gate{font-size:11.5px;color:var(--or-dim)}
.or .rb-gate input{width:52px;background:var(--or-bg);border:1px solid var(--or-line);
  color:var(--or-text);border-radius:var(--kb-radius-sm);padding:3px var(--kb-space-2);font-size:12.5px;font-family:inherit;text-align:right}
.or .rb-h3{font-size:14.5px;font-weight:650;margin:22px 0 6px;padding-top:14px;
  border-top:1px solid var(--or-grid);color:var(--or-text)}
.or .rb-h4{font-size:12.5px;font-weight:600;margin:16px 0 2px;color:var(--or-muted)}
.or .cx-pick{cursor:pointer}
.or .cx-pick:hover{background:var(--or-hover)}
.or .cx-stale td{opacity:.6}

/* ------------------------------------------------ 用語のその場説明 */
.or-term{border-bottom:1px dotted var(--or-dim);cursor:help;outline:none}
.or-term:hover,.or-term:focus{border-bottom-color:var(--or-c1);color:var(--or-text)}
.or-help-pop{position:absolute;z-index:9999;max-width:340px;padding:var(--kb-space-3) var(--kb-space-3);border-radius:var(--kb-radius-md);
  background:var(--or-panel3);border:1px solid var(--or-line2);box-shadow:0 8px 28px var(--or-shadow);
  font-size:12.5px;line-height:1.75;color:var(--or-help-text);opacity:0;visibility:hidden;
  transition:opacity .12s;pointer-events:none;font-weight:400}
.or-help-pop.is-on{opacity:1;visibility:visible}
.or-help-pop b{display:block;color:var(--or-text);font-size:13px;font-weight:650;margin-bottom:4px}
.or-help-pop i{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--or-line2);
  color:var(--or-help-sub);font-style:normal;font-size:11.5px}
@media(max-width:820px){.or-help-pop{max-width:min(320px,calc(100vw - 24px))}}

/* ライトテーマ。--or-* は暗い面を前提に作ってあったので、
   ホワイトにすると本文だけ theme.css に上書きされ、薄い文字が白地に残っていた
   （実測: /option/strategy/ の一部の列がコントラスト 1.17）。値をここで差し替える。 */
html[data-theme="light"] .or {
  --or-bg:#f6f8fb; --or-panel:#ffffff; --or-panel2:#f1f5f9; --or-panel3:#ffffff;
  --or-line:#d7dfe8; --or-line2:#b9c6d3; --or-grid:#e6ecf3;
  --or-hover:#eef3f9; --or-accent-soft:#e6effb; --or-ok-line:#7cc3a4;
  --or-text:#132029; --or-muted:#4f5e6d; --or-dim:#5f6e7d;
  --or-on-accent:#ffffff; --or-help-text:#1b2833; --or-help-sub:#54636f;
  --or-shadow:rgba(16,32,48,.16);
  /* 系列色は明るい面でも通る値へ（暗面用の 5 色は白地で沈む） */
  --or-c1:#1f6fd0; --or-c2:#c0491e; --or-c3:#0d7d57; --or-c4:#6d5fd8; --or-c5:#cb4a4a;
  --or-cheap:#1f6fd0; --or-mid:#8b98a8; --or-rich:#cb4a4a;
  --or-s1:#e3eefb; --or-s2:#bcd6f4; --or-s3:#8db8ea; --or-s4:#4a90dd;
  --or-s5:#2a6cb8; --or-s6:#1b4f8c;
}