/* 最終更新: 2026-07-27 02:08:45 JST（PORTrip へ改称。ヘッダコメントのシステム名のみ変更＝セレクタ・値・DOM前提は不変） */
/* ============================================================
   SP Design System — PORTrip 学生・教職員UI共通CSS
   出典: 設計/07_画面設計.md §3 を基点に、_newsapps/apple.design.md（Apple公式サイト仕様）
         準拠へ値を改訂（2026-07-26。§3-1 の旧値からの変更点は検証レポート
         2026-07-26_モックApple準拠改修/fix-mock.md 参照。設計書§3は追って改訂）
   方針: アップル風=装飾より余白・タイポ階層・1画面1目的（iOS insetGrouped風）
         影はオーバーレイ（モーダル/トースト）のみ。カードは hairline リングで分離
   依存: 外部フォント・外部画像・CDNなし（システムフォントのみ）
   ============================================================ */

/* ---------- §3-1 デザイントークン（apple.design.md 準拠・2026-07-26 改訂） ---------- */
:root{
  /* アクセント（大学設定で差し替え可。既定=Apple Action Blue） */
  --sp-accent:#0066CC;        /* 主ボタン・リンク・選択状態 */
  --sp-accent-deep:#0052A3;   /* hover/active */
  --sp-accent-soft:#EAF2FB;   /* 選択背景・バッジ地 */
  --sp-focus:#0071E3;         /* キーボードフォーカスリング専用（Apple focus blue） */
  /* ニュートラル */
  --sp-bg:#F5F5F7;            /* 画面地（Apple parchment） */
  --sp-surface:#FFFFFF;       /* カード地 */
  --sp-line:#E0E0E0;          /* hairline（外周・入力枠） */
  --sp-line-soft:#F0F0F0;     /* カード内の行区切り（divider-soft） */
  --sp-text:#1D1D1F;          /* 本文（Apple ink） */
  --sp-text-soft:#6E6E73;     /* 補助テキスト（AA確保） */
  --sp-text-dim:#86868B;      /* プレースホルダ専用（可読本文に使用禁止） */
  /* 状態色（意味色。装飾に流用しない。文字は必ず deep 側を使う） */
  --sp-success:#16A34A; --sp-warning:#D97706; --sp-danger:#DC2626; --sp-info:#0891B2;
  /* 形状 */
  --sp-radius:12px;           /* カード */
  --sp-radius-sm:8px;         /* 入力 */
  --sp-radius-full:999px;     /* ボタン(ピル)・バッジ */
  --sp-shadow:0 0 0 1px rgba(0,0,0,.08);  /* カード=hairlineリング（ドロップ影廃止） */
  --sp-shadow-lg:0 4px 12px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.10); /* モーダル/トーストのみ */

  /* 派生値（実装補助。トークンの変更ではなく追加）
     バッジ等の小さい文字はAAコントラスト確保のため濃色文字＋淡色地を使う */
  --sp-success-deep:#15803D; --sp-success-soft:#EAF6EE;
  --sp-warning-deep:#A8490B; --sp-warning-soft:#FBF1E1;
  --sp-danger-deep:#B91C1C;  --sp-danger-soft:#FCEAEA;
  --sp-info-deep:#0E7490;    --sp-info-soft:#E5F4F8;
  --sp-neutral-soft:#F1F1F3;
  --sp-neutral-deep:#66666B;  /* ニュートラル地(#F1F1F3)上の小さい文字用（AA 5.06） */
  --sp-font:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
}

