/* 太陽光判断ノート — global.css
 * ⚠ 固定名1本で運用する（scoped style を使わない）。
 *   理由：Astro の scoped style はハッシュが変わると全ページが差分化し、R2 の全量アップロードが発生する。
 *   品番カルテで実際に踏んだ問題（CLAUDE.md 参照）。
 *
 * 設計方針：中立性を主張するサイトなので、広告的な装飾を避ける。
 *   ・強い原色や煽りバナーを使わない（業者サイトに見えると信頼を失う）
 *   ・本文の可読性を最優先（対象は40〜60代の持ち家層）
 *   ・数字・表が主役。表が読みやすいことが最重要
 */

:root {
  /* 色：紙とインクのイメージ。太陽光なのでアクセントは黄みだが彩度は抑える */
  --bg: #fbfaf7;
  --surface: #ffffff;
  --border: #e3e0d8;
  --text: #23201c;
  --text-weak: #5f5a52;
  --accent: #b9761a;        /* 見出し・リンク。橙だが渋め */
  --accent-weak: #f6efe2;
  --warn-bg: #fdf3f2;       /* 注意喚起（手口の解説など） */
  --warn-border: #e0b4ad;
  --ok-bg: #f0f6f1;
  --ok-border: #a9c8b0;

  --maxw: 46rem;
  --radius: 6px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
          "Yu Gothic UI", "Meiryo", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1917;
    --surface: #232120;
    --border: #3a3634;
    --text: #ece8e2;
    --text-weak: #a9a29a;
    --accent: #e5a951;
    --accent-weak: #33291a;
    --warn-bg: #33211f;
    --warn-border: #6b4540;
    --ok-bg: #1e2a20;
    --ok-border: #3f5c46;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  /* 対象年齢が高めなので本文は大きめ・行間広め */
  font-size: 1.0625rem;
  line-height: 1.9;
  letter-spacing: .04em;
}

/* ---------- レイアウト ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.15rem; }

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-header .wrap {
  display: flex; align-items: baseline; gap: .9rem;
  padding-top: .85rem; padding-bottom: .85rem;
  flex-wrap: wrap;
}
.site-title { font-size: 1.06rem; font-weight: 700; letter-spacing: .02em; }
.site-title a { color: var(--text); text-decoration: none; }
.site-tagline { font-size: .8rem; color: var(--text-weak); }

.site-nav { margin-left: auto; display: flex; gap: 1rem; font-size: .85rem; }
/* padding＋負マージンで見た目を変えずタップ領域44pxを確保（対象読者は40〜60代） */
.site-nav a {
  color: var(--text-weak); text-decoration: none;
  padding: .75rem .25rem; margin: -.75rem -.25rem;
}
.site-nav a:hover { color: var(--accent); text-decoration: underline; }

main { padding: 2rem 0 3rem; }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: .82rem; color: var(--text-weak);
  padding: 1.6rem 0 2.4rem;
}
.site-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.site-footer a { color: var(--text-weak); }
.site-footer nav a { padding: .7rem .2rem; margin: -.7rem -.2rem; }

/* ---------- 文字 ---------- */
h1 {
  font-size: 1.6rem; line-height: 1.45; margin: 0 0 .5rem;
  letter-spacing: .01em;
}
h2 {
  font-size: 1.24rem; line-height: 1.5; margin: 3.5rem 0 .9rem;
  padding-left: .6rem; border-left: 4px solid var(--accent);
}
h3 { font-size: 1.06rem; margin: 2.4rem 0 .6rem; }
/* ページ内リンクで飛んだとき見出しが画面上端に張り付かないように */
[id] { scroll-margin-top: 1rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--accent); }

/* 記事メタ（更新日・出典明示。信頼性の担保） */
.meta {
  font-size: .82rem; color: var(--text-weak);
  margin: 0 0 1.6rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.meta span + span::before { content: "／"; margin: 0 .45rem; opacity: .6; }

/* 記事冒頭の要約（結論を先に出す） */
.summary {
  background: var(--accent-weak);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0 0 2rem;
}
.summary p:last-child { margin-bottom: 0; }
.summary strong { font-weight: 700; }

/* ---------- 表（このサイトの主役） ---------- */
.table-scroll { overflow-x: auto; margin: 1.3rem 0; scrollbar-width: thin; }
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
/* はみ出しているときだけ site.js が is-scrollable を付ける（横スクロールできることの可視化） */
.table-scroll.is-scrollable::before {
  content: "→ 表は横にスクロールできます";
  position: sticky; left: 0;
  display: block;
  font-size: .75rem; color: var(--text-weak);
  margin-bottom: .15rem;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: .93rem;
  background: var(--surface);
}
th, td {
  border: 1px solid var(--border);
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
}
th { background: var(--accent-weak); font-weight: 700; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg) 45%, transparent); }

