@charset "UTF-8";
/* ============================================================================
   PlusOnePoint — 会員専用画面のUIレイヤー
   ----------------------------------------------------------------------------
   会員画面（/summit/, /speaking-summit/, /private/, /myessay/, /mypage/ …）で
   共通に使う部品をここに集める。/css/ds/ の対になる存在だが、別物として扱う。

   読み込み順: ds/tokens.css → **ds/roles.css** → member/ui.css → 各画面のCSS
   （/css/includes/member-css.php がこの順で出力する）

   ▲ **規約の正は `docs/spec/member-design-standard.md` と `css/ds/roles.css`。**
     ここは「形」を持つ層で、色・角丸・級数は roles.css の --ui-* を参照する。
     **このファイルに16進数を書き足さないこと。**
     見本は <https://ielts.jp/prototype/design/>（実物のCSSを読んでいる）。

   ── /css/ds/ と何を共有し、何を分けるか ────────────────────────────
   共有するのは ds/tokens.css と ds/roles.css。色と役割を1か所に保つためで、
   会員画面が公開ページと違う青を使い始めないようにする。

   ds/layout.css と ds/button.css は読み込まない。あちらは公開ページ用で、
   見栄えを優先して見出し最大 2.75rem・セクション上下最大 6rem を取っている。
   会員画面は1画面に情報を収めて操作させる画面なので、そのスケールを
   持ち込むと1画面に何も入らない。ここでは機能性を優先し、
   余白とタイポは詰めた別系統で組む。装飾（hoverの浮き上がり、
   スクロール登場アニメ、ピル形のCTA）は持ち込まない。

   ── 使う色（2026-09-06 に決め直した）──────────────────────────
   ▲ **この節は 2026-09-05 まで「桃は使わない・緑は使わない・要対応は橙」
     と書いてあったが、5画面の実態と食い違っていたので引き直した。**

   **基本はブルー1系統。ブルー以外を当てるのは購入と取消の2つだけ。**
   どちらも間違えると困る操作なので、押す前に色で気づけるようにする。
   それ以外はブルーの中で、塗り／枠線／薄い面／文字だけ、の差で強弱を付ける。

     主要（塗り）   紺   --ui-primary        1画面に1個
     操作（枠線）   青   --ui-action         ZOOM・提出・切り替え
     資料           薄青 --ui-material-*     届いているので見てほしいもの
     リンク         空色 --ui-link
     副次（枠線）   灰   --ui-secondary-*
     取り消し       赤   --ui-danger-*       塗らない
     購入           桃   --ui-buy-*
     達成・完了     緑   --ui-ok-*           **状態。ボタンには使わない**

   ── 「押せるもの」だけを押せる形にする ──────────────────────────
   会員画面が読みにくくなる最大の原因は、情報も操作も同じ角丸ボックスで
   囲ってしまうこと。囲いは以下の4つだけに限る。

     .mui-tile    … 画面を分ける器（ダッシュボードのカード）
     .mui-panel   … 同上（下位ページ用。頭と本体を持つ）
     .mui-option  … 選ぶもの（クリックできる）
     .mui-btn     … 実行するもの（塗りは1画面に1個）

   締切・人数・所要時間のような「読むだけの値」は .mui-meta で、
   囲わずラベルと値の組として置く。

   ▲ **二重枠にしない。** 器の中の一覧は行ごとに囲わず、罫で区切る
     （.mui-rows / .mui-row）。中身が1つなら囲いは器の1枚で足りる。
   ========================================================================= */

:root {
  /* 級数は roles.css の --ui-fs-* が正。ここは既存の .mui-* 用の別名。
     公開ページの --fs-*（clamp）とは別系統のままにする（あちらは流動的で、
     ここに持ち込むとウィンドウ幅で行数が変わり表が崩れる）。 */
  --mui-fs-xs: var(--ui-fs-meta);
  --mui-fs-sm: 0.8rem;            /* --ui-* に対応が無い中間。ここだけ実値 */
  --mui-fs: var(--ui-fs-body);
  --mui-fs-md: var(--ui-fs-card);
  --mui-fs-lg: var(--ui-fs-lead);

  /* 角丸は2段。器と中の部品。値は roles.css が持つ。 */
  --mui-r: var(--ui-r-card);
  --mui-r-sm: var(--ui-r-ctl);

  /* ▲ 器に影は付けない（2026-09-06 の規約）。罫で分ける。
     影は本当に上に乗っているものだけで、それは --ui-shadow-float。
     この変数は既存の参照を壊さないために残してあるが、中身は none。 */
  --mui-shadow: none;
}

/* 文中のリンクの色（2026-10-02・ユーザー指摘「所々デフォルトのリンク色が出る」）
   Bootstrap の素の a は #0d6efd で、サイトの青と違う青が出ていた。
   文中のリンクは sky-700（= --ui-action、#1b5aa0）。--ui-link（sky-500）は白地で 2.8:1 しかなく
   文字には薄すぎた（アイコン用）。ホバーは sky-800（#15467e）。
   Bootstrap は rgb の3つ組でしか受け取らないので、ここだけ数値で持つ。
   body に置くのは、Bootstrap の :root より読み込み順に関係なく勝たせるため。 */