/* ---------- ベース ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none !important}
body{
  margin:0;
  font-family:var(--sp-font);
  font-size:15px;line-height:1.6;
  color:var(--sp-text);
  background:var(--sp-bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--sp-accent);text-decoration:none}
a:hover{color:var(--sp-accent-deep);text-decoration:underline}
:focus-visible{outline:2px solid var(--sp-focus);outline-offset:2px;border-radius:4px}

/* ---------- タイポグラフィ（§3-1 表。ウェイト梯子=400/600/700。500は使わない） ---------- */
.sp-title{font-size:22px;line-height:1.35;font-weight:600;letter-spacing:-0.01em;margin:0}
.sp-section-title{font-size:17px;line-height:1.45;font-weight:600;letter-spacing:-0.01em;margin:0}
.sp-body{font-size:15px;line-height:1.6;font-weight:400}
.sp-sub{font-size:13px;line-height:1.5;font-weight:400;color:var(--sp-text-soft)}
.sp-caption{font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft)}
.sp-num{font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- レイアウト基本（余白=4pxスケール。画面外周モバイル16px/PC24px） ---------- */
.sp-page{padding:16px 16px 96px}                 /* 96px=下部タブバー分の逃げ */
.sp-stack>*+*{margin-top:24px}                    /* セクション間24px */
.sp-stack-sm>*+*{margin-top:8px}                  /* 関連要素8px */

/* ---------- アプリバー（画面上部。学生系=戻るリンクのみ・パンくず無し） ---------- */
.sp-appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:8px;
  min-height:52px;padding:8px 16px;
  background:rgba(245,245,247,.92);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--sp-line);
}
.sp-appbar .sp-title{font-size:17px;line-height:1.35;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-back{
  display:inline-flex;align-items:center;gap:2px;
  min-width:44px;min-height:44px;padding:0 4px;margin-left:-8px;
  color:var(--sp-accent);font-size:15px;background:none;border:none;cursor:pointer;
  border-radius:var(--sp-radius-sm);
}
.sp-back:hover{color:var(--sp-accent-deep)}

/* ---------- カード .sp-card（§3-2） ---------- */
.sp-card{
  background:var(--sp-surface);
  border-radius:var(--sp-radius);
  box-shadow:var(--sp-shadow);
}
.sp-card+.sp-card{margin-top:16px}
.sp-card-head{
  display:flex;align-items:center;gap:8px;
  padding:14px 16px 0;
}
.sp-card-head .sp-section-title{flex:1;min-width:0}
.sp-card-head-action{margin-left:auto;flex:none}
.sp-card-body{padding:12px 16px 16px}
.sp-card-foot{padding:0 16px 16px}
.sp-card-note{padding:0 16px 14px;font-size:11px;line-height:1.5;color:var(--sp-text-soft)}
/* タップ可能カード=全域リンク+右端シェブロン */
.sp-card-link{
  display:block;color:inherit;text-decoration:none;position:relative;
  transition:background .15s ease;
}
.sp-card-link:hover{background:#FAFAFC;text-decoration:none;color:inherit}

/* ---------- リスト .sp-list（iOS insetGrouped風。外周線なし・行間区切り線） ---------- */
.sp-list{list-style:none;margin:0;padding:0}
.sp-list-item{
  display:flex;align-items:center;gap:12px;
  min-height:44px;padding:12px 16px;
  border-top:1px solid var(--sp-line-soft);
}
.sp-list>.sp-list-item:first-child,
.sp-list>li:first-child>.sp-list-item{border-top:none}
.sp-list-icon{flex:none;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sp-accent-soft);color:var(--sp-accent)}
.sp-list-main{flex:1;min-width:0}
.sp-list-title{display:block;font-size:15px;line-height:1.45;margin:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-list-sub{font-size:13px;line-height:1.5;color:var(--sp-text-soft);margin:2px 0 0}
.sp-list-end{flex:none;display:flex;align-items:center;gap:6px;
  font-size:13px;color:var(--sp-text-soft)}
/* 行全体をタップ可能に */
a.sp-list-item,button.sp-list-item{
  width:100%;text-align:left;background:none;border-top:1px solid var(--sp-line-soft);
  border-left:none;border-right:none;border-bottom:none;
  font:inherit;color:inherit;cursor:pointer;text-decoration:none;
  transition:background .15s ease;
}
a.sp-list-item:hover,button.sp-list-item:hover{background:#FAFAFC;text-decoration:none;color:inherit}
a.sp-list-item:active,button.sp-list-item:active{background:var(--sp-neutral-soft)}
.sp-chev{flex:none;color:var(--sp-text-dim)}

/* ---------- フォーム（§3-2 .sp-field / .sp-input） ---------- */
.sp-field{margin:0 0 16px}
.sp-field:last-child{margin-bottom:0}
.sp-label{
  display:flex;align-items:center;gap:6px;
  font-size:13px;line-height:1.5;font-weight:600;color:var(--sp-text);
  margin-bottom:6px;
}
.sp-req{
  display:inline-block;font-size:11px;line-height:1;font-weight:600;
  color:var(--sp-danger-deep);background:var(--sp-danger-soft);
  border-radius:var(--sp-radius-full);padding:3px 8px;
}
.sp-opt{
  display:inline-block;font-size:11px;line-height:1;font-weight:600;
  color:var(--sp-neutral-deep);background:var(--sp-neutral-soft);
  border-radius:var(--sp-radius-full);padding:3px 8px;
}
.sp-input,.sp-select,.sp-textarea{
  display:block;width:100%;
  min-height:44px;padding:10px 12px;
  font:inherit;font-size:15px;color:var(--sp-text);
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.sp-textarea{min-height:88px;resize:vertical}
.sp-input::placeholder,.sp-textarea::placeholder{color:var(--sp-text-dim)}
.sp-input:focus,.sp-select:focus,.sp-textarea:focus{
  outline:none;border-color:var(--sp-focus);
  box-shadow:0 0 0 2px var(--sp-accent-soft),0 0 0 3px var(--sp-focus);
}
.sp-select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:36px;
}
.sp-error{font-size:13px;color:var(--sp-danger-deep);margin:6px 0 0}
.sp-help{font-size:11px;line-height:1.5;color:var(--sp-text-soft);margin:6px 0 0}
/* インライン編集（タップでその場編集。枠は控えめ、focusで明確化） */
.sp-inline-edit{
  border-color:transparent;background:transparent;padding-left:0;padding-right:0;
}
.sp-inline-edit:hover{background:#FAFAFC}
.sp-inline-edit:focus{background:var(--sp-surface);padding-left:12px;padding-right:12px}
/* 自動保存状態（パネルヘッダに常時表示） */
.sp-savestate{font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.sp-savestate.is-saving{color:var(--sp-text-dim)}
.sp-savestate.is-saved{color:var(--sp-success-deep)}
/* 読取専用表示（禁止感を出さないプレーン表示） */
.sp-readonly-quote{
  border-left:3px solid var(--sp-line);
  padding:2px 0 2px 12px;margin:8px 0 0;
  color:var(--sp-text);
}
.sp-readonly-meta{font-size:13px;color:var(--sp-text-soft);margin-top:6px}

/* ---------- ボタン ---------- */
.sp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;padding:10px 18px;
  font:inherit;font-size:15px;font-weight:600;
  border-radius:var(--sp-radius-full);
  border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;
  -webkit-tap-highlight-color:transparent;
}
.sp-btn:active{transform:scale(.97)}
.sp-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.sp-btn-primary{background:var(--sp-accent);color:#fff}
.sp-btn-primary:hover:not(:disabled){background:var(--sp-accent-deep)}
.sp-btn-secondary{background:var(--sp-surface);color:var(--sp-accent);border-color:var(--sp-line)}
.sp-btn-secondary:hover:not(:disabled){background:var(--sp-accent-soft);border-color:var(--sp-accent)}
.sp-btn-danger{background:var(--sp-danger);color:#fff}
.sp-btn-danger:hover:not(:disabled){background:var(--sp-danger-deep)}
.sp-btn-plain{background:none;color:var(--sp-accent);border:none;padding:10px 8px}
.sp-btn-plain:hover:not(:disabled){color:var(--sp-accent-deep);background:var(--sp-accent-soft)}
.sp-btn-block{display:flex;width:100%}
.sp-btn-sm{min-height:36px;padding:6px 12px;font-size:13px}

/* ---------- タブ .sp-tabs（下線式・横スクロール可・端をグラデーション示唆） ---------- */
.sp-tabs-wrap{position:relative;background:var(--sp-bg)}
.sp-tabs-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:1px;width:28px;
  background:linear-gradient(to left,var(--sp-bg),rgba(245,245,247,0));
  pointer-events:none;
}
.sp-tabs{
  display:flex;gap:4px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-bottom:1px solid var(--sp-line);
  padding:0 12px;
}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{
  flex:none;
  min-height:44px;padding:10px 12px;
  font:inherit;font-size:15px;font-weight:400;color:var(--sp-text-soft);
  background:none;border:none;border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease;
  margin-bottom:-1px;
}
.sp-tab:hover{color:var(--sp-text)}
.sp-tab[aria-selected="true"],.sp-tab.is-active{
  color:var(--sp-accent);font-weight:600;
  border-bottom-color:var(--sp-accent);
}

/* ---------- バッジ .sp-badge（状態語彙は全画面統一） ----------
   申請系: 下書き/申請中/差戻し/承認済/否認
   課題系: 未提出/提出済/採点済   出欠系: 出席/遅刻/欠席/公欠 */
.sp-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;line-height:1.4;font-weight:600;
  padding:3px 10px;border-radius:var(--sp-radius-full);
  background:var(--sp-neutral-soft);color:var(--sp-neutral-deep);
  white-space:nowrap;
}
.sp-badge.is-accent{background:var(--sp-accent-soft);color:var(--sp-accent-deep)}
.sp-badge.is-success{background:var(--sp-success-soft);color:var(--sp-success-deep)}
.sp-badge.is-warning{background:var(--sp-warning-soft);color:var(--sp-warning-deep)}
.sp-badge.is-danger{background:var(--sp-danger-soft);color:var(--sp-danger-deep)}
.sp-badge.is-info{background:var(--sp-info-soft);color:var(--sp-info-deep)}

/* ---------- チャート .sp-chart（数値ラベル併記必須・色だけに依存しない） ---------- */
.sp-chart{display:block;margin:0 auto}
.sp-chart-legend{
  display:flex;flex-wrap:wrap;gap:8px 16px;
  margin:12px 0 0;padding:0;list-style:none;
  font-size:13px;color:var(--sp-text-soft);
}
.sp-chart-legend li{display:flex;align-items:center;gap:6px}
.sp-swatch{width:12px;height:12px;border-radius:3px;flex:none}
.sp-swatch.is-line{height:3px;border-radius:2px;width:16px}

/* ---------- 表（数値表・出欠集計等） ---------- */
.sp-table-wrap{overflow-x:auto}
.sp-table{width:100%;border-collapse:collapse;font-size:13px}
.sp-table th{
  font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft);
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--sp-line-soft);
  white-space:nowrap;
}
.sp-table td{padding:9px 10px;border-bottom:1px solid var(--sp-line-soft)}
.sp-table tr:last-child td{border-bottom:none}
.sp-table .sp-cell-num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- 空状態（イラストなし・1行説明+主アクション） ---------- */
.sp-empty{
  text-align:center;padding:32px 16px;
}
.sp-empty-text{font-size:13px;color:var(--sp-text-soft);margin:0 0 16px}

/* ---------- トースト（モバイル=画面下部/PC=右下。自動保存確認・軽微な成功通知） ---------- */
.sp-toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,8px);
  max-width:calc(100% - 32px);
  background:#1D1D1F;color:#fff;
  font-size:13px;line-height:1.5;
  padding:10px 16px;border-radius:10px;
  box-shadow:var(--sp-shadow-lg);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  z-index:80;
}
.sp-toast.is-show{opacity:1;transform:translate(-50%,0)}

