/* ========== LAYOUT: base & primitives ========== */

/* ベース：セクションはテーマトークンを背景色/文字色に反映 */
section {
    background: var(--bg);
    color: var(--fg);
}

/* コンテナ（ベース） */
.container {
    width: min(1120px, 92vw);
    margin-inline: auto;
}

/* セクションの縦パディング（ページごとに粒度変更） */
.section--tight   { padding-block: clamp(24px, 4vw, 48px); }
.section--normal  { padding-block: clamp(40px, 6vw, 88px); } /* 既定候補 */
.section--loose   { padding-block: clamp(64px, 8vw, 120px); }

/* 幅バリエーション（.container の派生） */
.container--narrow { width: min(860px, 92vw); margin-inline: auto; }
.container--wide   { width: min(1280px, 94vw); margin-inline: auto; }

/* セクションの区切り線 */
.section--divider { border-top: 1px solid var(--line); }

/* 縦積み（要素間の一定間隔） */
.stack { display: grid; gap: var(--stack-gap, 1rem); }
.stack--sm { --stack-gap: .5rem; }
.stack--lg { --stack-gap: 1.5rem; }

/* 横並びの自然折返し（タグ群・アイコン群に） */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, .5rem); }

/* レスポンシブカードグリッド */
.grid {
    display: grid;
    gap: var(--grid-gap, 1rem);
    grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1024px){ .grid { --grid-cols: 2; } }
@media (max-width: 640px) { .grid { --grid-cols: 1; } }

/* Switcher: 左右2カラム→狭い時1カラム（説明+画像など） */
.switcher {
    display: grid; gap: var(--switcher-gap, 1.25rem);
    grid-template-columns: 1fr minmax(0, var(--switcher-side, 520px));
    align-items: start;
}
@media (max-width: 900px){ .switcher { grid-template-columns: 1fr; } }

/* 読み物用タイポ */
.prose { line-height: 1.8; color: var(--fg); }
.prose h2, .prose h3 { margin: 1.6em 0 .6em; font-weight: 800; }
.prose p { margin: .9em 0; color: color-mix(in srgb, var(--fg) 86%, var(--muted)); }
.prose ul, .prose ol { margin: .8em 0 .8em 1.2em; }
.prose code {
    background: color-mix(in srgb, var(--bg) 85%, #000 15%);
    color: var(--fg); padding: .15em .4em; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 視覚非表示（スクリーンリーダー向け） */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

/* フォーカスリングの統一（キーボード操作向け） */
.focus-ring:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 10px;
}

/* マージン・パディング簡易ユーティリティ（必要分だけ） */
.mt-0{margin-top:0} .mt-1{margin-top:.5rem} .mt-2{margin-top:1rem}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem}
.p-0{padding:0} .p-1{padding:.5rem} .p-2{padding:1rem}

/* 低モーション環境 */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}