body {
  --bs-link-color-rgb: 27, 90, 160;
  --bs-link-hover-color-rgb: 21, 70, 126;
  --bs-link-color: var(--sky-700, #1b5aa0);
  --bs-link-hover-color: var(--sky-800, #15467e);
}

/* ---------------------------------------------------------------------------
   1. ページの器
   -------------------------------------------------------------------------- */
.mui-page {
  padding: 0 16px 24px;
  color: var(--neutral-700);
  font-size: var(--mui-fs);
  line-height: 1.7;
}

/* 画面いっぱいに使い、中身だけをスクロールさせる版（一覧＋詳細の画面用）。
   高さはヘッダー分を変数で外から渡す。dvh なのでモバイルのURLバーで跳ねない。 */
.mui-page--fill {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--mui-chrome, 185px));
  overflow: hidden;
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   2. 左に一覧・右に詳細
   -------------------------------------------------------------------------- */
.mui-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--mui-rail, 200px) minmax(0, 1fr);
  gap: 10px;
}

@media (max-width: 700px) {
  .mui-page--fill {
    height: auto;
    overflow: visible;
  }
  .mui-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   3. パネル（画面を分ける唯一の器）
   -------------------------------------------------------------------------- */
.mui-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--mui-r);
  box-shadow: var(--mui-shadow);
  overflow: hidden;
}

.mui-panel__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 38px;
  padding: 7px 14px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
}

.mui-panel__title {
  font-size: var(--mui-fs-md);
  font-weight: 700;
  color: var(--navy-700);
}

/* 見出しに添える日付など。見出しと同じ行に置くが、主役ではない。 */
.mui-panel__sub {
  font-size: var(--mui-fs-sm);
  font-weight: 400;
  color: var(--neutral-500);
}

/* 右端に寄せるもの（状態バッジなど） */
.mui-panel__end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ヘッダーのアイコン。色は1つに固定し、画面ごとに変えない。 */
.mui-panel__icon {
  color: var(--sky-500);
  font-size: var(--mui-fs);
}

.mui-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px 20px;
}

.mui-panel__body::-webkit-scrollbar {
  width: 5px;
}
.mui-panel__body::-webkit-scrollbar-thumb {
  background: var(--neutral-300);
  border-radius: var(--r-pill);
}

/* パネルを重ねずに区切りたいとき */
.mui-panel__body > * + .mui-rule {
  margin-top: 18px;
}
.mui-rule {
  border: 0;
  height: 1px;
  background: var(--neutral-200);
  margin: 18px 0;
}

/* ---------------------------------------------------------------------------
   4. 一覧レール（左の週ナビなど）
   選択中の項目は「面の色 + 左の紺の帯」で示す。枠線で囲むとボタンに見える。
   -------------------------------------------------------------------------- */
.mui-rail__hd {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--neutral-200);
  font-size: var(--mui-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neutral-400);
}

.mui-rail__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.mui-rail-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  /* 左の帯は選択時だけ色を変える。border を付け外しすると文字がずれるので、
     常に透明の帯を確保しておく。 */
  border-bottom: 1px solid var(--neutral-100);
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--neutral-700);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.mui-rail-item:last-child {
  border-bottom: 0;
}

.mui-rail-item:hover {
  background: var(--sky-50);
}

.mui-rail-item.is-active {
  background: var(--sky-50);
  color: var(--navy-700);
}

.mui-rail-item__sub {
  font-size: var(--mui-fs-xs);
  font-weight: 400;
  color: var(--neutral-500);
}

/* ---------------------------------------------------------------------------
   5. 状態バッジ
   「点＋文字」にして、面の塗りは持たせない。塗ったバッジを行ごとに置くと、
   一覧が色の粒だらけになり、どれが要対応か分からなくなる。
   -------------------------------------------------------------------------- */
.mui-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--mui-fs-xs);
  font-weight: 700;
  color: var(--neutral-500);
  white-space: nowrap;
}

.mui-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* 要対応（未回答）。ここだけ橙。1画面で唯一の暖色にする。 */
.mui-status--todo {
  color: var(--orange-600);
}

/* 済み・確定 */
.mui-status--done {
  color: var(--sky-700);
}

/* 受付終了・対象外 */
.mui-status--closed {
  color: var(--neutral-400);
}

/* ---------------------------------------------------------------------------
   6. 読むだけの値（囲わない）
   締切・人数・所要時間のたぐい。ラベルを小さく上に、値を下に置く。
   -------------------------------------------------------------------------- */
.mui-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0;
  padding: 0;
}

.mui-meta__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mui-meta__label {
  font-size: var(--mui-fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--neutral-500);
}

.mui-meta__value {
  font-size: var(--mui-fs);
  font-weight: 700;
  color: var(--navy-700);
}

