@charset "UTF-8";
/* ============================================================================
   +1APP 白地テーマ（2026-09-14〜）
   ----------------------------------------------------------------------------
   アプリを記事・会員画面と同じ白地へ寄せるための上書き。
   規約は docs/spec/member-design-standard.md、台帳は
   docs/ongoing/2026-09-14_app-design-unification.md。

   ── なぜ上書きの1枚にしたか ──────────────────────────────────────
   /app/css/local.css は全49アプリが共有している。会員画面のように値を
   その場で書き換えると、まだ寄せていないアプリまで一斉に変わる。
   そこで、白地へ移したページだけが $app_light = true を立て、
   app/common/header.php が <body class="app-light"> とこのファイルを出す。
   **ここのルールはすべて body.app-light の下に閉じる。** 暗色のアプリには効かない。

   ── 読み込み順 ────────────────────────────────────────────────────
   header.php が css/ds/tokens.css → css/ds/roles.css → このファイル の順で出す。
   各アプリの index.php は header のあとに /app/css/local.css をもう一度読むが、
   ここは body.app-light を頭に付けて詳細度で勝たせているので順序に依存しない。

   ── 決め方 ────────────────────────────────────────────────────────
   1. local.css の --bg-* --text-* などは、アプリ固有CSSの大半が参照している。
      **まずこれを役割トークンへ付け替える**（下の最初のブロック）。
      それだけで var() で書いたアプリ固有CSSは白地に乗る。
   2. local.css が生の16進数で書いている共通部品は、下で1つずつ上書きする。
   3. 規約どおり、左の色罫・光彩・グラデーション・大文字の等幅ラベルは落とす。
      等幅（Space Mono）は数字（タイマー・問題番号）にだけ残す。
   ========================================================================= */

body.app-light {
  /* ── local.css のトークンを役割へ付け替える ─────────────────── */
  --bg-deep: var(--ui-surface);
  --bg-panel: var(--ui-surface-sunken);
  --bg-card: var(--ui-surface);
  --border: var(--ui-line);
  --border-bright: var(--ui-line-strong);
  --primary-color: var(--ui-action);
  --glow-primary: none;
  --accent-color: var(--ui-warn-ink);
  --glow-accent: none;
  --score-great: var(--ui-ok-ink);
  --score-good: var(--ui-action);
  --score-mid: var(--ui-warn-ink);
  --score-low: var(--orange-700);
  --score-bad: var(--ui-danger-ink);
  --text-primary: var(--ui-ink);
  --text-secondary: var(--ui-ink-muted);
  --text-mono: var(--ui-action);
  --radius: var(--ui-r-ctl);
  --font-ui: var(--font-sans);

  background: var(--ui-surface);
  background-image: none;
  color: var(--ui-ink);
  font-family: var(--font-sans);
  line-height: var(--ui-lh);
}

/* ── サイト共通ヘッダー・記事と同じ見出しの帯との取り合い（2026-09-14）───
   白地ではロゴ付きのサイト共通ヘッダー（common/header-bar.php・css/header.css）と、
   記事と同じ見出しの帯（.a-hero）・パンくず（.a-bc）を app/common/header.php が出す。
   暗色の画面は右上に固定の .top-bar を浮かせていたので、その前提の余白を戻す。 */

/* 見出しは帯が出すので、各ページの見出しは隠す（同じ文字が2回出ないように） */
body.app-light .app-wrapper > .app-header {
  display: none;
}
/* 帯とパンくずの中身を、アプリの本文（.app-wrapper 960px − 左右 1.5rem）と同じ幅に揃える */
body.app-light .a-hero__inner,
body.app-light .a-bc__list {
  max-width: 912px;
  margin-left: auto;
  margin-right: auto;
}
body.app-light .app-wrapper {
  padding-top: 1.5rem;
}

/* 帯の中：左に見出し、右にトークン残量（2026-09-14）。
   残量は帯へ移したので、本文のトークン利用状況の器は出さない */
body.app-light .app-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
body.app-light .app-hero__main {
  min-width: 0;
}
body.app-light .app-hero__main--fill { flex: 1 1 auto; }
body.app-light .app-wrapper .token-panel {
  display: none;
}
body.app-light .app-hero-token {
  flex: 0 0 15rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ui-r-card);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ui-ink-on-fill);
}
body.app-light .app-hero-token__title {
  margin: 0 0 0.45rem;
  font-size: var(--ui-fs-micro);
  font-weight: var(--ui-fw-head);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}
