/* ============================================================
   LAB の見た目（ポートフォリオと同じ世界観）
   ------------------------------------------------------------
   app.css のあとに読み込む。色の変数は app.css の :root（ダーク）と、
   ここのライト用の上書きの2か所。ポートフォリオ（portfolio-site/style.css）
   と入口ページ（hub/public/style.css）と同じ値なので、変えるときはそろえる。
   ============================================================ */

/* ---------- ライト ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#EEF1F4; --bar-bg:rgba(238,241,244,.82);
    --surface:#FFFFFF; --surface-2:#E9EEF6; --spec:#F0F0F4;
    --ink:#10233A; --ink-2:#44546A; --ink-3:#5B6B7C;
    --line:rgba(16,35,58,.10); --line-2:rgba(16,35,58,.22);
    --brand:#1F4FE0; --brand-d:#1A44C2; --brand-soft:#E2E9FD; --brand-wash:rgba(31,79,224,.14);
    --hero-grad:linear-gradient(110deg,#1F4FE0,#6D4BFF);
    --pink:#D6338A; --teal:#0E8BA0; --teal-soft:#DDF1F6; --pink-soft:#FCE4F0;
    --blue:#3B6EF6; --blue-soft:#E2ECFF; --amber:#E4930A; --amber-d:#A86400; --amber-soft:#FDF0D0; --gold:#E8B400;
    --ok:#1D9576; --ok-d:#15795F; --ok-bg:#E6F7F0; --ok-soft:#CDF0E2;
    --ng:#E5405E; --ng-d:#C02744; --ng-bg:#FDEFF2; --ng-soft:#FCDBE2;
    --sh-sm:0 0 0 1px rgba(16,35,58,.05),0 2px 10px rgba(16,35,58,.06);
    --sh:0 0 0 1px rgba(16,35,58,.06),0 12px 30px rgba(16,35,58,.12);
    --sh-lg:0 -10px 40px rgba(16,35,58,.12);
    --sh-grad:0 12px 30px -8px rgba(31,79,224,.45);
    --scrim:rgba(16,35,58,.42);
    --glow-1:rgba(31,79,224,.16); --glow-2:rgba(109,75,255,.12); --grain:.04;
    color-scheme:light;
  }
}
:root[data-theme="light"] {
  --bg:#EEF1F4; --bar-bg:rgba(238,241,244,.82);
  --surface:#FFFFFF; --surface-2:#E9EEF6; --spec:#F0F0F4;
  --ink:#10233A; --ink-2:#44546A; --ink-3:#5B6B7C;
  --line:rgba(16,35,58,.10); --line-2:rgba(16,35,58,.22);
  --brand:#1F4FE0; --brand-d:#1A44C2; --brand-soft:#E2E9FD; --brand-wash:rgba(31,79,224,.14);
  --hero-grad:linear-gradient(110deg,#1F4FE0,#6D4BFF);
  --pink:#D6338A; --teal:#0E8BA0; --teal-soft:#DDF1F6; --pink-soft:#FCE4F0;
  --blue:#3B6EF6; --blue-soft:#E2ECFF; --amber:#E4930A; --amber-d:#A86400; --amber-soft:#FDF0D0; --gold:#E8B400;
  --ok:#1D9576; --ok-d:#15795F; --ok-bg:#E6F7F0; --ok-soft:#CDF0E2;
  --ng:#E5405E; --ng-d:#C02744; --ng-bg:#FDEFF2; --ng-soft:#FCDBE2;
  --sh-sm:0 0 0 1px rgba(16,35,58,.05),0 2px 10px rgba(16,35,58,.06);
  --sh:0 0 0 1px rgba(16,35,58,.06),0 12px 30px rgba(16,35,58,.12);
  --sh-lg:0 -10px 40px rgba(16,35,58,.12);
  --sh-grad:0 12px 30px -8px rgba(31,79,224,.45);
  --scrim:rgba(16,35,58,.42);
  --glow-1:rgba(31,79,224,.16); --glow-2:rgba(109,75,255,.12); --grain:.04;
  color-scheme:light;
}

/* ---------- 下地: にじむ光と粒子 ----------
   光は body の後ろに固定で置く。解いている最中（body.is-focus）は消して、
   問題だけに目が行くようにする */