/* 値に添える但し書き（「(参加5名)」など）。値より一段落とす。 */
.mui-meta__note {
  margin-left: 0.4em;
  font-size: var(--mui-fs-xs);
  font-weight: 500;
  color: var(--neutral-500);
}

/* 締切など、注意を向けたい値だけ橙にする。使いすぎないこと。 */
.mui-meta__value--alert {
  color: var(--orange-700);
}

/* 補足の1行。見出しにするほどでもない説明。 */
.mui-hint {
  margin: 8px 0 0;
  font-size: var(--mui-fs-xs);
  color: var(--neutral-500);
}

/* ---------------------------------------------------------------------------
   7. 小見出し
   会員画面の中で章を分ける。.member h4 の「左に太いボーダー」は使わない。
   -------------------------------------------------------------------------- */
.mui-heading {
  margin: 0 0 10px;
  font-size: var(--mui-fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--neutral-500);
}

/* ---------------------------------------------------------------------------
   8. 選択肢（押せるものその1）
   ネイティブの radio を appearance:none で描き直す。
   JSで選択状態を管理すると、キーボード操作もフォーム送信も自前になり、
   display:none にした input はイベントの拾い漏れも起きる。
   -------------------------------------------------------------------------- */
.mui-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 560px;
}

.mui-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--mui-r-sm);
  font-size: var(--mui-fs);
  color: var(--neutral-700);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.mui-option:hover {
  background: var(--sky-50);
  border-color: var(--sky-300);
}

.mui-option__input {
  appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid var(--neutral-300);
  border-radius: 50%;
  background: var(--neutral-0);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

/* 選択中は「内側の点」で示す。box-shadow の inset を使うと
   要素サイズを変えずに点が描けるので、行の高さが動かない。 */
.mui-option__input:checked {
  border-color: var(--sky-600);
  box-shadow: inset 0 0 0 4px var(--sky-600);
}

.mui-option:has(.mui-option__input:checked) {
  background: var(--sky-50);
  border-color: var(--sky-500);
  color: var(--navy-700);
  font-weight: 600;
}

/* :has() が無いブラウザ向け。JSが .is-selected を付ける。 */
.mui-option.is-selected {
  background: var(--sky-50);
  border-color: var(--sky-500);
  color: var(--navy-700);
  font-weight: 600;
}

.mui-option:has(.mui-option__input:focus-visible),
.mui-option.is-focus {
  box-shadow: var(--focus-ring);
}

.mui-option__text {
  min-width: 0;
}

/* 選択肢に添える補足（「10:00開始」など） */
.mui-option__sub {
  display: block;
  font-size: var(--mui-fs-xs);
  font-weight: 400;
  color: var(--neutral-500);
}

.mui-option:has(.mui-option__input:checked) .mui-option__sub,
.mui-option.is-selected .mui-option__sub {
  color: var(--sky-700);
}

/* ---------------------------------------------------------------------------
   9. 入力欄
   -------------------------------------------------------------------------- */
.mui-field {
  max-width: 560px;
  margin-top: 10px;
}

.mui-field__label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--mui-fs-xs);
  font-weight: 700;
  color: var(--neutral-600);
}

/* ▲ select も同じ形にする（2026-09-06 追加）。5画面のプレビューバーの
   <select> はフォーカスリングを持っていなかった。 */
.mui-textarea,
.mui-input,
.mui-select {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--ui-line-strong);
  border-radius: var(--mui-r-sm);
  background: var(--ui-surface);
  font: inherit;
  font-size: var(--mui-fs);
  color: var(--ui-ink);
}

.mui-textarea { resize: vertical; }

/* フォーカスリングは装飾ではない。**キーボードでいまどこにいるかの表示。**
   消さないこと。 */
.mui-textarea:focus,
.mui-input:focus,
.mui-select:focus {
  outline: none;
  border-color: var(--ui-action);
  box-shadow: var(--focus-ring);
}

.mui-textarea::placeholder,
.mui-input::placeholder {
  color: var(--neutral-400);
}

/* ファイル選択・チェックボックス・ラジオ（2026-09-08・/admin/bugfix/ #73）。
   **既定のままにしない。** ブラウザ既定の「ファイルを選択」だけ角が四角く、
   灰色のベベルが付いていて、その1個が他所から来た部品に見える。
   ▲ 管理画面は `.ax-file` `.ax-check` `.ax-radio`（css/admin/shell.css）。
      同じ形を2か所に書いているのは、管理画面が ui.css を読めないため。 */
.mui-file {
  display: block;
  width: 100%;
  border: 1.5px solid var(--ui-line-strong);
  border-radius: var(--mui-r-sm);
  padding: 7px 12px;
  font: inherit;
  font-size: var(--mui-fs);
  background: var(--ui-surface);
  color: var(--ui-ink);
  cursor: pointer;
}
.mui-file::file-selector-button {
  margin: 0 10px 0 0;
  padding: 5px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border-radius: var(--mui-r-sm);
  border: 1.5px solid var(--ui-secondary-line);
  background: transparent;
  color: var(--ui-secondary-ink);
  transition: background 0.15s;
}
.mui-file::file-selector-button:hover { background: var(--ui-action-bg); }
.mui-file:focus {
  outline: none;
  border-color: var(--ui-action);
  box-shadow: var(--focus-ring);
}

