/* ==========================================================================
   base.css — リセット・素の要素・日本語組版
   日本語組版は DESIGN_LAWS_DEEP.md 第8章（JLReq / JIS X 4051）に準拠。
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 固定ヘッダー分だけアンカー着地位置を下げる（見出しがヘッダーに隠れるのを防ぐ） */
  scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-body);
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ja);
  /* 和文の詰め（palt）と欧文コンテキストの字送り最適化 */
  font-feature-settings: 'palt' 1, 'chws' 1;
  /* 禁則を厳密に・文節単位で折り返す＝「1文字だけ次行に落ちる」を構造的に防ぐ */
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* auto-phrase 未対応ブラウザのフォールバック（Safari 等） */
@supports not (word-break: auto-phrase) {
  body { word-break: normal; overflow-wrap: break-word; }
}

/* 2行前後で収まる短いラベルだけ balance を掛け、最終行に1文字だけ落ちるのを防ぐ。
   （1024px で「北日本ヘア・スタイリストカレッジ 卒」の“卒”が孤立したため）
   長い本文には掛けない＝行が細切れになるのを避ける（DESIGN_LAWS A項）。 */
.staff__school, .staff__role, .stat__label, .stat__note, .perk__title, .perk__desc,
.step__title, .step__desc, .figure figcaption, .lockup__note, .field__hint, .notice__title {
  text-wrap: balance;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
img { background: var(--color-surface); }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  line-height: var(--lh-head);
  font-weight: 700;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--color-ink); text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
a:hover { text-decoration-color: var(--theme); }

/* フォーカスは必ず見える（A11y・第11章）。マウス操作時だけ出さない */
:focus-visible {
  outline: 3px solid var(--theme);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* スクリーンリーダー専用（見出し階層を構造として持つため） */
.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; left: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--color-ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0; font-size: var(--fs-small);
}
.skip-link:focus { left: 0; }

/* ---- 英字ディスプレイ共通 ------------------------------------------------ */
.en {
  font-family: var(--font-en);
  font-weight: 400;          /* Archivo Black は単一ウェイト */
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
  font-feature-settings: normal;
  line-height: 0.9;
}

/* 小さい英字ラベル（SECTION / INDEX 等） */
.label-en {
  font-family: var(--font-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-cap);
  text-transform: uppercase;
  color: var(--color-decor);   /* 装飾扱い。本文には使わない */
  line-height: 1;
}

/* 印刷時は左sticky・レール・固定CTAを畳んで1カラムで出す */
@media print {
  .rail, .cta-fixed, .chat-launcher, .site-header { display: none !important; }
  .chapter { display: block !important; }
  .chapter__panel { position: static !important; height: auto !important; }
}