/* ---------- モーダル/シート（PC=中央560px・モバイル=下からシート） ---------- */
.sp-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.4);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:90;
}
.sp-modal-overlay.is-open{opacity:1;pointer-events:auto}
.sp-modal{
  width:100%;max-width:560px;max-height:85vh;overflow-y:auto;
  background:var(--sp-surface);
  border-radius:var(--sp-radius) var(--sp-radius) 0 0;
  box-shadow:var(--sp-shadow-lg);
  transform:translateY(16px);transition:transform .2s ease;
}
.sp-modal-overlay.is-open .sp-modal{transform:translateY(0)}
.sp-modal-head{display:flex;align-items:center;gap:8px;padding:16px 16px 0}
.sp-modal-body{padding:12px 16px 16px}
.sp-modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:0 16px 16px}
@media (min-width:600px){
  .sp-modal-overlay{align-items:center}
  .sp-modal{border-radius:var(--sp-radius)}
}

/* ---------- 下部タブバー（学生ナビ5項目固定・モバイル） ---------- */
.sp-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--sp-line);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.sp-tabbar-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;padding:6px 2px;
  font:inherit;font-size:10px;line-height:1.2;font-weight:600;
  color:var(--sp-text-soft);
  background:none;border:none;cursor:pointer;
  transition:color .15s ease;position:relative;
  -webkit-tap-highlight-color:transparent;
}
.sp-tabbar-item svg{width:24px;height:24px}
.sp-tabbar-item:hover{color:var(--sp-text)}
.sp-tabbar-item[aria-current="page"],.sp-tabbar-item.is-active{color:var(--sp-accent)}
.sp-tabbar-dot{
  position:absolute;top:6px;right:calc(50% - 16px);
  min-width:16px;height:16px;padding:0 4px;
  background:var(--sp-danger);color:#fff;
  font-size:10px;line-height:16px;font-weight:600;text-align:center;
  border-radius:var(--sp-radius-full);
}

/* ---------- 通知ベル・未読 ---------- */
.sp-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--sp-text);background:none;border:none;cursor:pointer;
  border-radius:var(--sp-radius-full)}
.sp-bell:hover{background:var(--sp-neutral-soft)}
.sp-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--sp-accent);flex:none}
.sp-read .sp-unread-dot{background:transparent}
.sp-read .sp-list-title{color:var(--sp-text-soft);font-weight:400}

/* ---------- ドロップ枠（課題提出・証明書類。点線=破線ボーダー） ---------- */
.sp-dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:2px dashed var(--sp-line);
  border-radius:var(--sp-radius);
  background:var(--sp-bg);
  padding:24px 16px;text-align:center;
  color:var(--sp-text-soft);font-size:13px;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
  width:100%;font-family:inherit;
}
.sp-dropzone:hover,.sp-dropzone:focus-visible{
  border-color:var(--sp-accent);background:var(--sp-accent-soft);
}
.sp-dropzone strong{color:var(--sp-accent);font-weight:600;font-size:15px}
.sp-dropzone .sp-caption{color:var(--sp-text-dim)}

/* ---------- 添付ファイル行 ---------- */
.sp-attachment{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 14px;
  background:var(--sp-neutral-soft);
  border-radius:var(--sp-radius-sm);
  font-size:13px;color:var(--sp-text);
  border:none;cursor:pointer;font-family:inherit;
  transition:background .15s ease;
}
.sp-attachment:hover{background:var(--sp-line)}
.sp-attachment svg{color:var(--sp-text-soft);flex:none}

/* ---------- 小テスト用 ---------- */
.sp-quiz-head{
  position:sticky;top:0;z-index:25;
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  background:var(--sp-surface);
  border-bottom:1px solid var(--sp-line);
}
.sp-quiz-timer{
  margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;
  color:var(--sp-warning-deep);background:var(--sp-warning-soft);
  padding:6px 12px;border-radius:var(--sp-radius-full);
}
.sp-choice{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:12px 16px;
  background:var(--sp-surface);
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.sp-choice+.sp-choice{margin-top:8px}
.sp-choice:hover{border-color:var(--sp-text-dim)}
.sp-choice input{width:20px;height:20px;accent-color:var(--sp-accent);flex:none;margin:0}
.sp-choice:has(input:checked){border-color:var(--sp-accent);background:var(--sp-accent-soft)}
.sp-choice:has(input:focus-visible){box-shadow:0 0 0 2px var(--sp-accent)}
/* 解答状況ナビ（済=塗り・現在=枠） */
.sp-quiz-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sp-quiz-nav button{
  width:36px;height:36px;
  font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--sp-text-soft);
  background:var(--sp-surface);border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-full);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.sp-quiz-nav button:hover{border-color:var(--sp-text-dim)}
