/* ============================================================
   YOSSY式 トレーダー適性研究所 — base.css
   役割：デザイントークン／リセット／全ページ共通の土台
   読み込み順：base.css → layout.css → components.css → pages/*.css
   ============================================================ */

/* ---------------------------------------------
   1. Design Tokens
--------------------------------------------- */
:root {
  /* ---- Brand colors ---- */
  --color-bg: #0B0D12;
  --color-bg-deep: #06070A;
  --color-card: #10141C;
  --color-card-border: rgba(201, 170, 94, 0.22);
  --color-gold: #C9AA5E;
  --color-gold-bright: #F1E4B8;
  --color-gold-deep: #7A5E2C;
  --color-gold-soft: rgba(201, 170, 94, 0.5);
  --color-neon: #32C8FF;
  --color-neon-soft: rgba(50, 200, 255, 0.45);
  --color-text: #F5F5F5;
  --color-text-muted: #B8B8B8;
  --color-text-faint: rgba(184, 184, 184, 0.55);

  /* ---- Semantic status colors (question / result flows) ---- */
  --color-success: #6FCF97;
  --color-warning: #E0B45C;

  /* ---- Typography ---- */
  --font-en: 'Orbitron', sans-serif;
  --font-ja: 'Noto Sans JP', sans-serif;

  /* ---- Type scale ----
     場当たりな px 指定をやめ、この 9 段階だけを使う。
     「見出しは h1〜h4」「本文は body 系」「英字ラベルは label 系」と
     役割で選ぶことで、ページが増えても階層が崩れない。 */
  --fs-label-s: 10px;   /* 英字マイクロラベル（HUD表記など） */
  --fs-label: 11px;     /* 英字ラベル（eyebrow / バッジ） */
  --fs-caption: 12px;   /* 注釈・補足 */
  --fs-body-s: 13px;    /* 小さめ本文（カード内） */
  --fs-body: 15px;      /* 標準本文 */
  --fs-h4: clamp(15px, 2.0vw, 17px);
  --fs-h3: clamp(17px, 2.4vw, 20px);
  --fs-h2: clamp(22px, 3.6vw, 30px);
  /* 下限26px：和文12文字（「才能がないからじゃない。」等）が
     375px幅で1行に収まる最大サイズ */
  --fs-h1: clamp(26px, 5.4vw, 42px);
  --fs-display: clamp(30px, 6.2vw, 52px); /* Hero のキャッチのみ */

  /* ---- Letter spacing ---- */
  --tracking-en-wide: 0.3em;  /* 英字 eyebrow */
  --tracking-en: 0.16em;      /* 英字ラベル一般 */
  --tracking-ja: 0.05em;      /* 和文見出し */

  /* ---- Layout ---- */
  --max-width: 1180px;
  --max-width-narrow: 720px;
  --max-width-read: 620px; /* 読ませる文章の最大幅 */
  --gutter: 24px;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 28px;
  --radius-pill: 999px;

  /* ---- Spacing scale ----
     8px グリッド。4px / 12px は半ステップとして最小要素にのみ使う。 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Section rhythm（セクションの上下余白を1箇所で管理） ---- */
  --section-pad-y: clamp(80px, 10vw, 128px);

  /* ---- Elevation (shadow) scale ---- */
  --shadow-inset-hairline: 0 0 0 1px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 16px 30px -20px rgba(0, 0, 0, 0.7);
  --shadow-card-hover: 0 20px 40px -22px rgba(0, 0, 0, 0.75);
  --shadow-panel: 0 24px 48px -28px rgba(0, 0, 0, 0.8);

  /* ---- Glow scale ----
     設計方針：通常状態は「気配」だけ（-rest）。
     はっきりした発光（-sm / -md / -lg）はホバー・選択・解析中など、
     ユーザーの操作や進行に反応する瞬間にだけ使う。 */
  --glow-gold-rest: 0 0 18px -12px var(--color-gold-soft);
  --glow-neon-rest: 0 0 18px -12px var(--color-neon-soft);
  --glow-gold-sm: 0 0 14px -2px var(--color-gold-soft);
  --glow-gold-md: 0 0 22px -8px var(--color-gold-soft);
  --glow-neon-sm: 0 0 14px -2px var(--color-neon-soft);
  --glow-neon-md: 0 0 26px -10px var(--color-neon-soft);
  --glow-neon-lg: 0 0 40px -6px var(--color-neon-soft);

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-decor: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- Motion ---- */
  --ease-lab: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-instant: 0.15s;
  --dur-fast: 0.25s;
  --dur-mid: 0.6s;
  --dur-slow: 0.9s;
  --dur-reveal: 0.7s;
}

/* ---------------------------------------------
   2. Reset
--------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ja);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* hidden属性は必ず効かせる。
   .screen { display: flex } のようなクラス指定は、
   ブラウザ標準の [hidden] { display: none } より強いため、
   これがないと hidden を付けた要素が表示されたままになる。 */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Base ambient background: faint radial glow, no imagery required.
   Every page shares this so the "research lab" atmosphere never breaks. */
body {
  background-image:
    radial-gradient(60% 46% at 50% -6%, rgba(50, 200, 255, 0.10), transparent 60%),
    radial-gradient(46% 40% at 84% 18%, rgba(201, 170, 94, 0.07), transparent 60%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-deep) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible {
  outline: 1.5px solid var(--color-neon);
  outline-offset: 4px;
  border-radius: var(--radius-s);
}

/* ---------------------------------------------
   3. Utilities
--------------------------------------------- */

/* Screen-reader only text (kept for future form labels etc.) */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* 和文の折り返し
   日本語は単語の区切りが無いため、放っておくと行末に「す。」「力。」のような
   1〜2文字だけが取り残される。読ませたい文でこれが起きると、
   組版の粗さがそのまま体験の粗さとして伝わってしまう。

   ・u-wrap-balance … 各行の長さを揃える。見出しや短い文に使う
   ・u-wrap-pretty  … 最終行が極端に短くなるのを避ける。本文に使う
   どちらも非対応ブラウザでは単に無視される（従来どおりの折り返しになる）。 */
/* 文節のかたまり。この単位より内側では改行させない。
   日本語は幅指定だけだと「やり続け／られる」のように意味の途中で
   割れてしまうため、句読点のうしろだけを改行できる場所にする。
   付与するのは js/result.js の setPhrasedText()。
   画面と紙面の両方で使うので、ここ（base.css）に置いている。 */
.u-phrase {
  white-space: nowrap;
}

/* 器に収まらず、改行禁止を外したかたまり。
   通常の折り返しに戻すだけなので、指定は normal ひとつでよい。
   クラスを残しておくのは、画面幅が広がったときに
   もう一度 .u-phrase へ戻せるようにするため。 */
.u-phrase-off {
  white-space: normal;
}

.u-wrap-balance {
  text-wrap: balance;
  line-break: strict;
}

.u-wrap-pretty {
  text-wrap: pretty;
  line-break: strict;
}

/* 改行コントロール
   和文の見出しは、折り返し位置がひとつ違うだけで読みやすさが変わる。
   ・u-br-pc … 広い画面でだけ改行する
   ・u-br-sp … 狭い画面でだけ改行する
   どちらも <br class="…"> として使う。 */
.u-br-sp {
  display: none;
}

@media (max-width: 560px) {
  .u-br-pc {
    display: none;
  }
  .u-br-sp {
    display: inline;
  }
}

/* Scroll Reveal — pairs with js/scroll-reveal.js.
   Add [data-reveal] to any element; it fades up once when scrolled
   into view. Shared as-is across every page. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-lab), transform var(--dur-reveal) var(--ease-lab);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}