/* quality-base.css — 第1層:品質基盤CSS(全サイト共通・ブランド非依存)
   ──────────────────────────────────────────────────────────────
   ここには「品質」だけを置く。背景表現・カード・配色などの意匠は一切含めない。
   意匠は site.css(サイト固有)に書き、トークンは theme.css で定義する。
   基準の根拠は reference/house-quality.md。
   ────────────────────────────────────────────────────────────── */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--bg-base);
  color: var(--c-text);
  overflow-x: clip;             /* はみ出し隠蔽ではなく設計で防ぐこと(house-quality.md) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, canvas, svg, video { display: block; max-width: 100%; }
address { font-style: normal; }

/* ── レイアウト原則 ── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.section { padding: var(--sec-pad) 0; position: relative; }

/* 背景レイヤー(実装方式を問わず、固定背景は必ずこの規約に従う) */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* コンテンツは背景より前面 */
main, .section, .hero, footer { position: relative; z-index: 1; }

/* ── ビューポート実測対応 ── */
.hero {
  min-height: 640px;
  height: 100vh;
  height: 100svh;   /* モバイルのアドレスバー伸縮に追従(非対応は100vh) */
}

/* ── アクセシビリティ ── */
/* キーボードフォーカス: 明暗どちらの面でも見える二重輪郭 */
:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-halo, rgba(0, 0, 0, 0.5));
}

/* reduced-motion: CSS由来の動きを簡略化(JS側は各スクリプトが対応) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}