body.app-light .app-hero-token__row {
  display: grid;
  grid-template-columns: 1.2em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ui-fs-micro);
  line-height: 1.8;
}
body.app-light .app-hero-token__label {
  color: rgba(255, 255, 255, 0.7);
}
body.app-light .app-hero-token__bar {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
body.app-light .app-hero-token__fill {
  display: block;
  height: 100%;
  background: var(--sky-400);
}
body.app-light .app-hero-token__fill.is-warn { background: var(--orange-300); }
body.app-light .app-hero-token__fill.is-over { background: var(--ui-danger-line); }
body.app-light .app-hero-token__text {
  font-variant-numeric: tabular-nums;
  color: var(--ui-ink-on-fill);
}
@media (max-width: 720px) {
  body.app-light .app-hero {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  body.app-light .app-hero-token {
    flex-basis: auto;
  }
}
@media (max-width: 600px) {
  body.app-light .app-wrapper {
    padding: 1rem 1rem 3rem;
  }
}
/* css/header.css は Bootstrap の下地がある前提で書かれている箇所がある。
   アプリは Bootstrap を読まないので、効いていなかった分だけ補う。 */
body.app-light .header-new a { text-decoration: none; }
body.app-light .header-logo-link img { display: block; }

/* ── ページ骨格 ──────────────────────────────────────────────────── */
body.app-light .app-header {
  border-bottom-color: var(--ui-line);
}
body.app-light .app-title,
body.app-light .app-header-title {
  font-family: var(--font-sans);
  font-size: var(--ui-fs-page);
  font-weight: var(--ui-fw-head);
  color: var(--ui-ink-head);
  text-shadow: none;
  letter-spacing: 0.02em;
  text-transform: none;
}
body.app-light .app-subtitle,
body.app-light .app-header-subtitle {
  color: var(--ui-ink-muted);
  font-size: var(--ui-fs-meta);
}

body.app-light .top-bar__link {
  font-family: var(--font-sans);
  font-size: var(--ui-fs-micro);
  font-weight: var(--ui-fw-strong);
  letter-spacing: 0.02em;
  text-transform: none;
  border-color: var(--ui-line);
  background: var(--ui-surface);
  color: var(--ui-ink-muted);
}
body.app-light .top-bar__link:hover {
  color: var(--ui-action);
  border-color: var(--ui-action);
  background: var(--ui-action-bg);
}
/* 不具合報告は押してほしい操作ではないので、色で目立たせない */
body.app-light .top-bar__link--warn,
body.app-light .top-bar__link--warn:hover {
  color: var(--ui-ink-muted);
  border-color: var(--ui-line);
  background: var(--ui-surface);
}
body.app-light .top-bar__link--warn:hover {
  color: var(--ui-action);
  border-color: var(--ui-action);
}

/* ── 器 ──────────────────────────────────────────────────────────────
   影なし・罫・12px。左の色罫（::before）は落とす。 */
body.app-light .section-card,
body.app-light .login-card,
body.app-light .pricing-section,
body.app-light .token-panel,
body.app-light .membership-banner,
body.app-light .inline-panel,
body.app-light .app-card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  box-shadow: none;
}
body.app-light .section-card:hover,
body.app-light .membership-banner:hover,
body.app-light .app-card:hover {
  border-color: var(--ui-line);
  transform: none;
}
body.app-light .section-card::before,
body.app-light .login-card::before,
body.app-light .pricing-section::before,
body.app-light .token-panel::before,
body.app-light .membership-banner::before,
body.app-light .app-card::before {
  display: none;
}

body.app-light .membership-banner {
  color: var(--ui-ink);
  font-size: var(--ui-fs-body);
  padding: var(--ui-pad-card);
}

/* 器の見出し。大文字・字間の広い等幅をやめ、文字の階層だけにする */
body.app-light .section-label,
body.app-light .login-heading,
body.app-light .pricing-label,
body.app-light .token-panel__title,
body.app-light .inline-panel__title {
  font-family: var(--font-sans);
  font-size: var(--ui-fs-card);
  font-weight: var(--ui-fw-head);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ui-ink-head);
}
/* 見出しの前の光る点は飾り。規約の「避けること」に当たるので出さない */
body.app-light .section-label .dot,
body.app-light .login-heading .dot,
body.app-light .pricing-label .dot,
body.app-light .token-panel__title .dot,
body.app-light .inline-panel__title .dot,
body.app-light .app-section-heading .dot {
  display: none;
}