/* 異常値の強調（実額データで使う） */
.flag-high { color: #b3261e; font-weight: 700; }
@media (prefers-color-scheme: dark) { .flag-high { color: #ff9a92; } }

/* ---------- 注意ボックス ---------- */
.note, .warn {
  border-radius: var(--radius);
  padding: .95rem 1.1rem;
  margin: 1.4rem 0;
  font-size: .95rem;
}
.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); }
.note { background: var(--ok-bg); border: 1px solid var(--ok-border); }
.warn > :last-child, .note > :last-child { margin-bottom: 0; }
.warn strong, .note strong { display: block; margin-bottom: .35rem; }

/* 手口カタログ用 */
.teguchi { margin: 1.4rem 0; }
.teguchi dt {
  font-weight: 700; margin-top: 1.1rem;
  padding: .3rem .6rem; background: var(--accent-weak);
  border-radius: var(--radius);
}
.teguchi dd { margin: .5rem 0 0; padding-left: .2rem; }

/* そのまま読める断り文句（実用テンプレ） */
.script-box {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: .85rem 1.05rem;
  margin: 1rem 0;
  font-size: .97rem;
}
.script-box .say { font-weight: 700; }
.script-box .why { color: var(--text-weak); font-size: .87rem; margin-top: .4rem; }

/* ---------- パンくず（可視。JSON-LD BreadcrumbList と同一データ） ---------- */
.breadcrumb {
  display: flex; align-items: baseline;
  font-size: .78rem; color: var(--text-weak);
  margin: 0 0 .5rem;
  white-space: nowrap; overflow: hidden;
}
.breadcrumb .bc-item { flex-shrink: 0; }
.breadcrumb .bc-item + .bc-item::before { content: "›"; margin: 0 .45rem; opacity: .55; }
.breadcrumb a {
  color: var(--text-weak); text-decoration: none;
  padding: .7rem 0; margin: -.7rem 0;   /* タップ領域の確保 */
}
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.breadcrumb .bc-current { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- PR表記（景表法・ステマ規制。全ページ必須） ----------
 * 1行チップ。スマホのファーストビューを潰さない（詳細は /about/#ad が担う） */
.pr-notice {
  display: inline-block;
  font-size: .74rem; color: var(--text-weak);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .12rem .7rem;
  margin: 0 0 1rem;
}
.pr-notice a { color: var(--text-weak); }

/* ---------- 出口リンク（控えめに。煽らない） ---------- */
.cta {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.05rem 1.2rem;
  margin: 2rem 0;
}
.cta h3 { margin: 0 0 .5rem; font-size: 1rem; }
.cta p { font-size: .93rem; margin-bottom: .8rem; }
.cta a.btn {
  display: inline-block;
  background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .95rem;
  padding: .6rem 1.15rem; border-radius: var(--radius);
}
.cta a.btn:hover { filter: brightness(1.08); }
.cta .disclaimer { font-size: .78rem; color: var(--text-weak); margin: .6rem 0 0; }

/* ---------- 目次 ---------- */
.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin: 1.6rem 0 2.2rem;
  font-size: .92rem;
}
.toc strong { display: block; margin-bottom: .5rem; font-size: .88rem; }
.toc ol { margin: 0; padding-left: 1.3rem; }
.toc li { margin: .25rem 0; }

/* ---------- FAQ（FAQPage JSON-LD と同じ配列から描画） ---------- */
.faq { margin: 1.4rem 0; }
.faq dt { font-weight: 700; margin: 1.4rem 0 .35rem; }
.faq dt::before {
  content: "Q";
  display: inline-block;
  color: var(--accent); font-weight: 700;
  margin-right: .5rem;
}
.faq dd { margin: 0; font-size: .97rem; }
.faq dd::before {
  content: "A";
  display: inline-block;
  color: var(--text-weak); font-weight: 700;
  margin-right: .5rem;
}

/* ---------- 関連リンク ---------- */
.related { margin: 2.5rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.related h2 { border: 0; padding: 0; font-size: 1.02rem; margin: 0 0 .7rem; }
.related ul { margin: 0; padding-left: 1.2rem; }
.related li { margin: .35rem 0; }

/* ---------- 出典 ---------- */
.sources { margin-top: 2.4rem; font-size: .85rem; color: var(--text-weak); }
.sources h2 { border: 0; padding: 0; font-size: .95rem; margin: 0 0 .5rem; }
.sources ol { padding-left: 1.3rem; margin: 0; }
.sources li { margin: .3rem 0; }
/* URL表示のリンクが折り返されずスマホで横はみ出しするのを防ぐ */
.sources a { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- お問い合わせフォーム（/contact/。Turnstile キー記入で有効化） ---------- */
.ct-form {
  display: flex; flex-direction: column; gap: .8rem;
  max-width: 34rem; margin: 1.4rem 0;
  font-size: .9rem; color: var(--text-weak);
}
.ct-form label { display: flex; flex-direction: column; gap: .25rem; }
.ct-form input, .ct-form select, .ct-form textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  font-size: 1rem; color: var(--text); font-family: inherit;
}
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.ct-form button {
  background: var(--accent); color: #fff; border: 0;
  border-radius: var(--radius);
  padding: .6rem 1.15rem; font-size: .95rem; font-weight: 700;
  cursor: pointer; align-self: flex-start;
}
.ct-form button:hover { filter: brightness(1.08); }
.ct-hp { position: absolute; left: -9999px; top: -9999px; }
.ct-msg { margin: 0; font-size: .9rem; }
.ct-msg.is-ok { color: #2e7d43; }
.ct-msg.is-err { color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .ct-msg.is-ok { color: #8fd6a4; }
  .ct-msg.is-err { color: #ff9a92; }
}

/* ---------- モバイル ---------- */
@media (max-width: 640px) {
  body { font-size: 1rem; line-height: 1.85; }
  h1 { font-size: 1.38rem; }
  h2 { font-size: 1.14rem; margin-top: 3rem; }
  .site-nav { width: 100%; margin-left: 0; gap: .85rem; }
  table { font-size: .87rem; }
}

/* 印刷（見積書と見比べる人がいる想定） */
@media print {
  .site-nav, .cta, .site-footer nav { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
}