/* =========================================================================
 * common.css — サイト共通CSS
 * =========================================================================
 * 全ページで最初に読み込みます。ここにあるのは:
 *   1. デザイントークン(:root のCSS変数 = 色・角丸・フォント)
 *   2. ベーススタイル(body・リンク・数字フォントなど)
 *   3. 共通レイアウト(.wrap)と共通部品(パネル・ボタン・注記・広告枠)
 *   4. サイト共通ヘッダー/フッター(濃色バー。旧 header.php 同梱ぶん)
 *
 * 色を変えたいときは :root の変数を直すだけで全ページに反映されます。
 * ページ固有のスタイルは home.css / tracker.css / meter.css / page.css へ。
 * ========================================================================= */

:root{
  /* 基本パレット(計器盤テーマ) */
  --ink:#1b1f27; --ink-2:#252b36; --ink-3:#323a48;
  --paper:#f6f4ee; --panel:#ffffff;
  --line:#e4e0d4; --line-soft:#eeece3; --line-dash:#d5d0c2;
  --sub:#6b7280; --sub-on-dark:#9aa2b1;
  --brass:#c08a2e; --brass-bright:#e0a94a;
  --needle:#d14343; --needle-deep:#a83232;
  --zone-low:#c65c4f; --zone-mid:#c9982f; --zone-high:#4f9a72;
  /* 状態色(値下がり・最安値・警告) */
  --green:#2f6a4b; --green-bg:#f2f7f2;
  --down:#c02626;  --down-bg:#fdeeee;
  --amber:#9a5b00;
  /* Yahoo!ショッピングのアクセント */
  --mall-y:#1f5fa9; --mall-y-bg:#ebf2fb;
  /* 寸法・フォント */
  --radius:16px;
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,"Courier New",monospace;
}

/* ---------- ベース ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15.5px;line-height:1.75;-webkit-text-size-adjust:100%}
a{color:inherit}
img{max-width:100%}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- 共通レイアウト(ツールページ用コンテナ) ---------- */
.wrap{max-width:860px;margin:0 auto;padding:28px 20px 60px}

/* ---------- ツールページ共通ヘッダー(ページ見出し) ---------- */
header.site h1{font-size:24px;font-weight:800;margin:8px 0 8px}
header.site h1 .tick{color:var(--brass);font-size:14px;vertical-align:3px;margin-right:6px}
header.site .lede{color:var(--sub);font-size:14px;margin:0 0 8px;max-width:44em}
.pr-note{font-size:11.5px;color:var(--sub);margin:0 0 20px}
.mall-badge{display:inline-block;font-size:11px;font-weight:800;border-radius:5px;
  padding:2px 9px;background:var(--mall-y-bg);color:var(--mall-y);margin-bottom:6px}

/* ---------- パネル(白いカード。トラッカー・メーター共通の器) ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px}
.panel h2{font-size:15px;font-weight:800;margin:0 0 14px;display:flex;align-items:center;gap:7px}
.panel h2::before{content:"";width:4px;height:14px;background:var(--brass);border-radius:2px;flex:none}

/* ---------- ボタン・フォーム部品(共通トーン) ---------- */
.btn-primary{background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:10px;
  padding:11px 18px;font-size:14.5px;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-primary:hover{background:var(--ink-3);border-color:var(--ink-3)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}

/* ---------- 注記・警告(共通) ---------- */
.note{font-size:12px;color:var(--sub);margin-top:26px;border-top:1px dashed var(--line);padding-top:14px}
.warn{background:#fdf3ec;border:1px solid #ecd4bf;border-radius:10px;padding:10px 14px;
  font-size:12.8px;color:#8a5323;margin:10px 0}
.warn strong{color:var(--needle-deep)}
.alert{background:var(--down-bg);border:1px solid #f0c9c9;color:#8e0000;border-radius:12px;
  padding:12px 14px;margin:14px 0;font-size:13.5px}

/* ---------- Yahoo!タグ(商品カード等で使用) ---------- */
.mall{display:inline-block;font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 6px;line-height:1.6}
.mall.yahoo{background:var(--mall-y-bg);color:var(--mall-y)}

/* ---------- ローテーション広告枠 ---------- */
.ad-slot{margin:22px 0;text-align:center}
.ad-pr-label{display:block;font-size:10px;letter-spacing:.15em;color:var(--sub);margin-bottom:4px}

/* =========================================================================
 * サイト共通ヘッダー / フッター(全ページ上下の濃色バー)
 * 旧 partials/header.php に同梱されていたCSSをここへ移動しました。
 * ========================================================================= */
.site-chrome-top{background:var(--ink);color:#fff}
.site-chrome-top .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1040px;margin:0 auto;padding:14px 20px}
.site-chrome-top .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;
  font-weight:800;font-size:15.5px;letter-spacing:.02em}
.site-chrome-top .brand svg{width:26px;height:26px;flex:none}
.site-chrome-top nav{display:flex;gap:20px;font-size:13px;flex-wrap:wrap;justify-content:flex-end}
.site-chrome-top nav a{text-decoration:none;color:var(--sub-on-dark);white-space:nowrap}
.site-chrome-top nav a:hover{color:#fff}
@media(max-width:520px){
  .site-chrome-top .bar{gap:10px;padding:12px 16px}
  .site-chrome-top nav{gap:12px;font-size:12px}
}

.site-chrome-foot{background:var(--ink);color:var(--sub-on-dark);padding:34px 0 30px;font-size:12.5px;margin-top:48px}
.site-chrome-foot .inner{max-width:1040px;margin:0 auto;padding:0 20px}
.site-chrome-foot .fbrand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;
  font-size:14px;margin-bottom:10px}
.site-chrome-foot .fbrand svg{width:20px;height:20px}
.site-chrome-foot a{color:var(--sub-on-dark);text-decoration:none}
.site-chrome-foot a:hover{color:#fff}
.site-chrome-foot .flinks{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0}
/* Yahoo!のクレジットは規定HTMLをそのまま使用(縮小・色替え禁止のため読める大きさで) */
.site-chrome-foot .credits{margin:12px 0;font-size:13px;line-height:2}
.site-chrome-foot .credits a{color:#9cc2ff;text-decoration:underline}
.site-chrome-foot .credits p{margin:0}
.site-chrome-foot p{margin:5px 0}