/* ============================================================
   LAB
   ------------------------------------------------------------
   最重要の設計ルール
   アプリのクロームと、出題する UI サンプル（.sui-* / .spec）は
   完全に分離する。アプリ側が鮮やかな色を使うと、サンプル UI の
   色の良し悪しを判断する邪魔になるため。
   ・アプリ = ラベンダー地 + バイオレットのグラデーション
   ・標本面 = 紫を一切入れないニュートラルグレー。中立配色の
     独立した UI キットで描画する
   ============================================================ */

/* ---------- 1. トークン ---------- */
:root{
  /* ポートフォリオ（portfolio-site/style.css）と同じ色と光。既定はダーク、OS がライトならライト。
     画面の切り替えボタンは data-theme で上書きする。
     ⚠ 標本面（--spec と .sui-*）は明暗どちらでも明るい中立色のまま。出題する UI の色の良し悪しを
       アプリの色が邪魔しないようにするため */
  --font:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --num:"Inter Tight","Zen Kaku Gothic New",sans-serif;
  --fw-b:700;               /* 小さな文字の強調。見出しは 900 を個別に指定 */

  --bg:#0A1020;
  --bar-bg:rgba(10,16,32,.78);
  --surface:#141D36;
  --surface-2:#1E2A4A;
  --spec:#ECEEF3;
  --on-spec:#12241f;

  --ink:#EAF0FF;
  --ink-2:#B6C1D9;
  --ink-3:#8E9BB5;          /* --surface 上で 5.6:1 */
  /* ⚠ -soft と -bg は不透明にする。判定ドックなど、下の内容に重なる面で使うため */

  --line:rgba(234,240,255,.10);
  --line-2:rgba(234,240,255,.22);

  --brand:#4F7BFF;          /* 線・アイコン・選択の枠 */
  --brand-d:#A9BEFF;        /* 文字用。--surface 上で 8.9:1 */
  --brand-soft:#1F2E5A;
  --brand-wash:rgba(79,123,255,.20);
  --grad:linear-gradient(135deg,#1F4FE0 0%,#6D4BFF 100%);
  --hero-grad:linear-gradient(110deg,#7FA2FF,#B39DFF);
  --pink:#F472B6;
  --teal:#43C6DA;
  --teal-soft:#1B364F;
  --pink-soft:#362A49;
  --blue:#8AA8FF;
  --blue-soft:#263254;
  --amber:#F5B83D;
  --amber-d:#F5C96A;        /* 文字用 */
  --amber-soft:#363437;
  --gold:#F5C400;           /* ロゴのドットと同じ黄 */

  --ok:#1FA37F;             /* 塗り用。白文字を載せる */
  --ok-d:#6BE0BB;           /* 文字用 */
  --ok-bg:#163242;
  --ok-soft:#174049;

  --ng:#E5405E;
  --ng-d:#FF93A6;
  --ng-bg:#352340;
  --ng-soft:#4A2640;

  /* 暗い面では影が見えないので、細い枠を影に足して面の境目を出す */
  --sh-sm:0 0 0 1px rgba(234,240,255,.08),0 2px 12px rgba(0,0,0,.22);
  --sh:0 0 0 1px rgba(234,240,255,.12),0 14px 34px rgba(0,0,0,.38);
  --sh-lg:0 -1px 0 rgba(234,240,255,.10),0 -14px 44px rgba(0,0,0,.45);
  --sh-grad:0 12px 32px -8px rgba(31,79,224,.6);
  --scrim:rgba(3,6,16,.62);
  --glow-1:rgba(31,79,224,.42);
  --glow-2:rgba(109,75,255,.32);
  --grain:.06;
  color-scheme:dark;

  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --wrap:1040px;
  --dock:100px;
  --side:274px;             /* サイドメニューの幅。1024px 未満ではドロワーになる */
  --e:cubic-bezier(.32,.72,0,1);      /* 画面の立ち上がり。減速が長い */
  --e2:cubic-bezier(.4,0,.2,1);       /* 短いUI遷移 */
  --spring:cubic-bezier(.34,1.4,.4,1);/* 出現に少し跳ねを付ける */
}

/* ---------- 2. リセット ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);
  font-size:16px;line-height:1.7;font-weight:500;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;
}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ⚠ .wrap と、それを併用する .home / .log / .res / .q / .foot は、
   どちらも padding のショートハンドを使わないこと。同じ要素に両方の
   クラスが付くので、ショートハンドを書いた側が相手の余白を 0 に潰す。
   両方向で実際に踏んでいる:
   ・.wrap 側がショートハンド → 上下が 0 になり、スマホでドックの下に
     コンテンツが潜り込んだ
   ・.home 側がショートハンド → 左右が 0 になり、621〜1024px の幅で
     文字が画面の端に貼り付いた（max-width が効く幅では気づけない）*/
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:22px;padding-right:22px}
b,strong{font-weight:var(--fw-b)}

/* ---------- 3. アイコン ----------
   すべて 24x24 のストロークアイコン。currentColor で色が乗る */
.ic{width:1em;height:1em;display:block;flex:0 0 auto}
.tile-ico{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-size:22px;flex:0 0 auto;
}
.i-brand{background:var(--brand-soft);color:var(--brand-d)}
.i-pink{background:var(--pink-soft);color:var(--pink)}
.i-blue{background:var(--blue-soft);color:var(--blue)}
.i-teal{background:var(--teal-soft);color:var(--teal)}
.i-amber{background:var(--amber-soft);color:var(--amber-d)}
.i-grad{background:var(--grad);color:#fff}

/* ---------- 4. ボタン・チップ ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r-md);font-size:15px;font-weight:var(--fw-b);
  text-decoration:none;color:inherit;cursor:pointer;
  background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm);
  transition:transform .3s var(--e),box-shadow .3s var(--e),
             filter .22s var(--e2),background-color .3s var(--e2);
}
.btn .ic{font-size:19px}
.btn:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.1s}
.btn--grad{background:var(--grad);color:#fff;box-shadow:var(--sh-grad)}
.btn--grad:hover{filter:brightness(1.07)}
.btn--ng{background:var(--ng);color:#fff;box-shadow:0 14px 34px -10px rgba(229,64,94,.5)}
.btn--ng:hover{filter:brightness(1.07)}
.btn--ok{background:var(--ok);color:#fff;box-shadow:0 14px 34px -10px rgba(29,149,118,.45)}
.btn--ok:hover{filter:brightness(1.07)}
.btn[disabled]{background:var(--surface-2);color:var(--ink-3);box-shadow:none;cursor:default;transform:none}
.btn[disabled] .kbd{opacity:.55}
.btn--lg{padding:18px 34px;font-size:16px;width:100%}
@media (min-width:560px){ .btn--lg{width:auto;min-width:230px} }
.kbd{font-size:11px;font-weight:var(--fw-b);padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.22);line-height:1.3}
.btn:not(.btn--grad):not(.btn--ng):not(.btn--ok) .kbd{background:var(--surface-2);color:var(--ink-3)}

.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:var(--fw-b);padding:7px 14px;border-radius:99px;background:var(--surface-2);color:var(--ink-2)}
.pill .ic{font-size:15px}
.pill--grad{background:var(--grad);color:#fff}
.pill--ok{background:var(--ok);color:#fff}
.pill--ng{background:var(--ng);color:#fff}
.pill--gold{background:var(--amber-soft);color:var(--amber-d)}

/* ---------- 5. バー ---------- */
.bar{position:sticky;top:0;z-index:30;background:var(--bar-bg);backdrop-filter:blur(14px)}
.bar-in{display:flex;align-items:center;gap:14px;min-height:70px}
/* 画面のヘッダ。3列にして、両端に何が入っていても中央が
   画面の中心に来るようにする（出題中のバーは .bar-in のまま）*/
.bar-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:70px}
.bar-l{display:flex;align-items:center;gap:12px;min-width:0}
.bar-c{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0}
.bar-r{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.logo{display:flex;align-items:center;flex:0 0 auto}
/* Figma から書き出した実ロゴ。単色なので fill=currentColor で色を差し替えられる */
.logo-mark{height:30px;width:auto;display:block;flex:0 0 auto;color:var(--brand)}
.logo:active{transform:scale(.95);transition:transform .1s var(--e2)}

.hudchip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border-radius:99px;padding:8px 15px;box-shadow:var(--sh-sm);font-size:14px;font-weight:var(--fw-b)}
.hudchip .ic{font-size:17px}
.hudchip--gold{color:var(--amber-d)}
.hudchip--gold .ic{color:var(--gold)}
.hudchip--brand{color:var(--brand-d)}
.hudchip--brand .ic{color:var(--brand-d)}
.hudchip--time{color:var(--ink-2);font-variant-numeric:tabular-nums}
.hudchip--time .ic{color:var(--ink-3)}
/* 計測中だけ点が脈打つ。止まっているのに動いて見えないようにする */
.hudchip--time.is-run{color:var(--ok-d)}
.hudchip--time.is-run .ic{color:var(--ok)}
.hudchip--time.is-run::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blink 1.6s var(--e2) infinite}
.hudchip--time.is-off::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--line-2)}
/* 同期の状態。色だけに頼らず点の見た目も変える */
.hudchip--sync::after{content:'';width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.hudchip--sync.is-ok{color:var(--ok-d)}
.hudchip--sync.is-ok .ic{color:var(--ok)}
.hudchip--sync.is-ok::after{background:var(--ok)}
.hudchip--sync.is-wait{color:var(--ink-2)}
.hudchip--sync.is-wait::after{background:var(--line-2);animation:blink 1.2s var(--e2) infinite}
.hudchip--sync.is-err{color:var(--ng-d)}
.hudchip--sync.is-err .ic{color:var(--ng)}
.hudchip--sync.is-err::after{background:var(--ng)}
.hudchip--sync.is-armed{background:var(--ng);color:#fff}
.hudchip--sync.is-armed .ic,.hudchip--sync.is-armed::after{color:#fff;background:#fff}
.hudchip--sync.is-armed .sync-name{display:inline}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- 5c. サイドメニュー ----------
   1024px 以上: 左に固定。1024px 未満: オフキャンバスのドロワー。
   position:fixed にしてあるので、本文側は body の padding-left で
   よけるだけでよく、画面ごとの DOM を組み替える必要がない。
   出題中は body.is-focus で丸ごと消す（誤操作で解答を失わせない）*/
.side{
  position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:60;
  display:flex;flex-direction:column;gap:15px;padding:19px 14px 16px;
  background:var(--surface);border-right:1px solid var(--line);
  overflow-y:auto;overscroll-behavior:contain;
}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 2px 8px}
.side-logo{display:flex;align-items:center;color:var(--brand)}
.side-logo .logo-mark{height:31px}
.side-logo:active{transform:scale(.97);transition:transform .1s var(--e2)}
/* ドロワーを閉じる。常設になる 1024px 以上では出さない */
.side-x{
  display:none;flex:0 0 auto;width:44px;height:44px;border-radius:14px;
  place-items:center;color:var(--ink-2);font-size:20px;
  transition:background-color .16s var(--e2),color .16s var(--e2),transform .16s var(--e2);
}
.side-x:hover{background:var(--surface-2);color:var(--ink)}
.side-x:active{transform:scale(.92);transition-duration:.1s}

.side-nav{display:grid;gap:3px}
.navi{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 11px;border-radius:14px;text-align:left;
  font-size:14.5px;font-weight:var(--fw-b);color:var(--ink-2);
  transition:background-color .16s var(--e2),color .16s var(--e2);
}
.navi .ic{flex:0 0 auto;font-size:20px;color:var(--ink-3);transition:color .16s var(--e2)}
.navi:hover{background:var(--surface-2);color:var(--ink)}
.navi:hover .ic{color:var(--ink-2)}
.navi.is-on{background:var(--brand-soft);color:var(--brand-d)}
.navi.is-on .ic{color:var(--brand-d)}
.navi-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 復習の件数。0 のときは出さない */
.navi-b{
  flex:0 0 auto;min-width:22px;height:22px;padding:0 6px;border-radius:99px;
  background:var(--ng);color:#fff;font-size:11.5px;font-weight:var(--fw-b);
  display:grid;place-items:center;font-variant-numeric:tabular-nums;
}

.side-sep{height:1px;background:var(--line);margin:1px 4px}
.side-k{font-size:10.5px;font-weight:var(--fw-b);letter-spacing:.14em;color:var(--ink-3);padding:0 11px 1px}

/* つづきから */
.side-go{
  display:block;padding:12px 14px;border-radius:16px;text-align:left;
  background:var(--grad);color:#fff;box-shadow:var(--sh-grad);
  transition:transform .3s var(--e),filter .22s var(--e2);
}
.side-go:hover{filter:brightness(1.07);transform:translateY(-2px)}
.side-go:active{transform:translateY(0) scale(.985);transition-duration:.1s}
.side-go b{display:block;font-size:14.5px;font-weight:var(--fw-b);line-height:1.4}
.side-go span{display:block;font-size:11px;font-weight:700;opacity:.87;margin-top:1px}
.side-go--calm{background:var(--surface-2);color:var(--ink-2);box-shadow:none}
.side-go--calm:hover{filter:none;background:var(--line)}

/* 数値のまとまり */
.side-stat{display:grid;gap:8px;padding:12px 14px;border-radius:16px;background:var(--surface-2)}
.side-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:var(--fw-b);color:var(--ink-2)}
.side-row .ic{flex:0 0 auto;font-size:17px;color:var(--ink-3)}
.side-row b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.side-row--run .ic{color:var(--ok)}
.side-row--run b{color:var(--ok-d)}
.side-mini{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.side-mini i{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .6s var(--e)}
.side-foot{margin-top:auto;display:grid;gap:8px}

/* ---------- 5d. 丸型プロフィールと開閉 ---------- */
.ava{
  flex:0 0 auto;position:relative;width:var(--s);height:var(--s);
  border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--brand-soft);color:var(--brand-d);
}
.ava .ic{font-size:calc(var(--s) * .56)}
.navi .ava .ic{color:var(--brand-d)}
.side-foot .hudchip{width:100%;justify-content:flex-start}
.ava b{font-size:calc(var(--s) * .42);font-weight:var(--fw-b);line-height:1}
/* 画像は下地の頭文字/人アイコンに重ねる。読み込みに失敗しても穴が空かない */
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.navi .ava{margin:-2px 0}

.ava-btn{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  transition:transform .16s var(--e2),box-shadow .16s var(--e2);
}
.ava-btn .ava{box-shadow:var(--sh-sm)}
.ava-btn:hover{transform:translateY(-1px)}
.ava-btn:hover .ava{box-shadow:var(--sh)}
.ava-btn:active{transform:scale(.94);transition-duration:.1s}
.ava-btn.is-on .ava{box-shadow:0 0 0 2.5px var(--brand)}

/* ---------- タップ領域の下限 ----------
   見た目は変えずに、当たり判定だけ 44px 以上にする。
   コース1で「タップ領域は 44px 以上」を出題しているので、
   アプリ自身がそれを破っていると教材として矛盾する。
   ::before は当たり判定専用。.hudchip の ::after（計測中の点や
   同期の状態）とはぶつからない */
.logo,.side-logo,button.hudchip{position:relative}
.logo::before,.side-logo::before,button.hudchip::before{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;min-width:44px;min-height:44px;
}

.burger{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  color:var(--ink-2);font-size:22px;
  transition:background-color .16s var(--e2),color .16s var(--e2),transform .16s var(--e2);
}
.burger:hover{background:var(--surface-2);color:var(--ink)}
.burger:active{transform:scale(.94);transition-duration:.1s}

/* 出題中はどの幅でもメニューを消す。translateX で外に出すだけだと
   見えないのに Tab で到達できてしまうため、display で落とす */
body.is-focus .side{display:none}

/* ドロワーの覆い。hidden 属性ではなく不透明度で消す（消えるときも動かすため）*/
.scrim{
  position:fixed;inset:0;z-index:55;background:var(--scrim);
  opacity:0;pointer-events:none;transition:opacity .3s var(--e2);
}
.scrim.is-on{opacity:1;pointer-events:auto}

/* ---------- 5e. ログインの入口 ----------
   最初に見る画面なので、ここだけ少し密度を上げている。
   ⚠ 子孫セレクタ（.gate-list span など）は使わない。中に <b> や
   アイコンが入ると巻き込んで潰れる。必ずクラスで指す。 */
/* ログイン画面はヘッダの帯を出さない。空の帯が上に乗って見える */
body.is-gate .bar{display:none}

.gate{
  position:relative;display:grid;place-items:center;
  padding:40px 18px 56px;              /* .wrap を使わないので左右は自前で持つ */
  min-height:100dvh;
}
/* 背景に敷くやわらかい光。カードの中に入れると背景に隠れてしまうので、
   ページ側に置いてカードの後ろから覗かせる */
.gate::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 380px at 50% 8%, var(--brand-wash), transparent 70%),
    radial-gradient(420px 300px at 88% 96%, var(--glow-2), transparent 70%);
}
.gate-card{
  position:relative;
  width:100%;max-width:452px;background:var(--surface);
  border-radius:var(--r-xl);
  box-shadow:var(--sh);
  padding:40px 32px 30px;text-align:center;
  animation:enter .55s var(--e) backwards;
}
/* ロゴは裸で置く。後ろにタイルや光を敷かない */
.gate-logo{height:34px;margin:0 auto 22px;color:var(--brand)}
.gate-h{font-size:clamp(22px,3.6vw,26px);font-weight:var(--fw-b);letter-spacing:-.035em;line-height:1.35}
.gate-lead{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--ink-3)}

