/* ════════════════════════════════════════════════════════
   さわかみアーカイブス — refinements.css
   目的: レスポンシブの崩れ補正 ＋ 可読性（文字サイズ/字間/行間）改善
   方針: 既存の配色・フォント・レイアウトは変更しない。
         「読みやすさ」と「崩れ」だけを上書きで補正する。
   読み込み順: common.css → ページ別CSS → lightbox/share-related → ★この refinements.css を最後に★
   ※ 最後に読み込むことで、同じ詳細度のルールはこちらが優先されます。
════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. レンダリング & 本文の太さ（可読性の要）
   ───────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;   /* モバイルで本文が勝手に拡大されない */
  text-size-adjust: 100%;
  scroll-padding-top: 84px;         /* 固定ナビの下にアンカー先が隠れないように */
}
body {
  font-weight: 300;                       /* 200→300: 日本語本文が細すぎて読みにくいのを改善 */
  -webkit-font-smoothing: antialiased;    /* 細い字を滑らかに（Mac / iOS） */
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.85;                      /* 既定行間を読みやすく（各要素で個別指定があればそちらが優先） */
}

/* 段落・説明文の行間を底上げ（既存lhがあっても確実に読みやすい値へ） */
.hero-desc,
.about-text p,
.step-desc,
.cta-desc,
.pref-section p.lead,
.services-desc,
.news-body-inner p,
.contact-notice,
.sa-lb-body p,
.testimonial-text {
  line-height: 2.0;
  letter-spacing: .01em;   /* ごく僅か（詰まり防止）。日本語が間延びしない範囲 */
}

/* ヒーロー説明文は .8rem と小さめ → 可動で少し底上げ */
.hero-desc { font-size: clamp(.85rem, 2.6vw, .94rem); }

/* ─────────────────────────────────────────────
   2. 極小ラベルの底上げ（.52rem ≒ 8px は小さすぎ）
   ─ 短い英字ラベルなので、少し大きくしても崩れにくい
   ───────────────────────────────────────────── */
.stat-label,
.step-num,
.cta-note,
.pref-maphint {
  font-size: .62rem;       /* .52〜.55rem → .62rem */
  letter-spacing: .22em;   /* 拡大に合わせて字間を微調整 */
}
.footer-col h4         { font-size: .58rem; }
.footer-bottom p       { font-size: .6rem;  }   /* コピーライト行（極小だったもの） */
.nav-links a           { font-size: .62rem; letter-spacing: .22em; }  /* PCナビも僅かに */

/* ─────────────────────────────────────────────
   3. タッチ端末（スマホ/タブレット）対応
   ─ 自作カーソルを無効化し、タップ領域を確保
   ───────────────────────────────────────────── */
@media (hover: none), (pointer: coarse) {
  /* cursor:none を解除（タッチではカーソルが無くて操作感が悪い） */
  body, a, button,
  .btn-primary, .btn-outline, .nav-cta, .service-link { cursor: auto; }
  .cursor, .cursor-ring { display: none; }   /* 自作カーソルはタッチで非表示 */

  /* タップ領域 最低44px（押しやすさ） */
  .nav-hamburger, .nav-cta, .mob-close,
  .share-btn, .pref-chip { min-height: 44px; }
  .pref-chip { padding-block: 11px; }
}

/* ─────────────────────────────────────────────
   4. レイアウト崩れの補正
   ───────────────────────────────────────────── */
/* 横スクロール防止のセーフティ（はみ出し対策） */
body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }   /* メディアのはみ出し防止（svgアイコンは個別指定が優先されるので除外） */

/* 極小スマホ: 動画/アーカイブ/関連のグリッドを1列に（2列だと窮屈） */
@media (max-width: 440px) {
  .archive-grid,
  .related-grid     { grid-template-columns: 1fr; }
  .stats-bar        { grid-template-columns: 1fr; }   /* 4→2→1 段階的に */
  .pref-filter      { gap: 6px; }
  .pref-chip        { font-size: .78rem; padding: 9px 12px; }
}

/* 中間幅(600〜768)でアーカイブ等が2列のとき、カードのメタが詰まらないように */
@media (max-width: 768px) {
  .related-title,
  .video-modal-title { word-break: break-word; }
}

/* ─────────────────────────────────────────────
   5. アクセシビリティの底上げ（品質フロア）
   ─ キーボード操作の可視フォーカス / モーション配慮
   ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--amber, #d4a847);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  /* 方針: 「連続する/大きな動き」だけ止め、ロード時の控えめな演出（淡いフェード等）は残す。
     めまい等の主因は無限ループ・視差・大移動であり、1回限りの淡いフェードは概ね許容されるため。
     ※ 以前は * へ animation-duration:.001ms を一括適用していたが、
        ロード演出やコピー通知まで消えてしまうため取りやめた。 */
  .grain, .scanlines        { display: none !important; }   /* 粒子・走査線（無限ループ） */
  .film-reel, .perf-track   { animation: none !important; } /* フィルムの自動スクロール */
  html                      { scroll-behavior: auto !important; } /* スムーススクロールは無効化 */
  /* ヒーローの #heroCanvas はJS制御のため、必要ならJS側で matchMedia('(prefers-reduced-motion: reduce)') 判定を追加 */
}