.sp-quiz-nav button.is-done{background:var(--sp-accent);border-color:var(--sp-accent);color:#fff}
.sp-quiz-nav button.is-current{border-color:var(--sp-accent);color:var(--sp-accent-deep);border-width:2px}
.sp-quiz-nav button.is-done.is-current{background:var(--sp-accent-deep);border-color:var(--sp-accent-deep);color:#fff}

/* ---------- 出欠打刻コード入力 ---------- */
.sp-code-input{
  width:100%;max-width:260px;margin:0 auto;display:block;
  font-family:var(--sp-font);
  font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.45em;text-align:center;
  min-height:56px;padding:8px 0 8px .45em;
  border:1px solid var(--sp-line);border-radius:var(--sp-radius-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.sp-code-input:focus{
  outline:none;border-color:var(--sp-focus);
  box-shadow:0 0 0 2px var(--sp-accent-soft),0 0 0 3px var(--sp-focus);
}
/* 成功状態 */
.sp-result{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-radius:var(--sp-radius);
  background:var(--sp-success-soft);color:var(--sp-success-deep);
  font-weight:600;
}
.sp-result svg{flex:none}

/* ---------- 集計サマリー（出席12 遅刻1 欠席0 等の横並び数値） ---------- */
.sp-statrow{display:flex;gap:8px}
.sp-stat{
  flex:1;text-align:center;
  background:var(--sp-bg);border-radius:var(--sp-radius-sm);
  padding:10px 4px;
}
.sp-stat dt{font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft);margin:0}
.sp-stat dd{font-size:20px;line-height:1.3;font-weight:700;font-variant-numeric:tabular-nums;margin:2px 0 0}

/* ---------- ステップ表示（申請の進行状況） ---------- */
.sp-steps{list-style:none;margin:0;padding:0}
.sp-steps li{
  position:relative;padding:0 0 20px 28px;font-size:13px;color:var(--sp-text-soft);
}
.sp-steps li::before{
  content:"";position:absolute;left:7px;top:20px;bottom:0;width:2px;background:var(--sp-line);
}
.sp-steps li:last-child{padding-bottom:0}
.sp-steps li:last-child::before{display:none}
.sp-steps li::after{
  content:"";position:absolute;left:0;top:3px;width:12px;height:12px;
  border-radius:50%;background:var(--sp-surface);border:2px solid var(--sp-line);
}
.sp-steps li.is-done::after{background:var(--sp-success);border-color:var(--sp-success)}
.sp-steps li.is-current{color:var(--sp-text);font-weight:600}
.sp-steps li.is-current::after{border-color:var(--sp-accent);background:var(--sp-accent-soft)}

/* ---------- §6 レスポンシブ（モバイルファースト） ----------
   〜599px : 1カラム+下部タブバー（既定）
   600〜899px : 1カラム広め
   900px〜 : 左サイドバー+本文最大720px（タブバー非表示） */
@media (min-width:600px){
  .sp-page{padding:24px 24px 96px}
  .sp-toast{left:auto;right:24px;transform:translateY(8px)}
  .sp-toast.is-show{transform:translateY(0)}
  .sp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
  .sp-form-grid .sp-field-full{grid-column:1 / -1}
}
@media (min-width:900px){
  .sp-tabbar{display:none}
  .sp-page{padding-bottom:48px}
  .sp-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
  .sp-sidenav{border-right:1px solid var(--sp-line);background:var(--sp-surface);padding:16px 8px}
  .sp-main{max-width:720px;margin:0 auto;width:100%}
}

/* ---------- アクセシビリティ補助 ---------- */
.sp-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============================================================
   教職員PCレイアウト（spf- 接頭辞。staff-mock 向け追記分）
   出典: 07_画面設計 §2-3（左サイドバー7項目・パンくず全画面）・§5-7
   注意: 既存の sp- 定義・トークン値は変更していない（追記のみ）
   ============================================================ */
.spf-shell{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:720px;background:var(--sp-bg)}
.spf-sidenav{background:var(--sp-surface);border-right:1px solid var(--sp-line);padding:16px 10px;display:flex;flex-direction:column;gap:2px}
.spf-brand{padding:6px 10px 14px;border-bottom:1px solid var(--sp-line);margin-bottom:10px}
.spf-brand strong{display:block;font-size:14px;line-height:1.4}
.spf-brand span{display:block;font-size:11px;color:var(--sp-text-soft);margin-top:2px}
.spf-navitem{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:8px 12px;width:100%;text-align:left;
  border-radius:var(--sp-radius-sm);
  font:inherit;font-size:14px;font-weight:400;color:var(--sp-text-soft);
  background:none;border:none;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.spf-navitem:hover{background:var(--sp-neutral-soft);color:var(--sp-text)}
.spf-navitem.is-active{background:var(--sp-accent-soft);color:var(--sp-accent-deep);font-weight:600}
.spf-navitem svg{flex:none}
.spf-count{
  margin-left:auto;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--sp-radius-full);
  background:var(--sp-danger);color:#fff;
  font-size:11px;line-height:20px;font-weight:600;text-align:center;flex:none;
}
.spf-content{min-width:0;display:flex;flex-direction:column}
.spf-topbar{
  display:flex;align-items:center;gap:16px;
  min-height:56px;padding:8px 24px;
  background:rgba(245,245,247,.92);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--sp-line);
  position:sticky;top:0;z-index:20;
}
.spf-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--sp-text-soft);min-width:0}
.spf-crumb-sep{color:var(--sp-text-dim)}
.spf-crumb .is-current{color:var(--sp-text);font-weight:600}
.spf-user{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--sp-text);
  background:var(--sp-surface);border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-full);padding:6px 14px;white-space:nowrap;flex:none;
}
.spf-body{padding:24px;width:100%;max-width:1080px}
.spf-pagehead{display:flex;align-items:flex-start;gap:16px;margin:0 0 20px}
.spf-pagehead .sp-title{flex:1;min-width:0}
.spf-pagehead-actions{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.spf-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.spf-grid2 .sp-card+.sp-card{margin-top:0}
.spf-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.spf-cols .sp-card+.sp-card{margin-top:0}
/* 学生カルテ（§5-7: 左ペイン+右タブ群） */
.spf-karte{display:grid;grid-template-columns:236px minmax(0,1fr);gap:16px;align-items:start}
.spf-avatar{
  width:96px;height:96px;border-radius:50%;
  background:var(--sp-accent-soft);color:var(--sp-accent-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:700;margin:0 auto;
}
/* 検索フォームの横並び */
.spf-formrow{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.spf-formrow .sp-field{margin:0;flex:1 1 150px;min-width:140px}
/* テーブル行リンク・行状態 */
.spf-rowlink{cursor:pointer;transition:background .15s ease}
.spf-rowlink:hover{background:#FAFAFC}
.spf-row-warn td{background:var(--sp-warning-soft)}
.spf-flag{color:var(--sp-danger);font-weight:700}
/* 打刻コード大表示 */
.spf-code-display{
  font-size:56px;font-weight:700;letter-spacing:.3em;
  font-variant-numeric:tabular-nums;text-align:center;
  padding:8px 0 8px .3em;color:var(--sp-text);
}
/* 表セル内のコンパクトなセレクト（出欠手動修正・ルーブリック） */
.spf-cell-select{min-height:36px;padding:4px 30px 4px 8px;font-size:13px;width:auto;display:inline-block}
/* 注記ボックス */
.spf-note{
  display:flex;gap:8px;align-items:flex-start;
  font-size:12px;line-height:1.6;color:var(--sp-neutral-deep);
  background:var(--sp-neutral-soft);
  border-radius:var(--sp-radius-sm);padding:10px 12px;
}
.spf-note.is-danger{background:var(--sp-danger-soft);color:var(--sp-danger-deep)}
.spf-note.is-info{background:var(--sp-info-soft);color:var(--sp-info-deep)}
.spf-note svg{flex:none;margin-top:2px}
/* 申請内容などのキー・バリュー表示 */
.spf-kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 16px;font-size:13px;margin:0}
.spf-kv dt{color:var(--sp-text-soft);font-weight:600}
.spf-kv dd{margin:0;color:var(--sp-text)}
/* 幅広モーダル（ULモーダル等） */
.sp-modal.spf-modal-lg{max-width:840px}
/* 狭幅時の退避（教職員はPC前提。閲覧可能であれば足りる） */
@media (max-width:900px){
  .spf-shell{grid-template-columns:1fr;min-height:0}
  .spf-sidenav{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--sp-line)}
  .spf-brand{display:none}
  .spf-navitem{width:auto}
  .spf-grid2,.spf-cols,.spf-karte{grid-template-columns:1fr}
  .spf-body{padding:16px}
}

/* ============================================================
   学生PC左サイドバー（student-mock 向け追記分）
   出典: 07_画面設計 §2-2（学生ナビ5項目固定・モバイル=下部タブバー・PC=左サイドバー）
         ・§4（学生 900px〜=左サイドバー+本文最大720px）
   前提DOM: §6 の既存900pxルールどおり .sp-shell > .sp-sidenav + .sp-main。
   項目の見た目は教職員サイドバーの spf-brand / spf-navitem / spf-count を共用する
   （新規の装飾クラスは作らない）。既存の sp- / spf- 定義・トークン値は変更していない（追記のみ）
   ============================================================ */
.sp-sidenav{display:none}
@media (min-width:900px){
  .sp-sidenav{display:flex;flex-direction:column;gap:2px}
  /* 900px ちょうどでは spf- 側の max-width:900px 退避ルールと重なるため、
     学生サイドバー内は縦積みの見た目を明示的に維持する */
  .sp-sidenav .spf-navitem{width:100%}
  .sp-sidenav .spf-brand{display:block}
}


/* ============================================================
   ここから下は F1「学生が楽しんで使えるUI」拡張の追記ブロック（gr- 接頭辞）
   追記日時: 2026-08-01 15:27:49 JST ／ 追記元:
     ① 検証レポート/2026-08-01_学生側モックF1/fragments/00_gr-tokens.css（全文）
     ② 検証レポート/2026-08-01_学生側モックF1/14_ロードマップ.md §4（S-48/S-49 画面固有CSS）
   上の既存653行は 1 文字も変更していない（追記のみ）。
   ============================================================ */

/* 最終更新: 2026-08-01 14:42:37 JST */
/* ============================================================
   PORTrip 学生側「楽しい学生UI」拡張（gr- 接頭辞 = growth）
   出典: 新仕様PDF 図1（5大モジュール構成図）・図2（成長サイクル）
         ／ F0裁定 D-1（閲覧は学生本人のみ・fail-close）D-4（5タブ維持）
            D-5（感情=共通辞書＋学生カスタムの2層）
   位置づけ: モック/sp.css の【末尾に追記】する差分。
   ------------------------------------------------------------
   【絶対条件】既存の sp- 定義・--sp-* トークン値は 1 文字も変更していない。
   本ファイルは (1) :root への **新規変数の追加のみ** (2) .gr- 接頭辞の
   新規セレクタのみ で構成する。既存クラスへの上書き規則は 1 件も書かない。
   （前例: sp.css 末尾の spf- ブロックと同じ作法）
   ------------------------------------------------------------
   土台は apple.design.md 準拠のまま（余白4pxスケール・ウェイト400/600/700・
   ドロップ影を使わないヘアラインリング・AAコントラスト）。
   「楽しさ」は 色数を増やすことではなく、①モジュールごとの1色 ②絵文字スタンプ
   ③押した瞬間の手応え（scale + 色の変化）で出す。装飾は足さない。
   ============================================================ */

/* ---------- §G-1 モジュール別テーマトークン ----------
   コントラスト検算は 検証レポート/2026-08-01_学生側モックF1/00_デザインシステム.md §4 に実出力あり。
   役割:
     --gr-*        : 塗り（白文字を載せてよい／リング・アイコン・4px レール）
     --gr-*-deep   : 文字色（白地・soft地の両方で AA 4.5 以上）
     --gr-*-soft   : テーマ地（この上の小さい文字は -deep か --gr-ink-muted のみ）
     --gr-*-line   : 装飾罫・リングのトラック（文字を載せない）
   ---------------------------------------------------------- */
:root{
  /* ① ホーム（青）＝既存 --sp-accent と同値。既存トークンは書き換えず別名で持つ */
  --gr-home:#0066CC;   --gr-home-deep:#0052A3;   --gr-home-soft:#EAF2FB;   --gr-home-line:#AECBEE;
  /* ② 未来スケッチ（緑）＝状態色 --sp-success とは別値（意味の衝突を避ける） */
  --gr-sketch:#0F7A52; --gr-sketch-deep:#0B5C3E; --gr-sketch-soft:#E6F4EE; --gr-sketch-line:#A4D6C0;
  /* ③ キャンパスロードマップ（紫） */
  --gr-road:#6D28D9;   --gr-road-deep:#5B21B6;   --gr-road-soft:#F1EBFD;   --gr-road-line:#D6C6F5;
  /* ④ ステップアップノート（琥珀）＝状態色 --sp-warning とは別値 */
  --gr-step:#B45309;   --gr-step-deep:#8A3F07;   --gr-step-soft:#FCF1E2;   --gr-step-line:#E7C89A;
  /* ⑤ 自分の記録（ピンク） */
  --gr-rec:#BE185D;    --gr-rec-deep:#9D174D;    --gr-rec-soft:#FCEBF2;    --gr-rec-line:#F0BFD4;

  /* テーマ地の上で使ってよい無彩色の補助文字色（= --sp-neutral-deep と同値）。
     【重要】--sp-text-soft(#6E6E73) は 5 テーマの soft 地で AA 4.5 を割る（4.36〜4.54）。
     テーマ地の上の補助文字は必ずこの変数を使う。検算は台帳 §4 参照 */
  --gr-ink-muted:#66666B;

  /* 実行時テーマ（既定＝ホーム青）。.gr-theme-* を祖先に付けて差し替える */
  --gr-theme:var(--gr-home);
  --gr-theme-deep:var(--gr-home-deep);
  --gr-theme-soft:var(--gr-home-soft);
  --gr-theme-line:var(--gr-home-line);

  /* モーション（better-ui: 状態変化は「中断できる transition」で、keyframes は使わない）*/
  --gr-ease:cubic-bezier(.2,.7,.3,1);   /* ease-out 系 */
  --gr-dur:.18s;
}

/* ---------- §G-2 テーマのスコープクラス ----------
   画面のルート要素（.sp-page など）か、部品の親に 1 つ付ける。
   これだけで配下の .gr-* が全部そのモジュール色になる。
   ---------------------------------------------------------- */
.gr-theme-home{--gr-theme:var(--gr-home);--gr-theme-deep:var(--gr-home-deep);--gr-theme-soft:var(--gr-home-soft);--gr-theme-line:var(--gr-home-line)}
.gr-theme-sketch{--gr-theme:var(--gr-sketch);--gr-theme-deep:var(--gr-sketch-deep);--gr-theme-soft:var(--gr-sketch-soft);--gr-theme-line:var(--gr-sketch-line)}
.gr-theme-road{--gr-theme:var(--gr-road);--gr-theme-deep:var(--gr-road-deep);--gr-theme-soft:var(--gr-road-soft);--gr-theme-line:var(--gr-road-line)}
.gr-theme-step{--gr-theme:var(--gr-step);--gr-theme-deep:var(--gr-step-deep);--gr-theme-soft:var(--gr-step-soft);--gr-theme-line:var(--gr-step-line)}
.gr-theme-rec{--gr-theme:var(--gr-rec);--gr-theme-deep:var(--gr-rec-deep);--gr-theme-soft:var(--gr-rec-soft);--gr-theme-line:var(--gr-rec-line)}

/* ---------- §G-3 モジュール見出し帯 .gr-modhead ----------
   画面の一番上に置く「ここは何のモジュールか」の 1 行。
   左 4px レール＋テーマ地。タイトルは 17px/600（既存 .sp-section-title と同寸）
   ---------------------------------------------------------- */
.gr-modhead{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:var(--gr-theme-soft);
  border-radius:var(--sp-radius);
  border-left:4px solid var(--gr-theme);
}
.gr-modhead-icon{
  flex:none;width:32px;height:32px;border-radius:10px;   /* 外14 - 内padding4 = 10 の同心円半径 */
  display:flex;align-items:center;justify-content:center;
  background:var(--gr-theme);color:#fff;font-size:16px;line-height:1;
}
.gr-modhead-main{flex:1;min-width:0}
.gr-modhead-title{font-size:17px;line-height:1.45;font-weight:600;letter-spacing:-0.01em;color:var(--gr-theme-deep);margin:0}
.gr-modhead-sub{font-size:13px;line-height:1.5;color:var(--gr-ink-muted);margin:2px 0 0}

/* ---------- §G-4 公開範囲の安心表示 .gr-privacy（裁定 D-1） ----------
   「自分だけが見られる」ことを、記入させる画面に必ず出す。
   fail-close の思想をユーザーに見せる部品なので、目立たせすぎず必ず在る、が正解。
   ---------------------------------------------------------- */
.gr-privacy{
  display:flex;align-items:flex-start;gap:8px;
  padding:8px 12px;
  background:var(--sp-neutral-soft);
  border-radius:var(--sp-radius-sm);
  font-size:11px;line-height:1.5;font-weight:600;
  color:var(--sp-neutral-deep);
}
.gr-privacy svg{flex:none;width:14px;height:14px;margin-top:1px}
.gr-privacy span{font-weight:400}

/* ---------- §G-5 ワンタップ感情スタンプ .gr-chip-emotion ----------
   <button type="button" class="gr-chip-emotion" aria-pressed="false">
     <span class="gr-chip-emotion-face" aria-hidden="true">😄</span>
     <span class="gr-chip-emotion-label">たのしい</span>
   </button>
   ・選択状態は aria-pressed で表す（色だけに依存しない：枠の太さも変わる）
   ・タップ領域 44px 以上／押下 scale .94（既存 .sp-btn:active と同じ手触りの系統）
   ---------------------------------------------------------- */
.gr-emotion-row{
  display:flex;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0;padding:2px 0 6px;list-style:none;
}
.gr-emotion-row::-webkit-scrollbar{display:none}
.gr-emotion-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;
  margin:0;padding:0;list-style:none;
}
.gr-chip-emotion{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  flex:none;min-width:76px;min-height:64px;padding:8px 10px;
  font:inherit;cursor:pointer;
  background:var(--sp-surface);
  color:var(--sp-text);
  border:1px solid var(--sp-line);
  border-radius:14px;
  transition:background var(--gr-dur) var(--gr-ease),
             border-color var(--gr-dur) var(--gr-ease),
             color var(--gr-dur) var(--gr-ease),
             transform var(--gr-dur) var(--gr-ease),
             box-shadow var(--gr-dur) var(--gr-ease);
}
.gr-chip-emotion:hover{border-color:var(--gr-theme-line);background:#FAFAFC}
.gr-chip-emotion:active{transform:scale(.94)}
.gr-chip-emotion-face{font-size:24px;line-height:1.1}
.gr-chip-emotion-label{font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft);white-space:nowrap}
/* 選択（押されている）状態 */
.gr-chip-emotion[aria-pressed="true"]{
  background:var(--gr-theme-soft);
  border-color:var(--gr-theme);
  box-shadow:inset 0 0 0 1px var(--gr-theme);   /* 2px 相当の枠を「太らせずに」出す＝レイアウトを揺らさない */
  color:var(--gr-theme-deep);
}
.gr-chip-emotion[aria-pressed="true"] .gr-chip-emotion-label{color:var(--gr-theme-deep)}
/* 横長（1行）の派生。ホームのワンタップ感情ログなど、縦を使えない場所用 */
.gr-chip-emotion.is-inline{flex-direction:row;gap:6px;min-height:44px;min-width:0;border-radius:var(--sp-radius-full);padding:8px 14px}
.gr-chip-emotion.is-inline .gr-chip-emotion-face{font-size:18px}
.gr-chip-emotion.is-inline .gr-chip-emotion-label{font-size:13px}

/* ---------- §G-6 2層タグ .gr-tag（裁定 D-5） ----------
   .is-common = 大学共通辞書（実線）／ .is-custom = 学生オリジナル（破線）
   色だけでなく「線種」で差を付ける＝色覚に依存しない
   ---------------------------------------------------------- */
.gr-tag-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.gr-tag{
  display:inline-flex;align-items:center;gap:4px;
  max-width:100%;
  font-size:11px;line-height:1.4;font-weight:600;
  padding:3px 10px;border-radius:var(--sp-radius-full);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid transparent;
}
.gr-tag::before{content:"#";font-weight:700;opacity:.7}
.gr-tag.is-common{
  background:var(--gr-theme-soft);
  color:var(--gr-theme-deep);
  border-color:var(--gr-theme-line);
  border-style:solid;
}
.gr-tag.is-custom{
  background:var(--sp-surface);
  color:var(--gr-theme-deep);
  border-color:var(--gr-theme-line);
  border-style:dashed;
}
/* 押せるタグ（絞り込み用）。選択状態は aria-pressed */
button.gr-tag{cursor:pointer;font-family:inherit;min-height:26px;
  transition:background var(--gr-dur) var(--gr-ease),transform var(--gr-dur) var(--gr-ease)}
button.gr-tag:active{transform:scale(.95)}
button.gr-tag[aria-pressed="true"]{background:var(--gr-theme);color:#fff;border-color:var(--gr-theme);border-style:solid}
button.gr-tag[aria-pressed="true"]::before{opacity:.85}
/* 削除つきタグ（記録編集画面で付与済みタグを外す） */
.gr-tag-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-right:-4px;border-radius:50%;
  background:none;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;line-height:1;
}
.gr-tag-x:hover{background:rgba(0,0,0,.08)}

/* ---------- §G-7 記録カード .gr-card-record（S-40/S-41） ----------
   「デジタルスクラップブック」の主役。写真＋感情＋タグ。
   写真は内側に 1px の陰画線（image outline）を入れて白背景に浮かせる。
   ---------------------------------------------------------- */
.gr-record-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (min-width:600px){.gr-record-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
.gr-card-record{
  display:flex;flex-direction:column;
  background:var(--sp-surface);
  border-radius:var(--sp-radius);
  box-shadow:var(--sp-shadow);
  overflow:hidden;
  text-align:left;
  transition:transform var(--gr-dur) var(--gr-ease),box-shadow var(--gr-dur) var(--gr-ease);
}
a.gr-card-record,button.gr-card-record{width:100%;font:inherit;color:inherit;border:none;padding:0;cursor:pointer}
a.gr-card-record:hover,button.gr-card-record:hover{text-decoration:none;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
a.gr-card-record:active,button.gr-card-record:active{transform:scale(.985)}
.gr-record-photo{
  position:relative;aspect-ratio:4/3;background:var(--sp-neutral-soft);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.gr-record-photo img{width:100%;height:100%;object-fit:cover;display:block}
.gr-record-photo .gr-record-noimg{font-size:24px;line-height:1;opacity:.55}
/* 写真の上に重ねる感情スタンプ（写真が無いカードでは .gr-record-body の先頭に置く） */
.gr-record-stamp{
  position:absolute;left:8px;bottom:8px;
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:var(--sp-radius-full);
  background:rgba(255,255,255,.94);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-theme-deep);
  max-width:calc(100% - 16px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.gr-record-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.gr-record-meta{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft);
}
.gr-record-date{font-variant-numeric:tabular-nums}
.gr-record-title{font-size:15px;line-height:1.45;font-weight:600;margin:0;color:var(--sp-text)}
.gr-record-memo{
  font-size:13px;line-height:1.5;color:var(--sp-text-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 写真なしの版（記録は文字だけでも成立させる） */
.gr-card-record.is-nophoto .gr-record-body{padding-top:12px}
.gr-card-record.is-nophoto .gr-record-stamp{position:static;align-self:flex-start;background:var(--gr-theme-soft);box-shadow:none}

/* ---------- §G-8 学期カード .gr-card-term（S-44） ----------
   「何周まわしたか」が見える学期の単位。左レール＋成長サイクルリング。
   ---------------------------------------------------------- */
.gr-card-term{
  position:relative;
  background:var(--sp-surface);
  border-radius:var(--sp-radius);
  box-shadow:var(--sp-shadow);
  overflow:hidden;
}
.gr-card-term+.gr-card-term{margin-top:12px}
.gr-card-term::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gr-theme);
}
.gr-term-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 16px 8px 20px;
  border-bottom:1px solid var(--sp-line-soft);
}
.gr-term-name{font-size:15px;line-height:1.45;font-weight:600;margin:0;font-variant-numeric:tabular-nums}
.gr-term-round{
  font-size:11px;line-height:1.4;font-weight:600;
  color:var(--gr-theme-deep);background:var(--gr-theme-soft);
  border-radius:var(--sp-radius-full);padding:3px 8px;
}
.gr-term-head .sp-badge{margin-left:auto}
.gr-term-body{display:flex;gap:14px;align-items:flex-start;padding:12px 16px 14px 20px}
.gr-term-fields{flex:1;min-width:0;margin:0}
.gr-term-fields dt{font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft);margin:0}
.gr-term-fields dd{font-size:13px;line-height:1.5;color:var(--sp-text);margin:2px 0 10px}
.gr-term-fields dd:last-child{margin-bottom:0}
.gr-term-fields .is-empty{color:var(--sp-text-dim)}

/* ---------- §G-9 成長サイクルリング .gr-cycle-ring（図2） ----------
   Plan（計画）→ 実践・記録 → 振り返り → 次へ応用 の 4 分円。
   SVG は各画面の HTML に直書き（部品見本 00_gr-components-sample.html の
   markup をそのままコピーすること）。CSS は色と太さだけを担当する。
   状態: 既定=トラック／.is-done=テーマ色／.is-current=テーマ色＋太い
   （色だけでなく太さでも差が出るので色覚に依存しない。凡例テキストも必須）
   ---------------------------------------------------------- */
.gr-cycle-ring{flex:none;display:block;width:96px;height:96px}
.gr-cycle-seg{
  fill:none;stroke:var(--gr-theme-line);stroke-width:9;stroke-linecap:round;
  transition:stroke var(--gr-dur) var(--gr-ease),stroke-width var(--gr-dur) var(--gr-ease);
}
.gr-cycle-seg.is-done{stroke:var(--gr-theme)}
.gr-cycle-seg.is-current{stroke:var(--gr-theme);stroke-width:13}
.gr-cycle-center{fill:var(--gr-theme-deep);font-size:19px;font-weight:700;text-anchor:middle}
.gr-cycle-center-sub{fill:var(--gr-ink-muted);font-size:9.5px;font-weight:600;text-anchor:middle}
/* リングの凡例（4フェーズ名。リング単体で意味が伝わらないので必ず併記する） */
.gr-cycle-legend{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0 0;padding:0;list-style:none;
  font-size:11px;line-height:1.4;color:var(--sp-text-soft)}
.gr-cycle-legend li{display:flex;align-items:center;gap:4px}
.gr-cycle-legend .gr-cycle-dot{width:8px;height:8px;border-radius:50%;background:var(--gr-theme-line);flex:none}
.gr-cycle-legend li.is-done .gr-cycle-dot{background:var(--gr-theme)}
.gr-cycle-legend li.is-done{color:var(--gr-theme-deep);font-weight:600}
.gr-cycle-legend li.is-current .gr-cycle-dot{background:var(--gr-theme);box-shadow:0 0 0 3px var(--gr-theme-soft)}
.gr-cycle-legend li.is-current{color:var(--gr-theme-deep);font-weight:700}

/* ---------- §G-10 達成バッジ .gr-badge-achieve（みらいポイント連動） ----------
   獲得済み＝テーマ地＋実線／未獲得＝無彩色＋破線。数字は .sp-num を併用。
   ---------------------------------------------------------- */
.gr-badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,1fr));gap:8px}
.gr-badge-achieve{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--gr-theme-soft);
  border:1px solid var(--gr-theme-line);
  border-radius:14px;
}
.gr-badge-achieve-icon{
  flex:none;width:32px;height:32px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gr-theme);color:#fff;font-size:17px;line-height:1;
}
.gr-badge-achieve-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.gr-badge-achieve-name{font-size:13px;line-height:1.4;font-weight:600;color:var(--gr-theme-deep);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gr-badge-achieve-pt{font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-ink-muted)}
.gr-badge-achieve.is-locked{
  background:var(--sp-surface);border-color:var(--sp-line);border-style:dashed;
}
.gr-badge-achieve.is-locked .gr-badge-achieve-icon{background:var(--sp-neutral-soft);color:var(--sp-text-dim)}
.gr-badge-achieve.is-locked .gr-badge-achieve-name{color:var(--sp-text-soft)}
.gr-badge-achieve.is-locked .gr-badge-achieve-pt{color:var(--sp-text-dim)}