body.app-light .info-list li {
  color: var(--ui-ink);
  font-size: var(--ui-fs-body);
}
body.app-light .info-list li::before {
  color: var(--ui-ink-muted);
}
body.app-light .info-list strong {
  color: var(--ui-ink-head);
}

/* ── セクション見出し（一覧の「模擬試験」など）──────────────────── */
body.app-light .app-section-heading__label {
  font-size: var(--ui-fs-card);
  color: var(--ui-ink-head);
  letter-spacing: 0.02em;
}
body.app-light .app-section-heading::after {
  background: var(--ui-line);
}

/* ── ボタン ──────────────────────────────────────────────────────────
   塗るのは主要（btn-primary）だけ。1画面に1個。 */
body.app-light .btn,
body.app-light .btn-ghost-link,
body.app-light .btn-login-submit,
body.app-light .btn-subscribe,
body.app-light .btn-my-account,
body.app-light .btn-kuins,
body.app-light .btn-logout {
  font-family: var(--font-sans);
  font-size: var(--ui-fs-body);
  font-weight: var(--ui-fw-head);
  letter-spacing: 0.02em;
  text-transform: none;
  border-width: 1.5px;
  border-radius: var(--ui-r-ctl);
  box-shadow: none;
}
body.app-light .btn:hover:not(:disabled),
body.app-light .btn-login-submit:hover:not(:disabled),
body.app-light .btn-subscribe:hover,
body.app-light .btn-my-account:hover,
body.app-light .btn-kuins:hover {
  box-shadow: none;
}

/* 主要 */
body.app-light .btn-primary,
body.app-light .btn-login-submit {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-ink-on-fill);
}
body.app-light .btn-primary:hover:not(:disabled),
body.app-light .btn-login-submit:hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
  color: var(--ui-ink-on-fill);
}

/* 操作（青の枠） */
body.app-light .btn-accent,
body.app-light .btn-success,
body.app-light .btn-my-account,
body.app-light .btn-kuins {
  background: transparent;
  border-color: var(--ui-action);
  color: var(--ui-action);
}
body.app-light .btn-accent:hover:not(:disabled),
body.app-light .btn-success:hover:not(:disabled),
body.app-light .btn-my-account:hover,
body.app-light .btn-kuins:hover {
  background: var(--ui-action-bg);
  border-color: var(--ui-action);
  color: var(--ui-action);
}

/* 副次（灰の枠） */
body.app-light .btn-ghost,
body.app-light .btn-ghost-link,
body.app-light .btn-logout,
body.app-light .btn-unarchive {
  background: transparent;
  border-color: var(--ui-secondary-line);
  color: var(--ui-secondary-ink);
}
body.app-light .btn-ghost:hover:not(:disabled),
body.app-light .btn-ghost-link:hover,
body.app-light .btn-unarchive:hover {
  background: var(--ui-surface-sunken);
  border-color: var(--ui-action);
  color: var(--ui-secondary-ink);
}
body.app-light .btn-logout {
  font-size: var(--ui-fs-meta);
  padding: 0.3rem 0.8rem;
}

/* 取り消し（塗らない） */
body.app-light .btn-del,
body.app-light .btn-logout:hover {
  background: transparent;
  border-color: var(--ui-danger-line);
  color: var(--ui-danger-ink);
}
body.app-light .btn-del:hover {
  background: var(--ui-danger-bg);
  border-color: var(--ui-danger-line);
}

/* 購入（/purchase/ と会員登録へ送るもの） */
body.app-light .btn-subscribe {
  background: var(--ui-buy-bg);
  border-color: var(--ui-buy-line);
  color: var(--ui-buy-ink);
}
body.app-light .btn-subscribe:hover {
  background: var(--ui-buy-bg);
  border-color: var(--ui-buy-ink);
  color: var(--ui-buy-ink);
}

body.app-light .btn-archive {
  border-color: var(--ui-line-strong);
  color: var(--ui-ink-muted);
}

/* ── 状態・補助 ──────────────────────────────────────────────────── */
body.app-light .user-bar {
  font-family: var(--font-sans);
  font-size: var(--ui-fs-meta);
  color: var(--ui-ink-muted);
}
body.app-light .user-bar-name {
  color: var(--ui-ink-head);
  font-weight: var(--ui-fw-head);
}

