/*
Command Lab トップページ 本格リデザイン
仕様: ../../docs/DESIGN_REGULATION.md

スコープ: body.clab-home 配下のみ。既存の共通クラス（.header, .footer, .wrapper 等）は
他ページとも共有されているため、body.clab-home の子孫セレクタとして上書きすることで
トップページ以外のページに影響が及ばないようにしている。

ヘッダー/フッターは常時ダーク固定（.clab-gray-950）。
理由: ロゴ画像（image/command-lab_logo5.png）は「COMMAND」が白文字・透過PNGで
ダーク背景前提のアセットのため、ライト/ダーク切替に関わらず背景を暗色に固定する必要がある。
結果として「ダークな帯（ヘッダー/フッター） + 切替可能な本文」というターミナル的な
額縁構成になり、ブランドコンセプトとも合致する。
*/

body.clab-home {
  background-color: var(--clab-bg-canvas);
  color: var(--clab-text-primary);
  font-family: var(--clab-font-sans);
}

body.clab-home .wrapper {
  background-color: var(--clab-bg-canvas);
}

/* ヘッダー: 常時ダーク固定 */
body.clab-home .header {
  background-color: var(--clab-gray-950);
}
body.clab-home .header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--clab-primary) 50%, transparent 100%);
  box-shadow: 0 0 10px 0 var(--clab-primary);
  opacity: .55;
  pointer-events: none;
}

/* ヒーロー */
body.clab-home .topmain {
  padding: 0 var(--clab-space-4);
}

body.clab-home .topmain__msg {
  color: var(--clab-text-primary);
  font-weight: var(--clab-weight-black);
}

body.clab-home .topmain__submsg {
  color: var(--clab-text-secondary);
}

/* 練習一覧セクション */
body.clab-home .toppage__practice-menu {
  background-color: var(--clab-bg-surface-alt);
}

body.clab-home .toppage__h2 {
  color: var(--clab-text-primary);
  font-weight: var(--clab-weight-bold);
}

body.clab-home .appSelect__submsg {
  color: var(--clab-text-secondary);
}

/* 練習カード: app-accent を上辺に表示し、アプリごとの色を可視化 */
body.clab-home .appSelect__li__inner {
  background-color: var(--clab-bg-surface);
  border: 1px solid var(--clab-border);
  border-top: 4px solid var(--clab-app-accent);
  border-radius: var(--clab-radius-md);
  box-shadow: var(--clab-shadow-sm);
  transition: transform var(--clab-duration-base) var(--clab-ease-out),
              box-shadow var(--clab-duration-base) var(--clab-ease-out),
              border-color var(--clab-duration-base) var(--clab-ease-out);
}

body.clab-home .appSelect__li__inner:hover {
  transform: translateY(-4px);
  box-shadow: var(--clab-shadow-md);
}

body.clab-home .appSelect__tit {
  color: var(--clab-text-primary);
  font-weight: var(--clab-weight-bold);
}

body.clab-home .appSelect__p {
  color: var(--clab-text-secondary);
}

/* フッター: ヘッダーと対になる常時ダーク固定（ロゴ資産の都合は同上） */
body.clab-home .footer {
  background-color: var(--clab-gray-950);
}