.mui-check,
.mui-radio {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: -3px;
  accent-color: var(--ui-action);
  cursor: pointer;
}
.mui-check:focus-visible,
.mui-radio:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------------------
   10. ボタン（押せるものその2）
   塗りのボタンは1画面に1個。それ以外は枠だけか文字だけにする。
   -------------------------------------------------------------------------- */
.mui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--mui-r-sm);
  background: transparent;
  font: inherit;
  font-size: var(--mui-fs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy-700);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.mui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ▲ 塗るのは --primary だけ。それ以外は枠線・薄い面・文字だけ。
     色は roles.css の役割を参照する。ここに16進数を書かない。 */

/* 主要。この画面で一番重い操作にだけ。1画面に1個。 */
.mui-btn--primary {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-ink-on-fill);
}
.mui-btn--primary:hover:not(:disabled) {
  background: var(--ui-primary-hover);
  border-color: var(--ui-primary-hover);
  color: var(--ui-ink-on-fill);
}

/* 操作。ZOOM参加・提出・切り替え。 */
.mui-btn--action {
  border-color: var(--ui-action);
  color: var(--ui-action);
}
.mui-btn--action:hover:not(:disabled) {
  background: var(--ui-action-bg);
}

/* 副次。戻る・表示切替。 */
.mui-btn--outline {
  border-color: var(--ui-secondary-line);
  color: var(--ui-secondary-ink);
}
.mui-btn--outline:hover:not(:disabled) {
  background: var(--ui-surface-sunken);
  border-color: var(--ui-action);
}

/* 取り消し。押すと元に戻せないもの。**塗らない。** */
.mui-btn--danger {
  border-color: var(--ui-danger-line);
  color: var(--ui-danger-ink);
}
.mui-btn--danger:hover:not(:disabled) {
  background: var(--ui-danger-bg);
}

/* 購入。/purchase/ へ送るもの。ブルー以外はここと取り消しだけ。 */
.mui-btn--buy {
  background: var(--ui-buy-bg);
  border-color: var(--ui-buy-line);
  color: var(--ui-buy-ink);
}
.mui-btn--buy:hover:not(:disabled) {
  background: var(--pink-100);
}

/* 資料。届いているので見てほしいもの。ブルー系だが薄い面を持つ。 */
.mui-btn--material {
  background: var(--ui-material-bg);
  border-color: var(--ui-material-line);
  color: var(--ui-material-ink);
}
.mui-btn--material:hover:not(:disabled) {
  background: var(--sky-100);
}

/* 回遊リンク。面を持たない。 */
.mui-btn--quiet {
  padding: 4px 2px;
  font-size: var(--mui-fs-sm);
  color: var(--ui-link);
}
.mui-btn--quiet:hover:not(:disabled) {
  color: var(--sky-800);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.mui-btn--sm {
  padding: 6px 13px;
  font-size: var(--mui-fs-sm);
}

.mui-btn--block {
  width: 100%;
}

/* ボタンの並び */
.mui-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/* ---------------------------------------------------------------------------
   11. 担当講師
   代講が入ることがあるので、名前だけでなく顔写真も出す。
   囲いは持たせず、薄い地色だけ敷く（囲うとカード＝押せるものに見えるため）。
   -------------------------------------------------------------------------- */
.mui-teacher {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--sky-50);
  border-radius: var(--mui-r-sm);
}

.mui-teacher__figure {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
}

.mui-teacher__photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--neutral-200);
  display: block;
}

/* 写真が未登録の講師用。頭文字の丸で埋める。 */
.mui-teacher__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--sky-200);
  color: var(--navy-700);
  font-size: var(--mui-fs-md);
  font-weight: 700;
}

.mui-teacher__body {
  min-width: 0;
}

.mui-teacher__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--mui-fs-xs);
  font-weight: 600;
  color: var(--sky-700);
}

.mui-teacher__name {
  margin: 1px 0 0;
  font-size: var(--mui-fs-md);
  font-weight: 700;
  color: var(--navy-700);
}

/* 代講かどうかの印は出さない。代講は事務局の都合で決まることで、
   受講生が知りたいのは「今回は誰が教えるのか」だけ。 */

.mui-teacher__link {
  margin-left: auto;
  flex: none;
}

@media (max-width: 480px) {
  .mui-teacher {
    flex-wrap: wrap;
  }
  .mui-teacher__link {
    margin-left: 57px;
  }
}

/* ---------------------------------------------------------------------------
   12. 確定した内容の表示（もう操作できない週など）
   選択肢と同じ形にすると「まだ押せる」と誤解されるので、
   枠を消して薄い地色の面にし、値だけを読ませる。
   -------------------------------------------------------------------------- */
.mui-summary {
  padding: 14px 16px;
  background: var(--neutral-50);
  border-radius: var(--mui-r-sm);
  max-width: 560px;
}