/* ---------- §G-11 「変化＝成長」タイムライン .gr-timeline（S-47） ----------
   主役は「変えた理由」。前の値は否定せず「前はこうだった」と並べるだけにする。
   構造は既存 .sp-steps と同じ作法（::before=縦線 / ::after=ドット）。
   ---------------------------------------------------------- */
.gr-timeline{list-style:none;margin:0;padding:0}
.gr-timeline-item{
  position:relative;padding:0 0 20px 26px;
}
.gr-timeline-item::before{   /* 縦線 */
  content:"";position:absolute;left:5px;top:16px;bottom:0;width:2px;background:var(--gr-theme-line);
}
.gr-timeline-item:last-child{padding-bottom:0}
.gr-timeline-item:last-child::before{display:none}
.gr-timeline-item::after{    /* ドット */
  content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--sp-surface);border:2px solid var(--gr-theme-line);box-sizing:border-box;
}
.gr-timeline-item.is-current::after{background:var(--gr-theme);border-color:var(--gr-theme);
  box-shadow:0 0 0 3px var(--gr-theme-soft)}
.gr-timeline-when{
  font-size:11px;line-height:1.4;font-weight:600;color:var(--sp-text-soft);
  font-variant-numeric:tabular-nums;margin:0;
}
.gr-timeline-title{font-size:15px;line-height:1.45;font-weight:600;margin:2px 0 0;color:var(--sp-text)}
.gr-timeline-from{font-size:13px;line-height:1.5;color:var(--sp-text-soft);margin:4px 0 0}
.gr-timeline-from b{font-weight:600;color:var(--sp-text)}
/* 変えた理由＝この画面の主役。テーマ地の箱に入れて視線を集める */
.gr-timeline-reason{
  margin:8px 0 0;padding:10px 12px;
  background:var(--gr-theme-soft);border-radius:var(--sp-radius-sm);
  font-size:13px;line-height:1.6;color:var(--sp-text);
}
.gr-timeline-reason-label{
  display:block;font-size:11px;line-height:1.4;font-weight:600;
  color:var(--gr-theme-deep);margin:0 0 2px;
}
.gr-timeline-grow{   /* 「これも成長です」の肯定ラベル */
  display:inline-flex;align-items:center;gap:4px;margin-top:8px;
  font-size:11px;line-height:1.4;font-weight:600;
  color:var(--gr-theme-deep);background:var(--gr-theme-soft);
  border-radius:var(--sp-radius-full);padding:3px 10px;
}

