/* /index/（ポケカ指数の記事）用。トップ（box.css）のライトテーマに合わせる。
   box.css を読み込んだうえで、この順に重ねる。
   注意: box.css の .hero はトップの写真ヒーロー。指数の数値ブロックは .index-hero を使う。 */

:root{
  --up:#d92d20;          /* 日本式: 上昇=赤 */
  --down:#12805c;        /* 下落=緑 */
  --tier-vintage:#b45309;
  --tier-modern:#0e7490;
  --tier-current:#6d28d9;
  --radius:12px;
  --radius-sm:8px;
}

/* ===== 記事レイアウト ===== */
.article-wrap{max-width:780px;margin:0 auto;padding:34px 22px 8px}
.article-breadcrumb{font-size:12px;color:var(--sub);margin-bottom:18px}
.article-breadcrumb a{color:var(--sub);text-decoration:none}
.article-breadcrumb a:hover{color:var(--key)}
.article-title{font-size:30px;font-weight:800;line-height:1.42;letter-spacing:-.02em;margin:0 0 16px}
.article-lead p{font-size:15px;color:#4b5561;line-height:1.95;margin:0 0 8px}
.article-meta{
  display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--sub);
  margin:20px 0 0;padding:14px 0 22px;border-bottom:1px solid var(--line);
}
.article-meta a{color:var(--key)}

/* 目次 */
.toc{background:var(--tint);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:28px 0 40px}
.toc-label{font-size:12px;font-weight:800;color:var(--sub);letter-spacing:.1em;margin-bottom:10px}
.toc ol{list-style:none;counter-reset:toc-num;padding:0;margin:0}
.toc li{counter-increment:toc-num;padding:5px 0;font-size:14px;line-height:1.6}
.toc li::before{content:counter(toc-num) ".";color:var(--key);font-weight:800;margin-right:8px;font-variant-numeric:tabular-nums}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{color:var(--key);border-bottom-color:var(--key)}