.mui-summary__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--mui-fs);
  font-weight: 700;
  color: var(--navy-700);
}

.mui-summary .mui-meta {
  gap: 12px 28px;
}

/* 値が無い（未回答のまま締め切られた）とき */
.mui-summary--empty .mui-summary__hd {
  color: var(--neutral-500);
}

/* ---------------------------------------------------------------------------
   13. 空状態
   -------------------------------------------------------------------------- */
.mui-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--neutral-400);
  font-size: var(--mui-fs-sm);
}

.mui-empty__icon {
  display: block;
  margin-bottom: 8px;
  font-size: 1.6rem;
  color: var(--neutral-300);
}

/* ---------------------------------------------------------------------------
   14. ユーティリティ
   -------------------------------------------------------------------------- */
/* 画面には出さないが読み上げには残す。fieldset の legend など。
   ds/layout.css の .ds-visually-hidden と同じものだが、あちらは
   会員画面では読み込まないのでここにも置く。 */
.mui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   ここから下は 2026-09-06 追加（デザイン規約の適用）
   各画面に .pv2-tile / .sm2-tile / .ss2-tile / .me2-tile / .mp-tile として
   5重に定義されていたもの、3重だったバッジなどを1本にまとめたもの。
   規約は docs/spec/member-design-standard.md。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   器（ダッシュボードのカード）
   ▲ 影は付けない。罫で分ける。
   -------------------------------------------------------------------------- */
.mui-tile {
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  margin-bottom: var(--ui-stack);
  overflow: hidden;
}

.mui-tile__hd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: var(--ui-pad-card-head);
  background: var(--ui-surface-head);
  border-bottom: 1px solid var(--ui-line);
}

.mui-tile__title {
  font-size: var(--ui-fs-card);
  font-weight: var(--ui-fw-head);
  color: var(--ui-ink-head);
}

.mui-tile__end {
  margin-left: auto;
}

/* タイル右上のリンク（2026-10-07 ユーザー判断・案C）
   ▲ 見に行くもの（詳細・過去分・全件）はこの細い字。色は操作のボタンと同じ。
      語のあとのアイコンは 別のページ＝fa-chevron-right／新しいタブ＝fa-arrow-up-right-from-square。
   ▲ 操作するもの（新規投稿など、その場で開くもの）は `.mui-btn--action.mui-btn--sm`。
      どちらも `.mui-tile__end` と一緒に付ける。1タイルに1つまで。 */
.mui-tile__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  font-size: var(--ui-fs-meta);
  font-weight: 400;
  color: var(--ui-action);
  text-decoration: none;
  white-space: nowrap;
}
.mui-tile__link:hover {
  color: var(--ui-action);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.mui-tile__link > i { font-size: var(--ui-fs-micro); }
/* タイル右上の操作ボタンは管理画面（`.ax-btn--sm`）と同じ小ささ（2026-10-07 ユーザー判断）。
   見出しの高さを変えないため。ほかの場所の `.mui-btn--sm` はそのまま。 */
.mui-tile__end.mui-btn--sm {
  padding: 3px 10px;
  border-width: 1px;
  font-size: var(--ui-fs-micro);
  gap: 5px;
}

.mui-tile__bd {
  padding: var(--ui-pad-card);
  font-size: var(--ui-fs-body);
  color: var(--ui-ink);
}

/* ---------------------------------------------------------------------------
   器の中の一覧
   ▲ **行を1つずつ囲わない。罫で区切る。**
      以前は .sm2-fb-item / .ss2-fb-item / .sm2-help-item が、器の中でさらに
      面＋罫＋角丸を持っていた。行の中の「閲覧」ボタンでもう1枚増えて三重になり、
      名前より囲いのほうが目立っていた。

      いま示したい行だけ薄い面を敷く（.is-on）。囲いは増やさない。

      ▲ **左の縦棒は付けない。** course-shell.css の .cs-side__item--home.is-on と
        同じ判断（2026-09-05）で、淡い面＋縦棒だと色で押しすぎて、
        既定のテンプレートで作った画面のように見える。**面だけで足りる。**
   -------------------------------------------------------------------------- */
.mui-rows {
  display: flex;
  flex-direction: column;
}

.mui-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--ui-line);
  font-size: var(--ui-fs-body);
  min-width: 0;
}
.mui-row:last-child {
  border-bottom: 0;
}

/* 行の主役。長いときは「…」で切る（文言は短く保つこと）。 */
.mui-row__name {
  flex: 1;
  min-width: 0;
  font-weight: var(--ui-fw-strong);
  color: var(--ui-ink-head);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mui-row__sub {
  flex: none;
  font-size: var(--ui-fs-meta);
  color: var(--ui-ink-muted);
  white-space: nowrap;
}

.mui-row__end {
  margin-left: auto;
  flex: none;
}

/* いま開いている・返ってきた行。面だけ。縦棒は付けない。 */
.mui-row.is-on {
  padding-left: 10px;
  padding-right: 8px;
  background: var(--ui-material-bg);
}

/* ---------------------------------------------------------------------------
   バッジ
   種別（何であるか）は塗る。状態（進んでいるか）は塗らない → .mui-status。
   -------------------------------------------------------------------------- */
.mui-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ui-r-ctl);
  font-size: var(--ui-fs-meta);
  font-weight: var(--ui-fw-strong);
  white-space: nowrap;
}