/* 利点。枠で囲ってひとかたまりに見せる */
.gate-list{
  list-style:none;margin:26px 0 24px;padding:16px;display:grid;gap:2px;
  text-align:left;background:var(--surface-2);border-radius:var(--r-md);
}
.gate-row{display:flex;gap:12px;align-items:center;padding:9px 4px}
.gate-row + .gate-row{border-top:1px solid var(--line)}
.gate-ic{
  flex:0 0 auto;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  font-size:18px;background:var(--surface);color:var(--brand-d);box-shadow:var(--sh-sm);
}
.gate-tx{min-width:0}
/* text-wrap:pretty は最終行に1文字だけ残るのを避けてくれる。
   対応していないブラウザでも、文言自体を短くしてあるので崩れない */
.gate-tx b{display:block;font-size:13.5px;font-weight:var(--fw-b);line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}
.gate-tx i{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--ink-3);line-height:1.55;margin-top:1px;text-wrap:pretty}

.gate-cta{width:100%;justify-content:center}
.gate-sub{margin-top:12px;font-size:11.5px;font-weight:600;color:var(--ink-3)}

/* 引き継ぎの案内。flex の直下にテキストを裸で置くと
   <b> が独立した子になって変な位置で折れるので、必ず1つに包む */
.gate-note{
  display:flex;gap:9px;align-items:flex-start;
  margin-top:20px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--ok-bg);text-align:left;
}
.gate-note .ic{flex:0 0 auto;font-size:16px;color:var(--ok-d);margin-top:2px}
.gate-note>span{font-size:12.5px;font-weight:600;color:var(--ok-d);line-height:1.65;text-wrap:pretty}
.gate-note>span b{font-weight:var(--fw-b)}
.gate-err{
  display:flex;gap:9px;align-items:flex-start;margin:20px 0 0;padding:12px 14px;
  border-radius:var(--r-sm);background:var(--ng-bg);text-align:left;
}
.gate-err .ic{flex:0 0 auto;font-size:17px;color:var(--ng);margin-top:1px}
.gate-err>span{font-size:12.5px;font-weight:700;color:var(--ng-d);line-height:1.65}