/* ---------- §G-12 ポジティブ誘導プロンプト .gr-prompt（S-45） ----------
   「書けない学生」に最初の一文を渡すための定型文バンクの表示枠。
   ---------------------------------------------------------- */
.gr-prompt{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--sp-radius);
  background:var(--gr-theme-soft);
  border-left:4px solid var(--gr-theme);
}
.gr-prompt-icon{flex:none;font-size:17px;line-height:1.3}
.gr-prompt-body{min-width:0;flex:1}
.gr-prompt-title{font-size:13px;line-height:1.45;font-weight:600;color:var(--gr-theme-deep);margin:0}
.gr-prompt-text{font-size:13px;line-height:1.6;color:var(--sp-text);margin:4px 0 0}
.gr-prompt-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

/* ---------- §G-13 空状態 .gr-empty（フレンドリー版） ----------
   既存 .sp-empty（イラスト無し）は残したまま、成長系モジュール専用に
   「構造だけの簡素な SVG ＋ 誘い文句 ＋ 主アクション」を足す。
   凝った描き込みはしない（線と面だけ／12 要素以内）。
   ---------------------------------------------------------- */
.gr-empty{text-align:center;padding:28px 16px}
.gr-empty-art{width:112px;height:84px;display:block;margin:0 auto 14px}
.gr-empty-art .gr-art-fill{fill:var(--gr-theme-soft)}
.gr-empty-art .gr-art-line{fill:none;stroke:var(--gr-theme-line);stroke-width:2;stroke-linecap:round}
.gr-empty-art .gr-art-key{fill:var(--gr-theme)}
.gr-empty-title{font-size:15px;line-height:1.45;font-weight:600;color:var(--sp-text);margin:0}
.gr-empty-text{font-size:13px;line-height:1.6;color:var(--sp-text-soft);margin:6px 0 16px}