.mui-badge--info { background: var(--sky-100); color: var(--sky-800); }
.mui-badge--buy { background: var(--ui-buy-bg); color: var(--ui-buy-ink); }
.mui-badge--ok { background: var(--ui-ok-bg); color: var(--ui-ok-ink); }
.mui-badge--material { background: var(--ui-material-bg); color: var(--ui-material-ink); }
.mui-badge--quiet { background: var(--neutral-100); color: var(--ui-ink-muted); }

/* 数値だけのバッジ（未読の件数）。**ピル形にするのはここだけ。** */
.mui-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-danger-line);
  color: var(--ui-ink-on-fill);
  font-size: var(--ui-fs-meta);
  font-weight: var(--ui-fw-strong);
}

/* ---------------------------------------------------------------------------
   アイコンだけの小さいボタン（26×26）
   .sm2-fb-icon-btn / .ss2-fb-icon-btn / .me2-icon-btn が同じ値だったもの。
   -------------------------------------------------------------------------- */
.mui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ui-line-strong);
  border-radius: var(--ui-r-ctl);
  background: var(--ui-surface);
  color: var(--ui-ink-muted);
  cursor: pointer;
}
.mui-icon-btn:hover {
  background: var(--ui-surface-sunken);
  color: var(--ui-action);
}

/* ---------------------------------------------------------------------------
   文字の階層
   -------------------------------------------------------------------------- */
.mui-h2 {
  margin: 0 0 12px;
  font-size: var(--ui-fs-page);
  font-weight: var(--ui-fw-head);
  color: var(--ui-ink-head);
}

.mui-lead {
  font-size: var(--ui-fs-lead);
  font-weight: var(--ui-fw-head);
  color: var(--ui-ink-head);
}

.mui-note {
  font-size: var(--ui-fs-meta);
  color: var(--ui-ink-muted);
}

/* ---------------------------------------------------------------------------
   早期継続割引バナー（summit / speaking-summit で共有）
   ▲ **ここ1か所にしか定義しない。** 以前は summit/css/local.css と
      speaking-summit/css/local.css に同じものが2本あり、さらに
      summit/index.php が桃で上書きしていたため、同じ知らせが講座ごとに
      「桃の帯」と「紺の帯」の別物に見えていた。
   ▲ 器は .mui-tile と同じ形（12px・影なし・グラデなし）。
   ▲ **色は購入（--ui-buy-*）。規約どおり。** /purchase/ へ送るものなので。
      🔴 2026-09-06 に一度ブルー（資料・お知らせ）にしたが、**規約から外れるので
      桃に戻した**（ユーザー判断）。
      ▲ **戻したとき、桃と青が混ざって不自然になっていたのを直した。**
        器が桃なのに、割引率のバッジ・「いまなら」・申し込みボタンだけ青、という
        状態だった。**この器の中はブルーを使わない。**
        強弱は「桃で塗る／桃の枠／灰」の3段でつける。
   ▲ 割引率の3段は**バッジ**にした（#40）。読むだけの値だが、
      「いまどの段にいて、次にどこへ落ちるか」を伝える必要がある。
      **矢印で並べ、いまの段だけブルー、過ぎた／これからはグレー。**
      日数はバッジの下に小さい灰で置く（バッジの中に入れると2行になる）。
   ▲ クーポンは読むだけの値。囲わず .mui-meta で置く。
   -------------------------------------------------------------------------- */
/* ▲ 早期継続割引とダブルサミット割の**両方がこの器を使う。** どちらも購入。 */
/* 器の中を淡い桃1枚で塗る（2026-09-19 ユーザー判断）。
   ▲ **見出しの帯を作らない。** 帯を1段濃い桃にしたら、上の紺のキャンペーン帯・白の状況カードと
      合わせて面が増えすぎた。面はひとつにして、**塗るのは申し込みボタンだけ**にする。 */
.erb {
  border-color: var(--ui-buy-line);
  background: var(--ui-buy-bg);
}

.erb .mui-tile__hd {
  background: transparent;
  border-bottom: none;
  padding-bottom: 0;
}

/* 帯が無くなったぶん、本文の上の余白を詰める */
.erb .mui-tile__bd {
  padding-top: 10px;
}

/* この器でいちばん重い行動。**桃で塗るのはここだけ**（面が桃なので枠だけでは沈む） */
.erb__cta .mui-btn--buy {
  background: var(--ui-buy-fill);
  border-color: var(--ui-buy-fill);
  color: var(--ui-buy-on-fill);
}
.erb__cta .mui-btn--buy:hover:not(:disabled) {
  background: var(--ui-buy-fill-hover);
  border-color: var(--ui-buy-fill-hover);
  color: var(--ui-buy-on-fill);
}

