/* =========================================================
   株価AI分析ラボ ｜ スタイル
   上昇＝朱、下落＝藍（日本式）。判定の色は全画面で共通。
   ========================================================= */
:root{
  --paper:#FBFAF6; --panel:#F3F0E8; --panel-2:#ECE8DD;
  --ink:#15202E; --ink-soft:#5A6472; --line:#E1DBCD;
  --up:#C8403A;      /* 朱 ＝ 上昇・買い */
  --up-soft:#F6E3E1;
  --down:#2F5A8F;    /* 藍 ＝ 下落・売り */
  --down-soft:#E2E9F3;
  --neu:#8B9199; --neu-soft:#EDEDEA;
  --gold:#A87C2E; --gold-soft:#C9A85C;
  --shadow:0 1px 2px rgba(21,32,46,.05),0 8px 28px rgba(21,32,46,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper); color:var(--ink); font-family:"Noto Sans JP",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.mono{font-family:"Roboto Mono",monospace; font-feature-settings:"tnum"}
.wrap{max-width:1240px; margin:0 auto; padding:0 24px}
.up{color:var(--up)} .down{color:var(--down)}
a{color:inherit}
.skel{padding:28px; text-align:center; color:var(--ink-soft); font-size:13px}
.err-box{padding:16px 18px; border:1px solid var(--up); background:var(--up-soft);
  border-radius:11px; font-size:13px; color:var(--up); line-height:1.7}

/* キーボード操作で本文へ飛ぶリンク（フォーカス時だけ表示） */
.skip{position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:0 0 10px 0; font-size:13px; font-weight:700; text-decoration:none}
.skip:focus{left:0}

/* ---------- top bar ---------- */
header{position:sticky; top:0; z-index:50; background:rgba(251,250,246,.9);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:18px; height:64px}
.brand{font-family:"Shippori Mincho",serif; font-weight:800; font-size:19px; letter-spacing:.02em; white-space:nowrap}
.brand b{color:var(--gold)}
nav{display:flex; gap:15px; margin-left:4px; font-size:12px; font-weight:500; color:var(--ink-soft)}
nav a{text-decoration:none; transition:color .15s; white-space:nowrap} nav a:hover{color:var(--ink)}
.spacer{flex:1}
.badge{font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft); display:flex; gap:6px; align-items:center; white-space:nowrap}
.badge.ok{border-color:#8FBF9F; color:#2F7A4E} .badge.ok .dot{background:#3E9B63}
.badge.ng{border-color:var(--up); color:var(--up)} .badge.ng .dot{background:var(--up)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--gold); flex:none}

/* ハンバーガーメニュー（狭い画面でのみ表示） */
.navtoggle{display:none; width:38px; height:34px; border:1px solid var(--line); background:#fff;
  border-radius:9px; cursor:pointer; padding:0; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; flex:none}
.navtoggle span{display:block; width:16px; height:2px; background:var(--ink); border-radius:1px; transition:.2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:1060px){
  nav{gap:12px; font-size:11.5px}
  .bar{gap:14px}
  #connText{display:none}          /* 接続状態はドットの色だけで示す */
}
@media(max-width:880px){
  .navtoggle{display:flex}
  .bar{gap:12px; height:58px}
  .brand{font-size:17px}
  /* backdrop-filter に頼らず完全不透明にする（背景が透けないように） */
  nav{position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column;
    gap:0; margin:0; padding:4px 0 8px; background:var(--paper);
    border-bottom:1px solid var(--line); box-shadow:0 14px 28px rgba(21,32,46,.14)}
  .bar.open nav{display:flex}
  nav a{padding:12px 24px; font-size:14px; font-weight:700; color:var(--ink); border-top:1px solid var(--line)}
  nav a:first-child{border-top:none}
  nav a:active{background:var(--panel)}
  header{position:sticky}
  .wrap.bar{position:relative}
}
.lbl-short{display:none}
@media(max-width:560px){
  .brand{font-size:15px}
  .badge{font-size:10.5px; padding:4px 8px}
  .lbl-full{display:none}          /* 「プレミアム（2026/8/23まで）」→「PRO」 */
  .lbl-short{display:inline}
}