/* ---------- §G-14 テーマ色の主ボタン .gr-btn-theme ----------
   使い方: class="sp-btn gr-btn-theme"（サイズ・角丸・押下 scale は既存 .sp-btn のまま）
   【1画面に1つまで】そのモジュールで一番やってほしい行動にだけ使う。
   .sp-btn-primary（青）と併用しない。それ以外の主ボタンは既存の青のままにする
   ＝「アプリ全体で主アクションは青」という学習を壊さないため。
   ---------------------------------------------------------- */
.gr-btn-theme{background:var(--gr-theme);color:#fff;border-color:var(--gr-theme)}
.gr-btn-theme:hover:not(:disabled){background:var(--gr-theme-deep);border-color:var(--gr-theme-deep);color:#fff}

/* ---------- §G-15 補助 ---------- */
/* テーマ地の上に置く注記（--sp-text-soft は AA を割るのでこちらを使う） */
.gr-note-on-theme{font-size:11px;line-height:1.5;color:var(--gr-ink-muted);margin:0}
/* 横スクロールの見切れ示唆（既存 .sp-tabs-wrap と同じ考え方の gr- 版） */
.gr-scroller-wrap{position:relative}
.gr-scroller-wrap::after{
  content:"";position:absolute;right:0;top:0;bottom:6px;width:24px;pointer-events:none;
  background:linear-gradient(to left,var(--sp-bg),rgba(245,245,247,0));
}
/* カード地の上で使うとき（白地の見切れ示唆） */
.gr-scroller-wrap.on-surface::after{background:linear-gradient(to left,var(--sp-surface),rgba(255,255,255,0))}

/* prefers-reduced-motion は sp.css 側の全体指定（transition-duration:.01ms）が
   そのまま効くため、ここでの追加指定は不要。transform も含めて無効化される */

/* ============================================================
   【S-48 / S-49 画面固有】ロードマップ担当の追記ブロック
   ============================================================ */

/* ---------- §G-S48 4年間のボード（S-48 キャンパスロードマップ） ----------
   在学年数 × 学期のグリッド。1学年=1枠、その中に前期/後期の2レーン。
   ・仮決め＝破線（色ではなく線種で区別＝色だけに意味を持たせない）
   ・いまの学期＝レーンをテーマ地＋内側リング（位置がひと目で分かる）
   ・D&D は「グリップ＋cursor:grab＋押下 scale」で見た目だけ示唆（モックは動かない）
   ---------------------------------------------------------- */
.gr-s48-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 12px;padding:0;list-style:none;
  font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-ink-muted)}