.erb .mui-tile__title,
.erb__icon {
  color: var(--ui-buy-ink);
}

/* 「いまなら 10% OFF」。率だけ大きくする（#40）。 */
.erb__now {
  font-size: var(--ui-fs-meta);
  font-weight: var(--ui-fw-strong);
  color: var(--ui-buy-ink);
  white-space: nowrap;
}

.erb__now-rate {
  font-size: var(--ui-fs-lead);
  font-weight: var(--ui-fw-head);
}

.erb__icon {
  font-size: var(--ui-fs-body);
}

/* 本文とボタンを1行に。狭いときだけ折り返す。 */
.erb__bd {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.erb__main {
  flex: 1 1 340px;
  min-width: 0;
}

.erb__title {
  margin: 0 0 2px;
  font-size: var(--ui-fs-card);
  font-weight: var(--ui-fw-head);
  color: var(--ui-ink-head);
}

.erb__lead {
  margin: 0 0 10px;
}

/* 割引率の3段（2026-09-06・#40 で作り直し）。
   バッジに率、その下に日数。矢印でつなぐ。いまの段だけブルー。 */
.erb__tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 6px;
}

.erb__tier {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* 矢印。🔴 **`::before` にしないこと。**
   .erb__tier は `flex-direction: column` なので、擬似要素は「率の上」に積まれて
   段と段のあいだに出ない。**PHP 側で1つの要素として出している。** */
.erb__arrow {
  align-self: flex-start;
  margin-top: 3px;
  font-size: var(--ui-fs-meta);
  font-weight: 500;
  color: var(--ui-line-strong);
}

.erb__tier-rate {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-surface-sunken);
  border: 1px solid var(--ui-line);
  color: var(--ui-ink-muted);
  font-size: var(--ui-fs-meta);
  font-weight: var(--ui-fw-strong);
  white-space: nowrap;
}

.erb__tier-when {
  font-size: var(--ui-fs-meta);
  font-weight: 500;
  color: var(--ui-ink-muted);
  white-space: nowrap;
}

/* いまの段。**塗るのはここ1つだけ。**
   ▲ 器の面が桃になったので、ここは**白で抜く**（桃の上に桃だと沈む）。 */
.erb__tier.is-on .erb__tier-rate {
  background: var(--ui-surface);
  border-color: var(--ui-buy-line);
  color: var(--ui-buy-ink);
  font-weight: var(--ui-fw-head);
}

.erb__tier.is-on .erb__tier-when {
  color: var(--ui-buy-ink);
  font-weight: var(--ui-fw-strong);
}

/* 3つの項目（残り回数・割引率・クーポン）の「値の行」を同じ高さにして、下の小さい行
   （各段の日付・有効期限）の高さをそろえる（2026-10-04）。バッジの高さに合わせて 26px。 */
.erb .mui-meta { align-items: flex-start; }
.erb .mui-meta__value { min-height: 26px; display: flex; align-items: center; }
.erb .erb__tiers { align-items: flex-start; min-height: 0; }
.erb__tier-rate { min-height: 26px; display: inline-flex; align-items: center; box-sizing: border-box; }
.erb__num { font-size: 1.5rem; line-height: 1; margin-right: 1px; }
.erb .erb__copy { width: 26px; height: 26px; min-width: 0; padding: 0; font-size: var(--ui-fs-meta); }
/* 有効期限はコードの下の行。各段の日付（.erb__tier-when）と同じ大きさ・同じ高さ */
.erb__expiry { font-size: var(--ui-fs-meta); font-weight: 500; color: var(--ui-ink-muted); white-space: nowrap; margin-top: 2px; }

/* クーポンコード。等幅で読み違えないように。囲いは持たせない。 */
.erb__coupon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.erb__code {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--ui-fs-card);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ui-ink-head);
}

/* 割引前の値段。ダブルサミット割で使う。 */
.erb__old {
  margin-right: 0.4em;
  font-weight: 600;
  color: var(--ui-ink-muted);
  text-decoration: line-through;
}

