@charset "UTF-8";
/* ============================================================================
   +1APP 一覧（app/index.php）の白地テーマ（2026-09-14〜）
   ----------------------------------------------------------------------------
   共通部品は /app/css/light.css。ここは app/index.php のインライン <style> にある
   一覧専用の部品（アプリカード・ランキング・お知らせ・パスキー）だけを持つ。
   **app/index.php だけが読む**ので、他のアプリの画面には届かない。

   ▲ ここも body.app-light の下に閉じる。インライン <style> は <link> より後に
     来るが、body.app-light を頭に付けた詳細度で勝たせている。
   ========================================================================= */

/* ── アプリカード ────────────────────────────────────────────────────
   hover の浮き上がり・影・上辺の色の帯はやめ、罫の色だけで反応させる。
   「accent」（黄色）は注目させたいアプリの印だったが、規約では分類を色で
   分けないので、白地では通常のカードと同じにする。 */
body.app-light a.app-icon-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
}
body.app-light a.app-icon-card::before {
  display: none;
}
@media (hover: hover) {
  body.app-light a.app-icon-card:hover {
    border-color: var(--ui-action);
    background: var(--ui-action-bg);
    transform: none;
    box-shadow: none;
  }
  body.app-light a.app-icon-card:hover .app-icon-card__icon > i {
    transform: none;
  }
}
body.app-light a.app-icon-card:focus-visible {
  outline: 2px solid var(--ui-action);
  outline-offset: 2px;
}

body.app-light .app-icon-card__icon,
body.app-light a.app-icon-card.accent .app-icon-card__icon {
  color: var(--ui-action);
}
body.app-light .app-icon-card__name {
  color: var(--ui-ink-head);
}
body.app-light .app-icon-card__desc {
  color: var(--ui-ink-muted);
}

/* 件数（数値バッジなのでピルのまま） */
body.app-light .app-icon-card__stat-pill,
body.app-light a.app-icon-card.accent .app-icon-card__stat-pill {
  font-family: var(--font-sans);
  font-weight: var(--ui-fw-strong);
  color: var(--ui-action);
  background: var(--ui-action-bg);
  border: 1px solid var(--ui-material-line);
}

/* 「受講生限定」「サミット限定」。文字が区別しているので色は分けない */
body.app-light .app-icon-card__flag,
body.app-light .app-icon-card__flag--student,
body.app-light .app-icon-card__flag--summit {
  font-family: var(--font-sans);
  font-size: var(--ui-fs-micro);
  letter-spacing: 0.02em;
  background: var(--ui-surface-sunken);
  color: var(--ui-ink-muted);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-ctl);
}

/* ── お知らせ ────────────────────────────────────────────────────── */
body.app-light .app-notice-bar {
  background: var(--ui-surface-sunken);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
}
body.app-light .app-notice-bar__item,
body.app-light .section-notice {
  color: var(--ui-ink-muted);
}
body.app-light .app-notice-bar__item i,
body.app-light .section-notice i {
  color: var(--ui-link);
}

/* ── ランキング ──────────────────────────────────────────────────── */
body.app-light .app-rank-tile {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
}
body.app-light .app-rank-tile__hd {
  background: var(--ui-surface-head);
  border-bottom: 1px solid var(--ui-line);
  font-family: var(--font-sans);
  font-size: var(--ui-fs-body);
  font-weight: var(--ui-fw-head);
  color: var(--ui-ink-head);
}
body.app-light .app-rank-tile__hd > i {
  color: var(--ui-action);
}
body.app-light .app-rank-tile__link {
  font-weight: var(--ui-fw-strong);
  color: var(--ui-action);
}
body.app-light .app-rank-tbl td {
  color: var(--ui-ink);
  border-bottom-color: var(--ui-line);
}
body.app-light .app-rank-tbl tr:hover td {
  background: var(--ui-surface-sunken);
}
body.app-light .app-rank-n,
body.app-light .app-rank-sub,
body.app-light .app-rank-empty {
  color: var(--ui-ink-muted);
}
/* 上位3名は色（金・銀・銅）ではなく太さで出す */
body.app-light .app-rank-n--1,
body.app-light .app-rank-n--2,
body.app-light .app-rank-n--3 {
  color: var(--ui-ink-head);
}
body.app-light .app-rank-initials,
body.app-light .app-rank-score {
  color: var(--ui-ink-head);
}
body.app-light .app-rank-you {
  color: var(--ui-action);
}
body.app-light .app-rank-empty {
  font-family: var(--font-sans);
}

/* ── ログイン（パスキー）──────────────────────────────────────────── */
body.app-light .passkey-hero-icon {
  color: var(--ui-action);
  background: var(--ui-action-bg);
}
body.app-light .passkey-hero-title,
body.app-light .passkey-prompt-title {
  font-family: var(--font-sans);
  color: var(--ui-ink-head);
}
body.app-light .passkey-hero-sub,
body.app-light .passkey-prompt-hint {
  color: var(--ui-ink-muted);
}
body.app-light .passkey-prompt-icon {
  color: var(--ui-action);
}
body.app-light .step-account-bar {
  background: var(--ui-surface-sunken);
  border-color: var(--ui-line);
  color: var(--ui-ink);
}
body.app-light .step-account-bar a,
body.app-light .passkey-suggest a,
body.app-light .alt-link a:hover {
  color: var(--ui-action);
}
body.app-light .alt-link a {
  color: var(--ui-ink-muted);
}
body.app-light .passkey-suggest {
  background: var(--ui-material-bg);
  border-color: var(--ui-material-line);
  color: var(--ui-material-ink);
}
body.app-light .passkey-suggest > i {
  color: var(--ui-action);
}