.gr-s48-legend li{display:flex;align-items:center;gap:5px}
.gr-s48-swatch{width:12px;height:12px;border-radius:4px;flex:none;box-sizing:border-box;
  background:var(--sp-surface);border:1px solid var(--sp-line)}
.gr-s48-swatch.is-done{background:var(--gr-theme);border-color:var(--gr-theme)}
.gr-s48-swatch.is-now{background:var(--gr-theme-soft);border:2px solid var(--gr-theme)}
.gr-s48-swatch.is-plan{background:transparent;border-style:dashed;border-color:var(--gr-theme-line)}

.gr-s48-board{list-style:none;margin:0;padding:0}
.gr-s48-board>li+li{margin-top:10px}
.gr-s48-year{background:var(--sp-surface);border:1px solid var(--sp-line);
  border-radius:var(--sp-radius);overflow:hidden}
.gr-s48-year.is-current{border-color:var(--gr-theme-line)}
.gr-s48-year-head{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;background:var(--sp-bg)}
.gr-s48-year.is-current .gr-s48-year-head{background:var(--gr-theme-soft)}
.gr-s48-year-name{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.4;font-weight:700;color:var(--sp-text)}
.gr-s48-year.is-current .gr-s48-year-name{color:var(--gr-theme-deep)}
.gr-s48-year-ay{font-size:11px;font-weight:600;color:var(--gr-ink-muted);font-variant-numeric:tabular-nums}
.gr-s48-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
.gr-s48-lane{display:flex;flex-direction:column;gap:6px;min-height:80px;padding:8px;
  background:var(--sp-bg);border-radius:var(--sp-radius-sm)}
.gr-s48-lane.is-now{background:var(--gr-theme-soft);box-shadow:inset 0 0 0 2px var(--gr-theme)}
.gr-s48-lane-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;
  font-size:11px;line-height:1.4;font-weight:700;color:var(--gr-ink-muted)}
.gr-s48-now{display:inline-flex;align-items:center;padding:1px 8px;border-radius:var(--sp-radius-full);
  background:var(--gr-theme);color:#fff;font-size:11px;line-height:1.4;font-weight:600}
.gr-s48-item{position:relative;display:flex;width:100%;font:inherit;text-align:left;
  padding:8px 22px 8px 10px;cursor:grab;
  background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-radius-sm);
  transition:border-color var(--gr-dur) var(--gr-ease),box-shadow var(--gr-dur) var(--gr-ease),
             transform var(--gr-dur) var(--gr-ease)}
.gr-s48-item:hover{border-color:var(--gr-theme-line);box-shadow:var(--sp-shadow)}
.gr-s48-item:active{transform:scale(.96)}
.gr-s48-item.is-current{border-color:var(--gr-theme)}
.gr-s48-item.is-plan{background:transparent;border-style:dashed;border-color:var(--gr-theme-line)}
.gr-s48-grip{position:absolute;top:8px;right:6px;line-height:0;color:var(--sp-text-dim)}
.gr-s48-item-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.gr-s48-item-title{font-size:13px;line-height:1.45;font-weight:600;color:var(--sp-text);overflow-wrap:anywhere}
.gr-s48-slot{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;
  padding:6px 8px;font:inherit;font-size:11px;font-weight:600;cursor:pointer;
  background:transparent;border:1px dashed var(--gr-theme-line);border-radius:var(--sp-radius-sm);
  color:var(--gr-theme-deep);
  transition:background var(--gr-dur) var(--gr-ease),border-color var(--gr-dur) var(--gr-ease),
             transform var(--gr-dur) var(--gr-ease)}
.gr-s48-slot:hover{background:var(--sp-surface);border-color:var(--gr-theme)}
.gr-s48-slot:active{transform:scale(.96)}

/* ---------- §G-S49 版比較の差分（S-49 ロードマップ 版比較） ----------
   追加/移動/外した を「記号＋色」の2系統で区別する（色だけに意味を持たせない）。
   「やめた」「あきらめた」の語彙は使わない＝いまは外している／いつでも戻せる、と書く。
   ---------------------------------------------------------- */
.gr-s49-vs{display:flex;align-items:stretch;gap:8px}
.gr-s49-vs-col{flex:1;min-width:0;padding:10px 8px;text-align:center;
  background:var(--sp-bg);border-radius:var(--sp-radius-sm)}
.gr-s49-vs-col.is-current{background:var(--gr-theme-soft);box-shadow:inset 0 0 0 1px var(--gr-theme-line)}
.gr-s49-vs-label{margin:0;font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-ink-muted)}
.gr-s49-vs-name{margin:2px 0 0;font-size:17px;line-height:1.35;font-weight:700;color:var(--sp-text)}
.gr-s49-vs-col.is-current .gr-s49-vs-name{color:var(--gr-theme-deep)}
.gr-s49-vs-date{margin:2px 0 0;font-size:11px;line-height:1.4;color:var(--gr-ink-muted);
  font-variant-numeric:tabular-nums}
.gr-s49-vs-count{margin:8px 0 0;font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-ink-muted)}
.gr-s49-vs-arrow{flex:none;align-self:center;font-size:17px;font-weight:700;color:var(--gr-theme)}

.gr-s49-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 4px;padding:0;list-style:none;
  font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-ink-muted)}
.gr-s49-legend li{display:flex;align-items:center;gap:5px}
.gr-s49-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:6px;font-size:12px;font-weight:700;
  background:var(--sp-neutral-soft);color:var(--sp-neutral-deep)}
.gr-s49-legend li.is-added .gr-s49-mark,.gr-s49-row.is-added .gr-s49-mark,.gr-s49-mark.is-added{
  background:var(--sp-success-soft);color:var(--sp-success-deep)}
.gr-s49-legend li.is-moved .gr-s49-mark,.gr-s49-row.is-moved .gr-s49-mark,.gr-s49-mark.is-moved{
  background:var(--gr-theme-soft);color:var(--gr-theme-deep)}
.gr-s49-legend li.is-removed .gr-s49-mark,.gr-s49-row.is-removed .gr-s49-mark,.gr-s49-mark.is-removed{
  background:var(--sp-neutral-soft);color:var(--sp-neutral-deep)}

.gr-s49-group{display:flex;align-items:center;gap:6px;margin:18px 0 2px;
  font-size:11px;line-height:1.4;font-weight:700;color:var(--gr-ink-muted)}
.gr-s49-diff{list-style:none;margin:0;padding:0}
.gr-s49-row{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--sp-line-soft)}
.gr-s49-row:first-child{border-top:none}
.gr-s49-main{flex:1;min-width:0}
.gr-s49-title{margin:0;font-size:15px;line-height:1.45;font-weight:600;color:var(--sp-text)}
.gr-s49-move{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:6px 0 0;
  font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-ink-muted)}
.gr-s49-arrow{color:var(--gr-theme);font-weight:700}
.gr-s49-note{margin:6px 0 0;font-size:11px;line-height:1.5;color:var(--gr-ink-muted)}
.gr-s49-kept{display:flex;align-items:center;gap:6px;margin:16px 0 0;padding-top:12px;
  border-top:1px solid var(--sp-line-soft);
  font-size:11px;line-height:1.4;font-weight:600;color:var(--gr-ink-muted)}
/* .sp-badge の色だけを差し替える修飾クラス（バッジ部品そのものは作り直さない） */
.gr-s49-now{background:var(--gr-theme-soft);color:var(--gr-theme-deep)}