/* ============================================================
   LAB のトップページ（問題集を選ぶ）
   ------------------------------------------------------------
   色・ボタン・選択肢カード・標本面は engine/app.css と theme.css のもの。
   ここにはトップだけの並べ方を書く。
   ============================================================ */

/* トップにはサイドメニューが無い。app.css が広い画面で空ける左の余白を消す */
body.top{padding-left:0}

/* ---------- ヘッダ ---------- */
.top-head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.top-logo{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.top-logo .logo-mark{height:42px}
.top-nav{display:flex;align-items:center;gap:8px}
.top-link{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:999px;
  font-family:var(--num);font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;
  transition:color .16s var(--e2),background-color .16s var(--e2);
}
.top-link:hover{color:var(--ink);background:var(--surface-2)}
.top .theme-btn .ic{display:block}

/* ---------- ヒーロー: 左に言葉、右に解ける1問 ---------- */
.top-main{padding-bottom:40px}
.top-hero{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:44px;align-items:center;
  padding:36px 0 72px;
}
.lab-h{font-size:clamp(28px,3.6vw,46px);line-height:1.24;letter-spacing:-.02em;margin:20px 0 0;word-break:auto-phrase}
.top-lead{margin:20px 0 0;max-width:27em;font-size:16px;color:var(--ink-2);word-break:auto-phrase;text-wrap:pretty}
.top-cta{margin:30px 0 0}
a.btn{text-decoration:none}

.try{
  background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh);
  padding:26px;min-width:0;
}
.try-top{display:flex;flex-wrap:wrap;gap:8px}
.try-h{font-size:clamp(18px,1.9vw,22px);font-weight:900;line-height:1.5;letter-spacing:-.01em;margin:14px 0 0;word-break:auto-phrase;text-wrap:balance}
.try-opts{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin:18px 0 0}
/* 選択肢カードは出題画面と同じもの。ここでは面の色だけ一段上げて、土台のカードと見分ける */
.try .opt{background:var(--surface-2);width:100%;min-width:0}
.try .opt:not(.is-sel):not(.is-ok):not(.is-ng) .key{background:var(--surface)}
.try .opt-head{min-height:0;padding:14px 14px 12px}
.try .key .ic{font-size:18px}
.try .opt-body{padding:0 14px 14px}
.try .opt-body .spec{padding:14px 10px;overflow:hidden}
/* 標本は 260px 幅で作ってある。カードが狭いときは縮めて収める */
.try .sui--260{width:100%;max-width:260px}
.try-hint{margin:16px 0 0;font-size:13px;font-weight:500;color:var(--ink-3)}
.try-res{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin:16px 0 0;padding:16px 18px;border-radius:var(--r-md);
  animation:enter .45s var(--e) backwards;
}
.try-res--ok{background:var(--ok-bg)}
.try-res--ng{background:var(--ng-bg)}
.try-v{flex:1 1 220px;font-size:15px;font-weight:700;line-height:1.7;word-break:auto-phrase}
.try-res--ok .try-v b{color:var(--ok-d)}
.try-res--ng .try-v b{color:var(--ng-d)}
.try-res .btn{padding:13px 22px;font-size:14.5px}

/* ---------- セクション ---------- */
.top-sec{padding:0 0 64px}
.section-h{font-size:clamp(24px,3vw,34px);line-height:1.3;letter-spacing:-.015em;margin:0 0 22px}
.top-note{margin:18px 0 0;font-size:14px;color:var(--ink-3)}

/* 問題集のカード。ポートフォリオの作品カードと同じ、右下ににじむ光 */
.books{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}
.book{
  display:grid;gap:8px;align-content:start;min-height:260px;padding:30px;
  border-radius:var(--r-xl);text-decoration:none;color:inherit;
  background:radial-gradient(90% 70% at 100% 100%, var(--brand-wash), transparent 60%), var(--surface);
  box-shadow:var(--sh-sm);
  transition:transform .34s var(--e),box-shadow .34s var(--e);
}
.book:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.book:active{transform:translateY(-1px) scale(.995);transition-duration:.1s}
.book-meta{font-family:var(--num);font-size:13px;font-weight:600;color:var(--ink-3)}
.book-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:clamp(26px,3vw,34px);font-weight:900;line-height:1.3;letter-spacing:-.01em}
.book-name small{font-size:15px;font-weight:700;color:var(--ink-2);letter-spacing:0}
.book-desc{max-width:30em;font-size:15px;color:var(--ink-2);line-height:1.85;word-break:auto-phrase;text-wrap:pretty}
.book-prog{display:flex;align-items:center;gap:12px;margin-top:8px}
.book-bar{flex:1;max-width:220px;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.book-bar>i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.book-num{font-family:var(--num);font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.book-go{
  align-self:end;justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:11px 20px;border-radius:999px;background:#1F4FE0;color:#fff;font-size:14.5px;font-weight:700;
  box-shadow:var(--sh-grad);
}
.book-go .ic{font-size:15px}

/* 準備中のもの。まだ押せないので、カードではなく静かな枠にする */
.soon{
  display:grid;gap:6px;padding:24px 26px;border-radius:var(--r-lg);
  border:1px dashed var(--line-2);
}
.soon b{font-size:17px;font-weight:700;line-height:1.5}
.soon span{max-width:40em;font-size:14.5px;color:var(--ink-2);word-break:auto-phrase;text-wrap:pretty}

/* ---------- フッタ ---------- */
.top-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:36px;font-size:13px;color:var(--ink-3)}
.top-foot a{color:inherit;text-decoration:none}
.top-foot a:hover{color:var(--ink)}

/* ---------- 狭い画面 ---------- */
@media (max-width:900px){
  .top-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding:20px 0 56px}
}
@media (max-width:560px){
  .try{padding:18px;border-radius:var(--r-lg)}
  .try-opts{grid-template-columns:minmax(0,1fr)}
  .book{padding:24px;min-height:0}
  .top-cta .btn{width:100%}
}