.erb__cta {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 600px) {
  .erb__bd {
    align-items: stretch;
  }
  .erb__cta {
    margin-left: 0;
    width: 100%;
  }
  .erb__cta .mui-btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   フォーカスリング（Step 3・2026-09-06）

   ▲ **見た目の統一ではなく実害。** 着手前は5画面の入力欄10箇所のうち、
      フォーカスリングを持っていたのは2箇所だけだった。キーボードで操作している人には
      いまどこにいるのかが分からない。
   ▲ `.mui-input` `.mui-textarea` `.mui-select` に寄せるのが本筋だが、画面ごとの
      `<select>` や素の `<input>` が残っているので、**会員画面の枠（`.cs`）の中は
      すべてに効かせる**。`:focus-visible` なのでマウス操作では出ない。
      個別のクラスがリングを持っていればそちらが勝つ（この規則は後ろに置かない）。
   -------------------------------------------------------------------------- */
.cs input:focus-visible,
.cs select:focus-visible,
.cs textarea:focus-visible,
.cs [contenteditable]:focus-visible {
  outline: none;
  border-color: var(--ui-action);
  box-shadow: var(--focus-ring);
}

/* [hidden] は display を持つ要素に負けるので、会員画面では必ず効かせる。 */
[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------------------------
   生徒の画面のプレビューの帯（`?as=<student_id>`）

   ▲ **講師・管理者だけに出る「見るだけ」の帯。**
      `/private/`（2026-09-05）と `/myessay/`（2026-09-06・/admin/bugfix/ #30）で
      同じ形を使うので、画面ごとのCSSではなくここに置く。**接頭辞を増やさないこと。**
   ------------------------------------------------------------------------ */
.mui-preview-bar,
.pv2-preview-bar,
.me2-preview-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 8px 14px;
  background: var(--ui-surface-sunken); border: 1px dashed var(--ui-line-strong); border-radius: var(--ui-r-ctl);
  font-size: var(--ui-fs-body); color: var(--ui-ink-muted);
}
.mui-preview-bar > i,
.pv2-preview-bar > i,
.me2-preview-bar > i { color: var(--ui-link); }
.mui-preview-bar.is-on,
.pv2-preview-bar.is-on,
.me2-preview-bar.is-on { background: var(--ui-material-bg); border-color: var(--ui-material-line); color: var(--ui-material-ink); }
.mui-preview-bar.is-on > i,
.pv2-preview-bar.is-on > i,
.me2-preview-bar.is-on > i { color: var(--ui-material-ink); }
.mui-preview-bar select,
.pv2-preview-bar select,
.me2-preview-bar select {
  padding: 4px 8px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-r-ctl);
  font-size: var(--ui-fs-body); color: var(--ui-ink); background: var(--ui-surface); max-width: 260px;
}
.mui-preview-bar__off,
.pv2-preview-bar__off,
.me2-preview-bar__off {
  margin-left: auto; font-size: var(--ui-fs-meta); font-weight: 700;
  color: var(--ui-buy-ink); text-decoration: none;
}
.mui-preview-bar__off:hover,
.pv2-preview-bar__off:hover,
.me2-preview-bar__off:hover { text-decoration: underline; color: var(--ui-buy-ink); }

/* inert が効かないブラウザ向けの保険
   ▲ .priv-idx は**管理画面**（/admin/private/ の講師プレビュー・2026-09-06）。
      帯と同じで、同じものを管理画面用に作り直さない。 */
.pv2-page[inert],
.me2-page[inert],
.priv-idx[inert] { pointer-events: none; opacity: .97; }

/* ── 継続割引の細い帯（2026-10-04・プライベート／サミット共通。もとは private/css/dashboard.css にあった）──────────────────────────────
   濃い桃の地に白抜き。購入色（--ui-buy-fill）。細くするため1行・余白は小さめ。
   押すと受講情報のクーポンへ。×はセッション内だけ隠す（renewal-strip.php）。 */
.rstrip {
  display: flex; align-items: stretch;
  background: var(--ui-buy-fill, #eb4878);
  color: var(--neutral-0, #fff); margin: 0;   /* ヘッダの上に全幅で置く（JS で body 先頭へ移す） */
}
.rstrip[hidden] { display: none; }
.rstrip__link {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 6px 12px; color: var(--neutral-0, #fff); text-decoration: none; font-size: var(--ui-fs-body); line-height: 1.4;
}
.rstrip__link:hover { color: var(--neutral-0, #fff); background: var(--ui-buy-fill-hover, #d82d60); }
.rstrip__txt b { font-size: var(--ui-fs-card); }
.rstrip__txt small { margin-left: 8px; opacity: .9; font-size: var(--ui-fs-meta); }
.rstrip__cta { white-space: nowrap; font-weight: 700; font-size: var(--ui-fs-body); border-left: 1px solid rgba(255,255,255,.5); padding-left: 14px; }
.rstrip__cta i { font-size: var(--ui-fs-micro); margin-left: 2px; }
.rstrip__x { background: none; border: 0; color: var(--neutral-0, #fff); padding: 0 12px; cursor: pointer; font-size: var(--ui-fs-card); opacity: .85; }
.rstrip__x:hover { opacity: 1; }
/* スマホは1行に収める（2026-10-04）。「継続のお申し込みで、」と「クーポンを見る」の字は畳み、› だけ残す。帯全体が押せる */
@media (max-width: 600px) {
  .rstrip__link { gap: 8px; justify-content: flex-start; padding: 7px 4px 7px 12px; font-size: var(--ui-fs-body); }
  .rstrip__txt { flex: 1; min-width: 0; }
  .rstrip__txt small { margin-left: 6px; font-size: var(--ui-fs-meta); }
  .rstrip__long, .rstrip__cta-t { display: none; }
  .rstrip__cta { border-left: 0; padding-left: 0; }
  .rstrip__x { padding: 0 10px; }
}