/* ---------- 5b. 学習記録 ---------- */
.log{padding-top:22px;padding-bottom:90px}
.log-h{display:flex;align-items:center;gap:14px;margin-bottom:20px}
/* 直下の b だけ。丸型アバターの中の頭文字（.ava b）を巻き込まないため */
.log-h>b{font-size:clamp(24px,3.4vw,32px);font-weight:var(--fw-b);letter-spacing:-.03em}
.goal>span{font-size:12.5px;font-weight:var(--fw-b);color:var(--ink-3);margin-right:4px}

/* 日別の棒グラフ */
.chart-top{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}
.dbars{position:relative;display:flex;align-items:flex-end;gap:3px;height:124px}
.dbar{flex:1 1 0;min-width:5px;height:100%;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:5px;overflow:hidden}
.dbar>i{display:block;width:100%;border-radius:5px;background:var(--grad);min-height:3px;animation:rise .8s var(--e) both}
.dbar.is-today{outline:2.5px solid var(--brand);outline-offset:2px}
@keyframes rise{from{height:0}}
/* 目標ペースの目安線。棒の上に薄く重ねる */
.dax{display:flex;gap:3px;margin-top:9px}
.dax>span{flex:1 1 0;min-width:5px;font-size:9.5px;font-weight:700;color:var(--ink-3);text-align:center}

/* 日別の一覧 */
.days{display:grid;gap:2px;margin-top:6px}
.dayrow{display:grid;grid-template-columns:96px 1fr auto auto;gap:14px;align-items:center;padding:13px 4px;font-size:14px}
.dayrow+.dayrow{border-top:1px solid var(--line)}
.dayrow>b{font-weight:var(--fw-b);font-variant-numeric:tabular-nums}
.dayrow>span{font-size:12.5px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.dayrow>em{font-style:normal;font-weight:var(--fw-b);font-variant-numeric:tabular-nums;min-width:84px;text-align:right}
.dayrow>i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink-3);min-width:44px;text-align:right}

/* コース別の一覧 */
/* コース別の到達状況。広い幅は1行、狭い幅は2行に折る。
   1行のままだとコース名の列が潰れて1文字ずつ改行される */