body.app-light .badge-archived,
body.app-light .badge-summit,
body.app-light .badge-student {
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  background: var(--ui-surface-sunken);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-ctl);
  color: var(--ui-ink-muted);
}

body.app-light .status-bar { font-family: var(--font-sans); letter-spacing: 0.02em; color: var(--ui-ink-muted); }
body.app-light .status-bar.info { color: var(--ui-action); }
body.app-light .status-bar.warn { color: var(--ui-warn-ink); }
body.app-light .status-bar.error { color: var(--ui-danger-ink); }
body.app-light .status-bar.success { color: var(--ui-ok-ink); }

body.app-light .spinner {
  border-color: var(--ui-line);
  border-top-color: var(--ui-action);
}

body.app-light .toast {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow-float);
}

body.app-light .empty-table { color: var(--ui-ink-muted); }
body.app-light .empty-table--error { color: var(--ui-danger-ink); }

body.app-light .step-hint,
body.app-light .form-hint,
body.app-light .td-text,
body.app-light .td-date,
body.app-light .table-header-count,
body.app-light .table-count {
  color: var(--ui-ink-muted);
  font-family: inherit;  /* 「9 件」のように日本語が入るので等幅にしない（2026-10-08） */
  font-variant-numeric: tabular-nums;
}

body.app-light .login-error {
  background: var(--ui-danger-bg);
  border-color: var(--ui-danger-line);
  color: var(--ui-danger-ink);
}

/* ── 表 ──────────────────────────────────────────────────────────── */
body.app-light .table-header-title,
body.app-light .table-title {
  font-family: var(--font-sans);
  text-transform: none;
  color: var(--ui-ink-head);
  font-weight: var(--ui-fw-head);
}
body.app-light .lesson-table th {
  font-family: var(--font-sans);
  text-transform: none;
  color: var(--ui-ink-muted);
  border-bottom-color: var(--ui-line-strong);
}
body.app-light .lesson-table td {
  color: var(--ui-ink);
  border-bottom-color: var(--ui-line);
}
body.app-light .lesson-table tr:hover td {
  background: var(--ui-surface-sunken);
}

/* ── タブ・選択 ──────────────────────────────────────────────────── */
body.app-light .tab-toggle { border-color: var(--ui-line-strong); }
body.app-light .tab-toggle__btn {
  font-family: var(--font-sans);
  text-transform: none;
  color: var(--ui-ink-muted);
}
body.app-light .tab-toggle__btn + .tab-toggle__btn { border-left-color: var(--ui-line-strong); }
body.app-light .tab-toggle__btn.is-active {
  background: var(--ui-action-bg);
  color: var(--ui-action);
}
body.app-light .tab-toggle__btn:hover:not(.is-active) {
  background: var(--ui-surface-sunken);
  color: var(--ui-ink);
}

body.app-light .app-mode-btn.selected,
body.app-light .app-model-opt:has(input:checked) {
  background: var(--ui-action-bg);
  box-shadow: none;
}
/* モデル・モードの名前は読む文字。等幅と広い字間をやめる（2026-09-17・ボディチェックで追加） */
body.app-light .app-mode-btn__title {
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

/* ── フォーム ────────────────────────────────────────────────────────
   フォーカスリングは装飾ではない（キーボードでいまどこにいるかの表示）。消さない。 */
body.app-light .form-label {
  font-family: var(--font-sans);
  font-size: var(--ui-fs-meta);
  font-weight: var(--ui-fw-head);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ui-ink-head);
}
body.app-light .form-input,
body.app-light .form-select,
body.app-light .form-textarea,
body.app-light .lesson-dropdown {
  background-color: var(--ui-surface);
  border-color: var(--ui-line-strong);
  color: var(--ui-ink);
}
body.app-light .form-input:focus,
body.app-light .form-select:focus,
body.app-light .form-textarea:focus,
body.app-light .lesson-dropdown:focus {
  border-color: var(--ui-action);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--sky-200));
}
body.app-light .form-input option,
body.app-light .form-select option,
body.app-light .lesson-dropdown option {
  background: var(--ui-surface);
}
body.app-light .form-required { color: var(--ui-danger-ink); }