.disc{background:var(--ink); color:#E8E2D4; font-size:12px; text-align:center; padding:7px 24px}
.disc b{color:var(--gold-soft)}

.offline{display:none; margin:18px 0 0; padding:14px 18px; border-radius:12px;
  border:1px solid var(--up); background:var(--up-soft); font-size:13px; line-height:1.8}
.offline code{font-family:"Roboto Mono",monospace; background:#fff; padding:2px 7px; border-radius:5px; font-weight:700}
.offline-err{color:var(--ink-soft); font-size:12px}

/* ---------- hero ---------- */
.hero{padding:48px 0 34px; display:grid; grid-template-columns:1.02fr 1fr; gap:44px; align-items:start}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.2em; color:var(--gold); text-transform:uppercase}
.thesis{font-family:"Shippori Mincho",serif; font-weight:700; font-size:38px; line-height:1.34; margin:16px 0 18px}
.thesis .hl{color:var(--up)}
.lead{font-size:14.5px; color:var(--ink-soft); max-width:52ch}
.cta-row{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}
.srcline{margin-top:18px; font-size:11.5px; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:12px}
.btn{font-family:inherit; font-size:14px; font-weight:700; border:none; cursor:pointer;
  padding:12px 22px; border-radius:10px; transition:transform .12s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:default; transform:none}
.btn-primary{background:var(--ink); color:#fff; box-shadow:var(--shadow)}
.btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}

.board{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden}
.board-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:14px 18px 11px; border-bottom:1px solid var(--line)}
.board-h h2{font-size:14px; font-weight:900}
.board-h span{font-size:11px; color:var(--ink-soft)}
.row{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:10px 18px; border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row:hover{background:var(--panel)}
.nm{font-weight:700; font-size:13.5px} .nm small{display:block; font-weight:400; font-size:10.5px; color:var(--ink-soft)}
.spark{width:78px; height:26px}
.score{font-family:"Roboto Mono"; font-weight:700; font-size:15px; text-align:right; white-space:nowrap}
.score small{display:block; font-size:10.5px; font-weight:500}

/* 市場環境スコア */
.risk-card{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px 18px; margin-top:16px}
.risk-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.risk-h h2{font-size:14px; font-weight:900}
.tag{font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink-soft)}
.tag.up{border-color:var(--up); color:var(--up); background:var(--up-soft)}
.tag.down{border-color:var(--down); color:var(--down); background:var(--down-soft)}
.risk-meter{position:relative; height:12px; background:var(--panel-2); border-radius:999px; overflow:hidden}
.risk-meter i{position:absolute; top:0; height:100%; border-radius:999px; transition:.4s}
.risk-meter i.up{background:var(--up)} .risk-meter i.down{background:var(--down)}
.risk-mid{position:absolute; left:50%; top:0; width:1px; height:100%; background:var(--ink); opacity:.35}
.risk-legend{display:flex; justify-content:space-between; font-size:10.5px; color:var(--ink-soft); margin-top:5px}
.risk-facts{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.fact{font-size:11px; padding:4px 9px; border-radius:8px; background:var(--panel); border:1px solid var(--line); white-space:nowrap}
.fact b{font-family:"Roboto Mono"; margin-left:5px}
.fact i{font-style:normal; margin-left:6px; font-size:10px; opacity:.75}
.fact.up{color:var(--up); border-color:#EBC9C6} .fact.down{color:var(--down); border-color:#C9D6E8}

/* ---------- section ---------- */
section.block{padding:44px 0; border-top:1px solid var(--line)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.sec-head h2,.sec-h1{font-size:24px; font-weight:900}
.sec-head .k{font-size:11.5px; font-weight:700; letter-spacing:.18em; color:var(--gold); text-transform:uppercase; display:block; margin-bottom:5px}
.sec-head p{font-size:12.5px; color:var(--ink-soft); max-width:56ch}

/* ---------- 市場ダッシュボード ---------- */
.mgroup{margin-bottom:22px}
.mgroup h4{font-size:12px; font-weight:900; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:10px;
  padding-left:10px; border-left:3px solid var(--gold)}
.mcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(226px,1fr)); gap:12px}
.mcard{background:#fff; border:1px solid var(--line); border-radius:13px; padding:13px 15px; box-shadow:var(--shadow)}
.mc-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.mc-label{font-size:12.5px; font-weight:700}
.mc-sym{font-size:10px; color:var(--ink-soft)}
.mc-px{font-family:"Roboto Mono"; font-size:23px; font-weight:700; margin-top:4px; line-height:1.2}
.mc-px small{font-size:11px; font-weight:400; color:var(--ink-soft); margin-left:4px}
.mc-chg{font-size:12.5px; font-weight:700; display:flex; align-items:baseline; gap:8px}
.mc-chg small{font-weight:400; color:var(--ink-soft); font-size:10.5px}
.mcard .spark{width:100%; height:30px; margin:6px 0 2px}
.mc-multi{display:flex; justify-content:space-between; gap:6px; font-size:10.5px; color:var(--ink-soft);
  border-top:1px dashed var(--line); padding-top:7px}
.mc-multi b{font-family:"Roboto Mono"; font-weight:700}

/* ---------- 判定バッジ（全画面共通） ---------- */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  padding:3px 10px; border-radius:999px; white-space:nowrap; border:1px solid transparent}
.pill b{font-size:11.5px}
.s-sbuy{background:var(--up); color:#fff}
.s-buy{background:var(--up-soft); color:var(--up); border-color:#EBC9C6}
.s-neu{background:var(--neu-soft); color:var(--neu); border-color:#DEDED9}
.s-sell{background:var(--down-soft); color:var(--down); border-color:#C9D6E8}
.s-ssell{background:var(--down); color:#fff}
.t-sup{background:var(--up); color:#fff}
.t-up{background:var(--up-soft); color:var(--up); border-color:#EBC9C6}
.t-flat{background:var(--neu-soft); color:var(--neu); border-color:#DEDED9}
.t-down{background:var(--down-soft); color:var(--down); border-color:#C9D6E8}
.t-sdown{background:var(--down); color:#fff}

/* 中央0の左右バー（シグナルの見える化） */
.sigbar,.rbar{position:relative; display:inline-block; width:88px; height:8px;
  background:var(--panel-2); border-radius:3px; vertical-align:middle}
.sigbar i,.rbar i{position:absolute; top:0; height:100%; border-radius:2px}
.sigbar i.up,.rbar i.up{background:var(--up)} .sigbar i.down,.rbar i.down{background:var(--down)}
.sigbar u,.rbar u{position:absolute; left:50%; top:-2px; width:1px; height:12px; background:var(--ink); opacity:.4}

/* ---------- シグナル全体像 ---------- */
.sig-load{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px;
  background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 16px; font-size:12px; color:var(--ink-soft)}
.sig-load-bar{flex:1; min-width:160px; height:6px; background:var(--panel-2); border-radius:999px; overflow:hidden}
.sig-load-bar i{display:block; height:100%; width:0; background:var(--gold); transition:width .3s}
.btn-px{font-family:inherit; font-size:12px; font-weight:700; padding:7px 14px; border:none;
  border-radius:8px; background:var(--ink); color:#fff; cursor:pointer}
.btn-px:disabled{opacity:.45; cursor:default}

.dist-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow)}
.dist-card h4{font-size:13px; font-weight:900; margin-bottom:12px}
.dist-card h4 small{font-weight:400; font-size:11px; color:var(--ink-soft); margin-left:6px}
.dist{display:flex; height:38px; border-radius:9px; overflow:hidden; border:1px solid var(--line)}
.dist span{display:flex; align-items:center; justify-content:center; min-width:0; transition:flex .4s}
.dist span b{font-family:"Roboto Mono"; font-size:12px; font-weight:700}
.dist-legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:11px; font-size:11.5px; color:var(--ink-soft)}
.lg{display:flex; align-items:center; gap:6px}
.lg i{width:11px; height:11px; border-radius:3px; display:inline-block}
.lg b{font-family:"Roboto Mono"; color:var(--ink)}
.lg small{font-size:10.5px}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
.rank-card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.rank-card.buy{border-top:3px solid var(--up)} .rank-card.sell{border-top:3px solid var(--down)}
.rank-h{display:flex; align-items:baseline; justify-content:space-between; padding:13px 18px 10px; border-bottom:1px solid var(--line)}
.rank-h h4{font-size:13px; font-weight:900}
.rank-h span{font-size:10.5px; color:var(--ink-soft)}
.rk-row{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:10px 18px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s}
.rk-row:last-child{border-bottom:none}
.rk-row:hover{background:var(--panel)}
.rk-nm{font-size:13px; font-weight:700}
.rk-nm small{display:block; font-weight:400; font-size:10.5px; color:var(--ink-soft)}
.rk-sc{display:flex; align-items:center; gap:9px}
.rk-sc .mono{font-size:13px; font-weight:700; width:44px; text-align:right}

.trend-summary{margin-top:20px}
.trend-summary h4{font-size:13px; font-weight:900; margin-bottom:10px}
.trend-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.tcell{border:1px solid var(--line); border-radius:12px; padding:14px 12px; text-align:center; cursor:pointer;
  background:#fff; transition:transform .12s, box-shadow .12s}
.tcell:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.tcell b{display:block; font-family:"Roboto Mono"; font-size:24px; font-weight:700; line-height:1.2}
.tcell span{display:block; font-size:11.5px; font-weight:700; margin-top:2px}
.tcell i{font-style:normal; font-size:10.5px; opacity:.7}
/* .tcell の白背景に負けないよう、判定色は複合セレクタで指定する */
.tcell.t-sup{background:var(--up); border-color:var(--up); color:#fff}
.tcell.t-up{background:var(--up-soft); border-color:#EBC9C6; color:var(--up)}
.tcell.t-flat{background:#fff; color:var(--neu)}
.tcell.t-down{background:var(--down-soft); border-color:#C9D6E8; color:var(--down)}
.tcell.t-sdown{background:var(--down); border-color:var(--down); color:#fff}
.tcell.t-sup b,.tcell.t-sdown b{color:#fff}
.tcell.t-sup i,.tcell.t-sdown i{opacity:.85}

/* ---------- スクリーナー ---------- */
.screener{display:grid; grid-template-columns:238px 1fr; gap:22px}
.filters{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; align-self:start; position:sticky; top:80px}
.filters h4{font-size:12px; font-weight:900; letter-spacing:.08em; margin-bottom:14px; color:var(--ink-soft)}
.fg{margin-bottom:16px}
.fg label{font-size:12.5px; font-weight:700; display:block; margin-bottom:7px}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chips.scroll{max-height:132px; overflow-y:auto; padding-right:4px}
.chip{font-size:11px; padding:4px 9px; border-radius:999px; border:1px solid var(--line);
  background:#fff; cursor:pointer; transition:.12s; font-weight:500}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
input[type=range]{width:100%; accent-color:var(--up)}
.rangeval{font-family:"Roboto Mono"; font-size:11.5px; color:var(--up); font-weight:700; float:right}
.search{width:100%; font-size:13px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-family:inherit}
.search:focus{outline:none; border-color:var(--gold-soft)}
.btn-reset{width:100%; font-family:inherit; font-size:12px; font-weight:700; padding:9px;
  border:1px solid var(--line); background:#fff; border-radius:9px; cursor:pointer; color:var(--ink-soft)}
.btn-reset:hover{color:var(--ink)}

.results{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.res-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px;
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.res-count{font-size:12px; font-weight:700}
.res-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.px-status{font-size:11px; color:var(--ink-soft)}
.sortsel{font-family:inherit; font-size:12px; font-weight:700; padding:7px 10px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink); cursor:pointer}
.res-h,.res-row{display:grid; grid-template-columns:1.5fr .8fr .9fr 1.5fr .62fr 1fr; gap:10px; align-items:center; padding:11px 18px}
.res-h{background:var(--panel-2); font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); border-bottom:1px solid var(--line)}
.res-row{border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; transition:background .12s}
.res-row:last-child{border-bottom:none}
.res-row:hover{background:var(--panel)}
#resBody{max-height:680px; overflow-y:auto}
.res-row .t{font-weight:700}
.res-row .t small{display:block; font-weight:400; font-size:10.5px; color:var(--ink-soft)}
.res-row .mono small{display:block; font-weight:500; font-size:11px}
.sigcell{display:flex; align-items:center; gap:6px; flex-wrap:nowrap}
.sigcell .pill{padding:3px 8px; font-size:11px}
.sigcell .sigbar{width:46px; flex:none}
.sigcell .sc{font-size:11px; font-weight:700; width:38px; text-align:right; flex:none}
.meter{height:7px; background:var(--panel-2); border-radius:4px; overflow:hidden}
.meter i{display:block; height:100%; background:linear-gradient(90deg,var(--gold-soft),var(--gold))}
.tot{font-size:11px; display:block; text-align:right}
.fnd{display:flex; flex-direction:column; font-size:10.5px; color:var(--ink-soft); line-height:1.55}
.fnd b{color:var(--ink); font-weight:700}
.empty{padding:34px; text-align:center; color:var(--ink-soft); font-size:13px}

/* ---------- 個別分析 ---------- */
.det-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.det-form input{flex:1; min-width:220px; max-width:420px; font-size:14px; padding:11px 13px;
  border:1px solid var(--line); border-radius:10px; background:#fff; font-family:inherit; color:var(--ink)}
.det-form input:focus{outline:none; border-color:var(--gold-soft)}
.det-hint{font-size:11.5px; color:var(--ink-soft)}

/* 最近見た銘柄（直近5件） */
.recent{margin-bottom:18px}
.recent[hidden]{display:none}
.recent-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px}
.recent-k{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--gold)}
.recent-clear{font-family:inherit; font-size:11px; color:var(--ink-soft); background:none;
  border:none; cursor:pointer; padding:2px 4px; text-decoration:underline; text-underline-offset:2px}
.recent-clear:hover{color:var(--ink)}
.recent-list{display:grid; grid-template-columns:repeat(5,1fr); gap:9px}
.recent-card{position:relative; min-width:0;
  animation:recent-in .32s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 40ms)}
/* カードの本体は中のボタン。ラッパーは削除ボタンを重ねるためだけの入れ物 */
.rc-open{display:flex; flex-direction:column; gap:2px; text-align:left; width:100%; min-width:0;
  font-family:inherit; background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:11px 12px; cursor:pointer;
  transition:transform .14s, box-shadow .14s, border-color .14s}
.rc-open:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold-soft)}
.rc-open:active{transform:translateY(-1px)}
/* 個別削除ボタン（右上の×）。ふだんは薄く、hoverで出す */
.rc-del{position:absolute; top:-7px; right:-7px; z-index:2;
  width:22px; height:22px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink-soft); font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(21,32,46,.12);
  opacity:0; transform:scale(.7); transition:opacity .15s, transform .15s, background .15s, color .15s}
.recent-card:hover .rc-del, .rc-del:focus-visible{opacity:1; transform:scale(1)}
.rc-del:hover{background:var(--up); color:#fff; border-color:var(--up)}
/* タッチ端末は hover が無いので常時表示する */
@media(hover:none){ .rc-del{opacity:1; transform:scale(1)} }
/* 削除時に縮んで消える */
.recent-card.leaving{animation:recent-out .3s ease forwards; pointer-events:none}
@keyframes recent-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
@keyframes recent-out{to{opacity:0; transform:scale(.85); filter:blur(1px)}}
@media(prefers-reduced-motion:reduce){
  .recent-card{animation:none}
  .recent-card.leaving{animation:none}
}
.rc-nm{font-size:12.5px; font-weight:700; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rc-sub{font-size:10px; color:var(--ink-soft)}
.rc-sub .cc{margin-right:4px}
.rc-px{font-size:13px; font-weight:700; margin-top:3px}
.rc-px small{display:block; font-size:10.5px; font-weight:500}
.rc-sig{display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px}
.rc-sig .pill{font-size:10px; padding:2px 7px}
.rc-sig b{font-size:10.5px}
.rc-at{font-size:9.5px; color:var(--ink-soft); margin-top:5px;
  border-top:1px dashed var(--line); padding-top:4px}

.det{display:flex; flex-direction:column; gap:18px}
.det-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; box-shadow:var(--shadow)}
.det-head h3{font-size:21px; font-weight:900}
.det-code{font-size:13px; color:var(--ink-soft); font-weight:500; margin-left:8px}
.det-sub{font-size:11.5px; color:var(--ink-soft)}
.det-sub .mono{margin-left:10px}
.det-px{display:flex; align-items:baseline; gap:14px}
.det-px .px{font-family:"Roboto Mono"; font-size:34px; font-weight:700}
.det-px .chg{font-family:"Roboto Mono"; font-size:15px; font-weight:700}

.verdict{display:grid; grid-template-columns:1fr 1.35fr .85fr; gap:14px}
.v-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow)}
.v-k{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--gold); margin-bottom:9px}
.v-label{font-size:14px; padding:5px 14px}
.v-label b{font-family:"Roboto Mono"; margin-left:4px}
.v-reasons{list-style:none; margin-top:12px}
.v-reasons li{font-size:11.5px; color:var(--ink-soft); padding:5px 0 5px 15px; position:relative; border-top:1px dashed var(--line)}
.v-reasons li:before{content:"›"; position:absolute; left:2px; color:var(--gold); font-weight:700}
.v-note{font-size:10.5px; color:var(--ink-soft); margin-top:9px; border-top:1px dashed var(--line); padding-top:8px}
.big-score{font-family:"Roboto Mono"; font-size:46px; font-weight:700; line-height:1.1; margin-top:4px}
.big-score small{font-size:14px; color:var(--ink-soft); font-weight:400}
.sub-scores{margin-top:8px}
.kv{display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:5px 0; border-top:1px dashed var(--line)}
.kv span{color:var(--ink-soft)}
.kv b{font-weight:700}

/* ゲージ */
.gauge{margin-top:14px}
.g-scale{display:flex; font-size:9.5px; font-weight:700; text-align:center; margin-bottom:4px}
.g-scale span{padding:1px 0; border-radius:4px 4px 0 0}
.g-scale span:nth-child(1){width:27.5%} .g-scale span:nth-child(2){width:15%}
.g-scale span:nth-child(3){width:15%} .g-scale span:nth-child(4){width:15%} .g-scale span:nth-child(5){width:27.5%}
.g-bar{position:relative; display:flex; height:16px; border-radius:5px; overflow:visible}
.g-bar i{height:100%; opacity:.85}
.g-bar i:first-child{border-radius:5px 0 0 5px} .g-bar i:last-child{border-radius:0 5px 5px 0}
.g-bar i.s-sbuy{background:var(--up)} .g-bar i.s-buy{background:var(--up-soft)}
.g-bar i.s-neu{background:var(--neu-soft)} .g-bar i.s-sell{background:var(--down-soft)}
.g-bar i.s-ssell{background:var(--down)}
.g-needle{position:absolute; top:-5px; width:3px; height:26px; background:var(--ink); border-radius:2px;
  transform:translateX(-50%); box-shadow:0 0 0 2px #fff; transition:left .5s}
.g-ticks{display:flex; justify-content:space-between; font-family:"Roboto Mono"; font-size:9.5px; color:var(--ink-soft); margin-top:5px}

/* 買い材料 vs 売り材料 */
.tug{margin-top:14px}
.tug-bar{display:flex; height:16px; border-radius:6px; overflow:hidden; border:1px solid var(--line)}
.tug-bar i{min-width:0; transition:width .4s}
.tug-bar i.up{background:var(--up)} .tug-bar i.down{background:var(--down)}
.tug-legend{display:flex; justify-content:space-between; gap:12px; font-size:11px; font-weight:700; margin-top:6px}
.tug-legend b{font-weight:700}
.tug-note{font-size:11px; color:var(--ink-soft); margin-top:5px}
.tug-note b{font-family:"Roboto Mono"}

/* 判定根拠テーブル */
.rules{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.rules-h{padding:15px 20px 12px; border-bottom:1px solid var(--line)}
.rules-h h4{font-size:13.5px; font-weight:900}
.rules-hd,.rule{display:grid; grid-template-columns:1.25fr 1.15fr 1fr 1.7fr; gap:12px; align-items:center; padding:11px 20px}
.rules-hd{background:var(--panel-2); font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--ink-soft); border-bottom:1px solid var(--line)}
.rule{border-bottom:1px solid var(--line); font-size:12.5px}
.rule:last-child{border-bottom:none}
.rule:hover{background:var(--panel)}
.r-n{font-weight:700}
.r-v{font-size:12px; color:var(--ink-soft)}
.r-p{display:flex; align-items:center; gap:9px}
.r-p b{font-size:12.5px; width:42px; text-align:right}
.r-note{font-size:11.5px; color:var(--ink-soft); line-height:1.55}

/* チャート */
.charts{background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 20px 18px; box-shadow:var(--shadow)}
.ch-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px 0 6px}
.ch-h h4{font-size:12.5px; font-weight:900}
.ch-h .mono{font-size:11.5px; color:var(--ink-soft); font-weight:400; margin-left:8px}
svg.pchart{width:100%; height:300px; display:block}
svg.schart{width:100%; height:auto; display:block}
text.ax{font-family:"Roboto Mono",monospace; font-size:9.5px; fill:var(--ink-soft)}
.clegend{display:flex; flex-wrap:wrap; gap:14px; font-size:10.5px; color:var(--ink-soft); margin-top:6px}
.clegend span{display:flex; align-items:center; gap:5px}
.clegend i{width:14px; height:3px; border-radius:2px; display:inline-block}

/* 数値グリッド */
.det-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px}
.dg-card{background:#fff; border:1px solid var(--line); border-radius:13px; padding:15px 17px; box-shadow:var(--shadow)}
.dg-card h5{font-size:12px; font-weight:900; letter-spacing:.05em; color:var(--gold); margin-bottom:7px}
.dg-card .kv:first-of-type{border-top:none}

/* サマリー */
.summary{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 22px; box-shadow:var(--shadow)}
.ai-tag{display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--gold);
  border:1px solid var(--gold-soft); padding:3px 10px; border-radius:999px; margin-bottom:11px}
.summary p{font-size:13.5px; line-height:1.9}
.src{margin-top:12px; font-size:11px; color:var(--ink-soft); border-top:1px dashed var(--line); padding-top:9px; line-height:1.7}

/* ---------- 対象市場スイッチ / セグメント ---------- */
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{font-family:inherit; font-size:12px; font-weight:700; padding:8px 14px;
  border:1px solid var(--line); background:#fff; border-radius:9px; cursor:pointer; transition:.12s; color:var(--ink)}
.seg button.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.seg.small button{font-size:11.5px; padding:6px 11px}
.uni-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.uni-k{font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--gold)}
.uni-note{font-size:11.5px; color:var(--ink-soft)}

/* 国バッジ */
.cc{display:inline-block; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:4px;
  margin-right:6px; vertical-align:1px; letter-spacing:.02em}
.cc-JP{background:var(--up-soft); color:var(--up)}
.cc-VN{background:#FBEAD2; color:#B0700F}

/* ---------- 日本 vs 東南アジア・インド ---------- */
.cmp-card{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 20px 18px; box-shadow:var(--shadow); margin-bottom:16px}
.cmp-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.cmp-h h4{font-size:13.5px; font-weight:900}
.cmp-h .mono{font-size:11px; color:var(--ink-soft)}

/* 株式パフォーマンス比較 */
.pf-row{display:grid; grid-template-columns:minmax(150px,1.1fr) 1fr 70px; gap:12px; align-items:center;
  padding:6px 8px; border-radius:7px; font-size:12.5px}
.pf-row.me{background:var(--up-soft)}
.pf-n{font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-row.me .pf-n{font-weight:700}
.pf-tag{font-size:9.5px; background:var(--up); color:#fff; padding:1px 6px; border-radius:4px; margin-left:7px; font-weight:700}
.pf-bar{position:relative; height:12px; background:var(--panel-2); border-radius:3px}
.pf-bar i{position:absolute; top:0; height:100%; border-radius:2px}
.pf-bar i.up{background:var(--up)} .pf-bar i.down{background:var(--down)}
.pf-bar u{position:absolute; left:50%; top:-2px; width:1px; height:16px; background:var(--ink); opacity:.35}
.pf-v{font-size:12px; font-weight:700; text-align:right}

/* マクロ比較表 */
.cmp-scroll{overflow-x:auto}
.cmp-row{display:grid; grid-template-columns:240px repeat(9,minmax(78px,1fr)); gap:0; align-items:stretch;
  border-bottom:1px solid var(--line); min-width:900px}
.cmp-row:last-child{border-bottom:none}
.cmp-row.head{background:var(--panel-2); border-bottom:1px solid var(--line)}
.cmp-row.head .cmp-c{font-size:11px; font-weight:700; color:var(--ink); justify-content:center; padding:9px 6px;
  border-bottom:3px solid var(--cc)}
.cmp-row.head .cmp-ind{font-size:11px; font-weight:700; color:var(--ink-soft); padding:9px 12px 9px 4px}
.cmp-ind{display:flex; flex-direction:column; gap:1px; padding:10px 12px 10px 4px; justify-content:center}
.cmp-ind b{font-size:12.5px; font-weight:700}
.cmp-ind small{font-size:10px; color:var(--ink-soft); line-height:1.45}
.cmp-c{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:10px 6px 12px; border-left:1px solid var(--line)}
.cmp-c b{font-size:12.5px; font-weight:700}
.cmp-c i{display:block; height:4px; border-radius:2px; opacity:.55; align-self:flex-start; min-width:1px}
.cmp-c.jp{background:rgba(200,64,58,.05)}
.cmp-c.best{background:rgba(168,124,46,.13)}
.cmp-c.best b{color:var(--gold)}
.cmp-c.best:after{content:"★"; position:absolute; top:2px; right:4px; font-size:8.5px; color:var(--gold)}
.cmp-legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:11px; font-size:10.5px; color:var(--ink-soft)}
.cmp-legend span{display:flex; align-items:center; gap:5px}
.cmp-legend i{width:11px; height:11px; border-radius:3px; display:inline-block}
.cmp-legend i.best{background:rgba(168,124,46,.35)} .cmp-legend i.jp{background:rgba(200,64,58,.15)}

/* 実測値の差サマリー */
.ins{display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:12px; align-items:center;
  padding:9px 0; border-top:1px dashed var(--line); font-size:12.5px}
.ins-k{font-weight:700}
.ins-v b{font-weight:700} .ins-v b.vn{color:#B0700F}
.ins-d{font-size:11px; color:var(--ink-soft); text-align:right}

/* ---------- 市場調査：アナリスト・コンセンサス ---------- */
.cons-card,.news-card,.report-card{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 20px 18px; box-shadow:var(--shadow)}
.cons-h,.news-h,.rep-h{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.cons-h h4,.news-h h4,.rep-h h4{font-size:13.5px; font-weight:900}
.cons-h .mono,.news-h .mono{font-size:11px; color:var(--ink-soft)}
.cons-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px}
.cons-col{display:flex; flex-direction:column; min-width:0}

.tgt-main{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:2px 0 10px}
.tgt-val{font-size:26px; font-weight:700}
.tgt-up{font-size:12px; font-weight:700}
.tgt-bar{position:relative; height:10px; background:var(--panel-2); border-radius:999px; margin-top:2px}
.tgt-fill{position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(90deg,var(--down-soft),var(--panel-2),var(--up-soft))}
.tgt-bar u{position:absolute; top:-4px; width:3px; height:18px; border-radius:2px; transform:translateX(-50%)}
.tgt-mean{background:var(--gold); box-shadow:0 0 0 2px #fff}
.tgt-now{background:var(--ink); box-shadow:0 0 0 2px #fff}
.tgt-ticks{display:flex; justify-content:space-between; font-size:10px; color:var(--ink-soft); margin-top:6px}
.cons-legend{display:flex; gap:14px; font-size:10.5px; color:var(--ink-soft); margin-top:8px}
.cons-legend i{display:inline-block; width:3px; height:11px; border-radius:2px; margin-right:5px; vertical-align:-1px}
.cons-legend .dot-now{background:var(--ink)} .cons-legend .dot-mean{background:var(--gold)}

.dist.mini{height:10px; border:none; border-radius:3px; flex:1}
.dist.mini span b{display:none}
.rt-hist{margin-top:12px; border-top:1px dashed var(--line); padding-top:9px}
.rt-hist small{font-size:10px; color:var(--ink-soft); display:block; margin-bottom:6px}
.rt-row{display:grid; grid-template-columns:58px 1fr 38px; gap:8px; align-items:center; margin-bottom:4px; font-size:10.5px; color:var(--ink-soft)}
.rt-n{text-align:right}

.cmp2-row{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:11.5px; margin-top:8px}
.cmp2 .sigbar{width:100%; margin-top:3px}
.cmp2-verdict{margin-top:12px; padding:9px 12px; border-radius:9px; font-size:12.5px; font-weight:700; text-align:center}
.cmp2-verdict small{display:block; font-weight:400; font-size:10.5px; opacity:.8; margin-top:2px}
.cmp-agree{background:#E9F2EC; color:#2F7A4E}
.cmp-mild{background:var(--panel); color:var(--ink-soft)}
.cmp-diverge{background:rgba(168,124,46,.14); color:var(--gold)}

/* ---------- 市場調査：ニュース ---------- */
.news-tally{margin-bottom:14px}
.nt-bar{display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--panel-2)}
.nt-bar i{display:block; height:100%}
.nt-bar i.up{background:var(--up)} .nt-bar i.down{background:var(--down)} .nt-bar i.neu{background:var(--neu-soft)}
.nt-legend{display:flex; gap:16px; font-size:11.5px; margin-top:7px; color:var(--ink-soft)}
.nt-legend b{font-weight:700}
.nt-words{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.nw{font-size:10.5px; padding:2px 7px; border-radius:5px; background:var(--panel); border:1px solid var(--line); color:var(--ink-soft)}
.nw b{font-weight:700; margin-left:3px}
.nw.up{background:var(--up-soft); color:var(--up); border-color:#EBC9C6}
.nw.down{background:var(--down-soft); color:var(--down); border-color:#C9D6E8}

.news-list{border-top:1px solid var(--line)}
.news-row{display:flex; flex-direction:column; gap:3px; padding:10px 2px; border-bottom:1px solid var(--line);
  text-decoration:none; transition:background .12s}
.news-row:last-child{border-bottom:none}
.news-row:hover{background:var(--panel)}
.nr-t{font-size:13px; font-weight:500; line-height:1.55}
.nr-m{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nr-m small{font-size:10.5px; color:var(--ink-soft)}

/* ---------- AI分析：上昇想定ランキング ---------- */
.up-card{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 20px 18px; box-shadow:var(--shadow); margin-bottom:16px}
.up-card .cons-h{margin-bottom:12px}
.up-card .cons-h .seg{margin-left:auto}
.up-filter{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.up-filter .uni-note{font-size:11px; color:var(--ink-soft); max-width:52ch}
.up-filtered{color:var(--gold); font-weight:700}
.up-summary{display:flex; flex-wrap:wrap; gap:20px; font-size:12px; color:var(--ink-soft);
  background:var(--panel); border-radius:9px; padding:9px 14px; margin-bottom:12px}
.up-summary b{font-weight:700; color:var(--ink)}
.up-h,.up-row{display:grid; grid-template-columns:34px 1.5fr 1.05fr 1.35fr .72fr 1.1fr;
  gap:10px; align-items:center; padding:10px 6px}
.up-h{background:var(--panel-2); border-radius:8px; font-size:10.5px; font-weight:700;
  letter-spacing:.04em; color:var(--ink-soft)}
.up-list{max-height:640px; overflow-y:auto}
.up-row{border-bottom:1px solid var(--line); font-size:13px; cursor:pointer; transition:background .12s}
.up-row:last-child{border-bottom:none}
.up-row:hover{background:var(--panel)}
.up-rk{font-size:12px; font-weight:700; color:var(--gold); text-align:center}
.up-nm{font-weight:700; min-width:0}
.up-nm small{display:block; font-weight:400; font-size:10.5px; color:var(--ink-soft)}
.up-px{font-size:12px}
.up-px small{display:block; font-size:11.5px; color:var(--gold); font-weight:700}
.up-gap{display:flex; align-items:center; gap:9px}
.up-gap .pf-bar{flex:1; min-width:40px}
.up-gap b{font-size:12.5px; width:52px; text-align:right}
.up-an{font-size:11.5px; color:var(--ink-soft)}
.up-an small{display:block; font-size:10.5px}
.up-sig{display:flex; align-items:center; gap:7px; flex-wrap:nowrap}
.up-sig .pill{font-size:10.5px; padding:2px 8px}
.up-sig b{font-size:11.5px}

/* ---------- 市場調査：AIレポート ---------- */
.rep-h small{display:block; font-size:11px; color:var(--ink-soft); margin-top:3px; max-width:62ch}
.rep-idle{font-size:12.5px; color:var(--ink-soft); padding:14px 0}
.rep-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.rep-meta{font-size:10.5px; color:var(--ink-soft)}
.rep-lead{font-size:15px; font-weight:700; line-height:1.8; padding:12px 14px; background:var(--panel);
  border-left:3px solid var(--gold); border-radius:0 9px 9px 0; margin-bottom:14px}
.rep-sec{margin-bottom:13px}
.rep-sec h5{font-size:12px; font-weight:900; letter-spacing:.05em; color:var(--gold); margin-bottom:5px}
.rep-sec p{font-size:13.5px; line-height:1.9}
.rep-sec ul{list-style:none; margin-top:2px}
.rep-sec li{font-size:13px; line-height:1.75; padding:4px 0 4px 17px; position:relative}
.rep-sec li:before{content:"›"; position:absolute; left:3px; color:var(--gold); font-weight:700}

/* ---------- マクロ推移チャート ---------- */
#macroChips{margin-bottom:14px}
.mc-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 20px 16px; box-shadow:var(--shadow)}

/* ---------- 料金プラン / サブスクリプション ---------- */
#planBadge{cursor:pointer}
.plans{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:780px}
.plan{border:1px solid var(--line); border-radius:16px; padding:24px; background:#fff; position:relative}
.plan.pro{border:2px solid var(--gold); box-shadow:0 10px 30px rgba(168,124,46,.14)}
.plan.pro.current{border-color:#3E9B63; box-shadow:0 10px 30px rgba(62,155,99,.14)}
.plan .pro-flag{position:absolute; top:-11px; right:20px; background:var(--gold); color:#fff;
  font-size:11px; font-weight:700; padding:3px 12px; border-radius:999px}
.plan.current .pro-flag{background:#3E9B63}
.plan h3{font-size:15px; font-weight:900}
.price{font-family:"Roboto Mono"; font-size:30px; font-weight:700; margin:8px 0 2px}
.price small{font-size:13px; color:var(--ink-soft); font-weight:400}
.plan ul{list-style:none; margin:16px 0 0}
.plan li{font-size:12.5px; padding:7px 0 7px 24px; position:relative; border-top:1px solid var(--line); line-height:1.6}
.plan li:before{content:"✓"; position:absolute; left:0; top:7px; color:var(--up); font-weight:700}
.plan li.off{color:#9aa3ad} .plan li.off:before{content:"—"; color:#cfd4da}
.plan-note{font-size:11px; color:var(--ink-soft); margin-top:10px; text-align:center}
.plan-state{margin-top:16px; padding:12px; background:#E9F2EC; border-radius:10px; text-align:center}
.plan-state b{font-size:13px; color:#2F7A4E}
.plan-state small{display:block; font-size:11px; color:var(--ink-soft); margin-top:2px}
.plan-state .btn-reset{margin-top:10px; font-size:11px; padding:6px}

.lic-card{margin-top:20px; background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:18px 20px; max-width:780px}
.lic-card h4{font-size:13px; font-weight:900; margin-bottom:4px}
.lic-card p{font-size:12px; color:var(--ink-soft)}
.lic-form{display:flex; gap:9px; margin-top:12px; flex-wrap:wrap}
.lic-form input{flex:1; min-width:220px; font-family:"Roboto Mono",monospace; font-size:14px;
  letter-spacing:.06em; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink)}
.lic-form input:focus{outline:none; border-color:var(--gold-soft)}
.lic-msg{font-size:12px; margin-top:9px; min-height:17px; color:var(--ink-soft)}
.lic-msg.err{color:var(--up)} .lic-msg.ok{color:#2F7A4E}

/* 有料機能のロック表示 */
.lock{text-align:center; padding:34px 20px; background:var(--panel); border:1px dashed var(--line); border-radius:12px}
.lock-ico{font-size:26px; margin-bottom:8px}
.lock h4{font-size:14px; font-weight:900; margin-bottom:6px}
.lock p{font-size:12.5px; color:var(--ink-soft); max-width:52ch; margin:0 auto; line-height:1.75}
.lock-price{margin-top:10px !important; font-size:12.5px; color:var(--ink) !important}
.lock-price b{color:var(--gold)}
.lock .btn{margin-top:14px}

/* ---------- 料金プランのポップアップ ---------- */
body.modal-open{overflow:hidden}
.modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px}
.modal[hidden]{display:none}
.modal-back{position:absolute; inset:0; background:rgba(21,32,46,.5); opacity:0; transition:opacity .18s}
.modal.show .modal-back{opacity:1}
.modal-panel{position:relative; width:100%; max-width:840px; max-height:calc(100vh - 48px);
  display:flex; flex-direction:column; background:var(--paper); border-radius:18px;
  box-shadow:0 24px 64px rgba(21,32,46,.3); overflow:hidden;
  opacity:0; transform:translateY(14px) scale(.98); transition:opacity .18s, transform .18s}
.modal.show .modal-panel{opacity:1; transform:none}

.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:20px 24px 14px; border-bottom:1px solid var(--line); flex:none}
.modal-head .k{font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--gold);
  text-transform:uppercase; display:block; margin-bottom:4px}
.modal-head h3{font-size:20px; font-weight:900}
.modal-x{width:34px; height:34px; flex:none; border:1px solid var(--line); background:#fff;
  border-radius:9px; font-size:20px; line-height:1; color:var(--ink-soft); cursor:pointer;
  transition:.12s; font-family:inherit}
.modal-x:hover{background:var(--panel); color:var(--ink)}

.modal-panel:focus{outline:none}
.modal-body{padding:20px 24px 22px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto}
.modal-lead{font-size:12.5px; color:var(--ink-soft); margin-bottom:16px; line-height:1.8}
.modal-body .plans{max-width:none}
.modal-body .lic-card{max-width:none}
.modal-foot{padding:13px 24px; border-top:1px solid var(--line); background:var(--panel);
  font-size:10.5px; color:var(--ink-soft); line-height:1.75; flex:none}
.modal-foot a{color:var(--gold)}

/* スマホでは下から出るシート状にする */
@media(max-width:700px){
  .modal{padding:0; align-items:flex-end}
  .modal-panel{max-width:none; max-height:92vh; border-radius:18px 18px 0 0;
    transform:translateY(28px)}
  .modal-head{padding:16px 18px 12px}
  .modal-head h3{font-size:17px}
  .modal-body{padding:16px 18px 20px}
  .modal-foot{padding:11px 18px}
}

/* ---------- 会員管理画面 ---------- */
.admin-tag{font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:var(--ink); color:#fff; letter-spacing:.06em; white-space:nowrap}
.adm-card{background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:16px 20px 18px; box-shadow:var(--shadow); margin-bottom:16px}

/* 決済・メールの設定状況 */
.bl-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 16px; margin-bottom:14px}
.bl-row{display:flex; flex-wrap:wrap; gap:8px}
.bl{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
  padding:6px 11px; border-radius:8px; border:1px solid var(--line); background:var(--panel)}
.bl i{width:7px; height:7px; border-radius:50%; flex:none}
.bl.ok{border-color:#8FBF9F; color:#2F7A4E; background:#E9F2EC} .bl.ok i{background:#3E9B63}
.bl.ng{border-color:#EBC9C6; color:var(--up); background:var(--up-soft)} .bl.ng i{background:var(--up)}
.bl small{font-weight:400; opacity:.8; margin-left:3px}
.bl-warn{margin-top:10px; padding:10px 13px; border-radius:9px; background:var(--up-soft);
  border:1px solid #EBC9C6; font-size:11.5px; color:var(--up); line-height:1.7}
.bl-ok{margin-top:10px; font-size:11.5px; color:#2F7A4E}
.ar-mail{margin-left:6px; font-size:9.5px !important; padding:1px 6px !important}

.adm-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:11px; margin-bottom:18px}
.adm-stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px}
.adm-stat b{display:block; font-size:24px; font-weight:700; line-height:1.2}
.adm-stat span{display:block; font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-top:2px}
.adm-stat small{display:block; font-size:10px; color:var(--ink-soft); margin-top:2px}
.adm-stat.warn{border-color:var(--gold); background:rgba(168,124,46,.06)}
.adm-stat.warn b{color:var(--gold)}
.adm-stat.wide b{font-size:20px}

.adm-form{display:grid; grid-template-columns:1.4fr .7fr .8fr 1.4fr auto; gap:10px; align-items:end}
.adm-form label{display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:700; color:var(--ink-soft); min-width:0}
.adm-form input,.adm-form select{font-family:inherit; font-size:13px; padding:9px 11px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); min-width:0}
.adm-form input:focus,.adm-form select:focus{outline:none; border-color:var(--gold-soft)}
.adm-issued{margin-top:14px; padding:13px 15px; background:#E9F2EC; border-radius:10px}
.adm-issued small{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:6px}
.adm-key{display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.adm-key .k{font-size:11px; font-weight:700; color:#2F7A4E; letter-spacing:.08em}
.adm-key b{font-size:19px; letter-spacing:.06em}

.adm-tools{display:flex; gap:9px; margin-bottom:12px; flex-wrap:wrap}
.adm-tools .search{flex:1; min-width:180px}
.adm-h,.adm-row{display:grid; grid-template-columns:1.5fr 1.25fr .7fr .8fr 1.15fr;
  gap:12px; align-items:center; padding:11px 6px}
.adm-h{background:var(--panel-2); border-radius:8px; font-size:10.5px; font-weight:700;
  letter-spacing:.04em; color:var(--ink-soft)}
.adm-row{border-bottom:1px solid var(--line); font-size:12.5px}
.adm-row:last-child{border-bottom:none}
.adm-row:hover{background:var(--panel)}
.adm-row.off{opacity:.6}
.ar-key b{font-size:13px; letter-spacing:.04em}
.ar-key small,.ar-who small,.ar-end small{display:block; font-size:10px; color:var(--ink-soft); margin-top:2px}
.ar-copy{font-family:inherit; font-size:9.5px; margin-left:7px; padding:2px 7px; border-radius:5px;
  border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer}
.ar-copy:hover{color:var(--ink); border-color:var(--gold-soft)}
.ar-who i{color:var(--ink-soft); font-size:11.5px}
.ar-act{display:flex; gap:5px; flex-wrap:wrap}
.ar-btn{font-family:inherit; font-size:10.5px; font-weight:700; padding:5px 9px; border-radius:7px;
  border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; white-space:nowrap}
.ar-btn:hover{background:var(--panel)}
.ar-btn.danger{color:var(--up); border-color:#EBC9C6}
.ar-btn.danger:hover{background:var(--up-soft)}

@media(max-width:880px){
  .adm-form{grid-template-columns:1fr}
  .adm-form .btn{width:100%}
  .adm-h{display:none}
  .adm-row{grid-template-columns:1fr; gap:6px; padding:14px 6px; border-bottom:1px solid var(--line)}
  .ar-act{margin-top:4px}
}

/* 特定商取引法に基づく表記 */
.tk{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow)}
.tk-row{display:grid; grid-template-columns:210px 1fr; gap:16px; padding:13px 20px; border-bottom:1px solid var(--line); font-size:13px}
.tk-row:last-child{border-bottom:none}
.tk-row span{color:var(--ink-soft); font-weight:700; font-size:12.5px}
.tk-row b{font-weight:500; line-height:1.7}
.tk-row small{display:block; font-size:11.5px; color:var(--ink-soft); margin-top:3px}
.tk-note{background:var(--panel); border-left:3px solid var(--gold); border-radius:0 10px 10px 0;
  padding:14px 18px; font-size:12.5px; line-height:1.85; margin-bottom:18px}
@media(max-width:700px){.tk-row{grid-template-columns:1fr; gap:3px}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:32px 0 48px; margin-top:28px; background:var(--panel)}
.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft)}
.foot a{color:var(--ink-soft); text-decoration:none; margin-right:16px}
.foot a:hover{color:var(--ink)}
.legal{font-size:11px; color:#9aa3ad; line-height:1.75; margin-top:18px; max-width:100ch}

/* =========================================================
   レスポンシブ
   1080px … 3カラムを1カラムへ
    880px … タブレット・スマホ（ハンバーガーメニューに切替）
    520px … 小型スマホ
   ========================================================= */
@media(max-width:1080px){
  .verdict{grid-template-columns:1fr}
  .rules-hd,.rule{grid-template-columns:1.2fr 1fr 1fr}
  .rules-hd span:nth-child(4),.rule .r-note{display:none}
  .cons-grid{grid-template-columns:1fr; gap:22px}
}

@media(max-width:880px){
  .wrap{padding:0 18px}
  section.block{padding:34px 0}
  .sec-head{margin-bottom:18px}
  .sec-head h2{font-size:21px}
  .sec-head p{max-width:none}

  .hero{grid-template-columns:1fr; padding:34px 0 26px; gap:28px}
  .thesis{font-size:28px}
  .lead{max-width:none}
  .cta-row .btn{flex:1}

  .screener{grid-template-columns:1fr}
  .filters{position:static}
  .two-col{grid-template-columns:1fr}
  .trend-grid{grid-template-columns:repeat(3,1fr)}
  .res-h,.res-row{grid-template-columns:1.4fr .9fr 1.3fr}
  .res-h span:nth-child(3),.res-h span:nth-child(5),.res-h span:nth-child(6),
  .res-row>div:nth-child(3),.res-row>div:nth-child(5),.res-row>div:nth-child(6){display:none}
  .ins{grid-template-columns:1fr; gap:2px}
  .ins-d{text-align:left}
  .pf-row{grid-template-columns:minmax(110px,1fr) 1fr 62px}
  /* 縦積みになる幅では、有料プランを先に見せる */
  .plans{display:flex; flex-direction:column}
  .plan.pro{order:-1}

  .up-h,.up-row{grid-template-columns:26px 1.4fr 1.2fr 1.05fr}
  .up-h span:nth-child(5),.up-h span:nth-child(6),
  .up-row>span:nth-child(5),.up-row>span:nth-child(6){display:none}
  .up-filter .uni-note{max-width:none}

  /* チャートは固定高さをやめ、幅に合わせて縮める */
  .charts{padding:6px 14px 14px}
  svg.pchart{height:auto}
  .mc-card{padding:6px 14px 14px}

  .det-head{padding:14px 16px}
  .det-head h3{font-size:18px}
  .det-px .px{font-size:26px}
  .det-px .chg{font-size:13px}
  .v-card,.cons-card,.news-card,.report-card,.up-card,.cmp-card,.summary,.dist-card{padding:14px 16px}
  .rules-hd,.rule{padding:10px 14px}
  .rank-h,.rk-row,.row,.res-h,.res-row{padding-left:14px; padding-right:14px}

  .rep-h,.cons-h,.news-h{align-items:flex-start; flex-direction:column}
  .rep-h .btn,.cons-h .btn-px{width:100%}
  .up-card .cons-h .seg{margin-left:0; width:100%}
  .up-card .cons-h .seg button{flex:1}

  .lic-form input{min-width:0}
  .lic-form .btn{width:100%}

  /* 履歴は横スクロールのカード列にする（×ボタンが切れないよう上下に余白） */
  .recent-list{display:flex; gap:9px; overflow-x:auto; padding:8px 4px 6px;
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
  .recent-card{flex:0 0 168px; scroll-snap-align:start}

  .foot{flex-direction:column; gap:12px}
  .foot a{display:inline-block; margin:0 14px 6px 0}
  .legal{max-width:none}
}

@media(max-width:520px){
  .wrap{padding:0 14px}
  .disc{font-size:11px; padding:7px 14px; text-align:left}
  .thesis{font-size:23px}
  .lead,.sec-head p{font-size:12.5px}
  .sec-head h2{font-size:19px}

  .trend-grid{grid-template-columns:repeat(2,1fr)}
  .tcell b{font-size:20px}
  .dist{height:32px}
  .dist-legend{gap:10px; font-size:10.5px}

  /* 一覧は2カラムまで削って可読性を優先 */
  .res-h,.res-row{grid-template-columns:1.35fr 1fr; gap:8px}
  .res-h span:nth-child(4),.res-row>div:nth-child(4){display:none}
  .rk-row{grid-template-columns:1fr auto; gap:8px}
  .rk-row .rk-tr{display:none}
  .up-h,.up-row{grid-template-columns:22px 1.5fr 1fr; gap:8px}
  .up-h span:nth-child(3),.up-row>span:nth-child(3){display:none}
  .up-summary{gap:10px 16px; font-size:11px}

  .mcards{grid-template-columns:1fr}
  .det-grid,.wbgrid{grid-template-columns:1fr}
  .metrics,.sub-scores{grid-template-columns:1fr}
  .g-scale{font-size:8px}
  .g-ticks{font-size:8.5px}
  .big-score{font-size:38px}

  .det-form input{max-width:none}
  .det-form .btn{width:100%}
  .det-hint{font-size:10.5px}

  .rules-hd,.rule{grid-template-columns:1fr 1fr; gap:8px}
  .rules-hd span:nth-child(3),.rule .r-p{grid-column:1/-1}
  .rule .r-p{justify-content:flex-start}

  .rep-lead{font-size:14px; padding:10px 12px}
  .rep-sec p{font-size:13px}
  .nr-t{font-size:12.5px}
  .price{font-size:26px}
  .tgt-val{font-size:22px}
}

/* 横に縮められない表は、その要素だけ横スクロールさせる */
.cmp-scroll,.up-list,#resBody{-webkit-overflow-scrolling:touch}
@media(max-width:880px){
  .cmp-row{min-width:760px}
}

/* ---------- トースト通知（決済・解約の戻り案内） ---------- */
#toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  max-width:min(560px,calc(100% - 32px)); z-index:2000;
  background:var(--ink); color:#fff; font-size:13.5px; line-height:1.7;
  padding:14px 20px; border-radius:12px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
#toast.ok{background:#1f6f4a}
#toast.info{background:var(--ink)}
#toast.err{background:var(--up)}
@media(max-width:600px){
  #toast{bottom:16px; font-size:13px; padding:12px 16px}
}

/* ---------- スクロール連動のフェードイン（控えめ） ---------- */
.reveal{opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
}