body{transition:background-color .4s var(--e2),color .4s var(--e2)}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 108% 112%, var(--glow-1), transparent 62%),
    radial-gradient(46vw 46vw at -8% 18%, var(--glow-2), transparent 64%),
    radial-gradient(34vw 34vw at 52% -16%, var(--glow-1), transparent 66%);
  transition:opacity .6s var(--e2);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body.is-focus::before{opacity:.35}

/* ---------- 文字 ----------
   Zen Kaku Gothic New は 700 の次が 900。見出しだけ 900 にして、
   小さな文字は 700 で止める（900 の小さい字はつぶれて読みにくい） */
body{font-weight:500;line-height:1.75}
.hero-h,.q-h,.gate-h,.log-h>b,.world-t b,.section-h,.lab-h{font-weight:900}
.hero-h{letter-spacing:-.02em;line-height:1.22}
.q-h{letter-spacing:-.015em;line-height:1.5}
/* 見出しと設問は、文節の途中や1文字だけで折り返さない */
.hero-h,.q-h,.gate-h,.v-h,.res-h{word-break:auto-phrase;text-wrap:balance}
.q-lead,.hero-p{word-break:auto-phrase;text-wrap:pretty}
.kbd,.pnum,.hudchip--time,.node-no,.side-row b,.dayrow>b,.dayrow>em,.crow-v,.wrow-v{font-family:var(--num)}

/* ---------- ボタン: ピル型 ---------- */
.btn{border-radius:999px}
.btn--grad{background:#1F4FE0;box-shadow:var(--sh-grad)}
.btn--grad:hover{filter:none;background:#2B5BEC;box-shadow:0 16px 40px -8px rgba(31,79,224,.7)}
.iconbtn,.burger,.side-x{border-radius:999px}
.kbd{border-radius:6px}

/* ---------- 標本面 ----------
   明暗どちらでも明るい面のまま。中の文字色もここで固定する */
.spec{color:var(--on-spec)}

/* ---------- サイドメニュー ---------- */
.side{background:color-mix(in srgb, var(--surface) 72%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.side-go{border-radius:18px}
.navi.is-on{box-shadow:inset 0 0 0 1px var(--brand-wash)}

/* 明るさの切り替え。メニューのいちばん下に置く */
.theme-btn .ic-sun,.theme-btn .ic-moon{display:none}
:root[data-theme="light"] .theme-btn .ic-moon{display:block}
:root[data-theme="dark"] .theme-btn .ic-sun{display:block}
:root:not([data-theme]) .theme-btn .ic-sun{display:block}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme-btn .ic-sun{display:none}
  :root:not([data-theme]) .theme-btn .ic-moon{display:block}
}

/* ---------- ロゴ ---------- */
.logo-mark,.side-logo,.gate-logo{color:var(--ink)}
/* 手書きのロゴは、はね上がる線のぶん文字が小さく見える。高さを多めに取る */
.logo-mark{height:38px}
.side-logo .logo-mark{height:42px}
.gate-logo{height:46px}
.bar .logo-mark{height:34px}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  body,body::before{transition:none}
}

/* ---------- 文章の折り返し（解説と結果） ---------- */
.exp-v,.res-h{font-weight:900;word-break:auto-phrase;text-wrap:balance}
.exp-v{letter-spacing:-.01em}

/* ---------- キーボードの案内は、キーボードのある端末だけ ----------
   スマホに「Enter」と出しても押せない。指で操作する端末では隠す */
@media (hover:none) and (pointer:coarse) {
  .kbd,.q .hint{display:none}
}

/* ---------- 狭い画面のヘッダ ----------
   375px 幅ではロゴと時間のチップがぶつかる。左右を中身の幅にして、
   時間は残りの幅の中央に置く */
@media (max-width:430px) {
  .bar-nav{grid-template-columns:auto 1fr auto;gap:8px}
  .bar-l{gap:4px}
  .bar .logo-mark{height:30px}
}

/* メニューの中のリンク（問題集の一覧へ）もボタンと同じ見た目にする */
a.navi{text-decoration:none}