body.app-light .remember-label,
body.app-light .forgot-password-link {
  font-family: var(--font-sans);
  letter-spacing: 0;
}
body.app-light .remember-label input[type=checkbox],
body.app-light .toggle-label input[type=checkbox] {
  accent-color: var(--ui-action);
}
body.app-light .forgot-password-link { color: var(--ui-ink-muted); }
body.app-light .forgot-password-link:hover { color: var(--ui-action); }
body.app-light .login-options,
body.app-light .toggle-label { color: var(--ui-ink-muted); }

/* ── 料金 ────────────────────────────────────────────────────────── */
body.app-light .pricing-currency,
body.app-light .pricing-period { color: var(--ui-ink-muted); }
body.app-light .pricing-amount { color: var(--ui-ink-head); }
body.app-light .pricing-features li {
  color: var(--ui-ink);
  border-bottom-color: var(--ui-line);
}
body.app-light .pricing-features li::before { color: var(--ui-action); }
body.app-light .pricing-badge {
  background: var(--ui-buy-bg);
  color: var(--ui-buy-ink);
  box-shadow: none;
}

/* ── AI添削の指摘（/app/js/feedback-points.js・feedback-deep-dive.js）──
   複数のアプリが同じ markup を使う。左の黄色い縦帯（片側だけ色を差す帯）は落とし、
   誤り→正しい形は赤と緑の文字、深掘りは資料の面にする。 */
body.app-light .fbq-item {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
}
body.app-light .fbq-item__label {
  font-family: var(--font-sans);
  color: var(--ui-ink-muted);
  background: var(--ui-surface-sunken);
  border-color: var(--ui-line);
  border-radius: var(--ui-r-ctl);
}
body.app-light .fbq-item__quote {
  font-family: var(--font-sans);
  color: var(--ui-danger-ink);
  text-decoration-color: var(--ui-danger-line);
}
body.app-light .fbq-item__fix {
  font-family: var(--font-sans);
  color: var(--ui-ok-ink);
}
body.app-light .fbq-item__why { color: var(--ui-ink); }
body.app-light .fbq-item__tip { border-top-color: var(--ui-line); color: var(--ui-ink-muted); }
body.app-light .fbq-item__tip i { color: var(--ui-action); opacity: 1; }
body.app-light .fbq-deep-block {
  background: var(--ui-material-bg);
  border-color: var(--ui-material-line);
  border-radius: var(--ui-r-card);
}
body.app-light .fbq-deep__header,
body.app-light .fbq-deep__label {
  font-family: var(--font-sans);
  color: var(--ui-material-ink);
  opacity: 1;
}
body.app-light .fbq-deep__ex { border-left-color: var(--ui-material-line); }

/* ── トークン利用状況 ────────────────────────────────────────────── */
body.app-light .token-panel__period {
  font-family: var(--font-sans);
  color: var(--ui-ink-muted);
  opacity: 1;
}
body.app-light .token-panel__text {
  color: var(--ui-ink-muted);
}
body.app-light .token-bar__bar {
  background: var(--ui-surface-sunken);
  border: 1px solid var(--ui-line);
}
body.app-light .token-bar__fill { background: var(--ui-action); }
body.app-light .token-bar__fill.warn { background: var(--ui-warn-fill); box-shadow: none; }
body.app-light .token-bar__fill.over { background: var(--ui-danger-line); box-shadow: none; }

/* 学習アプリ（iOS・Android）のダウンロード案内（app/common/store-banner.php・2026-10-06）。
   スマホで開いたときだけ、パンくずの下に1行で出す */
body.app-light .app-store {
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-line);
  padding: .6rem 1.1rem;
}
body.app-light .app-store__inner {
  max-width: 912px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
}
body.app-light .app-store__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
}
body.app-light .app-store__name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--ui-fs-body);
  font-weight: var(--ui-fw-strong);
  color: var(--ui-ink-head);
  line-height: 1.4;
}
body.app-light .app-store__meta {
  display: block;
  font-size: var(--ui-fs-meta);
  font-weight: 400;
  color: var(--ui-ink-muted);
}
body.app-light .app-store__btn {
  flex: none;
  padding: .45rem .9rem;
  border: 1px solid var(--ui-primary);
  border-radius: var(--ui-r-pill);
  color: var(--ui-primary);
  font-size: var(--ui-fs-meta);
  font-weight: var(--ui-fw-strong);
  text-decoration: none;
  white-space: nowrap;
}