.crow{
  display:grid;grid-template-columns:38px 1fr auto;gap:14px;
  grid-template-areas:"ico name meta";align-items:center;padding:13px 4px;
}
.crow+.crow{border-top:1px solid var(--line)}
.crow>.tile-ico{grid-area:ico;width:38px;height:38px;border-radius:12px;font-size:18px}
.crow-n{grid-area:name;min-width:0}
.crow-n b{display:block;font-size:14.5px;font-weight:var(--fw-b);line-height:1.4}
.crow-n span{display:block;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.crow-m{grid-area:meta;display:flex;align-items:center;gap:14px}
.crow-v{font-size:13px;font-weight:var(--fw-b);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.crow-r{font-size:12px;font-weight:var(--fw-b);min-width:56px;text-align:right;color:var(--ink-3)}
.crow-r.has{color:var(--ng-d)}

/* アカウントの状態 */
.acct{display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:18px 22px;margin-top:16px}
/* 保存先の欄と今月のカードは、続けて置くとき1つの塊に見せる。
   別々に浮いていると「別の情報」として読まれてしまう */
.acct + .card-grad{border-radius:0 0 var(--r-xl) var(--r-xl)}
.log .acct{border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:none;position:relative;z-index:1}
.acct-b{flex:1;min-width:180px}
.acct-b b{display:block;font-size:14.5px;font-weight:var(--fw-b)}
.acct-b span{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-top:2px}

.tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.report{
  margin-top:16px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:20px 22px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  line-height:1.9;white-space:pre-wrap;word-break:break-all;color:var(--ink-2);
  max-height:300px;overflow:auto;user-select:all;
}
.empty-note{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:28px;text-align:center;color:var(--ink-2);font-size:14.5px;margin-top:16px}

/* 44px はコース1で出題している下限。アプリ自身が割らないようにする */
.iconbtn{
  flex:0 0 auto;height:44px;min-width:44px;padding:0 13px;border-radius:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--surface);color:var(--ink-2);font-size:18px;font-weight:var(--fw-b);
  box-shadow:var(--sh-sm);transition:.14s var(--e);
}
.iconbtn>span{font-size:12px}
.iconbtn:hover{color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh)}
.iconbtn:active{transform:translateY(0) scale(.96);transition-duration:.1s}
.iconbtn.is-armed{background:var(--ng);color:#fff}
.pbar{flex:1;height:14px;border-radius:99px;background:var(--line-2);overflow:hidden;min-width:50px}
.pbar>i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);transition:width .62s var(--e)}
.pnum{font-size:14.5px;font-weight:var(--fw-b);color:var(--ink-3);white-space:nowrap}
.pnum b{color:var(--ink)}

/* ---------- 6. ロードマップ（ホーム） ---------- */
.home{padding-top:14px;padding-bottom:90px}

