/*
 * BuildMate – 青海波 (Seigaiha) 背景パターン
 * 全ページ共通 CSS
 *
 * ★ ポイント：
 *   - body に直接適用 → 全ページの地面に模様が出る
 *   - section・header・footer は個別に強化
 *   - div カード類は background-image: none で無地を保つ
 */

/* ────────────────────────────────────────────
   青海波 SVG パターン（背景色別 2 種）
   ──────────────────────────────────────────── */
:root {
  /* ライト背景用（ベージュ・白）: ゴールド系の細線 */
  --seigaiha-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Ccircle cx='0'  cy='30' r='29' fill='none' stroke='%23a07830' stroke-opacity='0.13' stroke-width='0.9'/%3E%3Ccircle cx='30' cy='30' r='29' fill='none' stroke='%23a07830' stroke-opacity='0.13' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='30' r='29' fill='none' stroke='%23a07830' stroke-opacity='0.13' stroke-width='0.9'/%3E%3Ccircle cx='15' cy='0'  r='29' fill='none' stroke='%23a07830' stroke-opacity='0.13' stroke-width='0.9'/%3E%3Ccircle cx='45' cy='0'  r='29' fill='none' stroke='%23a07830' stroke-opacity='0.13' stroke-width='0.9'/%3E%3C/svg%3E");

  /* ダーク背景用（ネイビー系）: ホワイト系の細線 */
  --seigaiha-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Ccircle cx='0'  cy='30' r='29' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='0.9'/%3E%3Ccircle cx='30' cy='30' r='29' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='0.9'/%3E%3Ccircle cx='60' cy='30' r='29' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='0.9'/%3E%3Ccircle cx='15' cy='0'  r='29' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='0.9'/%3E%3Ccircle cx='45' cy='0'  r='29' fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='0.9'/%3E%3C/svg%3E");

  --seigaiha-size: 60px 30px;
}

/* ────────────────────────────────────────────
   body 全体に適用（全ページの地面）
   gift.html・contact.html・gas.html・diagnosis.html など
   section に bg クラスがないページも含む
   ──────────────────────────────────────────── */
body {
  background-image: var(--seigaiha-light);
  background-size: var(--seigaiha-size);
  background-repeat: repeat;
}

/* ────────────────────────────────────────────
   ライト系 section（body と同系・念のため明示）
   ──────────────────────────────────────────── */
section.bg-wa-bg,
section.bg-white {
  background-image: var(--seigaiha-light);
  background-size: var(--seigaiha-size);
  background-repeat: repeat;
}

/* ────────────────────────────────────────────
   ダーク系 section（ネイビー系すべて）
   ・services.html の section.bg-wa-brand
   ・index.html の profile-dark-section
   ──────────────────────────────────────────── */
section.bg-wa-brand,
section.profile-dark-section {
  background-image: var(--seigaiha-dark), linear-gradient(135deg, #1a2535 0%, #1f2a44 60%, #22304e 100%);
  background-size: var(--seigaiha-size), cover;
  background-repeat: repeat, no-repeat;
}

/* ────────────────────────────────────────────
   ヘッダー・フッター
   ──────────────────────────────────────────── */
header {
  background-image: var(--seigaiha-light);
  background-size: var(--seigaiha-size);
  background-repeat: repeat;
}

footer {
  background-image: var(--seigaiha-dark);
  background-size: var(--seigaiha-size);
  background-repeat: repeat;
}

/* ────────────────────────────────────────────
   内部カード・コラム： 明示的に無地（pattern なし）
   ──────────────────────────────────────────── */
div.bg-white,
div.bg-wa-bg {
  background-image: none;
}

/* ダーク番号グリッドのセル：背景色で青海波を遮断し文字を読みやすく */
.pain-card {
  background-color: #1e2f48;
  background-image: none;
}