/* ヤジルシのサポートのページ（S-07・S-08・404）。値は docs/00_design/design-concept.md の「Web のページ」と mock.html の :root。
   外のフォント・CDN は読まない。ダークは端末の設定（prefers-color-scheme）に合わせる */
:root {
  --color-background: #F6F2EC;
  --color-surface: #FFFFFF;
  --color-primary: #A9442B;
  --color-text: #2B211C;
  --color-muted: #6F625A;
  --color-border: #E3D9CF;
  --color-lane: #FFFFFF;
  --font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --radius-sm: 4px;
  --content-max: 680px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1D1714;
    --color-surface: #2A221E;
    --color-primary: #D86F52;
    --color-text: #F4ECE5;
    --color-muted: #B3A59B;
    --color-border: #3D322C;
    --color-lane: #F4ECE5;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
body { margin: 0; padding: 24px 16px 0; word-break: auto-phrase; font-family: var(--font-ja); color: var(--color-text); background: var(--color-background); line-height: 1.6; font-size: 16px; -webkit-text-size-adjust: 100%; }
a { color: var(--color-primary); }
.track { position: relative; height: 16px; background: var(--color-primary); border-radius: 2px; }
.track::before, .track::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--color-lane); }
.track::before { top: 4px; }
.track::after { bottom: 4px; }
.web-head { max-width: var(--content-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.web-head .brand { font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.web-head .track { width: 72px; height: 10px; margin-top: 4px; }
.web-head .track::before { top: 2px; }
.web-head .track::after { bottom: 2px; }
.lang-switch { display: flex; gap: 4px; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary); font-weight: 700; text-decoration: none; }
.web-body { max-width: var(--content-max); margin: 0 auto; padding: 8px 0 48px; line-height: 1.8; }
.web-body h1 { margin: 28px 0 8px; font-size: 26px; line-height: 1.4; }
.web-body h2 { margin: 28px 0 6px; padding-left: 10px; border-left: 4px solid var(--color-primary); font-size: 19px; line-height: 1.4; }
.web-body p, .web-body li, .web-body dd { overflow-wrap: anywhere; }
.web-body ul { padding-left: 1.4em; }
.web-body dl { margin: 0; }
.web-body dt { margin-top: 16px; font-weight: 700; }
.web-body dd { margin: 4px 0 0; }
.web-body .mail { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.web-body .to-page { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--color-primary); font-weight: 700; text-decoration: underline; }
.web-body .lang-block + .lang-block { margin-top: 48px; padding-top: 8px; border-top: 2px solid var(--color-border); }
.web-body .dates { margin-top: 28px; color: var(--color-muted); font-size: 14px; }
.web-foot { max-width: var(--content-max); margin: 0 auto; padding: 16px 0 24px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 13px; }