.hero{display:grid;grid-template-columns:1.06fr .94fr;gap:34px;align-items:center;margin-bottom:26px}
.hero-h{font-size:clamp(32px,4.8vw,50px);font-weight:var(--fw-b);line-height:1.18;letter-spacing:-.04em;margin:18px 0 0}
.hero-h i{font-style:normal;background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-p{margin:18px 0 0;font-size:16px;color:var(--ink-2);max-width:24em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}

/* ヒーローの右。以前ここには飾りの枠を置いていたが、飾りより
   「いま自分がどこまで来たか」を出したほうが入口として役に立つ */
/* リングとチップで1つの塊にして、カードの中で中央に置く。
   右の列を 1fr にすると、チップの右に使われない余白が残って中途半端に見える */
.hero-stat{display:grid;grid-template-columns:auto auto;justify-content:center;gap:26px;align-items:center;
  background:var(--surface);border-radius:var(--r-xl);padding:26px 28px;box-shadow:var(--sh-sm)}
.hero-stat-r{display:grid;gap:11px;justify-items:start;min-width:0}

/* 進捗のまとめ。リングはヒーローへ移したので、ここは横幅を全部
   棒グラフに使える。ワールド名も省略されにくくなる */
.dash{display:grid;gap:16px;background:var(--surface);border-radius:var(--r-xl);padding:24px 28px;box-shadow:var(--sh-sm);margin-bottom:30px}
/* 見出しは .chart-h を借りる。あちらは自前で下余白を持つので、
   grid の gap と二重にならないようここでは消す */
.dash>.chart-h{margin-bottom:0}
/* ワールドは4つ。横幅が広いときに1列で並べると棒が 700px 超まで伸びて、
   ほぼ空のトラックを眺めることになる。入る幅があれば2列に折る。
   ⚠ minmax の下限をそのまま 340px と書くと、幅の足りない画面で列が
   340px に固定されてカードの右 padding を食い破る。min() で頭を押さえる */
.worlds{display:grid;gap:12px 36px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.wrow{display:grid;grid-template-columns:minmax(104px,168px) 1fr auto;gap:16px;align-items:center;font-size:13px;font-weight:700}
.wrow-n{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wbar{height:9px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.wbar>i{display:block;height:100%;border-radius:99px;transition:width .8s var(--e)}
.wrow-v{font-size:12.5px;font-weight:var(--fw-b);color:var(--ink-3);white-space:nowrap}
.dash-cta{justify-self:start;padding:12px 20px;font-size:14px}
.dash-cta .ic:last-child{font-size:16px;color:var(--ink-3)}
.hudchip--time .ic:last-child{font-size:14px;color:var(--ink-3)}

/* ワールド見出し */
.world{margin-top:12px}
.world-h{display:flex;align-items:center;gap:14px;padding:20px 22px;border-radius:var(--r-lg);color:#fff;box-shadow:var(--sh)}
.world-h .tile-ico{background:rgba(255,255,255,.22);color:#fff}
/* ⚠ ここを `.world-h span` と書くと、アイコンの器（.tile-ico も span）を
   巻き込んで font-size・display:grid・opacity を全部潰してしまう。
   実際それでアイコンが 44px の器の中に 13px で左上に寄っていた。
   文字の塊にクラスを付けて、そこだけを指す。 */
.world-t b{display:block;font-size:18px;font-weight:var(--fw-b);letter-spacing:-.02em;line-height:1.3}
.world-t span{display:block;font-size:12.5px;font-weight:700;opacity:.85}
.world-h em{margin-left:auto;font-style:normal;font-size:13px;font-weight:var(--fw-b);background:rgba(255,255,255,.2);border-radius:99px;padding:6px 13px;white-space:nowrap}
.w-1{background:linear-gradient(135deg,#1F4FE0,#4F7BFF)}
.w-2{background:linear-gradient(135deg,#0E7F9B,#2FA8C9)}
.w-3{background:linear-gradient(135deg,#5B3FE0,#8B6CFF)}
.w-4{background:linear-gradient(135deg,#B8329E,#7A3FE0)}

/* マリオのコースのような一本道 */
.path{position:relative;padding:34px 0 10px}
.path::before{
  content:'';position:absolute;left:50%;top:0;bottom:24px;width:5px;margin-left:-2.5px;
  background:repeating-linear-gradient(var(--line-2) 0 9px,transparent 9px 20px);border-radius:3px;
}
.node{position:relative;display:flex;justify-content:center;margin-bottom:26px}
.node-in{display:grid;justify-items:center;gap:9px;transform:translateX(var(--x,0))}
.node-btn{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  font-size:33px;color:#fff;background:var(--grad);
  box-shadow:0 10px 26px -8px rgba(31,79,224,.7),inset 0 -4px 0 rgba(0,0,0,.18);
  transition:transform .32s var(--spring),box-shadow .3s var(--e);
}
.node-btn:hover{transform:translateY(-4px) scale(1.05)}
.node-btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.node--done .node-btn{background:linear-gradient(135deg,#167A60,#22A283);box-shadow:0 10px 24px -8px rgba(23,127,101,.55),inset 0 -4px 0 rgba(0,0,0,.14)}
.node--now .node-btn{animation:beat 2.6s var(--e2) infinite}
.node--now::after{
  content:'';position:absolute;top:-6px;left:50%;width:90px;height:90px;margin-left:-45px;
  border-radius:50%;border:3px solid var(--brand);opacity:.5;
  transform:translateX(var(--x,0));animation:halo 2.6s var(--e2) infinite;pointer-events:none;
}
@keyframes beat{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@keyframes halo{0%{transform:translateX(var(--x,0)) scale(.9);opacity:.55}70%,100%{transform:translateX(var(--x,0)) scale(1.25);opacity:0}}
.node--lock .node-btn{background:var(--line-2);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.06);cursor:default}
.node--lock .node-btn:hover{transform:none}
.node--soon .node-btn{background:repeating-linear-gradient(45deg,var(--surface-2) 0 8px,var(--line) 8px 16px);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.05);cursor:default}
.node--soon .node-btn:hover{transform:none}
.node-name{font-size:13.5px;font-weight:var(--fw-b);text-align:center;max-width:11em;line-height:1.45}
.node--lock .node-name,.node--soon .node-name{color:var(--ink-3)}
.node-no{font-size:10.5px;font-weight:var(--fw-b);letter-spacing:.1em;color:var(--ink-3)}
.node-tag{font-size:10.5px;font-weight:var(--fw-b);letter-spacing:.06em;color:var(--ink-3);background:var(--surface);border-radius:99px;padding:3px 10px;box-shadow:var(--sh-sm)}

/* スター */
.stars{display:flex;gap:3px;color:var(--line-2);font-size:16px}
.stars .on{color:var(--gold)}
.stars--lg{font-size:34px;gap:8px}
.stars--lg .on{animation:starPop .5s var(--spring) both}
.stars--lg .on:nth-child(2){animation-delay:.12s}
.stars--lg .on:nth-child(3){animation-delay:.24s}
@keyframes starPop{0%{opacity:0;transform:scale(.3) rotate(-30deg)}100%{opacity:1;transform:none}}

/* ---------- 7. 出題 ---------- */
/* 下端の余白はドックの実測値（--dock-h）から取る。--dock は
   まだ測れていない一瞬のための保険 */
.q{padding-top:26px;padding-bottom:calc(var(--dock-h, var(--dock)) + 40px)}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.q-h{font-size:clamp(22px,3.1vw,31px);font-weight:var(--fw-b);line-height:1.45;letter-spacing:-.03em;margin:16px 0 0;max-width:26em}
.q-lead{margin:12px 0 0;font-size:14.5px;color:var(--ink-2);max-width:38em}
.stage{margin:24px 0 0}
.cap{font-size:11.5px;font-weight:var(--fw-b);letter-spacing:.1em;color:var(--ink-3);margin-bottom:10px}

/* 標本面 */
.spec{
  background:var(--spec);border-radius:var(--r-md);padding:26px;
  display:flex;align-items:flex-start;justify-content:center;gap:22px;flex-wrap:wrap;
}

/* 選択肢 */
.opts{margin:24px 0 0}
.opts--cmp{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.opts--txt{display:grid;gap:12px;max-width:44em}
.opt,.opt-t{
  position:relative;text-align:left;background:var(--surface);
  border:2px solid transparent;border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform .34s var(--e),box-shadow .34s var(--e),
             border-color .3s var(--e2),background-color .3s var(--e2);
}
.opt{display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.opt-t{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;padding:18px 20px}
.opt:not([disabled]):hover,.opt-t:not([disabled]):hover{transform:translateY(-4px);box-shadow:var(--sh)}
.opt:not([disabled]):active,.opt-t:not([disabled]):active{transform:translateY(-1px) scale(.994);transition-duration:.1s}

/* min-height は「2行のキャプション + 判定タグ」が収まる高さ。
   確定時にタグが増えてもヘッダの高さが変わらないので、
   カード間で標本の縦位置がずれない */
.opt-head{display:flex;align-items:flex-start;gap:12px;padding:17px 18px 14px;min-height:78px}
.opt-body{display:flex;padding:0 18px 18px}
/* 比較する標本は上端を揃える。中央寄せにすると案ごとに
   要素の縦位置がずれ、行単位で見比べられなくなる */
.opt-body .spec{flex:1;padding:18px;border-radius:var(--r-sm);align-items:flex-start}
.opt-cap{font-size:13.5px;font-weight:700;line-height:1.6;color:var(--ink-2);flex:1;min-width:104px}
.opt-t>span:last-child{font-size:15.5px;font-weight:700;line-height:1.7}

.key{
  flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--brand-d);font-size:14px;font-weight:var(--fw-b);
  transition:background .3s var(--e2),color .3s var(--e2),transform .34s var(--spring);
}
.opt.is-sel,.opt-t.is-sel{border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-wash),var(--sh)}
.opt.is-sel .key,.opt-t.is-sel .key{background:var(--grad);color:#fff;transform:scale(1.08)}
.opt.is-ok,.opt-t.is-ok{border-color:var(--ok);background:var(--ok-bg);box-shadow:var(--sh)}
.opt.is-ok .key,.opt-t.is-ok .key{background:var(--ok);color:#fff;animation:pop .36s var(--spring)}
.opt.is-ng,.opt-t.is-ng{border-color:var(--ng);background:var(--ng-bg);box-shadow:var(--sh)}
.opt.is-ng .key,.opt-t.is-ng .key{background:var(--ng);color:#fff}
.opt[disabled]:not(.is-ok):not(.is-ng),.opt-t[disabled]:not(.is-ok):not(.is-ng){opacity:.4;box-shadow:none}
@keyframes pop{0%{transform:scale(.5)}100%{transform:scale(1)}}

.tag{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:11px;font-weight:var(--fw-b);padding:6px 11px;border-radius:99px;color:#fff}
.tag .ic{font-size:13px}
.tag--ok{background:var(--ok)}
.tag--ng{background:var(--ng)}
.opt-t .tag{grid-column:2;justify-self:start;margin-top:11px}

.hint{margin:18px 0 0;font-size:13px;font-weight:600;color:var(--ink-3)}
.hint b{display:inline-block;font-size:11.5px;font-weight:var(--fw-b);padding:3px 8px;border-radius:8px;background:var(--surface);color:var(--brand-d);box-shadow:var(--sh-sm);margin:0 2px}

/* ---------- 8. 判定ドック ----------
   ドックの要素自体は出題中ずっと残し、中身と色だけを差し替える。
   確定のたびにバーごとスライドさせると、いったん消えてから
   出てくるので動きが途切れて見える */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sh-lg);
  padding-bottom:env(safe-area-inset-bottom);
  transition:background-color .45s var(--e);
}
.dock--ok{background:var(--ok-bg)}
.dock--ng{background:var(--ng-bg)}
.dock--mount{animation:up .5s var(--e) both}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.dock-in{width:100%;max-width:var(--wrap);margin:0 auto;padding:18px 22px;display:flex;align-items:center;gap:20px;min-height:var(--dock)}
.dock-msg{display:flex;align-items:center;gap:14px;flex:1;min-width:0;animation:msgIn .5s var(--spring) both}
@keyframes msgIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.dock-ico{flex:0 0 46px;width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:25px;color:#fff}
.dock--ok .dock-ico{background:var(--ok)}
.dock--ng .dock-ico{background:var(--ng)}
.dock-b b{display:block;font-size:18px;font-weight:var(--fw-b);letter-spacing:-.02em;line-height:1.4}
.dock--ok .dock-b b{color:var(--ok-d)}
.dock--ng .dock-b b{color:var(--ng-d)}
.dock-b p{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.dock-act{flex:0 0 auto;margin-left:auto}
.dock-act>.btn{animation:fadeIn .34s var(--e2) both}

/* ---------- 9. 解説 ----------
   scroll-margin-top は sticky なバーの高さ分。これがないと
   解説へスクロールしたときに見出しがバーの下に隠れる */
.exp{margin:26px 0 0;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh);overflow:hidden;scroll-margin-top:88px}
.exp[tabindex]:focus{outline:none}
.exp-top{padding:28px 30px;background:var(--surface-2)}
.exp-top--ok{background:var(--ok-bg)}
.exp-top--ng{background:var(--ng-bg)}
.exp-v{font-size:clamp(19px,2.5vw,26px);font-weight:var(--fw-b);line-height:1.5;letter-spacing:-.03em;margin:14px 0 0;max-width:24em}
.sec{padding:26px 30px}
.sec+.sec{border-top:1px solid var(--line)}
.sec-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sec-h .tile-ico{width:36px;height:36px;border-radius:12px;font-size:19px}
.sec-h b{font-size:14px;font-weight:var(--fw-b);letter-spacing:-.01em}

.bul{display:grid;gap:12px}
.bul li{position:relative;padding-left:24px;font-size:15px;line-height:1.85;color:var(--ink-2);max-width:42em}
.bul li::before{content:'';position:absolute;left:1px;top:.66em;width:8px;height:8px;border-radius:3px;background:var(--line-2)}
.bul strong{color:var(--ink)}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;font-weight:600;
  background:var(--brand-soft);color:var(--brand-d);border-radius:7px;padding:2px 7px;
}
.tbl{display:grid;gap:9px}
.tbl-r{display:grid;grid-template-columns:minmax(130px,190px) 1fr;gap:18px;align-items:baseline;background:var(--surface-2);border-radius:var(--r-md);padding:14px 18px}
.tbl-r>b{font-size:14px;font-weight:var(--fw-b)}
.tbl-r>span{font-size:14px;color:var(--ink-2);line-height:1.7}
.refs{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.ref{font-size:12px;font-weight:700;border-radius:99px;padding:6px 13px;background:var(--surface-2);color:var(--ink-3)}
.notes{display:grid;gap:10px}
.note{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;background:var(--surface-2);border-radius:var(--r-md);padding:15px 17px}
.note-k{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:var(--fw-b);background:var(--line-2);color:var(--ink-2)}
.note-k.t-good{background:var(--ok);color:#fff}
.note-k.t-bad{background:var(--ng);color:#fff}
.note-k.t-mid{background:var(--amber-soft);color:var(--amber-d)}
.note-b{font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.note-b strong{color:var(--ink)}
.demo{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.gray .spec{filter:grayscale(1)}

/* ---------- 9b. 赤ペン添削 ---------- */
.rp{display:grid;gap:14px}
/* 番号バッジは要素の外（上-13px 左-13px ＋ 3.5px のリング）に出るので、
   標本の周りに 17px 以上の余白が要る。子セレクタで詳細度を上げているのは、
   .spec と併用していて、あとに出てくる .spec の padding ショートハンドに
   負けてしまうため（実際それでスマホのとき 18px に潰れていた）*/
.rp>.rp-spec{padding:34px 30px}
/* 番号バッジは position:absolute なので、flex / grid の親に足しても
   レイアウトに参加せず、標本の見た目を崩さない */
.rp-spec .mk{position:relative;outline:2.5px solid var(--ng);outline-offset:4px;border-radius:6px}
/* overflow:visible は .sui-input だけに当てる。.sui-fade など
   overflow:hidden が意味を持つ要素に当てると折りたたみが壊れる */
.rp-spec .mk.sui-input{overflow:visible}
/* 標本の地の色でリングを描く。マークが縦に並んだとき、
   バッジが隣の赤枠に重なって読みにくくなるのを防ぐ */
.rp-spec .mk-n{
  position:absolute;top:-13px;left:-13px;width:25px;height:25px;border-radius:50%;
  background:var(--ng);color:#fff;font-family:var(--num);
  font-size:12.5px;font-weight:var(--fw-b);line-height:1;display:grid;place-items:center;
  box-shadow:0 0 0 3.5px var(--spec),0 3px 9px rgba(229,64,94,.4);
  animation:mkIn .42s var(--spring) both;
}
/* 端末フレームなど overflow:hidden の内側にある要素は、外側に
   バッジを出すと切られるので内側に置く（pos:'in'） */
.rp-spec .mk-n--in{top:5px;left:5px}
@keyframes mkIn{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.rp-list{display:grid;gap:9px;counter-reset:rp}
.rp-list li{
  display:grid;grid-template-columns:25px 1fr;gap:13px;align-items:start;
  background:var(--ng-bg);border-radius:var(--r-md);padding:13px 16px;
  font-size:14.5px;line-height:1.75;color:var(--ng-d);font-weight:600;
}
.rp-list li::before{
  counter-increment:rp;content:counter(rp);
  width:25px;height:25px;border-radius:50%;background:var(--ng);color:#fff;
  font-size:12.5px;font-weight:var(--fw-b);display:grid;place-items:center;margin-top:1px;
}

/* ---------- 10. コース結果 ---------- */
.res{padding-top:22px;padding-bottom:90px}
.card-grad{position:relative;background:var(--grad);border-radius:var(--r-xl);padding:34px;color:#fff;box-shadow:var(--sh-grad);overflow:hidden}
.card-grad::after{content:'';position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.11)}
.card-grad--ok{background:linear-gradient(135deg,#12876b,#3cc9a4);box-shadow:0 14px 34px -10px rgba(18,135,107,.5)}
.res-top{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;position:relative}
.res-h{font-size:clamp(28px,4.6vw,42px);font-weight:var(--fw-b);letter-spacing:-.035em;line-height:1.15}
/* リングを添えない単体の数字。目標をやめたので、時間そのものを主役にする */
.res-h--solo{
  position:relative;margin-top:10px;
  font-size:clamp(40px,8vw,60px);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
/* .ic は display:block なので、文中に置くと改行される。
   アイコンを含む行は必ず flex にする */
.res-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:var(--fw-b);letter-spacing:.14em;opacity:.85}
.res-k .ic{font-size:16px}
.res-msg{margin-top:14px;font-size:15px;font-weight:600;max-width:32em;opacity:.94}
/* flex にしておく。ブロックのままだと、狭い幅で効かせている
   justify-content:center が無視されて星が左に寄る */
.res-stars{display:flex;margin-top:18px}

/* リングチャート */
/* ⚠ 寸法は ring() が style 属性で書く。狭い画面で縮めたくなっても、
   CSS からは（カスタムプロパティ経由でも）上書きできない。インラインの
   style は custom property でも勝つ。縮めるなら ring() 側の引数を変える */
.ring{position:relative;width:150px;height:150px;flex:0 0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-linecap:round}
.ring .trk{stroke:rgba(255,255,255,.24)}
.ring .val{stroke:#fff;transition:stroke-dashoffset 1.1s var(--e)}
.ring--zero .val{visibility:hidden}
/* 白いカードの上に置くリング。既定の色は緑のグラデーションカード用の
   白なので、ここで差し替えないと白背景に白線で完全に見えなくなる。
   弧は --brand（塗り用の明るい緑）では白背景で 2.5:1 しかなく、
   図形に必要な 3:1（WCAG 1.4.11）を割る。文字用の暗い派生を使う */
.ring--v .trk{stroke:var(--line)}
.ring--v .val{stroke:var(--brand-d)}
.ring-c{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;padding:0 14px}
.ring-c b{display:block;font-size:35px;font-weight:var(--fw-b);letter-spacing:-.045em;line-height:1;white-space:nowrap}
.ring-c span{display:block;font-size:11.5px;font-weight:var(--fw-b);opacity:.78;margin-top:4px;letter-spacing:.04em}

/* 一問ずつの結果 */
.dots{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dot{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:rgba(255,255,255,.3);color:#fff}
.dot--ng{background:rgba(0,0,0,.26)}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:16px 0 0}
.tile{background:var(--surface);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);display:flex;align-items:center;gap:14px}
.tile .tile-ico{width:42px;height:42px;border-radius:13px;font-size:20px}
.tile dt{font-size:11.5px;font-weight:var(--fw-b);letter-spacing:.06em;color:var(--ink-3)}
.tile dd{margin:3px 0 0;font-size:23px;font-weight:var(--fw-b);letter-spacing:-.03em;line-height:1.15}
.tile dd small{font-size:12.5px;font-weight:700;color:var(--ink-3);margin-left:3px}
/* 「8時間33分」のような長い値は折り返させない */
.tile dd.dd-dur{font-size:18px;letter-spacing:-.02em;white-space:nowrap}

/* 正答率の棒グラフ */
.chart{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);margin:16px 0 0;padding:22px 24px}
.chart-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.chart-h .tile-ico{width:36px;height:36px;border-radius:12px;font-size:18px}
.chart-h b{font-size:14px;font-weight:var(--fw-b)}
/* .worlds と同じ考え方。広いときに1列だと 900px の棒で 100% を示すことになる */
/* ?check=1 の点検画面。開発用なので最小限にとどめる */
.chk-sum{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.chk-row{display:grid;grid-template-columns:62px 152px 1fr;gap:12px;align-items:start}
.chk-row code{font-size:12.5px;color:var(--ink-2);word-break:break-all}
@media (max-width:620px){ .chk-row{grid-template-columns:1fr;gap:4px} }

.bars{display:grid;gap:14px 36px;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.brow{display:grid;grid-template-columns:minmax(88px,124px) minmax(0,1fr) auto;gap:14px;align-items:center}
.brow-n{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.btrack{height:12px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.btrack>i{display:block;height:100%;border-radius:99px;background:var(--grad);width:0;animation:grow 1s var(--e) both}
.brow-v{font-size:13px;font-weight:var(--fw-b);min-width:44px;text-align:right;color:var(--ink-2)}
@keyframes grow{from{width:0}}

.sheet{margin:38px 0 0}
.sh-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sh-h b{font-size:15px;font-weight:var(--fw-b)}
.sh-h .tile-ico{width:36px;height:36px;border-radius:12px;font-size:18px}
.row{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-sm);margin-top:10px;overflow:hidden}
.row>summary{display:grid;grid-template-columns:32px 1fr auto;gap:15px;align-items:start;padding:18px 20px;cursor:pointer;list-style:none}
.row>summary::-webkit-details-marker{display:none}
.row>summary:hover{background:var(--surface-2)}
.row-j{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:17px;color:#fff}
.row-j.t-ok{background:var(--ok)}
.row-j.t-ng{background:var(--ng)}
.row-b b{display:block;font-size:15px;font-weight:var(--fw-b);line-height:1.55}
.row-b span{display:block;margin-top:6px;font-size:14px;font-weight:600;line-height:1.7;color:var(--ink-2)}
.row-x{font-size:12px;font-weight:var(--fw-b);color:var(--brand-d);white-space:nowrap;margin-top:6px}
.row[open] .row-x::before{content:'閉じる'}
.row:not([open]) .row-x::before{content:'解説'}
.row-body .exp{margin:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line)}
.res-cta{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}

/* 開放のお知らせ */
.unlock{display:flex;align-items:center;gap:16px;background:var(--surface);border:2px solid var(--brand-soft);border-radius:var(--r-lg);padding:18px 22px;margin:16px 0 0;box-shadow:var(--sh-sm)}
.unlock .tile-ico{background:var(--grad);color:#fff}
.unlock b{display:block;font-size:15px;font-weight:var(--fw-b)}
.unlock span{display:block;font-size:13px;font-weight:600;color:var(--ink-2)}

/* 全問正解のお祝い。
   画面全体に紙吹雪を降らせると邪魔なので、スコアのリングから
   小さな粒が一度だけ弾けて消えるだけにする。1秒で終わる */
.burst{position:fixed;inset:0;pointer-events:none;z-index:60}
.burst i{
  position:absolute;width:7px;height:7px;border-radius:50%;margin:-3.5px 0 0 -3.5px;
  opacity:0;animation:spark 1s var(--e) forwards;
  box-shadow:0 0 7px rgba(255,255,255,.45);
}
@keyframes spark{
  0%  {opacity:0; transform:translate(0,0) scale(.35)}
  22% {opacity:1; transform:translate(calc(var(--dx) * .34),calc(var(--dy) * .34)) scale(1)}
  60% {opacity:.8;transform:translate(calc(var(--dx) * .76),calc(var(--dy) * .76)) scale(.85)}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.4)}
}

.foot{padding-bottom:40px}
.foot p{font-size:12.5px;font-weight:600;color:var(--ink-3);max-width:60em}

/* ---------- 11. 画面の立ち上がり ----------
   fill-mode は backwards。forwards / both だと終了後も
   transform:none が残り、ホバーの浮きを上書きしてしまう */
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.q .meta   {animation:enter .5s var(--e)   0ms backwards}
.q .q-h    {animation:enter .5s var(--e)  40ms backwards}
.q .q-lead {animation:enter .5s var(--e)  70ms backwards}
.q .stage  {animation:enter .5s var(--e) 100ms backwards}
.q .hint   {animation:enter .5s var(--e) 300ms backwards}
.opts>*    {animation:enter .5s var(--e) backwards}
.opts>*:nth-child(1){animation-delay:130ms}
.opts>*:nth-child(2){animation-delay:180ms}
.opts>*:nth-child(3){animation-delay:230ms}
.opts>*:nth-child(4){animation-delay:280ms}
.exp>*     {animation:enter .5s var(--e) backwards}
.exp>*:nth-child(2){animation-delay:60ms}
.exp>*:nth-child(3){animation-delay:110ms}
.exp>*:nth-child(n+4){animation-delay:150ms}
.res>*     {animation:enter .55s var(--e) backwards}
.res>*:nth-child(2){animation-delay:70ms}
.res>*:nth-child(3){animation-delay:120ms}
.res>*:nth-child(n+4){animation-delay:165ms}
/* ⚠ `.hero>div>*` と書くと右のカードの中身（リング・チップ）まで
   巻き込んで、別々の遅延で個別に飛び込んでくる。左の文章の塊だけを指す */
.hero-copy>*{animation:enter .55s var(--e) backwards}
.hero-copy .pill  {animation-delay:0ms}
.hero-copy .hero-h{animation-delay:50ms}
.hero-copy .hero-p{animation-delay:95ms}
.hero-copy .hero-cta{animation-delay:140ms}
.hero-stat {animation:enter .6s var(--e) 120ms backwards}
.dash      {animation:enter .55s var(--e) 170ms backwards}
.world     {animation:enter .55s var(--e) 210ms backwards}
.node-in   {animation:enter .5s var(--e) backwards}
.row[open] .row-body{animation:fadeIn .32s var(--e2) both}

/* ---------- 12. レスポンシブ ---------- */

/* PC: サイドメニューを常設し、本文はその分だけ右へよける。
   .side と .dock は position:fixed なので left を直接ずらす */
@media (min-width:1024px){
  body{padding-left:var(--side)}
  .dock{left:var(--side)}
  .scrim{display:none}
  .burger{display:none}
  .bar .logo{display:none}          /* ロゴはサイドメニューが持つ */
  .bar .ava-btn{display:none}       /* 丸アイコンはナビの「マイページ」が持つ */

  /* 出題中はメニューを消して問題に集中させる */
  body.is-focus{padding-left:0}
  body.is-focus .dock{left:0}
}

/* ⚠ ヒーローを2段にすべきかは「画面幅」では決まらない。
   サイドメニューが 274px 食うので、1024〜1180px だけ本文が 706〜860px に
   なり、右のカードの列が 316px まで潰れてチップが2行に折れる。
   1023px 以下ではサイドメニューが消えて幅が戻るので、この帯だけを狙う */
@media (min-width:1024px) and (max-width:1180px){
  .hero{grid-template-columns:1fr;gap:26px}
  .hero-stat{width:max-content;max-width:100%}
}

/* タブレット・スマホ: ハンバーガーで開くドロワー */
@media (max-width:1023px){
  /* transform で画面外に出すだけでは、見えないのに Tab と読み上げが
     入り込む。閉じている間の遮断は inert 属性（syncSideInert）で行う。
     visibility の transition でも塞げるが、duration:0 + delay の組み
     合わせは値が visible のまま残ることがあり当てにならない */
  /* ドロワーは広めに。右に 56px 残して、外側を押せば閉じられる
     ことが見て分かるようにする（Material のドロワーと同じ考え方）*/
  .side{
    width:min(328px, calc(100vw - 56px));
    transform:translateX(-100%);border-right:0;padding:16px 16px 18px;gap:16px;
    transition:transform .3s var(--e);
  }
  .side.is-open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.5)}
  .side-x{display:grid}
  body.is-drawer{overflow:hidden}   /* ドロワーを開けている間は背面を止める */
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:26px}
  /* 1列になるとカードだけが横いっぱいに伸びて、中身の左右が間抜けに空く。
     中身の幅に合わせて縮める（max-width はみ出し止め）*/
  .hero-stat{width:max-content;max-width:100%}
  .res-top{grid-template-columns:1fr;gap:22px;justify-items:center;text-align:center}
  .res-msg{margin-left:auto;margin-right:auto}
  /* .res-k と .res-stars は flex なので text-align では中央に来ない */
  .res-k,.res-stars,.dots{justify-content:center}
}
@media (max-width:620px){
  body{font-size:15px}
  .wrap{padding-left:16px;padding-right:16px}   /* 左右だけ。上下は触らない */
  /* 時間を画面の中央に置くので、左のハンバーガー+ロゴとぶつからない
     幅を稼ぐ。押せることは丸みと影で分かるので矢印は落とす */
  .bar-nav{gap:8px}
  .bar .logo-mark{height:26px}
  .hudchip--time .ic:last-child{display:none}
  /* リザルトのヘッダはチップが2つになる。時間が1時間を超えると
     「1:05:06」まで伸びてロゴに重なるので、星は落とす。
     スターは結果カードに大きく出ているので情報は失われない */
  .bar-c .hudchip--gold{display:none}
  .opts--cmp{grid-template-columns:1fr}
  /* 縦に積むとカードだけで 326px 使ってロードマップが画面外へ落ちる。
     横並びのまま詰める。チップの列は minmax(0,1fr) にして、320px でも
     「今月 1時間26分」がはみ出さず中で折り返すようにする（実測 288px で収まる）*/
  .hero-stat{width:auto;grid-template-columns:auto minmax(0,1fr);justify-content:start;gap:16px;padding:22px 20px}
  .dash{padding:22px 20px}
  /* ワールド名は 375px では 168px も取れない。狭めて棒に幅を回す */
  .wrow{grid-template-columns:minmax(84px,1fr) minmax(0,1.6fr) auto;gap:11px}
  /* 分野名の列は下の .brow で 96px まで詰めてある（棒の左端を行ごとに
     揃えるため固定幅）。13.5px のままだと「アクセシビリティ」が8字で
     はみ出して2行に折れるので、ここで字を落として1行に収める */
  .brow-n{font-size:12.5px}
  .brow-v{font-size:12.5px;min-width:40px}
  .spec{padding:18px}
  /* 赤ペンの標本はバッジのぶん余白が要る。標本の最大幅は 260px なので
     375px でも 26px は取れる（343 - 52 = 291 > 260）*/
  .rp>.rp-spec{padding:26px}
  .exp-top,.sec{padding:22px 18px}
  .tbl-r{grid-template-columns:1fr;gap:5px}
  .dock-in{flex-direction:column;align-items:stretch;gap:14px;padding:16px}
  .dock-act{margin-left:0}
  .dock-act .btn{width:100%}
  :root{--dock:156px}
  .row>summary{grid-template-columns:32px 1fr;gap:13px}
  .row-x{display:none}
  .card-grad{padding:24px}
  .tile{padding:16px}
  .tile dd.dd-dur{font-size:15.5px}
  .node-in{--x:0 !important}
  .brow{grid-template-columns:minmax(74px,96px) 1fr auto;gap:10px}
  .world-h{padding:16px 18px;gap:11px}
  .world-h em{display:none}
  /* スター・クリア数・同期はサイドメニューへ移したので、
     狭い幅でチップを間引く必要はなくなった。詰めるだけにする。
     同期チップはサイドメニュー（262px）の中なのでメール名も出せる */
  .hudchip{padding:7px 12px;font-size:13px;gap:6px}
  /* コース別の到達状況は2行に折る。1行のままだとコース名の列に
     30px しか残らず「ボタン / とタッ / プ」と1文字ずつ改行される */
  .crow{
    grid-template-columns:38px 1fr;
    grid-template-areas:"ico name" "ico meta";
    gap:5px 12px;padding:14px 2px;
  }
  .crow>.tile-ico{align-self:center}
  .crow-m{gap:12px}
  .crow-v{min-width:0}
  .crow-r{min-width:0;margin-left:auto}
  .dayrow{grid-template-columns:64px 1fr auto;gap:10px;font-size:13.5px}
  .dayrow>span{display:none}
  .dbars{height:100px}
  .log-h>b{font-size:24px}
  .report{padding:16px;font-size:11.5px}
}

/* iPhone SE(第1世代)級の幅。ここまで狭いと中央の時間とロゴが
   重なるのでロゴを落とす。ブランドはドロワーの上端が持っている */
@media (max-width:340px){
  .bar .logo{display:none}
}

/* ---------- 13. モーション配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .btn:hover,.opt:hover,.opt-t:hover,.iconbtn:hover,.node-btn:hover{transform:none}
  .btn:active,.opt:active,.opt-t:active,.iconbtn:active,.node-btn:active{transform:none}
  .opt.is-sel .key,.opt-t.is-sel .key{transform:none}
  .node--now::after{display:none}
  .burst{display:none}
}