/* ============================================================
   Yojo+ — Reset & base typography
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

/* 日本語は文節単位で改行する（対応ブラウザのみ／非対応は従来動作） */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] .lede,
html[lang="ja"] .quiz__q {
  word-break: auto-phrase;
  line-break: strict;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  letter-spacing: inherit;
}

input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--c-paper-faint); }

hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--sp-7) 0; }

::selection { background: var(--c-gold-400); color: var(--c-ink-900); }

/* ---- Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: var(--c-ink-500) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--c-ink-500); border-radius: var(--r-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Utility typography ---- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-5);
  display: block;
}
.eyebrow--mute { color: var(--c-paper-faint); }

.display-1 { font-size: var(--fs-4xl); }
.display-2 { font-size: var(--fs-3xl); }
.display-3 { font-size: var(--fs-2xl); }
.display-4 { font-size: var(--fs-xl); line-height: var(--lh-snug); }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.68;
  /* ★ 和文は同じ倍率でも行間が広く見えます。html[lang="ja"] で少し詰めます（下） */
  color: var(--fg-dim);
  max-width: var(--maxw-text);
  font-weight: var(--fw-body);
}

.body-dim { color: var(--fg-dim); }
.body-mute { color: var(--fg-mute); }

.caps {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ★ 従来 --c-paper-faint(#5A5548) で、黒地とのコントラストが 3.2:1 しか無く
   小さい注記が読めませんでした。--fg-mute(#8F8878) に上げて 6.0:1 にしています。 */
.note {
  font-size: var(--fs-2xs);
  line-height: 1.8;
  color: var(--fg-mute);
}
/* 販売できない地域の説明など、読み飛ばされては困る注記 */
.note--warn { color: var(--c-gold-300); }

.gold { color: var(--accent); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--sp-4); top: -100px;
  z-index: var(--z-toast);
  background: var(--c-gold-400); color: var(--c-ink-900);
  padding: 10px 18px; border-radius: var(--r-sm);
  font-family: var(--font-ui); font-size: var(--fs-xs);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* ---- Fonts are loaded via <link> in each page head ---- */

/* ------------------------------------------------------------
   日本語の見出しを文節で折る（js/wrap-ja.js と対で使います）
   ------------------------------------------------------------
   ★ keep-all だけでは足りません。日本語には単語の区切りが無いので、
     これだけだと折る場所が無く、はみ出します。
     JS 側が文節の境目に <wbr> を入れるので、その2つで成立します。
   ★ overflow-wrap は保険です。<wbr> が1つも入らなかった見出しは
     従来どおりどこでも折れます（最悪でも今と同じ、あふれない）。 */
html.phrase-ja h1, html.phrase-ja h2, html.phrase-ja h3, html.phrase-ja h4,
html.phrase-ja [data-phrase="1"] {
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 小書きカナ・長音符を行頭に出さない。<wbr> が入らなかった場所にも効きます。 */
  line-break: strict;
}