/* === アクセシビリティ・操作性の修正（2026-09-29） === */

/* 1. キーボードフォーカスリング — GRAY 側に存在しなかった */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* outline:none していた入力欄にリングを戻す */
.search-bar input:focus-visible,
.cx-fields input:focus-visible, .cx-fields select:focus-visible,
.cx-row input:focus-visible, .restock-row input:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* 2. アンカー着地が sticky ヘッダーの下に潜る */
:where(section, h1, h2, h3)[id], main[id] { scroll-margin-top: 80px; }
@media (max-width: 760px) { :where(section, h1, h2, h3)[id], main[id] { scroll-margin-top: 72px; } }

/* 3. ジャーナル欄の repeat(3,1fr) 直書きがスマホで溢れる */
#journalGrid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; }

/* 4. モバイルの 300ms ダブルタップ遅延 */
:where(a, button, [role="button"], input, select, label) { touch-action: manipulation; }

/* 5. ドロワー/サイドバー内のスクロール連鎖を止める */
.drawer, .sidebar, .pmodal, .search-overlay { overscroll-behavior: contain; }

/* 6. 価格の桁を揃える */
.price, .drawer-total b, #cartTotal, #cartGrand, .bag-count { font-variant-numeric: tabular-nums; }

/* 7. 見出しの泣き別れ防止 */
h2, h3, .trust-h { text-wrap: balance; }
/* 和文見出しは既存の word-break:auto-phrase（文節折り）に任せる */
.hero-jp { text-wrap: initial; }

/* 8. スキップリンク */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: var(--radius-pill);
  text-decoration: none; transition: top .15s ease;
}
.skip-link:focus-visible { top: 8px; }