/* 本文 */
.article-body h2{
  font-size:22px;font-weight:800;line-height:1.5;letter-spacing:-.02em;
  margin:52px 0 16px;padding-left:13px;border-left:4px solid var(--key);scroll-margin-top:96px;
}
.article-body h3{font-size:17px;font-weight:800;line-height:1.6;margin:32px 0 10px;scroll-margin-top:96px}
.article-body p{margin:0 0 9px;font-size:15px;line-height:1.95;color:#2b333d}
.article-body p.gap{margin-bottom:20px}
.article-body strong{font-weight:800;color:var(--ink)}
.article-body a{color:var(--key)}
.article-body ul{margin:12px 0 20px;padding-left:20px}
.article-body li{margin-bottom:9px;font-size:15px;line-height:1.9;color:#2b333d}
.h2-lead{background:var(--tint);border-left:3px solid #c9d3e0;border-radius:var(--radius-sm);padding:15px 18px;margin-bottom:22px}
.h2-lead p{font-size:14px;color:#4b5561;line-height:1.9;margin:0 0 6px}
.h2-lead p:last-child{margin-bottom:0}
.formula{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  background:var(--tint);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:15px 16px;margin:12px 0 20px;overflow-x:auto;
}

/* FAQ・免責・関連 */
.faq-item{border-top:1px solid var(--line);padding:20px 0 6px}
.faq-q{font-size:16px;font-weight:800;margin-bottom:9px}
.faq-q::before{content:"Q. ";color:var(--key)}
.disclaimer{margin-top:44px;padding:20px 22px;background:var(--tint);border:1px solid var(--line);border-radius:var(--radius)}
.disclaimer p{font-size:13px;color:#5b6470;line-height:1.9;margin:0 0 8px}
.disclaimer p:last-child{margin-bottom:0}
.related-card{
  display:block;margin-top:30px;padding:20px 22px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.related-card:hover{border-color:#c8cdd4;transform:translateY(-2px);box-shadow:0 8px 22px rgba(16,20,24,.07)}
.rel-label{font-size:11px;font-weight:800;color:var(--sub);letter-spacing:.1em;margin-bottom:6px}
.rel-title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:5px}
.rel-sub{font-size:13px;color:var(--sub);line-height:1.75}

/* ===== 指数の数値ブロック ===== */
.index-now{margin:20px 0 28px}
.index-hero{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.index-hero-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12px;color:var(--sub);margin-bottom:16px}
.beta-badge{
  display:inline-block;padding:3px 9px;border-radius:5px;white-space:nowrap;
  background:#fff5e6;color:#a15c07;border:1px solid #f3ddb8;
  font-size:10px;font-weight:800;letter-spacing:.04em;cursor:help;
}
.index-hero-title{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin-bottom:8px}
.hero-value{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-change{display:inline-flex;align-items:baseline;gap:6px;margin-top:12px;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.hero-change.up{color:var(--up)}
.hero-change.down{color:var(--down)}
.hero-change.flat{color:var(--sub)}
.hero-change-pct{font-weight:700}
.hero-change-arrow{font-size:16px;margin-left:-2px}
.hero-change-period{color:var(--sub);font-weight:600;font-size:14px;margin-left:4px}

/* 共有ボタン */
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.share-label{font-size:12px;color:var(--sub);margin-right:4px}
.share-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;font-family:inherit;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;transition:all .15s;
}
.share-btn:hover{border-color:var(--key);color:var(--key)}
.share-btn:disabled{opacity:.5;cursor:wait}
.share-btn.primary{background:var(--key);border-color:var(--key);color:#fff}
.share-btn.primary:hover{background:#1550b4;border-color:#1550b4;color:#fff}
.share-btn.share-success{background:var(--down);border-color:var(--down);color:#fff}
.share-btn svg{flex-shrink:0}

/* 3区分カード */
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.tier-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.tier-label{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:800;margin-bottom:8px}
.tier-label.vintage{color:var(--tier-vintage)}
.tier-label.modern{color:var(--tier-modern)}
.tier-label.current{color:var(--tier-current)}
.tier-year{font-size:11px;font-weight:600;color:var(--sub)}
.tier-value{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;margin-bottom:4px}
.tier-change{display:inline-flex;align-items:baseline;gap:4px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.tier-change.up{color:var(--up)}
.tier-change.down{color:var(--down)}
.tier-change.flat{color:var(--sub)}
.tier-change-pct{font-weight:600}

/* ===== 構成銘柄テーブル ===== */
.constituents{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:12px 0 8px}
.constituents-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--tint)}
.search-input{
  flex:1;min-width:180px;padding:8px 13px;font-family:inherit;font-size:13px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;
}
.search-input:focus{outline:none;border-color:var(--key)}
.search-input::placeholder{color:#9aa3ad}
.tabs{display:inline-flex;gap:5px;flex-wrap:wrap}
.tab{
  padding:6px 13px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
  color:var(--sub);background:#fff;border:1px solid var(--line);border-radius:999px;
}
.tab:hover{border-color:#c8cdd4}
.tab.active{background:var(--key);border-color:var(--key);color:#fff}

table.constituents-table{width:100%;border-collapse:collapse}
table.constituents-table th{
  text-align:left;padding:10px 14px;font-size:11px;font-weight:800;letter-spacing:.04em;
  color:var(--sub);background:var(--tint);border-bottom:1px solid var(--line);cursor:pointer;user-select:none;
}
table.constituents-table th:hover{color:var(--ink)}
table.constituents-table th.sort-asc::after{content:" ▲"}
table.constituents-table th.sort-desc::after{content:" ▼"}
table.constituents-table td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle}
table.constituents-table tr:last-child td{border-bottom:0}
table.constituents-table tr:hover td{background:#fafbfd}
.col-rank{width:38px;color:var(--sub);font-variant-numeric:tabular-nums}
.col-name{font-weight:700}
.col-set{color:var(--sub);font-size:12px}
.col-tier{width:76px}
.col-price{width:104px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.col-change{width:78px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.col-change.up{color:var(--up)}
.col-change.down{color:var(--down)}
.col-change.flat{color:var(--sub)}
.col-weight{width:80px;text-align:right;color:var(--sub);font-variant-numeric:tabular-nums}
.col-source{width:96px;text-align:right}
.mover-tier{display:inline-block;padding:2px 7px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.03em}
.mover-tier.VINTAGE{background:#fdf3e3;color:var(--tier-vintage)}
.mover-tier.MODERN{background:#e6f4f7;color:var(--tier-modern)}
.mover-tier.CURRENT{background:#f0ebfd;color:var(--tier-current)}
.src-links{display:inline-flex;gap:4px}
.src-links a{
  display:inline-block;width:22px;height:22px;line-height:20px;text-align:center;text-decoration:none;
  border:1px solid var(--line);border-radius:5px;background:#fff;
  font-size:11px;font-weight:800;color:var(--sub);transition:all .15s;
}
.src-links a:hover{background:var(--key);border-color:var(--key);color:#fff}
.src-empty{color:var(--sub);font-size:11px}
.show-more{
  display:block;width:100%;padding:14px;text-align:center;font-family:inherit;
  font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;
  background:var(--tint);border:0;border-top:1px solid var(--line);
}
.show-more:hover{color:var(--ink);background:#eef1f6}

@media (max-width:640px){
  .article-wrap{padding:26px 18px 8px}
  .article-title{font-size:24px}
  .article-body h2{font-size:19px;margin-top:44px}
  .article-body h3{font-size:16px}
  .toc{padding:16px 18px}
  .index-hero{padding:20px}
  .hero-value{font-size:38px}
  .tier-row{grid-template-columns:1fr}
  .share-label{width:100%;margin:0 0 4px}
  .share-btn{padding:8px 12px;font-size:12px}
  .col-set,.col-weight,.col-source{display:none}
  table.constituents-table th,table.constituents-table td{padding:10px 8px}
}